[ADF-5432] component template and code fixes after testing Angular strict mode (#7118)

* process list fixes * template error fixes * template and code fixes * bug fixes in templates and types * bugs, bugs are everywhere * fix test * test fixes * enable strict templates for extensions lib * enable strict mode for insights lib * enable strict mode for core lib * enable strict mode for content lib * strict mode for process lib * strict mode for process cloud * fix demo shell template issues * fix process cloud types
2025-09-10 14:11:42 +00:00 · 2021-06-22 16:36:06 +01:00
parent e2b8557f4b
commit 829805e201
129 changed files with 534 additions and 435 deletions
--- a/demo-shell/src/app/components/app-layout/app-layout.component.ts
+++ b/demo-shell/src/app/components/app-layout/app-layout.component.ts
@@ -20,6 +20,7 @@ import { UserPreferencesService, AppConfigService, AlfrescoApiService, UserPrefe
 import { HeaderDataService } from '../header-data/header-data.service';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { ThemePalette } from '@angular/material/core';

@Component({
    templateUrl: './app-layout.component.html',
@@ -92,14 +93,14 @@ export class AppLayoutComponent implements OnInit, OnDestroy {

    expandedSidenav = false;

-    position = 'start';
+    position: 'start' | 'end' = 'start';
    direction = 'ltr';

    hideSidenav = false;
    showMenu = true;

    enableRedirect = true;
-    color = 'primary';
+    color: ThemePalette = 'primary';
    title = 'APP_LAYOUT.APP_NAME';
    logo: string;
    redirectUrl: string | any[] = ['/home'];
--- a/demo-shell/src/app/components/cloud/community/community-task-cloud.component.ts
+++ b/demo-shell/src/app/components/cloud/community/community-task-cloud.component.ts
@@ -48,7 +48,7 @@ export class CommunityTasksCloudDemoComponent implements OnInit, OnDestroy {

    filterId;
    multiselect: boolean;
-    selectedRows: string[] = [];
+    selectedRows: any[] = [];
    testingMode: boolean;
    selectionMode: string;
    taskDetailsRedirection: boolean;
--- a/demo-shell/src/app/components/cloud/people-groups-cloud-demo.component.html
+++ b/demo-shell/src/app/components/cloud/people-groups-cloud-demo.component.html
@@ -20,15 +20,15 @@
            </mat-radio-group>
            <mat-form-field *ngIf="!isPeopleAppNameSelected()" class="app-preselect-value">
                <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.ROLE' | translate }} ["ACTIVITI_ADMIN", "ACTIVITI_USER"]</mat-label>
-                <input matInput (input)="setPeopleRoles($event.target?.value)" data-automation-id="app-people-roles-input" />
+                <input matInput (input)="setPeopleRoles($any($event).target?.value)" data-automation-id="app-people-roles-input" />
            </mat-form-field>
            <mat-form-field *ngIf="isPeopleAppNameSelected()" class="app-preselect-value">
                <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.APP_NAME' | translate }}</mat-label>
-                <input matInput (input)="setPeopleAppName($event.target?.value)" data-automation-id="app-people-app-input" />
+                <input matInput (input)="setPeopleAppName($any($event).target?.value)" data-automation-id="app-people-app-input" />
            </mat-form-field>
            <mat-form-field class="app-preselect-value-full">
                <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.PRESELECTED_VALUE' | translate }} {{ DEFAULT_PEOPLE_PLACEHOLDER }}</mat-label>
-                <input matInput (input)="setPeoplePreselectValue($event.target?.value)"  data-automation-id="app-people-preselect-input" />
+                <input matInput (input)="setPeoplePreselectValue($any($event).target?.value)"  data-automation-id="app-people-preselect-input" />
            </mat-form-field>
            <mat-checkbox class="app-preselect-value" (change)="onChangePeopleValidation($event)">{{
                'PEOPLE_GROUPS_CLOUD.PRESELECT_VALIDATION' | translate }}</mat-checkbox>
@@ -92,19 +92,19 @@
            <mat-form-field *ngIf="!isGroupAppNameSelected()" class="app-preselect-value">
                <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.ROLE' | translate }} ["ACTIVITI_ADMIN", "ACTIVITI_USER"]</mat-label>
                <input matInput
-                    (input)="setGroupRoles($event.target?.value)"
+                    (input)="setGroupRoles($any($event).target?.value)"
                    data-automation-id="app-group-roles-input"/>
            </mat-form-field>
            <mat-form-field *ngIf="isGroupAppNameSelected()" class="app-preselect-value">
                <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.APP_NAME' | translate }}</mat-label>
                <input matInput
-                    (input)="setGroupAppName($event.target?.value)"
+                    (input)="setGroupAppName($any($event).target?.value)"
                    data-automation-id="app-group-app-input"/>
            </mat-form-field>
            <mat-form-field class="app-preselect-value-full">
                <mat-label>Preselect: {{ DEFAULT_GROUP_PLACEHOLDER }}</mat-label>
                <input matInput
-                    (input)="setGroupsPreselectValue($event.target?.value)"
+                    (input)="setGroupsPreselectValue($any($event).target?.value)"
                    data-automation-id="app-group-preselect-input" />
            </mat-form-field>
            <mat-checkbox class="app-preselect-value" (change)="onChangeGroupValidation($event)">
--- a/demo-shell/src/app/components/cloud/start-process-cloud-demo.component.ts
+++ b/demo-shell/src/app/components/cloud/start-process-cloud-demo.component.ts
@@ -32,7 +32,7 @@ export class StartProcessCloudDemoComponent implements OnInit {

    appName;
    processName: string;
-    formValues: string;
+    formValues: any;
    variables: any;

    constructor(private appConfig: AppConfigService,
--- a/demo-shell/src/app/components/cloud/tasks-cloud-demo.component.html
+++ b/demo-shell/src/app/components/cloud/tasks-cloud-demo.component.html
@@ -37,8 +37,7 @@
            (showRowContextMenu)="onShowRowContextMenu($event)"
            (executeRowAction)="onExecuteRowAction($event)"
            (rowClick)="onRowClick($event)"
-            (rowsSelected)="onRowsSelected($event)"
-            #taskCloud>
+            (rowsSelected)="onRowsSelected($event)">
        </adf-cloud-task-list>
        <adf-pagination
            [target]="taskCloud"
--- a/demo-shell/src/app/components/cloud/tasks-cloud-demo.component.ts
+++ b/demo-shell/src/app/components/cloud/tasks-cloud-demo.component.ts
@@ -47,7 +47,7 @@ export class TasksCloudDemoComponent implements OnInit, OnDestroy {

    filterId;
    multiselect: boolean;
-    selectedRows: string[] = [];
+    selectedRows: any[] = [];
    actionMenu: boolean;
    contextMenu: boolean;
    actions: any[] = [];
--- a/demo-shell/src/app/components/content-node-selector/content-node-selector.component.ts
+++ b/demo-shell/src/app/components/content-node-selector/content-node-selector.component.ts
@@ -16,7 +16,7 @@
 */

 import { Component, ViewEncapsulation } from '@angular/core';
-import { SitePaging, SiteEntry, MinimalNodeEntryEntity } from '@alfresco/js-api';
+import { SitePaging, SiteEntry, MinimalNodeEntryEntity, Node } from '@alfresco/js-api';
 import { ContentNodeDialogService, ShareDataRow, RowFilter } from '@alfresco/adf-content-services';
 import { ThumbnailService } from '@alfresco/adf-core';

@@ -99,8 +99,8 @@ export class ContentNodeSelectorComponent {
        return this.thumbnailService.getMimeTypeIcon('video/quicktime');
    }

-    onNodeSelect(node: MinimalNodeEntryEntity) {
-        this.validSelection = !!node;
+    onNodeSelect(selection: Node[]) {
+        this.validSelection = !!selection;
    }

    customIsValidFunction(entry: MinimalNodeEntryEntity): boolean {
--- a/demo-shell/src/app/components/datatable/drag-and-drop/datatable-dnd.component.html
+++ b/demo-shell/src/app/components/datatable/drag-and-drop/datatable-dnd.component.html
@@ -1,8 +1,8 @@
 <h1>DataTable Drag and Drop Demo</h1>
 <div data-automation-id="datatable"
    (header-dragover)="onDragOver($event)"
-    (header-drop)="onDrop($event)"
+    (header-drop)="onDrop($any($event))"
    (cell-dragover)="onDragOver($event)"
-    (cell-drop)="onDrop($event)">
+    (cell-drop)="onDrop($any($event))">
    <adf-datatable [data]="data"></adf-datatable>
 </div>
--- a/demo-shell/src/app/components/datatable/drag-and-drop/datatable-dnd.component.ts
+++ b/demo-shell/src/app/components/datatable/drag-and-drop/datatable-dnd.component.ts
@@ -88,7 +88,7 @@ export class DataTableDnDComponent implements OnInit {
        this.data.setSorting(new DataSorting('id', 'asc'));
    }

-    onDragOver(event: CustomEvent) {
+    onDragOver(event: Event) {
        event.preventDefault();
    }

--- a/demo-shell/src/app/components/file-view/file-view.component.ts
+++ b/demo-shell/src/app/components/file-view/file-view.component.ts
@@ -17,7 +17,7 @@

 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, Router, PRIMARY_OUTLET } from '@angular/router';
-import { ContentService, AllowableOperationsEnum, PermissionsEnum, NodesApiService } from '@alfresco/adf-core';
+import { ContentService, AllowableOperationsEnum, PermissionsEnum, NodesApiService, FileUploadErrorEvent } from '@alfresco/adf-core';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { PreviewService } from '../../services/preview.service';

@@ -103,7 +103,8 @@ export class FileViewComponent implements OnInit {
        this.router.navigateByUrl(primaryUrl);
    }

-    onUploadError(errorMessage: string) {
+    onUploadError(event: FileUploadErrorEvent) {
+        const errorMessage = event.error;
        this.snackBar.open(errorMessage, '', { duration: 4000 });
    }

--- a/demo-shell/src/app/components/files/files.component.html
+++ b/demo-shell/src/app/components/files/files.component.html
@@ -14,7 +14,7 @@
                locationFormat="/files"
                [display]="'gallery'"
                [preselectNodes]="selectedNodes"
-                [showHeader]="false"
+                [showHeader]="noHeaderMode"
                [maxItems]="5"
                (preview)="showFile($event)"
                selectionMode="null">
@@ -117,7 +117,7 @@
                    <button mat-icon-button
                            data-automation-id="delete-toolbar-button"
                            adf-check-allowable-operation="delete"
-                            permanent=true
+                            [permanent]="true"
                            [adf-nodes]="documentList.selection"
                            title="{{ 'DOCUMENT_LIST.TOOLBAR.DELETE' | translate }}"
                            (delete)="onDeleteActionSuccess($event)"
@@ -156,7 +156,7 @@
                </button>

                <mat-menu #themePicker="matMenu">
-                    <button mat-menu-item (click)="toolbarColor = 'default'">Default</button>
+                    <button mat-menu-item (click)="toolbarColor = null">Default</button>
                    <button mat-menu-item (click)="toolbarColor = 'primary'">Primary</button>
                    <button mat-menu-item (click)="toolbarColor = 'accent'">Accent</button>
                    <button mat-menu-item (click)="toolbarColor = 'warn'">Warn</button>
@@ -239,7 +239,7 @@
                (preview)="showFile($event)"
                (folderChange)="onFolderChange($event)"
                (permissionError)="handlePermissionError($event)"
-                (name-click)="documentList.onNodeDblClick($event.detail?.node)"
+                (name-click)="documentList.onNodeDblClick($any($event).detail?.node)"
                (filterSelection)="onFilterSelected($event)">

                <adf-custom-no-permission-template *ngIf="enableCustomPermissionMessage">
@@ -648,7 +648,7 @@
        <form class="example-form">
            <mat-form-field *ngIf="preselectNodes" class="adf-preselect-nodes-input">
                <input matInput
-                (input)="setPreselectNodes($event.target?.value)"
+                (input)="setPreselectNodes($any($event).target?.value)"
                placeholder="NodeEntry[] => [{ entry: { isFile: true, id: 'node-id' }}, { entry: { isFile: true, id: 'node-id' }} ]">
            </mat-form-field>
        </form>
--- a/demo-shell/src/app/components/files/files.component.ts
+++ b/demo-shell/src/app/components/files/files.component.ts
@@ -48,6 +48,7 @@ import { MetadataDialogAdapterComponent } from './metadata-dialog-adapter.compon
 import { Subject } from 'rxjs';
 import { PreviewService } from '../../services/preview.service';
 import { takeUntil, debounceTime, scan } from 'rxjs/operators';
+import { ThemePalette } from '@angular/material/core';

 const DEFAULT_FOLDER_TO_SHOW = '-my-';

@@ -74,7 +75,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
        this.appConfig.get<string>(AppConfigValues.BASESHAREURL) ||
        this.appConfig.get<string>(AppConfigValues.ECMHOST)) + '/preview/s/';

-    toolbarColor = 'default';
+    toolbarColor: ThemePalette;

    selectionModes = [
        { value: 'none', viewValue: 'None' },
@@ -94,7 +95,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
    sorting = ['name', 'ASC'];

    @Input()
-    sortingMode = 'server';
+    sortingMode: 'server' | 'client' = 'server';

    @Input()
    showRecentFiles = true;
@@ -106,7 +107,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
    showSettingsPanel = true;

    @Input()
-    showHeader: string = ShowHeaderMode.Always;
+    showHeader = ShowHeaderMode.Always;

    @Input()
    selectionMode = 'multiple';
@@ -207,7 +208,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
    preselectNodes: boolean;
    warnOnMultipleUploads = false;
    thumbnails = false;
-
+    noHeaderMode = ShowHeaderMode.Never;
    enableCustomPermissionMessage = false;
    enableMediumTimeFormat = false;
    displayEmptyMetadata = false;
--- a/demo-shell/src/app/components/files/version-manager-dialog-adapter.component.ts
+++ b/demo-shell/src/app/components/files/version-manager-dialog-adapter.component.ts
@@ -20,6 +20,7 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { MinimalNodeEntryEntity } from '@alfresco/js-api';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { PreviewService } from '../../services/preview.service';
+import { FileUploadErrorEvent } from '@alfresco/adf-core';

@Component({
    templateUrl: './version-manager-dialog-adapter.component.html',
@@ -45,8 +46,9 @@ export class VersionManagerDialogAdapterComponent {
        this.allowDownload = data.hasOwnProperty('allowDownload') ? data.allowDownload : this.allowDownload;
    }

-    uploadError(errorMessage: string) {
-        this.snackBar.open(errorMessage, '', {duration: 4000});
+    uploadError(event: FileUploadErrorEvent) {
+        const errorMessage = event.error;
+        this.snackBar.open(errorMessage, '', { duration: 4000 });
    }

    close() {
@@ -58,7 +60,7 @@ export class VersionManagerDialogAdapterComponent {
        this.close();
    }

-    hideVersionComparison(isCancelled: boolean | Node) {
+    hideVersionComparison(isCancelled: any) {
        if (isCancelled) {
            this.showVersionComparison = false;
            this.newFileVersion = null;
--- a/demo-shell/src/app/components/form/form-list.component.html
+++ b/demo-shell/src/app/components/form/form-list.component.html
@@ -1,4 +1,4 @@
-<adf-form-list [forms]="formList" (row-dblclick)="onRowDblClick($event)">
+<adf-form-list [forms]="formList" (row-dblclick)="onRowDblClick($any($event))">
 </adf-form-list>
 <div class="app-form-container" *ngIf="!isEmptyForm()">
    <adf-form #adfForm [form]="form" [data]="restoredData" [showValidationIcon]="showValidationIcon">
--- a/demo-shell/src/app/components/form/form-list.component.ts
+++ b/demo-shell/src/app/components/form/form-list.component.ts
@@ -60,7 +60,7 @@ export class FormListComponent implements OnInit, OnDestroy {
        this.onDestroy$.complete();
    }

-    onRowDblClick(event: CustomEvent) {
+    onRowDblClick(event: CustomEvent<any>) {
        const rowForm = event.detail.value.obj;

        this.formService.getFormDefinitionById(rowForm.id).subscribe((formModel) => {
--- a/demo-shell/src/app/components/header-data/header-data.component.html
+++ b/demo-shell/src/app/components/header-data/header-data.component.html
@@ -7,13 +7,13 @@

        <div>
            <label>Choose header color</label>
-            <select (change)="changeColor($event.target.value)">
+            <select (change)="changeColor($any($event).target.value)">
                <option value="primary">Primary</option>
                <option value="accent">Accent</option>
                <option value="warn">Warn</option>
            </select>
            OR
-            <input type="text" name="color" (keyup.enter)="changeColor($event.target.value)"
+            <input type="text" name="color" (keyup.enter)="changeColor($any($event).target.value)"
                   placeholder="hex color code">
            <p>*Choose only one value at a time: either hex code or theme color.</p>
            <p>*press enter for submitting new hex color</p>
@@ -21,27 +21,27 @@

        <div>
            <label>Change title</label>
-            <input type="text" name="title" (keyup.enter)="submitTitle($event.target.value)"
+            <input type="text" name="title" (keyup.enter)="submitTitle($any($event).target.value)"
                   placeholder="{{ 'APP_LAYOUT.APP_NAME' | translate}}">
            <p>*press enter for submitting new title</p>
        </div>

        <div>
            <label>Change logo</label>
-            <input type="text" placeholder="URL path" (keyup.enter)="submitLogo($event.target.value)">
+            <input type="text" placeholder="URL path" (keyup.enter)="submitLogo($any($event).target.value)">
            <p>*press enter for submitting new logo</p>
        </div>

        <div>
            <label>Change logo link</label>
-            <input type="url" placeholder="Redirect URL" (keyup.enter)="submitRedirectUrl($event.target.value)">
+            <input type="url" placeholder="Redirect URL" (keyup.enter)="submitRedirectUrl($any($event).target.value)">
            <p>*Input JSON friendly array or explicit string. E.g. ["/test", 33, "user", 11] or "/test"</p>
            <p>*press enter for submitting new link on logo</p>
        </div>

        <div>
            <label>Change logo tooltip</label>
-            <input type="text" placeholder="Tooltip text" (keyup.enter)="submitTooltip($event.target.value)">
+            <input type="text" placeholder="Tooltip text" (keyup.enter)="submitTooltip($any($event).target.value)">
            <p>*press enter for submitting new tooltip</p>
        </div>

--- a/demo-shell/src/app/components/header-data/header-data.component.ts
+++ b/demo-shell/src/app/components/header-data/header-data.component.ts
@@ -16,6 +16,7 @@
 */

 import { Component } from '@angular/core';
+import { ThemePalette } from '@angular/material/core';
 import { HeaderDataService } from './header-data.service';

@Component({
@@ -24,7 +25,7 @@ import { HeaderDataService } from './header-data.service';
 })
 export class HeaderDataComponent {
    checkbox = true;
-    position = 'start';
+    position: 'start' | 'end' = 'start';
    hideSidenavToggle = false;

    constructor(private headerService: HeaderDataService) {
@@ -34,7 +35,7 @@ export class HeaderDataComponent {
        this.headerService.hideMenuButton();
    }

-    changeColor(color: string) {
+    changeColor(color: ThemePalette) {
        this.headerService.changeColor(color);
    }

--- a/demo-shell/src/app/components/header-data/header-data.service.ts
+++ b/demo-shell/src/app/components/header-data/header-data.service.ts
@@ -16,6 +16,7 @@
 */

 import { Injectable, Output, EventEmitter } from '@angular/core';
+import { ThemePalette } from '@angular/material/core';

@Injectable({
    providedIn: 'root'
@@ -26,12 +27,12 @@ export class HeaderDataService {
    show = true;

    @Output() hideMenu = new EventEmitter<boolean>();
-    @Output() color = new EventEmitter<string>();
+    @Output() color = new EventEmitter<ThemePalette>();
    @Output() title = new EventEmitter<string>();
    @Output() logo = new EventEmitter<string>();
    @Output() redirectUrl = new EventEmitter<string | any[]>();
    @Output() tooltip = new EventEmitter<string>();
-    @Output() position = new EventEmitter<string>();
+    @Output() position = new EventEmitter<'start' | 'end'>();
    @Output() hideSidenav = new EventEmitter<boolean>();

    hideMenuButton() {
@@ -39,7 +40,7 @@ export class HeaderDataService {
        this.hideMenu.emit(this.show);
    }

-    changeColor(color: string) {
+    changeColor(color: ThemePalette) {
        this.color.emit(color);
    }

@@ -60,7 +61,7 @@ export class HeaderDataService {
        this.tooltip.emit(tooltip);
    }

-    changePosition(position: string) {
+    changePosition(position: 'start' | 'end') {
        this.position.emit(position);
    }

--- a/demo-shell/src/app/components/process-list-demo/process-list-demo.component.ts
+++ b/demo-shell/src/app/components/process-list-demo/process-list-demo.component.ts
@@ -148,31 +148,35 @@ export class ProcessListDemoComponent implements OnInit, OnDestroy {
        return ended ? 'Completed' : 'Active';
    }

-    get processAppId(): AbstractControl {
-        return this.processListForm.get('processAppId');
+    private getControl<T extends AbstractControl>(key: string): T {
+        return this.processListForm.get(key) as T;
    }

-    get processDefinitionId(): AbstractControl {
-        return this.processListForm.get('processDefinitionId');
+    get processAppId(): FormControl {
+        return this.getControl<FormControl>('processAppId');
    }

-    get processInstanceId(): AbstractControl {
-        return this.processListForm.get('processInstanceId');
+    get processDefinitionId(): FormControl {
+        return this.getControl<FormControl>('processDefinitionId');
    }

-    get processState(): AbstractControl {
-        return this.processListForm.get('processState');
+    get processInstanceId(): FormControl {
+        return this.getControl<FormControl>('processInstanceId');
    }

-    get processSort(): AbstractControl {
-        return this.processListForm.get('processSort');
+    get processState(): FormControl {
+        return this.getControl<FormControl>('processState');
    }

-    get processSize(): AbstractControl {
-        return this.processListForm.get('processSize');
+    get processSort(): FormControl {
+        return this.getControl<FormControl>('processSort');
    }

-    get processPage(): AbstractControl {
-        return this.processListForm.get('processPage');
+    get processSize(): FormControl {
+        return this.getControl<FormControl>('processSize');
+    }
+
+    get processPage(): FormControl {
+        return this.getControl<FormControl>('processPage');
    }
 }
--- a/demo-shell/src/app/components/process-service/process-service.component.html
+++ b/demo-shell/src/app/components/process-service/process-service.component.html
@@ -53,7 +53,7 @@
                        (rowClick)="onTaskRowClick($event)"
                        (success)="onSuccessTaskList()"
                        (row-click)="onRowClick($event)"
-                        (row-dblclick)="onTaskRowDblClick($event)"
+                        (row-dblclick)="onTaskRowDblClick($any($event))"
                        [multiselect]="multiSelectTask"
                        #taskList>
                        <!-- Custom column definition demo -->
@@ -168,7 +168,7 @@
                        [showContextMenu]="processContextMenu"
                        (showRowContextMenu)="onShowProcessRowContextMenu($event)"
                        (rowClick)="onProcessRowClick($event)"
-                        (row-dblclick)="onProcessRowDblClick($event)"
+                        (row-dblclick)="onProcessRowDblClick($any($event))"
                        [multiselect]="multiSelectProcess"
                        (success)="onSuccessProcessList()">
                        <!-- Custom column definition demo -->
--- a/demo-shell/src/app/components/process-service/process-service.component.ts
+++ b/demo-shell/src/app/components/process-service/process-service.component.ts
@@ -113,10 +113,10 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
    @Input()
    appId: number = null;

-    filterSelected: object = null;
+    filterSelected: any = null;

    @Output()
-    changePageSize: EventEmitter<Pagination> = new EventEmitter();
+    changePageSize = new EventEmitter<Pagination>();

    selectFirstReport = false;
    multiSelectTask = false;
--- a/demo-shell/src/app/components/search/search-result.component.html
+++ b/demo-shell/src/app/components/search/search-result.component.html
@@ -13,14 +13,14 @@
            <adf-search-form (formChange)="onFormChange($event)"></adf-search-form>
        </div>
        <app-files-component
-            [showHeader]="false"
+            [showHeader]="showHeader"
            [sorting]="sorting"
            [sortingMode]="'server'"
            [showRecentFiles]="false"
            [showSitePicker]="false"
            [showSettingsPanel]="false"
            [currentFolderId]="null"
-            [nodeResult]="data"
+            [nodeResult]="$any(data)"
            [disableDragArea]="true"
            [pagination]="pagination"
            [searchTerm]="searchedWord"
--- a/demo-shell/src/app/components/search/search-result.component.ts
+++ b/demo-shell/src/app/components/search/search-result.component.ts
@@ -19,7 +19,7 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { Pagination, ResultSetPaging } from '@alfresco/js-api';
 import { SearchForm, SearchQueryBuilderService } from '@alfresco/adf-content-services';
-import { SearchService, UserPreferencesService } from '@alfresco/adf-core';
+import { SearchService, ShowHeaderMode, UserPreferencesService } from '@alfresco/adf-core';
 import { combineLatest, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';

@@ -39,6 +39,7 @@ export class SearchResultComponent implements OnInit, OnDestroy {

    sorting = ['name', 'asc'];
    searchForms: SearchForm[];
+    showHeader = ShowHeaderMode.Always;

    private onDestroy$ = new Subject<boolean>();

--- a/demo-shell/src/app/components/task-list-demo/task-list-demo.component.ts
+++ b/demo-shell/src/app/components/task-list-demo/task-list-demo.component.ts
@@ -194,59 +194,63 @@ export class TaskListDemoComponent implements OnInit, OnDestroy {
        return this.taskListForm && this.taskListForm.dirty && this.taskListForm.valid;
    }

-    get taskAppId(): AbstractControl {
-        return this.taskListForm.get('taskAppId');
+    private getControl<T extends AbstractControl>(key: string): T {
+        return this.taskListForm.get(key) as T;
    }

-    get taskId(): AbstractControl {
-        return this.taskListForm.get('taskId');
+    get taskAppId(): FormControl {
+        return this.getControl<FormControl>('taskAppId');
    }

-    get taskProcessDefinitionId(): AbstractControl {
-        return this.taskListForm.get('taskProcessDefinitionId');
+    get taskId(): FormControl {
+        return this.getControl<FormControl>('taskId');
    }

-    get taskProcessInstanceId(): AbstractControl {
-        return this.taskListForm.get('taskProcessInstanceId');
+    get taskProcessDefinitionId(): FormControl {
+        return this.getControl<FormControl>('taskProcessDefinitionId');
    }

-    get taskName(): AbstractControl {
-        return this.taskListForm.get('taskName');
+    get taskProcessInstanceId(): FormControl {
+        return this.getControl<FormControl>('taskProcessInstanceId');
    }

-    get taskAssignment(): AbstractControl {
-        return this.taskListForm.get('taskAssignment');
+    get taskName(): FormControl {
+        return this.getControl<FormControl>('taskName');
    }

-    get taskState(): AbstractControl {
-        return this.taskListForm.get('taskState');
+    get taskAssignment(): FormControl {
+        return this.getControl<FormControl>('taskAssignment');
    }

-    get taskSort(): AbstractControl {
-        return this.taskListForm.get('taskSort');
+    get taskState(): FormControl {
+        return this.getControl<FormControl>('taskState');
    }

-    get taskIncludeProcessInstance(): AbstractControl {
-        return this.taskListForm.get('taskIncludeProcessInstance');
+    get taskSort(): FormControl {
+        return this.getControl<FormControl>('taskSort');
    }

-    get taskStart(): AbstractControl {
-        return this.taskListForm.get('taskStart');
+    get taskIncludeProcessInstance(): FormControl {
+        return this.getControl<FormControl>('taskIncludeProcessInstance');
    }

-    get taskSize(): AbstractControl {
-        return this.taskListForm.get('taskSize');
+    get taskStart(): FormControl {
+        return this.getControl<FormControl>('taskStart');
    }

-    get taskPage(): AbstractControl {
-        return this.taskListForm.get('taskPage');
+    get taskSize(): FormControl {
+        return this.getControl<FormControl>('taskSize');
    }

-    get taskDueAfter(): AbstractControl {
-        return this.taskListForm.get('taskDueAfter');
+    get taskPage(): FormControl {
+        return this.getControl<FormControl>('taskPage');
    }

-    get taskDueBefore(): AbstractControl {
-        return this.taskListForm.get('taskDueBefore');
+    get taskDueAfter(): FormControl {
+        return this.getControl<FormControl>('taskDueAfter');
+    }
+
+    get taskDueBefore(): FormControl {
+        return this.getControl<FormControl>('taskDueBefore');
    }
 }
--- a/demo-shell/src/app/components/trashcan/trashcan.component.html
+++ b/demo-shell/src/app/components/trashcan/trashcan.component.html
@@ -18,7 +18,7 @@
                mat-icon-button
                (selection-node-restored)="refresh()"
                (restore)="onRestore($event)"
-                [adf-restore]="documentList.selection"
+                [adf-restore]="$any(documentList).selection"
                *ngIf="documentList.selection.length"
                title="{{ 'TRASHCAN.ACTIONS.RESTORE' | translate }}">
                <mat-icon>restore</mat-icon>
--- a/lib/content-services/src/lib/breadcrumb/breadcrumb.component.html
+++ b/lib/content-services/src/lib/breadcrumb/breadcrumb.component.html
@@ -31,7 +31,7 @@
        <mat-option
            *ngFor="let node of previousNodes"
            (click)="onRoutePathClick(node, $event)"
-            (onSelectionChange)="onRoutePathClick(node, $event)"
+            (onSelectionChange)="onRouteClick(node)"
            class="adf-breadcrumb-path-option"
            [disabled]="readOnly"
        >
--- a/lib/content-services/src/lib/breadcrumb/breadcrumb.component.ts
+++ b/lib/content-services/src/lib/breadcrumb/breadcrumb.component.ts
@@ -190,6 +190,10 @@ export class BreadcrumbComponent implements OnInit, OnChanges, OnDestroy {
            event.preventDefault();
        }

+        this.onRouteClick(route);
+    }
+
+    onRouteClick(route: PathElementEntity) {
        if (route && !this.readOnly) {
            this.navigate.emit(route);

--- a/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.html
+++ b/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.html
@@ -23,7 +23,7 @@
            <mat-option
                *ngFor="let node of previousNodes;"
                (click)="onRoutePathClick(node, $event)"
-                (onSelectionChange)="onRoutePathClick(node, $event)"
+                (onSelectionChange)="onRouteClick(node)"
                class="adf-dropdown-breadcrumb-path-option"
                data-automation-class="dropdown-breadcrumb-path-option"
                [disabled]="readOnly">
--- a/lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.html
+++ b/lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.html
@@ -69,7 +69,7 @@
            #documentList
            [adf-highlight]="searchTerm"
            adf-highlight-selector=".adf-name-location-cell-name"
-            [showHeader]="false"
+            [showHeader]="showHeader"
            [node]="nodePaging"
            [preselectNodes]="preselectedNodes"
            [maxItems]="pageSize"
--- a/lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.ts
+++ b/lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.ts
@@ -37,7 +37,8 @@ import {
    FileUploadCompleteEvent,
    FileUploadDeleteEvent,
    AppConfigService,
-    DataSorting
+    DataSorting,
+    ShowHeaderMode
 } from '@alfresco/adf-core';
 import { FormControl } from '@angular/forms';
 import { Node, NodePaging, Pagination, SiteEntry, SitePaging, NodeEntry, QueryBody, RequestScope } from '@alfresco/js-api';
@@ -212,23 +213,23 @@ export class ContentNodeSelectorPanelComponent implements OnInit, OnDestroy {

    /** Emitted when the user has chosen an item. */
    @Output()
-    select: EventEmitter<Node[]> = new EventEmitter<Node[]>();
+    select = new EventEmitter<Node[]>();

    /** Emitted when the navigation changes. */
    @Output()
-    navigationChange: EventEmitter<NodeEntryEvent> = new EventEmitter<NodeEntryEvent>();
+    navigationChange = new EventEmitter<NodeEntryEvent>();

    /** Emitted when the select site changes. */
    @Output()
-    siteChange: EventEmitter<string> = new EventEmitter<string>();
+    siteChange = new EventEmitter<string>();

    /** Emitted when search is running. */
    @Output()
-    showingSearch: EventEmitter<boolean> = new EventEmitter<boolean>();
+    showingSearch = new EventEmitter<boolean>();

    /** Emitted when current folder loaded. */
    @Output()
-    currentFolder: EventEmitter<Node> = new EventEmitter<Node>();
+    currentFolder = new EventEmitter<Node>();

    /** Emitted when folder loaded. */
    @Output()
@@ -252,6 +253,7 @@ export class ContentNodeSelectorPanelComponent implements OnInit, OnDestroy {
    breadcrumbFolderTitle: string | null = null;
    startSiteGuid: string | null = null;
    hasValidQuery: boolean = false;
+    showHeader = ShowHeaderMode.Never;

    @ViewChild(InfinitePaginationComponent, { static: true })
    infinitePaginationComponent: InfinitePaginationComponent;
--- a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.html
+++ b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.html
@@ -63,7 +63,7 @@
                    #datetimePicker
                    (closed)="onDatetimepickerClosed()"
                    [type]="type"
-                    timeInterval="1">
+                    [timeInterval]="1">
                </mat-datetimepicker>
                <input class="adf-share-link__input"
                    #dateTimePickerInput
--- a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.spec.ts
+++ b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.spec.ts
@@ -266,7 +266,7 @@ describe('ShareDialogComponent', () => {
        ).toBe('');
    });

-    it('should not allow expiration date action when node has no update permission', () => {
+    it('should not allow expiration date action when node has no update permission', async () => {
        node.entry.properties['qshare:sharedId'] = 'sharedId';
        node.entry.allowableOperations = [];

@@ -276,6 +276,7 @@ describe('ShareDialogComponent', () => {
        };

        fixture.detectChanges();
+        await fixture.whenStable();

        expect(fixture.nativeElement.querySelector('input[formcontrolname="time"]').disabled).toBe(true);
        expect(fixture.nativeElement.querySelector('.mat-slide-toggle[data-automation-id="adf-expire-toggle"]')
--- a/lib/content-services/src/lib/dialogs/folder.dialog.html
+++ b/lib/content-services/src/lib/dialogs/folder.dialog.html
@@ -10,7 +10,8 @@
                placeholder="{{ 'CORE.FOLDER_DIALOG.FOLDER_NAME.LABEL' | translate }}"
                matInput
                required
-                [formControl]="form.controls['name']"/>
+                [formControlName]="'name'"
+            />

            <mat-hint *ngIf="form.controls['name'].dirty">
                <span *ngIf="form.controls['name'].errors?.required">
@@ -28,7 +29,8 @@
                id="adf-folder-title-input"
                matInput
                placeholder="{{ 'CORE.FOLDER_DIALOG.FOLDER_TITLE.LABEL' | translate }}"
-                [formControl]="form.controls['title']"/>
+                [formControlName]="'title'"
+            />
        </mat-form-field>

        <mat-form-field class="adf-full-width">
@@ -37,7 +39,8 @@
                matInput
                placeholder="{{ 'CORE.FOLDER_DIALOG.FOLDER_DESCRIPTION.LABEL' | translate }}"
                rows="4"
-                [formControl]="form.controls['description']"></textarea>
+                [formControlName]="'description'">
+            </textarea>
        </mat-form-field>
    </form>
 </mat-dialog-content>
--- a/lib/content-services/src/lib/dialogs/node-lock.dialog.html
+++ b/lib/content-services/src/lib/dialogs/node-lock.dialog.html
@@ -5,20 +5,20 @@
 <mat-dialog-content>
    <br />
    <form [formGroup]="form" (submit)="submit()">
-        <mat-checkbox  data-automation-id="adf-lock-node-checkbox" class="adf-lock-file-name" matTooltip="{{ nodeName }}" [formControl]="form.controls['isLocked']" ngDefaultControl>
+        <mat-checkbox  data-automation-id="adf-lock-node-checkbox" class="adf-lock-file-name" matTooltip="{{ nodeName }}" [formControlName]="'isLocked'" ngDefaultControl>
            {{ 'CORE.FILE_DIALOG.FILE_LOCK_CHECKBOX' | translate }} <strong>"{{ nodeName }}"</strong>
        </mat-checkbox>

        <br />

        <div *ngIf="form.value.isLocked">
-            <mat-checkbox class="adf-lock-file-name" [formControl]="form.controls['allowOwner']" ngDefaultControl>
+            <mat-checkbox class="adf-lock-file-name" [formControlName]="'allowOwner'" ngDefaultControl>
                {{ 'CORE.FILE_DIALOG.ALLOW_OTHERS_CHECKBOX' | translate }}
            </mat-checkbox>

            <br />

-            <mat-checkbox class="adf-lock-file-name" [formControl]="form.controls['isTimeLock']" ngDefaultControl>
+            <mat-checkbox class="adf-lock-file-name" [formControlName]="'isTimeLock'" ngDefaultControl>
                {{ 'CORE.FILE_DIALOG.TIME_LOCK_CHECKBOX' | translate }}
            </mat-checkbox>

@@ -26,8 +26,8 @@

            <mat-form-field *ngIf="form.value.isTimeLock">
                <mat-datetimepicker-toggle [for]="datetimePicker" matSuffix></mat-datetimepicker-toggle>
-                <mat-datetimepicker #datetimePicker type="datetime" openOnFocus="true" timeInterval="1"></mat-datetimepicker>
-                <input matInput [formControl]="form.controls['time']" [matDatetimepicker]="datetimePicker" required autocomplete="false">
+                <mat-datetimepicker #datetimePicker type="datetime" [openOnFocus]="true" [timeInterval]="1"></mat-datetimepicker>
+                <input matInput [formControlName]="'time'" [matDatetimepicker]="datetimePicker" required autocomplete="false">
            </mat-form-field>
        </div>
    </form>
--- a/lib/content-services/src/lib/document-list/components/document-list.component.html
+++ b/lib/content-services/src/lib/document-list/components/document-list.component.html
@@ -20,9 +20,9 @@
    (executeRowAction)="onExecuteRowAction($event)"
    (rowClick)="onNodeClick($event.value?.node)"
    (rowDblClick)="onNodeDblClick($event.value?.node)"
-    (row-select)="onNodeSelect($event.detail)"
-    (row-unselect)="onNodeUnselect($event.detail)"
-    (sorting-changed)="onSortingChanged($event)"
+    (row-select)="onNodeSelect($any($event).detail)"
+    (row-unselect)="onNodeUnselect($any($event).detail)"
+    (sorting-changed)="onSortingChanged($any($event))"
    [class.adf-datatable-gallery-thumbnails]="data.thumbnails">

    <div *ngIf="headerFilters">
--- a/lib/content-services/src/lib/document-list/components/document-list.component.ts
+++ b/lib/content-services/src/lib/document-list/components/document-list.component.ts
@@ -130,7 +130,7 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte

    /** Toggles the header */
    @Input()
-    showHeader: string = ShowHeaderMode.Data;
+    showHeader = ShowHeaderMode.Data;

    /** User interaction for folder navigation or file preview.
     * Valid values are "click" and "dblclick". Default value: "dblclick"
@@ -207,7 +207,7 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
     * docs for more details and usage examples.
     */
    @Input()
-    rowStyle: string;
+    rowStyle: { [key: string]: any; };

    /** The CSS class to apply to every row */
    @Input()
--- a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.html
+++ b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.html
@@ -14,7 +14,7 @@
            <adf-datatable [rows]="selectedMembers"
                           class="adf-datatable-permission"
                           selectionMode="none"
-                           stickyHeader="true"
+                           [stickyHeader]="true"
                           data-automation-id="adf-user-role-selection-table"
                           *ngIf="selectedMembers.length">
                <data-columns>
@@ -56,7 +56,7 @@
                        </adf-data-column-header>
                    </data-column>

-                    <data-column class="adf-datatable-cell adf-delete-permission-column" key="" sortable="false">
+                    <data-column class="adf-datatable-cell adf-delete-permission-column" key="" [sortable]="false">
                        <ng-template let-entry="$implicit">
                            <button mat-icon-button
                                    class="adf-add-member-action"
--- a/lib/content-services/src/lib/permission-manager/components/permission-container/permission-container.component.html
+++ b/lib/content-services/src/lib/permission-manager/components/permission-container/permission-container.component.html
@@ -1,7 +1,7 @@
 <adf-datatable class="adf-datatable-permission"
               id="adf-permission-display-container"
               [rows]="permissions"
-               stickyHeader="true"
+               [stickyHeader]="true"
               [selectionMode]="selectionMode">

    <data-columns>
@@ -32,7 +32,7 @@
            class="adf-ellipsis-cell adf-expand-cell-4"
            title="PERMISSION_MANAGER.PERMISSION_DISPLAY.ROLE"
            key="name"
-            sortable="false">
+            [sortable]="false">
            <ng-template let-entry="$implicit">
                <adf-user-role-column [readonly]="entry.row.obj.readonly || isReadOnly"
                                      [placeholder]="entry.data.getValue(entry.row, entry.col)"
--- a/lib/content-services/src/lib/permission-manager/components/permission-container/permission-container.component.ts
+++ b/lib/content-services/src/lib/permission-manager/components/permission-container/permission-container.component.ts
@@ -16,7 +16,7 @@
 */

 import { Component, EventEmitter, Input, OnChanges, Output, ViewEncapsulation } from '@angular/core';
-import { Node, PermissionElement } from '@alfresco/js-api';
+import { Node } from '@alfresco/js-api';
 import { PermissionDisplayModel } from '../../models/permission.model';
 import { RoleModel } from '../../models/role.model';

@@ -55,7 +55,7 @@ export class PermissionContainerComponent implements OnChanges {

    /** Emitted when the permission is updated. */
    @Output()
-    delete = new EventEmitter<PermissionElement>();
+    delete = new EventEmitter<PermissionDisplayModel>();

    /** Emitted when an error occurs. */
    @Output()
--- a/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.html
+++ b/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.html
@@ -7,7 +7,7 @@

    <ng-container *ngIf="permissionList.error$ | async">
        <div class="adf-no-permission__template" id="adf-permission-manager-error">
-            <mat-icon [color]="'error'">error</mat-icon>
+            <mat-icon color="warn">error</mat-icon>
            <p class="adf-no-permission__template--text">{{ 'PERMISSION_MANAGER.ERROR.NOT-FOUND'| translate }}</p>
        </div>
    </ng-container>
@@ -95,8 +95,8 @@
                (update)="updatePermission($event)"
                (delete)="deletePermission($event)"
                (updateAll)="updateAllPermission($event)"
-                (row-select)="onSelect($event.detail.selection)"
-                (row-unselect)="onSelect($event.detail.selection)"
+                (row-select)="onSelect($any($event).detail.selection)"
+                (row-unselect)="onSelect($any($event).detail.selection)"
                [roles]="model.roles">
            </adf-permission-container>

--- a/lib/content-services/src/lib/search/components/search-control.component.ts
+++ b/lib/content-services/src/lib/search/components/search-control.component.ts
@@ -141,14 +141,14 @@ export class SearchControlComponent implements OnDestroy {
        }
    }

-    onFocus($event): void {
-        this.focusSubject.next($event);
+    onFocus(event: FocusEvent): void {
+        this.focusSubject.next(event);
    }

-    onBlur($event): void {
-        const nextElement: any = this.getNextElementSibling(<Element> $event.target);
-        if (!nextElement && !this.isListElement($event)) {
-            this.focusSubject.next($event);
+    onBlur(event: FocusEvent): void {
+        const nextElement: any = this.getNextElementSibling(<Element> event.target);
+        if (!nextElement && !this.isListElement(event)) {
+            this.focusSubject.next(event);
        }
    }

@@ -159,15 +159,15 @@ export class SearchControlComponent implements OnDestroy {
        }
    }

-    onRowArrowDown($event: KeyboardEvent): void {
-        const nextElement: any = this.getNextElementSibling(<Element> $event.target);
+    onRowArrowDown(event: Event): void {
+        const nextElement: any = this.getNextElementSibling(<Element> event.target);
        if (nextElement) {
            nextElement.focus();
        }
    }

-    onRowArrowUp($event: KeyboardEvent): void {
-        const previousElement: any = this.getPreviousElementSibling(<Element> $event.target);
+    onRowArrowUp(event: Event): void {
+        const previousElement: any = this.getPreviousElementSibling(<Element> event.target);
        if (previousElement) {
            previousElement.focus();
        } else {
@@ -181,8 +181,8 @@ export class SearchControlComponent implements OnDestroy {
        }
    }

-    private isListElement($event: any): boolean {
-        return $event.relatedTarget && $event.relatedTarget.children[0] && $event.relatedTarget.children[0].className === 'mat-list-item-content';
+    private isListElement(event: any): boolean {
+        return event.relatedTarget && event.relatedTarget.children[0] && event.relatedTarget.children[0].className === 'mat-list-item-content';
    }

    private getNextElementSibling(node: Element): Element {
--- a/lib/content-services/src/lib/upload/components/base-upload/upload-base.ts
+++ b/lib/content-services/src/lib/upload/components/base-upload/upload-base.ts
@@ -15,7 +15,7 @@
 * limitations under the License.
 */

-import { FileModel, FileInfo, UploadService, TranslationService } from '@alfresco/adf-core';
+import { FileModel, FileInfo, UploadService, TranslationService, FileUploadErrorEvent } from '@alfresco/adf-core';
 import { EventEmitter, Input, Output, OnInit, OnDestroy, NgZone, Directive } from '@angular/core';
 import { Subject } from 'rxjs';
 import { UploadFilesEvent } from '../upload-files.event';
@@ -67,7 +67,7 @@ export abstract class UploadBase implements OnInit, OnDestroy {

    /** Emitted when an error occurs. */
    @Output()
-    error = new EventEmitter();
+    error = new EventEmitter<FileUploadErrorEvent>();

    /** Emitted when the upload begins. */
    @Output()
--- a/lib/content-services/src/lib/upload/components/file-uploading-dialog.component.html
+++ b/lib/content-services/src/lib/upload/components/file-uploading-dialog.component.html
@@ -11,7 +11,6 @@
            [attr.aria-label]="(isDialogMinimized ?
                'ADF_FILE_UPLOAD.ARIA-LABEL.DIALOG_MAXIMIZE':
                'ADF_FILE_UPLOAD.ARIA-LABEL.DIALOG_MINIMIZE') | translate"
-            color="secondary"
            [disabled]="isConfirmation"
            [attr.aria-expanded]="!isDialogMinimized"
            (click)="toggleMinimized()">
@@ -108,7 +107,6 @@
        <button
            id="adf-upload-dialog-cancel"
            [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.CONFIRMATION.CANCEL' | translate"
-            color="secondary"
            mat-button
            (click)="cancelAllUploads()"
        >{{ 'ADF_FILE_UPLOAD.CONFIRMATION.BUTTON.CANCEL' | translate }}</button>
--- a/lib/content-services/src/lib/upload/components/upload-button.component.spec.ts
+++ b/lib/content-services/src/lib/upload/components/upload-button.component.spec.ts
@@ -17,7 +17,7 @@

 import { SimpleChange } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ContentService, UploadService, setupTestBed } from '@alfresco/adf-core';
+import { ContentService, UploadService, setupTestBed, FileUploadErrorEvent } from '@alfresco/adf-core';
 import { of, throwError } from 'rxjs';
 import { UploadButtonComponent } from './upload-button.component';
 import { NodeEntry } from '@alfresco/js-api';
@@ -377,8 +377,8 @@ describe('UploadButtonComponent', () => {

            spyOn(contentService, 'getNode').and.returnValue(throwError('error'));

-            component.error.subscribe((value) => {
-                expect(value).toBe('FILE_UPLOAD.BUTTON.PERMISSION_CHECK_ERROR');
+            component.error.subscribe((value: FileUploadErrorEvent) => {
+                expect(value.error).toBe('FILE_UPLOAD.BUTTON.PERMISSION_CHECK_ERROR');
                done();
            });

--- a/lib/content-services/src/lib/upload/components/upload-button.component.ts
+++ b/lib/content-services/src/lib/upload/components/upload-button.component.ts
@@ -138,9 +138,9 @@ export class UploadButtonComponent extends UploadBase implements OnInit, OnChang
                (res) => this.permissionValue.next(this.nodeHasPermission(res.entry, AllowableOperationsEnum.CREATE)),
                (error: { error: Error }) => {
                    if (error && error.error) {
-                        this.error.emit(error.error.message);
+                        this.error.emit({ error: error.error.message } as any);
                    } else {
-                        this.error.emit('FILE_UPLOAD.BUTTON.PERMISSION_CHECK_ERROR');
+                        this.error.emit({ error: 'FILE_UPLOAD.BUTTON.PERMISSION_CHECK_ERROR'} as any);
                    }
                }
            );
--- a/lib/content-services/src/lib/upload/components/upload-drag-area.component.html
+++ b/lib/content-services/src/lib/upload/components/upload-drag-area.component.html
@@ -1,7 +1,7 @@
 <div [adf-file-draggable]="isDroppable()" class="adf-upload-border"
     (filesDropped)="onFilesDropped($event)"
     (folderEntityDropped)="onFolderEntityDropped($event)"
-     (upload-files)="onUploadFiles($event)"
+     (upload-files)="onUploadFiles($any($event))"
     dropzone="" webkitdropzone="*" #droparea>
    <ng-content></ng-content>
 </div>
--- a/lib/content-services/src/lib/version-manager/version-manager.component.ts
+++ b/lib/content-services/src/lib/version-manager/version-manager.component.ts
@@ -18,7 +18,7 @@
 import { Component, Input, ViewEncapsulation, ViewChild, Output, EventEmitter, OnInit } from '@angular/core';
 import { Node } from '@alfresco/js-api';
 import { VersionListComponent } from './version-list.component';
-import { ContentService, AlfrescoApiService } from '@alfresco/adf-core';
+import { ContentService, AlfrescoApiService, FileUploadErrorEvent } from '@alfresco/adf-core';
 import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
@@ -65,19 +65,19 @@ export class VersionManagerComponent implements OnInit {

    /** Emitted when a file is uploaded successfully. */
    @Output()
-    uploadSuccess: EventEmitter<Node> = new EventEmitter<Node>();
+    uploadSuccess = new EventEmitter<Node>();

    /** Emitted when an error occurs during upload. */
    @Output()
-    uploadError: EventEmitter<Node> = new EventEmitter<Node>();
+    uploadError = new EventEmitter<FileUploadErrorEvent>();

    /** Emitted when an cancelling during upload. */
    @Output()
-    uploadCancel: EventEmitter<boolean> = new EventEmitter<boolean>();
+    uploadCancel = new EventEmitter<boolean>();

    /** Emitted when viewing a version. */
    @Output()
-    viewVersion: EventEmitter<string> = new EventEmitter<string>();
+    viewVersion = new EventEmitter<string>();

    @ViewChild('versionList', { static: true })
    versionListComponent: VersionListComponent;
@@ -110,7 +110,7 @@ export class VersionManagerComponent implements OnInit {
        this.uploadState = 'close';
    }

-    onUploadError(event: any) {
+    onUploadError(event: FileUploadErrorEvent) {
        this.uploadError.emit(event);
    }

--- a/lib/content-services/src/lib/version-manager/version-upload.component.spec.ts
+++ b/lib/content-services/src/lib/version-manager/version-upload.component.spec.ts
@@ -79,7 +79,7 @@ describe('VersionUploadComponent', () => {
            expect(component.disabled).toEqual(false);
            done();
        });
-        component.onError(true);
+        component.onError({} as any);
        fixture.detectChanges();
    });

--- a/lib/content-services/src/lib/version-manager/version-upload.component.ts
+++ b/lib/content-services/src/lib/version-manager/version-upload.component.ts
@@ -17,7 +17,7 @@

 import { Component, Input, ViewEncapsulation, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
 import { Node } from '@alfresco/js-api';
-import { ContentService, FileUploadEvent, UploadService } from '@alfresco/adf-core';
+import { ContentService, FileUploadErrorEvent, FileUploadEvent, UploadService } from '@alfresco/adf-core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';

@@ -58,7 +58,7 @@ export class VersionUploadComponent implements OnInit, OnDestroy {

    /** Emitted when an error occurs. */
    @Output()
-    error = new EventEmitter();
+    error = new EventEmitter<FileUploadErrorEvent>();

    /** Emitted when an cancelling during upload. */
    @Output()
@@ -114,7 +114,7 @@ export class VersionUploadComponent implements OnInit, OnDestroy {
        this.success.emit(event);
    }

-    onError(event: any) {
+    onError(event: FileUploadErrorEvent) {
        this.disabled = false;
        this.error.emit(event);
    }
--- a/lib/content-services/tsconfig.lib.json
+++ b/lib/content-services/tsconfig.lib.json
@@ -13,6 +13,7 @@
  "angularCompilerOptions": {
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
-    "enableResourceInlining": true
+    "enableResourceInlining": true,
+    "strictTemplates": true
  }
 }
--- a/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.html
+++ b/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.html
@@ -46,8 +46,8 @@
               (dateChange)="onDateChanged($event)">

        <mat-datetimepicker #datetimePicker
-                            [type]="property.type"
-                            timeInterval="5"
+                            [type]="$any(property).type"
+                            [timeInterval]="5"
                            [attr.data-automation-id]="'datepicker-' + property.key"
                            [startAt]="valueDate">
        </mat-datetimepicker>
@@ -60,8 +60,8 @@
         class="adf-property-field adf-dateitem-chip-list-container adf-dateitem-editable">
        <mat-chip-list #chipList
                       class="adf-textitem-chip-list">
-            <mat-chip *ngFor="let propertyValue of property.displayValue let idx = index"
-                      [removable]="isEditable"
+            <mat-chip *ngFor="let propertyValue of property.displayValue; let idx = index"
+                      [removable]="isEditable()"
                      (removed)="removeValueFromList(idx)">
                {{ propertyValue }}
                <mat-icon *ngIf="isEditable()"
@@ -86,8 +86,8 @@
            </mat-datetimepicker-toggle>

            <mat-datetimepicker #datetimePicker
-                                [type]="property.type"
-                                timeInterval="5"
+                                [type]="$any(property).type"
+                                [timeInterval]="5"
                                [attr.data-automation-id]="'datepicker-' + property.key"
                                [startAt]="valueDate">
            </mat-datetimepicker>
--- a/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.ts
+++ b/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.ts
@@ -155,5 +155,4 @@ export class CardViewDateItemComponent extends BaseCardView<CardViewDateItemMode
    update() {
        this.cardViewUpdateService.update(<CardViewDateItemModel> { ...this.property }, this.property.value);
    }
-
 }
--- a/lib/core/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.ts
+++ b/lib/core/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.ts
@@ -56,7 +56,7 @@ export class SelectFilterInputComponent implements OnDestroy {
            });
    }

-    reset(event?: KeyboardEvent) {
+    reset(event?: Event) {
        if (event) {
            event.stopPropagation();
        }
--- a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html
+++ b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html
@@ -21,9 +21,9 @@
                   [attr.data-automation-id]="'card-textitem-value-' + property.key">
            <textarea matInput
                      *ngIf="property.multiline"
-                      matTextareaAutosize
-                      matAutosizeMaxRows="1"
-                      matAutosizeMaxRows="5"
+                      [matTextareaAutosize]="true"
+                      [matAutosizeMaxRows]="1"
+                      [matAutosizeMaxRows]="5"
                      class="adf-property-value"
                      [placeholder]="property.default"
                      [formControl]="textInput"
--- a/lib/core/comments/comments.component.ts
+++ b/lib/core/comments/comments.component.ts
@@ -164,7 +164,7 @@ export class CommentsComponent implements OnChanges {
        }
    }

-    clear(event: KeyboardEvent): void {
+    clear(event: Event): void {
        event.stopPropagation();
        this.message = '';
    }
--- a/lib/core/datatable/components/datatable/datatable.component.html
+++ b/lib/core/datatable/components/datatable/datatable.component.html
@@ -108,7 +108,7 @@
                     [attr.aria-selected]="row.isSelected ? true : false"
                     [attr.aria-label]="col.title ? (col.title | translate) : null"
                     (click)="onRowClick(row, $event)"
-                     (keydown.enter)="onEnterKeyPressed(row, $event)"
+                     (keydown.enter)="onEnterKeyPressed(row, $any($event))"
                     [adf-context-menu]="getContextMenuActions(row, col)"
                     [adf-context-menu-enabled]="contextMenu"
                     adf-drop-zone dropTarget="cell" [dropColumn]="col" [dropRow]="row">
--- a/lib/core/datatable/components/datatable/datatable.component.ts
+++ b/lib/core/datatable/components/datatable/datatable.component.ts
@@ -121,7 +121,7 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
     * docs for more details and usage examples.
     */
    @Input()
-    rowStyle: string;
+    rowStyle: { [key: string]: any; };

    /** The CSS class to apply to every row. */
    @Input()
@@ -129,7 +129,7 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,

    /** Toggles the header. */
    @Input()
-    showHeader: string = ShowHeaderMode.Data;
+    showHeader = ShowHeaderMode.Data;

    /** Toggles the sticky header mode. */
    @Input()
--- a/lib/core/form/components/form-base.component.ts
+++ b/lib/core/form/components/form-base.component.ts
@@ -17,6 +17,7 @@

 import { FormOutcomeModel, FormFieldValidator, FormFieldModel, FormOutcomeEvent, FormModel } from './widgets';
 import { EventEmitter, Input, Output, Directive } from '@angular/core';
+import { ThemePalette } from '@angular/material/core';

@Directive()
 // tslint:disable-next-line: directive-class-suffix
@@ -26,7 +27,7 @@ export abstract class FormBaseComponent {
    static COMPLETE_OUTCOME_ID: string = '$complete';
    static START_PROCESS_OUTCOME_ID: string = '$startProcess';
    static CUSTOM_OUTCOME_ID: string = '$custom';
-    static COMPLETE_BUTTON_COLOR: string = 'primary';
+    static COMPLETE_BUTTON_COLOR: ThemePalette = 'primary';
    static COMPLETE_OUTCOME_NAME: string = 'COMPLETE';

    /** Path of the folder where the metadata will be stored. */
@@ -111,8 +112,8 @@ export abstract class FormBaseComponent {
        return titleEnabled;
    }

-    getColorForOutcome(outcomeName: string): string {
-        return outcomeName === FormBaseComponent.COMPLETE_OUTCOME_NAME ? FormBaseComponent.COMPLETE_BUTTON_COLOR : '';
+    getColorForOutcome(outcomeName: string): ThemePalette {
+        return outcomeName === FormBaseComponent.COMPLETE_OUTCOME_NAME ? FormBaseComponent.COMPLETE_BUTTON_COLOR : null;
    }

    isOutcomeButtonEnabled(outcome: FormOutcomeModel): boolean {
--- a/lib/core/form/components/widgets/core/form-widget.model.ts
+++ b/lib/core/form/components/widgets/core/form-widget.model.ts
@@ -29,6 +29,7 @@ export abstract class FormWidgetModel {

    readonly form: any;
    readonly json: any;
+    readonly field: any;

    protected constructor(form: FormModel, json: any) {
        this.form = form;
@@ -40,6 +41,7 @@ export abstract class FormWidgetModel {
            this.name = json.name;
            this.type = json.type;
            this.tab = json.tab;
+            this.field = json.field;
        }
    }
 }
--- a/lib/core/form/components/widgets/date-time/date-time.widget.html
+++ b/lib/core/form/components/widgets/date-time/date-time.widget.html
@@ -9,7 +9,7 @@
               [disabled]="field.readOnly"
               [min]="minDate"
               [max]="maxDate"
-               (focusout)="onDateChanged($event.srcElement.value)"
+               (focusout)="onDateChanged($any($event).srcElement.value)"
               (dateChange)="onDateChanged($event)"
               [placeholder]="field.placeholder"
               [matTooltip]="field.tooltip"
@@ -19,5 +19,5 @@
    </mat-form-field>
    <error-widget [error]="field.validationSummary"></error-widget>
    <error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
-    <mat-datetimepicker #datetimePicker type="datetime" openOnFocus="true" timeInterval="5"></mat-datetimepicker>
+    <mat-datetimepicker #datetimePicker type="datetime" [openOnFocus]="true" [timeInterval]="5"></mat-datetimepicker>
 </div>
--- a/lib/core/form/components/widgets/date/date.widget.html
+++ b/lib/core/form/components/widgets/date/date.widget.html
@@ -9,7 +9,7 @@
               [disabled]="field.readOnly"
               [min]="minDate"
               [max]="maxDate"
-               (focusout)="onDateChanged($event.srcElement.value)"
+               (focusout)="onDateChanged($any($event).srcElement.value)"
               (dateChange)="onDateChanged($event)"
               [placeholder]="field.placeholder">
        <mat-datepicker-toggle  matSuffix [for]="datePicker" [disabled]="field.readOnly" ></mat-datepicker-toggle>
--- a/lib/core/form/components/widgets/dynamic-table/editors/date/date.editor.html
+++ b/lib/core/form/components/widgets/dynamic-table/editors/date/date.editor.html
@@ -9,7 +9,7 @@
            [id]="column.id"
            [required]="column.required"
            [disabled]="!column.editable"
-            (focusout)="onDateChanged($event.srcElement)"
+            (focusout)="onDateChanged($any($event).srcElement)"
            (dateChange)="onDateChanged($event)">
        <mat-datepicker-toggle  *ngIf="column.editable" matSuffix [for]="datePicker" class="adf-date-editor-button" ></mat-datepicker-toggle>
    </mat-form-field>
--- a/lib/core/form/components/widgets/dynamic-table/editors/datetime/datetime.editor.html
+++ b/lib/core/form/components/widgets/dynamic-table/editors/datetime/datetime.editor.html
@@ -7,7 +7,7 @@
            [id]="column.id"
            [required]="column.required"
            [disabled]="!column.editable"
-            (focusout)="onDateChanged($event.srcElement.value)"
+            (focusout)="onDateChanged($any($event).srcElement.value)"
            (dateChange)="onDateChanged($event)">
            <mat-datetimepicker-toggle
                matSuffix
@@ -18,7 +18,7 @@
    <mat-datetimepicker
        #datetimePicker
        type="datetime"
-        openOnFocus="true"
-        timeInterval="5">
+        [openOnFocus]="true"
+        [timeInterval]="5">
    </mat-datetimepicker>
 </div>
--- a/lib/core/form/components/widgets/multiline-text/multiline-text.widget.html
+++ b/lib/core/form/components/widgets/multiline-text/multiline-text.widget.html
@@ -3,7 +3,7 @@
    <mat-form-field floatPlaceholder="never">
        <label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span *ngIf="isRequired()">*</span></label>
        <textarea matInput class="adf-input"
-                  matTextareaAutosize
+                  [matTextareaAutosize]="true"
                  type="text"
                  rows="3"
                  [id]="field.id"
--- a/lib/core/form/components/widgets/tabs/tabs.widget.ts
+++ b/lib/core/form/components/widgets/tabs/tabs.widget.ts
@@ -31,11 +31,11 @@ export class TabsWidgetComponent implements AfterContentChecked {
    tabs: TabModel[] = [];

    @Output()
-    formTabChanged: EventEmitter<FormFieldModel> = new EventEmitter<FormFieldModel>();
+    formTabChanged = new EventEmitter<FormFieldModel>();

    visibleTabs: TabModel[] = [];

-    hasTabs() {
+    hasTabs(): boolean {
        return this.tabs && this.tabs.length > 0;
    }

--- a/lib/core/form/components/widgets/text/text-mask.component.ts
+++ b/lib/core/form/components/widgets/text/text-mask.component.ts
@@ -46,8 +46,8 @@ export class InputMaskDirective implements OnChanges, ControlValueAccessor {

    /** Object defining mask and "reversed" status. */
    @Input('textMask') inputMask: {
-        mask: '',
-        isReversed: false
+        mask: string,
+        isReversed: boolean
    };

    private translationMask = {
--- a/lib/core/layout/components/header/header.component.ts
+++ b/lib/core/layout/components/header/header.component.ts
@@ -16,6 +16,7 @@
 */

 import { Component, Input, Output, EventEmitter, ViewEncapsulation, OnInit } from '@angular/core';
+import { ThemePalette } from '@angular/material/core';

@Component({
    selector: 'adf-layout-header',
@@ -40,7 +41,7 @@ export class HeaderLayoutComponent implements OnInit {
     * Background color for the header. It can be any hex color code or one
     * of the Material theme colors: 'primary', 'accent' or 'warn'.
     */
-    @Input() color: string;
+    @Input() color: ThemePalette;

    /**
     * Toggles whether the sidenav button will be displayed in the header
--- a/lib/core/layout/components/layout-container/layout-container.component.ts
+++ b/lib/core/layout/components/layout-container/layout-container.component.ts
@@ -37,7 +37,7 @@ export class LayoutContainerComponent implements OnInit, OnDestroy, OnChanges {
    @Input() expandedSidenav = true;

    /** The side that the drawer is attached to 'start' | 'end' page */
-    @Input() position = 'start';
+    @Input() position: 'start' | 'end' = 'start';

    /** Layout text orientation 'ltr' | 'rtl' */
    @Input() direction: Direction = 'ltr';
--- a/lib/core/layout/components/sidenav-layout/sidenav-layout.component.ts
+++ b/lib/core/layout/components/sidenav-layout/sidenav-layout.component.ts
@@ -47,10 +47,10 @@ export class SidenavLayoutComponent implements OnInit, AfterViewInit, OnDestroy
    static STEP_OVER = 600;

    /** The direction of the layout. 'ltr' or 'rtl' */
-    dir = 'ltr';
+    dir: Direction = 'ltr';

    /** The side that the drawer is attached to. Possible values are 'start' and 'end'. */
-    @Input() position = 'start';
+    @Input() position: 'start' | 'end' = 'start';

    /** Minimum size of the navigation region. */
    @Input() sidenavMin: number;
--- a/lib/core/login/components/login.component.html
+++ b/lib/core/login/components/login.component.html
@@ -38,7 +38,7 @@
                                    <input matInput placeholder="{{'LOGIN.LABEL.USERNAME' | translate }}"
                                           type="text"
                                           class="adf-full-width"
-                                           [formControl]="form.controls['username']"
+                                           formControlName="username"
                                           autocapitalize="none"
                                           id="username"
                                           data-automation-id="username"
@@ -55,7 +55,7 @@
                                <mat-form-field class="adf-full-width" floatPlaceholder="never" color="primary">
                                    <input matInput placeholder="{{'LOGIN.LABEL.PASSWORD' | translate }}"
                                           [type]="isPasswordShow ? 'text' : 'password'"
-                                           [formControl]="form.controls['password']"
+                                           formControlName="password"
                                           id="password"
                                           data-automation-id="password">
                                        <button
--- a/lib/core/login/components/login.component.ts
+++ b/lib/core/login/components/login.component.ts
@@ -335,7 +335,7 @@ export class LoginComponent implements OnInit, OnDestroy {
    /**
     * Display and hide the password value.
     */
-    toggleShowPassword(event: MouseEvent | KeyboardEvent) {
+    toggleShowPassword(event: Event) {
        event.stopPropagation();
        this.isPasswordShow = !this.isPasswordShow;
    }
--- a/lib/core/notifications/components/notification-history.component.ts
+++ b/lib/core/notifications/components/notification-history.component.ts
@@ -18,7 +18,7 @@
 import { Component, Input, ViewChild, OnDestroy, OnInit, AfterViewInit, ChangeDetectorRef } from '@angular/core';
 import { NotificationService } from '../services/notification.service';
 import { NotificationModel, NOTIFICATION_TYPE } from '../models/notification.model';
-import { MatMenuTrigger } from '@angular/material/menu';
+import { MatMenuTrigger, MenuPositionX, MenuPositionY } from '@angular/material/menu';
 import { takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
 import { StorageService } from '../../services/storage.service';
@@ -38,11 +38,11 @@ export class NotificationHistoryComponent implements OnDestroy, OnInit, AfterVie

    /** Custom choice for opening the menu at the bottom. Can be `before` or `after`. */
    @Input()
-    menuPositionX: string = 'after';
+    menuPositionX: MenuPositionX = 'after';

    /** Custom choice for opening the menu at the bottom. Can be `above` or `below`. */
    @Input()
-    menuPositionY: string = 'below';
+    menuPositionY: MenuPositionY = 'below';

    /** Maximum number of notifications to display. The rest will remain hidden until load more is clicked */
    @Input()
--- a/lib/core/settings/host-settings.component.html
+++ b/lib/core/settings/host-settings.component.html
@@ -5,7 +5,7 @@
    <mat-card class="adf-setting-card">
        <form id="host-form" [formGroup]="form" (submit)="onSubmit(form.value)" (keydown)="keyDownFunction($event)">

-            <mat-form-field floatLabel="{{'CORE.HOST_SETTINGS.PROVIDER' | translate }}" *ngIf="showSelectProviders">
+            <mat-form-field *ngIf="showSelectProviders">
                <mat-select  id="adf-provider-selector" placeholder="Provider" [formControl]="providersControl">
                    <mat-option *ngFor="let provider of providers" [value]="provider">
                        {{ provider }}
@@ -25,7 +25,7 @@

            <ng-container *ngIf="isALL() || isECM()">
                <mat-card-content>
-                    <mat-form-field class="adf-full-width" floatLabel="{{'CORE.HOST_SETTINGS.CS-HOST' | translate }}">
+                    <mat-form-field class="adf-full-width">
                        <mat-label>{{'CORE.HOST_SETTINGS.CS-HOST' | translate }}</mat-label>
                        <input matInput [formControl]="ecmHost" data-automation-id="ecmHost" type="text"
                               id="ecmHost" placeholder="http(s)://host|ip:port(/path)">
@@ -42,7 +42,7 @@

            <ng-container *ngIf="isALL() || isBPM()">
                <mat-card-content>
-                    <mat-form-field class="adf-full-width" floatLabel="{{'CORE.HOST_SETTINGS.BP-HOST' | translate }}">
+                    <mat-form-field class="adf-full-width">
                        <mat-label>{{'CORE.HOST_SETTINGS.BP-HOST' | translate }}</mat-label>
                        <input matInput [formControl]="bpmHost" data-automation-id="bpmHost" type="text"
                               id="bpmHost" placeholder="http(s)://host|ip:port(/path)">
@@ -58,7 +58,7 @@

            <ng-container *ngIf="isOAUTH()">
                <mat-card-content>
-                    <mat-form-field class="adf-full-width" floatLabel="Identity Host">
+                    <mat-form-field class="adf-full-width">
                        <mat-label>Identity Host</mat-label>
                        <input matInput name="identityHost" id="identityHost" formControlName="identityHost"
                                placeholder="http(s)://host|ip:port(/path)">
@@ -74,7 +74,7 @@

            <ng-container *ngIf="isOAUTH()">
                <div formGroupName="oauthConfig">
-                    <mat-form-field class="adf-full-width" floatLabel="Auth Host">
+                    <mat-form-field class="adf-full-width">
                        <mat-label>Auth Host</mat-label>
                        <input matInput name="host" id="oauthHost" formControlName="host"
                               placeholder="http(s)://host|ip:port(/path)">
@@ -85,7 +85,7 @@
                            {{ 'CORE.HOST_SETTINGS.REQUIRED'| translate }}
                        </mat-error>
                    </mat-form-field>
-                    <mat-form-field class="adf-full-width" floatLabel="Client Id">
+                    <mat-form-field class="adf-full-width">
                        <mat-label>{{ 'CORE.HOST_SETTINGS.CLIENT'| translate }}</mat-label>
                        <input matInput name="clientId" id="clientId" formControlName="clientId"
                               placeholder="Client Id">
@@ -94,7 +94,7 @@
                        </mat-error>
                    </mat-form-field>

-                    <mat-form-field class="adf-full-width" floatLabel="Scope">
+                    <mat-form-field class="adf-full-width">
                        <mat-label>{{ 'CORE.HOST_SETTINGS.SCOPE'| translate }}</mat-label>
                        <input matInput name="{{ 'CORE.HOST_SETTINGS.SCOPE'| translate }}"
                               formControlName="scope" placeholder="Scope Id">
@@ -114,7 +114,7 @@
                    </mat-slide-toggle>


-                    <mat-form-field class="adf-full-width" floatLabel="Redirect Uri">
+                    <mat-form-field class="adf-full-width">
                        <mat-label>{{ 'CORE.HOST_SETTINGS.REDIRECT'| translate }}</mat-label>
                        <input matInput placeholder="{{ 'CORE.HOST_SETTINGS.REDIRECT'| translate }}"
                               name="redirectUri" formControlName="redirectUri">
@@ -123,13 +123,13 @@
                        </mat-error>
                    </mat-form-field>

-                    <mat-form-field class="adf-full-width" floatLabel="Redirect Uri Logout">
+                    <mat-form-field class="adf-full-width">
                        <mat-label>{{ 'CORE.HOST_SETTINGS.REDIRECT_LOGOUT'| translate }}</mat-label>
                        <input id="logout-url" matInput placeholder="{{ 'CORE.HOST_SETTINGS.REDIRECT_LOGOUT'| translate }}"
                               name="redirectUriLogout" formControlName="redirectUriLogout">
                    </mat-form-field>

-                    <mat-form-field class="adf-full-width" floatLabel="Public Urls">
+                    <mat-form-field class="adf-full-width">
                        <mat-label>{{ 'CORE.HOST_SETTINGS.PUBLIC_URLS'| translate }}</mat-label>
                        <input id="public-url" matInput placeholder="{{ 'CORE.HOST_SETTINGS.PUBLIC_URLS'| translate }}"
                               name="publicUrls" formControlName="publicUrls">
--- a/lib/core/settings/host-settings.component.ts
+++ b/lib/core/settings/host-settings.component.ts
@@ -16,7 +16,7 @@
 */

 import { Component, EventEmitter, Output, ViewEncapsulation, OnInit, Input } from '@angular/core';
-import { Validators, FormGroup, FormBuilder, AbstractControl, FormControl } from '@angular/forms';
+import { Validators, FormGroup, FormBuilder, FormControl } from '@angular/forms';
 import { AppConfigService, AppConfigValues } from '../app-config/app-config.service';
 import { StorageService } from '../services/storage.service';
 import { AlfrescoApiService } from '../services/alfresco-api.service';
@@ -136,7 +136,7 @@ export class HostSettingsComponent implements OnInit {
        }
    }

-    private createOAuthFormGroup(): AbstractControl {
+    private createOAuthFormGroup(): FormGroup {
        const oauth = <OauthConfigModel> this.appConfig.get(AppConfigValues.OAUTHCONFIG, {});

        return this.formBuilder.group({
@@ -152,15 +152,15 @@ export class HostSettingsComponent implements OnInit {
        });
    }

-    private createBPMFormControl(): AbstractControl {
+    private createBPMFormControl(): FormControl {
        return new FormControl(this.appConfig.get<string>(AppConfigValues.BPMHOST), [Validators.required, Validators.pattern(this.HOST_REGEX)]);
    }

-    private createIdentityFormControl(): AbstractControl {
+    private createIdentityFormControl(): FormControl {
        return new FormControl(this.appConfig.get<string>(AppConfigValues.IDENTITY_HOST), [Validators.required, Validators.pattern(this.HOST_REGEX)]);
    }

-    private createECMFormControl(): AbstractControl {
+    private createECMFormControl(): FormControl {
        return new FormControl(this.appConfig.get<string>(AppConfigValues.ECMHOST), [Validators.required, Validators.pattern(this.HOST_REGEX)]);
    }

@@ -230,60 +230,60 @@ export class HostSettingsComponent implements OnInit {
        return this.form.get('authType').value === 'OAUTH';
    }

-    get providersControl(): AbstractControl {
-        return this.form.get('providersControl');
+    get providersControl(): FormControl {
+        return this.form.get('providersControl') as FormControl;
    }

-    get bpmHost(): AbstractControl {
-        return this.form.get('bpmHost');
+    get bpmHost(): FormControl {
+        return this.form.get('bpmHost') as FormControl;
    }

-    get ecmHost(): AbstractControl {
-        return this.form.get('ecmHost');
+    get ecmHost(): FormControl {
+        return this.form.get('ecmHost') as FormControl;
    }

-    get host(): AbstractControl {
-        return this.oauthConfig.get('host');
+    get host(): FormControl {
+        return this.oauthConfig.get('host') as FormControl;
    }

-    get identityHost(): AbstractControl {
-        return this.form.get('identityHost');
+    get identityHost(): FormControl {
+        return this.form.get('identityHost') as FormControl;
    }

-    get clientId(): AbstractControl {
-        return this.oauthConfig.get('clientId');
+    get clientId(): FormControl {
+        return this.oauthConfig.get('clientId') as FormControl;
    }

-    get scope(): AbstractControl {
-        return this.oauthConfig.get('scope');
+    get scope(): FormControl {
+        return this.oauthConfig.get('scope') as FormControl;
    }

-    get secretId(): AbstractControl {
-        return this.oauthConfig.get('secretId');
+    get secretId(): FormControl {
+        return this.oauthConfig.get('secretId') as FormControl;
    }

-    get implicitFlow(): AbstractControl {
-        return this.oauthConfig.get('implicitFlow');
+    get implicitFlow(): FormControl {
+        return this.oauthConfig.get('implicitFlow') as FormControl;
    }

-    get silentLogin(): AbstractControl {
-        return this.oauthConfig.get('silentLogin');
+    get silentLogin(): FormControl {
+        return this.oauthConfig.get('silentLogin') as FormControl;
    }

-    get redirectUri(): AbstractControl {
-        return this.oauthConfig.get('redirectUri');
+    get redirectUri(): FormControl {
+        return this.oauthConfig.get('redirectUri') as FormControl;
    }

-    get publicUrls(): AbstractControl {
-        return this.oauthConfig.get('publicUrls');
+    get publicUrls(): FormControl {
+        return this.oauthConfig.get('publicUrls') as FormControl;
    }

-    get redirectUriLogout(): AbstractControl {
-        return this.oauthConfig.get('redirectUriLogout');
+    get redirectUriLogout(): FormControl {
+        return this.oauthConfig.get('redirectUriLogout') as FormControl;
    }

-    get oauthConfig(): AbstractControl {
-        return this.form.get('oauthConfig');
+    get oauthConfig(): FormControl {
+        return this.form.get('oauthConfig') as FormControl;
    }

 }
--- a/lib/core/tsconfig.lib.json
+++ b/lib/core/tsconfig.lib.json
@@ -11,6 +11,7 @@
  "angularCompilerOptions": {
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
-    "enableResourceInlining": true
+    "enableResourceInlining": true,
+    "strictTemplates": true
  }
 }
--- a/lib/core/viewer/components/viewer.component.html
+++ b/lib/core/viewer/components/viewer.component.html
@@ -9,10 +9,7 @@
         cdkTrapFocusAutoCapture>
        <ng-content select="adf-viewer-toolbar"></ng-content>
        <ng-container *ngIf="showToolbar && !toolbar">
-            <adf-toolbar color="default"
-                         id="adf-viewer-toolbar"
-                         class="adf-viewer-toolbar">
-
+            <adf-toolbar id="adf-viewer-toolbar" class="adf-viewer-toolbar">
                <adf-toolbar-title>

                    <ng-container *ngIf="allowLeftSidebar">
@@ -21,7 +18,7 @@
                                [attr.aria-label]="'ADF_VIEWER.ACTIONS.INFO' | translate"
                                title="{{ 'ADF_VIEWER.ACTIONS.INFO' | translate }}"
                                data-automation-id="adf-toolbar-left-sidebar"
-                                [color]="showLeftSidebar ? 'accent' : 'default'"
+                                [color]="showLeftSidebar ? 'accent' : null"
                                (click)="toggleLeftSidebar()">
                            <mat-icon>info_outline</mat-icon>
                        </button>
@@ -122,7 +119,7 @@
                            [attr.aria-label]="'ADF_VIEWER.ACTIONS.INFO' | translate"
                            title="{{ 'ADF_VIEWER.ACTIONS.INFO' | translate }}"
                            data-automation-id="adf-toolbar-sidebar"
-                            [color]="showRightSidebar ? 'accent' : 'default'"
+                            [color]="showRightSidebar ? 'accent' : null"
                            (click)="toggleSidebar()">
                        <mat-icon>info_outline</mat-icon>
                    </button>
--- a/lib/extensions/tsconfig.lib.json
+++ b/lib/extensions/tsconfig.lib.json
@@ -7,6 +7,7 @@
  "angularCompilerOptions": {
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
-    "enableResourceInlining": true
+    "enableResourceInlining": true,
+    "strictTemplates": true
  }
 }
--- a/lib/insights/src/lib/analytics-process/components/analytics-generator.component.html
+++ b/lib/insights/src/lib/analytics-process/components/analytics-generator.component.html
@@ -20,7 +20,7 @@
                        <canvas baseChart *ngIf="!report.hasZeroValues()" class="adf-chart"
                                [data]="report.data"
                                [labels]="report.labels"
-                                [chartType]="report.type">
+                                [chartType]="'pie'">
                        </canvas>
                    </div>
                </div>
@@ -75,7 +75,7 @@
                            [datasets]="report.datasets"
                            [labels]="report.labels"
                            [options]="report.options"
-                            [chartType]="report.type">
+                            [chartType]="'bar'">
                    </canvas>
                </div>
            </div>
--- a/lib/insights/src/lib/analytics-process/components/analytics-generator.component.ts
+++ b/lib/insights/src/lib/analytics-process/components/analytics-generator.component.ts
@@ -30,7 +30,7 @@ export class AnalyticsGeneratorComponent implements OnChanges {

    /** reportId. */
    @Input()
-    reportId: number;
+    reportId: string;

    /** reportParamQuery. */
    @Input()
@@ -71,7 +71,7 @@ export class AnalyticsGeneratorComponent implements OnChanges {

    ngOnChanges() {
        if (this.reportId && this.reportParamQuery) {
-            this.generateReport(`${this.reportId}`, this.reportParamQuery);
+            this.generateReport(this.reportId, this.reportParamQuery);
        } else {
            this.reset();
        }
@@ -82,7 +82,7 @@ export class AnalyticsGeneratorComponent implements OnChanges {
            reportParamQuery = {};
        }
        this.analyticsService.getReportsByParams(reportId, reportParamQuery).subscribe(
-            (res: Chart[]) => {
+            (res) => {
                this.reports = res;
                if (this.reports) {
                    this.selectFirstReport();
--- a/lib/insights/src/lib/analytics-process/components/analytics-report-heat-map.component.html
+++ b/lib/insights/src/lib/analytics-process/components/analytics-report-heat-map.component.html
@@ -1,9 +1,20 @@
 <h4>Process Heat map</h4>
 <div *ngIf="hasMetric()">
    <form [formGroup]="metricForm" novalidate>
-        <analytics-dropdown-widget [field]="field" [group]="metricForm.controls.metricGroup" [controllerName]="'metric'"
-                         (fieldChanged)="onMetricChanges(field)" [showDefaultOption]="false"></analytics-dropdown-widget>
+        <analytics-dropdown-widget
+            [field]="field"
+            [group]="metricGroup"
+            [controllerName]="'metric'"
+            (fieldChanged)="onMetricChanges(field)"
+            [showDefaultOption]="false"
+        ></analytics-dropdown-widget>
    </form>
-    <adf-diagram *ngIf="currentMetric" [processDefinitionId]="report.processDefinitionId" [metricPercentages]="currentMetric" [metricColor]="currentMetricColors" [metricType]="metricType"></adf-diagram>
+    <adf-diagram
+        *ngIf="currentMetric"
+        [processDefinitionId]="report.processDefinitionId"
+        [metricPercentages]="currentMetric"
+        [metricColor]="currentMetricColors"
+        [metricType]="metricType"
+    ></adf-diagram>
 </div>
 <div *ngIf="!hasMetric()">No metric found</div>
--- a/lib/insights/src/lib/analytics-process/components/analytics-report-heat-map.component.ts
+++ b/lib/insights/src/lib/analytics-process/components/analytics-report-heat-map.component.ts
@@ -91,4 +91,8 @@ export class AnalyticsReportHeatMapComponent implements  OnInit {
            this.report.avgTimePercentages);
    }

+    get metricGroup(): FormGroup {
+        return this.metricForm.controls.metricGroup as FormGroup;
+    }
+
 }
--- a/lib/insights/src/lib/analytics-process/components/analytics-report-list.component.html
+++ b/lib/insights/src/lib/analytics-process/components/analytics-report-list.component.html
@@ -14,7 +14,7 @@
        </mat-list-item>
    </mat-nav-list>
    <div class="adf-report-card-grids" *ngIf="isGrid()">
-        <mat-card (click)="selectReport(report)" class="adf-report-card" *ngFor="let report of reports;">
+        <mat-card (click)="selectReport(report)" class="adf-report-card" *ngFor="let report of reports">
            <div class="adf-report-card-logo logo">
                <mat-icon class="adf-report-card-logo-icon">equalizer</mat-icon>
            </div>
--- a/lib/insights/src/lib/analytics-process/components/analytics-report-list.component.ts
+++ b/lib/insights/src/lib/analytics-process/components/analytics-report-list.component.ts
@@ -45,7 +45,7 @@ export class AnalyticsReportListComponent implements OnInit {

    /** report Click. */
    @Output()
-    reportClick: EventEmitter<ReportParametersModel> = new EventEmitter<ReportParametersModel>();
+    reportClick = new EventEmitter<ReportParametersModel>();

    /** success. */
    @Output()
@@ -56,7 +56,7 @@ export class AnalyticsReportListComponent implements OnInit {
    error = new EventEmitter();

    private reportObserver: Observer<any>;
-    report$: Observable<any>;
+    report$: Observable<ReportParametersModel>;

    currentReport: any;

@@ -74,7 +74,7 @@ export class AnalyticsReportListComponent implements OnInit {
    }

    initObserver() {
-        this.report$.subscribe((report: ReportParametersModel) => {
+        this.report$.subscribe((report) => {
            this.reports.push(report);
        });
    }
--- a/lib/insights/src/lib/analytics-process/components/analytics-report-parameters.component.html
+++ b/lib/insights/src/lib/analytics-process/components/analytics-report-parameters.component.html
@@ -14,14 +14,14 @@
                                    autofocus
                                    data-automation-id="reportName"
                                    [value]="reportParameters.name"
-                                    (input)="reportParameters.name=$event.target.value"
+                                    (input)="reportParameters.name=$any($event).target.value"
                                    (blur)="editTitle()"
                                    (keyup.enter)="editTitle()"
                                />
                            </mat-form-field>
                        </div>
                        <div class="adf-report-title" *ngIf="!isEditable" (click)="editEnable()">
-                            <mat-icon class="adf-report-icon" >mode_edit</mat-icon>
+                            <mat-icon class="adf-report-icon">mode_edit</mat-icon>
                            <h4>{{reportParameters.name}}</h4>
                        </div>
                    </adf-toolbar-title>
@@ -47,49 +47,73 @@
                    <div [ngSwitch]="field.type">
                        <div *ngSwitchCase="'integer'">
                            <br>
-                            <analytics-number-widget [field]="field" [group]="reportForm.controls.processInstanceGroup"
-                                            [controllerName]="'slowProcessInstanceInteger'"
-                                            [required]="true"></analytics-number-widget>
+                            <analytics-number-widget
+                                [field]="field"
+                                [group]="processInstanceGroup"
+                                [controllerName]="'slowProcessInstanceInteger'"
+                                [required]="true">
+                            </analytics-number-widget>
                        </div>
                        <div *ngSwitchCase="'duration'">
                            <br>
-                            <duration-widget [field]="field" [group]="reportForm.controls.durationGroup"
-                                                [controllerName]="'duration'"></duration-widget>
+                            <duration-widget
+                                [field]="field"
+                                [group]="durationGroup"
+                                [controllerName]="'duration'">
+                            </duration-widget>
                        </div>
                        <div *ngSwitchCase="'boolean'">
                            <br>
-                            <analytics-checkbox-widget [field]="field" [group]="reportForm.controls.typeFilteringGroup"
-                                                [controllerName]="'typeFiltering'"></analytics-checkbox-widget>
+                            <analytics-checkbox-widget
+                                [field]="field"
+                                [group]="typeFilteringGroup"
+                                [controllerName]="'typeFiltering'">
+                            </analytics-checkbox-widget>
                        </div>
                        <div *ngSwitchCase="'status'">
                            <br>
-                            <analytics-dropdown-widget [field]="field" [group]="reportForm.controls.statusGroup"
-                                                [controllerName]="'status'"
-                                                [required]="true"></analytics-dropdown-widget>
+                            <analytics-dropdown-widget
+                                [field]="field"
+                                [group]="statusGroup"
+                                [controllerName]="'status'"
+                                [required]="true">
+                            </analytics-dropdown-widget>
                        </div>
                        <div *ngSwitchCase="'processDefinition'">
                            <br>
-                            <analytics-dropdown-widget [field]="field" [group]="reportForm.controls.processDefGroup"
-                                                [controllerName]="'processDefinitionId'"
-                                                [required]="true"
-                                                (fieldChanged)="onProcessDefinitionChanges(field)"></analytics-dropdown-widget>
+                            <analytics-dropdown-widget
+                                [field]="field"
+                                [group]="processDefGroup"
+                                [controllerName]="'processDefinitionId'"
+                                [required]="true"
+                                (fieldChanged)="onProcessDefinitionChanges(field)">
+                            </analytics-dropdown-widget>
                        </div>
                        <div *ngSwitchCase="'task'">
                            <br>
-                            <analytics-dropdown-widget [field]="field" [group]="reportForm.controls.taskGroup"
-                                                [controllerName]="'taskName'"
-                                                [required]="true"></analytics-dropdown-widget>
+                            <analytics-dropdown-widget
+                                [field]="field"
+                                [group]="taskGroup"
+                                [controllerName]="'taskName'"
+                                [required]="true">
+                            </analytics-dropdown-widget>
                        </div>
                        <div *ngSwitchCase="'dateRange'">
                            <br>
-                            <adf-date-range-widget [field]="field"
-                                                    [group]="reportForm.controls.dateRange"></adf-date-range-widget>
+                            <adf-date-range-widget
+                                [field]="field"
+                                [group]="dateRange">
+                            </adf-date-range-widget>
                        </div>
                        <div *ngSwitchCase="'dateInterval'">
                            <br>
-                            <analytics-dropdown-widget [field]="field" [group]="reportForm.controls.dateIntervalGroup"
-                                                [controllerName]="'dateRangeInterval'"
-                                                [required]="true" [showDefaultOption]="false"></analytics-dropdown-widget>
+                            <analytics-dropdown-widget
+                                [field]="field"
+                                [group]="dateIntervalGroup"
+                                [controllerName]="'dateRangeInterval'"
+                                [required]="true"
+                                [showDefaultOption]="false">
+                            </analytics-dropdown-widget>
                        </div>
                        <div *ngSwitchDefault>
                            <span>{{'ANALYTICS.MESSAGES.UNKNOWN-WIDGET-TYPE' | translate}}: {{field.type}}</span>
--- a/lib/insights/src/lib/analytics-process/components/analytics-report-parameters.component.ts
+++ b/lib/insights/src/lib/analytics-process/components/analytics-report-parameters.component.ts
@@ -402,4 +402,36 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On
    isFormValid() {
        return this.reportForm && this.reportForm.dirty && this.reportForm.valid;
    }
+
+    get taskGroup(): FormGroup {
+        return this.reportForm.controls.taskGroup as FormGroup;
+    }
+
+    get processDefGroup(): FormGroup {
+        return this.reportForm.controls.processDefGroup as FormGroup;
+    }
+
+    get dateIntervalGroup(): FormGroup {
+        return this.reportForm.controls.dateIntervalGroup as FormGroup;
+    }
+
+    get dateRange(): FormGroup {
+        return this.reportForm.controls.dateRange as FormGroup;
+    }
+
+    get statusGroup(): FormGroup {
+        return this.reportForm.controls.statusGroup as FormGroup;
+    }
+
+    get typeFilteringGroup(): FormGroup {
+        return this.reportForm.controls.typeFilteringGroup as FormGroup;
+    }
+
+    get durationGroup(): FormGroup {
+        return this.reportForm.controls.durationGroup as FormGroup;
+    }
+
+    get processInstanceGroup(): FormGroup {
+        return this.reportForm.controls.processInstanceGroup as FormGroup;
+    }
 }
--- a/lib/insights/src/lib/analytics-process/components/analytics.component.html
+++ b/lib/insights/src/lib/analytics-process/components/analytics.component.html
@@ -1,15 +1,18 @@
 <div class="adf-analytics-container">
-    <adf-analytics-report-parameters [appId]="appId" [reportId]="reportId"
-                                 [hideComponent]="hideParameters"
-                                 (formValueChanged)="reset()"
-                                 (success)="showReport($event)"
-                                 (saveReportSuccess)="onSaveReportSuccess($event)"
-                                 (deleteReportSuccess)="onDeleteReportSuccess()"
-                                 (edit)="onEditReport($event)">
+    <adf-analytics-report-parameters
+        [appId]="appId"
+        [reportId]="reportId"
+        [hideComponent]="hideParameters"
+        (formValueChanged)="reset()"
+        (success)="showReport($event)"
+        (saveReportSuccess)="onSaveReportSuccess($event)"
+        (deleteReportSuccess)="onDeleteReportSuccess()"
+        (edit)="onEditReport($event)">
    </adf-analytics-report-parameters>

-    <adf-analytics-generator [reportId]="reportId"
-                                  [reportParamQuery]="reportParamQuery"
-                                  #analyticsGenerator>
+    <adf-analytics-generator
+        [reportId]="reportId"
+        [reportParamQuery]="reportParamQuery"
+        #analyticsGenerator>
    </adf-analytics-generator>
 </div>
--- a/lib/insights/src/lib/analytics-process/components/analytics.component.ts
+++ b/lib/insights/src/lib/analytics-process/components/analytics.component.ts
@@ -33,7 +33,7 @@ export class AnalyticsComponent implements OnChanges {

    /** reportId. */
    @Input()
-    reportId: number;
+    reportId: string;

    /** hideParameters. */
    @Input()
--- a/lib/insights/src/lib/analytics-process/services/analytics.service.ts
+++ b/lib/insights/src/lib/analytics-process/services/analytics.service.ts
@@ -181,7 +181,7 @@ export class AnalyticsService {
            );
    }

-    getReportsByParams(reportId: string, paramsQuery: any): Observable<any> {
+    getReportsByParams(reportId: string, paramsQuery: any): Observable<Chart[]> {
        return from(this.apiService.getInstance().activiti.reportApi.getReportsByParams(reportId, paramsQuery))
            .pipe(
                map((res: any) => {
--- a/lib/insights/src/lib/diagram/models/chart/bar-chart.model.ts
+++ b/lib/insights/src/lib/diagram/models/chart/bar-chart.model.ts
@@ -19,11 +19,6 @@ import moment from 'moment-es6';
 import { Chart } from './chart.model';

 export class BarChart extends Chart {
-    title: string;
-    titleKey: string;
-    labels: any = [];
-    datasets: any[] = [];
-    data: any[] = [];
    xAxisType: string;
    yAxisType: string;
    options: any = {
@@ -45,8 +40,6 @@ export class BarChart extends Chart {

    constructor(obj?: any) {
        super(obj);
-        this.title = obj && obj.title || null;
-        this.titleKey = obj && obj.titleKey || null;
        this.xAxisType = obj && obj.xAxisType || null;
        this.yAxisType = obj && obj.yAxisType || null;
        this.options.scales.xAxes[0].ticks.callback = this.xAxisTickFormatFunction(this.xAxisType);
@@ -100,8 +93,4 @@ export class BarChart extends Chart {
            return value;
        };
    };
-
-    hasDatasets(): boolean {
-        return this.datasets && this.datasets.length > 0;
-    }
 }
--- a/lib/insights/src/lib/diagram/models/chart/chart.model.ts
+++ b/lib/insights/src/lib/diagram/models/chart/chart.model.ts
@@ -19,9 +19,26 @@ export class Chart {
    id: string;
    type: string;
    icon: string;
+    title?: string;
+    titleKey?: string;
+    labels?: string[] = [];
+    data?: any[] = [];
+    datasets?: any[] = [];
+    detailsTable?: any;
+    showDetails = false;
+    options?: any;

    constructor(obj?: any) {
        this.id = obj && obj.id || null;
+        this.title = obj.title;
+        this.titleKey = obj.titleKey;
+        this.labels = obj.labels || [];
+        this.data = obj.data || [];
+        this.datasets = obj.datasets || [];
+        this.detailsTable = obj.detailsTable;
+        this.showDetails = !!obj.showDetails;
+        this.options = obj.options;
+
        if (obj && obj.type) {
            this.type = this.convertType(obj.type);
            this.icon = this.getIconType(this.type);
@@ -89,4 +106,32 @@ export class Chart {
        }
        return typeIcon;
    }
+
+    hasData(): boolean {
+        return this.data && this.data.length > 0;
+    }
+
+    hasDatasets(): boolean {
+        return this.datasets && this.datasets.length > 0;
+    }
+
+    hasDetailsTable(): boolean {
+        return !!this.detailsTable;
+    }
+
+    hasZeroValues(): boolean {
+        let isZeroValues = false;
+
+        if (this.hasData()) {
+            isZeroValues = true;
+
+            this.data.forEach((value) => {
+                if (value.toString() !== '0') {
+                    isZeroValues = false;
+                }
+            });
+        }
+
+        return isZeroValues;
+    }
 }
--- a/lib/insights/src/lib/diagram/models/chart/details-table-chart.model.ts
+++ b/lib/insights/src/lib/diagram/models/chart/details-table-chart.model.ts
@@ -18,17 +18,11 @@
 import { TableChart } from './table-chart.model';

 export class DetailsTableChart extends TableChart {
-    detailsTable: any;
-    showDetails: boolean = false;
-
    constructor(obj?: any) {
        super(obj);
+
        if (obj.detailTables) {
            this.detailsTable = new TableChart(obj.detailTables[0]);
        }
    }
-
-    hasDetailsTable(): boolean {
-        return !!this.detailsTable;
-    }
 }
--- a/lib/insights/src/lib/diagram/models/chart/heat-map-chart.model.ts
+++ b/lib/insights/src/lib/diagram/models/chart/heat-map-chart.model.ts
@@ -21,7 +21,6 @@ export class HeatMapChart extends Chart {
    avgTimePercentages: string;
    avgTimeValues: string;
    processDefinitionId: string;
-    titleKey: string;
    totalCountValues: string;
    totalCountsPercentages: string;
    totalTimePercentages: string;
@@ -33,7 +32,6 @@ export class HeatMapChart extends Chart {
        this.avgTimeValues = obj && obj.avgTimeValues || null;
        this.processDefinitionId = obj && obj.processDefinitionId || null;
        this.totalCountValues = obj && obj.totalCountValues || null;
-        this.titleKey = obj && obj.titleKey || null;
        this.totalCountsPercentages = obj && obj.totalCountsPercentages || null;
        this.totalTimePercentages = obj && obj.totalTimePercentages || null;
        this.totalTimeValues = obj && obj.totalTimeValues || null;
--- a/lib/insights/src/lib/diagram/models/chart/line-chart.model.ts
+++ b/lib/insights/src/lib/diagram/models/chart/line-chart.model.ts
@@ -18,15 +18,10 @@
 import { Chart } from './chart.model';

 export class LineChart extends Chart {
-    title: string;
-    titleKey: string;
-    labels: string[] = [];
    datasets: any[] = [];

    constructor(obj?: any) {
        super(obj);
-        this.title = obj && obj.title || null;
-        this.titleKey = obj && obj.titleKey || null;
        this.labels = obj && obj.columnNames.slice(1, obj.columnNames.length);

        obj.rows.forEach((value: any) => {
--- a/lib/insights/src/lib/diagram/models/chart/pie-chart.model.ts
+++ b/lib/insights/src/lib/diagram/models/chart/pie-chart.model.ts
@@ -18,15 +18,9 @@
 import { Chart } from './chart.model';

 export class PieChart extends Chart {
-    title: string;
-    titleKey: string;
-    labels: string[] = [];
-    data: string[] = [];
-
    constructor(obj?: any) {
        super(obj);
-        this.title = obj && obj.title || null;
-        this.titleKey = obj && obj.titleKey || null;
+
        if (obj.values) {
            obj.values.forEach((value: any) => {
                this.add(value.key, value.y);
@@ -38,21 +32,4 @@ export class PieChart extends Chart {
        this.labels.push(label);
        this.data.push(data);
    }
-
-    hasData(): boolean {
-        return this.data && this.data.length > 0 ? true : false;
-    }
-
-    hasZeroValues(): boolean {
-        let isZeroValues: boolean = false;
-        if (this.hasData()) {
-            isZeroValues = true;
-            this.data.forEach((value) => {
-                if (value.toString() !== '0') {
-                    isZeroValues = false;
-                }
-            });
-        }
-        return isZeroValues;
-    }
 }
--- a/lib/insights/src/lib/diagram/models/chart/table-chart.model.ts
+++ b/lib/insights/src/lib/diagram/models/chart/table-chart.model.ts
@@ -18,22 +18,13 @@
 import { Chart } from './chart.model';

 export class TableChart extends Chart {
-    title: string;
-    titleKey: string;
-    labels: string[] = [];
-    datasets: any[] = [];
-
    constructor(obj?: any) {
        super(obj);
-        this.title = obj && obj.title || null;
-        this.titleKey = obj && obj.titleKey || null;
+
        this.labels = obj && obj.columnNames;
+
        if (obj.rows) {
            this.datasets = obj && obj.rows;
        }
    }
-
-    hasDatasets() {
-        return this.datasets && this.datasets.length > 0 ? true : false;
-    }
 }
--- a/lib/insights/src/lib/diagram/models/report/report-parameters.model.ts
+++ b/lib/insights/src/lib/diagram/models/report/report-parameters.model.ts
@@ -22,10 +22,13 @@ export class ReportParametersModel {
    name: string;
    definition: ReportDefinitionModel;
    created: string;
+    description?: string;

    constructor(obj?: any) {
        this.id = obj && obj.id;
        this.name = obj && obj.name || null;
+        this.description = obj.description;
+
        if (obj && obj.definition) {
            this.definition = new ReportDefinitionModel(JSON.parse(obj.definition));
        }
--- a/lib/insights/tsconfig.lib.json
+++ b/lib/insights/tsconfig.lib.json
@@ -13,6 +13,7 @@
  "angularCompilerOptions": {
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
-    "enableResourceInlining": true
+    "enableResourceInlining": true,
+    "strictTemplates": true
  }
 }
--- a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.html
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.html
@@ -23,7 +23,7 @@
                check_circle
            </mat-icon>
            <img mat-list-icon class="adf-attach-widget__icon" *ngIf="!selectedNode || file.id !== selectedNode.id" [id]="'file-'+file?.id+'-icon'" (click)="onRowClicked(file)"
-                    [src]="file.content ? getIcon(file.content.mimeType) : getIcon(file.mimeType)" [alt]="mimeTypeIcon"
+                    [src]="file.content ? getIcon(file.content.mimeType) : getIcon(file['mimeType'])" [alt]="mimeTypeIcon"
                    role="button" tabindex="0" />
            <span matLine id="{{'file-'+file?.id}}" role="button" tabindex="0" class="adf-file" (click)="onRowClicked(file)">{{file.name}}</span>
            <button id="{{'file-'+file?.id+'-option-menu'}}" mat-icon-button [matMenuTriggerFor]="fileActionMenu" *ngIf="!!file.content?.mimeType">
--- a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.ts
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.ts
@@ -219,7 +219,7 @@ export class AttachFileCloudWidgetComponent extends UploadCloudWidgetComponent i
        this.contentModelFormFileHandler(this.selectedNode);
    }

-    contentModelFormFileHandler(file?: Node) {
+    contentModelFormFileHandler(file?: any) {
        if (file?.id && this.isRetrieveMetadataOptionEnabled()) {
            const values: FormValues = {};
            this.apiService.getInstance().node.getNode(file.id).then(acsNode => {
--- a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/upload-cloud.widget.ts
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/upload-cloud.widget.ts
@@ -21,7 +21,7 @@ import { Component, ElementRef, OnInit, ViewChild, ViewEncapsulation } from '@an
 import { Node } from '@alfresco/js-api';
 import { Observable, from } from 'rxjs';
 import { mergeMap } from 'rxjs/operators';
-import { WidgetComponent, LogService, FormService, ThumbnailService, ContentLinkModel, NotificationService } from '@alfresco/adf-core';
+import { WidgetComponent, LogService, FormService, ThumbnailService, NotificationService } from '@alfresco/adf-core';
 import { ProcessCloudContentService } from '../../../services/process-cloud-content.service';
 import { FileSourceTypes, DestinationFolderPathType } from '../../../models/form-cloud-representation.model';

@@ -137,17 +137,17 @@ export class UploadCloudWidgetComponent extends WidgetComponent implements OnIni
        }
    }

-    get uploadedFiles(): Node[] {
+    get uploadedFiles(): any[] {
        const result = this.field.value || this.field.form.values[this.field.id];
        return result || [];
    }

-    private removeElementFromList(file: Node) {
+    private removeElementFromList(file: any) {
        const filteredValues = this.uploadedFiles.filter(value => value.id !== file.id);
        this.resetFormValues(filteredValues);
    }

-    private resetFormValues(values: Node[]) {
+    private resetFormValues(values: any[]) {
        if (values && values.length > 0) {
            this.field.value = values;
            this.field.form.values[this.field.id] = values;
@@ -159,7 +159,7 @@ export class UploadCloudWidgetComponent extends WidgetComponent implements OnIni
        }
    }

-    fileClicked(file: ContentLinkModel): void {
+    fileClicked(file: any): void {
        this.formService.formContentClicked.next(file);
    }

--- a/Show More
+++ b/Show More