angular-slickgrid 8.12.1 → 8.13.1

package/fesm2022/angular-slickgrid.mjs

@@ -1,7 +1,7 @@
-import { unsubscribeAll, SlickRowSelectionModel, castObservableToPromise, addToArrayWhenNotExists, Filters, OperatorType, EventNamingStyle, FileType, DelimiterType, SlickEventHandler, SlickgridConfig as SlickgridConfig$1, BackendUtilityService, GridEventService, SharedService, CollectionService, ExtensionUtility, FilterFactory, FilterService, ResizerService, SortService, TreeDataService, PaginationService, ExtensionService, GridStateService, GridService, HeaderGroupingService, emptyElement, SlickGroupItemMetadataProvider, SlickDataView, autoAddEditorFormatterToColumnsWithEditor, SlickGrid, GridStateType, ExtensionName, isColumnDateType } from '@slickgrid-universal/common';
+import { unsubscribeAll, SlickRowSelectionModel, SlickEventData, castObservableToPromise, addToArrayWhenNotExists, FileType, DelimiterType, EventNamingStyle, OperatorType, Filters, SlickEventHandler, SlickgridConfig as SlickgridConfig$1, BackendUtilityService, GridEventService, SharedService, CollectionService, ExtensionUtility, FilterFactory, FilterService, ResizerService, SortService, TreeDataService, PaginationService, ExtensionService, GridStateService, GridService, HeaderGroupingService, emptyElement, SlickGroupItemMetadataProvider, SlickDataView, autoAddEditorFormatterToColumnsWithEditor, SlickGrid, GridStateType, ExtensionName, isColumnDateType } from '@slickgrid-universal/common';
 export * from '@slickgrid-universal/common';
 import * as i0 from '@angular/core';
-import { Injectable, Optional, EventEmitter, Component, Inject, Input, Output, ContentChild, NgModule } from '@angular/core';
+import { Injectable, Optional, EventEmitter, ContentChild, Input, Output, Inject, Component, NgModule } from '@angular/core';
 import * as i1 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { SlickRowDetailView as SlickRowDetailView$1 } from '@slickgrid-universal/row-detail-view-plugin';
@@ -67,7 +67,10 @@ class AngularUtilService {
             domElem = viewRef.rootNodes[0];
             // when user provides the DOM element target, we will read the new Component html and use it to replace the target html
             if (targetElement && domElem) {
-                targetElement.innerHTML = domElem.innerHTML;
+                targetElement.innerHTML =
+                    typeof createCompOptions?.sanitizer === 'function'
+                        ? createCompOptions.sanitizer(domElem.innerHTML || '')
+                        : domElem.innerHTML;
             }
         }
         return { componentRef, domElement: domElem };
