[MIGRATION] - Fixed some issues for project and package json

* AAE-25326 Fix custom theme

* fix

.eslintrc.js

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

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "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@65462800fd760344b1a7b4382951275a0abb4808 # v4.3.3
+      uses: actions/upload-artifact@834a144ee995460fba8ed112a2fc961b36a5ec5a # v4.3.6
       with:
         name: ${{ inputs.artifact-name }}
         pattern: ${{ inputs.artifact-name }}-*
@@ -85,7 +85,7 @@ runs:
             }
           }
     - name: Upload artifact
-      uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808 # v4.3.3
+      uses: actions/upload-artifact@834a144ee995460fba8ed112a2fc961b36a5ec5a # v4.3.6
       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@65462800fd760344b1a7b4382951275a0abb4808 # v4.3.3
+      uses: actions/upload-artifact@834a144ee995460fba8ed112a2fc961b36a5ec5a # v4.3.6
       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@65462800fd760344b1a7b4382951275a0abb4808 # v4.3.3
+      uses: actions/upload-artifact@834a144ee995460fba8ed112a2fc961b36a5ec5a # v4.3.6
       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@65462800fd760344b1a7b4382951275a0abb4808 # v4.3.3
+      uses: actions/upload-artifact@834a144ee995460fba8ed112a2fc961b36a5ec5a # v4.3.6
       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@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
         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@9558268b491821a4cfce1f11d4c8f6e56adc8496 # v5.30.0
+        uses: Alfresco/alfresco-build-tools/.github/actions/git-latest-tag@9d00215f539f669b41c7fabf7b88ccc8f316926c # v6.0.1
 # 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@b611370bb5703a7efb587f9d136a52ea24c5c38c # v3.25.11
+      uses: github/codeql-action/init@eb055d739abdc2e8de2e5f4ba1a8b246daa779aa # v3.26.0
       # 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@b611370bb5703a7efb587f9d136a52ea24c5c38c # v3.25.11
+      uses: github/codeql-action/autobuild@eb055d739abdc2e8de2e5f4ba1a8b246daa779aa # v3.26.0
 
     # ℹ️ 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@b611370bb5703a7efb587f9d136a52ea24c5c38c # v3.25.11
+      uses: github/codeql-action/analyze@eb055d739abdc2e8de2e5f4ba1a8b246daa779aa # v3.26.0

.github/workflows/pull-request.yml

@@ -101,7 +101,7 @@ jobs:
         uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
       - name: Ensure SHA pinned actions
-        uses: zgosalvez/github-actions-ensure-sha-pinned-actions@74606c30450304eee8660aae751818321754feb1 # v3.0.9
+        uses: zgosalvez/github-actions-ensure-sha-pinned-actions@b88cd0aad2c36a63e42c71f81cb1958fed95ac87 # v3.0.10
 
       - name: Check package-lock.json version
         run: |
@@ -121,10 +121,10 @@ jobs:
          fetch-depth: 0
 
       - name: Get branch name
-        uses: Alfresco/alfresco-build-tools/.github/actions/get-branch-name@9558268b491821a4cfce1f11d4c8f6e56adc8496 # v5.30.0
+        uses: Alfresco/alfresco-build-tools/.github/actions/get-branch-name@76affd16a4dd9a440cf66bf42656b1d826e8dfc2 # v5.34.0
 
       - name: Save commit message
-        uses: Alfresco/alfresco-build-tools/.github/actions/get-commit-message@9558268b491821a4cfce1f11d4c8f6e56adc8496 # v5.30.0
+        uses: Alfresco/alfresco-build-tools/.github/actions/get-commit-message@76affd16a4dd9a440cf66bf42656b1d826e8dfc2 # v5.34.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: 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>"
+            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>"

.gitignore

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

.lintstagedrc.json

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

.nvmrc

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

.storybook/main.js

@@ -1,7 +1,10 @@
 module.exports = {
+    framework: {
+        name: '@storybook/angular',
+        options: {}
+    },
+    staticDirs: [{ from: '../../../demo-shell/src/app.config.json', to: 'app.config.json' }],
+    docs: {},
     stories: [],
-    addons: ['@storybook/addon-essentials'],
-    framework: '@storybook/angular',
-    staticDirs: [ { from: '../../../demo-shell/src/app.config.json', to: 'app.config.json' } ],
-    core: { builder: 'webpack5' }
+    addons: ['@chromatic-com/storybook']
 };

.storybook/preview.js

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

.vscode/settings.json

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

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('@nrwl/workspace');
+  const { output } = require('@nx/workspace');
   output.warn({ title: 'The Angular CLI was invoked instead of the Nx CLI. Use "npx ng [command]" or "nx [command]" instead.' });
 }
 ${angularCLIInit}
     `
-    );
-  }
+        );
+    }
 }
 
 /**
@@ -57,39 +57,37 @@ ${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}`);
+    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;
     }
-  } 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

@@ -0,0 +1,201 @@
+{
+  "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": 18,
+            "max": 4000,
             "step": 1,
             "thumbLabel": true
           }

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

@@ -17,67 +17,30 @@
 
 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';
 import { TranslateModule } from '@ngx-translate/core';
