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
108 lines • 17.8 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input, Output, EventEmitter, ElementRef, ViewChild } from '@angular/core';
import { Message } from '../message/notifer';
export 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 }]
};
if (false) {
/** @type {?} */
NotificationsComponent.prototype.myDiv;
/** @type {?} */
NotificationsComponent.prototype.layoutHint;
/** @type {?} */
NotificationsComponent.prototype.close;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibm90aWZpY2F0aW9ucy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9iaXBsYWItbm90aWZpZXIvIiwic291cmNlcyI6WyJsaWIvbm90aWZpY2F0aW9ucy9ub3RpZmljYXRpb25zLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxLQUFLLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBRSxVQUFVLEVBQUUsU0FBUyxFQUFLLE1BQU0sZUFBZSxDQUFDO0FBRXpHLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQVE3QyxNQUFNLE9BQU8sc0JBQXNCO0lBS2pDO1FBQ0UsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO0lBQ3ZDLENBQUM7Ozs7SUFFRCxRQUFRO0lBQ1IsQ0FBQzs7Ozs7SUFFRCxXQUFXLENBQUMsS0FBVTs7Y0FDZCxNQUFNLEdBQUcsbUJBQUEsSUFBSSxDQUFDLFVBQVUsQ0FBQyxNQUFNLEVBQWlCO1FBQ3RELElBQUssTUFBTSxDQUFDLFNBQVMsS0FBSyxRQUFRLElBQUksQ0FBQyxNQUFNLENBQUMsbUJBQW1CLEVBQUc7WUFDbEUsSUFBSSxLQUFLLElBQUssS0FBSyxDQUFDLE1BQU0sS0FBSyxJQUFJLENBQUMsS0FBSyxDQUFDLGFBQWEsRUFBRTtnQkFDdkQsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7YUFDeEI7U0FDRjtJQUNILENBQUM7Ozs7O0lBRUQsS0FBSyxDQUFDLE1BQTBCO1FBQzlCLElBQUksQ0FBQyxDQUFDLE1BQU0sQ0FBQyxpQkFBaUIsSUFBSSxNQUFNLENBQUMsaUJBQWlCLENBQUMsTUFBTSxHQUFHLENBQUMsRUFBRTtZQUNyRSxLQUFLLE1BQU0sTUFBTSxJQUFJLE1BQU0sQ0FBQyxpQkFBaUIsRUFBRTtnQkFDN0MsSUFBSyxNQUFNLENBQUMsS0FBSyxFQUFFO29CQUNqQixNQUFNLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUMsQ0FBQztpQkFDM0I7cUJBQU07b0JBQ0wsTUFBTSxDQUFDLElBQUksRUFBRSxDQUFDO2lCQUNmO2FBQ0Y7U0FDRjthQUFNO1lBQ0wsSUFBSyxNQUFNLENBQUMsSUFBSSxLQUFLLFFBQVEsRUFBRztnQkFDOUIsSUFBSSxDQUFDLGlCQUFpQixDQUFDLE1BQU0sQ0FBQyxTQUFTLENBQUMsQ0FBQzthQUMxQztTQUNGO0lBQ0gsQ0FBQzs7Ozs7SUFDRCxpQkFBaUIsQ0FBQyxNQUFXO1FBQzNCLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBQzFCLENBQUM7Ozs7SUFFRCxJQUFJLE1BQU07UUFDUixPQUFPLENBQUMsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLEdBQUcsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLEdBQUksSUFBSSxDQUFDLFVBQVUsQ0FBQyxNQUFNLENBQUMsU0FBVSxTQUFTLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQztJQUM1RixDQUFDOzs7OztJQUVELFlBQVksQ0FBQyxNQUEwQjtRQUNyQyxPQUFPLE9BQU0sQ0FBQyxNQUFNLENBQUMsU0FBUyxDQUFDLEtBQUssU0FBUyxJQUFJLE1BQU0sQ0FBQyxTQUFTLENBQUM7SUFDcEUsQ0FBQzs7OztJQUVELElBQUksUUFBUTtRQUNWLElBQUksSUFBSSxDQUFDLFVBQVUsSUFBSSxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksRUFBRTs7a0JBQ3JDLElBQUksR0FBRyxtQkFBVyxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksRUFBQSxJQUFJLENBQUUsSUFBSSxPQUFPLENBQUMsRUFBRSxDQUFDLENBQUM7WUFDbEUsT0FBTyxJQUFJLENBQUMsR0FBRzs7OztZQUFDLENBQUMsR0FBWSxFQUFFLEVBQUUsQ0FBQyxHQUFHLENBQUMsT0FBTyxFQUFDLENBQUM7U0FDaEQ7UUFDRCxPQUFPLEVBQUUsQ0FBQztJQUNaLENBQUM7OztZQTNERixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLHNCQUFzQjtnQkFDaEMsdW5KQUE2Qzs7YUFFOUM7Ozs7O29CQUVFLFNBQVMsU0FBQyxjQUFjO3lCQUN4QixLQUFLO29CQUNMLE1BQU07Ozs7SUFGUCx1Q0FBNkM7O0lBQzdDLDRDQUFzQzs7SUFDdEMsdUNBQW1DIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIElucHV0LCBPdXRwdXQsIEV2ZW50RW1pdHRlciwgRWxlbWVudFJlZiwgVmlld0NoaWxkICAgIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBOb3RpZmljYXRpb25IaW50IH0gZnJvbSAnLi4vbGF5b3V0L25vdGlmaWVyJztcbmltcG9ydCB7IE1lc3NhZ2UgfSBmcm9tICcuLi9tZXNzYWdlL25vdGlmZXInO1xuaW1wb3J0IHsgTXVsdGlOb3RpZmllciwgTm90aWZpY2F0aW9uQnV0dG9uIH0gZnJvbSAnLi4vbGF5b3V0L25vdGlmaWVyJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYmlwbGFiLW5vdGlmaWNhdGlvbnMnLFxuICB0ZW1wbGF0ZVVybDogJy4vbm90aWZpY2F0aW9ucy5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL25vdGlmaWNhdGlvbnMuY29tcG9uZW50LmNzcyddXG59KVxuZXhwb3J0IGNsYXNzIE5vdGlmaWNhdGlvbnNDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBAVmlld0NoaWxkKCdwYXJlbnREYWlsb2cnKSBteURpdjogRWxlbWVudFJlZjtcbiAgQElucHV0KCkgbGF5b3V0SGludDogTm90aWZpY2F0aW9uSGludDtcbiAgQE91dHB1dCgpIGNsb3NlOiBFdmVudEVtaXR0ZXI8YW55PjtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICB0aGlzLmNsb3NlID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG4gIH1cblxuICBuZ09uSW5pdCgpIHtcbiAgfVxuXG4gIGNsb3NlRGFpbG9nKGV2ZW50OiBhbnkpIHtcbiAgICBjb25zdCBsYXlvdXQgPSB0aGlzLmxheW91dEhpbnQubGF5b3V0IGFzIE11bHRpTm90aWZpZXI7XG4gICAgaWYgKCBsYXlvdXQuZGlzcGxheUFzID09PSAnZGlhbG9nJyAmJiAhbGF5b3V0LmRpc2FibGVPdXRzaWRlQ2xpY2sgKSB7XG4gICAgICBpZiAoZXZlbnQgICYmIGV2ZW50LnRhcmdldCA9PT0gdGhpcy5teURpdi5uYXRpdmVFbGVtZW50KSB7XG4gICAgICAgIHRoaXMuY2xvc2UuZW1pdChmYWxzZSk7XG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgY2xpY2soYnV0dG9uOiBOb3RpZmljYXRpb25CdXR0b24pIHtcbiAgICBpZiAoISFidXR0b24uY2FsbEJhY2tGdW5jdGlvbnMgJiYgYnV0dG9uLmNhbGxCYWNrRnVuY3Rpb25zLmxlbmd0aCA+IDApIHtcbiAgICAgIGZvciAoY29uc3QgY3VzdG9tIG9mIGJ1dHRvbi5jYWxsQmFja0Z1bmN0aW9ucykge1xuICAgICAgICBpZiAoIGN1c3RvbS5wYXJhbSkge1xuICAgICAgICAgIGN1c3RvbS5mdW5jKGN1c3RvbS5wYXJhbSk7XG4gICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgY3VzdG9tLmZ1bmMoKTtcbiAgICAgICAgfVxuICAgICAgfVxuICAgIH0gZWxzZSB7XG4gICAgICBpZiAoIGJ1dHRvbi50eXBlID09PSAnYnV0dG9uJyApIHtcbiAgICAgICAgdGhpcy5ub3RpZmljYXRpb25DbG9zZShidXR0b24uZW1pdFZhbHVlKTtcbiAgICAgIH1cbiAgICB9XG4gIH1cbiAgbm90aWZpY2F0aW9uQ2xvc2Uoc3RhdHVzOiBhbnkpIHtcbiAgICB0aGlzLmNsb3NlLmVtaXQoc3RhdHVzKTtcbiAgfVxuXG4gIGdldCBzaGFkb3coKTogc3RyaW5nIHtcbiAgICByZXR1cm4gISF0aGlzLmxheW91dEhpbnQuY3NzLnNoYWRvdyA/IGAkeyB0aGlzLmxheW91dEhpbnQubGF5b3V0LmRpc3BsYXlBcyB9LXNoYWRvd2AgOiAnJztcbiAgfVxuXG4gIGJ1dHRvblN0YXR1cyhidXR0b246IE5vdGlmaWNhdGlvbkJ1dHRvbik6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0eXBlb2YoYnV0dG9uLmVtaXRWYWx1ZSkgPT09ICdib29sZWFuJyAmJiBidXR0b24uZW1pdFZhbHVlO1xuICB9XG5cbiAgZ2V0IG1lc3NhZ2VzKCk6IHN0cmluZ1tdIHtcbiAgICBpZiAodGhpcy5sYXlvdXRIaW50ICYmIHRoaXMubGF5b3V0SGludC5kYXRhKSB7XG4gICAgICBjb25zdCByb3dzID0gPE1lc3NhZ2VbXT50aGlzLmxheW91dEhpbnQuZGF0YSB8fCBbIG5ldyBNZXNzYWdlKCcnKV07XG4gICAgICByZXR1cm4gcm93cy5tYXAoKHJvdzogTWVzc2FnZSkgPT4gcm93Lm1lc3NhZ2UpO1xuICAgIH1cbiAgICByZXR1cm4gW107XG4gIH1cbn1cbiJdfQ==