notification options in configuration

config/environment.default.js

@@ -21,6 +21,12 @@ module.exports = {
     msToLive: 15 * 60 * 1000, // 15 minute
     control: 'max-age=60' // revalidate browser
   },
+  // Notifications
+  notifications: {
+    rtl: false,
+    position: ['top', 'right'],
+    maxStack: 8
+  },
   // Angular Universal settings
   universal: {
     preboot: true,

src/app/app.component.html

@@ -3,9 +3,7 @@
     <ds-header></ds-header>
 
     <ds-notifications-board
-      [options]="boardOptions"
+      [options]="config.notifications">
-      (onCreate)="notificationCreated($event)"
-      (onDestroy)="notificationDestroyed($event)">
     </ds-notifications-board>
 
     <main class="main-content">

src/app/app.component.ts

@@ -10,7 +10,6 @@ import { MetadataService } from './core/metadata/metadata.service';
 import { HostWindowResizeAction } from './shared/host-window.actions';
 import { HostWindowState } from './shared/host-window.reducer';
 import { NativeWindowRef, NativeWindowService } from './shared/window.service';
-import { INotificationBoardOptions } from './shared/notifications/models/notification-options.model';
 
 @Component({
   selector: 'ds-app',
@@ -21,22 +20,6 @@ import { INotificationBoardOptions } from './shared/notifications/models/notific
 })
 export class AppComponent implements OnInit {
 
-  public boardOptions: INotificationBoardOptions = {
-    position: ['top', 'right'],
-    maxStack: 5,
-    rtl: false
-  };
-
-  notificationCreated(event) {
-    console.log('Notification created');
-    console.log(event);
-  }
-
-  notificationDestroyed() {
-    console.log('Notification destroyed');
-    console.log(event);
-  }
-
   constructor(@Inject(GLOBAL_CONFIG) public config: GlobalConfig,
               @Inject(NativeWindowService) private _window: NativeWindowRef,
               private translate: TranslateService,

src/app/shared/notifications/models/notification-options.model.ts

@@ -3,35 +3,20 @@ import { NotificationAnimationsType } from './notification-animations-type';
 export interface INotificationOptions {
   timeOut: number;
   clickToClose: boolean;
-  rtl: boolean;
   animate: NotificationAnimationsType;
-  position: ['top' | 'bottom' | 'middle', 'right' | 'left' | 'center'];
 }
 
 export class NotificationOptions implements INotificationOptions {
   public timeOut: number;
   public clickToClose: boolean;
-  public rtl: boolean;
   public animate: any;
-  public position: any;
 
   constructor(timeOut = 0,
               clickToClose = true,
-              animate = NotificationAnimationsType.Scale,
+              animate = NotificationAnimationsType.Scale) {
-              position = ['top' , 'right'],
-              rtl = false) {
 
     this.timeOut = timeOut;
     this.clickToClose = clickToClose;
     this.animate = animate;
-    this.position = position;
-    this.rtl = rtl;
   }
 }
-
-export interface INotificationBoardOptions {
-  rtl: boolean;
-  position: ['top' | 'bottom' | 'middle', 'right' | 'left' | 'center'];
-  maxStack: number;
-  maxLength?: number;
-}

src/app/shared/notifications/notification/notification.component.ts

@@ -61,11 +61,8 @@ export class NotificationComponent implements OnInit, OnDestroy {
   private steps: number;
   private speed: number;
   private count = 0;
-
   private start: any;
   private diff: any;
-
-  // 'fade' | 'fromTop' | 'fromRight' | 'fromBottom' | 'fromLeft' | 'rotate' | 'scale' ;
   public animate: string;
 
   constructor(private notificationService: NotificationsService,

src/app/shared/notifications/notifications-board/notifications-board.component.ts

@@ -2,11 +2,9 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  EventEmitter,
   Input,
   OnDestroy,
   OnInit,
-  Output,
   ViewEncapsulation
 } from '@angular/core';
 import { NotificationsService } from '../notifications.service';
@@ -16,8 +14,8 @@ import { notificationsStateSelector } from '../selectors';
 import { difference } from 'lodash';
 import { INotification } from '../models/notification.model';
 import { NotificationsState } from '../notifications.reducers';
-import { INotificationBoardOptions } from '../models/notification-options.model';
 import { Subscription } from 'rxjs/Subscription';
+import { INotificationBoardOptions } from '../../../../config/notifications-config.interfaces';
 
 @Component({
   selector: 'ds-notifications-board',
@@ -33,9 +31,6 @@ export class NotificationsBoardComponent implements OnInit, OnDestroy {
     this.attachChanges(opt);
   }
 
-  @Output() onCreate = new EventEmitter();
-  @Output() onDestroy = new EventEmitter();
-
   public notifications: INotification[] = [];
   public position: ['top' | 'bottom' | 'middle', 'right' | 'left' | 'center'] = ['bottom', 'right'];
 
@@ -60,8 +55,6 @@ export class NotificationsBoardComponent implements OnInit, OnDestroy {
         } else if (state.length > this.notifications.length) {
           // Add
           const newElem = difference(state, this.notifications);
-          console.log('new Elements #', newElem.length);
-
           newElem.forEach((notification) => {
             this.add(notification);
           });

src/config/notifications-config.interfaces.ts

@@ -0,0 +1,7 @@
+import { Config } from './config.interface';
+
+export interface INotificationBoardOptions extends Config {
+  rtl: boolean;
+  position: ['top' | 'bottom' | 'middle', 'right' | 'left' | 'center'];
+  maxStack: number;
+}