@symbiote-native/angular 3.3.0 → 3.5.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 (187) hide show
  1. package/babel-register-composed.cjs +1 -0
  2. package/build/angular/accessibility-inputs.d.ts +2 -1
  3. package/build/angular/accessibility-inputs.js +4 -1
  4. package/build/angular/accessibility-inputs.js.map +1 -1
  5. package/build/angular/callback-host.d.ts +1 -1
  6. package/build/angular/callback-host.js +57 -9
  7. package/build/angular/callback-host.js.map +1 -1
  8. package/build/angular/components/flat-list/flat-list-handle.d.ts +35 -0
  9. package/build/angular/components/flat-list/flat-list-handle.js +48 -0
  10. package/build/angular/components/flat-list/flat-list-handle.js.map +1 -0
  11. package/build/angular/components/flat-list/flat-list-template.d.ts +1 -1
  12. package/build/angular/components/flat-list/flat-list-template.js +16 -0
  13. package/build/angular/components/flat-list/flat-list-template.js.map +1 -1
  14. package/build/angular/components/flat-list/index.d.ts +6 -30
  15. package/build/angular/components/flat-list/index.js +6 -36
  16. package/build/angular/components/flat-list/index.js.map +1 -1
  17. package/build/angular/components/image-inputs.d.ts +4 -0
  18. package/build/angular/components/image-inputs.js +81 -0
  19. package/build/angular/components/image-inputs.js.map +1 -0
  20. package/build/angular/components/image-props-resolve.d.ts +3 -0
  21. package/build/angular/components/image-props-resolve.js +133 -0
  22. package/build/angular/components/image-props-resolve.js.map +1 -0
  23. package/build/angular/components/image-shared.d.ts +8 -6
  24. package/build/angular/components/image-shared.js +23 -212
  25. package/build/angular/components/image-shared.js.map +1 -1
  26. package/build/angular/components/input-accessory-view-props.d.ts +4 -4
  27. package/build/angular/components/keyboard-avoiding-view/index.d.ts +3 -6
  28. package/build/angular/components/keyboard-avoiding-view/index.js +29 -56
  29. package/build/angular/components/keyboard-avoiding-view/index.js.map +1 -1
  30. package/build/angular/components/layout-conformance-props.d.ts +4 -0
  31. package/build/angular/components/layout-conformance-props.js +2 -0
  32. package/build/angular/components/layout-conformance-props.js.map +1 -0
  33. package/build/angular/components/modal/index.d.ts +6 -5
  34. package/build/angular/components/modal/index.js +17 -2
  35. package/build/angular/components/modal/index.js.map +1 -1
  36. package/build/angular/components/refresh-control-props.d.ts +7 -7
  37. package/build/angular/components/scroll-view-props.d.ts +8 -5
  38. package/build/angular/components/section-list/index.d.ts +17 -8
  39. package/build/angular/components/section-list/index.js +37 -28
  40. package/build/angular/components/section-list/index.js.map +1 -1
  41. package/build/angular/components/touchable-props.d.ts +2 -2
  42. package/build/angular/components/virtualized-list/cell-renderer-context.d.ts +12 -0
  43. package/build/angular/components/virtualized-list/cell-renderer-context.js +16 -0
  44. package/build/angular/components/virtualized-list/cell-renderer-context.js.map +1 -0
  45. package/build/angular/components/virtualized-list/directives.d.ts +26 -6
  46. package/build/angular/components/virtualized-list/directives.js +59 -5
  47. package/build/angular/components/virtualized-list/directives.js.map +1 -1
  48. package/build/angular/components/virtualized-list/index.d.ts +19 -15
  49. package/build/angular/components/virtualized-list/index.js +91 -61
  50. package/build/angular/components/virtualized-list/index.js.map +1 -1
  51. package/build/angular/components/virtualized-list/list-bags.d.ts +5 -1
  52. package/build/angular/components/virtualized-list/list-bags.js +31 -19
  53. package/build/angular/components/virtualized-list/list-bags.js.map +1 -1
  54. package/build/angular/components/virtualized-list/list-effects.d.ts +2 -2
  55. package/build/angular/components/virtualized-list/list-effects.js +17 -27
  56. package/build/angular/components/virtualized-list/list-effects.js.map +1 -1
  57. package/build/angular/components/virtualized-list/list-handle.d.ts +4 -1
  58. package/build/angular/components/virtualized-list/list-handle.js +13 -3
  59. package/build/angular/components/virtualized-list/list-handle.js.map +1 -1
  60. package/build/angular/components/virtualized-list/list-inputs.d.ts +19 -5
  61. package/build/angular/components/virtualized-list/list-inputs.js +47 -4
  62. package/build/angular/components/virtualized-list/list-inputs.js.map +1 -1
  63. package/build/angular/components/virtualized-list/list-props.d.ts +9 -3
  64. package/build/angular/components/virtualized-list/list-rows.d.ts +25 -0
  65. package/build/angular/components/virtualized-list/list-rows.js +25 -0
  66. package/build/angular/components/virtualized-list/list-rows.js.map +1 -0
  67. package/build/angular/components/virtualized-list/list-styles.d.ts +4 -0
  68. package/build/angular/components/virtualized-list/list-styles.js +10 -2
  69. package/build/angular/components/virtualized-list/list-styles.js.map +1 -1
  70. package/build/angular/components/virtualized-list/list-template.d.ts +1 -1
  71. package/build/angular/components/virtualized-list/list-template.js +159 -73
  72. package/build/angular/components/virtualized-list/list-template.js.map +1 -1
  73. package/build/angular/components/virtualized-list/nested-scope.d.ts +6 -0
  74. package/build/angular/components/virtualized-list/nested-scope.js +17 -0
  75. package/build/angular/components/virtualized-list/nested-scope.js.map +1 -0
  76. package/build/angular/components/virtualized-section-list/directives.d.ts +21 -9
  77. package/build/angular/components/virtualized-section-list/directives.js +8 -28
  78. package/build/angular/components/virtualized-section-list/directives.js.map +1 -1
  79. package/build/angular/components/virtualized-section-list/index.d.ts +39 -60
  80. package/build/angular/components/virtualized-section-list/index.js +67 -33
  81. package/build/angular/components/virtualized-section-list/index.js.map +1 -1
  82. package/build/angular/components/virtualized-section-list/section-cell.d.ts +29 -0
  83. package/build/angular/components/virtualized-section-list/section-cell.js +82 -0
  84. package/build/angular/components/virtualized-section-list/section-cell.js.map +1 -0
  85. package/build/angular/components/virtualized-section-list/section-list-props.d.ts +56 -0
  86. package/build/angular/components/virtualized-section-list/section-list-props.js +3 -0
  87. package/build/angular/components/virtualized-section-list/section-list-props.js.map +1 -0
  88. package/build/angular/components/virtualized-section-list/section-list-template.d.ts +1 -1
  89. package/build/angular/components/virtualized-section-list/section-list-template.js +34 -26
  90. package/build/angular/components/virtualized-section-list/section-list-template.js.map +1 -1
  91. package/build/angular/components.d.ts +7 -3
  92. package/build/angular/components.js +2 -1
  93. package/build/angular/components.js.map +1 -1
  94. package/build/angular/element-base.d.ts +17 -1
  95. package/build/angular/element-base.js +33 -1
  96. package/build/angular/element-base.js.map +1 -1
  97. package/build/angular/element-props.d.ts +7 -7
  98. package/build/angular/element-text-input-native.d.ts +27 -0
  99. package/build/angular/element-text-input-native.js +52 -0
  100. package/build/angular/element-text-input-native.js.map +1 -0
  101. package/build/angular/elements-controls.d.ts +8 -2
  102. package/build/angular/elements-controls.js +13 -1
  103. package/build/angular/elements-controls.js.map +1 -1
  104. package/build/angular/elements-layout.d.ts +20 -3
  105. package/build/angular/elements-layout.js +37 -3
  106. package/build/angular/elements-layout.js.map +1 -1
  107. package/build/angular/elements-press.d.ts +10 -3
  108. package/build/angular/elements-press.js +13 -1
  109. package/build/angular/elements-press.js.map +1 -1
  110. package/build/angular/elements.d.ts +3 -3
  111. package/build/angular/elements.js +3 -2
  112. package/build/angular/elements.js.map +1 -1
  113. package/build/angular/index.d.ts +15 -7
  114. package/build/angular/index.js +22 -25
  115. package/build/angular/index.js.map +1 -1
  116. package/build/angular/modules/animated/create-animated-component.d.ts +1 -1
  117. package/build/angular/modules/animated/create-animated-component.js +1 -1
  118. package/build/angular/modules/animated/create-animated-component.js.map +1 -1
  119. package/build/angular/modules/animated/index.d.ts +54 -41
  120. package/build/angular/modules/animated/index.js +2 -26
  121. package/build/angular/modules/animated/index.js.map +1 -1
  122. package/build/angular/modules/app-registry/index.d.ts +3 -3
  123. package/build/angular/modules/app-registry/index.js +2 -2
  124. package/build/angular/modules/app-registry/index.js.map +1 -1
  125. package/build/angular/modules/status-bar/index.d.ts +9 -5
  126. package/build/angular/modules/status-bar/index.js +21 -10
  127. package/build/angular/modules/status-bar/index.js.map +1 -1
  128. package/build/angular/primitives/index.d.ts +4 -0
  129. package/build/angular/primitives/index.js +12 -0
  130. package/build/angular/primitives/index.js.map +1 -1
  131. package/build/angular/render/index.d.ts +2 -2
  132. package/build/angular/render/index.js +10 -29
  133. package/build/angular/render/index.js.map +1 -1
  134. package/build/angular/root-tag.d.ts +4 -0
  135. package/build/angular/root-tag.js +10 -0
  136. package/build/angular/root-tag.js.map +1 -0
  137. package/build/angular/services/color-scheme.service.d.ts +1 -1
  138. package/package.json +6 -6
  139. package/src/accessibility-inputs.ts +3 -0
  140. package/src/callback-host.ts +56 -8
  141. package/src/components/flat-list/flat-list-handle.ts +64 -0
  142. package/src/components/flat-list/flat-list-template.ts +16 -0
  143. package/src/components/flat-list/index.ts +6 -48
  144. package/src/components/image-inputs.ts +94 -0
  145. package/src/components/image-props-resolve.ts +172 -0
  146. package/src/components/image-shared.ts +26 -291
  147. package/src/components/input-accessory-view-props.ts +12 -8
  148. package/src/components/keyboard-avoiding-view/index.ts +39 -79
  149. package/src/components/layout-conformance-props.ts +8 -0
  150. package/src/components/modal/index.ts +42 -20
  151. package/src/components/refresh-control-props.ts +29 -25
  152. package/src/components/scroll-view-props.ts +84 -76
  153. package/src/components/section-list/index.ts +34 -37
  154. package/src/components/touchable-props.ts +6 -2
  155. package/src/components/virtualized-list/cell-renderer-context.ts +36 -0
  156. package/src/components/virtualized-list/directives.ts +84 -8
  157. package/src/components/virtualized-list/index.ts +118 -85
  158. package/src/components/virtualized-list/list-bags.ts +38 -19
  159. package/src/components/virtualized-list/list-effects.ts +20 -32
  160. package/src/components/virtualized-list/list-handle.ts +17 -4
  161. package/src/components/virtualized-list/list-inputs.ts +47 -0
  162. package/src/components/virtualized-list/list-props.ts +57 -50
  163. package/src/components/virtualized-list/list-rows.ts +66 -0
  164. package/src/components/virtualized-list/list-styles.ts +30 -1
  165. package/src/components/virtualized-list/list-template.ts +159 -73
  166. package/src/components/virtualized-list/nested-scope.ts +22 -0
  167. package/src/components/virtualized-section-list/directives.ts +41 -40
  168. package/src/components/virtualized-section-list/index.ts +114 -118
  169. package/src/components/virtualized-section-list/section-cell.ts +109 -0
  170. package/src/components/virtualized-section-list/section-list-props.ts +79 -0
  171. package/src/components/virtualized-section-list/section-list-template.ts +34 -26
  172. package/src/components.ts +8 -0
  173. package/src/element-base.ts +17 -0
  174. package/src/element-props.ts +35 -33
  175. package/src/element-text-input-native.ts +31 -0
  176. package/src/elements-controls.ts +9 -1
  177. package/src/elements-layout.ts +27 -0
  178. package/src/elements-press.ts +10 -2
  179. package/src/elements.ts +3 -0
  180. package/src/index.ts +79 -22
  181. package/src/modules/animated/index.ts +2 -47
  182. package/src/modules/app-registry/index.ts +3 -1
  183. package/src/modules/status-bar/index.ts +24 -11
  184. package/src/primitives/index.ts +7 -0
  185. package/src/render/index.ts +23 -50
  186. package/src/root-tag.ts +14 -0
  187. package/src/services/color-scheme.service.ts +1 -1
