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

[ci:force]
[MIGRATION] - change selector for expanded expansion panel content
2026-09-16 18:13:06 +00:00 · 2024-08-19 23:08:10 +01:00 · 2024-08-19 22:37:47 +01:00 · 2024-08-19 22:31:10 +01:00 · 2024-08-19 22:31:03 +01:00 · 2024-08-19 22:30:57 +01:00
5036 changed files with 197134 additions and 115692 deletions
@@ -0,0 +1,11 @@
+.angular
+nxcache
+node_modules
+dist
+coverage
+.github
+.vscode
+scripts
+/angular.json
+docs/**/*.md
+lib/js-api/docs/**/*.md
@@ -1,6 +1,6 @@
-path = require('path');
 module.exports = {
    root: true,
+
    ignorePatterns: [
        'projects/**/*',
        '**/node_modules/**/*',
@@ -11,20 +11,39 @@ module.exports = {
        '**/scripts',
        '**/docs'
    ],
+
+    plugins: ['@nx'],
+
    overrides: [
        {
            files: ['*.ts'],
            parserOptions: {
-                project: [path.join(__dirname, 'tsconfig.json'), path.join(__dirname, 'e2e/tsconfig.e2e.json')],
+                project: ['tsconfig.json', 'e2e/tsconfig.e2e.json'],
                createDefaultProgram: true
            },
            extends: [
-                'plugin:@angular-eslint/ng-cli-compat',
-                'plugin:@angular-eslint/ng-cli-compat--formatting-add-on',
-                'plugin:@angular-eslint/template/process-inline-templates'
+                'plugin:@nx/typescript',
+                'plugin:@nx/angular',
+                'plugin:@cspell/recommended',
+                'plugin:@angular-eslint/recommended',
+                'plugin:@angular-eslint/template/process-inline-templates',
+                'plugin:jsdoc/recommended-typescript-error'
+            ],
+            plugins: [
+                'eslint-plugin-unicorn',
+                'eslint-plugin-rxjs',
+                'prettier',
+                'ban',
+                'license-header',
+                '@cspell',
+                'eslint-plugin-import',
+                '@angular-eslint/eslint-plugin',
+                '@typescript-eslint',
+                'jsdoc'
            ],
-            plugins: ['eslint-plugin-unicorn', 'eslint-plugin-rxjs', 'ban', 'license-header'],
            rules: {
+                // Uncomment this to enable prettier checks as part of the ESLint
+                // 'prettier/prettier': 'error',
                'ban/ban': [
                    'error',
                    { name: 'eval', message: 'Calls to eval is not allowed.' },
@@ -61,6 +80,7 @@ module.exports = {
                        accessibility: 'explicit'
                    }
                ],
+                '@typescript-eslint/await-thenable': 'error',
                '@typescript-eslint/prefer-optional-chain': 'warn',
                '@typescript-eslint/no-inferrable-types': 'off',
                '@typescript-eslint/no-require-imports': 'off',
@@ -84,7 +104,7 @@ module.exports = {
                ],
                '@typescript-eslint/member-ordering': 'off',
                'prefer-arrow/prefer-arrow-functions': 'off',
-
+                'prefer-promise-reject-errors': 'error',
                'brace-style': 'off',
                '@typescript-eslint/brace-style': 'error',
                'comma-dangle': 'error',
@@ -143,7 +163,7 @@ module.exports = {
                    [
                        '/*!',
                        ' * @license',
-                        ' * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.',
+                        ' * 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.',
@@ -158,13 +178,28 @@ module.exports = {
                        ' * limitations under the License.',
                        ' */'
                    ]
-                ]
+                ],
+                '@nx/dependency-checks': 'warn'
            }
        },
        {
            files: ['*.html'],
-            extends: ['plugin:@angular-eslint/template/recommended'],
+            extends: ['plugin:@angular-eslint/template/recommended', 'plugin:@angular-eslint/template/accessibility'],
            rules: {}
+        },
+        {
+            files: ['*.spec.ts'],
+            plugins: ['@alfresco/eslint-angular'],
+            rules: {
+                '@alfresco/eslint-angular/no-angular-material-selectors': 'error'
+            }
+        },
+        {
+            files: ['*.ts'],
+            extends: ['plugin:@angular-eslint/template/process-inline-templates'],
+            excludedFiles: ['*.spec.ts']
        }
-    ]
+    ],
+
+    extends: ['plugin:storybook/recommended']
 };
@@ -0,0 +1,3 @@
+{
+  "extends": ["./.eslintrc.js"]
+}
@@ -22,13 +22,15 @@ runs:
    - run: echo "Artifact Append"
      shell: bash
    - name: Download artifact
-      uses: actions/download-artifact@v3
+      uses: actions/upload-artifact@834a144ee995460fba8ed112a2fc961b36a5ec5a # v4.3.6
      with:
        name: ${{ inputs.artifact-name }}
+        pattern: ${{ inputs.artifact-name }}-*
+        merge-multiple: true
    - run: ls
      shell: bash
    - name: Append content
-      uses: actions/github-script@v6
+      uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
      env:
        contentFile: ${{ inputs.content }}
        fileName: ${{ inputs.file-name }}
@@ -83,7 +85,7 @@ runs:
            }
          }
    - name: Upload artifact
-      uses: actions/upload-artifact@v3
+      uses: actions/upload-artifact@834a144ee995460fba8ed112a2fc961b36a5ec5a # v4.3.6
      with:
        name: ${{ inputs.artifact-name }}
        path: ${{ inputs.file-name }}
@@ -24,13 +24,15 @@ runs:
  using: "composite"

  steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
    - run: echo "Artifact Extract"
      shell: bash
    - name: Download artifact
-      uses: actions/download-artifact@v3
+      uses: actions/upload-artifact@834a144ee995460fba8ed112a2fc961b36a5ec5a # v4.3.6
      with:
        name: ${{ inputs.artifact-name }}
+        pattern: ${{ inputs.artifact-name }}-*
+        merge-multiple: true
    - id: extract
      shell: bash
      run: |
@@ -19,14 +19,14 @@ runs:
  using: "composite"

  steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
    - name: Create empty artifact
      shell: bash
-      run: 
+      run:
        echo "${{inputs.content}}" > ${{ inputs.file-name }}

    - name: Upload artifact
-      uses: actions/upload-artifact@v3
+      uses: actions/upload-artifact@834a144ee995460fba8ed112a2fc961b36a5ec5a # v4.3.6
      with:
        name: ${{ inputs.artifact-name }}
        path: ${{ inputs.file-name }}
@@ -60,8 +60,9 @@ runs:
            echo "Setting up CI flags for Push develop patch"
        else
          echo "Setting up CI flags for Push on develop branch"
-          base=$(git describe --tags $(git rev-list --tags --max-count=1))
-          echo "NX_CALCULATION_FLAGS=--base=$base --head=$HEAD_HASH" >> $GITHUB_ENV
+          # base=$(git describe --tags $(git rev-list --tags --max-count=1))
+          # we publish always all the libs until we don't handle partial release
+          echo "NX_CALCULATION_FLAGS=--all" >> $GITHUB_ENV
        fi
        echo "BREAK_ACTION=true" >> $GITHUB_ENV

@@ -4,6 +4,9 @@ inputs:
  e2e-test-id:
    description: "Test id"
    required: true
+  e2e-artifact-id:
+    description: "Artifact id"
+    required: true
  e2e-test-folder:
    description: "Test folder"
    required: true
@@ -33,6 +36,7 @@ inputs:
    description: check ps cloud env
    default: "false"
  e2e-tar-name: #
+    description: tarball name
    required: false
    default: e2e.tar.gz
  apa-proxy: #
@@ -77,7 +81,7 @@ runs:
    - name: download smartrunner test results from s3 bucket if they exist
      shell: bash
      env:
-        REMOTE_PATH: smart-runner/${{ github.run_id}}/${{ inputs.e2e-test-folder }}-${{ inputs.e2e-test-id}}/e2e.tar.gz
+        REMOTE_PATH: smart-runner/${{ github.run_id}}/${{ inputs.e2e-test-folder }}-${{ inputs.e2e-artifact-id}}/e2e.tar.gz
      run: |
        set -u;
        mkdir -p "${SMART_RUNNER_PATH}"
@@ -153,7 +157,7 @@ runs:
        echo $PROXY_HOST_BPM
        echo "GIT_HASH=$GIT_HASH" >> $GITHUB_ENV

-    - name: run test 
+    - name: run test
      id: e2e_run
      if: ${{ steps.determine-affected.outputs.isAffected == 'true' }}
      env:
@@ -177,23 +181,23 @@ runs:
      if: ${{ steps.determine-affected.outputs.isAffected == 'true' && github.event_name == 'schedule' && failure() }}
      uses: ./.github/actions/artifact-append
      with:
-        artifact-name: global-e2e-result
+        artifact-name: "global-e2e-result-${{ inputs.e2e-test-id }}"
        file-name: e2e-failures.txt
        content: "${{ inputs.e2e-test-id }}"

    - name: upload artifacts on gh
      id: upload_gh
      if: ${{ steps.determine-affected.outputs.isAffected == 'true' }}
-      uses: actions/upload-artifact@v3
+      uses: actions/upload-artifact@834a144ee995460fba8ed112a2fc961b36a5ec5a # v4.3.6
      with:
-        name: e2e-artifact-output
+        name: e2e-artifact-output-${{inputs.e2e-artifact-id}}
        path: /home/runner/work/alfresco-ng2-components/alfresco-ng2-components/e2e-output-*

    - name: upload smart-runner tests results on s3 to cache tests
      shell: bash
      if: always()
      env:
-        REMOTE_PATH: "smart-runner/${{ github.run_id}}/${{ inputs.e2e-test-folder }}-${{ inputs.e2e-test-id}}/e2e.tar.gz"
+        REMOTE_PATH: "smart-runner/${{ github.run_id}}/${{ inputs.e2e-test-folder }}-${{inputs.e2e-artifact-id}}/e2e.tar.gz"
      # description: always upload newer results
      run: |
        tar czf "${{ inputs.e2e-tar-name }}" "${SMART_RUNNER_PATH}"
@@ -20,9 +20,7 @@ runs:
      id: sha_out
      run: |
        if [[ -z $TAG_NPM ]]; then
-            echo "TAG_NPM not set, aborting"
-            exit 1
+          echo "TAG_NPM not set, aborting"
+          exit 1
        fi
-        ADF_VERSION=$(npm view @alfresco/adf-core@${TAG_NPM} version)
-        echo "check bundle on TAG_NPM='${TAG_NPM}' and ADF_VERSION='${ADF_VERSION}'"
-        ./scripts/github/build/npm-check-bundles.sh -v ${ADF_VERSION}
+        ./scripts/github/build/npm-check-bundles.sh
@@ -20,18 +20,18 @@ runs:
  using: "composite"
  steps:
      - name: install NPM
-        uses: actions/setup-node@v3
+        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@v1.29.0
+        uses: Alfresco/alfresco-build-tools/.github/actions/git-latest-tag@9d00215f539f669b41c7fabf7b88ccc8f316926c # v6.0.1
 # CACHE
      - name: Node Modules cache
        id: node-modules-cache
        if: ${{ inputs.enable-node-modules-cache == 'true' }}
-        uses: actions/cache@v3
+        uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4.0.2
        env:
          cache-name: node-modules-cache
        with:
@@ -43,7 +43,7 @@ runs:
            node_modules-${{ runner.os }}-build-
            node_modules-${{ runner.os }}-
      - name: pip cache
-        uses: actions/cache@v3
+        uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4.0.2
        if: ${{ inputs.enable-cache == 'true' }}
        with:
          path: ~/.cache/pip
@@ -18,7 +18,7 @@ runs:
  steps:
    - name: Append group
      id: group
-      uses: actions/github-script@v6
+      uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
      env:
        affectedLib: ${{ inputs.affected }}
      with:
@@ -1,6 +1,6 @@
 name: "CodeQL config"

 paths-ignore:
-  - 'e2e/resources/**/*.*'
-  - 'docs/**/*.*'
+  - 'e2e/resources/**'
+  - 'docs/**'

@@ -1,31 +1,92 @@
 version: 2
 updates:
- package-ecosystem: npm
-  directory: "/"
-  schedule:
-    interval: "weekly"
-    day: "sunday"
-    time: "07:00"
-  open-pull-requests-limit: 5
-  target-branch: develop
-  groups:
-      - label: "Angular Updates"
-        packages:
+  - package-ecosystem: npm
+    directory: "/"
+    schedule:
+      interval: "weekly"
+      day: "sunday"
+      time: "07:00"
+    open-pull-requests-limit: 5
+    target-branch: develop
+    groups:
+      angular:
+        patterns:
          - "@angular/*"
-        version: "widen"
-     - label: "Angular-devkit Updates"
-        packages:
+      angular-devkit:
+        patterns:
          - "@angular-devkit/*"
-        version: "widen"
-      - label: "ngrx Updates"
-        packages:
+      ngrx:
+        patterns:
          - "@ngrx/*"
-        version: "widen"
-      - label: "nrwl Updates"
-        packages:
+      nrwl:
+        patterns:
          - "@nrwl/*"