@@ -194,6 +197,7 @@ class SlickRowDetailView extends SlickRowDetailView$1 {
     rxjs;
     rowDetailContainer;
     _preloadComponent;
+    _preloadCompRef;
     _views = [];
     _viewComponent;
     _subscriptions = [];
@@ -236,8 +240,12 @@ class SlickRowDetailView extends SlickRowDetailView$1 {
     }
     /** Dispose of all the opened Row Detail Panels Angular View Components */
     disposeAllViewComponents() {
-        this._views.forEach((compRef) => this.disposeViewComponent(compRef));
-        this._views = [];
+        do {
+            const view = this._views.pop();
+            if (view) {
+                this.disposeView(view);
+            }
+        } while (this._views.length > 0);
     }
     /** Get the instance of the SlickGrid addon (control or plugin). */
     getAddonInstance() {
@@ -292,6 +300,8 @@ class SlickRowDetailView extends SlickRowDetailView$1 {
                 }
                 if (this.onAsyncEndUpdate) {
                     this.eventHandler.subscribe(this.onAsyncEndUpdate, (e, args) => {
+                        // destroy preload if exists
+                        this._preloadCompRef?.destroy();
                         // triggers after backend called "onAsyncResponse.notify()"
                         this.renderViewModel(args?.item);
                         if (this.rowDetailViewOptions && typeof this.rowDetailViewOptions.onAsyncEndUpdate === 'function') {
@@ -304,7 +314,6 @@ class SlickRowDetailView extends SlickRowDetailView$1 {
                         // display preload template & re-render all the other Detail Views after toggling
                         // the preload View will eventually go away once the data gets loaded after the "onAsyncEndUpdate" event
                         this.renderPreloadView();
-                        this.renderAllViewComponents();
                         if (this.rowDetailViewOptions && typeof this.rowDetailViewOptions.onAfterRowDetailToggle === 'function') {
                             this.rowDetailViewOptions.onAfterRowDetailToggle(e, args);
                         }
@@ -329,6 +338,14 @@ class SlickRowDetailView extends SlickRowDetailView$1 {
                         }
                     });
                 }
+                if (this.onBeforeRowOutOfViewportRange) {
+                    this._eventHandler.subscribe(this.onBeforeRowOutOfViewportRange, (event, args) => {
+                        if (typeof this.rowDetailViewOptions?.onBeforeRowOutOfViewportRange === 'function') {
+                            this.rowDetailViewOptions.onBeforeRowOutOfViewportRange(event, args);
+                        }
+                        this.disposeViewByItem(args.item);
+                    });
+                }
                 if (this.onRowOutOfViewportRange) {
                     this.eventHandler.subscribe(this.onRowOutOfViewportRange, (e, args) => {
                         if (this.rowDetailViewOptions && typeof this.rowDetailViewOptions.onRowOutOfViewportRange === 'function') {
@@ -354,15 +371,10 @@ class SlickRowDetailView extends SlickRowDetailView$1 {
     }
     /** Redraw (re-render) all the expanded row detail View Components */
     redrawAllViewComponents() {
-        this._views.forEach((compRef) => {
-            this.redrawViewComponent(compRef);
-        });
-    }
-    /** Render all the expanded row detail View Components */
-    renderAllViewComponents() {
+        this.resetRenderedRows();
         this._views.forEach((view) => {
-            if (view?.dataContext) {
-                this.renderViewModel(view.dataContext);
+            if (!view.rendered) {
+                this.redrawViewComponent(view);
             }
         });
     }
@@ -377,24 +389,29 @@ class SlickRowDetailView extends SlickRowDetailView$1 {
     renderPreloadView() {
         const containerElements = this.gridContainerElement.getElementsByClassName(`${PRELOAD_CONTAINER_PREFIX}`);
         if (this._preloadComponent && containerElements?.length >= 0) {
-            this.angularUtilService.createAngularComponentAppendToDom(this._preloadComponent, containerElements[containerElements.length - 1]);
+            const preloadComp = this.angularUtilService.createAngularComponentAppendToDom(this._preloadComponent, containerElements[containerElements.length - 1], {}, { sanitizer: this._grid.sanitizeHtmlString });
+            this._preloadCompRef = preloadComp.componentRef;
         }
     }
     /** Render (or re-render) the View Component (Row Detail) */
     renderViewModel(item) {
         const containerElements = this.gridContainerElement.getElementsByClassName(`${ROW_DETAIL_CONTAINER_PREFIX}${item[this.datasetIdPropName]}`);
         if (this._viewComponent && containerElements?.length > 0) {
+            // render row detail
             const componentOutput = this.angularUtilService.createAngularComponentAppendToDom(this._viewComponent, containerElements[containerElements.length - 1], {
                 model: item,
                 addon: this,
                 grid: this._grid,
                 dataView: this.dataView,
                 parent: this.rowDetailViewOptions?.parent,
+            }, {
+                sanitizer: this._grid.sanitizeHtmlString,
             });
             if (componentOutput?.componentRef) {
                 const viewObj = this._views.find((obj) => obj.id === item[this.datasetIdPropName]);
                 if (viewObj) {
                     viewObj.componentRef = componentOutput.componentRef;
+                    viewObj.rendered = true;
                 }
                 return viewObj;
             }
@@ -404,12 +421,23 @@ class SlickRowDetailView extends SlickRowDetailView$1 {
     // --
     // protected functions
     // ------------------
-    disposeViewComponent(expandedView) {
+    disposeViewByItem(item, removeFromArray = false) {
+        const foundViewIndex = this._views.findIndex((view) => view.id === item[this.datasetIdPropName]);
+        if (foundViewIndex >= 0 && foundViewIndex in this._views) {
+            const expandedView = this._views[foundViewIndex];
+            this.disposeView(expandedView);
+            if (removeFromArray) {
+                this._views.splice(foundViewIndex, 1);
+            }
+        }
+    }
+    disposeView(expandedView) {
         const compRef = expandedView?.componentRef;
         if (compRef) {
             this.appRef.detachView(compRef.hostView);
             if (compRef?.destroy) {
                 compRef.destroy();
+                expandedView.rendered = false;
             }
             return expandedView;
         }
@@ -421,7 +449,7 @@ class SlickRowDetailView extends SlickRowDetailView$1 {
      */
     notifyTemplate(item) {
         if (this.onAsyncResponse) {
-            this.onAsyncResponse.notify({ item, itemDetail: item }, undefined, this);
+            this.onAsyncResponse.notify({ item, itemDetail: item }, new SlickEventData(), this);
         }
     }
     /**
@@ -461,27 +489,21 @@ class SlickRowDetailView extends SlickRowDetailView$1 {
             const viewInfo = {
                 id: args.item[this.datasetIdPropName],
                 dataContext: args.item,
+                rendered: false,
             };
             const idPropName = this.gridOptions.datasetIdPropertyName || 'id';
             addToArrayWhenNotExists(this._views, viewInfo, idPropName);
         }
         else {
             // collapsing, so dispose of the View/Component
-            const foundViewIndex = this._views.findIndex((view) => view.id === args.item[this.datasetIdPropName]);
-            if (foundViewIndex >= 0 && foundViewIndex in this._views) {
-                const compRef = this._views[foundViewIndex].componentRef;
-                if (compRef) {
-                    this.appRef.detachView(compRef.hostView);
-                    compRef.destroy();
-                }
-                this._views.splice(foundViewIndex, 1);
-            }
+            this.disposeViewByItem(args.item, true);
         }
     }
     /** When Row comes back to Viewport Range, we need to redraw the View */
     handleOnRowBackToViewportRange(_e, args) {
-        if (args?.item) {
-            this.redrawAllViewComponents();
+        const viewModel = Array.from(this._views).find((x) => x.id === args.rowId);
+        if (viewModel && !viewModel.rendered) {
+            this.redrawViewComponent(viewModel);
         }
     }
 }
@@ -707,7 +729,6 @@ const GlobalGridOptions = {
         panelRows: 1,
         keyPrefix: '__',
         useRowClick: false,
-        useSimpleViewportCalc: true,
         saveDetailViewOnScroll: false,
     },
     rowHeight: 35,
@@ -1531,6 +1552,13 @@ class AngularSlickgridComponent {
         }
         return showing;
     }
+    /**
+     * Toggle the empty data warning message visibility.
+     * @param showWarning
+     */
+    displayEmptyDataWarning(showWarning = true) {
+        this.slickEmptyWarning?.showEmptyDataMessage(showWarning);
+    }
     //
     // protected functions
     // ------------------
@@ -1541,9 +1569,6 @@ class AngularSlickgridComponent {
     copyColumnWidthsReference(columnDefinitions) {
         columnDefinitions.forEach((col) => (col.originalWidth = col.width));
     }
-    displayEmptyDataWarning(showWarning = true) {
-        this.slickEmptyWarning?.showEmptyDataMessage(showWarning);
-    }
     bindDifferentHooks(grid, gridOptions, dataView) {
         // on locale change, we have to manually translate the Headers, GridMenu
         if (this.translate?.onLangChange) {
@@ -1610,8 +1635,14 @@ class AngularSlickgridComponent {
             this.loadColumnPresetsWhenDatasetInitialized();
             this.loadFilterPresetsWhenDatasetInitialized();
             // When data changes in the DataView, we need to refresh the metrics and/or display a warning if the dataset is empty
-            this._eventHandler.subscribe(dataView.onRowCountChanged, () => {
-                grid.invalidate();
+            this._eventHandler.subscribe(dataView.onRowCountChanged, (_e, args) => {
+                if (!gridOptions.enableRowDetailView || !Array.isArray(args.changedRows) || args.changedRows.length === args.itemCount) {
+                    grid.invalidate();
+                }
+                else {
+                    grid.invalidateRows(args.changedRows);
+                    grid.render();
+                }
                 this.handleOnItemCountChanged(dataView.getFilteredItemCount() || 0, dataView.getItemCount() || 0);
             });
             this._eventHandler.subscribe(dataView.onSetItemsCalled, (_e, args) => {