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
901 lines (888 loc) • 39.8 kB
JavaScript
import { BehaviorSubject, Subject } from 'rxjs';
import { take } from 'rxjs/operators';
import { Component, Input, Output, EventEmitter, ViewChild, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class Message {
/**
* @param {?=} message
*/
constructor(message) {
this.messageId = this._guid;
this.message = message || '';
}
/**
* @private
* @return {?}
*/
get _guid() {
/**
* @return {?}
*/
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
s4() + '-' + s4() + s4() + s4();
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NotifcationLayout {
/**
* @param {?=} type
*/
constructor(type) {
this.layout = type || new SingleNotifier();
}
}
class SingleNotifier {
/**
* @param {?=} closeButton
* @param {?=} title
* @param {?=} displayAs
* @param {?=} disableOutsideClick
*/
constructor(closeButton = { status: 'show' }, title = { status: 'show' }, displayAs = 'notification', disableOutsideClick = false) {
this.closeButton = closeButton;
this.title = title;
this.displayAs = displayAs;
this.disableOutsideClick = disableOutsideClick;
}
}
class MultiNotifier extends SingleNotifier {
/**
* @param {?=} head
* @param {?=} actionRow
* @param {?=} body
* @param {?=} titleText
* @param {?=} isDailog
*/
constructor(head = '', actionRow = { status: 'show' }, body = { status: 'show' }, titleText, isDailog = false) {
super();
this.head = head;
this.actionRow = actionRow;
this.body = body;
this.titleText = titleText;
this.isDailog = isDailog;
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class Notification extends NotifcationLayout {
/**
* @param {?=} layoutType
* @param {?=} displayAs
* @param {?=} status
* @param {?=} data
* @param {?=} css
* @param {?=} actionButtons
*/
constructor(layoutType, displayAs = 'notification', status, data, css = {
shadow: true,
position: 'default',
background: undefined,
color: undefined,
width: undefined,
height: undefined
}, actionButtons = []) {
super();
this.status = status;
this.data = data;
this.css = css;
this.actionButtons = actionButtons;
this._afterOpened = new Subject();
this._afterClosed = new Subject();
this._event = new BehaviorSubject(false);
this.status = 'deactivate';
if (layoutType) {
this.layoutType = layoutType;
}
if (this.actionButtons) {
this.defaultButtons();
}
if (displayAs === 'notification') {
this.isNotification = true;
}
else if (displayAs === 'dialog') {
this.isDialog = true;
}
else if (displayAs === 'snack-bar') {
this.isSnack = true;
}
}
/**
* @param {?} msg
* @return {?}
*/
set message(msg) {
if (this.layoutType === 'single') {
this.data = new Message(msg);
}
}
/**
* @param {?=} actionButtons
* @return {?}
*/
defaultButtons(actionButtons) {
this.actionButtons = actionButtons || [
{
text: 'Yes',
disabled: false,
type: 'button',
emitValue: true,
css: { color: '#3f51b5', background: 'transparent', shadow: true }
},
{
text: 'Cancel',
disabled: false,
type: 'button',
emitValue: false,
css: { color: '#f44336', background: 'transparent', shadow: true }
}
];
}
/**
* @return {?}
*/
applyThemeColorInTrueButtons() {
this.actionButtons.forEach((/**
* @param {?} button
* @return {?}
*/
(button) => {
if (typeof (button.emitValue) === 'boolean' && button.emitValue) {
button.css.color = this.css.color;
button.css.background = this.css.background;
}
}));
}
/**
* @param {?} status
* @return {?}
*/
set trueActionButtonStatus(status) {
this.actionButtons.forEach((/**
* @param {?} button
* @return {?}
*/
(button) => {
if (typeof (button.emitValue) === 'boolean' && button.emitValue) {
button.disabled = status === 'disable' ? true : false;
}
}));
}
/**
* @return {?}
*/
get currentStatus() {
return this.status === 'activate' ? 'show' : 'hide';
}
/**
* @return {?}
*/
get trueActionButton() {
return this.actionButtons.filter((/**
* @param {?} button
* @return {?}
*/
(button) => typeof (button.emitValue) === 'boolean' && button.emitValue))[0] || undefined;
}
/**
* @param {?} label
* @param {?} callBackFunctions
* @param {?=} disabled
* @param {?=} type
* @param {?=} emitValue
* @param {?=} css
* @return {?}
*/
addNewButton(label, callBackFunctions, disabled = false, type = 'button', emitValue, css = { color: 'black', background: 'transparent', shadow: true }) {
/** @type {?} */
const button = {
text: label,
disabled: disabled,
type: type,
emitValue: emitValue,
css: css || { color: '#3f51b5', background: 'transparent', shadow: true },
callBackFunctions: callBackFunctions || undefined
};
if (this.actionButtons.length > 0) {
/** @type {?} */
const findIndex = this.actionButtons
.find((/**
* @param {?} btn
* @return {?}
*/
(btn) => (btn.type === type) &&
(typeof (emitValue) === 'boolean') &&
(typeof (emitValue) === typeof (btn.emitValue)) &&
(emitValue === btn.emitValue)));
if (!findIndex) {
this.actionButtons.splice(1, 0, button);
}
}
else {
this.actionButtons.push(button);
}
}
/**
* @return {?}
*/
buttonColorReverse() {
this.actionButtons.forEach((/**
* @param {?} button
* @return {?}
*/
(button) => {
/** @type {?} */
const background = button.css.color;
/** @type {?} */
const color = this._handleTransparentColor(button.css.background);
button.css.color = color;
button.css.background = background;
}));
}
/**
* @private
* @param {?} original
* @return {?}
*/
_handleTransparentColor(original) {
return original === 'transparent' ? 'white' : original === 'white' ? 'transparent' : original;
}
/**
* @param {?} status
* @return {?}
*/
buttonShadow(status) {
this.actionButtons.forEach((/**
* @param {?} button
* @return {?}
*/
(button) => {
button.css.shadow = status === 'show' ? true : false;
}));
}
/**
* @param {?} msgs
* @return {?}
*/
set messages(msgs) {
if (this.layoutType === 'multi') {
this.data = msgs.map((/**
* @param {?} msg
* @return {?}
*/
(msg) => new Message(msg)));
}
}
/**
* @param {?} type
* @return {?}
*/
set layoutType(type) {
if (type === 'multi') {
this.layout = new MultiNotifier();
}
else {
this.layout = new SingleNotifier();
}
}
/**
* @return {?}
*/
get layoutType() {
if (this.layout instanceof MultiNotifier) {
return 'multi';
}
else if (this.layout instanceof SingleNotifier) {
return 'single';
}
}
/**
* @return {?}
*/
get timer() {
return this._timer;
}
/**
* @return {?}
*/
show() {
this._event.next(true);
if (this.timer) {
this.cancelTimer = setTimeout((/**
* @return {?}
*/
() => this.hide(false)), this.timer.duration);
}
}
/**
* @param {?=} why
* @return {?}
*/
hide(why) {
this._event.next(why);
}
/**
* @param {?} title
* @return {?}
*/
set titleText(title) {
if (this.layoutType === 'multi') {
/** @type {?} */
const layout = (/** @type {?} */ (this.layout));
layout.titleText = title;
}
}
/**
* @return {?}
*/
get action() {
return this._event;
}
/**
* @param {?} msg
* @return {?}
*/
set header(msg) {
if (this.layoutType === 'multi') {
/** @type {?} */
const layout = (/** @type {?} */ (this.layout));
layout.head = msg;
}
}
/**
* @param {?} status
* @return {?}
*/
set isDialog(status) {
if (status) {
this.layout.displayAs = 'dialog';
this.css.position = 'center';
}
}
/**
* @param {?} status
* @return {?}
*/
set isSnack(status) {
if (status) {
this.layout.displayAs = 'snack-bar';
this.css.position = 'bottom';
}
}
/**
* @param {?} status
* @return {?}
*/
set isNotification(status) {
if (status) {
this.layout.displayAs = 'notification';
this.css.position = 'default';
}
}
/**
* @param {?} status
* @return {?}
*/
set disableOutsideClick(status) {
if (this.layoutType === 'multi') {
/** @type {?} */
const layout = (/** @type {?} */ (this.layout));
layout.disableOutsideClick = status;
}
}
/**
* @param {?} status
* @return {?}
*/
set body(status) {
if (this.layoutType === 'multi') {
/** @type {?} */
const layout = (/** @type {?} */ (this.layout));
layout.body.status = status;
}
}
/**
* @param {?} status
* @return {?}
*/
set actionRow(status) {
if (this.layoutType === 'multi') {
/** @type {?} */
const layout = (/** @type {?} */ (this.layout));
layout.actionRow.status = status;
}
}
/**
* @param {?} status
* @return {?}
*/
set closeButton(status) {
this.layout.closeButton.status = status;
}
/**
* @param {?} status
* @return {?}
*/
set title(status) {
this.layout.title.status = status;
}
/**
* @param {?} text
* @return {?}
*/
set trueButton(text) {
if (!!this.actionButtons && this.actionButtons.length > 0) {
this.actionButtons.forEach((/**
* @param {?} button
* @return {?}
*/
(button) => {
if (typeof (button.emitValue) === 'boolean' && button.emitValue === true) {
button.text = text;
return;
}
}));
}
}
/**
* @param {?} text
* @return {?}
*/
set falseButton(text) {
if (!!this.actionButtons && this.actionButtons.length > 0) {
this.actionButtons.forEach((/**
* @param {?} button
* @return {?}
*/
(button) => {
if (typeof (button.emitValue) === 'boolean' && button.emitValue === false) {
button.text = text;
return;
}
}));
}
}
/**
* @return {?}
*/
get type() {
return this.notificationType;
}
/**
* @param {?} _type
* @return {?}
*/
set type(_type) {
this.notificationType = _type;
/** default css setup */
if (_type === 'success') {
this.css.background = '#4CAF50';
this.css.color = 'white';
}
else if (_type === 'error') {
this.css.background = '#cc0000';
this.css.color = 'white';
}
else if (_type === 'warn') {
this.css.background = '#ff9800';
this.css.color = 'white';
}
else if (_type === 'note') {
this.css.background = '#2196F3';
this.css.color = 'white';
}
else if (_type === 'help') {
this.css.background = 'rgb(2, 64, 114)';
this.css.color = 'white';
}
else if (_type === 'other') {
this.css.background = '#3f51b5';
this.css.color = 'white';
}
}
/**
* @param {?} _timer
* @return {?}
*/
set timer(_timer) {
clearTimeout(this.cancelTimer);
this._timer = _timer;
}
/**
* @return {?}
*/
get afterOpened() {
return this._afterOpened.asObservable()
.pipe(take(1));
}
/**
* @return {?}
*/
get afterClosed() {
return this._afterClosed.asObservable()
.pipe(take(1));
}
/**
* @param {?} status
* @return {?}
*/
set close(status) {
this._afterClosed.next(status);
}
/**
* @return {?}
*/
opened() {
this._afterOpened.next();
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class Notifier {
/**
* @param {?} notification
*/
constructor(notification) {
this.trigger = new BehaviorSubject(new Notification());
if (notification) {
this.trigger.next(notification);
this.notice.action.subscribe((/**
* @param {?} toggle
* @return {?}
*/
(toggle) => {
if (toggle) {
this.activate();
}
else {
this.deactivate();
}
if (!this.notice.actionButtons || this.notice.actionButtons.length === 0) {
this.notice.defaultButtons();
}
}));
}
}
/**
* @return {?}
*/
get notice() {
return this.trigger.value;
}
/**
* @return {?}
*/
get isActive() {
return this.notice.status === 'activate' ? true : false;
}
/**
* @return {?}
*/
get type() {
return this.notice.type;
}
/**
* @return {?}
*/
get duration() {
return this.notice.timer.duration || null;
}
/**
* @return {?}
*/
activate() {
/** @type {?} */
const notification = this.notice;
notification.status = 'activate';
this.trigger.next(notification);
notification.opened();
}
/**
* @param {?=} status
* @return {?}
*/
deactivate(status) {
/** @type {?} */
const notification = this.notice;
notification.status = 'deactivate';
this.trigger.next(notification);
notification.close = status;
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NotifierComponent {
constructor() { }
/**
* @return {?}
*/
ngOnInit() {
if (this.notification) {
this.notifier = new Notifier(this.notification);
}
}
/**
* @param {?} event
* @return {?}
*/
close(event) {
this.notifier.deactivate(event);
}
/**
* @return {?}
*/
get status() {
return this.notifier.isActive;
}
/**
* @return {?}
*/
get timer() {
if (this.notifier.notice.timer) {
return this.notifier.notice.timer.duration;
}
return null;
}
/**
* @return {?}
*/
get layout() {
if (this.notifier.notice.layout instanceof MultiNotifier) {
return 'multi';
}
else if (this.notifier.notice.layout instanceof SingleNotifier) {
return 'single';
}
else {
return null;
}
}
/**
* @return {?}
*/
get notificationHint() {
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
};
}
}
NotifierComponent.decorators = [
{ type: 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}"]
}] }
];
/** @nocollapse */
NotifierComponent.ctorParameters = () => [];
NotifierComponent.propDecorators = {
notifierTemplates: [{ type: Input }],
customTemplate: [{ type: Input }],
notification: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
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 }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NotificationsComponent {
constructor() {
this.close = new EventEmitter();
}
/**
* @return {?}
*/
ngOnInit() {
}
/**
* @param {?} event
* @return {?}
*/
closeDailog(event) {
/** @type {?} */
const layout = (/** @type {?} */ (this.layoutHint.layout));
if (layout.displayAs === 'dialog' && !layout.disableOutsideClick) {
if (event && event.target === this.myDiv.nativeElement) {
this.close.emit(false);
}
}
}
/**
* @param {?} button
* @return {?}
*/
click(button) {
if (!!button.callBackFunctions && button.callBackFunctions.length > 0) {
for (const custom of button.callBackFunctions) {
if (custom.param) {
custom.func(custom.param);
}
else {
custom.func();
}
}
}
else {
if (button.type === 'button') {
this.notificationClose(button.emitValue);
}
}
}
/**
* @param {?} status
* @return {?}
*/
notificationClose(status) {
this.close.emit(status);
}
/**
* @return {?}
*/
get shadow() {
return !!this.layoutHint.css.shadow ? `${this.layoutHint.layout.displayAs}-shadow` : '';
}
/**
* @param {?} button
* @return {?}
*/
buttonStatus(button) {
return typeof (button.emitValue) === 'boolean' && button.emitValue;
}
/**
* @return {?}
*/
get messages() {
if (this.layoutHint && this.layoutHint.data) {
/** @type {?} */
const rows = (/** @type {?} */ (this.layoutHint.data)) || [new Message('')];
return rows.map((/**
* @param {?} row
* @return {?}
*/
(row) => row.message));
}
return [];
}
}
NotificationsComponent.decorators = [
{ type: 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 <!-- Modal content -->\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 <!-- Modal Title -->\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 <!-- Modal header -->\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 <!-- Modal Body -->\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 <!-- footer -->\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 <!-- Modal action -->\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}"]
}] }
];
/** @nocollapse */
NotificationsComponent.ctorParameters = () => [];
NotificationsComponent.propDecorators = {
myDiv: [{ type: ViewChild, args: ['parentDailog',] }],
layoutHint: [{ type: Input }],
close: [{ type: Output }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NotifierModule {
}
NotifierModule.decorators = [
{ type: NgModule, args: [{
declarations: [NotifierComponent, NotificationComponent, NotificationsComponent],
imports: [
CommonModule
],
exports: [NotifierComponent]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { NotifierComponent, NotifierModule, Notification, NotifcationLayout, SingleNotifier, MultiNotifier, Message as ɵc, NotificationComponent as ɵa, NotificationsComponent as ɵb };
//# sourceMappingURL=biplab-notifier.js.map