Upgrade to angular 15

.gitignore

@@ -44,3 +44,5 @@ testem.log
 .DS_Store
 Thumbs.db
 package-lock.json
+.angular
+.vscode

angular.json

@@ -27,6 +27,7 @@
               "src/assets"
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.css"
             ],
             "scripts": []
@@ -94,6 +95,7 @@
               "src/assets"
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.css"
             ],
             "scripts": []
@@ -132,6 +134,5 @@
         }
       }
     }
-  },
-  "defaultProject": "ng-modal"
+  }
 }

package.json

@@ -13,31 +13,25 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~12.0.0",
-    "@angular/common": "~12.0.0",
-    "@angular/compiler": "~12.0.0",
-    "@angular/core": "~12.0.0",
-    "@angular/forms": "~12.0.0",
-    "@angular/platform-browser": "~12.0.0",
-    "@angular/platform-browser-dynamic": "~12.0.0",
-    "@angular/router": "~12.0.0",
-    "rxjs": "~6.6.0",
-    "tslib": "^2.1.0",
-    "zone.js": "~0.11.4"
+    "@angular/animations": "16.1.7",
+    "@angular/cdk": "^16.2.7",
+    "@angular/common": "16.1.7",
+    "@angular/compiler": "16.1.7",
+    "@angular/core": "16.1.7",
+    "@angular/forms": "16.1.7",
+    "@angular/material": "^16.2.7",
+    "@angular/platform-browser": "16.1.7",
+    "@angular/platform-browser-dynamic": "16.1.7",
+    "@angular/router": "16.1.7",
+    "rxjs": ">=6.6.0",
+    "tslib": ">=2.1.0",
+    "zone.js": ">=0.13.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~12.0.0",
-    "@angular/cli": "~12.0.0",
-    "@angular/compiler-cli": "~12.0.0",
-    "@types/jasmine": "~3.6.0",
-    "@types/node": "^12.11.1",
-    "jasmine-core": "~3.7.0",
-    "karma": "~6.3.0",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage": "~2.0.3",
-    "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "^1.5.0",
-    "ng-packagr": "^12.0.0",
-    "typescript": "~4.2.3"
+    "@angular-devkit/build-angular": "16.1.6",
+    "@angular/cli": "16.1.6",
+    "@angular/compiler-cli": "16.1.7",
+    "ng-packagr": "16.1.0",
+    "typescript": "4.9.5"
   }
-}
+}

projects/ng-modal-lib/package.json

@@ -1,11 +1,11 @@
 {
-  "name": "ng-modal-lib",
-  "version": "0.0.9",
+  "name": "ng-modal-full-resizable",
+  "version": "0.0.19",
   "peerDependencies": {
-    "@angular/common": "^12.0.0",
-    "@angular/core": "^12.0.0"
+    "@angular/common": ">=15.1.0",
+    "@angular/core": ">=15.1.0"
   },
   "dependencies": {
-    "tslib": "^2.1.0"
+    "tslib": ">=2.3.0"
   }
 }

projects/ng-modal-lib/src/lib/injectable/injectable.directive.ts

