ng2-alert-center
Version:
Alert center provides an alert service and an alert component, you can include in your Angular 2 project.
203 lines (193 loc) • 9.03 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs/Subject'), require('@angular/animations'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define(['exports', '@angular/core', 'rxjs/Subject', '@angular/animations', '@angular/common'], factory) :
(factory((global.ng = global.ng || {}, global.ng.alert = global.ng.alert || {}, global.ng.alert.center = {}),global.ng.core,global.Rx,global.ng.animations,global.ng.common));
}(this, (function (exports,core,Subject,animations,common) { 'use strict';
var AlertCenterService = (function () {
function AlertCenterService() {
this._alerts = new Subject.Subject();
}
Object.defineProperty(AlertCenterService.prototype, "alerts", {
get: function () {
return this._alerts;
},
enumerable: true,
configurable: true
});
AlertCenterService.prototype.alert = function (anAlert) {
console.log('sending alert: ' + JSON.stringify(anAlert));
this._alerts.next(anAlert);
};
return AlertCenterService;
}());
AlertCenterService.decorators = [
{ type: core.Injectable },
];
/** @nocollapse */
AlertCenterService.ctorParameters = function () { return []; };
var AlertCenterComponent = (function () {
function AlertCenterComponent(alertCenterService) {
this.alertCenterService = alertCenterService;
this.animation = 'none';
this.htmlTextEnabled = false;
this.alerts = [];
}
AlertCenterComponent.prototype.ngOnInit = function () {
var _this = this;
this.alertSubscription = this.alertCenterService.alerts.subscribe(function (alert) {
_this.alerts.unshift(alert);
});
};
AlertCenterComponent.prototype.ngOnDestroy = function () {
this.alertSubscription.unsubscribe();
};
AlertCenterComponent.prototype.getAlerts = function () {
return this.alerts;
};
AlertCenterComponent.prototype.remove = function (alert) {
if (this.alerts.indexOf(alert) >= 0) {
this.alerts.splice(this.alerts.indexOf(alert), 1);
}
};
AlertCenterComponent.prototype.getAnimation = function () {
return this.animation;
};
return AlertCenterComponent;
}());
AlertCenterComponent.decorators = [
{ type: core.Component, args: [{
selector: 'nac-alert-center',
template: "\n <div class=\"alert-list\">\n <div *ngFor=\"let alert of getAlerts()\" [@animation]=\"getAnimation()\" >\n <nac-alert [alert]=\"alert\" [htmlTextEnabled]=\"htmlTextEnabled\" (dismissed)=\"remove(alert)\"></nac-alert>\n </div>\n </div>\n ",
animations: [
animations.trigger('animation', [
animations.state('none', animations.style({})),
animations.state('decent', animations.style([{ opacity: 1 }, { maxHeight: 300 }])),
animations.state('fancy', animations.style([{ transform: 'translateX(0)' }, { transform: 'translateY(0)' }, { opacity: 1 }, { maxHeight: 300 }])),
animations.transition('void => fancy', [
animations.style({ opacity: 0, maxHeight: 0, transform: 'translateY(-100%)' }),
animations.animate('300ms ease-in-out')
]),
animations.transition('fancy => void', [
animations.animate('300ms ease-in-out', animations.style({ transform: 'translateX(100%)', height: 0, opacity: 0 }))
]),
animations.transition('void => decent', [
animations.style({ opacity: 0, maxHeight: 0 }),
animations.animate('300ms ease-in-out')
]),
animations.transition('decent => void', [
animations.animate('300ms ease-in-out', animations.style({ height: 0, opacity: 0 }))
])
])
]
},] },
];
/** @nocollapse */
AlertCenterComponent.ctorParameters = function () { return [
{ type: AlertCenterService, },
]; };
AlertCenterComponent.propDecorators = {
'animation': [{ type: core.Input },],
'htmlTextEnabled': [{ type: core.Input },],
};
var Alert = (function () {
function Alert(alertType, text, textStrong, autoDismissTime, dismissable) {
if (textStrong === void 0) { textStrong = ''; }
if (autoDismissTime === void 0) { autoDismissTime = 0; }
if (dismissable === void 0) { dismissable = true; }
this.alertType = alertType;
this.text = text;
this.textStrong = textStrong;
this.autoDismissTime = autoDismissTime;
this.dismissable = dismissable;
}
Alert.create = function (alertType, text, autoDismissTime, dismissable) {
if (autoDismissTime === void 0) { autoDismissTime = 0; }
if (dismissable === void 0) { dismissable = true; }
return new Alert(alertType, text, '', autoDismissTime, dismissable);
};
Alert.prototype.isDismissable = function () {
return this.autoDismissTime === 0 || this.dismissable; // avoid sticking alerts
};
Alert.prototype.isAutoDismissing = function () {
return this.autoDismissTime > 0;
};
return Alert;
}());
(function (AlertType) {
AlertType[AlertType["SUCCESS"] = 0] = "SUCCESS";
AlertType[AlertType["INFO"] = 1] = "INFO";
AlertType[AlertType["WARNING"] = 2] = "WARNING";
AlertType[AlertType["DANGER"] = 3] = "DANGER";
})(exports.AlertType || (exports.AlertType = {}));
var AlertComponent = (function () {
function AlertComponent() {
this.alert = new Alert(exports.AlertType.INFO, '', '');
this.htmlTextEnabled = false;
this.dismissed = new core.EventEmitter();
}
AlertComponent.prototype.ngOnInit = function () {
this.initTimerIfNeeded();
};
AlertComponent.prototype.isSuccess = function () {
return this.alert.alertType === exports.AlertType.SUCCESS;
};
AlertComponent.prototype.isInfo = function () {
return this.alert.alertType === exports.AlertType.INFO;
};
AlertComponent.prototype.isWarning = function () {
return this.alert.alertType === exports.AlertType.WARNING;
};
AlertComponent.prototype.isDanger = function () {
return this.alert.alertType === exports.AlertType.DANGER;
};
AlertComponent.prototype.dismiss = function () {
this.dismissed.emit();
};
AlertComponent.prototype.isDismissEnabled = function () {
return this.alert.isDismissable();
};
AlertComponent.prototype.isTextStrongDefined = function () {
return this.alert.textStrong && this.alert.textStrong.length > 0;
};
AlertComponent.prototype.initTimerIfNeeded = function () {
var _this = this;
if (this.alert.isAutoDismissing()) {
setTimeout(function () { return _this.dismiss(); }, this.alert.autoDismissTime);
}
};
return AlertComponent;
}());
AlertComponent.decorators = [
{ type: core.Component, args: [{
selector: 'nac-alert',
template: "\n <div class=\"alert\"\n [class.alert-success]=\"isSuccess()\"\n [class.alert-info]=\"isInfo()\"\n [class.alert-warning]=\"isWarning()\"\n [class.alert-danger]=\"isDanger()\">\n <button *ngIf=\"isDismissEnabled()\" type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-label=\"Close\" (click)=\"dismiss()\">\n <span aria-hidden=\"true\">×</span>\n </button>\n <strong *ngIf=\"isTextStrongDefined()\">{{alert.textStrong}}</strong><span *ngIf=\"!htmlTextEnabled\">{{alert.text}}</span>\n <span *ngIf=\"htmlTextEnabled\" [innerHtml]=\"alert.text\"></span>\n </div>\n "
},] },
];
/** @nocollapse */
AlertComponent.ctorParameters = function () { return []; };
AlertComponent.propDecorators = {
'alert': [{ type: core.Input },],
'htmlTextEnabled': [{ type: core.Input },],
'dismissed': [{ type: core.Output },],
};
var AlertCenterModule = (function () {
function AlertCenterModule() {
}
return AlertCenterModule;
}());
AlertCenterModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [AlertCenterComponent, AlertComponent],
providers: [AlertCenterService],
imports: [common.CommonModule],
exports: [AlertCenterComponent]
},] },
];
/** @nocollapse */
AlertCenterModule.ctorParameters = function () { return []; };
exports.AlertCenterModule = AlertCenterModule;
exports.Alert = Alert;
exports.AlertCenterService = AlertCenterService;
exports.AlertCenterComponent = AlertCenterComponent;
Object.defineProperty(exports, '__esModule', { value: true });
})));