biplab-notifier
Version:
This is a notification npm package, it can be use as simple notification or modal dialog, a lot of customization option are available as well, checkout the github repo and examples
68 lines • 9.94 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input, Output, EventEmitter, ElementRef, ViewChild } from '@angular/core';
export class NotificationComponent {
constructor() {
this.close = new EventEmitter();
}
/**
* @return {?}
*/
ngOnInit() {
}
/**
* @param {?} event
* @return {?}
*/
closeDailog(event) {
if (this.layoutHint.layout.displayAs === 'dialog' && !this.layoutHint.layout.disableOutsideClick) {
if (event && event.target === this.myDiv.nativeElement) {
this.close.emit(false);
}
}
}
/**
* @param {?} status
* @return {?}
*/
notificationClose(status) {
this.close.emit(status);
}
/**
* @return {?}
*/
get shadow() {
return !!this.layoutHint.css.shadow ? `${this.layoutHint.layout.displayAs}-shadow` : '';
}
/**
* @return {?}
*/
get message() {
return this.layoutHint && this.layoutHint.data ? this.layoutHint.data['message'] : '';
}
}
NotificationComponent.decorators = [
{ type: Component, args: [{
selector: 'biplab-notification',
template: "<ng-template #empty></ng-template>\n<ng-template [ngIf]=\"layoutHint\">\n <ng-template #mainTitle>\n <div #parentDailog (click)=\"closeDailog($event)\" [ngClass]=\"[ layoutHint.layout.displayAs ]\">\n <div\n [ngClass]=\"[\n layoutHint.layout.displayAs+'-content',\n layoutHint.css.position,\n layoutHint.layout.displayAs+'-'+layoutHint.css.position+'-animation',\n shadow\n ]\"\n [ngStyle]=\"{\n 'width': layoutHint.css?.width,\n 'height': layoutHint.css?.height,\n 'background': layoutHint.css.background,\n 'color': layoutHint.css.color\n }\" >\n <span *ngIf=\"layoutHint.layout.closeButton.status === 'show'\" \n [ngStyle]=\"{'color': layoutHint.css.color}\"\n class=\"closebtn\" \n (click)=\"notificationClose(false)\">×</span>\n <ng-content select=\"[notificationIcon]\"></ng-content>\n <ng-container *ngIf=\"layoutHint.template?.typeIcon then layoutHint.template?.typeIcon else empty\"></ng-container>\n <ng-container *ngIf=\"layoutHint.layout.title.status === 'show'\">\n <ng-content select=\"[notificationTitle]\"></ng-content>\n <strong>{{ layoutHint.type|titlecase }}</strong>\n </ng-container>\n <ng-content select=\"[notificationMessage]\"></ng-content>\n <ng-container *ngIf=\"layoutHint.data\"> {{ message }} </ng-container>\n <ng-container *ngIf=\"layoutHint.template?.head then layoutHint.template?.head else empty\"></ng-container>\n </div>\n </div>\n </ng-template>\n <ng-container *ngTemplateOutlet=\"layoutHint.template?.titleTemplate ? layoutHint.template?.titleTemplate : mainTitle; context:{ 'data': message || '', 'notificationClose': notificationClose.bind(this)}\"></ng-container>\n</ng-template>\n",
styles: ["body{font-family:Roboto,\"Helvetica Neue Light\",\"Helvetica Neue\",Helvetica,Arial,\"Lucida Grande\",sans-serif;margin:0}.notification{opacity:1;transition:opacity .6s}.notification-content{padding:15px 15px 15px 10px}.notification-shadow,.snack-bar-shadow{box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}.dialog-shadow{box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12)}.snack-bar{display:block;position:fixed;z-index:1;overflow:auto}.snack-bar-content{padding:15px 15px 15px 10px;position:fixed}.dialog{display:block;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,.4)}.dialog-content{margin:auto;padding:15px 15px 15px 10px;border:1px solid #888;display:block;position:fixed;z-index:999;overflow:auto;-webkit-animation-name:fadeIn;-webkit-animation-duration:.4s;animation-name:fadeIn;animation-duration:.4s}.default{margin:0;top:0;left:0;right:0}.top{top:0;left:50%;-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}.left{left:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.bottom{bottom:0;left:50%;-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}.right{right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.center{top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.snack-bar-bottom-animation{-webkit-animation-name:slideInBottom;-webkit-animation-duration:.4s;animation-name:slideInBottom;animation-duration:.4s}.snack-bar-top-animation{-webkit-animation-name:slideInTop;-webkit-animation-duration:.4s;animation-name:slideInTop;animation-duration:.4s}.snack-bar-left-animation{-webkit-animation-name:slideInLeft;-webkit-animation-duration:.4s;animation-name:slideInLeft;animation-duration:.4s}.snack-bar-right-animation{-webkit-animation-name:slideInRight;-webkit-animation-duration:.4s;animation-name:slideInRight;animation-duration:.4s}.snack-bar-center-animation{-webkit-animation-name:fadeIn;-webkit-animation-duration:.4s;animation-name:fadeIn;animation-duration:.4s}.closebtn{margin-left:15px;font-weight:700;float:right;font-size:15px;line-height:20px;cursor:pointer;transition:.3s}.closebtn:hover{color:red}@-webkit-keyframes slideInBottom{from{bottom:-300px;opacity:0}to{bottom:0;opacity:1}}@keyframes slideInBottom{from{bottom:-300px;opacity:0}to{bottom:0;opacity:1}}@-webkit-keyframes slideInRight{from{right:-300px;opacity:0}to{right:0;opacity:1}}@keyframes slideInRight{from{right:-300px;opacity:0}to{right:0;opacity:1}}@-webkit-keyframes slideInLeft{from{left:-300px;opacity:0}to{left:0;opacity:1}}@keyframes slideInLeft{from{left:-300px;opacity:0}to{left:0;opacity:1}}@-webkit-keyframes slideInTop{from{top:-300px;opacity:0}to{top:0;opacity:1}}@keyframes slideInTop{from{top:-300px;opacity:0}to{top:0;opacity:1}}@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}"]
}] }
];
/** @nocollapse */
NotificationComponent.ctorParameters = () => [];
NotificationComponent.propDecorators = {
myDiv: [{ type: ViewChild, args: ['parentDailog',] }],
layoutHint: [{ type: Input }],
close: [{ type: Output }]
};
if (false) {
/** @type {?} */
NotificationComponent.prototype.myDiv;
/** @type {?} */
NotificationComponent.prototype.layoutHint;
/** @type {?} */
NotificationComponent.prototype.close;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibm90aWZpY2F0aW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL2JpcGxhYi1ub3RpZmllci8iLCJzb3VyY2VzIjpbImxpYi9ub3RpZmljYXRpb24vbm90aWZpY2F0aW9uLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxLQUFLLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBRSxVQUFVLEVBQUUsU0FBUyxFQUFJLE1BQU0sZUFBZSxDQUFDO0FBUXhHLE1BQU0sT0FBTyxxQkFBcUI7SUFLaEM7UUFDRSxJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7SUFDM0MsQ0FBQzs7OztJQUVELFFBQVE7SUFDUixDQUFDOzs7OztJQUVELFdBQVcsQ0FBQyxLQUFVO1FBQ3BCLElBQUssSUFBSSxDQUFDLFVBQVUsQ0FBQyxNQUFNLENBQUMsU0FBUyxLQUFLLFFBQVEsSUFBSSxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsTUFBTSxDQUFDLG1CQUFtQixFQUFHO1lBQ2xHLElBQUksS0FBSyxJQUFLLEtBQUssQ0FBQyxNQUFNLEtBQUssSUFBSSxDQUFDLEtBQUssQ0FBQyxhQUFhLEVBQUU7Z0JBQ3ZELElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO2FBQ3hCO1NBQ0Y7SUFDSCxDQUFDOzs7OztJQUVELGlCQUFpQixDQUFDLE1BQWU7UUFDL0IsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDMUIsQ0FBQzs7OztJQUVELElBQUksTUFBTTtRQUNSLE9BQU8sQ0FBQyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsR0FBRyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsR0FBSSxJQUFJLENBQUMsVUFBVSxDQUFDLE1BQU0sQ0FBQyxTQUFVLFNBQVMsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDO0lBQzVGLENBQUM7Ozs7SUFFRCxJQUFJLE9BQU87UUFDVCxPQUFPLElBQUksQ0FBQyxVQUFVLElBQUksSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUM7SUFDeEYsQ0FBQzs7O1lBbkNGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUscUJBQXFCO2dCQUMvQixzd0RBQTRDOzthQUU3Qzs7Ozs7b0JBRUUsU0FBUyxTQUFDLGNBQWM7eUJBQ3hCLEtBQUs7b0JBQ0wsTUFBTTs7OztJQUZQLHNDQUE2Qzs7SUFDN0MsMkNBQXNDOztJQUN0QyxzQ0FBdUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCwgSW5wdXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyLCBFbGVtZW50UmVmLCBWaWV3Q2hpbGQgICB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTm90aWZpY2F0aW9uSGludCB9IGZyb20gJy4uL2xheW91dC9ub3RpZmllcic7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2JpcGxhYi1ub3RpZmljYXRpb24nLFxuICB0ZW1wbGF0ZVVybDogJy4vbm90aWZpY2F0aW9uLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vbm90aWZpY2F0aW9uLmNvbXBvbmVudC5jc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgTm90aWZpY2F0aW9uQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgQFZpZXdDaGlsZCgncGFyZW50RGFpbG9nJykgbXlEaXY6IEVsZW1lbnRSZWY7XG4gIEBJbnB1dCgpIGxheW91dEhpbnQ6IE5vdGlmaWNhdGlvbkhpbnQ7XG4gIEBPdXRwdXQoKSBjbG9zZTogRXZlbnRFbWl0dGVyPGJvb2xlYW4+O1xuXG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIHRoaXMuY2xvc2UgPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XG4gIH1cblxuICBuZ09uSW5pdCgpIHtcbiAgfVxuXG4gIGNsb3NlRGFpbG9nKGV2ZW50OiBhbnkpIHtcbiAgICBpZiAoIHRoaXMubGF5b3V0SGludC5sYXlvdXQuZGlzcGxheUFzID09PSAnZGlhbG9nJyAmJiAhdGhpcy5sYXlvdXRIaW50LmxheW91dC5kaXNhYmxlT3V0c2lkZUNsaWNrICkge1xuICAgICAgaWYgKGV2ZW50ICAmJiBldmVudC50YXJnZXQgPT09IHRoaXMubXlEaXYubmF0aXZlRWxlbWVudCkge1xuICAgICAgICB0aGlzLmNsb3NlLmVtaXQoZmFsc2UpO1xuICAgICAgfVxuICAgIH1cbiAgfVxuXG4gIG5vdGlmaWNhdGlvbkNsb3NlKHN0YXR1czogYm9vbGVhbikge1xuICAgIHRoaXMuY2xvc2UuZW1pdChzdGF0dXMpO1xuICB9XG5cbiAgZ2V0IHNoYWRvdygpOiBzdHJpbmcge1xuICAgIHJldHVybiAhIXRoaXMubGF5b3V0SGludC5jc3Muc2hhZG93ID8gYCR7IHRoaXMubGF5b3V0SGludC5sYXlvdXQuZGlzcGxheUFzIH0tc2hhZG93YCA6ICcnO1xuICB9XG5cbiAgZ2V0IG1lc3NhZ2UoKTogc3RyaW5nIHtcbiAgICByZXR1cm4gdGhpcy5sYXlvdXRIaW50ICYmIHRoaXMubGF5b3V0SGludC5kYXRhID8gdGhpcy5sYXlvdXRIaW50LmRhdGFbJ21lc3NhZ2UnXSA6ICcnO1xuICB9XG5cbn1cbiJdfQ==