ng-virtual-list 18.7.1 → 18.7.2

package/fesm2022/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';
@@ -155,6 +156,7 @@ class NgVirtualListService {
     set methodOfSelecting(v) {
         this._$methodOfSelecting.next(v);
     }
+    selectByClick = DEFAULT_SELECT_BY_CLICK;
     _trackBox;
     constructor() {
         this._$methodOfSelecting.pipe(takeUntilDestroyed(), tap(v => {
@@ -181,25 +183,61 @@ class NgVirtualListService {
         })).subscribe();
     }
     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 (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;
                 }
@@ -243,6 +281,7 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
     _service = inject(NgVirtualListService);
     _isSelected = false;
     config = signal({});
+    measures = signal(undefined);
     _part = PART_DEFAULT_ITEM;
     get part() { return this._part; }
     regular = false;
@@ -255,6 +294,7 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
         this._data = v;
         this.updatePartStr(v, this._isSelected);
         this.updateConfig(v);
+        this.updateMeasures(v);
         this.update();
         this.data.set(v);
         this._cdr.detectChanges();
@@ -282,6 +322,14 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
     get element() {
         return this._elementRef.nativeElement;
     }
+    _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);
+    };
     constructor() {
         super();
         this._id = this._service.generateComponentId();
@@ -309,11 +357,14 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
             }
             this.updatePartStr(this._data, this._isSelected);
             this.updateConfig(this._data);
+            this.updateMeasures(this._data);
         })).subscribe();
     }
