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.
67 lines (66 loc) • 5.69 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
import { Component, EventEmitter, HostListener, Input, Output } from '@angular/core';
import { Rectangle } from '../entity/rectangle';
import { FeedbackService } from '../feedback.service';
export class FeedbackRectangleComponent {
/**
* @param {?} feedbackService
*/
constructor(feedbackService) {
this.feedbackService = feedbackService;
this.close = new EventEmitter();
this.showCloseTag = false;
}
/**
* @return {?}
*/
onMouseEnter() {
this.showCloseTag = this.noHover === false;
}
/**
* @return {?}
*/
onMouseLeave() {
this.showCloseTag = false;
}
/**
* @return {?}
*/
onClose() {
this.close.emit();
}
}
FeedbackRectangleComponent.decorators = [
{ type: 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}"]
}] }
];
/** @nocollapse */
FeedbackRectangleComponent.ctorParameters = () => [
{ type: FeedbackService }
];
FeedbackRectangleComponent.propDecorators = {
rectangle: [{ type: Input }],
noHover: [{ type: Input }],
close: [{ type: Output }],
onMouseEnter: [{ type: HostListener, args: ['mouseenter',] }],
onMouseLeave: [{ type: HostListener, args: ['mouseleave',] }]
};
if (false) {
/** @type {?} */
FeedbackRectangleComponent.prototype.rectangle;
/** @type {?} */
FeedbackRectangleComponent.prototype.noHover;
/** @type {?} */
FeedbackRectangleComponent.prototype.close;
/** @type {?} */
FeedbackRectangleComponent.prototype.showCloseTag;
/** @type {?} */
FeedbackRectangleComponent.prototype.feedbackService;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmVlZGJhY2stcmVjdGFuZ2xlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25nLWZlZWRiYWNrLyIsInNvdXJjZXMiOlsibGliL2ZlZWRiYWNrLXJlY3RhbmdsZS9mZWVkYmFjay1yZWN0YW5nbGUuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFFLFlBQVksRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUNuRixPQUFPLEVBQUMsU0FBUyxFQUFDLE1BQU0scUJBQXFCLENBQUM7QUFDOUMsT0FBTyxFQUFDLGVBQWUsRUFBQyxNQUFNLHFCQUFxQixDQUFDO0FBUXBELE1BQU07Ozs7SUFTSixZQUFtQixlQUFnQztRQUFoQyxvQkFBZSxHQUFmLGVBQWUsQ0FBaUI7cUJBSHBDLElBQUksWUFBWSxFQUFXOzRCQUNYLEtBQUs7S0FHbkM7Ozs7SUFHTSxZQUFZO1FBQ2pCLElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDLE9BQU8sS0FBSyxLQUFLLENBQUM7S0FDNUM7Ozs7SUFHTSxZQUFZO1FBQ2pCLElBQUksQ0FBQyxZQUFZLEdBQUcsS0FBSyxDQUFDO0tBQzNCOzs7O0lBRU0sT0FBTztRQUNaLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxFQUFFLENBQUM7Ozs7WUE3QnJCLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsb0JBQW9CO2dCQUM5QixxMUJBQWtEOzthQUVuRDs7OztZQU5PLGVBQWU7Ozt3QkFTcEIsS0FBSztzQkFFTCxLQUFLO29CQUVMLE1BQU07MkJBT04sWUFBWSxTQUFDLFlBQVk7MkJBS3pCLFlBQVksU0FBQyxZQUFZIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSG9zdExpc3RlbmVyLCBJbnB1dCwgT3V0cHV0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHtSZWN0YW5nbGV9IGZyb20gJy4uL2VudGl0eS9yZWN0YW5nbGUnO1xyXG5pbXBvcnQge0ZlZWRiYWNrU2VydmljZX0gZnJvbSAnLi4vZmVlZGJhY2suc2VydmljZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2ZlZWRiYWNrLXJlY3RhbmdsZScsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2ZlZWRiYWNrLXJlY3RhbmdsZS5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vZmVlZGJhY2stcmVjdGFuZ2xlLmNvbXBvbmVudC5jc3MnXVxyXG59KVxyXG5cclxuZXhwb3J0IGNsYXNzIEZlZWRiYWNrUmVjdGFuZ2xlQ29tcG9uZW50IHtcclxuICBASW5wdXQoKVxyXG4gIHB1YmxpYyByZWN0YW5nbGU6IFJlY3RhbmdsZTtcclxuICBASW5wdXQoKVxyXG4gIHB1YmxpYyBub0hvdmVyOiBib29sZWFuO1xyXG4gIEBPdXRwdXQoKVxyXG4gIHB1YmxpYyBjbG9zZSA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcclxuICBwdWJsaWMgc2hvd0Nsb3NlVGFnOiBib29sZWFuID0gZmFsc2U7XHJcblxyXG4gIGNvbnN0cnVjdG9yKHB1YmxpYyBmZWVkYmFja1NlcnZpY2U6IEZlZWRiYWNrU2VydmljZSkge1xyXG4gIH1cclxuXHJcbiAgQEhvc3RMaXN0ZW5lcignbW91c2VlbnRlcicpXHJcbiAgcHVibGljIG9uTW91c2VFbnRlcigpOiB2b2lkIHtcclxuICAgIHRoaXMuc2hvd0Nsb3NlVGFnID0gdGhpcy5ub0hvdmVyID09PSBmYWxzZTtcclxuICB9XHJcblxyXG4gIEBIb3N0TGlzdGVuZXIoJ21vdXNlbGVhdmUnKVxyXG4gIHB1YmxpYyBvbk1vdXNlTGVhdmUoKTogdm9pZCB7XHJcbiAgICB0aGlzLnNob3dDbG9zZVRhZyA9IGZhbHNlO1xyXG4gIH1cclxuXHJcbiAgcHVibGljIG9uQ2xvc2UoKTogdm9pZCB7XHJcbiAgICB0aGlzLmNsb3NlLmVtaXQoKTtcclxuICB9XHJcblxyXG5cclxufVxyXG4iXX0=