[AAE-11496] Move 'content-plugin' to projects folder as 'aca-content' (#2817)

* [AAE-11496] Move content-plugin to projects

* Fix unit test

projects/aca-content/src/lib/aca-content.module.ts

@@ -0,0 +1,299 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { HammerModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import {
+  TRANSLATION_PROVIDER,
+  CoreModule,
+  AppConfigService,
+  DebugAppConfigService,
+  AuthGuardEcm,
+  LanguagePickerComponent,
+  NotificationHistoryComponent,
+  UserInfoComponent
+} from '@alfresco/adf-core';
+import {
+  ContentModule,
+  ContentVersionService,
+  LibraryNameColumnComponent,
+  LibraryRoleColumnComponent,
+  LibraryStatusColumnComponent,
+  TrashcanNameColumnComponent
+} from '@alfresco/adf-content-services';
+import { ExtensionsDataLoaderGuard, RouterExtensionService, SharedModule } from '@alfresco/aca-shared';
+import * as rules from '@alfresco/aca-shared/rules';
+
+import { FilesComponent } from './components/files/files.component';
+import { LibrariesComponent } from './components/libraries/libraries.component';
+import { FavoriteLibrariesComponent } from './components/favorite-libraries/favorite-libraries.component';
+import { ViewProfileModule } from './components/view-profile/view-profile.module';
+
+import { AppStoreModule } from './store/app-store.module';
+import { MaterialModule } from './material.module';
+import { CoreExtensionsModule } from './extensions/core.extensions.module';
+import { AppInfoDrawerModule } from './components/info-drawer/info.drawer.module';
+import { DirectivesModule } from './directives/directives.module';
+import { ContextMenuModule } from './components/context-menu/context-menu.module';
+import { ExtensionService, ExtensionsModule } from '@alfresco/adf-extensions';
+import { AppToolbarModule } from './components/toolbar/toolbar.module';
+import { AppCreateMenuModule } from './components/create-menu/create-menu.module';
+import { AppSidenavModule } from './components/sidenav/sidenav.module';
+import { AppCommonModule } from './components/common/common.module';
+import { AppLayoutModule } from './components/layout/layout.module';
+import { AppSearchInputModule } from './components/search/search-input.module';
+import { DocumentListCustomComponentsModule } from './components/dl-custom-components/document-list-custom-components.module';
+import { AppSearchResultsModule } from './components/search/search-results.module';
+import { AppLoginModule } from './components/login/login.module';
+import { AppHeaderModule } from './components/header/header.module';
+import { AppNodeVersionModule } from './components/node-version/node-version.module';
+import { FavoritesComponent } from './components/favorites/favorites.component';
+import { RecentFilesComponent } from './components/recent-files/recent-files.component';
+import { SharedFilesComponent } from './components/shared-files/shared-files.component';
+import { CreateFromTemplateDialogComponent } from './dialogs/node-template/create-from-template.dialog';
+import { DetailsComponent } from './components/details/details.component';
+import { ContentUrlService } from './services/content-url.service';
+import { HomeComponent } from './components/home/home.component';
+
+import { CommonModule, registerLocaleData } from '@angular/common';
+import localeFr from '@angular/common/locales/fr';
+import localeDe from '@angular/common/locales/de';
+import localeIt from '@angular/common/locales/it';
+import localeEs from '@angular/common/locales/es';
+import localeJa from '@angular/common/locales/ja';
+import localeNl from '@angular/common/locales/nl';
+import localePt from '@angular/common/locales/pt';
+import localeNb from '@angular/common/locales/nb';
+import localeRu from '@angular/common/locales/ru';
+import localeCh from '@angular/common/locales/zh';
+import localeAr from '@angular/common/locales/ar';
+import localeCs from '@angular/common/locales/cs';
+import localePl from '@angular/common/locales/pl';
+import localeFi from '@angular/common/locales/fi';
+import localeDa from '@angular/common/locales/da';
+import localeSv from '@angular/common/locales/sv';
+import { LocationLinkComponent } from './components/common/location-link/location-link.component';
+import { LogoutComponent } from './components/common/logout/logout.component';
+import { ToggleSharedComponent } from './components/common/toggle-shared/toggle-shared.component';
+import { CustomNameColumnComponent } from './components/dl-custom-components/name-column/name-column.component';
+import { AppHeaderComponent } from './components/header/header.component';
+import { CommentsTabComponent } from './components/info-drawer/comments-tab/comments-tab.component';
+import { LibraryMetadataTabComponent } from './components/info-drawer/library-metadata-tab/library-metadata-tab.component';
+import { MetadataTabComponent } from './components/info-drawer/metadata-tab/metadata-tab.component';
+import { VersionsTabComponent } from './components/info-drawer/versions-tab/versions-tab.component';
+import { PreviewComponent } from './components/preview/preview.component';
+import { DocumentDisplayModeComponent } from './components/toolbar/document-display-mode/document-display-mode.component';
+import { ToggleEditOfflineComponent } from './components/toolbar/toggle-edit-offline/toggle-edit-offline.component';
+import { ToggleFavoriteLibraryComponent } from './components/toolbar/toggle-favorite-library/toggle-favorite-library.component';
+import { ToggleFavoriteComponent } from './components/toolbar/toggle-favorite/toggle-favorite.component';
+import { ToggleInfoDrawerComponent } from './components/toolbar/toggle-info-drawer/toggle-info-drawer.component';
+import { ToggleJoinLibraryButtonComponent } from './components/toolbar/toggle-join-library/toggle-join-library-button.component';
+import { ToggleJoinLibraryMenuComponent } from './components/toolbar/toggle-join-library/toggle-join-library-menu.component';
+import { ViewNodeComponent } from './components/toolbar/view-node/view-node.component';
+import { CONTENT_ROUTES } from './aca-content.routes';
+import { RouterModule } from '@angular/router';
+import { UploadFilesDialogComponent } from './components/upload-files-dialog/upload-files-dialog.component';
+import { SidenavWrapperComponent } from './components/sidenav/sidenav-wrapper/sidenav-wrapper.component';
+import { AppLayoutComponent } from './components/layout/app-layout/app-layout.component';
+
+registerLocaleData(localeFr);
+registerLocaleData(localeDe);
+registerLocaleData(localeIt);
+registerLocaleData(localeEs);
+registerLocaleData(localeJa);
+registerLocaleData(localeNl);
+registerLocaleData(localePt);
+registerLocaleData(localeNb);
+registerLocaleData(localeRu);
+registerLocaleData(localeCh);
+registerLocaleData(localeAr);
+registerLocaleData(localeCs);
+registerLocaleData(localePl);
+registerLocaleData(localeFi);
+registerLocaleData(localeDa);
+registerLocaleData(localeSv);
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    ContentModule.forRoot(),
+    RouterModule.forChild(CONTENT_ROUTES),
+    CoreModule.forChild(),
+    ExtensionsModule.forChild(),
+    CoreExtensionsModule.forChild(),
+    SharedModule,
+    MaterialModule,
+    AppStoreModule,
+    AppLoginModule,
+    AppCommonModule,
+    AppLayoutModule,
+    DirectivesModule,
+    ContextMenuModule,
+    AppInfoDrawerModule,
+    AppToolbarModule,
+    AppSidenavModule,
+    AppCreateMenuModule,
+    DocumentListCustomComponentsModule,
+    AppSearchInputModule,
+    AppSearchResultsModule,
+    AppHeaderModule,
+    AppNodeVersionModule,
+    HammerModule,
+    ViewProfileModule
+  ],
+  declarations: [
+    FilesComponent,
+    DetailsComponent,
+    LibrariesComponent,
+    FavoriteLibrariesComponent,
+    FavoritesComponent,
+    RecentFilesComponent,
+    SharedFilesComponent,
+    CreateFromTemplateDialogComponent,
+    HomeComponent,
+    UploadFilesDialogComponent
+  ],
+  providers: [
+    { provide: AppConfigService, useClass: DebugAppConfigService },
+    { provide: ContentVersionService, useClass: ContentUrlService },
+    {
+      provide: TRANSLATION_PROVIDER,
+      multi: true,
+      useValue: {
+        name: 'app',
+        source: 'assets'
+      }
+    }
+  ]
+})
+export class ContentServiceExtensionModule {
+  constructor(public extensions: ExtensionService, public routeExtensionService: RouterExtensionService) {
+    extensions.setAuthGuards({
+      'app.auth': AuthGuardEcm,
+      'app.extensions.dataLoaderGuard': ExtensionsDataLoaderGuard
+    });
+
+    extensions.setComponents({
+      'app.layout.main': AppLayoutComponent,
+      'app.layout.header': AppHeaderComponent,
+      'app.layout.sidenav': SidenavWrapperComponent,
+      'app.shell.sibling': UploadFilesDialogComponent,
+      'app.components.tabs.metadata': MetadataTabComponent,
+      'app.components.tabs.library.metadata': LibraryMetadataTabComponent,
+      'app.components.tabs.comments': CommentsTabComponent,
+      'app.components.tabs.versions': VersionsTabComponent,
+      'app.components.preview': PreviewComponent,
+      'app.toolbar.toggleInfoDrawer': ToggleInfoDrawerComponent,
+      'app.toolbar.toggleFavorite': ToggleFavoriteComponent,
+      'app.toolbar.toggleFavoriteLibrary': ToggleFavoriteLibraryComponent,
+      'app.toolbar.toggleJoinLibrary': ToggleJoinLibraryButtonComponent,
+      'app.toolbar.cardView': DocumentDisplayModeComponent,
+      'app.menu.toggleJoinLibrary': ToggleJoinLibraryMenuComponent,
+      'app.shared-link.toggleSharedLink': ToggleSharedComponent,
+      'app.columns.name': CustomNameColumnComponent,
+      'app.columns.libraryName': LibraryNameColumnComponent,
+      'app.columns.libraryRole': LibraryRoleColumnComponent,
+      'app.columns.libraryStatus': LibraryStatusColumnComponent,
+      'app.columns.trashcanName': TrashcanNameColumnComponent,
+      'app.columns.location': LocationLinkComponent,
+      'app.toolbar.toggleEditOffline': ToggleEditOfflineComponent,
+      'app.toolbar.viewNode': ViewNodeComponent,
+      'app.languagePicker': LanguagePickerComponent,
+      'app.logout': LogoutComponent,
+      'app.user': UserInfoComponent,
+      'app.notification-center': NotificationHistoryComponent
+    });
+
+    extensions.setEvaluators({
+      canCopyNode: rules.canCopyNode,
+      canToggleJoinLibrary: rules.canToggleJoinLibrary,
+      canEditFolder: rules.canEditFolder,
+      isTrashcanItemSelected: rules.isTrashcanItemSelected,
+      canViewFile: rules.canViewFile,
+      canLeaveLibrary: rules.canLeaveLibrary,
+      canToggleSharedLink: rules.canToggleSharedLink,
+      canShowInfoDrawer: rules.canShowInfoDrawer,
+      canManageFileVersions: rules.canManageFileVersions,
+      canManagePermissions: rules.canManagePermissions,
+      canToggleEditOffline: rules.canToggleEditOffline,
+      canToggleFavorite: rules.canToggleFavorite,
+      isLibraryManager: rules.isLibraryManager,
+      canEditAspects: rules.canEditAspects,
+      canInfoPreview: rules.canInfoPreview,
+      showInfoSelectionButton: rules.showInfoSelectionButton,
+
+      'app.selection.canDelete': rules.canDeleteSelection,
+      'app.selection.file.canUnlock': rules.canUnlockFile,
+      'app.selection.file.canLock': rules.canLockFile,
+      'app.selection.canDownload': rules.canDownloadSelection,
+      'app.selection.notEmpty': rules.hasSelection,
+      'app.selection.canUnshare': rules.canUnshareNodes,
+      'app.selection.canAddFavorite': rules.canAddFavorite,
+      'app.selection.canRemoveFavorite': rules.canRemoveFavorite,
+      'app.selection.first.canUpdate': rules.canUpdateSelectedNode,
+      'app.selection.file': rules.hasFileSelected,
+      'app.selection.file.canShare': rules.canShareFile,
+      'app.selection.file.isShared': rules.isShared,
+      'app.selection.file.isLocked': rules.hasLockedFiles,
+      'app.selection.file.isLockOwner': rules.isUserWriteLockOwner,
+      'app.selection.file.canUploadVersion': rules.canUploadVersion,
+      'app.selection.library': rules.hasLibrarySelected,
+      'app.selection.isPrivateLibrary': rules.isPrivateLibrary,
+      'app.selection.hasLibraryRole': rules.hasLibraryRole,
+      'app.selection.hasNoLibraryRole': rules.hasNoLibraryRole,
+      'app.selection.folder': rules.hasFolderSelected,
+      'app.selection.folder.canUpdate': rules.canUpdateSelectedFolder,
+
+      'app.navigation.folder.canCreate': rules.canCreateFolder,
+      'app.navigation.folder.canUpload': rules.canUpload,
+      'app.navigation.isTrashcan': rules.isTrashcan,
+      'app.navigation.isNotTrashcan': rules.isNotTrashcan,
+      'app.navigation.isLibraries': rules.isLibraries,
+      'app.navigation.isLibraryFiles': rules.isLibraryFiles,
+      'app.navigation.isPersonalFiles': rules.isPersonalFiles,
+      'app.navigation.isNotLibraries': rules.isNotLibraries,
+      'app.navigation.isSharedFiles': rules.isSharedFiles,
+      'app.navigation.isNotSharedFiles': rules.isNotSharedFiles,
+      'app.navigation.isFavorites': rules.isFavorites,
+      'app.navigation.isNotFavorites': rules.isNotFavorites,
+      'app.navigation.isRecentFiles': rules.isRecentFiles,
+      'app.navigation.isNotRecentFiles': rules.isNotRecentFiles,
+      'app.navigation.isSearchResults': rules.isSearchResults,
+      'app.navigation.isNotSearchResults': rules.isNotSearchResults,
+      'app.navigation.isPreview': rules.isPreview,
+      'app.navigation.isSharedPreview': rules.isSharedPreview,
+      'app.navigation.isFavoritesPreview': rules.isFavoritesPreview,
+      'app.navigation.isSharedFileViewer': rules.isSharedFileViewer,
+
+      'repository.isQuickShareEnabled': rules.hasQuickShareEnabled,
+      'user.isAdmin': rules.isAdmin,
+      'app.canShowLogout': rules.canShowLogout,
+      'app.isContentServiceEnabled': rules.isContentServiceEnabled
+    });
+  }
+}

projects/aca-content/src/lib/aca-content.routes.ts

@@ -0,0 +1,575 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { AppLayoutComponent } from './components/layout/app-layout/app-layout.component';
+import { FilesComponent } from './components/files/files.component';
+import { LibrariesComponent } from './components/libraries/libraries.component';
+import { FavoriteLibrariesComponent } from './components/favorite-libraries/favorite-libraries.component';
+import { SearchResultsComponent } from './components/search/search-results/search-results.component';
+import { SearchLibrariesResultsComponent } from './components/search/search-libraries-results/search-libraries-results.component';
+import { AppSharedRuleGuard, GenericErrorComponent, ExtensionRoute, ExtensionsDataLoaderGuard } from '@alfresco/aca-shared';
+import { AuthGuard, BlankPageComponent } from '@alfresco/adf-core';
+import { FavoritesComponent } from './components/favorites/favorites.component';
+import { RecentFilesComponent } from './components/recent-files/recent-files.component';
+import { SharedFilesComponent } from './components/shared-files/shared-files.component';
+import { DetailsComponent } from './components/details/details.component';
+import { HomeComponent } from './components/home/home.component';
+import { ViewProfileComponent } from './components/view-profile/view-profile.component';
+import { ViewProfileRuleGuard } from './components/view-profile/view-profile.guard';
+import { LoginComponent } from './components/login/login.component';
+import { Route } from '@angular/router';
+
+export const CONTENT_ROUTES: ExtensionRoute[] = [
+  {
+    path: 'blank',
+    component: BlankPageComponent
+  },
+  {
+    path: 'preview/s/:id',
+    loadChildren: () => import('./components/shared-link-view/shared-link-view.module').then((m) => m.AppSharedLinkViewModule)
+  },
+  {
+    path: 'login',
+    component: LoginComponent,
+    data: {
+      title: 'APP.SIGN_IN'
+    }
+  },
+  {
+    path: 'view',
+    component: AppLayoutComponent,
+    children: [
+      {
+        path: ':nodeId',
+        outlet: 'viewer',
+        children: [
+          {
+            path: '',
+            loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
+          }
+        ]
+      }
+    ]
+  }
+];
+
+export const CONTENT_LAYOUT_ROUTES: Route = {
+  path: '',
+  canActivate: [ExtensionsDataLoaderGuard],
+  children: [
+    {
+      path: 'profile',
+      canActivate: [ViewProfileRuleGuard],
+      component: ViewProfileComponent
+    },
+    {
+      path: '',
+      component: HomeComponent
+    },
+    {
+      path: 'personal-files',
+      children: [
+        {
+          path: '',
+          component: FilesComponent,
+          data: {
+            sortingPreferenceKey: 'personal-files',
+            title: 'APP.BROWSE.PERSONAL.TITLE',
+            defaultNodeId: '-my-'
+          }
+        },
+        {
+          path: 'details/:nodeId',
+          children: [
+            {
+              path: '',
+              component: DetailsComponent,
+              data: {
+                navigateSource: 'personal-files'
+              }
+            },
+            {
+              path: ':activeTab',
+              component: DetailsComponent,
+              data: {
+                title: 'APP.BROWSE.PERSONAL.PERMISSIONS.TITLE',
+                navigateSource: 'personal-files'
+              }
+            }
+          ]
+        },
+        // deprecated, backwards compatibility with ACA 1.8
+        {
+          path: 'preview/:nodeId',
+          loadChildren: () => import('./components/preview/preview.module').then((m) => m.PreviewModule),
+          data: {
+            navigateSource: 'personal-files'
+          }
+        },
+        {
+          path: 'view/:nodeId',
+          outlet: 'viewer',
+          children: [
+            {
+              path: '',
+              data: {
+                navigateSource: 'personal-files'
+              },
+              loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
+            }
+          ]
+        },
+        {
+          path: 'view/:nodeId/:versionId',
+          outlet: 'viewer',
+          children: [
+            {
+              path: '',
+              data: {
+                navigateSource: 'personal-files'
+              },
+              loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
+            }
+          ]
+        }
+      ]
+    },
+    {
+      path: 'personal-files/:folderId',
+      children: [
+        {
+          path: '',
+          component: FilesComponent,
+          data: {
+            title: 'APP.BROWSE.PERSONAL.TITLE',
+            sortingPreferenceKey: 'personal-files'
+          }
+        },
+        {
+          path: 'view/:nodeId/:versionId',
+          outlet: 'viewer',
+          children: [
+            {
+              path: '',
+              data: {
+                navigateSource: 'personal-files'
+              },
+              loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
+            }
+          ]
+        },
+        // deprecated, backwards compatibility with ACA 1.8
+        {
+          path: 'preview/:nodeId',
+          loadChildren: () => import('./components/preview/preview.module').then((m) => m.PreviewModule),
+          data: {
+            navigateSource: 'personal-files'
+          }
+        },
+        // deprecated, backwards compatibility with ACA 1.8
+        {
+          path: ':folderId/preview/:nodeId',
+          loadChildren: () => import('./components/preview/preview.module').then((m) => m.PreviewModule),
+          data: {
+            navigateSource: 'personal-files'
+          }
+        },
+        {
+          path: 'view/:nodeId',
+          outlet: 'viewer',
+          children: [
+            {
+              path: '',
+              data: {
+                navigateSource: 'personal-files'
+              },
+              loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
+            }
+          ]
+        }
+      ]
+    },
+    {
+      path: 'libraries',
+      children: [
+        {
+          path: '',
+          component: LibrariesComponent,
+          data: {
+            title: 'APP.BROWSE.LIBRARIES.MENU.MY_LIBRARIES.TITLE',
+            sortingPreferenceKey: 'libraries'
+          }
+        }
+      ]
+    },
+    {
+      path: 'libraries/:folderId',
+      children: [
+        {
+          path: '',
+          component: FilesComponent,
+          data: {
+            title: 'APP.BROWSE.LIBRARIES.MENU.MY_LIBRARIES.TITLE',
+            sortingPreferenceKey: 'libraries-files'
+          }
+        },
+        // deprecated, backwards compatibility with ACA 1.8
+        {
+          path: 'preview/:nodeId',
+          loadChildren: () => import('./components/preview/preview.module').then((m) => m.PreviewModule),
+          data: {
+            navigateSource: 'libraries'
+          }
+        },
+        {
+          path: 'view/:nodeId',
+          outlet: 'viewer',
+          children: [
+            {
+              path: '',
+              data: {
+                navigateSource: 'libraries'
+              },
+              loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
+            }
+          ]
+        },
+        {
+          path: 'view/:nodeId/:versionId',
+          outlet: 'viewer',
+          children: [
+            {
+              path: '',
+              data: {
+                navigateSource: 'libraries'
+              },
+              loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
+            }
+          ]
+        }
+      ]
+    },
+    {
+      path: 'favorite',
+      children: [
+        {
+          path: '',
+          pathMatch: 'full',
+          redirectTo: 'libraries'
+        },
+        {
+          path: 'libraries',
+          component: FavoriteLibrariesComponent,
+          data: {
+            title: 'APP.BROWSE.LIBRARIES.MENU.FAVORITE_LIBRARIES.TITLE',
+            sortingPreferenceKey: 'favorite-libraries'
+          }
+        }
+      ]
+    },
+    {
+      path: 'favorite/libraries/:folderId',
+      children: [
+        {
+          path: '',
+          component: FilesComponent,
+          data: {
+            title: 'APP.BROWSE.LIBRARIES.MENU.FAVORITE_LIBRARIES.TITLE',
+            sortingPreferenceKey: 'libraries-files'
+          }
+        },
+        {
+          path: 'view/:nodeId',
+          outlet: 'viewer',
+          children: [
+            {
+              path: '',
+              data: {
+                navigateSource: 'libraries'
+              },
+              loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
+            }
+          ]
+        },
+        {
+          path: 'view/:nodeId/:versionId',
+          outlet: 'viewer',
+          children: [
+            {
+              path: '',
+              data: {
+                navigateSource: 'libraries'
+              },
+              loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
+            }
+          ]
+        }
+      ]
+    },
+    {
+      path: 'favorites',
+      data: {
+        sortingPreferenceKey: 'favorites'
+      },
+      children: [
+        {
+          path: '',
+          component: FavoritesComponent,
+          data: {
+            title: 'APP.BROWSE.FAVORITES.TITLE',
+            sortingPreferenceKey: 'favorites'
+          }
+          // loadChildren:
+          //   './components/favorites/favorites.module#AppFavoritesModule'
+        },
+        // deprecated, backwards compatibility with ACA 1.8
+        {
+          path: 'preview/:nodeId',
+          loadChildren: () => import('./components/preview/preview.module').then((m) => m.PreviewModule),
+          data: {
+            navigateSource: 'favorites'
+          }
+        },
+        {
+          path: 'view/:nodeId',
+          outlet: 'viewer',
+          children: [
+            {
+              path: '',
+              data: {
+                navigateSource: 'favorites'
+              },
+              loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
+            }
+          ]
+        },
+        {
+          path: 'view/:nodeId/:versionId',
+          outlet: 'viewer',
+          children: [
+            {
+              path: '',
+              data: {
+                navigateSource: 'favorites'
+              },
+              loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
+            }
+          ]
+        }
+      ]
+    },
+    {
+      path: 'recent-files',
+      data: {
+        sortingPreferenceKey: 'recent-files'
+      },
+      children: [
+        {
+          path: '',
+          component: RecentFilesComponent,
+          data: {
+            title: 'APP.BROWSE.RECENT.TITLE'
+          }
+          // loadChildren:
+          //   './components/recent-files/recent-files.module#AppRecentFilesModule'
+        },
+        // deprecated, backwards compatibility with ACA 1.8
+        {
+          path: 'preview/:nodeId',
+          loadChildren: () => import('./components/preview/preview.module').then((m) => m.PreviewModule),
+          data: {
+            navigateSource: 'recent-files'
+          }
+        },
+        {
+          path: 'view/:nodeId',
+          outlet: 'viewer',
+          children: [
+            {
+              path: '',
+              data: {
+                navigateSource: 'recent-files'
+              },
+              loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
+            }
+          ]
+        },
+        {
+          path: 'view/:nodeId/:versionId',
+          outlet: 'viewer',
+          children: [
+            {
+              path: '',
+              data: {
+                navigateSource: 'recent-files'
+              },
+              loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
+            }
+          ]
+        }
+      ]
+    },
+    {
+      path: 'shared',
+      children: [
+        {
+          path: '',
+          data: {
+            title: 'APP.BROWSE.SHARED.TITLE',
+            sortingPreferenceKey: 'shared-files'
+          },
+          component: SharedFilesComponent
+          // loadChildren:
+          //   './components/shared-files/shared-files.module#AppSharedFilesModule'
+        },
+        // deprecated, backwards compatibility with ACA 1.8
+        {
+          path: 'preview/:nodeId',
+          loadChildren: () => import('./components/preview/preview.module').then((m) => m.PreviewModule),
+          data: {
+            navigateSource: 'shared'
+          }
+        },
+        {
+          path: 'view/:nodeId',
+          outlet: 'viewer',
+          children: [
+            {
+              path: '',
+              data: {
+                navigateSource: 'shared'
+              },
+              loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
+            }
+          ]
+        },
+        {
+          path: 'view/:nodeId/:versionId',
+          outlet: 'viewer',
+          children: [
+            {
+              path: '',
+              data: {
+                navigateSource: 'shared'
+              },
+              loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
+            }
+          ]
+        }
+      ],
+      canActivateChild: [AppSharedRuleGuard],
+      canActivate: [AppSharedRuleGuard]
+    },
+    {
+      path: 'trashcan',
+      loadChildren: () => import('./components/trashcan/trashcan.module').then((m) => m.AppTrashcanModule)
+    },
+    {
+      path: 'search',
+      children: [
+        {
+          path: '',
+          component: SearchResultsComponent,
+          data: {
+            title: 'APP.BROWSE.SEARCH.TITLE'
+          }
+        },
+        // deprecated, backwards compatibility with ACA 1.8
+        {
+          path: 'preview/:nodeId',
+          loadChildren: () => import('./components/preview/preview.module').then((m) => m.PreviewModule),
+          data: {
+            navigateSource: 'search'
+          }
+        },
+        {
+          path: 'view/:nodeId',
+          outlet: 'viewer',
+          children: [
+            {
+              path: '',
+              data: {
+                navigateSource: 'search'
+              },
+              loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
+            }
+          ]
+        },
+        {
+          path: 'view/:nodeId/:versionId',
+          outlet: 'viewer',
+          children: [
+            {
+              path: '',
+              data: {
+                navigateSource: 'search'
+              },
+              loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
+            }
+          ]
+        }
+      ]
+    },
+    {
+      path: 'search-libraries',
+      children: [
+        {
+          path: '',
+          component: SearchLibrariesResultsComponent,
+          data: {
+            title: 'APP.BROWSE.SEARCH.TITLE'
+          }
+        },
+        {
+          path: 'view/:nodeId',
+          outlet: 'viewer',
+          children: [
+            {
+              path: '',
+              data: {
+                navigateSource: 'search'
+              },
+              loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
+            }
+          ]
+        }
+      ]
+    },
+    {
+      path: 'nodes/:nodeId',
+      children: [
+        {
+          path: '',
+          loadChildren: () => import('@alfresco/aca-folder-rules').then((m) => m.AcaFolderRulesModule)
+        }
+      ]
+    },
+    {
+      path: '**',
+      component: GenericErrorComponent
+    }
+  ],
+  canActivateChild: [AuthGuard]
+};

projects/aca-content/src/lib/components/common/common.module.ts

@@ -0,0 +1,41 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { CoreModule } from '@alfresco/adf-core';
+import { ExtensionsModule } from '@alfresco/adf-extensions';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { GenericErrorModule } from '@alfresco/aca-shared';
+import { LocationLinkComponent } from './location-link/location-link.component';
+import { ToggleSharedComponent } from './toggle-shared/toggle-shared.component';
+import { LanguagePickerComponent } from './language-picker/language-picker.component';
+import { LogoutComponent } from './logout/logout.component';
+
+@NgModule({
+  imports: [CommonModule, CoreModule.forChild(), ExtensionsModule, GenericErrorModule],
+  declarations: [LocationLinkComponent, ToggleSharedComponent, LanguagePickerComponent, LogoutComponent],
+  exports: [ExtensionsModule, LocationLinkComponent, GenericErrorModule, ToggleSharedComponent, LanguagePickerComponent, LogoutComponent]
+})
+export class AppCommonModule {}

projects/aca-content/src/lib/components/common/language-picker/language-picker.component.ts

@@ -0,0 +1,40 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'aca-language-picker',
+  template: `
+    <button mat-menu-item [matMenuTriggerFor]="langMenu">
+      <mat-icon>language</mat-icon>
+      {{ 'APP.LANGUAGE' | translate }}
+    </button>
+    <mat-menu #langMenu="matMenu">
+      <adf-language-menu></adf-language-menu>
+    </mat-menu>
+  `
+})
+export class LanguagePickerComponent {}

projects/aca-content/src/lib/components/common/location-link/location-link.component.ts

