cleanup dead code

2026-09-16 18:13:06 +00:00 · 2024-07-11 14:20:42 -04:00
1124 changed files with 47927 additions and 33042 deletions
@@ -1,6 +1,5 @@
 module.exports = {
    root: true,
-
    ignorePatterns: [
        'projects/**/*',
        '**/node_modules/**/*',
@@ -11,9 +10,7 @@ module.exports = {
        '**/scripts',
        '**/docs'
    ],
-
    plugins: ['@nrwl/nx'],
-
    overrides: [
        {
            files: ['*.ts'],
@@ -199,7 +196,5 @@ module.exports = {
            extends: ['plugin:@angular-eslint/template/process-inline-templates'],
            excludedFiles: ['*.spec.ts']
        }
-    ],
-
-    extends: ['plugin:storybook/recommended']
+    ]
 };
@@ -1,3 +0,0 @@
-{
-  "extends": ["./.eslintrc.js"]
-}
@@ -22,7 +22,7 @@ runs:
    - run: echo "Artifact Append"
      shell: bash
    - name: Download artifact
-      uses: actions/upload-artifact@834a144ee995460fba8ed112a2fc961b36a5ec5a # v4.3.6
+      uses: actions/upload-artifact@0b2256b8c012f0828dc542b3febcab082c67f72b # v4.3.4
      with:
        name: ${{ inputs.artifact-name }}
        pattern: ${{ inputs.artifact-name }}-*
@@ -85,7 +85,7 @@ runs:
            }
          }
    - name: Upload artifact
-      uses: actions/upload-artifact@834a144ee995460fba8ed112a2fc961b36a5ec5a # v4.3.6
+      uses: actions/upload-artifact@0b2256b8c012f0828dc542b3febcab082c67f72b # v4.3.4
      with:
        name: ${{ inputs.artifact-name }}
        path: ${{ inputs.file-name }}
@@ -28,7 +28,7 @@ runs:
    - run: echo "Artifact Extract"
      shell: bash
    - name: Download artifact
-      uses: actions/upload-artifact@834a144ee995460fba8ed112a2fc961b36a5ec5a # v4.3.6
+      uses: actions/upload-artifact@0b2256b8c012f0828dc542b3febcab082c67f72b # v4.3.4
      with:
        name: ${{ inputs.artifact-name }}
        pattern: ${{ inputs.artifact-name }}-*
@@ -26,7 +26,7 @@ runs:
        echo "${{inputs.content}}" > ${{ inputs.file-name }}

    - name: Upload artifact
-      uses: actions/upload-artifact@834a144ee995460fba8ed112a2fc961b36a5ec5a # v4.3.6
+      uses: actions/upload-artifact@0b2256b8c012f0828dc542b3febcab082c67f72b # v4.3.4
      with:
        name: ${{ inputs.artifact-name }}
        path: ${{ inputs.file-name }}
@@ -188,7 +188,7 @@ runs:
    - name: upload artifacts on gh
      id: upload_gh
      if: ${{ steps.determine-affected.outputs.isAffected == 'true' }}
-      uses: actions/upload-artifact@834a144ee995460fba8ed112a2fc961b36a5ec5a # v4.3.6
+      uses: actions/upload-artifact@0b2256b8c012f0828dc542b3febcab082c67f72b # v4.3.4
      with:
        name: e2e-artifact-output-${{inputs.e2e-artifact-id}}
        path: /home/runner/work/alfresco-ng2-components/alfresco-ng2-components/e2e-output-*
@@ -20,13 +20,13 @@ runs:
  using: "composite"
  steps:
      - name: install NPM
-        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
+        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
        with:
          node-version-file: '.nvmrc'
          cache-dependency-path: package-lock.json
      - name: get latest tag sha
        id: tag-sha
-        uses: Alfresco/alfresco-build-tools/.github/actions/git-latest-tag@9d00215f539f669b41c7fabf7b88ccc8f316926c # v6.0.1
+        uses: Alfresco/alfresco-build-tools/.github/actions/git-latest-tag@a288b9efdaa50413573b2e130896d906478b8e50 # v5.31.0
 # CACHE
      - name: Node Modules cache
        id: node-modules-cache
@@ -30,7 +30,7 @@ jobs:

    # Initializes the CodeQL tools for scanning.
    - name: Initialize CodeQL
-      uses: github/codeql-action/init@eb055d739abdc2e8de2e5f4ba1a8b246daa779aa # v3.26.0
+      uses: github/codeql-action/init@b611370bb5703a7efb587f9d136a52ea24c5c38c # v3.25.11
      # Override language selection by uncommenting this and choosing your languages
      with:
        languages: javascript
@@ -39,7 +39,7 @@ jobs:
    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
    # If this step fails, then you should remove it and run the build manually (see below)
    - name: Autobuild
-      uses: github/codeql-action/autobuild@eb055d739abdc2e8de2e5f4ba1a8b246daa779aa # v3.26.0
+      uses: github/codeql-action/autobuild@b611370bb5703a7efb587f9d136a52ea24c5c38c # v3.25.11

    # ℹ️ Command-line programs to run using the OS shell.
    # 📚 https://git.io/JvXDl
@@ -53,4 +53,4 @@ jobs:
    #   make release

    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@eb055d739abdc2e8de2e5f4ba1a8b246daa779aa # v3.26.0
+      uses: github/codeql-action/analyze@b611370bb5703a7efb587f9d136a52ea24c5c38c # v3.25.11
@@ -101,7 +101,7 @@ jobs:
        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7

      - name: Ensure SHA pinned actions
-        uses: zgosalvez/github-actions-ensure-sha-pinned-actions@3c16e895bb662b4d7e284f032cbe8835a57773cc # v3.0.11
+        uses: zgosalvez/github-actions-ensure-sha-pinned-actions@b88cd0aad2c36a63e42c71f81cb1958fed95ac87 # v3.0.10

      - name: Check package-lock.json version
        run: |
@@ -121,10 +121,10 @@ jobs:
         fetch-depth: 0

      - name: Get branch name
-        uses: Alfresco/alfresco-build-tools/.github/actions/get-branch-name@9d00215f539f669b41c7fabf7b88ccc8f316926c # v6.0.1
+        uses: Alfresco/alfresco-build-tools/.github/actions/get-branch-name@a288b9efdaa50413573b2e130896d906478b8e50 # v5.31.0

      - name: Save commit message
-        uses: Alfresco/alfresco-build-tools/.github/actions/get-commit-message@9d00215f539f669b41c7fabf7b88ccc8f316926c # v6.0.1
+        uses: Alfresco/alfresco-build-tools/.github/actions/get-commit-message@a288b9efdaa50413573b2e130896d906478b8e50 # v5.31.0

      - name: ci:force flag parser
        shell: bash
@@ -251,4 +251,4 @@ jobs:
            SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}
          with:
            channel-id: 'C016SMNNL8L' #eng-guild-front-end
-            slack-message: "🔴 Warning: The release workflow of alfresco-ng2-components pipe failed\n Author username: ${{ github.event.pull_request.user.login }}\n Workflow run <https://github.com/Alfresco/alfresco-ng2-components/actions/runs/${{ github.run_id }}| here>\n>"
+            slack-message: "🔴 Warning: The release workflow of alfresco-ng2-components pipe failed\n Author: name:${{ github.event.pusher.name }} username:${{ github.event.pusher.username }}\n Workflow run : <https://github.com/Alfresco/alfresco-ng2-components/actions/runs/${{ github.run_id }}| here>\n>"
@@ -35,4 +35,3 @@ licenses.txt
 .DS_Store
 .angular
 NX
-.nx
@@ -1,4 +1,4 @@
 {
  "*.{ts,js}": ["prettier --write", "eslint"],
-  "*.{css,scss}": ["prettier --write", "stylelint --fix"]
+  "*.{css,scss}": ["prettier --write", "stylelint"]
 }
@@ -1 +1 @@
-18.20.3
+18.18.2
@@ -1,10 +1,7 @@
 module.exports = {
-    framework: {
-        name: '@storybook/angular',
-        options: {}
-    },
-    staticDirs: [{ from: '../../../demo-shell/src/app.config.json', to: 'app.config.json' }],
-    docs: {},
    stories: [],
-    addons: []
+    addons: ['@storybook/addon-essentials'],
+    framework: '@storybook/angular',
+    staticDirs: [ { from: '../../../demo-shell/src/app.config.json', to: 'app.config.json' } ],
+    core: { builder: 'webpack5' }
 };
@@ -2,4 +2,3 @@ export const parameters = {
    docs: { inlineStories: true },
    controls: { expanded: true }
 };
-export const tags = ['autodocs'];
@@ -31,6 +31,5 @@
    "postcss",
    "scss"
  ],
-  "editor.guides.indentation": true,
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "editor.guides.indentation": true
 }
@@ -1,7 +1,7 @@
 {
  "name": "Alfresco-ADF-Angular-Demo",
  "description": "Demo shell for Alfresco Angular components",
-  "version": "7.0.0-alpha.2",
+  "version": "6.9.0",
  "author": "Hyland Software, Inc. and its affiliates",
  "repository": {
    "type": "git",
@@ -1,201 +0,0 @@
-{
-  "name": "demoshell",
-  "$schema": "../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "demo-shell/src",
-  "projectType": "application",
-  "targets": {
-    "build": {
-      "executor": "@angular-devkit/build-angular:browser",
-      "options": {
-        "allowedCommonJsDependencies": [
-          "minimatch",
-          "minimatch-browser",
-          "superagent",
-          "event-emitter",
-          "brace-expansion",
-          "zen-observable",
-          "subscriptions-transport-ws",
-          "d",
-          "chart.js",
-          "cropperjs"
-        ],
-        "outputPath": "dist/demo-shell",
-        "index": "demo-shell/src/index.html",
-        "main": "demo-shell/src/main.ts",
-        "tsConfig": "tsconfig.dev.json",
-        "polyfills": "demo-shell/src/polyfills.ts",
-        "stylePreprocessorOptions": {
-          "includePaths": ["lib", "lib/core/src/lib"]
-        },
-        "assets": [
-          "demo-shell/src/assets",
-          "demo-shell/src/favicon-96x96.png",
-          "demo-shell/src/app.config.json",
-          {
-            "glob": "**/*",
-            "input": "demo-shell/src/assets",
-            "output": "/assets"
-          },
-          {
-            "glob": "app.config.json",
-            "input": "demo-shell/src",
-            "output": "/"
-          },
-          {
-            "glob": "**/*",
-            "input": "demo-shell/resources",
-            "output": "/resources"
-          },
-          {
-            "glob": "**/*",
-            "input": "lib/core/src/lib/assets",
-            "output": "/assets"
-          },
-          {
-            "glob": "**/*",
-            "input": "lib/process-services/src/lib/assets",
-            "output": "/assets"
-          },
-          {
-            "glob": "**/*",
-            "input": "lib/process-services-cloud/src/lib/assets",
-            "output": "/assets"
-          },
-          {
-            "glob": "**/*",
-            "input": "lib/content-services/src/lib/assets",
-            "output": "/assets"
-          },
-          {
-            "glob": "**/*",
-            "input": "lib/core/src/lib/i18n",
-            "output": "/assets/adf-core/i18n"
-          },
-          {
-            "glob": "**/*",
-            "input": "lib/content-services/src/lib/i18n",
-            "output": "/assets/adf-content-services/i18n"
-          },
-          {
-            "glob": "**/*",
-            "input": "lib/process-services/src/lib/i18n",
-            "output": "/assets/adf-process-services/i18n"
-          },
-          {
-            "glob": "**/*",
-            "input": "lib/process-services-cloud/src/lib/i18n",
-            "output": "/assets/adf-process-services-cloud/i18n"
-          },
-          {
-            "glob": "**/*",
-            "input": "lib/insights/src/lib/i18n",
-            "output": "/assets/adf-insights/i18n"
-          },
-          {
-            "glob": "pdf.worker.min.js",
-            "input": "node_modules/pdfjs-dist/build",
-            "output": "/"
-          },
-          {
-            "glob": "**/*",
-            "input": "node_modules/monaco-editor",
-            "output": "/assets/monaco/"
-          }
-        ],
-        "styles": [
-          "demo-shell/src/styles.scss",
-          "demo-shell/src/custom-style-dev.scss",
-          "node_modules/cropperjs/dist/cropper.min.css",
-          "node_modules/pdfjs-dist/web/pdf_viewer.css"
-        ],
-        "scripts": ["node_modules/pdfjs-dist/build/pdf.js", "node_modules/pdfjs-dist/web/pdf_viewer.js", "node_modules/raphael/raphael.min.js"],
-        "vendorChunk": true,
-        "extractLicenses": false,
-        "buildOptimizer": false,
-        "sourceMap": true,
-        "optimization": false,
-        "namedChunks": true
-      },
-      "configurations": {
-        "production": {
-          "budgets": [
-            {
-              "type": "anyComponentStyle",
-              "maximumWarning": "12kb"
-            }
-          ],
-          "optimization": true,
-          "outputHashing": "all",
-          "sourceMap": false,
-          "namedChunks": false,
-          "extractLicenses": true,
-          "buildOptimizer": true,
-          "verbose": false,
-          "fileReplacements": [
-            {
-              "replace": "demo-shell/src/environments/environment.ts",
-              "with": "demo-shell/src/environments/environment.prod.ts"
-            }
-          ]
-        },
-        "canary": {
-          "fileReplacements": [
-            {
-              "replace": "demo-shell/src/environments/environment.ts",
-              "with": "demo-shell/src/environments/environment.canary.ts"
-            }
-          ]
-        },
-        "e2e": {
-          "budgets": [
-            {
-              "type": "anyComponentStyle",
-              "maximumWarning": "6kb"
-            }
-          ],
-          "optimization": true,
-          "outputHashing": "all",
-          "sourceMap": false,
-          "namedChunks": false,
-          "extractLicenses": true,
-          "buildOptimizer": true,
-          "verbose": false,
-          "fileReplacements": [
-            {
-              "replace": "demo-shell/src/environments/environment.ts",
-              "with": "demo-shell/src/environments/environment.e2e.ts"
-            }
-          ]
-        }
-      },
-      "defaultConfiguration": ""
-    },
-    "serve": {
-      "executor": "@angular-devkit/build-angular:dev-server",
-      "options": {
-        "browserTarget": "demoshell:build",
-        "host": "0.0.0.0",
-        "port": 3000,
-        "proxyConfig": "demo-shell/proxy.conf.js",
-        "disableHostCheck": true
-      },
-      "configurations": {
-        "production": {
-          "browserTarget": "demoshell:build:production"
-        },
-        "canary": {
-          "browserTarget": "demoshell:build:canary"
-        },
-        "e2e": {
-          "browserTarget": "demoshell:build:e2e"
-        }
-      }
-    },
-    "lint": {
-      "executor": "@nrwl/linter:eslint",
-      "options": {
-        "lintFilePatterns": ["demo-shell/**/*.ts", "demo-shell/**/*.html"]
-      }
-    }
-  }
-}
@@ -622,7 +622,7 @@
            "unit": "Byte",
            "field": "cm:content.size",
            "min": 0,
-            "max": 4000,
+            "max": 18,
            "step": 1,
            "thumbLabel": true
          }
@@ -17,6 +17,7 @@

 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NgChartsModule } from 'ng2-charts';
 import { HttpClientModule } from '@angular/common/http';
 import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -24,36 +25,114 @@ import { TranslateModule } from '@ngx-translate/core';
 import { AppConfigService, DebugAppConfigService, CoreModule, AuthModule, provideTranslations } from '@alfresco/adf-core';
 import { ExtensionsModule } from '@alfresco/adf-extensions';
 import { AppComponent } from './app.component';
+import { MaterialModule } from './material.module';
+import { LogoutComponent } from './components/logout/logout.component';
+import { AppLayoutComponent } from './components/app-layout/app-layout.component';
+import { SearchBarComponent } from './components/search/search-bar.component';
+import { SearchResultComponent } from './components/search/search-result.component';
+import { FormComponent } from './components/form/form.component';
+import { ProcessServiceComponent } from './components/process-service/process-service.component';
+import { ShowDiagramComponent } from './components/process-service/show-diagram.component';
+import { FormViewerComponent } from './components/process-service/form-viewer.component';
+import { FormNodeViewerComponent } from './components/process-service/form-node-viewer.component';
+import { AppsViewComponent } from './components/process-service/apps-view.component';
+import { FilesComponent } from './components/files/files.component';
+import { VersionManagerDialogAdapterComponent } from './components/files/version-manager-dialog-adapter.component';
 import { appRoutes } from './app.routes';
+import { TaskAttachmentsComponent } from './components/process-service/task-attachments.component';
+import { ProcessAttachmentsComponent } from './components/process-service/process-attachments.component';
+import { DemoPermissionComponent } from './components/permissions/demo-permissions.component';
 import { MonacoEditorModule } from 'ngx-monaco-editor-v2';
 import { ContentModule } from '@alfresco/adf-content-services';
+import { InsightsModule } from '@alfresco/adf-insights';
 import { ProcessModule } from '@alfresco/adf-process-services';
+import { CloudLayoutComponent } from './components/cloud/cloud-layout.component';
+import { AppsCloudDemoComponent } from './components/cloud/apps-cloud-demo.component';
+import { TasksCloudDemoComponent } from './components/cloud/tasks-cloud-demo.component';
+import { ProcessesCloudDemoComponent } from './components/cloud/processes-cloud-demo.component';
+import { TaskDetailsCloudDemoComponent } from './components/cloud/task-details-cloud-demo.component';
+import { CloudViewerComponent } from './components/cloud/cloud-viewer.component';
+import { ProcessDetailsCloudDemoComponent } from './components/cloud/process-details-cloud-demo.component';
+import { StartTaskCloudDemoComponent } from './components/cloud/start-task-cloud-demo.component';
+import { StartProcessCloudDemoComponent } from './components/cloud/start-process-cloud-demo.component';
+import { CloudFiltersDemoComponent } from './components/cloud/cloud-filters-demo.component';
+import { FormCloudDemoComponent } from './components/app-layout/cloud/form-demo/cloud-form-demo.component';
 import { environment } from '../environments/environment';
+import { AppCloudSharedModule } from './components/cloud/shared/cloud.shared.module';
+import { DemoErrorComponent } from './components/error/demo-error.component';
 import { ProcessServicesCloudModule } from '@alfresco/adf-process-services-cloud';
 import { RouterModule } from '@angular/router';
+import { ProcessCloudLayoutComponent } from './components/cloud/process-cloud-layout.component';
+import { CustomEditorComponent, CustomWidgetComponent } from './components/cloud/custom-form-components/custom-editor.component';
+import { SearchFilterChipsComponent } from './components/search/search-filter-chips.component';
+import { UserInfoComponent } from './components/app-layout/user-info/user-info.component';
+import { FolderDirectiveModule } from './folder-directive';
+import { ContentUserInfoModule } from './components/app-layout/user-info/content-user-info';
+import { PROCESS_USER_INFO_DIRECTIVES } from './components/app-layout/user-info/process-user-info';
 import { CoreAutomationService } from '../testing/automation.service';

@NgModule({
    imports: [
        BrowserModule,
        environment.e2e ? NoopAnimationsModule : BrowserAnimationsModule,
-        RouterModule.forRoot(appRoutes, { useHash: true }),
+        ReactiveFormsModule,
+        RouterModule.forRoot(appRoutes, { useHash: true, relativeLinkResolution: 'legacy' }),
        AuthModule.forRoot({ useHash: true }),
+        FormsModule,
        HttpClientModule,
+        MaterialModule,
        TranslateModule.forRoot(),
        CoreModule.forRoot(),
        ContentModule.forRoot(),
+        InsightsModule.forRoot(),
        ProcessModule.forRoot(),
        ProcessServicesCloudModule.forRoot(),
        ExtensionsModule.forRoot(),
        NgChartsModule,
-        MonacoEditorModule.forRoot()
+        AppCloudSharedModule,
+        MonacoEditorModule.forRoot(),
+        FolderDirectiveModule,
+        ShowDiagramComponent,
+        ContentUserInfoModule,
+        ...PROCESS_USER_INFO_DIRECTIVES
+    ],
+    declarations: [
+        AppComponent,
+        LogoutComponent,
+        AppLayoutComponent,
+        UserInfoComponent,
+        SearchBarComponent,
+        SearchResultComponent,
+        ProcessServiceComponent,
+        FormViewerComponent,
+        FormNodeViewerComponent,
+        AppsViewComponent,
+        FilesComponent,
+        FormComponent,
+        VersionManagerDialogAdapterComponent,
+        TaskAttachmentsComponent,
+        ProcessAttachmentsComponent,
+        DemoPermissionComponent,
+        DemoErrorComponent,
+        CloudLayoutComponent,
+        AppsCloudDemoComponent,
+        TasksCloudDemoComponent,
+        ProcessesCloudDemoComponent,
+        TaskDetailsCloudDemoComponent,
+        CloudViewerComponent,
+        ProcessDetailsCloudDemoComponent,
+        StartTaskCloudDemoComponent,
+        StartProcessCloudDemoComponent,
+        CloudFiltersDemoComponent,
+        FormCloudDemoComponent,
+        CustomEditorComponent,
+        CustomWidgetComponent,
+        ProcessCloudLayoutComponent,
+        SearchFilterChipsComponent
    ],
-    declarations: [AppComponent],
    providers: [
        { provide: AppConfigService, useClass: DebugAppConfigService }, // not use this service in production
-        provideTranslations('app', 'resources'),
-        provideTranslations('adf-insights', 'assets/adf-insights')
+        provideTranslations('app', 'resources')
    ],
    bootstrap: [AppComponent]
 })
@@ -27,7 +27,7 @@ import { FormNodeViewerComponent } from './components/process-service/form-node-
 import { AppsViewComponent } from './components/process-service/apps-view.component';
 import { SearchResultComponent } from './components/search/search-result.component';
 import { FilesComponent } from './components/files/files.component';
-import { AppFormComponent } from './components/form/app-form.component';
+import { FormComponent } from './components/form/form.component';
 import { DemoPermissionComponent } from './components/permissions/demo-permissions.component';
 import { AppComponent } from './app.component';
 import { AppsCloudDemoComponent } from './components/cloud/apps-cloud-demo.component';
@@ -42,20 +42,14 @@ import { ProcessDetailsCloudDemoComponent } from './components/cloud/process-det
 import { FormCloudDemoComponent } from './components/app-layout/cloud/form-demo/cloud-form-demo.component';
 import { DemoErrorComponent } from './components/error/demo-error.component';
 import { ProcessCloudLayoutComponent } from './components/cloud/process-cloud-layout.component';
