@angular/cdk 21.0.0-next.9 → 21.0.0-rc.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 (123) hide show
  1. package/_adev_assets/cdk_drag_drop.json +13 -12
  2. package/_adev_assets/cdk_testing.json +9 -9
  3. package/_adev_assets/cdk_testing_protractor.json +1 -1
  4. package/_adev_assets/cdk_testing_selenium_webdriver.json +1 -1
  5. package/_adev_assets/cdk_testing_testbed.json +1 -1
  6. package/fesm2022/_a11y-module-chunk.mjs +755 -869
  7. package/fesm2022/_a11y-module-chunk.mjs.map +1 -1
  8. package/fesm2022/_activedescendant-key-manager-chunk.mjs +8 -8
  9. package/fesm2022/_activedescendant-key-manager-chunk.mjs.map +1 -1
  10. package/fesm2022/_array-chunk.mjs +1 -1
  11. package/fesm2022/_array-chunk.mjs.map +1 -1
  12. package/fesm2022/_breakpoints-observer-chunk.mjs +149 -152
  13. package/fesm2022/_breakpoints-observer-chunk.mjs.map +1 -1
  14. package/fesm2022/_css-pixel-value-chunk.mjs +4 -5
  15. package/fesm2022/_css-pixel-value-chunk.mjs.map +1 -1
  16. package/fesm2022/_data-source-chunk.mjs +2 -8
  17. package/fesm2022/_data-source-chunk.mjs.map +1 -1
  18. package/fesm2022/_directionality-chunk.mjs +54 -54
  19. package/fesm2022/_directionality-chunk.mjs.map +1 -1
  20. package/fesm2022/_dispose-view-repeater-strategy-chunk.mjs +25 -36
  21. package/fesm2022/_dispose-view-repeater-strategy-chunk.mjs.map +1 -1
  22. package/fesm2022/_element-chunk.mjs +6 -17
  23. package/fesm2022/_element-chunk.mjs.map +1 -1
  24. package/fesm2022/_fake-event-detection-chunk.mjs +3 -17
  25. package/fesm2022/_fake-event-detection-chunk.mjs.map +1 -1
  26. package/fesm2022/_focus-key-manager-chunk.mjs +10 -14
  27. package/fesm2022/_focus-key-manager-chunk.mjs.map +1 -1
  28. package/fesm2022/_focus-monitor-chunk.mjs +376 -566
  29. package/fesm2022/_focus-monitor-chunk.mjs.map +1 -1
  30. package/fesm2022/_id-generator-chunk.mjs +36 -27
  31. package/fesm2022/_id-generator-chunk.mjs.map +1 -1
  32. package/fesm2022/_keycodes-chunk.mjs +9 -9
  33. package/fesm2022/_keycodes-chunk.mjs.map +1 -1
  34. package/fesm2022/_list-key-manager-chunk.mjs +248 -336
  35. package/fesm2022/_list-key-manager-chunk.mjs.map +1 -1
  36. package/fesm2022/_overlay-module-chunk.mjs +2534 -2948
  37. package/fesm2022/_overlay-module-chunk.mjs.map +1 -1
  38. package/fesm2022/_passive-listeners-chunk.mjs +10 -22
  39. package/fesm2022/_passive-listeners-chunk.mjs.map +1 -1
  40. package/fesm2022/_platform-chunk.mjs +42 -65
  41. package/fesm2022/_platform-chunk.mjs.map +1 -1
  42. package/fesm2022/_recycle-view-repeater-strategy-chunk.mjs +78 -134
  43. package/fesm2022/_recycle-view-repeater-strategy-chunk.mjs.map +1 -1
  44. package/fesm2022/_scrolling-chunk.mjs +44 -85
  45. package/fesm2022/_scrolling-chunk.mjs.map +1 -1
  46. package/fesm2022/_selection-model-chunk.mjs +138 -209
  47. package/fesm2022/_selection-model-chunk.mjs.map +1 -1
  48. package/fesm2022/_shadow-dom-chunk.mjs +21 -35
  49. package/fesm2022/_shadow-dom-chunk.mjs.map +1 -1
  50. package/fesm2022/_style-loader-chunk.mjs +50 -37
  51. package/fesm2022/_style-loader-chunk.mjs.map +1 -1
  52. package/fesm2022/_test-environment-chunk.mjs +2 -14
  53. package/fesm2022/_test-environment-chunk.mjs.map +1 -1
  54. package/fesm2022/_tree-key-manager-chunk.mjs +229 -308
  55. package/fesm2022/_tree-key-manager-chunk.mjs.map +1 -1
  56. package/fesm2022/_typeahead-chunk.mjs +52 -74
  57. package/fesm2022/_typeahead-chunk.mjs.map +1 -1
  58. package/fesm2022/_unique-selection-dispatcher-chunk.mjs +43 -40
  59. package/fesm2022/_unique-selection-dispatcher-chunk.mjs.map +1 -1
  60. package/fesm2022/a11y.mjs +351 -449
  61. package/fesm2022/a11y.mjs.map +1 -1
  62. package/fesm2022/accordion.mjs +254 -192
  63. package/fesm2022/accordion.mjs.map +1 -1
  64. package/fesm2022/bidi.mjs +121 -64
  65. package/fesm2022/bidi.mjs.map +1 -1
  66. package/fesm2022/cdk.mjs +1 -2
  67. package/fesm2022/cdk.mjs.map +1 -1
  68. package/fesm2022/clipboard.mjs +208 -186
  69. package/fesm2022/clipboard.mjs.map +1 -1
  70. package/fesm2022/coercion-private.mjs +4 -8
  71. package/fesm2022/coercion-private.mjs.map +1 -1
  72. package/fesm2022/coercion.mjs +11 -29
  73. package/fesm2022/coercion.mjs.map +1 -1
  74. package/fesm2022/dialog.mjs +660 -808
  75. package/fesm2022/dialog.mjs.map +1 -1
  76. package/fesm2022/drag-drop.mjs +3347 -4286
  77. package/fesm2022/drag-drop.mjs.map +1 -1
  78. package/fesm2022/keycodes.mjs +4 -8
  79. package/fesm2022/keycodes.mjs.map +1 -1
  80. package/fesm2022/layout.mjs +44 -26
  81. package/fesm2022/layout.mjs.map +1 -1
  82. package/fesm2022/listbox.mjs +841 -895
  83. package/fesm2022/listbox.mjs.map +1 -1
  84. package/fesm2022/menu.mjs +1942 -1858
  85. package/fesm2022/menu.mjs.map +1 -1
  86. package/fesm2022/observers-private.mjs +88 -106
  87. package/fesm2022/observers-private.mjs.map +1 -1
  88. package/fesm2022/observers.mjs +262 -184
  89. package/fesm2022/observers.mjs.map +1 -1
  90. package/fesm2022/overlay.mjs +72 -68
  91. package/fesm2022/overlay.mjs.map +1 -1
  92. package/fesm2022/platform.mjs +43 -54
  93. package/fesm2022/platform.mjs.map +1 -1
  94. package/fesm2022/portal.mjs +402 -560
  95. package/fesm2022/portal.mjs.map +1 -1
  96. package/fesm2022/private.mjs +38 -10
  97. package/fesm2022/private.mjs.map +1 -1
  98. package/fesm2022/scrolling.mjs +1323 -1400
  99. package/fesm2022/scrolling.mjs.map +1 -1
  100. package/fesm2022/stepper.mjs +758 -590
  101. package/fesm2022/stepper.mjs.map +1 -1
  102. package/fesm2022/table.mjs +2327 -2319
  103. package/fesm2022/table.mjs.map +1 -1
  104. package/fesm2022/testing-selenium-webdriver.mjs +252 -325
  105. package/fesm2022/testing-selenium-webdriver.mjs.map +1 -1
  106. package/fesm2022/testing-testbed.mjs +592 -709
  107. package/fesm2022/testing-testbed.mjs.map +1 -1
  108. package/fesm2022/testing.mjs +368 -889
  109. package/fesm2022/testing.mjs.map +1 -1
  110. package/fesm2022/text-field.mjs +459 -388
  111. package/fesm2022/text-field.mjs.map +1 -1
  112. package/fesm2022/tree.mjs +1483 -1731
  113. package/fesm2022/tree.mjs.map +1 -1
  114. package/overlay/_index.scss +28 -0
  115. package/overlay-prebuilt.css +1 -1
  116. package/package.json +1 -1
  117. package/schematics/ng-add/index.js +1 -1
  118. package/types/_overlay-module-chunk.d.ts +59 -7
  119. package/types/_portal-directives-chunk.d.ts +2 -18
  120. package/types/accordion.d.ts +3 -1
  121. package/types/dialog.d.ts +1 -1
  122. package/types/overlay.d.ts +6 -2
  123. package/types/portal.d.ts +1 -1
@@ -12,1459 +12,1382 @@ import { _VIEW_REPEATER_STRATEGY, ArrayDataSource, _RecycleViewRepeaterStrategy
12
12
  import { isDataSource } from './_data-source-chunk.mjs';
13
13
  import '@angular/common';
14
14
 
15
- /** The injection token used to specify the virtual scrolling strategy. */
16
15
  const VIRTUAL_SCROLL_STRATEGY = new InjectionToken('VIRTUAL_SCROLL_STRATEGY');
17
16
 
18
- /** Virtual scrolling strategy for lists with items of known fixed size. */
19
17
  class FixedSizeVirtualScrollStrategy {
20
- _scrolledIndexChange = new Subject();
21
- /** @docs-private Implemented as part of VirtualScrollStrategy. */
22
- scrolledIndexChange = this._scrolledIndexChange.pipe(distinctUntilChanged());
23
- /** The attached viewport. */
24
- _viewport = null;
25
- /** The size of the items in the virtually scrolling list. */
26
- _itemSize;
27
- /** The minimum amount of buffer rendered beyond the viewport (in pixels). */
28
- _minBufferPx;
29
- /** The number of buffer items to render beyond the edge of the viewport (in pixels). */
30
- _maxBufferPx;
31
- /**
32
- * @param itemSize The size of the items in the virtually scrolling list.
33
- * @param minBufferPx The minimum amount of buffer (in pixels) before needing to render more
34
- * @param maxBufferPx The amount of buffer (in pixels) to render when rendering more.
35
- */
36
- constructor(itemSize, minBufferPx, maxBufferPx) {
37
- this._itemSize = itemSize;
38
- this._minBufferPx = minBufferPx;
39
- this._maxBufferPx = maxBufferPx;
40
- }
41
- /**
42
- * Attaches this scroll strategy to a viewport.
43
- * @param viewport The viewport to attach this strategy to.
44
- */
45
- attach(viewport) {
46
- this._viewport = viewport;
47
- this._updateTotalContentSize();
48
- this._updateRenderedRange();
49
- }
50
- /** Detaches this scroll strategy from the currently attached viewport. */
51
- detach() {
52
- this._scrolledIndexChange.complete();
53
- this._viewport = null;
54
- }
55
- /**
56
- * Update the item size and buffer size.
57
- * @param itemSize The size of the items in the virtually scrolling list.
58
- * @param minBufferPx The minimum amount of buffer (in pixels) before needing to render more
59
- * @param maxBufferPx The amount of buffer (in pixels) to render when rendering more.
60
- */
61
- updateItemAndBufferSize(itemSize, minBufferPx, maxBufferPx) {
62
- if (maxBufferPx < minBufferPx && (typeof ngDevMode === 'undefined' || ngDevMode)) {
63
- throw Error('CDK virtual scroll: maxBufferPx must be greater than or equal to minBufferPx');
64
- }
65
- this._itemSize = itemSize;
66
- this._minBufferPx = minBufferPx;
67
- this._maxBufferPx = maxBufferPx;
68
- this._updateTotalContentSize();
69
- this._updateRenderedRange();
70
- }
71
- /** @docs-private Implemented as part of VirtualScrollStrategy. */
72
- onContentScrolled() {
73
- this._updateRenderedRange();
74
- }
75
- /** @docs-private Implemented as part of VirtualScrollStrategy. */
76
- onDataLengthChanged() {
77
- this._updateTotalContentSize();
78
- this._updateRenderedRange();
79
- }
80
- /** @docs-private Implemented as part of VirtualScrollStrategy. */
81
- onContentRendered() {
82
- /* no-op */
83
- }
84
- /** @docs-private Implemented as part of VirtualScrollStrategy. */
85
- onRenderedOffsetChanged() {
86
- /* no-op */
87
- }
88
- /**
89
- * Scroll to the offset for the given index.
90
- * @param index The index of the element to scroll to.
91
- * @param behavior The ScrollBehavior to use when scrolling.
92
- */
93
- scrollToIndex(index, behavior) {
94
- if (this._viewport) {
95
- this._viewport.scrollToOffset(index * this._itemSize, behavior);
96
- }
97
- }
98
- /** Update the viewport's total content size. */
99
- _updateTotalContentSize() {
100
- if (!this._viewport) {
101
- return;
18
+ _scrolledIndexChange = new Subject();
19
+ scrolledIndexChange = this._scrolledIndexChange.pipe(distinctUntilChanged());
20
+ _viewport = null;
21
+ _itemSize;
22
+ _minBufferPx;
23
+ _maxBufferPx;
24
+ constructor(itemSize, minBufferPx, maxBufferPx) {
25
+ this._itemSize = itemSize;
26
+ this._minBufferPx = minBufferPx;
27
+ this._maxBufferPx = maxBufferPx;
28
+ }
29
+ attach(viewport) {
30
+ this._viewport = viewport;
31
+ this._updateTotalContentSize();
32
+ this._updateRenderedRange();
33
+ }
34
+ detach() {
35
+ this._scrolledIndexChange.complete();
36
+ this._viewport = null;
37
+ }
38
+ updateItemAndBufferSize(itemSize, minBufferPx, maxBufferPx) {
39
+ if (maxBufferPx < minBufferPx && (typeof ngDevMode === 'undefined' || ngDevMode)) {
40
+ throw Error('CDK virtual scroll: maxBufferPx must be greater than or equal to minBufferPx');
41
+ }
42
+ this._itemSize = itemSize;
43
+ this._minBufferPx = minBufferPx;
44
+ this._maxBufferPx = maxBufferPx;
45
+ this._updateTotalContentSize();
46
+ this._updateRenderedRange();
47
+ }
48
+ onContentScrolled() {
49
+ this._updateRenderedRange();
50
+ }
51
+ onDataLengthChanged() {
52
+ this._updateTotalContentSize();
53
+ this._updateRenderedRange();
54
+ }
55
+ onContentRendered() {}
56
+ onRenderedOffsetChanged() {}
57
+ scrollToIndex(index, behavior) {
58
+ if (this._viewport) {
59
+ this._viewport.scrollToOffset(index * this._itemSize, behavior);
60
+ }
61
+ }
62
+ _updateTotalContentSize() {
63
+ if (!this._viewport) {
64
+ return;
65
+ }
66
+ this._viewport.setTotalContentSize(this._viewport.getDataLength() * this._itemSize);
67
+ }
68
+ _updateRenderedRange() {
69
+ if (!this._viewport) {
70
+ return;
71
+ }
72
+ const renderedRange = this._viewport.getRenderedRange();
73
+ const newRange = {
74
+ start: renderedRange.start,
75
+ end: renderedRange.end
76
+ };
77
+ const viewportSize = this._viewport.getViewportSize();
78
+ const dataLength = this._viewport.getDataLength();
79
+ let scrollOffset = this._viewport.measureScrollOffset();
80
+ let firstVisibleIndex = this._itemSize > 0 ? scrollOffset / this._itemSize : 0;
81
+ if (newRange.end > dataLength) {
82
+ const maxVisibleItems = Math.ceil(viewportSize / this._itemSize);
83
+ const newVisibleIndex = Math.max(0, Math.min(firstVisibleIndex, dataLength - maxVisibleItems));
84
+ if (firstVisibleIndex != newVisibleIndex) {
85
+ firstVisibleIndex = newVisibleIndex;
86
+ scrollOffset = newVisibleIndex * this._itemSize;
87
+ newRange.start = Math.floor(firstVisibleIndex);
88
+ }
89
+ newRange.end = Math.max(0, Math.min(dataLength, newRange.start + maxVisibleItems));
90
+ }
91
+ const startBuffer = scrollOffset - newRange.start * this._itemSize;
92
+ if (startBuffer < this._minBufferPx && newRange.start != 0) {
93
+ const expandStart = Math.ceil((this._maxBufferPx - startBuffer) / this._itemSize);
94
+ newRange.start = Math.max(0, newRange.start - expandStart);
95
+ newRange.end = Math.min(dataLength, Math.ceil(firstVisibleIndex + (viewportSize + this._minBufferPx) / this._itemSize));
96
+ } else {
97
+ const endBuffer = newRange.end * this._itemSize - (scrollOffset + viewportSize);
98
+ if (endBuffer < this._minBufferPx && newRange.end != dataLength) {
99
+ const expandEnd = Math.ceil((this._maxBufferPx - endBuffer) / this._itemSize);
100
+ if (expandEnd > 0) {
101
+ newRange.end = Math.min(dataLength, newRange.end + expandEnd);
102
+ newRange.start = Math.max(0, Math.floor(firstVisibleIndex - this._minBufferPx / this._itemSize));
102
103
  }
103
- this._viewport.setTotalContentSize(this._viewport.getDataLength() * this._itemSize);
104
- }
105
- /** Update the viewport's rendered range. */
106
- _updateRenderedRange() {
107
- if (!this._viewport) {
108
- return;
109
- }
110
- const renderedRange = this._viewport.getRenderedRange();
111
- const newRange = { start: renderedRange.start, end: renderedRange.end };
112
- const viewportSize = this._viewport.getViewportSize();
113
- const dataLength = this._viewport.getDataLength();
114
- let scrollOffset = this._viewport.measureScrollOffset();
115
- // Prevent NaN as result when dividing by zero.
116
- let firstVisibleIndex = this._itemSize > 0 ? scrollOffset / this._itemSize : 0;
117
- // If user scrolls to the bottom of the list and data changes to a smaller list
118
- if (newRange.end > dataLength) {
119
- // We have to recalculate the first visible index based on new data length and viewport size.
120
- const maxVisibleItems = Math.ceil(viewportSize / this._itemSize);
121
- const newVisibleIndex = Math.max(0, Math.min(firstVisibleIndex, dataLength - maxVisibleItems));
122
- // If first visible index changed we must update scroll offset to handle start/end buffers
123
- // Current range must also be adjusted to cover the new position (bottom of new list).
124
- if (firstVisibleIndex != newVisibleIndex) {
125
- firstVisibleIndex = newVisibleIndex;
126
- scrollOffset = newVisibleIndex * this._itemSize;
127
- newRange.start = Math.floor(firstVisibleIndex);
128
- }
129
- newRange.end = Math.max(0, Math.min(dataLength, newRange.start + maxVisibleItems));
130
- }
131
- const startBuffer = scrollOffset - newRange.start * this._itemSize;
132
- if (startBuffer < this._minBufferPx && newRange.start != 0) {
133
- const expandStart = Math.ceil((this._maxBufferPx - startBuffer) / this._itemSize);
134
- newRange.start = Math.max(0, newRange.start - expandStart);
135
- newRange.end = Math.min(dataLength, Math.ceil(firstVisibleIndex + (viewportSize + this._minBufferPx) / this._itemSize));
136
- }
137
- else {
138
- const endBuffer = newRange.end * this._itemSize - (scrollOffset + viewportSize);
139
- if (endBuffer < this._minBufferPx && newRange.end != dataLength) {
140
- const expandEnd = Math.ceil((this._maxBufferPx - endBuffer) / this._itemSize);
141
- if (expandEnd > 0) {
142
- newRange.end = Math.min(dataLength, newRange.end + expandEnd);
143
- newRange.start = Math.max(0, Math.floor(firstVisibleIndex - this._minBufferPx / this._itemSize));
144
- }
145
- }
146
- }
147
- this._viewport.setRenderedRange(newRange);
148
- this._viewport.setRenderedContentOffset(Math.round(this._itemSize * newRange.start));
149
- this._scrolledIndexChange.next(Math.floor(firstVisibleIndex));
104
+ }
150
105
  }
106
+ this._viewport.setRenderedRange(newRange);
107
+ this._viewport.setRenderedContentOffset(Math.round(this._itemSize * newRange.start));
108
+ this._scrolledIndexChange.next(Math.floor(firstVisibleIndex));
109
+ }
151
110
  }
152
- /**
153
- * Provider factory for `FixedSizeVirtualScrollStrategy` that simply extracts the already created
154
- * `FixedSizeVirtualScrollStrategy` from the given directive.
155
- * @param fixedSizeDir The instance of `CdkFixedSizeVirtualScroll` to extract the
156
- * `FixedSizeVirtualScrollStrategy` from.
157
- */
158
111
  function _fixedSizeVirtualScrollStrategyFactory(fixedSizeDir) {
159
- return fixedSizeDir._scrollStrategy;
112
+ return fixedSizeDir._scrollStrategy;
160
113
  }
161
- /** A virtual scroll strategy that supports fixed-size items. */
162
114
  class CdkFixedSizeVirtualScroll {
163
- /** The size of the items in the list (in pixels). */
164
- get itemSize() {
165
- return this._itemSize;
166
- }
167
- set itemSize(value) {
168
- this._itemSize = coerceNumberProperty(value);
169
- }
170
- _itemSize = 20;
171
- /**
172
- * The minimum amount of buffer rendered beyond the viewport (in pixels).
173
- * If the amount of buffer dips below this number, more items will be rendered. Defaults to 100px.
174
- */
175
- get minBufferPx() {
176
- return this._minBufferPx;
177
- }
178
- set minBufferPx(value) {
179
- this._minBufferPx = coerceNumberProperty(value);
180
- }
181
- _minBufferPx = 100;
182
- /**
183
- * The number of pixels worth of buffer to render for when rendering new items. Defaults to 200px.
184
- */
185
- get maxBufferPx() {
186
- return this._maxBufferPx;
187
- }
188
- set maxBufferPx(value) {
189
- this._maxBufferPx = coerceNumberProperty(value);
190
- }
191
- _maxBufferPx = 200;
192
- /** The scroll strategy used by this directive. */
193
- _scrollStrategy = new FixedSizeVirtualScrollStrategy(this.itemSize, this.minBufferPx, this.maxBufferPx);
194
- ngOnChanges() {
195
- this._scrollStrategy.updateItemAndBufferSize(this.itemSize, this.minBufferPx, this.maxBufferPx);
196
- }
197
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CdkFixedSizeVirtualScroll, deps: [], target: i0.ɵɵFactoryTarget.Directive });
198
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: CdkFixedSizeVirtualScroll, isStandalone: true, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: { itemSize: "itemSize", minBufferPx: "minBufferPx", maxBufferPx: "maxBufferPx" }, providers: [
199
- {
200
- provide: VIRTUAL_SCROLL_STRATEGY,
201
- useFactory: _fixedSizeVirtualScrollStrategyFactory,
202
- deps: [forwardRef(() => CdkFixedSizeVirtualScroll)],
203
- },
204
- ], usesOnChanges: true, ngImport: i0 });
115
+ get itemSize() {
116
+ return this._itemSize;
117
+ }
118
+ set itemSize(value) {
119
+ this._itemSize = coerceNumberProperty(value);
120
+ }
121
+ _itemSize = 20;
122
+ get minBufferPx() {
123
+ return this._minBufferPx;
124
+ }
125
+ set minBufferPx(value) {
126
+ this._minBufferPx = coerceNumberProperty(value);
127
+ }
128
+ _minBufferPx = 100;
129
+ get maxBufferPx() {
130
+ return this._maxBufferPx;
131
+ }
132
+ set maxBufferPx(value) {
133
+ this._maxBufferPx = coerceNumberProperty(value);
134
+ }
135
+ _maxBufferPx = 200;
136
+ _scrollStrategy = new FixedSizeVirtualScrollStrategy(this.itemSize, this.minBufferPx, this.maxBufferPx);
137
+ ngOnChanges() {
138
+ this._scrollStrategy.updateItemAndBufferSize(this.itemSize, this.minBufferPx, this.maxBufferPx);
139
+ }
140
+ static ɵfac = i0.ɵɵngDeclareFactory({
141
+ minVersion: "12.0.0",
142
+ version: "20.2.0-next.2",
143
+ ngImport: i0,
144
+ type: CdkFixedSizeVirtualScroll,
145
+ deps: [],
146
+ target: i0.ɵɵFactoryTarget.Directive
147
+ });
148
+ static ɵdir = i0.ɵɵngDeclareDirective({
149
+ minVersion: "14.0.0",
150
+ version: "20.2.0-next.2",
151
+ type: CdkFixedSizeVirtualScroll,
152
+ isStandalone: true,
153
+ selector: "cdk-virtual-scroll-viewport[itemSize]",
154
+ inputs: {
155
+ itemSize: "itemSize",
156
+ minBufferPx: "minBufferPx",
157
+ maxBufferPx: "maxBufferPx"
158
+ },
159
+ providers: [{
160
+ provide: VIRTUAL_SCROLL_STRATEGY,
161
+ useFactory: _fixedSizeVirtualScrollStrategyFactory,
162
+ deps: [forwardRef(() => CdkFixedSizeVirtualScroll)]
163
+ }],
164
+ usesOnChanges: true,
165
+ ngImport: i0
166
+ });
205
167
  }