@@ -10,6 +10,8 @@ export type IListStyleInput = {
10
10
  hasHeader: boolean;
11
11
  style: IStyleProp<IViewStyle> | undefined;
12
12
  contentContainerStyle: IStyleProp<IViewStyle> | undefined;
13
+ listHeaderComponentStyle: IStyleProp<IViewStyle> | undefined;
14
+ listFooterComponentStyle: IStyleProp<IViewStyle> | undefined;
13
15
  anchorStyle: unknown;
14
16
  maintainVisibleContentPosition: IMaintainVisibleContentPosition | undefined;
15
17
  };
@@ -17,6 +19,8 @@ export type IListStyles = {
17
19
  style: IViewStyle | undefined;
18
20
  contentContainerStyle: IStyleProp<IViewStyle> | undefined;
19
21
  cellStyle: IViewStyle | undefined;
22
+ headerStyle: IViewStyle | undefined;
23
+ footerStyle: IViewStyle | undefined;
20
24
  maintainVisibleContentPosition: IMaintainVisibleContentPosition | undefined;
21
25
  };
22
26
  export declare function resolveListStyles(input: IListStyleInput): IListStyles;
@@ -1,7 +1,10 @@
1
1
  // The styles a windowed list derives from its inputs each pass. Pure, so the component's recompute
2
2
  // only assigns the result
3
- import { INVERTED_X_STYLE, INVERTED_Y_STYLE, } from '@symbiote-native/components';
3
+ import { INVERTED_X_STYLE, INVERTED_Y_STYLE, cellStyleOf, } from '@symbiote-native/components';
4
4
  import { flattenStyle, } from '@symbiote-native/engine';
5
+ function slotStyle(isInverted, inversion, style) {
6
+ return flattenStyle(isInverted ? [inversion, style] : style);
7
+ }
5
8
  export function resolveListStyles(input) {
6
9
  const inversion = input.isHorizontal ? INVERTED_X_STYLE : INVERTED_Y_STYLE;
7
10
  const mvcp = input.maintainVisibleContentPosition;
@@ -14,7 +17,12 @@ export function resolveListStyles(input) {
14
17
  input.anchorStyle,
15
18
  input.isInverted ? [inversion, input.style] : input.style,
16
19
  ]),
17
- cellStyle: input.isInverted ? inversion : undefined,
20
+ cellStyle: flattenStyle(cellStyleOf({
21
+ horizontal: input.isHorizontal,
22
+ inverted: input.isInverted,
23
+ })),
24
+ headerStyle: slotStyle(input.isInverted, inversion, input.listHeaderComponentStyle),
25
+ footerStyle: slotStyle(input.isInverted, inversion, input.listFooterComponentStyle),
18
26
  maintainVisibleContentPosition: mvcp === undefined
19
27
  ? undefined