-        version: "widen"    
-  ignore:
-    - dependency-name: "pdfjs-dist"
-    - dependency-name: "@types/*"
-    - dependency-name: "typescript"
+    ignore:
+      - dependency-name: "pdfjs-dist"
+      - dependency-name: "@types/*"
+      - dependency-name: "typescript"
+
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "github-actions"
+    directory: "/.github/actions/artifact-append"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "github-actions"
+    directory: "/.github/actions/artifact-extract"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "github-actions"
+    directory: "/.github/actions/artifact-initialize"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "github-actions"
+    directory: "/.github/actions/before-install"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "github-actions"
+    directory: "/.github/actions/download-node-modules-and-artifacts"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "github-actions"
+    directory: "/.github/actions/e2e"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "github-actions"
+    directory: "/.github/actions/enable-dryrun"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "github-actions"
+    directory: "/.github/actions/get-latest-tag-sha"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "github-actions"
+    directory: "/.github/actions/npm-check-bundle"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "github-actions"
+    directory: "/.github/actions/print-affected-libs"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "github-actions"
+    directory: "/.github/actions/set-npm-tag"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "github-actions"
+    directory: "/.github/actions/setup"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "github-actions"
+    directory: "/.github/actions/setup-chrome"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "github-actions"
+    directory: "/.github/actions/slack-group-area"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "github-actions"
+    directory: "/.github/actions/upload-node-modules-and-artifacts"
+    schedule:
+      interval: "weekly"
@@ -4,14 +4,14 @@ on:
  push:
    branches: [develop, master]
    paths-ignore:
-    - 'e2e/resources/**/*.*'
-    - 'docs/**/*.*'
+    - 'e2e/resources/**'
+    - 'docs/**'
  pull_request:
    # The branches below must be a subset of the branches above
    branches: [develop]
    paths-ignore:
-    - 'e2e/resources/**/*.*'
-    - 'docs/**/*.*'
+    - 'e2e/resources/**'
+    - 'docs/**'
  schedule:
    - cron: '0 5 * * 0'

@@ -22,7 +22,7 @@ jobs:

    steps:
    - name: Checkout repository
-      uses: actions/checkout@v3
+      uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
      with:
        # We must fetch at least the immediate parents so that if this is
        # a pull request then we can checkout the head.
@@ -30,7 +30,7 @@ jobs:

    # Initializes the CodeQL tools for scanning.
    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
+      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@v2
+      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@v2
+      uses: github/codeql-action/analyze@eb055d739abdc2e8de2e5f4ba1a8b246daa779aa # v3.26.0
@@ -73,7 +73,7 @@ jobs:
    runs-on: ubuntu-latest
    name: Initialize artifacts
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
      - uses: ./.github/actions/artifact-initialize
        with:
          artifact-name: global-e2e-result
@@ -91,18 +91,18 @@ jobs:
    needs: release
    timeout-minutes: 20
    name: "Release tag"
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
    env:
      GITHUB_TOKEN: $BOT_GITHUB_TOKEN
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
      - id: set-dryrun
        uses: ./.github/actions/enable-dryrun
        with:
          dry-run-flag: ${{ inputs.dry-run-flag }}
      - name: install NPM
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
        with:
          node-version-file: '.nvmrc'
      - name: "Release tag"
@@ -9,7 +9,7 @@ jobs:
    if: github.event.registry_package.package_type == 'npm' && github.event.registry_package.name == 'adf-core'
    steps:
      - name: Dispatch event to monorepo
-        uses: actions/github-script@v6
+        uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
        with:
          github-token: ${{ secrets.PAT_WRITE_PKG }}
          retries: 3
@@ -11,7 +11,7 @@ on:
      devel:
        description: 'devel'
        required: false
-        type: string
+        type: boolean
        default: false
      cron-run:
        description: 'disables jobs which should not run when cron runs e2es'
@@ -94,11 +94,14 @@ env:
  PROXY_HOST_ECM: ${{ secrets.E2E_HOST }}

 jobs:
-  check-package-lock:
-    runs-on: ubuntu-22.04
+  pre-checks:
+    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+
+      - name: Ensure SHA pinned actions
+        uses: zgosalvez/github-actions-ensure-sha-pinned-actions@b88cd0aad2c36a63e42c71f81cb1958fed95ac87 # v3.0.10

      - name: Check package-lock.json version
        run: |
@@ -110,18 +113,18 @@ jobs:
          fi

  check-if-pr-is-approved:
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
        with:
         fetch-depth: 0

      - name: Get branch name
-        uses: Alfresco/alfresco-build-tools/.github/actions/get-branch-name@v1.36.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@v1.36.0
+        uses: Alfresco/alfresco-build-tools/.github/actions/get-commit-message@76affd16a4dd9a440cf66bf42656b1d826e8dfc2 # v5.34.0

      - name: ci:force flag parser
        shell: bash
@@ -135,8 +138,8 @@ jobs:
          fi

      - name: Get PR number
-        if: ${{ github.event_name != 'schedule' }}
-        uses: kamatama41/get-pr-number-action@5c77b38a1b4974ebf8a9521a689f38a5898eadd6
+        if: ${{ github.event_name != 'schedule' && github.event_name != 'workflow_dispatch' }}
+        uses: kamatama41/get-pr-number-action@0bcaab5752c0b699149e74667c8ce2f764cbb7fa # v0.9.1
        id: action
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
@@ -164,8 +167,7 @@ jobs:
            echo -e "\033[32mCommit by ${{ github.actor }}. No need for approval.\033[0m"
            skip_check="true"
          fi
-
-          if [ "${{ github.event_name }}" == "schedule" ]; then
+          if [ "${{ github.event_name }}" == "schedule" ] || [ "${{ github.event_name }}" == "workflow_dispatch" ]; then
            echo -e "\033[32mSchedule event\033[0m"
            skip_check="true"
          fi
@@ -192,17 +194,18 @@ jobs:
    # long timeout required when cache has to be recreated
    timeout-minutes: 30
    name: "Setup"
-    runs-on: ubuntu-22.04
-    needs: [check-if-pr-is-approved, check-package-lock]
+    runs-on: ubuntu-latest
+    needs: [check-if-pr-is-approved, pre-checks]
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
        with:
          fetch-depth: 0 # Fetch all history for all tags and branches
      - uses: ./.github/actions/setup
      - name: install
        run: |
          npm ci
+          npx nx run js-api:bundle
          npx nx run cli:bundle
          npx nx run testing:bundle
      - run: npx nx print-affected $NX_CALCULATION_FLAGS
@@ -211,26 +214,28 @@ jobs:
  unit-tests:
    timeout-minutes: 30
    name: "Unit tests: ${{ matrix.unit-tests.name }}"
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
    needs: [setup]
    strategy:
      fail-fast: false
      # max-parallel: 4
      matrix:
        unit-tests:
+          - name: js-api
+            exclude: "core,insights,content-services,process-services,process-services-cloud,eslint-plugin-eslint-angular"
          - name: content-services
-            exclude: "insights,core,extensions,process-services,process-services-cloud,eslint-plugin-eslint-angular"
+            exclude: "insights,core,extensions,process-services,process-services-cloud,eslint-plugin-eslint-angular,js-api"
          - name: core
-            exclude: "insights,content-services,process-services,process-services-cloud,eslint-plugin-eslint-angular"
+            exclude: "insights,content-services,process-services,process-services-cloud,eslint-plugin-eslint-angular,js-api"
          - name: insights
-            exclude: "core,extensions,content-services,process-services-cloud,process-services,eslint-plugin-eslint-angular"
+            exclude: "core,extensions,content-services,process-services-cloud,process-services,eslint-plugin-eslint-angular,js-api"
          - name: process-services
-            exclude: "core,extensions,content-services,process-services-cloud,insights,eslint-plugin-eslint-angular"
+            exclude: "core,extensions,content-services,process-services-cloud,insights,eslint-plugin-eslint-angular,js-api"
          - name: process-cloud
-            exclude: "insights,core,extensions,content-services,process-services,eslint-plugin-eslint-angular"
+            exclude: "insights,core,extensions,content-services,process-services,eslint-plugin-eslint-angular,js-api"
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
        with:
          fetch-depth: 0 # Fetch all history for all tags and branches
      - uses: ./.github/actions/setup
@@ -243,11 +248,11 @@ jobs:
    # long timeout required when cache has to be recreated
    timeout-minutes: 30
    name: "Lint"
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
    needs: [setup]
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
        with:
          fetch-depth: 0 # Fetch all history for all tags and branches
      - uses: ./.github/actions/setup
@@ -258,11 +263,11 @@ jobs:
    # long timeout required when cache has to be recreated
    timeout-minutes: 30
    name: "Build libs"
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
    needs: [setup]
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
        with:
          fetch-depth: 0 # Fetch all history for all tags and branches
      - uses: ./.github/actions/setup
@@ -276,10 +281,10 @@ jobs:
    timeout-minutes: 20
    name: "e2e: storybook"
    needs: [build-libs, lint, unit-tests]
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
        with:
          fetch-depth: 0 # Fetch all history for all
      - uses: ./.github/actions/setup
@@ -295,7 +300,7 @@ jobs:
    timeout-minutes: 90
    name: "e2e: ${{ matrix.e2e-test.description }}"
    needs: [build-libs, lint, unit-tests]
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
    strategy:
      fail-fast: false
      # max-parallel: 4
@@ -303,6 +308,7 @@ jobs:
        e2e-test:
          - description: "Core"
            test-id: "core"
+            artifact-id: "core"
            folder: "core"
            provider: "ALL"
            auth: "OAUTH"
@@ -311,6 +317,7 @@ jobs:
            deps: "testing"
          - description: "Content: Components"
            test-id: "content-services"
+            artifact-id: "content-services-components"
            folder: "content-services/components"
            provider: "ECM"
            auth: "BASIC"
@@ -318,6 +325,7 @@ jobs:
            deps: "testing"
          - description: "Content: Directives"
            test-id: "content-services"
+            artifact-id: "content-services-directives"
            folder: "content-services/directives"
            provider: "ECM"
            auth: "BASIC"
@@ -325,6 +333,7 @@ jobs:
            deps: "testing"
          - description: "Content: Document List"
            test-id: "content-services"
+            artifact-id: "content-services-document-list"
            folder: "content-services/document-list"
            provider: "ECM"
            auth: "BASIC"
@@ -332,6 +341,7 @@ jobs:
            deps: "testing"
          - description: "Content: Metadata"
            test-id: "content-services"
+            artifact-id: "content-services-metadata"
            folder: "content-services/metadata"
            provider: "ECM"
            auth: "BASIC"
@@ -339,6 +349,7 @@ jobs:
            deps: "testing"
          - description: "Content: Upload and Versioning"
            test-id: "content-services"
+            artifact-id: "content-services-upload"
            folder: "content-services/upload"
            provider: "ECM"
            auth: "BASIC"
@@ -346,6 +357,7 @@ jobs:
            deps: "testing"
          - description: "Search"
            test-id: "content-services"
+            artifact-id: "content-services-search"
            folder: "search"
            provider: "ECM"
            auth: "BASIC"
@@ -353,6 +365,7 @@ jobs:
            deps: "testing"
          - description: "Process: Form"
            test-id: "process-services"
+            artifact-id: "process-services-form"
            folder: "process-services/form"
            provider: "BPM"
            auth: "OAUTH"
@@ -361,6 +374,7 @@ jobs:
            deps: "testing"
          - description: "Process: Process"
            test-id: "process-services"
+            artifact-id: "process-services-process"
            folder: "process-services/process"
            provider: "BPM"
            auth: "OAUTH"
@@ -369,6 +383,7 @@ jobs:
            deps: "testing"
          - description: "Process: Tasks"
            test-id: "process-services"
+            artifact-id: "process-services-tasks"
            folder: "process-services/tasks"
            provider: "BPM"
            auth: "OAUTH"
@@ -377,6 +392,7 @@ jobs:
            deps: "testing"
          - description: "Process: Widget"
            test-id: "process-services"
+            artifact-id: "process-services-widgets"
            folder: "process-services/widgets"
            provider: "BPM"
            auth: "OAUTH"
@@ -385,6 +401,7 @@ jobs:
            deps: "testing"
          - description: "Process Cloud: Form"
            test-id: "process-services-cloud"
+            artifact-id: "process-services-cloud-form-field"
            folder: "process-services-cloud/form-field"
            provider: "ALL"
            auth: "OAUTH"
@@ -392,17 +409,9 @@ jobs:
            check-cs-env: "true"
            check-ps-cloud-env: "true"
            deps: "testing"
-          - description: "Process Cloud: People"
-            test-id: "process-services-cloud"
-            folder: "process-services-cloud/people"
-            provider: "ALL"
-            auth: "OAUTH"
-            apa-proxy: true
-            check-cs-env: "true"
-            check-ps-cloud-env: "true"
-            deps: "testing"
          - description: "Process Cloud: Process"
            test-id: "process-services-cloud"
+            artifact-id: "process-services-cloud-process"
            folder: "process-services-cloud/process"
            provider: "ALL"
            auth: "OAUTH"
@@ -412,6 +421,7 @@ jobs:
            deps: "testing"
          - description: "Process Cloud: Start Task"
            test-id: "process-services-cloud"
+            artifact-id: "process-services-cloud-start-task"
            folder: "process-services-cloud/start-task"
            provider: "ALL"
            auth: "OAUTH"
@@ -421,6 +431,7 @@ jobs:
            deps: "testing"
          - description: "Process Cloud: Tasks List"
            test-id: "process-services-cloud"
+            artifact-id: "process-services-cloud-task-list"
            folder: "process-services-cloud/task-list"
            provider: "ALL"
            auth: "OAUTH"
@@ -431,7 +442,7 @@ jobs:

    steps:
      - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
        with:
          fetch-depth: 0 # Fetch all history for all
      - uses: ./.github/actions/setup
@@ -439,13 +450,12 @@ jobs:
          enable-cache: "true"
          enable-node-modules-cache: "true"
      - uses: ./.github/actions/download-node-modules-and-artifacts
-      - name: setup chrome
-        uses: ./.github/actions/setup-chrome
      - name: e2e
        uses: ./.github/actions/e2e
        with:
          e2e-test-id: ${{ matrix.e2e-test.test-id }}
          e2e-test-folder: ${{ matrix.e2e-test.folder }}
+          e2e-artifact-id: ${{matrix.e2e-test.artifact-id}}
          e2e-test-provider: ${{ matrix.e2e-test.provider }}
          e2e-test-auth: ${{ matrix.e2e-test.auth }}
          check-cs-env: ${{ matrix.e2e-test.check-cs-env }}
