@symbiote-native/angular 3.1.3 → 3.2.0

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

@@ -1,65 +1,33 @@
-// VirtualizedSectionList, the Angular wrapper that flattens sections into one virtualized stream
-// over VirtualizedList. Each section contributes a header row, its item rows, then a footer row
-// (RN counts 2 per section); the flattened tagged sequence is fed to VirtualizedList as one list,
-// so headers/items/footers are all windowed by the same machinery. The flattening, entry keying,
-// separator-item unwrap, and scrollToLocation mapping are shared from @symbiote-native/components; this
-// file wires Angular's lifecycle (typed @Input/@Output surface + the imperative handle + the
-// per-cell-tag template dispatch). The Angular twin of the React/Vue adapters' VirtualizedSectionList.
-//
-// The KEY mechanic — per-cell-tag template dispatch. VirtualizedList renders every cell through ONE
-// `vListItem` template, but a section list has DIFFERENT cell types (section header, item, section
-// footer, between-section separators). So VSL supplies the inner list a SINGLE synthesized
-// `vListItem` template that @switch-es on the flattened entry's tag and stamps the matching app
-// template (captured via @ContentChild on the vSection* directives) through VListOutletDirective.
-// list-level header/footer/empty/item-separator reuse VirtualizedList's own directives, forwarded
-// the same way. Only the cell-AUTHORING shape is framework-specific; the rest of the surface
-// stays shared with React/Vue.
-//
-// Accessibility / aria props are forwarded unchanged to the inner VirtualizedList, which owns the
-// shared aria→accessibility* fold before the props reach the ScrollView host.
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, Input, Output, ViewChild, inject, } from '@angular/core';
+// VirtualizedSectionList flattens sections into one virtualized stream over VirtualizedList
+// Flattening, entry keying and `scrollToLocation` are shared from `@symbiote-native/components`
+// This file is the Angular lifecycle and the per-entry template dispatch
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, Input, ViewChild, inject, } from '@angular/core';
 import { flattenSections, resolveStickySectionHeaders, scrollLocationToFlatIndex, sectionEntryKey, unwrapEntryItem, } from '@symbiote-native/components';
 import { Platform, dlog, } from '@symbiote-native/engine';
 import { VirtualizedList, VListEmptyDirective, VListFooterDirective, VListHeaderDirective, VListItemDirective, VListSeparatorDirective, } from '../virtualized-list';
 import { VListOutletDirective } from '../virtualized-list/directives';
+import { ListEventsBase } from '../virtualized-list/list-events';
+import { provideGateDemand } from '../../gate-demand';
 import { stableAnchorStyle, SymbioteStyleInputDirective, } from '../../primitives';
 import { VSectionFooterDirective, VSectionHeaderDirective, VSectionItemDirective, VSectionSeparatorDirective, } from './directives';
-import { gateWanted, injectGateDemandAbove, provideGateDemand, } from '../../gate-demand';
+import { VIRTUALIZED_SECTION_LIST_TEMPLATE } from './section-list-template';
 import * as i0 from "@angular/core";
 import * as i1 from "../../primitives/shared";
-// Re-export the section authoring directives + their contexts so flat consumers (and SectionList)
-// import them from '../virtualized-section-list', mirroring how VirtualizedList re-exports its own.
 export { VSectionFooterDirective, VSectionHeaderDirective, VSectionItemDirective, VSectionSeparatorDirective, } from './directives';
