fix(toastr service): add class to toastr overlay with a bigger z-index

src/framework/theme/components/cdk/overlay/_overlay.theme.scss

@@ -8,6 +8,10 @@
   .cdk-overlay-container {
     z-index: 1040;
   }
+
+  .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

@@ -4,17 +4,18 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-import { ComponentFactoryResolver, ComponentRef, Inject, Injectable } from '@angular/core';
-
-import { NbComponentPortal, NbOverlayRef } from '../cdk/overlay/mapping';
-import { NbOverlayService, patch } from '../cdk/overlay/overlay-service';
-import { NbPositionBuilderService } from '../cdk/overlay/overlay-position';
-import { NbGlobalLogicalPosition, NbGlobalPosition, NbPositionHelper } from '../cdk/overlay/position-helper';
-import { NbToastrContainerComponent } from './toastr-container.component';
-import { NB_TOASTR_CONFIG, NbToastrConfig } from './toastr-config';
-import { NbToast } from './model';
-import { NbToastComponent } from './toast.component';
-import { NB_DOCUMENT } from '../../theme.options';
+import {ComponentFactoryResolver, ComponentRef, Inject, Injectable} from '@angular/core';
+
+import {NbComponentPortal, NbOverlayRef} from '../cdk/overlay/mapping';
+import {NbOverlayService, patch} from '../cdk/overlay/overlay-service';
+import {NbPositionBuilderService} from '../cdk/overlay/overlay-position';
+import {NbGlobalLogicalPosition, NbGlobalPosition, NbPositionHelper} from '../cdk/overlay/position-helper';
+import {NbToastrContainerComponent} from './toastr-container.component';
+import {NB_TOASTR_CONFIG, NbToastrConfig} from './toastr-config';
+import {NbToast} from './model';
+import {NbToastComponent} from './toast.component';
+import {NB_DOCUMENT} from '../../theme.options';
+import {OverlayRef} from '@angular/cdk/overlay';
 
 export class NbToastRef {
   constructor(private toastContainer: NbToastContainer,
@@ -171,13 +172,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: OverlayRef) {
+    overlayRef.hostElement.classList.add('toastr-overlay-container');
+  }
+
   protected existsInDom(toastContainer: NbToastContainer): boolean {
     return this.document.body.contains(toastContainer.nativeElement);
   }
@@ -266,58 +272,58 @@ export class NbToastrService {
    * Shows toast with message, title and user config.
    * */
   show(message, title?, userConfig?: Partial<NbToastrConfig>): NbToastRef {
-    const config = new NbToastrConfig({ ...this.globalConfig, ...userConfig });
+    const config = new NbToastrConfig({...this.globalConfig, ...userConfig});
     const container = this.containerRegistry.get(config.position);
-    const toast = { message, title, config };
+    const toast = {message, title, config};
     return container.attach(toast);
   }
 
   /**
    * Shows success toast with message, title and user config.
    * */
   success(message, title?, config?: Partial<NbToastrConfig>): NbToastRef {
-    return this.show(message, title, { ...config, status: 'success' });
+    return this.show(message, title, {...config, status: 'success'});
   }
 
   /**
    * Shows info toast with message, title and user config.
    * */
   info(message, title?, config?: Partial<NbToastrConfig>): NbToastRef {
-    return this.show(message, title, { ...config, status: 'info' });
+    return this.show(message, title, {...config, status: 'info'});
   }
 
   /**
    * Shows warning toast with message, title and user config.
    * */
   warning(message, title?, config?: Partial<NbToastrConfig>): NbToastRef {
-    return this.show(message, title, { ...config, status: 'warning' });
+    return this.show(message, title, {...config, status: 'warning'});
   }
 
   /**
    * Shows primary toast with message, title and user config.
    * */
   primary(message, title?, config?: Partial<NbToastrConfig>): NbToastRef {
-    return this.show(message, title, { ...config, status: 'primary' });
+    return this.show(message, title, {...config, status: 'primary'});
   }
 
   /**
    * Shows danger toast with message, title and user config.
    * */
   danger(message, title?, config?: Partial<NbToastrConfig>): NbToastRef {
-    return this.show(message, title, { ...config, status: 'danger' });
+    return this.show(message, title, {...config, status: 'danger'});
   }
 
   /**
    * Shows basic toast with message, title and user config.
    * */
   default(message, title?, config?: Partial<NbToastrConfig>): NbToastRef {
-    return this.show(message, title, { ...config, status: 'basic' });
+    return this.show(message, title, {...config, status: 'basic'});
   }
 
   /**
    * Shows control toast with message, title and user config.
    * */
   control(message, title?, config?: Partial<NbToastrConfig>): NbToastRef {
-    return this.default(message, title, { ...config, status: 'control' });
+    return this.default(message, title, {...config, status: 'control'});
   }
 }