@@ -0,0 +1,184 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Component, Input, ChangeDetectionStrategy, OnInit, ViewEncapsulation, HostListener } from '@angular/core';
+import { PathInfo, MinimalNodeEntity } from '@alfresco/js-api';
+import { Observable, BehaviorSubject, of } from 'rxjs';
+
+import { Store } from '@ngrx/store';
+import { AppStore, NavigateToParentFolder } from '@alfresco/aca-shared/store';
+import { ContentApiService } from '@alfresco/aca-shared';
+import { TranslationService } from '@alfresco/adf-core';
+
+@Component({
+  selector: 'aca-location-link',
+  template: `
+    <a
+      href=""
+      [title]="nodeLocation$ | async"
+      (click)="goToLocation()"
+      class="adf-datatable-cell-value"
+      [innerHTML]="displayText | async | translate"
+    >
+    </a>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    class: 'aca-location-link adf-location-cell adf-datatable-content-cell'
+  }
+})
+export class LocationLinkComponent implements OnInit {
+  private _path: PathInfo;
+
+  nodeLocation$ = new BehaviorSubject(this.translationService.instant('APP.BROWSE.SEARCH.UNKNOWN_LOCATION'));
+  displayText: Observable<string>;
+
+  @Input()
+  context: any;
+
+  @Input()
+  showLocation = false;
+
+  @HostListener('mouseenter')
+  onMouseEnter() {
+    this.getTooltip(this._path);
+  }
+
+  constructor(private store: Store<AppStore>, private contentApi: ContentApiService, private translationService: TranslationService) {}
+
+  goToLocation() {
+    if (this.context) {
+      const node: MinimalNodeEntity = this.context.row.node;
+      this.store.dispatch(new NavigateToParentFolder(node));
+    }
+  }
+
+  ngOnInit() {
+    if (this.context) {
+      const node: MinimalNodeEntity = this.context.row.node;
+      if (node && node.entry && node.entry.path) {
+        const path = node.entry.path;
+
+        if (path && path.name && path.elements) {
+          if (this.showLocation) {
+            this.displayText = of(path.name.substring(1).replace(/\//g, ' &#8250; '));
+          } else {
+            this.displayText = this.getDisplayText(path);
+          }
+          this._path = path;
+        } else {
+          this.displayText = of('APP.BROWSE.SEARCH.UNKNOWN_LOCATION');
+        }
+      }
+    }
+  }
+
+  // todo: review once 5.2.3 is out
+  private getDisplayText(path: PathInfo): Observable<string> {
+    const elements = path.elements.map((e) => e.name);
+
+    // for admin users
+    if (elements.length === 1 && elements[0] === 'Company Home') {
+      return of('APP.BROWSE.PERSONAL.TITLE');
+    }
+
+    // for non-admin users
+    if (elements.length === 3 && elements[0] === 'Company Home' && elements[1] === 'User Homes') {
+      return of('APP.BROWSE.PERSONAL.TITLE');
+    }
+
+    const result = elements[elements.length - 1];
+
+    if (result === 'documentLibrary') {
+      const fragment = path.elements[path.elements.length - 2];
+
+      return new Observable<string>((observer) => {
+        this.contentApi.getNodeInfo(fragment.id).subscribe(
+          (node) => {
+            observer.next(node.properties['cm:title'] || node.name || fragment.name);
+            observer.complete();
+          },
+          () => {
+            observer.next(fragment.name);
+            observer.complete();
+          }
+        );
+      });
+    }
+
+    return of(result);
+  }
+
+  // todo: review once 5.2.3 is out
+  private getTooltip(path: PathInfo) {
+    if (!path) {
+      return;
+    }
+
+    let result: string = null;
+
+    const elements = path.elements.map((e) => Object.assign({}, e));
+    const personalFiles = this.translationService.instant('APP.BROWSE.PERSONAL.TITLE');
+    const fileLibraries = this.translationService.instant('APP.BROWSE.LIBRARIES.TITLE');
+
+    if (elements[0].name === 'Company Home') {
+      elements[0].name = personalFiles;
+
+      if (elements.length > 2) {
+        if (elements[1].name === 'Sites') {
+          const fragment = elements[2];
+          this.contentApi.getNodeInfo(fragment.id).subscribe(
+            (node) => {
+              elements.splice(0, 2);
+              elements[0].name = node.properties['cm:title'] || node.name || fragment.name;
+              elements.splice(1, 1);
+              elements.unshift({ id: null, name: fileLibraries });
+
+              result = elements.map((e) => e.name).join('/');
+              this.nodeLocation$.next(result);
+            },
+            () => {
+              elements.splice(0, 2);
+              elements.unshift({ id: null, name: fileLibraries });
+              elements.splice(2, 1);
+
+              result = elements.map((e) => e.name).join('/');
+              this.nodeLocation$.next(result);
+            }
+          );
+        }
+
+        if (elements[1].name === 'User Homes') {
+          elements.splice(0, 3);
+          elements.unshift({ id: null, name: personalFiles });
+        }
+      }
+    }
+
+    result = elements.map((e) => e.name).join('/');
+    this.nodeLocation$.next(result);
+  }
+}

projects/aca-content/src/lib/components/common/logout/logout.component.spec.ts

@@ -0,0 +1,62 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { AppTestingModule } from '../../../testing/app-testing.module';
+import { LogoutComponent } from './logout.component';
+import { Store } from '@ngrx/store';
+import { SetSelectedNodesAction } from '@alfresco/aca-shared/store';
+
+describe('LogoutComponent', () => {
+  let fixture: ComponentFixture<LogoutComponent>;
+  let component: LogoutComponent;
+  let store;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [AppTestingModule],
+      declarations: [LogoutComponent],
+      providers: [
+        {
+          provide: Store,
+          useValue: {
+            dispatch: jasmine.createSpy('dispatch')
+          }
+        }
+      ]
+    });
+
+    store = TestBed.inject(Store);
+    fixture = TestBed.createComponent(LogoutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should reset selected nodes from store', () => {
+    component.onLogoutEvent();
+
+    expect(store.dispatch).toHaveBeenCalledWith(new SetSelectedNodesAction([]));
+  });
+});

projects/aca-content/src/lib/components/common/logout/logout.component.ts

@@ -0,0 +1,45 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { AppStore, SetSelectedNodesAction } from '@alfresco/aca-shared/store';
+
+@Component({
+  selector: 'aca-logout',
+  template: `
+    <button mat-menu-item (click)="onLogoutEvent()" adf-logout>
+      <mat-icon>exit_to_app</mat-icon>
+      <span>{{ 'APP.SIGN_OUT' | translate }}</span>
+    </button>
+  `
+})
+export class LogoutComponent {
+  constructor(private store: Store<AppStore>) {}
+
+  onLogoutEvent() {
+    this.store.dispatch(new SetSelectedNodesAction([]));
+  }
+}

projects/aca-content/src/lib/components/common/toggle-shared/toggle-shared.component.html

@@ -0,0 +1,27 @@
+<ng-container *ngIf="selection$ | async as selection">
+  <ng-container *ngIf="!data.iconButton">
+    <button mat-menu-item data-automation-id="share-action-button" (click)="editSharedNode(selection, '.adf-context-menu-source')">
+      <mat-icon>link</mat-icon>
+      <ng-container *ngIf="isShared(selection); else not_shared">
+        <span>{{ 'APP.ACTIONS.SHARE_EDIT' | translate }}</span>
+      </ng-container>
+    </button>
+  </ng-container>
+
+  <ng-container *ngIf="data.iconButton">
+    <button
+      mat-icon-button
+      data-automation-id="share-action-button"
+      (click)="editSharedNode(selection, '#share-action-button')"
+      [attr.aria-label]="getLabel(selection) | translate"
+      [attr.title]="getLabel(selection) | translate"
+      id="share-action-button"
+    >
+      <mat-icon>link</mat-icon>
+    </button>
+  </ng-container>
+</ng-container>
+
+<ng-template #not_shared>
+  <span>{{ 'APP.ACTIONS.SHARE' | translate }}</span>
+</ng-template>

projects/aca-content/src/lib/components/common/toggle-shared/toggle-shared.component.spec.ts

@@ -0,0 +1,90 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { ToggleSharedComponent } from './toggle-shared.component';
+import { of } from 'rxjs';
+
+describe('ToggleSharedComponent', () => {
+  let component;
+  let entry;
+
+  const storeMock: any = {
+    select: () => of({ first: { entry } }),
+    dispatch: jasmine.createSpy('dispatch')
+  };
+
+  beforeEach(() => {
+    entry = {
+      properties: {
+        'qshare:sharedId': null
+      }
+    };
+
+    component = new ToggleSharedComponent(storeMock);
+  });
+
+  it('should get Store selection entry on initialization', (done) => {
+    component.ngOnInit();
+
+    component.selection$.subscribe((selection) => {
+      expect(selection.first.entry).toEqual(entry);
+      done();
+    });
+  });
+
+  it('should return false when entry is not shared', () => {
+    component.ngOnInit();
+
+    expect(component.isShared({ first: { entry } })).toBe(false);
+  });
+
+  it('should return true when entry is shared', () => {
+    entry.properties['qshare:sharedId'] = 'some-id';
+    component.ngOnInit();
+
+    expect(component.isShared({ first: { entry } })).toBe(true);
+  });
+
+  it('should dispatch `SHARE_NODE` action on share', () => {
+    component.ngOnInit();
+    component.editSharedNode({ first: { entry } });
+    expect(storeMock.dispatch).toHaveBeenCalled();
+  });
+
+  it('should get action label for unshared file', () => {
+    component.ngOnInit();
+    const label = component.getLabel({ first: { entry } });
+
+    expect(label).toBe('APP.ACTIONS.SHARE');
+  });
+
+  it('should get action label for shared file', () => {
+    entry.properties['qshare:sharedId'] = 'some-id';
+    component.ngOnInit();
+    const label = component.getLabel({ first: { entry } });
+
+    expect(label).toBe('APP.ACTIONS.SHARE_EDIT');
+  });
+});

projects/aca-content/src/lib/components/common/toggle-shared/toggle-shared.component.ts

@@ -0,0 +1,70 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Component, OnInit, Input } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Store } from '@ngrx/store';
+import { SelectionState } from '@alfresco/adf-extensions';
+import { AppStore, ShareNodeAction, getAppSelection } from '@alfresco/aca-shared/store';
+
+@Component({
+  selector: 'app-toggle-shared',
+  templateUrl: './toggle-shared.component.html'
+})
+export class ToggleSharedComponent implements OnInit {
+  @Input()
+  data: {
+    iconButton?: string;
+  };
+
+  selection$: Observable<SelectionState>;
+
+  constructor(private store: Store<AppStore>) {}
+
+  ngOnInit() {
+    this.selection$ = this.store.select(getAppSelection);
+  }
+
+  isShared(selection: SelectionState) {
+    // workaround for shared files
+    if (selection.first && selection.first.entry && (selection.first.entry as any).sharedByUser) {
+      return true;
+    }
+
+    return selection.first && selection.first.entry && selection.first.entry.properties && !!selection.first.entry.properties['qshare:sharedId'];
+  }
+
+  editSharedNode(selection: SelectionState, focusedElementOnCloseSelector: string) {
+    this.store.dispatch(
+      new ShareNodeAction(selection.first, {
+        focusedElementOnCloseSelector
+      })
+    );
+  }
+
+  getLabel(selection: SelectionState): string {
+    return this.isShared(selection) ? 'APP.ACTIONS.SHARE_EDIT' : 'APP.ACTIONS.SHARE';
+  }
+}

projects/aca-content/src/lib/components/context-menu/context-menu-item.component.html

@@ -0,0 +1,31 @@
+<div class="aca-context-menu">
+  <ng-container [ngSwitch]="actionRef.type">
+    <ng-container *ngSwitchCase="'menu'">
+      <button mat-menu-item [id]="actionRef.id" [matMenuTriggerFor]="childMenu">
+        <adf-icon [value]="actionRef.icon"></adf-icon>
+        <span>{{ actionRef.title | translate }}</span>
+      </button>
+
+      <mat-menu #childMenu="matMenu">
+        <ng-container *ngFor="let child of actionRef.children; trackBy: trackByActionId">
+          <app-context-menu-item [actionRef]="child"></app-context-menu-item>
+        </ng-container>
+      </mat-menu>
+    </ng-container>
+
+    <ng-container *ngSwitchCase="'separator'">
+      <mat-divider></mat-divider>
+    </ng-container>
+
+    <ng-container *ngSwitchCase="'custom'">
+      <adf-dynamic-component [data]="actionRef.data" [id]="actionRef.component"></adf-dynamic-component>
+    </ng-container>
+
+    <ng-container *ngSwitchDefault>
+      <button mat-menu-item color="primary" [id]="actionRef.id" (click)="runAction()">
+        <adf-icon [value]="actionRef.icon"></adf-icon>
+        <span>{{ actionRef.title | translate }}</span>
+      </button>
+    </ng-container>
+  </ng-container>
+</div>

projects/aca-content/src/lib/components/context-menu/context-menu-item.component.spec.ts

@@ -0,0 +1,97 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { AppTestingModule } from '../../testing/app-testing.module';
+import { ContextMenuItemComponent } from './context-menu-item.component';
+import { ContextMenuModule } from './context-menu.module';
+import { TranslateModule, TranslateLoader, TranslateFakeLoader } from '@ngx-translate/core';
+import { AppExtensionService } from '@alfresco/aca-shared';
+
+describe('ContextMenuComponent', () => {
+  let fixture: ComponentFixture<ContextMenuItemComponent>;
+  let component: ContextMenuItemComponent;
+  let extensionsService;
+  let contextItem;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        AppTestingModule,
+        ContextMenuModule,
+        TranslateModule.forRoot({
+          loader: { provide: TranslateLoader, useClass: TranslateFakeLoader }
+        })
+      ],
+      providers: [AppExtensionService]
+    });
+
+    fixture = TestBed.createComponent(ContextMenuItemComponent);
+    component = fixture.componentInstance;
+    extensionsService = TestBed.inject(AppExtensionService);
+
+    contextItem = {
+      type: 'button',
+      id: 'action-button',
+      title: 'Test Button',
+      actions: {
+        click: 'TEST_EVENT'
+      }
+    };
+  });
+
+  afterEach(() => {
+    fixture.destroy();
+  });
+
+  it('should render defined menu actions items', () => {
+    component.actionRef = contextItem;
+    fixture.detectChanges();
+
+    const buttonElement = fixture.nativeElement.querySelector('button');
+    expect(buttonElement.querySelector('span').innerText.trim()).toBe(contextItem.title);
+  });
+
+  it('should not run action when entry has no click attribute defined', () => {
+    spyOn(extensionsService, 'runActionById');
+    contextItem.actions = {};
+    component.actionRef = contextItem;
+    fixture.detectChanges();
+
+    fixture.nativeElement.querySelector('#action-button').dispatchEvent(new MouseEvent('click'));
+
+    expect(extensionsService.runActionById).not.toHaveBeenCalled();
+  });
+
+  it('should run action with provided action id', () => {
+    spyOn(extensionsService, 'runActionById');
+    component.actionRef = contextItem;
+    fixture.detectChanges();
+
+    fixture.nativeElement.querySelector('#action-button').dispatchEvent(new MouseEvent('click'));
+
+    expect(extensionsService.runActionById).toHaveBeenCalledWith(contextItem.actions.click);
+  });
+});

projects/aca-content/src/lib/components/context-menu/context-menu-item.component.ts

@@ -0,0 +1,55 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { ContentActionRef } from '@alfresco/adf-extensions';
+import { AppExtensionService } from '@alfresco/aca-shared';
+
+@Component({
+  selector: 'app-context-menu-item',
+  templateUrl: './context-menu-item.component.html',
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'app-context-menu-item' }
+})
+export class ContextMenuItemComponent {
+  @Input()
+  actionRef: ContentActionRef;
+
+  constructor(private extensions: AppExtensionService) {}
+
+  runAction() {
+    if (this.hasClickAction(this.actionRef)) {
+      this.extensions.runActionById(this.actionRef.actions.click);
+    }
+  }
+
+  private hasClickAction(actionRef: ContentActionRef): boolean {
+    return !!(actionRef && actionRef.actions && actionRef.actions.click);
+  }
+
+  trackByActionId(_: number, obj: ContentActionRef): string {
+    return obj.id;
+  }
+}

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

@@ -0,0 +1,32 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { OutsideEventDirective } from './context-menu-outside-event.directive';
+
+describe('OutsideEventDirective', () => {
+  it('should be defined', () => {
+    expect(OutsideEventDirective).toBeDefined();
+  });
+});

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

@@ -0,0 +1,64 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Directive, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { fromEvent, Subscription } from 'rxjs';
+import { filter } from 'rxjs/operators';
+
+@Directive({
+  selector: '[acaContextMenuOutsideEvent]'
+})
+export class OutsideEventDirective implements OnInit, OnDestroy {
+  private subscriptions: Subscription[] = [];
+
+  @Output()
+  clickOutside: EventEmitter<null> = new EventEmitter();
+
+  constructor() {}
+
+  ngOnInit() {
+    this.subscriptions = this.subscriptions.concat([
+      fromEvent(document.body, 'click')
+        .pipe(filter((event) => !this.findAncestor(event.target as Element)))
+        .subscribe(() => this.clickOutside.next())
+    ]);
+  }
+
+  ngOnDestroy() {
+    this.subscriptions.forEach((subscription) => subscription.unsubscribe());
+    this.subscriptions = [];
+  }
+
+  private findAncestor(el: Element): boolean {
+    const className = 'aca-context-menu';
+
+    if (el.classList.contains(className)) {
+      return true;
+    }
+    // eslint-disable-next-line curly
+    while ((el = el.parentElement) && !el.classList.contains(className));
+    return !!el;
+  }
+}

projects/aca-content/src/lib/components/context-menu/context-menu-overlay.ts

@@ -0,0 +1,34 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { OverlayRef } from '@angular/cdk/overlay';
+
+export class ContextMenuOverlayRef {
+  constructor(private overlayRef: OverlayRef) {}
+
+  close(): void {
+    this.overlayRef.dispose();
+  }
+}

projects/aca-content/src/lib/components/context-menu/context-menu.component.html

@@ -0,0 +1,35 @@
+<div [dir]="direction">
+  <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: trackByActionId" [ngSwitch]="entry.type">
+      <ng-container *ngSwitchDefault>
+        <button mat-menu-item [id]="entry.id" (click)="runAction(entry)">
+          <adf-icon [value]="entry.icon"></adf-icon>
+          <span>{{ entry.title | translate }}</span>
+        </button>
+      </ng-container>
+
+      <ng-container *ngSwitchCase="'separator'">
+        <mat-divider></mat-divider>
+      </ng-container>
+
+      <ng-container *ngSwitchCase="'menu'">
+        <button mat-menu-item [id]="entry.id" [matMenuTriggerFor]="childMenu">
+          <adf-icon [value]="entry.icon"></adf-icon>
+          <span>{{ entry.title | translate }}</span>
+        </button>
+
+        <mat-menu #childMenu="matMenu">
+          <ng-container *ngFor="let child of entry.children; trackBy: trackByActionId">
+            <app-context-menu-item [actionRef]="child"></app-context-menu-item>
+          </ng-container>
+        </mat-menu>
+      </ng-container>
+
+      <ng-container *ngSwitchCase="'custom'">
+        <adf-dynamic-component [data]="entry.data" [id]="entry.component"></adf-dynamic-component>
+      </ng-container>
+    </ng-container>
+  </mat-menu>
+</div>

projects/aca-content/src/lib/components/context-menu/context-menu.component.spec.ts

@@ -0,0 +1,108 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { AppTestingModule } from '../../testing/app-testing.module';
+import { ContextMenuComponent } from './context-menu.component';
+import { ContextMenuModule } from './context-menu.module';
+import { ContextMenuOverlayRef } from './context-menu-overlay';
+import { ContentActionType } from '@alfresco/adf-extensions';
+
+import { of } from 'rxjs';
+import { Store } from '@ngrx/store';
+import { AppExtensionService } from '@alfresco/aca-shared';
+
+describe('ContextMenuComponent', () => {
+  let fixture: ComponentFixture<ContextMenuComponent>;
+  let component: ContextMenuComponent;
+  let contextMenuOverlayRef: ContextMenuOverlayRef;
+  let extensionsService: AppExtensionService;
+
+  const contextItem = {
+    type: ContentActionType.button,
+    id: 'action-button',
+    title: 'Test Button',
+    actions: {
+      click: 'TEST_EVENT'
+    }
+  };
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ContextMenuModule, AppTestingModule],
+      providers: [
+        {
+          provide: ContextMenuOverlayRef,
+          useValue: {
+            close: jasmine.createSpy('close')
+          }
+        },
+        {
+          provide: Store,
+          useValue: {
+            dispatch: () => {},
+            select: () => of({ count: 1 })
+          }
+        }
+      ]
+    });
+
+    fixture = TestBed.createComponent(ContextMenuComponent);
+    component = fixture.componentInstance;
+
+    contextMenuOverlayRef = TestBed.inject(ContextMenuOverlayRef);
+    extensionsService = TestBed.inject(AppExtensionService);
+
+    spyOn(extensionsService, 'getAllowedContextMenuActions').and.returnValue(of([contextItem]));
+
+    fixture.detectChanges();
+  });
+
+  it('should close context menu on Escape event', () => {
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    expect(contextMenuOverlayRef.close).toHaveBeenCalled();
+  });
+
+  it('should render defined context menu actions items', async () => {
+    component.ngAfterViewInit();
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    const contextMenuElements = document.body.querySelector('.aca-context-menu')?.querySelectorAll('button');
+
+    expect(contextMenuElements?.length).toBe(1);
+    expect(contextMenuElements?.[0].querySelector('span')?.innerText).toBe(contextItem.title);
+  });
+
+  it('should run action with provided action id and correct payload', () => {
+    spyOn(extensionsService, 'runActionById');
+
+    component.runAction(contextItem);
+
+    expect(extensionsService.runActionById).toHaveBeenCalledWith(contextItem.actions.click, {
+      focusedElementOnCloseSelector: '.adf-context-menu-source'
+    });
+  });
+});

projects/aca-content/src/lib/components/context-menu/context-menu.component.ts

@@ -0,0 +1,97 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Component, ViewEncapsulation, OnInit, OnDestroy, HostListener, ViewChild, AfterViewInit, Inject } from '@angular/core';
+import { MatMenuTrigger } from '@angular/material/menu';
+import { Subject } from 'rxjs';
+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 { Direction } from '@angular/cdk/bidi';
+import { AppExtensionService } from '@alfresco/aca-shared';
+
+@Component({
+  selector: 'aca-context-menu',
+  templateUrl: './context-menu.component.html',
+  host: {
+    class: 'aca-context-menu-holder'
+  },
+  encapsulation: ViewEncapsulation.None
+})
+export class ContextMenuComponent implements OnInit, OnDestroy, AfterViewInit {
+  private onDestroy$: Subject<boolean> = new Subject<boolean>();
+  actions: Array<ContentActionRef> = [];
+
+  @ViewChild(MatMenuTrigger)
+  trigger: MatMenuTrigger;
+
+  @HostListener('document:keydown.Escape', ['$event'])
+  handleKeydownEscape(event: KeyboardEvent) {
+    if (event) {
+      if (this.contextMenuOverlayRef) {
+        this.contextMenuOverlayRef.close();
+      }
+    }
+  }
+
+  constructor(
+    private contextMenuOverlayRef: ContextMenuOverlayRef,
+    private extensions: AppExtensionService,
+    @Inject(CONTEXT_MENU_DIRECTION) public direction: Direction
+  ) {}
+
+  onClickOutsideEvent() {
+    if (this.contextMenuOverlayRef) {
+      this.contextMenuOverlayRef.close();
+    }
+  }
+
+  runAction(contentActionRef: ContentActionRef) {
+    this.extensions.runActionById(contentActionRef.actions.click, {
+      focusedElementOnCloseSelector: '.adf-context-menu-source'
+    });
+  }
+
+  ngOnDestroy() {
+    this.onDestroy$.next(true);
+    this.onDestroy$.complete();
+  }
+
+  ngOnInit() {
+    this.extensions
+      .getAllowedContextMenuActions()
+      .pipe(takeUntil(this.onDestroy$))
+      .subscribe((actions) => (this.actions = actions));
+  }
+
+  ngAfterViewInit() {
+    setTimeout(() => this.trigger.openMenu(), 0);
+  }
+
+  trackByActionId(_: number, obj: ContentActionRef): string {
+    return obj.id;
+  }
+}

projects/aca-content/src/lib/components/context-menu/context-menu.module.ts

@@ -0,0 +1,55 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { CoreModule } from '@alfresco/adf-core';
+import { ExtensionsModule } from '@alfresco/adf-extensions';
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { CoreExtensionsModule } from '../../extensions/core.extensions.module';
+import { AppCommonModule } from '../common/common.module';
+import { ContextMenuItemComponent } from './context-menu-item.component';
+import { OutsideEventDirective } from './context-menu-outside-event.directive';
+import { ContextMenuComponent } from './context-menu.component';
+import { ContextActionsModule } from '@alfresco/aca-shared';
+
+@NgModule({
+  imports: [
+    MatMenuModule,
+    MatListModule,
+    MatIconModule,
+    MatButtonModule,
+    CoreExtensionsModule.forChild(),
+    CoreModule.forChild(),
+    AppCommonModule,
+    ExtensionsModule,
+    ContextActionsModule
+  ],
+  declarations: [ContextMenuComponent, ContextMenuItemComponent, OutsideEventDirective],
+  exports: [OutsideEventDirective, ContextMenuComponent, ContextMenuItemComponent, ContextActionsModule]
+})
+export class ContextMenuModule {}

projects/aca-content/src/lib/components/context-menu/context-menu.service.spec.ts

@@ -0,0 +1,95 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { TestBed } from '@angular/core/testing';
+import { Overlay } from '@angular/cdk/overlay';
+import { Injector } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { of } from 'rxjs';
+import { CoreModule, UserPreferencesService } from '@alfresco/adf-core';
+import { ContextMenuService } from './context-menu.service';
+import { ContextMenuModule } from './context-menu.module';
+import { TranslateModule } from '@ngx-translate/core';
+
+describe('ContextMenuService', () => {
+  let contextMenuService;
+  let overlay;
+  let injector;
+  let userPreferencesService;
+  const overlayConfig = {
+    hasBackdrop: false,
+    backdropClass: '',
+    panelClass: 'test-panel',
+    source: {
+      x: 1,
+      y: 1
+    }
+  };
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot(), CoreModule.forRoot(), ContextMenuModule],
+      providers: [Overlay, { provide: Store, useValue: { select: () => of() } }, UserPreferencesService]
+    });
+
+    injector = TestBed.inject(Injector);
+    overlay = TestBed.inject(Overlay);
+    userPreferencesService = TestBed.inject(UserPreferencesService);
+  });
+
+  it('should create a custom overlay', () => {
+    contextMenuService = new ContextMenuService(injector, overlay, userPreferencesService);
+
+    contextMenuService.open(overlayConfig);
+
+    expect(document.querySelector('.test-panel')).not.toBe(null);
+  });
+
+  it('should render component', () => {
+    contextMenuService = new ContextMenuService(injector, overlay, userPreferencesService);
+
+    contextMenuService.open(overlayConfig);
+
+    expect(document.querySelector('aca-context-menu')).not.toBe(null);
+  });
+
+  it('should have default LTR direction value', () => {
+    contextMenuService = new ContextMenuService(injector, overlay, userPreferencesService);
+
+    contextMenuService.open(overlayConfig);
+
+    expect(document.body.querySelector('div[dir="ltr"]')).not.toBe(null);
+  });
+
+  it('should change direction on textOrientation event', () => {
+    spyOn(userPreferencesService, 'select').and.returnValue(of('rtl'));
+
+    contextMenuService = new ContextMenuService(injector, overlay, userPreferencesService);
+
+    contextMenuService.open(overlayConfig);
+
+    expect(document.body.querySelector('div[dir="rtl"]')).not.toBe(null);
+  });
+});

projects/aca-content/src/lib/components/context-menu/context-menu.service.ts

@@ -0,0 +1,112 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Injectable, Injector, ComponentRef } from '@angular/core';
+import { Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { ContextMenuOverlayRef } from './context-menu-overlay';
+import { ContextMenuComponent } from './context-menu.component';
+import { ContextmenuOverlayConfig } from './interfaces';
+import { UserPreferencesService } from '@alfresco/adf-core';
+import { Directionality } from '@angular/cdk/bidi';
+import { CONTEXT_MENU_DIRECTION } from './direction.token';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ContextMenuService {
+  private direction: Directionality;
+
+  constructor(private injector: Injector, private overlay: Overlay, private userPreferenceService: UserPreferencesService) {
+    this.userPreferenceService.select('textOrientation').subscribe((textOrientation) => {
+      this.direction = textOrientation;
+    });
+  }
+
+  open(config: ContextmenuOverlayConfig): ContextMenuOverlayRef {
+    const overlay = this.createOverlay(config);
+    const overlayRef = new ContextMenuOverlayRef(overlay);
+
+    this.attachDialogContainer(overlay, overlayRef);
+
+    return overlayRef;
+  }
+
+  private createOverlay(config: ContextmenuOverlayConfig): OverlayRef {
+    const overlayConfig = this.getOverlayConfig(config);
+    return this.overlay.create(overlayConfig);
+  }
+
+  private attachDialogContainer(overlay: OverlayRef, contextmenuOverlayRef: ContextMenuOverlayRef): ContextMenuComponent {
+    const injector = this.createInjector(contextmenuOverlayRef);
+
+    const containerPortal = new ComponentPortal(ContextMenuComponent, null, injector);
+    const containerRef: ComponentRef<ContextMenuComponent> = overlay.attach(containerPortal);
+
+    return containerRef.instance;
+  }
+
+  private createInjector(contextmenuOverlayRef: ContextMenuOverlayRef): Injector {
+    const injectionTokens = new WeakMap();
+
+    injectionTokens.set(ContextMenuOverlayRef, contextmenuOverlayRef);
+    injectionTokens.set(CONTEXT_MENU_DIRECTION, this.direction);
+
+    return Injector.create({
+      parent: this.injector,
+      providers: [
+        { provide: ContextMenuOverlayRef, useValue: contextmenuOverlayRef },
+        { provide: CONTEXT_MENU_DIRECTION, useValue: this.direction }
+      ]
+    });
+  }
+
+  private getOverlayConfig(config: ContextmenuOverlayConfig): OverlayConfig {
+    const { x, y } = config.source;
+
+    const positionStrategy = this.overlay
+      .position()
+      .flexibleConnectedTo({ x, y })
+      .withPositions([
+        {
+          originX: 'end',
+          originY: 'bottom',
+          overlayX: 'end',
+          overlayY: 'top'
+        }
+      ]);
+
+    const overlayConfig = new OverlayConfig({
+      hasBackdrop: config.hasBackdrop,
+      backdropClass: config.backdropClass,
+      panelClass: config.panelClass,
+      scrollStrategy: this.overlay.scrollStrategies.close(),
+      positionStrategy,
+      direction: this.direction
+    });
+
+    return overlayConfig;
+  }
+}

projects/aca-content/src/lib/components/context-menu/direction.token.ts

@@ -0,0 +1,31 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { InjectionToken } from '@angular/core';
+
+export const CONTEXT_MENU_DIRECTION = new InjectionToken('CONTEXT_MENU_DIRECTION', {
+  providedIn: 'root',
+  factory: () => 'ltr'
+});

projects/aca-content/src/lib/components/context-menu/interfaces.ts

@@ -0,0 +1,32 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export interface ContextmenuOverlayConfig {
+  panelClass?: string;
+  hasBackdrop?: boolean;
+  backdropClass?: string;
+  source?: MouseEvent;
+  data?: any;
+}

projects/aca-content/src/lib/components/create-menu/create-menu.component.html

@@ -0,0 +1,36 @@
+<ng-container *ngIf="expanded">
+  <button
+    mat-stroked-button
+    data-automation-id="create-button"
+    [matMenuTriggerFor]="rootMenu"
+    title="{{ 'APP.NEW_MENU.TOOLTIP' | translate }}"
+    [class]="{
+      'app-create-menu-secondary-button': isMainActionPresent
+    }"
+  >
+    <span class="app-create-menu__text">{{ 'APP.NEW_MENU.LABEL' | translate }}</span>
+    <mat-icon title="{{ 'APP.NEW_MENU.TOOLTIP' | translate }}">arrow_drop_down</mat-icon>
+  </button>
+</ng-container>
+
+<ng-container *ngIf="!expanded">
+  <button
+    mat-icon-button
+    [class]="{
+      'app-create-menu-secondary-button': isMainActionPresent,
+      'app-create-menu--collapsed': true
+    }"
+    data-automation-id="create-button"
+    [matMenuTriggerFor]="rootMenu"
+    #createMenu="matMenuTrigger"
+    title="{{ 'APP.NEW_MENU.TOOLTIP' | translate }}"
+  >
+    <mat-icon class="app-create-menu--icon" title="{{ 'APP.NEW_MENU.TOOLTIP' | translate }}">queue</mat-icon>
+  </button>
+</ng-container>
+
+<mat-menu #rootMenu="matMenu" role="menu" class="app-create-menu__root-menu app-create-menu__sub-menu" [overlapTrigger]="false" yPosition="below">
+  <div *ngFor="let action of createActions; trackBy: trackByActionId">
+    <app-toolbar-menu-item [actionRef]="action"></app-toolbar-menu-item>
+  </div>
+</mat-menu>

projects/aca-content/src/lib/components/create-menu/create-menu.component.scss

@@ -0,0 +1,97 @@
+.app-create-menu:focus {
+  outline: none;
+}
+
+.app-create-menu {
+  .mat-stroked-button {
+    width: 100%;
+    height: 37.5px;
+    border-radius: 4px;
+    font-size: var(--new-button-font-size);
+    font-weight: normal;
+    text-transform: uppercase;
+    margin-top: 10px;
+
+    .mat-icon {
+      width: 24px;
+      height: 25px;
+    }
+
+    &__text {
+      width: 100%;
+      height: 20px;
+      text-align: left;
+    }
+
+    &:not(.app-create-menu-secondary-button) {
+      background-color: var(--theme-accent-color);
+      color: var(--theme-accent-color-default-contrast);
+      margin-top: 0px;
+
+      .mat-icon {
+        color: var(--theme-accent-color-default-contrast);
+      }
+    }
+  }
+
+  &__root-menu {
+    max-width: 290px !important;
+    width: 290px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    & > .mat-menu-content {
+      width: 100%;
+    }
+  }
+
+  &--collapsed {
+    outline: none;
+    color: var(--theme-secondary-text-color);
+    cursor: pointer;
+    margin: 0;
+    border: none;
+    background: none;
+
+    &:not(.app-create-menu-secondary-button) {
+      .app-create-menu--icon {
+        color: var(--theme-accent-color);
+      }
+
+      &:hover {
+        color: var(--theme-accent-color);
+      }
+    }
+  }
+
+  .app-create-menu--icon {
+    &__sub-menu {
+      .mat-menu-item {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        font-size: var(--theme-button-font-size);
+        color: var(--theme-secondary-text-color);
+        line-height: 48px;
+        box-shadow: none;
+        transform: none;
+        transition: unset;
+        font-weight: normal;
+
+        &:hover {
+          color: var(--theme-primary-color);
+        }
+      }
+
+      .mat-menu-item[disabled],
+      .mat-menu-item[disabled]:hover {
+        color: var(--theme-text-disabled-color);
+
+        .mat-icon {
+          color: var(--theme-text-disabled-color);
+        }
+      }
+    }
+  }
+}

projects/aca-content/src/lib/components/create-menu/create-menu.component.spec.ts

@@ -0,0 +1,148 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { CreateMenuComponent } from './create-menu.component';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CoreModule } from '@alfresco/adf-core';
+import { AppCreateMenuModule } from './create-menu.module';
+import { OverlayContainer, OverlayModule } from '@angular/cdk/overlay';
+import { AppExtensionService } from '@alfresco/aca-shared';
+import { ContentActionType } from '@alfresco/adf-extensions';
+import { By } from '@angular/platform-browser';
+import { AppTestingModule } from '../../testing/app-testing.module';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatButtonModule } from '@angular/material/button';
+import { of } from 'rxjs';
+import { getContentActionRef } from '../../testing/content-action-ref';
+
+describe('CreateMenuComponent', () => {
+  let fixture: ComponentFixture<CreateMenuComponent>;
+  let extensionService: AppExtensionService;
+  let getCreateActionsSpy: jasmine.Spy;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [AppTestingModule, CoreModule.forRoot(), AppCreateMenuModule, OverlayModule, MatMenuModule, MatButtonModule]
+    });
+
+    extensionService = TestBed.inject(AppExtensionService);
+    getCreateActionsSpy = spyOn(extensionService, 'getCreateActions');
+    getCreateActionsSpy.and.returnValue(
+      of([
+        {
+          id: 'action1',
+          type: ContentActionType.button,
+          title: 'action one'
+        }
+      ])
+    );
+
+    spyOn(extensionService, 'getMainAction').and.returnValue(of(getContentActionRef()));
+
+    fixture = TestBed.createComponent(CreateMenuComponent);
+  });
+
+  async function clickMenu() {
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    const button: HTMLButtonElement = fixture.debugElement.query(By.css('[data-automation-id="create-button"]')).nativeElement;
+    button.click();
+
+    fixture.detectChanges();
+    await fixture.whenStable();
+  }
+
+  it('should render collapsed button', async () => {
+    fixture.componentInstance.expanded = false;
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    const button: HTMLButtonElement = fixture.debugElement.query(By.css('[data-automation-id="create-button"]')).nativeElement;
+    const isCollapsed = button.classList.contains('app-create-menu--collapsed');
+
+    expect(isCollapsed).toBe(true);
+  });
+
+  it('should render expanded button', async () => {
+    fixture.componentInstance.expanded = true;
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    const button: HTMLButtonElement = fixture.debugElement.query(By.css('[data-automation-id="create-button"]')).nativeElement;
+    const isCollapsed = button.classList.contains('app-create-menu--collapsed');
+
+    expect(isCollapsed).toBe(false);
+  });
+
+  it('should render custom actions', async () => {
+    await clickMenu();
+
+    const menuItems = fixture.debugElement.queryAll(By.css('.app-toolbar-menu-item'));
+    expect(menuItems.length).toBe(1);
+
+    const label: HTMLSpanElement = (menuItems[0].nativeElement as HTMLButtonElement).querySelector('[data-automation-id="menu-item-title"]');
+    expect(label.innerText).toBe('action one');
+  });
+
+  it('should render sub-menus', async () => {
+    getCreateActionsSpy.and.returnValue(
+      of([
+        {
+          id: 'level1',
+          type: ContentActionType.menu,
+          title: 'level one',
+          children: [
+            {
+              id: 'level2',
+              type: ContentActionType.button,
+              title: 'level two'
+            }
+          ]
+        }
+      ])
+    );
+
+    await clickMenu();
+
+    const level1 = fixture.debugElement.query(By.css('#level1')).nativeElement as HTMLButtonElement;
+    level1.click();
+
+    const overlayContainer = TestBed.inject(OverlayContainer);
+    const level2 = overlayContainer.getContainerElement().querySelector('#level2');
+
+    expect(level2).not.toBeNull();
+  });
+
+  it('should recognise if main button is present', async () => {
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    const button: HTMLButtonElement = fixture.debugElement.query(By.css('[data-automation-id="create-button"]')).nativeElement;
+    const isSecondaryButton = button.classList.contains('app-create-menu-secondary-button');
+
+    expect(isSecondaryButton).toBeTrue();
+  });
+});

projects/aca-content/src/lib/components/create-menu/create-menu.component.ts

@@ -0,0 +1,76 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Component, Input, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
+import { ContentActionRef } from '@alfresco/adf-extensions';
+import { takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+import { AppExtensionService } from '@alfresco/aca-shared';
+
+@Component({
+  selector: 'app-create-menu',
+  templateUrl: './create-menu.component.html',
+  styleUrls: ['./create-menu.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'app-create-menu' }
+})
+export class CreateMenuComponent implements OnInit, OnDestroy {
+  createActions: Array<ContentActionRef> = [];
+  onDestroy$: Subject<boolean> = new Subject<boolean>();
+  isMainActionPresent: boolean;
+
+  @Input()
+  showLabel: boolean;
+
+  @Input()
+  expanded: boolean;
+
+  constructor(private extensions: AppExtensionService) {}
+
+  ngOnInit() {
+    this.extensions
+      .getCreateActions()
+      .pipe(takeUntil(this.onDestroy$))
+      .subscribe((createActions) => {
+        this.createActions = createActions;
+      });
+
+    this.extensions
+      .getMainAction()
+      .pipe(takeUntil(this.onDestroy$))
+      .subscribe((mainAction) => {
+        this.isMainActionPresent = !!mainAction;
+      });
+  }
+
+  ngOnDestroy() {
+    this.onDestroy$.next(true);
+    this.onDestroy$.complete();
+  }
+
+  trackByActionId(_: number, obj: ContentActionRef): string {
+    return obj.id;
+  }
+}

projects/aca-content/src/lib/components/create-menu/create-menu.module.ts

@@ -0,0 +1,37 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { NgModule } from '@angular/core';
+import { CreateMenuComponent } from './create-menu.component';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+import { AppToolbarModule } from '../toolbar/toolbar.module';
+
+@NgModule({
+  imports: [CommonModule, CoreModule.forChild(), AppToolbarModule],
+  declarations: [CreateMenuComponent],
+  exports: [CreateMenuComponent]
+})
+export class AppCreateMenuModule {}

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

@@ -0,0 +1,44 @@
+<aca-page-layout>
+  <aca-page-layout-header>
+    <adf-breadcrumb [root]="title" [folderNode]="node" (navigate)="goBack()"> </adf-breadcrumb>
+
+    <adf-toolbar class="adf-toolbar--inline">
+      <ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
+        <aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
+      </ng-container>
+    </adf-toolbar>
+  </aca-page-layout-header>
+
+  <aca-page-layout-content>
+    <div class="acs-details-container">
+      <div class="acs-details-title">
+        <div class="acs-details-breadcrumb" role="heading" aria-level="2" *ngIf="node">
+          <span class="acs-details-breadcrumb-library"> {{ node.name }} </span>
+          -
+          <span class="acs-details-breadcrumb-item">{{ 'APP.INFO_DRAWER.TITLE' | translate }}</span>
+        </div>
+        <div class="acs-close-members-container">
+          <button mat-icon-button data-automation-id="close-library" title="{{ 'APP.INFO_DRAWER.CLOSE_LIBRARY' | translate }}" (click)="goBack()">
+            <mat-icon>close</mat-icon>
+          </button>
+        </div>
+      </div>
+
+      <mat-tab-group [selectedIndex]="activeTab" class="adw-details-tabs">
+        <mat-tab label="{{ 'APP.INFO_DRAWER.TABS.PROPERTIES' | translate }}">
+          <app-metadata-tab *ngIf="node && !isLoading; else loading" [node]="node"> </app-metadata-tab>
+        </mat-tab>
+        <mat-tab label="{{ 'APP.INFO_DRAWER.TABS.COMMENTS' | translate }}">
+          <app-comments-tab *ngIf="node && !isLoading; else loading" [node]="node"> </app-comments-tab>
+        </mat-tab>
+        <mat-tab label="{{ 'APP.INFO_DRAWER.TABS.PERMISSIONS' | translate }}">
+          <adf-permission-list *ngIf="node && !isLoading; else loading" [nodeId]="node.id"></adf-permission-list>
+        </mat-tab>
+      </mat-tab-group>
+    </div>
+  </aca-page-layout-content>
+</aca-page-layout>
+
+<ng-template #loading>
+  <mat-progress-bar color="primary" mode="indeterminate"> </mat-progress-bar>
+</ng-template>

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

@@ -0,0 +1,41 @@
+.acs-details-container {
+  background-color: var(--theme-card-background-color);
+  width: 100%;
+}
+
+.adw-details-tabs {
+  margin-top: 40px;
+  height: calc(100% - 80px);
+
+  .mat-tab-body-wrapper {
+    height: 100%;
+  }
+
+  .mat-tab-labels {
+    text-transform: uppercase;
+  }
+}
+
+.acs-details-title {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .acs-close-members-container {
+    margin-right: 15px;
+  }
+}
+
+.acs-details-breadcrumb {
+  font-size: 18px;
+  margin-left: 20px;
+
+  .acs-details-breadcrumb-library {
+    font-weight: 900;
+  }
+
+  .acs-details-breadcrumb-item {
+    font-weight: 100;
+  }
+}

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

@@ -0,0 +1,109 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AppTestingModule } from '../../testing/app-testing.module';
+import { DetailsComponent } from './details.component';
+import { MetadataTabComponent } from '../info-drawer/metadata-tab/metadata-tab.component';
+import { CommentsTabComponent } from '../info-drawer/comments-tab/comments-tab.component';
+import { ActivatedRoute, Router } from '@angular/router';
+import { of, Subject } from 'rxjs';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { ContentManagementService } from '../../services/content-management.service';
+import { AppExtensionService } from '@alfresco/adf-extensions';
+import { ContentApiService } from '@alfresco/aca-shared';
+import { SetSelectedNodesAction } from '@alfresco/aca-shared/store';
+import { NodeEntry } from '@alfresco/js-api';
+
+describe('DetailsComponent', () => {
+  let component: DetailsComponent;
+  let fixture: ComponentFixture<DetailsComponent>;
+  let contentApiService: ContentApiService;
+  let store;
+  const router: any = {
+    url: '',
+    navigate: jasmine.createSpy('navigate')
+  };
+  const mockStream = new Subject();
+  const storeMock = {
+    dispatch: jasmine.createSpy('dispatch'),
+    select: () => mockStream
+  };
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [AppTestingModule],
+      declarations: [DetailsComponent, CommentsTabComponent, MetadataTabComponent],
+      providers: [
+        ContentManagementService,
+        AppExtensionService,
+        {
+          provide: Router,
+          useValue: router
+        },
+        { provide: Store, useValue: storeMock },
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            snapshot: { data: { preferencePrefix: 'prefix' } },
+            params: of({ nodeId: 'someId', activeTab: 'permissions' })
+          }
+        }
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    });
+
+    fixture = TestBed.createComponent(DetailsComponent);
+    component = fixture.componentInstance;
+    contentApiService = TestBed.inject(ContentApiService);
+    store = TestBed.inject(Store);
+    spyOn(contentApiService, 'getNode').and.returnValue(of({ entry: { id: 'libraryId' } } as NodeEntry));
+  });
+
+  afterEach(() => {
+    fixture.destroy();
+  });
+
+  it('should get node id from router', () => {
+    fixture.detectChanges();
+    expect(component.nodeId).toBe('someId');
+  });
+
+  it('should set active tab from router', () => {
+    fixture.detectChanges();
+    expect(component.activeTab).toBe(2);
+  });
+
+  it('should get node info after setting node from router', () => {
+    fixture.detectChanges();
+    expect(contentApiService.getNode).toHaveBeenCalled();
+  });
+
+  it('should dispatch node selection', () => {
+    fixture.detectChanges();
+    expect(store.dispatch).toHaveBeenCalledWith(new SetSelectedNodesAction([{ entry: { id: 'libraryId' } } as NodeEntry]));
+  });
+});

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

@@ -0,0 +1,99 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Component, OnInit, ViewEncapsulation, OnDestroy } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { PageComponent } from '../page.component';
+import { AppExtensionService, ContentApiService } from '@alfresco/aca-shared';
+import { AppStore, NavigateToPreviousPage, SetSelectedNodesAction } from '@alfresco/aca-shared/store';
+import { Store } from '@ngrx/store';
+import { ContentManagementService } from '../../services/content-management.service';
+import { Subject } from 'rxjs';
+
+@Component({
+  selector: 'app-details-manager',
+  templateUrl: './details.component.html',
+  styleUrls: ['./details.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class DetailsComponent extends PageComponent implements OnInit, OnDestroy {
+  nodeId: string;
+  isLoading: boolean;
+  onDestroy$ = new Subject<boolean>();
+  activeTab = 1;
+
+  constructor(
+    private route: ActivatedRoute,
+    private contentApi: ContentApiService,
+    store: Store<AppStore>,
+    content: ContentManagementService,
+    extensions: AppExtensionService
+  ) {
+    super(store, extensions, content);
+  }
+
+  ngOnInit(): void {
+    super.ngOnInit();
+    this.isLoading = true;
+    const { route } = this;
+    const { data } = route.snapshot;
+    this.title = data.title;
+
+    this.route.params.subscribe((params) => {
+      this.isLoading = true;
+      this.setActiveTab(params.activeTab);
+      this.nodeId = params.nodeId;
+      this.contentApi.getNode(this.nodeId).subscribe((node) => {
+        this.node = node.entry;
+        this.isLoading = false;
+        this.store.dispatch(new SetSelectedNodesAction([{ entry: this.node }]));
+      });
+    });
+  }
+
+  setActiveTab(tabName: string) {
+    switch (tabName) {
+      case 'comments':
+        this.activeTab = 1;
+        break;
+      case 'permissions':
+        this.activeTab = 2;
+        break;
+      case 'metadata':
+      default:
+        this.activeTab = 0;
+    }
+  }
+
+  goBack() {
+    this.store.dispatch(new NavigateToPreviousPage());
+  }
+
+  ngOnDestroy(): void {
+    this.store.dispatch(new SetSelectedNodesAction([]));
+    this.onDestroy$.next();
+    this.onDestroy$.complete();
+  }
+}

projects/aca-content/src/lib/components/dl-custom-components/document-list-custom-components.module.ts

@@ -0,0 +1,40 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { CustomNameColumnComponent } from './name-column/name-column.component';
+import { LockedByModule } from '@alfresco/aca-shared';
+import { ContentModule } from '@alfresco/adf-content-services';
+import { MaterialModule } from '../../material.module';
+import { CoreModule } from '@alfresco/adf-core';
+import { ThumbnailColumnComponent } from './thumbnail-column/thumbnail-column.component';
+
+@NgModule({
+  imports: [BrowserModule, CoreModule.forChild(), ContentModule.forChild(), MaterialModule, LockedByModule],
+  declarations: [CustomNameColumnComponent, ThumbnailColumnComponent],
+  exports: [CustomNameColumnComponent, ThumbnailColumnComponent]
+})
+export class DocumentListCustomComponentsModule {}

projects/aca-content/src/lib/components/dl-custom-components/name-column/name-column.component.html

@@ -0,0 +1,24 @@
+<div
+  class="aca-custom-name-column"
+  [ngClass]="{
+    'aca-name-column-container': isFile && isFileWriteLocked
+  }"
+>
+  <span
+    role="link"
+    [attr.aria-label]="
+      (isFile ? 'CUSTOM_NAME_COLUMN.ACCESSIBILITY.FILE_LINK_ARIA_LABEL' : 'CUSTOM_NAME_COLUMN.ACCESSIBILITY.FOLDER_LINK_ARIA_LABEL')
+        | translate: { name: displayText$ | async }
+    "
+    class="adf-datatable-cell-value"
+    title="{{ node | adfNodeNameTooltip }}"
+    (click)="onLinkClick($event)"
+    (keyup.enter)="onLinkClick($event)"
+  >
+    {{ displayText$ | async }}
+  </span>
+
+  <ng-container *ngIf="isFile && isFileWriteLocked">
+    <aca-locked-by [node]="context.row.node"></aca-locked-by>
+  </ng-container>
+</div>

projects/aca-content/src/lib/components/dl-custom-components/name-column/name-column.component.scss

@@ -0,0 +1,19 @@
+.aca-custom-name-column {
+  display: block;
+  align-items: center;
+
+  .aca-name-column-container {
+    aca-locked-by {
+      display: flex;
+      align-items: center;
+      color: rgba(0, 0, 0, 0.54);
+      max-width: 100%;
+      padding: 0 10px;
+
+      .locked_by--name {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}

projects/aca-content/src/lib/components/dl-custom-components/name-column/name-column.component.spec.ts

@@ -0,0 +1,124 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { CustomNameColumnComponent } from './name-column.component';
+import { DocumentListCustomComponentsModule } from '../document-list-custom-components.module';
+import { Actions } from '@ngrx/effects';
+import { StoreModule } from '@ngrx/store';
+import { TestBed } from '@angular/core/testing';
+import { CoreModule } from '@alfresco/adf-core';
+import { TranslateModule } from '@ngx-translate/core';
+
+describe('CustomNameColumnComponent', () => {
+  let fixture;
+  let component;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        TranslateModule.forRoot(),
+        CoreModule.forRoot(),
+        DocumentListCustomComponentsModule,
+        StoreModule.forRoot({ app: () => {} }, { initialState: {} })
+      ],
+      providers: [Actions]
+    });
+
+    fixture = TestBed.createComponent(CustomNameColumnComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should not render lock element if file is not locked', () => {
+    component.context = {
+      row: {
+        node: {
+          entry: {
+            isFile: true,
+            id: 'nodeId'
+          }
+        },
+        getValue: (key: string) => key
+      }
+    };
+
+    fixture.detectChanges();
+
+    expect(fixture.debugElement.nativeElement.querySelector('aca-locked-by')).toBe(null);
+  });
+
+  it('should not render lock element if node is not a file', () => {
+    component.context = {
+      row: {
+        node: {
+          entry: {
+            isFile: false,
+            id: 'nodeId'
+          }
+        },
+        getValue: (key: string) => key
+      }
+    };
+
+    fixture.detectChanges();
+
+    expect(fixture.debugElement.nativeElement.querySelector('aca-locked-by')).toBe(null);
+  });
+
+  it('should render lock element if file is locked', () => {
+    component.context = {
+      row: {
+        node: {
+          entry: {
+            isFile: true,
+            id: 'nodeId',
+            properties: { 'cm:lockType': 'WRITE_LOCK' }
+          }
+        },
+        getValue: (key: string) => key
+      }
+    };
+
+    fixture.detectChanges();
+
+    expect(fixture.debugElement.nativeElement.querySelector('aca-locked-by')).not.toBe(null);
+  });
+
+  it('should call parent component onClick method', () => {
+    const event = new MouseEvent('click');
+    spyOn(component, 'onClick');
+
+    component.onLinkClick(event);
+
+    expect(component.onClick).toHaveBeenCalled();
+  });
+
+  it('should prevent event propagation', () => {
+    const event = new MouseEvent('click');
+    spyOn(event, 'stopPropagation');
+
+    component.onLinkClick(event);
+    expect(event.stopPropagation).toHaveBeenCalled();
+  });
+});

projects/aca-content/src/lib/components/dl-custom-components/name-column/name-column.component.ts

@@ -0,0 +1,99 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { NameColumnComponent } from '@alfresco/adf-content-services';
+import { AlfrescoApiService } from '@alfresco/adf-core';
+import { ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { Actions, ofType } from '@ngrx/effects';
+import { Subject } from 'rxjs';
+import { filter, takeUntil } from 'rxjs/operators';
+import { NodeActionTypes } from '@alfresco/aca-shared/store';
+import { isLocked } from '@alfresco/aca-shared';
+
+@Component({
+  selector: 'aca-custom-name-column',
+  templateUrl: './name-column.component.html',
+  styleUrls: ['./name-column.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    class: 'adf-datatable-content-cell adf-datatable-link adf-name-column aca-custom-name-column'
+  }
+})
+export class CustomNameColumnComponent extends NameColumnComponent implements OnInit, OnDestroy {
+  private onDestroy$$ = new Subject<boolean>();
+
+  constructor(element: ElementRef, private cd: ChangeDetectorRef, private actions$: Actions, private apiService: AlfrescoApiService) {
+    super(element, apiService);
+  }
+
+  ngOnInit() {
+    this.updateValue();
+
+    this.apiService.nodeUpdated.pipe(takeUntil(this.onDestroy$$)).subscribe((node: any) => {
+      const row = this.context.row;
+      if (row) {
+        const { entry } = row.node;
+        const currentId = entry.nodeId || entry.id;
+        const updatedId = node.nodeId || node.id;
+
+        if (currentId === updatedId) {
+          entry.name = node.name;
+          row.node = { entry };
+          this.updateValue();
+        }
+      }
+    });
+
+    this.actions$
+      .pipe(
+        ofType<any>(NodeActionTypes.EditOffline),
+        filter((val) => this.node.entry.id === val.payload.entry.id),
+        takeUntil(this.onDestroy$$)
+      )
+      .subscribe(() => {
+        this.cd.detectChanges();
+      });
+  }
+
+  onLinkClick(event: Event) {
+    event.stopPropagation();
+    this.onClick();
+  }
+
+  ngOnDestroy() {
+    super.ngOnDestroy();
+
+    this.onDestroy$$.next(true);
+    this.onDestroy$$.complete();
+  }
+
+  get isFile(): boolean {
+    return this.node && this.node.entry && !this.node.entry.isFolder;
+  }
+
+  get isFileWriteLocked(): boolean {
+    return isLocked(this.node);
+  }
+}

projects/aca-content/src/lib/components/dl-custom-components/thumbnail-column/thumbnail-column.component.html

@@ -0,0 +1,7 @@
+<mat-icon class="adf-datatable-selected" *ngIf="context.row.isSelected" svgIcon="selected"></mat-icon>
+
+<img *ngIf="!context.row.isSelected"
+     class="adf-datatable-center-img-ie"
+     src="{{ getThumbnail(context) }}"
+     [alt]="getToolTip(context)"
+     [matTooltip]="getToolTip(context)">

projects/aca-content/src/lib/components/dl-custom-components/thumbnail-column/thumbnail-column.component.ts

@@ -0,0 +1,48 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { TranslationService } from '@alfresco/adf-core';
+
+@Component({
+  selector: 'aca-custom-thumbnail-column',
+  templateUrl: './thumbnail-column.component.html',
+  encapsulation: ViewEncapsulation.None
+})
+export class ThumbnailColumnComponent {
+  @Input()
+  context: any;
+
+  constructor(private translation: TranslationService) {}
+
+  getThumbnail({ data, row, col }): string {
+    return data.getValue(row, col);
+  }
+
+  getToolTip({ row }): string {
+    const user = row.node?.entry?.properties && row.node.entry.properties['cm:lockOwner'] && row.node.entry.properties['cm:lockOwner'].displayName;
+    return user ? `${this.translation.instant('APP.LOCKED_BY')} ${user}` : '';
+  }
+}

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

@@ -0,0 +1,85 @@
+<aca-page-layout>
+  <aca-page-layout-header>
+    <adf-breadcrumb root="APP.BROWSE.LIBRARIES.MENU.FAVORITE_LIBRARIES.TITLE"> </adf-breadcrumb>
+
+    <adf-toolbar class="adf-toolbar--inline">
+      <ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
+        <aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
+      </ng-container>
+    </adf-toolbar>
+  </aca-page-layout-header>
+
+  <aca-page-layout-content>
+    <div class="main-content">
+      <adf-document-list
+        #documentList
+        acaDocumentList
+        acaContextActions
+        [display]="documentDisplayMode$ | async"
+        [node]="$any(list)"
+        [loading]="isLoading"
+        selectionMode="single"
+        [navigate]="false"
+        [sorting]="['title', 'asc']"
+        sortingMode="client"
+        (node-dblclick)="handleNodeClick($event)"
+        [imageResolver]="imageResolver"
+        (name-click)="handleNodeClick($event)"
+      >
+        <adf-custom-empty-content-template>
+          <adf-empty-content
+            icon="library_books"
+            [title]="'APP.BROWSE.LIBRARIES.EMPTY_STATE.FAVORITE_LIBRARIES.TITLE'"
+            subtitle="APP.BROWSE.LIBRARIES.EMPTY_STATE.FAVORITE_LIBRARIES.TEXT"
+          >
+          </adf-empty-content>
+        </adf-custom-empty-content-template>
+
+        <data-columns>
+          <ng-container *ngFor="let column of columns; trackBy: trackByColumnId">
+            <ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
+              <data-column
+                [key]="column.key"
+                [title]="column.title"
+                [type]="column.type"
+                [format]="column.format"
+                [class]="column.class"
+                [sortable]="column.sortable"
+              >
+                <ng-template let-context>
+                  <adf-dynamic-column [id]="column.template" [context]="context"> </adf-dynamic-column>
+                </ng-template>
+              </data-column>
+            </ng-container>
+
+            <ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
+              <data-column
+                [key]="column.key"
+                [title]="column.title"
+                [type]="column.type"
+                [format]="column.format"
+                [class]="column.class"
+                [sortable]="column.sortable"
+              >
+              </data-column>
+            </ng-container>
+          </ng-container>
+        </data-columns>
+      </adf-document-list>
+
+      <adf-pagination
+        [target]="documentList"
+        [pagination]="pagination"
+        (changePageSize)="onChangePageSize($event)"
+        (changePageNumber)="onChange($event)"
+        (nextPage)="onChange($event)"
+        (prevPage)="onChange($event)"
+      >
+      </adf-pagination>
+    </div>
+
+    <div class="sidebar" *ngIf="infoDrawerOpened$ | async">
+      <aca-info-drawer [node]="selection.last"></aca-info-drawer>
+    </div>
+  </aca-page-layout-content>
+</aca-page-layout>

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

@@ -0,0 +1,194 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { Router } from '@angular/router';
+import { AlfrescoApiService, AppConfigModule, DataTableComponent, UserPreferencesService } from '@alfresco/adf-core';
+import { DocumentListComponent, NodeFavoriteDirective } from '@alfresco/adf-content-services';
+import { FavoriteLibrariesComponent } from './favorite-libraries.component';
+import { AppTestingModule } from '../../testing/app-testing.module';
+import { AppHookService, ContentApiService } from '@alfresco/aca-shared';
+import { EffectsModule } from '@ngrx/effects';
+import { RouterEffects } from '@alfresco/aca-shared/store';
+import { of, throwError } from 'rxjs';
+import { LibraryEffects } from '../../store/effects';
+import { NodeEntry } from '@alfresco/js-api';
+
+describe('FavoriteLibrariesComponent', () => {
+  let fixture: ComponentFixture<FavoriteLibrariesComponent>;
+  let component: FavoriteLibrariesComponent;
+  let alfrescoApi: AlfrescoApiService;
+  let userPreference: UserPreferencesService;
+  let contentApiService: ContentApiService;
+  let router: Router;
+  let page;
+  let appHookService: AppHookService;
+
+  beforeEach(() => {
+    page = {
+      list: {
+        entries: [{ entry: { id: 1 } }, { entry: { id: 2 } }],
+        pagination: { data: 'data' }
+      }
+    };
+  });
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [AppTestingModule, EffectsModule.forRoot([RouterEffects, LibraryEffects]), AppConfigModule],
+      declarations: [DataTableComponent, NodeFavoriteDirective, DocumentListComponent, FavoriteLibrariesComponent],
+      schemas: [NO_ERRORS_SCHEMA]
+    });
+
+    fixture = TestBed.createComponent(FavoriteLibrariesComponent);
+    component = fixture.componentInstance;
+
+    alfrescoApi = TestBed.inject(AlfrescoApiService);
+    contentApiService = TestBed.inject(ContentApiService);
+    userPreference = TestBed.inject(UserPreferencesService);
+    appHookService = TestBed.inject(AppHookService);
+    alfrescoApi.reset();
+    router = TestBed.inject(Router);
+
+    spyOn(contentApiService, 'getNode').and.returnValue(of({ entry: { id: 'libraryId' } } as NodeEntry));
+  });
+
+  describe('on initialization', () => {
+    it('should set data', () => {
+      spyOn(contentApiService, 'getFavoriteLibraries').and.returnValue(of(page));
+      fixture.detectChanges();
+
+      expect(component.list).toBe(page);
+      expect(component.pagination).toBe(page.list.pagination);
+    });
+
+    it('should get data with user preference pagination size', () => {
+      userPreference.paginationSize = 1;
+      spyOn(contentApiService, 'getFavoriteLibraries').and.returnValue(of(page));
+
+      fixture.detectChanges();
+
+      expect(contentApiService.getFavoriteLibraries).toHaveBeenCalledWith('-me-', {
+        maxItems: userPreference.paginationSize
+      });
+    });
+
+    it('should set data on error', () => {
+      spyOn(contentApiService, 'getFavoriteLibraries').and.returnValue(throwError('error'));
+      fixture.detectChanges();
+
+      expect(component.list).toBe(null);
+      expect(component.pagination).toBe(null);
+      expect(component.isLoading).toBe(false);
+    });
+  });
+
+  describe('Node navigation', () => {
+    it('does not navigate when id is not passed', () => {
+      spyOn(router, 'navigate').and.stub();
+      component.navigateTo(null);
+
+      expect(router.navigate).not.toHaveBeenCalled();
+    });
+
+    it('does not navigate when id is not passed', () => {
+      spyOn(router, 'navigate').and.stub();
+      component.navigateTo({ entry: { guid: 'guid' } } as any);
+
+      expect(router.navigate).toHaveBeenCalledWith(['favorite/libraries', 'libraryId']);
+    });
+  });
+
+  describe('Reload on actions', () => {
+    beforeEach(() => {
+      spyOn(contentApiService, 'getFavoriteLibraries').and.returnValue(of(page));
+      fixture.detectChanges();
+    });
+
+    it('should reload on libraryDeleted action', () => {
+      appHookService.libraryDeleted.next();
+      expect(contentApiService.getFavoriteLibraries).toHaveBeenCalled();
+    });
+
+    it('should reload on libraryUpdated action', () => {
+      appHookService.libraryUpdated.next();
+      expect(contentApiService.getFavoriteLibraries).toHaveBeenCalled();
+    });
+
+    it('should reload on favoriteLibraryToggle action', () => {
+      appHookService.favoriteLibraryToggle.next();
+      expect(contentApiService.getFavoriteLibraries).toHaveBeenCalled();
+    });
+
+    it('should reload on libraryJoined action', () => {
+      appHookService.libraryJoined.next();
+      expect(contentApiService.getFavoriteLibraries).toHaveBeenCalled();
+    });
+
+    it('should reload on libraryLeft action', () => {
+      appHookService.libraryLeft.next();
+      expect(contentApiService.getFavoriteLibraries).toHaveBeenCalled();
+    });
+  });
+
+  describe('Pagination', () => {
+    let pagination;
+
+    beforeEach(() => {
+      pagination = {
+        count: 100,
+        hasMoreItems: true,
+        totalItems: 300,
+        skipCount: 25,
+        maxItems: 25
+      };
+    });
+
+    it('should get list with pagination data onChange event', () => {
+      spyOn(contentApiService, 'getFavoriteLibraries').and.returnValue(of(page));
+
+      component.onChange(pagination);
+
+      expect(contentApiService.getFavoriteLibraries).toHaveBeenCalledWith('-me-', pagination);
+    });
+
+    it('should get list with pagination data onChangePageSize event', () => {
+      spyOn(contentApiService, 'getFavoriteLibraries').and.returnValue(of(page));
+
+      component.onChangePageSize(pagination);
+
+      expect(contentApiService.getFavoriteLibraries).toHaveBeenCalledWith('-me-', pagination);
+    });
+
+    it('should set preference page size onChangePageSize event', () => {
+      spyOn(contentApiService, 'getFavoriteLibraries').and.returnValue(of(page));
+
+      component.onChangePageSize(pagination);
+
+      expect(userPreference.paginationSize).toBe(pagination.maxItems);
+    });
+  });
+});

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

@@ -0,0 +1,123 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { SiteEntry, FavoritePaging, Pagination } from '@alfresco/js-api';
+import { ContentManagementService } from '../../services/content-management.service';
+import { AppExtensionService, AppHookService, ContentApiService } from '@alfresco/aca-shared';
+import { NavigateLibraryAction } from '@alfresco/aca-shared/store';
+import { PageComponent } from '../page.component';
+import { UserPreferencesService } from '@alfresco/adf-core';
+import { DocumentListPresetRef } from '@alfresco/adf-extensions';
+
+@Component({
+  templateUrl: './favorite-libraries.component.html'
+})
+export class FavoriteLibrariesComponent extends PageComponent implements OnInit {
+  pagination: Pagination = new Pagination({
+    skipCount: 0,
+    maxItems: 25,
+    totalItems: 0
+  });
+  isLoading = false;
+  list: FavoritePaging;
+  isSmallScreen = false;
+  columns: DocumentListPresetRef[] = [];
+
+  constructor(
+    content: ContentManagementService,
+    store: Store<any>,
+    extensions: AppExtensionService,
+    private appHookService: AppHookService,
+    private contentApiService: ContentApiService,
+    private breakpointObserver: BreakpointObserver,
+    private preferences: UserPreferencesService,
+    private changeDetectorRef: ChangeDetectorRef
+  ) {
+    super(store, extensions, content);
+  }
+
+  ngOnInit() {
+    super.ngOnInit();
+
+    this.getList({ maxItems: this.preferences.paginationSize });
+
+    this.subscriptions = this.subscriptions.concat([
+      this.appHookService.libraryDeleted.subscribe(() => this.reloadList()),
+      this.appHookService.libraryUpdated.subscribe(() => this.reloadList()),
+      this.appHookService.libraryJoined.subscribe(() => this.reloadList()),
+      this.appHookService.libraryLeft.subscribe(() => this.reloadList()),
+      this.appHookService.favoriteLibraryToggle.subscribe(() => this.reloadList()),
+
+      this.breakpointObserver.observe([Breakpoints.HandsetPortrait, Breakpoints.HandsetLandscape]).subscribe((result) => {
+        this.isSmallScreen = result.matches;
+      })
+    ]);
+    this.columns = this.extensions.documentListPresets.favoriteLibraries || [];
+  }
+
+  navigateTo(node: SiteEntry) {
+    if (node && node.entry && node.entry.guid) {
+      this.store.dispatch(new NavigateLibraryAction(node.entry.guid, 'favorite/libraries'));
+    }
+  }
+
+  handleNodeClick(event: Event) {
+    this.navigateTo((event as CustomEvent).detail?.node);
+  }
+
+  onChangePageSize(pagination: Pagination) {
+    this.preferences.paginationSize = pagination.maxItems;
+    this.getList(pagination);
+  }
+
+  onChange(pagination: Pagination) {
+    this.getList(pagination);
+  }
+
+  private getList(pagination: Pagination) {
+    this.isLoading = true;
+    this.contentApiService.getFavoriteLibraries('-me-', pagination).subscribe(
+      (favoriteLibraries: FavoritePaging) => {
+        this.list = favoriteLibraries;
+        this.pagination = favoriteLibraries.list.pagination;
+        this.isLoading = false;
+        this.changeDetectorRef.detectChanges();
+      },
+      () => {
+        this.list = null;
+        this.pagination = null;
+        this.isLoading = false;
+      }
+    );
+  }
+
+  private reloadList() {
+    this.reload();
+    this.getList(this.pagination);
+  }
+}

projects/aca-content/src/lib/components/favorites/favorites.component.html

@@ -0,0 +1,72 @@
+<aca-page-layout>
+  <aca-page-layout-header>
+    <adf-breadcrumb root="APP.BROWSE.FAVORITES.TITLE"> </adf-breadcrumb>
+
+    <adf-toolbar class="adf-toolbar--inline">
+      <ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
+        <aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
+      </ng-container>
+    </adf-toolbar>
+  </aca-page-layout-header>
+
+  <aca-page-layout-content>
+    <div class="main-content">
+      <adf-document-list
+        #documentList
+        acaDocumentList
+        acaContextActions
+        [display]="documentDisplayMode$ | async"
+        currentFolderId="-favorites-"
+        selectionMode="multiple"
+        [navigate]="false"
+        [sorting]="['modifiedAt', 'desc']"
+        sortingMode="client"
+        [imageResolver]="imageResolver"
+        (node-dblclick)="handleNodeClick($event)"
+        (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>
+        </adf-custom-empty-content-template>
+
+        <data-columns>
+          <ng-container *ngFor="let column of columns; trackBy: trackByColumnId">
+            <ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
+              <data-column
+                [key]="column.key"
+                [title]="column.title"
+                [type]="column.type"
+                [format]="column.format"
+                [class]="column.class"
+                [sortable]="column.sortable"
+              >
+                <ng-template let-context>
+                  <adf-dynamic-column [id]="column.template" [context]="context"> </adf-dynamic-column>
+                </ng-template>
+              </data-column>
+            </ng-container>
+
+            <ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
+              <data-column
+                [key]="column.key"
+                [title]="column.title"
+                [type]="column.type"
+                [format]="column.format"
+                [class]="column.class"
+                [sortable]="column.sortable"
+              >
+              </data-column>
+            </ng-container>
+          </ng-container>
+        </data-columns>
+      </adf-document-list>
+
+      <adf-pagination acaPagination [target]="documentList"> </adf-pagination>
+    </div>
+
+    <div class="sidebar" *ngIf="infoDrawerOpened$ | async">
+      <aca-info-drawer [node]="selection.last"></aca-info-drawer>
+    </div>
+  </aca-page-layout-content>
+</aca-page-layout>

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

@@ -0,0 +1,136 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { Router } from '@angular/router';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { DataTableComponent, AppConfigModule } from '@alfresco/adf-core';
+import { CustomResourcesService, DocumentListComponent, NodeFavoriteDirective } from '@alfresco/adf-content-services';
+import { of } from 'rxjs';
+import { FavoritesComponent } from './favorites.component';
+import { AppTestingModule } from '../../testing/app-testing.module';
+import { ContentApiService } from '@alfresco/aca-shared';
+
+describe('FavoritesComponent', () => {
+  let fixture: ComponentFixture<FavoritesComponent>;
+  let component: FavoritesComponent;
+  let contentApi: ContentApiService;
+  let router: Router;
+  let node;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [AppTestingModule, AppConfigModule],
+      declarations: [DataTableComponent, NodeFavoriteDirective, DocumentListComponent, FavoritesComponent],
+      providers: [
+        {
+          provide: Router,
+          useValue: {
+            url: 'favorites',
+            navigate: () => {}
+          }
+        }
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    });
+
+    const page: any = {
+      list: {
+        entries: [{ entry: { id: 1, target: { file: {} } } }, { entry: { id: 2, target: { folder: {} } } }],
+        pagination: { data: 'data' }
+      }
+    };
+
+    node = {
+      id: 'folder-node',
+      isFolder: true,
+      isFile: false,
+      path: {
+        elements: []
+      }
+    };
+
+    fixture = TestBed.createComponent(FavoritesComponent);
+    component = fixture.componentInstance;
+
+    const customResourcesService = TestBed.inject(CustomResourcesService);
+    spyOn(customResourcesService, 'loadFavorites').and.returnValue(of(page));
+
+    contentApi = TestBed.inject(ContentApiService);
+    router = TestBed.inject(Router);
+  });
+
+  describe('Node navigation', () => {
+    beforeEach(() => {
+      spyOn(contentApi, 'getNode').and.returnValue(of({ entry: node }));
+      spyOn(router, 'navigate').and.stub();
+      fixture.detectChanges();
+    });
+
+    it('navigates to `/libraries` if node path has `Sites`', () => {
+      node.path.elements = [{ name: 'Sites' }];
+
+      component.navigate(node);
+
+      expect(router.navigate).toHaveBeenCalledWith(['/libraries', 'folder-node']);
+    });
+
+    it('navigates to `/personal-files` if node path has no `Sites`', () => {
+      node.path.elements = [{ name: 'something else' }];
+
+      component.navigate(node);
+
+      expect(router.navigate).toHaveBeenCalledWith(['/personal-files', 'folder-node']);
+    });
+
+    it('does not navigate when node is not folder', () => {
+      node.isFolder = false;
+
+      component.navigate(node);
+
+      expect(router.navigate).not.toHaveBeenCalled();
+    });
+  });
+
+  it('should navigate if node is folder', () => {
+    const nodeEntity: any = { entry: { isFolder: true } };
+    spyOn(component, 'navigate').and.stub();
+    fixture.detectChanges();
+
+    component.onNodeDoubleClick(nodeEntity);
+    expect(component.navigate).toHaveBeenCalledWith(nodeEntity.entry);
+  });
+
+  it('should call showPreview if node is file', () => {
+    const nodeEntity: any = { entry: { isFile: true } };
+    spyOn(component, 'showPreview').and.stub();
+    fixture.detectChanges();
+
+    component.onNodeDoubleClick(nodeEntity);
+    expect(component.showPreview).toHaveBeenCalledWith(nodeEntity, {
+      location: 'favorites'
+    });
+  });
+});

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

@@ -0,0 +1,106 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { AppExtensionService, ContentApiService } from '@alfresco/aca-shared';
+import { AppStore } from '@alfresco/aca-shared/store';
+import { UploadService } from '@alfresco/adf-core';
+import { MinimalNodeEntity, MinimalNodeEntryEntity, PathElementEntity, PathInfo } from '@alfresco/js-api';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { debounceTime, map } from 'rxjs/operators';
+import { ContentManagementService } from '../../services/content-management.service';
+import { PageComponent } from '../page.component';
+import { DocumentListPresetRef } from '@alfresco/adf-extensions';
+
+@Component({
+  templateUrl: './favorites.component.html'
+})
+export class FavoritesComponent extends PageComponent implements OnInit {
+  isSmallScreen = false;
+
+  columns: DocumentListPresetRef[] = [];
+
+  constructor(
+    private router: Router,
+    store: Store<AppStore>,
+    extensions: AppExtensionService,
+    private contentApi: ContentApiService,
+    content: ContentManagementService,
+    private uploadService: UploadService,
+    private breakpointObserver: BreakpointObserver
+  ) {
+    super(store, extensions, content);
+  }
+
+  ngOnInit() {
+    super.ngOnInit();
+
+    this.subscriptions = this.subscriptions.concat([
+      this.uploadService.fileUploadComplete.pipe(debounceTime(300)).subscribe((_) => this.reload()),
+      this.uploadService.fileUploadDeleted.pipe(debounceTime(300)).subscribe((_) => this.reload()),
+
+      this.breakpointObserver.observe([Breakpoints.HandsetPortrait, Breakpoints.HandsetLandscape]).subscribe((result) => {
+        this.isSmallScreen = result.matches;
+      })
+    ]);
+
+    this.columns = this.extensions.documentListPresets.favorites;
+  }
+
+  navigate(favorite: MinimalNodeEntryEntity) {
+    const { isFolder, id } = favorite;
+
+    // TODO: rework as it will fail on non-English setups
+    const isSitePath = (path: PathInfo): boolean => path && path.elements && path.elements.some(({ name }: PathElementEntity) => name === 'Sites');
+
+    if (isFolder) {
+      this.contentApi
+        .getNode(id)
+        .pipe(map((node) => node.entry))
+        .subscribe(({ path }: MinimalNodeEntryEntity) => {
+          const routeUrl = isSitePath(path) ? '/libraries' : '/personal-files';
+          this.router.navigate([routeUrl, id]);
+        });
+    }
+  }
+
+  onNodeDoubleClick(node: MinimalNodeEntity) {
+    if (node && node.entry) {
+      if (node.entry.isFolder) {
+        this.navigate(node.entry);
+      }
+
+      if (node.entry.isFile) {
+        this.showPreview(node, { location: this.router.url });
+      }
+    }
+  }
+
+  handleNodeClick(event: Event) {
+    this.onNodeDoubleClick((event as CustomEvent).detail?.node);
+  }
+}

projects/aca-content/src/lib/components/files/files.component.html

@@ -0,0 +1,100 @@
+<aca-page-layout [hasError]="!isValidPath">
+  <aca-page-layout-header>
+    <adf-breadcrumb [root]="title" [folderNode]="node" [maxItems]="isSmallScreen ? 1 : 0" (navigate)="onBreadcrumbNavigate($event)"> </adf-breadcrumb>
+
+    <adf-toolbar class="adf-toolbar--inline">
+      <ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
+        <aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
+      </ng-container>
+    </adf-toolbar>
+  </aca-page-layout-header>
+
+  <aca-page-layout-error>
+    <aca-generic-error></aca-generic-error>
+  </aca-page-layout-error>
+
+  <aca-page-layout-content>
+    <div class="main-content" *ngIf="!(showLoader$ | async)">
+      <adf-upload-drag-area [rootFolderId]="node?.id" [disabled]="!canUpload" (updateFileVersion)="onUploadNewVersion($event)">
+        <adf-document-list
+          #documentList
+          acaDocumentList
+          acaContextActions
+          [display]="documentDisplayMode$ | async"
+          selectionMode="multiple"
+          [currentFolderId]="node?.id"
+          [loading]="true"
+          [showHeader]="showHeader"
+          [node]="nodeResult"
+          [allowDropFiles]="true"
+          [navigate]="false"
+          [sorting]="['name', 'ASC']"
+          [imageResolver]="imageResolver"
+          [headerFilters]="true"
+          [filterValue]="queryParams"
+          (node-dblclick)="handleNodeClick($event)"
+          (name-click)="handleNodeClick($event)"
+          (sorting-changed)="onSortingChanged($event)"
+          (filterSelection)="onFilterSelected($event)"
+          (error)="onError()"
+        >
+          <data-columns>
+            <ng-container *ngFor="let column of columns; trackBy: trackByColumnId">
+              <ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
+                <data-column
+                  [key]="column.key"
+                  [title]="column.title"
+                  [type]="column.type"
+                  [format]="column.format"
+                  [class]="column.class"
+                  [sortable]="column.sortable"
+                  [sortingKey]="column.sortingKey || column.key"
+                >
+                  <ng-template let-context>
+                    <adf-dynamic-column [id]="column.template" [context]="context"> </adf-dynamic-column>
+                  </ng-template>
+                </data-column>
+              </ng-container>
+
+              <ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
+                <data-column
+                  [key]="column.key"
+                  [title]="column.title"
+                  [type]="column.type"
+                  [format]="column.format"
+                  [class]="column.class"
+                  [sortable]="column.sortable"
+                  [sortingKey]="column.sortingKey || column.key"
+                >
+                </data-column>
+              </ng-container>
+            </ng-container>
+          </data-columns>
+
+          <adf-custom-empty-content-template *ngIf="isFilterHeaderActive()">
+            <ng-container>
+              <div class="empty-search__block" aria-live="polite">
+                <p class="empty-search__text">
+                  {{ 'APP.BROWSE.SEARCH.NO_FILTER_RESULTS' | translate }}
+                </p>
+              </div>
+            </ng-container>
+          </adf-custom-empty-content-template>
+        </adf-document-list>
+
+        <adf-pagination acaPagination [target]="documentList"> </adf-pagination>
+      </adf-upload-drag-area>
+    </div>
+
+    <mat-progress-spinner *ngIf="showLoader$ | async"
+      id="adf-document-list-loading"
+      class="adf-document-list-loading-margin"
+      [color]="'primary'"
+      [mode]="'indeterminate'">
+    </mat-progress-spinner>
+
+    <div class="sidebar" *ngIf="infoDrawerOpened$ | async">
+      <aca-info-drawer [node]="selection.last"></aca-info-drawer>
+    </div>
+  </aca-page-layout-content>
+</aca-page-layout>

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

@@ -0,0 +1,436 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { TestBed, fakeAsync, tick, ComponentFixture } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA, SimpleChange, SimpleChanges } from '@angular/core';
+import { Router, ActivatedRoute, convertToParamMap } from '@angular/router';
+import { DataTableComponent, UploadService, AppConfigModule, DataTableModule, PaginationModule } from '@alfresco/adf-core';
+import { DocumentListComponent, DocumentListService, FilterSearch, PathElementEntity, NodeFavoriteDirective } from '@alfresco/adf-content-services';
+import { NodeActionsService } from '../../services/node-actions.service';
+import { FilesComponent } from './files.component';
+import { AppTestingModule } from '../../testing/app-testing.module';
+import { ContentApiService, SharedDirectivesModule } from '@alfresco/aca-shared';
+import { of, throwError } from 'rxjs';
+import { By } from '@angular/platform-browser';
+import { DirectivesModule } from '../../directives/directives.module';
+import { NodeEntry, NodePaging } from '@alfresco/js-api';
+
+describe('FilesComponent', () => {
+  let node;
+  let fixture: ComponentFixture<FilesComponent>;
+  let component: FilesComponent;
+  let uploadService: UploadService;
+  let nodeActionsService: NodeActionsService;
+  let contentApi: ContentApiService;
+  let route: ActivatedRoute;
+  let router: any = {
+    url: '',
+    navigate: jasmine.createSpy('navigate')
+  };
+
+  let spyContent = null;
+  let loadFolderByNodeIdSpy: jasmine.Spy;
+
+  function verifyEmptyFilterTemplate() {
+    const template = fixture.debugElement.query(By.css('.empty-search__block')).nativeElement as HTMLElement;
+    expect(template).toBeDefined();
+    expect(template.innerText).toBe('APP.BROWSE.SEARCH.NO_FILTER_RESULTS');
+  }
+
+  function verifyEmptyTemplate() {
+    const template = fixture.debugElement.query(By.css('.adf-empty-list_template'));
+    expect(template).not.toBeNull();
+  }
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [AppTestingModule, DataTableModule, PaginationModule, SharedDirectivesModule, DirectivesModule, AppConfigModule],
+      declarations: [FilesComponent, DataTableComponent, NodeFavoriteDirective, DocumentListComponent],
+      providers: [
+        {
+          provide: Router,
+          useValue: router
+        },
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            snapshot: { data: { preferencePrefix: 'prefix' }, paramMap: convertToParamMap({ folderId: undefined }) },
+            params: of({ folderId: 'someId' }),
+            queryParamMap: of({})
+          }
+        }
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    });
+
+    fixture = TestBed.createComponent(FilesComponent);
+    component = fixture.componentInstance;
+
+    const documentListService = TestBed.inject(DocumentListService);
+    const fakeNodeEntry: NodeEntry = { entry: { id: 'fake-node-entry' } } as NodeEntry;
+    const fakeNodePaging: NodePaging = { list: { pagination: { count: 10, maxItems: 10, skipCount: 0 } } };
+    const documentLoaderNode = { children: fakeNodePaging, currentNode: fakeNodeEntry };
+    loadFolderByNodeIdSpy = spyOn(documentListService, 'loadFolderByNodeId').and.returnValue(of(documentLoaderNode));
+
+    uploadService = TestBed.inject(UploadService);
+    router = TestBed.inject(Router);
+    route = TestBed.inject(ActivatedRoute);
+    nodeActionsService = TestBed.inject(NodeActionsService);
+    contentApi = TestBed.inject(ContentApiService);
+    spyContent = spyOn(contentApi, 'getNode');
+  });
+
+  beforeEach(() => {
+    node = { id: 'node-id', isFolder: true };
+    spyContent.and.returnValue(of({ entry: node }));
+  });
+
+  describe('Current page is valid', () => {
+    beforeEach(() => {
+      fixture.detectChanges();
+      spyContent.and.stub();
+    });
+
+    it('should be a valid current page', fakeAsync(() => {
+      spyContent.and.returnValue(throwError(null));
+
+      component.ngOnInit();
+      fixture.detectChanges();
+      tick();
+
+      expect(component.isValidPath).toBe(false);
+    }));
+
+    it('should set current page as invalid path', fakeAsync(() => {
+      fixture.detectChanges();
+      tick();
+
+      expect(component.isValidPath).toBe(true);
+    }));
+
+    it('should set current page as invalid path when loadFolderByNodeId API fails', fakeAsync(() => {
+      fixture.detectChanges();
+      spyContent.and.returnValue(throwError(null));
+      loadFolderByNodeIdSpy.and.returnValue(throwError(Error('error')));
+      component.documentList.loadFolder();
+      tick();
+
+      expect(component.isValidPath).toBe(false);
+    }));
+  });
+
+  describe('OnInit', () => {
+    beforeEach(() => {
+      router.navigate['calls'].reset();
+    });
+
+    it('should set current node', () => {
+      fixture.detectChanges();
+      expect(component.node).toBe(node);
+    });
+
+    it('should navigate to parent if node is not a folder', () => {
+      const nodeEntry = { isFolder: false, parentId: 'parent-id' };
+      spyContent.and.returnValue(of({ entry: nodeEntry } as any));
+
+      fixture.detectChanges();
+
+      expect(router.navigate['calls'].argsFor(0)[0]).toEqual(['/personal-files', 'parent-id']);
+    });
+  });
+
+  describe('refresh on events', () => {
+    beforeEach(() => {
+      spyOn(component, 'reload');
+      fixture.detectChanges();
+
+      spyOn(component.documentList, 'loadFolder').and.callFake(() => {});
+    });
+
+    it('should call refresh onContentCopied event if parent is the same', () => {
+      const nodes: any[] = [{ entry: { parentId: '1' } }, { entry: { parentId: '2' } }];
+
+      component.node = { id: '1' } as any;
+
+      nodeActionsService.contentCopied.next(nodes);
+
+      expect(component.reload).toHaveBeenCalled();
+    });
+
+    it('should not call refresh onContentCopied event when parent mismatch', () => {
+      const nodes: any[] = [{ entry: { parentId: '1' } }, { entry: { parentId: '2' } }];
+
+      component.node = { id: '3' } as any;
+
+      nodeActionsService.contentCopied.next(nodes);
+
+      expect(component.reload).not.toHaveBeenCalled();
+    });
+
+    it('should call refresh on fileUploadComplete event if parent node match', fakeAsync(() => {
+      const file: any = { file: { options: { parentId: 'parentId' } } };
+      component.node = { id: 'parentId' } as any;
+
+      uploadService.fileUploadComplete.next(file);
+
+      tick(500);
+
+      expect(component.reload).toHaveBeenCalled();
+    }));
+
+    it('should not call refresh on fileUploadComplete event if parent mismatch', fakeAsync(() => {
+      const file: any = { file: { options: { parentId: 'otherId' } } };
+      component.node = { id: 'parentId' } as any;
+
+      uploadService.fileUploadComplete.next(file);
+
+      tick(500);
+
+      expect(component.reload).not.toHaveBeenCalled();
+    }));
+
+    it('should call refresh on fileUploadDeleted event if parent node match', fakeAsync(() => {
+      const file: any = { file: { options: { parentId: 'parentId' } } };
+      component.node = { id: 'parentId' } as any;
+
+      uploadService.fileUploadDeleted.next(file);
+
+      tick(500);
+
+      expect(component.reload).toHaveBeenCalled();
+    }));
+
+    it('should not call refresh on fileUploadDeleted event if parent mismatch', fakeAsync(() => {
+      const file: any = { file: { options: { parentId: 'otherId' } } };
+      component.node = { id: 'parentId' } as any;
+
+      uploadService.fileUploadDeleted.next(file);
+
+      tick(500);
+
+      expect(component.reload).not.toHaveBeenCalled();
+    }));
+  });
+
+  describe('onBreadcrumbNavigate()', () => {
+    beforeEach(() => {
+      fixture.detectChanges();
+    });
+
+    it('should navigates to node id', () => {
+      const routeData: any = { id: 'some-where-over-the-rainbow' };
+      spyOn(component, 'navigate');
+
+      component.onBreadcrumbNavigate(routeData);
+
+      expect(component.navigate).toHaveBeenCalledWith(routeData.id);
+    });
+  });
+
+  describe('Node navigation', () => {
+    beforeEach(() => {
+      fixture.detectChanges();
+    });
+
+    it('should navigates to node when is more that one sub node', () => {
+      router.url = '/personal-files/favourites';
+      component.navigate(node.id);
+
+      expect(router.navigate).toHaveBeenCalledWith(['personal-files', 'favourites', node.id]);
+    });
+
+    it('should remove the header filters param on click of folders', () => {
+      router.url = '/personal-files?name=abc';
+      component.navigate(node.id);
+
+      expect(router.navigate).toHaveBeenCalledWith(['personal-files', node.id]);
+    });
+
+    it('should navigates to node when id provided', () => {
+      router.url = '/personal-files';
+      component.navigate(node.id);
+
+      expect(router.navigate).toHaveBeenCalledWith(['personal-files', node.id]);
+    });
+
+    it('should navigates to home when id not provided', () => {
+      router.url = '/personal-files';
+      component.navigate();
+
+      expect(router.navigate).toHaveBeenCalledWith(['personal-files']);
+    });
+
+    it('should navigate home if node is root', () => {
+      component.node = {
+        path: {
+          elements: [{ id: 'node-id' }]
+        }
+      } as any;
+
+      router.url = '/personal-files';
+      component.navigate(node.id);
+
+      expect(router.navigate).toHaveBeenCalledWith(['personal-files']);
+    });
+
+    it('should navigate home if node is root also if it contain a uuid', () => {
+      spyOn(route.snapshot.paramMap, 'get').and.returnValue('some-node-id');
+      component.node = {
+        path: {
+          elements: [{ id: 'node-id' }]
+        }
+      } as any;
+
+      router.url = '/personal-files/895de2b3-1b69-4cc7-bff2-a0d7c86b7bc7';
+      component.navigate(node.id);
+
+      expect(router.navigate).toHaveBeenCalledWith(['personal-files']);
+    });
+
+    it('should navigate to sub folder from a parent folder', () => {
+      router.url = '/personal-files/parent-folder-node-id';
+      const childFolderNodeId = node.id;
+      spyOn(route.snapshot.paramMap, 'get').and.returnValue('parent-folder-node-id');
+      component.navigate(childFolderNodeId);
+      expect(router.navigate).toHaveBeenCalledWith(['personal-files', childFolderNodeId]);
+    });
+
+    it('should navigate to smart folder content', () => {
+      router.url = '/libraries/vH1-6-1-1-115wji7092f0-41-MTg%3D-1-115hpo76l3h2e1f';
+      spyOn(route.snapshot.paramMap, 'get').and.returnValue('vH1-6-1-1-115wji7092f0-41-MTg=-1-115hpo76l3h2e1f');
+      component.navigate(node.id);
+      expect(router.navigate).toHaveBeenCalledWith(['libraries', node.id]);
+    });
+
+    it('should navigate to destination folder if node is `app:folderlink`', () => {
+      node = {
+        entry: {
+          id: 'folder-link-id',
+          isFolder: true,
+          nodeType: 'app:folderlink',
+          properties: {
+            'cm:destination': 'original-folder-id'
+          }
+        }
+      } as any;
+
+      router.url = '/personal-files';
+      spyOn(route.snapshot.paramMap, 'get').and.returnValue('personal-files');
+      component.navigateTo(node);
+      expect(router.navigate).toHaveBeenCalledWith([node.entry.properties['cm:destination']]);
+    });
+  });
+
+  describe('isSiteContainer', () => {
+    it('should return false if node has no aspectNames', () => {
+      const mock: any = { aspectNames: [] };
+
+      expect(component.isSiteContainer(mock)).toBe(false);
+    });
+
+    it('should return false if node is not site container', () => {
+      const mock: any = { aspectNames: ['something-else'] };
+
+      expect(component.isSiteContainer(mock)).toBe(false);
+    });
+
+    it('should return true if node is a site container', () => {
+      const mock: any = { aspectNames: ['st:siteContainer'] };
+
+      expect(component.isSiteContainer(mock)).toBe(true);
+    });
+  });
+
+  describe('empty template', () => {
+    beforeEach(() => {
+      fixture.detectChanges();
+    });
+
+    it('should show custom empty template if filter headers are applied', async () => {
+      component.onFilterSelected([{ key: 'name', value: 'aaa' } as FilterSearch]);
+      fixture.detectChanges();
+      await fixture.whenStable();
+
+      verifyEmptyFilterTemplate();
+    });
+
+    it('should display custom empty template when no data available', async () => {
+      fixture.detectChanges();
+      await fixture.whenStable();
+
+      verifyEmptyTemplate();
+    });
+  });
+
+  it('[C308041] should have sticky headers', async () => {
+    fixture.detectChanges();
+
+    const nodeResult = {
+      list: {
+        entries: [{ entry: { id: '1', isFile: true } } as any, { entry: { id: '2', isFile: true } } as any],
+        pagination: { count: 2 }
+      }
+    };
+    const changes: SimpleChanges = { nodeResult: new SimpleChange(null, nodeResult, true) };
+
+    fixture.componentInstance.ngOnChanges(changes);
+
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    const header = fixture.nativeElement.querySelector('.adf-sticky-header');
+    expect(header).not.toBeNull();
+  });
+
+  describe('Pagination reset when navigating', () => {
+    beforeEach(() => {
+      fixture.detectChanges();
+    });
+
+    it('should reset the pagination when navigating using the breadcrumb', () => {
+      const resetNewFolderPaginationSpy = spyOn(component.documentList, 'resetNewFolderPagination');
+      const breadcrumbRoute: PathElementEntity = { id: 'fake-breadcrumb-route-id', name: 'fake' };
+      component.onBreadcrumbNavigate(breadcrumbRoute);
+
+      expect(resetNewFolderPaginationSpy).toHaveBeenCalled();
+    });
+
+    it('should reset the pagination when navigating to a folder', () => {
+      const resetNewFolderPaginationSpy = spyOn(component.documentList, 'resetNewFolderPagination');
+      const fakeFolderNode = new NodeEntry({ entry: { id: 'fakeFolderNode', isFolder: true, isFile: false } });
+      component.navigateTo(fakeFolderNode);
+
+      expect(resetNewFolderPaginationSpy).toHaveBeenCalled();
+    });
+
+    it('should not reset the pagination when the node to navigate is not a folder', () => {
+      const resetNewFolderPaginationSpy = spyOn(component.documentList, 'resetNewFolderPagination');
+      const fakeFileNode = new NodeEntry({ entry: { id: 'fakeFileNode', isFolder: false, isFile: true } });
+      component.navigateTo(fakeFileNode);
+
+      expect(resetNewFolderPaginationSpy).not.toHaveBeenCalled();
+    });
+  });
+});

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

@@ -0,0 +1,362 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { FileUploadEvent, ShowHeaderMode, UploadService } from '@alfresco/adf-core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute, Params, Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { MinimalNodeEntity, MinimalNodeEntryEntity, PathElement, PathElementEntity } from '@alfresco/js-api';
+import { ContentManagementService } from '../../services/content-management.service';
+import { NodeActionsService } from '../../services/node-actions.service';
+import { PageComponent } from '../page.component';
+import { AppExtensionService, ContentApiService } from '@alfresco/aca-shared';
+import { SetCurrentFolderAction, isAdmin, AppStore, UploadFileVersionAction, showLoaderSelector } from '@alfresco/aca-shared/store';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { debounceTime, takeUntil } from 'rxjs/operators';
+import { FilterSearch, ShareDataRow } from '@alfresco/adf-content-services';
+import { DocumentListPresetRef } from '@alfresco/adf-extensions';
+import { Observable } from 'rxjs';
+
+@Component({
+  templateUrl: './files.component.html'
+})
+export class FilesComponent extends PageComponent implements OnInit, OnDestroy {
+  isValidPath = true;
+  isSmallScreen = false;
+  isAdmin = false;
+  selectedNode: MinimalNodeEntity;
+  queryParams = null;
+
+  showLoader$: Observable<boolean>;
+  private nodePath: PathElement[];
+
+  columns: DocumentListPresetRef[] = [];
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private contentApi: ContentApiService,
+    store: Store<AppStore>,
+    private nodeActionsService: NodeActionsService,
+    private uploadService: UploadService,
+    content: ContentManagementService,
+    extensions: AppExtensionService,
+    private breakpointObserver: BreakpointObserver
+  ) {
+    super(store, extensions, content);
+  }
+
+  ngOnInit() {
+    super.ngOnInit();
+
+    const { route, nodeActionsService, uploadService } = this;
+    const { data } = route.snapshot;
+
+    this.title = data.title;
+
+    this.showLoader$ = this.store.select(showLoaderSelector);
+    route.queryParamMap.subscribe((queryMap: Params) => {
+      this.queryParams = queryMap.params;
+    });
+
+    route.params.subscribe(({ folderId }: Params) => {
+      const nodeId = folderId || data.defaultNodeId;
+
+      this.contentApi.getNode(nodeId).subscribe(
+        (node) => {
+          this.isValidPath = true;
+
+          if (node.entry && node.entry.isFolder) {
+            this.updateCurrentNode(node.entry);
+          } else {
+            this.router.navigate(['/personal-files', node.entry.parentId], {
+              replaceUrl: true
+            });
+          }
+        },
+        () => (this.isValidPath = false)
+      );
+    });
+
+    this.subscriptions = this.subscriptions.concat([
+      nodeActionsService.contentCopied.subscribe((nodes) => this.onContentCopied(nodes)),
+      uploadService.fileUploadComplete.pipe(debounceTime(300)).subscribe((file) => this.onFileUploadedEvent(file)),
+      uploadService.fileUploadDeleted.pipe(debounceTime(300)).subscribe((file) => this.onFileUploadedEvent(file)),
+
+      this.breakpointObserver.observe([Breakpoints.HandsetPortrait, Breakpoints.HandsetLandscape]).subscribe((result) => {
+        this.isSmallScreen = result.matches;
+      })
+    ]);
+
+    this.store
+      .select(isAdmin)
+      .pipe(takeUntil(this.onDestroy$))
+      .subscribe((value) => {
+        this.isAdmin = value;
+      });
+
+    this.columns = this.extensions.documentListPresets.files || [];
+  }
+
+  ngOnDestroy() {
+    this.store.dispatch(new SetCurrentFolderAction(null));
+    super.ngOnDestroy();
+  }
+
+  navigate(nodeId: string = null) {
+    const currentNodeId = this.route.snapshot.paramMap.get('folderId');
+    const urlWithoutParams = decodeURIComponent(this.router.url).split('?')[0];
+    const urlToNavigate: string[] = this.getUrlToNavigate(urlWithoutParams, currentNodeId, nodeId);
+    this.router.navigate(urlToNavigate);
+  }
+
+  private getUrlToNavigate(currentURL: string, currentNodeId: string, nextNodeId: string): string[] {
+    return currentNodeId ? this.getNextNodeUrlToNavigate(currentURL, currentNodeId, nextNodeId) : this.appendNextNodeIdToUrl(currentURL, nextNodeId);
+  }
+
+  private getNextNodeUrlToNavigate(currentURL: string, currentNodeId: string, nextNodeId: string): string[] {
+    const urlToNavigate: string[] =
+      nextNodeId && !this.isRootNode(nextNodeId)
+        ? this.replaceCurrentNodeIdWithNextNodeId(currentURL, currentNodeId, nextNodeId)
+        : this.removeNodeIdFromUrl(currentURL, currentNodeId);
+    urlToNavigate.shift();
+    return urlToNavigate;
+  }
+
+  private replaceCurrentNodeIdWithNextNodeId(currentURL: string, currentNodeId: string, nextNodeId: string): string[] {
+    const nextNodeUrlToNavigate = currentURL.split('/');
+    const index = nextNodeUrlToNavigate.indexOf(currentNodeId);
+    if (index > 0) {
+      nextNodeUrlToNavigate[index] = nextNodeId;
+    }
+    return nextNodeUrlToNavigate;
+  }
+
+  private removeNodeIdFromUrl(currentURL: string, currentNodeId: string): string[] {
+    const rootUrl: string[] = currentURL.replace(currentNodeId, '').split('/');
+    rootUrl.pop();
+    return rootUrl;
+  }
+
+  private appendNextNodeIdToUrl(currentURL: string, nodeId: string): string[] {
+    const navigateToNodeUrl = currentURL.split('/');
+    if (nodeId && !this.isRootNode(nodeId)) {
+      navigateToNodeUrl.push(nodeId);
+    }
+    navigateToNodeUrl.shift();
+    return navigateToNodeUrl;
+  }
+
+  onUploadNewVersion(ev: CustomEvent) {
+    this.store.dispatch(new UploadFileVersionAction(ev));
+  }
+
+  navigateTo(node: MinimalNodeEntity) {
+    if (node && node.entry) {
+      this.selectedNode = node;
+      const { isFolder } = node.entry;
+
+      if (isFolder) {
+        let id: string;
+
+        if (node.entry.nodeType === 'app:folderlink') {
+          id = node.entry.properties['cm:destination'];
+        } else {
+          id = node.entry.id;
+        }
+
+        this.documentList.resetNewFolderPagination();
+        this.navigate(id);
+        return;
+      }
+
+      this.showPreview(node, { location: this.router.url });
+    }
+  }
+
+  handleNodeClick(event: Event) {
+    this.navigateTo((event as CustomEvent).detail?.node);
+  }
+
+  onBreadcrumbNavigate(route: PathElementEntity) {
+    this.documentList.resetNewFolderPagination();
+
+    // todo: review this approach once 5.2.3 is out
+    if (this.nodePath && this.nodePath.length > 2) {
+      if (this.nodePath[1].name === 'Sites' && this.nodePath[2].id === route.id) {
+        return this.navigate(this.nodePath[3].id);
+      }
+    }
+    this.navigate(route.id);
+  }
+
+  onFileUploadedEvent(event: FileUploadEvent) {
+    const node: MinimalNodeEntity = event.file.data;
+
+    // check root and child nodes
+    if (node && node.entry && node.entry.parentId === this.getParentNodeId()) {
+      this.reload(this.selectedNode);
+      return;
+    }
+
+    // check the child nodes to show dropped folder
+    if (event && event.file.options.parentId === this.getParentNodeId()) {
+      this.displayFolderParent(event.file.options.path, 0);
+      return;
+    }
+
+    if (event && event.file.options.parentId) {
+      if (this.nodePath) {
+        const correspondingNodePath = this.nodePath.find((pathItem) => pathItem.id === event.file.options.parentId);
+
+        // check if the current folder has the 'trigger-upload-folder' as one of its parents
+        if (correspondingNodePath) {
+          const correspondingIndex = this.nodePath.length - this.nodePath.indexOf(correspondingNodePath);
+          this.displayFolderParent(event.file.options.path, correspondingIndex);
+        }
+      }
+    }
+  }
+
+  displayFolderParent(filePath = '', index: number) {
+    const parentName = filePath.split('/')[index];
+    const currentFoldersDisplayed = (this.documentList.data.getRows() as ShareDataRow[]) || [];
+
+    const alreadyDisplayedParentFolder = currentFoldersDisplayed.find((row) => row.node.entry.isFolder && row.node.entry.name === parentName);
+
+    if (alreadyDisplayedParentFolder) {
+      return;
+    }
+    this.reload(this.selectedNode);
+  }
+
+  onContentCopied(nodes: MinimalNodeEntity[]) {
+    const newNode = nodes.find((node) => node && node.entry && node.entry.parentId === this.getParentNodeId());
+    if (newNode) {
+      this.reload(this.selectedNode);
+    }
+  }
+
+  // todo: review this approach once 5.2.3 is out
+  private async updateCurrentNode(node: MinimalNodeEntryEntity) {
+    this.nodePath = null;
+
+    if (node && node.path && node.path.elements) {
+      const elements = node.path.elements;
+
+      this.nodePath = elements.map((pathElement) => Object.assign({}, pathElement));
+
+      if (elements.length > 1) {
+        if (elements[1].name === 'User Homes') {
+          if (!this.isAdmin) {
+            elements.splice(0, 2);
+          }
+        } else if (elements[1].name === 'Sites') {
+          await this.normalizeSitePath(node);
+        }
+      }
+    }
+
+    this.node = node;
+    this.store.dispatch(new SetCurrentFolderAction(node));
+  }
+
+  // todo: review this approach once 5.2.3 is out
+  private async normalizeSitePath(node: MinimalNodeEntryEntity) {
+    const elements = node.path.elements;
+
+    // remove 'Sites'
+    elements.splice(1, 1);
+
+    if (this.isSiteContainer(node)) {
+      // rename 'documentLibrary' entry to the target site display name
+      // clicking on the breadcrumb entry loads the site content
+      const parentNode = await this.contentApi.getNodeInfo(node.parentId).toPromise();
+      node.name = parentNode.properties['cm:title'] || parentNode.name;
+
+      // remove the site entry
+      elements.splice(1, 1);
+    } else {
+      // remove 'documentLibrary' in the middle of the path
+      const docLib = elements.findIndex((el) => el.name === 'documentLibrary');
+      if (docLib > -1) {
+        const siteFragment = elements[docLib - 1];
+        const siteNode = await this.contentApi.getNodeInfo(siteFragment.id).toPromise();
+
+        // apply Site Name to the parent fragment
+        siteFragment.name = siteNode.properties['cm:title'] || siteNode.name;
+        elements.splice(docLib, 1);
+      }
+    }
+  }
+
+  isSiteContainer(node: MinimalNodeEntryEntity): boolean {
+    if (node && node.aspectNames && node.aspectNames.length > 0) {
+      return node.aspectNames.indexOf('st:siteContainer') >= 0;
+    }
+    return false;
+  }
+
+  isRootNode(nodeId: string): boolean {
+    if (this.node && this.node.path && this.node.path.elements && this.node.path.elements.length > 0) {
+      return this.node.path.elements[0].id === nodeId;
+    }
+    return false;
+  }
+
+  onFilterSelected(activeFilters: FilterSearch[]) {
+    if (activeFilters.length) {
+      this.showHeader = ShowHeaderMode.Always;
+      this.navigateToFilter(activeFilters);
+    } else {
+      this.router.navigate(['.'], { relativeTo: this.route });
+      this.showHeader = ShowHeaderMode.Data;
+      this.onAllFilterCleared();
+    }
+  }
+
+  navigateToFilter(activeFilters: FilterSearch[]) {
+    const objectFromMap = {};
+    activeFilters.forEach((filter: FilterSearch) => {
+      let paramValue;
+      if (filter.value && filter.value.from && filter.value.to) {
+        paramValue = `${filter.value.from}||${filter.value.to}`;
+      } else {
+        paramValue = filter.value;
+      }
+      objectFromMap[filter.key] = paramValue;
+    });
+
+    this.router.navigate([], { relativeTo: this.route, queryParams: objectFromMap });
+  }
+
+  isFilterHeaderActive(): boolean {
+    return this.showHeader === ShowHeaderMode.Always;
+  }
+
+  onError() {
+    this.isValidPath = false;
+  }
+}

projects/aca-content/src/lib/components/header/header.component.html

@@ -0,0 +1,19 @@
+<adf-layout-header
+  [logo]="logo$ | async"
+  [redirectUrl]="landingPage"
+  [tooltip]="appName$ | async"
+  [color]="headerColor$ | async"
+  [title]="appName$ | async"
+  (clicked)="onToggleSidenav($event)"
+  [expandedSidenav]="isSidenavExpanded"
+>
+  <div class="adf-toolbar--spacer adf-toolbar-divider"></div>
+
+  <aca-search-input *ngIf="isContentServiceEnabled()"></aca-search-input>
+
+  <adf-toolbar-divider></adf-toolbar-divider>
+
+  <ng-container *ngFor="let actionRef of actions; trackBy: trackByActionId">
+    <aca-toolbar-action [actionRef]="actionRef"> </aca-toolbar-action>
+  </ng-container>
+</adf-layout-header>

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

@@ -0,0 +1,17 @@
+.app-header {
+  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.02), 0px 6px 10px 0px rgba(0, 0, 0, 0.014), 0px 1px 18px 0px rgba(0, 0, 0, 0.012);
+  z-index: 2;
+
+  .mat-toolbar {
+    background-image: var(--header-background-image) !important;
+    background-repeat: no-repeat !important;
+
+    .aca-current-user {
+      color: var(--theme-foreground-text-color) !important;
+    }
+
+    .adf-toolbar-divider div {
+      background-color: var(--theme-foreground-text-color) !important;
+    }
+  }
+}

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

@@ -0,0 +1,122 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { AppHeaderComponent } from './header.component';
+import { AppState } from '@alfresco/aca-shared/store';
+import { of } from 'rxjs';
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { ContentActionRef } from '@alfresco/adf-extensions';
+import { Store } from '@ngrx/store';
+import { AppTestingModule } from '../../testing/app-testing.module';
+import { AppExtensionService, SharedToolbarModule } from '@alfresco/aca-shared';
+import { CoreModule } from '@alfresco/adf-core';
+import { AppSearchInputModule } from '../search/search-input.module';
+import { By } from '@angular/platform-browser';
+
+describe('AppHeaderComponent', () => {
+  let component: AppHeaderComponent;
+  let fixture: ComponentFixture<AppHeaderComponent>;
+
+  const actions = [
+    { id: 'action-1', type: 'button' },
+    { id: 'action-2', type: 'button' }
+  ] as Array<ContentActionRef>;
+
+  const store = {
+    select: jasmine.createSpy('select'),
+    dispatch: () => {}
+  } as any;
+
+  const appExtensionService = {
+    getHeaderActions: () => of(actions)
+  } as any;
+
+  const app = {
+    headerColor: 'some-color',
+    headerTextColor: 'text-color',
+    appName: 'name',
+    logoPath: 'some/path'
+  } as AppState;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [AppTestingModule, CoreModule.forChild(), AppSearchInputModule, SharedToolbarModule],
+      declarations: [AppHeaderComponent],
+      providers: [
+        {
+          provide: AppExtensionService,
+          useValue: appExtensionService
+        },
+        {
+          provide: Store,
+          useValue: store
+        }
+      ]
+    });
+
+    store.select.and.callFake((memoizeFn) => of(memoizeFn({ app })));
+
+    fixture = TestBed.createComponent(AppHeaderComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should set header color, header text color, name and logo', fakeAsync(() => {
+    component.appName$.subscribe((val) => expect(val).toBe(app.appName));
+    component.logo$.subscribe((val) => expect(val).toBe(app.logoPath));
+    component.headerColor$.subscribe((val) => expect(val).toBe(app.headerColor));
+    component.headerTextColor$.subscribe((val) => expect(val).toBe(app.headerTextColor));
+  }));
+
+  it('should get header actions', fakeAsync(() => {
+    component.ngOnInit();
+    tick();
+    expect(component.actions).toEqual(actions);
+  }));
+
+  describe('Search input', () => {
+    beforeEach(() => {
+      localStorage.clear();
+    });
+
+    afterEach(() => {
+      localStorage.clear();
+    });
+
+    it('should search be present when contentService is enabled', () => {
+      fixture.detectChanges();
+      const searchInput = fixture.debugElement.query(By.css('.aca-search-input'));
+
+      expect(searchInput).not.toBeNull();
+    });
+
+    it('should search not be present when contentService is disabled', () => {
+      localStorage.setItem('contentService', 'false');
+      fixture.detectChanges();
+      const searchInput = fixture.debugElement.query(By.css('.aca-search-input'));
+
+      expect(searchInput).toBeNull();
+    });
+  });
+});

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

@@ -0,0 +1,106 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Component, ViewEncapsulation, Output, EventEmitter, OnInit, Input, OnDestroy } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { Observable, Subject } from 'rxjs';
+import { ContentActionRef } from '@alfresco/adf-extensions';
+import { AppStore, getHeaderColor, getAppName, getLogoPath, getHeaderImagePath, getHeaderTextColor } from '@alfresco/aca-shared/store';
+import { AppExtensionService } from '@alfresco/aca-shared';
+import { takeUntil } from 'rxjs/operators';
+import { AppConfigService, SidenavLayoutComponent } from '@alfresco/adf-core';
+import { isContentServiceEnabled } from '@alfresco/aca-shared/rules';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'app-header' }
+})
+export class AppHeaderComponent implements OnInit, OnDestroy {
+  private onDestroy$: Subject<boolean> = new Subject<boolean>();
+
+  @Output()
+  toggleClicked = new EventEmitter();
+
+  @Input() expandedSidenav = true;
+
+  @Input() data: { layout?: SidenavLayoutComponent; isMenuMinimized?: boolean } = {};
+
+  get isSidenavExpanded(): boolean {
+    return !this.data.isMenuMinimized ?? this.expandedSidenav;
+  }
+
+  appName$: Observable<string>;
+  headerColor$: Observable<any>;
+  headerTextColor$: Observable<string>;
+  logo$: Observable<string>;
+  landingPage: string;
+
+  actions: Array<ContentActionRef> = [];
+
+  constructor(public store: Store<AppStore>, private appExtensions: AppExtensionService, private appConfigService: AppConfigService) {
+    this.headerColor$ = store.select(getHeaderColor);
+    this.headerTextColor$ = store.select(getHeaderTextColor);
+    this.appName$ = store.select(getAppName);
+    this.logo$ = store.select(getLogoPath);
+    this.landingPage = this.appConfigService.get('landingPage', '/personal-files');
+
+    store.select(getHeaderImagePath).subscribe((path) => {
+      document.body.style.setProperty('--header-background-image', `url('${path}')`);
+    });
+  }
+
+  ngOnInit() {
+    this.appExtensions
+      .getHeaderActions()
+      .pipe(takeUntil(this.onDestroy$))
+      .subscribe((actions) => {
+        this.actions = actions;
+      });
+
+    this.headerTextColor$.subscribe((color) => {
+      document.documentElement.style.setProperty('--adf-header-text-color', color);
+    });
+  }
+
+  onToggleSidenav(_event: boolean): void {
+    this.data.layout.toggleMenu();
+  }
+
+  isContentServiceEnabled(): boolean {
+    return isContentServiceEnabled();
+  }
+
+  ngOnDestroy() {
+    this.onDestroy$.next(true);
+    this.onDestroy$.complete();
+  }
+
+  trackByActionId(_: number, action: ContentActionRef) {
+    return action.id;
+  }
+}

projects/aca-content/src/lib/components/header/header.module.ts

@@ -0,0 +1,38 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+import { AppHeaderComponent } from './header.component';
+import { AppSearchInputModule } from '../search/search-input.module';
+import { AppToolbarModule } from '../toolbar/toolbar.module';
+
+@NgModule({
+  imports: [CommonModule, CoreModule.forChild(), AppSearchInputModule, AppToolbarModule],
+  declarations: [AppHeaderComponent],
+  exports: [AppHeaderComponent]
+})
+export class AppHeaderModule {}

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

@@ -0,0 +1,41 @@
+import { HomeComponent } from './home.component';
+import { AppConfigService, AppConfigServiceMock, setupTestBed } from '@alfresco/adf-core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Router } from '@angular/router';
+import { HttpClientModule } from '@angular/common/http';
+import { RouterTestingModule } from '@angular/router/testing';
+
+describe('HomeComponent', () => {
+  let appConfig: AppConfigService;
+  let fixture: ComponentFixture<HomeComponent>;
+  let router: Router;
+
+  setupTestBed({
+    imports: [HttpClientModule, RouterTestingModule],
+    providers: [{ provide: AppConfigService, useClass: AppConfigServiceMock }]
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    router = TestBed.inject(Router);
+    appConfig = TestBed.inject(AppConfigService);
+    appConfig.config = Object.assign(appConfig.config, {
+      landingPage: '/my-mock-landing-page'
+    });
+  });
+
+  it('should navigate to the landing page from the app config', () => {
+    const navigateSpy = spyOn(router, 'navigateByUrl');
+    fixture.detectChanges();
+
+    expect(navigateSpy).toHaveBeenCalledWith('/my-mock-landing-page');
+  });
+
+  it('should navigate to personal files by default when there is no landingPage defined', () => {
+    appConfig.config = {};
+    const navigateSpy = spyOn(router, 'navigateByUrl');
+    fixture.detectChanges();
+
+    expect(navigateSpy).toHaveBeenCalledWith('/personal-files');
+  });
+});

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

@@ -0,0 +1,42 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { AppConfigService } from '@alfresco/adf-core';
+
+@Component({
+  template: ''
+})
+export class HomeComponent implements OnInit {
+  readonly DEFAULT_LANDING_PAGE = '/personal-files';
+
+  constructor(private appConfig: AppConfigService, private router: Router) {}
+
+  ngOnInit() {
+    const landingPage = this.appConfig.get('landingPage', this.DEFAULT_LANDING_PAGE);
+    this.router.navigateByUrl(landingPage);
+  }
+}

projects/aca-content/src/lib/components/info-drawer/comments-tab/comments-tab.component.spec.ts

@@ -0,0 +1,106 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { CommentsTabComponent } from './comments-tab.component';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AppTestingModule } from '../../../testing/app-testing.module';
+import { NodePermissionService } from '@alfresco/aca-shared';
+import { Node } from '@alfresco/js-api';
+import { NodeCommentsModule } from '@alfresco/adf-content-services';
+
+describe('CommentsTabComponent', () => {
+  let component: CommentsTabComponent;
+  let fixture: ComponentFixture<CommentsTabComponent>;
+  let nodePermissionService: NodePermissionService;
+  let checked: string[];
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [AppTestingModule, NodeCommentsModule],
+      declarations: [CommentsTabComponent]
+    });
+
+    nodePermissionService = TestBed.inject(NodePermissionService);
+
+    fixture = TestBed.createComponent(CommentsTabComponent);
+    component = fixture.componentInstance;
+
+    checked = null;
+    spyOn(nodePermissionService, 'check').and.callFake((_source, permissions) => {
+      checked = permissions;
+      return true;
+    });
+  });
+
+  afterEach(() => {
+    fixture.destroy();
+  });
+
+  describe('canUpdateNode', () => {
+    it('should return [false] if no node selected', () => {
+      component.node = null;
+      expect(component.canUpdateNode).toBe(false);
+    });
+
+    it('should return [false] if node selected is neither file or folder', () => {
+      component.node = {
+        id: 'test-node-id',
+        isFile: false,
+        isFolder: false
+      } as Node;
+      expect(component.canUpdateNode).toBe(false);
+    });
+
+    it('should return [false] if node selected is a locked file', () => {
+      component.node = {
+        id: 'test-node-id',
+        isFile: true,
+        isFolder: false,
+        isLocked: true
+      } as Node;
+      expect(component.canUpdateNode).toBe(false);
+    });
+
+    it('should check [update] permission if node selected is a not locked file', () => {
+      component.node = {
+        id: 'test-node-id',
+        isFile: true,
+        isFolder: false
+      } as Node;
+      expect(component.canUpdateNode).toBe(true);
+      expect(checked).toContain('update');
+    });
+
+    it('should check [update] permission if node selected is a folder', () => {
+      component.node = {
+        id: 'test-node-id',
+        isFile: false,
+        isFolder: true
+      } as Node;
+      expect(component.canUpdateNode).toBe(true);
+      expect(checked).toContain('update');
+    });
+  });
+});

projects/aca-content/src/lib/components/info-drawer/comments-tab/comments-tab.component.ts

@@ -0,0 +1,50 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Component, Input } from '@angular/core';
+import { MinimalNodeEntryEntity } from '@alfresco/js-api';
+import { NodePermissionService, isLocked } from '@alfresco/aca-shared';
+
+@Component({
+  selector: 'app-comments-tab',
+  template: `<mat-card><adf-node-comments [readOnly]="!canUpdateNode" [nodeId]="node?.id"></adf-node-comments></mat-card>`
+})
+export class CommentsTabComponent {
+  @Input()
+  node: MinimalNodeEntryEntity;
+
+  constructor(private permission: NodePermissionService) {}
+
+  get canUpdateNode(): boolean {
+    if (!this.node) {
+      return false;
+    }
+
+    if (this.node.isFolder || (this.node.isFile && !isLocked({ entry: this.node }))) {
+      return this.permission.check(this.node, ['update']);
+    }
+    return false;
+  }
+}

projects/aca-content/src/lib/components/info-drawer/info.drawer.module.ts

@@ -0,0 +1,64 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { ContentMetadataModule, ContentModule, VersionManagerModule } from '@alfresco/adf-content-services';
+import { CoreModule } from '@alfresco/adf-core';
+import { ExtensionsModule } from '@alfresco/adf-extensions';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { DirectivesModule } from '../../directives/directives.module';
+import { MaterialModule } from '../../material.module';
+import { CommentsTabComponent } from './comments-tab/comments-tab.component';
+import { MetadataTabComponent } from './metadata-tab/metadata-tab.component';
+import { LibraryMetadataTabComponent } from './library-metadata-tab/library-metadata-tab.component';
+import { LibraryMetadataFormComponent } from './library-metadata-tab/library-metadata-form.component';
+import { VersionsTabComponent } from './versions-tab/versions-tab.component';
+import { A11yModule } from '@angular/cdk/a11y';
+import { SharedInfoDrawerModule } from '@alfresco/aca-shared';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MaterialModule,
+    CoreModule.forChild(),
+    ContentModule.forChild(),
+    ExtensionsModule,
+    ContentMetadataModule,
+    VersionManagerModule,
+    DirectivesModule,
+    A11yModule,
+    SharedInfoDrawerModule
+  ],
+  declarations: [MetadataTabComponent, CommentsTabComponent, VersionsTabComponent, LibraryMetadataTabComponent, LibraryMetadataFormComponent],
+  exports: [
+    MetadataTabComponent,
+    CommentsTabComponent,
+    VersionsTabComponent,
+    LibraryMetadataTabComponent,
+    LibraryMetadataFormComponent,
+    SharedInfoDrawerModule
+  ]
+})
+export class AppInfoDrawerModule {}

projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.html

@@ -0,0 +1,134 @@
+<mat-card *ngIf="node">
+  <mat-card-content *ngIf="!edit">
+    <div class="mat-form-field mat-form-field-type-mat-input mat-form-field-can-float mat-form-field-should-float adf-full-width">
+      <div class="mat-form-field-wrapper">
+        <div class="mat-form-field-flex">
+          <div class="mat-form-field-infix">
+            <span class="mat-form-field-label-wrapper">
+              <span class="mat-form-field-label">
+                {{ 'LIBRARY.DIALOG.FORM.NAME' | translate }}
+              </span>
+            </span>
+
+            <span class="mat-input-element">
+              {{ form.controls.title.value }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="mat-form-field mat-primary mat-form-field-type-mat-input mat-form-field-can-float mat-form-field-should-float adf-full-width">
+      <div class="mat-form-field-wrapper">
+        <div class="mat-form-field-flex">
+          <div class="mat-form-field-infix">
+            <span class="mat-form-field-label-wrapper">
+              <span class="mat-form-field-label">
+                {{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}
+              </span>
+            </span>
+
+            <span class="mat-input-element">
+              {{ form.controls.id.value }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="mat-form-field mat-primary mat-form-field-type-mat-input mat-form-field-can-float mat-form-field-should-float adf-full-width">
+      <div class="mat-form-field-wrapper">
+        <div class="mat-form-field-flex">
+          <div class="mat-form-field-infix">
+            <span class="mat-form-field-label-wrapper">
+              <span class="mat-form-field-label">
+                {{ 'LIBRARY.DIALOG.FORM.VISIBILITY' | translate }}
+              </span>
+            </span>
+
+            <span class="mat-input-element">
+              {{ getVisibilityLabel(form.controls.visibility.value) | translate }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="mat-form-field mat-primary mat-form-field-type-mat-input mat-form-field-can-float mat-form-field-should-float adf-full-width">
+      <div class="mat-form-field-wrapper">
+        <div class="mat-form-field-flex">
+          <div class="mat-form-field-infix">
+            <span class="mat-form-field-label-wrapper">
+              <span class="mat-form-field-label">
+                {{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}
+              </span>
+            </span>
+
+            <span class="mat-input-element">
+              {{ form.controls.description?.value }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </mat-card-content>
+
+  <mat-card-actions align="end" *ngIf="!edit && canUpdateLibrary">
+    <button mat-button color="primary" (click)="toggleEdit()">
+      {{ 'LIBRARY.DIALOG.EDIT' | translate }}
+    </button>
+  </mat-card-actions>
+
+  <mat-card-content *ngIf="edit">
+    <form [formGroup]="form" autocomplete="off">
+      <mat-form-field class="adf-full-width">
+        <input
+          matInput
+          cdkFocusInitial
+          required
+          placeholder="{{ 'LIBRARY.DIALOG.FORM.NAME' | translate }}"
+          formControlName="title"
+          [errorStateMatcher]="matcher"
+        />
+        <mat-hint *ngIf="libraryTitleExists">{{ 'LIBRARY.HINTS.SITE_TITLE_EXISTS' | translate }}</mat-hint>
+        <mat-error>
+          {{ 'LIBRARY.ERRORS.TITLE_TOO_LONG' | translate }}
+        </mat-error>
+      </mat-form-field>
+
+      <mat-form-field class="adf-full-width">
+        <input matInput placeholder="{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}" formControlName="id" />
+      </mat-form-field>
+
+      <mat-form-field class="adf-full-width">
+        <mat-select placeholder="{{ 'LIBRARY.DIALOG.FORM.VISIBILITY' | translate }}" formControlName="visibility">
+          <mat-option [value]="type.value" *ngFor="let type of libraryType">
+            {{ type.label | translate }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+
+      <mat-form-field class="adf-full-width">
+        <textarea
+          matInput
+          placeholder="{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}"
+          rows="3"
+          formControlName="description"
+          [errorStateMatcher]="matcher"
+        ></textarea>
+        <mat-error>
+          {{ 'LIBRARY.ERRORS.DESCRIPTION_TOO_LONG' | translate }}
+        </mat-error>
+      </mat-form-field>
+    </form>
+  </mat-card-content>
+
+  <mat-card-actions align="end" *ngIf="edit && canUpdateLibrary">
+    <button mat-button (click)="cancel()">
+      {{ 'LIBRARY.DIALOG.CANCEL' | translate }}
+    </button>
+    <button mat-button color="primary" [disabled]="form.invalid || form.pristine" (click)="update()">
+      {{ 'LIBRARY.DIALOG.UPDATE' | translate }}
+    </button>
+  </mat-card-actions>
+</mat-card>

projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.spec.ts

@@ -0,0 +1,296 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+import { LibraryMetadataFormComponent } from './library-metadata-form.component';
+import { TestBed, ComponentFixture, fakeAsync, tick } from '@angular/core/testing';
+import { Store } from '@ngrx/store';
+import { UpdateLibraryAction } from '@alfresco/aca-shared/store';
+import { AppTestingModule } from '../../../testing/app-testing.module';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { Site, SitePaging } from '@alfresco/js-api';
+
+describe('LibraryMetadataFormComponent', () => {
+  let fixture: ComponentFixture<LibraryMetadataFormComponent>;
+  let component: LibraryMetadataFormComponent;
+  let store: Store<any>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [AppTestingModule],
+      declarations: [LibraryMetadataFormComponent],
+      providers: [
+        {
+          provide: Store,
+          useValue: {
+            dispatch: jasmine.createSpy('dispatch')
+          }
+        }
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    });
+
+    store = TestBed.inject(Store);
+
+    fixture = TestBed.createComponent(LibraryMetadataFormComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should initialize form with node data', () => {
+    const siteEntryModel = {
+      title: 'libraryTitle',
+      description: 'description',
+      visibility: 'PRIVATE'
+    };
+    component.node = {
+      entry: {
+        id: 'libraryId',
+        ...siteEntryModel
+      } as Site
+    };
+    fixture.detectChanges();
+
+    expect(component.form.value).toEqual(siteEntryModel);
+  });
+
+  it('should update form data when node data changes', () => {
+    const siteEntryModel = {
+      title: 'libraryTitle',
+      description: 'description',
+      visibility: 'PRIVATE'
+    };
+
+    const newSiteEntryModel = {
+      title: 'libraryTitle2',
+      description: 'description2',
+      visibility: 'PUBLIC'
+    };
+
+    component.node = {
+      entry: {
+        id: 'libraryId',
+        ...siteEntryModel
+      } as Site
+    };
+
+    fixture.detectChanges();
+
+    expect(component.form.value).toEqual(siteEntryModel);
+
+    component.node = {
+      entry: {
+        id: 'libraryId',
+        ...newSiteEntryModel
+      } as Site
+    };
+
+    component.ngOnChanges();
+
+    expect(component.form.value).toEqual(newSiteEntryModel);
+  });
+
+  it('should update library node if form is valid', () => {
+    const siteEntryModel = {
+      title: 'libraryTitle',
+      description: 'description',
+      visibility: 'PRIVATE'
+    };
+    component.node = {
+      entry: {
+        id: 'libraryId',
+        role: 'SiteManager',
+        ...siteEntryModel
+      } as Site
+    };
+
+    fixture.detectChanges();
+
+    component.update();
+
+    expect(store.dispatch).toHaveBeenCalledWith(new UpdateLibraryAction(siteEntryModel));
+  });
+
+  it('should not update library node if it has no permission', () => {
+    const siteEntryModel = {
+      title: 'libraryTitle',
+      description: 'description',
+      visibility: 'PRIVATE'
+    };
+    component.node = {
+      entry: {
+        id: 'libraryId',
+        role: 'Consumer',
+        ...siteEntryModel
+      } as Site
+    };
+
+    fixture.detectChanges();
+
+    component.update();
+
+    expect(store.dispatch).not.toHaveBeenCalledWith(new UpdateLibraryAction(siteEntryModel));
+  });
+
+  it('should not update library node if form is invalid', () => {
+    const siteEntryModel = {
+      title: 'libraryTitle',
+      description: 'description',
+      visibility: 'PRIVATE'
+    };
+    component.node = {
+      entry: {
+        id: 'libraryId',
+        role: 'SiteManager',
+        ...siteEntryModel
+      } as Site
+    };
+
+    fixture.detectChanges();
+
+    component.form.controls['title'].setErrors({ maxlength: true });
+
+    component.update();
+
+    expect(store.dispatch).not.toHaveBeenCalledWith(new UpdateLibraryAction(siteEntryModel));
+  });
+
+  it('should toggle edit mode', () => {
+    component.edit = false;
+
+    component.toggleEdit();
+    expect(component.edit).toBe(true);
+
+    component.toggleEdit();
+    expect(component.edit).toBe(false);
+  });
+
+  it('should cancel from changes', () => {
+    const siteEntryModel = {
+      title: 'libraryTitle',
+      description: 'description',
+      visibility: 'PRIVATE'
+    };
+    component.node = {
+      entry: {
+        id: 'libraryId',
+        ...siteEntryModel
+      } as Site
+    };
+    fixture.detectChanges();
+
+    expect(component.form.value).toEqual(siteEntryModel);
+
+    component.form.controls.title.setValue('libraryTitle-edit');
+
+    expect(component.form.value.title).toBe('libraryTitle-edit');
+
+    component.cancel();
+
+    expect(component.form.value).toEqual(siteEntryModel);
+  });
+
+  it('should warn if library name input is used by another library', fakeAsync(() => {
+    const title = 'some-title';
+    spyOn(component['queriesApi'], 'findSites').and.returnValue(
+      Promise.resolve({
+        list: { entries: [{ entry: { title } }] }
+      } as SitePaging)
+    );
+
+    const siteEntryModel = {
+      title: 'libraryTitle',
+      description: 'description',
+      visibility: 'PRIVATE'
+    };
+
+    component.node = {
+      entry: {
+        id: 'libraryId',
+        ...siteEntryModel
+      } as Site
+    };
+
+    fixture.detectChanges();
+    component.form.controls.title.setValue(title);
+    fixture.detectChanges();
+
+    tick(500);
+    expect(component.libraryTitleExists).toBe(true);
+  }));
+
+  it('should not warn if library name input is the same with library node data', fakeAsync(() => {
+    spyOn(component['queriesApi'], 'findSites').and.returnValue(
+      Promise.resolve({
+        list: { entries: [{ entry: { title: 'libraryTitle' } }] }
+      } as SitePaging)
+    );
+
+    const siteEntryModel = {
+      title: 'libraryTitle',
+      description: 'description',
+      visibility: 'PRIVATE'
+    };
+
+    component.node = {
+      entry: {
+        id: 'libraryId',
+        ...siteEntryModel
+      } as Site
+    };
+
+    fixture.detectChanges();
+    component.form.controls.title.setValue('libraryTitle');
+    fixture.detectChanges();
+
+    tick(500);
+    expect(component.libraryTitleExists).toBe(false);
+  }));
+
+  it('should not warn if library name is unique', fakeAsync(() => {
+    spyOn(component['queriesApi'], 'findSites').and.returnValue(
+      Promise.resolve({
+        list: { entries: [] }
+      } as SitePaging)
+    );
+
+    const siteEntryModel = {
+      title: 'libraryTitle',
+      description: 'description',
+      visibility: 'PRIVATE'
+    };
+
+    component.node = {
+      entry: {
+        id: 'libraryId',
+        ...siteEntryModel
+      } as Site
+    };
+
+    fixture.detectChanges();
+    component.form.controls.title.setValue('some-name');
+    fixture.detectChanges();
+
+    tick(500);
+    expect(component.libraryTitleExists).toBe(false);
+  }));
+});

projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.ts

@@ -0,0 +1,156 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Component, Input, OnInit, OnChanges, OnDestroy } from '@angular/core';
+import { UntypedFormGroup, UntypedFormControl, Validators, FormGroupDirective, NgForm } from '@angular/forms';
+import { QueriesApi, SiteEntry, SitePaging } from '@alfresco/js-api';
+import { Store } from '@ngrx/store';
+import { AppStore, UpdateLibraryAction } from '@alfresco/aca-shared/store';
+import { debounceTime, mergeMap, takeUntil } from 'rxjs/operators';
+import { AlfrescoApiService } from '@alfresco/adf-core';
+import { Observable, from, Subject } from 'rxjs';
+import { ErrorStateMatcher } from '@angular/material/core';
+
+export class InstantErrorStateMatcher implements ErrorStateMatcher {
+  isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+    const isSubmitted = form && form.submitted;
+    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
+  }
+}
+
+@Component({
+  selector: 'app-library-metadata-form',
+  templateUrl: './library-metadata-form.component.html'
+})
+export class LibraryMetadataFormComponent implements OnInit, OnChanges, OnDestroy {
+  _queriesApi: QueriesApi;
+  get queriesApi(): QueriesApi {
+    this._queriesApi = this._queriesApi ?? new QueriesApi(this.alfrescoApiService.getInstance());
+    return this._queriesApi;
+  }
+
+  @Input()
+  node: SiteEntry;
+
+  edit: boolean;
+  libraryTitleExists = false;
+
+  libraryType = [
+    { value: 'PUBLIC', label: 'LIBRARY.VISIBILITY.PUBLIC' },
+    { value: 'PRIVATE', label: 'LIBRARY.VISIBILITY.PRIVATE' },
+    { value: 'MODERATED', label: 'LIBRARY.VISIBILITY.MODERATED' }
+  ];
+
+  form: UntypedFormGroup = new UntypedFormGroup({
+    id: new UntypedFormControl({ value: '', disabled: true }),
+    title: new UntypedFormControl({ value: '' }, [Validators.required, Validators.maxLength(256)]),
+    description: new UntypedFormControl({ value: '' }, [Validators.maxLength(512)]),
+    visibility: new UntypedFormControl(this.libraryType[0].value)
+  });
+
+  matcher = new InstantErrorStateMatcher();
+
+  onDestroy$: Subject<boolean> = new Subject<boolean>();
+
+  constructor(private alfrescoApiService: AlfrescoApiService, protected store: Store<AppStore>) {}
+
+  get canUpdateLibrary() {
+    return this.node && this.node.entry && this.node.entry.role === 'SiteManager';
+  }
+
+  getVisibilityLabel(value: string) {
+    return this.libraryType.find((type) => type.value === value).label;
+  }
+
+  toggleEdit() {
+    this.edit = !this.edit;
+  }
+
+  cancel() {
+    this.updateForm(this.node);
+    this.toggleEdit();
+  }
+
+  ngOnInit() {
+    this.updateForm(this.node);
+
+    this.form.controls['title'].valueChanges
+      .pipe(
+        debounceTime(300),
+        mergeMap((title) => this.findLibraryByTitle(title)),
+        takeUntil(this.onDestroy$)
+      )
+      .subscribe((result) => {
+        const { entries } = result.list;
+
+        if (entries.length) {
+          if (this.form.controls.title.value === this.node.entry.title) {
+            this.libraryTitleExists = false;
+          } else {
+            this.libraryTitleExists = this.form.controls.title.value === entries[0].entry.title;
+          }
+        } else {
+          this.libraryTitleExists = false;
+        }
+      });
+  }
+
+  ngOnDestroy() {
+    this.onDestroy$.next(true);
+    this.onDestroy$.complete();
+  }
+
+  ngOnChanges() {
+    this.updateForm(this.node);
+  }
+
+  update() {
+    if (this.canUpdateLibrary && this.form.valid) {
+      this.store.dispatch(new UpdateLibraryAction(this.form.value));
+    }
+  }
+
+  private updateForm(node: SiteEntry) {
+    const { entry } = node;
+
+    this.form.setValue({
+      id: entry.id,
+      title: entry.title,
+      description: entry.description || '',
+      visibility: entry.visibility
+    });
+  }
+
+  private findLibraryByTitle(libraryTitle: string): Observable<SitePaging | { list: { entries: any[] } }> {
+    return from(
+      this.queriesApi
+        .findSites(libraryTitle, {
+          maxItems: 1,
+          fields: ['title']
+        })
+        .catch(() => ({ list: { entries: [] } }))
+    );
+  }
+}

projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-tab.component.ts

@@ -0,0 +1,37 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Component, Input } from '@angular/core';
+import { SiteEntry } from '@alfresco/js-api';
+
+@Component({
+  selector: 'app-library-metadata-tab',
+  template: '<app-library-metadata-form [node]="node"></app-library-metadata-form>',
+  host: { class: 'app-metadata-tab' }
+})
+export class LibraryMetadataTabComponent {
+  @Input()
+  node: SiteEntry;
+}

projects/aca-content/src/lib/components/info-drawer/metadata-tab/metadata-tab.component.spec.ts

@@ -0,0 +1,156 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { MetadataTabComponent } from './metadata-tab.component';
+import { Node } from '@alfresco/js-api';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AppTestingModule } from '../../../testing/app-testing.module';
+import { AppConfigService, setupTestBed, CoreModule } from '@alfresco/adf-core';
+import { ContentMetadataModule } from '@alfresco/adf-content-services';
+import { Store } from '@ngrx/store';
+import { SetInfoDrawerMetadataAspectAction, AppState } from '@alfresco/aca-shared/store';
+import { By } from '@angular/platform-browser';
+import { AppExtensionService } from '@alfresco/aca-shared';
+
+describe('MetadataTabComponent', () => {
+  let fixture: ComponentFixture<MetadataTabComponent>;
+  let component: MetadataTabComponent;
+  let store: Store<AppState>;
+  let appConfig: AppConfigService;
+  let extensions: AppExtensionService;
+  const presets = {
+    default: {
+      includeAll: true
+    },
+    custom: []
+  };
+
+  setupTestBed({
+    imports: [CoreModule, AppTestingModule, ContentMetadataModule],
+    declarations: [MetadataTabComponent]
+  });
+
+  afterEach(() => {
+    fixture.destroy();
+  });
+
+  describe('content-metadata configuration', () => {
+    beforeEach(() => {
+      appConfig = TestBed.inject(AppConfigService);
+      extensions = TestBed.inject(AppExtensionService);
+      appConfig.config['content-metadata'] = { presets };
+    });
+
+    it('should remain unchanged when metadata extension is missing', () => {
+      extensions.contentMetadata = null;
+
+      fixture = TestBed.createComponent(MetadataTabComponent);
+
+      expect(appConfig.config['content-metadata'].presets).toEqual(presets);
+    });
+
+    it('should be overwritten by the one from extension', () => {
+      extensions.contentMetadata = { presets: [{ 'new config': true }] };
+
+      fixture = TestBed.createComponent(MetadataTabComponent);
+
+      expect(appConfig.config['content-metadata'].presets).not.toEqual(presets);
+      expect(appConfig.config['content-metadata'].presets).toEqual(extensions.contentMetadata.presets);
+    });
+  });
+
+  describe('canUpdateNode()', () => {
+    beforeEach(() => {
+      fixture = TestBed.createComponent(MetadataTabComponent);
+      component = fixture.componentInstance;
+    });
+
+    it('should return true if node is not locked and has update permission', () => {
+      const node = {
+        isLocked: false,
+        allowableOperations: ['update']
+      } as Node;
+
+      component.node = node;
+      expect(component.canUpdateNode).toBe(true);
+    });
+
+    it('should return false if node is locked', () => {
+      const node = {
+        isLocked: true,
+        allowableOperations: ['update']
+      } as Node;
+
+      component.node = node;
+      expect(component.canUpdateNode).toBe(false);
+    });
+
+    it('should return false if node has no update permission', () => {
+      const node = {
+        isLocked: false,
+        allowableOperations: ['other']
+      } as Node;
+
+      component.node = node;
+      expect(component.canUpdateNode).toBe(false);
+    });
+
+    it('should return false if node has read only property', () => {
+      const node = {
+        isLocked: false,
+        allowableOperations: ['update'],
+        properties: {
+          'cm:lockType': 'WRITE_LOCK'
+        }
+      } as Node;
+
+      component.node = node;
+      expect(component.canUpdateNode).toBe(false);
+    });
+  });
+
+  describe('displayAspect', () => {
+    beforeEach(() => {
+      fixture = TestBed.createComponent(MetadataTabComponent);
+      store = TestBed.inject(Store);
+      component = fixture.componentInstance;
+    });
+
+    it('show pass empty when store is in initial state', () => {
+      const initialState = fixture.debugElement.query(By.css('adf-content-metadata-card'));
+      expect(initialState.componentInstance.displayAspect).toBeFalsy();
+    });
+
+    it('should update the exif if store got updated', () => {
+      store.dispatch(new SetInfoDrawerMetadataAspectAction('EXIF'));
+      component.displayAspect$.subscribe((aspect) => {
+        expect(aspect).toBe('EXIF');
+      });
+      fixture.detectChanges();
+      const initialState = fixture.debugElement.query(By.css('adf-content-metadata-card'));
+      expect(initialState.componentInstance.displayAspect).toBe('EXIF');
+    });
+  });
+});

projects/aca-content/src/lib/components/info-drawer/metadata-tab/metadata-tab.component.ts

@@ -0,0 +1,85 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Component, Input, ViewEncapsulation, OnInit, OnDestroy } from '@angular/core';
+import { MinimalNodeEntryEntity } from '@alfresco/js-api';
+import { NodePermissionService, isLocked, AppExtensionService } from '@alfresco/aca-shared';
+import { AppStore, infoDrawerMetadataAspect } from '@alfresco/aca-shared/store';
+import { AppConfigService, NotificationService } from '@alfresco/adf-core';
+import { Observable, Subject } from 'rxjs';
+import { Store } from '@ngrx/store';
+import { ContentMetadataService } from '@alfresco/adf-content-services';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-metadata-tab',
+  template: `
+    <adf-content-metadata-card [readOnly]="!canUpdateNode" [preset]="'custom'" [node]="node" [displayAspect]="displayAspect$ | async">
+    </adf-content-metadata-card>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'app-metadata-tab' }
+})
+export class MetadataTabComponent implements OnInit, OnDestroy {
+  protected onDestroy$ = new Subject<boolean>();
+
+  @Input()
+  node: MinimalNodeEntryEntity;
+
+  displayAspect$: Observable<string>;
+
+  constructor(
+    private permission: NodePermissionService,
+    protected extensions: AppExtensionService,
+    private appConfig: AppConfigService,
+    private store: Store<AppStore>,
+    private notificationService: NotificationService,
+    private contentMetadataService: ContentMetadataService
+  ) {
+    if (this.extensions.contentMetadata) {
+      this.appConfig.config['content-metadata'].presets = this.extensions.contentMetadata.presets;
+    }
+    this.displayAspect$ = this.store.select(infoDrawerMetadataAspect);
+  }
+
+  get canUpdateNode(): boolean {
+    if (this.node && !isLocked({ entry: this.node })) {
+      return this.permission.check(this.node, ['update']);
+    }
+
+    return false;
+  }
+
+  ngOnInit() {
+    this.contentMetadataService.error.pipe(takeUntil(this.onDestroy$)).subscribe((err: { message: string }) => {
+      this.notificationService.showError(err.message);
+    });
+  }
+
+  ngOnDestroy() {
+    this.onDestroy$.next(true);
+    this.onDestroy$.complete();
+  }
+}

