@symbiote-native/angular 0.1.0

package/build/angular/components/virtualized-list/index.js

@@ -0,0 +1,1162 @@
+// VirtualizedList, the Angular lifecycle half. The windowing engine (offset table, window
+// compute, batch throttle, viewability, edge-reached, the child PLAN, the imperative-handle
+// geometry) lives in @symbiote-native/components/state, shared verbatim with the React and Vue adapters
+// (<adapters_reach_full_feature_parity>). Here Angular supplies only the lifecycle: plain fields
+// for scroll offset / viewport / measurement bumps, a once-per-CD metrics + view recompute in
+// ngDoCheck (the Angular twin of React render / Vue `computed` — it owns the controlled
+// committedWindow throttle and assembles the windowed cells before the template bindings are read),
+// and the after-commit work (batch fill, onEndReached/onStartReached, viewability, initialScroll, MVCP)
+// in ngAfterViewChecked. OnPush + ChangeDetectorRef.markForCheck() drives re-render off the native
+// scroll/layout/measure callbacks (they fire outside Angular's own event bindings, so they must
+// mark the view dirty). This is the Angular twin of the React useReducer/useEffect and Vue
+// ref/computed/watch over the same shared functions. It composes the Angular ScrollView, exactly
+// as the React/Vue lists drive their ScrollView.
+//
+// Per-item rendering is TEMPLATES, not a callback: React/Vue `renderItem: (info) => element` does
+// not translate to Angular. The app supplies the cell via `<ng-template vListItem>` (and the
+// header/footer/empty/separator slots via vListHeader/vListFooter/vListEmpty/vListSeparator); the
+// list captures them with @ContentChild and stamps the WINDOWED slice through VListOutletDirective
+// (a core-only NgTemplateOutlet twin — @angular/common is not a dependency). See ./directives.ts.
+// Every React/Vue behavior is present (windowing, onEndReached, viewability, headers/footers/empty/
+// separators, refresh, imperative scroll, horizontal, inverted, MVCP); only the cell AUTHORING
+// shape differs, per the per-adapter children/render split of
+// <prop_types_split_agnostic_vs_per_adapter>.
+//
+// Lists have no Descriptor render fn (the cell content is the framework's own children); see
+// core/components/.docs-note-lists.md. Cells/spacers are plain symbiote-view host elements.
+import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, Input, Output, ViewChild, inject, } from '@angular/core';
+import { DEFAULT_END_REACHED_THRESHOLD, DEFAULT_INITIAL_NUM_TO_RENDER, DEFAULT_MAX_TO_RENDER_PER_BATCH, DEFAULT_START_REACHED_THRESHOLD, DEFAULT_UPDATE_CELLS_BATCHING_PERIOD, DEFAULT_WINDOW_SIZE, EMPTY_OFFSET, FIRST_INDEX, INVERTED_X_STYLE, INVERTED_Y_STYLE, NO_CONTENT_LENGTH_SENT, averageMeasuredLength, buildListPlan, buildOffsets, buildViewabilityPairs, computeEndReached, computeStartReached, computeViewableSet, computeWindow, diffViewable, highestMeasuredIndex, maxMinimumViewTime, offsetForIndex, readLayoutLength, readScrollOffset, resolveAccessibilityProps, throttleWindow, } from '@symbiote-native/components';
+import { dlog, flattenStyle, } from '@symbiote-native/engine';
+import { ScrollView } from '../scroll-view';
+import { RefreshControl } from '../refresh-control';
+import { anchorHostStyle, ViewHost } from '../../primitives';
+import { VListEmptyDirective, VListFooterDirective, VListHeaderDirective, VListItemDirective, VListOutletDirective, VListSeparatorDirective, } from './directives';
+import * as i0 from "@angular/core";
+export { VListEmptyDirective, VListFooterDirective, VListHeaderDirective, VListItemDirective, VListSeparatorDirective, } from './directives';
+export class VirtualizedList {
+    // The list's edge/viewability/failure events as real Angular events: `(endReached)="…"`, not
+    // `[onEndReached]="…"`. See handleRefresh/accessibility*Tick below for how the still-callback-
+    // shaped ScrollView/RefreshControl @Input()s are fed from these.
+    endReached = new EventEmitter();
+    startReached = new EventEmitter();
+    refresh = new EventEmitter();
+    viewableItemsChanged = new EventEmitter();
+    scrollToIndexFailed = new EventEmitter();
+    accessibilityAction = new EventEmitter();
+    accessibilityTap = new EventEmitter();
+    magicTap = new EventEmitter();
+    accessibilityEscape = new EventEmitter();
+    data;
+    getItem;
+    getItemCount;
+    keyExtractor;
+    getItemLayout;
+    horizontal;
+    inverted;
+    extraData;
+    onEndReachedThreshold;
+    onStartReachedThreshold;
+    refreshing;
+    progressViewOffset;
+    // Set explicitly by a wrapper (FlatList/VirtualizedSectionList) that ALWAYS binds
+    // `(refresh)="refresh.emit()"` on this component to re-forward the event outward — that binding
+    // itself makes `this.refresh.observed` permanently true (Angular subscribes unconditionally the
+    // moment a template writes `(refresh)="…"`, regardless of what the handler does), so `.observed`
+    // can no longer tell "the app actually wants pull-to-refresh" from "a wrapper is just forwarding
+    // the event". A wrapper passes its OWN public `refresh.observed` here instead; direct usage
+    // (no wrapper) falls back to this component's own `.observed`, unchanged from before.
+    refreshRequested;
+    viewabilityConfig;
+    viewabilityConfigCallbackPairs;
+    initialNumToRender;
+    initialScrollIndex;
+    maxToRenderPerBatch;
+    updateCellsBatchingPeriod;
+    windowSize;
+    stickyHeaderIndices;
+    maintainVisibleContentPosition;
+    onScroll;
+    onScrollBeginDrag;
+    onScrollEndDrag;
+    onMomentumScrollBegin;
+    onMomentumScrollEnd;
+    scrollEventThrottle;
+    keyboardShouldPersistTaps;
+    keyboardDismissMode;
+    style;
+    contentContainerStyle;
+    testID;
+    nativeID;
+    accessible;
+    accessibilityLabel;
+    accessibilityHint;
+    accessibilityRole;
+    accessibilityState;
+    accessibilityValue;
+    accessibilityActions;
+    accessibilityLabelledBy;
+    importantForAccessibility;
+    accessibilityLiveRegion;
+    screenReaderFocusable;
+    accessibilityViewIsModal;
+    accessibilityElementsHidden;
+    accessibilityIgnoresInvertColors;
+    accessibilityLanguage;
+    accessibilityRespondsToUserInteraction;
+    accessibilityShowsLargeContentViewer;
+    accessibilityLargeContentTitle;
+    role;
+    ariaLabel;
+    ariaLabelledBy;
+    ariaLive;
+    ariaHidden;
+    ariaBusy;
+    ariaChecked;
+    ariaDisabled;
+    ariaExpanded;
+    ariaSelected;
+    ariaModal;
+    ariaValueMax;
+    ariaValueMin;
+    ariaValueNow;
+    ariaValueText;
+    // The cell + slot templates the app authors (the Angular twin of renderItem / ListHeaderComponent
+    // / ListFooterComponent / ListEmptyComponent / ItemSeparatorComponent), captured from projected
+    // <ng-template> content. Resolved by ngAfterContentInit, read each ngDoCheck (from the 2nd CD on).
+    itemDir;
+    headerDir;
+    footerDir;
+    emptyDir;
+    separatorDir;
+    // The composed inner scroll view. Its instance IS an IScrollViewHandle (scrollTo / scrollToEnd /
+    // flashScrollIndicators / getScrollNode), so the imperative handle delegates straight to it.
+    // Available from ngAfterViewInit on; the handle reads the node lazily and no-ops before commit.
+    scrollView;
+    // --- template-bound view state, assembled in ngDoCheck (recomputeView) ---
+    itemCount = EMPTY_OFFSET;
+    windowCells = [];
+    leadingSpacerStyle = null;
+    trailingSpacerStyle = null;
+    cellStyle = undefined;
+    renderedStickyIndices = undefined;
+    // Bound to the template's `[style]="resolvedStyle"`, which Angular compiles to the built-in
+    // ɵɵstyleMap instruction — it only understands a flat object, never an array (RN's own
+    // `style={[a, b]}` composition idiom crashes deep inside Angular's styling engine), so this
+    // is always pre-flattened via the engine's own flattenStyle, never left as an array.
+    resolvedStyle = undefined;
+    resolvedContentContainerStyle = undefined;
+    resolvedMaintainVisibleContentPosition = undefined;
+    // The offset we are imperatively driving native to before the scroll handle attaches (rides down
+    // as contentOffset). A fresh object identity each push so the commit re-applies a repeated value.
+    commandedOffset = undefined;
+    // --- reactive scalars (mutated by the native callbacks; markForCheck re-runs the CD) ---
+    scrollOffset = EMPTY_OFFSET;
+    viewportLength = EMPTY_OFFSET;
+    measureVersion = EMPTY_OFFSET;
+    // --- non-render state (the Angular twin of refs that never trigger a render) ---
+    metricsCore = {
+        count: EMPTY_OFFSET,
+        offsets: [],
+        lengths: [],
+        total: EMPTY_OFFSET,
+        first: FIRST_INDEX,
+        last: -1,
+        target: { first: FIRST_INDEX, last: -1 },
+        averageLength: EMPTY_OFFSET,
+    };
+    measured = new Map();
+    cellMeasures = new Map();
+    separatorOverrides = new Map();
+    // The previously committed window, grown by at most maxToRenderPerBatch per tick (no snap).
+    committedWindow = { first: FIRST_INDEX, last: -1 };
+    sentEndForContentLength = NO_CONTENT_LENGTH_SENT;
+    sentStartForContentLength = NO_CONTENT_LENGTH_SENT;
+    lastViewable = new Map();
+    viewableTimer = null;
+    batchTimer = null;
+    hasInteracted = false;
+    appliedInitialScroll = false;
+    firstVisibleKey = null;
+    // Dedupes the after-commit effects: they run only when the windowing signature changed.
+    lastEffectSignature = '';
+    // Dedupes ngDoCheck's own recompute. WITHOUT this, recomputeView() unconditionally rebuilds
+    // windowCells (and each cell's `separators` handle — fresh closures every call) on EVERY CD pass,
+    // including ones triggered by something else entirely in the app. A fresh context object flows
+    // into VListOutletDirective, which (correctly) sees its `context` @Input() change and calls
+    // `viewRef.markForCheck()` — which reschedules ANOTHER change-detection tick via the zoneless
+    // scheduler (adapters/angular/src/render.ts). Recomputing unconditionally therefore free-runs
+    // forever the moment a list actually has cells to stamp (a real, previously-dormant bug only
+    // exposed once flat-list.test.ts's projection fix let cells render for the first time — see that
+    // test's comment). Guarding recompute behind "did anything relevant actually change" breaks the
+    // cycle: unrelated CD passes reuse the same windowCells/context identities, so
+    // VListOutletDirective's ngOnChanges sees no change and never reschedules.
+    lastRecompute = undefined;
+    cdr = inject(ChangeDetectorRef);
+    // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
+    // onto (see anchorHostStyle's doc comment) — NOT `scrollView` above, which targets the real
+    // inner `<ScrollView>` one level down (itself its own separate anchor host).
+    elementRef = inject(ElementRef);
+    get foldedAccessibility() {
+        return resolveAccessibilityProps({
+            testID: this.testID,
+            nativeID: this.nativeID,
+            accessible: this.accessible,
+            accessibilityLabel: this.accessibilityLabel,
+            accessibilityHint: this.accessibilityHint,
+            accessibilityRole: this.accessibilityRole,
+            accessibilityState: this.accessibilityState,
+            accessibilityValue: this.accessibilityValue,
+            accessibilityActions: this.accessibilityActions,
+            accessibilityLabelledBy: this.accessibilityLabelledBy,
+            importantForAccessibility: this.importantForAccessibility,
+            accessibilityLiveRegion: this.accessibilityLiveRegion,
+            screenReaderFocusable: this.screenReaderFocusable,
+            accessibilityViewIsModal: this.accessibilityViewIsModal,
+            accessibilityElementsHidden: this.accessibilityElementsHidden,
+            accessibilityIgnoresInvertColors: this.accessibilityIgnoresInvertColors,
+            accessibilityLanguage: this.accessibilityLanguage,
+            accessibilityRespondsToUserInteraction: this.accessibilityRespondsToUserInteraction,
+            accessibilityShowsLargeContentViewer: this.accessibilityShowsLargeContentViewer,
+            accessibilityLargeContentTitle: this.accessibilityLargeContentTitle,
+            role: this.role,
+            'aria-label': this.ariaLabel,
+            'aria-labelledby': this.ariaLabelledBy,
+            'aria-live': this.ariaLive,
+            'aria-hidden': this.ariaHidden,
+            'aria-busy': this.ariaBusy,
+            'aria-checked': this.ariaChecked,
+            'aria-disabled': this.ariaDisabled,
+            'aria-expanded': this.ariaExpanded,
+            'aria-selected': this.ariaSelected,
+            'aria-modal': this.ariaModal,
+            'aria-valuemax': this.ariaValueMax,
+            'aria-valuemin': this.ariaValueMin,
+            'aria-valuenow': this.ariaValueNow,
+            'aria-valuetext': this.ariaValueText,
+        });
+    }
+    get shouldRenderRefreshControl() {
+        return this.refreshRequested ?? this.refresh.observed;
+    }
+    get isHorizontal() {
+        return this.horizontal === true;
+    }
+    get isInverted() {
+        return this.inverted === true;
+    }
+    get windowSizeValue() {
+        return this.windowSize ?? DEFAULT_WINDOW_SIZE;
+    }
+    get initialNumToRenderValue() {
+        return this.initialNumToRender ?? DEFAULT_INITIAL_NUM_TO_RENDER;
+    }
+    get maxToRenderPerBatchValue() {
+        return this.maxToRenderPerBatch ?? DEFAULT_MAX_TO_RENDER_PER_BATCH;
+    }
+    get updateCellsBatchingPeriodValue() {
+        return this.updateCellsBatchingPeriod ?? DEFAULT_UPDATE_CELLS_BATCHING_PERIOD;
+    }
+    get onEndReachedThresholdValue() {
+        return this.onEndReachedThreshold ?? DEFAULT_END_REACHED_THRESHOLD;
+    }
+    get onStartReachedThresholdValue() {
+        return this.onStartReachedThreshold ?? DEFAULT_START_REACHED_THRESHOLD;
+    }
+    // ScrollView's onScroll stays an @Input() callback (an Animated.event(...) target must be able to
+    // flow through it, which an @Output() can't carry), so this is a stable arrow field passed
+    // straight to [onScroll]. onLayout is a real @Output() now, bound via (layout)="onLayoutTick($event)".
+    onScrollTick = (event) => {
+        const offset = readScrollOffset(event, this.isHorizontal);
+        if (offset === undefined)
+            return;
+        dlog(`Angular VirtualizedList onScroll offset=${offset}`);
+        // First scroll is the interaction that ungates waitForInteraction configs.
+        this.hasInteracted = true;
+        this.scrollOffset = offset;
+        // A real native scroll supersedes any pending commanded offset.
+        this.commandedOffset = undefined;
+        // Compose, don't clobber: internal windowing ran first, now the user's onScroll.
+        this.onScroll?.(event);
+        this.cdr.markForCheck();
+    };
+    onLayoutTick = (event) => {
+        const length = readLayoutLength(event, this.isHorizontal);
+        if (length === undefined)
+            return;
+        dlog(`Angular VirtualizedList onLayout viewport=${length}`);
+        this.viewportLength = length;
+        this.cdr.markForCheck();
+    };
+    // RefreshControl's refresh and ScrollView's accessibility events are real @Output()s now, bound
+    // via (refresh)="handleRefresh()" / (accessibilityAction)="accessibilityActionTick($event)" etc.
+    // — these fields just adapt VirtualizedList's own @Output() into a plain re-emit callback.
+    handleRefresh = () => {
+        this.refresh.emit();
+    };
+    accessibilityActionTick = (event) => {
+        this.accessibilityAction.emit(event);
+    };
+    accessibilityTapTick = (event) => {
+        this.accessibilityTap.emit(event);
+    };
+    magicTapTick = (event) => {
+        this.magicTap.emit(event);
+    };
+    accessibilityEscapeTick = (event) => {
+        this.accessibilityEscape.emit(event);
+    };
+    keyFor = (index) => {
+        const item = this.getItem(this.data, index);
+        return this.keyExtractor ? this.keyExtractor(item, index) : String(index);
+    };
+    // Once-per-CD recompute, BEFORE the template bindings are read (so the freshly computed
+    // template-bound fields render this pass — computing them in ngAfterContentChecked instead would
+    // trip ExpressionChangedAfterItHasBeenChecked). recomputeMetrics owns the controlled committedWindow
+    // throttle (the side effect React runs during render); ngDoCheck is its single evaluation point, so
+    // the window grows exactly one step per CD. The projected templates (ContentChild) are resolved
+    // from the second CD on; the first paint (count/viewport still 0) corrects on the layout-driven CD.
+    ngDoCheck() {
+        const recomputeInputs = [
+            this.data,
+            this.extraData,
+            this.getItemLayout,
+            this.keyExtractor,
+            this.isHorizontal,
+            this.isInverted,
+            this.windowSizeValue,
+            this.initialNumToRenderValue,
+            this.maxToRenderPerBatchValue,
+            this.stickyHeaderIndices,
+            this.maintainVisibleContentPosition,
+            this.style,
+            this.contentContainerStyle,
+            this.scrollOffset,
+            this.viewportLength,
+            this.measureVersion,
+            this.headerDir !== undefined,
+            this.footerDir !== undefined,
+            this.emptyDir !== undefined,
+            this.separatorDir !== undefined,
+        ];
+        const previous = this.lastRecompute;
+        this.lastRecompute = recomputeInputs;
+        if (previous !== undefined &&
+            previous.length === recomputeInputs.length &&
+            previous.every((value, index) => value === recomputeInputs[index])) {
+            return;
+        }
+        this.recomputeMetrics();
+        this.recomputeView();
+    }
+    ngAfterViewChecked() {
+        const m = this.metricsCore;
+        const signature = `${this.scrollOffset}|${this.viewportLength}|${m.first}|${m.last}|${m.count}|${m.total}|${this.measureVersion}`;
+        if (signature === this.lastEffectSignature)
+            return;
+        this.lastEffectSignature = signature;
+        this.effectBatchFill();
+        this.effectEndReached();
+        this.effectStartReached();
+        this.effectViewability();
+        this.effectInitialScroll();
+        this.effectMaintainVisibleContentPosition();
+    }
+    ngOnDestroy() {
+        if (this.viewableTimer !== null)
+            clearTimeout(this.viewableTimer);
+        if (this.batchTimer !== null)
+            clearTimeout(this.batchTimer);
+    }
+    recomputeMetrics() {
+        const count = this.getItemCount(this.data);
+        const gil = this.getItemLayout;
+        const data = this.data;
+        const fixedLayout = gil !== undefined
+            ? (index) => {
+                const layout = gil(data, index);
+                return { length: layout.length, offset: layout.offset };
+            }
+            : undefined;
+        const averageLength = fixedLayout !== undefined
+            ? count > FIRST_INDEX
+                ? fixedLayout(FIRST_INDEX).length
+                : EMPTY_OFFSET
+            : averageMeasuredLength(this.measured);
+        const { offsets, lengths, total } = buildOffsets(count, this.measured, fixedLayout, averageLength);
+        const target = computeWindow(count, offsets, lengths, this.scrollOffset, this.viewportLength, this.windowSizeValue, this.initialNumToRenderValue);
+        const throttled = throttleWindow(target, this.committedWindow, this.maxToRenderPerBatchValue);
+        this.committedWindow = throttled;
+        this.metricsCore = {
+            count,
+            offsets,
+            lengths,
+            total,
+            first: throttled.first,
+            last: throttled.last,
+            target,
+            averageLength,
+        };
+    }
+    recomputeView() {
+        const m = this.metricsCore;
+        this.itemCount = m.count;
+        const hasHeader = this.headerDir !== undefined;
+        const hasSeparators = this.separatorDir !== undefined;
+        const stickySet = this.stickyHeaderIndices !== undefined ? new Set(this.stickyHeaderIndices) : undefined;
+        this.resolvedContentContainerStyle = this.isHorizontal
+            ? [this.contentContainerStyle, { width: m.total }]
+            : this.contentContainerStyle;
+        this.resolvedStyle = flattenStyle([
+            anchorHostStyle(this.elementRef),
+            this.isInverted
+                ? [this.style, this.isHorizontal ? INVERTED_X_STYLE : INVERTED_Y_STYLE]
+                : this.style,
+        ]);
+        this.cellStyle = this.isInverted
+            ? this.isHorizontal
+                ? INVERTED_X_STYLE
+                : INVERTED_Y_STYLE
+            : undefined;
+        this.resolvedMaintainVisibleContentPosition =
+            this.maintainVisibleContentPosition === undefined
+                ? undefined
+                : {
+                    ...this.maintainVisibleContentPosition,
+                    minIndexForVisible: this.maintainVisibleContentPosition.minIndexForVisible + (hasHeader ? 1 : 0),
+                };
+        if (m.count === FIRST_INDEX) {
+            this.windowCells = [];
+            this.leadingSpacerStyle = null;
+            this.trailingSpacerStyle = null;
+            this.renderedStickyIndices = undefined;
+            dlog(`Angular VirtualizedList empty (viewport=${this.viewportLength})`);
+            return;
+        }
+        const plan = buildListPlan({
+            count: m.count,
+            first: m.first,
+            last: m.last,
+            offsets: m.offsets,
+            lengths: m.lengths,
+            total: m.total,
+            keyFor: this.keyFor,
+            stickyIndices: stickySet,
+            hasHeader,
+            hasSeparators,
+        });
+        this.leadingSpacerStyle =
+            plan.leadingExtent > EMPTY_OFFSET ? this.spacerStyle(plan.leadingExtent) : null;
+        this.trailingSpacerStyle =
+            plan.trailingExtent > EMPTY_OFFSET ? this.spacerStyle(plan.trailingExtent) : null;
+        this.renderedStickyIndices =
+            stickySet !== undefined && plan.stickyChildPositions.length > 0
+                ? plan.stickyChildPositions
+                : undefined;
+        const cells = [];
+        for (const planned of plan.cells) {
+            const item = this.getItem(this.data, planned.index);
+            const context = {
+                $implicit: item,
+                index: planned.index,
+                separators: this.makeSeparators(planned.index),
+            };
+            let separatorContext;
+            if (hasSeparators && planned.index < m.last) {
+                separatorContext = this.buildSeparatorContext(planned.index, item);
+            }
+            cells.push({
+                key: planned.key,
+                index: planned.index,
+                context,
+                measure: this.cellMeasure(planned.index),
+                separatorContext,
+            });
+        }
+        this.windowCells = cells;
+        dlog(`Angular VirtualizedList window [${m.first}, ${m.last}] of ${m.count} ` +
+            `(offset=${this.scrollOffset}, viewport=${this.viewportLength}, rendered=${cells.length})`);
+    }
+    buildSeparatorContext(index, item) {
+        const overrides = this.separatorOverrides.get(index);
+        const highlighted = overrides?.highlighted ?? false;
+        const context = {
+            $implicit: highlighted,
+            highlighted,
+            leadingItem: item,
+            trailingItem: this.getItem(this.data, index + 1),
+        };
+        // Fold any custom updateProps keys through the context's index signature (RN lets a row drive
+        // arbitrary separator props); the typed fields above stay authoritative.
+        if (overrides !== undefined) {
+            for (const key of Object.keys(overrides)) {
+                if (key === 'highlighted' || key === 'leadingItem' || key === 'trailingItem')
+                    continue;
+                context[key] = overrides[key];
+            }
+        }
+        return context;
+    }
+    spacerStyle(extent) {
+        return this.isHorizontal ? { width: extent } : { height: extent };
+    }
+    cellMeasure(index) {
+        const existing = this.cellMeasures.get(index);
+        if (existing !== undefined)
+            return existing;
+        const measure = (event) => {
+            if (this.getItemLayout !== undefined)
+                return;
+            const length = readLayoutLength(event, this.isHorizontal);
+            if (length === undefined)
+                return;
+            if (this.measured.get(index) === length)
+                return;
+            this.measured.set(index, length);
+            dlog(`Angular VirtualizedList cell ${index} measured length=${length}`);
+            this.measureVersion += 1;
+            this.cdr.markForCheck();
+        };
+        this.cellMeasures.set(index, measure);
+        return measure;
+    }
+    // Per-cell onLayout rides the engine's structural (layout) event channel — Angular forbids an
+    // [onLayout] property binding (NG8002). $event arrives untyped, narrowed before reaching measure.
+    handleCellLayout(measure, event) {
+        if (this.isSymbioteEvent(event))
+            measure(event);
+    }
+    isSymbioteEvent(value) {
+        return typeof value === 'object' && value !== null && 'nativeEvent' in value;
+    }
+    mergeSeparator(gapIndex, patch) {
+        const count = this.metricsCore.count;
+        if (gapIndex < FIRST_INDEX || gapIndex > count - 2)
+            return;
+        this.separatorOverrides.set(gapIndex, { ...this.separatorOverrides.get(gapIndex), ...patch });
+        this.cdr.markForCheck();
+    }
+    makeSeparators(index) {
+        return {
+            highlight: () => {
+                dlog(`Angular VirtualizedList separator highlight cell=${index}`);
+                this.mergeSeparator(index - 1, { highlighted: true });
+                this.mergeSeparator(index, { highlighted: true });
+            },
+            unhighlight: () => {
+                dlog(`Angular VirtualizedList separator unhighlight cell=${index}`);
+                this.mergeSeparator(index - 1, { highlighted: false });
+                this.mergeSeparator(index, { highlighted: false });
+            },
+            updateProps: (select, newProps) => {
+                this.mergeSeparator(select === 'leading' ? index - 1 : index, newProps);
+            },
+        };
+    }
+    // ---- imperative handle (the shared IVirtualizedListHandle surface) ----
+    scrollToOffset(params) {
+        this.scrollToPixel(params.offset, params.animated ?? true);
+    }
+    scrollToIndex(params) {
+        const m = this.metricsCore;
+        // No getItemLayout AND the target is past the last measured cell: report the failure instead of
+        // scrolling to a fabricated estimate (RN VirtualizedList.js).
+        if (this.getItemLayout === undefined && params.index > highestMeasuredIndex(this.measured)) {
+            dlog(`Angular VirtualizedList onScrollToIndexFailed index=${params.index} ` +
+                `highestMeasured=${highestMeasuredIndex(this.measured)} (no getItemLayout)`);
+            this.scrollToIndexFailed.emit({
+                index: params.index,
+                highestMeasuredFrameIndex: highestMeasuredIndex(this.measured),
+                averageItemLength: m.averageLength,
+            });
+            return;
+        }
+        this.scrollToPixel(this.offsetForIndexLocal(params.index, params.viewPosition ?? FIRST_INDEX, params.viewOffset ?? EMPTY_OFFSET), params.animated ?? true);
+    }
+    scrollToItem(params) {
+        const count = this.metricsCore.count;
+        for (let index = FIRST_INDEX; index < count; index += 1) {
+            if (this.getItem(this.data, index) === params.item) {
+                this.scrollToPixel(this.offsetForIndexLocal(index, params.viewPosition ?? FIRST_INDEX, EMPTY_OFFSET), params.animated ?? true);
+                return;
+            }
+        }
+        dlog('Angular VirtualizedList scrollToItem: item not found');
+    }
+    scrollToEnd(params) {
+        this.scrollToPixel(Math.max(EMPTY_OFFSET, this.metricsCore.total - this.viewportLength), params?.animated ?? true);
+    }
+    flashScrollIndicators() {
+        this.scrollView?.flashScrollIndicators();
+    }
+    getNativeScrollRef() {
+        return this.scrollView ?? null;
+    }
+    getScrollableNode() {
+        return this.scrollView ?? null;
+    }
+    getScrollResponder() {
+        return this.scrollView ?? null;
+    }
+    getScrollNode() {
+        return this.scrollView?.getScrollNode() ?? null;
+    }
+    recordInteraction() {
+        this.hasInteracted = true;
+    }
+    scrollToPixel(offset, animated) {
+        const clamped = Math.max(EMPTY_OFFSET, offset);
+        const target = this.isHorizontal
+            ? { x: clamped, y: EMPTY_OFFSET }
+            : { x: EMPTY_OFFSET, y: clamped };
+        if (this.scrollView !== undefined) {
+            dlog(`Angular VirtualizedList scrollTo offset=${clamped} animated=${animated} (horizontal=${this.isHorizontal})`);
+            this.scrollView.scrollTo({ x: target.x, y: target.y, animated });
+            return;
+        }
+        dlog(`Angular VirtualizedList scrollTo offset=${clamped} pending-ref`);
+        this.commandedOffset = target;
+        this.cdr.markForCheck();
+    }
+    offsetForIndexLocal(index, viewPosition, viewOffset) {
+        const m = this.metricsCore;
+        return offsetForIndex(index, viewPosition, viewOffset, m.count, m.offsets, m.lengths, this.viewportLength);
+    }
+    // ---- after-commit effects (run in ngAfterViewChecked, the post-render seam) ----
+    // Batch fill: when the throttled window has not reached the target, schedule a re-render so the
+    // window keeps filling toward target over successive ticks (RN's incremental fill).
+    effectBatchFill() {
+        const m = this.metricsCore;
+        if (this.batchTimer !== null) {
+            clearTimeout(this.batchTimer);
+            this.batchTimer = null;
+        }
+        if (m.first <= m.target.first && m.last >= m.target.last)
+            return;
+        this.batchTimer = setTimeout(() => {
+            this.batchTimer = null;
+            this.measureVersion += 1;
+            this.cdr.markForCheck();
+        }, this.updateCellsBatchingPeriodValue);
+    }
+    // onEndReached: fire only when the actual last cell is rendered AND within threshold; dedup by
+    // content length; re-arm on scroll away from the end (RN _maybeCallOnEdgeReached).
+    effectEndReached() {
+        if (!this.endReached.observed || this.viewportLength <= EMPTY_OFFSET)
+            return;
+        const m = this.metricsCore;
+        const { distanceFromEnd, withinThreshold } = computeEndReached(m.total, this.scrollOffset, this.viewportLength, this.onEndReachedThresholdValue);
+        const lastCellRendered = m.last === m.count - 1;
+        if (withinThreshold && lastCellRendered && this.sentEndForContentLength !== m.total) {
+            this.sentEndForContentLength = m.total;
+            dlog(`Angular VirtualizedList endReached distanceFromEnd=${distanceFromEnd} ` +
+                `(last=${m.last} of ${m.count}, contentLength=${m.total})`);
+            this.endReached.emit({ distanceFromEnd });
+        }
+        if (!withinThreshold)
+            this.sentEndForContentLength = NO_CONTENT_LENGTH_SENT;
+    }
+    // startReached: the top-edge twin of endReached.
+    effectStartReached() {
+        if (!this.startReached.observed || this.viewportLength <= EMPTY_OFFSET)
+            return;
+        const m = this.metricsCore;
+        const { distanceFromStart, withinThreshold } = computeStartReached(this.scrollOffset, this.viewportLength, this.onStartReachedThresholdValue);
+        const firstCellRendered = m.first === FIRST_INDEX;
+        if (withinThreshold && firstCellRendered && this.sentStartForContentLength !== m.total) {
+            this.sentStartForContentLength = m.total;
+            dlog(`Angular VirtualizedList startReached distanceFromStart=${distanceFromStart} ` +
+                `(first=${m.first}, contentLength=${m.total})`);
+            this.startReached.emit({ distanceFromStart });
+        }
+        if (!withinThreshold)
+            this.sentStartForContentLength = NO_CONTENT_LENGTH_SENT;
+    }
+    // Viewability: recompute which rendered cells clear the threshold and, if the viewable set
+    // changed, fire viewableItemsChanged + every config/callback pair, honoring minimumViewTime.
+    effectViewability() {
+        const m = this.metricsCore;
+        const pairs = buildViewabilityPairs(this.viewableItemsChanged.observed
+            ? (info) => this.viewableItemsChanged.emit(info)
+            : undefined, this.viewabilityConfig, this.viewabilityConfigCallbackPairs);
+        if (pairs.length === EMPTY_OFFSET || this.viewportLength <= EMPTY_OFFSET)
+            return;
+        if (m.count === FIRST_INDEX)
+            return;
+        const { tokens, map } = computeViewableSet({
+            first: m.first,
+            last: m.last,
+            count: m.count,
+            offsets: m.offsets,
+            lengths: m.lengths,
+            scrollOffset: this.scrollOffset,
+            viewportLength: this.viewportLength,
+            data: this.data,
+            getItem: this.getItem,
+            keyExtractor: this.keyExtractor,
+            pairs,
+            hasInteracted: this.hasInteracted,
+        });
+        const diff = diffViewable(this.lastViewable, map, tokens);
+        if (!diff.hasChanged)
+            return;
+        const commitAndFire = () => {
+            this.lastViewable = map;
+            dlog(`Angular VirtualizedList viewable=${tokens.length} changed=${diff.changed.length} ` +
+                `(window [${m.first}, ${m.last}])`);
+            const info = {
+                viewableItems: tokens,
+                changed: diff.changed,
+            };
+            for (const pair of pairs)
+                pair.onViewableItemsChanged(info);
+        };
+        const minimumViewTime = maxMinimumViewTime(pairs);
+        if (this.viewableTimer !== null) {
+            clearTimeout(this.viewableTimer);
+            this.viewableTimer = null;
+        }
+        if (minimumViewTime > EMPTY_OFFSET) {
+            dlog(`Angular VirtualizedList viewability debounce ${minimumViewTime}ms (window [${m.first}, ${m.last}])`);
+            this.viewableTimer = setTimeout(() => {
+                this.viewableTimer = null;
+                commitAndFire();
+            }, minimumViewTime);
+            return;
+        }
+        commitAndFire();
+    }
+    // initialScrollIndex: once the first viewport is known, jump to that index a single time.
+    effectInitialScroll() {
+        if (this.initialScrollIndex === undefined || this.appliedInitialScroll)
+            return;
+        if (this.viewportLength <= EMPTY_OFFSET || this.metricsCore.count === FIRST_INDEX)
+            return;
+        this.appliedInitialScroll = true;
+        // The initial jump is instant (RN does not animate initialScrollIndex).
+        this.scrollToPixel(this.offsetForIndexLocal(this.initialScrollIndex, FIRST_INDEX, EMPTY_OFFSET), false);
+    }
+    // maintainVisibleContentPosition JS anchor adjustment: track the key of the item at
+    // minIndexForVisible; when a prepend moves it down, add the inserted extent in the leading SPACER
+    // (the off-window items native MVCP cannot see) to scrollOffset so the anchored item does not jump
+    // (RN getDerivedStateFromProps).
+    effectMaintainVisibleContentPosition() {
+        const m = this.metricsCore;
+        if (this.maintainVisibleContentPosition === undefined || m.count === FIRST_INDEX) {
+            this.firstVisibleKey = null;
+            return;
+        }
+        const minIndexForVisible = this.maintainVisibleContentPosition.minIndexForVisible;
+        const newFirstVisibleKey = m.count > minIndexForVisible ? this.keyFor(minIndexForVisible) : null;
+        const prevKey = this.firstVisibleKey;
+        if (prevKey !== null && newFirstVisibleKey !== null && prevKey !== newFirstVisibleKey) {
+            let anchorIndex = -1;
+            for (let index = minIndexForVisible; index < m.count; index += 1) {
+                if (this.keyFor(index) === prevKey) {
+                    anchorIndex = index;
+                    break;
+                }
+            }
+            if (anchorIndex > minIndexForVisible) {
+                const spacerEnd = Math.min(anchorIndex, this.committedWindow.first);
+                const insertedExtent = spacerEnd > minIndexForVisible
+                    ? m.offsets[spacerEnd] - m.offsets[minIndexForVisible]
+                    : EMPTY_OFFSET;
+                if (insertedExtent > EMPTY_OFFSET) {
+                    const autoThreshold = this.maintainVisibleContentPosition.autoscrollToTopThreshold;
+                    const anchoredNearTop = autoThreshold !== undefined && this.scrollOffset <= autoThreshold;
+                    if (anchoredNearTop) {
+                        dlog(`Angular VirtualizedList MVCP autoscroll-to-top (offset=${this.scrollOffset} <= ${autoThreshold})`);
+                        this.scrollToPixel(EMPTY_OFFSET, true);
+                    }
+                    else {
+                        dlog(`Angular VirtualizedList MVCP adjust +${insertedExtent}px ` +
+                            `(anchor "${prevKey}" moved ${minIndexForVisible}->${anchorIndex})`);
+                        this.scrollToPixel(this.scrollOffset + insertedExtent, false);
+                    }
+                }
+            }
+        }
+        this.firstVisibleKey = newFirstVisibleKey;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: VirtualizedList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: VirtualizedList, isStandalone: true, selector: "VirtualizedList", inputs: { data: "data", getItem: "getItem", getItemCount: "getItemCount", keyExtractor: "keyExtractor", getItemLayout: "getItemLayout", horizontal: "horizontal", inverted: "inverted", extraData: "extraData", onEndReachedThreshold: "onEndReachedThreshold", onStartReachedThreshold: "onStartReachedThreshold", refreshing: "refreshing", progressViewOffset: "progressViewOffset", refreshRequested: "refreshRequested", viewabilityConfig: "viewabilityConfig", viewabilityConfigCallbackPairs: "viewabilityConfigCallbackPairs", initialNumToRender: "initialNumToRender", initialScrollIndex: "initialScrollIndex", maxToRenderPerBatch: "maxToRenderPerBatch", updateCellsBatchingPeriod: "updateCellsBatchingPeriod", windowSize: "windowSize", stickyHeaderIndices: "stickyHeaderIndices", maintainVisibleContentPosition: "maintainVisibleContentPosition", onScroll: "onScroll", onScrollBeginDrag: "onScrollBeginDrag", onScrollEndDrag: "onScrollEndDrag", onMomentumScrollBegin: "onMomentumScrollBegin", onMomentumScrollEnd: "onMomentumScrollEnd", scrollEventThrottle: "scrollEventThrottle", keyboardShouldPersistTaps: "keyboardShouldPersistTaps", keyboardDismissMode: "keyboardDismissMode", style: "style", contentContainerStyle: "contentContainerStyle", testID: "testID", nativeID: "nativeID", accessible: "accessible", accessibilityLabel: "accessibilityLabel", accessibilityHint: "accessibilityHint", accessibilityRole: "accessibilityRole", accessibilityState: "accessibilityState", accessibilityValue: "accessibilityValue", accessibilityActions: "accessibilityActions", accessibilityLabelledBy: "accessibilityLabelledBy", importantForAccessibility: "importantForAccessibility", accessibilityLiveRegion: "accessibilityLiveRegion", screenReaderFocusable: "screenReaderFocusable", accessibilityViewIsModal: "accessibilityViewIsModal", accessibilityElementsHidden: "accessibilityElementsHidden", accessibilityIgnoresInvertColors: "accessibilityIgnoresInvertColors", accessibilityLanguage: "accessibilityLanguage", accessibilityRespondsToUserInteraction: "accessibilityRespondsToUserInteraction", accessibilityShowsLargeContentViewer: "accessibilityShowsLargeContentViewer", accessibilityLargeContentTitle: "accessibilityLargeContentTitle", role: "role", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaLive: "ariaLive", ariaHidden: "ariaHidden", ariaBusy: "ariaBusy", ariaChecked: "ariaChecked", ariaDisabled: "ariaDisabled", ariaExpanded: "ariaExpanded", ariaSelected: "ariaSelected", ariaModal: "ariaModal", ariaValueMax: "ariaValueMax", ariaValueMin: "ariaValueMin", ariaValueNow: "ariaValueNow", ariaValueText: "ariaValueText" }, outputs: { endReached: "endReached", startReached: "startReached", refresh: "refresh", viewableItemsChanged: "viewableItemsChanged", scrollToIndexFailed: "scrollToIndexFailed", accessibilityAction: "accessibilityAction", accessibilityTap: "accessibilityTap", magicTap: "magicTap", accessibilityEscape: "accessibilityEscape" }, queries: [{ propertyName: "itemDir", first: true, predicate: VListItemDirective, descendants: true }, { propertyName: "headerDir", first: true, predicate: VListHeaderDirective, descendants: true }, { propertyName: "footerDir", first: true, predicate: VListFooterDirective, descendants: true }, { propertyName: "emptyDir", first: true, predicate: VListEmptyDirective, descendants: true }, { propertyName: "separatorDir", first: true, predicate: VListSeparatorDirective, descendants: true }], viewQueries: [{ propertyName: "scrollView", first: true, predicate: ScrollView, descendants: true }], ngImport: i0, template: `
+    <ScrollView
+      [horizontal]="isHorizontal"
+      [style]="resolvedStyle"
+      [contentContainerStyle]="resolvedContentContainerStyle"
+      [testID]="foldedAccessibility.testID"
+      [nativeID]="foldedAccessibility.nativeID"
+      [accessible]="foldedAccessibility.accessible"
+      [accessibilityLabel]="foldedAccessibility.accessibilityLabel"
+      [accessibilityHint]="foldedAccessibility.accessibilityHint"
+      [accessibilityRole]="foldedAccessibility.accessibilityRole"
+      [accessibilityState]="foldedAccessibility.accessibilityState"
+      [accessibilityValue]="foldedAccessibility.accessibilityValue"
+      [accessibilityActions]="foldedAccessibility.accessibilityActions"
+      [accessibilityLabelledBy]="foldedAccessibility.accessibilityLabelledBy"
+      [importantForAccessibility]="foldedAccessibility.importantForAccessibility"
+      [accessibilityLiveRegion]="foldedAccessibility.accessibilityLiveRegion"
+      [screenReaderFocusable]="foldedAccessibility.screenReaderFocusable"
+      [accessibilityViewIsModal]="foldedAccessibility.accessibilityViewIsModal"
+      [accessibilityElementsHidden]="foldedAccessibility.accessibilityElementsHidden"
+      [accessibilityIgnoresInvertColors]="foldedAccessibility.accessibilityIgnoresInvertColors"
+      [accessibilityLanguage]="foldedAccessibility.accessibilityLanguage"
+      [accessibilityRespondsToUserInteraction]="
+        foldedAccessibility.accessibilityRespondsToUserInteraction
+      "
+      [accessibilityShowsLargeContentViewer]="
+        foldedAccessibility.accessibilityShowsLargeContentViewer
+      "
+      [accessibilityLargeContentTitle]="foldedAccessibility.accessibilityLargeContentTitle"
+      (accessibilityAction)="accessibilityActionTick($event)"
+      (accessibilityTap)="accessibilityTapTick($event)"
+      (magicTap)="magicTapTick($event)"
+      (accessibilityEscape)="accessibilityEscapeTick($event)"
+      [onScroll]="onScrollTick"
+      (layout)="onLayoutTick($event)"
+      [onScrollBeginDrag]="onScrollBeginDrag"
+      [onScrollEndDrag]="onScrollEndDrag"
+      [onMomentumScrollBegin]="onMomentumScrollBegin"
+      [onMomentumScrollEnd]="onMomentumScrollEnd"
+      [scrollEventThrottle]="scrollEventThrottle"
+      [keyboardShouldPersistTaps]="keyboardShouldPersistTaps"
+      [keyboardDismissMode]="keyboardDismissMode"
+      [contentOffset]="commandedOffset"
+      [stickyHeaderIndices]="renderedStickyIndices"
+      [maintainVisibleContentPosition]="resolvedMaintainVisibleContentPosition"
+    >
+      @if (shouldRenderRefreshControl) {
+        <RefreshControl
+          [refreshing]="refreshing ?? false"
+          (refresh)="handleRefresh()"
+          [progressViewOffset]="progressViewOffset"
+        />
+      }
+
+      @if (headerDir !== undefined) {
+        <symbiote-view>
+          <ng-container [vListOutlet]="headerDir.templateRef"></ng-container>
+        </symbiote-view>
+      }
+
+      @if (itemCount === 0) {
+        @if (emptyDir !== undefined) {
+          <symbiote-view>
+            <ng-container [vListOutlet]="emptyDir.templateRef"></ng-container>
+          </symbiote-view>
+        }
+      } @else {
+        @if (leadingSpacerStyle !== null) {
+          <symbiote-view [style]="leadingSpacerStyle"></symbiote-view>
+        }
+        @for (cell of windowCells; track cell.key) {
+          <symbiote-view (layout)="handleCellLayout(cell.measure, $event)" [style]="cellStyle">
+            <ng-container
+              [vListOutlet]="itemDir?.templateRef"
+              [vListOutletContext]="cell.context"
+            ></ng-container>
+          </symbiote-view>
+          @if (cell.separatorContext !== undefined) {
+            <symbiote-view>
+              <ng-container
+                [vListOutlet]="separatorDir?.templateRef"
+                [vListOutletContext]="cell.separatorContext"
+              ></ng-container>
+            </symbiote-view>
+          }
+        }
+        @if (trailingSpacerStyle !== null) {
+          <symbiote-view [style]="trailingSpacerStyle"></symbiote-view>
+        }
+      }
+
+      @if (footerDir !== undefined) {
+        <symbiote-view>
+          <ng-container [vListOutlet]="footerDir.templateRef"></ng-container>
+        </symbiote-view>
+      }
+    </ScrollView>
+  `, isInline: true, dependencies: [{ kind: "component", type: ScrollView, selector: "ScrollView", inputs: ["style", "contentContainerStyle", "horizontal", "scrollEnabled", "showsVerticalScrollIndicator", "showsHorizontalScrollIndicator", "pagingEnabled", "bounces", "decelerationRate", "scrollEventThrottle", "contentInset", "contentOffset", "removeClippedSubviews", "snapToInterval", "snapToOffsets", "snapToAlignment", "snapToStart", "snapToEnd", "disableIntervalMomentum", "stickyHeaderIndices", "invertStickyHeaders", "StickyHeaderComponent", "keyboardDismissMode", "keyboardShouldPersistTaps", "maintainVisibleContentPosition", "alwaysBounceHorizontal", "alwaysBounceVertical", "centerContent", "scrollIndicatorInsets", "indicatorStyle", "directionalLockEnabled", "automaticallyAdjustKeyboardInsets", "contentInsetAdjustmentBehavior", "minimumZoomScale", "maximumZoomScale", "zoomScale", "bouncesZoom", "pinchGestureEnabled", "nestedScrollEnabled", "overScrollMode", "fadingEdgeLength", "persistentScrollbar", "endFillColor", "onScroll", "onScrollBeginDrag", "onScrollEndDrag", "onMomentumScrollBegin", "onMomentumScrollEnd", "testID", "nativeID", "accessible", "accessibilityLabel", "accessibilityHint", "accessibilityRole", "accessibilityState", "accessibilityValue", "accessibilityActions", "accessibilityLabelledBy", "importantForAccessibility", "accessibilityLiveRegion", "screenReaderFocusable", "accessibilityViewIsModal", "accessibilityElementsHidden", "accessibilityIgnoresInvertColors", "accessibilityLanguage", "accessibilityRespondsToUserInteraction", "accessibilityShowsLargeContentViewer", "accessibilityLargeContentTitle", "role", "aria-label", "aria-labelledby", "aria-live", "aria-hidden", "aria-busy", "aria-checked", "aria-disabled", "aria-expanded", "aria-selected", "aria-modal", "aria-valuemax", "aria-valuemin", "aria-valuenow", "aria-valuetext"] }, { kind: "component", type: RefreshControl, selector: "RefreshControl", inputs: ["refreshing", "tintColor", "title", "titleColor", "progressViewOffset", "colors", "progressBackgroundColor", "size", "enabled", "style", "testID", "nativeID", "accessible", "accessibilityLabel", "accessibilityHint", "accessibilityRole", "accessibilityState", "accessibilityValue", "accessibilityActions", "accessibilityLabelledBy", "importantForAccessibility", "accessibilityLiveRegion", "screenReaderFocusable", "accessibilityViewIsModal", "accessibilityElementsHidden", "accessibilityIgnoresInvertColors", "accessibilityLanguage", "accessibilityRespondsToUserInteraction", "accessibilityShowsLargeContentViewer", "accessibilityLargeContentTitle", "role", "aria-label", "aria-labelledby", "aria-live", "aria-hidden", "aria-busy", "aria-checked", "aria-disabled", "aria-expanded", "aria-selected", "aria-modal", "aria-valuemax", "aria-valuemin", "aria-valuenow", "aria-valuetext"], outputs: ["refresh", "accessibilityAction", "accessibilityTap", "magicTap", "accessibilityEscape"] }, { kind: "directive", type: VListOutletDirective, selector: "[vListOutlet]", inputs: ["vListOutlet", "vListOutletContext"] }, { kind: "component", type: ViewHost, selector: "symbiote-view, View" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: VirtualizedList, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'VirtualizedList',
+                    standalone: true,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    imports: [ScrollView, RefreshControl, VListOutletDirective, ViewHost],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <ScrollView
+      [horizontal]="isHorizontal"
+      [style]="resolvedStyle"
+      [contentContainerStyle]="resolvedContentContainerStyle"
+      [testID]="foldedAccessibility.testID"
+      [nativeID]="foldedAccessibility.nativeID"
+      [accessible]="foldedAccessibility.accessible"
+      [accessibilityLabel]="foldedAccessibility.accessibilityLabel"
+      [accessibilityHint]="foldedAccessibility.accessibilityHint"
+      [accessibilityRole]="foldedAccessibility.accessibilityRole"
+      [accessibilityState]="foldedAccessibility.accessibilityState"
+      [accessibilityValue]="foldedAccessibility.accessibilityValue"
+      [accessibilityActions]="foldedAccessibility.accessibilityActions"
+      [accessibilityLabelledBy]="foldedAccessibility.accessibilityLabelledBy"
+      [importantForAccessibility]="foldedAccessibility.importantForAccessibility"
+      [accessibilityLiveRegion]="foldedAccessibility.accessibilityLiveRegion"
+      [screenReaderFocusable]="foldedAccessibility.screenReaderFocusable"
+      [accessibilityViewIsModal]="foldedAccessibility.accessibilityViewIsModal"
+      [accessibilityElementsHidden]="foldedAccessibility.accessibilityElementsHidden"
+      [accessibilityIgnoresInvertColors]="foldedAccessibility.accessibilityIgnoresInvertColors"
+      [accessibilityLanguage]="foldedAccessibility.accessibilityLanguage"
+      [accessibilityRespondsToUserInteraction]="
+        foldedAccessibility.accessibilityRespondsToUserInteraction
+      "
+      [accessibilityShowsLargeContentViewer]="
+        foldedAccessibility.accessibilityShowsLargeContentViewer
+      "
+      [accessibilityLargeContentTitle]="foldedAccessibility.accessibilityLargeContentTitle"
+      (accessibilityAction)="accessibilityActionTick($event)"
+      (accessibilityTap)="accessibilityTapTick($event)"
+      (magicTap)="magicTapTick($event)"
+      (accessibilityEscape)="accessibilityEscapeTick($event)"
+      [onScroll]="onScrollTick"
+      (layout)="onLayoutTick($event)"
+      [onScrollBeginDrag]="onScrollBeginDrag"
+      [onScrollEndDrag]="onScrollEndDrag"
+      [onMomentumScrollBegin]="onMomentumScrollBegin"
+      [onMomentumScrollEnd]="onMomentumScrollEnd"
+      [scrollEventThrottle]="scrollEventThrottle"
+      [keyboardShouldPersistTaps]="keyboardShouldPersistTaps"
+      [keyboardDismissMode]="keyboardDismissMode"
+      [contentOffset]="commandedOffset"
+      [stickyHeaderIndices]="renderedStickyIndices"
+      [maintainVisibleContentPosition]="resolvedMaintainVisibleContentPosition"
+    >
+      @if (shouldRenderRefreshControl) {
+        <RefreshControl
+          [refreshing]="refreshing ?? false"
+          (refresh)="handleRefresh()"
+          [progressViewOffset]="progressViewOffset"
+        />
+      }
+
+      @if (headerDir !== undefined) {
+        <symbiote-view>
+          <ng-container [vListOutlet]="headerDir.templateRef"></ng-container>
+        </symbiote-view>
+      }
+
+      @if (itemCount === 0) {
+        @if (emptyDir !== undefined) {
+          <symbiote-view>
+            <ng-container [vListOutlet]="emptyDir.templateRef"></ng-container>
+          </symbiote-view>
+        }
+      } @else {
+        @if (leadingSpacerStyle !== null) {
+          <symbiote-view [style]="leadingSpacerStyle"></symbiote-view>
+        }
+        @for (cell of windowCells; track cell.key) {
+          <symbiote-view (layout)="handleCellLayout(cell.measure, $event)" [style]="cellStyle">
+            <ng-container
+              [vListOutlet]="itemDir?.templateRef"
+              [vListOutletContext]="cell.context"
+            ></ng-container>
+          </symbiote-view>
+          @if (cell.separatorContext !== undefined) {
+            <symbiote-view>
+              <ng-container
+                [vListOutlet]="separatorDir?.templateRef"
+                [vListOutletContext]="cell.separatorContext"
+              ></ng-container>
+            </symbiote-view>
+          }
+        }
+        @if (trailingSpacerStyle !== null) {
+          <symbiote-view [style]="trailingSpacerStyle"></symbiote-view>
+        }
+      }
+
+      @if (footerDir !== undefined) {
+        <symbiote-view>
+          <ng-container [vListOutlet]="footerDir.templateRef"></ng-container>
+        </symbiote-view>
+      }
+    </ScrollView>
+  `,
+                }]
+        }], propDecorators: { endReached: [{
+                type: Output
+            }], startReached: [{
+                type: Output
+            }], refresh: [{
+                type: Output
+            }], viewableItemsChanged: [{
+                type: Output
+            }], scrollToIndexFailed: [{
+                type: Output
+            }], accessibilityAction: [{
+                type: Output
+            }], accessibilityTap: [{
+                type: Output
+            }], magicTap: [{
+                type: Output
+            }], accessibilityEscape: [{
+                type: Output
+            }], data: [{
+                type: Input,
+                args: [{ required: true }]
+            }], getItem: [{
+                type: Input,
+                args: [{ required: true }]
+            }], getItemCount: [{
+                type: Input,
+                args: [{ required: true }]
+            }], keyExtractor: [{
+                type: Input
+            }], getItemLayout: [{
+                type: Input
+            }], horizontal: [{
+                type: Input
+            }], inverted: [{
+                type: Input
+            }], extraData: [{
+                type: Input
+            }], onEndReachedThreshold: [{
+                type: Input
+            }], onStartReachedThreshold: [{
+                type: Input
+            }], refreshing: [{
+                type: Input
+            }], progressViewOffset: [{
+                type: Input
+            }], refreshRequested: [{
+                type: Input
+            }], viewabilityConfig: [{
+                type: Input
+            }], viewabilityConfigCallbackPairs: [{
+                type: Input
+            }], initialNumToRender: [{
+                type: Input
+            }], initialScrollIndex: [{
+                type: Input
+            }], maxToRenderPerBatch: [{
+                type: Input
+            }], updateCellsBatchingPeriod: [{
+                type: Input
+            }], windowSize: [{
+                type: Input
+            }], stickyHeaderIndices: [{
+                type: Input
+            }], maintainVisibleContentPosition: [{
+                type: Input
+            }], onScroll: [{
+                type: Input
+            }], onScrollBeginDrag: [{
+                type: Input
+            }], onScrollEndDrag: [{
+                type: Input
+            }], onMomentumScrollBegin: [{
+                type: Input
+            }], onMomentumScrollEnd: [{
+                type: Input
+            }], scrollEventThrottle: [{
+                type: Input
+            }], keyboardShouldPersistTaps: [{
+                type: Input
+            }], keyboardDismissMode: [{
+                type: Input
+            }], style: [{
+                type: Input
+            }], contentContainerStyle: [{
+                type: Input
+            }], testID: [{
+                type: Input
+            }], nativeID: [{
+                type: Input
+            }], accessible: [{
+                type: Input
+            }], accessibilityLabel: [{
+                type: Input
+            }], accessibilityHint: [{
+                type: Input
+            }], accessibilityRole: [{
+                type: Input
+            }], accessibilityState: [{
+                type: Input
+            }], accessibilityValue: [{
+                type: Input
+            }], accessibilityActions: [{
+                type: Input
+            }], accessibilityLabelledBy: [{
+                type: Input
+            }], importantForAccessibility: [{
+                type: Input
+            }], accessibilityLiveRegion: [{
+                type: Input
+            }], screenReaderFocusable: [{
+                type: Input
+            }], accessibilityViewIsModal: [{
+                type: Input
+            }], accessibilityElementsHidden: [{
+                type: Input
+            }], accessibilityIgnoresInvertColors: [{
+                type: Input
+            }], accessibilityLanguage: [{
+                type: Input
+            }], accessibilityRespondsToUserInteraction: [{
+                type: Input
+            }], accessibilityShowsLargeContentViewer: [{
+                type: Input
+            }], accessibilityLargeContentTitle: [{
+                type: Input
+            }], role: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], ariaLabelledBy: [{
+                type: Input
+            }], ariaLive: [{
+                type: Input
+            }], ariaHidden: [{
+                type: Input
+            }], ariaBusy: [{
+                type: Input
+            }], ariaChecked: [{
+                type: Input
+            }], ariaDisabled: [{
+                type: Input
+            }], ariaExpanded: [{
+                type: Input
+            }], ariaSelected: [{
+                type: Input
+            }], ariaModal: [{
+                type: Input
+            }], ariaValueMax: [{
+                type: Input
+            }], ariaValueMin: [{
+                type: Input
+            }], ariaValueNow: [{
+                type: Input
+            }], ariaValueText: [{
+                type: Input
+            }], itemDir: [{
+                type: ContentChild,
+                args: [VListItemDirective]
+            }], headerDir: [{
+                type: ContentChild,
+                args: [VListHeaderDirective]
+            }], footerDir: [{
+                type: ContentChild,
+                args: [VListFooterDirective]
+            }], emptyDir: [{
+                type: ContentChild,
+                args: [VListEmptyDirective]
+            }], separatorDir: [{
+                type: ContentChild,
+                args: [VListSeparatorDirective]
+            }], scrollView: [{
+                type: ViewChild,
+                args: [ScrollView]
+            }] } });
+//# sourceMappingURL=index.js.map