+    updateMeasures(v) {
+        this.measures.set(v?.measures ? { ...v.measures } : undefined);
+    }
     updateConfig(v) {
-        this.config.set({ ...v?.config || {}, selected: this._isSelected });
-        this._cdr.markForCheck();
+        this.config.set({ ...v?.config || {}, selected: this._isSelected, select: this._selectHandler(v) });
     }
     update() {
         const data = this._data, regular = this.regular, length = this._regularLength;
@@ -398,14 +449,14 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
         this._service.itemClick(this._data);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgVirtualListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NgVirtualListItemComponent, selector: "ng-virtual-list-item", host: { attributes: { "role": "listitem" }, classAttribute: "ngvl__item" }, usesInheritance: true, ngImport: i0, template: "@if (data(); as item) {\r\n    <div #listItem [part]=\"part\" class=\"ngvl-item__container\" [ngClass]=\"{'snapped': item.config.snapped,\r\n            'snapped-out': item.config.snappedOut}\" (click)=\"onClickHandler()\">\r\n        @if (itemRenderer(); as renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\"\r\n                [ngTemplateOutletContext]=\"{data: item.data || {}, config: config()}\" />\r\n            }\r\n    </div>\r\n}\r\n", 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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NgVirtualListItemComponent, selector: "ng-virtual-list-item", host: { attributes: { "role": "listitem" }, classAttribute: "ngvl__item" }, usesInheritance: true, ngImport: i0, template: "@if (data(); as item) {\r\n    <div #listItem [part]=\"part\" class=\"ngvl-item__container\" [ngClass]=\"{'snapped': item.config.snapped,\r\n            'snapped-out': item.config.snappedOut}\" (click)=\"onClickHandler()\">\r\n        @if (itemRenderer(); as renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\"\r\n                [ngTemplateOutletContext]=\"{data: item.data || {}, measures: measures(), config: config()}\" />\r\n            }\r\n    </div>\r\n}\r\n", 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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgVirtualListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-virtual-list-item', standalone: false, host: {
                         'class': 'ngvl__item',
                         'role': 'listitem',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (data(); as item) {\r\n    <div #listItem [part]=\"part\" class=\"ngvl-item__container\" [ngClass]=\"{'snapped': item.config.snapped,\r\n            'snapped-out': item.config.snappedOut}\" (click)=\"onClickHandler()\">\r\n        @if (itemRenderer(); as renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\"\r\n                [ngTemplateOutletContext]=\"{data: item.data || {}, config: config()}\" />\r\n            }\r\n    </div>\r\n}\r\n", 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: "@if (data(); as item) {\r\n    <div #listItem [part]=\"part\" class=\"ngvl-item__container\" [ngClass]=\"{'snapped': item.config.snapped,\r\n            'snapped-out': item.config.snappedOut}\" (click)=\"onClickHandler()\">\r\n        @if (itemRenderer(); as renderer) {\r\n            <ng-container [ngTemplateOutlet]=\"renderer\"\r\n                [ngTemplateOutletContext]=\"{data: item.data || {}, measures: measures(), config: config()}\" />\r\n            }\r\n    </div>\r\n}\r\n", 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: () => [] });
 
 /**
@@ -1804,6 +1855,11 @@ class NgVirtualListComponent {
      * Sets the selected items.
      */
     selectedIds = input(undefined);
+    /**
+     * 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.
+     */
+    selectByClick = input(DEFAULT_SELECT_BY_CLICK);
     /**
      * Determines whether elements will snap. Default value is "true".
      */
@@ -2002,7 +2058,10 @@ class NgVirtualListComponent {
         this._initialized = signal(false);
         this.$initialized = toObservable(this._initialized);
         this._trackBox.displayComponents = this._displayComponents;
-        const $trackBy = toObservable(this.trackBy);
+        const $trackBy = toObservable(this.trackBy), $selectByClick = toObservable(this.selectByClick);
+        $selectByClick.pipe(takeUntilDestroyed(), tap(v => {
+            this._service.selectByClick = v;
+        })).subscribe();
         $trackBy.pipe(takeUntilDestroyed(), tap(v => {
             this._trackBox.trackingPropertyName = v;
         })).subscribe();
@@ -2084,10 +2143,19 @@ class NgVirtualListComponent {
         this._service.$itemClick.pipe(takeUntilDestroyed(), tap(v => {
             this.onItemClick.emit(v);
         })).subscribe();
-        this._service.$selectedIds.pipe(takeUntilDestroyed(), tap(v => {
-            this.onSelect.emit(v);
+        let isSelectedIdsFirstEmit = 0;
+        this._service.$selectedIds.pipe(takeUntilDestroyed(), distinctUntilChanged(), tap(v => {
+            if (this.isSingleSelecting || (this.isMultiSelecting && isSelectedIdsFirstEmit >= 2)) {
+                const curr = this.selectedIds();
+                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(takeUntilDestroyed(), tap(v => {
+        $selectedIds.pipe(takeUntilDestroyed(), distinctUntilChanged(), tap(v => {
             this._service.setSelectedIds(v);
         })).subscribe();
     }
@@ -2351,7 +2419,7 @@ class NgVirtualListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgVirtualListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NgVirtualListComponent, selector: "ng-virtual-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, 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 }, itemConfigMap: { classPropertyName: "itemConfigMap", publicName: "itemConfigMap", 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 }, bufferSize: { classPropertyName: "bufferSize", publicName: "bufferSize", isSignal: true, isRequired: false, transformFunction: null }, maxBufferSize: { classPropertyName: "maxBufferSize", publicName: "maxBufferSize", isSignal: true, isRequired: false, transformFunction: null }, snappingMethod: { classPropertyName: "snappingMethod", publicName: "snappingMethod", isSignal: true, isRequired: false, transformFunction: null }, methodForSelecting: { classPropertyName: "methodForSelecting", publicName: "methodForSelecting", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onScroll: "onScroll", onScrollEnd: "onScrollEnd", onViewportChange: "onViewportChange", onItemClick: "onItemClick", onSelect: "onSelect" }, providers: [NgVirtualListService], 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  <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"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NgVirtualListComponent, selector: "ng-virtual-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, selectByClick: { classPropertyName: "selectByClick", publicName: "selectByClick", isSignal: true, isRequired: false, 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 }, itemConfigMap: { classPropertyName: "itemConfigMap", publicName: "itemConfigMap", 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 }, bufferSize: { classPropertyName: "bufferSize", publicName: "bufferSize", isSignal: true, isRequired: false, transformFunction: null }, maxBufferSize: { classPropertyName: "maxBufferSize", publicName: "maxBufferSize", isSignal: true, isRequired: false, transformFunction: null }, snappingMethod: { classPropertyName: "snappingMethod", publicName: "snappingMethod", isSignal: true, isRequired: false, transformFunction: null }, methodForSelecting: { classPropertyName: "methodForSelecting", publicName: "methodForSelecting", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onScroll: "onScroll", onScrollEnd: "onScrollEnd", onViewportChange: "onViewportChange", onItemClick: "onItemClick", onSelect: "onSelect" }, providers: [NgVirtualListService], 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  <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"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgVirtualListComponent, decorators: [{
             type: Component,