[ACS-6251] remove dead code and imports from insights (#9059)

* remove dead code and imports from insights

* [ci:force] base class to reduce code duplications

* [ci:force] reduce code by introducing base class

* [ci:force] fix import paths

* [ci:force] fix types

* [ci:force] remove pdf from insights unit tests

* [ci:force] improve test performance

* remove obsolete mock file

* remove deleted export

lib/insights/karma.conf.js

@@ -8,37 +8,22 @@ module.exports = function (config) {
         basePath: '../../',
 
         files: [
-            {pattern: 'node_modules/tslib/tslib.js', included: true, watched: false},
+            { pattern: 'node_modules/chart.js/dist/Chart.js', included: true, watched: false },
-
+            { pattern: 'node_modules/raphael/raphael.min.js', included: true, watched: false },
-            // pdf-js
-            {pattern: 'node_modules/pdfjs-dist/build/pdf.js', included: true, watched: false},
-            {pattern: 'node_modules/pdfjs-dist/build/pdf.worker.js', included: true, watched: false},
-            {pattern: 'node_modules/pdfjs-dist/web/pdf_viewer.js', included: true, watched: false},
-
-            {
-                pattern: 'node_modules/@angular/material/prebuilt-themes/indigo-pink.css',
-                included: true,
-                watched: false
-            },
-
-            {pattern: 'node_modules/chart.js/dist/Chart.js', included: true, watched: false},
-            {pattern: 'node_modules/raphael/raphael.min.js', included: true, watched: false},
             {
                 pattern: 'node_modules/ng2-charts/bundles/ng2-charts.umd.js',
                 included: false,
                 served: true,
                 watched: false
             },
-
+            { pattern: 'lib/insights/src/lib/i18n/**/en.json', included: false, served: true, watched: false },
-            {pattern: 'lib/insights/src/lib/i18n/**/en.json', included: false, served: true, watched: false},
+            { pattern: 'lib/config/app.config.json', included: false, served: true, watched: false }
-            {pattern: 'lib/insights/**/*.ts', included: false, served: true, watched: false},
-            {pattern: 'lib/config/app.config.json', included: false, served: true, watched: false},
         ],
 
         frameworks: ['jasmine-ajax', 'jasmine', '@angular-devkit/build-angular'],
 
         proxies: {
-            '/base/assets/' :'/base/lib/insights/src/lib/assets/',
+            '/base/assets/': '/base/lib/insights/src/lib/assets/',
             '/assets/adf-insights/i18n/en.json': '/base/lib/insights/src/lib/i18n/en.json',
             '/app.config.json': '/base/lib/config/app.config.json'
         },
@@ -60,7 +45,7 @@ module.exports = function (config) {
         },
 
         jasmineHtmlReporter: {
-            suppressAll: true, // removes the duplicated traces
+            suppressAll: true // removes the duplicated traces
         },
 
         coverageReporter: {
@@ -80,12 +65,7 @@ module.exports = function (config) {
         customLaunchers: {
             ChromeHeadless: {
                 base: 'Chrome',
-                flags: [
+                flags: ['--no-sandbox', '--headless', '--disable-gpu', '--remote-debugging-port=9222']
-                    '--no-sandbox',
-                    '--headless',
-                    '--disable-gpu',
-                    '--remote-debugging-port=9222'
-                ]
             }
         },
 

lib/insights/src/lib/analytics-process/components/analytics-generator.component.spec.ts

@@ -27,16 +27,12 @@ import { TranslateModule } from '@ngx-translate/core';
 declare let jasmine: any;
 
 describe('AnalyticsGeneratorComponent', () => {
-
     let component: any;
     let fixture: ComponentFixture<AnalyticsGeneratorComponent>;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [
+            imports: [TranslateModule.forRoot(), InsightsTestingModule]
-                TranslateModule.forRoot(),
-                InsightsTestingModule
-            ]
         });
         fixture = TestBed.createComponent(AnalyticsGeneratorComponent);
         component = fixture.componentInstance;
@@ -59,13 +55,21 @@ describe('AnalyticsGeneratorComponent', () => {
             expect(res[0].type).toEqual('table');
             expect(res[0].datasets).toBeDefined();
             expect(res[0].datasets.length).toEqual(4);
-            expect(res[0].datasets[0][0]).toEqual('__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-TOTAL-PROCESS-DEFINITIONS');
+            expect(res[0].datasets[0][0]).toEqual(
+                '__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-TOTAL-PROCESS-DEFINITIONS'
+            );
             expect(res[0].datasets[0][1]).toEqual('9');
-            expect(res[0].datasets[1][0]).toEqual('__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-TOTAL-PROCESS-INSTANCES');
+            expect(res[0].datasets[1][0]).toEqual(
+                '__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-TOTAL-PROCESS-INSTANCES'
+            );
             expect(res[0].datasets[1][1]).toEqual('41');
-            expect(res[0].datasets[2][0]).toEqual('__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-ACTIVE-PROCESS-INSTANCES');
+            expect(res[0].datasets[2][0]).toEqual(
+                '__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-ACTIVE-PROCESS-INSTANCES'
+            );
             expect(res[0].datasets[2][1]).toEqual('3');
-            expect(res[0].datasets[3][0]).toEqual('__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-COMPLETED-PROCESS-INSTANCES');
+            expect(res[0].datasets[3][0]).toEqual(
+                '__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-COMPLETED-PROCESS-INSTANCES'
+            );
             expect(res[0].datasets[3][1]).toEqual('38');
 
             expect(res[1]).toBeDefined();
@@ -78,7 +82,7 @@ describe('AnalyticsGeneratorComponent', () => {
         });
 
         component.reportId = 1001;
-        component.reportParamQuery = new ReportQuery({status: 'All'});
+        component.reportParamQuery = new ReportQuery({ status: 'All' });
         component.ngOnChanges();
 
         fixture.detectChanges();
@@ -101,13 +105,21 @@ describe('AnalyticsGeneratorComponent', () => {
             expect(res[0].type).toEqual('table');
             expect(res[0].datasets).toBeDefined();
             expect(res[0].datasets.length).toEqual(4);
-            expect(res[0].datasets[0][0]).toEqual('__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-TOTAL-PROCESS-DEFINITIONS');
+            expect(res[0].datasets[0][0]).toEqual(
+                '__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-TOTAL-PROCESS-DEFINITIONS'
+            );
             expect(res[0].datasets[0][1]).toEqual('9');
-            expect(res[0].datasets[1][0]).toEqual('__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-TOTAL-PROCESS-INSTANCES');
+            expect(res[0].datasets[1][0]).toEqual(
+                '__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-TOTAL-PROCESS-INSTANCES'
+            );
             expect(res[0].datasets[1][1]).toEqual('41');
-            expect(res[0].datasets[2][0]).toEqual('__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-ACTIVE-PROCESS-INSTANCES');
+            expect(res[0].datasets[2][0]).toEqual(
+                '__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-ACTIVE-PROCESS-INSTANCES'
+            );
             expect(res[0].datasets[2][1]).toEqual('3');
-            expect(res[0].datasets[3][0]).toEqual('__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-COMPLETED-PROCESS-INSTANCES');
+            expect(res[0].datasets[3][0]).toEqual(
+                '__KEY_REPORTING.DEFAULT-REPORTS.PROCESS-DEFINITION-OVERVIEW.GENERAL-TABLE-COMPLETED-PROCESS-INSTANCES'
+            );
             expect(res[0].datasets[3][1]).toEqual('38');
 
             expect(res[1]).toBeDefined();
@@ -120,7 +132,7 @@ describe('AnalyticsGeneratorComponent', () => {
         });
 
         component.reportId = 1001;
-        component.reportParamQuery = new ReportQuery({status: 'All'});
+        component.reportParamQuery = new ReportQuery({ status: 'All' });
         component.ngOnChanges();
 
         fixture.detectChanges();
@@ -192,7 +204,7 @@ describe('AnalyticsGeneratorComponent', () => {
         });
 
         component.reportId = 1;
-        component.reportParamQuery = new ReportQuery({status: 'All'});
+        component.reportParamQuery = new ReportQuery({ status: 'All' });
         component.ngOnChanges();
 
         fixture.detectChanges();
@@ -206,17 +218,16 @@ describe('AnalyticsGeneratorComponent', () => {
         });
     });
 
-    it('Should reset the reports when the onChanged is call', () => {
+    it('Should reset the reports when the onChanged is call', async () => {
-        component.reports = [new Chart({id: 'fake', type: 'fake-type'})];
+        component.reports = [new Chart({ id: 'fake', type: 'fake-type' })];
         component.reportId = 1;
         component.ngOnChanges();
 
         fixture.detectChanges();
+        await fixture.whenStable();
 
-        fixture.whenStable().then(() => {
         expect(component.reports).toBeUndefined();
     });
-    });
 
     it('Should emit onError event with a 404 response ', (done) => {
         component.error.subscribe((err) => {
@@ -225,7 +236,7 @@ describe('AnalyticsGeneratorComponent', () => {
         });
 
         component.reportId = 1;
-        component.reportParamQuery = new ReportQuery({status: 'All'});
+        component.reportParamQuery = new ReportQuery({ status: 'All' });
         component.ngOnChanges();
 
         fixture.detectChanges();

lib/insights/src/lib/analytics-process/components/analytics-generator.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, EventEmitter, Input, OnChanges, Output, ViewEncapsulation } from '@angular/core';
+import { Component, EventEmitter, inject, Input, OnChanges, Output, ViewEncapsulation } from '@angular/core';
 import { ReportQuery } from '../../diagram/models/report/report-query.model';
 import { Chart } from '../../diagram/models/chart/chart.model';
 import { AnalyticsService } from '../services/analytics.service';
@@ -27,6 +27,7 @@ import { AnalyticsService } from '../services/analytics.service';
     encapsulation: ViewEncapsulation.None
 })
 export class AnalyticsGeneratorComponent implements OnChanges {
+    private analyticsService = inject(AnalyticsService);
 
     /** reportId. */
     @Input()
@@ -38,7 +39,7 @@ export class AnalyticsGeneratorComponent implements OnChanges {
 
     /** success. */
     @Output()
-    success = new EventEmitter();
+    success = new EventEmitter<Chart[]>();
 
     /** error. */
     @Output()
@@ -52,23 +53,23 @@ export class AnalyticsGeneratorComponent implements OnChanges {
     public barChartOptions: any = {
         responsive: true,
         scales: {
-            yAxes: [{
+            yAxes: [
+                {
                     ticks: {
                         beginAtZero: true,
                         stepSize: 1
                     }
-            }],
+                }
-            xAxes: [{
+            ],
-                ticks: {
+            xAxes: [
-                },
+                {
+                    ticks: {},
                     stacked: true
-            }]
+                }
+            ]
         }
     };
 
-    constructor(private analyticsService: AnalyticsService) {
-    }
-
     ngOnChanges() {
         if (this.reportId && this.reportParamQuery) {
             this.generateReport(this.reportId, this.reportParamQuery);
@@ -77,9 +78,9 @@ export class AnalyticsGeneratorComponent implements OnChanges {
         }
     }
 
-    public generateReport(reportId: string, reportParamQuery: any) {
+    public generateReport(reportId: string, reportParamQuery: ReportQuery) {
         if (reportParamQuery === undefined || reportParamQuery === null) {
-            reportParamQuery = {};
+            reportParamQuery = new ReportQuery();
         }
         this.analyticsService.getReportsByParams(reportId, reportParamQuery).subscribe(
             (res) => {
@@ -101,7 +102,7 @@ export class AnalyticsGeneratorComponent implements OnChanges {
         }
     }
 
-    public refresh(report): void {
+    public refresh(report: Chart): void {
         /**
          * (My guess), for Angular to recognize the change in the dataset
          * it has to change the dataset variable directly,

lib/insights/src/lib/analytics-process/components/analytics-report-heat-map.component.ts

@@ -18,20 +18,20 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { AnalyticsService } from '../services/analytics.service';
+import { ParameterValueModel } from '../../diagram/models/report/parameter-value.model';
 
 @Component({
     selector: 'adf-analytics-report-heat-map, analytics-report-heat-map',
     templateUrl: './analytics-report-heat-map.component.html'
 })
 export class AnalyticsReportHeatMapComponent implements OnInit {
-
     /** reportId. */
     @Input()
     report: any;
 
     /** success. */
     @Output()
-    success = new EventEmitter();
+    success = new EventEmitter<ParameterValueModel[]>();
 
     /** error. */
     @Output()
@@ -44,21 +44,17 @@ export class AnalyticsReportHeatMapComponent implements  OnInit {
     currentMetricColors: any;
     metricType: string;
 
-    constructor(private analyticsService: AnalyticsService,
+    constructor(private analyticsService: AnalyticsService, private formBuilder: UntypedFormBuilder) {}
-                private formBuilder: UntypedFormBuilder) {
-    }
 
     ngOnInit() {
         this.initForm();
         this.field.id = 'metrics';
         this.field.value = 'totalCount';
 
-        this.analyticsService.getMetricValues().subscribe(
+        this.analyticsService.getMetricValues().subscribe((opts) => {
-            (opts: any[]) => {
             this.field.options = opts;
             this.success.emit(opts);
-            }
+        });
-        );
     }
 
     onMetricChanges(field: any) {
@@ -86,13 +82,10 @@ export class AnalyticsReportHeatMapComponent implements  OnInit {
     }
 
     hasMetric(): boolean {
-        return !!(this.report.totalCountsPercentages ||
+        return !!(this.report.totalCountsPercentages || this.report.totalTimePercentages || this.report.avgTimePercentages);
-            this.report.totalTimePercentages ||
-            this.report.avgTimePercentages);
     }
 
     get metricGroup(): UntypedFormGroup {
         return this.metricForm.controls.metricGroup as UntypedFormGroup;
     }
-
 }

lib/insights/src/lib/analytics-process/components/analytics-report-list.component.spec.ts

@@ -24,7 +24,6 @@ import { TranslateModule } from '@ngx-translate/core';
 declare let jasmine: any;
 
 describe('AnalyticsReportListComponent', () => {
-
     const reportList = [
         { id: 2002, name: 'Fake Test Process definition heat map' },
         { id: 2003, name: 'Fake Test Process definition overview' },
@@ -33,7 +32,7 @@ describe('AnalyticsReportListComponent', () => {
         { id: 2006, name: 'Fake Test Task service level agreement' }
     ];
 
-    const reportSelected = { id: 2003, name: 'Fake Test Process definition overview' };
+    const reportSelected = { id: 2003, name: 'Fake Test Process definition overview' } as ReportParametersModel;
 
     let component: AnalyticsReportListComponent;
     let fixture: ComponentFixture<AnalyticsReportListComponent>;
@@ -41,10 +40,7 @@ describe('AnalyticsReportListComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [
+            imports: [TranslateModule.forRoot(), InsightsTestingModule]
-                TranslateModule.forRoot(),
-                InsightsTestingModule
-            ]
         });
         fixture = TestBed.createComponent(AnalyticsReportListComponent);
         component = fixture.componentInstance;
@@ -52,7 +48,6 @@ describe('AnalyticsReportListComponent', () => {
     });
 
     describe('Rendering tests', () => {
-
         beforeEach(() => {
             jasmine.Ajax.install();
         });
@@ -63,7 +58,6 @@ describe('AnalyticsReportListComponent', () => {
 
         it('Report return true with undefined reports', () => {
             expect(component.isReportsEmpty()).toBeTruthy();
-
         });
 
         it('Report return true with an empty reports', () => {
@@ -203,7 +197,6 @@ describe('AnalyticsReportListComponent', () => {
     });
 
     describe('layout', () => {
-
         it('should display a list by default', () => {
             fixture.detectChanges();
             expect(component.isGrid()).toBe(false);

lib/insights/src/lib/analytics-process/components/analytics-report-list.component.ts

@@ -41,7 +41,7 @@ export class AnalyticsReportListComponent implements OnInit {
 
     /** selectFirst. */
     @Input()
-    selectFirst: boolean = false;
+    selectFirst = false;
 
     /** report Click. */
     @Output()
@@ -49,21 +49,20 @@ export class AnalyticsReportListComponent implements OnInit {
 
     /** success. */
     @Output()
-    success = new EventEmitter();
+    success = new EventEmitter<ReportParametersModel[]>();
 
     /** error. */
     @Output()
     error = new EventEmitter();
 
     report$: Observable<ReportParametersModel>;
-    currentReport: any;
+    currentReport: ReportParametersModel;
     reports: ReportParametersModel[] = [];
 
     private reportObserver: Observer<any>;
 
     constructor(private analyticsService: AnalyticsService) {
-        this.report$ = new Observable<ReportParametersModel>((observer) => this.reportObserver = observer)
+        this.report$ = new Observable<ReportParametersModel>((observer) => (this.reportObserver = observer)).pipe(share());
-            .pipe(share());
     }
 
     ngOnInit() {
@@ -96,7 +95,7 @@ export class AnalyticsReportListComponent implements OnInit {
      */
     getReportList(appId: number, reportId?: number): void {
         this.analyticsService.getReportList(appId).subscribe(
-            (res: ReportParametersModel[]) => {
+            (res) => {
                 if (res && res.length === 0) {
                     this.createDefaultReports();
                 } else {
@@ -122,18 +121,14 @@ export class AnalyticsReportListComponent implements OnInit {
      * Create the default reports and return the report list
      */
     createDefaultReports() {
-        this.analyticsService.createDefaultReports().subscribe(
+        this.analyticsService.createDefaultReports().subscribe(() => {
-            () => {
+            this.analyticsService.getReportList(this.appId).subscribe((response) => {
-                this.analyticsService.getReportList(this.appId).subscribe(
-                    (response: ReportParametersModel[]) => {
                 response.forEach((report) => {
                     this.reportObserver.next(report);
                 });
                 this.success.emit(response);
-                    }
+            });
-                );
+        });
-            }
-        );
     }
 
     /**
@@ -150,7 +145,7 @@ export class AnalyticsReportListComponent implements OnInit {
      *
      * @param report report model
      */
-    selectReport(report: any) {
+    selectReport(report: ReportParametersModel) {
         this.currentReport = report;
         this.reportClick.emit(report);
     }

lib/insights/src/lib/analytics-process/components/analytics-report-parameters.component.ts

@@ -113,7 +113,7 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On
 
     /** hideComponent. */
     @Input()
-    hideComponent: boolean = false;
+    hideComponent = false;
 
     /** success. */
     @Output()
@@ -125,7 +125,7 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On
 
     /** edit. */
     @Output()
-    edit = new EventEmitter();
+    edit = new EventEmitter<string>();
 
     /** form Value Changed. */
     @Output()
@@ -133,11 +133,11 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On
 
     /** save Report Success. */
     @Output()
-    saveReportSuccess = new EventEmitter();
+    saveReportSuccess = new EventEmitter<string>();
 
     /** delete Report Success. */
     @Output()
-    deleteReportSuccess = new EventEmitter();
+    deleteReportSuccess = new EventEmitter<string>();
 
     @ViewChild('reportNameDialog')
     reportNameDialog: any;

lib/insights/src/lib/analytics-process/components/analytics.component.html

@@ -6,7 +6,7 @@
         (formValueChanged)="reset()"
         (success)="showReport($event)"
         (saveReportSuccess)="onSaveReportSuccess($event)"
-        (deleteReportSuccess)="onDeleteReportSuccess()"
+        (deleteReportSuccess)="onDeleteReportSuccess($event)"
         (edit)="onEditReport($event)">
     </adf-analytics-report-parameters>
 

lib/insights/src/lib/analytics-process/components/analytics.component.ts

@@ -26,7 +26,6 @@ import { AnalyticsGeneratorComponent } from './analytics-generator.component';
     encapsulation: ViewEncapsulation.None
 })
 export class AnalyticsComponent implements OnChanges {
-
     /** appId ID of the target app. */
     @Input()
     appId: number;
@@ -37,19 +36,19 @@ export class AnalyticsComponent implements OnChanges {
 
     /** hideParameters. */
     @Input()
-    hideParameters: boolean = false;
+    hideParameters = false;
 
     /** emitted when editReport. */
     @Output()
-    editReport = new EventEmitter();
+    editReport = new EventEmitter<string>();
 
     /** emitted when reportSaved. */
     @Output()
-    reportSaved = new EventEmitter();
+    reportSaved = new EventEmitter<string>();
 
     /** emitted when reportDeleted. */
     @Output()
-    reportDeleted = new EventEmitter();
+    reportDeleted = new EventEmitter<string>();
 
     @ViewChild('analyticsGenerator', { static: true })
     analyticsGenerator: AnalyticsGeneratorComponent;
@@ -60,8 +59,8 @@ export class AnalyticsComponent implements OnChanges {
         this.analyticsGenerator.reset();
     }
 
-    public showReport($event: any) {
+    public showReport(reportQuery: ReportQuery) {
-        this.analyticsGenerator.generateReport(`${this.reportId}`, $event);
+        this.analyticsGenerator.generateReport(`${this.reportId}`, reportQuery);
     }
 
     public reset() {
@@ -72,12 +71,11 @@ export class AnalyticsComponent implements OnChanges {
         this.editReport.emit(name);
     }
 
-    public onSaveReportSuccess(reportId) {
+    public onSaveReportSuccess(reportId: string) {
         this.reportSaved.emit(reportId);
     }
 
-    public onDeleteReportSuccess() {
+    public onDeleteReportSuccess(reportId: string) {
-        this.reportDeleted.emit();
+        this.reportDeleted.emit(reportId);
     }
-
 }

lib/insights/src/lib/analytics-process/components/widgets/checkbox/checkbox.widget.ts

@@ -15,29 +15,21 @@
  * limitations under the License.
  */
 
- /* eslint-disable @angular-eslint/component-selector, @angular-eslint/no-input-rename */
+/* eslint-disable @angular-eslint/component-selector, @angular-eslint/no-input-rename */
 
- import { Component, ElementRef, Input, ViewEncapsulation } from '@angular/core';
+import { Component, Input, ViewEncapsulation } from '@angular/core';
- import { UntypedFormGroup } from '@angular/forms';
+import { UntypedFormGroup } from '@angular/forms';
- import { WidgetComponent } from './../widget.component';
+import { WidgetComponent } from '../widget.component';
 
- @Component({
+@Component({
     selector: 'analytics-checkbox-widget',
     templateUrl: './checkbox.widget.html',
     encapsulation: ViewEncapsulation.None
 })
 export class CheckboxWidgetAnalyticsComponent extends WidgetComponent {
-
-    @Input()
-    field: any;
-
     @Input('group')
     public formGroup: UntypedFormGroup;
 
     @Input('controllerName')
     public controllerName: string;
-
-    constructor(public elementRef: ElementRef) {
-        super();
-    }
 }

lib/insights/src/lib/analytics-process/components/widgets/dropdown/dropdown.widget.ts

@@ -15,11 +15,11 @@
  * limitations under the License.
  */
 
- /* eslint-disable @angular-eslint/component-selector, @angular-eslint/no-input-rename */
+/* eslint-disable @angular-eslint/component-selector, @angular-eslint/no-input-rename */
 
-import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
-import { WidgetComponent } from './../widget.component';
+import { WidgetComponent } from '../widget.component';
 
 @Component({
     selector: 'analytics-dropdown-widget',
@@ -28,19 +28,12 @@ import { WidgetComponent } from './../widget.component';
     encapsulation: ViewEncapsulation.None
 })
 export class DropdownWidgetAnalyticsComponent extends WidgetComponent implements OnInit {
-
-    @Input()
-    field: any;
-
     @Input('group')
     public formGroup: UntypedFormGroup;
 
     @Input('controllerName')
     public controllerName: string;
 
-    @Output()
-    fieldChanged: EventEmitter<any> = new EventEmitter<any>();
-
     @Input()
     showDefaultOption: boolean = true;
 
@@ -50,10 +43,6 @@ export class DropdownWidgetAnalyticsComponent extends WidgetComponent implements
     @Input()
     defaultOptionText: string = 'Choose One';
 
-    constructor() {
-        super();
-    }
-
     ngOnInit() {
         if (this.required) {
             this.formGroup.get(this.controllerName).setValidators(Validators.compose(this.buildValidatorList()));

lib/insights/src/lib/analytics-process/components/widgets/duration/duration.widget.ts

@@ -15,13 +15,13 @@
  * limitations under the License.
  */
 
- /* eslint-disable @angular-eslint/component-selector, @angular-eslint/no-input-rename */
+/* eslint-disable @angular-eslint/component-selector, @angular-eslint/no-input-rename */
 
-import { Component, ElementRef, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { ParameterValueModel } from '../../../../diagram/models/report/parameter-value.model';
 import { ReportParameterDetailsModel } from '../../../../diagram/models/report/report-parameter-details.model';
-import { NumberWidgetAnalyticsComponent } from './../number/number.widget';
+import { NumberWidgetAnalyticsComponent } from '../number/number.widget';
 
 @Component({
     selector: 'duration-widget',
@@ -30,10 +30,6 @@ import { NumberWidgetAnalyticsComponent } from './../number/number.widget';
     encapsulation: ViewEncapsulation.None
 })
 export class DurationWidgetComponent extends NumberWidgetAnalyticsComponent implements OnInit {
-
-    @Input()
-    field: any;
-
     @Input('group')
     public formGroup: UntypedFormGroup;
 
@@ -48,10 +44,6 @@ export class DurationWidgetComponent extends NumberWidgetAnalyticsComponent impl
 
     public selectionGroup: UntypedFormGroup;
 
-    constructor(public elementRef: ElementRef) {
-        super(elementRef);
-    }
-
     ngOnInit() {
         const timeType = new UntypedFormControl();
         this.formGroup.addControl('timeType', timeType);
@@ -64,21 +56,20 @@ export class DurationWidgetComponent extends NumberWidgetAnalyticsComponent impl
         }
 
         const paramOptions: ParameterValueModel[] = [];
-        paramOptions.push(new ParameterValueModel({id: '1', name: 'Seconds'}));
+        paramOptions.push(new ParameterValueModel({ id: '1', name: 'Seconds' }));
-        paramOptions.push(new ParameterValueModel({id: '60', name: 'Minutes'}));
+        paramOptions.push(new ParameterValueModel({ id: '60', name: 'Minutes' }));
-        paramOptions.push(new ParameterValueModel({id: '3600', name: 'Hours'}));
+        paramOptions.push(new ParameterValueModel({ id: '3600', name: 'Hours' }));
-        paramOptions.push(new ParameterValueModel({id: '86400', name: 'Days', selected: true}));
+        paramOptions.push(new ParameterValueModel({ id: '86400', name: 'Days', selected: true }));
 
-        this.duration = new ReportParameterDetailsModel({id: 'duration', name: 'duration', options: paramOptions});
+        this.duration = new ReportParameterDetailsModel({ id: 'duration', name: 'duration', options: paramOptions });
         this.duration.value = paramOptions[0].id;
     }
 
     public calculateDuration() {
-        if (this.field && this.duration.value ) {
+        if (this.field && this.duration.value) {
             this.currentValue = parseInt(this.field.value, 10) * parseInt(this.duration.value, 10);
             this.formGroup.get(this.controllerName).setValue(this.currentValue);
-            this.fieldChanged.emit({value: this.currentValue});
+            this.fieldChanged.emit({ value: this.currentValue });
         }
     }
-
 }

lib/insights/src/lib/analytics-process/components/widgets/number/number.widget.ts

@@ -15,11 +15,11 @@
  * limitations under the License.
  */
 
- /* eslint-disable @angular-eslint/component-selector, @angular-eslint/no-input-rename */
+/* eslint-disable @angular-eslint/component-selector, @angular-eslint/no-input-rename */
 
-import { Component, ElementRef, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { UntypedFormGroup, Validators } from '@angular/forms';
-import { WidgetComponent } from './../widget.component';
+import { WidgetComponent } from '../widget.component';
 
 @Component({
     selector: 'analytics-number-widget',
@@ -28,10 +28,6 @@ import { WidgetComponent } from './../widget.component';
     encapsulation: ViewEncapsulation.None
 })
 export class NumberWidgetAnalyticsComponent extends WidgetComponent implements OnInit {
-
-    @Input()
-    field: any;
-
     @Input('group')
     public formGroup: UntypedFormGroup;
 
@@ -41,10 +37,6 @@ export class NumberWidgetAnalyticsComponent extends WidgetComponent implements O
     @Input()
     required: boolean = false;
 
-    constructor(public elementRef: ElementRef) {
-        super();
-    }
-
     ngOnInit() {
         if (this.required) {
             this.formGroup.get(this.controllerName).setValidators(Validators.required);

lib/insights/src/lib/analytics-process/components/widgets/widget.component.ts

@@ -26,7 +26,7 @@ export class WidgetComponent implements OnChanges {
 
     /** fieldChanged. */
     @Output()
-    fieldChanged: EventEmitter<any> = new EventEmitter<any>();
+    fieldChanged = new EventEmitter<any>();
 
     ngOnChanges(changes: SimpleChanges) {
         const field = changes['field'];

lib/insights/src/lib/analytics-process/services/analytics.service.spec.ts

@@ -1,85 +0,0 @@
-/*!
- * @license
- * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { TestBed } from '@angular/core/testing';
-import { fakeReportList } from '../../mock';
-import { AnalyticsService } from './analytics.service';
-import { InsightsTestingModule } from '../../testing/insights.testing.module';
-import { TranslateModule } from '@ngx-translate/core';
-
-declare let jasmine: any;
-
-describe('AnalyticsService', () => {
-
-    let service: AnalyticsService;
-
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            imports: [
-                TranslateModule.forRoot(),
-                InsightsTestingModule
-            ]
-        });
-        service = TestBed.inject(AnalyticsService);
-    });
-
-    beforeEach(() => {
-        jasmine.Ajax.install();
-    });
-
-    afterEach(() => {
-        jasmine.Ajax.uninstall();
-    });
-
-    describe('Content tests', () => {
-
-        it('should return the report list by appId', (done) => {
-            service.getReportList(1).subscribe(
-                (reportList) => {
-                    expect(reportList).toBeDefined();
-                    expect(reportList.length).toEqual(2);
-                    expect(reportList[0].name).toEqual('Fake Report 1');
-                    expect(reportList[1].name).toEqual('Fake Report 2');
-                    done();
-                }
-            );
-
-            jasmine.Ajax.requests.mostRecent().respondWith({
-                status: 200,
-                contentType: 'application/json',
-                responseText: JSON.stringify(fakeReportList)
-            });
-        });
-
-        it('should return the report by report name', (done) => {
-            service.getReportByName('Fake Report 2').subscribe(
-                (report) => {
-                    expect(report).toBeDefined();
-                    expect(report).not.toBeNull();
-                    expect(report.id).toEqual('2');
-                    done();
-                }
-            );
-
-            jasmine.Ajax.requests.mostRecent().respondWith({
-                status: 200,
-                contentType: 'application/json',
-                responseText: JSON.stringify(fakeReportList)
-            });
-        });
-    });
-});

lib/insights/src/lib/analytics-process/services/analytics.service.ts

@@ -29,6 +29,7 @@ import { PieChart } from '../../diagram/models/chart/pie-chart.model';
 import { TableChart } from '../../diagram/models/chart/table-chart.model';
 import { map } from 'rxjs/operators';
 import { ProcessDefinitionsApi, ReportApi } from '@alfresco/js-api';
+import { ReportQuery } from '../../diagram/models/report/report-query.model';
 
 @Injectable({ providedIn: 'root' })
 export class AnalyticsService {
@@ -158,7 +159,7 @@ export class AnalyticsService {
 
     getTasksByProcessDefinitionId(reportId: string, processDefinitionId: string): Observable<ParameterValueModel[]> {
         return from(this.reportApi.getTasksByProcessDefinitionId(reportId, processDefinitionId)).pipe(
-            map((res) => {
+            map((res: string[]) => {
                 const paramOptions: ParameterValueModel[] = [];
                 res.forEach((opt) => {
                     paramOptions.push(new ParameterValueModel({ id: opt, name: opt }));
@@ -168,7 +169,7 @@ export class AnalyticsService {
         );
     }
 
-    getReportsByParams(reportId: string, paramsQuery: any): Observable<Chart[]> {
+    getReportsByParams(reportId: string, paramsQuery: ReportQuery): Observable<Chart[]> {
         return from(this.reportApi.getReportsByParams(reportId, paramsQuery)).pipe(
             map((res: any) => {
                 const elements: Chart[] = [];
@@ -201,11 +202,11 @@ export class AnalyticsService {
         return from(this.reportApi.updateReport(reportId, name));
     }
 
-    exportReportToCsv(reportId: string, paramsQuery: any): Observable<any> {
+    exportReportToCsv(reportId: string, paramsQuery: ReportQuery): Observable<any> {
         return from(this.reportApi.exportToCsv(reportId, paramsQuery));
     }
 
-    saveReport(reportId: string, paramsQuery: any): Observable<any> {
+    saveReport(reportId: string, paramsQuery: ReportQuery): Observable<any> {
         return from(this.reportApi.saveReport(reportId, paramsQuery));
     }
 

lib/insights/src/lib/diagram/components/activities/diagram-alfresco-publish-task.component.ts

@@ -15,22 +15,11 @@
  * limitations under the License.
  */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component } from '@angular/core';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'adf-diagram-publish-task',
     templateUrl: './diagram-alfresco-publish-task.component.html'
 })
-export class DiagramAlfrescoPublishTaskComponent implements OnInit {
+export class DiagramAlfrescoPublishTaskComponent extends DiagramElement {}
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
-    constructor(public elementRef: ElementRef) {}
-
-    ngOnInit() {
-
-    }
-}

lib/insights/src/lib/diagram/components/activities/diagram-box-publish-task.component.ts

@@ -17,22 +17,11 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component } from '@angular/core';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-box-publish-task',
     templateUrl: './diagram-box-publish-task.component.html'
 })
-export class DiagramBoxPublishTaskComponent implements OnInit {
+export class DiagramBoxPublishTaskComponent extends DiagramElement {}
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
-    constructor(public elementRef: ElementRef) {}
-
-    ngOnInit() {
-
-    }
-}

lib/insights/src/lib/diagram/components/activities/diagram-business-rule-task.component.ts

@@ -17,18 +17,11 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, Output } from '@angular/core';
+import { Component } from '@angular/core';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-business-rule-task',
     templateUrl: './diagram-business-rule-task.component.html'
 })
-export class DiagramBusinessRuleTaskComponent {
+export class DiagramBusinessRuleTaskComponent extends DiagramElement {}
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
-    constructor(public elementRef: ElementRef) {}
-}

lib/insights/src/lib/diagram/components/activities/diagram-camel-task.component.ts

@@ -17,22 +17,11 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component } from '@angular/core';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-camel-task',
     templateUrl: './diagram-camel-task.component.html'
 })
-export class DiagramCamelTaskComponent implements OnInit {
+export class DiagramCamelTaskComponent extends DiagramElement {}
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
-    constructor(public elementRef: ElementRef) {}
-
-    ngOnInit() {
-
-    }
-}

lib/insights/src/lib/diagram/components/activities/diagram-container-service-task.component.ts

@@ -17,22 +17,11 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component } from '@angular/core';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-container-service-task',
     templateUrl: './diagram-container-service-task.component.html'
 })
-export class DiagramContainerServiceTaskComponent implements OnInit {
+export class DiagramContainerServiceTaskComponent extends DiagramElement {}
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
-    constructor(public elementRef: ElementRef) {}
-
-    ngOnInit() {
-
-    }
-}

lib/insights/src/lib/diagram/components/activities/diagram-google-drive-publish-task.component.ts

@@ -17,22 +17,11 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component } from '@angular/core';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-google-drive-publish-task',
     templateUrl: './diagram-google-drive-publish-task.component.html'
 })
-export class DiagramGoogleDrivePublishTaskComponent implements OnInit {
+export class DiagramGoogleDrivePublishTaskComponent extends DiagramElement {}
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
-    constructor(public elementRef: ElementRef) {}
-
-    ngOnInit() {
-
-    }
-}

lib/insights/src/lib/diagram/components/activities/diagram-manual-task.component.ts

@@ -17,19 +17,11 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, Output } from '@angular/core';
+import { Component } from '@angular/core';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-manual-task',
     templateUrl: './diagram-manual-task.component.html'
 })
-export class DiagramManualTaskComponent {
+export class DiagramManualTaskComponent extends DiagramElement {}
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
-    constructor(public elementRef: ElementRef) {
-    }
-}

lib/insights/src/lib/diagram/components/activities/diagram-mule-task.component.ts

@@ -17,22 +17,11 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component } from '@angular/core';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-mule-task',
     templateUrl: './diagram-mule-task.component.html'
 })
-export class DiagramMuleTaskComponent implements OnInit {
+export class DiagramMuleTaskComponent extends DiagramElement {}
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
-    constructor(public elementRef: ElementRef) {}
-
-    ngOnInit() {
-
-    }
-}

lib/insights/src/lib/diagram/components/activities/diagram-receive-task.component.ts

@@ -17,18 +17,11 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, Output } from '@angular/core';
+import { Component } from '@angular/core';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-receive-task',
     templateUrl: './diagram-receive-task.component.html'
 })
-export class DiagramReceiveTaskComponent {
+export class DiagramReceiveTaskComponent extends DiagramElement {}
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
-    constructor(public elementRef: ElementRef) {}
-}

lib/insights/src/lib/diagram/components/activities/diagram-rest-call-task.component.ts

@@ -17,22 +17,11 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component } from '@angular/core';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-rest-call-task',
     templateUrl: './diagram-rest-call-task.component.html'
 })
-export class DiagramRestCallTaskComponent implements OnInit {
+export class DiagramRestCallTaskComponent extends DiagramElement {}
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
-    constructor(public elementRef: ElementRef) {}
-
-    ngOnInit() {
-
-    }
-}

lib/insights/src/lib/diagram/components/activities/diagram-script-task.component.ts

@@ -17,18 +17,11 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, Output } from '@angular/core';
+import { Component } from '@angular/core';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-script-task',
     templateUrl: './diagram-script-task.component.html'
 })
-export class DiagramScriptTaskComponent {
+export class DiagramScriptTaskComponent extends DiagramElement {}
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
-    constructor(public elementRef: ElementRef) {}
-}

lib/insights/src/lib/diagram/components/activities/diagram-send-task.component.ts

@@ -17,22 +17,11 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component } from '@angular/core';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-send-task',
     templateUrl: './diagram-send-task.component.html'
 })
-export class DiagramSendTaskComponent implements OnInit {
+export class DiagramSendTaskComponent extends DiagramElement {}
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
-    constructor(public elementRef: ElementRef) {}
-
-    ngOnInit() {
-
-    }
-}

lib/insights/src/lib/diagram/components/activities/diagram-service-task.component.ts

@@ -17,18 +17,11 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, Output } from '@angular/core';
+import { Component } from '@angular/core';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-service-task',
     templateUrl: './diagram-service-task.component.html'
 })
-export class DiagramServiceTaskComponent {
+export class DiagramServiceTaskComponent extends DiagramElement {}
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
-    constructor(public elementRef: ElementRef) {}
-}

lib/insights/src/lib/diagram/components/activities/diagram-task.component.ts

@@ -17,28 +17,19 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ACTIVITY_STROKE_COLOR } from '../../constants/diagram-colors';
-import { DiagramColorService } from '../../services/diagram-color.service';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-task',
     templateUrl: './diagram-task.component.html'
 })
-export class DiagramTaskComponent implements OnInit {
+export class DiagramTaskComponent extends DiagramElement implements OnInit {
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
     rectLeftCorner: any;
     textPosition: any;
     options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: '', radius: 4};
 
-    constructor(public elementRef: ElementRef,
-                private diagramColorService: DiagramColorService) {}
-
     ngOnInit() {
         this.rectLeftCorner = {x: this.data.x, y: this.data.y};
         this.textPosition =  {x: this.data.x + ( this.data.width / 2 ), y: this.data.y + ( this.data.height / 2 )};

lib/insights/src/lib/diagram/components/activities/diagram-user-task.component.ts

@@ -17,18 +17,11 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, Output } from '@angular/core';
+import { Component } from '@angular/core';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-user-task',
     templateUrl: './diagram-user-task.component.html'
 })
-export class DiagramUserTaskComponent {
+export class DiagramUserTaskComponent extends DiagramElement {}
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
-    constructor(public elementRef: ElementRef) {}
-}

lib/insights/src/lib/diagram/components/boundary-events/diagram-boundary-event.component.ts

@@ -17,21 +17,15 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { MAIN_STROKE_COLOR } from '../../constants/diagram-colors';
-import { DiagramColorService } from '../../services/diagram-color.service';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-boundary-event',
     templateUrl: './diagram-boundary-event.component.html'
 })
-export class DiagramBoundaryEventComponent implements OnInit {
+export class DiagramBoundaryEventComponent extends DiagramElement implements OnInit {
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
     center: any = {};
     options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: 1};
 
@@ -40,9 +34,6 @@ export class DiagramBoundaryEventComponent implements OnInit {
     circleRadiusInner: number;
     circleRadiusOuter: number;
 
-    constructor(public elementRef: ElementRef,
-                private diagramColorService: DiagramColorService) {}
-
     ngOnInit() {
         this.center.x = this.data.x + (this.data.width / 2);
         this.center.y = this.data.y + (this.data.height / 2);

lib/insights/src/lib/diagram/components/boundary-events/diagram-throw-event.component.ts

@@ -17,21 +17,15 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { MAIN_STROKE_COLOR } from '../../constants/diagram-colors';
-import { DiagramColorService } from '../../services/diagram-color.service';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-throw-event',
     templateUrl: './diagram-throw-event.component.html'
 })
-export class DiagramThrowEventComponent implements OnInit {
+export class DiagramThrowEventComponent extends DiagramElement implements OnInit {
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
     center: any = {};
     options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: 1};
 
@@ -40,10 +34,6 @@ export class DiagramThrowEventComponent implements OnInit {
     circleRadiusInner: number;
     circleRadiusOuter: number;
 
-    constructor(public elementRef: ElementRef,
-                private diagramColorService: DiagramColorService) {
-    }
-
     ngOnInit() {
         this.center.x = this.data.x + (this.data.width / 2);
         this.center.y = this.data.y + (this.data.height / 2);

lib/insights/src/lib/diagram/components/diagram-element.ts

@@ -15,13 +15,16 @@
  * limitations under the License.
  */
 
-export const fakeReportList = [
+import { Directive, EventEmitter, Input, Output, inject } from '@angular/core';
-    {
+import { DiagramColorService } from '../services/diagram-color.service';
-        id: '1',
+
-        name: 'Fake Report 1'
+@Directive()
-    },
+export abstract class DiagramElement {
-    {
+    protected diagramColorService = inject(DiagramColorService);
-        id: '2',
+
-        name: 'Fake Report 2'
+    @Input()
-    }
+    data: any;
-];
+
+    @Output()
+    error = new EventEmitter();
+}

lib/insights/src/lib/diagram/components/diagram-sequence-flow.component.ts

@@ -15,22 +15,16 @@
  * limitations under the License.
  */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 @Component({
     selector: 'adf-diagram-sequence-flow',
     templateUrl: './diagram-sequence-flow.component.html'
 })
-export class DiagramSequenceFlowComponent implements OnInit {
+export class DiagramSequenceFlowComponent {
     @Input()
     flow: any;
 
     @Output()
     error = new EventEmitter();
-
-    constructor(public elementRef: ElementRef) {}
-
-    ngOnInit() {
-
-    }
 }

lib/insights/src/lib/diagram/components/events/diagram-end-event.component.ts

@@ -17,27 +17,18 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { MAIN_STROKE_COLOR } from '../../constants/diagram-colors';
-import { DiagramColorService } from '../../services/diagram-color.service';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-end-event',
     templateUrl: './diagram-end-event.component.html'
 })
-export class DiagramEndEventComponent implements OnInit {
+export class DiagramEndEventComponent extends DiagramElement implements OnInit {
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
     options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: '', radius: ''};
     iconFillColor: any;
 
-    constructor(public elementRef: ElementRef,
-                private diagramColorService: DiagramColorService) {}
-
     ngOnInit() {
 
         this.options.radius = 14;

lib/insights/src/lib/diagram/components/events/diagram-event.component.ts

@@ -17,29 +17,22 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-event',
     templateUrl: './diagram-event.component.html'
 })
-export class DiagramEventComponent implements OnInit {
+export class DiagramEventComponent extends DiagramElement implements OnInit {
-    @Input()
-    data: any;
-
     @Input()
     options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: '', radius: ''};
 
     @Input()
     iconFillColor: any;
 
-    @Output()
-    error = new EventEmitter();
-
     center: any = {};
 
-    constructor(public elementRef: ElementRef) {}
-
     ngOnInit() {
 
         this.center.x = this.data.x + (this.data.width / 2);

lib/insights/src/lib/diagram/components/events/diagram-start-event.component.ts

@@ -17,27 +17,18 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { MAIN_STROKE_COLOR } from '../../constants/diagram-colors';
-import { DiagramColorService } from '../../services/diagram-color.service';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-start-event',
     templateUrl: './diagram-start-event.component.html'
 })
-export class DiagramStartEventComponent implements OnInit {
+export class DiagramStartEventComponent extends DiagramElement implements OnInit {
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
     options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: '', radius: ''};
     iconFillColor: any;
 
-    constructor(public elementRef: ElementRef,
-                private diagramColorService: DiagramColorService) {}
-
     ngOnInit() {
 
         this.options.radius = 15;

lib/insights/src/lib/diagram/components/gateways/diagram-event-gateway.component.ts

@@ -17,21 +17,15 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { MAIN_STROKE_COLOR } from '../../constants/diagram-colors';
-import { DiagramColorService } from '../../services/diagram-color.service';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-event-gateway',
     templateUrl: './diagram-event-gateway.component.html'
 })
-export class DiagramEventGatewayComponent implements OnInit {
+export class DiagramEventGatewayComponent extends DiagramElement implements OnInit {
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
     center: any = {};
     centerPentagon: any = {};
     options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: 0.5};
@@ -41,9 +35,6 @@ export class DiagramEventGatewayComponent implements OnInit {
 
     pentaStrokeWidth = 1.39999998;
 
-    constructor(public elementRef: ElementRef,
-                private diagramColorService: DiagramColorService) {}
-
     ngOnInit() {
         this.center.x = this.data.x + (this.data.width / 2);
         this.center.y = this.data.y + (this.data.height / 2);

lib/insights/src/lib/diagram/components/gateways/diagram-exclusive-gateway.component.ts

@@ -17,29 +17,20 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { MAIN_STROKE_COLOR } from '../../constants/diagram-colors';
-import { DiagramColorService } from '../../services/diagram-color.service';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-exclusive-gateway',
     templateUrl: './diagram-exclusive-gateway.component.html'
 })
-export class DiagramExclusiveGatewayComponent implements OnInit {
+export class DiagramExclusiveGatewayComponent extends DiagramElement implements OnInit {
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
     center: any = {};
     width: any;
     height: any;
     options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: 3};
 
-    constructor(public elementRef: ElementRef,
-                private diagramColorService: DiagramColorService) {}
-
     ngOnInit() {
         this.center.x = this.data.x;
         this.center.y = this.data.y;

lib/insights/src/lib/diagram/components/gateways/diagram-gateway.component.ts

@@ -17,29 +17,20 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { MAIN_STROKE_COLOR } from '../../constants/diagram-colors';
-import { DiagramColorService } from '../../services/diagram-color.service';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-gateway',
     templateUrl: './diagram-gateway.component.html'
 })
-export class DiagramGatewayComponent implements OnInit {
+export class DiagramGatewayComponent extends DiagramElement implements OnInit {
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
     center: any = {};
     width: any;
     height: any;
     options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: 2};
 
-    constructor(public elementRef: ElementRef,
-                private diagramColorService: DiagramColorService) {}
-
     ngOnInit() {
         this.center.x = this.data.x;
         this.center.y = this.data.y;

lib/insights/src/lib/diagram/components/gateways/diagram-inclusive-gateway.component.ts

@@ -17,29 +17,20 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { MAIN_STROKE_COLOR } from '../../constants/diagram-colors';
-import { DiagramColorService } from '../../services/diagram-color.service';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-inclusive-gateway',
     templateUrl: './diagram-inclusive-gateway.component.html'
 })
-export class DiagramInclusiveGatewayComponent implements OnInit {
+export class DiagramInclusiveGatewayComponent extends DiagramElement implements OnInit {
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
     center: any = {};
     width: any;
     height: any;
     options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: 2.5, radius: 9.75};
 
-    constructor(public elementRef: ElementRef,
-                private diagramColorService: DiagramColorService) {}
-
     ngOnInit() {
         this.center.x = this.data.x + (this.data.width / 2);
         this.center.y = this.data.y + (this.data.height / 2);

lib/insights/src/lib/diagram/components/gateways/diagram-parallel-gateway.component.ts

@@ -17,29 +17,20 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { MAIN_STROKE_COLOR } from '../../constants/diagram-colors';
-import { DiagramColorService } from '../../services/diagram-color.service';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-parallel-gateway',
     templateUrl: './diagram-parallel-gateway.component.html'
 })
-export class DiagramParallelGatewayComponent implements OnInit {
+export class DiagramParallelGatewayComponent extends DiagramElement implements OnInit {
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
     center: any = {};
     width: any;
     height: any;
     options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: 3};
 
-    constructor(public elementRef: ElementRef,
-                private diagramColorService: DiagramColorService) {}
-
     ngOnInit() {
         this.center.x = this.data.x;
         this.center.y = this.data.y;

lib/insights/src/lib/diagram/components/icons/diagram-container-icon-event.component.ts

@@ -17,24 +17,18 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, Output } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-container-icon-event',
     templateUrl: './diagram-container-icon-event.component.html'
 })
-export class DiagramContainerIconEventTaskComponent {
+export class DiagramContainerIconEventTaskComponent extends DiagramElement {
-    @Input()
-    data: any;
-
     @Input()
     type: string;
 
     @Input()
     fillColor: string;
 
-    @Output()
-    error = new EventEmitter();
-
-    constructor(public elementRef: ElementRef) {}
 }

lib/insights/src/lib/diagram/components/icons/diagram-icon-alfresco-publish-task.component.ts

@@ -17,25 +17,18 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-icon-alfresco-publish-task',
     templateUrl: './diagram-icon-alfresco-publish-task.component.html'
 })
-export class DiagramIconAlfrescoPublishTaskComponent implements OnInit {
+export class DiagramIconAlfrescoPublishTaskComponent extends DiagramElement implements OnInit {
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
     position: any;
 
     options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: ''};
 
-    constructor(public elementRef: ElementRef) {}
-
     ngOnInit() {
         this.position = {x: this.data.x + 4, y: this.data.y + 4};
         this.options.stroke = 'none' ;

lib/insights/src/lib/diagram/components/icons/diagram-icon-box-publish-task.component.ts

@@ -17,25 +17,18 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-icon-box-publish-task',
     templateUrl: './diagram-icon-box-publish-task.component.html'
 })
-export class DiagramIconBoxPublishTaskComponent implements OnInit {
+export class DiagramIconBoxPublishTaskComponent extends DiagramElement implements OnInit {
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
     position: any;
 
     options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: ''};
 
-    constructor(public elementRef: ElementRef) {}
-
     ngOnInit() {
         this.position = {x: this.data.x + 6, y: this.data.y + 6};
     }

lib/insights/src/lib/diagram/components/icons/diagram-icon-business-rule-task.component.ts

@@ -17,25 +17,18 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-icon-business-rule-task',
     templateUrl: './diagram-icon-business-rule-task.component.html'
 })
-export class DiagramIconBusinessRuleTaskComponent implements OnInit {
+export class DiagramIconBusinessRuleTaskComponent extends DiagramElement implements OnInit {
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
     position: any;
 
     options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: ''};
 
-    constructor(public elementRef: ElementRef) {}
-
     ngOnInit() {
         this.position = {x: this.data.x + 4, y: this.data.y + 4};
         this.options.stroke = 'none' ;

lib/insights/src/lib/diagram/components/icons/diagram-icon-camel-task.component.ts

@@ -17,25 +17,18 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-icon-camel-task',
     templateUrl: './diagram-icon-camel-task.component.html'
 })
-export class DiagramIconCamelTaskComponent implements OnInit {
+export class DiagramIconCamelTaskComponent extends DiagramElement implements OnInit {
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
     position: any;
 
     options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: ''};
 
-    constructor(public elementRef: ElementRef) {}
-
     ngOnInit() {
         this.position = {x: this.data.x + 8, y: this.data.y + 6};
         this.options.stroke = 'none' ;

lib/insights/src/lib/diagram/components/icons/diagram-icon-error.component.ts

@@ -17,28 +17,21 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-icon-error',
     templateUrl: './diagram-icon-error.component.html'
 })
-export class DiagramIconErrorComponent implements OnInit {
+export class DiagramIconErrorComponent extends DiagramElement implements OnInit {
-    @Input()
-    data: any;
-
     @Input()
     fillColor: string;
 
-    @Output()
-    error = new EventEmitter();
-
     position: any;
 
     options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: ''};
 
-    constructor(public elementRef: ElementRef) {}
-
     ngOnInit() {
         this.position = {x: this.data.x - 1, y: this.data.y - 1};
 

lib/insights/src/lib/diagram/components/icons/diagram-icon-google-drive-publish-task.component.ts

@@ -17,25 +17,18 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-icon-google-drive-publish-task',
     templateUrl: './diagram-icon-google-drive-publish-task.component.html'
 })
-export class DiagramIconGoogleDrivePublishTaskComponent implements OnInit {
+export class DiagramIconGoogleDrivePublishTaskComponent extends DiagramElement implements OnInit {
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
     position: any;
 
     options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: ''};
 
-    constructor(public elementRef: ElementRef) {}
-
     ngOnInit() {
         this.position = {x: this.data.x + 6, y: this.data.y + 6};
     }

lib/insights/src/lib/diagram/components/icons/diagram-icon-manual-task.component.ts

@@ -17,25 +17,18 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-icon-manual-task',
     templateUrl: './diagram-icon-manual-task.component.html'
 })
-export class DiagramIconManualTaskComponent implements OnInit {
+export class DiagramIconManualTaskComponent extends DiagramElement implements OnInit {
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
     position: any;
 
     options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: ''};
 
-    constructor(public elementRef: ElementRef) {}
-
     ngOnInit() {
         this.position = {x: this.data.x + 4, y: this.data.y + 4};
         this.options.stroke = 'none' ;

lib/insights/src/lib/diagram/components/icons/diagram-icon-message.component.ts

@@ -17,25 +17,18 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-icon-message',
     templateUrl: './diagram-icon-message.component.html'
 })
-export class DiagramIconMessageComponent implements OnInit {
+export class DiagramIconMessageComponent extends DiagramElement implements OnInit {
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
     position: any;
 
     options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: ''};
 
-    constructor(public elementRef: ElementRef) {}
-
     ngOnInit() {
         this.position = {x: this.data.x + 6, y: this.data.y + 6};
 

lib/insights/src/lib/diagram/components/icons/diagram-icon-mule-task.component.ts

@@ -17,25 +17,18 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-icon-mule-task',
     templateUrl: './diagram-icon-mule-task.component.html'
 })
-export class DiagramIconMuleTaskComponent implements OnInit {
+export class DiagramIconMuleTaskComponent extends DiagramElement implements OnInit {
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
     position: any;
 
     options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: ''};
 
-    constructor(public elementRef: ElementRef) {}
-
     ngOnInit() {
         this.position = {x: this.data.x + 2, y: this.data.y + 2};
         this.options.stroke = 'none' ;

lib/insights/src/lib/diagram/components/icons/diagram-icon-receive-task.component.ts

@@ -17,25 +17,18 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-icon-receive-task',
     templateUrl: './diagram-icon-receive-task.component.html'
 })
-export class DiagramIconReceiveTaskComponent implements OnInit {
+export class DiagramIconReceiveTaskComponent extends DiagramElement implements OnInit {
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
     position: any;
 
     options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: ''};
 
-    constructor(public elementRef: ElementRef) {}
-
     ngOnInit() {
         this.position = {x: this.data.x + 4, y: this.data.y + 2};
         this.options.stroke = 'none' ;

lib/insights/src/lib/diagram/components/icons/diagram-icon-rest-call-task.component.ts

@@ -17,25 +17,18 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-icon-rest-call-task',
     templateUrl: './diagram-icon-rest-call-task.component.html'
 })
-export class DiagramIconRestCallTaskComponent implements OnInit {
+export class DiagramIconRestCallTaskComponent extends DiagramElement implements OnInit {
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
     position: any;
 
     options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: ''};
 
-    constructor(public elementRef: ElementRef) {}
-
     ngOnInit() {
         this.position = {x: this.data.x + 2, y: this.data.y + 2};
         this.options.stroke = 'none' ;

lib/insights/src/lib/diagram/components/icons/diagram-icon-script-task.component.ts

@@ -17,25 +17,18 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-icon-script-task',
     templateUrl: './diagram-icon-script-task.component.html'
 })
-export class DiagramIconScriptTaskComponent implements OnInit {
+export class DiagramIconScriptTaskComponent extends DiagramElement implements OnInit {
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
     position: any;
 
     options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: ''};
 
-    constructor(public elementRef: ElementRef) {}
-
     ngOnInit() {
         this.position = {x: this.data.x + 4, y: this.data.y + 4};
         this.options.stroke = 'none' ;

lib/insights/src/lib/diagram/components/icons/diagram-icon-send-task.component.ts

@@ -17,25 +17,18 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-icon-send-task',
     templateUrl: './diagram-icon-send-task.component.html'
 })
-export class DiagramIconSendTaskComponent implements OnInit {
+export class DiagramIconSendTaskComponent extends DiagramElement implements OnInit {
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
     position: any;
 
     options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: ''};
 
-    constructor(public elementRef: ElementRef) {}
-
     ngOnInit() {
         this.position = {x: this.data.x + 4, y: this.data.y + 4};
         this.options.stroke = 'none' ;

lib/insights/src/lib/diagram/components/icons/diagram-icon-service-task.component.ts

@@ -17,25 +17,18 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-icon-service-task',
     templateUrl: './diagram-icon-service-task.component.html'
 })
-export class DiagramIconServiceTaskComponent implements OnInit {
+export class DiagramIconServiceTaskComponent extends DiagramElement implements OnInit {
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
     position: any;
 
     options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: ''};
 
-    constructor(public elementRef: ElementRef) {}
-
     ngOnInit() {
         this.position = {x: this.data.x + 4, y: this.data.y + 4};
         this.options.stroke = 'none' ;

lib/insights/src/lib/diagram/components/icons/diagram-icon-signal.component.ts

@@ -17,28 +17,21 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-icon-signal',
     templateUrl: './diagram-icon-signal.component.html'
 })
-export class DiagramIconSignalComponent implements OnInit {
+export class DiagramIconSignalComponent extends DiagramElement implements OnInit {
-    @Input()
-    data: any;
-
     @Input()
     fillColor: string;
 
-    @Output()
-    error = new EventEmitter();
-
     position: any;
 
     options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: ''};
 
-    constructor(public elementRef: ElementRef) {}
-
     ngOnInit() {
         this.position = {x: this.data.x - 1, y: this.data.y - 1};
 

lib/insights/src/lib/diagram/components/icons/diagram-icon-timer.component.ts

@@ -17,19 +17,14 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-icon-timer',
     templateUrl: './diagram-icon-timer.component.html'
 })
-export class DiagramIconTimerComponent implements OnInit {
+export class DiagramIconTimerComponent extends DiagramElement implements OnInit {
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
     center: any = {};
     position: any;
 
@@ -38,8 +33,6 @@ export class DiagramIconTimerComponent implements OnInit {
     circleOptions: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: ''};
     timerOptions: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: ''};
 
-    constructor(public elementRef: ElementRef) {}
-
     ngOnInit() {
         this.center.x = this.data.x + (this.data.width / 2);
         this.center.y = this.data.y + (this.data.height / 2);

lib/insights/src/lib/diagram/components/icons/diagram-icon-user-task.component.ts

@@ -17,25 +17,18 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-icon-user-task',
     templateUrl: './diagram-icon-user-task.component.html'
 })
-export class DiagramIconUserTaskComponent implements OnInit {
+export class DiagramIconUserTaskComponent extends DiagramElement implements OnInit {
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
     position: any;
 
     options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: ''};
 
-    constructor(public elementRef: ElementRef) {}
-
     ngOnInit() {
         this.position = {x: this.data.x + 4, y: this.data.y + 4};
         this.options.stroke = 'none' ;

lib/insights/src/lib/diagram/components/intermediate-catching-events/diagram-intermediate-catching-event.component.ts

@@ -17,30 +17,21 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { MAIN_STROKE_COLOR } from '../../constants/diagram-colors';
-import { DiagramColorService } from '../../services/diagram-color.service';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-intermediate-catching-event',
     templateUrl: './diagram-intermediate-catching-event.component.html'
 })
-export class DiagramIntermediateCatchingEventComponent implements OnInit {
+export class DiagramIntermediateCatchingEventComponent extends DiagramElement implements OnInit {
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
     center: any = {};
     options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: 1};
 
     circleRadiusInner: number;
     circleRadiusOuter: number;
 
-    constructor(public elementRef: ElementRef,
-                private diagramColorService: DiagramColorService) {}
-
     ngOnInit() {
         this.center.x = this.data.x + (this.data.width / 2);
         this.center.y = this.data.y + (this.data.height / 2);

lib/insights/src/lib/diagram/components/raphael/icons/raphael-icon-alfresco-publish.component.ts

@@ -15,15 +15,14 @@
  * limitations under the License.
  */
 
-import { Directive, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Directive, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { Point } from './../models/point';
+import { Point } from '../models/point';
-import { RaphaelBase } from './../raphael-base';
+import { RaphaelBase } from '../raphael-base';
-import { RaphaelService } from './../raphael.service';
 
 /**
  * Directive selectors without adf- prefix will be deprecated on 3.0.0
  */
-@Directive({selector: 'adf-raphael-icon-alfresco-publish, raphael-icon-alfresco-publish'})
+@Directive({ selector: 'adf-raphael-icon-alfresco-publish, raphael-icon-alfresco-publish' })
 export class RaphaelIconAlfrescoPublishDirective extends RaphaelBase implements OnInit {
     @Input()
     paper: any;
@@ -49,28 +48,25 @@ export class RaphaelIconAlfrescoPublishDirective extends RaphaelBase implements
     @Input()
     fillOpacity: any;
 
-    constructor(public elementRef: ElementRef,
-                raphaelService: RaphaelService) {
-        super(elementRef, raphaelService);
-    }
-
     ngOnInit() {
-
         this.draw(this.position);
     }
 
     public draw(position: Point) {
-
         const startX = position.x + 2;
         const startY = position.y + 2;
 
-        let path1 = this.paper.path(`M4.11870968,2.12890323 L6.12954839,0.117935484 L3.10993548,0.118064516 L3.10270968,0.118064516
+        let path1 = this.paper
+            .path(
+                `M4.11870968,2.12890323 L6.12954839,0.117935484 L3.10993548,0.118064516 L3.10270968,0.118064516
          C1.42941935,0.118064516 0.0729032258,1.47458065 0.0729032258,3.14774194 C0.0729032258,4.82116129 1.42929032,6.17754839
          3.10258065,6.17754839 C3.22967742,6.17754839 3.35470968,6.16877419 3.47767742,6.15354839 C2.8163871,4.85083871
          3.02954839,3.21793548 4.11870968,2.12890323M6.57032258,3.144 L6.57032258,0.300258065 L4.43522581,2.4356129 L4.43006452,2.44064516
          C3.24683871,3.62387097 3.24683871,5.54219355 4.43006452,6.72541935 C5.61329032,7.90864516 7.5316129,7.90864516
          8.71483871,6.72541935 C8.80464516,6.6356129 8.88529032,6.54025806 8.96154839,6.44270968 C7.57341935,5.98864516
-         6.57045161,4.68387097 6.57032258,3.144`).attr({
+         6.57045161,4.68387097 6.57032258,3.144`
+            )
+            .attr({
                 stroke: this.stroke,
                 fill: '#87C040',
                 'stroke-width': this.strokeWidth
@@ -80,22 +76,30 @@ export class RaphaelIconAlfrescoPublishDirective extends RaphaelBase implements
         const startY1 = startY + 8.387097;
         path1.transform('T' + startX1 + ',' + startY1);
 
-        path1 = this.paper.path(`M10.4411613,10.5153548 L8.43032258,8.50451613 L8.43032258,11.5313548 C8.43032258,13.2047742 9.78683871,
+        path1 = this.paper
+            .path(
+                `M10.4411613,10.5153548 L8.43032258,8.50451613 L8.43032258,11.5313548 C8.43032258,13.2047742 9.78683871,
         14.5611613 11.460129,14.5611613 C13.1334194,14.5611613 14.4899355,13.2047742 14.4899355,11.5314839 C14.4899355,11.4043871
         14.4811613,11.2793548 14.4659355,11.1563871 C13.1632258,11.8178065 11.5303226,11.6045161 10.4411613,10.5153548M15.0376774,
         5.91935484 C14.947871,5.82954839 14.8526452,5.74890323 14.7550968,5.67264516 C14.3010323,7.06064516 12.996129,8.06374194
         11.4563871,8.06374194 L8.61277419,8.06374194 L10.7529032,10.204 C11.936129,11.3872258 13.8545806,11.3872258 15.0376774,10.204
-        C16.2209032,9.02077419 16.2209032,7.10245161 15.0376774,5.91935484`).attr({
+        C16.2209032,9.02077419 16.2209032,7.10245161 15.0376774,5.91935484`
+            )
+            .attr({
                 stroke: this.stroke,
                 fill: '#87C040',
                 'stroke-width': this.strokeWidth
             });
         path1.transform('T' + startX + ',' + startY);
 
-        path1 = this.paper.path(`M5.9083871,1.5636129 C5.78129032,1.5636129 5.65625806,1.57225806 5.53329032,1.58748387
+        path1 = this.paper
+            .path(
+                `M5.9083871,1.5636129 C5.78129032,1.5636129 5.65625806,1.57225806 5.53329032,1.58748387
          C6.19458065,2.89032258 5.98141935,4.52309677 4.89225806,5.61225806 L2.88154839,7.62309677 L5.9083871,7.62309677
          C7.58154839,7.62309677 8.93806452,6.26658065 8.93806452,4.59329032 C8.93819355,2.92 7.58167742,1.5636129
-         5.9083871,1.5636129`).attr({
+         5.9083871,1.5636129`
+            )
+            .attr({
                 stroke: this.stroke,
                 fill: '#ED9A2D',
                 'stroke-width': this.strokeWidth
@@ -104,17 +108,23 @@ export class RaphaelIconAlfrescoPublishDirective extends RaphaelBase implements
         const startX2 = startX + 5.548387;
         path1.transform('T' + startX2 + ',' + startY);
 
-        path1 = this.paper.path(`M4.58090323,1.0156129 C3.39767742,-0.167483871 1.47935484,-0.167483871 0.296129032,1.01574194
+        path1 = this.paper
+            .path(
+                `M4.58090323,1.0156129 C3.39767742,-0.167483871 1.47935484,-0.167483871 0.296129032,1.01574194
          C0.206451613,1.10554839 0.125806452,1.20077419 0.0495483871,1.29845161 C1.43754839,1.75251613 2.44064516,3.05729032
          2.44064516,4.59703226 L2.44064516,7.44077419 L4.57574194,5.30554839 L4.58090323,5.30051613 C5.76412903,4.11729032
-         5.76412903,2.19896774 4.58090323,1.0156129`).attr({
+         5.76412903,2.19896774 4.58090323,1.0156129`
+            )
+            .attr({
                 stroke: this.stroke,
                 fill: '#5698C6',
                 'stroke-width': this.strokeWidth
             });
         path1.transform('T' + startX2 + ',' + startY);
 
-        path1 = this.paper.path(`M5.54051613,5.61432258 L5.62670968,5.70425806 L7.54632258,7.62387097 L7.5483871,7.62387097
+        path1 = this.paper
+            .path(
+                `M5.54051613,5.61432258 L5.62670968,5.70425806 L7.54632258,7.62387097 L7.5483871,7.62387097
          L7.5483871,4.604 L7.5483871,4.59677419 C7.5483871,2.92348387 6.19187097,1.56696774 4.51858065,1.56696774 C2.84529032,1.56696774
          1.48877419,2.92335484 1.48890323,4.59664516 C1.48890323,4.72348387 1.49754839,4.84812903 1.51264516,4.97083871
          C2.81625806,4.30993548 4.45122581,4.52503226 5.54051613,5.61432258M1.23251613,10.4292903 C1.25625806,10.3588387
@@ -138,36 +148,48 @@ export class RaphaelIconAlfrescoPublishDirective extends RaphaelBase implements
          C4.35109677,8.06877419 4.43612903,8.06451613 4.52232258,8.06451613 L7.36606452,8.0643871 L5.22580645,5.92412903
          C4.04258065,4.74103226 2.12412903,4.74090323 0.941032258,5.92412903 C-0.242193548,7.10735484 -0.242193548,9.02567742
          0.941032258,10.2089032 C1.03070968,10.2985806 1.12464516,10.3814194 1.22206452,10.4575484 C1.22529032,10.448 1.22929032,10.4388387
-         1.23251613,10.4292903`).attr({
+         1.23251613,10.4292903`
+            )
+            .attr({
                 stroke: this.stroke,
                 fill: '#5698C6',
                 'stroke-width': this.strokeWidth
             });
         path1.transform('T' + startX + ',' + startY);
 
-        path1 = this.paper.path(`M5.23290323,5.92412903 L6.92748387,7.61870968 L4.64980645,7.61870968 L4.52064516,7.62141935
+        path1 = this.paper
+            .path(
+                `M5.23290323,5.92412903 L6.92748387,7.61870968 L4.64980645,7.61870968 L4.52064516,7.62141935
          C3.13354839,7.62141935 1.96425806,6.68929032 1.60477419,5.41729032 C2.75870968,4.77019355 4.24619355,4.93754839
          5.22787097,5.91909677 L5.23290323,5.92412903M7.54722581,4.59612903 L7.54722581,6.99264516 L5.93664516,5.38206452
          L5.84348387,5.29264516 C4.86258065,4.31187097 4.69483871,2.82580645 5.34012903,1.67225806 C6.61367742,2.03070968
          7.54722581,3.20090323 7.54722581,4.58890323 L7.54722581,4.59612903M10.1385806,5.29819355 L8.444,6.99290323 L8.444,4.71522581
          L8.44129032,4.58606452 C8.44129032,3.19896774 9.37341935,2.02954839 10.6454194,1.67019355 C11.2925161,2.82412903
-         11.1251613,4.3116129 10.1436129,5.29316129 L10.1385806,5.29819355`).attr({
+         11.1251613,4.3116129 10.1436129,5.29316129 L10.1385806,5.29819355`
+            )
+            .attr({
                 stroke: this.stroke,
                 fill: '#446BA5',
                 'stroke-width': this.strokeWidth
             });
         path1.transform('T' + startX + ',' + startY);
 
-        path1 = this.paper.path(`M11.4548387,7.61677419 L9.05832258,7.61677419 L10.6689032,6.00619355 L10.7583226,5.91303226
+        path1 = this.paper
+            .path(
+                `M11.4548387,7.61677419 L9.05832258,7.61677419 L10.6689032,6.00619355 L10.7583226,5.91303226
          C11.7390968,4.93212903 13.2251613,4.7643871 14.3787097,5.40967742 C14.0202581,6.68322581 12.8500645,7.61677419
-         11.4620645,7.61677419 L11.4548387,7.61677419`).attr({
+         11.4620645,7.61677419 L11.4548387,7.61677419`
+            )
+            .attr({
                 stroke: this.stroke,
                 fill: '#FFF101',
                 'stroke-width': this.strokeWidth
             });
         path1.transform('T' + startX + ',' + startY);
 
-        path1 = this.paper.path(`M10.7470968,10.192 L9.05251613,8.49741935 L11.3301935,8.49741935 L11.4593548,8.49470968
+        path1 = this.paper
+            .path(
+                `M10.7470968,10.192 L9.05251613,8.49741935 L11.3301935,8.49741935 L11.4593548,8.49470968
          C12.8464516,8.49483871 14.0157419,9.42696774 14.3752258,10.6989677 C13.2211613,11.3459355 11.7338065,11.1787097
          10.752129,10.1970323 L10.7470968,10.192M8.43729032,11.5174194 L8.43729032,9.12090323 L10.047871,10.7314839 L10.1411613,10.8209032
          C11.1219355,11.8018065 11.2896774,13.2876129 10.6443871,14.4412903 C9.37083871,14.0828387 8.43729032,12.9127742
@@ -175,7 +197,9 @@ export class RaphaelIconAlfrescoPublishDirective extends RaphaelBase implements
          L7.55922581,11.5418065 C7.55922581,12.9289032 6.62709677,14.0983226 5.35509677,14.4578065 C4.708,13.3036129 4.87535484,11.8162581
          5.85690323,10.8347097 L5.86193548,10.8296774M4.53251613,8.50993548 L6.92903226,8.50993548 L5.31845161,10.1205161
          L5.22903226,10.2136774 C4.24812903,11.1945806 2.76219355,11.3623226 1.60851613,10.7170323 C1.96709677,9.44335484
-         3.13716129,8.50993548 4.52529032,8.50993548 L4.53251613,8.50993548`).attr({
+         3.13716129,8.50993548 4.52529032,8.50993548 L4.53251613,8.50993548`
+            )
+            .attr({
                 stroke: this.stroke,
                 fill: '#45AB47',
                 'stroke-width': this.strokeWidth

lib/insights/src/lib/diagram/components/raphael/icons/raphael-icon-box-publish.component.ts

@@ -16,15 +16,14 @@
  */
 
 /* cSpell:disable */
-import { Directive, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Directive, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { Point } from './../models/point';
+import { Point } from '../models/point';
-import { RaphaelBase } from './../raphael-base';
+import { RaphaelBase } from '../raphael-base';
-import { RaphaelService } from './../raphael.service';
 
 /**
  * Directive selectors without adf- prefix will be deprecated on 3.0.0
  */
-@Directive({selector: 'adf-raphael-icon-box-publish, raphael-icon-box-publish'})
+@Directive({ selector: 'adf-raphael-icon-box-publish, raphael-icon-box-publish' })
 export class RaphaelIconBoxPublishDirective extends RaphaelBase implements OnInit {
     @Input()
     paper: any;
@@ -50,11 +49,6 @@ export class RaphaelIconBoxPublishDirective extends RaphaelBase implements OnIni
     @Input()
     fillOpacity: any;
 
-    constructor(public elementRef: ElementRef,
-                raphaelService: RaphaelService) {
-        super(elementRef, raphaelService);
-    }
-
     ngOnInit() {
         this.draw(this.position);
     }
@@ -62,13 +56,14 @@ export class RaphaelIconBoxPublishDirective extends RaphaelBase implements OnIni
     draw(position: Point) {
         const image = this.paper.image();
 
-        image.attr({x: position.x});
+        image.attr({ x: position.x });
-        image.attr({y: position.y});
+        image.attr({ y: position.y });
-        image.attr({id: 'image3398'});
+        image.attr({ id: 'image3398' });
-        image.attr({preserveAspectRatio: 'none'});
+        image.attr({ preserveAspectRatio: 'none' });
-        image.attr({height: '16'});
+        image.attr({ height: '16' });
-        image.attr({width: '17'});
+        image.attr({ width: '17' });
-        image.attr({src: `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAjCAYAAADxG9hnAAAABmJLR0QA/wD/AP+gvaeTAAAACXBI WXMAAA7DAAAO
+        image.attr({
+            src: `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAjCAYAAADxG9hnAAAABmJLR0QA/wD/AP+gvaeTAAAACXBI WXMAAA7DAAAO
         wwHHb6hkAAAAB3RJTUUH3wQXDxwCFNe28AAACsdJREFUWMOVmGmMXtV5x3/POfe+ y2yeGc/mwbMZG9tDMGBTKC5GCU4pbYmSRlmowlIFJWnUprSiy4dI/UA/9EsVifZDmy
         ZIxEpo1Cql UKICqbABG+x4X4M9iz2bxzOefXnfee+95zz9cN9Z7NqVeqSje3XPec/5n/Ns//8rAAd6xvj0lmYA VJWTI9fN2d5BikslrDEYY0ABIX0aUBUUUJS1TZB0HZS
         lUsz8fBHF09neKnFU0t964B5trcoqwA8O fsI3HtmW/u7Hx3p5+oHNqCr7DpzLX3dh1+xC4Z7p2dnGKE7UGmOsNTYFIuXtUlQqsgJkGSdrgBRL 8dLCYlRUUTa1NrYXiqWZ
@@ -97,6 +92,7 @@ export class RaphaelIconBoxPublishDirective extends RaphaelBase implements OnIni
         s9bIsyC1dzTXpYuLsLyskbL2 Lj9FTDpuZGVsZW5ZKouk7+k/CZKaQiAwQmgt+UAIrGFgZJSPD//y9Lee/vL3gj0P7XRDV6/9zcGD B39obEBXexvWeJwX3HJNuNFJVo0js
         sJPV+XoKpsTkbJUNRj1ZeAGj/JJ/xAffvD+bPuGxn8TkUUB +MdX9mUix99fm5r7eldXV9jR3ka+IpdGg9eyxExt4ctJR8vMWVbASJmHKcYuy1NTHhdEPOphYXGR viuDjA
         4Nz9XlzasvfucPXwCQH+z7Kd949il6e3qCt97d/xdjUzNfyVTUbAyy2bwxqWwymBuqpV/z XMtlRTXVyUawYjDWrgDxeESdxHFpJi4sjqyvrXntxT/65ssAR06dSw/zzz/6
-        F7753O8D8NHHR9rO nL+wZ2pqYl0cxyoIoqsm0LK49ehKKLNGp3gE1JRF+9qoU3JBIDVVuZGvffWLZ2oa7rgCcPLMBe7f 0c3/APbD8KaWhlC3AAAAAElFTkSuQmCC`});
+        F7753O8D8NHHR9rO nL+wZ2pqYl0cxyoIoqsm0LK49ehKKLNGp3gE1JRF+9qoU3JBIDVVuZGvffWLZ2oa7rgCcPLMBe7f 0c3/APbD8KaWhlC3AAAAAElFTkSuQmCC`
+        });
     }
 }

lib/insights/src/lib/diagram/components/raphael/icons/raphael-icon-business-rule.component.ts

@@ -15,15 +15,14 @@
  * limitations under the License.
  */
 
-import { Directive, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Directive, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { Point } from './../models/point';
+import { Point } from '../models/point';
-import { RaphaelBase } from './../raphael-base';
+import { RaphaelBase } from '../raphael-base';
-import { RaphaelService } from './../raphael.service';
 
 /**
  * Directive selectors without adf- prefix will be deprecated on 3.0.0
  */
-@Directive({selector: 'adf-raphael-icon-business-rule, raphael-icon-business-rule'})
+@Directive({ selector: 'adf-raphael-icon-business-rule, raphael-icon-business-rule' })
 export class RaphaelIconBusinessRuleDirective extends RaphaelBase implements OnInit {
     @Input()
     paper: any;
@@ -49,20 +48,18 @@ export class RaphaelIconBusinessRuleDirective extends RaphaelBase implements OnI
     @Input()
     fillOpacity: any;
 
-    constructor(public elementRef: ElementRef,
-                raphaelService: RaphaelService) {
-        super(elementRef, raphaelService);
-    }
-
     ngOnInit() {
-
         this.draw(this.position);
     }
 
     public draw(position: Point) {
-        const path1 = this.paper.path(`m 1,2 0,14 16,0 0,-14 z m 1.45458,5.6000386 2.90906,0 0,2.7999224 -2.90906,0 z m 4.36364,0 8.72718,0
+        const path1 = this.paper
+            .path(
+                `m 1,2 0,14 16,0 0,-14 z m 1.45458,5.6000386 2.90906,0 0,2.7999224 -2.90906,0 z m 4.36364,0 8.72718,0
          0,2.7999224 -8.72718,0 z m -4.36364,4.1998844 2.90906,0 0,2.800116 -2.90906,0 z m
-         4.36364,0 8.72718,0 0,2.800116 -8.72718,0 z`).attr({
+         4.36364,0 8.72718,0 0,2.800116 -8.72718,0 z`
+            )
+            .attr({
                 stroke: this.stroke,
                 fill: this.fillColors
             });

lib/insights/src/lib/diagram/components/raphael/icons/raphael-icon-camel.component.ts

@@ -15,15 +15,14 @@
  * limitations under the License.
  */
 
-import { Directive, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Directive, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { Point } from './../models/point';
+import { Point } from '../models/point';
-import { RaphaelBase } from './../raphael-base';
+import { RaphaelBase } from '../raphael-base';
-import { RaphaelService } from './../raphael.service';
 
 /**
  * Directive selectors without adf- prefix will be deprecated on 3.0.0
  */
-@Directive({selector: 'adf-raphael-icon-camel, raphael-icon-camel'})
+@Directive({ selector: 'adf-raphael-icon-camel, raphael-icon-camel' })
 export class RaphaelIconCamelDirective extends RaphaelBase implements OnInit {
     @Input()
     paper: any;
@@ -49,17 +48,14 @@ export class RaphaelIconCamelDirective extends RaphaelBase implements OnInit {
     @Input()
     fillOpacity: any;
 
-    constructor(public elementRef: ElementRef,
-                raphaelService: RaphaelService) {
-        super(elementRef, raphaelService);
-    }
-
     ngOnInit() {
         this.draw(this.position);
     }
 
     draw(position: Point) {
-        const path1 = this.paper.path(`m 8.1878027,15.383782 c -0.824818,-0.3427 0.375093,-1.1925 0.404055,-1.7743 0.230509,-0.8159
+        const path1 = this.paper
+            .path(
+                `m 8.1878027,15.383782 c -0.824818,-0.3427 0.375093,-1.1925 0.404055,-1.7743 0.230509,-0.8159
          -0.217173,-1.5329 -0.550642,-2.2283 -0.106244,-0.5273 -0.03299,-1.8886005 -0.747194,-1.7818005 -0.712355,0.3776 -0.9225,1.2309005
          -1.253911,1.9055005 -0.175574,1.0874 -0.630353,2.114 -0.775834,3.2123 -0.244009,0.4224 -1.741203,0.3888 -1.554386,-0.1397
          0.651324,-0.3302 1.13227,-0.9222 1.180246,-1.6705 0.0082,-0.7042 -0.133578,-1.3681 0.302178,-2.0083 0.08617,-0.3202
@@ -78,7 +74,9 @@ export class RaphaelIconCamelDirective extends RaphaelBase implements OnInit {
          -0.634619,-0.1004 -1.251945,0.6779 -1.956789,0.7408 -0.6065893,-0.038 -1.0354363,-0.06 -0.8495673,0.6969005 0.01681,0.711
          0.152396,1.3997 0.157345,2.1104 0.07947,0.7464 0.171287,1.4944 0.238271,2.2351 0.237411,1.0076 -0.687542,1.1488 -1.414811,0.8598
          z m 6.8675483,-1.8379 c 0.114364,-0.3658 0.206751,-1.2704 -0.114466,-1.3553 -0.152626,0.5835 -0.225018,1.1888 -0.227537,1.7919
-         0.147087,-0.1166 0.265559,-0.2643 0.342003,-0.4366 z`).attr({
+         0.147087,-0.1166 0.265559,-0.2643 0.342003,-0.4366 z`
+            )
+            .attr({
                 stroke: this.stroke,
                 fill: this.fillColors
             });

lib/insights/src/lib/diagram/components/raphael/icons/raphael-icon-error.component.ts

@@ -15,15 +15,14 @@
  * limitations under the License.
  */
 
-import { Directive, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Directive, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { Point } from './../models/point';
+import { Point } from '../models/point';
-import { RaphaelBase } from './../raphael-base';
+import { RaphaelBase } from '../raphael-base';
-import { RaphaelService } from './../raphael.service';
 
 /**
  * Directive selectors without adf- prefix will be deprecated on 3.0.0
  */
-@Directive({selector: 'adf-raphael-icon-error, raphael-icon-error'})
+@Directive({ selector: 'adf-raphael-icon-error, raphael-icon-error' })
 export class RaphaelIconErrorDirective extends RaphaelBase implements OnInit {
     @Input()
     paper: any;
@@ -49,18 +48,17 @@ export class RaphaelIconErrorDirective extends RaphaelBase implements OnInit {
     @Input()
     fillOpacity: any;
 
-    constructor(public elementRef: ElementRef,
-                raphaelService: RaphaelService) {
-        super(elementRef, raphaelService);
-    }
-
     ngOnInit() {
         this.draw(this.position);
     }
 
     draw(position: Point) {
-        const path1 = this.paper.path(`M 22.820839,11.171502 L 19.36734,24.58992 L 13.54138,14.281819 L 9.3386512,20.071607
+        const path1 = this.paper
-        L 13.048949,6.8323057 L 18.996148,16.132659 L 22.820839,11.171502 z`).attr({
+            .path(
+                `M 22.820839,11.171502 L 19.36734,24.58992 L 13.54138,14.281819 L 9.3386512,20.071607
+        L 13.048949,6.8323057 L 18.996148,16.132659 L 22.820839,11.171502 z`
+            )
+            .attr({
                 opacity: 1,
                 stroke: this.stroke,
                 fill: this.fillColors

lib/insights/src/lib/diagram/components/raphael/icons/raphael-icon-google-drive-publish.component.ts

@@ -15,15 +15,14 @@
  * limitations under the License.
  */
 
-import { Directive, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Directive, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { Point } from './../models/point';
+import { Point } from '../models/point';
-import { RaphaelBase } from './../raphael-base';
+import { RaphaelBase } from '../raphael-base';
-import { RaphaelService } from './../raphael.service';
 
 /**
  * Directive selectors without adf- prefix will be deprecated on 3.0.0
  */
-@Directive({selector: 'adf-raphael-icon-google-drive-publish, raphael-icon-google-drive-publish'})
+@Directive({ selector: 'adf-raphael-icon-google-drive-publish, raphael-icon-google-drive-publish' })
 export class RaphaelIconGoogleDrivePublishDirective extends RaphaelBase implements OnInit {
     @Input()
     paper: any;
@@ -49,11 +48,6 @@ export class RaphaelIconGoogleDrivePublishDirective extends RaphaelBase implemen
     @Input()
     fillOpacity: any;
 
-    constructor(public elementRef: ElementRef,
-                raphaelService: RaphaelService) {
-        super(elementRef, raphaelService);
-    }
-
     ngOnInit() {
         this.draw(this.position);
     }
@@ -61,18 +55,20 @@ export class RaphaelIconGoogleDrivePublishDirective extends RaphaelBase implemen
     draw(position: Point) {
         const image = this.paper.image();
 
-        image.attr({x: position.x});
+        image.attr({ x: position.x });
-        image.attr({y: position.y});
+        image.attr({ y: position.y });
-        image.attr({id: 'image3398'});
+        image.attr({ id: 'image3398' });
-        image.attr({preserveAspectRatio: 'none'});
+        image.attr({ preserveAspectRatio: 'none' });
-        image.attr({height: '16'});
+        image.attr({ height: '16' });
-        image.attr({width: '17'});
+        image.attr({ width: '17' });
-        image.attr({src: `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBA
+        image.attr({
+            src: `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBA
         JqcGAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAIHSURBVDiNpVI7a1RREP7mzLl3d+9mScxaiBLFwohxQcXCwjwao/gqFAQhRGOphQgmgs9oGxaV
         gFhpYPUPGMFCCzEqCgETg0uK4CuFoLhZyWNf994zFrqy9xJWwQ+mOB8z33wzZ4D/BIWJppG+plstc+mjK9yttbzALHExcoDaRxdqeRUWcFkGBz7G1s152CCQ7dUAqNOLuZf
         qOmi439MmhifF86e6uLj4MFXoCuVXWPkp2vZkZlkHYvRNAJYwtz79oXdMLfFMSMD2Dd9YdoSGTO9hQLoBQBESQvLpUNaZD1sGsN8d390dFBjpiwooHVBW6tvXCr2H4EFo6L
         wR97pkj9h/BByWfgDrA4lRTWDvHIPOAihVaWO8txCkygu50wBAsbsnWpT2pwHEA/sgXC30Zq4BwJfHHRdY0R4nxp5mbFGEJIB5l2SjVtoMhYsBfC5EikPVh7Z4uFyqnKq43
         hoQFrXCIydCjZbWlyl+79gzCDprq1dPnnyhS8nNZDmvRVmbAIDhKyL5/e2kjKi4pbwxLQZniDAOgAHAybW90aXmncp2xoSsvdVDMWBAAi69sqsvqsLxzARB7vxaMHvJDwcT
-        ZCVeClnhIwqC5Pb08Kp3CgBUxT4PINc4u+u54uY8FLfXLQa+sx0dRNV2eXSi6OzryK2c7Wkl0msB5OuG0JVsOvnqL03+DT8BxkC5RkIpSlIAAAAASUVORK5CYII=`});
+        ZCVeClnhIwqC5Pb08Kp3CgBUxT4PINc4u+u54uY8FLfXLQa+sx0dRNV2eXSi6OzryK2c7Wkl0msB5OuG0JVsOvnqL03+DT8BxkC5RkIpSlIAAAAASUVORK5CYII=`
+        });
     }
 }

lib/insights/src/lib/diagram/components/raphael/icons/raphael-icon-manual.component.ts

@@ -15,15 +15,14 @@
  * limitations under the License.
  */
 
-import { Directive, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Directive, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { Point } from './../models/point';
+import { Point } from '../models/point';
-import { RaphaelBase } from './../raphael-base';
+import { RaphaelBase } from '../raphael-base';
-import { RaphaelService } from './../raphael.service';
 
 /**
  * Directive selectors without adf- prefix will be deprecated on 3.0.0
  */
-@Directive({selector: 'adf-raphael-icon-manual, raphael-icon-manual'})
+@Directive({ selector: 'adf-raphael-icon-manual, raphael-icon-manual' })
 export class RaphaelIconManualDirective extends RaphaelBase implements OnInit {
     @Input()
     paper: any;
@@ -49,17 +48,14 @@ export class RaphaelIconManualDirective extends RaphaelBase implements OnInit {
     @Input()
     fillOpacity: any;
 
-    constructor(public elementRef: ElementRef,
-                raphaelService: RaphaelService) {
-        super(elementRef, raphaelService);
-    }
-
     ngOnInit() {
         this.draw(this.position);
     }
 
     draw(position: Point) {
-        const path1 = this.paper.path(`m 17,9.3290326 c -0.0069,0.5512461 -0.455166,1.0455894 -0.940778,1.0376604 l -5.792746,0 c
+        const path1 = this.paper
+            .path(
+                `m 17,9.3290326 c -0.0069,0.5512461 -0.455166,1.0455894 -0.940778,1.0376604 l -5.792746,0 c
         0.0053,0.119381 0.0026,0.237107 0.0061,0.355965 l 5.154918,0 c 0.482032,-0.0096 0.925529,0.49051 0.919525,1.037574 -0.0078,0.537128
         -0.446283,1.017531 -0.919521,1.007683 l -5.245273,0 c -0.01507,0.104484 -0.03389,0.204081 -0.05316,0.301591 l 2.630175,0
         c 0.454137,-0.0096 0.872112,0.461754 0.866386,0.977186 C 13.619526,14.554106 13.206293,15.009498 12.75924,15 L 3.7753054,15
@@ -68,7 +64,9 @@ export class RaphaelIconManualDirective extends RaphaelBase implements OnInit {
         6.8053358,-2.40497 7.2587847,-2.8052901 0.453484,-0.40032 1.660213,1.4859942 0.04775,2.4010487 C 8.5332315,5.882394
         8.507351,5.7996113 8.4370292,5.7936859 l 6.3569748,-0.00871 c 0.497046,-0.00958 0.952273,0.5097676 0.94612,1.0738232
         -0.0053,0.556126 -0.456176,1.0566566 -0.94612,1.0496854 l -4.72435,0 c 0.01307,0.1149374 0.0244,0.2281319 0.03721,0.3498661
-        l 5.952195,0 c 0.494517,-0.00871 0.947906,0.5066305 0.940795,1.0679848 z`).attr({
+        l 5.952195,0 c 0.494517,-0.00871 0.947906,0.5066305 0.940795,1.0679848 z`
+            )
+            .attr({
                 opacity: 1,
                 stroke: this.stroke,
                 fill: this.fillColors

lib/insights/src/lib/diagram/components/raphael/icons/raphael-icon-message.component.ts

@@ -15,15 +15,14 @@
  * limitations under the License.
  */
 
-import { Directive, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Directive, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { Point } from './../models/point';
+import { Point } from '../models/point';
-import { RaphaelBase } from './../raphael-base';
+import { RaphaelBase } from '../raphael-base';
-import { RaphaelService } from './../raphael.service';
 
 /**
  * Directive selectors without adf- prefix will be deprecated on 3.0.0
  */
-@Directive({selector: 'adf-raphael-icon-message, raphael-icon-message'})
+@Directive({ selector: 'adf-raphael-icon-message, raphael-icon-message' })
 export class RaphaelIconMessageDirective extends RaphaelBase implements OnInit {
     @Input()
     paper: any;
@@ -49,18 +48,17 @@ export class RaphaelIconMessageDirective extends RaphaelBase implements OnInit {
     @Input()
     fillOpacity: any;
 
-    constructor(public elementRef: ElementRef,
-                raphaelService: RaphaelService) {
-        super(elementRef, raphaelService);
-    }
-
     ngOnInit() {
         this.draw(this.position);
     }
 
     draw(position: Point) {
-        const path1 = this.paper.path(`M 1 3 L 9 11 L 17 3 L 1 3 z M 1 5 L 1 13 L 5 9 L 1 5 z M 17 5 L 13 9 L 17 13 L 17 5 z M 6 10 L 1 15
+        const path1 = this.paper
-        L 17 15 L 12 10 L 9 13 L 6 10 z`).attr({
+            .path(
+                `M 1 3 L 9 11 L 17 3 L 1 3 z M 1 5 L 1 13 L 5 9 L 1 5 z M 17 5 L 13 9 L 17 13 L 17 5 z M 6 10 L 1 15
+        L 17 15 L 12 10 L 9 13 L 6 10 z`
+            )
+            .attr({
                 opacity: this.fillOpacity,
                 stroke: this.stroke,
                 strokeWidth: this.strokeWidth,

lib/insights/src/lib/diagram/components/raphael/icons/raphael-icon-mule.component.ts

@@ -15,15 +15,14 @@
  * limitations under the License.
  */
 
-import { Directive, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Directive, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { Point } from './../models/point';
+import { Point } from '../models/point';
-import { RaphaelBase } from './../raphael-base';
+import { RaphaelBase } from '../raphael-base';
-import { RaphaelService } from './../raphael.service';
 
 /**
  * Directive selectors without adf- prefix will be deprecated on 3.0.0
  */
-@Directive({selector: 'adf-raphael-icon-mule, raphael-icon-mule'})
+@Directive({ selector: 'adf-raphael-icon-mule, raphael-icon-mule' })
 export class RaphaelIconMuleDirective extends RaphaelBase implements OnInit {
     @Input()
     paper: any;
@@ -49,22 +48,21 @@ export class RaphaelIconMuleDirective extends RaphaelBase implements OnInit {
     @Input()
     fillOpacity: any;
 
-    constructor(public elementRef: ElementRef,
-                raphaelService: RaphaelService) {
-        super(elementRef, raphaelService);
-    }
-
     ngOnInit() {
         this.draw(this.position);
     }
 
     draw(position: Point) {
-        const path1 = this.paper.path(`M 8,0 C 3.581722,0 0,3.5817 0,8 c 0,4.4183 3.581722,8 8,8 4.418278,0 8,-3.5817 8,-8 L 16,7.6562
+        const path1 = this.paper
+            .path(
+                `M 8,0 C 3.581722,0 0,3.5817 0,8 c 0,4.4183 3.581722,8 8,8 4.418278,0 8,-3.5817 8,-8 L 16,7.6562
          C 15.813571,3.3775 12.282847,0 8,0 z M 5.1875,2.7812 8,7.3437 10.8125,2.7812 c 1.323522,0.4299 2.329453,1.5645 2.8125,2.8438
          1.136151,2.8609 -0.380702,6.4569 -3.25,7.5937 -0.217837,-0.6102 -0.438416,-1.2022 -0.65625,-1.8125 0.701032,-0.2274
          1.313373,-0.6949 1.71875,-1.3125 0.73624,-1.2317 0.939877,-2.6305 -0.03125,-4.3125 l -2.75,4.0625 -0.65625,0 -0.65625,0 -2.75,-4
          C 3.5268433,7.6916 3.82626,8.862 4.5625,10.0937 4.967877,10.7113 5.580218,11.1788 6.28125,11.4062 6.063416,12.0165 5.842837,12.6085
-         5.625,13.2187 2.755702,12.0819 1.238849,8.4858 2.375,5.625 2.858047,4.3457 3.863978,3.2112 5.1875,2.7812 z`).attr({
+         5.625,13.2187 2.755702,12.0819 1.238849,8.4858 2.375,5.625 2.858047,4.3457 3.863978,3.2112 5.1875,2.7812 z`
+            )
+            .attr({
                 stroke: this.stroke,
                 fill: this.fillColors
             });

lib/insights/src/lib/diagram/components/raphael/icons/raphael-icon-receive.component.ts

@@ -15,15 +15,14 @@
  * limitations under the License.
  */
 
-import { Directive, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Directive, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { Point } from './../models/point';
+import { Point } from '../models/point';
-import { RaphaelBase } from './../raphael-base';
+import { RaphaelBase } from '../raphael-base';
-import { RaphaelService } from './../raphael.service';
 
 /**
  * Directive selectors without adf- prefix will be deprecated on 3.0.0
  */
-@Directive({selector: 'adf-raphael-icon-receive, raphael-icon-receive'})
+@Directive({ selector: 'adf-raphael-icon-receive, raphael-icon-receive' })
 export class RaphaelIconReceiveDirective extends RaphaelBase implements OnInit {
     @Input()
     paper: any;
@@ -49,18 +48,17 @@ export class RaphaelIconReceiveDirective extends RaphaelBase implements OnInit {
     @Input()
     fillOpacity: any;
 
-    constructor(public elementRef: ElementRef,
-                raphaelService: RaphaelService) {
-        super(elementRef, raphaelService);
-    }
-
     ngOnInit() {
         this.draw(this.position);
     }
 
     draw(position: Point) {
-        const path1 = this.paper.path(`m 0.5,2.5 0,13 17,0 0,-13 z M 2,4 6.5,8.5 2,13 z M 4,4 14,4 9,9 z m 12,0 0,9 -4.5,-4.5 z
+        const path1 = this.paper
-         M 7.5,9.5 9,11 10.5,9.5 15,14 3,14 z`).attr({
+            .path(
+                `m 0.5,2.5 0,13 17,0 0,-13 z M 2,4 6.5,8.5 2,13 z M 4,4 14,4 9,9 z m 12,0 0,9 -4.5,-4.5 z
+         M 7.5,9.5 9,11 10.5,9.5 15,14 3,14 z`
+            )
+            .attr({
                 stroke: this.stroke,
                 fill: this.fillColors
             });

lib/insights/src/lib/diagram/components/raphael/icons/raphael-icon-rest-call.component.ts

@@ -15,15 +15,14 @@
  * limitations under the License.
  */
 
-import { Directive, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Directive, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { Point } from './../models/point';
+import { Point } from '../models/point';
-import { RaphaelBase } from './../raphael-base';
+import { RaphaelBase } from '../raphael-base';
-import { RaphaelService } from './../raphael.service';
 
 /**
  * Directive selectors without adf- prefix will be deprecated on 3.0.0
  */
-@Directive({selector: 'adf-raphael-icon-rest-call, raphael-icon-rest-call'})
+@Directive({ selector: 'adf-raphael-icon-rest-call, raphael-icon-rest-call' })
 export class RaphaelIconRestCallDirective extends RaphaelBase implements OnInit {
     @Input()
     paper: any;
@@ -49,18 +48,14 @@ export class RaphaelIconRestCallDirective extends RaphaelBase implements OnInit
     @Input()
     fillOpacity: any;
 
-    constructor(public elementRef: ElementRef,
-                raphaelService: RaphaelService) {
-        super(elementRef, raphaelService);
-    }
-
     ngOnInit() {
-
         this.draw(this.position);
     }
 
     public draw(position: Point) {
-        const path1 = this.paper.path(`m 16.704699,5.9229055 q 0.358098,0 0.608767,0.2506681 0.250669,0.250668 0.250669,0.6087677 0,0.3580997
+        const path1 = this.paper
+            .path(
+                `m 16.704699,5.9229055 q 0.358098,0 0.608767,0.2506681 0.250669,0.250668 0.250669,0.6087677 0,0.3580997
          -0.250669,0.6087677 -0.250669,0.2506679 -0.608767,0.2506679 -0.358098,0 -0.608767,-0.2506679 -0.250669,-0.250668
          -0.250669,-0.6087677 0,-0.3580997 0.250669,-0.6087677 0.250669,-0.2506681 0.608767,-0.2506681 z m 2.578308,-2.0053502 q
          -2.229162,0 -3.854034,0.6759125 -1.624871,0.6759067 -3.227361,2.2694472 -0.716197,0.725146 -1.575633,1.7457293 L
@@ -69,7 +64,9 @@ export class RaphaelIconRestCallDirective extends RaphaelBase implements OnInit
          -0.76096,2.470876 q -0.009,0.02687 -0.009,0.08057 0,0.125338 0.08058,0.205905 l 0.572957,0.572958 q 0.170096,0.152194
          0.349146,0.04476 l 3.437744,-2.005351 q 0.125335,-0.08953 0.143239,-0.232763 l 0.17905,-3.392986 q 1.02058,-0.859435
          1.745729,-1.575629 1.67411,-1.6830612 2.309735,-3.2049805 0.635625,-1.5219191 0.635625,-3.8585111 0,-0.1253369 -0.08505,-0.2148575
-         -0.08505,-0.089526 -0.201431,-0.089526 z`).attr({
+         -0.08505,-0.089526 -0.201431,-0.089526 z`
+            )
+            .attr({
                 stroke: this.stroke,
                 fill: this.fillColors
             });

lib/insights/src/lib/diagram/components/raphael/icons/raphael-icon-script.component.ts

@@ -15,15 +15,14 @@
  * limitations under the License.
  */
 
-import { Directive, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Directive, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { Point } from './../models/point';
+import { Point } from '../models/point';
-import { RaphaelBase } from './../raphael-base';
+import { RaphaelBase } from '../raphael-base';
-import { RaphaelService } from './../raphael.service';
 
 /**
  * Directive selectors without adf- prefix will be deprecated on 3.0.0
  */
-@Directive({selector: 'adf-raphael-icon-script, raphael-icon-script'})
+@Directive({ selector: 'adf-raphael-icon-script, raphael-icon-script' })
 export class RaphaelIconScriptDirective extends RaphaelBase implements OnInit {
     @Input()
     paper: any;
@@ -49,19 +48,18 @@ export class RaphaelIconScriptDirective extends RaphaelBase implements OnInit {
     @Input()
     fillOpacity: any;
 
-    constructor(public elementRef: ElementRef,
-                raphaelService: RaphaelService) {
-        super(elementRef, raphaelService);
-    }
-
     ngOnInit() {
         this.draw(this.position);
     }
 
     draw(position: Point) {
-        const path1 = this.paper.path(`m 5,2 0,0.094 c 0.23706,0.064 0.53189,0.1645 0.8125,0.375 0.5582,0.4186 1.05109,1.228 1.15625,2.5312
+        const path1 = this.paper
+            .path(
+                `m 5,2 0,0.094 c 0.23706,0.064 0.53189,0.1645 0.8125,0.375 0.5582,0.4186 1.05109,1.228 1.15625,2.5312
         l 8.03125,0 1,0 1,0 c 0,-3 -2,-3 -2,-3 l -10,0 z M 4,3 4,13 2,13 c 0,3 2,3 2,3 l 9,0 c 0,0 2,0 2,-3 L 15,6 6,6 6,5.5 C 6,4.1111
-        5.5595,3.529 5.1875,3.25 4.8155,2.971 4.5,3 4.5,3 L 4,3 z`).attr({
+        5.5595,3.529 5.1875,3.25 4.8155,2.971 4.5,3 4.5,3 L 4,3 z`
+            )
+            .attr({
                 stroke: this.stroke,
                 fill: this.fillColors
             });

lib/insights/src/lib/diagram/components/raphael/icons/raphael-icon-send.component.ts

@@ -15,15 +15,14 @@
  * limitations under the License.
  */
 
-import { Directive, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Directive, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { Point } from './../models/point';
+import { Point } from '../models/point';
-import { RaphaelBase } from './../raphael-base';
+import { RaphaelBase } from '../raphael-base';
-import { RaphaelService } from './../raphael.service';
 
 /**
  * Directive selectors without adf- prefix will be deprecated on 3.0.0
  */
-@Directive({selector: 'adf-raphael-icon-send, raphael-icon-send'})
+@Directive({ selector: 'adf-raphael-icon-send, raphael-icon-send' })
 export class RaphaelIconSendDirective extends RaphaelBase implements OnInit {
     @Input()
     paper: any;
@@ -49,18 +48,17 @@ export class RaphaelIconSendDirective extends RaphaelBase implements OnInit {
     @Input()
     fillOpacity: any;
 
-    constructor(public elementRef: ElementRef,
-                raphaelService: RaphaelService) {
-        super(elementRef, raphaelService);
-    }
-
     ngOnInit() {
         this.draw(this.position);
     }
 
     draw(position: Point) {
-        const path1 = this.paper.path(`M 1 3 L 9 11 L 17 3 L 1 3 z M 1 5 L 1 13 L 5 9 L 1 5 z M 17 5 L 13 9 L 17 13 L 17 5 z M 6 10 L 1 15
+        const path1 = this.paper
-            L 17 15 L 12 10 L 9 13 L 6 10 z`).attr({
+            .path(
+                `M 1 3 L 9 11 L 17 3 L 1 3 z M 1 5 L 1 13 L 5 9 L 1 5 z M 17 5 L 13 9 L 17 13 L 17 5 z M 6 10 L 1 15
+            L 17 15 L 12 10 L 9 13 L 6 10 z`
+            )
+            .attr({
                 stroke: this.stroke,
                 fill: this.fillColors
             });

lib/insights/src/lib/diagram/components/raphael/icons/raphael-icon-service.component.ts

@@ -15,15 +15,14 @@
  * limitations under the License.
  */
 
-import { Directive, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Directive, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { Point } from './../models/point';
+import { Point } from '../models/point';
-import { RaphaelBase } from './../raphael-base';
+import { RaphaelBase } from '../raphael-base';
-import { RaphaelService } from './../raphael.service';
 
 /**
  * Directive selectors without adf- prefix will be deprecated on 3.0.0
  */
-@Directive({selector: 'adf-raphael-icon-service, raphael-icon-service'})
+@Directive({ selector: 'adf-raphael-icon-service, raphael-icon-service' })
 export class RaphaelIconServiceDirective extends RaphaelBase implements OnInit {
     @Input()
     paper: any;
@@ -49,17 +48,14 @@ export class RaphaelIconServiceDirective extends RaphaelBase implements OnInit {
     @Input()
     fillOpacity: any;
 
-    constructor(public elementRef: ElementRef,
-                raphaelService: RaphaelService) {
-        super(elementRef, raphaelService);
-    }
-
     ngOnInit() {
         this.draw(this.position);
     }
 
     draw(position: Point) {
-        const path1 = this.paper.path('M 8,1 7.5,2.875 c 0,0 -0.02438,0.250763 -0.40625,0.4375 C 7.05724,3.330353 7.04387,3.358818 7,3.375' +
+        const path1 = this.paper
+            .path(
+                'M 8,1 7.5,2.875 c 0,0 -0.02438,0.250763 -0.40625,0.4375 C 7.05724,3.330353 7.04387,3.358818 7,3.375' +
                     ' 6.6676654,3.4929791 6.3336971,3.6092802 6.03125,3.78125 6.02349,3.78566 6.007733,3.77681 6,3.78125 5.8811373,3.761018' +
                     ' 5.8125,3.71875 5.8125,3.71875 l -1.6875,-1 -1.40625,1.4375 0.96875,1.65625 c 0,0 0.065705,0.068637 0.09375,0.1875' +
                     ' 0.002,0.00849 -0.00169,0.022138 0,0.03125 C 3.6092802,6.3336971 3.4929791,6.6676654 3.375,7 3.3629836,7.0338489' +
@@ -76,7 +72,9 @@ export class RaphaelIconServiceDirective extends RaphaelBase implements OnInit {
                     ' 0,-0.71875 0,-0.71875 L 15.40625,4.0625 14,2.625 l -1.65625,1 c 0,0 -0.253337,0.1695664 -0.71875,-0.03125 l -0.03125,0 C' +
                     ' 11.405359,3.5035185 11.198648,3.4455201 11,3.375 10.95613,3.3588185 10.942759,3.3303534 10.90625,3.3125 10.524382,3.125763' +
                     ' 10.5,2.875 10.5,2.875 L 10,1 8,1 z m 1,5 c 1.656854,0 3,1.3431458 3,3 0,1.656854 -1.343146,3 -3,3 C 7.3431458,12' +
-            ' 6,10.656854 6,9 6,7.3431458 7.3431458,6 9,6 z').attr({
+                    ' 6,10.656854 6,9 6,7.3431458 7.3431458,6 9,6 z'
+            )
+            .attr({
                 opacity: 1,
                 stroke: this.stroke,
                 fill: this.fillColors

lib/insights/src/lib/diagram/components/raphael/icons/raphael-icon-signal.component.ts

@@ -15,15 +15,14 @@
  * limitations under the License.
  */
 
-import { Directive, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Directive, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { Point } from './../models/point';
+import { Point } from '../models/point';
-import { RaphaelBase } from './../raphael-base';
+import { RaphaelBase } from '../raphael-base';
-import { RaphaelService } from './../raphael.service';
 
 /**
  * Directive selectors without adf- prefix will be deprecated on 3.0.0
  */
-@Directive({selector: 'adf-raphael-icon-signal, raphael-icon-signal'})
+@Directive({ selector: 'adf-raphael-icon-signal, raphael-icon-signal' })
 export class RaphaelIconSignalDirective extends RaphaelBase implements OnInit {
     @Input()
     paper: any;
@@ -49,13 +48,7 @@ export class RaphaelIconSignalDirective extends RaphaelBase implements OnInit {
     @Input()
     fillOpacity: any;
 
-    constructor(public elementRef: ElementRef,
-                raphaelService: RaphaelService) {
-        super(elementRef, raphaelService);
-    }
-
     ngOnInit() {
-
         this.draw(this.position);
     }
 

lib/insights/src/lib/diagram/components/raphael/icons/raphael-icon-timer.component.ts

@@ -15,15 +15,14 @@
  * limitations under the License.
  */
 
-import { Directive, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Directive, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { Point } from './../models/point';
+import { Point } from '../models/point';
-import { RaphaelBase } from './../raphael-base';
+import { RaphaelBase } from '../raphael-base';
-import { RaphaelService } from './../raphael.service';
 
 /**
  * Directive selectors without adf- prefix will be deprecated on 3.0.0
  */
-@Directive({selector: 'adf-raphael-icon-timer, raphael-icon-timer'})
+@Directive({ selector: 'adf-raphael-icon-timer, raphael-icon-timer' })
 export class RaphaelIconTimerDirective extends RaphaelBase implements OnInit {
     @Input()
     paper: any;
@@ -49,23 +48,22 @@ export class RaphaelIconTimerDirective extends RaphaelBase implements OnInit {
     @Input()
     fillOpacity: any;
 
-    constructor(public elementRef: ElementRef,
-                raphaelService: RaphaelService) {
-        super(elementRef, raphaelService);
-    }
-
     ngOnInit() {
         this.draw(this.position);
     }
 
     draw(position: Point) {
-        const path1 = this.paper.path(`M 10 0 C 4.4771525 0 0 4.4771525 0 10 C 0 15.522847 4.4771525 20 10 20 C 15.522847 20 20 15.522847 20
+        const path1 = this.paper
+            .path(
+                `M 10 0 C 4.4771525 0 0 4.4771525 0 10 C 0 15.522847 4.4771525 20 10 20 C 15.522847 20 20 15.522847 20
         10 C 20 4.4771525 15.522847 1.1842379e-15 10 0 z M 9.09375 1.03125 C 9.2292164 1.0174926 9.362825 1.0389311 9.5 1.03125 L 9.5 3.5
         L 10.5 3.5 L 10.5 1.03125 C 15.063526 1.2867831 18.713217 4.9364738 18.96875 9.5 L 16.5 9.5 L 16.5 10.5 L 18.96875 10.5 C 18.713217
         15.063526 15.063526 18.713217 10.5 18.96875 L 10.5 16.5 L 9.5 16.5 L 9.5 18.96875 C 4.9364738 18.713217 1.2867831 15.063526 1.03125
         10.5 L 3.5 10.5 L 3.5 9.5 L 1.03125 9.5 C 1.279102 5.0736488 4.7225326 1.4751713 9.09375 1.03125 z M 9.5 5 L 9.5 8.0625 C 8.6373007
         8.2844627 8 9.0680195 8 10 C 8 11.104569 8.8954305 12 10 12 C 10.931981 12 11.715537 11.362699 11.9375 10.5 L 14 10.5 L 14 9.5
-        L 11.9375 9.5 C 11.756642 8.7970599 11.20294 8.2433585 10.5 8.0625 L 10.5 5 L 9.5 5 z`).attr({
+        L 11.9375 9.5 C 11.756642 8.7970599 11.20294 8.2433585 10.5 8.0625 L 10.5 5 L 9.5 5 z`
+            )
+            .attr({
                 stroke: this.stroke,
                 fill: this.fillColors
             });

lib/insights/src/lib/diagram/components/raphael/icons/raphael-icon-user.component.ts

@@ -15,15 +15,14 @@
  * limitations under the License.
  */
 
-import { Directive, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Directive, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { Point } from './../models/point';
+import { Point } from '../models/point';
-import { RaphaelBase } from './../raphael-base';
+import { RaphaelBase } from '../raphael-base';
-import { RaphaelService } from './../raphael.service';
 
 /**
  * Directive selectors without adf- prefix will be deprecated on 3.0.0
  */
-@Directive({selector: 'adf-raphael-icon-user, raphael-icon-user'})
+@Directive({ selector: 'adf-raphael-icon-user, raphael-icon-user' })
 export class RaphaelIconUserDirective extends RaphaelBase implements OnInit {
     @Input()
     paper: any;
@@ -49,19 +48,18 @@ export class RaphaelIconUserDirective extends RaphaelBase implements OnInit {
     @Input()
     fillOpacity: any;
 
-    constructor(public elementRef: ElementRef,
-                raphaelService: RaphaelService) {
-        super(elementRef, raphaelService);
-    }
-
     ngOnInit() {
         this.draw(this.position);
     }
 
     draw(position: Point) {
-        const path1 = this.paper.path(`m 1,17 16,0 0,-1.7778 -5.333332,-3.5555 0,-1.7778 c 1.244444,0 1.244444,-2.3111 1.244444,-2.3111
+        const path1 = this.paper
+            .path(
+                `m 1,17 16,0 0,-1.7778 -5.333332,-3.5555 0,-1.7778 c 1.244444,0 1.244444,-2.3111 1.244444,-2.3111
         l 0,-3.0222 C 12.555557,0.8221 9.0000001,1.0001 9.0000001,1.0001 c 0,0 -3.5555556,-0.178 -3.9111111,3.5555 l 0,3.0222 c
-        0,0 0,2.3111 1.2444443,2.3111 l 0,1.7778 L 1,15.2222 1,17 17,17`).attr({
+        0,0 0,2.3111 1.2444443,2.3111 l 0,1.7778 L 1,15.2222 1,17 17,17`
+            )
+            .attr({
                 opacity: 1,
                 stroke: this.stroke,
                 fill: this.fillColors

lib/insights/src/lib/diagram/components/raphael/raphael-base.ts

@@ -15,18 +15,17 @@
  * limitations under the License.
  */
 
-import { ElementRef } from '@angular/core';
+import { Directive, ElementRef, inject } from '@angular/core';
 import { RaphaelService } from './raphael.service';
 
+@Directive()
 export class RaphaelBase {
+    private raphaelService = inject(RaphaelService);
+    private element = inject(ElementRef);
 
     paper: any;
 
-    public element: ElementRef;
+    constructor() {
-
+        this.paper = this.raphaelService.getInstance(this.element);
-    public constructor(element: ElementRef,
-                       private raphaelService: RaphaelService) {
-        this.element = element;
-        this.paper = this.raphaelService.getInstance(element);
     }
 }

lib/insights/src/lib/diagram/components/raphael/raphael-circle.component.ts

@@ -15,15 +15,14 @@
  * limitations under the License.
  */
 
-import { Directive, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Directive, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Point } from './models/point';
 import { RaphaelBase } from './raphael-base';
-import { RaphaelService } from './raphael.service';
 
 /**
  * Directive selectors without adf- prefix will be deprecated on 3.0.0
  */
-@Directive({selector: 'adf-raphael-circle, raphael-circle'})
+@Directive({ selector: 'adf-raphael-circle, raphael-circle' })
 export class RaphaelCircleDirective extends RaphaelBase implements OnInit {
     @Input()
     paper: any;
@@ -52,11 +51,6 @@ export class RaphaelCircleDirective extends RaphaelBase implements OnInit {
     @Output()
     error = new EventEmitter();
 
-    constructor(public elementRef: ElementRef,
-                raphaelService: RaphaelService) {
-        super(elementRef, raphaelService);
-    }
-
     ngOnInit() {
         const opts = {
             'stroke-width': this.strokeWidth,
@@ -69,7 +63,6 @@ export class RaphaelCircleDirective extends RaphaelBase implements OnInit {
     }
 
     draw(center: Point, radius: number, opts: any) {
-        const circle = this.paper.circle(center.x, center.y, radius).attr(opts);
+        return this.paper.circle(center.x, center.y, radius).attr(opts);
-        return circle;
     }
 }

lib/insights/src/lib/diagram/components/raphael/raphael-cross.component.ts

@@ -15,10 +15,9 @@
  * limitations under the License.
  */
 
-import { Directive, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Directive, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Point } from './models/point';
 import { RaphaelBase } from './raphael-base';
-import { RaphaelService } from './raphael.service';
 
 /**
  * Directive selectors without adf- prefix will be deprecated on 3.0.0
@@ -49,11 +48,6 @@ export class RaphaelCrossDirective extends RaphaelBase implements OnInit {
     @Output()
     error = new EventEmitter();
 
-    constructor(public elementRef: ElementRef,
-                raphaelService: RaphaelService) {
-        super(elementRef, raphaelService);
-    }
-
     ngOnInit() {
         const opts = {
             'stroke-width': this.strokeWidth,

lib/insights/src/lib/diagram/components/raphael/raphael-flow-arrow.component.ts

@@ -15,10 +15,9 @@
  * limitations under the License.
  */
 
-import { Directive, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Directive, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Polyline } from './polyline';
 import { RaphaelBase } from './raphael-base';
-import { RaphaelService } from './raphael.service';
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 declare let Raphael: any;
@@ -29,7 +28,7 @@ const SEQUENCE_FLOW_STROKE = 1.5;
 /**
  * Directive selectors without adf- prefix will be deprecated on 3.0.0
  */
-@Directive({selector: 'adf-raphael-flow-arrow, raphael-flow-arrow'})
+@Directive({ selector: 'adf-raphael-flow-arrow, raphael-flow-arrow' })
 export class RaphaelFlowArrowDirective extends RaphaelBase implements OnInit {
     @Input()
     paper: any;
@@ -40,11 +39,6 @@ export class RaphaelFlowArrowDirective extends RaphaelBase implements OnInit {
     @Output()
     error = new EventEmitter();
 
-    constructor(public elementRef: ElementRef,
-                raphaelService: RaphaelService) {
-        super(elementRef, raphaelService);
-    }
-
     ngOnInit() {
         this.draw(this.flow);
     }
@@ -57,19 +51,18 @@ export class RaphaelFlowArrowDirective extends RaphaelBase implements OnInit {
     drawLine(flow: any) {
         const polyline = new Polyline(flow.id, flow.waypoints, SEQUENCE_FLOW_STROKE, this.paper);
         polyline.element = this.paper.path(polyline.path);
-        polyline.element.attr({'stroke-width': SEQUENCE_FLOW_STROKE});
+        polyline.element.attr({ 'stroke-width': SEQUENCE_FLOW_STROKE });
-        polyline.element.attr({stroke: '#585858'});
+        polyline.element.attr({ stroke: '#585858' });
 
         polyline.element.node.id = this.flow.id;
 
         const lastLineIndex = polyline.getLinesCount() - 1;
-        const line = polyline.getLine(lastLineIndex);
+        return polyline.getLine(lastLineIndex);
-        return line;
     }
 
     drawArrow(line: any) {
         const doubleArrowWidth = 2 * ARROW_WIDTH;
-        const width = ARROW_WIDTH / 2 + .5;
+        const width = ARROW_WIDTH / 2 + 0.5;
         const arrowHead: any = this.paper.path('M0 0L-' + width + '-' + doubleArrowWidth + 'L' + width + ' -' + doubleArrowWidth + 'z');
 
         arrowHead.transform('t' + line.x2 + ',' + line.y2);

lib/insights/src/lib/diagram/components/raphael/raphael-multiline-text.component.ts

@@ -15,10 +15,9 @@
  * limitations under the License.
  */
 
-import { Directive, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Directive, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Point } from './models/point';
 import { RaphaelBase } from './raphael-base';
-import { RaphaelService } from './raphael.service';
 
 const TEXT_PADDING = 3;
 
@@ -45,11 +44,6 @@ export class RaphaelMultilineTextDirective extends RaphaelBase implements OnInit
     @Output()
     error = new EventEmitter();
 
-    constructor(public elementRef: ElementRef,
-                raphaelService: RaphaelService) {
-        super(elementRef, raphaelService);
-    }
-
     ngOnInit() {
         if (this.text === null || this.text === undefined) {
             this.text = '';

lib/insights/src/lib/diagram/components/raphael/raphael-pentagon.component.ts

@@ -15,10 +15,9 @@
  * limitations under the License.
  */
 
-import { Directive, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Directive, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Point } from './models/point';
 import { RaphaelBase } from './raphael-base';
-import { RaphaelService } from './raphael.service';
 
 /**
  * Directive selectors without adf- prefix will be deprecated on 3.0.0
@@ -46,11 +45,6 @@ export class RaphaelPentagonDirective extends RaphaelBase implements OnInit {
     @Output()
     error = new EventEmitter();
 
-    constructor(public elementRef: ElementRef,
-                raphaelService: RaphaelService) {
-        super(elementRef, raphaelService);
-    }
-
     ngOnInit() {
         const opts = {
             'stroke-width': this.strokeWidth,

lib/insights/src/lib/diagram/components/raphael/raphael-plus.component.ts

@@ -15,10 +15,9 @@
  * limitations under the License.
  */
 
-import { Directive, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Directive, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Point } from './models/point';
 import { RaphaelBase } from './raphael-base';
-import { RaphaelService } from './raphael.service';
 
 /**
  * Directive selectors without adf- prefix will be deprecated on 3.0.0
@@ -43,11 +42,6 @@ export class RaphaelPlusDirective extends RaphaelBase implements OnInit {
     @Output()
     error = new EventEmitter();
 
-    constructor(public elementRef: ElementRef,
-                raphaelService: RaphaelService) {
-        super(elementRef, raphaelService);
-    }
-
     ngOnInit() {
         const opts = {
             'stroke-width': this.strokeWidth,

lib/insights/src/lib/diagram/components/raphael/raphael-rect.component.ts

@@ -15,10 +15,9 @@
  * limitations under the License.
  */
 
-import { Directive, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Directive, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Point } from './models/point';
 import { RaphaelBase } from './raphael-base';
-import { RaphaelService } from './raphael.service';
 
 /**
  * Directive selectors without adf- prefix will be deprecated on 3.0.0
@@ -58,11 +57,6 @@ export class RaphaelRectDirective extends RaphaelBase implements OnInit {
     @Output()
     error = new EventEmitter();
 
-    constructor(public elementRef: ElementRef,
-                raphaelService: RaphaelService) {
-        super(elementRef, raphaelService);
-    }
-
     ngOnInit() {
         const opts = {
             'stroke-width': this.strokeWidth,

lib/insights/src/lib/diagram/components/raphael/raphael-rhombus.component.ts

@@ -15,10 +15,9 @@
  * limitations under the License.
  */
 
-import { Directive, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Directive, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Point } from './models/point';
 import { RaphaelBase } from './raphael-base';
-import { RaphaelService } from './raphael.service';
 
 /**
  * Directive selectors without adf- prefix will be deprecated on 3.0.0
@@ -52,11 +51,6 @@ export class RaphaelRhombusDirective extends RaphaelBase implements OnInit {
     @Output()
     error = new EventEmitter();
 
-    constructor(public elementRef: ElementRef,
-                raphaelService: RaphaelService) {
-        super(elementRef, raphaelService);
-    }
-
     ngOnInit() {
         const opts = {
             'stroke-width': this.strokeWidth,

lib/insights/src/lib/diagram/components/raphael/raphael-text.component.ts

@@ -15,10 +15,9 @@
  * limitations under the License.
  */
 
-import { Directive, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Directive, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Point } from './models/point';
 import { RaphaelBase } from './raphael-base';
-import { RaphaelService } from './raphael.service';
 
 /**
  * Directive selectors without adf- prefix will be deprecated on 3.0.0
@@ -40,11 +39,6 @@ export class RaphaelTextDirective extends RaphaelBase implements OnInit {
     @Output()
     error = new EventEmitter();
 
-    constructor(public elementRef: ElementRef,
-                raphaelService: RaphaelService) {
-        super(elementRef, raphaelService);
-    }
-
     ngOnInit() {
 
         if (this.text === null || this.text === undefined) {

lib/insights/src/lib/diagram/components/raphael/raphael.service.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Injectable , OnDestroy } from '@angular/core';
+import { Injectable, OnDestroy } from '@angular/core';
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 declare let Raphael: any;
@@ -39,8 +39,7 @@ export class RaphaelService implements OnDestroy {
         if (typeof Raphael === 'undefined') {
             throw new Error('insights configuration issue: Embedding Chart.js lib is mandatory');
         }
-        const paper = new Raphael(ctx, this.width, this.height);
+        return new Raphael(ctx, this.width, this.height);
-        return paper;
     }
 
     ngOnDestroy(): any {

lib/insights/src/lib/diagram/components/structural/diagram-event-subprocess.component.ts

@@ -17,30 +17,21 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { MAIN_STROKE_COLOR } from '../../constants/diagram-colors';
-import { DiagramColorService } from '../../services/diagram-color.service';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-event-subprocess',
     templateUrl: './diagram-event-subprocess.component.html'
 })
-export class DiagramEventSubprocessComponent implements OnInit {
+export class DiagramEventSubprocessComponent extends DiagramElement implements OnInit {
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
     rectLeftCorner: any;
     width: any;
     height: any;
 
     options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: '', radius: 4};
 
-    constructor(public elementRef: ElementRef,
-                private diagramColorService: DiagramColorService) {}
-
     ngOnInit() {
         this.rectLeftCorner = {x: this.data.x, y: this.data.y};
         this.width = this.data.width;

lib/insights/src/lib/diagram/components/structural/diagram-subprocess.component.ts

@@ -17,30 +17,21 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { MAIN_STROKE_COLOR } from '../../constants/diagram-colors';
-import { DiagramColorService } from '../../services/diagram-color.service';
+import { DiagramElement } from '../diagram-element';
 
 @Component({
     selector: 'diagram-subprocess',
     templateUrl: './diagram-subprocess.component.html'
 })
-export class DiagramSubprocessComponent implements OnInit {
+export class DiagramSubprocessComponent extends DiagramElement implements OnInit {
-    @Input()
-    data: any;
-
-    @Output()
-    error = new EventEmitter();
-
     rectLeftCorner: any;
     width: any;
     height: any;
 
     options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: '', radius: 4};
 
-    constructor(public elementRef: ElementRef,
-                private diagramColorService: DiagramColorService) {}
-
     ngOnInit() {
         this.rectLeftCorner = {x: this.data.x, y: this.data.y};
         this.width = this.data.width;

lib/insights/src/lib/diagram/components/swimlanes/diagram-lane.component.ts

@@ -17,7 +17,7 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 
 @Component({
     selector: 'diagram-lane',
@@ -39,8 +39,6 @@ export class DiagramLaneComponent implements OnInit {
     textTransform: string;
     options: any = {stroke: '#000000', fillColors: 'none', fillOpacity: '', strokeWidth: '1', radius: 0};
 
-    constructor(public elementRef: ElementRef) {}
-
     ngOnInit() {
         this.rectLeftCorner = {x: this.lane.x, y: this.lane.y};
         this.width = this.lane.width;

lib/insights/src/lib/diagram/components/swimlanes/diagram-lanes.component.ts

@@ -17,22 +17,16 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 @Component({
     selector: 'diagram-lanes',
     templateUrl: './diagram-lanes.component.html'
 })
-export class DiagramLanesComponent implements OnInit {
+export class DiagramLanesComponent {
     @Input()
     lanes: any [];
 
     @Output()
     error = new EventEmitter();
-
-    constructor(public elementRef: ElementRef) {}
-
-    ngOnInit() {
-
-    }
 }

lib/insights/src/lib/diagram/components/swimlanes/diagram-pool.component.ts

@@ -17,7 +17,7 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 
 @Component({
     selector: 'diagram-pool',
@@ -39,8 +39,6 @@ export class DiagramPoolComponent implements OnInit {
     textTransform: string;
     options: any = {stroke: '#000000', fillColors: 'none', fillOpacity: '', strokeWidth: '1', radius: 0};
 
-    constructor(public elementRef: ElementRef) {}
-
     ngOnInit() {
         this.rectLeftCorner = {x: this.pool.x, y: this.pool.y};
         this.width = this.pool.width;

lib/insights/src/lib/diagram/components/swimlanes/diagram-pools.component.ts

@@ -17,22 +17,16 @@
 
  /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 @Component({
     selector: 'diagram-pools',
     templateUrl: './diagram-pools.component.html'
 })
-export class DiagramPoolsComponent implements OnInit {
+export class DiagramPoolsComponent {
     @Input()
     pools: any [];
 
     @Output()
     error = new EventEmitter();
-
-    constructor(public elementRef: ElementRef) {}
-
-    ngOnInit() {
-
-    }
 }

lib/insights/src/lib/diagram/public-api.ts

@@ -18,6 +18,7 @@
 export * from './components/diagram-sequence-flow.component';
 export * from './components/diagram.component';
 
+export * from './components/diagram-element';
 export * from './components/activities/diagram-alfresco-publish-task.component';
 export * from './components/activities/diagram-box-publish-task.component';
 export * from './components/activities/diagram-business-rule-task.component';

lib/insights/src/lib/diagram/services/diagrams.service.spec.ts

@@ -1,80 +0,0 @@
-/*!
- * @license
- * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { TestBed } from '@angular/core/testing';
-import { AppConfigService } from '@alfresco/adf-core';
-import { DiagramsService } from './diagrams.service';
-import { InsightsTestingModule } from '../../testing/insights.testing.module';
-import { TranslateModule } from '@ngx-translate/core';
-
-declare let jasmine: any;
-
-describe('DiagramsService', () => {
-    let service: DiagramsService;
-
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            imports: [
-                TranslateModule.forRoot(),
-                InsightsTestingModule
-            ]
-        });
-        const appConfig: AppConfigService = TestBed.inject(AppConfigService);
-        appConfig.config.ecmHost = 'http://localhost:9876/ecm';
-
-        service = TestBed.inject(DiagramsService);
-    });
-
-    beforeEach(() => {
-        jasmine.Ajax.install();
-    });
-
-    afterEach(() => {
-        jasmine.Ajax.uninstall();
-    });
-
-    it('getProcessDefinitionModel should perform a call against the server', (done) => {
-        service.getProcessDefinitionModel('fake-processDefinitionId').subscribe(() => {
-            done();
-        });
-
-        jasmine.Ajax.requests.mostRecent().respondWith({
-            status: 200
-        });
-    });
-
-    it('getRunningProcessDefinitionModel should perform a call against the server', (done) => {
-        service.getRunningProcessDefinitionModel('fake-processInstanceId').subscribe(() => {
-            done();
-        });
-
-        jasmine.Ajax.requests.mostRecent().respondWith({
-            status: 200
-        });
-    });
-
-    it('getTagsByNodeId catch errors call', (done) => {
-        service.getProcessDefinitionModel('fake-processDefinitionId').subscribe(() => {
-        }, () => {
-            done();
-        });
-
-        jasmine.Ajax.requests.mostRecent().respondWith({
-            status: 403
-        });
-    });
-});

lib/insights/src/lib/mock/public-api.ts

@@ -15,7 +15,6 @@
  * limitations under the License.
  */
 
-export * from './analytics/analytics.service.mock';
 export * from './analytics/analytics-component.mock';
 export * from './analytics/analytics-params-report-component.mock';