@symbiote-native/angular 3.1.2 → 3.2.0

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

@@ -1,42 +1,15 @@
-// FlatList, the Angular convenience surface over VirtualizedList. It takes a plain `data` array
-// and derives getItem/getItemCount; numColumns packs items into rows (each row a flex-row of N
-// columns), so the virtualized stream is rows, not items (RN's FlatList). Windowing / viewability /
-// batching / imperative scrolling are inherited from VirtualizedList; the data shaping
-// (chunkIntoRows / rowKeyExtractor / expandRowViewability / row-separator unwrap) is shared
-// verbatim from @symbiote-native/components, same as React/Vue's FlatLists.
-//
-// TEMPLATE FORWARDING — both column paths RE-STAMP; neither uses a bare `<ng-content>` passthrough.
-// Angular's @ContentChild does NOT resolve a directive across a SECOND `<ng-content>` re-projection
-// hop (only what's projected directly onto the querying component's own tag) — a bare
-// `<VirtualizedList ...><ng-content></ng-content></VirtualizedList>` left VirtualizedList's own
-// itemDir/headerDir/etc. undefined, rendering every cell empty (confirmed device bug, see
-// flat-list.test.ts). Fixed for both column modes:
-//   * Single column (numColumns <= 1): FlatList captures the app's `<ng-template vListItem>` (and
-//     vListHeader/vListFooter/vListEmpty/vListSeparator) with its OWN @ContentChild — a single,
-//     direct projection hop, which always resolves. The per-cell item and separator templates go
-//     straight in through VirtualizedList's `[itemTemplate]`/`[itemSeparatorTemplate]`, so a cell
-//     is ONE outlet deep (a re-stamp doubled every cell's embedded views); the once-per-list
-//     header/footer/empty slots are still re-stamped.
-//   * Multi column (numColumns > 1): same re-stamp, but the app's vListItem is typed for ItemT
-//     while the virtualized stream is rows (IRow<ItemT>), so a plain passthrough couldn't work
-//     regardless. The row vListItem lays out the N columns side by side (each cell stamps the
-//     app's item template via VListOutletDirective with context {item, index: row.startIndex +
-//     column, separators}), the row vListSeparator unwraps the flanking rows to their last/first
-//     item, and onViewableItemsChanged is wrapped with expandRowViewability so the caller still
-//     sees per-item visibility — mirrors how Vue's FlatList intercepts renderItem with renderRow.
-//
-// The imperative handle (scrollToIndex / scrollToOffset / scrollToEnd / scrollToItem /
-// recordInteraction / flashScrollIndicators / getScroll* / getNativeScrollRef) is RN's FlatList
-// surface, delegated straight to the inner VirtualizedList (@ViewChild). The element-returning
-// props (renderItem / ItemSeparatorComponent / List{Header,Footer,Empty}Component) are templates
-// in Angular, so they're absent from IFlatListProps per the per-adapter children/render split;
-// everything else mirrors IVirtualizedListProps.
-import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, ContentChild, ElementRef, EventEmitter, Input, Output, ViewChild, inject, } from '@angular/core';
+// FlatList, the convenience surface over VirtualizedList: a plain `data` array, and `numColumns`
+// packing items into rows so the virtualized stream is rows, not items. The row shaping is shared
+// with the React and Vue FlatLists, windowing and the scroll handle come from VirtualizedList
+import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild, inject, } from '@angular/core';
 import { SINGLE_COLUMN, chunkIntoRows, expandRowViewability, firstItemOfRow, lastItemOfRow, removeClippedSubviewsOrDefault, rowKeyExtractor, } from '@symbiote-native/components';
 import { Platform, dlog, flattenStyle, resolveClassName, } from '@symbiote-native/engine';
 import { VirtualizedList, VListEmptyDirective, VListFooterDirective, VListHeaderDirective, VListItemDirective, VListSeparatorDirective, } from '../virtualized-list';
 import { VListOutletDirective } from '../virtualized-list/directives';
+import { ListInputsBase } from '../virtualized-list/list-inputs';
+import { provideGateDemand } from '../../gate-demand';
 import { stableAnchorStyle, SymbioteStyleInputDirective, ViewHost, } from '../../primitives';
+import { FLAT_LIST_TEMPLATE } from './flat-list-template';
 import * as i0 from "@angular/core";
 import * as i1 from "../../primitives/shared";
 function isRecord(value) {
@@ -52,52 +25,35 @@ function isSeparators(value) {
         typeof value['highlight'] === 'function' &&
         typeof value['unhighlight'] === 'function');
 }
