@ng-native/components 0.0.1 → 0.1.1

package/dist/scroll-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-view.js","sourceRoot":"","sources":["../src/scroll-view.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  DestroyRef,\n  ElementRef,\n  afterEveryRender,\n  computed,\n  contentChild,\n  inject,\n  input,\n  output,\n  viewChild,\n} from '@angular/core';\nimport { type HostNode, type NativeSyntheticEvent, nativePlatform } from '@ng-native/fabric';\nimport type { Point, Rect, Size } from './events.ts';\nimport { type KeyboardShouldPersistTaps, dismissKeyboardOnTap } from './keyboard-taps.ts';\nimport { RefreshControl } from './refresh-control.ts';\nimport { StickyHeaders } from './sticky-headers.ts';\nimport { optionalBoolean } from './transforms.ts';\nimport { ScrollViewProps } from './scroll-view-props.ts';\nimport { View } from './view.ts';\n\n/**\n * A scrolling container. Commits as `RCTScrollView`, with the children inside a content view.\n *\n * The native scroll view has no `contentContainerStyle`: RN's `ScrollView.js` wraps children in\n * a content view and applies it there, which is done here. The engine gives the host RN's base\n * style (`overflow: 'scroll'` and the flex defaults); without it the content spills out of the\n * scroll view's bounds.\n *\n * `horizontal` changes two things rather than one, and both are needed. RN swaps its whole base\n * style for `baseHorizontal` - the same defaults but `flexDirection: 'row'` - and puts\n * `contentContainerHorizontal` on the content view. With the host left as a column the content\n * view is stretched to the scroll view's width instead of growing past it, so there is nothing to\n * scroll to and a sideways drag does nothing at all. It looks like a scroll view that simply has\n * too little in it.\n *\n * Keyboard policy is the other half of what `ScrollView.js` does in JavaScript. With a text\n * input focused, a tap elsewhere in the scroll view dismisses the keyboard and goes no further\n * (`keyboardShouldPersistTaps: 'never'`, the default), reaches the child first and dismisses only\n * if nothing handled it (`'handled'`), or never dismisses (`'always'`).\n *\n * `stickyHeaderIndices` pins those children of the content to the leading edge, each until the\n * next pushes it off. It is JavaScript in RN as well; see `StickyHeaders`.\n *\n * Events are element events: `(scroll)`, `(scrollBeginDrag)`, `(scrollEndDrag)`,\n * `(momentumScrollBegin)`, `(momentumScrollEnd)`, `(scrollToTop)`. `(contentSizeChange)` is an\n * output, measured from the content view's layout as RN does.\n */\n@Component({\n  selector: 'scroll-view',\n  exportAs: 'scrollView',\n  imports: [View],\n  // `collapsable: false` is load-bearing, not a hint. Fabric flattens views whose props are\n  // layout-only, and a content container with just padding qualifies: it gets no UIView at all.\n  // Touches in its empty areas then land on the scroll view itself, which does not scroll from a\n  // direct hit, so dragging anywhere the children do not cover silently does nothing. RN sets the\n  // same flag on its content container for the same reason.\n  //\n  // A refresh control is the scroll view's own child, before the content view, as RN's\n  // ScrollView.js commits it. On iOS it finds its scroll view once, when it is inserted, and\n  // Fabric mounts bottom-up: inside the content view it would look before that view was in the\n  // scroll view, and never attach.\n  template: `\n    <ng-content select=\"refresh-control\" />\n    <view #content [style]=\"contentStyle()\" collapsable=\"false\" (layout)=\"onContentLayout($event)\">\n      <ng-content />\n    </view>\n  `,\n  host: {\n    // The base style's direction, which `horizontal` decides. A top-level prop rather than a\n    // host `[style]`, so the caller's own `[style]` still applies over it as it does in RN.\n    '[flexDirection]': \"horizontal() ? 'row' : 'column'\",\n    '[horizontal]': 'horizontal()',\n    '[contentOffset]': 'contentOffset()',\n    '[maintainVisibleContentPosition]': 'maintainVisibleContentPosition()',\n    '[scrollEventThrottle]': 'resolvedThrottle()',\n    '[nestedScrollEnabled]': 'resolvedNestedScroll()',\n  },\n})\nexport class ScrollView extends ScrollViewProps {\n  /** Styles for the view that holds the children, e.g. padding and gap. */\n  readonly contentContainerStyle = input<Record<string, unknown>>();\n\n  /**\n   * The content view's style, with the row direction a horizontal scroll view needs.\n   *\n   * RN's `contentContainerHorizontal`, and in the same order: the caller's own style is applied\n   * over it, so a horizontal scroll view whose content really should stack in a column can still\n   * say so.\n   */\n  protected readonly contentStyle = computed(() =>\n    this.horizontal()\n      ? { flexDirection: 'row', ...this.contentContainerStyle() }\n      : this.contentContainerStyle(),\n  );\n  /** Lay children out in a row and scroll sideways. */\n  readonly horizontal = input(undefined, { transform: optionalBoolean });\n  /** Where the content starts, before the user scrolls. */\n  readonly contentOffset = input<Point>();\n  /** Keep what is on screen still when content is added above it. */\n  readonly maintainVisibleContentPosition = input<{\n    readonly minIndexForVisible: number;\n    readonly autoscrollToTopThreshold?: number;\n  }>();\n  /** What a tap does with the keyboard up. See the class note. Defaults to `never`. */\n  readonly keyboardShouldPersistTaps = input<KeyboardShouldPersistTaps>('never');\n  /** Android: cooperate with a scrolling ancestor. */\n  readonly nestedScrollEnabled = input(undefined, { transform: optionalBoolean });\n\n  /** Children of the content, by position, that stick to the leading edge while it scrolls. */\n  readonly stickyHeaderIndices = input<readonly number[]>([]);\n\n  /** The content view's size changed; the value is its new width and height. */\n  readonly contentSizeChange = output<Size>();\n\n  private readonly refreshControl = contentChild(RefreshControl);\n  private readonly content = viewChild.required('content', { read: ElementRef });\n  private readonly sticky = new StickyHeaders(this.engine, this.node, () => !!this.horizontal());\n\n  /** RN asks for every scroll event while anything is sticky, which is what keeps it pinned. */\n  protected readonly resolvedThrottle = computed(() =>\n    this.stickyHeaderIndices().length > 0 ? 1 : this.scrollEventThrottle(),\n  );\n\n  /**\n   * RN's `nestedScrollEnabled ?? true` for a scroll view inside Android's swipe layout: the scroll\n   * view has to see a drag before the layout wrapped around it does, or every drag is a pull.\n   */\n  protected readonly resolvedNestedScroll = computed(\n    () =>\n      this.nestedScrollEnabled() ??\n      (nativePlatform() === 'android' && this.refreshControl() ? true : undefined),\n  );\n\n  constructor() {\n    super();\n    const stop = dismissKeyboardOnTap(this.engine, this.node, () =>\n      this.keyboardShouldPersistTaps(),\n    );\n    inject(DestroyRef).onDestroy(stop);\n    this.trackStickyHeaders();\n  }\n\n  /**\n   * Sticky children are found again after each pass, because a pass can add or move them, and the\n   * scroll offset is listened for only while there are any.\n   */\n  private trackStickyHeaders(): void {\n    let stopScroll: (() => void) | null = null;\n    afterEveryRender(() => {\n      const indices = this.stickyHeaderIndices();\n      if (indices.length === 0 && !stopScroll) return;\n      this.sticky.track(this.content().nativeElement as HostNode, indices);\n      if (indices.length > 0 && !stopScroll) {\n        stopScroll = this.engine.setEventListener(this.node, 'topScroll', (event) => {\n          const offset = (event as NativeSyntheticEvent<{ contentOffset?: Point }>).nativeEvent\n            ?.contentOffset;\n          this.sticky.scrolled((this.horizontal() ? offset?.x : offset?.y) ?? 0);\n        });\n      } else if (indices.length === 0 && stopScroll) {\n        stopScroll();\n        stopScroll = null;\n      }\n    });\n    inject(DestroyRef).onDestroy(() => {\n      stopScroll?.();\n      this.sticky.destroy();\n    });\n  }\n\n  /** Scroll to a position. */\n  scrollTo(options: { x?: number; y?: number; animated?: boolean }): void {\n    const { x = 0, y = 0, animated = true } = options;\n    this.engine.dispatchCommand(this.node, 'scrollTo', [x, y, animated]);\n  }\n\n  scrollToEnd(options: { animated?: boolean } = {}): void {\n    this.engine.dispatchCommand(this.node, 'scrollToEnd', [options.animated ?? true]);\n  }\n\n  /** Briefly show the scroll indicators, to hint that there is more. */\n  flashScrollIndicators(): void {\n    this.engine.dispatchCommand(this.node, 'flashScrollIndicators');\n  }\n\n  /** iOS: zoom so that a rectangle of the content fills the viewport. */\n  zoomToRect(rect: Rect, animated = true): void {\n    this.engine.dispatchCommand(this.node, 'zoomToRect', [rect, animated]);\n  }\n\n  protected onContentLayout(event: NativeSyntheticEvent<{ layout?: Size }>): void {\n    const layout = event.nativeEvent?.layout;\n    if (layout) this.contentSizeChange.emit({ width: layout.width, height: layout.height });\n  }\n}\n"]}

package/dist/section-list.d.ts

@@ -0,0 +1,146 @@
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+/** A section as RN's SectionList takes it: its rows in `data`, plus whatever else it carries. */
+export interface SectionListSection<T> {
+    readonly key?: string;
+    readonly title?: string;
+    readonly data: readonly T[];
+}
+/** What a section header or footer template is given. */
+export interface SectionContext<S> {
+    readonly $implicit: S;
+    readonly section: S;
+    readonly sectionIndex: number;
+}
+/** What an item template is given. `index` counts within the section, as `renderItem` does. */
+export interface SectionItemContext<T, S> {
+    readonly $implicit: T;
+    readonly item: T;
+    readonly index: number;
+    readonly section: S;
+    readonly sectionIndex: number;
+}
+/** What a separator template is given: the items either side of it, in the same section. */
+export interface SectionSeparatorContext<T, S> {
+    readonly $implicit: T;
+    readonly leadingItem: T;
+    readonly trailingItem: T;
+    readonly section: S;
+}
+/** `<ng-template sectionHeader let-section>`: RN's `renderSectionHeader`. */
+export declare class SectionHeader<S = unknown> {
+    readonly template: TemplateRef<SectionContext<S>>;
+    static ngTemplateContextGuard<S>(_directive: SectionHeader<S>, context: unknown): context is SectionContext<S>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SectionHeader<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SectionHeader<any>, "ng-template[sectionHeader]", never, {}, {}, never, never, true, never>;
+}
+/** `<ng-template sectionFooter let-section>`: RN's `renderSectionFooter`. */
+export declare class SectionFooter<S = unknown> {
+    readonly template: TemplateRef<SectionContext<S>>;
+    static ngTemplateContextGuard<S>(_directive: SectionFooter<S>, context: unknown): context is SectionContext<S>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SectionFooter<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SectionFooter<any>, "ng-template[sectionFooter]", never, {}, {}, never, never, true, never>;
+}
+/** `<ng-template sectionItem let-item let-index="index">`: RN's `renderItem`. */
+export declare class SectionItem<T = unknown, S = unknown> {
+    readonly template: TemplateRef<SectionItemContext<T, S>>;
+    static ngTemplateContextGuard<T, S>(_directive: SectionItem<T, S>, context: unknown): context is SectionItemContext<T, S>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SectionItem<any, any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SectionItem<any, any>, "ng-template[sectionItem]", never, {}, {}, never, never, true, never>;
+}
+/** `<ng-template sectionSeparator let-leading>`: RN's `ItemSeparatorComponent`. */
+export declare class SectionSeparator<T = unknown, S = unknown> {
+    readonly template: TemplateRef<SectionSeparatorContext<T, S>>;
+    static ngTemplateContextGuard<T, S>(_directive: SectionSeparator<T, S>, context: unknown): context is SectionSeparatorContext<T, S>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SectionSeparator<any, any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SectionSeparator<any, any>, "ng-template[sectionSeparator]", never, {}, {}, never, never, true, never>;
+}
+/** One row of the flattened list. */
+export type SectionRow<T, S> = {
+    readonly kind: 'header' | 'footer';
+    readonly context: SectionContext<S>;
+    readonly separator: null;
+} | {
+    readonly kind: 'item';
+    readonly context: SectionItemContext<T, S>;
+    /** Null for a section's last item, which RN draws no separator after. */
+    readonly separator: SectionSeparatorContext<T, S> | null;
+};
+/**
+ * Flatten sections into the rows RN's `VirtualizedSectionList` gives its list: for each section a
+ * header, its items, then a footer. The header and footer rows are there whether or not anything
+ * is drawn in them, as in RN, which is what keeps `scrollToLocation`'s arithmetic the same.
+ */
+export declare function flattenSections<T, S extends SectionListSection<T>>(sections: readonly S[]): SectionRow<T, S>[];
+type Height<A extends unknown[]> = number | ((...args: A) => number);
+/**
+ * RN's SectionList: sections of items, each with a header and footer, over `<virtual-list>`.
+ *
+ * RN's own is a VirtualizedList over flattened rows, and so is this. Sections become one list of
+ * header, item and footer rows, the rows are placed by `<virtual-list>`'s variable-height windowing,
+ * and this component draws each from the caller's templates:
+ *
+ * ```html
+ * <section-list [sections]="sections" [itemHeight]="44" [sectionHeaderHeight]="28">
+ *   <ng-template sectionHeader let-section><text>{{ section.title }}</text></ng-template>
+ *   <ng-template sectionItem let-item><text>{{ item }}</text></ng-template>
+ *   <ng-template sectionSeparator><view [style]="line"></view></ng-template>
+ * </section-list>
+ * ```
+ *
+ * Rows are fixed height, as `getItemLayout` makes them in RN: `itemHeight`, `sectionHeaderHeight`
+ * and `sectionFooterHeight` are numbers or functions. An item's height includes its separator,
+ * which is drawn at the bottom of the item's slot and only between items of the same section.
+ *
+ * `stickySectionHeadersEnabled` pins the current section's header until the next pushes it off.
+ * It defaults to on for iOS and off for Android, as RN's does. `listHeader` and `listFooter`
+ * content and a `<refresh-control>` pass through to the list.
+ *
+ * ponytail: no `SectionSeparatorComponent`, no `horizontal` or `inverted`, and no viewability
+ * events. The host is a plain view with the list filling it, where RN's host is the scroll view.
+ */
+export declare class SectionList<T, S extends SectionListSection<T> = SectionListSection<T>> {
+    readonly sections: import("@angular/core").InputSignal<readonly S[]>;
+    /** Each item's height, separator included. */
+    readonly itemHeight: import("@angular/core").InputSignal<Height<[item: T, index: number, section: S]>>;
+    readonly sectionHeaderHeight: import("@angular/core").InputSignal<Height<[section: S]>>;
+    readonly sectionFooterHeight: import("@angular/core").InputSignal<Height<[section: S]>>;
+    /** Pin the current section's header. Defaults to true on iOS and false on Android, as RN. */
+    readonly stickySectionHeadersEnabled: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    readonly overscan: import("@angular/core").InputSignalWithTransform<number, unknown>;
+    readonly endReachedThreshold: import("@angular/core").InputSignalWithTransform<number, unknown>;
+    /** The end of the last section is within `endReachedThreshold`. See `<virtual-list>`. */
+    readonly endReached: import("@angular/core").OutputEmitterRef<{
+        distanceFromEnd: number;
+    }>;
+    protected readonly header: import("@angular/core").Signal<SectionHeader<S> | undefined>;
+    protected readonly footer: import("@angular/core").Signal<SectionFooter<S> | undefined>;
+    protected readonly item: import("@angular/core").Signal<SectionItem<T, S> | undefined>;
+    protected readonly separator: import("@angular/core").Signal<SectionSeparator<T, S> | undefined>;
+    private readonly list;
+    protected readonly fill: {
+        flex: number;
+    };
+    /** The item fills its slot above the separator, as RN's cell puts the separator after it. */
+    protected readonly cell: {
+        flex: number;
+    };
+    protected readonly rows: import("@angular/core").Signal<SectionRow<T, S>[]>;
+    private readonly sticky;
+    /** The header rows, pinned in turn, when headers stick and there is a header to draw. */
+    protected readonly stickyRows: import("@angular/core").Signal<number[]>;
+    protected readonly rowHeight: (row: SectionRow<T, S>) => number;
+    /**
+     * Scroll to an item, RN's way: `itemIndex` 0 is the section's header and 1 its first item, and
+     * with sticky headers the header's height is allowed for so the item is not hidden under it.
+     */
+    scrollToLocation(options: {
+        sectionIndex: number;
+        itemIndex: number;
+        viewOffset?: number;
+        animated?: boolean;
+    }): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SectionList<any, any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SectionList<any, any>, "section-list", ["sectionList"], { "sections": { "alias": "sections"; "required": true; "isSignal": true; }; "itemHeight": { "alias": "itemHeight"; "required": true; "isSignal": true; }; "sectionHeaderHeight": { "alias": "sectionHeaderHeight"; "required": false; "isSignal": true; }; "sectionFooterHeight": { "alias": "sectionFooterHeight"; "required": false; "isSignal": true; }; "stickySectionHeadersEnabled": { "alias": "stickySectionHeadersEnabled"; "required": false; "isSignal": true; }; "overscan": { "alias": "overscan"; "required": false; "isSignal": true; }; "endReachedThreshold": { "alias": "endReachedThreshold"; "required": false; "isSignal": true; }; }, { "endReached": "endReached"; }, ["header", "footer", "item", "separator"], ["refresh-control", "[listHeader]", "*", "[listFooter]"], true, never>;
+}
+export {};

package/dist/section-list.js

@@ -0,0 +1,300 @@
+import { Component, Directive, TemplateRef, computed, contentChild, inject, input, numberAttribute, output, viewChild, } from '@angular/core';
+import { nativePlatform } from '@ng-native/fabric';
+import { TemplateSlot } from "./template-slot.js";
+import { optionalBoolean } from "./transforms.js";
+import { View } from "./view.js";
+import { VirtualList } from "./virtual-list.js";
+import * as i0 from "@angular/core";
+/** `<ng-template sectionHeader let-section>`: RN's `renderSectionHeader`. */
+export class SectionHeader {
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: SectionHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: SectionHeader, isStandalone: true, selector: "ng-template[sectionHeader]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: SectionHeader, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[sectionHeader]' }]
+        }] });
+/** `<ng-template sectionFooter let-section>`: RN's `renderSectionFooter`. */
+export class SectionFooter {
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: SectionFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: SectionFooter, isStandalone: true, selector: "ng-template[sectionFooter]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: SectionFooter, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[sectionFooter]' }]
+        }] });
+/** `<ng-template sectionItem let-item let-index="index">`: RN's `renderItem`. */
+export class SectionItem {
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: SectionItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: SectionItem, isStandalone: true, selector: "ng-template[sectionItem]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: SectionItem, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[sectionItem]' }]
+        }] });
+/** `<ng-template sectionSeparator let-leading>`: RN's `ItemSeparatorComponent`. */
+export class SectionSeparator {
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: SectionSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: SectionSeparator, isStandalone: true, selector: "ng-template[sectionSeparator]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: SectionSeparator, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[sectionSeparator]' }]
+        }] });
+/**
+ * Flatten sections into the rows RN's `VirtualizedSectionList` gives its list: for each section a
+ * header, its items, then a footer. The header and footer rows are there whether or not anything
+ * is drawn in them, as in RN, which is what keeps `scrollToLocation`'s arithmetic the same.
+ */
+export function flattenSections(sections) {
+    const rows = [];
+    sections.forEach((section, sectionIndex) => {
+        const context = { $implicit: section, section, sectionIndex };
+        rows.push({ kind: 'header', context, separator: null });
+        const data = section.data;
+        data.forEach((item, index) => {
+            const trailingItem = data[index + 1];
+            rows.push({
+                kind: 'item',
+                context: { $implicit: item, item, index, section, sectionIndex },
+                separator: index < data.length - 1
+                    ? { $implicit: item, leadingItem: item, trailingItem: trailingItem, section }
+                    : null,
+            });
+        });
+        rows.push({ kind: 'footer', context, separator: null });
+    });
+    return rows;
+}
+const measure = (height, ...args) => typeof height === 'number' ? height : height(...args);
+/**
+ * RN's SectionList: sections of items, each with a header and footer, over `<virtual-list>`.
+ *
+ * RN's own is a VirtualizedList over flattened rows, and so is this. Sections become one list of
+ * header, item and footer rows, the rows are placed by `<virtual-list>`'s variable-height windowing,
+ * and this component draws each from the caller's templates:
+ *
+ * ```html
+ * <section-list [sections]="sections" [itemHeight]="44" [sectionHeaderHeight]="28">
+ *   <ng-template sectionHeader let-section><text>{{ section.title }}</text></ng-template>
+ *   <ng-template sectionItem let-item><text>{{ item }}</text></ng-template>
+ *   <ng-template sectionSeparator><view [style]="line"></view></ng-template>
+ * </section-list>
+ * ```
+ *
+ * Rows are fixed height, as `getItemLayout` makes them in RN: `itemHeight`, `sectionHeaderHeight`
+ * and `sectionFooterHeight` are numbers or functions. An item's height includes its separator,
+ * which is drawn at the bottom of the item's slot and only between items of the same section.
+ *
+ * `stickySectionHeadersEnabled` pins the current section's header until the next pushes it off.
+ * It defaults to on for iOS and off for Android, as RN's does. `listHeader` and `listFooter`
+ * content and a `<refresh-control>` pass through to the list.
+ *
+ * ponytail: no `SectionSeparatorComponent`, no `horizontal` or `inverted`, and no viewability
+ * events. The host is a plain view with the list filling it, where RN's host is the scroll view.
+ */
+export class SectionList {
+    sections = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []));
+    /** Each item's height, separator included. */
+    itemHeight = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemHeight" }] : /* istanbul ignore next */ []));
+    sectionHeaderHeight = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sectionHeaderHeight" }] : /* istanbul ignore next */ []));
+    sectionFooterHeight = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sectionFooterHeight" }] : /* istanbul ignore next */ []));
+    /** Pin the current section's header. Defaults to true on iOS and false on Android, as RN. */
+    stickySectionHeadersEnabled = input(undefined, { ...(ngDevMode ? { debugName: "stickySectionHeadersEnabled" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    overscan = input(4, { ...(ngDevMode ? { debugName: "overscan" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    endReachedThreshold = input(2, { ...(ngDevMode ? { debugName: "endReachedThreshold" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** The end of the last section is within `endReachedThreshold`. See `<virtual-list>`. */
+    endReached = output();
+    header = contentChild(SectionHeader, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
+    footer = contentChild(SectionFooter, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "footer" }] : /* istanbul ignore next */ []));
+    item = contentChild(SectionItem, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
+    separator = contentChild(SectionSeparator, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
+    list = viewChild.required('list', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "list" }] : /* istanbul ignore next */ []));
+    fill = { flex: 1 };
+    /** The item fills its slot above the separator, as RN's cell puts the separator after it. */
+    cell = { flex: 1 };
+    rows = computed(() => flattenSections(this.sections()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    sticky = computed(() => this.stickySectionHeadersEnabled() ?? nativePlatform() === 'ios', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sticky" }] : /* istanbul ignore next */ []));
+    /** The header rows, pinned in turn, when headers stick and there is a header to draw. */
+    stickyRows = computed(() => {
+        if (!this.sticky() || !this.header())
+            return [];
+        const indices = [];
+        this.rows().forEach((row, index) => {
+            if (row.kind === 'header')
+                indices.push(index);
+        });
+        return indices;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stickyRows" }] : /* istanbul ignore next */ []));
+    rowHeight = (row) => {
+        const { section } = row.context;
+        if (row.kind === 'item') {
+            return measure(this.itemHeight(), row.context.item, row.context.index, section);
+        }
+        return row.kind === 'header'
+            ? measure(this.sectionHeaderHeight(), section)
+            : measure(this.sectionFooterHeight(), section);
+    };
+    /**
+     * Scroll to an item, RN's way: `itemIndex` 0 is the section's header and 1 its first item, and
+     * with sticky headers the header's height is allowed for so the item is not hidden under it.
+     */
+    scrollToLocation(options) {
+        const sections = this.sections();
+        let index = options.itemIndex;
+        for (let i = 0; i < options.sectionIndex; i++)
+            index += sections[i].data.length + 2;
+        let viewOffset = options.viewOffset ?? 0;
+        const section = sections[options.sectionIndex];
+        if (options.itemIndex > 0 && this.sticky() && section) {
+            viewOffset += measure(this.sectionHeaderHeight(), section);
+        }
+        this.list().scrollToIndex({ index, viewOffset, animated: options.animated });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: SectionList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: SectionList, isStandalone: true, selector: "section-list", inputs: { sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: true, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: true, transformFunction: null }, sectionHeaderHeight: { classPropertyName: "sectionHeaderHeight", publicName: "sectionHeaderHeight", isSignal: true, isRequired: false, transformFunction: null }, sectionFooterHeight: { classPropertyName: "sectionFooterHeight", publicName: "sectionFooterHeight", isSignal: true, isRequired: false, transformFunction: null }, stickySectionHeadersEnabled: { classPropertyName: "stickySectionHeadersEnabled", publicName: "stickySectionHeadersEnabled", isSignal: true, isRequired: false, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", isSignal: true, isRequired: false, transformFunction: null }, endReachedThreshold: { classPropertyName: "endReachedThreshold", publicName: "endReachedThreshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { endReached: "endReached" }, queries: [{ propertyName: "header", first: true, predicate: SectionHeader, descendants: true, isSignal: true }, { propertyName: "footer", first: true, predicate: SectionFooter, descendants: true, isSignal: true }, { propertyName: "item", first: true, predicate: SectionItem, descendants: true, isSignal: true }, { propertyName: "separator", first: true, predicate: SectionSeparator, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true, isSignal: true }], exportAs: ["sectionList"], ngImport: i0, template: `
+    <virtual-list
+      #list
+      [items]="rows()"
+      [itemHeight]="rowHeight"
+      [stickyIndices]="stickyRows()"
+      [overscan]="overscan()"
+      [endReachedThreshold]="endReachedThreshold()"
+      [style]="fill"
+      (endReached)="endReached.emit($event)"
+    >
+      <ng-content select="refresh-control" ngProjectAs="refresh-control" />
+      <view listHeader><ng-content select="[listHeader]" /></view>
+      <ng-content />
+      @for (row of list.window(); track row.index) {
+        <view [style]="row.style">
+          @switch (row.item.kind) {
+            @case ('header') {
+              @if (header(); as header) {
+                <ng-container
+                  [templateSlot]="header.template"
+                  [templateSlotContext]="row.item.context"
+                />
+              }
+            }
+            @case ('footer') {
+              @if (footer(); as footer) {
+                <ng-container
+                  [templateSlot]="footer.template"
+                  [templateSlotContext]="row.item.context"
+                />
+              }
+            }
+            @case ('item') {
+              <view [style]="cell">
+                @if (item(); as item) {
+                  <ng-container
+                    [templateSlot]="item.template"
+                    [templateSlotContext]="row.item.context"
+                  />
+                }
+              </view>
+              @if (separator(); as separator) {
+                @if (row.item.separator; as gap) {
+                  <ng-container [templateSlot]="separator.template" [templateSlotContext]="gap" />
+                }
+              }
+            }
+          }
+        </view>
+      }
+      <view listFooter><ng-content select="[listFooter]" /></view>
+    </virtual-list>
+  `, isInline: true, dependencies: [{ kind: "directive", type: TemplateSlot, selector: "[templateSlot]", inputs: ["templateSlot", "templateSlotContext"] }, { kind: "directive", type: View, selector: "view" }, { kind: "component", type: VirtualList, selector: "virtual-list", inputs: ["items", "itemHeight", "estimatedItemHeight", "keyExtractor", "itemType", "maintainVisibleContentPosition", "overscan", "endReachedThreshold", "horizontal", "inverted", "stickyIndices", "stickyHeader", "keyboardShouldPersistTaps", "itemVisiblePercentThreshold"], outputs: ["endReached", "viewableItemsChanged"], exportAs: ["virtualList"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: SectionList, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'section-list',
+                    exportAs: 'sectionList',
+                    imports: [TemplateSlot, View, VirtualList],
+                    template: `
+    <virtual-list
+      #list
+      [items]="rows()"
+      [itemHeight]="rowHeight"
+      [stickyIndices]="stickyRows()"
+      [overscan]="overscan()"
+      [endReachedThreshold]="endReachedThreshold()"
+      [style]="fill"
+      (endReached)="endReached.emit($event)"
+    >
+      <ng-content select="refresh-control" ngProjectAs="refresh-control" />
+      <view listHeader><ng-content select="[listHeader]" /></view>
+      <ng-content />
+      @for (row of list.window(); track row.index) {
+        <view [style]="row.style">
+          @switch (row.item.kind) {
+            @case ('header') {
+              @if (header(); as header) {
+                <ng-container
+                  [templateSlot]="header.template"
+                  [templateSlotContext]="row.item.context"
+                />
+              }
+            }
+            @case ('footer') {
+              @if (footer(); as footer) {
+                <ng-container
+                  [templateSlot]="footer.template"
+                  [templateSlotContext]="row.item.context"
+                />
+              }
+            }
+            @case ('item') {
+              <view [style]="cell">
+                @if (item(); as item) {
+                  <ng-container
+                    [templateSlot]="item.template"
+                    [templateSlotContext]="row.item.context"
+                  />
+                }
+              </view>
+              @if (separator(); as separator) {
+                @if (row.item.separator; as gap) {
+                  <ng-container [templateSlot]="separator.template" [templateSlotContext]="gap" />
+                }
+              }
+            }
+          }
+        </view>
+      }
+      <view listFooter><ng-content select="[listFooter]" /></view>
+    </virtual-list>
+  `,
+                }]
+        }], propDecorators: { sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: true }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: true }] }], sectionHeaderHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionHeaderHeight", required: false }] }], sectionFooterHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionFooterHeight", required: false }] }], stickySectionHeadersEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickySectionHeadersEnabled", required: false }] }], overscan: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscan", required: false }] }], endReachedThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "endReachedThreshold", required: false }] }], endReached: [{ type: i0.Output, args: ["endReached"] }], header: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionHeader), { isSignal: true }] }], footer: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionFooter), { isSignal: true }] }], item: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionItem), { isSignal: true }] }], separator: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionSeparator), { isSignal: true }] }], list: [{ type: i0.ViewChild, args: ['list', { isSignal: true }] }] } });
+//# sourceMappingURL=section-list.js.map

