ngx-feedback
Version:
Angular Feedback Library
751 lines (732 loc) • 36.1 kB
JavaScript
import html2canvas from 'html2canvas';
import { Subject, fromEvent } from 'rxjs';
import { CommonModule } from '@angular/common';
import { Injectable, ComponentFactoryResolver, ApplicationRef, Injector, Component, EventEmitter, Output, ViewEncapsulation, RendererFactory2, Input, ViewChild, NgModule, defineInjectable, inject, INJECTOR } from '@angular/core';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @template T
*/
class ComponentLoaderService {
/**
* @param {?} componentFactoryResolver
* @param {?} appRef
* @param {?} injector
*/
constructor(componentFactoryResolver, appRef, injector) {
this.componentFactoryResolver = componentFactoryResolver;
this.appRef = appRef;
this.injector = injector;
}
/**
* @param {?} componentType
* @return {?}
*/
load(componentType) {
// 1. Create a component reference from the component
/** @type {?} */
const 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 {?} */
const 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 = () => [
{ 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" });
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class EventsService {
constructor() {
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 {?}
*/
onSpecificFeedbackClick() {
this.specificFeedbackClick.next();
}
/**
* @return {?}
*/
onGenericFeedbackClik() {
this.genericFeedbackClick.next();
}
/**
* @return {?}
*/
onFeedbackButtonClick() {
this.feedbackClick.next();
}
/**
* @return {?}
*/
onCloseClicked() {
this.closeClick.next();
}
/**
* @param {?} data
* @return {?}
*/
onSendClicked(data) {
this.onSendClick.next(data);
}
}
EventsService.decorators = [
{ type: Injectable, args: [{ providedIn: 'root' },] }
];
/** @nocollapse */
EventsService.ctorParameters = () => [];
/** @nocollapse */ EventsService.ngInjectableDef = defineInjectable({ factory: function EventsService_Factory() { return new EventsService(); }, token: EventsService, providedIn: "root" });
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class FeedbackButtonComponent {
/**
* @param {?} eventsService
*/
constructor(eventsService) {
this.eventsService = eventsService;
}
/**
* @return {?}
*/
ngOnInit() { }
/**
* @return {?}
*/
onClick() {
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 = () => [
{ type: EventsService }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class ModalComponent {
/**
* @param {?} eventsService
*/
constructor(eventsService) {
this.eventsService = eventsService;
this.imgSrc = '';
this.formData = (/** @type {?} */ ({ rate: 0, comment: '', screenshot: null }));
}
/**
* @return {?}
*/
ngOnInit() { }
/**
* @return {?}
*/
onSpecific() {
this.eventsService.onSpecificFeedbackClick();
}
/**
* @return {?}
*/
onGeneric() {
this.eventsService.onGenericFeedbackClik();
}
/**
* @return {?}
*/
onCloseClicked() {
this.eventsService.onCloseClicked();
}
/**
* @param {?} preview
* @return {?}
*/
setPreview(preview) {
this.imgSrc = preview;
this.formData.screenshot = preview;
}
/**
* @param {?} rate
* @return {?}
*/
onVote(rate) {
this.voted = true;
this.formData.rate = rate;
}
/**
* @return {?}
*/
onSend() {
this.formData.comment = this.comment.nativeElement.value;
this.eventsService.onSendClicked(this.formData);
this.thanks = true;
setTimeout((/**
* @return {?}
*/
() => {
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 = () => [
{ type: EventsService }
];
ModalComponent.propDecorators = {
comment: [{ type: ViewChild, args: ['comment',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class BackdropComponent {
constructor() {
this.click = new EventEmitter();
}
/**
* @return {?}
*/
ngOnInit() { }
/**
* @return {?}
*/
onClick() {
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 = () => [];
BackdropComponent.propDecorators = {
click: [{ type: Output }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class ModalService {
/**
* @param {?} componentLoader
*/
constructor(componentLoader) {
this.componentLoader = componentLoader;
}
/**
* @param {?} preview
* @return {?}
*/
openWithPreview(preview) {
this.draw();
this.modalRef.instance.setPreview(preview);
}
/**
* @return {?}
*/
draw() {
this.backdropRef = this.componentLoader.load(BackdropComponent);
this.modalRef = this.componentLoader.load(ModalComponent);
}
/**
* @return {?}
*/
remove() {
this.modalRef.destroy();
this.backdropRef.destroy();
}
}
ModalService.decorators = [
{ type: Injectable, args: [{ providedIn: 'root' },] }
];
/** @nocollapse */
ModalService.ctorParameters = () => [
{ type: ComponentLoaderService }
];
/** @nocollapse */ ModalService.ngInjectableDef = defineInjectable({ factory: function ModalService_Factory() { return new ModalService(inject(ComponentLoaderService)); }, token: ModalService, providedIn: "root" });
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class SelectorsService {
/**
* @param {?} rendererFactory
*/
constructor(rendererFactory) {
this.rendererFactory = rendererFactory;
this.preview = new Subject();
this.subs = [];
this.renderer = this.rendererFactory.createRenderer(null, null);
}
/**
* @return {?}
*/
pageScreenshot() {
this.screenshot(document.body);
}
/**
* @return {?}
*/
elementsHighlight() {
/** @type {?} */
let element;
/** @type {?} */
const elements = [];
this.source = fromEvent(document, 'mousemove').subscribe((/**
* @param {?} ev
* @return {?}
*/
(ev) => {
if (element) {
this.renderer.removeClass(element, 'ngx-feedback__highlight');
}
element = document.elementFromPoint(ev.x, ev.y);
if (elements.findIndex((/**
* @param {?} el
* @return {?}
*/
el => el === element)) === -1) {
elements.push(element);
this.subs.push(fromEvent(element, 'click').subscribe((/**
* @param {?} evt
* @return {?}
*/
(evt) => {
evt.stopPropagation();
this.screenshot(element);
})));
}
this.renderer.addClass(element, 'ngx-feedback__highlight');
}));
}
/**
* @param {?} element
* @return {?}
*/
screenshot(element) {
/** @type {?} */
let image;
html2canvas(element).then((/**
* @param {?} canvas
* @return {?}
*/
canvas => {
image = ((/** @type {?} */ (canvas))).toDataURL();
this.preview.next(image);
}));
this.renderer.removeClass(element, 'ngx-feedback__highlight');
this.clean();
}
/**
* @return {?}
*/
clean() {
if (this.source) {
this.source.unsubscribe();
}
this.subs.forEach((/**
* @param {?} sub
* @return {?}
*/
sub => sub.unsubscribe()));
}
}
SelectorsService.decorators = [
{ type: Injectable, args: [{ providedIn: 'root' },] }
];
/** @nocollapse */
SelectorsService.ctorParameters = () => [
{ type: RendererFactory2 }
];
/** @nocollapse */ SelectorsService.ngInjectableDef = defineInjectable({ factory: function SelectorsService_Factory() { return new SelectorsService(inject(RendererFactory2)); }, token: SelectorsService, providedIn: "root" });
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class OrchestratorService {
/**
* @param {?} modalService
* @param {?} selectorsService
* @param {?} eventsService
*/
constructor(modalService, selectorsService, eventsService) {
this.modalService = modalService;
this.selectorsService = selectorsService;
this.eventsService = eventsService;
this.subscriptions = [];
this.onSend = new Subject();
}
/**
* @return {?}
*/
ngOnInit() {
this.subscriptions.push(this.onFeedbackButtonClick(), this.onSpecificFeedbackClick(), this.onGenericFeedbackClick(), this.onElementSelected(), this.onCloseClick(), this.onSendClick());
}
/**
* @private
* @return {?}
*/
onElementSelected() {
return this.selectorsService.preview.subscribe((/**
* @param {?} prev
* @return {?}
*/
prev => {
this.modalService.openWithPreview(prev);
}));
}
/**
* @private
* @return {?}
*/
onFeedbackButtonClick() {
return this.eventsService.feedbackClickObservable.subscribe((/**
* @return {?}
*/
() => {
this.modalService.draw();
}));
}
/**
* @private
* @return {?}
*/
onSpecificFeedbackClick() {
return this.eventsService.specificFeedbackClickObservable.subscribe((/**
* @return {?}
*/
() => {
this.modalService.remove();
this.selectorsService.elementsHighlight();
}));
}
/**
* @private
* @return {?}
*/
onGenericFeedbackClick() {
return this.eventsService.genericFeedbackClickObservable.subscribe((/**
* @return {?}
*/
() => {
this.modalService.remove();
this.selectorsService.pageScreenshot();
}));
}
/**
* @private
* @return {?}
*/
onCloseClick() {
return this.eventsService.closeClickClickObservable.subscribe((/**
* @return {?}
*/
() => {
this.modalService.remove();
}));
}
/**
* @private
* @return {?}
*/
onSendClick() {
return this.eventsService.onSendClickObservable.subscribe((/**
* @param {?} data
* @return {?}
*/
(data) => {
this.onSend.next(data);
}));
}
/**
* @return {?}
*/
ngOnDestroy() {
this.subscriptions.forEach((/**
* @param {?} sub
* @return {?}
*/
sub => {
sub.unsubscribe();
}));
}
}
OrchestratorService.decorators = [
{ type: Injectable, args: [{ providedIn: 'root' },] }
];
/** @nocollapse */
OrchestratorService.ctorParameters = () => [
{ 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" });
/**
* @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
*/
class NgxFeedbackService {
/**
* @param {?} componentLoader
* @param {?} orchestratorService
*/
constructor(componentLoader, orchestratorService) {
this.componentLoader = componentLoader;
this.orchestratorService = orchestratorService;
}
/**
* @return {?}
*/
listenForFeedbacks() {
this.orchestratorService.ngOnInit();
this.componentLoader.load(FeedbackButtonComponent);
return this.orchestratorService.onSend;
}
}
NgxFeedbackService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
NgxFeedbackService.ctorParameters = () => [
{ type: ComponentLoaderService },
{ type: OrchestratorService }
];
/** @nocollapse */ NgxFeedbackService.ngInjectableDef = defineInjectable({ factory: function NgxFeedbackService_Factory() { return new NgxFeedbackService(inject(ComponentLoaderService), inject(OrchestratorService)); }, token: NgxFeedbackService, providedIn: "root" });
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class ButtonComponent {
constructor() {
this.click = new EventEmitter();
}
/**
* @return {?}
*/
ngOnInit() { }
/**
* @return {?}
*/
onClick() {
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 = () => [];
ButtonComponent.propDecorators = {
click: [{ type: Output }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class StarComponent {
constructor() {
this.click = new EventEmitter();
}
/**
* @return {?}
*/
ngOnInit() { }
/**
* @return {?}
*/
onClick() {
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 = () => [];
StarComponent.propDecorators = {
type: [{ type: Input }],
click: [{ type: Output }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class StarVoteComponent {
constructor() {
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 {?}
*/
ngOnInit() { }
/**
* @param {?} index
* @return {?}
*/
onClick(index) {
this.stars.forEach((/**
* @param {?} s
* @param {?} i
* @return {?}
*/
(s, i) => {
if (i <= index) {
s.type = 'full';
}
else {
s.type = 'empty';
}
}));
this.voted.emit(index + 1);
}
/**
* @param {?} index
* @return {?}
*/
onMouseEnter(index) {
this.stars.forEach((/**
* @param {?} s
* @param {?} i
* @return {?}
*/
(s, i) => {
if (i <= index && s.type !== 'full') {
s.type = 'temp';
}
}));
}
/**
* @param {?} index
* @return {?}
*/
onMouseLeave(index) {
this.stars.forEach((/**
* @param {?} s
* @param {?} i
* @return {?}
*/
(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 = () => [];
StarVoteComponent.propDecorators = {
voted: [{ type: Output }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class 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: []
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class 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