@angular/cdk 21.0.0-next.8 → 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.
- package/_adev_assets/cdk_drag_drop.json +13 -12
- package/_adev_assets/cdk_testing.json +15 -25
- package/_adev_assets/cdk_testing_protractor.json +1 -1
- package/_adev_assets/cdk_testing_selenium_webdriver.json +1 -1
- package/_adev_assets/cdk_testing_testbed.json +1 -1
- package/fesm2022/_a11y-module-chunk.mjs +755 -869
- package/fesm2022/_a11y-module-chunk.mjs.map +1 -1
- package/fesm2022/_activedescendant-key-manager-chunk.mjs +8 -8
- package/fesm2022/_activedescendant-key-manager-chunk.mjs.map +1 -1
- package/fesm2022/_array-chunk.mjs +1 -1
- package/fesm2022/_array-chunk.mjs.map +1 -1
- package/fesm2022/_breakpoints-observer-chunk.mjs +149 -152
- package/fesm2022/_breakpoints-observer-chunk.mjs.map +1 -1
- package/fesm2022/_css-pixel-value-chunk.mjs +4 -5
- package/fesm2022/_css-pixel-value-chunk.mjs.map +1 -1
- package/fesm2022/_data-source-chunk.mjs +2 -8
- package/fesm2022/_data-source-chunk.mjs.map +1 -1
- package/fesm2022/_directionality-chunk.mjs +54 -54
- package/fesm2022/_directionality-chunk.mjs.map +1 -1
- package/fesm2022/_dispose-view-repeater-strategy-chunk.mjs +25 -36
- package/fesm2022/_dispose-view-repeater-strategy-chunk.mjs.map +1 -1
- package/fesm2022/_element-chunk.mjs +6 -17
- package/fesm2022/_element-chunk.mjs.map +1 -1
- package/fesm2022/_fake-event-detection-chunk.mjs +3 -17
- package/fesm2022/_fake-event-detection-chunk.mjs.map +1 -1
- package/fesm2022/_focus-key-manager-chunk.mjs +10 -14
- package/fesm2022/_focus-key-manager-chunk.mjs.map +1 -1
- package/fesm2022/_focus-monitor-chunk.mjs +376 -566
- package/fesm2022/_focus-monitor-chunk.mjs.map +1 -1
- package/fesm2022/_id-generator-chunk.mjs +36 -27
- package/fesm2022/_id-generator-chunk.mjs.map +1 -1
- package/fesm2022/_keycodes-chunk.mjs +9 -9
- package/fesm2022/_keycodes-chunk.mjs.map +1 -1
- package/fesm2022/_list-key-manager-chunk.mjs +248 -336
- package/fesm2022/_list-key-manager-chunk.mjs.map +1 -1
- package/fesm2022/_overlay-module-chunk.mjs +2534 -2948
- package/fesm2022/_overlay-module-chunk.mjs.map +1 -1
- package/fesm2022/_passive-listeners-chunk.mjs +10 -22
- package/fesm2022/_passive-listeners-chunk.mjs.map +1 -1
- package/fesm2022/_platform-chunk.mjs +42 -65
- package/fesm2022/_platform-chunk.mjs.map +1 -1
- package/fesm2022/_recycle-view-repeater-strategy-chunk.mjs +78 -134
- package/fesm2022/_recycle-view-repeater-strategy-chunk.mjs.map +1 -1
- package/fesm2022/_scrolling-chunk.mjs +44 -85
- package/fesm2022/_scrolling-chunk.mjs.map +1 -1
- package/fesm2022/_selection-model-chunk.mjs +138 -209
- package/fesm2022/_selection-model-chunk.mjs.map +1 -1
- package/fesm2022/_shadow-dom-chunk.mjs +21 -35
- package/fesm2022/_shadow-dom-chunk.mjs.map +1 -1
- package/fesm2022/_style-loader-chunk.mjs +50 -37
- package/fesm2022/_style-loader-chunk.mjs.map +1 -1
- package/fesm2022/_test-environment-chunk.mjs +2 -14
- package/fesm2022/_test-environment-chunk.mjs.map +1 -1
- package/fesm2022/_tree-key-manager-chunk.mjs +229 -308
- package/fesm2022/_tree-key-manager-chunk.mjs.map +1 -1
- package/fesm2022/_typeahead-chunk.mjs +52 -74
- package/fesm2022/_typeahead-chunk.mjs.map +1 -1
- package/fesm2022/_unique-selection-dispatcher-chunk.mjs +43 -40
- package/fesm2022/_unique-selection-dispatcher-chunk.mjs.map +1 -1
- package/fesm2022/a11y.mjs +351 -449
- package/fesm2022/a11y.mjs.map +1 -1
- package/fesm2022/accordion.mjs +254 -192
- package/fesm2022/accordion.mjs.map +1 -1
- package/fesm2022/bidi.mjs +121 -64
- package/fesm2022/bidi.mjs.map +1 -1
- package/fesm2022/cdk.mjs +1 -2
- package/fesm2022/cdk.mjs.map +1 -1
- package/fesm2022/clipboard.mjs +208 -186
- package/fesm2022/clipboard.mjs.map +1 -1
- package/fesm2022/coercion-private.mjs +4 -8
- package/fesm2022/coercion-private.mjs.map +1 -1
- package/fesm2022/coercion.mjs +11 -29
- package/fesm2022/coercion.mjs.map +1 -1
- package/fesm2022/dialog.mjs +660 -808
- package/fesm2022/dialog.mjs.map +1 -1
- package/fesm2022/drag-drop.mjs +3347 -4286
- package/fesm2022/drag-drop.mjs.map +1 -1
- package/fesm2022/keycodes.mjs +4 -8
- package/fesm2022/keycodes.mjs.map +1 -1
- package/fesm2022/layout.mjs +44 -26
- package/fesm2022/layout.mjs.map +1 -1
- package/fesm2022/listbox.mjs +841 -895
- package/fesm2022/listbox.mjs.map +1 -1
- package/fesm2022/menu.mjs +1942 -1858
- package/fesm2022/menu.mjs.map +1 -1
- package/fesm2022/observers-private.mjs +88 -106
- package/fesm2022/observers-private.mjs.map +1 -1
- package/fesm2022/observers.mjs +262 -184
- package/fesm2022/observers.mjs.map +1 -1
- package/fesm2022/overlay.mjs +72 -68
- package/fesm2022/overlay.mjs.map +1 -1
- package/fesm2022/platform.mjs +43 -54
- package/fesm2022/platform.mjs.map +1 -1
- package/fesm2022/portal.mjs +402 -560
- package/fesm2022/portal.mjs.map +1 -1
- package/fesm2022/private.mjs +38 -10
- package/fesm2022/private.mjs.map +1 -1
- package/fesm2022/scrolling.mjs +1323 -1400
- package/fesm2022/scrolling.mjs.map +1 -1
- package/fesm2022/stepper.mjs +758 -590
- package/fesm2022/stepper.mjs.map +1 -1
- package/fesm2022/table.mjs +2327 -2319
- package/fesm2022/table.mjs.map +1 -1
- package/fesm2022/testing-selenium-webdriver.mjs +252 -325
- package/fesm2022/testing-selenium-webdriver.mjs.map +1 -1
- package/fesm2022/testing-testbed.mjs +592 -709
- package/fesm2022/testing-testbed.mjs.map +1 -1
- package/fesm2022/testing.mjs +368 -889
- package/fesm2022/testing.mjs.map +1 -1
- package/fesm2022/text-field.mjs +459 -388
- package/fesm2022/text-field.mjs.map +1 -1
- package/fesm2022/tree.mjs +1483 -1731
- package/fesm2022/tree.mjs.map +1 -1
- package/overlay/_index.scss +28 -0
- package/overlay-prebuilt.css +1 -1
- package/package.json +1 -1
- package/schematics/ng-add/index.js +1 -1
- package/types/_harness-environment-chunk.d.ts +1 -2
- package/types/_overlay-module-chunk.d.ts +59 -7
- package/types/_portal-directives-chunk.d.ts +2 -18
- package/types/accordion.d.ts +3 -1
- package/types/dialog.d.ts +1 -1
- package/types/overlay.d.ts +6 -2
- package/types/portal.d.ts +1 -1
package/fesm2022/scrolling.mjs
CHANGED
|
@@ -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
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
_minBufferPx;
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
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
|
-
|
|
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
|
-
|
|
112
|
+
return fixedSizeDir._scrollStrategy;
|
|
160
113
|
}
|
|
161
|
-
/** A virtual scroll strategy that supports fixed-size items. */
|
|
162
114
|
class CdkFixedSizeVirtualScroll {
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
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({
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
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
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
}
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
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
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
scrolled(auditTimeInMs
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
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({
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
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
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
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({
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
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
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
const
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
}
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
}
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
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({
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
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
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
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({
|
|
656
|
-
|
|
657
|
-
|
|
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
|
-
|
|
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
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
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
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
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.
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
this.
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
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
|
-
|
|
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
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
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({
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
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
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
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
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
|
|
1213
|
-
|
|
1214
|
-
|
|
1215
|
-
|
|
1216
|
-
|
|
1217
|
-
|
|
1218
|
-
|
|
1219
|
-
|
|
1220
|
-
|
|
1221
|
-
|
|
1222
|
-
|
|
1223
|
-
|
|
1224
|
-
|
|
1225
|
-
|
|
1226
|
-
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
|
|
1232
|
-
|
|
1233
|
-
|
|
1234
|
-
|
|
1235
|
-
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
|
|
1246
|
-
|
|
1247
|
-
|
|
1248
|
-
|
|
1249
|
-
|
|
1250
|
-
|
|
1251
|
-
|
|
1252
|
-
|
|
1253
|
-
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
|
|
1258
|
-
|
|
1259
|
-
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
|
|
1263
|
-
|
|
1264
|
-
|
|
1265
|
-
|
|
1266
|
-
|
|
1267
|
-
|
|
1268
|
-
|
|
1269
|
-
|
|
1270
|
-
|
|
1271
|
-
|
|
1272
|
-
|
|
1273
|
-
|
|
1274
|
-
|
|
1275
|
-
|
|
1276
|
-
|
|
1277
|
-
|
|
1278
|
-
|
|
1279
|
-
|
|
1280
|
-
|
|
1281
|
-
|
|
1282
|
-
|
|
1283
|
-
|
|
1284
|
-
|
|
1285
|
-
|
|
1286
|
-
|
|
1287
|
-
|
|
1288
|
-
|
|
1289
|
-
|
|
1290
|
-
|
|
1291
|
-
|
|
1292
|
-
|
|
1293
|
-
|
|
1294
|
-
|
|
1295
|
-
|
|
1296
|
-
|
|
1297
|
-
|
|
1298
|
-
|
|
1299
|
-
|
|
1300
|
-
|
|
1301
|
-
|
|
1302
|
-
|
|
1303
|
-
|
|
1304
|
-
|
|
1305
|
-
|
|
1306
|
-
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
|
|
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({
|
|
1352
|
-
|
|
1353
|
-
|
|
1354
|
-
|
|
1355
|
-
|
|
1356
|
-
|
|
1357
|
-
|
|
1358
|
-
|
|
1359
|
-
|
|
1360
|
-
|
|
1361
|
-
|
|
1362
|
-
|
|
1363
|
-
|
|
1364
|
-
|
|
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
|
-
|
|
1372
|
-
|
|
1373
|
-
|
|
1374
|
-
|
|
1375
|
-
|
|
1376
|
-
|
|
1377
|
-
|
|
1378
|
-
|
|
1379
|
-
|
|
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({
|
|
1382
|
-
|
|
1383
|
-
|
|
1384
|
-
|
|
1385
|
-
|
|
1386
|
-
|
|
1387
|
-
|
|
1388
|
-
|
|
1389
|
-
|
|
1390
|
-
|
|
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
|
-
|
|
1397
|
-
|
|
1398
|
-
|
|
1399
|
-
|
|
1400
|
-
|
|
1401
|
-
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
|
|
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({
|
|
1409
|
-
|
|
1410
|
-
|
|
1411
|
-
|
|
1412
|
-
|
|
1413
|
-
|
|
1414
|
-
|
|
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
|
-
|
|
1418
|
-
|
|
1419
|
-
|
|
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({
|
|
1422
|
-
|
|
1423
|
-
|
|
1424
|
-
|
|
1425
|
-
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
|
|
1429
|
-
|
|
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
|
-
|
|
1433
|
-
|
|
1434
|
-
|
|
1435
|
-
|
|
1436
|
-
|
|
1437
|
-
|
|
1438
|
-
|
|
1439
|
-
|
|
1440
|
-
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
|
|
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({
|
|
1446
|
-
|
|
1447
|
-
|
|
1448
|
-
|
|
1449
|
-
|
|
1450
|
-
|
|
1451
|
-
|
|
1452
|
-
|
|
1453
|
-
|
|
1454
|
-
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
|
|
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
|