feat: add custom css class on overlays (#2067)

src/framework/theme/components/context-menu/context-menu.directive.ts

@@ -157,6 +157,9 @@ export class NbContextMenuDirective implements NbDynamicOverlayController, OnCha
   @Input('nbContextMenuTrigger')
   trigger: NbTrigger = NbTrigger.CLICK;
 
+  @Input('nbContextMenuClass')
+  contextMenuClass: string = '';
+
   protected ref: NbOverlayRef;
   protected container: ComponentRef<any>;
   protected positionStrategy: NbAdjustableConnectedPositionStrategy;
@@ -216,7 +219,8 @@ export class NbContextMenuDirective implements NbDynamicOverlayController, OnCha
         position: this.position,
         items: this._items,
         tag: this.tag,
-      });
+      })
+      .overlayConfig({panelClass: this.contextMenuClass});
   }
 
   /*

src/framework/theme/components/context-menu/context-menu.spec.ts

@@ -14,13 +14,14 @@ import { NbMenuModule } from '../menu/menu.module';
 import { NbContextMenuDirective } from './context-menu.directive';
 import { NbContextMenuComponent } from './context-menu.component';
 import { NbContextMenuModule } from './context-menu.module';
+import { NbOverlayConfig } from '@nebular/theme/components/cdk/overlay/mapping';
 
 @Component({
   selector: 'nb-context-menu-default-test',
   template: `
     <nb-layout>
       <nb-layout-column>
-        <button #button [nbContextMenu]="items">show context menu</button>
+        <button #button [nbContextMenu]="items" [nbContextMenuClass]="contextMenuClass">show context menu</button>
       </nb-layout-column>
     </nb-layout>
   `,
@@ -30,6 +31,7 @@ export class NbContextMenuDefaultTestComponent {
   @ViewChild(NbContextMenuDirective, { static: false }) contextMenu: NbContextMenuDirective;
 
   items = [{ title: 'User' }, { title: 'Log Out' }];
+  contextMenuClass = '';
 }
 
 @Component({
@@ -92,6 +94,7 @@ export class NbDynamicOverlayHandlerMock {
   _position: NbPosition = NbPosition.TOP;
   _adjustment: NbAdjustment = NbAdjustment.NOOP;
   _offset: number;
+  _overlayConfig: NbOverlayConfig = {};
 
   constructor() {
   }
@@ -136,6 +139,11 @@ export class NbDynamicOverlayHandlerMock {
     return this;
   }
 
+  overlayConfig(overlayConfig: NbOverlayConfig) {
+    this._overlayConfig = overlayConfig;
+    return this;
+  }
+
   build() {
     return dynamicOverlay;
   }
@@ -329,6 +337,17 @@ describe('Directive: NbContextMenuDirective', () => {
         expect(hideSpy).toHaveBeenCalledTimes(1);
         expect(toggleSpy).toHaveBeenCalledTimes(1);
       });
+
+      it('should set overlay config', () => {
+        const contextMenuClass = 'custom-context-menu-class';
+        const overlayConfigSpy = spyOn(overlayHandler, 'overlayConfig').and.callThrough();
+
+        fixture = TestBed.createComponent(NbContextMenuDefaultTestComponent);
+        fixture.componentInstance.contextMenuClass = contextMenuClass;
+        fixture.detectChanges();
+
+        expect(overlayConfigSpy).toHaveBeenCalledWith(jasmine.objectContaining({panelClass: contextMenuClass}));
+      });
     });
 
     describe('binding contextMenu', () => {

src/framework/theme/components/dialog/dialog-config.ts

@@ -23,6 +23,11 @@ export class NbDialogConfig<D = any> {
    * */
   backdropClass: string = 'overlay-backdrop';
 
+  /**
+   * Class that'll be assigned to the dialog overlay.
+   * */
+  dialogClass: string = '';
+
   /**
    * If true then mouse clicks by backdrop will close a dialog.
    * */

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

@@ -78,6 +78,11 @@ describe('dialog-service', () => {
     expect(overlayContainer.querySelector('.nb-overlay-test-backdrop-class')).toBeTruthy();
   });
 
