ngx-bootstrap-alert
Version:
For Angular5+ Provides alert messaging for your application. Message styling is driven by [Bootstrap](https://getbootstrap.com/).
242 lines (232 loc) • 6.54 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';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class BootstrapAlertService {
constructor() {
this._bootstrapAlert = new BehaviorSubject(null);
}
/**
* @param {?} alert
* @return {?}
*/
alert(alert) {
this._bootstrapAlert.next(alert);
}
}
BootstrapAlertService.decorators = [
{ type: Injectable },
];
/** @nocollapse */
BootstrapAlertService.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class BootstrapAlertComponent {
/**
* @param {?} bootstrapAlertService
*/
constructor(bootstrapAlertService) {
this.bootstrapAlertService = bootstrapAlertService;
this.DEFAULT_TIMEOUT = 3000;
this.FADE_TIMEOUT = 600;
this.bootstrapAlerts = [];
this.bootstrapAlertService._bootstrapAlert.subscribe((bootstrapAlert) => {
this.show(bootstrapAlert);
});
}
/**
* @param {?} bootstrapAlert
* @return {?}
*/
show(bootstrapAlert) {
if (!bootstrapAlert) {
return;
}
this.bootstrapAlerts.unshift(bootstrapAlert);
setTimeout(() => {
this.destroy(bootstrapAlert.uuid);
}, bootstrapAlert.timeoutInMiliSeconds ? bootstrapAlert.timeoutInMiliSeconds : this.DEFAULT_TIMEOUT);
}
/**
* @param {?} bootstrapAlert
* @return {?}
*/
fade(bootstrapAlert) {
bootstrapAlert.state = 'destroyed';
}
/**
* @param {?} uuid
* @return {?}
*/
destroy(uuid) {
const /** @type {?} */ bootstrapAlertIndex = this.findIndex(this.bootstrapAlerts, 'uuid', uuid);
if (bootstrapAlertIndex !== -1) {
const /** @type {?} */ bootstrapAlert = this.bootstrapAlerts[bootstrapAlertIndex];
bootstrapAlert.state = 'destroyed';
setTimeout(() => {
this.bootstrapAlerts.splice(bootstrapAlertIndex, 1);
}, this.FADE_TIMEOUT);
}
}
/**
* @param {?} array
* @param {?} attr
* @param {?} value
* @return {?}
*/
findIndex(array, attr, value) {
for (let /** @type {?} */ i = 0; i < array.length; i += 1) {
if (array[i][attr] === value) {
return i;
}
}
return -1;
}
}
BootstrapAlertComponent.decorators = [
{ type: Component, args: [{
selector: 'bootstrap-alert',
template: `<div [ngClass]="alertPosition" class="bootstrap-alert col-lg-4">
<div *ngFor="let bootstrapAlert of bootstrapAlerts" id="{{bootstrapAlert.uuid}}" class="alert alert-dismissable mb-2" [ngClass]="bootstrapAlert.type" []="bootstrapAlert.state">
<button type="button" class="close" (click)="destroy(bootstrapAlert.uuid)" >x</button>
{{bootstrapAlert.message}}
</div>
</div>
`,
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'))
])
]
},] },
];
/** @nocollapse */
BootstrapAlertComponent.ctorParameters = () => [
{ type: BootstrapAlertService, },
];
BootstrapAlertComponent.propDecorators = {
"alertPosition": [{ type: Input },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class BootstrapAlertModule {
}
BootstrapAlertModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, BrowserAnimationsModule],
declarations: [BootstrapAlertComponent],
exports: [BootstrapAlertComponent],
providers: [BootstrapAlertService]
},] },
];
/** @nocollapse */
BootstrapAlertModule.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @record
*/
class BootstrapAlert {
/**
* @param {?} message
* @param {?} type
*/
constructor(message, type) {
this._uuid = v4();
this._type = type;
this._message = message;
this._state = 'visible';
}
/**
* @return {?}
*/
get message() {
return this._message;
}
/**
* @param {?} message
* @return {?}
*/
set message(message) {
this._message = message;
}
/**
* @return {?}
*/
get timeoutInMiliSeconds() {
return this._timeoutInMiliSeconds;
}
/**
* @param {?} timeoutInMiliSeconds
* @return {?}
*/
set timeoutInMiliSeconds(timeoutInMiliSeconds) {
this._timeoutInMiliSeconds = timeoutInMiliSeconds;
}
/**
* @return {?}
*/
get type() {
return this._type;
}
/**
* @param {?} type
* @return {?}
*/
set type(type) {
this._type = type;
}
/**
* @return {?}
*/
get uuid() {
return this._uuid;
}
/**
* @return {?}
*/
get state() {
return this._state;
}
/**
* @param {?} state
* @return {?}
*/
set state(state$$1) {
this._state = state$$1;
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Generated bundle index. Do not edit.
*/
export { BootstrapAlertService, BootstrapAlert, BootstrapAlertComponent, BootstrapAlertModule };
//# sourceMappingURL=ngx-bootstrap-alert.js.map