projects/aca-content/src/lib/components/info-drawer/versions-tab/versions-tab.component.spec.ts

@@ -0,0 +1,32 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { VersionsTabComponent } from './versions-tab.component';
+
+describe('VersionsTabComponent', () => {
+  it('should be defined', () => {
+    expect(VersionsTabComponent).toBeDefined();
+  });
+});

projects/aca-content/src/lib/components/info-drawer/versions-tab/versions-tab.component.ts

@@ -0,0 +1,71 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Component, Input, OnChanges, OnInit } from '@angular/core';
+import { MinimalNodeEntryEntity } from '@alfresco/js-api';
+
+@Component({
+  selector: 'app-versions-tab',
+  template: `
+    <ng-container *ngIf="isFileSelected; else empty">
+      <adf-version-manager
+        [showComments]="'adf-version-manager.allowComments' | adfAppConfig: true"
+        [allowDownload]="'adf-version-manager.allowDownload' | adfAppConfig: true"
+        [node]="node"
+      >
+      </adf-version-manager>
+    </ng-container>
+
+    <ng-template #empty>
+      <div class="adf-manage-versions-empty">
+        <mat-icon class="adf-manage-versions-empty-icon">face</mat-icon>
+        {{ 'VERSION.SELECTION.EMPTY' | translate }}
+      </div>
+    </ng-template>
+  `
+})
+export class VersionsTabComponent implements OnInit, OnChanges {
+  @Input()
+  node: MinimalNodeEntryEntity;
+
+  isFileSelected = false;
+
+  ngOnInit() {
+    this.updateState();
+  }
+
+  ngOnChanges() {
+    this.updateState();
+  }
+
+  private updateState() {
+    if (this.node && (this.node as any).nodeId) {
+      // workaround for shared files type.
+      this.isFileSelected = true;
+    } else {
+      this.isFileSelected = this.node.isFile;
+    }
+  }
+}