package/dist/section-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-list.js","sourceRoot":"","sources":["../src/section-list.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Directive,\n  TemplateRef,\n  computed,\n  contentChild,\n  inject,\n  input,\n  numberAttribute,\n  output,\n  viewChild,\n} from '@angular/core';\nimport { nativePlatform } from '@ng-native/fabric';\nimport { TemplateSlot } from './template-slot.ts';\nimport { optionalBoolean } from './transforms.ts';\nimport { View } from './view.ts';\nimport { VirtualList } from './virtual-list.ts';\n\n/** A section as RN's SectionList takes it: its rows in `data`, plus whatever else it carries. */\nexport interface SectionListSection<T> {\n  readonly key?: string;\n  readonly title?: string;\n  readonly data: readonly T[];\n}\n\n/** What a section header or footer template is given. */\nexport interface SectionContext<S> {\n  readonly $implicit: S;\n  readonly section: S;\n  readonly sectionIndex: number;\n}\n\n/** What an item template is given. `index` counts within the section, as `renderItem` does. */\nexport interface SectionItemContext<T, S> {\n  readonly $implicit: T;\n  readonly item: T;\n  readonly index: number;\n  readonly section: S;\n  readonly sectionIndex: number;\n}\n\n/** What a separator template is given: the items either side of it, in the same section. */\nexport interface SectionSeparatorContext<T, S> {\n  readonly $implicit: T;\n  readonly leadingItem: T;\n  readonly trailingItem: T;\n  readonly section: S;\n}\n\n/** `<ng-template sectionHeader let-section>`: RN's `renderSectionHeader`. */\n@Directive({ selector: 'ng-template[sectionHeader]' })\nexport class SectionHeader<S = unknown> {\n  readonly template = inject<TemplateRef<SectionContext<S>>>(TemplateRef);\n\n  static ngTemplateContextGuard<S>(\n    _directive: SectionHeader<S>,\n    context: unknown,\n  ): context is SectionContext<S> {\n    return true;\n  }\n}\n\n/** `<ng-template sectionFooter let-section>`: RN's `renderSectionFooter`. */\n@Directive({ selector: 'ng-template[sectionFooter]' })\nexport class SectionFooter<S = unknown> {\n  readonly template = inject<TemplateRef<SectionContext<S>>>(TemplateRef);\n\n  static ngTemplateContextGuard<S>(\n    _directive: SectionFooter<S>,\n    context: unknown,\n  ): context is SectionContext<S> {\n    return true;\n  }\n}\n\n/** `<ng-template sectionItem let-item let-index=\"index\">`: RN's `renderItem`. */\n@Directive({ selector: 'ng-template[sectionItem]' })\nexport class SectionItem<T = unknown, S = unknown> {\n  readonly template = inject<TemplateRef<SectionItemContext<T, S>>>(TemplateRef);\n\n  static ngTemplateContextGuard<T, S>(\n    _directive: SectionItem<T, S>,\n    context: unknown,\n  ): context is SectionItemContext<T, S> {\n    return true;\n  }\n}\n\n/** `<ng-template sectionSeparator let-leading>`: RN's `ItemSeparatorComponent`. */\n@Directive({ selector: 'ng-template[sectionSeparator]' })\nexport class SectionSeparator<T = unknown, S = unknown> {\n  readonly template = inject<TemplateRef<SectionSeparatorContext<T, S>>>(TemplateRef);\n\n  static ngTemplateContextGuard<T, S>(\n    _directive: SectionSeparator<T, S>,\n    context: unknown,\n  ): context is SectionSeparatorContext<T, S> {\n    return true;\n  }\n}\n\n/** One row of the flattened list. */\nexport type SectionRow<T, S> =\n  | {\n      readonly kind: 'header' | 'footer';\n      readonly context: SectionContext<S>;\n      readonly separator: null;\n    }\n  | {\n      readonly kind: 'item';\n      readonly context: SectionItemContext<T, S>;\n      /** Null for a section's last item, which RN draws no separator after. */\n      readonly separator: SectionSeparatorContext<T, S> | null;\n    };\n\n/**\n * Flatten sections into the rows RN's `VirtualizedSectionList` gives its list: for each section a\n * header, its items, then a footer. The header and footer rows are there whether or not anything\n * is drawn in them, as in RN, which is what keeps `scrollToLocation`'s arithmetic the same.\n */\nexport function flattenSections<T, S extends SectionListSection<T>>(\n  sections: readonly S[],\n): SectionRow<T, S>[] {\n  const rows: SectionRow<T, S>[] = [];\n  sections.forEach((section, sectionIndex) => {\n    const context = { $implicit: section, section, sectionIndex };\n    rows.push({ kind: 'header', context, separator: null });\n    const data = section.data;\n    data.forEach((item, index) => {\n      const trailingItem = data[index + 1];\n      rows.push({\n        kind: 'item',\n        context: { $implicit: item, item, index, section, sectionIndex },\n        separator:\n          index < data.length - 1\n            ? { $implicit: item, leadingItem: item, trailingItem: trailingItem!, section }\n            : null,\n      });\n    });\n    rows.push({ kind: 'footer', context, separator: null });\n  });\n  return rows;\n}\n\ntype Height<A extends unknown[]> = number | ((...args: A) => number);\n\nconst measure = <A extends unknown[]>(height: Height<A>, ...args: A): number =>\n  typeof height === 'number' ? height : height(...args);\n\n/**\n * RN's SectionList: sections of items, each with a header and footer, over `<virtual-list>`.\n *\n * RN's own is a VirtualizedList over flattened rows, and so is this. Sections become one list of\n * header, item and footer rows, the rows are placed by `<virtual-list>`'s variable-height windowing,\n * and this component draws each from the caller's templates:\n *\n * ```html\n * <section-list [sections]=\"sections\" [itemHeight]=\"44\" [sectionHeaderHeight]=\"28\">\n *   <ng-template sectionHeader let-section><text>{{ section.title }}</text></ng-template>\n *   <ng-template sectionItem let-item><text>{{ item }}</text></ng-template>\n *   <ng-template sectionSeparator><view [style]=\"line\"></view></ng-template>\n * </section-list>\n * ```\n *\n * Rows are fixed height, as `getItemLayout` makes them in RN: `itemHeight`, `sectionHeaderHeight`\n * and `sectionFooterHeight` are numbers or functions. An item's height includes its separator,\n * which is drawn at the bottom of the item's slot and only between items of the same section.\n *\n * `stickySectionHeadersEnabled` pins the current section's header until the next pushes it off.\n * It defaults to on for iOS and off for Android, as RN's does. `listHeader` and `listFooter`\n * content and a `<refresh-control>` pass through to the list.\n *\n * ponytail: no `SectionSeparatorComponent`, no `horizontal` or `inverted`, and no viewability\n * events. The host is a plain view with the list filling it, where RN's host is the scroll view.\n */\n@Component({\n  selector: 'section-list',\n  exportAs: 'sectionList',\n  imports: [TemplateSlot, View, VirtualList],\n  template: `\n    <virtual-list\n      #list\n      [items]=\"rows()\"\n      [itemHeight]=\"rowHeight\"\n      [stickyIndices]=\"stickyRows()\"\n      [overscan]=\"overscan()\"\n      [endReachedThreshold]=\"endReachedThreshold()\"\n      [style]=\"fill\"\n      (endReached)=\"endReached.emit($event)\"\n    >\n      <ng-content select=\"refresh-control\" ngProjectAs=\"refresh-control\" />\n      <view listHeader><ng-content select=\"[listHeader]\" /></view>\n      <ng-content />\n      @for (row of list.window(); track row.index) {\n        <view [style]=\"row.style\">\n          @switch (row.item.kind) {\n            @case ('header') {\n              @if (header(); as header) {\n                <ng-container\n                  [templateSlot]=\"header.template\"\n                  [templateSlotContext]=\"row.item.context\"\n                />\n              }\n            }\n            @case ('footer') {\n              @if (footer(); as footer) {\n                <ng-container\n                  [templateSlot]=\"footer.template\"\n                  [templateSlotContext]=\"row.item.context\"\n                />\n              }\n            }\n            @case ('item') {\n              <view [style]=\"cell\">\n                @if (item(); as item) {\n                  <ng-container\n                    [templateSlot]=\"item.template\"\n                    [templateSlotContext]=\"row.item.context\"\n                  />\n                }\n              </view>\n              @if (separator(); as separator) {\n                @if (row.item.separator; as gap) {\n                  <ng-container [templateSlot]=\"separator.template\" [templateSlotContext]=\"gap\" />\n                }\n              }\n            }\n          }\n        </view>\n      }\n      <view listFooter><ng-content select=\"[listFooter]\" /></view>\n    </virtual-list>\n  `,\n})\nexport class SectionList<T, S extends SectionListSection<T> = SectionListSection<T>> {\n  readonly sections = input.required<readonly S[]>();\n  /** Each item's height, separator included. */\n  readonly itemHeight = input.required<Height<[item: T, index: number, section: S]>>();\n  readonly sectionHeaderHeight = input<Height<[section: S]>>(0);\n  readonly sectionFooterHeight = input<Height<[section: S]>>(0);\n  /** Pin the current section's header. Defaults to true on iOS and false on Android, as RN. */\n  readonly stickySectionHeadersEnabled = input(undefined, { transform: optionalBoolean });\n  readonly overscan = input(4, { transform: numberAttribute });\n  readonly endReachedThreshold = input(2, { transform: numberAttribute });\n\n  /** The end of the last section is within `endReachedThreshold`. See `<virtual-list>`. */\n  readonly endReached = output<{ distanceFromEnd: number }>();\n\n  protected readonly header = contentChild<SectionHeader<S>>(SectionHeader);\n  protected readonly footer = contentChild<SectionFooter<S>>(SectionFooter);\n  protected readonly item = contentChild<SectionItem<T, S>>(SectionItem);\n  protected readonly separator = contentChild<SectionSeparator<T, S>>(SectionSeparator);\n  private readonly list = viewChild.required<VirtualList<SectionRow<T, S>>>('list');\n\n  protected readonly fill = { flex: 1 };\n  /** The item fills its slot above the separator, as RN's cell puts the separator after it. */\n  protected readonly cell = { flex: 1 };\n\n  protected readonly rows = computed(() => flattenSections<T, S>(this.sections()));\n\n  private readonly sticky = computed(\n    () => this.stickySectionHeadersEnabled() ?? nativePlatform() === 'ios',\n  );\n\n  /** The header rows, pinned in turn, when headers stick and there is a header to draw. */\n  protected readonly stickyRows = computed(() => {\n    if (!this.sticky() || !this.header()) return [];\n    const indices: number[] = [];\n    this.rows().forEach((row, index) => {\n      if (row.kind === 'header') indices.push(index);\n    });\n    return indices;\n  });\n\n  protected readonly rowHeight = (row: SectionRow<T, S>): number => {\n    const { section } = row.context;\n    if (row.kind === 'item') {\n      return measure(this.itemHeight(), row.context.item, row.context.index, section);\n    }\n    return row.kind === 'header'\n      ? measure(this.sectionHeaderHeight(), section)\n      : measure(this.sectionFooterHeight(), section);\n  };\n\n  /**\n   * Scroll to an item, RN's way: `itemIndex` 0 is the section's header and 1 its first item, and\n   * with sticky headers the header's height is allowed for so the item is not hidden under it.\n   */\n  scrollToLocation(options: {\n    sectionIndex: number;\n    itemIndex: number;\n    viewOffset?: number;\n    animated?: boolean;\n  }): void {\n    const sections = this.sections();\n    let index = options.itemIndex;\n    for (let i = 0; i < options.sectionIndex; i++) index += sections[i]!.data.length + 2;\n    let viewOffset = options.viewOffset ?? 0;\n    const section = sections[options.sectionIndex];\n    if (options.itemIndex > 0 && this.sticky() && section) {\n      viewOffset += measure(this.sectionHeaderHeight(), section);\n    }\n    this.list().scrollToIndex({ index, viewOffset, animated: options.animated });\n  }\n}\n"]}