@@ -461,12 +471,12 @@ jobs:
    steps:
      - id: checkoutRepo
        name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
        with:
          fetch-depth: 1
      - name: PR contains forbidden labels
        id: pr-forbidden
-        uses: actions/github-script@v6
+        uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
        with:
          script: |
            const issueHasLabels = require('./scripts/github/update/check-issue-has-label.js');
@@ -486,23 +496,16 @@ jobs:
    if: ${{ always() }}
    runs-on: ubuntu-latest
    name: Final Results
-    needs: [check-if-pr-is-approved, check-package-lock, setup, unit-tests, lint, build-libs, e2e, e2e-storybook]
+    needs: [check-if-pr-is-approved, pre-checks, setup, unit-tests, lint, build-libs, e2e, e2e-storybook]
    steps:
-      - uses: actions/checkout@v3
-      - name: Log e2e result
-        id: e2e-result
-        if: ${{ github.event_name == 'schedule' }}
-        uses: ./.github/actions/artifact-extract
-        with:
-          artifact-name: global-e2e-result
-          file-name: e2e-failures.txt
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
      - name: identify-slack-group
        id: groups
        if: ${{ github.event_name == 'schedule' }}
        uses: ./.github/actions/slack-group-area
        with:
          affected: ${{ steps.e2e-result.outputs.result }}
-      - uses: slackapi/slack-github-action@v1.23.0
+      - uses: slackapi/slack-github-action@70cd7be8e40a46e8b0eced40b0de447bdb42f68e # v1.26.0
        name: Nofify QA failure
        if: ${{ github.event_name == 'schedule' && contains(needs.*.result, 'failure') }}
        env:
@@ -519,4 +522,3 @@ jobs:
      - name: workflow success
        run: exit 0
        if: ${{ contains(needs.*.result, 'success') }}
-
@@ -9,10 +9,10 @@ jobs:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout the latest code
-      uses: actions/checkout@v3
+      uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
      with:
        fetch-depth: 0
    - name: Automatic Rebase
-      uses: cirrus-actions/rebase@1.8
+      uses: cirrus-actions/rebase@b87d48154a87a85666003575337e27b8cd65f691 # 1.8
      env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -78,7 +78,7 @@ jobs:
  setup:
    timeout-minutes: 20
    name: "Setup"
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
    steps:
      - name: set TAG_NPM BRANCH
        shell: bash
@@ -87,7 +87,7 @@ jobs:
          echo "Set TAG with name: ${TAG_NPM}"
          echo "TAG_NPM=${TAG_NPM}" >> $GITHUB_ENV
      - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
        with:
          fetch-depth: 0
      - uses: ./.github/actions/setup
@@ -97,6 +97,7 @@ jobs:
      - name: install
        run: |
          npm ci
+          npx nx run js-api:bundle
          npx nx run cli:bundle
          npx nx run testing:bundle
      - uses: ./.github/actions/upload-node-modules-and-artifacts
@@ -104,13 +105,13 @@ jobs:
  release-npm:
    needs: [setup]
    timeout-minutes: 30
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
    permissions:
      contents: read
      packages: write
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
        with:
          fetch-depth: 0
      - uses: ./.github/actions/setup
@@ -125,10 +126,10 @@ jobs:
      - name: build libraries
        run: |
          set -u;
-          ./scripts/update-version.sh -gnu -nextalpha|| exit 1;
+          ./scripts/update-version.sh -gnu || exit 1;
          npx nx affected:build $NX_CALCULATION_FLAGS --prod --exclude="demoshell" --skip-nx-cache
          npx nx affected $NX_CALCULATION_FLAGS --target=pretheme
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
        name: release libraries GH registry
        with:
          node-version-file: '.nvmrc'
@@ -137,7 +138,7 @@ jobs:
      - run: npx nx affected --target=npm-publish $NX_CALCULATION_FLAGS --tag=branch|| exit 1
        env:
          NODE_AUTH_TOKEN: ${{ secrets.PAT_WRITE_PKG }}
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
        name: release libraries Npm registry
        with:
          node-version-file: '.nvmrc'
@@ -150,8 +151,8 @@ jobs:
  npm-check-bundle:
    needs: [release-npm]
    timeout-minutes: 15
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
      - uses: ./.github/actions/npm-check-bundle
@@ -16,6 +16,10 @@ on:
      - develop-patch*
      - master-patch*

+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: false
+
 env:
  BASE_REF: ${{ github.base_ref }}
  HEAD_REF: ${{ github.head_ref }}
@@ -85,10 +89,10 @@ jobs:
    timeout-minutes: 20
    if: github.event.pull_request.merged == true || github.ref_name == 'master' || github.ref_name == 'master-patch-*'
    name: "Setup"
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
        with:
          fetch-depth: 0
      - uses: ./.github/actions/setup
@@ -98,6 +102,7 @@ jobs:
      - name: install
        run: |
          npm ci
+          npx nx run js-api:bundle
          npx nx run cli:bundle
          npx nx run testing:bundle
      - uses: ./.github/actions/upload-node-modules-and-artifacts
@@ -106,10 +111,10 @@ jobs:
    needs: [setup]
    timeout-minutes: 15
    if: github.event.pull_request.merged == true || github.ref_name == 'master' || github.ref_name == 'master-patch-*'
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
        with:
          fetch-depth: 1
      - run: git fetch --all
@@ -132,10 +137,10 @@ jobs:
    needs: [setup]
    timeout-minutes: 15
    if: github.event.pull_request.merged == true || github.ref_name == 'master' || github.ref_name == 'master-patch-*'
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
        with:
          fetch-depth: 1
      - run: git fetch --all
@@ -159,13 +164,13 @@ jobs:
    needs: [setup]
    timeout-minutes: 30
    if: github.event.pull_request.merged == true || github.ref_name == 'master' || github.ref_name == 'master-patch-*'
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
    permissions:
      contents: read
      packages: write
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
        with:
          fetch-depth: 0
      - uses: ./.github/actions/setup
@@ -183,7 +188,7 @@ jobs:
          ./scripts/github/build/bumpversion.sh
          npx nx affected:build $NX_CALCULATION_FLAGS --prod --exclude="demoshell" --skip-nx-cache
          npx nx affected $NX_CALCULATION_FLAGS --target=pretheme
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
        name: release libraries GH registry
        with:
          node-version-file: '.nvmrc'
@@ -192,7 +197,7 @@ jobs:
      - run: npx nx affected --target=npm-publish $NX_CALCULATION_FLAGS --tag=$TAG_NPM || exit 1
        env:
          NODE_AUTH_TOKEN: ${{ secrets.PAT_WRITE_PKG }}
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
        name: release libraries Npm registry
        with:
          node-version-file: '.nvmrc'
@@ -202,14 +207,34 @@ jobs:
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_REGISTRY_TOKEN }}

+  propagate:
+    needs: [release-npm]
+    if: ${{ contains(toJson(github.event.pull_request.labels.*.name), 'hxp-upstream') }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+      - name: HxP upstream invoke
+        uses: the-actions-org/workflow-dispatch@3133c5d135c7dbe4be4f9793872b6ef331b53bc7 # v4.0.0
+        with:
+          repo: Alfresco/hxp-frontend-apps
+          ref: develop
+          workflow: upstream-adf.yml
+          token: ${{ secrets.ALFRESCO_BUILD_GH_TOKEN }}
+          wait-for-completion: false
+          inputs: >
+            {
+              "tag_version": "alpha"
+            }
+
  npm-check-bundle:
    needs: [release-npm]
    timeout-minutes: 15
    if: github.event.pull_request.merged == true || github.ref_name == 'master' || github.ref_name == 'master-patch-*'
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
      - uses: ./.github/actions/npm-check-bundle

  finalize:
@@ -219,11 +244,11 @@ jobs:
      needs: [release-demoshell, release-storybook, release-npm, npm-check-bundle]
      steps:

-        - uses: slackapi/slack-github-action@v1.23.0
-          name: Nofify FE hxp-front-end-apps workflow failed
+        - uses: slackapi/slack-github-action@70cd7be8e40a46e8b0eced40b0de447bdb42f68e # v1.26.0
+          name: Nofify FE eng-guild-front-end workflow failed
          if: ${{ contains(toJson(needs.*.result), 'failure') }}
          env:
            SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}
          with:
-            channel-id: 'C04N93XU491' #hxp-front-end-apps
-            slack-message: "🔴 Warning: The release workflow of alfresco-ng2-components pipe failed\n Author: name:${{ github.event.pusher.name }}\n Workflow run : <https://github.com/Alfresco/alfresco-ng2-components/actions/runs/${{ github.run_id }}| here>\n>"
+            channel-id: 'C016SMNNL8L' #eng-guild-front-end
+            slack-message: "🔴 Warning: The release workflow of alfresco-ng2-components pipe failed\n Author username: ${{ github.event.pull_request.user.login }}\n Workflow run <https://github.com/Alfresco/alfresco-ng2-components/actions/runs/${{ github.run_id }}| here>\n>"
@@ -1,214 +0,0 @@
-name: Upstream js
-on:
-  schedule:
-    - cron: '0 */3 * * *' # “At minute 0 past every 3rd hour.”
-  workflow_dispatch:
-    inputs:
-      tag_version:
-        description: image tag
-        type: choice
-        required: true
-        options:
-          - alpha
-          - latest
-        default: alpha
-
-jobs:
-  upstream:
-    runs-on: ubuntu-latest
-    outputs:
-      hasAtLeastOneNewVersion: ${{ steps.fetchLatestPkg.outputs.hasAtLeastOneNewVersion }}
-      hasNewVersionAvailableJS: ${{ steps.fetchLatestPkg.outputs.hasVersionNewJS }}
-      latestVersionAvailableJS: ${{ steps.fetchLatestPkg.outputs.latestVersionJS }}
-      hasAtLeastOneNewVersionWithoutPR: ${{ steps.checkPrAlreadyExist.outputs.hasAtLeastOneNewVersionWithoutPR }}
-    steps:
-      - id: checkoutRepo
-        name: Checkout repository
-        uses: actions/checkout@v3
-        with:
-          fetch-depth: 1
-      - id: fetchLatestPkg
-        name: Fetch the latest package version
-        uses: actions/github-script@v6
-        env:
-          TAG_VERSION: ${{ inputs.tag_version }}
-        with:
-          github-token: ${{ secrets.PAT_WRITE_PKG }}
-          script: |
-            const tagVersion = process.env.TAG_VERSION;
-            console.log('tagVersion:',tagVersion);
-            const getLatestVersionOf = require('./scripts/github/update/latest-version-of.js');
-
-            const { hasVersionNew: hasVersionNewJS, latestVersion: latestVersionJS } = await getLatestVersionOf({github, context, dependencyName: 'js-api', tagVersion});
-            console.log('hasVersionNewJS', hasVersionNewJS)
-            console.log('latestVersionJS', latestVersionJS)
-
-            if (hasVersionNewJS  === 'true' ) {
-              core.setOutput('hasAtLeastOneNewVersion', 'true');
-              core.setOutput('hasVersionNewJS', 'true');
-              core.setOutput('latestVersionJS', latestVersionJS);
-            } else {
-              core.setOutput('hasAtLeastOneNewVersion', 'false');
-              console.log('No new version available, skipping upstream!')
-            }
-
-      - name: Check value after
-        run: |
-          echo "The value hasAtLeastOneNewVersion is: ${{ steps.fetchLatestPkg.outputs.hasAtLeastOneNewVersion }}"
-          echo "The value hasVersionNewJS is: ${{ steps.fetchLatestPkg.outputs.hasVersionNewJS }}"
-          echo "The value latestVersionJS is: ${{ steps.fetchLatestPkg.outputs.latestVersionJS }}"
-
-      - id: checkPrAlreadyExist
-        name: Check PR with latest already exist
-        if: ${{ steps.fetchLatestPkg.outputs.hasAtLeastOneNewVersion == 'true' }}
-        uses: actions/github-script@v6
-        env:
-          HAS_NEW_JS_VERSION: ${{ steps.fetchLatestPkg.outputs.hasVersionNewJS }}
-          LATEST_JS_VERSION: ${{ steps.fetchLatestPkg.outputs.latestVersionJS }}
-        with:
-          github-token: ${{ secrets.BOT_GITHUB_TOKEN }}
-          script: |
-            const hasVersionNewJS = process.env.HAS_NEW_JS_VERSION;
-            const latestVersionJS = process.env.LATEST_JS_VERSION;
-
-            const checkPRAlreadyExist = require('./scripts/github/update/check-pr-already-exist.js');
-            let isPRWithLatestJSAlreadyAvailable = false;
-
-            if (hasVersionNewJS === 'true') {
-              isPRWithLatestJSAlreadyAvailable = await checkPRAlreadyExist({github, context, version: latestVersionJS});
-              console.log('isPRWithLatestJSAlreadyAvailable', isPRWithLatestJSAlreadyAvailable);
-            }
-
-            if (isPRWithLatestJSAlreadyAvailable) {
-              console.log('Warning: Upstream PR already exist, stop the migration execution!');
-              core.setOutput('hasAtLeastOneNewVersionWithoutPR', 'false');
-            } else {
-              core.setOutput('hasAtLeastOneNewVersionWithoutPR', 'true');
-            }
-
-  migrate:
-    if: ${{ needs.upstream.outputs.hasAtLeastOneNewVersionWithoutPR == 'true'  }}
-    runs-on: ubuntu-latest
-    needs: upstream
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v3
-        with:
-          token: ${{ secrets.BOT_GITHUB_TOKEN }}
-          fetch-depth: 1
-      - name: setup NPM
-        uses: actions/setup-node@v3
-        with:
-          node-version-file: '.nvmrc'
-          cache-dependency-path: package-lock.json
-      - name: "General :: dbpci-install"
-        run: |
-          npm ci --ignore-scripts
-      - name: Migration
-        shell: bash
-        env:
-          IS_JS_AFFECTED: ${{ needs.upstream.outputs.hasNewVersionAvailableJS }}
-          PACKAGE_VERSION_JS: ${{ needs.upstream.outputs.latestVersionAvailableJS }}
-          BRANCH_TO_CREATE: "upstream-dependencies"
-        run: |
-
-          migrateDependenciesJS() {
-            echo "Update JS dependencies to: ${PACKAGE_VERSION_JS}"
-            echo "Calling migration JS"
-            npx nx migrate @alfresco/js-api@${PACKAGE_VERSION_JS}
-            echo "Migration JS done"
-          }
-
-          migrateLibDependenciesJS() {
-            eval projects=( "cli"
-              "core"
-              "content-services"
-              "process-services"
-              "process-services-cloud"
-              "insights"
-              "testing"
-              "extensions" )
-
-            projectslength=${#projects[@]}
-            for (( i=0; i<${projectslength}; i++ ));
-            do
-              echo "Update JS dependencies in adf-${projects[$i]} to: ${PACKAGE_VERSION_JS}"
-              DESTDIR="lib/${projects[$i]}"
-              sed -i "${sedi[@]}" "s/\"@alfresco\/js-api\": \".*\"/\"@alfresco\/js-api\": \">=${PACKAGE_VERSION_JS}\"/g"  ${DESTDIR}/package.json
-            done
-          }
-
-          regeneratePackageLock() {
-            echo "Regenerate lock"
-            npm i --package-lock-only
-            echo "Package-lock done."
-          }
-
-          if git checkout ${BRANCH_TO_CREATE} 2>/dev/null ; then
-            git reset --hard origin/develop
-            echo "Reset branch"
-          fi
-
-          if [[ "$IS_JS_AFFECTED" == "true" ]]; then
-            migrateDependenciesJS
-            migrateLibDependenciesJS
-          fi
-
-          regeneratePackageLock
-
-      - name: Commit Code
-        if: ${{ needs.upstream.outputs.hasAtLeastOneNewVersion == 'true'  }}
-        uses: stefanzweifel/git-auto-commit-action@v4
-        with:
-          commit_message: "[ci:force][auto-commit] Update dependencies JS:${{ needs.upstream.outputs.latestVersionAvailableJS }}"
-          branch: upstream-dependencies
-          push_options: '--force'
-          create_branch: true
-
-      - name: Create a Pull request
-        uses: actions/github-script@v6
-        env:
-          PACKAGE_VERSION_JS: ${{ needs.upstream.outputs.latestVersionAvailableJS }}
-        with:
-          github-token: ${{ secrets.BOT_GITHUB_TOKEN }}
-          script: |
-            const { PACKAGE_VERSION_JS } = process.env
-            const BRANCH_TO_CREATE = 'upstream-dependencies';
-
-            const { data: prs } = await github.rest.pulls.list({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              state: 'open',
-              head: `${context.repo.owner}:${BRANCH_TO_CREATE}`,
-              base: 'develop'
-            });
-
-            if (prs.length < 1) {
-                const payloadPullRequest = {
-                  owner: context.repo.owner,
-                  repo: context.repo.repo,
-                  title: `GH Auto: Upstream dependencies JS-API:${PACKAGE_VERSION_JS}`,
-                  head: `${context.repo.owner}:${BRANCH_TO_CREATE}`,
-                  base: 'develop',
-                  body: `Automatic PR`
-                };
-
-                console.log('Payload: ',payloadPullRequest);
-
-                const { data: pr } = await github.rest.pulls.create(payloadPullRequest);
-                return pr.number;
-            } else {
-                const upstreamPrOpen = prs[0];
-
-                // override the title to contains the latest js dep number
-                const payloadUpdatePullRequest = {
-                  owner: context.repo.owner,
-                  repo: context.repo.repo,
-                  pull_number: upstreamPrOpen.number,
-                  title: `GH Auto: Upstream dependencies JS-API:${PACKAGE_VERSION_JS}`,
-                };
-
-                await github.rest.pulls.update(payloadUpdatePullRequest);
-                return upstreamPrOpen.number;
-            }
-            console.log(`Trigger a dispatch event for the monorepo`);
@@ -35,3 +35,4 @@ licenses.txt
 .DS_Store
 .angular
 NX
+.nx
@@ -1,4 +1,5 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"

-npm run affected:lint
+export NODE_OPTIONS=--max_old_space_size=8192
+npx lint-staged
@@ -0,0 +1,4 @@
+{
+  "*.{ts,js}": ["prettier --write", "eslint"],
+  "*.{css,scss}": ["prettier --write", "stylelint --fix"]
+}
@@ -1 +1 @@
-18
+18.20.3
@@ -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']
 };