projects/aca-content/src/lib/components/layout/app-layout/app-layout.component.html

@@ -0,0 +1,39 @@
+<adf-upload-drag-area [rootFolderId]="currentFolderId" [disabled]="!canUpload">
+  <adf-sidenav-layout
+    #layout
+    [sidenavMin]="70"
+    [sidenavMax]="320"
+    [stepOver]="600"
+    [hideSidenav]="hideSidenav"
+    [expandedSidenav]="expandedSidenav"
+    (expanded)="onExpanded($event)"
+  >
+    <adf-sidenav-layout-header>
+      <ng-template let-isMenuMinimized="isMenuMinimized">
+        <app-header role="heading" aria-level="1" *ngIf="!hideSidenav" (toggleClicked)="layout.toggleMenu()" [expandedSidenav]="!isMenuMinimized()">
+        </app-header>
+      </ng-template>
+    </adf-sidenav-layout-header>
+
+    <adf-sidenav-layout-navigation>
+      <ng-template let-isMenuMinimized="isMenuMinimized">
+        <app-sidenav
+          [mode]="isMenuMinimized() ? 'collapsed' : 'expanded'"
+          [attr.data-automation-id]="isMenuMinimized() ? 'collapsed' : 'expanded'"
+          (swipeleft)="hideMenu($event)"
+        >
+        </app-sidenav>
+      </ng-template>
+    </adf-sidenav-layout-navigation>
+
+    <adf-sidenav-layout-content>
+      <ng-template>
+        <router-outlet></router-outlet>
+      </ng-template>
+    </adf-sidenav-layout-content>
+  </adf-sidenav-layout>
+
+  <adf-file-uploading-dialog *ngIf="showFileUploadingDialog" position="left"></adf-file-uploading-dialog>
+</adf-upload-drag-area>
+
+<router-outlet name="viewer"></router-outlet>

