alert-notification
Version:
A lightweight easy to use module to display alert notifications inside you Angular web applications.
87 lines • 7.92 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component } from '@angular/core';
import { AlertService } from './alert-notification.service';
var AlertNotificationComponent = /** @class */ (function () {
function AlertNotificationComponent(alertService) {
this.alertService = alertService;
this.alerts = [];
}
/**
* @return {?}
*/
AlertNotificationComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
this.position = this.alertService.getPosition();
this.alerts = this.alertService.getAlerts();
this.positionSub = this.alertService.getPositionUpdateListner().subscribe((/**
* @param {?} data
* @return {?}
*/
function (data) {
_this.position = data;
}));
this.alertsSub = this.alertService.getAlertUpdateListner().subscribe((/**
* @param {?} alerts
* @return {?}
*/
function (alerts) {
_this.alerts = alerts;
}));
};
/**
* @param {?} id
* @return {?}
*/
AlertNotificationComponent.prototype.close = /**
* @param {?} id
* @return {?}
*/
function (id) {
this.alertService.removeAlert(id);
};
/**
* @return {?}
*/
AlertNotificationComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.positionSub.unsubscribe();
};
AlertNotificationComponent.decorators = [
{ type: Component, args: [{
// tslint:disable-next-line: component-selector
selector: 'alert-notification',
template: "<ul class=\"alert\" [ngClass]=\"position\">\r\n <li class=\"shadow\" [ngClass]=\"[alert.type, position+'-animate']\" *ngFor=\"let alert of alerts; index as i\">\r\n <div class=\"flex-container\">\r\n <div class=\"content\">\r\n <p class=\"title\">{{ alert?.title }}</p>\r\n <p class=\"message\">{{ alert?.message }}</p>\r\n </div>\r\n <div class=\"\">\r\n <p class=\"close\" (click)=\"close(alert.id)\">✖</p>\r\n </div>\r\n </div>\r\n </li>\r\n</ul>\r\n",
styles: [".top-left{top:0;left:0;padding-left:0;margin-left:1rem}.bottom-left{bottom:0;left:0;padding-left:0;margin-left:1rem}.top-right{top:0;right:0;margin-right:1rem}.bottom-right{bottom:0;right:0;margin-right:1rem}.alert{position:absolute;list-style:none;font-family:Verdana,Tahoma,sans-serif;overflow:hidden;z-index:10000000000!important;padding:.4rem 0}.alert .info{background:#33b5e5;color:#fff;border-color:#09c}.alert .success{background:#07c152;color:#fff;border-color:#007e33}.alert .warning{background:#f44;color:#fff;border-color:#c00}.alert .simple{background:#3d3d3d;color:#fff;border-color:#000}.alert li{margin:.5rem 0;padding:.5rem 1rem;border-radius:2px;background:#057db7;color:#fff}.alert .title{margin:0;font-size:14px}.alert .message{margin:0;font-size:11px}.alert .close{margin:1rem .1rem 1rem 2rem;cursor:pointer;color:#fff;font-size:14px}.alert .close:hover{color:rgba(255,255,255,.57)}.alert .content{flex:1;min-width:180px}.shadow{box-shadow:0 0 4px 1px #a9a4a4!important}.flex-container{display:flex;align-items:center;flex-direction:row}.bottom-right-animate,.top-right-animate{position:relative;-webkit-animation:.4s animateright;animation:.4s animateright}.bottom-left-animate,.top-left-animate{position:relative;-webkit-animation:.4s animateright;animation:.4s animateleft}@-webkit-keyframes animateright{from{right:-300px;opacity:0}to{right:0;opacity:1}}@keyframes animateright{from{right:-300px;opacity:0}to{right:0;opacity:1}}@-webkit-keyframes animateleft{from{left:-300px;opacity:0}to{left:0;opacity:1}}@keyframes animateleft{from{left:-300px;opacity:0}to{left:0;opacity:1}}"]
}] }
];
/** @nocollapse */
AlertNotificationComponent.ctorParameters = function () { return [
{ type: AlertService }
]; };
return AlertNotificationComponent;
}());
export { AlertNotificationComponent };
if (false) {
/** @type {?} */
AlertNotificationComponent.prototype.position;
/** @type {?} */
AlertNotificationComponent.prototype.positionSub;
/** @type {?} */
AlertNotificationComponent.prototype.alerts;
/** @type {?} */
AlertNotificationComponent.prototype.alertsSub;
/**
* @type {?}
* @private
*/
AlertNotificationComponent.prototype.alertService;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWxlcnQtbm90aWZpY2F0aW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL2FsZXJ0LW5vdGlmaWNhdGlvbi8iLCJzb3VyY2VzIjpbImxpYi9hbGVydC1ub3RpZmljYXRpb24uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFxQixNQUFNLGVBQWUsQ0FBQztBQUc3RCxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFFNUQ7SUFlRSxvQ0FBb0IsWUFBMEI7UUFBMUIsaUJBQVksR0FBWixZQUFZLENBQWM7UUFIOUMsV0FBTSxHQUFZLEVBQUUsQ0FBQztJQUc2QixDQUFDOzs7O0lBRW5ELDZDQUFROzs7SUFBUjtRQUFBLGlCQVdDO1FBVkMsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDLFdBQVcsRUFBRSxDQUFDO1FBQ2hELElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDLFlBQVksQ0FBQyxTQUFTLEVBQUUsQ0FBQztRQUU1QyxJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQyxZQUFZLENBQUMsd0JBQXdCLEVBQUUsQ0FBQyxTQUFTOzs7O1FBQUMsVUFBQSxJQUFJO1lBQzVFLEtBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDO1FBQ3ZCLENBQUMsRUFBQyxDQUFDO1FBRUgsSUFBSSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDLHFCQUFxQixFQUFFLENBQUMsU0FBUzs7OztRQUFDLFVBQUEsTUFBTTtZQUN6RSxLQUFJLENBQUMsTUFBTSxHQUFHLE1BQU0sQ0FBQztRQUN2QixDQUFDLEVBQUMsQ0FBQztJQUNMLENBQUM7Ozs7O0lBRUQsMENBQUs7Ozs7SUFBTCxVQUFNLEVBQVU7UUFDZCxJQUFJLENBQUMsWUFBWSxDQUFDLFdBQVcsQ0FBQyxFQUFFLENBQUMsQ0FBQztJQUNwQyxDQUFDOzs7O0lBR0QsZ0RBQVc7OztJQUFYO1FBQ0UsSUFBSSxDQUFDLFdBQVcsQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUNqQyxDQUFDOztnQkFyQ0YsU0FBUyxTQUFDOztvQkFFVCxRQUFRLEVBQUUsb0JBQW9CO29CQUM5Qix5Z0JBQWtEOztpQkFFbkQ7Ozs7Z0JBUFEsWUFBWTs7SUF5Q3JCLGlDQUFDO0NBQUEsQUF2Q0QsSUF1Q0M7U0FqQ1ksMEJBQTBCOzs7SUFHckMsOENBQWlCOztJQUNqQixpREFBMEI7O0lBRTFCLDRDQUFxQjs7SUFDckIsK0NBQXdCOzs7OztJQUVaLGtEQUFrQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBPbkRlc3Ryb3kgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFN1YnNjcmlwdGlvbiB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgQWxlcnQgfSBmcm9tICcuL2FsZXJ0LW5vdGlmaWNhdGlvbi5tb2R1bGUnO1xuaW1wb3J0IHsgQWxlcnRTZXJ2aWNlIH0gZnJvbSAnLi9hbGVydC1ub3RpZmljYXRpb24uc2VydmljZSc7XG5cbkBDb21wb25lbnQoe1xuLy8gdHNsaW50OmRpc2FibGUtbmV4dC1saW5lOiBjb21wb25lbnQtc2VsZWN0b3JcbiAgc2VsZWN0b3I6ICdhbGVydC1ub3RpZmljYXRpb24nLFxuICB0ZW1wbGF0ZVVybDogJy4vYWxlcnQtbm90aWZpY2F0aW9uLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vYWxlcnQtbm90aWZpY2F0aW9uLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgQWxlcnROb3RpZmljYXRpb25Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XG5cblxuICBwb3NpdGlvbjogc3RyaW5nO1xuICBwb3NpdGlvblN1YjogU3Vic2NyaXB0aW9uO1xuXG4gIGFsZXJ0czogQWxlcnRbXSA9IFtdO1xuICBhbGVydHNTdWI6IFN1YnNjcmlwdGlvbjtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGFsZXJ0U2VydmljZTogQWxlcnRTZXJ2aWNlKSB7IH1cblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLnBvc2l0aW9uID0gdGhpcy5hbGVydFNlcnZpY2UuZ2V0UG9zaXRpb24oKTtcbiAgICB0aGlzLmFsZXJ0cyA9IHRoaXMuYWxlcnRTZXJ2aWNlLmdldEFsZXJ0cygpO1xuXG4gICAgdGhpcy5wb3NpdGlvblN1YiA9IHRoaXMuYWxlcnRTZXJ2aWNlLmdldFBvc2l0aW9uVXBkYXRlTGlzdG5lcigpLnN1YnNjcmliZShkYXRhID0+IHtcbiAgICAgIHRoaXMucG9zaXRpb24gPSBkYXRhO1xuICAgIH0pO1xuXG4gICAgdGhpcy5hbGVydHNTdWIgPSB0aGlzLmFsZXJ0U2VydmljZS5nZXRBbGVydFVwZGF0ZUxpc3RuZXIoKS5zdWJzY3JpYmUoYWxlcnRzID0+IHtcbiAgICAgIHRoaXMuYWxlcnRzID0gYWxlcnRzO1xuICAgIH0pO1xuICB9XG5cbiAgY2xvc2UoaWQ6IHN0cmluZykge1xuICAgIHRoaXMuYWxlcnRTZXJ2aWNlLnJlbW92ZUFsZXJ0KGlkKTtcbiAgfVxuXG5cbiAgbmdPbkRlc3Ryb3koKSB7XG4gICAgdGhpcy5wb3NpdGlvblN1Yi51bnN1YnNjcmliZSgpO1xuICB9XG5cbn1cbiJdfQ==