20
28
  : {
@@ -1 +1 @@
1
- {"version":3,"file":"list-styles.js","sourceRoot":"","sources":["../../../../src/components/virtualized-list/list-styles.ts"],"names":[],"mappings":"AAAA,mGAAmG;AACnG,0BAA0B;AAE1B,OAAO,EACL,gBAAgB,EAChB,gBAAgB,GACjB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EACL,YAAY,GAGb,MAAM,yBAAyB,CAAC;AA4BjC,MAAM,UAAU,iBAAiB,CAAC,KAAsB;IACtD,MAAM,SAAS,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC;IAC3E,MAAM,IAAI,GAAG,KAAK,CAAC,8BAA8B,CAAC;IAClD,OAAO;QACL,qBAAqB,EAAE,KAAK,CAAC,YAAY;YACvC,CAAC,CAAC,CAAC,KAAK,CAAC,qBAAqB,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC;YACvD,CAAC,CAAC,KAAK,CAAC,qBAAqB;QAC/B,yEAAyE;QACzE,KAAK,EAAE,YAAY,CAAC;YAClB,KAAK,CAAC,WAAW;YACjB,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK;SAC1D,CAAC;QACF,SAAS,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;QACnD,8BAA8B,EAC5B,IAAI,KAAK,SAAS;YAChB,CAAC,CAAC,SAAS;YACX,CAAC,CAAC;gBACE,GAAG,IAAI;gBACP,kBAAkB,EAChB,IAAI,CAAC,kBAAkB,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;aACtD;KACR,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"list-styles.js","sourceRoot":"","sources":["../../../../src/components/virtualized-list/list-styles.ts"],"names":[],"mappings":"AAAA,mGAAmG;AACnG,0BAA0B;AAE1B,OAAO,EACL,gBAAgB,EAChB,gBAAgB,EAChB,WAAW,GACZ,MAAM,6BAA6B,CAAC;AACrC,OAAO,EACL,YAAY,GAGb,MAAM,yBAAyB,CAAC;AAiCjC,SAAS,SAAS,CAChB,UAAmB,EACnB,SAAqB,EACrB,KAAyC;IAEzC,OAAO,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;AAC/D,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,KAAsB;IACtD,MAAM,SAAS,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC;IAC3E,MAAM,IAAI,GAAG,KAAK,CAAC,8BAA8B,CAAC;IAClD,OAAO;QACL,qBAAqB,EAAE,KAAK,CAAC,YAAY;YACvC,CAAC,CAAC,CAAC,KAAK,CAAC,qBAAqB,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC;YACvD,CAAC,CAAC,KAAK,CAAC,qBAAqB;QAC/B,yEAAyE;QACzE,KAAK,EAAE,YAAY,CAAC;YAClB,KAAK,CAAC,WAAW;YACjB,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK;SAC1D,CAAC;QACF,SAAS,EAAE,YAAY,CACrB,WAAW,CAAC;YACV,UAAU,EAAE,KAAK,CAAC,YAAY;YAC9B,QAAQ,EAAE,KAAK,CAAC,UAAU;SAC3B,CAAC,CACH;QACD,WAAW,EAAE,SAAS,CACpB,KAAK,CAAC,UAAU,EAChB,SAAS,EACT,KAAK,CAAC,wBAAwB,CAC/B;QACD,WAAW,EAAE,SAAS,CACpB,KAAK,CAAC,UAAU,EAChB,SAAS,EACT,KAAK,CAAC,wBAAwB,CAC/B;QACD,8BAA8B,EAC5B,IAAI,KAAK,SAAS;YAChB,CAAC,CAAC,SAAS;YACX,CAAC,CAAC;gBACE,GAAG,IAAI;gBACP,kBAAkB,EAChB,IAAI,CAAC,kBAAkB,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;aACtD;KACR,CAAC;AACJ,CAAC"}
@@ -1 +1 @@
1
- export declare const VIRTUALIZED_LIST_TEMPLATE = "\n @if (isHorizontal) {\n <horizontal-scroll-view #scrollHost [symbioteHostProps]=\"scrollViewBag()\">\n @if (shouldRenderRefreshControl) {\n <refresh-control\n [symbioteHostProps]=\"refreshControlBag()\"\n ></refresh-control>\n }\n\n @if (headerDir !== undefined) {\n <view>\n <ng-container [vListOutlet]=\"headerDir.templateRef\"></ng-container>\n </view>\n }\n\n @if (itemCount === 0) {\n @if (emptyDir !== undefined) {\n <view>\n <ng-container [vListOutlet]=\"emptyDir.templateRef\"></ng-container>\n </view>\n }\n } @else {\n @if (leadingSpacerStyle !== null) {\n <view [style]=\"leadingSpacerStyle\"></view>\n }\n @if (forcedStickyCell !== null) {\n <sticky-header\n (layout)=\"handleCellLayout(forcedStickyCell.measure, $event)\"\n [style]=\"cellStyle\"\n >\n <ng-container\n [vListOutlet]=\"cellTemplate\"\n [vListOutletContext]=\"forcedStickyCell.context\"\n ></ng-container>\n </sticky-header>\n }\n @if (gapSpacerStyle !== null) {\n <view [style]=\"gapSpacerStyle\"></view>\n }\n @for (cell of windowCells; track cell.key) {\n @if (cell.isSticky) {\n <sticky-header\n (layout)=\"handleCellLayout(cell.measure, $event)\"\n [style]=\"cellStyle\"\n >\n <ng-container\n [vListOutlet]=\"cellTemplate\"\n [vListOutletContext]=\"cell.context\"\n ></ng-container>\n @if (cell.separatorContext !== undefined) {\n <ng-container\n [vListOutlet]=\"separatorTemplate\"\n [vListOutletContext]=\"cell.separatorContext\"\n ></ng-container>\n }\n </sticky-header>\n } @else {\n <view\n (layout)=\"handleCellLayout(cell.measure, $event)\"\n [style]=\"cellStyle\"\n >\n <ng-container\n [vListOutlet]=\"cellTemplate\"\n [vListOutletContext]=\"cell.context\"\n ></ng-container>\n @if (cell.separatorContext !== undefined) {\n <ng-container\n [vListOutlet]=\"separatorTemplate\"\n [vListOutletContext]=\"cell.separatorContext\"\n ></ng-container>\n }\n </view>\n }\n }\n @if (trailingSpacerStyle !== null) {\n <view [style]=\"trailingSpacerStyle\"></view>\n }\n }\n\n @if (footerDir !== undefined) {\n <view>\n <ng-container [vListOutlet]=\"footerDir.templateRef\"></ng-container>\n </view>\n }\n </horizontal-scroll-view>\n } @else {\n <scroll-view #scrollHost [symbioteHostProps]=\"scrollViewBag()\">\n @if (shouldRenderRefreshControl) {\n <refresh-control\n [symbioteHostProps]=\"refreshControlBag()\"\n ></refresh-control>\n }\n\n @if (headerDir !== undefined) {\n <view>\n <ng-container [vListOutlet]=\"headerDir.templateRef\"></ng-container>\n </view>\n }\n\n @if (itemCount === 0) {\n @if (emptyDir !== undefined) {\n <view>\n <ng-container [vListOutlet]=\"emptyDir.templateRef\"></ng-container>\n </view>\n }\n } @else {\n @if (leadingSpacerStyle !== null) {\n <view [style]=\"leadingSpacerStyle\"></view>\n }\n @if (forcedStickyCell !== null) {\n <sticky-header\n (layout)=\"handleCellLayout(forcedStickyCell.measure, $event)\"\n [style]=\"cellStyle\"\n >\n <ng-container\n [vListOutlet]=\"cellTemplate\"\n [vListOutletContext]=\"forcedStickyCell.context\"\n ></ng-container>\n </sticky-header>\n }\n @if (gapSpacerStyle !== null) {\n <view [style]=\"gapSpacerStyle\"></view>\n }\n <!-- The separator sits INSIDE the measuring view, matching RN's cell renderer, as a\n sibling it would add an extra flex gap -->\n @for (cell of windowCells; track cell.key) {\n @if (cell.isSticky) {\n <sticky-header\n (layout)=\"handleCellLayout(cell.measure, $event)\"\n [style]=\"cellStyle\"\n >\n <ng-container\n [vListOutlet]=\"cellTemplate\"\n [vListOutletContext]=\"cell.context\"\n ></ng-container>\n @if (cell.separatorContext !== undefined) {\n <ng-container\n [vListOutlet]=\"separatorTemplate\"\n [vListOutletContext]=\"cell.separatorContext\"\n ></ng-container>\n }\n </sticky-header>\n } @else {\n <view\n (layout)=\"handleCellLayout(cell.measure, $event)\"\n [style]=\"cellStyle\"\n >\n <ng-container\n [vListOutlet]=\"cellTemplate\"\n [vListOutletContext]=\"cell.context\"\n ></ng-container>\n @if (cell.separatorContext !== undefined) {\n <ng-container\n [vListOutlet]=\"separatorTemplate\"\n [vListOutletContext]=\"cell.separatorContext\"\n ></ng-container>\n }\n </view>\n }\n }\n @if (trailingSpacerStyle !== null) {\n <view [style]=\"trailingSpacerStyle\"></view>\n }\n }\n\n @if (footerDir !== undefined) {\n <view>\n <ng-container [vListOutlet]=\"footerDir.templateRef\"></ng-container>\n </view>\n }\n </scroll-view>\n }\n ";
1
+ export declare const VIRTUALIZED_LIST_TEMPLATE = "\n @if (nesting.isNested) {\n <view #scrollHost [symbioteHostProps]=\"nestedViewBag()\">\n @if (headerDir !== undefined) {\n <view [style]=\"headerStyle\">\n <ng-container [vListOutlet]=\"headerDir.templateRef\"></ng-container>\n </view>\n }\n\n @if (itemCount === 0) {\n @if (emptyDir !== undefined) {\n <view [style]=\"cellStyle\">\n <ng-container [vListOutlet]=\"emptyDir.templateRef\"></ng-container>\n </view>\n }\n } @else {\n @for (row of rows; track row.key) {\n @if (row.kind === spacerKind) {\n <view [style]=\"row.style\"></view>\n } @else if (row.renderer !== undefined) {\n @if (row.cell.isSticky) {\n <sticky-header>\n <ng-container\n [vListOutlet]=\"cellRendererTpl\"\n [vListOutletContext]=\"row.renderer\"\n ></ng-container>\n </sticky-header>\n } @else {\n <ng-container\n [vListOutlet]=\"cellRendererTpl\"\n [vListOutletContext]=\"row.renderer\"\n ></ng-container>\n }\n } @else if (row.cell.isSticky) {\n <sticky-header\n (layout)=\"handleCellLayout(row.cell.measure, $event, row.cell.index)\"\n (focus)=\"handleCellFocus(row.cell.index)\"\n [style]=\"cellStyle\"\n >\n <ng-container\n [vListOutlet]=\"cellTemplate\" [vListOutletComponent]=\"itemComponent\"\n [vListOutletContext]=\"row.cell.context\"\n ></ng-container>\n @if (row.cell.separatorContext !== undefined) {\n <ng-container\n [vListOutlet]=\"separatorTemplate\"\n [vListOutletContext]=\"row.cell.separatorContext\"\n ></ng-container>\n }\n </sticky-header>\n } @else {\n <view\n (layout)=\"handleCellLayout(row.cell.measure, $event, row.cell.index)\"\n (focus)=\"handleCellFocus(row.cell.index)\"\n [style]=\"cellStyle\"\n >\n <ng-container\n [vListOutlet]=\"cellTemplate\" [vListOutletComponent]=\"itemComponent\"\n [vListOutletContext]=\"row.cell.context\"\n ></ng-container>\n @if (row.cell.separatorContext !== undefined) {\n <ng-container\n [vListOutlet]=\"separatorTemplate\"\n [vListOutletContext]=\"row.cell.separatorContext\"\n ></ng-container>\n }\n </view>\n }\n }\n }\n\n @if (footerDir !== undefined) {\n <view [style]=\"footerStyle\">\n <ng-container [vListOutlet]=\"footerDir.templateRef\"></ng-container>\n </view>\n }\n </view>\n } @else if (isHorizontal) {\n <horizontal-scroll-view #scrollHost [symbioteHostProps]=\"scrollViewBag()\">\n @if (shouldRenderRefreshControl) {\n <refresh-control\n [symbioteHostProps]=\"refreshControlBag()\"\n ></refresh-control>\n }\n\n @if (headerDir !== undefined) {\n <view [style]=\"headerStyle\">\n <ng-container [vListOutlet]=\"headerDir.templateRef\"></ng-container>\n </view>\n }\n\n @if (itemCount === 0) {\n @if (emptyDir !== undefined) {\n <view [style]=\"cellStyle\">\n <ng-container [vListOutlet]=\"emptyDir.templateRef\"></ng-container>\n </view>\n }\n } @else {\n @for (row of rows; track row.key) {\n @if (row.kind === spacerKind) {\n <view [style]=\"row.style\"></view>\n } @else if (row.renderer !== undefined) {\n @if (row.cell.isSticky) {\n <sticky-header>\n <ng-container\n [vListOutlet]=\"cellRendererTpl\"\n [vListOutletContext]=\"row.renderer\"\n ></ng-container>\n </sticky-header>\n } @else {\n <ng-container\n [vListOutlet]=\"cellRendererTpl\"\n [vListOutletContext]=\"row.renderer\"\n ></ng-container>\n }\n } @else if (row.cell.isSticky) {\n <sticky-header\n (layout)=\"handleCellLayout(row.cell.measure, $event, row.cell.index)\"\n (focus)=\"handleCellFocus(row.cell.index)\"\n [style]=\"cellStyle\"\n >\n <ng-container\n [vListOutlet]=\"cellTemplate\" [vListOutletComponent]=\"itemComponent\"\n [vListOutletContext]=\"row.cell.context\"\n ></ng-container>\n @if (row.cell.separatorContext !== undefined) {\n <ng-container\n [vListOutlet]=\"separatorTemplate\"\n [vListOutletContext]=\"row.cell.separatorContext\"\n ></ng-container>\n }\n </sticky-header>\n } @else {\n <view\n (layout)=\"handleCellLayout(row.cell.measure, $event, row.cell.index)\"\n (focus)=\"handleCellFocus(row.cell.index)\"\n [style]=\"cellStyle\"\n >\n <ng-container\n [vListOutlet]=\"cellTemplate\" [vListOutletComponent]=\"itemComponent\"\n [vListOutletContext]=\"row.cell.context\"\n ></ng-container>\n @if (row.cell.separatorContext !== undefined) {\n <ng-container\n [vListOutlet]=\"separatorTemplate\"\n [vListOutletContext]=\"row.cell.separatorContext\"\n ></ng-container>\n }\n </view>\n }\n }\n }\n\n @if (footerDir !== undefined) {\n <view [style]=\"footerStyle\">\n <ng-container [vListOutlet]=\"footerDir.templateRef\"></ng-container>\n </view>\n }\n </horizontal-scroll-view>\n } @else {\n <scroll-view #scrollHost [symbioteHostProps]=\"scrollViewBag()\">\n @if (shouldRenderRefreshControl) {\n <refresh-control\n [symbioteHostProps]=\"refreshControlBag()\"\n ></refresh-control>\n }\n\n @if (headerDir !== undefined) {\n <view [style]=\"headerStyle\">\n <ng-container [vListOutlet]=\"headerDir.templateRef\"></ng-container>\n </view>\n }\n\n @if (itemCount === 0) {\n @if (emptyDir !== undefined) {\n <view [style]=\"cellStyle\">\n <ng-container [vListOutlet]=\"emptyDir.templateRef\"></ng-container>\n </view>\n }\n } @else {\n <!-- The separator sits INSIDE the measuring view, matching RN's cell renderer, as a\n sibling it would add an extra flex gap -->\n @for (row of rows; track row.key) {\n @if (row.kind === spacerKind) {\n <view [style]=\"row.style\"></view>\n } @else if (row.renderer !== undefined) {\n @if (row.cell.isSticky) {\n <sticky-header>\n <ng-container\n [vListOutlet]=\"cellRendererTpl\"\n [vListOutletContext]=\"row.renderer\"\n ></ng-container>\n </sticky-header>\n } @else {\n <ng-container\n [vListOutlet]=\"cellRendererTpl\"\n [vListOutletContext]=\"row.renderer\"\n ></ng-container>\n }\n } @else if (row.cell.isSticky) {\n <sticky-header\n (layout)=\"handleCellLayout(row.cell.measure, $event, row.cell.index)\"\n (focus)=\"handleCellFocus(row.cell.index)\"\n [style]=\"cellStyle\"\n >\n <ng-container\n [vListOutlet]=\"cellTemplate\" [vListOutletComponent]=\"itemComponent\"\n [vListOutletContext]=\"row.cell.context\"\n ></ng-container>\n @if (row.cell.separatorContext !== undefined) {\n <ng-container\n [vListOutlet]=\"separatorTemplate\"\n [vListOutletContext]=\"row.cell.separatorContext\"\n ></ng-container>\n }\n </sticky-header>\n } @else {\n <view\n (layout)=\"handleCellLayout(row.cell.measure, $event, row.cell.index)\"\n (focus)=\"handleCellFocus(row.cell.index)\"\n [style]=\"cellStyle\"\n >\n <ng-container\n [vListOutlet]=\"cellTemplate\" [vListOutletComponent]=\"itemComponent\"\n [vListOutletContext]=\"row.cell.context\"\n ></ng-container>\n @if (row.cell.separatorContext !== undefined) {\n <ng-container\n [vListOutlet]=\"separatorTemplate\"\n [vListOutletContext]=\"row.cell.separatorContext\"\n ></ng-container>\n }\n </view>\n }\n }\n }\n\n @if (footerDir !== undefined) {\n <view [style]=\"footerStyle\">\n <ng-container [vListOutlet]=\"footerDir.templateRef\"></ng-container>\n </view>\n }\n </scroll-view>\n }\n\n <!-- What a `vListCell` wrapper stamps for its item and separator, once per list -->\n <ng-template #cellBody let-cell>\n <ng-container\n [vListOutlet]=\"cellTemplate\" [vListOutletComponent]=\"itemComponent\"\n [vListOutletContext]=\"cell.context\"\n ></ng-container>\n @if (cell.separatorContext !== undefined) {\n <ng-container\n [vListOutlet]=\"separatorTemplate\"\n [vListOutletContext]=\"cell.separatorContext\"\n ></ng-container>\n }\n </ng-template>\n ";
@@ -1,7 +1,83 @@
1
- // Same body on both axes, only the outer tag differs
2
- // Written out once per branch: ngc needs one literal, no shared outlet primitive exists
1
+ // Same body on both axes and in the nested view, only the outer tag differs
2
+ // Written out once per branch: ngc needs one literal, and a shared outlet would add one per list
3
3
  export const VIRTUALIZED_LIST_TEMPLATE = `
4
- @if (isHorizontal) {
4
+ @if (nesting.isNested) {
5
+ <view #scrollHost [symbioteHostProps]="nestedViewBag()">
6
+ @if (headerDir !== undefined) {
7
+ <view [style]="headerStyle">
8
+ <ng-container [vListOutlet]="headerDir.templateRef"></ng-container>
9
+ </view>
10
+ }
11
+
12
+ @if (itemCount === 0) {
13
+ @if (emptyDir !== undefined) {
14
+ <view [style]="cellStyle">
15
+ <ng-container [vListOutlet]="emptyDir.templateRef"></ng-container>
16
+ </view>
17
+ }
18
+ } @else {
19
+ @for (row of rows; track row.key) {
20
+ @if (row.kind === spacerKind) {
21
+ <view [style]="row.style"></view>
22
+ } @else if (row.renderer !== undefined) {
23
+ @if (row.cell.isSticky) {
24
+ <sticky-header>
25
+ <ng-container
26
+ [vListOutlet]="cellRendererTpl"
27
+ [vListOutletContext]="row.renderer"
28
+ ></ng-container>
29
+ </sticky-header>
30
+ } @else {
31
+ <ng-container
32
+ [vListOutlet]="cellRendererTpl"
33
+ [vListOutletContext]="row.renderer"
34
+ ></ng-container>
35
+ }
36
+ } @else if (row.cell.isSticky) {
37
+ <sticky-header
38
+ (layout)="handleCellLayout(row.cell.measure, $event, row.cell.index)"
39
+ (focus)="handleCellFocus(row.cell.index)"
40
+ [style]="cellStyle"
41
+ >
42
+ <ng-container
43
+ [vListOutlet]="cellTemplate" [vListOutletComponent]="itemComponent"
44
+ [vListOutletContext]="row.cell.context"
45
+ ></ng-container>
46
+ @if (row.cell.separatorContext !== undefined) {
47
+ <ng-container
48
+ [vListOutlet]="separatorTemplate"
49
+ [vListOutletContext]="row.cell.separatorContext"
50
+ ></ng-container>
51
+ }
52
+ </sticky-header>
53
+ } @else {
54
+ <view
55
+ (layout)="handleCellLayout(row.cell.measure, $event, row.cell.index)"
56
+ (focus)="handleCellFocus(row.cell.index)"
57
+ [style]="cellStyle"
58
+ >
59
+ <ng-container
60
+ [vListOutlet]="cellTemplate" [vListOutletComponent]="itemComponent"
61
+ [vListOutletContext]="row.cell.context"
62
+ ></ng-container>
63
+ @if (row.cell.separatorContext !== undefined) {
64
+ <ng-container
65
+ [vListOutlet]="separatorTemplate"
66
+ [vListOutletContext]="row.cell.separatorContext"
67
+ ></ng-container>
68
+ }
69
+ </view>
70
+ }
71
+ }
72
+ }
73
+
74
+ @if (footerDir !== undefined) {
75
+ <view [style]="footerStyle">
76
+ <ng-container [vListOutlet]="footerDir.templateRef"></ng-container>
77
+ </view>
78
+ }
79
+ </view>
80
+ } @else if (isHorizontal) {
5
81
  <horizontal-scroll-view #scrollHost [symbioteHostProps]="scrollViewBag()">
6
82
  @if (shouldRenderRefreshControl) {
7
83
  <refresh-control
@@ -10,77 +86,75 @@ export const VIRTUALIZED_LIST_TEMPLATE = `
10
86
  }
11
87
 
12
88
  @if (headerDir !== undefined) {
13
- <view>
89
+ <view [style]="headerStyle">
14
90
  <ng-container [vListOutlet]="headerDir.templateRef"></ng-container>
15
91
  </view>
16
92
  }
17
93
 
18
94
  @if (itemCount === 0) {
19
95
  @if (emptyDir !== undefined) {
20
- <view>
96
+ <view [style]="cellStyle">
21
97
  <ng-container [vListOutlet]="emptyDir.templateRef"></ng-container>
22
98
  </view>
23
99
  }
24
100
  } @else {
25
- @if (leadingSpacerStyle !== null) {
26
- <view [style]="leadingSpacerStyle"></view>
27
- }
28
- @if (forcedStickyCell !== null) {
29
- <sticky-header
30
- (layout)="handleCellLayout(forcedStickyCell.measure, $event)"
31
- [style]="cellStyle"
32
- >
33
- <ng-container
34
- [vListOutlet]="cellTemplate"
35
- [vListOutletContext]="forcedStickyCell.context"
36
- ></ng-container>
37
- </sticky-header>
38
- }
39
- @if (gapSpacerStyle !== null) {
40
- <view [style]="gapSpacerStyle"></view>
41
- }
42
- @for (cell of windowCells; track cell.key) {
43
- @if (cell.isSticky) {
101
+ @for (row of rows; track row.key) {
102
+ @if (row.kind === spacerKind) {
103
+ <view [style]="row.style"></view>
104
+ } @else if (row.renderer !== undefined) {
105
+ @if (row.cell.isSticky) {
106
+ <sticky-header>
107
+ <ng-container
108
+ [vListOutlet]="cellRendererTpl"
109
+ [vListOutletContext]="row.renderer"
110
+ ></ng-container>
111
+ </sticky-header>
112
+ } @else {
113
+ <ng-container
114
+ [vListOutlet]="cellRendererTpl"
115
+ [vListOutletContext]="row.renderer"
116
+ ></ng-container>
117
+ }
118
+ } @else if (row.cell.isSticky) {
44
119
  <sticky-header
45
- (layout)="handleCellLayout(cell.measure, $event)"
120
+ (layout)="handleCellLayout(row.cell.measure, $event, row.cell.index)"
121
+ (focus)="handleCellFocus(row.cell.index)"
46
122
  [style]="cellStyle"
47
123
  >
48
124
  <ng-container
49
- [vListOutlet]="cellTemplate"
50
- [vListOutletContext]="cell.context"
125
+ [vListOutlet]="cellTemplate" [vListOutletComponent]="itemComponent"
126
+ [vListOutletContext]="row.cell.context"
51
127
  ></ng-container>
52
- @if (cell.separatorContext !== undefined) {
128
+ @if (row.cell.separatorContext !== undefined) {
53
129
  <ng-container
54
130
  [vListOutlet]="separatorTemplate"
55
- [vListOutletContext]="cell.separatorContext"
131
+ [vListOutletContext]="row.cell.separatorContext"
56
132
  ></ng-container>
57
133
  }
58
134
  </sticky-header>
59
135
  } @else {
60
136
  <view
61
- (layout)="handleCellLayout(cell.measure, $event)"
137
+ (layout)="handleCellLayout(row.cell.measure, $event, row.cell.index)"
138
+ (focus)="handleCellFocus(row.cell.index)"
62
139
  [style]="cellStyle"
63
140
  >
64
141
  <ng-container
65
- [vListOutlet]="cellTemplate"
66
- [vListOutletContext]="cell.context"
142
+ [vListOutlet]="cellTemplate" [vListOutletComponent]="itemComponent"
143
+ [vListOutletContext]="row.cell.context"
67
144
  ></ng-container>
68
- @if (cell.separatorContext !== undefined) {
145
+ @if (row.cell.separatorContext !== undefined) {
69
146
  <ng-container
70
147
  [vListOutlet]="separatorTemplate"
71
- [vListOutletContext]="cell.separatorContext"
148
+ [vListOutletContext]="row.cell.separatorContext"
72
149
  ></ng-container>
73
150
  }
74
151
  </view>
75
152
  }
76
153
  }
77
- @if (trailingSpacerStyle !== null) {
78
- <view [style]="trailingSpacerStyle"></view>
79
- }
80
154
  }
81
155
 
82
156
  @if (footerDir !== undefined) {
83
- <view>
157
+ <view [style]="footerStyle">
84
158
  <ng-container [vListOutlet]="footerDir.templateRef"></ng-container>
85
159
  </view>
86
160
  }
@@ -94,83 +168,95 @@ export const VIRTUALIZED_LIST_TEMPLATE = `
94
168
  }
95
169
 
96
170
  @if (headerDir !== undefined) {
97
- <view>
171
+ <view [style]="headerStyle">
98
172
  <ng-container [vListOutlet]="headerDir.templateRef"></ng-container>
99
173
  </view>
100
174
  }
101
175
 
102
176
  @if (itemCount === 0) {
103
177
  @if (emptyDir !== undefined) {
104
- <view>
178
+ <view [style]="cellStyle">
105
179
  <ng-container [vListOutlet]="emptyDir.templateRef"></ng-container>
106
180
  </view>
107
181
  }
108
182
  } @else {
109
- @if (leadingSpacerStyle !== null) {
110
- <view [style]="leadingSpacerStyle"></view>
111
- }
112
- @if (forcedStickyCell !== null) {
113
- <sticky-header
114
- (layout)="handleCellLayout(forcedStickyCell.measure, $event)"
115
- [style]="cellStyle"
116
- >
117
- <ng-container
118
- [vListOutlet]="cellTemplate"
119
- [vListOutletContext]="forcedStickyCell.context"
120
- ></ng-container>
121
- </sticky-header>
122
- }
123
- @if (gapSpacerStyle !== null) {
124
- <view [style]="gapSpacerStyle"></view>
125
- }
126
183
  <!-- The separator sits INSIDE the measuring view, matching RN's cell renderer, as a
127
184
  sibling it would add an extra flex gap -->
128
- @for (cell of windowCells; track cell.key) {
129
- @if (cell.isSticky) {
185
+ @for (row of rows; track row.key) {
186
+ @if (row.kind === spacerKind) {
187
+ <view [style]="row.style"></view>
188
+ } @else if (row.renderer !== undefined) {
189
+ @if (row.cell.isSticky) {
190
+ <sticky-header>
191
+ <ng-container
192
+ [vListOutlet]="cellRendererTpl"
193
+ [vListOutletContext]="row.renderer"
194
+ ></ng-container>
195
+ </sticky-header>
196
+ } @else {
197
+ <ng-container
198
+ [vListOutlet]="cellRendererTpl"
199
+ [vListOutletContext]="row.renderer"
200
+ ></ng-container>
201
+ }
202
+ } @else if (row.cell.isSticky) {
130
203
  <sticky-header
131
- (layout)="handleCellLayout(cell.measure, $event)"
204
+ (layout)="handleCellLayout(row.cell.measure, $event, row.cell.index)"
205
+ (focus)="handleCellFocus(row.cell.index)"
132
206
  [style]="cellStyle"
133
207
  >
134
208
  <ng-container
135
- [vListOutlet]="cellTemplate"
136
- [vListOutletContext]="cell.context"
209
+ [vListOutlet]="cellTemplate" [vListOutletComponent]="itemComponent"
210
+ [vListOutletContext]="row.cell.context"
137
211
  ></ng-container>
138
- @if (cell.separatorContext !== undefined) {
212
+ @if (row.cell.separatorContext !== undefined) {
139
213
  <ng-container
140
214
  [vListOutlet]="separatorTemplate"
141
- [vListOutletContext]="cell.separatorContext"
215
+ [vListOutletContext]="row.cell.separatorContext"
142
216
  ></ng-container>
143
217
  }
144
218
  </sticky-header>
145
219
  } @else {
146
220
  <view
147
- (layout)="handleCellLayout(cell.measure, $event)"
221
+ (layout)="handleCellLayout(row.cell.measure, $event, row.cell.index)"
222
+ (focus)="handleCellFocus(row.cell.index)"
148
223
  [style]="cellStyle"
149
224
  >
150
225
  <ng-container
151
- [vListOutlet]="cellTemplate"
152
- [vListOutletContext]="cell.context"
226
+ [vListOutlet]="cellTemplate" [vListOutletComponent]="itemComponent"
227
+ [vListOutletContext]="row.cell.context"
153
228
  ></ng-container>
154
- @if (cell.separatorContext !== undefined) {
229
+ @if (row.cell.separatorContext !== undefined) {
155
230
  <ng-container
156
231
  [vListOutlet]="separatorTemplate"
157
- [vListOutletContext]="cell.separatorContext"
232
+ [vListOutletContext]="row.cell.separatorContext"
158
233
  ></ng-container>
159
234
  }
160
235
  </view>
161
236
  }
162
237
  }
163
- @if (trailingSpacerStyle !== null) {
164
- <view [style]="trailingSpacerStyle"></view>
165
- }
166
238
  }
167
239
 
168
240
  @if (footerDir !== undefined) {
169
- <view>
241
+ <view [style]="footerStyle">
170
242
  <ng-container [vListOutlet]="footerDir.templateRef"></ng-container>
171
243
  </view>
172
244
  }
173
245
  </scroll-view>
174
246
  }
247
+
248
+ <!-- What a \`vListCell\` wrapper stamps for its item and separator, once per list -->
249
+ <ng-template #cellBody let-cell>
250
+ <ng-container
251
+ [vListOutlet]="cellTemplate" [vListOutletComponent]="itemComponent"
252
+ [vListOutletContext]="cell.context"
253
+ ></ng-container>
254
+ @if (cell.separatorContext !== undefined) {
255
+ <ng-container
256
+ [vListOutlet]="separatorTemplate"
257
+ [vListOutletContext]="cell.separatorContext"
258
+ ></ng-container>
259
+ }
260
+ </ng-template>
175
261
  `;
176
262
  //# sourceMappingURL=list-template.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"list-template.js","sourceRoot":"","sources":["../../../../src/components/virtualized-list/list-template.ts"],"names":[],"mappings":"AAAA,qDAAqD;AACrD,wFAAwF;AACxF,MAAM,CAAC,MAAM,yBAAyB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4KtC,CAAC"}
1
+ {"version":3,"file":"list-template.js","sourceRoot":"","sources":["../../../../src/components/virtualized-list/list-template.ts"],"names":[],"mappings":"AAAA,4EAA4E;AAC5E,iGAAiG;AACjG,MAAM,CAAC,MAAM,yBAAyB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkQtC,CAAC"}
@@ -0,0 +1,6 @@
1
+ import type { IListScope } from '@symbiote-native/components';
2
+ export declare abstract class ListScopeProvider {
3
+ abstract readonly listScope: IListScope | null;
4
+ }
5
+ export declare const NO_LIST_SCOPE: ListScopeProvider;
6
+ export declare function injectVirtualizedListScope(): IListScope | null;
@@ -0,0 +1,17 @@
1
+ // The scope a list hands down to the lists nested in its cells, Angular's way to carry it
2
+ // What it holds and how it behaves is `createListNesting` in the shared components package
3
+ import { inject } from '@angular/core';
4
+ // A list provides itself under this token, a cell declared inside it injects the nearest one
5
+ export class ListScopeProvider {
6
+ }
7
+ // A portal-like component (Modal) provides this, its content sits outside the list's scroll
8
+ export const NO_LIST_SCOPE = { listScope: null };
9
+ // Null outside every list, the scope of the nearest list above otherwise
10
+ export function injectVirtualizedListScope() {
11
+ const provider = inject(ListScopeProvider, {
12
+ skipSelf: true,
13
+ optional: true,
14
+ });
15
+ return provider?.listScope ?? null;
16
+ }
17
+ //# sourceMappingURL=nested-scope.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"nested-scope.js","sourceRoot":"","sources":["../../../../src/components/virtualized-list/nested-scope.ts"],"names":[],"mappings":"AAAA,0FAA0F;AAC1F,2FAA2F;AAE3F,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAGvC,6FAA6F;AAC7F,MAAM,OAAgB,iBAAiB;CAEtC;AAED,4FAA4F;AAC5F,MAAM,CAAC,MAAM,aAAa,GAAsB,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AAEpE,yEAAyE;AACzE,MAAM,UAAU,0BAA0B;IACxC,MAAM,QAAQ,GAAG,MAAM,CAAC,iBAAiB,EAAE;QACzC,QAAQ,EAAE,IAAI;QACd,QAAQ,EAAE,IAAI;KACf,CAAC,CAAC;IACH,OAAO,QAAQ,EAAE,SAAS,IAAI,IAAI,CAAC;AACrC,CAAC"}
@@ -1,17 +1,28 @@
1
1
  import { TemplateRef } from '@angular/core';
2
- import type { ISection, ISeparators } from '@symbiote-native/components';
2
+ import type { ISection as ICoreSection, ISeparators } from '@symbiote-native/components';
3
+ import type { IVListSeparatorContext } from '../virtualized-list';
3
4
  import * as i0 from "@angular/core";
4
- export interface IVSectionItemContext<ItemT> {
5
+ export type ISection<ItemT> = ICoreSection<ItemT> & {
6
+ item?: TemplateRef<IVSectionItemContext<ItemT>>;
7
+ separator?: TemplateRef<IVListSeparatorContext<ItemT>>;
8
+ };
9
+ export type IVSectionItemContext<ItemT> = {
5
10
  $implicit: ItemT;
6
11
  item: ItemT;
7
12
  index: number;
8
13
  section: ISection<ItemT>;
9
14
  separators: ISeparators;
10
- }
11
- export interface IVSectionContext<ItemT> {
15
+ };
16
+ export type IVSectionContext<ItemT> = {
12
17
  $implicit: ISection<ItemT>;
13
18
  section: ISection<ItemT>;
14
- }
19
+ };
20
+ export type IVSectionSeparatorContext<ItemT> = IVListSeparatorContext<ItemT> & {
21
+ section?: ISection<ItemT>;
22
+ leadingSection?: ISection<ItemT>;
23
+ trailingSection?: ISection<ItemT>;
24
+ props?: IVListSeparatorContext<ItemT>;
25
+ };
15
26
  export declare class VSectionItemDirective<ItemT = unknown> {
16
27
  readonly templateRef: TemplateRef<IVSectionItemContext<ItemT>>;
17
28
  static ngTemplateContextGuard<T>(_dir: VSectionItemDirective<T>, _ctx: unknown): _ctx is IVSectionItemContext<T>;
@@ -30,8 +41,9 @@ export declare class VSectionFooterDirective<ItemT = unknown> {
30
41
  static ɵfac: i0.ɵɵFactoryDeclaration<VSectionFooterDirective<any>, never>;
31
42
  static ɵdir: i0.ɵɵDirectiveDeclaration<VSectionFooterDirective<any>, "[vSectionFooter]", never, {}, {}, never, never, true, never>;
32
43
  }
33
- export declare class VSectionSeparatorDirective {
34
- readonly templateRef: TemplateRef<any>;
35
- static ɵfac: i0.ɵɵFactoryDeclaration<VSectionSeparatorDirective, never>;
36
- static ɵdir: i0.ɵɵDirectiveDeclaration<VSectionSeparatorDirective, "[vSectionSeparator]", never, {}, {}, never, never, true, never>;
44
+ export declare class VSectionSeparatorDirective<ItemT = unknown> {
45
+ readonly templateRef: TemplateRef<IVSectionSeparatorContext<ItemT>>;
46
+ static ngTemplateContextGuard<T>(_dir: VSectionSeparatorDirective<T>, _ctx: unknown): _ctx is IVSectionSeparatorContext<T>;
47
+ static ɵfac: i0.ɵɵFactoryDeclaration<VSectionSeparatorDirective<any>, never>;
48
+ static ɵdir: i0.ɵɵDirectiveDeclaration<VSectionSeparatorDirective<any>, "[vSectionSeparator]", never, {}, {}, never, never, true, never>;
37
49
  }
@@ -1,29 +1,7 @@
1
- // VirtualizedSectionList authoring directives: the Angular-faithful equivalent of React/Vue's
2
- // `renderItem` / `renderSectionHeader` / `renderSectionFooter` / `SectionSeparatorComponent`.
3
- // React/Vue pass element-returning callbacks; that does NOT translate to Angular, where per-cell
4
- // content is a TEMPLATE. So the app supplies each section slot as an `<ng-template>` carrying one
5
- // of these structural directives, and VirtualizedSectionList stamps the windowed slice through
6
- // them. The shared flatten/window surface stays in @symbiote-native/components, only the cell-AUTHORING shape is
7
- // framework-specific. SectionList (the next layer) reuses these same directives verbatim.
8
- //
9
- // Authoring API (what the app imports and what SectionList builds on):
10
- // <VirtualizedSectionList [sections]="sections">
11
- // <ng-template vSectionItem let-item let-index="index" let-section="section" let-separators="separators"> … </ng-template>
12
- // <ng-template vSectionHeader let-section> … </ng-template>
13
- // <ng-template vSectionFooter let-section> … </ng-template>
14
- // <ng-template vSectionSeparator> … </ng-template> <!-- between adjacent sections -->
15
- // <!-- list-level slots reuse VirtualizedList's own directives: -->
16
- // <ng-template vListHeader> … </ng-template>
17
- // <ng-template vListFooter> … </ng-template>
18
- // <ng-template vListEmpty> … </ng-template>
19
- // <ng-template vListSeparator let-highlighted let-leadingItem="leadingItem"> … </ng-template> <!-- between items -->
20
- // </VirtualizedSectionList>
21
- //
22
- // Each directive carries a static ngTemplateContextGuard so the `let-` bindings infer at the call
23
- // site (the Angular twin of renderItem / renderSectionHeader's typed info arg).
1
+ // Section list slots are `<ng-template>`s carrying these directives, the list stamps the window
2
+ // through them. Each has a context guard so the `let-` bindings infer at the call site
24
3
  import { Directive, TemplateRef, inject } from '@angular/core';
25
4
  import * as i0 from "@angular/core";
26
- // `<ng-template vSectionItem>` — one section item row. The static guard types the `let-` bindings.
27
5
  export class VSectionItemDirective {
28
6
  constructor() {
29
7
  this.templateRef = inject(TemplateRef);
@@ -38,7 +16,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
38
16
  type: Directive,
39
17
  args: [{ selector: '[vSectionItem]', standalone: true }]
40
18
  }] });
41
- // `<ng-template vSectionHeader>` — rendered above each section's items (RN renderSectionHeader).
19
+ // Rendered above each section's items, RN's `renderSectionHeader`
42
20
  export class VSectionHeaderDirective {
43
21
  constructor() {
44
22
  this.templateRef = inject(TemplateRef);
@@ -53,7 +31,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
53
31
  type: Directive,
54
32
  args: [{ selector: '[vSectionHeader]', standalone: true }]
55
33
  }] });
56
- // `<ng-template vSectionFooter>` — rendered below each section's items (RN renderSectionFooter).
34
+ // Rendered below each section's items, RN's `renderSectionFooter`
57
35
  export class VSectionFooterDirective {
58
36
  constructor() {
59
37
  this.templateRef = inject(TemplateRef);
@@ -68,12 +46,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
68
46
  type: Directive,
69
47
  args: [{ selector: '[vSectionFooter]', standalone: true }]
70
48
  }] });
71
- // `<ng-template vSectionSeparator>` — painted between adjacent sections (after one section's footer,
72
- // before the next section's header). Mirrors RN's SectionSeparatorComponent; carries no context.
49
+ // Painted before a section's first item and after its last, RN's `SectionSeparatorComponent`
73
50
  export class VSectionSeparatorDirective {
74
51
  constructor() {
75
52
  this.templateRef = inject(TemplateRef);
76
53
  }
54
+ static ngTemplateContextGuard(_dir, _ctx) {
55
+ return true;
56
+ }
77
57
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: VSectionSeparatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
78
58
  static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: VSectionSeparatorDirective, isStandalone: true, selector: "[vSectionSeparator]", ngImport: i0 }); }
