feat(dialog): Add dialog support

Author: wanoo21

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "ng": "ng",
     "prestart": "ng build",
-    "start": "ng serve",
+    "start": "ng serve --open",
     "build": "ng build abstract --prod",
     "watch:lib": "ng build abstract --watch",
     "test": "ng test abstract",

projects/abstract/dialog/ng-package.json

@@ -0,0 +1 @@
+{}

projects/abstract/dialog/src/ngx-abstract-dialog/NgxAbsDialogRef.ts

@@ -0,0 +1,40 @@
+import {OverlayRef} from '@angular/cdk/overlay';
+import {Observable, Subject} from 'rxjs';
+import {takeUntil} from 'rxjs/operators';
+
+import {INgxAbsDialogConfig} from './ngx-abs-dialog.service';
+
+export class NgxAbsDialogRef<T, R = undefined> {
+  private onClose = new Subject<R>();
+
+  constructor(
+    private overlayRef: OverlayRef,
+    readonly config: INgxAbsDialogConfig<T>
+  ) {
+    if (config.backdropClickClose) {
+      this.backdropClick()
+        .pipe(takeUntil(this.onClose))
+        .subscribe(() => {
+          this.close();
+        });
+    }
+  }
+
+  afterClosed(): Observable<R> {
+    return this.onClose.asObservable();
+  }
+
+  backdropClick(): Observable<MouseEvent> {
+    return this.overlayRef.backdropClick();
+  }
+
+  keydownEvents(): Observable<KeyboardEvent> {
+    return this.overlayRef.keydownEvents();
+  }
+
+  close(modalResult?: R): void {
+    this.overlayRef.dispose();
+    this.onClose.next(modalResult);
+    this.onClose.complete();
+  }
+}

projects/abstract/dialog/src/ngx-abstract-dialog/ngx-abs-dialog-close.directive.ts

@@ -0,0 +1,25 @@
+import {Directive, HostListener, Input, OnInit} from '@angular/core';
+import {NgxAbsDialogRef} from './NgxAbsDialogRef';
+
+@Directive({
+  selector: '[absDialogClose]',
+  exportAs: 'absDialogClose'
+})
+export class NgxAbsDialogCloseDirective implements OnInit {
+  @Input() absDialogClose: any;
+
+  constructor(private ngxAbsDialogRef: NgxAbsDialogRef<any>) {
+  }
+
+  @HostListener('click') close(): void {
+    this.ngxAbsDialogRef.close(this.absDialogClose);
+  }
+
+  @HostListener('document:keydown.escape') escClose(): void {
+    this.close();
+  }
+
+  ngOnInit(): void {
+  }
+
+}

projects/abstract/dialog/src/ngx-abstract-dialog/ngx-abs-dialog.service.ts

@@ -0,0 +1,57 @@
+import {ComponentType, GlobalPositionStrategy, Overlay, OverlayConfig} from '@angular/cdk/overlay';
+import {ComponentPortal} from '@angular/cdk/portal';
+import {Injectable, Injector, StaticProvider} from '@angular/core';
+
+import {NgxAbsDialogRef} from './NgxAbsDialogRef';
+import {NGX_ABS_DIALOG_DATA} from './tokens';
+
+export interface INgxAbsDialogConfig<T = any> extends Omit<OverlayConfig, 'positionStrategy'> {
+  data?: T;
+  backdropClickClose?: boolean;
+}
+
+@Injectable()
+export class NgxAbsDialog {
+
+  constructor(
+    private overlay: Overlay,
+    private injector: Injector
+  ) {
+  }
+
+  static createConfig<T>(config?: INgxAbsDialogConfig<T>): INgxAbsDialogConfig<T> {
+    return {
+      backdropClickClose: true,
+      hasBackdrop: true,
+      disposeOnNavigation: false,
+      ...config
+    };
+  }
+
+  open<T, R = any>(
+    cmp: ComponentType<any>,
+    config?: INgxAbsDialogConfig<T>,
+    providers?: StaticProvider[]
+  ): NgxAbsDialogRef<T, R> {
+    const configOptions = NgxAbsDialog.createConfig(config);
+    const overlay = this.overlay.create(configOptions);
+    const position = new GlobalPositionStrategy();
+    overlay.updatePositionStrategy(position);
+    position.centerHorizontally();
+    position.centerVertically();
+    const modalRef = new NgxAbsDialogRef<T, R>(overlay, configOptions);
+    const cmpPortal = new ComponentPortal(
+      cmp, null, Injector.create({
+        providers: [
+          {provide: NGX_ABS_DIALOG_DATA, useValue: config?.data},
+          {provide: NgxAbsDialogRef, useValue: modalRef},
+          ...(providers || [])
+        ],
+        parent: this.injector
+      })
+    );
+    overlay.attach(cmpPortal);
+    return modalRef;
+  }
+
+}

projects/abstract/dialog/src/ngx-abstract-dialog/ngx-abstract-dialog.module.ts

@@ -0,0 +1,25 @@
+import {OverlayModule} from '@angular/cdk/overlay';
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+
+import {NgxAbsDialogCloseDirective} from './ngx-abs-dialog-close.directive';
+import {NgxAbsDialog} from './ngx-abs-dialog.service';
+
+
+@NgModule({
+  declarations: [
+    NgxAbsDialogCloseDirective
+  ],
+  imports: [
+    CommonModule,
+    OverlayModule
+  ],
+  providers: [
+    NgxAbsDialog,
+  ],
+  exports: [
+    NgxAbsDialogCloseDirective,
+  ]
+})
+export class NgxAbstractDialogModule {
+}

projects/abstract/dialog/src/ngx-abstract-dialog/tokens.ts

@@ -0,0 +1,3 @@
+import {InjectionToken} from '@angular/core';
+
+export const NGX_ABS_DIALOG_DATA = new InjectionToken('NGX Abstract dialog modal data');

projects/abstract/dialog/src/public_api.ts

@@ -0,0 +1,4 @@
+export * from './ngx-abstract-dialog/ngx-abstract-dialog.module';
+export * from './ngx-abstract-dialog/ngx-abs-dialog-close.directive';
+export * from './ngx-abstract-dialog/ngx-abs-dialog.service';
+export * from './ngx-abstract-dialog/tokens';

src/app/app.component.html

@@ -2,3 +2,7 @@ <h1>Hello world</h1>
 <button (click)="setTitle('Hey')">
   Change title
 </button>
+
+<button (click)="openDialog()">
+  Open Dialog
+</button>

src/app/app.component.ts

@@ -1,13 +1,25 @@
-import {Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {AbsPage} from '@wanoo21/ngx-abstract';
+import {NgxAbsDialog} from '@wanoo21/ngx-abstract/dialog';
+
+import {DialogTestComponent} from './dialog-test/dialog-test.component';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AppComponent extends AbsPage {
-  constructor() {
+  constructor(readonly ngxAbsDialog: NgxAbsDialog) {
     super('My super title', 'My Super Description');
   }
+
+  openDialog(): void {
+    this.ngxAbsDialog.open(DialogTestComponent,
+      {data: {foo: 'bar'}, backdropClickClose: false}
+    ).afterClosed().subscribe(value => {
+      console.log(value);
+    });
+  }
 }