206
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CdkFixedSizeVirtualScroll, decorators: [{
207
- type: Directive,
208
- args: [{
209
- selector: 'cdk-virtual-scroll-viewport[itemSize]',
210
- providers: [
211
- {
212
- provide: VIRTUAL_SCROLL_STRATEGY,
213
- useFactory: _fixedSizeVirtualScrollStrategyFactory,
214
- deps: [forwardRef(() => CdkFixedSizeVirtualScroll)],
215
- },
216
- ],
217
- }]
218
- }], propDecorators: { itemSize: [{
219
- type: Input
220
- }], minBufferPx: [{
221
- type: Input
222
- }], maxBufferPx: [{
223
- type: Input
224
- }] } });
168
+ i0.ɵɵngDeclareClassMetadata({
169
+ minVersion: "12.0.0",
170
+ version: "20.2.0-next.2",
171
+ ngImport: i0,
172
+ type: CdkFixedSizeVirtualScroll,
173
+ decorators: [{
174
+ type: Directive,
175
+ args: [{
176
+ selector: 'cdk-virtual-scroll-viewport[itemSize]',
177
+ providers: [{
178
+ provide: VIRTUAL_SCROLL_STRATEGY,
179
+ useFactory: _fixedSizeVirtualScrollStrategyFactory,
180
+ deps: [forwardRef(() => CdkFixedSizeVirtualScroll)]
181
+ }]
182
+ }]
183
+ }],
184
+ propDecorators: {
185
+ itemSize: [{
186
+ type: Input
187
+ }],
188
+ minBufferPx: [{
189
+ type: Input
190
+ }],
191
+ maxBufferPx: [{
192
+ type: Input
193
+ }]
194
+ }
195
+ });
225
196
 
226
- /** Time in ms to throttle the scrolling events by default. */
227
197
  const DEFAULT_SCROLL_TIME = 20;
228
- /**
229
- * Service contained all registered Scrollable references and emits an event when any one of the
230
- * Scrollable references emit a scrolled event.
231
- */
232
198
  class ScrollDispatcher {
233
- _ngZone = inject(NgZone);
234
- _platform = inject(Platform);
235
- _renderer = inject(RendererFactory2).createRenderer(null, null);
236
- _cleanupGlobalListener;
237
- constructor() { }
238
- /** Subject for notifying that a registered scrollable reference element has been scrolled. */
239
- _scrolled = new Subject();
240
- /** Keeps track of the amount of subscriptions to `scrolled`. Used for cleaning up afterwards. */
241
- _scrolledCount = 0;
242
- /**
243
- * Map of all the scrollable references that are registered with the service and their
244
- * scroll event subscriptions.
245
- */
246
- scrollContainers = new Map();
247
- /**
248
- * Registers a scrollable instance with the service and listens for its scrolled events. When the
249
- * scrollable is scrolled, the service emits the event to its scrolled observable.
250
- * @param scrollable Scrollable instance to be registered.
251
- */
252
- register(scrollable) {
253
- if (!this.scrollContainers.has(scrollable)) {
254
- this.scrollContainers.set(scrollable, scrollable.elementScrolled().subscribe(() => this._scrolled.next(scrollable)));
255
- }
256
- }
257
- /**
258
- * De-registers a Scrollable reference and unsubscribes from its scroll event observable.
259
- * @param scrollable Scrollable instance to be deregistered.
260
- */
261
- deregister(scrollable) {
262
- const scrollableReference = this.scrollContainers.get(scrollable);
263
- if (scrollableReference) {
264
- scrollableReference.unsubscribe();
265
- this.scrollContainers.delete(scrollable);
199
+ _ngZone = inject(NgZone);
200
+ _platform = inject(Platform);
201
+ _renderer = inject(RendererFactory2).createRenderer(null, null);
202
+ _cleanupGlobalListener;
203
+ constructor() {}
204
+ _scrolled = new Subject();
205
+ _scrolledCount = 0;
206
+ scrollContainers = new Map();
207
+ register(scrollable) {
208
+ if (!this.scrollContainers.has(scrollable)) {
209
+ this.scrollContainers.set(scrollable, scrollable.elementScrolled().subscribe(() => this._scrolled.next(scrollable)));
210
+ }
211
+ }
212
+ deregister(scrollable) {
213
+ const scrollableReference = this.scrollContainers.get(scrollable);
214
+ if (scrollableReference) {
215
+ scrollableReference.unsubscribe();
216
+ this.scrollContainers.delete(scrollable);
217
+ }
218
+ }
219
+ scrolled(auditTimeInMs = DEFAULT_SCROLL_TIME) {
220
+ if (!this._platform.isBrowser) {
221
+ return of();
222
+ }
223
+ return new Observable(observer => {
224
+ if (!this._cleanupGlobalListener) {
225
+ this._cleanupGlobalListener = this._ngZone.runOutsideAngular(() => this._renderer.listen('document', 'scroll', () => this._scrolled.next()));
226
+ }
227
+ const subscription = auditTimeInMs > 0 ? this._scrolled.pipe(auditTime(auditTimeInMs)).subscribe(observer) : this._scrolled.subscribe(observer);
228
+ this._scrolledCount++;
229
+ return () => {
230
+ subscription.unsubscribe();
231
+ this._scrolledCount--;
232
+ if (!this._scrolledCount) {
233
+ this._cleanupGlobalListener?.();
234
+ this._cleanupGlobalListener = undefined;
266
235
  }
267
- }
268
- /**
269
- * Returns an observable that emits an event whenever any of the registered Scrollable
270
- * references (or window, document, or body) fire a scrolled event. Can provide a time in ms
271
- * to override the default "throttle" time.
272
- *
273
- * **Note:** in order to avoid hitting change detection for every scroll event,
274
- * all of the events emitted from this stream will be run outside the Angular zone.
275
- * If you need to update any data bindings as a result of a scroll event, you have
276
- * to run the callback using `NgZone.run`.
277
- */
278
- scrolled(auditTimeInMs = DEFAULT_SCROLL_TIME) {
279
- if (!this._platform.isBrowser) {
280
- return of();
281
- }
282
- return new Observable((observer) => {
283
- if (!this._cleanupGlobalListener) {
284
- this._cleanupGlobalListener = this._ngZone.runOutsideAngular(() => this._renderer.listen('document', 'scroll', () => this._scrolled.next()));
285
- }
286
- // In the case of a 0ms delay, use an observable without auditTime
287
- // since it does add a perceptible delay in processing overhead.
288
- const subscription = auditTimeInMs > 0
289
- ? this._scrolled.pipe(auditTime(auditTimeInMs)).subscribe(observer)
290
- : this._scrolled.subscribe(observer);
291
- this._scrolledCount++;
292
- return () => {
293
- subscription.unsubscribe();
294
- this._scrolledCount--;
295
- if (!this._scrolledCount) {
296
- this._cleanupGlobalListener?.();
297
- this._cleanupGlobalListener = undefined;
298
- }
299
- };
300
- });
301
- }
302
- ngOnDestroy() {
303
- this._cleanupGlobalListener?.();
304
- this._cleanupGlobalListener = undefined;
305
- this.scrollContainers.forEach((_, container) => this.deregister(container));
306
- this._scrolled.complete();
307
- }
308
- /**
309
- * Returns an observable that emits whenever any of the
310
- * scrollable ancestors of an element are scrolled.
311
- * @param elementOrElementRef Element whose ancestors to listen for.
312
- * @param auditTimeInMs Time to throttle the scroll events.
313
- */
314
- ancestorScrolled(elementOrElementRef, auditTimeInMs) {
315
- const ancestors = this.getAncestorScrollContainers(elementOrElementRef);
316
- return this.scrolled(auditTimeInMs).pipe(filter(target => !target || ancestors.indexOf(target) > -1));
317
- }
318
- /** Returns all registered Scrollables that contain the provided element. */
319
- getAncestorScrollContainers(elementOrElementRef) {
320
- const scrollingContainers = [];
321
- this.scrollContainers.forEach((_subscription, scrollable) => {
322
- if (this._scrollableContainsElement(scrollable, elementOrElementRef)) {
323
- scrollingContainers.push(scrollable);
324
- }
325
- });
326
- return scrollingContainers;
327
- }
328
- /** Returns true if the element is contained within the provided Scrollable. */
329
- _scrollableContainsElement(scrollable, elementOrElementRef) {
330
- let element = coerceElement(elementOrElementRef);
331
- let scrollableElement = scrollable.getElementRef().nativeElement;
332
- // Traverse through the element parents until we reach null, checking if any of the elements
333
- // are the scrollable's element.
334
- do {
335
- if (element == scrollableElement) {
336
- return true;
337
- }
338
- } while ((element = element.parentElement));
339
- return false;
340
- }
341
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: ScrollDispatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
342
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: ScrollDispatcher, providedIn: 'root' });
236
+ };
237
+ });
238
+ }
239
+ ngOnDestroy() {
240
+ this._cleanupGlobalListener?.();
241
+ this._cleanupGlobalListener = undefined;
242
+ this.scrollContainers.forEach((_, container) => this.deregister(container));
243
+ this._scrolled.complete();
244
+ }
245
+ ancestorScrolled(elementOrElementRef, auditTimeInMs) {
246
+ const ancestors = this.getAncestorScrollContainers(elementOrElementRef);
247
+ return this.scrolled(auditTimeInMs).pipe(filter(target => !target || ancestors.indexOf(target) > -1));
248
+ }
249
+ getAncestorScrollContainers(elementOrElementRef) {
250
+ const scrollingContainers = [];
251
+ this.scrollContainers.forEach((_subscription, scrollable) => {
252
+ if (this._scrollableContainsElement(scrollable, elementOrElementRef)) {
253
+ scrollingContainers.push(scrollable);
254
+ }
255
+ });
256
+ return scrollingContainers;
257
+ }
258
+ _scrollableContainsElement(scrollable, elementOrElementRef) {
259
+ let element = coerceElement(elementOrElementRef);
260
+ let scrollableElement = scrollable.getElementRef().nativeElement;
261
+ do {
262
+ if (element == scrollableElement) {
263
+ return true;
264
+ }
265
+ } while (element = element.parentElement);
266
+ return false;
267
+ }
268
+ static ɵfac = i0.ɵɵngDeclareFactory({
269
+ minVersion: "12.0.0",
270
+ version: "20.2.0-next.2",
271
+ ngImport: i0,
272
+ type: ScrollDispatcher,
273
+ deps: [],
274
+ target: i0.ɵɵFactoryTarget.Injectable
275
+ });
276
+ static ɵprov = i0.ɵɵngDeclareInjectable({
277
+ minVersion: "12.0.0",
278
+ version: "20.2.0-next.2",
279
+ ngImport: i0,
280
+ type: ScrollDispatcher,
281
+ providedIn: 'root'
282
+ });
343
283
  }
