ng-virtual-list 14.7.0 → 14.7.2

package/fesm2015/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 === null || data === void 0 ? void 0 : data.id) ? data === null || data === void 0 ? void 0 : data.id : undefined);
+                    if (selected === undefined) {
+                        this._$selectedIds.next(curr !== (data === null || data === void 0 ? void 0 : data.id) ? data === null || data === void 0 ? void 0 : data.id : undefined);
+                    }
+                    else {
+                        this._$selectedIds.next(selected ? data === null || data === void 0 ? void 0 : 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();
@@ -321,8 +369,11 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
     get element() {
         return this._elementRef.nativeElement;
     }
+    updateMeasures(v) {
+        this.measures.next((v === null || v === void 0 ? void 0 : v.measures) ? Object.assign({}, v.measures) : undefined);
+    }
     updateConfig(v) {
-        this.config.next(Object.assign(Object.assign({}, (v === null || v === void 0 ? void 0 : v.config) || {}), { selected: this._isSelected }));
+        this.config.next(Object.assign(Object.assign({}, (v === null || v === void 0 ? void 0 : v.config) || {}), { selected: this._isSelected, select: this._selectHandler(v) }));
     }
     update() {
         const data = this.data, regular = this.regular, length = this._regularLength;
@@ -415,13 +466,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 }]; } });
 
 /**
@@ -1132,8 +1183,8 @@ class TrackBox extends CacheMap {
     /**
      * Finds the position of a collection element by the given Id
      */
