@symbiote-native/angular 3.1.2 → 3.2.0

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

@@ -1,339 +1,66 @@
-// 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
-// so every adapter keeps the same feature surface. 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 writes the `scroll-view`/
-// `horizontal-scroll-view` TAG directly, exactly as the React/Vue lists drive their scroll tag.
-//
-// 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, since a callback prop returning an element has no Angular equivalent.
-//
-// Lists have no Descriptor render fn — the cell content is the framework's own children.
-// Cells/spacers are plain view host elements.
-import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, Input, Output, TemplateRef, ViewChild, computed, inject, signal, } from '@angular/core';
-import { DEFAULT_INITIAL_NUM_TO_RENDER, DEFAULT_MAX_TO_RENDER_PER_BATCH, DEFAULT_UPDATE_CELLS_BATCHING_PERIOD, DEFAULT_WINDOW_SIZE, EMPTY_OFFSET, FIRST_INDEX, INVERTED_X_STYLE, INVERTED_Y_STYLE, buildListPlan, buildViewabilityPairs, computeWindow, createInitialListState, isSeparatorGapInRange, listEffectSignature, readLayoutLength, readLayoutOffset, readScrollOffset, reduceList, resolveAccessibilityProps, resolveItemKey, buildScrollViewHandle, } from '@symbiote-native/components';
-import { dlog, flattenStyle, isSymbioteNode, } from '@symbiote-native/engine';
+// Angular lifecycle half of VirtualizedList, the windowing engine is shared with React and Vue
+// The bound surface is in ./list-inputs.ts, cells in ./cell-registry.ts, effects in
+// ./list-effects.ts, styles in ./list-styles.ts and the authoring templates in ./directives.ts
+import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, ViewChild, inject, } from '@angular/core';
+import { EMPTY_OFFSET, FIRST_INDEX, LIST_ACTION_KIND, buildListPlan, buildScrollViewHandle, buildViewabilityPairs, computeWindow, createInitialListState, listEffectSignature, reduceList, resolveItemKey, } from '@symbiote-native/components';
+import { dlog, isSymbioteNode, } from '@symbiote-native/engine';
 import { countAngular } from '../../diagnostics';
 import { anchorHostStyle, SymbioteHostPropsDirective, SymbioteStyleInputDirective, ViewHost, } from '../../primitives';
-import { VListEmptyDirective, VListFooterDirective, VListHeaderDirective, VListItemDirective, VListOutletDirective, VListSeparatorDirective, } from './directives';
-import { gateWanted, injectGateDemandAbove, } from '../../gate-demand';
+import { CellRegistry } from './cell-registry';
+import { VListOutletDirective } from './directives';
+import { ListEffectRunner } from './list-effects';
+import { VirtualizedListBagsBase } from './list-bags';
+import { resolveListStyles } from './list-styles';
+import { VIRTUALIZED_LIST_TEMPLATE } from './list-template';
 import * as i0 from "@angular/core";
 import * as i1 from "../../primitives/shared";
 export { VListEmptyDirective, VListFooterDirective, VListHeaderDirective, VListItemDirective, VListSeparatorDirective, } from './directives';
