Fix/issue 379 (#380)

* chore: update typescript version to 4.8.4 and fix vulnerabilities

* chore: update angular version to 15

* chore: update angular version to 16

* fix: fix issue #379

package.json

@@ -15,26 +15,26 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^14.2.0",
-    "@angular/common": "^14.2.0",
-    "@angular/compiler": "^14.2.0",
-    "@angular/core": "^14.2.0",
-    "@angular/forms": "^14.2.0",
-    "@angular/platform-browser": "^14.2.0",
-    "@angular/platform-browser-dynamic": "^14.2.0",
-    "@angular/router": "^14.2.0",
+    "@angular/animations": "^16.2.10",
+    "@angular/common": "^16.2.10",
+    "@angular/compiler": "^16.2.10",
+    "@angular/core": "^16.2.10",
+    "@angular/forms": "^16.2.10",
+    "@angular/platform-browser": "^16.2.10",
+    "@angular/platform-browser-dynamic": "^16.2.10",
+    "@angular/router": "^16.2.10",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.11.4"
+    "zone.js": "~0.13.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^14.2.12",
+    "@angular-devkit/build-angular": "^16.2.7",
     "@angular-eslint/builder": "^14.2.0",
     "@angular-eslint/eslint-plugin": "^14.2.0",
     "@angular-eslint/eslint-plugin-template": "^14.2.0",
     "@angular-eslint/template-parser": "^14.2.0",
-    "@angular/cli": "~14.2.12",
-    "@angular/compiler-cli": "^14.2.0",
+    "@angular/cli": "~16.2.7",
+    "@angular/compiler-cli": "^16.2.10",
     "@types/jasmine": "~4.0.0",
     "@typescript-eslint/eslint-plugin": "^5.59.5",
     "@typescript-eslint/parser": "^5.59.5",
@@ -48,14 +48,14 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.0.0",
-    "ng-packagr": "^14.2.0",
+    "ng-packagr": "^16.2.3",
     "sass": "^1.64.1",
     "semantic-release": "^21.0.7",
-    "typescript": "~4.7.2"
+    "typescript": "~5.1.6"
   },
   "config": {
     "commitizen": {
       "path": "cz-conventional-changelog"
     }
   }
-}
+}

projects/ngx-smart-modal/src/lib/components/ngx-smart-modal.component.ts

@@ -1,6 +1,6 @@
 import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import {
-  AfterViewInit,
+  AfterViewChecked,
   ChangeDetectorRef,
   Component,
   ComponentRef,
@@ -62,7 +62,7 @@ import { NgxSmartModalConfig } from '../config/ngx-smart-modal.config';
   styles: [
   ]
 })