344
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: ScrollDispatcher, decorators: [{
345
- type: Injectable,
346
- args: [{ providedIn: 'root' }]
347
- }], ctorParameters: () => [] });
284
+ i0.ɵɵngDeclareClassMetadata({
285
+ minVersion: "12.0.0",
286
+ version: "20.2.0-next.2",
287
+ ngImport: i0,
288
+ type: ScrollDispatcher,
289
+ decorators: [{
290
+ type: Injectable,
291
+ args: [{
292
+ providedIn: 'root'
293
+ }]
294
+ }],
295
+ ctorParameters: () => []
296
+ });
348
297
 
349
- /**
350
- * Sends an event when the directive's element is scrolled. Registers itself with the
351
- * ScrollDispatcher service to include itself as part of its collection of scrolling events that it
352
- * can be listened to through the service.
353
- */
354
298
  class CdkScrollable {
355
- elementRef = inject(ElementRef);
356
- scrollDispatcher = inject(ScrollDispatcher);
357
- ngZone = inject(NgZone);
358
- dir = inject(Directionality, { optional: true });
359
- _scrollElement = this.elementRef.nativeElement;
360
- _destroyed = new Subject();
361
- _renderer = inject(Renderer2);
362
- _cleanupScroll;
363
- _elementScrolled = new Subject();
364
- constructor() { }
365
- ngOnInit() {
366
- this._cleanupScroll = this.ngZone.runOutsideAngular(() => this._renderer.listen(this._scrollElement, 'scroll', event => this._elementScrolled.next(event)));
367
- this.scrollDispatcher.register(this);
368
- }
369
- ngOnDestroy() {
370
- this._cleanupScroll?.();
371
- this._elementScrolled.complete();
372
- this.scrollDispatcher.deregister(this);
373
- this._destroyed.next();
374
- this._destroyed.complete();
375
- }
376
- /** Returns observable that emits when a scroll event is fired on the host element. */
377
- elementScrolled() {
378
- return this._elementScrolled;
379
- }
380
- /** Gets the ElementRef for the viewport. */
381
- getElementRef() {
382
- return this.elementRef;
383
- }
384
- /**
385
- * Scrolls to the specified offsets. This is a normalized version of the browser's native scrollTo
386
- * method, since browsers are not consistent about what scrollLeft means in RTL. For this method
387
- * left and right always refer to the left and right side of the scrolling container irrespective
388
- * of the layout direction. start and end refer to left and right in an LTR context and vice-versa
389
- * in an RTL context.
390
- * @param options specified the offsets to scroll to.
391
- */
392
- scrollTo(options) {
393
- const el = this.elementRef.nativeElement;
394
- const isRtl = this.dir && this.dir.value == 'rtl';
395
- // Rewrite start & end offsets as right or left offsets.
396
- if (options.left == null) {
397
- options.left = isRtl ? options.end : options.start;
398
- }
399
- if (options.right == null) {
400
- options.right = isRtl ? options.start : options.end;
401
- }
402
- // Rewrite the bottom offset as a top offset.
403
- if (options.bottom != null) {
404
- options.top =
405
- el.scrollHeight - el.clientHeight - options.bottom;
406
- }
407
- // Rewrite the right offset as a left offset.
408
- if (isRtl && getRtlScrollAxisType() != RtlScrollAxisType.NORMAL) {
409
- if (options.left != null) {
410
- options.right =
411
- el.scrollWidth - el.clientWidth - options.left;
412
- }
413
- if (getRtlScrollAxisType() == RtlScrollAxisType.INVERTED) {
414
- options.left = options.right;
415
- }
416
- else if (getRtlScrollAxisType() == RtlScrollAxisType.NEGATED) {
417
- options.left = options.right ? -options.right : options.right;
418
- }
419
- }
420
- else {
421
- if (options.right != null) {
422
- options.left =
423
- el.scrollWidth - el.clientWidth - options.right;
424
- }
425
- }
426
- this._applyScrollToOptions(options);
427
- }
428
- _applyScrollToOptions(options) {
429
- const el = this.elementRef.nativeElement;
430
- if (supportsScrollBehavior()) {
431
- el.scrollTo(options);
432
- }
433
- else {
434
- if (options.top != null) {
435
- el.scrollTop = options.top;
436
- }
437
- if (options.left != null) {
438
- el.scrollLeft = options.left;
439
- }
440
- }
441
- }
442
- /**
443
- * Measures the scroll offset relative to the specified edge of the viewport. This method can be
444
- * used instead of directly checking scrollLeft or scrollTop, since browsers are not consistent
445
- * about what scrollLeft means in RTL. The values returned by this method are normalized such that
446
- * left and right always refer to the left and right side of the scrolling container irrespective
447
- * of the layout direction. start and end refer to left and right in an LTR context and vice-versa
448
- * in an RTL context.
449
- * @param from The edge to measure from.
450
- */
451
- measureScrollOffset(from) {
452
- const LEFT = 'left';
453
- const RIGHT = 'right';
454
- const el = this.elementRef.nativeElement;
455
- if (from == 'top') {
456
- return el.scrollTop;
457
- }
458
- if (from == 'bottom') {
459
- return el.scrollHeight - el.clientHeight - el.scrollTop;
460
- }
461
- // Rewrite start & end as left or right offsets.
462
- const isRtl = this.dir && this.dir.value == 'rtl';
463
- if (from == 'start') {
464
- from = isRtl ? RIGHT : LEFT;
465
- }
466
- else if (from == 'end') {
467
- from = isRtl ? LEFT : RIGHT;
468
- }
469
- if (isRtl && getRtlScrollAxisType() == RtlScrollAxisType.INVERTED) {
470
- // For INVERTED, scrollLeft is (scrollWidth - clientWidth) when scrolled all the way left and
471
- // 0 when scrolled all the way right.
472
- if (from == LEFT) {
473
- return el.scrollWidth - el.clientWidth - el.scrollLeft;
474
- }
475
- else {
476
- return el.scrollLeft;
477
- }
478
- }
479
- else if (isRtl && getRtlScrollAxisType() == RtlScrollAxisType.NEGATED) {
480
- // For NEGATED, scrollLeft is -(scrollWidth - clientWidth) when scrolled all the way left and
481
- // 0 when scrolled all the way right.
482
- if (from == LEFT) {
483
- return el.scrollLeft + el.scrollWidth - el.clientWidth;
484
- }
485
- else {
486
- return -el.scrollLeft;
487
- }
488
- }
489
- else {
490
- // For NORMAL, as well as non-RTL contexts, scrollLeft is 0 when scrolled all the way left and
491
- // (scrollWidth - clientWidth) when scrolled all the way right.
492
- if (from == LEFT) {
493
- return el.scrollLeft;
494
- }
495
- else {
496
- return el.scrollWidth - el.clientWidth - el.scrollLeft;
497
- }
498
- }
499
- }
500
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CdkScrollable, deps: [], target: i0.ɵɵFactoryTarget.Directive });
501
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: CdkScrollable, isStandalone: true, selector: "[cdk-scrollable], [cdkScrollable]", ngImport: i0 });
299
+ elementRef = inject(ElementRef);
300
+ scrollDispatcher = inject(ScrollDispatcher);
301
+ ngZone = inject(NgZone);
302
+ dir = inject(Directionality, {
303
+ optional: true
304
+ });
305
+ _scrollElement = this.elementRef.nativeElement;
306
+ _destroyed = new Subject();
307
+ _renderer = inject(Renderer2);
308
+ _cleanupScroll;
309
+ _elementScrolled = new Subject();
310
+ constructor() {}
311
+ ngOnInit() {
312
+ this._cleanupScroll = this.ngZone.runOutsideAngular(() => this._renderer.listen(this._scrollElement, 'scroll', event => this._elementScrolled.next(event)));
313
+ this.scrollDispatcher.register(this);
314
+ }
315
+ ngOnDestroy() {
316
+ this._cleanupScroll?.();
317
+ this._elementScrolled.complete();
318
+ this.scrollDispatcher.deregister(this);
319
+ this._destroyed.next();
320
+ this._destroyed.complete();
321
+ }
322
+ elementScrolled() {
323
+ return this._elementScrolled;
324
+ }
325
+ getElementRef() {
326
+ return this.elementRef;
327
+ }
328
+ scrollTo(options) {
329
+ const el = this.elementRef.nativeElement;
330
+ const isRtl = this.dir && this.dir.value == 'rtl';
331
+ if (options.left == null) {
332
+ options.left = isRtl ? options.end : options.start;
333
+ }
334
+ if (options.right == null) {
335
+ options.right = isRtl ? options.start : options.end;
336
+ }
337
+ if (options.bottom != null) {
338
+ options.top = el.scrollHeight - el.clientHeight - options.bottom;
339
+ }
340
+ if (isRtl && getRtlScrollAxisType() != RtlScrollAxisType.NORMAL) {
341
+ if (options.left != null) {
342
+ options.right = el.scrollWidth - el.clientWidth - options.left;
343
+ }
344
+ if (getRtlScrollAxisType() == RtlScrollAxisType.INVERTED) {
345
+ options.left = options.right;
346
+ } else if (getRtlScrollAxisType() == RtlScrollAxisType.NEGATED) {
347
+ options.left = options.right ? -options.right : options.right;
348
+ }
349
+ } else {
350
+ if (options.right != null) {
351
+ options.left = el.scrollWidth - el.clientWidth - options.right;
352
+ }
353
+ }
354
+ this._applyScrollToOptions(options);
355
+ }
356
+ _applyScrollToOptions(options) {
357
+ const el = this.elementRef.nativeElement;
358
+ if (supportsScrollBehavior()) {
359
+ el.scrollTo(options);
360
+ } else {
361
+ if (options.top != null) {
362
+ el.scrollTop = options.top;
363
+ }
364
+ if (options.left != null) {
365
+ el.scrollLeft = options.left;
366
+ }
367
+ }
368
+ }
369
+ measureScrollOffset(from) {
370
+ const LEFT = 'left';
371
+ const RIGHT = 'right';
372
+ const el = this.elementRef.nativeElement;
373
+ if (from == 'top') {
374
+ return el.scrollTop;
375
+ }
376
+ if (from == 'bottom') {
377
+ return el.scrollHeight - el.clientHeight - el.scrollTop;
378
+ }
379
+ const isRtl = this.dir && this.dir.value == 'rtl';
380
+ if (from == 'start') {
381
+ from = isRtl ? RIGHT : LEFT;
382
+ } else if (from == 'end') {
383
+ from = isRtl ? LEFT : RIGHT;
384
+ }
385
+ if (isRtl && getRtlScrollAxisType() == RtlScrollAxisType.INVERTED) {
386
+ if (from == LEFT) {
387
+ return el.scrollWidth - el.clientWidth - el.scrollLeft;
388
+ } else {
389
+ return el.scrollLeft;
390
+ }
391
+ } else if (isRtl && getRtlScrollAxisType() == RtlScrollAxisType.NEGATED) {
392
+ if (from == LEFT) {
393
+ return el.scrollLeft + el.scrollWidth - el.clientWidth;
394
+ } else {
395
+ return -el.scrollLeft;
396
+ }
397
+ } else {
398
+ if (from == LEFT) {
399
+ return el.scrollLeft;
400
+ } else {
401
+ return el.scrollWidth - el.clientWidth - el.scrollLeft;
402
+ }
403
+ }
404
+ }
405
+ static ɵfac = i0.ɵɵngDeclareFactory({
406
+ minVersion: "12.0.0",
407
+ version: "20.2.0-next.2",
408
+ ngImport: i0,
409
+ type: CdkScrollable,
410
+ deps: [],
411
+ target: i0.ɵɵFactoryTarget.Directive
412
+ });
413
+ static ɵdir = i0.ɵɵngDeclareDirective({
414
+ minVersion: "14.0.0",
415
+ version: "20.2.0-next.2",
416
+ type: CdkScrollable,
417
+ isStandalone: true,
418
+ selector: "[cdk-scrollable], [cdkScrollable]",
419
+ ngImport: i0
420
+ });
502
421
  }
503
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CdkScrollable, decorators: [{
504
- type: Directive,
505
- args: [{
506
- selector: '[cdk-scrollable], [cdkScrollable]',
507
- }]
508
- }], ctorParameters: () => [] });
422
+ i0.ɵɵngDeclareClassMetadata({
423
+ minVersion: "12.0.0",
424
+ version: "20.2.0-next.2",
425
+ ngImport: i0,
426
+ type: CdkScrollable,
427
+ decorators: [{
428
+ type: Directive,
429
+ args: [{
430
+ selector: '[cdk-scrollable], [cdkScrollable]'
431
+ }]
432
+ }],
433
+ ctorParameters: () => []
434
+ });
509
435
 
510
- /** Time in ms to throttle the resize events by default. */
511
436
  const DEFAULT_RESIZE_TIME = 20;
