fix(toastr): move toastr overlay in front of other overlays (#2078)

Author: Philipp Guerrero Mengana

src/framework/theme/components/toastr/_toast.component.theme.scss

@@ -63,4 +63,7 @@
       }
     }
   }
+  .toastr-overlay-container {
+    z-index: 1041;
+  }
 }

src/framework/theme/components/toastr/toastr.service.spec.ts

@@ -45,11 +45,18 @@ describe('toastr-component', () => {
     fixture = TestBed.createComponent(NbToastrTestComponent);
   }));
 
+  it('should add \'toastr-overlay-container\' class to overlay', () => {
+    fixture.debugElement.componentInstance.showToast('toast-test-class');
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('.cdk-global-overlay-wrapper').classList)
+      .toContain('toastr-overlay-container');
+  });
+
   it('should set class if provided', () => {
     fixture.debugElement.componentInstance.showToast('toast-test-class');
     fixture.detectChanges();
     expect(fixture.nativeElement.querySelector('.toast-test-class')).toBeTruthy();
-  })
+  });
 });
 
 describe('toastr-service', () => {
@@ -188,6 +195,11 @@ describe('toastr-container-registry', () => {
         }
       },
       dispose() {},
+      hostElement: {
+        classList: {
+          add() {},
+        },
+      },
     };
 
     overlayStub = {

src/framework/theme/components/toastr/toastr.service.ts

@@ -171,13 +171,18 @@ export class NbToastrContainerRegistry {
   protected createContainer(position: NbGlobalLogicalPosition): NbToastrOverlayWithContainer {
     const positionStrategy = this.positionBuilder.global().position(position);
     const ref = this.overlay.create({ positionStrategy });
+    this.addClassToOverlayHost(ref);
     const containerRef = ref.attach(new NbComponentPortal(NbToastrContainerComponent, null, null, this.cfr));
     return {
       overlayRef: ref,
       toastrContainer: new NbToastContainer(position, containerRef, this.positionHelper),
     };
   }
 
+  protected addClassToOverlayHost(overlayRef: NbOverlayRef) {
+    overlayRef.hostElement.classList.add('toastr-overlay-container');
+  }
+
   protected existsInDom(toastContainer: NbToastContainer): boolean {
     return this.document.body.contains(toastContainer.nativeElement);
   }