@@ -2,3 +2,4 @@ export const parameters = {
    docs: { inlineStories: true },
    controls: { expanded: true }
 };
+export const tags = ['autodocs'];
@@ -0,0 +1,65 @@
+{
+  "extends": ["stylelint-config-standard-scss"],
+  "rules": {
+    "color-function-notation": "legacy",
+    "alpha-value-notation": "number",
+    "color-no-invalid-hex": true,
+    "function-calc-no-unspaced-operator": true,
+    "function-name-case": "lower",
+    "function-url-quotes": "always",
+    "function-url-scheme-disallowed-list": [
+      "data"
+    ],
+    "length-zero-no-unit": true,
+    "string-no-newline": true,
+    "unit-no-unknown": true,
+    "unit-allowed-list": [
+      "px",
+      "%",
+      "deg",
+      "ms",
+      "em",
+      "vh",
+      "vw",
+      "vmin",
+      "s",
+      "rem"
+    ],
+    "shorthand-property-no-redundant-values": true,
+    "declaration-no-important": true,
+    "no-duplicate-at-import-rules": true,
+    "declaration-block-no-duplicate-properties": [
+      true,
+      {
+        "ignore": [
+          "consecutive-duplicates-with-different-values"
+        ]
+      }
+    ],
+    "declaration-block-single-line-max-declarations": 1,
+    "declaration-property-value-disallowed-list": [
+      {
+        "/.*/": [
+          "initial"
+        ]
+      },
+      {
+        "message": "The `initial` value is not supported in IE."
+      }
+    ],
+    "selector-pseudo-element-colon-notation": "double",
+    "selector-pseudo-element-no-unknown": [true, {
+      "ignorePseudoElements": ["ng-deep"]
+    }],
+    "selector-type-case": "lower",
+    "selector-max-id": 0,
+    "selector-class-pattern": [
+      "^_?(adf|adf-|app|app-|example-|demo-|textLayer|canvasWrapper|page)",
+      {
+        "resolveNestedSelectors": true
+      }
+    ],
+    "scss/dollar-variable-empty-line-before": null,
+    "scss/at-rule-conditional-no-parentheses": null
+  }
+}
@@ -10,7 +10,7 @@
          "name": "e2e",
          "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
          "args": [
-              "`${workspaceFolder}/.vscode/closest-config-finder.sh ${file} e2e/protractor.conf.js`",
+              "./e2e/protractor.conf.js",
              "--specs=${file}"
          ],
          "envFile": "${workspaceFolder}/.env",
@@ -22,14 +22,15 @@
  "css.validate": false,
  "scss.validate": false,
  "stylelint.config": {
-      "extends": "./stylelint-config"
+      "extends": "./.stylelintrc.json"
  },
-  "stylelint.configFile": "stylelint-config.json",
+  "stylelint.configFile": ".stylelintrc.json",
  "stylelint.validate": [
    "css",
    "less",
    "postcss",
    "scss"
  ],
-  "editor.guides.indentation": true
+  "editor.guides.indentation": true,
+  "typescript.tsdk": "node_modules/typescript/lib"
 }