512
- /**
513
- * Simple utility for getting the bounds of the browser viewport.
514
- * @docs-private
515
- */
516
437
  class ViewportRuler {
517
- _platform = inject(Platform);
518
- _listeners;
519
- /** Cached viewport dimensions. */
520
- _viewportSize;
521
- /** Stream of viewport change events. */
522
- _change = new Subject();
523
- /** Used to reference correct document/window */
524
- _document = inject(DOCUMENT);
525
- constructor() {
526
- const ngZone = inject(NgZone);
527
- const renderer = inject(RendererFactory2).createRenderer(null, null);
528
- ngZone.runOutsideAngular(() => {
529
- if (this._platform.isBrowser) {
530
- const changeListener = (event) => this._change.next(event);
531
- this._listeners = [
532
- renderer.listen('window', 'resize', changeListener),
533
- renderer.listen('window', 'orientationchange', changeListener),
534
- ];
535
- }
536
- // Clear the cached position so that the viewport is re-measured next time it is required.
537
- // We don't need to keep track of the subscription, because it is completed on destroy.
538
- this.change().subscribe(() => (this._viewportSize = null));
539
- });
540
- }
541
- ngOnDestroy() {
542
- this._listeners?.forEach(cleanup => cleanup());
543
- this._change.complete();
544
- }
545
- /** Returns the viewport's width and height. */
546
- getViewportSize() {
547
- if (!this._viewportSize) {
548
- this._updateViewportSize();
549
- }
550
- const output = { width: this._viewportSize.width, height: this._viewportSize.height };
551
- // If we're not on a browser, don't cache the size since it'll be mocked out anyway.
552
- if (!this._platform.isBrowser) {
553
- this._viewportSize = null;
554
- }
555
- return output;
556
- }
557
- /** Gets a DOMRect for the viewport's bounds. */
558
- getViewportRect() {
559
- // Use the document element's bounding rect rather than the window scroll properties
560
- // (e.g. pageYOffset, scrollY) due to in issue in Chrome and IE where window scroll
561
- // properties and client coordinates (boundingClientRect, clientX/Y, etc.) are in different
562
- // conceptual viewports. Under most circumstances these viewports are equivalent, but they
563
- // can disagree when the page is pinch-zoomed (on devices that support touch).
564
- // See https://bugs.chromium.org/p/chromium/issues/detail?id=489206#c4
565
- // We use the documentElement instead of the body because, by default (without a css reset)
566
- // browsers typically give the document body an 8px margin, which is not included in
567
- // getBoundingClientRect().
568
- const scrollPosition = this.getViewportScrollPosition();
569
- const { width, height } = this.getViewportSize();
570
- return {
571
- top: scrollPosition.top,
572
- left: scrollPosition.left,
573
- bottom: scrollPosition.top + height,
574
- right: scrollPosition.left + width,
575
- height,
576
- width,
577
- };
578
- }
579
- /** Gets the (top, left) scroll position of the viewport. */
580
- getViewportScrollPosition() {
581
- // While we can get a reference to the fake document
582
- // during SSR, it doesn't have getBoundingClientRect.
583
- if (!this._platform.isBrowser) {
584
- return { top: 0, left: 0 };
585
- }
586
- // The top-left-corner of the viewport is determined by the scroll position of the document
587
- // body, normally just (scrollLeft, scrollTop). However, Chrome and Firefox disagree about
588
- // whether `document.body` or `document.documentElement` is the scrolled element, so reading
589
- // `scrollTop` and `scrollLeft` is inconsistent. However, using the bounding rect of
590
- // `document.documentElement` works consistently, where the `top` and `left` values will
591
- // equal negative the scroll position.
592
- const document = this._document;
593
- const window = this._getWindow();
594
- const documentElement = document.documentElement;
595
- const documentRect = documentElement.getBoundingClientRect();
596
- const top = -documentRect.top ||
597
- document.body.scrollTop ||
598
- window.scrollY ||
599
- documentElement.scrollTop ||
600
- 0;
601
- const left = -documentRect.left ||
602
- document.body.scrollLeft ||
603
- window.scrollX ||
604
- documentElement.scrollLeft ||
605
- 0;
606
- return { top, left };
607
- }
608
- /**
609
- * Returns a stream that emits whenever the size of the viewport changes.
610
- * This stream emits outside of the Angular zone.
611
- * @param throttleTime Time in milliseconds to throttle the stream.
612
- */
613
- change(throttleTime = DEFAULT_RESIZE_TIME) {
614
- return throttleTime > 0 ? this._change.pipe(auditTime(throttleTime)) : this._change;
615
- }
616
- /** Use defaultView of injected document if available or fallback to global window reference */
617
- _getWindow() {
618
- return this._document.defaultView || window;
619
- }
620
- /** Updates the cached viewport size. */
621
- _updateViewportSize() {
622
- const window = this._getWindow();
623
- this._viewportSize = this._platform.isBrowser
624
- ? { width: window.innerWidth, height: window.innerHeight }
625
- : { width: 0, height: 0 };
626
- }
627
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: ViewportRuler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
628
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: ViewportRuler, providedIn: 'root' });
438
+ _platform = inject(Platform);
439
+ _listeners;
440
+ _viewportSize;
441
+ _change = new Subject();
442
+ _document = inject(DOCUMENT);
443
+ constructor() {
444
+ const ngZone = inject(NgZone);
445
+ const renderer = inject(RendererFactory2).createRenderer(null, null);
446
+ ngZone.runOutsideAngular(() => {
447
+ if (this._platform.isBrowser) {
448
+ const changeListener = event => this._change.next(event);
449
+ this._listeners = [renderer.listen('window', 'resize', changeListener), renderer.listen('window', 'orientationchange', changeListener)];
450
+ }
451
+ this.change().subscribe(() => this._viewportSize = null);
452
+ });
453
+ }
454
+ ngOnDestroy() {
455
+ this._listeners?.forEach(cleanup => cleanup());
456
+ this._change.complete();
457
+ }
458
+ getViewportSize() {
459
+ if (!this._viewportSize) {
460
+ this._updateViewportSize();
461
+ }
462
+ const output = {
463
+ width: this._viewportSize.width,
464
+ height: this._viewportSize.height
465
+ };
466
+ if (!this._platform.isBrowser) {
467
+ this._viewportSize = null;
468
+ }
469
+ return output;
470
+ }
471
+ getViewportRect() {
472
+ const scrollPosition = this.getViewportScrollPosition();
473
+ const {
474
+ width,
475
+ height
476
+ } = this.getViewportSize();
477
+ return {
478
+ top: scrollPosition.top,
479
+ left: scrollPosition.left,
480
+ bottom: scrollPosition.top + height,
481
+ right: scrollPosition.left + width,
482
+ height,
483
+ width
484
+ };
485
+ }
486
+ getViewportScrollPosition() {
487
+ if (!this._platform.isBrowser) {
488
+ return {
489
+ top: 0,
490
+ left: 0
491
+ };
492
+ }
493
+ const document = this._document;
494
+ const window = this._getWindow();
495
+ const documentElement = document.documentElement;
496
+ const documentRect = documentElement.getBoundingClientRect();
497
+ const top = -documentRect.top || document.body.scrollTop || window.scrollY || documentElement.scrollTop || 0;
498
+ const left = -documentRect.left || document.body.scrollLeft || window.scrollX || documentElement.scrollLeft || 0;
499
+ return {
500
+ top,
501
+ left
502
+ };
503
+ }
504
+ change(throttleTime = DEFAULT_RESIZE_TIME) {
505
+ return throttleTime > 0 ? this._change.pipe(auditTime(throttleTime)) : this._change;
506
+ }
507
+ _getWindow() {
508
+ return this._document.defaultView || window;
509
+ }
510
+ _updateViewportSize() {
511
+ const window = this._getWindow();
512
+ this._viewportSize = this._platform.isBrowser ? {
513
+ width: window.innerWidth,
514
+ height: window.innerHeight
515
+ } : {
516
+ width: 0,
517
+ height: 0
518
+ };
519
+ }
520
+ static ɵfac = i0.ɵɵngDeclareFactory({
521
+ minVersion: "12.0.0",
522
+ version: "20.2.0-next.2",
523
+ ngImport: i0,
524
+ type: ViewportRuler,
525
+ deps: [],
526
+ target: i0.ɵɵFactoryTarget.Injectable
527
+ });
528
+ static ɵprov = i0.ɵɵngDeclareInjectable({
529
+ minVersion: "12.0.0",
530
+ version: "20.2.0-next.2",
531
+ ngImport: i0,
532
+ type: ViewportRuler,
533
+ providedIn: 'root'
534
+ });
629
535
  }
630
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: ViewportRuler, decorators: [{
631
- type: Injectable,
632
- args: [{ providedIn: 'root' }]
633
- }], ctorParameters: () => [] });
536
+ i0.ɵɵngDeclareClassMetadata({
537
+ minVersion: "12.0.0",
538
+ version: "20.2.0-next.2",
539
+ ngImport: i0,
540
+ type: ViewportRuler,
541
+ decorators: [{
542
+ type: Injectable,
543
+ args: [{
544
+ providedIn: 'root'
545
+ }]
546
+ }],
547
+ ctorParameters: () => []
548
+ });
634
549
 
635
550
  const VIRTUAL_SCROLLABLE = new InjectionToken('VIRTUAL_SCROLLABLE');
636
- /**
637
- * Extending the `CdkScrollable` to be used as scrolling container for virtual scrolling.
638
- */
639
551
  class CdkVirtualScrollable extends CdkScrollable {
640
- constructor() {
641
- super();
642
- }
643
- /**
644
- * Measure the viewport size for the provided orientation.
645
- *
646
- * @param orientation The orientation to measure the size from.
647
- */
648
- measureViewportSize(orientation) {
649
- const viewportEl = this.elementRef.nativeElement;
650
- return orientation === 'horizontal' ? viewportEl.clientWidth : viewportEl.clientHeight;
651
- }
652
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CdkVirtualScrollable, deps: [], target: i0.ɵɵFactoryTarget.Directive });
653
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: CdkVirtualScrollable, isStandalone: true, usesInheritance: true, ngImport: i0 });
552
+ constructor() {
553
+ super();
554
+ }
555
+ measureViewportSize(orientation) {
556
+ const viewportEl = this.elementRef.nativeElement;
557
+ return orientation === 'horizontal' ? viewportEl.clientWidth : viewportEl.clientHeight;
558
+ }
559
+ static ɵfac = i0.ɵɵngDeclareFactory({
560
+ minVersion: "12.0.0",
561
+ version: "20.2.0-next.2",
562
+ ngImport: i0,
563
+ type: CdkVirtualScrollable,
564
+ deps: [],
565
+ target: i0.ɵɵFactoryTarget.Directive
566
+ });
567
+ static ɵdir = i0.ɵɵngDeclareDirective({
568
+ minVersion: "14.0.0",
569
+ version: "20.2.0-next.2",
570
+ type: CdkVirtualScrollable,
571
+ isStandalone: true,
572
+ usesInheritance: true,
573
+ ngImport: i0
574
+ });
654
575
  }
655
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CdkVirtualScrollable, decorators: [{
656
- type: Directive
657
- }], ctorParameters: () => [] });
576
+ i0.ɵɵngDeclareClassMetadata({
577
+ minVersion: "12.0.0",
578
+ version: "20.2.0-next.2",
579
+ ngImport: i0,
580
+ type: CdkVirtualScrollable,
581
+ decorators: [{
582
+ type: Directive
583
+ }],
584
+ ctorParameters: () => []
585
+ });
658
586
 
659
- /** Checks if the given ranges are equal. */
660
587
  function rangesEqual(r1, r2) {
661
- return r1.start == r2.start && r1.end == r2.end;
588
+ return r1.start == r2.start && r1.end == r2.end;
662
589
  }
663
- /**
664
- * Scheduler to be used for scroll events. Needs to fall back to
665
- * something that doesn't rely on requestAnimationFrame on environments
666
- * that don't support it (e.g. server-side rendering).
667
- */
668
590
  const SCROLL_SCHEDULER = typeof requestAnimationFrame !== 'undefined' ? animationFrameScheduler : asapScheduler;
