[ci:force]

* AAE-26163 Logout user after 3 login attempts failed, avoiding infinite loop when an authentication error occured, like when a user machine clock is significantly out of sync

* AAE-26163 Wait to discovery document to be loaded and user not authenticated to perform a ssoLogin, logout user if login fails after 3 attempts

* AAE-26163 Fix missed id_token_hint invoking logout when a login error occured due to a clock significantly out of sync

* AAE-26163 Add fake observable to unit test

* AAE-26163 Show oauth event logs if showDebugInformation is enabled, remove auth items if access token is not valid

* AAE-26163 Improve tryLogin error message

* AAE-26163 Check if token has expired to fix case when user access the application after the token is expired and with a clock significantly out of sync

* AAE-26163 Test logout when clock is out of sync

* AAE-26163 Create a service to check if local machine time is out of sync

* AAE-26163 Update oauthErrorEvent$ and combinedOAuthErrorsStream$ to return errors

* AAE-26163 Output error within combined oauth error event subscription

* AAE-26163 Fix lint problems

* AAE-26163 Logout user when token refresh error happens for the second time, if the token is not refreshed properly after first refresh error

* AAE-26163 Logout user once an oauth error event occur due to clock out of sync

* AAE-26163 Fix retry login error message if the OAuthErrorEvent doesn t return reason

* AAE-26163 Fix the issue where the logout API call is canceled by the authorize call when login fails due to clock synchronization problems, causing an infinite loop.

* remove console.log

* AAE-26163 Fix retry login error message if the OAuthErrorEvent reason is an empty object

.github/actions/create-git-tag/action.yml

@@ -0,0 +1,23 @@
+name: Git tag creation
+description: 'Creates a git tag in the specified repository for a given commit.'
+
+inputs:
+  tagName:
+    description: 'The github tag to be created'
+    required: true
+  releaseNote:
+    description: 'The github release note to be created'
+    required: false
+
+runs:
+  using: 'composite'
+  steps:
+    - uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
+      name: Create git tag
+      env:
+        TAG_NAME: ${{ inputs.tagName }}
+        RELEASE_NOTE: ${{ inputs.releaseNote }}
+      with:
+        script: |
+          const createGitTag = require('./.github/actions/create-git-tag/create-git-tag.js');
+          await createGitTag({ core, github, context, tagName: process.env.TAG_NAME });

.github/actions/create-git-tag/create-git-tag.js

@@ -0,0 +1,42 @@
+/*!
+ * @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.
+ */
+
+module.exports = async ({ github, context, core, tagName }) => {
+    const tagSHA = context.payload?.after ?? context.sha;
+
+    core.notice(`Creating tag with title: ${tagName}, and SHA: ${tagSHA}`);
+
+    const createdTag = await github.rest.git.createTag({
+        owner: context.repo.owner,
+        repo: context.repo.repo,
+        tag: tagName,
+        message: 'Release note',
+        object: tagSHA,
+        type: 'commit'
+    });
+
+    const createdRef = await github.rest.git.createRef({
+        owner: context.repo.owner,
+        repo: context.repo.repo,
+        ref: 'refs/tags/' + tagName,
+        sha: createdTag.data.sha
+    });
+
+    if (createdRef.status === 201) {
+        core.notice(`Tag ${tagName} was created successfully`);
+    }
+};

.github/actions/print-affected-libs/.gitignore

@@ -0,0 +1 @@
+dist

.github/actions/print-affected-libs/package-lock.json

@@ -267,9 +267,9 @@
       }
     },
     "node_modules/undici": {
-      "version": "5.28.5",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-5.28.5.tgz",
-      "integrity": "sha512-zICwjrDrcrUE0pyyJc1I2QzBkLM8FINsgOrt6WjA+BgajVq9Nxu2PbFFXUrAggLfDXlZGZBVZYw7WNV5KiBiBA==",
+      "version": "5.29.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-5.29.0.tgz",
+      "integrity": "sha512-raqeBD6NQK4SkWhQzeYKd1KmIG6dllBOTt55Rmkt4HtI9mwdWtJljnrXjAFUBLTSN67HWrOIZ3EPF4kjUw80Bg==",
       "license": "MIT",
       "dependencies": {
         "@fastify/busboy": "^2.0.0"
@@ -495,9 +495,9 @@
       "integrity": "sha512-1h/Lnq9yajKY2PEbBadPXj3VxsDDu844OnaAo52UVmIzIvwwtBPIuNvkjuzBlTWpfJyUbG3ez0KSBibQkj4ojg=="
     },
     "undici": {
-      "version": "5.28.5",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-5.28.5.tgz",
-      "integrity": "sha512-zICwjrDrcrUE0pyyJc1I2QzBkLM8FINsgOrt6WjA+BgajVq9Nxu2PbFFXUrAggLfDXlZGZBVZYw7WNV5KiBiBA==",
+      "version": "5.29.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-5.29.0.tgz",
+      "integrity": "sha512-raqeBD6NQK4SkWhQzeYKd1KmIG6dllBOTt55Rmkt4HtI9mwdWtJljnrXjAFUBLTSN67HWrOIZ3EPF4kjUw80Bg==",
       "requires": {
         "@fastify/busboy": "^2.0.0"
       }

.github/actions/setup/action.yml

@@ -20,18 +20,18 @@ runs:
   using: "composite"
   steps:
       - name: install NPM
-        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         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@c1236aee36bb9b35c5972819fcf8a4d07572e6cd # v8.16.0
+        uses: Alfresco/alfresco-build-tools/.github/actions/git-latest-tag@95f68dc050fba62b3331d9b47bc659526cdfb343 # v8.21.1
 # CACHE
       - name: Node Modules cache
         id: node-modules-cache
         if: ${{ inputs.enable-node-modules-cache == 'true' }}
-        uses: actions/cache@d4323d4df104b026a6aa633fdb11d772146be0bf # v4.2.2
+        uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.2.3
         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@d4323d4df104b026a6aa633fdb11d772146be0bf # v4.2.2
+        uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.2.3
         if: ${{ inputs.enable-cache == 'true' }}
         with:
           path: ~/.cache/pip

.github/workflows/codeql-analysis.yml

@@ -30,7 +30,7 @@ jobs:
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@6bb031afdd8eb862ea3fc1848194185e076637e5 # v3.28.11
+      uses: github/codeql-action/init@ff0a06e83cb2de871e5a09832bc6a81e7276941f # v3.28.18
       # 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@6bb031afdd8eb862ea3fc1848194185e076637e5 # v3.28.11
+      uses: github/codeql-action/autobuild@ff0a06e83cb2de871e5a09832bc6a81e7276941f # v3.28.18
 
     # ℹ️ 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@6bb031afdd8eb862ea3fc1848194185e076637e5 # v3.28.11
+      uses: github/codeql-action/analyze@ff0a06e83cb2de871e5a09832bc6a81e7276941f # v3.28.18

.github/workflows/git-tag.yml

@@ -65,7 +65,7 @@ jobs:
         with:
           dry-run-flag: ${{ inputs.dry-run-flag }}
       - name: install NPM
-        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
           node-version-file: '.nvmrc'
       - name: "Release tag"

.github/workflows/pull-from-crowdin.yml

@@ -10,7 +10,7 @@ jobs:
       - name: Checkout
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
       - name: Pull translations from Crowdin
-        uses: crowdin/github-action@2cc7959c565767d6bc118118d6df3b63bf361370 # v2.6.1
+        uses: crowdin/github-action@b8012bd5491b8aa8578b73ab5b5f5e7c94aaa6e2 # v2.7.0
         with:
           upload_sources: false
           download_translations: true

.github/workflows/pull-request.yml

@@ -64,7 +64,7 @@ jobs:
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
       - name: Ensure SHA pinned actions
-        uses: zgosalvez/github-actions-ensure-sha-pinned-actions@25ed13d0628a1601b4b44048e63cc4328ed03633 # v3.0.22
+        uses: zgosalvez/github-actions-ensure-sha-pinned-actions@fc87bb5b5a97953d987372e74478de634726b3e5 # v3.0.25
 
       - name: Check package-lock.json version
         run: |
@@ -84,10 +84,10 @@ jobs:
          fetch-depth: 0
 
       - name: Get branch name
-        uses: Alfresco/alfresco-build-tools/.github/actions/get-branch-name@c1236aee36bb9b35c5972819fcf8a4d07572e6cd # v8.16.0
+        uses: Alfresco/alfresco-build-tools/.github/actions/get-branch-name@95f68dc050fba62b3331d9b47bc659526cdfb343 # v8.21.1
 
       - name: Save commit message
-        uses: Alfresco/alfresco-build-tools/.github/actions/get-commit-message@c1236aee36bb9b35c5972819fcf8a4d07572e6cd # v8.16.0
+        uses: Alfresco/alfresco-build-tools/.github/actions/get-commit-message@95f68dc050fba62b3331d9b47bc659526cdfb343 # v8.21.1
 
       - name: ci:force flag parser
         shell: bash
@@ -277,7 +277,7 @@ jobs:
         uses: ./.github/actions/slack-group-area
         with:
           affected: ${{ steps.e2e-result.outputs.result }}
-      - uses: slackapi/slack-github-action@485a9d42d3a73031f12ec201c457e2162c45d02d # v2.0.0
+      - uses: slackapi/slack-github-action@b0fa283ad8fea605de13dc3f449259339835fc52 # v2.1.0
         name: Nofify QA failure
         if: ${{ github.event_name == 'schedule' && contains(needs.*.result, 'failure') }}
         env:

.github/workflows/release-branch.yml

@@ -97,10 +97,9 @@ jobs:
             setMigrations();
       - name: Build libraries
         run: |
-          npx nx run-many --target=build --prod --exclude="demoshell" --skip-nx-cache
-          npx nx run-many  --target=pretheme
-          npx nx run-many  --target=build-schematics
-      - uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+          npx nx run-many --target=build --prod --skip-nx-cache
+          npx nx run-many --target=build-schematics
+      - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         name: release libraries GH registry
         with:
           node-version-file: '.nvmrc'
@@ -109,7 +108,7 @@ jobs:
       - run: npx nx run-many --target=npm-publish --tag=branch|| exit 1
         env:
           NODE_AUTH_TOKEN: ${{ secrets.PAT_WRITE_PKG }}
-      - uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+      - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         name: release libraries Npm registry
         with:
           node-version-file: '.nvmrc'

.github/workflows/release.yml

@@ -100,6 +100,8 @@ jobs:
 
   release-npm:
     needs: [setup]
+    outputs:
+      release_version: ${{ steps.set-version.outputs.release_version }}
     timeout-minutes: 30
     if: github.event.pull_request.merged == true || github.ref_name == 'master' || github.ref_name == 'master-patch-*'
     runs-on: ubuntu-latest
@@ -121,6 +123,7 @@ jobs:
           dry-run-flag: ${{ inputs.dry-run-flag }}
       - uses: ./.github/actions/download-node-modules-and-artifacts
       - name: Set libraries versions
+        id: set-version
         run: |
           set -u;
           ./scripts/github/build/bumpversion.sh
@@ -133,9 +136,8 @@ jobs:
       - name: build libraries
         run: |
           npx nx run-many -t build --prod --skip-nx-cache
-          npx nx run-many -t pretheme
           npx nx run-many -t build-schematics
-      - uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+      - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         name: release libraries GH registry
         with:
           node-version-file: '.nvmrc'
@@ -144,7 +146,7 @@ jobs:
       - run: npx nx run-many -t npm-publish --tag=$TAG_NPM || exit 1
         env:
           NODE_AUTH_TOKEN: ${{ secrets.PAT_WRITE_PKG }}
-      - uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+      - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         name: release libraries Npm registry
         with:
           node-version-file: '.nvmrc'
@@ -154,6 +156,21 @@ jobs:
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_REGISTRY_TOKEN }}
 
+  create-git-tag:
+    runs-on: ubuntu-latest
+    needs: [setup, release-npm]
+    name: Create github tag
+    permissions:
+      contents: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        with:
+          fetch-depth: 1
+      - uses: './.github/actions/create-git-tag'
+        with:
+          tagName: ${{ needs.release-npm.outputs.release_version }}
+
   propagate:
     needs: [release-npm]
     if: ${{ contains(toJson(github.event.pull_request.labels.*.name), 'hxp-upstream') }}
@@ -198,7 +215,7 @@ jobs:
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
       - name: Push Source Files to Crowdin
-        uses: crowdin/github-action@2cc7959c565767d6bc118118d6df3b63bf361370 # v2.6.1
+        uses: crowdin/github-action@b8012bd5491b8aa8578b73ab5b5f5e7c94aaa6e2 # v2.7.0
         with:
           upload_sources: true
           upload_sources_args: --delete-obsolete
@@ -212,7 +229,7 @@ jobs:
       needs: [release-storybook, release-npm, npm-check-bundle]
       steps:
 
-        - uses: slackapi/slack-github-action@485a9d42d3a73031f12ec201c457e2162c45d02d # v2.0.0
+        - uses: slackapi/slack-github-action@b0fa283ad8fea605de13dc3f449259339835fc52 # v2.1.0
           name: Nofify FE eng-guild-front-end workflow failed
           if: ${{ contains(toJson(needs.*.result), 'failure') }}
           env:

.gitignore

@@ -1,33 +1,24 @@
-/.angular/cache
 *.log
 node_modules
 bundles
-workspace.xml
 .idea/
 *.iml
 .env.*
 .env
 dist
-!./.github/actions/**/dist
-e2e/.env.cloud
 tmp
 temp
-/nxcache
 *.npmrc
 .history
-/ng2-components/ng2-alfresco-core/prebuilt-themes/
 .ng_pkg_build/
-/lib/export-new.json
-/lib/config/exportCheck.js
-/docs/sourceinfo
-/docs/docs.json
 coverage/
-/desktop.ini
 out-tsc
 /reports/
 e2e-result-*
 licenses.txt
 .DS_Store
+desktop.ini
 .angular
-NX
 .nx
+nxcache
+.husky

.nvmrc

@@ -1 +1 @@
-20.18.1
+22.14.0

.storybook/preview.js

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

crowdin.yml

@@ -8,6 +8,6 @@
     "source": "/**/**/i18n/en.json",
     "translation": "/%original_path%/%two_letters_code%.%file_extension%",
     "export_only_approved": "true",
-    "update_option": "update_as_unapproved"
+    "update_option": "update_without_changes"
   }
 ]

docs/.gitignore

@@ -0,0 +1,2 @@
+sourceinfo
+docs.json

docs/README.md

@@ -61,7 +61,6 @@ A few other pages of information are also available:
 -   [Localization in ADF](user-guide/localization.md)
 -   [Theming](user-guide/theming.md)
 -   [Transclusion](user-guide/transclusion.md)
--   [Typography](user-guide/typography.md)
 -   [Walkthrough - adding indicators to highlight information about a node](user-guide/metadata-indicators.md)
 
 <!--guide end-->

docs/angular-migration/angular-15-to-16.md

@@ -0,0 +1,109 @@
+# Migrating from Angular 15 to Angular 16
+
+This guide for migrating ADF from Angular version 15 to version 16. Follow these steps to ensure a smooth transition.
+
+## 1. Update Nx
+
+First, update the Nx development dependencies. Use the `nx migrate` command for this purpose.
+
+```bash
+npx nx migrate 16.10.0
+```
+
+Updated Nx dependencies:
+
+```json
+{
+    "nx": "16.10.0",
+    "@nx/angular": "16.10.0",
+    "@nx/eslint-plugin": "16.10.0",
+    "@nx/js": "16.10.0",
+    "@nx/node": "16.10.0",
+    "@nx/storybook": "19.6.2",
+    "@nx/workspace": "16.10.0"
+}
+```
+
+**As of Nx 16 package scope has changed from `@nrwl/*` to `@nx/*`.**
+Nx's migration scripts will replace all `@nrwl` references in the project with `@nx`. This includes any imports, configuration files, and scripts.
+
+## 2. Run Nx migrations
+
+After the initial update a `migrations.json` file will be created containing all the additional changes that need to be made. You can run the migration script to apply these changes.
+
+```bash
+npx nx migrate --run-migrations
+```
+
+Those migrations should update required packages to the Angular 16 compatible version including Angular itself, Storybook, and others.
+
+```json
+{
+    "@angular/animations": "16.2.9",
+    "@angular/cdk": "16.2.9",
+    "@angular/common": "16.2.9",
+    "@angular/compiler": "16.2.9",
+    "@angular/core": "16.2.9",
+    "@angular/forms": "16.2.9",
+    "@angular/material": "16.2.9",
+    "@angular/material-date-fns-adapter": "16.2.9",
+    "@angular/platform-browser": "16.2.9",
+    "@angular/platform-browser-dynamic": "16.2.9",
+    "@angular/router": "16.2.9",
+    "@schematics/angular": "16.2.9",
+    "ng-packagr": "16.2.3"
+}
+```
+
+Reference `storybook-migration-summary.md` file for more details on Storybook migration.
+
+## 3. Manually update other dependencies
+
+There are a few dependencies that require manual update, here is the list:
+
+```json
+{
+    "dependencies": {
+        "angular-oauth2-oidc": "16.0.0",
+        "@apollo/client": "3.11.4",
+        "chart.js": "4.4.4",
+        "@mat-datetimepicker/core": "12.0.1"
+    },
+    "devDependencies": {
+        "@editorjs/editorjs": "2.30.5"
+    }
+}
+```
+
+```bash
+npm install --save angular-oauth2-oidc@16.0.0 @apollo/client@3.11.4 chart.js@4.4.4 @mat-datetimepicker/core@12.0.1
+npm install --save-dev @editorjs/editorjs@2.30.5
+```
+
+## 4. Fixing CI/CD issues
+
+### General migration issues
+
+After running the migration script, you may need to manually fix some issues. Run common build targets to identify any problems.
+
+```bash
+npx nx run-many --target=build --skip-nx-cache
+```
+
+Work through all the problems topic by topic. If blocked by linting issues, disable the linting rules in the affected files. You can re-enable them in the next step.
+
+### Lint jobs
+
+After getting the build to work, run the lint jobs. Re-enable previously disabled linting rules and fix any issues that arise.
+
+```bash
+npx nx run-many --target=lint --skip-nx-cache
+```
+
+### Unit tests
+
+Despite Angular 16 not introducing major breaking changes, you may still encounter issues with unit tests. Run the unit tests and fix any problems that arise.
+
+```bash
+npx nx run-many --target=test --skip-nx-cache
+```

