ng-pop-alert
Version:
This is an angular Notification or Alert . it help you to notify messages to users of your application in every state it is required.
396 lines (377 loc) • 11.3 kB
JavaScript
import { Component, Injectable, Input, NgModule } from '@angular/core';
import { Subject as Subject$1 } from 'rxjs/Subject';
import { Observable as Observable$1 } from 'rxjs/Observable';
import 'rxjs/add/observable/from';
import { CommonModule } from '@angular/common';
import { HttpModule } from '@angular/http';
import { DomSanitizer } from '@angular/platform-browser';
class ValidationErrorService {
constructor() {
}
/**
* This is used to compose validation messages
* @param {?} validationObj
* @param {?=} message
* @return {?}
*/
message(validationObj, message) {
let /** @type {?} */ msg = ``;
if (validationObj && validationObj.constructor === Object) {
msg = this.processObj(validationObj);
}
else if (validationObj && validationObj.constructor === Array) {
msg = this.processArray(validationObj);
}
return (msg) ? msg : message;
}
/**
* @param {?} data
* @return {?}
*/
processObj(data) {
let /** @type {?} */ msg = ``;
Object.keys(data).forEach((key) => {
if (data[key] && data[key].constructor === String) {
msg += `${data[key]}. <br>`;
}
else if (data[key] && data[key].constructor === Object) {
msg += this.processObj(key);
}
else if (data[key] && data[key].constructor === Array) {
msg += this.processArray(data[key]);
}
});
return msg;
}
/**
* @param {?} dataObj
* @return {?}
*/
processArray(dataObj) {
let /** @type {?} */ msg = ``;
dataObj.forEach((data) => {
if (data && data.constructor === String) {
msg += `${data}. <br>`;
}
else if (data && data.constructor === Object) {
msg += this.processObj(data);
}
else if (data && data.constructor === Array) {
msg += this.processArray(data);
}
});
return msg;
}
}
ValidationErrorService.decorators = [
{ type: Injectable },
];
/**
* @nocollapse
*/
ValidationErrorService.ctorParameters = () => [];
class AlertEventService {
constructor() {
this.listeners = {};
this.eventsSubject = new Subject$1();
this.events = Observable$1.from(this.eventsSubject);
this.events.subscribe(({ name, args }) => {
if (this.listeners[name]) {
for (const listener of this.listeners[name]) {
listener(...args);
}
}
});
}
/**
* @param {?} name
* @param {?} listener
* @return {?}
*/
on(name, listener) {
if (!this.listeners[name]) {
this.listeners[name] = [];
this.listeners[name].push(listener);
}
if (this.listeners[name]) {
this.listeners[name][0] = listener;
}
}
/**
* @param {?} name
* @param {...?} args
* @return {?}
*/
broadcast(name, ...args) {
// console.log('name=', name);
this.eventsSubject.next({
name,
args
});
}
}
AlertEventService.decorators = [
{ type: Injectable },
];
/**
* @nocollapse
*/
AlertEventService.ctorParameters = () => [];
class NgPopAlertService {
/**
* @param {?} validationError
* @param {?} alertEventService
*/
constructor(validationError, alertEventService) {
this.validationError = validationError;
this.alertEventService = alertEventService;
this.alert = {
visible: false,
message: '',
type: '',
alert_class: ''
};
}
/**
* Success Alert
* @param {?} message
* @return {?}
*/
success(message) {
this.alert['alert_class'] = 'alert alert-success animated fadeIn';
this.alert['message'] = message;
this.alert['visible'] = true;
this.alert['type'] = 'success';
this.alertEventService.broadcast('AlertMessage', this.alert);
return this.alert;
}
/**
* Info Alert
* @param {?} message
* @return {?}
*/
info(message) {
this.alert['alert_class'] = 'alert alert-info animated fadeIn';
this.alert['message'] = message;
this.alert['visible'] = true;
this.alert['type'] = 'info';
this.alertEventService.broadcast('AlertMessage', this.alert);
return this.alert;
}
/**
* Warning Alert
* @param {?} message
* @return {?}
*/
warning(message) {
this.alert['alert_class'] = 'alert alert-warning animated fadeIn';
this.alert['message'] = message;
this.alert['visible'] = true;
this.alert['type'] = 'warning';
this.alertEventService.broadcast('AlertMessage', this.alert);
return this.alert;
}
/**
* Error Alert
* @param {?} defaultMessage
* @param {?=} data
* @return {?}
*/
error(defaultMessage, data) {
this.alert['alert_class'] = 'alert alert-danger animated fadeIn';
this.alert['message'] = defaultMessage;
if (data) {
this.alert['message'] = this.showError(data, defaultMessage);
}
this.alert['visible'] = true;
this.alert['type'] = 'error';
this.alertEventService.broadcast('AlertMessage', this.alert);
return this.alert;
}
/**
* This is used to clear alert from display
* @return {?}
*/
clear() {
this.alertEventService.broadcast('closeAlertMessage', new Date());
}
/**
* This is used to display Error message
* @param {?} data
* @param {?} message
* @return {?}
*/
showError(data, message) {
if (data.constructor === Object || data.constructor === Array) {
return this.validationError.message(data, message);
}
else {
data = (data.constructor === String) ? data : message;
return data || message || data['statusText'] || 'Error encountered while processing request, please try again.';
}
}
}
NgPopAlertService.decorators = [
{ type: Injectable },
];
/**
* @nocollapse
*/
NgPopAlertService.ctorParameters = () => [
{ type: ValidationErrorService, },
{ type: AlertEventService, },
];
const NG_POP_ALERT_CONF = {
duration: 10000,
};
class NgPopAlertComponent {
/**
* @param {?} sanitizer
* @param {?} alertEventService
*/
constructor(sanitizer, alertEventService) {
this.sanitizer = sanitizer;
this.alertEventService = alertEventService;
this.overlay = true;
this.styles = {};
this.alert = {
visible: false,
message: '',
type: '',
alert_class: ''
};
this.message = ``;
}
/**
* @return {?}
*/
closeAlert() {
this.alertClosure = setTimeout(() => {
this.alert['visible'] = false;
}, NG_POP_ALERT_CONF.duration);
}
/**
* @return {?}
*/
ngOnInit() {
this.alertEventService.on('AlertMessage', data => {
clearTimeout(this.alertClosure);
setTimeout(() => {
this.alert = data;
console.log('duration=', NG_POP_ALERT_CONF.duration);
this.message = this.sanitizer.bypassSecurityTrustHtml(this.alert['message']);
this.closeAlert();
}, 200);
});
this.alertEventService.on('closeAlertMessage', () => {
this.alert['visible'] = false;
clearTimeout(this.alertClosure);
});
}
}
NgPopAlertComponent.decorators = [
{ type: Component, args: [{
selector: 'ng-pop-alert',
template: `
<div [class.notification-display]="overlay" class="bordered" [ngStyle]="styles" [hidden]="!alert['visible']">
<div class="{{alert['alert_class']}}" role="alert" align="left" style="position: relative; padding: 10px;">
<a role="button" (click)="alert['visible']=false" class="pull-right alert-link" style="cursor: pointer;"> <b>×</b> </a>
<span style="font-size:13px;" [innerHTML]="message"></span>
</div>
</div>
`,
styles: [`
div.bordered {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
div.alert-success {
color: #3c763d !important;
background-color: #dff0d8 !important;
border-color: #d6e9c6 !important;
}
div.alert-success > a, div.alert-success > span {
text-decoration: none !important;
color: #3c763d !important;
}
div.alert-warning {
color: #8a6d3b !important;
background-color: #fcf8e3 !important;
border-color: #faebcc !important;
}
div.alert-warning > a, div.alert-warning > span {
text-decoration: none !important;
color: #8a6d3b !important;
}
div .alert-danger {
color: #a94442 !important;
background-color: #f2dede !important;
border-color: #ebccd1 !important;
}
div.alert-danger > a, div.alert-danger > span {
text-decoration: none !important;
color: #a94442 !important;
}
div.alert-info {
color: #31708f !important;
background-color: #d9edf7 !important;
border-color: #bce8f1 !important;
}
div.alert-info > a, div.alert-info > span {
text-decoration: none !important;
color: #31708f !important;
}
.notification-display {
position: fixed;
min-width: 100px;
width: auto !important;
top: 10px;
right: 10px;
z-index: 100000 !important;
}
`]
},] },
];
/**
* @nocollapse
*/
NgPopAlertComponent.ctorParameters = () => [
{ type: DomSanitizer, },
{ type: AlertEventService, },
];
NgPopAlertComponent.propDecorators = {
'overlay': [{ type: Input },],
'styles': [{ type: Input },],
};
class NgPopAlertModule {
/**
* @return {?}
*/
static forRoot() {
return {
ngModule: NgPopAlertModule,
providers: [NgPopAlertService, AlertEventService, ValidationErrorService]
};
}
}
NgPopAlertModule.decorators = [
{ type: NgModule, args: [{
imports: [
HttpModule,
CommonModule
],
declarations: [NgPopAlertComponent],
exports: [NgPopAlertComponent]
},] },
];
/**
* @nocollapse
*/
NgPopAlertModule.ctorParameters = () => [];
// export {AlertEventService} from './src/app/ng-pop-alert/alert.event.service';
/**
* Generated bundle index. Do not edit.
*/
export { NgPopAlertService, NG_POP_ALERT_CONF, NgPopAlertModule, AlertEventService as ɵb, NgPopAlertComponent as ɵc, ValidationErrorService as ɵa };
//# sourceMappingURL=ng-pop-alert.js.map