@wavemaker/app-ng-runtime 11.14.1-rc.6310 → 11.14.2-rc.6311

package/components/data/list/fesm2022/index.mjs

@@ -138,28 +138,36 @@ class ListItemDirective {
         const $editItem = this.nativeElement.querySelector('.edit-list-item');
         const $deleteItem = this.nativeElement.querySelector('.delete-list-item');
         if ($editItem) {
-            // Triggered on click of edit action
-            $editItem.addEventListener('click', evt => {
+            // MEMORY LEAK FIX: Store bound handler for cleanup
+            this.boundEditHandler = (evt) => {
                 this.listComponent.update();
-            });
+            };
+            // Triggered on click of edit action
+            $editItem.addEventListener('click', this.boundEditHandler);
         }
         if ($deleteItem) {
-            // Triggered on click of delete action
-            $deleteItem.addEventListener('click', evt => {
+            // MEMORY LEAK FIX: Store bound handler for cleanup
+            this.boundDeleteHandler = (evt) => {
                 this.listComponent.delete();
-            });
+            };
+            // Triggered on click of delete action
+            $deleteItem.addEventListener('click', this.boundDeleteHandler);
         }
     }
     ngOnInit() {
         if (this.listComponent.mouseEnterCB) {
-            this.nativeElement.addEventListener('mouseenter', ($event) => {
+            // MEMORY LEAK FIX: Store bound handler for cleanup
+            this.boundMouseEnterHandler = ($event) => {
                 this.listComponent.invokeEventCallback('mouseenter', { widget: this, $event });
-            });
+            };
+            this.nativeElement.addEventListener('mouseenter', this.boundMouseEnterHandler);
         }
         if (this.listComponent.mouseLeaveCB) {
-            this.nativeElement.addEventListener('mouseleave', ($event) => {
+            // MEMORY LEAK FIX: Store bound handler for cleanup
+            this.boundMouseLeaveHandler = ($event) => {
                 this.listComponent.invokeEventCallback('mouseleave', { widget: this, $event });
-            });
+            };
+            this.nativeElement.addEventListener('mouseleave', this.boundMouseLeaveHandler);
         }
         // adding item attribute on every list item
         $(this.nativeElement).attr('listitemindex', this.$index);
@@ -175,6 +183,82 @@ class ListItemDirective {
             }
         });
     }
+    ngOnDestroy() {
+        // MEMORY LEAK FIX: Remove event listeners
+        if (this.boundMouseEnterHandler && this.nativeElement) {
+            try {
+                this.nativeElement.removeEventListener('mouseenter', this.boundMouseEnterHandler);
+            }
+            catch (e) {
+                // Silently handle cleanup errors
+            }
+            this.boundMouseEnterHandler = null;
+        }
+        if (this.boundMouseLeaveHandler && this.nativeElement) {
+            try {
+                this.nativeElement.removeEventListener('mouseleave', this.boundMouseLeaveHandler);
+            }
+            catch (e) {
+                // Silently handle cleanup errors
+            }
+            this.boundMouseLeaveHandler = null;
+        }
+        if (this.nativeElement) {
+            const $editItem = this.nativeElement.querySelector('.edit-list-item');
+            if ($editItem && this.boundEditHandler) {
+                try {
+                    $editItem.removeEventListener('click', this.boundEditHandler);
+                }
+                catch (e) {
+                    // Silently handle cleanup errors
+                }
+                this.boundEditHandler = null;
+            }
+            const $deleteItem = this.nativeElement.querySelector('.delete-list-item');
+            if ($deleteItem && this.boundDeleteHandler) {
+                try {
+                    $deleteItem.removeEventListener('click', this.boundDeleteHandler);
+                }
+                catch (e) {
+                    // Silently handle cleanup errors
+                }
+                this.boundDeleteHandler = null;
+            }
+        }
+        // MEMORY LEAK FIX: Clear currentItemWidgets cache
+        // The _currentItemWidgets object accumulates references to all child widgets
+        // which prevents them from being garbage collected
+        if (this._currentItemWidgets) {
+            Object.keys(this._currentItemWidgets).forEach(key => {
+                delete this._currentItemWidgets[key];
+            });
+            this._currentItemWidgets = null;
+        }
+        // MEMORY LEAK FIX: Clear context to release references
+        if (this.context) {
+            Object.keys(this.context).forEach(key => {
+                delete this.context[key];
+            });
+            this.context = null;
+        }
+        // MEMORY LEAK FIX: Clear ViewContainerRef reference
+        if (this.viewContainerRef) {
+            this.viewContainerRef = null;
+        }
+        // MEMORY LEAK FIX: Complete the destroy subject
+        if (this.destroy) {
+            try {
+                if (!this.destroy.closed) {
+                    this.destroy.next(null);
+                    this.destroy.complete();
+                }
+            }
+            catch (e) {
+                // Silently handle cleanup errors
+            }
+            this.destroy = null;
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListItemDirective, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i2.App }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ListItemDirective, isStandalone: true, selector: "[wmListItem]", inputs: { wmListItem: "wmListItem" }, host: { listeners: { "focus": "onFocus()" }, properties: { "class.active": "this.isActive", "class.disable-item": "this.disableItem" } }, exportAs: ["listItemRef"], ngImport: i0 }); }
 }