-// The scroll body is identical on both axes; only the outer tag differs (the axis comes from the
-// TAG, never a prop — `<horizontal-scroll-view>` vs `<scroll-view>`, matching every other adapter,
-// `.claude/rules/host-primitive-tier.md`). No shared-outlet primitive exists to de-duplicate this
-// (this package's own NgTemplateOutlet twin is keyed on a per-cell context, not a static block, and
-// ngc's partial evaluator needs the decorator's `template` to be one literal), so the body is
-// duplicated across the two branches — the same shape Svelte's own `{#if horizontal}` takes.
-export class VirtualizedList {
+export class VirtualizedList extends VirtualizedListBagsBase {
     constructor() {
-        // 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 scroll-view/refresh-control bag keys are fed from these.
-        this.endReached = new EventEmitter();
-        this.startReached = new EventEmitter();
-        this.refresh = new EventEmitter();
-        this.viewableItemsChanged = new EventEmitter();
-        this.scrollToIndexFailed = new EventEmitter();
-        this.accessibilityAction = new EventEmitter();
-        this.accessibilityTap = new EventEmitter();
-        this.magicTap = new EventEmitter();
-        this.accessibilityEscape = new EventEmitter();
-        // This wrapper binds the four gated accessibility events on the component it renders, which
-        // Angular forces to be unconditional and which would light that component's gates on every
-        // instance. It answers for them instead — see `gate-demand.ts`.
-        this.gateDemandAbove = injectGateDemandAbove();
-        // `buildScrollViewHandle` reads the node lazily through the getter above and no-ops before
-        // commit — the same function every other adapter feeds from its own host-instance accessor.
+        super(...arguments);
         this.scrollHandle = buildScrollViewHandle(() => this.scrollNode);
-        // --- template-bound view state, assembled in ngDoCheck (recomputeView) ---
+        // Template-bound view state, assembled by `recomputeView` in `ngDoCheck`
         this.itemCount = EMPTY_OFFSET;
         this.windowCells = [];
-        // The nearest sticky-header cell force-mounted outside [first,last] (plan.forcedStickyCell), the
-        // Angular twin of RN's _ensureClosestStickyHeader. Rendered ahead of windowCells, right after the
-        // leading spacer, with gapSpacerStyle filling the gap to the window's own first cell — see
-        // buildListPlan's doc comment for the exact child order this assumes.
+        // The nearest sticky cell mounted outside the window, `gapSpacerStyle` fills up to the window
         this.forcedStickyCell = null;
         this.leadingSpacerStyle = null;
         this.gapSpacerStyle = null;
         this.trailingSpacerStyle = null;
         this.cellStyle = 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.
-        this.resolvedStyle = undefined;
-        this.resolvedContentContainerStyle = undefined;
-        this.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.
-        this.commandedOffset = undefined;
-        // The one folded state cell (the Angular twin of React's stateRef): scroll offset, viewport,
-        // measured lengths, committed window, edge/viewability dedup, MVCP anchor — all in IListState,
-        // driven by the shared reduceList. `renderVersion` bumps whenever a transition changes render
-        // state, so ngDoCheck's recompute-dedup can detect it (listState is a plain object, not tracked).
+        // `renderVersion` bumps on every transition that changes render state, for the recompute dedup
         this.listState = createInitialListState();
         this.renderVersion = EMPTY_OFFSET;
-        this.cellMeasures = new Map();
-        // A cell's context object is the ONLY thing its stamped view reads, and VListOutletDirective
-        // refreshes that view whenever the object's IDENTITY changes. recomputeView runs on every frame
-        // the window moves, so minting a fresh context per cell made a four-row slide cost a refresh of
-        // EVERY cell in the window. MEASURED on PATH B geometry (544 entries, 320px viewport, RN
-        // defaults), per fling frame: 233-cell window, 4 cells genuinely entering, 228 outlet updates —
-        // each one a copyContextFields plus a markForCheck that walks to the root. Solid, same geometry,
-        // same shared reducer, same engine output: 4. Handing back the SAME object for a cell whose item
-        // and index did not move keeps `[vListOutletContext]` reference-equal, so ngOnChanges never fires
-        // for it. The fast adapters get this by construction — Solid's <For> is keyed on the cell KEY
-        // strings precisely so "the plan's freshly-built cell objects" cannot rebuild every row
-        // (adapters/solid/src/components/virtualized-list/shared.tsx, the cellKeys memo).
-        this.cellContexts = new Map();
-        this.nextCellContexts = new Map();
-        // Everything a cell's CONTENT can depend on that is not its own item identity. RN's contract for
-        // "re-render the cells, the data object itself did not change" is extraData; without it here an
-        // extraData flip would reuse every context and repaint nothing.
-        this.cellContextEpoch = undefined;
-        this.separatorOverrides = new Map();
-        // The adapter-owned debounce (minimumViewTime) and incremental-fill timers; the reducer only
-        // hands back a delay.
-        this.viewableTimer = null;
-        this.batchTimer = null;
-        // Dedupes the after-commit effects: they run only when the windowing signature changed.
+        this.cells = new CellRegistry({
+            itemAt: index => this.getItem(this.data, index),
+            itemCount: () => this.listState.metrics.count,
+            isHorizontal: () => this.isHorizontal,
+            markForCheck: () => this.cdr.markForCheck(),
+            measured: (index, length, offset) => this.dispatch({ kind: LIST_ACTION_KIND.measure, index, length, offset }),
+        });
+        this.effects = new ListEffectRunner({
+            scrollToPixel: (offset, animated) => this.scrollToPixel(offset, animated),
+            dispatch: action => this.dispatch(action),
+            endReached: this.endReached,
+            startReached: this.startReached,
+            scrollToIndexFailed: this.scrollToIndexFailed,
+        });
         this.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.
+        // Without this dedup a rebuilt cell context reschedules another tick and the list free-runs
         this.lastRecompute = undefined;
         this.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 `scrollHostRef` above, which targets the real
-        // inner `<scroll-view>`/`<horizontal-scroll-view>` tag one level down.
+        // This component's own host, the anchor that `class="..."` at the use site resolves onto
         this.elementRef = inject(ElementRef);
-        // Bridges the non-reactive @Input fields into the reactive graph so `foldedAccessibility` below
-        // can memoize a bag derived from them (read its own comment for why signal inputs are not an
-        // option while this package's unit suite runs on JIT).
-        //
-        // ONLY safe for a bag whose every dependency is an @Input. This list's window machinery
-        // (listState, renderVersion, windowCells, the measured metrics) is driven from scroll/layout
-        // callbacks that never touch ngOnChanges, so nothing derived from it may ride this signal - it
-        // would memoize a window that stops re-computing mid-scroll. Make that state its own signal
-        // instead of widening this one.
-        this.inputsRevision = signal(0, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "inputsRevision" }] : /* istanbul ignore next */ []));
-        // MEASURED (while ScrollView was still a wrapper): the template fed 20 separate inputs off this
-        // one bag, and Angular does not cache a getter across binding expressions - as a getter it
-        // rebuilt the object 20 times per refresh, and every consumer saw a fresh reference, so all 20
-        // reported "changed" and wrote through. A computed evaluates once and hands back the SAME object
-        // until an input actually changes. Every dependency below is an @Input, which is what makes
-        // inputsRevision a complete dependency set here — `scrollViewBag()` reuses this result rather
-        // than re-running the fold.
-        this.foldedAccessibility = computed(() => {
-            this.inputsRevision();
-            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,
-            });
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "foldedAccessibility" }] : /* istanbul ignore next */ []));
-        // onScroll stays a plain callback bag key (an Animated.event(...) target must be able to flow
-        // through it, which an @Output() can't carry), so this is a stable arrow field read straight into
-        // scrollViewBag()'s `onScroll`. onLayout is unconditional too — this list always needs its own
-        // layout for windowing, regardless of whether an app subscribes to anything.
-        this.onScrollTick = (event) => {
-            countAngular('scrollTicks');
-            const offset = readScrollOffset(event, this.isHorizontal);
-            if (offset === undefined)
-                return;
-            dlog(`Angular VirtualizedList onScroll offset=${offset}`);
-            // A real native scroll supersedes any pending commanded offset.
-            this.commandedOffset = undefined;
-            this.dispatch({ kind: 'scroll', offset });
-            // Compose, don't clobber: internal windowing ran first, now the user's onScroll.
-            this.onScroll?.(event);
-        };
-        this.onLayoutTick = (event) => {
-            const length = readLayoutLength(event, this.isHorizontal);
-            if (length === undefined)
-                return;
-            dlog(`Angular VirtualizedList onLayout viewport=${length}`);
-            this.dispatch({ kind: 'layout', length });
-        };
-        // RefreshControl's refresh and the scroll tag's accessibility events reach here as plain
-        // listener-prop values in scrollViewBag()/refreshControlBag() — these fields just adapt
-        // VirtualizedList's own @Output() into a plain re-emit callback.
-        this.handleRefresh = () => {
-            this.refresh.emit();
-        };
-        this.accessibilityActionTick = (event) => {
-            this.accessibilityAction.emit(event);
-        };
-        this.accessibilityTapTick = (event) => {
-            this.accessibilityTap.emit(event);
-        };
-        this.magicTapTick = (event) => {
-            this.magicTap.emit(event);
-        };
-        this.accessibilityEscapeTick = (event) => {
-            this.accessibilityEscape.emit(event);
-        };
         this.keyFor = (index) => {
             const item = this.getItem(this.data, index);
             return resolveItemKey(item, index, this.keyExtractor);
         };
     }
-    wantsGate(name) {
-        return gateWanted(this.gateDemandAbove, name, this[name]);
-    }
-    get cellTemplate() {
-        return this.itemTemplate ?? this.itemDir?.templateRef;
-    }
-    get separatorTemplate() {
-        return this.itemSeparatorTemplate ?? this.separatorDir?.templateRef;
-    }
     get scrollNode() {
         const node = this.scrollHostRef?.nativeElement;
         return isSymbioteNode(node) ? node : null;
     }
