ng-virtual-list 14.7.0 → 14.7.2

package/fesm2020/ng-virtual-list.mjs

@@ -69,6 +69,7 @@ const DEFAULT_BUFFER_SIZE = 2;
 const DEFAULT_MAX_BUFFER_SIZE = 100;
 const DEFAULT_LIST_SIZE = 400;
 const DEFAULT_SNAP = false;
+const DEFAULT_SELECT_BY_CLICK = true;
 const DEFAULT_ENABLED_BUFFER_OPTIMIZATION = false;
 const DEFAULT_DYNAMIC_SIZE = false;
 const TRACK_BY_PROPERTY_NAME = 'id';
@@ -154,6 +155,7 @@ class NgVirtualListService {
         this.$selectedIds = this._$selectedIds.asObservable();
         this._$methodOfSelecting = new BehaviorSubject(0);
         this.$methodOfSelecting = this._$methodOfSelecting.asObservable();
+        this.selectByClick = DEFAULT_SELECT_BY_CLICK;
         this._$methodOfSelecting.pipe(takeUntil(this._$unsubscribe), tap(v => {
             switch (v) {
                 case MethodsForSelectingTypes.SELECT: {
@@ -181,25 +183,60 @@ class NgVirtualListService {
         this._$methodOfSelecting.next(v);
     }
     setSelectedIds(ids) {
-        this._$selectedIds.next(ids);
+        if (JSON.stringify(this._$selectedIds.getValue()) !== JSON.stringify(ids)) {
+            this._$selectedIds.next(ids);
+        }
     }
     itemClick(data) {
-        this._$itemClick.next(data);
-        if (data) {
+        if (this.selectByClick) {
+            this.select(data);
+        }
+    }
+    /**
+     * Selects a list item
+     * @param data
+     * @param selected - If the value is undefined, then the toggle method is executed, if false or true, then the selection/deselection is performed.
+     */
+    select(data, selected = undefined) {
+        if (data && data.config.selectable) {
             switch (this._$methodOfSelecting.getValue()) {
                 case MethodsForSelectingTypes.SELECT: {
                     const curr = this._$selectedIds.getValue();
-                    this._$selectedIds.next(curr !== data?.id ? data?.id : undefined);
+                    if (selected === undefined) {
+                        this._$selectedIds.next(curr !== data?.id ? data?.id : undefined);
+                    }
+                    else {
+                        this._$selectedIds.next(selected ? data?.id : undefined);
+                    }
                     break;
                 }
                 case MethodsForSelectingTypes.MULTI_SELECT: {
                     const curr = [...(this._$selectedIds.getValue() || [])], index = curr.indexOf(data.id);
-                    if (index > -1) {
-                        curr.splice(index, 1);
-                        this._$selectedIds.next(curr);
+                    if (selected === undefined) {
+                        if (index > -1) {
+                            curr.splice(index, 1);
+                            this._$selectedIds.next(curr);
+                        }
+                        else {
+                            this._$selectedIds.next([...curr, data.id]);
+                        }
+                    }
+                    else if (selected) {
+                        if (index > -1) {
+                            this._$selectedIds.next(curr);
+                        }
+                        else {
+                            this._$selectedIds.next([...curr, data.id]);
+                        }
                     }
                     else {
-                        this._$selectedIds.next([...curr, data.id]);
+                        if (index > -1) {
+                            curr.splice(index, 1);
+                            this._$selectedIds.next(curr);
+                        }
+                        else {
+                            this._$selectedIds.next(curr);
+                        }
                     }
                     break;
                 }
@@ -250,10 +287,19 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
         this._part = PART_DEFAULT_ITEM;
         this._isSelected = false;
         this.config = new BehaviorSubject$1({});
+        this.measures = new BehaviorSubject$1(undefined);
         this.regular = false;
         this._$data = new BehaviorSubject$1(this.data);
         this.$data = this._$data.asObservable();
         this._regularLength = SIZE_100_PERSENT;
+        this._selectHandler = (data) => 
+        /**
+         * Selects a list item
+         * @param selected - If the value is undefined, then the toggle method is executed, if false or true, then the selection/deselection is performed.
+         */
+        (selected = undefined) => {
+            this._service.select(data, selected);
+        };
         this._id = this._service.generateComponentId();
         const $data = this.$data;
         combineLatest([$data, this._service.$methodOfSelecting, this._service.$selectedIds]).pipe(takeUntil$1(this._$unsubscribe), map(([, m, ids]) => ({ method: m, ids })), tap$1(({ method, ids }) => {
@@ -279,6 +325,7 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
             }
             this.updatePartStr(this.data, this._isSelected);
             this.updateConfig(this.data);
+            this.updateMeasures(this.data);
         })).subscribe();
     }
     get id() {
@@ -292,6 +339,7 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
         this.data = v;
         this.updatePartStr(v, this._isSelected);
         this.updateConfig(v);
+        this.updateMeasures(v);
         this.update();
         this._$data.next(v);
         this._cdr.detectChanges();
@@ -320,8 +368,11 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
     get element() {
         return this._elementRef.nativeElement;
     }
+    updateMeasures(v) {
+        this.measures.next(v?.measures ? { ...v.measures } : undefined);
+    }
     updateConfig(v) {
-        this.config.next({ ...v?.config || {}, selected: this._isSelected });
+        this.config.next({ ...v?.config || {}, selected: this._isSelected, select: this._selectHandler(v) });
     }
     update() {
         const data = this.data, regular = this.regular, length = this._regularLength;
@@ -413,13 +464,13 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
     }
 }
 NgVirtualListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgVirtualListItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: NgVirtualListService }], target: i0.ɵɵFactoryTarget.Component });
-NgVirtualListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NgVirtualListItemComponent, selector: "ng-virtual-list-item", host: { attributes: { "role": "listitem" }, classAttribute: "ngvl__item" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data\">\r\n    <div #listItem [part]=\"part\" class=\"ngvl-item__container\" [ngClass]=\"{'snapped': data.config.snapped,\r\n        'snapped-out': data.config.snappedOut}\" (click)=\"onClickHandler()\">\r\n        <ng-container *ngIf=\"itemRenderer\">\r\n            <ng-container [ngTemplateOutlet]=\"itemRenderer\"\r\n                [ngTemplateOutletContext]=\"{data: data.data || {}, config: config | async}\"></ng-container>\r\n        </ng-container>\r\n    </div>\r\n</ng-container>", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden}.ngvl-item__container{margin:0;padding:0;overflow:hidden;background-color:#fff;width:inherit;height:inherit}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NgVirtualListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NgVirtualListItemComponent, selector: "ng-virtual-list-item", host: { attributes: { "role": "listitem" }, classAttribute: "ngvl__item" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data\">\r\n    <div #listItem [part]=\"part\" class=\"ngvl-item__container\" [ngClass]=\"{'snapped': data.config.snapped,\r\n        'snapped-out': data.config.snappedOut}\" (click)=\"onClickHandler()\">\r\n        <ng-container *ngIf=\"itemRenderer\">\r\n            <ng-container [ngTemplateOutlet]=\"itemRenderer\"\r\n                [ngTemplateOutletContext]=\"{data: data.data || {}, measures: measures | async, config: config | async}\"></ng-container>\r\n        </ng-container>\r\n    </div>\r\n</ng-container>", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden}.ngvl-item__container{margin:0;padding:0;overflow:hidden;background-color:#fff;width:inherit;height:inherit}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgVirtualListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-virtual-list-item', host: {
                         'class': 'ngvl__item',
                         'role': 'listitem',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"data\">\r\n    <div #listItem [part]=\"part\" class=\"ngvl-item__container\" [ngClass]=\"{'snapped': data.config.snapped,\r\n        'snapped-out': data.config.snappedOut}\" (click)=\"onClickHandler()\">\r\n        <ng-container *ngIf=\"itemRenderer\">\r\n            <ng-container [ngTemplateOutlet]=\"itemRenderer\"\r\n                [ngTemplateOutletContext]=\"{data: data.data || {}, config: config | async}\"></ng-container>\r\n        </ng-container>\r\n    </div>\r\n</ng-container>", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden}.ngvl-item__container{margin:0;padding:0;overflow:hidden;background-color:#fff;width:inherit;height:inherit}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"data\">\r\n    <div #listItem [part]=\"part\" class=\"ngvl-item__container\" [ngClass]=\"{'snapped': data.config.snapped,\r\n        'snapped-out': data.config.snappedOut}\" (click)=\"onClickHandler()\">\r\n        <ng-container *ngIf=\"itemRenderer\">\r\n            <ng-container [ngTemplateOutlet]=\"itemRenderer\"\r\n                [ngTemplateOutletContext]=\"{data: data.data || {}, measures: measures | async, config: config | async}\"></ng-container>\r\n        </ng-container>\r\n    </div>\r\n</ng-container>", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden}.ngvl-item__container{margin:0;padding:0;overflow:hidden;background-color:#fff;width:inherit;height:inherit}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: NgVirtualListService }]; } });
 
 /**
@@ -1129,8 +1180,8 @@ class TrackBox extends CacheMap {
     /**
      * Finds the position of a collection element by the given Id
      */
-    getItemPosition(id, stickyMap, options) {
-        const opt = { fromItemId: id, stickyMap, ...options };
+    getItemPosition(id, itemConfigMap, options) {
+        const opt = { fromItemId: id, itemConfigMap, ...options };
         this._defaultBufferSize = opt.bufferSize;
         this._maxBufferSize = opt.maxBufferSize;
         const { scrollSize, isFromItemIdFound } = this.recalculateMetrics({
@@ -1145,8 +1196,8 @@ class TrackBox extends CacheMap {
     /**
      * Updates the collection of display objects
      */
-    updateCollection(items, stickyMap, options) {
-        const opt = { stickyMap, ...options }, crudDetected = this._crudDetected, deletedItemsMap = this._deletedItemsMap;
+    updateCollection(items, itemConfigMap, options) {
+        const opt = { itemConfigMap, ...options }, crudDetected = this._crudDetected, deletedItemsMap = this._deletedItemsMap;
         if (opt.dynamicSize) {
             this.cacheElements();
         }
@@ -1167,7 +1218,7 @@ class TrackBox extends CacheMap {
         if (opt.dynamicSize) {
             this.snapshot();
         }
-        const displayItems = this.generateDisplayCollection(items, stickyMap, { ...metrics, });
+        const displayItems = this.generateDisplayCollection(items, itemConfigMap, { ...metrics, });
         return { displayItems, totalSize: metrics.totalSize, delta: metrics.delta, crudDetected };
     }
     /**
@@ -1247,7 +1298,7 @@ class TrackBox extends CacheMap {
      * Calculates list metrics
      */
     recalculateMetrics(options) {
-        const { fromItemId, bounds, collection, dynamicSize, isVertical, itemSize, bufferSize: minBufferSize, scrollSize, snap, stickyMap, enabledBufferOptimization, previousTotalSize, crudDetected, deletedItemsMap } = options;
+        const { fromItemId, bounds, collection, dynamicSize, isVertical, itemSize, bufferSize: minBufferSize, scrollSize, snap, itemConfigMap, enabledBufferOptimization, previousTotalSize, crudDetected, deletedItemsMap } = options;
         const 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(size / typicalItemSize), snippedPos = Math.floor(scrollSize), leftItemsWeights = [], isFromId = fromItemId !== undefined && (typeof fromItemId === 'number' && fromItemId > -1)
             || (typeof fromItemId === 'string' && fromItemId > '-1');
         let leftItemsOffset = 0, rightItemsOffset = 0;
@@ -1307,21 +1358,21 @@ class TrackBox extends CacheMap {
                 totalSize += componentSize;
                 if (isFromId) {
                     if (itemById === undefined) {
-                        if (id !== fromItemId && stickyMap && stickyMap[id] === 1) {
+                        if (id !== fromItemId && itemConfigMap && itemConfigMap[id]?.sticky === 1) {
                             stickyComponentSize = componentSize;
                             stickyCollectionItem = collectionItem;
                         }
                         if (id === fromItemId) {
                             isFromItemIdFound = true;
                             targetDisplayItemIndex = i;
-                            if (stickyCollectionItem && stickyMap) {
+                            if (stickyCollectionItem && itemConfigMap) {
                                 const { num } = this.getElementNumToEnd(i, collection, map, typicalItemSize, size, isVertical);
                                 if (num > 0) {
                                     isTargetInOverscroll = true;
                                     y -= size - componentSize;
                                 }
                                 else {
-                                    if (stickyMap && !stickyMap[collectionItem.id] && y >= scrollSize && y < scrollSize + stickyComponentSize) {
+                                    if (itemConfigMap && !itemConfigMap[collectionItem.id] && y >= scrollSize && y < scrollSize + stickyComponentSize) {
                                         const snappedY = scrollSize - stickyComponentSize;
                                         leftHiddenItemsWeight -= (snappedY - y);
                                         y = snappedY;
@@ -1504,7 +1555,7 @@ class TrackBox extends CacheMap {
     changes() {
         this.bumpVersion();
     }
-    generateDisplayCollection(items, stickyMap, metrics) {
+    generateDisplayCollection(items, itemConfigMap, metrics) {
         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, boundsSize = isVertical ? height : width, actualEndSnippedPosition = boundsSize;
@@ -1514,7 +1565,7 @@ class TrackBox extends CacheMap {
                     if (!items[i]) {
                         continue;
                     }
-                    const id = items[i].id, sticky = stickyMap[id], size = dynamicSize ? this.get(id)?.[sizeProperty] || typicalItemSize : typicalItemSize;
+                    const id = items[i].id, sticky = itemConfigMap[id]?.sticky ?? 0, selectable = itemConfigMap[id]?.selectable ?? true, size = dynamicSize ? this.get(id)?.[sizeProperty] || typicalItemSize : typicalItemSize;
                     if (sticky === 1) {
                         const isOdd = i % 2 != 0, measures = {
                             x: isVertical ? 0 : actualSnippedPosition,
@@ -1526,6 +1577,7 @@ class TrackBox extends CacheMap {
                             odd: isOdd,
                             even: !isOdd,
                             isVertical,
+                            selectable,
                             sticky,
                             snap,
                             snapped: true,
@@ -1549,7 +1601,7 @@ class TrackBox extends CacheMap {
                     if (!items[i]) {
                         continue;
                     }
-                    const id = items[i].id, sticky = stickyMap[id], size = dynamicSize
+                    const id = items[i].id, sticky = itemConfigMap[id]?.sticky ?? 0, selectable = itemConfigMap[id]?.selectable ?? true, size = dynamicSize
                         ? this.get(id)?.[sizeProperty] || typicalItemSize
                         : typicalItemSize;
                     if (sticky === 2) {
@@ -1563,6 +1615,7 @@ class TrackBox extends CacheMap {
                             odd: isOdd,
                             even: !isOdd,
                             isVertical,
+                            selectable,
                             sticky,
                             snap,
                             snapped: true,
@@ -1590,9 +1643,9 @@ class TrackBox extends CacheMap {
                 }
                 const id = items[i].id, size = dynamicSize ? this.get(id)?.[sizeProperty] || typicalItemSize : typicalItemSize;
                 if (id !== stickyItem?.id && id !== endStickyItem?.id) {
-                    const isOdd = i % 2 != 0, 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,
+                    const isOdd = i % 2 != 0, sticky = itemConfigMap[id]?.sticky ?? 0, selectable = itemConfigMap[id]?.selectable ?? true, snapped = snap && (sticky === 1 && pos <= scrollSize || sticky === 2 && pos >= scrollSize + boundsSize - size), measures = {
+                        x: isVertical ? sticky === 1 ? 0 : boundsSize - size : pos,
+                        y: isVertical ? pos : sticky === 2 ? boundsSize - size : 0,
                         width: isVertical ? normalizedItemWidth : size,
                         height: isVertical ? size : normalizedItemHeight,
                         delta: 0,
@@ -1600,7 +1653,8 @@ class TrackBox extends CacheMap {
                         odd: isOdd,
                         even: !isOdd,
                         isVertical,
-                        sticky: stickyMap[id],
+                        selectable,
+                        sticky: sticky,
                         snap,
                         snapped: false,
                         snappedOut: false,
@@ -1613,7 +1667,7 @@ class TrackBox extends CacheMap {
                     }
                     const itemData = items[i];
                     const item = { index: i, id, measures, data: itemData, config };
-                    if (!nextSticky && stickyItemIndex < i && stickyMap[id] === 1 && (pos <= scrollSize + size + stickyItemSize)) {
+                    if (!nextSticky && stickyItemIndex < i && sticky === 1 && (pos <= scrollSize + size + stickyItemSize)) {
                         item.measures.x = isVertical ? 0 : snapped ? actualSnippedPosition : pos;
                         item.measures.y = isVertical ? snapped ? actualSnippedPosition : pos : 0;
                         nextSticky = item;
@@ -1621,7 +1675,7 @@ class TrackBox extends CacheMap {
                         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)) {
+                    else if (!nextEndSticky && endStickyItemIndex > i && sticky === 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;
@@ -1820,6 +1874,8 @@ class NgVirtualListComponent extends DisposableComponent {
         };
         this._$selectedIds = new BehaviorSubject$1(undefined);
         this.$selectedIds = this._$selectedIds.asObservable();
+        this._$selectByClick = new BehaviorSubject$1(DEFAULT_SELECT_BY_CLICK);
+        this.$selectByClick = this._$selectByClick.asObservable();
         this._$snap = new BehaviorSubject$1(DEFAULT_SNAP);
         this.$snap = this._$snap.asObservable();
         this._$enabledBufferOptimization = new BehaviorSubject$1(DEFAULT_ENABLED_BUFFER_OPTIMIZATION);
@@ -1827,8 +1883,8 @@ class NgVirtualListComponent extends DisposableComponent {
         this._$itemRenderer = new BehaviorSubject$1(undefined);
         this.$itemRenderer = this._$itemRenderer.asObservable();
         this._$renderer = new BehaviorSubject$1(undefined);
-        this._$stickyMap = new BehaviorSubject$1({});
-        this.$stickyMap = this._$stickyMap.asObservable();
+        this._$itemConfigMap = new BehaviorSubject$1({});
+        this.$itemConfigMap = this._$itemConfigMap.asObservable();
         this._itemSizeOptions = (v) => {
             if (v === undefined) {
                 return DEFAULT_ITEM_SIZE;
@@ -1974,11 +2030,14 @@ class NgVirtualListComponent extends DisposableComponent {
         this._$initialized = new BehaviorSubject$1(false);
         this.$initialized = this._$initialized.asObservable();
         this._trackBox.displayComponents = this._displayComponents;
-        const $trackBy = this.$trackBy;
+        const $trackBy = this.$trackBy, $selectByClick = this.$selectByClick;
+        $selectByClick.pipe(takeUntil(this._$unsubscribe), tap(v => {
+            this._service.selectByClick = v;
+        })).subscribe();
         $trackBy.pipe(takeUntil(this._$unsubscribe), tap(v => {
             this._trackBox.trackingPropertyName = v;
         })).subscribe();
-        const $bounds = this._$bounds.asObservable().pipe(filter(b => !!b)), $items = this.$items.pipe(map$1(i => !i ? [] : i)), $scrollSize = this._$scrollSize.asObservable(), $itemSize = this.$itemSize.pipe(map$1(v => v <= 0 ? DEFAULT_ITEM_SIZE : v)), $bufferSize = this.$bufferSize.pipe(map$1(v => v < 0 ? DEFAULT_BUFFER_SIZE : v)), $maxBufferSize = this.$maxBufferSize.pipe(map$1(v => v < 0 ? DEFAULT_MAX_BUFFER_SIZE : v)), $stickyMap = this.$stickyMap.pipe(map$1(v => !v ? {} : v)), $snap = this.$snap, $isVertical = this.$direction.pipe(map$1(v => this.getIsVertical(v || DEFAULT_DIRECTION))), $dynamicSize = this.$dynamicSize, $enabledBufferOptimization = this.$enabledBufferOptimization, $snappingMethod = this.$snappingMethod.pipe(map$1(v => this.getIsSnappingMethodAdvanced(v || DEFAULT_SNAPPING_METHOD))), $methodForSelecting = this.$methodForSelecting, $selectedIds = this.$selectedIds, $cacheVersion = this.$cacheVersion;
+        const $bounds = this._$bounds.asObservable().pipe(filter(b => !!b)), $items = this.$items.pipe(map$1(i => !i ? [] : i)), $scrollSize = this._$scrollSize.asObservable(), $itemSize = this.$itemSize.pipe(map$1(v => v <= 0 ? DEFAULT_ITEM_SIZE : v)), $bufferSize = this.$bufferSize.pipe(map$1(v => v < 0 ? DEFAULT_BUFFER_SIZE : v)), $maxBufferSize = this.$maxBufferSize.pipe(map$1(v => v < 0 ? DEFAULT_MAX_BUFFER_SIZE : v)), $itemConfigMap = this.$itemConfigMap.pipe(map$1(v => !v ? {} : v)), $snap = this.$snap, $isVertical = this.$direction.pipe(map$1(v => this.getIsVertical(v || DEFAULT_DIRECTION))), $dynamicSize = this.$dynamicSize, $enabledBufferOptimization = this.$enabledBufferOptimization, $snappingMethod = this.$snappingMethod.pipe(map$1(v => this.getIsSnappingMethodAdvanced(v || DEFAULT_SNAPPING_METHOD))), $methodForSelecting = this.$methodForSelecting, $selectedIds = this.$selectedIds, $cacheVersion = this.$cacheVersion;
         $isVertical.pipe(takeUntil(this._$unsubscribe), tap(v => {
             this._isVertical = v;
             const el = this._elementRef.nativeElement;
@@ -1993,7 +2052,6 @@ class NgVirtualListComponent extends DisposableComponent {
                 this._isMultiSelecting = true;
                 this._isNotSelecting = this._isSingleSelecting = false;
                 if (el) {
-                    console.log('set role', ROLE_LIST_BOX);
                     el.setAttribute('role', ROLE_LIST_BOX);
                 }
                 this._service.methodOfSelecting = MethodsForSelectingTypes.MULTI_SELECT;
@@ -2002,7 +2060,6 @@ class NgVirtualListComponent extends DisposableComponent {
                 this._isSingleSelecting = true;
                 this._isNotSelecting = this._isMultiSelecting = false;
                 if (el) {
-                    console.log('set role', ROLE_LIST_BOX);
                     el.setAttribute('role', ROLE_LIST_BOX);
                 }
                 this._service.methodOfSelecting = MethodsForSelectingTypes.SELECT;
@@ -2011,7 +2068,6 @@ class NgVirtualListComponent extends DisposableComponent {
                 this._isNotSelecting = true;
                 this._isSingleSelecting = this._isMultiSelecting = false;
                 if (el) {
-                    console.log('set role', ROLE_LIST);
                     el.setAttribute('role', ROLE_LIST);
                 }
                 this._service.methodOfSelecting = MethodsForSelectingTypes.NONE;
@@ -2020,14 +2076,14 @@ class NgVirtualListComponent extends DisposableComponent {
         $dynamicSize.pipe(takeUntil(this._$unsubscribe), tap(dynamicSize => {
             this.listenCacheChangesIfNeed(dynamicSize);
         })).subscribe();
-        combineLatest([this.$initialized, $bounds, $items, $stickyMap, $scrollSize, $itemSize,
+        combineLatest([this.$initialized, $bounds, $items, $itemConfigMap, $scrollSize, $itemSize,
             $bufferSize, $maxBufferSize, $snap, $isVertical, $dynamicSize, $enabledBufferOptimization, $cacheVersion,
-        ]).pipe(takeUntil(this._$unsubscribe), distinctUntilChanged(), filter(([initialized]) => !!initialized), switchMap(([, bounds, items, stickyMap, scrollSize, itemSize, bufferSize, maxBufferSize, snap, isVertical, dynamicSize, enabledBufferOptimization, cacheVersion,]) => {
+        ]).pipe(takeUntil(this._$unsubscribe), distinctUntilChanged(), filter(([initialized]) => !!initialized), switchMap(([, bounds, items, itemConfigMap, scrollSize, itemSize, bufferSize, maxBufferSize, snap, isVertical, dynamicSize, enabledBufferOptimization, cacheVersion,]) => {
             let actualScrollSize = (this._isVertical ? this._container?.nativeElement.scrollTop ?? 0 : this._container?.nativeElement.scrollLeft) ?? 0;
             const { width, height } = bounds, opts = {
                 bounds: { width, height }, dynamicSize, isVertical, itemSize,
                 bufferSize, maxBufferSize, scrollSize: actualScrollSize, snap, enabledBufferOptimization,
-            }, { displayItems, totalSize } = this._trackBox.updateCollection(items, stickyMap, opts);
+            }, { displayItems, totalSize } = this._trackBox.updateCollection(items, itemConfigMap, opts);
             this.resetBoundsSize(isVertical, totalSize);
             this.createDisplayComponentsIfNeed(displayItems);
             this.tracking();
@@ -2059,10 +2115,19 @@ class NgVirtualListComponent extends DisposableComponent {
         this._service.$itemClick.pipe(takeUntil(this._$unsubscribe), tap(v => {
             this.onItemClick.emit(v ?? undefined);
         })).subscribe();
-        this._service.$selectedIds.pipe(takeUntil(this._$unsubscribe), tap(v => {
-            this.onSelect.emit(v);
+        let isSelectedIdsFirstEmit = 0;
+        this._service.$selectedIds.pipe(takeUntil(this._$unsubscribe), distinctUntilChanged(), tap(v => {
+            if (this.isSingleSelecting || (this.isMultiSelecting && isSelectedIdsFirstEmit >= 2)) {
+                const curr = this._$selectedIds.getValue();
+                if ((this.isSingleSelecting && JSON.stringify(v) !== JSON.stringify(curr)) || (isSelectedIdsFirstEmit === 2 && JSON.stringify(v) !== JSON.stringify(curr)) || isSelectedIdsFirstEmit > 2) {
+                    this.onSelect.emit(v);
+                }
+            }
+            if (isSelectedIdsFirstEmit < 3) {
+                isSelectedIdsFirstEmit++;
+            }
         })).subscribe();
-        $selectedIds.pipe(takeUntil(this._$unsubscribe), tap(v => {
+        $selectedIds.pipe(takeUntil(this._$unsubscribe), distinctUntilChanged(), tap(v => {
             this._service.setSelectedIds(v);
         })).subscribe();
     }
@@ -2095,6 +2160,19 @@ class NgVirtualListComponent extends DisposableComponent {
     }
     ;
     get selectedIds() { return this._$selectedIds.getValue(); }
+    /**
+     * If false, the element is selected using the config.select method passed to the template;
+     * if true, the element is selected by clicking on it. The default value is true.
+     */
+    set selectByClick(v) {
+        if (this._$selectByClick.getValue() === v) {
+            return;
+        }
+        this._$selectByClick.next(v);
+        this._cdr.markForCheck();
+    }
+    ;
+    get selectByClick() { return this._$selectByClick.getValue(); }
     /**
      * Determines whether elements will snap. Default value is "true".
      */
@@ -2135,18 +2213,22 @@ class NgVirtualListComponent extends DisposableComponent {
     ;
     get itemRenderer() { return this._$itemRenderer.getValue(); }
     /**
-     * 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.
+     * Sets sticky position and selectable for the list item element. If sticky position is greater than 0, then sticky position is applied.
+     * If the sticky value is greater than `0`, then the sticky position mode is enabled for the element. `1` - position start, `2` - position end. Default value is `0`.
+     * selectable determines whether an element can be selected or not. Default value is `true`.
+     * @link https://github.com/DjonnyX/ng-virtual-list/blob/14.x/projects/ng-virtual-list/src/lib/models/item-config-map.model.ts
+     * @author Evgenii Grebennikov
+     * @email djonnyx@gmail.com
      */
-    set stickyMap(v) {
-        if (this._$stickyMap.getValue() === v) {
+    set itemConfigMap(v) {
+        if (this._$itemConfigMap.getValue() === v) {
             return;
         }
-        this._$stickyMap.next(v);
+        this._$itemConfigMap.next(v);
         this._cdr.markForCheck();
     }
     ;
-    get stickyMap() { return this._$stickyMap.getValue(); }
+    get itemConfigMap() { return this._$itemConfigMap.getValue(); }
     /**
      * 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.
@@ -2385,18 +2467,18 @@ class NgVirtualListComponent extends DisposableComponent {
                 if (container) {
                     container.nativeElement.removeEventListener(SCROLL, this._onScrollHandler);
                 }
-                const { width, height } = this._$bounds.getValue() || { width: 0, height: 0 }, stickyMap = this.stickyMap, items = this.items, isVertical = this._isVertical, delta = this._trackBox.delta, opts = {
+                const { width, height } = this._$bounds.getValue() || { width: 0, height: 0 }, itemConfigMap = this.itemConfigMap, items = this.items, isVertical = this._isVertical, delta = this._trackBox.delta, opts = {
                     bounds: { width, height }, collection: items, dynamicSize, isVertical: this._isVertical, itemSize,
                     bufferSize: this.bufferSize, maxBufferSize: this.maxBufferSize, scrollSize: (isVertical ? container.nativeElement.scrollTop : container.nativeElement.scrollLeft) + delta,
                     snap: this.snap, fromItemId: id, enabledBufferOptimization: this.enabledBufferOptimization,
-                }, scrollSize = this._trackBox.getItemPosition(id, stickyMap, opts), params = { [isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: scrollSize, behavior };
+                }, scrollSize = this._trackBox.getItemPosition(id, itemConfigMap, opts), params = { [isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: scrollSize, behavior };
                 if (scrollSize === -1) {
                     container.nativeElement.addEventListener(SCROLL, this._onScrollHandler);
                     return;
                 }
                 this._trackBox.clearDelta();
                 if (container) {
-                    const { displayItems, totalSize } = this._trackBox.updateCollection(items, stickyMap, {
+                    const { displayItems, totalSize } = this._trackBox.updateCollection(items, itemConfigMap, {
                         ...opts, scrollSize, fromItemId: isLastIteration ? undefined : id,
                     }), delta = this._trackBox.delta;
                     this._trackBox.clearDelta();
@@ -2404,7 +2486,7 @@ class NgVirtualListComponent extends DisposableComponent {
                     this.resetBoundsSize(isVertical, totalSize);
                     this.createDisplayComponentsIfNeed(displayItems);
                     this.tracking();
-                    const _scrollSize = this._trackBox.getItemPosition(id, stickyMap, { ...opts, scrollSize: actualScrollSize, fromItemId: id });
+                    const _scrollSize = this._trackBox.getItemPosition(id, itemConfigMap, { ...opts, scrollSize: actualScrollSize, fromItemId: id });
                     if (_scrollSize === -1) {
                         container.nativeElement.addEventListener(SCROLL, this._onScrollHandler);
                         return;
@@ -2498,7 +2580,7 @@ class NgVirtualListComponent extends DisposableComponent {
 }
 NgVirtualListComponent.__nextId = 0;
 NgVirtualListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgVirtualListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: NgVirtualListService }], target: i0.ɵɵFactoryTarget.Component });
-NgVirtualListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NgVirtualListComponent, selector: "ng-virtual-list", inputs: { items: "items", selectedIds: "selectedIds", snap: "snap", enabledBufferOptimization: "enabledBufferOptimization", itemRenderer: "itemRenderer", stickyMap: "stickyMap", itemSize: "itemSize", dynamicSize: "dynamicSize", direction: "direction", itemsOffset: "itemsOffset", bufferSize: "bufferSize", maxBufferSize: "maxBufferSize", trackBy: "trackBy", snappingMethod: "snappingMethod", methodForSelecting: "methodForSelecting" }, outputs: { onScroll: "onScroll", onScrollEnd: "onScrollEnd", onViewportChange: "onViewportChange", onItemClick: "onItemClick", onSelect: "onSelect" }, providers: [NgVirtualListService], viewQueries: [{ propertyName: "_listContainerRef", first: true, predicate: ["renderersContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_container", first: true, predicate: ["container"], descendants: true, read: (ElementRef) }, { propertyName: "_list", first: true, predicate: ["list"], descendants: true, read: (ElementRef) }, { propertyName: "_snapContainerRef", first: true, predicate: ["snapRendererContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_snappedContainer", first: true, predicate: ["snapped"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"snap\" #snapped part=\"snapped-item\" class=\"ngvl__list-snapper\">\r\n  <ng-container #snapRendererContainer></ng-container>\r\n</div>\r\n<div #container part=\"scroller\" class=\"ngvl__scroller\">\r\n  <div [attr.aria-orientation]=\"orientation\" #list part=\"list\" class=\"ngvl__list\">\r\n    <ng-container #renderersContainer></ng-container>\r\n  </div>\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: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
+NgVirtualListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NgVirtualListComponent, selector: "ng-virtual-list", inputs: { items: "items", selectedIds: "selectedIds", selectByClick: "selectByClick", snap: "snap", enabledBufferOptimization: "enabledBufferOptimization", itemRenderer: "itemRenderer", stickyMap: "stickyMap", itemConfigMap: "itemConfigMap", itemSize: "itemSize", dynamicSize: "dynamicSize", direction: "direction", itemsOffset: "itemsOffset", bufferSize: "bufferSize", maxBufferSize: "maxBufferSize", trackBy: "trackBy", snappingMethod: "snappingMethod", methodForSelecting: "methodForSelecting" }, outputs: { onScroll: "onScroll", onScrollEnd: "onScrollEnd", onViewportChange: "onViewportChange", onItemClick: "onItemClick", onSelect: "onSelect" }, providers: [NgVirtualListService], viewQueries: [{ propertyName: "_listContainerRef", first: true, predicate: ["renderersContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_container", first: true, predicate: ["container"], descendants: true, read: (ElementRef) }, { propertyName: "_list", first: true, predicate: ["list"], descendants: true, read: (ElementRef) }, { propertyName: "_snapContainerRef", first: true, predicate: ["snapRendererContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_snappedContainer", first: true, predicate: ["snapped"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"snap\" #snapped part=\"snapped-item\" class=\"ngvl__list-snapper\">\r\n  <ng-container #snapRendererContainer></ng-container>\r\n</div>\r\n<div #container part=\"scroller\" class=\"ngvl__scroller\">\r\n  <div [attr.aria-orientation]=\"orientation\" #list part=\"list\" class=\"ngvl__list\">\r\n    <ng-container #renderersContainer></ng-container>\r\n  </div>\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: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgVirtualListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-virtual-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, providers: [NgVirtualListService], template: "<div *ngIf=\"snap\" #snapped part=\"snapped-item\" class=\"ngvl__list-snapper\">\r\n  <ng-container #snapRendererContainer></ng-container>\r\n</div>\r\n<div #container part=\"scroller\" class=\"ngvl__scroller\">\r\n  <div [attr.aria-orientation]=\"orientation\" #list part=\"list\" class=\"ngvl__list\">\r\n    <ng-container #renderersContainer></ng-container>\r\n  </div>\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"] }]
@@ -2531,6 +2613,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], selectedIds: [{
                 type: Input
+            }], selectByClick: [{
+                type: Input
             }], snap: [{
                 type: Input
             }], enabledBufferOptimization: [{
@@ -2539,6 +2623,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], stickyMap: [{
                 type: Input
+            }], itemConfigMap: [{
+                type: Input
             }], itemSize: [{
                 type: Input
             }], dynamicSize: [{