@@ -561,8 +645,10 @@ class ListComponent extends StylableComponent {
             this.allowpagesizechange = nv;
         }
         else if (key === 'pagesizeoptions') {
-            this.pagesizeoptions = nv;
-            this.setDefaultPageSize(nv);
+            this.prevPagesizeoptions = this.sanitizeCommaSeparatedIntegers(ov);
+            this.pagesizeoptions = this.sanitizeCommaSeparatedIntegers(nv);
+            if (this.allowpagesizechange)
+                this.setDefaultPageSize(nv);
         }
         else {
             super.onPropertyChange(key, nv, ov);
@@ -579,6 +665,10 @@ class ListComponent extends StylableComponent {
                 nv = this.pagesizeoptions?.split(',').map(Number).sort((a, b) => a - b)[0];
                 this.pagesize = nv;
             }
+            if (this.isPageSizeOptionsChanged()) {
+                this.dataNavigator.defaultPageSizeOptions = this.pagesizeoptions?.split(',').map(Number).sort((a, b) => a - b) || [];
+                this.dataNavigator.pageSizeOptions = [...this.dataNavigator.defaultPageSizeOptions];
+            }
         }
         this.updatedPageSize = nv;
         this.dataNavigator.updatedPageSize = nv;
@@ -587,6 +677,31 @@ class ListComponent extends StylableComponent {
         };
         this.dataNavigator.widget.maxResults = nv;
         this.dataNavigator.maxResults = nv;
