ng-alertbar
Version:
A configurable alertbar for Angular
517 lines (507 loc) • 17.7 kB
JavaScript
import { DomSanitizer } from '@angular/platform-browser';
import { filter, mapTo, switchMap, take, takeUntil } from 'rxjs/operators';
import { animate, style, transition, trigger } from '@angular/animations';
import { Subject, timer } from 'rxjs';
import { CommonModule } from '@angular/common';
import { Component, EventEmitter, Input, Output, NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var slide = trigger('slide', [
transition(':enter', [style({ transform: 'translateY(-100%)' }), animate('300ms ease-out')]),
transition(':leave', [animate('200ms ease-in', 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 Subject();
this.trigger$ = this._trigger.asObservable();
this._cancel = new 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 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 EventEmitter();
this.close = new EventEmitter();
this.show = false;
this.destroy = new 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(switchMap((/**
* @param {?} trigger
* @return {?}
*/
function (trigger$$1) {
/** @type {?} */
var options = trigger$$1.options;
/** @type {?} */
var showDelay = (options && options.showDelay) || _this.showDelay;
return timer(showDelay).pipe(mapTo(trigger$$1));
})), 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(filter((/**
* @param {?} __0
* @return {?}
*/
function (_a) {
var options = _a.options;
return _this.shouldAlertAutoClose(options);
})), switchMap((/**
* @param {?} __0
* @return {?}
*/
function (_a) {
var options = _a.options;
/** @type {?} */
var lifeTime = (options && options.lifeTime) || _this.lifeTime;
return timer(lifeTime);
})), 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(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 timer(ALERT_LEAVE_ANIMATION_DURATION).pipe(take(1));
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
NgAlertbarComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
this.openTriggerPostDelay$.subscribe((/**
* @param {?} trigger
* @return {?}
*/
function (trigger$$1) { return _this.onTrigger(trigger$$1); }));
this.queuePop.subscribe((/**
* @param {?} trigger
* @return {?}
*/
function (trigger$$1) { return _this.showAlert(trigger$$1); }));
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$$1) {
if (this.queueing && !(trigger$$1.options && trigger$$1.options.bypassQueue) && this.show) {
this.queue.push(trigger$$1);
return;
}
this.showAlert(trigger$$1);
};
/**
* 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$$1) {
this.clearTempOptions(); // Clear previous temporary options
this.assignTempOptions(trigger$$1.options);
this.message = trigger$$1.message;
this.show = true;
this.open.emit(trigger$$1);
};
/**
* 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: 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()\">×</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: DomSanitizer }
]; };
NgAlertbarComponent.propDecorators = {
queueing: [{ type: Input }],
lifeTime: [{ type: Input }],
showDelay: [{ type: Input }],
backgroundColor: [{ type: Input }],
borderColor: [{ type: Input }],
textColor: [{ type: Input }],
widthMode: [{ type: Input }],
closeButton: [{ type: Input }],
html: [{ type: Input }],
open: [{ type: Output }],
close: [{ type: 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: NgModule, args: [{
declarations: [NgAlertbarComponent],
imports: [CommonModule, BrowserAnimationsModule],
exports: [NgAlertbarComponent]
},] }
];
return NgAlertbarModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { NgAlertbarComponent, NgAlertbarModule, NgAlertbarService, slide as ɵa };
//# sourceMappingURL=ng-alertbar.js.map