@symbiote-native/angular 0.1.0

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

@@ -0,0 +1,689 @@
+// 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). All 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, exactly as the React and Vue FlatLists reuse it. This is the
+// Angular twin of adapters/vue/src/components/flat-list/index.ts.
+//
+// TEMPLATE FORWARDING — both 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 (it only sees what was projected directly onto the querying component's own tag) — a bare
+// `<VirtualizedList ...><ng-content></ng-content></VirtualizedList>` here left VirtualizedList's own
+// itemDir/headerDir/etc. undefined, so every cell rendered empty (a real, confirmed device bug — see
+// flat-list.test.ts). Fixed for both column modes the same way:
+//   * 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 — then re-authors equivalent `<ng-template>`s on
+//     `<VirtualizedList>`, each forwarding the captured templateRef + context through
+//     VListOutletDirective. Item/index/separators pass through 1:1 (no row wrapping).
+//   * Multi column (numColumns > 1): the 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 even if
+//     the projection issue didn't exist. The row vListItem lays out the N columns side by side (each
+//     cell stamps the app's item template via VListOutletDirective with the per-item 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. This mirrors exactly how Vue's FlatList intercepts
+//     renderItem with renderRow.
+//
+// The imperative handle (scrollToIndex / scrollToOffset / scrollToEnd / scrollToItem /
+// recordInteraction / flashScrollIndicators / getScroll* / getNativeScrollRef) is RN's FlatList
+// surface; FlatList re-exposes it by delegating to the inner VirtualizedList (@ViewChild). The
+// element-returning props (renderItem / ItemSeparatorComponent / List{Header,Footer,Empty}Component)
+// are templates in Angular, so they are absent from IFlatListProps, per the per-adapter
+// children/render split of <prop_types_split_agnostic_vs_per_adapter>; everything agnostic mirrors
+// IVirtualizedListProps.
+import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, ContentChild, ElementRef, EventEmitter, Input, Output, ViewChild, inject, } from '@angular/core';
+import { SINGLE_COLUMN, chunkIntoRows, expandRowViewability, firstItemOfRow, lastItemOfRow, rowKeyExtractor, } from '@symbiote-native/components';
+import { dlog, flattenStyle, resolveClassName, } from '@symbiote-native/engine';
+import { VirtualizedList, VListEmptyDirective, VListFooterDirective, VListHeaderDirective, VListItemDirective, VListSeparatorDirective, } from '../virtualized-list';
+import { VListOutletDirective } from '../virtualized-list/directives';
+import { stableAnchorStyle, ViewHost } from '../../primitives';
+import * as i0 from "@angular/core";
+function isRecord(value) {
+    return typeof value === 'object' && value !== null;
+}
+function isRow(value) {
+    return (isRecord(value) && Array.isArray(value['items']) && typeof value['startIndex'] === 'number');
+}
+function isSeparators(value) {
+    return (isRecord(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.
+const NOOP_SEPARATORS = {
+    highlight: () => undefined,
+    unhighlight: () => undefined,
+    updateProps: () => undefined,
+};
+// Angular cannot preserve VListSeparatorDirective<ItemT>'s type parameter across this re-stamp
+// reuse (the directive is matched structurally in FlatList's own template with no explicit type
+// argument to pin ItemT to, so `let-leadingItem`/`let-trailingItem` arrive typed `unknown`) — even
+// though VirtualizedList's own buildSeparatorContext always supplies a real ItemT value. The
+// narrowest possible I/O-boundary cast for that gap; not a general-purpose unknown-to-T narrowing.
+function asItem(value) {
+    return value;
+}
+export { VListEmptyDirective, VListFooterDirective, VListHeaderDirective, VListItemDirective, VListSeparatorDirective, } from '../virtualized-list';
+export class FlatList {
+    // 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).
+    endReached = new EventEmitter();
+    startReached = new EventEmitter();
+    refresh = new EventEmitter();
+    viewableItemsChanged = new EventEmitter();
+    scrollToIndexFailed = new EventEmitter();
+    data;
+    numColumns;
+    columnWrapperStyle;
+    keyExtractor;
+    getItemLayout;
+    horizontal;
+    inverted;
+    extraData;
+    onEndReachedThreshold;
+    onStartReachedThreshold;
+    refreshing;
+    progressViewOffset;
+    viewabilityConfig;
+    viewabilityConfigCallbackPairs;
+    initialNumToRender;
+    initialScrollIndex;
+    maxToRenderPerBatch;
+    updateCellsBatchingPeriod;
+    windowSize;
+    stickyHeaderIndices;
+    maintainVisibleContentPosition;
+    onScroll;
+    onScrollBeginDrag;
+    onScrollEndDrag;
+    onMomentumScrollBegin;
+    onMomentumScrollEnd;
+    scrollEventThrottle;
+    keyboardShouldPersistTaps;
+    keyboardDismissMode;
+    style;
+    contentContainerStyle;
+    // The app's cell + slot templates, captured for the multi-column re-stamp path. In the
+    // single-column path they are ALSO projected through <ng-content> to the inner list and these
+    // captures stay unused (the inner list's own @ContentChild resolves them across the projection).
+    itemDir;
+    headerDir;
+    footerDir;
+    emptyDir;
+    separatorDir;
+    // The composed inner list (whichever numColumns branch rendered). Its instance IS the
+    // IVirtualizedListHandle, so FlatList's handle delegates straight to it.
+    listRef;
+    // 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).
+    elementRef = inject(ElementRef);
+    // --- derived view state (recomputed in ngOnChanges, stable identity across CD) ---
+    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.
+    rowStyle = flattenStyle([{ flexDirection: 'row' }]);
+    rowViewabilityPairs;
+    columnCellStyle = { flex: 1 };
+    resolvedStyle = undefined;
+    get columns() {
+        return this.numColumns ?? SINGLE_COLUMN;
+    }
+    get isMultiColumn() {
+        return this.columns > SINGLE_COLUMN;
+    }
+    ngOnChanges(changes) {
+        // Recomputed on EVERY ngOnChanges call, not gated on `changes['style']`: a class= on the
+        // FlatList use site (no matching [style] binding at all) never appears in `changes`, so a
+        // guard here would permanently skip picking up anchorHostStyle for that (the actual bug-report
+        // shape) — ngOnChanges still fires at least once at mount via the required `data` @Input(), and
+        // by then the anchor's class-derived style is already resolved synchronously (routeProp runs
+        // inline from Renderer2.addClass, before this component's own lifecycle hooks). stableAnchorStyle
+        // (not a bare flattenStyle) keeps `resolvedStyle`'s REFERENCE stable across ticks where nothing
+        // actually changed — `[style]="resolvedStyle"` binds onto VirtualizedList's own `@Input() style`,
+        // which feeds its `ngDoCheck` dedup gate; a fresh object every tick would defeat that gate and
+        // free-run change detection forever (see stableAnchorStyle's doc comment).
+        this.resolvedStyle = stableAnchorStyle(this.elementRef, this.style, this.resolvedStyle);
+        if (changes['columnWrapperStyle'] !== undefined) {
+            // A class-name string resolves through the shared registry before flattenStyle, which
+            // only understands style objects/arrays.
+            const resolvedColumnWrapperStyle = typeof this.columnWrapperStyle === 'string'
+                ? resolveClassName(this.columnWrapperStyle)
+                : this.columnWrapperStyle;
+            this.rowStyle = flattenStyle([{ flexDirection: 'row' }, resolvedColumnWrapperStyle]);
+        }
+        if (changes['data'] !== undefined || changes['numColumns'] !== undefined) {
+            this.rows = this.isMultiColumn ? chunkIntoRows(this.data, this.columns) : [];
+            dlog(`Angular FlatList over ${this.data?.length ?? 0} items, ${this.columns} column(s)`);
+        }
+        if (changes['viewabilityConfigCallbackPairs'] !== undefined ||
+            changes['numColumns'] !== undefined) {
+            this.rowViewabilityPairs = this.buildRowViewabilityPairs();
+        }
+    }
+    // ---- single-column data adaptation (plain array -> getItem/getItemCount) ----
+    getFlatItem = (_data, index) => this.data[index];
+    getFlatCount = (_data) => this.data.length;
+    // ---- multi-column data adaptation (the virtualized stream is rows) ----
+    getRow = (_data, index) => this.rows[index];
+    getRowCount = (_data) => this.rows.length;
+    rowKey = (row, _index) => rowKeyExtractor(row);
+    // Viewability over rows expands back to per-item tokens, so the caller sees item-level
+    // visibility, not row-level (shared expandRowViewability), matching Vue.
+    rowViewableItemsChanged = (info) => {
+        this.viewableItemsChanged.emit(expandRowViewability(info, this.keyExtractor));
+    };
+    buildRowViewabilityPairs() {
+        return this.viewabilityConfigCallbackPairs?.map(pair => ({
+            viewabilityConfig: pair.viewabilityConfig,
+            onViewableItemsChanged: (rowInfo) => {
+                pair.onViewableItemsChanged?.(expandRowViewability(rowInfo, this.keyExtractor));
+            },
+        }));
+    }
+    // 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`.
+    rowCells(row, separators) {
+        if (!isRow(row))
+            return [];
+        const handle = isSeparators(separators) ? separators : NOOP_SEPARATORS;
+        return row.items.map((item, column) => {
+            const index = row.startIndex + column;
+            const key = this.keyExtractor ? this.keyExtractor(item, index) : String(index);
+            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.
+    rowSeparatorContext(highlighted, leadingRow, trailingRow) {
+        const isHighlighted = highlighted === true;
+        return {
+            $implicit: isHighlighted,
+            highlighted: isHighlighted,
+            leadingItem: isRow(leadingRow) ? lastItemOfRow(leadingRow) : undefined,
+            trailingItem: isRow(trailingRow) ? firstItemOfRow(trailingRow) : undefined,
+        };
+    }
+    // Single-column separator context: leadingItem/trailingItem are already real items (no row
+    // wrapper to narrow through — see the asItem boundary comment above).
+    itemSeparatorContext(highlighted, leadingItem, trailingItem) {
+        const isHighlighted = highlighted === true;
+        return {
+            $implicit: isHighlighted,
+            highlighted: isHighlighted,
+            leadingItem: asItem(leadingItem),
+            trailingItem: asItem(trailingItem),
+        };
+    }
+    // ---- imperative handle (RN FlatList surface) — delegates to the inner VirtualizedList ----
+    scrollToOffset(params) {
+        this.listRef?.scrollToOffset(params);
+    }
+    scrollToIndex(params) {
+        this.listRef?.scrollToIndex(params);
+    }
+    scrollToItem(params) {
+        this.listRef?.scrollToItem(params);
+    }
+    scrollToEnd(params) {
+        this.listRef?.scrollToEnd(params);
+    }
+    flashScrollIndicators() {
+        this.listRef?.flashScrollIndicators();
+    }
+    getNativeScrollRef() {
+        return this.listRef?.getNativeScrollRef() ?? null;
+    }
+    getScrollableNode() {
+        return this.listRef?.getScrollableNode() ?? null;
+    }
+    getScrollResponder() {
+        return this.listRef?.getScrollResponder() ?? null;
+    }
+    getScrollNode() {
+        return this.listRef?.getScrollNode() ?? null;
+    }
+    recordInteraction() {
+        this.listRef?.recordInteraction();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FlatList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: FlatList, isStandalone: true, selector: "FlatList", inputs: { data: "data", 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", 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, 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"
+        [style]="resolvedStyle"
+        [contentContainerStyle]="contentContainerStyle"
+      >
+        <ng-template vListItem let-row let-separators="separators">
+          <symbiote-view [style]="rowStyle">
+            @for (cell of rowCells(row, separators); track cell.key) {
+              <symbiote-view [style]="columnCellStyle">
+                <ng-container
+                  [vListOutlet]="itemDir?.templateRef"
+                  [vListOutletContext]="cell.context"
+                ></ng-container>
+              </symbiote-view>
+            }
+          </symbiote-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"
+        [style]="resolvedStyle"
+        [contentContainerStyle]="contentContainerStyle"
+      >
+        <ng-template vListItem let-item let-index="index" let-separators="separators">
+          <ng-container
+            [vListOutlet]="itemDir?.templateRef"
+            [vListOutletContext]="{ $implicit: item, index, separators }"
+          ></ng-container>
+        </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]="itemSeparatorContext(highlighted, leadingItem, trailingItem)"
+            ></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", "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"], 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: "symbiote-view, View" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FlatList, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'FlatList',
+                    standalone: true,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    imports: [
+                        VirtualizedList,
+                        VListItemDirective,
+                        VListHeaderDirective,
+                        VListFooterDirective,
+                        VListEmptyDirective,
+                        VListSeparatorDirective,
+                        VListOutletDirective,
+                        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"
+        [style]="resolvedStyle"
+        [contentContainerStyle]="contentContainerStyle"
+      >
+        <ng-template vListItem let-row let-separators="separators">
+          <symbiote-view [style]="rowStyle">
+            @for (cell of rowCells(row, separators); track cell.key) {
+              <symbiote-view [style]="columnCellStyle">
+                <ng-container
+                  [vListOutlet]="itemDir?.templateRef"
+                  [vListOutletContext]="cell.context"
+                ></ng-container>
+              </symbiote-view>
+            }
+          </symbiote-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"
+        [style]="resolvedStyle"
+        [contentContainerStyle]="contentContainerStyle"
+      >
+        <ng-template vListItem let-item let-index="index" let-separators="separators">
+          <ng-container
+            [vListOutlet]="itemDir?.templateRef"
+            [vListOutletContext]="{ $implicit: item, index, separators }"
+          ></ng-container>
+        </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]="itemSeparatorContext(highlighted, leadingItem, trailingItem)"
+            ></ng-container>
+          </ng-template>
+        }
+      </VirtualizedList>
+    }
+  `,
+                }]
+        }], propDecorators: { endReached: [{
+                type: Output
+            }], startReached: [{
+                type: Output
+            }], refresh: [{
+                type: Output
+            }], viewableItemsChanged: [{
+                type: Output
+            }], scrollToIndexFailed: [{
+                type: Output
+            }], data: [{
+                type: Input,
+                args: [{ required: true }]
+            }], 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
+            }], 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]
+            }] } });
+//# sourceMappingURL=index.js.map