@symbiote-native/angular 3.1.3 → 3.3.0

package/build/angular/services/index.d.ts

@@ -1,2 +1,7 @@
 export { ColorSchemeService } from './color-scheme.service';
 export { WindowDimensionsService } from './window-dimensions.service';
+export { createResourceHook } from './create-resource-hook';
+export { createEventValueHook } from './create-event-value-hook';
+export { injectEvent, injectEventListener } from './inject-event';
+export { connectWatchedSignal } from './connect-watched-signal';
+export { PermissionsServiceBase } from './permissions-service-base';

package/build/angular/services/index.js

@@ -1,3 +1,8 @@
 export { ColorSchemeService } from './color-scheme.service';
 export { WindowDimensionsService } from './window-dimensions.service';
+export { createResourceHook } from './create-resource-hook';
+export { createEventValueHook } from './create-event-value-hook';
+export { injectEvent, injectEventListener } from './inject-event';
+export { connectWatchedSignal } from './connect-watched-signal';
+export { PermissionsServiceBase } from './permissions-service-base';
 //# sourceMappingURL=index.js.map

package/build/angular/services/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/services/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/services/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAClE,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC"}

package/build/angular/services/inject-event.d.ts

@@ -0,0 +1,6 @@
+import type { Signal } from '@angular/core';
+import type { IEventEmitterOf, IEventName, IEventPayload, IEventsMap } from '@symbiote-native/engine';
+/** Calls the listener for each event, the latest one, and stops with the injection context */
+export declare function injectEventListener<TEventsMap extends IEventsMap, TName extends IEventName<TEventsMap>>(emitter: () => IEventEmitterOf<TEventsMap>, eventName: () => TName, listener: () => TEventsMap[TName]): void;
+/** The payload of the last event, `initialValue` (or `null`) until the first one */
+export declare function injectEvent<TEventsMap extends IEventsMap, TName extends IEventName<TEventsMap>>(emitter: () => IEventEmitterOf<TEventsMap>, eventName: () => TName, initialValue?: IEventPayload<TEventsMap, TName> | null): Signal<IEventPayload<TEventsMap, TName> | null>;

package/build/angular/services/inject-event.js

@@ -0,0 +1,24 @@
+// Angular twins of `useEvent` and `useEventListener` of the `expo` package, for any emitter
+import { effect, signal, untracked } from '@angular/core';
+import { bindEventListener } from '@symbiote-native/engine';
+/** Calls the listener for each event, the latest one, and stops with the injection context */
+export function injectEventListener(emitter, eventName, listener) {
+    effect(onCleanup => {
+        const source = emitter();
+        const name = eventName();
+        // The listener is read at each event, a new one is not a new subscription
+        onCleanup(bindEventListener(source, name, () => untracked(listener)));
+    });
+}
+/** The payload of the last event, `initialValue` (or `null`) until the first one */
+export function injectEvent(emitter, eventName, initialValue = null) {
+    const event = signal(initialValue, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "event" }] : /* istanbul ignore next */ []));
+    effect(onCleanup => {
+        const source = emitter();
+        const name = eventName();
+        onCleanup(bindEventListener(source, name, () => (next) => event.set(next)));
+    });
+    return event.asReadonly();
+}
+//# sourceMappingURL=inject-event.js.map

package/build/angular/services/inject-event.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inject-event.js","sourceRoot":"","sources":["../../../src/services/inject-event.ts"],"names":[],"mappings":"AAAA,4FAA4F;AAE5F,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAQ5D,8FAA8F;AAC9F,MAAM,UAAU,mBAAmB,CAIjC,OAA0C,EAC1C,SAAsB,EACtB,QAAiC;IAEjC,MAAM,CAAC,SAAS,CAAC,EAAE;QACjB,MAAM,MAAM,GAAG,OAAO,EAAE,CAAC;QACzB,MAAM,IAAI,GAAG,SAAS,EAAE,CAAC;QACzB,0EAA0E;QAC1E,SAAS,CAAC,iBAAiB,CAAC,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IACxE,CAAC,CAAC,CAAC;AACL,CAAC;AAED,oFAAoF;AACpF,MAAM,UAAU,WAAW,CAIzB,OAA0C,EAC1C,SAAsB,EACtB,eAAwD,IAAI;IAE5D,MAAM,KAAK,GAAG,MAAM,CAA0C,YAAY;8EAAC,CAAC;IAC5E,MAAM,CAAC,SAAS,CAAC,EAAE;QACjB,MAAM,MAAM,GAAG,OAAO,EAAE,CAAC;QACzB,MAAM,IAAI,GAAG,SAAS,EAAE,CAAC;QACzB,SAAS,CACP,iBAAiB,CACf,MAAM,EACN,IAAI,EACJ,GAAG,EAAE,CAAC,CAAC,IAAsC,EAAE,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAClE,CACF,CAAC;IACJ,CAAC,CAAC,CAAC;IACH,OAAO,KAAK,CAAC,UAAU,EAAE,CAAC;AAC5B,CAAC"}

