lightweight actions service

.eslintrc.js

@@ -1,6 +1,5 @@
 module.exports = {
     root: true,
-
     ignorePatterns: [
         'projects/**/*',
         '**/node_modules/**/*',
@@ -11,9 +10,7 @@ module.exports = {
         '**/scripts',
         '**/docs'
     ],
-
-    plugins: ['@nx'],
-
+    plugins: ['@nrwl/nx'],
     overrides: [
         {
             files: ['*.ts'],
@@ -22,10 +19,11 @@ module.exports = {
                 createDefaultProgram: true
             },
             extends: [
-                'plugin:@nx/typescript',
-                'plugin:@nx/angular',
+                'plugin:@nrwl/nx/typescript',
+                'plugin:@nrwl/nx/angular',
                 'plugin:@cspell/recommended',
-                'plugin:@angular-eslint/recommended',
+                'plugin:@angular-eslint/ng-cli-compat',
+                'plugin:@angular-eslint/ng-cli-compat--formatting-add-on',
                 'plugin:@angular-eslint/template/process-inline-templates',
                 'plugin:jsdoc/recommended-typescript-error'
             ],
@@ -178,8 +176,7 @@ module.exports = {
                         ' * limitations under the License.',
                         ' */'
                     ]
-                ],
-                '@nx/dependency-checks': 'warn'
+                ]
             }
         },
         {
@@ -199,7 +196,5 @@ module.exports = {
             extends: ['plugin:@angular-eslint/template/process-inline-templates'],
             excludedFiles: ['*.spec.ts']
         }
-    ],
-
-    extends: ['plugin:storybook/recommended']
+    ]
 };

.eslintrc.json

@@ -1,3 +0,0 @@
-{
-  "extends": ["./.eslintrc.js"]
-}

.github/actions/artifact-append/action.yml

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

.github/actions/artifact-extract/action.yml

@@ -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 }}-*

.github/actions/artifact-initialize/action.yml

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

.github/actions/e2e/action.yml

@@ -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-*

.github/actions/setup/action.yml

@@ -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

.github/workflows/codeql-analysis.yml

@@ -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

.github/workflows/pull-request.yml

@@ -121,10 +121,10 @@ jobs:
          fetch-depth: 0
 
       - name: Get branch name
-        uses: Alfresco/alfresco-build-tools/.github/actions/get-branch-name@76affd16a4dd9a440cf66bf42656b1d826e8dfc2 # v5.34.0
+        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@76affd16a4dd9a440cf66bf42656b1d826e8dfc2 # v5.34.0
+        uses: Alfresco/alfresco-build-tools/.github/actions/get-commit-message@a288b9efdaa50413573b2e130896d906478b8e50 # v5.31.0
 
       - name: ci:force flag parser
         shell: bash

.github/workflows/release.yml

@@ -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>"

.gitignore

@@ -35,4 +35,3 @@ licenses.txt
 .DS_Store
 .angular
 NX
-.nx

.lintstagedrc.json

@@ -1,4 +1,4 @@
 {
   "*.{ts,js}": ["prettier --write", "eslint"],
-  "*.{css,scss}": ["prettier --write", "stylelint --fix"]
+  "*.{css,scss}": ["prettier --write", "stylelint"]
 }

.nvmrc

@@ -1 +1 @@
-18.20.3
+18.18.2

.storybook/main.js

@@ -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: ['@chromatic-com/storybook']
+    addons: ['@storybook/addon-essentials'],
+    framework: '@storybook/angular',
+    staticDirs: [ { from: '../../../demo-shell/src/app.config.json', to: 'app.config.json' } ],
+    core: { builder: 'webpack5' }
 };

.storybook/preview.js

@@ -2,4 +2,3 @@ export const parameters = {
     docs: { inlineStories: true },
     controls: { expanded: true }
 };
-export const tags = ['autodocs'];

.vscode/settings.json

@@ -31,6 +31,5 @@
     "postcss",
     "scss"
   ],
-  "editor.guides.indentation": true,
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "editor.guides.indentation": true
 }

decorate-angular-cli.js

@@ -21,35 +21,35 @@
  * - Delete and reinstall your node_modules
  */
 
