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.
2 lines • 25 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("html2canvas"),require("rxjs"),require("rxjs/operators"),require("@angular/material"),require("@angular/cdk/overlay"),require("@angular/common"),require("@angular/forms")):"function"==typeof define&&define.amd?define("ng-feedback",["exports","@angular/core","html2canvas","rxjs","rxjs/operators","@angular/material","@angular/cdk/overlay","@angular/common","@angular/forms"],t):t(e["ng-feedback"]={},e.ng.core,e.html2canvas,e.rxjs,e.rxjs.operators,e.ng.material,e.ng.cdk.overlay,e.ng.common,e.ng.forms)}(this,function(e,n,o,a,s,t,i,r,l){"use strict";o=o&&o.hasOwnProperty("default")?o["default"]:o;var c=function v(){},h=function(){function e(){this.initialVariables={},this.highlightedColor="yellow",this.hiddenColor="black",this.screenshotCanvasSource=new a.Subject,this.screenshotCanvas$=this.screenshotCanvasSource.asObservable(),this.feedbackSource=new a.Subject,this.feedback$=this.feedbackSource.asObservable(),this.isDraggingToolbarSource=new a.Subject,this.isDraggingToolbar$=this.isDraggingToolbarSource.asObservable()}return e.prototype.initScreenshotCanvas=function(){var t=this,e=document.body;o(e,{logging:!1,width:document.documentElement.clientWidth,height:document.documentElement.clientHeight,x:document.documentElement.scrollLeft,y:document.documentElement.scrollTop,allowTaint:!0}).then(function(e){t.screenshotCanvasSource.next(e)})},e.prototype.setCanvas=function(e){this.screenshotCanvasSource.next(e)},e.prototype.setFeedback=function(e){this.feedbackSource.next(e)},e.prototype.setIsDraggingToolbar=function(e){this.isDraggingToolbarSource.next(e)},e.prototype.getImgEle=function(e){var t=e.toDataURL("image/png"),o=document.createElement("img");return o.setAttribute("src",t),Object.assign(o.style,{position:"absolute",top:"50%",right:"0",left:"0",margin:"0 auto",maxHeight:"100%",maxWidth:"100%",transform:"translateY(-50%)"}),o},e.prototype.hideBackDrop=function(){document.getElementsByClassName("dialogBackDrop")[0].style.backgroundColor="initial"},e.prototype.showBackDrop=function(){var e=document.getElementsByClassName("dialogBackDrop")[0];e.getAttribute("data-html2canvas-ignore")||e.setAttribute("data-html2canvas-ignore","true"),e.style.backgroundColor="rgba(0, 0, 0, .288)"},e.decorators=[{type:n.Injectable}],e}(),d=function m(){this.windowScrollY=window.scrollY,this.windowScrollX=window.scrollX},p=function(){function e(e,t,o,i){this.dialogRef=e,this.feedbackService=t,this.detector=o,this.el=i,this.showToolbar=!1,this.vars={},this.feedback=new c,this.includeScreenshot=!0,this.showSpinner=!0,this.showToolbarTips=!0,this.drawColor=this.feedbackService.highlightedColor,this.rectangles=[],this.scrollWidth=document.documentElement.scrollWidth,this.scrollHeight=document.documentElement.scrollHeight,this.elCouldBeHighlighted=["button","a","span","em","i","h1","h2","h3","h4","h5","h6","p","strong","small","sub","sup","b","time","img","video","input","label","select","textarea","article","summary","section"],this.isDrawingRect=!1,this.feedback=new c,this.feedback.description="",this.vars=this.feedbackService.initialVariables}return e.prototype.ngAfterViewInit=function(){var t=this;this.feedbackService.screenshotCanvas$.subscribe(function(e){t.showSpinner=!1,t.feedback.screenshot=e.toDataURL("image/png"),t.screenshotEle=t.feedbackService.getImgEle(e),t.appendScreenshot()}),this.feedbackService.isDraggingToolbar$.subscribe(function(e){e?t.destroyCanvasListeners():t.addCanvasListeners()}),this.dialogRef.afterClosed().subscribe(function(e){!0===e&&t.feedbackService.setFeedback(t.feedback)}),this.feedbackService.showBackDrop()},e.prototype.expandDrawingBoard=function(){this.showToolbar=!0,this.drawCanvas||(this.detector.detectChanges(),this.initBackgroundCanvas(),this.feedbackService.hideBackDrop()),this.addCanvasListeners(),this.el.nativeElement.appendChild(this.drawCanvas),this.feedbackService.hideBackDrop(),console.log("expand the board")},e.prototype.onEscapeKeyDownHandler=function(e){this.showToolbar=!1,this.includeScreenshot=!0,this.detector.detectChanges(),this.dialogRef.close("key down esc to close")},e.prototype.manipulate=function(e){"done"===e?(this.showToolbarTips=!1,this.showSpinner=!0,this.destroyCanvasListeners(),this.showToolbar=!1,this.detector.detectChanges(),this.feedbackService.initScreenshotCanvas()):this.startDraw(e)},e.prototype.startDraw=function(e){this.drawColor=e},e.prototype.isIncludeScreenshot=function(){this.includeScreenshot?(this.detector.detectChanges(),this.showSpinner=!1,this.appendScreenshot(),this.feedback.screenshot=this.screenshotEle.getAttribute("src")):(delete this.feedback.screenshot,this.showSpinner=!0)},e.prototype.appendScreenshot=function(){this.screenshotParent&&this.screenshotParent.nativeElement.appendChild(this.screenshotEle)},e.prototype.initBackgroundCanvas=function(){this.drawCanvas=document.getElementById("draw-canvas"),this.drawCanvas.style.height=this.scrollHeight+"",this.drawCanvas.style.width=this.scrollWidth+"",this.drawCanvas.height=this.scrollHeight,this.drawCanvas.width=this.scrollWidth,this.drawContainerRect()},e.prototype.drawContainerRect=function(){var e=this.drawCanvas.getContext("2d"),t=this.scrollWidth,o=this.scrollHeight;e.beginPath(),e.fillStyle="rgba(0,0,0,0.3)",e.clearRect(0,0,t,o),e.fillRect(0,0,t,o)},e.prototype.drawRectangle=function(e){var t=this,o=this.drawCanvas.getContext("2d");o.lineJoin="round",o.beginPath(),e.color===this.feedbackService.hiddenColor?(o.fillStyle="rgba(31, 31, 31, 0.75)",o.fillRect(e.startX,e.startY,e.width,e.height),o.rect(e.startX,e.startY,e.width,e.height)):(o.clearRect(e.startX,e.startY,e.width,e.height),o.lineWidth=5,o.strokeStyle=e.color,o.rect(e.startX,e.startY,e.width,e.height),o.stroke(),o.clearRect(e.startX,e.startY,e.width,e.height),this.rectangles.forEach(function(e){e.color===t.feedbackService.highlightedColor&&o.clearRect(e.startX,e.startY,e.width,e.height)}))},e.prototype.addCanvasListeners=function(){var e=a.fromEvent(document.documentElement,"mouseup"),t=a.fromEvent(document.documentElement,"mousemove"),o=a.fromEvent(document.documentElement,"mousedown"),i=a.fromEvent(window,"scroll");this.manuallyDrawRect(o,t,e),this.autoDrawRect(t),this.changeRectPosition(i)},e.prototype.changeRectPosition=function(e){var i=this;e.subscribe(function(e){var t=window.scrollX,o=window.scrollY;i.rectangles.forEach(function(e){e.startY=e.startY-(o-e.windowScrollY),e.startX=e.startX-(t-e.windowScrollX),e.windowScrollY=o,e.windowScrollX=t}),i.drawPersistCanvasRectangles()},function(e){return console.error(e)})},e.prototype.destroyCanvasListeners=function(){this.manuallyDrawRect$&&this.manuallyDrawRect$.unsubscribe(),this.autoDrawRect$&&this.autoDrawRect$.unsubscribe()},e.prototype.manuallyDrawRect=function(e,i,n){var r=this,t=e.pipe(s.mergeMap(function(t){r.showToolbarTips&&(r.showToolbarTips=!1),r.autoDrawRect$.unsubscribe(),r.isDrawingRect=!0;var o=new d;return o.startX=t.clientX,o.startY=t.clientY,o.color=r.drawColor,i.pipe(s.map(function(e){return o.width=e.clientX-t.clientX,o.height=e.clientY-t.clientY,o}),s.finalize(function(){if(o.width===undefined||o.height===undefined||0===o.width||0===o.height){var e=r.drawTempCanvasRectangle(t);e&&r.rectangles.push(e)}else o.height<0&&(o.startY=o.startY+o.height,o.height=Math.abs(o.height)),o.width<0&&(o.startX=o.startX+o.width,o.width=Math.abs(o.width)),r.rectangles.push(o);r.drawPersistCanvasRectangles(),r.autoDrawRect(i),r.isDrawingRect=!1}),s.takeUntil(n))}));this.manuallyDrawRect$=t.subscribe(function(e){r.drawPersistCanvasRectangles(),r.drawRectangle(e)})},e.prototype.autoDrawRect=function(e){var t=this;this.autoDrawRect$=e.subscribe({next:function(e){t.drawPersistCanvasRectangles(),t.drawTempCanvasRectangle(e)},error:function(e){return console.error("something wrong occurred: "+e)}})},e.prototype.drawPersistCanvasRectangles=function(){var t=this;this.drawContainerRect(),this.rectangles.forEach(function(e){t.drawRectangle(e)})},e.prototype.drawTempCanvasRectangle=function(e){var t=null,o=e.clientX,i=e.clientY,n=document.elementsFromPoint(o,i),r=n[2];if(!this.isExcludeRect(n)&&r&&-1<this.elCouldBeHighlighted.indexOf(r.nodeName.toLowerCase())){t=new d;var a=r.getBoundingClientRect();this.drawCanvas.style.cursor="pointer",Object.assign(t,{startX:a.left,startY:a.top,width:a.width,height:a.height,color:this.drawColor}),this.drawRectangle(t)}else this.drawCanvas.style.cursor="crosshair";return t},e.prototype.closeRect=function(e){this.rectangles.splice(e,1),this.drawPersistCanvasRectangles()},e.prototype.isExcludeRect=function(e){return e.some(function(e){return"true"===e.getAttribute("exclude-rect")})},e.decorators=[{type:n.Component,args:[{selector:"feedback-dialog",template:'<div class="dialog" *ngIf="!showToolbar" data-html2canvas-ignore="true">\r\n <div class="dialog-title">\r\n <div class="title-font">\r\n {{vars[\'title\']}}\r\n </div>\r\n </div>\r\n <div class="dialog-content">\r\n <div class="description-tips">\r\n <div *ngIf="feedback.description==\'\'">{{vars[\'placeholder\']}}</div>\r\n </div>\r\n <textarea\r\n autofocus\r\n class="description"\r\n [(ngModel)]="feedback.description"\r\n ></textarea>\r\n </div>\r\n <div class="screenshot-checkbox">\r\n <mat-checkbox [(ngModel)]="includeScreenshot" (change)="isIncludeScreenshot()">{{vars[\'checkboxLabel\']}}</mat-checkbox>\r\n </div>\r\n\r\n <div #screenshotParent class="screenshot-content" (click)="expandDrawingBoard()" *ngIf="includeScreenshot">\r\n <mat-spinner class="loading" [diameter]="30" ></mat-spinner>\r\n <div></div>\r\n <div class="screenshot-tips" *ngIf="!showSpinner">\r\n <svg focusable="false" aria-label="" viewBox="0 0 24 24">\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 class="screenshot-tips-content">{{vars[\'editTip\']}}</span>\r\n </div>\r\n </div>\r\n\r\n <mat-dialog-actions class="dialog-actions" align="end">\r\n <button mat-button (click)="dialogRef.close()" class="action-button">{{vars[\'cancelLabel\']}}</button>\r\n <button mat-button (click)="dialogRef.close(true)" class="submit-button action-button">{{vars[\'sendLabel\']}}</button>\r\n </mat-dialog-actions>\r\n</div>\r\n<div *ngIf="showToolbar" data-html2canvas-ignore="true">\r\n <div class="toolbar-tips" *ngIf="showToolbarTips">\r\n {{vars[\'drawRectTip\']}}\r\n </div>\r\n\r\n <feedback-toolbar [drawColor]="drawColor" (manipulate)="manipulate($event)"></feedback-toolbar>\r\n</div>\r\n<div *ngFor="let rectangle of rectangles; index as index" >\r\n <feedback-rectangle [rectangle]="rectangle" [noHover]="!showToolbar || isDrawingRect" (close)="closeRect(index)">\r\n </feedback-rectangle>\r\n</div>\r\n<canvas id="draw-canvas" class="drawCanvas" [ngClass]="{\'pointerCursor\': !showToolbar}"></canvas>\r\n',styles:[".dialog{z-index:1000;position:relative;width:360px;background-color:#fff}.dialog-title{background-color:#607d8b;color:#fff;height:56px}.title-font{color:#fff;float:left;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-size:20px;line-height:56px;font-family:Roboto,RobotoDraft,Helvetica,Arial,sans-serif;padding:0 16px;margin:0}.dialog-content{display:-webkit-flex;flex-grow:1;height:200px;position:relative}.description{border:none;box-sizing:border-box;box-shadow:none;color:#212121;flex-grow:1;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:16px;line-height:normal;font-family:Roboto,RobotoDraft,Helvetica,Arial,sans-serif;max-width:100%;outline:0;padding:18px 16px 0;resize:none;width:100%;height:inherit}.description-tips{color:#bdbdbd;display:block;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:16px;line-height:normal;font-family:Roboto,RobotoDraft,Helvetica,Arial,sans-serif;left:0;position:absolute;padding:18px 16px 0;right:0}.screenshot-checkbox{padding:0 16px;background-color:#f8f8f8;height:40px;display:flex;flex-direction:column;justify-content:center}.screenshot-content{border:none;cursor:pointer;text-align:center;display:block;position:relative;padding:0;overflow:hidden;height:192px;width:100%;background:#ededed}.screenshot-tips{align-items:center;background-color:rgba(248,248,248,.6);border-radius:4px;box-sizing:border-box;display:-webkit-flex;flex-direction:column;justify-content:center;min-height:112px;width:224px;z-index:5;position:absolute;top:50%;right:0;bottom:0;left:0;-webkit-transform:translateY(-50%);transform:translateY(-50%);margin:0 auto}.screenshot-content:hover .screenshot-tips{background-color:rgba(248,248,248,.8)}.screenshot-content:hover .screenshot-tips-content{color:#4285f4}.screenshot-content:hover svg{color:#4285f4;fill:currentColor}.screenshot-tips svg{color:#757575;fill:currentColor;height:48px;width:48px}.screenshot-tips-content{color:#757575;font-weight:400;font-size:14px;line-height:20px;font-family:Roboto,RobotoDraft,Helvetica,Arial,sans-serif;margin-top:12px}.dialog-actions{border-top:1px solid #e0e0e0}.submit-button{margin-right:8px!important;margin-left:5px!important;color:#4285f4}.action-button{font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:14px;height:35px;line-height:normal;margin:10px 0;padding:0 8px;position:relative;min-width:75px}.loading{margin:0 auto;position:absolute;top:45%;bottom:0;left:0;right:0}.mat-dialog-actions{padding:0!important}::ng-deep .feedbackDialog .mat-dialog-container{padding:0;overflow:visible;background-color:rgba(255,255,255,0);box-shadow:initial}.toolbar-tips{background-color:rgba(255,255,255,.6);border-radius:12px;color:#757575;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:34px;line-height:40px;font-family:Roboto,RobotoDraft,Helvetica,Arial,sans-serif;margin-bottom:72px;padding:22px 0;text-align:center;visibility:visible;width:656px;height:auto;-webkit-animation:0s ease-in 5s forwards cssAnimation;animation:0s ease-in 5s forwards cssAnimation}@keyframes cssAnimation{to{width:0;height:0;overflow:hidden}}@-webkit-keyframes cssAnimation{to{width:0;height:0;visibility:hidden}}.drawCanvas{position:absolute;top:0;left:0;z-index:-1;margin:0 auto;cursor:crosshair}.pointerCursor{cursor:default!important}"]}]}],e.ctorParameters=function(){return[{type:t.MatDialogRef},{type:h},{type:n.ChangeDetectorRef},{type:n.ElementRef}]},e.propDecorators={screenshotParent:[{type:n.ViewChild,args:["screenshotParent"]}],onEscapeKeyDownHandler:[{type:n.HostListener,args:["document:keydown.escape",["$event"]]}]},e}(),g=function(){function e(e,t){this.el=e,this.feedbackService=t,this.manipulate=new n.EventEmitter,this.disableToolbarTips=!1,this.isSwitch=!1,this.isDragging=!1,this.vars={},this.vars=t.initialVariables}return e.prototype.ngAfterViewInit=function(){var e=this.el.nativeElement.style;e.position="absolute",e.left="43%",e.top="60%",this.addDragListenerOnMoveBtn()},e.prototype.ngOnChanges=function(){this.isSwitch=this.drawColor!==this.feedbackService.highlightedColor},e.prototype.done=function(){this.manipulate.emit("done")},e.prototype.toggleHighlight=function(){this.isSwitch=!1,this.manipulate.emit(this.feedbackService.highlightedColor)},e.prototype.toggleHide=function(){this.isSwitch=!0,this.manipulate.emit(this.feedbackService.hiddenColor)},e.prototype.addDragListenerOnMoveBtn=function(){var i=this,n=a.fromEvent(this.toggleMoveBtn.nativeElement,"mouseup"),r=a.fromEvent(document.documentElement,"mousemove");a.fromEvent(this.toggleMoveBtn.nativeElement,"mousedown").pipe(s.mergeMap(function(e){i.feedbackService.setIsDraggingToolbar(!0);var t=e.offsetX,o=e.offsetY;return i.disableToolbarTips=!0,i.isDragging=!0,r.pipe(s.map(function(e){return e.preventDefault(),{left:e.clientX-t,top:e.clientY-o}}),s.finalize(function(){i.isDragging=!1,i.disableToolbarTips=!1,i.feedbackService.setIsDraggingToolbar(!1)}),s.takeUntil(n))})).subscribe(function(e){i.el.nativeElement.style.left=e.left+"px",i.el.nativeElement.style.top=e.top+"px"})},e.decorators=[{type:n.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}"]}]}],e.ctorParameters=function(){return[{type:n.ElementRef},{type:h}]},e.propDecorators={drawColor:[{type:n.Input}],manipulate:[{type:n.Output}],toggleMoveBtn:[{type:n.ViewChild,args:["toggleMove"]}]},e}(),u=function(){function e(e){this.feedbackService=e,this.close=new n.EventEmitter,this.showCloseTag=!1}return e.prototype.onMouseEnter=function(){this.showCloseTag=!1===this.noHover},e.prototype.onMouseLeave=function(){this.showCloseTag=!1},e.prototype.onClose=function(){this.close.emit()},e.decorators=[{type:n.Component,args:[{selector:"feedback-rectangle",template:'<div exclude-rect="true" class="rect" [ngStyle]="{\'left.px\': rectangle.startX,\r\n \'top.px\': rectangle.startY,\r\n \'width.px\': rectangle.width ,\r\n \'height.px\': rectangle.height }"\r\n [ngClass]="{\'highlight\': rectangle.color === feedbackService.highlightedColor,\r\n \'hide\': rectangle.color !== feedbackService.highlightedColor,\r\n \'noHover\': noHover}">\r\n <span exclude-rect="true" class="close" *ngIf="showCloseTag" (click)="onClose()">\r\n <svg viewBox="0 0 1024 1024"\r\n width="16" height="16">\r\n <path\r\n d="M896 224l-96-96-288 288-288-288-96 96 288 288-288 288 96 96 288-288 288 288 96-96-288-288 288-288z"></path>\r\n </svg>\r\n </span>\r\n</div>\r\n',styles:[".rect{position:fixed;background:0 0;z-index:3}.highlight:not(.noHover):hover{cursor:default;background:rgba(55,131,249,.2)}.hide{background-color:#000}.hide:not(.noHover):hover{background-color:rgba(31,31,31,.75)}.rect .close{width:24px;height:24px;background:#fff;border-radius:50%;justify-content:center;align-items:center;color:#999;position:absolute;right:-12px;top:-12px;cursor:pointer;display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}"]}]}],e.ctorParameters=function(){return[{type:h}]},e.propDecorators={rectangle:[{type:n.Input}],noHover:[{type:n.Input}],close:[{type:n.Output}],onMouseEnter:[{type:n.HostListener,args:["mouseenter"]}],onMouseLeave:[{type:n.HostListener,args:["mouseleave"]}]},e}(),f=function(){function e(e,t,o){var i=this;this.dialogRef=e,this.feedbackService=t,this.title="Send feedback",this.placeholder="Describe your issue or share your ideas",this.editTip="Click to highlight or hide info",this.checkboxLabel="Include screenshot",this.cancelLabel="CANCEL",this.sendLabel="SEND",this.moveToolbarTip="move toolbar",this.drawRectTip="Draw using yellow to highlight issues or black to hide sensitive info",this.highlightTip="highlight issues",this.hideTip="hide sensitive info",this.editDoneLabel="DONE",this.send=new n.EventEmitter,this.feedbackService.feedback$.subscribe(function(e){i.send.emit(e)}),this.overlay=o}return e.prototype.onClick=function(){this.openFeedbackDialog()},e.prototype.openFeedbackDialog=function(){this.feedbackService.initScreenshotCanvas();this.dialogRef.open(p,{panelClass:"feedbackDialog",backdropClass:"dialogBackDrop",disableClose:!0,height:"auto",width:"auto",scrollStrategy:this.overlay.scrollStrategies.reposition()})},e.prototype.ngOnInit=function(){this.feedbackService.initialVariables={title:this.title,placeholder:this.placeholder,editTip:this.editTip,checkboxLabel:this.checkboxLabel,cancelLabel:this.cancelLabel,sendLabel:this.sendLabel,moveToolbarTip:this.moveToolbarTip,drawRectTip:this.drawRectTip,highlightTip:this.highlightTip,hideTip:this.hideTip,editDoneLabel:this.editDoneLabel}},e.decorators=[{type:n.Directive,args:[{selector:"[feedback]"}]}],e.ctorParameters=function(){return[{type:t.MatDialog},{type:h},{type:i.Overlay}]},e.propDecorators={title:[{type:n.Input}],placeholder:[{type:n.Input}],editTip:[{type:n.Input}],checkboxLabel:[{type:n.Input}],cancelLabel:[{type:n.Input}],sendLabel:[{type:n.Input}],moveToolbarTip:[{type:n.Input}],drawRectTip:[{type:n.Input}],highlightTip:[{type:n.Input}],hideTip:[{type:n.Input}],editDoneLabel:[{type:n.Input}],send:[{type:n.Output}],onClick:[{type:n.HostListener,args:["click"]}]},e}(),b=function(){function e(){}return e.decorators=[{type:n.NgModule,args:[{declarations:[p,g,u,f],imports:[t.MatDialogModule,t.MatButtonModule,t.MatIconModule,t.MatInputModule,t.MatTooltipModule,r.CommonModule,l.FormsModule,t.MatCheckboxModule,t.MatProgressSpinnerModule],exports:[f],entryComponents:[p],providers:[h]}]}],e}();e.FeedbackModule=b,e.ɵa=p,e.ɵd=u,e.ɵc=g,e.ɵe=f,e.ɵb=h,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=ng-feedback.umd.min.js.map