ng-virtual-list 19.1.44 → 19.2.0

package/README.md

@@ -427,6 +427,13 @@ List items are encapsulated in shadowDOM, so to override default styles you need
 }
 ```
 
+- Set up the snapped item (Only SnappingMethod.ADVANCED)
+```css
+.list::part(snapped-item) {
+    color: #71718c;
+}
+```
+
 - Set up the list item
 ```css
 .list::part(item) {

package/fesm2022/ng-virtual-list.mjs

@@ -23,6 +23,24 @@ var Directions;
     Directions["VERTICAL"] = "vertical";
 })(Directions || (Directions = {}));
 
+/**
+ * Snapping method.
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/19.x/projects/ng-virtual-list/src/lib/enums/snapping-method.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+var SnappingMethods;
+(function (SnappingMethods) {
+    /**
+     * Normal group rendering.
+     */
+    SnappingMethods["NORMAL"] = "normal";
+    /**
+     * The group is rendered on a transparent background. List items below the group are not rendered.
+     */
+    SnappingMethods["ADVANCED"] = "advanced";
+})(SnappingMethods || (SnappingMethods = {}));
+
 const DEFAULT_ITEM_SIZE = 24;
 const DEFAULT_ITEMS_OFFSET = 2;
 const DEFAULT_LIST_SIZE = 400;
@@ -33,10 +51,15 @@ const TRACK_BY_PROPERTY_NAME = 'id';
 const DEFAULT_DIRECTION = Directions.VERTICAL;
 const DISPLAY_OBJECTS_LENGTH_MESUREMENT_ERROR = 1;
 const MAX_SCROLL_TO_ITERATIONS = 5;
+const DEFAULT_SNAPPING_METHOD = SnappingMethods.NORMAL;
 // presets
 const BEHAVIOR_AUTO = 'auto';
 const BEHAVIOR_INSTANT = 'instant';
 const BEHAVIOR_SMOOTH = 'smooth';
+const DISPLAY_BLOCK = 'block';
+const DISPLAY_NONE = 'none';
+const OPACITY_0 = '0';
+const OPACITY_100 = '100';
 const VISIBILITY_VISIBLE = 'visible';
 const VISIBILITY_HIDDEN = 'hidden';
 const SIZE_100_PERSENT = '100%';
