alert-notification
Version:
A lightweight easy to use module to display alert notifications inside you Angular web applications.
77 lines • 7.38 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';
export class AlertNotificationComponent {
/**
* @param {?} alertService
*/
constructor(alertService) {
this.alertService = alertService;
this.alerts = [];
}
/**
* @return {?}
*/
ngOnInit() {
this.position = this.alertService.getPosition();
this.alerts = this.alertService.getAlerts();
this.positionSub = this.alertService.getPositionUpdateListner().subscribe((/**
* @param {?} data
* @return {?}
*/
data => {
this.position = data;
}));
this.alertsSub = this.alertService.getAlertUpdateListner().subscribe((/**
* @param {?} alerts
* @return {?}
*/
alerts => {
this.alerts = alerts;
}));
}
/**
* @param {?} id
* @return {?}
*/
close(id) {
this.alertService.removeAlert(id);
}
/**
* @return {?}
*/
ngOnDestroy() {
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 = () => [
{ type: AlertService }
];
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWxlcnQtbm90aWZpY2F0aW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL2FsZXJ0LW5vdGlmaWNhdGlvbi8iLCJzb3VyY2VzIjpbImxpYi9hbGVydC1ub3RpZmljYXRpb24uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFxQixNQUFNLGVBQWUsQ0FBQztBQUc3RCxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFRNUQsTUFBTSxPQUFPLDBCQUEwQjs7OztJQVNyQyxZQUFvQixZQUEwQjtRQUExQixpQkFBWSxHQUFaLFlBQVksQ0FBYztRQUg5QyxXQUFNLEdBQVksRUFBRSxDQUFDO0lBRzZCLENBQUM7Ozs7SUFFbkQsUUFBUTtRQUNOLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLFlBQVksQ0FBQyxXQUFXLEVBQUUsQ0FBQztRQUNoRCxJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQyxZQUFZLENBQUMsU0FBUyxFQUFFLENBQUM7UUFFNUMsSUFBSSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDLHdCQUF3QixFQUFFLENBQUMsU0FBUzs7OztRQUFDLElBQUksQ0FBQyxFQUFFO1lBQy9FLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDO1FBQ3ZCLENBQUMsRUFBQyxDQUFDO1FBRUgsSUFBSSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDLHFCQUFxQixFQUFFLENBQUMsU0FBUzs7OztRQUFDLE1BQU0sQ0FBQyxFQUFFO1lBQzVFLElBQUksQ0FBQyxNQUFNLEdBQUcsTUFBTSxDQUFDO1FBQ3ZCLENBQUMsRUFBQyxDQUFDO0lBQ0wsQ0FBQzs7Ozs7SUFFRCxLQUFLLENBQUMsRUFBVTtRQUNkLElBQUksQ0FBQyxZQUFZLENBQUMsV0FBVyxDQUFDLEVBQUUsQ0FBQyxDQUFDO0lBQ3BDLENBQUM7Ozs7SUFHRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLFdBQVcsQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUNqQyxDQUFDOzs7WUFyQ0YsU0FBUyxTQUFDOztnQkFFVCxRQUFRLEVBQUUsb0JBQW9CO2dCQUM5Qix5Z0JBQWtEOzthQUVuRDs7OztZQVBRLFlBQVk7Ozs7SUFXbkIsOENBQWlCOztJQUNqQixpREFBMEI7O0lBRTFCLDRDQUFxQjs7SUFDckIsK0NBQXdCOzs7OztJQUVaLGtEQUFrQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBPbkRlc3Ryb3kgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFN1YnNjcmlwdGlvbiB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgQWxlcnQgfSBmcm9tICcuL2FsZXJ0LW5vdGlmaWNhdGlvbi5tb2R1bGUnO1xuaW1wb3J0IHsgQWxlcnRTZXJ2aWNlIH0gZnJvbSAnLi9hbGVydC1ub3RpZmljYXRpb24uc2VydmljZSc7XG5cbkBDb21wb25lbnQoe1xuLy8gdHNsaW50OmRpc2FibGUtbmV4dC1saW5lOiBjb21wb25lbnQtc2VsZWN0b3JcbiAgc2VsZWN0b3I6ICdhbGVydC1ub3RpZmljYXRpb24nLFxuICB0ZW1wbGF0ZVVybDogJy4vYWxlcnQtbm90aWZpY2F0aW9uLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vYWxlcnQtbm90aWZpY2F0aW9uLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgQWxlcnROb3RpZmljYXRpb25Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XG5cblxuICBwb3NpdGlvbjogc3RyaW5nO1xuICBwb3NpdGlvblN1YjogU3Vic2NyaXB0aW9uO1xuXG4gIGFsZXJ0czogQWxlcnRbXSA9IFtdO1xuICBhbGVydHNTdWI6IFN1YnNjcmlwdGlvbjtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGFsZXJ0U2VydmljZTogQWxlcnRTZXJ2aWNlKSB7IH1cblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLnBvc2l0aW9uID0gdGhpcy5hbGVydFNlcnZpY2UuZ2V0UG9zaXRpb24oKTtcbiAgICB0aGlzLmFsZXJ0cyA9IHRoaXMuYWxlcnRTZXJ2aWNlLmdldEFsZXJ0cygpO1xuXG4gICAgdGhpcy5wb3NpdGlvblN1YiA9IHRoaXMuYWxlcnRTZXJ2aWNlLmdldFBvc2l0aW9uVXBkYXRlTGlzdG5lcigpLnN1YnNjcmliZShkYXRhID0+IHtcbiAgICAgIHRoaXMucG9zaXRpb24gPSBkYXRhO1xuICAgIH0pO1xuXG4gICAgdGhpcy5hbGVydHNTdWIgPSB0aGlzLmFsZXJ0U2VydmljZS5nZXRBbGVydFVwZGF0ZUxpc3RuZXIoKS5zdWJzY3JpYmUoYWxlcnRzID0+IHtcbiAgICAgIHRoaXMuYWxlcnRzID0gYWxlcnRzO1xuICAgIH0pO1xuICB9XG5cbiAgY2xvc2UoaWQ6IHN0cmluZykge1xuICAgIHRoaXMuYWxlcnRTZXJ2aWNlLnJlbW92ZUFsZXJ0KGlkKTtcbiAgfVxuXG5cbiAgbmdPbkRlc3Ryb3koKSB7XG4gICAgdGhpcy5wb3NpdGlvblN1Yi51bnN1YnNjcmliZSgpO1xuICB9XG5cbn1cbiJdfQ==