package/dist/sticky-headers.d.ts

@@ -0,0 +1,41 @@
+import { type HostEngine, type HostNode } from '@ng-native/fabric';
+/**
+ * `stickyHeaderIndices` for `<scroll-view>`, done the way RN's `ScrollView.js` does it.
+ *
+ * There is no native prop for it on either platform. RN wraps each sticky child in
+ * `ScrollViewStickyHeader`, which translates it by the scroll offset past its own position and
+ * stops where the next sticky child would push it off. The same sums run here, over the content
+ * view's element children: control-flow anchors are not children in RN's sense and are skipped,
+ * so an index counts what is committed.
+ *
+ * Each sticky child's position comes from its own layout event, and the translation is written
+ * as its `transform` prop, with RN's `zIndex: 10` so it draws over the content scrolling under
+ * it. A style of the caller's own that sets either wins, as it would in RN.
+ *
+ * Where the host can, native moves each one on every frame the scroll view moves, as RN's
+ * animated interpolation does, and the translation is written only once scrolling pauses: a
+ * translate written from each scroll event lands late, and on a fast fling the header shudders.
+ */
+export declare class StickyHeaders {
+    private readonly engine;
+    private readonly horizontal;
+    private headers;
+    private readonly extents;
+    private readonly listening;
+    /** The translation last written per header, so an unchanged one is not written again. */
+    private readonly written;
+    private readonly drives;
+    private settleTimer;
+    private offset;
+    constructor(engine: HostEngine, scroll: HostNode, horizontal: () => boolean);
+    private readonly scroll;
+    /** Find the sticky children again, after a pass that may have changed them. */
+    track(content: HostNode | undefined, indices: readonly number[]): void;
+    scrolled(offset: number): void;
+    destroy(): void;
+    private measured;
+    private release;
+    private drive;
+    /** `ScrollViewStickyHeader`'s interpolation, as plain arithmetic. */
+    private apply;
+}