79
59
  }
@@ -1 +1 @@
1
- {"version":3,"file":"directives.js","sourceRoot":"","sources":["../../../../src/components/virtualized-section-list/directives.ts"],"names":[],"mappings":"AAAA,8FAA8F;AAC9F,8FAA8F;AAC9F,iGAAiG;AACjG,kGAAkG;AAClG,+FAA+F;AAC/F,iHAAiH;AACjH,0FAA0F;AAC1F,EAAE;AACF,uEAAuE;AACvE,mDAAmD;AACnD,+HAA+H;AAC/H,gEAAgE;AAChE,gEAAgE;AAChE,qGAAqG;AACrG,wEAAwE;AACxE,iDAAiD;AACjD,iDAAiD;AACjD,gDAAgD;AAChD,0HAA0H;AAC1H,8BAA8B;AAC9B,EAAE;AACF,kGAAkG;AAClG,gFAAgF;AAEhF,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;;AAqB/D,mGAAmG;AAEnG,MAAM,OAAO,qBAAqB;IADlC;QAEW,gBAAW,GAClB,MAAM,CAA2C,WAAW,CAAC,CAAC;KAQjE;IANC,MAAM,CAAC,sBAAsB,CAC3B,IAA8B,EAC9B,IAAa;QAEb,OAAO,IAAI,CAAC;IACd,CAAC;8GATU,qBAAqB;kGAArB,qBAAqB;;2FAArB,qBAAqB;kBADjC,SAAS;mBAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,UAAU,EAAE,IAAI,EAAE;;AAa3D,iGAAiG;AAEjG,MAAM,OAAO,uBAAuB;IADpC;QAEW,gBAAW,GAClB,MAAM,CAAuC,WAAW,CAAC,CAAC;KAQ7D;IANC,MAAM,CAAC,sBAAsB,CAC3B,IAAgC,EAChC,IAAa;QAEb,OAAO,IAAI,CAAC;IACd,CAAC;8GATU,uBAAuB;kGAAvB,uBAAuB;;2FAAvB,uBAAuB;kBADnC,SAAS;mBAAC,EAAE,QAAQ,EAAE,kBAAkB,EAAE,UAAU,EAAE,IAAI,EAAE;;AAa7D,iGAAiG;AAEjG,MAAM,OAAO,uBAAuB;IADpC;QAEW,gBAAW,GAClB,MAAM,CAAuC,WAAW,CAAC,CAAC;KAQ7D;IANC,MAAM,CAAC,sBAAsB,CAC3B,IAAgC,EAChC,IAAa;QAEb,OAAO,IAAI,CAAC;IACd,CAAC;8GATU,uBAAuB;kGAAvB,uBAAuB;;2FAAvB,uBAAuB;kBADnC,SAAS;mBAAC,EAAE,QAAQ,EAAE,kBAAkB,EAAE,UAAU,EAAE,IAAI,EAAE;;AAa7D,qGAAqG;AACrG,iGAAiG;AAEjG,MAAM,OAAO,0BAA0B;IADvC;QAEW,gBAAW,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;KAC5C;8GAFY,0BAA0B;kGAA1B,0BAA0B;;2FAA1B,0BAA0B;kBADtC,SAAS;mBAAC,EAAE,QAAQ,EAAE,qBAAqB,EAAE,UAAU,EAAE,IAAI,EAAE"}
1
+ {"version":3,"file":"directives.js","sourceRoot":"","sources":["../../../../src/components/virtualized-section-list/directives.ts"],"names":[],"mappings":"AAAA,gGAAgG;AAChG,uFAAuF;AAEvF,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;;AAsC/D,MAAM,OAAO,qBAAqB;IADlC;QAEW,gBAAW,GAClB,MAAM,CAA2C,WAAW,CAAC,CAAC;KAQjE;IANC,MAAM,CAAC,sBAAsB,CAC3B,IAA8B,EAC9B,IAAa;QAEb,OAAO,IAAI,CAAC;IACd,CAAC;8GATU,qBAAqB;kGAArB,qBAAqB;;2FAArB,qBAAqB;kBADjC,SAAS;mBAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,UAAU,EAAE,IAAI,EAAE;;AAa3D,kEAAkE;AAElE,MAAM,OAAO,uBAAuB;IADpC;QAEW,gBAAW,GAClB,MAAM,CAAuC,WAAW,CAAC,CAAC;KAQ7D;IANC,MAAM,CAAC,sBAAsB,CAC3B,IAAgC,EAChC,IAAa;QAEb,OAAO,IAAI,CAAC;IACd,CAAC;8GATU,uBAAuB;kGAAvB,uBAAuB;;2FAAvB,uBAAuB;kBADnC,SAAS;mBAAC,EAAE,QAAQ,EAAE,kBAAkB,EAAE,UAAU,EAAE,IAAI,EAAE;;AAa7D,kEAAkE;AAElE,MAAM,OAAO,uBAAuB;IADpC;QAEW,gBAAW,GAClB,MAAM,CAAuC,WAAW,CAAC,CAAC;KAQ7D;IANC,MAAM,CAAC,sBAAsB,CAC3B,IAAgC,EAChC,IAAa;QAEb,OAAO,IAAI,CAAC;IACd,CAAC;8GATU,uBAAuB;kGAAvB,uBAAuB;;2FAAvB,uBAAuB;kBADnC,SAAS;mBAAC,EAAE,QAAQ,EAAE,kBAAkB,EAAE,UAAU,EAAE,IAAI,EAAE;;AAa7D,6FAA6F;AAE7F,MAAM,OAAO,0BAA0B;IADvC;QAEW,gBAAW,GAClB,MAAM,CAAgD,WAAW,CAAC,CAAC;KAQtE;IANC,MAAM,CAAC,sBAAsB,CAC3B,IAAmC,EACnC,IAAa;QAEb,OAAO,IAAI,CAAC;IACd,CAAC;8GATU,0BAA0B;kGAA1B,0BAA0B;;2FAA1B,0BAA0B;kBADtC,SAAS;mBAAC,EAAE,QAAQ,EAAE,qBAAqB,EAAE,UAAU,EAAE,IAAI,EAAE"}