[ACS-10321] Contentn node selector - icon is not focusable

* [MNT-25501]: removes start param from the processes request

* [MNT-25501]: minor fixes

.eslintignore

@@ -9,4 +9,6 @@ scripts
 /angular.json
 docs/**/*.md
 lib/js-api/docs/**/*.md
+.storybook
 webpack.config.js
+lib/core/src/lib/icon

.eslintrc.js

@@ -207,5 +207,7 @@ module.exports = {
                 'comma-dangle': ['error', 'never']
             }
         }
-    ]
+    ],
+
+    extends: ['plugin:storybook/recommended']
 };

.github/actions/download-node-modules-and-artifacts/action.yml

@@ -4,7 +4,7 @@ runs:
   using: "composite"
   steps:
     - name: Restore dist from cache
-      uses: actions/cache/restore@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
+      uses: actions/cache/restore@cdf6c1fa76f9f475f3d7449005a359c84ca0f306 # v5.0.3
       with:
         path: dist
         key: dist-${{ github.run_id }}-${{ github.run_attempt }}
@@ -13,7 +13,7 @@ runs:
         fail-on-cache-miss: true
 
     - name: Restore nxcache from cache
-      uses: actions/cache/restore@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
+      uses: actions/cache/restore@cdf6c1fa76f9f475f3d7449005a359c84ca0f306 # v5.0.3
       with:
         path: nxcache
         key: nxcache-${{ github.run_id }}-${{ github.run_attempt }}
@@ -22,7 +22,7 @@ runs:
         fail-on-cache-miss: true
 
     - name: Restore node_modules from cache
-      uses: actions/cache/restore@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
+      uses: actions/cache/restore@cdf6c1fa76f9f475f3d7449005a359c84ca0f306 # v5.0.3
       with:
         path: node_modules
         key: node-modules-${{ github.run_id }}-${{ github.run_attempt }}

.github/actions/setup/action.yml

@@ -19,18 +19,18 @@ runs:
   using: "composite"
   steps:
       - name: install NPM
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.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@7eb56e49e47d11547d61c3c68826022db830fc15 # v10.1.0
+        uses: Alfresco/alfresco-build-tools/.github/actions/git-latest-tag@3768f40c71f5f9b0c4e6a507c8f87ed40d9b60c9 # v12.9.0
 # CACHE
       - name: Node Modules cache
         id: node-modules-cache
         if: ${{ inputs.enable-node-modules-cache == 'true' }}
-        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
+        uses: actions/cache@cdf6c1fa76f9f475f3d7449005a359c84ca0f306 # v5.0.3
         env:
           cache-name: node-modules-cache
         with:

.github/actions/upload-node-modules-and-artifacts/action.yml

@@ -5,19 +5,19 @@ runs:
   using: "composite"
   steps:
     - name: Save dist to cache
-      uses: actions/cache/save@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
+      uses: actions/cache/save@cdf6c1fa76f9f475f3d7449005a359c84ca0f306 # v5.0.3
       with:
         path: dist
         key: dist-${{ github.run_id }}-${{ github.run_attempt }}
 
     - name: Save nxcache to cache
-      uses: actions/cache/save@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
+      uses: actions/cache/save@cdf6c1fa76f9f475f3d7449005a359c84ca0f306 # v5.0.3
       with:
         path: nxcache
         key: nxcache-${{ github.run_id }}-${{ github.run_attempt }}
 
     - name: Save node_modules to cache
-      uses: actions/cache/save@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
+      uses: actions/cache/save@cdf6c1fa76f9f475f3d7449005a359c84ca0f306 # v5.0.3
       with:
         path: node_modules
         key: node-modules-${{ github.run_id }}-${{ github.run_attempt }}

.github/workflows/codeql-analysis.yml

@@ -22,7 +22,7 @@ jobs:
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+      uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       with:
         # We must fetch at least the immediate parents so that if this is
         # a pull request then we can checkout the head.
@@ -30,7 +30,7 @@ jobs:
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@fdbfb4d2750291e159f0156def62b853c2798ca2 # v3.29.5
+      uses: github/codeql-action/init@b20883b0cd1f46c72ae0ba6d1090936928f9fa30 # v3.29.5
       # 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@fdbfb4d2750291e159f0156def62b853c2798ca2 # v3.29.5
+      uses: github/codeql-action/autobuild@b20883b0cd1f46c72ae0ba6d1090936928f9fa30 # v3.29.5
 
     # ℹ️ 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@fdbfb4d2750291e159f0156def62b853c2798ca2 # v3.29.5
+      uses: github/codeql-action/analyze@b20883b0cd1f46c72ae0ba6d1090936928f9fa30 # v3.29.5

.github/workflows/git-tag.yml

@@ -41,13 +41,13 @@ jobs:
       GITHUB_TOKEN: $BOT_GITHUB_TOKEN
     steps:
       - name: Checkout repository
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - id: set-dryrun
         uses: ./.github/actions/enable-dryrun
         with:
           dry-run-flag: ${{ inputs.dry-run-flag }}
       - name: install NPM
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: '.nvmrc'
       - name: "Release tag"

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

@@ -3,15 +3,25 @@ on:
   schedule:
     - cron: "0 7-17 * * 1-5"
   workflow_dispatch:
+  workflow_call:
+    secrets:
+      BOT_GITHUB_TOKEN:
+        required: true
+      CROWDIN_TRANSLATIONS_TOKEN:
+        required: true
 jobs:
   pull-from-crowdin:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
-      - name: Pull translations from Crowdin
-        uses: crowdin/github-action@08713f00a50548bfe39b37e8f44afb53e7a802d4 # v2.12.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
+          ref: develop
+          token: ${{ secrets.BOT_GITHUB_TOKEN }}
+      - name: Pull translations from Crowdin
+        uses: crowdin/github-action@b4b468cffefb50bdd99dd83e5d2eaeb63c880380 # v2.14.0
+        with:
+          skip_ref_checkout: true
           upload_sources: false
           download_translations: true
           create_pull_request: true

.github/workflows/pull-request.yml

@@ -4,17 +4,17 @@ on:
   workflow_call:
     inputs:
       dry-run-flag:
-        description: 'enable dry-run on artifact push'
+        description: "enable dry-run on artifact push"
         required: false
         type: boolean
         default: true
       devel:
-        description: 'devel'
+        description: "devel"
         required: false
         type: boolean
         default: false
       cron-run:
-        description: 'disables jobs which should not run when cron runs e2es'
+        description: "disables jobs which should not run when cron runs e2es"
         required: false
         type: boolean
         default: false
@@ -43,10 +43,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
       - name: Ensure SHA pinned actions
-        uses: hyland/github-actions-ensure-sha-pinned-actions@22ca7a8cf33e873ba1d6fbcd2b71fa0ec5006b17 # v1.1.0
+        uses: hyland/github-actions-ensure-sha-pinned-actions@1afac08cba4e5ea12263a46f49683570690ae3af # v1.2.0
 
       - name: Check package-lock.json version
         run: |
@@ -61,15 +61,17 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           fetch-depth: 0
 
       - name: Get branch name
-        uses: Alfresco/alfresco-build-tools/.github/actions/get-branch-name@7eb56e49e47d11547d61c3c68826022db830fc15 # v10.1.0
+        uses: Alfresco/alfresco-build-tools/.github/actions/get-branch-name@3768f40c71f5f9b0c4e6a507c8f87ed40d9b60c9 # v12.9.0
 
       - name: Save commit message
-        uses: Alfresco/alfresco-build-tools/.github/actions/get-commit-message@7eb56e49e47d11547d61c3c68826022db830fc15 # v10.1.0
+        uses: Alfresco/alfresco-build-tools/.github/actions/get-commit-message@3768f40c71f5f9b0c4e6a507c8f87ed40d9b60c9 # v12.9.0
+        with:
+          header-only: true
 
       - name: ci:force flag parser
         shell: bash
@@ -151,7 +153,7 @@ jobs:
     needs: [check-if-pr-is-approved, pre-checks]
     steps:
       - name: Checkout repository
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           fetch-depth: 0 # Fetch all history for all tags and branches
       - uses: ./.github/actions/setup
@@ -186,7 +188,7 @@ jobs:
             exclude: "insights,core,extensions,content-services,process-services$,eslint-plugin-eslint-angular,js-api"
     steps:
       - name: Checkout repository
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           fetch-depth: 0 # Fetch all history for all tags and branches
       - uses: ./.github/actions/setup
@@ -205,7 +207,7 @@ jobs:
     needs: [setup]
     steps:
       - name: Checkout repository
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           fetch-depth: 0 # Fetch all history for all tags and branches
       - uses: ./.github/actions/setup
@@ -220,7 +222,7 @@ jobs:
     needs: [setup]
     steps:
       - name: Checkout repository
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           fetch-depth: 0 # Fetch all history for all tags and branches
       - uses: ./.github/actions/setup
@@ -228,13 +230,28 @@ jobs:
       - run: NX_REJECT_UNKNOWN_LOCAL_CACHE=0 npm run build:affected -- $NX_CALCULATION_FLAGS --prod
       - uses: ./.github/actions/upload-node-modules-and-artifacts
 
+  build-storybook:
+    timeout-minutes: 30
+    name: "Build storybook"
+    runs-on: ubuntu-latest
+    needs: [setup]
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          fetch-depth: 0 # Fetch all history for all tags and branches
+      - uses: ./.github/actions/setup
+      - uses: ./.github/actions/download-node-modules-and-artifacts
+      - run: npm run build-storybook
+      - uses: ./.github/actions/upload-node-modules-and-artifacts
+
   PR-forbidden-labels:
     if: ${{ inputs.cron-run == '' || inputs.cron-run == 'false' }}
     runs-on: ubuntu-latest
     steps:
       - id: checkoutRepo
         name: Checkout repository
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           fetch-depth: 1
       - name: PR contains forbidden labels
@@ -262,7 +279,16 @@ jobs:
     if: ${{ always() }}
     runs-on: ubuntu-latest
     name: Final Results
-    needs: [check-if-pr-is-approved, pre-checks, setup, unit-tests, lint, build-libs]
+    needs:
+      [
+        check-if-pr-is-approved,
+        pre-checks,
+        setup,
+        unit-tests,
+        lint,
+        build-libs,
+        build-storybook,
+      ]
     steps:
       - name: Check job execution status
         if: >-

.github/workflows/rebase.yml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - name: Checkout the latest code
-      uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+      uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       with:
         fetch-depth: 0
     - name: Automatic Rebase

.github/workflows/release.yml

@@ -47,7 +47,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           fetch-depth: 0
       - uses: ./.github/actions/setup
@@ -73,7 +73,7 @@ jobs:
       packages: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           fetch-depth: 0
       - id: setup
@@ -100,7 +100,7 @@ jobs:
         run: |
           npm run build:libs
           npm run build:schematics
-      - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+      - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         name: release libraries GH registry
         with:
           node-version-file: '.nvmrc'
@@ -109,7 +109,7 @@ jobs:
       - run: npm run publish -- --tag=${{ steps.setup.outputs.npm-tag }}
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+      - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         name: release libraries Npm registry
         with:
           node-version-file: '.nvmrc'
@@ -126,7 +126,7 @@ jobs:
       contents: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           fetch-depth: 1
       - uses: './.github/actions/create-git-tag'
@@ -139,7 +139,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - name: HxP upstream invoke
         uses: the-actions-org/workflow-dispatch@3133c5d135c7dbe4be4f9793872b6ef331b53bc7 # v4.0.0
         with:
@@ -160,7 +160,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - uses: ./.github/actions/npm-check-bundle
 
   push-translation-keys-to-crowdin:
@@ -174,16 +174,24 @@ jobs:
       actions: read
     steps:
       - name: Checkout
-        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
       - name: Push Source Files to Crowdin
-        uses: crowdin/github-action@08713f00a50548bfe39b37e8f44afb53e7a802d4 # v2.12.0
+        uses: crowdin/github-action@b4b468cffefb50bdd99dd83e5d2eaeb63c880380 # v2.14.0
         with:
           upload_sources: true
           upload_sources_args: --delete-obsolete
         env:
           CROWDIN_TOKEN: ${{ secrets.CROWDIN_TRANSLATIONS_TOKEN }}
 
+  pull-translation-keys-from-crowdin:
+    needs: push-translation-keys-to-crowdin
+    name: Run Crowdin pull pipeline for up-to-date sync
+    uses: ./.github/workflows/pull-from-crowdin.yml
+    secrets:
+      BOT_GITHUB_TOKEN: ${{ secrets.BOT_GITHUB_TOKEN }}
+      CROWDIN_TRANSLATIONS_TOKEN: ${{ secrets.CROWDIN_TRANSLATIONS_TOKEN }}
+
   finalize:
     if: always()
     runs-on: ubuntu-latest

.gitignore

@@ -22,3 +22,5 @@ desktop.ini
 .nx
 nxcache
 .husky
+.cursor/rules/nx-rules.mdc
+.github/instructions/nx.instructions.md

.storybook/main.ts

@@ -0,0 +1,21 @@
+import { fileURLToPath } from 'node:url';
+import { dirname } from 'node:path';
+import type { StorybookConfig } from '@storybook/angular';
+
+const config: StorybookConfig = {
+    framework: {
+        name: getAbsolutePath('@storybook/angular'),
+        options: {}
+    },
+    staticDirs: [],
+    stories: ['lib/**/*.stories.ts'],
+    features: {
+        backgrounds: false
+    }
+};
+
+export default config;
+
+function getAbsolutePath(value: string): any {
+    return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
+}

.storybook/preview.ts

@@ -0,0 +1,11 @@
+import type { Preview } from '@storybook/angular';
+
+const preview: Preview = {
+    parameters: {
+        docs: { inlineStories: true },
+        controls: { expanded: true }
+    },
+    tags: ['autodocs']
+};
+
+export default preview;

.storybook/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../tsconfig.json",
+  "exclude": [
+    "../**/*.spec.js",
+    "../**/*.spec.ts",
+    "../**/*.spec.tsx",
+    "../**/*.spec.jsx"
+  ],
+  "include": ["../**/*"]
+}

README.md

