ngx-feedback
Version:
Angular Feedback Library
909 lines (887 loc) • 46.7 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('html2canvas'), require('rxjs'), require('/common'), require('@angular/core')) :
typeof define === 'function' && define.amd ? define('ngx-feedback', ['exports', 'html2canvas', 'rxjs', '/common', '@angular/core'], factory) :
(factory((global['ngx-feedback'] = {}),global.html2canvas,global.rxjs,global.ng.common,global.ng.core));
}(this, (function (exports,html2canvas,rxjs,common,i0) { 'use strict';
html2canvas = html2canvas && html2canvas.hasOwnProperty('default') ? html2canvas['default'] : html2canvas;
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @template T
*/
var ComponentLoaderService = /** @class */ (function () {
function ComponentLoaderService(componentFactoryResolver, appRef, injector) {
this.componentFactoryResolver = componentFactoryResolver;
this.appRef = appRef;
this.injector = injector;
}
/**
* @param {?} componentType
* @return {?}
*/
ComponentLoaderService.prototype.load = /**
* @param {?} componentType
* @return {?}
*/
function (componentType) {
// 1. Create a component reference from the component
/** @type {?} */
var ref = this.componentFactoryResolver.resolveComponentFactory(componentType).create(this.injector);
// 2. Attach component to the appRef so that it's inside the ng component tree
this.appRef.attachView(ref.hostView);
// 3. Get DOM element from component
/** @type {?} */
var domElem = ( /** @type {?} */((( /** @type {?} */(ref.hostView))).rootNodes[0]));
// 4. Append DOM element to the body
document.body.appendChild(domElem);
ref.changeDetectorRef.detectChanges();
return ref;
};
ComponentLoaderService.decorators = [
{ type: i0.Injectable, args: [{ providedIn: 'root' },] }
];
/** @nocollapse */
ComponentLoaderService.ctorParameters = function () {
return [
{ type: i0.ComponentFactoryResolver },
{ type: i0.ApplicationRef },
{ type: i0.Injector }
];
};
/** @nocollapse */ ComponentLoaderService.ngInjectableDef = i0.defineInjectable({ factory: function ComponentLoaderService_Factory() { return new ComponentLoaderService(i0.inject(i0.ComponentFactoryResolver), i0.inject(i0.ApplicationRef), i0.inject(i0.INJECTOR)); }, token: ComponentLoaderService, providedIn: "root" });
return ComponentLoaderService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var EventsService = /** @class */ (function () {
function EventsService() {
this.feedbackClick = new rxjs.Subject();
this.feedbackClickObservable = this.feedbackClick.asObservable();
this.specificFeedbackClick = new rxjs.Subject();
this.specificFeedbackClickObservable = this.specificFeedbackClick.asObservable();
this.genericFeedbackClick = new rxjs.Subject();
this.genericFeedbackClickObservable = this.genericFeedbackClick.asObservable();
this.closeClick = new rxjs.Subject();
this.closeClickClickObservable = this.closeClick.asObservable();
this.onSendClick = new rxjs.Subject();
this.onSendClickObservable = this.onSendClick.asObservable();
}
/**
* @return {?}
*/
EventsService.prototype.onSpecificFeedbackClick = /**
* @return {?}
*/
function () {
this.specificFeedbackClick.next();
};
/**
* @return {?}
*/
EventsService.prototype.onGenericFeedbackClik = /**
* @return {?}
*/
function () {
this.genericFeedbackClick.next();
};
/**
* @return {?}
*/
EventsService.prototype.onFeedbackButtonClick = /**
* @return {?}
*/
function () {
this.feedbackClick.next();
};
/**
* @return {?}
*/
EventsService.prototype.onCloseClicked = /**
* @return {?}
*/
function () {
this.closeClick.next();
};
/**
* @param {?} data
* @return {?}
*/
EventsService.prototype.onSendClicked = /**
* @param {?} data
* @return {?}
*/
function (data) {
this.onSendClick.next(data);
};
EventsService.decorators = [
{ type: i0.Injectable, args: [{ providedIn: 'root' },] }
];
/** @nocollapse */
EventsService.ctorParameters = function () { return []; };
/** @nocollapse */ EventsService.ngInjectableDef = i0.defineInjectable({ factory: function EventsService_Factory() { return new EventsService(); }, token: EventsService, providedIn: "root" });
return EventsService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var FeedbackButtonComponent = /** @class */ (function () {
function FeedbackButtonComponent(eventsService) {
this.eventsService = eventsService;
}
/**
* @return {?}
*/
FeedbackButtonComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () { };
/**
* @return {?}
*/
FeedbackButtonComponent.prototype.onClick = /**
* @return {?}
*/
function () {
this.eventsService.onFeedbackButtonClick();
};
FeedbackButtonComponent.decorators = [
{ type: i0.Component, args: [{
selector: 'ngx-feedback-main-btn',
template: "<button (click)=\"onClick()\" class=\"feedback-button__container\">Feedback</button>\n",
encapsulation: i0.ViewEncapsulation.None,
styles: [".feedback-button__container{position:fixed;right:-34px;top:calc(50% - 37.5px);cursor:pointer;-webkit-transform:rotateZ(90deg);transform:rotateZ(-90deg);border:none;border-radius:5px 5px 0 0;background-color:#3b5560;color:#fff;font-size:14px;padding:5px 10px;font-weight:700;font-family:Verdana;outline:0}.ngx-feedback__highlight{outline:#ffc058 solid 4px;pointer-events:none;cursor:default!important}"]
}] }
];
/** @nocollapse */
FeedbackButtonComponent.ctorParameters = function () {
return [
{ type: EventsService }
];
};
return FeedbackButtonComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
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: i0.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: i0.ViewChild, args: ['comment',] }]
};
return ModalComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var BackdropComponent = /** @class */ (function () {
function BackdropComponent() {
this.click = new i0.EventEmitter();
}
/**
* @return {?}
*/
BackdropComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () { };
/**
* @return {?}
*/
BackdropComponent.prototype.onClick = /**
* @return {?}
*/
function () {
this.click.emit();
};
BackdropComponent.decorators = [
{ type: i0.Component, args: [{
selector: 'ngx-feedback-backdrop',
template: "<div class=\"ngx-feedback-backdrop__container\"></div>",
styles: [".ngx-feedback-backdrop__container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;background-color:#3b5560;opacity:.7}"]
}] }
];
/** @nocollapse */
BackdropComponent.ctorParameters = function () { return []; };
BackdropComponent.propDecorators = {
click: [{ type: i0.Output }]
};
return BackdropComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ModalService = /** @class */ (function () {
function ModalService(componentLoader) {
this.componentLoader = componentLoader;
}
/**
* @param {?} preview
* @return {?}
*/
ModalService.prototype.openWithPreview = /**
* @param {?} preview
* @return {?}
*/
function (preview) {
this.draw();
this.modalRef.instance.setPreview(preview);
};
/**
* @return {?}
*/
ModalService.prototype.draw = /**
* @return {?}
*/
function () {
this.backdropRef = this.componentLoader.load(BackdropComponent);
this.modalRef = this.componentLoader.load(ModalComponent);
};
/**
* @return {?}
*/
ModalService.prototype.remove = /**
* @return {?}
*/
function () {
this.modalRef.destroy();
this.backdropRef.destroy();
};
ModalService.decorators = [
{ type: i0.Injectable, args: [{ providedIn: 'root' },] }
];
/** @nocollapse */
ModalService.ctorParameters = function () {
return [
{ type: ComponentLoaderService }
];
};
/** @nocollapse */ ModalService.ngInjectableDef = i0.defineInjectable({ factory: function ModalService_Factory() { return new ModalService(i0.inject(ComponentLoaderService)); }, token: ModalService, providedIn: "root" });
return ModalService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var SelectorsService = /** @class */ (function () {
function SelectorsService(rendererFactory) {
this.rendererFactory = rendererFactory;
this.preview = new rxjs.Subject();
this.subs = [];
this.renderer = this.rendererFactory.createRenderer(null, null);
}
/**
* @return {?}
*/
SelectorsService.prototype.pageScreenshot = /**
* @return {?}
*/
function () {
this.screenshot(document.body);
};
/**
* @return {?}
*/
SelectorsService.prototype.elementsHighlight = /**
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var element;
/** @type {?} */
var elements = [];
this.source = rxjs.fromEvent(document, 'mousemove').subscribe(( /**
* @param {?} ev
* @return {?}
*/function (ev) {
if (element) {
_this.renderer.removeClass(element, 'ngx-feedback__highlight');
}
element = document.elementFromPoint(ev.x, ev.y);
if (elements.findIndex(( /**
* @param {?} el
* @return {?}
*/function (el) { return el === element; })) === -1) {
elements.push(element);
_this.subs.push(rxjs.fromEvent(element, 'click').subscribe(( /**
* @param {?} evt
* @return {?}
*/function (evt) {
evt.stopPropagation();
_this.screenshot(element);
})));
}
_this.renderer.addClass(element, 'ngx-feedback__highlight');
}));
};
/**
* @param {?} element
* @return {?}
*/
SelectorsService.prototype.screenshot = /**
* @param {?} element
* @return {?}
*/
function (element) {
var _this = this;
/** @type {?} */
var image;
html2canvas(element).then(( /**
* @param {?} canvas
* @return {?}
*/function (canvas) {
image = (( /** @type {?} */(canvas))).toDataURL();
_this.preview.next(image);
}));
this.renderer.removeClass(element, 'ngx-feedback__highlight');
this.clean();
};
/**
* @return {?}
*/
SelectorsService.prototype.clean = /**
* @return {?}
*/
function () {
if (this.source) {
this.source.unsubscribe();
}
this.subs.forEach(( /**
* @param {?} sub
* @return {?}
*/function (sub) { return sub.unsubscribe(); }));
};
SelectorsService.decorators = [
{ type: i0.Injectable, args: [{ providedIn: 'root' },] }
];
/** @nocollapse */
SelectorsService.ctorParameters = function () {
return [
{ type: i0.RendererFactory2 }
];
};
/** @nocollapse */ SelectorsService.ngInjectableDef = i0.defineInjectable({ factory: function SelectorsService_Factory() { return new SelectorsService(i0.inject(i0.RendererFactory2)); }, token: SelectorsService, providedIn: "root" });
return SelectorsService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var OrchestratorService = /** @class */ (function () {
function OrchestratorService(modalService, selectorsService, eventsService) {
this.modalService = modalService;
this.selectorsService = selectorsService;
this.eventsService = eventsService;
this.subscriptions = [];
this.onSend = new rxjs.Subject();
}
/**
* @return {?}
*/
OrchestratorService.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.subscriptions.push(this.onFeedbackButtonClick(), this.onSpecificFeedbackClick(), this.onGenericFeedbackClick(), this.onElementSelected(), this.onCloseClick(), this.onSendClick());
};
/**
* @private
* @return {?}
*/
OrchestratorService.prototype.onElementSelected = /**
* @private
* @return {?}
*/
function () {
var _this = this;
return this.selectorsService.preview.subscribe(( /**
* @param {?} prev
* @return {?}
*/function (prev) {
_this.modalService.openWithPreview(prev);
}));
};
/**
* @private
* @return {?}
*/
OrchestratorService.prototype.onFeedbackButtonClick = /**
* @private
* @return {?}
*/
function () {
var _this = this;
return this.eventsService.feedbackClickObservable.subscribe(( /**
* @return {?}
*/function () {
_this.modalService.draw();
}));
};
/**
* @private
* @return {?}
*/
OrchestratorService.prototype.onSpecificFeedbackClick = /**
* @private
* @return {?}
*/
function () {
var _this = this;
return this.eventsService.specificFeedbackClickObservable.subscribe(( /**
* @return {?}
*/function () {
_this.modalService.remove();
_this.selectorsService.elementsHighlight();
}));
};
/**
* @private
* @return {?}
*/
OrchestratorService.prototype.onGenericFeedbackClick = /**
* @private
* @return {?}
*/
function () {
var _this = this;
return this.eventsService.genericFeedbackClickObservable.subscribe(( /**
* @return {?}
*/function () {
_this.modalService.remove();
_this.selectorsService.pageScreenshot();
}));
};
/**
* @private
* @return {?}
*/
OrchestratorService.prototype.onCloseClick = /**
* @private
* @return {?}
*/
function () {
var _this = this;
return this.eventsService.closeClickClickObservable.subscribe(( /**
* @return {?}
*/function () {
_this.modalService.remove();
}));
};
/**
* @private
* @return {?}
*/
OrchestratorService.prototype.onSendClick = /**
* @private
* @return {?}
*/
function () {
var _this = this;
return this.eventsService.onSendClickObservable.subscribe(( /**
* @param {?} data
* @return {?}
*/function (data) {
_this.onSend.next(data);
}));
};
/**
* @return {?}
*/
OrchestratorService.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.subscriptions.forEach(( /**
* @param {?} sub
* @return {?}
*/function (sub) {
sub.unsubscribe();
}));
};
OrchestratorService.decorators = [
{ type: i0.Injectable, args: [{ providedIn: 'root' },] }
];
/** @nocollapse */
OrchestratorService.ctorParameters = function () {
return [
{ type: ModalService },
{ type: SelectorsService },
{ type: EventsService }
];
};
/** @nocollapse */ OrchestratorService.ngInjectableDef = i0.defineInjectable({ factory: function OrchestratorService_Factory() { return new OrchestratorService(i0.inject(ModalService), i0.inject(SelectorsService), i0.inject(EventsService)); }, token: OrchestratorService, providedIn: "root" });
return OrchestratorService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgxFeedbackService = /** @class */ (function () {
function NgxFeedbackService(componentLoader, orchestratorService) {
this.componentLoader = componentLoader;
this.orchestratorService = orchestratorService;
}
/**
* @return {?}
*/
NgxFeedbackService.prototype.listenForFeedbacks = /**
* @return {?}
*/
function () {
this.orchestratorService.ngOnInit();
this.componentLoader.load(FeedbackButtonComponent);
return this.orchestratorService.onSend;
};
NgxFeedbackService.decorators = [
{ type: i0.Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
NgxFeedbackService.ctorParameters = function () {
return [
{ type: ComponentLoaderService },
{ type: OrchestratorService }
];
};
/** @nocollapse */ NgxFeedbackService.ngInjectableDef = i0.defineInjectable({ factory: function NgxFeedbackService_Factory() { return new NgxFeedbackService(i0.inject(ComponentLoaderService), i0.inject(OrchestratorService)); }, token: NgxFeedbackService, providedIn: "root" });
return NgxFeedbackService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ButtonComponent = /** @class */ (function () {
function ButtonComponent() {
this.click = new i0.EventEmitter();
}
/**
* @return {?}
*/
ButtonComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () { };
/**
* @return {?}
*/
ButtonComponent.prototype.onClick = /**
* @return {?}
*/
function () {
this.click.emit();
};
ButtonComponent.decorators = [
{ type: i0.Component, args: [{
selector: 'ngx-feedback-btn',
template: "<button class=\"ngx-feedback-btn__container\" (click)=\"onClick()\"><ng-content></ng-content></button>\n",
styles: [".ngx-feedback-btn__container{text-transform:uppercase;border:2px solid transparent;border-radius:3px;outline:0;padding:6px 12px;font-size:12px;font-weight:700;color:#fff;background-color:#3b5560;cursor:pointer}.ngx-feedback-btn__container:hover{color:#3b5560;border:2px solid #3b5560;background-color:#fff}"]
}] }
];
/** @nocollapse */
ButtonComponent.ctorParameters = function () { return []; };
ButtonComponent.propDecorators = {
click: [{ type: i0.Output }]
};
return ButtonComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var StarComponent = /** @class */ (function () {
function StarComponent() {
this.click = new i0.EventEmitter();
}
/**
* @return {?}
*/
StarComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () { };
/**
* @return {?}
*/
StarComponent.prototype.onClick = /**
* @return {?}
*/
function () {
this.click.emit();
};
StarComponent.decorators = [
{ type: i0.Component, args: [{
selector: 'ngx-feedback-star',
template: "<div class=\"ngx-feedback-star__container\" (click)=\"onClick()\">\n <div *ngIf=\"type === 'full' || type === 'temp'; else empty\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"#ffc058\">\n <path\n d=\"M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z\"\n />\n </svg>\n </div>\n <ng-template #empty>\n <div>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"#ffc058\">\n <path\n d=\"M12 5.173l2.335 4.817 5.305.732-3.861 3.71.942 5.27-4.721-2.524-4.721 2.525.942-5.27-3.861-3.71 5.305-.733 2.335-4.817zm0-4.586l-3.668 7.568-8.332 1.151 6.064 5.828-1.48 8.279 7.416-3.967 7.416 3.966-1.48-8.279 6.064-5.827-8.332-1.15-3.668-7.569z\"\n />\n </svg>\n </div>\n </ng-template>\n</div>\n",
styles: [".ngx-feedback-star__container{cursor:pointer;padding:5px}"]
}] }
];
/** @nocollapse */
StarComponent.ctorParameters = function () { return []; };
StarComponent.propDecorators = {
type: [{ type: i0.Input }],
click: [{ type: i0.Output }]
};
return StarComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var StarVoteComponent = /** @class */ (function () {
function StarVoteComponent() {
this.stars = [
{ type: 'empty', value: 1 },
{ type: 'empty', value: 2 },
{ type: 'empty', value: 3 },
{ type: 'empty', value: 4 },
{ type: 'empty', value: 5 }
];
this.voted = new i0.EventEmitter();
}
/**
* @return {?}
*/
StarVoteComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () { };
/**
* @param {?} index
* @return {?}
*/
StarVoteComponent.prototype.onClick = /**
* @param {?} index
* @return {?}
*/
function (index) {
this.stars.forEach(( /**
* @param {?} s
* @param {?} i
* @return {?}
*/function (s, i) {
if (i <= index) {
s.type = 'full';
}
else {
s.type = 'empty';
}
}));
this.voted.emit(index + 1);
};
/**
* @param {?} index
* @return {?}
*/
StarVoteComponent.prototype.onMouseEnter = /**
* @param {?} index
* @return {?}
*/
function (index) {
this.stars.forEach(( /**
* @param {?} s
* @param {?} i
* @return {?}
*/function (s, i) {
if (i <= index && s.type !== 'full') {
s.type = 'temp';
}
}));
};
/**
* @param {?} index
* @return {?}
*/
StarVoteComponent.prototype.onMouseLeave = /**
* @param {?} index
* @return {?}
*/
function (index) {
this.stars.forEach(( /**
* @param {?} s
* @param {?} i
* @return {?}
*/function (s, i) {
if (s.type === 'temp') {
s.type = 'empty';
}
}));
};
StarVoteComponent.decorators = [
{ type: i0.Component, args: [{
selector: 'ngx-feedback-star-vote',
template: "<div class=\"ngx-feedback-star-vote__container\">\n <div class=\"ngx-feedback-star-vote__star\" *ngFor=\"let s of stars; index as i\">\n <ngx-feedback-star\n (click)=\"onClick(i)\"\n (mouseenter)=\"onMouseEnter(i)\"\n (mouseleave)=\"onMouseLeave(i)\"\n [type]=\"s.type\"\n ></ngx-feedback-star>\n </div>\n</div>\n",
styles: [".ngx-feedback-star-vote__container{display:flex;flex-direction:row;justify-content:center;padding:10px}"]
}] }
];
/** @nocollapse */
StarVoteComponent.ctorParameters = function () { return []; };
StarVoteComponent.propDecorators = {
voted: [{ type: i0.Output }]
};
return StarVoteComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgxFeedbackModule = /** @class */ (function () {
function NgxFeedbackModule() {
}
NgxFeedbackModule.decorators = [
{ type: i0.NgModule, args: [{
declarations: [
FeedbackButtonComponent,
ModalComponent,
ButtonComponent,
BackdropComponent,
StarComponent,
StarVoteComponent,
],
entryComponents: [FeedbackButtonComponent, ModalComponent, BackdropComponent],
providers: [NgxFeedbackService, OrchestratorService, ComponentLoaderService, ModalService, SelectorsService, EventsService],
imports: [common.CommonModule],
exports: []
},] }
];
return NgxFeedbackModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var FeedbackData = /** @class */ (function () {
function FeedbackData() {
}
return FeedbackData;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
exports.NgxFeedbackService = NgxFeedbackService;
exports.NgxFeedbackModule = NgxFeedbackModule;
exports.FeedbackData = FeedbackData;
exports.ɵg = BackdropComponent;
exports.ɵf = ButtonComponent;
exports.ɵc = FeedbackButtonComponent;
exports.ɵe = ModalComponent;
exports.ɵi = StarVoteComponent;
exports.ɵh = StarComponent;
exports.ɵb = OrchestratorService;
exports.ɵa = ComponentLoaderService;
exports.ɵd = EventsService;
exports.ɵk = ModalService;
exports.ɵj = OrchestratorService;
exports.ɵl = SelectorsService;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=ngx-feedback.umd.js.map