ngx-bootstrap-alert
Version:
For Angular5+ Provides alert messaging for your application. Message styling is driven by [Bootstrap](https://getbootstrap.com/).
161 lines (158 loc) • 6.5 kB
JavaScript
import { Injectable, Component, Input, NgModule } from '@angular/core';
import 'rxjs/add/operator/toPromise';
import { BehaviorSubject } from 'rxjs/Rx';
import { trigger, state, transition, style, animate } from '@angular/animations';
import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { v4 } from 'uuid';
var BootstrapAlertService = (function () {
function BootstrapAlertService() {
this._bootstrapAlert = new BehaviorSubject(null);
}
BootstrapAlertService.prototype.alert = function (alert) {
this._bootstrapAlert.next(alert);
};
return BootstrapAlertService;
}());
BootstrapAlertService.decorators = [
{ type: Injectable },
];
BootstrapAlertService.ctorParameters = function () { return []; };
var BootstrapAlertComponent = (function () {
function BootstrapAlertComponent(bootstrapAlertService) {
var _this = this;
this.bootstrapAlertService = bootstrapAlertService;
this.DEFAULT_TIMEOUT = 3000;
this.FADE_TIMEOUT = 600;
this.bootstrapAlerts = [];
this.bootstrapAlertService._bootstrapAlert.subscribe(function (bootstrapAlert) {
_this.show(bootstrapAlert);
});
}
BootstrapAlertComponent.prototype.show = function (bootstrapAlert) {
var _this = this;
if (!bootstrapAlert) {
return;
}
this.bootstrapAlerts.unshift(bootstrapAlert);
setTimeout(function () {
_this.destroy(bootstrapAlert.uuid);
}, bootstrapAlert.timeoutInMiliSeconds ? bootstrapAlert.timeoutInMiliSeconds : this.DEFAULT_TIMEOUT);
};
BootstrapAlertComponent.prototype.fade = function (bootstrapAlert) {
bootstrapAlert.state = 'destroyed';
};
BootstrapAlertComponent.prototype.destroy = function (uuid) {
var _this = this;
var bootstrapAlertIndex = this.findIndex(this.bootstrapAlerts, 'uuid', uuid);
if (bootstrapAlertIndex !== -1) {
var bootstrapAlert = this.bootstrapAlerts[bootstrapAlertIndex];
bootstrapAlert.state = 'destroyed';
setTimeout(function () {
_this.bootstrapAlerts.splice(bootstrapAlertIndex, 1);
}, this.FADE_TIMEOUT);
}
};
BootstrapAlertComponent.prototype.findIndex = function (array, attr, value) {
for (var i = 0; i < array.length; i += 1) {
if (array[i][attr] === value) {
return i;
}
}
return -1;
};
return BootstrapAlertComponent;
}());
BootstrapAlertComponent.decorators = [
{ type: Component, args: [{
selector: 'bootstrap-alert',
template: "<div [ngClass]=\"alertPosition\" class=\"bootstrap-alert col-lg-4\">\n\t<div *ngFor=\"let bootstrapAlert of bootstrapAlerts\" id=\"{{bootstrapAlert.uuid}}\" class=\"alert alert-dismissable mb-2\" [ngClass]=\"bootstrapAlert.type\" [@alertVisible]=\"bootstrapAlert.state\">\n\t\t<button type=\"button\" class=\"close\" (click)=\"destroy(bootstrapAlert.uuid)\" >x</button>\n\t\t{{bootstrapAlert.message}}\n\t</div>\n</div>\n",
styles: [".bootstrap-alert{z-index:2000;position:fixed}.top-left{left:1rem;top:1rem}.top-center{margin:auto;left:0;right:0;top:1rem}.top-right{right:1rem;top:1rem}.bottom-left{left:1rem;bottom:1rem}.bottom-center{margin:auto;left:0;right:0;bottom:1rem}.bottom-right{right:1rem;bottom:1rem}"],
animations: [
trigger('alertVisible', [
state('visible', style({ opacity: 1 })),
state('destroyed', style({ opacity: 0 })),
transition('visible => destroyed', animate('600ms')),
transition('destroyed => visible', animate('600ms'))
])
]
},] },
];
BootstrapAlertComponent.ctorParameters = function () { return [
{ type: BootstrapAlertService, },
]; };
BootstrapAlertComponent.propDecorators = {
"alertPosition": [{ type: Input },],
};
var BootstrapAlertModule = (function () {
function BootstrapAlertModule() {
}
return BootstrapAlertModule;
}());
BootstrapAlertModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, BrowserAnimationsModule],
declarations: [BootstrapAlertComponent],
exports: [BootstrapAlertComponent],
providers: [BootstrapAlertService]
},] },
];
BootstrapAlertModule.ctorParameters = function () { return []; };
var BootstrapAlert = (function () {
function BootstrapAlert(message, type) {
this._uuid = v4();
this._type = type;
this._message = message;
this._state = 'visible';
}
Object.defineProperty(BootstrapAlert.prototype, "message", {
get: function () {
return this._message;
},
set: function (message) {
this._message = message;
},
enumerable: true,
configurable: true
});
Object.defineProperty(BootstrapAlert.prototype, "timeoutInMiliSeconds", {
get: function () {
return this._timeoutInMiliSeconds;
},
set: function (timeoutInMiliSeconds) {
this._timeoutInMiliSeconds = timeoutInMiliSeconds;
},
enumerable: true,
configurable: true
});
Object.defineProperty(BootstrapAlert.prototype, "type", {
get: function () {
return this._type;
},
set: function (type) {
this._type = type;
},
enumerable: true,
configurable: true
});
Object.defineProperty(BootstrapAlert.prototype, "uuid", {
get: function () {
return this._uuid;
},
enumerable: true,
configurable: true
});
Object.defineProperty(BootstrapAlert.prototype, "state", {
get: function () {
return this._state;
},
set: function (state$$1) {
this._state = state$$1;
},
enumerable: true,
configurable: true
});
return BootstrapAlert;
}());
export { BootstrapAlertService, BootstrapAlert, BootstrapAlertComponent, BootstrapAlertModule };
//# sourceMappingURL=ngx-bootstrap-alert.js.map