ng-virtual-list 21.10.0 → 21.10.2
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/README.md +7 -8
- package/fesm2022/ng-virtual-list.mjs +107 -51
- package/fesm2022/ng-virtual-list.mjs.map +1 -1
- package/package.json +1 -1
- package/types/ng-virtual-list.d.ts +3 -0
package/README.md
CHANGED
|
@@ -737,14 +737,13 @@ Properties
|
|
|
737
737
|
|
|
738
738
|
| Angular version | ng-virtual-list version | git | npm |
|
|
739
739
|
|--|--|--|--|
|
|
740
|
-
| 20.x | 20.10.
|
|
741
|
-
| 19.x | 19.10.
|
|
742
|
-
| 18.x | 18.10.
|
|
743
|
-
| 17.x | 17.10.
|
|
744
|
-
| 16.x | 16.
|
|
745
|
-
| 15.x | 15.
|
|
746
|
-
| 14.x | 14.
|
|
747
|
-
|
|
740
|
+
| 20.x | 20.10.3 | [20.x](https://github.com/DjonnyX/ng-virtual-list/tree/20.x) | [20.10.3](https://www.npmjs.com/package/ng-virtual-list/v/20.10.3) |
|
|
741
|
+
| 19.x | 19.10.1 | [19.x](https://github.com/DjonnyX/ng-virtual-list/tree/19.x) | [19.10.1](https://www.npmjs.com/package/ng-virtual-list/v/19.10.1) |
|
|
742
|
+
| 18.x | 18.10.1 | [18.x](https://github.com/DjonnyX/ng-virtual-list/tree/18.x) | [18.10.1](https://www.npmjs.com/package/ng-virtual-list/v/18.10.1) |
|
|
743
|
+
| 17.x | 17.10.1 | [17.x](https://github.com/DjonnyX/ng-virtual-list/tree/17.x) | [17.10.1](https://www.npmjs.com/package/ng-virtual-list/v/17.10.1) |
|
|
744
|
+
| 16.x | 16.10.0 | [16.x](https://github.com/DjonnyX/ng-virtual-list/tree/16.x) | [16.10.0](https://www.npmjs.com/package/ng-virtual-list/v/16.10.0) |
|
|
745
|
+
| 15.x | 15.10.0 | [15.x](https://github.com/DjonnyX/ng-virtual-list/tree/15.x) | [15.10.0](https://www.npmjs.com/package/ng-virtual-list/v/15.10.0) |
|
|
746
|
+
| 14.x | 14.10.1 | [14.x](https://github.com/DjonnyX/ng-virtual-list/tree/14.x) | [14.10.1](https://www.npmjs.com/package/ng-virtual-list/v/14.10.1) |
|
|
748
747
|
<br/>
|
|
749
748
|
|
|
750
749
|
## 🤝 Contributing
|
|
@@ -3462,8 +3462,9 @@ class NgScrollView {
|
|
|
3462
3462
|
this._$scroll.next(userAction);
|
|
3463
3463
|
}
|
|
3464
3464
|
onDragStart() { }
|
|
3465
|
-
reset() {
|
|
3466
|
-
this.
|
|
3465
|
+
reset(offset = 0) {
|
|
3466
|
+
this.stopScrolling();
|
|
3467
|
+
this.move(this.isVertical(), offset);
|
|
3467
3468
|
}
|
|
3468
3469
|
ngOnDestroy() {
|
|
3469
3470
|
if (this._animator) {
|
|
@@ -3829,11 +3830,13 @@ class NgScrollerComponent extends NgScrollView {
|
|
|
3829
3830
|
this.updateScrollBar();
|
|
3830
3831
|
}
|
|
3831
3832
|
reset() {
|
|
3832
|
-
super.reset();
|
|
3833
|
+
super.reset(this.startOffset());
|
|
3834
|
+
this.totalSize = 0;
|
|
3833
3835
|
if (this.scrollBar) {
|
|
3834
3836
|
this.scrollBar.stopScrolling();
|
|
3835
3837
|
}
|
|
3836
|
-
this.
|
|
3838
|
+
this.refresh(true, true);
|
|
3839
|
+
this.prepared = false;
|
|
3837
3840
|
}
|
|
3838
3841
|
refresh(fireUpdate = false, updateScrollbar = true) {
|
|
3839
3842
|
this.scrollLimits();
|
|
@@ -3898,19 +3901,19 @@ class NgScrollerComponent extends NgScrollView {
|
|
|
3898
3901
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgScrollerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3899
3902
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: NgScrollerComponent, isStandalone: true, selector: "ng-scroller", inputs: { scrollbarEnabled: { classPropertyName: "scrollbarEnabled", publicName: "scrollbarEnabled", isSignal: true, isRequired: false, transformFunction: null }, scrollbarInteractive: { classPropertyName: "scrollbarInteractive", publicName: "scrollbarInteractive", isSignal: true, isRequired: false, transformFunction: null }, focusedElement: { classPropertyName: "focusedElement", publicName: "focusedElement", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null }, startOffset: { classPropertyName: "startOffset", publicName: "startOffset", isSignal: true, isRequired: false, transformFunction: null }, endOffset: { classPropertyName: "endOffset", publicName: "endOffset", isSignal: true, isRequired: false, transformFunction: null }, scrollbarTheme: { classPropertyName: "scrollbarTheme", publicName: "scrollbarTheme", isSignal: true, isRequired: false, transformFunction: null }, scrollbarMinSize: { classPropertyName: "scrollbarMinSize", publicName: "scrollbarMinSize", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
3900
3903
|
{ provide: SCROLL_VIEW_INVERSION, useValue: false },
|
|
3901
|
-
], viewQueries: [{ propertyName: "scrollBar", first: true, predicate: ["scrollBar"], descendants: true, read: NgScrollBarComponent }], usesInheritance: true, ngImport: i0, template: "<div localeSensitive [langTextDir]=\"langTextDir()\" [listDir]=\"direction()\" class=\"ngvl__container\"\r\n [ngClass]=\"containerClasses()\">\r\n <div #scrollViewport cdkScrollable part=\"scroller\" class=\"ngvl__scroller\">\r\n <div #scrollContent [attr.aria-orientation]=\"direction()\" [attr.aria-activedescendant]=\"focusedElement()\"\r\n tabindex=\"0\" part=\"list\" class=\"ngvl__list\" [ngClass]=\"actualClasses()\">\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n @let prepared = preparedSignal();\r\n <ng-scroll-bar #scrollBar [direction]=\"direction()\" [size]=\"thumbSize()\" [theme]=\"scrollbarTheme()\"\r\n [thumbGradientPositions]=\"thumbGradientPositions()\" [loading]=\"loading()\" [prepared]=\"prepared\"\r\n [interactive]=\"scrollbarInteractive()\" [show]=\"scrollbarShow() && scrollbarEnabled() && prepared\"\r\n [startOffset]=\"startOffset()\" [endOffset]=\"endOffset()\" [overscrollEnabled]=\"overscrollEnabled()\"\r\n [scrollBehavior]=\"scrollBehavior()\" [scrollbarMinSize]=\"scrollbarMinSize()\"\r\n (onDrag)=\"onScrollBarDragHandler($event)\"></ng-scroll-bar>\r\n</div>", styles: [":host{position:relative;overflow:hidden;-webkit-user-select:none;user-select:none}.ngvl__container{position:relative;overflow:hidden;display:grid;width:100%;height:100%;cursor:grab}.ngvl__container.grabbing{cursor:grabbing}.ngvl__container.horizontal{grid-template-rows:1fr 0;transition:grid-template-rows .1s ease-out}.ngvl__container.horizontal.scrollable.enabled{grid-template-rows:1fr auto}.ngvl__container.horizontal .ngvl__list{display:inline-flex}.ngvl__container.horizontal .ngvl__scroller{overflow:hidden}.ngvl__container.vertical{grid-template-columns:1fr 0;transition:grid-template-columns .1s ease-out}.ngvl__container.vertical.scrollable.enabled{grid-template-columns:1fr auto}.ngvl__container.vertical .ngvl__scroller{overflow:hidden}.ngvl__scroller{display:block;position:relative;overflow:hidden;width:100%;height:100%}.ngvl__list{position:absolute;list-style:none;padding:0;margin:0;width:100%;height:100%;opacity:0}.ngvl__list.prepared{opacity:1;overflow:hidden}
|
|
3904
|
+
], viewQueries: [{ propertyName: "scrollBar", first: true, predicate: ["scrollBar"], descendants: true, read: NgScrollBarComponent }], usesInheritance: true, ngImport: i0, template: "<div localeSensitive [langTextDir]=\"langTextDir()\" [listDir]=\"direction()\" class=\"ngvl__container\"\r\n [ngClass]=\"containerClasses()\">\r\n <div #scrollViewport cdkScrollable part=\"scroller\" class=\"ngvl__scroller\">\r\n <div #scrollContent [attr.aria-orientation]=\"direction()\" [attr.aria-activedescendant]=\"focusedElement()\"\r\n tabindex=\"0\" part=\"list\" class=\"ngvl__list\" [ngClass]=\"actualClasses()\">\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n @let prepared = preparedSignal();\r\n <ng-scroll-bar #scrollBar [direction]=\"direction()\" [size]=\"thumbSize()\" [theme]=\"scrollbarTheme()\"\r\n [thumbGradientPositions]=\"thumbGradientPositions()\" [loading]=\"loading()\" [prepared]=\"prepared\"\r\n [interactive]=\"scrollbarInteractive()\" [show]=\"scrollbarShow() && scrollbarEnabled() && prepared\"\r\n [startOffset]=\"startOffset()\" [endOffset]=\"endOffset()\" [overscrollEnabled]=\"overscrollEnabled()\"\r\n [scrollBehavior]=\"scrollBehavior()\" [scrollbarMinSize]=\"scrollbarMinSize()\"\r\n (onDrag)=\"onScrollBarDragHandler($event)\"></ng-scroll-bar>\r\n</div>", styles: [":host{position:relative;overflow:hidden;-webkit-user-select:none;user-select:none}.ngvl__container{position:relative;overflow:hidden;display:grid;width:100%;height:100%;cursor:grab}.ngvl__container.grabbing{cursor:grabbing}.ngvl__container.horizontal{grid-template-rows:1fr 0;transition:grid-template-rows .1s ease-out}.ngvl__container.horizontal.scrollable.enabled{grid-template-rows:1fr auto}.ngvl__container.horizontal .ngvl__list{display:inline-flex}.ngvl__container.horizontal .ngvl__scroller{overflow:hidden}.ngvl__container.vertical{grid-template-columns:1fr 0;transition:grid-template-columns .1s ease-out}.ngvl__container.vertical.scrollable.enabled{grid-template-columns:1fr auto}.ngvl__container.vertical .ngvl__scroller{overflow:hidden}.ngvl__scroller{display:block;position:relative;overflow:hidden;width:100%;height:100%}.ngvl__list{position:absolute;list-style:none;padding:0;margin:0;width:100%;height:100%;opacity:0}.ngvl__list.prepared{opacity:1;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: LocaleSensitiveDirective, selector: "[localeSensitive]", inputs: ["langTextDir", "listDir"] }, { kind: "component", type: NgScrollBarComponent, selector: "ng-scroll-bar", inputs: ["loading", "thumbGradientPositions", "size", "theme", "startOffset", "endOffset", "scrollbarMinSize", "prepared", "interactive", "show"], outputs: ["onDrag"] }] });
|
|
3902
3905
|
}
|
|
3903
3906
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgScrollerComponent, decorators: [{
|
|
3904
3907
|
type: Component,
|
|
3905
3908
|
args: [{ selector: 'ng-scroller', imports: [CommonModule, CdkScrollable, LocaleSensitiveDirective, NgScrollBarComponent], providers: [
|
|
3906
3909
|
{ provide: SCROLL_VIEW_INVERSION, useValue: false },
|
|
3907
|
-
], schemas: [NO_ERRORS_SCHEMA], template: "<div localeSensitive [langTextDir]=\"langTextDir()\" [listDir]=\"direction()\" class=\"ngvl__container\"\r\n [ngClass]=\"containerClasses()\">\r\n <div #scrollViewport cdkScrollable part=\"scroller\" class=\"ngvl__scroller\">\r\n <div #scrollContent [attr.aria-orientation]=\"direction()\" [attr.aria-activedescendant]=\"focusedElement()\"\r\n tabindex=\"0\" part=\"list\" class=\"ngvl__list\" [ngClass]=\"actualClasses()\">\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n @let prepared = preparedSignal();\r\n <ng-scroll-bar #scrollBar [direction]=\"direction()\" [size]=\"thumbSize()\" [theme]=\"scrollbarTheme()\"\r\n [thumbGradientPositions]=\"thumbGradientPositions()\" [loading]=\"loading()\" [prepared]=\"prepared\"\r\n [interactive]=\"scrollbarInteractive()\" [show]=\"scrollbarShow() && scrollbarEnabled() && prepared\"\r\n [startOffset]=\"startOffset()\" [endOffset]=\"endOffset()\" [overscrollEnabled]=\"overscrollEnabled()\"\r\n [scrollBehavior]=\"scrollBehavior()\" [scrollbarMinSize]=\"scrollbarMinSize()\"\r\n (onDrag)=\"onScrollBarDragHandler($event)\"></ng-scroll-bar>\r\n</div>", styles: [":host{position:relative;overflow:hidden;-webkit-user-select:none;user-select:none}.ngvl__container{position:relative;overflow:hidden;display:grid;width:100%;height:100%;cursor:grab}.ngvl__container.grabbing{cursor:grabbing}.ngvl__container.horizontal{grid-template-rows:1fr 0;transition:grid-template-rows .1s ease-out}.ngvl__container.horizontal.scrollable.enabled{grid-template-rows:1fr auto}.ngvl__container.horizontal .ngvl__list{display:inline-flex}.ngvl__container.horizontal .ngvl__scroller{overflow:hidden}.ngvl__container.vertical{grid-template-columns:1fr 0;transition:grid-template-columns .1s ease-out}.ngvl__container.vertical.scrollable.enabled{grid-template-columns:1fr auto}.ngvl__container.vertical .ngvl__scroller{overflow:hidden}.ngvl__scroller{display:block;position:relative;overflow:hidden;width:100%;height:100%}.ngvl__list{position:absolute;list-style:none;padding:0;margin:0;width:100%;height:100%;opacity:0}.ngvl__list.prepared{opacity:1;overflow:hidden}
|
|
3910
|
+
], schemas: [NO_ERRORS_SCHEMA], template: "<div localeSensitive [langTextDir]=\"langTextDir()\" [listDir]=\"direction()\" class=\"ngvl__container\"\r\n [ngClass]=\"containerClasses()\">\r\n <div #scrollViewport cdkScrollable part=\"scroller\" class=\"ngvl__scroller\">\r\n <div #scrollContent [attr.aria-orientation]=\"direction()\" [attr.aria-activedescendant]=\"focusedElement()\"\r\n tabindex=\"0\" part=\"list\" class=\"ngvl__list\" [ngClass]=\"actualClasses()\">\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n @let prepared = preparedSignal();\r\n <ng-scroll-bar #scrollBar [direction]=\"direction()\" [size]=\"thumbSize()\" [theme]=\"scrollbarTheme()\"\r\n [thumbGradientPositions]=\"thumbGradientPositions()\" [loading]=\"loading()\" [prepared]=\"prepared\"\r\n [interactive]=\"scrollbarInteractive()\" [show]=\"scrollbarShow() && scrollbarEnabled() && prepared\"\r\n [startOffset]=\"startOffset()\" [endOffset]=\"endOffset()\" [overscrollEnabled]=\"overscrollEnabled()\"\r\n [scrollBehavior]=\"scrollBehavior()\" [scrollbarMinSize]=\"scrollbarMinSize()\"\r\n (onDrag)=\"onScrollBarDragHandler($event)\"></ng-scroll-bar>\r\n</div>", styles: [":host{position:relative;overflow:hidden;-webkit-user-select:none;user-select:none}.ngvl__container{position:relative;overflow:hidden;display:grid;width:100%;height:100%;cursor:grab}.ngvl__container.grabbing{cursor:grabbing}.ngvl__container.horizontal{grid-template-rows:1fr 0;transition:grid-template-rows .1s ease-out}.ngvl__container.horizontal.scrollable.enabled{grid-template-rows:1fr auto}.ngvl__container.horizontal .ngvl__list{display:inline-flex}.ngvl__container.horizontal .ngvl__scroller{overflow:hidden}.ngvl__container.vertical{grid-template-columns:1fr 0;transition:grid-template-columns .1s ease-out}.ngvl__container.vertical.scrollable.enabled{grid-template-columns:1fr auto}.ngvl__container.vertical .ngvl__scroller{overflow:hidden}.ngvl__scroller{display:block;position:relative;overflow:hidden;width:100%;height:100%}.ngvl__list{position:absolute;list-style:none;padding:0;margin:0;width:100%;height:100%;opacity:0}.ngvl__list.prepared{opacity:1;overflow:hidden}\n"] }]
|
|
3908
3911
|
}], ctorParameters: () => [], propDecorators: { scrollBar: [{
|
|
3909
3912
|
type: ViewChild,
|
|
3910
3913
|
args: ['scrollBar', { read: NgScrollBarComponent }]
|
|
3911
3914
|
}], scrollbarEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollbarEnabled", required: false }] }], scrollbarInteractive: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollbarInteractive", required: false }] }], focusedElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusedElement", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], classes: [{ type: i0.Input, args: [{ isSignal: true, alias: "classes", required: false }] }], startOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "startOffset", required: false }] }], endOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "endOffset", required: false }] }], scrollbarTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollbarTheme", required: false }] }], scrollbarMinSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollbarMinSize", required: false }] }] } });
|
|
3912
3915
|
|
|
3913
|
-
const MIN_SCROLL_TO_START_PIXELS = 10, RANGE_DISPLAY_ITEMS_END_OFFSET = 20, ROLE_LIST = 'list', ROLE_LIST_BOX = 'listbox', ITEM_ID = 'item-id', ITEM_CONTAINER = 'ngvl-item__container', READY_TO_START = 'ready-to-start', WAIT_FOR_PREPARATION = 'wait-for-preparation'
|
|
3916
|
+
const MIN_SCROLL_TO_START_PIXELS = 10, RANGE_DISPLAY_ITEMS_END_OFFSET = 20, DEFAULT_INIT_ITERATIONS = 30, ROLE_LIST = 'list', ROLE_LIST_BOX = 'listbox', ITEM_ID = 'item-id', ITEM_CONTAINER = 'ngvl-item__container', READY_TO_START = 'ready-to-start', WAIT_FOR_PREPARATION = 'wait-for-preparation';
|
|
3914
3917
|
const validateScrollIteration = (value) => {
|
|
3915
3918
|
return Number.isNaN(value) || (value < 0) ? 0 : value > MAX_SCROLL_TO_ITERATIONS ? MAX_SCROLL_TO_ITERATIONS : value;
|
|
3916
3919
|
}, validateId = (id) => {
|
|
@@ -4028,6 +4031,8 @@ class NgVirtualListComponent {
|
|
|
4028
4031
|
* Fires when the scroll reaches the end.
|
|
4029
4032
|
*/
|
|
4030
4033
|
onScrollReachEnd = output();
|
|
4034
|
+
_$show = new BehaviorSubject$1(false);
|
|
4035
|
+
$show = this._$show.asObservable();
|
|
4031
4036
|
_scrollbarTheme = {
|
|
4032
4037
|
transform: (v) => {
|
|
4033
4038
|
const valid = validateObject(v);
|
|
@@ -4785,7 +4790,9 @@ class NgVirtualListComponent {
|
|
|
4785
4790
|
}
|
|
4786
4791
|
}
|
|
4787
4792
|
};
|
|
4793
|
+
_$updateIteration = new BehaviorSubject$1(0);
|
|
4788
4794
|
_onPreparedHandler = (v) => {
|
|
4795
|
+
this._$updateIteration.next(0);
|
|
4789
4796
|
this._$prepared.next(v);
|
|
4790
4797
|
};
|
|
4791
4798
|
_destroyRef = inject(DestroyRef);
|
|
@@ -4826,50 +4833,92 @@ class NgVirtualListComponent {
|
|
|
4826
4833
|
this._service.clickDistance = dist;
|
|
4827
4834
|
});
|
|
4828
4835
|
let prepared = false, readyToStart = false, isUserScrolling = false;
|
|
4829
|
-
const $updateComplete = this.$update.pipe(takeUntilDestroyed(),
|
|
4830
|
-
|
|
4831
|
-
|
|
4836
|
+
const $updateComplete = this.$update.pipe(takeUntilDestroyed(), switchMap$1(() => {
|
|
4837
|
+
this._$updateIteration.next(this._$updateIteration.getValue() + 1);
|
|
4838
|
+
const iterations = Math.min(DEFAULT_INIT_ITERATIONS, this.items().length || 1);
|
|
4839
|
+
if (this._$updateIteration.getValue() <= iterations) {
|
|
4840
|
+
const scroller = this._scrollerComponent();
|
|
4841
|
+
if (!!scroller) {
|
|
4842
|
+
const isVerrtical = this._isVertical, actualScrollSize = isVerrtical ? (scroller?.actualScrollHeight ?? 0) : (scroller?.actualScrollWidth ?? 0), params = {
|
|
4843
|
+
[isVerrtical ? TOP_PROP_NAME : LEFT_PROP_NAME]: actualScrollSize,
|
|
4844
|
+
blending: false, fireUpdate: true, userAction: false, behavior: BEHAVIOR_INSTANT,
|
|
4845
|
+
};
|
|
4846
|
+
scroller.stopScrolling();
|
|
4847
|
+
scroller.scrollTo(params);
|
|
4848
|
+
this._service.update();
|
|
4849
|
+
}
|
|
4850
|
+
return of(false);
|
|
4851
|
+
}
|
|
4852
|
+
return of(true);
|
|
4853
|
+
}), debounceTime(200), distinctUntilChanged()), $items = toObservable(this.items).pipe(map(i => !i ? [] : i)), $dynamicSize = toObservable(this.dynamicSize);
|
|
4854
|
+
const $snapScrollToBottom = toObservable(this.snapScrollToBottom), $waitForPreparation = toObservable(this.waitForPreparation);
|
|
4855
|
+
combineLatest([$dynamicSize, $snapScrollToBottom, $waitForPreparation]).pipe(takeUntilDestroyed(), switchMap$1(([dynamicSize, snapScrollToBottom, waitForPreparation]) => {
|
|
4856
|
+
if (!dynamicSize || !snapScrollToBottom || !waitForPreparation) {
|
|
4832
4857
|
prepared = readyToStart = true;
|
|
4833
4858
|
const scrollerComponent = this._scrollerComponent();
|
|
4834
4859
|
if (scrollerComponent) {
|
|
4835
4860
|
scrollerComponent.prepared = true;
|
|
4836
4861
|
}
|
|
4837
4862
|
this.classes.set({ prepared: true, [READY_TO_START]: true, [WAIT_FOR_PREPARATION]: false });
|
|
4838
|
-
this._service.update(
|
|
4839
|
-
|
|
4840
|
-
|
|
4841
|
-
|
|
4842
|
-
|
|
4843
|
-
|
|
4844
|
-
|
|
4845
|
-
|
|
4846
|
-
|
|
4863
|
+
this._service.update();
|
|
4864
|
+
this._$show.next(true);
|
|
4865
|
+
return of(false);
|
|
4866
|
+
}
|
|
4867
|
+
if (!!dynamicSize && !!snapScrollToBottom && !!waitForPreparation) {
|
|
4868
|
+
this._$updateIteration.next(0);
|
|
4869
|
+
return this.$prepared.pipe(takeUntilDestroyed(this._destroyRef), distinctUntilChanged(), switchMap$1(v => {
|
|
4870
|
+
if (!v) {
|
|
4871
|
+
this._$show.next(false);
|
|
4872
|
+
readyToStart = isUserScrolling = prepared = false;
|
|
4873
|
+
this.cacheClean();
|
|
4847
4874
|
const scrollerComponent = this._scrollerComponent();
|
|
4848
4875
|
if (scrollerComponent) {
|
|
4849
|
-
scrollerComponent.prepared =
|
|
4876
|
+
scrollerComponent.prepared = false;
|
|
4877
|
+
scrollerComponent.stopScrolling();
|
|
4850
4878
|
}
|
|
4851
|
-
this.classes.set({ prepared: v, [READY_TO_START]: false, [WAIT_FOR_PREPARATION]:
|
|
4879
|
+
this.classes.set({ prepared: v, [READY_TO_START]: false, [WAIT_FOR_PREPARATION]: false });
|
|
4880
|
+
this._$updateIteration.next(0);
|
|
4881
|
+
this._service.update(true);
|
|
4882
|
+
return of(false);
|
|
4852
4883
|
}
|
|
4853
|
-
this.
|
|
4854
|
-
|
|
4855
|
-
|
|
4856
|
-
|
|
4857
|
-
|
|
4858
|
-
|
|
4859
|
-
|
|
4860
|
-
|
|
4861
|
-
|
|
4862
|
-
|
|
4863
|
-
|
|
4864
|
-
|
|
4865
|
-
|
|
4866
|
-
|
|
4867
|
-
|
|
4868
|
-
|
|
4869
|
-
|
|
4870
|
-
|
|
4871
|
-
|
|
4872
|
-
|
|
4884
|
+
return of(true).pipe(takeUntilDestroyed(this._destroyRef), switchMap$1(v => {
|
|
4885
|
+
const waitForPreparation = this.waitForPreparation();
|
|
4886
|
+
if (waitForPreparation) {
|
|
4887
|
+
return $updateComplete.pipe(takeUntilDestroyed(this._destroyRef), filter$1(v => !!v), take(1), tap(() => {
|
|
4888
|
+
prepared = readyToStart = true;
|
|
4889
|
+
const waitForPreparation = this.waitForPreparation(), scrollerComponent = this._scrollerComponent();
|
|
4890
|
+
if (scrollerComponent) {
|
|
4891
|
+
scrollerComponent.prepared = true;
|
|
4892
|
+
scrollerComponent.stopScrolling();
|
|
4893
|
+
}
|
|
4894
|
+
this.classes.set({ prepared: true, [READY_TO_START]: true, [WAIT_FOR_PREPARATION]: waitForPreparation });
|
|
4895
|
+
this._service.update(true);
|
|
4896
|
+
this._$show.next(true);
|
|
4897
|
+
}));
|
|
4898
|
+
}
|
|
4899
|
+
prepared = readyToStart = true;
|
|
4900
|
+
const scrollerComponent = this._scrollerComponent();
|
|
4901
|
+
if (scrollerComponent) {
|
|
4902
|
+
scrollerComponent.prepared = true;
|
|
4903
|
+
scrollerComponent.stopScrolling();
|
|
4904
|
+
}
|
|
4905
|
+
this.classes.set({ prepared: true, [READY_TO_START]: true, [WAIT_FOR_PREPARATION]: waitForPreparation });
|
|
4906
|
+
this._service.update(true);
|
|
4907
|
+
this._$show.next(true);
|
|
4908
|
+
return of(false);
|
|
4909
|
+
}));
|
|
4910
|
+
}));
|
|
4911
|
+
}
|
|
4912
|
+
prepared = readyToStart = true;
|
|
4913
|
+
const scrollerComponent = this._scrollerComponent();
|
|
4914
|
+
if (scrollerComponent) {
|
|
4915
|
+
scrollerComponent.prepared = true;
|
|
4916
|
+
scrollerComponent.stopScrolling();
|
|
4917
|
+
}
|
|
4918
|
+
this.classes.set({ prepared: true, [READY_TO_START]: true, [WAIT_FOR_PREPARATION]: false });
|
|
4919
|
+
this._service.update(true);
|
|
4920
|
+
this._$show.next(true);
|
|
4921
|
+
return of(false);
|
|
4873
4922
|
})).subscribe();
|
|
4874
4923
|
this._service.$focusedId.pipe(takeUntilDestroyed(), tap(v => {
|
|
4875
4924
|
this.focusedElement.set(v ?? undefined);
|
|
@@ -4877,7 +4926,7 @@ class NgVirtualListComponent {
|
|
|
4877
4926
|
toObservable(this._list).pipe(takeUntilDestroyed(), filter$1(v => !!v), tap(v => {
|
|
4878
4927
|
this._service.listElement = v.nativeElement;
|
|
4879
4928
|
})).subscribe();
|
|
4880
|
-
const $defaultItemValue = toObservable(this.defaultItemValue), $
|
|
4929
|
+
const $defaultItemValue = toObservable(this.defaultItemValue), $trackBy = toObservable(this.trackBy), $selectByClick = toObservable(this.selectByClick), $collapseByClick = toObservable(this.collapseByClick), $isScrollStart = toObservable(this._isScrollStart), $isScrollFinished = toObservable(this._isScrollFinished), $scrollStartOffset = toObservable(this.scrollStartOffset), $scrollEndOffset = toObservable(this.scrollEndOffset), $isVertical = toObservable(this.direction).pipe(map(v => this.getIsVertical(v || DEFAULT_DIRECTION)));
|
|
4881
4930
|
$snapScrollToBottom.pipe(takeUntilDestroyed(), tap(v => {
|
|
4882
4931
|
this._service.snapScrollToBottom = v;
|
|
4883
4932
|
})).subscribe();
|
|
@@ -5011,7 +5060,6 @@ class NgVirtualListComponent {
|
|
|
5011
5060
|
_$scrollToEndDuringUpdateCanceller.next(0);
|
|
5012
5061
|
})).subscribe();
|
|
5013
5062
|
const update = (params) => {
|
|
5014
|
-
this._$update.next();
|
|
5015
5063
|
const { snapScrollToBottom, bounds, listBounds, scrollEndOffset, items, itemConfigMap, scrollSize, itemSize, bufferSize, maxBufferSize, snap, isVertical, dynamicSize, enabledBufferOptimization, cacheVersion, } = params;
|
|
5016
5064
|
const scroller = this._scrollerComponent();
|
|
5017
5065
|
if (scroller) {
|
|
@@ -5054,7 +5102,7 @@ class NgVirtualListComponent {
|
|
|
5054
5102
|
this._isScrollFinished.set(scrollPosition >= roundedMaxPosition);
|
|
5055
5103
|
}
|
|
5056
5104
|
}
|
|
5057
|
-
actualScrollSize = (isVertical ? scroller.
|
|
5105
|
+
actualScrollSize = (isVertical ? scroller.actualScrollTop ?? 0 : scroller.actualScrollLeft ?? 0);
|
|
5058
5106
|
const delta = this._trackBox.delta, roundedActualScrollSize = Math.round(actualScrollSize), scrollPositionAfterUpdate = actualScrollSize + delta, roundedScrollPositionAfterUpdate = Math.round(scrollPositionAfterUpdate), roundedMaxPositionAfterUpdate = Math.round(totalSize - viewportSize);
|
|
5059
5107
|
if (this._isSnappingMethodAdvanced) {
|
|
5060
5108
|
this.updateRegularRenderer();
|
|
@@ -5072,7 +5120,7 @@ class NgVirtualListComponent {
|
|
|
5072
5120
|
if (roundedMaxPositionAfterUpdate > 0) {
|
|
5073
5121
|
const diff = roundedMaxPositionAfterUpdate - roundedScrollPositionAfterUpdate, snapToEndTransitionInstantOffset = this.snapToEndTransitionInstantOffset() || viewportSize, animated = prepared && readyToStart && diff >= 0 && diff <= snapToEndTransitionInstantOffset, params = {
|
|
5074
5122
|
[isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: roundedMaxPositionAfterUpdate,
|
|
5075
|
-
fireUpdate:
|
|
5123
|
+
fireUpdate: !(prepared && readyToStart), behavior: animated ? this.scrollBehavior() : BEHAVIOR_INSTANT,
|
|
5076
5124
|
blending: false, duration: this.animationParams().scrollToItem,
|
|
5077
5125
|
};
|
|
5078
5126
|
scroller?.scrollTo?.(params);
|
|
@@ -5084,11 +5132,16 @@ class NgVirtualListComponent {
|
|
|
5084
5132
|
this._isScrollFinished.set(true);
|
|
5085
5133
|
}
|
|
5086
5134
|
}
|
|
5087
|
-
|
|
5088
|
-
|
|
5089
|
-
|
|
5090
|
-
|
|
5091
|
-
|
|
5135
|
+
if (this._scrollSize() !== scrollPositionAfterUpdate) {
|
|
5136
|
+
const params = {
|
|
5137
|
+
[isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: scrollPositionAfterUpdate, blending: prepared && readyToStart,
|
|
5138
|
+
fireUpdate: !(prepared && readyToStart), behavior: BEHAVIOR_INSTANT, duration: this.animationParams().scrollToItem,
|
|
5139
|
+
};
|
|
5140
|
+
scroller.scrollTo(params);
|
|
5141
|
+
}
|
|
5142
|
+
}
|
|
5143
|
+
if (!prepared && !readyToStart) {
|
|
5144
|
+
this._$update.next();
|
|
5092
5145
|
}
|
|
5093
5146
|
}
|
|
5094
5147
|
};
|
|
@@ -5228,6 +5281,9 @@ class NgVirtualListComponent {
|
|
|
5228
5281
|
})).subscribe();
|
|
5229
5282
|
const $scrollTo = this.$scrollTo;
|
|
5230
5283
|
combineLatest([$scroller, $trackBy, $scrollTo]).pipe(takeUntilDestroyed(), filter$1(([scroller]) => scroller !== undefined), map(([scroller, trackBy, event]) => ({ scroller: scroller, trackBy, event })), switchMap$1(({ scroller, trackBy, event }) => {
|
|
5284
|
+
if (!prepared || !readyToStart) {
|
|
5285
|
+
return of([false]);
|
|
5286
|
+
}
|
|
5231
5287
|
const scrollerComponent = this._scrollerComponent(), { id, iteration = 0, blending = false, isLastIteration = false, scrollCalled = false, cb, } = event;
|
|
5232
5288
|
if (scrollerComponent) {
|
|
5233
5289
|
const items = this._actualItems();
|
|
@@ -5296,7 +5352,7 @@ class NgVirtualListComponent {
|
|
|
5296
5352
|
return of([true, { id, scroller: scrollerComponent, cb }]);
|
|
5297
5353
|
}), takeUntilDestroyed(), filter$1(params => !!params), tap(([finished, params]) => {
|
|
5298
5354
|
if (!finished) {
|
|
5299
|
-
if (params) {
|
|
5355
|
+
if (!!params) {
|
|
5300
5356
|
this._$scrollTo.next(params);
|
|
5301
5357
|
}
|
|
5302
5358
|
return;
|