ng-alertbar/bundles/ng-alertbar.umd.js

A configurable alertbar for Angular

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/platform-browser'), require('rxjs/operators'), require('@angular/animations'), require('rxjs'), require('@angular/common'), require('@angular/core'), require('@angular/platform-browser/animations')) :
    typeof define === 'function' && define.amd ? define('ng-alertbar', ['exports', '@angular/platform-browser', 'rxjs/operators', '@angular/animations', 'rxjs', '@angular/common', '@angular/core', '@angular/platform-browser/animations'], factory) :
    (factory((global['ng-alertbar'] = {}),global.ng.platformBrowser,global.rxjs.operators,global.ng.animations,global.rxjs,global.ng.common,global.ng.core,global.ng.platformBrowser.animations));
}(this, (function (exports,platformBrowser,operators,animations,rxjs,common,core,animations$1) { 'use strict';

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    /** @type {?} */
    var slide = animations.trigger('slide', [
        animations.transition(':enter', [animations.style({ transform: 'translateY(-100%)' }), animations.animate('300ms ease-out')]),
        animations.transition(':leave', [animations.animate('200ms ease-in', animations.style({ transform: 'translateY(-100%' }))])
    ]);

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    /** @type {?} */
    var defaults = {
        queueingEnabled: true,
        lifeTimeMs: 5000,
        showDelayMs: 100,
        backgroundColor: 'linear-gradient(to top right, #9ce29c, #c9f9b9)',
        borderColor: '#34a40e',
        textColor: 'black',
        widthMode: 'partial',
        closeButtonEnabled: true,
        useHtml: false
    };

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    var NgAlertbarService = /** @class */ (function () {
        function NgAlertbarService() {
            this._trigger = new rxjs.Subject();
            this.trigger$ = this._trigger.asObservable();
            this._cancel = new rxjs.Subject();
            this.cancel$ = this._cancel.asObservable();
        }
        /**
         * Triggers an alert with the given message and options
         *
         * If no options are passed, the alert will use the existing component configuration
         *
         * The options provided will only apply to the alert that opens from this trigger
         *
         * @param message The message to display within the alert
         * @param options One off alert options to apply for this alert instance
         */
        /**
         * Triggers an alert with the given message and options
         *
         * If no options are passed, the alert will use the existing component configuration
         *
         * The options provided will only apply to the alert that opens from this trigger
         *
         * @param {?} message The message to display within the alert
         * @param {?=} options One off alert options to apply for this alert instance
         * @return {?}
         */
        NgAlertbarService.prototype.triggerAlert = /**
         * Triggers an alert with the given message and options
         *
         * If no options are passed, the alert will use the existing component configuration
         *
         * The options provided will only apply to the alert that opens from this trigger
         *
         * @param {?} message The message to display within the alert
         * @param {?=} options One off alert options to apply for this alert instance
         * @return {?}
         */
            function (message, options) {
                this._trigger.next({ message: message, options: options });
            };
        /**
         * Cancels the currently displayed alert
         */
        /**
         * Cancels the currently displayed alert
         * @return {?}
         */
        NgAlertbarService.prototype.cancelAlerts = /**
         * Cancels the currently displayed alert
         * @return {?}
         */
            function () {
                this._cancel.next();
            };
        return NgAlertbarService;
    }());

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    /** @type {?} */
    var ALERT_LEAVE_ANIMATION_DURATION = 200;
    var NgAlertbarComponent = /** @class */ (function () {
        function NgAlertbarComponent(alertBarService, domSanitizer) {
            this.alertBarService = alertBarService;
            this.domSanitizer = domSanitizer;
            this.queue = [];
            this.queuePop = new rxjs.Subject();
            this.queueing = defaults.queueingEnabled;
            this.lifeTime = defaults.lifeTimeMs;
            this.showDelay = defaults.showDelayMs;
            this.backgroundColor = defaults.backgroundColor;
            this.borderColor = defaults.borderColor;
            this.textColor = defaults.textColor;
            this.widthMode = defaults.widthMode;
            this.closeButton = defaults.closeButtonEnabled;
            this.html = defaults.useHtml;
            this.open = new core.EventEmitter();
            this.close = new core.EventEmitter();
            this.show = false;
            this.destroy = new rxjs.Subject();
        }
        Object.defineProperty(NgAlertbarComponent.prototype, "isFullWidth", {
            get: /**
             * @return {?}
             */ function () {
                if (this.tempWidthMode) {
                    return this.tempWidthMode === 'full';
                }
                return this.widthMode === 'full';
            },
            enumerable: true,
            configurable: true
        });
        Object.defineProperty(NgAlertbarComponent.prototype, "showCloseButton", {
            get: /**
             * @return {?}
             */ function () {
                if (this.tempCloseButton != null) {
                    return this.tempCloseButton;
                }
                return this.closeButton;
            },
            enumerable: true,
            configurable: true
        });
        Object.defineProperty(NgAlertbarComponent.prototype, "useHtml", {
            get: /**
             * @return {?}
             */ function () {
                if (this.tempHtml != null) {
                    return this.tempHtml;
                }
                return this.html;
            },
            enumerable: true,
            configurable: true
        });
        Object.defineProperty(NgAlertbarComponent.prototype, "htmlMessage", {
            get: /**
             * @return {?}
             */ function () {
                return this.domSanitizer.bypassSecurityTrustHtml(this.message);
            },
            enumerable: true,
            configurable: true
        });
        Object.defineProperty(NgAlertbarComponent.prototype, "openTriggerPostDelay$", {
            /**
             * The trigger stream after waiting the specified showDelay since the alert was triggered
             */
            get: /**
             * The trigger stream after waiting the specified showDelay since the alert was triggered
             * @return {?}
             */ function () {
                var _this = this;
                return this.alertBarService.trigger$.pipe(operators.switchMap(( /**
                 * @param {?} trigger
                 * @return {?}
                 */function (trigger) {
                    /** @type {?} */
                    var options = trigger.options;
                    /** @type {?} */
                    var showDelay = (options && options.showDelay) || _this.showDelay;
                    return rxjs.timer(showDelay).pipe(operators.mapTo(trigger));
                })), operators.takeUntil(this.destroy));
            },
            enumerable: true,
            configurable: true
        });
        Object.defineProperty(NgAlertbarComponent.prototype, "postAlertLifetime$", {
            /**
             * The trigger stream after waiting the specified lifetime since the alert opened
             */
            get: /**
             * The trigger stream after waiting the specified lifetime since the alert opened
             * @return {?}
             */ function () {
                var _this = this;
                return this.open.pipe(operators.filter(( /**
                 * @param {?} __0
                 * @return {?}
                 */function (_a) {
                    var options = _a.options;
                    return _this.shouldAlertAutoClose(options);
                })), operators.switchMap(( /**
                 * @param {?} __0
                 * @return {?}
                 */function (_a) {
                    var options = _a.options;
                    /** @type {?} */
                    var lifeTime = (options && options.lifeTime) || _this.lifeTime;
                    return rxjs.timer(lifeTime);
                })), operators.takeUntil(this.destroy));
            },
            enumerable: true,
            configurable: true
        });
        Object.defineProperty(NgAlertbarComponent.prototype, "cancelTrigger$", {
            /**
             * The service cancel trigger
             */
            get: /**
             * The service cancel trigger
             * @return {?}
             */ function () {
                return this.alertBarService.cancel$.pipe(operators.takeUntil(this.destroy));
            },
            enumerable: true,
            configurable: true
        });
        Object.defineProperty(NgAlertbarComponent.prototype, "alertLeaveTimer", {
            /**
             * Timer representing the delay taken for an alert to animate when exiting
             */
            get: /**
             * Timer representing the delay taken for an alert to animate when exiting
             * @return {?}
             */ function () {
                return rxjs.timer(ALERT_LEAVE_ANIMATION_DURATION).pipe(operators.take(1));
            },
            enumerable: true,
            configurable: true
        });
        /**
         * @return {?}
         */
        NgAlertbarComponent.prototype.ngOnInit = /**
         * @return {?}
         */
            function () {
                var _this = this;
                this.openTriggerPostDelay$.subscribe(( /**
                 * @param {?} trigger
                 * @return {?}
                 */function (trigger) { return _this.onTrigger(trigger); }));
                this.queuePop.subscribe(( /**
                 * @param {?} trigger
                 * @return {?}
                 */function (trigger) { return _this.showAlert(trigger); }));
                this.postAlertLifetime$.subscribe(( /**
                 * @return {?}
                 */function () { return _this.onClose(); }));
                this.cancelTrigger$.subscribe(( /**
                 * @return {?}
                 */function () { return _this.onClose(); }));
            };
        /**
         * @return {?}
         */
        NgAlertbarComponent.prototype.ngOnDestroy = /**
         * @return {?}
         */
            function () {
                this.destroy.next();
            };
        /**
         * @private
         * @param {?} trigger
         * @return {?}
         */
        NgAlertbarComponent.prototype.onTrigger = /**
         * @private
         * @param {?} trigger
         * @return {?}
         */
            function (trigger) {
                if (this.queueing && !(trigger.options && trigger.options.bypassQueue) && this.show) {
                    this.queue.push(trigger);
                    return;
                }
                this.showAlert(trigger);
            };
        /**
         * Sets up temp variables and shows the alert
         * @param trigger The trigger to display
         */
        /**
         * Sets up temp variables and shows the alert
         * @private
         * @param {?} trigger The trigger to display
         * @return {?}
         */
        NgAlertbarComponent.prototype.showAlert = /**
         * Sets up temp variables and shows the alert
         * @private
         * @param {?} trigger The trigger to display
         * @return {?}
         */
            function (trigger) {
                this.clearTempOptions(); // Clear previous temporary options
                this.assignTempOptions(trigger.options);
                this.message = trigger.message;
                this.show = true;
                this.open.emit(trigger);
            };
        /**
         * Closes any open alert. If there are any alerts waiting in the queue,
         * the alert is popped off the queue and emitted for opening
         */
        /**
         * Closes any open alert. If there are any alerts waiting in the queue,
         * the alert is popped off the queue and emitted for opening
         * @return {?}
         */
        NgAlertbarComponent.prototype.onClose = /**
         * Closes any open alert. If there are any alerts waiting in the queue,
         * the alert is popped off the queue and emitted for opening
         * @return {?}
         */
            function () {
                var _this = this;
                this.closeAlert();
                if (this.queue.length > 0) {
                    this.alertLeaveTimer.subscribe(( /**
                     * @return {?}
                     */function () {
                        _this.queuePop.next(_this.queue.shift());
                    }));
                }
            };
        /**
         * @private
         * @return {?}
         */
        NgAlertbarComponent.prototype.closeAlert = /**
         * @private
         * @return {?}
         */
            function () {
                this.show = false;
                this.close.emit();
            };
        /**
         * Clears out any temporary config options so that they
         * do not persist beyond their single use
         */
        /**
         * Clears out any temporary config options so that they
         * do not persist beyond their single use
         * @private
         * @return {?}
         */
        NgAlertbarComponent.prototype.clearTempOptions = /**
         * Clears out any temporary config options so that they
         * do not persist beyond their single use
         * @private
         * @return {?}
         */
            function () {
                this.tempBackgroundColor = null;
                this.tempBorderColor = null;
                this.tempTextColor = null;
                this.tempWidthMode = null;
                this.tempCloseButton = null;
                this.tempHtml = null;
            };
        /**
         * Assigns the options included in the trigger to the temporary
         * config variables so they can apply for the upcoming alert
         * @param options The options passed in the trigger
         */
        /**
         * Assigns the options included in the trigger to the temporary
         * config variables so they can apply for the upcoming alert
         * @private
         * @param {?} options The options passed in the trigger
         * @return {?}
         */
        NgAlertbarComponent.prototype.assignTempOptions = /**
         * Assigns the options included in the trigger to the temporary
         * config variables so they can apply for the upcoming alert
         * @private
         * @param {?} options The options passed in the trigger
         * @return {?}
         */
            function (options) {
                if (!options) {
                    return;
                }
                this.tempBackgroundColor = options.backgroundColor;
                this.tempBorderColor = options.borderColor;
                this.tempTextColor = options.textColor;
                this.tempWidthMode = options.widthMode;
                this.tempCloseButton = options.closeButton;
                this.tempHtml = options.html;
            };
        /**
         * @private
         * @param {?} options
         * @return {?}
         */
        NgAlertbarComponent.prototype.shouldAlertAutoClose = /**
         * @private
         * @param {?} options
         * @return {?}
         */
            function (options) {
                if (options && options.lifeTime != null) {
                    return options.lifeTime > 0;
                }
                return this.lifeTime > 0; // Fallback to component setting
            };
        NgAlertbarComponent.decorators = [
            { type: core.Component, args: [{
                        selector: 'ng-alertbar',
                        template: "\n    <div *ngIf=\"show\" [@slide] class=\"ng-alert-bar-wrapper\">\n      <div\n        class=\"ng-alert-bar\"\n        [class.full-width]=\"isFullWidth\"\n        [style.background]=\"tempBackgroundColor || backgroundColor\"\n        [style.border-color]=\"tempBorderColor || borderColor\"\n      >\n        <span class=\"ng-alert-bar-text\" [style.color]=\"tempTextColor || textColor\">\n          <span *ngIf=\"!useHtml; else htmlMessageContainer\">{{ message }}</span>\n          <ng-template #htmlMessageContainer><span [innerHTML]=\"htmlMessage\"></span></ng-template>\n          <span *ngIf=\"showCloseButton\" class=\"ng-alert-close\" (click)=\"onClose()\">&times;</span>\n        </span>\n      </div>\n    </div>\n  ",
                        animations: [slide],
                        styles: [".ng-alert-bar-wrapper{position:absolute;top:0;left:0;width:100%;text-align:center;pointer-events:none}.ng-alert-bar{pointer-events:all}.ng-alert-bar:not(.full-width){display:inline-block}.ng-alert-close{font-size:1.1em;margin-left:.25rem;vertical-align:middle;cursor:pointer}"]
                    }] }
        ];
        /** @nocollapse */
        NgAlertbarComponent.ctorParameters = function () {
            return [
                { type: NgAlertbarService },
                { type: platformBrowser.DomSanitizer }
            ];
        };
        NgAlertbarComponent.propDecorators = {
            queueing: [{ type: core.Input }],
            lifeTime: [{ type: core.Input }],
            showDelay: [{ type: core.Input }],
            backgroundColor: [{ type: core.Input }],
            borderColor: [{ type: core.Input }],
            textColor: [{ type: core.Input }],
            widthMode: [{ type: core.Input }],
            closeButton: [{ type: core.Input }],
            html: [{ type: core.Input }],
            open: [{ type: core.Output }],
            close: [{ type: core.Output }]
        };
        return NgAlertbarComponent;
    }());

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    var NgAlertbarModule = /** @class */ (function () {
        function NgAlertbarModule() {
        }
        /**
         * @return {?}
         */
        NgAlertbarModule.forRoot = /**
         * @return {?}
         */
            function () {
                return {
                    ngModule: NgAlertbarModule,
                    providers: [NgAlertbarService]
                };
            };
        NgAlertbarModule.decorators = [
            { type: core.NgModule, args: [{
                        declarations: [NgAlertbarComponent],
                        imports: [common.CommonModule, animations$1.BrowserAnimationsModule],
                        exports: [NgAlertbarComponent]
                    },] }
        ];
        return NgAlertbarModule;
    }());

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */

    exports.NgAlertbarComponent = NgAlertbarComponent;
    exports.NgAlertbarModule = NgAlertbarModule;
    exports.NgAlertbarService = NgAlertbarService;
    exports.ɵa = slide;

    Object.defineProperty(exports, '__esModule', { value: true });

})));

//# sourceMappingURL=ng-alertbar.umd.js.map