-export class NgxSmartModalComponent implements OnInit, OnDestroy, AfterViewInit {
+export class NgxSmartModalComponent implements OnInit, OnDestroy, AfterViewChecked {
 
   @Input() public closable = true;
   @Input() public escapable = true;
@@ -125,10 +125,14 @@ export class NgxSmartModalComponent implements OnInit, OnDestroy, AfterViewInit
     this._sendEvent('create');
   }
 
-  public ngAfterViewInit() {
-    if (this.contentComponent) {
-      const componentRef = this._viewContainerRef.createComponent(this.contentComponent);
-      this.createDynamicContent(this.dynamicContentContainer, componentRef);
+  public ngAfterViewChecked() {
+    if (
+      this.overlayVisible &&
+      this.contentComponent &&
+      this.dynamicContentContainer &&
+      this.dynamicContentContainer.length === 0
+    ) {
+      this.createDynamicContent();
     }
   }
 
@@ -367,9 +371,10 @@ export class NgxSmartModalComponent implements OnInit, OnDestroy, AfterViewInit
   /**
    * Creates content inside provided ViewContainerRef
    */
-  private createDynamicContent(viewContainerRef: ViewContainerRef, componentRef: ComponentRef<Component>): void {
-    viewContainerRef.clear();
-    this.assignModalDataToComponentData(componentRef);
+  private createDynamicContent(): void {
+    this.dynamicContentContainer.clear();
+    this._componentRef = this.dynamicContentContainer.createComponent(this.contentComponent);
+    this.assignModalDataToComponentData(this._componentRef);
     this.markForCheck();
   }
 

projects/ngx-smart-modal/src/lib/services/ngx-smart-modal.service.ts

@@ -248,8 +248,6 @@ export class NgxSmartModalService {
       if (typeof options.ariaDescribedBy === 'string') { componentRef.instance.ariaDescribedBy = options.ariaDescribedBy; }
       if (typeof options.refocus === 'boolean') { componentRef.instance.refocus = options.refocus; }
 
-      this._appRef.attachView(componentRef.hostView);
-
       const domElem = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
       this._document.body.appendChild(domElem);
 

projects/ngx-smart-modal/src/test.ts

@@ -8,20 +8,8 @@ import {
   platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: {
-  context(path: string, deep?: boolean, filter?: RegExp): {
-    <T>(id: string): T;
-    keys(): string[];
-  };
-};
-
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
   platformBrowserDynamicTesting(),
 );
-
-// Then we find all the tests.
-const context = require.context('./tests', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().forEach(context);

projects/ngx-smart-modal/src/tests/components/ngx-smart-modal.component.spec.ts

@@ -1,5 +1,5 @@
 import { TestBed, waitForAsync, ComponentFixture } from '@angular/core/testing';
-import { NgxSmartModalComponent, NgxSmartModalService } from '../../public-api';
+import { NgxSmartModalComponent, NgxSmartModalConfig, NgxSmartModalService } from '../../public-api';
 
 describe('NgxSmartModalComponent', () => {
   let component: NgxSmartModalComponent;
@@ -174,10 +174,19 @@ describe('NgxSmartModalComponent', () => {
 
   it('should add body class', waitForAsync(() => {
     component.addBodyClass();
+
+    const body = document.body;
+
+    expect(body.classList.contains(NgxSmartModalConfig.bodyClassOpen)).toBeTrue();
   }));
 
   it('should remove body class', waitForAsync(() => {
+    const body = document.body;
+    body.classList.add(NgxSmartModalConfig.bodyClassOpen);
+
     component.removeBodyClass();
+
+    expect(body.classList.contains(NgxSmartModalConfig.bodyClassOpen)).toBeFalse();
   }));
 
   it('should targetPlacement if no target', waitForAsync(() => {

projects/ngx-smart-modal/src/tests/services/ngx-smart-modal.service.spec.ts

@@ -8,10 +8,12 @@ import { NgxSmartModalStackService } from '../../lib/services/ngx-smart-modal-st
 
 @Component({
   selector: 'ngx-smart-modal-test-fake',
-  template: 'test fake component<ng-template #tpl></ng-template>'
+  template: 'test fake component<ng-template #tpl><div>test fake tpl content div</div>test fake tpl content</ng-template>'
 })
 export class FakeComponent {
   @ViewChild(TemplateRef) public tpl: TemplateRef<any> = {} as any;
+
+  constructor(public viewRef: ViewContainerRef) {}
 }
 
 describe('NgxSmartModalService', () => {
@@ -30,19 +32,13 @@ describe('NgxSmartModalService', () => {
         NgxSmartModalService,
         NgxSmartModalStackService
       ],
-    }).overrideModule(BrowserDynamicTestingModule, {
-      set: {
-        entryComponents: [
-          NgxSmartModalComponent,
-          FakeComponent
-        ],
-      }
-    });
+    }).compileComponents();
   }));
 
   beforeEach(() => {
     const fixture = TestBed.createComponent(FakeComponent);
     fakeComponent = fixture.componentInstance;
+    fixture.detectChanges();
   });
 
   it('should add events (_private)', inject([NgxSmartModalService], (service: NgxSmartModalService) => {
@@ -352,14 +348,19 @@ describe('NgxSmartModalService', () => {
       ariaDescribedBy: 'test',
     };
 
-    const fixture = TestBed.createComponent(NgxSmartModalComponent);
-    const vcr = {
-      createComponent: () => fixture.componentRef
-    } as any;
+    const fixture = TestBed.createComponent(FakeComponent);
+    fixture.detectChanges();
+    const vcr = fixture.componentInstance.viewRef;
 
     service.create('test', 'test content', vcr, options);
 
     service.create('test2', 'test content', vcr);
+
+    const tmp = document.querySelectorAll('body > ngx-smart-modal:nth-last-child(-n + 2)');
+
+    expect(tmp).toBeInstanceOf(NodeList);
+    expect(tmp.length).toBe(2);
+
   }));
 
   it('should destroy modal', inject([NgxSmartModalService, NgxSmartModalStackService], (service: NgxSmartModalService, stackService: NgxSmartModalStackService) => {
@@ -442,9 +443,21 @@ describe('NgxSmartModalService', () => {
   })));
 
   it('should resolve content', inject([NgxSmartModalService], (service: NgxSmartModalService) => {
-    (service as any)._resolveNgContent('test content');
-    (service as any)._resolveNgContent(FakeComponent);
-    (service as any)._resolveNgContent(fakeComponent.tpl);
+    const strRes = (service as any)._resolveNgContent('test content');
+    const compRes = (service as any)._resolveNgContent(FakeComponent);
+    const tplRes = (service as any)._resolveNgContent(fakeComponent.tpl);
+
+    expect(strRes).toHaveSize(1);
+    expect(strRes[0]).toHaveSize(1);
+    expect(strRes[0][0]).toBeInstanceOf(Node);
+    expect(strRes[0][0].nodeType).toBe(Node.TEXT_NODE);
+
+    expect(tplRes).toHaveSize(1);
+    expect(tplRes[0]).toHaveSize(2);
+    expect(tplRes[0][0].nodeType).toEqual(Node.ELEMENT_NODE);
+    expect(tplRes[0][1].nodeType).toEqual(Node.TEXT_NODE);
+
+    expect(compRes).toHaveSize(0);
   }));
 
   it('should escape keyboard event', fakeAsync(inject([NgxSmartModalService], (service: NgxSmartModalService) => {

tsconfig.json

@@ -21,12 +21,13 @@
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2020",
+    "target": "ES2022",
     "module": "es2020",
     "lib": [
       "es2020",
       "dom"
-    ]
+    ],
+    "useDefineForClassFields": false
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,