669
- /** A viewport that virtualizes its scrolling with the help of `CdkVirtualForOf`. */
670
591
  class CdkVirtualScrollViewport extends CdkVirtualScrollable {
671
- elementRef = inject(ElementRef);
672
- _changeDetectorRef = inject(ChangeDetectorRef);
673
- _scrollStrategy = inject(VIRTUAL_SCROLL_STRATEGY, {
674
- optional: true,
592
+ elementRef = inject(ElementRef);
593
+ _changeDetectorRef = inject(ChangeDetectorRef);
594
+ _scrollStrategy = inject(VIRTUAL_SCROLL_STRATEGY, {
595
+ optional: true
596
+ });
597
+ scrollable = inject(VIRTUAL_SCROLLABLE, {
598
+ optional: true
599
+ });
600
+ _platform = inject(Platform);
601
+ _detachedSubject = new Subject();
602
+ _renderedRangeSubject = new Subject();
603
+ get orientation() {
604
+ return this._orientation;
605
+ }
606
+ set orientation(orientation) {
607
+ if (this._orientation !== orientation) {
608
+ this._orientation = orientation;
609
+ this._calculateSpacerSize();
610
+ }
611
+ }
612
+ _orientation = 'vertical';
613
+ appendOnly = false;
614
+ scrolledIndexChange = new Observable(observer => this._scrollStrategy.scrolledIndexChange.subscribe(index => Promise.resolve().then(() => this.ngZone.run(() => observer.next(index)))));
615
+ _contentWrapper;
616
+ renderedRangeStream = this._renderedRangeSubject;
617
+ _totalContentSize = 0;
618
+ _totalContentWidth = signal('', ...(ngDevMode ? [{
619
+ debugName: "_totalContentWidth"
620
+ }] : []));
621
+ _totalContentHeight = signal('', ...(ngDevMode ? [{
622
+ debugName: "_totalContentHeight"
623
+ }] : []));
624
+ _renderedContentTransform;
625
+ _renderedRange = {
626
+ start: 0,
627
+ end: 0
628
+ };
629
+ _dataLength = 0;
630
+ _viewportSize = 0;
631
+ _forOf;
632
+ _renderedContentOffset = 0;
633
+ _renderedContentOffsetNeedsRewrite = false;
634
+ _changeDetectionNeeded = signal(false, ...(ngDevMode ? [{
635
+ debugName: "_changeDetectionNeeded"
636
+ }] : []));
637
+ _runAfterChangeDetection = [];
638
+ _viewportChanges = Subscription.EMPTY;
639
+ _injector = inject(Injector);
640
+ _isDestroyed = false;
641
+ constructor() {
642
+ super();
643
+ const viewportRuler = inject(ViewportRuler);
644
+ if (!this._scrollStrategy && (typeof ngDevMode === 'undefined' || ngDevMode)) {
645
+ throw Error('Error: cdk-virtual-scroll-viewport requires the "itemSize" property to be set.');
646
+ }
647
+ this._viewportChanges = viewportRuler.change().subscribe(() => {
648
+ this.checkViewportSize();
675
649
  });
676
- scrollable = inject(VIRTUAL_SCROLLABLE, { optional: true });
677
- _platform = inject(Platform);
678
- /** Emits when the viewport is detached from a CdkVirtualForOf. */
679
- _detachedSubject = new Subject();
680
- /** Emits when the rendered range changes. */
681
- _renderedRangeSubject = new Subject();
682
- /** The direction the viewport scrolls. */
683
- get orientation() {
684
- return this._orientation;
685
- }
686
- set orientation(orientation) {
687
- if (this._orientation !== orientation) {
688
- this._orientation = orientation;
689
- this._calculateSpacerSize();
690
- }
691
- }
692
- _orientation = 'vertical';
693
- /**
694
- * Whether rendered items should persist in the DOM after scrolling out of view. By default, items
695
- * will be removed.
696
- */
697
- appendOnly = false;
698
- // Note: we don't use the typical EventEmitter here because we need to subscribe to the scroll
699
- // strategy lazily (i.e. only if the user is actually listening to the events). We do this because
700
- // depending on how the strategy calculates the scrolled index, it may come at a cost to
701
- // performance.
702
- /** Emits when the index of the first element visible in the viewport changes. */
703
- scrolledIndexChange = new Observable((observer) => this._scrollStrategy.scrolledIndexChange.subscribe(index => Promise.resolve().then(() => this.ngZone.run(() => observer.next(index)))));
704
- /** The element that wraps the rendered content. */
705
- _contentWrapper;
706
- /** A stream that emits whenever the rendered range changes. */
707
- renderedRangeStream = this._renderedRangeSubject;
708
- /**
709
- * The total size of all content (in pixels), including content that is not currently rendered.
710
- */
711
- _totalContentSize = 0;
712
- /** A string representing the `style.width` property value to be used for the spacer element. */
713
- _totalContentWidth = signal('', ...(ngDevMode ? [{ debugName: "_totalContentWidth" }] : []));
714
- /** A string representing the `style.height` property value to be used for the spacer element. */
715
- _totalContentHeight = signal('', ...(ngDevMode ? [{ debugName: "_totalContentHeight" }] : []));
716
- /**
717
- * The CSS transform applied to the rendered subset of items so that they appear within the bounds
718
- * of the visible viewport.
719
- */
720
- _renderedContentTransform;
721
- /** The currently rendered range of indices. */
722
- _renderedRange = { start: 0, end: 0 };
723
- /** The length of the data bound to this viewport (in number of items). */
724
- _dataLength = 0;
725
- /** The size of the viewport (in pixels). */
726
- _viewportSize = 0;
727
- /** the currently attached CdkVirtualScrollRepeater. */
728
- _forOf;
729
- /** The last rendered content offset that was set. */
730
- _renderedContentOffset = 0;
731
- /**
732
- * Whether the last rendered content offset was to the end of the content (and therefore needs to
733
- * be rewritten as an offset to the start of the content).
734
- */
735
- _renderedContentOffsetNeedsRewrite = false;
736
- _changeDetectionNeeded = signal(false, ...(ngDevMode ? [{ debugName: "_changeDetectionNeeded" }] : []));
737
- /** A list of functions to run after the next change detection cycle. */
738
- _runAfterChangeDetection = [];
739
- /** Subscription to changes in the viewport size. */
740
- _viewportChanges = Subscription.EMPTY;
741
- _injector = inject(Injector);
742
- _isDestroyed = false;
743
- constructor() {
744
- super();
745
- const viewportRuler = inject(ViewportRuler);
746
- if (!this._scrollStrategy && (typeof ngDevMode === 'undefined' || ngDevMode)) {
747
- throw Error('Error: cdk-virtual-scroll-viewport requires the "itemSize" property to be set.');
650
+ if (!this.scrollable) {
651
+ this.elementRef.nativeElement.classList.add('cdk-virtual-scrollable');
652
+ this.scrollable = this;
653
+ }
654
+ const ref = effect(() => {
655
+ if (this._changeDetectionNeeded()) {
656
+ this._doChangeDetection();
657
+ }
658
+ }, ...(ngDevMode ? [{
659
+ debugName: "ref",
660
+ injector: inject(ApplicationRef).injector
661
+ }] : [{
662
+ injector: inject(ApplicationRef).injector
663
+ }]));
664
+ inject(DestroyRef).onDestroy(() => void ref.destroy());
665
+ }
666
+ ngOnInit() {
667
+ if (!this._platform.isBrowser) {
668
+ return;
669
+ }
670
+ if (this.scrollable === this) {
671
+ super.ngOnInit();
672
+ }
673
+ this.ngZone.runOutsideAngular(() => Promise.resolve().then(() => {
674
+ this._measureViewportSize();
675
+ this._scrollStrategy.attach(this);
676
+ this.scrollable.elementScrolled().pipe(startWith(null), auditTime(0, SCROLL_SCHEDULER), takeUntil(this._destroyed)).subscribe(() => this._scrollStrategy.onContentScrolled());
677
+ this._markChangeDetectionNeeded();
678
+ }));
679
+ }
680
+ ngOnDestroy() {
681
+ this.detach();
682
+ this._scrollStrategy.detach();
683
+ this._renderedRangeSubject.complete();
684
+ this._detachedSubject.complete();
685
+ this._viewportChanges.unsubscribe();
686
+ this._isDestroyed = true;
687
+ super.ngOnDestroy();
688
+ }
689
+ attach(forOf) {
690
+ if (this._forOf && (typeof ngDevMode === 'undefined' || ngDevMode)) {
691
+ throw Error('CdkVirtualScrollViewport is already attached.');
692
+ }
693
+ this.ngZone.runOutsideAngular(() => {
694
+ this._forOf = forOf;
695
+ this._forOf.dataStream.pipe(takeUntil(this._detachedSubject)).subscribe(data => {
696
+ const newLength = data.length;
697
+ if (newLength !== this._dataLength) {
698
+ this._dataLength = newLength;
699
+ this._scrollStrategy.onDataLengthChanged();
748
700
  }
749
- this._viewportChanges = viewportRuler.change().subscribe(() => {
750
- this.checkViewportSize();
751
- });
752
- if (!this.scrollable) {
753
- // No scrollable is provided, so the virtual-scroll-viewport needs to become a scrollable
754
- this.elementRef.nativeElement.classList.add('cdk-virtual-scrollable');
755
- this.scrollable = this;
756
- }
757
- const ref = effect(() => {
758
- if (this._changeDetectionNeeded()) {
759
- this._doChangeDetection();
760
- }
761
- }, ...(ngDevMode ? [{ debugName: "ref", injector: inject(ApplicationRef).injector }] : [
762
- // Using ApplicationRef injector is important here because we want this to be a root
763
- // effect that runs before change detection of any application views (since we're depending on markForCheck marking parents dirty)
764
- { injector: inject(ApplicationRef).injector }]));
765
- inject(DestroyRef).onDestroy(() => void ref.destroy());
766
- }
767
- ngOnInit() {
768
- // Scrolling depends on the element dimensions which we can't get during SSR.
769
- if (!this._platform.isBrowser) {
770
- return;
771
- }
772
- if (this.scrollable === this) {
773
- super.ngOnInit();
774
- }
775
- // It's still too early to measure the viewport at this point. Deferring with a promise allows
776
- // the Viewport to be rendered with the correct size before we measure. We run this outside the
777
- // zone to avoid causing more change detection cycles. We handle the change detection loop
778
- // ourselves instead.
779
- this.ngZone.runOutsideAngular(() => Promise.resolve().then(() => {
780
- this._measureViewportSize();
781
- this._scrollStrategy.attach(this);
782
- this.scrollable
783
- .elementScrolled()
784
- .pipe(
785
- // Start off with a fake scroll event so we properly detect our initial position.
786
- startWith(null),
787
- // Collect multiple events into one until the next animation frame. This way if
788
- // there are multiple scroll events in the same frame we only need to recheck
789
- // our layout once.
790
- auditTime(0, SCROLL_SCHEDULER),
791
- // Usually `elementScrolled` is completed when the scrollable is destroyed, but
792
- // that may not be the case if a `CdkVirtualScrollableElement` is used so we have
793
- // to unsubscribe here just in case.
794
- takeUntil(this._destroyed))
795
- .subscribe(() => this._scrollStrategy.onContentScrolled());
796
- this._markChangeDetectionNeeded();
797
- }));
798
- }
799
- ngOnDestroy() {
800
- this.detach();
801
- this._scrollStrategy.detach();
802
- // Complete all subjects
803
- this._renderedRangeSubject.complete();
804
- this._detachedSubject.complete();
805
- this._viewportChanges.unsubscribe();
806
- this._isDestroyed = true;
807
- super.ngOnDestroy();
808
- }
809
- /** Attaches a `CdkVirtualScrollRepeater` to this viewport. */
810
- attach(forOf) {
811
- if (this._forOf && (typeof ngDevMode === 'undefined' || ngDevMode)) {
812
- throw Error('CdkVirtualScrollViewport is already attached.');
813
- }
814
- // Subscribe to the data stream of the CdkVirtualForOf to keep track of when the data length
815
- // changes. Run outside the zone to avoid triggering change detection, since we're managing the
816
- // change detection loop ourselves.
817
- this.ngZone.runOutsideAngular(() => {
818
- this._forOf = forOf;
819
- this._forOf.dataStream.pipe(takeUntil(this._detachedSubject)).subscribe(data => {
820
- const newLength = data.length;
821
- if (newLength !== this._dataLength) {
822
- this._dataLength = newLength;
823
- this._scrollStrategy.onDataLengthChanged();
824
- }
825
- this._doChangeDetection();
826
- });
827
- });
828
- }
829
- /** Detaches the current `CdkVirtualForOf`. */
830
- detach() {
831
- this._forOf = null;
832
- this._detachedSubject.next();
833
- }
834
- /** Gets the length of the data bound to this viewport (in number of items). */
835
- getDataLength() {
836
- return this._dataLength;
837
- }
838
- /** Gets the size of the viewport (in pixels). */
839
- getViewportSize() {
840
- return this._viewportSize;
841
- }
842
- // TODO(mmalerba): This is technically out of sync with what's really rendered until a render
843
- // cycle happens. I'm being careful to only call it after the render cycle is complete and before
844
- // setting it to something else, but its error prone and should probably be split into
845
- // `pendingRange` and `renderedRange`, the latter reflecting whats actually in the DOM.
846
- /** Get the current rendered range of items. */
847
- getRenderedRange() {
848
- return this._renderedRange;
849
- }
850
- measureBoundingClientRectWithScrollOffset(from) {
851
- return this.getElementRef().nativeElement.getBoundingClientRect()[from];
852
- }
853
- /**
854
- * Sets the total size of all content (in pixels), including content that is not currently
855
- * rendered.
856
- */
857
- setTotalContentSize(size) {
858
- if (this._totalContentSize !== size) {
859
- this._totalContentSize = size;
860
- this._calculateSpacerSize();
861
- this._markChangeDetectionNeeded();
862
- }
863
- }
864
- /** Sets the currently rendered range of indices. */
865
- setRenderedRange(range) {
866
- if (!rangesEqual(this._renderedRange, range)) {
867
- if (this.appendOnly) {
868
- range = { start: 0, end: Math.max(this._renderedRange.end, range.end) };
869
- }
870
- this._renderedRangeSubject.next((this._renderedRange = range));
871
- this._markChangeDetectionNeeded(() => this._scrollStrategy.onContentRendered());
872
- }
873
- }
874
- /**
875
- * Gets the offset from the start of the viewport to the start of the rendered data (in pixels).
876
- */
877
- getOffsetToRenderedContentStart() {
878
- return this._renderedContentOffsetNeedsRewrite ? null : this._renderedContentOffset;
879
- }
880
- /**
881
- * Sets the offset from the start of the viewport to either the start or end of the rendered data
882
- * (in pixels).
883
- */
884
- setRenderedContentOffset(offset, to = 'to-start') {
885
- // In appendOnly, we always start from the top
886
- offset = this.appendOnly && to === 'to-start' ? 0 : offset;
887
- // For a horizontal viewport in a right-to-left language we need to translate along the x-axis
888
- // in the negative direction.
889
- const isRtl = this.dir && this.dir.value == 'rtl';
890
- const isHorizontal = this.orientation == 'horizontal';
891
- const axis = isHorizontal ? 'X' : 'Y';
892
- const axisDirection = isHorizontal && isRtl ? -1 : 1;
893
- let transform = `translate${axis}(${Number(axisDirection * offset)}px)`;
894
- this._renderedContentOffset = offset;
895
- if (to === 'to-end') {
896
- transform += ` translate${axis}(-100%)`;
897
- // The viewport should rewrite this as a `to-start` offset on the next render cycle. Otherwise
898
- // elements will appear to expand in the wrong direction (e.g. `mat-expansion-panel` would
899
- // expand upward).
900
- this._renderedContentOffsetNeedsRewrite = true;
901
- }
902
- if (this._renderedContentTransform != transform) {
903
- // We know this value is safe because we parse `offset` with `Number()` before passing it
904
- // into the string.
905
- this._renderedContentTransform = transform;
906
- this._markChangeDetectionNeeded(() => {
907
- if (this._renderedContentOffsetNeedsRewrite) {
908
- this._renderedContentOffset -= this.measureRenderedContentSize();
909
- this._renderedContentOffsetNeedsRewrite = false;
910
- this.setRenderedContentOffset(this._renderedContentOffset);
911
- }
912
- else {
913
- this._scrollStrategy.onRenderedOffsetChanged();
914
- }
915
- });
916
- }
917
- }
918
- /**
919
- * Scrolls to the given offset from the start of the viewport. Please note that this is not always
920
- * the same as setting `scrollTop` or `scrollLeft`. In a horizontal viewport with right-to-left
921
- * direction, this would be the equivalent of setting a fictional `scrollRight` property.
922
- * @param offset The offset to scroll to.
923
- * @param behavior The ScrollBehavior to use when scrolling. Default is behavior is `auto`.
924
- */
925
- scrollToOffset(offset, behavior = 'auto') {
926
- const options = { behavior };
927
- if (this.orientation === 'horizontal') {
928
- options.start = offset;
929
- }
930
- else {
931
- options.top = offset;
932
- }
933
- this.scrollable.scrollTo(options);
934
- }
935
- /**
936
- * Scrolls to the offset for the given index.
937
- * @param index The index of the element to scroll to.
938
- * @param behavior The ScrollBehavior to use when scrolling. Default is behavior is `auto`.
939
- */
940
- scrollToIndex(index, behavior = 'auto') {
941
- this._scrollStrategy.scrollToIndex(index, behavior);
942
- }
943
- /**
944
- * Gets the current scroll offset from the start of the scrollable (in pixels).
945
- * @param from The edge to measure the offset from. Defaults to 'top' in vertical mode and 'start'
946
- * in horizontal mode.
947
- */
948
- measureScrollOffset(from) {
949
- // This is to break the call cycle
950
- let measureScrollOffset;
951
- if (this.scrollable == this) {
952
- measureScrollOffset = (_from) => super.measureScrollOffset(_from);
953
- }
954
- else {
955
- measureScrollOffset = (_from) => this.scrollable.measureScrollOffset(_from);
956
- }
957
- return Math.max(0, measureScrollOffset(from ?? (this.orientation === 'horizontal' ? 'start' : 'top')) -
958
- this.measureViewportOffset());
959
- }
960
- /**
961
- * Measures the offset of the viewport from the scrolling container
962
- * @param from The edge to measure from.
963
- */
964
- measureViewportOffset(from) {
965
- let fromRect;
966
- const LEFT = 'left';
967
- const RIGHT = 'right';
968
- const isRtl = this.dir?.value == 'rtl';
969
- if (from == 'start') {
970
- fromRect = isRtl ? RIGHT : LEFT;
971
- }
972
- else if (from == 'end') {
973
- fromRect = isRtl ? LEFT : RIGHT;
974
- }
975
- else if (from) {
976
- fromRect = from;
977
- }
978
- else {
979
- fromRect = this.orientation === 'horizontal' ? 'left' : 'top';
980
- }
981
- const scrollerClientRect = this.scrollable.measureBoundingClientRectWithScrollOffset(fromRect);
982
- const viewportClientRect = this.elementRef.nativeElement.getBoundingClientRect()[fromRect];
983
- return viewportClientRect - scrollerClientRect;
984
- }
985
- /** Measure the combined size of all of the rendered items. */
986
- measureRenderedContentSize() {
987
- const contentEl = this._contentWrapper.nativeElement;
988
- return this.orientation === 'horizontal' ? contentEl.offsetWidth : contentEl.offsetHeight;
989
- }
990
- /**
991
- * Measure the total combined size of the given range. Throws if the range includes items that are
992
- * not rendered.
993
- */
994
- measureRangeSize(range) {
995
- if (!this._forOf) {
996
- return 0;
997
- }
998
- return this._forOf.measureRangeSize(range, this.orientation);
999
- }
1000
- /** Update the viewport dimensions and re-render. */
1001
- checkViewportSize() {
1002
- // TODO: Cleanup later when add logic for handling content resize
1003
- this._measureViewportSize();
1004
- this._scrollStrategy.onDataLengthChanged();
1005
- }
1006
- /** Measure the viewport size. */
1007
- _measureViewportSize() {
1008
- this._viewportSize = this.scrollable.measureViewportSize(this.orientation);
1009
- }
1010
- /** Queue up change detection to run. */
1011
- _markChangeDetectionNeeded(runAfter) {
1012
- if (runAfter) {
1013
- this._runAfterChangeDetection.push(runAfter);
1014
- }
1015
- if (untracked(this._changeDetectionNeeded)) {
1016
- return;
1017
- }
1018
- this.ngZone.runOutsideAngular(() => {
1019
- Promise.resolve().then(() => {
1020
- this.ngZone.run(() => {
1021
- this._changeDetectionNeeded.set(true);
1022
- });
1023
- });
1024
- });
1025
- }
1026
- /** Run change detection. */
1027
- _doChangeDetection() {
1028
- if (this._isDestroyed) {
1029
- return;
701
+ this._doChangeDetection();
702
+ });
703
+ });
704
+ }
705
+ detach() {
706
+ this._forOf = null;
707
+ this._detachedSubject.next();
708
+ }
709
+ getDataLength() {
710
+ return this._dataLength;
711
+ }
712
+ getViewportSize() {
713
+ return this._viewportSize;
714
+ }
715
+ getRenderedRange() {
716
+ return this._renderedRange;
717
+ }
718
+ measureBoundingClientRectWithScrollOffset(from) {
719
+ return this.getElementRef().nativeElement.getBoundingClientRect()[from];
720
+ }
721
+ setTotalContentSize(size) {
722
+ if (this._totalContentSize !== size) {
723
+ this._totalContentSize = size;
724
+ this._calculateSpacerSize();
725
+ this._markChangeDetectionNeeded();
726
+ }
727
+ }
728
+ setRenderedRange(range) {
729
+ if (!rangesEqual(this._renderedRange, range)) {
730
+ if (this.appendOnly) {
731
+ range = {
732
+ start: 0,
733
+ end: Math.max(this._renderedRange.end, range.end)
734
+ };
735
+ }
736
+ this._renderedRangeSubject.next(this._renderedRange = range);
737
+ this._markChangeDetectionNeeded(() => this._scrollStrategy.onContentRendered());
738
+ }
739
+ }
740
+ getOffsetToRenderedContentStart() {
741
+ return this._renderedContentOffsetNeedsRewrite ? null : this._renderedContentOffset;
742
+ }
743
+ setRenderedContentOffset(offset, to = 'to-start') {
744
+ offset = this.appendOnly && to === 'to-start' ? 0 : offset;
745
+ const isRtl = this.dir && this.dir.value == 'rtl';
746
+ const isHorizontal = this.orientation == 'horizontal';
747
+ const axis = isHorizontal ? 'X' : 'Y';
748
+ const axisDirection = isHorizontal && isRtl ? -1 : 1;
749
+ let transform = `translate${axis}(${Number(axisDirection * offset)}px)`;
750
+ this._renderedContentOffset = offset;
751
+ if (to === 'to-end') {
752
+ transform += ` translate${axis}(-100%)`;
753
+ this._renderedContentOffsetNeedsRewrite = true;
754
+ }
755
+ if (this._renderedContentTransform != transform) {
756
+ this._renderedContentTransform = transform;
757
+ this._markChangeDetectionNeeded(() => {
758
+ if (this._renderedContentOffsetNeedsRewrite) {
759
+ this._renderedContentOffset -= this.measureRenderedContentSize();
760
+ this._renderedContentOffsetNeedsRewrite = false;
761
+ this.setRenderedContentOffset(this._renderedContentOffset);
762
+ } else {
763
+ this._scrollStrategy.onRenderedOffsetChanged();
1030
764
  }
765
+ });
766
+ }
767
+ }
768
+ scrollToOffset(offset, behavior = 'auto') {
769
+ const options = {
770
+ behavior
771
+ };
772
+ if (this.orientation === 'horizontal') {
773
+ options.start = offset;
774
+ } else {
775
+ options.top = offset;
776
+ }
777
+ this.scrollable.scrollTo(options);
778
+ }
779
+ scrollToIndex(index, behavior = 'auto') {
780
+ this._scrollStrategy.scrollToIndex(index, behavior);
781
+ }
782
+ measureScrollOffset(from) {
783
+ let measureScrollOffset;
784
+ if (this.scrollable == this) {
785
+ measureScrollOffset = _from => super.measureScrollOffset(_from);
786
+ } else {
787
+ measureScrollOffset = _from => this.scrollable.measureScrollOffset(_from);
788
+ }
789
+ return Math.max(0, measureScrollOffset(from ?? (this.orientation === 'horizontal' ? 'start' : 'top')) - this.measureViewportOffset());
790
+ }
791
+ measureViewportOffset(from) {
792
+ let fromRect;
793
+ const LEFT = 'left';
794
+ const RIGHT = 'right';
795
+ const isRtl = this.dir?.value == 'rtl';
796
+ if (from == 'start') {
797
+ fromRect = isRtl ? RIGHT : LEFT;
798
+ } else if (from == 'end') {
799
+ fromRect = isRtl ? LEFT : RIGHT;
800
+ } else if (from) {
801
+ fromRect = from;
802
+ } else {
803
+ fromRect = this.orientation === 'horizontal' ? 'left' : 'top';
804
+ }
805
+ const scrollerClientRect = this.scrollable.measureBoundingClientRectWithScrollOffset(fromRect);
806
+ const viewportClientRect = this.elementRef.nativeElement.getBoundingClientRect()[fromRect];
807
+ return viewportClientRect - scrollerClientRect;
808
+ }
809
+ measureRenderedContentSize() {
810
+ const contentEl = this._contentWrapper.nativeElement;
811
+ return this.orientation === 'horizontal' ? contentEl.offsetWidth : contentEl.offsetHeight;
812
+ }
813
+ measureRangeSize(range) {
814
+ if (!this._forOf) {
815
+ return 0;
816
+ }
817
+ return this._forOf.measureRangeSize(range, this.orientation);
818
+ }
819
+ checkViewportSize() {
820
+ this._measureViewportSize();
821
+ this._scrollStrategy.onDataLengthChanged();
822
+ }
823
+ _measureViewportSize() {
824
+ this._viewportSize = this.scrollable.measureViewportSize(this.orientation);
825
+ }
826
+ _markChangeDetectionNeeded(runAfter) {
827
+ if (runAfter) {
828
+ this._runAfterChangeDetection.push(runAfter);
829
+ }
830
+ if (untracked(this._changeDetectionNeeded)) {
831
+ return;
832
+ }
833
+ this.ngZone.runOutsideAngular(() => {
834
+ Promise.resolve().then(() => {
1031
835
  this.ngZone.run(() => {
1032
- // Apply changes to Angular bindings. Note: We must call `markForCheck` to run change detection
1033
- // from the root, since the repeated items are content projected in. Calling `detectChanges`
1034
- // instead does not properly check the projected content.
1035
- this._changeDetectorRef.markForCheck();
1036
- // Apply the content transform. The transform can't be set via an Angular binding because
1037
- // bypassSecurityTrustStyle is banned in Google. However the value is safe, it's composed of
1038
- // string literals, a variable that can only be 'X' or 'Y', and user input that is run through
1039
- // the `Number` function first to coerce it to a numeric value.
1040
- this._contentWrapper.nativeElement.style.transform = this._renderedContentTransform;
1041
- afterNextRender(() => {
1042
- this._changeDetectionNeeded.set(false);
1043
- const runAfterChangeDetection = this._runAfterChangeDetection;
1044
- this._runAfterChangeDetection = [];
1045
- for (const fn of runAfterChangeDetection) {
1046
- fn();
1047
- }
1048
- }, { injector: this._injector });
836
+ this._changeDetectionNeeded.set(true);
1049
837
  });
1050
- }
1051
- /** Calculates the `style.width` and `style.height` for the spacer element. */
1052
- _calculateSpacerSize() {
1053
- this._totalContentHeight.set(this.orientation === 'horizontal' ? '' : `${this._totalContentSize}px`);
1054
- this._totalContentWidth.set(this.orientation === 'horizontal' ? `${this._totalContentSize}px` : '');
1055
- }
1056
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CdkVirtualScrollViewport, deps: [], target: i0.ɵɵFactoryTarget.Component });
1057
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.2.0-next.2", type: CdkVirtualScrollViewport, isStandalone: true, selector: "cdk-virtual-scroll-viewport", inputs: { orientation: "orientation", appendOnly: ["appendOnly", "appendOnly", booleanAttribute] }, outputs: { scrolledIndexChange: "scrolledIndexChange" }, host: { properties: { "class.cdk-virtual-scroll-orientation-horizontal": "orientation === \"horizontal\"", "class.cdk-virtual-scroll-orientation-vertical": "orientation !== \"horizontal\"" }, classAttribute: "cdk-virtual-scroll-viewport" }, providers: [
1058
- {
1059
- provide: CdkScrollable,
1060
- useFactory: () => inject(VIRTUAL_SCROLLABLE, { optional: true }) || inject(CdkVirtualScrollViewport),
1061
- },
1062
- ], viewQueries: [{ propertyName: "_contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<!--\n Wrap the rendered content in an element that will be used to offset it based on the scroll\n position.\n-->\n<div #contentWrapper class=\"cdk-virtual-scroll-content-wrapper\">\n <ng-content></ng-content>\n</div>\n<!--\n Spacer used to force the scrolling container to the correct size for the *total* number of items\n so that the scrollbar captures the size of the entire data set.\n-->\n<div class=\"cdk-virtual-scroll-spacer\"\n [style.width]=\"_totalContentWidth()\" [style.height]=\"_totalContentHeight()\"></div>\n", styles: ["cdk-virtual-scroll-viewport{display:block;position:relative;transform:translateZ(0)}.cdk-virtual-scrollable{overflow:auto;will-change:scroll-position;contain:strict}.cdk-virtual-scroll-content-wrapper{position:absolute;top:0;left:0;contain:content}[dir=rtl] .cdk-virtual-scroll-content-wrapper{right:0;left:auto}.cdk-virtual-scroll-orientation-horizontal .cdk-virtual-scroll-content-wrapper{min-height:100%}.cdk-virtual-scroll-orientation-horizontal .cdk-virtual-scroll-content-wrapper>dl:not([cdkVirtualFor]),.cdk-virtual-scroll-orientation-horizontal .cdk-virtual-scroll-content-wrapper>ol:not([cdkVirtualFor]),.cdk-virtual-scroll-orientation-horizontal .cdk-virtual-scroll-content-wrapper>table:not([cdkVirtualFor]),.cdk-virtual-scroll-orientation-horizontal .cdk-virtual-scroll-content-wrapper>ul:not([cdkVirtualFor]){padding-left:0;padding-right:0;margin-left:0;margin-right:0;border-left-width:0;border-right-width:0;outline:none}.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{min-width:100%}.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper>dl:not([cdkVirtualFor]),.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper>ol:not([cdkVirtualFor]),.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper>table:not([cdkVirtualFor]),.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper>ul:not([cdkVirtualFor]){padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0;border-top-width:0;border-bottom-width:0;outline:none}.cdk-virtual-scroll-spacer{height:1px;transform-origin:0 0;flex:0 0 auto}[dir=rtl] .cdk-virtual-scroll-spacer{transform-origin:100% 0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
838
+ });
839
+ });
840
+ }
841
+ _doChangeDetection() {
842
+ if (this._isDestroyed) {
843
+ return;
844
+ }
845
+ this.ngZone.run(() => {
846
+ this._changeDetectorRef.markForCheck();
847
+ this._contentWrapper.nativeElement.style.transform = this._renderedContentTransform;
848
+ afterNextRender(() => {
849
+ this._changeDetectionNeeded.set(false);
850
+ const runAfterChangeDetection = this._runAfterChangeDetection;
851
+ this._runAfterChangeDetection = [];
852
+ for (const fn of runAfterChangeDetection) {
853
+ fn();
854
+ }
855
+ }, {
856
+ injector: this._injector
857
+ });
858
+ });
859
+ }
860
+ _calculateSpacerSize() {
861
+ this._totalContentHeight.set(this.orientation === 'horizontal' ? '' : `${this._totalContentSize}px`);
862
+ this._totalContentWidth.set(this.orientation === 'horizontal' ? `${this._totalContentSize}px` : '');
863
+ }
864
+ static ɵfac = i0.ɵɵngDeclareFactory({
865
+ minVersion: "12.0.0",
866
+ version: "20.2.0-next.2",
867
+ ngImport: i0,
868
+ type: CdkVirtualScrollViewport,
869
+ deps: [],
870
+ target: i0.ɵɵFactoryTarget.Component
871
+ });
872
+ static ɵcmp = i0.ɵɵngDeclareComponent({
873
+ minVersion: "16.1.0",
874
+ version: "20.2.0-next.2",
875
+ type: CdkVirtualScrollViewport,
876
+ isStandalone: true,
877
+ selector: "cdk-virtual-scroll-viewport",
878
+ inputs: {
879
+ orientation: "orientation",
880
+ appendOnly: ["appendOnly", "appendOnly", booleanAttribute]
881
+ },
882
+ outputs: {
883
+ scrolledIndexChange: "scrolledIndexChange"
884
+ },
885
+ host: {
886
+ properties: {
887
+ "class.cdk-virtual-scroll-orientation-horizontal": "orientation === \"horizontal\"",
888
+ "class.cdk-virtual-scroll-orientation-vertical": "orientation !== \"horizontal\""
889
+ },
890
+ classAttribute: "cdk-virtual-scroll-viewport"
891
+ },
892
+ providers: [{
893
+ provide: CdkScrollable,
894
+ useFactory: () => inject(VIRTUAL_SCROLLABLE, {
895
+ optional: true
896
+ }) || inject(CdkVirtualScrollViewport)
897
+ }],
898
+ viewQueries: [{
899
+ propertyName: "_contentWrapper",
900
+ first: true,
901
+ predicate: ["contentWrapper"],
902
+ descendants: true,
903
+ static: true
904
+ }],
905
+ usesInheritance: true,
906
+ ngImport: i0,
907
+ template: "<!--\n Wrap the rendered content in an element that will be used to offset it based on the scroll\n position.\n-->\n<div #contentWrapper class=\"cdk-virtual-scroll-content-wrapper\">\n <ng-content></ng-content>\n</div>\n<!--\n Spacer used to force the scrolling container to the correct size for the *total* number of items\n so that the scrollbar captures the size of the entire data set.\n-->\n<div class=\"cdk-virtual-scroll-spacer\"\n [style.width]=\"_totalContentWidth()\" [style.height]=\"_totalContentHeight()\"></div>\n",
908
+ styles: ["cdk-virtual-scroll-viewport{display:block;position:relative;transform:translateZ(0)}.cdk-virtual-scrollable{overflow:auto;will-change:scroll-position;contain:strict}.cdk-virtual-scroll-content-wrapper{position:absolute;top:0;left:0;contain:content}[dir=rtl] .cdk-virtual-scroll-content-wrapper{right:0;left:auto}.cdk-virtual-scroll-orientation-horizontal .cdk-virtual-scroll-content-wrapper{min-height:100%}.cdk-virtual-scroll-orientation-horizontal .cdk-virtual-scroll-content-wrapper>dl:not([cdkVirtualFor]),.cdk-virtual-scroll-orientation-horizontal .cdk-virtual-scroll-content-wrapper>ol:not([cdkVirtualFor]),.cdk-virtual-scroll-orientation-horizontal .cdk-virtual-scroll-content-wrapper>table:not([cdkVirtualFor]),.cdk-virtual-scroll-orientation-horizontal .cdk-virtual-scroll-content-wrapper>ul:not([cdkVirtualFor]){padding-left:0;padding-right:0;margin-left:0;margin-right:0;border-left-width:0;border-right-width:0;outline:none}.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{min-width:100%}.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper>dl:not([cdkVirtualFor]),.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper>ol:not([cdkVirtualFor]),.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper>table:not([cdkVirtualFor]),.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper>ul:not([cdkVirtualFor]){padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0;border-top-width:0;border-bottom-width:0;outline:none}.cdk-virtual-scroll-spacer{height:1px;transform-origin:0 0;flex:0 0 auto}[dir=rtl] .cdk-virtual-scroll-spacer{transform-origin:100% 0}\n"],
909
+ changeDetection: i0.ChangeDetectionStrategy.OnPush,
910
+ encapsulation: i0.ViewEncapsulation.None
911
+ });
1063
912
  }
1064
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CdkVirtualScrollViewport, decorators: [{
1065
- type: Component,
1066
- args: [{ selector: 'cdk-virtual-scroll-viewport', host: {
1067
- 'class': 'cdk-virtual-scroll-viewport',
1068
- '[class.cdk-virtual-scroll-orientation-horizontal]': 'orientation === "horizontal"',
1069
- '[class.cdk-virtual-scroll-orientation-vertical]': 'orientation !== "horizontal"',
1070
- }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
1071
- {
1072
- provide: CdkScrollable,
1073
- useFactory: () => inject(VIRTUAL_SCROLLABLE, { optional: true }) || inject(CdkVirtualScrollViewport),
1074
- },
1075
- ], template: "<!--\n Wrap the rendered content in an element that will be used to offset it based on the scroll\n position.\n-->\n<div #contentWrapper class=\"cdk-virtual-scroll-content-wrapper\">\n <ng-content></ng-content>\n</div>\n<!--\n Spacer used to force the scrolling container to the correct size for the *total* number of items\n so that the scrollbar captures the size of the entire data set.\n-->\n<div class=\"cdk-virtual-scroll-spacer\"\n [style.width]=\"_totalContentWidth()\" [style.height]=\"_totalContentHeight()\"></div>\n", styles: ["cdk-virtual-scroll-viewport{display:block;position:relative;transform:translateZ(0)}.cdk-virtual-scrollable{overflow:auto;will-change:scroll-position;contain:strict}.cdk-virtual-scroll-content-wrapper{position:absolute;top:0;left:0;contain:content}[dir=rtl] .cdk-virtual-scroll-content-wrapper{right:0;left:auto}.cdk-virtual-scroll-orientation-horizontal .cdk-virtual-scroll-content-wrapper{min-height:100%}.cdk-virtual-scroll-orientation-horizontal .cdk-virtual-scroll-content-wrapper>dl:not([cdkVirtualFor]),.cdk-virtual-scroll-orientation-horizontal .cdk-virtual-scroll-content-wrapper>ol:not([cdkVirtualFor]),.cdk-virtual-scroll-orientation-horizontal .cdk-virtual-scroll-content-wrapper>table:not([cdkVirtualFor]),.cdk-virtual-scroll-orientation-horizontal .cdk-virtual-scroll-content-wrapper>ul:not([cdkVirtualFor]){padding-left:0;padding-right:0;margin-left:0;margin-right:0;border-left-width:0;border-right-width:0;outline:none}.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{min-width:100%}.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper>dl:not([cdkVirtualFor]),.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper>ol:not([cdkVirtualFor]),.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper>table:not([cdkVirtualFor]),.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper>ul:not([cdkVirtualFor]){padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0;border-top-width:0;border-bottom-width:0;outline:none}.cdk-virtual-scroll-spacer{height:1px;transform-origin:0 0;flex:0 0 auto}[dir=rtl] .cdk-virtual-scroll-spacer{transform-origin:100% 0}\n"] }]
1076
- }], ctorParameters: () => [], propDecorators: { orientation: [{
1077
- type: Input
1078
- }], appendOnly: [{
1079
- type: Input,
1080
- args: [{ transform: booleanAttribute }]
1081
- }], scrolledIndexChange: [{
1082
- type: Output
1083
- }], _contentWrapper: [{
1084
- type: ViewChild,
1085
- args: ['contentWrapper', { static: true }]
1086
- }] } });
913
+ i0.ɵɵngDeclareClassMetadata({
914
+ minVersion: "12.0.0",
915
+ version: "20.2.0-next.2",
916
+ ngImport: i0,
917
+ type: CdkVirtualScrollViewport,
918
+ decorators: [{
919
+ type: Component,
920
+ args: [{
921
+ selector: 'cdk-virtual-scroll-viewport',
922
+ host: {
923
+ 'class': 'cdk-virtual-scroll-viewport',
924
+ '[class.cdk-virtual-scroll-orientation-horizontal]': 'orientation === "horizontal"',
925
+ '[class.cdk-virtual-scroll-orientation-vertical]': 'orientation !== "horizontal"'
926
+ },
927
+ encapsulation: ViewEncapsulation.None,
928
+ changeDetection: ChangeDetectionStrategy.OnPush,
929
+ providers: [{
930
+ provide: CdkScrollable,
931
+ useFactory: () => inject(VIRTUAL_SCROLLABLE, {
932
+ optional: true
933
+ }) || inject(CdkVirtualScrollViewport)
934
+ }],
935
+ template: "<!--\n Wrap the rendered content in an element that will be used to offset it based on the scroll\n position.\n-->\n<div #contentWrapper class=\"cdk-virtual-scroll-content-wrapper\">\n <ng-content></ng-content>\n</div>\n<!--\n Spacer used to force the scrolling container to the correct size for the *total* number of items\n so that the scrollbar captures the size of the entire data set.\n-->\n<div class=\"cdk-virtual-scroll-spacer\"\n [style.width]=\"_totalContentWidth()\" [style.height]=\"_totalContentHeight()\"></div>\n",
936
+ styles: ["cdk-virtual-scroll-viewport{display:block;position:relative;transform:translateZ(0)}.cdk-virtual-scrollable{overflow:auto;will-change:scroll-position;contain:strict}.cdk-virtual-scroll-content-wrapper{position:absolute;top:0;left:0;contain:content}[dir=rtl] .cdk-virtual-scroll-content-wrapper{right:0;left:auto}.cdk-virtual-scroll-orientation-horizontal .cdk-virtual-scroll-content-wrapper{min-height:100%}.cdk-virtual-scroll-orientation-horizontal .cdk-virtual-scroll-content-wrapper>dl:not([cdkVirtualFor]),.cdk-virtual-scroll-orientation-horizontal .cdk-virtual-scroll-content-wrapper>ol:not([cdkVirtualFor]),.cdk-virtual-scroll-orientation-horizontal .cdk-virtual-scroll-content-wrapper>table:not([cdkVirtualFor]),.cdk-virtual-scroll-orientation-horizontal .cdk-virtual-scroll-content-wrapper>ul:not([cdkVirtualFor]){padding-left:0;padding-right:0;margin-left:0;margin-right:0;border-left-width:0;border-right-width:0;outline:none}.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{min-width:100%}.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper>dl:not([cdkVirtualFor]),.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper>ol:not([cdkVirtualFor]),.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper>table:not([cdkVirtualFor]),.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper>ul:not([cdkVirtualFor]){padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0;border-top-width:0;border-bottom-width:0;outline:none}.cdk-virtual-scroll-spacer{height:1px;transform-origin:0 0;flex:0 0 auto}[dir=rtl] .cdk-virtual-scroll-spacer{transform-origin:100% 0}\n"]
937
+ }]
938
+ }],
939
+ ctorParameters: () => [],
940
+ propDecorators: {
941
+ orientation: [{
942
+ type: Input
943
+ }],
944
+ appendOnly: [{
945
+ type: Input,
946
+ args: [{
947
+ transform: booleanAttribute
948
+ }]
949
+ }],
950
+ scrolledIndexChange: [{
951
+ type: Output
952
+ }],
953
+ _contentWrapper: [{
954
+ type: ViewChild,
955
+ args: ['contentWrapper', {
956
+ static: true
957
+ }]
958
+ }]
959
+ }
960
+ });
1087
961
 
