ng-snotify - npm Package Compare versions

Comparing version 3.0.1 to 4.0.0

index.d.ts

@@ -6,11 +6,7 @@ import { ModuleWithProviders } from '@angular/core';
 export * from './snotify/interfaces/SnotifyButton.interface';
-export * from './snotify/interfaces/SnotifyConfig.interface';
-export * from './snotify/interfaces/SnotifyInfo.interface';
-export * from './snotify/interfaces/SnotifyOptions.interface';
+export * from './snotify/interfaces/SnotifyToastConfig.interface';
 export * from './snotify/interfaces/SnotifyNotifications.interface';
-export * from './snotify/enum/SnotifyAction.enum';
-export * from './snotify/enum/SnotifyPosition.enum';
+export * from './snotify/enums/SnotifyPosition.enum';
 export * from './snotify/toast/snotify-toast.model';
 export * from './snotify/toast/toast.component';
-export * from './snotify/toast/icon/icon.component';
 export * from './snotify/pipes/truncate.pipe';
@@ -20,4 +16,5 @@ export * from './snotify/pipes/keys.pipe';
 export * from './snotify/toast/prompt/prompt.component';
+export * from './snotify/toastDefaults';
 export declare class SnotifyModule {
     static forRoot(): ModuleWithProviders;
 }

index.js

@@ -1,7 +0,21 @@
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Injectable, Input, NgModule, Output, Pipe, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Injectable, Input, NgModule, Output, Pipe, ViewEncapsulation } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { Subject } from 'rxjs/Subject';
-import { PromiseObservable } from 'rxjs/observable/PromiseObservable';
+import { Subject as Subject$1 } from 'rxjs/Subject';
+import { PromiseObservable as PromiseObservable$1 } from 'rxjs/observable/PromiseObservable';
 
 /**
+ * Toast style.
+ */
+var SnotifyStyle = {
+    simple: 'simple',
+    success: 'success',
+    error: 'error',
+    warning: 'warning',
+    info: 'info',
+    async: 'async',
+    confirm: 'confirm',
+    prompt: 'prompt'
+};
+
+/**
  * Toast main model
@@ -14,5 +28,6 @@ */
      * @param {?} body
-     * @param {?=} config
+     * @param {?} config
      */
     function SnotifyToast(id, title, body, config) {
+        var _this = this;
         this.id = id;
@@ -22,3 +37,40 @@ this.title = title;
         this.config = config;
+        /**
+         * Emits {SnotifyEvent}
+        \@type {Subject<SnotifyEvent>}
+         */
+        this.eventEmitter = new Subject$1();
+        /**
+         * Holds all subscribers because we need to unsubscribe from all before toast get destroyed
+        \@type {Subscription[]}
+        \@private
+         */
+        this._eventsHolder = [];
+        if (this.config.type === SnotifyStyle.prompt) {
+            this.value = '';
+        }
+        this.on('hidden', function () {
+            _this._eventsHolder.forEach(function (subscription) {
+                subscription.unsubscribe();
+            });
+        });
     }
+    /**
+     * Subscribe to toast events
+    \@param {SnotifyEvent} event
+    \@param {(toast: SnotifyToast) => void} action
+    \@returns {this}
+     * @param {?} event
+     * @param {?} action
+     * @return {?}
+     */
+    SnotifyToast.prototype.on = function (event, action) {
+        var _this = this;
+        this._eventsHolder.push(this.eventEmitter.subscribe(function (e) {
+            if (e === event) {
+                action(_this);
+            }
+        }));
+        return this;
+    };
     return SnotifyToast;
@@ -28,136 +80,217 @@ }());
 /**
- * Toast position
+ * Transform arguments to Snotify object
+\@param target
+\@param {SnotifyType} propertyKey
+\@param {PropertyDescriptor} descriptor
+\@returns {Snotify}
+\@constructor
+ * @param {?} target
+ * @param {?} propertyKey
+ * @param {?} descriptor
+ * @return {?}
  */
-var SnotifyPosition = /** @class */ (function () {
-    function SnotifyPosition() {
+function TransformArgument(target, propertyKey, descriptor) {
+    if (propertyKey === SnotifyStyle.async) {
+        return {
+            value: function () {
+                var args = [];
+                for (var _i = 0; _i < arguments.length; _i++) {
+                    args[_i] = arguments[_i];
+                }
+                var /** @type {?} */ result;
+                if (args.length === 2) {
+                    result = {
+                        title: null,
+                        body: args[0],
+                        config: null,
+                        action: args[1]
+                    };
+                }
+                else if (args.length === 3) {
+                    if (typeof args[1] === 'string') {
+                        result = {
+                            title: args[1],
+                            body: args[0],
+                            config: null,
+                            action: args[2]
+                        };
+                    }
+                    else {
+                        result = {
+                            title: null,
+                            body: args[0],
+                            config: args[2],
+                            action: args[1]
+                        };
+                    }
+                }
+                else {
+                    result = {
+                        title: args[1],
+                        body: args[0],
+                        config: args[3],
+                        action: args[2]
+                    };
+                }
+                return descriptor.value.apply(this, [/** @type {?} */ (result)]);
+            }
+        };
     }
-    SnotifyPosition.left_top = 'leftTop';
-    SnotifyPosition.left_center = 'leftCenter';
-    SnotifyPosition.left_bottom = 'leftBottom';
-    SnotifyPosition.right_top = 'rightTop';
-    SnotifyPosition.right_center = 'rightCenter';
-    SnotifyPosition.right_bottom = 'rightBottom';
-    SnotifyPosition.center_top = 'centerTop';
-    SnotifyPosition.center_center = 'centerCenter';
-    SnotifyPosition.center_bottom = 'centerBottom';
-    return SnotifyPosition;
-}());
+    else {
+        return {
+            value: function () {
+                var args = [];
+                for (var _i = 0; _i < arguments.length; _i++) {
+                    args[_i] = arguments[_i];
+                }
+                var /** @type {?} */ result;
+                if (args.length === 1) {
+                    result = {
+                        title: null,
+                        body: args[0],
+                        config: null
+                    };
+                }
+                else if (args.length === 3) {
+                    result = {
+                        title: args[1],
+                        body: args[0],
+                        config: args[2]
+                    };
+                }
+                else {
+                    result = (_a = {
+                            title: null,
+                            config: null,
+                            body: args[0]
+                        },
+                        _a[typeof args[1] === 'string' ? 'title' : 'config'] = args[1],
+                        _a);
+                }
+                return descriptor.value.apply(this, [/** @type {?} */ (result)]);
+                var _a;
+            }
+        };
+    }
+}
 
-var SnotifyAction = {};
-SnotifyAction.onInit = 3;
-SnotifyAction.beforeDestroy = 0;
-SnotifyAction.afterDestroy = 1;
-SnotifyAction.onInput = 9;
-SnotifyAction.onClick = 10;
-SnotifyAction.onHoverEnter = 11;
-SnotifyAction.onHoverLeave = 12;
-SnotifyAction[SnotifyAction.onInit] = "onInit";
-SnotifyAction[SnotifyAction.beforeDestroy] = "beforeDestroy";
-SnotifyAction[SnotifyAction.afterDestroy] = "afterDestroy";
-SnotifyAction[SnotifyAction.onInput] = "onInput";
-SnotifyAction[SnotifyAction.onClick] = "onClick";
-SnotifyAction[SnotifyAction.onHoverEnter] = "onHoverEnter";
-SnotifyAction[SnotifyAction.onHoverLeave] = "onHoverLeave";
-
 /**
- * Toast type.
+ * Generates random id
+\@return {number}
+ * @return {?}
  */
-var SnotifyType = /** @class */ (function () {
-    function SnotifyType() {
+function uuid() {
+    return Math.floor(Math.random() * (Date.now() - 1)) + 1;
+}
+/**
+ * Simple is object check.
+\@param item {Object<any>}
+\@returns {boolean}
+ * @param {?} item
+ * @return {?}
+ */
+function isObject(item) {
+    return (item && typeof item === 'object' && !Array.isArray(item) && item !== null);
+}
+/**
+ * Deep merge objects.
+\@param sources {Array<Object<any>>}
+\@returns {Object<any>}
+ * @param {...?} sources
+ * @return {?}
+ */
+function mergeDeep() {
+    var sources = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        sources[_i] = arguments[_i];
     }
-    SnotifyType.SIMPLE = 'simple';
-    SnotifyType.SUCCESS = 'success';
-    SnotifyType.ERROR = 'error';
-    SnotifyType.WARNING = 'warning';
-    SnotifyType.INFO = 'info';
-    SnotifyType.ASYNC = 'async';
-    SnotifyType.CONFIRM = 'confirm';
-    SnotifyType.PROMPT = 'prompt';
-    return SnotifyType;
-}());
+    var /** @type {?} */ target = {};
+    if (!sources.length) {
+        return target;
+    }
+    while (sources.length > 0) {
+        var /** @type {?} */ source = sources.shift();
+        if (isObject(source)) {
+            for (var /** @type {?} */ key in source) {
+                if (isObject(source[key])) {
+                    target[key] = mergeDeep(target[key], source[key]);
+                }
+                else {
+                    Object.assign(target, (_a = {}, _a[key] = source[key], _a));
+                }
+            }
+        }
+    }
+    return target;
+    var _a;
+}
+/**
+ * @param {?} start
+ * @param {?} duration
+ * @param {?} callback
+ * @return {?}
+ */
 
+var __assign$1 = (undefined && undefined.__assign) || Object.assign || function(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+            t[p] = s[p];
+    }
+    return t;
+};
 /**
- * SnotifyService - create, remove, config toasts
+ * Defines toast style depending on method name
+\@param target
+\@param {SnotifyType} propertyKey
+\@param {PropertyDescriptor} descriptor
+\@returns {{value: ((...args: any[]) => any)}}
+\@constructor
+ * @param {?} target
+ * @param {?} propertyKey
+ * @param {?} descriptor
+ * @return {?}
  */
