ng-virtual-list 20.1.3 → 20.2.0

package/README.md

@@ -455,7 +455,7 @@ Inputs
 | itemSize | number? = 24 | If direction = 'vertical', then the height of a typical element. If direction = 'horizontal', then the width of a typical element. Ignored if the dynamicSize property is true. |
 | itemsOffset | number? = 2 | Number of elements outside the scope of visibility. Default value is 2. |
 | itemRenderer | TemplateRef | Rendering element template. |
-| stickyMap | [IVirtualListStickyMap?](https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/models/sticky-map.model.ts) | Dictionary zIndex by id of the list element. If the value is not set or equal to 0, then a simple element is displayed, if the value is greater than 0, then the sticky position mode is enabled for the element. |
+| stickyMap | [IVirtualListStickyMap?](https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/models/sticky-map.model.ts) | Dictionary zIndex by id of the list element. If the value is not set or equal to 0, then a simple element is displayed, if the value is greater than 0, then the sticky position mode is enabled for the element. 1 - position start, 2 - position end. |
 | snap | boolean? = false | Determines whether elements will snap. Default value is "false". |
 | snappingMethod | [SnappingMethod? = 'normal'](https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/enums/snapping-method.ts) | Snapping method. 'normal' - Normal group rendering. 'advanced' - The group is rendered on a transparent background. List items below the group are not rendered. |
 | direction | [Direction? = 'vertical'](https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/enums/direction.ts) | Determines the direction in which elements are placed. Default value is "vertical". |
@@ -488,12 +488,12 @@ Methods
 
 | Angular version | ng-virtual-list version | git | npm |
 |--|--|--|--|