1088
- /** Helper to extract the offset of a DOM Node in a certain direction. */
1089
962
  function getOffset(orientation, direction, node) {
1090
- const el = node;
1091
- if (!el.getBoundingClientRect) {
1092
- return 0;
1093
- }
1094
- const rect = el.getBoundingClientRect();
1095
- if (orientation === 'horizontal') {
1096
- return direction === 'start' ? rect.left : rect.right;
1097
- }
1098
- return direction === 'start' ? rect.top : rect.bottom;
963
+ const el = node;
964
+ if (!el.getBoundingClientRect) {
965
+ return 0;
966
+ }
967
+ const rect = el.getBoundingClientRect();
968
+ if (orientation === 'horizontal') {
969
+ return direction === 'start' ? rect.left : rect.right;
970
+ }
971
+ return direction === 'start' ? rect.top : rect.bottom;
1099
972
  }
1100
- /**
1101
- * A directive similar to `ngForOf` to be used for rendering data inside a virtual scrolling
1102
- * container.
1103
- */
1104
973
  class CdkVirtualForOf {
1105
- _viewContainerRef = inject(ViewContainerRef);
1106
- _template = inject(TemplateRef);
1107
- _differs = inject(IterableDiffers);
1108
- _viewRepeater = inject(_VIEW_REPEATER_STRATEGY);
1109
- _viewport = inject(CdkVirtualScrollViewport, { skipSelf: true });
1110
- /** Emits when the rendered view of the data changes. */
1111
- viewChange = new Subject();
1112
- /** Subject that emits when a new DataSource instance is given. */
1113
- _dataSourceChanges = new Subject();
1114
- /** The DataSource to display. */
1115
- get cdkVirtualForOf() {
1116
- return this._cdkVirtualForOf;
1117
- }
1118
- set cdkVirtualForOf(value) {
1119
- this._cdkVirtualForOf = value;
1120
- if (isDataSource(value)) {
1121
- this._dataSourceChanges.next(value);
1122
- }
1123
- else {
1124
- // If value is an an NgIterable, convert it to an array.
1125
- this._dataSourceChanges.next(new ArrayDataSource(isObservable(value) ? value : Array.from(value || [])));
1126
- }
1127
- }
1128
- _cdkVirtualForOf;
1129
- /**
1130
- * The `TrackByFunction` to use for tracking changes. The `TrackByFunction` takes the index and
1131
- * the item and produces a value to be used as the item's identity when tracking changes.
1132
- */
1133
- get cdkVirtualForTrackBy() {
1134
- return this._cdkVirtualForTrackBy;
1135
- }
1136
- set cdkVirtualForTrackBy(fn) {
1137
- this._needsUpdate = true;
1138
- this._cdkVirtualForTrackBy = fn
1139
- ? (index, item) => fn(index + (this._renderedRange ? this._renderedRange.start : 0), item)
1140
- : undefined;
1141
- }
1142
- _cdkVirtualForTrackBy;
1143
- /** The template used to stamp out new elements. */
1144
- set cdkVirtualForTemplate(value) {
1145
- if (value) {
1146
- this._needsUpdate = true;
1147
- this._template = value;
1148
- }
1149
- }
1150
- /**
1151
- * The size of the cache used to store templates that are not being used for re-use later.
1152
- * Setting the cache size to `0` will disable caching. Defaults to 20 templates.
1153
- */
1154
- get cdkVirtualForTemplateCacheSize() {
1155
- return this._viewRepeater.viewCacheSize;
1156
- }
1157
- set cdkVirtualForTemplateCacheSize(size) {
1158
- this._viewRepeater.viewCacheSize = coerceNumberProperty(size);
1159
- }
1160
- /** Emits whenever the data in the current DataSource changes. */
1161
- dataStream = this._dataSourceChanges.pipe(
1162
- // Start off with null `DataSource`.
1163
- startWith(null),
1164
- // Bundle up the previous and current data sources so we can work with both.
1165
- pairwise(),
1166
- // Use `_changeDataSource` to disconnect from the previous data source and connect to the
1167
- // new one, passing back a stream of data changes which we run through `switchMap` to give
1168
- // us a data stream that emits the latest data from whatever the current `DataSource` is.
1169
- switchMap(([prev, cur]) => this._changeDataSource(prev, cur)),
1170
- // Replay the last emitted data when someone subscribes.
1171
- shareReplay(1));
1172
- /** The differ used to calculate changes to the data. */
1173
- _differ = null;
1174
- /** The most recent data emitted from the DataSource. */
1175
- _data;
1176
- /** The currently rendered items. */
1177
- _renderedItems;
1178
- /** The currently rendered range of indices. */
1179
- _renderedRange;
1180
- /** Whether the rendered data should be updated during the next ngDoCheck cycle. */
1181
- _needsUpdate = false;
1182
- _destroyed = new Subject();
1183
- constructor() {
1184
- const ngZone = inject(NgZone);
1185
- this.dataStream.subscribe(data => {
1186
- this._data = data;
1187
- this._onRenderedDataChange();
1188
- });
1189
- this._viewport.renderedRangeStream.pipe(takeUntil(this._destroyed)).subscribe(range => {
1190
- this._renderedRange = range;
1191
- if (this.viewChange.observers.length) {
1192
- ngZone.run(() => this.viewChange.next(this._renderedRange));
1193
- }
1194
- this._onRenderedDataChange();
1195
- });
1196
- this._viewport.attach(this);
1197
- }
1198
- /**
1199
- * Measures the combined size (width for horizontal orientation, height for vertical) of all items
1200
- * in the specified range. Throws an error if the range includes items that are not currently
1201
- * rendered.
1202
- */
1203
- measureRangeSize(range, orientation) {
1204
- if (range.start >= range.end) {
1205
- return 0;
1206
- }
1207
- if ((range.start < this._renderedRange.start || range.end > this._renderedRange.end) &&
1208
- (typeof ngDevMode === 'undefined' || ngDevMode)) {
1209
- throw Error(`Error: attempted to measure an item that isn't rendered.`);
1210
- }
1211
- // The index into the list of rendered views for the first item in the range.
1212
- const renderedStartIndex = range.start - this._renderedRange.start;
1213
- // The length of the range we're measuring.
1214
- const rangeLen = range.end - range.start;
1215
- // Loop over all the views, find the first and land node and compute the size by subtracting
1216
- // the top of the first node from the bottom of the last one.
1217
- let firstNode;
1218
- let lastNode;
1219
- // Find the first node by starting from the beginning and going forwards.
1220
- for (let i = 0; i < rangeLen; i++) {
1221
- const view = this._viewContainerRef.get(i + renderedStartIndex);
1222
- if (view && view.rootNodes.length) {
1223
- firstNode = lastNode = view.rootNodes[0];
1224
- break;
1225
- }
1226
- }
1227
- // Find the last node by starting from the end and going backwards.
1228
- for (let i = rangeLen - 1; i > -1; i--) {
1229
- const view = this._viewContainerRef.get(i + renderedStartIndex);
1230
- if (view && view.rootNodes.length) {
1231
- lastNode = view.rootNodes[view.rootNodes.length - 1];
1232
- break;
1233
- }
1234
- }
1235
- return firstNode && lastNode
1236
- ? getOffset(orientation, 'end', lastNode) - getOffset(orientation, 'start', firstNode)
1237
- : 0;
1238
- }
1239
- ngDoCheck() {
1240
- if (this._differ && this._needsUpdate) {
1241
- // TODO(mmalerba): We should differentiate needs update due to scrolling and a new portion of
1242
- // this list being rendered (can use simpler algorithm) vs needs update due to data actually
1243
- // changing (need to do this diff).
1244
- const changes = this._differ.diff(this._renderedItems);
1245
- if (!changes) {
1246
- this._updateContext();
1247
- }
1248
- else {
1249
- this._applyChanges(changes);
1250
- }
1251
- this._needsUpdate = false;
1252
- }
1253
- }
1254
- ngOnDestroy() {
1255
- this._viewport.detach();
1256
- this._dataSourceChanges.next(undefined);
1257
- this._dataSourceChanges.complete();
1258
- this.viewChange.complete();
1259
- this._destroyed.next();
1260
- this._destroyed.complete();
1261
- this._viewRepeater.detach();
1262
- }
1263
- /** React to scroll state changes in the viewport. */
1264
- _onRenderedDataChange() {
1265
- if (!this._renderedRange) {
1266
- return;
1267
- }
1268
- this._renderedItems = this._data.slice(this._renderedRange.start, this._renderedRange.end);
1269
- if (!this._differ) {
1270
- // Use a wrapper function for the `trackBy` so any new values are
1271
- // picked up automatically without having to recreate the differ.
1272
- this._differ = this._differs.find(this._renderedItems).create((index, item) => {
1273
- return this.cdkVirtualForTrackBy ? this.cdkVirtualForTrackBy(index, item) : item;
1274
- });
1275
- }
1276
- this._needsUpdate = true;
1277
- }
1278
- /** Swap out one `DataSource` for another. */
1279
- _changeDataSource(oldDs, newDs) {
1280
- if (oldDs) {
1281
- oldDs.disconnect(this);
1282
- }
1283
- this._needsUpdate = true;
1284
- return newDs ? newDs.connect(this) : of();
1285
- }
1286
- /** Update the `CdkVirtualForOfContext` for all views. */
1287
- _updateContext() {
1288
- const count = this._data.length;
1289
- let i = this._viewContainerRef.length;
1290
- while (i--) {
1291
- const view = this._viewContainerRef.get(i);
1292
- view.context.index = this._renderedRange.start + i;
1293
- view.context.count = count;
1294
- this._updateComputedContextProperties(view.context);
1295
- view.detectChanges();
1296
- }
1297
- }
1298
- /** Apply changes to the DOM. */
1299
- _applyChanges(changes) {
1300
- this._viewRepeater.applyChanges(changes, this._viewContainerRef, (record, _adjustedPreviousIndex, currentIndex) => this._getEmbeddedViewArgs(record, currentIndex), record => record.item);
1301
- // Update $implicit for any items that had an identity change.
1302
- changes.forEachIdentityChange((record) => {
1303
- const view = this._viewContainerRef.get(record.currentIndex);
1304
- view.context.$implicit = record.item;
1305
- });
1306
- // Update the context variables on all items.
1307
- const count = this._data.length;
1308
- let i = this._viewContainerRef.length;
1309
- while (i--) {
1310
- const view = this._viewContainerRef.get(i);
1311
- view.context.index = this._renderedRange.start + i;
1312
- view.context.count = count;
1313
- this._updateComputedContextProperties(view.context);
1314
- }
1315
- }
1316
- /** Update the computed properties on the `CdkVirtualForOfContext`. */
1317
- _updateComputedContextProperties(context) {
1318
- context.first = context.index === 0;
1319
- context.last = context.index === context.count - 1;
1320
- context.even = context.index % 2 === 0;
1321
- context.odd = !context.even;
1322
- }
1323
- _getEmbeddedViewArgs(record, index) {
1324
- // Note that it's important that we insert the item directly at the proper index,
1325
- // rather than inserting it and the moving it in place, because if there's a directive
1326
- // on the same node that injects the `ViewContainerRef`, Angular will insert another
1327
- // comment node which can throw off the move when it's being repeated for all items.
1328
- return {
1329
- templateRef: this._template,
1330
- context: {
1331
- $implicit: record.item,
1332
- // It's guaranteed that the iterable is not "undefined" or "null" because we only
1333
- // generate views for elements if the "cdkVirtualForOf" iterable has elements.
1334
- cdkVirtualForOf: this._cdkVirtualForOf,
1335
- index: -1,
1336
- count: -1,
1337
- first: false,
1338
- last: false,
1339
- odd: false,
1340
- even: false,
1341
- },
1342
- index,
1343
- };
1344
- }
1345
- static ngTemplateContextGuard(directive, context) {
1346
- return true;
1347
- }
1348
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CdkVirtualForOf, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1349
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: CdkVirtualForOf, isStandalone: true, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: { cdkVirtualForOf: "cdkVirtualForOf", cdkVirtualForTrackBy: "cdkVirtualForTrackBy", cdkVirtualForTemplate: "cdkVirtualForTemplate", cdkVirtualForTemplateCacheSize: "cdkVirtualForTemplateCacheSize" }, providers: [{ provide: _VIEW_REPEATER_STRATEGY, useClass: _RecycleViewRepeaterStrategy }], ngImport: i0 });
974
+ _viewContainerRef = inject(ViewContainerRef);
975
+ _template = inject(TemplateRef);
976
+ _differs = inject(IterableDiffers);
977
+ _viewRepeater = inject(_VIEW_REPEATER_STRATEGY);
978
+ _viewport = inject(CdkVirtualScrollViewport, {
979
+ skipSelf: true
980
+ });
981
+ viewChange = new Subject();
982
+ _dataSourceChanges = new Subject();
983
+ get cdkVirtualForOf() {
984
+ return this._cdkVirtualForOf;
985
+ }
986
+ set cdkVirtualForOf(value) {
987
+ this._cdkVirtualForOf = value;
988
+ if (isDataSource(value)) {
989
+ this._dataSourceChanges.next(value);
990
+ } else {
991
+ this._dataSourceChanges.next(new ArrayDataSource(isObservable(value) ? value : Array.from(value || [])));
992
+ }
993
+ }
994
+ _cdkVirtualForOf;
995
+ get cdkVirtualForTrackBy() {
996
+ return this._cdkVirtualForTrackBy;
997
+ }
998
+ set cdkVirtualForTrackBy(fn) {
999
+ this._needsUpdate = true;
1000
+ this._cdkVirtualForTrackBy = fn ? (index, item) => fn(index + (this._renderedRange ? this._renderedRange.start : 0), item) : undefined;
1001
+ }
1002
+ _cdkVirtualForTrackBy;
1003
+ set cdkVirtualForTemplate(value) {
1004
+ if (value) {
1005
+ this._needsUpdate = true;
1006
+ this._template = value;
1007
+ }
1008
+ }
1009
+ get cdkVirtualForTemplateCacheSize() {
1010
+ return this._viewRepeater.viewCacheSize;
1011
+ }
1012
+ set cdkVirtualForTemplateCacheSize(size) {
1013
+ this._viewRepeater.viewCacheSize = coerceNumberProperty(size);
1014
+ }
1015
+ dataStream = this._dataSourceChanges.pipe(startWith(null), pairwise(), switchMap(([prev, cur]) => this._changeDataSource(prev, cur)), shareReplay(1));
1016
+ _differ = null;
1017
+ _data;
1018
+ _renderedItems;
1019
+ _renderedRange;
1020
+ _needsUpdate = false;
1021
+ _destroyed = new Subject();
1022
+ constructor() {
1023
+ const ngZone = inject(NgZone);
1024
+ this.dataStream.subscribe(data => {
1025
+ this._data = data;
1026
+ this._onRenderedDataChange();
1027
+ });
1028
+ this._viewport.renderedRangeStream.pipe(takeUntil(this._destroyed)).subscribe(range => {
1029
+ this._renderedRange = range;
1030
+ if (this.viewChange.observers.length) {
1031
+ ngZone.run(() => this.viewChange.next(this._renderedRange));
1032
+ }
1033
+ this._onRenderedDataChange();
1034
+ });
1035
+ this._viewport.attach(this);
1036
+ }
1037
+ measureRangeSize(range, orientation) {
1038
+ if (range.start >= range.end) {
1039
+ return 0;
1040
+ }
1041
+ if ((range.start < this._renderedRange.start || range.end > this._renderedRange.end) && (typeof ngDevMode === 'undefined' || ngDevMode)) {
1042
+ throw Error(`Error: attempted to measure an item that isn't rendered.`);
1043
+ }
1044
+ const renderedStartIndex = range.start - this._renderedRange.start;
1045
+ const rangeLen = range.end - range.start;
1046
+ let firstNode;
1047
+ let lastNode;
1048
+ for (let i = 0; i < rangeLen; i++) {
1049
+ const view = this._viewContainerRef.get(i + renderedStartIndex);
1050
+ if (view && view.rootNodes.length) {
1051
+ firstNode = lastNode = view.rootNodes[0];
1052
+ break;
1053
+ }
1054
+ }
1055
+ for (let i = rangeLen - 1; i > -1; i--) {
1056
+ const view = this._viewContainerRef.get(i + renderedStartIndex);
1057
+ if (view && view.rootNodes.length) {
1058
+ lastNode = view.rootNodes[view.rootNodes.length - 1];
1059
+ break;
1060
+ }
1061
+ }
1062
+ return firstNode && lastNode ? getOffset(orientation, 'end', lastNode) - getOffset(orientation, 'start', firstNode) : 0;
1063
+ }
1064
+ ngDoCheck() {
1065
+ if (this._differ && this._needsUpdate) {
1066
+ const changes = this._differ.diff(this._renderedItems);
1067
+ if (!changes) {
1068
+ this._updateContext();
1069
+ } else {
1070
+ this._applyChanges(changes);
1071
+ }
1072
+ this._needsUpdate = false;
1073
+ }
1074
+ }
1075
+ ngOnDestroy() {
1076
+ this._viewport.detach();
1077
+ this._dataSourceChanges.next(undefined);
1078
+ this._dataSourceChanges.complete();
1079
+ this.viewChange.complete();
1080
+ this._destroyed.next();
1081
+ this._destroyed.complete();
1082
+ this._viewRepeater.detach();
1083
+ }
1084
+ _onRenderedDataChange() {
1085
+ if (!this._renderedRange) {
1086
+ return;
1087
+ }
1088
+ this._renderedItems = this._data.slice(this._renderedRange.start, this._renderedRange.end);
1089
+ if (!this._differ) {
1090
+ this._differ = this._differs.find(this._renderedItems).create((index, item) => {
1091
+ return this.cdkVirtualForTrackBy ? this.cdkVirtualForTrackBy(index, item) : item;
1092
+ });
1093
+ }
1094
+ this._needsUpdate = true;
1095
+ }
1096
+ _changeDataSource(oldDs, newDs) {
1097
+ if (oldDs) {
1098
+ oldDs.disconnect(this);
1099
+ }
1100
+ this._needsUpdate = true;
1101
+ return newDs ? newDs.connect(this) : of();
1102
+ }
1103
+ _updateContext() {
1104
+ const count = this._data.length;
1105
+ let i = this._viewContainerRef.length;
1106
+ while (i--) {
1107
+ const view = this._viewContainerRef.get(i);
1108
+ view.context.index = this._renderedRange.start + i;
1109
+ view.context.count = count;
1110
+ this._updateComputedContextProperties(view.context);
1111
+ view.detectChanges();
1112
+ }
1113
+ }
1114
+ _applyChanges(changes) {
1115
+ this._viewRepeater.applyChanges(changes, this._viewContainerRef, (record, _adjustedPreviousIndex, currentIndex) => this._getEmbeddedViewArgs(record, currentIndex), record => record.item);
1116
+ changes.forEachIdentityChange(record => {
1117
+ const view = this._viewContainerRef.get(record.currentIndex);
1118
+ view.context.$implicit = record.item;
1119
+ });
1120
+ const count = this._data.length;
1121
+ let i = this._viewContainerRef.length;
1122
+ while (i--) {
1123
+ const view = this._viewContainerRef.get(i);
1124
+ view.context.index = this._renderedRange.start + i;
1125
+ view.context.count = count;
1126
+ this._updateComputedContextProperties(view.context);
1127
+ }
1128
+ }
1129
+ _updateComputedContextProperties(context) {
1130
+ context.first = context.index === 0;
1131
+ context.last = context.index === context.count - 1;
1132
+ context.even = context.index % 2 === 0;
1133
+ context.odd = !context.even;
1134
+ }
1135
+ _getEmbeddedViewArgs(record, index) {
1136
+ return {
1137
+ templateRef: this._template,
1138
+ context: {
1139
+ $implicit: record.item,
1140
+ cdkVirtualForOf: this._cdkVirtualForOf,
1141
+ index: -1,
1142
+ count: -1,
1143
+ first: false,
1144
+ last: false,
1145
+ odd: false,
1146
+ even: false
1147
+ },
1148
+ index
1149
+ };
1150
+ }
1151
+ static ngTemplateContextGuard(directive, context) {
1152
+ return true;
1153
+ }
1154
+ static ɵfac = i0.ɵɵngDeclareFactory({
1155
+ minVersion: "12.0.0",
1156
+ version: "20.2.0-next.2",
1157
+ ngImport: i0,
1158
+ type: CdkVirtualForOf,
1159
+ deps: [],
1160
+ target: i0.ɵɵFactoryTarget.Directive
1161
+ });
1162
+ static ɵdir = i0.ɵɵngDeclareDirective({
1163
+ minVersion: "14.0.0",
1164
+ version: "20.2.0-next.2",
1165
+ type: CdkVirtualForOf,
1166
+ isStandalone: true,
1167
+ selector: "[cdkVirtualFor][cdkVirtualForOf]",
1168
+ inputs: {
1169
+ cdkVirtualForOf: "cdkVirtualForOf",
1170
+ cdkVirtualForTrackBy: "cdkVirtualForTrackBy",
1171
+ cdkVirtualForTemplate: "cdkVirtualForTemplate",
1172
+ cdkVirtualForTemplateCacheSize: "cdkVirtualForTemplateCacheSize"
1173
+ },
1174
+ providers: [{
1175
+ provide: _VIEW_REPEATER_STRATEGY,
1176
+ useClass: _RecycleViewRepeaterStrategy
1177
+ }],
1178
+ ngImport: i0
1179
+ });
1350
1180
  }
