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
2 lines • 29.7 kB
JavaScript
!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("rxjs"),require("rxjs/operators"),require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("biplab-notifier",["exports","rxjs","rxjs/operators","@angular/core","@angular/common"],n):n(t["biplab-notifier"]={},t.rxjs,t.rxjs.operators,t.ng.core,t.ng.common)}(this,function(t,l,n,e,o){"use strict";var i=function(t,n){return(i=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,n){t.__proto__=n}||function(t,n){for(var e in n)n.hasOwnProperty(e)&&(t[e]=n[e])})(t,n)};function a(t,n){function e(){this.constructor=t}i(t,n),t.prototype=null===n?Object.create(n):(e.prototype=n.prototype,new e)}var s=function(){function t(t){this.messageId=this._guid,this.message=t||""}return Object.defineProperty(t.prototype,"_guid",{get:function(){function t(){return Math.floor(65536*(1+Math.random())).toString(16).substring(1)}return t()+t()+"-"+t()+"-"+t()+"-"+t()+"-"+t()+t()+t()},enumerable:!0,configurable:!0}),t}(),r=function b(t){this.layout=t||new c},c=function h(t,n,e,o){void 0===t&&(t={status:"show"}),void 0===n&&(n={status:"show"}),void 0===e&&(e="notification"),void 0===o&&(o=!1),this.closeButton=t,this.title=n,this.displayAs=e,this.disableOutsideClick=o},u=function(s){function t(t,n,e,o,i){void 0===t&&(t=""),void 0===n&&(n={status:"show"}),void 0===e&&(e={status:"show"}),void 0===i&&(i=!1);var a=s.call(this)||this;return a.head=t,a.actionRow=n,a.body=e,a.titleText=o,a.isDailog=i,a}return a(t,s),t}(c),p=function(r){function t(t,n,e,o,i,a){void 0===n&&(n="notification"),void 0===i&&(i={shadow:!0,position:"default",background:undefined,color:undefined,width:undefined,height:undefined}),void 0===a&&(a=[]);var s=r.call(this)||this;return s.status=e,s.data=o,s.css=i,s.actionButtons=a,s._afterOpened=new l.Subject,s._afterClosed=new l.Subject,s._event=new l.BehaviorSubject(!1),s.status="deactivate",t&&(s.layoutType=t),s.actionButtons&&s.defaultButtons(),"notification"===n?s.isNotification=!0:"dialog"===n?s.isDialog=!0:"snack-bar"===n&&(s.isSnack=!0),s}return a(t,r),Object.defineProperty(t.prototype,"message",{set:function(t){"single"===this.layoutType&&(this.data=new s(t))},enumerable:!0,configurable:!0}),t.prototype.defaultButtons=function(t){this.actionButtons=t||[{text:"Yes",disabled:!1,type:"button",emitValue:!0,css:{color:"#3f51b5",background:"transparent",shadow:!0}},{text:"Cancel",disabled:!1,type:"button",emitValue:!1,css:{color:"#f44336",background:"transparent",shadow:!0}}]},t.prototype.applyThemeColorInTrueButtons=function(){var n=this;this.actionButtons.forEach(function(t){"boolean"==typeof t.emitValue&&t.emitValue&&(t.css.color=n.css.color,t.css.background=n.css.background)})},Object.defineProperty(t.prototype,"trueActionButtonStatus",{set:function(n){this.actionButtons.forEach(function(t){"boolean"==typeof t.emitValue&&t.emitValue&&(t.disabled="disable"===n)})},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"currentStatus",{get:function(){return"activate"===this.status?"show":"hide"},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"trueActionButton",{get:function(){return this.actionButtons.filter(function(t){return"boolean"==typeof t.emitValue&&t.emitValue})[0]||undefined},enumerable:!0,configurable:!0}),t.prototype.addNewButton=function(t,n,e,o,i,a){void 0===e&&(e=!1),void 0===o&&(o="button"),void 0===a&&(a={color:"black",background:"transparent",shadow:!0});var s={text:t,disabled:e,type:o,emitValue:i,css:a||{color:"#3f51b5",background:"transparent",shadow:!0},callBackFunctions:n||undefined};0<this.actionButtons.length?this.actionButtons.find(function(t){return t.type===o&&"boolean"==typeof i&&typeof i==typeof t.emitValue&&i===t.emitValue})||this.actionButtons.splice(1,0,s):this.actionButtons.push(s)},t.prototype.buttonColorReverse=function(){var o=this;this.actionButtons.forEach(function(t){var n=t.css.color,e=o._handleTransparentColor(t.css.background);t.css.color=e,t.css.background=n})},t.prototype._handleTransparentColor=function(t){return"transparent"===t?"white":"white"===t?"transparent":t},t.prototype.buttonShadow=function(n){this.actionButtons.forEach(function(t){t.css.shadow="show"===n})},Object.defineProperty(t.prototype,"messages",{set:function(t){"multi"===this.layoutType&&(this.data=t.map(function(t){return new s(t)}))},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"layoutType",{get:function(){return this.layout instanceof u?"multi":this.layout instanceof c?"single":void 0},set:function(t){this.layout="multi"===t?new u:new c},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"timer",{get:function(){return this._timer},set:function(t){clearTimeout(this.cancelTimer),this._timer=t},enumerable:!0,configurable:!0}),t.prototype.show=function(){var t=this;this._event.next(!0),this.timer&&(this.cancelTimer=setTimeout(function(){return t.hide(!1)},this.timer.duration))},t.prototype.hide=function(t){this._event.next(t)},Object.defineProperty(t.prototype,"titleText",{set:function(t){"multi"===this.layoutType&&(this.layout.titleText=t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"action",{get:function(){return this._event},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"header",{set:function(t){"multi"===this.layoutType&&(this.layout.head=t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"isDialog",{set:function(t){t&&(this.layout.displayAs="dialog",this.css.position="center")},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"isSnack",{set:function(t){t&&(this.layout.displayAs="snack-bar",this.css.position="bottom")},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"isNotification",{set:function(t){t&&(this.layout.displayAs="notification",this.css.position="default")},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"disableOutsideClick",{set:function(t){"multi"===this.layoutType&&(this.layout.disableOutsideClick=t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"body",{set:function(t){"multi"===this.layoutType&&(this.layout.body.status=t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"actionRow",{set:function(t){"multi"===this.layoutType&&(this.layout.actionRow.status=t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"closeButton",{set:function(t){this.layout.closeButton.status=t},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"title",{set:function(t){this.layout.title.status=t},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"trueButton",{set:function(n){this.actionButtons&&0<this.actionButtons.length&&this.actionButtons.forEach(function(t){"boolean"!=typeof t.emitValue||!0!==t.emitValue||(t.text=n)})},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"falseButton",{set:function(n){this.actionButtons&&0<this.actionButtons.length&&this.actionButtons.forEach(function(t){"boolean"!=typeof t.emitValue||!1!==t.emitValue||(t.text=n)})},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"type",{get:function(){return this.notificationType},set:function(t){"success"===(this.notificationType=t)?(this.css.background="#4CAF50",this.css.color="white"):"error"===t?(this.css.background="#cc0000",this.css.color="white"):"warn"===t?(this.css.background="#ff9800",this.css.color="white"):"note"===t?(this.css.background="#2196F3",this.css.color="white"):"help"===t?(this.css.background="rgb(2, 64, 114)",this.css.color="white"):"other"===t&&(this.css.background="#3f51b5",this.css.color="white")},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"afterOpened",{get:function(){return this._afterOpened.asObservable().pipe(n.take(1))},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"afterClosed",{get:function(){return this._afterClosed.asObservable().pipe(n.take(1))},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"close",{set:function(t){this._afterClosed.next(t)},enumerable:!0,configurable:!0}),t.prototype.opened=function(){this._afterOpened.next()},t}(r),f=function(){function t(t){var n=this;this.trigger=new l.BehaviorSubject(new p),t&&(this.trigger.next(t),this.notice.action.subscribe(function(t){t?n.activate():n.deactivate(),n.notice.actionButtons&&0!==n.notice.actionButtons.length||n.notice.defaultButtons()}))}return Object.defineProperty(t.prototype,"notice",{get:function(){return this.trigger.value},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"isActive",{get:function(){return"activate"===this.notice.status},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"type",{get:function(){return this.notice.type},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"duration",{get:function(){return this.notice.timer.duration||null},enumerable:!0,configurable:!0}),t.prototype.activate=function(){var t=this.notice;t.status="activate",this.trigger.next(t),t.opened()},t.prototype.deactivate=function(t){var n=this.notice;n.status="deactivate",this.trigger.next(n),n.close=t},t}(),d=function(){function t(){}return t.prototype.ngOnInit=function(){this.notification&&(this.notifier=new f(this.notification))},t.prototype.close=function(t){this.notifier.deactivate(t)},Object.defineProperty(t.prototype,"status",{get:function(){return this.notifier.isActive},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"timer",{get:function(){return this.notifier.notice.timer?this.notifier.notice.timer.duration:null},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"layout",{get:function(){return this.notifier.notice.layout instanceof u?"multi":this.notifier.notice.layout instanceof c?"single":null},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"notificationHint",{get:function(){return{layout:this.notifier.notice.layout,data:this.notifier.notice.data,type:this.notifier.type,template:this.notifierTemplates,css:this.notifier.notice.css,buttons:this.notifier.notice.actionButtons}},enumerable:!0,configurable:!0}),t.decorators=[{type:e.Component,args:[{selector:"biplab-notifier",template:'<div *ngIf="notifier && status">\n <ng-template [ngIf]="!customTemplate && layout === \'single\'">\n <biplab-notification [layoutHint]="notificationHint" (close)="close($event)">\n <span notificationIcon><ng-content select="[notifierIcon]"></ng-content></span>\n <span notificationTitle><ng-content select="[notifierTitle]"></ng-content></span>\n <span notificationMessage><ng-content select="[notifierMessage]"></ng-content></span> \n </biplab-notification>\n </ng-template>\n <ng-template [ngIf]="!customTemplate && layout === \'multi\'">\n <biplab-notifications\n [layoutHint]="notificationHint"\n (close)="close($event)">\n <span notificationIcon><ng-content select="[notifierIcon]"></ng-content></span>\n <span notificationTitle><ng-content select="[notifierTitle]"></ng-content></span>\n <span notificationMessages><ng-content select="[notifierMessages]"></ng-content></span>\n\n <span notificationTrueButton><ng-content select="[notifierTrueButton]"></ng-content></span>\n <span notificationFalseButton><ng-content select="[notifierFalseButton]"></ng-content></span>\n\n <span notificationFooter><ng-content select="[notifierFooter]"></ng-content></span>\n </biplab-notifications>\n </ng-template>\n <ng-template [ngIf]="customTemplate">\n <ng-container *ngTemplateOutlet="customTemplate;context:{ data: notificationHint, notificationClose: close.bind(this) }"></ng-container>\n </ng-template> \n</div>\n',styles:["@-webkit-keyframes show{0%{display:none;opacity:0}1%{display:block}100%{display:block;opacity:1}}@keyframes show{0%{display:none;opacity:0}1%{display:block}100%{display:block;opacity:1}}@-webkit-keyframes hide{0%{display:block;opacity:1}99%{display:block}100%{display:none;opacity:0}}@keyframes hide{0%{display:block;opacity:1}99%{display:block}100%{display:none;opacity:0}}.message-show{-webkit-animation:1s linear both show;animation:1s linear both show}.message-hide{-webkit-animation:1s linear both hide;animation:1s linear both hide}"]}]}],t.ctorParameters=function(){return[]},t.propDecorators={notifierTemplates:[{type:e.Input}],customTemplate:[{type:e.Input}],notification:[{type:e.Input}]},t}(),m=function(){function t(){this.close=new e.EventEmitter}return t.prototype.ngOnInit=function(){},t.prototype.closeDailog=function(t){"dialog"!==this.layoutHint.layout.displayAs||this.layoutHint.layout.disableOutsideClick||t&&t.target===this.myDiv.nativeElement&&this.close.emit(!1)},t.prototype.notificationClose=function(t){this.close.emit(t)},Object.defineProperty(t.prototype,"shadow",{get:function(){return this.layoutHint.css.shadow?this.layoutHint.layout.displayAs+"-shadow":""},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"message",{get:function(){return this.layoutHint&&this.layoutHint.data?this.layoutHint.data.message:""},enumerable:!0,configurable:!0}),t.decorators=[{type:e.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}}']}]}],t.ctorParameters=function(){return[]},t.propDecorators={myDiv:[{type:e.ViewChild,args:["parentDailog"]}],layoutHint:[{type:e.Input}],close:[{type:e.Output}]},t}(),y=function(){function t(){this.close=new e.EventEmitter}return t.prototype.ngOnInit=function(){},t.prototype.closeDailog=function(t){var n=this.layoutHint.layout;"dialog"!==n.displayAs||n.disableOutsideClick||t&&t.target===this.myDiv.nativeElement&&this.close.emit(!1)},t.prototype.click=function(t){var n,e;if(t.callBackFunctions&&0<t.callBackFunctions.length)try{for(var o=function s(t){var n="function"==typeof Symbol&&t[Symbol.iterator],e=0;return n?n.call(t):{next:function(){return t&&e>=t.length&&(t=void 0),{value:t&&t[e++],done:!t}}}}(t.callBackFunctions),i=o.next();!i.done;i=o.next()){var a=i.value;a.param?a.func(a.param):a.func()}}catch(r){n={error:r}}finally{try{i&&!i.done&&(e=o["return"])&&e.call(o)}finally{if(n)throw n.error}}else"button"===t.type&&this.notificationClose(t.emitValue)},t.prototype.notificationClose=function(t){this.close.emit(t)},Object.defineProperty(t.prototype,"shadow",{get:function(){return this.layoutHint.css.shadow?this.layoutHint.layout.displayAs+"-shadow":""},enumerable:!0,configurable:!0}),t.prototype.buttonStatus=function(t){return"boolean"==typeof t.emitValue&&t.emitValue},Object.defineProperty(t.prototype,"messages",{get:function(){return this.layoutHint&&this.layoutHint.data?(this.layoutHint.data||[new s("")]).map(function(t){return t.message}):[]},enumerable:!0,configurable:!0}),t.decorators=[{type:e.Component,args:[{selector:"biplab-notifications",template:'<ng-template #empty></ng-template>\n<ng-template [ngIf]="layoutHint">\n<div #parentDailog (click)="closeDailog($event)" [ngClass]="[ layoutHint.layout.displayAs ]">\n <div>\n \x3c!-- Modal content --\x3e\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 \'max-width\': layoutHint.layout.displayAs === \'notification\' ? ( layoutHint.css?.width ? \'97vw\' : \'100vw\' ) : \'80vw\',\n \'max-height\': \'100vh\',\n \'width\': layoutHint.css?.width,\n \'height\': layoutHint.css?.height}">\n \x3c!-- Modal Title --\x3e\n <ng-template [ngIf]="layoutHint.layout.title.status === \'show\'">\n <ng-template #mainTitle >\n <div class="notification-multi-title" [ngStyle]="{\'background\': layoutHint.css.background, \'color\': layoutHint.css.color}">\n <ng-content select="[notificationIcon]"></ng-content>\n <ng-container *ngIf="layoutHint.template?.typeIcon then layoutHint.template?.typeIcon else empty"></ng-container>\n <ng-template [ngIf]="layoutHint.layout.closeButton.status === \'show\'">\n <span (click)="notificationClose(false)" class="notification-multi-close">×</span>\n </ng-template>\n <ng-content select="[notificationTitle]"></ng-content>\n <strong>{{ layoutHint.layout[\'titleText\'] ? layoutHint.layout[\'titleText\'] : layoutHint.type | titlecase }} </strong>\n </div>\n </ng-template>\n <ng-container *ngTemplateOutlet="layoutHint.template?.titleTemplate ? \n layoutHint.template?.titleTemplate : mainTitle; context:{ \'data\': messages, event: close, \'notificationClose\': notificationClose.bind(this)}">\n </ng-container>\n </ng-template>\n <div [ngStyle]="{\'padding\': !!layoutHint.layout[\'head\'] ? \'0px 16px\' : \'16px\'}" \n [ngClass]="[ \'notification-multi-body-\'+ layoutHint.layout.displayAs ]">\n \x3c!-- Modal header --\x3e\n <ng-template #headTeample>\n <ng-template [ngIf]="layoutHint.layout[\'head\']">\n <h1> {{layoutHint.layout[\'head\']}}</h1>\n </ng-template>\n </ng-template>\n <ng-container *ngTemplateOutlet="layoutHint.template?.head ? layoutHint.template?.head : headTeample"></ng-container>\n\n \x3c!-- Modal Body --\x3e\n <ng-template #bodyTemplate>\n <ng-template [ngIf]="!!messages && messages.length > 0">\n <div class="notification-multi-message-row" *ngFor="let message of messages">{{ message }}</div>\n </ng-template>\n </ng-template>\n <ng-content select="[notificationMessages]"></ng-content>\n <ng-container *ngTemplateOutlet="layoutHint.template?.body ? layoutHint.template?.body : bodyTemplate; context:{ data: messages, \'notificationClose\': notificationClose.bind(this) }"></ng-container>\n \x3c!-- footer --\x3e\n <div class="notification-multi-body-footer">\n <ng-container *ngIf="layoutHint.template?.footer then layoutHint.template?.footer else empty"></ng-container>\n <ng-content select="[notificationFooter]"></ng-content>\n </div>\n </div>\n \x3c!-- Modal action --\x3e\n <ng-template [ngIf]="layoutHint.layout[\'actionRow\'][\'status\'] === \'show\'">\n <div id="action" [ngClass]="[ \'notification-multi-action-\'+layoutHint.layout.displayAs ]" >\n <ng-template #bottonTemplate>\n <button\n class="button"\n *ngFor="let button of layoutHint.buttons"\n [disabled]="button?.disabled"\n [type]="button?.type"\n (click)="click(button)"\n [ngClass]="{ \'button-shadow\': button.css?.shadow}"\n [ngStyle]="{\n \'color\': button.css?.color,\n \'background\': button.css?.background\n }"\n >\n <ng-template [ngIf]="buttonStatus(button)">\n <ng-content select="[notificationTrueButton]"></ng-content>\n </ng-template>\n <ng-template [ngIf]="!buttonStatus(button)">\n <ng-content select="[notificationFalseButton]"></ng-content>\n </ng-template>\n {{ button.text }}\n </button>\n </ng-template>\n <ng-container *ngTemplateOutlet="layoutHint.template?.button ? layoutHint.template?.button : bottonTemplate; context:{ \'data\': messages, \'event\': close, \'notificationClose\': notificationClose.bind(this) }"></ng-container>\n </div>\n </ng-template>\n </div>\n </div>\n</div>\n</ng-template>\n',styles:['body{font-family:Roboto,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;margin:0}h1{margin:10px 0}.notification{opacity:1;transition:opacity .6s}.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{position:fixed;background:#f5f3f3;color:#000}.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;display:block;position:fixed;z-index:999;overflow:auto;-webkit-animation-name:fadeIn;-webkit-animation-duration:.4s;animation-name:fadeIn;animation-duration:.4s;color:#000;border-radius:5px;max-height:inherit;background-color:#f5f3f3}.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}@-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}}.notification-multi{opacity:1}.notification-multi-container{display:block}.notification-multi-content{background-color:#f1ecec;margin:auto;padding:0}.notification-multi-message-row{padding:3px;width:100%;font-size:20px}.notification-multi-close{float:right;font-size:26px}.notification-multi-close:focus,.notification-multi-close:hover{text-decoration:none;cursor:pointer;color:#570303}.notification-multi-title{padding:15px;border:1px snow;font-size:22px}.notification-multi-header{padding:0 15px}.notification-multi-footer{padding:12px 16px}.button{font-family:Roboto,"Helvetica Neue",sans-serif;font-size:14px;font-weight:500;-webkit-appearance:button;background:0 0;align-items:flex-start;box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;transition-duration:.4s;overflow:hidden}.button:hover{transition:.8s;opacity:.8}.button-shadow{box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.notification-multi-primary-btn:hover{background:#3f51b52a}.notification-multi-warning-btn{color:#f44336}.notification-multi-warning-btn:hover{background:#f4433638}.notification-multi-action-notification{padding:10px}.notification-multi-action-dialog,.notification-multi-action-snack-bar{padding:10px;background:#f5f3f3}.notification-multi-action button{margin-right:10px}.notification-multi-body-dialog,.notification-multi-body-snack-bar{display:block;max-height:65vh;overflow:auto;background:#f5f3f3;word-wrap:break-word}.notification-multi-body-footer{overflow:auto;max-height:70px;word-wrap:break-word}#action button{margin-right:10px}']}]}],t.ctorParameters=function(){return[]},t.propDecorators={myDiv:[{type:e.ViewChild,args:["parentDailog"]}],layoutHint:[{type:e.Input}],close:[{type:e.Output}]},t}(),g=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{declarations:[d,m,y],imports:[o.CommonModule],exports:[d]}]}],t}();t.NotifierComponent=d,t.NotifierModule=g,t.Notification=p,t.NotifcationLayout=r,t.SingleNotifier=c,t.MultiNotifier=u,t.ɵc=s,t.ɵa=m,t.ɵb=y,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=biplab-notifier.umd.min.js.map