-import { AppConfigService, DebugAppConfigService, CoreModule, CoreAutomationService, AuthModule, provideTranslations } from '@alfresco/adf-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 { CoreAutomationService } from '../testing/automation.service';
 
 @NgModule({
     imports: [
         BrowserModule,
         environment.e2e ? NoopAnimationsModule : BrowserAnimationsModule,
-        ReactiveFormsModule,
-        RouterModule.forRoot(appRoutes, { useHash: true, relativeLinkResolution: 'legacy' }),
+        RouterModule.forRoot(appRoutes, { useHash: true }),
         AuthModule.forRoot({ useHash: true }),
-        FormsModule,
         HttpClientModule,
-        MaterialModule,
         TranslateModule.forRoot(),
         CoreModule.forRoot(),
         ContentModule.forRoot(),
@@ -86,45 +49,9 @@ import { FolderDirectiveModule } from './folder-directive';
         ProcessServicesCloudModule.forRoot(),
         ExtensionsModule.forRoot(),
         NgChartsModule,
-        AppCloudSharedModule,
-        MonacoEditorModule.forRoot(),
-        FolderDirectiveModule,
-        ShowDiagramComponent
-    ],
-    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
+        MonacoEditorModule.forRoot()
     ],
+    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 { FormComponent } from './components/form/form.component';
+import { AppFormComponent } from './components/form/app-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,14 +42,20 @@ 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 { SearchFilterChipsComponent } from './components/search/search-filter-chips.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';
 
 export const appRoutes: Routes = [
-    { path: 'login', loadChildren: () => import('./components/login/login.module').then(m => m.AppLoginModule) },
+    { path: 'login', component: AppLoginComponent },
     { path: 'logout', component: LogoutComponent },
     {
         path: 'settings',
-        loadChildren: () => import('./components/settings/settings.module').then(m => m.AppSettingsModule)
+        component: SettingsComponent
     },
     {
         path: 'files/:nodeId/view',
@@ -57,7 +63,12 @@ export const appRoutes: Routes = [
         canActivate: [AuthGuardEcm],
         canActivateChild: [AuthGuardEcm],
         outlet: 'overlay',
-        loadChildren: () => import('./components/file-view/file-view.module').then(m => m.FileViewModule)
+        children: [
+            {
+                path: '',
+                component: FileViewComponent
+            }
+        ]
     },
     {
         path: 'files/:nodeId/:versionId/view',
@@ -65,14 +76,24 @@ export const appRoutes: Routes = [
         canActivate: [AuthGuardEcm],
         canActivateChild: [AuthGuardEcm],
         outlet: 'overlay',
-        loadChildren: () => import('./components/file-view/file-view.module').then(m => m.FileViewModule)
+        children: [
+            {
+                path: '',
+                component: FileViewComponent
+            }
+        ]
     },
     {
         path: 'preview/blob',
         component: AppComponent,
         outlet: 'overlay',
         pathMatch: 'full',
-        loadChildren: () => import('./components/file-view/file-view.module').then(m => m.FileViewModule)
+        children: [
+            {
+                path: '',
+                component: FileViewComponent
+            }
+        ]
     },
     {
         path: '',
@@ -86,7 +107,12 @@ export const appRoutes: Routes = [
             },
             {
                 path: 'card-view',
-                loadChildren: () => import('./components/card-view/card-view.module').then(m => m.AppCardViewModule)
+                children: [
+                    {
+                        path: '',
+                        component: AppCardViewComponent
+                    }
+                ]
             },
             {
                 path: '',
@@ -146,14 +172,13 @@ export const appRoutes: Routes = [
                                 path: 'process-details/:processInstanceId',
                                 component: ProcessDetailsCloudDemoComponent
                             }
-
                         ]
                     }
                 ]
             },
             {
                 path: 'settings-layout',
-                loadChildren: () => import('./components/settings/settings.module').then(m => m.AppSettingsModule)
+                component: SettingsComponent
             },
             {
                 path: 'files',
@@ -177,7 +202,7 @@ export const appRoutes: Routes = [
             },
             {
                 path: 'search-filter-chips',
-                component: SearchFilterChipsComponent,
+                component: AppSearchFilterChipsComponent,
                 canActivate: [AuthGuardEcm]
             },
             {
@@ -245,16 +270,34 @@ export const appRoutes: Routes = [
                 canActivate: [AuthGuardEcm]
             },
             { path: 'form-cloud', component: FormCloudDemoComponent },
-            { path: 'form', component: FormComponent },
+            { path: 'form', component: AppFormComponent },
             {
                 path: 'task-list',
                 canActivate: [AuthGuardBpm],
-                loadChildren: () => import('./components/task-list-demo/task-list.module').then(m => m.AppTaskListModule)
+                children: [
+                    {
+                        path: '',
+                        component: TaskListDemoComponent
+                    },
+                    {
+                        path: ':id',
+                        component: TaskListDemoComponent
+                    }
+                ]
             },
             {
                 path: 'process-list',
                 canActivate: [AuthGuardBpm],
-                loadChildren: () => import('./components/process-list-demo/process-list.module').then(m => m.AppProcessListModule)
+                children: [
+                    {
+                        path: '',
+                        component: ProcessListDemoComponent
+                    },
+                    {
+                        path: ':id',
+                        component: ProcessListDemoComponent
+                    }
+                ]
             },
             {
                 path: 'error/no-authorization',

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

@@ -18,6 +18,18 @@
                 <app-search-bar></app-search-bar>
 
                 <app-shell-user-info [menuPositionX]="'before'" [menuPositionY]="'above'"></app-shell-user-info>
+                <adf-avatar
+                    size="32px"
+                    src="https://avatars.githubusercontent.com/u/503991?v=4&size=64"
+                    initials="DV"
+                    tooltip="Denys Vuika"
+                    cursor="pointer"
+                    [matMenuTriggerFor]="userMenu">
+                </adf-avatar>
+                <mat-menu #userMenu="matMenu">
+                    <button mat-menu-item>Item 1</button>
+                    <button mat-menu-item>Item 2</button>
+                </mat-menu>
             </adf-layout-header>
         </ng-template>
     </adf-sidenav-layout-header>
@@ -28,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 matListIcon>{{link.icon}}</mat-icon>
+                            <mat-icon matListItemIcon>{{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"
@@ -40,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 matListIcon >{{link.icon}}</mat-icon>
+                            <mat-icon matListItemIcon >{{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 matListIcon>exit_to_app</mat-icon>
+                    <mat-icon matListItemIcon>exit_to_app</mat-icon>
                     <span matLine>Logout</span>
                 </mat-list-item>
             </mat-nav-list>
@@ -72,7 +84,7 @@
             [routerLink]="link.href"
             [routerLinkActiveOptions]="{ exact: true }">
 
-            <mat-icon matListIcon>{{link.icon}}</mat-icon>
+            <mat-icon matListItemIcon>{{link.icon}}</mat-icon>
             {{ link.title | translate }}
         </button>
     </ng-template>

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

@@ -16,9 +16,50 @@
  */
 
 import { Component, ViewEncapsulation } from '@angular/core';
-import { AlfrescoApiService } from '@alfresco/adf-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';
 
 @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' },
@@ -31,16 +72,24 @@ 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" #console>
+            <div class="app-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,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 .app-form-container {
     padding: 10px;
 }
@@ -31,9 +33,9 @@
 }
 
 .app-form-editor-buttons {
-    & > .mat-raised-button {
-        margin-right: 5px;
-    }
+    display: flex;
+    flex-direction: row;
+    column-gap: 4px;
 }
 
 .app-upload-config-button {

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

@@ -16,32 +16,27 @@
  */
 
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import {
-    CoreAutomationService,
-    FormFieldModel,
-    FormModel,
-    FormRenderingService,
-    NotificationService
-} from '@alfresco/adf-core';
-import {
-    CloudFormRenderingService,
-    FormCloudService
-} from '@alfresco/adf-process-services-cloud';
+import { FormFieldModel, FormModel, FormRenderingService, NotificationService } from '@alfresco/adf-core';
+import { CloudFormRenderingService, FormCloudModule, FormCloudService } from '@alfresco/adf-process-services-cloud';
 import { Subscription } from 'rxjs';
-import {
-    CustomEditorComponent,
-    CustomWidgetComponent
-} from '../../../cloud/custom-form-components/custom-editor.component';
+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 }
-    ]
+    providers: [{ provide: FormRenderingService, useClass: CloudFormRenderingService }]
 })
 export class FormCloudDemoComponent implements OnInit, OnDestroy {
-
     form: FormModel;
     errorFields: FormFieldModel[] = [];
     formConfig: string;
@@ -61,7 +56,8 @@ export class FormCloudDemoComponent implements OnInit, OnDestroy {
         private notificationService: NotificationService,
         private formService: FormCloudService,
         private automationService: CoreAutomationService,
-        private formRenderingService: FormRenderingService) {
+        private formRenderingService: FormRenderingService
+    ) {
         this.formRenderingService.register({
             'demo-widget': () => CustomEditorComponent,
             'custom-editor': () => CustomEditorComponent,

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

@@ -40,9 +40,8 @@
 
     <mat-menu #menu="matMenu" id="user-profile-lists" [xPosition]="menuPositionX" [yPosition]="menuPositionY"
               [overlapTrigger]="false" class="adf-userinfo-menu">
-        <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 + ')'">
+        <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 + ')'">
                 <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"
@@ -53,7 +52,7 @@
                       [outerHTML]="ecmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
                 </ng-template>
 
-                <div class="mat-title" id="ecm-username">{{ecmUser | fullName}}</div>
+                <div class="mat-headline-6" id="ecm-username">{{ecmUser | fullName}}</div>
             </mat-card-header>
             <mat-card-content>
                 <div class="adf-userinfo-supporting-text">
@@ -61,8 +60,7 @@
                         <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">
@@ -73,7 +71,7 @@
                 </div>
             </mat-card-content>
         </mat-card>
-        <mat-card *ngIf="mode === userInfoMode.CONTENT_SSO" class="adf-userinfo-card adf-content-userinfo-card">
+        <mat-card appearance="outlined" *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"
@@ -85,7 +83,7 @@
                     <div
                       [outerHTML]="identityUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
                 </ng-template>
-                <div class="mat-title" id="identity-username">{{identityUser | fullName}}</div>
+                <div class="mat-headline-6" 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.ts

@@ -15,21 +15,25 @@
  * limitations under the License.
  */
 
-import { IdentityUserModel, UserInfoMode } from '@alfresco/adf-core';
+import { FullNamePipe, IdentityUserModel, InitialUsernamePipe, UserInfoMode } from '@alfresco/adf-core';
 import { Component, Input, OnDestroy, ViewChild, ViewEncapsulation } from '@angular/core';
-import { MatMenuTrigger, MenuPositionX, MenuPositionY } from '@angular/material/menu';
+import { MatMenuModule, MatMenuTrigger, MenuPositionX, MenuPositionY } from '@angular/material/menu';
 import { Subject } from 'rxjs';
-import { EcmUserModel } from '../common/models/ecm-user.model';
-import { PeopleContentService } from '../common/services/people-content.service';
+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
 })
 export class ContentUserInfoComponent implements OnDestroy {
-
     @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;
 
     /** Determines if user is logged in. */
@@ -50,11 +54,11 @@ export class ContentUserInfoComponent implements OnDestroy {
 
     /** Custom path for the background banner image for ACS users. */
     @Input()
-    ecmBackgroundImage: string = './assets/images/ecm-background.png';
+    ecmBackgroundImage: string = './resources/images/ecm-background.png';
 
     /** Custom path for the background banner image for APS users. */
     @Input()
-    bpmBackgroundImage: string = './assets/images/bpm-background.png';
+    bpmBackgroundImage: string = './resources/images/bpm-background.png';
 
     /** Custom choice for opening the menu at the bottom. Can be `before` or `after`. */
     @Input()
@@ -79,8 +83,7 @@ export class ContentUserInfoComponent implements OnDestroy {
 
     private destroy$ = new Subject();
 
-    constructor(private peopleContentService: PeopleContentService) {
-    }
+    constructor(private peopleContentService: PeopleContentService) { /* empty */ }
 
     ngOnDestroy(): void {
         this.destroy$.next(true);

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

@@ -16,5 +16,3 @@
  */
 
 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 class="adf-userinfo-card" *ngIf="ecmUser">
+                <mat-card appearance="outlined" 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-title" id="ecm-username">{{ecmUser | fullName}}</div>
+                        <div class="mat-headline-6" 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 class="adf-userinfo-card">
+                <mat-card appearance="outlined" 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-title" id="bpm-username">{{bpmUser | fullName}}</div>
+                        <div class="mat-headline-6" 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,4 +1,5 @@
 @import 'styles/flex';
+@import 'styles/mat-selectors';
 
 .adf {
     &-userinfo-container {
@@ -49,7 +50,7 @@
         display: inline-block;
     }
 
-    &-userinfo-menu_button.mat-button {
+    &-userinfo-menu_button#{$mat-button} {
         margin-right: 0;
         border-radius: 90%;
         padding: 0;
@@ -57,13 +58,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 {
+    &-userinfo-tab #{$mat-tab-label-text} {
         flex: auto;
         font-weight: 500;
         font-size: var(--theme-body-1-font-size);
@@ -81,7 +82,7 @@
         box-sizing: border-box;
     }
 
-    &-userinfo-card.mat-card {
+    &-userinfo-card#{$mat-card} {
         padding: 0;
     }
 
@@ -160,7 +161,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;
@@ -168,6 +169,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

@@ -20,7 +20,7 @@ import { EcmUserModel, PeopleContentService } from '@alfresco/adf-content-servic
 import { Component, Input, OnDestroy, ViewChild, ViewEncapsulation } from '@angular/core';
 import { MatMenuModule, MatMenuTrigger, MenuPositionX, MenuPositionY } from '@angular/material/menu';
 import { Subject } from 'rxjs';
-import { PeopleProcessService } from '../services/people-process.service';
+import { PeopleProcessService } from '@alfresco/adf-process-services';
 import { UserRepresentation } from '@alfresco/js-api';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
@@ -57,11 +57,11 @@ export class ProcessUserInfoComponent implements OnDestroy {
 
     /** Custom path for the background banner image for APS users. */
     @Input()
-    bpmBackgroundImage: string = './assets/images/bpm-background.png';
+    bpmBackgroundImage: string = './resources/images/bpm-background.png';
 
     /** Custom path for the background banner image for ACS users. */
     @Input()
-    ecmBackgroundImage: string = './assets/images/ecm-background.png';
+    ecmBackgroundImage: string = './resources/images/ecm-background.png';
 
     /** Custom choice for opening the menu at the bottom. Can be `before` or `after`. */
     @Input()
@@ -86,7 +86,7 @@ export class ProcessUserInfoComponent implements OnDestroy {
 
     private destroy$ = new Subject();
 
-    constructor(private peopleProcessService: PeopleProcessService, private peopleContentService: PeopleContentService) {}
+    constructor(private peopleProcessService: PeopleProcessService, private peopleContentService: PeopleContentService) { /* empty */ }
 
     ngOnDestroy(): void {
         this.destroy$.next(true);

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

@@ -15,7 +15,4 @@
  * 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,14 +17,26 @@
 
 import { EcmUserModel, PeopleContentService } from '@alfresco/adf-content-services';
 import { PeopleProcessService } from '@alfresco/adf-process-services';
-import { AuthenticationService, BasicAlfrescoAuthService, IdentityUserModel, IdentityUserService, UserInfoMode } from '@alfresco/adf-core';
+import {
+    AuthenticationService,
+    BasicAlfrescoAuthService,
+    IdentityUserInfoComponent,
+    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 {
@@ -48,7 +60,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,16 +29,22 @@ import {
     CardViewMapItemModel,
     UpdateNotification,
     DecimalNumberPipe,
-    CardViewArrayItemModel
+    CardViewArrayItemModel,
+    CardViewComponent
 } 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 CardViewComponent implements OnInit, OnDestroy {
+export class AppCardViewComponent implements OnInit, OnDestroy {
     isEditable = true;
     properties: any;
     logs: string[];

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,15 +20,18 @@ 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 } from '@alfresco/adf-process-services-cloud';
+import { ProcessFilterCloudModel, ProcessFiltersCloudModule, TaskFiltersCloudModule } from '@alfresco/adf-process-services-cloud';
+import { CommonModule } from '@angular/common';
+import { MatExpansionModule } from '@angular/material/expansion';
 @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;
 
@@ -46,7 +49,7 @@ export class CloudFiltersDemoComponent implements OnInit {
         private router: Router,
         private route: ActivatedRoute,
         private cloudProcessFiltersService: CloudProcessFiltersService
-    ) {}
+    ) { /* empty */ }
 
     ngOnInit() {
         this.currentTaskFilter$ = this.cloudLayoutService.taskFilter$;
@@ -67,17 +70,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,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 .app-cloud-layout-overflow {
     overflow: auto;
 }

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

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

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

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

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

@@ -17,17 +17,18 @@
 
 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,16 +16,18 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-import { FormService, WidgetComponent } from '@alfresco/adf-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';
 /* eslint-disable @angular-eslint/component-selector */
 
 @Component({
     selector: 'custom-editor-widget',
-    template: `
-        <div style="color: green">
-            ADF version of custom form widget
-        </div>
-    `
+    standalone: true,
+    template: ` <div style="color: green">ADF version of custom form widget</div> `
 })
 export class CustomEditorComponent extends WidgetComponent {
     constructor() {
@@ -35,32 +37,35 @@ 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>`,
-    providers: [
-        { provide: FormRenderingService, useClass: CloudFormRenderingService }
-    ]
+    standalone: true,
+    imports: [RouterOutlet],
+    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,15 +17,19 @@
 
 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,18 +21,23 @@ import {
     PROCESS_FILTER_ACTION_SAVE,
     PROCESS_FILTER_ACTION_SAVE_AS,
     ProcessFilterAction,
-    ProcessFilterCloudModel
+    ProcessFilterCloudModel,
+    ProcessFiltersCloudModule,
+    ProcessListCloudModule
 } from '@alfresco/adf-process-services-cloud';
 import { ActivatedRoute, Router } from '@angular/router';
-import { DataCellEvent, UserPreferencesService } from '@alfresco/adf-core';
+import { DataCellEvent, PaginationComponent, 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
@@ -50,8 +55,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[];
@@ -69,8 +74,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;
@@ -87,9 +92,7 @@ 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();
     }
 
@@ -129,7 +132,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) {
@@ -155,33 +158,30 @@ 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-list>
-            <mat-chip *ngFor="let action of actions" [removable]="true">
+        <mat-chip-listbox>
+            <mat-chip-option *ngFor="let action of actions" [removable]="true">
                 {{action.title}}
                 <mat-icon matChipRemove (click)="removeAction(action)">cancel</mat-icon>
-            </mat-chip>
-        </mat-chip-list>
+            </mat-chip-option>
+        </mat-chip-listbox>
     </div>
 </div>

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

@@ -19,10 +19,33 @@ 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 { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
+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';
 
 @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
@@ -51,15 +74,12 @@ 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

@@ -1,40 +0,0 @@
-/*!
- * @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 } from '@alfresco/adf-process-services-cloud';
+import { CloudFormRenderingService, StartProcessCloudModule } 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,20 +19,22 @@ 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,17 +18,18 @@
 import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { NotificationService } from '@alfresco/adf-core';
-import { TaskHeaderCloudComponent } from '@alfresco/adf-process-services-cloud';
+import { TaskFormModule, TaskHeaderCloudComponent, TaskHeaderCloudModule } 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;
 
@@ -40,14 +41,13 @@ 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 {}
+        } catch { /* empty */ }
         this.notificationService.showError(errorMessage || error);
     }
 }

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

@@ -18,14 +18,17 @@
 import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import {
     TaskFilterCloudModel,
+    TaskFiltersCloudModule,
     TaskListCloudComponent,
+    TaskListCloudModule,
     TaskListCloudSortingModel
 } from '@alfresco/adf-process-services-cloud';
-import { AppConfigService, DataCellEvent, UserPreferencesService } from '@alfresco/adf-core';
+import { AppConfigService, DataCellEvent, PaginationComponent, 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';
@@ -33,6 +36,8 @@ 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
@@ -49,7 +54,7 @@ export class TasksCloudDemoComponent implements OnInit, OnDestroy {
 
     sortArray: TaskListCloudSortingModel[];
     editedFilter: TaskFilterCloudModel;
-    taskFilterProperties: any  = { filterProperties: [], sortProperties: [], actions: [] };
+    taskFilterProperties: any = { filterProperties: [], sortProperties: [], actions: [] };
 
     filterId;
     multiselect: boolean;
@@ -57,8 +62,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;
@@ -71,8 +76,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;
@@ -91,9 +96,7 @@ 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();
     }
 
@@ -134,12 +137,11 @@ export class TasksCloudDemoComponent implements OnInit, OnDestroy {
     }
 
     onFilterChange(filter: any) {
-        this.editedFilter = Object.assign({}, filter);
+        this.editedFilter = Object.assign({ /* empty */ }, 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 {
@@ -157,32 +159,29 @@ 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,17 +17,19 @@
 
 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) {
@@ -42,5 +44,4 @@ export class DemoErrorComponent implements OnInit {
     onReturnButton() {
         this.router.navigate(['/']);
     }
-
 }

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

@@ -17,18 +17,44 @@
 
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, PRIMARY_OUTLET, Router } from '@angular/router';
-import { NotificationService } from '@alfresco/adf-core';
+import { InfoDrawerComponent, InfoDrawerTabComponent, NotificationService, ViewerComponent } from '@alfresco/adf-core';
 import {
+    AlfrescoViewerComponent,
     AllowableOperationsEnum,
+    ContentMetadataComponent,
     ContentService,
     FileUploadErrorEvent,
+    NodeCommentsComponent,
     NodesApiService,
-    PermissionsEnum
+    PermissionsEnum,
+    VersionManagerComponent
 } 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
 })
@@ -56,7 +82,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

@@ -1,49 +0,0 @@
-/*!
- * @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,7 +31,23 @@ 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 } from '@alfresco/adf-core';
+import {
+    NotificationService,
+    UserPreferencesService,
+    PaginationComponent,
+    ShowHeaderMode,
+    FormRenderingService,
+    ToolbarTitleComponent,
+    ToolbarComponent,
+    ToolbarDividerComponent,
+    DataColumnComponent,
+    HighlightPipe,
+    DataColumnListComponent,
+    CustomEmptyContentTemplateDirective,
+    InfoDrawerTabComponent,
+    InfoDrawerComponent,
+    InfoDrawerLayoutComponent
+} from '@alfresco/adf-core';
 import {
     ContentService,
     FolderCreatedEvent,
@@ -42,18 +58,82 @@ import {
     FilterSearch,
     DialogAspectListService,
     FileUploadEvent,
-    NodesApiService
+    NodesApiService,
+    UploadDragAreaComponent,
+    CheckAllowableOperationDirective,
+    BreadcrumbComponent,
+    DropdownBreadcrumbComponent,
+    NodeDownloadDirective,
+    NodeDeleteDirective,
+    NodeLockDirective,
+    ContentActionListComponent,
+    ContentActionComponent,
+    ContentMetadataComponent,
+    VersionManagerComponent,
+    UploadButtonComponent
 } 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,
@@ -191,7 +271,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;
@@ -465,7 +545,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
     }
 
     navigateToFilter(activeFilters: FilterSearch[]) {
-        const objectFromMap = {};
+        const objectFromMap = { /* empty */ };
         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,14 +16,20 @@
  */
 
 import { Component, Inject, ViewEncapsulation } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule, 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 } from '@alfresco/adf-content-services';
+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';
 
 @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/app-form.component.html

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

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

@@ -2,10 +2,6 @@
     padding: 10px;
 }
 
-.app-main-content {
-    padding: 0 15px;
-}
-
 .app-card-view {
     width: 30%;
     display: inline-block;
@@ -31,7 +27,8 @@
     }
 }
 
-.main-content {
+.app-main-content {
+    padding: 0 15px;
 
     .adf-form-config-editor {
         height: 500px;

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

@@ -16,31 +16,33 @@
  */
 
 import { Component, inject, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import {
-    FormModel,
-    FormFieldModel,
-    FormService,
-    FormOutcomeEvent,
-    NotificationService,
-    CoreAutomationService,
-    FormRenderingService
-} from '@alfresco/adf-core';
-import { ProcessFormRenderingService } from '@alfresco/adf-process-services';
+import { FormModel, FormFieldModel, FormService, FormOutcomeEvent, NotificationService, FormRenderingService } from '@alfresco/adf-core';
+import { FormComponent, 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',
-    templateUrl: './form.component.html',
-    styleUrls: ['./form.component.scss'],
+    standalone: true,
+    imports: [CommonModule, MatTabsModule, FormComponent, MonacoEditorModule, MatButtonModule, FormsModule, TranslateModule, MatIconModule],
+    templateUrl: './app-form.component.html',
+    styleUrls: ['./app-form.component.scss'],
     providers: [
         { provide: FormService, useClass: InMemoryFormService },
         { provide: FormRenderingService, useClass: ProcessFormRenderingService }
     ],
     encapsulation: ViewEncapsulation.None
 })
-export class FormComponent implements OnInit, OnDestroy {
+export class AppFormComponent 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 {}
+export class HomeComponent { /* empty */ }

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

@@ -16,12 +16,16 @@
  */
 
 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 LoginComponent {
-}
+export class AppLoginComponent {}

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

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

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

@@ -17,18 +17,19 @@
 
 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,15 +16,35 @@
  */
 
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl, AbstractControl } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl, AbstractControl, ReactiveFormsModule } 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`]
 })
@@ -54,7 +74,7 @@ export class ProcessListDemoComponent implements OnInit, OnDestroy {
 
     private onDestroy$ = new Subject<boolean>();
 
-    constructor(private route: ActivatedRoute, private formBuilder: UntypedFormBuilder) {}
+    constructor(private route: ActivatedRoute, private formBuilder: UntypedFormBuilder) { /* empty */ }
 
     ngOnInit() {
         this.resetQueryParameters();

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

@@ -1,40 +0,0 @@
-/*!
- * @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 { ProcessListDemoComponent } from './process-list-demo.component';
-import { Routes, RouterModule } from '@angular/router';
-import { CommonModule } from '@angular/common';
-import { CoreModule } from '@alfresco/adf-core';
-import { ProcessModule } from '@alfresco/adf-process-services';
-
-const routes: Routes = [
-    {
-        path: '',
-        component: ProcessListDemoComponent
-    },
-    {
-        path: ':id',
-        component: ProcessListDemoComponent
-    }
-];
-
-@NgModule({
-    imports: [CommonModule, RouterModule.forChild(routes), CoreModule, ProcessModule],
-    declarations: [ProcessListDemoComponent]
-})
-export class AppProcessListModule {}

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

@@ -18,13 +18,16 @@
 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) {}
+    constructor(private router: Router) { /* empty */ }
 
     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,23 +17,24 @@
 
 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,18 +17,20 @@
 
 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,15 +16,32 @@
  */
 
 import { Component, inject, Input, OnChanges, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { ProcessAttachmentListComponent, ProcessService, ProcessUploadService } from '@alfresco/adf-process-services';
-import { UploadService } from '@alfresco/adf-content-services';
+import {
+    CreateProcessAttachmentComponent,
+    ProcessAttachmentListComponent,
+    ProcessService,
+    ProcessUploadService
+} from '@alfresco/adf-process-services';
+import { UploadDragAreaComponent, 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,9 +20,7 @@
                                   (success)="onSuccessTaskFilterList()" #activitiFilter>
                 </adf-task-filters>
             </div>
-            <div
-                class="app-grid-item app-tasks-list"
-                *ngIf="taskFilter && !isStartTaskMode()">
+            <div *ngIf="taskFilter && !isStartTaskMode()" class="app-grid-item app-tasks-list">
                 <adf-tasklist
                     [appId]="taskFilter?.appId"
                     [presetColumn]="presetColumn"

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

@@ -28,7 +28,8 @@ import {
     UserPreferenceValues,
     AlfrescoApiService,
     UserPreferencesService,
-    NotificationService
+    NotificationService,
+    SidebarActionMenuComponent
 } from '@alfresco/adf-core';
 import {
     ProcessFiltersComponent,
@@ -40,12 +41,23 @@ import {
     ProcessFormRenderingService,
     APP_LIST_LAYOUT_LIST,
     ValidateDynamicTableRowEvent,
-    DynamicTableRow
+    DynamicTableRow,
+    TaskDetailsComponent,
+    TaskAuditDirective,
+    StartTaskComponent,
+    ProcessInstanceDetailsComponent,
+    ProcessAuditDirective
 } from '@alfresco/adf-process-services';
 import { Subject } from 'rxjs';
 import { PreviewService } from '../../services/preview.service';
-import { Location } from '@angular/common';
+import { CommonModule, 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__';
@@ -56,6 +68,28 @@ 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,
@@ -216,7 +250,7 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
     }
 
     applyTaskFilter(filter: UserTaskFilterRepresentation) {
-        this.taskFilter = Object.assign({}, filter);
+        this.taskFilter = Object.assign({ /* empty */ }, filter);
 
         if (filter && this.taskList) {
             this.taskList.hasCustomDataSource = false;

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

@@ -16,15 +16,20 @@
  */
 
 import { Component, inject, Input, OnChanges, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { TaskAttachmentListComponent, TaskListService, TaskUploadService } from '@alfresco/adf-process-services';
-import { UploadService } from '@alfresco/adf-content-services';
+import { AttachmentComponent, TaskAttachmentListComponent, TaskListService, TaskUploadService } from '@alfresco/adf-process-services';
+import { UploadDragAreaComponent, 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,14 +19,18 @@ 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) {}
+    constructor(public router: Router, private preview: PreviewService) { /* empty */ }
 
     /**
      * 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,18 +18,43 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { Pagination, ResultSetPaging } from '@alfresco/js-api';
-import { SearchConfiguration, SearchQueryBuilderService, SearchService } from '@alfresco/adf-content-services';
+import {
+    ResetSearchDirective,
+    SearchConfiguration,
+    SearchFilterChipsComponent,
+    SearchFormComponent,
+    SearchQueryBuilderService,
+    SearchService,
+    SearchSortingPickerComponent
+} 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 SearchFilterChipsComponent implements OnInit, OnDestroy {
+export class AppSearchFilterChipsComponent implements OnInit, OnDestroy {
     queryParamName = 'q';
     searchedWord = '';
     data: ResultSetPaging;
@@ -159,7 +184,7 @@ export class SearchFilterChipsComponent implements OnInit, OnDestroy {
     }
 
     private updateSetting(field) {
-        field.settings = field.settings ?? {};
+        field.settings = field.settings ?? { /* empty */ };
         field.settings.allowUpdateOnChange = false;
         field.settings.hideDefaultAction = true;
     }

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

@@ -18,19 +18,39 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { Pagination, ResultSetPaging } from '@alfresco/js-api';
-import { SearchForm, SearchQueryBuilderService, SearchService } from '@alfresco/adf-content-services';
+import {
+    SearchChipListComponent,
+    SearchFilterComponent,
+    SearchForm,
+    SearchQueryBuilderService,
+    SearchService,
+    SearchSortingPickerComponent
+} 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;
@@ -43,10 +63,12 @@ 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]) => {
@@ -55,7 +77,7 @@ export class SearchResultComponent implements OnInit, OnDestroy {
                 if (query) {
                     this.queryBuilder.userQuery = query;
                 }
-        });
+            });
 
         queryBuilder.paging = {
             maxItems: this.preferences.paginationSize,
@@ -68,21 +90,17 @@ 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) => {
@@ -91,18 +109,20 @@ 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;
         }
@@ -142,6 +162,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,16 +16,33 @@
  */
 
 import { Component, EventEmitter, Output, ViewEncapsulation, OnInit, Input } from '@angular/core';
-import { Validators, UntypedFormGroup, UntypedFormBuilder, UntypedFormControl } from '@angular/forms';
+import { Validators, UntypedFormGroup, UntypedFormBuilder, UntypedFormControl, ReactiveFormsModule } 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 } from '@angular/material/form-field';
+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';
 
 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'],
@@ -66,7 +83,7 @@ export class HostSettingsComponent implements OnInit {
         private alfrescoApiService: AlfrescoApiService,
         private appConfig: AppConfigService,
         private authenticationService: AuthenticationService
-    ) {}
+    ) { /* empty */ }
 
     ngOnInit() {
         if (this.providers.length === 1) {
@@ -161,7 +178,10 @@ 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 {
@@ -203,7 +223,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(',');
         }
 
@@ -278,5 +298,4 @@ 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,13 +17,17 @@
 
 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) {}
+    constructor(private router: Router) { /* empty */ }
 
     onCancel() {
         this.router.navigate(['/login']);

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

@@ -1,46 +0,0 @@
-/*!
- * @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,9 +3,7 @@
     <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>
@@ -13,16 +11,12 @@
 
         <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>
@@ -182,8 +176,6 @@
         </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,20 +16,43 @@
  */
 
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl, AbstractControl } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl, AbstractControl, ReactiveFormsModule } 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;
 
@@ -54,33 +77,31 @@ 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) {
@@ -120,16 +141,11 @@ 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

@@ -1,40 +0,0 @@
-/*!
- * @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 = {};
+            const testNode = { /* empty */ };
 
             element.triggerEventHandler('click', event);
             dialogRefMock.componentInstance.success.next(testNode);

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

@@ -26,7 +26,8 @@ const DEFAULT_FOLDER_PARENT_ID = '-my-';
 const DIALOG_WIDTH: number = 400;
 
 @Directive({
-    selector: '[adf-create-folder]'
+    selector: '[adf-create-folder]',
+    standalone: true
 })
 export class FolderCreateDirective {
     /** Parent folder where the new folder will be located after creation. */
@@ -55,7 +56,7 @@ export class FolderCreateDirective {
         this.openDialog();
     }
 
-    constructor(public dialogRef: MatDialog, public content: ContentService) {}
+    constructor(public dialogRef: MatDialog, public content: ContentService) { /* empty */ }
 
     private get dialogConfig() {
         const { parentNodeId, title: createTitle, nodeType } = this;

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

@@ -1,29 +0,0 @@
-/*!
- * @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 { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { MaterialModule } from '../material.module';
-
-import { FolderCreateDirective } from './folder-create.directive';
-
-@NgModule({
-    imports: [CommonModule, MaterialModule],
-    declarations: [FolderCreateDirective],
-    exports: [FolderCreateDirective]
-})
-export class FolderDirectiveModule {}

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

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

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

@@ -1,63 +0,0 @@
-/*!
- * @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 = {};
+            const formValues: FormValues = { /* empty */ };
             (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) {}
+    constructor(private router: Router) { /* empty */ }
 
     showResource(resourceId, versionId?): void {
         if (versionId) {

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

@@ -1,6 +1,7 @@
 @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);
@@ -19,19 +20,3 @@ $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,6 +1,7 @@
 @use '@angular/material' as mat;
 @import '~@alfresco/adf-core/theming';
-@include mat.core($alfresco-typography);
+@include mat.all-component-typographies($alfresco-typography);
+@include mat.core;
 
 $primary: mat.define-palette($alfresco-accent-orange);
 $accent: mat.define-palette($alfresco-accent-purple);
@@ -16,17 +17,3 @@ $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

@@ -16,18 +16,13 @@
  */
 
 import { Injectable } from '@angular/core';
-import { AppConfigService } from '../app-config/app-config.service';
-import { AlfrescoApiService } from '../services/alfresco-api.service';
-import { StorageService } from '../common/services/storage.service';
-import { UserPreferencesService } from '../common/services/user-preferences.service';
-import { DemoForm } from '../mock/form/demo-form.mock';
-import { AuthenticationService } from '../auth/services/authentication.service';
+import { AppConfigService, AlfrescoApiService, StorageService, UserPreferencesService, AuthenticationService } from '@alfresco/adf-core';
+import { DemoForm } from './demo-form.mock';
 
 @Injectable({
     providedIn: 'root'
 })
 export class CoreAutomationService {
-
     public forms = new DemoForm();
 
     constructor(
@@ -36,11 +31,10 @@ export class CoreAutomationService {
         private userPreferencesService: UserPreferencesService,
         private storageService: StorageService,
         private auth: AuthenticationService
-    ) {
-    }
+    ) { /* empty */ }
 
     setup() {
-        const adfProxy = window['adf'] || {};
+        const adfProxy = window['adf'] || { /* empty */ };
 
         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: {},
-            metadata: {},
+            customFieldTemplates: { /* empty */ },
+            metadata: { /* empty */ },
             variables: [
                 {
                     id: 'bfca9766-7bc1-45cc-8ecf-cdad551e36e2',
@@ -360,7 +360,7 @@ export class DemoForm {
                     type: 'integer'
                 }
             ],
-            customFieldsValueInfo: {},
+            customFieldsValueInfo: { /* empty */ },
             gridsterForm: false,
             globalDateFormat: 'D-M-YYYY'
         }
@@ -1459,8 +1459,8 @@ export class DemoForm {
             javascriptEvents: [],
             className: '',
             style: '',
-            customFieldTemplates: {},
-            metadata: {},
+            customFieldTemplates: { /* empty */ },
+            metadata: { /* empty */ },
             variables: [
                 {
                     id: 'bfca9766-7bc1-45cc-8ecf-cdad551e36e2',
@@ -1743,8 +1743,8 @@ export class DemoForm {
                 javascriptEvents: [],
                 className: '',
                 style: '',
-                customFieldTemplates: {},
-                metadata: {},
+                customFieldTemplates: { /* empty */ },
+                metadata: { /* empty */ },
                 variables: [
                     {
                         id: 'bfca9766-7bc1-45cc-8ecf-cdad551e36e2',
@@ -1764,7 +1764,7 @@ export class DemoForm {
                         type: 'integer'
                     }
                 ],
-                customFieldsValueInfo: {},
+                customFieldsValueInfo: { /* empty */ },
                 gridsterForm: false
             }
         }
@@ -1825,7 +1825,7 @@ export class DemoForm {
                                         link: false,
                                         displayableCMProperties: []
                                     },
-                                    visibilityCondition: {}
+                                    visibilityCondition: { /* empty */ }
                                 }
                             ]
                         }