ng-feedback
Version:
An angular directive for sending feedback featuring Angular 6, Html2canvas, Angular Material, Rxjs, inspired by Google send feedback, based on angular-cli.
137 lines (136 loc) • 16.1 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
import { fromEvent as observableFromEvent } from 'rxjs';
import { takeUntil, finalize, map, mergeMap } from 'rxjs/operators';
import { Component, ElementRef, Input, Output, EventEmitter, ViewChild } from '@angular/core';
import { FeedbackService } from '../feedback.service';
export class FeedbackToolbarComponent {
/**
* @param {?} el
* @param {?} feedbackService
*/
constructor(el, feedbackService) {
this.el = el;
this.feedbackService = feedbackService;
this.manipulate = new EventEmitter();
this.disableToolbarTips = false;
this.isSwitch = false;
this.isDragging = false;
this.vars = {};
this.vars = feedbackService.initialVariables;
}
/**
* @return {?}
*/
ngAfterViewInit() {
/** @type {?} */
const elStyle = this.el.nativeElement.style;
elStyle.position = 'absolute';
elStyle.left = '43%';
elStyle.top = '60%';
this.addDragListenerOnMoveBtn();
}
/**
* @return {?}
*/
ngOnChanges() {
this.isSwitch = this.drawColor !== this.feedbackService.highlightedColor;
}
/**
* @return {?}
*/
done() {
this.manipulate.emit('done');
}
/**
* @return {?}
*/
toggleHighlight() {
this.isSwitch = false;
this.manipulate.emit(this.feedbackService.highlightedColor);
}
/**
* @return {?}
*/
toggleHide() {
this.isSwitch = true;
this.manipulate.emit(this.feedbackService.hiddenColor);
}
/**
* @return {?}
*/
addDragListenerOnMoveBtn() {
/** @type {?} */
const mouseUp = observableFromEvent(this.toggleMoveBtn.nativeElement, 'mouseup');
/** @type {?} */
const mouseMove = observableFromEvent(document.documentElement, 'mousemove');
/** @type {?} */
const mouseDown = observableFromEvent(this.toggleMoveBtn.nativeElement, 'mousedown');
/** @type {?} */
const mouseDrag = mouseDown.pipe(mergeMap((md) => {
this.feedbackService.setIsDraggingToolbar(true);
/** @type {?} */
const startX = md.offsetX;
/** @type {?} */
const startY = md.offsetY;
this.disableToolbarTips = true;
this.isDragging = true;
// Calculate dif with mousemove until mouseup
return mouseMove.pipe(map((mm) => {
mm.preventDefault();
return {
left: mm.clientX - startX,
top: mm.clientY - startY
};
}), finalize(() => {
this.isDragging = false;
this.disableToolbarTips = false;
this.feedbackService.setIsDraggingToolbar(false);
}), takeUntil(mouseUp));
}));
mouseDrag.subscribe((pos) => {
this.el.nativeElement.style.left = pos.left + 'px';
this.el.nativeElement.style.top = pos.top + 'px';
});
}
}
FeedbackToolbarComponent.decorators = [
{ type: Component, args: [{
selector: 'feedback-toolbar',
template: "<div exclude-rect=\"true\" class=\"toolbar\">\r\n <div class=\"move-toolbar\" #toggleMove [matTooltip]=\"vars['moveToolbarTip']\" [matTooltipDisabled]=\"disableToolbarTips\">\r\n <svg focusable=\"false\" aria-label=\"Drag\" fill=\"#BDBDBD\" height=\"56\" width=\"16\"\r\n viewBox=\"-2 2 12 12\">\r\n <circle cx=\"1.5\" cy=\"1.5\" r=\"1.5\"></circle>\r\n <circle cx=\"1.5\" cy=\"7.5\" r=\"1.5\"></circle>\r\n <circle cx=\"1.5\" cy=\"13.5\" r=\"1.5\"></circle>\r\n <circle cx=\"6.5\" cy=\"1.5\" r=\"1.5\"></circle>\r\n <circle cx=\"6.5\" cy=\"7.5\" r=\"1.5\"></circle>\r\n <circle cx=\"6.5\" cy=\"13.5\" r=\"1.5\"></circle>\r\n </svg>\r\n </div>\r\n <button #highlightBtn (click)=\"toggleHighlight()\" [matTooltip]=\"vars['highlightTip']\"\r\n [matTooltipDisabled]=\"disableToolbarTips\" class=\"highlight-toggle\" [ngClass]=\"{'deepen-color': !isSwitch}\">\r\n <span class=\"toggle\">\r\n <svg focusable=\"false\" aria-label=\"\" viewBox=\"0 0 24 24\" height=\"36\" width=\"36\"\r\n fill=\"#ffd740\">\r\n <path d=\"M3 3h18v18H3z\"></path>\r\n </svg>\r\n\r\n <svg focusable=\"false\" aria-label=\"\" fill=\"#757575\" viewBox=\"0 0 24 24\"\r\n height=\"36\" width=\"36\" [ngClass]=\"{'toggle-decorator': !isSwitch}\" *ngIf=\"!isSwitch\">\r\n <path\r\n d=\"M21 17h-2.58l2.51 2.56c-.18.69-.73 1.26-1.41 1.44L17 18.5V21h-2v-6h6v2zM19 7h2v2h-2V7zm2-2h-2V3.08c1.1 0 2 .92 2 1.92zm-6-2h2v2h-2V3zm4 8h2v2h-2v-2zM9 21H7v-2h2v2zM5 9H3V7h2v2zm0-5.92V5H3c0-1 1-1.92 2-1.92zM5 17H3v-2h2v2zM9 5H7V3h2v2zm4 0h-2V3h2v2zm0 16h-2v-2h2v2zm-8-8H3v-2h2v2zm0 8.08C3.9 21.08 3 20 3 19h2v2.08z\"></path>\r\n </svg>\r\n </span>\r\n </button>\r\n <button (click)=\"toggleHide()\" [matTooltip]=\"vars['hideTip']\" [matTooltipDisabled]=\"disableToolbarTips\"\r\n class=\"hide-toggle\" [ngClass]=\"{'deepen-color': isSwitch}\">\r\n <span class=\"toggle\">\r\n <svg focusable=\"false\" aria-label=\"\" viewBox=\"0 0 24 24\" height=\"36\" width=\"36\"\r\n fill=\"#000\">\r\n <path d=\"M3 3h18v18H3z\"></path>\r\n </svg>\r\n <svg focusable=\"false\" aria-label=\"\" fill=\"#757575\" viewBox=\"0 0 24 24\"\r\n height=\"36\" width=\"36\" [ngClass]=\"{'toggle-decorator': isSwitch}\" *ngIf=\"isSwitch\">\r\n <path\r\n d=\"M21 17h-2.58l2.51 2.56c-.18.69-.73 1.26-1.41 1.44L17 18.5V21h-2v-6h6v2zM19 7h2v2h-2V7zm2-2h-2V3.08c1.1 0 2 .92 2 1.92zm-6-2h2v2h-2V3zm4 8h2v2h-2v-2zM9 21H7v-2h2v2zM5 9H3V7h2v2zm0-5.92V5H3c0-1 1-1.92 2-1.92zM5 17H3v-2h2v2zM9 5H7V3h2v2zm4 0h-2V3h2v2zm0 16h-2v-2h2v2zm-8-8H3v-2h2v2zm0 8.08C3.9 21.08 3 20 3 19h2v2.08z\"></path>\r\n </svg>\r\n </span>\r\n </button>\r\n <button mat-button class=\"merge-button\" (click)=\"done()\">{{vars['editDoneLabel']}}</button>\r\n</div>\r\n",
styles: [".toolbar{align-items:center;background-color:#fff;border-radius:2px;box-shadow:rgba(0,0,0,.14) 0 24px 38px 3px,rgba(0,0,0,.12) 0 9px 46px 8px,rgba(0,0,0,.2) 0 11px 15px -7px;cursor:pointer;display:-webkit-inline-flex;flex-direction:row;height:56px;min-width:232px;pointer-events:auto;overflow:visible;position:absolute;margin:0 auto;width:228px;bottom:0;top:25%;left:0;right:0;z-index:999}.move-toolbar{cursor:-webkit-grab;height:56px;padding:0 12px;position:relative}.move-toolbar:active{cursor:-webkit-grabbing}.toggle{display:inline-block;position:relative;height:36px;width:36px}.toggle-decorator{left:0;position:absolute;top:0}.highlight-toggle{align-items:center;background-color:#fff;border:none;box-sizing:border-box;cursor:pointer;display:-webkit-flex;justify-content:center;outline:0;padding:10px;pointer-events:auto;position:relative;height:56px;width:56px}.deepen-color{background-color:#e0e0e0!important}.hide-toggle{align-items:center;background-color:#fff;border:none;box-sizing:border-box;cursor:pointer;display:-webkit-flex;justify-content:center;outline:0;padding:10px;pointer-events:auto;position:relative;height:56px;width:56px}.merge-button{padding:0!important;margin:0 10px!important;min-width:56px;color:#4285f4}"]
}] }
];
/** @nocollapse */
FeedbackToolbarComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: FeedbackService }
];
FeedbackToolbarComponent.propDecorators = {
drawColor: [{ type: Input }],
manipulate: [{ type: Output }],
toggleMoveBtn: [{ type: ViewChild, args: ['toggleMove',] }]
};
if (false) {
/** @type {?} */
FeedbackToolbarComponent.prototype.drawColor;
/** @type {?} */
FeedbackToolbarComponent.prototype.manipulate;
/** @type {?} */
FeedbackToolbarComponent.prototype.disableToolbarTips;
/** @type {?} */
FeedbackToolbarComponent.prototype.toggleMoveBtn;
/** @type {?} */
FeedbackToolbarComponent.prototype.isSwitch;
/** @type {?} */
FeedbackToolbarComponent.prototype.isDragging;
/** @type {?} */
FeedbackToolbarComponent.prototype.vars;
/** @type {?} */
FeedbackToolbarComponent.prototype.el;
/** @type {?} */
FeedbackToolbarComponent.prototype.feedbackService;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmVlZGJhY2stdG9vbGJhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZy1mZWVkYmFjay8iLCJzb3VyY2VzIjpbImxpYi9mZWVkYmFjay10b29sYmFyL2ZlZWRiYWNrLXRvb2xiYXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUMsU0FBUyxJQUFJLG1CQUFtQixFQUFDLE1BQU0sTUFBTSxDQUFDO0FBRXRELE9BQU8sRUFBQyxTQUFTLEVBQUUsUUFBUSxFQUFFLEdBQUcsRUFBRSxRQUFRLEVBQUMsTUFBTSxnQkFBZ0IsQ0FBQztBQUNsRSxPQUFPLEVBQUMsU0FBUyxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBaUIsU0FBUyxFQUFZLE1BQU0sZUFBZSxDQUFDO0FBQ3RILE9BQU8sRUFBQyxlQUFlLEVBQUMsTUFBTSxxQkFBcUIsQ0FBQztBQVNwRCxNQUFNOzs7OztJQVlKLFlBQW1CLEVBQWMsRUFBVSxlQUFnQztRQUF4RCxPQUFFLEdBQUYsRUFBRSxDQUFZO1FBQVUsb0JBQWUsR0FBZixlQUFlLENBQWlCOzBCQVJ2RCxJQUFJLFlBQVksRUFBVTtrQ0FDbEIsS0FBSzt3QkFHZixLQUFLOzBCQUNILEtBQUs7b0JBQ0gsRUFBRTtRQUd0QixJQUFJLENBQUMsSUFBSSxHQUFHLGVBQWUsQ0FBQyxnQkFBZ0IsQ0FBQztLQUM5Qzs7OztJQUVNLGVBQWU7O1FBQ3BCLE1BQU0sT0FBTyxHQUFHLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQztRQUM1QyxPQUFPLENBQUMsUUFBUSxHQUFHLFVBQVUsQ0FBQztRQUM5QixPQUFPLENBQUMsSUFBSSxHQUFHLEtBQUssQ0FBQztRQUNyQixPQUFPLENBQUMsR0FBRyxHQUFHLEtBQUssQ0FBQztRQUNwQixJQUFJLENBQUMsd0JBQXdCLEVBQUUsQ0FBQzs7Ozs7SUFHM0IsV0FBVztRQUNoQixJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxTQUFTLEtBQUssSUFBSSxDQUFDLGVBQWUsQ0FBQyxnQkFBZ0IsQ0FBQzs7Ozs7SUFHcEUsSUFBSTtRQUNULElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDOzs7OztJQUd4QixlQUFlO1FBQ3BCLElBQUksQ0FBQyxRQUFRLEdBQUcsS0FBSyxDQUFDO1FBQ3RCLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxlQUFlLENBQUMsZ0JBQWdCLENBQUMsQ0FBQzs7Ozs7SUFHdkQsVUFBVTtRQUNmLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDO1FBQ3JCLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxlQUFlLENBQUMsV0FBVyxDQUFDLENBQUM7Ozs7O0lBR2xELHdCQUF3Qjs7UUFDN0IsTUFBTSxPQUFPLEdBQUcsbUJBQW1CLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxhQUFhLEVBQUUsU0FBUyxDQUFDLENBQUM7O1FBQ2pGLE1BQU0sU0FBUyxHQUFHLG1CQUFtQixDQUFDLFFBQVEsQ0FBQyxlQUFlLEVBQUUsV0FBVyxDQUFDLENBQUM7O1FBQzdFLE1BQU0sU0FBUyxHQUFHLG1CQUFtQixDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsYUFBYSxFQUFFLFdBQVcsQ0FBQyxDQUFDOztRQUNyRixNQUFNLFNBQVMsR0FBRyxTQUFTLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDLEVBQWMsRUFBRSxFQUFFO1lBQzNELElBQUksQ0FBQyxlQUFlLENBQUMsb0JBQW9CLENBQUMsSUFBSSxDQUFDLENBQUM7O1lBQ2hELE1BQU0sTUFBTSxHQUFHLEVBQUUsQ0FBQyxPQUFPLENBQUM7O1lBQzFCLE1BQU0sTUFBTSxHQUFHLEVBQUUsQ0FBQyxPQUFPLENBQUM7WUFDMUIsSUFBSSxDQUFDLGtCQUFrQixHQUFHLElBQUksQ0FBQztZQUMvQixJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQzs7WUFFdkIsT0FBTyxTQUFTLENBQUMsSUFBSSxDQUNuQixHQUFHLENBQUMsQ0FBQyxFQUFjLEVBQUUsRUFBRTtnQkFDckIsRUFBRSxDQUFDLGNBQWMsRUFBRSxDQUFDO2dCQUNwQixPQUFPO29CQUNMLElBQUksRUFBRSxFQUFFLENBQUMsT0FBTyxHQUFHLE1BQU07b0JBQ3pCLEdBQUcsRUFBRSxFQUFFLENBQUMsT0FBTyxHQUFHLE1BQU07aUJBQ3pCLENBQUM7YUFDSCxDQUFDLEVBQ0YsUUFBUSxDQUFDLEdBQUcsRUFBRTtnQkFDWixJQUFJLENBQUMsVUFBVSxHQUFHLEtBQUssQ0FBQztnQkFDeEIsSUFBSSxDQUFDLGtCQUFrQixHQUFHLEtBQUssQ0FBQztnQkFDaEMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxvQkFBb0IsQ0FBQyxLQUFLLENBQUMsQ0FBQzthQUNsRCxDQUFDLEVBQ0YsU0FBUyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUM7U0FDdkIsQ0FBQyxDQUFDLENBQUM7UUFDSixTQUFTLENBQUMsU0FBUyxDQUNqQixDQUFDLEdBQUcsRUFBRSxFQUFFO1lBQ04sSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLElBQUksR0FBRyxHQUFHLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQztZQUNuRCxJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsR0FBRyxHQUFHLEdBQUcsQ0FBQyxHQUFHLEdBQUcsSUFBSSxDQUFDO1NBQ2xELENBQUMsQ0FBQzs7OztZQTlFUixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLGtCQUFrQjtnQkFDNUIsK3pGQUFnRDs7YUFFakQ7Ozs7WUFSa0IsVUFBVTtZQUNyQixlQUFlOzs7d0JBVXBCLEtBQUs7eUJBRUwsTUFBTTs0QkFHTixTQUFTLFNBQUMsWUFBWSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7ZnJvbUV2ZW50IGFzIG9ic2VydmFibGVGcm9tRXZlbnR9IGZyb20gJ3J4anMnO1xyXG5cclxuaW1wb3J0IHt0YWtlVW50aWwsIGZpbmFsaXplLCBtYXAsIG1lcmdlTWFwfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XHJcbmltcG9ydCB7Q29tcG9uZW50LCBFbGVtZW50UmVmLCBJbnB1dCwgT3V0cHV0LCBFdmVudEVtaXR0ZXIsIEFmdGVyVmlld0luaXQsIFZpZXdDaGlsZCwgT25DaGFuZ2VzfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHtGZWVkYmFja1NlcnZpY2V9IGZyb20gJy4uL2ZlZWRiYWNrLnNlcnZpY2UnO1xyXG5cclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnZmVlZGJhY2stdG9vbGJhcicsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2ZlZWRiYWNrLXRvb2xiYXIuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL2ZlZWRiYWNrLXRvb2xiYXIuY29tcG9uZW50LmNzcyddXHJcbn0pXHJcblxyXG5leHBvcnQgY2xhc3MgRmVlZGJhY2tUb29sYmFyQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCwgT25DaGFuZ2VzIHtcclxuICBASW5wdXQoKVxyXG4gIHB1YmxpYyBkcmF3Q29sb3I6IHN0cmluZztcclxuICBAT3V0cHV0KClcclxuICBwdWJsaWMgbWFuaXB1bGF0ZSA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xyXG4gIHB1YmxpYyBkaXNhYmxlVG9vbGJhclRpcHMgPSBmYWxzZTtcclxuICBAVmlld0NoaWxkKCd0b2dnbGVNb3ZlJylcclxuICBwcml2YXRlIHRvZ2dsZU1vdmVCdG46IEVsZW1lbnRSZWY7XHJcbiAgcHVibGljIGlzU3dpdGNoID0gZmFsc2U7XHJcbiAgcHVibGljIGlzRHJhZ2dpbmcgPSBmYWxzZTtcclxuICBwdWJsaWMgdmFyczogb2JqZWN0ID0ge307XHJcblxyXG4gIGNvbnN0cnVjdG9yKHB1YmxpYyBlbDogRWxlbWVudFJlZiwgcHJpdmF0ZSBmZWVkYmFja1NlcnZpY2U6IEZlZWRiYWNrU2VydmljZSkge1xyXG4gICAgdGhpcy52YXJzID0gZmVlZGJhY2tTZXJ2aWNlLmluaXRpYWxWYXJpYWJsZXM7XHJcbiAgfVxyXG5cclxuICBwdWJsaWMgbmdBZnRlclZpZXdJbml0KCkge1xyXG4gICAgY29uc3QgZWxTdHlsZSA9IHRoaXMuZWwubmF0aXZlRWxlbWVudC5zdHlsZTtcclxuICAgIGVsU3R5bGUucG9zaXRpb24gPSAnYWJzb2x1dGUnO1xyXG4gICAgZWxTdHlsZS5sZWZ0ID0gJzQzJSc7XHJcbiAgICBlbFN0eWxlLnRvcCA9ICc2MCUnO1xyXG4gICAgdGhpcy5hZGREcmFnTGlzdGVuZXJPbk1vdmVCdG4oKTtcclxuICB9XHJcblxyXG4gIHB1YmxpYyBuZ09uQ2hhbmdlcygpIHtcclxuICAgIHRoaXMuaXNTd2l0Y2ggPSB0aGlzLmRyYXdDb2xvciAhPT0gdGhpcy5mZWVkYmFja1NlcnZpY2UuaGlnaGxpZ2h0ZWRDb2xvcjtcclxuICB9XHJcblxyXG4gIHB1YmxpYyBkb25lKCkge1xyXG4gICAgdGhpcy5tYW5pcHVsYXRlLmVtaXQoJ2RvbmUnKTtcclxuICB9XHJcblxyXG4gIHB1YmxpYyB0b2dnbGVIaWdobGlnaHQoKSB7XHJcbiAgICB0aGlzLmlzU3dpdGNoID0gZmFsc2U7XHJcbiAgICB0aGlzLm1hbmlwdWxhdGUuZW1pdCh0aGlzLmZlZWRiYWNrU2VydmljZS5oaWdobGlnaHRlZENvbG9yKTtcclxuICB9XHJcblxyXG4gIHB1YmxpYyB0b2dnbGVIaWRlKCkge1xyXG4gICAgdGhpcy5pc1N3aXRjaCA9IHRydWU7XHJcbiAgICB0aGlzLm1hbmlwdWxhdGUuZW1pdCh0aGlzLmZlZWRiYWNrU2VydmljZS5oaWRkZW5Db2xvcik7XHJcbiAgfVxyXG5cclxuICBwdWJsaWMgYWRkRHJhZ0xpc3RlbmVyT25Nb3ZlQnRuKCkge1xyXG4gICAgY29uc3QgbW91c2VVcCA9IG9ic2VydmFibGVGcm9tRXZlbnQodGhpcy50b2dnbGVNb3ZlQnRuLm5hdGl2ZUVsZW1lbnQsICdtb3VzZXVwJyk7XHJcbiAgICBjb25zdCBtb3VzZU1vdmUgPSBvYnNlcnZhYmxlRnJvbUV2ZW50KGRvY3VtZW50LmRvY3VtZW50RWxlbWVudCwgJ21vdXNlbW92ZScpO1xyXG4gICAgY29uc3QgbW91c2VEb3duID0gb2JzZXJ2YWJsZUZyb21FdmVudCh0aGlzLnRvZ2dsZU1vdmVCdG4ubmF0aXZlRWxlbWVudCwgJ21vdXNlZG93bicpO1xyXG4gICAgY29uc3QgbW91c2VEcmFnID0gbW91c2VEb3duLnBpcGUobWVyZ2VNYXAoKG1kOiBNb3VzZUV2ZW50KSA9PiB7XHJcbiAgICAgIHRoaXMuZmVlZGJhY2tTZXJ2aWNlLnNldElzRHJhZ2dpbmdUb29sYmFyKHRydWUpO1xyXG4gICAgICBjb25zdCBzdGFydFggPSBtZC5vZmZzZXRYO1xyXG4gICAgICBjb25zdCBzdGFydFkgPSBtZC5vZmZzZXRZO1xyXG4gICAgICB0aGlzLmRpc2FibGVUb29sYmFyVGlwcyA9IHRydWU7XHJcbiAgICAgIHRoaXMuaXNEcmFnZ2luZyA9IHRydWU7XHJcbiAgICAgIC8vIENhbGN1bGF0ZSBkaWYgd2l0aCBtb3VzZW1vdmUgdW50aWwgbW91c2V1cFxyXG4gICAgICByZXR1cm4gbW91c2VNb3ZlLnBpcGUoXHJcbiAgICAgICAgbWFwKChtbTogTW91c2VFdmVudCkgPT4ge1xyXG4gICAgICAgICAgbW0ucHJldmVudERlZmF1bHQoKTtcclxuICAgICAgICAgIHJldHVybiB7XHJcbiAgICAgICAgICAgIGxlZnQ6IG1tLmNsaWVudFggLSBzdGFydFgsXHJcbiAgICAgICAgICAgIHRvcDogbW0uY2xpZW50WSAtIHN0YXJ0WVxyXG4gICAgICAgICAgfTtcclxuICAgICAgICB9KSxcclxuICAgICAgICBmaW5hbGl6ZSgoKSA9PiB7XHJcbiAgICAgICAgICB0aGlzLmlzRHJhZ2dpbmcgPSBmYWxzZTtcclxuICAgICAgICAgIHRoaXMuZGlzYWJsZVRvb2xiYXJUaXBzID0gZmFsc2U7XHJcbiAgICAgICAgICB0aGlzLmZlZWRiYWNrU2VydmljZS5zZXRJc0RyYWdnaW5nVG9vbGJhcihmYWxzZSk7XHJcbiAgICAgICAgfSksXHJcbiAgICAgICAgdGFrZVVudGlsKG1vdXNlVXApKTtcclxuICAgIH0pKTtcclxuICAgIG1vdXNlRHJhZy5zdWJzY3JpYmUoXHJcbiAgICAgIChwb3MpID0+IHtcclxuICAgICAgICB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQuc3R5bGUubGVmdCA9IHBvcy5sZWZ0ICsgJ3B4JztcclxuICAgICAgICB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQuc3R5bGUudG9wID0gcG9zLnRvcCArICdweCc7XHJcbiAgICAgIH0pO1xyXG4gIH1cclxufVxyXG4iXX0=