@@ -0,0 +1,94 @@
+import {
+    ChangeDetectorRef,
+    Directive,
+    EmbeddedViewRef,
+    OnChanges,
+    OnInit,
+    Renderer2,
+    SimpleChanges,
+    TemplateRef,
+    ViewContainerRef,
+} from '@angular/core';
+import { Observable, Subject, take } from 'rxjs';
+import { ModalComponent } from '../modal/modal.component';
+
+@Directive({
+    selector: '[modalInject]',
+    exportAs: 'modalInject'
+})
+export class ModalInjectDirective implements OnInit, OnChanges {
+    templateView?: EmbeddedViewRef<any>;
+    private _modal?: ModalComponent;
+    constructor(
+        private templateRef: TemplateRef<any>,
+        private renderer: Renderer2,
+        private viewContainerRef: ViewContainerRef,
+        private cdr: ChangeDetectorRef
+    ) {}
+    ngOnChanges(changes: SimpleChanges): void {
+      this.templateView?.detectChanges();
+    }
+
+    ngOnInit(): void {
+    }
+
+    private findModalParts(nodes: HTMLElement[]) {
+        const header = nodes.filter(x => (x?.classList?.contains('app-modal-header') ?? false));
+        const footer = nodes.filter(x => (x?.classList?.contains('app-modal-footer') ?? false));
+        const body   = nodes.filter(x => (!x?.classList?.contains('app-modal-footer') &&
+                                          !x?.classList?.contains('app-modal-header')));
+        return [header, body, footer];
+    }
+
+    private _resultRx = new Subject<any | boolean | null>();
+    get resultRx(): Observable<any | boolean | null> {
+        return this._resultRx.asObservable();
+    }
+    get modal(): ModalComponent | undefined {
+        return this._modal;
+    }
+    contentOptions?: {[key: string]: any};
+    open(modalOptions?: {[key: string]: any }, contentOptions?: {[key: string]: any}): Observable<any | boolean | null> {
+        this.templateView = this.viewContainerRef.createEmbeddedView(this.templateRef);
+        let nodes = this.findModalParts(this.templateView.rootNodes);
+        if(nodes.some(x => !x || x.length == 0)) {
+            const childNodes = this.findModalParts(Array.from(this.templateView.rootNodes.flatMap(x => Array.from(x.children))));
+            let inChildFound = false;
+            if(nodes[0].length == 0 && childNodes[0].length > 0) { 
+                nodes[0] = childNodes[0]; 
+                inChildFound = true; 
+            }
+            if(nodes[2].length == 0 && childNodes[2].length > 0) { 
+                nodes[2] = childNodes[2];
+                inChildFound = true; 
+            }
+            if(childNodes[1].length > 0 && inChildFound) 
+                nodes[1] = childNodes[1];
+        }
+        const wrapped = this.viewContainerRef.createComponent(ModalComponent, {
+            projectableNodes: nodes
+        });
+        if(modalOptions) {
+            Object.entries(modalOptions).forEach(x => { wrapped.setInput(x[0], x[1])});
+        }
+        if(contentOptions) {
+            this.contentOptions = contentOptions;
+        }
+        this._modal = wrapped.instance;
+        this.cdr.detectChanges();   
+      //  this._modal!.open();
+       // this._modal!.modalRoot?.calcBodyHeight();
+       // this._modal?.onClose.pipe(take(1)).subscribe(x => {
+        //    this.close();
+        //})
+        this.cdr.detectChanges();   
+        //wrapped.instance.modalRoot?.moveOnTop();
+        return this.resultRx;
+    }
+
+    close(result: any | boolean | null = null) {
+        this._resultRx.next(result);
+        //this._modal?.close();
+        this.viewContainerRef.clear();
+    }
+}

projects/ng-modal-lib/src/lib/modal/modal-module.ts

@@ -3,6 +3,7 @@ import {CommonModule} from '@angular/common';
 import {ModalComponent} from './modal.component';
 import {ResizableModule} from '../resizable/resizable-module';
 import {DraggableModule} from '../draggable/draggable-module';