docs/angular-migration/angular-16-17.md

@@ -0,0 +1,144 @@
+# Migrating from Angular 16 to Angular 17
+
+This guide for migrating ADF from Angular version 16 to version 17. Follow these steps to ensure a smooth transition.
+
+## 1. Run Nx migrate
+
+Use the `nx migrate` command to automatically update Nx and Angular dependencies.
+
+```bash
+npx nx migrate 17.3.1
+```
+
+Updated Nx dependencies:
+
+```json
+{
+    "nx": "^20.0.0",
+    "@nx/angular": "17.3.1",
+    "@nx/eslint-plugin": "17.3.1",
+    "@nx/js": "17.3.1",
+    "@nx/node": "17.3.1",
+    "@nx/storybook": "17.3.1",
+    "@nx/workspace": "17.3.1"
+}
+```
+
+Updated Angular dependencies
+
+```json
+{
+    "@angular/animations": "17.1.3",
+    "@angular/cdk": "17.1.2",
+    "@angular/common": "17.1.3",
+    "@angular/compiler": "17.1.3",
+    "@angular/core": "17.1.3",
+    "@angular/forms": "17.1.3",
+    "@angular/material": "17.1.2",
+    "@angular/material-date-fns-adapter": "17.1.2",
+    "@angular/platform-browser": "17.1.3",
+    "@angular/platform-browser-dynamic": "17.1.3",
+    "@angular/router": "17.1.3",
+    "zone.js": "0.14.8",
+    "ng-packagr": "17.1.2",
+    "@schematics/angular": "17.1.4"
+}
+```
+
+## 2. Manually update other dependencies
+
+There are a few dependencies that require manual update, here is the list:
+
+```json
+{
+    "dependencies": {
+        "apollo-angular": "6.0.0",
+        "@mat-datetimepicker/core": "13.0.2"
+    },
+    "devDependencies": {
+        "@typescript-eslint/eslint-plugin": "6.21.0",
+        "@typescript-eslint/parser": "6.21.0",
+        "@typescript-eslint/typescript-estree": "7.1.1",
+        "eslint-config-prettier": "9.1.0"
+    }
+}
+```
+
+```bash
+npm install --save apollo-angular@6.0.0 @mat-datetimepicker/core@13.0.2
+npm install --save-dev @typescript-eslint/eslint-plugin@6.21.0 @typescript-eslint/parser@6.21.0 @typescript-eslint/typescript-estree@7.1.1 eslint-config-prettier@9.1.0
+```
+
+## 3. Migrating js-api from mocha to jest
+
+In order to simplify the migration process, we are migrating the test runner from mocha to jest.
+
+### Installing dependencies
+
+```json
+{
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-preset-angular": "14.4.2",
+    "@types/jest": "^29.5.14"
+}
+```
+
+```bash
+npm install --save-dev jest jest-environment-jsdom jest-preset-angular@14 @types/jest
+```
+
+### Performing the migration
+
+It's recommended to use both test runners in parallel during the migration process. Nx project test jobs configuration:
+
+```json
+{
+    "test-old-mocha": {
+        "executor": "nx:run-commands",
+        "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+        "options": {
+            "codeCoverage": true
+        }
+    },
+    "test": {
+        "executor": "@nx/jest:jest",
+        "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+        "options": {
+            "jestConfig": "lib/js-api/jest.config.ts",
+            "passWithNoTests": true
+        }
+    }
+}
+```
+
+-   delete `.mocharc.json`
+-   delete `test-old-mocha` job from the project configuration
+
+## 4. Fixing CI/CD issues
+
+### General migration issues
+
+After running the migration script, you may need to manually fix some issues. Run common build targets to identify any problems.
+
+```bash
+npx nx run-many --target=build --skip-nx-cache
+```
+
+Work through all the problems topic by topic. If blocked by linting issues, disable the linting rules in the affected files. You can re-enable them in the next step.
+
+### Lint jobs
+
+After getting the build to work, run the lint jobs. Re-enable previously disabled linting rules and fix any issues that arise.
+
+```bash
+npx nx run-many --target=lint --skip-nx-cache
+```
+
+### Unit tests
+
+Despite Angular 16 not introducing major breaking changes, you may still encounter issues with unit tests. Run the unit tests and fix any problems that arise.
+
+```bash
+npx nx run-many --target=test --skip-nx-cache
+```

docs/content-services/services/tag.service.md

@@ -23,10 +23,10 @@ Manages tags in Content Services.
     -   _nodeId:_ `string`  - Id of node to which tags should be assigned.
     -   _tags:_ `TagBody[]`  - List of tags to create and assign or just assign if they already exist.
     -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`TagPaging`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/TagPaging.md)`|`[`TagEntry`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/TagEntry.md)`>` - Just linked tags to node or single tag if linked only one tag.
