ngx-snotifire 1.0.0-beta

package/fesm2020/ngx-snotifire.mjs

@@ -0,0 +1,1039 @@
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, Inject, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Pipe, EventEmitter, Output, NgModule } from '@angular/core';
+import { __decorate } from 'tslib';
+import { Subject, from, takeUntil } from 'rxjs';
+
+/**
+ * Defines toast style depending on method name
+ * @param target any
+ * @param propertyKey NotificationType
+ * @param descriptor PropertyDescriptor
+ * @returns value: ((...args: any[]) => any)
+ */
+function SetToastType(target, propertyKey, descriptor) {
+    return {
+        value(...args) {
+            args[0].config = {
+                ...args[0].config,
+                type: propertyKey,
+            };
+            return descriptor.value.apply(this, args);
+        },
+    };
+}
+
+var SnotifireEventType;
+(function (SnotifireEventType) {
+    SnotifireEventType["MOUNTED"] = "mounted";
+    SnotifireEventType["BEFORE_SHOW"] = "beforeShow";
+    SnotifireEventType["SHOWN"] = "shown";
+    SnotifireEventType["INPUT"] = "input";
+    SnotifireEventType["CLICK"] = "click";
+    SnotifireEventType["MOUSE_ENTER"] = "mouseenter";
+    SnotifireEventType["MOUSE_LEAVE"] = "mouseleave";
+    SnotifireEventType["BEFORE_HIDE"] = "beforeHide";
+    SnotifireEventType["HIDDEN"] = "hidden";
+    SnotifireEventType["DESTROYED"] = "destroyed";
+})(SnotifireEventType || (SnotifireEventType = {}));
+
+var SnotificationPositionType;
+(function (SnotificationPositionType) {
+    SnotificationPositionType["LEFT_TOP"] = "leftTop";
+    SnotificationPositionType["LEFT_CENTER"] = "leftCenter";
+    SnotificationPositionType["LEFT_BOTTOM"] = "leftBottom";
+    SnotificationPositionType["RIGHT_TOP"] = "rightTop";
+    SnotificationPositionType["RIGHT_CENTER"] = "rightCenter";
+    SnotificationPositionType["RIGHT_BOTTOM"] = "rightBottom";
+    SnotificationPositionType["CENTER_TOP"] = "centerTop";
+    SnotificationPositionType["CENTER_CENTER"] = "centerCenter";
+    SnotificationPositionType["CENTER_BOTTOM"] = "centerBottom";
+})(SnotificationPositionType || (SnotificationPositionType = {}));
+
+var SnotifireType;
+(function (SnotifireType) {
+    SnotifireType["SUCCESS"] = "success";
+    SnotifireType["INFO"] = "info";
+    SnotifireType["WARNING"] = "warning";
+    SnotifireType["ERROR"] = "error";
+    SnotifireType["ASYNC"] = "async";
+    SnotifireType["CONFIRM"] = "confirm";
+    SnotifireType["PROMPT"] = "prompt";
+})(SnotifireType || (SnotifireType = {}));
+
+class SnotifireModel {
+    constructor(type, 
+    /**
+     * Notification Title
+     */
+    title, 
+    /**
+     * Notification message
+     */
+    body, 
+    /**
+     * Config object
+     */
+    config, 
+    /**
+     * Html content
+     */
+    html) {
+        this.type = type;
+        this.title = title;
+        this.body = body;
+        this.config = config;
+        this.html = html;
+    }
+}
+
+//todo: cp check if async
+/**
+ * Transform arguments to Snotify object
+ * @param target any
+ * @param propertyKey SnotifyTypeType
+ * @param descriptor PropertyDescriptor
+ * @returns Snotify
+ */
+function TransformArgument(target, propertyKey, descriptor) {
+    if (propertyKey === SnotifireType.ASYNC) {
+        return {
+            value(...args) {
+                let 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, [
+                    result,
+                ]);
+            },
+        };
+    }
+    else {
+        return {
+            value(...args) {
+                let 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 = {
+                        title: null,
+                        config: null,
+                        body: args[0],
+                        [typeof args[1] === 'string' ? 'title' : 'config']: args[1],
+                    };
+                }
+                return descriptor.value.apply(this, [
+                    result,
+                ]);
+            },
+        };
+    }
+}
+
+/**
+ * Toast main model
+ */
+class NotifireModel {
+    constructor(id, title, body, config) {
+        this.id = id;
+        this.title = title;
+        this.body = body;
+        this.config = config;
+        /**
+         * Emits NotifireEventType
+         */
+        this.eventEmitter = new Subject();
+        /**
+         * Holds all subscribers because we need to unsubscribe from all before toast get destroyed
+         */
+        this.eventsHolder = [];
+        /**
+         * Toast validator
+         */
+        this.valid = true;
+        if (this.config && this.config.type === SnotifireType.PROMPT) {
+            this.value = '';
+        }
+        this.on(SnotifireEventType.HIDDEN, () => {
+            this.eventsHolder.forEach((subscription) => {
+                subscription.unsubscribe();
+            });
+        });
+    }
+    /**
+     * Subscribe to toast events
+     * @returns this
+     * @param event NotificationEventType
+     * @param action (toast: this) => void
+     */
+    on(event, action) {
+        this.eventsHolder.push(this.eventEmitter.subscribe((e) => {
+            if (e === event) {
+                action(this);
+            }
+        }));
+        return this;
+    }
+    /**
+     * Tests if a toast equals this toast.
+     * @returns boolean true then equals else false.
+     * @param toast notifire-toast
+     */
+    equals(toast) {
+        return this.config && toast.config
+            ? this.body === toast.body &&
+                this.title === toast.title &&
+                this.config.type === toast.config.type
+            : this.body === toast.body && this.title === toast.title;
+    }
+}
+
+/**
+ * Deep merge objects.
+ * @param sources Array<Object<any>>
+ * @returns Object<any>
+ */
+function mergeDeep(...sources) {
+    const target = {};
+    if (!sources.length) {
+        return target;
+    }
+    while (sources.length > 0) {
+        const source = sources.shift();
+        if (isObject(source)) {
+            for (const key in source) {
+                if (isObject(source[key])) {
+                    target[key] = mergeDeep(target[key], source[key]);
+                }
+                else {
+                    Object.assign(target, { [key]: source[key] });
+                }
+            }
+        }
+    }
+    return target;
+}
+/**
+ * Generates random id
+ * @return number
+ */
+function uuid() {
+    return Math.floor(Math.random() * (Date.now() - 1)) + 1;
+}
+/**
+ * Simple is object check.
+ * @param item Object<any>
+ * @returns boolean
+ */
+function isObject(item) {
+    return item && typeof item === 'object' && !Array.isArray(item);
+}
+
+class SnotificationService {
+    constructor(defaultConfig) {
+        this.defaultConfig = defaultConfig;
+        /**
+         * Minimum display time of the notification message
+         */
+        this.minimumDisplayedTime = 3000;
+        /**
+         * Emits Notifire Notifications
+         */
+        this.emitter = new Subject();
+        this.toastDeleted = new Subject();
+        this.toastChanged = new Subject();
+        this.notifications = [];
+    }
+    /**
+     * Creates toast and add it to array, returns toast id
+     * @param NotificationModel NotificationModel
+     * @return number
+     */
+    create(notif) {
+        if (this.defaultConfig.type && notif.config && notif.config.type) {
+            const config = mergeDeep(this.defaultConfig.snotifireConfig, this.defaultConfig.type[notif.config.type], notif.config);
+            const toast = new NotifireModel(uuid(), notif.title ? notif.title : '', notif.body ? notif.body : '', config);
+            this.add(toast);
+            return toast;
+        }
+        const config = mergeDeep(this.defaultConfig.snotifireConfig, notif.config);
+        const defaulToast = new NotifireModel(uuid(), notif.title ? notif.title : '', notif.body ? notif.body : '', config);
+        this.add(defaulToast);
+        return defaulToast;
+    }
+    /**
+     * If ID passed, emits toast animation remove, if ID & REMOVE passed, removes toast from notifications array
+     * @param id number
+     * @param remove boolean
+     */
+    remove(id, remove) {
+        if (!id) {
+            return this.clear();
+        }
+        if (remove) {
+            this.notifications = this.notifications.filter((toast) => toast.id !== id);
+            return this.emit();
+        }
+        this.toastDeleted.next(id);
+    }
+    setDefaults(defaults) {
+        const mergedConfig = (this.defaultConfig = mergeDeep(this.defaultConfig, defaults));
+        return mergedConfig;
+    }
+    /**
+     * Clear notifications array
+     */
+    clear() {
+        this.notifications = [];
+        this.emit();
+    }
+    /**
+     * add NotifireToast to notifications array
+     * @param toast NotifireToast
+     */
+    add(toast) {
+        if (this.defaultConfig &&
+            this.defaultConfig.global &&
+            this.defaultConfig.global.filterDuplicates &&
+            this.containsToast(toast)) {
+            if (!this.defaultConfig.global.filterDuplicates) {
+                throw new Error('Missing global config');
+            }
+            return;
+        }
+        if (this.defaultConfig &&
+            this.defaultConfig.global &&
+            this.defaultConfig.global.newOnTop) {
+            this.notifications.unshift(toast);
+        }
+        else {
+            this.notifications.push(toast);
+        }
+        this.emit();
+    }
+    /**
+     * emit changes in notifications array
+     */
+    emit() {
+        this.emitter.next(this.notifications.slice());
+    }
+    /**
+     * checks if the toast is in the collection.
+     * @param inToast NotifireToast
+     * @returns boolean
+     */
+    containsToast(inToast) {
+        return this.notifications.some((toast) => toast.equals(inToast));
+    }
+    /**
+     * Creates empty toast with html string inside
+     * @param html string | SafeHtml
+     * @param config NotifireConfig
+     * @returns number
+     */
+    html(html, config) {
+        return this.create({
+            title: undefined,
+            body: undefined,
+            config: {
+                ...config,
+                ...{ html },
+            },
+        });
+    }
+    /**
+     * Transform toast arguments into NotificationModel object
+     */
+    success(args) {
+        if (!args.config) {
+            throw new Error('Missing config, please configure service accordingly');
+        }
+        return this.create(args);
+    }
+    /**
+     * Transform toast arguments into NotificationModel object
+     */
+    error(args) {
+        return this.create(args);
+    }
+    /**
+     * Transform toast arguments into NotificationModel object
+     */
+    info(args) {
+        return this.create(args);
+    }
+    /**
+     * Transform toast arguments into NotificationModel object
+     */
+    warning(args) {
+        return this.create(args);
+    }
+    /**
+     * Transform toast arguments into NotificationModel object
+     */
+    confirm(args) {
+        return this.create(args);
+    }
+    /**
+     * Transform toast arguments into NotificationModel object
+     */
+    prompt(args) {
+        return this.create(args);
+    }
+    /**
+     * Transform toast arguments into NotificationModel object
+     */
+    async(args) {
+        let async;
+        if (args.action instanceof Promise) {
+            async = from(args.action);
+        }
+        else {
+            async = args.action;
+        }
+        const toast = this.create(args);
+        toast.on(SnotifireEventType.MOUNTED, () => {
+            const subscription = async.subscribe({
+                next: (next) => {
+                    this.mergeToast(toast, next);
+                },
+                error: (error) => {
+                    this.mergeToast(toast, error, SnotifireType.ERROR);
+                    subscription.unsubscribe();
+                },
+                complete: () => {
+                    this.mergeToast(toast, {}, SnotifireType.SUCCESS);
+                    subscription.unsubscribe();
+                },
+            });
+        });
+        return toast;
+    }
+    mergeToast(toast, next, type) {
+        if (next.body) {
+            toast.body = next.body;
+        }
+        if (next.title) {
+            toast.title = next.title;
+        }
+        if (type && this.defaultConfig) {
+            toast.config = mergeDeep(toast.config, this.defaultConfig.global, this.defaultConfig.snotifireConfig?.type, { type }, next.config);
+        }
+        else {
+            toast.config = mergeDeep(toast.config, next.config);
+        }
+        if (next.html) {
+            toast.config.html = next.html;
+        }
+        this.emit();
+        this.toastChanged.next(toast);
+    }
+}
+SnotificationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: SnotificationService, deps: [{ token: 'NotifireConfig' }], target: i0.ɵɵFactoryTarget.Injectable });
+SnotificationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: SnotificationService });
+__decorate([
+    TransformArgument
+    /**
+     * Determines current toast type and collects default configuration
+     */
+    ,
+    SetToastType
+], SnotificationService.prototype, "success", null);
+__decorate([
+    TransformArgument
+    /**
+     * Determines current toast type and collects default configuration
+     */
+    ,
+    SetToastType
+], SnotificationService.prototype, "error", null);
+__decorate([
+    TransformArgument
+    /**
+     * Determines current toast type and collects default configuration
+     */
+    ,
+    SetToastType
+], SnotificationService.prototype, "info", null);
+__decorate([
+    TransformArgument
+    /**
+     * Determines current toast type and collects default configuration
+     */
+    ,
+    SetToastType
+], SnotificationService.prototype, "warning", null);
+__decorate([
+    TransformArgument
+    /**
+     * Determines current toast type and collects default configuration
+     */
+    ,
+    SetToastType
+], SnotificationService.prototype, "confirm", null);
+__decorate([
+    TransformArgument
+    /**
+     * Determines current toast type and collects default configuration
+     */
+    ,
+    SetToastType
+], SnotificationService.prototype, "prompt", null);
+__decorate([
+    TransformArgument
+    /**
+     * Determines current toast type and collects default configuration
+     */
+    ,
+    SetToastType
+], SnotificationService.prototype, "async", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: SnotificationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['NotifireConfig']
+                }] }]; }, propDecorators: { success: [], error: [], info: [], warning: [], confirm: [], prompt: [], async: [] } });
+
+/**
+ * Buttons component
+ */
+class ButtonsComponent {
+    constructor(service) {
+        this.service = service;
+    }
+    /**
+     * remove toast
+     */
+    remove() {
+        this.service.remove(this.toast.id);
+    }
+}
+ButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ButtonsComponent, deps: [{ token: SnotificationService }], target: i0.ɵɵFactoryTarget.Component });
+ButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ButtonsComponent, selector: "notifire-button", inputs: { toast: "toast" }, ngImport: i0, template: "<div class=\"notifire-toast__buttons\">\n    <ng-container *ngIf=\"toast.config\">\n        <button\n            type=\"button\"\n            *ngFor=\"let button of toast.config.buttons\"\n            [ngClass]=\"{ 'notifire-toast__buttons--bold': button.bold }\"\n            (click)=\"button.action ? button.action(toast) : remove()\"\n        >\n            {{ button.text }}\n        </button>\n    </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ButtonsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'notifire-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"notifire-toast__buttons\">\n    <ng-container *ngIf=\"toast.config\">\n        <button\n            type=\"button\"\n            *ngFor=\"let button of toast.config.buttons\"\n            [ngClass]=\"{ 'notifire-toast__buttons--bold': button.bold }\"\n            (click)=\"button.action ? button.action(toast) : remove()\"\n        >\n            {{ button.text }}\n        </button>\n    </ng-container>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: SnotificationService }]; }, propDecorators: { toast: [{
+                type: Input
+            }] } });
+
+/**
+ * Truncate toast text pipe
+ */
+class TruncatePipe {
+    constructor() {
+        this.DEFAULT_LIMIT = 40;
+        this.DEFAULT_TRAIL = '...';
+    }
+    transform(value, ...args) {
+        const limit = args.length > 0 ? parseInt(args[0], 10) : this.DEFAULT_LIMIT;
+        return value.length > limit
+            ? value.substring(0, limit) +
+                (args.length > 1 ? args[1] : this.DEFAULT_TRAIL)
+            : value;
+    }
+}
+TruncatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: TruncatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+TruncatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.10", ngImport: i0, type: TruncatePipe, name: "truncate" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: TruncatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'truncate',
+                }]
+        }] });
+
+class PromptComponent {
+    constructor() {
+        this.inputType = SnotifireEventType.INPUT;
+        /**
+         * Is PROMPT focused
+         */
+        this.isPromptFocused = false;
+    }
+    getValue($event) {
+        return $event.target.value;
+    }
+}
+PromptComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: PromptComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PromptComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: PromptComponent, selector: "ngx-snotify-prompt", inputs: { toast: "toast" }, ngImport: i0, template: "<span\n    class=\"notifire-toast__input\"\n    [ngClass]=\"{ 'notifire-toast__input--filled': isPromptFocused }\"\n>\n    <input\n        (input)=\"toast.value = getValue($event); toast.eventEmitter.next(inputType)\"\n        autofocus\n        class=\"notifire-toast__input__field\"\n        type=\"text\"\n        [id]=\"toast.id\"\n        (focus)=\"isPromptFocused = true\"\n        (blur)=\"isPromptFocused = !!toast.value && !!toast.value.length\"\n    >\n    <label\n        class=\"notifire-toast__input__label\"\n        [for]=\"toast.id\"\n    >\n        <span\n            class=\"notifire-toast__input__labelContent\"\n            *ngIf=\"toast.config && toast.config.placeholder \"\n        >\n            {{ toast.config.placeholder | truncate }}\n        </span>\n    </label>\n</span>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: TruncatePipe, name: "truncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: PromptComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-snotify-prompt', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<span\n    class=\"notifire-toast__input\"\n    [ngClass]=\"{ 'notifire-toast__input--filled': isPromptFocused }\"\n>\n    <input\n        (input)=\"toast.value = getValue($event); toast.eventEmitter.next(inputType)\"\n        autofocus\n        class=\"notifire-toast__input__field\"\n        type=\"text\"\n        [id]=\"toast.id\"\n        (focus)=\"isPromptFocused = true\"\n        (blur)=\"isPromptFocused = !!toast.value && !!toast.value.length\"\n    >\n    <label\n        class=\"notifire-toast__input__label\"\n        [for]=\"toast.id\"\n    >\n        <span\n            class=\"notifire-toast__input__labelContent\"\n            *ngIf=\"toast.config && toast.config.placeholder \"\n        >\n            {{ toast.config.placeholder | truncate }}\n        </span>\n    </label>\n</span>\n" }]
+        }], propDecorators: { toast: [{
+                type: Input
+            }] } });
+
+class ToastComponent {
+    constructor(service) {
+        this.service = service;
+        this.unsubscribe$ = new Subject();
+        this.stateChanged = new EventEmitter();
+        /**
+         * Toast state
+         */
+        this.state = {
+            paused: false,
+            progress: 0,
+            animation: '',
+            isDestroying: false,
+            promptType: SnotifireType.PROMPT,
+        };
+    }
+    ngOnInit() {
+        this.service.toastChanged
+            .pipe(takeUntil(this.unsubscribe$))
+            .subscribe((toast) => {
+            console.log('toast');
+            if (this.toast.id === toast.id) {
+                this.initToast();
+            }
+        });
+        this.service.toastDeleted
+            .pipe(takeUntil(this.unsubscribe$))
+            .subscribe((id) => {
+            if (this.toast.id === id) {
+                this.onRemove();
+            }
+        });
+        if (this.toast && this.toast.config && !this.toast.config.timeout) {
+            this.toast.config.showProgressBar = false;
+        }
+        this.toast.eventEmitter.next(SnotifireEventType.MOUNTED);
+        this.state.animation = 'notifire-toast--in';
+    }
+    ngAfterContentInit() {
+        if (this.service.defaultConfig.snotifireConfig &&
+            this.service.defaultConfig.snotifireConfig.animation) {
+            setTimeout(() => {
+                this.stateChanged.emit(SnotifireEventType.BEFORE_SHOW);
+                this.toast.eventEmitter.next(SnotifireEventType.BEFORE_SHOW);
+                this.state.animation =
+                    this.toast.config &&
+                        this.toast.config.animation &&
+                        this.toast.config.animation.enter
+                        ? this.toast.config.animation.enter
+                        : '';
+            }, this.service.defaultConfig.snotifireConfig.animation.time / 5); // time to show toast push animation (notifire-toast--in)
+        }
+    }
+    /**
+     * Trigger beforeDestroy lifecycle. Removes toast
+     */
+    onRemove() {
+        this.state.isDestroying = true;
+        this.toast.eventEmitter.next(SnotifireEventType.BEFORE_HIDE);
+        this.stateChanged.emit(SnotifireEventType.BEFORE_HIDE);
+        this.state.animation =
+            (this.toast.config &&
+                this.toast.config.animation &&
+                this.toast.config.animation.exit) ||
+                '';
+        setTimeout(() => {
+            this.stateChanged.emit(SnotifireEventType.HIDDEN);
+            this.state.animation = 'notifire-toast--out';
+            this.toast.eventEmitter.next(SnotifireEventType.HIDDEN);
+            setTimeout(() => this.service.remove(this.toast.id, true), this.toast.config &&
+                this.toast.config.animation &&
+                this.toast.config.animation.time / 2);
+        }, this.toast.config && this.toast.config.animation && this.toast.config.animation.time / 2);
+    }
+    /**
+     * Trigger OnClick lifecycle
+     */
+    onClick() {
+        this.toast.eventEmitter.next(SnotifireEventType.CLICK);
+        if (this.toast && this.toast.config && this.toast.config.closeOnClick) {
+            this.service.remove(this.toast.id);
+        }
+    }
+    /**
+     * Trigger onHoverEnter lifecycle
+     */
+    onMouseEnter() {
+        this.toast.eventEmitter.next(SnotifireEventType.MOUSE_ENTER);
+        if (this.toast && this.toast.config && this.toast.config.pauseOnHover) {
+            this.state.paused = true;
+        }
+    }
+    /**
+     * Trigger onHoverLeave lifecycle
+     */
+    onMouseLeave() {
+        if (this.toast &&
+            this.toast.config &&
+            this.toast.config.pauseOnHover &&
+            this.toast.config.timeout) {
+            this.state.paused = false;
+            this.startTimeout(this.toast.config.timeout * this.state.progress);
+        }
+        this.toast.eventEmitter.next(SnotifireEventType.MOUSE_LEAVE);
+    }
+    /**
+     * Remove toast completely after animation
+     */
+    onExitTransitionEnd() {
+        if (this.state.isDestroying) {
+            return;
+        }
+        this.initToast();
+        this.toast.eventEmitter.next(SnotifireEventType.SHOWN);
+    }
+    /*
+     Common
+     */
+    /**
+     * Initialize base toast config
+     *
+     */
+    initToast() {
+        if ((this.toast && this.toast.config && this.toast.config.timeout
+            ? this.toast.config.timeout
+            : 0) > 0) {
+            this.startTimeout(0);
+        }
+    }
+    /**
+     * Start progress bar
+     * @param startTime number
+     */
+    startTimeout(startTime = 0) {
+        const start = performance.now();
+        const calculate = () => {
+            this.animationFrame = requestAnimationFrame((timestamp) => {
+                const runtime = timestamp + startTime - start;
+                const progress = Math.min(runtime /
+                    (this.toast && this.toast.config && this.toast.config.timeout
+                        ? this.toast.config.timeout
+                        : 1), 1);
+                if (this.state.paused) {
+                    cancelAnimationFrame(this.animationFrame);
+                }
+                else if (runtime <
+                    (this.toast && this.toast.config && this.toast.config.timeout
+                        ? this.toast.config.timeout
+                        : 1)) {
+                    this.state.progress = progress;
+                    calculate();
+                }
+                else {
+                    this.state.progress = 1;
+                    cancelAnimationFrame(this.animationFrame);
+                    this.service.remove(this.toast.id);
+                }
+            });
+        };
+        calculate();
+    }
+    ngOnDestroy() {
+        this.unsubscribe$.next();
+        this.unsubscribe$.complete();
+    }
+}
+ToastComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ToastComponent, deps: [{ token: SnotificationService }], target: i0.ɵɵFactoryTarget.Component });
+ToastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ToastComponent, selector: "ngx-toast", inputs: { toast: "toast" }, outputs: { stateChanged: "stateChanged" }, ngImport: i0, template: "<ng-container *ngIf=\"toast && toast.config\">\n    <div\n        [attr.role]=\"toast.config.type === state.promptType ? 'dialog' : 'alert'\"\n        [attr.aria-labelledby]=\"'snotify_' + toast.id\"\n        [attr.aria-modal]=\"toast.config.type === state.promptType\"\n        [ngClass]=\"[\n  'notifire-toast animated',\n  'snotify-' + toast.config.type,\n  state.animation,  toast.valid === undefined ? '' : toast.valid ? 'snotifyToast--valid' : 'snotifyToast--invalid'\n]\"\n        [ngStyle]=\"{\n  '-webkit-transition': toast.config.animation && toast.config.animation.time  + 'ms',\n  transition:  toast.config.animation && toast.config.animation.time + 'ms',\n  '-webkit-animation-duration':  toast.config.animation &&  toast.config.animation.time + 'ms',\n  'animation-duration':  toast.config.animation && toast.config.animation.time + 'ms'\n}\"\n        (animationend)=\"onExitTransitionEnd()\"\n        (click)=\"onClick()\"\n        (mouseenter)=\"onMouseEnter()\"\n        (mouseleave)=\"onMouseLeave()\"\n    >\n        <div\n            class=\"notifire-toast__progressBar\"\n            *ngIf=\"toast.config.showProgressBar\"\n        >\n            <span\n                class=\"notifire-toast__progressBar__percentage\"\n                [ngStyle]=\"{ width: state.progress * 100 + '%' }\"\n            ></span>\n        </div>\n        <div\n            class=\"notifire-toast__inner\"\n            *ngIf=\"!toast.config.html; else toastHTML\"\n        >\n            <div\n                class=\"notifire-toast__title\"\n                [attr.id]=\"'snotify_' + toast.id\"\n                *ngIf=\"toast.title\"\n            >\n                {{ toast.title | truncate: toast.config.titleMaxLength }}\n            </div>\n            <div\n                class=\"notifire-toast__body\"\n                *ngIf=\"toast.body\"\n            >\n                {{ toast.body | truncate: toast.config.bodyMaxLength }}\n            </div>\n            <ngx-snotify-prompt\n                *ngIf=\"toast.config.type === state.promptType\"\n                [toast]=\"toast\"\n            >\n            </ngx-snotify-prompt>\n            <div\n                *ngIf=\"!toast.config.icon; else elseBlock\"\n                [ngClass]=\"['snotify-icon', toast.config.iconClass || 'snotify-icon--' + toast.config.type]\"\n            ></div>\n            <ng-template #elseBlock>\n                <img\n                    class=\"snotify-icon\"\n                    [src]=\"toast.config.icon\"\n                >\n            </ng-template>\n        </div>\n        <ng-template #toastHTML>\n            <div\n                class=\"notifire-toast__inner\"\n                [innerHTML]=\"toast.config.html\"\n            ></div>\n        </ng-template>\n        <notifire-button\n            *ngIf=\"toast.config.buttons\"\n            [toast]=\"toast\"\n        ></notifire-button>\n    </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PromptComponent, selector: "ngx-snotify-prompt", inputs: ["toast"] }, { kind: "component", type: ButtonsComponent, selector: "notifire-button", inputs: ["toast"] }, { kind: "pipe", type: TruncatePipe, name: "truncate" }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ToastComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-toast', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"toast && toast.config\">\n    <div\n        [attr.role]=\"toast.config.type === state.promptType ? 'dialog' : 'alert'\"\n        [attr.aria-labelledby]=\"'snotify_' + toast.id\"\n        [attr.aria-modal]=\"toast.config.type === state.promptType\"\n        [ngClass]=\"[\n  'notifire-toast animated',\n  'snotify-' + toast.config.type,\n  state.animation,  toast.valid === undefined ? '' : toast.valid ? 'snotifyToast--valid' : 'snotifyToast--invalid'\n]\"\n        [ngStyle]=\"{\n  '-webkit-transition': toast.config.animation && toast.config.animation.time  + 'ms',\n  transition:  toast.config.animation && toast.config.animation.time + 'ms',\n  '-webkit-animation-duration':  toast.config.animation &&  toast.config.animation.time + 'ms',\n  'animation-duration':  toast.config.animation && toast.config.animation.time + 'ms'\n}\"\n        (animationend)=\"onExitTransitionEnd()\"\n        (click)=\"onClick()\"\n        (mouseenter)=\"onMouseEnter()\"\n        (mouseleave)=\"onMouseLeave()\"\n    >\n        <div\n            class=\"notifire-toast__progressBar\"\n            *ngIf=\"toast.config.showProgressBar\"\n        >\n            <span\n                class=\"notifire-toast__progressBar__percentage\"\n                [ngStyle]=\"{ width: state.progress * 100 + '%' }\"\n            ></span>\n        </div>\n        <div\n            class=\"notifire-toast__inner\"\n            *ngIf=\"!toast.config.html; else toastHTML\"\n        >\n            <div\n                class=\"notifire-toast__title\"\n                [attr.id]=\"'snotify_' + toast.id\"\n                *ngIf=\"toast.title\"\n            >\n                {{ toast.title | truncate: toast.config.titleMaxLength }}\n            </div>\n            <div\n                class=\"notifire-toast__body\"\n                *ngIf=\"toast.body\"\n            >\n                {{ toast.body | truncate: toast.config.bodyMaxLength }}\n            </div>\n            <ngx-snotify-prompt\n                *ngIf=\"toast.config.type === state.promptType\"\n                [toast]=\"toast\"\n            >\n            </ngx-snotify-prompt>\n            <div\n                *ngIf=\"!toast.config.icon; else elseBlock\"\n                [ngClass]=\"['snotify-icon', toast.config.iconClass || 'snotify-icon--' + toast.config.type]\"\n            ></div>\n            <ng-template #elseBlock>\n                <img\n                    class=\"snotify-icon\"\n                    [src]=\"toast.config.icon\"\n                >\n            </ng-template>\n        </div>\n        <ng-template #toastHTML>\n            <div\n                class=\"notifire-toast__inner\"\n                [innerHTML]=\"toast.config.html\"\n            ></div>\n        </ng-template>\n        <notifire-button\n            *ngIf=\"toast.config.buttons\"\n            [toast]=\"toast\"\n        ></notifire-button>\n    </div>\n</ng-container>\n" }]
+        }], ctorParameters: function () { return [{ type: SnotificationService }]; }, propDecorators: { toast: [{
+                type: Input
+            }], stateChanged: [{
+                type: Output
+            }] } });
+
+/**
+ * Extract object keys pipe
+ */
+class KeysPipe {
+    transform(value) {
+        if (!value) {
+            return value;
+        }
+        return Object.keys(value);
+    }
+}
+KeysPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: KeysPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+KeysPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.10", ngImport: i0, type: KeysPipe, name: "keys", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: KeysPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'keys',
+                    pure: false,
+                }]
+        }] });
+
+class NgxSnotifireComponent {
+    constructor(service) {
+        this.service = service;
+        this.unsubscribe$ = new Subject();
+        /**
+         * Backdrop Opacity
+         */
+        this.backdrop = -1;
+        /**
+         * How many toasts with backdrop in current queue
+         */
+        this.withBackdrop = [];
+    }
+    ngAfterViewInit() { }
+    ngOnInit() {
+        this.service.emitter
+            .pipe(takeUntil(this.unsubscribe$))
+            .subscribe((toasts) => {
+            if (this.service.defaultConfig &&
+                this.service.defaultConfig.global &&
+                this.service.defaultConfig.global.newOnTop) {
+                this.dockSizeA = this.service.defaultConfig.global.maxOnScreen
+                    ? -this.service.defaultConfig.global.maxOnScreen
+                    : 6;
+                this.dockSizeB = undefined;
+                this.blockSizeA = this.service.defaultConfig.global.maxAtPosition
+                    ? -this.service.defaultConfig.global.maxAtPosition
+                    : 4;
+                this.blockSizeB = undefined;
+                this.withBackdrop = toasts.filter((toast) => toast.config &&
+                    toast.config.backdrop &&
+                    toast.config.backdrop >= 0);
+            }
+            else {
+                this.dockSizeA = 0;
+                this.dockSizeB =
+                    this.service.defaultConfig.global &&
+                        this.service.defaultConfig.global.maxOnScreen;
+                this.blockSizeA = 0;
+                this.blockSizeB =
+                    this.service.defaultConfig.global &&
+                        this.service.defaultConfig.global.maxAtPosition;
+                this.withBackdrop = toasts
+                    .filter((toast) => toast.config &&
+                    toast.config.backdrop &&
+                    toast.config.backdrop >= 0)
+                    .reverse();
+            }
+            this.notifications = this.splitToasts(toasts.slice(this.dockSizeA, this.dockSizeB));
+            this.stateChanged(SnotifireEventType.MOUNTED);
+        });
+    }
+    /**
+     * Split toasts toasts into different objects
+     * @param toasts notifire-toast[]
+     * @returns SnotifyNotifications
+     */
+    splitToasts(toasts) {
+        const result = {};
+        for (const property in SnotificationPositionType) {
+            if (SnotificationPositionType.hasOwnProperty(property)) {
+                result[SnotificationPositionType[property]] = [];
+            }
+        }
+        toasts.forEach((toast) => {
+            if (toast.config.position) {
+                const keyIndex = Object.keys(SnotificationPositionType).indexOf(toast.config.position);
+                const searchedString = Object.values(SnotificationPositionType)[keyIndex];
+                result[searchedString]?.push(toast);
+            }
+        });
+        console.log(result);
+        return result;
+    }
+    getNotificationArray(notifications, position) {
+        return notifications[position];
+    }
+    /**
+     * Changes the backdrop opacity
+     * @param event NotificationEventType
+     */
+    stateChanged(event) {
+        if (!this.withBackdrop.length) {
+            if (this.backdrop && this.backdrop >= 0) {
+                this.backdrop = -1;
+            }
+            return;
+        }
+        switch (event) {
+            case 'mounted':
+                if (this.backdrop && 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;
+        }
+    }
+    ngOnDestroy() {
+        this.unsubscribe$.next();
+        this.unsubscribe$.complete();
+    }
+}
+NgxSnotifireComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: NgxSnotifireComponent, deps: [{ token: SnotificationService }], target: i0.ɵɵFactoryTarget.Component });
+NgxSnotifireComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: NgxSnotifireComponent, selector: "ngx-snotifire", ngImport: i0, template: "<div\n    class=\"snotifire-backdrop\"\n    *ngIf=\"backdrop && backdrop >= 0\"\n    [style.opacity]=\"backdrop\"\n></div>\n\n<div\n    *ngFor=\"let position of notifications | keys\"\n    class=\"snotify snotify-{{ position }}\"\n>\n    <ngx-toast\n        *ngFor=\"let notification of getNotificationArray(notifications, position) | slice: blockSizeA:blockSizeB\"\n        [toast]=\"notification\"\n        (stateChanged)=\"stateChanged($event)\"\n    >\n    </ngx-toast>\n\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToastComponent, selector: "ngx-toast", inputs: ["toast"], outputs: ["stateChanged"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: KeysPipe, name: "keys" }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: NgxSnotifireComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-snotifire', encapsulation: ViewEncapsulation.None, template: "<div\n    class=\"snotifire-backdrop\"\n    *ngIf=\"backdrop && backdrop >= 0\"\n    [style.opacity]=\"backdrop\"\n></div>\n\n<div\n    *ngFor=\"let position of notifications | keys\"\n    class=\"snotify snotify-{{ position }}\"\n>\n    <ngx-toast\n        *ngFor=\"let notification of getNotificationArray(notifications, position) | slice: blockSizeA:blockSizeB\"\n        [toast]=\"notification\"\n        (stateChanged)=\"stateChanged($event)\"\n    >\n    </ngx-toast>\n\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: SnotificationService }]; } });
+
+class NgxSnotifireModule {
+    static forRoot() {
+        return {
+            ngModule: NgxSnotifireModule,
+            providers: [SnotificationService],
+        };
+    }
+}
+NgxSnotifireModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: NgxSnotifireModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgxSnotifireModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.10", ngImport: i0, type: NgxSnotifireModule, declarations: [PromptComponent,
+        ToastComponent,
+        ButtonsComponent,
+        TruncatePipe,
+        KeysPipe,
+        NgxSnotifireComponent], imports: [CommonModule], exports: [NgxSnotifireComponent] });
+NgxSnotifireModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: NgxSnotifireModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: NgxSnotifireModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        PromptComponent,
+                        ToastComponent,
+                        ButtonsComponent,
+                        TruncatePipe,
+                        KeysPipe,
+                        NgxSnotifireComponent,
+                    ],
+                    imports: [CommonModule],
+                    exports: [NgxSnotifireComponent],
+                }]
+        }] });
+
+/**
+ * Snotify default configuration object
+ */
+const ToastDefaults = {
+    global: {
+        newOnTop: true,
+        maxOnScreen: 8,
+        maxAtPosition: 8,
+        filterDuplicates: false,
+    },
+    toast: {
+        type: SnotifireType.INFO,
+        showProgressBar: true,
+        timeout: 5000,
+        closeOnClick: true,
+        pauseOnHover: true,
+        bodyMaxLength: 150,
+        titleMaxLength: 16,
+        backdrop: -1,
+        icon: undefined,
+        iconClass: undefined,
+        html: undefined,
+        position: SnotificationPositionType.RIGHT_BOTTOM,
+        animation: { enter: 'fadeIn', exit: 'fadeOut', time: 400 },
+    },
+    type: {
+        [SnotifireType.PROMPT]: {
+            timeout: 0,
+            closeOnClick: false,
+            buttons: [
+                { text: 'Ok', action: null, bold: true },
+                { text: 'Cancel', action: null, bold: false },
+            ],
+            placeholder: 'Enter answer here...',
+            type: SnotifireType.PROMPT,
+        },
+        [SnotifireType.CONFIRM]: {
+            timeout: 0,
+            closeOnClick: false,
+            buttons: [
+                { text: 'Ok', action: null, bold: true },
+                { text: 'Cancel', action: null, bold: false },
+            ],
+            type: SnotifireType.CONFIRM,
+        },
+        [SnotifireType.SUCCESS]: {
+            type: SnotifireType.SUCCESS,
+        },
+        [SnotifireType.ERROR]: {
+            type: SnotifireType.ERROR,
+        },
+        [SnotifireType.WARNING]: {
+            type: SnotifireType.WARNING,
+        },
+        [SnotifireType.INFO]: {
+            type: SnotifireType.INFO,
+        },
+        [SnotifireType.ASYNC]: {
+            pauseOnHover: false,
+            closeOnClick: false,
+            timeout: 0,
+            showProgressBar: false,
+            type: SnotifireType.ASYNC,
+        },
+    },
+};
+
+/*
+ * Public API Surface of ngx-notifire
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ButtonsComponent, KeysPipe, NgxSnotifireComponent, NgxSnotifireModule, NotifireModel, PromptComponent, SnotificationPositionType, SnotificationService, SnotifireEventType, SnotifireModel, SnotifireType, ToastComponent, ToastDefaults, TruncatePipe };
+//# sourceMappingURL=ngx-snotifire.mjs.map