Ng16 migration (#4104)

* Updated ACA to Angular 16

* Updated Subject types to void in cases where no values was being emitted

* [ACS-8375] [ACA] [General] Selecting a checkbox gives a light green color on focus (#3937)

* [ACS-8376] [ACA] [[Manage Rules] Multiple UI issues in create rule dialog (#3943)

* [ACS-8378] Fixed inputs having fill styling throughout ACA (#3944)

* [ACS-8378] Mat form fields now have white background instead of grey

* [ACS-8378] Fixed issue where the background of the boolean mode control dropdown was appearing as white when in condition groups. Labels in create rules window are now black

* [ACS-8415] Sidenav labels are now grey (#3946)

* [ACS-8379] Fixed issue where icons in menus were coming as black after ng16 upgrade (#3935)

* refactor DI into inject() methods (#3954)

* Cleanup and remove unneeded commits and changes

* Fix eslint (#4032)

* [REVERTABLE] - this is a quick temp fix to be able to release ACA with NG16

* [MIGRATION] - added some fix after rebase

* Refactor AppEffects (#4079)

* Refactor effects to use inject() (#4080)

* Refactor effects to use inject() (#4081)

* Rebase fixes

* [ACS-8739] Fix e2e tests (#4106)

* Updated ADF deps

* Fixed unit passing mandatory value

* Updated ADF version

* Updated ADF version

* [ACS-8743] [ADW] click on search button open a blank page (#4125)

* Updating ADF dep

* Updating ADF

* Refactor injections in effects (#4137)

* Upstream dependencies

* Refactor SearchAiEffects

* Updating ADF and rebased

* Rebased and updated

* Rebased and updated

* Updating deps

* Updating deps

* Updating deps

* Rebased and updated deps

* Pushing package-lock.json

* Moved the JWT storage injection token at app level

* Updated dependencies

* Fixed unit test

* Improved solutio for token with no need to set it explicitly

* Updating dependencies

* Updated package version

* Updated ADF deps

* Use latest ADF

---------

Co-authored-by: swapnil.verma <swapnil.verma@globallogic.com>
Co-authored-by: swapnil-verma-gl <92505353+swapnil-verma-gl@users.noreply.github.com>
Co-authored-by: VitoAlbano <vito.albano.123@gmail.com>
Co-authored-by: Ehsan Rezaei <ehsan.rezaei@hyland.com>
Co-authored-by: MichalKinas <michal.kinas@hyland.com>

projects/aca-content/src/lib/components/bulk-actions-dropdown/bulk-actions-dropdown.component.ts

@@ -25,7 +25,7 @@
 import { ContentActionRef } from '@alfresco/adf-extensions';
 import { AppStore, getSearchItemsTotalCount } from '@alfresco/aca-shared/store';
 import { CommonModule } from '@angular/common';
-import { Component, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, inject, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { MatSelectModule } from '@angular/material/select';
 import { Store } from '@ngrx/store';
 import { TranslateModule } from '@ngx-translate/core';
@@ -50,11 +50,12 @@ export class BulkActionsDropdownComponent implements OnInit, OnDestroy {
   tooltip: string;
   bulkSelectControl = new FormControl();
 
-  private readonly totalItems$: Observable<number> = this.store.select(getSearchItemsTotalCount);
+  private readonly store = inject<Store<AppStore>>(Store);
+  private readonly translationService = inject(TranslationService);
+  private readonly extensions = inject(AppExtensionService);
+
   private readonly onDestroy$ = new Subject();
-
-  constructor(private store: Store<AppStore>, private translationService: TranslationService, private extensions: AppExtensionService) {}
-
+  private readonly totalItems$: Observable<number> = this.store.select(getSearchItemsTotalCount);
   ngOnInit() {
     this.totalItems$
       .pipe(
@@ -88,7 +89,7 @@ export class BulkActionsDropdownComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
-    this.onDestroy$.next();
+    this.onDestroy$.next(true);
     this.onDestroy$.complete();
   }
 

projects/aca-content/src/lib/components/context-menu/context-menu-outside-event.directive.ts

@@ -34,7 +34,7 @@ export class OutsideEventDirective implements OnInit, OnDestroy {
   private subscriptions: Subscription[] = [];
 
   @Output()
-  clickOutside: EventEmitter<null> = new EventEmitter();
+  clickOutside: EventEmitter<void> = new EventEmitter();
 
   ngOnInit() {
     this.subscriptions = this.subscriptions.concat([

projects/aca-content/src/lib/components/details/details.component.ts

@@ -67,7 +67,7 @@ import { FileSizePipe, InfoDrawerButtonsDirective } from '@alfresco/adf-core';
 export class DetailsComponent extends PageComponent implements OnInit, OnDestroy {
   nodeId: string;
   isLoading: boolean;
-  onDestroy$ = new Subject<boolean>();
+  onDestroy$ = new Subject<void>();
   activeTab = 1;
   aspectActions: Array<ContentActionRef> = [];
   nodeIcon: string;

projects/aca-content/src/lib/components/favorite-libraries/favorite-libraries.component.spec.ts

@@ -138,12 +138,12 @@ describe('FavoriteLibrariesComponent', () => {
     });
 
     it('should reload on libraryDeleted action', () => {
-      appHookService.libraryDeleted.next();
+      appHookService.libraryDeleted.next('');
       expect(contentApiService.getFavoriteLibraries).toHaveBeenCalled();
     });
 
     it('should reload on libraryUpdated action', () => {
-      appHookService.libraryUpdated.next();
+      appHookService.libraryUpdated.next({} as any);
       expect(contentApiService.getFavoriteLibraries).toHaveBeenCalled();
     });
 
@@ -158,7 +158,7 @@ describe('FavoriteLibrariesComponent', () => {
     });
 
     it('should reload on libraryLeft action', () => {
-      appHookService.libraryLeft.next();
+      appHookService.libraryLeft.next({} as any);
       expect(contentApiService.getFavoriteLibraries).toHaveBeenCalled();
     });
   });

projects/aca-content/src/lib/components/sidenav/sidenav.component.scss

@@ -79,6 +79,10 @@
         width: 100%;
         user-select: none;
 
+        .aca-action-button__label {
+          color: var(--theme-action-button-text-color);
+        }
+
         &:hover .aca-action-button__label {
           color: var(--theme-sidenav-active-text-color);
         }

projects/aca-content/src/lib/components/toolbar/toggle-favorite-library/toggle-favorite-library.component.ts

@@ -57,7 +57,7 @@ import { MatMenuModule } from '@angular/material/menu';
 })
 export class ToggleFavoriteLibraryComponent implements OnInit, OnDestroy {
   library;
-  private onDestroy$: Subject<boolean> = new Subject<boolean>();
+  private onDestroy$: Subject<void> = new Subject<void>();
 
   constructor(private store: Store<AppStore>, private appHookService: AppHookService, private router: Router) {}
 
@@ -78,7 +78,7 @@ export class ToggleFavoriteLibraryComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
-    this.onDestroy$.next(true);
+    this.onDestroy$.next();
     this.onDestroy$.complete();
   }
 

projects/aca-content/src/lib/directives/document-list.directive.spec.ts

@@ -141,14 +141,14 @@ describe('DocumentListDirective', () => {
 
   it('should reset store selection on `reload` event', () => {
     documentListDirective.ngOnInit();
-    documentListServiceMock.reload$.next();
+    documentListServiceMock.reload$.next({});
 
     expect(storeMock.dispatch).toHaveBeenCalledWith(new SetSelectedNodesAction([]));
   });
 
   it('should reset selection state on `reset` event', () => {
     documentListDirective.ngOnInit();
-    documentListServiceMock.resetSelection$.next();
+    documentListServiceMock.resetSelection$.next({});
 
     expect(storeMock.dispatch).toHaveBeenCalledWith(new SetSelectedNodesAction([]));
     expect(documentListDirective.selectedNode).toBeNull();

projects/aca-content/src/lib/services/content-management.service.spec.ts

@@ -220,7 +220,7 @@ describe('ContentManagementService', () => {
       const selection: any[] = [{ entry: { id: 'node-to-copy-id', name: 'name' } }];
 
       store.dispatch(new CopyNodesAction(selection));
-      nodeActions.contentCopied.next();
+      nodeActions.contentCopied.next({} as any);
       subject.next('');
 
       expect(nodeActions.copyNodes).toHaveBeenCalled();
@@ -608,7 +608,7 @@ describe('ContentManagementService', () => {
       } as MatSnackBarRef<SimpleSnackBar>);
     });
 
-    afterEach(() => subject.next());
+    afterEach(() => subject.next({} as any));
 
     it('should move node back to initial parent, after succeeded move', () => {
       const initialParent = 'parent-id-0';

projects/aca-content/src/lib/services/node-actions.service.spec.ts

@@ -117,7 +117,7 @@ describe('NodeActionsService', () => {
     it('should validate selection when allowableOperation has `create`', () => {
       spyOn(dialog, 'open').and.returnValue({
         afterClosed: of
-      } as MatDialogRef<any>);
+      } as unknown as MatDialogRef<any>);
       const contentEntities = [new TestNode(), { entry: { nodeId: '1234' } }];
       service.getContentNodeSelection(NodeAction.CHOOSE, contentEntities as NodeEntry[]);
 
@@ -135,7 +135,7 @@ describe('NodeActionsService', () => {
     it('should invalidate selection when allowableOperation does not have `create`', () => {
       spyOn(dialog, 'open').and.returnValue({
         afterClosed: of
-      } as MatDialogRef<any>);
+      } as unknown as MatDialogRef<any>);
       const contentEntities = [new TestNode(), { entry: { nodeId: '1234' } }];
       service.getContentNodeSelection(NodeAction.CHOOSE, contentEntities as NodeEntry[]);
 
@@ -153,7 +153,7 @@ describe('NodeActionsService', () => {
     it('should invalidate selection if isSite', () => {
       spyOn(dialog, 'open').and.returnValue({
         afterClosed: of
-      } as MatDialogRef<any>);
+      } as unknown as MatDialogRef<any>);
       const contentEntities = [new TestNode(), { entry: { nodeId: '1234' } }];
       service.getContentNodeSelection(NodeAction.CHOOSE, contentEntities as NodeEntry[]);
 
@@ -172,7 +172,7 @@ describe('NodeActionsService', () => {
     it('should validate selection if not a Site', () => {
       spyOn(dialog, 'open').and.returnValue({
         afterClosed: of
-      } as MatDialogRef<any>);
+      } as unknown as MatDialogRef<any>);
       const contentEntities = [new TestNode(), { entry: { nodeId: '1234' } }];
       service.getContentNodeSelection(NodeAction.CHOOSE, contentEntities as NodeEntry[]);
 
@@ -288,7 +288,7 @@ describe('NodeActionsService', () => {
 
       spyOn(dialog, 'open').and.callFake((_contentNodeSelectorComponent: any, data: any) => {
         dialogData = data;
-        return { componentInstance: {}, afterClosed: of } as MatDialogRef<any>;
+        return { componentInstance: {}, afterClosed: of } as unknown as MatDialogRef<any>;
       });
 
       service.copyNodes([fileToCopy, folderToCopy]);
@@ -354,7 +354,7 @@ describe('NodeActionsService', () => {
       let dialogData = null;
       const spyOnDialog = spyOn(dialog, 'open').and.callFake((_contentNodeSelectorComponent: any, data: any) => {
         dialogData = data;
-        return { componentInstance: {}, afterClosed: of } as MatDialogRef<any>;
+        return { componentInstance: {}, afterClosed: of } as unknown as MatDialogRef<any>;
       });
 
       service.copyNodes([fileToCopy, folderToCopy]);
@@ -396,7 +396,7 @@ describe('NodeActionsService', () => {
       let dialogData: any;
       spyOn(dialog, 'open').and.callFake((_contentNodeSelectorComponent: any, data: any) => {
         dialogData = data;
-        return { componentInstance: {}, afterClosed: of } as MatDialogRef<any>;
+        return { componentInstance: {}, afterClosed: of } as unknown as MatDialogRef<any>;
       });
 
       service.copyNodes([{ entry: { id: 'entry-id', name: 'entry-name' } }]);
@@ -418,7 +418,7 @@ describe('NodeActionsService', () => {
       let dialogData = null;
       spyOn(dialog, 'open').and.callFake((_contentNodeSelectorComponent: any, data: any) => {
         dialogData = data;
-        return { componentInstance: {}, afterClosed: of } as MatDialogRef<any>;
+        return { componentInstance: {}, afterClosed: of } as unknown as MatDialogRef<any>;
       });
 
       service.copyNodes([{ entry: { id: 'entry-id' } }]);

projects/aca-content/src/lib/store/effects/app.effects.ts

@@ -22,15 +22,16 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Actions, ofType, createEffect } from '@ngrx/effects';
-import { Injectable } from '@angular/core';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { inject, Injectable } from '@angular/core';
 import { map } from 'rxjs/operators';
 import { AppActionTypes, ReloadDocumentListAction, ResetSelectionAction } from '@alfresco/aca-shared/store';
 import { DocumentListService } from '@alfresco/adf-content-services';
 
 @Injectable()
 export class AppEffects {
-  constructor(private actions$: Actions, private documentListService: DocumentListService) {}
+  actions$ = inject(Actions);
+  documentListService = inject(DocumentListService);
 
   reload = createEffect(
     () =>

projects/aca-content/src/lib/store/effects/contextmenu.effects.ts

@@ -22,9 +22,9 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { ContextMenuActionTypes, ContextMenu } from '@alfresco/aca-shared/store';
-import { Injectable } from '@angular/core';
-import { Actions, ofType, createEffect } from '@ngrx/effects';
+import { ContextMenu, ContextMenuActionTypes } from '@alfresco/aca-shared/store';
+import { inject, Injectable } from '@angular/core';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
 import { map } from 'rxjs/operators';
 import { ContextMenuOverlayRef } from '../../components/context-menu/context-menu-overlay';
 import { ContextMenuService } from '../../components/context-menu/context-menu.service';
@@ -33,7 +33,8 @@ import { ContextMenuService } from '../../components/context-menu/context-menu.s
 export class ContextMenuEffects {
   private overlayRef: ContextMenuOverlayRef = null;
 
-  constructor(private contextMenuService: ContextMenuService, private actions$: Actions) {}
+  contextMenuService = inject(ContextMenuService);
+  actions$ = inject(Actions);
 
   contextMenu$ = createEffect(
     () =>

projects/aca-content/src/lib/store/effects/download.effects.ts

@@ -22,12 +22,12 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { AppStore, DownloadNodesAction, NodeActionTypes, NodeInfo, getAppSelection, getCurrentVersion } from '@alfresco/aca-shared/store';
+import { AppStore, DownloadNodesAction, getAppSelection, getCurrentVersion, NodeActionTypes, NodeInfo } from '@alfresco/aca-shared/store';
 import { DownloadZipDialogComponent } from '@alfresco/adf-content-services';
 import { NodeEntry, Version } from '@alfresco/js-api';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { Actions, ofType, createEffect } from '@ngrx/effects';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
 import { Store } from '@ngrx/store';
 import { map, take } from 'rxjs/operators';
 import { ContentApiService } from '@alfresco/aca-shared';
@@ -35,13 +35,11 @@ import { ContentUrlService } from '../../services/content-url.service';
 
 @Injectable()
 export class DownloadEffects {
-  constructor(
-    private store: Store<AppStore>,
-    private actions$: Actions,
-    private contentApi: ContentApiService,
-    private dialog: MatDialog,
-    private contentUrlService: ContentUrlService
-  ) {}
+  private store = inject(Store<AppStore>);
+  private actions$ = inject(Actions);
+  private contentApi = inject(ContentApiService);
+  private dialog = inject(MatDialog);
+  private contentUrlService = inject(ContentUrlService);
 
   downloadNode$ = createEffect(
     () =>

projects/aca-content/src/lib/store/effects/favorite.effects.ts

@@ -22,16 +22,18 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Actions, ofType, createEffect } from '@ngrx/effects';
-import { Injectable } from '@angular/core';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { inject, Injectable } from '@angular/core';
 import { map, take } from 'rxjs/operators';
-import { AppStore, NodeActionTypes, AddFavoriteAction, RemoveFavoriteAction, getAppSelection } from '@alfresco/aca-shared/store';
+import { AddFavoriteAction, AppStore, getAppSelection, NodeActionTypes, RemoveFavoriteAction } from '@alfresco/aca-shared/store';
 import { Store } from '@ngrx/store';
 import { ContentManagementService } from '../../services/content-management.service';
 
 @Injectable()
 export class FavoriteEffects {
-  constructor(private store: Store<AppStore>, private actions$: Actions, private content: ContentManagementService) {}
+  private store = inject(Store<AppStore>);
+  private actions$ = inject(Actions);
+  private content = inject(ContentManagementService);
 
   addFavorite$ = createEffect(
     () =>

projects/aca-content/src/lib/store/effects/library.effects.ts

@@ -26,15 +26,15 @@ import {
   AppStore,
   CreateLibraryAction,
   DeleteLibraryAction,
+  getAppSelection,
   LeaveLibraryAction,
   LibraryActionTypes,
   NavigateLibraryAction,
   NavigateRouteAction,
-  UpdateLibraryAction,
-  getAppSelection
+  UpdateLibraryAction
 } from '@alfresco/aca-shared/store';
 import { inject, Injectable } from '@angular/core';
-import { Actions, ofType, createEffect } from '@ngrx/effects';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
 import { Store } from '@ngrx/store';
 import { map, mergeMap, take } from 'rxjs/operators';
 import { ContentApiService } from '@alfresco/aca-shared';
@@ -44,13 +44,10 @@ import { NotificationService } from '@alfresco/adf-core';
 @Injectable()
 export class LibraryEffects {
   private notificationService = inject(NotificationService);
-
-  constructor(
-    private store: Store<AppStore>,
-    private actions$: Actions,
-    private content: ContentManagementService,
-    private contentApi: ContentApiService
-  ) {}
+  private store = inject(Store<AppStore>);
+  private actions$ = inject(Actions);
+  private content = inject(ContentManagementService);
+  private contentApi = inject(ContentApiService);
 
   deleteLibrary$ = createEffect(
     () =>

projects/aca-content/src/lib/store/effects/node.effects.ts

@@ -22,36 +22,36 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Actions, ofType, createEffect } from '@ngrx/effects';
-import { Injectable, SecurityContext } from '@angular/core';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { inject, Injectable, SecurityContext } from '@angular/core';
 import { first, map, take } from 'rxjs/operators';
 import { Store } from '@ngrx/store';
 import {
   AppStore,
-  NodeActionTypes,
-  PurgeDeletedNodesAction,
-  DeleteNodesAction,
-  UndoDeleteNodesAction,
-  CreateFolderAction,
-  EditFolderAction,
-  RestoreDeletedNodesAction,
-  ShareNodeAction,
-  ManageVersionsAction,
-  UnlockWriteAction,
-  UnshareNodesAction,
   CopyNodesAction,
-  MoveNodesAction,
-  ManagePermissionsAction,
-  PrintFileAction,
-  getCurrentFolder,
-  getAppSelection,
-  ManageAspectsAction,
-  NavigateRouteAction,
+  CreateFolderAction,
+  DeleteNodesAction,
+  EditFolderAction,
   ExpandInfoDrawerAction,
+  getAppSelection,
+  getCurrentFolder,
+  ManageAspectsAction,
+  ManagePermissionsAction,
   ManageRulesAction,
-  ShowLoaderAction,
+  ManageVersionsAction,
+  MoveNodesAction,
+  NavigateRouteAction,
+  NavigateUrlAction,
+  NodeActionTypes,
+  PrintFileAction,
+  PurgeDeletedNodesAction,
+  RestoreDeletedNodesAction,
   SetInfoDrawerStateAction,
-  NavigateUrlAction
+  ShareNodeAction,
+  ShowLoaderAction,
+  UndoDeleteNodesAction,
+  UnlockWriteAction,
+  UnshareNodesAction
 } from '@alfresco/aca-shared/store';
 import { ContentManagementService } from '../../services/content-management.service';
 import { RenditionService } from '@alfresco/adf-content-services';
@@ -60,15 +60,13 @@ import { DomSanitizer } from '@angular/platform-browser';
 
 @Injectable()
 export class NodeEffects {
-  constructor(
-    private store: Store<AppStore>,
-    private actions$: Actions,
-    private router: Router,
-    private contentService: ContentManagementService,
-    private renditionViewer: RenditionService,
-    private activatedRoute: ActivatedRoute,
-    private sanitizer: DomSanitizer
-  ) {}
+  private readonly store = inject(Store<AppStore>);
+  private readonly actions$ = inject(Actions);
+  private readonly router = inject(Router);
+  private readonly contentService = inject(ContentManagementService);
+  private readonly renditionViewer = inject(RenditionService);
+  private readonly activatedRoute = inject(ActivatedRoute);
+  private readonly sanitizer = inject(DomSanitizer);
 
   shareNode$ = createEffect(
     () =>

projects/aca-content/src/lib/store/effects/search-ai.effects.ts

@@ -22,7 +22,7 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
 import { SearchAiActionTypes, SearchByTermAiAction, ToggleAISearchInput } from '@alfresco/aca-shared/store';
 import { map } from 'rxjs/operators';
@@ -32,8 +32,9 @@ import { Params } from '@angular/router';
 
 @Injectable()
 export class SearchAiEffects {
-  constructor(private actions$: Actions, private searchNavigationService: SearchAiNavigationService, private searchAiService: SearchAiService) {}
-
+  private actions$ = inject(Actions);
+  private searchNavigationService = inject(SearchAiNavigationService);
+  private searchAiService = inject(SearchAiService);
   searchByTerm$ = createEffect(
     () =>
       this.actions$.pipe(

projects/aca-content/src/lib/store/effects/template.effects.ts

@@ -22,23 +22,23 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Actions, ofType, createEffect } from '@ngrx/effects';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
 import { inject, Injectable } from '@angular/core';
-import { map, switchMap, debounceTime, take, catchError } from 'rxjs/operators';
+import { catchError, debounceTime, map, switchMap, take } from 'rxjs/operators';
 import { Store } from '@ngrx/store';
 import {
-  FileFromTemplate,
-  FolderFromTemplate,
+  AppStore,
   CreateFromTemplate,
   CreateFromTemplateSuccess,
-  TemplateActionTypes,
+  FileFromTemplate,
+  FolderFromTemplate,
   getCurrentFolder,
-  AppStore
+  TemplateActionTypes
 } from '@alfresco/aca-shared/store';
 import { NodeTemplateService, TemplateDialogConfig } from '../../services/node-template.service';
 import { NotificationService } from '@alfresco/adf-core';
 import { from, Observable, of } from 'rxjs';
-import { NodeEntry, NodeBodyUpdate, Node, NodesApi } from '@alfresco/js-api';
+import { Node, NodeBodyUpdate, NodeEntry, NodesApi } from '@alfresco/js-api';
 import { MatDialog } from '@angular/material/dialog';
 import { AlfrescoApiService, DocumentListService } from '@alfresco/adf-content-services';
 
@@ -53,13 +53,11 @@ export class TemplateEffects {
     return this._nodesApi;
   }
 
-  constructor(
-    private matDialog: MatDialog,
-    private store: Store<AppStore>,
-    private apiService: AlfrescoApiService,
-    private actions$: Actions,
-    private nodeTemplateService: NodeTemplateService
-  ) {}
+  matDialog = inject(MatDialog);
+  store = inject(Store<AppStore>);
+  apiService = inject(AlfrescoApiService);
+  actions$ = inject(Actions);
+  nodeTemplateService = inject(NodeTemplateService);
 
   fileFromTemplate$ = createEffect(
     () =>

projects/aca-content/src/lib/store/effects/upload.effects.ts

@@ -24,22 +24,22 @@
 
 import {
   AppStore,
+  getCurrentFolder,
   UnlockWriteAction,
   UploadActionTypes,
   UploadFilesAction,
   UploadFileVersionAction,
-  UploadFolderAction,
-  getCurrentFolder
+  UploadFolderAction
 } from '@alfresco/aca-shared/store';
 import { FileUtils, NotificationService } from '@alfresco/adf-core';
 import { inject, Injectable, NgZone, RendererFactory2 } from '@angular/core';
-import { Actions, ofType, createEffect } from '@ngrx/effects';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
 import { Store } from '@ngrx/store';
 import { of } from 'rxjs';
 import { catchError, map, take } from 'rxjs/operators';
 import { ContentManagementService } from '../../services/content-management.service';
 import { Node } from '@alfresco/js-api';
-import { UploadService, FileModel } from '@alfresco/adf-content-services';
+import { FileModel, UploadService } from '@alfresco/adf-content-services';
 
 @Injectable()
 export class UploadEffects {
@@ -50,15 +50,14 @@ export class UploadEffects {
   private readonly fileVersionInput: HTMLInputElement;
   private readonly uploadMenuButtonSelector = 'app-toolbar-menu button[id="app.toolbar.upload"]';
 
-  constructor(
-    private store: Store<AppStore>,
-    private actions$: Actions,
-    private ngZone: NgZone,
-    private uploadService: UploadService,
-    rendererFactory: RendererFactory2,
-    private contentService: ContentManagementService
-  ) {
-    const renderer = rendererFactory.createRenderer(null, null);
+  store = inject(Store<AppStore>);
+  actions$ = inject(Actions);
+  ngZone = inject(NgZone);
+  uploadService = inject(UploadService);
+  contentService = inject(ContentManagementService);
+
+  constructor() {
+    const renderer = inject(RendererFactory2).createRenderer(null, null);
 
     this.fileInput = renderer.createElement('input') as HTMLInputElement;
     this.fileInput.id = 'app-upload-files';

projects/aca-content/src/lib/store/effects/viewer.effects.ts

@@ -22,22 +22,22 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Actions, ofType, createEffect } from '@ngrx/effects';
-import { Injectable } from '@angular/core';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { inject, Injectable } from '@angular/core';
 import { map, take, tap } from 'rxjs/operators';
 import {
   AppStore,
+  FullscreenViewerAction,
+  getAppSelection,
+  getCurrentFolder,
+  PluginPreviewAction,
   ViewerActionTypes,
   ViewFileAction,
   ViewNodeAction,
-  getCurrentFolder,
-  getAppSelection,
-  FullscreenViewerAction,
-  ViewNodeVersionAction,
-  PluginPreviewAction
+  ViewNodeVersionAction
 } from '@alfresco/aca-shared/store';
-import { Router, UrlTree, UrlSegmentGroup, PRIMARY_OUTLET, UrlSegment } from '@angular/router';
-import { Store, createSelector } from '@ngrx/store';
+import { PRIMARY_OUTLET, Router, UrlSegment, UrlSegmentGroup, UrlTree } from '@angular/router';
+import { createSelector, Store } from '@ngrx/store';
 import { AppExtensionService } from '@alfresco/aca-shared';
 import { MatDialog } from '@angular/material/dialog';
 
@@ -48,13 +48,11 @@ export const fileToPreview = createSelector(getAppSelection, getCurrentFolder, (
 
 @Injectable()
 export class ViewerEffects {
-  constructor(
-    private store: Store<AppStore>,
-    private actions$: Actions,
-    private router: Router,
-    private extensions: AppExtensionService,
-    private dialog: MatDialog
-  ) {}
+  private store = inject(Store<AppStore>);
+  private actions$ = inject(Actions);
+  private router = inject(Router);
+  private extensions = inject(AppExtensionService);
+  private dialog = inject(MatDialog);
 
   fullscreenViewer$ = createEffect(
     () =>

projects/aca-content/src/lib/ui/theme.scss

@@ -6,6 +6,10 @@
 @include custom-theme($custom-theme);
 @include mat.core;
 
+:root {
+  --mdc-filled-text-field-container-color: transparent;
+}
+
 mat-toolbar {
   color: var(--adf-theme-foreground-text-color-054);
 }
@@ -15,7 +19,6 @@ mat-toolbar {
 }
 
 #{$mat-text-field-filled}:not(#{$mat-text-field-disabled}) {
-  background-color: transparent;
   padding: 0;
 }
 
@@ -308,9 +311,11 @@ adf-dynamic-component {
   }
 }
 
-#{$mat-menu-item} #{$mat-icon-no-color},
-#{$mat-mdc-submenu-icon} {
-  color: var(--theme-text-color);
+#{$mat-menu-item} #{$mat-icon} {
+  &#{$mat-icon-no-color},
+  &#{$mat-mdc-submenu-icon} {
+    color: var(--theme-text-color);
+  }
 }
 
 #{$mat-notched-outline-trailing},