+import { ModalInjectDirective } from '../injectable/injectable.directive';
 
 @NgModule({
   imports: [
@@ -12,6 +13,7 @@ import {DraggableModule} from '../draggable/draggable-module';
   ],
   declarations: [
     ModalComponent,
+    ModalInjectDirective
   ],
   exports: [
     ModalComponent,

projects/ng-modal-lib/src/lib/modal/modal.component.css

@@ -21,6 +21,7 @@
 .ui-modal {
   display: none;
   position: fixed;
+  flex-flow: column nowrap;
   left: 0;
   top: 0;
   outline: none;
@@ -30,6 +31,13 @@
   min-width: 16.25rem;
   min-height: 12.5rem;
   width: 31.25rem;
+  animation: fadeIn 0.2s;
+  animation-fill-mode: forwards;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
 }
 
 .ui-modal-header {
@@ -45,6 +53,7 @@
 }
 
 .ui-modal-body {
+  flex-grow: 1;
   position: relative;
   padding: .625rem 1rem;
   max-height: calc(100vh - 12.5rem);

projects/ng-modal-lib/src/lib/modal/modal.component.html

@@ -1,44 +1,68 @@
 <div class="ui-modal-overlay" [style.display]="(visible && backdrop) ? 'block' : 'none'"></div>
+  <div class="ui-modal" tabindex="-1" role="dialog"
+  #modalRoot 
+  [appResizable]="resizeable"
+  [restrictHeight]="minHeight"
+  [ngStyle]="{
+    'height': !minHeight ? undefined : minHeight + 'px',
+    'opacity': visible? '0' : '1',
+    'display': visible? 'flex' : 'none'
+  }"
+  [south]="true"
+  [east]="true"
+  [southEast]="true"
+  [southWest]="true"
+  [west]="true"
+  [northWest]="true"
+  [north]="true"
+  [northEast]="true"
+  (resizing)="onResize($event)"
+  appDraggable
+  [dragEventTarget]="dragEventTarget"
+  [inViewport]="inViewport"
+  (mousedown)="moveOnTop()"
+  (touchstart)="moveOnTop()">
+ <div class="ui-modal-header" #modalHeader
+      (mousedown)="initDrag($event)"
+      (touchstart)="initDrag($event)">
+   <div class="ui-titlebar">
+       <ng-container *ngIf="rendered && headerTemplateRef">
+        <ng-container *ngTemplateOutlet="headerTemplateRef">
+        </ng-container>
+      </ng-container>
+      <ng-container *ngIf="rendered && !headerTemplateRef">
+         <ng-content select=".app-modal-header"></ng-content>
+      </ng-container>
+   </div>
+   <div class="ui-controlbar">
+       <i class="ui-icon"
+          *ngIf="maximizable"
+          (click)="toggleMaximize($event)"
+          [ngClass]="{'dt-icon-maximize': !maximized, 'dt-icon-normalize': maximized}">
+       </i>
+       <i class="ui-icon dt-icon-close" #closeIcon (click)="hide()">
+       </i>
+   </div>
+ </div>
 
-<div class="ui-modal" tabindex="-1" role="dialog"
-     #modalRoot
-     appResizable
-     [south]="true"
-     [east]="true"
-     [southEast]="true"
-     [southWest]="true"
-     [west]="true"
-     [northWest]="true"
-     [north]="true"
-     [northEast]="true"
-     (resizing)="onResize($event)"
-     appDraggable
-     [dragEventTarget]="dragEventTarget"
-     [inViewport]="inViewport"
-     [style.display]="visible ? 'block' : 'none'"
-     (mousedown)="moveOnTop()"
-     (touchstart)="moveOnTop()">
-    <div class="ui-modal-header" #modalHeader
-         (mousedown)="initDrag($event)"
-         (touchstart)="initDrag($event)">
-      <div class="ui-titlebar">
-          <ng-content select=".app-modal-header"></ng-content>
-      </div>
-      <div class="ui-controlbar">
-          <i class="ui-icon"
-             *ngIf="maximizable"
-             (click)="toggleMaximize($event)"
-             [ngClass]="{'dt-icon-maximize': !maximized, 'dt-icon-normalize': maximized}">
-          </i>
-          <i class="ui-icon dt-icon-close" #closeIcon (click)="hide()">
-          </i>
-      </div>
-    </div>
-
-    <div class="ui-modal-body" #modalBody>
-      <ng-content select=".app-modal-body"></ng-content>
-    </div>
-    <div class="ui-modal-footer" #modalFooter>
-      <ng-content select=".app-modal-footer"></ng-content>
-    </div>
-</div>
+ <div class="ui-modal-body" #modalBody>
+    <ng-container *ngIf="rendered && bodyTemplateRef">
+      <ng-container *ngTemplateOutlet="bodyTemplateRef">
+      </ng-container>
+    </ng-container>
+    <ng-container *ngIf="rendered && !bodyTemplateRef">
+      <ng-content select=".app-modal-body">
+      </ng-content>
+    </ng-container>
+ </div>
+ <div class="ui-modal-footer" #modalFooter>
+   <ng-container *ngIf="rendered && footerTemplateRef">
+    <ng-container *ngTemplateOutlet="footerTemplateRef">
+    </ng-container>
+  </ng-container>
+  <ng-container *ngIf="rendered && !footerTemplateRef">
+    <ng-content select=".app-modal-footer">
+    </ng-content>
+  </ng-container>
+ </div>
+</div>