projects/aca-content/src/lib/components/layout/app-layout/app-layout.component.scss

@@ -0,0 +1,34 @@
+.app-layout {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  height: 100%;
+  overflow: hidden;
+  min-height: 0;
+
+  router-outlet[name='viewer'] + * {
+    width: 100%;
+    height: 100%;
+    z-index: 999;
+    position: absolute;
+    top: 0;
+    right: 0;
+    background-color: white;
+  }
+
+  adf-file-uploading-dialog {
+    z-index: 1000;
+  }
+}
+
+@media screen and (max-width: 599px) {
+  .adf-app-title {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 719px) {
+  .adf-app-logo {
+    display: none;
+  }
+}

projects/aca-content/src/lib/components/layout/app-layout/app-layout.component.spec.ts

@@ -0,0 +1,220 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { AppConfigService, FileModel, UploadService, UserPreferencesService } from '@alfresco/adf-core';
+import { AppLayoutComponent } from './app-layout.component';
+import { AppTestingModule } from '../../../testing/app-testing.module';
+import { Store } from '@ngrx/store';
+import { AppStore, SetSelectedNodesAction, ResetSelectionAction } from '@alfresco/aca-shared/store';
+import { Router, NavigationStart } from '@angular/router';
+import { of, Subject } from 'rxjs';
+import { By } from '@angular/platform-browser';
+
+class MockRouter {
+  private url = 'some-url';
+  private subject = new Subject();
+  events = this.subject.asObservable();
+  routerState = { snapshot: { url: this.url } };
+
+  navigateByUrl(url: string) {
+    const navigationStart = new NavigationStart(0, url);
+    this.subject.next(navigationStart);
+  }
+}
+
+describe('AppLayoutComponent', () => {
+  let fixture: ComponentFixture<AppLayoutComponent>;
+  let component: AppLayoutComponent;
+  let appConfig: AppConfigService;
+  let userPreference: UserPreferencesService;
+  let store: Store<AppStore>;
+  let router: Router;
+  let uploadService: UploadService;
+  let fakeFileList: FileModel[];
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [AppTestingModule],
+      providers: [
+        Store,
+        {
+          provide: Router,
+          useClass: MockRouter
+        }
+      ],
+      declarations: [AppLayoutComponent],
+      schemas: [NO_ERRORS_SCHEMA]
+    });
+
+    fixture = TestBed.createComponent(AppLayoutComponent);
+    component = fixture.componentInstance;
+    appConfig = TestBed.inject(AppConfigService);
+    store = TestBed.inject(Store);
+    router = TestBed.inject(Router);
+    userPreference = TestBed.inject(UserPreferencesService);
+
+    fakeFileList = [new FileModel(new File([], 'fakeFile'))];
+
+    uploadService = TestBed.inject(UploadService);
+  });
+
+  beforeEach(() => {
+    appConfig.config.languages = [];
+    appConfig.config.locale = 'en';
+  });
+
+  describe('sidenav state', () => {
+    it('should get state from configuration', () => {
+      appConfig.config.sideNav = {
+        expandedSidenav: false,
+        preserveState: false
+      };
+
+      fixture.detectChanges();
+
+      expect(component.expandedSidenav).toBe(false);
+    });
+
+    it('should resolve state to true is no configuration', () => {
+      appConfig.config.sidenav = {};
+
+      fixture.detectChanges();
+
+      expect(component.expandedSidenav).toBe(true);
+    });
+
+    it('should get state from user settings as true', () => {
+      appConfig.config.sideNav = {
+        expandedSidenav: false,
+        preserveState: true
+      };
+
+      spyOn(userPreference, 'get').and.callFake((key) => {
+        if (key === 'expandedSidenav') {
+          return 'true';
+        }
+        return 'false';
+      });
+
+      fixture.detectChanges();
+
+      expect(component.expandedSidenav).toBe(true);
+    });
+
+    it('should get state from user settings as false', () => {
+      appConfig.config.sidenav = {
+        expandedSidenav: false,
+        preserveState: true
+      };
+
+      spyOn(userPreference, 'get').and.callFake((key) => {
+        if (key === 'expandedSidenav') {
+          return 'false';
+        }
+        return 'true';
+      });
+
+      fixture.detectChanges();
+
+      expect(component.expandedSidenav).toBe(false);
+    });
+  });
+
+  it('should reset selection before navigation', () => {
+    const selection: any[] = [{ entry: { id: 'nodeId', name: 'name' } }];
+    spyOn(store, 'dispatch').and.stub();
+    fixture.detectChanges();
+    store.dispatch(new SetSelectedNodesAction(selection));
+    router.navigateByUrl('somewhere/over/the/rainbow');
+    fixture.detectChanges();
+
+    expect(store.dispatch['calls'].mostRecent().args).toEqual([new ResetSelectionAction()]);
+  });
+
+  it('should close menu on mobile screen size', () => {
+    component.minimizeSidenav = false;
+    component.layout.container = {
+      isMobileScreenSize: true,
+      toggleMenu: () => {}
+    };
+
+    spyOn(component.layout.container, 'toggleMenu');
+    fixture.detectChanges();
+
+    component.hideMenu({ preventDefault: () => {} } as any);
+
+    expect(component.layout.container.toggleMenu).toHaveBeenCalled();
+  });
+
+  it('should close menu on mobile screen size also when minimizeSidenav true', () => {
+    fixture.detectChanges();
+    component.minimizeSidenav = true;
+    component.layout.container = {
+      isMobileScreenSize: true,
+      toggleMenu: () => {}
+    };
+
+    spyOn(component.layout.container, 'toggleMenu');
+    fixture.detectChanges();
+
+    component.hideMenu({ preventDefault: () => {} } as any);
+
+    expect(component.layout.container.toggleMenu).toHaveBeenCalled();
+  });
+
+  describe('File Uploading Dialog', () => {
+    it('should the uploading file dialog be visible on the left when the showFileUploadingDialog is true', async () => {
+      fixture.detectChanges();
+      await fixture.whenStable();
+
+      uploadService.addToQueue(...fakeFileList);
+      fixture.detectChanges();
+      await fixture.whenStable();
+
+      const fileUploadingDialog = fixture.debugElement.query(By.css('adf-file-uploading-dialog'));
+
+      expect(fileUploadingDialog.attributes['position']).toEqual('left');
+      expect(component.showFileUploadingDialog).toEqual(true);
+      expect(fileUploadingDialog).not.toEqual(null);
+    });
+
+    it('should the uploading file dialog not be visible when the showFileUploadingDialog is false', async () => {
+      spyOn(store, 'select').and.returnValue(of(false));
+      fixture.detectChanges();
+      await fixture.whenStable();
+
+      uploadService.addToQueue(...fakeFileList);
+      fixture.detectChanges();
+      await fixture.whenStable();
+
+      const fileUploadingDialog = fixture.debugElement.query(By.css('adf-file-uploading-dialog'));
+
+      expect(component.showFileUploadingDialog).toEqual(false);
+      expect(fileUploadingDialog).toEqual(null);
+    });
+  });
+});

