ng-virtual-list 18.9.2 → 18.9.3

package/fesm2022/ng-virtual-list.mjs

@@ -600,7 +600,6 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
     config = signal({});
     measures = signal(undefined);
     focused = signal(false);
-    reseted = signal(false);
     part = signal(PART_DEFAULT_ITEM);
     maxClickDistance = signal(DEFAULT_CLICK_DISTANCE);
     data = signal(undefined);
@@ -695,7 +694,7 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
             const data = this.data(), measures = this.measures(), config = this.config();
             return {
                 data: data?.data, prevData: data?.previouseData, nextData: data?.nextData, measures,
-                config, reseted: this.reseted(), index: data?.index ?? -1
+                config, reseted: false, index: data?.index ?? -1
             };
         });
         const $data = toObservable(this.data), $focused = toObservable(this.focused);
@@ -878,7 +877,6 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
         return { width: width > 0 ? width : 1, height: height > 0 ? height : 1, };
     }
     show() {
-        this.reseted.set(false);
         const el = this._elementRef.nativeElement, styles = el.style;
         styles.zIndex = this._data?.config?.zIndex ?? DEFAULT_ZINDEX;
         if (this.regular) {
@@ -895,7 +893,6 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
         }
     }
     hide() {
-        this.reseted.set(true);
         const el = this._elementRef.nativeElement, styles = el.style;
         styles.position = POSITION_ABSOLUTE;
         styles.transform = `${TRANSLATE_3D$1}(${this._data?.config?.isVertical ? 0 : ZEROS_POSITION},${this._data?.config?.isVertical ? 0 : ZEROS_POSITION},0)`;
@@ -1906,7 +1903,7 @@ class TrackBox extends CacheMap {
      * Calculates list metrics
      */
     recalculateMetrics(options) {
-        const { fromItemId, bounds, collection, dynamicSize, isVertical, itemSize, reversed, bufferSize: minBufferSize, scrollSize, snap, itemConfigMap, enabledBufferOptimization, previousTotalSize, crudDetected, deletedItemsMap } = options, roundedScrollSize = Math.round(scrollSize);
+        const { fromItemId, bounds, collection, dynamicSize, isVertical, itemSize, bufferSize: minBufferSize, scrollSize, snap, itemConfigMap, enabledBufferOptimization, previousTotalSize, crudDetected, deletedItemsMap } = options, roundedScrollSize = Math.round(scrollSize);
         const trackBy = this._trackingPropertyName, bufferSize = Math.max(minBufferSize, this._bufferSize), { width, height } = bounds, sizeProperty = isVertical ? HEIGHT_PROP_NAME : WIDTH_PROP_NAME, size = isVertical ? height : width, totalLength = collection.length, typicalItemSize = itemSize, w = isVertical ? width : typicalItemSize, h = isVertical ? typicalItemSize : height, map = this._map, snapshot = this._snapshot, checkOverscrollItemsLimit = Math.ceil(typicalItemSize !== 0 ? size / typicalItemSize : 0), snippedPos = Math.floor(scrollSize) + this._scrollStartOffset, leftItemsWeights = [], isFromId = fromItemId !== undefined && (typeof fromItemId === 'number' && fromItemId > -1)
             || (typeof fromItemId === 'string' && fromItemId > '-1');
         let leftItemsOffset = 0, rightItemsOffset = 0;
@@ -2177,7 +2174,6 @@ class TrackBox extends CacheMap {
             totalSize,
             typicalItemSize,
             isFromItemIdFound,
-            reversed: options.reversed,
             isUpdating,
         };
         return metrics;
@@ -2195,7 +2191,7 @@ class TrackBox extends CacheMap {
         this.bumpVersion();
     }
     generateDisplayCollection(items, itemConfigMap, metrics) {
-        const { offsetY, offsetX, width, height, normalizedItemWidth, normalizedItemHeight, dynamicSize, itemsOnDisplayLength, itemsFromStartToScrollEnd, isVertical, renderItems: renderItemsLength, scrollSize, sizeProperty, snap, snippedPos, startPosition, totalLength, startIndex, typicalItemSize, reversed, } = metrics, displayItems = [];
+        const { offsetY, offsetX, width, height, normalizedItemWidth, normalizedItemHeight, dynamicSize, itemsOnDisplayLength, itemsFromStartToScrollEnd, isVertical, renderItems: renderItemsLength, scrollSize, sizeProperty, snap, snippedPos, startPosition, totalLength, startIndex, typicalItemSize, } = metrics, displayItems = [];
         if (items.length) {
             const trackBy = this._trackingPropertyName, actualSnippedPosition = snippedPos, isSnappingMethodAdvanced = this.isSnappingMethodAdvanced, boundsSize = isVertical ? height : width, actualEndSnippedPosition = scrollSize + boundsSize - this._scrollEndOffset, positionOffset = isVertical ? offsetY : offsetX;
             let pos = startPosition, renderItems = renderItemsLength, stickyItem, nextSticky, stickyItemIndex = -1, stickyItemSize = 0, endStickyItem, nextEndSticky, endStickyItemIndex = -1, endStickyItemSize = 0, count = 1;
@@ -2311,7 +2307,7 @@ class TrackBox extends CacheMap {
                 if (iterations > totalLength || i >= totalLength) {
                     break;
                 }
-                const collectionItem = items[reversed ? (items.length - i + 1) : i];
+                const collectionItem = items[i];
                 if (!collectionItem) {
                     continue;
                 }
@@ -3665,11 +3661,11 @@ class NgScrollerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NgScrollerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: NgScrollerComponent, selector: "ng-scroller", inputs: { direction: { classPropertyName: "direction", publicName: "direction", 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 } }, viewQueries: [{ propertyName: "scrollContent", first: true, predicate: ["scrollContent"], descendants: true, isSignal: true }, { propertyName: "scrollViewport", first: true, predicate: ["scrollViewport"], descendants: true, isSignal: true }, { propertyName: "cdkScrollable", first: true, predicate: ["scrollViewport"], descendants: true, read: CdkScrollable }, { propertyName: "scrollBar", first: true, predicate: ["scrollBar"], descendants: true, read: NgScrollBarComponent }], ngImport: i0, template: "<div localeSensitive [langTextDir]=\"langTextDir()\" [listDir]=\"direction()\" class=\"ngvl__container\" [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    <ng-scroll-bar #scrollBar [isVertical]=\"isVertical()\" [size]=\"thumbSize()\" [theme]=\"scrollbarTheme()\" [position]=\"thumbPosition()\"\r\n        [thumbGradientPositions]=\"thumbGradientPositions()\" [loading]=\"loading()\" [prepared]=\"preparedSignal()\" [show]=\"thumbShow()\"\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 auto}.ngvl__container.horizontal .ngvl__list{display:inline-flex}.ngvl__container.horizontal .ngvl__scroller{overflow:hidden}.ngvl__container.vertical{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}.ngvl__list.prepared.wait-for-preparation{transition:opacity .15s ease-out .1s}.ngvl__list.ready-to-start{transition:height .15s ease-out}.ngvl__list.ready-to-start.wait-for-preparation{transition:height .15s ease-out,opacity .15s ease-out .1s}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NgScrollBarComponent, selector: "ng-scroll-bar", inputs: ["loading", "isVertical", "position", "thumbGradientPositions", "size", "theme", "prepared", "show"], outputs: ["onDrag"] }, { kind: "directive", type: LocaleSensitiveDirective, selector: "[localeSensitive]", inputs: ["langTextDir", "listDir"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: NgScrollerComponent, selector: "ng-scroller", inputs: { direction: { classPropertyName: "direction", publicName: "direction", 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 } }, viewQueries: [{ propertyName: "scrollContent", first: true, predicate: ["scrollContent"], descendants: true, isSignal: true }, { propertyName: "scrollViewport", first: true, predicate: ["scrollViewport"], descendants: true, isSignal: true }, { propertyName: "cdkScrollable", first: true, predicate: ["scrollViewport"], descendants: true, read: CdkScrollable }, { propertyName: "scrollBar", first: true, predicate: ["scrollBar"], descendants: true, read: NgScrollBarComponent }], ngImport: i0, template: "<div localeSensitive [langTextDir]=\"langTextDir()\" [listDir]=\"direction()\" class=\"ngvl__container\" [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    <ng-scroll-bar #scrollBar [isVertical]=\"isVertical()\" [size]=\"thumbSize()\" [theme]=\"scrollbarTheme()\" [position]=\"thumbPosition()\"\r\n        [thumbGradientPositions]=\"thumbGradientPositions()\" [loading]=\"loading()\" [prepared]=\"preparedSignal()\" [show]=\"thumbShow()\"\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 auto}.ngvl__container.horizontal .ngvl__list{display:inline-flex}.ngvl__container.horizontal .ngvl__scroller{overflow:hidden}.ngvl__container.vertical{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%}.ngvl__list.prepared{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NgScrollBarComponent, selector: "ng-scroll-bar", inputs: ["loading", "isVertical", "position", "thumbGradientPositions", "size", "theme", "prepared", "show"], outputs: ["onDrag"] }, { kind: "directive", type: LocaleSensitiveDirective, selector: "[localeSensitive]", inputs: ["langTextDir", "listDir"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NgScrollerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-scroller', standalone: false, template: "<div localeSensitive [langTextDir]=\"langTextDir()\" [listDir]=\"direction()\" class=\"ngvl__container\" [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    <ng-scroll-bar #scrollBar [isVertical]=\"isVertical()\" [size]=\"thumbSize()\" [theme]=\"scrollbarTheme()\" [position]=\"thumbPosition()\"\r\n        [thumbGradientPositions]=\"thumbGradientPositions()\" [loading]=\"loading()\" [prepared]=\"preparedSignal()\" [show]=\"thumbShow()\"\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 auto}.ngvl__container.horizontal .ngvl__list{display:inline-flex}.ngvl__container.horizontal .ngvl__scroller{overflow:hidden}.ngvl__container.vertical{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}.ngvl__list.prepared.wait-for-preparation{transition:opacity .15s ease-out .1s}.ngvl__list.ready-to-start{transition:height .15s ease-out}.ngvl__list.ready-to-start.wait-for-preparation{transition:height .15s ease-out,opacity .15s ease-out .1s}\n"] }]
+            args: [{ selector: 'ng-scroller', standalone: false, template: "<div localeSensitive [langTextDir]=\"langTextDir()\" [listDir]=\"direction()\" class=\"ngvl__container\" [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    <ng-scroll-bar #scrollBar [isVertical]=\"isVertical()\" [size]=\"thumbSize()\" [theme]=\"scrollbarTheme()\" [position]=\"thumbPosition()\"\r\n        [thumbGradientPositions]=\"thumbGradientPositions()\" [loading]=\"loading()\" [prepared]=\"preparedSignal()\" [show]=\"thumbShow()\"\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 auto}.ngvl__container.horizontal .ngvl__list{display:inline-flex}.ngvl__container.horizontal .ngvl__scroller{overflow:hidden}.ngvl__container.vertical{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%}.ngvl__list.prepared{overflow:hidden}\n"] }]
         }], ctorParameters: () => [], propDecorators: { cdkScrollable: [{
                 type: ViewChild,
                 args: ['scrollViewport', { read: CdkScrollable }]
@@ -4518,27 +4514,27 @@ class NgVirtualListComponent {
         });
         let prepared = false, readyToStart = false, isUserScrolling = false;
         this.$prepared.pipe(takeUntilDestroyed(), distinctUntilChanged(), tap(v => {
-            const waitForPreparation = this.waitForPreparation();
-            if (waitForPreparation) {
-                if (!v) {
-                    prepared = readyToStart = v;
+            if (!v) {
+                this.cacheClean();
+                readyToStart = isUserScrolling = false;
+                prepared = readyToStart = v;
+                const waitForPreparation = this.waitForPreparation();
+                if (waitForPreparation) {
                     const scrollerComponent = this._scrollerComponent();
                     if (scrollerComponent) {
                         scrollerComponent.prepared = v;
                     }
                     this.classes.set({ prepared: v, [WAIT_FOR_PREPARATION]: waitForPreparation });
-                    this.cacheClean();
                 }
-            }
-            else {
-                prepared = readyToStart = true;
-                const scrollerComponent = this._scrollerComponent();
-                if (scrollerComponent) {
-                    scrollerComponent.prepared = true;
+                else {
+                    const scrollerComponent = this._scrollerComponent();
+                    if (scrollerComponent) {
+                        scrollerComponent.prepared = true;
+                    }
+                    this.classes.set({ prepared: true, [READY_TO_START]: true, [WAIT_FOR_PREPARATION]: waitForPreparation });
                 }
-                this.classes.set({ prepared: true, [READY_TO_START]: true, [WAIT_FOR_PREPARATION]: waitForPreparation });
             }
-        }), filter$1(v => !!v), debounceTime(0), takeUntilDestroyed(this._destroyRef), tap(v => {
+        }), filter$1(v => !!v), delay(0), takeUntilDestroyed(this._destroyRef), tap(v => {
             prepared = v;
         }), delay(0), takeUntilDestroyed(this._destroyRef), tap(v => {
             const waitForPreparation = this.waitForPreparation(), scrollerComponent = this._scrollerComponent(), val = v || !waitForPreparation;
@@ -4697,14 +4693,11 @@ class NgVirtualListComponent {
                 const { width, height, x, y } = bounds, viewportSize = (isVertical ? height : width);
                 let scrollLength = Math.round(this._totalSize()) ?? 0, actualScrollLength = Math.round(scrollLength === 0 ? 0 : scrollLength > viewportSize ? scrollLength - viewportSize : scrollLength), roundedMaxPosition = Math.round(actualScrollLength), scrollPosition = Math.round(actualScrollSize);
                 const opts = {
-                    bounds: { width, height, x, y }, dynamicSize, isVertical, itemSize, reversed: false,
+                    bounds: { width, height, x, y }, dynamicSize, isVertical, itemSize,
                     bufferSize, maxBufferSize, scrollSize: actualScrollSize, snap, enabledBufferOptimization,
                 };
-                if (snapScrollToBottom && scrollLength > viewportSize && !prepared) {
-                    const { totalSize: calculatedTotalSize } = this._trackBox.getMetrics(items, itemConfigMap, { ...opts, reversed: true });
-                    totalSize = calculatedTotalSize;
-                    actualScrollSize = (totalSize > viewportSize ? totalSize - viewportSize : 0);
-                    const { displayItems: calculatedDisplayItems, totalSize: calculatedTotalSize1 } = this._trackBox.updateCollection(items, itemConfigMap, { ...opts, reversed: true, scrollSize: actualScrollSize });
+                if (snapScrollToBottom && !prepared) {
+                    const { displayItems: calculatedDisplayItems, totalSize: calculatedTotalSize1 } = this._trackBox.updateCollection(items, itemConfigMap, { ...opts, scrollSize: actualScrollSize });
                     displayItems = calculatedDisplayItems;
                     totalSize = calculatedTotalSize1;
                     scrollLength = Math.round(totalSize) ?? 0;
@@ -4909,7 +4902,7 @@ class NgVirtualListComponent {
                     if (dynamicSize) {
                         const { width, height, x, y } = this._bounds() || { x: 0, y: 0, width: DEFAULT_LIST_SIZE, height: DEFAULT_LIST_SIZE }, itemConfigMap = this.itemConfigMap(), items = this._actualItems(), isVertical = this._isVertical, currentScollSize = (isVertical ? scrollerComponent.scrollTop : scrollerComponent.scrollLeft), delta = this._trackBox.delta, opts = {
                             bounds: { width, height, x, y }, collection: items, dynamicSize, isVertical: this._isVertical, itemSize,
-                            bufferSize: this.bufferSize(), maxBufferSize: this.maxBufferSize(), reversed: false,
+                            bufferSize: this.bufferSize(), maxBufferSize: this.maxBufferSize(),
                             scrollSize: (isVertical ? scrollerComponent.scrollTop : scrollerComponent.scrollLeft) + delta,
                             snap: this.snap(), fromItemId: id, enabledBufferOptimization: this.enabledBufferOptimization(),
                         }, scrollSize = this._trackBox.getItemPosition(id, itemConfigMap, opts), params = {
@@ -5209,6 +5202,7 @@ class NgVirtualListComponent {
         if (scrollerComponent) {
             scrollerComponent.reset();
         }
+        this._$prepared.next(false);
     }
     stopSnappingScrollToEnd() {
         const scroller = this._scrollerComponent();