-    getItemPosition(id, stickyMap, options) {
-        const opt = Object.assign({ fromItemId: id, stickyMap }, options);
+    getItemPosition(id, itemConfigMap, options) {
+        const opt = Object.assign({ fromItemId: id, itemConfigMap }, options);
         this._defaultBufferSize = opt.bufferSize;
         this._maxBufferSize = opt.maxBufferSize;
         const { scrollSize, isFromItemIdFound } = this.recalculateMetrics(Object.assign(Object.assign({}, opt), { dynamicSize: this._crudDetected || opt.dynamicSize, previousTotalSize: this._previousTotalSize, crudDetected: this._crudDetected, deletedItemsMap: this._deletedItemsMap }));
@@ -1142,8 +1193,8 @@ class TrackBox extends CacheMap {
     /**
      * Updates the collection of display objects
      */
-    updateCollection(items, stickyMap, options) {
-        const opt = Object.assign({ stickyMap }, options), crudDetected = this._crudDetected, deletedItemsMap = this._deletedItemsMap;
+    updateCollection(items, itemConfigMap, options) {
+        const opt = Object.assign({ itemConfigMap }, options), crudDetected = this._crudDetected, deletedItemsMap = this._deletedItemsMap;
         if (opt.dynamicSize) {
             this.cacheElements();
         }
@@ -1158,7 +1209,7 @@ class TrackBox extends CacheMap {
         if (opt.dynamicSize) {
             this.snapshot();
         }
-        const displayItems = this.generateDisplayCollection(items, stickyMap, Object.assign({}, metrics));
+        const displayItems = this.generateDisplayCollection(items, itemConfigMap, Object.assign({}, metrics));
         return { displayItems, totalSize: metrics.totalSize, delta: metrics.delta, crudDetected };
     }
     /**
@@ -1238,8 +1289,8 @@ class TrackBox extends CacheMap {
      * Calculates list metrics
      */
     recalculateMetrics(options) {
-        var _a, _b, _c, _d;
-        const { fromItemId, bounds, collection, dynamicSize, isVertical, itemSize, bufferSize: minBufferSize, scrollSize, snap, stickyMap, enabledBufferOptimization, previousTotalSize, crudDetected, deletedItemsMap } = options;
+        var _a, _b, _c, _d, _e;
+        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;
@@ -1299,21 +1350,21 @@ class TrackBox extends CacheMap {
                 totalSize += componentSize;
                 if (isFromId) {
                     if (itemById === undefined) {
-                        if (id !== fromItemId && stickyMap && stickyMap[id] === 1) {
+                        if (id !== fromItemId && itemConfigMap && ((_c = itemConfigMap[id]) === null || _c === void 0 ? void 0 : _c.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;
@@ -1405,13 +1456,13 @@ class TrackBox extends CacheMap {
                     let componentSize = typicalItemSize, itemDisplayMethod = ItemDisplayMethods.NOT_CHANGED;
                     if (map.has(id)) {
                         const bounds = map.get(id);
-                        itemDisplayMethod = (_c = bounds === null || bounds === void 0 ? void 0 : bounds.method) !== null && _c !== void 0 ? _c : ItemDisplayMethods.UPDATE;
+                        itemDisplayMethod = (_d = bounds === null || bounds === void 0 ? void 0 : bounds.method) !== null && _d !== void 0 ? _d : ItemDisplayMethods.UPDATE;
                         if (itemDisplayMethod === ItemDisplayMethods.CREATE) {
                             map.set(id, Object.assign(Object.assign({}, bounds), { method: ItemDisplayMethods.NOT_CHANGED }));
                         }
                     }
                     if (deletedItemsMap.hasOwnProperty(i)) {
-                        const bounds = deletedItemsMap[i], size = (_d = bounds === null || bounds === void 0 ? void 0 : bounds[sizeProperty]) !== null && _d !== void 0 ? _d : typicalItemSize;
+                        const bounds = deletedItemsMap[i], size = (_e = bounds === null || bounds === void 0 ? void 0 : bounds[sizeProperty]) !== null && _e !== void 0 ? _e : typicalItemSize;
                         if (y < scrollSize - size) {
                             leftSizeOfDeletedItems += size;
                         }
@@ -1496,8 +1547,8 @@ class TrackBox extends CacheMap {
     changes() {
         this.bumpVersion();
     }
-    generateDisplayCollection(items, stickyMap, metrics) {
-        var _a, _b, _c;
+    generateDisplayCollection(items, itemConfigMap, metrics) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
         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;
@@ -1507,7 +1558,7 @@ class TrackBox extends CacheMap {
                     if (!items[i]) {
                         continue;
                     }
-                    const id = items[i].id, sticky = stickyMap[id], size = dynamicSize ? ((_a = this.get(id)) === null || _a === void 0 ? void 0 : _a[sizeProperty]) || typicalItemSize : typicalItemSize;
+                    const id = items[i].id, sticky = (_b = (_a = itemConfigMap[id]) === null || _a === void 0 ? void 0 : _a.sticky) !== null && _b !== void 0 ? _b : 0, selectable = (_d = (_c = itemConfigMap[id]) === null || _c === void 0 ? void 0 : _c.selectable) !== null && _d !== void 0 ? _d : true, size = dynamicSize ? ((_e = this.get(id)) === null || _e === void 0 ? void 0 : _e[sizeProperty]) || typicalItemSize : typicalItemSize;
                     if (sticky === 1) {
                         const isOdd = i % 2 != 0, measures = {
                             x: isVertical ? 0 : actualSnippedPosition,
@@ -1519,6 +1570,7 @@ class TrackBox extends CacheMap {
                             odd: isOdd,
                             even: !isOdd,
                             isVertical,
+                            selectable,
                             sticky,
                             snap,
                             snapped: true,
@@ -1542,8 +1594,8 @@ class TrackBox extends CacheMap {
                     if (!items[i]) {
                         continue;
                     }
-                    const id = items[i].id, sticky = stickyMap[id], size = dynamicSize
-                        ? ((_b = this.get(id)) === null || _b === void 0 ? void 0 : _b[sizeProperty]) || typicalItemSize
+                    const id = items[i].id, sticky = (_g = (_f = itemConfigMap[id]) === null || _f === void 0 ? void 0 : _f.sticky) !== null && _g !== void 0 ? _g : 0, selectable = (_j = (_h = itemConfigMap[id]) === null || _h === void 0 ? void 0 : _h.selectable) !== null && _j !== void 0 ? _j : true, size = dynamicSize
+                        ? ((_k = this.get(id)) === null || _k === void 0 ? void 0 : _k[sizeProperty]) || typicalItemSize
                         : typicalItemSize;
                     if (sticky === 2) {
                         const isOdd = i % 2 != 0, w = isVertical ? normalizedItemWidth : size, h = isVertical ? size : normalizedItemHeight, measures = {
@@ -1556,6 +1608,7 @@ class TrackBox extends CacheMap {
                             odd: isOdd,
                             even: !isOdd,
                             isVertical,
+                            selectable,
                             sticky,
                             snap,
                             snapped: true,
@@ -1581,11 +1634,11 @@ class TrackBox extends CacheMap {
                 if (!items[i]) {
                     continue;
                 }
-                const id = items[i].id, size = dynamicSize ? ((_c = this.get(id)) === null || _c === void 0 ? void 0 : _c[sizeProperty]) || typicalItemSize : typicalItemSize;
+                const id = items[i].id, size = dynamicSize ? ((_l = this.get(id)) === null || _l === void 0 ? void 0 : _l[sizeProperty]) || typicalItemSize : typicalItemSize;
                 if (id !== (stickyItem === null || stickyItem === void 0 ? void 0 : stickyItem.id) && id !== (endStickyItem === null || endStickyItem === void 0 ? void 0 : 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 = (_o = (_m = itemConfigMap[id]) === null || _m === void 0 ? void 0 : _m.sticky) !== null && _o !== void 0 ? _o : 0, selectable = (_q = (_p = itemConfigMap[id]) === null || _p === void 0 ? void 0 : _p.selectable) !== null && _q !== void 0 ? _q : 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,
@@ -1593,7 +1646,8 @@ class TrackBox extends CacheMap {
                         odd: isOdd,
                         even: !isOdd,
                         isVertical,
-                        sticky: stickyMap[id],
+                        selectable,
+                        sticky: sticky,
                         snap,
                         snapped: false,
                         snappedOut: false,
@@ -1606,7 +1660,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;
@@ -1614,7 +1668,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;
@@ -1813,6 +1867,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);
@@ -1820,8 +1876,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;
@@ -1970,11 +2026,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;
@@ -1990,7 +2049,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;
@@ -1999,7 +2057,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;
@@ -2008,7 +2065,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;
@@ -2017,15 +2073,15 @@ 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,]) => {
             var _a, _b, _c, _d;
             let actualScrollSize = (_d = (this._isVertical ? (_b = (_a = this._container) === null || _a === void 0 ? void 0 : _a.nativeElement.scrollTop) !== null && _b !== void 0 ? _b : 0 : (_c = this._container) === null || _c === void 0 ? void 0 : _c.nativeElement.scrollLeft)) !== null && _d !== void 0 ? _d : 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();
@@ -2057,10 +2113,19 @@ class NgVirtualListComponent extends DisposableComponent {
         this._service.$itemClick.pipe(takeUntil(this._$unsubscribe), tap(v => {
             this.onItemClick.emit(v !== null && v !== void 0 ? 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();
     }
@@ -2093,6 +2158,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".
      */
@@ -2133,18 +2211,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.
@@ -2383,24 +2465,24 @@ 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, Object.assign(Object.assign({}, opts), { scrollSize, fromItemId: isLastIteration ? undefined : id })), delta = this._trackBox.delta;
+                    const { displayItems, totalSize } = this._trackBox.updateCollection(items, itemConfigMap, Object.assign(Object.assign({}, opts), { scrollSize, fromItemId: isLastIteration ? undefined : id })), delta = this._trackBox.delta;
                     this._trackBox.clearDelta();
                     let actualScrollSize = scrollSize + delta;
                     this.resetBoundsSize(isVertical, totalSize);
                     this.createDisplayComponentsIfNeed(displayItems);
                     this.tracking();
-                    const _scrollSize = this._trackBox.getItemPosition(id, stickyMap, Object.assign(Object.assign({}, opts), { scrollSize: actualScrollSize, fromItemId: id }));
+                    const _scrollSize = this._trackBox.getItemPosition(id, itemConfigMap, Object.assign(Object.assign({}, opts), { scrollSize: actualScrollSize, fromItemId: id }));
                     if (_scrollSize === -1) {
                         container.nativeElement.addEventListener(SCROLL, this._onScrollHandler);
                         return;
@@ -2494,7 +2576,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"] }]
@@ -2527,6 +2609,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], selectedIds: [{
                 type: Input
+            }], selectByClick: [{
+                type: Input
             }], snap: [{
                 type: Input
             }], enabledBufferOptimization: [{
@@ -2535,6 +2619,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], stickyMap: [{
                 type: Input
+            }], itemConfigMap: [{
+                type: Input
             }], itemSize: [{
                 type: Input
             }], dynamicSize: [{