feat(theme): add new Toastr component (#692)

Closes #667

docs/structure.ts

@@ -312,6 +312,16 @@ export const structure = [
           'NbDialogConfig',
         ],
       },
+      {
+        type: 'tabs',
+        name: 'Toastr',
+        icon: 'toastr.svg',
+        source: [
+          'NbToastrService',
+          'NbToastComponent',
+          'NbToastrConfig',
+        ],
+      },
       {
         type: 'group',
         name: 'Extra',

src/framework/theme/components/cdk/overlay/index.ts

@@ -4,3 +4,4 @@ export * from './overlay-position';
 export * from './overlay-container';
 export * from './overlay-trigger';
 export * from './mapping';
+export * from './position-helper';

src/framework/theme/components/cdk/overlay/mapping.ts

@@ -14,14 +14,15 @@ import {
   ConnectedPosition,
   ConnectionPositionPair,
   FlexibleConnectedPositionStrategy,
-  GlobalPositionStrategy,
   Overlay,
+  OverlayConfig,
   OverlayContainer,
   OverlayModule,
   OverlayPositionBuilder,
   OverlayRef,
   PositionStrategy,
   ScrollStrategy,
+  ScrollStrategyOptions,
 } from '@angular/cdk/overlay';
 import { Platform } from '@angular/cdk/platform';
 
@@ -35,7 +36,7 @@ export class NbPortalOutletDirective extends CdkPortalOutlet {
 }
 
 @Injectable()
-export class NbOverlayService extends Overlay {
+export class NbOverlay extends Overlay {
 }
 
 @Injectable()
@@ -67,17 +68,18 @@ export class NbPortalInjector extends PortalInjector {
 export type NbPortal<T = any> = Portal<T>;
 export type NbOverlayRef = OverlayRef;
 export type NbComponentType<T = any> = ComponentType<T>;
-export type NbGlobalPositionStrategy = GlobalPositionStrategy;
 export type NbPositionStrategy = PositionStrategy;
 export type NbConnectedPosition = ConnectedPosition;
 export type NbConnectedOverlayPositionChange = ConnectedOverlayPositionChange;
 export type NbConnectionPositionPair = ConnectionPositionPair;
+export type NbOverlayConfig = OverlayConfig;
+export type NbScrollStrategyOptions = ScrollStrategyOptions;
 export type NbScrollStrategy = ScrollStrategy;
 
 const CDK_MODULES = [OverlayModule, PortalModule];
 
 const CDK_PROVIDERS = [
-  NbOverlayService,
+  NbOverlay,
   NbPlatform,
   NbOverlayPositionBuilder,
 ];

src/framework/theme/components/cdk/overlay/overlay-position.ts

@@ -9,13 +9,14 @@ import {
   NbConnectedPosition,
   NbConnectionPositionPair,
   NbFlexibleConnectedPositionStrategy,
-  NbGlobalPositionStrategy,
   NbOverlayPositionBuilder,
   NbOverlayRef,
   NbPlatform,
   NbPositionStrategy,
 } from './mapping';
 import { NbViewportRulerAdapter } from '../adapter/viewport-ruler-adapter';
+import { NbGlobalLogicalPosition } from './position-helper';
+import { GlobalPositionStrategy } from '@angular/cdk/overlay';
 
 
 export enum NbAdjustment {
@@ -143,6 +144,25 @@ export class NbAdjustableConnectedPositionStrategy
   }
 }
 
+export class NbGlobalPositionStrategy extends GlobalPositionStrategy {
+
+  position(position: NbGlobalLogicalPosition): this {
+    switch (position) {
+      case NbGlobalLogicalPosition.TOP_START:
+        return this.top().left();
+
+      case NbGlobalLogicalPosition.TOP_END:
+        return this.top().right();
+
+      case NbGlobalLogicalPosition.BOTTOM_START:
+        return this.bottom().left();
+
+      case NbGlobalLogicalPosition.BOTTOM_END:
+        return this.bottom().right();
+    }
+  }
+}
+
 @Injectable()
 export class NbPositionBuilderService {
   constructor(@Inject(NB_DOCUMENT) protected document,
@@ -152,7 +172,7 @@ export class NbPositionBuilderService {
   }
 
   global(): NbGlobalPositionStrategy {
-    return this.positionBuilder.global();
+    return new NbGlobalPositionStrategy();
   }
 
   connectedTo(elementRef: ElementRef): NbAdjustableConnectedPositionStrategy {

src/framework/theme/components/cdk/overlay/overlay.module.ts

@@ -2,9 +2,11 @@ import { ModuleWithProviders, NgModule } from '@angular/core';
 
 import { NbSharedModule } from '../../shared/shared.module';
 import { NbCdkMappingModule } from './mapping';
-import { NbCdkAdapterModule } from '../adapter/adapter.module';
 import { NbPositionBuilderService } from './overlay-position';
 import { NbOverlayContainerComponent } from './overlay-container';
+import { NbOverlayService } from './overlay';
+import { NbCdkAdapterModule } from '../adapter/adapter.module';
+import { NbPositionHelper } from './position-helper';
 
 
 @NgModule({
@@ -25,6 +27,8 @@ export class NbOverlayModule {
       ngModule: NbOverlayModule,
       providers: [
         NbPositionBuilderService,
+        NbOverlayService,
+        NbPositionHelper,
       ],
     };
   }

src/framework/theme/components/cdk/overlay/overlay.ts

@@ -1,6 +1,14 @@
-import { ComponentRef, TemplateRef, Type } from '@angular/core';
+import { ComponentRef, Injectable, TemplateRef, Type } from '@angular/core';
 
-import { NbComponentPortal, NbComponentType, NbOverlayRef } from './mapping';
+import {
+  NbComponentPortal,
+  NbComponentType,
+  NbOverlay,
+  NbOverlayConfig,
+  NbOverlayRef,
+  NbScrollStrategyOptions,
+} from './mapping';
+import { NbLayoutDirectionService } from '../../../services/direction.service';
 
 
 export type NbOverlayContent = Type<any> | TemplateRef<any> | string;
@@ -16,3 +24,20 @@ export function createContainer<T>(ref: NbOverlayRef, container: NbComponentType
   patch(containerRef, context);
   return containerRef;
 }
+
+@Injectable()
+export class NbOverlayService {
+  constructor(protected overlay: NbOverlay, protected layoutDirection: NbLayoutDirectionService) {
+  }
+
+  get scrollStrategies(): NbScrollStrategyOptions {
+    return this.overlay.scrollStrategies;
+  }
+
+  create(config?: NbOverlayConfig): NbOverlayRef {
+    const overlayRef = this.overlay.create(config);
+    this.layoutDirection.onDirectionChange()
+      .subscribe(dir => overlayRef.setDirection(dir));
+    return overlayRef;
+  }
+}

src/framework/theme/components/cdk/overlay/position-helper.ts

@@ -0,0 +1,116 @@
+import { Injectable } from '@angular/core';
+
+import { NbLayoutDirectionService } from '../../../services/direction.service';
+
+
+export enum NbGlobalLogicalPosition {
+  TOP_START = 'top-start',
+  TOP_END = 'top-end',
+  BOTTOM_START = 'bottom-start',
+  BOTTOM_END = 'bottom-end',
+}
+
+export enum NbGlobalPhysicalPosition {
+  TOP_RIGHT = 'top-right',
+  TOP_LEFT = 'top-left',
+  BOTTOM_RIGHT = 'bottom-right',
+  BOTTOM_LEFT = 'bottom-left',
+}
+
+export type NbGlobalPosition = NbGlobalPhysicalPosition | NbGlobalLogicalPosition;
+
+@Injectable()
+export class NbPositionHelper {
+  constructor(protected layoutDirection: NbLayoutDirectionService) {
+  }
+
+  toLogicalPosition(position: NbGlobalPosition): NbGlobalLogicalPosition {
+    if (Object.values(NbGlobalLogicalPosition).includes(position)) {
+      return position as NbGlobalLogicalPosition;
+    }
+
+    if (this.layoutDirection.isLtr()) {
+      return this.toLogicalPositionWhenLtr(position as NbGlobalPhysicalPosition);
+    } else {
+      return this.toLogicalPositionWhenRtl(position as NbGlobalPhysicalPosition);
+    }
+  }
+
+  toPhysicalPosition(position: NbGlobalPosition): NbGlobalPhysicalPosition {
+    if (Object.values(NbGlobalPhysicalPosition).includes(position)) {
+      return position as NbGlobalPhysicalPosition;
+    }
+
+    if (this.layoutDirection.isLtr()) {
+      return this.toPhysicalPositionWhenLtr(position as NbGlobalLogicalPosition);
+    } else {
+      return this.toPhysicalPositionWhenRtl(position as NbGlobalLogicalPosition);
+    }
+  }
+
+  isTopPosition(position: NbGlobalPosition) {
+    const logicalPosition = this.toLogicalPosition(position);
+
+    return logicalPosition === NbGlobalLogicalPosition.TOP_END
+      || logicalPosition === NbGlobalLogicalPosition.TOP_START;
+  }
+
+  isRightPosition(position: NbGlobalPosition) {
+    const physicalPosition = this.toPhysicalPosition(position);
+
+    return physicalPosition === NbGlobalPhysicalPosition.TOP_RIGHT
+      || physicalPosition === NbGlobalPhysicalPosition.BOTTOM_RIGHT;
+  }
+
+  protected toLogicalPositionWhenLtr(position: NbGlobalPhysicalPosition): NbGlobalLogicalPosition {
+    switch (position) {
+      case NbGlobalPhysicalPosition.TOP_RIGHT:
+        return NbGlobalLogicalPosition.TOP_END;
+      case NbGlobalPhysicalPosition.TOP_LEFT:
+        return NbGlobalLogicalPosition.TOP_START;
+      case NbGlobalPhysicalPosition.BOTTOM_RIGHT:
+        return NbGlobalLogicalPosition.BOTTOM_END;
+      case NbGlobalPhysicalPosition.BOTTOM_LEFT:
+        return NbGlobalLogicalPosition.BOTTOM_START;
+    }
+  }
+
+  protected toLogicalPositionWhenRtl(position: NbGlobalPhysicalPosition): NbGlobalLogicalPosition {
+    switch (position) {
+      case NbGlobalPhysicalPosition.TOP_RIGHT:
+        return NbGlobalLogicalPosition.TOP_START;
+      case NbGlobalPhysicalPosition.TOP_LEFT:
+        return NbGlobalLogicalPosition.TOP_END;
+      case NbGlobalPhysicalPosition.BOTTOM_RIGHT:
+        return NbGlobalLogicalPosition.BOTTOM_START;
+      case NbGlobalPhysicalPosition.BOTTOM_LEFT:
+        return NbGlobalLogicalPosition.BOTTOM_END;
+    }
+  }
+
+  protected toPhysicalPositionWhenLtr(position: NbGlobalLogicalPosition): NbGlobalPhysicalPosition {
+    switch (position) {
+      case NbGlobalLogicalPosition.TOP_START:
+        return NbGlobalPhysicalPosition.TOP_LEFT;
+      case NbGlobalLogicalPosition.TOP_END:
+        return NbGlobalPhysicalPosition.TOP_RIGHT;
+      case NbGlobalLogicalPosition.BOTTOM_START:
+        return NbGlobalPhysicalPosition.BOTTOM_LEFT;
+      case NbGlobalLogicalPosition.BOTTOM_END:
+        return NbGlobalPhysicalPosition.BOTTOM_RIGHT;
+    }
+  }
+
+  protected toPhysicalPositionWhenRtl(position: NbGlobalLogicalPosition): NbGlobalPhysicalPosition {
+    switch (position) {
+      case NbGlobalLogicalPosition.TOP_START:
+        return NbGlobalPhysicalPosition.TOP_RIGHT;
+      case NbGlobalLogicalPosition.TOP_END:
+        return NbGlobalPhysicalPosition.TOP_LEFT;
+      case NbGlobalLogicalPosition.BOTTOM_START:
+        return NbGlobalPhysicalPosition.BOTTOM_RIGHT;
+      case NbGlobalLogicalPosition.BOTTOM_END:
+        return NbGlobalPhysicalPosition.BOTTOM_LEFT;
+    }
+  }
+}