ngx-feedback
Version:
Angular Feedback Library
890 lines (871 loc) • 41.4 kB
JavaScript
import html2canvas from 'html2canvas';
import { Subject, fromEvent } from 'rxjs';
import { CommonModule } from '@angular/common';
import { Injectable, ComponentFactoryResolver, ApplicationRef, Injector, Component, EventEmitter, Output, RendererFactory2, ViewEncapsulation, ViewChild, Input, NgModule, defineInjectable, inject, INJECTOR } from '@angular/core';
/**
* @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: Injectable, args: [{ providedIn: 'root' },] }
];
/** @nocollapse */
ComponentLoaderService.ctorParameters = function () { return [
{ type: ComponentFactoryResolver },
{ type: ApplicationRef },
{ type: Injector }
]; };
/** @nocollapse */ ComponentLoaderService.ngInjectableDef = defineInjectable({ factory: function ComponentLoaderService_Factory() { return new ComponentLoaderService(inject(ComponentFactoryResolver), inject(ApplicationRef), inject(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 Subject();
this.feedbackClickObservable = this.feedbackClick.asObservable();
this.specificFeedbackClick = new Subject();
this.specificFeedbackClickObservable = this.specificFeedbackClick.asObservable();
this.genericFeedbackClick = new Subject();
this.genericFeedbackClickObservable = this.genericFeedbackClick.asObservable();
this.closeClick = new Subject();
this.closeClickClickObservable = this.closeClick.asObservable();
this.onSendClick = new 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: Injectable, args: [{ providedIn: 'root' },] }
];
/** @nocollapse */
EventsService.ctorParameters = function () { return []; };
/** @nocollapse */ EventsService.ngInjectableDef = 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: Component, args: [{
selector: 'ngx-feedback-main-btn',
template: "<button (click)=\"onClick()\" class=\"feedback-button__container\">Feedback</button>\n",
encapsulation: 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: 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;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var BackdropComponent = /** @class */ (function () {
function BackdropComponent() {
this.click = new EventEmitter();
}
/**
* @return {?}
*/
BackdropComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () { };
/**
* @return {?}
*/
BackdropComponent.prototype.onClick = /**
* @return {?}
*/
function () {
this.click.emit();
};
BackdropComponent.decorators = [
{ type: 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: 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: Injectable, args: [{ providedIn: 'root' },] }
];
/** @nocollapse */
ModalService.ctorParameters = function () { return [
{ type: ComponentLoaderService }
]; };
/** @nocollapse */ ModalService.ngInjectableDef = defineInjectable({ factory: function ModalService_Factory() { return new ModalService(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 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 = 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(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: Injectable, args: [{ providedIn: 'root' },] }
];
/** @nocollapse */
SelectorsService.ctorParameters = function () { return [
{ type: RendererFactory2 }
]; };
/** @nocollapse */ SelectorsService.ngInjectableDef = defineInjectable({ factory: function SelectorsService_Factory() { return new SelectorsService(inject(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 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: Injectable, args: [{ providedIn: 'root' },] }
];
/** @nocollapse */
OrchestratorService.ctorParameters = function () { return [
{ type: ModalService },
{ type: SelectorsService },
{ type: EventsService }
]; };
/** @nocollapse */ OrchestratorService.ngInjectableDef = defineInjectable({ factory: function OrchestratorService_Factory() { return new OrchestratorService(inject(ModalService), inject(SelectorsService), 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: Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
NgxFeedbackService.ctorParameters = function () { return [
{ type: ComponentLoaderService },
{ type: OrchestratorService }
]; };
/** @nocollapse */ NgxFeedbackService.ngInjectableDef = defineInjectable({ factory: function NgxFeedbackService_Factory() { return new NgxFeedbackService(inject(ComponentLoaderService), 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 EventEmitter();
}
/**
* @return {?}
*/
ButtonComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () { };
/**
* @return {?}
*/
ButtonComponent.prototype.onClick = /**
* @return {?}
*/
function () {
this.click.emit();
};
ButtonComponent.decorators = [
{ type: 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: 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 EventEmitter();
}
/**
* @return {?}
*/
StarComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () { };
/**
* @return {?}
*/
StarComponent.prototype.onClick = /**
* @return {?}
*/
function () {
this.click.emit();
};
StarComponent.decorators = [
{ type: 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: Input }],
click: [{ type: 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 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: 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: 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: NgModule, args: [{
declarations: [
FeedbackButtonComponent,
ModalComponent,
ButtonComponent,
BackdropComponent,
StarComponent,
StarVoteComponent,
],
entryComponents: [FeedbackButtonComponent, ModalComponent, BackdropComponent],
providers: [NgxFeedbackService, OrchestratorService, ComponentLoaderService, ModalService, SelectorsService, EventsService],
imports: [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
*/
export { NgxFeedbackService, NgxFeedbackModule, FeedbackData, BackdropComponent as ɵg, ButtonComponent as ɵf, FeedbackButtonComponent as ɵc, ModalComponent as ɵe, StarVoteComponent as ɵi, StarComponent as ɵh, OrchestratorService as ɵb, ComponentLoaderService as ɵa, EventsService as ɵd, ModalService as ɵk, OrchestratorService as ɵj, SelectorsService as ɵl };
//# sourceMappingURL=ngx-feedback.js.map