@ng-native/components 0.0.1 → 0.1.1

package/dist/virtual-list.js

@@ -0,0 +1,1150 @@
+import { Component, DestroyRef, Directive, ElementRef, TemplateRef, afterEveryRender, booleanAttribute, computed, contentChild, inject, input, linkedSignal, numberAttribute, output, signal, viewChild, } from '@angular/core';
+import { nativePlatform, pinnedRange, } from '@ng-native/fabric';
+import { HeightIndex } from "./height-index.js";
+import { dismissKeyboardOnTap } from "./keyboard-taps.js";
+import { RefreshControl } from "./refresh-control.js";
+import { TemplateSlot } from "./template-slot.js";
+import { View } from "./view.js";
+import { ScrollViewProps } from "./scroll-view-props.js";
+import * as i0 from "@angular/core";
+/**
+ * Marks the template drawn between two rows: `<ng-template virtualListSeparator let-leading>`.
+ * FlatList's `ItemSeparatorComponent`.
+ */
+export class VirtualListSeparator {
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: VirtualListSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: VirtualListSeparator, isStandalone: true, selector: "ng-template[virtualListSeparator]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: VirtualListSeparator, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[virtualListSeparator]' }]
+        }] });
+/** A parked slot: out of layout, out of sight, and out of the accessibility tree. */
+const PARKED = Object.freeze({ display: 'none' });
+/** How many hidden slots of each row type are kept ready for reuse. */
+const PARK_LIMIT = 6;
+/** The style of a row that sizes itself and needs nothing else: in flow, where it falls. */
+const IN_FLOW = Object.freeze({});
+/** Points of drift below which a held position is left alone, as UIKit rounds to half-points. */
+const HOLD_TOLERANCE = 0.5;
+/**
+ * Windowed list: a native scroll view whose content is sized to the full list, with only the
+ * visible slice rendered. Commits as `RCTScrollView`.
+ *
+ * RN's FlatList, SectionList and VirtualizedList are a large React component tree, and none of
+ * it is reachable. This is the small equivalent. Angular's own `@for` does the rendering, so
+ * tracking, reuse and destruction all behave normally, and the loop stays in the caller's
+ * template:
+ *
+ * ```html
+ * <virtual-list #list [items]="rows()" [itemHeight]="44" (endReached)="loadMore()">
+ *   <text listHeader>Header</text>
+ *   @for (row of list.window(); track row.slot) {
+ *     <view [virtualListRow]="row"><text>{{ row.item.label }}</text></view>
+ *   }
+ *   <text listFooter>Footer</text>
+ * </virtual-list>
+ * ```
+ *
+ * With `itemHeight`, every row's size is known up front and each is absolutely positioned at its
+ * offset. Without it, rows size themselves, as a feed's posts and a chat's messages do: the window
+ * is laid out in normal flow after a spacer standing in for the rows above it, so native places
+ * every row correctly in the frame it first appears, and each row's layout tells the list its
+ * height for sizing what is not rendered. Until a row has been measured it counts as
+ * `estimatedItemHeight`. Measurements are kept by `keyExtractor`, so they follow their item across
+ * inserts, removals and moves. `virtualListRow` on each row's view applies its style and reports
+ * its layout; `[style]="row.style"` still works for fixed heights, which need no measuring.
+ *
+ * Content marked `listHeader` and `listFooter` renders above and below the rows in normal flow,
+ * as FlatList's header and footer components do. A `<refresh-control>` projects like any child.
+ *
+ * `<ng-template virtualListSeparator let-leading let-trailing="trailingItem">` is drawn between
+ * each pair of rows and not after the last, as FlatList's `ItemSeparatorComponent` is. It is drawn
+ * inside the leading row's slot, at its trailing edge, so `itemHeight` includes it the way
+ * `getItemLayout`'s `length` includes it in RN; a measured row has it drawn over its trailing edge
+ * once its height is known. The slot it sits in lets touches through to the row underneath.
+ *
+ * `horizontal` swaps the axis: rows are placed by `left` and sized by `width`, and the offset is
+ * read from `contentOffset.x`. `inverted` is a scale of -1 on the list and on each row, which is
+ * how FlatList does it too - the list scrolls from the bottom and each row is flipped back the
+ * right way up, so a chat transcript needs no reversed array.
+ *
+ * `stickyIndices` pins a row to the leading edge while the rows under it scroll past, which is
+ * FlatList's `stickyHeaderIndices` counted without the header. `stickyHeader` pins the
+ * `listHeader` content the same way, FlatList's index 0 when it has a `ListHeaderComponent`, and
+ * the first sticky row pushes it off as RN's sticky headers push each other. Neither is native:
+ * RN's `ScrollView.js` translates a sticky child against the scroll offset in JavaScript, and a
+ * row here follows the offset the same way while it is the current one - by its `top` when
+ * absolutely positioned, by a transform when in flow.
+ *
+ * What is on screen stays on screen when a measured row above it turns out taller or shorter than
+ * its estimate: the offset is corrected by the difference. `maintainVisibleContentPosition` does
+ * the same for rows inserted or removed above it, which a feed receiving new posts and a chat
+ * loading older messages above the ones being read both need.
+ *
+ * ponytail: viewability is `itemVisiblePercentThreshold` only: `minimumViewTime` and
+ * `waitForInteraction` are timing policy on top of the same measurement, and nothing has needed
+ * them. A separator is not told `highlighted`, which RN drives from the row's press state. A
+ * sticky header follows the scroll a commit behind native, where RN's is on the native driver. A
+ * held position is restored by a `scrollTo` after the commit, not in the mount as native
+ * `maintainVisibleContentPosition` is, so a correction made mid-fling lands where the last scroll
+ * event said the list was.
+ */
+export class VirtualList extends ScrollViewProps {
+    items = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /**
+     * A fixed height, or a function for variable ones, when every row's size is known up front. The
+     * function form builds a cumulative offset table and binary-searches it, which is what section
+     * lists need: a header row and an item row are different heights, so uniform maths cannot place
+     * them. Leave it unset for rows that size themselves.
+     */
+    itemHeight = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "itemHeight" }] : /* istanbul ignore next */ []));
+    /**
+     * What a row that sizes itself counts as until it has been measured. The closer it is, the more
+     * honest the scroll bar is and the less a jump to an unmeasured row has to correct.
+     */
+    estimatedItemHeight = input(50, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "estimatedItemHeight" }] : /* istanbul ignore next */ []));
+    /**
+     * An item's identity, as FlatList's `keyExtractor`: what a measured height, a slot and a held
+     * position follow across an insert. Without it an item is its own key, which is enough for items
+     * that are replaced, not copied, when they change.
+     */
+    keyExtractor = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "keyExtractor" }] : /* istanbul ignore next */ []));
+    /**
+     * What kind of row an item is, when rows of different kinds share the list: a text post and a
+     * photo post, a message and a date divider. A slot is only ever recycled into a row of the same
+     * type, so its views are reused rather than torn down for another kind's, as UIKit's reuse
+     * identifiers and FlashList's `getItemType` do.
+     */
+    itemType = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "itemType" }] : /* istanbul ignore next */ []));
+    /** Keep what is on screen still when rows are inserted or removed before it. */
+    maintainVisibleContentPosition = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "maintainVisibleContentPosition" }] : /* istanbul ignore next */ []));
+    /** Rows rendered beyond each edge of the viewport, to cover fling gaps. */
+    overscan = input(4, { ...(ngDevMode ? { debugName: "overscan" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** How close to the end, in viewport heights, `(endReached)` fires. RN's default is 2. */
+    endReachedThreshold = input(2, { ...(ngDevMode ? { debugName: "endReachedThreshold" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Lay the rows out along x instead of y, and scroll that way. */
+    horizontal = input(false, { ...(ngDevMode ? { debugName: "horizontal" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Start at the end and scroll backwards, with every row flipped back the right way up. */
+    inverted = input(false, { ...(ngDevMode ? { debugName: "inverted" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Rows that pin to the leading edge while the ones under them scroll past. Ascending; a row is
+     * pinned from the moment it would leave until the next sticky row pushes it off.
+     */
+    stickyIndices = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stickyIndices" }] : /* istanbul ignore next */ []));
+    /** Pin the `listHeader` content to the leading edge until the first sticky row pushes it off. */
+    stickyHeader = input(false, { ...(ngDevMode ? { debugName: "stickyHeader" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** What a tap in the list does while a text input has the keyboard up. See `ScrollView`. */
+    keyboardShouldPersistTaps = input('never', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "keyboardShouldPersistTaps" }] : /* istanbul ignore next */ []));
+    /** How much of a row must be on screen to count as viewable. RN's default is 0, meaning any. */
+    itemVisiblePercentThreshold = input(0, { ...(ngDevMode ? { debugName: "itemVisiblePercentThreshold" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * The scroll position is within `endReachedThreshold` of the end: once per item count, and again
+     * after the list has scrolled away from the end and come back.
+     */
+    endReached = output();
+    /** Which rows are on screen, and what changed since last time. */
+    viewableItemsChanged = output();
+    viewport = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewport" }] : /* istanbul ignore next */ []));
+    /** The leading edge of the viewport in content space, which sticky rows and viewability need. */
+    offset = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+    headerHeight = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerHeight" }] : /* istanbul ignore next */ []));
+    /** What native reported the content measures along the axis, once it has. */
+    contentSize = 0;
+    /** The item count `endReached` last fired for, cleared once the list is away from the end. */
+    endReachedFor = -1;
+    /** Slot styles are cached so a scroll does not hand Fabric new prop objects for stable rows. */
+    slots = new Map();
+    /** A separator's slot style, per row slot style, so it is as stable as the row's own. */
+    gapStyles = new WeakMap();
+    /** The same for a measured row's separator, by key, while its place and size stay put. */
+    measuredGaps = new Map();
+    separator = contentChild(VirtualListSeparator, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
+    refreshControl = contentChild(RefreshControl, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "refreshControl" }] : /* istanbul ignore next */ []));
+    /** See ScrollView: inside Android's swipe layout the list must see a drag first. */
+    nestedScroll = computed(() => nativePlatform() === 'android' && this.refreshControl() ? true : undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nestedScroll" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether native moves sticky rows. Each then stays at its own place in the list and native
+     * translates it on every frame the list scrolls, as RN's `ScrollViewStickyHeader` does; a
+     * translate committed from each scroll event lands a frame or more late, and on a fast fling
+     * the row shudders and comes away from the edge.
+     */
+    nativeSticky = this.engine.drivesScroll;
+    /** The offset once scrolling pauses, which the settled translate of a native-moved row is from. */
+    settled = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "settled" }] : /* istanbul ignore next */ []));
+    settleTimer;
+    /** What native is moving, by row view, with the transform kept beside the translate. */
+    drives = new Map();
+    canvasView = viewChild.required('rows', { ...(ngDevMode ? { debugName: "canvasView" } : /* istanbul ignore next */ {}), read: ElementRef });
+    /** Whether the scroll offset is needed as a signal, which only pinning needs. */
+    pinning = computed(() => this.stickyHeader() || this.stickyIndices().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pinning" }] : /* istanbul ignore next */ []));
+    /** Rows size themselves and are laid out in flow, rather than placed at a known offset. */
+    measuring = computed(() => this.itemHeight() === undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "measuring" }] : /* istanbul ignore next */ []));
+    /** Heights native has reported, by key. */
+    measured = new Map();
+    /** Bumped when a measurement changes, which is what re-sizes the list. */
+    measuredVersion = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "measuredVersion" }] : /* istanbul ignore next */ []));
+    /** Each item's key, or null when items are their own. */
+    keys = computed(() => {
+        const extract = this.keyExtractor();
+        return extract ? this.items().map(extract) : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "keys" }] : /* istanbul ignore next */ []));
+    keyAt(index) {
+        return this.keys()?.[index] ?? this.items()[index];
+    }
+    /**
+     * Each row's size and where it starts, for variable heights; uniform rows need no index at all.
+     * Built once per change of items. A measurement changes it in place and bumps
+     * `measuredVersion`, which is what everything that reads it depends on, so a row laying out
+     * costs a walk of the tree rather than a rebuild of every offset.
+     */
+    table = computed(() => {
+        const height = this.itemHeight();
+        if (typeof height === 'number')
+            return null;
+        const items = this.items();
+        const sizes = new Float64Array(items.length);
+        if (height) {
+            for (let i = 0; i < items.length; i++)
+                sizes[i] = height(items[i], i);
+            return new HeightIndex(sizes);
+        }
+        const estimate = this.estimatedItemHeight();
+        const keys = this.keys();
+        for (let i = 0; i < items.length; i++) {
+            sizes[i] =
+                this.measured.get(keys ? keys[i] : items[i]) ??
+                    (typeof estimate === 'number' ? estimate : estimate(items[i], i));
+        }
+        return new HeightIndex(sizes);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "table" }] : /* istanbul ignore next */ []));
+    /** Where each key is, so a measurement finds its row without a search. */
+    indexOfKey = computed(() => {
+        if (!this.measuring())
+            return null;
+        const map = new Map();
+        (this.keys() ?? this.items()).forEach((key, index) => map.set(key, index));
+        return map;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indexOfKey" }] : /* istanbul ignore next */ []));
+    /** The index, with a dependency on its measurements for whoever is reading it. */
+    layout() {
+        const table = this.table();
+        if (table)
+            this.measuredVersion();
+        return table;
+    }
+    /** The list's own total extent along its axis. */
+    extent = computed(() => {
+        const table = this.layout();
+        if (table)
+            return table.total;
+        return this.items().length * this.itemHeight();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "extent" }] : /* istanbul ignore next */ []));
+    canvas = computed(() => this.horizontal() ? { width: this.extent(), flexDirection: 'row' } : { height: this.extent() }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canvas" }] : /* istanbul ignore next */ []));
+    /**
+     * `scaleY: -1` on the list, and the same on every row.
+     *
+     * The list ends up scrolled from the far end with its rows in reverse, and the second flip puts
+     * each row's own content back the right way up. It is what `FlatList` does, and it is why an
+     * inverted list needs no reversed array and no reversed maths.
+     */
+    flip = computed(() => {
+        if (!this.inverted())
+            return undefined;
+        const scale = this.horizontal() ? { scaleX: -1 } : { scaleY: -1 };
+        return [scale];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flip" }] : /* istanbul ignore next */ []));
+    /**
+     * The flip as a style's transform: CSS text, which the engine turns into the list native reads.
+     * A style binding validates its values as the DOM's, and warns on a list in development.
+     */
+    flipText = computed(() => {
+        if (!this.inverted())
+            return undefined;
+        return this.horizontal() ? 'scaleX(-1)' : 'scaleY(-1)';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flipText" }] : /* istanbul ignore next */ []));
+    /** A row in flow, flipped back when the list is inverted. One object, so rows never re-clone. */
+    flowStyle = computed(() => {
+        const flip = this.flipText();
+        return flip ? { transform: flip } : IN_FLOW;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flowStyle" }] : /* istanbul ignore next */ []));
+    /** Top of a row. */
+    topOf(index) {
+        const table = this.layout();
+        return table ? table.topOf(index) : index * this.itemHeight();
+    }
+    heightOf(index) {
+        const table = this.layout();
+        return table ? table.heightOf(index) : this.itemHeight();
+    }
+    /** First row whose bottom is past `y`. */
+    indexAt(y) {
+        const table = this.layout();
+        if (!table)
+            return Math.max(0, Math.floor(y / this.itemHeight()));
+        return table.indexAt(y);
+    }
+    // --- holding position -------------------------------------------------------------------
+    /** The row the viewport's leading edge is in, taken at each scroll. */
+    anchor = null;
+    /** The last offset seen. A field rather than a signal: reading it renders nothing. */
+    lastOffset = 0;
+    /**
+     * A correction to make once the commit that needs it is on its way to native: an offset in the
+     * rows' own space, after the header, or the very start of the list.
+     */
+    pendingScroll = null;
+    /** What moves the rows: which items, and where each one is. */
+    placement = computed(() => ({
+        items: this.items(),
+        table: this.table(),
+        version: this.measuredVersion(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    /**
+     * The first *visible* row, not the first rendered one, and not the raw scroll offset. A fling
+     * produces a scroll event per frame, and setting a signal on each one costs a change-detection
+     * pass even when the visible rows are identical. Deriving the index in the handler means most
+     * scroll events change nothing and cost nothing.
+     *
+     * Linked to the rows' placement, because that is when the row on screen can move without the
+     * user scrolling: an insert above it, or a row above it measuring differently from its estimate.
+     * The index follows the anchored row there, and the offset follows it too.
+     */
+    visible = linkedSignal({ ...(ngDevMode ? { debugName: "visible" } : /* istanbul ignore next */ {}), source: this.placement,
+        computation: (placement) => this.reanchor(placement.items) });
+    /** Take the anchor at a row, keeping the viewport where it is. */
+    anchorAt(at, offset) {
+        const items = this.items();
+        if (!items.length) {
+            this.anchor = null;
+            return;
+        }
+        const index = Math.min(at, items.length - 1);
+        this.anchor = { key: this.keyAt(index), within: offset - this.topOf(index), items, index };
+    }
+    /**
+     * Where the row on screen went when the rows moved under it, and the offset that keeps it where
+     * the user left it. An insert or a removal is only held when the caller asked for it; a row
+     * above measuring differently always is, since nothing the user did moved anything.
+     */
+    reanchor(items) {
+        const anchor = this.anchor;
+        // Empty for a moment, as a filter typed through leaves it: the offset is kept for what comes.
+        if (!items.length)
+            return 0;
+        if (!anchor)
+            return this.atOffset();
+        const index = this.heldIndex(anchor, items);
+        if (index === 'start')
+            return this.showStart();
+        if (index < 0)
+            return this.atOffset();
+        const held = this.topOf(index) + anchor.within;
+        if (Math.abs(held - this.lastOffset) > HOLD_TOLERANCE) {
+            this.pendingScroll = { offset: held, animated: false };
+            this.lastOffset = held;
+        }
+        this.anchor = { ...anchor, items, index };
+        return index;
+    }
+    /**
+     * The row under the offset native is still at, in rows that have just replaced the old ones, as
+     * a filter replaces them. Native keeps its offset whatever the items became, so the window is
+     * worked out from that, not from the old row's index, which in the new rows sits somewhere else.
+     * When the new rows end before that offset, the list is scrolled back to their end: native
+     * would otherwise stay scrolled past it, showing nothing until the next drag.
+     */
+    atOffset() {
+        const end = Math.max(0, this.extent() - this.viewport());
+        if (this.viewport() > 0 && this.lastOffset > end + HOLD_TOLERANCE) {
+            this.pendingScroll = { offset: end, animated: false };
+            this.lastOffset = end;
+        }
+        const index = Math.max(0, Math.min(this.indexAt(this.lastOffset), this.items().length - 1));
+        this.anchorAt(index, this.lastOffset);
+        return index;
+    }
+    /**
+     * The index to hold the viewport at, -1 to let it move, or the start of the list when an
+     * insert lands within the autoscroll threshold of it.
+     */
+    heldIndex(anchor, items) {
+        if (items === anchor.items)
+            return anchor.index;
+        const hold = this.maintainVisibleContentPosition();
+        if (!hold)
+            return -1;
+        const threshold = hold.autoscrollToTopThreshold;
+        if (threshold !== undefined && this.lastOffset <= threshold)
+            return 'start';
+        const index = this.successorOf(anchor, items);
+        return index < (hold.minIndexForVisible ?? 0) ? -1 : index;
+    }
+    /** Scroll to what arrived at the start, rather than holding the viewport past it. */
+    showStart() {
+        this.anchorAt(0, 0);
+        if (this.lastOffset !== 0)
+            this.pendingScroll = 'start';
+        this.lastOffset = 0;
+        return 0;
+    }
+    /**
+     * The anchored row's new index, or the first row after it that survived when it did not. Only
+     * the rows that were rendered are searched for a successor: past those the viewport has moved
+     * on, and holding it by something off screen would be holding it by nothing the user saw.
+     */
+    successorOf(anchor, items) {
+        const keys = this.keys() ?? items;
+        const index = keys.indexOf(anchor.key);
+        if (index !== -1)
+            return index;
+        const extract = this.keyExtractor();
+        const was = anchor.items;
+        const limit = Math.min(was.length, anchor.index + this.overscan() * 4 + 1);
+        for (let i = anchor.index + 1; i < limit; i++) {
+            const successor = keys.indexOf(extract ? extract(was[i], i) : was[i]);
+            if (successor !== -1)
+                return successor;
+        }
+        return -1;
+    }
+    /** Make a queued correction, after the commit that moved the rows has gone to native. */
+    flushScroll() {
+        const pending = this.pendingScroll;
+        if (!pending)
+            return;
+        this.pendingScroll = null;
+        if (pending === 'start')
+            this.scrollToOffset({ offset: 0, animated: true });
+        else
+            this.scrollToOffset({ offset: this.headerHeight() + pending.offset, animated: false });
+    }
+    constructor() {
+        super();
+        afterEveryRender(() => {
+            this.flushScroll();
+            if (this.nativeSticky)
+                this.driveStickyRows();
+        });
+        const stop = dismissKeyboardOnTap(this.engine, this.node, () => this.keyboardShouldPersistTaps());
+        inject(DestroyRef).onDestroy(() => {
+            stop();
+            clearTimeout(this.settleTimer);
+            for (const held of this.drives.values())
+                held.drive.stop();
+        });
+    }
+    // --- the window ---------------------------------------------------------------------------
+    /** The rows to render, and the edges of the run they sit in. */
+    span = computed(() => {
+        const items = this.items();
+        const viewport = this.viewport();
+        const overscan = this.overscan();
+        if (!items.length)
+            return null;
+        const visible = Math.min(this.visible(), items.length - 1);
+        const first = Math.max(0, visible - overscan);
+        // Before the first layout we have no viewport, so render a screen's worth optimistically
+        // rather than nothing: an empty first frame is worse than a few extra rows.
+        const budget = viewport > 0 ? viewport : this.heightOf(first) * overscan * 2;
+        /*
+         * Measured from the top of the first *visible* row, not the first rendered one.
+         *
+         * Anchoring it at `first` - which is already backed off by the overscan - spent the budget
+         * on rows above the viewport, so the window ran out that far before the bottom of the
+         * screen. The trailing `+ overscan` hid it whenever every row was the same height, because
+         * then the rows added below happened to be worth exactly the rows wasted above. With mixed
+         * heights they are not, and the list clips short of its own bottom.
+         */
+        const top = this.topOf(visible);
+        let last = visible;
+        while (last < items.length && this.topOf(last) < top + budget)
+            last++;
+        return { first, last: Math.min(items.length, last + overscan) };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "span" }] : /* istanbul ignore next */ []));
+    window = computed(() => {
+        const span = this.span();
+        if (!span)
+            return [];
+        const rows = this.rowsFor(this.items(), span.first, span.last);
+        this.trimParked();
+        for (const pool of this.parked.values())
+            rows.push(...pool);
+        // The cache exists for rows that stay in the window between scrolls; anything that has left
+        // it is rebuilt if it comes back, so the map stays the size of the window, not of the list.
+        for (const index of this.slots.keys()) {
+            if (index < span.first || index >= span.last)
+                this.slots.delete(index);
+        }
+        return rows;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "window" }] : /* istanbul ignore next */ []));
+    /**
+     * What stands in for the rows above the window when rows are in flow: their total extent, less
+     * a pinned row's, which is rendered in flow ahead of the window.
+     */
+    spacer = computed(() => {
+        const span = this.span();
+        let lead = span ? this.topOf(span.first) : 0;
+        const pinned = this.pinnedIndex();
+        if (span && pinned !== null && pinned < span.first) {
+            lead = this.nativeSticky ? this.topOf(pinned) : lead - this.heightOf(pinned);
+        }
+        return this.horizontal() ? { width: Math.max(0, lead) } : { height: Math.max(0, lead) };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "spacer" }] : /* istanbul ignore next */ []));
+    /** The rows from `first` up to `last`, and the pinned row above them if there is one. */
+    rowsFor(items, first, last) {
+        const rows = [];
+        const pinned = this.pinnedIndex();
+        const pinnedAbove = pinned !== null && pinned < first;
+        this.releaseRecycled(first, last, pinnedAbove ? pinned : null);
+        // The pinned row is on screen even when its own place in the list is not, which is the whole
+        // point of it, so it is rendered whether or not the window reaches that far.
+        if (pinnedAbove) {
+            const key = this.keyAt(pinned);
+            rows.push(this.hold({
+                index: pinned,
+                slot: this.recycledSlot(key, items[pinned], pinned),
+                key,
+                item: items[pinned],
+                style: this.nativeSticky
+                    ? this.stickyStyle(pinned)
+                    : this.measuring()
+                        ? this.pinnedFlowStyle(this.topOf(first) - this.heightOf(pinned))
+                        : this.slotStyle(pinned, this.offset()),
+            }));
+        }
+        for (let index = first; index < last; index++) {
+            const key = this.keyAt(index);
+            rows.push(this.hold({
+                index,
+                slot: this.recycledSlot(key, items[index], index),
+                key,
+                item: items[index],
+                style: this.styleFor(index, index === pinned),
+            }));
+        }
+        if (pinnedAbove && this.nativeSticky && this.measuring())
+            this.leadWindow(rows, pinned, first);
+        return rows;
+    }
+    /**
+     * A pinned row native moves stays at its own place, so the rows between it and the window are
+     * made up before the window rather than after the row: new props on a view native is moving
+     * put its transform back for a frame.
+     */
+    leadWindow(rows, pinned, first) {
+        const lead = rows[1];
+        const gap = this.topOf(first) - this.topOf(pinned) - this.heightOf(pinned);
+        if (!lead || gap <= 0)
+            return;
+        const margin = this.horizontal() ? 'marginLeft' : 'marginTop';
+        rows[1] = this.hold({ ...lead, style: { ...lead.style, [margin]: gap } });
+    }
+    styleFor(index, pinned) {
+        if (this.nativeSticky && this.nextSticky().has(index))
+            return this.stickyStyle(index);
+        if (this.measuring()) {
+            return pinned ? this.pinnedFlowStyle(this.topOf(index)) : this.flowStyle();
+        }
+        return pinned ? this.slotStyle(index, this.offset()) : this.slotStyle(index);
+    }
+    /** A pinned row in flow, moved from where flow put it to the leading edge by a transform. */
+    pinnedFlowStyle(at) {
+        const shift = Math.max(0, this.offset() - at);
+        const move = `${this.horizontal() ? 'translateX' : 'translateY'}(${shift}px)`;
+        const flip = this.flipText();
+        return { zIndex: 1, transform: flip ? `${move} ${flip}` : move };
+    }
+    /**
+     * A sticky row native moves: at its own place, with the translate native had reached when
+     * scrolling paused, so the props agree with what is on screen.
+     */
+    stickyStyle(index) {
+        const horizontal = this.horizontal();
+        const style = this.measuring() ? {} : { ...this.slotStyle(index) };
+        style['zIndex'] = 1;
+        const top = this.topOf(index);
+        const shift = Math.min(Math.max(0, this.settled() - top), this.stopOf(index) - top);
+        const move = shift > 0 ? `${horizontal ? 'translateX' : 'translateY'}(${shift}px)` : '';
+        const transform = [move, this.flipText() ?? ''].filter(Boolean).join(' ');
+        if (transform)
+            style['transform'] = transform;
+        return style;
+    }
+    /** Each sticky row, and the one after it, which pushes it off. */
+    nextSticky = computed(() => {
+        const sticky = this.stickyIndices();
+        return new Map(sticky.map((index, at) => [index, sticky[at + 1]]));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nextSticky" }] : /* istanbul ignore next */ []));
+    /** Where a sticky row stops, pushed off by the next: that row's top, less this row's size. */
+    stopOf(index) {
+        const next = this.nextSticky().get(index);
+        return next === undefined ? Infinity : this.topOf(next) - this.heightOf(index);
+    }
+    /**
+     * How native moves a rendered row, or null when it does not: along the scroll view's own
+     * offset, which counts the header, from the row's top until the next sticky row pushes it off.
+     */
+    stickyDrive(row) {
+        if (!this.nativeSticky || row.parked || !this.nextSticky().has(row.index))
+            return null;
+        const header = this.headerHeight();
+        const start = header + this.topOf(row.index);
+        return {
+            range: pinnedRange(start, header + this.stopOf(row.index)),
+            statics: this.flip() ?? [],
+        };
+    }
+    /**
+     * Hand each rendered sticky row's view to native to move, and let go of the rest. The rows'
+     * views are the canvas's element children in window order, after the spacer, which is how
+     * `@for` over `window()` leaves them.
+     */
+    driveStickyRows() {
+        if (!this.pinning() && this.drives.size === 0)
+            return;
+        const canvas = this.canvasView().nativeElement;
+        const views = canvas.children
+            .filter((child) => child.kind === 'element')
+            .slice(this.measuring() ? 1 : 0);
+        const axis = this.horizontal() ? 'x' : 'y';
+        const live = new Set();
+        this.window().forEach((row, at) => {
+            const view = views[at];
+            const next = this.stickyDrive(row);
+            if (!view || !next)
+                return;
+            live.add(view);
+            const statics = JSON.stringify(next.statics);
+            const held = this.drives.get(view);
+            if (held?.statics === statics)
+                return held.drive.update(next.range);
+            held?.drive.stop();
+            const drive = this.engine.driveByScroll(view, this.node, axis, next.range, next.statics);
+            if (drive)
+                this.drives.set(view, { drive, statics });
+        });
+        for (const [view, held] of this.drives) {
+            if (live.has(view))
+                continue;
+            held.drive.stop();
+            this.drives.delete(view);
+        }
+    }
+    /** Which recycling slot each rendered item holds, by key: its type, and the row it last drew. */
+    recycled = new Map();
+    /** Slots that have left the window and are kept hidden, by the type of row that held them. */
+    parked = new Map();
+    nextSlot = 0;
+    /** Note the row a slot is drawing, for parking it once it leaves. */
+    hold(row) {
+        const held = this.recycled.get(row.key);
+        if (held)
+            held.row = row;
+        return row;
+    }
+    /**
+     * Park the slots of the items that have left the window, for the items arriving.
+     *
+     * Parked rather than freed: a slot missing from the window is destroyed by `@for`, so a slot is
+     * only reused if a row of its type arrives in the same pass as it left. Kept rendered and
+     * hidden, it waits for the next row of its type however many passes later, which is what a
+     * reuse queue of cells does in UIKit.
+     */
+    releaseRecycled(first, last, pinned) {
+        const keep = new Set();
+        for (let index = first; index < last; index++)
+            keep.add(this.keyAt(index));
+        if (pinned !== null)
+            keep.add(this.keyAt(pinned));
+        for (const [key, held] of this.recycled) {
+            if (keep.has(key))
+                continue;
+            this.recycled.delete(key);
+            let pool = this.parked.get(held.type);
+            if (!pool)
+                this.parked.set(held.type, (pool = []));
+            pool.push({ ...(held.row ?? this.placeholder(key, held.slot)), parked: true, style: PARKED });
+        }
+    }
+    /**
+     * Keep a few hidden slots of each type once this pass has taken what it needs, dropping the
+     * oldest: `@for` destroys the views of a slot that leaves the window for good.
+     */
+    trimParked() {
+        for (const pool of this.parked.values()) {
+            if (pool.length > PARK_LIMIT)
+                pool.splice(0, pool.length - PARK_LIMIT);
+        }
+    }
+    /** A parked row for a slot that never drew, which only a slot taken and left in one pass is. */
+    placeholder(key, slot) {
+        return { index: -1, slot, key, item: this.items()[0], style: PARKED };
+    }
+    recycledSlot(key, item, index) {
+        const held = this.recycled.get(key);
+        if (held)
+            return held.slot;
+        const type = this.itemType()?.(item, index);
+        const slot = this.parked.get(type)?.pop()?.slot ?? this.nextSlot++;
+        this.recycled.set(key, { slot, type, row: null });
+        return slot;
+    }
+    /**
+     * A row laid itself out; what `virtualListRow` calls. Only a row that sizes itself is measured,
+     * and a height that has not changed changes nothing.
+     */
+    measureRow(row, layout) {
+        if (!this.measuring() || !layout || row.parked)
+            return;
+        const size = this.horizontal() ? layout.width : layout.height;
+        if (size === undefined || this.measured.get(row.key) === size)
+            return;
+        this.measured.set(row.key, size);
+        this.forgetDeparted();
+        const index = this.indexOfKey()?.get(row.key);
+        if (index === undefined)
+            return;
+        this.table()?.set(index, size);
+        this.measuredVersion.update((version) => version + 1);
+    }
+    /** Drop the measurements of items long gone, so churn cannot grow the map without bound. */
+    forgetDeparted() {
+        const items = this.items();
+        if (this.measured.size <= items.length * 2 + 64)
+            return;
+        const current = new Set(this.keys() ?? items);
+        for (const key of this.measured.keys())
+            if (!current.has(key))
+                this.measured.delete(key);
+    }
+    /** A separator for every rendered row but the list's last, in its leading row's slot. */
+    gaps = computed(() => {
+        if (!this.separator())
+            return [];
+        const items = this.items();
+        const gaps = [];
+        for (const row of this.window()) {
+            if (row.parked || row.index >= items.length - 1)
+                continue;
+            const style = this.measuring() ? this.measuredGapStyle(row) : this.gapStyle(row);
+            if (!style)
+                continue;
+            const trailingItem = items[row.index + 1];
+            gaps.push({
+                index: row.index,
+                style,
+                context: {
+                    $implicit: row.item,
+                    leadingItem: row.item,
+                    trailingItem,
+                    leadingIndex: row.index,
+                },
+            });
+        }
+        return gaps;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gaps" }] : /* istanbul ignore next */ []));
+    /** The row's own slot, laid out to put the separator at its trailing edge. */
+    gapStyle(row) {
+        let style = this.gapStyles.get(row.style);
+        if (!style) {
+            style = {
+                ...row.style,
+                flexDirection: this.horizontal() ? 'row' : 'column',
+                justifyContent: 'flex-end',
+                pointerEvents: 'box-none',
+            };
+            this.gapStyles.set(row.style, style);
+        }
+        return style;
+    }
+    /**
+     * A measured row's slot, over the row itself: nothing until its height is known, since drawing
+     * it at the estimate would put a line through the middle of a row that turns out taller.
+     */
+    measuredGapStyle(row) {
+        if (!this.measured.has(row.key))
+            return null;
+        const start = this.topOf(row.index);
+        const size = this.heightOf(row.index);
+        const horizontal = this.horizontal();
+        const flip = this.flipText();
+        const cached = this.measuredGaps.get(row.key);
+        if (cached &&
+            cached[horizontal ? 'left' : 'top'] === start &&
+            cached[horizontal ? 'width' : 'height'] === size &&
+            cached['transform'] === flip) {
+            return cached;
+        }
+        const style = horizontal
+            ? { position: 'absolute', top: 0, bottom: 0, left: start, width: size, flexDirection: 'row' }
+            : { position: 'absolute', left: 0, right: 0, top: start, height: size };
+        style['justifyContent'] = 'flex-end';
+        style['pointerEvents'] = 'box-none';
+        if (flip)
+            style['transform'] = flip;
+        this.measuredGaps.set(row.key, style);
+        if (this.measuredGaps.size > 256)
+            this.measuredGaps.clear();
+        return style;
+    }
+    /**
+     * The header's translation while it is pinned: the scroll position, held back at zero by an
+     * overscroll and at the first sticky row, which pushes it off.
+     */
+    headerStyle = computed(() => {
+        const flip = this.flipText();
+        if (!this.stickyHeader())
+            return flip ? { transform: flip } : undefined;
+        const along = this.offset() + this.headerHeight();
+        const first = this.stickyIndices()[0];
+        const limit = first === undefined ? Infinity : this.topOf(first);
+        const shift = Math.min(Math.max(0, along), limit);
+        const move = shift > 0 ? `${this.horizontal() ? 'translateX' : 'translateY'}(${shift}px)` : '';
+        const transform = [move, flip ?? ''].filter(Boolean).join(' ');
+        return transform ? { zIndex: 1, transform } : { zIndex: 1 };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerStyle" }] : /* istanbul ignore next */ []));
+    /**
+     * The footer, flipped back like every row when the list is inverted, as FlatList inverts its
+     * header and footer cells too; otherwise both read upside down.
+     */
+    footerStyle = computed(() => {
+        const flip = this.flipText();
+        return flip ? { transform: flip } : undefined;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "footerStyle" }] : /* istanbul ignore next */ []));
+    /**
+     * The sticky row currently holding the leading edge: the last one at or before the offset.
+     * Null when the list has scrolled back above the first of them.
+     */
+    pinnedIndex = computed(() => {
+        const sticky = this.stickyIndices();
+        if (sticky.length === 0)
+            return null;
+        const offset = this.offset();
+        let pinned = null;
+        for (const index of sticky) {
+            if (this.topOf(index) <= offset)
+                pinned = index;
+            else
+                break;
+        }
+        return pinned;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pinnedIndex" }] : /* istanbul ignore next */ []));
+    /** Which rows are on screen far enough to count, by the caller's threshold. */
+    viewableAt(offset) {
+        const viewport = this.viewport();
+        if (!viewport)
+            return [];
+        const threshold = this.itemVisiblePercentThreshold() / 100;
+        const rows = [];
+        for (const row of this.window()) {
+            if (row.parked)
+                continue;
+            const start = this.topOf(row.index);
+            const size = this.heightOf(row.index);
+            const shown = Math.min(start + size, offset + viewport) - Math.max(start, offset);
+            if (shown > 0 && shown >= size * threshold)
+                rows.push(row.index);
+        }
+        return rows;
+    }
+    /** The last set announced, so the output fires on a change rather than on every frame. */
+    announced = [];
+    /**
+     * Announce a change in what is on screen.
+     *
+     * Deliberately not a `computed` over a signal offset. A fling produces a scroll event per
+     * frame, and writing a signal on each one costs a change-detection pass whether or not anything
+     * moved into view; comparing here costs an array walk over the window and emits only when the
+     * set really changed.
+     */
+    announceViewable(offset) {
+        const viewable = this.viewableAt(offset);
+        const entered = viewable.filter((index) => !this.announced.includes(index));
+        const left = this.announced.filter((index) => !viewable.includes(index));
+        if (entered.length === 0 && left.length === 0)
+            return;
+        this.announced = viewable;
+        const items = this.items();
+        this.viewableItemsChanged.emit({
+            viewable: viewable.map((index) => {
+                const key = this.keyAt(index);
+                return {
+                    index,
+                    // What is viewable is in the window, so it holds a slot already.
+                    slot: this.recycled.get(key)?.slot ?? -1,
+                    key,
+                    item: items[index],
+                    style: this.styleFor(index, false),
+                };
+            }),
+            entered,
+            left,
+        });
+    }
+    /**
+     * Scroll so that a row is at the start of the viewport, less `viewOffset`. The window moves
+     * there at once, and the row is held there while the rows around it are measured.
+     */
+    scrollToIndex(options) {
+        const items = this.items();
+        if (!items.length)
+            return;
+        const index = Math.max(0, Math.min(options.index, items.length - 1));
+        const within = -(options.viewOffset ?? 0);
+        const offset = this.topOf(index) + within;
+        this.lastOffset = offset;
+        this.anchor = { key: this.keyAt(index), within, items, index };
+        this.visible.set(index);
+        this.scrollToOffset({ offset: this.headerHeight() + offset, animated: options.animated });
+    }
+    /** Scroll to an offset along the list's own axis: x when it is horizontal, y otherwise. */
+    scrollToOffset(options) {
+        const { offset, animated = true } = options;
+        const [x, y] = this.horizontal() ? [offset, 0] : [0, offset];
+        this.engine.dispatchCommand(this.node, 'scrollTo', [x, y, animated]);
+    }
+    scrollToEnd(options = {}) {
+        this.engine.dispatchCommand(this.node, 'scrollToEnd', [options.animated ?? true]);
+    }
+    slotStyle(index, pinnedAt) {
+        const start = pinnedAt ?? this.topOf(index);
+        const size = this.heightOf(index);
+        const horizontal = this.horizontal();
+        const key = horizontal ? 'left' : 'top';
+        const extent = horizontal ? 'width' : 'height';
+        const flip = this.flipText();
+        let style = this.slots.get(index);
+        // The flip is part of the comparison because turning the list over changes every row, and a
+        // cached slot would otherwise keep the orientation it was built with.
+        const stale = !style ||
+            style[extent] !== size ||
+            style[key] !== start ||
+            style['transform'] !== flip ||
+            pinnedAt !== undefined;
+        if (stale) {
+            style = horizontal
+                ? { position: 'absolute', top: 0, bottom: 0, left: start, width: size }
+                : { position: 'absolute', left: 0, right: 0, top: start, height: size };
+            // A pinned row draws over the ones sliding under it; the transform is the row's half of
+            // the inversion.
+            if (pinnedAt !== undefined)
+                style['zIndex'] = 1;
+            if (flip)
+                style['transform'] = flip;
+            this.slots.set(index, style);
+            return style;
+        }
+        return style;
+    }
+    onScroll(event) {
+        const contentOffset = event.nativeEvent?.contentOffset;
+        const along = (this.horizontal() ? contentOffset?.x : contentOffset?.y) ?? 0;
+        const content = along - this.headerHeight();
+        // The first *visible* row, not the first rendered one. The overscan is applied where the
+        // window is built, so that both edges can be measured from the same place.
+        // Not clamped to the items: an input set in the same task as this event has not reached the
+        // list yet, and the window clamps when it renders.
+        const visible = this.indexAt(content);
+        if (visible !== this.visible())
+            this.visible.set(visible);
+        this.lastOffset = content;
+        this.anchorAt(visible, content);
+        // A pinned row follows the scroll continuously, so with sticky rows the offset has to be a
+        // signal - and only then. Without them this stays a field, and a fling that moves no row in
+        // or out of the window costs no change detection at all.
+        if (this.pinning())
+            this.offset.set(content);
+        if (this.nativeSticky && this.pinning())
+            this.settleAfterPause(content);
+        this.checkEnd(along);
+        this.announceViewable(content);
+    }
+    /** RN's sticky header commits its translate after 64 ms without a scroll event, as this does. */
+    settleAfterPause(content) {
+        clearTimeout(this.settleTimer);
+        this.settleTimer = setTimeout(() => this.settled.set(content), 64);
+    }
+    onLayout(event) {
+        const layout = event.nativeEvent?.layout;
+        this.viewport.set((this.horizontal() ? layout?.width : layout?.height) ?? 0);
+        this.announceViewable(this.lastOffset);
+    }
+    /** The header's extent along the axis, which every row sits after. */
+    onHeaderLayout(event) {
+        const layout = event.nativeEvent?.layout;
+        const height = (this.horizontal() ? layout?.width : layout?.height) ?? 0;
+        if (height === this.headerHeight())
+            return;
+        this.headerHeight.set(height);
+        this.holdPastHeader();
+    }
+    /**
+     * The header grew or shrank - a typing indicator in a chat's, a banner in a feed's - and every
+     * row moved with it. Held like an insert when the caller asked for that and the viewport is
+     * past the header, among the rows; at the start the user is looking at the header, and it is
+     * left to push the rows along. Made at once rather than after a render, because a layout arrives
+     * outside change detection and nothing else may be about to render.
+     */
+    holdPastHeader() {
+        const hold = this.maintainVisibleContentPosition();
+        if (!hold || this.lastOffset <= (hold.autoscrollToTopThreshold ?? 0))
+            return;
+        this.scrollToOffset({ offset: this.headerHeight() + this.lastOffset, animated: false });
+    }
+    onContentSize(event) {
+        const size = event.nativeEvent;
+        this.contentSize = (this.horizontal() ? size?.width : size?.height) ?? 0;
+    }
+    checkEnd(y) {
+        const count = this.items().length;
+        const viewport = this.viewport();
+        if (!count || !viewport)
+            return;
+        const total = this.contentSize || this.headerHeight() + this.extent();
+        const distanceFromEnd = total - (y + viewport);
+        // Away from the end again re-arms it, as React Native does, so a load that failed is retried
+        // the next time the user comes back down.
+        if (distanceFromEnd > this.endReachedThreshold() * viewport) {
+            this.endReachedFor = -1;
+            return;
+        }
+        if (this.endReachedFor === count)
+            return;
+        this.endReachedFor = count;
+        this.endReached.emit({ distanceFromEnd });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: VirtualList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: VirtualList, isStandalone: true, selector: "virtual-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, estimatedItemHeight: { classPropertyName: "estimatedItemHeight", publicName: "estimatedItemHeight", isSignal: true, isRequired: false, transformFunction: null }, keyExtractor: { classPropertyName: "keyExtractor", publicName: "keyExtractor", isSignal: true, isRequired: false, transformFunction: null }, itemType: { classPropertyName: "itemType", publicName: "itemType", isSignal: true, isRequired: false, transformFunction: null }, maintainVisibleContentPosition: { classPropertyName: "maintainVisibleContentPosition", publicName: "maintainVisibleContentPosition", isSignal: true, isRequired: false, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", isSignal: true, isRequired: false, transformFunction: null }, endReachedThreshold: { classPropertyName: "endReachedThreshold", publicName: "endReachedThreshold", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, inverted: { classPropertyName: "inverted", publicName: "inverted", isSignal: true, isRequired: false, transformFunction: null }, stickyIndices: { classPropertyName: "stickyIndices", publicName: "stickyIndices", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, keyboardShouldPersistTaps: { classPropertyName: "keyboardShouldPersistTaps", publicName: "keyboardShouldPersistTaps", isSignal: true, isRequired: false, transformFunction: null }, itemVisiblePercentThreshold: { classPropertyName: "itemVisiblePercentThreshold", publicName: "itemVisiblePercentThreshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { endReached: "endReached", viewableItemsChanged: "viewableItemsChanged" }, host: { listeners: { "scroll": "onScroll($event)", "layout": "onLayout($event)", "contentSizeChange": "onContentSize($event)" }, properties: { "flexDirection": "horizontal() ? 'row' : 'column'", "horizontal": "horizontal()", "nestedScrollEnabled": "nestedScroll()", "transform": "flip()", "scrollEventThrottle": "scrollEventThrottle()" } }, queries: [{ propertyName: "separator", first: true, predicate: VirtualListSeparator, descendants: true, isSignal: true }, { propertyName: "refreshControl", first: true, predicate: RefreshControl, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "canvasView", first: true, predicate: ["rows"], descendants: true, read: ElementRef, isSignal: true }], exportAs: ["virtualList"], usesInheritance: true, ngImport: i0, template: `
+    <ng-content select="refresh-control" />
+    <view [style]="headerStyle()" (layout)="onHeaderLayout($event)"
+      ><ng-content select="[listHeader]"
+    /></view>
+    <view #rows [style]="canvas()" collapsable="false">
+      @if (measuring()) {
+        <view [style]="spacer()"></view>
+      }
+      <ng-content />
+      @if (separator(); as separator) {
+        @for (gap of gaps(); track gap.index) {
+          <view [style]="gap.style"
+            ><ng-container [templateSlot]="separator.template" [templateSlotContext]="gap.context"
+          /></view>
+        }
+      }
+    </view>
+    <view [style]="footerStyle()"><ng-content select="[listFooter]" /></view>
+  `, isInline: true, dependencies: [{ kind: "directive", type: TemplateSlot, selector: "[templateSlot]", inputs: ["templateSlot", "templateSlotContext"] }, { kind: "directive", type: View, selector: "view" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: VirtualList, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'virtual-list',
+                    exportAs: 'virtualList',
+                    imports: [TemplateSlot, View],
+                    // See ScrollView: the canvas carries only a height, so Fabric would flatten it away and drags
+                    // over the gaps between rows would not scroll. Separators come after the rows so they draw over
+                    // the slot they share. The spacer is there only when rows are in flow.
+                    // A refresh control comes first, as the scroll view's own child; see ScrollView.
+                    template: `
+    <ng-content select="refresh-control" />
+    <view [style]="headerStyle()" (layout)="onHeaderLayout($event)"
+      ><ng-content select="[listHeader]"
+    /></view>
+    <view #rows [style]="canvas()" collapsable="false">
+      @if (measuring()) {
+        <view [style]="spacer()"></view>
+      }
+      <ng-content />
+      @if (separator(); as separator) {
+        @for (gap of gaps(); track gap.index) {
+          <view [style]="gap.style"
+            ><ng-container [templateSlot]="separator.template" [templateSlotContext]="gap.context"
+          /></view>
+        }
+      }
+    </view>
+    <view [style]="footerStyle()"><ng-content select="[listFooter]" /></view>
+  `,
+                    host: {
+                        // ScrollView.js's `baseHorizontal`: a column would stack the header, canvas and footer, and
+                        // the canvas, holding only absolutely positioned rows, would have no height to give them. A
+                        // top-level prop, as on <scroll-view>, so the caller's own [style] still applies over it.
+                        '[flexDirection]': "horizontal() ? 'row' : 'column'",
+                        '[horizontal]': 'horizontal()',
+                        '[nestedScrollEnabled]': 'nestedScroll()',
+                        // A prop rather than `[style.transform]`: Angular stringifies a style binding, and a
+                        // transform is a list of objects. The engine flattens style into props anyway, so this is
+                        // where it would have ended up.
+                        '[transform]': 'flip()',
+                        '[scrollEventThrottle]': 'scrollEventThrottle()',
+                        '(scroll)': 'onScroll($event)',
+                        '(layout)': 'onLayout($event)',
+                        '(contentSizeChange)': 'onContentSize($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], estimatedItemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "estimatedItemHeight", required: false }] }], keyExtractor: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyExtractor", required: false }] }], itemType: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemType", required: false }] }], maintainVisibleContentPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "maintainVisibleContentPosition", required: false }] }], overscan: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscan", required: false }] }], endReachedThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "endReachedThreshold", required: false }] }], horizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontal", required: false }] }], inverted: [{ type: i0.Input, args: [{ isSignal: true, alias: "inverted", required: false }] }], stickyIndices: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyIndices", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], keyboardShouldPersistTaps: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardShouldPersistTaps", required: false }] }], itemVisiblePercentThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemVisiblePercentThreshold", required: false }] }], endReached: [{ type: i0.Output, args: ["endReached"] }], viewableItemsChanged: [{ type: i0.Output, args: ["viewableItemsChanged"] }], separator: [{ type: i0.ContentChild, args: [i0.forwardRef(() => VirtualListSeparator), { isSignal: true }] }], refreshControl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RefreshControl), { isSignal: true }] }], canvasView: [{ type: i0.ViewChild, args: ['rows', { ...{ read: ElementRef }, isSignal: true }] }] } });
+/**
+ * Put on each row's view: `<view [virtualListRow]="row">`. Applies the row's style, and reports
+ * the row's layout to the list, which is how a list of rows that size themselves learns how tall
+ * each one is.
+ */
+export class VirtualListRow {
+    row = input.required({ ...(ngDevMode ? { debugName: "row" } : /* istanbul ignore next */ {}), alias: 'virtualListRow' });
+    list = inject(VirtualList);
+    onLayout(event) {
+        this.list.measureRow(this.row(), event.nativeEvent?.layout);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: VirtualListRow, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.2.0", type: VirtualListRow, isStandalone: true, selector: "[virtualListRow]", inputs: { row: { classPropertyName: "row", publicName: "virtualListRow", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "layout": "onLayout($event)" }, properties: { "style": "row().style" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: VirtualListRow, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[virtualListRow]',
+                    host: {
+                        '[style]': 'row().style',
+                        '(layout)': 'onLayout($event)',
+                    },
+                }]
+        }], propDecorators: { row: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualListRow", required: true }] }] } });
+//# sourceMappingURL=virtual-list.js.map