[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-07-24 17:32:15 +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>