+  it('should assign dialogClass if provided', () => {
+    dialog.open(NbTestDialogComponent, { dialogClass: 'nb-overlay-test-dialog-class' });
+    expect(overlayContainer.querySelector('.nb-overlay-test-dialog-class')).toBeTruthy();
+  });
+
 
   it('should render with backdrop if hasBackdrop is true', () => {
     dialog.open(NbTestDialogComponent, { hasBackdrop: true });

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

@@ -171,6 +171,7 @@ export class NbDialogService {
       scrollStrategy,
       hasBackdrop: config.hasBackdrop,
       backdropClass: config.backdropClass,
+      panelClass: config.dialogClass,
     });
   }
 

src/framework/theme/components/toastr/toast.component.ts

@@ -4,7 +4,17 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-import { Component, EventEmitter, HostBinding, HostListener, Input, Output } from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostBinding,
+  HostListener,
+  Input,
+  OnInit,
+  Output,
+  Renderer2,
+} from '@angular/core';
 
 import { NbToast } from './model';
 import { NbIconConfig } from '../icon/icon.component';
@@ -82,7 +92,7 @@ import { NbIconConfig } from '../icon/icon.component';
   styleUrls: ['./toast.component.scss'],
   templateUrl: './toast.component.html',
 })
-export class NbToastComponent {
+export class NbToastComponent implements OnInit {
   @Input()
   toast: NbToast;
 
@@ -176,4 +186,12 @@ export class NbToastComponent {
   onClick() {
     this.destroy.emit();
   }
+
+  constructor(protected renderer: Renderer2, protected elementRef: ElementRef) {}
+
+  ngOnInit() {
+    if (this.toast.config.toastClass) {
+      this.renderer.addClass(this.elementRef.nativeElement, this.toast.config.toastClass);
+    }
+  }
 }

src/framework/theme/components/toastr/toastr-config.ts

@@ -53,6 +53,10 @@ export class NbToastrConfig {
   * The number of visible toasts. If the limit exceeded the oldest toast will be removed.
   * */
   limit?: number = null;
+  /**
+   * Class to be applied to the toast.
+   */
+  toastClass: string = '';
   /**
    * Determines render icon or not.
    * */

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

@@ -1,9 +1,56 @@
 import { NbToastContainer, NbToastrContainerRegistry, NbToastrService } from './toastr.service';
 import { NbGlobalLogicalPosition, NbGlobalPhysicalPosition } from '../cdk/overlay/position-helper';
-import { TestBed } from '@angular/core/testing';
-import { ComponentFactoryResolver } from '@angular/core';
+import {ComponentFixture, TestBed, async} from '@angular/core/testing';
+import {Component, ComponentFactoryResolver} from '@angular/core';
 import { NbToast, NbToastrModule } from '@nebular/theme';
-
+import { NbThemeModule, NbLayoutModule } from '@nebular/theme';
+import {RouterTestingModule} from '@angular/router/testing';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+
+@Component({
+  selector: 'nb-toastr-test',
+  template: `
+      <nb-layout>
+          <nb-layout-column>
+              <div class="test-div"></div>
+          </nb-layout-column>
+      </nb-layout>
+  `,
+})
+export class  NbToastrTestComponent {
+  constructor(private toastrService: NbToastrService) {}
+
+  showToast(className: string) {
+    this.toastrService.show('testing toastr', '', { toastClass: className });
+  }
+}
+
+describe('toastr-component', () => {
+  let fixture: ComponentFixture<NbToastrTestComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule.withRoutes([]),
+        NoopAnimationsModule,
+        NbThemeModule.forRoot(),
+        NbLayoutModule,
+        NbToastrModule.forRoot(),
+      ],
+      declarations: [
+        NbToastrTestComponent,
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NbToastrTestComponent);
+  }));
+
+  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', () => {
   let toastr: NbToastrService;
@@ -47,6 +94,7 @@ describe('toastr-service', () => {
       position: NbGlobalLogicalPosition.BOTTOM_START,
       duration: 1234,
       preventDuplicates: true,
+      toastClass: 'my-toast-class',
     });
 
     expect(attachSpy).toHaveBeenCalled();
@@ -57,6 +105,7 @@ describe('toastr-service', () => {
     expect(config.destroyByClick).toBe(true, 'incorrect destroyByClick');
     expect(config.preventDuplicates).toBe(true, 'incorrect preventDuplicates');
     expect(config.hasIcon).toBe(true, 'incorrect hasIcon');
+    expect(config.toastClass).toBe('my-toast-class', 'incorrect toastClass');
   });
 
   it('should call show with success status when success called', () => {