@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,1066 +0,0 @@
1
- // ScrollView, the Angular lifecycle half. The Fabric tree is nested: a scroll view wraps a
2
- // content view holding the children (RN's ScrollView.js shape). The platform-invariant math
3
- // (decelerationRate, per-axis intrinsics, content-size dedupe, imperative handle, native sticky
4
- // scroll-attach, aria/role fold) lives in @symbiote-native/components, shared with React/Vue.
5
- // Angular supplies only the lifecycle: the host node held by IDENTITY through a directive's
6
- // ElementRef, a forwarded-prop bag set via Renderer2 (-> routeProp), and the native sticky attach
7
- // wired through whenCommitted.
8
- //
9
- // RefreshControl integration diverges per platform (.ios/.android, Metro filename-selected): iOS
10
- // renders it as a SIBLING before the content container; Android WRAPS the scroll view in an
11
- // AndroidSwipeRefreshLayout.
12
- //
13
- // Angular cannot transform <ng-content> children the way React children.map / Vue slots() can, so
14
- // ScrollView owns a projection bridge: the content host registers a ScrollViewProjectionController
15
- // with the Angular renderer, which wraps projected children whose indices match
16
- // stickyHeaderIndices. Android RefreshControl projection re-renders the projected component as the
17
- // wrapper around the scroll view (RN's Android shape), excluding it from the content slot.
18
-
19
- import {
20
- Directive,
21
- computed,
22
- signal,
23
- ElementRef,
24
- EventEmitter,
25
- Output,
26
- ViewChild,
27
- ContentChild,
28
- inject,
29
- type AfterContentChecked,
30
- type AfterViewInit,
31
- type DoCheck,
32
- type OnChanges,
33
- type OnDestroy,
34
- } from '@angular/core';
35
- import {
36
- attachStickyScroll,
37
- buildScrollViewHandle,
38
- didContentSizeChange,
39
- forwardScrollEvent,
40
- readLayoutDimension,
41
- resolveAccessibilityProps,
42
- resolveDecelerationRate,
43
- resolveScrollForwarding,
44
- selectScrollIntrinsics,
45
- splitLayoutProps,
46
- type IAccessibilityProps,
47
- type IAccessibilityStateValue,
48
- type IAriaProps,
49
- type IContentSize,
50
- type IScrollViewHandle,
51
- } from '@symbiote-native/components';
52
- import {
53
- AnimatedValue,
54
- dlog,
55
- event as animatedEvent,
56
- isNativeAnimatedAvailable,
57
- isSymbioteNode,
58
- resolveClassName,
59
- whenCommitted,
60
- type IStyleProp,
61
- type ISymbioteEvent,
62
- type ISymbioteNode,
63
- type IViewStyle,
64
- } from '@symbiote-native/engine';
65
- import { anchorHostStyle, SymbioteHostPropsDirective } from '../../primitives';
66
- import { RefreshControl } from '../refresh-control';
67
- import { ScrollViewProjectionController } from './projection';
68
-
69
- export type { IScrollViewHandle } from '@symbiote-native/components';
70
-
71
- type IScrollHandler = (event: ISymbioteEvent) => void;
72
- type IContentSizeHandler = (width: number, height: number) => void;
73
-
74
- // The inputs every platform ScrollView accepts, listed on each concrete @Component (the adapter
75
- // convention, mirroring Switch/Animated) so the base fields bind consistently. The aria-* /
76
- // role aliases ride here too and are folded by resolveAccessibilityProps before reaching native.
77
- export const SCROLL_VIEW_INPUTS = [
78
- 'style',
79
- 'contentContainerStyle',
80
- 'horizontal',
81
- 'scrollEnabled',
82
- 'showsVerticalScrollIndicator',
83
- 'showsHorizontalScrollIndicator',
84
- 'pagingEnabled',
85
- 'bounces',
86
- 'decelerationRate',
87
- 'scrollEventThrottle',
88
- 'contentInset',
89
- 'contentOffset',
90
- 'removeClippedSubviews',
91
- 'snapToInterval',
92
- 'snapToOffsets',
93
- 'snapToAlignment',
94
- 'snapToStart',
95
- 'snapToEnd',
96
- 'disableIntervalMomentum',
97
- 'stickyHeaderIndices',
98
- 'invertStickyHeaders',
99
- 'StickyHeaderComponent',
100
- 'keyboardDismissMode',
101
- 'keyboardShouldPersistTaps',
102
- 'maintainVisibleContentPosition',
103
- 'alwaysBounceHorizontal',
104
- 'alwaysBounceVertical',
105
- 'centerContent',
106
- 'scrollIndicatorInsets',
107
- 'indicatorStyle',
108
- 'directionalLockEnabled',
109
- 'automaticallyAdjustKeyboardInsets',
110
- 'contentInsetAdjustmentBehavior',
111
- 'minimumZoomScale',
112
- 'maximumZoomScale',
113
- 'zoomScale',
114
- 'bouncesZoom',
115
- 'pinchGestureEnabled',
116
- 'nestedScrollEnabled',
117
- 'overScrollMode',
118
- 'fadingEdgeLength',
119
- 'persistentScrollbar',
120
- 'endFillColor',
121
- 'onScroll',
122
- 'onScrollBeginDrag',
123
- 'onScrollEndDrag',
124
- 'onMomentumScrollBegin',
125
- 'onMomentumScrollEnd',
126
- 'testID',
127
- 'nativeID',
128
- 'accessible',
129
- 'accessibilityLabel',
130
- 'accessibilityHint',
131
- 'accessibilityRole',
132
- 'accessibilityState',
133
- 'accessibilityValue',
134
- 'accessibilityActions',
135
- 'accessibilityLabelledBy',
136
- 'importantForAccessibility',
137
- 'accessibilityLiveRegion',
138
- 'screenReaderFocusable',
139
- 'accessibilityViewIsModal',
140
- 'accessibilityElementsHidden',
141
- 'accessibilityIgnoresInvertColors',
142
- 'accessibilityLanguage',
143
- 'accessibilityRespondsToUserInteraction',
144
- 'accessibilityShowsLargeContentViewer',
145
- 'accessibilityLargeContentTitle',
146
- 'role',
147
- 'aria-label',
148
- 'aria-labelledby',
149
- 'aria-live',
150
- 'aria-hidden',
151
- 'aria-busy',
152
- 'aria-checked',
153
- 'aria-disabled',
154
- 'aria-expanded',
155
- 'aria-selected',
156
- 'aria-modal',
157
- 'aria-valuemax',
158
- 'aria-valuemin',
159
- 'aria-valuenow',
160
- 'aria-valuetext',
161
- ];
162
-
163
- // The Angular-facing prop surface: React's IScrollViewProps minus the React-coupled fields
164
- // (ReactNode children, ReactElement refreshControl) — Angular takes children via <ng-content> and
165
- // composes RefreshControl through projection instead. Declared per-adapter over the shared
166
- // accessibility base since a framework element/ref field can't live in a shared agnostic type.
167
- export interface IAngularScrollViewProps
168
- extends IAccessibilityProps, IAriaProps {
169
- style?: IStyleProp<IViewStyle>;
170
- // A bare string resolves through the shared style registry, like `class` on the host node.
171
- contentContainerStyle?: IStyleProp<IViewStyle> | string;
172
- horizontal?: boolean;
173
- scrollEnabled?: boolean;
174
- showsVerticalScrollIndicator?: boolean;
175
- showsHorizontalScrollIndicator?: boolean;
176
- pagingEnabled?: boolean;
177
- bounces?: boolean;
178
- decelerationRate?: 'normal' | 'fast' | number;
179
- scrollEventThrottle?: number;
180
- contentInset?: {
181
- top?: number;
182
- left?: number;
183
- bottom?: number;
184
- right?: number;
185
- };
186
- contentOffset?: { x: number; y: number };
187
- removeClippedSubviews?: boolean;
188
- snapToInterval?: number;
189
- snapToOffsets?: number[];
190
- snapToAlignment?: 'start' | 'center' | 'end';
191
- snapToStart?: boolean;
192
- snapToEnd?: boolean;
193
- disableIntervalMomentum?: boolean;
194
- // Sticky headers: RN implements stickiness PURELY IN JS (ScrollView.js wraps each flagged child
195
- // in ScrollViewStickyHeader, driven by the scroll offset). The native scroll view does NOT honor
196
- // an index array. See the header note on the Angular projection boundary for the auto-wrap.
197
- stickyHeaderIndices?: number[];
198
- invertStickyHeaders?: boolean;
199
- // Angular auto projection is renderer-node based, so this input is intentionally explicit-
200
- // composition only: custom sticky wrappers must be written in the template; auto stickyHeaderIndices
201
- // uses the built-in wrapper to stay AOT-safe.
202
- StickyHeaderComponent?: unknown;
203
- keyboardDismissMode?: 'none' | 'on-drag' | 'interactive';
204
- keyboardShouldPersistTaps?: boolean | 'always' | 'never' | 'handled';
205
- maintainVisibleContentPosition?: {
206
- minIndexForVisible: number;
207
- autoscrollToTopThreshold?: number;
208
- };
209
- // iOS-only forwarding props (harmless on Android: its manager ignores unknown props).
210
- alwaysBounceHorizontal?: boolean;
211
- alwaysBounceVertical?: boolean;
212
- centerContent?: boolean;
213
- scrollIndicatorInsets?: {
214
- top?: number;
215
- left?: number;
216
- bottom?: number;
217
- right?: number;
218
- };
219
- indicatorStyle?: 'default' | 'black' | 'white';
220
- directionalLockEnabled?: boolean;
221
- automaticallyAdjustKeyboardInsets?: boolean;
222
- contentInsetAdjustmentBehavior?:
223
- 'automatic' | 'scrollableAxes' | 'never' | 'always';
224
- minimumZoomScale?: number;
225
- maximumZoomScale?: number;
226
- zoomScale?: number;
227
- bouncesZoom?: boolean;
228
- pinchGestureEnabled?: boolean;
229
- // Android-only forwarding props (harmless on iOS).
230
- nestedScrollEnabled?: boolean;
231
- overScrollMode?: 'auto' | 'always' | 'never';
232
- fadingEdgeLength?: number;
233
- persistentScrollbar?: boolean;
234
- endFillColor?: string;
235
- onLayout?: IScrollHandler;
236
- onScroll?: IScrollHandler;
237
- onScrollBeginDrag?: IScrollHandler;
238
- onScrollEndDrag?: IScrollHandler;
239
- onMomentumScrollBegin?: IScrollHandler;
240
- onMomentumScrollEnd?: IScrollHandler;
241
- // iOS-only: user tapped the status bar to scroll to top. Inert on Android.
242
- onScrollToTop?: IScrollHandler;
243
- // Synthesized in JS from the content view's onLayout (RN _handleContentOnLayout); deduped.
244
- onContentSizeChange?: IContentSizeHandler;
245
- onAccessibilityAction?: (event: ISymbioteEvent) => void;
246
- onAccessibilityTap?: (event: ISymbioteEvent) => void;
247
- onMagicTap?: (event: ISymbioteEvent) => void;
248
- onAccessibilityEscape?: (event: ISymbioteEvent) => void;
249
- }
250
-
251
- // What ScrollView itself takes as plain @Input()s: the full surface minus the layout/content-size/
252
- // accessibility events it exposes as real @Output() EventEmitters instead (see ScrollViewBase below).
253
- // onScroll and the drag/momentum family stay callback @Input()s permanently — they must also accept
254
- // an Animated.event(...) native-driver marker, which no @Output() binding can carry.
255
- export type IAngularScrollViewInputs = Omit<
256
- IAngularScrollViewProps,
257
- | 'onLayout'
258
- | 'onScrollToTop'
259
- | 'onContentSizeChange'
260
- | 'onAccessibilityAction'
261
- | 'onAccessibilityTap'
262
- | 'onMagicTap'
263
- | 'onAccessibilityEscape'
264
- >;
265
-
266
- // Strip undefined entries so a prop the user never set is not forwarded to the host (an undefined
267
- // reaching Fabric is at best a no-op, at worst clears a default). The Angular twin of React/Vue
268
- // destructuring `...rest` past the defined props.
269
- function compact(bag: Record<string, unknown>): Record<string, unknown> {
270
- const result: Record<string, unknown> = {};
271
- for (const key of Object.keys(bag)) {
272
- if (bag[key] !== undefined) result[key] = bag[key];
273
- }
274
- return result;
275
- }
276
-
277
- // ScrollView's forwarded surface (scroll events + the snap/keyboard/zoom families) is exactly the
278
- // flat-bag shape SymbioteHostPropsDirective spreads onto a host element via Renderer2 (-> routeProp).
279
- // The scroll-event callbacks ride this bag (not the (event) channel) because routeProp must be free
280
- // to wire onScroll as an Animated.event when sticky headers drive the value natively, which the
281
- // listen()/setEventListener channel cannot carry. This mirrors React/Vue putting onScroll on
282
- // outerProps.
283
- @Directive({
284
- selector: '[symbioteScrollViewProjection]',
285
- standalone: true,
286
- inputs: ['symbioteScrollViewProjection'],
287
- })
288
- export class ScrollViewProjectionDirective {
289
- private readonly elementRef = inject<ElementRef<unknown>>(ElementRef);
290
-
291
- set symbioteScrollViewProjection(controller: ScrollViewProjectionController) {
292
- const node = this.elementRef.nativeElement;
293
- if (isSymbioteNode(node)) controller.bindContentNode(node);
294
- }
295
- }
296
-
297
- // @Directive() (no selector) is the Angular-sanctioned decorator for an abstract base that
298
- // declares lifecycle hooks and @ViewChild queries (mirrors AnimatedComponentBase) — without it
299
- // ngtsc rejects the inherited hooks/queries (NG2007). The concrete platform @Components add ONLY a
300
- // decorator + their platform template; all behavior lives here.
301
- @Directive()
302
- export abstract class ScrollViewBase
303
- implements
304
- IAngularScrollViewInputs,
305
- AfterContentChecked,
306
- AfterViewInit,
307
- DoCheck,
308
- OnChanges,
309
- OnDestroy
310
- {
311
- style: IStyleProp<IViewStyle> | undefined;
312
- contentContainerStyle: IStyleProp<IViewStyle> | string | undefined;
313
- horizontal: boolean | undefined;
314
- scrollEnabled: boolean | undefined;
315
- showsVerticalScrollIndicator: boolean | undefined;
316
- showsHorizontalScrollIndicator: boolean | undefined;
317
- pagingEnabled: boolean | undefined;
318
- bounces: boolean | undefined;
319
- decelerationRate: 'normal' | 'fast' | number | undefined;
320
- scrollEventThrottle: number | undefined;
321
- contentInset: IAngularScrollViewProps['contentInset'];
322
- contentOffset: IAngularScrollViewProps['contentOffset'];
323
- removeClippedSubviews: boolean | undefined;
324
- snapToInterval: number | undefined;
325
- snapToOffsets: number[] | undefined;
326
- snapToAlignment: IAngularScrollViewProps['snapToAlignment'];
327
- snapToStart: boolean | undefined;
328
- snapToEnd: boolean | undefined;
329
- disableIntervalMomentum: boolean | undefined;
330
- stickyHeaderIndices: number[] | undefined;
331
- invertStickyHeaders: boolean | undefined;
332
- StickyHeaderComponent: unknown;
333
- keyboardDismissMode: IAngularScrollViewProps['keyboardDismissMode'];
334
- keyboardShouldPersistTaps: IAngularScrollViewProps['keyboardShouldPersistTaps'];
335
- maintainVisibleContentPosition: IAngularScrollViewProps['maintainVisibleContentPosition'];
336
- alwaysBounceHorizontal: boolean | undefined;
337
- alwaysBounceVertical: boolean | undefined;
338
- centerContent: boolean | undefined;
339
- scrollIndicatorInsets: IAngularScrollViewProps['scrollIndicatorInsets'];
340
- indicatorStyle: IAngularScrollViewProps['indicatorStyle'];
341
- directionalLockEnabled: boolean | undefined;
342
- automaticallyAdjustKeyboardInsets: boolean | undefined;
343
- contentInsetAdjustmentBehavior: IAngularScrollViewProps['contentInsetAdjustmentBehavior'];
344
- minimumZoomScale: number | undefined;
345
- maximumZoomScale: number | undefined;
346
- zoomScale: number | undefined;
347
- bouncesZoom: boolean | undefined;
348
- pinchGestureEnabled: boolean | undefined;
349
- nestedScrollEnabled: boolean | undefined;
350
- overScrollMode: IAngularScrollViewProps['overScrollMode'];
351
- fadingEdgeLength: number | undefined;
352
- persistentScrollbar: boolean | undefined;
353
- endFillColor: string | undefined;
354
- onScroll: IScrollHandler | undefined;
355
- onScrollBeginDrag: IScrollHandler | undefined;
356
- onScrollEndDrag: IScrollHandler | undefined;
357
- onMomentumScrollBegin: IScrollHandler | undefined;
358
- onMomentumScrollEnd: IScrollHandler | undefined;
359
-
360
- // The layout/content-size/accessibility events as real Angular events: `(layout)="…"`, not
361
- // `[onLayout]="…"`. onScroll and the drag/momentum family stay plain @Input() callbacks above —
362
- // they must also accept an Animated.event(...) native-driver marker (see the file header note),
363
- // which no @Output() binding can carry.
364
- @Output() readonly layout = new EventEmitter<ISymbioteEvent>();
365
- @Output() readonly scrollToTop = new EventEmitter<ISymbioteEvent>();
366
- @Output() readonly contentSizeChange = new EventEmitter<IContentSize>();
367
- @Output() readonly accessibilityAction = new EventEmitter<ISymbioteEvent>();
368
- @Output() readonly accessibilityTap = new EventEmitter<ISymbioteEvent>();
369
- @Output() readonly magicTap = new EventEmitter<ISymbioteEvent>();
370
- @Output() readonly accessibilityEscape = new EventEmitter<ISymbioteEvent>();
371
-
372
- testID: string | undefined;
373
- nativeID: string | undefined;
374
- accessible: boolean | undefined;
375
- accessibilityLabel: string | undefined;
376
- accessibilityHint: string | undefined;
377
- accessibilityRole: IAccessibilityProps['accessibilityRole'];
378
- accessibilityState: IAccessibilityStateValue | undefined;
379
- accessibilityValue: IAccessibilityProps['accessibilityValue'];
380
- accessibilityActions: IAccessibilityProps['accessibilityActions'];
381
- accessibilityLabelledBy: string | string[] | undefined;
382
- importantForAccessibility: IAccessibilityProps['importantForAccessibility'];
383
- accessibilityLiveRegion: IAccessibilityProps['accessibilityLiveRegion'];
384
- screenReaderFocusable: boolean | undefined;
385
- accessibilityViewIsModal: boolean | undefined;
386
- accessibilityElementsHidden: boolean | undefined;
387
- accessibilityIgnoresInvertColors: boolean | undefined;
388
- accessibilityLanguage: string | undefined;
389
- accessibilityRespondsToUserInteraction: boolean | undefined;
390
- accessibilityShowsLargeContentViewer: boolean | undefined;
391
- accessibilityLargeContentTitle: string | undefined;
392
- role: IAriaProps['role'];
393
- 'aria-label': string | undefined;
394
- 'aria-labelledby': string | undefined;
395
- 'aria-live': IAriaProps['aria-live'];
396
- 'aria-hidden': boolean | undefined;
397
- 'aria-busy': boolean | undefined;
398
- 'aria-checked': boolean | 'mixed' | undefined;
399
- 'aria-disabled': boolean | undefined;
400
- 'aria-expanded': boolean | undefined;
401
- 'aria-selected': boolean | undefined;
402
- 'aria-modal': boolean | undefined;
403
- 'aria-valuemax': number | undefined;
404
- 'aria-valuemin': number | undefined;
405
- 'aria-valuenow': number | undefined;
406
- 'aria-valuetext': string | undefined;
407
-
408
- // The host directive on the scroll-view intrinsic; `.node` is the committed SymbioteNode held by
409
- // IDENTITY (Renderer2.createElement returned the engine node, ElementRef hands it back unwrapped).
410
- // Inherited by the decorated subclass — Angular collects base-class @ViewChild queries.
411
- @ViewChild('host', { read: SymbioteHostPropsDirective })
412
- private hostDirective?: SymbioteHostPropsDirective;
413
-
414
- @ContentChild(RefreshControl)
415
- protected projectedRefreshControl?: RefreshControl;
416
-
417
- // This component's OWN anchor host — where a `class="..."` at the use site resolves (see
418
- // anchorHostStyle's doc comment) — NOT `#host` in the platform templates, which targets the real
419
- // inner scroll-view primitive one level down. Injected in the BASE because both platform
420
- // subclasses merged the identical anchor style into their `scrollProps` override.
421
- private readonly elementRef = inject<ElementRef<unknown>>(ElementRef);
422
-
423
- // The anchor's class-derived style is written by the RENDERER (addClass/removeClass ->
424
- // commitClassStyle), never through an @Input, so `inputsRevision` cannot cover it and a bag
425
- // memoized on plain reads of it would keep a stale class forever. It gets its own signal, polled
426
- // in ngDoCheck below: that hook runs on exactly the checks that could have changed it (Angular
427
- // applies the parent's class bindings before flushing this directive's pre-order hooks), which is
428
- // the same cadence the old `scrollProps` getter was re-read at.
429
- protected readonly anchorStyle = signal<unknown>(undefined);
430
-
431
- // A single AnimatedValue tracks the scroll offset and drives every sticky header's translateY
432
- // (RN's _scrollAnimatedValue). A stable field (allocated once, held by identity — Angular does
433
- // not proxy class fields, so no markRaw needed); the native attach below feeds it on the UI
434
- // thread. Allocated unconditionally; inert until a sticky header consumes it.
435
- protected readonly scrollAnimatedValue = new AnimatedValue(0);
436
-
437
- // The last-seen content size, used to dedupe onContentSizeChange: RN fires the content onLayout
438
- // on every layout pass; only real size changes emit (didContentSizeChange).
439
- private lastContentSize: IContentSize | null = null;
440
- // Inverted sticky headers stick to the BOTTOM, so they need the viewport height (RN _handleLayout).
441
- private viewportHeight: number | undefined = undefined;
442
- // What the projection controller was last told about the projected RefreshControl, so
443
- // ngAfterContentChecked can tell a real content change from an ordinary check.
444
- private lastHasProjectedRefreshControl = false;
445
-
446
- protected readonly projectionController = new ScrollViewProjectionController({
447
- stickyHeaderIndices: undefined,
448
- invertStickyHeaders: undefined,
449
- scrollViewHeight: undefined,
450
- scrollAnimatedValue: this.scrollAnimatedValue,
451
- customStickyHeaderComponent: undefined,
452
- excludeRefreshControl: false,
453
- });
454
-
455
- // Native sticky-scroll attach (RN attachNativeEvent): when the native module is available the
456
- // scroll value is driven on the UI thread so the interpolations ride scroll natively (no JS
457
- // jitter). Through whenCommitted because under Angular's zoneless batched CD the host's Fabric
458
- // tag does not exist yet at ngAfterViewInit time (the async-commit gotcha Vue documents); the
459
- // bind runs now if committed, else after the commit that assigns the tag. Detached on destroy.
460
- private detachStickyScroll: (() => void) | undefined;
461
- private cancelStickyBind: (() => void) | undefined;
462
- // What the current attach was made for, so a re-run that changes nothing stays a no-op.
463
- private stickyAttachedEnabled = false;
464
- private stickyAttachedNode: ISymbioteNode | null = null;
465
-
466
- private lastLoggedIsHorizontal: boolean | undefined = undefined;
467
-
468
- // Stable reference (bound once): inverted sticky headers need the viewport height captured off
469
- // the scroll-view's own onLayout before forwarding to the user (RN _handleLayout). A getter that
470
- // built this arrow function fresh on every `scrollProps` access would hand `[symbioteHostProps]`
471
- // a new function reference every change-detection pass touching this component — jsonEqual
472
- // (commit.ts) falls back to Object.is on a function leaf, so even a structurally-identical bag
473
- // reads as "props changed" and forces a real Fabric re-clone that cascades up every ancestor
474
- // (see AnimatedComponentBase.reconcile()'s identical warning).
475
- private readonly handleInvertedStickyLayout = (
476
- event: ISymbioteEvent,
477
- ): void => {
478
- const height = readLayoutDimension(event, 'height');
479
- // The projection controller is pushed from here rather than picked up on the next prop-bag
480
- // read: viewportHeight is internal mutable state, so once `scrollProps` became a memoized
481
- // computed nothing would re-read it. Guarded on a real change - an onLayout that reports the
482
- // same height must not cost a sticky reconcile walk.
483
- if (height !== undefined && height !== this.viewportHeight) {
484
- this.viewportHeight = height;
485
- this.updateProjectionController();
486
- }
487
- this.layout.emit(event);
488
- };
489
-
490
- // Same reasoning as handleInvertedStickyLayout: the content view's onLayout synthesizes
491
- // onContentSizeChange (deduped) and must stay a stable reference across `contentProps` re-reads.
492
- private readonly handleContentLayout = (event: ISymbioteEvent): void => {
493
- const width = readLayoutDimension(event, 'width');
494
- const height = readLayoutDimension(event, 'height');
495
- if (width === undefined || height === undefined) return;
496
- if (!didContentSizeChange(this.lastContentSize, { width, height })) return;
497
- this.lastContentSize = { width, height };
498
- dlog(`Angular ScrollView contentSizeChange ${width}x${height}`);
499
- this.contentSizeChange.emit({ width, height });
500
- };
501
-
502
- // Memoizes the wrapper each `emitterCallback` builds, keyed by the emitter it closes over.
503
- // Without this, `scrollProps`/`refreshControlProps` would hand a fresh closure to the forwarded
504
- // prop bag on every evaluation — the same jsonEqual/Object.is function-leaf problem as the arrow
505
- // fields above. `.observed` is checked BEFORE the cache so an unbound event still resolves to
506
- // `undefined` rather than a stale wrapper from before the last unsubscribe.
507
- private readonly emitterCallbackCache = new WeakMap<
508
- EventEmitter<ISymbioteEvent>,
509
- IScrollHandler
510
- >();
511
-
512
- // The sticky JS-path Animated.event handler depends on a REAL input (onScroll), so it can't be a
513
- // plain stable field the way handleInvertedStickyLayout/handleContentLayout are — it must track
514
- // `this.onScroll` genuinely changing, mirroring sticky-header.ts's own rebuildInterpolation cache
515
- // (rebuild only when the tracked dependency's reference actually differs, not on every getter
516
- // read). A fresh `animatedEvent(...)` call every `scrollProps` access would otherwise construct a
517
- // new listener wrapper (and a new AnimatedEvent walking `collectMappedValues`) on every unrelated
518
- // change-detection pass while sticky headers are active.
519
- private cachedStickyOnScrollSource: IScrollHandler | undefined;
520
- private cachedStickyOnScrollHandler:
521
- ((...args: readonly unknown[]) => void) | undefined;
522
-
523
- get isHorizontal(): boolean {
524
- const value = this.horizontal === true;
525
- if (value !== this.lastLoggedIsHorizontal) {
526
- this.lastLoggedIsHorizontal = value;
527
- dlog(
528
- `Angular ScrollView isHorizontal changed to ${value} (horizontal input=${this.horizontal})`,
529
- );
530
- }
531
- return value;
532
- }
533
-
534
- private get hasStickyHeaders(): boolean {
535
- return (
536
- this.stickyHeaderIndices !== undefined &&
537
- this.stickyHeaderIndices.length > 0
538
- );
539
- }
540
-
541
- // A class-name string resolves through the shared registry before it reaches
542
- // selectScrollIntrinsics, which only understands style objects/arrays.
543
- private get resolvedContentContainerStyle():
544
- IStyleProp<IViewStyle> | undefined {
545
- return typeof this.contentContainerStyle === 'string'
546
- ? resolveClassName(this.contentContainerStyle)
547
- : this.contentContainerStyle;
548
- }
549
-
550
- private get scrollViewBaseStyle(): IViewStyle {
551
- return selectScrollIntrinsics(
552
- this.isHorizontal,
553
- this.resolvedContentContainerStyle,
554
- ).scrollViewBaseStyle;
555
- }
556
-
557
- // Bridges non-reactive @Input fields into the reactive graph, so a computed() can memoize a
558
- // bag derived from them. Signal inputs would make this unnecessary, but `input()` is visible
559
- // only to the AOT compiler and this package's unit suite runs on JIT - see the
560
- // `angular-adapter-change-detection` skill, §6. `signal()`/`computed()` themselves are plain
561
- // runtime APIs and need no compiler support, which is what makes this bridge possible at all.
562
- //
563
- // ONLY safe for a bag whose every dependency is an @Input. A bag that also reads internal
564
- // mutable state (viewportHeight, lastContentSize, the anchor's class-derived style) would go
565
- // stale, because nothing bumps this for those - make that state its own signal (see
566
- // `anchorStyle`) instead of widening this one.
567
- private readonly inputsRevision = signal(0);
568
-
569
- // The forwarded host-prop bag for the scroll-view node: aria/role folded, the native pass-through
570
- // families, the scroll-event callbacks, then the lifecycle-managed overrides (nestedScrollEnabled
571
- // default ON, horizontal when defined, decelerationRate resolved per-platform, the sticky onScroll
572
- // path). Base style UNDER user style so an explicit user value still wins. Mirrors Vue's outerProps
573
- // + scrollProps assembly.
574
- //
575
- // MEASURED 2026-08-16: as a getter this rebuilt the whole bag on every refresh of this view, so
576
- // the `symbioteHostProps` reference check failed every time and every key was re-pushed through
577
- // the renderer - once per scroll frame per host binding (2 before `contentProps` was memoized,
578
- // 1 after, 0 now; the pin lives in prop-bag-stability.test.ts).
579
- //
580
- // It is a `computed` on the BASE and no longer overridable: a subclass getter cannot override a
581
- // field. The platform subclasses used to override it with byte-identical bodies (merge the
582
- // anchor's class-derived style ahead of the resolved style), so that merge moved down here
583
- // rather than into a `decorateScrollProps` hook both of them would implement the same way.
584
- readonly scrollProps = computed<Record<string, unknown>>(() => {
585
- this.inputsRevision();
586
- const bag: Record<string, unknown> = compact({
587
- ...resolveAccessibilityProps(this.accessibilityInputs()),
588
- scrollEnabled: this.scrollEnabled,
589
- showsVerticalScrollIndicator: this.showsVerticalScrollIndicator,
590
- showsHorizontalScrollIndicator: this.showsHorizontalScrollIndicator,
591
- pagingEnabled: this.pagingEnabled,
592
- bounces: this.bounces,
593
- contentInset: this.contentInset,
594
- contentOffset: this.contentOffset,
595
- removeClippedSubviews: this.removeClippedSubviews,
596
- snapToInterval: this.snapToInterval,
597
- snapToOffsets: this.snapToOffsets,
598
- snapToAlignment: this.snapToAlignment,
599
- snapToStart: this.snapToStart,
600
- snapToEnd: this.snapToEnd,
601
- disableIntervalMomentum: this.disableIntervalMomentum,
602
- keyboardDismissMode: this.keyboardDismissMode,
603
- keyboardShouldPersistTaps: this.keyboardShouldPersistTaps,
604
- maintainVisibleContentPosition: this.maintainVisibleContentPosition,
605
- alwaysBounceHorizontal: this.alwaysBounceHorizontal,
606
- alwaysBounceVertical: this.alwaysBounceVertical,
607
- centerContent: this.centerContent,
608
- scrollIndicatorInsets: this.scrollIndicatorInsets,
609
- indicatorStyle: this.indicatorStyle,
610
- directionalLockEnabled: this.directionalLockEnabled,
611
- automaticallyAdjustKeyboardInsets: this.automaticallyAdjustKeyboardInsets,
612
- contentInsetAdjustmentBehavior: this.contentInsetAdjustmentBehavior,
613
- minimumZoomScale: this.minimumZoomScale,
614
- maximumZoomScale: this.maximumZoomScale,
615
- zoomScale: this.zoomScale,
616
- bouncesZoom: this.bouncesZoom,
617
- pinchGestureEnabled: this.pinchGestureEnabled,
618
- overScrollMode: this.overScrollMode,
619
- fadingEdgeLength: this.fadingEdgeLength,
620
- persistentScrollbar: this.persistentScrollbar,
621
- endFillColor: this.endFillColor,
622
- onScrollBeginDrag: this.onScrollBeginDrag,
623
- onScrollEndDrag: this.onScrollEndDrag,
624
- onMomentumScrollBegin: this.onMomentumScrollBegin,
625
- onMomentumScrollEnd: this.onMomentumScrollEnd,
626
- onScrollToTop: this.emitterCallback(this.scrollToTop),
627
- onAccessibilityAction: this.emitterCallback(this.accessibilityAction),
628
- onAccessibilityTap: this.emitterCallback(this.accessibilityTap),
629
- onMagicTap: this.emitterCallback(this.magicTap),
630
- onAccessibilityEscape: this.emitterCallback(this.accessibilityEscape),
631
- });
632
-
633
- // RN defaults nested scrolling ON (ScrollView.js `nestedScrollEnabled ?? true`); Android needs
634
- // it to scroll a nested scrollable independently, iOS handles nesting natively (a no-op there).
635
- bag.nestedScrollEnabled = this.nestedScrollEnabled ?? true;
636
- // iOS needs `horizontal` to flip RCTScrollView's axis; Android's dedicated manager ignores it.
637
- if (this.horizontal !== undefined) bag.horizontal = this.horizontal;
638
- if (this.decelerationRate !== undefined) {
639
- bag.decelerationRate = resolveDecelerationRate(this.decelerationRate);
640
- }
641
-
642
- // onScroll: when sticky headers are active, the offset must reach the AnimatedValue (RN
643
- // _scrollAnimatedValueAttachment). With the native module, the post-commit attach below drives
644
- // it on the UI thread (throttle 1, ScrollView.js:1798); without it, Animated.event drives the
645
- // value each frame (JS jitter). The DECISIONS (which path, throttle defaults, whether to
646
- // capture viewport height) are folded out to the shared resolveScrollForwarding; Angular only
647
- // EXECUTES them, keeping stable-reference handlers so a fresh closure never forces a re-clone.
648
- const nativeStickyAvailable =
649
- this.hasStickyHeaders && isNativeAnimatedAvailable();
650
- const forwarding = resolveScrollForwarding({
651
- hasStickyHeaders: this.hasStickyHeaders,
652
- nativeStickyAvailable,
653
- invertStickyHeaders: this.invertStickyHeaders,
654
- scrollEventThrottle: this.scrollEventThrottle,
655
- maintainVisibleContentPosition: this.maintainVisibleContentPosition,
656
- snapToAlignment: this.snapToAlignment,
657
- });
658
- // onScroll: the JS-fallback path uses the cached Animated.event handler; the native + plain paths
659
- // forward the user handler as-is (the native driver attaches the value on the UI thread).
660
- if (forwarding.mode === 'sticky-js') {
661
- bag.onScroll = this.stickyOnScrollHandler(this.onScroll);
662
- } else if (this.onScroll !== undefined) {
663
- bag.onScroll = this.onScroll;
664
- }
665
- if (forwarding.scrollEventThrottle !== undefined) {
666
- bag.scrollEventThrottle = forwarding.scrollEventThrottle;
667
- }
668
- // Inverted sticky headers need the viewport height (RN _handleLayout): capture it on the
669
- // scroll-view onLayout, then call the user's handler. Otherwise forward the layout emitter.
670
- if (forwarding.capturesViewportHeight) {
671
- bag.onLayout = this.handleInvertedStickyLayout;
672
- } else {
673
- const layoutCallback = this.emitterCallback(this.layout);
674
- if (layoutCallback !== undefined) bag.onLayout = layoutCallback;
675
- }
676
-
677
- // Thunks, not strings: an eagerly built message would be paid with logging off (see dlog's own
678
- // comment). Less often than it used to fire now that this bag is memoized, but the recompute
679
- // still rides every real input change.
680
- dlog(
681
- () =>
682
- `Angular ScrollView -> ${this.isHorizontal ? 'horizontal' : 'vertical'} (sticky=${this.hasStickyHeaders})`,
683
- );
684
- dlog(
685
- () =>
686
- `STICKY[sv] forwarding mode=${forwarding.mode} throttle=${forwarding.scrollEventThrottle} ` +
687
- `nativeStickyAvailable=${nativeStickyAvailable} onScrollBound=${bag.onScroll !== undefined}`,
688
- );
689
-
690
- // The anchor's class-derived style goes FIRST: flattenStyle's later-wins collapse keeps an
691
- // explicit [style] winning over the ambient class. Flat rather than the nested
692
- // `[anchor, [base, style]]` the platform overrides used to build - flattenStyle folds nested
693
- // arrays in the same order, so the resolved value is unchanged.
694
- bag.style = [this.anchorStyle(), this.scrollViewBaseStyle, this.style];
695
- return bag;
696
- });
697
-
698
- // Overridable hook, NOT `this.style` directly: `splitLayoutProps` below decides which layout
699
- // properties (flex/height/gap/…) go on the Android outer refresh-control wrapper vs. the inner
700
- // scroll view. `this.style` alone only carries the explicit `[style]` @Input — a composed
701
- // component's own anchor host can hold ADDITIONAL class-derived layout style invisible to this
702
- // split, so the wrapper collapses to zero size on real Android devices. Angular's Android
703
- // ScrollView (index.android.ts) overrides this to merge in `anchorHostStyle` (mirrors Vue's
704
- // identical `layoutSplitStyle` field and the device bug it fixes).
705
- protected get layoutSplitStyle(): IStyleProp<IViewStyle> {
706
- return this.style;
707
- }
708
-
709
- // Memoizable for the same reasons `scrollProps` is: `layoutSplitStyle` resolves to @Input `style`
710
- // plus (on Android) the `anchorStyle` signal, both covered. The anchor style is deliberately NOT
711
- // re-merged into `props.style` here - `splitLayoutProps` already routed its layout half to the
712
- // outer refresh-control wrapper and left the rest in `inner`.
713
- readonly androidWrappedScrollProps = computed<Record<string, unknown>>(() => {
714
- this.inputsRevision();
715
- const props = { ...this.scrollProps() };
716
- const { inner, outer } = splitLayoutProps(this.layoutSplitStyle);
717
- dlog(
718
- () =>
719
- `Angular ScrollView splitProbe layoutSplitStyle=${JSON.stringify(this.layoutSplitStyle)} ` +
720
- `outer=${JSON.stringify(outer)} inner=${JSON.stringify(inner)}`,
721
- );
722
- props.style = [this.scrollViewBaseStyle, inner];
723
- props.nestedScrollEnabled = true;
724
- return props;
725
- });
726
-
727
- // Deliberately still GETTERS, unlike every other bag on this class. Their whole content comes
728
- // from the PROJECTED RefreshControl's own @Input()s (refreshing, tintColor, colors, …), which
729
- // Angular routes through THAT component's ngOnChanges - `inputsRevision` here never moves for
730
- // them. Memoizing on it would freeze `refreshing` at its first value and strand the native
731
- // spinner forever, which is exactly the silent-staleness class this file avoids elsewhere.
732
- // Making them memoizable means giving RefreshControl its own revision signal to read here.
733
- get iosRefreshControlProps(): Record<string, unknown> {
734
- return this.refreshControlProps();
735
- }
736
-
737
- get androidRefreshControlProps(): Record<string, unknown> {
738
- const { outer } = splitLayoutProps(this.layoutSplitStyle);
739
- dlog(
740
- () =>
741
- `Angular ScrollView refreshControlProbe outer=${JSON.stringify(outer)} ` +
742
- `hasRefresh=${this.projectedRefreshControl !== undefined}`,
743
- );
744
- return this.refreshControlProps(outer);
745
- }
746
-
747
- protected handleProjectedRefresh(nativeNode: unknown): void {
748
- this.projectedRefreshControl?.handleRefresh(nativeNode);
749
- }
750
-
751
- private refreshControlProps(
752
- style?: IStyleProp<IViewStyle>,
753
- ): Record<string, unknown> {
754
- const refresh = this.projectedRefreshControl;
755
- if (refresh === undefined) return {};
756
- return compact({
757
- ...refresh.folded,
758
- refreshing: refresh.refreshing,
759
- tintColor: refresh.tintColor,
760
- title: refresh.title,
761
- titleColor: refresh.titleColor,
762
- progressViewOffset: refresh.progressViewOffset,
763
- colors: refresh.colors,
764
- progressBackgroundColor: refresh.progressBackgroundColor,
765
- size: refresh.size,
766
- enabled: refresh.enabled,
767
- style,
768
- testID: refresh.testID,
769
- nativeID: refresh.nativeID,
770
- accessible: refresh.accessible,
771
- onAccessibilityAction: this.emitterCallback(refresh.accessibilityAction),
772
- onAccessibilityTap: this.emitterCallback(refresh.accessibilityTap),
773
- onMagicTap: this.emitterCallback(refresh.magicTap),
774
- onAccessibilityEscape: this.emitterCallback(refresh.accessibilityEscape),
775
- });
776
- }
777
-
778
- get hasProjectedRefreshControl(): boolean {
779
- return this.projectedRefreshControl !== undefined;
780
- }
781
-
782
- // The content (inner) view's prop bag. `collapsable: false` keeps the layout-only content view a
783
- // real native view (Android Fabric view-flattens it away otherwise, hoisting cells as direct
784
- // children of a scroll view that hosts exactly one — an addViewAt crash). collapsableChildren
785
- // false preserves the cell views maintainVisibleContentPosition/snapToAlignment anchor against.
786
- // onLayout synthesizes onContentSizeChange (deduped). iOS never flattens; both are no-ops there.
787
- readonly contentProps = computed<Record<string, unknown>>(() => {
788
- this.inputsRevision();
789
- const { contentStyle } = selectScrollIntrinsics(
790
- this.isHorizontal,
791
- this.resolvedContentContainerStyle,
792
- );
793
- const bag: Record<string, unknown> = {
794
- style: contentStyle,
795
- collapsable: false,
796
- };
797
- if (
798
- this.maintainVisibleContentPosition !== undefined ||
799
- this.snapToAlignment !== undefined
800
- ) {
801
- bag.collapsableChildren = false;
802
- }
803
- bag.onLayout = this.handleContentLayout;
804
- return bag;
805
- });
806
-
807
- // Wraps an @Output() as a plain callback only while it has a subscriber, so an unbound event
808
- // still leaves the forwarded prop bag key absent — the same "undefined means nobody cares"
809
- // contract the old @Input() callbacks had. Mirrors Pressable's emitterHandler. The wrapper itself
810
- // is memoized per emitter (emitterCallbackCache) rather than rebuilt on every call: see that
811
- // field's comment for why an unstable closure here breaks the forwarded prop bag.
812
- //
813
- // `.observed` is NOT reactive, and `scrollProps` memoizes over it. That is sound because Angular
814
- // subscribes a template's (event) listeners in its CREATION pass, before any input is written and
815
- // before this component's own view is first refreshed - so `observed` is already settled at the
816
- // first evaluation and cannot flip afterwards without destroying the whole component.
817
- private emitterCallback(
818
- emitter: EventEmitter<ISymbioteEvent>,
819
- ): IScrollHandler | undefined {
820
- if (!emitter.observed) return undefined;
821
- let cached = this.emitterCallbackCache.get(emitter);
822
- if (cached === undefined) {
823
- cached = (event: ISymbioteEvent) => emitter.emit(event);
824
- this.emitterCallbackCache.set(emitter, cached);
825
- }
826
- return cached;
827
- }
828
-
829
- // Rebuilds the JS-path Animated.event handler only when the tracked `onScroll` input actually
830
- // changes reference (see cachedStickyOnScrollHandler's comment).
831
- private stickyOnScrollHandler(
832
- userOnScroll: IScrollHandler | undefined,
833
- ): (...args: readonly unknown[]) => void {
834
- if (
835
- this.cachedStickyOnScrollHandler === undefined ||
836
- this.cachedStickyOnScrollSource !== userOnScroll
837
- ) {
838
- this.cachedStickyOnScrollSource = userOnScroll;
839
- this.cachedStickyOnScrollHandler = animatedEvent(
840
- [{ nativeEvent: { contentOffset: { y: this.scrollAnimatedValue } } }],
841
- userOnScroll === undefined
842
- ? undefined
843
- : {
844
- listener: (...args: readonly unknown[]) =>
845
- forwardScrollEvent(userOnScroll, args),
846
- },
847
- );
848
- }
849
- return this.cachedStickyOnScrollHandler;
850
- }
851
-
852
- // The committed scroll-view node held by IDENTITY (the directive's ElementRef). null until the
853
- // element commits; the imperative handle and the sticky attach both read it through this getter.
854
- private get hostNode(): ISymbioteNode | null {
855
- const native = this.hostDirective?.node;
856
- return isSymbioteNode(native) ? native : null;
857
- }
858
-
859
- // The imperative API a parent reaches via @ViewChild(ScrollView). buildScrollViewHandle is the
860
- // shared, proven handle (React/Vue use it verbatim); it reads the node through the LAZY getter on
861
- // every call, so a command before commit no-ops rather than freezing a null node.
862
- private readonly handle: IScrollViewHandle = buildScrollViewHandle(
863
- () => this.hostNode,
864
- );
865
-
866
- scrollTo(options?: { x?: number; y?: number; animated?: boolean }): void {
867
- this.handle.scrollTo(options);
868
- }
869
-
870
- scrollToEnd(options?: { animated?: boolean }): void {
871
- this.handle.scrollToEnd(options);
872
- }
873
-
874
- flashScrollIndicators(): void {
875
- this.handle.flashScrollIndicators();
876
- }
877
-
878
- getScrollNode(): ISymbioteNode | null {
879
- return this.handle.getScrollNode();
880
- }
881
-
882
- ngAfterViewInit(): void {
883
- dlog('STICKY[sv] ngAfterViewInit');
884
- // Runs once the template has bound the content node, so this is the reconcile that actually
885
- // wraps the sticky children (the ngOnChanges one above fires before the content node exists).
886
- this.updateProjectionController();
887
- this.attachSticky();
888
- }
889
-
890
- // Re-read the anchor's class-derived style. It is written by the renderer's addClass/removeClass,
891
- // never through an @Input, so this poll is the only thing that can invalidate a bag holding it -
892
- // ngOnChanges alone would strand a class toggled after mount (covered by
893
- // scroll-view-class-style.test.ts's toggle case, which goes red the moment this hook stops
894
- // polling). ngDoCheck is the right hook, not a near-enough one: render3's `callHooks` flushes a
895
- // node's pre-order hooks at the next `ɵɵadvance` PAST it, which is after the parent wrote this
896
- // element's `ɵɵclassProp` and before this component's own view refreshes. It also runs under
897
- // `setActiveConsumer(null)`, so the write registers no dependency on the caller's view and cannot
898
- // throw NG0600. And `commitClassStyle` allocates a fresh style array only when a class token
899
- // actually moved, so `signal.set`'s own Object.is check makes an unchanged poll dirty nothing.
900
- ngDoCheck(): void {
901
- this.anchorStyle.set(anchorHostStyle(this.elementRef));
902
- // The attach can want a node that does not exist yet, and nothing else would ask again.
903
- // ngOnChanges covers "indices arrived late"; it does NOT cover "indices arrived late AND the host
904
- // node had not committed yet", which is exactly what a VirtualizedList does - it derives
905
- // stickyHeaderIndices from the measured window, so they land after this component's
906
- // ngAfterViewInit and before its host node resolves. Device-diagnosed 2026-08-18 on
907
- // examples/angular BenchmarkScreen STICKY PATH B, whose log ends on `attachSticky NOT attaching
908
- // (wantsAttach=true hasNode=false)` - sticky never turned on, while PATH A (literal indices in
909
- // the template) worked because ngAfterViewInit already saw a node. Retried ONLY from that stuck
910
- // state, so a settled ScrollView pays nothing per check. Device-verified the same day.
911
- // Not covered headless: sticky-native-attach.test.ts's late-indices case has its node resolved by
912
- // the time the indices land, and the deferred-creation ordering under `@if` never rendered the
913
- // ScrollView at all.
914
- if (this.stickyAttachedEnabled && this.stickyAttachedNode === null)
915
- this.attachSticky();
916
- }
917
-
918
- // The projected RefreshControl is a @ContentChild, not an @Input, so ngOnChanges never fires when
919
- // one is added or removed at the use site - and `excludeRefreshControl` decides whether the
920
- // projection walk pulls it out of the scroll content. Angular resolves the query before this
921
- // hook. Guarded on the flag itself so a check that changed nothing skips the reconcile walk,
922
- // which the old getter-driven update could not do.
923
- ngAfterContentChecked(): void {
924
- if (this.hasProjectedRefreshControl === this.lastHasProjectedRefreshControl)
925
- return;
926
- this.lastHasProjectedRefreshControl = this.hasProjectedRefreshControl;
927
- this.updateProjectionController();
928
- }
929
-
930
- // `stickyHeaderIndices` is an ordinary @Input, so it can arrive AFTER the first change-detection
931
- // pass - any app deriving it from data rather than writing a literal in the template does exactly
932
- // that. ngAfterViewInit runs once, so without this the native attach below would be skipped on
933
- // that first pass and never retried: the wrapper still projects (that half self-heals), the
934
- // header sits at the right place with the right z-index, and simply never moves. Device-reported
935
- // 2026-08-16, regression-covered in sticky-native-attach.test.ts. The other three adapters never
936
- // had this hole because they re-run the attach from a reactive effect keyed on the same
937
- // condition (Svelte's `$effect` in index.svelte, React's useEffect deps, Vue's watcher).
938
- ngOnChanges(): void {
939
- dlog('STICKY[sv] ngOnChanges');
940
- // Every computed() prop bag below reads plain @Input fields, which are NOT reactive on their
941
- // own - this bump is what tells them an input changed. It must stay in ngOnChanges: that is
942
- // the single moment Angular has finished writing every changed input for this pass.
943
- this.inputsRevision.update(revision => revision + 1);
944
- // stickyHeaderIndices / invertStickyHeaders / StickyHeaderComponent are @Inputs, so this is
945
- // where the projection controller learns about them. It used to be a side effect of reading
946
- // the `scrollProps` getter - which a memoized computed no longer performs per pass.
947
- this.updateProjectionController();
948
- this.attachSticky();
949
- }
950
-
951
- // Wire the native sticky-scroll attach once the view exists AND sticky is actually on. Re-runs
952
- // on every input change, so it must be idempotent: see the guard below.
953
- private attachSticky(): void {
954
- const wantsAttach = this.hasStickyHeaders && isNativeAnimatedAvailable();
955
- const node = wantsAttach ? this.hostNode : null;
956
- dlog(
957
- () =>
958
- `STICKY[sv] attachSticky indices=${JSON.stringify(this.stickyHeaderIndices)} ` +
959
- `hasSticky=${this.hasStickyHeaders} nativeAvailable=${isNativeAnimatedAvailable()} ` +
960
- `wantsAttach=${wantsAttach} hasNode=${node !== null} ` +
961
- `wasEnabled=${this.stickyAttachedEnabled} nodeChanged=${node !== this.stickyAttachedNode}`,
962
- );
963
- // Nothing that decides the attach has changed - return rather than detach and rebind the
964
- // native scroll event, which every unrelated @Input change would otherwise churn now that
965
- // ngOnChanges drives this too.
966
- if (
967
- wantsAttach === this.stickyAttachedEnabled &&
968
- node === this.stickyAttachedNode
969
- ) {
970
- dlog(
971
- 'STICKY[sv] attachSticky skipped (nothing about the attach changed)',
972
- );
973
- return;
974
- }
975
-
976
- this.cancelStickyBind?.();
977
- this.cancelStickyBind = undefined;
978
- if (this.detachStickyScroll !== undefined) {
979
- this.detachStickyScroll();
980
- this.detachStickyScroll = undefined;
981
- }
982
- // Recorded even when the node is not resolved yet, so the NEXT call (which will see a real
983
- // node) reads as a change and attaches.
984
- this.stickyAttachedEnabled = wantsAttach;
985
- this.stickyAttachedNode = node;
986
- if (!wantsAttach || node === null) {
987
- dlog(
988
- `STICKY[sv] attachSticky NOT attaching (wantsAttach=${wantsAttach} hasNode=${node !== null})`,
989
- );
990
- return;
991
- }
992
- dlog(
993
- 'STICKY[sv] attachSticky waiting for commit to bind the native scroll event',
994
- );
995
- this.cancelStickyBind = whenCommitted(node, () => {
996
- dlog('STICKY[sv] attachSticky node committed -> attachStickyScroll');
997
- this.detachStickyScroll = attachStickyScroll(
998
- node,
999
- this.scrollAnimatedValue,
1000
- );
1001
- });
1002
- }
1003
-
1004
- ngOnDestroy(): void {
1005
- this.cancelStickyBind?.();
1006
- this.cancelStickyBind = undefined;
1007
- if (this.detachStickyScroll !== undefined) this.detachStickyScroll();
1008
- }
1009
-
1010
- private updateProjectionController(): void {
1011
- this.projectionController.update({
1012
- stickyHeaderIndices: this.stickyHeaderIndices,
1013
- invertStickyHeaders: this.invertStickyHeaders,
1014
- scrollViewHeight: this.viewportHeight,
1015
- scrollAnimatedValue: this.scrollAnimatedValue,
1016
- customStickyHeaderComponent: this.StickyHeaderComponent,
1017
- excludeRefreshControl: this.hasProjectedRefreshControl,
1018
- });
1019
- }
1020
-
1021
- // Typed as the a11y intersection WITH the string index so resolveAccessibilityProps's result
1022
- // stays assignable into the forwarded bag (a genuine narrowing, built at that type — no cast).
1023
- private accessibilityInputs(): IAccessibilityProps &
1024
- IAriaProps &
1025
- Record<string, unknown> {
1026
- return {
1027
- testID: this.testID,
1028
- nativeID: this.nativeID,
1029
- accessible: this.accessible,
1030
- accessibilityLabel: this.accessibilityLabel,
1031
- accessibilityHint: this.accessibilityHint,
1032
- accessibilityRole: this.accessibilityRole,
1033
- accessibilityState: this.accessibilityState,
1034
- accessibilityValue: this.accessibilityValue,
1035
- accessibilityActions: this.accessibilityActions,
1036
- accessibilityLabelledBy: this.accessibilityLabelledBy,
1037
- importantForAccessibility: this.importantForAccessibility,
1038
- accessibilityLiveRegion: this.accessibilityLiveRegion,
1039
- screenReaderFocusable: this.screenReaderFocusable,
1040
- accessibilityViewIsModal: this.accessibilityViewIsModal,
1041
- accessibilityElementsHidden: this.accessibilityElementsHidden,
1042
- accessibilityIgnoresInvertColors: this.accessibilityIgnoresInvertColors,
1043
- accessibilityLanguage: this.accessibilityLanguage,
1044
- accessibilityRespondsToUserInteraction:
1045
- this.accessibilityRespondsToUserInteraction,
1046
- accessibilityShowsLargeContentViewer:
1047
- this.accessibilityShowsLargeContentViewer,
1048
- accessibilityLargeContentTitle: this.accessibilityLargeContentTitle,
1049
- role: this.role,
1050
- 'aria-label': this['aria-label'],
1051
- 'aria-labelledby': this['aria-labelledby'],
1052
- 'aria-live': this['aria-live'],
1053
- 'aria-hidden': this['aria-hidden'],
1054
- 'aria-busy': this['aria-busy'],
1055
- 'aria-checked': this['aria-checked'],
1056
- 'aria-disabled': this['aria-disabled'],
1057
- 'aria-expanded': this['aria-expanded'],
1058
- 'aria-selected': this['aria-selected'],
1059
- 'aria-modal': this['aria-modal'],
1060
- 'aria-valuemax': this['aria-valuemax'],
1061
- 'aria-valuemin': this['aria-valuemin'],
1062
- 'aria-valuenow': this['aria-valuenow'],
1063
- 'aria-valuetext': this['aria-valuetext'],
1064
- };
1065
- }
1066
- }