flex

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

@@ -6,8 +6,8 @@ import { Observable } from 'rxjs/Observable';
 export interface INotification {
   id: string;
   type: NotificationType;
-  title?: Observable<string>;
+  title?: Observable<string> | string;
-  content?: Observable<string>;
+  content?: Observable<string> | string;
   options?: INotificationOptions;
   html?: any;
 }
@@ -15,15 +15,15 @@ export interface INotification {
 export class Notification implements INotification {
   public id: string;
   public type: NotificationType;
-  public title: Observable<string>;
+  public title: Observable<string>  | string;
-  public content: Observable<string>;
+  public content: Observable<string>  | string;
   public options: INotificationOptions;
   public html: any;
 
   constructor(id: string,
               type: NotificationType,
-              title?: Observable<string>,
+              title?: Observable<string>  | string,
-              content?: Observable<string>,
+              content?: Observable<string>  | string,
               options?: NotificationOptions,
               html?: any) {
 

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

@@ -1,13 +1,10 @@
 <div class="alert {{item.type}} alert-dismissible" role="alert"
      [@enterLeave]="animate">
 
-  <div class="icon"><i
+  <div class="sn-progress-loader" *ngIf="showProgressBar">
-    [ngClass]="{'fa fa-2x': true,
+    <span [ngStyle]="{'width': progressWidth + '%'}"></span>
-      'fa-check': item.type == 'alert-success',
+  </div>
-      'fa-times-circle': item.type == 'alert-danger',
+
-      'fa-exclamation-triangle': item.type == 'alert-warning',
-      'fa-info': item.type == 'alert-info'
-      }"></i></div>
 
     <button *ngIf="item.options.clickToClose"
             (click)="remove()"
@@ -15,41 +12,107 @@
       <span aria-hidden="true">&times;</span>
     </button>
 
-  <div *ngIf="!item.html">
 
+  <div class="d-flex flex-row">
+    <div class="d-flex flex-column justify-content-center">
+      <div class="p-2">
+        <div class="icon"><i
+          [ngClass]="{'fa fa-2x': true,
+        'fa-check': item.type == 'alert-success',
+        'fa-times-circle': item.type == 'alert-danger',
+        'fa-exclamation-triangle': item.type == 'alert-warning',
+        'fa-info': item.type == 'alert-info'
+        }"></i></div>
+      </div>
+    </div>
+    <div class="d-flex flex-column justify-content-center align-content-stretch">
+      <div class="p-2"  *ngIf="title">
+        <strong>
           <div class="sn-title" *ngIf="titleIsTemplate; else regularTitle">
             <ng-container *ngTemplateOutlet="title"></ng-container>
           </div>
-
           <ng-template #regularTitle>
             <div class="sn-title" [innerHTML]="(title | async)"></div>
           </ng-template>
+        </strong>
+      </div>
 
+      <div class="p-2"  *ngIf="content">
         <div class="sn-content" *ngIf="contentIsTemplate; else regularContent">
           <ng-container *ngTemplateOutlet="content"></ng-container>
         </div>
-
         <ng-template #regularContent>
           <div class="sn-content" [innerHTML]="(content | async)"></div>
         </ng-template>
-
       </div>
 
-  <div *ngIf="item.html">
+      <div class="p-2" *ngIf="item.html">
         <div class="sn-html" *ngIf="htmlIsTemplate; else regularHtml">
           <ng-container *ngTemplateOutlet="html"></ng-container>
         </div>
-
         <ng-template #regularHtml>
           <div class="sn-content" [innerHTML]="html"></div>
         </ng-template>
       </div>
-
+    </div>
-  <div class="sn-progress-loader" *ngIf="showProgressBar">
-    <span [ngStyle]="{'width': progressWidth + '%'}"></span>
   </div>
 
 
 
 
+
+
+
+
+  <!--<div class="icon"><i-->
+    <!--[ngClass]="{'fa fa-2x': true,-->
+      <!--'fa-check': item.type == 'alert-success',-->
+      <!--'fa-times-circle': item.type == 'alert-danger',-->
+      <!--'fa-exclamation-triangle': item.type == 'alert-warning',-->
+      <!--'fa-info': item.type == 'alert-info'-->
+      <!--}"></i></div>-->
+
+  <!--<button *ngIf="item.options.clickToClose"-->
+          <!--(click)="remove()"-->
+          <!--type="button" class="notificationClose close" data-dismiss="alert" aria-label="Close">-->
+    <!--<span aria-hidden="true">&times;</span>-->
+  <!--</button>-->
+
+  <!--<div *ngIf="!item.html">-->
+
+    <!--<div class="sn-title" *ngIf="titleIsTemplate; else regularTitle">-->
+      <!--<ng-container *ngTemplateOutlet="title"></ng-container>-->
+    <!--</div>-->
+
+    <!--<ng-template #regularTitle>-->
+      <!--<div class="sn-title" [innerHTML]="(title | async)"></div>-->
+    <!--</ng-template>-->
+
+    <!--<div class="sn-content" *ngIf="contentIsTemplate; else regularContent">-->
+      <!--<ng-container *ngTemplateOutlet="content"></ng-container>-->
+    <!--</div>-->
+
+    <!--<ng-template #regularContent>-->
+      <!--<div class="sn-content" [innerHTML]="(content | async)"></div>-->
+    <!--</ng-template>-->
+
+  <!--</div>-->
+
+  <!--<div *ngIf="item.html">-->
+    <!--<div class="sn-html" *ngIf="htmlIsTemplate; else regularHtml">-->
+      <!--<ng-container *ngTemplateOutlet="html"></ng-container>-->
+    <!--</div>-->
+
+    <!--<ng-template #regularHtml>-->
+      <!--<div class="sn-content" [innerHTML]="html"></div>-->
+    <!--</ng-template>-->
+  <!--</div>-->
+
+  <!--<div class="sn-progress-loader" *ngIf="showProgressBar">-->
+    <!--<span [ngStyle]="{'width': progressWidth + '%'}"></span>-->
+  <!--</div>-->
+
+
+
+
 </div>

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

@@ -1,10 +1,19 @@
+.alert-dismissible .close {
+  top: -13px;
+  right: -15px;
+}
+
 .notificationClose:focus {
   outline: none !important;
 }
 
 .icon {
-  float: left;
+  //float: left;
-  padding: 5px;
+  //padding: 5px;
+}
+
+.alert-dismissible {
+  padding: 10px;
 }
 
 .sn-title, .sn-content, .sn-html {

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

@@ -128,7 +128,11 @@ export class NotificationComponent implements OnInit, OnDestroy {
     if (item instanceof TemplateRef) {
       this[key] = item;
     } else if (key === 'title' || key === 'content') {
-      this[key] = isNotEmpty(item) ? item : Observable.of('');
+      this[key] = isNotEmpty(item) ?
+        typeof item === 'string' ?
+          Observable.of(item)
+          : typeof item === 'object' && isNotEmpty(item.payload) ? Observable.of(item.payload) : null
+        : null;
     } else {
       this[key] = this.domSanitizer.bypassSecurityTrustHtml(item);
     }