[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/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 {

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

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>

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>

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>

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>

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"

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

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