[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

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">

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 => {

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);
     }
 

lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.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"

lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.html

@@ -10,8 +10,8 @@
                          (changedGroups)="onChangedGroup($event)"
                          [preSelectGroups]="preSelectGroup"
                          [matTooltip]="field.tooltip"
-                         matTooltipPosition="above"
-                         matTooltipShowDelay="1000">
+                         [matTooltipPosition]="'above'"
+                         [matTooltipShowDelay]="1000">
         </adf-cloud-group>
         <error-widget [error]="field.validationSummary"></error-widget>
         <error-widget class="adf-dropdown-required-message" *ngIf="isInvalidFieldRequired()"

lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.ts

@@ -20,6 +20,7 @@ import { WidgetComponent, IdentityGroupModel, FormService } from '@alfresco/adf-
 import { FormControl } from '@angular/forms';
 import { filter, takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
+import { ComponentSelectionMode } from '../../../../types';
 
 /* tslint:disable:component-selector  */
 
@@ -45,7 +46,7 @@ export class GroupCloudWidgetComponent extends WidgetComponent implements OnInit
 
     typeId = 'GroupCloudWidgetComponent';
     roles: string[];
-    mode: string;
+    mode: ComponentSelectionMode;
     title: string;
     preSelectGroup: IdentityGroupModel[];
     search: FormControl;
@@ -57,7 +58,7 @@ export class GroupCloudWidgetComponent extends WidgetComponent implements OnInit
     ngOnInit() {
         if (this.field) {
             this.roles = this.field.roles;
-            this.mode = this.field.optionType;
+            this.mode = this.field.optionType as ComponentSelectionMode;
             this.title = this.field.placeholder;
             this.preSelectGroup = this.field.value ? this.field.value : [];
         }

lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.ts

@@ -20,6 +20,7 @@ import { WidgetComponent, IdentityUserModel, FormService } from '@alfresco/adf-c
 import { FormControl } from '@angular/forms';
 import { filter, takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
+import { ComponentSelectionMode } from '../../../../types';
 
 /* tslint:disable:component-selector  */
 
@@ -46,7 +47,7 @@ export class PeopleCloudWidgetComponent extends WidgetComponent implements OnIni
     typeId = 'PeopleCloudWidgetComponent';
     appName: string;
     roles: string[];
-    mode: string;
+    mode: ComponentSelectionMode;
     title: string;
     preSelectUsers: IdentityUserModel[];
     search: FormControl;
@@ -58,7 +59,7 @@ export class PeopleCloudWidgetComponent extends WidgetComponent implements OnIni
     ngOnInit() {
         if (this.field) {
             this.roles = this.field.roles;
-            this.mode = this.field.optionType;
+            this.mode = this.field.optionType as ComponentSelectionMode;
             this.title = this.field.placeholder;
             this.preSelectUsers = this.field.value ? this.field.value : [];
         }

lib/process-services-cloud/src/lib/group/components/group-cloud.component.ts

@@ -75,20 +75,20 @@ export class GroupCloudComponent implements OnInit, OnChanges, OnDestroy {
      * Otherwise, no check will be done.
      */
     @Input()
-    validate: Boolean = false;
+    validate = false;
 
     /** Show the info in readonly mode
      */
     @Input()
-    readOnly: boolean = false;
+    readOnly = false;
 
     /** FormControl to list of group */
     @Input()
-    groupChipsCtrl: FormControl = new FormControl({ value: '', disabled: false });
+    groupChipsCtrl = new FormControl({ value: '', disabled: false });
 
     /** FormControl to search the group */
     @Input()
-    searchGroupsControl: FormControl = new FormControl({ value: '', disabled: false });
+    searchGroupsControl = new FormControl({ value: '', disabled: false });
 
     /** Role names of the groups to be listed. */
     @Input()

lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.html

@@ -66,7 +66,7 @@
                             <input
                                 matInput
                                 [formControlName]="processFilterProperty.key"
-                                (keyup)="onDateChanged($event.srcElement.value, processFilterProperty)"
+                                (keyup)="onDateChanged($any($event).srcElement.value, processFilterProperty)"
                                 (dateChange)="onDateChanged($event.value, processFilterProperty)"
                                 [matDatepicker]="dateController"
                                 placeholder="{{processFilterProperty.label | translate}}"

lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.html

@@ -12,11 +12,11 @@
         (showRowActionsMenu)="onShowRowActionsMenu($event)"
         (showRowContextMenu)="onShowRowContextMenu($event)"
         (executeRowAction)="onExecuteRowAction($event)"
-        (rowClick)="onRowClick($event)"
-        (row-select)="onRowSelect($event)"
-        (row-unselect)="onRowUnselect($event)"
-        (row-keyup)="onRowKeyUp($event)"
-        (sorting-changed)="onSortingChanged($event)">
+        (rowClick)="onRowClick($any($event))"
+        (row-select)="onRowSelect($any($event))"
+        (row-unselect)="onRowUnselect($any($event))"
+        (row-keyup)="onRowKeyUp($any($event))"
+        (sorting-changed)="onSortingChanged($any($event))">
         <adf-loading-content-template>
             <ng-template>
                 <mat-progress-spinner

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

@@ -87,11 +87,11 @@ export class ProcessListCloudComponent extends DataTableSchema implements OnChan
 
     /** Filter the processes. Display only process with lastModifiedTo equal to the supplied date. */
     @Input()
-    lastModifiedFrom: string = '';
+    lastModifiedFrom: Date;
 
     /** Filter the processes. Display only process with lastModifiedTo equal to the supplied date. */
     @Input()
-    lastModifiedTo: string = '';
+    lastModifiedTo: Date;
 
     /** Filter the processes. Display only process with startedDate greater then the supplied date. */
     @Input()

lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.html

@@ -45,7 +45,7 @@
                     <input matInput
                            [matDatepicker]="taskDatePicker"
                            (keydown)="true"
-                           (focusout)="onDateChanged($event.srcElement.value)"
+                           (focusout)="onDateChanged($any($event).srcElement.value)"
                            placeholder="{{'ADF_CLOUD_TASK_LIST.START_TASK.FORM.LABEL.DATE'|translate}}"
                            [(ngModel)]="dueDate"
                            [ngModelOptions]="{standalone: true}"

lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.ts

@@ -19,7 +19,7 @@ import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
 import moment from 'moment-es6';
 import { Moment } from 'moment';
 import { Observable, Subject } from 'rxjs';
-import { FormBuilder, AbstractControl, Validators, FormGroup, FormControl } from '@angular/forms';
+import { FormBuilder, Validators, FormGroup, FormControl } from '@angular/forms';
 import {
     MOMENT_DATE_FORMATS, MomentDateAdapter,
     LogService,
@@ -102,8 +102,8 @@ export class StartTaskCloudComponent implements OnInit, OnDestroy {
 
     priorities: TaskPriorityOption[];
 
-    private assigneeForm: AbstractControl = new FormControl('');
-    private groupForm: AbstractControl = new FormControl('');
+    private assigneeForm = new FormControl('');
+    private groupForm = new FormControl('');
     private onDestroy$ = new Subject<boolean>();
 
     constructor(private taskService: TaskCloudService,
@@ -228,19 +228,19 @@ export class StartTaskCloudComponent implements OnInit, OnDestroy {
         return isValid ? null : { 'whitespace': true };
     }
 
-    get nameController(): AbstractControl {
-        return this.taskForm.get('name');
+    get nameController(): FormControl {
+        return this.taskForm.get('name') as FormControl;
     }
 
-    get priorityController(): AbstractControl {
-        return this.taskForm.get('priority');
+    get priorityController(): FormControl {
+        return this.taskForm.get('priority') as FormControl;
     }
 
-    get assigneeFormControl(): AbstractControl {
+    get assigneeFormControl(): FormControl {
         return this.assigneeForm;
     }
 
-    get candidateUserFormControl(): AbstractControl {
+    get candidateUserFormControl(): FormControl {
         return this.groupForm;
     }
 

lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.component.html

@@ -60,7 +60,7 @@
                                         [attr.data-automation-id]="taskFilterProperty.key">
                             <mat-label>{{taskFilterProperty.label | translate}}</mat-label>
                             <input matInput
-                                   (keyup)="onDateChanged($event.srcElement.value, taskFilterProperty)"
+                                   (keyup)="onDateChanged($any($event).srcElement.value, taskFilterProperty)"
                                    (dateChange)="onDateChanged($event.value, taskFilterProperty)"
                                    [matDatepicker]="dateController"
                                    placeholder="{{taskFilterProperty.label | translate}}"

lib/process-services-cloud/src/lib/task/task-filters/components/task-assignment-filter/task-assignment-filter.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
-import { AbstractControl, FormControl } from '@angular/forms';
+import { FormControl } from '@angular/forms';
 import { IdentityGroupModel, IdentityUserModel, IdentityUserService } from '@alfresco/adf-core';
 import { AssignmentType, TaskFilterProperties } from '../../models/filter-cloud.model';
 
@@ -37,7 +37,7 @@ export class TaskAssignmentFilterCloudComponent implements OnInit {
 
     assignmentType: AssignmentType;
     candidateGroups: IdentityGroupModel[] = [];
-    groupForm: AbstractControl = new FormControl('');
+    groupForm = new FormControl('');
     assignmentTypeList = {
         unassigned: AssignmentType.UNASSIGNED,
         currentUser: AssignmentType.CURRENT_USER,

lib/process-services-cloud/src/lib/task/task-list/components/base-task-list-cloud.component.html

@@ -15,11 +15,11 @@
             (showRowActionsMenu)="onShowRowActionsMenu($event)"
             (showRowContextMenu)="onShowRowContextMenu($event)"
             (executeRowAction)="onExecuteRowAction($event)"
-            (row-select)="onRowSelect($event)"
-            (row-unselect)="onRowUnselect($event)"
-            (rowClick)="onRowClick($event)"
-            (row-keyup)="onRowKeyUp($event)"
-            (sorting-changed)="onSortingChanged($event)">
+            (row-select)="onRowSelect($any($event))"
+            (row-unselect)="onRowUnselect($any($event))"
+            (rowClick)="onRowClick($any($event))"
+            (row-keyup)="onRowKeyUp($any($event))"
+            (sorting-changed)="onSortingChanged($any($event))">
             <adf-loading-content-template>
                 <ng-template>
                     <!-- Add your custom loading template here -->

lib/process-services-cloud/src/lib/task/task-list/components/base-task-list-cloud.component.ts

@@ -113,7 +113,7 @@ export abstract class BaseTaskListCloudComponent extends DataTableSchema impleme
     selectedInstances: any[];
     formattedSorting: any[];
     private defaultSorting = { key: 'startDate', direction: 'desc' };
-    boundReplacePriorityValues: Function;
+    boundReplacePriorityValues: (row: DataRow, col: DataColumn) => any;
 
     private onDestroy$ = new Subject<boolean>();
 

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

@@ -42,7 +42,7 @@ export class TaskListCloudComponent extends BaseTaskListCloudComponent {
 
     /** Filter the tasks. Display only tasks created on the supplied date. */
     @Input()
-    createdDate: string = '';
+    createdDate: Date;
 
     /** Filter the tasks. Display only tasks with createdFrom equal to the supplied date. */
     @Input()
@@ -54,7 +54,7 @@ export class TaskListCloudComponent extends BaseTaskListCloudComponent {
 
     /** Filter the tasks. Display only tasks with dueDate equal to the supplied date. */
     @Input()
-    dueDate: string = '';
+    dueDate: Date;
 
     /** Filter the tasks. Display only tasks with lastModifiedFrom equal to the supplied date. */
     @Input()

lib/process-services-cloud/src/lib/task/task-list/models/filter-cloud-model.ts

@@ -26,11 +26,11 @@ export class TaskQueryCloudRequestModel {
     createdFrom?: string;
     createdTo?: string;
     description?: string;
-    dueDate?: null;
-    lastModifiedFrom?: null;
-    lastModifiedTo?: null;
-    dueDateFrom?: null;
-    dueDateTo?: null;
+    dueDate?: any;
+    lastModifiedFrom?: any;
+    lastModifiedTo?: any;
+    dueDateFrom?: any;
+    dueDateTo?: any;
     id?: string;
     name?: string;
     owner?: string;

lib/process-services-cloud/tsconfig.lib.json

@@ -16,6 +16,7 @@
   "angularCompilerOptions": {
     "skipTemplateCodegen": true,
     "strictMetadataEmit": true,
-    "enableResourceInlining": true
+    "enableResourceInlining": true,
+    "strictTemplates": true
   }
 }