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.
75 lines (74 loc) • 6.17 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';
var FeedbackRectangleComponent = /** @class */ (function () {
function FeedbackRectangleComponent(feedbackService) {
this.feedbackService = feedbackService;
this.close = new EventEmitter();
this.showCloseTag = false;
}
/**
* @return {?}
*/
FeedbackRectangleComponent.prototype.onMouseEnter = /**
* @return {?}
*/
function () {
this.showCloseTag = this.noHover === false;
};
/**
* @return {?}
*/
FeedbackRectangleComponent.prototype.onMouseLeave = /**
* @return {?}
*/
function () {
this.showCloseTag = false;
};
/**
* @return {?}
*/
FeedbackRectangleComponent.prototype.onClose = /**
* @return {?}
*/
function () {
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 = function () { return [
{ type: FeedbackService }
]; };
FeedbackRectangleComponent.propDecorators = {
rectangle: [{ type: Input }],
noHover: [{ type: Input }],
close: [{ type: Output }],
onMouseEnter: [{ type: HostListener, args: ['mouseenter',] }],
onMouseLeave: [{ type: HostListener, args: ['mouseleave',] }]
};
return FeedbackRectangleComponent;
}());
export { FeedbackRectangleComponent };
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmVlZGJhY2stcmVjdGFuZ2xlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25nLWZlZWRiYWNrLyIsInNvdXJjZXMiOlsibGliL2ZlZWRiYWNrLXJlY3RhbmdsZS9mZWVkYmFjay1yZWN0YW5nbGUuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFFLFlBQVksRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUNuRixPQUFPLEVBQUMsU0FBUyxFQUFDLE1BQU0scUJBQXFCLENBQUM7QUFDOUMsT0FBTyxFQUFDLGVBQWUsRUFBQyxNQUFNLHFCQUFxQixDQUFDOztJQWlCbEQsb0NBQW1CLGVBQWdDO1FBQWhDLG9CQUFlLEdBQWYsZUFBZSxDQUFpQjtxQkFIcEMsSUFBSSxZQUFZLEVBQVc7NEJBQ1gsS0FBSztLQUduQzs7OztJQUdNLGlEQUFZOzs7SUFEbkI7UUFFRSxJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQyxPQUFPLEtBQUssS0FBSyxDQUFDO0tBQzVDOzs7O0lBR00saURBQVk7OztJQURuQjtRQUVFLElBQUksQ0FBQyxZQUFZLEdBQUcsS0FBSyxDQUFDO0tBQzNCOzs7O0lBRU0sNENBQU87Ozs7UUFDWixJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksRUFBRSxDQUFDOzs7Z0JBN0JyQixTQUFTLFNBQUM7b0JBQ1QsUUFBUSxFQUFFLG9CQUFvQjtvQkFDOUIscTFCQUFrRDs7aUJBRW5EOzs7O2dCQU5PLGVBQWU7Ozs0QkFTcEIsS0FBSzswQkFFTCxLQUFLO3dCQUVMLE1BQU07K0JBT04sWUFBWSxTQUFDLFlBQVk7K0JBS3pCLFlBQVksU0FBQyxZQUFZOztxQ0EzQjVCOztTQVVhLDBCQUEwQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIEhvc3RMaXN0ZW5lciwgSW5wdXQsIE91dHB1dH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7UmVjdGFuZ2xlfSBmcm9tICcuLi9lbnRpdHkvcmVjdGFuZ2xlJztcclxuaW1wb3J0IHtGZWVkYmFja1NlcnZpY2V9IGZyb20gJy4uL2ZlZWRiYWNrLnNlcnZpY2UnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdmZWVkYmFjay1yZWN0YW5nbGUnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9mZWVkYmFjay1yZWN0YW5nbGUuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL2ZlZWRiYWNrLXJlY3RhbmdsZS5jb21wb25lbnQuY3NzJ11cclxufSlcclxuXHJcbmV4cG9ydCBjbGFzcyBGZWVkYmFja1JlY3RhbmdsZUNvbXBvbmVudCB7XHJcbiAgQElucHV0KClcclxuICBwdWJsaWMgcmVjdGFuZ2xlOiBSZWN0YW5nbGU7XHJcbiAgQElucHV0KClcclxuICBwdWJsaWMgbm9Ib3ZlcjogYm9vbGVhbjtcclxuICBAT3V0cHV0KClcclxuICBwdWJsaWMgY2xvc2UgPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XHJcbiAgcHVibGljIHNob3dDbG9zZVRhZzogYm9vbGVhbiA9IGZhbHNlO1xyXG5cclxuICBjb25zdHJ1Y3RvcihwdWJsaWMgZmVlZGJhY2tTZXJ2aWNlOiBGZWVkYmFja1NlcnZpY2UpIHtcclxuICB9XHJcblxyXG4gIEBIb3N0TGlzdGVuZXIoJ21vdXNlZW50ZXInKVxyXG4gIHB1YmxpYyBvbk1vdXNlRW50ZXIoKTogdm9pZCB7XHJcbiAgICB0aGlzLnNob3dDbG9zZVRhZyA9IHRoaXMubm9Ib3ZlciA9PT0gZmFsc2U7XHJcbiAgfVxyXG5cclxuICBASG9zdExpc3RlbmVyKCdtb3VzZWxlYXZlJylcclxuICBwdWJsaWMgb25Nb3VzZUxlYXZlKCk6IHZvaWQge1xyXG4gICAgdGhpcy5zaG93Q2xvc2VUYWcgPSBmYWxzZTtcclxuICB9XHJcblxyXG4gIHB1YmxpYyBvbkNsb3NlKCk6IHZvaWQge1xyXG4gICAgdGhpcy5jbG9zZS5lbWl0KCk7XHJcbiAgfVxyXG5cclxuXHJcbn1cclxuIl19