Pre-Angular upgrade fixes (#5709)

* code fixes

* code fixes

* more code fixes

* even more fixes

* add missing typescript for cli

* rollback info drawer test changes

* use npx for cli commands

* restore attach providers

angular.json

@@ -261,6 +261,7 @@
             },
             "assets": [
               "demo-shell/src/assets",
+              "demo-shell/src/favicon-96x96.png",
               "demo-shell/src/app.config.json",
               {
                 "glob": "**/*",
@@ -430,6 +431,7 @@
             ],
             "assets": [
               "demo-shell/src/assets",
+              "demo-shell/src/favicon-96x96.png",
               "demo-shell/src/app.config.json",
               {
                 "glob": "**/*",

demo-shell/e2e/tsconfig.e2e.json

@@ -6,6 +6,7 @@
     "target": "es5",
     "types":[
       "jasmine",
+      "jasminewd2",
       "node"
     ]
   }

demo-shell/src/app/app.module.ts

@@ -55,7 +55,6 @@ import { TaskAttachmentsComponent } from './components/process-service/task-atta
 import { ProcessAttachmentsComponent } from './components/process-service/process-attachments.component';
 import { SharedLinkViewComponent } from './components/shared-link-view/shared-link-view.component';
 import { DemoPermissionComponent } from './components/permissions/demo-permissions.component';
-import { PreviewService } from './services/preview.service';
 import { ReportIssueComponent } from './components/report-issue/report-issue.component';
 import { MonacoEditorModule } from 'ngx-monaco-editor';
 import { ContentModule } from '@alfresco/adf-content-services';
@@ -211,9 +210,7 @@ registerLocaleData(localeSv);
                 name: 'lazy-loading',
                 source: 'resources/lazy-loading'
             }
-        },
+        }
-        PreviewService,
-        CoreAutomationService
     ],
     entryComponents: [
         VersionManagerDialogAdapterComponent,

demo-shell/src/app/components/cloud/cloud-viewer.component.ts

@@ -16,8 +16,7 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Params } from '@angular/router';
-import { Params } from '@angular/router/src/shared';
 
 @Component({
     selector: 'app-cloud-viewer',

demo-shell/src/app/components/cloud/community/community-processes-cloud.component.html

@@ -17,7 +17,7 @@
             [id]="editedFilter.processInstanceId"
             [status]="editedFilter.status"
             [name]="editedFilter.processName"
-            [businessKey]="editedFilter.businessKey"
+            [businessKey]="editedFilter['businessKey']"
             [lastModifiedFrom]="editedFilter.lastModifiedFrom"
             [lastModifiedTo]="editedFilter.lastModifiedTo"
             [sorting]="sortArray"

demo-shell/src/app/components/cloud/community/community-processes-cloud.component.ts

@@ -50,7 +50,7 @@ export class CommunityProcessesCloudDemoComponent implements OnInit, OnDestroy {
     selectedRow: any;
     multiselect: boolean;
     selectionMode: string;
-    selectedRows: string[] = [];
+    selectedRows: any[] = [];
     testingMode: boolean;
     processFilterProperties: any  = { filterProperties: [], sortProperties: [], actions: [] };
 

demo-shell/src/app/components/cloud/processes-cloud-demo.component.html

@@ -19,7 +19,7 @@
             [id]="editedFilter.processInstanceId"
             [status]="editedFilter.status"
             [name]="editedFilter.processName"
-            [businessKey]="editedFilter.businessKey"
+            [businessKey]="editedFilter['businessKey']"
             [lastModifiedFrom]="editedFilter.lastModifiedFrom"
             [lastModifiedTo]="editedFilter.lastModifiedTo"
             [sorting]="sortArray"

demo-shell/src/app/components/cloud/processes-cloud-demo.component.ts

@@ -54,7 +54,7 @@ export class ProcessesCloudDemoComponent implements OnInit, OnDestroy {
     selectedRow: any;
     multiselect: boolean;
     selectionMode: string;
-    selectedRows: string[] = [];
+    selectedRows: any[] = [];
     testingMode: boolean;
     actionMenu: boolean;
     contextMenu: boolean;

demo-shell/src/app/components/file-view/file-view.component.html

@@ -108,7 +108,7 @@
                 <mat-card>
                     <mat-card-content>
                         <adf-version-manager [node]="node"
-                                             (uploadError)="uploadError($event)">
+                                             (uploadError)="onUploadError($event)">
                         </adf-version-manager>
                     </mat-card-content>
                 </mat-card>

demo-shell/src/app/components/files/files.component.html

@@ -446,7 +446,7 @@
             <adf-infinite-pagination
                 [hidden]="!infiniteScrolling"
                 [target]="documentList"
-                [loading]="documentList.infiniteLoading">
+                [loading]="documentList.loading">
                 {{ 'ADF-DOCUMENT-LIST.LAYOUT.LOAD_MORE' | translate }}
             </adf-infinite-pagination>
         </adf-upload-drag-area>

demo-shell/src/app/components/pipes/pipes.component.html

@@ -99,7 +99,7 @@
         <div>{{ number | adfDecimalNumber : decimalValues }} </div>
         <br>
         <h3>AdfDecimalNumber Pipe - Custom locale</h3>
-        <div>{{ number | adfDecimalNumber : {} : locale }} </div>
+        <div>{{ number | adfDecimalNumber : null : locale }} </div>
         <br>
         <h3>AdfDecimalNumber Pipe - Custom digits config and locale</h3>
         <div>{{ number | adfDecimalNumber : decimalValues : locale }} </div>

demo-shell/src/app/components/process-service/process-service.component.html

@@ -16,7 +16,7 @@
                             </div>
                         </adf-sidebar-action-menu>
                     </div>
-                    <mat-accordion class="app-accordion-panel" [displayMode]="flat">
+                    <mat-accordion class="app-accordion-panel" displayMode="flat">
                         <mat-expansion-panel class="mat-elevation-z0" [expanded]="true">
                             <mat-expansion-panel-header>
                                 <mat-panel-title>
@@ -132,7 +132,7 @@
                             </div>
                         </adf-sidebar-action-menu>
                     </div>
-                    <mat-accordion class="app-accordion-panel" [displayMode]="flat">
+                    <mat-accordion class="app-accordion-panel" displayMode="flat">
                         <mat-expansion-panel class="mat-elevation-z0" [expanded]="true">
                             <mat-expansion-panel-header>
                                 <mat-panel-title>

demo-shell/src/app/components/search/search-config-test.service.ts

@@ -17,12 +17,11 @@
 
 import { QueryBody } from '@alfresco/js-api';
 import { SearchConfigurationInterface } from '@alfresco/adf-core';
+import { Injectable } from '@angular/core';
 
+@Injectable()
 export class TestSearchConfigurationService implements SearchConfigurationInterface {
 
-    constructor() {
-    }
-
     public generateQueryBody(searchTerm: string, maxResults: number, skipCount: number): QueryBody {
         const defaultQueryBody: QueryBody = {
             query: {

demo-shell/src/app/components/search/search-extended.component.html

@@ -11,7 +11,7 @@
                   class="app-example-card-search-container">
           <ng-template let-data>
             <mat-card class="app-example-card"
-                 *ngFor="let item of data?.list?.entries; let idx = index" (click)="onClick(item)">
+                 *ngFor="let item of data?.list?.entries; let idx = index">
                 <mat-card-header>
                     <div mat-card-avatar class="app-example-header-image"></div>
                     <mat-card-title>{{ item?.entry.name }}</mat-card-title>

demo-shell/src/app/components/theme-picker/style-manager/style-manager.ts

@@ -21,7 +21,7 @@ import { Injectable } from '@angular/core';
  * Class for managing stylesheets. Stylesheets are loaded into named slots so that they can be
  * removed or changed later.
  */
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class StyleManager {
   /**
    * Set the stylesheet with the specified key.

demo-shell/src/app/components/theme-picker/theme-picker.ts

@@ -144,8 +144,7 @@ export class ThemePickerComponent {
         CommonModule
     ],
     exports: [ThemePickerComponent],
-    declarations: [ThemePickerComponent],
+    declarations: [ThemePickerComponent]
-    providers: [StyleManager, ThemeStorage]
 })
 export class ThemePickerModule {
 }

demo-shell/src/app/components/theme-picker/theme-storage/theme-storage.ts

@@ -26,13 +26,13 @@ export interface DocsSiteTheme {
   isDefault?: boolean;
 }
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class ThemeStorage {
   static storageKey = 'docs-theme-storage-current';
 
-  public onThemeUpdate: EventEmitter<DocsSiteTheme> = new EventEmitter<DocsSiteTheme>();
+  onThemeUpdate = new EventEmitter<DocsSiteTheme>();
 
-  public storeTheme(theme: DocsSiteTheme) {
+  storeTheme(theme: DocsSiteTheme) {
     try {
       window.localStorage[ThemeStorage.storageKey] = JSON.stringify(theme);
     } catch (e) { }
@@ -40,7 +40,7 @@ export class ThemeStorage {
     this.onThemeUpdate.emit(theme);
   }
 
-  public getStoredTheme(): DocsSiteTheme {
+  getStoredTheme(): DocsSiteTheme {
     try {
       return JSON.parse(window.localStorage[ThemeStorage.storageKey] || null);
     } catch (e) {
@@ -48,7 +48,7 @@ export class ThemeStorage {
     }
   }
 
-  public clearStorage() {
+  clearStorage() {
     try {
       window.localStorage.removeItem(ThemeStorage.storageKey);
     } catch (e) { }

demo-shell/src/app/services/preview.service.ts

@@ -18,7 +18,7 @@
 import { Injectable } from '@angular/core';
 import { Router } from '@angular/router';
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class PreviewService {
 
     public content: Blob = null;

lib/cli/package-lock.json

@@ -2957,6 +2957,12 @@
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
     },
+    "typescript": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.1.6.tgz",
+      "integrity": "sha512-tDMYfVtvpb96msS1lDX9MEdHrW4yOuZ4Kdc4Him9oU796XldPYF/t2+uKoX0BBa0hXXwDlqYQbXY5Rzjzc5hBA==",
+      "dev": true
+    },
     "union-value": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",

lib/cli/package.json

@@ -35,6 +35,7 @@
   ],
   "license": "Apache-2.0",
   "devDependencies": {
-    "@types/shelljs": "^0.8.7"
+    "@types/shelljs": "^0.8.7",
+    "typescript": "3.1.6"
   }
 }

lib/content-services/ng-package.json

@@ -2,7 +2,6 @@
   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
   "dest": "../dist/content-services",
   "lib": {
-    "languageLevel": [ "dom", "es2017" ],
     "entryFile": "src/public-api.ts",
     "flatModuleFile": "adf-content-services",
     "umdModuleIds": {

lib/content-services/src/lib/content-metadata/public-api.ts

@@ -15,6 +15,7 @@
  * limitations under the License.
  */
 
+export * from './components/content-metadata/content-metadata.component';
 export * from './components/content-metadata-card/content-metadata-card.component';
 export * from './services/basic-properties.service';
 export * from './services/content-metadata.service';

lib/content-services/src/lib/content-metadata/services/property-groups-translator.service.spec.ts

@@ -37,19 +37,14 @@ describe('PropertyGroupTranslatorService', () => {
     let propertyGroup: OrganisedPropertyGroup;
     let property: Property;
     let propertyValues: { [key: string]: any };
+    let logService: LogService;
 
     setupTestBed({
-        imports: [ContentTestingModule],
+        imports: [ContentTestingModule]
-        providers: [
-            {
-                provide: LogService, useValue: {
-                    error: () => {}
-                }
-            }
-        ]
     });
 
     beforeEach(() => {
+        logService = TestBed.get(LogService);
         service = TestBed.get(PropertyGroupTranslatorService);
 
         property = {
@@ -135,7 +130,6 @@ describe('PropertyGroupTranslatorService', () => {
         });
 
         it('should log an error if unrecognised type is found', () => {
-            const logService = TestBed.get(LogService);
             spyOn(logService, 'error').and.stub();
 
             property.name = 'FAS:PLAGUE';

lib/content-services/src/lib/directives/public-api.ts

@@ -16,3 +16,4 @@
  */
 
 export * from './content-directive.module';
+export * from './node-lock.directive';

lib/content-services/src/lib/document-list/data/share-datatable-adapter.spec.ts

@@ -19,58 +19,16 @@ import { DataColumn, DataRow, DataSorting, ContentService, ThumbnailService, set
 import { FileNode, FolderNode, SmartFolderNode, RuleFolderNode, LinkFolderNode } from './../../mock';
 import { ShareDataRow } from './share-data-row.model';
 import { ShareDataTableAdapter } from './share-datatable-adapter';
-import { DomSanitizer } from '@angular/platform-browser';
-import { MatIconRegistry } from '@angular/material';
 import { ContentTestingModule } from '../../testing/content.testing.module';
 import { TestBed } from '@angular/core/testing';
 
-class FakeSanitizer extends DomSanitizer {
-
-    constructor() {
-        super();
-    }
-
-    sanitize(html) {
-        return html;
-    }
-
-    bypassSecurityTrustHtml(value: string): any {
-        return value;
-    }
-
-    bypassSecurityTrustStyle(): any {
-        return null;
-    }
-
-    bypassSecurityTrustScript(): any {
-        return null;
-    }
-
-    bypassSecurityTrustUrl(): any {
-        return null;
-    }
-
-    bypassSecurityTrustResourceUrl(): any {
-        return null;
-    }
-}
-
 describe('ShareDataTableAdapter', () => {
 
     let thumbnailService: ThumbnailService;
     let contentService: ContentService;
 
     setupTestBed({
-        imports: [ContentTestingModule],
+        imports: [ContentTestingModule]
-        providers: [
-            {
-                provide: MatIconRegistry,
-                useValue: jasmine.createSpyObj(['addSvgIcon', 'addSvgIconInNamespace'])
-            },
-            {
-                provide: DomSanitizer, useClass: FakeSanitizer
-            }
-        ]
     });
 
     beforeEach(() => {

lib/content-services/src/lib/document-list/services/node-actions.service.spec.ts

@@ -44,9 +44,6 @@ describe('NodeActionsService', () => {
             DialogModule
         ],
         providers: [
-            NodeActionsService,
-            DocumentListService,
-            ContentNodeDialogService,
             { provide: MatDialogRef, useValue: dialogRef }
         ]
     });

lib/content-services/src/lib/folder-directive/folder-create.directive.spec.ts

@@ -70,9 +70,6 @@ describe('FolderCreateDirective', () => {
             TestComponent,
             FolderDialogComponent,
             FolderCreateDirective
-        ],
-        providers: [
-            ContentService
         ]
     });
 

lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.spec.ts

@@ -18,7 +18,7 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { AddPermissionPanelComponent } from './add-permission-panel.component';
 import { By } from '@angular/platform-browser';
-import { SearchService, setupTestBed, SearchConfigurationService } from '@alfresco/adf-core';
+import { SearchService, setupTestBed } from '@alfresco/adf-core';
 import { of } from 'rxjs';
 import { fakeAuthorityListResult, fakeNameListResult } from '../../../mock/add-permission.component.mock';
 import { ContentTestingModule } from '../../../testing/content.testing.module';
@@ -33,8 +33,7 @@ describe('AddPermissionPanelComponent', () => {
     let debugElement: DebugElement;
 
     setupTestBed({
-        imports: [ContentTestingModule],
+        imports: [ContentTestingModule]
-        providers: [SearchService, SearchConfigurationService]
     });
 
     beforeEach(() => {

lib/content-services/src/lib/permission-manager/components/add-permission/search-config-permission.service.ts

@@ -17,12 +17,11 @@
 
 import { QueryBody } from '@alfresco/js-api';
 import { SearchConfigurationInterface } from '@alfresco/adf-core';
+import { Injectable } from '@angular/core';
 
+@Injectable()
 export class SearchPermissionConfigurationService implements SearchConfigurationInterface {
 
-    constructor() {
-    }
-
     public generateQueryBody(searchTerm: string, maxResults: number, skipCount: number): QueryBody {
         const defaultQueryBody: QueryBody = {
             query: {

lib/content-services/src/lib/permission-manager/services/node-permission.service.spec.ts

@@ -23,7 +23,6 @@ import { of } from 'rxjs';
 import { fakeEmptyResponse, fakeNodeWithOnlyLocally, fakeSiteRoles, fakeSiteNodeResponse,
          fakeNodeToRemovePermission, fakeNodeWithoutPermissions } from '../../mock/permission-list.component.mock';
 import { fakeAuthorityResults } from '../../mock/add-permission.component.mock';
-import { NodePermissionDialogService } from './node-permission-dialog.service';
 
 describe('NodePermissionService', () => {
 
@@ -34,10 +33,6 @@ describe('NodePermissionService', () => {
     setupTestBed({
         imports: [
             CoreModule.forRoot()
-        ],
-        providers: [
-            NodePermissionDialogService,
-            NodePermissionService
         ]
     });
 

lib/content-services/src/lib/search/public-api.ts

@@ -15,23 +15,33 @@
  * limitations under the License.
  */
 
-export { FacetFieldBucket } from './facet-field-bucket.interface';
+export * from './facet-field-bucket.interface';
-export { FacetField } from './facet-field.interface';
+export * from './facet-field.interface';
-export { FacetQuery } from './facet-query.interface';
+export * from './facet-query.interface';
-export { FilterQuery } from './filter-query.interface';
+export * from './filter-query.interface';
-export { SearchCategory } from './search-category.interface';
+export * from './search-category.interface';
-export { SearchWidgetSettings } from './search-widget-settings.interface';
+export * from './search-widget-settings.interface';
-export { SearchWidget } from './search-widget.interface';
+export * from './search-widget.interface';
-export { SearchConfiguration } from './search-configuration.interface';
+export * from './search-configuration.interface';
-export { SearchQueryBuilderService } from './search-query-builder.service';
+export * from './search-query-builder.service';
-export { SearchRange } from './search-range.interface';
+export * from './search-range.interface';
 
 export * from './components/search.component';
 export * from './components/search-control.component';
 export * from './components/empty-search-result.component';
+export * from './components/search-control.component';
+export * from './components/search.component';
+export * from './components/search-check-list/search-check-list.component';
+export * from './components/search-chip-list/search-chip-list.component';
+export * from './components/search-date-range/search-date-range.component';
 export * from './components/search-filter/search-filter.component';
 export * from './components/search-filter/search-filter.service';
+export * from './components/search-number-range/search-number-range.component';
+export * from './components/search-radio/search-radio.component';
+export * from './components/search-slider/search-slider.component';
 export * from './components/search-chip-list/search-chip-list.component';
 export * from './components/search-sorting-picker/search-sorting-picker.component';
+export * from './components/search-text/search-text.component';
+export * from './components/search-widget-container/search-widget-container.component';
 
 export * from './search.module';

lib/content-services/src/lib/search/search.module.ts

@@ -36,14 +36,6 @@ import { SearchCheckListComponent } from './components/search-check-list/search-
 import { SearchDateRangeComponent } from './components/search-date-range/search-date-range.component';
 import { SearchSortingPickerComponent } from './components/search-sorting-picker/search-sorting-picker.component';
 
-export const ALFRESCO_SEARCH_DIRECTIVES: any[] = [
-    SearchComponent,
-    SearchControlComponent,
-    EmptySearchResultComponent,
-    SearchFilterComponent,
-    SearchChipListComponent
-];
-
 @NgModule({
     imports: [
         CommonModule,
@@ -53,7 +45,11 @@ export const ALFRESCO_SEARCH_DIRECTIVES: any[] = [
         CoreModule
     ],
     declarations: [
-        ...ALFRESCO_SEARCH_DIRECTIVES,
+        SearchComponent,
+        SearchControlComponent,
+        EmptySearchResultComponent,
+        SearchFilterComponent,
+        SearchChipListComponent,
         SearchWidgetContainerComponent,
         SearchTextComponent,
         SearchRadioComponent,
@@ -64,7 +60,11 @@ export const ALFRESCO_SEARCH_DIRECTIVES: any[] = [
         SearchSortingPickerComponent
     ],
     exports: [
-        ...ALFRESCO_SEARCH_DIRECTIVES,
+        SearchComponent,
+        SearchControlComponent,
+        EmptySearchResultComponent,
+        SearchFilterComponent,
+        SearchChipListComponent,
         SearchWidgetContainerComponent,
         SearchTextComponent,
         SearchRadioComponent,

lib/content-services/src/lib/upload/components/file-uploading-dialog.component.spec.ts

@@ -39,8 +39,7 @@ describe('FileUploadingDialogComponent', () => {
             UploadModule
         ],
         providers: [
-            { provide: AlfrescoApiService, useClass: AlfrescoApiServiceMock },
+            { provide: AlfrescoApiService, useClass: AlfrescoApiServiceMock }
-            UserPreferencesService
         ]
     });
 

lib/content-services/src/lib/upload/components/upload-button.component.spec.ts

@@ -59,8 +59,6 @@ describe('UploadButtonComponent', () => {
             UploadButtonComponent
         ],
         providers: [
-            UploadService,
-            ContentService,
             { provide: TranslationService, useClass: TranslationMock }
         ]
     });

lib/content-services/src/lib/upload/components/upload-drag-area.component.spec.ts

@@ -27,7 +27,6 @@ import {
 
 import { FileDraggableDirective } from '../directives/file-draggable.directive';
 import { UploadDragAreaComponent } from './upload-drag-area.component';
-import { throwError } from 'rxjs';
 
 function getFakeShareDataRow(allowableOperations = ['delete', 'update', 'create']) {
     return {
@@ -111,7 +110,6 @@ describe('UploadDragAreaComponent', () => {
             UploadDragAreaComponent
         ],
         providers: [
-            UploadService,
             { provide: AlfrescoApiService, useClass: AlfrescoApiServiceMock }
         ]
     });
@@ -417,7 +415,6 @@ describe('UploadDragAreaComponent', () => {
             };
 
             fixture.detectChanges();
-            spyOn(uploadService, 'fileUploadError').and.returnValue(throwError(new Error()));
 
             component.error.subscribe((error) => {
                 expect(error).not.toBeNull();

lib/core/card-view/services/card-view-update.service.spec.ts

@@ -18,7 +18,6 @@
 import { async, TestBed } from '@angular/core/testing';
 import { CardViewBaseItemModel } from '../models/card-view-baseitem.model';
 import { CardViewUpdateService, transformKeyToObject } from './card-view-update.service';
-import { setupTestBed } from '../../testing/setup-test-bed';
 
 describe('CardViewUpdateService', () => {
 
@@ -59,12 +58,6 @@ describe('CardViewUpdateService', () => {
             clickable: false
         };
 
-        setupTestBed({
-            providers: [
-                CardViewUpdateService
-            ]
-        });
-
         beforeEach(() => {
             cardViewUpdateService = TestBed.get(CardViewUpdateService);
         });

lib/core/clipboard/clipboard.directive.spec.ts

@@ -47,9 +47,6 @@ describe('ClipboardDirective', () => {
         ],
         declarations: [
             TestTargetClipboardComponent
-        ],
-        providers: [
-            ClipboardService
         ]
     });
 

lib/core/clipboard/clipboard.module.ts

@@ -18,7 +18,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ClipboardDirective, ClipboardComponent } from './clipboard.directive';
-import { ClipboardService } from './clipboard.service';
 import { TranslateModule } from '@ngx-translate/core';
 
 @NgModule({
@@ -26,9 +25,6 @@ import { TranslateModule } from '@ngx-translate/core';
         CommonModule,
         TranslateModule.forChild()
     ],
-    providers: [
-        ClipboardService
-    ],
     declarations: [
         ClipboardDirective,
         ClipboardComponent

lib/core/clipboard/clipboard.service.spec.ts

@@ -15,7 +15,6 @@
  * limitations under the License.
  */
 
-import { LogService } from '../services/log.service';
 import { NotificationService } from '../notifications/services/notification.service';
 import { AppConfigService } from '../app-config/app-config.service';
 import { TestBed } from '@angular/core/testing';
@@ -40,10 +39,8 @@ describe('ClipboardService', () => {
             MatSnackBarModule
         ],
         providers: [
-            LogService,
             { provide: TranslationService, useClass: TranslationMock },
-            { provide: AppConfigService, useClass: AppConfigServiceMock },
+            { provide: AppConfigService, useClass: AppConfigServiceMock }
-            NotificationService
         ]
     });
 

lib/core/clipboard/clipboard.service.ts

@@ -20,7 +20,7 @@ import { DOCUMENT } from '@angular/common';
 import { LogService } from '../services/log.service';
 import { NotificationService } from '../notifications/services/notification.service';
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class ClipboardService {
 
     constructor(

lib/core/form/components/widgets/amount/amount.widget.ts

@@ -19,7 +19,7 @@
 
 import { Component, OnInit, ViewEncapsulation, InjectionToken, Inject, Optional } from '@angular/core';
 import { FormService } from './../../../services/form.service';
-import { baseHost , WidgetComponent } from './../widget.component';
+import { WidgetComponent } from './../widget.component';
 
 export interface AmountWidgetSettings {
     showReadonlyPlaceholder: boolean;
@@ -31,7 +31,17 @@ export const ADF_AMOUNT_SETTINGS = new InjectionToken<AmountWidgetSettings>('adf
     selector: 'amount-widget',
     templateUrl: './amount.widget.html',
     styleUrls: ['./amount.widget.scss'],
-    host: baseHost,
+    host: {
+        '(click)': 'event($event)',
+        '(blur)': 'event($event)',
+        '(change)': 'event($event)',
+        '(focus)': 'event($event)',
+        '(focusin)': 'event($event)',
+        '(focusout)': 'event($event)',
+        '(input)': 'event($event)',
+        '(invalid)': 'event($event)',
+        '(select)': 'event($event)'
+    },
     encapsulation: ViewEncapsulation.None
 })
 export class AmountWidgetComponent extends WidgetComponent implements OnInit {

lib/core/form/components/widgets/checkbox/checkbox.widget.ts

@@ -19,12 +19,22 @@
 
 import { Component, ViewEncapsulation } from '@angular/core';
 import { FormService } from './../../../services/form.service';
-import { baseHost, WidgetComponent } from './../widget.component';
+import { WidgetComponent } from './../widget.component';
 
 @Component({
     selector: 'checkbox-widget',
     templateUrl: './checkbox.widget.html',
-    host: baseHost,
+    host: {
+        '(click)': 'event($event)',
+        '(blur)': 'event($event)',
+        '(change)': 'event($event)',
+        '(focus)': 'event($event)',
+        '(focusin)': 'event($event)',
+        '(focusout)': 'event($event)',
+        '(input)': 'event($event)',
+        '(invalid)': 'event($event)',
+        '(select)': 'event($event)'
+    },
     encapsulation: ViewEncapsulation.None
 })
 export class CheckboxWidgetComponent extends WidgetComponent {

lib/core/form/components/widgets/container/container.widget.ts

@@ -20,14 +20,24 @@
 import { AfterViewInit, Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormService } from './../../../services/form.service';
 import { FormFieldModel } from './../core/form-field.model';
-import { baseHost , WidgetComponent } from './../widget.component';
+import { WidgetComponent } from './../widget.component';
 import { ContainerWidgetComponentModel } from './container.widget.model';
 
 @Component({
     selector: 'container-widget',
     templateUrl: './container.widget.html',
     styleUrls: ['./container.widget.scss'],
-    host: baseHost,
+    host: {
+        '(click)': 'event($event)',
+        '(blur)': 'event($event)',
+        '(change)': 'event($event)',
+        '(focus)': 'event($event)',
+        '(focusin)': 'event($event)',
+        '(focusout)': 'event($event)',
+        '(input)': 'event($event)',
+        '(invalid)': 'event($event)',
+        '(select)': 'event($event)'
+    },
     encapsulation: ViewEncapsulation.None
 })
 export class ContainerWidgetComponent extends WidgetComponent implements OnInit, AfterViewInit {

lib/core/form/components/widgets/date/date.widget.ts

@@ -25,7 +25,7 @@ import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material';
 import moment from 'moment-es6';
 import { Moment } from 'moment';
 import { FormService } from './../../../services/form.service';
-import { baseHost, WidgetComponent } from './../widget.component';
+import { WidgetComponent } from './../widget.component';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -36,7 +36,17 @@ import { takeUntil } from 'rxjs/operators';
         { provide: MAT_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS }],
     templateUrl: './date.widget.html',
     styleUrls: ['./date.widget.scss'],
-    host: baseHost,
+    host: {
+        '(click)': 'event($event)',
+        '(blur)': 'event($event)',
+        '(change)': 'event($event)',
+        '(focus)': 'event($event)',
+        '(focusin)': 'event($event)',
+        '(focusout)': 'event($event)',
+        '(input)': 'event($event)',
+        '(invalid)': 'event($event)',
+        '(select)': 'event($event)'
+    },
     encapsulation: ViewEncapsulation.None
 })
 export class DateWidgetComponent extends WidgetComponent implements OnInit, OnDestroy {

lib/core/form/components/widgets/display-text/display-text.widget.ts

@@ -19,13 +19,23 @@
 
 import { Component, ViewEncapsulation } from '@angular/core';
 import { FormService } from './../../../services/form.service';
-import { baseHost , WidgetComponent } from './../widget.component';
+import { WidgetComponent } from './../widget.component';
 
 @Component({
     selector: 'display-text-widget',
     templateUrl: './display-text.widget.html',
     styleUrls: ['./display-text.widget.scss'],
-    host: baseHost,
+    host: {
+        '(click)': 'event($event)',
+        '(blur)': 'event($event)',
+        '(change)': 'event($event)',
+        '(focus)': 'event($event)',
+        '(focusin)': 'event($event)',
+        '(focusout)': 'event($event)',
+        '(input)': 'event($event)',
+        '(invalid)': 'event($event)',
+        '(select)': 'event($event)'
+    },
     encapsulation: ViewEncapsulation.None
 })
 export class DisplayTextWidgetComponent extends WidgetComponent {

lib/core/form/components/widgets/document/document.widget.ts

@@ -17,12 +17,22 @@
 
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormService } from './../../../services/form.service';
-import { baseHost , WidgetComponent } from './../widget.component';
+import { WidgetComponent } from './../widget.component';
 
 @Component({
     selector: 'adf-form-document-widget',
     templateUrl: 'document.widget.html',
-    host: baseHost,
+    host: {
+        '(click)': 'event($event)',
+        '(blur)': 'event($event)',
+        '(change)': 'event($event)',
+        '(focus)': 'event($event)',
+        '(focusin)': 'event($event)',
+        '(focusout)': 'event($event)',
+        '(input)': 'event($event)',
+        '(invalid)': 'event($event)',
+        '(select)': 'event($event)'
+    },
     encapsulation: ViewEncapsulation.None
 })
 export class DocumentWidgetComponent extends WidgetComponent implements OnInit {

lib/core/form/components/widgets/dropdown/dropdown.widget.ts

@@ -21,13 +21,23 @@ import { LogService } from '../../../../services/log.service';
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormService } from '../../../services/form.service';
 import { FormFieldOption } from './../core/form-field-option';
-import { baseHost , WidgetComponent } from './../widget.component';
+import { WidgetComponent } from './../widget.component';
 
 @Component({
     selector: 'dropdown-widget',
     templateUrl: './dropdown.widget.html',
     styleUrls: ['./dropdown.widget.scss'],
-    host: baseHost,
+    host: {
+        '(click)': 'event($event)',
+        '(blur)': 'event($event)',
+        '(change)': 'event($event)',
+        '(focus)': 'event($event)',
+        '(focusin)': 'event($event)',
+        '(focusout)': 'event($event)',
+        '(input)': 'event($event)',
+        '(invalid)': 'event($event)',
+        '(select)': 'event($event)'
+    },
     encapsulation: ViewEncapsulation.None
 })
 export class DropdownWidgetComponent extends WidgetComponent implements OnInit {

lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.ts

@@ -21,7 +21,7 @@ import { LogService } from '../../../../services/log.service';
 import { ChangeDetectorRef, Component, ElementRef, OnInit, ViewEncapsulation } from '@angular/core';
 import { WidgetVisibilityService } from '../../../services/widget-visibility.service';
 import { FormService } from './../../../services/form.service';
-import { baseHost, WidgetComponent } from './../widget.component';
+import { WidgetComponent } from './../widget.component';
 import { DynamicTableColumn } from './dynamic-table-column.model';
 import { DynamicTableRow } from './dynamic-table-row.model';
 import { DynamicTableModel } from './dynamic-table.widget.model';
@@ -30,7 +30,17 @@ import { DynamicTableModel } from './dynamic-table.widget.model';
     selector: 'dynamic-table-widget',
     templateUrl: './dynamic-table.widget.html',
     styleUrls: ['./dynamic-table.widget.scss'],
-    host: baseHost,
+    host: {
+        '(click)': 'event($event)',
+        '(blur)': 'event($event)',
+        '(change)': 'event($event)',
+        '(focus)': 'event($event)',
+        '(focusin)': 'event($event)',
+        '(focusout)': 'event($event)',
+        '(input)': 'event($event)',
+        '(invalid)': 'event($event)',
+        '(select)': 'event($event)'
+    },
     encapsulation: ViewEncapsulation.None
 })
 export class DynamicTableWidgetComponent extends WidgetComponent implements OnInit {

lib/core/form/components/widgets/dynamic-table/editors/dropdown/dropdown.editor.spec.ts

@@ -190,7 +190,7 @@ describe('DropdownEditorComponent', () => {
         let dynamicTable: DynamicTableModel;
 
         function openSelect() {
-            const dropdown = fixture.debugElement.query(By.css('[class="mat-select-trigger"]'));
+            const dropdown = fixture.debugElement.query(By.css('.mat-select-trigger'));
             dropdown.triggerEventHandler('click', null);
             fixture.detectChanges();
         }

lib/core/form/components/widgets/error/error.component.ts

@@ -21,7 +21,7 @@ import { animate, state, style, transition, trigger } from '@angular/animations'
 import { Component, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';
 import { ErrorMessageModel } from '../core/index';
 import { FormService } from './../../../services/form.service';
-import { baseHost , WidgetComponent } from './../widget.component';
+import { WidgetComponent } from './../widget.component';
 
 @Component({
     selector: 'error-widget',
@@ -36,7 +36,17 @@ import { baseHost , WidgetComponent } from './../widget.component';
             ])
         ])
     ],
-    host: baseHost,
+    host: {
+        '(click)': 'event($event)',
+        '(blur)': 'event($event)',
+        '(change)': 'event($event)',
+        '(focus)': 'event($event)',
+        '(focusin)': 'event($event)',
+        '(focusout)': 'event($event)',
+        '(input)': 'event($event)',
+        '(invalid)': 'event($event)',
+        '(select)': 'event($event)'
+    },
     encapsulation: ViewEncapsulation.None
 })
 export class ErrorWidgetComponent extends WidgetComponent implements OnChanges {

lib/core/form/components/widgets/functional-group/functional-group.widget.ts

@@ -21,13 +21,23 @@ import { ENTER, ESCAPE } from '@angular/cdk/keycodes';
 import { Component, ElementRef, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormService } from '../../../services/form.service';
 import { GroupModel } from './../core/group.model';
-import { baseHost , WidgetComponent } from './../widget.component';
+import { WidgetComponent } from './../widget.component';
 
 @Component({
     selector: 'functional-group-widget',
     templateUrl: './functional-group.widget.html',
     styleUrls: ['./functional-group.widget.scss'],
-    host: baseHost,
+    host: {
+        '(click)': 'event($event)',
+        '(blur)': 'event($event)',
+        '(change)': 'event($event)',
+        '(focus)': 'event($event)',
+        '(focusin)': 'event($event)',
+        '(focusout)': 'event($event)',
+        '(input)': 'event($event)',
+        '(invalid)': 'event($event)',
+        '(select)': 'event($event)'
+    },
     encapsulation: ViewEncapsulation.None
 })
 export class FunctionalGroupWidgetComponent extends WidgetComponent implements OnInit {

lib/core/form/components/widgets/hyperlink/hyperlink.widget.ts

@@ -19,13 +19,23 @@
 
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormService } from './../../../services/form.service';
-import { baseHost , WidgetComponent } from './../widget.component';
+import { WidgetComponent } from './../widget.component';
 
 @Component({
     selector: 'hyperlink-widget',
     templateUrl: './hyperlink.widget.html',
     styleUrls: ['./hyperlink.widget.scss'],
-    host: baseHost,
+    host: {
+        '(click)': 'event($event)',
+        '(blur)': 'event($event)',
+        '(change)': 'event($event)',
+        '(focus)': 'event($event)',
+        '(focusin)': 'event($event)',
+        '(focusout)': 'event($event)',
+        '(input)': 'event($event)',
+        '(invalid)': 'event($event)',
+        '(select)': 'event($event)'
+    },
     encapsulation: ViewEncapsulation.None
 })
 export class HyperlinkWidgetComponent extends WidgetComponent implements OnInit {

lib/core/form/components/widgets/json/json.widget.ts

@@ -17,7 +17,7 @@
 
 import { Component, ViewEncapsulation } from '@angular/core';
 import { FormService } from './../../../services/form.service';
-import { baseHost, WidgetComponent } from './../widget.component';
+import { WidgetComponent } from './../widget.component';
 import { MatDialog } from '@angular/material/dialog';
 import { EditJsonDialogSettings, EditJsonDialogComponent } from '../../../../dialogs/edit-json/edit-json.dialog';
 
@@ -25,7 +25,17 @@ import { EditJsonDialogSettings, EditJsonDialogComponent } from '../../../../dia
     template: `
         <button mat-raised-button color="primary" (click)="view()">json</button>
     `,
-    host: baseHost,
+    host: {
+        '(click)': 'event($event)',
+        '(blur)': 'event($event)',
+        '(change)': 'event($event)',
+        '(focus)': 'event($event)',
+        '(focusin)': 'event($event)',
+        '(focusout)': 'event($event)',
+        '(input)': 'event($event)',
+        '(invalid)': 'event($event)',
+        '(select)': 'event($event)'
+    },
     encapsulation: ViewEncapsulation.None
 })
 export class JsonWidgetComponent extends WidgetComponent {

lib/core/form/components/widgets/multiline-text/multiline-text.widget.ts

@@ -19,13 +19,23 @@
 
 import { Component, ViewEncapsulation } from '@angular/core';
 import { FormService } from './../../../services/form.service';
-import { baseHost , WidgetComponent } from './../widget.component';
+import { WidgetComponent } from './../widget.component';
 
 @Component({
     selector: 'multiline-text-widget',
     templateUrl: './multiline-text.widget.html',
     styleUrls: ['./multiline-text.widget.scss'],
-    host: baseHost,
+    host: {
+        '(click)': 'event($event)',
+        '(blur)': 'event($event)',
+        '(change)': 'event($event)',
+        '(focus)': 'event($event)',
+        '(focusin)': 'event($event)',
+        '(focusout)': 'event($event)',
+        '(input)': 'event($event)',
+        '(invalid)': 'event($event)',
+        '(select)': 'event($event)'
+    },
     encapsulation: ViewEncapsulation.None
 })
 export class MultilineTextWidgetComponentComponent extends WidgetComponent  {

lib/core/form/components/widgets/number/number.widget.ts

@@ -19,14 +19,24 @@
 
 import { Component, ViewEncapsulation, OnInit } from '@angular/core';
 import { FormService } from './../../../services/form.service';
-import { baseHost , WidgetComponent } from './../widget.component';
+import { WidgetComponent } from './../widget.component';
 import { DecimalNumberPipe } from '../../../../pipes/decimal-number.pipe';
 
 @Component({
     selector: 'number-widget',
     templateUrl: './number.widget.html',
     styleUrls: ['./number.widget.scss'],
-    host: baseHost,
+    host: {
+        '(click)': 'event($event)',
+        '(blur)': 'event($event)',
+        '(change)': 'event($event)',
+        '(focus)': 'event($event)',
+        '(focusin)': 'event($event)',
+        '(focusout)': 'event($event)',
+        '(input)': 'event($event)',
+        '(invalid)': 'event($event)',
+        '(select)': 'event($event)'
+    },
     encapsulation: ViewEncapsulation.None
 })
 export class NumberWidgetComponent extends WidgetComponent implements OnInit {

lib/core/form/components/widgets/people/people.widget.ts

@@ -22,7 +22,7 @@ import { UserProcessModel } from '../../../../models';
 import { Component, ElementRef, EventEmitter, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core';
 import { FormService } from '../../../services/form.service';
 import { GroupModel } from '../core/group.model';
-import { baseHost, WidgetComponent } from './../widget.component';
+import { WidgetComponent } from './../widget.component';
 import { FormControl } from '@angular/forms';
 import { Observable, of } from 'rxjs';
 import {
@@ -37,7 +37,17 @@ import {
     selector: 'people-widget',
     templateUrl: './people.widget.html',
     styleUrls: ['./people.widget.scss'],
-    host: baseHost,
+    host: {
+        '(click)': 'event($event)',
+        '(blur)': 'event($event)',
+        '(change)': 'event($event)',
+        '(focus)': 'event($event)',
+        '(focusin)': 'event($event)',
+        '(focusout)': 'event($event)',
+        '(input)': 'event($event)',
+        '(invalid)': 'event($event)',
+        '(select)': 'event($event)'
+    },
     encapsulation: ViewEncapsulation.None
 })
 export class PeopleWidgetComponent extends WidgetComponent implements OnInit {

lib/core/form/components/widgets/radio-buttons/radio-buttons.widget.ts

@@ -21,13 +21,23 @@ import { LogService } from '../../../../services/log.service';
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormService } from '../../../services/form.service';
 import { FormFieldOption } from './../core/form-field-option';
-import { baseHost , WidgetComponent } from './../widget.component';
+import { WidgetComponent } from './../widget.component';
 
 @Component({
     selector: 'radio-buttons-widget',
     templateUrl: './radio-buttons.widget.html',
     styleUrls: ['./radio-buttons.widget.scss'],
-    host: baseHost,
+    host: {
+        '(click)': 'event($event)',
+        '(blur)': 'event($event)',
+        '(change)': 'event($event)',
+        '(focus)': 'event($event)',
+        '(focusin)': 'event($event)',
+        '(focusout)': 'event($event)',
+        '(input)': 'event($event)',
+        '(invalid)': 'event($event)',
+        '(select)': 'event($event)'
+    },
     encapsulation: ViewEncapsulation.None
 })
 export class RadioButtonsWidgetComponent extends WidgetComponent implements OnInit {

lib/core/form/components/widgets/text/text.widget.ts

@@ -19,13 +19,23 @@
 
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormService } from './../../../services/form.service';
-import { baseHost , WidgetComponent } from './../widget.component';
+import { WidgetComponent } from './../widget.component';
 
 @Component({
     selector: 'text-widget',
     templateUrl: './text.widget.html',
     styleUrls: ['./text.widget.scss'],
-    host: baseHost,
+    host: {
+        '(click)': 'event($event)',
+        '(blur)': 'event($event)',
+        '(change)': 'event($event)',
+        '(focus)': 'event($event)',
+        '(focusin)': 'event($event)',
+        '(focusout)': 'event($event)',
+        '(input)': 'event($event)',
+        '(invalid)': 'event($event)',
+        '(select)': 'event($event)'
+    },
     encapsulation: ViewEncapsulation.None
 })
 export class TextWidgetComponent extends WidgetComponent implements OnInit {

lib/core/form/components/widgets/typeahead/typeahead.widget.ts

@@ -22,13 +22,23 @@ import { ENTER, ESCAPE } from '@angular/cdk/keycodes';
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormService } from './../../../services/form.service';
 import { FormFieldOption } from './../core/form-field-option';
-import { baseHost, WidgetComponent } from './../widget.component';
+import { WidgetComponent } from './../widget.component';
 
 @Component({
     selector: 'typeahead-widget',
     templateUrl: './typeahead.widget.html',
     styleUrls: ['./typeahead.widget.scss'],
-    host: baseHost,
+    host: {
+        '(click)': 'event($event)',
+        '(blur)': 'event($event)',
+        '(change)': 'event($event)',
+        '(focus)': 'event($event)',
+        '(focusin)': 'event($event)',
+        '(focusout)': 'event($event)',
+        '(input)': 'event($event)',
+        '(invalid)': 'event($event)',
+        '(select)': 'event($event)'
+    },
     encapsulation: ViewEncapsulation.None
 })
 export class TypeaheadWidgetComponent extends WidgetComponent implements OnInit {

lib/core/form/components/widgets/unknown/unknown.widget.ts

@@ -19,7 +19,7 @@
 
 import { Component, ViewEncapsulation } from '@angular/core';
 import { FormService } from './../../../services/form.service';
-import { baseHost , WidgetComponent } from './../widget.component';
+import { WidgetComponent } from './../widget.component';
 
 @Component({
     selector: 'unknown-widget',
@@ -33,7 +33,17 @@ import { baseHost , WidgetComponent } from './../widget.component';
 
     `,
     styleUrls: ['./unknown.widget.scss'],
-    host: baseHost,
+    host: {
+        '(click)': 'event($event)',
+        '(blur)': 'event($event)',
+        '(change)': 'event($event)',
+        '(focus)': 'event($event)',
+        '(focusin)': 'event($event)',
+        '(focusout)': 'event($event)',
+        '(input)': 'event($event)',
+        '(invalid)': 'event($event)',
+        '(select)': 'event($event)'
+    },
     encapsulation: ViewEncapsulation.None
 })
 export class UnknownWidgetComponent extends WidgetComponent {

lib/core/form/components/widgets/upload-folder/upload-folder.widget.ts

@@ -24,14 +24,24 @@ import { Observable, from } from 'rxjs';
 import { FormService } from '../../../services/form.service';
 import { ProcessContentService } from '../../../services/process-content.service';
 import { ContentLinkModel } from '../core/content-link.model';
-import { baseHost, WidgetComponent } from './../widget.component';
+import { WidgetComponent } from './../widget.component';
 import { mergeMap, map } from 'rxjs/operators';
 
 @Component({
     selector: 'upload-folder-widget',
     templateUrl: './upload-folder.widget.html',
     styleUrls: ['./upload-folder.widget.scss'],
-    host: baseHost,
+    host: {
+        '(click)': 'event($event)',
+        '(blur)': 'event($event)',
+        '(change)': 'event($event)',
+        '(focus)': 'event($event)',
+        '(focusin)': 'event($event)',
+        '(focusout)': 'event($event)',
+        '(input)': 'event($event)',
+        '(invalid)': 'event($event)',
+        '(select)': 'event($event)'
+    },
     encapsulation: ViewEncapsulation.None
 })
 export class UploadFolderWidgetComponent extends WidgetComponent implements OnInit {

lib/core/form/components/widgets/upload/upload.widget.ts

@@ -24,14 +24,24 @@ import { Observable, from } from 'rxjs';
 import { FormService } from '../../../services/form.service';
 import { ProcessContentService } from '../../../services/process-content.service';
 import { ContentLinkModel } from '../core/content-link.model';
-import { baseHost, WidgetComponent } from './../widget.component';
+import { WidgetComponent } from './../widget.component';
 import { mergeMap, map } from 'rxjs/operators';
 
 @Component({
     selector: 'upload-widget',
     templateUrl: './upload.widget.html',
     styleUrls: ['./upload.widget.scss'],
-    host: baseHost,
+    host: {
+        '(click)': 'event($event)',
+        '(blur)': 'event($event)',
+        '(change)': 'event($event)',
+        '(focus)': 'event($event)',
+        '(focusin)': 'event($event)',
+        '(focusout)': 'event($event)',
+        '(input)': 'event($event)',
+        '(invalid)': 'event($event)',
+        '(select)': 'event($event)'
+    },
     encapsulation: ViewEncapsulation.None
 })
 export class UploadWidgetComponent extends WidgetComponent implements OnInit {

lib/core/form/components/widgets/widget.component.ts

@@ -21,7 +21,13 @@ import { AfterViewInit, Component, EventEmitter, Input, Output, ViewEncapsulatio
 import { FormService } from './../../services/form.service';
 import { FormFieldModel } from './core/index';
 
-export const baseHost = {
+/**
+ * Base widget component.
+ */
+@Component({
+    selector: 'base-widget',
+    template: '',
+    host: {
         '(click)': 'event($event)',
         '(blur)': 'event($event)',
         '(change)': 'event($event)',
@@ -31,15 +37,7 @@ export const baseHost = {
         '(input)': 'event($event)',
         '(invalid)': 'event($event)',
         '(select)': 'event($event)'
-};
+    },
-
-/**
- * Base widget component.
- */
-@Component({
-    selector: 'base-widget',
-    template: '',
-    host: baseHost,
     encapsulation: ViewEncapsulation.None
 })
 export class WidgetComponent implements AfterViewInit {

lib/core/form/public-api.ts

@@ -15,9 +15,11 @@
  * limitations under the License.
  */
 
+export * from './components/form-field/form-field.component';
 export * from './components/form-base.component';
 export * from './components/form-list.component';
 export * from './components/widgets/content/content.widget';
+export * from './components/form-custom-button.directive';
 export * from './components/form-renderer.component';
 export * from './components/widgets/index';
 export * from './components/widgets/dynamic-table/dynamic-table-row.model';

lib/core/icon/icon.module.ts

@@ -19,7 +19,6 @@ import { NgModule } from '@angular/core';
 import { IconComponent } from './icon.component';
 import { MatIconModule } from '@angular/material';
 import { CommonModule } from '@angular/common';
-import { ThumbnailService } from '../services/thumbnail.service';
 
 @NgModule({
     imports: [
@@ -31,9 +30,6 @@ import { ThumbnailService } from '../services/thumbnail.service';
     ],
     exports: [
         IconComponent
-    ],
-    providers: [
-        ThumbnailService
     ]
 })
 export class IconModule {}

lib/core/index.ts

@@ -51,4 +51,5 @@ export * from './events/index';
 export * from './mock/index';
 export * from './testing';
 
+export * from './material.module';
 export * from './core.module';

lib/core/info-drawer/info-drawer.module.ts

@@ -23,24 +23,27 @@ import { InfoDrawerLayoutComponent, InfoDrawerTitleDirective, InfoDrawerButtonsD
 import { InfoDrawerComponent, InfoDrawerTabComponent } from './info-drawer.component';
 import { TranslateModule } from '@ngx-translate/core';
 
-export function declarations() {
-    return [
-        InfoDrawerLayoutComponent,
-        InfoDrawerTabComponent,
-        InfoDrawerComponent,
-        InfoDrawerTitleDirective,
-        InfoDrawerButtonsDirective,
-        InfoDrawerContentDirective
-    ];
-}
-
 @NgModule({
     imports: [
         CommonModule,
         MaterialModule,
         TranslateModule.forChild()
     ],
-    declarations: declarations(),
+    declarations: [
-    exports: declarations()
+        InfoDrawerLayoutComponent,
+        InfoDrawerTabComponent,
+        InfoDrawerComponent,
+        InfoDrawerTitleDirective,
+        InfoDrawerButtonsDirective,
+        InfoDrawerContentDirective
+    ],
+    exports: [
+        InfoDrawerLayoutComponent,
+        InfoDrawerTabComponent,
+        InfoDrawerComponent,
+        InfoDrawerTitleDirective,
+        InfoDrawerButtonsDirective,
+        InfoDrawerContentDirective
+    ]
 })
 export class InfoDrawerModule {}

lib/core/layout/public-api.ts

@@ -15,6 +15,13 @@
  * limitations under the License.
  */
 
+export * from './components/header/header.component';
+export * from './components/layout-container/layout-container.component';
+export * from './components/sidebar-action/sidebar-action-menu.component';
 export * from './components/sidenav-layout/sidenav-layout.component';
 
+export * from './directives/sidenav-layout-content.directive';
+export * from './directives/sidenav-layout-header.directive';
+export * from './directives/sidenav-layout-navigation.directive';
+
 export * from './layout.module';

lib/core/mock/cookie.service.mock.ts

@@ -15,8 +15,10 @@
  * limitations under the License.
  */
 
+import { Injectable } from '@angular/core';
 import { CookieService } from '../services/cookie.service';
 
+@Injectable()
 export class CookieServiceMock extends CookieService {
 
     /** @override */

lib/core/mock/translation.service.mock.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { EventEmitter } from '@angular/core';
+import { EventEmitter, Injectable } from '@angular/core';
 import { Observable, of } from 'rxjs';
 import { TranslationService } from '../services/translation.service';
 
@@ -24,6 +24,7 @@ export interface LangChangeEvent {
     translations: any;
 }
 
+@Injectable()
 export class TranslationMock implements TranslationService {
 
     defaultLang: string = 'en';

lib/core/ng-package.json

@@ -1,15 +1,12 @@
 {
   "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
-  "workingDirectory" : "./ng_work",
-  "src": "./core/",
   "dest": "../dist/core/",
   "lib": {
-    "languageLevel": [ "dom", "es2016" ],
-    "comments" : "none",
     "entryFile": "./public-api.ts",
     "flatModuleFile": "adf-core",
     "umdModuleIds": {
       "@alfresco/js-api": "@alfresco/js-api",
+      "@alfresco/adf-extensions": "@alfresco/adf-extensions",
       "minimatch": "minimatch-browser",
       "@angular/platform-browser/animations": "@angular/platform-browser/animations",
       "@angular/material": "@angular/material",

lib/core/pipes/public-api.ts

@@ -15,15 +15,17 @@
  * limitations under the License.
  */
 
+export * from './decimal-number.pipe';
 export * from './file-size.pipe';
+export * from './file-type.pipe';
+export * from './format-space.pipe';
+export * from './full-name.pipe';
+export * from './localized-date.pipe';
 export * from './mime-type-icon.pipe';
+export * from './multi-value.pipe';
 export * from './node-name-tooltip.pipe';
 export * from './text-highlight.pipe';
 export * from './time-ago.pipe';
 export * from './user-initial.pipe';
-export * from './full-name.pipe';
-export * from './multi-value.pipe';
-export * from './localized-date.pipe';
-export * from './decimal-number.pipe';
 
 export * from './pipe.module';

lib/core/search-text/public-api.ts

@@ -15,5 +15,7 @@
  * limitations under the License.
  */
 
+export * from './animations';
 export * from './search-text-input.component';
+export * from './search-trigger.directive';
 export * from './search-text-input.module';

lib/core/search-text/search-text-input.component.spec.ts

@@ -32,8 +32,7 @@ describe('SearchTextInputComponent', () => {
     let userPreferencesService: UserPreferencesService;
 
     setupTestBed({
-        imports: [CoreTestingModule],
+        imports: [CoreTestingModule]
-        providers: [ UserPreferencesService ]
     });
 
     beforeEach(() => {

lib/core/services/directionality-config.service.spec.ts

@@ -16,7 +16,6 @@
  */
 
 import { TestBed } from '@angular/core/testing';
-import { DirectionalityConfigService } from './directionality-config.service';
 import { CoreTestingModule } from '../testing/core.testing.module';
 import { setupTestBed } from '../testing/setup-test-bed';
 import { UserPreferencesService } from './user-preferences.service';
@@ -25,11 +24,7 @@ describe('DirectionalityConfigService', () => {
     let userPreferencesService: UserPreferencesService;
 
     setupTestBed({
-        imports: [CoreTestingModule],
+        imports: [CoreTestingModule]
-        providers: [
-            DirectionalityConfigService,
-            UserPreferencesService
-        ]
     });
 
     beforeEach(() => {

lib/core/services/translate-loader.service.ts

@@ -17,7 +17,6 @@
 
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { Response } from '@angular/http';
 import { TranslateLoader } from '@ngx-translate/core';
 import { Observable, forkJoin, throwError, of } from 'rxjs';
 import { ComponentTranslationModel } from '../models/component.model';
@@ -59,7 +58,7 @@ export class TranslateLoaderService implements TranslateLoader {
         const translationUrl = fallbackUrl || `${component.path}/${this.prefix}/${lang}${this.suffix}?v=${Date.now()}`;
 
         return this.http.get(translationUrl).pipe(
-            map((res: Response) => {
+            map((res: any) => {
                 component.json[lang] = res;
             }),
             retry(3),

lib/core/services/upload.service.ts

@@ -16,7 +16,7 @@
  */
 
 import { EventEmitter, Injectable } from '@angular/core';
-import { Minimatch } from 'minimatch-browser';
+import { Minimatch } from 'minimatch';
 import { Subject } from 'rxjs';
 import { AppConfigService } from '../app-config/app-config.service';
 import {

lib/core/tsconfig.lib.json

@@ -1,6 +1,7 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
-    "outDir": "../dist/core/"
+    "outDir": "../dist/core/",
+    "baseUrl": "."
   }
 }

lib/core/utils/moment-date-adapter.ts

@@ -15,10 +15,12 @@
  * limitations under the License.
  */
 
+import { Injectable } from '@angular/core';
 import { DateAdapter } from '@angular/material';
 import { isMoment, Moment } from 'moment';
 import moment from 'moment-es6';
 
+@Injectable()
 export class MomentDateAdapter extends DateAdapter<Moment> {
 
     private localeData: any = moment.localeData();

lib/core/viewer/public-api.ts

@@ -19,9 +19,11 @@ export * from './services/view-util.service';
 export * from './components/viewer.component';
 export * from './components/img-viewer.component';
 export * from './components/media-player.component';
+export * from './components/pdf-viewer-password-dialog';
 export * from './components/pdf-viewer.component';
 export * from './components/pdf-viewer-thumbnails.component';
 export * from './components/pdf-viewer-thumb.component';
+export * from './components/pdf-viewer-thumbnails.component';
 export * from './components/txt-viewer.component';
 export * from './components/unknown-format/unknown-format.component';
 export * from './components/viewer-more-actions.component';

lib/core/viewer/viewer.module.ts

@@ -46,7 +46,6 @@ import { A11yModule } from '@angular/cdk/a11y';
 
 @NgModule({
     imports: [
-        ExtensionsModule,
         CommonModule,
         MaterialModule,
         TranslateModule.forChild(),
@@ -56,7 +55,8 @@ import { A11yModule } from '@angular/cdk/a11y';
         PipeModule,
         FlexLayoutModule,
         DirectiveModule,
-        A11yModule
+        A11yModule,
+        ExtensionsModule
     ],
     declarations: [
         PdfPasswordDialogComponent,

lib/extensions/ng-package.json

@@ -3,7 +3,6 @@
   "dest": "../dist/extensions/",
   "deleteDestPath": false,
   "lib": {
-    "languageLevel": ["dom", "es2017"],
     "entryFile": "src/public-api.ts",
     "flatModuleFile": "adf-extensions",
     "umdModuleIds": {

lib/extensions/src/public-api.ts

@@ -42,3 +42,4 @@ export * from './lib/store/states/selection.state';
 export * from './lib/store/states/repository.state';
 
 export * from './lib/components/public-api';
+export * from './lib/extensions.module';

lib/insights/ng-package.json

@@ -2,7 +2,6 @@
   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
   "dest": "../dist/insights/",
   "lib": {
-    "languageLevel": [ "dom", "es2017" ],
     "entryFile": "src/public-api.ts",
     "flatModuleFile": "adf-insights",
     "umdModuleIds": {

lib/insights/src/lib/analytics-process/public-api.ts

@@ -16,9 +16,18 @@
  */
 
 export * from './components/analytics.component';
+export * from './components/analytics-report-heat-map.component';
 export * from './components/analytics-generator.component';
 export * from './components/analytics-report-list.component';
 export * from './components/analytics-report-parameters.component';
+export * from './components/analytics.component';
+
+export * from './components/widgets/checkbox/checkbox.widget';
+export * from './components/widgets/date-range/date-range.widget';
+export * from './components/widgets/dropdown/dropdown.widget';
+export * from './components/widgets/duration/duration.widget';
+export * from './components/widgets/number/number.widget';
+export * from './components/widgets/widget.component';
 
 export * from './services/analytics.service';
 

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

@@ -17,7 +17,6 @@
 
 import { AlfrescoApiService, LogService } from '@alfresco/adf-core';
 import { Injectable } from '@angular/core';
-import { Response } from '@angular/http';
 import { Observable, from, throwError, of } from 'rxjs';
 import { ParameterValueModel } from '../../diagram/models/report/parameter-value.model';
 import { ReportParametersModel } from '../../diagram/models/report/report-parameters.model';
@@ -30,7 +29,7 @@ import { PieChart } from '../../diagram/models/chart/pie-chart.model';
 import { TableChart } from '../../diagram/models/chart/table-chart.model';
 import { map, catchError } from 'rxjs/operators';
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class AnalyticsService {
 
     constructor(private apiService: AlfrescoApiService,
@@ -256,7 +255,7 @@ export class AnalyticsService {
             );
     }
 
-    private handleError(error: Response) {
+    private handleError(error: any) {
         this.logService.error(error);
         return throwError(error || 'Server error');
     }

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

@@ -19,7 +19,7 @@ import { Injectable , OnDestroy } from '@angular/core';
 
 declare let Raphael: any;
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class RaphaelService implements OnDestroy {
 
     paper: any;

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

@@ -18,6 +18,95 @@
 export * from './components/diagram-sequence-flow.component';
 export * from './components/diagram.component';
 
+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';
+export * from './components/activities/diagram-camel-task.component';
+export * from './components/activities/diagram-container-service-task.component';
+export * from './components/activities/diagram-google-drive-publish-task.component';
+export * from './components/activities/diagram-manual-task.component';
+export * from './components/activities/diagram-mule-task.component';
+export * from './components/activities/diagram-receive-task.component';
+export * from './components/activities/diagram-rest-call-task.component';
+export * from './components/activities/diagram-script-task.component';
+export * from './components/activities/diagram-send-task.component';
+export * from './components/activities/diagram-service-task.component';
+export * from './components/activities/diagram-task.component';
+export * from './components/activities/diagram-user-task.component';
+
+export * from './components/boundary-events/diagram-boundary-event.component';
+export * from './components/boundary-events/diagram-throw-event.component';
+export * from './components/events/diagram-end-event.component';
+export * from './components/events/diagram-event.component';
+export * from './components/events/diagram-start-event.component';
+export * from './components/gateways/diagram-event-gateway.component';
+export * from './components/gateways/diagram-exclusive-gateway.component';
+export * from './components/gateways/diagram-gateway.component';
+export * from './components/gateways/diagram-inclusive-gateway.component';
+export * from './components/gateways/diagram-parallel-gateway.component';
+
+export * from './components/icons/diagram-container-icon-event.component';
+export * from './components/icons/diagram-icon-alfresco-publish-task.component';
+export * from './components/icons/diagram-icon-box-publish-task.component';
+export * from './components/icons/diagram-icon-business-rule-task.component';
+export * from './components/icons/diagram-icon-camel-task.component';
+export * from './components/icons/diagram-icon-error.component';
+export * from './components/icons/diagram-icon-google-drive-publish-task.component';
+export * from './components/icons/diagram-icon-manual-task.component';
+export * from './components/icons/diagram-icon-message.component';
+export * from './components/icons/diagram-icon-mule-task.component';
+export * from './components/icons/diagram-icon-receive-task.component';
+export * from './components/icons/diagram-icon-rest-call-task.component';
+export * from './components/icons/diagram-icon-script-task.component';
+export * from './components/icons/diagram-icon-send-task.component';
+export * from './components/icons/diagram-icon-service-task.component';
+export * from './components/icons/diagram-icon-signal.component';
+export * from './components/icons/diagram-icon-timer.component';
+export * from './components/icons/diagram-icon-user-task.component';
+
+export * from './components/intermediate-catching-events/diagram-intermediate-catching-event.component';
+
+export * from './components/raphael/icons/raphael-icon-alfresco-publish.component';
+export * from './components/raphael/icons/raphael-icon-box-publish.component';
+export * from './components/raphael/icons/raphael-icon-business-rule.component';
+export * from './components/raphael/icons/raphael-icon-camel.component';
+export * from './components/raphael/icons/raphael-icon-error.component';
+export * from './components/raphael/icons/raphael-icon-google-drive-publish.component';
+export * from './components/raphael/icons/raphael-icon-manual.component';
+export * from './components/raphael/icons/raphael-icon-message.component';
+export * from './components/raphael/icons/raphael-icon-mule.component';
+export * from './components/raphael/icons/raphael-icon-receive.component';
+export * from './components/raphael/icons/raphael-icon-rest-call.component';
+export * from './components/raphael/icons/raphael-icon-script.component';
+export * from './components/raphael/icons/raphael-icon-send.component';
+export * from './components/raphael/icons/raphael-icon-service.component';
+export * from './components/raphael/icons/raphael-icon-signal.component';
+export * from './components/raphael/icons/raphael-icon-timer.component';
+export * from './components/raphael/icons/raphael-icon-user.component';
+
+export * from './components/raphael/anchor';
+export * from './components/raphael/polyline';
+export * from './components/raphael/raphael-base';
+export * from './components/raphael/raphael-circle.component';
+export * from './components/raphael/raphael-cross.component';
+export * from './components/raphael/raphael-flow-arrow.component';
+export * from './components/raphael/raphael-multiline-text.component';
+export * from './components/raphael/raphael-pentagon.component';
+export * from './components/raphael/raphael-plus.component';
+export * from './components/raphael/raphael-rect.component';
+export * from './components/raphael/raphael-rhombus.component';
+export * from './components/raphael/raphael-text.component';
+export * from './components/raphael/models/point';
+export * from './components/raphael/raphael.service';
+
+export * from './components/structural/diagram-event-subprocess.component';
+export * from './components/structural/diagram-subprocess.component';
+export * from './components/swimlanes/diagram-lane.component';
+export * from './components/swimlanes/diagram-lanes.component';
+export * from './components/swimlanes/diagram-pool.component';
+export * from './components/swimlanes/diagram-pools.component';
+export * from './components/tooltip/diagram-tooltip.component';
+
 export * from './services/diagram-color.service';
 export * from './services/diagrams.service';
 

lib/insights/src/lib/diagram/services/diagram-color.service.ts

@@ -17,7 +17,7 @@
 
 import { Injectable } from '@angular/core';
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class DiagramColorService {
 
     static CURRENT_COLOR = '#017501';
@@ -33,9 +33,6 @@ export class DiagramColorService {
 
     totalColors: any;
 
-    constructor() {
-    }
-
     setTotalColors(totalColors) {
         this.totalColors = totalColors;
     }

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

@@ -20,7 +20,7 @@ import { Injectable } from '@angular/core';
 import { Observable, from, throwError } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class DiagramsService {
 
     constructor(private apiService: AlfrescoApiService,

lib/insights/src/lib/insights.module.ts

@@ -24,19 +24,6 @@ import { DiagramsModule } from './diagram/diagram.module';
 import { AnalyticsProcessModule } from './analytics-process/analytics-process.module';
 
 import { MaterialModule } from './material.module';
-import { DiagramsService } from './diagram/services/diagrams.service';
-import { DiagramColorService } from './diagram/services/diagram-color.service';
-import { RaphaelService } from './diagram/components/raphael/raphael.service';
-import { AnalyticsService } from './analytics-process/services/analytics.service';
-
-export function providers() {
-    return [
-        AnalyticsService,
-        DiagramsService,
-        DiagramColorService,
-        RaphaelService
-    ];
-}
 
 @NgModule({
     imports: [
@@ -49,7 +36,6 @@ export function providers() {
         AnalyticsProcessModule
     ],
     providers: [
-        ...providers(),
         {
             provide: TRANSLATION_PROVIDER,
             multi: true,
@@ -73,7 +59,6 @@ export class InsightsModule {
         return {
             ngModule: InsightsModule,
             providers: [
-                ...providers(),
                 {
                     provide: TRANSLATION_PROVIDER,
                     multi: true,

lib/insights/src/public-api.ts

@@ -18,4 +18,5 @@
 export * from './lib/analytics-process/public-api';
 export * from './lib/diagram/public-api';
 
+export * from './lib/material.module';
 export * from './lib/insights.module';

lib/process-services-cloud/ng-package.json

@@ -2,7 +2,6 @@
   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
   "dest": "../dist/process-services-cloud",
   "lib": {
-    "languageLevel": ["dom", "es2017"],
     "entryFile": "src/public-api.ts",
     "flatModuleFile": "adf-process-services-cloud",
     "umdModuleIds": {

lib/process-services-cloud/src/lib/app/app-list-cloud.module.ts

@@ -21,7 +21,6 @@ import { MaterialModule } from '../material.module';
 import { CommonModule } from '@angular/common';
 import { AppDetailsCloudComponent } from './components/app-details-cloud.component';
 import { AppListCloudComponent } from './components/app-list-cloud.component';
-import { AppsProcessCloudService } from './services/apps-process-cloud.service';
 import { TemplateModule, CoreModule } from '@alfresco/adf-core';
 
 @NgModule({
@@ -36,9 +35,6 @@ import { TemplateModule, CoreModule } from '@alfresco/adf-core';
         AppListCloudComponent,
         AppDetailsCloudComponent
     ],
-    providers: [
-        AppsProcessCloudService
-    ],
     exports: [
         AppListCloudComponent,
         AppDetailsCloudComponent

lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.spec.ts

@@ -43,7 +43,6 @@ describe('AppListCloudComponent', () => {
     setupTestBed({
         imports: [CoreModule.forRoot(), ProcessServiceCloudTestingModule, AppListCloudModule],
         providers: [
-            AppsProcessCloudService,
             { provide: AlfrescoApiService, useClass: AlfrescoApiServiceMock }
         ]
     });

lib/process-services-cloud/src/lib/app/public-api.ts

@@ -16,6 +16,7 @@
  */
 
 export * from './components/app-list-cloud.component';
+export * from './components/app-details-cloud.component';
 export * from './services/apps-process-cloud.service';
 export * from './models/application-instance.model';
 export * from './app-list-cloud.module';

lib/process-services-cloud/src/lib/app/services/apps-process-cloud.service.spec.ts

@@ -38,7 +38,7 @@ describe('AppsProcessCloudService', () => {
 
     setupTestBed({
         imports: [CoreModule.forRoot(), ProcessServiceCloudTestingModule],
-        providers: [AppsProcessCloudService, AppConfigService,
+        providers: [
             { provide: AlfrescoApiService, useClass: AlfrescoApiServiceMock } ]
     });
 

lib/process-services-cloud/src/lib/app/services/apps-process-cloud.service.ts

@@ -22,7 +22,7 @@ import { AlfrescoApiService, AppConfigService, LogService } from '@alfresco/adf-
 import { Oauth2Auth } from '@alfresco/js-api';
 import { ApplicationInstanceModel } from '../models/application-instance.model';
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class AppsProcessCloudService {
 
     deployedApps: ApplicationInstanceModel[];

lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.spec.ts

@@ -113,7 +113,6 @@ describe('AttachFileCloudWidgetComponent', () => {
             FormCloudModule,
             ContentModule.forRoot()
         ],
-        providers: [],
         schemas: [CUSTOM_ELEMENTS_SCHEMA]
     });
 

lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.ts

@@ -23,7 +23,6 @@ import {
   LogService,
   ThumbnailService,
   NotificationService,
-  baseHost,
   ContentLinkModel
 } from '@alfresco/adf-core';
 import { Node, RelatedContentRepresentation } from '@alfresco/js-api';
@@ -35,7 +34,17 @@ import { UploadCloudWidgetComponent } from './upload-cloud.widget';
     selector: 'adf-cloud-attach-file-cloud-widget',
     templateUrl: './attach-file-cloud-widget.component.html',
     styleUrls: ['./attach-file-cloud-widget.component.scss'],
-    host: baseHost,
+    host: {
+        '(click)': 'event($event)',
+        '(blur)': 'event($event)',
+        '(change)': 'event($event)',
+        '(focus)': 'event($event)',
+        '(focusin)': 'event($event)',
+        '(focusout)': 'event($event)',
+        '(input)': 'event($event)',
+        '(invalid)': 'event($event)',
+        '(select)': 'event($event)'
+    },
     encapsulation: ViewEncapsulation.None
 })
 export class AttachFileCloudWidgetComponent extends UploadCloudWidgetComponent