-const fs = require('fs');
-const os = require('os');
-const cp = require('child_process');
-const isWindows = os.platform() === 'win32';
+const fs = require("fs");
+const os = require("os");
+const cp = require("child_process");
+const isWindows = os.platform() === "win32";
 const output = require('nx/src/utils/output').output;
 
 /**
  * Paths to files being patched
  */
-const angularCLIInitPath = 'node_modules/@angular/cli/lib/cli/index.js';
+const angularCLIInitPath = "node_modules/@angular/cli/lib/cli/index.js";
 
 /**
  * Patch index.js to warn you if you invoke the undecorated Angular CLI.
  */
 function patchAngularCLI(initPath) {
-    const angularCLIInit = fs.readFileSync(initPath, 'utf-8').toString();
+  const angularCLIInit = fs.readFileSync(initPath, "utf-8").toString();
 
-    if (!angularCLIInit.includes('NX_CLI_SET')) {
-        fs.writeFileSync(
-            initPath,
-            `
+  if (!angularCLIInit.includes("NX_CLI_SET")) {
+    fs.writeFileSync(
+      initPath,
+      `
 if (!process.env['NX_CLI_SET']) {
-  const { output } = require('@nx/workspace');
+  const { output } = require('@nrwl/workspace');
   output.warn({ title: 'The Angular CLI was invoked instead of the Nx CLI. Use "npx ng [command]" or "nx [command]" instead.' });
 }
 ${angularCLIInit}
     `
-        );
-    }
+    );
+  }
 }
 
 /**
@@ -57,37 +57,39 @@ ${angularCLIInit}
  * invoke the Nx CLI and get the benefits of computation caching.
  */
 function symlinkNgCLItoNxCLI() {
-    try {
-        const ngPath = './node_modules/.bin/ng';
-        const nxPath = './node_modules/.bin/nx';
-        if (isWindows) {
-            /**
-             * This is the most reliable way to create symlink-like behavior on Windows.
-             * Such that it works in all shells and works with npx.
-             */
-            ['', '.cmd', '.ps1'].forEach((ext) => {
-                fs.writeFileSync(ngPath + ext, fs.readFileSync(nxPath + ext));
-            });
-        } else {
-            // If unix-based, symlink
-            cp.execSync(`ln -sf ./nx ${ngPath}`);
-        }
-    } catch (e) {
-        output.error({
-            title: 'Unable to create a symlink from the Angular CLI to the Nx CLI:' + e.message
-        });
-        throw e;
+  try {
+    const ngPath = "./node_modules/.bin/ng";
+    const nxPath = "./node_modules/.bin/nx";
+    if (isWindows) {
+      /**
+       * This is the most reliable way to create symlink-like behavior on Windows.
+       * Such that it works in all shells and works with npx.
+       */
+      ["", ".cmd", ".ps1"].forEach(ext => {
+        fs.writeFileSync(ngPath + ext, fs.readFileSync(nxPath + ext));
+      });
+    } else {
+      // If unix-based, symlink
+      cp.execSync(`ln -sf ./nx ${ngPath}`);
     }
+  } catch (e) {
+    output.error({
+      title:
+        "Unable to create a symlink from the Angular CLI to the Nx CLI:" +
+        e.message
+    });
+    throw e;
+  }
 }
 
 try {
-    symlinkNgCLItoNxCLI();
-    patchAngularCLI(angularCLIInitPath);
-    output.log({
-        title: 'Angular CLI has been decorated to enable computation caching.'
-    });
+  symlinkNgCLItoNxCLI();
+  patchAngularCLI(angularCLIInitPath);
+  output.log({
+    title: "Angular CLI has been decorated to enable computation caching."
+  });
 } catch (e) {
-    output.error({
-        title: 'Decoration of the Angular CLI did not complete successfully'
-    });
+  output.error({
+    title: "Decoration of the Angular CLI did not complete successfully"
+  });
 }

demo-shell/project.json

@@ -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"]
-      }
-    }
-  }
-}

demo-shell/src/app.config.json

@@ -622,7 +622,7 @@
             "unit": "Byte",
             "field": "cm:content.size",
             "min": 0,
-            "max": 4000,
+            "max": 18,
             "step": 1,
             "thumbLabel": true
           }

demo-shell/src/app/app.module.ts

@@ -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,23 +25,62 @@ 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(),
@@ -49,9 +89,47 @@ import { CoreAutomationService } from '../testing/automation.service';
         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')

demo-shell/src/app/app.routes.ts

@@ -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',

demo-shell/src/app/components/app-layout/app-layout.component.html

@@ -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>

demo-shell/src/app/components/app-layout/app-layout.component.ts

@@ -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' }
     ];

demo-shell/src/app/components/app-layout/cloud/form-demo/cloud-form-demo.component.html

@@ -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>

demo-shell/src/app/components/app-layout/cloud/form-demo/cloud-form-demo.component.scss

@@ -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 {

demo-shell/src/app/components/app-layout/cloud/form-demo/cloud-form-demo.component.ts

@@ -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 }]
 })

demo-shell/src/app/components/app-layout/user-info/content-user-info/content-user-info.component.html

@@ -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">

demo-shell/src/app/components/app-layout/user-info/content-user-info/content-user-info.component.spec.ts

@@ -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();
+            });
+        });
+    });
+});

demo-shell/src/app/components/app-layout/user-info/content-user-info/content-user-info.component.ts

@@ -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
@@ -83,7 +77,7 @@ export class ContentUserInfoComponent implements OnDestroy {
 
     private destroy$ = new Subject();
 
-    constructor(private peopleContentService: PeopleContentService) { /* empty */ }
+    constructor(private peopleContentService: PeopleContentService) {}
 
     ngOnDestroy(): void {
         this.destroy$.next(true);

demo-shell/src/app/components/app-layout/user-info/content-user-info/content-user-info.module.ts

@@ -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 {}

demo-shell/src/app/components/app-layout/user-info/content-user-info/public-api.ts

@@ -16,3 +16,5 @@
  */
 
 export * from './content-user-info.component';
+
+export * from './content-user-info.module';

demo-shell/src/app/components/app-layout/user-info/process-user-info/process-user-info.component.html

@@ -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">

demo-shell/src/app/components/app-layout/user-info/process-user-info/process-user-info.component.scss

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

demo-shell/src/app/components/app-layout/user-info/process-user-info/process-user-info.component.ts

@@ -86,7 +86,7 @@ export class ProcessUserInfoComponent implements OnDestroy {
 
     private destroy$ = new Subject();
 
-    constructor(private peopleProcessService: PeopleProcessService, private peopleContentService: PeopleContentService) { /* empty */ }
+    constructor(private peopleProcessService: PeopleProcessService, private peopleContentService: PeopleContentService) {}
 
     ngOnDestroy(): void {
         this.destroy$.next(true);

demo-shell/src/app/components/app-layout/user-info/process-user-info/public-api.ts

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

demo-shell/src/app/components/app-layout/user-info/user-info.component.ts

@@ -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 {
@@ -60,7 +48,7 @@ export class UserInfoComponent implements OnInit {
         private identityUserService: IdentityUserService,
         private basicAlfrescoAuthService: BasicAlfrescoAuthService,
         private authService: AuthenticationService
-    ) { /* empty */ }
+    ) {}
 
     ngOnInit() {
         this.getUserInfo();

demo-shell/src/app/components/card-view/card-view.component.ts

@@ -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[];

demo-shell/src/app/components/card-view/card-view.module.ts

@@ -15,15 +15,25 @@
  * limitations under the License.
  */
 
-import { HoldPagingList } from './holdPagingList';
+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';
 
-export class HoldPaging {
-    list?: HoldPagingList;
-
-    constructor(input?: Partial<HoldPaging>) {
-        if (input) {
-            Object.assign(this, input);
-            this.list = input.list ? new HoldPagingList(input.list) : undefined;
-        }
+const routes: Routes = [
+    {
+      path: '',
+      component: CardViewComponent
     }
-}
+];
+
+@NgModule({
+    imports: [
+        CommonModule,
+        CoreModule,
+        RouterModule.forChild(routes)
+    ],
+    declarations: [CardViewComponent]
+})
+export class AppCardViewModule {}

demo-shell/src/app/components/cloud/apps-cloud-demo.component.ts

@@ -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}`]);
     }
 }