-import { AppSearchFilterChipsComponent } from './components/search/search-filter-chips.component';
-import { FileViewComponent } from './components/file-view/file-view.component';
-import { SettingsComponent } from './components/settings/settings.component';
-import { AppLoginComponent } from './components/login/login.component';
-import { TaskListDemoComponent } from './components/task-list-demo/task-list-demo.component';
-import { ProcessListDemoComponent } from './components/process-list-demo/process-list-demo.component';
-import { AppCardViewComponent } from './components/card-view/card-view.component';
+import { SearchFilterChipsComponent } from './components/search/search-filter-chips.component';

 export const appRoutes: Routes = [
-    { path: 'login', component: AppLoginComponent },
+    { path: 'login', loadChildren: () => import('./components/login/login.module').then(m => m.AppLoginModule) },
    { path: 'logout', component: LogoutComponent },
    {
        path: 'settings',
-        component: SettingsComponent
+        loadChildren: () => import('./components/settings/settings.module').then(m => m.AppSettingsModule)
    },
    {
        path: 'files/:nodeId/view',
@@ -63,12 +57,7 @@ export const appRoutes: Routes = [
        canActivate: [AuthGuardEcm],
        canActivateChild: [AuthGuardEcm],
        outlet: 'overlay',
-        children: [
-            {
-                path: '',
-                component: FileViewComponent
-            }
-        ]
+        loadChildren: () => import('./components/file-view/file-view.module').then(m => m.FileViewModule)
    },
    {
        path: 'files/:nodeId/:versionId/view',
@@ -76,24 +65,14 @@ export const appRoutes: Routes = [
        canActivate: [AuthGuardEcm],
        canActivateChild: [AuthGuardEcm],
        outlet: 'overlay',
-        children: [
-            {
-                path: '',
-                component: FileViewComponent
-            }
-        ]
+        loadChildren: () => import('./components/file-view/file-view.module').then(m => m.FileViewModule)
    },
    {
        path: 'preview/blob',
        component: AppComponent,
        outlet: 'overlay',
        pathMatch: 'full',
-        children: [
-            {
-                path: '',
-                component: FileViewComponent
-            }
-        ]
+        loadChildren: () => import('./components/file-view/file-view.module').then(m => m.FileViewModule)
    },
    {
        path: '',
@@ -107,12 +86,7 @@ export const appRoutes: Routes = [
            },
            {
                path: 'card-view',
-                children: [
-                    {
-                        path: '',
-                        component: AppCardViewComponent
-                    }
-                ]
+                loadChildren: () => import('./components/card-view/card-view.module').then(m => m.AppCardViewModule)
            },
            {
                path: '',
@@ -172,13 +146,14 @@ export const appRoutes: Routes = [
                                path: 'process-details/:processInstanceId',
                                component: ProcessDetailsCloudDemoComponent
                            }
+
                        ]
                    }
                ]
            },
            {
                path: 'settings-layout',
-                component: SettingsComponent
+                loadChildren: () => import('./components/settings/settings.module').then(m => m.AppSettingsModule)
            },
            {
                path: 'files',
@@ -202,7 +177,7 @@ export const appRoutes: Routes = [
            },
            {
                path: 'search-filter-chips',
-                component: AppSearchFilterChipsComponent,
+                component: SearchFilterChipsComponent,
                canActivate: [AuthGuardEcm]
            },
            {
@@ -270,34 +245,16 @@ export const appRoutes: Routes = [
                canActivate: [AuthGuardEcm]
            },
            { path: 'form-cloud', component: FormCloudDemoComponent },
-            { path: 'form', component: AppFormComponent },
+            { path: 'form', component: FormComponent },
            {
                path: 'task-list',
                canActivate: [AuthGuardBpm],
-                children: [
-                    {
-                        path: '',
-                        component: TaskListDemoComponent
-                    },
-                    {
-                        path: ':id',
-                        component: TaskListDemoComponent
-                    }
-                ]
+                loadChildren: () => import('./components/task-list-demo/task-list.module').then(m => m.AppTaskListModule)
            },
            {
                path: 'process-list',
                canActivate: [AuthGuardBpm],
-                children: [
-                    {
-                        path: '',
-                        component: ProcessListDemoComponent
-                    },
-                    {
-                        path: ':id',
-                        component: ProcessListDemoComponent
-                    }
-                ]
+                loadChildren: () => import('./components/process-list-demo/process-list.module').then(m => m.AppProcessListModule)
            },
            {
                path: 'error/no-authorization',
@@ -40,7 +40,7 @@
                <ng-container *ngFor="let link of links">
                    <ng-container *ngIf="link.children">
                        <mat-list-item (click)="trigger.openMenu()" [attr.data-automation-id]="link.title | translate" class="app-sidenav-link">
-                            <mat-icon matListItemIcon>{{link.icon}}</mat-icon>
+                            <mat-icon matListIcon>{{link.icon}}</mat-icon>
                            <span matLine>{{ link.title | translate }}</span>
                            <mat-icon class="app-sidenav-link__expand-button" [matMenuTriggerData]="{links: link.children}"
                                rippleTrigger mat-icon-button #trigger="matMenuTrigger"
@@ -52,14 +52,14 @@
                        <mat-list-item [routerLink]="link.href"
                            routerLinkActive="app-sidenav-link--active" [routerLinkActiveOptions]="{ exact: true }"
                            [attr.data-automation-id]="link.title | translate" class="app-sidenav-link">
-                            <mat-icon matListItemIcon >{{link.icon}}</mat-icon>
+                            <mat-icon matListIcon >{{link.icon}}</mat-icon>
                            <span matLine>{{link.title | translate }}</span>
                        </mat-list-item>
                    </ng-container>
                </ng-container>

                <mat-list-item adf-logout [enableRedirect]="enableRedirect" redirectUri="/logout" class="app-sidenav-link" data-automation-id="Logout" >
-                    <mat-icon matListItemIcon>exit_to_app</mat-icon>
+                    <mat-icon matListIcon>exit_to_app</mat-icon>
                    <span matLine>Logout</span>
                </mat-list-item>
            </mat-nav-list>
@@ -84,7 +84,7 @@
            [routerLink]="link.href"
            [routerLinkActiveOptions]="{ exact: true }">

-            <mat-icon matListItemIcon>{{link.icon}}</mat-icon>
+            <mat-icon matListIcon>{{link.icon}}</mat-icon>
            {{ link.title | translate }}
        </button>
    </ng-template>
@@ -16,50 +16,9 @@
 */

 import { Component, ViewEncapsulation } from '@angular/core';
-import {
-    AlfrescoApiService,
-    AvatarComponent,
-    HeaderLayoutComponent,
-    LogoutDirective,
-    SidenavLayoutComponent,
-    SidenavLayoutContentDirective,
-    SidenavLayoutHeaderDirective,
-    SidenavLayoutNavigationDirective
-} from '@alfresco/adf-core';
-import { SearchBarComponent } from '../search/search-bar.component';
-import { UserInfoComponent } from './user-info/user-info.component';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatListModule } from '@angular/material/list';
-import { TranslateModule } from '@ngx-translate/core';
-import { MatIconModule } from '@angular/material/icon';
-import { MatLineModule } from '@angular/material/core';
-import { CommonModule } from '@angular/common';
-import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
-import { FileUploadingDialogComponent } from '@alfresco/adf-content-services';
+import { AlfrescoApiService } from '@alfresco/adf-core';

@Component({
-    standalone: true,
-    imports: [
-        CommonModule,
-        SidenavLayoutComponent,
-        SidenavLayoutHeaderDirective,
-        HeaderLayoutComponent,
-        SearchBarComponent,
-        UserInfoComponent,
-        AvatarComponent,
-        MatMenuModule,
-        SidenavLayoutNavigationDirective,
-        MatListModule,
-        TranslateModule,
-        MatIconModule,
-        MatLineModule,
-        RouterLink,
-        RouterLinkActive,
-        LogoutDirective,
-        SidenavLayoutContentDirective,
-        RouterOutlet,
-        FileUploadingDialogComponent
-    ],
    templateUrl: './app-layout.component.html',
    styleUrls: ['./app-layout.component.scss'],
    host: { class: 'app-layout' },
@@ -72,24 +31,16 @@ export class AppLayoutComponent {
        { href: '/card-view', icon: 'view_headline', title: 'CardView' },
        { href: '/task-list', icon: 'assignment', title: 'Task List' },
        {
-            href: '/cloud',
-            icon: 'cloud',
-            title: 'Process Cloud',
-            children: [
+            href: '/cloud', icon: 'cloud', title: 'Process Cloud', children: [
                { href: '/cloud/', icon: 'cloud', title: 'Home' },
                { href: '/form-cloud', icon: 'poll', title: 'Form' }
            ]
        },
-        {
-            href: '/activiti',
-            icon: 'device_hub',
-            title: 'Process Services',
-            children: [
-                { href: '/activiti', icon: 'vpn_key', title: 'App' },
-                { href: '/process-list', icon: 'assignment', title: 'Process List' },
-                { href: '/form', icon: 'poll', title: 'Form' }
-            ]
-        },
+        { href: '/activiti', icon: 'device_hub', title: 'Process Services', children: [
+            { href: '/activiti', icon: 'vpn_key', title: 'App' },
+            { href: '/process-list', icon: 'assignment', title: 'Process List' },
+            { href: '/form', icon: 'poll', title: 'Form' }
+        ]},
        { href: '/login', icon: 'vpn_key', title: 'Login' },
        { href: '/settings-layout', icon: 'settings', title: 'Settings' }
    ];
@@ -10,7 +10,7 @@
                </adf-cloud-form>
            </div>

-            <div class="app-console">
+            <div class="app-console" #console>
                <h3>Error log:</h3>
                <p *ngFor="let error of errorFields">Error {{ error.name }} {{error.validationSummary.message | translate}}</p>
            </div>
@@ -1,5 +1,3 @@
-@import 'styles/mat-selectors';
-
 .app-form-container {
    padding: 10px;
 }
@@ -33,9 +31,9 @@
 }

 .app-form-editor-buttons {
-    display: flex;
-    flex-direction: row;
-    column-gap: 4px;
+    & > .mat-raised-button {
+        margin-right: 5px;
+    }
 }

 .app-upload-config-button {
@@ -17,22 +17,13 @@

 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { FormFieldModel, FormModel, FormRenderingService, NotificationService } from '@alfresco/adf-core';
-import { CloudFormRenderingService, FormCloudModule, FormCloudService } from '@alfresco/adf-process-services-cloud';
+import { CloudFormRenderingService, FormCloudService } from '@alfresco/adf-process-services-cloud';
 import { Subscription } from 'rxjs';
 import { CustomEditorComponent, CustomWidgetComponent } from '../../../cloud/custom-form-components/custom-editor.component';
 import { CoreAutomationService } from '../../../../../testing/automation.service';
-import { CommonModule } from '@angular/common';
-import { MatTabsModule } from '@angular/material/tabs';
-import { MonacoEditorModule } from 'ngx-monaco-editor-v2';
-import { TranslateModule } from '@ngx-translate/core';
-import { FormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';

@Component({
    templateUrl: './cloud-form-demo.component.html',
-    standalone: true,
-    imports: [CommonModule, MatTabsModule, FormCloudModule, MonacoEditorModule, TranslateModule, FormsModule, MatButtonModule, MatIconModule],
    styleUrls: ['./cloud-form-demo.component.scss'],
    providers: [{ provide: FormRenderingService, useClass: CloudFormRenderingService }]
 })
@@ -40,8 +40,9 @@

    <mat-menu #menu="matMenu" id="user-profile-lists" [xPosition]="menuPositionX" [yPosition]="menuPositionY"
              [overlapTrigger]="false" class="adf-userinfo-menu">
-        <mat-card appearance="outlined" *ngIf="mode === userInfoMode.CONTENT" class="adf-userinfo-card adf-content-userinfo-card">
-            <mat-card-header class="adf-userinfo-card-header" [style.background-image]="'url(' + ecmBackgroundImage + ')'">
+        <mat-card *ngIf="mode === userInfoMode.CONTENT" class="adf-userinfo-card adf-content-userinfo-card">
+            <mat-card-header class="adf-userinfo-card-header"
+                             [style.background-image]="'url(' + ecmBackgroundImage + ')'">
                <div *ngIf="ecmUser.avatarId; else initialTemplate"
                     class="adf-userinfo-profile-container adf-hide-small">
                    <img class="adf-userinfo-profile-picture" id="ecm-user-detail-image"
@@ -52,7 +53,7 @@
                      [outerHTML]="ecmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
                </ng-template>

-                <div class="mat-headline-6" id="ecm-username">{{ecmUser | fullName}}</div>
+                <div class="mat-title" id="ecm-username">{{ecmUser | fullName}}</div>
            </mat-card-header>
            <mat-card-content>
                <div class="adf-userinfo-supporting-text">
@@ -60,7 +61,8 @@
                        <h2 id="ecm-full-name"
                            class="adf-userinfo__detail-title">{{ecmUser | fullName}}</h2>
                        <span id="ecm-email"> {{ecmUser.email}} </span>
-                        <a href="#/profile">{{ 'USER_PROFILE.LABELS.MY_PROFILE' | translate }}</a>
+                        <a href="#/profile">
+                            {{ 'USER_PROFILE.LABELS.MY_PROFILE' | translate }}</a>
                    </div>
                    <div class="adf-userinfo-detail">
                                    <span class="adf-userinfo__secondary-info" id="ecm-job-title-label">
@@ -71,7 +73,7 @@
                </div>
            </mat-card-content>
        </mat-card>
-        <mat-card appearance="outlined" *ngIf="mode === userInfoMode.CONTENT_SSO" class="adf-userinfo-card adf-content-userinfo-card">
+        <mat-card *ngIf="mode === userInfoMode.CONTENT_SSO" class="adf-userinfo-card adf-content-userinfo-card">
            <mat-card-header class="adf-userinfo-card-header"
                             [style.background-image]="'url(' + bpmBackgroundImage + ')'">
                <div *ngIf="ecmUser.avatarId; else initialTemplate"
@@ -83,7 +85,7 @@
                    <div
                      [outerHTML]="identityUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
                </ng-template>
-                <div class="mat-headline-6" id="identity-username">{{identityUser | fullName}}</div>
+                <div class="mat-title" id="identity-username">{{identityUser | fullName}}</div>
            </mat-card-header>
            <mat-card-content>
                <div class="adf-userinfo-supporting-text">
@@ -0,0 +1,282 @@
+/*!
+ * @license
+ * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CoreTestingModule, IdentityUserModel, InitialUsernamePipe, UserInfoMode } from '@alfresco/adf-core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatMenuModule } from '@angular/material/menu';
+import { By, DomSanitizer } from '@angular/platform-browser';
+import { fakeEcmUser, ContentTestingModule } from '@alfresco/adf-content-services';
+import { ContentUserInfoComponent } from './content-user-info.component';
+
+const fakeEcmEditedUser = {
+    id: 'fake-id',
+    firstName: null,
+    lastName: 'fake-last-name',
+    description: 'i am a fake user for test',
+    avatarId: 'fake-avatar-id',
+    email: 'fakeEcm@ecmUser.com',
+    skypeId: 'fake-skype-id',
+    googleId: 'fake-googleId-id',
+    instantMessageId: 'fake-instantMessageId-id',
+    company: null,
+    jobTitle: 'test job',
+    location: 'fake location',
+    mobile: '000000000',
+    telephone: '11111111',
+    statusUpdatedAt: 'fake-date',
+    userStatus: 'active',
+    enabled: true,
+    emailNotificationsEnabled: true
+};
+
+export const fakeEcmUserNoImage = {
+    id: 'fake-id',
+    firstName: 'fake-first-name',
+    lastName: 'fake-last-name',
+    description: 'i am a fake user for test',
+    avatarId: null,
+    email: 'fakeEcm@ecmUser.com',
+    skypeId: 'fake-skype-id',
+    googleId: 'fake-googleId-id',
+    instantMessageId: 'fake-instantMessageId-id',
+    company: null,
+    jobTitle: null,
+    location: 'fake location',
+    mobile: '000000000',
+    telephone: '11111111',
+    statusUpdatedAt: 'fake-date',
+    userStatus: 'active',
+    enabled: true,
+    emailNotificationsEnabled: true
+};
+
+class FakeSanitizer extends DomSanitizer {
+    constructor() {
+        super();
+    }
+
+    sanitize(html) {
+        return html;
+    }
+
+    bypassSecurityTrustHtml(value: string): any {
+        return value;
+    }
+
+    bypassSecurityTrustStyle(): any {
+        return null;
+    }
+
+    bypassSecurityTrustScript(): any {
+        return null;
+    }
+
+    bypassSecurityTrustUrl(): any {
+        return null;
+    }
+
+    bypassSecurityTrustResourceUrl(): any {
+        return null;
+    }
+}
+
+describe('ContentUserInfoComponent', () => {
+    const profilePictureUrl = 'alfresco-logo.svg';
+
+    let component: ContentUserInfoComponent;
+    let fixture: ComponentFixture<ContentUserInfoComponent>;
+    let element: HTMLElement;
+
+    const identityUserMock = { firstName: 'fake-identity-first-name', lastName: 'fake-identity-last-name', email: 'fakeIdentity@email.com' };
+    const identityUserWithOutLastNameMock = { firstName: 'fake-identity-first-name', lastName: null, email: 'fakeIdentity@email.com' };
+
+    const openUserInfo = () => {
+        fixture.detectChanges();
+        const imageButton = element.querySelector<HTMLButtonElement>('#logged-user-img');
+        imageButton.click();
+        fixture.detectChanges();
+    };
+
+    const whenFixtureReady = async () => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+        fixture.detectChanges();
+    };
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [CoreTestingModule, ContentTestingModule, MatMenuModule]
+        });
+        fixture = TestBed.createComponent(ContentUserInfoComponent);
+        component = fixture.componentInstance;
+        element = fixture.nativeElement;
+
+        spyOn(window, 'requestAnimationFrame').and.returnValue(1);
+    });
+
+    afterEach(() => {
+        fixture.destroy();
+    });
+
+    it('should not show any image if the user is not logged in', () => {
+        expect(element.querySelector('#userinfo_container')).toBeDefined();
+        expect(element.querySelector('#logged-user-img')).toBeNull();
+    });
+
+    it('should NOT have users immediately after ngOnInit', () => {
+        expect(element.querySelector('#userinfo_container')).toBeDefined();
+        expect(element.querySelector('#ecm_username')).toBeNull();
+        expect(element.querySelector('#user-profile-lists')).toBeNull();
+    });
+
+    describe('when user is logged on ecm', () => {
+        beforeEach(() => {
+            component.ecmUser = fakeEcmUser as any;
+            component.isLoggedIn = true;
+        });
+
+        describe('ui', () => {
+            it('should show ecm only last name when user first name is null ', async () => {
+                component.ecmUser = fakeEcmEditedUser as any;
+                await whenFixtureReady();
+
+                openUserInfo();
+                expect(element.querySelector('#userinfo_container')).toBeDefined();
+                const ecmUsername = fixture.debugElement.query(By.css('#ecm-username'));
+                expect(ecmUsername).toBeDefined();
+                expect(ecmUsername).not.toBeNull();
+                expect(ecmUsername.nativeElement.textContent).not.toContain('fake-ecm-first-name');
+                expect(ecmUsername.nativeElement.textContent).not.toContain('null');
+            });
+
+            it('should show the username when showName attribute is true', async () => {
+                await whenFixtureReady();
+                expect(component.showName).toBeTruthy();
+                expect(element.querySelector('#adf-userinfo-ecm-name-display')).not.toBeNull();
+            });
+
+            it('should hide the username when showName attribute is false', async () => {
+                component.showName = false;
+                await whenFixtureReady();
+                expect(element.querySelector('#adf-userinfo-ecm-name-display')).toBeNull();
+            });
+
+            it('should have the defined class to show the name on the right side', async () => {
+                await whenFixtureReady();
+                expect(element.querySelector('#userinfo_container').classList).toContain('adf-userinfo-name-right');
+            });
+
+            it('should not have the defined class to show the name on the left side', async () => {
+                component.namePosition = 'left';
+                await whenFixtureReady();
+                expect(element.querySelector('#userinfo_container').classList).not.toContain('adf-userinfo-name-right');
+            });
+
+            describe('and has image', () => {
+                beforeEach(async () => {
+                    component.ecmUser = fakeEcmUser as any;
+                    component.isLoggedIn = true;
+                    spyOn(component, 'getEcmAvatar').and.returnValue(profilePictureUrl);
+                    await whenFixtureReady();
+                });
+
+                it('should get the ecm current user image', async () => {
+                    openUserInfo();
+                    const loggedImage = fixture.debugElement.query(By.css('#logged-user-img'));
+
+                    expect(element.querySelector('#userinfo_container')).not.toBeNull();
+                    expect(loggedImage).not.toBeNull();
+                    expect(loggedImage.properties.src).toContain(profilePictureUrl);
+                });
+
+                it('should display the current user image if user has avatarId', () => {
+                    openUserInfo();
+                    const loggedImage = fixture.debugElement.query(By.css('#logged-user-img'));
+                    expect(component.ecmUser).toBeDefined();
+                    expect(component.ecmUser.avatarId).toBe('fake-avatar-id');
+                    expect(element.querySelector('#userinfo_container')).not.toBeNull();
+                    expect(loggedImage).not.toBeNull();
+                    expect(loggedImage.properties.src).toContain(profilePictureUrl);
+                });
+
+                it('should get the ecm user information', async () => {
+                    openUserInfo();
+                    const ecmImage = fixture.debugElement.query(By.css('#ecm-user-detail-image'));
+                    const ecmFullName = fixture.debugElement.query(By.css('#ecm-full-name'));
+                    const ecmJobTitle = fixture.debugElement.query(By.css('#ecm-job-title-label'));
+
+                    expect(element.querySelector('#userinfo_container')).not.toBeNull();
+                    expect(fixture.debugElement.query(By.css('#ecm-username'))).not.toBeNull();
+                    expect(ecmImage).not.toBeNull();
+                    expect(ecmImage.properties.src).toContain(profilePictureUrl);
+                    expect(ecmFullName.nativeElement.textContent).toContain('fake-ecm-first-name fake-ecm-last-name');
+                    expect(ecmJobTitle.nativeElement.textContent).toContain('USER_PROFILE.LABELS.ECM.JOB_TITLE');
+                });
+            });
+
+            describe('and has no image', () => {
+                beforeEach(async () => {
+                    component.ecmUser = fakeEcmUserNoImage as any;
+                    component.isLoggedIn = true;
+                    await whenFixtureReady();
+                });
+
+                it('should show N/A when the job title is null', () => {
+                    const imageButton = element.querySelector<HTMLButtonElement>('[data-automation-id="user-initials-image"]');
+                    imageButton.click();
+                    fixture.detectChanges();
+                    expect(element.querySelector('#userinfo_container')).not.toBeNull();
+                    const ecmJobTitle = fixture.debugElement.query(By.css('#ecm-job-title'));
+                    expect(ecmJobTitle).not.toBeNull();
+                    expect(ecmJobTitle).not.toBeNull();
+                    expect(ecmJobTitle.nativeElement.textContent).toContain('N/A');
+                });
+
+                it('should display the current user Initials if the user dose not have avatarId', () => {
+                    fixture.detectChanges();
+                    const pipe = new InitialUsernamePipe(new FakeSanitizer());
+                    const expected = pipe.transform({
+                        firstName: 'Wilbur',
+                        lastName: 'Adams',
+                        email: 'wilbur@app.com'
+                    });
+                    expect(expected).toBe('<div data-automation-id="user-initials-image" class="">WA</div>');
+                    expect(component.ecmUser).toBeDefined();
+                    expect(component.ecmUser.avatarId).toBeNull();
+                });
+            });
+        });
+
+        describe('when identity user is logged in', () => {
+            beforeEach(() => {
+                component.ecmUser = fakeEcmUser as any;
+                component.identityUser = identityUserMock as unknown as IdentityUserModel;
+                component.isLoggedIn = true;
+                component.mode = UserInfoMode.CONTENT_SSO;
+            });
+
+            it('should not show initials if the user have avatar and provider is ECM', async () => {
+                component.identityUser = identityUserWithOutLastNameMock as unknown as IdentityUserModel;
+                await whenFixtureReady();
+
+                expect(element.querySelector('.adf-userinfo-pic')).toBeNull();
+                expect(element.querySelector('.adf-userinfo-profile-image')).toBeDefined();
+                expect(element.querySelector('.adf-userinfo-profile-image')).not.toBeNull();
+            });
+        });
+    });
+});
@@ -15,20 +15,14 @@
 * limitations under the License.
 */

-import { FullNamePipe, IdentityUserModel, InitialUsernamePipe, UserInfoMode } from '@alfresco/adf-core';
+import { IdentityUserModel, UserInfoMode } from '@alfresco/adf-core';
 import { Component, Input, OnDestroy, ViewChild, ViewEncapsulation } from '@angular/core';
-import { MatMenuModule, MatMenuTrigger, MenuPositionX, MenuPositionY } from '@angular/material/menu';
+import { MatMenuTrigger, MenuPositionX, MenuPositionY } from '@angular/material/menu';
 import { Subject } from 'rxjs';
 import { EcmUserModel, PeopleContentService } from '@alfresco/adf-content-services';
-import { CommonModule } from '@angular/common';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
-import { TranslateModule } from '@ngx-translate/core';

@Component({
    selector: 'adf-content-user-info',
-    standalone: true,
-    imports: [CommonModule, FullNamePipe, MatMenuModule, MatButtonModule, InitialUsernamePipe, MatCardModule, TranslateModule],
    templateUrl: './content-user-info.component.html',
    styleUrls: ['./content-user-info.component.scss'],
    encapsulation: ViewEncapsulation.None
@@ -0,0 +1,43 @@
+/*!
+ * @license
+ * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ContentUserInfoComponent } from './content-user-info.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { FullNamePipe, InitialUsernamePipe, PipeModule } from '@alfresco/adf-core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatCardModule } from '@angular/material/card';
+
+@NgModule({
+    declarations: [ContentUserInfoComponent],
+    imports: [
+        CommonModule,
+        MatButtonModule,
+        MatMenuModule,
+        MatTabsModule,
+        MatCardModule,
+        TranslateModule,
+        PipeModule,
+        InitialUsernamePipe,
+        FullNamePipe
+    ],
+    exports: [ContentUserInfoComponent]
+})
+export class ContentUserInfoModule {}
@@ -16,3 +16,5 @@
 */

 export * from './content-user-info.component';
+
+export * from './content-user-info.module';
@@ -41,7 +41,7 @@
                       class="adf-userinfo-tab" [class.adf-hide-tab]="!ecmUser">
            <mat-tab label="{{ 'USER_PROFILE.TAB.CS' | translate }}" role="dialog"
                     *ngIf="mode===userInfoMode.ALL">
-                <mat-card appearance="outlined" class="adf-userinfo-card" *ngIf="ecmUser">
+                <mat-card class="adf-userinfo-card" *ngIf="ecmUser">
                    <mat-card-header class="adf-userinfo-card-header"
                                     [style.background-image]="'url(' + ecmBackgroundImage + ')'">
                        <div *ngIf="ecmUser.avatarId; else initialTemplate"
@@ -54,7 +54,7 @@
                                [outerHTML]="ecmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
                        </ng-template>

-                        <div class="mat-headline-6" id="ecm-username">{{ecmUser | fullName}}</div>
+                        <div class="mat-title" id="ecm-username">{{ecmUser | fullName}}</div>
                    </mat-card-header>
                    <mat-card-content>
                        <div class="adf-userinfo-supporting-text">
@@ -75,7 +75,7 @@
            </mat-tab>
            <mat-tab id="bpm-panel" label="{{ 'USER_PROFILE.TAB.PS' | translate }}" role="dialog"
                     *ngIf="mode===userInfoMode.PROCESS || mode===userInfoMode.ALL">
-                <mat-card appearance="outlined" class="adf-userinfo-card">
+                <mat-card class="adf-userinfo-card">
                    <mat-card-header class="adf-userinfo-card-header"
                                     [style.background-image]="'url(' + bpmBackgroundImage + ')'">
                        <img *ngIf="bpmUser.pictureId; else initialTemplate"
@@ -85,7 +85,7 @@
                            <div
                                [outerHTML]="bpmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
                        </ng-template>
-                        <div class="mat-headline-6" id="bpm-username">{{bpmUser | fullName}}</div>
+                        <div class="mat-title" id="bpm-username">{{bpmUser | fullName}}</div>
                    </mat-card-header>
                    <mat-card-content>
                        <div class="adf-userinfo-supporting-text">
@@ -1,5 +1,4 @@
@import 'styles/flex';
-@import 'styles/mat-selectors';

 .adf {
    &-userinfo-container {
@@ -50,7 +49,7 @@
        display: inline-block;
    }

-    &-userinfo-menu_button#{$mat-button} {
+    &-userinfo-menu_button.mat-button {
        margin-right: 0;
        border-radius: 90%;
        padding: 0;
@@ -58,13 +57,13 @@
        height: 40px;
    }

-    &-userinfo-tab #{$mat-tab-header} {
+    &-userinfo-tab .mat-tab-header {
        align-self: center;
        width: 100%;
        min-width: 250px;
    }

-    &-userinfo-tab #{$mat-tab-label-text} {
+    &-userinfo-tab .mat-tab-label {
        flex: auto;
        font-weight: 500;
        font-size: var(--theme-body-1-font-size);
@@ -82,7 +81,7 @@
        box-sizing: border-box;
    }

-    &-userinfo-card#{$mat-card} {
+    &-userinfo-card.mat-card {
        padding: 0;
    }

@@ -161,7 +160,7 @@
 }

@media only screen and (min-device-width: 480px) {
-    #{$mat-menu-panel}.adf-userinfo-menu {
+    .mat-menu-panel.adf-userinfo-menu {
        max-height: 450px;
        min-width: 450px;
        overflow: auto;
@@ -169,6 +168,6 @@
    }
 }

-#{$mat-menu-panel}.adf-userinfo-menu #{$mat-menu-content} {
+.mat-menu-panel.adf-userinfo-menu .mat-menu-content {
    padding: 0;
 }
@@ -15,4 +15,7 @@
 * limitations under the License.
 */

+import { ProcessUserInfoComponent } from './process-user-info.component';
+
 export * from './process-user-info.component';
+export const PROCESS_USER_INFO_DIRECTIVES = [ProcessUserInfoComponent] as const;
@@ -17,26 +17,14 @@

 import { EcmUserModel, PeopleContentService } from '@alfresco/adf-content-services';
 import { PeopleProcessService } from '@alfresco/adf-process-services';
-import {
-    AuthenticationService,
-    BasicAlfrescoAuthService,
-    IdentityUserInfoComponent,
-    IdentityUserModel,
-    IdentityUserService,
-    UserInfoMode
-} from '@alfresco/adf-core';
+import { AuthenticationService, BasicAlfrescoAuthService, IdentityUserModel, IdentityUserService, UserInfoMode } from '@alfresco/adf-core';
 import { Component, OnInit, Input } from '@angular/core';
 import { MenuPositionX, MenuPositionY } from '@angular/material/menu';
 import { Observable, of } from 'rxjs';
-import { CommonModule } from '@angular/common';
 import { UserRepresentation } from '@alfresco/js-api';
-import { ContentUserInfoComponent } from './content-user-info';
-import { ProcessUserInfoComponent } from './process-user-info';

@Component({
    selector: 'app-shell-user-info',
-    standalone: true,
-    imports: [CommonModule, ContentUserInfoComponent, IdentityUserInfoComponent, ProcessUserInfoComponent],
    templateUrl: './user-info.component.html'
 })
 export class UserInfoComponent implements OnInit {
@@ -29,22 +29,16 @@ import {
    CardViewMapItemModel,
    UpdateNotification,
    DecimalNumberPipe,
-    CardViewArrayItemModel,
-    CardViewComponent
+    CardViewArrayItemModel
 } from '@alfresco/adf-core';
 import { of, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { CommonModule } from '@angular/common';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { MatButtonModule } from '@angular/material/button';

@Component({
-    standalone: true,
-    imports: [CommonModule, MatSlideToggleModule, MatButtonModule, CardViewComponent],
    templateUrl: './card-view.component.html',
    styleUrls: ['./card-view.component.scss']
 })
-export class AppCardViewComponent implements OnInit, OnDestroy {
+export class CardViewComponent implements OnInit, OnDestroy {
    isEditable = true;
    properties: any;
    logs: string[];
@@ -0,0 +1,39 @@
+/*!
+ * @license
+ * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { NgModule } from '@angular/core';
+import { CardViewComponent } from './card-view.component';
+import { Routes, RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+
+const routes: Routes = [
+    {
+      path: '',
+      component: CardViewComponent
+    }
+];
+
+@NgModule({
+    imports: [
+        CommonModule,
+        CoreModule,
+        RouterModule.forChild(routes)
+    ],
+    declarations: [CardViewComponent]
+})
+export class AppCardViewModule {}
@@ -18,18 +18,18 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 import { CloudLayoutService } from './services/cloud-layout.service';
-import { AppListCloudModule } from '@alfresco/adf-process-services-cloud';

@Component({
-    standalone: true,
-    imports: [AppListCloudModule],
    templateUrl: './apps-cloud-demo.component.html'
 })
+
 export class AppsCloudDemoComponent {
-    constructor(private router: Router, private cloudLayoutService: CloudLayoutService) {}
+
+    constructor(private router: Router, private cloudLayoutService: CloudLayoutService) {
+    }

    onAppClick(app) {
-        this.cloudLayoutService.setCurrentTaskFilterParam({ key: 'my-tasks' });
+        this.cloudLayoutService.setCurrentTaskFilterParam({key: 'my-tasks'});
        this.router.navigate([`/cloud/${app.name}`]);
    }
 }
@@ -20,18 +20,15 @@ import { Observable } from 'rxjs';
 import { CloudLayoutService } from './services/cloud-layout.service';
 import { Router, ActivatedRoute } from '@angular/router';
 import { CloudProcessFiltersService } from './services/cloud-process-filters.service';
-import { ProcessFilterCloudModel, ProcessFiltersCloudModule, TaskFiltersCloudModule } from '@alfresco/adf-process-services-cloud';
-import { CommonModule } from '@angular/common';
-import { MatExpansionModule } from '@angular/material/expansion';
+import { ProcessFilterCloudModel } from '@alfresco/adf-process-services-cloud';
@Component({
    selector: 'app-cloud-filters-demo',
-    standalone: true,
-    imports: [CommonModule, MatExpansionModule, TaskFiltersCloudModule, ProcessFiltersCloudModule],
    templateUrl: './cloud-filters-demo.component.html',
    styleUrls: ['./cloud-filters-demo.component.scss'],
    encapsulation: ViewEncapsulation.None
 })
 export class CloudFiltersDemoComponent implements OnInit {
+
    @Input()
    appName: string;

@@ -70,17 +67,17 @@ export class CloudFiltersDemoComponent implements OnInit {

    onTaskFilterSelected(filter) {
        if (filter) {
-            this.router.navigate([`/cloud/${this.appName}/tasks/`], { queryParams: filter });
+            this.router.navigate([`/cloud/${this.appName}/tasks/`], {queryParams: filter});
        }
    }

    onProcessFilterSelected(filter: ProcessFilterCloudModel) {
        if (filter) {
-            const { appName } = this;
-            const { id } = filter;
+            const {appName} = this;
+            const {id} = filter;

            const queryParams = this.cloudProcessFiltersService.writeQueryParams(filter, appName, id);
-            this.router.navigate([`/cloud/${appName}/processes/`], { queryParams });
+            this.router.navigate([`/cloud/${appName}/processes/`], {queryParams});
        }
    }

@@ -1,5 +1,3 @@
-@import 'styles/mat-selectors';
-
 .app-cloud-layout-overflow {
    overflow: auto;
 }
@@ -16,41 +16,11 @@
 */

 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { Router, ActivatedRoute, RouterOutlet } from '@angular/router';
+import { Router, ActivatedRoute } from '@angular/router';
 import { CloudLayoutService } from './services/cloud-layout.service';
-import { CommonModule } from '@angular/common';
-import { MatTabsModule } from '@angular/material/tabs';
-import {
-    SidebarActionMenuComponent,
-    SidenavLayoutComponent,
-    SidenavLayoutContentDirective,
-    SidenavLayoutHeaderDirective,
-    SidenavLayoutNavigationDirective
-} from '@alfresco/adf-core';
-import { TranslateModule } from '@ngx-translate/core';
-import { MatIconModule } from '@angular/material/icon';
-import { MatMenuModule } from '@angular/material/menu';
-import { CloudFiltersDemoComponent } from './cloud-filters-demo.component';
-import { CloudSettingsComponent } from './shared/cloud-settings.component';

@Component({
    selector: 'app-cloud-layout',
-    standalone: true,
-    imports: [
-        CommonModule,
-        MatTabsModule,
-        SidenavLayoutComponent,
-        TranslateModule,
-        SidenavLayoutHeaderDirective,
-        SidenavLayoutNavigationDirective,
-        SidebarActionMenuComponent,
-        MatIconModule,
-        MatMenuModule,
-        SidenavLayoutContentDirective,
-        RouterOutlet,
-        CloudFiltersDemoComponent,
-        CloudSettingsComponent
-    ],
    templateUrl: './cloud-layout.component.html',
    styleUrls: ['./cloud-layout.component.scss'],
    encapsulation: ViewEncapsulation.None
@@ -1,2 +1,3 @@
-<adf-alfresco-viewer [nodeId]="nodeId">
+<adf-alfresco-viewer
+    [nodeId]="nodeId">
 </adf-alfresco-viewer>
@@ -17,18 +17,17 @@

 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
-import { AlfrescoViewerComponent } from '@alfresco/adf-content-services';

@Component({
    selector: 'app-cloud-viewer',
-    standalone: true,
-    imports: [AlfrescoViewerComponent],
    templateUrl: './cloud-viewer.component.html'
 })
 export class CloudViewerComponent implements OnInit {
+
    nodeId: string;

-    constructor(private route: ActivatedRoute) {}
+    constructor(private route: ActivatedRoute) {
+    }

    ngOnInit() {
        this.route.params.subscribe((params: Params) => {
@@ -16,18 +16,16 @@
 */

 import { Component, OnInit } from '@angular/core';
-import { ErrorWidgetComponent, FormService, WidgetComponent } from '@alfresco/adf-core';
-import { CommonModule } from '@angular/common';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { TranslateModule } from '@ngx-translate/core';
-import { FormsModule } from '@angular/forms';
+import { FormService, WidgetComponent } from '@alfresco/adf-core';
 /* eslint-disable @angular-eslint/component-selector */

@Component({
    selector: 'custom-editor-widget',
-    standalone: true,
-    template: ` <div style="color: green">ADF version of custom form widget</div> `
+    template: `
+        <div style="color: green">
+            ADF version of custom form widget
+        </div>
+    `
 })
 export class CustomEditorComponent extends WidgetComponent {
    constructor() {
@@ -37,35 +35,32 @@ export class CustomEditorComponent extends WidgetComponent {

@Component({
    selector: 'app-sample-widget',
-    standalone: true,
-    imports: [CommonModule, MatFormFieldModule, MatInputModule, TranslateModule, FormsModule, ErrorWidgetComponent],
    template: `
        <div style="color: red">
            <p *ngIf="field.readOnly || readOnly">
-                <label class="adf-label" [attr.for]="field.id">{{ field.name | translate }}<span *ngIf="isRequired()">*</span></label>
-                <span>{{ field.value }}</span>
+                <label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span *ngIf="isRequired()">*</span></label>
+                <span>{{field.value}}</span>
            </p>

            <mat-form-field *ngIf="!(field.readOnly || readOnly)">
-                <label class="adf-label" [attr.for]="field.id">{{ field.name | translate }}<span *ngIf="isRequired()">*</span></label>
-                <input
-                    matInput
-                    class="adf-input"
-                    type="text"
-                    [id]="field.id"
-                    [required]="isRequired()"
-                    [value]="field.value"
-                    [(ngModel)]="field.value"
-                    (ngModelChange)="onFieldChanged(field)"
-                />
-                <mat-hint>{{ field.placeholder }}</mat-hint>
+                <label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span *ngIf="isRequired()">*</span></label>
+                <input matInput
+                       class="adf-input"
+                       type="text"
+                       [id]="field.id"
+                       [required]="isRequired()"
+                       [value]="field.value"
+                       [(ngModel)]="field.value"
+                       (ngModelChange)="onFieldChanged(field)">
+                <mat-hint>{{field.placeholder}}</mat-hint>
            </mat-form-field>
            <error-widget [error]="field.validationSummary"></error-widget>
            <error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
        </div>
    `
 })
-export class CustomWidgetComponent extends WidgetComponent implements OnInit {
+export class CustomWidgetComponent extends WidgetComponent  implements OnInit {
+
    constructor(public formService: FormService) {
        super(formService);
    }
@@ -19,15 +19,15 @@ import { Component } from '@angular/core';
 import { FormRenderingService } from '@alfresco/adf-core';
 import { CloudFormRenderingService } from '@alfresco/adf-process-services-cloud';
 import { CustomEditorComponent, CustomWidgetComponent } from './custom-form-components/custom-editor.component';
-import { RouterOutlet } from '@angular/router';

@Component({
    template: `<router-outlet></router-outlet>`,
-    standalone: true,
-    imports: [RouterOutlet],
-    providers: [{ provide: FormRenderingService, useClass: CloudFormRenderingService }]
+    providers: [
+        { provide: FormRenderingService, useClass: CloudFormRenderingService }
+    ]
 })
 export class ProcessCloudLayoutComponent {
+
    constructor(private formRenderingService: FormRenderingService) {
        this.formRenderingService.register({
            'custom-editor': () => CustomEditorComponent,
@@ -17,19 +17,15 @@

 import { Component, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { MatIconModule } from '@angular/material/icon';
-import { MatButtonModule } from '@angular/material/button';
-import { ProcessHeaderCloudModule, TaskListCloudModule } from '@alfresco/adf-process-services-cloud';

@Component({
    selector: 'app-process-details-cloud-demo',
-    standalone: true,
-    imports: [MatIconModule, MatButtonModule, TaskListCloudModule, ProcessHeaderCloudModule],
    templateUrl: './process-details-cloud-demo.component.html',
    styleUrls: ['./process-details-cloud-demo.component.scss'],
    encapsulation: ViewEncapsulation.None
 })
 export class ProcessDetailsCloudDemoComponent {
+
    processInstanceId: string;
    appName: string;

@@ -21,23 +21,18 @@ import {
    PROCESS_FILTER_ACTION_SAVE,
    PROCESS_FILTER_ACTION_SAVE_AS,
    ProcessFilterAction,
-    ProcessFilterCloudModel,
-    ProcessFiltersCloudModule,
-    ProcessListCloudModule
+    ProcessFilterCloudModel
 } from '@alfresco/adf-process-services-cloud';
 import { ActivatedRoute, Router } from '@angular/router';
-import { DataCellEvent, PaginationComponent, UserPreferencesService } from '@alfresco/adf-core';
+import { DataCellEvent, UserPreferencesService } from '@alfresco/adf-core';
 import { CloudLayoutService, CloudServiceSettings } from './services/cloud-layout.service';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { Pagination } from '@alfresco/js-api';
 import { CloudProcessFiltersService } from './services/cloud-process-filters.service';
-import { CommonModule } from '@angular/common';

@Component({
    selector: 'app-processes-cloud-demo',
-    standalone: true,
-    imports: [CommonModule, ProcessFiltersCloudModule, ProcessListCloudModule, PaginationComponent],
    templateUrl: './processes-cloud-demo.component.html',
    styleUrls: ['./processes-cloud-demo.component.scss'],
    encapsulation: ViewEncapsulation.None
@@ -55,8 +50,8 @@ export class ProcessesCloudDemoComponent implements OnInit, OnDestroy {
    actionMenu: boolean;
    contextMenu: boolean;
    actions: any[] = [];
-    selectedAction: { id: number; name: string; actionType: string };
-    selectedContextAction: { id: number; name: string; actionType: string };
+    selectedAction: { id: number; name: string; actionType: string};
+    selectedContextAction: { id: number; name: string; actionType: string};

    filterProperties: string[];
    filterSortProperties: string[];
@@ -74,8 +69,8 @@ export class ProcessesCloudDemoComponent implements OnInit, OnDestroy {
        private router: Router,
        private cloudLayoutService: CloudLayoutService,
        private cloudProcessFiltersService: CloudProcessFiltersService,
-        private userPreference: UserPreferencesService
-    ) {}
+        private userPreference: UserPreferencesService) {
+    }

    ngOnInit() {
        this.filterProperties = this.cloudProcessFiltersService.filterProperties;
@@ -92,7 +87,9 @@ export class ProcessesCloudDemoComponent implements OnInit, OnDestroy {
            this.loadFilter(model);
        });

-        this.cloudLayoutService.settings$.pipe(takeUntil(this.onDestroy$)).subscribe((settings) => this.setCurrentSettings(settings));
+        this.cloudLayoutService.settings$
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(settings => this.setCurrentSettings(settings));
        this.performContextActions();
    }

@@ -132,7 +129,7 @@ export class ProcessesCloudDemoComponent implements OnInit, OnDestroy {
            ...this.cloudProcessFiltersService.writeQueryParams(filter, this.appName, filter.id),
            filterId: filter.id
        };
-        this.router.navigate([`/cloud/${this.appName}/processes/`], { queryParams });
+        this.router.navigate([`/cloud/${this.appName}/processes/`], {queryParams});
    }

    onProcessFilterAction(filterAction: ProcessFilterAction) {
@@ -158,30 +155,33 @@ export class ProcessesCloudDemoComponent implements OnInit, OnDestroy {

    onShowRowContextMenu(event: DataCellEvent) {
        event.value.actions = this.actions.map((action) => ({
-            data: event.value.row['obj'],
-            model: action,
-            subject: this.performAction$
+                data: event.value.row['obj'],
+                model: action,
+                subject: this.performAction$
+
        }));
    }

    onExecuteRowAction(row: any) {
        const value = row.value.row['obj'].entry;
        const action = row.value.action;
-        this.selectedAction = { id: value.id, name: value.name, actionType: action.title };
+        this.selectedAction = {id: value.id, name: value.name, actionType: action.title};
    }

    performContextActions() {
-        this.performAction$.pipe(takeUntil(this.onDestroy$)).subscribe((action: any) => {
+        this.performAction$
+          .pipe(takeUntil(this.onDestroy$))
+          .subscribe((action: any) => {
            if (action) {
-                this.onExecuteContextAction(action);
+              this.onExecuteContextAction(action);
            }
-        });
+          });
    }

    onExecuteContextAction(contextAction: any) {
        const value = contextAction.data.entry;
        const action = contextAction.model;
-        this.selectedContextAction = { id: value.id, name: value.name, actionType: action.title };
+        this.selectedContextAction = {id: value.id, name: value.name, actionType: action.title};
    }

    private loadFilter(model: ProcessFilterCloudModel) {
@@ -43,11 +43,11 @@
        <button mat-raised-button (click)="addAction()">Add</button>
    </form>
    <div *ngIf="actions.length > 0">
-        <mat-chip-listbox>
-            <mat-chip-option *ngFor="let action of actions" [removable]="true">
+        <mat-chip-list>
+            <mat-chip *ngFor="let action of actions" [removable]="true">
                {{action.title}}
                <mat-icon matChipRemove (click)="removeAction(action)">cancel</mat-icon>
-            </mat-chip-option>
-        </mat-chip-listbox>
+            </mat-chip>
+        </mat-chip-list>
    </div>
 </div>
@@ -19,33 +19,10 @@ import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { ActionMenuModel, CloudLayoutService } from '../services/cloud-layout.service';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { FormsModule, ReactiveFormsModule, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
-import { CommonModule } from '@angular/common';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatSelectModule } from '@angular/material/select';
-import { MatInputModule } from '@angular/material/input';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatButtonModule } from '@angular/material/button';
-import { MatChipsModule } from '@angular/material/chips';
-import { MatIconModule } from '@angular/material/icon';
+import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';

@Component({
    selector: 'app-cloud-settings',
-    standalone: true,
-    imports: [
-        CommonModule,
-        MatSlideToggleModule,
-        MatFormFieldModule,
-        MatSelectModule,
-        FormsModule,
-        MatInputModule,
-        ReactiveFormsModule,
-        MatCheckboxModule,
-        MatButtonModule,
-        MatChipsModule,
-        MatIconModule
-    ],
    templateUrl: './cloud-settings.component.html',
    styleUrls: ['./cloud-settings.component.scss'],
    encapsulation: ViewEncapsulation.None
@@ -74,12 +51,15 @@ export class CloudSettingsComponent implements OnInit, OnDestroy {
        icon: new UntypedFormControl(''),
        visible: new UntypedFormControl(true),
        disabled: new UntypedFormControl(false)
-    });
+      });

-    constructor(private cloudLayoutService: CloudLayoutService) {}
+    constructor(private cloudLayoutService: CloudLayoutService) { }

    ngOnInit() {
-        this.cloudLayoutService.settings$.pipe(takeUntil(this.onDestroy$)).subscribe((settings) => this.setCurrentSettings(settings));
+        this.cloudLayoutService
+            .settings$
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(settings => this.setCurrentSettings(settings));
    }

    ngOnDestroy() {
@@ -0,0 +1,40 @@
+/*!
+ * @license
+ * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CloudSettingsComponent } from './cloud-settings.component';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { CoreModule } from '@alfresco/adf-core';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        CoreModule,
+        MatDialogModule,
+        MatInputModule,
+        MatSelectModule,
+        MatSlideToggleModule
+    ],
+    declarations: [ CloudSettingsComponent ],
+    exports: [ CommonModule, CloudSettingsComponent]
+})
+
+export class AppCloudSharedModule {}
@@ -20,28 +20,28 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { NotificationService, AppConfigService, FormRenderingService } from '@alfresco/adf-core';
 import { CloudLayoutService } from './services/cloud-layout.service';
 import { PreviewService } from '../../services/preview.service';
-import { CloudFormRenderingService, StartProcessCloudModule } from '@alfresco/adf-process-services-cloud';
+import { CloudFormRenderingService } from '@alfresco/adf-process-services-cloud';

@Component({
-    standalone: true,
-    imports: [StartProcessCloudModule],
    templateUrl: './start-process-cloud-demo.component.html',
-    providers: [{ provide: FormRenderingService, useClass: CloudFormRenderingService }]
+    providers: [
+        { provide: FormRenderingService, useClass: CloudFormRenderingService }
+    ]
 })
 export class StartProcessCloudDemoComponent implements OnInit {
+
    appName;
    processName: string;
    formValues: any;
    variables: any;

-    constructor(
-        private appConfig: AppConfigService,
-        private cloudLayoutService: CloudLayoutService,
-        private route: ActivatedRoute,
-        private previewService: PreviewService,
-        private notificationService: NotificationService,
-        private router: Router
-    ) {}
+    constructor(private appConfig: AppConfigService,
+                private cloudLayoutService: CloudLayoutService,
+                private route: ActivatedRoute,
+                private previewService: PreviewService,
+                private notificationService: NotificationService,
+                private router: Router) {
+    }

    ngOnInit() {
        this.route.parent.params.subscribe((params) => {
@@ -19,22 +19,20 @@ import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { NotificationService } from '@alfresco/adf-core';
 import { CloudLayoutService } from './services/cloud-layout.service';
-import { StartTaskCloudModule } from '@alfresco/adf-process-services-cloud';

@Component({
-    standalone: true,
-    imports: [StartTaskCloudModule],
    templateUrl: './start-task-cloud-demo.component.html'
 })
 export class StartTaskCloudDemoComponent implements OnInit {
+
    appName;

    constructor(
        private cloudLayoutService: CloudLayoutService,
        private route: ActivatedRoute,
        private notificationService: NotificationService,
-        private router: Router
-    ) {}
+        private router: Router) {
+    }

    ngOnInit() {
        this.route.parent.params.subscribe((params) => {
@@ -18,18 +18,17 @@
 import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { NotificationService } from '@alfresco/adf-core';
-import { TaskFormModule, TaskHeaderCloudComponent, TaskHeaderCloudModule } from '@alfresco/adf-process-services-cloud';
+import { TaskHeaderCloudComponent } from '@alfresco/adf-process-services-cloud';
 import { PreviewService } from '../../services/preview.service';

@Component({
    selector: 'app-task-details-cloud-demo',
-    standalone: true,
-    imports: [TaskFormModule, TaskHeaderCloudModule],
    templateUrl: './task-details-cloud-demo.component.html',
    styleUrls: ['./task-details-cloud-demo.component.scss'],
    encapsulation: ViewEncapsulation.None
 })
 export class TaskDetailsCloudDemoComponent {
+
    @ViewChild('taskHeader', { static: true })
    taskHeader: TaskHeaderCloudComponent;

@@ -41,13 +40,14 @@ export class TaskDetailsCloudDemoComponent {
        private router: Router,
        private notificationService: NotificationService,
        private previewService: PreviewService
-    ) {
+        ) {
        this.route.params.subscribe((params) => {
            this.taskId = params.taskId;
        });
        this.route.parent.params.subscribe((params) => {
            this.appName = params.appName;
        });
+
    }

    isTaskValid(): boolean {
@@ -18,17 +18,14 @@
 import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import {
    TaskFilterCloudModel,
-    TaskFiltersCloudModule,
    TaskListCloudComponent,
-    TaskListCloudModule,
    TaskListCloudSortingModel
 } from '@alfresco/adf-process-services-cloud';
-import { AppConfigService, DataCellEvent, PaginationComponent, UserPreferencesService } from '@alfresco/adf-core';
+import { AppConfigService, DataCellEvent, UserPreferencesService } from '@alfresco/adf-core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { CloudLayoutService } from './services/cloud-layout.service';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { CommonModule } from '@angular/common';

 const ACTION_SAVE_AS = 'saveAs';
 const ACTION_DELETE = 'delete';
@@ -36,8 +33,6 @@ const TASK_FILTER_PROPERTY_KEYS = 'adf-edit-task-filter';

@Component({
    selector: 'app-tasks-cloud-demo',
-    standalone: true,
-    imports: [CommonModule, TaskFiltersCloudModule, TaskListCloudModule, PaginationComponent],
    templateUrl: './tasks-cloud-demo.component.html',
    styleUrls: ['./tasks-cloud-demo.component.scss'],
    encapsulation: ViewEncapsulation.None
@@ -54,7 +49,7 @@ export class TasksCloudDemoComponent implements OnInit, OnDestroy {

    sortArray: TaskListCloudSortingModel[];
    editedFilter: TaskFilterCloudModel;
-    taskFilterProperties: any = { filterProperties: [], sortProperties: [], actions: [] };
+    taskFilterProperties: any  = { filterProperties: [], sortProperties: [], actions: [] };

    filterId;
    multiselect: boolean;
@@ -62,8 +57,8 @@ export class TasksCloudDemoComponent implements OnInit, OnDestroy {
    actionMenu: boolean;
    contextMenu: boolean;
    actions: any[] = [];
-    selectedAction: { id: number; name: string; actionType: string };
-    selectedContextAction: { id: number; name: string; actionType: string };
+    selectedAction: { id: number; name: string; actionType: string};
+    selectedContextAction: { id: number; name: string; actionType: string};
    testingMode: boolean;
    selectionMode: string;
    taskDetailsRedirection: boolean;
@@ -76,8 +71,8 @@ export class TasksCloudDemoComponent implements OnInit, OnDestroy {
        private route: ActivatedRoute,
        private router: Router,
        private userPreference: UserPreferencesService,
-        private appConfig: AppConfigService
-    ) {
+        private appConfig: AppConfigService) {
+
        const properties = this.appConfig.get<Array<any>>(TASK_FILTER_PROPERTY_KEYS);
        if (properties) {
            this.taskFilterProperties = properties;
@@ -96,7 +91,9 @@ export class TasksCloudDemoComponent implements OnInit, OnDestroy {
            this.filterId = params.id;
        });

-        this.cloudLayoutService.settings$.pipe(takeUntil(this.onDestroy$)).subscribe((settings) => this.setCurrentSettings(settings));
+        this.cloudLayoutService.settings$
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(settings => this.setCurrentSettings(settings));
        this.performContextActions();
    }

@@ -142,6 +139,7 @@ export class TasksCloudDemoComponent implements OnInit, OnDestroy {
    }

    onTaskFilterAction(filterAction: any) {
+
        if (filterAction.actionType === ACTION_DELETE) {
            this.cloudLayoutService.setCurrentTaskFilterParam({ index: 0 });
        } else {
@@ -159,29 +157,32 @@ export class TasksCloudDemoComponent implements OnInit, OnDestroy {

    onShowRowContextMenu(event: DataCellEvent) {
        event.value.actions = this.actions.map((action) => ({
-            data: event.value.row['obj'],
-            model: action,
-            subject: this.performAction$
+                data: event.value.row['obj'],
+                model: action,
+                subject: this.performAction$
+
        }));
    }

    onExecuteRowAction(row: any) {
        const value = row.value.row['obj'].entry;
        const action = row.value.action;
-        this.selectedAction = { id: value.id, name: value.name, actionType: action.title };
+        this.selectedAction = {id: value.id, name: value.name, actionType: action.title};
    }

    performContextActions() {
-        this.performAction$.pipe(takeUntil(this.onDestroy$)).subscribe((action: any) => {
+        this.performAction$
+          .pipe(takeUntil(this.onDestroy$))
+          .subscribe((action: any) => {
            if (action) {
-                this.onExecuteContextAction(action);
+              this.onExecuteContextAction(action);
            }
-        });
+          });
    }

    onExecuteContextAction(contextAction: any) {
        const value = contextAction.data.entry;
        const action = contextAction.model;
-        this.selectedContextAction = { id: value.id, name: value.name, actionType: action.title };
+        this.selectedContextAction = {id: value.id, name: value.name, actionType: action.title};
    }
 }
@@ -17,19 +17,17 @@

 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Params, Router } from '@angular/router';
-import { ErrorContentComponent } from '@alfresco/adf-core';
-import { MatButtonModule } from '@angular/material/button';

@Component({
    selector: 'app-demo-error',
-    standalone: true,
-    imports: [ErrorContentComponent, MatButtonModule],
    templateUrl: './demo-error.component.html'
 })
 export class DemoErrorComponent implements OnInit {
+
    errorCode: string = '';

-    constructor(private route: ActivatedRoute, private router: Router) {}
+    constructor(private route: ActivatedRoute, private router: Router) {
+    }

    ngOnInit() {
        if (this.route) {
@@ -44,4 +42,5 @@ export class DemoErrorComponent implements OnInit {
    onReturnButton() {
        this.router.navigate(['/']);
    }
+
 }
@@ -17,44 +17,18 @@

 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, PRIMARY_OUTLET, Router } from '@angular/router';
-import { InfoDrawerComponent, InfoDrawerTabComponent, NotificationService, ViewerComponent } from '@alfresco/adf-core';
+import { NotificationService } from '@alfresco/adf-core';
 import {
-    AlfrescoViewerComponent,
    AllowableOperationsEnum,
-    ContentMetadataComponent,
    ContentService,
    FileUploadErrorEvent,
-    NodeCommentsComponent,
    NodesApiService,
-    PermissionsEnum,
-    VersionManagerComponent
+    PermissionsEnum
 } from '@alfresco/adf-content-services';
 import { PreviewService } from '../../services/preview.service';
-import { CommonModule } from '@angular/common';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatButtonModule } from '@angular/material/button';
-import { MatInputModule } from '@angular/material/input';
-import { FormsModule } from '@angular/forms';

@Component({
    selector: 'app-file-view',
-    standalone: true,
-    imports: [
-        CommonModule,
-        AlfrescoViewerComponent,
-        ViewerComponent,
-        NodeCommentsComponent,
-        ContentMetadataComponent,
-        MatSlideToggleModule,
-        MatFormFieldModule,
-        MatButtonModule,
-        MatInputModule,
-        FormsModule,
-        VersionManagerComponent,
-        InfoDrawerTabComponent,
-        InfoDrawerComponent
-    ],
    templateUrl: './file-view.component.html',
    encapsulation: ViewEncapsulation.None
 })
@@ -0,0 +1,49 @@
+/*!
+ * @license
+ * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Routes, RouterModule } from '@angular/router';
+import { CoreModule, InfoDrawerModule } from '@alfresco/adf-core';
+import { ContentModule, ContentDirectiveModule, VersionManagerModule, ContentMetadataModule } from '@alfresco/adf-content-services';
+import { FileViewComponent } from './file-view.component';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: FileViewComponent
+    }
+];
+
+@NgModule({
+    imports: [
+        CommonModule,
+        RouterModule.forChild(routes),
+        CoreModule,
+        ContentModule,
+        InfoDrawerModule,
+        ContentModule,
+        ContentDirectiveModule,
+        ContentMetadataModule,
+        VersionManagerModule
+    ],
+    declarations: [FileViewComponent],
+    exports: [FileViewComponent]
+})
+export class FileViewModule {
+
+}
@@ -31,23 +31,7 @@ import {
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { NodeEntry, NodePaging, Pagination, Node, SearchEntry } from '@alfresco/js-api';
-import {
-    NotificationService,
-    UserPreferencesService,
-    PaginationComponent,
-    ShowHeaderMode,
-    FormRenderingService,
-    ToolbarTitleComponent,
-    ToolbarComponent,
-    ToolbarDividerComponent,
-    DataColumnComponent,
-    HighlightPipe,
-    DataColumnListComponent,
-    CustomEmptyContentTemplateDirective,
-    InfoDrawerTabComponent,
-    InfoDrawerComponent,
-    InfoDrawerLayoutComponent
-} from '@alfresco/adf-core';
+import { NotificationService, UserPreferencesService, PaginationComponent, ShowHeaderMode, FormRenderingService } from '@alfresco/adf-core';
 import {
    ContentService,
    FolderCreatedEvent,
@@ -58,82 +42,18 @@ import {
    FilterSearch,
    DialogAspectListService,
    FileUploadEvent,
-    NodesApiService,
-    UploadDragAreaComponent,
-    CheckAllowableOperationDirective,
-    BreadcrumbComponent,
-    DropdownBreadcrumbComponent,
-    NodeDownloadDirective,
-    NodeDeleteDirective,
-    NodeLockDirective,
-    ContentActionListComponent,
-    ContentActionComponent,
-    ContentMetadataComponent,
-    VersionManagerComponent,
-    UploadButtonComponent
+    NodesApiService
 } from '@alfresco/adf-content-services';
 import { ProcessFormRenderingService } from '@alfresco/adf-process-services';
 import { VersionManagerDialogAdapterComponent } from './version-manager-dialog-adapter.component';
 import { Subject } from 'rxjs';
 import { PreviewService } from '../../services/preview.service';
 import { takeUntil, debounceTime, scan } from 'rxjs/operators';
-import { CommonModule } from '@angular/common';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { FolderCreateDirective } from '../../folder-directive';
-import { MatMenuModule } from '@angular/material/menu';
-import { TranslateModule } from '@ngx-translate/core';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { FormsModule } from '@angular/forms';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatSelectModule } from '@angular/material/select';

 const DEFAULT_FOLDER_TO_SHOW = '-my-';

@Component({
    selector: 'app-files-component',
-    standalone: true,
-    imports: [
-        CommonModule,
-        UploadDragAreaComponent,
-        MatButtonModule,
-        MatIconModule,
-        CheckAllowableOperationDirective,
-        ToolbarTitleComponent,
-        ToolbarComponent,
-        BreadcrumbComponent,
-        DropdownBreadcrumbComponent,
-        DocumentListComponent,
-        FolderCreateDirective,
-        NodeDownloadDirective,
-        NodeDeleteDirective,
-        ToolbarDividerComponent,
-        MatMenuModule,
-        TranslateModule,
-        DataColumnComponent,
-        NodeLockDirective,
-        ContentActionListComponent,
-        ContentActionComponent,
-        PaginationComponent,
-        ContentMetadataComponent,
-        VersionManagerComponent,
-        MatSlideToggleModule,
-        FormsModule,
-        MatFormFieldModule,
-        MatInputModule,
-        UploadButtonComponent,
-        MatCheckboxModule,
-        MatSelectModule,
-        HighlightPipe,
-        DataColumnListComponent,
-        CustomEmptyContentTemplateDirective,
-        VersionManagerDialogAdapterComponent,
-        InfoDrawerTabComponent,
-        InfoDrawerComponent,
-        InfoDrawerLayoutComponent
-    ],
    templateUrl: './files.component.html',
    styleUrls: ['./files.component.scss'],
    encapsulation: ViewEncapsulation.None,
@@ -16,20 +16,14 @@
 */

 import { Component, Inject, ViewEncapsulation } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Node } from '@alfresco/js-api';
 import { PreviewService } from '../../services/preview.service';
 import { NotificationService } from '@alfresco/adf-core';
-import { FileUploadErrorEvent, VersionListComponent, VersionManagerComponent } from '@alfresco/adf-content-services';
-import { CommonModule } from '@angular/common';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { FormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
+import { FileUploadErrorEvent } from '@alfresco/adf-content-services';

@Component({
    templateUrl: './version-manager-dialog-adapter.component.html',
-    standalone: true,
-    imports: [CommonModule, MatDialogModule, MatSlideToggleModule, FormsModule, VersionManagerComponent, VersionListComponent, MatButtonModule],
    encapsulation: ViewEncapsulation.None
 })
 export class VersionManagerDialogAdapterComponent {
@@ -1,4 +1,4 @@
-<div class="app-main-content">
+<div class="main-content">

    <mat-tab-group [animationDuration]="'0'">
        <mat-tab label="Form">
@@ -2,6 +2,10 @@
    padding: 10px;
 }

+.app-main-content {
+    padding: 0 15px;
+}
+
 .app-card-view {
    width: 30%;
    display: inline-block;
@@ -27,8 +31,7 @@
    }
 }

-.app-main-content {
-    padding: 0 15px;
+.main-content {

    .adf-form-config-editor {
        height: 500px;
@@ -17,32 +17,23 @@

 import { Component, inject, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormModel, FormFieldModel, FormService, FormOutcomeEvent, NotificationService, FormRenderingService } from '@alfresco/adf-core';
-import { FormComponent, ProcessFormRenderingService } from '@alfresco/adf-process-services';
+import { ProcessFormRenderingService } from '@alfresco/adf-process-services';
 import { InMemoryFormService } from '../../services/in-memory-form.service';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { CoreAutomationService } from '../../../testing/automation.service';
-import { CommonModule } from '@angular/common';
-import { MatTabsModule } from '@angular/material/tabs';
-import { MonacoEditorModule } from 'ngx-monaco-editor-v2';
-import { MatButtonModule } from '@angular/material/button';
-import { FormsModule } from '@angular/forms';
-import { TranslateModule } from '@ngx-translate/core';
-import { MatIconModule } from '@angular/material/icon';

@Component({
    selector: 'app-form',
-    standalone: true,
-    imports: [CommonModule, MatTabsModule, FormComponent, MonacoEditorModule, MatButtonModule, FormsModule, TranslateModule, MatIconModule],
-    templateUrl: './app-form.component.html',
-    styleUrls: ['./app-form.component.scss'],
+    templateUrl: './form.component.html',
+    styleUrls: ['./form.component.scss'],
    providers: [
        { provide: FormService, useClass: InMemoryFormService },
        { provide: FormRenderingService, useClass: ProcessFormRenderingService }
    ],
    encapsulation: ViewEncapsulation.None
 })
-export class AppFormComponent implements OnInit, OnDestroy {
+export class FormComponent implements OnInit, OnDestroy {
    private formService = inject(FormService);
    private notificationService = inject(NotificationService);
    private automationService = inject(CoreAutomationService);
@@ -16,16 +16,12 @@
 */

 import { Component, ViewEncapsulation } from '@angular/core';
-import { MatIconModule } from '@angular/material/icon';
-import { AppConfigPipe, LoginComponent } from '@alfresco/adf-core';
-import { RouterLink } from '@angular/router';

@Component({
    selector: 'app-login',
-    standalone: true,
-    imports: [MatIconModule, LoginComponent, AppConfigPipe, RouterLink],
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.scss'],
    encapsulation: ViewEncapsulation.None
 })
-export class AppLoginComponent {}
+export class LoginComponent {
+}
@@ -15,21 +15,27 @@
 * limitations under the License.
 */

-import { Component, Input, ViewEncapsulation } from '@angular/core';
-import { MatToolbarModule } from '@angular/material/toolbar';
+import { NgModule } from '@angular/core';
+import { LoginComponent } from './login.component';
+import { Routes, RouterModule } from '@angular/router';
 import { CommonModule } from '@angular/common';
-import { NavbarItem, NavbarItemComponent } from './navbar-item.component';
+import { CoreModule } from '@alfresco/adf-core';
+import { ContentModule } from '@alfresco/adf-content-services';

-@Component({
-    selector: 'adf-navbar',
-    standalone: true,
-    templateUrl: './navbar.component.html',
-    styleUrls: ['./navbar.component.scss'],
-    encapsulation: ViewEncapsulation.None,
-    imports: [MatToolbarModule, CommonModule, NavbarItemComponent],
-    host: { class: 'adf-navbar' }
+const routes: Routes = [
+    {
+      path: '',
+      component: LoginComponent
+    }
+];
+
+@NgModule({
+    imports: [
+        CommonModule,
+        CoreModule,
+        RouterModule.forChild(routes),
+        ContentModule.forChild()
+    ],
+    declarations: [LoginComponent]
 })
-export class NavbarComponent {
-    @Input()
-    items: NavbarItem[] = [];
-}
+export class AppLoginModule {}
@@ -16,12 +16,9 @@
 */

 import { Component } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';

@Component({
    selector: 'app-logout',
-    standalone: true,
-    imports: [MatButtonModule],
    templateUrl: './logout.component.html',
    styleUrls: ['./logout.component.scss']
 })
@@ -17,19 +17,18 @@

 import { Component, OnInit, Optional } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
-import { PermissionListComponent } from '@alfresco/adf-content-services';

@Component({
    selector: 'app-permissions',
-    standalone: true,
-    imports: [PermissionListComponent],
    templateUrl: './demo-permissions.component.html',
    styleUrls: ['./demo-permissions.component.scss']
 })
 export class DemoPermissionComponent implements OnInit {
+
    nodeId: string;

-    constructor(@Optional() private route: ActivatedRoute) {}
+    constructor(@Optional() private route: ActivatedRoute) {
+    }

    ngOnInit() {
        if (this.route) {
@@ -16,35 +16,15 @@
 */

 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl, AbstractControl, ReactiveFormsModule } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl, AbstractControl } from '@angular/forms';
 import { ActivatedRoute, Params } from '@angular/router';
 import { debounceTime, takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
 import { ProcessInstanceQueryRepresentationSort, ProcessInstanceQueryRepresentationState } from '@alfresco/js-api';
-import { CommonModule } from '@angular/common';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { MatSelectModule } from '@angular/material/select';
-import { MatButtonModule } from '@angular/material/button';
-import { ProcessInstanceListComponent } from '@alfresco/adf-process-services';
-import { DataColumnComponent, DataColumnListComponent, PaginationComponent } from '@alfresco/adf-core';

 const DEFAULT_SIZE = 20;

@Component({
-    standalone: true,
-    imports: [
-        CommonModule,
-        ReactiveFormsModule,
-        MatFormFieldModule,
-        MatInputModule,
-        MatSelectModule,
-        MatButtonModule,
-        ProcessInstanceListComponent,
-        DataColumnListComponent,
-        DataColumnComponent,
-        PaginationComponent
-    ],
    templateUrl: './process-list-demo.component.html',
    styleUrls: [`./process-list-demo.component.scss`]
 })
@@ -15,26 +15,26 @@
 * limitations under the License.
 */

-import { Component, Input, ViewEncapsulation } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
+import { NgModule } from '@angular/core';
+import { ProcessListDemoComponent } from './process-list-demo.component';
+import { Routes, RouterModule } from '@angular/router';
 import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
+import { CoreModule } from '@alfresco/adf-core';
+import { ProcessModule } from '@alfresco/adf-process-services';

-export interface NavbarItem {
-    label: string;
-    routerLink?: string;
-}
+const routes: Routes = [
+    {
+        path: '',
+        component: ProcessListDemoComponent
+    },
+    {
+        path: ':id',
+        component: ProcessListDemoComponent
+    }
+];

-@Component({
-    selector: 'adf-navbar-item',
-    standalone: true,
-    templateUrl: 'navbar-item.component.html',
-    styleUrls: ['./navbar-item.component.scss'],
-    encapsulation: ViewEncapsulation.None,
-    imports: [MatButtonModule, CommonModule, RouterModule],
-    host: { class: 'adf-navbar-item' }
+@NgModule({
+    imports: [CommonModule, RouterModule.forChild(routes), CoreModule, ProcessModule],
+    declarations: [ProcessListDemoComponent]
 })
-export class NavbarItemComponent {
-    @Input() label: string;
-    @Input() routerLink?: string;
-}
+export class AppProcessListModule {}
@@ -18,12 +18,9 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 import { AppDefinitionRepresentation } from '@alfresco/js-api';
-import { AppsListComponent } from '@alfresco/adf-process-services';

@Component({
    selector: 'app-process-list-view',
-    standalone: true,
-    imports: [AppsListComponent],
    templateUrl: './apps-view.component.html'
 })
 export class AppsViewComponent {
@@ -17,24 +17,23 @@

 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { FormComponent } from '@alfresco/adf-process-services';
-import { CommonModule } from '@angular/common';

@Component({
    selector: 'app-form-node-viewer',
-    standalone: true,
-    imports: [CommonModule, FormComponent],
    templateUrl: './form-node-viewer.component.html',
    styleUrls: ['./form-node-viewer.component.css']
 })
 export class FormNodeViewerComponent implements OnInit {
+
    nodeId: string;

-    constructor(private route: ActivatedRoute) {}
+    constructor(private route: ActivatedRoute) {
+    }

    ngOnInit() {
        this.route.params.subscribe((params) => {
            this.nodeId = params['id'];
        });
    }
+
 }
@@ -17,20 +17,18 @@

 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
-import { CommonModule } from '@angular/common';
-import { FormComponent } from '@alfresco/adf-process-services';

@Component({
    selector: 'app-form-viewer',
-    standalone: true,
-    imports: [CommonModule, FormComponent],
    templateUrl: './form-viewer.component.html',
    styleUrls: ['./form-viewer.component.css']
 })
 export class FormViewerComponent implements OnInit {
+
    taskId: string;

-    constructor(private route: ActivatedRoute) {}
+    constructor(private route: ActivatedRoute) {
+    }

    ngOnInit() {
        this.route.params.subscribe((params: Params) => {
@@ -16,32 +16,15 @@
 */

 import { Component, inject, Input, OnChanges, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import {
-    CreateProcessAttachmentComponent,
-    ProcessAttachmentListComponent,
-    ProcessService,
-    ProcessUploadService
-} from '@alfresco/adf-process-services';
-import { UploadDragAreaComponent, UploadService } from '@alfresco/adf-content-services';
+import { ProcessAttachmentListComponent, ProcessService, ProcessUploadService } from '@alfresco/adf-process-services';
+import { UploadService } from '@alfresco/adf-content-services';
 import { PreviewService } from '../../services/preview.service';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { ProcessInstanceRepresentation } from '@alfresco/js-api';
-import { CommonModule } from '@angular/common';
-import { EmptyListComponent } from '@alfresco/adf-core';
-import { TranslateModule } from '@ngx-translate/core';

@Component({
    selector: 'app-process-attachments',
-    standalone: true,
-    imports: [
-        CommonModule,
-        UploadDragAreaComponent,
-        ProcessAttachmentListComponent,
-        EmptyListComponent,
-        TranslateModule,
-        CreateProcessAttachmentComponent
-    ],
    templateUrl: './process-attachments.component.html',
    styleUrls: ['./process-attachments.component.css'],
    providers: [{ provide: UploadService, useClass: ProcessUploadService }],
@@ -20,7 +20,9 @@
                                  (success)="onSuccessTaskFilterList()" #activitiFilter>
                </adf-task-filters>
            </div>
-            <div *ngIf="taskFilter && !isStartTaskMode()" class="app-grid-item app-tasks-list">
+            <div
+                class="app-grid-item app-tasks-list"
+                *ngIf="taskFilter && !isStartTaskMode()">
                <adf-tasklist
                    [appId]="taskFilter?.appId"
                    [presetColumn]="presetColumn"
@@ -28,8 +28,7 @@ import {
    UserPreferenceValues,
    AlfrescoApiService,
    UserPreferencesService,
-    NotificationService,
-    SidebarActionMenuComponent
+    NotificationService
 } from '@alfresco/adf-core';
 import {
    ProcessFiltersComponent,
@@ -41,23 +40,12 @@ import {
    ProcessFormRenderingService,
    APP_LIST_LAYOUT_LIST,
    ValidateDynamicTableRowEvent,
-    DynamicTableRow,
-    TaskDetailsComponent,
-    TaskAuditDirective,
-    StartTaskComponent,
-    ProcessInstanceDetailsComponent,
-    ProcessAuditDirective
+    DynamicTableRow
 } from '@alfresco/adf-process-services';
 import { Subject } from 'rxjs';
 import { PreviewService } from '../../services/preview.service';
-import { CommonModule, Location } from '@angular/common';
+import { Location } from '@angular/common';
 import { takeUntil } from 'rxjs/operators';
-import { MatTabsModule } from '@angular/material/tabs';
-import { MatIconModule } from '@angular/material/icon';
-import { MatMenuModule } from '@angular/material/menu';
-import { TaskAttachmentsComponent } from './task-attachments.component';
-import { MatButtonModule } from '@angular/material/button';
-import { ProcessAttachmentsComponent } from './process-attachments.component';

 const currentProcessIdNew = '__NEW__';
 const currentTaskIdNew = '__NEW__';
@@ -68,28 +56,6 @@ const REPORT_ROUTE = 2;

@Component({
    selector: 'app-process-service',
-    standalone: true,
-    imports: [
-        CommonModule,
-        MatTabsModule,
-        SidebarActionMenuComponent,
-        MatIconModule,
-        MatMenuModule,
-        TaskFiltersComponent,
-        TaskListComponent,
-        PaginationComponent,
-        TaskDetailsComponent,
-        TaskAuditDirective,
-        TaskAttachmentsComponent,
-        StartTaskComponent,
-        ProcessFiltersComponent,
-        ProcessInstanceListComponent,
-        ProcessInstanceDetailsComponent,
-        ProcessAuditDirective,
-        MatButtonModule,
-        ProcessAttachmentsComponent,
-        StartProcessInstanceComponent
-    ],
    templateUrl: './process-service.component.html',
    styleUrls: ['./process-service.component.scss'],
    encapsulation: ViewEncapsulation.None,
@@ -16,20 +16,15 @@
 */

 import { Component, inject, Input, OnChanges, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { AttachmentComponent, TaskAttachmentListComponent, TaskListService, TaskUploadService } from '@alfresco/adf-process-services';
-import { UploadDragAreaComponent, UploadService } from '@alfresco/adf-content-services';
+import { TaskAttachmentListComponent, TaskListService, TaskUploadService } from '@alfresco/adf-process-services';
+import { UploadService } from '@alfresco/adf-content-services';
 import { PreviewService } from '../../services/preview.service';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { TaskRepresentation } from '@alfresco/js-api';
-import { CommonModule } from '@angular/common';
-import { EmptyListComponent } from '@alfresco/adf-core';
-import { TranslateModule } from '@ngx-translate/core';

@Component({
    selector: 'app-task-attachments',
-    standalone: true,
-    imports: [CommonModule, UploadDragAreaComponent, TaskAttachmentListComponent, EmptyListComponent, TranslateModule, AttachmentComponent],
    templateUrl: './task-attachments.component.html',
    styleUrls: ['./task-attachments.component.css'],
    encapsulation: ViewEncapsulation.None,
@@ -19,13 +19,9 @@ import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 import { NodeEntry } from '@alfresco/js-api';
 import { PreviewService } from '../../services/preview.service';
-import { CommonModule } from '@angular/common';
-import { SearchControlComponent } from '@alfresco/adf-content-services';

@Component({
    selector: 'app-search-bar',
-    standalone: true,
-    imports: [CommonModule, SearchControlComponent],
    templateUrl: './search-bar.component.html',
    styleUrls: ['./search-bar.component.scss']
 })
@@ -18,43 +18,18 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { Pagination, ResultSetPaging } from '@alfresco/js-api';
-import {
-    ResetSearchDirective,
-    SearchConfiguration,
-    SearchFilterChipsComponent,
-    SearchFormComponent,
-    SearchQueryBuilderService,
-    SearchService,
-    SearchSortingPickerComponent
-} from '@alfresco/adf-content-services';
+import { SearchConfiguration, SearchQueryBuilderService, SearchService } from '@alfresco/adf-content-services';
 import { ShowHeaderMode, UserPreferencesService } from '@alfresco/adf-core';
 import { combineLatest, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { CommonModule } from '@angular/common';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatDividerModule } from '@angular/material/divider';
-import { MatIconModule } from '@angular/material/icon';
-import { FilesComponent } from '../files/files.component';

@Component({
    selector: 'app-search-filter-chips',
-    standalone: true,
-    imports: [
-        CommonModule,
-        MatProgressBarModule,
-        SearchFormComponent,
-        MatDividerModule,
-        MatIconModule,
-        ResetSearchDirective,
-        SearchSortingPickerComponent,
-        FilesComponent,
-        SearchFilterChipsComponent
-    ],
    templateUrl: './search-filter-chips.component.html',
    styleUrls: ['./search-filter-chips.component.scss'],
    providers: [SearchService]
 })
-export class AppSearchFilterChipsComponent implements OnInit, OnDestroy {
+export class SearchFilterChipsComponent implements OnInit, OnDestroy {
    queryParamName = 'q';
    searchedWord = '';
    data: ResultSetPaging;
@@ -18,39 +18,19 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { Pagination, ResultSetPaging } from '@alfresco/js-api';
-import {
-    SearchChipListComponent,
-    SearchFilterComponent,
-    SearchForm,
-    SearchQueryBuilderService,
-    SearchService,
-    SearchSortingPickerComponent
-} from '@alfresco/adf-content-services';
+import { SearchForm, SearchQueryBuilderService, SearchService } from '@alfresco/adf-content-services';
 import { ShowHeaderMode, UserPreferencesService } from '@alfresco/adf-core';
 import { combineLatest, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { CommonModule } from '@angular/common';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatButtonModule } from '@angular/material/button';
-import { FilesComponent } from '../files/files.component';

@Component({
    selector: 'app-search-result-component',
-    standalone: true,
-    imports: [
-        CommonModule,
-        SearchChipListComponent,
-        SearchFilterComponent,
-        MatProgressBarModule,
-        SearchSortingPickerComponent,
-        MatButtonModule,
-        FilesComponent
-    ],
    templateUrl: './search-result.component.html',
    styleUrls: ['./search-result.component.scss'],
    providers: [SearchService]
 })
 export class SearchResultComponent implements OnInit, OnDestroy {
+
    queryParamName = 'q';
    searchedWord = '';
    data: ResultSetPaging;
@@ -63,12 +43,10 @@ export class SearchResultComponent implements OnInit, OnDestroy {

    private onDestroy$ = new Subject<boolean>();

-    constructor(
-        public router: Router,
-        private preferences: UserPreferencesService,
-        private queryBuilder: SearchQueryBuilderService,
-        private route: ActivatedRoute
-    ) {
+    constructor(public router: Router,
+                private preferences: UserPreferencesService,
+                private queryBuilder: SearchQueryBuilderService,
+                private route: ActivatedRoute) {
        combineLatest([this.route.params, this.queryBuilder.configUpdated])
            .pipe(takeUntil(this.onDestroy$))
            .subscribe(([params, searchConfig]) => {
@@ -77,7 +55,7 @@ export class SearchResultComponent implements OnInit, OnDestroy {
                if (query) {
                    this.queryBuilder.userQuery = query;
                }
-            });
+        });

        queryBuilder.paging = {
            maxItems: this.preferences.paginationSize,
@@ -90,17 +68,21 @@ export class SearchResultComponent implements OnInit, OnDestroy {

        this.sorting = this.getSorting();

-        this.queryBuilder.updated.pipe(takeUntil(this.onDestroy$)).subscribe(() => {
-            this.sorting = this.getSorting();
-            this.isLoading = true;
-        });
+        this.queryBuilder.updated
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(() => {
+                this.sorting = this.getSorting();
+                this.isLoading = true;
+            });

-        this.queryBuilder.executed.pipe(takeUntil(this.onDestroy$)).subscribe((resultSetPaging: ResultSetPaging) => {
-            this.queryBuilder.paging.skipCount = 0;
+        this.queryBuilder.executed
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe((resultSetPaging: ResultSetPaging) => {
+                this.queryBuilder.paging.skipCount = 0;

-            this.onSearchResultLoaded(resultSetPaging);
-            this.isLoading = false;
-        });
+                this.onSearchResultLoaded(resultSetPaging);
+                this.isLoading = false;
+            });

        if (this.route) {
            this.route.params.forEach((params: Params) => {
@@ -109,20 +91,18 @@ export class SearchResultComponent implements OnInit, OnDestroy {
                    this.queryBuilder.update();
                } else {
                    this.queryBuilder.userQuery = null;
-                    this.queryBuilder.executed.next(
-                        new ResultSetPaging({
-                            list: {
-                                pagination: { totalItems: 0 },
-                                entries: []
-                            }
-                        })
-                    );
+                    this.queryBuilder.executed.next(new ResultSetPaging({
+                        list: {
+                            pagination: { totalItems: 0 },
+                            entries: []
+                        }
+                    }));
                }
            });
        }
    }

-    private formatSearchQuery(userInput: string, fields = ['cm:name']) {
+    private formatSearchQuery(userInput: string, fields =  ['cm:name']) {
        if (!userInput) {
            return null;
        }
@@ -162,6 +142,6 @@ export class SearchResultComponent implements OnInit, OnDestroy {
    }

    switchLayout() {
-        this.router.navigate(['search-filter-chips', { q: this.searchedWord }]);
+        this.router.navigate(['search-filter-chips', { q: this.searchedWord }] );
    }
 }
@@ -16,33 +16,16 @@
 */

 import { Component, EventEmitter, Output, ViewEncapsulation, OnInit, Input } from '@angular/core';
-import { Validators, UntypedFormGroup, UntypedFormBuilder, UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
+import { Validators, UntypedFormGroup, UntypedFormBuilder, UntypedFormControl } from '@angular/forms';
 import { AppConfigService, AppConfigValues, StorageService, AlfrescoApiService, AuthenticationService } from '@alfresco/adf-core';
 import { ENTER } from '@angular/cdk/keycodes';
-import { MAT_FORM_FIELD_DEFAULT_OPTIONS, MatFormFieldModule } from '@angular/material/form-field';
-import { CommonModule } from '@angular/common';
-import { MatSelectModule } from '@angular/material/select';
-import { MatRadioModule } from '@angular/material/radio';
-import { MatInputModule } from '@angular/material/input';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { MatButtonModule } from '@angular/material/button';
+import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';

 export const HOST_REGEX = '^(http|https)://.*[^/]$';

@Component({
    providers: [{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { floatLabel: 'always' } }],
    selector: 'adf-host-settings',
-    standalone: true,
-    imports: [
-        CommonModule,
-        ReactiveFormsModule,
-        MatFormFieldModule,
-        MatSelectModule,
-        MatRadioModule,
-        MatInputModule,
-        MatSlideToggleModule,
-        MatButtonModule
-    ],
    templateUrl: 'host-settings.component.html',
    host: { class: 'adf-host-settings' },
    styleUrls: ['./host-settings.component.scss'],
@@ -178,10 +161,7 @@ export class HostSettingsComponent implements OnInit {
    }

    private createIdentityFormControl(): UntypedFormControl {
-        return new UntypedFormControl(this.appConfig.get<string>(AppConfigValues.IDENTITY_HOST), [
-            Validators.required,
-            Validators.pattern(HOST_REGEX)
-        ]);
+        return new UntypedFormControl(this.appConfig.get<string>(AppConfigValues.IDENTITY_HOST), [Validators.required, Validators.pattern(HOST_REGEX)]);
    }

    private createECMFormControl(): UntypedFormControl {
@@ -223,7 +203,7 @@ export class HostSettingsComponent implements OnInit {
    }

    private saveOAuthValues(values: any) {
-        if (values.oauthConfig.publicUrls && typeof values.oauthConfig.publicUrls === 'string') {
+        if (values.oauthConfig.publicUrls && (typeof values.oauthConfig.publicUrls === 'string')) {
            values.oauthConfig.publicUrls = values.oauthConfig.publicUrls.split(',');
        }

@@ -298,4 +278,5 @@ export class HostSettingsComponent implements OnInit {
    get oauthConfig(): UntypedFormControl {
        return this.form.get('oauthConfig') as UntypedFormControl;
    }
+
 }
@@ -17,13 +17,9 @@

 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
-import { CommonModule } from '@angular/common';
-import { HostSettingsComponent } from './host-settings.component';

@Component({
    selector: 'app-settings',
-    standalone: true,
-    imports: [CommonModule, HostSettingsComponent],
    templateUrl: './settings.component.html'
 })
 export class SettingsComponent {
@@ -0,0 +1,46 @@
+/*!
+ * @license
+ * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { NgModule } from '@angular/core';
+import { SettingsComponent } from './settings.component';
+import { Routes, RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { HostSettingsComponent } from './host-settings.component';
+
+const routes: Routes = [
+    {
+      path: '',
+      component: SettingsComponent
+    }
+];
+
+@NgModule({
+    imports: [
+        CommonModule,
+        RouterModule.forChild(routes),
+        CoreModule,
+        FormsModule,
+        ReactiveFormsModule
+    ],
+    declarations: [
+        SettingsComponent,
+        HostSettingsComponent
+    ]
+})
+export class AppSettingsModule {}
@@ -3,7 +3,9 @@
    <form [formGroup]="taskListForm">
        <mat-form-field>
            <mat-label>App Id</mat-label>
-            <input matInput [formControl]="taskAppId" data-automation-id="appId input">
+            <input
+                matInput
+                [formControl]="taskAppId" data-automation-id="appId input">
            <mat-error *ngIf="taskAppId.hasError('pattern')">
                App ID must be a number
            </mat-error>
@@ -11,12 +13,16 @@

        <mat-form-field>
            <mat-label>Task Name</mat-label>
-            <input matInput [formControl]="taskName" data-automation-id="task name">
+            <input
+                matInput
+                [formControl]="taskName" data-automation-id="task name">
        </mat-form-field>

        <mat-form-field>
            <mat-label>Task Id</mat-label>
-            <input matInput [formControl]="taskId" data-automation-id="task id">
+            <input
+                matInput
+                [formControl]="taskId" data-automation-id="task id">
        </mat-form-field>

        <mat-form-field>
@@ -176,6 +182,8 @@
        </data-columns>
    </adf-tasklist>

-    <adf-pagination [target]="taskList"></adf-pagination>
+    <adf-pagination
+        [target]="taskList">
+    </adf-pagination>
 </div>

@@ -16,43 +16,20 @@
 */

 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl, AbstractControl, ReactiveFormsModule } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl, AbstractControl } from '@angular/forms';
 import { ActivatedRoute, Params } from '@angular/router';
 import { debounceTime, takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
 import { set } from 'date-fns';
-import { CommonModule } from '@angular/common';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatSelectModule } from '@angular/material/select';
-import { MatButtonModule } from '@angular/material/button';
-import { TaskListComponent } from '@alfresco/adf-process-services';
-import { DataColumnComponent, DataColumnListComponent, FullNamePipe, LocalizedDatePipe, PaginationComponent } from '@alfresco/adf-core';

 const DEFAULT_SIZE = 20;

@Component({
    selector: 'app-task-list-demo',
-    standalone: true,
-    imports: [
-        CommonModule,
-        ReactiveFormsModule,
-        MatFormFieldModule,
-        MatInputModule,
-        MatDatepickerModule,
-        MatSelectModule,
-        MatButtonModule,
-        TaskListComponent,
-        DataColumnListComponent,
-        DataColumnComponent,
-        FullNamePipe,
-        LocalizedDatePipe,
-        PaginationComponent
-    ],
    templateUrl: './task-list-demo.component.html',
    styleUrls: [`./task-list-demo.component.scss`]
 })
+
 export class TaskListDemoComponent implements OnInit, OnDestroy {
    taskListForm: UntypedFormGroup;

@@ -77,31 +54,33 @@ export class TaskListDemoComponent implements OnInit, OnDestroy {
    includeProcessInstance: boolean;

    assignmentOptions = [
-        { value: 'assignee', title: 'Assignee' },
-        { value: 'candidate', title: 'Candidate' }
+        {value: 'assignee', title: 'Assignee'},
+        {value: 'candidate', title: 'Candidate'}
    ];

    includeProcessInstanceOptions = [
-        { value: 'include', title: 'Include' },
-        { value: 'exclude', title: 'Exclude' }
+        {value: 'include', title: 'Include'},
+        {value: 'exclude', title: 'Exclude'}
    ];

    stateOptions = [
-        { value: 'all', title: 'All' },
-        { value: 'active', title: 'Active' },
-        { value: 'completed', title: 'Completed' }
+        {value: 'all', title: 'All'},
+        {value: 'active', title: 'Active'},
+        {value: 'completed', title: 'Completed'}
    ];

    sortOptions = [
-        { value: 'created-asc', title: 'Created (asc)' },
-        { value: 'created-desc', title: 'Created (desc)' },
-        { value: 'due-asc', title: 'Due (asc)' },
-        { value: 'due-desc', title: 'Due (desc)' }
+        {value: 'created-asc', title: 'Created (asc)'},
+        {value: 'created-desc', title: 'Created (desc)'},
+        {value: 'due-asc', title: 'Due (asc)'},
+        {value: 'due-desc', title: 'Due (desc)'}
    ];

    private onDestroy$ = new Subject<boolean>();

-    constructor(private route: ActivatedRoute, private formBuilder: UntypedFormBuilder) {}
+    constructor(private route: ActivatedRoute,
+                private formBuilder: UntypedFormBuilder) {
+    }

    ngOnInit() {
        if (this.route) {
@@ -141,11 +120,16 @@ export class TaskListDemoComponent implements OnInit, OnDestroy {
            taskIncludeProcessInstance: new UntypedFormControl()
        });

-        this.taskListForm.valueChanges.pipe(debounceTime(500), takeUntil(this.onDestroy$)).subscribe((taskFilter) => {
-            if (this.isFormValid()) {
-                this.filterTasks(taskFilter);
-            }
-        });
+        this.taskListForm.valueChanges
+            .pipe(
+                debounceTime(500),
+                takeUntil(this.onDestroy$)
+            )
+            .subscribe(taskFilter => {
+                if (this.isFormValid()) {
+                    this.filterTasks(taskFilter);
+                }
+            });
    }

    filterTasks(taskFilter: any) {
@@ -0,0 +1,40 @@
+/*!
+ * @license
+ * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { NgModule } from '@angular/core';
+import { TaskListDemoComponent } from './task-list-demo.component';
+import { Routes, RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { CoreModule, FullNamePipe, LocalizedDatePipe } from '@alfresco/adf-core';
+import { ProcessModule } from '@alfresco/adf-process-services';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: TaskListDemoComponent
+    },
+    {
+        path: ':id',
+        component: TaskListDemoComponent
+    }
+];
+
+@NgModule({
+    imports: [CommonModule, RouterModule.forChild(routes), CoreModule, ProcessModule, LocalizedDatePipe, FullNamePipe],
+    declarations: [TaskListDemoComponent]
+})
+export class AppTaskListModule {}
@@ -26,8 +26,7 @@ const DEFAULT_FOLDER_PARENT_ID = '-my-';
 const DIALOG_WIDTH: number = 400;

@Directive({
-    selector: '[adf-create-folder]',
-    standalone: true
+    selector: '[adf-create-folder]'
 })
 export class FolderCreateDirective {
    /** Parent folder where the new folder will be located after creation. */
@@ -15,14 +15,15 @@
 * limitations under the License.
 */

-import { HoldBulkStatus } from './holdBulkStatus';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MaterialModule } from '../material.module';

-export class HoldBulkStatusEntry {
-    entry: HoldBulkStatus;
+import { FolderCreateDirective } from './folder-create.directive';

-    constructor(input?: Partial<HoldBulkStatusEntry>) {
-        if (input) {
-            Object.assign(this, input);
-        }
-    }
-}
+@NgModule({
+    imports: [CommonModule, MaterialModule],
+    declarations: [FolderCreateDirective],
+    exports: [FolderCreateDirective]
+})
+export class FolderDirectiveModule {}
@@ -16,3 +16,5 @@
 */

 export * from './folder-create.directive';
+
+export * from './folder-directive.module';
@@ -0,0 +1,63 @@
+/*!
+ * @license
+ * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { NgModule } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatToolbarModule } from '@angular/material/toolbar';
+
+@NgModule({
+    imports: [
+        MatSlideToggleModule,
+        MatInputModule,
+        MatSelectModule,
+        MatDialogModule,
+        MatSidenavModule,
+        MatProgressBarModule,
+        MatCardModule,
+        MatListModule,
+        MatMenuModule,
+        MatToolbarModule,
+        MatSnackBarModule,
+        MatExpansionModule
+    ],
+    exports: [
+        MatSlideToggleModule,
+        MatInputModule,
+        MatSelectModule,
+        MatDialogModule,
+        MatSidenavModule,
+        MatProgressBarModule,
+        MatCardModule,
+        MatListModule,
+        MatMenuModule,
+        MatToolbarModule,
+        MatSnackBarModule,
+        MatExpansionModule
+    ]
+})
+export class MaterialModule {
+}
@@ -1,7 +1,6 @@
@use '@angular/material' as mat;
@import '../../lib/core/src/lib/styles/index';
@import '../../lib/core/src/lib/styles/typography';
-@include mat.all-component-typographies;
@include mat.core;

 $primary: mat.define-palette($alfresco-accent-orange);
@@ -20,3 +19,19 @@ $theme: mat.define-light-theme(

@include mat.all-component-themes($theme);
@include alfresco-material-theme($theme);
+
+$typography: map-get($theme, typography);
+
+body,
+html {
+    margin: 0;
+    height: 100%;
+    overflow: hidden;
+    font-size: mat.font-size($typography, body-1);
+    font-family: mat.font-family($typography);
+    line-height: mat.line-height($typography, body-1);
+}
+
+body {
+    overflow: auto;
+}
@@ -1,7 +1,6 @@
@use '@angular/material' as mat;
@import '~@alfresco/adf-core/theming';
-@include mat.all-component-typographies($alfresco-typography);
-@include mat.core;
+@include mat.core($alfresco-typography);

 $primary: mat.define-palette($alfresco-accent-orange);
 $accent: mat.define-palette($alfresco-accent-purple);
@@ -17,3 +16,17 @@ $theme: mat.define-light-theme(

@include mat.all-component-themes($theme);
@include alfresco-material-theme($theme);
+
+body,
+html {
+    margin: 0;
+    height: 100%;
+    overflow: hidden;
+    font-size: mat.font-size($alfresco-typography, body-1);
+    font-family: mat.font-family($alfresco-typography);
+    line-height: mat.line-height($alfresco-typography, body-1);
+}
+
+body {
+    overflow: auto;
+}
@@ -81,17 +81,18 @@ for more information about installing and using the source code.

 A collection of Angular components for generic use.

-| Name                                              | Description                                     |
-|---------------------------------------------------|-------------------------------------------------|
-| [Avatar](core/components/avatar.component.md)     | Displays user avatars.                          |
-| [Button](core/components/button.component.md)     | A standard button component.                    |
-| [Progress](core/components/progress.component.md) | A progress bar component.                       |
-| [Header](core/components/adf-header.component.md) | A simple reusable application header component. |
+| Name                                          | Description                  |
+|-----------------------------------------------|------------------------------|
+| [Avatar](core/components/avatar.component.md) | Displays user avatars.       |
+| [Button](core/components/button.component.md) | A standard button component. |

 ### Components

 | Name | Description | Source link |
 | ---- | ----------- | ----------- |
+| [About Application Modules Component](core/components/about-application.component.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Shows which ADF libraries and plugins an application is using. | [Source](../lib/core/src/lib/about/about-application-modules/about-application-modules.component.ts) |
+| [About GitHub Link Component](core/components/about-github-link.component.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Shows which version of the application is running based on the latest GitHub commit, as well as the server settings for the application. | [Source](../lib/core/src/lib/about/about-github-link/about-github-link.component.ts) |
+| [About Product Version Component](core/components/about-product-version.component.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Shows which version of Process Services (BPM) and Content Services (ECM) an application is running. It also shows the relevant license information, application status and Alfresco modules running in an application. | [Source](../lib/core/src/lib/about/about-product-version/about-product-version.component.ts) |
 | [About Component](core/components/about.component.md) | Presentational component to display About information as a set of collapsible panels. | [Source](../lib/core/src/lib/about/about.component.ts) |
 | [Card View component](core/components/card-view.component.md) | Displays a configurable property list renderer. | [Source](../lib/core/src/lib/card-view/components/card-view/card-view.component.ts) |
 | [Comment list component](core/components/comment-list.component.md) | Shows a list of comments. | [Source](../lib/core/src/lib/comments/comment-list/comment-list.component.ts) |
@@ -105,6 +106,7 @@ A collection of Angular components for generic use.
 | [Form field component](core/components/form-field.component.md) | Represents a UI field in a form. | [Source](../lib/core/src/lib/form/components/form-field/form-field.component.ts) |
 | [Form List Component](core/components/form-list.component.md) | Shows forms as a list. | [Source](../lib/process-services/src/lib/form/form-list/form-list.component.ts) |
 | [Header component](core/components/header.component.md) | Reusable header for Alfresco applications. | [Source](../lib/core/src/lib/layout/components/header/header.component.ts) |
+| [Host settings component](core/components/host-settings.component.md) ![Internal](docassets/images/InternalIcon.png) | Validates the URLs for ACS and APS and saves them in the user's local storage | [Source](../lib/core/src/lib/settings/host-settings.component.ts) |
 | [Icon Component](core/components/icon.component.md) | Provides a universal way of rendering registered and named icons. | [Source](../lib/core/src/lib/icon/icon.component.ts) |
 | [Identity User Info component](core/components/identity-user-info.component.md) | Shows user information for SSO mode. | [Source](../lib/core/src/lib/identity-user-info/identity-user-info.component.ts) |
 | [Infinite Pagination component](core/components/infinite-pagination.component.md) | Adds "infinite" pagination to the component it is used with. | [Source](../lib/core/src/lib/pagination/infinite-pagination.component.ts) |
@@ -116,7 +118,8 @@ A collection of Angular components for generic use.
 | [Login Dialog Panel component](core/components/login-dialog-panel.component.md) | Shows and manages a login dialog. | [Source](../lib/core/src/lib/login/components/login-dialog-panel.component.ts) |
 | [Login Dialog component](core/components/login-dialog.component.md) | Allows a user to perform a login via a dialog. | [Source](../lib/core/src/lib/login/components/login-dialog.component.ts) |
 | [Login component](core/components/login.component.md) | Authenticates to Alfresco Content Services and Alfresco Process Services. | [Source](../lib/core/src/lib/login/components/login.component.ts) |
-| [Notification History component](core/components/notification-history.component.md) ![Experimental](docassets/images/ExperimentalIcon.png) | This component is in the current status just an experimental component. The main purpose of the Notification history component is list all the notification received in the current session. They will disappear from the list after the refresh. | [Source](../lib/core/src/lib/notifications/components/notification-history.component.ts) |  |
+| [Notification History component](core/components/notification-history.component.md) ![Experimental](docassets/images/ExperimentalIcon.png) | This component is in the current status just an experimental component. |  |
+| The main purpose of the Notification history component is list all the notification received in the current session. They will disappear from the list after the refresh. | [Source](../lib/core/src/lib/notifications/components/notification-history.component.ts) |  |
 | [Pagination Component](core/components/pagination.component.md) | Adds pagination to the component it is used with. | [Source](../lib/core/src/lib/pagination/pagination.component.ts) |
 | [Search Text Input Component](core/components/search-text-input.component.md) | Displays a input text that supports autocompletion | [Source](<>) |
 | [Sidebar action menu component](core/components/sidebar-action-menu.component.md) | Displays a sidebar-action menu information panel. | [Source](../lib/core/src/lib/layout/components/sidebar-action/sidebar-action-menu.component.ts) |
@@ -147,7 +150,6 @@ A collection of Angular components for generic use.

 | Name | Description | Source link |
 | ---- | ----------- | ----------- |
-| [Confirm dialog component](core/dialogs/confirm.dialog.md) | Requests a yes/no choice from the user. | [Source](../lib/core/src/lib/dialogs/confirm-dialog/confirm.dialog.ts) |
 | [Edit JSON Dialog](core/dialogs/edit-json.dialog.md) | Allows a user to preview or edit a JSON content in a dialog. | [Source](../lib/testing/src/lib/core/dialog/edit-json-dialog.ts) |
 | [Unsaved Changes Dialog](core/dialogs/unsaved-changes-dialog.component.md) | Dialog which informs about unsaved changes. Allows discard them and proceed or close dialog and stop proceeding. | [Source](../lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.ts) | 

@@ -192,7 +194,7 @@ A collection of Angular components for generic use.
 ### Services

 | Name | Description | Source link |
-| ---- | ----------- | -------- |
+| ---- | ----------- | ----------- |
 | [APS Alfresco Content Service](core/services/activiti-alfresco.service.md) | Gets Alfresco Repository folder content based on a Repository account configured in Alfresco Process Services (APS). | [Source](../lib/process-services/src/lib/form/services/activiti-alfresco.service.ts) |
 | [Alfresco Api Service](core/services/alfresco-api.service.md) | Provides access to an initialized AlfrescoJSApi instance. | [Source](../lib/core/src/lib/services/alfresco-api.service.ts) |
 | [App Config service](core/services/app-config.service.md) | Supports app configuration settings, stored server side. | [Source](../lib/core/src/lib/app-config/app-config.service.ts) |
@@ -204,13 +206,17 @@ A collection of Angular components for generic use.
 | [Authentication Service](core/services/authentication.service.md) | Provides authentication to ACS and APS. | [Source](../lib/core/src/lib/auth/services/authentication.service.ts) |
 | [Bpm User service](core/services/bpm-user.service.md) | Gets information about the current Process Services user. | [Source](../lib/core/src/lib/services/bpm-user.service.ts) |
 | [Card Item Type service](core/services/card-item-types.service.md) | Maps type names to field component types for the Card View component. | [Source](../lib/core/src/lib/card-view/services/card-item-types.service.ts) |
-| [Card View Update service](core/services/card-view-update.service.md) | Reports edits and clicks within fields of a Card View component. Implements BaseCardViewUpdate. | [Source](../lib/core/src/lib/card-view/services/card-view-update.service.ts) |  |
+| [Card View Update service](core/services/card-view-update.service.md) | Reports edits and clicks within fields of a Card View component. |  |
+| Implements BaseCardViewUpdate. | [Source](../lib/core/src/lib/card-view/services/card-view-update.service.ts) |  |
 | [Clipboard service](core/services/clipboard.service.md) | Copies text to the clipboard. | [Source](../lib/core/src/lib/clipboard/clipboard.service.ts) |
 | [Comment Content service](core/services/comment-content.service.md) | Adds and retrieves comments for nodes in Content Services. | [Source](../lib/core/src/lib/services/comment-content.service.ts) |
 | [Comment Process service](core/services/comment-process.service.md) | Adds and retrieves comments for task and process instances in Process Services. | [Source](../lib/process-services/src/lib/process-comments/services/comment-process.service.ts) |
 | [Content service](core/services/content.service.md) | Accesses app-generated data objects via URLs and file downloads. | [Source](../lib/content-services/src/lib/common/services/content.service.ts) |
 | [Cookie service](core/services/cookie.service.md) | Stores key-value data items as browser cookies. | [Source](../lib/core/src/lib/common/services/cookie.service.ts) |
-| [DataTable service](core/services/datatable.service.md) | If you need to update one row of your datatable you can use the  DataTableService to update it. To update a single row you can use the rowUpdate subject. The model to update the DataTable require the ID of the row you want change and the new data Object of the row | [Source](../lib/core/src/lib/datatable/services/datatable.service.ts) |
+| [DataTable service](core/services/datatable.service.md) | If you need to update one row of your datatable you can use the  DataTableService to update it. |  |
+
+To update a single row you can use the rowUpdate subject. 
+The model to update the DataTable require the ID of the row you want change and the new data Object of the row | [Source](../lib/core/src/lib/datatable/services/datatable.service.ts) |
 | [Deleted Nodes Api service](core/services/deleted-nodes-api.service.md) | Gets a list of Content Services nodes currently in the trash. | [Source](../lib/core/src/lib/services/deleted-nodes-api.service.ts) |
 | [Discovery Api service](core/services/discovery-api.service.md) | Gets version and license information for Process Services and Content Services. | [Source](../lib/content-services/src/lib/common/services/discovery-api.service.ts) |
 | [Download zip service](core/services/download-zip.service.md) | Creates and manages downloads. | [Source](../lib/content-services/src/lib/dialogs/download-zip/services/download-zip.service.ts) |
@@ -264,60 +270,61 @@ for more information about installing and using the source code.

 ### Components

-| Name                                                                                                                                                                  | Description | Source link |
-|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------| ----------- | -------- |
-| [Add Permission Dialog Component](content-services/components/add-permission-dialog.component.md)                                                                     | Displays a dialog to search for people or groups to add to the current node permissions. | [Source](../lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.ts) |
-| [Add Permission Panel Component](content-services/components/add-permission-panel.component.md)                                                                       | Searches for people or groups to add to the current node permissions. | [Source](../lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.ts) |
-| [Add Permission Component](content-services/components/add-permission.component.md)                                                                                   | Searches for people or groups to add to the current node permissions. | [Source](../lib/content-services/src/lib/permission-manager/components/add-permission/add-permission.component.ts) |
-| [Alfresco Viewer component](content-services/components/alfresco-viewer.component.md)                                                                                 | Displays content from an ACS repository. | [Source](../lib/content-services/src/lib/viewer/components/alfresco-viewer.component.ts) |
-| [Aspect List Dialog component](content-services/components/aspect-list-dialog.component.md)                                                                           | Allows a user to choose aspects for a node. | [Source](../lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.ts) |
-| [Aspect List component](content-services/components/aspect-list.component.md)                                                                                         | This component will show in an expandable row list with checkboxes all the aspect of a node, if a node id is given, or otherwise a complete list. | [Source](../lib/content-services/src/lib/aspect-list/aspect-list.component.ts) |  |
-| [Breadcrumb Component](content-services/components/breadcrumb.component.md)                                                                                           | Indicates the current position within a navigation hierarchy. | [Source](../lib/content-services/src/lib/breadcrumb/breadcrumb.component.ts) |
-| [Content Action component](content-services/components/content-action.component.md)                                                                                   | Adds options to a Document List actions menu for a particular content type. | [Source](../lib/content-services/src/lib/document-list/components/content-action/content-action.component.ts) |
-| [Content Metadata Card component](content-services/components/content-metadata-card.component.md)                                                                     | Displays and edits metadata related to a node. | [Source](../lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.ts) |
-| [Content Node Selector Panel component](content-services/components/content-node-selector-panel.component.md)                                                         | Opens a Content Node Selector  in its own dialog window. | [Source](../lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.ts) |
-| [Content Node Selector component](content-services/components/content-node-selector.component.md)                                                                     | Allows a user to select items from a Content Services repository. | [Source](../lib/content-services/src/lib/content-node-selector/content-node-selector.component.ts) |
-| [Content Type Dialog component](content-services/components/content-type-dialog.component.md)                                                                         | Confirm dialog when user changes content type of a node. | [Source](../lib/content-services/src/lib/content-type/content-type-dialog.component.ts) |
-| [Document List component](content-services/components/document-list.component.md)                                                                                     | Displays the documents from a repository. | [Source](../lib/content-services/src/lib/document-list/components/document-list.component.ts) |
-| [Dropdown Breadcrumb Component](content-services/components/dropdown-breadcrumb.component.md)                                                                         | Indicates the current position within a navigation hierarchy using a dropdown menu. | [Source](../lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.ts) |
-| [File Uploading Dialog Component](content-services/components/file-uploading-dialog.component.md)                                                                     | Shows a dialog listing all the files uploaded with the Upload Button or Drag Area components. | [Source](../lib/content-services/src/lib/upload/components/file-uploading-dialog.component.ts) |
-| [Node Comments Component](content-services/components/node-comments.component.md)                                                                                     | Displays comments from users involved in a specified content and allows an involved user to add a comment to a content. | [Source](../lib/content-services/src/lib/node-comments/node-comments.component.ts) |
-| [Permission List Component](content-services/components/permission-list.component.md)                                                                                 | Shows node permissions as a table. | [Source](../lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.ts) |
-| [Search check list component](content-services/components/search-check-list.component.md)                                                                             | Implements a checklist widget for the Search Filter component. | [Source](../lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.ts) |
-| [Search Chip Input Component](content-services/components/search-chip-input.component.md)                                                                             | Displays input for providing phrases display as "chips". | [Source](../lib/content-services/src/lib/search/components/search-chip-input/search-chip-input.component.ts) |
-| [Search Chip Autocomplete Input component](content-services/components/search-chip-autocomplete-input.component.md)                                                   | Displays an input with autocomplete options. | [Source](../lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.ts) |
-| [Search Chip List Component](content-services/components/search-chip-list.component.md)                                                                               | Displays search criteria as a set of "chips". | [Source](../lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.ts) |
-| [Search control component](content-services/components/search-control.component.md)                                                                                   | Displays a input text that shows find-as-you-type suggestions. | [Source](../lib/content-services/src/lib/search/components/search-control.component.ts) |
-| [Search Date Range Component](content-services/components/search-date-range.component.md)                                                                             | Displays a UI to configure different kinds of search criteria around date. Options are 'Anytime', 'In the last' and 'Between' | [Source](../lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.ts) |
-| [Search Date Range Tabbed component](content-services/components/search-date-range-tabbed.component.md)                                                               | Implements a tabbed advanced search widget for the Search Date Range component. | [Source](../lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range-tabbed.component.ts) |
-| [Search datetime range component](content-services/components/search-datetime-range.component.md)                                                                     | Implements a search widget for the Search Filter component. | [Source](../lib/content-services/src/lib/search/components/search-datetime-range/search-datetime-range.component.ts) |
-| [Search Filter Autocomplete Chips component](content-services/components/search-filter-autocomplete-chips.component.md)                                               | Implements a search widget for the Search Filter component. | [Source](../lib/content-services/src/lib/search/components/search-filter-autocomplete-chips/search-filter-autocomplete-chips.component.ts) |
-| [Search Filter Chips component](content-services/components/search-filter-chips.component.md)                                                                         | Represents a chip based container component for custom search and faceted search settings. | [Source](../lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.ts) |
-| [Search Filter component](content-services/components/search-filter.component.md)                                                                                     | Represents a main container component for custom search and faceted search settings. | [Source](../lib/content-services/src/lib/search/components/search-filter/search-filter.component.ts) |
-| [Search Filter Tabbed component](content-services/components/search-filter-tabbed.component.md)                                                                       | Represents a container component for creating tabbed layout. | [Source](../lib/content-services/src/lib/search/components/search-filter/search-filter.component.ts)                                     |
-| [Search Form component](content-services/components/search-form.component.md)                                                                                         | Search Form screenshot | [Source](../lib/content-services/src/lib/search/components/search-form/search-form.component.ts) |
-| [Search Logical Filter component](content-services/components/search-logical-filter.component.md)                                                                     | Displays 3 chip inputs each representing different logical condition for search query. | [Source](../lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.ts) |
-| [Search Properties component](content-services/components/search-properties.component.md)                                                                             | Allows to search by file size and type.| [Source](../lib/content-services/src/lib/search/components/search-properties/search-properties.component.ts) |
-| [Search number range component](content-services/components/search-number-range.component.md)                                                                         | Implements a number range widget for the Search Filter component. | [Source](../lib/content-services/src/lib/search/components/search-number-range/search-number-range.component.ts) |
-| [Search radio component](content-services/components/search-radio.component.md)                                                                                       | Implements a radio button list widget for the Search Filter component. | [Source](../lib/content-services/src/lib/search/components/search-radio/search-radio.component.ts) |
-| [Search slider component](content-services/components/search-slider.component.md)                                                                                     | Implements a numeric slider widget for the Search Filter component. | [Source](../lib/content-services/src/lib/search/components/search-slider/search-slider.component.ts) |
-| [Search Sorting Picker Component](content-services/components/search-sorting-picker.component.md)                                                                     | Provides an ability to select one of the predefined sorting definitions for search results: | [Source](../lib/content-services/src/lib/search/components/search-sorting-picker/search-sorting-picker.component.ts) |
-| [Search text component](content-services/components/search-text.component.md)                                                                                         | Implements a text input widget for the Search Filter component. | [Source](../lib/content-services/src/lib/search/components/search-text/search-text.component.ts) |
-| [Search component](content-services/components/search.component.md)                                                                                                   | Searches items for supplied search terms. | [Source](../lib/content-services/src/lib/search/components/search.component.ts) |
-| [Sites Dropdown component](content-services/components/sites-dropdown.component.md)                                                                                   | Displays a dropdown menu to show and interact with the sites of the current user. | [Source](../lib/content-services/src/lib/content-node-selector/site-dropdown/sites-dropdown.component.ts) |
-| [Tag Node Actions List component](content-services/components/tag-actions.component.md)                                                                               | Shows available actions for tags. | [Source](../lib/content-services/src/lib/tag/tag-actions/tag-actions.component.ts) |
-| [Tag List component](content-services/components/tag-list.component.md)                                                                                               | Shows tags for an item. | [Source](../lib/content-services/src/lib/tag/tag-list/tag-list.component.ts) |
-| [Tag Node List component](content-services/components/tag-node-list.component.md)                                                                                     | Shows tags for a node. | [Source](../lib/content-services/src/lib/tag/tag-node-list/tag-node-list.component.ts) |
-| [Tags Creator component](content-services/components/tags-creator.component.md)                                                                                       | Allows to create multiple tags. That component contains input and two lists. Top list is all created tags, bottom list is searched tags based on input's value. | [Source](../lib/content-services/src/lib/tag/tags-creator/tags-creator.component.ts) |
-| [Tree View component](content-services/components/tree-view.component.md)                                                                                             | Shows the folder and subfolders of a node as a tree view. | [Source](../lib/content-services/src/lib/tree-view/components/tree-view.component.ts) |
-| [Tree component](content-services/components/tree.component.md)                                                                                                       | Shows the nodes in tree structure, each node containing children is collapsible/expandable. Can be integrated with any datasource extending Tree service. | [Source](../lib/content-services/src/lib/tree/components/tree.component.ts) |
-| [Upload Button Component](content-services/components/upload-button.component.md)                                                                                     | Activates a file upload. | [Source](../lib/content-services/src/lib/upload/components/upload-button.component.ts) |
-| [Upload Drag Area Component](content-services/components/upload-drag-area.component.md)                                                                               | Adds a drag and drop area to upload files to ACS. | [Source](../lib/content-services/src/lib/upload/components/upload-drag-area.component.ts) |
+| Name | Description | Source link |
+| ---- | ----------- | ----------- |
+| [Add Permission Dialog Component](content-services/components/add-permission-dialog.component.md) | Displays a dialog to search for people or groups to add to the current node permissions. | [Source](../lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.ts) |
+| [Add Permission Panel Component](content-services/components/add-permission-panel.component.md) | Searches for people or groups to add to the current node permissions. | [Source](../lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.ts) |
+| [Add Permission Component](content-services/components/add-permission.component.md) | Searches for people or groups to add to the current node permissions. | [Source](../lib/content-services/src/lib/permission-manager/components/add-permission/add-permission.component.ts) |
+| [Alfresco Viewer component](content-services/components/alfresco-viewer.component.md) | Displays content from an ACS repository. | [Source](../lib/content-services/src/lib/viewer/components/alfresco-viewer.component.ts) |
+| [Aspect List Dialog component](content-services/components/aspect-list-dialog.component.md) | Allows a user to choose aspects for a node. | [Source](../lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.ts) |
+| [Aspect List component](content-services/components/aspect-list.component.md) | This component will show in an expandable row list with checkboxes all the aspect of a node, if a node id is given, or otherwise a complete list. |  |
+| The aspect are filtered via the app.config.json in this way : | [Source](../lib/content-services/src/lib/aspect-list/aspect-list.component.ts) |  |
+| [Breadcrumb Component](content-services/components/breadcrumb.component.md) | Indicates the current position within a navigation hierarchy. | [Source](../lib/content-services/src/lib/breadcrumb/breadcrumb.component.ts) |
+| [Content Action component](content-services/components/content-action.component.md) | Adds options to a Document List actions menu for a particular content type. | [Source](../lib/content-services/src/lib/document-list/components/content-action/content-action.component.ts) |
+| [Content Metadata Card component](content-services/components/content-metadata-card.component.md) | Displays and edits metadata related to a node. | [Source](../lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.ts) |
+| [Content Node Selector Panel component](content-services/components/content-node-selector-panel.component.md) | Opens a Content Node Selector  in its own dialog window. | [Source](../lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.ts) |
+| [Content Node Selector component](content-services/components/content-node-selector.component.md) | Allows a user to select items from a Content Services repository. | [Source](../lib/content-services/src/lib/content-node-selector/content-node-selector.component.ts) |
+| [Content Type Dialog component](content-services/components/content-type-dialog.component.md) | Confirm dialog when user changes content type of a node. | [Source](../lib/content-services/src/lib/content-type/content-type-dialog.component.ts) |
+| [Document List component](content-services/components/document-list.component.md) | Displays the documents from a repository. | [Source](../lib/content-services/src/lib/document-list/components/document-list.component.ts) |
+| [Dropdown Breadcrumb Component](content-services/components/dropdown-breadcrumb.component.md) | Indicates the current position within a navigation hierarchy using a dropdown menu. | [Source](../lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.ts) |
+| [File Uploading Dialog Component](content-services/components/file-uploading-dialog.component.md) | Shows a dialog listing all the files uploaded with the Upload Button or Drag Area components. | [Source](../lib/content-services/src/lib/upload/components/file-uploading-dialog.component.ts) |
+| [Node Comments Component](content-services/components/node-comments.component.md) | Displays comments from users involved in a specified content and allows an involved user to add a comment to a content. | [Source](../lib/content-services/src/lib/node-comments/node-comments.component.ts) |
+| [Permission List Component](content-services/components/permission-list.component.md) | Shows node permissions as a table. | [Source](../lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.ts) |
+| [Search check list component](content-services/components/search-check-list.component.md) | Implements a checklist widget for the Search Filter component. | [Source](../lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.ts) |
+| [Search Chip Input Component](content-services/components/search-chip-input.component.md) | Displays input for providing phrases display as "chips". | [Source](../lib/content-services/src/lib/search/components/search-chip-input/search-chip-input.component.ts) |
+| [Search Chip Autocomplete Input component](content-services/components/search-chip-autocomplete-input.component.md) | Displays an input with autocomplete options. | [Source](../lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.ts) |
+| [Search Chip List Component](content-services/components/search-chip-list.component.md) | Displays search criteria as a set of "chips". | [Source](../lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.ts) |
+| [Search control component](content-services/components/search-control.component.md) | Displays a input text that shows find-as-you-type suggestions. | [Source](../lib/content-services/src/lib/search/components/search-control.component.ts) |
+| [Search Date Range Component](content-services/components/search-date-range.component.md) | Displays a UI to configure different kinds of search criteria around date. Options are 'Anytime', 'In the last' and 'Between' | [Source](../lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.ts) |
+| [Search Date Range Tabbed component](content-services/components/search-date-range-tabbed.component.md) | Implements a tabbed advanced search widget for the Search Date Range component. | [Source](../lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range-tabbed.component.ts) |
+| [Search datetime range component](content-services/components/search-datetime-range.component.md) | Implements a search widget for the Search Filter component. | [Source](../lib/content-services/src/lib/search/components/search-datetime-range/search-datetime-range.component.ts) |
+| [Search Filter Autocomplete Chips component](content-services/components/search-filter-autocomplete-chips.component.md) | Implements a search widget for the Search Filter component. | [Source](../lib/content-services/src/lib/search/components/search-filter-autocomplete-chips/search-filter-autocomplete-chips.component.ts) |
+| [Search Filter Chips component](content-services/components/search-filter-chips.component.md) | Represents a chip based container component for custom search and faceted search settings. | [Source](../lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.ts) |
+| [Search Filter component](content-services/components/search-filter.component.md) | Represents a main container component for custom search and faceted search settings. | [Source](../lib/content-services/src/lib/search/components/search-filter/search-filter.component.ts) |
+| [Search Filter Tabbed component](content-services/components/search-filter-tabbed.component.md) | Represents a container component for creating tabbed layout. | [Source](../lib/content-services/src/lib/search/components/search-filter/search-filter.component.ts)                                         |
+| [Search Form component](content-services/components/search-form.component.md) | Search Form screenshot | [Source](../lib/content-services/src/lib/search/components/search-form/search-form.component.ts) |
+| [Search Logical Filter component](content-services/components/search-logical-filter.component.md) | Displays 3 chip inputs each representing different logical condition for search query. | [Source](../lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.ts) |
+| [Search Properties component](content-services/components/search-properties.component.md) | Allows to search by file size and type.| [Source](../lib/content-services/src/lib/search/components/search-properties/search-properties.component.ts) |
+| [Search number range component](content-services/components/search-number-range.component.md) | Implements a number range widget for the Search Filter component. | [Source](../lib/content-services/src/lib/search/components/search-number-range/search-number-range.component.ts) |
+| [Search radio component](content-services/components/search-radio.component.md) | Implements a radio button list widget for the Search Filter component. | [Source](../lib/content-services/src/lib/search/components/search-radio/search-radio.component.ts) |
+| [Search slider component](content-services/components/search-slider.component.md) | Implements a numeric slider widget for the Search Filter component. | [Source](../lib/content-services/src/lib/search/components/search-slider/search-slider.component.ts) |
+| [Search Sorting Picker Component](content-services/components/search-sorting-picker.component.md) | Provides an ability to select one of the predefined sorting definitions for search results: | [Source](../lib/content-services/src/lib/search/components/search-sorting-picker/search-sorting-picker.component.ts) |
+| [Search text component](content-services/components/search-text.component.md) | Implements a text input widget for the Search Filter component. | [Source](../lib/content-services/src/lib/search/components/search-text/search-text.component.ts) |
+| [Search component](content-services/components/search.component.md) | Searches items for supplied search terms. | [Source](../lib/content-services/src/lib/search/components/search.component.ts) |
+| [Sites Dropdown component](content-services/components/sites-dropdown.component.md) | Displays a dropdown menu to show and interact with the sites of the current user. | [Source](../lib/content-services/src/lib/content-node-selector/site-dropdown/sites-dropdown.component.ts) |
+| [Tag Node Actions List component](content-services/components/tag-actions.component.md) | Shows available actions for tags. | [Source](../lib/content-services/src/lib/tag/tag-actions.component.ts) |
+| [Tag List component](content-services/components/tag-list.component.md) | Shows tags for an item. | [Source](../lib/content-services/src/lib/tag/tag-list.component.ts) |
+| [Tag Node List component](content-services/components/tag-node-list.component.md) | Shows tags for a node. | [Source](../lib/content-services/src/lib/tag/tag-node-list.component.ts) |
+| [Tags Creator component](content-services/components/tags-creator.component.md) | Allows to create multiple tags. That component contains input and two lists. Top list is all created tags, bottom list is searched tags based on input's value. | [Source](../lib/content-services/src/lib/tag/tags-creator/tags-creator.component.ts) |
+| [Tree View component](content-services/components/tree-view.component.md) | Shows the folder and subfolders of a node as a tree view. | [Source](../lib/content-services/src/lib/tree-view/components/tree-view.component.ts) |
+| [Tree component](content-services/components/tree.component.md) | Shows the nodes in tree structure, each node containing children is collapsible/expandable. Can be integrated with any datasource extending Tree service. | [Source](../lib/content-services/src/lib/tree/components/tree.component.ts) |
+| [Upload Button Component](content-services/components/upload-button.component.md) | Activates a file upload. | [Source](../lib/content-services/src/lib/upload/components/upload-button.component.ts) |
+| [Upload Drag Area Component](content-services/components/upload-drag-area.component.md) | Adds a drag and drop area to upload files to ACS. | [Source](../lib/content-services/src/lib/upload/components/upload-drag-area.component.ts) |
 | [Upload Version Button Component (Workaround)](content-services/components/upload-version-button.component.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Activates a file version upload. | [Source](../lib/content-services/src/lib/upload/components/upload-version-button.component.ts) |
-| [Version Comparison Component](content-services/components/version-comparison.component.md)                                                                           | Displays the side by side comparison between the current target node (type, name, icon) and the new file that should update it's version. | [Source](../lib/content-services/src/lib/version-manager/version-comparison.component.ts) |
-| [Version List component](content-services/components/version-list.component.md) ![Experimental](docassets/images/ExperimentalIcon.png)                                | Displays the version history of a node in a Version Manager component. | [Source](../lib/content-services/src/lib/version-manager/version-list.component.ts) |
-| [Version Manager Component](content-services/components/version-manager.component.md) ![Experimental](docassets/images/ExperimentalIcon.png)                          | Displays the version history of a node with the ability to upload a new version. | [Source](../lib/content-services/src/lib/version-manager/version-manager.component.ts) |
-| [Version Upload component](content-services/components/version-upload.component.md) ![Experimental](docassets/images/ExperimentalIcon.png)                            | Displays the new version's minor/major changes and the optional comment of a node in a Version Manager component. | [Source](../lib/content-services/src/lib/version-manager/version-upload.component.ts) |
+| [Version Comparison Component](content-services/components/version-comparison.component.md) | Displays the side by side comparison between the current target node (type, name, icon) and the new file that should update it's version. | [Source](../lib/content-services/src/lib/version-manager/version-comparison.component.ts) |
+| [Version List component](content-services/components/version-list.component.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Displays the version history of a node in a Version Manager component. | [Source](../lib/content-services/src/lib/version-manager/version-list.component.ts) |
+| [Version Manager Component](content-services/components/version-manager.component.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Displays the version history of a node with the ability to upload a new version. | [Source](../lib/content-services/src/lib/version-manager/version-manager.component.ts) |
+| [Version Upload component](content-services/components/version-upload.component.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Displays the new version's minor/major changes and the optional comment of a node in a Version Manager component. | [Source](../lib/content-services/src/lib/version-manager/version-upload.component.ts) |

 ### Directives

@@ -341,13 +348,15 @@ for more information about installing and using the source code.
 | Name | Description | Source link |
 | ---- | ----------- | ----------- |
 | [Dialog component](content-services/dialogs/dialog.md) | Dialog styled wrapper. | [Source](../lib/content-services/src/lib/dialogs/dialog/dialog.component.ts) |
+| [Confirm dialog component](content-services/dialogs/confirm.dialog.md) | Requests a yes/no choice from the user. | [Source](../lib/content-services/src/lib/dialogs/confirm.dialog.ts) |
 | [Library dialog component](content-services/dialogs/library.dialog.md) | Creates a new Content Services document library/site. | [Source](../lib/content-services/src/lib/dialogs/library/library.dialog.ts) |

 ### Interfaces

 | Name | Description | Source link |
 | ---- | ----------- | ----------- |
-| [Base Card View Content Update interface](content-services/interfaces/base-card-view-content-update.interface.md) | Specifies required properties and methods for Card View Content Update service. Extends from BaseCardViewUpdate. | [Source](../lib/content-services/src/lib/interfaces/base-card-view-content-update.interface.ts) |  |
+| [Base Card View Content Update interface](content-services/interfaces/base-card-view-content-update.interface.md) | Specifies required properties and methods for Card View Content Update service. |  |
+| Extends from BaseCardViewUpdate. | [Source](../lib/content-services/src/lib/interfaces/base-card-view-content-update.interface.ts) |  |
 | [Search widget interface](content-services/interfaces/search-widget.interface.md) | Specifies required properties for Search filter component widgets. | [Source](../lib/content-services/src/lib/search/models/search-widget.interface.ts) |
 | [Content Metadata Custom Panel interface](content-services/interfaces/content-metadata-custom-panel.interface.md) | Specifies required properties for metadata custom panel. | [Source](../lib/content-services/src/lib/content-metadata/interfaces/content-metadata-custom-panel.interface.ts) |

@@ -370,7 +379,8 @@ for more information about installing and using the source code.
 | Name | Description | Source link |
 | ---- | ----------- | ----------- |
 | [Audit Service](content-services/services/audit.service.md) | Manages Audit apps and entries. | [Source](../lib/content-services/src/lib/audit/audit.service.ts) |
-| [Card View Content Update Service](content-services/services/card-view-content-update.service.md) | Manages Card View properties in the content services environment. Implements BaseCardViewContentUpdate. | [Source](../lib/content-services/src/lib/common/services/card-view-content-update.service.ts) |  |
+| [Card View Content Update Service](content-services/services/card-view-content-update.service.md) | Manages Card View properties in the content services environment. |  |
+| Implements BaseCardViewContentUpdate. | [Source](../lib/content-services/src/lib/common/services/card-view-content-update.service.ts) |  |
 | [Category tree datasource service](content-services/services/category-tree-datasource.service.md) | Datasource service for category tree. | [Source](../lib/content-services/src/lib/category/services/category-tree-datasource.service.ts) |
 | [Category service](content-services/services/category.service.md) | Manages categories in Content Services. | [Source](../lib/content-services/src/lib/category/services/category.service.ts) |
 | [Content Comment List Service](content-services/services/content-comment-list.service.md) | Gets user image for comments in Content Services. | [Source](../lib/content-services/src/lib/node-comments/services/content-comment-list.service.ts) |
@@ -4,12 +4,12 @@ Added: 6.0.0
 Status: Active
 ---

-# Alfresco Viewer Component
-
-`component`, `standalone`
+# [Alfresco Viewer component](../../../lib/content-services/src/lib/viewer/components/alfresco-viewer.component.ts "Defined in alfresco-viewer.component.ts")

 Displays content from an ACS repository.

+See it live: [Viewer Quickstart](https://embed.plnkr.co/iTuG1lFIXfsP95l6bDW6/)
+
 ## Contents

 -   [Basic usage](#basic-usage)
@@ -30,12 +30,6 @@ Displays content from an ACS repository.

 ## Basic usage

-Use the following standalone component import:
-
-```typescript
-import { AlfrescoViewerComponent } from '@alfresco/adf-content-services';
-```
-
 Using with node id:

 ```html
@@ -59,66 +53,65 @@ Note that if you have a URL which contains a shared link ID, you should extract
 ID portion and use it with the `sharedLinkId` property rather than using the whole
 URL with `urlFile`.

-### Transclusions
+### [Transclusions](../../user-guide/transclusion.md)

-The viewer lets you transclude content for the toolbar (and toolbar buttons),
+The [Alfresco Viewer component](viewer.component.md) lets you transclude content for the toolbar (and toolbar buttons),
 the sidebar, thumbnails, and the "Open with" and "More actions" menus.
-
-See [Transclusion](../../user-guide/transclusion.md) for more details.  
-See the [Custom layout](#custom-layout) section for full details of all available transclusions.  
+See the [Custom layout](#custom-layout) section for full details of all available tranclusions.

 ## Class members

 ### Properties

-| Name                 | Type                  | Default value | Description                                                                                                                 |
-|----------------------|-----------------------|---------------|-----------------------------------------------------------------------------------------------------------------------------|
-| allowDownload        | `boolean`             | true          | Toggles downloading.                                                                                                        |
-| allowFullScreen      | `boolean`             | true          | Toggles the 'Full Screen' feature.                                                                                          |
-| allowGoBack          | `boolean`             | true          | Allows `back` navigation.                                                                                                   |
-| closeButtonPosition  | `CloseButtonPosition` | `left`        | Set close button position right/left.                                                                                       |
-| hideInfoButton       | `boolean`             | false         | Toggles Info button.                                                                                                        |
-| allowLeftSidebar     | `boolean`             | false         | Allow the left the sidebar.                                                                                                 |
-| allowNavigate        | `boolean`             | false         | Toggles before/next navigation. You can use the arrow buttons to navigate between documents in the collection.              |
-| allowPrint           | `boolean`             | false         | Toggles printing.                                                                                                           |
-| allowRightSidebar    | `boolean`             | false         | Allow the right sidebar.                                                                                                    |
-| canNavigateBefore    | `boolean`             | true          | Toggles the "before" ("&lt;") button. Requires `allowNavigate` to be enabled.                                               |
-| canNavigateNext      | `boolean`             | true          | Toggles the next (">") button. Requires `allowNavigate` to be enabled.                                                      |
-| maxRetries           | `number`              | 30            | Number of times the Viewer will retry fetching content Rendition. There is a delay of at least one second between attempts. |
-| nodeId               | `string`              | null          | Node Id of the file to load.                                                                                                |
-| overlayMode          | `boolean`             | false         | If `true` then show the Viewer as a full page over the current content. Otherwise fit inside the parent div.                |
-| sharedLinkId         | `string`              | null          | Shared link id (to display shared file).                                                                                    |
-| showLeftSidebar      | `boolean`             | false         | Toggles left sidebar visibility. Requires `allowLeftSidebar` to be set to `true`.                                           |
-| showRightSidebar     | `boolean`             | false         | Toggles right sidebar visibility. Requires `allowRightSidebar` to be set to `true`.                                         |
-| showToolbar          | `boolean`             | true          | Hide or show the toolbar                                                                                                    |
-| showViewer           | `boolean`             | true          | Hide or show the viewer                                                                                                     |
-| sidebarLeftTemplate  | `TemplateRef<any>`    | null          | The template for the left sidebar. The template context contains the loaded node data.                                      |
-| sidebarRightTemplate | `TemplateRef<any>`    | null          | The template for the right sidebar. The template context contains the loaded node data.                                     |
-| versionId            | `string`              | null          | Version Id of the file to load.                                                                                             |
+| Name | Type | Default value | Description |
+| ---- | ---- | ------------- | ----------- |
+| allowDownload | `boolean` | true | Toggles downloading. |
+| allowFullScreen | `boolean` | true | Toggles the 'Full Screen' feature. |
+| allowGoBack | `boolean` | true | Allows `back` navigation. |
+| closeButtonPosition | `CloseButtonPosition` | `left` | Set close button position right/left. |
+| hideInfoButton | `boolean` | false | Toggles Info button. |
+| allowLeftSidebar | `boolean` | false | Allow the left the sidebar. |
+| allowNavigate | `boolean` | false | Toggles before/next navigation. You can use the arrow buttons to navigate between documents in the collection. |
+| allowPrint | `boolean` | false | Toggles printing. |
+| allowRightSidebar | `boolean` | false | Allow the right sidebar. |
+| canNavigateBefore | `boolean` | true | Toggles the "before" ("&lt;") button. Requires `allowNavigate` to be enabled. |
+| canNavigateNext | `boolean` | true | Toggles the next (">") button. Requires `allowNavigate` to be enabled. |
+| maxRetries | `number` | 30 | Number of times the Viewer will retry fetching content Rendition. There is a delay of at least one second between attempts. |
+| nodeId | `string` | null | Node Id of the file to load. |
+| overlayMode | `boolean` | false | If `true` then show the Viewer as a full page over the current content. Otherwise fit inside the parent div. |
+| sharedLinkId | `string` | null | Shared link id (to display shared file). |
+| showLeftSidebar | `boolean` | false | Toggles left sidebar visibility. Requires `allowLeftSidebar` to be set to `true`. |
+| showRightSidebar | `boolean` | false | Toggles right sidebar visibility. Requires `allowRightSidebar` to be set to `true`. |
+| showToolbar | `boolean` | true | Hide or show the toolbar |
+| showViewer | `boolean` | true | Hide or show the viewer |
+| sidebarLeftTemplate | [`TemplateRef`](https://angular.io/api/core/TemplateRef)`<any>` | null | The template for the left sidebar. The template context contains the loaded node data. |
+| sidebarRightTemplate | [`TemplateRef`](https://angular.io/api/core/TemplateRef)`<any>` | null | The template for the right sidebar. The template context contains the loaded node data. |
+| versionId | `string` | null | Version Id of the file to load. |

 ### Events

-| Name              | Type                                        | Description                                                 |
-|-------------------|---------------------------------------------|-------------------------------------------------------------|
-| invalidSharedLink | `EventEmitter<any>`                         | Emitted when the shared link used is not valid.             |
-| navigateBefore    | `EventEmitter<KeyboardEvent \| MouseEvent>` | Emitted when user clicks 'Navigate Before' ("&lt;") button. |
-| navigateNext      | `EventEmitter<KeyboardEvent \| MouseEvent>` | Emitted when user clicks 'Navigate Next' (">") button.      |
-| showViewerChange  | `EventEmitter<boolean>`                     | Emitted when the viewer close                               |
+| Name | Type | Description |
+| ---- | ---- | ----------- |
+| invalidSharedLink | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the shared link used is not valid. |
+| navigateBefore | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<KeyboardEvent \| MouseEvent>` | Emitted when user clicks 'Navigate Before' ("&lt;") button. |
+| navigateNext | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<KeyboardEvent \| MouseEvent>` | Emitted when user clicks 'Navigate Next' (">") button. |
+| showViewerChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>` | Emitted when the viewer close |

 ## Keyboard shortcuts

-| Name   | Description                           |
-|--------|---------------------------------------|
-| Esc    | Close the viewer (overlay mode only). |
-| Left   | Invoke 'Navigate before' action.      |
-| Right  | Invoke 'Navigate next' action.        |
-| Ctrl+F | Activate full-screen mode.            |
+| Name | Description |
+| ---- | ----------- |
+| Esc | Close the viewer (overlay mode only). |
+| Left | Invoke 'Navigate before' action. |
+| Right | Invoke 'Navigate next' action. |
+| Ctrl+F | Activate full-screen mode. |

 ## Details

 ### Integrating with the Document List component

-Integrating Viewer and [Document List](./document-list.component.md) components within your custom component:
+Below is the most simple integration of the Viewer and
+[Document List](../../content-services/components/document-list.component.md) components within your custom component:

 ```html
 <adf-document-list
@@ -154,7 +147,7 @@ export class OverlayViewerComponent {

 ### Supported file formats

-The viewer component consists of separate Views that handle particular file types or type families based on either a file extension or a mime type:
+The [Alfresco Viewer component](viewer.component.md) consists of separate Views that handle particular file types or type families based on either a file extension or a mime type:

 -   PDF View
    -   application/pdf
@@ -206,12 +199,13 @@ For the full list of supported types please refer to: [File types that support p

 Configure your webpack-enabled application with the PDF.js library as follows.

- Install pdfjs-dist
+1.  Install pdfjs-dist

 ```sh
 npm install pdfjs-dist
 ```
- Update `vendors.ts` by appending the following code. This will enable the viewer component
+
+2.  Update `vendors.ts` by appending the following code. This will enable the [Alfresco Viewer component](viewer.component.md)
    and compatibility mode for all browsers. It will also configure the web worker for the PDF.js
    library to render PDF files in the background:

@@ -223,7 +217,7 @@ pdfjsLib.PDFJS.workerSrc = './pdf.worker.js';
 require('pdfjs-dist/web/pdf_viewer.js');
 ```

- Update the `plugins` section of the `webpack.common.js` file with the following lines:
+3.  Update the `plugins` section of the `webpack.common.js` file with the following lines:

 ```js
 new CopyWebpackPlugin([
@@ -239,12 +233,12 @@ new CopyWebpackPlugin([

 #### Internal extension mechanism

-The Viewer supports dynamically-loaded viewer preview extensions, to know more about it [Preview Extension component](../../extensions/components/preview-extension.component.md). 
+The Viewer supports dynamically-loaded viewer preview extensions, to know more about it [Preview Extension component](../../extensions/components/preview-extension.component.md). This 

-#### Code extension mechanism
+#### Code extension mechanism]

 You can define your own custom handler to override supported file formats or handle other file formats that are not yet supported by
-the component. Below is an example that shows how to use the `adf-viewer-extension`
+the [Alfresco Viewer component](viewer.component.md). Below is an example that shows how to use the `adf-viewer-extension`
 to handle 3D data files:

 ```html
@@ -262,7 +256,7 @@ to handle 3D data files:
 </adf-alfresco-viewer> 
 ```

-> this example requires `ng2-3d-editor` dependency
+Note: you need to add the `ng2-3d-editor` dependency to your `package.json` file to make the example above work.

 You need to keep all instances of `adf-viewer-extension` inside `viewerExtensions` template, also you can define multiple `adf-viewer-extension` templates if required:

@@ -290,7 +284,7 @@ You need to keep all instances of `adf-viewer-extension` inside `viewerExtension

 ### Custom layout

-The viewer component lets you transclude custom content in several different places as
+The [Alfresco Viewer Component](viewer.component.md) lets you transclude custom content in several different places as
 explained in the sections below.

 #### Custom toolbar
@@ -335,7 +329,7 @@ The result should look like this:

 #### Custom sidebar

-The viewer component also supports custom sidebar components and layouts.
+The [Alfresco Viewer Component](viewer.component.md) also supports custom sidebar components and layouts.
 Set the `allowRightSidebar` property to `true` to enable this feature.

 The custom sidebar can be injected in two different ways. The first way is to use
@@ -378,6 +372,8 @@ import { Component, Input } from '@angular/core';
 })
 export class CustomThumbnailsComponent {
    @Input() pdfViewer: any;
+
+    ...
 }
 ```

@@ -449,23 +445,15 @@ You can enable a custom "More actions" menu by providing at least one action ins
 You can set a default zoom scaling value for pdf viewer by adding the following code in `app.config.json`.
 Note: For the pdf viewer the value has to be within the range of 25 - 1000.

-```json
-{
-    "adf-alfresco-viewer": {
-        "pdf-viewer-scaling": 150
-    }
+"adf-alfresco-viewer": {
+"pdf-viewer-scaling": 150
 }
-```

 In the same way you can set a default zoom scaling value for the image viewer by adding the following code in `app.config.json`.

-```json
-{
-    "adf-alfresco-viewer": {
-        "image-viewer-scaling": 150
-    }
+"adf-alfresco-viewer": {
+"image-viewer-scaling": 150
 }
-```

 By default the viewer's zoom scaling is set to 100%.

@@ -477,6 +465,7 @@ true.

 ```html
 <adf-alfresco-viewer [allowPrint]="true">
+    ...
 </adf-alfresco-viewer>
 ```

@@ -23,16 +23,15 @@ Indicates the current position within a navigation hierarchy.

 ### Properties

-| Name                  | Type                                                                                    | Default value | Description                                                                                                                                                                                                                                                              |
-|-----------------------|-----------------------------------------------------------------------------------------|---------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| folderNode            | `Node`                                                                                  | null          | Active node, builds UI based on folderNode.path.elements collection.                                                                                                                                                                                                     |
-| maxItems              | `number`                                                                                |               | Maximum number of nodes to display before wrapping them with a dropdown element.                                                                                                                                                                                         |
-| readOnly              | `boolean`                                                                               | false         | If true, prevents the user from navigating away from the active node.                                                                                                                                                                                                    |
-| root                  | `string`                                                                                | null          | (optional) Name of the root element of the breadcrumb. You can use this property to rename "Company Home" to "Personal Files" for example. You can use an i18n resource key for the property value.                                                                      |
-| rootId                | `string`                                                                                | null          | (optional) The id of the root element. You can use this property to set a custom element the breadcrumb should start with.                                                                                                                                               |
-| target                | [`DocumentListComponent`](../../content-services/components/document-list.component.md) |               | (optional) [Document List component](../../content-services/components/document-list.component.md) to operate with. The list will update when the breadcrumb is clicked.                                                                                                 |
-| transform             | `Function`                                                                              |               | Transformation to be performed on the chosen/folder node before building the breadcrumb UI. Can be useful when custom formatting is needed for the breadcrumb. You can change the path elements from the node that are used to build the breadcrumb using this function. |
-| selectedRowItemsCount | `number`                                                                                | 0             | Number of table rows that are currently selected.                                                                                                                                                                                                                        |
+| Name | Type | Default value | Description |
+| ---- | ---- | ------------- | ----------- |
+| folderNode | `Node` | null | Active node, builds UI based on folderNode.path.elements collection. |
+| maxItems | `number` |  | Maximum number of nodes to display before wrapping them with a dropdown element. |
+| readOnly | `boolean` | false | If true, prevents the user from navigating away from the active node. |
+| root | `string` | null | (optional) Name of the root element of the breadcrumb. You can use this property to rename "Company Home" to "Personal Files" for example. You can use an i18n resource key for the property value. |
+| rootId | `string` | null | (optional) The id of the root element. You can use this property to set a custom element the breadcrumb should start with. |
+| target | [`DocumentListComponent`](../../content-services/components/document-list.component.md) |  | (optional) [Document List component](../../content-services/components/document-list.component.md) to operate with. The list will update when the breadcrumb is clicked. |
+| transform | `Function` |  | Transformation to be performed on the chosen/folder node before building the breadcrumb UI. Can be useful when custom formatting is needed for the breadcrumb. You can change the path elements from the node that are used to build the breadcrumb using this function. |

 ### Events

@@ -66,7 +66,6 @@ Displays the documents from a repository.
 | contentActionsPosition | `string` | "right" | Position of the content actions dropdown menu. Can be set to "left" or "right". |
 | contextMenuActions | `boolean` | false | Toggles context menus for each row |
 | currentFolderId | `string` | null | The ID of the folder node to display or a reserved string alias for special sources |
-| displayCheckboxesOnHover | `boolean` | false | Enables checkboxes in datatable rows being displayed on hover only. | 
 | emptyFolderImageUrl | `string` |  | Custom image for empty folder. Default value: './assets/images/empty_doc_lib.svg' |
 | filterValue | `any` |  | Initial value for filter. |
 | headerFilters | `boolean` | false | Toggles the header filters mode. |
@@ -99,20 +98,19 @@ Displays the documents from a repository.

 ### Events

-| Name                      | Type                                                                                                                                                                                  | Description                                                                                                                                                                                             |
-|---------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| error                     | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>`                                                                                                                     | Emitted when the API fails to get the Document List data                                                                                                                                                |
-| filterSelection           | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FilterSearch`](../../../lib/content-services/src/lib/search/models/filter-search.interface.ts)`[]>`                    | Emitted when a filter value is selected                                                                                                                                                                 |
-| folderChange              | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntryEvent`](../../../lib/content-services/src/lib/document-list/components/node.event.ts)`>`                      | Emitted when the current display folder changes                                                                                                                                                         |
-| nodeClick                 | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntityEvent`](../../../lib/content-services/src/lib/document-list/components/node.event.ts)`>`                     | Emitted when the user clicks a list node                                                                                                                                                                |
-| nodeDblClick              | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntityEvent`](../../../lib/content-services/src/lib/document-list/components/node.event.ts)`>`                     | Emitted when the user double-clicks a list node                                                                                                                                                         |
-| nodeSelected              | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntry`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeEntry.md)`[]>` | Emitted when the node selection change                                                                                                                                                                  |
-| preview                   | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntityEvent`](../../../lib/content-services/src/lib/document-list/components/node.event.ts)`>`                     | Emitted when the user acts upon files with either single or double click (depends on `navigation-mode`). Useful for integration with the [Viewer component](../../core/components/viewer.component.md). |
-| ready                     | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodePaging`](https://github.com/Alfresco/alfresco-js-api/blob/develop/src/api/content-rest-api/docs/NodePaging.md)`>`  | Emitted when the Document List has loaded all items and is ready for use                                                                                                                                |
-| columnsVisibilityChanged  | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<{ [columnId: string]: boolean } \| undefined>`                                                                            | Emitted when columns visibility change                                                                                                                                                                  |
-| columnsWidthChanged       | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<{ [columnId: string]: number } \| undefined>`                                                                             | Emitted when columns width change                                                                                                                                                                       |
-| columnsOrderChanged       | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`< string[] \| undefined>`                                                                                                  | Emitted when columns order change                                                                                                                                                                       |
-| selectedItemsCountChanged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`< number \| undefined>`                                                                                                    | Emitted when items row count change                                                                                                                                                                     |
+| Name | Type | Description |
+| ---- | ---- | ----------- |
+| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the API fails to get the Document List data |
+| filterSelection | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FilterSearch`](../../../lib/content-services/src/lib/search/models/filter-search.interface.ts)`[]>` | Emitted when a filter value is selected |
+| folderChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntryEvent`](../../../lib/content-services/src/lib/document-list/components/node.event.ts)`>` | Emitted when the current display folder changes |
+| nodeClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntityEvent`](../../../lib/content-services/src/lib/document-list/components/node.event.ts)`>` | Emitted when the user clicks a list node |
+| nodeDblClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntityEvent`](../../../lib/content-services/src/lib/document-list/components/node.event.ts)`>` | Emitted when the user double-clicks a list node |
+| nodeSelected | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntry`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeEntry.md)`[]>` | Emitted when the node selection change |
+| preview | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntityEvent`](../../../lib/content-services/src/lib/document-list/components/node.event.ts)`>` | Emitted when the user acts upon files with either single or double click (depends on `navigation-mode`). Useful for integration with the [Viewer component](../../core/components/viewer.component.md). |
+| ready | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodePaging`](https://github.com/Alfresco/alfresco-js-api/blob/develop/src/api/content-rest-api/docs/NodePaging.md)`>` | Emitted when the Document List has loaded all items and is ready for use |
+| columnsVisibilityChanged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<{ [columnId: string]: boolean } \| undefined>` | Emitted when columns visibility change |
+| columnsWidthChanged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<{ [columnId: string]: number } \| undefined>` | Emitted when columns width change |
+| columnsOrderChanged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`< string[] \| undefined>` | Emitted when columns order change |

 ## Details

@@ -96,7 +96,7 @@ However, you can use a more complex template if necessary:
                class="adf-search-autocomplete-item"
                (click)="elementClicked(item)"
                (keyup.enter)="elementClicked(item)">
-                <mat-icon matListItemLine>
+                <mat-icon mat-list-icon>
                    <img [src]="getMimeTypeIcon(item)" />
                </mat-icon>
                    <h4 mat-line id="result_name_{{idx}}"
@@ -5,7 +5,7 @@ Status: Active
 Last reviewed: 2018-11-19
 ---

-# [Tag Node Actions List component](../../../lib/content-services/src/lib/tag/tag-actions/tag-actions.component.ts "Defined in tag-actions.component.ts")
+# [Tag Node Actions List component](../../../lib/content-services/src/lib/tag/tag-actions.component.ts "Defined in tag-actions.component.ts")

 Shows available actions for tags.

@@ -5,7 +5,7 @@ Status: Active
 Last reviewed: 2018-11-14
 ---

-# [Tag List component](../../../lib/content-services/src/lib/tag/tag-list/tag-list.component.ts "Defined in tag-list.component.ts")
+# [Tag List component](../../../lib/content-services/src/lib/tag/tag-list.component.ts "Defined in tag-list.component.ts")

 Shows tags for an item.

@@ -5,7 +5,7 @@ Status: Active
 Last reviewed: 2018-11-19
 ---

-# [Tag Node List component](../../../lib/content-services/src/lib/tag/tag-node-list/tag-node-list.component.ts "Defined in tag-node-list.component.ts")
+# [Tag Node List component](../../../lib/content-services/src/lib/tag/tag-node-list.component.ts "Defined in tag-node-list.component.ts")

 Shows tags for a node.

--- a/Show More
+++ b/Show More
@@ -1 +1 @@
 .20.3
 .18.2