projects/aca-content/src/lib/components/layout/app-layout/app-layout.component.ts

@@ -0,0 +1,177 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { AppConfigService, SidenavLayoutComponent, UserPreferencesService } from '@alfresco/adf-core';
+import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { NavigationEnd, Router, NavigationStart } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { Subject, Observable } from 'rxjs';
+import { filter, takeUntil, map, withLatestFrom, delay } from 'rxjs/operators';
+import { NodePermissionService } from '@alfresco/aca-shared';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { AppStore, getCurrentFolder, getFileUploadingDialog, ResetSelectionAction } from '@alfresco/aca-shared/store';
+import { Directionality } from '@angular/cdk/bidi';
+
+@Component({
+  selector: 'app-layout',
+  templateUrl: './app-layout.component.html',
+  styleUrls: ['./app-layout.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'app-layout' }
+})
+export class AppLayoutComponent implements OnInit, OnDestroy {
+  @ViewChild('layout', { static: true })
+  layout: SidenavLayoutComponent;
+
+  onDestroy$: Subject<boolean> = new Subject<boolean>();
+  isSmallScreen$: Observable<boolean>;
+
+  expandedSidenav: boolean;
+  currentFolderId: string;
+  canUpload = false;
+
+  minimizeSidenav = false;
+  hideSidenav = false;
+  direction: Directionality;
+
+  showFileUploadingDialog: boolean;
+
+  private minimizeConditions: string[] = ['search'];
+  private hideConditions: string[] = ['/preview/'];
+
+  constructor(
+    protected store: Store<AppStore>,
+    private permission: NodePermissionService,
+    private router: Router,
+    private userPreferenceService: UserPreferencesService,
+    private appConfigService: AppConfigService,
+    private breakpointObserver: BreakpointObserver
+  ) {}
+
+  ngOnInit() {
+    this.isSmallScreen$ = this.breakpointObserver.observe(['(max-width: 600px)']).pipe(map((result) => result.matches));
+
+    this.hideSidenav = this.hideConditions.some((el) => this.router.routerState.snapshot.url.includes(el));
+
+    this.minimizeSidenav = this.minimizeConditions.some((el) => this.router.routerState.snapshot.url.includes(el));
+
+    if (!this.minimizeSidenav) {
+      this.expandedSidenav = this.getSidenavState();
+    } else {
+      this.expandedSidenav = false;
+    }
+
+    this.store
+      .select(getCurrentFolder)
+      .pipe(takeUntil(this.onDestroy$))
+      .subscribe((node) => {
+        this.currentFolderId = node ? node.id : null;
+        this.canUpload = node && this.permission.check(node, ['create']);
+      });
+
+    this.router.events
+      .pipe(
+        withLatestFrom(this.isSmallScreen$),
+        filter(([event, isSmallScreen]) => isSmallScreen && event instanceof NavigationEnd),
+        takeUntil(this.onDestroy$)
+      )
+      .subscribe(() => {
+        this.layout.container.sidenav.close();
+      });
+
+    this.router.events
+      .pipe(
+        filter((event) => event instanceof NavigationEnd),
+        takeUntil(this.onDestroy$)
+      )
+      .subscribe((event: NavigationEnd) => {
+        this.minimizeSidenav = this.minimizeConditions.some((el) => event.urlAfterRedirects.includes(el));
+        this.hideSidenav = this.hideConditions.some((el) => event.urlAfterRedirects.includes(el));
+
+        this.updateState();
+      });
+
+    this.router.events
+      .pipe(
+        filter((event) => event instanceof NavigationStart),
+        takeUntil(this.onDestroy$)
+      )
+      .subscribe(() => {
+        this.store.dispatch(new ResetSelectionAction());
+      });
+
+    this.store
+      .select(getFileUploadingDialog)
+      .pipe(delay(0), takeUntil(this.onDestroy$))
+      .subscribe((fileUploadingDialog: boolean) => {
+        this.showFileUploadingDialog = fileUploadingDialog;
+      });
+  }
+
+  ngOnDestroy() {
+    this.onDestroy$.next(true);
+    this.onDestroy$.complete();
+  }
+
+  hideMenu(event: Event) {
+    if (this.layout.container.isMobileScreenSize) {
+      event.preventDefault();
+      this.layout.container.toggleMenu();
+    }
+  }
+
+  private updateState() {
+    if (this.minimizeSidenav && !this.layout.isMenuMinimized) {
+      this.layout.isMenuMinimized = true;
+      if (!this.layout.container.isMobileScreenSize) {
+        this.layout.container.toggleMenu();
+      }
+    }
+
+    if (!this.minimizeSidenav) {
+      if (this.getSidenavState() && this.layout.isMenuMinimized) {
+        this.layout.isMenuMinimized = false;
+        this.layout.container.toggleMenu();
+      }
+    }
+  }
+
+  onExpanded(state: boolean) {
+    if (!this.minimizeSidenav && this.appConfigService.get('sideNav.preserveState')) {
+      this.userPreferenceService.set('expandedSidenav', state);
+    }
+  }
+
+  private getSidenavState(): boolean {
+    const expand = this.appConfigService.get<boolean>('sideNav.expandedSidenav', true);
+    const preserveState = this.appConfigService.get<boolean>('sideNav.preserveState', true);
+
+    if (preserveState) {
+      return this.userPreferenceService.get('expandedSidenav', expand.toString()) === 'true';
+    }
+
+    return expand;
+  }
+}

projects/aca-content/src/lib/components/layout/layout.module.ts

@@ -0,0 +1,53 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+import { AppLayoutComponent } from './app-layout/app-layout.component';
+import { ContentModule } from '@alfresco/adf-content-services';
+import { RouterModule } from '@angular/router';
+import { AppSidenavModule } from '../sidenav/sidenav.module';
+import { AppCommonModule } from '../common/common.module';
+import { AppHeaderModule } from '../header/header.module';
+import { HttpClientModule } from '@angular/common/http';
+import { PageLayoutModule } from '@alfresco/aca-shared';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    RouterModule,
+    CoreModule.forChild(),
+    ContentModule.forChild(),
+    AppCommonModule,
+    AppSidenavModule,
+    AppHeaderModule,
+    HttpClientModule,
+    PageLayoutModule
+  ],
+  declarations: [AppLayoutComponent],
+  exports: [AppLayoutComponent, PageLayoutModule]
+})
+export class AppLayoutModule {}

projects/aca-content/src/lib/components/libraries/libraries.component.html

@@ -0,0 +1,76 @@
+<aca-page-layout>
+  <aca-page-layout-header>
+    <adf-breadcrumb root="APP.BROWSE.LIBRARIES.MENU.MY_LIBRARIES.TITLE"> </adf-breadcrumb>
+
+    <adf-toolbar class="adf-toolbar--inline">
+      <ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
+        <aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
+      </ng-container>
+    </adf-toolbar>
+  </aca-page-layout-header>
+
+  <aca-page-layout-content>
+    <div class="main-content">
+      <adf-document-list
+        #documentList
+        acaDocumentList
+        acaContextActions
+        [display]="documentDisplayMode$ | async"
+        currentFolderId="-mysites-"
+        selectionMode="single"
+        [navigate]="false"
+        [sorting]="['title', 'asc']"
+        sortingMode="client"
+        [imageResolver]="imageResolver"
+        (node-dblclick)="handleNodeClick($event)"
+        (name-click)="handleNodeClick($event)"
+      >
+        <adf-custom-empty-content-template>
+          <adf-empty-content
+            icon="library_books"
+            [title]="'APP.BROWSE.LIBRARIES.EMPTY_STATE.FILE_LIBRARIES.TITLE'"
+            subtitle="APP.BROWSE.LIBRARIES.EMPTY_STATE.FILE_LIBRARIES.TEXT"
+          >
+          </adf-empty-content>
+        </adf-custom-empty-content-template>
+
+        <data-columns>
+          <ng-container *ngFor="let column of columns; trackBy: trackByColumnId">
+            <ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
+              <data-column
+                [key]="column.key"
+                [title]="column.title"
+                [type]="column.type"
+                [format]="column.format"
+                [class]="column.class"
+                [sortable]="column.sortable"
+              >
+                <ng-template let-context>
+                  <adf-dynamic-column [id]="column.template" [context]="context"> </adf-dynamic-column>
+                </ng-template>
+              </data-column>
+            </ng-container>
+
+            <ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
+              <data-column
+                [key]="column.key"
+                [title]="column.title"
+                [type]="column.type"
+                [format]="column.format"
+                [class]="column.class"
+                [sortable]="column.sortable"
+              >
+              </data-column>
+            </ng-container>
+          </ng-container>
+        </data-columns>
+      </adf-document-list>
+
+      <adf-pagination acaPagination [target]="documentList"> </adf-pagination>
+    </div>
+
+    <div class="sidebar" *ngIf="infoDrawerOpened$ | async">
+      <aca-info-drawer [node]="$any(selection).library"></aca-info-drawer>
+    </div>
+  </aca-page-layout-content>
+</aca-page-layout>

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

@@ -0,0 +1,83 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { Router } from '@angular/router';
+import { AlfrescoApiService, DataTableComponent, AppConfigModule } from '@alfresco/adf-core';
+import { DocumentListComponent, NodeFavoriteDirective } from '@alfresco/adf-content-services';
+import { LibrariesComponent } from './libraries.component';
+import { AppTestingModule } from '../../testing/app-testing.module';
+import { EffectsModule } from '@ngrx/effects';
+import { LibraryEffects } from '../../store/effects';
+import { ContentApiService } from '@alfresco/aca-shared';
+
+describe('LibrariesComponent', () => {
+  let fixture: ComponentFixture<LibrariesComponent>;
+  let component: LibrariesComponent;
+  let alfrescoApi: AlfrescoApiService;
+  let contentApiService: ContentApiService;
+  let router: Router;
+  let page;
+
+  beforeEach(() => {
+    page = {
+      list: {
+        entries: [{ entry: { id: 1 } }, { entry: { id: 2 } }],
+        pagination: { data: 'data' }
+      }
+    };
+  });
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [AppTestingModule, EffectsModule.forRoot([LibraryEffects]), AppConfigModule],
+      declarations: [DataTableComponent, NodeFavoriteDirective, DocumentListComponent, LibrariesComponent],
+      schemas: [NO_ERRORS_SCHEMA]
+    });
+
+    fixture = TestBed.createComponent(LibrariesComponent);
+    component = fixture.componentInstance;
+
+    alfrescoApi = TestBed.inject(AlfrescoApiService);
+    contentApiService = TestBed.inject(ContentApiService);
+    alfrescoApi.reset();
+    router = TestBed.inject(Router);
+
+    const sitesApi: any = contentApiService['sitesApi'];
+
+    spyOn(sitesApi, 'listSites').and.returnValue(Promise.resolve(page));
+    spyOn(sitesApi, 'listSiteMembershipsForPerson').and.returnValue(Promise.resolve({}));
+  });
+
+  describe('Node navigation', () => {
+    it('does not navigate when id is not passed', () => {
+      spyOn(router, 'navigate').and.stub();
+      component.navigateTo(null);
+
+      expect(router.navigate).not.toHaveBeenCalled();
+    });
+  });
+});

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

@@ -0,0 +1,79 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { AppStore, NavigateLibraryAction } from '@alfresco/aca-shared/store';
+import { SiteEntry } from '@alfresco/js-api';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { Component, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { ContentManagementService } from '../../services/content-management.service';
+import { PageComponent } from '../page.component';
+import { AppExtensionService, AppHookService } from '@alfresco/aca-shared';
+import { DocumentListPresetRef } from '@alfresco/adf-extensions';
+
+@Component({
+  templateUrl: './libraries.component.html'
+})
+export class LibrariesComponent extends PageComponent implements OnInit {
+  isSmallScreen = false;
+
+  columns: DocumentListPresetRef[] = [];
+
+  constructor(
+    content: ContentManagementService,
+    store: Store<AppStore>,
+    extensions: AppExtensionService,
+    private appHookService: AppHookService,
+    private breakpointObserver: BreakpointObserver
+  ) {
+    super(store, extensions, content);
+  }
+
+  ngOnInit() {
+    super.ngOnInit();
+
+    this.subscriptions.push(
+      this.appHookService.libraryDeleted.subscribe(() => this.reload()),
+      this.appHookService.libraryUpdated.subscribe(() => this.reload()),
+      this.appHookService.libraryLeft.subscribe(() => this.reload()),
+
+      this.breakpointObserver.observe([Breakpoints.HandsetPortrait, Breakpoints.HandsetLandscape]).subscribe((result) => {
+        this.isSmallScreen = result.matches;
+      })
+    );
+
+    this.columns = this.extensions.documentListPresets.libraries || [];
+  }
+
+  navigateTo(node: SiteEntry) {
+    if (node && node.entry && node.entry.guid) {
+      this.store.dispatch(new NavigateLibraryAction(node.entry.guid));
+    }
+  }
+
+  handleNodeClick(event: Event) {
+    this.navigateTo((event as CustomEvent).detail?.node);
+  }
+}

projects/aca-content/src/lib/components/login/login.component.html

@@ -0,0 +1,10 @@
+<adf-login
+  [copyrightText]="'application.copyright' | adfAppConfig | translate"
+  providers="ECM"
+  successRoute="/personal-files"
+  logoImageUrl="./assets/images/alfresco-logo.svg"
+  backgroundImageUrl="./assets/images/Wallpaper-BG-generic.svg"
+  [showRememberMe]="false"
+  [showLoginActions]="false"
+>
+</adf-login>

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

@@ -0,0 +1,31 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: './login.component.html'
+})
+export class LoginComponent {}

projects/aca-content/src/lib/components/login/login.module.ts

@@ -0,0 +1,37 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+import { LoginComponent } from './login.component';
+import { TranslateModule } from '@ngx-translate/core';
+
+@NgModule({
+  imports: [CommonModule, CoreModule.forChild(), TranslateModule.forChild()],
+  exports: [LoginComponent],
+  declarations: [LoginComponent]
+})
+export class AppLoginModule {}

projects/aca-content/src/lib/components/main-action/main-action.component.html

@@ -0,0 +1,30 @@
+<ng-container *ngIf="(mainAction$ | async) as action">
+    <ng-container [ngSwitch]="action.type">
+        <ng-container *ngSwitchCase="actionTypes.button">
+            <button
+                *ngIf="expanded"
+                mat-stroked-button
+                [id]="action.id"
+                (click)="runAction(action.actions.click)"
+                [disabled]="action.disabled"
+                class="app-main-action-button"
+                data-automation-id="app-main-action-button"
+            >
+                {{action.title | translate}}
+            </button>
+
+            <button
+                *ngIf="expanded === false"
+                mat-icon-button
+                [id]="action.id"
+                (click)="runAction(action.actions.click)"
+                [disabled]="action.disabled"
+                data-automation-id="app-main-action-icon"
+                title="{{ action.title| translate }}"
+            >
+                <mat-icon class="main-action-menu-icon">{{action.icon}}</mat-icon>
+            </button>
+        </ng-container>
+    </ng-container>
+</ng-container>
+

projects/aca-content/src/lib/components/main-action/main-action.component.scss

@@ -0,0 +1,10 @@
+.app-main-action-button {
+    width: 100%;
+    border-radius: 4px;
+    background-color: var(--theme-accent-color);
+    color: var(--theme-accent-color-default-contrast);
+}
+
+.main-action-menu-icon {
+    color: var(--theme-accent-color);
+}

projects/aca-content/src/lib/components/main-action/main-action.component.spec.ts

@@ -0,0 +1,157 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MainActionComponent } from './main-action.component';
+import { TranslationService, TranslationMock } from '@alfresco/adf-core';
+import { AppExtensionService } from '@alfresco/aca-shared';
+import { of } from 'rxjs';
+import { ACTION_CLICK, ACTION_TITLE, getContentActionRef } from '../../testing/content-action-ref';
+import { AppExtensionServiceMock } from '../../testing/app-extension-service-mock';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { TranslateModule } from '@ngx-translate/core';
+
+describe('MainActionComponent', () => {
+  let mainActionComponent: MainActionComponent;
+  const buttonQuery = '[data-automation-id="app-main-action-button"]';
+  const iconQuery = '[data-automation-id="app-main-action-icon"]';
+
+  let fixture: ComponentFixture<MainActionComponent>;
+  let appExtensionService: AppExtensionServiceMock;
+
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      imports: [CommonModule, MatButtonModule, TranslateModule.forRoot()],
+      providers: [
+        { provide: TranslationService, useClass: TranslationMock },
+        { provide: AppExtensionService, useClass: AppExtensionServiceMock }
+      ]
+    }).compileComponents();
+
+    appExtensionService = TestBed.inject(AppExtensionService);
+
+    fixture = TestBed.createComponent(MainActionComponent);
+    mainActionComponent = fixture.componentInstance;
+  });
+
+  describe('component is in expanded mode', () => {
+    beforeEach(async () => {
+      mainActionComponent.expanded = true;
+      fixture.detectChanges();
+    });
+
+    it('should display button if main action is configured', () => {
+      const buttonMainAction = fixture.debugElement.nativeElement.querySelector(buttonQuery);
+      const iconMainAction = fixture.debugElement.nativeElement.querySelector(iconQuery);
+
+      expect(iconMainAction).toBeFalsy();
+      expect(buttonMainAction.textContent.trim()).toBe(ACTION_TITLE);
+    });
+
+    it('should not display button if main action is not configured', () => {
+      spyOn(appExtensionService, 'getMainAction').and.returnValue(of(undefined));
+      mainActionComponent.ngOnInit();
+      fixture.detectChanges();
+
+      const button = fixture.debugElement.nativeElement.querySelector(buttonQuery);
+      expect(button).toBeFalsy();
+    });
+
+    it('should call extension action', () => {
+      const runExtensionActionSpy = spyOn(appExtensionService, 'runActionById');
+
+      const button = fixture.debugElement.nativeElement.querySelector(buttonQuery);
+      button.click();
+
+      expect(runExtensionActionSpy).toHaveBeenCalledWith(ACTION_CLICK);
+    });
+
+    it('should not call button if main action is disabled', () => {
+      const disabledMainActionRef = getContentActionRef();
+      disabledMainActionRef.disabled = true;
+
+      spyOn(appExtensionService, 'getMainAction').and.returnValue(of(disabledMainActionRef));
+      const runAction = spyOn(mainActionComponent, 'runAction');
+
+      mainActionComponent.ngOnInit();
+      fixture.detectChanges();
+
+      const button = fixture.debugElement.nativeElement.querySelector(buttonQuery);
+      button.click();
+
+      expect(runAction).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('component is displayed as icon', () => {
+    beforeEach(async () => {
+      mainActionComponent.expanded = false;
+      fixture.detectChanges();
+    });
+
+    it('should display icon if main action is configured', () => {
+      const buttonMainAction = fixture.debugElement.nativeElement.querySelector(buttonQuery);
+      const iconMainAction = fixture.debugElement.nativeElement.querySelector(iconQuery);
+
+      expect(buttonMainAction).toBeFalsy();
+      expect(iconMainAction).toBeTruthy();
+    });
+
+    it('should not display icon if main action is not configured', () => {
+      spyOn(appExtensionService, 'getMainAction').and.returnValue(of(undefined));
+      mainActionComponent.ngOnInit();
+      fixture.detectChanges();
+
+      const mainAction = fixture.debugElement.nativeElement.querySelector(iconQuery);
+      expect(mainAction).toBeFalsy();
+    });
+
+    it('should call extension action', () => {
+      const runExtensionActionSpy = spyOn(appExtensionService, 'runActionById');
+
+      const mainAction = fixture.debugElement.nativeElement.querySelector(iconQuery);
+      mainAction.click();
+
+      expect(runExtensionActionSpy).toHaveBeenCalledWith(ACTION_CLICK);
+    });
+
+    it('should not call icon if main action is disabled', () => {
+      const disabledMainActionRef = getContentActionRef();
+      disabledMainActionRef.disabled = true;
+
+      spyOn(appExtensionService, 'getMainAction').and.returnValue(of(disabledMainActionRef));
+      const runAction = spyOn(mainActionComponent, 'runAction');
+
+      mainActionComponent.ngOnInit();
+      fixture.detectChanges();
+
+      const button = fixture.debugElement.nativeElement.querySelector(iconQuery);
+      button.click();
+
+      expect(runAction).not.toHaveBeenCalled();
+    });
+  });
+});

projects/aca-content/src/lib/components/main-action/main-action.component.ts

@@ -0,0 +1,59 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { AppExtensionService } from '@alfresco/aca-shared';
+import { ContentActionRef, ContentActionType } from '@alfresco/adf-extensions';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-main-action',
+  templateUrl: './main-action.component.html',
+  styleUrls: ['./main-action.component.scss']
+})
+export class MainActionComponent implements OnInit, OnDestroy {
+  @Input() expanded: boolean;
+
+  mainAction$: Observable<ContentActionRef>;
+
+  actionTypes = ContentActionType;
+
+  private onDestroy$ = new Subject<boolean>();
+
+  constructor(private extensions: AppExtensionService) {}
+
+  ngOnDestroy(): void {
+    this.onDestroy$.next(true);
+  }
+
+  ngOnInit(): void {
+    this.mainAction$ = this.extensions.getMainAction().pipe(takeUntil(this.onDestroy$));
+  }
+
+  runAction(action: string): void {
+    this.extensions.runActionById(action);
+  }
+}

projects/aca-content/src/lib/components/main-action/main-action.module.ts

@@ -0,0 +1,38 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { TranslateModule } from '@ngx-translate/core';
+import { MainActionComponent } from './main-action.component';
+import { MatIconModule } from '@angular/material/icon';
+
+@NgModule({
+  imports: [CommonModule, MatButtonModule, MatIconModule, TranslateModule.forChild()],
+  exports: [MainActionComponent],
+  declarations: [MainActionComponent]
+})
+export class MainActionModule {}

projects/aca-content/src/lib/components/node-version/node-version-form.component.html

@@ -0,0 +1,27 @@
+<form novalidate [formGroup]="form" class="form">
+  <p class="form__subtitle">
+    {{ 'VERSION.FORM.SUBTITLE' | translate }}
+  </p>
+
+  <mat-radio-group formControlName="version" class="form__version">
+    <mat-radio-button
+      class="form__version--option"
+      color="primary"
+      *ngFor="let option of versions"
+      [attr.data-automation-id]="option.value"
+      [value]="option.value"
+    >
+      {{ option.label | translate }}
+    </mat-radio-button>
+  </mat-radio-group>
+
+  <mat-form-field class="form__comment">
+    <textarea
+      matInput
+      placeholder="{{ 'VERSION.FORM.COMMENT.PLACEHOLDER' | translate }}"
+      rows="1"
+      autocomplete="off"
+      formControlName="comment"
+    ></textarea>
+  </mat-form-field>
+</form>

projects/aca-content/src/lib/components/node-version/node-version-form.component.scss

