Merge branch 'develop' of 10.10.31.70:/ervu-business-metrics into develop

frontend/src/ts/modules/mfe/mfe-webbpm.module.ts

@@ -4,7 +4,7 @@ import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
 import {FormsModule} from "@angular/forms";
 import {AgGridModule} from "ag-grid-angular";
 import {NgbModule} from "@ng-bootstrap/ng-bootstrap";
-import {ToastNoAnimationModule} from "ngx-toastr";
+import {OverlayContainer, ToastNoAnimationModule} from "ngx-toastr";
 import {AppModule} from "../app/app.module";
 import {
   AppConfigService,
@@ -27,6 +27,7 @@ import {MfeRolesGuard} from "./guard/MfeRolesGuard";
 import {TokenProvider} from "../app/provider/token.provider";
 import {MfeTokenProvider} from "./provider/mfe-token.provider";
 import {AccessDeniedComponent} from "../app/component/access-denied.component";
+import {MfeOverlayContainer} from "./overlay/mfe-overlay-container.service";
 
 let IMPORTS = [
   BrowserAnimationsModule,
@@ -58,6 +59,7 @@ let IMPORTS = [
               {provide: ProgressIndicationService, useClass: MfeProgressIndicationService},
               {provide: RolesGuard, useClass: MfeRolesGuard},
               {provide: TokenProvider, useClass: MfeTokenProvider},
+              {provide: OverlayContainer, useClass: MfeOverlayContainer},
               DEFAULT_HTTP_INTERCEPTOR_PROVIDERS
             ],
             bootstrap: [

frontend/src/ts/modules/mfe/overlay/mfe-overlay-container.service.ts

@@ -0,0 +1,35 @@
+import {OverlayContainer} from "ngx-toastr";
+import {Inject, Injectable} from "@angular/core";
+import {DOCUMENT} from "@angular/common";
+
+@Injectable({ providedIn: 'root' })
+export class MfeOverlayContainer extends OverlayContainer {
+
+  constructor(@Inject(DOCUMENT) _document: any) {
+    super(_document);
+  }
+
+  ngOnDestroy() {
+    super.ngOnDestroy();
+  }
+
+  protected _createContainer(): void {
+    super._createContainer();
+    this.appendToRootComponent();
+  }
+
+  private appendToRootComponent(): void {
+    if (!this._containerElement) {
+      return;
+    }
+
+    const rootElement = this.getRootElement();
+    const parent = rootElement || this._document.body;
+    parent.appendChild(this._containerElement);
+  }
+
+  private getRootElement(): Element {
+    return this._document.querySelector('mfe-webbpm')
+        .shadowRoot.querySelector('[webbpm]');
+  }
+}