@symbiote-native/angular 0.8.0 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (256) hide show
  1. package/README.md +13 -10
  2. package/babel-register-composed.cjs +58 -18
  3. package/bin/symbiote-angular-dev.cjs +16 -4
  4. package/build/angular/anchor-host-registry.js +1 -15
  5. package/build/angular/anchor-host-registry.js.map +1 -1
  6. package/build/angular/change-detection-flush.d.ts +31 -0
  7. package/build/angular/change-detection-flush.js +110 -0
  8. package/build/angular/change-detection-flush.js.map +1 -0
  9. package/build/angular/components/activity-indicator-props.d.ts +2 -0
  10. package/build/angular/components/activity-indicator-props.js +2 -0
  11. package/build/angular/components/activity-indicator-props.js.map +1 -0
  12. package/build/angular/components/button-props.d.ts +2 -0
  13. package/build/angular/components/button-props.js +2 -0
  14. package/build/angular/components/button-props.js.map +1 -0
  15. package/build/angular/components/flat-list/index.d.ts +2 -1
  16. package/build/angular/components/flat-list/index.js +22 -10
  17. package/build/angular/components/flat-list/index.js.map +1 -1
  18. package/build/angular/components/image-background-props.d.ts +6 -0
  19. package/build/angular/components/image-background-props.js +2 -0
  20. package/build/angular/components/image-background-props.js.map +1 -0
  21. package/build/angular/components/{image/shared.d.ts → image-shared.d.ts} +4 -4
  22. package/build/angular/components/{image/shared.js → image-shared.js} +39 -28
  23. package/build/angular/components/image-shared.js.map +1 -0
  24. package/build/angular/components/input-accessory-view-props.d.ts +7 -0
  25. package/build/angular/components/input-accessory-view-props.js +9 -0
  26. package/build/angular/components/input-accessory-view-props.js.map +1 -0
  27. package/build/angular/components/keyboard-avoiding-view/index.d.ts +2 -1
  28. package/build/angular/components/keyboard-avoiding-view/index.js +28 -27
  29. package/build/angular/components/keyboard-avoiding-view/index.js.map +1 -1
  30. package/build/angular/components/modal/index.d.ts +2 -0
  31. package/build/angular/components/modal/index.js +33 -20
  32. package/build/angular/components/modal/index.js.map +1 -1
  33. package/build/angular/components/pressable-props.d.ts +32 -0
  34. package/build/angular/components/pressable-props.js +11 -0
  35. package/build/angular/components/pressable-props.js.map +1 -0
  36. package/build/angular/components/refresh-control-props.d.ts +16 -0
  37. package/build/angular/components/refresh-control-props.js +14 -0
  38. package/build/angular/components/refresh-control-props.js.map +1 -0
  39. package/build/angular/components/safe-area-view-props.d.ts +7 -0
  40. package/build/angular/components/safe-area-view-props.js +11 -0
  41. package/build/angular/components/safe-area-view-props.js.map +1 -0
  42. package/build/angular/components/scroll-view-props.d.ts +76 -0
  43. package/build/angular/components/scroll-view-props.js +18 -0
  44. package/build/angular/components/scroll-view-props.js.map +1 -0
  45. package/build/angular/components/section-list/index.d.ts +3 -0
  46. package/build/angular/components/section-list/index.js +10 -1
  47. package/build/angular/components/section-list/index.js.map +1 -1
  48. package/build/angular/components/text-input-props.d.ts +45 -0
  49. package/build/angular/components/text-input-props.js +18 -0
  50. package/build/angular/components/text-input-props.js.map +1 -0
  51. package/build/angular/components/touchable-native-feedback/touchable-native-feedback-props.d.ts +6 -0
  52. package/build/angular/components/touchable-native-feedback/touchable-native-feedback-props.js +2 -0
  53. package/build/angular/components/touchable-native-feedback/touchable-native-feedback-props.js.map +1 -0
  54. package/build/angular/components/touchable-props.d.ts +14 -0
  55. package/build/angular/components/touchable-props.js +13 -0
  56. package/build/angular/components/touchable-props.js.map +1 -0
  57. package/build/angular/components/touchable-without-feedback/touchable-without-feedback-props.d.ts +3 -0
  58. package/build/angular/components/touchable-without-feedback/touchable-without-feedback-props.js +2 -0
  59. package/build/angular/components/touchable-without-feedback/touchable-without-feedback-props.js.map +1 -0
  60. package/build/angular/components/virtualized-list/index.d.ts +8 -1
  61. package/build/angular/components/virtualized-list/index.js +373 -278
  62. package/build/angular/components/virtualized-list/index.js.map +1 -1
  63. package/build/angular/components/virtualized-section-list/index.d.ts +3 -0
  64. package/build/angular/components/virtualized-section-list/index.js +10 -1
  65. package/build/angular/components/virtualized-section-list/index.js.map +1 -1
  66. package/build/angular/components.d.ts +21 -27
  67. package/build/angular/components.js +13 -15
  68. package/build/angular/components.js.map +1 -1
  69. package/build/angular/create-portal/index.d.ts +11 -2
  70. package/build/angular/create-portal/index.js +37 -11
  71. package/build/angular/create-portal/index.js.map +1 -1
  72. package/build/angular/create-tunnel/index.js +1 -1
  73. package/build/angular/element-props.d.ts +53 -0
  74. package/build/angular/element-props.js +2 -0
  75. package/build/angular/element-props.js.map +1 -0
  76. package/build/angular/elements.d.ts +528 -0
  77. package/build/angular/elements.js +1444 -0
  78. package/build/angular/elements.js.map +1 -0
  79. package/build/angular/gate-demand.d.ts +37 -0
  80. package/build/angular/gate-demand.js +84 -0
  81. package/build/angular/gate-demand.js.map +1 -0
  82. package/build/angular/host-instance/index.js +1 -1
  83. package/build/angular/index.d.ts +5 -2
  84. package/build/angular/index.js +16 -1
  85. package/build/angular/index.js.map +1 -1
  86. package/build/angular/modules/animated/create-animated-component.d.ts +6 -6
  87. package/build/angular/modules/animated/create-animated-component.js +73 -81
  88. package/build/angular/modules/animated/create-animated-component.js.map +1 -1
  89. package/build/angular/modules/animated/index.js +1 -1
  90. package/build/angular/modules/animated/index.js.map +1 -1
  91. package/build/angular/modules/image/index.d.ts +3 -0
  92. package/build/angular/modules/image/index.js +16 -0
  93. package/build/angular/modules/image/index.js.map +1 -0
  94. package/build/angular/primitives/index.d.ts +28 -16
  95. package/build/angular/primitives/index.js +77 -31
  96. package/build/angular/primitives/index.js.map +1 -1
  97. package/build/angular/primitives/shared.d.ts +2 -3
  98. package/build/angular/primitives/shared.js +8 -53
  99. package/build/angular/primitives/shared.js.map +1 -1
  100. package/build/angular/register.d.ts +1 -0
  101. package/build/angular/register.js +16 -0
  102. package/build/angular/register.js.map +1 -0
  103. package/build/angular/render/index.js +4 -2
  104. package/build/angular/render/index.js.map +1 -1
  105. package/build/angular/renderer/index.js +207 -60
  106. package/build/angular/renderer/index.js.map +1 -1
  107. package/build/angular/renderer/value-change.d.ts +2 -0
  108. package/build/angular/renderer/value-change.js +9 -0
  109. package/build/angular/renderer/value-change.js.map +1 -0
  110. package/metro-config.cjs +23 -5
  111. package/metro-css-parser.cjs +2 -1
  112. package/package.json +17 -7
  113. package/src/anchor-host-registry.ts +1 -15
  114. package/src/change-detection-flush.ts +120 -0
  115. package/src/components/activity-indicator-props.ts +21 -0
  116. package/src/components/button-props.ts +26 -0
  117. package/src/components/flat-list/index.ts +12 -4
  118. package/src/components/image-background-props.ts +24 -0
  119. package/src/components/{image/shared.ts → image-shared.ts} +57 -26
  120. package/src/components/input-accessory-view-props.ts +21 -0
  121. package/src/components/keyboard-avoiding-view/index.ts +27 -16
  122. package/src/components/modal/index.ts +32 -11
  123. package/src/components/pressable-props.ts +73 -0
  124. package/src/components/refresh-control-props.ts +43 -0
  125. package/src/components/safe-area-view-props.ts +28 -0
  126. package/src/components/scroll-view-props.ts +109 -0
  127. package/src/components/section-list/index.ts +18 -0
  128. package/src/components/text-input-props.ts +72 -0
  129. package/src/components/touchable-native-feedback/touchable-native-feedback-props.ts +23 -0
  130. package/src/components/touchable-props.ts +30 -0
  131. package/src/components/touchable-without-feedback/touchable-without-feedback-props.ts +21 -0
  132. package/src/components/virtualized-list/index.ts +254 -153
  133. package/src/components/virtualized-section-list/index.ts +18 -0
  134. package/src/components.ts +86 -35
  135. package/src/create-portal/index.ts +39 -9
  136. package/src/create-tunnel/index.ts +1 -1
  137. package/src/diagnostics.ts +1 -1
  138. package/src/element-props.ts +90 -0
  139. package/src/elements.ts +919 -0
  140. package/src/gate-demand.ts +109 -0
  141. package/src/host-instance/index.ts +1 -1
  142. package/src/index.ts +54 -15
  143. package/src/modules/animated/create-animated-component.ts +73 -59
  144. package/src/modules/animated/index.ts +1 -1
  145. package/src/modules/image/index.ts +18 -0
  146. package/src/primitives/index.ts +47 -16
  147. package/src/primitives/shared.ts +11 -44
  148. package/src/register.ts +15 -0
  149. package/src/render/index.ts +4 -2
  150. package/src/renderer/index.ts +239 -80
  151. package/src/renderer/value-change.ts +8 -0
  152. package/build/angular/components/activity-indicator/index.android.d.ts +0 -13
  153. package/build/angular/components/activity-indicator/index.android.js +0 -29
  154. package/build/angular/components/activity-indicator/index.android.js.map +0 -1
  155. package/build/angular/components/activity-indicator/index.d.ts +0 -1
  156. package/build/angular/components/activity-indicator/index.ios.d.ts +0 -9
  157. package/build/angular/components/activity-indicator/index.ios.js +0 -26
  158. package/build/angular/components/activity-indicator/index.ios.js.map +0 -1
  159. package/build/angular/components/activity-indicator/index.js +0 -4
  160. package/build/angular/components/activity-indicator/index.js.map +0 -1
  161. package/build/angular/components/activity-indicator/shared.d.ts +0 -67
  162. package/build/angular/components/activity-indicator/shared.js +0 -260
  163. package/build/angular/components/activity-indicator/shared.js.map +0 -1
  164. package/build/angular/components/button.d.ts +0 -65
  165. package/build/angular/components/button.js +0 -351
  166. package/build/angular/components/button.js.map +0 -1
  167. package/build/angular/components/image/index.android.d.ts +0 -15
  168. package/build/angular/components/image/index.android.js +0 -91
  169. package/build/angular/components/image/index.android.js.map +0 -1
  170. package/build/angular/components/image/index.d.ts +0 -1
  171. package/build/angular/components/image/index.ios.d.ts +0 -15
  172. package/build/angular/components/image/index.ios.js +0 -91
  173. package/build/angular/components/image/index.ios.js.map +0 -1
  174. package/build/angular/components/image/index.js +0 -3
  175. package/build/angular/components/image/index.js.map +0 -1
  176. package/build/angular/components/image/shared.js.map +0 -1
  177. package/build/angular/components/image-background.d.ts +0 -82
  178. package/build/angular/components/image-background.js +0 -434
  179. package/build/angular/components/image-background.js.map +0 -1
  180. package/build/angular/components/input-accessory-view/index.d.ts +0 -65
  181. package/build/angular/components/input-accessory-view/index.js +0 -290
  182. package/build/angular/components/input-accessory-view/index.js.map +0 -1
  183. package/build/angular/components/pressable/index.d.ts +0 -129
  184. package/build/angular/components/pressable/index.js +0 -473
  185. package/build/angular/components/pressable/index.js.map +0 -1
  186. package/build/angular/components/refresh-control/index.d.ts +0 -90
  187. package/build/angular/components/refresh-control/index.js +0 -380
  188. package/build/angular/components/refresh-control/index.js.map +0 -1
  189. package/build/angular/components/safe-area-view/index.d.ts +0 -62
  190. package/build/angular/components/safe-area-view/index.js +0 -287
  191. package/build/angular/components/safe-area-view/index.js.map +0 -1
  192. package/build/angular/components/scroll-view/index.android.d.ts +0 -20
  193. package/build/angular/components/scroll-view/index.android.js +0 -262
  194. package/build/angular/components/scroll-view/index.android.js.map +0 -1
  195. package/build/angular/components/scroll-view/index.d.ts +0 -3
  196. package/build/angular/components/scroll-view/index.ios.d.ts +0 -8
  197. package/build/angular/components/scroll-view/index.ios.js +0 -92
  198. package/build/angular/components/scroll-view/index.ios.js.map +0 -1
  199. package/build/angular/components/scroll-view/index.js +0 -6
  200. package/build/angular/components/scroll-view/index.js.map +0 -1
  201. package/build/angular/components/scroll-view/projection.d.ts +0 -67
  202. package/build/angular/components/scroll-view/projection.js +0 -560
  203. package/build/angular/components/scroll-view/projection.js.map +0 -1
  204. package/build/angular/components/scroll-view/shared.d.ts +0 -239
  205. package/build/angular/components/scroll-view/shared.js +0 -832
  206. package/build/angular/components/scroll-view/shared.js.map +0 -1
  207. package/build/angular/components/scroll-view/sticky-header.d.ts +0 -40
  208. package/build/angular/components/scroll-view/sticky-header.js +0 -224
  209. package/build/angular/components/scroll-view/sticky-header.js.map +0 -1
  210. package/build/angular/components/switch/index.android.d.ts +0 -24
  211. package/build/angular/components/switch/index.android.js +0 -112
  212. package/build/angular/components/switch/index.android.js.map +0 -1
  213. package/build/angular/components/switch/index.d.ts +0 -1
  214. package/build/angular/components/switch/index.ios.d.ts +0 -23
  215. package/build/angular/components/switch/index.ios.js +0 -111
  216. package/build/angular/components/switch/index.ios.js.map +0 -1
  217. package/build/angular/components/switch/index.js +0 -4
  218. package/build/angular/components/switch/index.js.map +0 -1
  219. package/build/angular/components/switch/shared.d.ts +0 -49
  220. package/build/angular/components/switch/shared.js +0 -191
  221. package/build/angular/components/switch/shared.js.map +0 -1
  222. package/build/angular/components/text-input.d.ts +0 -161
  223. package/build/angular/components/text-input.js +0 -659
  224. package/build/angular/components/text-input.js.map +0 -1
  225. package/build/angular/components/touchable/index.d.ts +0 -276
  226. package/build/angular/components/touchable/index.js +0 -1422
  227. package/build/angular/components/touchable/index.js.map +0 -1
  228. package/build/angular/components/touchable-native-feedback/index.d.ts +0 -86
  229. package/build/angular/components/touchable-native-feedback/index.js +0 -407
  230. package/build/angular/components/touchable-native-feedback/index.js.map +0 -1
  231. package/src/components/activity-indicator/index.android.ts +0 -23
  232. package/src/components/activity-indicator/index.ios.ts +0 -21
  233. package/src/components/activity-indicator/index.ts +0 -4
  234. package/src/components/activity-indicator/shared.ts +0 -225
  235. package/src/components/button.ts +0 -220
  236. package/src/components/image/index.android.ts +0 -99
  237. package/src/components/image/index.ios.ts +0 -99
  238. package/src/components/image/index.ts +0 -3
  239. package/src/components/image-background.ts +0 -290
  240. package/src/components/input-accessory-view/index.ts +0 -240
  241. package/src/components/pressable/index.ts +0 -462
  242. package/src/components/refresh-control/index.ts +0 -340
  243. package/src/components/safe-area-view/index.ts +0 -231
  244. package/src/components/scroll-view/index.android.ts +0 -205
  245. package/src/components/scroll-view/index.ios.ts +0 -81
  246. package/src/components/scroll-view/index.ts +0 -7
  247. package/src/components/scroll-view/projection.ts +0 -713
  248. package/src/components/scroll-view/shared.ts +0 -1066
  249. package/src/components/scroll-view/sticky-header.ts +0 -267
  250. package/src/components/switch/index.android.ts +0 -113
  251. package/src/components/switch/index.ios.ts +0 -112
  252. package/src/components/switch/index.ts +0 -4
  253. package/src/components/switch/shared.ts +0 -284
  254. package/src/components/text-input.ts +0 -613
  255. package/src/components/touchable/index.ts +0 -913
  256. package/src/components/touchable-native-feedback/index.ts +0 -317