package/build/angular/services/permissions-service-base.d.ts

@@ -0,0 +1,14 @@
+import { type Signal } from '@angular/core';
+export declare abstract class PermissionsServiceBase<TPermission, TOptions = void> {
+    private readonly getMethod;
+    private readonly requestMethod;
+    private readonly status;
+    private readonly fetchError;
+    private isAutoFetchStarted;
+    readonly error: Signal<Error | null>;
+    protected constructor(getMethod: (options?: TOptions) => Promise<TPermission>, requestMethod: (options?: TOptions) => Promise<TPermission>);
+    connect(): Signal<TPermission | null>;
+    get(options?: TOptions): Promise<TPermission>;
+    request(options?: TOptions): Promise<TPermission>;
+    private store;
+}

package/build/angular/services/permissions-service-base.js

@@ -0,0 +1,38 @@
+import { signal } from '@angular/core';
+// Общая часть сервисов разрешений всех Expo-пакетов, наследник передаёт пару методов
+// Сбой автозапроса попадает в `error`, а не в unhandled rejection: null-статус с непустым `error`
+// значит "запрос упал", а не "ещё не было"
+export class PermissionsServiceBase {
+    constructor(getMethod, requestMethod) {
+        this.getMethod = getMethod;
+        this.requestMethod = requestMethod;
+        this.status = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+        this.fetchError = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fetchError" }] : /* istanbul ignore next */ []));
+        this.isAutoFetchStarted = false;
+        this.error = this.fetchError.asReadonly();
+    }
+    // Защёлка, а не проверка `status() === null`: упавший запрос оставляет null навсегда
+    connect() {
+        if (!this.isAutoFetchStarted) {
+            this.isAutoFetchStarted = true;
+            this.get().catch((cause) => {
+                this.fetchError.set(cause instanceof Error ? cause : new Error(String(cause)));
+            });
+        }
+        return this.status.asReadonly();
+    }
+    async get(options) {
+        return this.store(await this.getMethod(options));
+    }
+    async request(options) {
+        return this.store(await this.requestMethod(options));
+    }
+    store(response) {
+        this.status.set(response);
+        this.fetchError.set(null);
+        return response;
+    }
+}
+//# sourceMappingURL=permissions-service-base.js.map

