[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
This commit is contained in:
Denys Vuika
2021-06-22 16:36:06 +01:00
committed by GitHub
parent e2b8557f4b
commit 829805e201
129 changed files with 534 additions and 435 deletions

View File

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

View File

@@ -155,5 +155,4 @@ export class CardViewDateItemComponent extends BaseCardView<CardViewDateItemMode
update() {
this.cardViewUpdateService.update(<CardViewDateItemModel> { ...this.property }, this.property.value);
}
}

View File

@@ -56,7 +56,7 @@ export class SelectFilterInputComponent implements OnDestroy {
});
}
reset(event?: KeyboardEvent) {
reset(event?: Event) {
if (event) {
event.stopPropagation();
}

View File

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

View File

@@ -164,7 +164,7 @@ export class CommentsComponent implements OnChanges {
}
}
clear(event: KeyboardEvent): void {
clear(event: Event): void {
event.stopPropagation();
this.message = '';
}

View File

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

View File

@@ -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()

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -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';

View File

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

View File

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

View File

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

View File

@@ -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()

View File

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

View File

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

View File

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

View File

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