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
1,125 lines (1,115 loc) • 57.8 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('rxjs'), require('rxjs/operators'), require('@angular/core'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('biplab-notifier', ['exports', 'rxjs', 'rxjs/operators', '@angular/core', '@angular/common'], factory) :
(factory((global['biplab-notifier'] = {}),global.rxjs,global.rxjs.operators,global.ng.core,global.ng.common));
}(this, (function (exports,rxjs,operators,core,common) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
function __values(o) {
var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
if (m)
return m.call(o);
return {
next: function () {
if (o && i >= o.length)
o = void 0;
return { value: o && o[i++], done: !o };
}
};
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var Message = /** @class */ (function () {
function Message(message) {
this.messageId = this._guid;
this.message = message || '';
}
Object.defineProperty(Message.prototype, "_guid", {
get: /**
* @private
* @return {?}
*/ function () {
/**
* @return {?}
*/
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
s4() + '-' + s4() + s4() + s4();
},
enumerable: true,
configurable: true
});
return Message;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NotifcationLayout = /** @class */ (function () {
function NotifcationLayout(type) {
this.layout = type || new SingleNotifier();
}
return NotifcationLayout;
}());
var SingleNotifier = /** @class */ (function () {
function SingleNotifier(closeButton, title, displayAs, disableOutsideClick) {
if (closeButton === void 0) {
closeButton = { status: 'show' };
}
if (title === void 0) {
title = { status: 'show' };
}
if (displayAs === void 0) {
displayAs = 'notification';
}
if (disableOutsideClick === void 0) {
disableOutsideClick = false;
}
this.closeButton = closeButton;
this.title = title;
this.displayAs = displayAs;
this.disableOutsideClick = disableOutsideClick;
}
return SingleNotifier;
}());
var MultiNotifier = /** @class */ (function (_super) {
__extends(MultiNotifier, _super);
function MultiNotifier(head, actionRow, body, titleText, isDailog) {
if (head === void 0) {
head = '';
}
if (actionRow === void 0) {
actionRow = { status: 'show' };
}
if (body === void 0) {
body = { status: 'show' };
}
if (isDailog === void 0) {
isDailog = false;
}
var _this = _super.call(this) || this;
_this.head = head;
_this.actionRow = actionRow;
_this.body = body;
_this.titleText = titleText;
_this.isDailog = isDailog;
return _this;
}
return MultiNotifier;
}(SingleNotifier));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var Notification = /** @class */ (function (_super) {
__extends(Notification, _super);
function Notification(layoutType, displayAs, status, data, css, actionButtons) {
if (displayAs === void 0) {
displayAs = 'notification';
}
if (css === void 0) {
css = {
shadow: true,
position: 'default',
background: undefined,
color: undefined,
width: undefined,
height: undefined
};
}
if (actionButtons === void 0) {
actionButtons = [];
}
var _this = _super.call(this) || this;
_this.status = status;
_this.data = data;
_this.css = css;
_this.actionButtons = actionButtons;
_this._afterOpened = new rxjs.Subject();
_this._afterClosed = new rxjs.Subject();
_this._event = new rxjs.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;
}
return _this;
}
Object.defineProperty(Notification.prototype, "message", {
set: /**
* @param {?} msg
* @return {?}
*/ function (msg) {
if (this.layoutType === 'single') {
this.data = new Message(msg);
}
},
enumerable: true,
configurable: true
});
/**
* @param {?=} actionButtons
* @return {?}
*/
Notification.prototype.defaultButtons = /**
* @param {?=} actionButtons
* @return {?}
*/
function (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 {?}
*/
Notification.prototype.applyThemeColorInTrueButtons = /**
* @return {?}
*/
function () {
var _this = this;
this.actionButtons.forEach(( /**
* @param {?} button
* @return {?}
*/function (button) {
if (typeof (button.emitValue) === 'boolean' && button.emitValue) {
button.css.color = _this.css.color;
button.css.background = _this.css.background;
}
}));
};
Object.defineProperty(Notification.prototype, "trueActionButtonStatus", {
set: /**
* @param {?} status
* @return {?}
*/ function (status) {
this.actionButtons.forEach(( /**
* @param {?} button
* @return {?}
*/function (button) {
if (typeof (button.emitValue) === 'boolean' && button.emitValue) {
button.disabled = status === 'disable' ? true : false;
}
}));
},
enumerable: true,
configurable: true
});
Object.defineProperty(Notification.prototype, "currentStatus", {
get: /**
* @return {?}
*/ function () {
return this.status === 'activate' ? 'show' : 'hide';
},
enumerable: true,
configurable: true
});
Object.defineProperty(Notification.prototype, "trueActionButton", {
get: /**
* @return {?}
*/ function () {
return this.actionButtons.filter(( /**
* @param {?} button
* @return {?}
*/function (button) {
return typeof (button.emitValue) === 'boolean' && button.emitValue;
}))[0] || undefined;
},
enumerable: true,
configurable: true
});
/**
* @param {?} label
* @param {?} callBackFunctions
* @param {?=} disabled
* @param {?=} type
* @param {?=} emitValue
* @param {?=} css
* @return {?}
*/
Notification.prototype.addNewButton = /**
* @param {?} label
* @param {?} callBackFunctions
* @param {?=} disabled
* @param {?=} type
* @param {?=} emitValue
* @param {?=} css
* @return {?}
*/
function (label, callBackFunctions, disabled, type, emitValue, css) {
if (disabled === void 0) {
disabled = false;
}
if (type === void 0) {
type = 'button';
}
if (css === void 0) {
css = { color: 'black', background: 'transparent', shadow: true };
}
/** @type {?} */
var 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 {?} */
var findIndex = this.actionButtons
.find(( /**
* @param {?} btn
* @return {?}
*/function (btn) {
return (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 {?}
*/
Notification.prototype.buttonColorReverse = /**
* @return {?}
*/
function () {
var _this = this;
this.actionButtons.forEach(( /**
* @param {?} button
* @return {?}
*/function (button) {
/** @type {?} */
var background = button.css.color;
/** @type {?} */
var color = _this._handleTransparentColor(button.css.background);
button.css.color = color;
button.css.background = background;
}));
};
/**
* @private
* @param {?} original
* @return {?}
*/
Notification.prototype._handleTransparentColor = /**
* @private
* @param {?} original
* @return {?}
*/
function (original) {
return original === 'transparent' ? 'white' : original === 'white' ? 'transparent' : original;
};
/**
* @param {?} status
* @return {?}
*/
Notification.prototype.buttonShadow = /**
* @param {?} status
* @return {?}
*/
function (status) {
this.actionButtons.forEach(( /**
* @param {?} button
* @return {?}
*/function (button) {
button.css.shadow = status === 'show' ? true : false;
}));
};
Object.defineProperty(Notification.prototype, "messages", {
set: /**
* @param {?} msgs
* @return {?}
*/ function (msgs) {
if (this.layoutType === 'multi') {
this.data = msgs.map(( /**
* @param {?} msg
* @return {?}
*/function (msg) { return new Message(msg); }));
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(Notification.prototype, "layoutType", {
get: /**
* @return {?}
*/ function () {
if (this.layout instanceof MultiNotifier) {
return 'multi';
}
else if (this.layout instanceof SingleNotifier) {
return 'single';
}
},
set: /**
* @param {?} type
* @return {?}
*/ function (type) {
if (type === 'multi') {
this.layout = new MultiNotifier();
}
else {
this.layout = new SingleNotifier();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(Notification.prototype, "timer", {
get: /**
* @return {?}
*/ function () {
return this._timer;
},
set: /**
* @param {?} _timer
* @return {?}
*/ function (_timer) {
clearTimeout(this.cancelTimer);
this._timer = _timer;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
Notification.prototype.show = /**
* @return {?}
*/
function () {
var _this = this;
this._event.next(true);
if (this.timer) {
this.cancelTimer = setTimeout(( /**
* @return {?}
*/function () { return _this.hide(false); }), this.timer.duration);
}
};
/**
* @param {?=} why
* @return {?}
*/
Notification.prototype.hide = /**
* @param {?=} why
* @return {?}
*/
function (why) {
this._event.next(why);
};
Object.defineProperty(Notification.prototype, "titleText", {
set: /**
* @param {?} title
* @return {?}
*/ function (title) {
if (this.layoutType === 'multi') {
/** @type {?} */
var layout = ( /** @type {?} */(this.layout));
layout.titleText = title;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(Notification.prototype, "action", {
get: /**
* @return {?}
*/ function () {
return this._event;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Notification.prototype, "header", {
set: /**
* @param {?} msg
* @return {?}
*/ function (msg) {
if (this.layoutType === 'multi') {
/** @type {?} */
var layout = ( /** @type {?} */(this.layout));
layout.head = msg;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(Notification.prototype, "isDialog", {
set: /**
* @param {?} status
* @return {?}
*/ function (status) {
if (status) {
this.layout.displayAs = 'dialog';
this.css.position = 'center';
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(Notification.prototype, "isSnack", {
set: /**
* @param {?} status
* @return {?}
*/ function (status) {
if (status) {
this.layout.displayAs = 'snack-bar';
this.css.position = 'bottom';
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(Notification.prototype, "isNotification", {
set: /**
* @param {?} status
* @return {?}
*/ function (status) {
if (status) {
this.layout.displayAs = 'notification';
this.css.position = 'default';
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(Notification.prototype, "disableOutsideClick", {
set: /**
* @param {?} status
* @return {?}
*/ function (status) {
if (this.layoutType === 'multi') {
/** @type {?} */
var layout = ( /** @type {?} */(this.layout));
layout.disableOutsideClick = status;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(Notification.prototype, "body", {
set: /**
* @param {?} status
* @return {?}
*/ function (status) {
if (this.layoutType === 'multi') {
/** @type {?} */
var layout = ( /** @type {?} */(this.layout));
layout.body.status = status;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(Notification.prototype, "actionRow", {
set: /**
* @param {?} status
* @return {?}
*/ function (status) {
if (this.layoutType === 'multi') {
/** @type {?} */
var layout = ( /** @type {?} */(this.layout));
layout.actionRow.status = status;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(Notification.prototype, "closeButton", {
set: /**
* @param {?} status
* @return {?}
*/ function (status) {
this.layout.closeButton.status = status;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Notification.prototype, "title", {
set: /**
* @param {?} status
* @return {?}
*/ function (status) {
this.layout.title.status = status;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Notification.prototype, "trueButton", {
set: /**
* @param {?} text
* @return {?}
*/ function (text) {
if (!!this.actionButtons && this.actionButtons.length > 0) {
this.actionButtons.forEach(( /**
* @param {?} button
* @return {?}
*/function (button) {
if (typeof (button.emitValue) === 'boolean' && button.emitValue === true) {
button.text = text;
return;
}
}));
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(Notification.prototype, "falseButton", {
set: /**
* @param {?} text
* @return {?}
*/ function (text) {
if (!!this.actionButtons && this.actionButtons.length > 0) {
this.actionButtons.forEach(( /**
* @param {?} button
* @return {?}
*/function (button) {
if (typeof (button.emitValue) === 'boolean' && button.emitValue === false) {
button.text = text;
return;
}
}));
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(Notification.prototype, "type", {
get: /**
* @return {?}
*/ function () {
return this.notificationType;
},
set: /**
* @param {?} _type
* @return {?}
*/ function (_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';
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(Notification.prototype, "afterOpened", {
get: /**
* @return {?}
*/ function () {
return this._afterOpened.asObservable()
.pipe(operators.take(1));
},
enumerable: true,
configurable: true
});
Object.defineProperty(Notification.prototype, "afterClosed", {
get: /**
* @return {?}
*/ function () {
return this._afterClosed.asObservable()
.pipe(operators.take(1));
},
enumerable: true,
configurable: true
});
Object.defineProperty(Notification.prototype, "close", {
set: /**
* @param {?} status
* @return {?}
*/ function (status) {
this._afterClosed.next(status);
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
Notification.prototype.opened = /**
* @return {?}
*/
function () {
this._afterOpened.next();
};
return Notification;
}(NotifcationLayout));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var Notifier = /** @class */ (function () {
function Notifier(notification) {
var _this = this;
this.trigger = new rxjs.BehaviorSubject(new Notification());
if (notification) {
this.trigger.next(notification);
this.notice.action.subscribe(( /**
* @param {?} toggle
* @return {?}
*/function (toggle) {
if (toggle) {
_this.activate();
}
else {
_this.deactivate();
}
if (!_this.notice.actionButtons || _this.notice.actionButtons.length === 0) {
_this.notice.defaultButtons();
}
}));
}
}
Object.defineProperty(Notifier.prototype, "notice", {
get: /**
* @return {?}
*/ function () {
return this.trigger.value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Notifier.prototype, "isActive", {
get: /**
* @return {?}
*/ function () {
return this.notice.status === 'activate' ? true : false;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Notifier.prototype, "type", {
get: /**
* @return {?}
*/ function () {
return this.notice.type;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Notifier.prototype, "duration", {
get: /**
* @return {?}
*/ function () {
return this.notice.timer.duration || null;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
Notifier.prototype.activate = /**
* @return {?}
*/
function () {
/** @type {?} */
var notification = this.notice;
notification.status = 'activate';
this.trigger.next(notification);
notification.opened();
};
/**
* @param {?=} status
* @return {?}
*/
Notifier.prototype.deactivate = /**
* @param {?=} status
* @return {?}
*/
function (status) {
/** @type {?} */
var notification = this.notice;
notification.status = 'deactivate';
this.trigger.next(notification);
notification.close = status;
};
return Notifier;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NotifierComponent = /** @class */ (function () {
function NotifierComponent() {
}
/**
* @return {?}
*/
NotifierComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
if (this.notification) {
this.notifier = new Notifier(this.notification);
}
};
/**
* @param {?} event
* @return {?}
*/
NotifierComponent.prototype.close = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.notifier.deactivate(event);
};
Object.defineProperty(NotifierComponent.prototype, "status", {
get: /**
* @return {?}
*/ function () {
return this.notifier.isActive;
},
enumerable: true,
configurable: true
});
Object.defineProperty(NotifierComponent.prototype, "timer", {
get: /**
* @return {?}
*/ function () {
if (this.notifier.notice.timer) {
return this.notifier.notice.timer.duration;
}
return null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(NotifierComponent.prototype, "layout", {
get: /**
* @return {?}
*/ function () {
if (this.notifier.notice.layout instanceof MultiNotifier) {
return 'multi';
}
else if (this.notifier.notice.layout instanceof SingleNotifier) {
return 'single';
}
else {
return null;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(NotifierComponent.prototype, "notificationHint", {
get: /**
* @return {?}
*/ 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: true,
configurable: true
});
NotifierComponent.decorators = [
{ type: core.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 = function () { return []; };
NotifierComponent.propDecorators = {
notifierTemplates: [{ type: core.Input }],
customTemplate: [{ type: core.Input }],
notification: [{ type: core.Input }]
};
return NotifierComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NotificationComponent = /** @class */ (function () {
function NotificationComponent() {
this.close = new core.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: core.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: core.ViewChild, args: ['parentDailog',] }],
layoutHint: [{ type: core.Input }],
close: [{ type: core.Output }]
};
return NotificationComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NotificationsComponent = /** @class */ (function () {
function NotificationsComponent() {
this.close = new core.EventEmitter();
}
/**
* @return {?}
*/
NotificationsComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
};
/**
* @param {?} event
* @return {?}
*/
NotificationsComponent.prototype.closeDailog = /**
* @param {?} event
* @return {?}
*/
function (event) {
/** @type {?} */
var 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 {?}
*/
NotificationsComponent.prototype.click = /**
* @param {?} button
* @return {?}
*/
function (button) {
var e_1, _a;
if (!!button.callBackFunctions && button.callBackFunctions.length > 0) {
try {
for (var _b = __values(button.callBackFunctions), _c = _b.next(); !_c.done; _c = _b.next()) {
var custom = _c.value;
if (custom.param) {
custom.func(custom.param);
}
else {
custom.func();
}
}
}
catch (e_1_1) {
e_1 = { error: e_1_1 };
}
finally {
try {
if (_c && !_c.done && (_a = _b.return))
_a.call(_b);
}
finally {
if (e_1)
throw e_1.error;
}
}
}
else {
if (button.type === 'button') {
this.notificationClose(button.emitValue);
}
}
};
/**
* @param {?} status
* @return {?}
*/
NotificationsComponent.prototype.notificationClose = /**
* @param {?} status
* @return {?}
*/
function (status) {
this.close.emit(status);
};
Object.defineProperty(NotificationsComponent.prototype, "shadow", {
get: /**
* @return {?}
*/ function () {
return !!this.layoutHint.css.shadow ? this.layoutHint.layout.displayAs + "-shadow" : '';
},
enumerable: true,
configurable: true
});
/**
* @param {?} button
* @return {?}
*/
NotificationsComponent.prototype.buttonStatus = /**
* @param {?} button
* @return {?}
*/
function (button) {
return typeof (button.emitValue) === 'boolean' && button.emitValue;
};
Object.defineProperty(NotificationsComponent.prototype, "messages", {
get: /**
* @return {?}
*/ function () {
if (this.layoutHint && this.layoutHint.data) {
/** @type {?} */
var rows = ( /** @type {?} */(this.layoutHint.data)) || [new Message('')];
return rows.map(( /**
* @param {?} row
* @return {?}
*/function (row) { return row.message; }));
}
return [];
},
enumerable: true,
configurable: true
});
NotificationsComponent.decorators = [
{ type: core.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 [typ