@symbiote-native/angular 3.3.0 → 3.4.0

package/src/components/image-shared.ts

@@ -1,6 +1,4 @@
-// The input surface and prop fold `AnimatedImage` builds on. The primitive is the `<image>` tag
-// (`ImageElement`), which folds its source via `registerImageBehavior`; `Animated.Image` stays a
-// component and is the only consumer left, one flat file (`symbiote-file-layout`).
+// The input surface and prop fold `Animated.Image` builds on, the `<image>` tag is `ImageElement`
 import { EventEmitter, computed, signal } from '@angular/core';
 import {
   gateWanted,
@@ -9,20 +7,12 @@ import {
 } from '../gate-demand';
 import {
   imageStatics,
-  renderImage,
-  resolveAccessibilityProps,
   type IAccessibilityProps,
   type IAriaProps,
   type IImageProps,
-  type IImageSourceProp,
-  type IResizeMode,
 } from '@symbiote-native/components';
-import {
-  isSymbioteEvent,
-  type IStyleProp,
-  type ISymbioteEvent,
-  type IViewStyle,
-} from '@symbiote-native/engine';
+import { isSymbioteEvent, type ISymbioteEvent } from '@symbiote-native/engine';
+import { resolveImageProps } from './image-props-resolve';
 
 export { setImageSourceResolver } from '@symbiote-native/components';
 export type {
@@ -33,284 +23,8 @@ export type {
   IImageSize,
   IImageCacheStatus,
 } from '@symbiote-native/components';
-
-export const IMAGE_INPUTS = [
-  'source',
-  'defaultSource',
-  'loadingIndicatorSource',
-  'style',
-  'resizeMode',
-  'resizeMethod',
-  'tintColor',
-  'blurRadius',
-  'capInsets',
-  'fadeDuration',
-  'progressiveRenderingEnabled',
-  'src',
-  'srcSet',
-  'alt',
-  'width',
-  'height',
-  'crossOrigin',
-  'referrerPolicy',
-  'testID',
-  'nativeID',
-  'accessible',
-  'accessibilityLabel',
-  'accessibilityHint',
-  'accessibilityRole',
-  'accessibilityState',
-  'accessibilityValue',
-  'accessibilityActions',
-  'accessibilityLabelledBy',
-  'importantForAccessibility',
-  'accessibilityLiveRegion',
-  'screenReaderFocusable',
-  'accessibilityViewIsModal',
-  'accessibilityElementsHidden',
-  'accessibilityIgnoresInvertColors',
-  'accessibilityLanguage',
-  'accessibilityRespondsToUserInteraction',
-  'accessibilityShowsLargeContentViewer',
-  'accessibilityLargeContentTitle',
-  'role',
-  'ariaLabel: aria-label',
-  'ariaLabelledBy: aria-labelledby',
-  'ariaLive: aria-live',
-  'ariaHidden: aria-hidden',
-  'ariaBusy: aria-busy',
-  'ariaChecked: aria-checked',
-  'ariaDisabled: aria-disabled',
-  'ariaExpanded: aria-expanded',
-  'ariaSelected: aria-selected',
-  'ariaModal: aria-modal',
-  'ariaValueMax: aria-valuemax',
-  'ariaValueMin: aria-valuemin',
-  'ariaValueNow: aria-valuenow',
-  'ariaValueText: aria-valuetext',
-  'onAccessibilityAction',
-  'onAccessibilityTap',
-  'onMagicTap',
-  'onAccessibilityEscape',
-  'onLoadStart',
-  'onLoad',
-  'onLoadEnd',
-  'onError',
-  'onProgress',
-  'onPartialLoad',
-];
-
-export const IMAGE_OUTPUTS = [
-  'accessibilityAction',
-  'accessibilityTap',
-  'magicTap',
-  'accessibilityEscape',
-  'loadStart',
-  'load',
-  'loadEnd',
-  'error',
-  'progress',
-  'partialLoad',
-];
-
-type IImagePassthroughProps = Record<string, unknown> &
-  IAccessibilityProps &
-  IAriaProps &
-  Pick<
-    IImageProps,
-    | 'resizeMethod'
-    | 'blurRadius'
-    | 'capInsets'
-    | 'fadeDuration'
-    | 'progressiveRenderingEnabled'
-    | 'onLoadStart'
-    | 'onLoad'
-    | 'onLoadEnd'
-    | 'onError'
-    | 'onProgress'
-    | 'onPartialLoad'
-  >;
-
-function asSource(value: unknown): IImageSourceProp | undefined {
-  if (typeof value === 'number') return value;
-  if (typeof value === 'object' && value !== null) return value;
-  return undefined;
-}
-
-function asResizeMode(value: unknown): IResizeMode | undefined {
-  if (
-    value === 'cover' ||
-    value === 'contain' ||
-    value === 'stretch' ||
-    value === 'repeat' ||
-    value === 'center'
-  ) {
-    return value;
-  }
-  return undefined;
-}
-
-function asString(value: unknown): string | undefined {
-  return typeof value === 'string' ? value : undefined;
-}
-
-function asNumber(value: unknown): number | undefined {
-  return typeof value === 'number' ? value : undefined;
-}
-
-function asCrossOrigin(
-  value: unknown,
-): 'anonymous' | 'use-credentials' | undefined {
-  return value === 'anonymous' || value === 'use-credentials'
-    ? value
-    : undefined;
-}
-
-function asStyle(value: unknown): IStyleProp<IViewStyle> | undefined {
-  return typeof value === 'object' && value !== null ? value : undefined;
-}
-
-// Narrows a value out of the untyped animated prop bag. A runtime guard rather than a cast: the
-// bag is built at runtime from merged animated values, so nothing upstream has proven the shape.
-export function isImageEventCallback(
-  value: unknown,
-): value is (event: ISymbioteEvent) => void {
-  return typeof value === 'function';
-}
-
-export function resolveImageProps(
-  input: Record<string, unknown>,
-): Record<string, unknown> {
-  const passthrough: IImagePassthroughProps = {
-    resizeMethod: input['resizeMethod'] as IImageProps['resizeMethod'],
-    blurRadius: asNumber(input['blurRadius']),
-    capInsets: input['capInsets'] as IImageProps['capInsets'],
-    fadeDuration: asNumber(input['fadeDuration']),
-    progressiveRenderingEnabled:
-      typeof input['progressiveRenderingEnabled'] === 'boolean'
-        ? input['progressiveRenderingEnabled']
-        : undefined,
-    testID: asString(input['testID']),
-    nativeID: asString(input['nativeID']),
-    accessible:
-      typeof input['accessible'] === 'boolean'
-        ? input['accessible']
-        : undefined,
-    accessibilityLabel: asString(input['accessibilityLabel']),
-    accessibilityHint: asString(input['accessibilityHint']),
-    accessibilityRole: input[
-      'accessibilityRole'
-    ] as IAccessibilityProps['accessibilityRole'],
-    accessibilityState: input[
-      'accessibilityState'
-    ] as IAccessibilityProps['accessibilityState'],
-    accessibilityValue: input[
-      'accessibilityValue'
-    ] as IAccessibilityProps['accessibilityValue'],
-    accessibilityActions: input[
-      'accessibilityActions'
-    ] as IAccessibilityProps['accessibilityActions'],
-    accessibilityLabelledBy: input[
-      'accessibilityLabelledBy'
-    ] as IAccessibilityProps['accessibilityLabelledBy'],
-    importantForAccessibility: input[
-      'importantForAccessibility'
-    ] as IAccessibilityProps['importantForAccessibility'],
-    accessibilityLiveRegion: input[
-      'accessibilityLiveRegion'
-    ] as IAccessibilityProps['accessibilityLiveRegion'],
-    screenReaderFocusable:
-      typeof input['screenReaderFocusable'] === 'boolean'
-        ? input['screenReaderFocusable']
-        : undefined,
-    accessibilityViewIsModal:
-      typeof input['accessibilityViewIsModal'] === 'boolean'
-        ? input['accessibilityViewIsModal']
-        : undefined,
-    accessibilityElementsHidden:
-      typeof input['accessibilityElementsHidden'] === 'boolean'
-        ? input['accessibilityElementsHidden']
-        : undefined,
-    accessibilityIgnoresInvertColors:
-      typeof input['accessibilityIgnoresInvertColors'] === 'boolean'
-        ? input['accessibilityIgnoresInvertColors']
-        : undefined,
-    accessibilityLanguage: asString(input['accessibilityLanguage']),
-    accessibilityRespondsToUserInteraction:
-      typeof input['accessibilityRespondsToUserInteraction'] === 'boolean'
-        ? input['accessibilityRespondsToUserInteraction']
-        : undefined,
-    accessibilityShowsLargeContentViewer:
-      typeof input['accessibilityShowsLargeContentViewer'] === 'boolean'
-        ? input['accessibilityShowsLargeContentViewer']
-        : undefined,
-    accessibilityLargeContentTitle: asString(
-      input['accessibilityLargeContentTitle'],
-    ),
-    role: input['role'] as IAriaProps['role'],
-    'aria-label': asString(input['ariaLabel'] ?? input['aria-label']),
-    'aria-labelledby': asString(
-      input['ariaLabelledBy'] ?? input['aria-labelledby'],
-    ),
-    'aria-live': input['ariaLive'] as IAriaProps['aria-live'],
-    'aria-hidden':
-      typeof input['ariaHidden'] === 'boolean'
-        ? input['ariaHidden']
-        : undefined,
-    'aria-busy':
-      typeof input['ariaBusy'] === 'boolean' ? input['ariaBusy'] : undefined,
-    'aria-checked': input['ariaChecked'] as IAriaProps['aria-checked'],
-    'aria-disabled':
-      typeof input['ariaDisabled'] === 'boolean'
-        ? input['ariaDisabled']
-        : undefined,
-    'aria-expanded':
-      typeof input['ariaExpanded'] === 'boolean'
-        ? input['ariaExpanded']
-        : undefined,
-    'aria-selected':
-      typeof input['ariaSelected'] === 'boolean'
-        ? input['ariaSelected']
-        : undefined,
-    'aria-modal':
-      typeof input['ariaModal'] === 'boolean' ? input['ariaModal'] : undefined,
-    'aria-valuemax': asNumber(input['ariaValueMax']),
-    'aria-valuemin': asNumber(input['ariaValueMin']),
-    'aria-valuenow': asNumber(input['ariaValueNow']),
-    'aria-valuetext': asString(input['ariaValueText']),
-    onAccessibilityAction: input[
-      'onAccessibilityAction'
-    ] as IImageProps['onLoad'],
-    onAccessibilityTap: input['onAccessibilityTap'] as IImageProps['onLoad'],
-    onMagicTap: input['onMagicTap'] as IImageProps['onLoad'],
-    onAccessibilityEscape: input[
-      'onAccessibilityEscape'
-    ] as IImageProps['onLoad'],
-    onLoadStart: input['onLoadStart'] as IImageProps['onLoadStart'],
-    onLoad: input['onLoad'] as IImageProps['onLoad'],
-    onLoadEnd: input['onLoadEnd'] as IImageProps['onLoadEnd'],
-    onError: input['onError'] as IImageProps['onError'],
-    onProgress: input['onProgress'] as IImageProps['onProgress'],
-    onPartialLoad: input['onPartialLoad'] as IImageProps['onPartialLoad'],
-  };
-
-  return renderImage({
-    source: asSource(input['source']),
-    defaultSource: asSource(input['defaultSource']),
-    loadingIndicatorSource: asSource(input['loadingIndicatorSource']),
-    style: asStyle(input['style']),
-    resizeMode: asResizeMode(input['resizeMode']),
-    tintColor: asString(input['tintColor']),
-    src: asString(input['src']),
-    srcSet: asString(input['srcSet']),
-    alt: asString(input['alt']),
-    width: asNumber(input['width']),
-    height: asNumber(input['height']),
-    crossOrigin: asCrossOrigin(input['crossOrigin']),
-    referrerPolicy: asString(input['referrerPolicy']),
-    passthrough: resolveAccessibilityProps(passthrough),
-  }).props;
-}
+export { IMAGE_INPUTS, IMAGE_OUTPUTS } from './image-inputs';
+export { isImageEventCallback, resolveImageProps } from './image-props-resolve';
 
 export abstract class ImageBase {
   static readonly getSize = imageStatics.getSize;
@@ -326,6 +40,7 @@ export abstract class ImageBase {
   style: unknown;
   resizeMode: unknown;
   resizeMethod: IImageProps['resizeMethod'];
+  resizeMultiplier: number | undefined;
   tintColor: unknown;
   blurRadius: number | undefined;
   capInsets: IImageProps['capInsets'];
@@ -462,7 +177,16 @@ export abstract class ImageBase {
     this.partialLoad.emit(event);
   }
 
+  // Three groups, so no single getter holds every input name at once
   protected get imageInputProps(): Record<string, unknown> {
+    return {
+      ...this.sourceInputProps,
+      ...this.accessibilityInputProps,
+      ...this.handlerInputProps,
+    };
+  }
+
+  private get sourceInputProps(): Record<string, unknown> {
     return {
       source: this.source,
       defaultSource: this.defaultSource,
@@ -470,6 +194,7 @@ export abstract class ImageBase {
       style: this.style,
       resizeMode: this.resizeMode,
       resizeMethod: this.resizeMethod,
+      resizeMultiplier: this.resizeMultiplier,
       tintColor: this.tintColor,
       blurRadius: this.blurRadius,
       capInsets: this.capInsets,
@@ -482,6 +207,11 @@ export abstract class ImageBase {
       height: this.height,
       crossOrigin: this.crossOrigin,
       referrerPolicy: this.referrerPolicy,
+    };
+  }
+
+  private get accessibilityInputProps(): Record<string, unknown> {
+    return {
       testID: this.testID,
       nativeID: this.nativeID,
       accessible: this.accessible,
@@ -519,6 +249,11 @@ export abstract class ImageBase {
       ariaValueMin: this.ariaValueMin,
       ariaValueNow: this.ariaValueNow,
       ariaValueText: this.ariaValueText,
+    };
+  }
+
+  private get handlerInputProps(): Record<string, unknown> {
+    return {
       onAccessibilityAction: this.gatedAccessibilityHandler(
         'accessibilityAction',
         this.onAccessibilityAction,

package/src/components/input-accessory-view-props.ts

@@ -9,12 +9,16 @@ import type {
   IAccessibilityProps,
   IAriaProps,
 } from '@symbiote-native/components';
-import type { IStyleProp, IViewStyle } from '@symbiote-native/engine';
+import type {
+  IColorValue,
+  IStyleProp,
+  IViewStyle,
+} from '@symbiote-native/engine';
 
-export interface IAngularInputAccessoryViewProps
-  extends IAccessibilityProps, IAriaProps {
-  // The id a TextInput's inputAccessoryViewID points at to dock above its keyboard.
-  nativeID?: string;
-  backgroundColor?: string;
-  style?: IStyleProp<IViewStyle>;
-}
+export type IAngularInputAccessoryViewProps = IAccessibilityProps &
+  IAriaProps & {
+    // The id a TextInput's inputAccessoryViewID points at to dock above its keyboard.
+    nativeID?: string;
+    backgroundColor?: IColorValue;
+    style?: IStyleProp<IViewStyle>;
+  };

package/src/components/keyboard-avoiding-view/index.ts

@@ -25,12 +25,8 @@ import {
   type OnInit,
 } from '@angular/core';
 import {
-  computeInset,
-  configureKeyboardAvoidingAnimation,
+  createKeyboardAvoidingModel,
   keyboardAvoidingEventNamesFor,
-  readKeyboardAnimationTiming,
-  readKeyboardFrame,
-  readLayoutFrame,
   readPrefersCrossFadeTransitions,
   resolveAccessibilityProps,
   resolveKeyboardAvoidingLayout,
@@ -39,12 +35,10 @@ import {
   type IAriaProps,
   type IKeyboardAvoidingBehavior,
   type IKeyboardAvoidingLayout,
-  type IMeasuredFrame,
 } from '@symbiote-native/components';
 import {
   Keyboard,
   Platform,
-  dlog,
   isSymbioteEvent,
   type IEventSubscription,
   type IStyleProp,
@@ -64,15 +58,15 @@ export type { IKeyboardAvoidingBehavior } from '@symbiote-native/components';
 // Mirrors React's IKeyboardAvoidingViewProps minus children (Angular takes children via
 // <ng-content>), declared per-adapter over the shared accessibility base since a framework-specific
 // children field keeps it from being fully shared across adapters.
-export interface IAngularKeyboardAvoidingViewProps
-  extends IAccessibilityProps, IAriaProps {
-  behavior?: IKeyboardAvoidingBehavior;
-  enabled?: boolean;
-  keyboardVerticalOffset?: number;
-  contentContainerStyle?: IStyleProp<IViewStyle>;
-  style?: IStyleProp<IViewStyle>;
-  onLayout?: (event: ISymbioteEvent) => void;
-}
+export type IAngularKeyboardAvoidingViewProps = IAccessibilityProps &
+  IAriaProps & {
+    behavior?: IKeyboardAvoidingBehavior;
+    enabled?: boolean;
+    keyboardVerticalOffset?: number;
+    contentContainerStyle?: IStyleProp<IViewStyle>;
+    style?: IStyleProp<IViewStyle>;
+    onLayout?: (event: ISymbioteEvent) => void;
+  };
 
 // What the component itself takes as plain @Input()s: the full surface minus onLayout and the
 // accessibility callbacks, which it exposes as real @Output() EventEmitters instead (see the
@@ -133,36 +127,41 @@ export class KeyboardAvoidingView
   @Input() testID?: string;
   @Input() nativeID?: string;
 
-  // How far the view must move so it no longer overlaps the keyboard. A plain field, not reactive:
-  // OnPush + zoneless means a keyboard event mutates it and pulls the view via markForCheck.
+  // Plain field, the model sets it and `markForCheck` pulls the OnPush view
   private inset = 0;
-  // Mutable, not state: changing the measured frame alone shouldn't re-render; it feeds the next
-  // keyboard event's inset math (React's frameRef / initialHeightRef, Vue's frame / initialHeight).
-  private frame?: IMeasuredFrame;
-  private initialHeight?: number;
-  // The iOS "Prefer Cross-Fade Transitions" setting, read once per mount. Deliberately a plain
-  // field and NOT markForCheck'd when the promise lands: it is a device setting that cannot change
-  // mid-session, and it feeds only the NEXT keyboard event's math — never the current render — so
-  // under zoneless CD there is nothing to repaint at resolve time. The keyboard event that does use
-  // it already calls markForCheck itself.
+  // A device setting that cannot change mid-session, learning it must not repaint
   private prefersCrossFadeTransitions = false;
   private subscriptions: IEventSubscription[] = [];
 
   private readonly changeDetector = inject(ChangeDetectorRef);
-  // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
-  // onto (see anchorHostStyle's doc comment) — NOT a ViewChild into the inner view (this
-  // component has none; the wrapper IS the outer template node hostProps binds onto).
+  // This component's own host, the anchor that `class` at the use site resolves onto
   private readonly elementRef = inject(ElementRef);
 
+  // Options are read at event time, т.к. an `@Input` can change under a live subscription
+  private readonly model = createKeyboardAvoidingModel({
+    options: () => ({
+      behavior: this.behavior,
+      enabled: this.enabled !== false,
+      keyboardVerticalOffset:
+        this.keyboardVerticalOffset ?? DEFAULT_VERTICAL_OFFSET,
+    }),
+    setInset: value => {
+      this.inset = value;
+      this.changeDetector.markForCheck();
+    },
+    prefersCrossFade: () => this.prefersCrossFadeTransitions,
+  });
+
   ngOnInit(): void {
-    // TWO events, picked per host, never three: iOS takes the will* pair so the view rides up with
-    // the keyboard animation, Android the did* pair. The change-frame notification is deliberately
-    // absent — with an undocked/split/floating iOS keyboard it fires BEFORE the hide, so listening
-    // to it applies a frame captured mid-dismissal (RN KeyboardAvoidingView.js's own comment).
+    // iOS takes the `will*` pair so the view rides up with the keyboard, Android the `did*` pair
     const events = keyboardAvoidingEventNamesFor(Platform.OS);
     this.subscriptions = [
-      Keyboard.addListener(events.show, payload => this.onShow(payload)),
-      Keyboard.addListener(events.hide, () => this.onHide()),
+      Keyboard.addListener(events.show, payload => {
+        this.model.keyboardShown(payload);
+        // An unchanged inset skips `setInset`, the event still has to carry a new `@Input` down
+        this.changeDetector.markForCheck();
+      }),
+      Keyboard.addListener(events.hide, this.model.keyboardHidden),
     ];
     // The core wrapper, not AccessibilityInfo directly: the engine's iOS getter REJECTS on a
     // native error (RN parity), and nobody awaits this read, so an unwrapped call would surface
@@ -177,47 +176,10 @@ export class KeyboardAvoidingView
     this.subscriptions = [];
   }
 
-  private onShow(payload: unknown): void {
-    const keyboard = readKeyboardFrame(payload);
-    const offset = this.keyboardVerticalOffset ?? DEFAULT_VERTICAL_OFFSET;
-    const next = computeInset(this.frame, keyboard, offset, {
-      // Read off the field at event time, not captured when the subscription was built: `behavior`
-      // is an @Input that can change under a long-lived subscription, and a stale one keeps
-      // applying the old mode's math (it gates the previous-inset correction below).
-      behavior: this.behavior,
-      // The inset CURRENTLY applied (RN's this.state.bottom), read off the field at event time so
-      // 'height' mode's fixpoint correction sees the live value: that mode SHRINKS the wrapper by
-      // the inset, so the next onLayout reports a frame shorter by exactly that much.
-      previousInset: this.inset,
-      prefersCrossFadeTransitions: this.prefersCrossFadeTransitions,
-    });
-    // RN's `_updateBottomIfNecessary` skips the animation when the inset did not change.
-    if (next !== this.inset)
-      configureKeyboardAvoidingAnimation(
-        readKeyboardAnimationTiming(payload),
-        this.enabled !== false,
-      );
-    dlog(`KeyboardAvoidingView show -> inset ${next}`);
-    this.inset = next;
-    this.changeDetector.markForCheck();
-  }
-
-  private onHide(): void {
-    dlog('KeyboardAvoidingView hide -> inset 0');
-    this.inset = 0;
-    this.changeDetector.markForCheck();
-  }
-
-  // The wrapper's onLayout measures the frame BEFORE forwarding to the caller's onLayout, so the
-  // next keyboard event's inset math has the view's real position (React/Vue's handleLayout).
+  // Measured before the caller's `layout` output fires
   handleLayout(event: unknown): void {
     if (!isSymbioteEvent(event)) return;
-    const measured = readLayoutFrame(event.nativeEvent.layout);
-    if (measured !== undefined) {
-      this.frame = measured;
-      if (this.initialHeight === undefined)
-        this.initialHeight = measured.height;
-    }
+    this.model.laidOut(event.nativeEvent.layout);
     this.layout.emit(event);
   }
 
@@ -227,14 +189,12 @@ export class KeyboardAvoidingView
     return this.enabled === false ? 0 : this.inset;
   }
 
-  // The behavior + effective inset → wrapper/inner styles and the nesting decision (the shared core
-  // of RN's render). Recomputed per CD pass, the Angular twin of React/Vue's per-render call.
-  // Named `resolvedLayout`, not `layout` — that name is now the onLayout @Output() EventEmitter.
+  // Not `layout`, that name is the `onLayout` output
   private get resolvedLayout(): IKeyboardAvoidingLayout {
     return resolveKeyboardAvoidingLayout({
       behavior: this.behavior,
       effectiveInset: this.effectiveInset,
-      initialHeight: this.initialHeight,
+      initialHeight: this.model.initialHeight(),
       style: this.style,
       contentContainerStyle: this.contentContainerStyle,
     });

package/src/components/layout-conformance-props.ts

@@ -0,0 +1,8 @@
+// The prop surface of `<layout-conformance>`, RN's `experimental_LayoutConformance`, for Angular
+// Children come through `<ng-content>`, so there is no `children` here
+import type { ILayoutConformanceMode } from '@symbiote-native/components';
+
+export type IAngularLayoutConformanceProps = {
+  // `strict` lays out by the W3C spec even where it breaks compatibility
+  mode: ILayoutConformanceMode;
+};