@@ -0,0 +1,24 @@
+.app-node-version-form__container {
+  display: flex;
+  max-width: 400px;
+
+  .form {
+    width: 100%;
+  }
+
+  .form__version {
+    display: flex;
+    flex-direction: column;
+    padding: 20px 0;
+  }
+
+  .form__version--option:last-child {
+    padding-top: 20px;
+  }
+
+  .form {
+    padding: 0 10px;
+    display: flex;
+    flex-direction: column;
+  }
+}

projects/aca-content/src/lib/components/node-version/node-version-form.component.spec.ts

@@ -0,0 +1,67 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { AppNodeVersionFormComponent } from './node-version-form.component';
+import { setupTestBed, CoreModule } from '@alfresco/adf-core';
+import { TestBed } from '@angular/core/testing';
+import { TranslateModule } from '@ngx-translate/core';
+
+describe('AppNodeVersionFormComponent', () => {
+  let fixture;
+  let component;
+
+  setupTestBed({
+    imports: [TranslateModule.forRoot(), CoreModule.forRoot(), NoopAnimationsModule],
+    declarations: [AppNodeVersionFormComponent]
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AppNodeVersionFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should have minor version option selected', () => {
+    const isSelected = fixture.debugElement.nativeElement.querySelectorAll('.form__version--option')[0].classList.contains('mat-radio-checked');
+
+    expect(isSelected).toBe(true);
+  });
+
+  it('should emit form state on changes', () => {
+    const formData = {
+      comment: 'some text',
+      version: true
+    };
+    spyOn(component.update, 'emit');
+
+    component.form.valueChanges.next(formData);
+    expect(component.update.emit).toHaveBeenCalledWith(formData);
+  });
+
+  it('form should have valid state upon initialization', () => {
+    expect(component.form.valid).toBe(true);
+  });
+});

projects/aca-content/src/lib/components/node-version/node-version-form.component.ts

@@ -0,0 +1,76 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Component, OnDestroy, OnInit, ViewEncapsulation, Output, EventEmitter } from '@angular/core';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+export interface VersionFormEntry {
+  comment: string;
+  version: boolean;
+}
+
+@Component({
+  selector: 'app-node-version-form',
+  templateUrl: './node-version-form.component.html',
+  styleUrls: ['./node-version-form.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'app-node-version-form__container' },
+  exportAs: 'nodeVersionForm'
+})
+export class AppNodeVersionFormComponent implements OnInit, OnDestroy {
+  @Output() update: EventEmitter<VersionFormEntry> = new EventEmitter();
+
+  form: UntypedFormGroup;
+
+  private onDestroy$: Subject<boolean> = new Subject<boolean>();
+  private versionOptions = [
+    { label: 'VERSION.FORM.VERSION.MINOR', value: false },
+    { label: 'VERSION.FORM.VERSION.MAJOR', value: true }
+  ];
+
+  constructor(private formBuilder: UntypedFormBuilder) {}
+
+  ngOnInit() {
+    this.form = this.formBuilder.group({
+      comment: [''],
+      version: [this.versionOptions[0].value]
+    });
+
+    this.form.valueChanges.pipe(takeUntil(this.onDestroy$)).subscribe((values: VersionFormEntry) => {
+      this.update.emit(values);
+    });
+  }
+
+  get versions() {
+    return this.versionOptions;
+  }
+
+  ngOnDestroy() {
+    this.onDestroy$.next(true);
+    this.onDestroy$.complete();
+  }
+}

projects/aca-content/src/lib/components/node-version/node-version.module.ts

@@ -0,0 +1,55 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { AppNodeVersionFormComponent } from './node-version-form.component';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+
+import { CoreModule } from '@alfresco/adf-core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import { CommonModule } from '@angular/common';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+
+import { NgModule } from '@angular/core';
+@NgModule({
+  imports: [
+    CoreModule,
+    MatButtonModule,
+    MatDialogModule,
+    FormsModule,
+    ReactiveFormsModule,
+    BrowserModule,
+    CommonModule,
+    MatRadioModule,
+    MatFormFieldModule,
+    MatInputModule
+  ],
+  exports: [AppNodeVersionFormComponent],
+  declarations: [AppNodeVersionFormComponent]
+})
+export class AppNodeVersionModule {}

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

@@ -0,0 +1,268 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { PageComponent } from './page.component';
+import { ReloadDocumentListAction, SetSelectedNodesAction, AppState, AppStore, ViewNodeAction } from '@alfresco/aca-shared/store';
+import { AppExtensionService } from '@alfresco/aca-shared';
+import { MinimalNodeEntity, NodePaging } from '@alfresco/js-api';
+import { ContentManagementService } from '../services/content-management.service';
+import { EffectsModule } from '@ngrx/effects';
+import { ViewerEffects } from '../store/effects';
+import { Store } from '@ngrx/store';
+import { AppTestingModule } from '../testing/app-testing.module';
+import { Component } from '@angular/core';
+import { DocumentListComponent } from '@alfresco/adf-content-services';
+import { MockStore, provideMockStore } from '@ngrx/store/testing';
+
+@Component({
+  selector: 'aca-test',
+  template: ''
+})
+class TestComponent extends PageComponent {
+  node: any;
+
+  constructor(store: Store<AppStore>, extensions: AppExtensionService, content: ContentManagementService) {
+    super(store, extensions, content);
+  }
+}
+
+describe('PageComponent', () => {
+  let component: TestComponent;
+  let store: Store<AppState>;
+  let fixture: ComponentFixture<TestComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [AppTestingModule, EffectsModule.forRoot([ViewerEffects])],
+      declarations: [TestComponent],
+      providers: [ContentManagementService, AppExtensionService]
+    });
+
+    store = TestBed.inject(Store);
+    fixture = TestBed.createComponent(TestComponent);
+    component = fixture.componentInstance;
+  });
+
+  afterEach(() => {
+    fixture.destroy();
+  });
+
+  describe('getParentNodeId()', () => {
+    it('returns parent node id when node is set', () => {
+      component.node = { id: 'node-id' };
+
+      expect(component.getParentNodeId()).toBe('node-id');
+    });
+
+    it('returns null when node is not set', () => {
+      component.node = null;
+
+      expect(component.getParentNodeId()).toBe(null);
+    });
+  });
+
+  describe('Reload', () => {
+    const locationHref = location.href;
+
+    afterEach(() => {
+      window.history.pushState({}, null, locationHref);
+    });
+
+    it('should not reload if url contains viewer outlet', () => {
+      window.history.pushState({}, null, `${locationHref}#test(viewer:view)`);
+      spyOn(store, 'dispatch');
+
+      component.reload();
+      expect(store.dispatch).not.toHaveBeenCalled();
+    });
+
+    it('should reload if url does not contain viewer outlet', () => {
+      spyOn(store, 'dispatch');
+
+      component.reload();
+      expect(store.dispatch).toHaveBeenCalledWith(new ReloadDocumentListAction());
+    });
+
+    it('should set selection after reload if node is passed', () => {
+      const node = {
+        entry: {
+          id: 'node-id'
+        }
+      } as MinimalNodeEntity;
+      spyOn(store, 'dispatch');
+
+      component.reload(node);
+      expect(store.dispatch['calls'].mostRecent().args[0]).toEqual(new SetSelectedNodesAction([node]));
+    });
+
+    it('should clear results onAllFilterCleared event', () => {
+      component.documentList = {
+        node: {
+          list: {
+            pagination: {},
+            entries: [{ entry: { id: 'new-node-id' } }]
+          }
+        } as NodePaging
+      } as DocumentListComponent;
+      spyOn(store, 'dispatch');
+
+      component.onAllFilterCleared();
+      expect(component.documentList.node).toBe(null);
+      expect(store.dispatch['calls'].mostRecent().args[0]).toEqual(new ReloadDocumentListAction());
+    });
+
+    it('should call onAllFilterCleared event if page is viewer outlet', () => {
+      window.history.pushState({}, null, `${locationHref}#test(viewer:view)`);
+      const nodePaging = {
+        list: {
+          pagination: {},
+          entries: [{ entry: { id: 'new-node-id' } }]
+        }
+      } as NodePaging;
+
+      component.documentList = { node: nodePaging } as DocumentListComponent;
+      spyOn(store, 'dispatch');
+
+      component.onAllFilterCleared();
+      expect(component.documentList.node).toEqual(nodePaging);
+      expect(store.dispatch).not.toHaveBeenCalled();
+    });
+
+    it('should call ViewNodeAction on showPreview for selected node', () => {
+      spyOn(store, 'dispatch');
+      const node = {
+        entry: {
+          id: 'node-id'
+        }
+      } as MinimalNodeEntity;
+
+      component.showPreview(node);
+      expect(store.dispatch).toHaveBeenCalledWith(new ViewNodeAction(node.entry.id));
+    });
+
+    it('should call ViewNodeAction on showPreview for `app:filelink` node type', () => {
+      spyOn(store, 'dispatch');
+      const linkNode = {
+        entry: {
+          id: 'node-id',
+          nodeType: 'app:filelink',
+          properties: {
+            'cm:destination': 'original-node-id'
+          }
+        }
+      } as MinimalNodeEntity;
+
+      component.showPreview(linkNode);
+      const id = linkNode.entry.properties['cm:destination'];
+      expect(store.dispatch).toHaveBeenCalledWith(new ViewNodeAction(id));
+    });
+  });
+});
+
+describe('Info Drawer state', () => {
+  let component: TestComponent;
+  let fixture: ComponentFixture<TestComponent>;
+
+  let store: MockStore<{ app: Partial<AppState> }>;
+  let appState: Partial<AppState> = {};
+
+  beforeEach(() => {
+    appState = {
+      selection: {
+        count: 2,
+        isEmpty: false,
+        libraries: [],
+        nodes: []
+      },
+      navigation: {},
+      infoDrawerOpened: false
+    };
+
+    TestBed.configureTestingModule({
+      imports: [AppTestingModule, EffectsModule.forRoot([ViewerEffects])],
+      declarations: [TestComponent],
+      providers: [
+        ContentManagementService,
+        AppExtensionService,
+        provideMockStore({
+          initialState: { app: appState }
+        })
+      ]
+    });
+
+    store = TestBed.inject(MockStore);
+    fixture = TestBed.createComponent(TestComponent);
+    component = fixture.componentInstance;
+  });
+
+  afterEach(() => {
+    fixture.destroy();
+  });
+
+  const locationHref = location.href;
+
+  afterEach(() => {
+    window.history.pushState({}, null, locationHref);
+  });
+
+  it('should open info drawer on action event', (done) => {
+    window.history.pushState({}, null, `${locationHref}#test`);
+    fixture.detectChanges();
+
+    fixture.whenStable().then(() => {
+      component.infoDrawerOpened$.subscribe((state) => {
+        expect(state).toBe(true);
+        done();
+      });
+    });
+
+    store.setState({
+      app: {
+        ...appState,
+        infoDrawerOpened: true
+      }
+    });
+  });
+
+  it('should not open info drawer if viewer outlet is active', (done) => {
+    window.history.pushState({}, null, `${locationHref}#test(viewer:view)`);
+    fixture.detectChanges();
+
+    fixture.whenStable().then(() => {
+      component.infoDrawerOpened$.subscribe((state) => {
+        expect(state).toBe(false);
+        done();
+      });
+    });
+
+    store.setState({
+      app: {
+        ...appState,
+        infoDrawerOpened: true
+      }
+    });
+  });
+});

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

@@ -0,0 +1,193 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { DocumentListComponent, ShareDataRow } from '@alfresco/adf-content-services';
+import { ShowHeaderMode } from '@alfresco/adf-core';
+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';
+import { Observable, Subject, Subscription } from 'rxjs';
+import { takeUntil, map } from 'rxjs/operators';
+import { ContentManagementService } from '../services/content-management.service';
+import {
+  AppStore,
+  ReloadDocumentListAction,
+  getCurrentFolder,
+  getAppSelection,
+  getDocumentDisplayMode,
+  isInfoDrawerOpened,
+  getSharedUrl,
+  ViewNodeAction,
+  ViewNodeExtras,
+  SetSelectedNodesAction
+} from '@alfresco/aca-shared/store';
+import { isLocked, isLibrary, AppExtensionService } from '@alfresco/aca-shared';
+
+/* eslint-disable @angular-eslint/directive-class-suffix */
+@Directive()
+export abstract class PageComponent implements OnInit, OnDestroy, OnChanges {
+  onDestroy$: Subject<boolean> = new Subject<boolean>();
+
+  @ViewChild(DocumentListComponent)
+  documentList: DocumentListComponent;
+
+  title = 'Page';
+  infoDrawerOpened$: Observable<boolean>;
+  node: MinimalNodeEntryEntity;
+  selection: SelectionState;
+  documentDisplayMode$: Observable<string>;
+  sharedPreviewUrl$: Observable<string>;
+  actions: Array<ContentActionRef> = [];
+  viewerToolbarActions: Array<ContentActionRef> = [];
+  canUpdateNode = false;
+  canUpload = false;
+  nodeResult: NodePaging;
+  showHeader = ShowHeaderMode.Data;
+  filterSorting = 'name-asc';
+
+  protected subscriptions: Subscription[] = [];
+
+  protected constructor(protected store: Store<AppStore>, protected extensions: AppExtensionService, protected content: ContentManagementService) {}
+
+  ngOnInit() {
+    this.sharedPreviewUrl$ = this.store.select(getSharedUrl);
+    this.infoDrawerOpened$ = this.store.select(isInfoDrawerOpened).pipe(map((infoDrawerState) => !this.isOutletPreviewUrl() && infoDrawerState));
+
+    this.documentDisplayMode$ = this.store.select(getDocumentDisplayMode);
+
+    this.store
+      .select(getAppSelection)
+      .pipe(takeUntil(this.onDestroy$))
+      .subscribe((selection) => {
+        this.selection = selection;
+        this.canUpdateNode = this.selection.count === 1 && this.content.canUpdateNode(selection.first);
+      });
+
+    this.extensions
+      .getAllowedToolbarActions()
+      .pipe(takeUntil(this.onDestroy$))
+      .subscribe((actions) => {
+        this.actions = actions;
+      });
+
+    this.extensions
+      .getViewerToolbarActions()
+      .pipe(takeUntil(this.onDestroy$))
+      .subscribe((actions) => {
+        this.viewerToolbarActions = actions;
+      });
+
+    this.store
+      .select(getCurrentFolder)
+      .pipe(takeUntil(this.onDestroy$))
+      .subscribe((node) => {
+        this.canUpload = node && this.content.canUploadContent(node);
+      });
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.nodeResult && changes.nodeResult.currentValue) {
+      this.nodeResult = changes.nodeResult.currentValue;
+    }
+  }
+
+  ngOnDestroy() {
+    this.subscriptions.forEach((subscription) => subscription.unsubscribe());
+    this.subscriptions = [];
+
+    this.onDestroy$.next(true);
+    this.onDestroy$.complete();
+    this.store.dispatch(new SetSelectedNodesAction([]));
+  }
+
+  showPreview(node: MinimalNodeEntity, extras?: ViewNodeExtras) {
+    if (node && node.entry) {
+      let id: string;
+
+      if (node.entry.nodeType === 'app:filelink') {
+        id = node.entry.properties['cm:destination'];
+      } else {
+        id = (node as any).entry.nodeId || (node as any).entry.guid || node.entry.id;
+      }
+
+      this.store.dispatch(new ViewNodeAction(id, extras));
+    }
+  }
+
+  getParentNodeId(): string {
+    return this.node ? this.node.id : null;
+  }
+
+  imageResolver(row: ShareDataRow): string | null {
+    if (isLocked(row.node)) {
+      return 'assets/images/baseline-lock-24px.svg';
+    }
+
+    if (isLibrary(row.node)) {
+      return 'assets/images/baseline-library_books-24px.svg';
+    }
+
+    return null;
+  }
+
+  reload(selectedNode?: MinimalNodeEntity): void {
+    if (this.isOutletPreviewUrl()) {
+      return;
+    }
+
+    this.store.dispatch(new ReloadDocumentListAction());
+    if (selectedNode) {
+      this.store.dispatch(new SetSelectedNodesAction([selectedNode]));
+    }
+  }
+
+  trackByActionId(_: number, action: ContentActionRef) {
+    return action.id;
+  }
+
+  trackById(_: number, obj: { id: string }) {
+    return obj.id;
+  }
+
+  trackByColumnId(_: number, obj: DocumentListPresetRef): string {
+    return obj.id;
+  }
+
+  private isOutletPreviewUrl(): boolean {
+    return location.href.includes('viewer:view');
+  }
+
+  onSortingChanged(event) {
+    this.filterSorting = event.detail.key + '-' + event.detail.direction;
+  }
+
+  onAllFilterCleared() {
+    if (!this.isOutletPreviewUrl()) {
+      this.documentList.node = null;
+      this.store.dispatch(new ReloadDocumentListAction());
+    }
+  }
+}

projects/aca-content/src/lib/components/preview/preview.component.html

@@ -0,0 +1,36 @@
+<ng-container *ngIf="nodeId">
+  <adf-viewer
+    [ngClass]="{
+      'right_side--hide': !showRightSide
+    }"
+    [nodeId]="nodeId"
+    [allowNavigate]="navigateMultiple"
+    [allowRightSidebar]="true"
+    [allowPrint]="false"
+    [showRightSidebar]="true"
+    [allowDownload]="false"
+    [allowFullScreen]="false"
+    [canNavigateBefore]="!!previousNodeId"
+    [canNavigateNext]="!!nextNodeId"
+    [overlayMode]="true"
+    (showViewerChange)="onVisibilityChanged($event)"
+    (navigateBefore)="onNavigateBefore($event)"
+    (navigateNext)="onNavigateNext($event)"
+  >
+    <adf-viewer-sidebar *ngIf="infoDrawerOpened$ | async">
+      <aca-info-drawer [node]="selection.file"></aca-info-drawer>
+    </adf-viewer-sidebar>
+
+    <adf-viewer-open-with *ngIf="openWith.length">
+      <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 *ngIf="!simplestMode">
+      <ng-container *ngFor="let action of viewerToolbarActions; trackBy: trackByActionId">
+        <aca-toolbar-action [actionRef]="action"></aca-toolbar-action>
+      </ng-container>
+    </adf-viewer-toolbar-actions>
+  </adf-viewer>
+</ng-container>

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

@@ -0,0 +1,27 @@
+.app-preview {
+  width: 100%;
+  height: 100%;
+}
+
+.adf-viewer-toolbar .adf-toolbar-divider {
+  display: none;
+}
+
+.adf-viewer-toolbar-actions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  .adf-toolbar-divider {
+    display: inline;
+  }
+}
+
+// todo: remove this when viewer supports extensions
+.adf-viewer-toolbar .mat-toolbar > button:last-child {
+  display: none;
+}
+
+.adf-viewer.right_side--hide .adf-viewer__sidebar__right {
+  width: 0;
+}

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

@@ -0,0 +1,695 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Router, ActivatedRoute } from '@angular/router';
+import { TestBed, ComponentFixture, fakeAsync, tick } from '@angular/core/testing';
+import { UserPreferencesService, UploadService, AlfrescoApiService } from '@alfresco/adf-core';
+import { ClosePreviewAction } from '@alfresco/aca-shared/store';
+import { PreviewComponent } from './preview.component';
+import { of, throwError } from 'rxjs';
+import { EffectsModule } from '@ngrx/effects';
+import { NodeEffects } from '../../store/effects/node.effects';
+import { AppTestingModule } from '../../testing/app-testing.module';
+import { ContentApiService, AppHookService } from '@alfresco/aca-shared';
+import { Store } from '@ngrx/store';
+import { Node, NodePaging, FavoritePaging, SharedLinkPaging, PersonEntry, ResultSetPaging } from '@alfresco/js-api';
+import { PreviewModule } from './preview.module';
+
+describe('PreviewComponent', () => {
+  let fixture: ComponentFixture<PreviewComponent>;
+  let component: PreviewComponent;
+  let router: Router;
+  let route: ActivatedRoute;
+  let preferences: UserPreferencesService;
+  let contentApi: ContentApiService;
+  let uploadService: UploadService;
+  let alfrescoApiService: AlfrescoApiService;
+  let appHookService: AppHookService;
+  let store: Store<any>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [EffectsModule.forRoot([NodeEffects]), PreviewModule, AppTestingModule]
+    });
+
+    fixture = TestBed.createComponent(PreviewComponent);
+    component = fixture.componentInstance;
+
+    router = TestBed.inject(Router);
+    route = TestBed.inject(ActivatedRoute);
+    preferences = TestBed.inject(UserPreferencesService);
+    contentApi = TestBed.inject(ContentApiService);
+    uploadService = TestBed.inject(UploadService);
+    alfrescoApiService = TestBed.inject(AlfrescoApiService);
+    appHookService = TestBed.inject(AppHookService);
+    store = TestBed.inject(Store);
+  });
+
+  it('should extract the property path root', () => {
+    expect(component.getRootField('some.property.path')).toBe('some');
+    expect(component.getRootField('some')).toBe('some');
+    expect(component.getRootField('')).toBe('');
+    expect(component.getRootField(null)).toBe(null);
+  });
+
+  it('should navigate to previous node in sub-folder', () => {
+    spyOn(router, 'navigate').and.stub();
+    const clickEvent = new MouseEvent('click');
+
+    component.previewLocation = 'personal-files';
+    component.folderId = 'folder1';
+    component.previousNodeId = 'previous1';
+    component.onNavigateBefore(clickEvent);
+
+    expect(router.navigate).toHaveBeenCalledWith(['personal-files', 'folder1', 'preview', 'previous1']);
+  });
+
+  it('should navigate back to previous node in the root path', () => {
+    spyOn(router, 'navigate').and.stub();
+    const clickEvent = new MouseEvent('click');
+
+    component.previewLocation = 'personal-files';
+    component.folderId = null;
+    component.previousNodeId = 'previous1';
+    component.onNavigateBefore(clickEvent);
+
+    expect(router.navigate).toHaveBeenCalledWith(['personal-files', 'preview', 'previous1']);
+  });
+
+  it('should not navigate back if node unset', () => {
+    spyOn(router, 'navigate').and.stub();
+    const clickEvent = new MouseEvent('click');
+
+    component.previousNodeId = null;
+    component.onNavigateBefore(clickEvent);
+
+    expect(router.navigate).not.toHaveBeenCalled();
+  });
+
+  it('should navigate to next node in sub-folder', () => {
+    spyOn(router, 'navigate').and.stub();
+    const clickEvent = new MouseEvent('click');
+
+    component.previewLocation = 'personal-files';
+    component.folderId = 'folder1';
+    component.nextNodeId = 'next1';
+    component.onNavigateNext(clickEvent);
+
+    expect(router.navigate).toHaveBeenCalledWith(['personal-files', 'folder1', 'preview', 'next1']);
+  });
+
+  it('should navigate to next node in the root path', () => {
+    spyOn(router, 'navigate').and.stub();
+    const clickEvent = new MouseEvent('click');
+
+    component.previewLocation = 'personal-files';
+    component.folderId = null;
+    component.nextNodeId = 'next1';
+    component.onNavigateNext(clickEvent);
+
+    expect(router.navigate).toHaveBeenCalledWith(['personal-files', 'preview', 'next1']);
+  });
+
+  it('should not navigate back if node unset', () => {
+    spyOn(router, 'navigate').and.stub();
+    const clickEvent = new MouseEvent('click');
+
+    component.nextNodeId = null;
+    component.onNavigateNext(clickEvent);
+
+    expect(router.navigate).not.toHaveBeenCalled();
+  });
+
+  it('should generate preview path for a folder only', () => {
+    component.previewLocation = 'personal-files';
+
+    expect(component.getPreviewPath('folder1', null)).toEqual(['personal-files', 'folder1']);
+  });
+
+  it('should generate preview path for a folder and a node', () => {
+    component.previewLocation = 'personal-files';
+
+    expect(component.getPreviewPath('folder1', 'node1')).toEqual(['personal-files', 'folder1', 'preview', 'node1']);
+  });
+
+  it('should generate preview path for a node only', () => {
+    component.previewLocation = 'personal-files';
+
+    expect(component.getPreviewPath(null, 'node1')).toEqual(['personal-files', 'preview', 'node1']);
+  });
+
+  it('should generate preview for the location only', () => {
+    component.previewLocation = 'personal-files';
+
+    expect(component.getPreviewPath(null, null)).toEqual(['personal-files']);
+  });
+
+  it('should navigate back to root path upon close', () => {
+    spyOn(router, 'navigate').and.stub();
+
+    component.routesSkipNavigation = [];
+    component.previewLocation = 'libraries';
+    component.folderId = null;
+
+    component.onVisibilityChanged(false);
+
+    expect(router.navigate).toHaveBeenCalledWith(['libraries', {}]);
+  });
+
+  it('should navigate back to folder path upon close', () => {
+    spyOn(router, 'navigate').and.stub();
+
+    component.routesSkipNavigation = [];
+    component.previewLocation = 'libraries';
+    component.folderId = 'site1';
+
+    component.onVisibilityChanged(false);
+
+    expect(router.navigate).toHaveBeenCalledWith(['libraries', {}, 'site1']);
+  });
+
+  it('should not navigate to root path for certain routes upon close', () => {
+    spyOn(router, 'navigate').and.stub();
+
+    component.routesSkipNavigation = ['shared'];
+    component.previewLocation = 'shared';
+    component.folderId = 'folder1';
+
+    component.onVisibilityChanged(false);
+
+    expect(router.navigate).toHaveBeenCalledWith(['shared', {}]);
+  });
+
+  it('should not navigate back if viewer is still visible', () => {
+    spyOn(router, 'navigate').and.stub();
+
+    component.routesSkipNavigation = [];
+    component.previewLocation = 'shared';
+
+    component.onVisibilityChanged(true);
+
+    expect(router.navigate).not.toHaveBeenCalled();
+  });
+
+  it('should enable multiple document navigation from route data', () => {
+    route.snapshot.data = {
+      navigateMultiple: true
+    };
+
+    component.ngOnInit();
+
+    expect(component.navigateMultiple).toBeTruthy();
+  });
+
+  it('should not enable multiple document navigation from route data', () => {
+    route.snapshot.data = {};
+
+    component.ngOnInit();
+
+    expect(component.navigateMultiple).toBeFalsy();
+  });
+
+  it('should fetch navigation source from route', () => {
+    route.snapshot.data = {
+      navigateSource: 'personal-files'
+    };
+
+    component.ngOnInit();
+
+    expect(component.navigateSource).toBe('personal-files');
+  });
+
+  it('should fetch case-insensitive source from route', () => {
+    route.snapshot.data = {
+      navigateSource: 'PERSONAL-FILES'
+    };
+
+    component.navigationSources = ['personal-files'];
+    component.ngOnInit();
+
+    expect(component.navigateSource).toBe('PERSONAL-FILES');
+  });
+
+  it('should fetch only permitted navigation source from route', () => {
+    route.snapshot.data = {
+      navigateSource: 'personal-files'
+    };
+
+    component.navigationSources = ['shared'];
+    component.ngOnInit();
+
+    expect(component.navigateSource).toBeNull();
+  });
+
+  it('should display document upon init', () => {
+    route.params = of({
+      folderId: 'folder1',
+      nodeId: 'node1'
+    });
+
+    spyOn(component, 'displayNode').and.stub();
+
+    component.ngOnInit();
+
+    expect(component.folderId).toBe('folder1');
+    expect(component.displayNode).toHaveBeenCalledWith('node1');
+  });
+
+  it('should return empty nearest nodes for missing node id', async () => {
+    const nearest = await component.getNearestNodes(null, 'folder1');
+
+    expect(nearest).toEqual({ left: null, right: null });
+  });
+
+  it('should return empty nearest nodes for missing folder id', async () => {
+    const nearest = await component.getNearestNodes('node1', null);
+
+    expect(nearest).toEqual({ left: null, right: null });
+  });
+
+  it('should return empty nearest nodes for crashed fields id request', async () => {
+    spyOn(component, 'getFileIds').and.returnValue(Promise.reject('err'));
+
+    const nearest = await component.getNearestNodes('node1', 'folder1');
+
+    expect(nearest).toEqual({ left: null, right: null });
+  });
+
+  it('should return nearest nodes', async () => {
+    spyOn(component, 'getFileIds').and.returnValue(Promise.resolve(['node1', 'node2', 'node3', 'node4', 'node5']));
+
+    let nearest = await component.getNearestNodes('node1', 'folder1');
+    expect(nearest).toEqual({ left: null, right: 'node2' });
+
+    nearest = await component.getNearestNodes('node3', 'folder1');
+    expect(nearest).toEqual({ left: 'node2', right: 'node4' });
+
+    nearest = await component.getNearestNodes('node5', 'folder1');
+    expect(nearest).toEqual({ left: 'node4', right: null });
+  });
+
+  it('should return empty nearest nodes if node is already deleted', async () => {
+    spyOn(component, 'getFileIds').and.returnValue(Promise.resolve(['node1', 'node2', 'node3', 'node4', 'node5']));
+
+    const nearest = await component.getNearestNodes('node9', 'folder1');
+    expect(nearest).toEqual({ left: null, right: null });
+  });
+
+  it('should not display node when id is missing', async () => {
+    spyOn(router, 'navigate').and.stub();
+    spyOn(contentApi, 'getNodeInfo').and.returnValue(of(null));
+
+    await component.displayNode(null);
+
+    expect(contentApi.getNodeInfo).not.toHaveBeenCalled();
+    expect(router.navigate).not.toHaveBeenCalled();
+  });
+
+  it('should navigate to original location if node not found', async () => {
+    spyOn(router, 'navigate').and.stub();
+    spyOn(contentApi, 'getNodeInfo').and.returnValue(throwError('error'));
+
+    component.previewLocation = 'personal-files';
+    await component.displayNode('folder1');
+
+    expect(contentApi.getNodeInfo).toHaveBeenCalledWith('folder1');
+    expect(router.navigate).toHaveBeenCalledWith(['personal-files', 'folder1']);
+  });
+
+  it('should navigate to original location if node is not a File', async () => {
+    spyOn(router, 'navigate').and.stub();
+    spyOn(contentApi, 'getNodeInfo').and.returnValue(
+      of({
+        isFile: false
+      } as Node)
+    );
+
+    component.previewLocation = 'personal-files';
+    await component.displayNode('folder1');
+
+    expect(contentApi.getNodeInfo).toHaveBeenCalledWith('folder1');
+    expect(router.navigate).toHaveBeenCalledWith(['personal-files', 'folder1']);
+  });
+
+  it('should navigate to original location in case of Alfresco API errors', async () => {
+    spyOn(router, 'navigate').and.stub();
+    spyOn(contentApi, 'getNodeInfo').and.returnValue(throwError('error'));
+
+    component.previewLocation = 'personal-files';
+    await component.displayNode('folder1');
+
+    expect(contentApi.getNodeInfo).toHaveBeenCalledWith('folder1');
+    expect(router.navigate).toHaveBeenCalledWith(['personal-files', 'folder1']);
+  });
+
+  it('should fetch and sort file ids for personal-files', async () => {
+    preferences.set('personal-files.sorting.key', 'name');
+    preferences.set('personal-files.sorting.direction', 'desc');
+
+    spyOn(contentApi, 'getNodeChildren').and.returnValue(
+      of({
+        list: {
+          entries: [{ entry: { id: 'node1', name: 'node 1' } }, { entry: { id: 'node2', name: 'node 2' } }]
+        }
+      } as NodePaging)
+    );
+
+    const ids = await component.getFileIds('personal-files', 'folder1');
+    expect(ids).toEqual(['node2', 'node1']);
+  });
+
+  it('should fetch file ids for personal-files with default sorting for missing key', async () => {
+    preferences.set('personal-files.sorting.key', 'missing');
+    preferences.set('personal-files.sorting.direction', 'desc');
+
+    spyOn(contentApi, 'getNodeChildren').and.returnValue(
+      of({
+        list: {
+          entries: [{ entry: { id: 'node1', name: 'node 1' } }, { entry: { id: 'node2', name: 'node 2' } }]
+        }
+      } as NodePaging)
+    );
+
+    const ids = await component.getFileIds('personal-files', 'folder1');
+    expect(ids).toEqual(['node1', 'node2']);
+  });
+
+  it('should sort file ids for personal-files with [modifiedAt desc]', async () => {
+    spyOn(preferences, 'get').and.returnValue(null);
+
+    spyOn(contentApi, 'getNodeChildren').and.returnValue(
+      of({
+        list: {
+          entries: [
+            { entry: { id: 'node1', name: 'node 1', modifiedAt: new Date(1) } },
+            { entry: { id: 'node2', name: 'node 2', modifiedAt: new Date(2) } }
+          ]
+        }
+      } as NodePaging)
+    );
+
+    const ids = await component.getFileIds('personal-files', 'folder1');
+    expect(ids).toEqual(['node2', 'node1']);
+  });
+
+  it('should fetch and sort file ids for libraries', async () => {
+    preferences.set('personal-files.sorting.key', 'name');
+    preferences.set('personal-files.sorting.direction', 'desc');
+
+    spyOn(contentApi, 'getNodeChildren').and.returnValue(
+      of({
+        list: {
+          entries: [{ entry: { id: 'node1', name: 'node 1' } }, { entry: { id: 'node2', name: 'node 2' } }]
+        }
+      } as NodePaging)
+    );
+
+    const ids = await component.getFileIds('libraries', 'site1');
+    expect(ids).toEqual(['node2', 'node1']);
+  });
+
+  it('should require folder id to fetch ids for libraries', async () => {
+    const ids = await component.getFileIds('libraries', null);
+    expect(ids).toEqual([]);
+  });
+
+  it('should sort file ids for libraries with [modifiedAt desc]', async () => {
+    spyOn(preferences, 'get').and.returnValue(null);
+
+    spyOn(contentApi, 'getNodeChildren').and.returnValue(
+      of({
+        list: {
+          entries: [
+            { entry: { id: 'node1', name: 'node 1', modifiedAt: new Date(1) } },
+            { entry: { id: 'node2', name: 'node 2', modifiedAt: new Date(2) } }
+          ]
+        }
+      } as NodePaging)
+    );
+
+    const ids = await component.getFileIds('libraries', 'folder1');
+    expect(ids).toEqual(['node2', 'node1']);
+  });
+
+  it('should fetch and sort ids for favorites', async () => {
+    preferences.set('favorites.sorting.key', 'name');
+    preferences.set('favorites.sorting.direction', 'desc');
+
+    spyOn(contentApi, 'getFavorites').and.returnValue(
+      of({
+        list: {
+          entries: [
+            { entry: { target: { file: { id: 'file3', name: 'file 3' } } } },
+            { entry: { target: { file: { id: 'file1', name: 'file 1' } } } },
+            { entry: { target: { file: { id: 'file2', name: 'file 2' } } } }
+          ]
+        }
+      } as FavoritePaging)
+    );
+
+    const ids = await component.getFileIds('favorites');
+    expect(ids).toEqual(['file3', 'file2', 'file1']);
+  });
+
+  it('should sort file ids for favorites with [modifiedAt desc]', async () => {
+    spyOn(preferences, 'get').and.returnValue(null);
+
+    spyOn(contentApi, 'getFavorites').and.returnValue(
+      of({
+        list: {
+          entries: [
+            {
+              entry: {
+                target: { file: { id: 'file3', modifiedAt: new Date(3) } }
+              }
+            },
+            {
+              entry: {
+                target: { file: { id: 'file1', modifiedAt: new Date(1) } }
+              }
+            },
+            {
+              entry: {
+                target: { file: { id: 'file2', modifiedAt: new Date(2) } }
+              }
+            }
+          ]
+        }
+      } as FavoritePaging)
+    );
+
+    const ids = await component.getFileIds('favorites');
+    expect(ids).toEqual(['file3', 'file2', 'file1']);
+  });
+
+  it('should fetch and sort file ids for shared files', async () => {
+    preferences.set('shared.sorting.key', 'name');
+    preferences.set('shared.sorting.direction', 'asc');
+
+    spyOn(contentApi, 'findSharedLinks').and.returnValue(
+      of({
+        list: {
+          entries: [
+            {
+              entry: {
+                nodeId: 'node2',
+                name: 'node 2',
+                modifiedAt: new Date(2)
+              }
+            },
+            {
+              entry: {
+                nodeId: 'node1',
+                name: 'node 1',
+                modifiedAt: new Date(1)
+              }
+            }
+          ]
+        }
+      } as SharedLinkPaging)
+    );
+
+    const ids = await component.getFileIds('shared');
+    expect(ids).toEqual(['node1', 'node2']);
+  });
+
+  it('should sort file ids for favorites with [modifiedAt desc]', async () => {
+    spyOn(preferences, 'get').and.returnValue(null);
+
+    spyOn(contentApi, 'findSharedLinks').and.returnValue(
+      of({
+        list: {
+          entries: [
+            {
+              entry: {
+                nodeId: 'node2',
+                name: 'node 2',
+                modifiedAt: new Date(2)
+              }
+            },
+            {
+              entry: {
+                nodeId: 'node1',
+                name: 'node 1',
+                modifiedAt: new Date(1)
+              }
+            }
+          ]
+        }
+      } as SharedLinkPaging)
+    );
+
+    const ids = await component.getFileIds('shared');
+    expect(ids).toEqual(['node2', 'node1']);
+  });
+
+  it('should fetch and sort ids for recent-files', async () => {
+    preferences.set('recent-files.sorting.key', 'name');
+    preferences.set('recent-files.sorting.direction', 'asc');
+
+    spyOn(contentApi, 'getPerson').and.returnValue(
+      of({
+        entry: { id: 'user' }
+      } as PersonEntry)
+    );
+
+    spyOn(contentApi, 'search').and.returnValue(
+      of({
+        list: {
+          entries: [
+            { entry: { id: 'node2', name: 'node 2', modifiedAt: new Date(2) } },
+            { entry: { id: 'node1', name: 'node 1', modifiedAt: new Date(1) } }
+          ]
+        }
+      } as ResultSetPaging)
+    );
+
+    const ids = await component.getFileIds('recent-files');
+    expect(ids).toEqual(['node1', 'node2']);
+  });
+
+  it('should sort file ids for favorites with [modifiedAt desc]', async () => {
+    spyOn(preferences, 'get').and.returnValue(null);
+
+    spyOn(contentApi, 'getPerson').and.returnValue(
+      of({
+        entry: { id: 'user' }
+      } as PersonEntry)
+    );
+
+    spyOn(contentApi, 'search').and.returnValue(
+      of({
+        list: {
+          entries: [
+            { entry: { id: 'node2', name: 'node 2', modifiedAt: new Date(2) } },
+            { entry: { id: 'node1', name: 'node 1', modifiedAt: new Date(1) } }
+          ]
+        }
+      } as ResultSetPaging)
+    );
+
+    const ids = await component.getFileIds('recent-files');
+    expect(ids).toEqual(['node2', 'node1']);
+  });
+
+  it('should return to parent folder on nodesDeleted event', async () => {
+    spyOn(component, 'navigateToFileLocation');
+    fixture.detectChanges();
+    await fixture.whenStable();
+    appHookService.nodesDeleted.next();
+
+    expect(component.navigateToFileLocation).toHaveBeenCalled();
+  });
+
+  it('should return to parent folder on fileUploadDeleted event', async () => {
+    spyOn(component, 'navigateToFileLocation');
+    fixture.detectChanges();
+    await fixture.whenStable();
+    uploadService.fileUploadDeleted.next();
+
+    expect(component.navigateToFileLocation).toHaveBeenCalled();
+  });
+
+  it('should emit nodeUpdated event on fileUploadComplete event', fakeAsync(() => {
+    spyOn(alfrescoApiService.nodeUpdated, 'next');
+    fixture.detectChanges();
+    uploadService.fileUploadComplete.next({ data: { entry: {} } } as any);
+    tick(300);
+
+    expect(alfrescoApiService.nodeUpdated.next).toHaveBeenCalled();
+  }));
+
+  it('should return to parent folder when event emitted from extension', async () => {
+    spyOn(component, 'navigateToFileLocation');
+    fixture.detectChanges();
+    await fixture.whenStable();
+    store.dispatch(new ClosePreviewAction());
+    expect(component.navigateToFileLocation).toHaveBeenCalled();
+  });
+
+  describe('Keyboard navigation', () => {
+    beforeEach(() => {
+      component.nextNodeId = 'nextNodeId';
+      component.previousNodeId = 'previousNodeId';
+      spyOn(router, 'navigate').and.stub();
+    });
+
+    afterEach(() => {
+      fixture.destroy();
+    });
+
+    it('should not navigate on keyboard event if target is child of sidebar container', () => {
+      const parent = document.createElement('div');
+      parent.className = 'adf-viewer__sidebar';
+
+      const child = document.createElement('button');
+      child.addEventListener('keyup', function (e) {
+        component.onNavigateNext(e);
+      });
+      parent.appendChild(child);
+      document.body.appendChild(parent);
+
+      child.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowLeft' }));
+
+      expect(router.navigate).not.toHaveBeenCalled();
+    });
+
+    it('should not navigate on keyboard event if target is child of cdk overlay', () => {
+      const parent = document.createElement('div');
+      parent.className = 'cdk-overlay-container';
+
+      const child = document.createElement('button');
+      child.addEventListener('keyup', function (e) {
+        component.onNavigateNext(e);
+      });
+      parent.appendChild(child);
+      document.body.appendChild(parent);
+
+      child.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowLeft' }));
+
+      expect(router.navigate).not.toHaveBeenCalled();
+    });
+  });
+});

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