+        if (this.datasource) {
+            this.datasource.maxResults = this.pagesize || this.datasource.maxResults;
+        }
+    }
+    isPageSizeOptionsChanged() {
+        return !isEqual(this.prevPagesizeoptions, this.pagesizeoptions);
+    }
+    selectPageSize(pagesize) {
+        if (!this.allowpagesizechange && !pagesize)
+            return;
+        if (pagesize < this.dataNavigator.pageSizeOptions[0] || pagesize > this.dataNavigator.pageSizeOptions[this.dataNavigator.pageSizeOptions.length - 1]
+            || !this.dataNavigator.pageSizeOptions.includes(Number(pagesize))) {
+            pagesize = this.dataNavigator.pageSizeOptions[0];
+        }
+        this.dataNavigator.onPageSizeChange(undefined, pagesize);
+    }
+    sanitizeCommaSeparatedIntegers(input) {
+        if (!input)
+            return "";
+        const uniqueNumbers = Array.from(new Set(input
+            .split(",")
+            .map(v => v.trim())
+            .filter(v => /^-?\d+$/.test(v))
+            .map(v => Math.abs(parseInt(v, 10)))));
+        return uniqueNumbers.join(",");
     }
     onItemClick(evt, $listItem) {
         let selectCount;
@@ -726,8 +841,81 @@ class ListComponent extends StylableComponent {
     ngOnDestroy() {
         if (this._listAnimator && this._listAnimator.$btnSubscription) {
             this._listAnimator.$btnSubscription.unsubscribe();
+            this._listAnimator = null;
+        }
+        // MEMORY LEAK FIX: Unsubscribe from all app subscriptions
+        if (this._listenerDestroyers) {
+            this._listenerDestroyers.forEach(d => d && d());
+            this._listenerDestroyers = [];
         }
-        this._listenerDestroyers.forEach(d => d && d());
+        // MEMORY LEAK FIX: Unsubscribe from navigator watches
+        if (this.navigatorResultWatch) {
+            this.navigatorResultWatch.unsubscribe();
+            this.navigatorResultWatch = null;
+        }
+        if (this.navigatorMaxResultWatch) {
+            this.navigatorMaxResultWatch.unsubscribe();
+            this.navigatorMaxResultWatch = null;
+        }
+        // MEMORY LEAK FIX: Unsubscribe from listItems changes
+        if (this.listItemsChangesSubscription) {
+            this.listItemsChangesSubscription.unsubscribe();
+            this.listItemsChangesSubscription = null;
+        }
+        // MEMORY LEAK FIX: Remove native event listener
+        const ulElement = this.nativeElement?.querySelector('ul.app-livelist-container');
+        if (ulElement && this.boundClickHandler) {
+            try {
+                ulElement.removeEventListener('click', this.boundClickHandler, true);
+            }
+            catch (e) {
+                // Silently handle cleanup errors
+            }
+            this.boundClickHandler = null;
+        }
+        // MEMORY LEAK FIX: Destroy jQuery sortable widget
+        if (this.$ulEle && this.$ulEle.sortable) {
+            try {
+                this.$ulEle.sortable('destroy');
+            }
+            catch (e) {
+                // Ignore errors during destroy
+            }
+            this.$ulEle = null;
+        }
+        // MEMORY LEAK FIX: Clear QueryList references
+        if (this.listItems) {
+            this.listItems = null;
+        }
+        if (this.btnComponents) {
+            this.btnComponents = null;
+        }
+        // MEMORY LEAK FIX: Clear ViewChild and ContentChild references
+        this.dataNavigator = null;
+        this.listTemplate = null;
+        this.listLeftActionTemplate = null;
+        this.listRightActionTemplate = null;
+        // MEMORY LEAK FIX: Clear all data arrays and objects
+        this.fieldDefs = [];
+        this._items = [];
+        this.groupedData = null;
+        if (Array.isArray(this.selectedItemWidgets)) {
+            this.selectedItemWidgets = [];
+        }
+        else {
+            this.selectedItemWidgets = {};
+        }
+        // MEMORY LEAK FIX: Remove add item event listener
+        const $addItem = document.getElementsByClassName("add-list-item")[0];
+        if ($addItem && this.boundAddItemHandler) {
+            $addItem.removeEventListener('click', this.boundAddItemHandler);
+            this.boundAddItemHandler = null;
+        }
+        // MEMORY LEAK FIX: Nullify closures and references
+        this.debouncedFetchNextDatasetOnScroll = null;
+        this.firstSelectedItem = null;
+        this.lastSelectedItem = null;
+        this.reorderProps = null;
         super.ngOnDestroy();
     }
     ngOnDetach() {
@@ -1141,19 +1329,23 @@ class ListComponent extends StylableComponent {
         this.isDataChanged = false;
     }
     setupHandlers() {
-        this.listItems.changes.subscribe(listItems => {
+        this.listItemsChangesSubscription = this.listItems.changes.subscribe(listItems => {
             this.onListRender(listItems);
             this.cdRef.detectChanges();
         });
         // handle click event in capturing phase.
-        this.nativeElement.querySelector('ul.app-livelist-container').addEventListener('click', ($event) => {
+        this.boundClickHandler = ($event) => {
             let target = $($event.target).closest('.app-list-item');
             // Recursively find the current list item
             while (target.get(0) && (target.closest('ul.app-livelist-container').get(0) !== $event.currentTarget)) {
                 target = target.parent().closest('.app-list-item');
             }
             this.triggerListItemSelection(target, $event);
-        }, true);
+        };
+        const ulElement = this.nativeElement.querySelector('ul.app-livelist-container');
+        if (ulElement) {
+            ulElement.addEventListener('click', this.boundClickHandler, true);
+        }
     }
     // Triggers on drag start while reordering.
     onReorderStart(evt, ui) {
@@ -1269,10 +1461,12 @@ class ListComponent extends StylableComponent {
     setUpCUDHandlers() {
         const $addItem = document.getElementsByClassName("add-list-item")[0];
         if ($addItem) {
-            // Triggered on click of add action
-            $addItem.addEventListener('click', evt => {
+            // MEMORY LEAK FIX: Store bound handler for cleanup
+            this.boundAddItemHandler = (evt) => {
                 this.create();
-            });
+            };
+            // Triggered on click of add action
+            $addItem.addEventListener('click', this.boundAddItemHandler);
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListComponent, deps: [{ token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i1.ToDatePipe }, { token: i2.App }, { token: i2.AppDefaults }, { token: i0.NgZone }, { token: 'itemclass.bind', attribute: true }, { token: 'disableitem.bind', attribute: true }, { token: 'dataset.bind', attribute: true }, { token: 'datasource.bind', attribute: true }, { token: 'mouseenter.event', attribute: true }, { token: 'mouseleave.event', attribute: true }, { token: i2.StatePersistence }, { token: i2.PaginationService }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }