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
89 lines • 10.8 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';
var NotificationComponent = /** @class */ (function () {
function NotificationComponent() {
this.close = new EventEmitter();
}
/**
* @return {?}
*/
NotificationComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
};
/**
* @param {?} event
* @return {?}
*/
NotificationComponent.prototype.closeDailog = /**
* @param {?} event
* @return {?}
*/
function (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 {?}
*/
NotificationComponent.prototype.notificationClose = /**
* @param {?} status
* @return {?}
*/
function (status) {
this.close.emit(status);
};
Object.defineProperty(NotificationComponent.prototype, "shadow", {
get: /**
* @return {?}
*/
function () {
return !!this.layoutHint.css.shadow ? this.layoutHint.layout.displayAs + "-shadow" : '';
},
enumerable: true,
configurable: true
});
Object.defineProperty(NotificationComponent.prototype, "message", {
get: /**
* @return {?}
*/
function () {
return this.layoutHint && this.layoutHint.data ? this.layoutHint.data['message'] : '';
},
enumerable: true,
configurable: true
});
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 = function () { return []; };
NotificationComponent.propDecorators = {
myDiv: [{ type: ViewChild, args: ['parentDailog',] }],
layoutHint: [{ type: Input }],
close: [{ type: Output }]
};
return NotificationComponent;
}());
export { NotificationComponent };
if (false) {
/** @type {?} */
NotificationComponent.prototype.myDiv;
/** @type {?} */
NotificationComponent.prototype.layoutHint;
/** @type {?} */
NotificationComponent.prototype.close;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibm90aWZpY2F0aW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL2JpcGxhYi1ub3RpZmllci8iLCJzb3VyY2VzIjpbImxpYi9ub3RpZmljYXRpb24vbm90aWZpY2F0aW9uLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxLQUFLLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBRSxVQUFVLEVBQUUsU0FBUyxFQUFJLE1BQU0sZUFBZSxDQUFDO0FBR3hHO0lBVUU7UUFDRSxJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7SUFDM0MsQ0FBQzs7OztJQUVELHdDQUFROzs7SUFBUjtJQUNBLENBQUM7Ozs7O0lBRUQsMkNBQVc7Ozs7SUFBWCxVQUFZLEtBQVU7UUFDcEIsSUFBSyxJQUFJLENBQUMsVUFBVSxDQUFDLE1BQU0sQ0FBQyxTQUFTLEtBQUssUUFBUSxJQUFJLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxNQUFNLENBQUMsbUJBQW1CLEVBQUc7WUFDbEcsSUFBSSxLQUFLLElBQUssS0FBSyxDQUFDLE1BQU0sS0FBSyxJQUFJLENBQUMsS0FBSyxDQUFDLGFBQWEsRUFBRTtnQkFDdkQsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7YUFDeEI7U0FDRjtJQUNILENBQUM7Ozs7O0lBRUQsaURBQWlCOzs7O0lBQWpCLFVBQWtCLE1BQWU7UUFDL0IsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDMUIsQ0FBQztJQUVELHNCQUFJLHlDQUFNOzs7O1FBQVY7WUFDRSxPQUFPLENBQUMsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLEdBQUcsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFLLElBQUksQ0FBQyxVQUFVLENBQUMsTUFBTSxDQUFDLFNBQVMsWUFBVSxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUM7UUFDNUYsQ0FBQzs7O09BQUE7SUFFRCxzQkFBSSwwQ0FBTzs7OztRQUFYO1lBQ0UsT0FBTyxJQUFJLENBQUMsVUFBVSxJQUFJLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDO1FBQ3hGLENBQUM7OztPQUFBOztnQkFuQ0YsU0FBUyxTQUFDO29CQUNULFFBQVEsRUFBRSxxQkFBcUI7b0JBQy9CLHN3REFBNEM7O2lCQUU3Qzs7Ozs7d0JBRUUsU0FBUyxTQUFDLGNBQWM7NkJBQ3hCLEtBQUs7d0JBQ0wsTUFBTTs7SUE2QlQsNEJBQUM7Q0FBQSxBQXJDRCxJQXFDQztTQWhDWSxxQkFBcUI7OztJQUNoQyxzQ0FBNkM7O0lBQzdDLDJDQUFzQzs7SUFDdEMsc0NBQXVDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIElucHV0LCBPdXRwdXQsIEV2ZW50RW1pdHRlciwgRWxlbWVudFJlZiwgVmlld0NoaWxkICAgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE5vdGlmaWNhdGlvbkhpbnQgfSBmcm9tICcuLi9sYXlvdXQvbm90aWZpZXInO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdiaXBsYWItbm90aWZpY2F0aW9uJyxcbiAgdGVtcGxhdGVVcmw6ICcuL25vdGlmaWNhdGlvbi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL25vdGlmaWNhdGlvbi5jb21wb25lbnQuY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIE5vdGlmaWNhdGlvbkNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBWaWV3Q2hpbGQoJ3BhcmVudERhaWxvZycpIG15RGl2OiBFbGVtZW50UmVmO1xuICBASW5wdXQoKSBsYXlvdXRIaW50OiBOb3RpZmljYXRpb25IaW50O1xuICBAT3V0cHV0KCkgY2xvc2U6IEV2ZW50RW1pdHRlcjxib29sZWFuPjtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICB0aGlzLmNsb3NlID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPigpO1xuICB9XG5cbiAgbmdPbkluaXQoKSB7XG4gIH1cblxuICBjbG9zZURhaWxvZyhldmVudDogYW55KSB7XG4gICAgaWYgKCB0aGlzLmxheW91dEhpbnQubGF5b3V0LmRpc3BsYXlBcyA9PT0gJ2RpYWxvZycgJiYgIXRoaXMubGF5b3V0SGludC5sYXlvdXQuZGlzYWJsZU91dHNpZGVDbGljayApIHtcbiAgICAgIGlmIChldmVudCAgJiYgZXZlbnQudGFyZ2V0ID09PSB0aGlzLm15RGl2Lm5hdGl2ZUVsZW1lbnQpIHtcbiAgICAgICAgdGhpcy5jbG9zZS5lbWl0KGZhbHNlKTtcbiAgICAgIH1cbiAgICB9XG4gIH1cblxuICBub3RpZmljYXRpb25DbG9zZShzdGF0dXM6IGJvb2xlYW4pIHtcbiAgICB0aGlzLmNsb3NlLmVtaXQoc3RhdHVzKTtcbiAgfVxuXG4gIGdldCBzaGFkb3coKTogc3RyaW5nIHtcbiAgICByZXR1cm4gISF0aGlzLmxheW91dEhpbnQuY3NzLnNoYWRvdyA/IGAkeyB0aGlzLmxheW91dEhpbnQubGF5b3V0LmRpc3BsYXlBcyB9LXNoYWRvd2AgOiAnJztcbiAgfVxuXG4gIGdldCBtZXNzYWdlKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIHRoaXMubGF5b3V0SGludCAmJiB0aGlzLmxheW91dEhpbnQuZGF0YSA/IHRoaXMubGF5b3V0SGludC5kYXRhWydtZXNzYWdlJ10gOiAnJztcbiAgfVxuXG59XG4iXX0=