@@ -45,14 +45,11 @@ Note: If you need more information about how to sync your fork, see [this page](
 ## Code style

 The code style for ADF follows the [Angular style guide](https://angular.io/guide/styleguide) plus some internal rules.
-You don’t have to worry too much about those rules because they are automatically checked by tslint/codelyzer/adf-rules.
-If your code is not compliant with one of these rules you will see an error when you build the project along with some help on how to fix it.

-The ADF-Rules are as follows:
+The codebase is also checked with:

-* File name component/directive cannot start with Alfresco/Activiti/adf - this rule is to help developers find files easily
-* Class names cannot start with Alfresco/Activiti/adf for the same reason as above
-* scss is mandatory. All the classes need to have the `adf-` prefix
+- ESLint tool
+- Stylelint tool

 ## Test guide

@@ -4,10 +4,6 @@ FROM node:18.16-alpine3.17 AS builder
 WORKDIR /usr/src/alfresco
 COPY package.json package.json

-RUN mkdir -p ./licenses && \
-  yarn licenses list > ./licenses/licenses.txt && \
-  yarn licenses generate-disclaimer > ./licenses/disclaimer.txt
-
 # 2. Generate image

 FROM nginxinc/nginx-unprivileged:1.21-alpine
@@ -23,7 +19,6 @@ COPY docker/docker-entrypoint.d/* /docker-entrypoint.d/

 COPY dist/$PROJECT_NAME /usr/share/nginx/html/
 COPY dist/$PROJECT_NAME/app.config.json /etc/nginx/templates/app.config.json.template
-COPY --from=builder /usr/src/alfresco/licenses /usr/share/nginx/html/

 USER root
 RUN chmod a+w -R /etc/nginx/conf.d
@@ -1,5 +1,5 @@
 {
-  "version": "0.1",
+  "version": "0.2",
  "language": "en",
  "words": [
    "activiti",
@@ -44,6 +44,7 @@
    "docx",
    "dropdownrestprocess",
    "Droppable",
+    "dryrun",
    "ECMBPM",
    "ECMHOST",
    "Examinate",
@@ -76,7 +77,6 @@
    "lastname",
    "listgrid",
    "mapitem",
-    "markdownlint",
    "mimetype",
    "mincount",
    "minlength",
@@ -90,6 +90,7 @@
    "numbervisibilityprocess",
    "OAUTHCONFIG",
    "oidc",
+    "overridable",
    "pdfjs",
    "penta",
    "printf",
@@ -125,6 +126,7 @@
    "typeahed",
    "uncheck",
    "Unclaim",
+    "Undeployed",
    "unfavorite",
    "unlisten",
    "unshare",
@@ -136,10 +138,14 @@
    "waypoint",
    "waypoints",
    "webm",
-    "webscript",
    "Whitespaces",
    "xdescribe",
-    "xsrf"
+    "xsrf",
+    "BPMECM",
+    "berseria",
+    "zestiria",
+    "validatable",
+    "edjs"
  ],
  "dictionaries": [
    "html",
@@ -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 { output } = require("@nrwl/workspace");
+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'
+    });
 }
@@ -49,7 +49,7 @@ npm start

 This command compiles and starts the project in watch mode.
 Browser will automatically reload upon changes.
-Upon start you can navigate to `http://localhost:3000` with your preferred browser.
+Upon start, you can navigate to `http://localhost:3000` with your preferred browser.

 ### Important notes

@@ -1,77 +0,0 @@
-var port = process.env.PORT || 3000,
-    http = require('http'),
-    fs = require('fs'),
-    url = require('url'),
-    mime = require('mime'),
-    html = fs.readFileSync('index.html');
-
-var log = function(entry) {
-    fs.appendFileSync('/tmp/sample-app.log', new Date().toISOString() + ' - ' + entry + '\n');
-};
-
-var server = http.createServer(function (req, res) {
-
-    // Parse the request containing file name
-    var pathname = url.parse(req.url).pathname;
-
-    // Print the name of the file for which request is made.
-    console.log("Request for " + pathname + " received.");
-
-    if (req.method === 'POST') {
-        var body = '';
-
-        req.on('data', function(chunk) {
-            body += chunk;
-        });
-
-        req.on('end', function() {
-            if (req.url === '/') {
-                log('Received message: ' + body);
-            } else if (req.url === '/scheduled') {
-                log('Received task ' + req.headers['x-aws-sqsd-taskname'] + ' scheduled at ' + req.headers['x-aws-sqsd-scheduled-at']);
-            }
-
-            res.writeHead(200, 'OK', {'Content-Type': 'text/plain'});
-            res.end();
-        });
-    } else {
-        var filename = pathname.substr(1);
-        if(filename === '' || filename.indexOf('.') === -1){
-            filename = 'index.html';
-        }
-        // Read the requested file content from file system
-        fs.readFile(filename, function (err, data) {
-            if (err) {
-                console.log(err, filename);
-                // HTTP Status: 404 : NOT FOUND
-                // Content Type: text/plain
-                res.writeHead(404, {'Content-Type': 'text/html'});
-            }else{
-                //Page found
-                // HTTP Status: 200 : OK
-                // Content Type: text/plain
-                var type = mime.lookup(filename);
-                console.log('type',type);
-                if (!res.getHeader('content-type')) {
-                    var charset = mime.charsets.lookup(type);
-                    res.setHeader('Content-Type', type + (charset ? '; charset=' + charset : ''));
-                }
-                if(type.indexOf('image') > -1 || type.indexOf('font') > -1){
-                    var img = fs.readFileSync(pathname.substr(1));
-                    res.end(img, 'binary');
-                }else{
-                    res.write(data.toString());
-                }
-                // Write the content of the file to response body
-            }
-            // Send the response body
-            res.end();
-        });
-    }
-});
-
-// Listen on port 3000, IP defaults to 127.0.0.1
-server.listen(port);
-
-// Put a friendly message on the terminal
-console.log('Server running at http://127.0.0.1:' + port + '/');
@@ -1,31 +0,0 @@
-/*!
- * @license
- * Copyright © 2005-2023 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 { MyAppPage } from './app.po';
-
-describe('MyApp App', () => {
-    let page: MyAppPage;
-
-    beforeEach(() => {
-        page = new MyAppPage();
-    });
-
-    it('should display toolbar', () => {
-        page.navigateTo();
-        expect(page.getToolbar()).toBeDefined();
-    });
-});
@@ -1,9 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/e2e",
-    "module": "commonjs",
-    "target": "es5",
-    "types": ["jasmine", "jasminewd2", "node"]
-  }
-}
@@ -1,7 +1,7 @@
 {
  "name": "Alfresco-ADF-Angular-Demo",
  "description": "Demo shell for Alfresco Angular components",
-  "version": "6.3.0",
+  "version": "6.9.0",
  "author": "Hyland Software, Inc. and its affiliates",
  "repository": {
    "type": "git",
@@ -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"]
+      }
+    }
+  }
+}
@@ -1,5 +1,5 @@
 {
-  "$schema": "../../lib/core/src/lib/app-config/schema.json",
+  "$schema": "../../lib/core/src/lib/app-config/app.config.schema.json",
  "ecmHost": "{protocol}//{hostname}{:port}",
  "bpmHost": "{protocol}//{hostname}{:port}",
  "identityHost": "{protocol}//{hostname}{:port}/auth/admin/realms/alfresco",
@@ -20,7 +20,8 @@
    "clientId": "alfresco",
    "scope": "openid profile email",
    "secret": "",
-    "implicitFlow": true,
+    "implicitFlow": false,
+    "codeFlow": true,
    "silentLogin": true,
    "redirectSilentIframeUri": "{protocol}//{hostname}{:port}/assets/silent-refresh.html",
    "redirectUri": "/",
@@ -34,7 +35,7 @@
  "application": {
    "storagePrefix": "ADF",
    "name": "Alfresco ADF Application",
-    "copyright": "© 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved."
+    "copyright": "© 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved."
  },
  "notifications": true,
  "search": [{
@@ -309,25 +310,12 @@
          }
        }
      },
-      {
-        "id": "createdDateRange",
-        "name": "Created Date (range)",
-        "enabled": true,
-        "component": {
-          "selector": "date-range",
-          "settings": {
-            "field": "cm:created",
-            "dateFormat": "DD-MMM-YY",
-            "maxDate": "today"
-          }
-        }
-      },
      {
        "id": "createdModifiedDateRange",
        "name": "Date",
        "enabled": true,
        "component": {
-          "selector": "date-range-advanced",
+          "selector": "date-range",
          "settings": {
            "dateFormat": "dd-MMM-yy",
            "maxDate": "today",
@@ -634,7 +622,7 @@
            "unit": "Byte",
            "field": "cm:content.size",
            "min": 0,
-            "max": 18,
+            "max": 4000,
            "step": 1,
            "thumbLabel": true
          }
@@ -745,15 +733,17 @@
      {
        "id": "createdDateRange",
        "name": "SEARCH.SEARCH_HEADER.FILTERS.DATE.TITLE",
-        "columnKey": "createdAt",
        "enabled": true,
        "component": {
          "selector": "date-range",
          "settings": {
            "allowUpdateOnChange": false,
+            "dateFormat": "dd-MMM-yy",
+            "maxDate": "today",
            "field": "cm:created",
-            "dateFormat": "DD-MMM-YY",
-            "maxDate": "today"
+            "displayedLabelsByField": {
+              "cm:created": "Created Date"
+            }
          }
        }
      }
@@ -11,7 +11,3 @@ router-outlet[name='overlay'] + * {
    height: 100%;
    width: 100%;
 }
-
-[dir='rtl'] .mat-icon {
-    transform: scale(-1, 1);
-}
@@ -1,6 +1,6 @@
 /*!
 * @license
- * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ * 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.
@@ -18,11 +18,11 @@
 import { Component, ViewEncapsulation, OnInit } from '@angular/core';
 import {
    AuthenticationService,
-    AlfrescoApiService,
    PageTitleService
 } from '@alfresco/adf-core';
 import { Router } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
+import { AdfHttpClient } from '@alfresco/adf-core/api';

@Component({
    selector: 'app-root',
@@ -33,7 +33,7 @@ import { MatDialog } from '@angular/material/dialog';
 export class AppComponent implements OnInit {

    constructor(private pageTitleService: PageTitleService,
-                private alfrescoApiService: AlfrescoApiService,
+                private adfHttpClient: AdfHttpClient,
                private authenticationService: AuthenticationService,
                private router: Router,
                private dialogRef: MatDialog) {
@@ -43,7 +43,7 @@ export class AppComponent implements OnInit {
    ngOnInit() {
        this.pageTitleService.setTitle('title');

-        this.alfrescoApiService.getInstance().on('error', (error) => {
+        this.adfHttpClient.on('error', (error) => {
            if (error.status === 401) {
                if (!this.authenticationService.isLoggedIn()) {
                    this.dialogRef.closeAll();
@@ -1,6 +1,6 @@
 /*!
 * @license
- * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ * 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.
@@ -17,77 +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 { HomeComponent } from './components/home/home.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 { MetadataDialogAdapterComponent } from './components/files/metadata-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 { TreeViewSampleComponent } from './components/tree-view/tree-view-sample.component';
-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 { CloudBreadcrumbsComponent } from './components/cloud/cloud-breadcrumb-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 { CoreAutomationService } from '../testing/automation.service';

@NgModule({
    imports: [
        BrowserModule,
        environment.e2e ? NoopAnimationsModule : BrowserAnimationsModule,
-        ReactiveFormsModule,
-        RouterModule.forRoot(appRoutes, { useHash: true, relativeLinkResolution: 'legacy' }),
-        ...(environment.oidc ? [AuthModule.forRoot({ useHash: true })] : []),
-        FormsModule,
+        RouterModule.forRoot(appRoutes, { useHash: true }),
+        AuthModule.forRoot({ useHash: true }),
        HttpClientModule,
-        MaterialModule,
        TranslateModule.forRoot(),
        CoreModule.forRoot(),
        ContentModule.forRoot(),
@@ -96,48 +49,9 @@ import { UserInfoComponent } from './components/app-layout/user-info/user-info.c
        ProcessServicesCloudModule.forRoot(),
        ExtensionsModule.forRoot(),
        NgChartsModule,
-        AppCloudSharedModule,
        MonacoEditorModule.forRoot()
    ],
-    declarations: [
-        AppComponent,
-        LogoutComponent,
-        AppLayoutComponent,
-        UserInfoComponent,
-        HomeComponent,
-        SearchBarComponent,
-        SearchResultComponent,
-        ProcessServiceComponent,
-        ShowDiagramComponent,
-        FormViewerComponent,
-        FormNodeViewerComponent,
-        AppsViewComponent,
-        FilesComponent,
-        FormComponent,
-        VersionManagerDialogAdapterComponent,
-        MetadataDialogAdapterComponent,
-        TaskAttachmentsComponent,
-        ProcessAttachmentsComponent,
-        DemoPermissionComponent,
-        DemoErrorComponent,
-        TreeViewSampleComponent,
-        CloudLayoutComponent,
-        AppsCloudDemoComponent,
-        TasksCloudDemoComponent,
-        ProcessesCloudDemoComponent,
-        TaskDetailsCloudDemoComponent,
-        CloudViewerComponent,
-        ProcessDetailsCloudDemoComponent,
-        StartTaskCloudDemoComponent,
-        StartProcessCloudDemoComponent,
-        CloudBreadcrumbsComponent,
-        CloudFiltersDemoComponent,
-        FormCloudDemoComponent,
-        CustomEditorComponent,
-        CustomWidgetComponent,
-        ProcessCloudLayoutComponent,
-        SearchFilterChipsComponent
-    ],
+    declarations: [AppComponent],
    providers: [
        { provide: AppConfigService, useClass: DebugAppConfigService }, // not use this service in production
        provideTranslations('app', 'resources')
@@ -1,6 +1,6 @@
 /*!
 * @license
- * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ * 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.
@@ -27,10 +27,9 @@ 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 { TreeViewSampleComponent } from './components/tree-view/tree-view-sample.component';
 import { AppsCloudDemoComponent } from './components/cloud/apps-cloud-demo.component';
 import { CloudLayoutComponent } from './components/cloud/cloud-layout.component';
 import { TasksCloudDemoComponent } from './components/cloud/tasks-cloud-demo.component';
@@ -43,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',
@@ -58,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',
@@ -66,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: '',
@@ -87,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: '',
@@ -147,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',
@@ -178,7 +202,7 @@ export const appRoutes: Routes = [
            },
            {
                path: 'search-filter-chips',
-                component: SearchFilterChipsComponent,
+                component: AppSearchFilterChipsComponent,
                canActivate: [AuthGuardEcm]
            },
            {
@@ -245,22 +269,35 @@ export const appRoutes: Routes = [
                component: DemoPermissionComponent,
                canActivate: [AuthGuardEcm]
            },
-            {
-                path: 'treeview',
-                component: TreeViewSampleComponent,
-                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',
@@ -18,18 +18,30 @@
                <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>

    <adf-sidenav-layout-navigation>
-        <ng-template let-isMenuMinimized="isMenuMinimized">
+        <ng-template>
            <mat-nav-list class="app-sidenav-linklist">
                <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>
-                            <span matLine *ngIf="!isMenuMinimized()">{{link.title | translate }}</span>
+                            <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"
                                [matMenuTriggerFor]="nestedMenu">arrow_right</mat-icon>
@@ -40,15 +52,15 @@
                        <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>
-                            <span matLine *ngIf="!isMenuMinimized()">{{link.title | translate }}</span>
+                            <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>
-                    <span matLine *ngIf="!isMenuMinimized()">Logout</span>
+                    <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>
@@ -1,7 +1,3 @@
-adf-file-uploading-dialog {
-    z-index: 1100;
-}
-
 .app-layout {
    display: flex;
    flex: 1;
@@ -12,25 +8,7 @@ adf-file-uploading-dialog {
        color: var(--theme-primary-color);
    }

-    .app-sidenav-link {
-        .mat-list-text {
-            font-size: 14px;
-            white-space: nowrap;
-            min-width: 120px;
-            padding: 0 10px;
-        }
-    }
-
    &-menu-spacer {
        flex: 1 1 auto;
    }
 }
-
-mat-sidenav-content > div {
-    display: flex;
-    height: 100%;
-
-    > div {
-        flex: auto;
-    }
-}
@@ -1,6 +1,6 @@
 /*!
 * @license
- * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ * 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.
@@ -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,19 +72,26 @@ 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' },
-        { href: '/treeview', icon: 'nature', title: 'Tree View' }
+        { href: '/settings-layout', icon: 'settings', title: 'Settings' }
    ];

    enableRedirect = true;
@@ -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>
@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 .app-form-container {
    padding: 10px;
 }
@@ -27,13 +29,13 @@
 }

 .app-form-config-editor {
-    height: 500px !important;
+    height: 500px;
 }

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

 .app-upload-config-button {
@@ -1,6 +1,6 @@
 /*!
 * @license
- * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ * 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.
@@ -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,
@@ -0,0 +1,101 @@
+<div
+    id="userinfo_container"
+    [class.adf-userinfo-name-right]="showOnRight"
+    (keyup)="onKeyPress($event)"
+    tabindex="0"
+    role="button"
+    class="adf-userinfo-container"
+    *ngIf="canShow"
+>
+    <span *ngIf="showName" id="adf-userinfo-ecm-name-display" class="adf-userinfo-name">
+        {{ecmUser | fullName}}
+    </span>
+    <button mat-button [matMenuTriggerFor]="menu" class="adf-userinfo-menu_button adf-content-userinfo-button"
+            data-automation-id="adf-user-profile">
+        <div class="adf-userinfo-button-profile" id="user-profile">
+            <div *ngIf="identityUser; else showEcmUserImage" id="identity-user-image">
+                <div *ngIf="ecmUser?.avatarId; else initialTemplate">
+                    <div class="adf-userinfo-profile-container">
+                        <img id="logged-user-img" [src]="getEcmAvatar(ecmUser.avatarId)" alt="user-info-profile-button"
+                             class="adf-userinfo-profile-image"/>
+                    </div>
+                </div>
+                <ng-template #initialTemplate>
+                    <div [innerHTML]="identityUser | usernameInitials:'adf-userinfo-pic'"></div>
+                </ng-template>
+            </div>
+            <ng-template #showEcmUserImage>
+                <div id="ecm-user-image">
+                    <div *ngIf="ecmUser.avatarId; else initialTemplate" class="adf-userinfo-profile-container">
+                        <img id="logged-user-img" [src]="getEcmAvatar(ecmUser.avatarId)" alt="user-info-profile-button"
+                             class="adf-userinfo-profile-image"/>
+                    </div>
+                    <ng-template #initialTemplate>
+                        <div [outerHTML]="ecmUser | usernameInitials:'adf-userinfo-pic'"></div>
+                    </ng-template>
+                </div>
+            </ng-template>
+        </div>
+    </button>
+
+    <mat-menu #menu="matMenu" id="user-profile-lists" [xPosition]="menuPositionX" [yPosition]="menuPositionY"
+              [overlapTrigger]="false" class="adf-userinfo-menu">
+        <mat-card appearance="outlined" *ngIf="mode === userInfoMode.CONTENT" class="adf-userinfo-card adf-content-userinfo-card">
+            <mat-card-header class="adf-userinfo-card-header" [style.background-image]="'url(' + ecmBackgroundImage + ')'">
+                <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"
+                         alt="ecm-profile-image" [src]="getEcmAvatar(ecmUser.avatarId)"/>
+                </div>
+                <ng-template #initialTemplate>
+                    <div
+                      [outerHTML]="ecmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
+                </ng-template>
+
+                <div class="mat-headline-6" id="ecm-username">{{ecmUser | fullName}}</div>
+            </mat-card-header>
+            <mat-card-content>
+                <div class="adf-userinfo-supporting-text">
+                    <div class="adf-userinfo-detail">
+                        <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>
+                    </div>
+                    <div class="adf-userinfo-detail">
+                                    <span class="adf-userinfo__secondary-info" id="ecm-job-title-label">
+                                        {{ 'USER_PROFILE.LABELS.ECM.JOB_TITLE' | translate }}
+                                        <span id="ecm-job-title"> {{ ecmUser.jobTitle ? ecmUser.jobTitle : 'N/A' }} </span>
+                                    </span>
+                    </div>
+                </div>
+            </mat-card-content>
+        </mat-card>
+        <mat-card appearance="outlined" *ngIf="mode === userInfoMode.CONTENT_SSO" class="adf-userinfo-card adf-content-userinfo-card">
+            <mat-card-header class="adf-userinfo-card-header"
+                             [style.background-image]="'url(' + bpmBackgroundImage + ')'">
+                <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"
+                         alt="ecm-profile-image" [src]="getEcmAvatar(ecmUser.avatarId)"/>
+                </div>
+                <ng-template #initialTemplate>
+                    <div
+                      [outerHTML]="identityUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
+                </ng-template>
+                <div class="mat-headline-6" id="identity-username">{{identityUser | fullName}}</div>
+            </mat-card-header>
+            <mat-card-content>
+                <div class="adf-userinfo-supporting-text">
+                    <div class="adf-userinfo-detail">
+                        <h2 id="identity-full-name"
+                            class="adf-userinfo__detail-title">{{identityUser | fullName}}</h2>
+                        <span id="identity-email"> {{identityUser.email}} </span>
+                        <a href="#/profile">
+                            {{ 'USER_PROFILE.LABELS.MY_PROFILE' | translate }}</a>
+                    </div>
+                </div>
+            </mat-card-content>
+        </mat-card>
+    </mat-menu>
+</div>
@@ -1,3 +1,5 @@
+@import 'styles/flex';
+
 .adf {
    &-userinfo-container {
        display: flex;
@@ -12,7 +14,7 @@
    &-userinfo-name {
        padding: 0 5px;

-        @media screen and (max-width: 959px) {
+        @include layout-bp(lt-md) {
            display: none;
        }
    }
@@ -47,7 +49,7 @@
        display: inline-block;
    }

-    &-userinfo-menu_button.mat-button {
+    &-userinfo-menu_button.adf-content-userinfo-button {
        margin-right: 0;
        border-radius: 90%;
        padding: 0;
@@ -55,21 +57,6 @@
        height: 40px;
    }

-    &-userinfo-tab .mat-tab-header {
-        align-self: center;
-        width: 100%;
-        min-width: 250px;
-    }
-
-    &-userinfo-tab .mat-tab-label {
-        flex: auto;
-        font-weight: 500;
-        font-size: var(--theme-body-1-font-size);
-        text-transform: uppercase;
-        line-height: 48px;
-        text-align: center;
-    }
-
    &-userinfo-card-header {
        align-items: center;
        display: flex;
@@ -79,48 +66,24 @@
        box-sizing: border-box;
    }

-    &-userinfo-card.mat-card {
+    &-userinfo-card.adf-content-userinfo-card {
        padding: 0;
    }

    &-userinfo-supporting-text {
-        font-size: var(--theme-body-1-font-size);
-        font-weight: 400;
-        letter-spacing: 0;
-        line-height: 18px;
        overflow: hidden;
        padding: 32px;
        column-count: 2;
        display: flex;
        justify-content: space-between;

-        @media screen and (max-width: 599px) {
+        @include layout-bp(lt-sm) {
            padding: 10px;
        }
    }

-    &-userinfo-title {
-        font-size: var(--theme-title-font-size);
-    }
-
-    &-userinfo__detail-profile {
-        align-items: flex-start;
-        font-size: var(--theme-body-1-font-size);
-        font-weight: 400;
-        letter-spacing: 0;
-        line-height: 18px;
-        display: block;
-        padding: 0;
-        margin: 0;
-    }
-
    &-userinfo__detail-title {
        text-overflow: ellipsis;
-        font-size: var(--theme-subheading-2-font-size);
-        font-weight: 400;
-        letter-spacing: 0.04em;
-        line-height: 20px;
-        align-items: flex-start;
    }

    &-userinfo__secondary-info {
@@ -169,13 +132,16 @@
        text-align: left;
    }

-    &-hide-tab .mat-tab-label-active {
-        display: none !important;
+    &-hide-small.adf-userinfo-profile-initials,
+    &-hide-small.adf-userinfo-profile-container {
+        @include layout-bp(lt-md) {
+            display: none;
+        }
    }
 }

-@media only screen and (min-device-width: 480px) {
-    .mat-menu-panel.adf-userinfo-menu {
+@media only screen and (device-width >= 480px) {
+    .adf-content-userinfo-menu.adf-userinfo-menu {
        max-height: 450px;
        min-width: 450px;
        overflow: auto;
@@ -183,6 +149,6 @@
    }
 }

-.mat-menu-panel.adf-userinfo-menu .mat-menu-content {
+.adf-content-userinfo-menu.adf-userinfo-menu > div {
    padding: 0;
 }
@@ -1,6 +1,6 @@
 /*!
 * @license
- * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ * 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.
@@ -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()
@@ -68,7 +72,8 @@ export class ContentUserInfoComponent implements OnDestroy {
    @Input()
    showName: boolean = true;

-    /** When the username is shown, this defines its position relative to the user info button.
+    /**
+     * When the username is shown, this defines its position relative to the user info button.
     * Can be `right` or `left`.
     */
    @Input()
@@ -78,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);
@@ -1,6 +1,6 @@
 /*!
 * @license
- * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ * 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.
@@ -1,6 +1,6 @@
 /*!
 * @license
- * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ * 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.
@@ -16,5 +16,3 @@
 */

 export * from './content-user-info.component';
-
-export * from './content-user-info.module';
@@ -1,6 +1,6 @@
 /*!
 * @license
- * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ * 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.
@@ -1,5 +1,7 @@
 <div
    id="userinfo_container"
+    tabindex="0"
+    role="button"
    [class.adf-userinfo-name-right]="showOnRight"
    (keyup)="onKeyPress($event)"
    class="adf-userinfo-container"
@@ -39,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"
@@ -52,20 +54,19 @@
                                [outerHTML]="ecmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
                        </ng-template>

-                        <div class="adf-userinfo-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">
                            <div class="adf-userinfo-detail">
-                                  <span id="ecm-full-name"
-                                        class="adf-userinfo__detail-title">{{ecmUser | fullName}}</span>
-                                <span class="adf-userinfo__detail-profile" id="ecm-email"> {{ecmUser.email}} </span>
+                                  <h2 id="ecm-full-name"
+                                        class="adf-userinfo__detail-title">{{ecmUser | fullName}}</h2>
+                                <span id="ecm-email"> {{ecmUser.email}} </span>
                            </div>
                            <div class="adf-userinfo-detail">
                                      <span class="adf-userinfo__secondary-info" id="ecm-job-title-label">
                                          {{ 'USER_PROFILE.LABELS.ECM.JOB_TITLE' | translate }}
-                                          <span id="ecm-job-title"
-                                                class="adf-userinfo__detail-profile"> {{ ecmUser.jobTitle ? ecmUser.jobTitle : 'N/A' }} </span>
+                                          <span id="ecm-job-title"> {{ ecmUser.jobTitle ? ecmUser.jobTitle : 'N/A' }} </span>
                                      </span>
                            </div>
                        </div>
@@ -74,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"
@@ -84,20 +85,19 @@
                            <div
                                [outerHTML]="bpmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
                        </ng-template>
-                        <div class="adf-userinfo-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">
                            <div class="adf-userinfo-detail">
-                                <span id="bpm-full-name"
-                                      class="adf-userinfo__detail-title">{{ bpmUser | fullName }}</span>
-                                <span class="adf-userinfo__detail-profile" id="bpm-email"> {{bpmUser.email}} </span>
+                                <h2 id="bpm-full-name"
+                                      class="adf-userinfo__detail-title">{{ bpmUser | fullName }}</h2>
+                                <span id="bpm-email"> {{bpmUser.email}} </span>
                            </div>
                            <div class="adf-userinfo-detail">
                                <span id="bpm-tenant" class="adf-userinfo__secondary-info">
                                    {{ 'USER_PROFILE.LABELS.BPM.TENANT' | translate }}
-                                    <span
-                                        class="adf-userinfo__detail-profile">{{ bpmUser.tenantName ? bpmUser.tenantName : '' }}</span>
+                                    <span>{{ bpmUser.tenantName ? bpmUser.tenantName : '' }}</span>
                                </span>
                            </div>
                        </div>
@@ -1,3 +1,6 @@
+@import 'styles/flex';
+@import 'styles/mat-selectors';
+
 .adf {
    &-userinfo-container {
        display: flex;
@@ -12,7 +15,7 @@
    &-userinfo-name {
        padding: 0 5px;

-        @media screen and (max-width: 959px) {
+        @include layout-bp(lt-md) {
            display: none;
        }
    }
@@ -47,7 +50,7 @@
        display: inline-block;
    }

-    &-userinfo-menu_button.mat-button {
+    &-userinfo-menu_button#{$mat-button} {
        margin-right: 0;
        border-radius: 90%;
        padding: 0;
@@ -55,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);
@@ -79,48 +82,24 @@
        box-sizing: border-box;
    }

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

    &-userinfo-supporting-text {
-        font-size: var(--theme-body-1-font-size);
-        font-weight: 400;
-        letter-spacing: 0;
-        line-height: 18px;
        overflow: hidden;
        padding: 32px;
        column-count: 2;
        display: flex;
        justify-content: space-between;

-        @media screen and (max-width: 599px) {
+        @include layout-bp(lt-sm) {
            padding: 10px;
        }
    }

-    &-userinfo-title {
-        font-size: var(--theme-title-font-size);
-    }
-
-    &-userinfo__detail-profile {
-        align-items: flex-start;
-        font-size: var(--theme-body-1-font-size);
-        font-weight: 400;
-        letter-spacing: 0;
-        line-height: 18px;
-        display: block;
-        padding: 0;
-        margin: 0;
-    }
-
    &-userinfo__detail-title {
        text-overflow: ellipsis;
-        font-size: var(--theme-subheading-2-font-size);
-        font-weight: 400;
-        letter-spacing: 0.04em;
-        line-height: 20px;
-        align-items: flex-start;
    }

    &-userinfo__secondary-info {
@@ -169,13 +148,20 @@
        text-align: left;
    }

-    &-hide-tab .mat-tab-label-active {
-        display: none !important;
+    &-hide-tab.adf-userinfo-tab#tab-group-env {
+        display: none;
+    }
+
+    &-hide-small.adf-userinfo-profile-initials,
+    &-hide-small.adf-userinfo-profile-container {
+        @include layout-bp(lt-md) {
+            display: none;
+        }
    }
 }

@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;
@@ -183,6 +169,6 @@
    }
 }

-.mat-menu-panel.adf-userinfo-menu .mat-menu-content {
+#{$mat-menu-panel}.adf-userinfo-menu #{$mat-menu-content} {
    padding: 0;
 }
@@ -1,6 +1,6 @@
 /*!
 * @license
- * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ * 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.
@@ -18,19 +18,40 @@
 import { CoreTestingModule, UserInfoMode } from '@alfresco/adf-core';
 import { fakeEcmUser, fakeEcmUserNoImage } from '@alfresco/adf-content-services';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatMenuModule } from '@angular/material/menu';
 import { By } from '@angular/platform-browser';
-import { TranslateModule } from '@ngx-translate/core';
-import { BpmUserModel } from '../common/models/bpm-user.model';
-
 import { ProcessUserInfoComponent } from './process-user-info.component';
-import { fakeBpmUser } from './mocks/bpm-user.service.mock';
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { MatTabGroupHarness, MatTabHarness } from '@angular/material/tabs/testing';
+
+const fakeBpmUser: any = {
+    apps: [],
+    capabilities: null,
+    company: 'fake-company',
+    created: 'fake-create-date',
+    email: 'fakeBpm@fake.com',
+    externalId: 'fake-external-id',
+    firstName: 'fake-bpm-first-name',
+    lastName: 'fake-bpm-last-name',
+    groups: [],
+    id: 'fake-id',
+    lastUpdate: 'fake-update-date',
+    latestSyncTimeStamp: 'fake-timestamp',
+    password: 'fake-password',
+    pictureId: 12,
+    status: 'fake-status',
+    tenantId: 'fake-tenant-id',
+    tenantName: 'fake-tenant-name',
+    tenantPictureId: 'fake-tenant-picture-id',
+    type: 'fake-type'
+};

 describe('ProcessUserInfoComponent', () => {
    const profilePictureUrl = 'alfresco-logo.svg';

    let component: ProcessUserInfoComponent;
    let fixture: ComponentFixture<ProcessUserInfoComponent>;
+    let loader: HarnessLoader;
    let element: HTMLElement;

    const openUserInfo = () => {
@@ -48,14 +69,11 @@ describe('ProcessUserInfoComponent', () => {

    beforeEach(() => {
        TestBed.configureTestingModule({
-            imports: [
-                TranslateModule.forRoot(),
-                CoreTestingModule,
-                MatMenuModule
-            ]
+            imports: [CoreTestingModule, ProcessUserInfoComponent]
        });
        fixture = TestBed.createComponent(ProcessUserInfoComponent);
        component = fixture.componentInstance;
+        loader = TestbedHarnessEnvironment.documentRootLoader(fixture);
        element = fixture.nativeElement;

        spyOn(window, 'requestAnimationFrame').and.returnValue(1);
@@ -78,7 +96,6 @@ describe('ProcessUserInfoComponent', () => {
    });

    describe('when user is logged on bpm', () => {
-
        beforeEach(async () => {
            component.bpmUser = fakeBpmUser;
            component.isLoggedIn = true;
@@ -103,13 +120,12 @@ describe('ProcessUserInfoComponent', () => {
        });

        it('should show last name if first name is null', async () => {
-            const wrongBpmUser: BpmUserModel = new BpmUserModel({
+            component.bpmUser = {
                firstName: null,
                lastName: 'fake-last-name'
-            });
-            component.bpmUser = wrongBpmUser;
+            } as any;
            await whenFixtureReady();
-            const fullNameElement = (element.querySelector('#adf-userinfo-bpm-name-display'));
+            const fullNameElement = element.querySelector('#adf-userinfo-bpm-name-display');
            fixture.detectChanges();
            expect(element.querySelector('#userinfo_container')).toBeDefined();
            expect(element.querySelector('#adf-userinfo-bpm-name-display')).not.toBeNull();
@@ -120,14 +136,12 @@ describe('ProcessUserInfoComponent', () => {
        it('should not show the tabs', async () => {
            await whenFixtureReady();
            openUserInfo();
-            await fixture.whenStable();
-            fixture.detectChanges();
-            expect(fixture.debugElement.query(By.css('#tab-group-env')).classes['adf-hide-tab']).toBeTruthy();
+            const tabGroupHost = await (await loader.getHarness(MatTabGroupHarness.with({ selector: '#tab-group-env' }))).host();
+            expect(await tabGroupHost.hasClass('adf-hide-tab')).toBeTruthy();
        });
    });

    describe('when user is logged on bpm and ecm', () => {
-
        beforeEach(async () => {
            component.bpmUser = fakeBpmUser;
            component.ecmUser = fakeEcmUser as any;
@@ -138,19 +152,16 @@ describe('ProcessUserInfoComponent', () => {
        it('should show the tabs', async () => {
            await whenFixtureReady();
            openUserInfo();
-            await fixture.whenStable();
-            fixture.detectChanges();
-            expect(fixture.debugElement.query(By.css('#tab-group-env')).classes['adf-hide-tab']).toBeFalsy();
+            const tabGroupHost = await (await loader.getHarness(MatTabGroupHarness.with({ selector: '#tab-group-env' }))).host();
+            expect(await tabGroupHost.hasClass('adf-hide-tab')).toBeFalsy();
        });

        it('should get the bpm user information', async () => {
            spyOn(component, 'getBpmUserImage').and.returnValue(profilePictureUrl);
            await whenFixtureReady();
            openUserInfo();
-            const bpmTab = fixture.debugElement.queryAll(By.css('#tab-group-env .mat-tab-labels .mat-tab-label'))[1];
-            bpmTab.triggerEventHandler('click', null);
-            fixture.detectChanges();
-            await fixture.whenStable();
+            const bpmTab = await loader.getHarness(MatTabHarness.with({ label: 'USER_PROFILE.TAB.PS' }));
+            await bpmTab.select();
            const bpmUsername = fixture.debugElement.query(By.css('#bpm-username'));
            const bpmImage = fixture.debugElement.query(By.css('#bpm-user-detail-image'));
            expect(element.querySelector('#userinfo_container')).not.toBeNull();
@@ -174,7 +185,9 @@ describe('ProcessUserInfoComponent', () => {
            expect(ecmUsername).not.toBeNull();
            expect(ecmImage).not.toBeNull();
            expect(ecmImage.properties.src).toContain(profilePictureUrl);
-            expect(fixture.debugElement.query(By.css('#ecm-full-name')).nativeElement.textContent).toContain('fake-ecm-first-name fake-ecm-last-name');
+            expect(fixture.debugElement.query(By.css('#ecm-full-name')).nativeElement.textContent).toContain(
+                'fake-ecm-first-name fake-ecm-last-name'
+            );
            expect(fixture.debugElement.query(By.css('#ecm-job-title')).nativeElement.textContent).toContain('job-ecm-test');
        });

@@ -198,24 +211,19 @@ describe('ProcessUserInfoComponent', () => {
        it('should show the tabs for the env', async () => {
            await whenFixtureReady();
            openUserInfo();
-            const tabGroup = fixture.debugElement.query(By.css('#tab-group-env'));
-            const tabs = fixture.debugElement.queryAll(By.css('#tab-group-env .mat-tab-labels .mat-tab-label'));
+            const tabGroup = await loader.getHarness(MatTabGroupHarness.with({ selector: '#tab-group-env' }));
+            const tabs = await tabGroup.getTabs();

-            expect(tabGroup).not.toBeNull();
-            expect(tabGroup.classes['adf-hide-tab']).toBeFalsy();
+            expect(await (await tabGroup.host()).hasClass('adf-hide-tab')).toBeFalsy();
            expect(tabs.length).toBe(2);
        });

        it('should not close the menu when a tab is clicked', async () => {
            await whenFixtureReady();
            openUserInfo();
-            const tabGroup = fixture.debugElement.query(By.css('#tab-group-env'));
+            const bpmTab = await loader.getHarness(MatTabHarness.with({ label: 'USER_PROFILE.TAB.PS' }));

-            const tabs = fixture.debugElement.queryAll(By.css('#tab-group-env .mat-tab-labels .mat-tab-label'));
-
-            expect(tabGroup).not.toBeNull();
-            tabs[1].triggerEventHandler('click', null);
-            fixture.detectChanges();
+            bpmTab.select();
            expect(fixture.debugElement.query(By.css('#user-profile-lists'))).not.toBeNull();
        });
    });
@@ -1,6 +1,6 @@
 /*!
 * @license
- * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ * 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.
@@ -15,22 +15,28 @@
 * limitations under the License.
 */

-import { UserInfoMode } from '@alfresco/adf-core';
+import { FullNamePipe, InitialUsernamePipe, UserInfoMode } from '@alfresco/adf-core';
 import { EcmUserModel, PeopleContentService } from '@alfresco/adf-content-services';
 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 { PeopleProcessService } from '../common/services/people-process.service';
-import { BpmUserModel } from '../common/models/bpm-user.model';
+import { PeopleProcessService } from '@alfresco/adf-process-services';
+import { UserRepresentation } from '@alfresco/js-api';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTabsModule } from '@angular/material/tabs';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatCardModule } from '@angular/material/card';