+function SetToastType(target, propertyKey, descriptor) {
+    return {
+        value: function () {
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            ((args[0])).config = __assign$1({}, ((args[0])).config, { type: propertyKey });
+            return descriptor.value.apply(this, args);
+        }
+    };
+}
+
+var __assign = (undefined && undefined.__assign) || Object.assign || function(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+            t[p] = s[p];
+    }
+    return t;
+};
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
 var SnotifyService = /** @class */ (function () {
     /**
-     * Constructor - initialize base configuration objects
+     * @param {?} config
      */
-    function SnotifyService() {
-        this.emitter = new Subject();
-        this.lifecycle = new Subject();
-        this.optionsChanged = new Subject();
-        this.toastChanged = new Subject();
-        this.toastDeleted = new Subject();
+    function SnotifyService(config) {
+        this.config = config;
+        this.emitter = new Subject$1();
+        this.toastChanged = new Subject$1();
+        this.toastDeleted = new Subject$1();
         this.notifications = [];
-        this._defaultAnimationTime = 400;
-        this.config = {
-            showProgressBar: true,
-            timeout: 2000,
-            closeOnClick: true,
-            pauseOnHover: true,
-            bodyMaxLength: 150,
-            titleMaxLength: 16,
-            backdrop: -1,
-            animation: { enter: 'fadeInUp', exit: 'fadeOutRight', time: this._defaultAnimationTime }
-        };
-        this._options = {
-            newOnTop: true,
-            position: SnotifyPosition.right_bottom,
-            maxOnScreen: 8,
-            maxAtPosition: 8,
-            maxHeight: 300
-        };
     }
     /**
-     * Generates random id
-    \@return {number}
-     * @return {?}
-     */
-    SnotifyService.generateRandomId = function () {
-        return Math.floor(Math.random() * (Date.now() - 1)) + 1;
-    };
-    /**
-     * Simple is object check.
-    \@param item {Object<any>}
-    \@returns {boolean}
-     * @param {?} item
-     * @return {?}
-     */
-    SnotifyService.isObject = function (item) {
-        return (item && typeof item === 'object' && !Array.isArray(item) && item !== null);
-    };
-    /**
-     * Deep merge objects.
-    \@param sources {Array<Object>}
-    \@returns {Object<any>}
-     * @param {...?} sources
-     * @return {?}
-     */
-    SnotifyService.mergeDeep = function () {
-        var sources = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            sources[_i] = arguments[_i];
-        }
-        var /** @type {?} */ target = {};
-        if (!sources.length) {
-            return target;
-        }
-        while (sources.length > 0) {
-            var /** @type {?} */ source = sources.shift();
-            if (SnotifyService.isObject(source)) {
-                for (var /** @type {?} */ key in source) {
-                    if (SnotifyService.isObject(source[key])) {
-                        target[key] = SnotifyService.mergeDeep(target[key], source[key]);
-                    }
-                    else {
-                        Object.assign(target, (_a = {}, _a[key] = source[key], _a));
-                    }
-                }
-            }
-        }
-        return target;
-        var _a;
-    };
-    /**
      * emit changes in notifications array
@@ -167,57 +300,8 @@ * @return {?}
     SnotifyService.prototype.emit = function () {
-        this.emitter.next(this.getAll());
+        this.emitter.next(this.notifications.slice());
     };
     /**
-     * Set global config
-    \@param config {SnotifyConfig}
-    \@param options {SnotifyOptions}
-     * @param {?} config
-     * @param {?=} options
-     * @return {?}
-     */
-    SnotifyService.prototype.setConfig = function (config, options) {
-        var _this = this;
-        this._options = SnotifyService.mergeDeep(this._options, options);
-        this.config = SnotifyService.mergeDeep(this.config, {
-            animation: (function (position) {
-                switch (position) {
-                    case SnotifyPosition.left_top:
-                        return { enter: 'fadeInLeft', exit: 'fadeOutLeft', time: _this._defaultAnimationTime };
-                    case SnotifyPosition.left_center:
-                        return { enter: 'fadeInLeft', exit: 'fadeOutLeft', time: _this._defaultAnimationTime };
-                    case SnotifyPosition.left_bottom:
-                        return { enter: 'fadeInLeft', exit: 'fadeOutLeft', time: _this._defaultAnimationTime };
-                    case SnotifyPosition.right_top:
-                        return { enter: 'fadeInRight', exit: 'fadeOutRight', time: _this._defaultAnimationTime };
-                    case SnotifyPosition.right_center:
-                        return { enter: 'fadeInRight', exit: 'fadeOutRight', time: _this._defaultAnimationTime };
-                    case SnotifyPosition.right_bottom:
-                        return { enter: 'fadeInRight', exit: 'fadeOutRight', time: _this._defaultAnimationTime };
-                    case SnotifyPosition.center_top:
-                        return { enter: 'fadeInDown', exit: 'fadeOutUp', time: _this._defaultAnimationTime };
-                    case SnotifyPosition.center_center:
-                        return { enter: 'fadeIn', exit: 'fadeOut', time: _this._defaultAnimationTime };
-                    case SnotifyPosition.center_bottom:
-                        return { enter: 'fadeInUp', exit: 'fadeOutDown', time: _this._defaultAnimationTime };
-                }
-            })(this._options.position)
-        }, config);
-        this.optionsChanged.next(this._options);
-    };
-    Object.defineProperty(SnotifyService.prototype, "options", {
-        /**
-         * get SnotifyOptions
-        \@return {SnotifyOptions}
-         * @return {?}
-         */
-        get: function () {
-            return this._options;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    /**
      * returns SnotifyToast object
     \@param id {Number}
-    \@return {undefined|SnotifyToast}
+    \@return {SnotifyToast|undefined}
      * @param {?} id
@@ -230,10 +314,2 @@ * @return {?}
     /**
-     * returns copy of notifications array
-    \@return {SnotifyToast[]}
-     * @return {?}
-     */
-    SnotifyService.prototype.getAll = function () {
-        return this.notifications.slice();
-    };
-    /**
      * add SnotifyToast to notifications array
@@ -245,4 +321,3 @@ \@param toast {SnotifyToast}
     SnotifyService.prototype.add = function (toast) {
-        toast.config.position = toast.config.position || this.options.position;
-        if (this._options.newOnTop) {
+        if (this.config.global.newOnTop) {
             this.notifications.unshift(toast);
@@ -257,4 +332,4 @@ }
      * If ID passed, emits toast animation remove, if ID & REMOVE passed, removes toast from notifications array
-    \@param id {Number}
-    \@param remove {Boolean}
+    \@param id {number}
+    \@param remove {boolean}
      * @param {?=} id
@@ -290,212 +365,126 @@ * @param {?=} remove
     SnotifyService.prototype.create = function (snotify) {
-        var /** @type {?} */ id = SnotifyService.generateRandomId();
-        this.add(new SnotifyToast(id, snotify.title, snotify.body, snotify.config || null));
-        return id;
+        var /** @type {?} */ config = mergeDeep(this.config.toast, this.config.type[snotify.config.type], snotify.config);
+        var /** @type {?} */ toast = new SnotifyToast(uuid(), snotify.title, snotify.body, config);
+        this.add(toast);
+        return toast;
     };
     /**
-     * Create toast with Success style, returns toast id;
-    \@param body {String}
-    \@param title {String}
-    \@param config {SnotifyConfig}
-    \@return {number}
-     * @param {?} body
-     * @param {?=} title
-     * @param {?=} config
+     * @param {?} defaults
      * @return {?}
      */
-    SnotifyService.prototype.success = function (body, title, config) {
-        return this.create({
-            title: title,
-            body: body,
-            config: SnotifyService.mergeDeep(this.config, { type: SnotifyType.SUCCESS }, config)
-        });
+    SnotifyService.prototype.setDefaults = function (defaults) {
+        return this.config = /** @type {?} */ (mergeDeep(this.config, defaults));
     };
     /**
-     * Create toast with Error style, returns toast id;
-    \@param body {String}
-    \@param title {String}
-    \@param config {SnotifyConfig}
-    \@return {number}
-     * @param {?} body
-     * @param {?=} title
-     * @param {?=} config
+     * Transform toast arguments into {Snotify} object
+     * @param {?} args
      * @return {?}
      */
-    SnotifyService.prototype.error = function (body, title, config) {
-        return this.create({
-            title: title,
-            body: body,
-            config: SnotifyService.mergeDeep(this.config, { type: SnotifyType.ERROR }, config)
-        });
+    SnotifyService.prototype.simple = function (args) {
+        return this.create(args);
     };
     /**
-     * Create toast with Info style, returns toast id;
-    \@param body {String}
-    \@param title {String}
-    \@param config {SnotifyConfig}
-    \@return {number}
-     * @param {?} body
-     * @param {?=} title
-     * @param {?=} config
+     * Transform toast arguments into {Snotify} object
+     * @param {?} args
      * @return {?}
      */
-    SnotifyService.prototype.info = function (body, title, config) {
-        return this.create({
-            title: title,
-            body: body,
-            config: SnotifyService.mergeDeep(this.config, { type: SnotifyType.INFO }, config)
-        });
+    SnotifyService.prototype.success = function (args) {
+        return this.create(args);
     };
     /**
-     * Create toast with Warining style, returns toast id;
-    \@param body {String}
-    \@param title {String}
-    \@param config {SnotifyConfig}
-    \@return {number}
-     * @param {?} body
-     * @param {?=} title
-     * @param {?=} config
+     * Transform toast arguments into {Snotify} object
+     * @param {?} args
      * @return {?}
      */
-    SnotifyService.prototype.warning = function (body, title, config) {
-        return this.create({
-            title: title,
-            body: body,
-            config: SnotifyService.mergeDeep(this.config, { type: SnotifyType.WARNING }, config)
-        });
+    SnotifyService.prototype.error = function (args) {
+        return this.create(args);
     };
     /**
-     * Create toast without style, returns toast id;
-    \@param body {String}
-    \@param title {String}
-    \@param config {SnotifyConfig}
-    \@return {number}
-     * @param {?} body
-     * @param {?=} title
-     * @param {?=} config
+     * Transform toast arguments into {Snotify} object
+     * @param {?} args
      * @return {?}
      */
-    SnotifyService.prototype.simple = function (body, title, config) {
-        return this.create({
-            title: title,
-            body: body,
-            config: SnotifyService.mergeDeep(this.config, { type: SnotifyType.SIMPLE }, config)
-        });
+    SnotifyService.prototype.info = function (args) {
+        return this.create(args);
     };
     /**
-     * Create toast with Confirm style {with two buttons}, returns toast id;
-    \@param body {String}
-    \@param title {String}
-    \@param config {SnotifyConfig}
-    \@return {number}
-     * @param {?} body
-     * @param {?} title
-     * @param {?=} config
+     * Transform toast arguments into {Snotify} object
+     * @param {?} args
      * @return {?}
      */
-    SnotifyService.prototype.confirm = function (body, title, config) {
-        var _this = this;
-        var /** @type {?} */ id = this.create({
-            title: title,
-            body: body,
-            config: SnotifyService.mergeDeep(this.config, {
-                buttons: [
-                    { text: 'Ok', action: null, bold: true },
-                    { text: 'Cancel', action: function () { return _this.remove(id); }, bold: false },
-                ]
-            }, config, {
-                type: SnotifyType.CONFIRM,
-                closeOnClick: false,
-            })
-        });
-        return id;
+    SnotifyService.prototype.warning = function (args) {
+        return this.create(args);
     };
     /**
-     * Create toast with Prompt style {with two buttons}, returns toast id;
-    \@param body {String}
-    \@param title {String}
-    \@param config {SnotifyConfig}
-    \@return {number}
-     * @param {?} body
-     * @param {?=} title
-     * @param {?=} config
+     * Transform toast arguments into {Snotify} object
+     * @param {?} args
      * @return {?}
      */
-    SnotifyService.prototype.prompt = function (body, title, config) {
-        var _this = this;
-        var /** @type {?} */ id = this.create({
-            title: title,
-            body: body,
-            config: SnotifyService.mergeDeep(this.config, {
-                buttons: [
-                    { text: 'Ok', action: null, bold: true },
-                    { text: 'Cancel', action: function () { return _this.remove(id); }, bold: false },
-                ],
-                placeholder: 'Enter answer here...',
-            }, config, {
-                timeout: 0,
-                closeOnClick: false,
-                type: SnotifyType.PROMPT,
-            })
-        });
-        return id;
+    SnotifyService.prototype.confirm = function (args) {
+        return this.create(args);
     };
     /**
-     * Creates async toast with Info style. Pass action, and resolve or reject it.
-    \@param body {String}
-    \@param title {String}
-    \@param action {Promise<SnotifyConfig> | Observable<SnotifyConfig>}
-    \@return {number}
-     * @param {?} body
-     * @param {?} title
-     * @param {?} action
+     * Transform toast arguments into {Snotify} object
+     * @param {?} args
      * @return {?}
      */
-    SnotifyService.prototype.async = function (body, title, action) {
+    SnotifyService.prototype.prompt = function (args) {
+        return this.create(args);
+    };
+    /**
+     * Transform toast arguments into {Snotify} object
+     * @param {?} args
+     * @return {?}
+     */
+    SnotifyService.prototype.async = function (args) {
         var _this = this;
         var /** @type {?} */ async;
-        if (action instanceof Promise) {
-            async = PromiseObservable.create(action);
+        if (args.action instanceof Promise) {
+            async = PromiseObservable$1.create(args.action);
         }
         else {
-            async = action;
+            async = args.action;
         }
-        var /** @type {?} */ id = this.simple(body, title, {
-            pauseOnHover: false,
-            closeOnClick: false,
-            timeout: 0,
-            showProgressBar: false,
-            type: SnotifyType.ASYNC
+        var /** @type {?} */ toast = this.create(args);
+        toast.on('mounted', function () {
+            var /** @type {?} */ subscription = async.subscribe(function (next) {
+                _this.mergeToast(toast, next);
+            }, function (error) {
+                _this.mergeToast(toast, error, SnotifyStyle.error);
+                subscription.unsubscribe();
+            }, function () {
+                _this.mergeToast(toast, {}, SnotifyStyle.success);
+                subscription.unsubscribe();
+            });
         });
-        var /** @type {?} */ toast = this.get(id);
-        var /** @type {?} */ latestToast = Object.assign({}, toast);
-        var /** @type {?} */ updateToast = function (type, data) {
-            if (!data) {
-                latestToast = /** @type {?} */ (SnotifyService.mergeDeep(toast, latestToast, { config: { type: type } }));
-            }
-            else {
-                latestToast = /** @type {?} */ (SnotifyService.mergeDeep(toast, data, { config: { type: type } }));
-            }
-            _this.toastChanged.next(latestToast);
-        };
-        var /** @type {?} */ lifecycleSubscription = this.lifecycle.subscribe(function (info) {
-            if (info.action === SnotifyAction.onInit && info.toast.id === id) {
-                var /** @type {?} */ subscription_1 = async.subscribe(function (next) {
-                    updateToast(SnotifyType.ASYNC, next);
-                }, function (error) {
-                    updateToast(SnotifyType.ERROR, error);
-                    subscription_1.unsubscribe();
-                }, function () {
-                    updateToast(SnotifyType.SUCCESS);
-                    subscription_1.unsubscribe();
-                    lifecycleSubscription.unsubscribe();
-                });
-            }
-        });
-        return id;
+        return toast;
     };
     /**
+     * @param {?} toast
+     * @param {?} next
+     * @param {?=} type
+     * @return {?}
+     */
+    SnotifyService.prototype.mergeToast = function (toast, next, type) {
+        if (next.body) {
+            toast.body = next.body;
+        }
+        if (next.title) {
+            toast.title = next.title;
+        }
+        if (type) {
+            toast.config = mergeDeep(toast.config, this.config.global, this.config.toast[type], { type: type }, next.config);
+        }
+        else {
+            toast.config = mergeDeep(toast.config, next.config);
+        }
+        if (next.html) {
+            toast.config.html = next.html;
+        }
+        this.toastChanged.next(toast);
+    };
+    /**
      * Creates empty toast with html string inside
     \@param {string | SafeHtml} html
-    \@param {SnotifyConfig} config
+    \@param {SnotifyToastConfig} config
     \@returns {number}
@@ -510,3 +499,3 @@ * @param {?} html
             body: null,
-            config: SnotifyService.mergeDeep(this.config, { type: SnotifyType.SIMPLE, html: html }, config),
+            config: __assign({}, config, { html: html })
         });
@@ -520,6 +509,114 @@ };
      */
-    SnotifyService.ctorParameters = function () { return []; };
+    SnotifyService.ctorParameters = function () { return [
+        { type: undefined, decorators: [{ type: Inject, args: ['SnotifyToastConfig',] },] },
+    ]; };
+    __decorate([
+        TransformArgument
+        /**
+         * Determines current toast type and collects default configuration
+         */
+        ,
+        SetToastType,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", SnotifyToast)
+    ], SnotifyService.prototype, "simple", null);
+    __decorate([
+        TransformArgument
+        /**
+         * Determines current toast type and collects default configuration
+         */
+        ,
+        SetToastType,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", SnotifyToast)
+    ], SnotifyService.prototype, "success", null);
+    __decorate([
+        TransformArgument
+        /**
+         * Determines current toast type and collects default configuration
+         */
+        ,
+        SetToastType,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", SnotifyToast)
+    ], SnotifyService.prototype, "error", null);
+    __decorate([
+        TransformArgument
+        /**
+         * Determines current toast type and collects default configuration
+         */
+        ,
+        SetToastType,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", SnotifyToast)
+    ], SnotifyService.prototype, "info", null);
+    __decorate([
+        TransformArgument
+        /**
+         * Determines current toast type and collects default configuration
+         */
+        ,
+        SetToastType,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", SnotifyToast)
+    ], SnotifyService.prototype, "warning", null);
+    __decorate([
+        TransformArgument
+        /**
+         * Determines current toast type and collects default configuration
+         */
+        ,
+        SetToastType,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", SnotifyToast)
+    ], SnotifyService.prototype, "confirm", null);
+    __decorate([
+        TransformArgument
+        /**
+         * Determines current toast type and collects default configuration
+         */
+        ,
+        SetToastType,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", SnotifyToast)
+    ], SnotifyService.prototype, "prompt", null);
+    __decorate([
+        TransformArgument
+        /**
+         * Determines current toast type and collects default configuration
+         */
+        ,
+        SetToastType,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", SnotifyToast)
+    ], SnotifyService.prototype, "async", null);
     return SnotifyService;
 }());
 
+/**
+ * Toast position
+ */
+var SnotifyPosition = /** @class */ (function () {
+    function SnotifyPosition() {
+    }
+    SnotifyPosition.leftTop = 'leftTop';
+    SnotifyPosition.leftCenter = 'leftCenter';
+    SnotifyPosition.leftBottom = 'leftBottom';
+    SnotifyPosition.rightTop = 'rightTop';
+    SnotifyPosition.rightCenter = 'rightCenter';
+    SnotifyPosition.rightBottom = 'rightBottom';
+    SnotifyPosition.centerTop = 'centerTop';
+    SnotifyPosition.centerCenter = 'centerCenter';
+    SnotifyPosition.centerBottom = 'centerBottom';
+    return SnotifyPosition;
+}());
+
 var SnotifyComponent = /** @class */ (function () {
@@ -531,2 +628,6 @@ /**
         this.service = service;
+        /**
+         * Backdrop Opacity
+         */
+        this.backdrop = -1;
     }
@@ -539,65 +640,53 @@ /**
         var _this = this;
-        this.setOptions(this.service.options);
-        this.optionsSubscription = this.service.optionsChanged.subscribe(function (options) {
-            _this.setOptions(options);
-        });
         this.emitter = this.service.emitter.subscribe(function (toasts) {
-            _this.notifications = _this.splitToasts(toasts.slice(_this.dockSize_a, _this.dockSize_b));
-            var /** @type {?} */ list = toasts.filter(function (toast) { return toast.config.backdrop >= 0; });
-            if (list.length) {
-                _this.backdrop = 0;
-                setTimeout(function () {
-                    _this.backdrop = list[list.length - 1].config.backdrop;
-                }, 10);
+            if (_this.service.config.global.newOnTop) {
+                _this.dockSize_a = -_this.service.config.global.maxOnScreen;
+                _this.dockSize_b = undefined;
+                _this.blockSize_a = -_this.service.config.global.maxAtPosition;
+                _this.blockSize_b = undefined;
+                _this.withBackdrop = toasts.filter(function (toast) { return toast.config.backdrop >= 0; });
             }
             else {
-                if (_this.backdrop > 0) {
-                    _this.backdrop = 0;
-                }
-                setTimeout(function () {
-                    _this.backdrop = -1;
-                }, 400);
+                _this.dockSize_a = 0;
+                _this.dockSize_b = _this.service.config.global.maxOnScreen;
+                _this.blockSize_a = 0;
+                _this.blockSize_b = _this.service.config.global.maxAtPosition;
+                _this.withBackdrop = toasts.filter(function (toast) { return toast.config.backdrop >= 0; }).reverse();
             }
+            _this.notifications = _this.splitToasts(toasts.slice(_this.dockSize_a, _this.dockSize_b));
+            _this.stateChanged('mounted');
         });
-        this.lifecycleSubscription = this.service.lifecycle.subscribe(function (info) {
-            switch (info.action) {
-                case SnotifyAction.onInit:
-                    if (_this.service.onInit) {
-                        _this.service.onInit(info.toast);
-                    }
-                    break;
-                case SnotifyAction.onClick:
-                    if (_this.service.onClick) {
-                        _this.service.onClick(info.toast);
-                    }
-                    break;
-                case SnotifyAction.onHoverEnter:
-                    if (_this.service.onHoverEnter) {
-                        _this.service.onHoverEnter(info.toast);
-                    }
-                    break;
-                case SnotifyAction.onHoverLeave:
-                    if (_this.service.onHoverLeave) {
-                        _this.service.onHoverLeave(info.toast);
-                    }
-                    break;
-                case SnotifyAction.beforeDestroy:
-                    if (_this.service.beforeDestroy) {
-                        _this.service.beforeDestroy(info.toast);
-                    }
-                    break;
-                case SnotifyAction.afterDestroy:
-                    if (_this.service.afterDestroy) {
-                        _this.service.afterDestroy(info.toast);
-                    }
-                    break;
-                case SnotifyAction.onInput:
-                    if (_this.service.onInput) {
-                        _this.service.onInput(info.toast, info.value);
-                    }
-                    break;
-            }
-        });
     };
     /**
+     * Changes the backdrop opacity
+    \@param {SnotifyEvent} event
+     * @param {?} event
+     * @return {?}
+     */
+    SnotifyComponent.prototype.stateChanged = function (event) {
+        if (!this.withBackdrop.length) {
+            return;
+        }
+        switch (event) {
+            case 'mounted':
+                if (this.backdrop < 0) {
+                    this.backdrop = 0;
+                }
+                break;
+            case 'beforeShow':
+                this.backdrop = this.withBackdrop[this.withBackdrop.length - 1].config.backdrop;
+                break;
+            case 'beforeHide':
+                if (this.withBackdrop.length === 1) {
+                    this.backdrop = 0;
+                }
+                break;
+            case 'hidden':
+                if (this.withBackdrop.length === 1) {
+                    this.backdrop = -1;
+                }
+                break;
+        }
+    };
+    /**
      * Split toasts toasts into different objects
@@ -622,22 +711,2 @@ \@param {SnotifyToast[]} toasts
     /**
-     * Setup global options object
-    \@param options {SnotifyOptions}
-     * @param {?} options
-     * @return {?}
-     */
-    SnotifyComponent.prototype.setOptions = function (options) {
-        if (this.service.options.newOnTop) {
-            this.dockSize_a = -options.maxOnScreen;
-            this.dockSize_b = undefined;
-            this.blockSize_a = -options.maxAtPosition;
-            this.blockSize_b = undefined;
-        }
-        else {
-            this.dockSize_a = 0;
-            this.dockSize_b = options.maxOnScreen;
-            this.blockSize_a = 0;
-            this.blockSize_b = options.maxAtPosition;
-        }
-    };
-    /**
      * Unsubscribe subscriptions
@@ -648,4 +717,2 @@ * @return {?}
         this.emitter.unsubscribe();
-        this.optionsSubscription.unsubscribe();
-        this.lifecycleSubscription.unsubscribe();
     };
@@ -655,3 +722,3 @@ SnotifyComponent.decorators = [
                     selector: 'ng-snotify',
-                    template: "<div class=\"snotify-backdrop\" *ngIf=\"backdrop >= 0\" [style.opacity]=\"backdrop\"></div> <div *ngFor=\"let position of notifications | keys\" class=\"snotify snotify-{{position}}\"> <ng-snotify-toast *ngFor=\"let notification of notifications[position] | slice:blockSize_a:blockSize_b\" [toast]=\"notification\"> </ng-snotify-toast> </div> ",
+                    template: "<div class=\"snotify-backdrop\" *ngIf=\"backdrop >= 0\" [style.opacity]=\"backdrop\"></div> <div *ngFor=\"let position of notifications | keys\" class=\"snotify snotify-{{position}}\"> <ng-snotify-toast *ngFor=\"let notification of notifications[position] | slice:blockSize_a:blockSize_b\" [toast]=\"notification\" (stateChanged)=\"stateChanged($event)\" > </ng-snotify-toast> </div> ",
                     encapsulation: ViewEncapsulation.None
@@ -672,7 +739,6 @@ },] },
      * @param {?} service
-     * @param {?} snotify
      */
-    function ToastComponent(service, snotify) {
+    function ToastComponent(service) {
         this.service = service;
-        this.snotify = snotify;
+        this.stateChanged = new EventEmitter();
         /**
@@ -683,11 +749,7 @@ * Toast state
         this.state = {
-            toast: {
-                type: '',
-                progress: 0,
-                animation: '',
-                time: 0,
-                isDestroying: false
-            },
-            promptType: SnotifyType.PROMPT,
-            prompt: ''
+            paused: false,
+            progress: 0,
+            animation: '',
+            isDestroying: false,
+            promptType: SnotifyStyle.prompt
         };
@@ -701,7 +763,5 @@ }
         var _this = this;
-        this.maxHeight = this.service.options.maxHeight;
-        this.initToast();
         this.toastChangedSubscription = this.service.toastChanged.subscribe(function (toast) {
             if (_this.toast.id === toast.id) {
-                _this.initToast(toast);
+                _this.initToast();
             }
@@ -714,8 +774,20 @@ });
         });
-        this.state.toast.type = /** @type {?} */ (this.toast.config.type);
-        this.state.toast.time = this.toast.config.animation.time;
-        this.state.toast.animation = this.toast.config.animation.enter;
-        this.lifecycle(SnotifyAction.onInit);
+        if (!this.toast.config.timeout) {
+            this.toast.config.showProgressBar = false;
+        }
+        this.toast.eventEmitter.next('mounted');
+        this.state.animation = 'snotifyToast--in';
     };
     /**
+     * @return {?}
+     */
+    ToastComponent.prototype.ngAfterContentInit = function () {
+        var _this = this;
+        setTimeout(function () {
+            _this.stateChanged.emit('beforeShow');
+            _this.toast.eventEmitter.next('beforeShow');
+            _this.state.animation = _this.toast.config.animation.enter;
+        }, this.service.config.toast.animation.time / 5); // time to show toast push animation (snotifyToast--in)
+    };
+    /**
      * Unsubscribe subscriptions
@@ -725,3 +797,4 @@ * @return {?}
     ToastComponent.prototype.ngOnDestroy = function () {
-        this.lifecycle(SnotifyAction.afterDestroy);
+        cancelAnimationFrame(this.animationFrame);
+        this.toast.eventEmitter.next('destroyed');
         this.toastChangedSubscription.unsubscribe();
@@ -735,3 +808,3 @@ this.toastDeletedSubscription.unsubscribe();
     ToastComponent.prototype.onClick = function () {
-        this.lifecycle(SnotifyAction.onClick);
+        this.toast.eventEmitter.next('click');
         if (this.toast.config.closeOnClick) {
@@ -746,7 +819,13 @@ this.service.remove(this.toast.id);
     ToastComponent.prototype.onRemove = function () {
-        this.state.toast.isDestroying = true;
-        clearInterval(this.interval);
-        this.state.toast.animation = this.toast.config.animation.exit;
-        this.maxHeight = 0;
-        this.lifecycle(SnotifyAction.beforeDestroy);
+        var _this = this;
+        this.state.isDestroying = true;
+        this.stateChanged.emit('beforeHide');
+        this.toast.eventEmitter.next('beforeHide');
+        this.state.animation = this.toast.config.animation.exit;
+        setTimeout(function () {
+            _this.stateChanged.emit('hidden');
+            _this.state.animation = 'snotifyToast--out';
+            _this.toast.eventEmitter.next('hidden');
+            setTimeout(function () { return _this.service.remove(_this.toast.id, true); }, _this.toast.config.animation.time / 2);
+        }, this.toast.config.animation.time / 2);
     };
@@ -758,5 +837,5 @@ /**
     ToastComponent.prototype.onMouseEnter = function () {
-        this.lifecycle(SnotifyAction.onHoverEnter);
+        this.toast.eventEmitter.next('mouseenter');
         if (this.toast.config.pauseOnHover) {
-            clearInterval(this.interval);
+            this.state.paused = true;
         }
@@ -769,17 +848,9 @@ };
     ToastComponent.prototype.onMouseLeave = function () {
-        if (this.toast.config.pauseOnHover && this.state.toast.type !== SnotifyType.PROMPT) {
-            this.startTimeout(this.state.toast.progress);
+        if (this.toast.config.pauseOnHover && this.toast.config.timeout) {
+            this.state.paused = false;
+            this.startTimeout(this.toast.config.timeout * this.state.progress);
         }
-        this.lifecycle(SnotifyAction.onHoverLeave);
+        this.toast.eventEmitter.next('mouseleave');
     };
     /**
-     * Prompt input value changed
-     * @param {?} value
-     * @return {?}
-     */
-    ToastComponent.prototype.onPromptChanged = function (value) {
-        this.state.prompt = value;
-        this.lifecycle(SnotifyAction.onInput, value);
-    };
-    /**
      * Remove toast completely after animation
@@ -789,67 +860,52 @@ * @return {?}
     ToastComponent.prototype.onExitTransitionEnd = function () {
-        if (this.state.toast.isDestroying) {
-            this.service.remove(this.toast.id, true);
+        if (this.state.isDestroying) {
+            return;
         }
+        this.initToast();
+        this.toast.eventEmitter.next('shown');
     };
     /**
      * Initialize base toast config
-    \@param toast {SnotifyToast}
-     * @param {?=} toast
      * @return {?}
      */
-    ToastComponent.prototype.initToast = function (toast) {
-        if (toast) {
-            if (this.toast.config.type !== toast.config.type) {
-                clearInterval(this.interval);
-            }
-            this.toast = toast;
-        }
+    ToastComponent.prototype.initToast = function () {
         if (this.toast.config.timeout > 0) {
             this.startTimeout(0);
         }
-        else {
-            this.toast.config.showProgressBar = false;
-            this.toast.config.pauseOnHover = false;
-        }
     };
     /**
      * Start progress bar
-    \@param currentProgress {Number}
-     * @param {?} currentProgress
+    \@param startTime {number}
+    \@default 0
+     * @param {?=} startTime
      * @return {?}
      */
-    ToastComponent.prototype.startTimeout = function (currentProgress) {
+    ToastComponent.prototype.startTimeout = function (startTime) {
         var _this = this;
-        var /** @type {?} */ refreshRate = 10;
-        if (this.state.toast.isDestroying) {
-            return;
-        }
-        this.state.toast.progress = currentProgress;
-        var /** @type {?} */ step = refreshRate / this.toast.config.timeout * 100;
-        this.interval = setInterval(function () {
-            _this.state.toast.progress += step;
-            if (_this.state.toast.progress >= 100) {
-                _this.service.remove(_this.toast.id);
-            }
-        }, refreshRate);
+        if (startTime === void 0) { startTime = 0; }
+        var /** @type {?} */ start = performance.now();
+        var /** @type {?} */ calculate = function () {
+            _this.animationFrame = requestAnimationFrame(function (timestamp) {
+                var /** @type {?} */ runtime = timestamp + startTime - start;
+                var /** @type {?} */ progress = Math.min(runtime / _this.toast.config.timeout, 1);
+                if (_this.state.paused) {
+                    cancelAnimationFrame(_this.animationFrame);
+                }
+                else if (runtime < _this.toast.config.timeout) {
+                    _this.state.progress = progress;
+                    calculate();
+                }
+                else {
+                    _this.state.progress = 1;
+                    cancelAnimationFrame(_this.animationFrame);
+                    _this.service.remove(_this.toast.id);
+                }
+            });
+        };
+        calculate();
     };
-    /**
-     * Lifecycle trigger
-    \@param action {SnotifyAction}
-    \@param promptValue {SnotifyAction}
-     * @param {?} action
-     * @param {?=} promptValue
-     * @return {?}
-     */
-    ToastComponent.prototype.lifecycle = function (action, promptValue) {
-        return this.service.lifecycle.next({
-            action: action,
-            toast: this.toast,
-            value: promptValue
-        });
-    };
     ToastComponent.decorators = [
         { type: Component, args: [{
                     selector: 'ng-snotify-toast',
-                    template: "<div class=\"snotifyToast animated\" [ngClass]=\"['snotify-' + toast.config.type, state.toast.animation]\" [ngStyle]=\"{ 'max-height': maxHeight + 'px', '-webkit-transition': state.toast.time + 300 + 'ms', transition: state.toast.time + 300 + 'ms', '-webkit-animation-duration': state.toast.time + 'ms', 'animation-duration': state.toast.time + 'ms' }\" (animationend)=\"onExitTransitionEnd()\" (click)=\"onClick()\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\" #toastEl> <div class=\"snotifyToast__progressBar\" *ngIf=\"toast.config.showProgressBar\"> <span class=\"snotifyToast__progressBar__percentage\" [ngStyle]=\"{'width': state.toast.progress + '%'}\"></span> </div> <div class=\"snotifyToast__inner\" *ngIf=\"!toast.config.html; else toastHTML\"> <div class=\"snotifyToast__title\" *ngIf=\"toast.title\">{{toast.title | truncate : toast.config.titleMaxLength}}</div> <div class=\"snotifyToast__body\">{{toast.body | truncate : toast.config.bodyMaxLength}}</div> <ng-snotify-prompt *ngIf=\"state.toast.type === state.promptType\" [placeholder]=\"toast.config.placeholder\" (valueChanged)=\"onPromptChanged($event)\"> </ng-snotify-prompt> <ng-snotify-icon *ngIf=\"!toast.config.icon; else elseBlock\" class=\"snotify-icon\" [type]=\"state.toast.type\"></ng-snotify-icon> <ng-template #elseBlock> <img class=\"snotify-icon\" [src]='toast.config.icon' /> </ng-template> </div> <ng-template #toastHTML> <div class=\"snotifyToast__inner\" [innerHTML]=\"toast.config.html\"></div> </ng-template> <ng-snotify-button *ngIf=\"toast.config.buttons\" [buttons]=\"toast.config.buttons\" [text]=\"state.toast.type === state.promptType ? state.prompt : null\" [id]=\"toast.id\"></ng-snotify-button> </div> ",
+                    template: "<div [ngClass]=\"[ 'snotifyToast animated', 'snotify-' + toast.config.type, state.animation, toast.valid === undefined ? '' : (toast.valid ? 'snotifyToast--valid' : 'snotifyToast--invalid') ]\" [ngStyle]=\"{ '-webkit-transition': toast.config.animation.time + 'ms', transition: toast.config.animation.time + 'ms', '-webkit-animation-duration': toast.config.animation.time + 'ms', 'animation-duration': toast.config.animation.time + 'ms' }\" (animationend)=\"onExitTransitionEnd()\" (click)=\"onClick()\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\"> <div class=\"snotifyToast__progressBar\" *ngIf=\"toast.config.showProgressBar\"> <span class=\"snotifyToast__progressBar__percentage\" [ngStyle]=\"{'width': (state.progress * 100) + '%'}\"></span> </div> <div class=\"snotifyToast__inner\" *ngIf=\"!toast.config.html; else toastHTML\"> <div class=\"snotifyToast__title\" *ngIf=\"toast.title\">{{toast.title | truncate : toast.config.titleMaxLength}}</div> <div class=\"snotifyToast__body\" *ngIf=\"toast.body\">{{toast.body | truncate : toast.config.bodyMaxLength}}</div> <ng-snotify-prompt *ngIf=\"toast.config.type === state.promptType\" [toast]=\"toast\"> </ng-snotify-prompt> <div *ngIf=\"!toast.config.icon; else elseBlock\" [ngClass]=\"['snotify-icon', 'snotify-icon--' + toast.config.type]\"></div> <ng-template #elseBlock> <img class=\"snotify-icon\" [src]='toast.config.icon' /> </ng-template> </div> <ng-template #toastHTML> <div class=\"snotifyToast__inner\" [innerHTML]=\"toast.config.html\"></div> </ng-template> <ng-snotify-button *ngIf=\"toast.config.buttons\" [toast]=\"toast\"></ng-snotify-button> </div> ",
                     encapsulation: ViewEncapsulation.None,
@@ -863,6 +919,6 @@ },] },
         { type: SnotifyService, },
-        { type: ElementRef, },
     ]; };
     ToastComponent.propDecorators = {
         'toast': [{ type: Input },],
+        'stateChanged': [{ type: Output },],
     };
@@ -873,25 +929,2 @@ return ToastComponent;
 /**
- * Icons component
- */
-var IconComponent = /** @class */ (function () {
-    function IconComponent() {
-    }
-    IconComponent.decorators = [
-        { type: Component, args: [{
-                    selector: 'ng-snotify-icon',
-                    template: "<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 512 512\" style=\"enable-background:new 0 0 48 48;\" xml:space=\"preserve\" width=\"48px\" height=\"48px\" [ngSwitch]=\"type\"> <g *ngSwitchCase=\"'warning'\" class=\"snotify-icon__warning\"> <path d=\"M256,512c141.15,0,256-114.84,256-256S397.15,0,256,0,0,114.84,0,256,114.85,512,256,512Zm0-480.49c123.79,0,224.49,100.71,224.49,224.49S379.79,480.49,256,480.49,31.51,379.79,31.51,256,132.21,31.51,256,31.51Z\"/><circle cx=\"260.08\" cy=\"343.87\" r=\"26.35\"/><path d=\"M254.68,278.39a15.76,15.76,0,0,0,15.75-15.75V128.72a15.75,15.75,0,1,0-31.51,0V262.63A15.76,15.76,0,0,0,254.68,278.39Z\"/> </g> <g *ngSwitchCase=\"'success'\" class=\"snotify-icon__success\"> <path d=\"M256,0C114.85,0,0,114.84,0,256S114.85,512,256,512,512,397.16,512,256,397.15,0,256,0Zm0,492.31c-130.29,0-236.31-106-236.31-236.31S125.71,19.69,256,19.69,492.31,125.71,492.31,256,386.29,492.31,256,492.31Z\"/><path class=\"cls-1\" d=\"M376.64,151,225.31,321.24l-91.17-72.93a9.85,9.85,0,0,0-12.3,15.38l98.46,78.77a9.86,9.86,0,0,0,13.52-1.15L391.36,164.08A9.85,9.85,0,0,0,376.64,151Z\"/> </g> <g *ngSwitchCase=\"'info'\" class=\"snotify-icon__info\"> <path d=\"M256,0C114.84,0,0,114.84,0,256S114.84,512,256,512,512,397.16,512,256,397.15,0,256,0Zm0,478.43C133.35,478.43,33.57,378.64,33.57,256S133.35,33.58,256,33.58,478.42,133.36,478.42,256,378.64,478.43,256,478.43Z\"/><path d=\"M251.26,161.24a22.39,22.39,0,1,0-22.38-22.39A22.39,22.39,0,0,0,251.26,161.24Z\"/><path d=\"M286.84,357.87h-14v-160A16.79,16.79,0,0,0,256,181.05H225.17a16.79,16.79,0,0,0,0,33.58h14.05V357.87H225.17a16.79,16.79,0,0,0,0,33.57h61.67a16.79,16.79,0,1,0,0-33.57Z\"/> </g> <g *ngSwitchCase=\"'error'\" class=\"snotify-icon__error\"> <path d=\"M437,75A256,256,0,1,0,75,437,256,256,0,1,0,437,75ZM416.43,416.43a226.82,226.82,0,0,1-320.86,0C7.11,328,7.11,184,95.57,95.57a226.82,226.82,0,0,1,320.86,0C504.89,184,504.89,328,416.43,416.43Z\"/><path d=\"M368.81,143.19a14.5,14.5,0,0,0-20.58,0L256,235.42l-92.23-92.23a14.55,14.55,0,0,0-20.58,20.58L235.42,256l-92.23,92.23a14.6,14.6,0,0,0,10.24,24.89,14.19,14.19,0,0,0,10.24-4.31l92.23-92.23,92.23,92.23a14.64,14.64,0,0,0,10.24,4.31,14,14,0,0,0,10.24-4.31,14.5,14.5,0,0,0,0-20.58l-92-92.23,92.23-92.23A14.5,14.5,0,0,0,368.81,143.19Z\"/> </g> <g *ngSwitchCase=\"'async'\" class=\"snotify-icon__async\"> <path d=\"M256,0a32,32,0,0,0-32,32V96a32,32,0,0,0,64,0V32A32,32,0,0,0,256,0Zm0,384a32,32,0,0,0-32,32v64a32,32,0,0,0,64,0V416A32,32,0,0,0,256,384ZM391.74,165.5,437,120.22A32,32,0,0,0,391.74,75L346.5,120.22a32,32,0,0,0,45.25,45.28Zm-271.52,181L75,391.74A32,32,0,0,0,120.22,437l45.25-45.25a32,32,0,0,0-45.25-45.25Zm0-271.52A32,32,0,1,0,75,120.22l45.25,45.28a32,32,0,1,0,45.25-45.28ZM391.74,346.5a32,32,0,0,0-45.25,45.25L391.74,437A32,32,0,0,0,437,391.74ZM480,224H416a32,32,0,0,0,0,64h64a32,32,0,0,0,0-64ZM128,256a32,32,0,0,0-32-32H32a32,32,0,0,0,0,64H96A32,32,0,0,0,128,256Z\"/> </g> </svg> ",
-                    encapsulation: ViewEncapsulation.None,
-                },] },
-    ];
-    /**
-     * @nocollapse
-     */
-    IconComponent.ctorParameters = function () { return []; };
-    IconComponent.propDecorators = {
-        'type': [{ type: Input },],
-    };
-    return IconComponent;
-}());
-
-/**
  * Truncate toast text pipe
@@ -936,8 +969,19 @@ */
 var ButtonsComponent = /** @class */ (function () {
-    function ButtonsComponent() {
+    /**
+     * @param {?} service
+     */
+    function ButtonsComponent(service) {
+        this.service = service;
     }
+    /**
+     * remove toast
+     * @return {?}
+     */
+    ButtonsComponent.prototype.remove = function () {
+        this.service.remove(this.toast.id);
+    };
     ButtonsComponent.decorators = [
         { type: Component, args: [{
                     selector: 'ng-snotify-button',
-                    template: "<div class=\"snotifyToast__buttons\"> <button type=\"button\" *ngFor=\"let button of buttons\" [ngClass]=\"{'snotifyToast__buttons--bold': button.bold}\" (click)=\"button.action && button.action(id, text)\"> {{button.text}} </button> </div> ",
+                    template: "<div class=\"snotifyToast__buttons\"> <button type=\"button\" *ngFor=\"let button of toast.config.buttons\" [ngClass]=\"{'snotifyToast__buttons--bold': button.bold}\" (click)=\"button.action ? button.action(toast) : remove()\"> {{button.text}} </button> </div> ",
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -950,7 +994,7 @@ encapsulation: ViewEncapsulation.None,
      */
-    ButtonsComponent.ctorParameters = function () { return []; };
+    ButtonsComponent.ctorParameters = function () { return [
+        { type: SnotifyService, },
+    ]; };
     ButtonsComponent.propDecorators = {
-        'buttons': [{ type: Input },],
-        'text': [{ type: Input },],
-        'id': [{ type: Input },],
+        'toast': [{ type: Input },],
     };
@@ -966,6 +1010,2 @@ return ButtonsComponent;
         /**
-         * Emmit prompt input value
-         */
-        this.valueChanged = new EventEmitter();
-        /**
          * Is PROMPT focused
@@ -975,16 +1015,7 @@ \@type {boolean}
         this.isPromptFocused = false;
-        this.id = SnotifyService.generateRandomId();
     }
-    /**
-     * Subscribe on input value change
-     * @return {?}
-     */
-    PromptComponent.prototype.ngOnInit = function () {
-        var _this = this;
-        this.valueChanged.subscribe(function (value) { return _this.length = value.length; });
-    };
     PromptComponent.decorators = [
         { type: Component, args: [{
                     selector: 'ng-snotify-prompt',
-                    template: "<span class=\"snotifyToast__input\" [ngClass]=\"{'snotifyToast__input--filled': isPromptFocused}\"> <input (input)=\"valueChanged.next($event.target.value);\" class=\"snotifyToast__input__field\" type=\"text\" [id]=\"id\" (focus)=\"isPromptFocused = true\" (blur)=\"isPromptFocused = !!length;\"/> <label class=\"snotifyToast__input__label\" [for]=\"id\"> <span class=\"snotifyToast__input__labelContent\">{{placeholder | truncate}}</span> </label> </span> ",
+                    template: "<span class=\"snotifyToast__input\" [ngClass]=\"{'snotifyToast__input--filled': isPromptFocused}\"> <input (input)=\"toast.value = $event.target.value; toast.eventEmitter.next('input')\" class=\"snotifyToast__input__field\" type=\"text\" [id]=\"toast.id\" (focus)=\"isPromptFocused = true\" (blur)=\"isPromptFocused = !!toast.value.length;\"/> <label class=\"snotifyToast__input__label\" [for]=\"toast.id\"> <span class=\"snotifyToast__input__labelContent\">{{toast.config.placeholder | truncate}}</span> </label> </span> ",
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -999,4 +1030,3 @@ encapsulation: ViewEncapsulation.None,
     PromptComponent.propDecorators = {
-        'placeholder': [{ type: Input },],
-        'valueChanged': [{ type: Output },],
+        'toast': [{ type: Input },],
     };
@@ -1037,2 +1067,72 @@ return PromptComponent;
 
+/**
+ * Snotify default configuration object
+\@type {SnotifyDefaults}
+ */
+var ToastDefaults = {
+    global: {
+        newOnTop: true,
+        maxOnScreen: 8,
+        maxAtPosition: 8
+    },
+    toast: {
+        type: SnotifyStyle.simple,
+        showProgressBar: true,
+        timeout: 2000,
+        closeOnClick: true,
+        pauseOnHover: true,
+        bodyMaxLength: 150,
+        titleMaxLength: 16,
+        backdrop: -1,
+        icon: null,
+        html: null,
+        position: SnotifyPosition.rightBottom,
+        animation: { enter: 'fadeIn', exit: 'fadeOut', time: 400 }
+    },
+    type: (_a = {},
+        _a[SnotifyStyle.prompt] = {
+            timeout: 0,
+            closeOnClick: false,
+            buttons: [
+                { text: 'Ok', action: null, bold: true },
+                { text: 'Cancel', action: null, bold: false },
+            ],
+            placeholder: 'Enter answer here...',
+            type: SnotifyStyle.prompt,
+        },
+        _a[SnotifyStyle.confirm] = {
+            timeout: 0,
+            closeOnClick: false,
+            buttons: [
+                { text: 'Ok', action: null, bold: true },
+                { text: 'Cancel', action: null, bold: false },
+            ],
+            type: SnotifyStyle.confirm,
+        },
+        _a[SnotifyStyle.simple] = {
+            type: SnotifyStyle.simple
+        },
+        _a[SnotifyStyle.success] = {
+            type: SnotifyStyle.success
+        },
+        _a[SnotifyStyle.error] = {
+            type: SnotifyStyle.error
+        },
+        _a[SnotifyStyle.warning] = {
+            type: SnotifyStyle.warning
+        },
+        _a[SnotifyStyle.info] = {
+            type: SnotifyStyle.info
+        },
+        _a[SnotifyStyle.async] = {
+            pauseOnHover: false,
+            closeOnClick: false,
+            timeout: 0,
+            showProgressBar: false,
+            type: SnotifyStyle.async
+        },
+        _a)
+};
+var _a;
+
 var SnotifyModule = /** @class */ (function () {
@@ -1056,3 +1156,3 @@ function SnotifyModule() {
                     declarations: [
-                        SnotifyComponent, ToastComponent, IconComponent, TruncatePipe,
+                        SnotifyComponent, ToastComponent, TruncatePipe,
                         ButtonsComponent, PromptComponent, KeysPipe
@@ -1072,2 +1172,2 @@ ],
 
-export { SnotifyModule, SnotifyComponent, SnotifyService, SnotifyAction, SnotifyPosition, SnotifyToast, ToastComponent, IconComponent, TruncatePipe, KeysPipe, ButtonsComponent, PromptComponent };
+export { SnotifyModule, SnotifyComponent, SnotifyService, SnotifyPosition, SnotifyToast, ToastComponent, TruncatePipe, KeysPipe, ButtonsComponent, PromptComponent, ToastDefaults };

ng-snotify.d.ts

@@ -5,1 +5,4 @@ /**
 export * from './index';
+export { SetToastType as ɵc } from './snotify/decorators/set-toast-type.decorator';
+export { TransformArgument as ɵb } from './snotify/decorators/transform-argument.decorator';
+export { SnotifyDefaults as ɵa } from './snotify/interfaces/SnotifyDefaults.interface';

ng-snotify.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":3,"metadata":{"SnotifyModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","name":"SnotifyComponent"},{"__symbolic":"reference","name":"ToastComponent"},{"__symbolic":"reference","name":"IconComponent"},{"__symbolic":"reference","name":"TruncatePipe"},{"__symbolic":"reference","name":"ButtonsComponent"},{"__symbolic":"reference","name":"PromptComponent"},{"__symbolic":"reference","name":"KeysPipe"}],"exports":[{"__symbolic":"reference","name":"SnotifyComponent"},{"__symbolic":"reference","name":"TruncatePipe"},{"__symbolic":"reference","name":"KeysPipe"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"SnotifyModule"},"providers":[{"__symbolic":"reference","name":"SnotifyService"}]}}}},"SnotifyComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng-snotify","template":"<div class=\"snotify-backdrop\" *ngIf=\"backdrop >= 0\" [style.opacity]=\"backdrop\"></div> <div *ngFor=\"let position of notifications | keys\" class=\"snotify snotify-{{position}}\"> <ng-snotify-toast *ngFor=\"let notification of notifications[position] | slice:blockSize_a:blockSize_b\" [toast]=\"notification\"> </ng-snotify-toast> </div> ","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"SnotifyService"}]}],"ngOnInit":[{"__symbolic":"method"}],"splitToasts":[{"__symbolic":"method"}],"setOptions":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"SnotifyService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"emit":[{"__symbolic":"method"}],"setConfig":[{"__symbolic":"method"}],"get":[{"__symbolic":"method"}],"getAll":[{"__symbolic":"method"}],"add":[{"__symbolic":"method"}],"remove":[{"__symbolic":"method"}],"clear":[{"__symbolic":"method"}],"create":[{"__symbolic":"method"}],"success":[{"__symbolic":"method"}],"error":[{"__symbolic":"method"}],"info":[{"__symbolic":"method"}],"warning":[{"__symbolic":"method"}],"simple":[{"__symbolic":"method"}],"confirm":[{"__symbolic":"method"}],"prompt":[{"__symbolic":"method"}],"async":[{"__symbolic":"method"}],"html":[{"__symbolic":"method"}]},"statics":{"generateRandomId":{"__symbolic":"function","parameters":[],"value":{"__symbolic":"binop","operator":"+","left":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"Math"},"member":"floor"},"arguments":[{"__symbolic":"binop","operator":"*","left":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"Math"},"member":"random"}},"right":{"__symbolic":"binop","operator":"-","left":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"Date"},"member":"now"}},"right":1}}]},"right":1}},"isObject":{"__symbolic":"function","parameters":["item"],"value":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"reference","name":"item"},"right":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"error","message":"Expression form not supported","line":53,"character":20,"module":"./snotify/snotify.service"},"right":"object"}},"right":{"__symbolic":"pre","operator":"!","operand":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"Array"},"member":"isArray"},"arguments":[{"__symbolic":"reference","name":"item"}]}}},"right":{"__symbolic":"binop","operator":"!==","left":{"__symbolic":"reference","name":"item"},"right":null}}}}},"Snotify":{"__symbolic":"interface"},"SnotifyButton":{"__symbolic":"interface"},"SnotifyConfig":{"__symbolic":"interface"},"SnotifyInfo":{"__symbolic":"interface"},"SnotifyOptions":{"__symbolic":"interface"},"SnotifyNotifications":{"__symbolic":"interface"},"SnotifyAction":{"onInit":3,"beforeDestroy":0,"afterDestroy":1,"onInput":9,"onClick":10,"onHoverEnter":11,"onHoverLeave":12},"SnotifyPosition":{"__symbolic":"class","members":{},"statics":{"left_top":"leftTop","left_center":"leftCenter","left_bottom":"leftBottom","right_top":"rightTop","right_center":"rightCenter","right_bottom":"rightBottom","center_top":"centerTop","center_center":"centerCenter","center_bottom":"centerBottom"}},"SnotifyToast":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"SnotifyConfig"}]}]}},"ToastComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng-snotify-toast","template":"<div class=\"snotifyToast animated\" [ngClass]=\"['snotify-' + toast.config.type, state.toast.animation]\" [ngStyle]=\"{ 'max-height': maxHeight + 'px', '-webkit-transition': state.toast.time + 300 + 'ms', transition: state.toast.time + 300 + 'ms', '-webkit-animation-duration': state.toast.time + 'ms', 'animation-duration': state.toast.time + 'ms' }\" (animationend)=\"onExitTransitionEnd()\" (click)=\"onClick()\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\" #toastEl> <div class=\"snotifyToast__progressBar\" *ngIf=\"toast.config.showProgressBar\"> <span class=\"snotifyToast__progressBar__percentage\" [ngStyle]=\"{'width': state.toast.progress + '%'}\"></span> </div> <div class=\"snotifyToast__inner\" *ngIf=\"!toast.config.html; else toastHTML\"> <div class=\"snotifyToast__title\" *ngIf=\"toast.title\">{{toast.title | truncate : toast.config.titleMaxLength}}</div> <div class=\"snotifyToast__body\">{{toast.body | truncate : toast.config.bodyMaxLength}}</div> <ng-snotify-prompt *ngIf=\"state.toast.type === state.promptType\" [placeholder]=\"toast.config.placeholder\" (valueChanged)=\"onPromptChanged($event)\"> </ng-snotify-prompt> <ng-snotify-icon *ngIf=\"!toast.config.icon; else elseBlock\" class=\"snotify-icon\" [type]=\"state.toast.type\"></ng-snotify-icon> <ng-template #elseBlock> <img class=\"snotify-icon\" [src]='toast.config.icon' /> </ng-template> </div> <ng-template #toastHTML> <div class=\"snotifyToast__inner\" [innerHTML]=\"toast.config.html\"></div> </ng-template> <ng-snotify-button *ngIf=\"toast.config.buttons\" [buttons]=\"toast.config.buttons\" [text]=\"state.toast.type === state.promptType ? state.prompt : null\" [id]=\"toast.id\"></ng-snotify-button> </div> ","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"toast":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"SnotifyService"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}],"onRemove":[{"__symbolic":"method"}],"onMouseEnter":[{"__symbolic":"method"}],"onMouseLeave":[{"__symbolic":"method"}],"onPromptChanged":[{"__symbolic":"method"}],"onExitTransitionEnd":[{"__symbolic":"method"}],"initToast":[{"__symbolic":"method"}],"startTimeout":[{"__symbolic":"method"}],"lifecycle":[{"__symbolic":"method"}]}},"IconComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng-snotify-icon","template":"<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 512 512\" style=\"enable-background:new 0 0 48 48;\" xml:space=\"preserve\" width=\"48px\" height=\"48px\" [ngSwitch]=\"type\"> <g *ngSwitchCase=\"'warning'\" class=\"snotify-icon__warning\"> <path d=\"M256,512c141.15,0,256-114.84,256-256S397.15,0,256,0,0,114.84,0,256,114.85,512,256,512Zm0-480.49c123.79,0,224.49,100.71,224.49,224.49S379.79,480.49,256,480.49,31.51,379.79,31.51,256,132.21,31.51,256,31.51Z\"/><circle cx=\"260.08\" cy=\"343.87\" r=\"26.35\"/><path d=\"M254.68,278.39a15.76,15.76,0,0,0,15.75-15.75V128.72a15.75,15.75,0,1,0-31.51,0V262.63A15.76,15.76,0,0,0,254.68,278.39Z\"/> </g> <g *ngSwitchCase=\"'success'\" class=\"snotify-icon__success\"> <path d=\"M256,0C114.85,0,0,114.84,0,256S114.85,512,256,512,512,397.16,512,256,397.15,0,256,0Zm0,492.31c-130.29,0-236.31-106-236.31-236.31S125.71,19.69,256,19.69,492.31,125.71,492.31,256,386.29,492.31,256,492.31Z\"/><path class=\"cls-1\" d=\"M376.64,151,225.31,321.24l-91.17-72.93a9.85,9.85,0,0,0-12.3,15.38l98.46,78.77a9.86,9.86,0,0,0,13.52-1.15L391.36,164.08A9.85,9.85,0,0,0,376.64,151Z\"/> </g> <g *ngSwitchCase=\"'info'\" class=\"snotify-icon__info\"> <path d=\"M256,0C114.84,0,0,114.84,0,256S114.84,512,256,512,512,397.16,512,256,397.15,0,256,0Zm0,478.43C133.35,478.43,33.57,378.64,33.57,256S133.35,33.58,256,33.58,478.42,133.36,478.42,256,378.64,478.43,256,478.43Z\"/><path d=\"M251.26,161.24a22.39,22.39,0,1,0-22.38-22.39A22.39,22.39,0,0,0,251.26,161.24Z\"/><path d=\"M286.84,357.87h-14v-160A16.79,16.79,0,0,0,256,181.05H225.17a16.79,16.79,0,0,0,0,33.58h14.05V357.87H225.17a16.79,16.79,0,0,0,0,33.57h61.67a16.79,16.79,0,1,0,0-33.57Z\"/> </g> <g *ngSwitchCase=\"'error'\" class=\"snotify-icon__error\"> <path d=\"M437,75A256,256,0,1,0,75,437,256,256,0,1,0,437,75ZM416.43,416.43a226.82,226.82,0,0,1-320.86,0C7.11,328,7.11,184,95.57,95.57a226.82,226.82,0,0,1,320.86,0C504.89,184,504.89,328,416.43,416.43Z\"/><path d=\"M368.81,143.19a14.5,14.5,0,0,0-20.58,0L256,235.42l-92.23-92.23a14.55,14.55,0,0,0-20.58,20.58L235.42,256l-92.23,92.23a14.6,14.6,0,0,0,10.24,24.89,14.19,14.19,0,0,0,10.24-4.31l92.23-92.23,92.23,92.23a14.64,14.64,0,0,0,10.24,4.31,14,14,0,0,0,10.24-4.31,14.5,14.5,0,0,0,0-20.58l-92-92.23,92.23-92.23A14.5,14.5,0,0,0,368.81,143.19Z\"/> </g> <g *ngSwitchCase=\"'async'\" class=\"snotify-icon__async\"> <path d=\"M256,0a32,32,0,0,0-32,32V96a32,32,0,0,0,64,0V32A32,32,0,0,0,256,0Zm0,384a32,32,0,0,0-32,32v64a32,32,0,0,0,64,0V416A32,32,0,0,0,256,384ZM391.74,165.5,437,120.22A32,32,0,0,0,391.74,75L346.5,120.22a32,32,0,0,0,45.25,45.28Zm-271.52,181L75,391.74A32,32,0,0,0,120.22,437l45.25-45.25a32,32,0,0,0-45.25-45.25Zm0-271.52A32,32,0,1,0,75,120.22l45.25,45.28a32,32,0,1,0,45.25-45.28ZM391.74,346.5a32,32,0,0,0-45.25,45.25L391.74,437A32,32,0,0,0,437,391.74ZM480,224H416a32,32,0,0,0,0,64h64a32,32,0,0,0,0-64ZM128,256a32,32,0,0,0-32-32H32a32,32,0,0,0,0,64H96A32,32,0,0,0,128,256Z\"/> </g> </svg> ","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor"}]}},"TruncatePipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe"},"arguments":[{"name":"truncate"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"KeysPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe"},"arguments":[{"name":"keys","pure":false}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ButtonsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng-snotify-button","template":"<div class=\"snotifyToast__buttons\"> <button type=\"button\" *ngFor=\"let button of buttons\" [ngClass]=\"{'snotifyToast__buttons--bold': button.bold}\" (click)=\"button.action && button.action(id, text)\"> {{button.text}} </button> </div> ","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"buttons":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"text":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor"}]}},"PromptComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng-snotify-prompt","template":"<span class=\"snotifyToast__input\" [ngClass]=\"{'snotifyToast__input--filled': isPromptFocused}\"> <input (input)=\"valueChanged.next($event.target.value);\" class=\"snotifyToast__input__field\" type=\"text\" [id]=\"id\" (focus)=\"isPromptFocused = true\" (blur)=\"isPromptFocused = !!length;\"/> <label class=\"snotifyToast__input__label\" [for]=\"id\"> <span class=\"snotifyToast__input__labelContent\">{{placeholder | truncate}}</span> </label> </span> ","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"valueChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}}},"origins":{"SnotifyModule":"./index","SnotifyComponent":"./snotify/snotify.component","SnotifyService":"./snotify/snotify.service","Snotify":"./snotify/interfaces/Snotify.interface","SnotifyButton":"./snotify/interfaces/SnotifyButton.interface","SnotifyConfig":"./snotify/interfaces/SnotifyConfig.interface","SnotifyInfo":"./snotify/interfaces/SnotifyInfo.interface","SnotifyOptions":"./snotify/interfaces/SnotifyOptions.interface","SnotifyNotifications":"./snotify/interfaces/SnotifyNotifications.interface","SnotifyAction":"./snotify/enum/SnotifyAction.enum","SnotifyPosition":"./snotify/enum/SnotifyPosition.enum","SnotifyToast":"./snotify/toast/snotify-toast.model","ToastComponent":"./snotify/toast/toast.component","IconComponent":"./snotify/toast/icon/icon.component","TruncatePipe":"./snotify/pipes/truncate.pipe","KeysPipe":"./snotify/pipes/keys.pipe","ButtonsComponent":"./snotify/toast/button/buttons.component","PromptComponent":"./snotify/toast/prompt/prompt.component"},"importAs":"ng-snotify"}
+{"__symbolic":"module","version":3,"metadata":{"SnotifyModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","name":"SnotifyComponent"},{"__symbolic":"reference","name":"ToastComponent"},{"__symbolic":"reference","name":"TruncatePipe"},{"__symbolic":"reference","name":"ButtonsComponent"},{"__symbolic":"reference","name":"PromptComponent"},{"__symbolic":"reference","name":"KeysPipe"}],"exports":[{"__symbolic":"reference","name":"SnotifyComponent"},{"__symbolic":"reference","name":"TruncatePipe"},{"__symbolic":"reference","name":"KeysPipe"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"SnotifyModule"},"providers":[{"__symbolic":"reference","name":"SnotifyService"}]}}}},"SnotifyComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng-snotify","template":"<div class=\"snotify-backdrop\" *ngIf=\"backdrop >= 0\" [style.opacity]=\"backdrop\"></div> <div *ngFor=\"let position of notifications | keys\" class=\"snotify snotify-{{position}}\"> <ng-snotify-toast *ngFor=\"let notification of notifications[position] | slice:blockSize_a:blockSize_b\" [toast]=\"notification\" (stateChanged)=\"stateChanged($event)\" > </ng-snotify-toast> </div> ","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"SnotifyService"}]}],"ngOnInit":[{"__symbolic":"method"}],"stateChanged":[{"__symbolic":"method"}],"splitToasts":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"SnotifyService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":["SnotifyToastConfig"]}]],"parameters":[{"__symbolic":"reference","name":"ɵa"}]}],"emit":[{"__symbolic":"method"}],"get":[{"__symbolic":"method"}],"add":[{"__symbolic":"method"}],"remove":[{"__symbolic":"method"}],"clear":[{"__symbolic":"method"}],"create":[{"__symbolic":"method"}],"setDefaults":[{"__symbolic":"method"}],"simple":[{"__symbolic":"method"},{"__symbolic":"method"},{"__symbolic":"method"},{"__symbolic":"method"},{"__symbolic":"method","decorators":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"}]}],"success":[{"__symbolic":"method"},{"__symbolic":"method"},{"__symbolic":"method"},{"__symbolic":"method"},{"__symbolic":"method","decorators":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"}]}],"error":[{"__symbolic":"method"},{"__symbolic":"method"},{"__symbolic":"method"},{"__symbolic":"method"},{"__symbolic":"method","decorators":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"}]}],"info":[{"__symbolic":"method"},{"__symbolic":"method"},{"__symbolic":"method"},{"__symbolic":"method"},{"__symbolic":"method","decorators":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"}]}],"warning":[{"__symbolic":"method"},{"__symbolic":"method"},{"__symbolic":"method"},{"__symbolic":"method"},{"__symbolic":"method","decorators":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"}]}],"confirm":[{"__symbolic":"method"},{"__symbolic":"method"},{"__symbolic":"method"},{"__symbolic":"method"},{"__symbolic":"method","decorators":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"}]}],"prompt":[{"__symbolic":"method"},{"__symbolic":"method"},{"__symbolic":"method"},{"__symbolic":"method"},{"__symbolic":"method","decorators":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"}]}],"async":[{"__symbolic":"method"},{"__symbolic":"method"},{"__symbolic":"method"},{"__symbolic":"method"},{"__symbolic":"method","decorators":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"}]}],"mergeToast":[{"__symbolic":"method"}],"html":[{"__symbolic":"method"}]}},"Snotify":{"__symbolic":"interface"},"SnotifyButton":{"__symbolic":"interface"},"SnotifyToastConfig":{"__symbolic":"interface"},"SnotifyNotifications":{"__symbolic":"interface"},"SnotifyPosition":{"__symbolic":"class","members":{},"statics":{"leftTop":"leftTop","leftCenter":"leftCenter","leftBottom":"leftBottom","rightTop":"rightTop","rightCenter":"rightCenter","rightBottom":"rightBottom","centerTop":"centerTop","centerCenter":"centerCenter","centerBottom":"centerBottom"}},"SnotifyToast":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"SnotifyToastConfig"}]}],"on":[{"__symbolic":"method"}]}},"ToastComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng-snotify-toast","template":"<div [ngClass]=\"[ 'snotifyToast animated', 'snotify-' + toast.config.type, state.animation, toast.valid === undefined ? '' : (toast.valid ? 'snotifyToast--valid' : 'snotifyToast--invalid') ]\" [ngStyle]=\"{ '-webkit-transition': toast.config.animation.time + 'ms', transition: toast.config.animation.time + 'ms', '-webkit-animation-duration': toast.config.animation.time + 'ms', 'animation-duration': toast.config.animation.time + 'ms' }\" (animationend)=\"onExitTransitionEnd()\" (click)=\"onClick()\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\"> <div class=\"snotifyToast__progressBar\" *ngIf=\"toast.config.showProgressBar\"> <span class=\"snotifyToast__progressBar__percentage\" [ngStyle]=\"{'width': (state.progress * 100) + '%'}\"></span> </div> <div class=\"snotifyToast__inner\" *ngIf=\"!toast.config.html; else toastHTML\"> <div class=\"snotifyToast__title\" *ngIf=\"toast.title\">{{toast.title | truncate : toast.config.titleMaxLength}}</div> <div class=\"snotifyToast__body\" *ngIf=\"toast.body\">{{toast.body | truncate : toast.config.bodyMaxLength}}</div> <ng-snotify-prompt *ngIf=\"toast.config.type === state.promptType\" [toast]=\"toast\"> </ng-snotify-prompt> <div *ngIf=\"!toast.config.icon; else elseBlock\" [ngClass]=\"['snotify-icon', 'snotify-icon--' + toast.config.type]\"></div> <ng-template #elseBlock> <img class=\"snotify-icon\" [src]='toast.config.icon' /> </ng-template> </div> <ng-template #toastHTML> <div class=\"snotifyToast__inner\" [innerHTML]=\"toast.config.html\"></div> </ng-template> <ng-snotify-button *ngIf=\"toast.config.buttons\" [toast]=\"toast\"></ng-snotify-button> </div> ","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"toast":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"stateChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"SnotifyService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}],"onRemove":[{"__symbolic":"method"}],"onMouseEnter":[{"__symbolic":"method"}],"onMouseLeave":[{"__symbolic":"method"}],"onExitTransitionEnd":[{"__symbolic":"method"}],"initToast":[{"__symbolic":"method"}],"startTimeout":[{"__symbolic":"method"}]}},"TruncatePipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe"},"arguments":[{"name":"truncate"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"KeysPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe"},"arguments":[{"name":"keys","pure":false}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ButtonsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng-snotify-button","template":"<div class=\"snotifyToast__buttons\"> <button type=\"button\" *ngFor=\"let button of toast.config.buttons\" [ngClass]=\"{'snotifyToast__buttons--bold': button.bold}\" (click)=\"button.action ? button.action(toast) : remove()\"> {{button.text}} </button> </div> ","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"toast":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"SnotifyService"}]}],"remove":[{"__symbolic":"method"}]}},"PromptComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng-snotify-prompt","template":"<span class=\"snotifyToast__input\" [ngClass]=\"{'snotifyToast__input--filled': isPromptFocused}\"> <input (input)=\"toast.value = $event.target.value; toast.eventEmitter.next('input')\" class=\"snotifyToast__input__field\" type=\"text\" [id]=\"toast.id\" (focus)=\"isPromptFocused = true\" (blur)=\"isPromptFocused = !!toast.value.length;\"/> <label class=\"snotifyToast__input__label\" [for]=\"toast.id\"> <span class=\"snotifyToast__input__labelContent\">{{toast.config.placeholder | truncate}}</span> </label> </span> ","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"toast":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}]}},"ToastDefaults":{"__symbolic":"error","message":"Expression form not supported","line":28,"character":4,"module":"./snotify/toastDefaults"},"ɵa":{"__symbolic":"interface"},"ɵb":{"__symbolic":"function"},"ɵc":{"__symbolic":"function","parameters":["target","propertyKey","descriptor"],"value":{"__symbolic":"error","message":"Function call not supported","line":13,"character":11,"module":"./snotify/decorators/set-toast-type.decorator"}}},"origins":{"SnotifyModule":"./index","SnotifyComponent":"./snotify/snotify.component","SnotifyService":"./snotify/snotify.service","Snotify":"./snotify/interfaces/Snotify.interface","SnotifyButton":"./snotify/interfaces/SnotifyButton.interface","SnotifyToastConfig":"./snotify/interfaces/SnotifyToastConfig.interface","SnotifyNotifications":"./snotify/interfaces/SnotifyNotifications.interface","SnotifyPosition":"./snotify/enums/SnotifyPosition.enum","SnotifyToast":"./snotify/toast/snotify-toast.model","ToastComponent":"./snotify/toast/toast.component","TruncatePipe":"./snotify/pipes/truncate.pipe","KeysPipe":"./snotify/pipes/keys.pipe","ButtonsComponent":"./snotify/toast/button/buttons.component","PromptComponent":"./snotify/toast/prompt/prompt.component","ToastDefaults":"./snotify/toastDefaults","ɵa":"./snotify/interfaces/SnotifyDefaults.interface","ɵb":"./snotify/decorators/transform-argument.decorator","ɵc":"./snotify/decorators/set-toast-type.decorator"},"importAs":"ng-snotify"}

ng-snotify.umd.js

@@ -5,5 +5,19 @@ (function (global, factory) {
 	(factory((global['ng-snotify'] = {}),global['@angular/core'],global['@angular/common'],global['rxjs/Subject'],global['rxjs/observable/PromiseObservable']));
-}(this, (function (exports,_angular_core,_angular_common,rxjs_Subject,rxjs_observable_PromiseObservable) { 'use strict';
+}(this, (function (exports,core,common,Subject,PromiseObservable) { 'use strict';
 
 /**
+ * Toast style.
+ */
+var SnotifyStyle = {
+    simple: 'simple',
+    success: 'success',
+    error: 'error',
+    warning: 'warning',
+    info: 'info',
+    async: 'async',
+    confirm: 'confirm',
+    prompt: 'prompt'
+};
+
+/**
  * Toast main model
@@ -16,5 +30,6 @@ */
      * @param {?} body
-     * @param {?=} config
+     * @param {?} config
      */
     function SnotifyToast(id, title, body, config) {
+        var _this = this;
         this.id = id;
@@ -24,3 +39,40 @@ this.title = title;
         this.config = config;
+        /**
+         * Emits {SnotifyEvent}
+        \@type {Subject<SnotifyEvent>}
+         */
+        this.eventEmitter = new Subject.Subject();
+        /**
+         * Holds all subscribers because we need to unsubscribe from all before toast get destroyed
+        \@type {Subscription[]}
+        \@private
+         */
+        this._eventsHolder = [];
+        if (this.config.type === SnotifyStyle.prompt) {
+            this.value = '';
+        }
+        this.on('hidden', function () {
+            _this._eventsHolder.forEach(function (subscription) {
+                subscription.unsubscribe();
+            });
+        });
     }
+    /**
+     * Subscribe to toast events
+    \@param {SnotifyEvent} event
+    \@param {(toast: SnotifyToast) => void} action
+    \@returns {this}
+     * @param {?} event
+     * @param {?} action
+     * @return {?}
+     */
+    SnotifyToast.prototype.on = function (event, action) {
+        var _this = this;
+        this._eventsHolder.push(this.eventEmitter.subscribe(function (e) {
+            if (e === event) {
+                action(_this);
+            }
+        }));
+        return this;
+    };
     return SnotifyToast;
@@ -30,136 +82,217 @@ }());
 /**
- * Toast position
+ * Transform arguments to Snotify object
+\@param target
+\@param {SnotifyType} propertyKey
+\@param {PropertyDescriptor} descriptor
+\@returns {Snotify}
+\@constructor
+ * @param {?} target
+ * @param {?} propertyKey
+ * @param {?} descriptor
+ * @return {?}
  */
-var SnotifyPosition = /** @class */ (function () {
-    function SnotifyPosition() {
+function TransformArgument(target, propertyKey, descriptor) {
+    if (propertyKey === SnotifyStyle.async) {
+        return {
+            value: function () {
+                var args = [];
+                for (var _i = 0; _i < arguments.length; _i++) {
+                    args[_i] = arguments[_i];
+                }
+                var /** @type {?} */ result;
+                if (args.length === 2) {
+                    result = {
+                        title: null,
+                        body: args[0],
+                        config: null,
+                        action: args[1]
+                    };
+                }
+                else if (args.length === 3) {
+                    if (typeof args[1] === 'string') {
+                        result = {
+                            title: args[1],
+                            body: args[0],
+                            config: null,
+                            action: args[2]
+                        };
+                    }
+                    else {
+                        result = {
+                            title: null,
+                            body: args[0],
+                            config: args[2],
+                            action: args[1]
+                        };
+                    }
+                }
+                else {
+                    result = {
+                        title: args[1],
+                        body: args[0],
+                        config: args[3],
+                        action: args[2]
+                    };
+                }
+                return descriptor.value.apply(this, [/** @type {?} */ (result)]);
+            }
+        };
     }
-    SnotifyPosition.left_top = 'leftTop';
-    SnotifyPosition.left_center = 'leftCenter';
-    SnotifyPosition.left_bottom = 'leftBottom';
-    SnotifyPosition.right_top = 'rightTop';
-    SnotifyPosition.right_center = 'rightCenter';
-    SnotifyPosition.right_bottom = 'rightBottom';
-    SnotifyPosition.center_top = 'centerTop';
-    SnotifyPosition.center_center = 'centerCenter';
-    SnotifyPosition.center_bottom = 'centerBottom';
-    return SnotifyPosition;
-}());
+    else {
+        return {
+            value: function () {
+                var args = [];
+                for (var _i = 0; _i < arguments.length; _i++) {
+                    args[_i] = arguments[_i];
+                }
+                var /** @type {?} */ result;
+                if (args.length === 1) {
+                    result = {
+                        title: null,
+                        body: args[0],
+                        config: null
+                    };
+                }
+                else if (args.length === 3) {
+                    result = {
+                        title: args[1],
+                        body: args[0],
+                        config: args[2]
+                    };
+                }
+                else {
+                    result = (_a = {
+                            title: null,
+                            config: null,
+                            body: args[0]
+                        },
+                        _a[typeof args[1] === 'string' ? 'title' : 'config'] = args[1],
+                        _a);
+                }
+                return descriptor.value.apply(this, [/** @type {?} */ (result)]);
+                var _a;
+            }
+        };
+    }
+}
 
-var SnotifyAction = {};
-SnotifyAction.onInit = 3;
-SnotifyAction.beforeDestroy = 0;
-SnotifyAction.afterDestroy = 1;
-SnotifyAction.onInput = 9;
-SnotifyAction.onClick = 10;
-SnotifyAction.onHoverEnter = 11;
-SnotifyAction.onHoverLeave = 12;
-SnotifyAction[SnotifyAction.onInit] = "onInit";
-SnotifyAction[SnotifyAction.beforeDestroy] = "beforeDestroy";
-SnotifyAction[SnotifyAction.afterDestroy] = "afterDestroy";
-SnotifyAction[SnotifyAction.onInput] = "onInput";
-SnotifyAction[SnotifyAction.onClick] = "onClick";
-SnotifyAction[SnotifyAction.onHoverEnter] = "onHoverEnter";
-SnotifyAction[SnotifyAction.onHoverLeave] = "onHoverLeave";
-
 /**
- * Toast type.
+ * Generates random id
+\@return {number}
+ * @return {?}
  */
-var SnotifyType = /** @class */ (function () {
-    function SnotifyType() {
+function uuid() {
+    return Math.floor(Math.random() * (Date.now() - 1)) + 1;
+}
+/**
+ * Simple is object check.
+\@param item {Object<any>}
+\@returns {boolean}
+ * @param {?} item
+ * @return {?}
+ */
+function isObject(item) {
+    return (item && typeof item === 'object' && !Array.isArray(item) && item !== null);
+}
+/**
+ * Deep merge objects.
+\@param sources {Array<Object<any>>}
+\@returns {Object<any>}
+ * @param {...?} sources
+ * @return {?}
+ */
+function mergeDeep() {
+    var sources = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        sources[_i] = arguments[_i];
     }
-    SnotifyType.SIMPLE = 'simple';
-    SnotifyType.SUCCESS = 'success';
-    SnotifyType.ERROR = 'error';
-    SnotifyType.WARNING = 'warning';
-    SnotifyType.INFO = 'info';
-    SnotifyType.ASYNC = 'async';
-    SnotifyType.CONFIRM = 'confirm';
-    SnotifyType.PROMPT = 'prompt';
-    return SnotifyType;
-}());
+    var /** @type {?} */ target = {};
+    if (!sources.length) {
+        return target;
+    }
+    while (sources.length > 0) {
+        var /** @type {?} */ source = sources.shift();
+        if (isObject(source)) {
+            for (var /** @type {?} */ key in source) {
+                if (isObject(source[key])) {
+                    target[key] = mergeDeep(target[key], source[key]);
+                }
+                else {
+                    Object.assign(target, (_a = {}, _a[key] = source[key], _a));
+                }
+            }
+        }
+    }
+    return target;
+    var _a;
+}
+/**
+ * @param {?} start
+ * @param {?} duration
+ * @param {?} callback
+ * @return {?}
+ */
 
+var __assign$1 = (undefined && undefined.__assign) || Object.assign || function(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+            t[p] = s[p];
+    }
+    return t;
+};
 /**
- * SnotifyService - create, remove, config toasts
+ * Defines toast style depending on method name
+\@param target
+\@param {SnotifyType} propertyKey
+\@param {PropertyDescriptor} descriptor
+\@returns {{value: ((...args: any[]) => any)}}
+\@constructor
+ * @param {?} target
+ * @param {?} propertyKey
+ * @param {?} descriptor
+ * @return {?}
  */
+function SetToastType(target, propertyKey, descriptor) {
+    return {
+        value: function () {
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            ((args[0])).config = __assign$1({}, ((args[0])).config, { type: propertyKey });
+            return descriptor.value.apply(this, args);
+        }
+    };
+}
+
+var __assign = (undefined && undefined.__assign) || Object.assign || function(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+            t[p] = s[p];
+    }
+    return t;
+};
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
 var SnotifyService = /** @class */ (function () {
     /**
-     * Constructor - initialize base configuration objects
+     * @param {?} config
      */
-    function SnotifyService() {
-        this.emitter = new rxjs_Subject.Subject();
-        this.lifecycle = new rxjs_Subject.Subject();
-        this.optionsChanged = new rxjs_Subject.Subject();
-        this.toastChanged = new rxjs_Subject.Subject();
-        this.toastDeleted = new rxjs_Subject.Subject();
+    function SnotifyService(config) {
+        this.config = config;
+        this.emitter = new Subject.Subject();
+        this.toastChanged = new Subject.Subject();
+        this.toastDeleted = new Subject.Subject();
         this.notifications = [];
-        this._defaultAnimationTime = 400;
-        this.config = {
-            showProgressBar: true,
-            timeout: 2000,
-            closeOnClick: true,
-            pauseOnHover: true,
-            bodyMaxLength: 150,
-            titleMaxLength: 16,
-            backdrop: -1,
-            animation: { enter: 'fadeInUp', exit: 'fadeOutRight', time: this._defaultAnimationTime }
-        };
-        this._options = {
-            newOnTop: true,
-            position: SnotifyPosition.right_bottom,
-            maxOnScreen: 8,
-            maxAtPosition: 8,
-            maxHeight: 300
-        };
     }
     /**
-     * Generates random id
-    \@return {number}
-     * @return {?}
-     */
-    SnotifyService.generateRandomId = function () {
-        return Math.floor(Math.random() * (Date.now() - 1)) + 1;
-    };
-    /**
-     * Simple is object check.
-    \@param item {Object<any>}
-    \@returns {boolean}
-     * @param {?} item
-     * @return {?}
-     */
-    SnotifyService.isObject = function (item) {
-        return (item && typeof item === 'object' && !Array.isArray(item) && item !== null);
-    };
-    /**
-     * Deep merge objects.
-    \@param sources {Array<Object>}
-    \@returns {Object<any>}
-     * @param {...?} sources
-     * @return {?}
-     */
-    SnotifyService.mergeDeep = function () {
-        var sources = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            sources[_i] = arguments[_i];
-        }
-        var /** @type {?} */ target = {};
-        if (!sources.length) {
-            return target;
-        }
-        while (sources.length > 0) {
-            var /** @type {?} */ source = sources.shift();
-            if (SnotifyService.isObject(source)) {
-                for (var /** @type {?} */ key in source) {
-                    if (SnotifyService.isObject(source[key])) {
-                        target[key] = SnotifyService.mergeDeep(target[key], source[key]);
-                    }
-                    else {
-                        Object.assign(target, (_a = {}, _a[key] = source[key], _a));
-                    }
-                }
-            }
-        }
-        return target;
-        var _a;
-    };
-    /**
      * emit changes in notifications array
@@ -169,57 +302,8 @@ * @return {?}
     SnotifyService.prototype.emit = function () {
-        this.emitter.next(this.getAll());
+        this.emitter.next(this.notifications.slice());
     };
     /**
-     * Set global config
-    \@param config {SnotifyConfig}
-    \@param options {SnotifyOptions}
-     * @param {?} config
-     * @param {?=} options
-     * @return {?}
-     */
-    SnotifyService.prototype.setConfig = function (config, options) {
-        var _this = this;
-        this._options = SnotifyService.mergeDeep(this._options, options);
-        this.config = SnotifyService.mergeDeep(this.config, {
-            animation: (function (position) {
-                switch (position) {
-                    case SnotifyPosition.left_top:
-                        return { enter: 'fadeInLeft', exit: 'fadeOutLeft', time: _this._defaultAnimationTime };
-                    case SnotifyPosition.left_center:
-                        return { enter: 'fadeInLeft', exit: 'fadeOutLeft', time: _this._defaultAnimationTime };
-                    case SnotifyPosition.left_bottom:
-                        return { enter: 'fadeInLeft', exit: 'fadeOutLeft', time: _this._defaultAnimationTime };
-                    case SnotifyPosition.right_top:
-                        return { enter: 'fadeInRight', exit: 'fadeOutRight', time: _this._defaultAnimationTime };
-                    case SnotifyPosition.right_center:
-                        return { enter: 'fadeInRight', exit: 'fadeOutRight', time: _this._defaultAnimationTime };
-                    case SnotifyPosition.right_bottom:
-                        return { enter: 'fadeInRight', exit: 'fadeOutRight', time: _this._defaultAnimationTime };
-                    case SnotifyPosition.center_top:
-                        return { enter: 'fadeInDown', exit: 'fadeOutUp', time: _this._defaultAnimationTime };
-                    case SnotifyPosition.center_center:
-                        return { enter: 'fadeIn', exit: 'fadeOut', time: _this._defaultAnimationTime };
-                    case SnotifyPosition.center_bottom:
-                        return { enter: 'fadeInUp', exit: 'fadeOutDown', time: _this._defaultAnimationTime };
-                }
-            })(this._options.position)
-        }, config);
-        this.optionsChanged.next(this._options);
-    };
-    Object.defineProperty(SnotifyService.prototype, "options", {
-        /**
-         * get SnotifyOptions
-        \@return {SnotifyOptions}
-         * @return {?}
-         */
-        get: function () {
-            return this._options;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    /**
      * returns SnotifyToast object
     \@param id {Number}
-    \@return {undefined|SnotifyToast}
+    \@return {SnotifyToast|undefined}
      * @param {?} id
@@ -232,10 +316,2 @@ * @return {?}
     /**
-     * returns copy of notifications array
-    \@return {SnotifyToast[]}
-     * @return {?}
-     */
-    SnotifyService.prototype.getAll = function () {
-        return this.notifications.slice();
-    };
-    /**
      * add SnotifyToast to notifications array
@@ -247,4 +323,3 @@ \@param toast {SnotifyToast}
     SnotifyService.prototype.add = function (toast) {
-        toast.config.position = toast.config.position || this.options.position;
-        if (this._options.newOnTop) {
+        if (this.config.global.newOnTop) {
             this.notifications.unshift(toast);
@@ -259,4 +334,4 @@ }
      * If ID passed, emits toast animation remove, if ID & REMOVE passed, removes toast from notifications array
-    \@param id {Number}
-    \@param remove {Boolean}
+    \@param id {number}
+    \@param remove {boolean}
      * @param {?=} id
@@ -292,212 +367,126 @@ * @param {?=} remove
     SnotifyService.prototype.create = function (snotify) {
-        var /** @type {?} */ id = SnotifyService.generateRandomId();
-        this.add(new SnotifyToast(id, snotify.title, snotify.body, snotify.config || null));
-        return id;
+        var /** @type {?} */ config = mergeDeep(this.config.toast, this.config.type[snotify.config.type], snotify.config);
+        var /** @type {?} */ toast = new SnotifyToast(uuid(), snotify.title, snotify.body, config);
+        this.add(toast);
+        return toast;
     };
     /**
-     * Create toast with Success style, returns toast id;
-    \@param body {String}
-    \@param title {String}
-    \@param config {SnotifyConfig}
-    \@return {number}
-     * @param {?} body
-     * @param {?=} title
-     * @param {?=} config
+     * @param {?} defaults
      * @return {?}
      */
-    SnotifyService.prototype.success = function (body, title, config) {
-        return this.create({
-            title: title,
-            body: body,
-            config: SnotifyService.mergeDeep(this.config, { type: SnotifyType.SUCCESS }, config)
-        });
+    SnotifyService.prototype.setDefaults = function (defaults) {
+        return this.config = /** @type {?} */ (mergeDeep(this.config, defaults));
     };
     /**
-     * Create toast with Error style, returns toast id;
-    \@param body {String}
-    \@param title {String}
-    \@param config {SnotifyConfig}
-    \@return {number}
-     * @param {?} body
-     * @param {?=} title
-     * @param {?=} config
+     * Transform toast arguments into {Snotify} object
+     * @param {?} args
      * @return {?}
      */
-    SnotifyService.prototype.error = function (body, title, config) {
-        return this.create({
-            title: title,
-            body: body,
-            config: SnotifyService.mergeDeep(this.config, { type: SnotifyType.ERROR }, config)
-        });
+    SnotifyService.prototype.simple = function (args) {
+        return this.create(args);
     };
     /**
-     * Create toast with Info style, returns toast id;
-    \@param body {String}
-    \@param title {String}
-    \@param config {SnotifyConfig}
-    \@return {number}
-     * @param {?} body
-     * @param {?=} title
-     * @param {?=} config
+     * Transform toast arguments into {Snotify} object
+     * @param {?} args
      * @return {?}
      */
-    SnotifyService.prototype.info = function (body, title, config) {
-        return this.create({
-            title: title,
-            body: body,
-            config: SnotifyService.mergeDeep(this.config, { type: SnotifyType.INFO }, config)
-        });
+    SnotifyService.prototype.success = function (args) {
+        return this.create(args);
     };
     /**
-     * Create toast with Warining style, returns toast id;
-    \@param body {String}
-    \@param title {String}
-    \@param config {SnotifyConfig}
-    \@return {number}
-     * @param {?} body
-     * @param {?=} title
-     * @param {?=} config
+     * Transform toast arguments into {Snotify} object
+     * @param {?} args
      * @return {?}
      */
-    SnotifyService.prototype.warning = function (body, title, config) {
-        return this.create({
-            title: title,
-            body: body,
-            config: SnotifyService.mergeDeep(this.config, { type: SnotifyType.WARNING }, config)
-        });
+    SnotifyService.prototype.error = function (args) {
+        return this.create(args);
     };
     /**
-     * Create toast without style, returns toast id;
-    \@param body {String}
-    \@param title {String}
-    \@param config {SnotifyConfig}
-    \@return {number}
-     * @param {?} body
-     * @param {?=} title
-     * @param {?=} config
+     * Transform toast arguments into {Snotify} object
+     * @param {?} args
      * @return {?}
      */
-    SnotifyService.prototype.simple = function (body, title, config) {
-        return this.create({
-            title: title,
-            body: body,
-            config: SnotifyService.mergeDeep(this.config, { type: SnotifyType.SIMPLE }, config)
-        });
+    SnotifyService.prototype.info = function (args) {
+        return this.create(args);
     };
     /**
-     * Create toast with Confirm style {with two buttons}, returns toast id;
-    \@param body {String}
-    \@param title {String}
-    \@param config {SnotifyConfig}
-    \@return {number}
-     * @param {?} body
-     * @param {?} title
-     * @param {?=} config
+     * Transform toast arguments into {Snotify} object
+     * @param {?} args
      * @return {?}
      */
-    SnotifyService.prototype.confirm = function (body, title, config) {
-        var _this = this;
-        var /** @type {?} */ id = this.create({
-            title: title,
-            body: body,
-            config: SnotifyService.mergeDeep(this.config, {
-                buttons: [
-                    { text: 'Ok', action: null, bold: true },
-                    { text: 'Cancel', action: function () { return _this.remove(id); }, bold: false },
-                ]
-            }, config, {
-                type: SnotifyType.CONFIRM,
-                closeOnClick: false,
-            })
-        });
-        return id;
+    SnotifyService.prototype.warning = function (args) {
+        return this.create(args);
     };
     /**
-     * Create toast with Prompt style {with two buttons}, returns toast id;
-    \@param body {String}
-    \@param title {String}
-    \@param config {SnotifyConfig}
-    \@return {number}
-     * @param {?} body
-     * @param {?=} title
-     * @param {?=} config
+     * Transform toast arguments into {Snotify} object
+     * @param {?} args
      * @return {?}
      */
-    SnotifyService.prototype.prompt = function (body, title, config) {
-        var _this = this;
-        var /** @type {?} */ id = this.create({
-            title: title,
-            body: body,
-            config: SnotifyService.mergeDeep(this.config, {
-                buttons: [
-                    { text: 'Ok', action: null, bold: true },
-                    { text: 'Cancel', action: function () { return _this.remove(id); }, bold: false },
-                ],
-                placeholder: 'Enter answer here...',
-            }, config, {
-                timeout: 0,
-                closeOnClick: false,
-                type: SnotifyType.PROMPT,
-            })
-        });
-        return id;
+    SnotifyService.prototype.confirm = function (args) {
+        return this.create(args);
     };
     /**
-     * Creates async toast with Info style. Pass action, and resolve or reject it.
-    \@param body {String}
-    \@param title {String}
-    \@param action {Promise<SnotifyConfig> | Observable<SnotifyConfig>}
-    \@return {number}
-     * @param {?} body
-     * @param {?} title
-     * @param {?} action
+     * Transform toast arguments into {Snotify} object
+     * @param {?} args
      * @return {?}
      */
-    SnotifyService.prototype.async = function (body, title, action) {
+    SnotifyService.prototype.prompt = function (args) {
+        return this.create(args);
+    };
+    /**
+     * Transform toast arguments into {Snotify} object
+     * @param {?} args
+     * @return {?}
+     */
+    SnotifyService.prototype.async = function (args) {
         var _this = this;
         var /** @type {?} */ async;
-        if (action instanceof Promise) {
-            async = rxjs_observable_PromiseObservable.PromiseObservable.create(action);
+        if (args.action instanceof Promise) {
+            async = PromiseObservable.PromiseObservable.create(args.action);
         }
         else {
-            async = action;
+            async = args.action;
         }
-        var /** @type {?} */ id = this.simple(body, title, {
-            pauseOnHover: false,
-            closeOnClick: false,
-            timeout: 0,
-            showProgressBar: false,
-            type: SnotifyType.ASYNC
+        var /** @type {?} */ toast = this.create(args);
+        toast.on('mounted', function () {
+            var /** @type {?} */ subscription = async.subscribe(function (next) {
+                _this.mergeToast(toast, next);
+            }, function (error) {
+                _this.mergeToast(toast, error, SnotifyStyle.error);
+                subscription.unsubscribe();
+            }, function () {
+                _this.mergeToast(toast, {}, SnotifyStyle.success);
+                subscription.unsubscribe();
+            });
         });
-        var /** @type {?} */ toast = this.get(id);
-        var /** @type {?} */ latestToast = Object.assign({}, toast);
-        var /** @type {?} */ updateToast = function (type, data) {
-            if (!data) {
-                latestToast = /** @type {?} */ (SnotifyService.mergeDeep(toast, latestToast, { config: { type: type } }));
-            }
-            else {
-                latestToast = /** @type {?} */ (SnotifyService.mergeDeep(toast, data, { config: { type: type } }));
-            }
-            _this.toastChanged.next(latestToast);
-        };
-        var /** @type {?} */ lifecycleSubscription = this.lifecycle.subscribe(function (info) {
-            if (info.action === SnotifyAction.onInit && info.toast.id === id) {
-                var /** @type {?} */ subscription_1 = async.subscribe(function (next) {
-                    updateToast(SnotifyType.ASYNC, next);
-                }, function (error) {
-                    updateToast(SnotifyType.ERROR, error);
-                    subscription_1.unsubscribe();
-                }, function () {
-                    updateToast(SnotifyType.SUCCESS);
-                    subscription_1.unsubscribe();
-                    lifecycleSubscription.unsubscribe();
-                });
-            }
-        });
-        return id;
+        return toast;
     };
     /**
+     * @param {?} toast
+     * @param {?} next
+     * @param {?=} type
+     * @return {?}
+     */
+    SnotifyService.prototype.mergeToast = function (toast, next, type) {
+        if (next.body) {
+            toast.body = next.body;
+        }
+        if (next.title) {
+            toast.title = next.title;
+        }
+        if (type) {
+            toast.config = mergeDeep(toast.config, this.config.global, this.config.toast[type], { type: type }, next.config);
+        }
+        else {
+            toast.config = mergeDeep(toast.config, next.config);
+        }
+        if (next.html) {
+            toast.config.html = next.html;
+        }
+        this.toastChanged.next(toast);
+    };
+    /**
      * Creates empty toast with html string inside
     \@param {string | SafeHtml} html
-    \@param {SnotifyConfig} config
+    \@param {SnotifyToastConfig} config
     \@returns {number}
@@ -512,7 +501,7 @@ * @param {?} html
             body: null,
-            config: SnotifyService.mergeDeep(this.config, { type: SnotifyType.SIMPLE, html: html }, config),
+            config: __assign({}, config, { html: html })
         });
     };
     SnotifyService.decorators = [
-        { type: _angular_core.Injectable },
+        { type: core.Injectable },
     ];
@@ -522,6 +511,114 @@ /**
      */
-    SnotifyService.ctorParameters = function () { return []; };
+    SnotifyService.ctorParameters = function () { return [
+        { type: undefined, decorators: [{ type: core.Inject, args: ['SnotifyToastConfig',] },] },
+    ]; };
+    __decorate([
+        TransformArgument
+        /**
+         * Determines current toast type and collects default configuration
+         */
+        ,
+        SetToastType,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", SnotifyToast)
+    ], SnotifyService.prototype, "simple", null);
+    __decorate([
+        TransformArgument
+        /**
+         * Determines current toast type and collects default configuration
+         */
+        ,
+        SetToastType,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", SnotifyToast)
+    ], SnotifyService.prototype, "success", null);
+    __decorate([
+        TransformArgument
+        /**
+         * Determines current toast type and collects default configuration
+         */
+        ,
+        SetToastType,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", SnotifyToast)
+    ], SnotifyService.prototype, "error", null);
+    __decorate([
+        TransformArgument
+        /**
+         * Determines current toast type and collects default configuration
+         */
+        ,
+        SetToastType,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", SnotifyToast)
+    ], SnotifyService.prototype, "info", null);
+    __decorate([
+        TransformArgument
+        /**
+         * Determines current toast type and collects default configuration
+         */
+        ,
+        SetToastType,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", SnotifyToast)
+    ], SnotifyService.prototype, "warning", null);
+    __decorate([
+        TransformArgument
+        /**
+         * Determines current toast type and collects default configuration
+         */
+        ,
+        SetToastType,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", SnotifyToast)
+    ], SnotifyService.prototype, "confirm", null);
+    __decorate([
+        TransformArgument
+        /**
+         * Determines current toast type and collects default configuration
+         */
+        ,
+        SetToastType,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", SnotifyToast)
+    ], SnotifyService.prototype, "prompt", null);
+    __decorate([
+        TransformArgument
+        /**
+         * Determines current toast type and collects default configuration
+         */
+        ,
+        SetToastType,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", SnotifyToast)
+    ], SnotifyService.prototype, "async", null);
     return SnotifyService;
 }());
 
+/**
+ * Toast position
+ */
+var SnotifyPosition = /** @class */ (function () {
+    function SnotifyPosition() {
+    }
+    SnotifyPosition.leftTop = 'leftTop';
+    SnotifyPosition.leftCenter = 'leftCenter';
+    SnotifyPosition.leftBottom = 'leftBottom';
+    SnotifyPosition.rightTop = 'rightTop';
+    SnotifyPosition.rightCenter = 'rightCenter';
+    SnotifyPosition.rightBottom = 'rightBottom';
+    SnotifyPosition.centerTop = 'centerTop';
+    SnotifyPosition.centerCenter = 'centerCenter';
+    SnotifyPosition.centerBottom = 'centerBottom';
+    return SnotifyPosition;
+}());
+
 var SnotifyComponent = /** @class */ (function () {
@@ -533,2 +630,6 @@ /**
         this.service = service;
+        /**
+         * Backdrop Opacity
+         */
+        this.backdrop = -1;
     }
@@ -541,65 +642,53 @@ /**
         var _this = this;
-        this.setOptions(this.service.options);
-        this.optionsSubscription = this.service.optionsChanged.subscribe(function (options) {
-            _this.setOptions(options);
-        });
         this.emitter = this.service.emitter.subscribe(function (toasts) {
-            _this.notifications = _this.splitToasts(toasts.slice(_this.dockSize_a, _this.dockSize_b));
-            var /** @type {?} */ list = toasts.filter(function (toast) { return toast.config.backdrop >= 0; });
-            if (list.length) {
-                _this.backdrop = 0;
-                setTimeout(function () {
-                    _this.backdrop = list[list.length - 1].config.backdrop;
-                }, 10);
+            if (_this.service.config.global.newOnTop) {
+                _this.dockSize_a = -_this.service.config.global.maxOnScreen;
+                _this.dockSize_b = undefined;
+                _this.blockSize_a = -_this.service.config.global.maxAtPosition;
+                _this.blockSize_b = undefined;
+                _this.withBackdrop = toasts.filter(function (toast) { return toast.config.backdrop >= 0; });
             }
             else {
-                if (_this.backdrop > 0) {
-                    _this.backdrop = 0;
-                }
-                setTimeout(function () {
-                    _this.backdrop = -1;
-                }, 400);
+                _this.dockSize_a = 0;
+                _this.dockSize_b = _this.service.config.global.maxOnScreen;
+                _this.blockSize_a = 0;
+                _this.blockSize_b = _this.service.config.global.maxAtPosition;
+                _this.withBackdrop = toasts.filter(function (toast) { return toast.config.backdrop >= 0; }).reverse();
             }
+            _this.notifications = _this.splitToasts(toasts.slice(_this.dockSize_a, _this.dockSize_b));
+            _this.stateChanged('mounted');
         });
-        this.lifecycleSubscription = this.service.lifecycle.subscribe(function (info) {
-            switch (info.action) {
-                case SnotifyAction.onInit:
-                    if (_this.service.onInit) {
-                        _this.service.onInit(info.toast);
-                    }
-                    break;
-                case SnotifyAction.onClick:
-                    if (_this.service.onClick) {
-                        _this.service.onClick(info.toast);
-                    }
-                    break;
-                case SnotifyAction.onHoverEnter:
-                    if (_this.service.onHoverEnter) {
-                        _this.service.onHoverEnter(info.toast);
-                    }
-                    break;
-                case SnotifyAction.onHoverLeave:
-                    if (_this.service.onHoverLeave) {
-                        _this.service.onHoverLeave(info.toast);
-                    }
-                    break;
-                case SnotifyAction.beforeDestroy:
-                    if (_this.service.beforeDestroy) {
-                        _this.service.beforeDestroy(info.toast);
-                    }
-                    break;
-                case SnotifyAction.afterDestroy:
-                    if (_this.service.afterDestroy) {
-                        _this.service.afterDestroy(info.toast);
-                    }
-                    break;
-                case SnotifyAction.onInput:
-                    if (_this.service.onInput) {
-                        _this.service.onInput(info.toast, info.value);
-                    }
-                    break;
-            }
-        });
     };
     /**
+     * Changes the backdrop opacity
+    \@param {SnotifyEvent} event
+     * @param {?} event
+     * @return {?}
+     */
+    SnotifyComponent.prototype.stateChanged = function (event) {
+        if (!this.withBackdrop.length) {
+            return;
+        }
+        switch (event) {
+            case 'mounted':
+                if (this.backdrop < 0) {
+                    this.backdrop = 0;
+                }
+                break;
+            case 'beforeShow':
+                this.backdrop = this.withBackdrop[this.withBackdrop.length - 1].config.backdrop;
+                break;
+            case 'beforeHide':
+                if (this.withBackdrop.length === 1) {
+                    this.backdrop = 0;
+                }
+                break;
+            case 'hidden':
+                if (this.withBackdrop.length === 1) {
+                    this.backdrop = -1;
+                }
+                break;
+        }
+    };
+    /**
      * Split toasts toasts into different objects
@@ -624,22 +713,2 @@ \@param {SnotifyToast[]} toasts
     /**
-     * Setup global options object
-    \@param options {SnotifyOptions}
-     * @param {?} options
-     * @return {?}
-     */
-    SnotifyComponent.prototype.setOptions = function (options) {
-        if (this.service.options.newOnTop) {
-            this.dockSize_a = -options.maxOnScreen;
-            this.dockSize_b = undefined;
-            this.blockSize_a = -options.maxAtPosition;
-            this.blockSize_b = undefined;
-        }
-        else {
-            this.dockSize_a = 0;
-            this.dockSize_b = options.maxOnScreen;
-            this.blockSize_a = 0;
-            this.blockSize_b = options.maxAtPosition;
-        }
-    };
-    /**
      * Unsubscribe subscriptions
@@ -650,10 +719,8 @@ * @return {?}
         this.emitter.unsubscribe();
-        this.optionsSubscription.unsubscribe();
-        this.lifecycleSubscription.unsubscribe();
     };
     SnotifyComponent.decorators = [
-        { type: _angular_core.Component, args: [{
+        { type: core.Component, args: [{
                     selector: 'ng-snotify',
-                    template: "<div class=\"snotify-backdrop\" *ngIf=\"backdrop >= 0\" [style.opacity]=\"backdrop\"></div> <div *ngFor=\"let position of notifications | keys\" class=\"snotify snotify-{{position}}\"> <ng-snotify-toast *ngFor=\"let notification of notifications[position] | slice:blockSize_a:blockSize_b\" [toast]=\"notification\"> </ng-snotify-toast> </div> ",
-                    encapsulation: _angular_core.ViewEncapsulation.None
+                    template: "<div class=\"snotify-backdrop\" *ngIf=\"backdrop >= 0\" [style.opacity]=\"backdrop\"></div> <div *ngFor=\"let position of notifications | keys\" class=\"snotify snotify-{{position}}\"> <ng-snotify-toast *ngFor=\"let notification of notifications[position] | slice:blockSize_a:blockSize_b\" [toast]=\"notification\" (stateChanged)=\"stateChanged($event)\" > </ng-snotify-toast> </div> ",
+                    encapsulation: core.ViewEncapsulation.None
                 },] },
@@ -673,7 +740,6 @@ ];
      * @param {?} service
-     * @param {?} snotify
      */
-    function ToastComponent(service, snotify) {
+    function ToastComponent(service) {
         this.service = service;
-        this.snotify = snotify;
+        this.stateChanged = new core.EventEmitter();
         /**
@@ -684,11 +750,7 @@ * Toast state
         this.state = {
-            toast: {
-                type: '',
-                progress: 0,
-                animation: '',
-                time: 0,
-                isDestroying: false
-            },
-            promptType: SnotifyType.PROMPT,
-            prompt: ''
+            paused: false,
+            progress: 0,
+            animation: '',
+            isDestroying: false,
+            promptType: SnotifyStyle.prompt
         };
@@ -702,7 +764,5 @@ }
         var _this = this;
-        this.maxHeight = this.service.options.maxHeight;
-        this.initToast();
         this.toastChangedSubscription = this.service.toastChanged.subscribe(function (toast) {
             if (_this.toast.id === toast.id) {
-                _this.initToast(toast);
+                _this.initToast();
             }
@@ -715,8 +775,20 @@ });
         });
-        this.state.toast.type = /** @type {?} */ (this.toast.config.type);
-        this.state.toast.time = this.toast.config.animation.time;
-        this.state.toast.animation = this.toast.config.animation.enter;
-        this.lifecycle(SnotifyAction.onInit);
+        if (!this.toast.config.timeout) {
+            this.toast.config.showProgressBar = false;
+        }
+        this.toast.eventEmitter.next('mounted');
+        this.state.animation = 'snotifyToast--in';
     };
     /**
+     * @return {?}
+     */
+    ToastComponent.prototype.ngAfterContentInit = function () {
+        var _this = this;
+        setTimeout(function () {
+            _this.stateChanged.emit('beforeShow');
+            _this.toast.eventEmitter.next('beforeShow');
+            _this.state.animation = _this.toast.config.animation.enter;
+        }, this.service.config.toast.animation.time / 5); // time to show toast push animation (snotifyToast--in)
+    };
+    /**
      * Unsubscribe subscriptions
@@ -726,3 +798,4 @@ * @return {?}
     ToastComponent.prototype.ngOnDestroy = function () {
-        this.lifecycle(SnotifyAction.afterDestroy);
+        cancelAnimationFrame(this.animationFrame);
+        this.toast.eventEmitter.next('destroyed');
         this.toastChangedSubscription.unsubscribe();
@@ -736,3 +809,3 @@ this.toastDeletedSubscription.unsubscribe();
     ToastComponent.prototype.onClick = function () {
-        this.lifecycle(SnotifyAction.onClick);
+        this.toast.eventEmitter.next('click');
         if (this.toast.config.closeOnClick) {
@@ -747,7 +820,13 @@ this.service.remove(this.toast.id);
     ToastComponent.prototype.onRemove = function () {
-        this.state.toast.isDestroying = true;
-        clearInterval(this.interval);
-        this.state.toast.animation = this.toast.config.animation.exit;
-        this.maxHeight = 0;
-        this.lifecycle(SnotifyAction.beforeDestroy);
+        var _this = this;
+        this.state.isDestroying = true;
+        this.stateChanged.emit('beforeHide');
+        this.toast.eventEmitter.next('beforeHide');
+        this.state.animation = this.toast.config.animation.exit;
+        setTimeout(function () {
+            _this.stateChanged.emit('hidden');
+            _this.state.animation = 'snotifyToast--out';
+            _this.toast.eventEmitter.next('hidden');
+            setTimeout(function () { return _this.service.remove(_this.toast.id, true); }, _this.toast.config.animation.time / 2);
+        }, this.toast.config.animation.time / 2);
     };
@@ -759,5 +838,5 @@ /**
     ToastComponent.prototype.onMouseEnter = function () {
-        this.lifecycle(SnotifyAction.onHoverEnter);
+        this.toast.eventEmitter.next('mouseenter');
         if (this.toast.config.pauseOnHover) {
-            clearInterval(this.interval);
+            this.state.paused = true;
         }
@@ -770,17 +849,9 @@ };
     ToastComponent.prototype.onMouseLeave = function () {
-        if (this.toast.config.pauseOnHover && this.state.toast.type !== SnotifyType.PROMPT) {
-            this.startTimeout(this.state.toast.progress);
+        if (this.toast.config.pauseOnHover && this.toast.config.timeout) {
+            this.state.paused = false;
+            this.startTimeout(this.toast.config.timeout * this.state.progress);
         }
-        this.lifecycle(SnotifyAction.onHoverLeave);
+        this.toast.eventEmitter.next('mouseleave');
     };
     /**
-     * Prompt input value changed
-     * @param {?} value
-     * @return {?}
-     */
-    ToastComponent.prototype.onPromptChanged = function (value) {
-        this.state.prompt = value;
-        this.lifecycle(SnotifyAction.onInput, value);
-    };
-    /**
      * Remove toast completely after animation
@@ -790,68 +861,53 @@ * @return {?}
     ToastComponent.prototype.onExitTransitionEnd = function () {
-        if (this.state.toast.isDestroying) {
-            this.service.remove(this.toast.id, true);
+        if (this.state.isDestroying) {
+            return;
         }
+        this.initToast();
+        this.toast.eventEmitter.next('shown');
     };
     /**
      * Initialize base toast config
-    \@param toast {SnotifyToast}
-     * @param {?=} toast
      * @return {?}
      */
-    ToastComponent.prototype.initToast = function (toast) {
-        if (toast) {
-            if (this.toast.config.type !== toast.config.type) {
-                clearInterval(this.interval);
-            }
-            this.toast = toast;
-        }
+    ToastComponent.prototype.initToast = function () {
         if (this.toast.config.timeout > 0) {
             this.startTimeout(0);
         }
-        else {
-            this.toast.config.showProgressBar = false;
-            this.toast.config.pauseOnHover = false;
-        }
     };
     /**
      * Start progress bar
-    \@param currentProgress {Number}
-     * @param {?} currentProgress
+    \@param startTime {number}
+    \@default 0
+     * @param {?=} startTime
      * @return {?}
      */
-    ToastComponent.prototype.startTimeout = function (currentProgress) {
+    ToastComponent.prototype.startTimeout = function (startTime) {
         var _this = this;
-        var /** @type {?} */ refreshRate = 10;
-        if (this.state.toast.isDestroying) {
-            return;
-        }
-        this.state.toast.progress = currentProgress;
-        var /** @type {?} */ step = refreshRate / this.toast.config.timeout * 100;
-        this.interval = setInterval(function () {
-            _this.state.toast.progress += step;
-            if (_this.state.toast.progress >= 100) {
-                _this.service.remove(_this.toast.id);
-            }
-        }, refreshRate);
+        if (startTime === void 0) { startTime = 0; }
+        var /** @type {?} */ start = performance.now();
+        var /** @type {?} */ calculate = function () {
+            _this.animationFrame = requestAnimationFrame(function (timestamp) {
+                var /** @type {?} */ runtime = timestamp + startTime - start;
+                var /** @type {?} */ progress = Math.min(runtime / _this.toast.config.timeout, 1);
+                if (_this.state.paused) {
+                    cancelAnimationFrame(_this.animationFrame);
+                }
+                else if (runtime < _this.toast.config.timeout) {
+                    _this.state.progress = progress;
+                    calculate();
+                }
+                else {
+                    _this.state.progress = 1;
+                    cancelAnimationFrame(_this.animationFrame);
+                    _this.service.remove(_this.toast.id);
+                }
+            });
+        };
+        calculate();
     };
-    /**
-     * Lifecycle trigger
-    \@param action {SnotifyAction}
-    \@param promptValue {SnotifyAction}
-     * @param {?} action
-     * @param {?=} promptValue
-     * @return {?}
-     */
-    ToastComponent.prototype.lifecycle = function (action, promptValue) {
-        return this.service.lifecycle.next({
-            action: action,
-            toast: this.toast,
-            value: promptValue
-        });
-    };
     ToastComponent.decorators = [
-        { type: _angular_core.Component, args: [{
+        { type: core.Component, args: [{
                     selector: 'ng-snotify-toast',
-                    template: "<div class=\"snotifyToast animated\" [ngClass]=\"['snotify-' + toast.config.type, state.toast.animation]\" [ngStyle]=\"{ 'max-height': maxHeight + 'px', '-webkit-transition': state.toast.time + 300 + 'ms', transition: state.toast.time + 300 + 'ms', '-webkit-animation-duration': state.toast.time + 'ms', 'animation-duration': state.toast.time + 'ms' }\" (animationend)=\"onExitTransitionEnd()\" (click)=\"onClick()\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\" #toastEl> <div class=\"snotifyToast__progressBar\" *ngIf=\"toast.config.showProgressBar\"> <span class=\"snotifyToast__progressBar__percentage\" [ngStyle]=\"{'width': state.toast.progress + '%'}\"></span> </div> <div class=\"snotifyToast__inner\" *ngIf=\"!toast.config.html; else toastHTML\"> <div class=\"snotifyToast__title\" *ngIf=\"toast.title\">{{toast.title | truncate : toast.config.titleMaxLength}}</div> <div class=\"snotifyToast__body\">{{toast.body | truncate : toast.config.bodyMaxLength}}</div> <ng-snotify-prompt *ngIf=\"state.toast.type === state.promptType\" [placeholder]=\"toast.config.placeholder\" (valueChanged)=\"onPromptChanged($event)\"> </ng-snotify-prompt> <ng-snotify-icon *ngIf=\"!toast.config.icon; else elseBlock\" class=\"snotify-icon\" [type]=\"state.toast.type\"></ng-snotify-icon> <ng-template #elseBlock> <img class=\"snotify-icon\" [src]='toast.config.icon' /> </ng-template> </div> <ng-template #toastHTML> <div class=\"snotifyToast__inner\" [innerHTML]=\"toast.config.html\"></div> </ng-template> <ng-snotify-button *ngIf=\"toast.config.buttons\" [buttons]=\"toast.config.buttons\" [text]=\"state.toast.type === state.promptType ? state.prompt : null\" [id]=\"toast.id\"></ng-snotify-button> </div> ",
-                    encapsulation: _angular_core.ViewEncapsulation.None,
+                    template: "<div [ngClass]=\"[ 'snotifyToast animated', 'snotify-' + toast.config.type, state.animation, toast.valid === undefined ? '' : (toast.valid ? 'snotifyToast--valid' : 'snotifyToast--invalid') ]\" [ngStyle]=\"{ '-webkit-transition': toast.config.animation.time + 'ms', transition: toast.config.animation.time + 'ms', '-webkit-animation-duration': toast.config.animation.time + 'ms', 'animation-duration': toast.config.animation.time + 'ms' }\" (animationend)=\"onExitTransitionEnd()\" (click)=\"onClick()\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\"> <div class=\"snotifyToast__progressBar\" *ngIf=\"toast.config.showProgressBar\"> <span class=\"snotifyToast__progressBar__percentage\" [ngStyle]=\"{'width': (state.progress * 100) + '%'}\"></span> </div> <div class=\"snotifyToast__inner\" *ngIf=\"!toast.config.html; else toastHTML\"> <div class=\"snotifyToast__title\" *ngIf=\"toast.title\">{{toast.title | truncate : toast.config.titleMaxLength}}</div> <div class=\"snotifyToast__body\" *ngIf=\"toast.body\">{{toast.body | truncate : toast.config.bodyMaxLength}}</div> <ng-snotify-prompt *ngIf=\"toast.config.type === state.promptType\" [toast]=\"toast\"> </ng-snotify-prompt> <div *ngIf=\"!toast.config.icon; else elseBlock\" [ngClass]=\"['snotify-icon', 'snotify-icon--' + toast.config.type]\"></div> <ng-template #elseBlock> <img class=\"snotify-icon\" [src]='toast.config.icon' /> </ng-template> </div> <ng-template #toastHTML> <div class=\"snotifyToast__inner\" [innerHTML]=\"toast.config.html\"></div> </ng-template> <ng-snotify-button *ngIf=\"toast.config.buttons\" [toast]=\"toast\"></ng-snotify-button> </div> ",
+                    encapsulation: core.ViewEncapsulation.None,
                 },] },
@@ -864,6 +920,6 @@ ];
         { type: SnotifyService, },
-        { type: _angular_core.ElementRef, },
     ]; };
     ToastComponent.propDecorators = {
-        'toast': [{ type: _angular_core.Input },],
+        'toast': [{ type: core.Input },],
+        'stateChanged': [{ type: core.Output },],
     };
@@ -874,25 +930,2 @@ return ToastComponent;
 /**
- * Icons component
- */
-var IconComponent = /** @class */ (function () {
-    function IconComponent() {
-    }
-    IconComponent.decorators = [
-        { type: _angular_core.Component, args: [{
-                    selector: 'ng-snotify-icon',
-                    template: "<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 512 512\" style=\"enable-background:new 0 0 48 48;\" xml:space=\"preserve\" width=\"48px\" height=\"48px\" [ngSwitch]=\"type\"> <g *ngSwitchCase=\"'warning'\" class=\"snotify-icon__warning\"> <path d=\"M256,512c141.15,0,256-114.84,256-256S397.15,0,256,0,0,114.84,0,256,114.85,512,256,512Zm0-480.49c123.79,0,224.49,100.71,224.49,224.49S379.79,480.49,256,480.49,31.51,379.79,31.51,256,132.21,31.51,256,31.51Z\"/><circle cx=\"260.08\" cy=\"343.87\" r=\"26.35\"/><path d=\"M254.68,278.39a15.76,15.76,0,0,0,15.75-15.75V128.72a15.75,15.75,0,1,0-31.51,0V262.63A15.76,15.76,0,0,0,254.68,278.39Z\"/> </g> <g *ngSwitchCase=\"'success'\" class=\"snotify-icon__success\"> <path d=\"M256,0C114.85,0,0,114.84,0,256S114.85,512,256,512,512,397.16,512,256,397.15,0,256,0Zm0,492.31c-130.29,0-236.31-106-236.31-236.31S125.71,19.69,256,19.69,492.31,125.71,492.31,256,386.29,492.31,256,492.31Z\"/><path class=\"cls-1\" d=\"M376.64,151,225.31,321.24l-91.17-72.93a9.85,9.85,0,0,0-12.3,15.38l98.46,78.77a9.86,9.86,0,0,0,13.52-1.15L391.36,164.08A9.85,9.85,0,0,0,376.64,151Z\"/> </g> <g *ngSwitchCase=\"'info'\" class=\"snotify-icon__info\"> <path d=\"M256,0C114.84,0,0,114.84,0,256S114.84,512,256,512,512,397.16,512,256,397.15,0,256,0Zm0,478.43C133.35,478.43,33.57,378.64,33.57,256S133.35,33.58,256,33.58,478.42,133.36,478.42,256,378.64,478.43,256,478.43Z\"/><path d=\"M251.26,161.24a22.39,22.39,0,1,0-22.38-22.39A22.39,22.39,0,0,0,251.26,161.24Z\"/><path d=\"M286.84,357.87h-14v-160A16.79,16.79,0,0,0,256,181.05H225.17a16.79,16.79,0,0,0,0,33.58h14.05V357.87H225.17a16.79,16.79,0,0,0,0,33.57h61.67a16.79,16.79,0,1,0,0-33.57Z\"/> </g> <g *ngSwitchCase=\"'error'\" class=\"snotify-icon__error\"> <path d=\"M437,75A256,256,0,1,0,75,437,256,256,0,1,0,437,75ZM416.43,416.43a226.82,226.82,0,0,1-320.86,0C7.11,328,7.11,184,95.57,95.57a226.82,226.82,0,0,1,320.86,0C504.89,184,504.89,328,416.43,416.43Z\"/><path d=\"M368.81,143.19a14.5,14.5,0,0,0-20.58,0L256,235.42l-92.23-92.23a14.55,14.55,0,0,0-20.58,20.58L235.42,256l-92.23,92.23a14.6,14.6,0,0,0,10.24,24.89,14.19,14.19,0,0,0,10.24-4.31l92.23-92.23,92.23,92.23a14.64,14.64,0,0,0,10.24,4.31,14,14,0,0,0,10.24-4.31,14.5,14.5,0,0,0,0-20.58l-92-92.23,92.23-92.23A14.5,14.5,0,0,0,368.81,143.19Z\"/> </g> <g *ngSwitchCase=\"'async'\" class=\"snotify-icon__async\"> <path d=\"M256,0a32,32,0,0,0-32,32V96a32,32,0,0,0,64,0V32A32,32,0,0,0,256,0Zm0,384a32,32,0,0,0-32,32v64a32,32,0,0,0,64,0V416A32,32,0,0,0,256,384ZM391.74,165.5,437,120.22A32,32,0,0,0,391.74,75L346.5,120.22a32,32,0,0,0,45.25,45.28Zm-271.52,181L75,391.74A32,32,0,0,0,120.22,437l45.25-45.25a32,32,0,0,0-45.25-45.25Zm0-271.52A32,32,0,1,0,75,120.22l45.25,45.28a32,32,0,1,0,45.25-45.28ZM391.74,346.5a32,32,0,0,0-45.25,45.25L391.74,437A32,32,0,0,0,437,391.74ZM480,224H416a32,32,0,0,0,0,64h64a32,32,0,0,0,0-64ZM128,256a32,32,0,0,0-32-32H32a32,32,0,0,0,0,64H96A32,32,0,0,0,128,256Z\"/> </g> </svg> ",
-                    encapsulation: _angular_core.ViewEncapsulation.None,
-                },] },
-    ];
-    /**
-     * @nocollapse
-     */
-    IconComponent.ctorParameters = function () { return []; };
-    IconComponent.propDecorators = {
-        'type': [{ type: _angular_core.Input },],
-    };
-    return IconComponent;
-}());
-
-/**
  * Truncate toast text pipe
@@ -922,3 +955,3 @@ */
     TruncatePipe.decorators = [
-        { type: _angular_core.Pipe, args: [{
+        { type: core.Pipe, args: [{
                     name: 'truncate'
@@ -938,10 +971,21 @@ },] },
 var ButtonsComponent = /** @class */ (function () {
-    function ButtonsComponent() {
+    /**
+     * @param {?} service
+     */
+    function ButtonsComponent(service) {
+        this.service = service;
     }
+    /**
+     * remove toast
+     * @return {?}
+     */
+    ButtonsComponent.prototype.remove = function () {
+        this.service.remove(this.toast.id);
+    };
     ButtonsComponent.decorators = [
-        { type: _angular_core.Component, args: [{
+        { type: core.Component, args: [{
                     selector: 'ng-snotify-button',
-                    template: "<div class=\"snotifyToast__buttons\"> <button type=\"button\" *ngFor=\"let button of buttons\" [ngClass]=\"{'snotifyToast__buttons--bold': button.bold}\" (click)=\"button.action && button.action(id, text)\"> {{button.text}} </button> </div> ",
-                    changeDetection: _angular_core.ChangeDetectionStrategy.OnPush,
-                    encapsulation: _angular_core.ViewEncapsulation.None,
+                    template: "<div class=\"snotifyToast__buttons\"> <button type=\"button\" *ngFor=\"let button of toast.config.buttons\" [ngClass]=\"{'snotifyToast__buttons--bold': button.bold}\" (click)=\"button.action ? button.action(toast) : remove()\"> {{button.text}} </button> </div> ",
+                    changeDetection: core.ChangeDetectionStrategy.OnPush,
+                    encapsulation: core.ViewEncapsulation.None,
                 },] },
@@ -952,7 +996,7 @@ ];
      */
-    ButtonsComponent.ctorParameters = function () { return []; };
+    ButtonsComponent.ctorParameters = function () { return [
+        { type: SnotifyService, },
+    ]; };
     ButtonsComponent.propDecorators = {
-        'buttons': [{ type: _angular_core.Input },],
-        'text': [{ type: _angular_core.Input },],
-        'id': [{ type: _angular_core.Input },],
+        'toast': [{ type: core.Input },],
     };
@@ -968,6 +1012,2 @@ return ButtonsComponent;
         /**
-         * Emmit prompt input value
-         */
-        this.valueChanged = new _angular_core.EventEmitter();
-        /**
          * Is PROMPT focused
@@ -977,18 +1017,9 @@ \@type {boolean}
         this.isPromptFocused = false;
-        this.id = SnotifyService.generateRandomId();
     }
-    /**
-     * Subscribe on input value change
-     * @return {?}
-     */
-    PromptComponent.prototype.ngOnInit = function () {
-        var _this = this;
-        this.valueChanged.subscribe(function (value) { return _this.length = value.length; });
-    };
     PromptComponent.decorators = [
-        { type: _angular_core.Component, args: [{
+        { type: core.Component, args: [{
                     selector: 'ng-snotify-prompt',
-                    template: "<span class=\"snotifyToast__input\" [ngClass]=\"{'snotifyToast__input--filled': isPromptFocused}\"> <input (input)=\"valueChanged.next($event.target.value);\" class=\"snotifyToast__input__field\" type=\"text\" [id]=\"id\" (focus)=\"isPromptFocused = true\" (blur)=\"isPromptFocused = !!length;\"/> <label class=\"snotifyToast__input__label\" [for]=\"id\"> <span class=\"snotifyToast__input__labelContent\">{{placeholder | truncate}}</span> </label> </span> ",
-                    changeDetection: _angular_core.ChangeDetectionStrategy.OnPush,
-                    encapsulation: _angular_core.ViewEncapsulation.None,
+                    template: "<span class=\"snotifyToast__input\" [ngClass]=\"{'snotifyToast__input--filled': isPromptFocused}\"> <input (input)=\"toast.value = $event.target.value; toast.eventEmitter.next('input')\" class=\"snotifyToast__input__field\" type=\"text\" [id]=\"toast.id\" (focus)=\"isPromptFocused = true\" (blur)=\"isPromptFocused = !!toast.value.length;\"/> <label class=\"snotifyToast__input__label\" [for]=\"toast.id\"> <span class=\"snotifyToast__input__labelContent\">{{toast.config.placeholder | truncate}}</span> </label> </span> ",
+                    changeDetection: core.ChangeDetectionStrategy.OnPush,
+                    encapsulation: core.ViewEncapsulation.None,
                 },] },
@@ -1001,4 +1032,3 @@ ];
     PromptComponent.propDecorators = {
-        'placeholder': [{ type: _angular_core.Input },],
-        'valueChanged': [{ type: _angular_core.Output },],
+        'toast': [{ type: core.Input },],
     };
@@ -1027,3 +1057,3 @@ return PromptComponent;
     KeysPipe.decorators = [
-        { type: _angular_core.Pipe, args: [{
+        { type: core.Pipe, args: [{
                     name: 'keys',
@@ -1040,2 +1070,72 @@ pure: false
 
+/**
+ * Snotify default configuration object
+\@type {SnotifyDefaults}
+ */
+var ToastDefaults = {
+    global: {
+        newOnTop: true,
+        maxOnScreen: 8,
+        maxAtPosition: 8
+    },
+    toast: {
+        type: SnotifyStyle.simple,
+        showProgressBar: true,
+        timeout: 2000,
+        closeOnClick: true,
+        pauseOnHover: true,
+        bodyMaxLength: 150,
+        titleMaxLength: 16,
+        backdrop: -1,
+        icon: null,
+        html: null,
+        position: SnotifyPosition.rightBottom,
+        animation: { enter: 'fadeIn', exit: 'fadeOut', time: 400 }
+    },
+    type: (_a = {},
+        _a[SnotifyStyle.prompt] = {
+            timeout: 0,
+            closeOnClick: false,
+            buttons: [
+                { text: 'Ok', action: null, bold: true },
+                { text: 'Cancel', action: null, bold: false },
+            ],
+            placeholder: 'Enter answer here...',
+            type: SnotifyStyle.prompt,
+        },
+        _a[SnotifyStyle.confirm] = {
+            timeout: 0,
+            closeOnClick: false,
+            buttons: [
+                { text: 'Ok', action: null, bold: true },
+                { text: 'Cancel', action: null, bold: false },
+            ],
+            type: SnotifyStyle.confirm,
+        },
+        _a[SnotifyStyle.simple] = {
+            type: SnotifyStyle.simple
+        },
+        _a[SnotifyStyle.success] = {
+            type: SnotifyStyle.success
+        },
+        _a[SnotifyStyle.error] = {
+            type: SnotifyStyle.error
+        },
+        _a[SnotifyStyle.warning] = {
+            type: SnotifyStyle.warning
+        },
+        _a[SnotifyStyle.info] = {
+            type: SnotifyStyle.info
+        },
+        _a[SnotifyStyle.async] = {
+            pauseOnHover: false,
+            closeOnClick: false,
+            timeout: 0,
+            showProgressBar: false,
+            type: SnotifyStyle.async
+        },
+        _a)
+};
+var _a;
+
 var SnotifyModule = /** @class */ (function () {
@@ -1054,8 +1154,8 @@ function SnotifyModule() {
     SnotifyModule.decorators = [
-        { type: _angular_core.NgModule, args: [{
+        { type: core.NgModule, args: [{
                     imports: [
-                        _angular_common.CommonModule
+                        common.CommonModule
                     ],
                     declarations: [
-                        SnotifyComponent, ToastComponent, IconComponent, TruncatePipe,
+                        SnotifyComponent, ToastComponent, TruncatePipe,
                         ButtonsComponent, PromptComponent, KeysPipe
@@ -1078,7 +1178,5 @@ ],
 exports.SnotifyService = SnotifyService;
-exports.SnotifyAction = SnotifyAction;
 exports.SnotifyPosition = SnotifyPosition;
 exports.SnotifyToast = SnotifyToast;
 exports.ToastComponent = ToastComponent;
-exports.IconComponent = IconComponent;
 exports.TruncatePipe = TruncatePipe;
@@ -1088,2 +1186,3 @@ exports.KeysPipe = KeysPipe;
 exports.PromptComponent = PromptComponent;
+exports.ToastDefaults = ToastDefaults;
 
@@ -1090,0 +1189,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

package.json

 {
   "name": "ng-snotify",
-  "description": "Angular 2 notifications center",
-  "version": "3.0.1",
+  "description": "Angular 2+ notifications center",
+  "version": "4.0.0",
   "homepage": "https://artemsky.github.io/ng-snotify",
@@ -18,8 +18,13 @@ "repository": {
     "angular 4",
+    "angular 5",
     "Angular2",
+    "ng",
     "ng2",
     "ng4",
+    "ng5",
     "Angular4",
+    "Angular5",
     "4",
     "2",
+    "5",
     "Library",
@@ -40,2 +45,4 @@ "Notifications",
     "angular2 notifications",
+    "angular4 notifications",
+    "angular5 notifications",
     "toaster"
@@ -42,0 +49,0 @@ ],

README.MD

@@ -21,4 +21,6 @@ # ng-snotify
 - Custom HTML
-- 5.3KB minified and gzipped
+- 4.3KB minified and gzipped
 
+###### Looking for an Vue.js 2 version? [Here](https://github.com/artemsky/vue-snotify/)
+
 ![Snotify Gif](https://thumbs.gfycat.com/SoftGranularDalmatian-size_restricted.gif)
@@ -36,5 +38,5 @@
 
-Documentation - [here](https://github.com/artemsky/ng-snotify/tree/master/documentation#overview)  
+Documentation - [here](https://artemsky.github.io/ng-snotify/documentation)  
 Example application source - [here](https://github.com/artemsky/ng-snotify/tree/master/example/app)  
-Auto-Documentation - [here](https://artemsky.github.io/ng-snotify/documentation/index.html)  
+Auto-Documentation (Compodoc) - [here](https://artemsky.github.io/ng-snotify/compodoc/)  
 Change Log - [here](https://github.com/artemsky/ng-snotify/blob/master/CHANGELOG.md)
@@ -41,0 +43,0 @@

snotify/interfaces/Snotify.interface.d.ts

@@ -1,2 +0,3 @@
-import { SnotifyConfig } from './SnotifyConfig.interface';
+import { SnotifyToastConfig } from './SnotifyToastConfig.interface';
+import { SafeHtml } from '@angular/platform-browser';
 /**
@@ -10,3 +11,3 @@ * Snotify toast params
      */
-    title: string;
+    title?: string;
     /**
@@ -16,12 +17,12 @@ * Toast message
      */
-    body: string;
+    body?: string;
     /**
      * Config object
-     * @type {SnotifyConfig}
+     * @type {SnotifyToastConfig}
      */
-    config?: SnotifyConfig;
+    config?: SnotifyToastConfig;
     /**
      * Html content
      */
-    html?: any;
+    html?: string | SafeHtml;
 }

snotify/interfaces/SnotifyAnimate.interface.d.ts

@@ -9,13 +9,13 @@ /**
      * In animation
-     * @type {'fadeOutLeft' | 'fadeOutRight' | 'fadeOutUp' | 'fadeOutDown' | string}
+     * @type {string}
      *
-     * @default Depends on toast position
+     * @default 'fadeIn'
      */
-    enter: 'fadeInLeft' | 'fadeInRight' | 'fadeInUp' | 'fadeInDown' | string;
+    enter: string;
     /**
      * Out animation
-     * @type {'fadeOutLeft' | 'fadeOutRight' | 'fadeOutUp' | 'fadeOutDown' | string}
-     * @default Depends on toast position
+     * @type {string}
+     * @default 'fadeOut'
      */
-    exit: 'fadeOutLeft' | 'fadeOutRight' | 'fadeOutUp' | 'fadeOutDown' | string;
+    exit: string;
     /**
@@ -22,0 +22,0 @@ * Animation time in ms

snotify/interfaces/SnotifyButton.interface.d.ts

@@ -0,7 +1,8 @@
+import { SnotifyToast } from '../toast/snotify-toast.model';
 /**
  * Buttons config.
- * By default there are two buttons exists only on type PROMPT & CONFIRM.
- *
- * Default - 1st button | 2nd button
  */
+/**
+ * Buttons config
+ */
 export interface SnotifyButton {
@@ -11,3 +12,2 @@ /**
      * @type {string}
-     * @default 'Yes' | 'Cancel'
      */
@@ -20,10 +20,9 @@ text: string;
      * @returns {void}
-     * @default null | () => this.remove(id)
+     * @default this.remove(id)
      */
-    action?: (id?: number, text?: string) => void;
+    action?: (toast: SnotifyToast) => void;
     /**
      * Should button text be bold.
-     * @default true | false
      */
     bold?: boolean;
 }

snotify/snotify.component.d.ts

@@ -5,4 +5,4 @@ import { OnDestroy, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs/Subscription';
-import { SnotifyOptions } from './interfaces/SnotifyOptions.interface';
 import { SnotifyNotifications } from './interfaces/SnotifyNotifications.interface';
+import { SnotifyEvent } from './types/event.type';
 export declare class SnotifyComponent implements OnInit, OnDestroy {
@@ -19,10 +19,2 @@ private service;
     /**
-     * Listens for options has been changed
-     */
-    optionsSubscription: Subscription;
-    /**
-     * Listens for lifecycle has been triggered
-     */
-    lifecycleSubscription: Subscription;
-    /**
      * Helper for slice pipe (maxOnScreen)
@@ -47,2 +39,6 @@ */
     backdrop: number;
+    /**
+     * How many toasts with backdrop in current queue
+     */
+    withBackdrop: SnotifyToast[];
     constructor(service: SnotifyService);
@@ -54,2 +50,7 @@ /**
     /**
+     * Changes the backdrop opacity
+     * @param {SnotifyEvent} event
+     */
+    stateChanged(event: SnotifyEvent): void;
+    /**
      * Split toasts toasts into different objects
@@ -61,7 +62,2 @@ * @param {SnotifyToast[]} toasts
     /**
-     * Setup global options object
-     * @param options {SnotifyOptions}
-     */
-    setOptions(options: SnotifyOptions): void;
-    /**
      * Unsubscribe subscriptions
@@ -68,0 +64,0 @@ */

snotify/snotify.service.d.ts

 import { SnotifyToast } from './toast/snotify-toast.model';
 import { Subject } from 'rxjs/Subject';
 import { Observable } from 'rxjs/Observable';
-import { SnotifyInfo } from './interfaces/SnotifyInfo.interface';
-import { SnotifyOptions } from './interfaces/SnotifyOptions.interface';
-import { SnotifyConfig } from './interfaces/SnotifyConfig.interface';
+import { SnotifyToastConfig } from './interfaces/SnotifyToastConfig.interface';
+import { Snotify } from './interfaces/Snotify.interface';
 import { SafeHtml } from '@angular/platform-browser';
+import { SnotifyDefaults } from './interfaces/SnotifyDefaults.interface';
 /**
@@ -12,40 +12,9 @@ * SnotifyService - create, remove, config toasts
 export declare class SnotifyService {
+    config: SnotifyDefaults;
     readonly emitter: Subject<SnotifyToast[]>;
-    readonly lifecycle: Subject<SnotifyInfo>;
-    readonly optionsChanged: Subject<SnotifyOptions>;
     readonly toastChanged: Subject<SnotifyToast>;
     readonly toastDeleted: Subject<number>;
-    private config;
-    private _options;
     private notifications;
-    private _defaultAnimationTime;
-    onInit: (info?: SnotifyToast) => void;
-    onClick: (info?: SnotifyToast) => void;
-    onHoverEnter: (info?: SnotifyToast) => void;
-    onHoverLeave: (info?: SnotifyToast) => void;
-    onInput: (info?: SnotifyToast, value?: string) => void;
-    beforeDestroy: (info?: SnotifyToast) => void;
-    afterDestroy: (info?: SnotifyToast) => void;
+    constructor(config: SnotifyDefaults);
     /**
-     * Generates random id
-     * @return {number}
-     */
-    static generateRandomId(): number;
-    /**
-     * Simple is object check.
-     * @param item {Object<any>}
-     * @returns {boolean}
-     */
-    static isObject(item: any): boolean;
-    /**
-     * Deep merge objects.
-     * @param sources {Array<Object>}
-     * @returns {Object<any>}
-     */
-    static mergeDeep(...sources: any[]): {};
-    /**
-     * Constructor - initialize base configuration objects
-     */
-    constructor();
-    /**
      * emit changes in notifications array
@@ -55,24 +24,8 @@ */
     /**
-     * Set global config
-     * @param config {SnotifyConfig}
-     * @param options {SnotifyOptions}
-     */
-    setConfig(config: SnotifyConfig, options?: SnotifyOptions): void;
-    /**
-     * get SnotifyOptions
-     * @return {SnotifyOptions}
-     */
-    readonly options: SnotifyOptions;
-    /**
      * returns SnotifyToast object
      * @param id {Number}
-     * @return {undefined|SnotifyToast}
+     * @return {SnotifyToast|undefined}
      */
     get(id: number): SnotifyToast;
     /**
-     * returns copy of notifications array
-     * @return {SnotifyToast[]}
-     */
-    private getAll();
-    /**
      * add SnotifyToast to notifications array
@@ -84,4 +37,4 @@ * @param toast {SnotifyToast}
      * If ID passed, emits toast animation remove, if ID & REMOVE passed, removes toast from notifications array
-     * @param id {Number}
-     * @param remove {Boolean}
+     * @param id {number}
+     * @param remove {boolean}
      */
@@ -98,74 +51,240 @@ remove(id?: number, remove?: boolean): void;
      */
-    private create(snotify);
+    create(snotify: Snotify): SnotifyToast;
+    setDefaults(defaults: SnotifyDefaults): SnotifyDefaults;
     /**
-     * Create toast with Success style, returns toast id;
+     * Create toast with simple style returns toast id;
      * @param body {String}
+     * @returns {number}
+     */
+    simple(body: string): SnotifyToast;
+    /**
+     * Create toast with simple style returns toast id;
+     * @param body {String}
      * @param title {String}
-     * @param config {SnotifyConfig}
-     * @return {number}
+     * @returns {number}
      */
-    success(body: string, title?: string, config?: SnotifyConfig): number;
+    simple(body: string, title: string): SnotifyToast;
     /**
-     * Create toast with Error style, returns toast id;
+     * Create toast with simple style returns toast id;
      * @param body {String}
+     * @param config {SnotifyToastConfig}
+     * @returns {number}
+     */
+    simple(body: string, config: SnotifyToastConfig): SnotifyToast;
+    /**
+     * Create toast with simple style  returns toast id;
+     * @param [body] {String}
+     * @param [title] {String}
+     * @param [config] {SnotifyToastConfig}
+     * @returns {number}
+     */
+    simple(body: string, title: string, config: SnotifyToastConfig): SnotifyToast;
+    /**
+     * Create toast with success style returns toast id;
+     * @param body {String}
+     * @returns {number}
+     */
+    success(body: string): SnotifyToast;
+    /**
+     * Create toast with success style returns toast id;
+     * @param body {String}
      * @param title {String}
-     * @param config {SnotifyConfig}
-     * @return {number}
+     * @returns {number}
      */
-    error(body: string, title?: string, config?: SnotifyConfig): number;
+    success(body: string, title: string): SnotifyToast;
     /**
-     * Create toast with Info style, returns toast id;
+     * Create toast with success style returns toast id;
      * @param body {String}
+     * @param config {SnotifyToastConfig}
+     * @returns {number}
+     */
+    success(body: string, config: SnotifyToastConfig): SnotifyToast;
+    /**
+     * Create toast with success style  returns toast id;
+     * @param [body] {String}
+     * @param [title] {String}
+     * @param [config] {SnotifyToastConfig}
+     * @returns {number}
+     */
+    success(body: string, title: string, config: SnotifyToastConfig): SnotifyToast;
+    /**
+     * Create toast with error style returns toast id;
+     * @param body {String}
+     * @returns {number}
+     */
+    error(body: string): SnotifyToast;
+    /**
+     * Create toast with error style returns toast id;
+     * @param body {String}
      * @param title {String}
-     * @param config {SnotifyConfig}
-     * @return {number}
+     * @returns {number}
      */
-    info(body: string, title?: string, config?: SnotifyConfig): number;
+    error(body: string, title: string): SnotifyToast;
     /**
-     * Create toast with Warining style, returns toast id;
+     * Create toast with error style returns toast id;
      * @param body {String}
+     * @param config {SnotifyToastConfig}
+     * @returns {number}
+     */
+    error(body: string, config: SnotifyToastConfig): SnotifyToast;
+    /**
+     * Create toast with error style  returns toast id;
+     * @param [body] {String}
+     * @param [title] {String}
+     * @param [config] {SnotifyToastConfig}
+     * @returns {number}
+     */
+    error(body: string, title: string, config: SnotifyToastConfig): SnotifyToast;
+    /**
+     * Create toast with info style returns toast id;
+     * @param body {String}
+     * @returns {number}
+     */
+    info(body: string): SnotifyToast;
+    /**
+     * Create toast with info style returns toast id;
+     * @param body {String}
      * @param title {String}
-     * @param config {SnotifyConfig}
-     * @return {number}
+     * @returns {number}
      */
-    warning(body: string, title?: string, config?: SnotifyConfig): number;
+    info(body: string, title: string): SnotifyToast;
     /**
-     * Create toast without style, returns toast id;
+     * Create toast with info style returns toast id;
      * @param body {String}
+     * @param config {SnotifyToastConfig}
+     * @returns {number}
+     */
+    info(body: string, config: SnotifyToastConfig): SnotifyToast;
+    /**
+     * Create toast with info style  returns toast id;
+     * @param [body] {String}
+     * @param [title] {String}
+     * @param [config] {SnotifyToastConfig}
+     * @returns {number}
+     */
+    info(body: string, title: string, config: SnotifyToastConfig): SnotifyToast;
+    /**
+     * Create toast with warning style returns toast id;
+     * @param body {String}
+     * @returns {number}
+     */
+    warning(body: string): SnotifyToast;
+    /**
+     * Create toast with warning style returns toast id;
+     * @param body {String}
      * @param title {String}
-     * @param config {SnotifyConfig}
-     * @return {number}
+     * @returns {number}
      */
-    simple(body: string, title?: string, config?: SnotifyConfig): number;
+    warning(body: string, title: string): SnotifyToast;
     /**
-     * Create toast with Confirm style {with two buttons}, returns toast id;
+     * Create toast with warning style returns toast id;
      * @param body {String}
+     * @param config {SnotifyToastConfig}
+     * @returns {number}
+     */
+    warning(body: string, config: SnotifyToastConfig): SnotifyToast;
+    /**
+     * Create toast with warning style  returns toast id;
+     * @param [body] {String}
+     * @param [title] {String}
+     * @param [config] {SnotifyToastConfig}
+     * @returns {number}
+     */
+    warning(body: string, title: string, config: SnotifyToastConfig): SnotifyToast;
+    /**
+     * Create toast with confirm style returns toast id;
+     * @param body {String}
+     * @returns {number}
+     */
+    confirm(body: string): SnotifyToast;
+    /**
+     * Create toast with confirm style returns toast id;
+     * @param body {String}
      * @param title {String}
-     * @param config {SnotifyConfig}
-     * @return {number}
+     * @returns {number}
      */
-    confirm(body: string, title: string, config?: SnotifyConfig): number;
+    confirm(body: string, title: string): SnotifyToast;
     /**
+     * Create toast with confirm style returns toast id;
+     * @param body {String}
+     * @param config {SnotifyToastConfig}
+     * @returns {number}
+     */
+    confirm(body: string, config: SnotifyToastConfig): SnotifyToast;
+    /**
+     * Create toast with confirm style  returns toast id;
+     * @param [body] {String}
+     * @param [title] {String}
+     * @param [config] {SnotifyToastConfig}
+     * @returns {number}
+     */
+    confirm(body: string, title: string, config: SnotifyToastConfig): SnotifyToast;
+    /**
      * Create toast with Prompt style {with two buttons}, returns toast id;
      * @param body {String}
+     * @returns {number}
+     */
+    prompt(body: string): SnotifyToast;
+    /**
+     * Create toast with Prompt style {with two buttons}, returns toast id;
+     * @param body {String}
      * @param title {String}
-     * @param config {SnotifyConfig}
-     * @return {number}
+     * @returns {number}
      */
-    prompt(body: string, title?: string, config?: SnotifyConfig): number;
+    prompt(body: string, title: string): SnotifyToast;
     /**
+     * Create toast with Prompt style {with two buttons}, returns toast id;
+     * @param body {String}
+     * @param config {SnotifyToastConfig}
+     * @returns {number}
+     */
+    prompt(body: string, config: SnotifyToastConfig): SnotifyToast;
+    /**
+     * Create toast with Prompt style {with two buttons}, returns toast id;
+     * @param [body] {String}
+     * @param [title] {String}
+     * @param [config] {SnotifyToastConfig}
+     * @returns {number}
+     */
+    prompt(body: string, title: string, config: SnotifyToastConfig): SnotifyToast;
+    /**
      * Creates async toast with Info style. Pass action, and resolve or reject it.
      * @param body {String}
+     * @param action {Promise<Snotify> | Observable<Snotify>}
+     * @returns {number}
+     */
+    async(body: string, action: Promise<Snotify> | Observable<Snotify>): SnotifyToast;
+    /**
+     * Creates async toast with Info style. Pass action, and resolve or reject it.
+     * @param body {String}
      * @param title {String}
-     * @param action {Promise<SnotifyConfig> | Observable<SnotifyConfig>}
-     * @return {number}
+     * @param action {Promise<Snotify> | Observable<Snotify>}
+     * @returns {number}
      */
-    async(body: string, title: string, action: Promise<SnotifyConfig> | Observable<SnotifyConfig>): number;
+    async(body: string, title: string, action: Promise<Snotify> | Observable<Snotify>): SnotifyToast;
     /**
+     * Creates async toast with Info style. Pass action, and resolve or reject it.
+     * @param body {String}
+     * @param action {Promise<Snotify> | Observable<Snotify>}
+     * @param [config] {SnotifyToastConfig}
+     * @returns {number}
+     */
+    async(body: string, action: Promise<Snotify> | Observable<Snotify>, config: SnotifyToastConfig): SnotifyToast;
+    /**
+     * Creates async toast with Info style. Pass action, and resolve or reject it.
+     * @param body {String}
+     * @param title {String}
+     * @param action {Promise<Snotify> | Observable<Snotify>}
+     * @param [config] {SnotifyToastConfig}
+     * @returns {number}
+     */
+    async(body: string, title: string, action: Promise<Snotify> | Observable<Snotify>, config: SnotifyToastConfig): SnotifyToast;
+    private mergeToast(toast, next, type?);
+    /**
      * Creates empty toast with html string inside
      * @param {string | SafeHtml} html
-     * @param {SnotifyConfig} config
+     * @param {SnotifyToastConfig} config
      * @returns {number}
      */
-    html(html: string | SafeHtml, config?: SnotifyConfig): number;
+    html(html: string | SafeHtml, config?: SnotifyToastConfig): SnotifyToast;
 }

snotify/toast/button/buttons.component.d.ts

@@ -1,16 +0,14 @@
-import { SnotifyButton } from '../../interfaces/SnotifyButton.interface';
+import { SnotifyService } from '../../snotify.service';
+import { SnotifyToast } from '../snotify-toast.model';
 export declare class ButtonsComponent {
+    private service;
     /**
      * Get buttons Array
      */
-    buttons: SnotifyButton[];
+    toast: SnotifyToast;
+    constructor(service: SnotifyService);
     /**
-     * Get prompt input value
+     * remove toast
      */
-    text: string;
-    /**
-     * Get toast id
-     */
-    id: number;
-    constructor();
+    remove(): void;
 }

snotify/toast/prompt/prompt.component.d.ts

@@ -1,20 +0,8 @@
-import { EventEmitter, OnInit } from '@angular/core';
-export declare class PromptComponent implements OnInit {
+import { SnotifyToast } from '../snotify-toast.model';
+export declare class PromptComponent {
     /**
      * Get PROMPT placeholder
      */
-    placeholder: string;
+    toast: SnotifyToast;
     /**
-     * Emmit prompt input value
-     */
-    valueChanged: EventEmitter<string>;
-    /**
-     * Input length, needed for collapse check
-     */
-    length: number;
-    /**
-     * Toast id
-     */
-    id: number;
-    /**
      * Is PROMPT focused
@@ -24,7 +12,2 @@ * @type {boolean}
     isPromptFocused: boolean;
-    constructor();
-    /**
-     * Subscribe on input value change
-     */
-    ngOnInit(): void;
 }

snotify/toast/snotify-toast.model.d.ts

@@ -1,2 +0,4 @@
-import { SnotifyConfig } from '../interfaces/SnotifyConfig.interface';
+import { SnotifyToastConfig } from '../interfaces/SnotifyToastConfig.interface';
+import { Subject } from 'rxjs/Subject';
+import { SnotifyEvent } from '../types/event.type';
 /**
@@ -9,4 +11,30 @@ * Toast main model
     body: string;
-    config: SnotifyConfig;
-    constructor(id: number, title: string, body: string, config?: SnotifyConfig);
+    config: SnotifyToastConfig;
+    /**
+     * Emits {SnotifyEvent}
+     * @type {Subject<SnotifyEvent>}
+     */
+    readonly eventEmitter: Subject<SnotifyEvent>;
+    /**
+     * Holds all subscribers because we need to unsubscribe from all before toast get destroyed
+     * @type {Subscription[]}
+     * @private
+     */
+    private _eventsHolder;
+    /**
+     * Toast prompt value
+     */
+    value: string;
+    /**
+     * Toast validator
+     */
+    valid: boolean;
+    constructor(id: number, title: string, body: string, config: SnotifyToastConfig);
+    /**
+     * Subscribe to toast events
+     * @param {SnotifyEvent} event
+     * @param {(toast: SnotifyToast) => void} action
+     * @returns {this}
+     */
+    on(event: SnotifyEvent, action: (toast: this) => void): this;
 }

snotify/toast/toast.component.d.ts

@@ -1,9 +0,8 @@
-import { ElementRef, OnDestroy, OnInit } from '@angular/core';
+import { AfterContentInit, EventEmitter, OnDestroy, OnInit } from '@angular/core';
 import { SnotifyService } from '../snotify.service';
 import { SnotifyToast } from './snotify-toast.model';
-import { SnotifyAction } from '../enum/SnotifyAction.enum';
 import { Subscription } from 'rxjs/Subscription';
-export declare class ToastComponent implements OnInit, OnDestroy {
+import { SnotifyEvent } from '../types/event.type';
+export declare class ToastComponent implements OnInit, OnDestroy, AfterContentInit {
     private service;
-    private snotify;
     /**
@@ -13,5 +12,10 @@ * Get toast from notifications array
     toast: SnotifyToast;
+    stateChanged: EventEmitter<SnotifyEvent>;
     toastDeletedSubscription: Subscription;
     toastChangedSubscription: Subscription;
     /**
+     * requestAnimationFrame id
+     */
+    animationFrame: number;
+    /**
      * Toast state
@@ -21,25 +25,14 @@ * @type {Object}
     state: {
-        toast: {
-            type: string;
-            progress: number;
-            animation: string;
-            time: number;
-            isDestroying: boolean;
-        };
-        promptType: string;
-        prompt: string;
+        paused: boolean;
+        progress: number;
+        animation: string;
+        isDestroying: boolean;
+        promptType: "simple" | "success" | "error" | "warning" | "info" | "async" | "confirm" | "prompt";
     };
+    constructor(service: SnotifyService);
     /**
-     * Toast maximum height in pixels
-     */
-    maxHeight: number;
-    /**
-     * Toast progress interval
-     */
-    interval: any;
-    constructor(service: SnotifyService, snotify: ElementRef);
-    /**
      * Init base options. Subscribe to toast changed, toast deleted
      */
     ngOnInit(): void;
+    ngAfterContentInit(): void;
     /**
@@ -66,6 +59,2 @@ * Unsubscribe subscriptions
     /**
-     * Prompt input value changed
-     */
-    onPromptChanged(value: string): void;
-    /**
      * Remove toast completely after animation
@@ -76,16 +65,11 @@ */
      * Initialize base toast config
-     * @param toast {SnotifyToast}
+     *
      */
-    initToast(toast?: SnotifyToast): void;
+    initToast(): void;
     /**
      * Start progress bar
-     * @param currentProgress {Number}
+     * @param startTime {number}
+     * @default 0
      */
-    startTimeout(currentProgress: number): void;
-    /**
-     * Lifecycle trigger
-     * @param action {SnotifyAction}
-     * @param promptValue {SnotifyAction}
-     */
-    lifecycle(action: SnotifyAction, promptValue?: string): void;
+    startTimeout(startTime?: number): void;
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

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

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

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

195973

increased by5.7%

Lines of code

4373

increased by5.88%

Number of lines in readme file

45

increased by4.65%

Number of low supply chain risk alerts

2

decreased by-50%

Worsened metrics

Number of package files

54

decreased by-19.4%

No dependency changes