1351
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CdkVirtualForOf, decorators: [{
1352
- type: Directive,
1353
- args: [{
1354
- selector: '[cdkVirtualFor][cdkVirtualForOf]',
1355
- providers: [{ provide: _VIEW_REPEATER_STRATEGY, useClass: _RecycleViewRepeaterStrategy }],
1356
- }]
1357
- }], ctorParameters: () => [], propDecorators: { cdkVirtualForOf: [{
1358
- type: Input
1359
- }], cdkVirtualForTrackBy: [{
1360
- type: Input
1361
- }], cdkVirtualForTemplate: [{
1362
- type: Input
1363
- }], cdkVirtualForTemplateCacheSize: [{
1364
- type: Input
1365
- }] } });
1181
+ i0.ɵɵngDeclareClassMetadata({
1182
+ minVersion: "12.0.0",
1183
+ version: "20.2.0-next.2",
1184
+ ngImport: i0,
1185
+ type: CdkVirtualForOf,
1186
+ decorators: [{
1187
+ type: Directive,
1188
+ args: [{
1189
+ selector: '[cdkVirtualFor][cdkVirtualForOf]',
1190
+ providers: [{
1191
+ provide: _VIEW_REPEATER_STRATEGY,
1192
+ useClass: _RecycleViewRepeaterStrategy
1193
+ }]
1194
+ }]
1195
+ }],
1196
+ ctorParameters: () => [],
1197
+ propDecorators: {
1198
+ cdkVirtualForOf: [{
1199
+ type: Input
1200
+ }],
1201
+ cdkVirtualForTrackBy: [{
1202
+ type: Input
1203
+ }],
1204
+ cdkVirtualForTemplate: [{
1205
+ type: Input
1206
+ }],
1207
+ cdkVirtualForTemplateCacheSize: [{
1208
+ type: Input
1209
+ }]
1210
+ }
1211
+ });
1366
1212
 
