-
+
@@ -42,8 +52,8 @@
-
-
-
+
+
+
diff --git a/src/app/feedback/feedback-dialog/feedback-dialog.component.ts b/projects/ngx-md-feedback/src/lib/feedback-dialog/feedback-dialog.component.ts
similarity index 83%
rename from src/app/feedback/feedback-dialog/feedback-dialog.component.ts
rename to projects/ngx-md-feedback/src/lib/feedback-dialog/feedback-dialog.component.ts
index 7beb231..2829214 100644
--- a/src/app/feedback/feedback-dialog/feedback-dialog.component.ts
+++ b/projects/ngx-md-feedback/src/lib/feedback-dialog/feedback-dialog.component.ts
@@ -1,13 +1,16 @@
-import {from, fromEvent as observableFromEvent, Observable, Subscription} from 'rxjs';
+import { fromEvent as observableFromEvent, Observable, Subscription } from 'rxjs';
-import {takeUntil, finalize, map, mergeMap, timeout, skipWhile, filter, scan, first} from 'rxjs/operators';
-import {Component, AfterViewInit, ViewChild, ElementRef, ChangeDetectorRef, HostListener, Renderer2} from '@angular/core';
-import {MatDialogRef} from '@angular/material';
-import {Feedback} from '../entity/feedback';
-import {FeedbackService} from '../feedback.service';
+import { finalize, map, mergeMap, takeUntil } from 'rxjs/operators';
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, HostListener, Inject, ViewChild } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { Feedback } from '../entity/feedback';
+import { FeedbackInternalService } from '../feedback.service';
-import {Rectangle} from '../entity/rectangle';
-import {element} from 'protractor';
+import { Rectangle } from '../entity/rectangle';
+
+export interface FeedbackDialogData {
+ descriptionRequired: boolean;
+}
@Component({
selector: 'feedback-dialog',
@@ -38,13 +41,20 @@ export class FeedbackDialogComponent implements AfterViewInit {
private autoDrawRect$: Subscription;
public isDrawingRect: boolean = false;
+ public descriptionRequired: boolean = false;
+
constructor(public dialogRef: MatDialogRef
,
- private feedbackService: FeedbackService,
+ @Inject(MAT_DIALOG_DATA) public data: FeedbackDialogData,
+ private feedbackService: FeedbackInternalService,
private detector: ChangeDetectorRef,
private el: ElementRef) {
this.feedback = new Feedback();
this.feedback.description = '';
this.vars = this.feedbackService.initialVariables;
+ if (this.vars['description']) {
+ this.feedback.description = this.vars['description'];
+ }
+ this.descriptionRequired = this.data.descriptionRequired;
}
public ngAfterViewInit() {
@@ -63,11 +73,6 @@ export class FeedbackDialogComponent implements AfterViewInit {
}
});
- this.dialogRef.afterClosed().subscribe((sendNow) => {
- if (sendNow === true) {
- this.feedbackService.setFeedback(this.feedback);
- }
- });
this.feedbackService.showBackDrop();
}
@@ -99,12 +104,16 @@ export class FeedbackDialogComponent implements AfterViewInit {
this.destroyCanvasListeners();
this.showToolbar = false;
this.detector.detectChanges();
- this.feedbackService.initScreenshotCanvas();
+ this.feedbackService.initScreenshotCanvas({});
} else {
this.startDraw(manipulation);
}
}
+ public onSend() {
+ this.dialogRef.close(this.feedback);
+ }
+
public startDraw(color: string) {
this.drawColor = color;
}
@@ -122,7 +131,9 @@ export class FeedbackDialogComponent implements AfterViewInit {
}
private appendScreenshot() {
- if (this.screenshotParent) { this.screenshotParent.nativeElement.appendChild(this.screenshotEle); }
+ if (this.screenshotParent) {
+ this.screenshotParent.nativeElement.appendChild(this.screenshotEle);
+ }
}
private initBackgroundCanvas() {
@@ -170,9 +181,9 @@ export class FeedbackDialogComponent implements AfterViewInit {
private addCanvasListeners(): void {
const mouseUp = observableFromEvent(document.documentElement, 'mouseup'),
- mouseMove = observableFromEvent(document.documentElement, 'mousemove'),
- mouseDown = observableFromEvent(document.documentElement, 'mousedown'),
- scroll = observableFromEvent(window, 'scroll');
+ mouseMove = observableFromEvent(document.documentElement, 'mousemove'),
+ mouseDown = observableFromEvent(document.documentElement, 'mousedown'),
+ scroll = observableFromEvent(window, 'scroll');
this.manuallyDrawRect(mouseDown, mouseMove, mouseUp);
this.autoDrawRect(mouseMove);
@@ -183,7 +194,7 @@ export class FeedbackDialogComponent implements AfterViewInit {
scroll.subscribe(
event => {
const currentWindowScrollX = window.scrollX,
- currentWindowScrollY = window.scrollY;
+ currentWindowScrollY = window.scrollY;
this.rectangles.forEach(rect => {
rect.startY = rect.startY - (currentWindowScrollY - rect.windowScrollY);
rect.startX = rect.startX - (currentWindowScrollX - rect.windowScrollX);
@@ -197,13 +208,19 @@ export class FeedbackDialogComponent implements AfterViewInit {
}
private destroyCanvasListeners(): void {
- if (this.manuallyDrawRect$) { this.manuallyDrawRect$.unsubscribe(); }
- if (this.autoDrawRect$) { this.autoDrawRect$.unsubscribe(); }
+ if (this.manuallyDrawRect$) {
+ this.manuallyDrawRect$.unsubscribe();
+ }
+ if (this.autoDrawRect$) {
+ this.autoDrawRect$.unsubscribe();
+ }
}
private manuallyDrawRect(mouseDown: Observable, mouseMove: Observable, mouseUp: Observable): void {
const mouseDrag = mouseDown.pipe(mergeMap((mouseDownEvent: MouseEvent) => {
- if (this.showToolbarTips) { this.showToolbarTips = false; }
+ if (this.showToolbarTips) {
+ this.showToolbarTips = false;
+ }
this.autoDrawRect$.unsubscribe();
this.isDrawingRect = true;
@@ -223,9 +240,11 @@ export class FeedbackDialogComponent implements AfterViewInit {
if (newRectangle.width === undefined || newRectangle.height === undefined ||
newRectangle.width === 0 || newRectangle.height === 0) {
const rect = this.drawTempCanvasRectangle(mouseDownEvent);
- if (rect) { this.rectangles.push(rect); }
+ if (rect) {
+ this.rectangles.push(rect);
+ }
} else {
- // drag to draw rectangle
+ // drag to draw rectangle
if (newRectangle.height < 0) {
newRectangle.startY = newRectangle.startY + newRectangle.height;
newRectangle.height = Math.abs(newRectangle.height);
@@ -271,9 +290,9 @@ export class FeedbackDialogComponent implements AfterViewInit {
private drawTempCanvasRectangle(event: MouseEvent) {
let rectangle: Rectangle = null;
const clientX = event.clientX,
- clientY = event.clientY,
- els = document.elementsFromPoint(clientX, clientY),
- el = els[2];
+ clientY = event.clientY,
+ els = document.elementsFromPoint(clientX, clientY),
+ el = els[2];
if ((!this.isExcludeRect(els)) && el && this.elCouldBeHighlighted.indexOf(el.nodeName.toLowerCase()) > -1) {
rectangle = new Rectangle();
const rect = el.getBoundingClientRect();
@@ -299,7 +318,7 @@ export class FeedbackDialogComponent implements AfterViewInit {
}
private isExcludeRect(elements: Element[]): boolean {
- const result = elements.some( el => {
+ const result = elements.some(el => {
return el.getAttribute('exclude-rect') === 'true';
});
return result;
diff --git a/src/app/feedback/feedback-rectangle/feedback-rectangle.component.css b/projects/ngx-md-feedback/src/lib/feedback-rectangle/feedback-rectangle.component.css
similarity index 100%
rename from src/app/feedback/feedback-rectangle/feedback-rectangle.component.css
rename to projects/ngx-md-feedback/src/lib/feedback-rectangle/feedback-rectangle.component.css
diff --git a/src/app/feedback/feedback-rectangle/feedback-rectangle.component.html b/projects/ngx-md-feedback/src/lib/feedback-rectangle/feedback-rectangle.component.html
similarity index 100%
rename from src/app/feedback/feedback-rectangle/feedback-rectangle.component.html
rename to projects/ngx-md-feedback/src/lib/feedback-rectangle/feedback-rectangle.component.html
diff --git a/src/app/feedback/feedback-rectangle/feedback-rectangle.component.ts b/projects/ngx-md-feedback/src/lib/feedback-rectangle/feedback-rectangle.component.ts
similarity index 86%
rename from src/app/feedback/feedback-rectangle/feedback-rectangle.component.ts
rename to projects/ngx-md-feedback/src/lib/feedback-rectangle/feedback-rectangle.component.ts
index 0a66ed6..db2420b 100644
--- a/src/app/feedback/feedback-rectangle/feedback-rectangle.component.ts
+++ b/projects/ngx-md-feedback/src/lib/feedback-rectangle/feedback-rectangle.component.ts
@@ -1,6 +1,6 @@
import {Component, EventEmitter, HostListener, Input, Output} from '@angular/core';
import {Rectangle} from '../entity/rectangle';
-import {FeedbackService} from '../feedback.service';
+import {FeedbackInternalService} from '../feedback.service';
@Component({
selector: 'feedback-rectangle',
@@ -17,7 +17,7 @@ export class FeedbackRectangleComponent {
public close = new EventEmitter();
public showCloseTag: boolean = false;
- constructor(public feedbackService: FeedbackService) {
+ constructor(public feedbackService: FeedbackInternalService) {
}
@HostListener('mouseenter')
diff --git a/src/app/feedback/feedback-toolbar/feedback-toolbar.component.css b/projects/ngx-md-feedback/src/lib/feedback-toolbar/feedback-toolbar.component.css
similarity index 96%
rename from src/app/feedback/feedback-toolbar/feedback-toolbar.component.css
rename to projects/ngx-md-feedback/src/lib/feedback-toolbar/feedback-toolbar.component.css
index 5a323b3..d7c8bd8 100644
--- a/src/app/feedback/feedback-toolbar/feedback-toolbar.component.css
+++ b/projects/ngx-md-feedback/src/lib/feedback-toolbar/feedback-toolbar.component.css
@@ -21,14 +21,14 @@
}
.move-toolbar {
- cursor: -webkit-grab;
+ cursor: grab;
height: 56px;
padding: 0px 12px;
position: relative;
}
.move-toolbar:active {
- cursor: -webkit-grabbing;
+ cursor: grabbing;
}
.toggle {
diff --git a/src/app/feedback/feedback-toolbar/feedback-toolbar.component.html b/projects/ngx-md-feedback/src/lib/feedback-toolbar/feedback-toolbar.component.html
similarity index 100%
rename from src/app/feedback/feedback-toolbar/feedback-toolbar.component.html
rename to projects/ngx-md-feedback/src/lib/feedback-toolbar/feedback-toolbar.component.html
diff --git a/src/app/feedback/feedback-toolbar/feedback-toolbar.component.ts b/projects/ngx-md-feedback/src/lib/feedback-toolbar/feedback-toolbar.component.ts
similarity index 95%
rename from src/app/feedback/feedback-toolbar/feedback-toolbar.component.ts
rename to projects/ngx-md-feedback/src/lib/feedback-toolbar/feedback-toolbar.component.ts
index 6ad625b..ebc5a7a 100644
--- a/src/app/feedback/feedback-toolbar/feedback-toolbar.component.ts
+++ b/projects/ngx-md-feedback/src/lib/feedback-toolbar/feedback-toolbar.component.ts
@@ -2,7 +2,7 @@ import {fromEvent as observableFromEvent} from 'rxjs';
import {takeUntil, finalize, map, mergeMap} from 'rxjs/operators';
import {Component, ElementRef, Input, Output, EventEmitter, AfterViewInit, ViewChild, OnChanges} from '@angular/core';
-import {FeedbackService} from '../feedback.service';
+import {FeedbackInternalService} from '../feedback.service';
@Component({
@@ -17,13 +17,13 @@ export class FeedbackToolbarComponent implements AfterViewInit, OnChanges {
@Output()
public manipulate = new EventEmitter();
public disableToolbarTips = false;
- @ViewChild('toggleMove')
+ @ViewChild('toggleMove', { static: true })
private toggleMoveBtn: ElementRef;
public isSwitch = false;
public isDragging = false;
public vars: object = {};
- constructor(public el: ElementRef, private feedbackService: FeedbackService) {
+ constructor(public el: ElementRef, private feedbackService: FeedbackInternalService) {
this.vars = feedbackService.initialVariables;
}
diff --git a/projects/ngx-md-feedback/src/lib/feedback.directive.ts b/projects/ngx-md-feedback/src/lib/feedback.directive.ts
new file mode 100644
index 0000000..6e0afdc
--- /dev/null
+++ b/projects/ngx-md-feedback/src/lib/feedback.directive.ts
@@ -0,0 +1,93 @@
+import { Directive, HostListener, EventEmitter, Output, Input, OnInit, Self, OnChanges, SimpleChanges } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { FeedbackDialogComponent } from './feedback-dialog/feedback-dialog.component';
+import { FeedbackInternalService } from './feedback.service';
+import { Overlay } from '@angular/cdk/overlay';
+import { Feedback } from './entity/feedback';
+
+export class SendResultFeedback extends Feedback {
+ success?: boolean;
+ error?: string;
+}
+
+@Directive({
+ selector: '[feedback]'
+})
+export class FeedbackDirective implements OnInit, OnChanges {
+ private overlay: Overlay;
+ @Input() title: string = 'Send feedback';
+ @Input() placeholder: string = 'Describe your issue or share your ideas';
+ @Input() editTip = 'Click to highlight or hide info';
+ @Input() checkboxLabel = 'Include screenshot';
+ @Input() cancelLabel = 'CANCEL';
+ @Input() sendLabel = 'SEND';
+ @Input() moveToolbarTip = 'move toolbar';
+ @Input() drawRectTip = 'Draw using yellow to highlight issues or black to hide sensitive info';
+ @Input() highlightTip = 'highlight issues';
+ @Input() hideTip = 'hide sensitive info';
+ @Input() editDoneLabel = 'DONE';
+ @Input() descriptionRequired: boolean = false;
+ @Input() description: string;
+ // Whether to allow cross-origin images to taint the canvas
+ @Input() allowTaint: boolean = false;
+ @Output() public send = new EventEmitter>();
+
+ public constructor(private dialogRef: MatDialog, private feedbackService: FeedbackInternalService, overlay: Overlay) {
+ this.overlay = overlay;
+ }
+
+ @HostListener('click')
+ public onClick() {
+ this.openFeedbackDialog();
+ }
+
+ public openFeedbackDialog() {
+ this.feedbackService.initScreenshotCanvas({ allowTaint: this.allowTaint });
+ const dialogRef = this.dialogRef.open(FeedbackDialogComponent, {
+ panelClass: 'feedbackDialog',
+ backdropClass: 'dialogBackDrop',
+ disableClose: true,
+ height: 'auto',
+ width: 'auto',
+ data: {
+ descriptionRequired: this.descriptionRequired
+ },
+ scrollStrategy: this.overlay.scrollStrategies.reposition()
+ });
+
+ dialogRef.afterClosed().subscribe((result) => {
+ if (!result) {
+ // Cancel clicked
+ this.send.emit({
+ error: 'dialog_canceled'
+ });
+ } else {
+ this.send.emit(result);
+ }
+ });
+ }
+
+ ngOnInit(): void {
+ this.feedbackService.initialVariables = {
+ title: this.title,
+ placeholder: this.placeholder,
+ editTip: this.editTip,
+ checkboxLabel: this.checkboxLabel,
+ cancelLabel: this.cancelLabel,
+ sendLabel: this.sendLabel,
+ moveToolbarTip: this.moveToolbarTip,
+ drawRectTip: this.drawRectTip,
+ highlightTip: this.highlightTip,
+ hideTip: this.hideTip,
+ editDoneLabel: this.editDoneLabel,
+ description: this.description
+ };
+ }
+
+ ngOnChanges(changes: SimpleChanges): void {
+ if (changes['description']) {
+ this.feedbackService.initialVariables['description'] = changes['description'].currentValue;
+ }
+ }
+
+}
diff --git a/src/app/feedback/feedback.service.ts b/projects/ngx-md-feedback/src/lib/feedback.service.ts
similarity index 63%
rename from src/app/feedback/feedback.service.ts
rename to projects/ngx-md-feedback/src/lib/feedback.service.ts
index 606eeeb..8a46273 100644
--- a/src/app/feedback/feedback.service.ts
+++ b/projects/ngx-md-feedback/src/lib/feedback.service.ts
@@ -1,53 +1,52 @@
-import {Injectable} from '@angular/core';
+import { Injectable } from '@angular/core';
import html2canvas from 'html2canvas';
-import {Subject, Observable} from 'rxjs';
-import {Feedback} from './entity/feedback'; // import Observable to solve build issue
+import { Subject, Observable } from 'rxjs';
@Injectable()
-export class FeedbackService {
+export class FeedbackInternalService {
public initialVariables: object = {};
public highlightedColor = 'yellow';
public hiddenColor = 'black';
private screenshotCanvasSource = new Subject();
public screenshotCanvas$: Observable = this.screenshotCanvasSource.asObservable();
- private feedbackSource = new Subject();
- public feedback$: Observable = this.feedbackSource.asObservable();
-
private isDraggingToolbarSource = new Subject();
public isDraggingToolbar$: Observable = this.isDraggingToolbarSource.asObservable();
- public initScreenshotCanvas() {
- const that = this;
- const body = document.body;
- html2canvas(body, {
- logging: false,
- width: document.documentElement.clientWidth,
- height: document.documentElement.clientHeight,
- x: document.documentElement.scrollLeft,
- y: document.documentElement.scrollTop,
- allowTaint : true
- }).then(bodyCanvas => {
- this.screenshotCanvasSource.next(bodyCanvas);
- });
+ public initScreenshotCanvas(options: {
+ allowTaint?: boolean,
+ useCORS?: boolean
+ }) {
+ setTimeout(() => {
+ const body = document.body;
+ html2canvas(body, {
+ logging: false,
+ width: document.documentElement.clientWidth,
+ height: document.documentElement.clientHeight,
+ x: document.documentElement.scrollLeft,
+ y: document.documentElement.scrollTop,
+ allowTaint: options.allowTaint || false,
+ useCORS: options.useCORS || false
+
+ }).then(bodyCanvas => {
+ this.screenshotCanvasSource.next(bodyCanvas);
+ });
+ }, 100);
+
}
public setCanvas(canvas: HTMLCanvasElement): void {
this.screenshotCanvasSource.next(canvas);
}
- public setFeedback(feedback: Feedback): void {
- this.feedbackSource.next(feedback);
- }
-
public setIsDraggingToolbar(isDragging: boolean): void {
this.isDraggingToolbarSource.next(isDragging);
}
public getImgEle(canvas): HTMLElement {
const img = canvas.toDataURL('image/png'),
- imageEle = document.createElement('img');
+ imageEle = document.createElement('img');
imageEle.setAttribute('src', img);
Object.assign(imageEle.style, {
position: 'absolute',
@@ -59,6 +58,7 @@ export class FeedbackService {
maxWidth: '100%',
transform: 'translateY(-50%)'
});
+ imageEle.crossOrigin = 'Anonymous';
return imageEle;
}
diff --git a/projects/ngx-md-feedback/src/lib/ngx-md-feedback.module.ts b/projects/ngx-md-feedback/src/lib/ngx-md-feedback.module.ts
new file mode 100644
index 0000000..c0096bd
--- /dev/null
+++ b/projects/ngx-md-feedback/src/lib/ngx-md-feedback.module.ts
@@ -0,0 +1,48 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { FeedbackDialogComponent } from './feedback-dialog/feedback-dialog.component';
+import { FeedbackToolbarComponent } from './feedback-toolbar/feedback-toolbar.component';
+import { FeedbackRectangleComponent } from './feedback-rectangle/feedback-rectangle.component';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { FeedbackInternalService } from './feedback.service';
+import { FeedbackDirective } from './feedback.directive';
+
+@NgModule({
+ declarations: [
+ FeedbackDialogComponent,
+ FeedbackToolbarComponent,
+ FeedbackRectangleComponent,
+ FeedbackDirective
+ ],
+ imports: [
+ MatDialogModule,
+ MatButtonModule,
+ MatIconModule,
+ MatInputModule,
+ MatTooltipModule,
+ CommonModule,
+ FormsModule,
+ MatCheckboxModule,
+ MatProgressSpinnerModule
+ ],
+ exports: [
+ FeedbackDirective,
+ FeedbackDialogComponent
+ ],
+ entryComponents: [
+ FeedbackDialogComponent
+ ],
+ providers: [
+ FeedbackInternalService,
+ { provide: MatDialogRef, useValue: {} }
+ ]
+})
+export class NgxMdFeedbackModule {
+}
diff --git a/projects/ngx-md-feedback/src/public_api.ts b/projects/ngx-md-feedback/src/public_api.ts
new file mode 100644
index 0000000..e1a4bdb
--- /dev/null
+++ b/projects/ngx-md-feedback/src/public_api.ts
@@ -0,0 +1,8 @@
+/*
+ * Public API Surface of ngx-md-feedback
+ */
+
+export * from './lib/feedback.directive';
+export * from './lib/feedback.service';
+export * from './lib/feedback-dialog/feedback-dialog.component';
+export * from './lib/ngx-md-feedback.module';
diff --git a/projects/ngx-md-feedback/src/test.ts b/projects/ngx-md-feedback/src/test.ts
new file mode 100644
index 0000000..f86d21f
--- /dev/null
+++ b/projects/ngx-md-feedback/src/test.ts
@@ -0,0 +1,23 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+ BrowserDynamicTestingModule,
+ platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+ BrowserDynamicTestingModule,
+ platformBrowserDynamicTesting(), {
+ teardown: { destroyAfterEach: false }
+ }
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/projects/ngx-md-feedback/tsconfig.lib.json b/projects/ngx-md-feedback/tsconfig.lib.json
new file mode 100644
index 0000000..eda3c15
--- /dev/null
+++ b/projects/ngx-md-feedback/tsconfig.lib.json
@@ -0,0 +1,26 @@
+{
+ "extends": "../../tsconfig.json",
+ "compilerOptions": {
+ "outDir": "../../out-tsc/lib",
+ "target": "es2015",
+ "declaration": true,
+ "declarationMap": true,
+ "sourceMap": true,
+ "inlineSources": true,
+ "emitDecoratorMetadata": true,
+ "experimentalDecorators": true,
+ "importHelpers": true,
+ "types": []
+ },
+ "angularCompilerOptions": {
+ "skipTemplateCodegen": true,
+ "strictMetadataEmit": true,
+ "fullTemplateTypeCheck": true,
+ "strictInjectionParameters": true,
+ "enableResourceInlining": true
+ },
+ "exclude": [
+ "src/test.ts",
+ "**/*.spec.ts"
+ ]
+}
diff --git a/projects/ngx-md-feedback/tsconfig.lib.prod.json b/projects/ngx-md-feedback/tsconfig.lib.prod.json
new file mode 100644
index 0000000..f8edd63
--- /dev/null
+++ b/projects/ngx-md-feedback/tsconfig.lib.prod.json
@@ -0,0 +1,6 @@
+{
+ "extends": "./tsconfig.lib.json",
+ "angularCompilerOptions": {
+ "enableIvy": true
+ }
+}
diff --git a/projects/ngx-md-feedback/tsconfig.spec.json b/projects/ngx-md-feedback/tsconfig.spec.json
new file mode 100644
index 0000000..16da33d
--- /dev/null
+++ b/projects/ngx-md-feedback/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+ "extends": "../../tsconfig.json",
+ "compilerOptions": {
+ "outDir": "../../out-tsc/spec",
+ "types": [
+ "jasmine",
+ "node"
+ ]
+ },
+ "files": [
+ "src/test.ts"
+ ],
+ "include": [
+ "**/*.spec.ts",
+ "**/*.d.ts"
+ ]
+}
diff --git a/projects/ngx-md-feedback/tslint.json b/projects/ngx-md-feedback/tslint.json
new file mode 100644
index 0000000..73f120b
--- /dev/null
+++ b/projects/ngx-md-feedback/tslint.json
@@ -0,0 +1,17 @@
+{
+ "extends": "../../tslint.json",
+ "rules": {
+ "directive-selector": [
+ true,
+ "attribute",
+ "lib",
+ "camelCase"
+ ],
+ "component-selector": [
+ true,
+ "element",
+ "lib",
+ "kebab-case"
+ ]
+ }
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 0969d69..35d1c32 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -10,18 +10,21 @@ Here are some links to help you start:
-
-
-
-
-
-
-