-    get shouldRenderRefreshControl() {
-        return this.refreshRequested ?? this.refresh.observed;
-    }
-    // The flat bag fed to the scroll tag via `[symbioteHostProps]`. A plain method, not `computed()`:
-    // most of these fields (resolvedStyle, renderedStickyIndices, commandedOffset, …) are recomputed
-    // in ngDoCheck/dispatch as ordinary fields, not signals, so a computed() memoized only against
-    // `inputsRevision` would go stale the moment one of them changed outside an @Input() write. The
-    // directive itself diffs per key before writing to the engine (`primitives/shared.ts`), so a
-    // fresh object every CD pass costs nothing beyond the literal allocation.
-    scrollViewBag() {
-        return {
-            ...this.foldedAccessibility(),
-            style: this.resolvedStyle,
-            contentContainerStyle: this.resolvedContentContainerStyle,
-            onScroll: this.onScrollTick,
-            onLayout: this.onLayoutTick,
-            onScrollBeginDrag: this.onScrollBeginDrag,
-            onScrollEndDrag: this.onScrollEndDrag,
-            onMomentumScrollBegin: this.onMomentumScrollBegin,
-            onMomentumScrollEnd: this.onMomentumScrollEnd,
-            scrollEventThrottle: this.scrollEventThrottle,
-            keyboardShouldPersistTaps: this.keyboardShouldPersistTaps,
-            keyboardDismissMode: this.keyboardDismissMode,
-            // RN's VirtualizedList spreads its props onto the ScrollView, this one included.
-            removeClippedSubviews: this.removeClippedSubviews,
-            nestedScrollEnabled: this.nestedScrollEnabled,
-            // VirtualizedList.js:1111 — Android moves the scrollbar back after the `scale: -1` flip.
-            isInvertedVirtualizedList: this.isInverted ? true : undefined,
-            contentOffset: this.commandedOffset,
-            // `stickyHeaderIndices` is deliberately NOT forwarded — it numbers the scroll view's PAINT
-            // children, and a windowed list paints a header, a spacer and a slice, so the positions move
-            // every time the window slides and the behavior re-wraps a different child each pass. The
-            // cells carry the `sticky-header` TAG instead, which pins by DOCUMENT order.
-            maintainVisibleContentPosition: this.resolvedMaintainVisibleContentPosition,
-            // The four boolean-gated Fabric events (`.claude/rules/fabric-boolean-event-gates.md`): the
-            // TAG has no `.observed` of its own, so `wantsGate` (own subscriber, or the demand from
-            // whatever wraps this list) is what decides whether the flag reaches Fabric at all.
-            onAccessibilityAction: this.wantsGate('accessibilityAction')
-                ? this.accessibilityActionTick
-                : undefined,
-            onAccessibilityTap: this.wantsGate('accessibilityTap')
-                ? this.accessibilityTapTick
-                : undefined,
-            onMagicTap: this.wantsGate('magicTap') ? this.magicTapTick : undefined,
-            onAccessibilityEscape: this.wantsGate('accessibilityEscape')
-                ? this.accessibilityEscapeTick
-                : undefined,
-        };
-    }
-    // The `refresh-control` tag's own bag — an ordinary first child, re-parented per platform by the
-    // scroll-view behavior (`../refresh-control-props.ts`). `onRefresh` is a plain listener prop, not
-    // a gated one: RefreshControl's `refresh` is unaffected by `fabric-boolean-event-gates.md`.
-    refreshControlBag() {
-        return {
-            refreshing: this.refreshing ?? false,
-            progressViewOffset: this.progressViewOffset,
-            onRefresh: this.handleRefresh,
-        };
-    }
-    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;
-    }
-    get onStartReachedThresholdValue() {
-        return this.onStartReachedThreshold;
-    }
-    // The reducer inputs, folded off the @Input()s each call. The edge/viewability listeners map to
-    // `.observed` (Angular's "is anyone bound to this @Output()"), so the reducer emits only when the
-    // consumer listens — the same on-demand gating the prop-callback era had.
+    // Edge and viewability listeners map to `.observed`, so the reducer emits only if listened to
     buildInputs() {
         return {
             data: this.data,
@@ -346,8 +73,8 @@ export class VirtualizedList {
             initialNumToRender: this.initialNumToRenderValue,
             maxToRenderPerBatch: this.maxToRenderPerBatchValue,
             updateCellsBatchingPeriod: this.updateCellsBatchingPeriodValue,
-            onEndReachedThreshold: this.onEndReachedThresholdValue,
-            onStartReachedThreshold: this.onStartReachedThresholdValue,
+            onEndReachedThreshold: this.onEndReachedThreshold,
+            onStartReachedThreshold: this.onStartReachedThreshold,
             onEndReachedActive: this.endReached.observed,
             onStartReachedActive: this.startReached.observed,
             viewabilityPairs: buildViewabilityPairs(this.viewableItemsChanged.observed
@@ -357,12 +84,11 @@ export class VirtualizedList {
             initialScrollIndex: this.initialScrollIndex,
         };
     }
-    // Map a native event / imperative call to an action, run the returned effects, and mark the view
-    // dirty when render state changed (the native callbacks fire outside Angular's own bindings).
+    // Native callbacks fire outside Angular's bindings, so a changed state must mark the view dirty
     dispatch(action) {
         const inputs = this.buildInputs();
         const result = reduceList(this.listState, action, inputs);
-        this.runEffects(result.effects, inputs);
+        this.effects.run(result.effects, inputs);
         if (!result.changed)
             return;
         this.renderVersion += 1;
@@ -371,30 +97,14 @@ export class VirtualizedList {
         countAngular('listMarks');
         this.cdr.markForCheck();
     }
-    // The reducer reports `changed` for EVERY scroll offset - it has to, since the offset feeds
-    // end-reached distance, viewability and the batch-fill timer, all handled by runEffects. The
-    // TEMPLATE reads none of those; it reads the window. Marking on the offset repainted the whole
-    // ancestor chain 60 times a second on a sticky screen for a window that had not moved.
-    //
-    // So the question here is "would a render leave the window exactly where it is", and it is asked
-    // of the state as it is NOW. It must NOT be answered by comparing the last-rendered window with
-    // the one before it: that window was derived from the PREVIOUS scroll offset, so once two
-    // consecutive derives agree the comparison reads "settled" for every offset that ever follows -
-    // no mark, no CD, no ngDoCheck, no refresh-metrics, so the window can never move again and the
-    // list goes permanently deaf mid-scroll (device: examples/angular Benchmark sticky path B froze
-    // at exactly the window the first viewport asked for, blank below it).
-    //
-    // computeWindow re-run over the CACHED offset table answers it directly. Two scans, no
-    // allocation - buildOffsets, the O(count) allocating half, still runs once per render only. It is
-    // the same function the render will use, so this cannot drift away from the window it predicts.
+    // Asks whether a render would leave the window where it is, of the state as it is now
+    // Comparing the last two rendered windows would read settled forever and the list goes deaf
     isWindowSettled(action) {
-        // A measurement rewrites the very offset table the prediction reads, so it has no cached
-        // geometry to answer from.
-        if (action.kind === 'measure')
+        // A measurement rewrites the offset table the prediction reads
+        if (action.kind === LIST_ACTION_KIND.measure)
             return false;
         const m = this.listState.metrics;
-        // Mid-fill: the committed window is still climbing toward target one batch step per render, and
-        // only a render advances it. Skipping the mark here is what stalls the incremental fill.
+        // Mid-fill the window climbs one batch step per render, only a render advances it
         if (m.first !== m.target.first || m.last !== m.target.last)
             return false;
         const next = computeWindow(m.count, m.offsets, m.lengths, this.listState.scrollOffset, this.listState.viewportLength, this.windowSizeValue, this.initialNumToRenderValue);
@@ -404,80 +114,7 @@ export class VirtualizedList {
                 `[${next.first}, ${next.last}] at offset ${this.listState.scrollOffset}`);
         return isSettled;
     }
-    runEffects(effects, inputs) {
-        for (const effect of effects) {
-            switch (effect.kind) {
-                case 'scroll-to':
-                    this.scrollToPixel(effect.offset, effect.animated);
-                    break;
-                case 'fire-end-reached':
-                    this.endReached.emit({ distanceFromEnd: effect.distanceFromEnd });
-                    break;
-                case 'fire-start-reached':
-                    this.startReached.emit({
-                        distanceFromStart: effect.distanceFromStart,
-                    });
-                    break;
-                case 'fire-scroll-to-index-failed':
-                    this.scrollToIndexFailed.emit({
-                        index: effect.index,
-                        highestMeasuredFrameIndex: effect.highestMeasuredFrameIndex,
-                        averageItemLength: effect.averageItemLength,
-                    });
-                    break;
-                case 'schedule-refill': {
-                    if (this.batchTimer !== null)
-                        clearTimeout(this.batchTimer);
-                    this.batchTimer = setTimeout(() => {
-                        this.batchTimer = null;
-                        this.dispatch({ kind: 'batch-tick' });
-                    }, effect.delay);
-                    break;
-                }
-                case 'fire-viewable': {
-                    const pairs = inputs.viewabilityPairs;
-                    const info = effect.info;
-                    const map = effect.map;
-                    const fire = () => {
-                        for (const pair of pairs) {
-                            pair.onViewableItemsChanged({
-                                ...info,
-                                viewabilityConfig: pair.viewabilityConfig,
-                            });
-                        }
-                        this.dispatch({ kind: 'viewable-fired', map });
-                    };
-                    if (this.viewableTimer !== null) {
-                        clearTimeout(this.viewableTimer);
-                        this.viewableTimer = null;
-                    }
-                    if (effect.delay > EMPTY_OFFSET) {
-                        this.viewableTimer = setTimeout(() => {
-                            this.viewableTimer = null;
-                            fire();
-                        }, effect.delay);
-                    }
-                    else {
-                        fire();
-                    }
-                    break;
-                }
-            }
-        }
-    }
-    // foldedAccessibility reads plain @Input fields, which are NOT reactive on their own - this bump
-    // is what tells that computed an input changed. It must stay in ngOnChanges: that is the single
-    // moment Angular has finished writing every changed input for this pass, and it runs before
-    // ngDoCheck below, so the recompute already sees the current values.
-    ngOnChanges() {
-        this.inputsRevision.update(revision => revision + 1);
-    }
-    // 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). The dedup guard runs refresh-metrics (which owns
-    // the controlled committedWindow throttle) only when something relevant changed, so the window
-    // grows exactly one step per meaningful 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.
+    // Runs before the bindings are read, a later hook would trip the changed-after-checked guard
     ngDoCheck() {
         countAngular('listChecks');
         const recomputeInputs = [
@@ -493,12 +130,9 @@ export class VirtualizedList {
             this.stickyHeaderIndices,
             this.maintainVisibleContentPosition,
             this.style,
-            // `recomputeView` folds this into the committed style, but it arrives through
-            // addClass/removeClass, never as an @Input - so without it here no entry moves on a class
-            // toggle and the gate skips the recompute forever. Reference-stable, so the dedup holds.
+            // Arrives through `addClass` and `removeClass`, never as an input
             anchorHostStyle(this.elementRef),
             this.contentContainerStyle,
-            // Folds scroll / layout / measure / batch-tick: dispatch bumps renderVersion on any change.
             this.renderVersion,
             this.headerDir !== undefined,
             this.footerDir !== undefined,
@@ -512,9 +146,8 @@ export class VirtualizedList {
             previous.every((value, index) => value === recomputeInputs[index])) {
             return;
         }
-        // The single derive-per-CD: recompute the window off the current state before the view reads it.
         countAngular('listRecomputes');
-        reduceList(this.listState, { kind: 'refresh-metrics' }, this.buildInputs());
+        reduceList(this.listState, { kind: LIST_ACTION_KIND.refreshMetrics }, this.buildInputs());
         this.recomputeView();
     }
     ngAfterViewChecked() {
@@ -523,72 +156,29 @@ export class VirtualizedList {
             return;
         this.lastEffectSignature = signature;
         const inputs = this.buildInputs();
-        const result = reduceList(this.listState, { kind: 'commit' }, inputs);
-        this.runEffects(result.effects, inputs);
+        const result = reduceList(this.listState, { kind: LIST_ACTION_KIND.commit }, inputs);
+        this.effects.run(result.effects, inputs);
     }
     ngOnDestroy() {
-        if (this.viewableTimer !== null)
-            clearTimeout(this.viewableTimer);
-        if (this.batchTimer !== null)
-            clearTimeout(this.batchTimer);
+        this.effects.dispose();
     }
     recomputeView() {
         const m = this.listState.metrics;
         this.itemCount = m.count;
-        const hasHeader = this.headerDir !== undefined;
-        const hasSeparators = this.separatorTemplate !== 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),
-            // VirtualizedList.js: `[inversionStyle, style]` — the app's style can override the flip.
-            this.isInverted
-                ? [this.isHorizontal ? INVERTED_X_STYLE : INVERTED_Y_STYLE, this.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),
-                };
-        // A change in anything a cell's content reads other than its own item invalidates every cached
-        // context: identity reuse is only sound while the reused object still describes the cell.
-        const epoch = [
+        this.applyStyles(m.total);
+        this.cells.beginPass([
             this.data,
             this.extraData,
             this.getItem,
             this.keyExtractor,
-        ];
-        const previousEpoch = this.cellContextEpoch;
-        this.cellContextEpoch = epoch;
-        if (previousEpoch === undefined ||
-            previousEpoch.length !== epoch.length ||
-            !previousEpoch.every((value, index) => value === epoch[index])) {
-            this.cellContexts.clear();
-        }
+        ]);
         if (m.count === FIRST_INDEX) {
-            this.cellContexts.clear();
-            this.nextCellContexts.clear();
-            this.windowCells = [];
-            this.forcedStickyCell = null;
-            this.leadingSpacerStyle = null;
-            this.gapSpacerStyle = null;
-            this.trailingSpacerStyle = null;
-            dlog(`Angular VirtualizedList empty (viewport=${this.listState.viewportLength})`);
+            this.showEmpty();
             return;
         }
+        const stickySet = this.stickyHeaderIndices !== undefined
+            ? new Set(this.stickyHeaderIndices)
+            : undefined;
         const plan = buildListPlan({
             count: m.count,
             first: m.first,
@@ -598,121 +188,67 @@ export class VirtualizedList {
             total: m.total,
             keyFor: this.keyFor,
             stickyIndices: stickySet,
-            hasHeader,
+            hasHeader: this.headerDir !== undefined,
         });
-        this.leadingSpacerStyle =
-            plan.leadingExtent > EMPTY_OFFSET
-                ? this.spacerStyle(plan.leadingExtent)
-                : null;
-        this.gapSpacerStyle =
-            plan.gapExtent > EMPTY_OFFSET ? this.spacerStyle(plan.gapExtent) : null;
-        this.trailingSpacerStyle =
-            plan.trailingExtent > EMPTY_OFFSET
-                ? this.spacerStyle(plan.trailingExtent)
-                : null;
-        // `plan.stickyChildPositions` is deliberately NOT read — it was the input to the index form.
-        dlog(`STICKY[list] stickySet=${stickySet === undefined ? 'undefined' : JSON.stringify([...stickySet])} ` +
-            `childPositions=${JSON.stringify(plan.stickyChildPositions)} ` +
-            `forcedStickyCell=${plan.forcedStickyCell === undefined ? 'none' : plan.forcedStickyCell.index} ` +
-            `window=[${m.first},${m.last}] hasHeader=${this.headerDir !== undefined}`);
-        this.forcedStickyCell =
-            plan.forcedStickyCell !== undefined
-                ? this.buildWindowCell(plan.forcedStickyCell.index, plan.forcedStickyCell.key, false, 
-                // Sticky by construction — `forcedStickyCell` exists only for an index in `stickySet`.
-                true)
-                : null;
-        const cells = [];
-        for (const planned of plan.cells) {
-            // RN gates the separator on the last index of the DATA, not the WINDOW
-            // (VirtualizedList.js:793 `getItemCount(data) - 1`). The separator lives INSIDE the
-            // measuring wrapper, so gating on the window would shift a cell's height as it slides past.
-            const includeSeparator = hasSeparators && planned.index < m.count - 1;
-            cells.push(this.buildWindowCell(planned.index, planned.key, includeSeparator, stickySet?.has(planned.index) === true));
-        }
-        this.windowCells = cells;
-        // Swap, don't prune: a cell that left the window is simply absent from the pass that just ran,
-        // so the old map is the garbage and the new one is exactly the live set.
-        this.cellContexts = this.nextCellContexts;
-        this.nextCellContexts = new Map();
+        this.applySpacers(plan);
+        this.buildCells(plan, stickySet);
         dlog(`Angular VirtualizedList window [${m.first}, ${m.last}] of ${m.count} ` +
-            `(offset=${this.listState.scrollOffset}, viewport=${this.listState.viewportLength}, rendered=${cells.length})`);
-    }
-    // Assembles one cell (window or forced-sticky) — the context, measure closure, and optional
-    // separator context — so both plan.cells and plan.forcedStickyCell build identically.
-    buildWindowCell(index, key, includeSeparator, isSticky) {
-        const item = this.getItem(this.data, index);
-        return {
-            key,
-            index,
-            context: this.contextFor(key, index, item),
-            measure: this.cellMeasure(index),
-            separatorContext: includeSeparator
-                ? this.buildSeparatorContext(index, item)
-                : undefined,
-            isSticky,
-        };
+            `(offset=${this.listState.scrollOffset}, viewport=${this.listState.viewportLength}, rendered=${this.windowCells.length})`);
+    }
+    applyStyles(total) {
+        const styles = resolveListStyles({
+            isHorizontal: this.isHorizontal,
+            isInverted: this.isInverted,
+            total,
+            hasHeader: this.headerDir !== undefined,
+            style: this.style,
+            contentContainerStyle: this.contentContainerStyle,
+            anchorStyle: anchorHostStyle(this.elementRef),
+            maintainVisibleContentPosition: this.maintainVisibleContentPosition,
+        });
+        this.resolvedStyle = styles.style;
+        this.resolvedContentContainerStyle = styles.contentContainerStyle;
+        this.cellStyle = styles.cellStyle;
+        this.resolvedMaintainVisibleContentPosition =
+            styles.maintainVisibleContentPosition;
     }
-    // The context for one cell, reused by identity when the cell did not move. See cellContexts.
-    contextFor(key, index, item) {
-        const cached = this.cellContexts.get(key);
-        if (cached !== undefined &&
-            cached.$implicit === item &&
-            cached.index === index) {
-            this.nextCellContexts.set(key, cached);
-            return cached;
-        }
-        const context = {
-            $implicit: item,
-            index,
-            separators: this.makeSeparators(index),
-        };
-        this.nextCellContexts.set(key, context);
-        return context;
+    showEmpty() {
+        this.cells.clear();
+        this.windowCells = [];
+        this.forcedStickyCell = null;
+        this.leadingSpacerStyle = null;
+        this.gapSpacerStyle = null;
+        this.trailingSpacerStyle = null;
+        dlog(`Angular VirtualizedList empty (viewport=${this.listState.viewportLength})`);
     }
-    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;
+    applySpacers(plan) {
+        this.leadingSpacerStyle = this.spacerStyle(plan.leadingExtent);
+        this.gapSpacerStyle = this.spacerStyle(plan.gapExtent);
+        this.trailingSpacerStyle = this.spacerStyle(plan.trailingExtent);
     }
     spacerStyle(extent) {
+        if (extent <= EMPTY_OFFSET)
+            return null;
         return this.isHorizontal ? { width: extent } : { height: extent };
     }
-    cellMeasure(index) {
-        const existing = this.cellMeasures.get(index);
-        if (existing !== undefined)
-            return existing;
-        const measure = (event) => {
-            const length = readLayoutLength(event, this.isHorizontal);
-            if (length === undefined)
-                return;
-            const offset = readLayoutOffset(event, this.isHorizontal);
-            dlog(`Angular VirtualizedList cell ${index} measured length=${length} offset=${offset ?? 'none'}`);
-            // The reducer guards a fixed getItemLayout and a repeated length; a no-op leaves state and the
-            // view untouched (dispatch marks for check only when something changed).
-            this.dispatch({ kind: 'measure', index, length, offset });
-        };
-        this.cellMeasures.set(index, measure);
-        return measure;
+    buildCells(plan, stickySet) {
+        const count = this.listState.metrics.count;
+        const forced = plan.forcedStickyCell;
+        dlog(`STICKY[list] stickySet=${stickySet === undefined ? 'undefined' : JSON.stringify([...stickySet])} ` +
+            `childPositions=${JSON.stringify(plan.stickyChildPositions)} ` +
+            `forcedStickyCell=${forced === undefined ? 'none' : forced.index}`);
+        // Sticky by construction: a forced cell exists only for an index in `stickySet`
+        this.forcedStickyCell =
+            forced !== undefined
+                ? this.cells.windowCell(forced.index, forced.key, false, true)
+                : null;
+        const hasSeparators = this.separatorTemplate !== undefined;
+        // The separator gates on the last index of the data, not of the window, or a cell's height
+        // would shift as it slides past
+        this.windowCells = plan.cells.map(planned => this.cells.windowCell(planned.index, planned.key, hasSeparators && planned.index < count - 1, stickySet?.has(planned.index) === true));
+        this.cells.endPass();
     }
-    // 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.
+    // Angular forbids an `[onLayout]` binding, so the event arrives untyped and is narrowed here
     handleCellLayout(measure, event) {
         if (this.isSymbioteEvent(event))
             measure(event);
@@ -720,84 +256,6 @@ export class VirtualizedList {
     isSymbioteEvent(value) {
         return (typeof value === 'object' && value !== null && 'nativeEvent' in value);
     }
-    mergeSeparator(gapIndex, patch) {
-        const count = this.listState.metrics.count;
-        if (!isSeparatorGapInRange(gapIndex, count))
-            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) ----
-    // Each scroll resolves to an offset (or a scroll-to-index failure) inside the reducer, then rides
-    // the scroll-to effect through scrollToPixel.
-    scrollToOffset(params) {
-        this.dispatch({
-            kind: 'scroll-to-offset',
-            offset: params.offset,
-            animated: params.animated ?? true,
-        });
-    }
-    scrollToIndex(params) {
-        this.dispatch({
-            kind: 'scroll-to-index',
-            index: params.index,
-            animated: params.animated ?? true,
-            viewPosition: params.viewPosition ?? FIRST_INDEX,
-            viewOffset: params.viewOffset ?? EMPTY_OFFSET,
-        });
-    }
-    scrollToItem(params) {
-        this.dispatch({
-            kind: 'scroll-to-item',
-            item: params.item,
-            animated: params.animated ?? true,
-            viewPosition: params.viewPosition ?? FIRST_INDEX,
-        });
-    }
-    scrollToEnd(params) {
-        this.dispatch({
-            kind: 'scroll-to-end',
-            animated: params?.animated ?? true,
-        });
-    }
-    flashScrollIndicators() {
-        this.scrollHandle.flashScrollIndicators();
-    }
-    getNativeScrollRef() {
-        return this.scrollNode !== null ? this.scrollHandle : null;
-    }
-    getScrollableNode() {
-        return this.scrollNode !== null ? this.scrollHandle : null;
-    }
-    getScrollResponder() {
-        return this.scrollNode !== null ? this.scrollHandle : null;
-    }
-    getScrollNode() {
-        return this.scrollHandle.getScrollNode();
-    }
-    recordInteraction() {
-        this.dispatch({ kind: 'record-interaction' });
-    }
     scrollToPixel(offset, animated) {
         const clamped = Math.max(EMPTY_OFFSET, offset);
         const target = this.isHorizontal
@@ -812,181 +270,8 @@ export class VirtualizedList {
         this.commandedOffset = target;
         this.cdr.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: VirtualizedList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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", removeClippedSubviews: "removeClippedSubviews", nestedScrollEnabled: "nestedScrollEnabled", 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", itemTemplate: "itemTemplate", itemSeparatorTemplate: "itemSeparatorTemplate" }, 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: "scrollHostRef", first: true, predicate: ["scrollHost"], descendants: true, read: ElementRef }], usesOnChanges: true, hostDirectives: [{ directive: i1.SymbioteStyleInputDirective, inputs: ["style", "style"] }], ngImport: i0, template: `
-    @if (isHorizontal) {
-      <horizontal-scroll-view #scrollHost [symbioteHostProps]="scrollViewBag()">
-        @if (shouldRenderRefreshControl) {
-          <refresh-control
-            [symbioteHostProps]="refreshControlBag()"
-          ></refresh-control>
-        }
-
-        @if (headerDir !== undefined) {
-          <view>
-            <ng-container [vListOutlet]="headerDir.templateRef"></ng-container>
-          </view>
-        }
-
-        @if (itemCount === 0) {
-          @if (emptyDir !== undefined) {
-            <view>
-              <ng-container [vListOutlet]="emptyDir.templateRef"></ng-container>
-            </view>
-          }
-        } @else {
-          @if (leadingSpacerStyle !== null) {
-            <view [style]="leadingSpacerStyle"></view>
-          }
-          @if (forcedStickyCell !== null) {
-            <sticky-header
-              (layout)="handleCellLayout(forcedStickyCell.measure, $event)"
-              [style]="cellStyle"
-            >
-              <ng-container
-                [vListOutlet]="cellTemplate"
-                [vListOutletContext]="forcedStickyCell.context"
-              ></ng-container>
-            </sticky-header>
-          }
-          @if (gapSpacerStyle !== null) {
-            <view [style]="gapSpacerStyle"></view>
-          }
-          @for (cell of windowCells; track cell.key) {
-            @if (cell.isSticky) {
-              <sticky-header
-                (layout)="handleCellLayout(cell.measure, $event)"
-                [style]="cellStyle"
-              >
-                <ng-container
-                  [vListOutlet]="cellTemplate"
-                  [vListOutletContext]="cell.context"
-                ></ng-container>
-                @if (cell.separatorContext !== undefined) {
-                  <ng-container
-                    [vListOutlet]="separatorTemplate"
-                    [vListOutletContext]="cell.separatorContext"
-                  ></ng-container>
-                }
-              </sticky-header>
-            } @else {
-              <view
-                (layout)="handleCellLayout(cell.measure, $event)"
-                [style]="cellStyle"
-              >
-                <ng-container
-                  [vListOutlet]="cellTemplate"
-                  [vListOutletContext]="cell.context"
-                ></ng-container>
-                @if (cell.separatorContext !== undefined) {
-                  <ng-container
-                    [vListOutlet]="separatorTemplate"
-                    [vListOutletContext]="cell.separatorContext"
-                  ></ng-container>
-                }
-              </view>
-            }
-          }
-          @if (trailingSpacerStyle !== null) {
-            <view [style]="trailingSpacerStyle"></view>
-          }
-        }
-
-        @if (footerDir !== undefined) {
-          <view>
-            <ng-container [vListOutlet]="footerDir.templateRef"></ng-container>
-          </view>
-        }
-      </horizontal-scroll-view>
-    } @else {
-      <scroll-view #scrollHost [symbioteHostProps]="scrollViewBag()">
-        @if (shouldRenderRefreshControl) {
-          <refresh-control
-            [symbioteHostProps]="refreshControlBag()"
-          ></refresh-control>
-        }
-
-        @if (headerDir !== undefined) {
-          <view>
-            <ng-container [vListOutlet]="headerDir.templateRef"></ng-container>
-          </view>
-        }
-
-        @if (itemCount === 0) {
-          @if (emptyDir !== undefined) {
-            <view>
-              <ng-container [vListOutlet]="emptyDir.templateRef"></ng-container>
-            </view>
-          }
-        } @else {
-          @if (leadingSpacerStyle !== null) {
-            <view [style]="leadingSpacerStyle"></view>
-          }
-          @if (forcedStickyCell !== null) {
-            <sticky-header
-              (layout)="handleCellLayout(forcedStickyCell.measure, $event)"
-              [style]="cellStyle"
-            >
-              <ng-container
-                [vListOutlet]="cellTemplate"
-                [vListOutletContext]="forcedStickyCell.context"
-              ></ng-container>
-            </sticky-header>
-          }
-          @if (gapSpacerStyle !== null) {
-            <view [style]="gapSpacerStyle"></view>
-          }
-          <!-- Separator sits INSIDE the measuring view, matching RN's cell renderer
-               (VirtualizedListCellRenderer.js:218-221) — as a sibling it'd add an extra flex gap.
-               See list-geometry-feedback-loop.md. -->
-          @for (cell of windowCells; track cell.key) {
-            @if (cell.isSticky) {
-              <sticky-header
-                (layout)="handleCellLayout(cell.measure, $event)"
-                [style]="cellStyle"
-              >
-                <ng-container
-                  [vListOutlet]="cellTemplate"
-                  [vListOutletContext]="cell.context"
-                ></ng-container>
-                @if (cell.separatorContext !== undefined) {
-                  <ng-container
-                    [vListOutlet]="separatorTemplate"
-                    [vListOutletContext]="cell.separatorContext"
-                  ></ng-container>
-                }
-              </sticky-header>
-            } @else {
-              <view
-                (layout)="handleCellLayout(cell.measure, $event)"
-                [style]="cellStyle"
-              >
-                <ng-container
-                  [vListOutlet]="cellTemplate"
-                  [vListOutletContext]="cell.context"
-                ></ng-container>
-                @if (cell.separatorContext !== undefined) {
-                  <ng-container
-                    [vListOutlet]="separatorTemplate"
-                    [vListOutletContext]="cell.separatorContext"
-                  ></ng-container>
-                }
-              </view>
-            }
-          }
-          @if (trailingSpacerStyle !== null) {
-            <view [style]="trailingSpacerStyle"></view>
-          }
-        }
-
-        @if (footerDir !== undefined) {
-          <view>
-            <ng-container [vListOutlet]="footerDir.templateRef"></ng-container>
-          </view>
-        }
-      </scroll-view>
-    }
-  `, isInline: true, dependencies: [{ kind: "directive", type: SymbioteHostPropsDirective, selector: "[symbioteHostProps]", inputs: ["symbioteHostProps"], exportAs: ["symbioteHost"] }, { kind: "directive", type: VListOutletDirective, selector: "[vListOutlet]", inputs: ["vListOutlet", "vListOutletContext"] }, { kind: "component", type: ViewHost, selector: "view" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: VirtualizedList, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: VirtualizedList, isStandalone: true, selector: "VirtualizedList", viewQueries: [{ propertyName: "scrollHostRef", first: true, predicate: ["scrollHost"], descendants: true, read: ElementRef }], usesInheritance: true, hostDirectives: [{ directive: i1.SymbioteStyleInputDirective, inputs: ["style", "style"] }], ngImport: i0, template: "\n    @if (isHorizontal) {\n      <horizontal-scroll-view #scrollHost [symbioteHostProps]=\"scrollViewBag()\">\n        @if (shouldRenderRefreshControl) {\n          <refresh-control\n            [symbioteHostProps]=\"refreshControlBag()\"\n          ></refresh-control>\n        }\n\n        @if (headerDir !== undefined) {\n          <view>\n            <ng-container [vListOutlet]=\"headerDir.templateRef\"></ng-container>\n          </view>\n        }\n\n        @if (itemCount === 0) {\n          @if (emptyDir !== undefined) {\n            <view>\n              <ng-container [vListOutlet]=\"emptyDir.templateRef\"></ng-container>\n            </view>\n          }\n        } @else {\n          @if (leadingSpacerStyle !== null) {\n            <view [style]=\"leadingSpacerStyle\"></view>\n          }\n          @if (forcedStickyCell !== null) {\n            <sticky-header\n              (layout)=\"handleCellLayout(forcedStickyCell.measure, $event)\"\n              [style]=\"cellStyle\"\n            >\n              <ng-container\n                [vListOutlet]=\"cellTemplate\"\n                [vListOutletContext]=\"forcedStickyCell.context\"\n              ></ng-container>\n            </sticky-header>\n          }\n          @if (gapSpacerStyle !== null) {\n            <view [style]=\"gapSpacerStyle\"></view>\n          }\n          @for (cell of windowCells; track cell.key) {\n            @if (cell.isSticky) {\n              <sticky-header\n                (layout)=\"handleCellLayout(cell.measure, $event)\"\n                [style]=\"cellStyle\"\n              >\n                <ng-container\n                  [vListOutlet]=\"cellTemplate\"\n                  [vListOutletContext]=\"cell.context\"\n                ></ng-container>\n                @if (cell.separatorContext !== undefined) {\n                  <ng-container\n                    [vListOutlet]=\"separatorTemplate\"\n                    [vListOutletContext]=\"cell.separatorContext\"\n                  ></ng-container>\n                }\n              </sticky-header>\n            } @else {\n              <view\n                (layout)=\"handleCellLayout(cell.measure, $event)\"\n                [style]=\"cellStyle\"\n              >\n                <ng-container\n                  [vListOutlet]=\"cellTemplate\"\n                  [vListOutletContext]=\"cell.context\"\n                ></ng-container>\n                @if (cell.separatorContext !== undefined) {\n                  <ng-container\n                    [vListOutlet]=\"separatorTemplate\"\n                    [vListOutletContext]=\"cell.separatorContext\"\n                  ></ng-container>\n                }\n              </view>\n            }\n          }\n          @if (trailingSpacerStyle !== null) {\n            <view [style]=\"trailingSpacerStyle\"></view>\n          }\n        }\n\n        @if (footerDir !== undefined) {\n          <view>\n            <ng-container [vListOutlet]=\"footerDir.templateRef\"></ng-container>\n          </view>\n        }\n      </horizontal-scroll-view>\n    } @else {\n      <scroll-view #scrollHost [symbioteHostProps]=\"scrollViewBag()\">\n        @if (shouldRenderRefreshControl) {\n          <refresh-control\n            [symbioteHostProps]=\"refreshControlBag()\"\n          ></refresh-control>\n        }\n\n        @if (headerDir !== undefined) {\n          <view>\n            <ng-container [vListOutlet]=\"headerDir.templateRef\"></ng-container>\n          </view>\n        }\n\n        @if (itemCount === 0) {\n          @if (emptyDir !== undefined) {\n            <view>\n              <ng-container [vListOutlet]=\"emptyDir.templateRef\"></ng-container>\n            </view>\n          }\n        } @else {\n          @if (leadingSpacerStyle !== null) {\n            <view [style]=\"leadingSpacerStyle\"></view>\n          }\n          @if (forcedStickyCell !== null) {\n            <sticky-header\n              (layout)=\"handleCellLayout(forcedStickyCell.measure, $event)\"\n              [style]=\"cellStyle\"\n            >\n              <ng-container\n                [vListOutlet]=\"cellTemplate\"\n                [vListOutletContext]=\"forcedStickyCell.context\"\n              ></ng-container>\n            </sticky-header>\n          }\n          @if (gapSpacerStyle !== null) {\n            <view [style]=\"gapSpacerStyle\"></view>\n          }\n          <!-- The separator sits INSIDE the measuring view, matching RN's cell renderer, as a\n               sibling it would add an extra flex gap -->\n          @for (cell of windowCells; track cell.key) {\n            @if (cell.isSticky) {\n              <sticky-header\n                (layout)=\"handleCellLayout(cell.measure, $event)\"\n                [style]=\"cellStyle\"\n              >\n                <ng-container\n                  [vListOutlet]=\"cellTemplate\"\n                  [vListOutletContext]=\"cell.context\"\n                ></ng-container>\n                @if (cell.separatorContext !== undefined) {\n                  <ng-container\n                    [vListOutlet]=\"separatorTemplate\"\n                    [vListOutletContext]=\"cell.separatorContext\"\n                  ></ng-container>\n                }\n              </sticky-header>\n            } @else {\n              <view\n                (layout)=\"handleCellLayout(cell.measure, $event)\"\n                [style]=\"cellStyle\"\n              >\n                <ng-container\n                  [vListOutlet]=\"cellTemplate\"\n                  [vListOutletContext]=\"cell.context\"\n                ></ng-container>\n                @if (cell.separatorContext !== undefined) {\n                  <ng-container\n                    [vListOutlet]=\"separatorTemplate\"\n                    [vListOutletContext]=\"cell.separatorContext\"\n                  ></ng-container>\n                }\n              </view>\n            }\n          }\n          @if (trailingSpacerStyle !== null) {\n            <view [style]=\"trailingSpacerStyle\"></view>\n          }\n        }\n\n        @if (footerDir !== undefined) {\n          <view>\n            <ng-container [vListOutlet]=\"footerDir.templateRef\"></ng-container>\n          </view>\n        }\n      </scroll-view>\n    }\n  ", isInline: true, dependencies: [{ kind: "directive", type: SymbioteHostPropsDirective, selector: "[symbioteHostProps]", inputs: ["symbioteHostProps"], exportAs: ["symbioteHost"] }, { kind: "directive", type: VListOutletDirective, selector: "[vListOutlet]", inputs: ["vListOutlet", "vListOutletContext"] }, { kind: "component", type: ViewHost, selector: "view" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: VirtualizedList, decorators: [{
             type: Component,
@@ -999,360 +284,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     imports: [SymbioteHostPropsDirective, VListOutletDirective, ViewHost],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-    @if (isHorizontal) {
-      <horizontal-scroll-view #scrollHost [symbioteHostProps]="scrollViewBag()">
-        @if (shouldRenderRefreshControl) {
-          <refresh-control
-            [symbioteHostProps]="refreshControlBag()"
-          ></refresh-control>
-        }
-
-        @if (headerDir !== undefined) {
-          <view>
-            <ng-container [vListOutlet]="headerDir.templateRef"></ng-container>
-          </view>
-        }
-
-        @if (itemCount === 0) {
-          @if (emptyDir !== undefined) {
-            <view>
-              <ng-container [vListOutlet]="emptyDir.templateRef"></ng-container>
-            </view>
-          }
-        } @else {
-          @if (leadingSpacerStyle !== null) {
-            <view [style]="leadingSpacerStyle"></view>
-          }
-          @if (forcedStickyCell !== null) {
-            <sticky-header
-              (layout)="handleCellLayout(forcedStickyCell.measure, $event)"
-              [style]="cellStyle"
-            >
-              <ng-container
-                [vListOutlet]="cellTemplate"
-                [vListOutletContext]="forcedStickyCell.context"
-              ></ng-container>
-            </sticky-header>
-          }
-          @if (gapSpacerStyle !== null) {
-            <view [style]="gapSpacerStyle"></view>
-          }
-          @for (cell of windowCells; track cell.key) {
-            @if (cell.isSticky) {
-              <sticky-header
-                (layout)="handleCellLayout(cell.measure, $event)"
-                [style]="cellStyle"
-              >
-                <ng-container
-                  [vListOutlet]="cellTemplate"
-                  [vListOutletContext]="cell.context"
-                ></ng-container>
-                @if (cell.separatorContext !== undefined) {
-                  <ng-container
-                    [vListOutlet]="separatorTemplate"
-                    [vListOutletContext]="cell.separatorContext"
-                  ></ng-container>
-                }
-              </sticky-header>
-            } @else {
-              <view
-                (layout)="handleCellLayout(cell.measure, $event)"
-                [style]="cellStyle"
-              >
-                <ng-container
-                  [vListOutlet]="cellTemplate"
-                  [vListOutletContext]="cell.context"
-                ></ng-container>
-                @if (cell.separatorContext !== undefined) {
-                  <ng-container
-                    [vListOutlet]="separatorTemplate"
-                    [vListOutletContext]="cell.separatorContext"
-                  ></ng-container>
-                }
-              </view>
-            }
-          }
-          @if (trailingSpacerStyle !== null) {
-            <view [style]="trailingSpacerStyle"></view>
-          }
-        }
-
-        @if (footerDir !== undefined) {
-          <view>
-            <ng-container [vListOutlet]="footerDir.templateRef"></ng-container>
-          </view>
-        }
-      </horizontal-scroll-view>
-    } @else {
-      <scroll-view #scrollHost [symbioteHostProps]="scrollViewBag()">
-        @if (shouldRenderRefreshControl) {
-          <refresh-control
-            [symbioteHostProps]="refreshControlBag()"
-          ></refresh-control>
-        }
-
-        @if (headerDir !== undefined) {
-          <view>
-            <ng-container [vListOutlet]="headerDir.templateRef"></ng-container>
-          </view>
-        }
-
-        @if (itemCount === 0) {
-          @if (emptyDir !== undefined) {
-            <view>
-              <ng-container [vListOutlet]="emptyDir.templateRef"></ng-container>
-            </view>
-          }
-        } @else {
-          @if (leadingSpacerStyle !== null) {
-            <view [style]="leadingSpacerStyle"></view>
-          }
-          @if (forcedStickyCell !== null) {
-            <sticky-header
-              (layout)="handleCellLayout(forcedStickyCell.measure, $event)"
-              [style]="cellStyle"
-            >
-              <ng-container
-                [vListOutlet]="cellTemplate"
-                [vListOutletContext]="forcedStickyCell.context"
-              ></ng-container>
-            </sticky-header>
-          }
-          @if (gapSpacerStyle !== null) {
-            <view [style]="gapSpacerStyle"></view>
-          }
-          <!-- Separator sits INSIDE the measuring view, matching RN's cell renderer
-               (VirtualizedListCellRenderer.js:218-221) — as a sibling it'd add an extra flex gap.
-               See list-geometry-feedback-loop.md. -->
-          @for (cell of windowCells; track cell.key) {
-            @if (cell.isSticky) {
-              <sticky-header
-                (layout)="handleCellLayout(cell.measure, $event)"
-                [style]="cellStyle"
-              >
-                <ng-container
-                  [vListOutlet]="cellTemplate"
-                  [vListOutletContext]="cell.context"
-                ></ng-container>
-                @if (cell.separatorContext !== undefined) {
-                  <ng-container
-                    [vListOutlet]="separatorTemplate"
-                    [vListOutletContext]="cell.separatorContext"
-                  ></ng-container>
-                }
-              </sticky-header>
-            } @else {
-              <view
-                (layout)="handleCellLayout(cell.measure, $event)"
-                [style]="cellStyle"
-              >
-                <ng-container
-                  [vListOutlet]="cellTemplate"
-                  [vListOutletContext]="cell.context"
-                ></ng-container>
-                @if (cell.separatorContext !== undefined) {
-                  <ng-container
-                    [vListOutlet]="separatorTemplate"
-                    [vListOutletContext]="cell.separatorContext"
-                  ></ng-container>
-                }
-              </view>
-            }
-          }
-          @if (trailingSpacerStyle !== null) {
-            <view [style]="trailingSpacerStyle"></view>
-          }
-        }
-
-        @if (footerDir !== undefined) {
-          <view>
-            <ng-container [vListOutlet]="footerDir.templateRef"></ng-container>
-          </view>
-        }
-      </scroll-view>
-    }
-  `,
+                    template: VIRTUALIZED_LIST_TEMPLATE,
                 }]
-        }], 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
-            }], removeClippedSubviews: [{
-                type: Input
-            }], nestedScrollEnabled: [{
-                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]
-            }], itemTemplate: [{
-                type: Input
-            }], itemSeparatorTemplate: [{
-                type: Input
-            }], scrollHostRef: [{
+        }], propDecorators: { scrollHostRef: [{
                 type: ViewChild,
                 args: ['scrollHost', { read: ElementRef }]
             }] } });