[ADF-5433] enable strict mode for angular templates (#2191)

* enable strict mode for angular templates

* update formatting

* fix lint

* fix formatting

* remove deprecated method

* upgrade to latest ADF

* restore error handler

projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.html

@@ -9,7 +9,7 @@
   >
     <adf-toolbar class="adf-toolbar--inline" info-drawer-buttons>
       <ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
-        <aca-toolbar-action [actionRef]="entry" [color]="entry?.color"></aca-toolbar-action>
+        <aca-toolbar-action [actionRef]="entry" [color]="getEntryColor(entry)"></aca-toolbar-action>
       </ng-container>
     </adf-toolbar>
 
@@ -19,7 +19,7 @@
       [label]="tab.title"
     >
       <adf-dynamic-tab
-        [node]="displayNode"
+        [node]="$any(displayNode)"
         [id]="tab.component"
         [attr.data-automation-id]="tab.component"
       >

projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.ts

@@ -32,6 +32,7 @@ import { AppExtensionService } from '../../services/app.extension.service';
 import { ContentApiService } from '../../services/content-api.service';
 import { takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
+import { ThemePalette } from '@angular/material/core';
 @Component({
   selector: 'aca-info-drawer',
   templateUrl: './info-drawer.component.html'
@@ -99,6 +100,10 @@ export class InfoDrawerComponent implements OnChanges, OnInit, OnDestroy {
     return action.id;
   }
 
+  getEntryColor(entry: any): ThemePalette {
+    return entry?.color;
+  }
+
   private close() {
     this.store.dispatch(new ToggleInfoDrawerAction());
   }

projects/aca-shared/src/lib/components/tool-bar/toolbar-action/toolbar-action.component.ts

@@ -25,6 +25,8 @@
 
 import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input, DoCheck, ChangeDetectorRef } from '@angular/core';
 import { ContentActionRef } from '@alfresco/adf-extensions';
+import { ToolbarButtonType } from '../toolbar-button/toolbar-button.component';
+import { ThemePalette } from '@angular/material/core';
 
 @Component({
   selector: 'aca-toolbar-action',
@@ -36,10 +38,10 @@ import { ContentActionRef } from '@alfresco/adf-extensions';
 })
 export class ToolbarActionComponent implements DoCheck {
   @Input()
-  type = 'icon-button';
+  type: ToolbarButtonType = ToolbarButtonType.ICON_BUTTON;
 
   @Input()
-  color = '';
+  color: ThemePalette;
 
   @Input()
   actionRef: ContentActionRef;

projects/aca-shared/src/lib/components/tool-bar/toolbar-button/toolbar-button.component.ts

@@ -26,6 +26,7 @@
 import { Component, Input, ViewEncapsulation } from '@angular/core';
 import { ContentActionRef } from '@alfresco/adf-extensions';
 import { AppExtensionService } from '../../../services/app.extension.service';
+import { ThemePalette } from '@angular/material/core';
 
 export enum ToolbarButtonType {
   ICON_BUTTON = 'icon-button',
@@ -43,7 +44,7 @@ export class ToolbarButtonComponent {
   type: ToolbarButtonType = ToolbarButtonType.ICON_BUTTON;
 
   @Input()
-  color = '';
+  color: ThemePalette;
 
   @Input()
   actionRef: ContentActionRef;

projects/aca-shared/src/lib/components/tool-bar/toolbar-menu-item/toolbar-menu-item.component.html

@@ -6,7 +6,7 @@
     </button>
 
     <mat-menu #childMenu="matMenu" class="app-create-menu__sub-menu">
-      <ng-container *ngFor="let child of actionRef.children; trackBy: trackById">
+      <ng-container *ngFor="let child of actionRef.children; trackBy: trackByActionId">
         <app-toolbar-menu-item [actionRef]="child"></app-toolbar-menu-item>
       </ng-container>
     </mat-menu>
@@ -23,7 +23,7 @@
   <ng-container *ngSwitchDefault>
     <button
       [id]="actionRef.id"
-      role="menuItem"
+      role="menuitem"
       mat-menu-item
       [role]="'menuitem'"
       [disabled]="actionRef.disabled"

projects/aca-shared/src/lib/components/tool-bar/toolbar-menu-item/toolbar-menu-item.component.ts

@@ -56,7 +56,7 @@ export class ToolbarMenuItemComponent {
     return !!(actionRef && actionRef.actions && actionRef.actions.click);
   }
 
-  trackById(_: number, obj: { id: string }) {
+  trackByActionId(_: number, obj: ContentActionRef): string {
     return obj.id;
   }
 }

projects/aca-shared/src/lib/components/tool-bar/toolbar-menu/toolbar-menu.component.html

@@ -11,7 +11,7 @@
 </button>
 
 <mat-menu #menu="matMenu" [overlapTrigger]="false">
-  <ng-container *ngFor="let child of actionRef.children; trackBy: trackById">
+  <ng-container *ngFor="let child of actionRef.children; trackBy: trackByActionId">
     <ng-container [ngSwitch]="child.type">
       <ng-container *ngSwitchCase="'custom'">
         <adf-dynamic-component [id]="child.component" [data]="child.data"></adf-dynamic-component>

projects/aca-shared/src/lib/components/tool-bar/toolbar-menu/toolbar-menu.component.ts

@@ -26,6 +26,7 @@
 import { Component, Input, ViewEncapsulation, HostListener, ViewChild } from '@angular/core';
 import { ContentActionRef } from '@alfresco/adf-extensions';
 import { MatMenuTrigger } from '@angular/material/menu';
+import { ThemePalette } from '@angular/material/core';
 
 @Component({
   selector: 'app-toolbar-menu',
@@ -38,16 +39,17 @@ export class ToolbarMenuComponent {
   actionRef: ContentActionRef;
 
   @Input()
-  color = '';
+  color: ThemePalette;
 
-  @ViewChild('matTrigger') matTrigger: MatMenuTrigger;
+  @ViewChild('matTrigger')
+  matTrigger: MatMenuTrigger;
 
   @HostListener('document:keydown.Escape')
   handleKeydownEscape() {
     this.matTrigger.closeMenu();
   }
 
-  trackById(_: number, obj: { id: string }) {
+  trackByActionId(_: number, obj: ContentActionRef): string {
     return obj.id;
   }
 }