@@ -35,6 +35,7 @@ ADF Libraries list:
 - [Insights](https://github.com/Alfresco/alfresco-ng2-components/tree/develop/lib/insights)
 - [Process Service Cloud](https://github.com/Alfresco/alfresco-ng2-components/tree/develop/lib/process-services-cloud)
 - [Process service](https://github.com/Alfresco/alfresco-ng2-components/tree/develop/lib/process-services)
+- [Stories](https://github.com/Alfresco/alfresco-ng2-components/tree/develop/lib/stories)
 
 ## Browser Support
 

cspell.json

@@ -14,9 +14,11 @@
     "backend",
     "baseitem",
     "BASESHAREURL",
+    "berseria",
     "booleanvisibility",
     "booleanvisibilityprocess",
     "boolitem",
+    "BPMECM",
     "BPMHOST",
     "cardview",
     "checkboxes",
@@ -47,6 +49,7 @@
     "dryrun",
     "ECMBPM",
     "ECMHOST",
+    "edjs",
     "Examinate",
     "exif",
     "filedata",
@@ -120,6 +123,7 @@
     "Theming",
     "transcluded",
     "transclusion",
+    "triggerable",
     "truthy",
     "typeahead",
     "typeahed",
@@ -133,6 +137,7 @@
     "uploader",
     "uploadfileform",
     "userinfo",
+    "validatable",
     "validators",
     "waypoint",
     "waypoints",
@@ -140,11 +145,7 @@
     "Whitespaces",
     "xdescribe",
     "xsrf",
-    "BPMECM",
-    "berseria",
-    "zestiria",
-    "validatable",
-    "edjs"
+    "zestiria"
   ],
   "dictionaries": [
     "html",

docs/README.md

@@ -83,8 +83,6 @@ A collection of Angular components for generic use.
 | Name                                              | Description                                     |
 |---------------------------------------------------|-------------------------------------------------|
 | [Avatar](core/components/avatar.component.md)     | Displays user avatars.                          |
-| [Button](core/components/button.component.md)     | A standard button component.                    |
-| [Progress](core/components/progress.component.md) | A progress bar component.                       |
 | [Header](core/components/adf-header.component.md) | A simple reusable application header component. |
 
 ### Components
@@ -120,7 +118,6 @@ A collection of Angular components for generic use.
 | [Sidebar action menu component](core/components/sidebar-action-menu.component.md) | Displays a sidebar-action menu information panel. | [Source](../lib/core/src/lib/layout/components/sidebar-action/sidebar-action-menu.component.ts) |
 | [Sidenav Layout component](core/components/sidenav-layout.component.md) | Displays the standard three-region ADF application layout. | [Source](../lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.ts) |
 | [Snackbar Content Component](core/components/snackbar-content.component.md) | Custom content for Snackbar which allows use icon as action. | [Source](../lib/core/src/lib/snackbar-content/snackbar-content.component.ts) |
-| [Sorting Picker Component](core/components/sorting-picker.component.md) | Selects from a set of predefined sorting definitions and directions. | [Source](../lib/core/src/lib/sorting-picker/sorting-picker.component.ts) |
 | [Start Form component](core/components/start-form.component.md) | Displays the Start Form for a process. | [Source](../lib/process-services/src/lib/form/start-form/start-form.component.ts) |
 | [Text Mask directive](core/components/text-mask.component.md) | Implements text field input masks. | [Source](../lib/core/src/lib/form/components/widgets/text/text-mask.component.ts) |
 | [Toolbar Divider Component](core/components/toolbar-divider.component.md) | Divides groups of elements in a Toolbar with a visual separator. | [Source](../lib/core/src/lib/toolbar/toolbar-divider.component.ts) |
@@ -140,7 +137,7 @@ A collection of Angular components for generic use.
 | [Logout directive](core/directives/logout.directive.md) | Logs the user out when the decorated element is clicked. | [Source](../lib/core/src/lib/directives/logout.directive.ts) |
 | [Node Download directive](core/directives/node-download.directive.md) | Allows folders and/or files to be downloaded, with multiple nodes packed as a '.ZIP' archive. | [Source](../lib/content-services/src/lib/directives/node-download.directive.ts) |
 | [Upload Directive](core/directives/upload.directive.md) | Uploads content in response to file drag and drop. | [Source](../lib/core/src/lib/directives/upload.directive.ts) |
-
+| [CardViewPropertyValidator Directive](core/directives/card-view-property-validator.directive.md) | Checks validators defined on property.| [Source](../lib/core/src/lib/card-view/directives/card-view-property-validator.directive.ts) |
 ### Dialogs
 
 | Name | Description | Source link |
@@ -179,8 +176,6 @@ A collection of Angular components for generic use.
 | [Format Space pipe](core/pipes/format-space.pipe.md) | Replaces all the white space in a string with a supplied character.                                                                                                                                                           | [Source](../lib/core/src/lib/pipes/format-space.pipe.ts) |
 | [Full name pipe](core/pipes/full-name.pipe.md) | Joins the first and last name properties from a `UserLike` object into a single string.                                                                                                                                       | [Source](../lib/core/src/lib/pipes/full-name.pipe.ts) |
 | [Localized Date pipe](core/pipes/localized-date.pipe.md) | Converts a date to a given format and locale.                                                                                                                                                                                 | [Source](../lib/core/src/lib/pipes/localized-date.pipe.ts) |
-| [Multi Value Pipe](core/pipes/multi-value.pipe.md) | Takes an array of strings and turns it into one string where items are separated by a separator. The default separator applied to the list is the comma ,  however, you can set your own separator in the params of the pipe. | [Source](../lib/core/src/lib/pipes/multi-value.pipe.ts) |
-| [Node Name Tooltip pipe](core/pipes/node-name-tooltip.pipe.md) | Formats the tooltip for a Node.                                                                                                                                                                                               | [Source](../lib/content-services/src/lib/pipes/node-name-tooltip.pipe.ts) |
 | [Text Highlight pipe](core/pipes/text-highlight.pipe.md) | Adds highlighting to words or sections of text that match a search string.                                                                                                                                                    | [Source](../lib/core/src/lib/pipes/text-highlight.pipe.ts) |
 | [Time Ago pipe](core/pipes/time-ago.pipe.md) | Converts a recent past date into a number of days ago.                                                                                                                                                                        | [Source](../lib/core/src/lib/pipes/time-ago.pipe.ts) |
 | [User Initial pipe](core/pipes/user-initial.pipe.md) | Takes the name fields of a `UserLike` object and extracts and formats the initials.                                                                                                                                            | [Source](../lib/core/src/lib/pipes/user-initial.pipe.ts) |
@@ -297,7 +292,6 @@ for more information about installing and using the source code.
 | [Search number range component](content-services/components/search-number-range.component.md)                                                                         | Implements a number range widget for the Search Filter component. | [Source](../lib/content-services/src/lib/search/components/search-number-range/search-number-range.component.ts) |
 | [Search radio component](content-services/components/search-radio.component.md)                                                                                       | Implements a radio button list widget for the Search Filter component. | [Source](../lib/content-services/src/lib/search/components/search-radio/search-radio.component.ts) |
 | [Search slider component](content-services/components/search-slider.component.md)                                                                                     | Implements a numeric slider widget for the Search Filter component. | [Source](../lib/content-services/src/lib/search/components/search-slider/search-slider.component.ts) |
-| [Search Sorting Picker Component](content-services/components/search-sorting-picker.component.md)                                                                     | Provides an ability to select one of the predefined sorting definitions for search results: | [Source](../lib/content-services/src/lib/search/components/search-sorting-picker/search-sorting-picker.component.ts) |
 | [Search text component](content-services/components/search-text.component.md)                                                                                         | Implements a text input widget for the Search Filter component. | [Source](../lib/content-services/src/lib/search/components/search-text/search-text.component.ts) |
 | [Search component](content-services/components/search.component.md)                                                                                                   | Searches items for supplied search terms. | [Source](../lib/content-services/src/lib/search/components/search.component.ts) |
 | [Sites Dropdown component](content-services/components/sites-dropdown.component.md)                                                                                   | Displays a dropdown menu to show and interact with the sites of the current user. | [Source](../lib/content-services/src/lib/content-node-selector/site-dropdown/sites-dropdown.component.ts) |
@@ -321,7 +315,6 @@ for more information about installing and using the source code.
 | Name | Description | Source link |
 | ---- | ----------- | ----------- |
 | [Auto Focus directive](content-services/directives/auto-focus.directive.md) | Automatically focuses HTML element after content is initialized. | [Source](../lib/content-services/src/lib/directives/auto-focus.directive.ts) |
-| [Check Allowable Operation directive](content-services/directives/check-allowable-operation.directive.md) | Selectively disables an HTML element or Angular component. | [Source](../lib/content-services/src/lib/directives/check-allowable-operation.directive.ts) |
 | [Node Public File Share Directive](content-services/directives/content-node-share.directive.md) | Creates and manages public shared links for files. | [Source](../lib/content-services/src/lib/content-node-share/content-node-share.directive.ts) |
 | [File Draggable directive](content-services/directives/file-draggable.directive.md) | Provides drag-and-drop features for an element such as a div. | [Source](../lib/content-services/src/lib/upload/directives/file-draggable.directive.ts) |
 | [Inherit Permission directive](content-services/directives/inherited-button.directive.md) | Update the current node by adding/removing the inherited permissions. | [Source](../lib/content-services/src/lib/permission-manager/components/inherited-button.directive.ts) |
@@ -344,7 +337,6 @@ for more information about installing and using the source code.
 
 | Name | Description | Source link |
 | ---- | ----------- | ----------- |
-| [Base Card View Content Update interface](content-services/interfaces/base-card-view-content-update.interface.md) | Specifies required properties and methods for Card View Content Update service. Extends from BaseCardViewUpdate. | [Source](../lib/content-services/src/lib/interfaces/base-card-view-content-update.interface.ts) |  |
 | [Search widget interface](content-services/interfaces/search-widget.interface.md) | Specifies required properties for Search filter component widgets. | [Source](../lib/content-services/src/lib/search/models/search-widget.interface.ts) |
 | [Content Metadata Custom Panel interface](content-services/interfaces/content-metadata-custom-panel.interface.md) | Specifies required properties for metadata custom panel. | [Source](../lib/content-services/src/lib/content-metadata/interfaces/content-metadata-custom-panel.interface.ts) |
 
@@ -441,7 +433,6 @@ for more information about installing and using the source code.
 | Name | Description | Source link |
 | ---- | ----------- | ----------- |
 | [Claim Task Directive](process-services/directives/claim-task.directive.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Claims a task | [Source](../lib/process-services/src/lib/task-list/components/task-form/claim-task.directive.ts) |
-| [Process Audit Directive](process-services/directives/process-audit.directive.md) | Fetches the Process Audit information in PDF or JSON format. | [Source](../lib/process-services/src/lib/process-list/components/process-audit/process-audit.directive.ts) |
 | [Unclaim Task Directive](process-services/directives/unclaim-task.directive.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Unclaims a task | [Source](../lib/process-services/src/lib/task-list/components/task-form/unclaim-task.directive.ts) |
 
 ### Services

docs/content-services/components/alfresco-viewer.component.md

@@ -107,12 +107,14 @@ See the [Custom layout](#custom-layout) section for full details of all availabl
 
 ## Keyboard shortcuts
 
-| Name   | Description                           |
-|--------|---------------------------------------|
-| Esc    | Close the viewer (overlay mode only). |
-| Left   | Invoke 'Navigate before' action.      |
-| Right  | Invoke 'Navigate next' action.        |
-| Ctrl+F | Activate full-screen mode.            |
+| Name              | Description                                                   |
+|-------------------|---------------------------------------------------------------|
+| Esc               | Close the viewer (overlay mode only).                         |
+| Left              | Invoke 'Navigate before' action. Disabled in image edit mode. |
+| Right             | Invoke 'Navigate next' action. Disabled in image edit mode.   |
+| Shift + Arrow Key | Increase image crop area. Active only in image edit mode.     |
+| Alt + Arrow Key   | Decrease image crop area. Active only in image edit mode.     |
+| Ctrl+F            | Activate full-screen mode.                                    |
 
 ## Details
 

docs/content-services/components/content-metadata-card.component.md

@@ -378,7 +378,7 @@ displayed. The aspects to be displayed are calculated as an intersection of the
 
 ## Multi value card properties
 
-Multi value properties are displayed one after another separated by a comma. This card makes use of the [Multi Value Pipe](../../core/pipes/multi-value.pipe.ts).
+Multi value properties are displayed one after another separated by a comma.
 
 To customize the separator used by this card you can set it in your `app.config.json` inside your content-metadata configuration:
 

docs/content-services/components/document-list.component.md

@@ -69,6 +69,7 @@ Displays the documents from a repository.
 | displayCheckboxesOnHover | `boolean` | false | Enables checkboxes in datatable rows being displayed on hover only. |
 | displayDragAndDropHint | `boolean` | true | Display drag and drop hint. |
 | emptyFolderImageUrl | `string` |  | Custom image for empty folder. Default value: './assets/images/empty_doc_lib.svg' |
+| filters | `string[]` |  | Specifies additional filters to apply (joined with **AND**). Applied for recent files only |
 | filterValue | `any` |  | Initial value for filter. |
 | headerFilters | `boolean` | false | Toggles the header filters mode. |
 | imageResolver | `any \| null` | null | Custom function to choose image file paths to show. See the [Image Resolver Model](image-resolver.model.md) page for more information. |

docs/content-services/components/search-filter.component.md

@@ -33,7 +33,6 @@ to build and execute the query.
 -   [Search Query Builder service](../services/search-query-builder.service.md)
 -   [Search filter chips component](./search-filter-chips.component.md)
 -   [Search Chip List Component](search-chip-list.component.md)
--   [Search Sorting Picker Component](search-sorting-picker.component.md)
 -   [Search Widget Interface](../interfaces/search-widget.interface.md)
 -   [Search check list component](search-check-list.component.md)
 -   [Search date range tabbed component](search-date-range-tabbed.component.md)

docs/content-services/components/search-sorting-picker.component.md

@@ -1,19 +0,0 @@
----
-Title: Search Sorting Picker Component
-Added: v2.3.0
-Status: Active
----
-
-# [Search Sorting Picker Component](../../../lib/content-services/src/lib/search/components/search-sorting-picker/search-sorting-picker.component.ts "Defined in search-sorting-picker.component.ts")
-
-Provides an ability to select one of the predefined sorting definitions for search results:
-
-```html
-<adf-search-sorting-picker></adf-search-sorting-picker>
-<adf-search-filter></adf-search-filter>
-```
-
-## See also
-
--   [Search Configuration Guide](../../user-guide/search-configuration-guide.md)
--   [Search filter chips component](search-filter-chips.component.md)

docs/content-services/directives/check-allowable-operation.directive.md

@@ -1,139 +0,0 @@
----
-Title: Check Allowable Operation directive
-Added: v2.0.0
-Status: Active
-Last reviewed: 2019-02-13
----
-
-# [Check Allowable Operation directive](../../../lib/content-services/src/lib/directives/check-allowable-operation.directive.ts "Defined in check-allowable-operation.directive.ts")
-
-Selectively disables an HTML element or Angular component.
-
-## Contents
-
--   [Basic Usage](#basic-usage)
--   [Class members](#class-members)
-    -   [Properties](#properties)
--   [Details](#details)
-    -   [HTML element example](#html-element-example)
-    -   [Angular component example](#angular-component-example)
-    -   [Implementing the NodeAllowableOperationSubject interface](#implementing-the-nodeallowableoperationsubject-interface)
-    -   [Defining your component as an EXTENDIBLE_COMPONENT parent component](#defining-your-component-as-an-extendible_component-parent-component)
-
-## Basic Usage
-
-```html
-<adf-toolbar title="toolbar example">
-    <button mat-icon-button
-            adf-check-allowable-operation="delete"
-            [adf-nodes]="documentList.selection">
-        <mat-icon>delete</mat-icon>
-    </button>
-</adf-toolbar>
-
-<adf-document-list #documentList ...>
- ...
-</adf-document-list>
-```
-
-## Class members
-
-### Properties
-
-| Name | Type | Default value | Description |
-| ---- | ---- | ------------- | ----------- |
-| nodes | [`NodeEntry`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeEntry.md)`[]` | \[] | Nodes to check permission for. |
-| permission | `string` | null | Node permission to check (create, delete, update, updatePermissions, !create, !delete, !update, !updatePermissions). |
-
-## Details
-
-The [Check Allowable Operation Directive](../../../lib/content-services/src/lib/directives/check-allowable-operation.directive.ts) lets you disable an HTML element or Angular component
-by taking a collection of [`NodeEntry`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeEntry.md) instances and checking their permissions.
-
-The decorated element will be disabled if:
-
--   there are no nodes in the collection
--   at least one of the nodes does not have the required permission
-
-### HTML element example
-
-A typical use case is to bind a [Document List](../components/document-list.component.md)
-selection property to a toolbar button. In the following example, the "Delete" button should
-be disabled if no selection is present or if user does not have permission to delete at least one node in the selection:
-
-```html
-<adf-toolbar title="toolbar example">
-    <button mat-icon-button
-            adf-check-allowable-operation="delete"
-            [adf-nodes]="documentList.selection">
-        <mat-icon>delete</mat-icon>
-    </button>
-</adf-toolbar>
-
-<adf-document-list #documentList ...>
- ...
-</adf-document-list>
-```
-
-The button will be disabled by default and will change state when the user selects or deselects
-one or more documents that they have permission to delete.
-
-### Angular component example
-
-You can add the directive to any Angular component that implements the [`NodeAllowableOperationSubject`](../../../lib/content-services/src/lib/interfaces/node-allowable-operation-subject.interface.ts)
-interface (the [Upload Drag Area component](../components/upload-drag-area.component.md),
-for example). You can also use it in much the same way as you would with an HTML element:
-
-```html
-<alfresco-upload-drag-area
-        [rootFolderId]="..."
-        [versioning]="..."
-        [adf-check-allowable-operation]="'create'"
-        [adf-nodes]="getCurrentDocumentListNode()">
- ...
-</alfresco-upload-drag-area>
-```
-
-To enable your own component to work with this directive, you need to implement the
-[`NodeAllowableOperationSubject`](../../../lib/content-services/src/lib/interfaces/node-allowable-operation-subject.interface.ts) interface and also define it as an
-[`EXTENDIBLE_COMPONENT`](../../../lib/core/src/lib/interface/injection.tokens.ts)
-parent component,
-as described in the following sections.
-
-### Implementing the NodeAllowableOperationSubject interface
-
-The component must implement the [`NodeAllowableOperationSubject`](../../../lib/content-services/src/lib/interfaces/node-allowable-operation-subject.interface.ts) interface which means it must have a
-boolean `disabled` property. This is the property that will be set by the directive:
-
-```js
-import { NodePermissionSubject } from '@alfresco/adf-core';
-
-@Component({...})
-export class UploadDragAreaComponent implements NodeAllowableOperationSubject {
-    public disabled: boolean = false;
-}
-```
-
-### Defining your component as an EXTENDIBLE_COMPONENT parent component
-
-The directive will look up the component in the dependency injection tree,
-up to the `@Host()` component. The host component is typically the component that requests
-the dependency. However, when this component is projected into a parent component, the
-parent becomes the host. This means you must provide your component with forward referencing
-as the
-[`EXTENDIBLE_COMPONENT`](../../../lib/core/src/lib/interface/injection.tokens.ts)
-and also provide your component as a `viewProvider`:
-
-```js
-import { EXTENDIBLE_COMPONENT } from '@alfresco/adf-core';
-
-@Component({
-    ...
-    viewProviders: [
-        { provide: EXTENDIBLE_COMPONENT, useExisting: forwardRef(() => UploadDragAreaComponent)}
-    ]
-})
-export class UploadDragAreaComponent implements NodeAllowableOperationSubject { ... }
-```
-
-**Note:** the usage of **viewProviders** (instead of **providers**) is very important, especially if you want to use this directive on a transcluded component.

docs/content-services/interfaces/base-card-view-content-update.interface.md

@@ -1,52 +0,0 @@
----
-Title: Base Card View Content Update interface
-Added: v6.0.0
-Status: Active
-Last reviewed: 2022-11-25
----
-
-# [Base Card View Content Update interface](../../../lib/content-services/src/lib/interfaces/base-card-view-content-update.interface.ts "Defined in base-card-view-content-update.interface.ts")
-
-Specifies required properties and methods for [Card View Content Update service](lib/content-services/src/lib/common/services/card-view-content-update.service.ts).
-Extends from [`BaseCardViewUpdate`](../../../lib/core/src/lib/card-view/interfaces/base-card-view-update.interface.ts).
-
-## Basic usage
-
-```ts
-export interface BaseCardViewContentUpdate {
-    itemUpdated$: Subject<UpdateNotification>;
-    updatedAspect$: Subject<Node>;
-
-    update(property: CardViewBaseItemModel, newValue: any);
-    updateElement(notification: CardViewBaseItemModel);
-    updateNodeAspect(node: Node);
-}
-```
-
-### Properties
-
-| Name | Type | Default value | Description |
-| ---- | ---- | ------------- | ----------- |
-| itemUpdated$ | [`Subject`](http://reactivex.io/documentation/subject.html)`<`[`UpdateNotification`](../../../lib/core/src/lib/card-view/interfaces/update-notification.interface.ts)`>` |  | The current updated item. |
-| updatedAspect$ | [`Subject`](http://reactivex.io/documentation/subject.html)`<`[`MinimalNode`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.md)`>`(@alfresco/js-api) |  | [`Subject`](http://reactivex.io/documentation/subject.html) holding the current node |
-
-### Methods
-
--   **update**(property: [`CardViewBaseItemModel`](../../../lib/core/src/lib/card-view/models/card-view-baseitem.model.ts), newValue: `any`)<br/>
-    Update itemUpdated$ property.
-
-    -   property:\_ [`CardViewBaseItemModel`](../../../lib/core/src/lib/card-view/models/card-view-baseitem.model.ts)  - The property.
-    -   newValue:\_ `any`  - new value.
-
--   **updateElement**(notification: [`CardViewBaseItemModel`](../../../lib/core/src/lib/card-view/models/card-view-baseitem.model.ts))<br/>
-    Update updateItem$ observable.
-
-    -   notification:\_ [`CardViewBaseItemModel`](../../../lib/core/src/lib/card-view/models/card-view-baseitem.model.ts)  - The notification.
-
--   **updateNodeAspect**(node: [`MinimalNode`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.md))<br/>
-    Update node aspect observable.
-    -   node:\_ [`MinimalNode`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.md)  - The node.
-
-## See also
-
--   [CardViewContentUpdate service](../services/card-view-content-update.service.md)

docs/content-services/services/card-view-content-update.service.md

@@ -8,7 +8,6 @@ Last reviewed: 2022-11-25
 # [Card View Content Update Service](../../../lib/content-services/src/lib/common/services/card-view-content-update.service.ts "Defined in card-view-content-update.service.ts")
 
 Manages Card View properties in the content services environment. 
-Implements [`BaseCardViewContentUpdate`](../../../lib/content-services/src/lib/interfaces/base-card-view-content-update.interface.ts).
 
 ## Class members
 

docs/content-services/services/custom-resources.service.md

@@ -47,12 +47,13 @@ Manages Document List information that is specific to a user.
     -   _includeFields:_ `string[]`  - List of data field names to include in the results
     -   _where:_ `string`  - (Optional) A string to restrict the returned objects by using a predicate
     -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`NodePaging`](https://github.com/Alfresco/alfresco-js-api/blob/develop/src/api/content-rest-api/docs/NodePaging.md)`>` - List of favorite files
--   **loadFolderByNodeId**(nodeId: `string`, pagination: [`PaginationModel`](../../../lib/core/src/lib/models/pagination.model.ts), includeFields: `string[]` = `[]`, where?: `string`): `any`<br/>
+-   **loadFolderByNodeId**(nodeId: `string`, pagination: [`PaginationModel`](../../../lib/core/src/lib/models/pagination.model.ts), includeFields: `string[]` = `[]`, where?: `string`, filters?: `string[]`): `any`<br/>
     Gets a folder's contents.
     -   _nodeId:_ `string`  - ID of the target folder node
     -   _pagination:_ [`PaginationModel`](../../../lib/core/src/lib/models/pagination.model.ts)  - Specifies how to paginate the results
     -   _includeFields:_ `string[]`  - List of data field names to include in the results
     -   _where:_ `string`  - (Optional) Filters the Node list using the _where_ condition of the REST API (for example, isFolder=true). See the REST API documentation for more information.
+    -   _filters:_ `string[]` - Specifies additional filters to apply (joined with **AND**). Applied for '-recent-' only.
     -   **Returns** `any` - List of items contained in the folder
 -   **loadMemberSites**(pagination: [`PaginationModel`](../../../lib/core/src/lib/models/pagination.model.ts), where?: `string`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`SiteMemberPaging`](https://github.com/Alfresco/alfresco-js-api/blob/develop/src/api/content-rest-api/docs/SiteMemberPaging.md)`>`<br/>
     Gets sites that the current user is a member of.

docs/content-services/services/document-list.service.md

@@ -62,13 +62,14 @@ import { DocumentListService } from '@alfresco/adf-core';
     -   _nodeId:_ `any`  - 
     -   **Returns** `boolean` - 
 
--   **loadFolderByNodeId**(nodeId: `string`, pagination: `PaginationModel`, includeFields: `string[]`, where?: `string`, orderBy?: `string[]`): `Observable<DocumentLoaderNode>`<br/>
+-   **loadFolderByNodeId**(nodeId: `string`, pagination: `PaginationModel`, includeFields: `string[]`, where?: `string`, orderBy?: `string[]`, filters?: `string[]`): `Observable<DocumentLoaderNode>`<br/>
     Load a folder by Node Id.
     -   _nodeId:_ `string`  - ID of the folder node
     -   _pagination:_ `PaginationModel` - pagination model
     -   _includeFields:_ `string[]`  - List of data field names to include in the results
     -   _where:_ `string`  - (Optional) Optionally filter the list
     -   _orderBy:_ `string[]`  - (Optional) order by node property
+    -   _filters:_ `string[]` - (Optional) Specifies additional filters to apply (joined with **AND**). Applied for recent files only
     -   **Returns** `Observable<DocumentLoaderNode>` - Details of the folder
 -   **moveNode**(nodeId: `string`, targetParentId: `string`): `Observable<NodeEntry>`<br/>
     Moves a node to destination node.

docs/core/components/button.component.md

@@ -1 +0,0 @@
-../../../lib/core/src/lib/button/button.component.md

docs/core/components/datatable.component.md

@@ -464,6 +464,8 @@ Learn more about styling your datatable: [Customizing the component's styles](#c
 
 ## Details
 
+This component supports rows reordering via keyboard. To enable it first set `enableDragRows` to `true`, focus any selected row and use shift + ArrowUp/ArrowDown combination to reorder selected row.
+
 ### Supplying data for the table
 
 The column layout and row data are supplied to the table using an object that implements the

docs/core/components/icon.component.md

@@ -1,8 +1,8 @@
 ---
 Title: Icon Component
 Added: v3.0.0
-Status: Active
-Last reviewed: 2019-02-08
+Status: Deprecated
+Last reviewed: 2026-01-20
 ---
 
 # [Icon Component](../../../lib/core/src/lib/icon/icon.component.ts "Defined in icon.component.ts")
@@ -29,7 +29,9 @@ Provides a universal way of rendering registered and named icons.
 | Name | Type | Default value | Description |
 | ---- | ---- | ------------- | ----------- |
 | color | [`ThemePalette`](https://github.com/angular/components/blob/master/src/material/core/common-behaviors/color.ts) |  | Theme color palette for the component. |
+| fontSet | `string` | | Icon font set. |
 | value | `string` |  | Icon value, which can be either a ligature name or a custom icon in the format `[namespace]:[name]`. |
+| isSvg | `boolean` | false | Is icon of type svg. |
 
 ## Details
 
@@ -78,6 +80,73 @@ using the `adf:` namespace.
 <adf-icon value="adf:image/gif"></adf-icon>
 ```
 
+### Icon alias mapping
+
+The Icon Alias Mapping feature allows you to provide custom icon value mappings at runtime using the `ICON_ALIAS_MAP_TOKEN` injection token. When an icon value matches a key in the alias map, the component automatically replaces it with the mapped value. This is useful for creating consistent icon conventions across your application without modifying component code.
+
+**How icon name replacement works:**
+
+When you provide an alias map, the component checks if the icon value matches any key in the map. If a match is found, the icon name is replaced with the corresponding mapped value. This happens automatically and transparently:
+
+- Original icon name: `icon-mock`
+- Alias map entry: `'icon-mock': 'alias-mock'`
+- Result: Icon renders as `alias-mock` instead of `icon-mock`
+
+This allows you to:
+- **Rename icons** without changing component code
+- **Support legacy icon names** by mapping them to new ones
+- **Centralize icon naming conventions** in your application
+- **Create icon aliases** for shorter or more descriptive names
+
+**Example alias map:**
+
+```ts
+import { ICON_ALIAS_MAP_TOKEN } from '@alfresco/adf-core';
+
+function getProviders() {
+    return [
+        {
+            provide: ICON_ALIAS_MAP_TOKEN,
+            useValue: {
+                'icon-mock': 'alias-mock',
+                'old-icon': 'new-icon'
+            }
+        }
+    ]
+}
+```
+
+### Template usage
+
+The Icon Component supports two ways to provide the icon value:
+
+**1. Using the `value` input property:**
+
+```html
+<adf-icon value="home"></adf-icon>
+<adf-icon value="alert"></adf-icon>
+<adf-icon value="adf:custom-icon"></adf-icon>
+```
+
+**2. Using content projection (slot):**
+
+Similar to Angular Material's `mat-icon`, you can provide the icon value as text content:
+
+```html
+<adf-icon>home</adf-icon>
+<adf-icon>alert</adf-icon>
+<adf-icon>adf:custom-icon</adf-icon>
+```
+
+**Priority:** If both are provided, the slot content takes priority over the `value` input property:
+
+```html
+<!-- Uses "home" from slot, ignores value input -->
+<adf-icon value="alert">home</adf-icon>
+```
+
+This approach provides flexibility and familiarity for developers accustomed to Angular Material's icon component API.
+
 ## See also
 
 -   [Thumbnail service](../services/thumbnail.service.md)

docs/core/components/progress.component.md

@@ -1 +0,0 @@
-../../../lib/core/src/lib/progress/progress.component.md

docs/core/components/sorting-picker.component.md

@@ -1,67 +0,0 @@
----
-Title: Sorting Picker Component
-Added: v2.4.0
-Status: Active
-Last reviewed: 2018-06-08
----
-
-# [Sorting Picker Component](../../../lib/core/src/lib/sorting-picker/sorting-picker.component.ts "Defined in sorting-picker.component.ts")
-
-Selects from a set of predefined sorting definitions and directions.
-
-![Sorting Picker](../../docassets/images/sorting-picker.png)
-
-## Basic Usage
-
-```html
-<adf-sorting-picker
-    [options]="options"
-    [selected]="value"
-    [ascending]="ascending"
-    (change)="onChanged($event)">
-</adf-sorting-picker>
-```
-
-## Class members
-
-### Properties
-
-| Name | Type | Default value | Description |
-| ---- | ---- | ------------- | ----------- |
-| ascending | `boolean` | true | Current sorting direction |
-| options | `Array<Function>` | \[] | Available sorting options |
-| selected | `string` |  | Currently selected option key |
-
-### Events
-
-| Name | Type | Description |
-| ---- | ---- | ----------- |
-| sortingChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>` | Raised each time direction gets changed. |
-| valueChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<string>` | Raised each time sorting key gets changed. |
-
-## Details
-
-The picker shows the user a menu of sorting options (which could be data columns to sort on
-alphabetical vs numerical search, etc) and the choice of ascending vs descending sort order.
-Note that picker only implements the menu, so you are responsible for implementing the sorting
-options yourself.
-
-The `options` property contains an array of any objects that expose the following properties:
-
-```ts
-{
-    key: string;
-    label: string;
-}
-```
-
-The `key` is an identifying value and the `label` is the text that the user will see in the
-picker. The selected `key` is reported by the `change` event, which passes an object like the
-following as its parameter:
-
-```ts
-{
-    key: string,
-    ascending: boolean
-}
-```

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

@@ -76,12 +76,14 @@ Using with file [`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob):
 
 ## Keyboard shortcuts
 
-| Name | Description |
-| ---- | ----------- |
-| Esc | Close the viewer (overlay mode only). |
-| Left | Invoke 'Navigate before' action. |
-| Right | Invoke 'Navigate next' action. |
-| Ctrl+F | Activate full-screen mode. |
+| Name              | Description                                                   |
+| ----------------- | ------------------------------------------------------------- |
+| Esc               | Close the viewer (overlay mode only).                         |
+| Left              | Invoke 'Navigate before' action. Disabled in image edit mode. |
+| Right             | Invoke 'Navigate next' action. Disabled in image edit mode.   |
+| Shift + Arrow Key | Increase image crop area. Active only in image edit mode.     |
+| Alt + Arrow Key   | Decrease image crop area. Active only in image edit mode.     |
+| Ctrl+F            | Activate full-screen mode.                                    |
 
 ## Details
 

docs/core/components/viewer.component.md

@@ -105,12 +105,14 @@ See the [Custom layout](#custom-layout) section for full details of all availabl
 
 ## Keyboard shortcuts
 
-| Name | Description |
-| ---- | ----------- |
-| Esc | Close the viewer (overlay mode only). |
-| Left | Invoke 'Navigate before' action. |
-| Right | Invoke 'Navigate next' action. |
-| Ctrl+F | Activate full-screen mode. |
+| Name              | Description                                                   |
+| ----------------- | ------------------------------------------------------------- |
+| Esc               | Close the viewer (overlay mode only).                         | 
+| Left              | Invoke 'Navigate before' action. Disabled in image edit mode. |
+| Right             | Invoke 'Navigate next' action. Disabled in image edit mode.   |
+| Shift + Arrow Key | Increase image crop area. Active only in image edit mode.     |
+| Alt + Arrow Key   | Decrease image crop area. Active only in image edit mode.     |
+| Ctrl+F            | Activate full-screen mode.                                    |
 
 ## Details
 

docs/core/directives/card-view-property-validator.directive.md

@@ -0,0 +1,33 @@
+---
+Title: CardViewPropertyValidator directive
+Added: v8.3.0
+Status: Active
+Last reviewed: 2025-12-10
+---
+
+# [CardViewPropertyValidator directive](../../../lib/core/src/lib/card-view/directives/card-view-property-validator.directive.ts "Defined in card-view-property-validator.directive.ts")
+
+Checks validators defined on property.
+
+## Basic Usage
+
+```html
+<input
+    adf-card-view-property-validator
+    [property]="property"
+    (validated)="onValidation($event)"/>
+```
+
+## Class members
+
+### Properties
+
+| Name     | Type                                                                                              | Default value | Description                                         |
+|----------|---------------------------------------------------------------------------------------------------|---------------|-----------------------------------------------------|
+| property | [`CardViewBaseItemModel`](../../../lib/core/src/lib/card-view/models/card-view-baseitem.model.ts) |               | Property for which validations should be triggered. |
+
+### Events
+
+| Name      | Type                                                                   | Description                                                                      |
+|-----------|------------------------------------------------------------------------|----------------------------------------------------------------------------------|
+| validated | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<string[]>` | Emitted after validation. Emits list of errors or empty array if input is valid. |

docs/core/pipes/multi-value.pipe.md

@@ -1,45 +0,0 @@
----
-Title: Multi Value Pipe
-Added: v3.2.0
-Status: Active
----
-
-# [Multi Value Pipe](../../../lib/core/src/lib/pipes/multi-value.pipe.ts "Defined in multi-value.pipe.ts")
-
-Takes an array of strings and turns it into one string where items are separated by a separator. The default separator applied to the list is the comma `,`  however, you can set your own separator in the params of the pipe. 
-
-## Basic Usage
-
-<!-- {% raw %} -->
-
-### Default separator
-
-```HTML
-<div>
-    List {{ values | multiValue }}
-</div>
-```
-
-#### Result
-
-![multi-value-pipe](../../docassets/images/multi-value-default.pipe.png)
-
-### Custom separator
-
-```HTML
-<div>
-    List {{ values | multiValue: ' :) ' }}
-</div>
-```
-
-<!-- {% endraw %} -->
-
-#### Result
-
-![multi-value-pipe](../../docassets/images/multi-value.pipe.png)
-
-## Details
-
-The pipe gets every one of the items passed to the pipe and stringifies it adding the separator set in the configuration.
-
-You will need to specify the separator you want to use for it to work.

docs/core/pipes/node-name-tooltip.pipe.md

@@ -1,34 +0,0 @@
----
-Title: Node Name Tooltip pipe
-Added: v2.0.0
-Status: Active
----
-
-# [Node Name Tooltip pipe](../../../lib/content-services/src/lib/pipes/node-name-tooltip.pipe.ts "Defined in node-name-tooltip.pipe.ts")
-
-Formats the tooltip for a [`Node`](https://github.com/Alfresco/alfresco-js-api/blob/develop/src/api/content-rest-api/docs/Node.md).
-
-## Basic Usage
-
-<!-- {% raw %} -->
-
-```html
-<data-column
-    key="name"
-    title="Name">
-    <ng-template let-value="value" let-context>
-        <span title="{{ context?.row?.obj | adfNodeNameTooltip }}">{{ value }}</span>
-    </ng-template>
-</data-column>
-```
-
-<!-- {% endraw %} -->
-
-## Details
-
-The tooltip is formatted according to the following rules:
-
--   if the _title_ and _description_ are missing, then the tooltip shows the _name_;
--   if the _title_ is missing, then the tooltip shows the _name_ and _description_;
--   if the _description_ is missing, then the tooltip shows the _name_ and _title_;
--   if _name_ and _title_, _name_ and _description_, or _title_ and _description_ are the same, then only a single line is displayed.

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

@@ -96,6 +96,7 @@ The template defined inside `empty-form` will be shown when no form definition i
 | showValidationIcon | `boolean` | true | Toggle rendering of the validation icon next to the form title. |
 | taskId | `string` |  | Task id to fetch corresponding form and values. |
 | displayModeConfigurations | [`FormCloudDisplayModeConfiguration`](../../../lib/process-services-cloud/src/lib/services/form-fields.interfaces.ts)`[]` |  | The available display configurations for the form |
+| enableParentVisibilityCheck | `boolean` | false | Toggle to enable parent visibility check for validation. When enabled, fields inside hidden groups/sections will skip validation. |
 
 ### Events
 

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

@@ -42,6 +42,9 @@ Starts a process.
 | processDefinitionName | `string` |  | Name of the process definition. |
 | showSelectProcessDropdown | `boolean` | true | Show/hide the process dropdown list. |
 | showTitle | `boolean` | true | Show/hide title. |
+| showCancelButton | `boolean` | true | Show/hide cancel button. |
+| displayModeConfigurations | [`FormCloudDisplayModeConfiguration`](../../../lib/process-services-cloud/src/lib/services/form-fields.interfaces.ts)`[]` |  | The available display configurations for the form (start process event can have assigned form). |
+| enableParentVisibilityCheck | `boolean` | false | Toggle to enable parent visibility check for validation. When enabled, fields inside hidden groups/sections will skip validation. |
 | 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. |
 | variables | `any` |  | Variables to attach to the payload. |
 

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

@@ -44,6 +44,7 @@ Save and Complete buttons get disabled when at least one of the form's inputs ar
 | 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                   |
+| enableParentVisibilityCheck | `boolean`                           | false         | Toggle to enable parent visibility check for validation. When enabled, fields inside hidden groups/sections will skip validation. |
 
 ### Events
 

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

@@ -45,6 +45,7 @@ Based on property taskDetails: TaskDetailsCloudModel shows a form or a screen.
 | 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                   |
+| enableParentVisibilityCheck | `boolean`                           | false         | Toggle to enable parent visibility check for validation. When enabled, fields inside hidden groups/sections will skip validation. |
 
 ### Events
 

docs/process-services/directives/process-audit.directive.md

@@ -1,43 +0,0 @@
----
-Title: Process Audit Directive
-Added: v2.0.0
-Status: Active
-Last reviewed: 2019-01-14
----
-
-# [Process Audit Directive](../../../lib/process-services/src/lib/process-list/components/process-audit/process-audit.directive.ts "Defined in process-audit.directive.ts")
-
-Fetches the Process Audit information in PDF or JSON format.
-
-![adf-process-audit-directive](../../docassets/images/adf-process-audit-directive.png)
-
-## Basic Usage
-
-```html
-<button
-    adf-process-audit
-    [process-id]="processId"
-    [format]="'pdf'"
-    [download]="true"
-    mat-icon-button (clicked)="onAuditClick($event)" (error)="onAuditError($event)" >
-    <mat-icon>assignment_ind</mat-icon>
-</button>
-```
-
-## Class members
-
-### Properties
-
-| Name | Type | Default value | Description |
-| ---- | ---- | ------------- | ----------- |
-| download | `boolean` | true | Enables downloading of the audit file on clicking. |
-| fileName | `string` | "Audit" | Name of the file to download (for PDF downloads). |
-| format | `string` | "pdf" | Format for the audit information (can be "pdf" or "json"). |
-| processId | `string` |  | ID of the process. |
-
-### Events
-
-| Name | Type | Description |
-| ---- | ---- | ----------- |
-| clicked | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the decorated element is clicked. |
-| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when an error occurs. |

docs/storybook/adding-new-story.md

@@ -0,0 +1,81 @@
+# Adding a New Story
+
+This guide describes how to create and structure a new story for a component in the Alfresco Angular Components repository.
+
+## File Location
+
+Story files should be co-located with the component they are documenting. This keeps the stories close to the source code and makes them easier to find and maintain.
+
+## Naming Convention
+
+The file should be named using the pattern:
+`[component-name].stories.ts`
+
+For example, if your component is `my-component.component.ts`, the story file should be `my-component.component.stories.ts`.
+
+## Basic Structure
+
+A typical story file includes:
+
+1.  Imports for `Meta`, `Story`, `moduleMetadata` from `@storybook/angular`.
+2.  The component configuration using `applicationConfig` to provide necessary dependencies.
+3.  Usage of `provideStoryCore()` (or other library-specific providers) to set up the environment.
+
+### Example
+
+Here is an example of how to set up a basic story for a component.
+
+```typescript
+import { Meta, StoryObj, moduleMetadata, applicationConfig } from '@storybook/angular';
+import { MyComponent } from './my.component';
+import { provideStoryCore } from '@alfresco/adf-core/testing'; // Adjust import based on your library location
+import { CommonModule } from '@angular/common';
+
+const meta: Meta<MyComponent> = {
+    title: 'Core/My Component',
+    component: MyComponent,
+    decorators: [
+        applicationConfig({
+            providers: [...provideStoryCore()]
+        }),
+        moduleMetadata({
+            imports: [MyComponent]
+        })
+    ],
+    argTypes: {
+        // Define controls for your inputs here
+        label: { control: 'text' },
+        isDisabled: { control: 'boolean' }
+    }
+};
+
+export default meta;
+type Story = StoryObj<MyComponent>;
+
+export const Default: Story = {
+    args: {
+        label: 'Click me',
+        isDisabled: false
+    }
+};
+
+export const Disabled: Story = {
+    args: {
+        label: 'Disabled',
+        isDisabled: true
+    }
+};
+```
+
+### Dependencies
+
+The `provideStoryCore()` function helper is essential for setting up the common providers required by ADF components, such as translation services, authentication mocks, and app configuration.
+
+If your component requires specific services not included in `provideStoryCore()`, you should add them to the `providers` array in the `applicationConfig`.
+
+## Useful Links
+
+- [Writing Stories](https://storybook.js.org/docs/angular/writing-stories/introduction)
+- [Args and Controls](https://storybook.js.org/docs/angular/writing-stories/args)
+- [Decorators](https://storybook.js.org/docs/angular/writing-stories/decorators)
+- [Naming Components and Hierarchy](https://storybook.js.org/docs/angular/writing-stories/naming-components-and-hierarchy)

docs/storybook/configuring-new-lib.md

@@ -0,0 +1,112 @@
+# Configuring Storybook for a New Library
+
+This guide outlines the steps to configure Storybook for a newly created Nx library within the repository.
+
+## Prerequisites
+
+Ensure that the library has been created using the Nx generator.
+
+## Configuration Steps
+
+### 1. Generate Storybook Configuration
+
+Run the Nx generator to add Storybook configuration to your library:
+
+```bash
+nx g @nx/angular:storybook-configuration [project-name]
+```
+
+Replace `[project-name]` with the name of your library (e.g., `my-new-lib`).
+
+### 2. Update `project.json`
+
+Verify that the `project.json` file of your library has the `storybook` and `build-storybook` targets correctly configured.
+
+### 3. Update `.storybook/main.ts`
+
+Update the `.storybook/main.ts` file in your library to extend the root configuration and handle static assets correctly.
+
+```typescript
+import { fileURLToPath } from 'node:url';
+import { dirname } from 'node:path';
+import type { StorybookConfig } from '@storybook/angular';
+import rootMain from '../../../.storybook/main'; // Adjust path to root
+
+const config: StorybookConfig = {
+    ...rootMain,
+    stories: ['../**/*.stories.@(js|jsx|ts|tsx)'],
+    staticDirs: [
+        // Add static directories if needed, e.g., for i18n or assets
+        { from: '../src/lib/i18n', to: 'assets/adf-my-lib/i18n' }
+    ],
+    framework: {
+        name: getAbsolutePath('@storybook/angular'),
+        options: {}
+    }
+};
+
+export default config;
+
+function getAbsolutePath(value: string): any {
+    return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
+}
+```
+
+### 4. Update `.storybook/preview.ts`
+
+Update `.storybook/preview.ts` to import the root preview configuration and add any library-specific tags.
+
+```typescript
+import { type Preview } from '@storybook/angular';
+import rootPreview from '../../../.storybook/preview'; // Adjust path to root
+
+const preview: Preview = {
+    ...rootPreview,
+    tags: ['autodocs']
+};
+
+export default preview;
+```
+
+### 5. Update `.storybook/tsconfig.json`
+
+Ensure the `tsconfig.json` in the `.storybook` directory extends the main `tsconfig.json` and includes/excludes the correct files.
+
+```json
+{
+    "extends": "../../../tsconfig.json",
+    "compilerOptions": {
+        "emitDecoratorMetadata": true
+    },
+    "exclude": ["../**/*.spec.ts", "../**/*.mock.ts", "../**/test.ts", "../**/*.module.ts"],
+    "include": ["../src/**/*", "*.ts"]
+}
+```
+
+### 6. Update Root `lib/stories`
+
+To include the new library's stories in the aggregated Storybook (`nx run stories:storybook`), you need to update the `lib/stories/.storybook/main.ts` file.
+
+1.  **Add Stories Pattern**: Add the path to your new library's stories in the `stories` array.
+2.  **Add Static Assets**: If your library has static assets (like i18n files), add them to the `staticDirs` array.
+
+Example update in `lib/stories/.storybook/main.ts`:
+
+```typescript
+// ...
+stories: [
+    // ... existing entries
+    '../../my-new-lib/**/*.stories.ts'
+],
+staticDirs: [
+    // ... existing entries
+    { from: '../../my-new-lib/src/lib/i18n', to: 'assets/adf-my-lib/i18n' }
+],
+// ...
+```
+
+## Useful Links
+
+- [Configure Storybook](https://storybook.js.org/docs/angular/configure/overview)
+- [Framework Configuration (main.ts)](https://storybook.js.org/docs/angular/configure/framework-config)
+- [Story Rendering (preview.ts)](https://storybook.js.org/docs/angular/configure/story-rendering)

docs/storybook/using-storybook.md

@@ -0,0 +1,33 @@
+# Using Storybook
+
+This guide explains how to run and build Storybook for the entire repository and for individual libraries within the Alfresco Angular Components project.
+
+## Introduction
+
+Storybook is used in this repository to develop and showcase components in isolation. It provides a sandbox environment where you can interact with components and view their different states.
+
+## Running All Stories
+
+To run the aggregated Storybook that includes stories from all libraries (Core, Content Services, Process Services Cloud, etc.), use the following command:
+
+```bash
+npm run storybook
+```
+
+Once started, you can access the Storybook interface at:
+[http://localhost:4400/](http://localhost:4400/)
+
+## Building Storybook
+
+To build the static Storybook application (e.g., for deployment), use the following command:
+
+```bash
+npm run build-storybook
+```
+
+The build artifacts will be output to `dist/storybook/stories`.
+
+## Useful Links
+
+- [Storybook CLI Options](https://storybook.js.org/docs/angular/api/cli-options)
+- [Storybook for Angular Introduction](https://storybook.js.org/docs/angular/get-started/introduction)

docs/versionIndex.md

@@ -12,6 +12,7 @@ backend services have been tested with each released version of ADF.
 
 ## Versions
 
+-   [v8.3.0](#v830)
 -   [v7.0.0-alpha.3](#v700-alpha3)
 -   [v6.8.0](#v680)
 -   [v6.7.0](#v670)
@@ -48,6 +49,14 @@ backend services have been tested with each released version of ADF.
 -   [v2.1.0](#v210)
 -   [v2.0.0](#v200)
 
+## v8.3.0
+
+<!--7.0.0-alpha.3 start-->
+
+-   [CardViewPropertyValidator Directive](core/directives/card-view-property-validator.directive.md)
+
+<!--7.0.0-alpha.3 end-->
+
 ## v7.0.0-alpha.3
 
 <!--7.0.0-alpha.3 start-->
@@ -314,7 +323,6 @@ backend services have been tested with each released version of ADF.
 -   [Form cloud component](process-services-cloud/components/form-cloud.component.md)
 -   [Form cloud service](process-services-cloud/services/form-cloud.service.md)
 -   [Json cell component](core/components/json-cell.component.md)
--   [Multi value pipe](core/pipes/multi-value.pipe.md)
 -   [Task form cloud component](process-services-cloud/components/task-form-cloud.component.md)
 
 <!--v320 end-->
@@ -596,7 +604,6 @@ backend services have been tested with each released version of ADF.
 -   [Logout directive](core/directives/logout.directive.md)
 -   [Node delete directive](content-services/directives/node-delete.directive.md)
 -   [Node favorite directive](content-services/directives/node-favorite.directive.md)
--   [Node name tooltip pipe](core/pipes/node-name-tooltip.pipe.md)
 -   [Node permission service](content-services/services/node-permission.service.md)
 -   [Node restore directive](content-services/directives/node-restore.directive.md)
 -   [Nodes api service](core/services/nodes-api.service.md)

lib/.gitignore

@@ -27,6 +27,7 @@ insights/**/*.js.map
 insights/**/*.d.ts
 
 process-services-cloud/**/*.js
+!process-services-cloud/.storybook/*.js
 !process-services-cloud/karma.conf.js
 process-services-cloud/**/*.js.map
 process-services-cloud/**/*.d.ts

lib/cli/package-lock.json

@@ -813,9 +813,9 @@
       "license": "ISC"
     },
     "node_modules/qs": {
-      "version": "6.14.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz",
-      "integrity": "sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==",
+      "version": "6.14.1",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.1.tgz",
+      "integrity": "sha512-4EK3+xJl8Ts67nLYNwqw/dsFVnCf+qR7RgXSK9jEEm9unao3njwMDdmsdvoKBKHzxd7tCYz5e5M+SnMjdtXGQQ==",
       "license": "BSD-3-Clause",
       "dependencies": {
         "side-channel": "^1.1.0"

lib/cli/tsconfig.json

@@ -16,8 +16,8 @@
     "rootDir": ".",
     "skipLibCheck": true,
     "strictNullChecks": false,
-    "target": "es2018",
-    "lib": ["es2018", "dom"],
+    "target": "es2022",
+    "lib": ["es2022", "dom"],
     "baseUrl": ".",
     "typeRoots": ["node_modules/@types", "../../node_modules/@types"],
     "types": ["node"],

lib/config/app.config.json

@@ -3,5 +3,6 @@
   "ecmHost": "http://{hostname}:{port}/ecm",
   "bpmHost": "http://{hostname}:{port}/bpm",
   "baseShareUrl": null,
-  "logLevel" : "silent"
+  "logLevel" : "silent",
+  "locale" : "en"
 }

lib/content-services/.eslintrc.json

@@ -6,7 +6,11 @@
       "files": ["*.ts"],
       "extends": ["plugin:@nx/angular"],
       "parserOptions": {
-        "project": ["lib/content-services/tsconfig.lib.json", "lib/content-services/tsconfig.spec.json"],
+        "project": [
+          "lib/content-services/tsconfig.lib.json",
+          "lib/content-services/tsconfig.spec.json",
+          "lib/content-services/.storybook/tsconfig.json"
+        ],
         "createDefaultProgram": true
       },
       "rules": {

lib/content-services/.storybook/main.ts

@@ -0,0 +1,23 @@
+import { fileURLToPath } from 'node:url';
+import { dirname } from 'node:path';
+import type { StorybookConfig } from '@storybook/angular';
+import rootMain from '../../../.storybook/main';
+
+const config: StorybookConfig = {
+    ...rootMain,
+    stories: ['../**/*.stories.@(js|jsx|ts|tsx)'],
+    staticDirs: [
+        { from: '../src/lib/i18n', to: 'assets/adf-core/i18n' },
+        { from: '../src/lib/assets/images', to: 'assets/images' }
+    ],
+    framework: {
+        name: getAbsolutePath('@storybook/angular'),
+        options: {}
+    }
+};
+
+export default config;
+
+function getAbsolutePath(value: string): any {
+    return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
+}

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

@@ -0,0 +1,11 @@
+import type { Preview } from '@storybook/angular';
+
+const preview: Preview = {
+    parameters: {
+        docs: { inlineStories: true },
+        controls: { expanded: true }
+    },
+    tags: ['autodocs']
+};
+
+export default preview;

lib/content-services/.storybook/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "moduleResolution": "bundler"
+  },
+
+  "exclude": ["../**/*.spec.ts" ],
+  "include": ["../src/**/*", "*.ts"]
+}

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

@@ -5,7 +5,7 @@
 
 <div class="adf-aspect-list-dialog-information">
     <p id="aspect-list-dialog-over-table-message">{{overTableMessage | translate}}</p>
-    <p id="aspect-list-dialog-counter">{{counter}}
+    <p id="aspect-list-dialog-counter" aria-live="polite">{{counter}}
         {{'ADF-ASPECT-LIST.DIALOG.SELECTED' | translate}}</p>
 </div>
 <mat-dialog-content class="adf-aspect-dialog-content">

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

@@ -19,7 +19,6 @@ import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/materia
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { AspectListDialogComponent } from './aspect-list-dialog.component';
 import { of, Subject } from 'rxjs';
-import { ContentTestingModule } from '../testing/content.testing.module';
 import { AspectListDialogComponentData } from './aspect-list-dialog-data.interface';
 import { AspectListService } from './services/aspect-list.service';
 import { delay } from 'rxjs/operators';
@@ -27,6 +26,9 @@ import { AspectEntry, Node } from '@alfresco/js-api';
 import { NodesApiService } from '../common/services/nodes-api.service';
 import { By } from '@angular/platform-browser';
 import { AspectListComponent } from './aspect-list.component';
+import { provideApiTesting } from '../testing/providers';
+import { UnitTestingUtils } from '@alfresco/adf-core';
+import { DebugElement } from '@angular/core';
 
 const aspectListMock: AspectEntry[] = [
     {
@@ -99,12 +101,20 @@ describe('AspectListDialogComponent', () => {
     let aspectListService: AspectListService;
     let nodeService: NodesApiService;
     let data: AspectListDialogComponentData;
+    let testingUtils: UnitTestingUtils;
     const event = new KeyboardEvent('keydown', {
         bubbles: true,
         keyCode: 27
     } as KeyboardEventInit);
 
-    beforeEach(async () => {
+    const getResetButton = (): DebugElement => testingUtils.getByCSS('#aspect-list-dialog-actions-reset');
+    const getClearButton = (): DebugElement => testingUtils.getByCSS('#aspect-list-dialog-actions-clear');
+    const getCancelButton = (): DebugElement => testingUtils.getByCSS('#aspect-list-dialog-actions-cancel');
+    const getApplyButton = (): DebugElement => testingUtils.getByCSS('#aspect-list-dialog-actions-apply');
+    const getAspectCounter = (): string => testingUtils.getInnerTextByCSS('#aspect-list-dialog-counter');
+    const getAspectCheckbox = (index: number): HTMLInputElement => testingUtils.getByCSS(`#aspect-list-${index}-check-input`).nativeElement;
+
+    beforeEach(() => {
         data = {
             title: 'Title',
             description: 'Description that can be longer or shorter',
@@ -112,9 +122,10 @@ describe('AspectListDialogComponent', () => {
             select: new Subject<string[]>(),
             excludedAspects: []
         };
-        await TestBed.configureTestingModule({
-            imports: [ContentTestingModule, MatDialogModule],
+        TestBed.configureTestingModule({
+            imports: [MatDialogModule],
             providers: [
+                provideApiTesting(),
                 { provide: MAT_DIALOG_DATA, useValue: data },
                 {
                     provide: MatDialogRef,
@@ -125,8 +136,9 @@ describe('AspectListDialogComponent', () => {
                     }
                 }
             ]
-        }).compileComponents();
+        });
         fixture = TestBed.createComponent(AspectListDialogComponent);
+        testingUtils = new UnitTestingUtils(fixture.debugElement);
     });
 
     describe('Without passing node id', () => {
@@ -143,91 +155,81 @@ describe('AspectListDialogComponent', () => {
         });
 
         it('should show 4 actions : CLEAR, RESET, CANCEL and APPLY', () => {
-            expect(fixture.nativeElement.querySelector('#aspect-list-dialog-actions-reset')).not.toBeNull();
-            expect(fixture.nativeElement.querySelector('#aspect-list-dialog-actions-reset')).toBeDefined();
-            expect(fixture.nativeElement.querySelector('#aspect-list-dialog-actions-clear')).not.toBeNull();
-            expect(fixture.nativeElement.querySelector('#aspect-list-dialog-actions-clear')).toBeDefined();
-            expect(fixture.nativeElement.querySelector('#aspect-list-dialog-actions-cancel')).not.toBeNull();
-            expect(fixture.nativeElement.querySelector('#aspect-list-dialog-actions-cancel')).toBeDefined();
-            expect(fixture.nativeElement.querySelector('#aspect-list-dialog-actions-apply')).not.toBeNull();
-            expect(fixture.nativeElement.querySelector('#aspect-list-dialog-actions-apply')).toBeDefined();
+            expect(getResetButton()).toBeDefined();
+            expect(getClearButton()).toBeDefined();
+            expect(getCancelButton()).toBeDefined();
+            expect(getApplyButton()).toBeDefined();
         });
 
         it('should show basic information for the dialog', () => {
-            const dialogTitle = fixture.nativeElement.querySelector('[data-automation-id="aspect-list-dialog-title"] .adf-aspect-list-dialog-title');
-            expect(dialogTitle).not.toBeNull();
-            expect(dialogTitle.innerText).toBe(data.title);
+            const dialogTitleText = testingUtils.getInnerTextByCSS('[data-automation-id="aspect-list-dialog-title"] .adf-aspect-list-dialog-title');
+            expect(dialogTitleText).toBe(data.title);
 
-            const dialogDescription = fixture.nativeElement.querySelector(
+            const dialogDescription = testingUtils.getInnerTextByCSS(
                 '[data-automation-id="aspect-list-dialog-title"] .adf-aspect-list-dialog-description'
             );
-            expect(dialogDescription).not.toBeNull();
-            expect(dialogDescription.innerText).toBe(data.description);
+            expect(dialogDescription).toBe(data.description);
 
-            const overTableMessage = fixture.nativeElement.querySelector('#aspect-list-dialog-over-table-message');
-            expect(overTableMessage).not.toBeNull();
-            expect(overTableMessage.innerText).toBe(data.overTableMessage);
-
-            const selectionCounter = fixture.nativeElement.querySelector('#aspect-list-dialog-counter');
-            expect(selectionCounter).not.toBeNull();
-            expect(selectionCounter.innerText).toBe('0 ADF-ASPECT-LIST.DIALOG.SELECTED');
+            expect(testingUtils.getInnerTextByCSS('#aspect-list-dialog-over-table-message')).toBe(data.overTableMessage);
+            expect(getAspectCounter()).toBe('0 ADF-ASPECT-LIST.DIALOG.SELECTED');
         });
 
-        it('should update the counter when an option is selcted and unselected', async () => {
-            const firstAspectCheckbox: HTMLInputElement = fixture.nativeElement.querySelector('#aspect-list-0-check-input');
+        it('should update the counter when an option is selected and unselected', async () => {
+            const firstAspectCheckbox = getAspectCheckbox(0);
             expect(firstAspectCheckbox).toBeDefined();
-            expect(firstAspectCheckbox).not.toBeNull();
-            let selectionCounter = fixture.nativeElement.querySelector('#aspect-list-dialog-counter');
-            expect(selectionCounter).not.toBeNull();
-            expect(selectionCounter.innerText).toBe('0 ADF-ASPECT-LIST.DIALOG.SELECTED');
-            firstAspectCheckbox.click();
-            fixture.detectChanges();
-            await fixture.whenStable();
-
-            selectionCounter = fixture.nativeElement.querySelector('#aspect-list-dialog-counter');
-            expect(selectionCounter).not.toBeNull();
-            expect(selectionCounter.innerText).toBe('1 ADF-ASPECT-LIST.DIALOG.SELECTED');
+            expect(getAspectCounter()).toBe('0 ADF-ASPECT-LIST.DIALOG.SELECTED');
 
             firstAspectCheckbox.click();
             fixture.detectChanges();
             await fixture.whenStable();
 
-            selectionCounter = fixture.nativeElement.querySelector('#aspect-list-dialog-counter');
-            expect(selectionCounter).not.toBeNull();
-            expect(selectionCounter.innerText).toBe('0 ADF-ASPECT-LIST.DIALOG.SELECTED');
+            expect(getAspectCounter()).toBe('1 ADF-ASPECT-LIST.DIALOG.SELECTED');
+
+            firstAspectCheckbox.click();
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            expect(getAspectCounter()).toBe('0 ADF-ASPECT-LIST.DIALOG.SELECTED');
         });
 
         it('should reset to the node values when Reset button is clicked', async () => {
-            let firstAspectCheckbox: HTMLInputElement = fixture.nativeElement.querySelector('#aspect-list-0-check-input');
+            let firstAspectCheckbox = getAspectCheckbox(0);
             expect(firstAspectCheckbox).toBeDefined();
-            expect(firstAspectCheckbox).not.toBeNull();
+
             firstAspectCheckbox.click();
             fixture.detectChanges();
             await fixture.whenStable();
-            const resetButton: HTMLButtonElement = fixture.nativeElement.querySelector('#aspect-list-dialog-actions-reset');
+
+            const resetButton: HTMLButtonElement = getResetButton().nativeElement;
             expect(resetButton).toBeDefined();
             expect(firstAspectCheckbox.checked).toBeTruthy();
+
             resetButton.click();
             fixture.detectChanges();
             await fixture.whenStable();
-            firstAspectCheckbox = fixture.nativeElement.querySelector('#aspect-list-0-check-input');
+
+            firstAspectCheckbox = getAspectCheckbox(0);
             expect(firstAspectCheckbox.checked).toBeFalsy();
         });
 
         it('should clear all the value when Clear button is clicked', async () => {
-            let firstAspectCheckbox: HTMLInputElement = fixture.nativeElement.querySelector('#aspect-list-0-check-input');
+            let firstAspectCheckbox = getAspectCheckbox(0);
             expect(firstAspectCheckbox).toBeDefined();
             expect(firstAspectCheckbox).not.toBeNull();
+
             firstAspectCheckbox.click();
             fixture.detectChanges();
             await fixture.whenStable();
-            const clearButton: HTMLButtonElement = fixture.nativeElement.querySelector('#aspect-list-dialog-actions-clear');
+
+            const clearButton: HTMLButtonElement = getClearButton().nativeElement;
             expect(clearButton).toBeDefined();
             expect(firstAspectCheckbox.checked).toBeTruthy();
+
             clearButton.click();
             fixture.detectChanges();
             await fixture.whenStable();
-            firstAspectCheckbox = fixture.nativeElement.querySelector('#aspect-list-0-check-input');
+
+            firstAspectCheckbox = getAspectCheckbox(0);
             expect(firstAspectCheckbox.checked).toBeFalsy();
         });
 
@@ -237,7 +239,7 @@ describe('AspectListDialogComponent', () => {
                 () => {},
                 () => done()
             );
-            const cancelButton: HTMLButtonElement = fixture.nativeElement.querySelector('#aspect-list-dialog-actions-cancel');
+            const cancelButton: HTMLButtonElement = getCancelButton().nativeElement;
             expect(cancelButton).toBeDefined();
             cancelButton.click();
             fixture.detectChanges();
@@ -271,17 +273,14 @@ describe('AspectListDialogComponent', () => {
             await fixture.whenRenderingDone();
             const firstAspectCheckbox: HTMLInputElement = fixture.nativeElement.querySelector('#aspect-list-0-check-input');
             expect(firstAspectCheckbox).toBeDefined();
-            expect(firstAspectCheckbox).not.toBeNull();
             expect(firstAspectCheckbox.checked).toBeTruthy();
 
             const notCheckedAspect: HTMLInputElement = fixture.nativeElement.querySelector('#aspect-list-1-check-input');
             expect(notCheckedAspect).toBeDefined();
-            expect(notCheckedAspect).not.toBeNull();
             expect(notCheckedAspect.checked).toBeFalsy();
 
             const customAspectCheckbox: HTMLInputElement = fixture.nativeElement.querySelector('#aspect-list-2-check-input');
             expect(customAspectCheckbox).toBeDefined();
-            expect(customAspectCheckbox).not.toBeNull();
             expect(customAspectCheckbox.checked).toBeTruthy();
         });
 
@@ -297,14 +296,16 @@ describe('AspectListDialogComponent', () => {
             fixture.detectChanges();
             await fixture.whenStable();
 
-            const applyButton = fixture.nativeElement.querySelector('#aspect-list-dialog-actions-apply');
-
-            fixture.nativeElement.querySelector('#aspect-list-dialog-actions-clear').click();
+            getClearButton().nativeElement.click();
 
             fixture.detectChanges();
             await fixture.whenStable();
 
-            expect(applyButton.disabled).toBe(false);
+            expect(getApplyButton().nativeElement.disabled).toBe(false);
+        });
+
+        it('should announce the amount of selected aspects', () => {
+            expect(testingUtils.getByCSS('#aspect-list-dialog-counter').nativeElement.getAttribute('aria-live')).toBe('polite');
         });
     });
 

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

@@ -83,7 +83,7 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei
         .adf-aspect-property-table-column-title,
         .adf-aspect-property-table-column-data-type {
             font-size: 12px;
-            color: var(--adf-theme-foreground-text-color-054);
+            color: var(--adf-theme-foreground-text-color-064);
         }
 
         .adf-aspect-property-table-column {

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

@@ -17,7 +17,6 @@
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NodesApiService } from '../common/services/nodes-api.service';
-import { ContentTestingModule } from '../testing/content.testing.module';
 import { AspectListComponent } from './aspect-list.component';
 import { AspectListService, CustomAspectsWhere, StandardAspectsWhere } from './services/aspect-list.service';
 import { EMPTY, of } from 'rxjs';
@@ -29,6 +28,7 @@ import { MatTableHarness } from '@angular/material/table/testing';
 import { MatCheckboxHarness } from '@angular/material/checkbox/testing';
 import { MatProgressSpinnerHarness } from '@angular/material/progress-spinner/testing';
 import { CustomAspectPaging } from './interfaces/custom-aspect-paging.interface';
+import { provideApiTesting } from '../testing/providers';
 
 const aspectListMock: AspectEntry[] = [
     {
@@ -125,8 +125,8 @@ describe('AspectListComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [ContentTestingModule, AspectListComponent],
-            providers: [AspectListService]
+            imports: [AspectListComponent],
+            providers: [provideApiTesting()]
         });
 
         fixture = TestBed.createComponent(AspectListComponent);

lib/content-services/src/lib/aspect-list/services/dialog-aspect-list.service.spec.ts

@@ -15,7 +15,6 @@
  * limitations under the License.
  */
 
-import { ContentTestingModule } from '../../testing/content.testing.module';
 import { DialogAspectListService } from './dialog-aspect-list.service';
 import { AspectListDialogComponent } from '../aspect-list-dialog.component';
 import { AspectListDialogComponentData } from '../aspect-list-dialog-data.interface';
@@ -24,6 +23,7 @@ import { TagService } from '../../tag/services/tag.service';
 import { TestBed } from '@angular/core/testing';
 import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
 import { Observable, Subject } from 'rxjs';
+import { provideApiTesting } from '../../testing/providers';
 
 describe('DialogAspectListService', () => {
     let dialogAspectListService: DialogAspectListService;
@@ -31,7 +31,7 @@ describe('DialogAspectListService', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [ContentTestingModule]
+            providers: [provideApiTesting()]
         });
         dialogAspectListService = TestBed.inject(DialogAspectListService);
         dialog = TestBed.inject(MatDialog);

lib/content-services/src/lib/aspect-list/services/node-aspect.service.spec.ts

@@ -19,7 +19,6 @@ import { Node } from '@alfresco/js-api';
 import { TestBed } from '@angular/core/testing';
 import { NodesApiService } from '../../common/services/nodes-api.service';
 import { EMPTY, of } from 'rxjs';
-import { ContentTestingModule } from '../../testing/content.testing.module';
 import { NodeAspectService } from './node-aspect.service';
 import { DialogAspectListService } from './dialog-aspect-list.service';
 import { CardViewContentUpdateService } from '../../common/services/card-view-content-update.service';
@@ -32,9 +31,7 @@ describe('NodeAspectService', () => {
     let cardViewContentUpdateService: CardViewContentUpdateService;
 
     beforeEach(() => {
-        TestBed.configureTestingModule({
-            imports: [ContentTestingModule]
-        });
+        TestBed.configureTestingModule({});
         dialogAspectListService = TestBed.inject(DialogAspectListService);
         nodeAspectService = TestBed.inject(NodeAspectService);
         nodeApiService = TestBed.inject(NodesApiService);

lib/content-services/src/lib/assets/images/custom_filter.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 4C21 3.448 20.553 3 20 3H4C3.447 3 3 3.448 3 4V7C3 7.13 3.027 7.26 3.077 7.382C3.128 7.505 3.201 7.615 3.294 7.707L9 13.413V19.999C9 20.01 9.006 20.018 9.006 20.029C9.008 20.096 9.03 20.16 9.046 20.226C9.061 20.291 9.07 20.357 9.097 20.416C9.102 20.426 9.1 20.437 9.105 20.446C9.152 20.54 9.214 20.622 9.284 20.694C9.298 20.709 9.316 20.719 9.331 20.732C9.403 20.797 9.481 20.849 9.567 20.891C9.596 20.905 9.625 20.918 9.656 20.929C9.766 20.97 9.88 20.998 9.998 20.998H10C10.118 20.998 10.236 20.97 10.351 20.927C10.37 20.92 10.389 20.915 10.408 20.907C10.421 20.901 10.434 20.899 10.447 20.893L14.447 18.893C14.492 18.87 14.521 18.832 14.561 18.804C14.62 18.763 14.68 18.726 14.729 18.673C14.773 18.625 14.802 18.569 14.836 18.514C14.869 18.46 14.906 18.41 14.929 18.349C14.955 18.281 14.961 18.21 14.972 18.137C14.979 18.089 15 18.047 15 17.998V13.412L20.706 7.706C20.799 7.614 20.872 7.503 20.923 7.38C20.974 7.258 21 7.128 21 6.998V4.48C21 4.395 20.972 4.318 20.951 4.239C20.971 4.16 21 4.083 21 3.998V4ZM13.294 12.292C13.201 12.384 13.128 12.495 13.077 12.618C13.026 12.74 13 12.87 13 13V17.382L11 18.382V13C11 12.87 10.974 12.74 10.923 12.618C10.872 12.495 10.799 12.385 10.706 12.292L5 6.586V5H19V6.586L13.294 12.292Z" fill="currentColor"/>
+</svg>

lib/content-services/src/lib/assets/images/custom_filter_filled.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 4C21 3.448 20.553 3 20 3H4C3.447 3 3 3.448 3 4V7C3 7.13 3.027 7.26 3.077 7.382C3.128 7.505 3.201 7.615 3.294 7.707L9 13.413V19.999C9 20.01 9.006 20.018 9.006 20.029C9.008 20.096 9.03 20.16 9.046 20.226C9.061 20.291 9.07 20.357 9.097 20.416C9.102 20.426 9.1 20.437 9.105 20.446C9.152 20.54 9.214 20.622 9.284 20.694C9.298 20.709 9.316 20.719 9.331 20.732C9.403 20.797 9.481 20.849 9.567 20.891C9.596 20.905 9.625 20.918 9.656 20.929C9.766 20.97 9.88 20.998 9.998 20.998H10C10.118 20.998 10.236 20.97 10.351 20.927C10.37 20.92 10.389 20.915 10.408 20.907C10.421 20.901 10.434 20.899 10.447 20.893L14.447 18.893C14.492 18.87 14.521 18.832 14.561 18.804C14.62 18.763 14.68 18.726 14.729 18.673C14.773 18.625 14.802 18.569 14.836 18.514C14.869 18.46 14.906 18.41 14.929 18.349C14.955 18.281 14.961 18.21 14.972 18.137C14.979 18.089 15 18.047 15 17.998V13.412L20.706 7.706C20.799 7.614 20.872 7.503 20.923 7.38C20.974 7.258 21 7.128 21 6.998V4.48C21 4.395 20.972 4.318 20.951 4.239C20.971 4.16 21 4.083 21 3.998V4ZM13.294 12.292C13.201 12.384 13.128 12.495 13.077 12.618C13.026 12.74 13 12.87 13 13V17.382L11 18.382V13C11 12.87 10.974 12.74 10.923 12.618C10.872 12.495 10.799 12.385 10.706 12.292L5 6.586V5H19V6.586L13.294 12.292Z" fill="currentColor"/>
+<path d="M4.5 7.5V4.5H19.5V7.5L14 13V17.1906L10 19.5V13L4.5 7.5Z" fill="currentColor"/>
+</svg>

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

@@ -13,12 +13,8 @@
         [attr.aria-label]="'BREADCRUMB.ARIA-LABEL.DROPDOWN' | translate"
     >
         <div class="adf-breadcrumb-dropdown-trigger-icon">
-            <mat-icon [class.adf-isRoot]="!hasPreviousNodes()">folder</mat-icon>
-            <mat-icon
-                [class.adf-isRoot]="!hasPreviousNodes()"
-                class="adf-breadcrumb-dropdown-trigger-arrow"
-                >arrow_drop_down</mat-icon
-            >
+            <mat-icon [class.adf-isRoot]="!hasPreviousNodes()" adf-icon="folder" />
+            <mat-icon [class.adf-isRoot]="!hasPreviousNodes()" class="adf-breadcrumb-dropdown-trigger-arrow" adf-icon="arrow_drop_down" />
         </div>
     </button>
 
@@ -60,9 +56,7 @@
             {{ (selectedRowItemsCount < 1 ? item.name : 'BREADCRUMB.HEADER.SELECTED') | translate: { count: selectedRowItemsCount } }}
         </div>
 
-        <mat-icon class="adf-breadcrumb-item-chevron" *ngIf="!last">
-            chevron_right
-        </mat-icon>
+        <mat-icon class="adf-breadcrumb-item-chevron" *ngIf="!last" adf-icon="chevron_right" />
     </div>
 </nav>
 

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

@@ -5,7 +5,7 @@
     font-size: var(--theme-body-1-font-size);
     font-weight: 600;
     letter-spacing: -0.2px;
-    color: var(--adf-theme-foreground-text-color-054);
+    color: var(--adf-theme-foreground-text-color-064);
     overflow: hidden;
 
     &-container {
@@ -75,7 +75,7 @@
         font-weight: 600;
         letter-spacing: -0.2px;
         text-align: left;
-        color: var(--adf-theme-foreground-text-color-054);
+        color: var(--adf-theme-foreground-text-color-064);
         flex: 0 1 auto;
         min-width: 35px;
         margin-top: auto;

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

@@ -15,14 +15,16 @@
  * limitations under the License.
  */
 
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { Node } from '@alfresco/js-api';
 import { fakeNodeWithCreatePermission } from '../mock';
 import { DocumentListComponent, DocumentListService } from '../document-list';
 import { BreadcrumbComponent } from './breadcrumb.component';
-import { ContentTestingModule } from '../testing/content.testing.module';
 import { of } from 'rxjs';
+import { NoopAuthModule } from '@alfresco/adf-core';
+import { SimpleChange } from '@angular/core';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
+import { TranslateService } from '@ngx-translate/core';
 
 describe('Breadcrumb', () => {
     let component: BreadcrumbComponent;
@@ -32,19 +34,22 @@ describe('Breadcrumb', () => {
         isCustomSourceService: false
     });
     let documentListComponent: DocumentListComponent;
+    let liveAnnouncer: LiveAnnouncer;
+    let translateService: TranslateService;
 
     const getBreadcrumbActionText = (): string => fixture.debugElement.nativeElement.querySelector('.adf-breadcrumb-item-current').textContent.trim();
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [ContentTestingModule],
-            schemas: [CUSTOM_ELEMENTS_SCHEMA],
+            imports: [NoopAuthModule],
             providers: [{ provide: DocumentListService, useValue: documentListService }]
         });
         fixture = TestBed.createComponent(BreadcrumbComponent);
         component = fixture.componentInstance;
         documentListComponent = TestBed.createComponent<DocumentListComponent>(DocumentListComponent).componentInstance;
         documentListService = TestBed.inject(DocumentListService);
+        liveAnnouncer = TestBed.inject(LiveAnnouncer);
+        translateService = TestBed.inject(TranslateService);
     });
 
     afterEach(() => {
@@ -61,7 +66,7 @@ describe('Breadcrumb', () => {
     it('should root be present as default node if the path is null', () => {
         component.root = 'default';
         component.folderNode = fakeNodeWithCreatePermission;
-        component.ngOnChanges();
+        component.ngOnChanges({});
 
         expect(component.route[0].name).toBe('default');
     });
@@ -116,7 +121,25 @@ describe('Breadcrumb', () => {
                 documentListComponent.DEFAULT_PAGINATION,
                 documentListComponent.includeFields,
                 documentListComponent.where,
-                documentListComponent.orderBy
+                documentListComponent.orderBy,
+                undefined
+            );
+        });
+
+        it('should update document list with filters param for recent files when filters are provided', () => {
+            const node = { id: '-id-', name: 'name' };
+            component.target = documentListComponent;
+            documentListComponent.filters = ['filter1', 'filter2'];
+
+            component.onRoutePathClick(node, null);
+
+            expect(documentListService.loadFolderByNodeId).toHaveBeenCalledWith(
+                node.id,
+                documentListComponent.DEFAULT_PAGINATION,
+                documentListComponent.includeFields,
+                documentListComponent.where,
+                documentListComponent.orderBy,
+                documentListComponent.filters
             );
         });
 
@@ -297,7 +320,7 @@ describe('Breadcrumb', () => {
             return transformNode;
         };
         component.folderNode = node;
-        component.ngOnChanges();
+        component.ngOnChanges({});
         expect(component.route.length).toBe(4);
         expect(component.route[3].id).toBe('test-id');
         expect(component.route[3].name).toBe('test-name');
@@ -314,7 +337,7 @@ describe('Breadcrumb', () => {
             path: { elements: [{ id: 'element-1-id', name: 'element-1-name' }] }
         } as Node;
 
-        component.ngOnChanges();
+        component.ngOnChanges({});
         fixture.detectChanges();
 
         expect(getBreadcrumbActionText()).toEqual('test-name');
@@ -324,4 +347,15 @@ describe('Breadcrumb', () => {
 
         expect(getBreadcrumbActionText()).toEqual('BREADCRUMB.HEADER.SELECTED');
     });
+
+    it('should announce number of selected items when selectedRowItemsCount changes', () => {
+        const change = new SimpleChange(null, 10, true);
+        spyOn(liveAnnouncer, 'announce');
+        spyOn(translateService, 'instant').and.callThrough();
+
+        component.ngOnChanges({ selectedRowItemsCount: change });
+
+        expect(translateService.instant).toHaveBeenCalledWith('BREADCRUMB.HEADER.SELECTED', { count: 10 });
+        expect(liveAnnouncer.announce).toHaveBeenCalledWith('BREADCRUMB.HEADER.SELECTED');
+    });
 });

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

@@ -15,18 +15,31 @@
  * limitations under the License.
  */
 
-import { Component, DestroyRef, EventEmitter, inject, Input, OnChanges, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core';
+import {
+    Component,
+    DestroyRef,
+    EventEmitter,
+    inject,
+    Input,
+    OnChanges,
+    OnInit,
+    Output,
+    SimpleChanges,
+    ViewChild,
+    ViewEncapsulation
+} from '@angular/core';
 import { MatSelect, MatSelectModule } from '@angular/material/select';
 import { Node, PathElement } from '@alfresco/js-api';
 import { DocumentListComponent } from '../document-list/components/document-list.component';
 import { CommonModule } from '@angular/common';
-import { MatIconModule } from '@angular/material/icon';
-import { TranslatePipe } from '@ngx-translate/core';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { IconModule } from '@alfresco/adf-core';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
 
 @Component({
     selector: 'adf-breadcrumb',
-    imports: [CommonModule, MatIconModule, TranslatePipe, MatSelectModule],
+    imports: [CommonModule, IconModule, TranslatePipe, MatSelectModule],
     templateUrl: './breadcrumb.component.html',
     styleUrls: ['./breadcrumb.component.scss'],
     encapsulation: ViewEncapsulation.None,
@@ -85,6 +98,8 @@ export class BreadcrumbComponent implements OnInit, OnChanges {
     route: PathElement[] = [];
 
     private readonly destroyRef = inject(DestroyRef);
+    private readonly liveAnnouncer = inject(LiveAnnouncer);
+    private readonly translationService = inject(TranslateService);
 
     get hasRoot(): boolean {
         return !!this.root;
@@ -109,8 +124,13 @@ export class BreadcrumbComponent implements OnInit, OnChanges {
         }
     }
 
-    ngOnChanges(): void {
+    ngOnChanges(changes: SimpleChanges): void {
         this.recalculateNodes();
+
+        if (changes['selectedRowItemsCount'] && changes['selectedRowItemsCount'].currentValue > 0) {
+            const msg = this.translationService.instant('BREADCRUMB.HEADER.SELECTED', { count: changes['selectedRowItemsCount'].currentValue });
+            this.liveAnnouncer.announce(msg);
+        }
     }
 
     protected recalculateNodes(): void {

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

@@ -11,10 +11,10 @@
         [attr.aria-haspopup]="hasPreviousNodes() ? 'true' : null"
         [attr.aria-expanded]="dropdown?.panelOpen || false"
         data-automation-id="dropdown-breadcrumb-trigger">
-        <mat-icon class="adf-dropdown-breadcrumb-icon" [class.adf-isRoot]="!hasPreviousNodes()">folder</mat-icon>
+        <mat-icon class="adf-dropdown-breadcrumb-icon" [class.adf-isRoot]="!hasPreviousNodes()" adf-icon="folder" />
     </button>
 
-    <mat-icon class="adf-dropdown-breadcrumb-icon adf-dropdown-breadcrumb-item-chevron">chevron_right</mat-icon>
+    <mat-icon class="adf-dropdown-breadcrumb-icon adf-dropdown-breadcrumb-item-chevron" adf-icon="chevron_right" />
 
     <div class="adf-dropdown-breadcrumb-path">
         <mat-select

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

@@ -10,7 +10,7 @@ $dropdown-horizontal-offset: 30px;
         font-size: var(--theme-body-1-font-size);
         font-weight: 600;
         letter-spacing: -0.2px;
-        color: var(--adf-theme-foreground-text-color-054);
+        color: var(--adf-theme-foreground-text-color-064);
         overflow: hidden;
         margin-top: 10px;
 
@@ -37,7 +37,6 @@ $dropdown-horizontal-offset: 30px;
 
         &:focus {
             color: var(--theme-primary-color);
-            outline: none;
         }
     }
 

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

@@ -15,26 +15,26 @@
  * limitations under the License.
  */
 
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { fakeNodeWithCreatePermission } from '../mock';
 import { DocumentListComponent, DocumentListService } from '../document-list';
 import { DropdownBreadcrumbComponent } from './dropdown-breadcrumb.component';
-import { ContentTestingModule } from '../testing/content.testing.module';
 import { of } from 'rxjs';
+import { NoopAuthModule } from '@alfresco/adf-core';
 
 describe('DropdownBreadcrumb', () => {
     let component: DropdownBreadcrumbComponent;
     let fixture: ComponentFixture<DropdownBreadcrumbComponent>;
     let documentList: DocumentListComponent;
-    let documentListService: DocumentListService = jasmine.createSpyObj({ loadFolderByNodeId: of(''), isCustomSourceService: false });
+    let documentListService: DocumentListService;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [ContentTestingModule],
-            schemas: [CUSTOM_ELEMENTS_SCHEMA],
-            providers: [{ provide: DocumentListService, useValue: documentListService }]
+            imports: [NoopAuthModule],
+            providers: [
+                { provide: DocumentListService, useValue: jasmine.createSpyObj({ loadFolderByNodeId: of(''), isCustomSourceService: false }) }
+            ]
         });
         fixture = TestBed.createComponent(DropdownBreadcrumbComponent);
         component = fixture.componentInstance;
@@ -54,7 +54,7 @@ describe('DropdownBreadcrumb', () => {
 
     const triggerComponentChange = (fakeNodeData) => {
         component.folderNode = fakeNodeData;
-        component.ngOnChanges();
+        component.ngOnChanges({});
         fixture.detectChanges();
     };
 
@@ -113,7 +113,14 @@ describe('DropdownBreadcrumb', () => {
         await fixture.whenStable();
         clickOnTheFirstOption();
 
-        expect(documentListService.loadFolderByNodeId).toHaveBeenCalledWith('1', documentList.DEFAULT_PAGINATION, undefined, undefined, null);
+        expect(documentListService.loadFolderByNodeId).toHaveBeenCalledWith(
+            '1',
+            documentList.DEFAULT_PAGINATION,
+            undefined,
+            undefined,
+            null,
+            undefined
+        );
     });
 
     it('should open the selectBox when clicking on the folder icon', (done) => {

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

@@ -20,12 +20,12 @@ import { MatSelect, MatSelectModule } from '@angular/material/select';
 import { PathElement, Node } from '@alfresco/js-api';
 import { BreadcrumbComponent } from './breadcrumb.component';
 import { CommonModule } from '@angular/common';
-import { MatIconModule } from '@angular/material/icon';
 import { TranslatePipe } from '@ngx-translate/core';
+import { IconModule } from '@alfresco/adf-core';
 
 @Component({
     selector: 'adf-dropdown-breadcrumb',
-    imports: [CommonModule, MatIconModule, MatSelectModule, TranslatePipe],
+    imports: [CommonModule, IconModule, MatSelectModule, TranslatePipe],
     templateUrl: './dropdown-breadcrumb.component.html',
     styleUrls: ['./dropdown-breadcrumb.component.scss'],
     encapsulation: ViewEncapsulation.None,
@@ -33,10 +33,10 @@ import { TranslatePipe } from '@ngx-translate/core';
 })
 export class DropdownBreadcrumbComponent extends BreadcrumbComponent implements OnChanges {
     @ViewChild('dropdown')
-    dropdown: MatSelect;
+    declare dropdown: MatSelect;
 
     currentNode: PathElement;
-    previousNodes: PathElement[];
+    declare previousNodes: PathElement[];
 
     /**
      * Calculate the current and previous nodes from the route array

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

@@ -1,13 +1,20 @@
 <div class="adf-categories-management">
-    <div *ngIf="categoryNameControlVisible" class="adf-category-name-field">
-        <input #categoryNameInput
-            [formControl]="categoryNameControl"
-            (keyup.enter)="addCategory()"
-            placeholder="{{'CATEGORIES_MANAGEMENT.CATEGORIES_SEARCH_PLACEHOLDER' | translate }}"
-            adf-auto-focus
+    @if (categoryNameControlVisible) {
+        <mat-form-field class="adf-category-name-field">
+            <mat-label>{{ 'CATEGORIES_MANAGEMENT.CATEGORIES_SEARCH_PLACEHOLDER' | translate }}</mat-label>
+            <input
+                matInput
+                #categoryNameInput
+                autocomplete="off"
+                [formControl]="categoryNameControl"
+                (keyup.enter)="addCategory()"
+                adf-auto-focus
             />
-        <mat-error *ngIf="categoryNameControl.invalid && categoryNameControl.touched">{{ categoryNameErrorMessageKey | translate }}</mat-error>
-    </div>
+            <mat-error *ngIf="categoryNameControl.invalid && categoryNameControl.touched">
+                {{ categoryNameErrorMessageKey | translate }}
+            </mat-error>
+        </mat-form-field>
+    }
     <div class="adf-categories-list" *ngIf="categories?.length > 0" [class.adf-categories-list-fixed]="!categoryNameControlVisible">
         <span
             *ngFor="let category of categories"
@@ -20,7 +27,7 @@
                 (click)="removeCategory(category)"
                 [attr.title]="removeCategoryTitle | translate"
                 [disabled]="disableRemoval">
-                <mat-icon>remove</mat-icon>
+                <mat-icon adf-icon="remove" />
             </button>
         </span>
     </div>

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

@@ -1,28 +1,11 @@
 @use '../../mat-selectors.scss' as ms;
 
 .adf-categories-management {
+    margin: 5px 0;
+
     .adf-category-name-field {
         display: flex;
         flex-direction: column;
-        margin-right: 12px;
-
-        input {
-            background: var(--adf-metadata-buttons-background-color);
-            border-radius: 12px;
-            padding: 7px 8px;
-            border: none;
-            outline: none;
-            font: inherit;
-            color: currentcolor;
-            margin: 0;
-            vertical-align: bottom;
-            text-align: inherit;
-            box-sizing: content-box;
-        }
-
-        #{ms.$mat-form-field-error} {
-            padding-top: 5px;
-        }
     }
 
     .adf-assigned-categories {

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

@@ -22,7 +22,6 @@ import { MatError } from '@angular/material/form-field';
 import { MatList } from '@angular/material/list';
 import { By } from '@angular/platform-browser';
 import { of, Subject } from 'rxjs';
-import { ContentTestingModule } from '../../testing/content.testing.module';
 import { CategoriesManagementMode } from './categories-management-mode';
 import { CategoryService } from '../services/category.service';
 import { CategoriesManagementComponent } from './categories-management.component';
@@ -47,7 +46,7 @@ describe('CategoriesManagementComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [ContentTestingModule, CategoriesManagementComponent],
+            imports: [CategoriesManagementComponent],
             providers: [
                 {
                     provide: CategoryService,
@@ -119,7 +118,7 @@ describe('CategoriesManagementComponent', () => {
      * @returns error text
      */
     function getFirstError(): string {
-        return fixture.debugElement.query(By.directive(MatError)).nativeElement.textContent;
+        return fixture.debugElement.query(By.directive(MatError)).nativeElement.textContent.trim();
     }
 
     /**

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

@@ -39,10 +39,11 @@ import { TranslatePipe } from '@ngx-translate/core';
 import { AutoFocusDirective } from '../../directives';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MatInputModule } from '@angular/material/input';
+import { IconModule } from '@alfresco/adf-core';
 
 interface CategoryNameControlErrors {
     duplicatedExistingCategory?: boolean;
@@ -62,9 +63,10 @@ interface CategoryNameControlErrors {
         ReactiveFormsModule,
         MatFormFieldModule,
         MatButtonModule,
-        MatIconModule,
+        IconModule,
         MatListModule,
-        MatProgressSpinnerModule
+        MatProgressSpinnerModule,
+        MatInputModule
     ],
     templateUrl: './categories-management.component.html',
     styleUrls: ['./categories-management.component.scss'],

lib/content-services/src/lib/common/services/card-view-content-update.service.ts

@@ -19,12 +19,11 @@ import { UpdateNotification, CardViewBaseItemModel, CardViewUpdateService } from
 import { Node } from '@alfresco/js-api';
 import { Injectable } from '@angular/core';
 import { Subject } from 'rxjs';
-import { BaseCardViewContentUpdate } from '../../interfaces/base-card-view-content-update.interface';
 
 @Injectable({
     providedIn: 'root'
 })
-export class CardViewContentUpdateService implements BaseCardViewContentUpdate {
+export class CardViewContentUpdateService {
     itemUpdated$ = new Subject<UpdateNotification>();
     updatedAspect$ = new Subject<Node>();
 

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

@@ -21,7 +21,7 @@
                 [attr.title]="'CORE.METADATA.ACTIONS.EDIT_ASPECTS' | translate"
                 [attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.EDIT_ASPECTS' | translate"
                 data-automation-id="meta-data-card-edit-aspect">
-                <mat-icon>menu</mat-icon>
+                <mat-icon adf-icon="menu" />
             </button>
         </div>
     </mat-card-footer>

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

@@ -17,7 +17,7 @@
         max-height: 100%;
 
         button {
-            color: var(--adf-theme-foreground-text-color-054);
+            color: var(--adf-theme-foreground-text-color-064);
 
             &:hover {
                 color: var(--adf-theme-foreground-text-color-087);

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

@@ -30,7 +30,7 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { CategoryService } from '../../../category';
 import { TagService } from '../../../tag';
 import { PropertyDescriptorsService } from '../../public-api';
-import { ContentTestingModule } from '../../../testing/content.testing.module';
+import { NoopAuthModule } from '@alfresco/adf-core';
 
 describe('ContentMetadataCardComponent', () => {
     let component: ContentMetadataCardComponent;
@@ -47,7 +47,7 @@ describe('ContentMetadataCardComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [ContentTestingModule, MatDialogModule, MatSnackBarModule, ContentMetadataCardComponent]
+            imports: [NoopAuthModule, MatDialogModule, MatSnackBarModule, ContentMetadataCardComponent]
         });
         fixture = TestBed.createComponent(ContentMetadataCardComponent);
         contentMetadataService = TestBed.inject(ContentMetadataService);

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

@@ -26,12 +26,12 @@ import { CommonModule } from '@angular/common';
 import { MatCardModule } from '@angular/material/card';
 import { ContentMetadataComponent } from '../content-metadata/content-metadata.component';
 import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
 import { TranslatePipe } from '@ngx-translate/core';
+import { IconModule } from '@alfresco/adf-core';
 
 @Component({
     selector: 'adf-content-metadata-card',
-    imports: [CommonModule, MatCardModule, ContentMetadataComponent, MatButtonModule, MatIconModule, TranslatePipe],
+    imports: [CommonModule, MatCardModule, ContentMetadataComponent, MatButtonModule, IconModule, TranslatePipe],
     templateUrl: './content-metadata-card.component.html',
     styleUrls: ['./content-metadata-card.component.scss'],
     encapsulation: ViewEncapsulation.None,

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

@@ -15,15 +15,15 @@
  * limitations under the License.
  */
 
+import { IconModule } from '@alfresco/adf-core';
 import { CommonModule } from '@angular/common';
 import { Component, Input, ViewEncapsulation } from '@angular/core';
 import { MatExpansionModule } from '@angular/material/expansion';
-import { MatIconModule } from '@angular/material/icon';
 import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
     standalone: true,
-    imports: [CommonModule, MatIconModule, MatExpansionModule, TranslatePipe],
+    imports: [CommonModule, IconModule, MatExpansionModule, TranslatePipe],
     selector: 'adf-content-metadata-header',
     encapsulation: ViewEncapsulation.None,
     styles: [
@@ -46,7 +46,7 @@ import { TranslatePipe } from '@ngx-translate/core';
     ],
     template: `
         <ng-container>
-            <mat-icon>{{ expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>
+            <mat-icon [adf-icon]="expanded ? 'expand_more' : 'chevron_right'" />
             <mat-panel-title *ngIf="title" class="adf-metadata-properties-title" [title]="title | translate">{{ title | translate }}</mat-panel-title>
             <ng-content />
         </ng-container>

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

@@ -22,7 +22,7 @@
                     [attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.EDIT' | translate: { sectionName: ('CORE.METADATA.BASIC.HEADER' | translate) }"
                     data-automation-id="meta-data-general-info-edit"
                     class="adf-edit-icon-buttons">
-                    <mat-icon>mode_edit</mat-icon>
+                    <mat-icon adf-icon="mode_edit" />
                 </button>
                 <div *ngIf="isPanelEditing(DefaultPanels.PROPERTIES)" class="adf-metadata-action-buttons">
                     <button
@@ -31,7 +31,7 @@
                         (click)="cancelGroupEditing(DefaultPanels.PROPERTIES, $event)"
                         data-automation-id="reset-metadata"
                         class="adf-metadata-action-buttons-clear">
-                        <mat-icon>clear</mat-icon>
+                        <mat-icon adf-icon="clear" />
                     </button>
                     <button
                         mat-icon-button
@@ -40,7 +40,7 @@
                         color="primary"
                         data-automation-id="save-general-info-metadata"
                         [disabled]="!hasMetadataChanged || invalidProperties.size > 0">
-                        <mat-icon>check</mat-icon>
+                        <mat-icon adf-icon="check" />
                     </button>
                 </div>
             </adf-content-metadata-header>
@@ -77,7 +77,7 @@
                         [attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.EDIT' | translate: { sectionName: ('METADATA.BASIC.TAGS' | translate) }"
                         data-automation-id="showing-tag-input-button"
                         class="adf-edit-icon-buttons">
-                        <mat-icon>mode_edit</mat-icon>
+                        <mat-icon adf-icon="mode_edit" />
                     </button>
                     <div *ngIf="isPanelEditing(DefaultPanels.TAGS)" class="adf-metadata-action-buttons">
                         <button
@@ -86,7 +86,7 @@
                             (click)="cancelGroupEditing(DefaultPanels.TAGS, $event)"
                             data-automation-id="reset-tags-metadata"
                             class="adf-metadata-action-buttons-clear">
-                            <mat-icon>clear</mat-icon>
+                            <mat-icon adf-icon="clear" />
                         </button>
                         <button
                             mat-icon-button
@@ -95,7 +95,7 @@
                             color="primary"
                             data-automation-id="save-tags-metadata"
                             [disabled]="!hasMetadataChanged">
-                            <mat-icon>check</mat-icon>
+                            <mat-icon adf-icon="check" />
                         </button>
                     </div>
                 </adf-content-metadata-header>
@@ -141,7 +141,7 @@
                         [attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.EDIT' | translate: { sectionName: ('CATEGORIES_MANAGEMENT.CATEGORIES_TITLE' | translate) }"
                         data-automation-id="meta-data-categories-edit"
                         class="adf-categories-button adf-edit-icon-buttons">
-                        <mat-icon>mode_edit</mat-icon>
+                        <mat-icon adf-icon="mode_edit" />
                     </button>
                     <div *ngIf="isPanelEditing(DefaultPanels.CATEGORIES)" class="adf-metadata-action-buttons">
                         <button
@@ -150,7 +150,7 @@
                             (click)="cancelGroupEditing(DefaultPanels.CATEGORIES, $event)"
                             data-automation-id="reset-metadata"
                             class="adf-metadata-action-buttons-clear">
-                            <mat-icon>clear</mat-icon>
+                            <mat-icon adf-icon="clear" />
                         </button>
                         <button
                             mat-icon-button
@@ -159,7 +159,7 @@
                             color="primary"
                             data-automation-id="save-categories-metadata"
                             [disabled]="!hasMetadataChanged">
-                            <mat-icon>check</mat-icon>
+                            <mat-icon adf-icon="check" />
                         </button>
                     </div>
                 </adf-content-metadata-header>
@@ -223,7 +223,7 @@
                             data-automation-id="meta-data-card-toggle-edit"
                             class="adf-edit-icon-buttons"
                             (click)="toggleGroupEditing(group.title, $event)">
-                            <mat-icon>mode_edit</mat-icon>
+                            <mat-icon adf-icon="mode_edit" />
                         </button>
                         <div class="adf-metadata-action-buttons" *ngIf="group.editable && isPanelEditing(group.title)">
                             <button
@@ -232,7 +232,7 @@
                                 (click)="cancelGroupEditing(group.title, $event)"
                                 data-automation-id="reset-metadata"
                                 class="adf-metadata-action-buttons-clear">
-                                <mat-icon>clear</mat-icon>
+                                <mat-icon adf-icon="clear" />
                             </button>
                             <button
                                 mat-icon-button
@@ -241,23 +241,23 @@
                                 color="primary"
                                 data-automation-id="save-metadata"
                                 [disabled]="!hasMetadataChanged || invalidProperties.size > 0">
-                                <mat-icon>check</mat-icon>
+                                <mat-icon adf-icon="check" />
                             </button>
                         </div>
                     </adf-content-metadata-header>
                 </mat-expansion-panel-header>
-                <div *ngIf="!showGroup(group) && group.editable && editedPanelTitle !== group.title" class="adf-metadata-no-item-added">
+                <div *ngIf="!showGroup(group) && !displayEmpty && group.editable && editedPanelTitle !== group.title" class="adf-metadata-no-item-added">
                     {{ 'METADATA.BASIC.NO_ITEMS_MESSAGE' | translate : { groupTitle: group.title | translate } }}
                 </div>
                 <adf-card-view
+                    class="adf-metadata-properties-expansion-panel"
                     (keydown)="keyDown($event)"
                     [properties]="group.properties"
                     [editable]="!readOnly && group.editable && isPanelEditing(group.title)"
                     [displayEmpty]="displayEmpty"
                     [copyToClipboardAction]="copyToClipboardAction"
                     [useChipsForMultiValueProperty]="useChipsForMultiValueProperty"
-                    [multiValueSeparator]="multiValueSeparator"
-                    [displayLabelForChips]="true" />
+                    [multiValueSeparator]="multiValueSeparator" />
             </mat-expansion-panel>
         </div>
     </ng-container>

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

@@ -10,21 +10,8 @@ $panel-properties-height: 56px !default;
             border-radius: 12px;
             margin: 12px;
 
-            adf-card-view-textitem {
-                #{ms.$mat-form-field-subscript-wrapper} {
-                    display: none;
-                }
-
-                #{ms.$mat-form-field-infix} {
-                    padding-bottom: 0;
-                }
-            }
-
             .adf-property-list .adf-property .adf-property-field {
                 .adf-property-value:not(.adf-card-view-selectitem .adf-property-value) {
-                    margin-top: 10px;
-                    height: 32px;
-
                     &:is(textarea) {
                         padding-top: 6px;
                     }
@@ -32,7 +19,7 @@ $panel-properties-height: 56px !default;
 
                 label {
                     font-size: 19px;
-                    line-height: 20px;
+                    line-height: 24px;
                 }
             }
         }
@@ -47,21 +34,19 @@ $panel-properties-height: 56px !default;
             }
         }
 
-        #{ms.$mat-expansion-panel-body} {
-            padding-top: 16px;
+        .adf-metadata-properties-expansion-panel,
+        .adf-metadata-categories-header {
+            display: block;
+            margin-top: 16px;
+        }
 
-            input {
-                border-color: transparent;
-                width: 100%;
-
-                &:focus-visible {
-                    outline: none;
-                }
-            }
+        .adf-metadata-properties-tags,
+        .adf-metadata-no-item-added {
+            margin-top: 16px;
         }
 
         .adf-edit-icon-buttons {
-            color: var(--adf-theme-foreground-text-color-054);
+            color: var(--adf-theme-foreground-text-color-064);
         }
 
         #{ms.$mat-chip} {

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

@@ -24,7 +24,8 @@ import {
     CardViewComponent,
     NotificationService,
     UpdateNotification,
-    UnitTestingUtils
+    UnitTestingUtils,
+    NoopAuthModule
 } from '@alfresco/adf-core';
 import { NodesApiService } from '../../../common/services/nodes-api.service';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
@@ -35,7 +36,6 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { EMPTY, firstValueFrom, of, throwError } from 'rxjs';
 import { CategoriesManagementComponent, CategoriesManagementMode } from '../../../category';
 import { TagsCreatorComponent, TagsCreatorMode } from '../../../tag';
-import { ContentTestingModule } from '../../../testing/content.testing.module';
 import { PropertyGroup } from '../../interfaces/property-group.interface';
 import { PropertyDescriptorsService } from '../../services/property-descriptors.service';
 import { TagService } from '../../../tag/services/tag.service';
@@ -184,7 +184,7 @@ describe('ContentMetadataComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [ContentTestingModule, MatDialogModule, MatSnackBarModule, ContentMetadataComponent],
+            imports: [NoopAuthModule, MatDialogModule, MatSnackBarModule, ContentMetadataComponent],
             providers: [
                 {
                     provide: TagService,

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

@@ -25,6 +25,7 @@ import {
     CardViewItem,
     Chip,
     DynamicChipListComponent,
+    IconModule,
     NotificationService,
     TranslationService,
     UpdateNotification
@@ -44,7 +45,6 @@ import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatExpansionModule } from '@angular/material/expansion';
-import { MatIconModule } from '@angular/material/icon';
 import { DynamicExtensionComponent } from '@alfresco/adf-extensions';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { TagsCreatorComponent } from '../../../tag';
@@ -69,7 +69,7 @@ enum DefaultPanels {
         ContentMetadataHeaderComponent,
         MatButtonModule,
         TranslatePipe,
-        MatIconModule,
+        IconModule,
         MatChipsModule,
         CategoriesManagementComponent,
         DynamicExtensionComponent,

lib/content-services/src/lib/content-metadata/components/content-metadata/mock-data.ts

@@ -1,78 +0,0 @@
-/*!
- * @license
- * Copyright © 2005-2025 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.
- */
-
-export const mockGroupProperties = [
-    {
-        title: 'EXIF',
-        properties: [
-            {
-                label: 'Image Width',
-                value: 363,
-                key: 'properties.exif:pixelXDimension',
-                default: null,
-                editable: true,
-                clickable: false,
-                icon: '',
-                data: null,
-                type: 'int',
-                multiline: false,
-                pipes: [],
-                clickCallBack: null,
-                displayValue: 400
-            },
-            {
-                label: 'Image Height',
-                value: 400,
-                key: 'properties.exif:pixelYDimension',
-                default: null,
-                editable: true,
-                clickable: false,
-                icon: '',
-                data: null,
-                type: 'int',
-                multiline: false,
-                pipes: [],
-                clickCallBack: null,
-                displayValue: 400
-            }
-        ],
-        editable: true,
-        expanded: true
-    },
-    {
-        title: 'CUSTOM',
-        properties: [
-            {
-                label: 'Height',
-                value: 400,
-                key: 'properties.custom:abc',
-                default: null,
-                editable: true,
-                clickable: false,
-                icon: '',
-                data: null,
-                type: 'int',
-                multiline: false,
-                pipes: [],
-                clickCallBack: null,
-                displayValue: 400
-            }
-        ],
-        editable: true,
-        expanded: true
-    }
-];

lib/content-services/src/lib/content-metadata/services/content-metadata.service.spec.ts

@@ -15,11 +15,10 @@
  * limitations under the License.
  */
 
-import { AppConfigService } from '@alfresco/adf-core';
+import { AppConfigService, CardViewItem, NoopAuthModule } from '@alfresco/adf-core';
 import { ClassesApi, Node } from '@alfresco/js-api';
 import { TestBed } from '@angular/core/testing';
 import { firstValueFrom, of } from 'rxjs';
-import { ContentTestingModule } from '../../testing/content.testing.module';
 import { OrganisedPropertyGroup } from '../interfaces/content-metadata.interfaces';
 import { PropertyGroup } from '../interfaces/property-group.interface';
 import { ContentMetadataService } from './content-metadata.service';
@@ -197,7 +196,7 @@ describe('ContentMetaDataService', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [ContentTestingModule]
+            imports: [NoopAuthModule]
         });
         service = TestBed.inject(ContentMetadataService);
         contentPropertyService = TestBed.inject(ContentTypePropertiesService);
@@ -216,12 +215,10 @@ describe('ContentMetaDataService', () => {
     });
 
     it('should return the content type property', () => {
-        spyOn(contentPropertyService, 'getContentTypeCardItem').and.returnValue(of({ label: 'hello i am a weird content type' } as any));
+        spyOn(contentPropertyService, 'getContentTypeCardItem').and.returnValue(of([{ label: 'hello i am a weird content type' } as CardViewItem]));
 
-        service.getContentTypeProperty(fakeNode).subscribe((res: any) => {
-            expect(res).toBeDefined();
-            expect(res).not.toBeNull();
-            expect(res.label).toBe('hello i am a weird content type');
+        service.getContentTypeProperty(fakeNode).subscribe((res) => {
+            expect(res[0].label).toBe('hello i am a weird content type');
         });
     });
 

lib/content-services/src/lib/content-metadata/services/content-type-property.service.spec.ts

@@ -17,8 +17,7 @@
 
 import { TestBed } from '@angular/core/testing';
 import { ContentTypePropertiesService } from './content-type-property.service';
-import { CardViewItem, CardViewSelectItemModel, CardViewTextItemModel } from '@alfresco/adf-core';
-import { ContentTestingModule } from '../../testing/content.testing.module';
+import { CardViewItem, CardViewSelectItemModel, CardViewTextItemModel, NoopAuthModule } from '@alfresco/adf-core';
 import { ContentTypeService } from '../../content-type';
 import { of } from 'rxjs';
 import { Node, TypeEntry } from '@alfresco/js-api';
@@ -126,7 +125,7 @@ describe('ContentTypePropertyService', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [ContentTestingModule]
+            imports: [NoopAuthModule]
         });
         service = TestBed.inject(ContentTypePropertiesService);
         versionCompatibilityService = TestBed.inject(VersionCompatibilityService);

lib/content-services/src/lib/content-metadata/services/property-descriptors.service.spec.ts

@@ -19,18 +19,15 @@ import { TestBed } from '@angular/core/testing';
 import { PropertyDescriptorsService } from './property-descriptors.service';
 import { ClassesApi } from '@alfresco/js-api';
 import { PropertyGroup } from '../interfaces/content-metadata.interfaces';
-import { ContentTestingModule } from '../../testing/content.testing.module';
 
 describe('PropertyDescriptorLoaderService', () => {
     let service: PropertyDescriptorsService;
     let classesApi: ClassesApi;
 
     beforeEach(() => {
-        TestBed.configureTestingModule({
-            imports: [ContentTestingModule]
-        });
+        TestBed.configureTestingModule({});
         service = TestBed.inject(PropertyDescriptorsService);
-        classesApi = service['classesApi'];
+        classesApi = service.classesApi;
     });
 
     it('should load the groups passed by paramter', (done) => {

lib/content-services/src/lib/content-metadata/services/property-groups-translator.service.spec.ts

@@ -31,7 +31,6 @@ import {
     LogService,
     CardViewLongItemModel
 } from '@alfresco/adf-core';
-import { ContentTestingModule } from '../../testing/content.testing.module';
 import { Constraint, Definition, Property as PropertyBase } from '@alfresco/js-api';
 
 describe('PropertyGroupTranslatorService', () => {
@@ -44,7 +43,7 @@ describe('PropertyGroupTranslatorService', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [ContentTestingModule]
+            imports: []
         });
         logService = TestBed.inject(LogService);
         service = TestBed.inject(PropertyGroupTranslatorService);

lib/content-services/src/lib/content-metadata/services/property-groups-translator.service.ts

@@ -30,12 +30,12 @@ import {
     CardViewTextItemModel,
     DecimalNumberPipe,
     LogService,
-    MultiValuePipe,
     UserPreferencesService
 } from '@alfresco/adf-core';
 import { CardViewGroup, OrganisedPropertyGroup, Property } from '../interfaces/content-metadata.interfaces';
 import { of } from 'rxjs';
 import { Constraint, Definition, Property as PropertyBase } from '@alfresco/js-api';
+import { MultiValuePipe } from './pipes/multi-value.pipe';
 
 const D_TEXT = 'd:text';
 const D_MLTEXT = 'd:mltext';

lib/content-services/src/lib/content-node-selector/content-node-dialog.service.spec.ts

@@ -21,8 +21,8 @@ import { DocumentListService, NodeAction } from '../document-list';
 import { ContentNodeDialogService } from './content-node-dialog.service';
 import { MatDialog } from '@angular/material/dialog';
 import { Subject, of } from 'rxjs';
-import { ContentTestingModule } from '../testing/content.testing.module';
 import { SitesService } from '../common';
+import { NoopAuthModule } from '@alfresco/adf-core';
 
 const fakeNodeEntry = {
     entry: {
@@ -67,7 +67,7 @@ describe('ContentNodeDialogService', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [ContentTestingModule]
+            imports: [NoopAuthModule]
         });
         service = TestBed.inject(ContentNodeDialogService);
         documentListService = TestBed.inject(DocumentListService);
@@ -89,12 +89,12 @@ describe('ContentNodeDialogService', () => {
             isFile: false
         } as Node;
 
-        service.openLockNodeDialog(testNode).subscribe(
-            () => {},
-            (error) => {
+        service.openLockNodeDialog(testNode).subscribe({
+            next: () => {},
+            error: (error) => {
                 expect(error).toBe('OPERATION.FAIL.NODE.NO_PERMISSION');
             }
-        );
+        });
     });
 
     it('should be able to open the dialog when node has permission', () => {
@@ -103,13 +103,13 @@ describe('ContentNodeDialogService', () => {
     });
 
     it('should NOT be able to open the dialog when node has NOT permission', () => {
-        service.openCopyMoveDialog(NodeAction.CHOOSE, fakeNode, 'noperm').subscribe(
-            () => {},
-            (error) => {
+        service.openCopyMoveDialog(NodeAction.CHOOSE, fakeNode, 'noperm').subscribe({
+            next: () => {},
+            error: (error) => {
                 expect(spyOnDialogOpen).not.toHaveBeenCalled();
                 expect(JSON.parse(error.message).error.statusCode).toBe(403);
             }
-        );
+        });
     });
 
     it('should be able to open the dialog using a folder id', fakeAsync(() => {

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

@@ -15,13 +15,12 @@
  * limitations under the License.
  */
 
-import { CUSTOM_ELEMENTS_SCHEMA, DebugElement } from '@angular/core';
+import { DebugElement } from '@angular/core';
 import { ComponentFixture, fakeAsync, flush, TestBed, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { Node, NodeEntry, NodePaging, RequestScope, ResultSetPaging, SiteEntry, SitePaging, SitePagingList } from '@alfresco/js-api';
 import { of } from 'rxjs';
 import { ContentNodeSelectorPanelComponent } from './content-node-selector-panel.component';
-import { ContentTestingModule } from '../../testing/content.testing.module';
 import { DocumentListService } from '../../document-list/services/document-list.service';
 import { DocumentListComponent } from '../../document-list/components/document-list.component';
 import { CustomResourcesService } from '../../document-list/services/custom-resources.service';
@@ -31,6 +30,8 @@ import { mockSearchRequest } from '../../mock/search-query.mock';
 import { SitesService } from '../../common/services/sites.service';
 import { NodesApiService } from '../../common/services/nodes-api.service';
 import { UnitTestingUtils } from '../../../../../core/src/lib/testing/unit-testing-utils';
+import { provideRouter } from '@angular/router';
+import { NoopAuthModule } from '@alfresco/adf-core';
 
 const fakeResultSetPaging: ResultSetPaging = {
     list: {
@@ -77,15 +78,12 @@ describe('ContentNodeSelectorPanelComponent', () => {
         service.executed.next(searchResults);
     };
 
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            imports: [ContentTestingModule],
-            schemas: [CUSTOM_ELEMENTS_SCHEMA]
-        });
-    });
-
     describe('General component features', () => {
         beforeEach(async () => {
+            TestBed.configureTestingModule({
+                imports: [NoopAuthModule],
+                providers: [provideRouter([])]
+            });
             fixture = TestBed.createComponent(ContentNodeSelectorPanelComponent);
             component = fixture.componentInstance;
             component.debounceSearch = 0;

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

@@ -1,73 +1,80 @@
 <div class="adf-content-node-selector-content">
-    <mat-form-field floatPlaceholder="never"
-                    appearance="fill"
-                    class="adf-content-node-selector-content-input"
-                    subscriptSizing="dynamic"
-                    *ngIf="showSearch">
-        <mat-label>{{ 'NODE_SELECTOR.SEARCH' | translate }}</mat-label>
-        <input matInput
-            id="searchInput"
-            [formControl]="searchInput"
-            type="text"
-            [value]="searchTerm"
-            adf-auto-focus
-            data-automation-id="content-node-selector-search-input">
+    @if (showSearch) {
+        <mat-form-field floatPlaceholder="never" class="adf-content-node-selector-content-input">
+            <mat-label>{{ 'NODE_SELECTOR.SEARCH' | translate }}</mat-label>
+            <input matInput
+                id="searchInput"
+                [formControl]="searchInput"
+                type="text"
+                [value]="searchTerm"
+                adf-auto-focus
+                data-automation-id="content-node-selector-search-input">
 
+            @if (searchTerm.length > 0) {
+                <button
+                    matSuffix
+                    mat-icon-button
+                    data-automation-id="content-node-selector-search-clear"
+                    class="adf-content-node-selector-search-clear-button"
+                    (click)="clear()"
+                    [attr.aria-label]="'COMMON.CLEAR' | translate"
+                    [attr.title]="'COMMON.CLEAR' | translate"
+                >
+                    <mat-icon class="adf-content-node-selector-content-input-icon" adf-icon="clear" />
+                </button>
+            }
+            @if (searchTerm.length === 0) {
+                <mat-icon
+                    matSuffix
+                    class="adf-content-node-selector-content-input-icon"
+                    data-automation-id="content-node-selector-search-icon"
+                    adf-icon="search"
+                />
+            }
+        </mat-form-field>
+    }
+    @if (showDropdownSiteList) {
+        <adf-sites-dropdown
+            class="full-width"
+            (change)="siteChanged($event)"
+            [placeholder]="'NODE_SELECTOR.SELECT_LIBRARY'"
+            [hideMyFiles]="dropdownHideMyFiles"
+            [siteList]="dropdownSiteList"
+            [value]="startSiteGuid"
+            data-automation-id="content-node-selector-sites-combo" />
+    }
+    @if (hasCustomModels()) {
         <button
-            matSuffix
+            data-automation-id="adf-toggle-search-panel-button"
             mat-icon-button
-            *ngIf="searchTerm.length > 0"
-            data-automation-id="content-node-selector-search-clear"
-            class="adf-content-node-selector-search-clear-button"
-            (click)="clear()"
-            [attr.aria-label]="'COMMON.CLEAR' | translate"
-            [attr.title]="'COMMON.CLEAR' | translate"
-        >
-            <mat-icon class="adf-content-node-selector-content-input-icon">clear</mat-icon>
+            (click)="toggleSearchPanel()">
+            <mat-icon adf-icon="filter_list" />
+            {{ 'SEARCH.SEARCH_HEADER.TITLE' | translate }}
         </button>
-
-        <mat-icon
-            *ngIf="searchTerm.length === 0"
-            matSuffix
-            class="adf-content-node-selector-content-input-icon"
-            data-automation-id="content-node-selector-search-icon"
-            >search
-        </mat-icon>
-    </mat-form-field>
-    <adf-sites-dropdown
-        *ngIf="showDropdownSiteList"
-        class="full-width"
-        (change)="siteChanged($event)"
-        [placeholder]="'NODE_SELECTOR.SELECT_LIBRARY'"
-        [hideMyFiles]="dropdownHideMyFiles"
-        [siteList]="dropdownSiteList"
-        [value]="startSiteGuid"
-        data-automation-id="content-node-selector-sites-combo" />
-    <button *ngIf="hasCustomModels()"
-        data-automation-id="adf-toggle-search-panel-button"
-        mat-icon-button
-        (click)="toggleSearchPanel()">
-        <mat-icon>filter_list</mat-icon>
-        {{ 'SEARCH.SEARCH_HEADER.TITLE' | translate }}
-    </button>
+    }
     <div class="adf-content-node-selector-search-panel-container">
-        <adf-search-panel *ngIf="searchPanelExpanded" />
+        @if (searchPanelExpanded) {
+            <adf-search-panel />
+        }
         <div class="adf-content-node-selector-document-list-container">
     <adf-toolbar>
         <adf-toolbar-title>
-            <ng-container *ngIf="!showBreadcrumbs()">
+            @if (!showBreadcrumbs()) {
                 <h2 class="adf-search-results-label">{{ 'NODE_SELECTOR.SEARCH_RESULTS' | translate }}</h2>
-            </ng-container>
-            <adf-dropdown-breadcrumb *ngIf="showBreadcrumbs()"
-                class="adf-content-node-selector-content-breadcrumb"
-                (navigate)="clearSearch()"
-                [target]="documentList"
-                [rootId]="breadcrumbRootId"
-                [transform]="breadcrumbTransform"
-                [folderNode]="breadcrumbFolderNode"
-                [root]="breadcrumbFolderTitle"
-                data-automation-id="content-node-selector-content-breadcrumb" />
-            <ng-container *ngIf="showNodeCounter" [adf-node-counter]="getSelectedCount()" />
+            } @else {
+                <adf-dropdown-breadcrumb
+                    class="adf-content-node-selector-content-breadcrumb"
+                    (navigate)="clearSearch()"
+                    [target]="documentList"
+                    [rootId]="breadcrumbRootId"
+                    [transform]="breadcrumbTransform"
+                    [folderNode]="breadcrumbFolderNode"
+                    [root]="breadcrumbFolderTitle"
+                    data-automation-id="content-node-selector-content-breadcrumb" />
+            }
+            @if (showNodeCounter) {
+                <ng-container [adf-node-counter]="getSelectedCount()" />
+            }
         </adf-toolbar-title>
     </adf-toolbar>
 

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

@@ -36,74 +36,27 @@ h2.adf-search-results-label {
     }
 
     &-document-list-container {
-        margin-top: 16px;
         width: 100%;
     }
 
     &-content {
-        #{ms.$mat-input-element} {
-            &:focus::placeholder {
-                color: var(--theme-primary-color);
-            }
-        }
-
-        #{ms.$mat-form-field-wrapper} {
-            #{ms.$mat-form-field-flex} {
-                align-items: center;
-
-                #{ms.$mat-form-field-infix} {
-                    padding-bottom: 0;
-                }
-            }
-        }
-
-        .adf-sites-dropdown-form-field {
-            label {
-                &#{ms.$mat-form-field-label} {
-                    top: 32px;
-                }
-            }
-        }
-
-        #{ms.$mat-form-field-subscript-wrapper} {
-            height: 16px;
-        }
-
-        padding-top: 0;
+        padding-top: 10px;
 
         &-input {
             width: 100%;
-            margin-bottom: 8px;
+            margin-bottom: 15px;
 
-            .adf-content-node-selector-content-input-icon:is(mat-icon) {
+            .adf-content-node-selector-content-input-icon {
                 color: var(--adf-theme-foreground-icon-color-054);
-                padding: 0 0 8px;
-                width: 1em;
-                height: 1em;
-                font-size: 20px;
             }
 
             .adf-content-node-selector-search-clear-button {
-                padding: 0;
-                width: 20px;
-                height: 28px;
-
-                &:focus {
-                    outline-offset: -1.5px;
-                }
-
-                .adf-content-node-selector-content-input-icon:is(mat-icon) {
-                    cursor: pointer;
-
+                .adf-content-node-selector-content-input-icon {
                     &:hover {
                         color: var(--adf-theme-foreground-base-color);
                     }
                 }
             }
-
-            #{ms.$mat-form-field-subscript-wrapper} {
-                display: none;
-            }
         }
 
         .adf-site-dropdown-container {
@@ -111,6 +64,7 @@ h2.adf-search-results-label {
 
             .adf-sites-dropdown-form-field {
                 width: 100%;
+                margin-bottom: 15px;
             }
         }
     }

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

@@ -15,22 +15,22 @@
  * limitations under the License.
  */
 
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { Node, NodeEntry, NodePaging, ResultSetPaging, Site, SiteEntry, SitePaging, SitePagingList, UserInfo } from '@alfresco/js-api';
-import { DataRow, ThumbnailService, DataColumn } from '@alfresco/adf-core';
+import { DataRow, ThumbnailService, DataColumn, NoopAuthModule } from '@alfresco/adf-core';
 import { ContentService, UploadService, NodesApiService, SitesService, FileModel, FileUploadStatus, FileUploadCompleteEvent } from '../../common';
 import { of, throwError } from 'rxjs';
 import { DropdownBreadcrumbComponent } from '../../breadcrumb';
 import { ContentNodeSelectorPanelComponent } from './content-node-selector-panel.component';
-import { ContentTestingModule } from '../../testing/content.testing.module';
 import { DocumentListService } from '../../document-list/services/document-list.service';
 import { DropdownSitesComponent } from '../site-dropdown/sites-dropdown.component';
 import { NodeEntryEvent, ShareDataRow, ShareDataTableAdapter } from '../../document-list';
 import { SearchQueryBuilderService } from '../../search';
 import { ContentNodeSelectorPanelService } from './content-node-selector-panel.service';
 import { mockContentModelTextProperty } from '../../mock/content-model.mock';
+import { provideRouter } from '@angular/router';
+import { provideApiTesting } from '../../testing/providers';
 
 const fakeResultSetPaging: ResultSetPaging = {
     list: {
@@ -69,15 +69,12 @@ describe('ContentNodeSelectorPanelComponent', () => {
         service.executed.next(searchResults);
     };
 
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            imports: [ContentTestingModule],
-            schemas: [CUSTOM_ELEMENTS_SCHEMA]
-        });
-    });
-
     describe('General component features', () => {
         beforeEach(() => {
+            TestBed.configureTestingModule({
+                imports: [NoopAuthModule, ContentNodeSelectorPanelComponent],
+                providers: [provideRouter([]), provideApiTesting()]
+            });
             fixture = TestBed.createComponent(ContentNodeSelectorPanelComponent);
             component = fixture.componentInstance;
             component.debounceSearch = 0;