alert-notification/alert-notification.metadata.json

A lightweight easy to use module to display alert notifications inside you Angular web applications.

{"__symbolic":"module","version":4,"metadata":{"AlertService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":4,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"getPosition":[{"__symbolic":"method"}],"setPosition":[{"__symbolic":"method"}],"getPositionUpdateListner":[{"__symbolic":"method"}],"getAlerts":[{"__symbolic":"method"}],"push":[{"__symbolic":"method"}],"removeAlert":[{"__symbolic":"method"}],"getAlertUpdateListner":[{"__symbolic":"method"}],"setInterval":[{"__symbolic":"method"}],"setAutoDismiss":[{"__symbolic":"method"}]},"statics":{"ngInjectableDef":{}}},"AlertNotificationComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"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)\">&#10006;</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}}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"AlertService"}]}],"ngOnInit":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"AlertModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"AlertNotificationComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"BrowserModule","line":8,"character":4},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":4}],"exports":[{"__symbolic":"reference","name":"AlertNotificationComponent"}]}]}],"members":{}},"Alert":{"__symbolic":"class","members":{}}},"origins":{"AlertService":"./lib/alert-notification.service","AlertNotificationComponent":"./lib/alert-notification.component","AlertModule":"./lib/alert-notification.module","Alert":"./lib/alert-notification.module"},"importAs":"alert-notification"}