package/build/angular/services/permissions-service-base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"permissions-service-base.js","sourceRoot":"","sources":["../../../src/services/permissions-service-base.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAe,MAAM,eAAe,CAAC;AAEpD,qFAAqF;AACrF,kGAAkG;AAClG,2CAA2C;AAC3C,MAAM,OAAgB,sBAAsB;IAO1C,YACmB,SAAuD,EACvD,aAEQ;QAHR,cAAS,GAAT,SAAS,CAA8C;QACvD,kBAAa,GAAb,aAAa,CAEL;QAVV,WAAM,GAAG,MAAM,CAAqB,IAAI;mFAAC,CAAC;QAC1C,eAAU,GAAG,MAAM,CAAe,IAAI;uFAAC,CAAC;QACjD,uBAAkB,GAAG,KAAK,CAAC;QAE1B,UAAK,GAAyB,IAAI,CAAC,UAAU,CAAC,UAAU,EAAE,CAAC;IAOjE,CAAC;IAEJ,qFAAqF;IACrF,OAAO;QACL,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC7B,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;YAC/B,IAAI,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,KAAc,EAAE,EAAE;gBAClC,IAAI,CAAC,UAAU,CAAC,GAAG,CACjB,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAC1D,CAAC;YACJ,CAAC,CAAC,CAAC;QACL,CAAC;QACD,OAAO,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC;IAClC,CAAC;IAED,KAAK,CAAC,GAAG,CAAC,OAAkB;QAC1B,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;IACnD,CAAC;IAED,KAAK,CAAC,OAAO,CAAC,OAAkB;QAC9B,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC;IACvD,CAAC;IAEO,KAAK,CAAC,QAAqB;QACjC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAC1B,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAC1B,OAAO,QAAQ,CAAC;IAClB,CAAC;CACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/angular",
-  "version": "3.1.3",
+  "version": "3.3.0",
   "description": "SymbioteNative's Angular adapter — a Renderer2/RendererFactory2 with DOM-less bootstrap driving real native iOS/Android views through the same engine as the other adapters.",
   "keywords": [
     "react-native",
@@ -66,14 +66,14 @@
   "dependencies": {
     "@angular/compiler-cli": "~22.0.8",
     "@react-native/typescript-config": "0.86.0",
-    "@symbiote-native/components": "3.1.3",
-    "@symbiote-native/css-parser": "0.5.2"
+    "@symbiote-native/components": "3.2.0",
+    "@symbiote-native/css-parser": "0.5.4"
   },
   "peerDependencies": {
     "@angular/core": ">=20",
     "@angular/forms": ">=20",
     "react-native": ">=0.86",
-    "@symbiote-native/engine": "^1.4.0"
+    "@symbiote-native/engine": "^1.6.0"
   },
   "devDependencies": {
     "@angular/compiler": "~22.0.8",
@@ -83,8 +83,8 @@
     "@types/babel__core": "^7.20.5",
     "@types/node": "^26.0.0",
     "typescript": "~6.0.0",
-    "@symbiote-native/engine": "1.4.0",
-    "@symbiote-native/test-utils": "0.4.5"
+    "@symbiote-native/engine": "1.6.0",
+    "@symbiote-native/test-utils": "0.4.7"
   },
   "scripts": {
     "clean": "rm -rf build",

package/src/accessibility-events.ts

@@ -0,0 +1,13 @@
+import { Directive, EventEmitter, Output } from '@angular/core';
+import type { ISymbioteEvent } from '@symbiote-native/engine';
+import { AccessibilityInputsBase } from './accessibility-inputs';
+
+// The four accessibility callbacks as real Angular events, for components that expose them as
+// outputs rather than inputs
+@Directive()
+export abstract class AccessibilityEventsBase extends AccessibilityInputsBase {
+  @Output() readonly accessibilityAction = new EventEmitter<ISymbioteEvent>();
+  @Output() readonly accessibilityTap = new EventEmitter<ISymbioteEvent>();
+  @Output() readonly magicTap = new EventEmitter<ISymbioteEvent>();
+  @Output() readonly accessibilityEscape = new EventEmitter<ISymbioteEvent>();
+}

package/src/accessibility-inputs.ts

@@ -0,0 +1,89 @@
+import { Directive, Input } from '@angular/core';
+import type {
+  IAccessibilityProps,
+  IAccessibilityStateValue,
+  IAriaProps,
+} from '@symbiote-native/components';
+
+// Inputs are declared statically, so view-shaped components extend this instead of repeating them
+// The `on*` accessibility callbacks stay per component: some take inputs, others outputs
+@Directive()
+export abstract class AccessibilityInputsBase {
+  @Input() accessible?: boolean;
+  @Input() accessibilityLabel?: string;
+  @Input() accessibilityHint?: string;
+  @Input() accessibilityRole?: IAccessibilityProps['accessibilityRole'];
+  @Input() accessibilityState?: IAccessibilityStateValue;
+  @Input() accessibilityValue?: IAccessibilityProps['accessibilityValue'];
+  @Input() accessibilityActions?: IAccessibilityProps['accessibilityActions'];
+  @Input() accessibilityLabelledBy?: string | string[];
+  @Input()
+  importantForAccessibility?: IAccessibilityProps['importantForAccessibility'];
+  @Input()
+  accessibilityLiveRegion?: IAccessibilityProps['accessibilityLiveRegion'];
+  @Input() screenReaderFocusable?: boolean;
+  @Input() accessibilityViewIsModal?: boolean;
+  @Input() accessibilityElementsHidden?: boolean;
+  @Input() accessibilityIgnoresInvertColors?: boolean;
+  @Input() accessibilityLanguage?: string;
+  @Input() accessibilityRespondsToUserInteraction?: boolean;
+  @Input() accessibilityShowsLargeContentViewer?: boolean;
+  @Input() accessibilityLargeContentTitle?: string;
+
+  @Input() role?: IAriaProps['role'];
+  @Input('aria-label') ariaLabel?: string;
+  @Input('aria-labelledby') ariaLabelledBy?: string;
+  @Input('aria-live') ariaLive?: IAriaProps['aria-live'];
+  @Input('aria-hidden') ariaHidden?: boolean;
+  @Input('aria-busy') ariaBusy?: boolean;
+  @Input('aria-checked') ariaChecked?: boolean | 'mixed';
+  @Input('aria-disabled') ariaDisabled?: boolean;
+  @Input('aria-expanded') ariaExpanded?: boolean;
+  @Input('aria-selected') ariaSelected?: boolean;
+  @Input('aria-modal') ariaModal?: boolean;
+  @Input('aria-valuemax') ariaValueMax?: number;
+  @Input('aria-valuemin') ariaValueMin?: number;
+  @Input('aria-valuenow') ariaValueNow?: number;
+  @Input('aria-valuetext') ariaValueText?: string;
+
+  // The bag the shared fold takes, the aria inputs under their web names
+  protected accessibilityInputProps(): IAccessibilityProps & IAriaProps {
+    return {
+      accessible: this.accessible,
+      accessibilityLabel: this.accessibilityLabel,
+      accessibilityHint: this.accessibilityHint,
+      accessibilityRole: this.accessibilityRole,
+      accessibilityState: this.accessibilityState,
+      accessibilityValue: this.accessibilityValue,
+      accessibilityActions: this.accessibilityActions,
+      accessibilityLabelledBy: this.accessibilityLabelledBy,
+      importantForAccessibility: this.importantForAccessibility,
+      accessibilityLiveRegion: this.accessibilityLiveRegion,
+      screenReaderFocusable: this.screenReaderFocusable,
+      accessibilityViewIsModal: this.accessibilityViewIsModal,
+      accessibilityElementsHidden: this.accessibilityElementsHidden,
+      accessibilityIgnoresInvertColors: this.accessibilityIgnoresInvertColors,
+      accessibilityLanguage: this.accessibilityLanguage,
+      accessibilityRespondsToUserInteraction:
+        this.accessibilityRespondsToUserInteraction,
+      accessibilityShowsLargeContentViewer:
+        this.accessibilityShowsLargeContentViewer,
+      accessibilityLargeContentTitle: this.accessibilityLargeContentTitle,
+      role: this.role,
+      'aria-label': this.ariaLabel,
+      'aria-labelledby': this.ariaLabelledBy,
+      'aria-live': this.ariaLive,
+      'aria-hidden': this.ariaHidden,
+      'aria-busy': this.ariaBusy,
+      'aria-checked': this.ariaChecked,
+      'aria-disabled': this.ariaDisabled,
+      'aria-expanded': this.ariaExpanded,
+      'aria-selected': this.ariaSelected,
+      'aria-modal': this.ariaModal,
+      'aria-valuemax': this.ariaValueMax,
+      'aria-valuemin': this.ariaValueMin,
+      'aria-valuenow': this.ariaValueNow,
+      'aria-valuetext': this.ariaValueText,
+    };
+  }
+}

package/src/bootstrap.ts

@@ -3,18 +3,21 @@
 // stay there. No @Component/@Directive decorators here, so unlike the package's main "." entry
 // this needs no ngc/AOT build step and can stay a plain source reference.
 
+import './finalization-registry';
 import { AppRegistry as RNAppRegistry } from 'react-native';
-import type { Type } from '@angular/core';
+import type { EnvironmentProviders, Provider, Type } from '@angular/core';
 import {
   bootstrapHost,
   type IBootstrapHostOptions,
 } from '@symbiote-native/components/bootstrap';
 import { AppRegistry, setHostRegistrar } from './modules/app-registry';
+import { setRootProviders } from './render';
 
 export type { IBootstrapHostOptions } from '@symbiote-native/components/bootstrap';
 
 export type IBootstrapApplicationOptions = IBootstrapHostOptions & {
   appName: string;
+  providers?: (Provider | EnvironmentProviders)[];
 };
 
 // Mirrors real Angular's bootstrapApplication(RootComponent, config) idiom.
@@ -22,7 +25,8 @@ export function bootstrapApplication(
   AppComponent: Type<unknown>,
   options: IBootstrapApplicationOptions,
 ): void {
-  const { appName, ...bootstrapOptions } = options;
+  const { appName, providers = [], ...bootstrapOptions } = options;
+  setRootProviders(providers);
   bootstrapHost(bootstrapOptions);
   setHostRegistrar(RNAppRegistry);
   AppRegistry.registerComponent(appName, () => AppComponent);

package/src/components/checkbox-props.ts

@@ -0,0 +1,12 @@
+// Пропсы `<checkbox>` для Angular, компонента нет, тег матчит `CheckboxElement`
+// Убраны a11y-колбэки (в Angular это outputs) и `onChange`, который upstream тоже никогда не зовёт
+import type { ICheckboxProps as ICoreCheckboxProps } from '@symbiote-native/components';
+
+export type ICheckboxProps = Omit<
+  ICoreCheckboxProps,
+  | 'onChange'
+  | 'onAccessibilityAction'
+  | 'onAccessibilityTap'
+  | 'onMagicTap'
+  | 'onAccessibilityEscape'
+>;

package/src/components/flat-list/flat-list-template.ts

@@ -0,0 +1,159 @@
+// A content query does not resolve across a second `<ng-content>` hop, so both branches re-stamp
+// the app's templates instead of projecting them (see `flat-list.test.ts`)
+
+import { LIST_ACCESSIBILITY_FORWARD } from '../virtualized-list/list-a11y-forward';
+
+export const FLAT_LIST_TEMPLATE = `
+  @if (isMultiColumn) {
+    <VirtualizedList
+      [data]="rows"
+      [getItem]="getRow"
+      [getItemCount]="getRowCount"
+      [keyExtractor]="rowKey"
+      [getItemLayout]="getItemLayout"
+      [horizontal]="horizontal"
+      [inverted]="inverted"
+      [extraData]="extraData"
+      (endReached)="endReached.emit($event)"
+      [onEndReachedThreshold]="onEndReachedThreshold"
+      (startReached)="startReached.emit($event)"
+      [onStartReachedThreshold]="onStartReachedThreshold"
+      (refresh)="refresh.emit()"
+      [refreshRequested]="refresh.observed"
+      [refreshing]="refreshing"
+      [progressViewOffset]="progressViewOffset"
+      (viewableItemsChanged)="rowViewableItemsChanged($event)"
+      [viewabilityConfig]="viewabilityConfig"
+      [viewabilityConfigCallbackPairs]="rowViewabilityPairs"
+      (scrollToIndexFailed)="scrollToIndexFailed.emit($event)"
+      [initialNumToRender]="initialNumToRender"
+      [initialScrollIndex]="initialScrollIndex"
+      [maxToRenderPerBatch]="maxToRenderPerBatch"
+      [updateCellsBatchingPeriod]="updateCellsBatchingPeriod"
+      [windowSize]="windowSize"
+      [stickyHeaderIndices]="stickyHeaderIndices"
+      [maintainVisibleContentPosition]="maintainVisibleContentPosition"
+      [onScroll]="onScroll"
+      [onScrollBeginDrag]="onScrollBeginDrag"
+      [onScrollEndDrag]="onScrollEndDrag"
+      [onMomentumScrollBegin]="onMomentumScrollBegin"
+      [onMomentumScrollEnd]="onMomentumScrollEnd"
+      [scrollEventThrottle]="scrollEventThrottle"
+      [keyboardShouldPersistTaps]="keyboardShouldPersistTaps"
+      [keyboardDismissMode]="keyboardDismissMode"
+      [removeClippedSubviews]="resolvedRemoveClippedSubviews"
+      [nestedScrollEnabled]="nestedScrollEnabled"
+      [testID]="testID"
+      [nativeID]="nativeID"
+      [style]="resolvedStyle"
+      [contentContainerStyle]="contentContainerStyle"
+      ${LIST_ACCESSIBILITY_FORWARD}
+    >
+      <ng-template vListItem let-row let-separators="separators">
+        <view [style]="rowStyle">
+          @for (cell of rowCells(row, separators); track cell.key) {
+            <view [style]="columnCellStyle">
+              <ng-container
+                [vListOutlet]="itemDir?.templateRef"
+                [vListOutletContext]="cell.context"
+              ></ng-container>
+            </view>
+          }
+        </view>
+      </ng-template>
+      @if (headerDir !== undefined) {
+        <ng-template vListHeader>
+          <ng-container [vListOutlet]="headerDir.templateRef"></ng-container>
+        </ng-template>
+      }
+      @if (footerDir !== undefined) {
+        <ng-template vListFooter>
+          <ng-container [vListOutlet]="footerDir.templateRef"></ng-container>
+        </ng-template>
+      }
+      @if (emptyDir !== undefined) {
+        <ng-template vListEmpty>
+          <ng-container [vListOutlet]="emptyDir.templateRef"></ng-container>
+        </ng-template>
+      }
+      @if (separatorDir !== undefined) {
+        <ng-template
+          vListSeparator
+          let-highlighted="highlighted"
+          let-leadingItem="leadingItem"
+          let-trailingItem="trailingItem"
+        >
+          <ng-container
+            [vListOutlet]="separatorDir.templateRef"
+            [vListOutletContext]="
+              rowSeparatorContext(highlighted, leadingItem, trailingItem)
+            "
+          ></ng-container>
+        </ng-template>
+      }
+    </VirtualizedList>
+  } @else {
+    <VirtualizedList
+      [data]="data"
+      [getItem]="getFlatItem"
+      [getItemCount]="getFlatCount"
+      [keyExtractor]="keyExtractor"
+      [getItemLayout]="getItemLayout"
+      [horizontal]="horizontal"
+      [inverted]="inverted"
+      [extraData]="extraData"
+      (endReached)="endReached.emit($event)"
+      [onEndReachedThreshold]="onEndReachedThreshold"
+      (startReached)="startReached.emit($event)"
+      [onStartReachedThreshold]="onStartReachedThreshold"
+      (refresh)="refresh.emit()"
+      [refreshRequested]="refresh.observed"
+      [refreshing]="refreshing"
+      [progressViewOffset]="progressViewOffset"
+      (viewableItemsChanged)="viewableItemsChanged.emit($event)"
+      [viewabilityConfig]="viewabilityConfig"
+      [viewabilityConfigCallbackPairs]="viewabilityConfigCallbackPairs"
+      (scrollToIndexFailed)="scrollToIndexFailed.emit($event)"
+      [initialNumToRender]="initialNumToRender"
+      [initialScrollIndex]="initialScrollIndex"
+      [maxToRenderPerBatch]="maxToRenderPerBatch"
+      [updateCellsBatchingPeriod]="updateCellsBatchingPeriod"
+      [windowSize]="windowSize"
+      [stickyHeaderIndices]="stickyHeaderIndices"
+      [maintainVisibleContentPosition]="maintainVisibleContentPosition"
+      [onScroll]="onScroll"
+      [onScrollBeginDrag]="onScrollBeginDrag"
+      [onScrollEndDrag]="onScrollEndDrag"
+      [onMomentumScrollBegin]="onMomentumScrollBegin"
+      [onMomentumScrollEnd]="onMomentumScrollEnd"
+      [scrollEventThrottle]="scrollEventThrottle"
+      [keyboardShouldPersistTaps]="keyboardShouldPersistTaps"
+      [keyboardDismissMode]="keyboardDismissMode"
+      [removeClippedSubviews]="resolvedRemoveClippedSubviews"
+      [nestedScrollEnabled]="nestedScrollEnabled"
+      [testID]="testID"
+      [nativeID]="nativeID"
+      [style]="resolvedStyle"
+      [contentContainerStyle]="contentContainerStyle"
+      [itemTemplate]="itemDir?.templateRef"
+      [itemSeparatorTemplate]="separatorDir?.templateRef"
+      ${LIST_ACCESSIBILITY_FORWARD}
+    >
+      @if (headerDir !== undefined) {
+        <ng-template vListHeader>
+          <ng-container [vListOutlet]="headerDir.templateRef"></ng-container>
+        </ng-template>
+      }
+      @if (footerDir !== undefined) {
+        <ng-template vListFooter>
+          <ng-container [vListOutlet]="footerDir.templateRef"></ng-container>
+        </ng-template>
+      }
+      @if (emptyDir !== undefined) {
+        <ng-template vListEmpty>
+          <ng-container [vListOutlet]="emptyDir.templateRef"></ng-container>
+        </ng-template>
+      }
+    </VirtualizedList>
+  }
+`;