--   **createTags**(tags: `TagBody[]`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`TagEntry`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/TagEntry.md)`[]>`<br/>
+-   **createTags**(tags: `TagBody[]`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`TagEntry`](../../../lib/js-api/src/api/content-rest-api/docs/TagsApi.md#TagEntry) `|` [`TagPaging`](../../../lib/js-api/src/api/content-rest-api/docs/TagsApi.md#TagPaging)`>`<br/>
     Creates tags.
     -   _tags:_ `TagBody[]`  - list of tags to create.
-    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`TagEntry`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/TagEntry.md)`[]>` - Created tags.
+    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`TagEntry`](../../../lib/js-api/src/api/content-rest-api/docs/TagsApi.md#TagEntry) `|` [`TagPaging`](../../../lib/js-api/src/api/content-rest-api/docs/TagsApi.md#TagPaging)`>` - Created tags.
 -   **deleteTag**(tagId: `string`): [`Observable`](http://reactivex.io/documentation/observable.html)`<void>`<br/>
     Deletes a tag with tagId. This will cause the tag to be removed from all nodes. You must have admin rights to delete a tag.
     -   _tagId:_ `string`  - of the tag to be deleted

docs/core/components/viewer-render.component.md

@@ -64,6 +64,7 @@ Using with file [`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob):
 | urlFile | `string` | "" | If you want to load an external file that does not come from ACS you can use this URL to specify where to load the file from. |
 | viewerTemplateExtensions | [`TemplateRef`](https://angular.io/api/core/TemplateRef)`<any>` | null | Template containing ViewerExtensionDirective instances providing different viewer extensions based on supported file extension. |
 | nodeId | `string` | null | Identifier of a node opened by a viewer. |
+| customError | `string` | undefined | Custom error message to be displayed in the viewer. |
 
 ### Events
 

docs/core/components/viewer.component.md

@@ -90,6 +90,7 @@ See the [Custom layout](#custom-layout) section for full details of all availabl
 | viewerExtensions | [`TemplateRef`](https://angular.io/api/core/TemplateRef)`<any>` | null | Template containing ViewerExtensionDirective instances providing different viewer extensions based on supported file extension. |
 | nodeId | `string` | null | Identifier of a node opened by a viewer. |
 | nodeMimeType | `string` | undefined | Original node mime type, should be provided when renditiona mime type is different. |
+| customError | `string` | undefined | Custom error message to be displayed in the viewer. |
 
 ### Events
 
@@ -185,10 +186,9 @@ npm install pdfjs-dist
 
 ```ts
 // PDF.js
-require('pdfjs-dist/web/compatibility.js');
 const pdfjsLib = require('pdfjs-dist');
-pdfjsLib.PDFJS.workerSrc = './pdf.worker.js';
-require('pdfjs-dist/web/pdf_viewer.js');
+pdfjsLib.PDFJS.workerSrc = './pdf.worker.min.mjs';
+require('pdfjs-dist/web/pdf_viewer.mjs');
 ```
 
 - Update the `plugins` section of the `webpack.common.js` file with the following lines:
@@ -197,8 +197,8 @@ require('pdfjs-dist/web/pdf_viewer.js');
 new CopyWebpackPlugin([
     ...
     {
-        from: 'node_modules/pdfjs-dist/build/pdf.worker.js',
-        to: 'pdf.worker.js'
+        from: 'node_modules/pdfjs-dist/build/pdf.worker.min.mjs',
+        to: 'pdf.worker.min.mjs'
     }
 ])
 ```

docs/core/services/process-content.service.md

@@ -40,6 +40,10 @@ Manipulates content related to a Process Instance or Task Instance in APS.
     Gets the thumbnail for a related content file.
     -   _contentId:_ `number`  - ID of the related content
     -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob)`>` - Binary data of the thumbnail image
+-   **getContentRenditionTypePreview**(contentId: `number`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob)`>`<br/>
+    Gets the preview rendition for a related content file.
+    -   _contentId:_ `number` - ID of the related content
+    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob)`>` - Binary data of the related content
 -   **getFileContent**(contentId: `number`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`RelatedContentRepresentation`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-activiti-rest-api/docs/RelatedContentRepresentation.md)`>`<br/>
     Gets the metadata for a related content item.
     -   _contentId:_ `number`  - ID of the content item
@@ -325,6 +329,26 @@ The response looks like in this sample:
 
 See `getProcessRelatedContent` and `getTaskRelatedContent` for how to get to the `contentId`.
 
+#### getContentRenditionTypePreview(contentId: number): Observable`<Blob>`
+
+Get the preview type rendition for a related content file. A content file might be for example an
+MS Word document. This method would give you the PDF preview for this document,
+if it has been generated:
+
+```ts
+const contentId = 1;
+this.contentService.getContentRenditionTypePreview(contentId).subscribe(
+   res  => {
+     console.log('Response Preview BLOB: ', res);
+   }, error => {
+     console.log('Error: ', error);
+   });
+```
+
+The preview BLOB response looks something like this:
+
+`Blob(44101) {size: 44101, type: "application/pdf"}`
+
 #### getProcessRelatedContent(processId: string): Observable`<any>`
 
 Get related content items for passed in Process Instance ID, only metadata for related content is returned:

docs/process-services-cloud/components/form-cloud.component.md

@@ -85,11 +85,13 @@ The template defined inside `empty-form` will be shown when no form definition i
 | fieldValidators | [`FormFieldValidator`](../../../lib/core/src/lib/form/components/widgets/core/form-field-validator.ts)`[]` |  | [FormFieldValidator](../../../lib/core/src/lib/form/components/widgets/core/form-field-validator.ts) allow to override the form field validators provided. |
 | form | [`FormModel`](../../../lib/core/src/lib/form/components/widgets/core/form.model.ts) |  | Underlying form model instance. |
 | formId | `string` |  | Task id to fetch corresponding form and values. |
+| isNextTaskCheckboxChecked | `boolean` | false | Whether the `Open next task` checkbox is checked by default or not. |
 | nameNode | `string` |  | Name to assign to the new node where the metadata are stored. |
 | path | `string` |  | Path of the folder where the metadata will be stored. |
 | processInstanceId | `string` |  | ProcessInstanceId id to fetch corresponding form and values. |
 | readOnly | `boolean` | false | Toggle readonly state of the form. Forces all form widgets to render as readonly if enabled. |
 | showCompleteButton | `boolean` | true | Toggle rendering of the `Complete` outcome button. |
+| showNextTaskCheckbox | `boolean` | false | Toggle rendering of the `Open next task` checkbox. |
 | showRefreshButton | `boolean` | true | Toggle rendering of the `Refresh` button. |
 | showSaveButton | `boolean` | true | Toggle rendering of the `Save` outcome button. |
 | showTitle | `boolean` | true | Toggle rendering of the form title. |
@@ -111,6 +113,7 @@ The template defined inside `empty-form` will be shown when no form definition i
 | formSaved | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FormModel`](../../../lib/core/src/lib/form/components/widgets/core/form.model.ts)`>` | Emitted when the form is submitted with the `Save` or custom outcomes. |
 | displayModeOn | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FormCloudDisplayModeConfiguration`](../../../lib/process-services-cloud/src/lib/services/form-fields.interfaces.ts)`>` | Emitted when a display mode configuration is turned on. |
 | displayModeOff | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FormCloudDisplayModeConfiguration`](../../../lib/process-services-cloud/src/lib/services/form-fields.interfaces.ts)`>` | Emitted when a display mode configuration is turned off. |
+| nextTaskCheckboxCheckedChanged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`MatCheckboxChange`](https://material.angular.io/components/checkbox/api#MatCheckboxChange)`>` | Emitted when the `Open next task` checkbox was toggled. |
 
 ## Details
 

docs/process-services-cloud/components/screen-cloud.component.md

@@ -37,6 +37,7 @@ export class YourService extends ScreenRenderingService {
     [canClaimTask]="canClaimTask()"
     [canUnclaimTask]="canUnclaimTask()"
     [processInstanceId]="taskDetails.processInstanceId"
+    [rootProcessInstanceId]="taskDetails.rootProcessInstanceId"
     [screenId]="screenId"
     [showCancelButton]="showCancelButton"
     [taskName]="taskDetails.name"
@@ -60,6 +61,7 @@ export class YourService extends ScreenRenderingService {
 | canClaimTask              | `boolean`                             |               | Boolean informing if a task can be claimed.       |
 | canUnclaimTask            | `boolean`                             |               | Boolean informing if a task can be unclaimed.     |
 | processInstanceId         | `string`                              |               | Process Instance Id to fetch corresponding data.  |
+| rootProcessInstanceId     | `string`                              |               | Root Process Instance Id to fetch corresponding data.  |
 | readOnly                  | `boolean`                             | false         | Toggle readonly state of the task.                |
 | showCancelButton          | `boolean`                             | true          | Toggle rendering of the `Cancel` button.          |
 | screenId                  | `string`                              |               | Screen id to create dynamic component             |
@@ -94,6 +96,7 @@ Dynamic component must implement logic for method switchToDisplayMode.
     [canClaimTask]="canClaimTask()"
     [canUnclaimTask]="canUnclaimTask()"
     [processInstanceId]="taskDetails.processInstanceId"
+    [rootProcessInstanceId]="taskDetails.rootProcessInstanceId"
     [screenId]="screenId"
     [showCancelButton]="showCancelButton"
     [taskName]="taskDetails.name"

docs/process-services-cloud/components/start-process-cloud.component.md

@@ -37,9 +37,11 @@ Starts a process.
 | Name | Type | Default value | Description |
 | ---- | ---- | ------------- | ----------- |
 | appName | `string` | "" | (required) Name of the app. |
+| isNextTaskCheckboxChecked | `boolean` | false | Whether the `Open next task` checkbox is checked by default or not. |
 | maxNameLength | `number` | MAX_NAME_LENGTH | Maximum length of the process name. |
 | name | `string` | "" | Name of the process. |
 | processDefinitionName | `string` |  | Name of the process definition. |
+| showNextTaskCheckbox | `boolean` | false | Toggle rendering of the `Open next task` checkbox. |
 | showSelectProcessDropdown | `boolean` | true | Show/hide the process dropdown list. |
 | showTitle | `boolean` | true | Show/hide title. |
 | values | [`TaskVariableCloud`](../../../lib/process-services-cloud/src/lib/form/models/task-variable-cloud.model.ts)`[]` |  | Parameter to pass form field values in the start form if one is associated. |
@@ -52,6 +54,7 @@ Starts a process.
 | cancel | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`ProcessInstanceCloud`](../../../lib/process-services-cloud/src/lib/process/start-process/models/process-instance-cloud.model.ts)`>` | Emitted when the starting process is cancelled |
 | error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`ProcessInstanceCloud`](../../../lib/process-services-cloud/src/lib/process/start-process/models/process-instance-cloud.model.ts)`>` | Emitted when an error occurs. |
 | formContentClicked | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`ContentLinkModel`](../../../lib/core/src/lib/form/components/widgets/core/content-link.model.ts)`>` | Emitted when form content is clicked. |
+| nextTaskCheckboxCheckedChanged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`MatCheckboxChange`](https://material.angular.io/components/checkbox/api#MatCheckboxChange)`>` | Emitted when the `Open next task` checkbox was toggled. |
 | processDefinitionSelection | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`ProcessDefinitionCloud`](../../../lib/process-services-cloud/src/lib/models/process-definition-cloud.model.ts)`>` | Emitted when process definition selection changes. |
 | success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`ProcessInstanceCloud`](../../../lib/process-services-cloud/src/lib/process/start-process/models/process-instance-cloud.model.ts)`>` | Emitted when the process is successfully started. |
 

docs/process-services-cloud/components/task-form-cloud.component.md

@@ -33,34 +33,37 @@ Save and Complete buttons get disabled when at least one of the form's inputs ar
 
 ### Properties
 
-| Name                      | Type                                  | Default value | Description                                       |
-|---------------------------|---------------------------------------|---------------|---------------------------------------------------|
-| appName                   | `string`                              | ""            | App id to fetch corresponding form and values.    |
-| readOnly                  | `boolean`                             | false         | Toggle readonly state of the task.                |
-| showCancelButton          | `boolean`                             | true          | Toggle rendering of the `Cancel` button.          |
-| showCompleteButton        | `boolean`                             | true          | Toggle rendering of the `Complete` button.        |
-| showRefreshButton         | `boolean`                             | false         | Toggle rendering of the `Refresh` button.         |
-| showTitle                 | `boolean`                             | true          | Toggle rendering of the form title.               |
-| showValidationIcon        | `boolean`                             | true          | Toggle rendering of the `Validation` icon.        |
-| taskId                    | `string`                              |               | Task id to fetch corresponding form and values.   |
-| displayModeConfigurations | `FormCloudDisplayModeConfiguration[]` |               | The available display configurations for the form |
+| Name                      | Type                                  | Default value | Description                                                         |
+| ------------------------- | ------------------------------------- | ------------- | ------------------------------------------------------------------- |
+| appName                   | `string`                              | ""            | App id to fetch corresponding form and values.                      |
+| isNextTaskCheckboxChecked | `boolean`                             | false         | Whether the `Open next task` checkbox is checked by default or not. |
+| readOnly                  | `boolean`                             | false         | Toggle readonly state of the task.                                  |
+| showCancelButton          | `boolean`                             | true          | Toggle rendering of the `Cancel` button.                            |
+| showCompleteButton        | `boolean`                             | true          | Toggle rendering of the `Complete` button.                          |
+| showNextTaskCheckbox      | `boolean`                             | false         | Toggle rendering of the `Open next task` checkbox.                  |
+| showRefreshButton         | `boolean`                             | false         | Toggle rendering of the `Refresh` button.                           |
+| showTitle                 | `boolean`                             | true          | Toggle rendering of the form title.                                 |
+| showValidationIcon        | `boolean`                             | true          | Toggle rendering of the `Validation` icon.                          |
+| taskId                    | `string`                              |               | Task id to fetch corresponding form and values.                     |
+| displayModeConfigurations | `FormCloudDisplayModeConfiguration[]` |               | The available display configurations for the form                   |
 
 ### Events
 
-| Name               | Type                                              | Description                                                                                            |
-|--------------------|---------------------------------------------------|--------------------------------------------------------------------------------------------------------|
-| cancelClick        | `EventEmitter<string>`                            | Emitted when the cancel button is clicked.                                                             |
-| error              | `EventEmitter<any>`                               | Emitted when any error occurs.                                                                         |
-| executeOutcome     | `EventEmitter<FormOutcomeEvent>`                  | Emitted when any outcome is executed. Default behaviour can be prevented via `event.preventDefault()`. |
-| formCompleted      | `EventEmitter<FormModel>`                         | Emitted when the form is submitted with the `Complete` outcome.                                        |
-| formContentClicked | `EventEmitter<ContentLinkModel>`                  | Emitted when form content is clicked.                                                                  |
-| formSaved          | `EventEmitter<FormModel>`                         | Emitted when the form is saved.                                                                        |
-| onTaskLoaded       | `EventEmitter<TaskDetailsCloudModel>`             | Emitted when a task is loaded.                                                                         |
-| taskClaimed        | `EventEmitter<string>`                            | Emitted when the task is claimed.                                                                      |
-| taskCompleted      | `EventEmitter<string>`                            | Emitted when the task is completed.                                                                    |
-| taskUnclaimed      | `EventEmitter<string>`                            | Emitted when the task is unclaimed.                                                                    |
-| displayModeOn      | `EventEmitter<FormCloudDisplayModeConfiguration>` | Emitted when a display mode configuration is turned on.                                                |
-| displayModeOff     | `EventEmitter<FormCloudDisplayModeConfiguration>` | Emitted when a display mode configuration is turned off.                                               |
+| Name                           | Type                                              | Description                                                                                            |
+| ------------------------------ | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
+| cancelClick                    | `EventEmitter<string>`                            | Emitted when the cancel button is clicked.                                                             |
+| error                          | `EventEmitter<any>`                               | Emitted when any error occurs.                                                                         |
+| executeOutcome                 | `EventEmitter<FormOutcomeEvent>`                  | Emitted when any outcome is executed. Default behaviour can be prevented via `event.preventDefault()`. |
+| formCompleted                  | `EventEmitter<FormModel>`                         | Emitted when the form is submitted with the `Complete` outcome.                                        |
+| formContentClicked             | `EventEmitter<ContentLinkModel>`                  | Emitted when form content is clicked.                                                                  |
+| formSaved                      | `EventEmitter<FormModel>`                         | Emitted when the form is saved.                                                                        |
+| nextTaskCheckboxCheckedChanged | `EventEmitter<MatCheckboxChange>`                 | Emitted when the `Open next task` checkbox was toggled.                                                |
+| onTaskLoaded                   | `EventEmitter<TaskDetailsCloudModel>`             | Emitted when a task is loaded.                                                                         |
+| taskClaimed                    | `EventEmitter<string>`                            | Emitted when the task is claimed.                                                                      |
+| taskCompleted                  | `EventEmitter<string>`                            | Emitted when the task is completed.                                                                    |
+| taskUnclaimed                  | `EventEmitter<string>`                            | Emitted when the task is unclaimed.                                                                    |
+| displayModeOn                  | `EventEmitter<FormCloudDisplayModeConfiguration>` | Emitted when a display mode configuration is turned on.                                                |
+| displayModeOff                 | `EventEmitter<FormCloudDisplayModeConfiguration>` | Emitted when a display mode configuration is turned off.                                               |
 
 #### Enabling fullscreen display for the form of the task
 

docs/process-services-cloud/components/user-task-cloud.component.md

@@ -33,31 +33,33 @@ Based on property taskDetails: TaskDetailsCloudModel shows a form or a screen.
 
 ### Properties
 
-| Name                      | Type                                  | Default value | Description                                       |
-|---------------------------|---------------------------------------|---------------|---------------------------------------------------|
-| appName                   | `string`                              | ""            | App id to fetch corresponding form and values.    |
-| readOnly                  | `boolean`                             | false         | Toggle readonly state of the task.                |
-| showCancelButton          | `boolean`                             | true          | Toggle rendering of the `Cancel` button.          |
-| showCompleteButton        | `boolean`                             | true          | Toggle rendering of the `Complete` button.        |
-| showTitle                 | `boolean`                             | true          | Toggle rendering of the form title.               |
-| showValidationIcon        | `boolean`                             | true          | Toggle rendering of the `Validation` icon.        |
-| taskId                    | `string`                              |               | Task id to fetch corresponding form and values.   |
-| displayModeConfigurations | `FormCloudDisplayModeConfiguration[]` |               | The available display configurations for the form |
+| Name                      | Type                                  | Default value | Description                                                         |
+| ------------------------- | ------------------------------------- | ------------- | ------------------------------------------------------------------- |
+| appName                   | `string`                              | ""            | App id to fetch corresponding form and values.                      |
+| isNextTaskCheckboxChecked | `boolean`                             | false         | Whether the `Open next task` checkbox is checked by default or not. |
+| readOnly                  | `boolean`                             | false         | Toggle readonly state of the task.                                  |
+| showCancelButton          | `boolean`                             | true          | Toggle rendering of the `Cancel` button.                            |
+| showCompleteButton        | `boolean`                             | true          | Toggle rendering of the `Complete` button.                          |
+| showNextTaskCheckbox      | `boolean`                             | false         | Toggle rendering of the `Open next task` checkbox.                  |
+| showTitle                 | `boolean`                             | true          | Toggle rendering of the form title.                                 |
+| showValidationIcon        | `boolean`                             | true          | Toggle rendering of the `Validation` icon.                          |
+| taskId                    | `string`                              |               | Task id to fetch corresponding form and values.                     |
+| displayModeConfigurations | `FormCloudDisplayModeConfiguration[]` |               | The available display configurations for the form                   |
 
 ### Events
 
-| Name               | Type                                              | Description                                                                                            |
-|--------------------|---------------------------------------------------|--------------------------------------------------------------------------------------------------------|
-| cancelClick        | `EventEmitter<string>`                            | Emitted when the cancel button is clicked.                                                             |
-| error              | `EventEmitter<any>`                               | Emitted when any error occurs.                                                                         |
-| executeOutcome     | `EventEmitter<FormOutcomeEvent>`                  | Emitted when any outcome is executed. Default behaviour can be prevented via `event.preventDefault()`. |
-| formContentClicked | `EventEmitter<ContentLinkModel>`                  | Emitted when form content is clicked.                                                                  |
-| formSaved          | `EventEmitter<FormModel>`                         | Emitted when the form is saved.                                                                        |
-| onTaskLoaded       | `EventEmitter<TaskDetailsCloudModel>`             | Emitted when a task is loaded.                                                                         |
-| taskClaimed        | `EventEmitter<string>`                            | Emitted when the task is claimed.                                                                      |
-| taskCompleted      | `EventEmitter<string>`                            | Emitted when the task is completed.                                                                    |
-| taskUnclaimed      | `EventEmitter<string>`                            | Emitted when the task is unclaimed.                                                                    |
-                                              |
+| Name                           | Type                                  | Description                                                                                            |
+| ------------------------------ | ------------------------------------- | ------------------------------------------------------------------------------------------------------ |
+| cancelClick                    | `EventEmitter<string>`                | Emitted when the cancel button is clicked.                                                             |
+| error                          | `EventEmitter<any>`                   | Emitted when any error occurs.                                                                         |
+| executeOutcome                 | `EventEmitter<FormOutcomeEvent>`      | Emitted when any outcome is executed. Default behaviour can be prevented via `event.preventDefault()`. |
+| formContentClicked             | `EventEmitter<ContentLinkModel>`      | Emitted when form content is clicked.                                                                  |
+| formSaved                      | `EventEmitter<FormModel>`             | Emitted when the form is saved.                                                                        |
+| nextTaskCheckboxCheckedChanged | `EventEmitter<MatCheckboxChange>`     | Emitted when the `Open next task` checkbox was toggled.                                                |
+| onTaskLoaded                   | `EventEmitter<TaskDetailsCloudModel>` | Emitted when a task is loaded.                                                                         |
+| taskClaimed                    | `EventEmitter<string>`                | Emitted when the task is claimed.                                                                      |
+| taskCompleted                  | `EventEmitter<string>`                | Emitted when the task is completed.                                                                    |
+| taskUnclaimed                  | `EventEmitter<string>`                | Emitted when the task is unclaimed.                                                                    |
 
 #### Enabling fullscreen display for the form of the task
 

docs/process-services/services/task-filter.service.md

@@ -30,8 +30,8 @@ Manage Task Filters, which are pre-configured Task Instance queries.
     -   _appId:_ `number`  - ID of the target app
     -   _index:_ `number`  - (Optional) of the filter (optional)
     -   **Returns** `UserTaskFilterRepresentation` - The newly created filter
--   **getInvolvedTasksFilterInstance**(appId: `number`, index?: `number`): `UserTaskFilterRepresentation`<br/>
-    Creates and returns a filter for "Involved" task instances.
+-   **getOverdueTasksFilterInstance**(appId: `number`, index?: `number`): `UserTaskFilterRepresentation`<br/>
+    Creates and returns a filter for "Overdue" task instances.
     -   _appId:_ `number`  - ID of the target app
     -   _index:_ `number`  - (Optional) of the filter (optional)
     -   **Returns** `UserTaskFilterRepresentation` - The newly created filter
@@ -40,8 +40,8 @@ Manage Task Filters, which are pre-configured Task Instance queries.
     -   _appId:_ `number`  - ID of the target app
     -   _index:_ `number`  - (Optional) of the filter (optional)
     -   **Returns** `UserTaskFilterRepresentation` - The newly created filter
--   **getQueuedTasksFilterInstance**(appId: `number`, index?: `number`): `UserTaskFilterRepresentation`<br/>
-    Creates and returns a filter for "Queued Tasks" task instances.
+-   **getUnassignedTasksFilterInstance**(appId: `number`, index?: `number`): `UserTaskFilterRepresentation`<br/>
+    Creates and returns a filter for "Unassigned Tasks" task instances.
     -   _appId:_ `number`  - ID of the target app
     -   _index:_ `number`  - (Optional) of the filter (optional)
     -   **Returns** `UserTaskFilterRepresentation` - The newly created filter
@@ -55,6 +55,11 @@ Manage Task Filters, which are pre-configured Task Instance queries.
     -   _taskName:_ `string`  - Name of the filter
     -   _appId:_ `number`  - (Optional) ID of the app for the filter
     -   **Returns** `ObservableUserTaskFilterRepresentation>` - Details of task filter
+-   **updateTaskFilter**(filterId: `number`, updatedFilter: `UserTaskFilterRepresentation`): `Observable<UserTaskFilterRepresentation>`<br/>
+    Updates the instance of the filter.
+    -   filterId:_ `number`  - ID of a filter to update
+    -   updatedFilter:_ `UserTaskFilterRepresentation`  - new filter body
+    -   **Returns** `Observable<UserTaskFilterRepresentation>` - Updated filter instance.
 -   **getTaskListFilters**(appId?: `number`): `UserTaskFilterRepresentation[]>`<br/>
     Gets all task filters for a process app.
     -   _appId:_ `number`  - (Optional) Optional ID for a specific app
@@ -84,16 +89,16 @@ The response is an array of `UserTaskFilterRepresentation` objects:
     filters:  
         0: {id: 10, appId: 2, name: "Involved Tasks", recent: true, icon: "glyphicon-align-left", …}
         1: {id: 9, appId: 2, name: "My Tasks", recent: false, icon: "glyphicon-inbox", …}
-        2: {id: 11, appId: 2, name: "Queued Tasks", recent: false, icon: "glyphicon-record", …}
+        2: {id: 11, appId: 2, name: "Unassigned Tasks", recent: false, icon: "glyphicon-record", …}
         3: {id: 12, appId: 2, name: "Completed Tasks", recent: false, icon: "glyphicon-ok-sign", …}
         4: {id: 4004, appId: 2, name: "Completed Tasks", recent: false, icon: "glyphicon-ok-sign", …}
         5: {id: 4005, appId: 2, name: "My Tasks", recent: false, icon: "glyphicon-inbox", …}
-        6: {id: 4006, appId: 2, name: "Queued Tasks", recent: false, icon: "glyphicon-record", …}
+        6: {id: 4006, appId: 2, name: "Unassigned Tasks", recent: false, icon: "glyphicon-record", …}
         7: {id: 4007, appId: 2, name: "Involved Tasks", recent: false, icon: "glyphicon-align-left", …}
 ```
 
 These filters can now be used to get matching task instances for the process app with ID 2,
-such as 'Involved Tasks', 'My Tasks', 'Queued Tasks', and 'Completed Tasks'.
+such as 'Involved Tasks', 'My Tasks', 'Unassigned Tasks', and 'Completed Tasks'.
 
 ### Importing
 

docs/tutorials/README.md

