@symbiote-native/angular 2.0.1 → 3.0.1

package/README.md

@@ -26,9 +26,9 @@ npm install @symbiote-native/angular react-native @angular/core
 ```
 
 `react-native` and `@angular/core` (**>=20**, for stable zoneless change detection) stay your app's
-own top-level dependencies. There's no `create-symbiote` scaffolder yet, so the AOT pipeline
-(`ngc --watch` alongside Metro — see [Run it](#run-it)) and the Metro config come from
-[`examples/angular`](../../examples/angular) rather than a generator.
+own top-level dependencies. `npx @symbiote-native/cli new` wires the AOT pipeline (`ngc --watch`
+alongside Metro — see [Run it](#run-it)) and the Metro config for a new app; wiring them into an
+existing one still follows [`examples/angular`](../../examples/angular) rather than a generator.
 
 ---
 
@@ -89,7 +89,8 @@ reference canaries, standalone components, zoneless change detection.
 ## Parity — and the one gap
 
 Angular reaches the same 21+ primitives, runtime modules, `Animated` on both drivers, gestures,
-accessibility, and the `VirtualizedList` family as React and Vue. That parity is **structural, not
+accessibility, and the `VirtualizedList` family as React and Vue, verified on-device on iOS and
+Android. That parity is **structural, not
 hand-copied**: the component logic (state machines + render functions) is written **once** in
 `@symbiote-native/components`, and Angular supplies only its lifecycle (`Renderer2` + zoneless change
 detection + the descriptor→`createElement` bridge).

package/babel-register-composed.cjs

@@ -37,15 +37,7 @@ const PRIMITIVE_SELECTORS = new Set([
   'horizontal-scroll-content',
   'text-input',
   'text-input-multiline',
-  // The COMPONENT path's pair. Only a lowering transform may emit the plain tags above — those
-  // carry the engine's TextInput machine, and this adapter's own component runs that state in
-  // its template. See `core/components/src/component-names/shared.ts`.
-  'text-input-managed',
-  'text-input-multiline-managed',
   'switch',
-  // The component path's spelling — same native view, a tag the engine's Switch behavior does
-  // not carry. See `core/components/src/component-names/shared.ts`.
-  'switch-managed',
   // The centering RCTView RN wraps the spinner in — the tag an app writes — plus the native
   // spinner the ActivityIndicator behavior builds under it.
   'activity-indicator',

package/build/angular/callback-host.d.ts

@@ -0,0 +1,25 @@
+import { type OnChanges, type OnDestroy, type SimpleChanges } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * THE SAME NAMES AS A LITERAL, and the duplication is forced rather than chosen.
+ *
+ * ngtsc STATICALLY EVALUATES a decorator's metadata, and a selector built with `.map().join()` is not
+ * something it can evaluate — it reports the class as `Component imports must be standalone
+ * components, directives, pipes, or must be NgModules`, which reads as a missing `standalone: true`
+ * and is not that. Thirty-seven of this adapter's compile-time guards went red on it at once.
+ *
+ * So the selector is written out, and `callback-host-selector.test.ts` holds the two in step.
+ */
+export declare const CALLBACK_ATTRIBUTE_SELECTOR: string;
+/** Exported for the guard alone — the decorator below must spell its own list for ngtsc. */
+export declare const CALLBACK_INPUT_NAMES: readonly string[];
+export declare class SymbioteCallbackHost implements OnChanges, OnDestroy {
+    private readonly renderer;
+    private readonly host;
+    private readonly detector;
+    constructor();
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SymbioteCallbackHost, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SymbioteCallbackHost, "[onAccessibilityAction],[onAccessibilityEscape],[onAccessibilityTap],[onBlur],[onContentSizeChange],[onEndEditing],[onError],[onFocus],[onHoverIn],[onHoverOut],[onKeyPress],[onLayout],[onLoad],[onLoadEnd],[onLoadStart],[onLongPress],[onMagicTap],[onMomentumScrollBegin],[onMomentumScrollEnd],[onMoveShouldSetResponder],[onMoveShouldSetResponderCapture],[onPartialLoad],[onPress],[onPressIn],[onPressMove],[onPressOut],[onProgress],[onRefresh],[onResponderEnd],[onResponderGrant],[onResponderMove],[onResponderReject],[onResponderRelease],[onResponderStart],[onResponderTerminate],[onResponderTerminationRequest],[onScrollBeginDrag],[onScrollEndDrag],[onScrollToTop],[onSelectionChange],[onStartShouldSetResponder],[onStartShouldSetResponderCapture],[onSubmitEditing],[onValueChange]", never, { "onAccessibilityAction": { "alias": "onAccessibilityAction"; "required": false; }; "onAccessibilityEscape": { "alias": "onAccessibilityEscape"; "required": false; }; "onAccessibilityTap": { "alias": "onAccessibilityTap"; "required": false; }; "onBlur": { "alias": "onBlur"; "required": false; }; "onContentSizeChange": { "alias": "onContentSizeChange"; "required": false; }; "onEndEditing": { "alias": "onEndEditing"; "required": false; }; "onError": { "alias": "onError"; "required": false; }; "onFocus": { "alias": "onFocus"; "required": false; }; "onHoverIn": { "alias": "onHoverIn"; "required": false; }; "onHoverOut": { "alias": "onHoverOut"; "required": false; }; "onKeyPress": { "alias": "onKeyPress"; "required": false; }; "onLayout": { "alias": "onLayout"; "required": false; }; "onLoad": { "alias": "onLoad"; "required": false; }; "onLoadEnd": { "alias": "onLoadEnd"; "required": false; }; "onLoadStart": { "alias": "onLoadStart"; "required": false; }; "onLongPress": { "alias": "onLongPress"; "required": false; }; "onMagicTap": { "alias": "onMagicTap"; "required": false; }; "onMomentumScrollBegin": { "alias": "onMomentumScrollBegin"; "required": false; }; "onMomentumScrollEnd": { "alias": "onMomentumScrollEnd"; "required": false; }; "onMoveShouldSetResponder": { "alias": "onMoveShouldSetResponder"; "required": false; }; "onMoveShouldSetResponderCapture": { "alias": "onMoveShouldSetResponderCapture"; "required": false; }; "onPartialLoad": { "alias": "onPartialLoad"; "required": false; }; "onPress": { "alias": "onPress"; "required": false; }; "onPressIn": { "alias": "onPressIn"; "required": false; }; "onPressMove": { "alias": "onPressMove"; "required": false; }; "onPressOut": { "alias": "onPressOut"; "required": false; }; "onProgress": { "alias": "onProgress"; "required": false; }; "onRefresh": { "alias": "onRefresh"; "required": false; }; "onResponderEnd": { "alias": "onResponderEnd"; "required": false; }; "onResponderGrant": { "alias": "onResponderGrant"; "required": false; }; "onResponderMove": { "alias": "onResponderMove"; "required": false; }; "onResponderReject": { "alias": "onResponderReject"; "required": false; }; "onResponderRelease": { "alias": "onResponderRelease"; "required": false; }; "onResponderStart": { "alias": "onResponderStart"; "required": false; }; "onResponderTerminate": { "alias": "onResponderTerminate"; "required": false; }; "onResponderTerminationRequest": { "alias": "onResponderTerminationRequest"; "required": false; }; "onScrollBeginDrag": { "alias": "onScrollBeginDrag"; "required": false; }; "onScrollEndDrag": { "alias": "onScrollEndDrag"; "required": false; }; "onScrollToTop": { "alias": "onScrollToTop"; "required": false; }; "onSelectionChange": { "alias": "onSelectionChange"; "required": false; }; "onStartShouldSetResponder": { "alias": "onStartShouldSetResponder"; "required": false; }; "onStartShouldSetResponderCapture": { "alias": "onStartShouldSetResponderCapture"; "required": false; }; "onSubmitEditing": { "alias": "onSubmitEditing"; "required": false; }; "onValueChange": { "alias": "onValueChange"; "required": false; }; }, {}, never, never, true, never>;
+}

package/build/angular/callback-host.js

@@ -0,0 +1,211 @@
+// The directive that owns a `ChangeDetectorRef` for the elements that actually need one.
+//
+// An `on*` PROP is forwarded to the engine node, and the ENGINE calls it — Angular is told nothing,
+// so a plain field mutation inside the app's handler dirties no view. `createCallbackWrapper` fixes
+// that with `markForCheck`, and until 2026-09-18 the ref it marked came from `SymbioteElement`
+// injecting one on EVERY element, because any element MAY carry a callback.
+//
+// Almost none does. Priced on JavaScriptCore, an injection is ~1.0-2.4 us per element — 10-24 ms
+// over the ten thousand of a thousand-row screen, all of it to build `ViewRef`s nothing reads
+// (`core/engine/cpp/tests/js/angular-directive-cost.itest.ts`, the `ChangeDetectorRef` row).
+//
+// MATCHING IS THE CHEAPER QUESTION THAN INJECTING, and that had to be measured rather than assumed,
+// because the selector below is dozens of alternatives and Angular tries a component's whole
+// directive list against every element it creates. The ladder's `cb-probe` arm carries this exact
+// string WITHOUT matching anything — the state of every element on the benchmark row — so the two
+// halves are priced against each other in one process, rotated, with a resolution bar:
+//
+//   carrying the selector    4.3    5.9   -2.0    5.7   -1.5 ms   inside the bar in four of five
+//   the ChangeDetectorRef    9.7   23.5   13.6   31.3   23.8 ms
+//   the CALLBACK HOST       -3.9   -9.3  -25.5  -25.6  -25.3 ms   all five negative, three outside
+//
+// WHAT IS NOT VERIFIED, said plainly: the ladder's arm carries ONE element directive beside this one,
+// where a real screen carries two dozen, and the `ng-elements` bench arm could not confirm the change
+// at app scale — the machine it was measured on swung its untouched CONTROL from 229 to 566 ms, so
+// nothing quoted off it would have carried a verdict either way. The controlled A/B is the evidence
+// here; the bench-arm confirmation is owed.
+//
+// IT HOLDS NO INPUTS, which is what keeps the change off the public surface. The `on*` props stay
+// declared on `SymbioteElement` and its subclasses, so every type and every forward is unchanged;
+// this directive only needs to BE on the element, and a missing name in its selector costs a change
+// detection mark rather than a prop. `callback-host-selector.test.ts` derives the list from the
+// directives' own declared inputs so it cannot go stale quietly.
+//
+// A LEAF, like `change-detection-flush` and `renderer/value-change`: importing `elements.ts` from
+// here would close a cycle, since that file is what puts this directive in `SYMBIOTE_ELEMENTS`.
+import { ChangeDetectorRef, Directive, ElementRef, Renderer2, inject, } from '@angular/core';
+import { registerViewMarker, unregisterViewMarker, } from './change-detection-flush';
+import * as i0 from "@angular/core";
+/**
+ * Every `on*` input any element directive declares, except the one that fires per FRAME.
+ *
+ * `onScroll` is absent deliberately and not by oversight: with sticky headers RN pins
+ * `scrollEventThrottle` to 1, and `markForCheck` walks to the root, so wrapping it cost the canary
+ * ~37fps. `isWrappableCallback` excludes it, and the guard test asserts this string does too.
+ */
+const CALLBACK_INPUTS = [
+    'onAccessibilityAction',
+    'onAccessibilityEscape',
+    'onAccessibilityTap',
+    'onBlur',
+    'onChangeText',
+    'onContentSizeChange',
+    'onEndEditing',
+    'onError',
+    'onFocus',
+    'onHoverIn',
+    'onHoverOut',
+    'onKeyPress',
+    'onLayout',
+    'onLoad',
+    'onLoadEnd',
+    'onLoadStart',
+    'onLongPress',
+    'onMagicTap',
+    'onMomentumScrollBegin',
+    'onMomentumScrollEnd',
+    'onMoveShouldSetResponder',
+    'onMoveShouldSetResponderCapture',
+    'onPartialLoad',
+    'onPress',
+    'onPressIn',
+    'onPressMove',
+    'onPressOut',
+    'onProgress',
+    'onRefresh',
+    'onResponderEnd',
+    'onResponderGrant',
+    'onResponderMove',
+    'onResponderReject',
+    'onResponderRelease',
+    'onResponderStart',
+    'onResponderTerminate',
+    'onResponderTerminationRequest',
+    'onScrollBeginDrag',
+    'onScrollEndDrag',
+    'onScrollToTop',
+    'onSelectionChange',
+    'onStartShouldSetResponder',
+    'onStartShouldSetResponderCapture',
+    'onSubmitEditing',
+    'onValueChange',
+];
+/**
+ * THE SAME NAMES AS A LITERAL, and the duplication is forced rather than chosen.
+ *
+ * ngtsc STATICALLY EVALUATES a decorator's metadata, and a selector built with `.map().join()` is not
+ * something it can evaluate — it reports the class as `Component imports must be standalone
+ * components, directives, pipes, or must be NgModules`, which reads as a missing `standalone: true`
+ * and is not that. Thirty-seven of this adapter's compile-time guards went red on it at once.
+ *
+ * So the selector is written out, and `callback-host-selector.test.ts` holds the two in step.
+ */
+export const CALLBACK_ATTRIBUTE_SELECTOR = '[onAccessibilityAction],[onAccessibilityEscape],[onAccessibilityTap],[onBlur],' +
+    '[onChangeText],[onContentSizeChange],[onEndEditing],[onError],[onFocus],[onHoverIn],[onHoverOut],' +
+    '[onKeyPress],[onLayout],[onLoad],[onLoadEnd],[onLoadStart],[onLongPress],[onMagicTap],' +
+    '[onMomentumScrollBegin],[onMomentumScrollEnd],[onMoveShouldSetResponder],' +
+    '[onMoveShouldSetResponderCapture],[onPartialLoad],[onPress],[onPressIn],[onPressMove],' +
+    '[onPressOut],[onProgress],[onRefresh],[onResponderEnd],[onResponderGrant],[onResponderMove],' +
+    '[onResponderReject],[onResponderRelease],[onResponderStart],[onResponderTerminate],' +
+    '[onResponderTerminationRequest],[onScrollBeginDrag],[onScrollEndDrag],[onScrollToTop],' +
+    '[onSelectionChange],[onStartShouldSetResponder],[onStartShouldSetResponderCapture],' +
+    '[onSubmitEditing],[onValueChange]';
+/** Exported for the guard alone — the decorator below must spell its own list for ngtsc. */
+export const CALLBACK_INPUT_NAMES = CALLBACK_INPUTS;
+export class SymbioteCallbackHost {
+    constructor() {
+        this.renderer = inject(Renderer2);
+        this.host = inject(ElementRef);
+        this.detector = inject(ChangeDetectorRef);
+        const node = this.host.nativeElement;
+        if (typeof node === 'object' && node !== null)
+            registerViewMarker(node, this.detector);
+    }
+    ngOnChanges(changes) {
+        // The renderer wraps the value on its way through, so this forwards it raw — same shape as the
+        // tag directives' own forward, and the only place a withheld tag's callback can now come from.
+        for (const name of Object.keys(changes))
+            this.renderer.setProperty(this.host.nativeElement, name, changes[name]?.currentValue);
+    }
+    ngOnDestroy() {
+        const node = this.host.nativeElement;
+        if (typeof node === 'object' && node !== null)
+            unregisterViewMarker(node);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SymbioteCallbackHost, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: SymbioteCallbackHost, isStandalone: true, selector: "[onAccessibilityAction],[onAccessibilityEscape],[onAccessibilityTap],[onBlur],[onContentSizeChange],[onEndEditing],[onError],[onFocus],[onHoverIn],[onHoverOut],[onKeyPress],[onLayout],[onLoad],[onLoadEnd],[onLoadStart],[onLongPress],[onMagicTap],[onMomentumScrollBegin],[onMomentumScrollEnd],[onMoveShouldSetResponder],[onMoveShouldSetResponderCapture],[onPartialLoad],[onPress],[onPressIn],[onPressMove],[onPressOut],[onProgress],[onRefresh],[onResponderEnd],[onResponderGrant],[onResponderMove],[onResponderReject],[onResponderRelease],[onResponderStart],[onResponderTerminate],[onResponderTerminationRequest],[onScrollBeginDrag],[onScrollEndDrag],[onScrollToTop],[onSelectionChange],[onStartShouldSetResponder],[onStartShouldSetResponderCapture],[onSubmitEditing],[onValueChange]", inputs: { onAccessibilityAction: "onAccessibilityAction", onAccessibilityEscape: "onAccessibilityEscape", onAccessibilityTap: "onAccessibilityTap", onBlur: "onBlur", onContentSizeChange: "onContentSizeChange", onEndEditing: "onEndEditing", onError: "onError", onFocus: "onFocus", onHoverIn: "onHoverIn", onHoverOut: "onHoverOut", onKeyPress: "onKeyPress", onLayout: "onLayout", onLoad: "onLoad", onLoadEnd: "onLoadEnd", onLoadStart: "onLoadStart", onLongPress: "onLongPress", onMagicTap: "onMagicTap", onMomentumScrollBegin: "onMomentumScrollBegin", onMomentumScrollEnd: "onMomentumScrollEnd", onMoveShouldSetResponder: "onMoveShouldSetResponder", onMoveShouldSetResponderCapture: "onMoveShouldSetResponderCapture", onPartialLoad: "onPartialLoad", onPress: "onPress", onPressIn: "onPressIn", onPressMove: "onPressMove", onPressOut: "onPressOut", onProgress: "onProgress", onRefresh: "onRefresh", onResponderEnd: "onResponderEnd", onResponderGrant: "onResponderGrant", onResponderMove: "onResponderMove", onResponderReject: "onResponderReject", onResponderRelease: "onResponderRelease", onResponderStart: "onResponderStart", onResponderTerminate: "onResponderTerminate", onResponderTerminationRequest: "onResponderTerminationRequest", onScrollBeginDrag: "onScrollBeginDrag", onScrollEndDrag: "onScrollEndDrag", onScrollToTop: "onScrollToTop", onSelectionChange: "onSelectionChange", onStartShouldSetResponder: "onStartShouldSetResponder", onStartShouldSetResponderCapture: "onStartShouldSetResponderCapture", onSubmitEditing: "onSubmitEditing", onValueChange: "onValueChange" }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SymbioteCallbackHost, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[onAccessibilityAction],[onAccessibilityEscape],[onAccessibilityTap],[onBlur],' +
+                        '[onContentSizeChange],[onEndEditing],[onError],[onFocus],[onHoverIn],[onHoverOut],' +
+                        '[onKeyPress],[onLayout],[onLoad],[onLoadEnd],[onLoadStart],[onLongPress],[onMagicTap],' +
+                        '[onMomentumScrollBegin],[onMomentumScrollEnd],[onMoveShouldSetResponder],' +
+                        '[onMoveShouldSetResponderCapture],[onPartialLoad],[onPress],[onPressIn],[onPressMove],' +
+                        '[onPressOut],[onProgress],[onRefresh],[onResponderEnd],[onResponderGrant],[onResponderMove],' +
+                        '[onResponderReject],[onResponderRelease],[onResponderStart],[onResponderTerminate],' +
+                        '[onResponderTerminationRequest],[onScrollBeginDrag],[onScrollEndDrag],[onScrollToTop],' +
+                        '[onSelectionChange],[onStartShouldSetResponder],[onStartShouldSetResponderCapture],' +
+                        '[onSubmitEditing],[onValueChange]',
+                    // DECLARED, and this is not an optimisation — it is what makes withholding the tag directives
+                    // possible at all. `ɵɵproperty` on an element no directive claimed ends in `setDomProperty`, which
+                    // runs `validateAgainstEventProperties` and THROWS NG0306 on any name beginning with `on`
+                    // (upstream `sanitization/sanitization.ts:267`). So an `on*` prop is not merely unwrapped without a
+                    // claiming input — it is a hard runtime error, and the first attempt at this change hit it on the
+                    // first test that binds one.
+                    //
+                    // The TYPES still come from `SymbioteElement` and its subclasses, which ngtsc goes on matching from
+                    // the decorator's selector however empty the runtime array is. Angular requires an expression to
+                    // satisfy EVERY directive that claims the input, so a permissive declaration here cannot loosen the
+                    // exact one there.
+                    inputs: [
+                        'onAccessibilityAction',
+                        'onAccessibilityEscape',
+                        'onAccessibilityTap',
+                        'onBlur',
+                        'onContentSizeChange',
+                        'onEndEditing',
+                        'onError',
+                        'onFocus',
+                        'onHoverIn',
+                        'onHoverOut',
+                        'onKeyPress',
+                        'onLayout',
+                        'onLoad',
+                        'onLoadEnd',
+                        'onLoadStart',
+                        'onLongPress',
+                        'onMagicTap',
+                        'onMomentumScrollBegin',
+                        'onMomentumScrollEnd',
+                        'onMoveShouldSetResponder',
+                        'onMoveShouldSetResponderCapture',
+                        'onPartialLoad',
+                        'onPress',
+                        'onPressIn',
+                        'onPressMove',
+                        'onPressOut',
+                        'onProgress',
+                        'onRefresh',
+                        'onResponderEnd',
+                        'onResponderGrant',
+                        'onResponderMove',
+                        'onResponderReject',
+                        'onResponderRelease',
+                        'onResponderStart',
+                        'onResponderTerminate',
+                        'onResponderTerminationRequest',
+                        'onScrollBeginDrag',
+                        'onScrollEndDrag',
+                        'onScrollToTop',
+                        'onSelectionChange',
+                        'onStartShouldSetResponder',
+                        'onStartShouldSetResponderCapture',
+                        'onSubmitEditing',
+                        'onValueChange',
+                    ],
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [] });
+//# sourceMappingURL=callback-host.js.map

package/build/angular/callback-host.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"callback-host.js","sourceRoot":"","sources":["../../src/callback-host.ts"],"names":[],"mappings":"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"}

package/build/angular/change-detection-flush.d.ts

@@ -1,7 +1,16 @@
 interface IViewMarker {
     markForCheck(): void;
 }
-type ICallbackWrapper = (key: string, value: unknown) => unknown;
+export type ICallbackWrapper = (key: string, value: unknown) => unknown;
+/**
+ * Is this prop write one the wrapper would touch at all?
+ *
+ * Exported so a CALLER can ask before building a wrapper it may never need — an element directive is
+ * constructed per TAG, and a screen's tags overwhelmingly carry no `on*` function prop. Keeping the
+ * question here rather than copying the two tests at the call site is what stops the predicate and
+ * the wrapper drifting apart.
+ */
+export declare function isWrappableCallback(key: string, value: unknown): boolean;
 /**
  * Makes an app callback handed to the engine as a PROP re-enter Angular's update loop.
  *
@@ -24,7 +33,10 @@ type ICallbackWrapper = (key: string, value: unknown) => unknown;
  * ONE wrapper per original handler, for the caller's lifetime. A fresh closure per push would make
  * the engine store a new listener every time and would defeat every downstream identity check.
  */
-export declare function createCallbackWrapper(view: IViewMarker, node: unknown): ICallbackWrapper;
+export declare function createCallbackWrapper(node: unknown): ICallbackWrapper;
+export declare function registerViewMarker(node: object, marker: IViewMarker): void;
+export declare function unregisterViewMarker(node: object): void;
+export declare function markViewFor(node: unknown): void;
 export declare function registerViewFlush(node: object, flush: () => void): void;
 export declare function unregisterViewFlush(node: object): void;
 export declare function flushViewFor(node: unknown): void;

package/build/angular/change-detection-flush.js

@@ -51,6 +51,19 @@ const ON_PREFIX = /^on[A-Z]/;
 // typically an Animated.event touching no Angular state. Drag and momentum begin/end stay wrapped;
 // once per gesture is not a hot path.
 const PER_FRAME_CALLBACK = 'onScroll';
+/**
+ * Is this prop write one the wrapper would touch at all?
+ *
+ * Exported so a CALLER can ask before building a wrapper it may never need — an element directive is
+ * constructed per TAG, and a screen's tags overwhelmingly carry no `on*` function prop. Keeping the
+ * question here rather than copying the two tests at the call site is what stops the predicate and
+ * the wrapper drifting apart.
+ */
+export function isWrappableCallback(key, value) {
+    return (ON_PREFIX.test(key) &&
+        typeof value === 'function' &&
+        key !== PER_FRAME_CALLBACK);
+}
 /**
  * Makes an app callback handed to the engine as a PROP re-enter Angular's update loop.
  *
@@ -73,13 +86,18 @@ const PER_FRAME_CALLBACK = 'onScroll';
  * ONE wrapper per original handler, for the caller's lifetime. A fresh closure per push would make
  * the engine store a new listener every time and would defeat every downstream identity check.
  */
-export function createCallbackWrapper(view, node) {
-    const wrappers = new WeakMap();
+export function createCallbackWrapper(node) {
+    // Allocated on the FIRST wrap, not at construction. The map is per-CALLER, so an eager one is one
+    // `WeakMap` per directive instance — 7 000 on a 1 000-row create of the benchmark row, none of
+    // which is ever read, because that row carries no `on*` prop.
+    let wrappers;
     return (key, value) => {
-        if (!ON_PREFIX.test(key) || typeof value !== 'function')
-            return value;
-        if (key === PER_FRAME_CALLBACK)
+        // The second test is redundant at RUNTIME and load-bearing for the TYPE: `isWrappableCallback`
+        // answers a boolean, which narrows nothing, and the alternative is a cast. Keeping the `typeof`
+        // here is what lets `value` be a `Function` below without one.
+        if (!isWrappableCallback(key, value) || typeof value !== 'function')
             return value;
+        wrappers ??= new WeakMap();
         const cached = wrappers.get(value);
         if (cached !== undefined)
             return cached;
@@ -88,7 +106,7 @@ export function createCallbackWrapper(view, node) {
         // `undefined` as the receiver preserves the previous unbound call.
         const wrapper = (...args) => {
             const result = Reflect.apply(value, undefined, args);
-            view.markForCheck();
+            markViewFor(node);
             flushViewFor(node);
             return result;
         };
@@ -96,6 +114,36 @@ export function createCallbackWrapper(view, node) {
         return wrapper;
     };
 }
+/**
+ * The MARKER half, keyed on the node rather than injected.
+ *
+ * `markForCheck` needs the view holding the binding, and until 2026-09-18 the only way to have one
+ * was for `SymbioteElement` to inject a `ChangeDetectorRef` — on EVERY element, so that its lazy
+ * `on*` wrapper could reach one on the few that carry a callback. An injection is ~1-2.4 us per
+ * element on JavaScriptCore (`core/engine/cpp/tests/js/angular-directive-cost.itest.ts`), so a
+ * thousand-row screen paid for ten thousand `ViewRef`s to serve none.
+ *
+ * `SymbioteCallbackHost` registers here instead, and it MATCHES on the callback attributes rather
+ * than being injected — so an element with no `on*` binding neither instantiates it nor pays for it.
+ * Measured as the whole trade, selector included: -3.9 / -9.3 / -25.5 ms over ten thousand elements.
+ *
+ * Separate from `viewFlushes` deliberately. They come from different directives, on overlapping but
+ * different sets of tags, and they are not the same instruction: this one SCHEDULES and reaches every
+ * ancestor, that one re-checks ONE view synchronously. Collapsing them into a single entry would make
+ * whichever directive registered last decide which of the two an element gets.
+ */
+const viewMarkers = new WeakMap();
+export function registerViewMarker(node, marker) {
+    viewMarkers.set(node, marker);
+}
+export function unregisterViewMarker(node) {
+    viewMarkers.delete(node);
+}
+export function markViewFor(node) {
+    if (typeof node !== 'object' || node === null)
+        return;
+    viewMarkers.get(node)?.markForCheck();
+}
 export function registerViewFlush(node, flush) {
     viewFlushes.set(node, flush);
 }

package/build/angular/change-detection-flush.js.map

@@ -1 +1 @@
-{"version":3,"file":"change-detection-flush.js","sourceRoot":"","sources":["../../src/change-detection-flush.ts"],"names":[],"mappings":"AAAA,oGAAoG;AACpG,kGAAkG;AAClG,kCAAkC;AAClC,EAAE;AACF,sEAAsE;AACtE,kFAAkF;AAClF,6FAA6F;AAC7F,iGAAiG;AACjG,oGAAoG;AACpG,6DAA6D;AAC7D,EAAE;AACF,+FAA+F;AAC/F,iFAAiF;AACjF,sFAAsF;AACtF,EAAE;AACF,mGAAmG;AACnG,2FAA2F;AAC3F,qGAAqG;AACrG,0DAA0D;AAC1D,EAAE;AACF,gGAAgG;AAChG,4FAA4F;AAC5F,kGAAkG;AAClG,mGAAmG;AACnG,oGAAoG;AACpG,iGAAiG;AACjG,6FAA6F;AAC7F,oGAAoG;AACpG,oGAAoG;AACpG,kFAAkF;AAClF,yFAAyF;AACzF,gGAAgG;AAChG,iEAAiE;AACjE,EAAE;AACF,6FAA6F;AAC7F,oGAAoG;AACpG,4FAA4F;AAC5F,kGAAkG;AAClG,oBAAoB;AACpB,EAAE;AACF,6FAA6F;AAC7F,yEAAyE;AACzE,mCAAmC;AACnC,MAAM,WAAW,GAAG,IAAI,OAAO,EAAsB,CAAC;AAEtD,MAAM,SAAS,GAAG,UAAU,CAAC;AAE7B,2FAA2F;AAC3F,oGAAoG;AACpG,gGAAgG;AAChG,mGAAmG;AACnG,oGAAoG;AACpG,mGAAmG;AACnG,sCAAsC;AACtC,MAAM,kBAAkB,GAAG,UAAU,CAAC;AAQtC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,qBAAqB,CACnC,IAAiB,EACjB,IAAa;IAEb,MAAM,QAAQ,GAAG,IAAI,OAAO,EAA2C,CAAC;IACxE,OAAO,CAAC,GAAW,EAAE,KAAc,EAAW,EAAE;QAC9C,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,OAAO,KAAK,KAAK,UAAU;YAAE,OAAO,KAAK,CAAC;QACtE,IAAI,GAAG,KAAK,kBAAkB;YAAE,OAAO,KAAK,CAAC;QAC7C,MAAM,MAAM,GAAG,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QACnC,IAAI,MAAM,KAAK,SAAS;YAAE,OAAO,MAAM,CAAC;QACxC,gGAAgG;QAChG,iGAAiG;QACjG,mEAAmE;QACnE,MAAM,OAAO,GAAG,CAAC,GAAG,IAAe,EAAW,EAAE;YAC9C,MAAM,MAAM,GAAY,OAAO,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;YAC9D,IAAI,CAAC,YAAY,EAAE,CAAC;YACpB,YAAY,CAAC,IAAI,CAAC,CAAC;YACnB,OAAO,MAAM,CAAC;QAChB,CAAC,CAAC;QACF,QAAQ,CAAC,GAAG,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;QAC7B,OAAO,OAAO,CAAC;IACjB,CAAC,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,IAAY,EAAE,KAAiB;IAC/D,WAAW,CAAC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;AAC/B,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,IAAY;IAC9C,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;AAC3B,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,IAAa;IACxC,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,KAAK,IAAI;QAAE,OAAO;IACtD,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;AAC5B,CAAC"}
+{"version":3,"file":"change-detection-flush.js","sourceRoot":"","sources":["../../src/change-detection-flush.ts"],"names":[],"mappings":"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"}

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

@@ -68,77 +68,42 @@ function asItem(value) {
 }
 export { VListEmptyDirective, VListFooterDirective, VListHeaderDirective, VListItemDirective, VListSeparatorDirective, } from '../virtualized-list';
 export class FlatList {
-    // The list's edge/viewability/failure events as real Angular events: `(endReached)="…"`, not
-    // `[onEndReached]="…"` — re-emitted straight from the inner VirtualizedList's own @Output()s (see
-    // the template's `(endReached)="endReached.emit($event)"` style forwarding above).
-    endReached = new EventEmitter();
-    startReached = new EventEmitter();
-    refresh = new EventEmitter();
-    viewableItemsChanged = new EventEmitter();
-    scrollToIndexFailed = new EventEmitter();
-    data;
-    // RN's FlatList spreads its props onto the VirtualizedList it renders, so `testID` lands on the
-    // scroll view. Angular has no spread, and this one was simply missing: `<FlatList testID="x">`
-    // compiled (a static attribute on a component tag is never checked), reached the non-painting
-    // anchor host, and committed nowhere — so the list was untargetable by a test or an e2e selector
-    // while looking perfectly healthy on screen. VirtualizedList has always declared it.
-    testID;
-    numColumns;
-    columnWrapperStyle;
-    keyExtractor;
-    getItemLayout;
-    horizontal;
-    inverted;
-    extraData;
-    onEndReachedThreshold;
-    onStartReachedThreshold;
-    refreshing;
-    progressViewOffset;
-    viewabilityConfig;
-    viewabilityConfigCallbackPairs;
-    initialNumToRender;
-    initialScrollIndex;
-    maxToRenderPerBatch;
-    updateCellsBatchingPeriod;
-    windowSize;
-    stickyHeaderIndices;
-    maintainVisibleContentPosition;
-    onScroll;
-    onScrollBeginDrag;
-    onScrollEndDrag;
-    onMomentumScrollBegin;
-    onMomentumScrollEnd;
-    scrollEventThrottle;
-    keyboardShouldPersistTaps;
-    keyboardDismissMode;
-    style;
-    contentContainerStyle;
-    // The app's cell + slot templates, captured for the multi-column re-stamp path. In the
-    // single-column path they are ALSO projected through <ng-content> to the inner list and these
-    // captures stay unused (the inner list's own @ContentChild resolves them across the projection).
-    itemDir;
-    headerDir;
-    footerDir;
-    emptyDir;
-    separatorDir;
-    // The composed inner list (whichever numColumns branch rendered). Its instance IS the
-    // IVirtualizedListHandle, so FlatList's handle delegates straight to it.
-    listRef;
-    // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
-    // onto (see anchorHostStyle's doc comment) — NOT `listRef` above, which targets the real inner
-    // `<VirtualizedList>` one level down (itself its own separate anchor host).
-    elementRef = inject(ElementRef);
-    // --- derived view state (recomputed in ngOnChanges, stable identity across CD) ---
-    rows = [];
-    // Angular's [style]="…" binding compiles to the built-in ɵɵstyleMap instruction (NOT a
-    // regular @Input() property write), which only understands a flat object — an array (RN's
-    // own `style={[a, b]}` composition idiom) crashes deep inside Angular's styling engine. So
-    // every style value this component stamps onto a template `[style]=` binding is flattened
-    // via the engine's own flattenStyle first, here at the source rather than at each call site.
-    rowStyle = flattenStyle([{ flexDirection: 'row' }]);
-    rowViewabilityPairs;
-    columnCellStyle = { flex: 1 };
-    resolvedStyle = undefined;
+    constructor() {
+        // The list's edge/viewability/failure events as real Angular events: `(endReached)="…"`, not
+        // `[onEndReached]="…"` — re-emitted straight from the inner VirtualizedList's own @Output()s (see
+        // the template's `(endReached)="endReached.emit($event)"` style forwarding above).
+        this.endReached = new EventEmitter();
+        this.startReached = new EventEmitter();
+        this.refresh = new EventEmitter();
+        this.viewableItemsChanged = new EventEmitter();
+        this.scrollToIndexFailed = new EventEmitter();
+        // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
+        // onto (see anchorHostStyle's doc comment) — NOT `listRef` above, which targets the real inner
+        // `<VirtualizedList>` one level down (itself its own separate anchor host).
+        this.elementRef = inject(ElementRef);
+        // --- derived view state (recomputed in ngOnChanges, stable identity across CD) ---
+        this.rows = [];
+        // Angular's [style]="…" binding compiles to the built-in ɵɵstyleMap instruction (NOT a
+        // regular @Input() property write), which only understands a flat object — an array (RN's
+        // own `style={[a, b]}` composition idiom) crashes deep inside Angular's styling engine. So
+        // every style value this component stamps onto a template `[style]=` binding is flattened
+        // via the engine's own flattenStyle first, here at the source rather than at each call site.
+        this.rowStyle = flattenStyle([{ flexDirection: 'row' }]);
+        this.columnCellStyle = { flex: 1 };
+        this.resolvedStyle = undefined;
+        // ---- single-column data adaptation (plain array -> getItem/getItemCount) ----
+        this.getFlatItem = (_data, index) => this.data[index];
+        this.getFlatCount = (_data) => this.data.length;
+        // ---- multi-column data adaptation (the virtualized stream is rows) ----
+        this.getRow = (_data, index) => this.rows[index];
+        this.getRowCount = (_data) => this.rows.length;
+        this.rowKey = (row, _index) => rowKeyExtractor(row, this.keyExtractor);
+        // Viewability over rows expands back to per-item tokens, so the caller sees item-level
+        // visibility, not row-level (shared expandRowViewability), matching Vue.
+        this.rowViewableItemsChanged = (info) => {
+            this.viewableItemsChanged.emit(expandRowViewability(info, this.keyExtractor));
+        };
+    }
     get columns() {
         return this.numColumns ?? SINGLE_COLUMN;
     }
@@ -176,18 +141,6 @@ export class FlatList {
             this.rowViewabilityPairs = this.buildRowViewabilityPairs();
         }
     }
-    // ---- single-column data adaptation (plain array -> getItem/getItemCount) ----
-    getFlatItem = (_data, index) => this.data[index];
-    getFlatCount = (_data) => this.data.length;
-    // ---- multi-column data adaptation (the virtualized stream is rows) ----
-    getRow = (_data, index) => this.rows[index];
-    getRowCount = (_data) => this.rows.length;
-    rowKey = (row, _index) => rowKeyExtractor(row);
-    // Viewability over rows expands back to per-item tokens, so the caller sees item-level
-    // visibility, not row-level (shared expandRowViewability), matching Vue.
-    rowViewableItemsChanged = (info) => {
-        this.viewableItemsChanged.emit(expandRowViewability(info, this.keyExtractor));
-    };
     buildRowViewabilityPairs() {
         return this.viewabilityConfigCallbackPairs?.map(pair => ({
             viewabilityConfig: pair.viewabilityConfig,
@@ -270,8 +223,8 @@ export class FlatList {
     recordInteraction() {
         this.listRef?.recordInteraction();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FlatList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FlatList, isStandalone: true, selector: "FlatList", inputs: { data: "data", testID: "testID", numColumns: "numColumns", columnWrapperStyle: "columnWrapperStyle", keyExtractor: "keyExtractor", getItemLayout: "getItemLayout", horizontal: "horizontal", inverted: "inverted", extraData: "extraData", onEndReachedThreshold: "onEndReachedThreshold", onStartReachedThreshold: "onStartReachedThreshold", refreshing: "refreshing", progressViewOffset: "progressViewOffset", viewabilityConfig: "viewabilityConfig", viewabilityConfigCallbackPairs: "viewabilityConfigCallbackPairs", initialNumToRender: "initialNumToRender", initialScrollIndex: "initialScrollIndex", maxToRenderPerBatch: "maxToRenderPerBatch", updateCellsBatchingPeriod: "updateCellsBatchingPeriod", windowSize: "windowSize", stickyHeaderIndices: "stickyHeaderIndices", maintainVisibleContentPosition: "maintainVisibleContentPosition", onScroll: "onScroll", onScrollBeginDrag: "onScrollBeginDrag", onScrollEndDrag: "onScrollEndDrag", onMomentumScrollBegin: "onMomentumScrollBegin", onMomentumScrollEnd: "onMomentumScrollEnd", scrollEventThrottle: "scrollEventThrottle", keyboardShouldPersistTaps: "keyboardShouldPersistTaps", keyboardDismissMode: "keyboardDismissMode", style: "style", contentContainerStyle: "contentContainerStyle" }, outputs: { endReached: "endReached", startReached: "startReached", refresh: "refresh", viewableItemsChanged: "viewableItemsChanged", scrollToIndexFailed: "scrollToIndexFailed" }, queries: [{ propertyName: "itemDir", first: true, predicate: VListItemDirective, descendants: true }, { propertyName: "headerDir", first: true, predicate: VListHeaderDirective, descendants: true }, { propertyName: "footerDir", first: true, predicate: VListFooterDirective, descendants: true }, { propertyName: "emptyDir", first: true, predicate: VListEmptyDirective, descendants: true }, { propertyName: "separatorDir", first: true, predicate: VListSeparatorDirective, descendants: true }], viewQueries: [{ propertyName: "listRef", first: true, predicate: VirtualizedList, descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: i1.SymbioteStyleInputDirective, inputs: ["style", "style"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FlatList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FlatList, isStandalone: true, selector: "FlatList", inputs: { data: "data", testID: "testID", numColumns: "numColumns", columnWrapperStyle: "columnWrapperStyle", keyExtractor: "keyExtractor", getItemLayout: "getItemLayout", horizontal: "horizontal", inverted: "inverted", extraData: "extraData", onEndReachedThreshold: "onEndReachedThreshold", onStartReachedThreshold: "onStartReachedThreshold", refreshing: "refreshing", progressViewOffset: "progressViewOffset", viewabilityConfig: "viewabilityConfig", viewabilityConfigCallbackPairs: "viewabilityConfigCallbackPairs", initialNumToRender: "initialNumToRender", initialScrollIndex: "initialScrollIndex", maxToRenderPerBatch: "maxToRenderPerBatch", updateCellsBatchingPeriod: "updateCellsBatchingPeriod", windowSize: "windowSize", stickyHeaderIndices: "stickyHeaderIndices", maintainVisibleContentPosition: "maintainVisibleContentPosition", onScroll: "onScroll", onScrollBeginDrag: "onScrollBeginDrag", onScrollEndDrag: "onScrollEndDrag", onMomentumScrollBegin: "onMomentumScrollBegin", onMomentumScrollEnd: "onMomentumScrollEnd", scrollEventThrottle: "scrollEventThrottle", keyboardShouldPersistTaps: "keyboardShouldPersistTaps", keyboardDismissMode: "keyboardDismissMode", style: "style", contentContainerStyle: "contentContainerStyle" }, outputs: { endReached: "endReached", startReached: "startReached", refresh: "refresh", viewableItemsChanged: "viewableItemsChanged", scrollToIndexFailed: "scrollToIndexFailed" }, queries: [{ propertyName: "itemDir", first: true, predicate: VListItemDirective, descendants: true }, { propertyName: "headerDir", first: true, predicate: VListHeaderDirective, descendants: true }, { propertyName: "footerDir", first: true, predicate: VListFooterDirective, descendants: true }, { propertyName: "emptyDir", first: true, predicate: VListEmptyDirective, descendants: true }, { propertyName: "separatorDir", first: true, predicate: VListSeparatorDirective, descendants: true }], viewQueries: [{ propertyName: "listRef", first: true, predicate: VirtualizedList, descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: i1.SymbioteStyleInputDirective, inputs: ["style", "style"] }], ngImport: i0, template: `
     @if (isMultiColumn) {
       <VirtualizedList
         [data]="rows"
@@ -440,7 +393,7 @@ export class FlatList {
         }
       </VirtualizedList>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: VirtualizedList, selector: "VirtualizedList", inputs: ["data", "getItem", "getItemCount", "keyExtractor", "getItemLayout", "horizontal", "inverted", "extraData", "onEndReachedThreshold", "onStartReachedThreshold", "refreshing", "progressViewOffset", "refreshRequested", "viewabilityConfig", "viewabilityConfigCallbackPairs", "initialNumToRender", "initialScrollIndex", "maxToRenderPerBatch", "updateCellsBatchingPeriod", "windowSize", "stickyHeaderIndices", "maintainVisibleContentPosition", "onScroll", "onScrollBeginDrag", "onScrollEndDrag", "onMomentumScrollBegin", "onMomentumScrollEnd", "scrollEventThrottle", "keyboardShouldPersistTaps", "keyboardDismissMode", "style", "contentContainerStyle", "testID", "nativeID", "accessible", "accessibilityLabel", "accessibilityHint", "accessibilityRole", "accessibilityState", "accessibilityValue", "accessibilityActions", "accessibilityLabelledBy", "importantForAccessibility", "accessibilityLiveRegion", "screenReaderFocusable", "accessibilityViewIsModal", "accessibilityElementsHidden", "accessibilityIgnoresInvertColors", "accessibilityLanguage", "accessibilityRespondsToUserInteraction", "accessibilityShowsLargeContentViewer", "accessibilityLargeContentTitle", "role", "ariaLabel", "ariaLabelledBy", "ariaLive", "ariaHidden", "ariaBusy", "ariaChecked", "ariaDisabled", "ariaExpanded", "ariaSelected", "ariaModal", "ariaValueMax", "ariaValueMin", "ariaValueNow", "ariaValueText"], outputs: ["endReached", "startReached", "refresh", "viewableItemsChanged", "scrollToIndexFailed", "accessibilityAction", "accessibilityTap", "magicTap", "accessibilityEscape"] }, { kind: "directive", type: VListItemDirective, selector: "[vListItem]" }, { kind: "directive", type: VListHeaderDirective, selector: "[vListHeader]" }, { kind: "directive", type: VListFooterDirective, selector: "[vListFooter]" }, { kind: "directive", type: VListEmptyDirective, selector: "[vListEmpty]" }, { kind: "directive", type: VListSeparatorDirective, selector: "[vListSeparator]" }, { kind: "directive", type: VListOutletDirective, selector: "[vListOutlet]", inputs: ["vListOutlet", "vListOutletContext"] }, { kind: "component", type: ViewHost, selector: "view" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: VirtualizedList, selector: "VirtualizedList", inputs: ["data", "getItem", "getItemCount", "keyExtractor", "getItemLayout", "horizontal", "inverted", "extraData", "onEndReachedThreshold", "onStartReachedThreshold", "refreshing", "progressViewOffset", "refreshRequested", "viewabilityConfig", "viewabilityConfigCallbackPairs", "initialNumToRender", "initialScrollIndex", "maxToRenderPerBatch", "updateCellsBatchingPeriod", "windowSize", "stickyHeaderIndices", "maintainVisibleContentPosition", "onScroll", "onScrollBeginDrag", "onScrollEndDrag", "onMomentumScrollBegin", "onMomentumScrollEnd", "scrollEventThrottle", "keyboardShouldPersistTaps", "keyboardDismissMode", "style", "contentContainerStyle", "testID", "nativeID", "accessible", "accessibilityLabel", "accessibilityHint", "accessibilityRole", "accessibilityState", "accessibilityValue", "accessibilityActions", "accessibilityLabelledBy", "importantForAccessibility", "accessibilityLiveRegion", "screenReaderFocusable", "accessibilityViewIsModal", "accessibilityElementsHidden", "accessibilityIgnoresInvertColors", "accessibilityLanguage", "accessibilityRespondsToUserInteraction", "accessibilityShowsLargeContentViewer", "accessibilityLargeContentTitle", "role", "ariaLabel", "ariaLabelledBy", "ariaLive", "ariaHidden", "ariaBusy", "ariaChecked", "ariaDisabled", "ariaExpanded", "ariaSelected", "ariaModal", "ariaValueMax", "ariaValueMin", "ariaValueNow", "ariaValueText"], outputs: ["endReached", "startReached", "refresh", "viewableItemsChanged", "scrollToIndexFailed", "accessibilityAction", "accessibilityTap", "magicTap", "accessibilityEscape"] }, { kind: "directive", type: VListItemDirective, selector: "[vListItem]" }, { kind: "directive", type: VListHeaderDirective, selector: "[vListHeader]" }, { kind: "directive", type: VListFooterDirective, selector: "[vListFooter]" }, { kind: "directive", type: VListEmptyDirective, selector: "[vListEmpty]" }, { kind: "directive", type: VListSeparatorDirective, selector: "[vListSeparator]" }, { kind: "directive", type: VListOutletDirective, selector: "[vListOutlet]", inputs: ["vListOutlet", "vListOutletContext"] }, { kind: "component", type: ViewHost, selector: "view" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FlatList, decorators: [{
             type: Component,