@@ -0,0 +1,472 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Component, OnInit, OnDestroy, ViewEncapsulation, HostListener } from '@angular/core';
+import { Location } from '@angular/common';
+import { ActivatedRoute, Router, UrlTree, UrlSegmentGroup, UrlSegment, PRIMARY_OUTLET } from '@angular/router';
+import { debounceTime, map, takeUntil } from 'rxjs/operators';
+import { UserPreferencesService, ObjectUtils, UploadService, AlfrescoApiService } from '@alfresco/adf-core';
+import { Store } from '@ngrx/store';
+import { AppStore, ClosePreviewAction, ViewerActionTypes, SetSelectedNodesAction } from '@alfresco/aca-shared/store';
+import { PageComponent } from '../page.component';
+import { AppExtensionService, AppHookService, ContentApiService } from '@alfresco/aca-shared';
+import { ContentManagementService } from '../../services/content-management.service';
+import { ContentActionRef, ViewerExtensionRef } from '@alfresco/adf-extensions';
+import { SearchRequest } from '@alfresco/js-api';
+import { from } from 'rxjs';
+import { Actions, ofType } from '@ngrx/effects';
+
+@Component({
+  selector: 'app-preview',
+  templateUrl: './preview.component.html',
+  styleUrls: ['./preview.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'app-preview' }
+})
+export class PreviewComponent extends PageComponent implements OnInit, OnDestroy {
+  previewLocation: string = null;
+  routesSkipNavigation = ['shared', 'recent-files', 'favorites'];
+  navigateSource: string = null;
+  navigationSources = ['favorites', 'libraries', 'personal-files', 'recent-files', 'shared'];
+  folderId: string = null;
+  nodeId: string = null;
+  previousNodeId: string;
+  nextNodeId: string;
+  navigateMultiple = false;
+  openWith: Array<ContentActionRef> = [];
+  contentExtensions: Array<ViewerExtensionRef> = [];
+  showRightSide = false;
+  navigateBackAsClose = false;
+  simplestMode = false;
+
+  recentFileFilters = [
+    'TYPE:"content"',
+    '-PNAME:"0/wiki"',
+    '-TYPE:"app:filelink"',
+    '-TYPE:"fm:post"',
+    '-TYPE:"cm:thumbnail"',
+    '-TYPE:"cm:failedThumbnail"',
+    '-TYPE:"cm:rating"',
+    '-TYPE:"dl:dataList"',
+    '-TYPE:"dl:todoList"',
+    '-TYPE:"dl:issue"',
+    '-TYPE:"dl:contact"',
+    '-TYPE:"dl:eventAgenda"',
+    '-TYPE:"dl:event"',
+    '-TYPE:"dl:task"',
+    '-TYPE:"dl:simpletask"',
+    '-TYPE:"dl:meetingAgenda"',
+    '-TYPE:"dl:location"',
+    '-TYPE:"fm:topic"',
+    '-TYPE:"fm:post"',
+    '-TYPE:"ia:calendarEvent"',
+    '-TYPE:"lnk:link"'
+  ];
+
+  private containersSkipNavigation = ['adf-viewer__sidebar', 'cdk-overlay-container', 'adf-image-viewer'];
+
+  constructor(
+    private contentApi: ContentApiService,
+    private preferences: UserPreferencesService,
+    private route: ActivatedRoute,
+    private router: Router,
+    private apiService: AlfrescoApiService,
+    private uploadService: UploadService,
+    private actions$: Actions,
+    private location: Location,
+    store: Store<AppStore>,
+    extensions: AppExtensionService,
+    content: ContentManagementService,
+    private appHookService: AppHookService
+  ) {
+    super(store, extensions, content);
+  }
+
+  ngOnInit() {
+    super.ngOnInit();
+
+    from(this.infoDrawerOpened$)
+      .pipe(takeUntil(this.onDestroy$))
+      .subscribe((val) => {
+        this.showRightSide = val;
+      });
+
+    this.previewLocation = this.router.url.substr(0, this.router.url.indexOf('/', 1)).replace(/\//g, '');
+
+    const routeData = this.route.snapshot.data;
+    this.navigateBackAsClose = !!routeData.navigateBackAsClose;
+    this.simplestMode = !!routeData.simplestMode;
+
+    if (routeData.navigateMultiple) {
+      this.navigateMultiple = true;
+    }
+
+    if (routeData.navigateSource) {
+      const source = routeData.navigateSource.toLowerCase();
+      if (this.navigationSources.includes(source)) {
+        this.navigateSource = routeData.navigateSource;
+      }
+    }
+
+    this.route.params.subscribe((params) => {
+      this.folderId = params.folderId;
+      const id = params.nodeId;
+      if (id) {
+        this.displayNode(id);
+      }
+    });
+
+    this.subscriptions = this.subscriptions.concat([
+      this.appHookService.nodesDeleted.subscribe(() => this.navigateToFileLocation(true)),
+
+      this.uploadService.fileUploadDeleted.subscribe(() => this.navigateToFileLocation(true)),
+
+      this.uploadService.fileUploadComplete.pipe(debounceTime(300)).subscribe((file) => this.apiService.nodeUpdated.next(file.data.entry)),
+
+      this.actions$
+        .pipe(
+          ofType<ClosePreviewAction>(ViewerActionTypes.ClosePreview),
+          map(() => this.navigateToFileLocation(true))
+        )
+        .subscribe(() => {})
+    ]);
+
+    this.extensions
+      .getOpenWithActions()
+      .pipe(takeUntil(this.onDestroy$))
+      .subscribe((actions) => {
+        this.openWith = actions;
+      });
+  }
+
+  ngOnDestroy() {
+    super.ngOnDestroy();
+  }
+
+  /**
+   * Loads the particular node into the Viewer
+   *
+   * @param id Unique identifier for the Node to display
+   */
+  async displayNode(id: string) {
+    if (id) {
+      try {
+        this.node = await this.contentApi.getNodeInfo(id).toPromise();
+        this.store.dispatch(new SetSelectedNodesAction([{ entry: this.node }]));
+
+        if (this.node && this.node.isFile) {
+          const nearest = await this.getNearestNodes(this.node.id, this.node.parentId);
+
+          this.previousNodeId = nearest.left;
+          this.nextNodeId = nearest.right;
+          this.nodeId = this.node.id;
+          return;
+        }
+        await this.router.navigate([this.previewLocation, id]);
+      } catch (err) {
+        if (!err || err.status !== 401) {
+          await this.router.navigate([this.previewLocation, id]);
+        }
+      }
+    }
+  }
+
+  @HostListener('document:keydown', ['$event'])
+  handleKeyboardEvent(event: KeyboardEvent) {
+    const key = event.keyCode;
+    const rightArrow = 39;
+    const leftArrow = 37;
+
+    if (key === rightArrow || key === leftArrow) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+
+  /**
+   * Handles the visibility change of the Viewer component.
+   *
+   * @param isVisible Indicator whether Viewer is visible or hidden.
+   */
+  onVisibilityChanged(isVisible: boolean): void {
+    const shouldNavigate = !isVisible;
+    this.navigateToFileLocation(shouldNavigate);
+  }
+
+  navigateToFileLocation(shouldNavigate: boolean) {
+    if (shouldNavigate) {
+      if (this.navigateBackAsClose) {
+        this.location.back();
+      } else {
+        const shouldSkipNavigation = this.routesSkipNavigation.includes(this.previewLocation);
+        const route = this.getNavigationCommands(this.previewLocation);
+
+        if (!shouldSkipNavigation && this.folderId) {
+          route.push(this.folderId);
+        }
+        this.router.navigate(route);
+      }
+    }
+  }
+
+  /** Handles navigation to a previous document */
+  onNavigateBefore(event: MouseEvent | KeyboardEvent): void {
+    if (event.type !== 'click' && this.shouldNavigate(event.target as HTMLElement)) {
+      return;
+    }
+
+    if (this.previousNodeId) {
+      this.router.navigate(this.getPreviewPath(this.folderId, this.previousNodeId));
+    }
+  }
+
+  /** Handles navigation to a next document */
+  onNavigateNext(event: MouseEvent | KeyboardEvent): void {
+    if (event.type !== 'click' && this.shouldNavigate(event.target as HTMLElement)) {
+      return;
+    }
+
+    if (this.nextNodeId) {
+      this.router.navigate(this.getPreviewPath(this.folderId, this.nextNodeId));
+    }
+  }
+
+  /**
+   * Generates a node preview route based on folder and node IDs.
+   *
+   * @param folderId Folder ID
+   * @param nodeId Node ID
+   */
+  getPreviewPath(folderId: string, nodeId: string): any[] {
+    const route = [this.previewLocation];
+
+    if (folderId) {
+      route.push(folderId);
+    }
+
+    if (nodeId) {
+      route.push('preview', nodeId);
+    }
+
+    return route;
+  }
+
+  /**
+   * Retrieves nearest node information for the given node and folder.
+   *
+   * @param nodeId Unique identifier of the document node
+   * @param folderId Unique identifier of the containing folder node.
+   */
+  async getNearestNodes(nodeId: string, folderId: string): Promise<{ left: string; right: string }> {
+    const empty = {
+      left: null,
+      right: null
+    };
+
+    if (nodeId && folderId) {
+      try {
+        const ids = await this.getFileIds(this.navigateSource, folderId);
+        const idx = ids.indexOf(nodeId);
+
+        if (idx >= 0) {
+          return {
+            left: ids[idx - 1] || null,
+            right: ids[idx + 1] || null
+          };
+        } else {
+          return empty;
+        }
+      } catch {
+        return empty;
+      }
+    } else {
+      return empty;
+    }
+  }
+
+  /**
+   * Retrieves a list of node identifiers for the folder and data source.
+   *
+   * @param source Data source name. Allowed values are: personal-files, libraries, favorites, shared, recent-files.
+   * @param folderId Containing folder node identifier for 'personal-files' and 'libraries' sources.
+   */
+  async getFileIds(source: string, folderId?: string): Promise<string[]> {
+    if ((source === 'personal-files' || source === 'libraries') && folderId) {
+      const sortKey = this.preferences.get('personal-files.sorting.key') || 'modifiedAt';
+      const sortDirection = this.preferences.get('personal-files.sorting.direction') || 'desc';
+      const nodes = await this.contentApi
+        .getNodeChildren(folderId, {
+          // orderBy: `${sortKey} ${sortDirection}`,
+          fields: ['id', this.getRootField(sortKey)],
+          where: '(isFile=true)'
+        })
+        .toPromise();
+
+      const entries = nodes.list.entries.map((obj) => obj.entry);
+      this.sort(entries, sortKey, sortDirection);
+
+      return entries.map((obj) => obj.id);
+    }
+
+    if (source === 'favorites') {
+      const nodes = await this.contentApi
+        .getFavorites('-me-', {
+          where: '(EXISTS(target/file))',
+          fields: ['target']
+        })
+        .toPromise();
+
+      const sortKey = this.preferences.get('favorites.sorting.key') || 'modifiedAt';
+      const sortDirection = this.preferences.get('favorites.sorting.direction') || 'desc';
+      const files = nodes.list.entries.map((obj) => obj.entry.target.file);
+      this.sort(files, sortKey, sortDirection);
+
+      return files.map((f) => f.id);
+    }
+
+    if (source === 'shared') {
+      const sortingKey = this.preferences.get('shared.sorting.key') || 'modifiedAt';
+      const sortingDirection = this.preferences.get('shared.sorting.direction') || 'desc';
+
+      const nodes = await this.contentApi
+        .findSharedLinks({
+          fields: ['nodeId', this.getRootField(sortingKey)]
+        })
+        .toPromise();
+
+      const entries = nodes.list.entries.map((obj) => obj.entry);
+      this.sort(entries, sortingKey, sortingDirection);
+
+      return entries.map((obj) => obj.nodeId);
+    }
+
+    if (source === 'recent-files') {
+      const person = await this.contentApi.getPerson('-me-').toPromise();
+      const username = person.entry.id;
+      const sortingKey = this.preferences.get('recent-files.sorting.key') || 'modifiedAt';
+      const sortingDirection = this.preferences.get('recent-files.sorting.direction') || 'desc';
+
+      const query: SearchRequest = {
+        query: {
+          query: '*',
+          language: 'afts'
+        },
+        filterQueries: [
+          { query: `cm:modified:[NOW/DAY-30DAYS TO NOW/DAY+1DAY]` },
+          { query: `cm:modifier:${username} OR cm:creator:${username}` },
+          {
+            query: this.recentFileFilters.join(' AND ')
+          }
+        ],
+        fields: ['id', this.getRootField(sortingKey)],
+        include: ['path', 'properties', 'allowableOperations'],
+        sort: [
+          {
+            type: 'FIELD',
+            field: 'cm:modified',
+            ascending: false
+          }
+        ]
+      };
+      const nodes = await this.contentApi.search(query).toPromise();
+
+      const entries = nodes.list.entries.map((obj) => obj.entry);
+      this.sort(entries, sortingKey, sortingDirection);
+
+      return entries.map((obj) => obj.id);
+    }
+
+    return [];
+  }
+
+  private sort(items: any[], key: string, direction: string) {
+    const options: Intl.CollatorOptions = {};
+
+    if (key.includes('sizeInBytes') || key === 'name') {
+      options.numeric = true;
+    }
+
+    items.sort((a: any, b: any) => {
+      let left = ObjectUtils.getValue(a, key);
+      if (left) {
+        left = left instanceof Date ? left.valueOf().toString() : left.toString();
+      } else {
+        left = '';
+      }
+
+      let right = ObjectUtils.getValue(b, key);
+      if (right) {
+        right = right instanceof Date ? right.valueOf().toString() : right.toString();
+      } else {
+        right = '';
+      }
+
+      return direction === 'asc' ? left.localeCompare(right, undefined, options) : right.localeCompare(left, undefined, options);
+    });
+  }
+
+  /**
+   * Get the root field name from the property path.
+   * Example: 'property1.some.child.property' => 'property1'
+   *
+   * @param path Property path
+   */
+  getRootField(path: string) {
+    if (path) {
+      return path.split('.')[0];
+    }
+    return path;
+  }
+
+  private getNavigationCommands(url: string): any[] {
+    const urlTree: UrlTree = this.router.parseUrl(url);
+    const urlSegmentGroup: UrlSegmentGroup = urlTree.root.children[PRIMARY_OUTLET];
+
+    if (!urlSegmentGroup) {
+      return [url];
+    }
+
+    const urlSegments: UrlSegment[] = urlSegmentGroup.segments;
+
+    return urlSegments.reduce(function (acc, item) {
+      acc.push(item.path, item.parameters);
+      return acc;
+    }, []);
+  }
+
+  private shouldNavigate(element: HTMLElement): boolean {
+    let currentElement = element.parentElement;
+
+    while (currentElement && !this.isChild(currentElement.classList)) {
+      currentElement = currentElement.parentElement;
+    }
+
+    return !!currentElement;
+  }
+
+  private isChild(list: DOMTokenList): boolean {
+    return Array.from(list).some((className: string) => this.containersSkipNavigation.includes(className));
+  }
+}

projects/aca-content/src/lib/components/preview/preview.module.ts

@@ -0,0 +1,62 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { CoreModule } from '@alfresco/adf-core';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { ContentDirectiveModule } from '@alfresco/adf-content-services';
+import { CoreExtensionsModule } from '../../extensions/core.extensions.module';
+import { DirectivesModule } from '../../directives/directives.module';
+import { AppInfoDrawerModule } from '../info-drawer/info.drawer.module';
+import { PreviewComponent } from './preview.component';
+import { AppToolbarModule } from '../toolbar/toolbar.module';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: PreviewComponent,
+    data: {
+      title: 'APP.PREVIEW.TITLE',
+      navigateMultiple: true
+    }
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    RouterModule.forChild(routes),
+    CoreModule.forChild(),
+    ContentDirectiveModule,
+    DirectivesModule,
+    AppInfoDrawerModule,
+    CoreExtensionsModule.forChild(),
+    AppToolbarModule
+  ],
+  declarations: [PreviewComponent],
+  exports: [PreviewComponent]
+})
+export class PreviewModule {}

projects/aca-content/src/lib/components/recent-files/recent-files.component.html

@@ -0,0 +1,72 @@
+<aca-page-layout>
+  <aca-page-layout-header>
+    <adf-breadcrumb root="APP.BROWSE.RECENT.TITLE"> </adf-breadcrumb>
+
+    <adf-toolbar class="adf-toolbar--inline">
+      <ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
+        <aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
+      </ng-container>
+    </adf-toolbar>
+  </aca-page-layout-header>
+
+  <aca-page-layout-content>
+    <div class="main-content">
+      <adf-document-list
+        #documentList
+        acaDocumentList
+        acaContextActions
+        [display]="documentDisplayMode$ | async"
+        currentFolderId="-recent-"
+        selectionMode="multiple"
+        [navigate]="false"
+        [sorting]="['modifiedAt', 'desc']"
+        sortingMode="client"
+        [imageResolver]="imageResolver"
+        (node-dblclick)="handleNodeClick($event)"
+        (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">
+          </adf-empty-content>
+        </adf-custom-empty-content-template>
+
+        <data-columns>
+          <ng-container *ngFor="let column of columns; trackBy: trackByColumnId">
+            <ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
+              <data-column
+                [key]="column.key"
+                [title]="column.title"
+                [type]="column.type"
+                [format]="column.format"
+                [class]="column.class"
+                [sortable]="column.sortable"
+              >
+                <ng-template let-context>
+                  <adf-dynamic-column [id]="column.template" [context]="context"> </adf-dynamic-column>
+                </ng-template>
+              </data-column>
+            </ng-container>
+
+            <ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
+              <data-column
+                [key]="column.key"
+                [title]="column.title"
+                [type]="column.type"
+                [format]="column.format"
+                [class]="column.class"
+                [sortable]="column.sortable"
+              >
+              </data-column>
+            </ng-container>
+          </ng-container>
+        </data-columns>
+      </adf-document-list>
+
+      <adf-pagination acaPagination [target]="documentList"> </adf-pagination>
+    </div>
+
+    <div class="sidebar" *ngIf="infoDrawerOpened$ | async">
+      <aca-info-drawer [node]="selection.last"></aca-info-drawer>
+    </div>
+  </aca-page-layout-content>
+</aca-page-layout>

projects/aca-content/src/lib/components/recent-files/recent-files.component.spec.ts

@@ -0,0 +1,112 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { DataTableComponent, AppConfigModule } from '@alfresco/adf-core';
+import { CustomResourcesService, DocumentListComponent, NodeFavoriteDirective } from '@alfresco/adf-content-services';
+import { RecentFilesComponent } from './recent-files.component';
+import { AppTestingModule } from '../../testing/app-testing.module';
+import { Router } from '@angular/router';
+import { NodePaging, SearchApi } from '@alfresco/js-api';
+import { of } from 'rxjs';
+
+describe('RecentFilesComponent', () => {
+  let fixture: ComponentFixture<RecentFilesComponent>;
+  let component: RecentFilesComponent;
+
+  beforeEach(async () => {
+    const searchApi = jasmine.createSpyObj('SearchApi', ['search']);
+
+    const testBed = TestBed.configureTestingModule({
+      imports: [AppTestingModule, AppConfigModule],
+      declarations: [DataTableComponent, NodeFavoriteDirective, DocumentListComponent, RecentFilesComponent],
+      providers: [
+        { provide: SearchApi, useValue: searchApi },
+        {
+          provide: Router,
+          useValue: {
+            url: 'recent-files'
+          }
+        }
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    });
+
+    await testBed.compileComponents();
+
+    const customResourcesService = TestBed.inject(CustomResourcesService);
+
+    const page: NodePaging = {
+      list: {
+        entries: [
+          {
+            entry: {
+              id: '1',
+              name: 'node1',
+              nodeType: 'cm:file',
+              isFile: true,
+              isFolder: false,
+              createdAt: null,
+              modifiedAt: null,
+              modifiedByUser: null,
+              createdByUser: null
+            }
+          },
+          {
+            entry: {
+              id: '2',
+              name: 'node2',
+              nodeType: 'cm:file',
+              isFile: true,
+              isFolder: false,
+              createdAt: null,
+              modifiedAt: null,
+              modifiedByUser: null,
+              createdByUser: null
+            }
+          }
+        ],
+        pagination: { count: 2, totalItems: 2 }
+      }
+    };
+
+    spyOn(customResourcesService, 'getRecentFiles').and.returnValue(of(page));
+
+    fixture = TestBed.createComponent(RecentFilesComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should call showPreview method', () => {
+    const node: any = { entry: {} };
+    spyOn(component, 'showPreview');
+    fixture.detectChanges();
+
+    component.onNodeDoubleClick(node);
+    expect(component.showPreview).toHaveBeenCalledWith(node, {
+      location: 'recent-files'
+    });
+  });
+});

projects/aca-content/src/lib/components/recent-files/recent-files.component.ts

@@ -0,0 +1,86 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Component, OnInit } from '@angular/core';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { MinimalNodeEntity } from '@alfresco/js-api';
+import { ContentManagementService } from '../../services/content-management.service';
+import { PageComponent } from '../page.component';
+import { Store } from '@ngrx/store';
+import { AppStore } from '@alfresco/aca-shared/store';
+import { UploadService } from '@alfresco/adf-core';
+import { debounceTime } from 'rxjs/operators';
+import { Router } from '@angular/router';
+import { AppExtensionService } from '@alfresco/aca-shared';
+import { DocumentListPresetRef } from '@alfresco/adf-extensions';
+
+@Component({
+  templateUrl: './recent-files.component.html'
+})
+export class RecentFilesComponent extends PageComponent implements OnInit {
+  isSmallScreen = false;
+
+  columns: DocumentListPresetRef[] = [];
+
+  constructor(
+    store: Store<AppStore>,
+    extensions: AppExtensionService,
+    content: ContentManagementService,
+    private uploadService: UploadService,
+    private breakpointObserver: BreakpointObserver,
+    private router: Router
+  ) {
+    super(store, extensions, content);
+  }
+
+  ngOnInit() {
+    super.ngOnInit();
+
+    this.subscriptions = this.subscriptions.concat([
+      this.uploadService.fileUploadComplete.pipe(debounceTime(300)).subscribe(() => this.onFileUploadedEvent()),
+      this.uploadService.fileUploadDeleted.pipe(debounceTime(300)).subscribe(() => this.onFileUploadedEvent()),
+
+      this.breakpointObserver.observe([Breakpoints.HandsetPortrait, Breakpoints.HandsetLandscape]).subscribe((result) => {
+        this.isSmallScreen = result.matches;
+      })
+    ]);
+
+    this.columns = this.extensions.documentListPresets.recent || [];
+  }
+
+  onNodeDoubleClick(node: MinimalNodeEntity) {
+    if (node && node.entry) {
+      this.showPreview(node, { location: this.router.url });
+    }
+  }
+
+  handleNodeClick(event: Event) {
+    this.onNodeDoubleClick((event as CustomEvent).detail?.node);
+  }
+
+  private onFileUploadedEvent() {
+    this.reload();
+  }
+}

projects/aca-content/src/lib/components/search/search-action-menu/search-action-menu.component.html

@@ -0,0 +1,32 @@
+<button mat-icon-button [matMenuTriggerFor]="dataSorting" id="aca-button-action-menu" aria-label="Search action menu">
+  <mat-icon>more_vert</mat-icon>
+</button>
+
+<mat-menu #dataSorting="matMenu">
+  <button mat-menu-item [matMenuTriggerFor]="sorting" id="aca-button-sorting-menu">{{ 'SEARCH.SORT.SORTING_OPTION' | translate }}</button>
+</mat-menu>
+
+<mat-menu #sorting="matMenu">
+  <ng-template matMenuContent>
+    <button
+      mat-menu-item
+      *ngFor="let option of options"
+      [id]="option.key + '-sorting-option'"
+      [matMenuTriggerFor]="direction"
+      [matMenuTriggerData]="{ option: option }"
+    >
+      {{ option.label | translate }}
+    </button>
+  </ng-template>
+</mat-menu>
+
+<mat-menu #direction="matMenu">
+  <ng-template matMenuContent let-option="option">
+    <button mat-menu-item [id]="option.key + '-sorting-option-asc'" (click)="onAscSortingClicked(option)">
+      {{ 'SEARCH.SORT.ASCENDING' | translate }}
+    </button>
+    <button mat-menu-item [id]="option.key + '-sorting-option-desc'" (click)="onDescSortingClicked(option)">
+      {{ 'SEARCH.SORT.DESCENDING' | translate }}
+    </button>
+  </ng-template>
+</mat-menu>

projects/aca-content/src/lib/components/search/search-action-menu/search-action-menu.component.spec.ts

@@ -0,0 +1,137 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { SearchQueryBuilderService } from '@alfresco/adf-content-services';
+import { SearchSortingDefinition } from '@alfresco/adf-content-services/lib/search/models/search-sorting-definition.interface';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AppTestingModule } from '../../../testing/app-testing.module';
+import { SearchActionMenuComponent } from './search-action-menu.component';
+
+const mockSortingData: SearchSortingDefinition[] = [
+  {
+    ascending: false,
+    field: 'fieldA',
+    key: 'keyA',
+    label: 'LabelA',
+    type: 'A'
+  },
+  {
+    ascending: true,
+    field: 'fieldB',
+    key: 'keyB',
+    label: 'Zorro',
+    type: 'Z'
+  }
+];
+
+describe('SearchActionMenuComponent', () => {
+  let fixture: ComponentFixture<SearchActionMenuComponent>;
+  let component: SearchActionMenuComponent;
+  let queryService: SearchQueryBuilderService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [AppTestingModule],
+      declarations: [SearchActionMenuComponent],
+      providers: [SearchQueryBuilderService]
+    });
+
+    fixture = TestBed.createComponent(SearchActionMenuComponent);
+    queryService = TestBed.inject(SearchQueryBuilderService);
+    component = fixture.componentInstance;
+  });
+
+  it('should emit sortingSelected event when asc sorting option is selected', async () => {
+    spyOn(queryService, 'getSortingOptions').and.returnValue(mockSortingData);
+    const expectedOption: SearchSortingDefinition = {
+      ascending: true,
+      field: 'fieldA',
+      key: 'keyA',
+      label: 'LabelA',
+      type: 'A'
+    };
+    spyOn(component.sortingSelected, 'emit').and.callThrough();
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    const actionMenuButton: HTMLButtonElement = fixture.nativeElement.querySelector('#aca-button-action-menu');
+    actionMenuButton.dispatchEvent(new Event('click'));
+    await fixture.whenStable();
+    fixture.detectChanges();
+
+    const sortingMenuButton: HTMLButtonElement | null = document.querySelector('#aca-button-sorting-menu');
+    sortingMenuButton?.dispatchEvent(new Event('click'));
+    await fixture.whenStable();
+    fixture.detectChanges();
+
+    const fieldAMenuButton: HTMLButtonElement | null = document.querySelector('#keyA-sorting-option');
+    fieldAMenuButton?.dispatchEvent(new Event('click'));
+    await fixture.whenStable();
+    fixture.detectChanges();
+
+    const directionButton: HTMLButtonElement | null = document.querySelector('#keyA-sorting-option-asc');
+    directionButton?.dispatchEvent(new Event('click'));
+    await fixture.whenStable();
+    fixture.detectChanges();
+
+    expect(component.sortingSelected.emit).toHaveBeenCalledWith(expectedOption);
+  });
+
+  it('should emit sortingSelected event when desc sorting option is selected', async () => {
+    spyOn(queryService, 'getSortingOptions').and.returnValue(mockSortingData);
+    const expectedOption: SearchSortingDefinition = {
+      ascending: false,
+      field: 'fieldB',
+      key: 'keyB',
+      label: 'Zorro',
+      type: 'Z'
+    };
+    spyOn(component.sortingSelected, 'emit').and.callThrough();
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    const actionMenuButton: HTMLButtonElement = fixture.nativeElement.querySelector('#aca-button-action-menu');
+    actionMenuButton.dispatchEvent(new Event('click'));
+    await fixture.whenStable();
+    fixture.detectChanges();
+
+    const sortingMenuButton: HTMLButtonElement | null = document.querySelector('#aca-button-sorting-menu');
+    sortingMenuButton?.dispatchEvent(new Event('click'));
+    await fixture.whenStable();
+    fixture.detectChanges();
+
+    const fieldAMenuButton: HTMLButtonElement | null = document.querySelector('#keyB-sorting-option');
+    fieldAMenuButton?.dispatchEvent(new Event('click'));
+    await fixture.whenStable();
+    fixture.detectChanges();
+
+    const directionButton: HTMLButtonElement | null = document.querySelector('#keyB-sorting-option-desc');
+    directionButton?.dispatchEvent(new Event('click'));
+    await fixture.whenStable();
+    fixture.detectChanges();
+
+    expect(component.sortingSelected.emit).toHaveBeenCalledWith(expectedOption);
+  });
+});