ng2-yk-notifier - npm Package Compare versions

Comparing version 1.0.0-beta.8 to 1.0.0-beta.9

index.d.ts

@@ -1,3 +0,3 @@
-export { INotifierOptions } from './notifier.model';
+export { NotifierOptions } from './notifier-options.service';
 export { NotifierService } from './notifier.service';
 export { NotifierModule } from './notifier.module';

index.js

 "use strict";
+var notifier_options_service_1 = require('./notifier-options.service');
+exports.NotifierOptions = notifier_options_service_1.NotifierOptions;
 var notifier_service_1 = require('./notifier.service');
@@ -3,0 +5,0 @@ exports.NotifierService = notifier_service_1.NotifierService;

notifier-message.component.d.ts

@@ -1,6 +0,8 @@
-import { OnInit, OnDestroy, AnimationTransitionEvent, EventEmitter } from '@angular/core';
+import { OnInit, OnDestroy, AnimationTransitionEvent } from '@angular/core';
 import { INotifierMessage } from "./notifier.model";
 import { DomSanitizer } from "@angular/platform-browser";
+import { NotifierService } from "./notifier.service";
 export declare class NotifierMessageComponent implements OnInit, OnDestroy {
     private domSanitizer;
+    private notifierService;
     message: INotifierMessage;
@@ -12,3 +14,2 @@ animate: string;
     timeDelay: number;
-    onRemoveMessage: EventEmitter<INotifierMessage>;
     private safeSvg;
@@ -18,3 +19,3 @@ private timerId;
     private timeLeft;
-    constructor(domSanitizer: DomSanitizer);
+    constructor(domSanitizer: DomSanitizer, notifierService: NotifierService);
     ngOnInit(): void;
@@ -21,0 +22,0 @@ ngOnDestroy(): void;

notifier-message.component.js

@@ -13,6 +13,7 @@ "use strict";
 var platform_browser_1 = require("@angular/platform-browser");
+var notifier_service_1 = require("./notifier.service");
 var NotifierMessageComponent = (function () {
-    function NotifierMessageComponent(domSanitizer) {
+    function NotifierMessageComponent(domSanitizer, notifierService) {
         this.domSanitizer = domSanitizer;
-        this.onRemoveMessage = new core_1.EventEmitter();
+        this.notifierService = notifierService;
         this.timerId = 0;
@@ -32,3 +33,3 @@ }
         if (event.toState == message.state + 'Out') {
-            this.onRemoveMessage.next(message);
+            this.notifierService.clear(message);
         }
@@ -97,11 +98,7 @@ };
     ], NotifierMessageComponent.prototype, "timeDelay", void 0);
-    __decorate([
-        core_1.Output(), 
-        __metadata('design:type', Object)
-    ], NotifierMessageComponent.prototype, "onRemoveMessage", void 0);
     NotifierMessageComponent = __decorate([
         core_1.Component({
             selector: 'ng2-notifier-message',
-            template: "<div [@enterLeave]=\"animate\" (@enterLeave.done)=\"animationDone($event, message)\" (click)=\"onClick()\" (mouseenter)=\"onEnter()\" (mouseleave)=\"onLeave()\" [class]=\"theClass\" class=\"notifier-message {{message.type}}\"><div class=\"title\">{{message.title}}</div><div class=\"content\">{{message.content}}</div><div [innerHTML]=\"safeSvg\"></div></div>",
-            styles: [".notifier-message{font-size:12px;font-size:.75rem;line-height:20px;line-height:1.25rem;position:relative;width:272px;width:17rem;min-height:48px;min-height:3rem;-moz-border-radius:.3rem;border-radius:.3rem;margin-bottom:10px;margin-bottom:.625rem;padding:10px;padding:.625rem;color:#333;background-color:#fff;border-color:#ccc;-moz-box-shadow:0 0 8px 3px rgba(255,254,247,.75);box-shadow:0 0 8px 3px rgba(255,254,247,.75);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.notifier-message .title{font-size:16px;font-size:1rem;line-height:20px;line-height:1.25rem}.notifier-message .content,.notifier-message .title{padding-right:48px;padding-right:3rem}.notifier-message.primary{color:#fff;background-color:#337ab7;border-color:#2e6da4}.notifier-message.success{color:#fff;background-color:#5cb85c;border-color:#4cae4c}.notifier-message.danger{color:#fff;background-color:#d9534f;border-color:#d43f3a}.notifier-message.warning{color:#fff;background-color:#f0ad4e;border-color:#eea236}:host /deep/ .notifier-message svg{position:absolute;-moz-box-sizing:border-box;box-sizing:border-box;top:0;right:0;width:48px;width:3rem;height:48px;height:3rem;padding:10px;padding:.625rem;fill:#fff}"],
+            template: "<div [@enterLeave]=\"animate\" (@enterLeave.done)=\"animationDone($event, message)\" (click)=\"onClick()\" (mouseenter)=\"onEnter()\" (mouseleave)=\"onLeave()\" [class]=\"theClass\" class=\"notifier-message {{message.type}}\"><div class=\"timer\" *ngIf=\"showProcess\"><div class=\"bar\" [style.width]=\"getPercentage()\"></div></div><div class=\"title\">{{message.title}}</div><div class=\"content\">{{message.content}}</div><div [innerHTML]=\"safeSvg\"></div></div>",
+            styles: [".notifier-message,.timer{-moz-border-radius:.3rem}.notifier-message{font-size:12px;font-size:.75rem;line-height:20px;line-height:1.25rem;position:relative;width:272px;width:17rem;min-height:48px;min-height:3rem;border-radius:.3rem;margin-bottom:10px;margin-bottom:.625rem;padding:10px;padding:.625rem;color:#333;background-color:#fff;border-color:#ccc;-moz-box-shadow:0 0 8px 3px rgba(255,254,247,.75);box-shadow:0 0 8px 3px rgba(255,254,247,.75);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.notifier-message .title{font-size:16px;font-size:1rem;line-height:20px;line-height:1.25rem}.notifier-message .content,.notifier-message .title{padding-right:48px;padding-right:3rem}.notifier-message.primary{color:#fff;background-color:#337ab7;border-color:#2e6da4}.notifier-message.success{color:#fff;background-color:#5cb85c;border-color:#4cae4c}.notifier-message.danger{color:#fff;background-color:#d9534f;border-color:#d43f3a}.notifier-message.warning{color:#fff;background-color:#f0ad4e;border-color:#eea236}:host /deep/ .notifier-message svg{position:absolute;-moz-box-sizing:border-box;box-sizing:border-box;top:0;right:0;width:48px;width:3rem;height:48px;height:3rem;padding:10px;padding:.625rem;fill:#fff}.timer{position:absolute;top:0;left:0;width:100%;height:4px;border-radius:.3rem}.timer .bar{display:block;position:relative;height:100%;-moz-border-radius:.3rem;border-radius:.3rem;background:rgba(0,0,0,.3);-webkit-transition:width .1s ease;-moz-transition:width .1s ease;transition:width .1s ease}"],
             animations: [
@@ -160,3 +157,3 @@ core_1.trigger('enterLeave', [
         }), 
-        __metadata('design:paramtypes', [platform_browser_1.DomSanitizer])
+        __metadata('design:paramtypes', [platform_browser_1.DomSanitizer, notifier_service_1.NotifierService])
     ], NotifierMessageComponent);
@@ -163,0 +160,0 @@ return NotifierMessageComponent;

notifier.model.d.ts

@@ -9,14 +9,1 @@ export interface INotifierMessage {
 }
-export interface INotifierEvent {
-    command: string;
-    message?: INotifierMessage;
-}
-export interface INotifierOptions {
-    animate?: 'fromRight' | 'fromLeft' | 'rotate' | 'scale' | 'fade';
-    clickToClose?: boolean;
-    maxStack?: number;
-    pauseOnHover?: boolean;
-    position?: ['top' | 'bottom', 'right' | 'left' | 'center'];
-    timeDelay?: number;
-    theClass?: string;
-}

notifier.module.d.ts

@@ -0,2 +1,5 @@
+import { ModuleWithProviders } from '@angular/core';
+import { NotifierOptions } from "./notifier-options.service";
 export declare class NotifierModule {
+    static forRoot(config?: NotifierOptions): ModuleWithProviders;
 }

notifier.module.js

@@ -16,9 +16,19 @@ "use strict";
 var messages_reducer_1 = require("./messages.reducer");
-var notifier_component_1 = require("./notifier.component");
 var notifier_message_component_1 = require("./notifier-message.component");
+var max_pipe_1 = require("./max.pipe");
 var notifier_service_1 = require("./notifier.service");
-var max_pipe_1 = require("./max.pipe");
+var notifier_options_service_1 = require("./notifier-options.service");
+var notifier_container_component_1 = require("./notifier-container.component");
 var NotifierModule = (function () {
     function NotifierModule() {
     }
+    NotifierModule.forRoot = function (config) {
+        return {
+            ngModule: NotifierModule,
+            providers: config ? [
+                { provide: notifier_options_service_1.NotifierOptions, useValue: config },
+                notifier_service_1.NotifierService,
+            ] : [notifier_service_1.NotifierService],
+        };
+    };
     NotifierModule = __decorate([
@@ -32,3 +42,3 @@ core_1.NgModule({
             declarations: [
-                notifier_component_1.NotifierComponent,
+                notifier_container_component_1.NotifierContainerComponent,
                 notifier_message_component_1.NotifierMessageComponent,
@@ -38,5 +48,5 @@ max_pipe_1.MaxPipe
             exports: [
-                notifier_component_1.NotifierComponent
+                notifier_container_component_1.NotifierContainerComponent
             ],
-            providers: [notifier_service_1.NotifierService]
+            entryComponents: [notifier_container_component_1.NotifierContainerComponent]
         }), 
@@ -43,0 +53,0 @@ __metadata('design:paramtypes', [])

notifier.service.d.ts

@@ -1,11 +0,16 @@
-import { Subject } from "rxjs";
-import { INotifierEvent, INotifierMessage, INotifierOptions } from "./notifier.model";
+import { ComponentRef, ViewContainerRef, ComponentFactoryResolver, ApplicationRef } from '@angular/core';
+import { INotifierMessage } from "./notifier.model";
+import { NotifierOptions } from "./notifier-options.service";
 export declare class NotifierService {
-    private emitter;
+    private componentFactoryResolver;
+    private appRef;
+    container: ComponentRef<any>;
     private icons;
     private options;
-    constructor();
-    getEmitter(): Subject<INotifierEvent>;
-    getOptions(): INotifierOptions;
+    private _rootViewContainerRef;
+    constructor(componentFactoryResolver: ComponentFactoryResolver, appRef: ApplicationRef, options: NotifierOptions);
+    setRootViewContainerRef(vRef: ViewContainerRef): void;
     set(message: INotifierMessage): INotifierMessage;
+    dispose(): void;
+    clear(notice?: INotifierMessage): void;
     info(content: string, title?: string): INotifierMessage;
@@ -15,4 +20,2 @@ success(content: string, title?: string): INotifierMessage;
     alert(content: string, title?: string): INotifierMessage;
-    remove(message?: INotifierMessage): void;
-    attachPersonalOptions(options: any): void;
 }

notifier.service.js

@@ -11,34 +11,62 @@ "use strict";
 };
+var __param = (this && this.__param) || function (paramIndex, decorator) {
+    return function (target, key) { decorator(target, key, paramIndex); }
+};
 var core_1 = require('@angular/core');
-var rxjs_1 = require("rxjs");
 var uuid_1 = require("./uuid");
-var messages_reducer_1 = require("./messages.reducer");
 var icons_1 = require('./icons');
+var notifier_options_service_1 = require("./notifier-options.service");
+var notifier_container_component_1 = require("./notifier-container.component");
 var NotifierService = (function () {
-    function NotifierService() {
-        this.emitter = new rxjs_1.Subject();
+    function NotifierService(componentFactoryResolver, appRef, options) {
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.appRef = appRef;
         this.icons = icons_1.defaultIcons;
-        this.options = {
-            animate: 'fromRight',
-            clickToClose: true,
-            pauseOnHover: true,
-            position: ['bottom', 'right'],
-            maxStack: 5,
-            theClass: '',
-            timeDelay: 0
-        };
+        this.options = {};
+        if (options) {
+            Object.assign(this.options, options);
+        }
     }
-    NotifierService.prototype.getEmitter = function () {
-        return this.emitter;
+    NotifierService.prototype.setRootViewContainerRef = function (vRef) {
+        this._rootViewContainerRef = vRef;
     };
-    NotifierService.prototype.getOptions = function () {
-        return this.options;
-    };
     NotifierService.prototype.set = function (message) {
+        if (!this.container) {
+            if (!this._rootViewContainerRef) {
+                try {
+                    this._rootViewContainerRef = this.appRef['_rootComponents'][0]['_hostElement'].vcRef;
+                }
+                catch (e) {
+                    console.log(new Error('Please set root ViewContainerRef using setRootViewContainerRef(vRef: ViewContainerRef) method.'));
+                }
+            }
+            var providers = core_1.ReflectiveInjector.resolve([
+                { provide: notifier_options_service_1.NotifierOptions, useValue: this.options }
+            ]);
+            var notifierFactory = this.componentFactoryResolver.resolveComponentFactory(notifier_container_component_1.NotifierContainerComponent);
+            var childInjector = core_1.ReflectiveInjector.fromResolvedProviders(providers, this._rootViewContainerRef.parentInjector);
+            this.container = this._rootViewContainerRef.createComponent(notifierFactory, this._rootViewContainerRef.length, childInjector);
+        }
         if (!message.id) {
             message.id = uuid_1.uuid();
         }
-        this.emitter.next({ command: messages_reducer_1.ADD_MESSAGE, message: message });
+        this.container.instance.addNotice(message);
         return message;
     };
+    NotifierService.prototype.dispose = function () {
+        if (this.container && !this.container.instance.anyNotices()) {
+            this.container.destroy();
+            this.container = null;
+            return;
+        }
+        return;
+    };
+    NotifierService.prototype.clear = function (notice) {
+        if (!this.container)
+            return;
+        this.container.instance.removeNotice(notice);
+        if (!this.container.instance.anyNotices()) {
+            this.dispose();
+        }
+    };
     NotifierService.prototype.info = function (content, title) {
@@ -80,17 +108,6 @@ var message = {
     };
-    NotifierService.prototype.remove = function (message) {
-        message ? this.emitter.next({ command: messages_reducer_1.REMOVE_MESSAGE, message: message }) :
-            this.emitter.next({ command: messages_reducer_1.REMOVE_ALL });
-    };
-    NotifierService.prototype.attachPersonalOptions = function (options) {
-        var _this = this;
-        Object.keys(options).forEach(function (o) {
-            if (_this.options.hasOwnProperty(o)) {
-                _this.options[o] = options[o];
-            }
-        });
-    };
     NotifierService = __decorate([
-        core_1.Injectable(), 
-        __metadata('design:paramtypes', [])
+        core_1.Injectable(),
+        __param(2, core_1.Optional()), 
+        __metadata('design:paramtypes', [core_1.ComponentFactoryResolver, core_1.ApplicationRef, notifier_options_service_1.NotifierOptions])
     ], NotifierService);
@@ -97,0 +114,0 @@ return NotifierService;

package.json

 {
   "name": "ng2-yk-notifier",
-  "version": "1.0.0-beta.8",
+  "version": "1.0.0-beta.9",
   "description": "Angular2 Notification Component",
@@ -5,0 +5,0 @@ "keywords": [

src/notifier/index.ts

@@ -5,4 +5,4 @@ /**
 
-export { INotifierOptions } from './notifier.model';
+export { NotifierOptions } from './notifier-options.service';
 export { NotifierService } from './notifier.service';
 export { NotifierModule } from './notifier.module';

src/notifier/notifier-message.component.ts

@@ -7,6 +7,7 @@ /**
     Component, OnInit, OnDestroy, Input, AnimationTransitionEvent, trigger, state,
-    transition, style, animate, Output, EventEmitter
+    transition, style, animate
 } from '@angular/core';
 import { INotifierMessage } from "./notifier.model";
 import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
+import { NotifierService } from "./notifier.service";
 
@@ -21,4 +22,4 @@ /*
     selector: 'ng2-notifier-message',
-    template: `<div [@enterLeave]="animate" (@enterLeave.done)="animationDone($event, message)" (click)="onClick()" (mouseenter)="onEnter()" (mouseleave)="onLeave()" [class]="theClass" class="notifier-message {{message.type}}"><div class="title">{{message.title}}</div><div class="content">{{message.content}}</div><div [innerHTML]="safeSvg"></div></div>`,
-    styles: [`.notifier-message{font-size:12px;font-size:.75rem;line-height:20px;line-height:1.25rem;position:relative;width:272px;width:17rem;min-height:48px;min-height:3rem;-moz-border-radius:.3rem;border-radius:.3rem;margin-bottom:10px;margin-bottom:.625rem;padding:10px;padding:.625rem;color:#333;background-color:#fff;border-color:#ccc;-moz-box-shadow:0 0 8px 3px rgba(255,254,247,.75);box-shadow:0 0 8px 3px rgba(255,254,247,.75);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.notifier-message .title{font-size:16px;font-size:1rem;line-height:20px;line-height:1.25rem}.notifier-message .content,.notifier-message .title{padding-right:48px;padding-right:3rem}.notifier-message.primary{color:#fff;background-color:#337ab7;border-color:#2e6da4}.notifier-message.success{color:#fff;background-color:#5cb85c;border-color:#4cae4c}.notifier-message.danger{color:#fff;background-color:#d9534f;border-color:#d43f3a}.notifier-message.warning{color:#fff;background-color:#f0ad4e;border-color:#eea236}:host /deep/ .notifier-message svg{position:absolute;-moz-box-sizing:border-box;box-sizing:border-box;top:0;right:0;width:48px;width:3rem;height:48px;height:3rem;padding:10px;padding:.625rem;fill:#fff}`],
+    template: `<div [@enterLeave]="animate" (@enterLeave.done)="animationDone($event, message)" (click)="onClick()" (mouseenter)="onEnter()" (mouseleave)="onLeave()" [class]="theClass" class="notifier-message {{message.type}}"><div class="timer" *ngIf="showProcess"><div class="bar" [style.width]="getPercentage()"></div></div><div class="title">{{message.title}}</div><div class="content">{{message.content}}</div><div [innerHTML]="safeSvg"></div></div>`,
+    styles: [`.notifier-message,.timer{-moz-border-radius:.3rem}.notifier-message{font-size:12px;font-size:.75rem;line-height:20px;line-height:1.25rem;position:relative;width:272px;width:17rem;min-height:48px;min-height:3rem;border-radius:.3rem;margin-bottom:10px;margin-bottom:.625rem;padding:10px;padding:.625rem;color:#333;background-color:#fff;border-color:#ccc;-moz-box-shadow:0 0 8px 3px rgba(255,254,247,.75);box-shadow:0 0 8px 3px rgba(255,254,247,.75);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.notifier-message .title{font-size:16px;font-size:1rem;line-height:20px;line-height:1.25rem}.notifier-message .content,.notifier-message .title{padding-right:48px;padding-right:3rem}.notifier-message.primary{color:#fff;background-color:#337ab7;border-color:#2e6da4}.notifier-message.success{color:#fff;background-color:#5cb85c;border-color:#4cae4c}.notifier-message.danger{color:#fff;background-color:#d9534f;border-color:#d43f3a}.notifier-message.warning{color:#fff;background-color:#f0ad4e;border-color:#eea236}:host /deep/ .notifier-message svg{position:absolute;-moz-box-sizing:border-box;box-sizing:border-box;top:0;right:0;width:48px;width:3rem;height:48px;height:3rem;padding:10px;padding:.625rem;fill:#fff}.timer{position:absolute;top:0;left:0;width:100%;height:4px;border-radius:.3rem}.timer .bar{display:block;position:relative;height:100%;-moz-border-radius:.3rem;border-radius:.3rem;background:rgba(0,0,0,.3);-webkit-transition:width .1s ease;-moz-transition:width .1s ease;transition:width .1s ease}`],
     animations: [
@@ -96,4 +97,2 @@ trigger('enterLeave', [
 
-    @Output() onRemoveMessage = new EventEmitter<INotifierMessage>();
-
     private safeSvg: SafeHtml;
@@ -104,3 +103,4 @@ private timerId: number = 0;
 
-    constructor( private domSanitizer: DomSanitizer ) {
+    constructor( private domSanitizer: DomSanitizer,
+                 private notifierService: NotifierService ) {
     }
@@ -123,3 +123,3 @@
         if (event.toState == message.state + 'Out') {
-            this.onRemoveMessage.next(message);
+            this.notifierService.clear(message);
         }
@@ -126,0 +126,0 @@ }

src/notifier/notifier.model.ts

@@ -13,16 +13,1 @@ /**
 }
-
-export interface INotifierEvent {
-    command: string;
-    message?: INotifierMessage;
-}
-
-export  interface INotifierOptions {
-    animate?: 'fromRight' | 'fromLeft' | 'rotate' | 'scale' | 'fade';
-    clickToClose?: boolean;
-    maxStack?: number;
-    pauseOnHover?: boolean;
-    position?: ['top' | 'bottom', 'right' | 'left' | 'center'];
-    timeDelay?: number;
-    theClass?: string;
-}

src/notifier/notifier.module.ts

@@ -5,3 +5,3 @@ /**
 
-import { NgModule }      from '@angular/core';
+import { NgModule, ModuleWithProviders }      from '@angular/core';
 import { CommonModule } from '@angular/common';
@@ -11,8 +11,8 @@ import { FormsModule } from "@angular/forms";
 import { messagesReducer } from "./messages.reducer";
-import { NotifierComponent } from "./notifier.component";
 import { NotifierMessageComponent } from "./notifier-message.component";
+import { MaxPipe } from "./max.pipe";
 import { NotifierService } from "./notifier.service";
-import { MaxPipe } from "./max.pipe";
+import { NotifierOptions } from "./notifier-options.service";
+import { NotifierContainerComponent } from "./notifier-container.component";
 
-
 @NgModule({
@@ -25,3 +25,3 @@ imports: [
     declarations: [
-        NotifierComponent,
+        NotifierContainerComponent,
         NotifierMessageComponent,
@@ -31,7 +31,16 @@ MaxPipe
     exports: [
-        NotifierComponent
+        NotifierContainerComponent
     ],
-    providers: [NotifierService]
+    entryComponents: [NotifierContainerComponent]
 })
 export class NotifierModule {
-}
+    public static forRoot(config?: NotifierOptions): ModuleWithProviders {
+        return {
+            ngModule: NotifierModule,
+            providers: config ? [
+                    {provide: NotifierOptions, useValue: config},
+                    NotifierService,
+                ] : [NotifierService],
+        };
+    }
+}

src/notifier/notifier.service.ts

@@ -5,8 +5,16 @@ /**
 
-import { Injectable } from '@angular/core';
-import { Subject } from "rxjs";
+import {
+    Injectable,
+    ComponentRef,
+    ViewContainerRef,
+    ComponentFactoryResolver,
+    ApplicationRef,
+    Optional,
+    ReflectiveInjector
+} from '@angular/core';
 import { uuid } from "./uuid";
-import { ADD_MESSAGE, REMOVE_MESSAGE, REMOVE_ALL } from "./messages.reducer";
-import { INotifierEvent, INotifierMessage, INotifierOptions } from "./notifier.model";
+import { INotifierMessage } from "./notifier.model";
 import { Icons, defaultIcons } from './icons';
+import { NotifierOptions } from "./notifier-options.service";
+import { NotifierContainerComponent } from "./notifier-container.component";
 
@@ -16,35 +24,65 @@ @Injectable()
 
-    private emitter: Subject<INotifierEvent> = new Subject<INotifierEvent>();
+    container: ComponentRef<any>;
 
     private icons: Icons = defaultIcons;
+    private options: any = {};
+    private _rootViewContainerRef: ViewContainerRef;
 
-    private options: INotifierOptions = {
-        animate: 'fromRight',
-        clickToClose: true,
-        pauseOnHover: true,
-        position: ['bottom', 'right'],
-        maxStack: 5,
-        theClass: '',
-        timeDelay: 0
-    };
-
-    constructor() {
+    constructor( private componentFactoryResolver: ComponentFactoryResolver,
+                 private appRef: ApplicationRef,
+                 @Optional() options: NotifierOptions ) {
+        if (options) {
+            Object.assign(this.options, options);
+        }
     }
 
-    getEmitter(): Subject<INotifierEvent> {
-        return this.emitter;
+    setRootViewContainerRef( vRef: ViewContainerRef ) {
+        this._rootViewContainerRef = vRef;
     }
 
-    getOptions(): INotifierOptions {
-        return this.options;
-    }
+    set( message: INotifierMessage ): INotifierMessage {
 
-    set( message: INotifierMessage ): INotifierMessage {
+        if (!this.container) {
+            // get app root view component ref
+            if (!this._rootViewContainerRef) {
+                try {
+                    this._rootViewContainerRef = this.appRef['_rootComponents'][0]['_hostElement'].vcRef;
+                } catch (e) {
+                    console.log(new Error('Please set root ViewContainerRef using setRootViewContainerRef(vRef: ViewContainerRef) method.'));
+                }
+            }
+
+            // get options providers
+            let providers = ReflectiveInjector.resolve([
+                {provide: NotifierOptions, useValue: <NotifierOptions>this.options}
+            ]);
+
+            let notifierFactory = this.componentFactoryResolver.resolveComponentFactory(NotifierContainerComponent);
+            let childInjector = ReflectiveInjector.fromResolvedProviders(providers, this._rootViewContainerRef.parentInjector);
+            this.container = this._rootViewContainerRef.createComponent(notifierFactory, this._rootViewContainerRef.length, childInjector);
+        }
         if (!message.id) {
             message.id = uuid();
         }
-        this.emitter.next({command: ADD_MESSAGE, message: message});
+        this.container.instance.addNotice(message);
         return message;
     }
 
+    dispose(): void {
+        if (this.container && !this.container.instance.anyNotices()) {
+            this.container.destroy();
+            this.container = null;
+            return;
+        }
+        return;
+    }
+
+    clear( notice?: INotifierMessage ): void {
+        if (!this.container) return;
+        this.container.instance.removeNotice(notice);
+        if(!this.container.instance.anyNotices()){
+            this.dispose();
+        }
+    }
+
     info( content: string, title?: string ) {
@@ -89,15 +127,2 @@ let message = {
     }
-
-    remove( message?: INotifierMessage ) {
-        message ? this.emitter.next({command: REMOVE_MESSAGE, message: message}) :
-            this.emitter.next({command: REMOVE_ALL});
-    }
-
-    attachPersonalOptions( options: any ): void {
-        Object.keys(options).forEach(o => {
-            if(this.options.hasOwnProperty(o)) {
-                this.options[o] = options[o];
-            }
-        });
-    }
 }

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

57763

increased by24.64%

Number of package files

38

increased by15.15%

Lines of code

1174

increased by21.41%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes