[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-settings/src/lib/settings.component.html

@@ -74,8 +74,8 @@
                 matInput
                 type="text"
                 [value]="getStringParamValue(param)"
-                (blur)="setParamValue(param, $event.target.value)"
+                (blur)="onParamValueChanged($event, param)"
-                (keyup.enter)="setParamValue(param, $event.target.value)"
+                (keyup.enter)="onParamValueChanged($event, param)"
               />
             </mat-form-field>
           </ng-container>

projects/aca-settings/src/lib/settings.component.ts

@@ -120,6 +120,11 @@ export class SettingsComponent implements OnInit {
     }
   }
 
+  onParamValueChanged(event: Event, param: SettingsParameterRef) {
+    const target = event.target as HTMLInputElement;
+    this.setParamValue(param, target.value);
+  }
+
   getBooleanParamValue(param: SettingsParameterRef): boolean {
     const result = this.storage.getItem(param.key);
     if (result) {

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

src/app/components/context-menu/context-menu-item.component.html

@@ -8,7 +8,7 @@
 
       <mat-menu #childMenu="matMenu">
         <ng-container
-          *ngFor="let child of actionRef.children; trackBy: trackById"
+          *ngFor="let child of actionRef.children; trackBy: trackByActionId"
         >
           <app-context-menu-item [actionRef]="child"></app-context-menu-item>
         </ng-container>

src/app/components/context-menu/context-menu-item.component.ts

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

src/app/components/context-menu/context-menu.component.html

@@ -2,7 +2,7 @@
   <div style="visibility: hidden" [matMenuTriggerFor]="rootMenu"></div>
 
   <mat-menu #rootMenu="matMenu" class="aca-context-menu" hasBackdrop="false" acaContextMenuOutsideEvent (clickOutside)="onClickOutsideEvent()">
-    <ng-container *ngFor="let entry of actions; trackBy: trackById" [ngSwitch]="entry.type">
+    <ng-container *ngFor="let entry of actions; trackBy: trackByActionId" [ngSwitch]="entry.type">
       <ng-container *ngSwitchDefault>
         <button mat-menu-item [id]="entry.id" (click)="runAction(entry.actions.click)">
           <adf-icon [value]="entry.icon"></adf-icon>
@@ -21,7 +21,7 @@
         </button>
 
         <mat-menu #childMenu="matMenu">
-          <ng-container *ngFor="let child of entry.children; trackBy: trackById">
+          <ng-container *ngFor="let child of entry.children; trackBy: trackByActionId">
             <app-context-menu-item [actionRef]="child"></app-context-menu-item>
           </ng-container>
         </mat-menu>

src/app/components/context-menu/context-menu.component.ts

@@ -32,7 +32,7 @@ import { takeUntil } from 'rxjs/operators';
 import { ContentActionRef } from '@alfresco/adf-extensions';
 import { ContextMenuOverlayRef } from './context-menu-overlay';
 import { CONTEXT_MENU_DIRECTION } from './direction.token';
-import { Directionality } from '@angular/cdk/bidi';
+import { Direction } from '@angular/cdk/bidi';
 import { AppExtensionService } from '@alfresco/aca-shared';
 
 @Component({
@@ -63,7 +63,7 @@ export class ContextMenuComponent implements OnInit, OnDestroy, AfterViewInit {
     private contextMenuOverlayRef: ContextMenuOverlayRef,
     private extensions: AppExtensionService,
     private store: Store<AppStore>,
-    @Inject(CONTEXT_MENU_DIRECTION) public direction: Directionality
+    @Inject(CONTEXT_MENU_DIRECTION) public direction: Direction
   ) {}
 
   onClickOutsideEvent() {
@@ -96,7 +96,7 @@ export class ContextMenuComponent implements OnInit, OnDestroy, AfterViewInit {
     setTimeout(() => this.trigger.openMenu(), 0);
   }
 
-  trackById(_: number, obj: { id: string }) {
+  trackByActionId(_: number, obj: ContentActionRef): string {
     return obj.id;
   }
 }

src/app/components/context-menu/context-menu.service.ts

@@ -25,7 +25,7 @@
 
 import { Injectable, Injector, ComponentRef } from '@angular/core';
 import { Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
-import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
+import { ComponentPortal } from '@angular/cdk/portal';
 import { ContextMenuOverlayRef } from './context-menu-overlay';
 import { ContextMenuComponent } from './context-menu.component';
 import { ContextmenuOverlayConfig } from './interfaces';
@@ -68,13 +68,19 @@ export class ContextMenuService {
     return containerRef.instance;
   }
 
-  private createInjector(contextmenuOverlayRef: ContextMenuOverlayRef): PortalInjector {
+  private createInjector(contextmenuOverlayRef: ContextMenuOverlayRef): Injector {
     const injectionTokens = new WeakMap();
 
     injectionTokens.set(ContextMenuOverlayRef, contextmenuOverlayRef);
     injectionTokens.set(CONTEXT_MENU_DIRECTION, this.direction);
 
-    return new PortalInjector(this.injector, injectionTokens);
+    return Injector.create({
+      parent: this.injector,
+      providers: [
+        { provide: ContextMenuOverlayRef, useValue: contextmenuOverlayRef },
+        { provide: CONTEXT_MENU_DIRECTION, useValue: this.direction }
+      ]
+    });
   }
 
   private getOverlayConfig(config: ContextmenuOverlayConfig): OverlayConfig {

src/app/components/create-menu/create-menu.component.html

@@ -37,7 +37,7 @@
   [overlapTrigger]="false"
   yPosition="below"
 >
-  <div role="menu" *ngFor="let action of createActions; trackBy: trackById">
+  <div role="menu" *ngFor="let action of createActions; trackBy: trackByActionId">
     <app-toolbar-menu-item [actionRef]="action"></app-toolbar-menu-item>
   </div>
 </mat-menu>

src/app/components/create-menu/create-menu.component.ts

@@ -63,7 +63,7 @@ export class CreateMenuComponent implements OnInit, OnDestroy {
     this.onDestroy$.complete();
   }
 
-  trackById(_: number, obj: { id: string }) {
+  trackByActionId(_: number, obj: ContentActionRef): string {
     return obj.id;
   }
 }

src/app/components/favorite-libraries/favorite-libraries.component.html

@@ -16,15 +16,15 @@
         acaDocumentList
         acaContextActions
         [display]="documentDisplayMode$ | async"
-        [node]="list"
+        [node]="$any(list)"
         [loading]="isLoading"
         selectionMode="single"
         [navigate]="false"
         [sorting]="['title', 'asc']"
         sortingMode="client"
-        (node-dblclick)="navigateTo($event.detail?.node)"
+        (node-dblclick)="handleNodeClick($event)"
         [imageResolver]="imageResolver"
-        (name-click)="navigateTo($event.detail?.node)"
+        (name-click)="handleNodeClick($event)"
       >
         <adf-custom-empty-content-template>
           <adf-empty-content
@@ -36,7 +36,7 @@
         </adf-custom-empty-content-template>
 
         <data-columns>
-          <ng-container *ngFor="let column of columns; trackBy: trackById">
+          <ng-container *ngFor="let column of columns; trackBy: trackByColumnId">
             <ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
               <data-column
                 [key]="column.key"

src/app/components/favorite-libraries/favorite-libraries.component.ts

@@ -86,6 +86,10 @@ export class FavoriteLibrariesComponent extends PageComponent implements OnInit
     }
   }
 
+  handleNodeClick(event: Event) {
+    this.navigateTo((event as CustomEvent).detail?.node);
+  }
+
   onChangePageSize(pagination: Pagination) {
     this.preferences.paginationSize = pagination.maxItems;
     this.getList(pagination);

src/app/components/favorites/favorites.component.html

@@ -22,16 +22,19 @@
         [sorting]="['modifiedAt', 'desc']"
         sortingMode="client"
         [imageResolver]="imageResolver"
-        (node-dblclick)="onNodeDoubleClick($event.detail?.node)"
+        (node-dblclick)="handleNodeClick($event)"
-        (name-click)="onNodeDoubleClick($event.detail?.node)"
+        (name-click)="handleNodeClick($event)"
       >
         <adf-custom-empty-content-template>
-          <adf-empty-content icon="star_rate" [title]="'APP.BROWSE.FAVORITES.EMPTY_STATE.TITLE'" subtitle="APP.BROWSE.FAVORITES.EMPTY_STATE.TEXT">
+          <adf-empty-content
+            icon="star_rate"
+            [title]="'APP.BROWSE.FAVORITES.EMPTY_STATE.TITLE'"
+            subtitle="APP.BROWSE.FAVORITES.EMPTY_STATE.TEXT">
           </adf-empty-content>
         </adf-custom-empty-content-template>
 
         <data-columns>
-          <ng-container *ngFor="let column of columns; trackBy: trackById">
+          <ng-container *ngFor="let column of columns; trackBy: trackByColumnId">
             <ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
               <data-column
                 [key]="column.key"

src/app/components/favorites/favorites.component.ts

@@ -101,4 +101,8 @@ export class FavoritesComponent extends PageComponent implements OnInit {
       }
     }
   }
+
+  handleNodeClick(event: Event) {
+    this.onNodeDoubleClick((event as CustomEvent).detail?.node);
+  }
 }

src/app/components/files/files.component.html

@@ -31,14 +31,14 @@
           [imageResolver]="imageResolver"
           [headerFilters]="true"
           [filterValue]="queryParams"
-          (node-dblclick)="navigateTo($event.detail?.node)"
+          (node-dblclick)="handleNodeClick($event)"
-          (name-click)="navigateTo($event.detail?.node)"
+          (name-click)="handleNodeClick($event)"
           (sorting-changed)="onSortingChanged($event)"
           (filterSelection)="onFilterSelected($event)"
           (error)="onError()"
         >
           <data-columns>
-            <ng-container *ngFor="let column of columns; trackBy: trackById">
+            <ng-container *ngFor="let column of columns; trackBy: trackByColumnId">
               <ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
                 <data-column
                   [key]="column.key"

src/app/components/files/files.component.spec.ts

@@ -96,7 +96,7 @@ describe('FilesComponent', () => {
 
     uploadService = TestBed.inject(UploadService);
     router = TestBed.inject(Router);
-    route = TestBed.get(ActivatedRoute);
+    route = TestBed.inject(ActivatedRoute);
     nodeActionsService = TestBed.inject(NodeActionsService);
     contentApi = TestBed.inject(ContentApiService);
     spyContent = spyOn(contentApi, 'getNode');

src/app/components/files/files.component.ts

@@ -193,6 +193,10 @@ export class FilesComponent extends PageComponent implements OnInit, OnDestroy {
     }
   }
 
+  handleNodeClick(event: Event) {
+    this.navigateTo((event as CustomEvent).detail?.node);
+  }
+
   onBreadcrumbNavigate(route: PathElementEntity) {
     this.documentList.resetNewFolderPagination();
 

src/app/components/header/header.component.html

@@ -14,7 +14,7 @@
   <adf-toolbar-divider></adf-toolbar-divider>
 
   <ng-container *ngFor="let actionRef of actions; trackBy: trackByActionId">
-    <aca-toolbar-action [actionRef]="actionRef" color="default">
+    <aca-toolbar-action [actionRef]="actionRef">
     </aca-toolbar-action>
   </ng-container>
 </adf-layout-header>

src/app/components/header/header.component.ts

@@ -44,7 +44,7 @@ export class AppHeaderComponent implements OnInit {
   @Input() expandedSidenav = true;
 
   appName$: Observable<string>;
-  headerColor$: Observable<string>;
+  headerColor$: Observable<any>;
   logo$: Observable<string>;
 
   actions: Array<ContentActionRef> = [];

src/app/components/info-drawer/library-metadata-tab/library-metadata-form.component.html

@@ -124,7 +124,7 @@
   </mat-card-content>
 
   <mat-card-actions align="end" *ngIf="edit && canUpdateLibrary">
-    <button mat-button color="secondary" (click)="cancel()">
+    <button mat-button (click)="cancel()">
       {{ 'LIBRARY.DIALOG.CANCEL' | translate }}
     </button>
     <button mat-button color="primary" [disabled]="form.invalid || form.pristine" (click)="update()">

src/app/components/libraries/libraries.component.html

@@ -22,8 +22,8 @@
         [sorting]="['title', 'asc']"
         sortingMode="client"
         [imageResolver]="imageResolver"
-        (node-dblclick)="navigateTo($event.detail?.node)"
+        (node-dblclick)="handleNodeClick($event)"
-        (name-click)="navigateTo($event.detail?.node)"
+        (name-click)="handleNodeClick($event)"
       >
         <adf-custom-empty-content-template>
           <adf-empty-content
@@ -35,7 +35,7 @@
         </adf-custom-empty-content-template>
 
         <data-columns>
-          <ng-container *ngFor="let column of columns; trackBy: trackById">
+          <ng-container *ngFor="let column of columns; trackBy: trackByColumnId">
             <ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
               <data-column
                 [key]="column.key"
@@ -70,7 +70,7 @@
     </div>
 
     <div class="sidebar" *ngIf="infoDrawerOpened$ | async">
-      <aca-info-drawer [node]="selection.library"></aca-info-drawer>
+      <aca-info-drawer [node]="$any(selection).library"></aca-info-drawer>
     </div>
   </aca-page-layout-content>
 </aca-page-layout>

src/app/components/libraries/libraries.component.ts

@@ -72,4 +72,8 @@ export class LibrariesComponent extends PageComponent implements OnInit {
       this.store.dispatch(new NavigateLibraryAction(node.entry.guid));
     }
   }
+
+  handleNodeClick(event: Event) {
+    this.navigateTo((event as CustomEvent).detail?.node);
+  }
 }

src/app/components/page.component.ts

@@ -25,7 +25,7 @@
 
 import { DocumentListComponent, ShareDataRow } from '@alfresco/adf-content-services';
 import { ShowHeaderMode } from '@alfresco/adf-core';
-import { ContentActionRef, SelectionState } from '@alfresco/adf-extensions';
+import { ContentActionRef, DocumentListPresetRef, SelectionState } from '@alfresco/adf-extensions';
 import { OnDestroy, OnInit, OnChanges, ViewChild, SimpleChanges, Directive } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { MinimalNodeEntity, MinimalNodeEntryEntity, NodePaging } from '@alfresco/js-api';
@@ -163,6 +163,10 @@ export abstract class PageComponent implements OnInit, OnDestroy, OnChanges {
     return obj.id;
   }
 
+  trackByColumnId(_: number, obj: DocumentListPresetRef): string {
+    return obj.id;
+  }
+
   private isOutletPreviewUrl(): boolean {
     return location.href.includes('viewer:view');
   }

src/app/components/preview/preview.component.html

@@ -10,8 +10,8 @@
     [showRightSidebar]="true"
     [allowDownload]="false"
     [allowFullScreen]="false"
-    [canNavigateBefore]="previousNodeId"
+    [canNavigateBefore]="!!previousNodeId"
-    [canNavigateNext]="nextNodeId"
+    [canNavigateNext]="!!nextNodeId"
     [overlayMode]="true"
     (showViewerChange)="onVisibilityChanged($event)"
     (navigateBefore)="onNavigateBefore($event)"

src/app/components/recent-files/recent-files.component.html

@@ -22,8 +22,8 @@
         [sorting]="['modifiedAt', 'desc']"
         sortingMode="client"
         [imageResolver]="imageResolver"
-        (node-dblclick)="onNodeDoubleClick($event.detail?.node)"
+        (node-dblclick)="handleNodeClick($event)"
-        (name-click)="onNodeDoubleClick($event.detail?.node)"
+        (name-click)="handleNodeClick($event)"
       >
         <adf-custom-empty-content-template>
           <adf-empty-content icon="access_time" [title]="'APP.BROWSE.RECENT.EMPTY_STATE.TITLE'" subtitle="APP.BROWSE.RECENT.EMPTY_STATE.TEXT">
@@ -31,7 +31,7 @@
         </adf-custom-empty-content-template>
 
         <data-columns>
-          <ng-container *ngFor="let column of columns; trackBy: trackById">
+          <ng-container *ngFor="let column of columns; trackBy: trackByColumnId">
             <ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
               <data-column
                 [key]="column.key"

src/app/components/recent-files/recent-files.component.ts

@@ -76,6 +76,10 @@ export class RecentFilesComponent extends PageComponent implements OnInit {
     }
   }
 
+  handleNodeClick(event: Event) {
+    this.onNodeDoubleClick((event as CustomEvent).detail?.node);
+  }
+
   private onFileUploadedEvent() {
     this.reload();
   }

src/app/components/search/search-libraries-results/search-libraries-results.component.html

@@ -53,11 +53,11 @@
             [sorting]="['name', 'asc']"
             [node]="data"
             [imageResolver]="imageResolver"
-            (node-dblclick)="navigateTo($event.detail?.node)"
+            (node-dblclick)="handleNodeClick($event)"
-            (name-click)="navigateTo($event.detail?.node)"
+            (name-click)="handleNodeClick($event)"
           >
             <data-columns>
-              <ng-container *ngFor="let column of columns; trackBy: trackById">
+              <ng-container *ngFor="let column of columns; trackBy: trackByColumnId">
                 <ng-container
                   *ngIf="
                     column.template && !(column.desktopOnly && isSmallScreen)

src/app/components/search/search-libraries-results/search-libraries-results.component.ts

@@ -154,4 +154,8 @@ export class SearchLibrariesResultsComponent extends PageComponent implements On
       this.store.dispatch(new NavigateLibraryAction(node.entry.guid));
     }
   }
+
+  handleNodeClick(event: Event) {
+    this.navigateTo((event as CustomEvent).detail?.node);
+  }
 }

src/app/components/search/search-results-row/search-results-row.component.ts

@@ -115,12 +115,12 @@ export class SearchResultsRowComponent implements OnInit, OnDestroy {
     return isLocked(this.node);
   }
 
-  showPreview(event: MouseEvent) {
+  showPreview(event: Event) {
     event.stopPropagation();
     this.store.dispatch(new ViewNodeAction(this.node.entry.id, { location: this.router.url }));
   }
 
-  navigate(event: MouseEvent) {
+  navigate(event: Event) {
     event.stopPropagation();
     this.store.dispatch(new NavigateToFolder(this.node));
   }

src/app/components/search/search-results/search-results.component.html

@@ -63,13 +63,13 @@
             #documentList
             acaDocumentList
             acaContextActions
-            [showHeader]="false"
+            [showHeader]="showHeader"
             [selectionMode]="'multiple'"
             [sortingMode]="'server'"
             [sorting]="sorting"
             [imageResolver]="imageResolver"
-            [node]="data"
+            [node]="$any(data)"
-            (node-dblclick)="onNodeDoubleClick($event.detail?.node)"
+            (node-dblclick)="handleNodeClick($event)"
           >
             <data-columns>
               <data-column

src/app/components/search/search-results/search-results.component.ts

@@ -40,7 +40,7 @@ import {
   SnackbarErrorAction
 } from '@alfresco/aca-shared/store';
 import { ContentManagementService } from '../../../services/content-management.service';
-import { TranslationService } from '@alfresco/adf-core';
+import { ShowHeaderMode, TranslationService } from '@alfresco/adf-core';
 import { combineLatest, Observable } from 'rxjs';
 import { AppExtensionService } from '@alfresco/aca-shared';
 import { takeUntil } from 'rxjs/operators';
@@ -65,6 +65,7 @@ export class SearchResultsComponent extends PageComponent implements OnInit {
   hasSelectedFilters = false;
   sorting = ['name', 'asc'];
   isLoading = false;
+  showHeader: ShowHeaderMode = ShowHeaderMode.Never;
 
   constructor(
     private queryBuilder: SearchQueryBuilderService,
@@ -257,6 +258,14 @@ export class SearchResultsComponent extends PageComponent implements OnInit {
     this.queryBuilder.updateSelectedConfiguration(form.index);
   }
 
+  handleNodeClick(event: Event) {
+    this.onNodeDoubleClick((event as CustomEvent).detail?.node);
+  }
+
+  hideSearchFilter() {
+    return !this.totalResults && !this.hasSelectedFilters;
+  }
+
   onPreviewClosed() {
     this.store.dispatch(new ShowInfoDrawerPreviewAction());
   }

src/app/components/shared-files/shared-files.component.html

@@ -21,8 +21,8 @@
         [sorting]="['modifiedAt', 'desc']"
         [imageResolver]="imageResolver"
         sortingMode="client"
-        (node-dblclick)="preview($event.detail?.node)"
+        (node-dblclick)="handleNodeClick($event)"
-        (name-click)="preview($event.detail?.node)"
+        (name-click)="handleNodeClick($event)"
       >
         <adf-custom-empty-content-template>
           <adf-empty-content icon="people" [title]="'APP.BROWSE.SHARED.EMPTY_STATE.TITLE'" subtitle="APP.BROWSE.SHARED.EMPTY_STATE.TEXT">
@@ -30,7 +30,7 @@
         </adf-custom-empty-content-template>
 
         <data-columns>
-          <ng-container *ngFor="let column of columns; trackBy: trackById">
+          <ng-container *ngFor="let column of columns; trackBy: trackByColumnId">
             <ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
               <data-column
                 [key]="column.key"

src/app/components/shared-files/shared-files.component.ts

@@ -75,4 +75,8 @@ export class SharedFilesComponent extends PageComponent implements OnInit {
   preview(node: MinimalNodeEntity) {
     this.showPreview(node, { location: this.router.url });
   }
+
+  handleNodeClick(event: Event) {
+    this.preview((event as CustomEvent).detail?.node);
+  }
 }

src/app/components/sidenav/components/button-menu.component.ts

@@ -45,7 +45,7 @@ export class ButtonMenuComponent implements OnInit {
     this.cd.detectChanges();
   }
 
-  trackById(_index: number, obj: { id: string }) {
+  trackById(_index: number, obj: NavBarLinkRef) {
     return obj.id;
   }
 }

src/app/components/sidenav/components/expand-menu.component.ts

@@ -42,7 +42,7 @@ export class ExpandMenuComponent implements OnInit {
     this.cd.detectChanges();
   }
 
-  trackById(_index: number, obj: { id: string }) {
+  trackById(_index: number, obj: NavBarLinkRef) {
     return obj.id;
   }
 }

src/app/components/sidenav/sidenav.component.html

@@ -5,9 +5,9 @@
     </div>
 
     <div class="section-sub-actions">
-      <div *ngFor="let group of groups; trackBy: trackById" class="section" [ngClass]="'section--' + mode">
+      <div *ngFor="let group of groups; trackBy: trackByGroupId" class="section" [ngClass]="'section--' + mode">
         <ng-container *ngSwitchCase="'expanded'">
-          <mat-list-item *ngFor="let item of group.items; trackBy: trackById">
+          <mat-list-item *ngFor="let item of group.items; trackBy: trackByLinkId">
             <ng-container *ngIf="!item.component">
               <app-expand-menu [item]="item"></app-expand-menu>
             </ng-container>
@@ -19,7 +19,7 @@
         </ng-container>
 
         <ng-container *ngSwitchCase="'collapsed'">
-          <div class="list-item" *ngFor="let item of group.items; trackBy: trackById">
+          <div class="list-item" *ngFor="let item of group.items; trackBy: trackByLinkId">
             <ng-container *ngIf="!item.component">
               <app-button-menu [item]="item"></app-button-menu>
             </ng-container>

src/app/components/sidenav/sidenav.component.ts

@@ -24,7 +24,7 @@
  */
 
 import { Component, Input, OnInit, ViewEncapsulation, OnDestroy } from '@angular/core';
-import { NavBarGroupRef } from '@alfresco/adf-extensions';
+import { NavBarGroupRef, NavBarLinkRef } from '@alfresco/adf-extensions';
 import { Store } from '@ngrx/store';
 import { AppStore, getSideNavState } from '@alfresco/aca-shared/store';
 import { Subject } from 'rxjs';
@@ -56,7 +56,11 @@ export class SidenavComponent implements OnInit, OnDestroy {
       });
   }
 
-  trackById(_: number, obj: { id: string }) {
+  trackByGroupId(_: number, obj: NavBarGroupRef): string {
+    return obj.id;
+  }
+
+  trackByLinkId(_: number, obj: NavBarLinkRef): string {
     return obj.id;
   }
 

src/app/components/toolbar/toggle-info-drawer/toggle-info-drawer.component.ts

@@ -33,7 +33,7 @@ import { ToggleInfoDrawerAction, isInfoDrawerOpened } from '@alfresco/aca-shared
   template: `
     <button
       mat-icon-button
-      [color]="(infoDrawerOpened$ | async) ? 'primary' : ''"
+      [color]="(infoDrawerOpened$ | async) ? 'primary' : null"
       [attr.aria-label]="'APP.ACTIONS.DETAILS' | translate"
       [attr.aria-expanded]="infoDrawerOpened$ | async"
       [attr.title]="'APP.ACTIONS.DETAILS' | translate"

src/app/components/trashcan/trashcan.component.html

@@ -35,7 +35,7 @@
         </adf-custom-empty-content-template>
 
         <data-columns>
-          <ng-container *ngFor="let column of columns; trackBy: trackById">
+          <ng-container *ngFor="let column of columns; trackBy: trackByColumnId">
             <ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
               <data-column
                 [key]="column.key"

src/app/components/viewer/viewer.component.html

@@ -15,8 +15,8 @@
     [allowFullScreen]="false"
     [overlayMode]="true"
     (showViewerChange)="onViewerVisibilityChanged()"
-    [canNavigateBefore]="previousNodeId"
+    [canNavigateBefore]="!!previousNodeId"
-    [canNavigateNext]="nextNodeId"
+    [canNavigateNext]="!!nextNodeId"
     (navigateBefore)="onNavigateBefore($event)"
     (navigateNext)="onNavigateNext($event)"
   >
@@ -25,13 +25,13 @@
     </adf-viewer-sidebar>
 
     <adf-viewer-open-with *ngIf="openWith.length">
-      <ng-container *ngFor="let action of openWith; trackBy: trackById">
+      <ng-container *ngFor="let action of openWith; trackBy: trackByActionId">
         <app-toolbar-menu-item [actionRef]="action"></app-toolbar-menu-item>
       </ng-container>
     </adf-viewer-open-with>
 
     <adf-viewer-toolbar-actions>
-      <ng-container *ngFor="let action of toolbarActions; trackBy: trackById">
+      <ng-container *ngFor="let action of toolbarActions; trackBy: trackByActionId">
         <aca-toolbar-action [actionRef]="action"></aca-toolbar-action>
       </ng-container>
     </adf-viewer-toolbar-actions>

src/app/components/viewer/viewer.component.ts

@@ -200,7 +200,7 @@ export class AppViewerComponent implements OnInit, OnDestroy {
     this.onDestroy$.complete();
   }
 
-  trackById(_: number, obj: { id: string }) {
+  trackByActionId(_: number, obj: ContentActionRef): string {
     return obj.id;
   }
 

src/app/dialogs/node-versions/node-versions.dialog.ts

@@ -44,7 +44,7 @@ export class NodeVersionsDialogComponent {
 
   /** Emitted when a version is restored or deleted. */
   @Output()
-  refreshEvent: EventEmitter<Node> = new EventEmitter<Node>();
+  refreshEvent = new EventEmitter<Node>();
 
   constructor(
     @Inject(MAT_DIALOG_DATA) data: any,
@@ -57,7 +57,7 @@ export class NodeVersionsDialogComponent {
     this.isTypeList = data.isTypeList !== undefined ? data.isTypeList : true;
   }
 
-  onUploadError(errorMessage: string) {
+  onUploadError(errorMessage: any) {
     this.store.dispatch(new SnackbarErrorAction(errorMessage));
   }
 

tsconfig.json

@@ -34,6 +34,7 @@
   "angularCompilerOptions": {
     "preserveWhitespaces": false,
     "fullTemplateTypeCheck": true,
-    "strictInjectionParameters": true
+    "strictInjectionParameters": true,
+    "strictTemplates": true
   }
 }