@symbiote-native/angular 0.6.2 → 0.8.0

package/src/components/switch/shared.ts

@@ -1,5 +1,18 @@
-import { Directive, EventEmitter, Output } from '@angular/core';
-import { renderSwitch, resolveAccessibilityProps } from '@symbiote-native/components';
+import {
+  ChangeDetectorRef,
+  Directive,
+  EventEmitter,
+  Output,
+  computed,
+  inject,
+  signal,
+  type OnChanges,
+} from '@angular/core';
+import type { ControlValueAccessor } from '@angular/forms';
+import {
+  renderSwitch,
+  resolveAccessibilityProps,
+} from '@symbiote-native/components';
 import type {
   ISwitchPlatform,
   ISwitchProps,
@@ -23,7 +36,10 @@ import {
   type IViewStyle,
 } from '@symbiote-native/engine';
 
-export type { ISwitchProps, ISwitchTrackColor } from '@symbiote-native/components';
+export type {
+  ISwitchProps,
+  ISwitchTrackColor,
+} from '@symbiote-native/components';
 
 export type ISwitchInputs = Pick<
   ISwitchProps,
@@ -78,7 +94,9 @@ function isSwitchEvent(event: unknown): event is ISymbioteEvent {
 // concrete subclasses are real @Components — ngc's AOT build (NG2007) requires it the moment the
 // base itself carries decorated members (@Output() here), mirroring ScrollViewBase.
 @Directive()
-export abstract class SwitchBase implements ISwitchInputs {
+export abstract class SwitchBase
+  implements ISwitchInputs, ControlValueAccessor, OnChanges
+{
   // The value/change lifecycle as real Angular events: `(valueChange)="onToggle($event)"`, not
   // `[onValueChange]="onToggle"` — mirrors Pressable's press/hover @Output() conversion. Unlike
   // Pressable's createPressHandlers, handleChange() below calls `.emit()` unconditionally: it needs
@@ -105,9 +123,46 @@ export abstract class SwitchBase implements ISwitchInputs {
   'aria-checked': boolean | 'mixed' | undefined;
 
   protected abstract readonly platform: ISwitchHostPlatform;
+  // NOT a hostProps dependency - only snapBackIfNeeded reads it, and the bag's `value` comes from
+  // the @Input, not from this reducer state. So it stays a plain field; if a future change makes
+  // the bag read it, it must become a signal first (see inputsRevision's note).
   private switchState: ISwitchState = createInitialSwitchState();
+  // Only setDisabledState()/writeValue() need this: @angular/forms mutates `value`/`disabled` from
+  // OUTSIDE Angular's own binding path, which doesn't itself schedule a tick under zoneless CD.
+  private readonly changeDetector = inject(ChangeDetectorRef);
+
+  // Bridges the non-reactive @Input fields into the reactive graph so hostProps below can be a
+  // memoized computed(). Signal inputs would make this unnecessary, but `input()` is visible only
+  // to the AOT compiler and this package's unit suite runs on JIT - see the
+  // `angular-adapter-change-detection` skill, §6. `signal()`/`computed()` are plain runtime APIs
+  // and need no compiler support, which is what makes this bridge possible at all.
+  //
+  // Bumped from ngOnChanges (covers every @Input) AND from the two ControlValueAccessor writers
+  // below, which assign `value`/`disabled` from OUTSIDE Angular's binding path and so never reach
+  // ngOnChanges. ONLY a genuine dependency of the bag may bump it - widening it to "bump on
+  // everything" silently un-memoizes the bag and defeats the point. State that is not an @Input
+  // and is not one of those two writers needs its OWN signal instead (the platform components'
+  // anchor style is exactly that case).
+  private readonly inputsRevision = signal(0);
+
+  ngOnChanges(): void {
+    this.inputsRevision.update(revision => revision + 1);
+  }
+
+  // MEASURED 2026-08-16: as a getter this rebuilt the bag on every refresh of this view, so
+  // `[symbioteHostProps]`'s reference check failed every time and every key was re-pushed through
+  // Renderer2 -> routeProp - pure waste when nothing changed. computed() returns the SAME object
+  // until a tracked dependency actually changes, and the input setter then skips the whole spread.
+  //
+  // A computed FIELD cannot be overridden by a subclass accessor the way a getter can, so the
+  // platform components override buildHostProps() below and this stays the single memoization
+  // point for every platform.
+  readonly hostProps = computed<IHostProps>(() => {
+    this.inputsRevision();
+    return this.buildHostProps();
+  });
 
-  get hostProps(): IHostProps {
+  protected buildHostProps(): IHostProps {
     const props = resolveAccessibilityProps(this.inputProps());
     const {
       value,
@@ -144,7 +199,10 @@ export abstract class SwitchBase implements ISwitchInputs {
     if (next === undefined) return;
 
     this.valueChange.emit(next);
-    this.switchState = switchReducer(this.switchState, { type: 'native-reported', value: next });
+    this.switchState = switchReducer(this.switchState, {
+      type: 'native-reported',
+      value: next,
+    });
 
     const hostNode = readSwitchNode(node);
     if (hostNode === null) return;
@@ -168,6 +226,35 @@ export abstract class SwitchBase implements ISwitchInputs {
     });
   }
 
+  // ControlValueAccessor — `value` is a plain field feeding `hostProps` on every CD check, no
+  // ngOnChanges/stale-safe commit dance to guard (unlike TextInput, a boolean toggle has no
+  // keystroke to race), so writeValue()/setDisabledState() can set it straight.
+  writeValue(value: boolean | null): void {
+    this.value = value ?? false;
+    // `value` feeds hostProps but this write bypasses Angular's binding path, so ngOnChanges never
+    // fires for it - without the bump the memoized bag would keep reporting the old value and the
+    // switch would stop reflecting a form-driven change.
+    this.inputsRevision.update(revision => revision + 1);
+    this.changeDetector.markForCheck();
+  }
+
+  registerOnChange(fn: (value: boolean) => void): void {
+    this.valueChange.subscribe(fn);
+  }
+
+  registerOnTouched(fn: () => void): void {
+    // Switch has no blur concept (it's a discrete toggle, not a text field) — `change` is the
+    // closest touched signal, same convention Angular's own checkbox CVAs use.
+    this.change.subscribe(() => fn());
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+    // Same reason as writeValue: an @angular/forms write that never reaches ngOnChanges.
+    this.inputsRevision.update(revision => revision + 1);
+    this.changeDetector.markForCheck();
+  }
+
   private inputProps(): Partial<ISwitchProps> {
     const props: Partial<ISwitchProps> = {
       value: this.value,

package/src/components/text-input.ts

@@ -28,9 +28,11 @@
 import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   ElementRef,
   EventEmitter,
+  forwardRef,
   inject,
   Input,
   Output,
@@ -40,6 +42,7 @@ import {
   type OnDestroy,
   type SimpleChanges,
 } from '@angular/core';
+import { NG_VALUE_ACCESSOR, type ControlValueAccessor } from '@angular/forms';
 import {
   foldText,
   eventCountFromChange,
@@ -79,15 +82,23 @@ import {
   anchorHostStyle,
   MultilineTextInputHost,
   SymbioteHostPropsDirective,
+  SymbioteStyleInputDirective,
   TextInputHost,
 } from '../primitives';
 
-export type { ITextInputHandle, ITextInputSelection, IInputMode, IEnterKeyHint, ISubmitBehavior };
+export type {
+  ITextInputHandle,
+  ITextInputSelection,
+  IInputMode,
+  IEnterKeyHint,
+  ISubmitBehavior,
+};
 
 // Mirrors React's ITextInputProps minus nothing (TextInput has no children) — declared
 // per-adapter over the shared accessibility base because Angular's input surface aliases the
 // aria-* keys to camelCase @Inputs, unlike the plain agnostic fields shared across adapters.
-export interface IAngularTextInputProps extends IAccessibilityProps, IAriaProps {
+export interface IAngularTextInputProps
+  extends IAccessibilityProps, IAriaProps {
   value?: string;
   defaultValue?: string;
   placeholder?: string;
@@ -154,9 +165,19 @@ export type IAngularTextInputInputs = Omit<
 @Component({
   selector: 'TextInput',
   standalone: true,
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [SymbioteHostPropsDirective, TextInputHost, MultilineTextInputHost],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => TextInput),
+      multi: true,
+    },
+  ],
   template: `
     @if (isMultiline) {
       <symbiote-text-input-multiline
@@ -196,7 +217,13 @@ export type IAngularTextInputInputs = Omit<
   `,
 })
 export class TextInput
-  implements IAngularTextInputInputs, ITextInputHandle, OnChanges, AfterViewInit, OnDestroy
+  implements
+    IAngularTextInputInputs,
+    ITextInputHandle,
+    OnChanges,
+    AfterViewInit,
+    OnDestroy,
+    ControlValueAccessor
 {
   @Input() value?: string;
   @Input() defaultValue?: string;
@@ -263,8 +290,10 @@ export class TextInput
   @Input() accessibilityValue?: IAccessibilityProps['accessibilityValue'];
   @Input() accessibilityActions?: IAccessibilityProps['accessibilityActions'];
   @Input() accessibilityLabelledBy?: string | string[];
-  @Input() importantForAccessibility?: IAccessibilityProps['importantForAccessibility'];
-  @Input() accessibilityLiveRegion?: IAccessibilityProps['accessibilityLiveRegion'];
+  @Input()
+  importantForAccessibility?: IAccessibilityProps['importantForAccessibility'];
+  @Input()
+  accessibilityLiveRegion?: IAccessibilityProps['accessibilityLiveRegion'];
   @Input() screenReaderFocusable?: boolean;
   @Input() accessibilityViewIsModal?: boolean;
   @Input() accessibilityElementsHidden?: boolean;
@@ -291,6 +320,9 @@ export class TextInput
   // onto (see anchorHostStyle's doc comment) — NOT `hostRef` above, which targets the real inner
   // symbiote-text-input(-multiline) one level down.
   private readonly elementRef = inject(ElementRef);
+  // Only setDisabledState() needs this: it mutates `editable` from OUTSIDE Angular's own binding
+  // path (@angular/forms calling in directly), which doesn't itself schedule a tick under zoneless CD.
+  private readonly changeDetector = inject(ChangeDetectorRef);
 
   // The count native last acknowledged; the controlled write / clear / setSelection echo it so
   // native's eventLag lands on 0 and the write applies. A plain field (read live by the imperative
@@ -304,6 +336,9 @@ export class TextInput
   // synchronous focus getter (RN's TextInputState holds the same).
   private focused = false;
   private cancelAutoFocus?: () => void;
+  // Mirrors SimpleChange.firstChange for the writeValue() path below (@angular/forms' own initial
+  // write, distinct from ngOnChanges' firstChange, which never fires for a forms-driven write).
+  private isFirstFormWrite = true;
 
   get isMultiline(): boolean {
     return this.multiline === true;
@@ -323,14 +358,44 @@ export class TextInput
   ngOnChanges(changes: SimpleChanges): void {
     const valueChange = changes['value'];
     if (valueChange === undefined) return;
-    // The first value is the seed, not a divergence: record it and do not command.
     if (valueChange.firstChange) {
+      // The initial value already reached native via createNode's hostProps — seed
+      // lastNativeText instead of re-commanding it (see commitControlledValue's own comment on
+      // why a redundant re-push isn't just wasteful — it can race a keystroke).
       this.lastNativeText = foldText(this.value, this.defaultValue);
       return;
     }
     this.commitControlledValue();
   }
 
+  // ControlValueAccessor — @angular/forms calls these straight into this component, bypassing
+  // template bindings/ngOnChanges entirely. `isFirstFormWrite` mirrors SimpleChange.firstChange:
+  // the initial value already reached native via createNode's hostProps, so it must seed
+  // lastNativeText, not re-command (see commitControlledValue's own comment on why a redundant
+  // re-push isn't just wasteful — it can race a keystroke).
+  writeValue(value: string | null): void {
+    this.value = value ?? undefined;
+    if (this.isFirstFormWrite) {
+      this.isFirstFormWrite = false;
+      this.lastNativeText = foldText(this.value, this.defaultValue);
+      return;
+    }
+    this.commitControlledValue();
+  }
+
+  registerOnChange(fn: (value: string) => void): void {
+    this.valueChange.subscribe(fn);
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.blurEvent.subscribe(() => fn());
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.editable = !isDisabled;
+    this.changeDetector.markForCheck();
+  }
+
   // autoFocus is driven in JS, not as a native prop: once the node is committed, command `focus`
   // down once (RN does the same via TextInputState.focusInput). Under Angular's async-batched
   // commit the node has no Fabric tag at ngAfterViewInit, so whenCommitted defers the command to
@@ -340,7 +405,9 @@ export class TextInput
     const node = this.hostNode;
     if (node === undefined) return;
     dlog('TextInput autoFocus -> focus command');
-    this.cancelAutoFocus = whenCommitted(node, () => dispatchViewCommand(node, 'focus', []));
+    this.cancelAutoFocus = whenCommitted(node, () =>
+      dispatchViewCommand(node, 'focus', []),
+    );
   }
 
   ngOnDestroy(): void {
@@ -408,7 +475,12 @@ export class TextInput
   clear(): void {
     const node = this.hostNode;
     if (node === undefined) return;
-    dispatchViewCommand(node, 'setTextAndSelection', [this.mostRecentEventCount, '', 0, 0]);
+    dispatchViewCommand(node, 'setTextAndSelection', [
+      this.mostRecentEventCount,
+      '',
+      0,
+      0,
+    ]);
     this.lastNativeText = '';
   }
 
@@ -438,12 +510,20 @@ export class TextInput
     const value = this.value;
     if (!shouldCommandText(this.lastNativeText, value)) return;
     const selStart = this.selection?.start ?? SELECTION_NONE;
-    const selEnd = this.selection?.end ?? this.selection?.start ?? SELECTION_NONE;
+    const selEnd =
+      this.selection?.end ?? this.selection?.start ?? SELECTION_NONE;
     const count = this.mostRecentEventCount;
-    dlog(`TextInput setTextAndSelection count=${count} text=${JSON.stringify(value)}`);
+    dlog(
+      `TextInput setTextAndSelection count=${count} text=${JSON.stringify(value)}`,
+    );
     this.lastNativeText = value;
     whenCommitted(node, () =>
-      dispatchViewCommand(node, 'setTextAndSelection', [count, value, selStart, selEnd]),
+      dispatchViewCommand(node, 'setTextAndSelection', [
+        count,
+        value,
+        selStart,
+        selEnd,
+      ]),
     );
   }
 
@@ -508,8 +588,10 @@ export class TextInput
       accessibilityElementsHidden: this.accessibilityElementsHidden,
       accessibilityIgnoresInvertColors: this.accessibilityIgnoresInvertColors,
       accessibilityLanguage: this.accessibilityLanguage,
-      accessibilityRespondsToUserInteraction: this.accessibilityRespondsToUserInteraction,
-      accessibilityShowsLargeContentViewer: this.accessibilityShowsLargeContentViewer,
+      accessibilityRespondsToUserInteraction:
+        this.accessibilityRespondsToUserInteraction,
+      accessibilityShowsLargeContentViewer:
+        this.accessibilityShowsLargeContentViewer,
       accessibilityLargeContentTitle: this.accessibilityLargeContentTitle,
       role: this.role,
       'aria-label': this.ariaLabel,