@@ -71,6 +94,7 @@ class NgVirtualListItemComponent {
     get id() {
         return this._id;
     }
+    regular = false;
     data = signal(undefined);
     _data = undefined;
     set item(v) {
@@ -78,22 +102,17 @@ class NgVirtualListItemComponent {
             return;
         }
         const data = this._data = v;
-        if (data) {
-            const styles = this._elementRef.nativeElement.style;
-            styles.zIndex = String(data.config.sticky);
-            if (data.config.snapped) {
-                styles.transform = ZEROS_TRANSLATE_3D;
-                styles.position = POSITION_STICKY;
-            }
-            else {
-                styles.position = POSITION_ABSOLUTE;
-                styles.transform = `${TRANSLATE_3D}(${data.config.isVertical ? 0 : data.measures.x}${PX}, ${data.config.isVertical ? data.measures.y : 0}${PX} , 0)`;
-            }
-            styles.height = data.config.isVertical ? data.config.dynamic ? SIZE_AUTO : `${data.measures.height}${PX}` : SIZE_100_PERSENT;
-            styles.width = data.config.isVertical ? SIZE_100_PERSENT : data.config.dynamic ? SIZE_AUTO : `${data.measures.width}${PX}`;
-        }
+        this.update();
         this.data.set(v);
     }
+    _regularLength = SIZE_100_PERSENT;
+    set regularLength(v) {
+        if (this._regularLength === v) {
+            return;
+        }
+        this._regularLength = v;
+        this.update();
+    }
     get item() {
         return this._data;
     }
@@ -112,25 +131,65 @@ class NgVirtualListItemComponent {
         this._id = NgVirtualListItemComponent.__nextId = NgVirtualListItemComponent.__nextId === Number.MAX_SAFE_INTEGER
             ? 0 : NgVirtualListItemComponent.__nextId + 1;
     }
+    update() {
+        const data = this._data, regular = this.regular, length = this._regularLength;
+        if (data) {
+            const styles = this._elementRef.nativeElement.style;
+            styles.zIndex = String(data.config.sticky);
+            if (data.config.snapped) {
+                styles.transform = ZEROS_TRANSLATE_3D;
+                if (!data.config.isSnappingMethodAdvanced) {
+                    styles.position = POSITION_STICKY;
+                }
+            }
+            else {
+                styles.position = POSITION_ABSOLUTE;
+                if (regular) {
+                    styles.transform = `${TRANSLATE_3D}(${data.config.isVertical ? 0 : data.measures.delta}${PX}, ${data.config.isVertical ? data.measures.delta : 0}${PX} , 0)`;
+                }
+                else {
+                    styles.transform = `${TRANSLATE_3D}(${data.config.isVertical ? 0 : data.measures.x}${PX}, ${data.config.isVertical ? data.measures.y : 0}${PX} , 0)`;
+                }
+            }
+            styles.height = data.config.isVertical ? data.config.dynamic ? SIZE_AUTO : `${data.measures.height}${PX}` : regular ? length : SIZE_100_PERSENT;
+            styles.width = data.config.isVertical ? regular ? length : SIZE_100_PERSENT : data.config.dynamic ? SIZE_AUTO : `${data.measures.width}${PX}`;
+        }
+    }
     getBounds() {
         const el = this._elementRef.nativeElement, { width, height } = el.getBoundingClientRect();
         return { width, height };
     }
     show() {
         const styles = this._elementRef.nativeElement.style;
-        if (styles.visibility === VISIBILITY_VISIBLE) {
-            return;
+        if (this.regular) {
+            if (styles.display === DISPLAY_BLOCK) {
+                return;
+            }
+            styles.display = DISPLAY_BLOCK;
         }
-        styles.visibility = VISIBILITY_VISIBLE;
-        styles.zIndex = String(this.data()?.config?.sticky ?? DEFAULT_ZINDEX);
+        else {
+            if (styles.visibility === VISIBILITY_VISIBLE) {
+                return;
+            }
+            styles.visibility = VISIBILITY_VISIBLE;
+        }
+        styles.zIndex = String(this._data?.config?.sticky ?? DEFAULT_ZINDEX);
     }
     hide() {
         const styles = this._elementRef.nativeElement.style;
-        if (styles.visibility === VISIBILITY_HIDDEN) {
-            return;
+        if (this.regular) {
+            if (styles.display === DISPLAY_NONE) {
+                return;
+            }
+            styles.display = DISPLAY_NONE;
+        }
+        else {
+            if (styles.visibility === VISIBILITY_HIDDEN) {
+                return;
+            }
+            styles.visibility = VISIBILITY_HIDDEN;
         }
         styles.position = POSITION_ABSOLUTE;
-        styles.visibility = VISIBILITY_HIDDEN;
         styles.transform = ZEROS_TRANSLATE_3D;
         styles.zIndex = HIDDEN_ZINDEX;
     }
@@ -241,11 +300,12 @@ class Tracker {
     /**
      * tracking by propName
      */
-    track(items, components, direction) {
+    track(items, components, snapedComponent, direction) {
         if (!items) {
             return;
         }
         const idPropName = this._trackingPropertyName, untrackedItems = [...components], isDown = direction === 0 || direction === 1;
+        let isRegularSnapped = false;
         for (let i = isDown ? 0 : items.length - 1, l = isDown ? items.length : 0; isDown ? i < l : i >= l; isDown ? i++ : i--) {
             const item = items[i], itemTrackingProperty = item[idPropName];
             if (this._trackMap) {
@@ -257,6 +317,13 @@ class Tracker {
                             return v.instance.id === compId;
                         });
                         if (indexByUntrackedItems > -1) {
+                            if (snapedComponent) {
+                                if (item['config']['snapped'] || item['config']['snappedOut']) {
+                                    isRegularSnapped = true;
+                                    snapedComponent.instance.item = item;
+                                    snapedComponent.instance.show();
+                                }
+                            }
                             comp.instance.item = item;
                             comp.instance.show();
                             untrackedItems.splice(indexByUntrackedItems, 1);
@@ -269,6 +336,13 @@ class Tracker {
             if (untrackedItems.length > 0) {
                 const comp = untrackedItems.shift(), item = items[i];
                 if (comp) {
+                    if (snapedComponent) {
+                        if (item['config']['snapped'] || item['config']['snappedOut']) {
+                            isRegularSnapped = true;
+                            snapedComponent.instance.item = item;
+                            snapedComponent.instance.show();
+                        }
+                    }
                     comp.instance.item = item;
                     comp.instance.show();
                     if (this._trackMap) {
@@ -283,6 +357,11 @@ class Tracker {
                 comp.instance.hide();
             }
         }
+        if (!isRegularSnapped) {
+            if (snapedComponent) {
+                snapedComponent.instance.hide();
+            }
+        }
     }
     untrackComponentByIdProperty(component) {
         if (!component) {
@@ -599,6 +678,20 @@ class TrackBox extends CacheMap {
         }
         this._displayComponents = v;
     }
+    _snapedDisplayComponent;
+    set snapedDisplayComponent(v) {
+        if (this._snapedDisplayComponent === v) {
+            return;
+        }
+        this._snapedDisplayComponent = v;
+    }
+    _isSnappingMethodAdvanced = false;
+    set isSnappingMethodAdvanced(v) {
+        if (this._isSnappingMethodAdvanced === v) {
+            return;
+        }
+        this._isSnappingMethodAdvanced = v;
+    }
     /**
      * Set the trackBy property
      */
@@ -1074,7 +1167,7 @@ class TrackBox extends CacheMap {
     generateDisplayCollection(items, stickyMap, metrics) {
         const { normalizedItemWidth, normalizedItemHeight, dynamicSize, itemsFromStartToScrollEnd, isVertical, renderItems: renderItemsLength, scrollSize, sizeProperty, snap, snippedPos, startPosition, totalLength, startIndex, typicalItemSize, } = metrics, displayItems = [];
         if (items.length) {
-            const actualSnippedPosition = snippedPos;
+            const actualSnippedPosition = snippedPos, isSnappingMethodAdvanced = this.isSnappingMethodAdvanced;
             let pos = startPosition, renderItems = renderItemsLength, stickyItem, nextSticky, stickyItemIndex = -1, stickyItemSize = 0;
             if (snap) {
                 for (let i = Math.min(itemsFromStartToScrollEnd > 0 ? itemsFromStartToScrollEnd : 0, totalLength - 1); i >= 0; i--) {
@@ -1085,6 +1178,7 @@ class TrackBox extends CacheMap {
                             y: isVertical ? actualSnippedPosition : 0,
                             width: normalizedItemWidth,
                             height: normalizedItemHeight,
+                            delta: 0,
                         }, config = {
                             isVertical,
                             sticky,
@@ -1092,6 +1186,7 @@ class TrackBox extends CacheMap {
                             snapped: true,
                             snappedOut: false,
                             dynamic: dynamicSize,
+                            isSnappingMethodAdvanced,
                         };
                         const itemData = items[i];
                         stickyItem = { id, measures, data: itemData, config };
@@ -1114,6 +1209,7 @@ class TrackBox extends CacheMap {
                         y: isVertical ? pos : 0,
                         width: normalizedItemWidth,
                         height: normalizedItemHeight,
+                        delta: 0,
                     }, config = {
                         isVertical,
                         sticky: stickyMap[id],
@@ -1121,6 +1217,7 @@ class TrackBox extends CacheMap {
                         snapped: false,
                         snappedOut: false,
                         dynamic: dynamicSize,
+                        isSnappingMethodAdvanced,
                     };
                     const itemData = items[i];
                     const item = { id, measures, data: itemData, config };
@@ -1129,6 +1226,7 @@ class TrackBox extends CacheMap {
                         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;
                     }
                     displayItems.push(item);
                 }
@@ -1143,9 +1241,11 @@ class TrackBox extends CacheMap {
                     stickyItem.config.snapped = nextSticky.config.snapped = false;
                     stickyItem.config.snappedOut = true;
                     stickyItem.config.sticky = 1;
+                    stickyItem.measures.delta = isVertical ? stickyItem.measures.y - scrollSize : stickyItem.measures.x - scrollSize;
                 }
                 else {
                     nextSticky.config.snapped = true;
+                    nextSticky.measures.delta = isVertical ? nextSticky.measures.y - scrollSize : nextSticky.measures.x - scrollSize;
                 }
             }
         }
@@ -1158,7 +1258,7 @@ class TrackBox extends CacheMap {
         if (!this._items || !this._displayComponents) {
             return;
         }
-        this._tracker.track(this._items, this._displayComponents, this.scrollDirection);
+        this._tracker.track(this._items, this._displayComponents, this._snapedDisplayComponent, this.scrollDirection);
     }
     setDisplayObjectIndexMapById(v) {
         this._tracker.displayObjectIndexMapById = v;
@@ -1235,6 +1335,14 @@ class ScrollEvent {
     }
 }
 
+const ADVANCED_PATTERNS = [SnappingMethods.ADVANCED, 'advanced'], DEFAULT_PATTERN = [SnappingMethods.NORMAL, 'normal'];
+const isSnappingMethodAdvenced = (method) => {
+    return ADVANCED_PATTERNS.includes(method);
+};
+const isSnappingMethodDefault = (method) => {
+    return DEFAULT_PATTERN.includes(method);
+};
+
 /**
  * Virtual list component.
  * Maximum performance for extremely large lists.
@@ -1251,6 +1359,8 @@ class NgVirtualListComponent {
      */
     get id() { return this._id; }
     _listContainerRef;
+    _snapContainerRef;
+    _snappedContainer = viewChild('snapped');
     _container = viewChild('container');
     _list = viewChild('list');
     /**
@@ -1320,11 +1430,51 @@ class NgVirtualListComponent {
      * Number of elements outside the scope of visibility. Default value is 2.
      */
     itemsOffset = input(DEFAULT_ITEMS_OFFSET);
+    /**
+     * Snapping method.
+     * 'default' - Normal group rendering.
+     * 'advanced' - The group is rendered on a transparent background. List items below the group are not rendered.
+     */
+    snappingMethod = input(DEFAULT_SNAPPING_METHOD);
+    _isSnappingMethodAdvanced = this.getIsSnappingMethodAdvanced();
     _isVertical = this.getIsVertical();
     _displayComponents = [];
+    _snapedDisplayComponent;
     _bounds = signal(null);
     _scrollSize = signal(0);
     _resizeObserver = null;
+    _resizeSnappedComponentHandler = () => {
+        const list = this._list(), container = this._container(), snappedComponent = this._snapedDisplayComponent?.instance;
+        if (list && container && snappedComponent) {
+            const isVertical = this._isVertical;
+            snappedComponent.regularLength = `${isVertical ? list.nativeElement.offsetWidth : list.nativeElement.offsetHeight}${PX}`;
+            const { width: sWidth, height: sHeight } = snappedComponent.getBounds() ?? { width: 0, height: 0 }, containerElement = container.nativeElement, listElement = list?.nativeElement, { width: lWidth, height: lHeight } = listElement?.getBoundingClientRect() ?? { width: 0, height: 0 }, { width, height } = this._bounds() ?? { width: 0, height: 0 };
+            let left, right, top, bottom, scrollBarSize;
+            if (isVertical) {
+                const snappedY = snappedComponent.item?.measures.y ?? 0, scrollSize = container.nativeElement.scrollTop, delta = snappedY - scrollSize;
+                delta;
+                scrollBarSize = width - lWidth;
+                left = 0;
+                right = width - scrollBarSize;
+                top = sHeight;
+                bottom = height;
+                containerElement.style.clipPath = `path("M 0 ${top + delta} L 0 ${height} L ${width} ${height} L ${width} 0 L ${right} 0 L ${right} ${top + delta} Z")`;
+            }
+            else {
+                const snappedX = snappedComponent.item?.measures.x ?? 0, scrollSize = container.nativeElement.scrollLeft, delta = snappedX - scrollSize;
+                scrollBarSize = height - lHeight;
+                left = sWidth;
+                right = width;
+                top = 0;
+                bottom = height - scrollBarSize;
+                containerElement.style.clipPath = `path("M ${left + delta} 0 L ${left + delta} ${bottom} L 0 ${bottom} L 0 ${height} L ${width} ${height} L ${width} 0 Z")`;
+            }
+        }
+    };
+    _resizeSnappedObserver = null;
+    _componentsResizeObserver = new ResizeObserver(() => {
+        this._trackBox.changes();
+    });
     _onResizeHandler = () => {
         const bounds = this._container()?.nativeElement?.getBoundingClientRect();
         if (bounds) {
@@ -1333,6 +1483,9 @@ class NgVirtualListComponent {
         else {
             this._bounds.set({ width: DEFAULT_LIST_SIZE, height: DEFAULT_LIST_SIZE });
         }
+        if (this._isSnappingMethodAdvanced) {
+            this.updateRegularRenderer();
+        }
     };
     _onScrollHandler = (e) => {
         this.clearScrollToRepeatExecutionTimeout();
@@ -1368,12 +1521,15 @@ class NgVirtualListComponent {
         $trackBy.pipe(takeUntilDestroyed(), tap(v => {
             this._trackBox.trackingPropertyName = v;
         })).subscribe();
-        const $bounds = toObservable(this._bounds).pipe(filter(b => !!b)), $items = toObservable(this.items).pipe(map(i => !i ? [] : i)), $scrollSize = toObservable(this._scrollSize), $itemSize = toObservable(this.itemSize).pipe(map(v => v <= 0 ? DEFAULT_ITEM_SIZE : v)), $itemsOffset = toObservable(this.itemsOffset).pipe(map(v => v < 0 ? DEFAULT_ITEMS_OFFSET : v)), $stickyMap = toObservable(this.stickyMap).pipe(map(v => !v ? {} : v)), $snap = toObservable(this.snap), $isVertical = toObservable(this.direction).pipe(map(v => this.getIsVertical(v || DEFAULT_DIRECTION))), $dynamicSize = toObservable(this.dynamicSize), $enabledBufferOptimization = toObservable(this.enabledBufferOptimization), $cacheVersion = toObservable(this._cacheVersion);
+        const $bounds = toObservable(this._bounds).pipe(filter(b => !!b)), $items = toObservable(this.items).pipe(map(i => !i ? [] : i)), $scrollSize = toObservable(this._scrollSize), $itemSize = toObservable(this.itemSize).pipe(map(v => v <= 0 ? DEFAULT_ITEM_SIZE : v)), $itemsOffset = toObservable(this.itemsOffset).pipe(map(v => v < 0 ? DEFAULT_ITEMS_OFFSET : v)), $stickyMap = toObservable(this.stickyMap).pipe(map(v => !v ? {} : v)), $snap = toObservable(this.snap), $isVertical = toObservable(this.direction).pipe(map(v => this.getIsVertical(v || DEFAULT_DIRECTION))), $dynamicSize = toObservable(this.dynamicSize), $enabledBufferOptimization = toObservable(this.enabledBufferOptimization), $snappingMethod = toObservable(this.snappingMethod).pipe(map(v => this.getIsSnappingMethodAdvanced(v || DEFAULT_SNAPPING_METHOD))), $cacheVersion = toObservable(this._cacheVersion);
         $isVertical.pipe(takeUntilDestroyed(), tap(v => {
             this._isVertical = v;
             const el = this._elementRef.nativeElement;
             toggleClassName(el, v ? CLASS_LIST_VERTICAL : CLASS_LIST_HORIZONTAL, true);
         })).subscribe();
+        $snappingMethod.pipe(takeUntilDestroyed(), tap(v => {
+            this._isSnappingMethodAdvanced = this._trackBox.isSnappingMethodAdvanced = v;
+        })).subscribe();
         $dynamicSize.pipe(takeUntilDestroyed(), tap(dynamicSize => {
             this.listenCacheChangesIfNeed(dynamicSize);
         })).subscribe();
@@ -1388,6 +1544,9 @@ class NgVirtualListComponent {
             this.resetBoundsSize(isVertical, totalSize);
             this.createDisplayComponentsIfNeed(displayItems);
             this.tracking();
+            if (this._isSnappingMethodAdvanced) {
+                this.updateRegularRenderer();
+            }
             const container = this._container();
             if (container) {
                 const delta = this._trackBox.delta;
@@ -1423,18 +1582,29 @@ class NgVirtualListComponent {
             }
         }
     }
+    getIsSnappingMethodAdvanced(m) {
+        const method = m || this.snappingMethod();
+        return isSnappingMethodAdvenced(method);
+    }
     getIsVertical(d) {
         const dir = d || this.direction();
         return isDirection(dir, Directions.VERTICAL);
     }
-    _componentsResizeObserver = new ResizeObserver(() => {
-        this._trackBox.changes();
-    });
     createDisplayComponentsIfNeed(displayItems) {
         if (!displayItems || !this._listContainerRef) {
             this._trackBox.setDisplayObjectIndexMapById({});
             return;
         }
+        if (this._isSnappingMethodAdvanced && this.snap()) {
+            if (!this._snapedDisplayComponent && this._snapContainerRef) {
+                const comp = this._snapContainerRef.createComponent(NgVirtualListItemComponent);
+                comp.instance.regular = true;
+                this._snapedDisplayComponent = comp;
+                this._trackBox.snapedDisplayComponent = this._snapedDisplayComponent;
+                this._resizeSnappedObserver = new ResizeObserver(this._resizeSnappedComponentHandler);
+                this._resizeSnappedObserver.observe(comp.instance.element);
+            }
+        }
         this._trackBox.items = displayItems;
         const _listContainerRef = this._listContainerRef;
         const maxLength = displayItems.length, components = this._displayComponents;
@@ -1447,6 +1617,9 @@ class NgVirtualListComponent {
         }
         this.resetRenderers();
     }
+    updateRegularRenderer() {
+        this._resizeSnappedComponentHandler();
+    }
     resetRenderers(itemRenderer) {
         const doMap = {}, components = this._displayComponents;
         for (let i = 0, l = components.length; i < l; i++) {
@@ -1457,6 +1630,10 @@ class NgVirtualListComponent {
                 doMap[id] = i;
             }
         }
+        if (this._isSnappingMethodAdvanced && this.snap() && this._snapedDisplayComponent && this._snapContainerRef) {
+            const comp = this._snapedDisplayComponent;
+            comp.instance.renderer = itemRenderer || this.itemRenderer();
+        }
         this._trackBox.setDisplayObjectIndexMapById(doMap);
     }
     /**
@@ -1598,10 +1775,16 @@ class NgVirtualListComponent {
             if (this._componentsResizeObserver) {
                 this._componentsResizeObserver.disconnect();
             }
+            if (this._resizeSnappedObserver) {
+                this._resizeSnappedObserver.disconnect();
+            }
             if (this._resizeObserver) {
                 this._resizeObserver.disconnect();
             }
         }
+        if (this._snapedDisplayComponent) {
+            this._snapedDisplayComponent.destroy();
+        }
         if (this._displayComponents) {
             while (this._displayComponents.length > 0) {
                 const comp = this._displayComponents.pop();
@@ -1610,14 +1793,17 @@ class NgVirtualListComponent {
         }
     }
     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.2.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 }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onScroll: "onScroll", onScrollEnd: "onScrollEnd" }, viewQueries: [{ 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 }], ngImport: i0, template: "<div #container part=\"scroller\" class=\"ngvl__container\">\r\n  <ul #list part=\"list\" class=\"ngvl__list\">\r\n    <ng-container #renderersContainer></ng-container>\r\n  </ul>\r\n</div>", styles: [":host{display:block;width:400px;overflow:hidden}:host(.horizontal){height:48px}:host(.vertical){height:320px}.ngvl__container{overflow:auto;width:100%;height:100%}.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 ɵ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(.vertical){height:320px}.ngvl__scroller{overflow:auto;width:100%;height:100%}.ngvl__list-snapper{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: "19.2.14", ngImport: i0, type: NgVirtualListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-virtual-list', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, template: "<div #container part=\"scroller\" class=\"ngvl__container\">\r\n  <ul #list part=\"list\" class=\"ngvl__list\">\r\n    <ng-container #renderersContainer></ng-container>\r\n  </ul>\r\n</div>", styles: [":host{display:block;width:400px;overflow:hidden}:host(.horizontal){height:48px}:host(.vertical){height:320px}.ngvl__container{overflow:auto;width:100%;height:100%}.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(.vertical){height:320px}.ngvl__scroller{overflow:auto;width:100%;height:100%}.ngvl__list-snapper{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 }]
+            }], _snapContainerRef: [{
+                type: ViewChild,
+                args: ['snapRendererContainer', { read: ViewContainerRef }]
             }] } });
 
 /*
@@ -1628,5 +1814,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { NgVirtualListComponent };
+export { Directions, NgVirtualListComponent, SnappingMethods };
 //# sourceMappingURL=ng-virtual-list.mjs.map