-// Used only as a type-safe fallback if a row's separators handle is ever absent; VirtualizedList
-// always supplies a real one, so in practice the live handle flows through.
+// A fallback for a row whose separators handle is absent, `VirtualizedList` always supplies one
 const NOOP_SEPARATORS = {
     highlight: () => undefined,
     unhighlight: () => undefined,
     updateProps: () => undefined,
 };
 export { VListEmptyDirective, VListFooterDirective, VListHeaderDirective, VListItemDirective, VListSeparatorDirective, } from '../virtualized-list';
-export class FlatList {
+export class FlatList extends ListInputsBase {
     constructor() {
-        // The list's edge/viewability/failure events as real Angular events: `(endReached)="…"`, not
-        // `[onEndReached]="…"` — re-emitted straight from the inner VirtualizedList's own @Output()s (see
-        // the template's `(endReached)="endReached.emit($event)"` style forwarding above).
-        this.endReached = new EventEmitter();
-        this.startReached = new EventEmitter();
-        this.refresh = new EventEmitter();
-        this.viewableItemsChanged = new EventEmitter();
-        this.scrollToIndexFailed = new EventEmitter();
-        // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
-        // onto (see anchorHostStyle's doc comment) — NOT `listRef` above, which targets the real inner
-        // `<VirtualizedList>` one level down (itself its own separate anchor host).
+        super(...arguments);
+        // This component's own host, the anchor `class="..."` resolves onto, not the inner list's
         this.elementRef = inject(ElementRef);
-        // --- derived view state (recomputed in ngOnChanges, stable identity across CD) ---
         this.rows = [];
-        // Angular's [style]="…" binding compiles to the built-in ɵɵstyleMap instruction (NOT a
-        // regular @Input() property write), which only understands a flat object — an array (RN's
-        // own `style={[a, b]}` composition idiom) crashes deep inside Angular's styling engine. So
-        // every style value this component stamps onto a template `[style]=` binding is flattened
-        // via the engine's own flattenStyle first, here at the source rather than at each call site.
+        // `[style]` compiles to an instruction that takes a flat object only, so styles are flattened
         this.rowStyle = flattenStyle([{ flexDirection: 'row' }]);
         this.columnCellStyle = { flex: 1 };
         this.resolvedStyle = undefined;
-        // ---- single-column data adaptation (plain array -> getItem/getItemCount) ----
         this.getFlatItem = (_data, index) => this.data[index];
         this.getFlatCount = (_data) => this.data.length;
-        // ---- multi-column data adaptation (the virtualized stream is rows) ----
+        // With several columns the virtualized stream is rows
         this.getRow = (_data, index) => this.rows[index];
         this.getRowCount = (_data) => this.rows.length;
         this.rowKey = (row, _index) => rowKeyExtractor(row, this.keyExtractor);
-        // Viewability over rows expands back to per-item tokens, so the caller sees item-level
-        // visibility, not row-level (shared expandRowViewability), matching Vue.
+        // Row viewability expands back to per-item tokens, so the caller sees items, not rows
         this.rowViewableItemsChanged = (info) => {
             this.viewableItemsChanged.emit(expandRowViewability(info, this.keyExtractor));
         };
     }
-    // FlatList.js always sends it, defaulted per platform.
+    // The list always gets a value here, defaulted per platform
     get resolvedRemoveClippedSubviews() {
         return removeClippedSubviewsOrDefault(this.removeClippedSubviews, Platform.OS);
     }
@@ -107,18 +63,14 @@ export class FlatList {
     get isMultiColumn() {
         return this.columns > SINGLE_COLUMN;
     }
-    // ngDoCheck, NOT ngOnChanges: a bare `class=` never becomes an @Input, so ngOnChanges does not
-    // RUN for it and the merge froze at its creation value (a stranded tile on the ReactiveStyle
-    // canary). stableAnchorStyle, not a bare flattenStyle, keeps `resolvedStyle`'s reference stable
-    // across ticks that changed nothing - a fresh object every tick defeats VirtualizedList's own
-    // dedup gate and free-runs CD (see stableAnchorStyle's doc comment).
+    // `ngDoCheck`, not `ngOnChanges`: a bare `class=` never becomes an input and would freeze the
+    // merge. `stableAnchorStyle` keeps the reference steady so the inner list's dedup gate holds
     ngDoCheck() {
         this.resolvedStyle = stableAnchorStyle(this.elementRef, this.style, this.resolvedStyle);
     }
     ngOnChanges(changes) {
         if (changes['columnWrapperStyle'] !== undefined) {
-            // A class-name string resolves through the shared registry before flattenStyle, which
-            // only understands style objects/arrays.
+            // A class-name string resolves through the shared registry before `flattenStyle`
             const resolvedColumnWrapperStyle = typeof this.columnWrapperStyle === 'string'
                 ? resolveClassName(this.columnWrapperStyle)
                 : this.columnWrapperStyle;
@@ -146,10 +98,8 @@ export class FlatList {
             },
         }));
     }
-    // Lay out one row's N columns: every item shares the row's separators handle (the divider sits
-    // between rows, not columns) and carries its absolute index (row.startIndex + column), like RN's
-    // multi-column FlatList. Args arrive `unknown` from the template's `let` bindings (Angular cannot
-    // type a generic structural directive's context), narrowed here — no `as`.
+    // Every item shares the row's separators handle and carries its absolute index. The arguments
+    // arrive `unknown` from the template's `let` bindings and are narrowed here
     rowCells(row, separators) {
         if (!isRow(row))
             return [];
@@ -162,9 +112,7 @@ export class FlatList {
             return { key, context: { $implicit: item, index, separators: handle } };
         });
     }
