ngx-feedback
Version:
Angular Feedback Library
130 lines • 19 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, ViewChild, ElementRef } from '@angular/core';
import { EventsService } from '../../services/events.service';
var ModalComponent = /** @class */ (function () {
function ModalComponent(eventsService) {
this.eventsService = eventsService;
this.imgSrc = '';
this.formData = (/** @type {?} */ ({ rate: 0, comment: '', screenshot: null }));
}
/**
* @return {?}
*/
ModalComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () { };
/**
* @return {?}
*/
ModalComponent.prototype.onSpecific = /**
* @return {?}
*/
function () {
this.eventsService.onSpecificFeedbackClick();
};
/**
* @return {?}
*/
ModalComponent.prototype.onGeneric = /**
* @return {?}
*/
function () {
this.eventsService.onGenericFeedbackClik();
};
/**
* @return {?}
*/
ModalComponent.prototype.onCloseClicked = /**
* @return {?}
*/
function () {
this.eventsService.onCloseClicked();
};
/**
* @param {?} preview
* @return {?}
*/
ModalComponent.prototype.setPreview = /**
* @param {?} preview
* @return {?}
*/
function (preview) {
this.imgSrc = preview;
this.formData.screenshot = preview;
};
/**
* @param {?} rate
* @return {?}
*/
ModalComponent.prototype.onVote = /**
* @param {?} rate
* @return {?}
*/
function (rate) {
this.voted = true;
this.formData.rate = rate;
};
/**
* @return {?}
*/
ModalComponent.prototype.onSend = /**
* @return {?}
*/
function () {
var _this = this;
this.formData.comment = this.comment.nativeElement.value;
this.eventsService.onSendClicked(this.formData);
this.thanks = true;
setTimeout((/**
* @return {?}
*/
function () {
_this.eventsService.onCloseClicked();
}), 2000);
};
ModalComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-feedback-modal',
template: "<div class=\"ngx-feedback-modal__container\">\r\n <div class=\"ngx-feedback-modal__header\">\r\n <div class=\"ngx-feedback-modal__title\">Feedback</div>\r\n <div class=\"ngx-feedback-modal__close\" (click)=\"onCloseClicked()\">\r\n <svg viewBox=\"0 0 25 25\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <line x1=\"1\" y1=\"24\" x2=\"24\" y2=\"1\" stroke=\"#3b5560\" stroke-width=\"3\" />\r\n <line x1=\"1\" y1=\"1\" x2=\"24\" y2=\"24\" stroke=\"#3b5560\" stroke-width=\"3\" />\r\n </svg>\r\n </div>\r\n </div>\r\n <div class=\"ngx-feedback-modal__content\">\r\n <div *ngIf=\"thanks\">\r\n Thanks for your feedback!\r\n </div>\r\n <div *ngIf=\"!imgSrc && !thanks\" class=\"ngx-feedback-modal__boxes\">\r\n <div\r\n class=\"ngx-feedback-modal__box-container\"\r\n [class.ngx-feedback-modal__box-container--border]=\"!enterGeneric\"\r\n (mouseenter)=\"enterGeneric = true\"\r\n (mouseleave)=\"enterGeneric = false\"\r\n >\r\n <div class=\"ngx-feedback-modal__box\" [class.ngx-feedback-modal__box--border]=\"enterGeneric\" (click)=\"onGeneric()\">\r\n <div>Generic</div>\r\n <div class=\"ngx-feedback-modal__icon\">\r\n <svg\r\n version=\"1.1\"\r\n id=\"Capa_1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n x=\"0px\"\r\n y=\"0px\"\r\n viewBox=\"0 0 60 60\"\r\n style=\"enable-background:new 0 0 60 60;\"\r\n xml:space=\"preserve\"\r\n >\r\n <g>\r\n <path\r\n d=\"M7,3C4.794,3,3,4.794,3,7s1.794,4,4,4s4-1.794,4-4S9.206,3,7,3z M7,9C5.897,9,5,8.103,5,7s0.897-2,2-2s2,0.897,2,2\r\n S8.103,9,7,9z\"\r\n />\r\n <path\r\n d=\"M16,3c-2.206,0-4,1.794-4,4s1.794,4,4,4s4-1.794,4-4S18.206,3,16,3z M16,9c-1.103,0-2-0.897-2-2s0.897-2,2-2s2,0.897,2,2\r\n S17.103,9,16,9z\"\r\n />\r\n <path\r\n d=\"M25,3c-2.206,0-4,1.794-4,4s1.794,4,4,4s4-1.794,4-4S27.206,3,25,3z M25,9c-1.103,0-2-0.897-2-2s0.897-2,2-2s2,0.897,2,2\r\n S26.103,9,25,9z\"\r\n />\r\n <path d=\"M0,0v14v46h60V14V0H0z M2,2h56v10H2V2z M58,58H2V14h56V58z\" />\r\n <path\r\n d=\"M55,55V17H5v38H55z M7,53v-2.048l15.974-14.064L33.275,47.19c0.391,0.391,1.023,0.391,1.414,0s0.391-1.023,0-1.414\r\n l-4.807-4.807l9.162-10.035L53,44.424V53H7z M53,19v22.642L39.695,28.781c-0.195-0.188-0.456-0.293-0.727-0.281\r\n c-0.27,0.008-0.525,0.126-0.707,0.325l-9.795,10.727l-4.743-4.743c-0.372-0.373-0.972-0.392-1.368-0.043L7,48.287V19H53z\"\r\n />\r\n <path\r\n d=\"M16.431,33.638c3.071,0,5.569-2.498,5.569-5.569S19.502,22.5,16.431,22.5c-3.07,0-5.568,2.498-5.568,5.569\r\n S13.36,33.638,16.431,33.638z M16.431,24.5c1.968,0,3.569,1.601,3.569,3.569s-1.602,3.569-3.569,3.569s-3.568-1.601-3.568-3.569\r\n S14.463,24.5,16.431,24.5z\"\r\n />\r\n </g>\r\n <g></g>\r\n <g></g>\r\n <g></g>\r\n <g></g>\r\n <g></g>\r\n <g></g>\r\n <g></g>\r\n <g></g>\r\n <g></g>\r\n <g></g>\r\n <g></g>\r\n <g></g>\r\n <g></g>\r\n <g></g>\r\n <g></g>\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n class=\"ngx-feedback-modal__box-container\"\r\n [class.ngx-feedback-modal__box-container--border]=\"!enterSpecific\"\r\n (mouseenter)=\"enterSpecific = true\"\r\n (mouseleave)=\"enterSpecific = false\"\r\n >\r\n <div class=\"ngx-feedback-modal__box\" [class.ngx-feedback-modal__box--border]=\"enterSpecific\" (click)=\"onSpecific()\">\r\n <div>Specific</div>\r\n <div class=\"ngx-feedback-modal__icon\">\r\n <svg\r\n version=\"1.1\"\r\n id=\"Capa_1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n x=\"0px\"\r\n y=\"0px\"\r\n viewBox=\"0 0 60 60\"\r\n style=\"enable-background:new 0 0 60 60;\"\r\n xml:space=\"preserve\"\r\n >\r\n <g>\r\n <path\r\n d=\"M7,3C4.794,3,3,4.794,3,7s1.794,4,4,4s4-1.794,4-4S9.206,3,7,3z M7,9C5.897,9,5,8.103,5,7s0.897-2,2-2s2,0.897,2,2\r\n S8.103,9,7,9z\"\r\n />\r\n <path\r\n d=\"M16,3c-2.206,0-4,1.794-4,4s1.794,4,4,4s4-1.794,4-4S18.206,3,16,3z M16,9c-1.103,0-2-0.897-2-2s0.897-2,2-2s2,0.897,2,2\r\n S17.103,9,16,9z\"\r\n />\r\n <path\r\n d=\"M25,3c-2.206,0-4,1.794-4,4s1.794,4,4,4s4-1.794,4-4S27.206,3,25,3z M25,9c-1.103,0-2-0.897-2-2s0.897-2,2-2s2,0.897,2,2\r\n S26.103,9,25,9z\"\r\n />\r\n <path d=\"M0,0v14v46h60V14V0H0z M2,2h56v10H2V2z M58,58H2V14h56V58z\" />\r\n <path d=\"M28,18H6v16h22V18z M26,32H8V20h18V32z\" />\r\n <path\r\n d=\"M28,54V38H6v16H28z M13,40c0,0.552,0.448,1,1,1s1-0.448,1-1h4c0,0.552,0.448,1,1,1s1-0.448,1-1h4c0,0.552,0.448,1,1,1v4\r\n c-0.552,0-1,0.448-1,1c0,0.552,0.448,1,1,1v4c-0.552,0-1,0.448-1,1h-4c0-0.552-0.448-1-1-1s-1,0.448-1,1h-4c0-0.552-0.448-1-1-1\r\n s-1,0.448-1,1H9c0-0.552-0.448-1-1-1v-4c0.552,0,1-0.448,1-1c0-0.552-0.448-1-1-1v-4c0.552,0,1-0.448,1-1H13z\"\r\n />\r\n <path d=\"M54,18H32v16h22V18z M52,32H34V20h18V32z\" />\r\n <path d=\"M54,38H32v16h22V38z M52,52H34V40h18V52z\" />\r\n <circle cx=\"23\" cy=\"43\" r=\"1\" />\r\n <circle cx=\"20\" cy=\"46\" r=\"1\" />\r\n <circle cx=\"23\" cy=\"49\" r=\"1\" />\r\n <circle cx=\"17\" cy=\"43\" r=\"1\" />\r\n <circle cx=\"14\" cy=\"46\" r=\"1\" />\r\n <circle cx=\"17\" cy=\"49\" r=\"1\" />\r\n <circle cx=\"11\" cy=\"43\" r=\"1\" />\r\n <circle cx=\"11\" cy=\"49\" r=\"1\" />\r\n </g>\r\n <g></g>\r\n <g></g>\r\n <g></g>\r\n <g></g>\r\n <g></g>\r\n <g></g>\r\n <g></g>\r\n <g></g>\r\n <g></g>\r\n <g></g>\r\n <g></g>\r\n <g></g>\r\n <g></g>\r\n <g></g>\r\n <g></g>\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"ngx-feedback-modal__preview-container\" *ngIf=\"imgSrc && !thanks\">\r\n <div class=\"ngx-feedback-modal__preview\"><img [src]=\"imgSrc\" style=\"width: 100%; height: auto\" /></div>\r\n </div>\r\n <ngx-feedback-star-vote *ngIf=\"imgSrc && !thanks\" (voted)=\"onVote($event)\"></ngx-feedback-star-vote>\r\n <textarea\r\n #comment\r\n class=\"ngx-feedback-modal__textarea\"\r\n *ngIf=\"imgSrc && voted && !thanks\"\r\n rows=\"4\"\r\n cols=\"50\"\r\n placeholder=\"Enter your feedback...\"\r\n autofocus=\"true\"\r\n ></textarea>\r\n </div>\r\n\r\n <div class=\"ngx-feedback-modal__footer\">\r\n <ngx-feedback-btn *ngIf=\"imgSrc && !thanks\" class=\"ngx-feedback-modal__send\" (click)=\"onSend()\">Send</ngx-feedback-btn>\r\n </div>\r\n</div>\r\n",
styles: [".ngx-feedback-modal__header{height:30px;color:#3b5560;font-weight:700;display:flex;flex-direction:row;justify-content:space-between}.ngx-feedback-modal__title{padding-left:16px;padding-top:8px}.ngx-feedback-modal__footer{height:30px}.ngx-feedback-modal__container{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;position:fixed;top:50%;left:50%;width:400px;padding:10px;z-index:1000;background:#fff;-webkit-transform:translate(-200px,-250px);transform:translate(-200px,-250px);border:1px solid #3b5560;border-radius:3px;box-shadow:0 0 30px 1px #000;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between}.ngx-feedback-modal__content{padding:20px 0;display:flex;flex-direction:column;justify-content:center;align-items:center}.ngx-feedback-modal__boxes{display:flex;flex-direction:row;justify-content:center;align-items:center}.ngx-feedback-modal__box{display:flex;flex-direction:column;justify-content:center;align-items:center;height:80px;padding:5px 15px;font-size:14px;font-weight:700;cursor:pointer}.ngx-feedback-modal__box--border{border:2px solid #3b5560;border-radius:3px}.ngx-feedback-modal__box-container{padding:5px;margin:0 10px}.ngx-feedback-modal__box-container--border{border-radius:3px;border:2px solid #3b5560}.ngx-feedback-modal__send{float:right}.ngx-feedback-modal__icon{width:40px;padding-top:10px}.ngx-feedback-modal__preview{width:80%;border:2px solid #3b5560;border-radius:3px}.ngx-feedback-modal__preview-container{display:flex;justify-content:center}.ngx-feedback-modal__textarea{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;outline-color:#3b5560;border-radius:3px;border:1px solid #3b5560;margin-bottom:20px;width:80%;padding:5px}.ngx-feedback-modal__close{width:14px;cursor:pointer}"]
}] }
];
/** @nocollapse */
ModalComponent.ctorParameters = function () { return [
{ type: EventsService }
]; };
ModalComponent.propDecorators = {
comment: [{ type: ViewChild, args: ['comment',] }]
};
return ModalComponent;
}());
export { ModalComponent };
if (false) {
/** @type {?} */
ModalComponent.prototype.imgSrc;
/** @type {?} */
ModalComponent.prototype.enterSpecific;
/** @type {?} */
ModalComponent.prototype.enterGeneric;
/** @type {?} */
ModalComponent.prototype.voted;
/** @type {?} */
ModalComponent.prototype.thanks;
/** @type {?} */
ModalComponent.prototype.comment;
/**
* @type {?}
* @private
*/
ModalComponent.prototype.formData;
/**
* @type {?}
* @private
*/
ModalComponent.prototype.eventsService;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmd4LWZlZWRiYWNrLyIsInNvdXJjZXMiOlsibGliL2NvbXBvbmVudHMvbW9kYWwvbW9kYWwuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFVLFNBQVMsRUFBRSxVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFekUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLCtCQUErQixDQUFDO0FBRTlEO0lBZUksd0JBQTZCLGFBQTRCO1FBQTVCLGtCQUFhLEdBQWIsYUFBYSxDQUFlO1FBVHpELFdBQU0sR0FBRyxFQUFFLENBQUM7UUFRSixhQUFRLEdBQWlCLG1CQUFBLEVBQUUsSUFBSSxFQUFFLENBQUMsRUFBRSxPQUFPLEVBQUUsRUFBRSxFQUFFLFVBQVUsRUFBRSxJQUFJLEVBQUUsRUFBZ0IsQ0FBQztJQUNoQyxDQUFDOzs7O0lBRTdELGlDQUFROzs7SUFBUixjQUFZLENBQUM7Ozs7SUFDYixtQ0FBVTs7O0lBQVY7UUFDSSxJQUFJLENBQUMsYUFBYSxDQUFDLHVCQUF1QixFQUFFLENBQUM7SUFDakQsQ0FBQzs7OztJQUVELGtDQUFTOzs7SUFBVDtRQUNJLElBQUksQ0FBQyxhQUFhLENBQUMscUJBQXFCLEVBQUUsQ0FBQztJQUMvQyxDQUFDOzs7O0lBRUQsdUNBQWM7OztJQUFkO1FBQ0ksSUFBSSxDQUFDLGFBQWEsQ0FBQyxjQUFjLEVBQUUsQ0FBQztJQUN4QyxDQUFDOzs7OztJQUVELG1DQUFVOzs7O0lBQVYsVUFBVyxPQUFZO1FBQ25CLElBQUksQ0FBQyxNQUFNLEdBQUcsT0FBTyxDQUFDO1FBQ3RCLElBQUksQ0FBQyxRQUFRLENBQUMsVUFBVSxHQUFHLE9BQU8sQ0FBQztJQUN2QyxDQUFDOzs7OztJQUVELCtCQUFNOzs7O0lBQU4sVUFBTyxJQUFZO1FBQ2YsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUM7UUFDbEIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDO0lBQzlCLENBQUM7Ozs7SUFFRCwrQkFBTTs7O0lBQU47UUFBQSxpQkFPQztRQU5HLElBQUksQ0FBQyxRQUFRLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQztRQUN6RCxJQUFJLENBQUMsYUFBYSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7UUFDaEQsSUFBSSxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUM7UUFDbkIsVUFBVTs7O1FBQUM7WUFDUCxLQUFJLENBQUMsYUFBYSxDQUFDLGNBQWMsRUFBRSxDQUFDO1FBQ3hDLENBQUMsR0FBRSxJQUFJLENBQUMsQ0FBQztJQUNiLENBQUM7O2dCQS9DSixTQUFTLFNBQUM7b0JBQ1AsUUFBUSxFQUFFLG9CQUFvQjtvQkFDOUIsd21UQUFxQzs7aUJBRXhDOzs7O2dCQU5RLGFBQWE7OzswQkFjakIsU0FBUyxTQUFDLFNBQVM7O0lBb0N4QixxQkFBQztDQUFBLEFBaERELElBZ0RDO1NBM0NZLGNBQWM7OztJQUN2QixnQ0FBWTs7SUFDWix1Q0FBdUI7O0lBQ3ZCLHNDQUFzQjs7SUFDdEIsK0JBQWU7O0lBQ2YsZ0NBQWdCOztJQUVoQixpQ0FBMEM7Ozs7O0lBRTFDLGtDQUE0Rjs7Ozs7SUFDaEYsdUNBQTZDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIFZpZXdDaGlsZCwgRWxlbWVudFJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRmVlZGJhY2tEYXRhIH0gZnJvbSAnLi4vLi4vbW9kZWxzL2ZlZWRiYWNrLWRhdGEubW9kZWwnO1xuaW1wb3J0IHsgRXZlbnRzU2VydmljZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL2V2ZW50cy5zZXJ2aWNlJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICduZ3gtZmVlZGJhY2stbW9kYWwnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9tb2RhbC5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vbW9kYWwuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBNb2RhbENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gICAgaW1nU3JjID0gJyc7XG4gICAgZW50ZXJTcGVjaWZpYzogYm9vbGVhbjtcbiAgICBlbnRlckdlbmVyaWM6IGJvb2xlYW47XG4gICAgdm90ZWQ6IGJvb2xlYW47XG4gICAgdGhhbmtzOiBib29sZWFuO1xuXG4gICAgQFZpZXdDaGlsZCgnY29tbWVudCcpIGNvbW1lbnQ6IEVsZW1lbnRSZWY7XG5cbiAgICBwcml2YXRlIGZvcm1EYXRhOiBGZWVkYmFja0RhdGEgPSB7IHJhdGU6IDAsIGNvbW1lbnQ6ICcnLCBzY3JlZW5zaG90OiBudWxsIH0gYXMgRmVlZGJhY2tEYXRhO1xuICAgIGNvbnN0cnVjdG9yKHByaXZhdGUgcmVhZG9ubHkgZXZlbnRzU2VydmljZTogRXZlbnRzU2VydmljZSkge31cblxuICAgIG5nT25Jbml0KCkge31cbiAgICBvblNwZWNpZmljKCkge1xuICAgICAgICB0aGlzLmV2ZW50c1NlcnZpY2Uub25TcGVjaWZpY0ZlZWRiYWNrQ2xpY2soKTtcbiAgICB9XG5cbiAgICBvbkdlbmVyaWMoKSB7XG4gICAgICAgIHRoaXMuZXZlbnRzU2VydmljZS5vbkdlbmVyaWNGZWVkYmFja0NsaWsoKTtcbiAgICB9XG5cbiAgICBvbkNsb3NlQ2xpY2tlZCgpIHtcbiAgICAgICAgdGhpcy5ldmVudHNTZXJ2aWNlLm9uQ2xvc2VDbGlja2VkKCk7XG4gICAgfVxuXG4gICAgc2V0UHJldmlldyhwcmV2aWV3OiBhbnkpIHtcbiAgICAgICAgdGhpcy5pbWdTcmMgPSBwcmV2aWV3O1xuICAgICAgICB0aGlzLmZvcm1EYXRhLnNjcmVlbnNob3QgPSBwcmV2aWV3O1xuICAgIH1cblxuICAgIG9uVm90ZShyYXRlOiBudW1iZXIpIHtcbiAgICAgICAgdGhpcy52b3RlZCA9IHRydWU7XG4gICAgICAgIHRoaXMuZm9ybURhdGEucmF0ZSA9IHJhdGU7XG4gICAgfVxuXG4gICAgb25TZW5kKCkge1xuICAgICAgICB0aGlzLmZvcm1EYXRhLmNvbW1lbnQgPSB0aGlzLmNvbW1lbnQubmF0aXZlRWxlbWVudC52YWx1ZTtcbiAgICAgICAgdGhpcy5ldmVudHNTZXJ2aWNlLm9uU2VuZENsaWNrZWQodGhpcy5mb3JtRGF0YSk7XG4gICAgICAgIHRoaXMudGhhbmtzID0gdHJ1ZTtcbiAgICAgICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICAgICAgICB0aGlzLmV2ZW50c1NlcnZpY2Uub25DbG9zZUNsaWNrZWQoKTtcbiAgICAgICAgfSwgMjAwMCk7XG4gICAgfVxufVxuIl19