@@ -10,7 +10,6 @@ Github only: true
 | [**Prerequisites and the requirements**](creating-your-first-adf-application.md) | Basic | In this tutorial you are going to learn how to create a very basic (and almost “empty”) ADF-based application that you can start enriching with features, behaviors and customizations. The creation of this basic ADF-based application is possible through a scaffolding tool called [Yeoman]\(https://yeoman.io/ "https://yeoman.io/"), which makes this task very straightforward. |
 | [**Creating your Alfresco JavaScript application**](creating-javascript-app-using-alfresco-js-api.md) | Basic | In this tutorial you will learn how to create an application in JavaScript from scratch to interact with Alfresco. |
 | [**Using ADF Components**](using-components.md) | Basic | In this tutorial, you will learn how to extend, use, and configure ADF Components. |
-| [**Basic theming**](basic-theming.md) | Beginner | In this tutorial you will see how to theme an ADF app by modifying the CSS.  |
 | [**Working with a Data Table**](working-with-data-table.md) | Intermediate | In this tutorial you will learn how to populate a DataTable component. |
 | [**Working with the Nodes API Service**](working-with-nodes-api-service.md) | Intermediate | In this tutorial you will learn how to use the [`NodesApiService`](../core/services/nodes-api.service.md). |
 | [**Working with Nodes using the JS API**](working-with-nodes-js-api.md) | Intermediate | In this tutorial you will learn how to use the [`AlfrescoCoreRestApi`](https://github.com/Alfresco/alfresco-js-api/tree/master/src/alfresco-core-rest-api). |

docs/tutorials/basic-theming.md

@@ -1,91 +0,0 @@
----
-Title: Basic theming
-Level: Beginner
----
-
-# Basic theming
-
-In this tutorial you will see how to theme an ADF app by modifying the CSS. 
-
-As detailed in the [user guide page about theming](../user-guide/theming.md), you can easily customize the [Cascading Style Sheets](https://en.wikipedia.org/wiki/Cascading_Style_Sheets) used by an ADF application. The focus of this tutorial is ADF apps built using Yeoman, but you can use the same principles to customize the themes in any ADF application.
-
-## About the `adf-core` theming 
-
-As described in the [user guide about theming](../user-guide/theming.md), eveything happens in the `src/custom-style.scss` file defining the *primary*, the *accent* and the *warn* set of palettes. For a detailed description of the different types of palettes, check the [user guide about theming](../user-guide/theming.md).
-
-As you can see directly in the `css` file, the sets of palettes are configured using some predefined variables used in the source code as described below.
-
-    $primary: mat-palette($alfresco-accent-orange);
-    $accent:  mat-palette($alfresco-accent-purple);
-    $warn:    mat-palette($alfresco-warn);
-
-The `mat-palette` function is used to define the [Material Design](https://material.io/design/introduction/) Palettes from a collection of colors and `$alfresco-ecm-cyan`, `$alfresco-accent-purple` and `$alfresco-warn` are variables declared locally in the project to define the colors to be used in the application.
-
-As you would expect, changing the parameter of the `mat-palette` function will change the colours of the entire application together.
-
-All the available variables containing the set of palettes for the application can be found in the `node_modules/@alfresco/adf-core/_theming.css` file. In that file you can find:
-
- - `$alfresco-ecm-cyan`
- - `$alfresco-dev-teal`
- - `$alfresco-ecm-blue`
- - `$alfresco-bpm-green`
- - `$alfresco-warn`
- - `$alfresco-accent-purple`
- - `$alfresco-accent-orange`
-
-Check the `_theming.css` file to see the latest changes and how the variables are structured and defined.
-
-## Changing the palette of your application
-
-As an example, let's change the set of palettes for the primary colours. In the `src/custom-style.scss` file, change the `$primary` definition as follows.
-
-    $primary: mat-palette($alfresco-ecm-blue);
-
-Once done, save the `custom-style.scss` file and you will see the application refreshed with different colours. That's all there is to it.
-
-## Developing your own palette
-
-In some cases you might want to do something more "customized", and you might want to choose your preferred colours for your application. In this case you simply need to develop your own palette in a local variable and use it as the primary, accent or warn palette.
-
-As an example, let's edit the `src/custom-style.scss` file adding the following source code immediately before the definition of the `$primary` variable.
-
-    $my-own-brown: (
-        50: #f9f2ec,
-        100: #ecd9c6,
-        200: #dfbf9f,
-        300: #d2a679,
-        400: #c68c53,
-        500: #ac7339,
-        600: #86592d,
-        700: #604020,
-        800: #392613,
-        900: #130d06,
-        A100: #e6ccb3,
-        A200: #cc9966,
-        A400: #996633,
-        A700: #4d3319,
-        contrast: (
-            50: $black-87-opacity,
-            100: $black-87-opacity,
-            200: $black-87-opacity,
-            300: $black-87-opacity,
-            400: $black-87-opacity,
-            500: white,
-            600: white,
-            700: white,
-            800: $white-87-opacity,
-            900: $white-87-opacity,
-            A100: $black-87-opacity,
-            A200: white,
-            A400: white,
-            A700: white,
-        )
-    );
-
-When you have done this, replace the `$primary` definition as follows and save the `custom-style.scss` file:
-
-    $primary: mat-palette($my-own-brown);
-
-After a few seconds you will see the application refreshing with different colours in the upper menu. In the following screenshot you can see how the new palette looks:
-
-![theming_palette](../docassets/images/theming_palette.png)

docs/tutorials/using-components.md

@@ -165,9 +165,3 @@ Inside the `<adf-login-footer/>` or `<adf-login-header/>` tags, we can put anyth
 
 Are you up for a challenge? Explore the [Login component](../core/components/login.component.md)
 docs to find out how you can change the logo and background image!
-
-# Next steps
-
-We have some tutorials for you to explore. Here are a few suggested ones to try next:
-
--   [Basic theming](basic-theming.md)

docs/upgrade-guide/upgrade-6.0.0-6.9.0.md

@@ -0,0 +1,155 @@
+---
+Title: Upgrading from ADF v5.0 to v6.0
+---
+
+# Upgrading from ADF v6.0 to v6.9
+
+This guide provides instructions on how to upgrade your v6.0.0 ADF projects to v6.9.0.
+
+## Before you begin
+
+Always perform upgrades on "clean" project state, backup your changes or make a project backup.
+
+```shell
+# Recommended clean up
+nx reset && rm -rf .angular .nx dist node_modules nxcache tmp
+```
+
+## .env file
+
+If you are using .env file, make sure to update it with the latest configuration:
+
+```yaml
+APP_CONFIG_OAUTH2_HOST="<oauth2_host>"
+APP_CONFIG_ENABLE_MOBILE_APP_SWITCH=false
+APP_CONFIG_PLUGIN_AOS=true
+APP_CONFIG_PLUGIN_CONTENT_SERVICE=true
+APP_CONFIG_PLUGIN_FOLDER_RULES=true
+APP_CONFIG_ENABLE_DOWNLOAD_PROMPT=false
+APP_CONFIG_ENABLE_DOWNLOAD_PROMPT_REMINDERS=false
+APP_CONFIG_DOWNLOAD_PROMPT_DELAY=30
+APP_CONFIG_DOWNLOAD_PROMPT_REMINDER_DELAY=30
+APP_CONFIG_ENABLE_FILE_AUTO_DOWNLOAD=false
+APP_CONFIG_FILE_AUTO_DOWNLOAD_SIZE_THRESHOLD_IN_MB=10
+```
+
+> [!IMPORTANT]
+> The configuration values are for migration purposes only.
+> Please refer to the documentation for more details on the configuration settings and values.
+
+## Library versions
+
+Update the `package.json` file with the latest library versions:
+
+- Angular: 14.1.3
+- Alfresco Component Libraries: 6.9.0
+- Alfresco JS-API: 7.6.1
+
+```json
+{
+    "dependencies": {
+        "@alfresco/adf-core": "6.9.0",
+        "@alfresco/adf-content-services": "6.9.0",
+        "@alfresco/adf-process-services-cloud": "6.9.0",
+        "@alfresco/adf-insights": "6.9.0",
+        "@alfresco/js-api": "7.6.1"
+    }
+}
+```
+
+> [!NOTE]  
+> You can also refer to the Alfresco Content Application [4.4.1 release](https://github.com/Alfresco/alfresco-content-app/blob/4.4.1/package.json) for the latest version of the libraries.
+
+### Remove old dependencies
+
+```json
+{
+    "dependencies": {
+        "@angular/material-moment-adapter": "14.1.3",
+        "@mat-datetimepicker/moment": "^9.0.68",
+        "moment": "^2.29.4",
+        "moment-es6": "1.0.0",
+        "@angular/flex-layout": "^14.0.0-beta.40"
+    }
+}
+```
+
+### Add extra dependencies
+
+```json
+{
+    "dependencies": {
+        "@angular/material-date-fns-adapter": "14.1.3",
+        "date-fns": "^2.30.0"
+    }
+}
+```
+
+Reinstall your dependencies and make initial build
+
+```sh
+npm i --legacy-peer-deps
+npm run build
+```
+
+### Update code
+
+If you are using the `@alfresco/js-api` library, make sure to update the code according to the latest version:
+
+| Before                 | After              |
+|------------------------|--------------------|
+| MinimalNodeEntity      | NodeEntry          |
+| SiteBody               | SiteBodyCreate     |
+| MinimalNodeEntryEntity | Node               |
+| MinimalNode            | Node               |
+| PathInfoEntity         | PathInfo           |
+| SiteBody               | SiteBodyCreate     |
+| FavoriteBody           | FavoriteBodyCreate |
+| PathElementEntity      | PathElement        |
+
+#### NullInjectorError: No provider for RedirectAuthService!
+
+If you are facing the `NullInjectorError: No provider for RedirectAuthService!` error, make sure to add the `AuthModule` to the `AppModule`:
+
+```typescript
+import { AuthModule } from '@alfresco/adf-core';
+
+@NgModule({
+    imports: [
+        // other imports
+        AuthModule.forRoot({ useHash: true })
+    ]
+})
+export class AppModule {}
+```
+
+For the development purposes, you may want to update the `app.config.json`:
+
+```json5
+{
+    "oauth2": {
+        // other configurations
+        "skipIssuerCheck": true,
+        "strictDiscoveryDocumentValidation": false
+    }
+}
+```
+
+### Document List component
+
+For document list components, remove the `display` property if used:
+
+```html
+[display]="documentDisplayMode$ | async"
+```
+
+## Final steps
+
+After you have updated the code, make sure to test your application thoroughly to ensure that everything is working as expected.
+
+You can build and run your application using the following commands:
+
+```sh
+npm run build
+npm start content-ce
+```

docs/upgrade-guide/upgrade-6.9.0-7.0.0.md

@@ -0,0 +1,183 @@
+---
+Title: Upgrading from ADF v6.9 to v7.0
+---
+
+# Upgrading from ADF v6.9 to v7.0
+
+This guide provides instructions on how to upgrade your v6.9.0 ADF projects to v7.0.0.
+
+## Before you begin
+
+Always perform upgrades on "clean" project state, backup your changes or make a project backup.
+
+```shell
+# Recommended clean up
+nx reset && rm -rf .angular .nx dist node_modules nxcache tmp
+```
+
+## Libraries updates
+
+Node version used is now 20.18.1.
+
+### Breaking changes with libraries:
+
+- Angular: 17.1.3
+- Angular Material: 17.1.2
+- Typescript: 5.3.3
+- RXJS: 7.8.1
+- NX: 20.0.0
+
+Angular updates can be done with "Update Guide" from Angular documentation.
+
+### Added libraries:
+- eslint-plugin-storybook
+- jasmine-marbles
+- @editorjs/paragraph
+- editorjs-text-alignment-blocktune
+- graphql-ws
+
+### Deleted libraries:
+- protractor
+- selenium-webdriver
+- webdriver-manager
+- shx
+- monaco-editor
+- ngx-monaco-editor-v2
+- @types/selenium-webdriver
+- protractor-retry-angular-cli
+- protractor-screenshoter-plugin
+- protractor-smartrunner
+
+Reinstall your dependencies and make initial build:
+
+```shell
+npm i
+npm run build
+```
+
+Review your applications as some styles and classes of Angular Material components might have changed.
+
+## Demo-Shell and e2e
+Demo shell and its e2e tests have been deleted.
+
+
+## Material module
+Material module is deprecated and will be removed in a future release. Please import components and modules independently.
+
+
+## Standalone components
+Most components have been changed to "standalone" and their modules have been deleted. Please import components directly.
+
+| Deleted modules                |
+|--------------------------------|
+| AttachmentModule               |
+| AppsListModule                 |
+| TaskListModule                 |
+| ProcessListModule              |
+| ProcessUserInfoModule          |
+| TaskCommentsModule             |
+| ProcessCommentsModule          |
+| PeopleModule                   |
+| DynamicTableModule             |
+| ContentWidgetModule            |
+| AnalyticsProcessModule         |
+| DiagramsModule                 |
+| ButtonsMenuModule              |
+| SitesDropdownModule            |
+| DataColumnModule               |
+| ContentUserInfoModule          |
+| AppCardViewModule              |
+| AppCloudSharedModule           |
+| FileViewModule                 |
+| AppProcessListModule           |
+| FolderDirectiveModule          |
+| ContentTypeModule              |
+| SortingPickerModule            |
+| ProcessServicesCloudPipeModule |
+| StartTaskCloudModule           |
+| ProcessDirectiveModule         |
+| StartProcessCloudModule        |
+| TaskDirectiveModule            |
+
+
+
+## Removed components, directives and pipes
+| Deleted components, directives and pipes |
+|------------------------------------------|
+| IsIncludedPipe                           |
+| TabLabelsPipe                            |
+| BooleanPipe                              |
+| FilterOutArrayObjectsByPropPipe          |
+| LocalizedRolePipe                        |
+| MimeTypeIconPipe                         |
+| FilterStringPipe                         |
+| ProcessNameCloudPipe                     |
+| FormStylePipe                            |
+| CancelProcessDirective                   |
+| MomentDateTimePipe                       |
+| MomentDatePipe                           |
+
+
+## A11y changes
+Components have been reviewed and changed to fix most important issues with accessibility. Please test your application thoroughly to ensure that everything is working as expected, as some components have changed their structure, html roles or attributes.
+
+| Components changed             | Description of changes                                               |
+|--------------------------------|----------------------------------------------------------------------|
+| Tooltips                       | Tooltips have been changed from Angular Material to standard tooltip |
+| Search Page and Search Filters | mat-chip-option replaced with mat-chip                               |
+| Columns Selector               | role attribute changes                                               |
+| DataTable                      | role attribute changes                                               |
+| Aspect List                    | structure of html changed                                            |
+
+
+## Guards
+All guards have been converted to functional guards (using the new Angular functional route guard pattern). Please review any custom guards in your application and adapt them to the functional pattern as needed.
+
+Example of converting a class-based guard to a functional guard:
+
+```typescript
+// Before (class-based)
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthGuard implements CanActivate {
+  constructor(private authService: AuthService, private router: Router) {}
+  
+  canActivate() {
+    if (this.authService.isLoggedIn()) {
+      return true;
+    }
+    this.router.navigate(['/login']);
+    return false;
+  }
+}
+
+// After (functional)
+export const authGuard = () => {
+  const authService = inject(AuthService);
+  const router = inject(Router);
+  
+  if (authService.isLoggedIn()) {
+    return true;
+  }
+  return router.parseUrl('/login');
+};
+```
+
+## Model and interface changes
+
+Some models and interfaces have changed:
+
+| Before                        | After                 | Notes                        |
+|-------------------------------|-----------------------|------------------------------|
+| TaskDetailsModel              | TaskRepresentation    | Rename all instances         |
+| IdentityUserFilterInterface   | Removed               | Use type definitions instead |
+| IdentityUserServiceInterface  | Removed               | Use type definitions instead |
+| TaskCloudServiceInterface     | Removed               | Use type definitions instead |
+
+
+## Final steps
+
+After you have updated the code, make sure to test your application thoroughly to ensure that everything is working as expected. Pay special attention to areas that use the renamed models or interfaces, and make sure all components are properly imported as standalone components.
+
+If you encounter any issues during the upgrade process, refer to the Angular update guide or the ADF community for assistance.

docs/user-guide/README.md

@@ -20,7 +20,6 @@ on an item below to see the corresponding guide page.
 -   [Theming](theming.md)
 -   [Right-to-left language support](rtl-support.md)
 -   [Transclusion](transclusion.md)
--   [Typography](typography.md)
 -   [Walkthrough - adding indicators to highlight information about a node](metadata-indicators.md)
 -   [kerberos](kerberos.md)
 

docs/user-guide/apa-extensions.md

@@ -4,16 +4,18 @@ Added: v4.1.0
 ---
 
 ## Form Extensibility for APA Form Widget
+
 This page describes how you can customize ADF forms to your own specification.
 
 ## Contents
+
 There are two ways to customize the form
 -   [Replace default form widgets with custom components](#replace-default-form-widgets-with-apa-form-widgets)
 -   [Replace custom form widget with custom components](#replace-custom-form-widgets-with-custom-components)
 
 ## Replace default form widgets with APA form widgets
 
-This is an example of replacing the standard `Text` [widget](../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) with a custom component for all APA forms rendered within the `<adf-form>` component.
+This is an example of replacing the standard `Text` with a custom component for all APA forms rendered within the `<adf-form>` component.
 
 1. Create a simple form with some `Text` widgets:
 
@@ -24,8 +26,10 @@ This is an example of replacing the standard `Text` [widget](../../lib/testing/s
     ```ts
     import { Component } from '@angular/core';
     import { WidgetComponent } from '@alfresco/adf-core';
+   
     @Component({
         selector: 'custom-editor',
+        standalone: true,
         template: `
             <div style="color: red">Look, I'm a APA custom editor!</div>
         `
@@ -33,40 +37,14 @@ This is an example of replacing the standard `Text` [widget](../../lib/testing/s
     export class CustomEditorComponent extends WidgetComponent {}
     ```
 
-2. Add it to the application module or any custom module that is imported into the application one:
+2. Import the [`FormRenderingService`](../core/services/form-rendering.service.md) in the feature module, or application module (recommended: `ProcessServicesExtensionModule`), and override the default mapping:
 
     ```ts
-    import { NgModule } from '@angular/core';
     import { CustomEditorComponent } from './custom-editor.component';
-    @NgModule({
-        declarations: [ CustomEditorComponent ],
-        exports: [ CustomEditorComponent ]
-    })
-    export class CustomEditorsModule {}
-    ```
-
-3. Every custom widget component should be added into the the collections `declarations` and `exports`. If you decided to store custom widgets in a separate dedicated module (and optionally as a separate re-distributable library) don't forget to import it into the main application:
-
-    ```ts
-    @NgModule({
-        imports: [
-            // ...
-            CustomEditorsModule
-            // ...
-        ],
-        providers: [],
-        bootstrap: [ AppComponent ]
-    })
-    export class AppModule {}
-    ```
-
-4. Import the [`FormRenderingService`](../core/services/form-rendering.service.md) into any of your Views and override the default mapping, for example:
-
-    ```ts
-    import { Component } from '@angular/core';
-    import { CustomEditorComponent } from './custom-editor.component';
-    @Component({...})
-    export class MyView {
+    import { FormRenderingService } from '@alfresco/adf-core';
+   
+    @NgModule({...})
+    export class ProcessServicesExtensionModule {
         constructor(formRenderingService: FormRenderingService) {
             this.formRenderingService.register({
                 'text': () => CustomEditorComponent
@@ -75,10 +53,12 @@ This is an example of replacing the standard `Text` [widget](../../lib/testing/s
     }
     ```
 
-5. At runtime the form should look similar to the following:
+> [!IMPORTANT]  
+> The widget should be registered outside the custom widget component, otherwise the widget will not be registered correctly.
 
-    ![custom text widget](../docassets/images/apa-simple-override-form.png)
+At runtime the form should look similar to the following:
 
+![custom text widget](../docassets/images/apa-simple-override-form.png)
 
 ## Replace custom form widgets with custom components
 
@@ -105,54 +85,30 @@ When displayed in a task, the field will look similar to the following:
 
 To render the missing content:
 
-1. Create an Angular component:
+1. Create a standalone Angular component:
 
     ```ts
     import { Component } from '@angular/core';
     import { WidgetComponent } from '@alfresco/adf-core';
+   
     @Component({
         selector: 'app-demo-widget',
+        standalone: true,
         template: `<div style="color: green">ADF version of custom form widget</div>`
     })
     export class DemoWidgetComponent extends WidgetComponent {}
     ```
 
-2. Place it inside the custom module:
+2. Import the [`FormRenderingService`](../core/services/form-rendering.service.md) in the feature module, or application module (recommended: `ProcessServicesExtensionModule`), and override the default mapping:
 
     ```ts
-    import { NgModule } from '@angular/core';
     import { DemoWidgetComponent } from './demo-widget.component';
-    @NgModule({
-        declarations: [ DemoWidgetComponent ],
-        exports: [ DemoWidgetComponent ]
-    })
-    export class CustomWidgetsModule {}
-    ```
-
-3. Import it into your Application Module:
-
-    ```ts
-    @NgModule({
-        imports: [
-            // ...
-            CustomWidgetsModule
-            // ...
-        ],
-        providers: [],
-        bootstrap: [ AppComponent ]
-    })
-    export class AppModule {}
-    ```
-
-4. Import the [`FormRenderingService`](../core/services/form-rendering.service.md) in any of your Views and provide the new mapping:
-
-    ```ts
-    import { Component } from '@angular/core';
-    import { DemoWidgetComponent } from './demo-widget.component';
-    @Component({...})
-    export class MyView {
+    import { FormRenderingService } from '@alfresco/adf-core';
+   
+    @NgModule({/*...*/})
+    export class ProcessServicesExtensionModule {
         constructor(formRenderingService: FormRenderingService) {
-            this.formRenderingService.register({
+            formRenderingService.register({
                 'custom-editor': () => DemoWidgetComponent
             });
         }
@@ -163,6 +119,9 @@ At runtime you should now see your custom Angular component rendered in place of
 
 ![adf form widget runtime](../docassets/images/apa-resolved-widget.png)
 
+> [!IMPORTANT]  
+> The widget should be registered outside the custom widget component, otherwise the widget will not be registered correctly.
+
 ## See Also
 
 -   [Extensibility](./extensibility.md)

docs/user-guide/theming.md

@@ -32,36 +32,6 @@ an [online palette design tool](http://mcg.mbitson.com/).
 See the [Material Design Style page](https://material.io/guidelines/style/color.html#) for
 more information about color concepts.
 
-## Using a pre-built theme
-
-Angular Material comes prepackaged with several pre-built theme css files. These theme files also
-include all of the styles for core (styles common to all components), so you only have to include a
-single css file for Angular Material in your app.
-
-You can include a theme file directly into your application from
-`@alfresco/adf-core/prebuilt-themes`
-
-Available pre-built themes:
-* `adf-blue-orange.css`
-* `adf-blue-purple.css`
-* `adf-cyan-orange.css`
-* `adf-cyan-purple.css`
-* `adf-green-orange.css`
-* `adf-green-purple.css`
-* `adf-indigo-pink.css`
-* `adf-pink-bluegrey.css`
-* `adf-purple-green.css`
-
-If you're using Angular CLI you can include one of the prebuilt themes in your `styles.scss` file:
-```css
-@import '~@alfresco/adf-core/prebuilt-themes/adf-blue-orange.css';
-```
-Or you can add it directly in your index.html
-
-```html
-<link href="node_modules/ng2-alfresco-core/prebuilt-themes/adf-blue-orange.css" rel="stylesheet">
-```
-
 ## Defining a custom theme
 
 When you want more customization than a pre-built theme offers, you can create your own theme file. You only need to include the packages you actually use in your application.
@@ -92,8 +62,6 @@ $theme:   mat.define-light-theme((
 @include alfresco-material-theme($theme);
 ```
 
-Notes: if you are using the Generator or the demo shell you need only to change the`/src/custom-style.scss` with your set of colors
-
 ### Multiple themes
 
 You can create multiple themes for your application:
@@ -135,7 +103,7 @@ $dark-theme:   mat.define-dark-theme((
     ...like above
 }
 ```
-Any component with the  `add-dark-theme` class will use the dark theme, while other components will fall back to the default.
+Any component with the `add-dark-theme` class will use the dark theme, while other components will fall back to the default.
 
 
 ## Default reusable class

docs/user-guide/typography.md

@@ -1,90 +0,0 @@
----
-Title: Typography
-Added: v2.0.0
----
-
-# ADF Typography
-
-Typography configuration lets you change the style of the text in your ADF app.
-
-## Customization
-
-To get started you need to include your custom font in the `/src/index.html` header:
-
-```html
-  <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
-```
-When adding custom typography, please be aware of angular material version
-(there are two different versions of typography levels: 2014 and 2018). Current 
-version is 14.
-After you need to change your `/src/custom-style.scss` to include the new font:
-
-```scss
-/*
- *  Include only packages that you are using (and core by default)
- */
-@use '@angular/material' as mat;
-@import '~@angular/material/theming';
-@import '~ng2-alfresco-core/styles/theming';
-@import '~ng2-alfresco-core/styles/index';
-@import '~ng2-activiti-analytics/styles/index';
-@import '~ng2-activiti-diagrams/styles/index';
-@import '~ng2-activiti-form/styles/index';
-@import '~ng2-activiti-processlist/styles/index';
-@import '~ng2-activiti-tasklist/styles/index';
-@import '~ng2-alfresco-datatable/styles/index';
-@import '~ng2-alfresco-documentlist/styles/index';
-@import '~ng2-alfresco-login/styles/index';
-@import '~ng2-alfresco-upload/styles/index';
-@import '~ng2-alfresco-userinfo/styles/index';
-
-$custom-typography: mat.define-typography-config(
-    $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif',
-    $display-4:     mat.define-typography-level(112px, 112px, 300),
-    $display-3:     mat.define-typography-level(56px, 56px, 400),
-    $display-2:     mat.define-typography-level(45px, 48px, 400),
-    $display-1:     mat.define-typography-level(34px, 40px, 400),
-    $headline:      mat.define-typography-level(24px, 32px, 400),
-    $title:         mat.define-typography-level(20px, 32px, 500),
-    $subheading-2:  mat.define-typography-level(16px, 28px, 400),
-    $subheading-1:  mat.define-typography-level(15px, 24px, 400),
-    $body-2:        mat.define-typography-level(14px, 24px, 500),
-    $body-1:        mat.define-typography-level(14px, 20px, 400),
-    $caption:       mat.define-typography-level(12px, 20px, 400),
-    $button:        mat.define-typography-level(14px, 14px, 500),
-    $input:         mat.define-typography-level(16px, 1.25, 400)
-);
-
-@include mat.core();
-
-$primary: mat.define-palette($alfresco-accent-orange);
-$accent:  mat.define-palette($alfresco-accent-purple);
-$warn:    mat.define-palette($alfresco-warn);
-$theme:   mat.define-light-theme(
-    (
-        color: (
-            primary: $primary,
-            accent: $accent,
-            warn: $warn,
-        ),
-        typography: $custom-typography
-    )
-);
-
-@include angular-material-theme($theme);
-
-@include alfresco-core-theme($theme);
-@include adf-analytics-theme($theme);
-@include adf-diagrams-theme($theme);
-@include adf-form-theme($theme);
-@include adf-processlist-theme($theme);
-@include adf-tasklist-theme($theme);
-@include alfresco-datatable-theme($theme);
-@include alfresco-documentlist-theme($theme);
-@include alfresco-login-theme($theme);
-@include alfresco-upload-theme($theme);
-@include alfresco-userinfo-theme($theme);
-
-```
-
-for more details about typography refer to [Material 2 documentation](https://github.com/angular/material2/blob/master/guides/typography.md)

lib/.gitignore

@@ -37,14 +37,6 @@ process-services-cloud/**/*.d.ts
 !config/karma-test-shim.js!
 
 *.tgzf
-core/prebuilt-themes/
 /package/
 /bundles/
 index.d.ts
-/.happypack
-
-process-services/_theming.scss
-content-services/_theming.scss
-core/_theming.scss
-insights/_theming.scss
-process-services-cloud/_theming.scss

lib/cli/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@alfresco/adf-cli",
-  "version": "7.0.0",
+  "version": "8.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@alfresco/adf-cli",
-      "version": "7.0.0",
+      "version": "8.0.0",
       "license": "Apache-2.0",
       "dependencies": {
-        "@alfresco/js-api": ">=8.0.0-alpha.7-0",
+        "@alfresco/js-api": ">=8.0.0-alpha.7",
         "commander": "^6.2.1",
         "ejs": "^3.1.9",
         "license-checker": "^25.0.1",
@@ -39,6 +39,27 @@
         "tslib": "^2.6.1"
       }
     },
+    "node_modules/@noble/hashes": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.8.0.tgz",
+      "integrity": "sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A==",
+      "license": "MIT",
+      "engines": {
+        "node": "^14.21.3 || >=16"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/@paralleldrive/cuid2": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@paralleldrive/cuid2/-/cuid2-2.2.2.tgz",
+      "integrity": "sha512-ZOBkgDwEdoYVlSeRbYYXs0S9MejQofiVYoTbKzy/6GQa39/q5tQU2IX46+shYnUkpEl3wc+J6wRlar7r2EK2xA==",
+      "license": "MIT",
+      "dependencies": {
+        "@noble/hashes": "^1.1.5"
+      }
+    },
     "node_modules/@types/ejs": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@types/ejs/-/ejs-3.1.2.tgz",
@@ -435,14 +456,18 @@
       }
     },
     "node_modules/formidable": {
-      "version": "3.5.1",
-      "resolved": "https://registry.npmjs.org/formidable/-/formidable-3.5.1.tgz",
-      "integrity": "sha512-WJWKelbRHN41m5dumb0/k8TeAx7Id/y3a+Z7QfhxP/htI9Js5zYaEDtG8uMgG0vM0lOlqnmjE99/kfpOYi/0Og==",
+      "version": "3.5.4",
+      "resolved": "https://registry.npmjs.org/formidable/-/formidable-3.5.4.tgz",
+      "integrity": "sha512-YikH+7CUTOtP44ZTnUhR7Ic2UASBPOqmaRkRKxRbywPTe5VxF7RRCck4af9wutiZ/QKM5nME9Bie2fFaPz5Gug==",
+      "license": "MIT",
       "dependencies": {
+        "@paralleldrive/cuid2": "^2.2.2",
         "dezalgo": "^1.0.4",
-        "hexoid": "^1.0.0",
         "once": "^1.4.0"
       },
+      "engines": {
+        "node": ">=14.0.0"
+      },
       "funding": {
         "url": "https://ko-fi.com/tunnckoCore/commissions"
       }
@@ -576,14 +601,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/hexoid": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/hexoid/-/hexoid-1.0.0.tgz",
-      "integrity": "sha512-QFLV0taWQOZtvIRIAdBChesmogZrtuXvVWsFHZTk2SU+anspqZ2vMnoLg7IE1+Uk16N19APic1BuF8bC8c2m5g==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/hosted-git-info": {
       "version": "2.8.9",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",

lib/cli/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@alfresco/adf-cli",
   "description": "Alfresco ADF cli and utils",
-  "version": "7.0.0",
+  "version": "8.0.0",
   "author": "Hyland Software, Inc. and its affiliates",
   "bin": {
     "adf-cli": "bin/adf-cli",

lib/config/index.js

@@ -1,38 +0,0 @@
-function DisableOutputWebpackPlugin(options) {
-	if (options && options.test && !Array.isArray(options.test))
-		options.test = [options.test]
-
-	this.options = options
-}
-
-DisableOutputWebpackPlugin.prototype.apply = function(compiler) {
-	compiler.hooks.emit.tapAsync('DisableOutputWebpackPlugin', (compilation, callback) => {
-
-		if (this.options && this.options.test) {
-			if (Object.keys(compilation.assets).length === 0 ) {
-				throw Error ('Error: The asset pre-theme is not there!')
-			}
-			Object.keys(compilation.assets).forEach((asset) => {
-				let output = true
-				this.options.test.some((regex) => {
-					if (asset.match(regex) != null) {
-						output = false
-						return true
-					}
-					return false
-				})
-
-				if (!output)
-					delete compilation.assets[asset]
-			});
-		} else {
-			Object.keys(compilation.assets).forEach((asset) => {
-				delete compilation.assets[asset]
-			})
-		}
-
-		callback();
-	});
-};
-
-module.exports = DisableOutputWebpackPlugin;

lib/config/webpack.style.js

@@ -1,51 +0,0 @@
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const DisableOutputWebpackPlugin = require('./index');
-const path = require("path");
-const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
-
-module.exports = {
-
-    mode: 'production',
-
-    optimization: {
-        minimizer: [new CssMinimizerPlugin({})],
-    },
-
-    entry: {
-        'adf-blue-orange': './lib/core/src/lib/styles/prebuilt/adf-blue-orange.scss',
-        'adf-blue-purple': './lib/core/src/lib/styles/prebuilt/adf-blue-purple.scss',
-        'adf-cyan-orange': './lib/core/src/lib/styles/prebuilt/adf-cyan-orange.scss',
-        'adf-cyan-purple': './lib/core/src/lib/styles/prebuilt/adf-cyan-purple.scss',
-        'adf-green-purple': './lib/core/src/lib/styles/prebuilt/adf-green-purple.scss',
-        'adf-green-orange': './lib/core/src/lib/styles/prebuilt/adf-green-orange.scss',
-        'adf-pink-bluegrey': './lib/core/src/lib/styles/prebuilt/adf-pink-bluegrey.scss',
-        'adf-indigo-pink': './lib/core/src/lib/styles/prebuilt/adf-indigo-pink.scss',
-        'adf-purple-green': './lib/core/src/lib/styles/prebuilt/adf-purple-green.scss'
-    },
-
-    output: {
-        path: path.resolve(__dirname, '../../dist/libs/core/lib/prebuilt-themes/'),
-    },
-
-    module: {
-        rules: [{
-            test: /\.scss$/,
-            use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
-        }]
-    },
-    plugins: [
-        new MiniCssExtractPlugin({
-            filename: "[name].css",
-            chunkFilename: "[id].css"
-        }),
-        new DisableOutputWebpackPlugin({
-            test: /\.js$/,
-        })
-    ],
-
-    resolve: {
-        alias: {
-            'styles': path.resolve(__dirname, '../core/src/lib/styles'),
-        }
-    }
-};

lib/content-services/.eslintrc.json

@@ -10,7 +10,13 @@
         "createDefaultProgram": true
       },
       "rules": {
-        "jsdoc/tag-lines": ["error", "any", {"startLines": 1}],
+        "jsdoc/tag-lines": [
+          "error",
+          "any",
+          {
+            "startLines": 1
+          }
+        ],
         "@typescript-eslint/naming-convention": "warn",
         "@typescript-eslint/consistent-type-assertions": "warn",
         "@typescript-eslint/prefer-for-of": "warn",
@@ -44,7 +50,6 @@
             "style": "kebab-case"
           }
         ],
-        "@angular-eslint/no-host-metadata-property": "off",
         "@angular-eslint/no-input-prefix": "error",
         "@typescript-eslint/consistent-type-definitions": "error",
         "@typescript-eslint/dot-notation": "off",
@@ -75,7 +80,8 @@
         "rxjs/no-subject-unsubscribe": "error",
         "rxjs/no-subject-value": "error",
         "rxjs/no-unsafe-takeuntil": "error",
-        "unicorn/filename-case": "error"
+        "unicorn/filename-case": "error",
+        "@angular-eslint/prefer-standalone": "off"
       }
     },
     {

lib/content-services/.storybook/preview.js

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

lib/content-services/karma.conf.js

@@ -9,9 +9,8 @@ module.exports = function (config) {
         basePath: '../../',
 
         files: [
-            { pattern: 'node_modules/pdfjs-dist/build/pdf.js', included: true, watched: false },
-            { pattern: 'node_modules/pdfjs-dist/build/pdf.worker.js', included: true, watched: false },
-            { pattern: 'node_modules/pdfjs-dist/web/pdf_viewer.js', included: true, watched: false },
+            { pattern: 'node_modules/pdfjs-dist/build/pdf.min.mjs', type: 'module', included: true, watched: false },
+            { pattern: 'node_modules/pdfjs-dist/build/pdf.worker.min.mjs', type: 'module', included: true, watched: false },
             {
                 pattern: 'node_modules/@angular/material/prebuilt-themes/indigo-pink.css',
                 included: true,
@@ -63,7 +62,7 @@ module.exports = function (config) {
         },
 
         mochaReporter: {
-            ignoreSkipped: process.env?.KARMA_IGNORE_SKIPPED === 'true'
+            ignoreSkipped: process.env.KARMA_IGNORE_SKIPPED === 'true'
         },
 
         coverageReporter: {

lib/content-services/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@alfresco/adf-content-services",
   "description": "Alfresco ADF content services",
-  "version": "7.0.0",
+  "version": "8.0.0",
   "author": "Hyland Software, Inc. and its affiliates",
   "repository": {
     "type": "git",
@@ -21,9 +21,9 @@
     "@angular/platform-browser": ">=14.1.3",
     "@angular/platform-browser-dynamic": ">=14.1.3",
     "@angular/router": ">=14.1.3",
-    "@alfresco/js-api": ">=8.0.0",
+    "@alfresco/js-api": ">=9.0.0",
     "@ngx-translate/core": ">=14.0.0",
-    "@alfresco/adf-core": ">=7.0.0"
+    "@alfresco/adf-core": ">=8.0.0"
   },
   "keywords": [
     "content-services",

lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.scss

@@ -1,66 +1,61 @@
-@import 'styles/mat-selectors';
+@use '../mat-selectors.scss' as ms;
 
 adf-aspect-list-dialog {
     display: block;
 
-    #{$mat-expansion-panel-body} {
+    #{ms.$mat-expansion-panel-body} {
         margin-top: -2px;
     }
 }
 
-.adf {
-    &-aspect-list-dialog-title {
-        font-size: large;
-        font-weight: 200;
-        margin-top: 0;
+.adf-aspect-list-dialog-title {
+    font-size: large;
+    font-weight: 200;
+    margin-top: 0;
+}
+
+.adf-aspect-list-dialog-description {
+    font-size: small;
+    line-height: normal;
+}
+
+.adf-aspect-list-dialog-information {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 4px;
+    padding-left: 4px;
+    padding-right: 4px;
+    font-size: small;
+}
+
+.adf-aspect-list-dialog {
+    justify-content: space-between;
+    padding-left: 4px;
+    padding-right: 4px;
+    padding-top: 0;
+
+    &::before {
+        display: none;
     }
+}
 
-    &-aspect-list-dialog-description {
-        font-size: small;
-        line-height: normal;
-    }
+.adf-aspect-dialog-content {
+    padding: 0;
+    margin-bottom: 8px;
 
-    &-aspect-list-dialog-information {
-        display: flex;
-        justify-content: space-between;
-        padding-bottom: 4px;
-        padding-left: 4px;
-        padding-right: 4px;
-        font-size: small;
-    }
-
-    &-aspect-list-dialog {
-        justify-content: space-between;
-        padding-left: 4px;
-        padding-right: 4px;
-        padding-top: 0;
-
-        #{$mat-dialog-content} {
-            padding: 0;
+    .adf-aspect-property-table {
+        .adf-aspect-property-table-cell {
+            font-size: smaller;
+            color: var(--adf-theme-foreground-text-color-087);
         }
 
-        &::before {
-            display: none;
-        }
-    }
-
-    &-aspect-dialog-content {
-        margin-bottom: 8px;
-
-        .adf-aspect-property-table {
-            .adf-aspect-property-table-cell {
-                font-size: smaller;
-                color: var(--adf-theme-foreground-text-color-087);
+        .adf-aspect-property-table-column {
+            &-name {
+                width: 30%;
             }
 
-            .adf-aspect-property-table-column {
-                &-name {
-                    width: 30%;
-                }
-
-                &-title {
-                    width: 50%;
-                }
+            &-title {
+                width: 50%;
             }
         }
     }

lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.ts

@@ -26,7 +26,6 @@ import { CommonModule } from '@angular/common';
 
 @Component({
     selector: 'adf-aspect-list-dialog',
-    standalone: true,
     imports: [CommonModule, MatDialogModule, TranslateModule, MatButtonModule, AspectListComponent, AutoFocusDirective],
     templateUrl: './aspect-list-dialog.component.html',
     styleUrls: ['./aspect-list-dialog.component.scss'],

lib/content-services/src/lib/aspect-list/aspect-list.component.scss

@@ -1,4 +1,5 @@
-@import 'styles/mat-selectors';
+@use '../mat-selectors.scss' as ms;
+
 $dialog-title-height: 100px;
 $dialog-information-height: 44px;
 $dialog-buttons-height: 68px;
@@ -49,7 +50,7 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei
             box-shadow: none;
             background: border-box;
 
-            #{$mat-checkbox-background} {
+            #{ms.$mat-checkbox-background} {
                 height: 16px;
                 width: 16px;
             }

lib/content-services/src/lib/aspect-list/aspect-list.component.ts

@@ -31,7 +31,6 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
     selector: 'adf-aspect-list',
-    standalone: true,
     imports: [CommonModule, MatExpansionModule, MatCheckboxModule, MatTableModule, TranslateModule, MatProgressSpinnerModule],
     templateUrl: './aspect-list.component.html',
     styleUrls: ['./aspect-list.component.scss'],

lib/content-services/src/lib/breadcrumb/breadcrumb.component.ts

@@ -26,7 +26,6 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
     selector: 'adf-breadcrumb',
-    standalone: true,
     imports: [CommonModule, MatIconModule, TranslateModule, MatSelectModule],
     templateUrl: './breadcrumb.component.html',
     styleUrls: ['./breadcrumb.component.scss'],

lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../mat-selectors.scss' as ms;
 
 $dropdown-horizontal-offset: 30px;
 
@@ -98,6 +98,6 @@ $dropdown-horizontal-offset: 30px;
     }
 }
 
-#{$cdk-overlay-pane}:has(>.adf-breadcrumb-dropdown-panel){
+#{ms.$cdk-overlay-pane}:has(> .adf-breadcrumb-dropdown-panel) {
     min-width: fit-content;
 }

lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.ts

@@ -25,7 +25,6 @@ import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'adf-dropdown-breadcrumb',
-    standalone: true,
     imports: [CommonModule, MatIconModule, MatSelectModule, TranslateModule],
     templateUrl: './dropdown-breadcrumb.component.html',
     styleUrls: ['./dropdown-breadcrumb.component.scss'],

lib/content-services/src/lib/category/categories-management/categories-management.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../mat-selectors.scss' as ms;
 
 .adf-categories-management {
     .adf-category-name-field {
@@ -20,7 +20,7 @@
             box-sizing: content-box;
         }
 
-        #{$mat-form-field-error} {
+        #{ms.$mat-form-field-error} {
             padding-top: 5px;
         }
     }
@@ -56,7 +56,7 @@
         background-color: inherit;
         color: inherit;
 
-        &:not(#{$mat-list-item-disabled}):hover {
+        &:not(#{ms.$mat-list-item-disabled}):hover {
             cursor: pointer;
             background: var(--adf-theme-mat-grey-color-a200);
         }
@@ -86,7 +86,7 @@
         overflow-wrap: anywhere;
     }
 
-    #{$mat-list-item-disabled} #{$mat-list-item-primary-text} {
+    #{ms.$mat-list-item-disabled} #{ms.$mat-list-item-primary-text} {
         opacity: 1;
     }
 }

lib/content-services/src/lib/category/categories-management/categories-management.component.ts

@@ -53,7 +53,6 @@ interface CategoryNameControlErrors {
 
 @Component({
     selector: 'adf-categories-management',
-    standalone: true,
     imports: [
         CommonModule,
         TranslateModule,

lib/content-services/src/lib/category/services/category-tree-datasource.service.spec.ts

@@ -18,7 +18,7 @@
 import { fakeAsync, TestBed } from '@angular/core/testing';
 import { CategoryService } from '../services/category.service';
 import { CategoryServiceMock } from '../mock/category-mock.service';
-import { TreeNodeType, TreeResponse } from '../../tree';
+import { TreeNodeType } from '../../tree';
 import { EMPTY, of } from 'rxjs';
 import { Pagination } from '@alfresco/js-api';
 import { CategoryTreeDatasourceService } from './category-tree-datasource.service';
@@ -39,7 +39,7 @@ describe('CategoryTreeDatasourceService', () => {
 
     it('should get root level categories', fakeAsync(() => {
         spyOn(categoryTreeDatasourceService, 'getParentNode').and.returnValue(undefined);
-        categoryTreeDatasourceService.getSubNodes(null, 0, 100).subscribe((treeResponse: TreeResponse<CategoryNode>) => {
+        categoryTreeDatasourceService.getSubNodes(null, 0, 100).subscribe((treeResponse) => {
             expect(treeResponse.entries.length).toBe(1);
             expect(treeResponse.entries[0].level).toBe(0);
             expect(treeResponse.entries[0].nodeType).toBe(TreeNodeType.RegularNode);
@@ -57,7 +57,7 @@ describe('CategoryTreeDatasourceService', () => {
             nodeType: TreeNodeType.RegularNode
         };
         spyOn(categoryTreeDatasourceService, 'getParentNode').and.returnValue(parentNode);
-        categoryTreeDatasourceService.getSubNodes(parentNode.id, 0, 100).subscribe((treeResponse: TreeResponse<CategoryNode>) => {
+        categoryTreeDatasourceService.getSubNodes(parentNode.id, 0, 100).subscribe((treeResponse) => {
             expect(treeResponse.entries.length).toBe(2);
             expect(treeResponse.entries[0].parentId).toBe(parentNode.id);
             expect(treeResponse.entries[0].level).toBe(1);

lib/content-services/src/lib/category/services/category-tree-datasource.service.ts

@@ -19,7 +19,6 @@ import { Injectable } from '@angular/core';
 import { TreeNodeType, TreeResponse, TreeService } from '../../tree';
 import { CategoryNode } from '../models/category-node.interface';
 import { CategoryService } from './category.service';
-import { CategoryEntry, CategoryPaging } from '@alfresco/js-api';
 import { from, Observable } from 'rxjs';
 import { map, mergeMap, toArray } from 'rxjs/operators';
 
@@ -32,9 +31,9 @@ export class CategoryTreeDatasourceService extends TreeService<CategoryNode> {
     public getSubNodes(parentNodeId: string, skipCount?: number, maxItems?: number, name?: string): Observable<TreeResponse<CategoryNode>> {
         return !name
             ? this.categoryService.getSubcategories(parentNodeId, skipCount, maxItems).pipe(
-                  map((response: CategoryPaging) => {
-                      const parentNode: CategoryNode = this.getParentNode(parentNodeId);
-                      const nodesList: CategoryNode[] = response.list.entries.map((entry: CategoryEntry) => ({
+                  map((response) => {
+                      const parentNode = this.getParentNode(parentNodeId);
+                      const nodesList: CategoryNode[] = response.list.entries.map((entry) => ({
                           id: entry.entry.id,
                           nodeName: entry.entry.name,
                           parentId: entry.entry.parentId,
@@ -55,8 +54,7 @@ export class CategoryTreeDatasourceService extends TreeService<CategoryNode> {
                           };
                           nodesList.push(loadMoreNode);
                       }
-                      const treeResponse: TreeResponse<CategoryNode> = { entries: nodesList, pagination: response.list.pagination };
-                      return treeResponse;
+                      return { entries: nodesList, pagination: response.list.pagination };
                   })
               )
             : this.categoryService.searchCategories(name, skipCount, maxItems).pipe(

lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.ts

@@ -31,7 +31,6 @@ import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'adf-content-metadata-card',
-    standalone: true,
     imports: [CommonModule, MatCardModule, ContentMetadataComponent, MatButtonModule, MatIconModule, TranslateModule],
     templateUrl: './content-metadata-card.component.html',
     styleUrls: ['./content-metadata-card.component.scss'],

lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata-header.component.ts

@@ -22,27 +22,26 @@ import { MatIconModule } from '@angular/material/icon';
 import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
-    standalone: true,
     imports: [CommonModule, MatIconModule, MatExpansionModule, TranslateModule],
     selector: 'adf-content-metadata-header',
     encapsulation: ViewEncapsulation.None,
     styles: [
         `
-                    adf-content-metadata-header {
-                        display: flex;
-                        align-items: center;
-                        width: 100%;
-                    }
+            adf-content-metadata-header {
+                display: flex;
+                align-items: center;
+                width: 100%;
+            }
 
-                    .adf-metadata-properties-title {
-                        display: block;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        font-weight: 700;
-                        font-size: 15px;
-                        padding-left: 12px;
-                    }
-                `
+            .adf-metadata-properties-title {
+                display: block;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                font-weight: 700;
+                font-size: 15px;
+                padding-left: 12px;
+            }
+        `
     ],
     template: `
         <ng-container>

lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../../mat-selectors.scss' as ms;
 
 $panel-properties-height: 56px !default;
 
@@ -11,11 +11,11 @@ $panel-properties-height: 56px !default;
             margin: 12px;
 
             adf-card-view-textitem {
-                #{$mat-form-field-subscript-wrapper} {
+                #{ms.$mat-form-field-subscript-wrapper} {
                     display: none;
                 }
 
-                #{$mat-form-field-infix} {
+                #{ms.$mat-form-field-infix} {
                     padding-bottom: 0;
                 }
             }
@@ -47,7 +47,7 @@ $panel-properties-height: 56px !default;
             }
         }
 
-        #{$mat-expansion-panel-body} {
+        #{ms.$mat-expansion-panel-body} {
             padding-top: 16px;
 
             input {
@@ -64,7 +64,7 @@ $panel-properties-height: 56px !default;
             color: var(--adf-theme-foreground-text-color-054);
         }
 
-        #{$mat-chip} {
+        #{ms.$mat-chip} {
             &.metadata-properties-tag-chip {
                 // TODO: bug open https://github.com/angular/components/issues/26584
                 /* stylelint-disable selector-class-pattern */

lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts

@@ -63,7 +63,6 @@ enum DefaultPanels {
 
 @Component({
     selector: 'adf-content-metadata',
-    standalone: true,
     imports: [
         CommonModule,
         MatExpansionModule,

lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../mat-selectors.scss' as ms;
 
 /* stylelint-disable no-descending-specificity */
 $content-node-selector-thumbnail-width: 35px !default;
@@ -15,8 +15,8 @@ h2.adf-search-results-label {
     color: var(--adf-theme-foreground-text-color-087);
 }
 
-#{$mdc-dialog} {
-    #{$mat-dialog-surface}:is(div) {
+#{ms.$mdc-dialog} {
+    #{ms.$mat-dialog-surface}:is(div) {
         padding-bottom: 0;
     }
 }
@@ -41,17 +41,17 @@ h2.adf-search-results-label {
     }
 
     &-content {
-        #{$mat-input-element} {
+        #{ms.$mat-input-element} {
             &:focus::placeholder {
                 color: var(--theme-primary-color);
             }
         }
 
-        #{$mat-form-field-wrapper} {
-            #{$mat-form-field-flex} {
+        #{ms.$mat-form-field-wrapper} {
+            #{ms.$mat-form-field-flex} {
                 align-items: center;
 
-                #{$mat-form-field-infix} {
+                #{ms.$mat-form-field-infix} {
                     padding-bottom: 0;
                 }
             }
@@ -59,13 +59,13 @@ h2.adf-search-results-label {
 
         .adf-sites-dropdown-form-field {
             label {
-                &#{$mat-form-field-label} {
+                &#{ms.$mat-form-field-label} {
                     top: 32px;
                 }
             }
         }
 
-        #{$mat-form-field-subscript-wrapper} {
+        #{ms.$mat-form-field-subscript-wrapper} {
             height: 16px;
         }
 
@@ -88,7 +88,7 @@ h2.adf-search-results-label {
                 }
             }
 
-            #{$mat-form-field-subscript-wrapper} {
+            #{ms.$mat-form-field-subscript-wrapper} {
                 display: none;
             }
         }

lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.ts

@@ -62,7 +62,6 @@ export const defaultValidation = () => true;
 
 @Component({
     selector: 'adf-content-node-selector-panel',
-    standalone: true,
     imports: [
         CommonModule,
         MatFormFieldModule,

lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../mat-selectors.scss' as ms;
 
 adf-content-node-selector {
     .adf-upload-dialog {
@@ -42,7 +42,7 @@ adf-content-node-selector {
 }
 
 .adf-content-node-selector-dialog {
-    #{$mat-form-field} {
+    #{ms.$mat-form-field} {
         width: 100%;
     }
 
@@ -50,7 +50,7 @@ adf-content-node-selector {
         color: var(--adf-theme-foreground-base-color-045);
     }
 
-    #{$mat-dialog-title} {
+    #{ms.$mat-dialog-title} {
         margin-bottom: 0;
         padding: 0;
 

lib/content-services/src/lib/content-node-selector/content-node-selector.component.ts

@@ -17,13 +17,7 @@
 
 import { Component, DestroyRef, inject, Inject, OnInit, ViewEncapsulation } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
-import {
-    EmptyListComponent,
-    NotificationService,
-    ToolbarComponent,
-    ToolbarTitleComponent,
-    TranslationService
-} from '@alfresco/adf-core';
+import { EmptyListComponent, NotificationService, ToolbarComponent, ToolbarTitleComponent, TranslationService } from '@alfresco/adf-core';
 import { Node } from '@alfresco/js-api';
 import { AllowableOperationsEnum } from '../common/models/allowable-operations.enum';
 import { ContentService } from '../common/services/content.service';
@@ -47,7 +41,6 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
     selector: 'adf-content-node-selector',
-    standalone: true,
     imports: [
         CommonModule,
         MatDialogModule,
@@ -70,7 +63,6 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
     encapsulation: ViewEncapsulation.None
 })
 export class ContentNodeSelectorComponent implements OnInit {
-
     title: string;
     action: NodeAction;
     buttonActionName: string;

lib/content-services/src/lib/content-node-selector/site-dropdown/sites-dropdown.component.ts

@@ -35,7 +35,6 @@ export enum Relations {
 
 @Component({
     selector: 'adf-sites-dropdown',
-    standalone: true,
     imports: [CommonModule, TranslateModule, MatFormFieldModule, MatSelectModule, InfiniteSelectScrollDirective],
     templateUrl: './sites-dropdown.component.html',
     encapsulation: ViewEncapsulation.None,

lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss

@@ -1,8 +1,8 @@
-@import 'styles/mat-selectors';
+@use '../mat-selectors.scss' as ms;
 
 .adf-share-link-dialog {
     .adf-share-link {
-        #{$mat-form-field-flex} {
+        #{ms.$mat-form-field-flex} {
             height: 48px;
         }
 
@@ -35,7 +35,7 @@
         &__form {
             padding-top: 8px;
 
-            #{$mat-form-field-infix}:has(.adf-share-link__input) {
+            #{ms.$mat-form-field-infix}:has(.adf-share-link__input) {
                 border-top: 0.9375em solid transparent;
                 border-bottom: 0.9375em solid transparent;
                 height: 16px;

lib/content-services/src/lib/content-node-share/content-node-share.dialog.ts

@@ -41,7 +41,6 @@ interface SharedDialogFormProps {
 
 @Component({
     selector: 'adf-share-dialog',
-    standalone: true,
     imports: [
         CommonModule,
         TranslateModule,

lib/content-services/src/lib/content-node-share/content-node-share.directive.spec.ts

@@ -25,7 +25,6 @@ import { NodeSharedDirective } from '@alfresco/adf-content-services';
 
 @Component({
     selector: 'adf-node-share-test-component',
-    standalone: true,
     imports: [NodeSharedDirective],
     template: `
         <button

lib/content-services/src/lib/content-type/content-type-dialog.component.ts

@@ -28,7 +28,6 @@ import { MatButtonModule } from '@angular/material/button';
 
 @Component({
     selector: 'adf-content-type-dialog',
-    standalone: true,
     imports: [CommonModule, MatDialogModule, TranslateModule, MatExpansionModule, MatTableModule, MatButtonModule],
     templateUrl: './content-type-dialog.component.html',
     styleUrls: ['./content-type-dialog.component.scss'],

lib/content-services/src/lib/content.module.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { NgModule, ModuleWithProviders, APP_INITIALIZER } from '@angular/core';
+import { NgModule, ModuleWithProviders, inject, provideAppInitializer } from '@angular/core';
 import { provideTranslations } from '@alfresco/adf-core';
 import { MatDatetimepickerModule, MatNativeDatetimeModule } from '@mat-datetimepicker/core';
 import { CONTENT_TAG_DIRECTIVES } from './tag/tag.module';
@@ -115,24 +115,18 @@ export class ContentModule {
                 provideTranslations('adf-content-services', 'assets/adf-content-services'),
                 ContentAuthLoaderService,
                 { provide: AlfrescoApiService, useClass: AlfrescoApiNoAuthService },
-                {
-                    provide: APP_INITIALIZER,
-                    useFactory: versionCompatibilityFactory,
-                    deps: [VersionCompatibilityService],
-                    multi: true
-                },
-                {
-                    provide: APP_INITIALIZER,
-                    useFactory: contentAuthLoaderFactory,
-                    deps: [ContentAuthLoaderService],
-                    multi: true
-                },
-                {
-                    provide: APP_INITIALIZER,
-                    useFactory: createAlfrescoApiInstance,
-                    deps: [AlfrescoApiLoaderService],
-                    multi: true
-                }
+                provideAppInitializer(() => {
+                    const initializerFn = versionCompatibilityFactory(inject(VersionCompatibilityService));
+                    return initializerFn();
+                }),
+                provideAppInitializer(() => {
+                    const initializerFn = contentAuthLoaderFactory(inject(ContentAuthLoaderService));
+                    return initializerFn();
+                }),
+                provideAppInitializer(() => {
+                    const initializerFn = createAlfrescoApiInstance(inject(AlfrescoApiLoaderService));
+                    return initializerFn();
+                })
             ]
         };
     }

lib/content-services/src/lib/dialogs/category-selector/category-selector.dialog.ts

@@ -31,7 +31,6 @@ export interface CategorySelectorDialogOptions {
 
 @Component({
     selector: 'adf-category-selector-dialog',
-    standalone: true,
     imports: [CommonModule, MatDialogModule, TranslateModule, CategoriesManagementComponent, MatButtonModule],
     templateUrl: './category-selector.dialog.html',
     styleUrls: ['./category-selector.dialog.scss'],

lib/content-services/src/lib/dialogs/download-zip/download-zip.dialog.stories.component.ts

@@ -23,7 +23,8 @@ import { FileDownloadStatus } from '@alfresco/js-api';
 
 @Component({
     selector: 'adf-download-zip-dialog-storybook',
-    template: `<button mat-raised-button (click)="openDialog()">Open dialog</button>`
+    template: `<button mat-raised-button (click)="openDialog()">Open dialog</button>`,
+    standalone: false
 })
 export class DownloadZipDialogStorybookComponent implements OnInit, OnChanges {
     @Input()

lib/content-services/src/lib/dialogs/download-zip/download-zip.dialog.ts

@@ -27,7 +27,8 @@ import { FileDownloadStatus } from '@alfresco/js-api';
     templateUrl: './download-zip.dialog.html',
     styleUrls: ['./download-zip.dialog.scss'],
     host: { class: 'adf-download-zip-dialog' },
-    encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None,
+    standalone: false
 })
 export class DownloadZipDialogComponent implements OnInit {
     // flag for async threads

lib/content-services/src/lib/dialogs/folder/folder.dialog.scss

@@ -1,21 +1,21 @@
-@import 'styles/mat-selectors';
+@use '../../mat-selectors.scss' as ms;
 
 .adf-folder-dialog {
     .adf-folder-dialog-content {
         padding: 0;
         overflow: unset;
 
-        #{$mat-form-field-infix} {
+        #{ms.$mat-form-field-infix} {
             padding-bottom: 3.5px;
         }
 
-        #{$mat-form-field-hide-placeholder} {
-            #{$mat-floating-label} {
+        #{ms.$mat-form-field-hide-placeholder} {
+            #{ms.$mat-floating-label} {
                 padding-top: 20px;
             }
         }
 
-        #{$mat-form-field-hint-wrapper} {
+        #{ms.$mat-form-field-hint-wrapper} {
             padding-left: 0;
             margin-left: -2px;
             color: var(--adf-theme-foreground-secondary-text-color);

lib/content-services/src/lib/dialogs/folder/folder.dialog.ts

@@ -33,7 +33,6 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
     selector: 'adf-folder-dialog',
-    standalone: true,
     imports: [
         CommonModule,
         MatDialogModule,

lib/content-services/src/lib/dialogs/library/library.dialog.scss

@@ -1,4 +1,4 @@
-@import 'styles/mat-selectors';
+@use '../../mat-selectors.scss' as ms;
 
 .adf-library-dialog {
     .adf-library-dialog-content {
@@ -28,34 +28,34 @@
             padding-top: 4.5px;
         }
 
-        #{$mat-floating-label} {
+        #{ms.$mat-floating-label} {
             -webkit-font-smoothing: subpixel-antialiased;
         }
 
-        &#{$mat-form-field-hide-placeholder} {
-            #{$mat-floating-label} {
+        &#{ms.$mat-form-field-hide-placeholder} {
+            #{ms.$mat-floating-label} {
                 padding-top: 20px;
             }
         }
 
         &-description {
-            &#{$mat-form-field-hide-placeholder} {
-                #{$mat-floating-label} {
+            &#{ms.$mat-form-field-hide-placeholder} {
+                #{ms.$mat-floating-label} {
                     padding-top: 20px;
                 }
             }
         }
 
-        #{$mat-form-field-infix} {
+        #{ms.$mat-form-field-infix} {
             padding-bottom: 3.5px;
         }
 
-        #{$mat-form-field-error-wrapper} {
+        #{ms.$mat-form-field-error-wrapper} {
             margin-left: -2px;
             font-size: 10.5px;
             -webkit-font-smoothing: subpixel-antialiased;
 
-            #{$mat-form-field-error} {
+            #{ms.$mat-form-field-error} {
                 height: 13.125px;
             }
         }

lib/content-services/src/lib/dialogs/library/library.dialog.ts

@@ -43,7 +43,6 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
     selector: 'adf-library-dialog',
-    standalone: true,
     imports: [
         CommonModule,
         MatDialogModule,

lib/content-services/src/lib/dialogs/node-lock/node-lock.dialog.ts

@@ -31,7 +31,6 @@ import { AlfrescoApiService } from '../../services/alfresco-api.service';
 
 @Component({
     selector: 'adf-node-lock',
-    standalone: true,
     imports: [
         CommonModule,
         TranslateModule,

lib/content-services/src/lib/directives/auto-focus.directive.spec.ts

@@ -22,7 +22,6 @@ import { By } from '@angular/platform-browser';
 import { NoopTranslateModule } from '@alfresco/adf-core';
 
 @Component({
-    standalone: true,
     imports: [AutoFocusDirective],
     template: ` <div tabindex="0" adf-auto-focus>Test</div>`
 })

lib/content-services/src/lib/directives/check-allowable-operation.directive.spec.ts

@@ -26,7 +26,8 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 @Component({
     selector: 'adf-text-subject',
-    template: ''
+    template: '',
+    standalone: false
 })
 class TestComponent implements NodeAllowableOperationSubject {
     disabled: boolean = false;

lib/content-services/src/lib/directives/library-favorite.directive.spec.ts

@@ -20,9 +20,10 @@ import { LibraryFavoriteDirective } from './library-favorite.directive';
 import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { LibraryEntity } from '../interfaces/library-entity.interface';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { NotificationService } from '@alfresco/adf-core';
+import { ContentTestingModule } from '../testing/content.testing.module';
 
 @Component({
-    standalone: true,
     imports: [LibraryFavoriteDirective],
     selector: 'app-test-component',
     template: `<button #favoriteLibrary="favoriteLibrary" [adf-favorite-library]="selection">Favorite</button>`
@@ -38,11 +39,13 @@ describe('LibraryFavoriteDirective', () => {
     let fixture: ComponentFixture<TestComponent>;
     let component: TestComponent;
     let selection: LibraryEntity;
+    let notificationService: NotificationService;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [HttpClientTestingModule, TestComponent, LibraryFavoriteDirective]
+            imports: [HttpClientTestingModule, TestComponent, LibraryFavoriteDirective, ContentTestingModule]
         });
+        notificationService = TestBed.inject(NotificationService);
         fixture = TestBed.createComponent(TestComponent);
         component = fixture.componentInstance;
         selection = { entry: { guid: 'guid', id: 'id', title: 'Site', visibility: 'PUBLIC' }, isLibrary: true, isFavorite: false };
@@ -80,9 +83,10 @@ describe('LibraryFavoriteDirective', () => {
         expect(component.directive.isFavorite()).toBe(false);
     });
 
-    it('should call addFavorite() on click event when selection is not a favorite', async () => {
+    it('should call addFavorite() and display snackbar message on click event when selection is not a favorite', async () => {
         spyOn(component.directive.favoritesApi, 'getFavoriteSite').and.returnValue(Promise.reject(new Error('error')));
         spyOn(component.directive.favoritesApi, 'createFavorite').and.returnValue(Promise.resolve(null));
+        spyOn(notificationService, 'showInfo');
 
         fixture.detectChanges();
         await fixture.whenStable();
@@ -90,13 +94,18 @@ describe('LibraryFavoriteDirective', () => {
         expect(component.directive.isFavorite()).toBeFalsy();
 
         fixture.nativeElement.querySelector('button').dispatchEvent(new MouseEvent('click'));
+
         fixture.detectChanges();
+        await fixture.whenStable();
+
         expect(component.directive.favoritesApi.createFavorite).toHaveBeenCalled();
+        expect(notificationService.showInfo).toHaveBeenCalledWith('NODE_FAVORITE_DIRECTIVE.MESSAGES.NODE_ADDED', null, { name: 'Site' });
     });
 
-    it('should call removeFavoriteSite() on click event when selection is favorite', async () => {
+    it('should call removeFavoriteSite() and display snackbar message on click event when selection is favorite', async () => {
         spyOn(component.directive.favoritesApi, 'getFavoriteSite').and.returnValue(Promise.resolve(null));
         spyOn(component.directive.favoritesApi, 'deleteFavorite').and.returnValue(Promise.resolve());
+        spyOn(notificationService, 'showInfo');
 
         selection.isFavorite = true;
 
@@ -111,5 +120,6 @@ describe('LibraryFavoriteDirective', () => {
         await fixture.whenStable();
 
         expect(component.directive.favoritesApi.deleteFavorite).toHaveBeenCalled();
+        expect(notificationService.showInfo).toHaveBeenCalledWith('NODE_FAVORITE_DIRECTIVE.MESSAGES.NODE_REMOVED', null, { name: 'Site' });
     });
 });

lib/content-services/src/lib/directives/library-favorite.directive.ts

@@ -19,6 +19,7 @@ import { Directive, HostListener, Input, OnChanges, Output, EventEmitter, Simple
 import { FavoriteBodyCreate, FavoritesApi } from '@alfresco/js-api';
 import { AlfrescoApiService } from '../services/alfresco-api.service';
 import { LibraryEntity } from '../interfaces/library-entity.interface';
+import { NotificationService } from '@alfresco/adf-core';
 
 @Directive({
     standalone: true,
@@ -58,7 +59,7 @@ export class LibraryFavoriteDirective implements OnChanges {
         }
     }
 
-    constructor(private alfrescoApiService: AlfrescoApiService) {}
+    constructor(private readonly alfrescoApiService: AlfrescoApiService, private readonly notificationService: NotificationService) {}
 
     ngOnChanges(changes: SimpleChanges) {
         if (!changes.library.currentValue) {
@@ -92,6 +93,7 @@ export class LibraryFavoriteDirective implements OnChanges {
             .createFavorite('-me-', favoriteBody)
             .then((libraryEntry) => {
                 this.targetLibrary.isFavorite = true;
+                this.notificationService.showInfo('NODE_FAVORITE_DIRECTIVE.MESSAGES.NODE_ADDED', null, { name: this.library.entry.title });
                 this.toggle.emit(libraryEntry);
             })
             .catch((error) => this.error.emit(error));
@@ -102,6 +104,7 @@ export class LibraryFavoriteDirective implements OnChanges {
             .deleteFavorite('-me-', favoriteId)
             .then((libraryBody) => {
                 this.targetLibrary.isFavorite = false;
+                this.notificationService.showInfo('NODE_FAVORITE_DIRECTIVE.MESSAGES.NODE_REMOVED', null, { name: this.library.entry.title });
                 this.toggle.emit(libraryBody);
             })
             .catch((error) => this.error.emit(error));

lib/content-services/src/lib/directives/node-counter.directive.spec.ts

@@ -22,7 +22,6 @@ import { By } from '@angular/platform-browser';
 import { NoopTranslateModule } from '@alfresco/adf-core';
 
 @Component({
-    standalone: true,
     imports: [NodeCounterDirective],
     template: `<div [adf-node-counter]="count"></div>`
 })

lib/content-services/src/lib/directives/node-counter.directive.ts

@@ -44,7 +44,6 @@ export class NodeCounterDirective implements OnInit, OnChanges {
 }
 
 @Component({
-    standalone: true,
     imports: [TranslateModule],
     selector: 'adf-node-counter',
     template: ` <div>{{ 'NODE_COUNTER.SELECTED_COUNT' | translate : { count: counter } }}</div> `

lib/content-services/src/lib/directives/node-delete.directive.spec.ts

@@ -24,7 +24,6 @@ import { EMPTY, of } from 'rxjs';
 import { CheckAllowableOperationDirective } from './check-allowable-operation.directive';
 
 @Component({
-    standalone: true,
     imports: [NodeDeleteDirective],
     template: `<div id="delete-component" [adf-delete]="selection" (delete)="onDelete()"></div>`
 })
@@ -38,7 +37,6 @@ class TestComponent {
 }
 
 @Component({
-    standalone: true,
     imports: [NodeDeleteDirective, CheckAllowableOperationDirective],
     template: `<div id="delete-component" [adf-check-allowable-operation]="'delete'" [adf-delete]="selection" (delete)="onDelete($event)"></div>`
 })
@@ -52,7 +50,6 @@ class TestWithPermissionsComponent {
 }
 
 @Component({
-    standalone: true,
     imports: [NodeDeleteDirective],
     template: ` delete permanent
         <div id="delete-permanent" [adf-delete]="selection" [permanent]="permanent" (delete)="onDelete($event)"></div>`

lib/content-services/src/lib/directives/node-download.directive.spec.ts

@@ -26,7 +26,6 @@ import { AlfrescoApiService } from '../services/alfresco-api.service';
 import { AlfrescoApiServiceMock } from '../mock/alfresco-api.service.mock';
 
 @Component({
-    standalone: true,
     imports: [NodeDownloadDirective],
     template: '<div [adfNodeDownload]="selection" [version]="version"></div>'
 })

lib/content-services/src/lib/directives/node-favorite.directive.spec.ts

@@ -18,25 +18,28 @@
 import { SimpleChange } from '@angular/core';
 import { fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { NodeFavoriteDirective } from './node-favorite.directive';
-import { AppConfigService, AppConfigServiceMock } from '@alfresco/adf-core';
+import { AppConfigService, AppConfigServiceMock, NotificationService } from '@alfresco/adf-core';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { AlfrescoApiService } from '../services';
 import { AlfrescoApiServiceMock } from '../mock';
+import { ContentTestingModule } from '../testing/content.testing.module';
 
 describe('NodeFavoriteDirective', () => {
     let directive: NodeFavoriteDirective;
     let alfrescoApiService: AlfrescoApiService;
+    let notificationService: NotificationService;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [HttpClientTestingModule],
+            imports: [HttpClientTestingModule, ContentTestingModule],
             providers: [
                 { provide: AlfrescoApiService, useClass: AlfrescoApiServiceMock },
                 { provide: AppConfigService, useClass: AppConfigServiceMock }
             ]
         });
         alfrescoApiService = TestBed.inject(AlfrescoApiService);
-        directive = new NodeFavoriteDirective(alfrescoApiService);
+        notificationService = TestBed.inject(NotificationService);
+        directive = new NodeFavoriteDirective(alfrescoApiService, notificationService);
     });
 
     describe('selection input change event', () => {
@@ -174,7 +177,8 @@ describe('NodeFavoriteDirective', () => {
             expect(addFavoriteSpy).not.toHaveBeenCalled();
         }));
 
-        it('should call addFavorite() if none is a favorite', () => {
+        it('should call addFavorite() and display snackbar message if none is a favorite', (done) => {
+            spyOn(notificationService, 'showInfo');
             addFavoriteSpy.and.returnValue(Promise.resolve());
 
             directive.favorites = [
@@ -182,12 +186,16 @@ describe('NodeFavoriteDirective', () => {
                 { entry: { id: '2', name: 'name2', isFavorite: false } }
             ];
 
+            directive.toggle.subscribe(() => {
+                expect(addFavoriteSpy.calls.argsFor(0)[1].length).toBe(2);
+                expect(notificationService.showInfo).toHaveBeenCalledWith('NODE_FAVORITE_DIRECTIVE.MESSAGES.NODES_ADDED', null, { number: 2 });
+                done();
+            });
             directive.toggleFavorite();
-
-            expect(addFavoriteSpy.calls.argsFor(0)[1].length).toBe(2);
         });
 
-        it('should call addFavorite() on node that is not a favorite in selection', () => {
+        it('should call addFavorite() and display snackbar message on node that is not a favorite in selection', (done) => {
+            spyOn(notificationService, 'showInfo');
             addFavoriteSpy.and.returnValue(Promise.resolve());
 
             directive.favorites = [
@@ -195,96 +203,111 @@ describe('NodeFavoriteDirective', () => {
                 { entry: { id: '2', name: 'name2', isFile: true, isFolder: false, isFavorite: true } }
             ];
 
+            directive.toggle.subscribe(() => {
+                const callArgs = addFavoriteSpy.calls.argsFor(0)[1];
+                const callParameter = callArgs[0];
+
+                expect(callArgs.length).toBe(1);
+                expect(callParameter.target.file.guid).toBe('1');
+                expect(notificationService.showInfo).toHaveBeenCalledWith('NODE_FAVORITE_DIRECTIVE.MESSAGES.NODE_ADDED', null, { name: 'name1' });
+                done();
+            });
             directive.toggleFavorite();
-
-            const callArgs = addFavoriteSpy.calls.argsFor(0)[1];
-            const callParameter = callArgs[0];
-
-            expect(callArgs.length).toBe(1);
-            expect(callParameter.target.file.guid).toBe('1');
         });
 
-        it('should call removeFavoriteSite() if all are favorites', () => {
+        it('should call removeFavoriteSite() and display snackbar message if all are favorites', (done) => {
+            spyOn(notificationService, 'showInfo');
             removeFavoriteSpy.and.returnValue(Promise.resolve());
 
             directive.favorites = [{ entry: { id: '1', name: 'name1', isFavorite: true } }, { entry: { id: '2', name: 'name2', isFavorite: true } }];
 
+            directive.toggle.subscribe(() => {
+                expect(removeFavoriteSpy.calls.count()).toBe(2);
+                expect(notificationService.showInfo).toHaveBeenCalledWith('NODE_FAVORITE_DIRECTIVE.MESSAGES.NODES_REMOVED', null, { number: 2 });
+                done();
+            });
             directive.toggleFavorite();
-
-            expect(removeFavoriteSpy.calls.count()).toBe(2);
         });
 
-        it('should emit event when removeFavoriteSite() is done', fakeAsync(() => {
+        it('should emit event and display snackbar message when removeFavoriteSite() is done', (done) => {
+            spyOn(notificationService, 'showInfo');
             removeFavoriteSpy.and.returnValue(Promise.resolve());
-            spyOn(directive.toggle, 'emit');
+            spyOn(directive.toggle, 'emit').and.callThrough();
 
             directive.favorites = [{ entry: { id: '1', name: 'name1', isFavorite: true } }];
 
+            directive.toggle.subscribe(() => {
+                expect(directive.toggle.emit).toHaveBeenCalled();
+                expect(notificationService.showInfo).toHaveBeenCalledWith('NODE_FAVORITE_DIRECTIVE.MESSAGES.NODE_REMOVED', null, { name: 'name1' });
+                done();
+            });
             directive.toggleFavorite();
-            tick();
+        });
 
-            expect(directive.toggle.emit).toHaveBeenCalled();
-        }));
-
-        it('should emit event when addFavorite() is done', fakeAsync(() => {
+        it('should emit event when addFavorite() is done', (done) => {
             addFavoriteSpy.and.returnValue(Promise.resolve());
-            spyOn(directive.toggle, 'emit');
+            spyOn(directive.toggle, 'emit').and.callThrough();
 
             directive.favorites = [{ entry: { id: '1', name: 'name1', isFavorite: false } }];
 
+            directive.toggle.subscribe(() => {
+                expect(directive.toggle.emit).toHaveBeenCalled();
+                done();
+            });
             directive.toggleFavorite();
-            tick();
+        });
 
-            expect(directive.toggle.emit).toHaveBeenCalled();
-        }));
-
-        it('should emit error event when removeFavoriteSite() fails', fakeAsync(() => {
+        it('should emit error event when removeFavoriteSite() fails', (done) => {
             const error = new Error('error');
             removeFavoriteSpy.and.returnValue(Promise.reject(error));
-            spyOn(directive.error, 'emit');
+            spyOn(directive.error, 'emit').and.callThrough();
 
             directive.favorites = [{ entry: { id: '1', name: 'name1', isFavorite: true } }];
 
+            directive.error.subscribe(() => {
+                expect(directive.error.emit).toHaveBeenCalledWith(error);
+                done();
+            });
             directive.toggleFavorite();
-            tick();
+        });
 
-            expect(directive.error.emit).toHaveBeenCalledWith(error);
-        }));
-
-        it('should emit error event when addFavorite() fails', fakeAsync(() => {
+        it('should emit error event when addFavorite() fails', (done) => {
             const error = new Error('error');
             addFavoriteSpy.and.returnValue(Promise.reject(error));
-            spyOn(directive.error, 'emit');
+            spyOn(directive.error, 'emit').and.callThrough();
 
             directive.favorites = [{ entry: { id: '1', name: 'name1', isFavorite: false } }];
 
+            directive.error.subscribe(() => {
+                expect(directive.error.emit).toHaveBeenCalledWith(error);
+                done();
+            });
             directive.toggleFavorite();
-            tick();
+        });
 
-            expect(directive.error.emit).toHaveBeenCalledWith(error);
-        }));
-
-        it('should set isFavorites items to false', fakeAsync(() => {
+        it('should set isFavorites items to false', (done) => {
             removeFavoriteSpy.and.returnValue(Promise.resolve());
 
             directive.favorites = [{ entry: { id: '1', name: 'name1', isFavorite: true } }];
 
+            directive.toggle.subscribe(() => {
+                expect(directive.hasFavorites()).toBe(false);
+                done();
+            });
             directive.toggleFavorite();
-            tick();
+        });
 
-            expect(directive.hasFavorites()).toBe(false);
-        }));
-
-        it('should set isFavorites items to true', fakeAsync(() => {
+        it('should set isFavorites items to true', (done) => {
             addFavoriteSpy.and.returnValue(Promise.resolve());
 
             directive.favorites = [{ entry: { id: '1', name: 'name1', isFavorite: false } }];
 
+            directive.toggle.subscribe(() => {
+                expect(directive.hasFavorites()).toBe(true);
+                done();
+            });
             directive.toggleFavorite();
-            tick();
-
-            expect(directive.hasFavorites()).toBe(true);
-        }));
+        });
     });
 
     describe('getFavorite()', () => {

lib/content-services/src/lib/directives/node-favorite.directive.ts

@@ -22,6 +22,7 @@ import { FavoriteBodyCreate, NodeEntry, SharedLinkEntry, Node, SharedLink, Favor
 import { Observable, from, forkJoin, of } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
 import { AlfrescoApiService } from '../services/alfresco-api.service';
+import { NotificationService } from '@alfresco/adf-core';
 
 @Directive({
     standalone: true,
@@ -52,7 +53,7 @@ export class NodeFavoriteDirective implements OnChanges {
         this.toggleFavorite();
     }
 
-    constructor(private alfrescoApiService: AlfrescoApiService) {}
+    constructor(private readonly alfrescoApiService: AlfrescoApiService, private readonly notificationService: NotificationService) {}
 
     ngOnChanges(changes: SimpleChanges) {
         if (!changes.selection.currentValue.length) {
@@ -79,26 +80,38 @@ export class NodeFavoriteDirective implements OnChanges {
                 return from(this.favoritesApi.deleteFavorite('-me-', id));
             });
 
-            forkJoin(batch).subscribe(
-                () => {
+            forkJoin(batch).subscribe({
+                next: () => {
                     this.favorites.forEach((selected) => (selected.entry.isFavorite = false));
+                    if (this.favorites.length > 1) {
+                        this.notificationService.showInfo('NODE_FAVORITE_DIRECTIVE.MESSAGES.NODES_REMOVED', null, { number: this.favorites.length });
+                    } else {
+                        this.notificationService.showInfo('NODE_FAVORITE_DIRECTIVE.MESSAGES.NODE_REMOVED', null, {
+                            name: this.favorites[0].entry.name
+                        });
+                    }
                     this.toggle.emit();
                 },
-                (error) => this.error.emit(error)
-            );
+                error: (error) => this.error.emit(error)
+            });
         }
 
         if (!every) {
             const notFavorite = this.favorites.filter((node) => !node.entry.isFavorite);
             const body = notFavorite.map((node) => this.createFavoriteBody(node));
 
-            from(this.favoritesApi.createFavorite('-me-', body as any)).subscribe(
-                () => {
+            from(this.favoritesApi.createFavorite('-me-', body as any)).subscribe({
+                next: () => {
                     notFavorite.forEach((selected) => (selected.entry.isFavorite = true));
+                    if (notFavorite.length > 1) {
+                        this.notificationService.showInfo('NODE_FAVORITE_DIRECTIVE.MESSAGES.NODES_ADDED', null, { number: notFavorite.length });
+                    } else {
+                        this.notificationService.showInfo('NODE_FAVORITE_DIRECTIVE.MESSAGES.NODE_ADDED', null, { name: notFavorite[0].entry.name });
+                    }
                     this.toggle.emit();
                 },
-                (error) => this.error.emit(error)
-            );
+                error: (error) => this.error.emit(error)
+            });
         }
     }
 

lib/content-services/src/lib/directives/node-lock.directive.spec.ts

@@ -30,7 +30,8 @@ const fakeNode = {
 } as Node;
 
 @Component({
-    template: '<div [adf-node-lock]="node"></div>'
+    template: '<div [adf-node-lock]="node"></div>',
+    standalone: false
 })
 class TestComponent {
     node = null;

lib/content-services/src/lib/directives/node-restore.directive.spec.ts

@@ -23,7 +23,6 @@ import { NoopTranslateModule, TranslationService } from '@alfresco/adf-core';
 import { TrashcanApi } from '@alfresco/js-api';
 
 @Component({
-    standalone: true,
     imports: [NodeRestoreDirective],
     template: ` <div [adf-restore]="selection" (restore)="doneSpy()"></div>`
 })

lib/content-services/src/lib/document-list/components/document-list.component.scss

@@ -1,4 +1,4 @@
-@import 'styles/flex';
+@use '../../flex' as flex;
 
 .adf-document-list {
     min-height: 0;
@@ -143,7 +143,7 @@
         word-break: break-all;
         white-space: pre-line;
 
-        @include layout-bp(lt-sm) {
+        @include flex.layout-bp(lt-sm) {
             font-size: 48px;
         }
     }
@@ -165,12 +165,12 @@
         object-fit: contain;
         margin-top: 17px;
 
-        @include layout-bp(lt-sm) {
+        @include flex.layout-bp(lt-sm) {
             width: 250px;
         }
     }
 
-    @include layout-bp(lt-md) {
+    @include flex.layout-bp(lt-md) {
         &-drag-drop,
         &-any-files-here-to-add {
             display: none;

lib/content-services/src/lib/document-list/components/document-list.component.ts

@@ -92,7 +92,6 @@ const BYTES_TO_MB_CONVERSION_VALUE = 1048576;
 
 @Component({
     selector: 'adf-document-list',
-    standalone: true,
     imports: [
         CommonModule,
         DataTableComponent,

lib/content-services/src/lib/document-list/components/file-auto-download/file-auto-download.component.ts

@@ -25,7 +25,6 @@ import { NodeDownloadDirective } from '../../../directives/node-download.directi
 
 @Component({
     selector: 'adf-file-auto-download',
-    standalone: true,
     imports: [CommonModule, MatDialogModule, TranslateModule, MatButtonModule, NodeDownloadDirective],
     templateUrl: './file-auto-download.component.html'
 })

lib/content-services/src/lib/document-list/components/filter-header/filter-header.component.ts

@@ -26,7 +26,6 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
     selector: 'adf-filter-header',
-    standalone: true,
     imports: [CommonModule, HeaderFilterTemplateDirective, SearchFilterContainerComponent],
     templateUrl: './filter-header.component.html'
 })

lib/content-services/src/lib/document-list/components/library-name-column/library-name-column.component.ts

@@ -27,7 +27,6 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
     selector: 'adf-library-name-column',
-    standalone: true,
     imports: [CommonModule, TranslateModule],
     template: `
         <span

lib/content-services/src/lib/document-list/components/library-role-column/library-role-column.component.ts

@@ -26,7 +26,6 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
     selector: 'adf-library-role-column',
-    standalone: true,
     imports: [CommonModule, TranslateModule],
     template: `
         <span class="adf-datatable-cell-value" title="{{ displayText$ | async | translate }}">