-export class VirtualizedSectionList {
+export class VirtualizedSectionList extends ListEventsBase {
     constructor() {
-        this.endReached = new EventEmitter();
-        this.startReached = new EventEmitter();
-        this.refresh = 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();
-        // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
-        // onto (see anchorHostStyle's doc comment) — NOT `list` 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);
-        // --- template-bound state, recomputed in ngDoCheck when sections / separator presence change ---
         this.flatEntries = [];
         this.stickyHeaderIndices = undefined;
-        // headerIndices are the flat positions of every section header; scrollToLocation maps a
-        // (sectionIndex, itemIndex) coordinate through them without re-deriving the flat layout.
+        // Flat positions of every section header, so `scrollToLocation` skips re-deriving the layout
         this.headerIndices = [];
-        // Memo guards so flattenSections does not re-run on every CD (the inner list marks for check on
-        // every scroll tick, which re-runs VSL's ngDoCheck too).
+        // Memo guards, the inner list marks for check on every scroll tick and re-runs `ngDoCheck`
         this.lastSectionsRef = null;
         this.lastHasSectionSeparator = false;
         this.cdr = inject(ChangeDetectorRef);
-        // The derived flat-stream accessors handed to the inner VirtualizedList. Stable arrow fields so
-        // the bindings keep a constant identity; they read the live flatEntries.
+        // Stable arrow fields, so the bindings to the inner list keep a constant identity
         this.getEntry = (_source, index) => this.flatEntries[index];
         this.getEntryCount = () => this.flatEntries.length;
         this.entryKeyExtractor = (entry, index) => sectionEntryKey(entry, index, this.keyExtractor);
@@ -68,9 +36,6 @@ export class VirtualizedSectionList {
         this.cachedResolvedStyle = stableAnchorStyle(this.elementRef, this.style, this.cachedResolvedStyle);
         return this.cachedResolvedStyle;
     }
-    wantsGate(name) {
-        return gateWanted(this.gateDemandAbove, name, this[name]);
-    }
     ngDoCheck() {
         const hasSectionSeparator = this.sectionSeparatorDir !== undefined;
         if (this.sections === this.lastSectionsRef &&
@@ -83,7 +48,7 @@ export class VirtualizedSectionList {
         const { entries, headerIndices } = flattenSections(sections, hasSectionSeparator);
         this.flatEntries = entries;
         this.headerIndices = headerIndices;
-        // RN sticks section headers by default only on iOS; Android does not unless asked.
+        // RN sticks section headers by default only on iOS
         this.stickyHeaderIndices = resolveStickySectionHeaders(this.stickySectionHeadersEnabled, headerIndices, Platform.OS);
         dlog(`Angular VirtualizedSectionList: ${sections.length} sections flattened to ${entries.length} entries`);
         this.cdr.markForCheck();
@@ -99,10 +64,8 @@ export class VirtualizedSectionList {
         }
         return this.cachedEntryItemLayout;
     }
-    // Adapts each @Output() into the plain callback VirtualizedList's own @Input() still wants,
-    // gated on `.observed` so an unlistened event forwards `undefined` — the same "nobody cares"
-    // contract the old @Input() callback passthrough had (e.g. onRefresh presence gates whether a
-    // RefreshControl is built downstream; see the Vue twin's `listens('onRefresh')` gate).
+    // Each output becomes the plain callback the inner list wants, or `undefined` when nobody
+    // listens, since a callback's presence gates whether a `RefreshControl` is built downstream
     get resolvedOnEndReached() {
         return this.endReached.observed
             ? info => this.endReached.emit(info)
@@ -116,28 +79,7 @@ export class VirtualizedSectionList {
     get resolvedOnRefresh() {
         return this.refresh.observed ? () => this.refresh.emit() : undefined;
     }
-    get resolvedOnAccessibilityAction() {
-        return this.accessibilityAction.observed
-            ? event => this.accessibilityAction.emit(event)
-            : undefined;
-    }
-    get resolvedOnAccessibilityTap() {
-        return this.accessibilityTap.observed
-            ? event => this.accessibilityTap.emit(event)
-            : undefined;
-    }
-    get resolvedOnMagicTap() {
-        return this.magicTap.observed
-            ? event => this.magicTap.emit(event)
-            : undefined;
-    }
-    get resolvedOnAccessibilityEscape() {
-        return this.accessibilityEscape.observed
-            ? event => this.accessibilityEscape.emit(event)
-            : undefined;
-    }
-    // --- per-cell-tag dispatch (the inner vListItem context is typed `unknown` under strictTemplates,
-    // since VListItemDirective's generic is not bound here; narrow with a runtime guard, no casts). ---
+    // The inner cell context is typed `unknown` under strict templates, so entries are narrowed
     isEntry(value) {
         return typeof value === 'object' && value !== null && 'kind' in value;
     }
@@ -162,10 +104,8 @@ export class VirtualizedSectionList {
             separators,
         };
     }
-    // The inner list's separator context carries the flattened ENTRY as leading/trailing; unwrap each
-    // back to its ItemT (shared unwrapEntryItem) so the app's item separator, typed on ItemT, sees
-    // real items (header/footer/section-separator gaps unwrap to undefined). Mirrors the React/Vue
-    // entrySeparatorComponent wrap.
+    // The inner separator context carries flattened entries, unwrapped back to real items so the
+    // app's separator, typed on the item, never sees an envelope
     itemSeparatorContextOf(highlighted, leadingItem, trailingItem) {
         return {
             $implicit: highlighted === true,
@@ -178,7 +118,6 @@ export class VirtualizedSectionList {
                 : undefined,
         };
     }
-    // ---- imperative handle (the shared IVirtualizedSectionListHandle surface) ----
     scrollToLocation(params) {
         const flatIndex = scrollLocationToFlatIndex(this.headerIndices, params.sectionIndex, params.itemIndex);
         if (flatIndex === undefined) {
@@ -212,154 +151,8 @@ export class VirtualizedSectionList {
     recordInteraction() {
         this.list?.recordInteraction();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: VirtualizedSectionList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: VirtualizedSectionList, isStandalone: true, selector: "VirtualizedSectionList", inputs: { sections: "sections", keyExtractor: "keyExtractor", getItemLayout: "getItemLayout", stickySectionHeadersEnabled: "stickySectionHeadersEnabled", extraData: "extraData", onEndReachedThreshold: "onEndReachedThreshold", onStartReachedThreshold: "onStartReachedThreshold", refreshing: "refreshing", progressViewOffset: "progressViewOffset", refreshRequested: "refreshRequested", initialNumToRender: "initialNumToRender", initialScrollIndex: "initialScrollIndex", maxToRenderPerBatch: "maxToRenderPerBatch", updateCellsBatchingPeriod: "updateCellsBatchingPeriod", windowSize: "windowSize", inverted: "inverted", 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" }, outputs: { endReached: "endReached", startReached: "startReached", refresh: "refresh", accessibilityAction: "accessibilityAction", accessibilityTap: "accessibilityTap", magicTap: "magicTap", accessibilityEscape: "accessibilityEscape" }, queries: [{ propertyName: "sectionItemDir", first: true, predicate: VSectionItemDirective, descendants: true }, { propertyName: "sectionHeaderDir", first: true, predicate: VSectionHeaderDirective, descendants: true }, { propertyName: "sectionFooterDir", first: true, predicate: VSectionFooterDirective, descendants: true }, { propertyName: "sectionSeparatorDir", first: true, predicate: VSectionSeparatorDirective, descendants: true }, { propertyName: "listHeaderDir", first: true, predicate: VListHeaderDirective, descendants: true }, { propertyName: "listFooterDir", first: true, predicate: VListFooterDirective, descendants: true }, { propertyName: "listEmptyDir", first: true, predicate: VListEmptyDirective, descendants: true }, { propertyName: "itemSeparatorDir", first: true, predicate: VListSeparatorDirective, descendants: true }], viewQueries: [{ propertyName: "list", first: true, predicate: VirtualizedList, descendants: true }], hostDirectives: [{ directive: i1.SymbioteStyleInputDirective, inputs: ["style", "style"] }], ngImport: i0, template: `
-    <VirtualizedList
-      [data]="flatEntries"
-      [getItem]="getEntry"
-      [getItemCount]="getEntryCount"
-      [keyExtractor]="entryKeyExtractor"
-      [getItemLayout]="entryItemLayout"
-      [stickyHeaderIndices]="stickyHeaderIndices"
-      [extraData]="extraData"
-      [inverted]="inverted"
-      [refreshing]="refreshing"
-      [progressViewOffset]="progressViewOffset"
-      [refreshRequested]="refreshRequested ?? refresh.observed"
-      (refresh)="resolvedOnRefresh?.()"
-      (endReached)="resolvedOnEndReached?.($event)"
-      [onEndReachedThreshold]="onEndReachedThreshold"
-      (startReached)="resolvedOnStartReached?.($event)"
-      [onStartReachedThreshold]="onStartReachedThreshold"
-      [initialNumToRender]="initialNumToRender"
-      [initialScrollIndex]="initialScrollIndex"
-      [maxToRenderPerBatch]="maxToRenderPerBatch"
-      [updateCellsBatchingPeriod]="updateCellsBatchingPeriod"
-      [windowSize]="windowSize"
-      [maintainVisibleContentPosition]="maintainVisibleContentPosition"
-      [onScroll]="onScroll"
-      [onScrollBeginDrag]="onScrollBeginDrag"
-      [onScrollEndDrag]="onScrollEndDrag"
-      [onMomentumScrollBegin]="onMomentumScrollBegin"
-      [onMomentumScrollEnd]="onMomentumScrollEnd"
-      [scrollEventThrottle]="scrollEventThrottle"
-      [keyboardShouldPersistTaps]="keyboardShouldPersistTaps"
-      [keyboardDismissMode]="keyboardDismissMode"
-      [removeClippedSubviews]="removeClippedSubviews"
-      [nestedScrollEnabled]="nestedScrollEnabled"
-      [style]="resolvedStyle"
-      [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"
-      (accessibilityAction)="resolvedOnAccessibilityAction?.($event)"
-      (accessibilityTap)="resolvedOnAccessibilityTap?.($event)"
-      (magicTap)="resolvedOnMagicTap?.($event)"
-      (accessibilityEscape)="resolvedOnAccessibilityEscape?.($event)"
-      [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"
-    >
-      <!-- The single synthesized cell template: dispatch per flattened entry tag. -->
-      <ng-template vListItem let-entry let-separators="separators">
-        @switch (entryKind(entry)) {
-          @case ('header') {
-            <ng-container
-              [vListOutlet]="sectionHeaderDir?.templateRef"
-              [vListOutletContext]="sectionContextOf(entry)"
-            ></ng-container>
-          }
-          @case ('footer') {
-            <ng-container
-              [vListOutlet]="sectionFooterDir?.templateRef"
-              [vListOutletContext]="sectionContextOf(entry)"
-            ></ng-container>
-          }
-          @case ('section-separator') {
-            <ng-container
-              [vListOutlet]="sectionSeparatorDir?.templateRef"
-            ></ng-container>
-          }
-          @case ('item') {
-            <ng-container
-              [vListOutlet]="sectionItemDir?.templateRef"
-              [vListOutletContext]="itemContextOf(entry, separators)"
-            ></ng-container>
-          }
-        }
-      </ng-template>
-
-      <!-- list-level slots: forward the app's VirtualizedList directives to the inner list. -->
-      @if (listHeaderDir !== undefined) {
-        <ng-template vListHeader>
-          <ng-container
-            [vListOutlet]="listHeaderDir.templateRef"
-          ></ng-container>
-        </ng-template>
-      }
-      @if (listFooterDir !== undefined) {
-        <ng-template vListFooter>
-          <ng-container
-            [vListOutlet]="listFooterDir.templateRef"
-          ></ng-container>
-        </ng-template>
-      }
-      @if (listEmptyDir !== undefined) {
-        <ng-template vListEmpty>
-          <ng-container [vListOutlet]="listEmptyDir.templateRef"></ng-container>
-        </ng-template>
-      }
-      <!-- item separator: forward, unwrapping each flattened entry back to its ItemT. -->
-      @if (itemSeparatorDir !== undefined) {
-        <ng-template
-          vListSeparator
-          let-highlighted
-          let-leadingItem="leadingItem"
-          let-trailingItem="trailingItem"
-        >
-          <ng-container
-            [vListOutlet]="itemSeparatorDir.templateRef"
-            [vListOutletContext]="
-              itemSeparatorContextOf(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", "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"] }], viewProviders: [provideGateDemand(() => VirtualizedSectionList)], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: VirtualizedSectionList, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: VirtualizedSectionList, isStandalone: true, selector: "VirtualizedSectionList", inputs: { sections: "sections", keyExtractor: "keyExtractor", getItemLayout: "getItemLayout", stickySectionHeadersEnabled: "stickySectionHeadersEnabled", extraData: "extraData", onEndReachedThreshold: "onEndReachedThreshold", onStartReachedThreshold: "onStartReachedThreshold", refreshing: "refreshing", progressViewOffset: "progressViewOffset", refreshRequested: "refreshRequested", initialNumToRender: "initialNumToRender", initialScrollIndex: "initialScrollIndex", maxToRenderPerBatch: "maxToRenderPerBatch", updateCellsBatchingPeriod: "updateCellsBatchingPeriod", windowSize: "windowSize", inverted: "inverted", 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" }, queries: [{ propertyName: "sectionItemDir", first: true, predicate: VSectionItemDirective, descendants: true }, { propertyName: "sectionHeaderDir", first: true, predicate: VSectionHeaderDirective, descendants: true }, { propertyName: "sectionFooterDir", first: true, predicate: VSectionFooterDirective, descendants: true }, { propertyName: "sectionSeparatorDir", first: true, predicate: VSectionSeparatorDirective, descendants: true }, { propertyName: "listHeaderDir", first: true, predicate: VListHeaderDirective, descendants: true }, { propertyName: "listFooterDir", first: true, predicate: VListFooterDirective, descendants: true }, { propertyName: "listEmptyDir", first: true, predicate: VListEmptyDirective, descendants: true }, { propertyName: "itemSeparatorDir", first: true, predicate: VListSeparatorDirective, descendants: true }], viewQueries: [{ propertyName: "list", first: true, predicate: VirtualizedList, descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.SymbioteStyleInputDirective, inputs: ["style", "style"] }], ngImport: i0, template: "\n  <VirtualizedList\n    [data]=\"flatEntries\"\n    [getItem]=\"getEntry\"\n    [getItemCount]=\"getEntryCount\"\n    [keyExtractor]=\"entryKeyExtractor\"\n    [getItemLayout]=\"entryItemLayout\"\n    [stickyHeaderIndices]=\"stickyHeaderIndices\"\n    [extraData]=\"extraData\"\n    [inverted]=\"inverted\"\n    [refreshing]=\"refreshing\"\n    [progressViewOffset]=\"progressViewOffset\"\n    [refreshRequested]=\"refreshRequested ?? refresh.observed\"\n    (refresh)=\"resolvedOnRefresh?.()\"\n    (endReached)=\"resolvedOnEndReached?.($event)\"\n    [onEndReachedThreshold]=\"onEndReachedThreshold\"\n    (startReached)=\"resolvedOnStartReached?.($event)\"\n    [onStartReachedThreshold]=\"onStartReachedThreshold\"\n    [initialNumToRender]=\"initialNumToRender\"\n    [initialScrollIndex]=\"initialScrollIndex\"\n    [maxToRenderPerBatch]=\"maxToRenderPerBatch\"\n    [updateCellsBatchingPeriod]=\"updateCellsBatchingPeriod\"\n    [windowSize]=\"windowSize\"\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]=\"removeClippedSubviews\"\n    [nestedScrollEnabled]=\"nestedScrollEnabled\"\n    [style]=\"resolvedStyle\"\n    [contentContainerStyle]=\"contentContainerStyle\"\n    [testID]=\"testID\"\n    [nativeID]=\"nativeID\"\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    <!-- The single synthesized cell template: dispatch per flattened entry tag -->\n    <ng-template vListItem let-entry let-separators=\"separators\">\n      @switch (entryKind(entry)) {\n        @case ('header') {\n          <ng-container\n            [vListOutlet]=\"sectionHeaderDir?.templateRef\"\n            [vListOutletContext]=\"sectionContextOf(entry)\"\n          ></ng-container>\n        }\n        @case ('footer') {\n          <ng-container\n            [vListOutlet]=\"sectionFooterDir?.templateRef\"\n            [vListOutletContext]=\"sectionContextOf(entry)\"\n          ></ng-container>\n        }\n        @case ('section-separator') {\n          <ng-container\n            [vListOutlet]=\"sectionSeparatorDir?.templateRef\"\n          ></ng-container>\n        }\n        @case ('item') {\n          <ng-container\n            [vListOutlet]=\"sectionItemDir?.templateRef\"\n            [vListOutletContext]=\"itemContextOf(entry, separators)\"\n          ></ng-container>\n        }\n      }\n    </ng-template>\n\n    <!-- List-level slots: forward the app's directives to the inner list -->\n    @if (listHeaderDir !== undefined) {\n      <ng-template vListHeader>\n        <ng-container [vListOutlet]=\"listHeaderDir.templateRef\"></ng-container>\n      </ng-template>\n    }\n    @if (listFooterDir !== undefined) {\n      <ng-template vListFooter>\n        <ng-container [vListOutlet]=\"listFooterDir.templateRef\"></ng-container>\n      </ng-template>\n    }\n    @if (listEmptyDir !== undefined) {\n      <ng-template vListEmpty>\n        <ng-container [vListOutlet]=\"listEmptyDir.templateRef\"></ng-container>\n      </ng-template>\n    }\n    <!-- Item separator: unwrap each flattened entry back to its item -->\n    @if (itemSeparatorDir !== undefined) {\n      <ng-template\n        vListSeparator\n        let-highlighted\n        let-leadingItem=\"leadingItem\"\n        let-trailingItem=\"trailingItem\"\n      >\n        <ng-container\n          [vListOutlet]=\"itemSeparatorDir.templateRef\"\n          [vListOutletContext]=\"\n            itemSeparatorContextOf(highlighted, leadingItem, trailingItem)\n          \"\n        ></ng-container>\n      </ng-template>\n    }\n  </VirtualizedList>\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"] }], viewProviders: [provideGateDemand(() => VirtualizedSectionList)], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: VirtualizedSectionList, decorators: [{
             type: Component,
@@ -380,153 +173,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         VListOutletDirective,
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-    <VirtualizedList
-      [data]="flatEntries"
-      [getItem]="getEntry"
-      [getItemCount]="getEntryCount"
-      [keyExtractor]="entryKeyExtractor"
-      [getItemLayout]="entryItemLayout"
-      [stickyHeaderIndices]="stickyHeaderIndices"
-      [extraData]="extraData"
-      [inverted]="inverted"
-      [refreshing]="refreshing"
-      [progressViewOffset]="progressViewOffset"
-      [refreshRequested]="refreshRequested ?? refresh.observed"
-      (refresh)="resolvedOnRefresh?.()"
-      (endReached)="resolvedOnEndReached?.($event)"
-      [onEndReachedThreshold]="onEndReachedThreshold"
-      (startReached)="resolvedOnStartReached?.($event)"
-      [onStartReachedThreshold]="onStartReachedThreshold"
-      [initialNumToRender]="initialNumToRender"
-      [initialScrollIndex]="initialScrollIndex"
-      [maxToRenderPerBatch]="maxToRenderPerBatch"
-      [updateCellsBatchingPeriod]="updateCellsBatchingPeriod"
-      [windowSize]="windowSize"
-      [maintainVisibleContentPosition]="maintainVisibleContentPosition"
-      [onScroll]="onScroll"
-      [onScrollBeginDrag]="onScrollBeginDrag"
-      [onScrollEndDrag]="onScrollEndDrag"
-      [onMomentumScrollBegin]="onMomentumScrollBegin"
-      [onMomentumScrollEnd]="onMomentumScrollEnd"
-      [scrollEventThrottle]="scrollEventThrottle"
-      [keyboardShouldPersistTaps]="keyboardShouldPersistTaps"
-      [keyboardDismissMode]="keyboardDismissMode"
-      [removeClippedSubviews]="removeClippedSubviews"
-      [nestedScrollEnabled]="nestedScrollEnabled"
-      [style]="resolvedStyle"
-      [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"
-      (accessibilityAction)="resolvedOnAccessibilityAction?.($event)"
-      (accessibilityTap)="resolvedOnAccessibilityTap?.($event)"
-      (magicTap)="resolvedOnMagicTap?.($event)"
-      (accessibilityEscape)="resolvedOnAccessibilityEscape?.($event)"
-      [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"
-    >
-      <!-- The single synthesized cell template: dispatch per flattened entry tag. -->
-      <ng-template vListItem let-entry let-separators="separators">
-        @switch (entryKind(entry)) {
-          @case ('header') {
-            <ng-container
-              [vListOutlet]="sectionHeaderDir?.templateRef"
-              [vListOutletContext]="sectionContextOf(entry)"
-            ></ng-container>
-          }
-          @case ('footer') {
-            <ng-container
-              [vListOutlet]="sectionFooterDir?.templateRef"
-              [vListOutletContext]="sectionContextOf(entry)"
-            ></ng-container>
-          }
-          @case ('section-separator') {
-            <ng-container
-              [vListOutlet]="sectionSeparatorDir?.templateRef"
-            ></ng-container>
-          }
-          @case ('item') {
-            <ng-container
-              [vListOutlet]="sectionItemDir?.templateRef"
-              [vListOutletContext]="itemContextOf(entry, separators)"
-            ></ng-container>
-          }
-        }
-      </ng-template>
-
-      <!-- list-level slots: forward the app's VirtualizedList directives to the inner list. -->
-      @if (listHeaderDir !== undefined) {
-        <ng-template vListHeader>
-          <ng-container
-            [vListOutlet]="listHeaderDir.templateRef"
-          ></ng-container>
-        </ng-template>
-      }
-      @if (listFooterDir !== undefined) {
-        <ng-template vListFooter>
-          <ng-container
-            [vListOutlet]="listFooterDir.templateRef"
-          ></ng-container>
-        </ng-template>
-      }
-      @if (listEmptyDir !== undefined) {
-        <ng-template vListEmpty>
-          <ng-container [vListOutlet]="listEmptyDir.templateRef"></ng-container>
-        </ng-template>
-      }
-      <!-- item separator: forward, unwrapping each flattened entry back to its ItemT. -->
-      @if (itemSeparatorDir !== undefined) {
-        <ng-template
-          vListSeparator
-          let-highlighted
-          let-leadingItem="leadingItem"
-          let-trailingItem="trailingItem"
-        >
-          <ng-container
-            [vListOutlet]="itemSeparatorDir.templateRef"
-            [vListOutletContext]="
-              itemSeparatorContextOf(highlighted, leadingItem, trailingItem)
-            "
-          ></ng-container>
-        </ng-template>
-      }
-    </VirtualizedList>
-  `,
+                    template: VIRTUALIZED_SECTION_LIST_TEMPLATE,
                 }]
         }], propDecorators: { sections: [{
                 type: Input,
@@ -539,16 +186,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 type: Input
             }], extraData: [{
                 type: Input
-            }], endReached: [{
-                type: Output
             }], onEndReachedThreshold: [{
                 type: Input
-            }], startReached: [{
-                type: Output
             }], onStartReachedThreshold: [{
                 type: Input
-            }], refresh: [{
-                type: Output
             }], refreshing: [{
                 type: Input
             }], progressViewOffset: [{
@@ -597,80 +238,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 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
-            }], accessibilityAction: [{
-                type: Output
-            }], accessibilityTap: [{
-                type: Output
-            }], magicTap: [{
-                type: Output
-            }], accessibilityEscape: [{
-                type: Output
-            }], 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
             }], sectionItemDir: [{
                 type: ContentChild,
                 args: [VSectionItemDirective]