@Component({
    selector: 'adf-process-user-info',
+    standalone: true,
+    imports: [CommonModule, FullNamePipe, MatButtonModule, MatMenuModule, InitialUsernamePipe, MatTabsModule, TranslateModule, MatCardModule],
    templateUrl: './process-user-info.component.html',
    styleUrls: ['./process-user-info.component.scss'],
    encapsulation: ViewEncapsulation.None
 })
 export class ProcessUserInfoComponent implements OnDestroy {
-
    @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;

    /** Determines if user is logged in. */
@@ -39,7 +45,7 @@ export class ProcessUserInfoComponent implements OnDestroy {

    /** BPM user info. */
    @Input()
-    bpmUser: BpmUserModel;
+    bpmUser: UserRepresentation;

    /** ECM user info. */
    @Input()
@@ -51,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()
@@ -69,7 +75,8 @@ export class ProcessUserInfoComponent implements OnDestroy {
    @Input()
    showName: boolean = true;

-    /** When the username is shown, this defines its position relative to the user info button.
+    /**
+     * When the username is shown, this defines its position relative to the user info button.
     * Can be `right` or `left`.
     */
    @Input()
@@ -79,8 +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);
@@ -1,6 +1,6 @@
 /*!
 * @license
- * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ * 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.
@@ -16,5 +16,3 @@
 */

 export * from './process-user-info.component';
-
-export * from './process-user-info.module';
@@ -1,21 +1,21 @@
 <ng-container>
-    <adf-content-user-info 
+    <adf-content-user-info
        *ngIf="mode === userInfoMode.CONTENT || mode === userInfoMode.CONTENT_SSO"
        [ecmUser]="ecmUser$ | async"
        [identityUser]="identityUser$ | async"
        [isLoggedIn]="isLoggedIn"
        [mode]="mode"
    ></adf-content-user-info>
-    <adf-identity-user-info 
+    <adf-identity-user-info
        *ngIf="mode === userInfoMode.SSO"
        [identityUser]="identityUser$ | async"
        [isLoggedIn]="isLoggedIn"
    ></adf-identity-user-info>
-    <adf-process-user-info 
+    <adf-process-user-info
        *ngIf="mode === userInfoMode.PROCESS || mode === userInfoMode.ALL"
        [bpmUser]="bpmUser$ | async"
        [ecmUser]="ecmUser$ | async"
        [isLoggedIn]="isLoggedIn"
        [mode]="mode"
    ></adf-process-user-info>
-</ng-container>
+</ng-container>
@@ -1,6 +1,6 @@
 /*!
 * @license
- * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ * 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.
@@ -16,18 +16,30 @@
 */

 import { EcmUserModel, PeopleContentService } from '@alfresco/adf-content-services';
-import { BpmUserModel, PeopleProcessService } from '@alfresco/adf-process-services';
-import { AuthenticationService, IdentityUserModel, IdentityUserService, UserInfoMode } from '@alfresco/adf-core';
+import { PeopleProcessService } from '@alfresco/adf-process-services';
+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 {
-
    /** Custom choice for opening the menu at the bottom. Can be `before` or `after`. */
    @Input()
    menuPositionX: MenuPositionX = 'after';
@@ -38,16 +50,17 @@ export class UserInfoComponent implements OnInit {

    mode: UserInfoMode;
    ecmUser$: Observable<EcmUserModel>;
-    bpmUser$: Observable<BpmUserModel>;
+    bpmUser$: Observable<UserRepresentation>;
    identityUser$: Observable<IdentityUserModel>;
-    selectedIndex: number;
    userInfoMode = UserInfoMode;

-    constructor(private peopleContentService: PeopleContentService,
-                private peopleProcessService: PeopleProcessService,
-                private identityUserService: IdentityUserService,
-                private authService: AuthenticationService) {
-    }
+    constructor(
+        private peopleContentService: PeopleContentService,
+        private peopleProcessService: PeopleProcessService,
+        private identityUserService: IdentityUserService,
+        private basicAlfrescoAuthService: BasicAlfrescoAuthService,
+        private authService: AuthenticationService
+    ) { /* empty */ }

    ngOnInit() {
        this.getUserInfo();
@@ -62,7 +75,6 @@ export class UserInfoComponent implements OnInit {
                this.mode = UserInfoMode.CONTENT_SSO;
                this.loadEcmUserInfo();
            }
-
        } else if (this.isAllLoggedIn()) {
            this.loadEcmUserInfo();
            this.loadBpmUserInfo();
@@ -77,7 +89,7 @@ export class UserInfoComponent implements OnInit {
    }

    get isLoggedIn(): boolean {
-        if (this.authService.isKerberosEnabled()) {
+        if (this.basicAlfrescoAuthService.isKerberosEnabled()) {
            return true;
        }
        return this.authService.isLoggedIn();
@@ -96,15 +108,17 @@ export class UserInfoComponent implements OnInit {
    }

    private isAllLoggedIn() {
-        return (this.authService.isEcmLoggedIn() && this.authService.isBpmLoggedIn()) || (this.authService.isALLProvider() && this.authService.isKerberosEnabled());
+        return (
+            (this.authService.isEcmLoggedIn() && this.authService.isBpmLoggedIn()) ||
+            (this.authService.isALLProvider() && this.basicAlfrescoAuthService.isKerberosEnabled())
+        );
    }

    private isBpmLoggedIn() {
-        return this.authService.isBpmLoggedIn() || (this.authService.isECMProvider() && this.authService.isKerberosEnabled());
+        return this.authService.isBpmLoggedIn() || (this.authService.isECMProvider() && this.basicAlfrescoAuthService.isKerberosEnabled());
    }

    private isEcmLoggedIn() {
-        return this.authService.isEcmLoggedIn() || (this.authService.isECMProvider() && this.authService.isKerberosEnabled());
+        return this.authService.isEcmLoggedIn() || (this.authService.isECMProvider() && this.basicAlfrescoAuthService.isKerberosEnabled());
    }
 }
-
@@ -1,17 +1,15 @@
 <div class="app-main-content">
    <h1>CardView Component</h1>

-    <mat-card class="app-card-view">
-        <adf-card-view
-            [properties]="properties"
-            [editable]="isEditable"
-            [displayClearAction]="showClearDateAction"
-            [displayNoneOption]="showNoneOption"
-            [displayLabelForChips]="showLabelForChips">
-        </adf-card-view>
-    </mat-card>
+    <adf-card-view
+        [properties]="properties"
+        [editable]="isEditable"
+        [displayClearAction]="showClearDateAction"
+        [displayNoneOption]="showNoneOption"
+        [displayLabelForChips]="showLabelForChips">
+    </adf-card-view>

-    <div class="app-console" #console>
+    <div class="app-console">
        <h3>Changes log:</h3>
        <p *ngFor="let log of logs">{{ log }}</p>
    </div>
@@ -2,7 +2,7 @@
    padding: 0 15px;
 }

-.app-card-view {
+adf-card-view {
    width: 30%;
    display: inline-block;
 }
@@ -1,6 +1,6 @@
 /*!
 * @license
- * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ * 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.
@@ -15,7 +15,7 @@
 * limitations under the License.
 */

-import { Component, OnInit, ElementRef, ViewChild, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import {
    CardViewTextItemModel,
    CardViewDateItemModel,
@@ -29,19 +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 {
-
-    @ViewChild('console', { static: true }) console: ElementRef;
-
+export class AppCardViewComponent implements OnInit, OnDestroy {
    isEditable = true;
    properties: any;
    logs: string[];
@@ -51,8 +54,7 @@ export class CardViewComponent implements OnInit, OnDestroy {

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

-    constructor(private cardViewUpdateService: CardViewUpdateService,
-                private decimalNumberPipe: DecimalNumberPipe) {
+    constructor(private cardViewUpdateService: CardViewUpdateService, private decimalNumberPipe: DecimalNumberPipe) {
        this.logs = [];
        this.createCard();
    }
@@ -62,9 +64,7 @@ export class CardViewComponent implements OnInit, OnDestroy {
    }

    ngOnInit() {
-        this.cardViewUpdateService.itemUpdated$
-            .pipe(takeUntil(this.onDestroy$))
-            .subscribe(this.onItemChange.bind(this));
+        this.cardViewUpdateService.itemUpdated$.pipe(takeUntil(this.onDestroy$)).subscribe(this.onItemChange.bind(this));
    }

    ngOnDestroy() {
@@ -120,17 +120,17 @@ export class CardViewComponent implements OnInit, OnDestroy {
            }),
            new CardViewDateItemModel({
                label: 'CardView Date Item',
-                value: new Date(1983, 11, 24, 10, 0, 30),
+                value: new Date('1983-11-24T00:00:00Z'),
                key: 'date',
-                default: new Date(1983, 11, 24, 10, 0, 30),
+                default: new Date('1983-11-24T00:00:00Z'),
                format: 'shortDate',
                editable: this.isEditable
            }),
            new CardViewDateItemModel({
                label: 'CardView Date Item - Multivalue (chips)',
-                value: [new Date(1983, 11, 24, 10, 0, 30)],
+                value: [new Date('1983-11-24T00:00:00Z')],
                key: 'date',
-                default: new Date(1983, 11, 24, 10, 0, 30),
+                default: new Date('1983-11-24T00:00:00Z'),
                format: 'shortDate',
                editable: this.isEditable,
                multivalued: true
@@ -192,20 +192,29 @@ export class CardViewComponent implements OnInit, OnDestroy {
            }),
            new CardViewKeyValuePairsItemModel({
                label: 'CardView Key-Value Pairs Item',
-                value: [{ name: 'hey', value: 'you' }, { name: 'hey', value: 'you' }],
+                value: [
+                    { name: 'hey', value: 'you' },
+                    { name: 'hey', value: 'you' }
+                ],
                key: 'key-value-pairs',
                editable: this.isEditable
            }),
            new CardViewKeyValuePairsItemModel({
                label: 'CardView Key-Value Pairs Item',
-                value: [{ name: 'hey', value: 'you' }, { name: 'hey', value: 'you' }],
+                value: [
+                    { name: 'hey', value: 'you' },
+                    { name: 'hey', value: 'you' }
+                ],
                key: 'key-value-pairs',
                editable: false
            }),
            new CardViewSelectItemModel({
                label: 'CardView Select Item',
                value: 'one',
-                options$: of([{ key: 'one', label: 'One' }, { key: 'two', label: 'Two' }]),
+                options$: of([
+                    { key: 'one', label: 'One' },
+                    { key: 'two', label: 'Two' }
+                ]),
                key: 'select',
                editable: this.isEditable
            }),
@@ -253,7 +262,6 @@ export class CardViewComponent implements OnInit, OnDestroy {
        }

        this.logs.push(`[${notification.target.label}] - ${value}`);
-        this.console.nativeElement.scrollTop = this.console.nativeElement.scrollHeight;
    }

    toggleEditable() {
@@ -1,39 +0,0 @@
-/*!
- * @license
- * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { NgModule } from '@angular/core';
-import { CardViewComponent } from './card-view.component';
-import { Routes, RouterModule } from '@angular/router';
-import { CommonModule } from '@angular/common';
-import { CoreModule } from '@alfresco/adf-core';
-
-const routes: Routes = [
-    {
-      path: '',
-      component: CardViewComponent
-    }
-];
-
-@NgModule({
-    imports: [
-        CommonModule,
-        CoreModule,
-        RouterModule.forChild(routes)
-    ],
-    declarations: [CardViewComponent]
-})
-export class AppCardViewModule {}
@@ -1,6 +1,6 @@
 /*!
 * @license
- * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ * 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.
@@ -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}`]);
    }
 }
@@ -1,4 +0,0 @@
-<adf-toolbar>
-  <div class="app-crumb">{{appName + ' >'}} </div>
-  <div class="app-filter-crumb"> {{filterName | translate}}</div>
-</adf-toolbar>
@@ -1,14 +0,0 @@
-app-cloud-breadcrumbs {
-    .app-app-crumb {
-        opacity: 0.5;
-    }
-
-    .app-filter-crumb {
-        opacity: 0.8;
-        margin-left: 5px;
-    }
-
-    adf-toolbar {
-        display: flex;
-    }
-}
@@ -1,43 +0,0 @@
-/*!
- * @license
- * Copyright © 2005-2023 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 { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-
-@Component({
-    selector: 'app-cloud-breadcrumbs',
-    templateUrl: './cloud-breadcrumb-component.html',
-    styleUrls: ['./cloud-breadcrumb-component.scss'],
-    encapsulation: ViewEncapsulation.None
-})
-export class CloudBreadcrumbsComponent implements OnInit {
-    appName: string;
-    filterName: string;
-
-    constructor(private route: ActivatedRoute) {}
-
-    ngOnInit() {
-        this.route.parent.params.subscribe(params => {
-            this.appName = params.appName;
-        });
-        this.route.queryParams.subscribe(params => {
-            if (params.filterName) {
-                this.filterName = params.filterName;
-            }
-        });
-    }
-}
@@ -1,4 +1,4 @@
 app-cloud-task-filters .app-filters__entry,
 app-cloud-process-filters .app-filters__entry {
-    padding-left: 0 !important;
+    padding-left: 0;
 }
@@ -1,6 +1,6 @@
 /*!
 * @license
- * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ * 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.
@@ -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,14 +49,14 @@ export class CloudFiltersDemoComponent implements OnInit {
        private router: Router,
        private route: ActivatedRoute,
        private cloudProcessFiltersService: CloudProcessFiltersService
-    ) {}
+    ) { /* empty */ }

    ngOnInit() {
        this.currentTaskFilter$ = this.cloudLayoutService.taskFilter$;
        this.currentProcessFilter$ = this.cloudLayoutService.processFilter$;

        let root = '';
-        if (this.route.snapshot && this.route.snapshot.firstChild) {
+        if (this.route.snapshot?.firstChild) {
            root = this.route.snapshot.firstChild.url[0].path;
            if (root === 'tasks') {
                this.expandTaskFilter = true;
@@ -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 });
        }
    }

@@ -3,7 +3,10 @@
    <adf-sidenav-layout [sidenavMin]="70" [sidenavMax]="270" [stepOver]="780">
      <adf-sidenav-layout-header>
        <ng-template>
-          <app-cloud-breadcrumbs></app-cloud-breadcrumbs>
+            <div class="app-cloud-layout-toolbar">
+                <span>{{appName}}</span>
+                <span *ngIf="filterName">{{ ' > ' + (filterName | translate)}}</span>
+            </div>
        </ng-template>
      </adf-sidenav-layout-header>
      <adf-sidenav-layout-navigation>
@@ -1,11 +1,9 @@
+@import 'styles/mat-selectors';
+
 .app-cloud-layout-overflow {
    overflow: auto;
 }

-.app-cloud-layout-tab-body .mat-tab-body-wrapper {
-    height: 100%;
-}
-
 app-cloud-layout {
    .app-cloud-layout-tab-body {
        height: 100%;
@@ -18,5 +16,13 @@ app-cloud-layout {
            box-sizing: border-box;
            display: flex;
        }
+
+        & > div {
+            height: 100%;
+        }
+    }
+
+    .app-cloud-layout-toolbar {
+        display: flex;
    }
 }
@@ -1,6 +1,6 @@
 /*!
 * @license
- * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ * 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.
@@ -16,24 +16,50 @@
 */

 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
 })
 export class CloudLayoutComponent implements OnInit {
-    displayMenu = true;
    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 = '';
@@ -41,7 +67,7 @@ export class CloudLayoutComponent implements OnInit {
            this.appName = params.appName;
        });

-        if (this.route.snapshot && this.route.snapshot.firstChild) {
+        if (this.route.snapshot?.firstChild) {
            root = this.route.snapshot.firstChild.url[0].path;
        }

@@ -53,6 +79,10 @@ export class CloudLayoutComponent implements OnInit {
            if (root === 'processes' && params.id) {
                this.cloudLayoutService.setCurrentProcessFilterParam({ id: params.id });
            }
+
+            if (params.filterName) {
+                this.filterName = params.filterName;
+            }
        });
    }

@@ -1,3 +1,2 @@
-<adf-alfresco-viewer
-    [nodeId]="nodeId">
+<adf-alfresco-viewer [nodeId]="nodeId">
 </adf-alfresco-viewer>
@@ -1,6 +1,6 @@
 /*!
 * @license
- * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ * 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.
@@ -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) => {
@@ -1,6 +1,6 @@
 /*!
 * @license
- * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ * 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.
@@ -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);
    }
@@ -1,6 +1,6 @@
 /*!
 * @license
- * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ * 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.
@@ -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,
@@ -1,6 +1,6 @@
 /*!
 * @license
- * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ * 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.
@@ -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;

@@ -1,6 +1,6 @@
 /*!
 * @license
- * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ * 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.
@@ -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,37 +158,34 @@ 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) {
-        if (model && model.appName && model.id) {
+        if (model?.appName && model.id) {
            this.editedFilter = model;
        }
    }
@@ -1,6 +1,6 @@
 /*!
 * @license
- * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ * 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.
@@ -1,6 +1,6 @@
 /*!
 * @license
- * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ * 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.
@@ -16,7 +16,8 @@
 <mat-slide-toggle [checked]="processDetailsRedirection" (change)="toggleProcessDetailsRedirection()" data-automation-id="processDetailsRedirection">
    Display process details on process click
 </mat-slide-toggle>
-<mat-form-field data-automation-id="selectionMode">
+
+<mat-form-field data-automation-id="selectionMode" class="adf-cloud-settings-selection-mode">
    <mat-label>Selection Mode</mat-label>
    <mat-select [(ngModel)]="selectionMode" (selectionChange)="onSelectionModeChange()">
        <mat-option *ngFor="let option of selectionModeOptions" [value]="option.value">
@@ -24,32 +25,29 @@
        </mat-option>
    </mat-select>
 </mat-form-field>
-<mat-card *ngIf="actionMenu || contextMenu">
-    <mat-card-header>
-      <mat-card-title>Add Action</mat-card-title>
-    </mat-card-header>
-    <mat-card-content>
-        <form class="app-cloud-settings-form" [formGroup]="actionMenuForm">
-            <mat-form-field>
-                <input matInput formControlName="key" placeholder="Key">
-            </mat-form-field>
-            <mat-form-field>
-                <input matInput formControlName="title" placeholder="Title">
-            </mat-form-field>
-            <mat-form-field>
-                <input matInput formControlName="icon" placeholder="Icon">
-            </mat-form-field>
-            <mat-checkbox formControlName="visible">Visible</mat-checkbox>
-            <mat-checkbox formControlName="disabled">Disable</mat-checkbox>
-            <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">
-                    {{action.title}}
-                    <mat-icon matChipRemove (click)="removeAction(action)">cancel</mat-icon>
-                </mat-chip>
-            </mat-chip-list>
-        </div>
-    </mat-card-content>
-</mat-card>
+
+<div class="app-cloud-actions" *ngIf="actionMenu || contextMenu">
+    <h2>Add Action</h2>
+    <form class="app-cloud-settings-form" [formGroup]="actionMenuForm">
+        <mat-form-field class="app-cloud-settings-form-input">
+            <input matInput formControlName="key" placeholder="Key">
+        </mat-form-field>
+        <mat-form-field class="app-cloud-settings-form-input">
+            <input matInput formControlName="title" placeholder="Title">
+        </mat-form-field>
+        <mat-form-field class="app-cloud-settings-form-input">
+            <input matInput formControlName="icon" placeholder="Icon">
+        </mat-form-field>
+        <mat-checkbox formControlName="visible">Visible</mat-checkbox>
+        <mat-checkbox formControlName="disabled">Disable</mat-checkbox>
+        <button mat-raised-button (click)="addAction()">Add</button>
+    </form>
+    <div *ngIf="actions.length > 0">
+        <mat-chip-listbox>
+            <mat-chip-option *ngFor="let action of actions" [removable]="true">
+                {{action.title}}
+                <mat-icon matChipRemove (click)="removeAction(action)">cancel</mat-icon>
+            </mat-chip-option>
+        </mat-chip-listbox>
+    </div>
+</div>
@@ -4,7 +4,11 @@ app-cloud-settings {
    display: flex;
    flex: 1;

-    mat-form-field {
+    .app-cloud-actions {
+        background-color: white;
+    }
+
+    .adf-cloud-settings-selection-mode {
        max-width: 200px;
    }

@@ -13,13 +17,9 @@ app-cloud-settings {
        place-content: center space-around;
        align-items: center;

-        mat-form-field {
+        .app-cloud-settings-form-input {
            flex: 1 1 100%;
            max-width: 23%;
        }
-
-        mat-form-field, mat-checkbox {
-            margin-right: 20px;
-        }
    }
 }
@@ -1,6 +1,6 @@
 /*!
 * @license
- * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ * 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.
@@ -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() {
@@ -1,40 +0,0 @@
-/*!
- * @license
- * Copyright © 2005-2023 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 {}
@@ -1,6 +1,6 @@
 /*!
 * @license
- * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ * 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.
@@ -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) => {
@@ -1,6 +1,6 @@
 /*!
 * @license
- * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ * 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.
@@ -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) => {
@@ -1,6 +1,6 @@
 /*!
 * @license
- * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ * 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.
@@ -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);
    }
 }
@@ -1,6 +1,6 @@
 /*!
 * @license
- * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ * 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.
@@ -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 };
    }
 }
@@ -1,6 +1,6 @@
 /*!
 * @license
- * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ * 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.
@@ -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(['/']);
    }
-
 }
--- a/Show More
+++ b/Show More
@@ -1 +1 @@
 
 .20.3