@symbiote-native/angular 1.0.0 → 2.0.1

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