chore: merge master branch

Author: ghiscoding

CHANGELOG.md

@@ -1,6 +1,15 @@
 # Change Log
 All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.13.1](https://github.com/ghiscoding/angular-slickgrid/compare/v8.13.0...v8.13.1) (2025-03-01)
+
+### Bug Fixes
+
+* add sanitizer to Row Detail create dynamic component ([363065a](https://github.com/ghiscoding/angular-slickgrid/commit/363065ad66dc12da0d082e4ceb6cae99ddd1b99d))
+* **deps:** update all non-major dependencies ([f276e6b](https://github.com/ghiscoding/angular-slickgrid/commit/f276e6b16adabc62559432891785a9d4da007b35))
+* Row Detail preload comp should call destroy lifecycle ([fd0185e](https://github.com/ghiscoding/angular-slickgrid/commit/fd0185edd1e4abd6f5115fed38f79945dcd6569e))
+* Row Detail with inner grids ([193b366](https://github.com/ghiscoding/angular-slickgrid/commit/193b3664f5fdfa84bb7c28314d5229e40223b550))
+
 ## [8.13.0](https://github.com/ghiscoding/angular-slickgrid/compare/v8.12.1...v8.13.0) (2025-02-08)
 
 ### Features

README.md

@@ -100,7 +100,7 @@ npm start
 ### Like it? ⭐ it
 You like to use **Angular-Slickgrid**? Be sure to upvote ⭐ and perhaps support me with caffeine [☕](https://ko-fi.com/ghiscoding) or GitHub sponsoring and feel free to contribute.
 
-<a href='https://ko-fi.com/N4N679OT' target='_blank'><img height='36' style='border:0px;height:36px;' src='https://storage.ko-fi.com/cdn/kofi3.png?v=6' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>
+<a href='https://ko-fi.com/ghiscoding' target='_blank'><img height='36' style='border:0px;height:36px;' src='https://storage.ko-fi.com/cdn/kofi3.png?v=6' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>
 
 ### Contributions
 If you wish to contribute, please make sure to follow the steps shown in the [CONTRIBUTING](https://github.com/ghiscoding/Angular-Slickgrid/blob/master/CONTRIBUTING.md) guide.

docs/events/Available-Events.md

@@ -165,6 +165,7 @@ handleOnHeaderMenuCommand(e) {
   - `onBeforeFooterRowCellDestroy`
   - `onBeforeHeaderCellDestroy`
   - `onBeforeHeaderRowCellDestroy`
+  - `onBeforeRemoveCachedRow`
   - `onBeforeSetColumns`
   - `onBeforeSort`
   - `onBeforeUpdateColumns`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-slickgrid",
-  "version": "8.13.0",
+  "version": "8.13.1",
   "description": "Slickgrid components made available in Angular",
   "keywords": [
     "angular",
@@ -61,7 +61,7 @@
     "@slickgrid-universal/row-detail-view-plugin": "~5.13.0",
     "@slickgrid-universal/rxjs-observable": "~5.13.0",
     "dequal": "^2.0.3",
-    "rxjs": "^7.8.1"
+    "rxjs": "^7.8.2"
   },
   "peerDependencies": {
     "@angular/core": ">=18.0.0"
@@ -85,7 +85,7 @@
     "@angular/platform-browser": "^18.2.13",
     "@angular/platform-browser-dynamic": "^18.2.13",
     "@angular/router": "^18.2.13",
-    "@faker-js/faker": "^9.4.0",
+    "@faker-js/faker": "^9.5.1",
     "@fnando/sparkline": "^0.3.10",
     "@formkit/tempo": "^0.1.2",
     "@ng-select/ng-select": "^13.9.1",
@@ -100,47 +100,47 @@
     "@slickgrid-universal/text-export": "~5.13.0",
     "@types/fnando__sparkline": "^0.3.7",
     "@types/jest": "^29.5.14",
-    "@types/node": "^22.13.1",
+    "@types/node": "^22.13.8",
     "@types/sortablejs": "^1.15.8",
     "angular-eslint": "^18.4.3",
     "bootstrap": "^5.3.3",
     "custom-event-polyfill": "^1.0.7",
-    "cypress": "^14.0.2",
+    "cypress": "^14.1.0",
     "cypress-real-events": "^1.14.0",
     "dompurify": "^3.2.4",
-    "eslint": "^9.20.0",
+    "eslint": "^9.21.0",
     "eslint-plugin-cypress": "^4.1.0",
     "eslint-plugin-n": "^17.15.1",
     "jest": "^29.7.0",
     "jest-extended": "^4.0.2",
-    "jest-preset-angular": "^14.5.1",
+    "jest-preset-angular": "^14.5.3",
     "native-copyfiles": "^0.3.2",
     "ng-packagr": "^18.2.1",
     "ngx-bootstrap": "^18.1.3",
     "npm-run-all2": "^7.0.2",
-    "prettier": "^3.4.2",
+    "prettier": "^3.5.2",
     "release-it": "^19.0.0-next.0",
     "rimraf": "^5.0.10",
-    "rxjs": "^7.8.1",
-    "sass": "^1.84.0",
+    "rxjs": "^7.8.2",
+    "sass": "^1.85.1",
     "servor": "^4.0.2",
     "sortablejs": "^1.15.6",
     "stream-browserify": "^3.0.0",
     "ts-node": "^10.9.2",
     "tslib": "^2.8.1",
     "typescript": "~5.5.4",
-    "typescript-eslint": "^8.23.0",
+    "typescript-eslint": "^8.25.0",
     "zone.js": "~0.15.0"
   },
   "engines": {
     "node": ">=18.19.1"
   },
   "resolutions": {
-    "caniuse-lite": "1.0.30001695",
+    "caniuse-lite": "1.0.30001701",
     "express": "^4.21.2",
-    "semver": "^7.6.3",
+    "semver": "^7.7.1",
     "string-width": "4.2.3",
     "wrap-ansi": "7.0.0",
-    "ws": "^8.18.0"
+    "ws": "^8.18.1"
   }
 }

src/app/modules/angular-slickgrid/extensions/__tests__/slickRowDetailView.spec.ts

@@ -432,13 +432,18 @@ describe('SlickRowDetailView', () => {
         plugin.register();
         plugin.eventHandler.subscribe(plugin.onBeforeRowDetailToggle, () => {
           gridStub.onColumnsReordered.notify({ impactedColumns: [mockColumn] } as any, new SlickEventData(), gridStub);
-          expect(appendSpy).toHaveBeenCalledWith(TestComponent, expect.objectContaining({ className: 'container_field1' }), {
-            model: mockColumn,
-            addon: expect.anything(),
-            grid: gridStub,
-            dataView: dataViewStub,
-            parent: undefined,
-          });
+          expect(appendSpy).toHaveBeenCalledWith(
+            TestComponent,
+            expect.objectContaining({ className: 'container_field1' }),
+            {
+              model: mockColumn,
+              addon: expect.anything(),
+              grid: gridStub,
+              dataView: undefined,
+              parent: undefined,
+            },
+            { sanitizer: expect.any(Function) }
+          );
           done();
         });
         plugin.onBeforeRowDetailToggle.notify({ item: mockColumn, grid: gridStub }, new SlickEventData(), gridStub);
@@ -464,13 +469,18 @@ describe('SlickRowDetailView', () => {
             new SlickEventData(),
             gridStub
           );
-          expect(appendSpy).toHaveBeenCalledWith(TestComponent, expect.objectContaining({ className: 'container_field1' }), {
-            model: mockColumn,
-            addon: expect.anything(),
-            grid: gridStub,
-            dataView: dataViewStub,
-            parent: undefined,
-          });
+          expect(appendSpy).toHaveBeenCalledWith(
+            TestComponent,
+            expect.objectContaining({ className: 'container_field1' }),
+            {
+              model: mockColumn,
+              addon: expect.anything(),
+              grid: gridStub,
+              dataView: undefined,
+              parent: undefined,
+            },
+            { sanitizer: expect.any(Function) }
+          );
         });
         plugin.onBeforeRowDetailToggle.notify({ item: mockColumn, grid: gridStub }, new SlickEventData(), gridStub);
         plugin.onBeforeRowDetailToggle.notify({ item: { ...mockColumn, __collapsed: false }, grid: gridStub }, new SlickEventData(), gridStub);
@@ -494,13 +504,18 @@ describe('SlickRowDetailView', () => {
 
           plugin.eventHandler.subscribe(plugin.onBeforeRowDetailToggle, () => {
             eventPubSubService.publish(eventName, { columnId: 'field1', operator: '=', searchTerms: [] });
-            expect(appendSpy).toHaveBeenCalledWith(TestComponent, expect.objectContaining({ className: 'container_field1' }), {
-              model: mockColumn,
-              addon: expect.anything(),
-              grid: gridStub,
-              dataView: dataViewStub,
-              parent: undefined,
-            });
+            expect(appendSpy).toHaveBeenCalledWith(
+              TestComponent,
+              expect.objectContaining({ className: 'container_field1' }),
+              {
+                model: mockColumn,
+                addon: expect.anything(),
+                grid: gridStub,
+                dataView: undefined,
+                parent: undefined,
+              },
+              { sanitizer: expect.any(Function) }
+            );
           });
           plugin.onBeforeRowDetailToggle.notify({ item: mockColumn, grid: gridStub }, new SlickEventData(), gridStub);
           plugin.onBeforeRowDetailToggle.notify({ item: { ...mockColumn, __collapsed: false }, grid: gridStub }, new SlickEventData(), gridStub);

src/app/modules/angular-slickgrid/extensions/slickRowDetailView.ts

@@ -260,7 +260,9 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
     if (this._preloadComponent && containerElements?.length >= 0) {
       const preloadComp = this.angularUtilService.createAngularComponentAppendToDom(
         this._preloadComponent,
-        containerElements[containerElements.length - 1]
+        containerElements[containerElements.length - 1],
+        {},
+        { sanitizer: this._grid.sanitizeHtmlString }
       );
       this._preloadCompRef = preloadComp.componentRef;
     }
@@ -283,6 +285,9 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
           grid: this._grid,
           dataView: this.dataView,
           parent: this.rowDetailViewOptions?.parent,
+        },
+        {
+          sanitizer: this._grid.sanitizeHtmlString,
         }
       );
       if (componentOutput?.componentRef) {

src/app/modules/angular-slickgrid/services/__tests__/angularUtilService.spec.ts

@@ -79,6 +79,23 @@ describe('AngularUtilService', () => {
       expect(output).toEqual({ componentRef: mockComponentFactory, domElement: h1Mock });
     });
 
+    it('should create an Angular Component with optional target element and extra data and sanitizer', () => {
+      const titleMock = 'Some Title';
+      const h1Mock = document.createElement('h1');
+      h1Mock.textContent = titleMock;
+      mockComponentFactory.hostView.rootNodes[0] = h1Mock;
+      const sanitizerMock = jest.fn().mockReturnValue(titleMock);
+
+      // @ts-ignore
+      const createCompSpy = jest.spyOn(viewContainerRefStub, 'createComponent').mockReturnValue(mockComponentFactory);
+      const output = service.createAngularComponent(TestComponent, domParentElm, { title: titleMock }, { sanitizer: sanitizerMock });
+
+      expect(sanitizerMock).toHaveBeenCalled();
+      expect(createCompSpy).toHaveBeenCalled();
+      expect(domParentElm.innerHTML).toBe('Some Title');
+      expect(output).toEqual({ componentRef: mockComponentFactory, domElement: h1Mock });
+    });
+
     it('should create an Interactive Angular Component with target element and extra data to provide to the component instance', () => {
       const titleMock = 'Some Title';
       const h1Mock = document.createElement('h1');

src/app/modules/angular-slickgrid/services/angularUtil.service.ts

@@ -9,6 +9,7 @@ interface CreateComponentOption {
   ngModuleRef?: NgModuleRef<unknown>;
   environmentInjector?: EnvironmentInjector | NgModuleRef<unknown>;
   projectableNodes?: Node[][];
+  sanitizer?: (dirtyHtml: string) => string;
 }
 
 @Injectable()
@@ -82,7 +83,10 @@ export class AngularUtilService {
 
       // 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;
       }
     }