-    // The divider between rows shows real items (last of the row above, first of the row below), so the
-    // app's separator template, typed on ItemT, sees items rather than the IRow wrapper. Args arrive
-    // `unknown` from the template's `let` bindings, narrowed here.
+    // The divider between rows shows real items, so the app's separator template sees items
     rowSeparatorContext(highlighted, leadingRow, trailingRow) {
         const isHighlighted = highlighted === true;
         return {
@@ -178,7 +126,6 @@ export class FlatList {
                 : undefined,
         };
     }
-    // ---- imperative handle (RN FlatList surface) — delegates to the inner VirtualizedList ----
     scrollToOffset(params) {
         this.listRef?.scrollToOffset(params);
     }
@@ -209,163 +156,15 @@ export class FlatList {
     recordInteraction() {
         this.listRef?.recordInteraction();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FlatList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FlatList, isStandalone: true, selector: "FlatList", inputs: { data: "data", testID: "testID", numColumns: "numColumns", columnWrapperStyle: "columnWrapperStyle", keyExtractor: "keyExtractor", getItemLayout: "getItemLayout", horizontal: "horizontal", inverted: "inverted", extraData: "extraData", onEndReachedThreshold: "onEndReachedThreshold", onStartReachedThreshold: "onStartReachedThreshold", refreshing: "refreshing", progressViewOffset: "progressViewOffset", 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" }, outputs: { endReached: "endReached", startReached: "startReached", refresh: "refresh", viewableItemsChanged: "viewableItemsChanged", scrollToIndexFailed: "scrollToIndexFailed" }, 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: "listRef", first: true, predicate: VirtualizedList, descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: i1.SymbioteStyleInputDirective, inputs: ["style", "style"] }], ngImport: i0, template: `
-    @if (isMultiColumn) {
-      <VirtualizedList
-        [data]="rows"
-        [getItem]="getRow"
-        [getItemCount]="getRowCount"
-        [keyExtractor]="rowKey"
-        [getItemLayout]="getItemLayout"
-        [horizontal]="horizontal"
-        [inverted]="inverted"
-        [extraData]="extraData"
-        (endReached)="endReached.emit($event)"
-        [onEndReachedThreshold]="onEndReachedThreshold"
-        (startReached)="startReached.emit($event)"
-        [onStartReachedThreshold]="onStartReachedThreshold"
-        (refresh)="refresh.emit()"
-        [refreshRequested]="refresh.observed"
-        [refreshing]="refreshing"
-        [progressViewOffset]="progressViewOffset"
-        (viewableItemsChanged)="rowViewableItemsChanged($event)"
-        [viewabilityConfig]="viewabilityConfig"
-        [viewabilityConfigCallbackPairs]="rowViewabilityPairs"
-        (scrollToIndexFailed)="scrollToIndexFailed.emit($event)"
-        [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]="resolvedRemoveClippedSubviews"
-        [nestedScrollEnabled]="nestedScrollEnabled"
-        [testID]="testID"
-        [style]="resolvedStyle"
-        [contentContainerStyle]="contentContainerStyle"
-      >
-        <ng-template vListItem let-row let-separators="separators">
-          <view [style]="rowStyle">
-            @for (cell of rowCells(row, separators); track cell.key) {
-              <view [style]="columnCellStyle">
-                <ng-container
-                  [vListOutlet]="itemDir?.templateRef"
-                  [vListOutletContext]="cell.context"
-                ></ng-container>
-              </view>
-            }
-          </view>
-        </ng-template>
-        @if (headerDir !== undefined) {
-          <ng-template vListHeader>
-            <ng-container [vListOutlet]="headerDir.templateRef"></ng-container>
-          </ng-template>
-        }
-        @if (footerDir !== undefined) {
-          <ng-template vListFooter>
-            <ng-container [vListOutlet]="footerDir.templateRef"></ng-container>
-          </ng-template>
-        }
-        @if (emptyDir !== undefined) {
-          <ng-template vListEmpty>
-            <ng-container [vListOutlet]="emptyDir.templateRef"></ng-container>
-          </ng-template>
-        }
-        @if (separatorDir !== undefined) {
-          <ng-template
-            vListSeparator
-            let-highlighted="highlighted"
-            let-leadingItem="leadingItem"
-            let-trailingItem="trailingItem"
-          >
-            <ng-container
-              [vListOutlet]="separatorDir.templateRef"
-              [vListOutletContext]="
-                rowSeparatorContext(highlighted, leadingItem, trailingItem)
-              "
-            ></ng-container>
-          </ng-template>
-        }
-      </VirtualizedList>
-    } @else {
-      <VirtualizedList
-        [data]="data"
-        [getItem]="getFlatItem"
-        [getItemCount]="getFlatCount"
-        [keyExtractor]="keyExtractor"
-        [getItemLayout]="getItemLayout"
-        [horizontal]="horizontal"
-        [inverted]="inverted"
-        [extraData]="extraData"
-        (endReached)="endReached.emit($event)"
-        [onEndReachedThreshold]="onEndReachedThreshold"
-        (startReached)="startReached.emit($event)"
-        [onStartReachedThreshold]="onStartReachedThreshold"
-        (refresh)="refresh.emit()"
-        [refreshRequested]="refresh.observed"
-        [refreshing]="refreshing"
-        [progressViewOffset]="progressViewOffset"
-        (viewableItemsChanged)="viewableItemsChanged.emit($event)"
-        [viewabilityConfig]="viewabilityConfig"
-        [viewabilityConfigCallbackPairs]="viewabilityConfigCallbackPairs"
-        (scrollToIndexFailed)="scrollToIndexFailed.emit($event)"
-        [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]="resolvedRemoveClippedSubviews"
-        [nestedScrollEnabled]="nestedScrollEnabled"
-        [testID]="testID"
-        [style]="resolvedStyle"
-        [contentContainerStyle]="contentContainerStyle"
-        [itemTemplate]="itemDir?.templateRef"
-        [itemSeparatorTemplate]="separatorDir?.templateRef"
-      >
-        @if (headerDir !== undefined) {
-          <ng-template vListHeader>
-            <ng-container [vListOutlet]="headerDir.templateRef"></ng-container>
-          </ng-template>
-        }
-        @if (footerDir !== undefined) {
-          <ng-template vListFooter>
-            <ng-container [vListOutlet]="footerDir.templateRef"></ng-container>
-          </ng-template>
-        }
-        @if (emptyDir !== undefined) {
-          <ng-template vListEmpty>
-            <ng-container [vListOutlet]="emptyDir.templateRef"></ng-container>
-          </ng-template>
-        }
-      </VirtualizedList>
-    }
-  `, isInline: true, dependencies: [{ kind: "component", type: VirtualizedList, selector: "VirtualizedList", inputs: ["data", "getItem", "getItemCount", "keyExtractor", "getItemLayout", "horizontal", "inverted", "extraData", "onEndReachedThreshold", "onStartReachedThreshold", "refreshing", "progressViewOffset", "refreshRequested", "viewabilityConfig", "viewabilityConfigCallbackPairs", "initialNumToRender", "initialScrollIndex", "maxToRenderPerBatch", "updateCellsBatchingPeriod", "windowSize", "stickyHeaderIndices", "maintainVisibleContentPosition", "onScroll", "onScrollBeginDrag", "onScrollEndDrag", "onMomentumScrollBegin", "onMomentumScrollEnd", "scrollEventThrottle", "keyboardShouldPersistTaps", "keyboardDismissMode", "removeClippedSubviews", "nestedScrollEnabled", "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", "itemTemplate", "itemSeparatorTemplate"], outputs: ["endReached", "startReached", "refresh", "viewableItemsChanged", "scrollToIndexFailed", "accessibilityAction", "accessibilityTap", "magicTap", "accessibilityEscape"] }, { kind: "directive", type: VListItemDirective, selector: "[vListItem]" }, { kind: "directive", type: VListHeaderDirective, selector: "[vListHeader]" }, { kind: "directive", type: VListFooterDirective, selector: "[vListFooter]" }, { kind: "directive", type: VListEmptyDirective, selector: "[vListEmpty]" }, { kind: "directive", type: VListSeparatorDirective, selector: "[vListSeparator]" }, { 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: FlatList, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FlatList, isStandalone: true, selector: "FlatList", inputs: { data: "data", numColumns: "numColumns", columnWrapperStyle: "columnWrapperStyle" }, viewQueries: [{ propertyName: "listRef", first: true, predicate: VirtualizedList, descendants: true }], usesInheritance: true, usesOnChanges: true, hostDirectives: [{ directive: i1.SymbioteStyleInputDirective, inputs: ["style", "style"] }], ngImport: i0, template: "\n  @if (isMultiColumn) {\n    <VirtualizedList\n      [data]=\"rows\"\n      [getItem]=\"getRow\"\n      [getItemCount]=\"getRowCount\"\n      [keyExtractor]=\"rowKey\"\n      [getItemLayout]=\"getItemLayout\"\n      [horizontal]=\"horizontal\"\n      [inverted]=\"inverted\"\n      [extraData]=\"extraData\"\n      (endReached)=\"endReached.emit($event)\"\n      [onEndReachedThreshold]=\"onEndReachedThreshold\"\n      (startReached)=\"startReached.emit($event)\"\n      [onStartReachedThreshold]=\"onStartReachedThreshold\"\n      (refresh)=\"refresh.emit()\"\n      [refreshRequested]=\"refresh.observed\"\n      [refreshing]=\"refreshing\"\n      [progressViewOffset]=\"progressViewOffset\"\n      (viewableItemsChanged)=\"rowViewableItemsChanged($event)\"\n      [viewabilityConfig]=\"viewabilityConfig\"\n      [viewabilityConfigCallbackPairs]=\"rowViewabilityPairs\"\n      (scrollToIndexFailed)=\"scrollToIndexFailed.emit($event)\"\n      [initialNumToRender]=\"initialNumToRender\"\n      [initialScrollIndex]=\"initialScrollIndex\"\n      [maxToRenderPerBatch]=\"maxToRenderPerBatch\"\n      [updateCellsBatchingPeriod]=\"updateCellsBatchingPeriod\"\n      [windowSize]=\"windowSize\"\n      [stickyHeaderIndices]=\"stickyHeaderIndices\"\n      [maintainVisibleContentPosition]=\"maintainVisibleContentPosition\"\n      [onScroll]=\"onScroll\"\n      [onScrollBeginDrag]=\"onScrollBeginDrag\"\n      [onScrollEndDrag]=\"onScrollEndDrag\"\n      [onMomentumScrollBegin]=\"onMomentumScrollBegin\"\n      [onMomentumScrollEnd]=\"onMomentumScrollEnd\"\n      [scrollEventThrottle]=\"scrollEventThrottle\"\n      [keyboardShouldPersistTaps]=\"keyboardShouldPersistTaps\"\n      [keyboardDismissMode]=\"keyboardDismissMode\"\n      [removeClippedSubviews]=\"resolvedRemoveClippedSubviews\"\n      [nestedScrollEnabled]=\"nestedScrollEnabled\"\n      [testID]=\"testID\"\n      [nativeID]=\"nativeID\"\n      [style]=\"resolvedStyle\"\n      [contentContainerStyle]=\"contentContainerStyle\"\n      \n  [accessible]=\"accessible\"\n  [accessibilityLabel]=\"accessibilityLabel\"\n  [accessibilityHint]=\"accessibilityHint\"\n  [accessibilityRole]=\"accessibilityRole\"\n  [accessibilityState]=\"accessibilityState\"\n  [accessibilityValue]=\"accessibilityValue\"\n  [accessibilityActions]=\"accessibilityActions\"\n  [accessibilityLabelledBy]=\"accessibilityLabelledBy\"\n  [importantForAccessibility]=\"importantForAccessibility\"\n  [accessibilityLiveRegion]=\"accessibilityLiveRegion\"\n  [screenReaderFocusable]=\"screenReaderFocusable\"\n  [accessibilityViewIsModal]=\"accessibilityViewIsModal\"\n  [accessibilityElementsHidden]=\"accessibilityElementsHidden\"\n  [accessibilityIgnoresInvertColors]=\"accessibilityIgnoresInvertColors\"\n  [accessibilityLanguage]=\"accessibilityLanguage\"\n  [accessibilityRespondsToUserInteraction]=\"accessibilityRespondsToUserInteraction\"\n  [accessibilityShowsLargeContentViewer]=\"accessibilityShowsLargeContentViewer\"\n  [accessibilityLargeContentTitle]=\"accessibilityLargeContentTitle\"\n  (accessibilityAction)=\"accessibilityAction.emit($event)\"\n  (accessibilityTap)=\"accessibilityTap.emit($event)\"\n  (magicTap)=\"magicTap.emit($event)\"\n  (accessibilityEscape)=\"accessibilityEscape.emit($event)\"\n  [role]=\"role\"\n  [aria-label]=\"ariaLabel\"\n  [aria-labelledby]=\"ariaLabelledBy\"\n  [aria-live]=\"ariaLive\"\n  [aria-hidden]=\"ariaHidden\"\n  [aria-busy]=\"ariaBusy\"\n  [aria-checked]=\"ariaChecked\"\n  [aria-disabled]=\"ariaDisabled\"\n  [aria-expanded]=\"ariaExpanded\"\n  [aria-selected]=\"ariaSelected\"\n  [aria-modal]=\"ariaModal\"\n  [aria-valuemax]=\"ariaValueMax\"\n  [aria-valuemin]=\"ariaValueMin\"\n  [aria-valuenow]=\"ariaValueNow\"\n  [aria-valuetext]=\"ariaValueText\"\n\n    >\n      <ng-template vListItem let-row let-separators=\"separators\">\n        <view [style]=\"rowStyle\">\n          @for (cell of rowCells(row, separators); track cell.key) {\n            <view [style]=\"columnCellStyle\">\n              <ng-container\n                [vListOutlet]=\"itemDir?.templateRef\"\n                [vListOutletContext]=\"cell.context\"\n              ></ng-container>\n            </view>\n          }\n        </view>\n      </ng-template>\n      @if (headerDir !== undefined) {\n        <ng-template vListHeader>\n          <ng-container [vListOutlet]=\"headerDir.templateRef\"></ng-container>\n        </ng-template>\n      }\n      @if (footerDir !== undefined) {\n        <ng-template vListFooter>\n          <ng-container [vListOutlet]=\"footerDir.templateRef\"></ng-container>\n        </ng-template>\n      }\n      @if (emptyDir !== undefined) {\n        <ng-template vListEmpty>\n          <ng-container [vListOutlet]=\"emptyDir.templateRef\"></ng-container>\n        </ng-template>\n      }\n      @if (separatorDir !== undefined) {\n        <ng-template\n          vListSeparator\n          let-highlighted=\"highlighted\"\n          let-leadingItem=\"leadingItem\"\n          let-trailingItem=\"trailingItem\"\n        >\n          <ng-container\n            [vListOutlet]=\"separatorDir.templateRef\"\n            [vListOutletContext]=\"\n              rowSeparatorContext(highlighted, leadingItem, trailingItem)\n            \"\n          ></ng-container>\n        </ng-template>\n      }\n    </VirtualizedList>\n  } @else {\n    <VirtualizedList\n      [data]=\"data\"\n      [getItem]=\"getFlatItem\"\n      [getItemCount]=\"getFlatCount\"\n      [keyExtractor]=\"keyExtractor\"\n      [getItemLayout]=\"getItemLayout\"\n      [horizontal]=\"horizontal\"\n      [inverted]=\"inverted\"\n      [extraData]=\"extraData\"\n      (endReached)=\"endReached.emit($event)\"\n      [onEndReachedThreshold]=\"onEndReachedThreshold\"\n      (startReached)=\"startReached.emit($event)\"\n      [onStartReachedThreshold]=\"onStartReachedThreshold\"\n      (refresh)=\"refresh.emit()\"\n      [refreshRequested]=\"refresh.observed\"\n      [refreshing]=\"refreshing\"\n      [progressViewOffset]=\"progressViewOffset\"\n      (viewableItemsChanged)=\"viewableItemsChanged.emit($event)\"\n      [viewabilityConfig]=\"viewabilityConfig\"\n      [viewabilityConfigCallbackPairs]=\"viewabilityConfigCallbackPairs\"\n      (scrollToIndexFailed)=\"scrollToIndexFailed.emit($event)\"\n      [initialNumToRender]=\"initialNumToRender\"\n      [initialScrollIndex]=\"initialScrollIndex\"\n      [maxToRenderPerBatch]=\"maxToRenderPerBatch\"\n      [updateCellsBatchingPeriod]=\"updateCellsBatchingPeriod\"\n      [windowSize]=\"windowSize\"\n      [stickyHeaderIndices]=\"stickyHeaderIndices\"\n      [maintainVisibleContentPosition]=\"maintainVisibleContentPosition\"\n      [onScroll]=\"onScroll\"\n      [onScrollBeginDrag]=\"onScrollBeginDrag\"\n      [onScrollEndDrag]=\"onScrollEndDrag\"\n      [onMomentumScrollBegin]=\"onMomentumScrollBegin\"\n      [onMomentumScrollEnd]=\"onMomentumScrollEnd\"\n      [scrollEventThrottle]=\"scrollEventThrottle\"\n      [keyboardShouldPersistTaps]=\"keyboardShouldPersistTaps\"\n      [keyboardDismissMode]=\"keyboardDismissMode\"\n      [removeClippedSubviews]=\"resolvedRemoveClippedSubviews\"\n      [nestedScrollEnabled]=\"nestedScrollEnabled\"\n      [testID]=\"testID\"\n      [nativeID]=\"nativeID\"\n      [style]=\"resolvedStyle\"\n      [contentContainerStyle]=\"contentContainerStyle\"\n      [itemTemplate]=\"itemDir?.templateRef\"\n      [itemSeparatorTemplate]=\"separatorDir?.templateRef\"\n      \n  [accessible]=\"accessible\"\n  [accessibilityLabel]=\"accessibilityLabel\"\n  [accessibilityHint]=\"accessibilityHint\"\n  [accessibilityRole]=\"accessibilityRole\"\n  [accessibilityState]=\"accessibilityState\"\n  [accessibilityValue]=\"accessibilityValue\"\n  [accessibilityActions]=\"accessibilityActions\"\n  [accessibilityLabelledBy]=\"accessibilityLabelledBy\"\n  [importantForAccessibility]=\"importantForAccessibility\"\n  [accessibilityLiveRegion]=\"accessibilityLiveRegion\"\n  [screenReaderFocusable]=\"screenReaderFocusable\"\n  [accessibilityViewIsModal]=\"accessibilityViewIsModal\"\n  [accessibilityElementsHidden]=\"accessibilityElementsHidden\"\n  [accessibilityIgnoresInvertColors]=\"accessibilityIgnoresInvertColors\"\n  [accessibilityLanguage]=\"accessibilityLanguage\"\n  [accessibilityRespondsToUserInteraction]=\"accessibilityRespondsToUserInteraction\"\n  [accessibilityShowsLargeContentViewer]=\"accessibilityShowsLargeContentViewer\"\n  [accessibilityLargeContentTitle]=\"accessibilityLargeContentTitle\"\n  (accessibilityAction)=\"accessibilityAction.emit($event)\"\n  (accessibilityTap)=\"accessibilityTap.emit($event)\"\n  (magicTap)=\"magicTap.emit($event)\"\n  (accessibilityEscape)=\"accessibilityEscape.emit($event)\"\n  [role]=\"role\"\n  [aria-label]=\"ariaLabel\"\n  [aria-labelledby]=\"ariaLabelledBy\"\n  [aria-live]=\"ariaLive\"\n  [aria-hidden]=\"ariaHidden\"\n  [aria-busy]=\"ariaBusy\"\n  [aria-checked]=\"ariaChecked\"\n  [aria-disabled]=\"ariaDisabled\"\n  [aria-expanded]=\"ariaExpanded\"\n  [aria-selected]=\"ariaSelected\"\n  [aria-modal]=\"ariaModal\"\n  [aria-valuemax]=\"ariaValueMax\"\n  [aria-valuemin]=\"ariaValueMin\"\n  [aria-valuenow]=\"ariaValueNow\"\n  [aria-valuetext]=\"ariaValueText\"\n\n    >\n      @if (headerDir !== undefined) {\n        <ng-template vListHeader>\n          <ng-container [vListOutlet]=\"headerDir.templateRef\"></ng-container>\n        </ng-template>\n      }\n      @if (footerDir !== undefined) {\n        <ng-template vListFooter>\n          <ng-container [vListOutlet]=\"footerDir.templateRef\"></ng-container>\n        </ng-template>\n      }\n      @if (emptyDir !== undefined) {\n        <ng-template vListEmpty>\n          <ng-container [vListOutlet]=\"emptyDir.templateRef\"></ng-container>\n        </ng-template>\n      }\n    </VirtualizedList>\n  }\n", isInline: true, dependencies: [{ kind: "component", type: VirtualizedList, selector: "VirtualizedList" }, { kind: "directive", type: VListItemDirective, selector: "[vListItem]" }, { kind: "directive", type: VListHeaderDirective, selector: "[vListHeader]" }, { kind: "directive", type: VListFooterDirective, selector: "[vListFooter]" }, { kind: "directive", type: VListEmptyDirective, selector: "[vListEmpty]" }, { kind: "directive", type: VListSeparatorDirective, selector: "[vListSeparator]" }, { kind: "directive", type: VListOutletDirective, selector: "[vListOutlet]", inputs: ["vListOutlet", "vListOutletContext"] }, { kind: "component", type: ViewHost, selector: "view" }], viewProviders: [provideGateDemand(() => FlatList)], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FlatList, decorators: [{
             type: Component,
             args: [{
                     selector: 'FlatList',
                     standalone: true,
+                    viewProviders: [provideGateDemand(() => FlatList)],
                     hostDirectives: [
                         { directive: SymbioteStyleInputDirective, inputs: ['style'] },
                     ],
@@ -381,251 +180,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         ViewHost,
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-    @if (isMultiColumn) {
-      <VirtualizedList
-        [data]="rows"
-        [getItem]="getRow"
-        [getItemCount]="getRowCount"
-        [keyExtractor]="rowKey"
-        [getItemLayout]="getItemLayout"
-        [horizontal]="horizontal"
-        [inverted]="inverted"
-        [extraData]="extraData"
-        (endReached)="endReached.emit($event)"
-        [onEndReachedThreshold]="onEndReachedThreshold"
-        (startReached)="startReached.emit($event)"
-        [onStartReachedThreshold]="onStartReachedThreshold"
-        (refresh)="refresh.emit()"
-        [refreshRequested]="refresh.observed"
-        [refreshing]="refreshing"
-        [progressViewOffset]="progressViewOffset"
-        (viewableItemsChanged)="rowViewableItemsChanged($event)"
-        [viewabilityConfig]="viewabilityConfig"
-        [viewabilityConfigCallbackPairs]="rowViewabilityPairs"
-        (scrollToIndexFailed)="scrollToIndexFailed.emit($event)"
-        [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]="resolvedRemoveClippedSubviews"
-        [nestedScrollEnabled]="nestedScrollEnabled"
-        [testID]="testID"
-        [style]="resolvedStyle"
-        [contentContainerStyle]="contentContainerStyle"
-      >
-        <ng-template vListItem let-row let-separators="separators">
-          <view [style]="rowStyle">
-            @for (cell of rowCells(row, separators); track cell.key) {
-              <view [style]="columnCellStyle">
-                <ng-container
-                  [vListOutlet]="itemDir?.templateRef"
-                  [vListOutletContext]="cell.context"
-                ></ng-container>
-              </view>
-            }
-          </view>
-        </ng-template>
-        @if (headerDir !== undefined) {
-          <ng-template vListHeader>
-            <ng-container [vListOutlet]="headerDir.templateRef"></ng-container>
-          </ng-template>
-        }
-        @if (footerDir !== undefined) {
-          <ng-template vListFooter>
-            <ng-container [vListOutlet]="footerDir.templateRef"></ng-container>
-          </ng-template>
-        }
-        @if (emptyDir !== undefined) {
-          <ng-template vListEmpty>
-            <ng-container [vListOutlet]="emptyDir.templateRef"></ng-container>
-          </ng-template>
-        }
-        @if (separatorDir !== undefined) {
-          <ng-template
-            vListSeparator
-            let-highlighted="highlighted"
-            let-leadingItem="leadingItem"
-            let-trailingItem="trailingItem"
-          >
-            <ng-container
-              [vListOutlet]="separatorDir.templateRef"
-              [vListOutletContext]="
-                rowSeparatorContext(highlighted, leadingItem, trailingItem)
-              "
-            ></ng-container>
-          </ng-template>
-        }
-      </VirtualizedList>
-    } @else {
-      <VirtualizedList
-        [data]="data"
-        [getItem]="getFlatItem"
-        [getItemCount]="getFlatCount"
-        [keyExtractor]="keyExtractor"
-        [getItemLayout]="getItemLayout"
-        [horizontal]="horizontal"
-        [inverted]="inverted"
-        [extraData]="extraData"
-        (endReached)="endReached.emit($event)"
-        [onEndReachedThreshold]="onEndReachedThreshold"
-        (startReached)="startReached.emit($event)"
-        [onStartReachedThreshold]="onStartReachedThreshold"
-        (refresh)="refresh.emit()"
-        [refreshRequested]="refresh.observed"
-        [refreshing]="refreshing"
-        [progressViewOffset]="progressViewOffset"
-        (viewableItemsChanged)="viewableItemsChanged.emit($event)"
-        [viewabilityConfig]="viewabilityConfig"
-        [viewabilityConfigCallbackPairs]="viewabilityConfigCallbackPairs"
-        (scrollToIndexFailed)="scrollToIndexFailed.emit($event)"
-        [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]="resolvedRemoveClippedSubviews"
-        [nestedScrollEnabled]="nestedScrollEnabled"
-        [testID]="testID"
-        [style]="resolvedStyle"
-        [contentContainerStyle]="contentContainerStyle"
-        [itemTemplate]="itemDir?.templateRef"
-        [itemSeparatorTemplate]="separatorDir?.templateRef"
-      >
-        @if (headerDir !== undefined) {
-          <ng-template vListHeader>
-            <ng-container [vListOutlet]="headerDir.templateRef"></ng-container>
-          </ng-template>
-        }
-        @if (footerDir !== undefined) {
-          <ng-template vListFooter>
-            <ng-container [vListOutlet]="footerDir.templateRef"></ng-container>
-          </ng-template>
-        }
-        @if (emptyDir !== undefined) {
-          <ng-template vListEmpty>
-            <ng-container [vListOutlet]="emptyDir.templateRef"></ng-container>
-          </ng-template>
-        }
-      </VirtualizedList>
-    }
-  `,
+                    template: FLAT_LIST_TEMPLATE,
                 }]
-        }], propDecorators: { endReached: [{
-                type: Output
-            }], startReached: [{
-                type: Output
-            }], refresh: [{
-                type: Output
-            }], viewableItemsChanged: [{
-                type: Output
-            }], scrollToIndexFailed: [{
-                type: Output
-            }], data: [{
+        }], propDecorators: { data: [{
                 type: Input,
                 args: [{ required: true }]
-            }], testID: [{
-                type: Input
             }], numColumns: [{
                 type: Input
             }], columnWrapperStyle: [{
                 type: Input
-            }], 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
-            }], 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
-            }], 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]
             }], listRef: [{
                 type: ViewChild,
                 args: [VirtualizedList]