demo-shell/src/app/components/cloud/cloud-filters-demo.component.ts

@@ -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;
 
@@ -49,7 +46,7 @@ export class CloudFiltersDemoComponent implements OnInit {
         private router: Router,
         private route: ActivatedRoute,
         private cloudProcessFiltersService: CloudProcessFiltersService
-    ) { /* empty */ }
+    ) {}
 
     ngOnInit() {
         this.currentTaskFilter$ = this.cloudLayoutService.taskFilter$;
@@ -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});
         }
     }
 

demo-shell/src/app/components/cloud/cloud-layout.component.scss

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

demo-shell/src/app/components/cloud/cloud-layout.component.ts

@@ -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
@@ -59,7 +29,7 @@ export class CloudLayoutComponent implements OnInit {
     appName: string;
     filterName: string;
 
-    constructor(private router: Router, private route: ActivatedRoute, private cloudLayoutService: CloudLayoutService) { /* empty */ }
+    constructor(private router: Router, private route: ActivatedRoute, private cloudLayoutService: CloudLayoutService) {}
 
     ngOnInit() {
         let root: string = '';

demo-shell/src/app/components/cloud/cloud-viewer.component.html

@@ -1,2 +1,3 @@
-<adf-alfresco-viewer [nodeId]="nodeId">
+<adf-alfresco-viewer
+    [nodeId]="nodeId">
 </adf-alfresco-viewer>

demo-shell/src/app/components/cloud/cloud-viewer.component.ts

@@ -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) => {

demo-shell/src/app/components/cloud/custom-form-components/custom-editor.component.ts

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

demo-shell/src/app/components/cloud/process-cloud-layout.component.ts

@@ -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,

demo-shell/src/app/components/cloud/process-details-cloud-demo.component.ts

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

demo-shell/src/app/components/cloud/processes-cloud-demo.component.ts

@@ -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) {

demo-shell/src/app/components/cloud/shared/cloud-settings.component.html

@@ -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>

demo-shell/src/app/components/cloud/shared/cloud-settings.component.ts

@@ -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() {

demo-shell/src/app/components/cloud/shared/cloud.shared.module.ts

@@ -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 {}

demo-shell/src/app/components/cloud/start-process-cloud-demo.component.ts

@@ -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) => {

demo-shell/src/app/components/cloud/start-task-cloud-demo.component.ts

@@ -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) => {

demo-shell/src/app/components/cloud/task-details-cloud-demo.component.ts

@@ -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 {
@@ -75,7 +75,7 @@ export class TaskDetailsCloudDemoComponent {
         try {
             errorMessage = JSON.parse(error).message || JSON.parse(error).entry?.message;
             errorMessage = JSON.parse(errorMessage).message;
-        } catch { /* empty */ }
+        } catch {}
         this.notificationService.showError(errorMessage || error);
     }
 }

demo-shell/src/app/components/cloud/tasks-cloud-demo.component.ts

@@ -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();
     }
 
@@ -137,11 +134,12 @@ export class TasksCloudDemoComponent implements OnInit, OnDestroy {
     }
 
     onFilterChange(filter: any) {
-        this.editedFilter = Object.assign({ /* empty */ }, filter);
+        this.editedFilter = Object.assign({}, filter);
         this.sortArray = [new TaskListCloudSortingModel({ orderBy: this.editedFilter.sort, direction: this.editedFilter.order })];
     }
 
     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};
     }
 }