1367
- /**
1368
- * Provides a virtual scrollable for the element it is attached to.
1369
- */
1370
1213
  class CdkVirtualScrollableElement extends CdkVirtualScrollable {
1371
- constructor() {
1372
- super();
1373
- }
1374
- measureBoundingClientRectWithScrollOffset(from) {
1375
- return (this.getElementRef().nativeElement.getBoundingClientRect()[from] -
1376
- this.measureScrollOffset(from));
1377
- }
1378
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CdkVirtualScrollableElement, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1379
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: CdkVirtualScrollableElement, isStandalone: true, selector: "[cdkVirtualScrollingElement]", host: { classAttribute: "cdk-virtual-scrollable" }, providers: [{ provide: VIRTUAL_SCROLLABLE, useExisting: CdkVirtualScrollableElement }], usesInheritance: true, ngImport: i0 });
1214
+ constructor() {
1215
+ super();
1216
+ }
1217
+ measureBoundingClientRectWithScrollOffset(from) {
1218
+ return this.getElementRef().nativeElement.getBoundingClientRect()[from] - this.measureScrollOffset(from);
1219
+ }
1220
+ static ɵfac = i0.ɵɵngDeclareFactory({
1221
+ minVersion: "12.0.0",
1222
+ version: "20.2.0-next.2",
1223
+ ngImport: i0,
1224
+ type: CdkVirtualScrollableElement,
1225
+ deps: [],
1226
+ target: i0.ɵɵFactoryTarget.Directive
1227
+ });
1228
+ static ɵdir = i0.ɵɵngDeclareDirective({
1229
+ minVersion: "14.0.0",
1230
+ version: "20.2.0-next.2",
1231
+ type: CdkVirtualScrollableElement,
1232
+ isStandalone: true,
1233
+ selector: "[cdkVirtualScrollingElement]",
1234
+ host: {
1235
+ classAttribute: "cdk-virtual-scrollable"
1236
+ },
1237
+ providers: [{
1238
+ provide: VIRTUAL_SCROLLABLE,
1239
+ useExisting: CdkVirtualScrollableElement
1240
+ }],
1241
+ usesInheritance: true,
1242
+ ngImport: i0
1243
+ });
1380
1244
  }
1381
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CdkVirtualScrollableElement, decorators: [{
1382
- type: Directive,
1383
- args: [{
1384
- selector: '[cdkVirtualScrollingElement]',
1385
- providers: [{ provide: VIRTUAL_SCROLLABLE, useExisting: CdkVirtualScrollableElement }],
1386
- host: {
1387
- 'class': 'cdk-virtual-scrollable',
1388
- },
1389
- }]
1390
- }], ctorParameters: () => [] });
1245
+ i0.ɵɵngDeclareClassMetadata({
1246
+ minVersion: "12.0.0",
1247
+ version: "20.2.0-next.2",
1248
+ ngImport: i0,
1249
+ type: CdkVirtualScrollableElement,
1250
+ decorators: [{
1251
+ type: Directive,
1252
+ args: [{
1253
+ selector: '[cdkVirtualScrollingElement]',
1254
+ providers: [{
1255
+ provide: VIRTUAL_SCROLLABLE,
1256
+ useExisting: CdkVirtualScrollableElement
1257
+ }],
1258
+ host: {
1259
+ 'class': 'cdk-virtual-scrollable'
1260
+ }
1261
+ }]
1262
+ }],
1263
+ ctorParameters: () => []
1264
+ });
1391
1265
 
1392
- /**
1393
- * Provides as virtual scrollable for the global / window scrollbar.
1394
- */
1395
1266
  class CdkVirtualScrollableWindow extends CdkVirtualScrollable {
1396
- constructor() {
1397
- super();
1398
- const document = inject(DOCUMENT);
1399
- this.elementRef = new ElementRef(document.documentElement);
1400
- this._scrollElement = document;
1401
- }
1402
- measureBoundingClientRectWithScrollOffset(from) {
1403
- return this.getElementRef().nativeElement.getBoundingClientRect()[from];
1404
- }
1405
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CdkVirtualScrollableWindow, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1406
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: CdkVirtualScrollableWindow, isStandalone: true, selector: "cdk-virtual-scroll-viewport[scrollWindow]", providers: [{ provide: VIRTUAL_SCROLLABLE, useExisting: CdkVirtualScrollableWindow }], usesInheritance: true, ngImport: i0 });
1267
+ constructor() {
1268
+ super();
1269
+ const document = inject(DOCUMENT);
1270
+ this.elementRef = new ElementRef(document.documentElement);
1271
+ this._scrollElement = document;
1272
+ }
1273
+ measureBoundingClientRectWithScrollOffset(from) {
1274
+ return this.getElementRef().nativeElement.getBoundingClientRect()[from];
1275
+ }
1276
+ static ɵfac = i0.ɵɵngDeclareFactory({
1277
+ minVersion: "12.0.0",
1278
+ version: "20.2.0-next.2",
1279
+ ngImport: i0,
1280
+ type: CdkVirtualScrollableWindow,
1281
+ deps: [],
1282
+ target: i0.ɵɵFactoryTarget.Directive
1283
+ });
1284
+ static ɵdir = i0.ɵɵngDeclareDirective({
1285
+ minVersion: "14.0.0",
1286
+ version: "20.2.0-next.2",
1287
+ type: CdkVirtualScrollableWindow,
1288
+ isStandalone: true,
1289
+ selector: "cdk-virtual-scroll-viewport[scrollWindow]",
1290
+ providers: [{
1291
+ provide: VIRTUAL_SCROLLABLE,
1292
+ useExisting: CdkVirtualScrollableWindow
1293
+ }],
1294
+ usesInheritance: true,
1295
+ ngImport: i0
1296
+ });
1407
1297
  }
1408
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CdkVirtualScrollableWindow, decorators: [{
1409
- type: Directive,
1410
- args: [{
1411
- selector: 'cdk-virtual-scroll-viewport[scrollWindow]',
1412
- providers: [{ provide: VIRTUAL_SCROLLABLE, useExisting: CdkVirtualScrollableWindow }],
1413
- }]
1414
- }], ctorParameters: () => [] });
1298
+ i0.ɵɵngDeclareClassMetadata({
1299
+ minVersion: "12.0.0",
1300
+ version: "20.2.0-next.2",
1301
+ ngImport: i0,
1302
+ type: CdkVirtualScrollableWindow,
1303
+ decorators: [{
1304
+ type: Directive,
1305
+ args: [{
1306
+ selector: 'cdk-virtual-scroll-viewport[scrollWindow]',
1307
+ providers: [{
1308
+ provide: VIRTUAL_SCROLLABLE,
1309
+ useExisting: CdkVirtualScrollableWindow
1310
+ }]
1311
+ }]
1312
+ }],
1313
+ ctorParameters: () => []
1314
+ });
1415
1315
 
1416
1316
  class CdkScrollableModule {
1417
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CdkScrollableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1418
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.0-next.2", ngImport: i0, type: CdkScrollableModule, imports: [CdkScrollable], exports: [CdkScrollable] });
1419
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CdkScrollableModule });
1317
+ static ɵfac = i0.ɵɵngDeclareFactory({
1318
+ minVersion: "12.0.0",
1319
+ version: "20.2.0-next.2",
1320
+ ngImport: i0,
1321
+ type: CdkScrollableModule,
1322
+ deps: [],
1323
+ target: i0.ɵɵFactoryTarget.NgModule
1324
+ });
1325
+ static ɵmod = i0.ɵɵngDeclareNgModule({
1326
+ minVersion: "14.0.0",
1327
+ version: "20.2.0-next.2",
1328
+ ngImport: i0,
1329
+ type: CdkScrollableModule,
1330
+ imports: [CdkScrollable],
1331
+ exports: [CdkScrollable]
1332
+ });
1333
+ static ɵinj = i0.ɵɵngDeclareInjector({
1334
+ minVersion: "12.0.0",
1335
+ version: "20.2.0-next.2",
1336
+ ngImport: i0,
1337
+ type: CdkScrollableModule
1338
+ });
1420
1339
  }
1421
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CdkScrollableModule, decorators: [{
1422
- type: NgModule,
1423
- args: [{
1424
- exports: [CdkScrollable],
1425
- imports: [CdkScrollable],
1426
- }]
1427
- }] });
1428
- /**
1429
- * @docs-primary-export
1430
- */
1340
+ i0.ɵɵngDeclareClassMetadata({
1341
+ minVersion: "12.0.0",
1342
+ version: "20.2.0-next.2",
1343
+ ngImport: i0,
1344
+ type: CdkScrollableModule,
1345
+ decorators: [{
1346
+ type: NgModule,
1347
+ args: [{
1348
+ exports: [CdkScrollable],
1349
+ imports: [CdkScrollable]
1350
+ }]
1351
+ }]
1352
+ });
1431
1353
  class ScrollingModule {
1432
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: ScrollingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1433
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.0-next.2", ngImport: i0, type: ScrollingModule, imports: [BidiModule, CdkScrollableModule, CdkVirtualScrollViewport,
1434
- CdkFixedSizeVirtualScroll,
1435
- CdkVirtualForOf,
1436
- CdkVirtualScrollableWindow,
1437
- CdkVirtualScrollableElement], exports: [BidiModule, CdkScrollableModule, CdkFixedSizeVirtualScroll,
1438
- CdkVirtualForOf,
1439
- CdkVirtualScrollViewport,
1440
- CdkVirtualScrollableWindow,
1441
- CdkVirtualScrollableElement] });
1442
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: ScrollingModule, imports: [BidiModule,
1443
- CdkScrollableModule, BidiModule, CdkScrollableModule] });
1354
+ static ɵfac = i0.ɵɵngDeclareFactory({
1355
+ minVersion: "12.0.0",
1356
+ version: "20.2.0-next.2",
1357
+ ngImport: i0,
1358
+ type: ScrollingModule,
1359
+ deps: [],
1360
+ target: i0.ɵɵFactoryTarget.NgModule
1361
+ });
1362
+ static ɵmod = i0.ɵɵngDeclareNgModule({
1363
+ minVersion: "14.0.0",
1364
+ version: "20.2.0-next.2",
1365
+ ngImport: i0,
1366
+ type: ScrollingModule,
1367
+ imports: [BidiModule, CdkScrollableModule, CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollableWindow, CdkVirtualScrollableElement],
1368
+ exports: [BidiModule, CdkScrollableModule, CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport, CdkVirtualScrollableWindow, CdkVirtualScrollableElement]
1369
+ });
1370
+ static ɵinj = i0.ɵɵngDeclareInjector({
1371
+ minVersion: "12.0.0",
1372
+ version: "20.2.0-next.2",
1373
+ ngImport: i0,
1374
+ type: ScrollingModule,
1375
+ imports: [BidiModule, CdkScrollableModule, BidiModule, CdkScrollableModule]
1376
+ });
1444
1377
  }
1445
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: ScrollingModule, decorators: [{
1446
- type: NgModule,
1447
- args: [{
1448
- imports: [
1449
- BidiModule,
1450
- CdkScrollableModule,
1451
- CdkVirtualScrollViewport,
1452
- CdkFixedSizeVirtualScroll,
1453
- CdkVirtualForOf,
1454
- CdkVirtualScrollableWindow,
1455
- CdkVirtualScrollableElement,
1456
- ],
1457
- exports: [
1458
- BidiModule,
1459
- CdkScrollableModule,
1460
- CdkFixedSizeVirtualScroll,
1461
- CdkVirtualForOf,
1462
- CdkVirtualScrollViewport,
1463
- CdkVirtualScrollableWindow,
1464
- CdkVirtualScrollableElement,
1465
- ],
1466
- }]
1467
- }] });
1378
+ i0.ɵɵngDeclareClassMetadata({
1379
+ minVersion: "12.0.0",
1380
+ version: "20.2.0-next.2",
1381
+ ngImport: i0,
1382
+ type: ScrollingModule,
1383
+ decorators: [{
1384
+ type: NgModule,
1385
+ args: [{
1386
+ imports: [BidiModule, CdkScrollableModule, CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollableWindow, CdkVirtualScrollableElement],
1387
+ exports: [BidiModule, CdkScrollableModule, CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport, CdkVirtualScrollableWindow, CdkVirtualScrollableElement]
1388
+ }]
1389
+ }]
1390
+ });
1468
1391
 
1469
1392
  export { CdkFixedSizeVirtualScroll, CdkScrollable, CdkScrollableModule, CdkVirtualForOf, CdkVirtualScrollViewport, CdkVirtualScrollable, CdkVirtualScrollableElement, CdkVirtualScrollableWindow, DEFAULT_RESIZE_TIME, DEFAULT_SCROLL_TIME, FixedSizeVirtualScrollStrategy, ScrollDispatcher, ScrollingModule, VIRTUAL_SCROLLABLE, VIRTUAL_SCROLL_STRATEGY, ViewportRuler, _fixedSizeVirtualScrollStrategyFactory };
1470
1393
  //# sourceMappingURL=scrolling.mjs.map