-| 19.x | 19.2.6 | [19.x](https://github.com/DjonnyX/ng-virtual-list/tree/19.x) | [19.2.6](https://www.npmjs.com/package/ng-virtual-list/v/19.2.6) |
-| 18.x | 18.1.3 | [18.x](https://github.com/DjonnyX/ng-virtual-list/tree/18.x) | [18.1.3](https://www.npmjs.com/package/ng-virtual-list/v/18.1.3) |
-| 17.x | 17.1.3 | [17.x](https://github.com/DjonnyX/ng-virtual-list/tree/17.x) | [17.1.3](https://www.npmjs.com/package/ng-virtual-list/v/17.1.3) |
-| 16.x | 16.1.4 | [16.x](https://github.com/DjonnyX/ng-virtual-list/tree/16.x) | [16.1.4](https://www.npmjs.com/package/ng-virtual-list/v/16.1.4) |
-| 15.x | 15.1.3 | [15.x](https://github.com/DjonnyX/ng-virtual-list/tree/15.x) | [15.1.3](https://www.npmjs.com/package/ng-virtual-list/v/15.1.3) |
-| 14.x | 14.1.3 | [14.x](https://github.com/DjonnyX/ng-virtual-list/tree/14.x) | [14.1.3](https://www.npmjs.com/package/ng-virtual-list/v/14.1.3) |
+| 19.x | 19.3.2 | [19.x](https://github.com/DjonnyX/ng-virtual-list/tree/19.x) | [19.3.2](https://www.npmjs.com/package/ng-virtual-list/v/19.3.2) |
+| 18.x | 18.2.0 | [18.x](https://github.com/DjonnyX/ng-virtual-list/tree/18.x) | [18.2.0](https://www.npmjs.com/package/ng-virtual-list/v/18.2.0) |
+| 17.x | 17.2.0 | [17.x](https://github.com/DjonnyX/ng-virtual-list/tree/17.x) | [17.2.0](https://www.npmjs.com/package/ng-virtual-list/v/17.2.0) |
+| 16.x | 16.2.0 | [16.x](https://github.com/DjonnyX/ng-virtual-list/tree/16.x) | [16.2.0](https://www.npmjs.com/package/ng-virtual-list/v/16.2.0) |
+| 15.x | 15.2.0 | [15.x](https://github.com/DjonnyX/ng-virtual-list/tree/15.x) | [15.2.0](https://www.npmjs.com/package/ng-virtual-list/v/15.2.0) |
+| 14.x | 14.2.0 | [14.x](https://github.com/DjonnyX/ng-virtual-list/tree/14.x) | [14.2.0](https://www.npmjs.com/package/ng-virtual-list/v/14.2.0) |
 
 <br/>
 

package/fesm2022/ng-virtual-list.mjs

@@ -135,9 +135,10 @@ class NgVirtualListItemComponent {
         const data = this._data, regular = this.regular, length = this._regularLength;
         if (data) {
             const styles = this._elementRef.nativeElement.style;
-            styles.zIndex = String(data.config.sticky);
+            styles.zIndex = data.config.zIndex;
             if (data.config.snapped) {
-                styles.transform = ZEROS_TRANSLATE_3D;
+                styles.transform = data.config.sticky === 1 ? ZEROS_TRANSLATE_3D : `${TRANSLATE_3D}(${data.config.isVertical ? 0 : data.measures.x}${PX}, ${data.config.isVertical ? data.measures.y : 0}${PX} , 0)`;
+                ;
                 if (!data.config.isSnappingMethodAdvanced) {
                     styles.position = POSITION_STICKY;
                 }
@@ -173,7 +174,7 @@ class NgVirtualListItemComponent {
             }
             styles.visibility = VISIBILITY_VISIBLE;
         }
-        styles.zIndex = String(this._data?.config?.sticky ?? DEFAULT_ZINDEX);
+        styles.zIndex = this._data?.config?.zIndex ?? DEFAULT_ZINDEX;
     }
     hide() {
         const styles = this._elementRef.nativeElement.style;
@@ -193,10 +194,10 @@ class NgVirtualListItemComponent {
         styles.transform = ZEROS_TRANSLATE_3D;
         styles.zIndex = HIDDEN_ZINDEX;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: NgVirtualListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: NgVirtualListItemComponent, isStandalone: true, selector: "ng-virtual-list-item", host: { classAttribute: "ngvl__item" }, ngImport: i0, template: "@let item = data();\r\n@let renderer = itemRenderer();\r\n\r\n@if (item) {\r\n    <li #listItem part=\"item\" class=\"ngvl-item__container\" [ngClass]=\"{'snapped': item.config.snapped,\r\n        'snapped-out': item.config.snappedOut}\">\r\n        @if (renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\"\r\n                [ngTemplateOutletContext]=\"{data: item.data || {}, config: item.config}\" />\r\n        }\r\n    </li>\r\n}", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden;will-change:scroll-position}.ngvl-item__container{margin:0;padding:0;overflow:hidden;background-color:#fff;width:inherit;height:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgVirtualListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: NgVirtualListItemComponent, isStandalone: true, selector: "ng-virtual-list-item", host: { classAttribute: "ngvl__item" }, ngImport: i0, template: "@let item = data();\r\n@let renderer = itemRenderer();\r\n\r\n@if (item) {\r\n    <li #listItem part=\"item\" class=\"ngvl-item__container\" [ngClass]=\"{'snapped': item.config.snapped,\r\n        'snapped-out': item.config.snappedOut}\">\r\n        @if (renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\"\r\n                [ngTemplateOutletContext]=\"{data: item.data || {}, config: item.config}\" />\r\n        }\r\n    </li>\r\n}", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden;will-change:scroll-position}.ngvl-item__container{margin:0;padding:0;overflow:hidden;background-color:#fff;width:inherit;height:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: NgVirtualListItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgVirtualListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-virtual-list-item', imports: [CommonModule], host: {
                         'class': 'ngvl__item',
@@ -254,12 +255,12 @@ const debounce = (cb, debounceTime = 0) => {
  * @author Evgenii Grebennikov
  * @email djonnyx@gmail.com
  */
-const toggleClassName = (el, className, remove = false) => {
+const toggleClassName = (el, className, removeClassName) => {
     if (!el.classList.contains(className)) {
         el.classList.add(className);
     }
-    else if (remove) {
-        el.classList.remove(className);
+    if (removeClassName) {
+        el.classList.remove(removeClassName);
     }
 };
 
@@ -325,7 +326,17 @@ class Tracker {
                                 }
                             }
                             comp.instance.item = item;
-                            comp.instance.show();
+                            if (snapedComponent) {
+                                if (item['config']['snapped'] || item['config']['snappedOut']) {
+                                    comp.instance.hide();
+                                }
+                                else {
+                                    comp.instance.show();
+                                }
+                            }
+                            else {
+                                comp.instance.show();
+                            }
                             untrackedItems.splice(indexByUntrackedItems, 1);
                             continue;
                         }
@@ -344,7 +355,17 @@ class Tracker {
                         }
                     }
                     comp.instance.item = item;
-                    comp.instance.show();
+                    if (snapedComponent) {
+                        if (item['config']['snapped'] || item['config']['snappedOut']) {
+                            comp.instance.hide();
+                        }
+                        else {
+                            comp.instance.show();
+                        }
+                    }
+                    else {
+                        comp.instance.show();
+                    }
                     if (this._trackMap) {
                         this._trackMap[itemTrackingProperty] = comp.instance.id;
                     }
@@ -962,7 +983,7 @@ class TrackBox extends CacheMap {
                     }
                 }
                 if (deletedItemsMap.hasOwnProperty(i)) {
-                    const bounds = deletedItemsMap[i], size = bounds[sizeProperty] ?? typicalItemSize;
+                    const bounds = deletedItemsMap[i], size = bounds?.[sizeProperty] ?? typicalItemSize;
                     if (y < scrollSize - size) {
                         leftSizeOfDeletedItems += size;
                     }
@@ -970,7 +991,7 @@ class TrackBox extends CacheMap {
                 totalSize += componentSize;
                 if (isFromId) {
                     if (itemById === undefined) {
-                        if (id !== fromItemId && stickyMap && stickyMap[id] > 0) {
+                        if (id !== fromItemId && stickyMap && stickyMap[id] === 1) {
                             stickyComponentSize = componentSize;
                             stickyCollectionItem = collectionItem;
                         }
@@ -1166,19 +1187,19 @@ class TrackBox extends CacheMap {
         this.bumpVersion();
     }
     generateDisplayCollection(items, stickyMap, metrics) {
-        const { normalizedItemWidth, normalizedItemHeight, dynamicSize, itemsFromStartToScrollEnd, isVertical, renderItems: renderItemsLength, scrollSize, sizeProperty, snap, snippedPos, startPosition, totalLength, startIndex, typicalItemSize, } = metrics, displayItems = [];
+        const { width, height, normalizedItemWidth, normalizedItemHeight, dynamicSize, itemsOnDisplayLength, itemsFromStartToScrollEnd, isVertical, renderItems: renderItemsLength, scrollSize, sizeProperty, snap, snippedPos, startPosition, totalLength, startIndex, typicalItemSize, } = metrics, displayItems = [];
         if (items.length) {
-            const actualSnippedPosition = snippedPos, isSnappingMethodAdvanced = this.isSnappingMethodAdvanced;
-            let pos = startPosition, renderItems = renderItemsLength, stickyItem, nextSticky, stickyItemIndex = -1, stickyItemSize = 0;
+            const actualSnippedPosition = snippedPos, isSnappingMethodAdvanced = this.isSnappingMethodAdvanced, boundsSize = isVertical ? height : width, actualEndSnippedPosition = boundsSize;
+            let pos = startPosition, renderItems = renderItemsLength, stickyItem, nextSticky, stickyItemIndex = -1, stickyItemSize = 0, endStickyItem, nextEndSticky, endStickyItemIndex = -1, endStickyItemSize = 0;
             if (snap) {
                 for (let i = Math.min(itemsFromStartToScrollEnd > 0 ? itemsFromStartToScrollEnd : 0, totalLength - 1); i >= 0; i--) {
                     const id = items[i].id, sticky = stickyMap[id], size = dynamicSize ? this.get(id)?.[sizeProperty] || typicalItemSize : typicalItemSize;
-                    if (sticky > 0) {
+                    if (sticky === 1) {
                         const measures = {
                             x: isVertical ? 0 : actualSnippedPosition,
                             y: isVertical ? actualSnippedPosition : 0,
-                            width: normalizedItemWidth,
-                            height: normalizedItemHeight,
+                            width: isVertical ? normalizedItemWidth : size,
+                            height: isVertical ? size : normalizedItemHeight,
                             delta: 0,
                         }, config = {
                             isVertical,
@@ -1188,6 +1209,7 @@ class TrackBox extends CacheMap {
                             snappedOut: false,
                             dynamic: dynamicSize,
                             isSnappingMethodAdvanced,
+                            zIndex: '1',
                         };
                         const itemData = items[i];
                         stickyItem = { id, measures, data: itemData, config };
@@ -1198,18 +1220,50 @@ class TrackBox extends CacheMap {
                     }
                 }
             }
+            if (snap) {
+                const startIndex = itemsFromStartToScrollEnd + itemsOnDisplayLength - 1;
+                for (let i = Math.min(startIndex, totalLength > 0 ? totalLength - 1 : 0), l = totalLength; i < l; i++) {
+                    const id = items[i].id, sticky = stickyMap[id], size = dynamicSize
+                        ? this.get(id)?.[sizeProperty] || typicalItemSize
+                        : typicalItemSize;
+                    if (sticky === 2) {
+                        const w = isVertical ? normalizedItemWidth : size, h = isVertical ? size : normalizedItemHeight, measures = {
+                            x: isVertical ? 0 : actualEndSnippedPosition - w,
+                            y: isVertical ? actualEndSnippedPosition - h : 0,
+                            width: w,
+                            height: h,
+                            delta: 0,
+                        }, config = {
+                            isVertical,
+                            sticky,
+                            snap,
+                            snapped: true,
+                            snappedOut: false,
+                            dynamic: dynamicSize,
+                            isSnappingMethodAdvanced,
+                            zIndex: '1',
+                        };
+                        const itemData = items[i];
+                        endStickyItem = { id, measures, data: itemData, config };
+                        endStickyItemIndex = i;
+                        endStickyItemSize = size;
+                        displayItems.push(endStickyItem);
+                        break;
+                    }
+                }
+            }
             let i = startIndex;
             while (renderItems > 0) {
                 if (i >= totalLength) {
                     break;
                 }
                 const id = items[i].id, size = dynamicSize ? this.get(id)?.[sizeProperty] || typicalItemSize : typicalItemSize;
-                if (id !== stickyItem?.id) {
-                    const snapped = snap && stickyMap[id] > 0 && pos <= scrollSize, measures = {
-                        x: isVertical ? 0 : pos,
-                        y: isVertical ? pos : 0,
-                        width: normalizedItemWidth,
-                        height: normalizedItemHeight,
+                if (id !== stickyItem?.id && id !== endStickyItem?.id) {
+                    const snapped = snap && (stickyMap[id] === 1 && pos <= scrollSize || stickyMap[id] === 2 && pos >= scrollSize + boundsSize - size), measures = {
+                        x: isVertical ? stickyMap[id] === 1 ? 0 : boundsSize - size : pos,
+                        y: isVertical ? pos : stickyMap[id] === 2 ? boundsSize - size : 0,
+                        width: isVertical ? normalizedItemWidth : size,
+                        height: isVertical ? size : normalizedItemHeight,
                         delta: 0,
                     }, config = {
                         isVertical,
@@ -1219,15 +1273,28 @@ class TrackBox extends CacheMap {
                         snappedOut: false,
                         dynamic: dynamicSize,
                         isSnappingMethodAdvanced,
+                        zIndex: '0',
                     };
+                    if (snapped) {
+                        config.zIndex = '2';
+                    }
                     const itemData = items[i];
                     const item = { id, measures, data: itemData, config };
-                    if (!nextSticky && stickyItemIndex < i && stickyMap[id] > 0 && pos <= scrollSize + size + stickyItemSize) {
+                    if (!nextSticky && stickyItemIndex < i && stickyMap[id] === 1 && (pos <= scrollSize + size + stickyItemSize)) {
                         item.measures.x = isVertical ? 0 : snapped ? actualSnippedPosition : pos;
                         item.measures.y = isVertical ? snapped ? actualSnippedPosition : pos : 0;
                         nextSticky = item;
                         nextSticky.config.snapped = snapped;
-                        nextSticky.measures.delta = isVertical ? item.measures.y - scrollSize : item.measures.x - scrollSize;
+                        nextSticky.measures.delta = isVertical ? (item.measures.y - scrollSize) : (item.measures.x - scrollSize);
+                        nextSticky.config.zIndex = '3';
+                    }
+                    else if (!nextEndSticky && endStickyItemIndex > i && stickyMap[id] === 2 && (pos >= scrollSize + boundsSize - size - endStickyItemSize)) {
+                        item.measures.x = isVertical ? 0 : snapped ? actualEndSnippedPosition - size : pos;
+                        item.measures.y = isVertical ? snapped ? actualEndSnippedPosition - size : pos : 0;
+                        nextEndSticky = item;
+                        nextEndSticky.config.zIndex = '3';
+                        nextEndSticky.config.snapped = snapped;
+                        nextEndSticky.measures.delta = isVertical ? (item.measures.y - scrollSize) : (item.measures.x - scrollSize);
                     }
                     displayItems.push(item);
                 }
@@ -1249,6 +1316,19 @@ class TrackBox extends CacheMap {
                     nextSticky.measures.delta = isVertical ? nextSticky.measures.y - scrollSize : nextSticky.measures.x - scrollSize;
                 }
             }
+            if (nextEndSticky && endStickyItem && nextEndSticky.measures[axis] >= scrollSize + boundsSize - endStickyItemSize - nextEndSticky.measures[sizeProperty]) {
+                if (nextEndSticky.measures[axis] < scrollSize + boundsSize - endStickyItemSize) {
+                    endStickyItem.measures[axis] = nextEndSticky.measures[axis] + nextEndSticky.measures[sizeProperty];
+                    endStickyItem.config.snapped = nextEndSticky.config.snapped = false;
+                    endStickyItem.config.snappedOut = true;
+                    endStickyItem.config.sticky = 2;
+                    endStickyItem.measures.delta = isVertical ? endStickyItem.measures.y - scrollSize : endStickyItem.measures.x - scrollSize;
+                }
+                else {
+                    nextEndSticky.config.snapped = true;
+                    nextEndSticky.measures.delta = isVertical ? nextEndSticky.measures.y - scrollSize : nextEndSticky.measures.x - scrollSize;
+                }
+            }
         }
         return displayItems;
     }
@@ -1441,6 +1521,7 @@ class NgVirtualListComponent {
      */
     snappingMethod = input(DEFAULT_SNAPPING_METHOD);
     _isSnappingMethodAdvanced = this.getIsSnappingMethodAdvanced();
+    get isSnappingMethodAdvanced() { return this._isSnappingMethodAdvanced; }
     _isVertical = this.getIsVertical();
     _displayComponents = [];
     _snapedDisplayComponent;
@@ -1532,7 +1613,7 @@ class NgVirtualListComponent {
         $isVertical.pipe(takeUntilDestroyed(), tap(v => {
             this._isVertical = v;
             const el = this._elementRef.nativeElement;
-            toggleClassName(el, v ? CLASS_LIST_VERTICAL : CLASS_LIST_HORIZONTAL, true);
+            toggleClassName(el, v ? CLASS_LIST_VERTICAL : CLASS_LIST_HORIZONTAL, v ? CLASS_LIST_HORIZONTAL : CLASS_LIST_VERTICAL);
         })).subscribe();
         $snappingMethod.pipe(takeUntilDestroyed(), tap(v => {
             this._isSnappingMethodAdvanced = this._trackBox.isSnappingMethodAdvanced = v;
@@ -1799,12 +1880,12 @@ class NgVirtualListComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: NgVirtualListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: NgVirtualListComponent, isStandalone: true, selector: "ng-virtual-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, snap: { classPropertyName: "snap", publicName: "snap", isSignal: true, isRequired: false, transformFunction: null }, enabledBufferOptimization: { classPropertyName: "enabledBufferOptimization", publicName: "enabledBufferOptimization", isSignal: true, isRequired: false, transformFunction: null }, itemRenderer: { classPropertyName: "itemRenderer", publicName: "itemRenderer", isSignal: true, isRequired: true, transformFunction: null }, stickyMap: { classPropertyName: "stickyMap", publicName: "stickyMap", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, dynamicSize: { classPropertyName: "dynamicSize", publicName: "dynamicSize", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, itemsOffset: { classPropertyName: "itemsOffset", publicName: "itemsOffset", isSignal: true, isRequired: false, transformFunction: null }, snappingMethod: { classPropertyName: "snappingMethod", publicName: "snappingMethod", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onScroll: "onScroll", onScrollEnd: "onScrollEnd" }, viewQueries: [{ propertyName: "_snappedContainer", first: true, predicate: ["snapped"], descendants: true, isSignal: true }, { propertyName: "_container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "_list", first: true, predicate: ["list"], descendants: true, isSignal: true }, { propertyName: "_listContainerRef", first: true, predicate: ["renderersContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_snapContainerRef", first: true, predicate: ["snapRendererContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "@if (snap()) {\r\n<div #snapped part=\"snapped-item\" class=\"ngvl__list-snapper\">\r\n  <ng-container #snapRendererContainer></ng-container>\r\n</div>\r\n}\r\n<div #container part=\"scroller\" class=\"ngvl__scroller\">\r\n  <ul #list part=\"list\" class=\"ngvl__list\">\r\n    <ng-container #renderersContainer></ng-container>\r\n  </ul>\r\n</div>", styles: [":host{position:relative;display:block;width:400px;overflow:hidden}:host(.horizontal){height:48px}:host(.vertical){height:320px}.ngvl__scroller{overflow:auto;width:100%;height:100%}.ngvl__list-snapper{pointer-events:none;position:absolute;list-style:none;left:0;top:0;z-index:1}.ngvl__list{position:relative;list-style:none;padding:0;margin:0;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgVirtualListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: NgVirtualListComponent, isStandalone: true, selector: "ng-virtual-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, snap: { classPropertyName: "snap", publicName: "snap", isSignal: true, isRequired: false, transformFunction: null }, enabledBufferOptimization: { classPropertyName: "enabledBufferOptimization", publicName: "enabledBufferOptimization", isSignal: true, isRequired: false, transformFunction: null }, itemRenderer: { classPropertyName: "itemRenderer", publicName: "itemRenderer", isSignal: true, isRequired: true, transformFunction: null }, stickyMap: { classPropertyName: "stickyMap", publicName: "stickyMap", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, dynamicSize: { classPropertyName: "dynamicSize", publicName: "dynamicSize", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, itemsOffset: { classPropertyName: "itemsOffset", publicName: "itemsOffset", isSignal: true, isRequired: false, transformFunction: null }, snappingMethod: { classPropertyName: "snappingMethod", publicName: "snappingMethod", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onScroll: "onScroll", onScrollEnd: "onScrollEnd" }, viewQueries: [{ propertyName: "_snappedContainer", first: true, predicate: ["snapped"], descendants: true, isSignal: true }, { propertyName: "_container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "_list", first: true, predicate: ["list"], descendants: true, isSignal: true }, { propertyName: "_listContainerRef", first: true, predicate: ["renderersContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_snapContainerRef", first: true, predicate: ["snapRendererContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "@if (snap()) {\r\n<div #snapped part=\"snapped-item\" class=\"ngvl__list-snapper\">\r\n  <ng-container #snapRendererContainer></ng-container>\r\n</div>\r\n}\r\n<div #container part=\"scroller\" class=\"ngvl__scroller\">\r\n  <ul #list part=\"list\" class=\"ngvl__list\">\r\n    <ng-container #renderersContainer></ng-container>\r\n  </ul>\r\n</div>", styles: [":host{position:relative;display:block;width:400px;overflow:hidden}:host(.horizontal){height:48px}:host(.horizontal) .ngvl__list{display:inline-flex}:host(.horizontal) .ngvl__scroller{overflow:auto hidden}:host(.vertical) .ngvl__scroller{overflow:hidden auto}:host(.vertical){height:320px}.ngvl__scroller{overflow:auto;width:100%;height:100%}.ngvl__list-snapper{pointer-events:none;position:absolute;list-style:none;left:0;top:0;z-index:1}.ngvl__list{position:relative;list-style:none;padding:0;margin:0;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: NgVirtualListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgVirtualListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-virtual-list', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, template: "@if (snap()) {\r\n<div #snapped part=\"snapped-item\" class=\"ngvl__list-snapper\">\r\n  <ng-container #snapRendererContainer></ng-container>\r\n</div>\r\n}\r\n<div #container part=\"scroller\" class=\"ngvl__scroller\">\r\n  <ul #list part=\"list\" class=\"ngvl__list\">\r\n    <ng-container #renderersContainer></ng-container>\r\n  </ul>\r\n</div>", styles: [":host{position:relative;display:block;width:400px;overflow:hidden}:host(.horizontal){height:48px}:host(.vertical){height:320px}.ngvl__scroller{overflow:auto;width:100%;height:100%}.ngvl__list-snapper{pointer-events:none;position:absolute;list-style:none;left:0;top:0;z-index:1}.ngvl__list{position:relative;list-style:none;padding:0;margin:0;width:100%;height:100%}\n"] }]
+            args: [{ selector: 'ng-virtual-list', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, template: "@if (snap()) {\r\n<div #snapped part=\"snapped-item\" class=\"ngvl__list-snapper\">\r\n  <ng-container #snapRendererContainer></ng-container>\r\n</div>\r\n}\r\n<div #container part=\"scroller\" class=\"ngvl__scroller\">\r\n  <ul #list part=\"list\" class=\"ngvl__list\">\r\n    <ng-container #renderersContainer></ng-container>\r\n  </ul>\r\n</div>", styles: [":host{position:relative;display:block;width:400px;overflow:hidden}:host(.horizontal){height:48px}:host(.horizontal) .ngvl__list{display:inline-flex}:host(.horizontal) .ngvl__scroller{overflow:auto hidden}:host(.vertical) .ngvl__scroller{overflow:hidden auto}:host(.vertical){height:320px}.ngvl__scroller{overflow:auto;width:100%;height:100%}.ngvl__list-snapper{pointer-events:none;position:absolute;list-style:none;left:0;top:0;z-index:1}.ngvl__list{position:relative;list-style:none;padding:0;margin:0;width:100%;height:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { _listContainerRef: [{
                 type: ViewChild,
                 args: ['renderersContainer', { read: ViewContainerRef }]