demo-shell/src/app/components/error/demo-error.component.ts

@@ -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(['/']);
     }
+
 }

demo-shell/src/app/components/file-view/file-view.component.ts

@@ -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
 })
@@ -82,7 +56,7 @@ export class FileViewComponent implements OnInit {
         private contentServices: ContentService,
         private preview: PreviewService,
         private notificationService: NotificationService
-    ) { /* empty */ }
+    ) {}
 
     ngOnInit() {
         this.route.params.subscribe((params) => {

demo-shell/src/app/components/file-view/file-view.module.ts

@@ -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 {
+
+}

demo-shell/src/app/components/files/files.component.ts

@@ -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,
@@ -271,7 +191,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
         private contentMetadataService: ContentMetadataService,
         private dialogAspectListService: DialogAspectListService,
         private nodeService: NodesApiService
-    ) { /* empty */ }
+    ) {}
 
     showFile(event) {
         const entry = event.value.entry;
@@ -545,7 +465,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
     }
 
     navigateToFilter(activeFilters: FilterSearch[]) {
-        const objectFromMap = { /* empty */ };
+        const objectFromMap = {};
         activeFilters.forEach((filter: FilterSearch) => {
             let paramValue = null;
             if (filter.value?.from && filter.value.to) {

demo-shell/src/app/components/files/version-manager-dialog-adapter.component.ts

@@ -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 {

demo-shell/src/app/components/form/form.component.html

@@ -1,4 +1,4 @@
-<div class="app-main-content">
+<div class="main-content">
 
     <mat-tab-group [animationDuration]="'0'">
         <mat-tab label="Form">

demo-shell/src/app/components/form/form.component.scss

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

demo-shell/src/app/components/form/form.component.ts

@@ -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);

demo-shell/src/app/components/home/home.component.ts

@@ -24,4 +24,4 @@ import { Component, ViewEncapsulation } from '@angular/core';
     styleUrls: ['./home.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
-export class HomeComponent { /* empty */ }
+export class HomeComponent {}

demo-shell/src/app/components/login/login.component.ts

@@ -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 {
+}

demo-shell/src/app/components/login/login.module.ts

@@ -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 {}

demo-shell/src/app/components/logout/logout.component.ts

@@ -16,13 +16,10 @@
  */
 
 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']
 })
-export class LogoutComponent { /* empty */ }
+export class LogoutComponent {}

demo-shell/src/app/components/permissions/demo-permissions.component.ts

@@ -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) {

demo-shell/src/app/components/process-list-demo/process-list-demo.component.ts

@@ -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`]
 })
@@ -74,7 +54,7 @@ export class ProcessListDemoComponent implements OnInit, OnDestroy {
 
     private onDestroy$ = new Subject<boolean>();
 
-    constructor(private route: ActivatedRoute, private formBuilder: UntypedFormBuilder) { /* empty */ }
+    constructor(private route: ActivatedRoute, private formBuilder: UntypedFormBuilder) {}
 
     ngOnInit() {
         this.resetQueryParameters();

demo-shell/src/app/components/process-list-demo/process-list.module.ts

@@ -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 {}

demo-shell/src/app/components/process-service/apps-view.component.ts

@@ -18,16 +18,13 @@
 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 {
-    constructor(private router: Router) { /* empty */ }
+    constructor(private router: Router) {}
 
     onAppClicked(app: AppDefinitionRepresentation) {
         this.router.navigate(['/activiti/apps', app.id || 0, 'tasks']);

demo-shell/src/app/components/process-service/form-node-viewer.component.ts

@@ -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'];
         });
     }
+
 }

demo-shell/src/app/components/process-service/form-viewer.component.ts

@@ -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) => {

demo-shell/src/app/components/process-service/process-attachments.component.ts

@@ -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 }],

demo-shell/src/app/components/process-service/process-service.component.html

@@ -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"

demo-shell/src/app/components/process-service/process-service.component.ts

@@ -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,
@@ -250,7 +216,7 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
     }
 
     applyTaskFilter(filter: UserTaskFilterRepresentation) {
-        this.taskFilter = Object.assign({ /* empty */ }, filter);
+        this.taskFilter = Object.assign({}, filter);
 
         if (filter && this.taskList) {
             this.taskList.hasCustomDataSource = false;

demo-shell/src/app/components/process-service/task-attachments.component.ts

@@ -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,

demo-shell/src/app/components/search/search-bar.component.ts

@@ -19,18 +19,14 @@ 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']
 })
 export class SearchBarComponent {
-    constructor(public router: Router, private preview: PreviewService) { /* empty */ }
+    constructor(public router: Router, private preview: PreviewService) {}
 
     /**
      * Called when the user submits the search, e.g. hits enter or clicks submit

demo-shell/src/app/components/search/search-filter-chips.component.ts

@@ -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;
@@ -184,7 +159,7 @@ export class AppSearchFilterChipsComponent implements OnInit, OnDestroy {
     }
 
     private updateSetting(field) {
-        field.settings = field.settings ?? { /* empty */ };
+        field.settings = field.settings ?? {};
         field.settings.allowUpdateOnChange = false;
         field.settings.hideDefaultAction = true;
     }

demo-shell/src/app/components/search/search-result.component.ts

@@ -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 }] );
     }
 }

demo-shell/src/app/components/settings/host-settings.component.ts

@@ -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'],
@@ -83,7 +66,7 @@ export class HostSettingsComponent implements OnInit {
         private alfrescoApiService: AlfrescoApiService,
         private appConfig: AppConfigService,
         private authenticationService: AuthenticationService
-    ) { /* empty */ }
+    ) {}
 
     ngOnInit() {
         if (this.providers.length === 1) {
@@ -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;
     }
+
 }

demo-shell/src/app/components/settings/settings.component.ts

@@ -17,17 +17,13 @@
 
 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 {
-    constructor(private router: Router) { /* empty */ }
+    constructor(private router: Router) {}
 
     onCancel() {
         this.router.navigate(['/login']);

demo-shell/src/app/components/settings/settings.module.ts

@@ -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 {}

demo-shell/src/app/components/task-list-demo/task-list-demo.component.html

@@ -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>
 

demo-shell/src/app/components/task-list-demo/task-list-demo.component.ts

@@ -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) {

demo-shell/src/app/components/task-list-demo/task-list.module.ts

@@ -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 {}

demo-shell/src/app/folder-directive/folder-create.directive.spec.ts

@@ -94,7 +94,7 @@ describe('FolderCreateDirective', () => {
         });
 
         it('should emit success event with node if the folder creation was successful', async () => {
-            const testNode = { /* empty */ };
+            const testNode = {};
 
             element.triggerEventHandler('click', event);
             dialogRefMock.componentInstance.success.next(testNode);

demo-shell/src/app/folder-directive/folder-create.directive.ts

@@ -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. */
@@ -56,7 +55,7 @@ export class FolderCreateDirective {
         this.openDialog();
     }
 
-    constructor(public dialogRef: MatDialog, public content: ContentService) { /* empty */ }
+    constructor(public dialogRef: MatDialog, public content: ContentService) {}
 
     private get dialogConfig() {
         const { parentNodeId, title: createTitle, nodeType } = this;

demo-shell/src/app/folder-directive/folder-directive.module.ts

@@ -15,14 +15,15 @@
  * limitations under the License.
  */
 
-import { Hold } from './hold';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MaterialModule } from '../material.module';
 
-export class HoldEntry {
-    entry: Hold;
+import { FolderCreateDirective } from './folder-create.directive';
 
-    constructor(input?: Partial<HoldEntry>) {
-        if (input) {
-            Object.assign(this, input);
-        }
-    }
-}
+@NgModule({
+    imports: [CommonModule, MaterialModule],
+    declarations: [FolderCreateDirective],
+    exports: [FolderCreateDirective]
+})
+export class FolderDirectiveModule {}

demo-shell/src/app/folder-directive/index.ts

@@ -16,3 +16,5 @@
  */
 
 export * from './folder-create.directive';
+
+export * from './folder-directive.module';

demo-shell/src/app/material.module.ts

@@ -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 {
+}

demo-shell/src/app/services/in-memory-form.service.ts

@@ -66,7 +66,7 @@ export class InMemoryFormService extends FormService {
             };
             delete flattenForm.formDefinition;
 
-            const formValues: FormValues = { /* empty */ };
+            const formValues: FormValues = {};
             (data || []).forEach((variable) => {
                 formValues[variable.name] = variable.value;
             });

demo-shell/src/app/services/preview.service.ts

@@ -24,7 +24,7 @@ export class PreviewService {
     public content: Blob = null;
     public name: string = null;
 
-    constructor(private router: Router) { /* empty */ }
+    constructor(private router: Router) {}
 
     showResource(resourceId, versionId?): void {
         if (versionId) {

demo-shell/src/custom-style-dev.scss

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

demo-shell/src/custom-style.scss

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

demo-shell/src/testing/automation.service.ts

@@ -31,10 +31,10 @@ export class CoreAutomationService {
         private userPreferencesService: UserPreferencesService,
         private storageService: StorageService,
         private auth: AuthenticationService
-    ) { /* empty */ }
+    ) {}
 
     setup() {
-        const adfProxy = window['adf'] || { /* empty */ };
+        const adfProxy = window['adf'] || {};
 
         adfProxy.getConfigField = (field: string): any => this.appConfigService.get(field);
 

demo-shell/src/testing/demo-form.mock.ts

@@ -339,8 +339,8 @@ export class DemoForm {
             javascriptEvents: [],
             className: '',
             style: '',
-            customFieldTemplates: { /* empty */ },
-            metadata: { /* empty */ },
+            customFieldTemplates: {},
+            metadata: {},
             variables: [
                 {
                     id: 'bfca9766-7bc1-45cc-8ecf-cdad551e36e2',
@@ -360,7 +360,7 @@ export class DemoForm {
                     type: 'integer'
                 }
             ],
-            customFieldsValueInfo: { /* empty */ },
+            customFieldsValueInfo: {},
             gridsterForm: false,
             globalDateFormat: 'D-M-YYYY'
         }
@@ -1459,8 +1459,8 @@ export class DemoForm {
             javascriptEvents: [],
             className: '',
             style: '',
-            customFieldTemplates: { /* empty */ },
-            metadata: { /* empty */ },
+            customFieldTemplates: {},
+            metadata: {},
             variables: [
                 {
                     id: 'bfca9766-7bc1-45cc-8ecf-cdad551e36e2',
@@ -1743,8 +1743,8 @@ export class DemoForm {
                 javascriptEvents: [],
                 className: '',
                 style: '',
-                customFieldTemplates: { /* empty */ },
-                metadata: { /* empty */ },
+                customFieldTemplates: {},
+                metadata: {},
                 variables: [
                     {
                         id: 'bfca9766-7bc1-45cc-8ecf-cdad551e36e2',
@@ -1764,7 +1764,7 @@ export class DemoForm {
                         type: 'integer'
                     }
                 ],
-                customFieldsValueInfo: { /* empty */ },
+                customFieldsValueInfo: {},
                 gridsterForm: false
             }
         }
@@ -1825,7 +1825,7 @@ export class DemoForm {
                                         link: false,
                                         displayableCMProperties: []
                                     },
-                                    visibilityCondition: { /* empty */ }
+                                    visibilityCondition: {}
                                 }
                             ]
                         }

docs/README.md

@@ -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) | 
 
@@ -191,26 +193,31 @@ 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) |
-| [Apps Process service](core/services/apps-process.service.md) | Gets details of the Process Services apps that are deployed for the user. | [Source](../lib/process-services/src/lib/services/apps-process.service.ts) |
-| [Auth Guard Bpm service](core/services/auth-guard-bpm.service.md) | Adds authentication with Process Services to a route within the app. | [Source](../lib/core/src/lib/auth/guard/auth-guard-bpm.service.ts) |
-| [Auth Guard Ecm service](core/services/auth-guard-ecm.service.md) | Adds authentication with Content Services to a route within the app. | [Source](../lib/core/src/lib/auth/guard/auth-guard-ecm.service.ts) |
+| Name                                                                        | Description | Source link |
+|-----------------------------------------------------------------------------| ----------- | ----------- |
+| [Action Service](../lib/core/src/lib/services/action.service.md)            | Allows you to subscribe to events and publish events. | [Source](../lib/core/src/lib/services/action.service.ts) |
+| [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) |
+| [Apps Process service](core/services/apps-process.service.md)               | Gets details of the Process Services apps that are deployed for the user. | [Source](../lib/process-services/src/lib/services/apps-process.service.ts) |
+| [Auth Guard Bpm service](core/services/auth-guard-bpm.service.md)           | Adds authentication with Process Services to a route within the app. | [Source](../lib/core/src/lib/auth/guard/auth-guard-bpm.service.ts) |
+| [Auth Guard Ecm service](core/services/auth-guard-ecm.service.md)           | Adds authentication with Content Services to a route within the app. | [Source](../lib/core/src/lib/auth/guard/auth-guard-ecm.service.ts) |
 | [Auth Guard SSO Role service](core/services/auth-guard-sso-role.service.md) | Checks the user roles of a user. | [Source](../lib/core/src/lib/auth/guard/auth-guard-sso-role.service.ts) |
-| [Auth Guard service](core/services/auth-guard.service.md) | Adds authentication to a route within the app. | [Source](../lib/core/src/lib/auth/guard/auth-guard.service.ts) |
-| [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) |  |
-| [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) |
+| [Auth Guard service](core/services/auth-guard.service.md)                   | Adds authentication to a route within the app. | [Source](../lib/core/src/lib/auth/guard/auth-guard.service.ts) |
+| [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) |  |
+| [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) |
 | [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 +271,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 +349,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 +380,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) |