@@ -1,613 +0,0 @@
1
- // TextInput, the Angular lifecycle half. The folds/maps (value->text, the W3C/alias resolution)
2
- // and the controlled-write predicate live in @symbiote-native/components/state, the render (intrinsic
3
- // + native-prop mapping) in @symbiote-native/components/view, both shared verbatim with the React and
4
- // Vue adapters. Here Angular supplies only the lifecycle: renderTextInput picks ONE of two host
5
- // intrinsics at runtime (symbiote-text-input / symbiote-text-input-multiline) via `@if`/`@else`,
6
- // each wired through the shared `SymbioteHostPropsDirective` (`[symbioteHostProps]="hostProps"`,
7
- // `../primitives/shared.ts`) so the flat resolved prop bag doesn't need enumerating as individual
8
- // `[prop]` bindings; a @ViewChild reading that directive (by its `#host` template ref, across
9
- // either branch) exposes `.node` — the host BY IDENTITY (so imperative commands hit the engine's
10
- // WeakMap mirror). A plain field holds the acknowledged event count, ngOnChanges runs the
11
- // controlled-write command, ngAfterViewInit drives the mount autoFocus, and the class itself is
12
- // the imperative handle (ITextInputHandle). The Angular twin of React's useRef/useState +
13
- // useLayoutEffect + useImperativeHandle and Vue's shallowRef + watch(flush:'post') + expose().
14
- //
15
- // Two Angular-specific seams. (1) Events: Angular forbids [onX] property bindings, so the host's
16
- // change/focus/blur + the remaining native events ride the structural (event) channel and route
17
- // to real @Output() EventEmitters (valueChange is DERIVED from change, never a native event —
18
- // React/Vue fold both into one onValueChange(text, event) callback, but Angular's EventEmitter
19
- // only carries one value, so valueChange stays text-only to keep [(value)] banana-in-a-box
20
- // working; `change` stays a second, separate @Output() for the raw event). The
21
- // non-function props travel the flat-bag path via the host-props directive. (2) Commit timing:
22
- // Angular's change detection is async/batched (zoneless), so a native command wired at lifecycle
23
- // time has no Fabric tag yet; the controlled write + autoFocus defer through whenCommitted, the
24
- // same gotcha Vue hits. The controlled handshake hinges on commanding native back with the
25
- // ACKNOWLEDGED event count (setTextAndSelection), never a plain prop re-push — see
26
- // @symbiote-native/components/state/text-input.
27
-
28
- import {
29
- CUSTOM_ELEMENTS_SCHEMA,
30
- ChangeDetectionStrategy,
31
- ChangeDetectorRef,
32
- Component,
33
- ElementRef,
34
- EventEmitter,
35
- forwardRef,
36
- inject,
37
- Input,
38
- Output,
39
- ViewChild,
40
- type AfterViewInit,
41
- type OnChanges,
42
- type OnDestroy,
43
- type SimpleChanges,
44
- } from '@angular/core';
45
- import { NG_VALUE_ACCESSOR, type ControlValueAccessor } from '@angular/forms';
46
- import {
47
- foldText,
48
- eventCountFromChange,
49
- textFromChange,
50
- shouldCommandText,
51
- renderTextInput,
52
- resolveAccessibilityProps,
53
- resolveTextInputProps,
54
- INITIAL_EVENT_COUNT,
55
- SELECTION_NONE,
56
- type IAccessibilityProps,
57
- type IAccessibilityStateValue,
58
- type IAriaProps,
59
- type IEnterKeyHint,
60
- type IFoldedTextInputProps,
61
- type IInputMode,
62
- type ISubmitBehavior,
63
- type ITextInputEventHandler,
64
- type ITextInputHandle,
65
- type ITextInputSelection,
66
- } from '@symbiote-native/components';
67
- import {
68
- blurTextInput,
69
- dispatchViewCommand,
70
- dlog,
71
- isSymbioteEvent,
72
- isSymbioteNode,
73
- setInputBlurred,
74
- setInputFocused,
75
- whenCommitted,
76
- type IStyleProp,
77
- type ISymbioteEvent,
78
- type ISymbioteNode,
79
- type ITextStyle,
80
- } from '@symbiote-native/engine';
81
- import {
82
- anchorHostStyle,
83
- MultilineTextInputHost,
84
- SymbioteHostPropsDirective,
85
- SymbioteStyleInputDirective,
86
- TextInputHost,
87
- } from '../primitives';
88
-
89
- export type {
90
- ITextInputHandle,
91
- ITextInputSelection,
92
- IInputMode,
93
- IEnterKeyHint,
94
- ISubmitBehavior,
95
- };
96
-
97
- // Mirrors React's ITextInputProps minus nothing (TextInput has no children) — declared
98
- // per-adapter over the shared accessibility base because Angular's input surface aliases the
99
- // aria-* keys to camelCase @Inputs, unlike the plain agnostic fields shared across adapters.
100
- export interface IAngularTextInputProps
101
- extends IAccessibilityProps, IAriaProps {
102
- value?: string;
103
- defaultValue?: string;
104
- placeholder?: string;
105
- placeholderTextColor?: string;
106
- editable?: boolean;
107
- keyboardType?: string;
108
- secureTextEntry?: boolean;
109
- maxLength?: number;
110
- multiline?: boolean;
111
- selection?: ITextInputSelection;
112
- autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
113
- autoCorrect?: boolean;
114
- autoComplete?: string;
115
- textContentType?: string;
116
- autoFocus?: boolean;
117
- showSoftInputOnFocus?: boolean;
118
- returnKeyType?: string;
119
- selectTextOnFocus?: boolean;
120
- scrollEnabled?: boolean;
121
- numberOfLines?: number;
122
- textAlign?: 'left' | 'center' | 'right';
123
- blurOnSubmit?: boolean;
124
- inputMode?: IInputMode;
125
- enterKeyHint?: IEnterKeyHint;
126
- readOnly?: boolean;
127
- submitBehavior?: ISubmitBehavior;
128
- cursorColor?: string;
129
- selectionColor?: string;
130
- selectionHandleColor?: string;
131
- underlineColorAndroid?: string;
132
- inputAccessoryViewID?: string;
133
- style?: IStyleProp<ITextStyle>;
134
- onValueChange?: (text: string) => void;
135
- onChange?: ITextInputEventHandler;
136
- onFocus?: ITextInputEventHandler;
137
- onBlur?: ITextInputEventHandler;
138
- onEndEditing?: ITextInputEventHandler;
139
- onSubmitEditing?: ITextInputEventHandler;
140
- onKeyPress?: ITextInputEventHandler;
141
- onSelectionChange?: ITextInputEventHandler;
142
- onContentSizeChange?: ITextInputEventHandler;
143
- }
144
-
145
- // What the TextInput component itself takes as plain @Input()s: the full surface minus every
146
- // callback-shaped event, which it exposes as real @Output() EventEmitters instead (see the class
147
- // below) — mirrors Pressable's IAngularPressableInputs / IAngularPressableProps split.
148
- export type IAngularTextInputInputs = Omit<
149
- IAngularTextInputProps,
150
- | 'onValueChange'
151
- | 'onChange'
152
- | 'onFocus'
153
- | 'onBlur'
154
- | 'onEndEditing'
155
- | 'onSubmitEditing'
156
- | 'onKeyPress'
157
- | 'onSelectionChange'
158
- | 'onContentSizeChange'
159
- | 'onAccessibilityAction'
160
- | 'onAccessibilityTap'
161
- | 'onMagicTap'
162
- | 'onAccessibilityEscape'
163
- >;
164
-
165
- @Component({
166
- selector: 'TextInput',
167
- standalone: true,
168
- hostDirectives: [
169
- { directive: SymbioteStyleInputDirective, inputs: ['style'] },
170
- ],
171
- schemas: [CUSTOM_ELEMENTS_SCHEMA],
172
- imports: [SymbioteHostPropsDirective, TextInputHost, MultilineTextInputHost],
173
- changeDetection: ChangeDetectionStrategy.OnPush,
174
- providers: [
175
- {
176
- provide: NG_VALUE_ACCESSOR,
177
- useExisting: forwardRef(() => TextInput),
178
- multi: true,
179
- },
180
- ],
181
- template: `
182
- @if (isMultiline) {
183
- <symbiote-text-input-multiline
184
- #host
185
- [symbioteHostProps]="hostProps"
186
- (change)="handleChange($event)"
187
- (focus)="handleFocus($event)"
188
- (blur)="handleBlur($event)"
189
- (selectionChange)="emit(selectionChange, $event)"
190
- (submitEditing)="emit(submitEditing, $event)"
191
- (keyPress)="emit(keyPress, $event)"
192
- (endEditing)="emit(endEditing, $event)"
193
- (contentSizeChange)="emit(contentSizeChange, $event)"
194
- (accessibilityAction)="emit(accessibilityAction, $event)"
195
- (accessibilityTap)="emit(accessibilityTap, $event)"
196
- (magicTap)="emit(magicTap, $event)"
197
- (accessibilityEscape)="emit(accessibilityEscape, $event)"
198
- ></symbiote-text-input-multiline>
199
- } @else {
200
- <symbiote-text-input
201
- #host
202
- [symbioteHostProps]="hostProps"
203
- (change)="handleChange($event)"
204
- (focus)="handleFocus($event)"
205
- (blur)="handleBlur($event)"
206
- (selectionChange)="emit(selectionChange, $event)"
207
- (submitEditing)="emit(submitEditing, $event)"
208
- (keyPress)="emit(keyPress, $event)"
209
- (endEditing)="emit(endEditing, $event)"
210
- (contentSizeChange)="emit(contentSizeChange, $event)"
211
- (accessibilityAction)="emit(accessibilityAction, $event)"
212
- (accessibilityTap)="emit(accessibilityTap, $event)"
213
- (magicTap)="emit(magicTap, $event)"
214
- (accessibilityEscape)="emit(accessibilityEscape, $event)"
215
- ></symbiote-text-input>
216
- }
217
- `,
218
- })
219
- export class TextInput
220
- implements
221
- IAngularTextInputInputs,
222
- ITextInputHandle,
223
- OnChanges,
224
- AfterViewInit,
225
- OnDestroy,
226
- ControlValueAccessor
227
- {
228
- @Input() value?: string;
229
- @Input() defaultValue?: string;
230
- @Input() placeholder?: string;
231
- @Input() placeholderTextColor?: string;
232
- @Input() editable?: boolean;
233
- @Input() keyboardType?: string;
234
- @Input() secureTextEntry?: boolean;
235
- @Input() maxLength?: number;
236
- @Input() multiline?: boolean;
237
- @Input() selection?: ITextInputSelection;
238
- @Input() autoCapitalize?: IAngularTextInputProps['autoCapitalize'];
239
- @Input() autoCorrect?: boolean;
240
- @Input() autoComplete?: string;
241
- @Input() textContentType?: string;
242
- @Input() autoFocus?: boolean;
243
- @Input() showSoftInputOnFocus?: boolean;
244
- @Input() returnKeyType?: string;
245
- @Input() selectTextOnFocus?: boolean;
246
- @Input() scrollEnabled?: boolean;
247
- @Input() numberOfLines?: number;
248
- @Input() textAlign?: IAngularTextInputProps['textAlign'];
249
- @Input() blurOnSubmit?: boolean;
250
- @Input() inputMode?: IInputMode;
251
- @Input() enterKeyHint?: IEnterKeyHint;
252
- @Input() readOnly?: boolean;
253
- @Input() submitBehavior?: ISubmitBehavior;
254
- @Input() cursorColor?: string;
255
- @Input() selectionColor?: string;
256
- @Input() selectionHandleColor?: string;
257
- @Input() underlineColorAndroid?: string;
258
- @Input() inputAccessoryViewID?: string;
259
- @Input() style?: IStyleProp<ITextStyle>;
260
- @Input() testID?: string;
261
- @Input() nativeID?: string;
262
-
263
- // The event lifecycle as real Angular events: `(valueChange)="onText($event)"`, not
264
- // `[onValueChange]="onText"`. `focus`/`blur` collide with this same class's OWN imperative
265
- // `focus()`/`blur()` handle methods (ITextInputHandle — the RN ref API a parent calls via
266
- // `@ViewChild(TextInput)`), so those two alias their public @Output() binding name back to
267
- // `focus`/`blur` while the class member itself is named `focusEvent`/`blurEvent` — the same
268
- // `@Output(bindingName) memberName` alias this file already uses for `@Input('aria-label')`.
269
- // `value`/`valueChange` names match Switch/Slider exactly, so `[(value)]="text"` (banana-in-a-box)
270
- // works here too — see `valueChange`'s single-arg (text-only) signature above.
271
- @Output() readonly valueChange = new EventEmitter<string>();
272
- @Output() readonly change = new EventEmitter<ISymbioteEvent>();
273
- @Output('focus') readonly focusEvent = new EventEmitter<ISymbioteEvent>();
274
- @Output('blur') readonly blurEvent = new EventEmitter<ISymbioteEvent>();
275
- @Output() readonly endEditing = new EventEmitter<ISymbioteEvent>();
276
- @Output() readonly submitEditing = new EventEmitter<ISymbioteEvent>();
277
- @Output() readonly keyPress = new EventEmitter<ISymbioteEvent>();
278
- @Output() readonly selectionChange = new EventEmitter<ISymbioteEvent>();
279
- @Output() readonly contentSizeChange = new EventEmitter<ISymbioteEvent>();
280
- @Output() readonly accessibilityAction = new EventEmitter<ISymbioteEvent>();
281
- @Output() readonly accessibilityTap = new EventEmitter<ISymbioteEvent>();
282
- @Output() readonly magicTap = new EventEmitter<ISymbioteEvent>();
283
- @Output() readonly accessibilityEscape = new EventEmitter<ISymbioteEvent>();
284
-
285
- @Input() accessible?: boolean;
286
- @Input() accessibilityLabel?: string;
287
- @Input() accessibilityHint?: string;
288
- @Input() accessibilityRole?: IAccessibilityProps['accessibilityRole'];
289
- @Input() accessibilityState?: IAccessibilityStateValue;
290
- @Input() accessibilityValue?: IAccessibilityProps['accessibilityValue'];
291
- @Input() accessibilityActions?: IAccessibilityProps['accessibilityActions'];
292
- @Input() accessibilityLabelledBy?: string | string[];
293
- @Input()
294
- importantForAccessibility?: IAccessibilityProps['importantForAccessibility'];
295
- @Input()
296
- accessibilityLiveRegion?: IAccessibilityProps['accessibilityLiveRegion'];
297
- @Input() screenReaderFocusable?: boolean;
298
- @Input() accessibilityViewIsModal?: boolean;
299
- @Input() accessibilityElementsHidden?: boolean;
300
- @Input() accessibilityIgnoresInvertColors?: boolean;
301
- @Input() accessibilityLanguage?: string;
302
- @Input() accessibilityRespondsToUserInteraction?: boolean;
303
- @Input() accessibilityShowsLargeContentViewer?: boolean;
304
- @Input() accessibilityLargeContentTitle?: string;
305
- @Input() role?: IAriaProps['role'];
306
- @Input('aria-label') ariaLabel?: string;
307
- @Input('aria-labelledby') ariaLabelledBy?: string;
308
- @Input('aria-live') ariaLive?: IAriaProps['aria-live'];
309
- @Input('aria-hidden') ariaHidden?: boolean;
310
- @Input('aria-busy') ariaBusy?: boolean;
311
- @Input('aria-checked') ariaChecked?: boolean | 'mixed';
312
- @Input('aria-disabled') ariaDisabled?: boolean;
313
- @Input('aria-expanded') ariaExpanded?: boolean;
314
- @Input('aria-selected') ariaSelected?: boolean;
315
-
316
- @ViewChild('host', { read: SymbioteHostPropsDirective })
317
- private hostRef?: SymbioteHostPropsDirective;
318
-
319
- // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
320
- // onto (see anchorHostStyle's doc comment) — NOT `hostRef` above, which targets the real inner
321
- // symbiote-text-input(-multiline) one level down.
322
- private readonly elementRef = inject(ElementRef);
323
- // Only setDisabledState() needs this: it mutates `editable` from OUTSIDE Angular's own binding
324
- // path (@angular/forms calling in directly), which doesn't itself schedule a tick under zoneless CD.
325
- private readonly changeDetector = inject(ChangeDetectorRef);
326
-
327
- // The count native last acknowledged; the controlled write / clear / setSelection echo it so
328
- // native's eventLag lands on 0 and the write applies. A plain field (read live by the imperative
329
- // handle), the Angular twin of React's useState / Vue's ref.
330
- private mostRecentEventCount = INITIAL_EVENT_COUNT;
331
- // The last text native holds, as far as JS knows. Seeded on the first `value` change (the `text`
332
- // prop already carries the mount value down via createNode, so the FIRST controlled value is not
333
- // a divergence and must NOT re-command); later divergences flow through setTextAndSelection.
334
- private lastNativeText: string | undefined;
335
- // JS-side focus state, mirrored from the focus/blur events for isFocused(): native exposes no
336
- // synchronous focus getter (RN's TextInputState holds the same).
337
- private focused = false;
338
- private cancelAutoFocus?: () => void;
339
- // Mirrors SimpleChange.firstChange for the writeValue() path below (@angular/forms' own initial
340
- // write, distinct from ngOnChanges' firstChange, which never fires for a forms-driven write).
341
- private isFirstFormWrite = true;
342
-
343
- get isMultiline(): boolean {
344
- return this.multiline === true;
345
- }
346
-
347
- get hostProps(): Record<string, unknown> {
348
- return renderTextInput({
349
- multiline: this.isMultiline,
350
- text: foldText(this.value, this.defaultValue),
351
- mostRecentEventCount: this.mostRecentEventCount,
352
- selection: this.selection,
353
- folded: this.foldedNativeProps,
354
- passthrough: this.buildPassthrough(),
355
- }).props;
356
- }
357
-
358
- ngOnChanges(changes: SimpleChanges): void {
359
- const valueChange = changes['value'];
360
- if (valueChange === undefined) return;
361
- if (valueChange.firstChange) {
362
- // The initial value already reached native via createNode's hostProps — seed
363
- // lastNativeText instead of re-commanding it (see commitControlledValue's own comment on
364
- // why a redundant re-push isn't just wasteful — it can race a keystroke).
365
- this.lastNativeText = foldText(this.value, this.defaultValue);
366
- return;
367
- }
368
- this.commitControlledValue();
369
- }
370
-
371
- // ControlValueAccessor — @angular/forms calls these straight into this component, bypassing
372
- // template bindings/ngOnChanges entirely. `isFirstFormWrite` mirrors SimpleChange.firstChange:
373
- // the initial value already reached native via createNode's hostProps, so it must seed
374
- // lastNativeText, not re-command (see commitControlledValue's own comment on why a redundant
375
- // re-push isn't just wasteful — it can race a keystroke).
376
- writeValue(value: string | null): void {
377
- this.value = value ?? undefined;
378
- if (this.isFirstFormWrite) {
379
- this.isFirstFormWrite = false;
380
- this.lastNativeText = foldText(this.value, this.defaultValue);
381
- return;
382
- }
383
- this.commitControlledValue();
384
- }
385
-
386
- registerOnChange(fn: (value: string) => void): void {
387
- this.valueChange.subscribe(fn);
388
- }
389
-
390
- registerOnTouched(fn: () => void): void {
391
- this.blurEvent.subscribe(() => fn());
392
- }
393
-
394
- setDisabledState(isDisabled: boolean): void {
395
- this.editable = !isDisabled;
396
- this.changeDetector.markForCheck();
397
- }
398
-
399
- // autoFocus is driven in JS, not as a native prop: once the node is committed, command `focus`
400
- // down once (RN does the same via TextInputState.focusInput). Under Angular's async-batched
401
- // commit the node has no Fabric tag at ngAfterViewInit, so whenCommitted defers the command to
402
- // the commit that assigns the tag; cancelled on destroy so an un-committed pending focus leaks.
403
- ngAfterViewInit(): void {
404
- if (this.autoFocus !== true) return;
405
- const node = this.hostNode;
406
- if (node === undefined) return;
407
- dlog('TextInput autoFocus -> focus command');
408
- this.cancelAutoFocus = whenCommitted(node, () =>
409
- dispatchViewCommand(node, 'focus', []),
410
- );
411
- }
412
-
413
- ngOnDestroy(): void {
414
- this.cancelAutoFocus?.();
415
- }
416
-
417
- handleChange(event: unknown): void {
418
- if (!isSymbioteEvent(event)) return;
419
- // Event seam: the controlled handshake hinges on the change payload carrying `text`
420
- // (+ `eventCount`). iOS and Android Fabric can key these differently, so log the actual shape.
421
- dlog(
422
- `TextInput change keys=[${Object.keys(event.nativeEvent).join(',')}] ` +
423
- `text=${JSON.stringify(event.nativeEvent.text)} count=${JSON.stringify(event.nativeEvent.eventCount)}`,
424
- );
425
- const text = textFromChange(event);
426
- if (text !== undefined) {
427
- // Record the text first, then the count, so the count never runs ahead of the text it
428
- // stands for. The host re-pushes the count on the parent's value-driven CD, never here:
429
- // pushing the stale `text` prop now (eventLag 0) would revert the keystroke.
430
- this.lastNativeText = text;
431
- this.valueChange.emit(text);
432
- }
433
- const count = eventCountFromChange(event);
434
- if (count !== undefined) this.mostRecentEventCount = count;
435
- this.change.emit(event);
436
- }
437
-
438
- handleFocus(event: unknown): void {
439
- if (!isSymbioteEvent(event)) return;
440
- this.focused = true;
441
- // Track focus app-wide so Keyboard.dismiss can blur this input without a ref.
442
- const node = this.hostNode;
443
- if (node !== undefined) setInputFocused(node);
444
- this.focusEvent.emit(event);
445
- }
446
-
447
- handleBlur(event: unknown): void {
448
- if (!isSymbioteEvent(event)) return;
449
- this.focused = false;
450
- const node = this.hostNode;
451
- if (node !== undefined) setInputBlurred(node);
452
- this.blurEvent.emit(event);
453
- }
454
-
455
- // Forward an engine event onto the matching @Output(), narrowing the template's untyped $event
456
- // first. Angular blocks [onX] property bindings, so every native event flows through (event).
457
- emit(emitter: EventEmitter<ISymbioteEvent>, event: unknown): void {
458
- if (isSymbioteEvent(event)) emitter.emit(event);
459
- }
460
-
461
- // The imperative API RN exposes on a TextInput ref; in Angular the component instance IS the
462
- // handle (a parent reads it via @ViewChild(TextInput) and calls these). focus/blur drive native
463
- // view commands; clear and setSelection reuse setTextAndSelection (the same stale-safe path as a
464
- // controlled write) echoing the acknowledged event count.
465
- focus(): void {
466
- const node = this.hostNode;
467
- if (node !== undefined) dispatchViewCommand(node, 'focus', []);
468
- }
469
-
470
- blur(): void {
471
- // Routes through TextInputState so the app-wide focus tracking clears too.
472
- blurTextInput(this.hostNode ?? null);
473
- }
474
-
475
- clear(): void {
476
- const node = this.hostNode;
477
- if (node === undefined) return;
478
- dispatchViewCommand(node, 'setTextAndSelection', [
479
- this.mostRecentEventCount,
480
- '',
481
- 0,
482
- 0,
483
- ]);
484
- this.lastNativeText = '';
485
- }
486
-
487
- isFocused(): boolean {
488
- return this.focused;
489
- }
490
-
491
- setSelection(start: number, end: number): void {
492
- const node = this.hostNode;
493
- if (node === undefined) return;
494
- const current = this.lastNativeText ?? '';
495
- dispatchViewCommand(node, 'setTextAndSelection', [
496
- this.mostRecentEventCount,
497
- current,
498
- start,
499
- end,
500
- ]);
501
- }
502
-
503
- // Controlled write: when JS-side `value` diverges from what native reported, command the new
504
- // text down with the acknowledged count; a plain prop re-push would race the user's keystrokes.
505
- // whenCommitted defers it past the async commit so the node's Fabric tag exists; the predicate
506
- // narrows `value` to string and makes the call a no-op unless the text diverged.
507
- private commitControlledValue(): void {
508
- const node = this.hostNode;
509
- if (node === undefined) return;
510
- const value = this.value;
511
- if (!shouldCommandText(this.lastNativeText, value)) return;
512
- const selStart = this.selection?.start ?? SELECTION_NONE;
513
- const selEnd =
514
- this.selection?.end ?? this.selection?.start ?? SELECTION_NONE;
515
- const count = this.mostRecentEventCount;
516
- dlog(
517
- `TextInput setTextAndSelection count=${count} text=${JSON.stringify(value)}`,
518
- );
519
- this.lastNativeText = value;
520
- whenCommitted(node, () =>
521
- dispatchViewCommand(node, 'setTextAndSelection', [
522
- count,
523
- value,
524
- selStart,
525
- selEnd,
526
- ]),
527
- );
528
- }
529
-
530
- private buildPassthrough(): Record<string, unknown> {
531
- return {
532
- ...this.foldedAccessibility,
533
- accessible: this.accessible,
534
- testID: this.testID,
535
- nativeID: this.nativeID,
536
- placeholder: this.placeholder,
537
- placeholderTextColor: this.placeholderTextColor,
538
- maxLength: this.maxLength,
539
- secureTextEntry: this.secureTextEntry,
540
- autoCapitalize: this.autoCapitalize,
541
- autoCorrect: this.autoCorrect,
542
- selectTextOnFocus: this.selectTextOnFocus,
543
- scrollEnabled: this.scrollEnabled,
544
- numberOfLines: this.numberOfLines,
545
- textAlign: this.textAlign,
546
- inputAccessoryViewID: this.inputAccessoryViewID,
547
- style: [anchorHostStyle(this.elementRef), this.style],
548
- };
549
- }
550
-
551
- private get foldedNativeProps(): IFoldedTextInputProps {
552
- return resolveTextInputProps({
553
- inputMode: this.inputMode,
554
- keyboardType: this.keyboardType,
555
- enterKeyHint: this.enterKeyHint,
556
- returnKeyType: this.returnKeyType,
557
- readOnly: this.readOnly,
558
- editable: this.editable,
559
- submitBehavior: this.submitBehavior,
560
- blurOnSubmit: this.blurOnSubmit,
561
- multiline: this.isMultiline,
562
- cursorColor: this.cursorColor,
563
- selectionColor: this.selectionColor,
564
- selectionHandleColor: this.selectionHandleColor,
565
- autoComplete: this.autoComplete,
566
- textContentType: this.textContentType,
567
- showSoftInputOnFocus: this.showSoftInputOnFocus,
568
- underlineColorAndroid: this.underlineColorAndroid,
569
- });
570
- }
571
-
572
- // Fold the web aria-*/role aliases into the canonical accessibility* props once per render, so
573
- // the host node never sees an aria-* key (native ignores them) — the shared transform every
574
- // adapter runs. TextInput is its own host element (not a View wrapper), so it folds a11y here.
575
- private get foldedAccessibility(): Partial<IAngularTextInputProps> {
576
- return resolveAccessibilityProps({
577
- accessibilityLabel: this.accessibilityLabel,
578
- accessibilityHint: this.accessibilityHint,
579
- accessibilityRole: this.accessibilityRole,
580
- accessibilityState: this.accessibilityState,
581
- accessibilityValue: this.accessibilityValue,
582
- accessibilityActions: this.accessibilityActions,
583
- accessibilityLabelledBy: this.accessibilityLabelledBy,
584
- importantForAccessibility: this.importantForAccessibility,
585
- accessibilityLiveRegion: this.accessibilityLiveRegion,
586
- screenReaderFocusable: this.screenReaderFocusable,
587
- accessibilityViewIsModal: this.accessibilityViewIsModal,
588
- accessibilityElementsHidden: this.accessibilityElementsHidden,
589
- accessibilityIgnoresInvertColors: this.accessibilityIgnoresInvertColors,
590
- accessibilityLanguage: this.accessibilityLanguage,
591
- accessibilityRespondsToUserInteraction:
592
- this.accessibilityRespondsToUserInteraction,
593
- accessibilityShowsLargeContentViewer:
594
- this.accessibilityShowsLargeContentViewer,
595
- accessibilityLargeContentTitle: this.accessibilityLargeContentTitle,
596
- role: this.role,
597
- 'aria-label': this.ariaLabel,
598
- 'aria-labelledby': this.ariaLabelledBy,
599
- 'aria-live': this.ariaLive,
600
- 'aria-hidden': this.ariaHidden,
601
- 'aria-busy': this.ariaBusy,
602
- 'aria-checked': this.ariaChecked,
603
- 'aria-disabled': this.ariaDisabled,
604
- 'aria-expanded': this.ariaExpanded,
605
- 'aria-selected': this.ariaSelected,
606
- });
607
- }
608
-
609
- private get hostNode(): ISymbioteNode | undefined {
610
- const native = this.hostRef?.node;
611
- return isSymbioteNode(native) ? native : undefined;
612
- }
613
- }