Check

Fix/AAE 24522 js api build (#10010 )
* Fixing js-api build * AAE-24522 js api build normally * [ci:force] * [ci:force] * [ci:force] - package-lock update * [ci:force] - fixing dependsOn for cli and testing * [ci:force] - These changes needs to be reviewed
2026-09-16 18:13:06 +00:00 · 2024-07-31 12:11:23 +01:00 · 2024-07-31 09:59:16 +01:00 · 2024-07-31 10:31:31 +02:00 · 2024-07-31 10:10:26 +02:00 · 2024-07-31 09:38:17 +02:00
761 changed files with 25552 additions and 39260 deletions
@@ -1,5 +1,6 @@
 module.exports = {
    root: true,
+
    ignorePatterns: [
        'projects/**/*',
        '**/node_modules/**/*',
@@ -10,7 +11,9 @@ module.exports = {
        '**/scripts',
        '**/docs'
    ],
+
    plugins: ['@nrwl/nx'],
+
    overrides: [
        {
            files: ['*.ts'],
@@ -196,5 +199,7 @@ module.exports = {
            extends: ['plugin:@angular-eslint/template/process-inline-templates'],
            excludedFiles: ['*.spec.ts']
        }
-    ]
+    ],
+
+    extends: ['plugin:storybook/recommended']
 };
@@ -0,0 +1,3 @@
+{
+  "extends": ["./.eslintrc.js"]
+}
@@ -20,13 +20,13 @@ runs:
  using: "composite"
  steps:
      - name: install NPM
-        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
        with:
          node-version-file: '.nvmrc'
          cache-dependency-path: package-lock.json
      - name: get latest tag sha
        id: tag-sha
-        uses: Alfresco/alfresco-build-tools/.github/actions/git-latest-tag@a288b9efdaa50413573b2e130896d906478b8e50 # v5.31.0
+        uses: Alfresco/alfresco-build-tools/.github/actions/git-latest-tag@76affd16a4dd9a440cf66bf42656b1d826e8dfc2 # v5.34.0
 # CACHE
      - name: Node Modules cache
        id: node-modules-cache
@@ -30,7 +30,7 @@ jobs:

    # Initializes the CodeQL tools for scanning.
    - name: Initialize CodeQL
-      uses: github/codeql-action/init@b611370bb5703a7efb587f9d136a52ea24c5c38c # v3.25.11
+      uses: github/codeql-action/init@afb54ba388a7dca6ecae48f608c4ff05ff4cc77a # v3.25.15
      # Override language selection by uncommenting this and choosing your languages
      with:
        languages: javascript
@@ -39,7 +39,7 @@ jobs:
    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
    # If this step fails, then you should remove it and run the build manually (see below)
    - name: Autobuild
-      uses: github/codeql-action/autobuild@b611370bb5703a7efb587f9d136a52ea24c5c38c # v3.25.11
+      uses: github/codeql-action/autobuild@afb54ba388a7dca6ecae48f608c4ff05ff4cc77a # v3.25.15

    # ℹ️ Command-line programs to run using the OS shell.
    # 📚 https://git.io/JvXDl
@@ -53,4 +53,4 @@ jobs:
    #   make release

    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@b611370bb5703a7efb587f9d136a52ea24c5c38c # v3.25.11
+      uses: github/codeql-action/analyze@afb54ba388a7dca6ecae48f608c4ff05ff4cc77a # v3.25.15
@@ -121,10 +121,10 @@ jobs:
         fetch-depth: 0

      - name: Get branch name
-        uses: Alfresco/alfresco-build-tools/.github/actions/get-branch-name@a288b9efdaa50413573b2e130896d906478b8e50 # v5.31.0
+        uses: Alfresco/alfresco-build-tools/.github/actions/get-branch-name@76affd16a4dd9a440cf66bf42656b1d826e8dfc2 # v5.34.0

      - name: Save commit message
-        uses: Alfresco/alfresco-build-tools/.github/actions/get-commit-message@a288b9efdaa50413573b2e130896d906478b8e50 # v5.31.0
+        uses: Alfresco/alfresco-build-tools/.github/actions/get-commit-message@76affd16a4dd9a440cf66bf42656b1d826e8dfc2 # v5.34.0

      - name: ci:force flag parser
        shell: bash
@@ -35,3 +35,4 @@ licenses.txt
 .DS_Store
 .angular
 NX
+.nx
@@ -1 +1 @@
-18.18.2
+18.20.3
@@ -1,7 +1,10 @@
 module.exports = {
+    framework: {
+        name: '@storybook/angular',
+        options: {}
+    },
+    staticDirs: [{ from: '../../../demo-shell/src/app.config.json', to: 'app.config.json' }],
+    docs: {},
    stories: [],
-    addons: ['@storybook/addon-essentials'],
-    framework: '@storybook/angular',
-    staticDirs: [ { from: '../../../demo-shell/src/app.config.json', to: 'app.config.json' } ],
-    core: { builder: 'webpack5' }
+    addons: []
 };
@@ -2,3 +2,4 @@ export const parameters = {
    docs: { inlineStories: true },
    controls: { expanded: true }
 };
+export const tags = ['autodocs'];
@@ -31,5 +31,6 @@
    "postcss",
    "scss"
  ],
-  "editor.guides.indentation": true
+  "editor.guides.indentation": true,
+  "typescript.tsdk": "node_modules/typescript/lib"
 }
@@ -0,0 +1,201 @@
+{
+  "name": "demoshell",
+  "$schema": "../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "demo-shell/src",
+  "projectType": "application",
+  "targets": {
+    "build": {
+      "executor": "@angular-devkit/build-angular:browser",
+      "options": {
+        "allowedCommonJsDependencies": [
+          "minimatch",
+          "minimatch-browser",
+          "superagent",
+          "event-emitter",
+          "brace-expansion",
+          "zen-observable",
+          "subscriptions-transport-ws",
+          "d",
+          "chart.js",
+          "cropperjs"
+        ],
+        "outputPath": "dist/demo-shell",
+        "index": "demo-shell/src/index.html",
+        "main": "demo-shell/src/main.ts",
+        "tsConfig": "tsconfig.dev.json",
+        "polyfills": "demo-shell/src/polyfills.ts",
+        "stylePreprocessorOptions": {
+          "includePaths": ["lib", "lib/core/src/lib"]
+        },
+        "assets": [
+          "demo-shell/src/assets",
+          "demo-shell/src/favicon-96x96.png",
+          "demo-shell/src/app.config.json",
+          {
+            "glob": "**/*",
+            "input": "demo-shell/src/assets",
+            "output": "/assets"
+          },
+          {
+            "glob": "app.config.json",
+            "input": "demo-shell/src",
+            "output": "/"
+          },
+          {
+            "glob": "**/*",
+            "input": "demo-shell/resources",
+            "output": "/resources"
+          },
+          {
+            "glob": "**/*",
+            "input": "lib/core/src/lib/assets",
+            "output": "/assets"
+          },
+          {
+            "glob": "**/*",
+            "input": "lib/process-services/src/lib/assets",
+            "output": "/assets"
+          },
+          {
+            "glob": "**/*",
+            "input": "lib/process-services-cloud/src/lib/assets",
+            "output": "/assets"
+          },
+          {
+            "glob": "**/*",
+            "input": "lib/content-services/src/lib/assets",
+            "output": "/assets"
+          },
+          {
+            "glob": "**/*",
+            "input": "lib/core/src/lib/i18n",
+            "output": "/assets/adf-core/i18n"
+          },
+          {
+            "glob": "**/*",
+            "input": "lib/content-services/src/lib/i18n",
+            "output": "/assets/adf-content-services/i18n"
+          },
+          {
+            "glob": "**/*",
+            "input": "lib/process-services/src/lib/i18n",
+            "output": "/assets/adf-process-services/i18n"
+          },
+          {
+            "glob": "**/*",
+            "input": "lib/process-services-cloud/src/lib/i18n",
+            "output": "/assets/adf-process-services-cloud/i18n"
+          },
+          {
+            "glob": "**/*",
+            "input": "lib/insights/src/lib/i18n",
+            "output": "/assets/adf-insights/i18n"
+          },
+          {
+            "glob": "pdf.worker.min.js",
+            "input": "node_modules/pdfjs-dist/build",
+            "output": "/"
+          },
+          {
+            "glob": "**/*",
+            "input": "node_modules/monaco-editor",
+            "output": "/assets/monaco/"
+          }
+        ],
+        "styles": [
+          "demo-shell/src/styles.scss",
+          "demo-shell/src/custom-style-dev.scss",
+          "node_modules/cropperjs/dist/cropper.min.css",
+          "node_modules/pdfjs-dist/web/pdf_viewer.css"
+        ],
+        "scripts": ["node_modules/pdfjs-dist/build/pdf.js", "node_modules/pdfjs-dist/web/pdf_viewer.js", "node_modules/raphael/raphael.min.js"],
+        "vendorChunk": true,
+        "extractLicenses": false,
+        "buildOptimizer": false,
+        "sourceMap": true,
+        "optimization": false,
+        "namedChunks": true
+      },
+      "configurations": {
+        "production": {
+          "budgets": [
+            {
+              "type": "anyComponentStyle",
+              "maximumWarning": "12kb"
+            }
+          ],
+          "optimization": true,
+          "outputHashing": "all",
+          "sourceMap": false,
+          "namedChunks": false,
+          "extractLicenses": true,
+          "buildOptimizer": true,
+          "verbose": false,
+          "fileReplacements": [
+            {
+              "replace": "demo-shell/src/environments/environment.ts",
+              "with": "demo-shell/src/environments/environment.prod.ts"
+            }
+          ]
+        },
+        "canary": {
+          "fileReplacements": [
+            {
+              "replace": "demo-shell/src/environments/environment.ts",
+              "with": "demo-shell/src/environments/environment.canary.ts"
+            }
+          ]
+        },
+        "e2e": {
+          "budgets": [
+            {
+              "type": "anyComponentStyle",
+              "maximumWarning": "6kb"
+            }
+          ],
+          "optimization": true,
+          "outputHashing": "all",
+          "sourceMap": false,
+          "namedChunks": false,
+          "extractLicenses": true,
+          "buildOptimizer": true,
+          "verbose": false,
+          "fileReplacements": [
+            {
+              "replace": "demo-shell/src/environments/environment.ts",
+              "with": "demo-shell/src/environments/environment.e2e.ts"
+            }
+          ]
+        }
+      },
+      "defaultConfiguration": ""
+    },
+    "serve": {
+      "executor": "@angular-devkit/build-angular:dev-server",
+      "options": {
+        "browserTarget": "demoshell:build",
+        "host": "0.0.0.0",
+        "port": 3000,
+        "proxyConfig": "demo-shell/proxy.conf.js",
+        "disableHostCheck": true
+      },
+      "configurations": {
+        "production": {
+          "browserTarget": "demoshell:build:production"
+        },
+        "canary": {
+          "browserTarget": "demoshell:build:canary"
+        },
+        "e2e": {
+          "browserTarget": "demoshell:build:e2e"
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "options": {
+        "lintFilePatterns": ["demo-shell/**/*.ts", "demo-shell/**/*.html"]
+      }
+    }
+  }
+}
@@ -622,7 +622,7 @@
            "unit": "Byte",
            "field": "cm:content.size",
            "min": 0,
-            "max": 18,
+            "max": 4000,
            "step": 1,
            "thumbLabel": true
          }
@@ -76,7 +76,7 @@ import { CoreAutomationService } from '../testing/automation.service';
        BrowserModule,
        environment.e2e ? NoopAnimationsModule : BrowserAnimationsModule,
        ReactiveFormsModule,
-        RouterModule.forRoot(appRoutes, { useHash: true, relativeLinkResolution: 'legacy' }),
+        RouterModule.forRoot(appRoutes, { useHash: true }),
        AuthModule.forRoot({ useHash: true }),
        FormsModule,
        HttpClientModule,
@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 .app-form-container {
    padding: 10px;
 }
@@ -31,7 +33,7 @@
 }

 .app-form-editor-buttons {
-    & > .mat-raised-button {
+    & > #{$mat-raised-button} {
        margin-right: 5px;
    }
 }
@@ -40,7 +40,7 @@

    <mat-menu #menu="matMenu" id="user-profile-lists" [xPosition]="menuPositionX" [yPosition]="menuPositionY"
              [overlapTrigger]="false" class="adf-userinfo-menu">
-        <mat-card *ngIf="mode === userInfoMode.CONTENT" class="adf-userinfo-card adf-content-userinfo-card">
+        <mat-card appearance="outlined" *ngIf="mode === userInfoMode.CONTENT" class="adf-userinfo-card adf-content-userinfo-card">
            <mat-card-header class="adf-userinfo-card-header"
                             [style.background-image]="'url(' + ecmBackgroundImage + ')'">
                <div *ngIf="ecmUser.avatarId; else initialTemplate"
@@ -53,7 +53,7 @@
                      [outerHTML]="ecmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
                </ng-template>

-                <div class="mat-title" id="ecm-username">{{ecmUser | fullName}}</div>
+                <div class="mat-headline-6" id="ecm-username">{{ecmUser | fullName}}</div>
            </mat-card-header>
            <mat-card-content>
                <div class="adf-userinfo-supporting-text">
@@ -73,7 +73,7 @@
                </div>
            </mat-card-content>
        </mat-card>
-        <mat-card *ngIf="mode === userInfoMode.CONTENT_SSO" class="adf-userinfo-card adf-content-userinfo-card">
+        <mat-card appearance="outlined" *ngIf="mode === userInfoMode.CONTENT_SSO" class="adf-userinfo-card adf-content-userinfo-card">
            <mat-card-header class="adf-userinfo-card-header"
                             [style.background-image]="'url(' + bpmBackgroundImage + ')'">
                <div *ngIf="ecmUser.avatarId; else initialTemplate"
@@ -85,7 +85,7 @@
                    <div
                      [outerHTML]="identityUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
                </ng-template>
-                <div class="mat-title" id="identity-username">{{identityUser | fullName}}</div>
+                <div class="mat-headline-6" id="identity-username">{{identityUser | fullName}}</div>
            </mat-card-header>
            <mat-card-content>
                <div class="adf-userinfo-supporting-text">
@@ -15,7 +15,7 @@
 * limitations under the License.
 */

-import { CoreTestingModule, IdentityUserModel, InitialUsernamePipe, UserInfoMode } from '@alfresco/adf-core';
+import { IdentityUserModel, InitialUsernamePipe, UserInfoMode } from '@alfresco/adf-core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatMenuModule } from '@angular/material/menu';
 import { By, DomSanitizer } from '@angular/platform-browser';
@@ -119,7 +119,7 @@ describe('ContentUserInfoComponent', () => {

    beforeEach(() => {
        TestBed.configureTestingModule({
-            imports: [CoreTestingModule, ContentTestingModule, MatMenuModule]
+            imports: [ContentTestingModule, MatMenuModule]
        });
        fixture = TestBed.createComponent(ContentUserInfoComponent);
        component = fixture.componentInstance;
@@ -41,7 +41,7 @@
                       class="adf-userinfo-tab" [class.adf-hide-tab]="!ecmUser">
            <mat-tab label="{{ 'USER_PROFILE.TAB.CS' | translate }}" role="dialog"
                     *ngIf="mode===userInfoMode.ALL">
-                <mat-card class="adf-userinfo-card" *ngIf="ecmUser">
+                <mat-card appearance="outlined" class="adf-userinfo-card" *ngIf="ecmUser">
                    <mat-card-header class="adf-userinfo-card-header"
                                     [style.background-image]="'url(' + ecmBackgroundImage + ')'">
                        <div *ngIf="ecmUser.avatarId; else initialTemplate"
@@ -54,7 +54,7 @@
                                [outerHTML]="ecmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
                        </ng-template>

-                        <div class="mat-title" id="ecm-username">{{ecmUser | fullName}}</div>
+                        <div class="mat-headline-6" id="ecm-username">{{ecmUser | fullName}}</div>
                    </mat-card-header>
                    <mat-card-content>
                        <div class="adf-userinfo-supporting-text">
@@ -75,7 +75,7 @@
            </mat-tab>
            <mat-tab id="bpm-panel" label="{{ 'USER_PROFILE.TAB.PS' | translate }}" role="dialog"
                     *ngIf="mode===userInfoMode.PROCESS || mode===userInfoMode.ALL">
-                <mat-card class="adf-userinfo-card">
+                <mat-card appearance="outlined" class="adf-userinfo-card">
                    <mat-card-header class="adf-userinfo-card-header"
                                     [style.background-image]="'url(' + bpmBackgroundImage + ')'">
                        <img *ngIf="bpmUser.pictureId; else initialTemplate"
@@ -85,7 +85,7 @@
                            <div
                                [outerHTML]="bpmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
                        </ng-template>
-                        <div class="mat-title" id="bpm-username">{{bpmUser | fullName}}</div>
+                        <div class="mat-headline-6" id="bpm-username">{{bpmUser | fullName}}</div>
                    </mat-card-header>
                    <mat-card-content>
                        <div class="adf-userinfo-supporting-text">
@@ -1,4 +1,5 @@
@import 'styles/flex';
+@import 'styles/mat-selectors';

 .adf {
    &-userinfo-container {
@@ -49,7 +50,7 @@
        display: inline-block;
    }

-    &-userinfo-menu_button.mat-button {
+    &-userinfo-menu_button#{$mat-button} {
        margin-right: 0;
        border-radius: 90%;
        padding: 0;
@@ -57,13 +58,13 @@
        height: 40px;
    }

-    &-userinfo-tab .mat-tab-header {
+    &-userinfo-tab #{$mat-tab-header} {
        align-self: center;
        width: 100%;
        min-width: 250px;
    }

-    &-userinfo-tab .mat-tab-label {
+    &-userinfo-tab #{$mat-tab-label-text} {
        flex: auto;
        font-weight: 500;
        font-size: var(--theme-body-1-font-size);
@@ -81,7 +82,7 @@
        box-sizing: border-box;
    }

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

@@ -160,7 +161,7 @@
 }

@media only screen and (min-device-width: 480px) {
-    .mat-menu-panel.adf-userinfo-menu {
+    #{$mat-menu-panel}.adf-userinfo-menu {
        max-height: 450px;
        min-width: 450px;
        overflow: auto;
@@ -168,6 +169,6 @@
    }
 }

-.mat-menu-panel.adf-userinfo-menu .mat-menu-content {
+#{$mat-menu-panel}.adf-userinfo-menu #{$mat-menu-content} {
    padding: 0;
 }
@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 .app-cloud-layout-overflow {
    overflow: auto;
 }
@@ -43,11 +43,11 @@
        <button mat-raised-button (click)="addAction()">Add</button>
    </form>
    <div *ngIf="actions.length > 0">
-        <mat-chip-list>
-            <mat-chip *ngFor="let action of actions" [removable]="true">
+        <mat-chip-listbox>
+            <mat-chip-option *ngFor="let action of actions" [removable]="true">
                {{action.title}}
                <mat-icon matChipRemove (click)="removeAction(action)">cancel</mat-icon>
-            </mat-chip>
-        </mat-chip-list>
+            </mat-chip-option>
+        </mat-chip-listbox>
    </div>
 </div>
@@ -1,6 +1,7 @@
@use '@angular/material' as mat;
@import '../../lib/core/src/lib/styles/index';
@import '../../lib/core/src/lib/styles/typography';
+@include mat.all-component-typographies;
@include mat.core;

 $primary: mat.define-palette($alfresco-accent-orange);
@@ -19,19 +20,3 @@ $theme: mat.define-light-theme(

@include mat.all-component-themes($theme);
@include alfresco-material-theme($theme);
-
-$typography: map-get($theme, typography);
-
-body,
-html {
-    margin: 0;
-    height: 100%;
-    overflow: hidden;
-    font-size: mat.font-size($typography, body-1);
-    font-family: mat.font-family($typography);
-    line-height: mat.line-height($typography, body-1);
-}
-
-body {
-    overflow: auto;
-}
@@ -1,6 +1,7 @@
@use '@angular/material' as mat;
@import '~@alfresco/adf-core/theming';
-@include mat.core($alfresco-typography);
+@include mat.all-component-typographies($alfresco-typography);
+@include mat.core;

 $primary: mat.define-palette($alfresco-accent-orange);
 $accent: mat.define-palette($alfresco-accent-purple);
@@ -16,17 +17,3 @@ $theme: mat.define-light-theme(

@include mat.all-component-themes($theme);
@include alfresco-material-theme($theme);
-
-body,
-html {
-    margin: 0;
-    height: 100%;
-    overflow: hidden;
-    font-size: mat.font-size($alfresco-typography, body-1);
-    font-family: mat.font-family($alfresco-typography);
-    line-height: mat.line-height($alfresco-typography, body-1);
-}
-
-body {
-    overflow: auto;
-}
@@ -81,18 +81,17 @@ for more information about installing and using the source code.

 A collection of Angular components for generic use.

-| Name                                          | Description                  |
-|-----------------------------------------------|------------------------------|
-| [Avatar](core/components/avatar.component.md) | Displays user avatars.       |
-| [Button](core/components/button.component.md) | A standard button component. |
+| 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

 | Name | Description | Source link |
 | ---- | ----------- | ----------- |
-| [About Application Modules Component](core/components/about-application.component.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Shows which ADF libraries and plugins an application is using. | [Source](../lib/core/src/lib/about/about-application-modules/about-application-modules.component.ts) |
-| [About GitHub Link Component](core/components/about-github-link.component.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Shows which version of the application is running based on the latest GitHub commit, as well as the server settings for the application. | [Source](../lib/core/src/lib/about/about-github-link/about-github-link.component.ts) |
-| [About Product Version Component](core/components/about-product-version.component.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Shows which version of Process Services (BPM) and Content Services (ECM) an application is running. It also shows the relevant license information, application status and Alfresco modules running in an application. | [Source](../lib/core/src/lib/about/about-product-version/about-product-version.component.ts) |
 | [About Component](core/components/about.component.md) | Presentational component to display About information as a set of collapsible panels. | [Source](../lib/core/src/lib/about/about.component.ts) |
 | [Card View component](core/components/card-view.component.md) | Displays a configurable property list renderer. | [Source](../lib/core/src/lib/card-view/components/card-view/card-view.component.ts) |
 | [Comment list component](core/components/comment-list.component.md) | Shows a list of comments. | [Source](../lib/core/src/lib/comments/comment-list/comment-list.component.ts) |
@@ -106,7 +105,6 @@ A collection of Angular components for generic use.
 | [Form field component](core/components/form-field.component.md) | Represents a UI field in a form. | [Source](../lib/core/src/lib/form/components/form-field/form-field.component.ts) |
 | [Form List Component](core/components/form-list.component.md) | Shows forms as a list. | [Source](../lib/process-services/src/lib/form/form-list/form-list.component.ts) |
 | [Header component](core/components/header.component.md) | Reusable header for Alfresco applications. | [Source](../lib/core/src/lib/layout/components/header/header.component.ts) |
-| [Host settings component](core/components/host-settings.component.md) ![Internal](docassets/images/InternalIcon.png) | Validates the URLs for ACS and APS and saves them in the user's local storage | [Source](../lib/core/src/lib/settings/host-settings.component.ts) |
 | [Icon Component](core/components/icon.component.md) | Provides a universal way of rendering registered and named icons. | [Source](../lib/core/src/lib/icon/icon.component.ts) |
 | [Identity User Info component](core/components/identity-user-info.component.md) | Shows user information for SSO mode. | [Source](../lib/core/src/lib/identity-user-info/identity-user-info.component.ts) |
 | [Infinite Pagination component](core/components/infinite-pagination.component.md) | Adds "infinite" pagination to the component it is used with. | [Source](../lib/core/src/lib/pagination/infinite-pagination.component.ts) |
@@ -118,8 +116,7 @@ A collection of Angular components for generic use.
 | [Login Dialog Panel component](core/components/login-dialog-panel.component.md) | Shows and manages a login dialog. | [Source](../lib/core/src/lib/login/components/login-dialog-panel.component.ts) |
 | [Login Dialog component](core/components/login-dialog.component.md) | Allows a user to perform a login via a dialog. | [Source](../lib/core/src/lib/login/components/login-dialog.component.ts) |
 | [Login component](core/components/login.component.md) | Authenticates to Alfresco Content Services and Alfresco Process Services. | [Source](../lib/core/src/lib/login/components/login.component.ts) |
-| [Notification History component](core/components/notification-history.component.md) ![Experimental](docassets/images/ExperimentalIcon.png) | This component is in the current status just an experimental component. |  |
-| The main purpose of the Notification history component is list all the notification received in the current session. They will disappear from the list after the refresh. | [Source](../lib/core/src/lib/notifications/components/notification-history.component.ts) |  |
+| [Notification History component](core/components/notification-history.component.md) ![Experimental](docassets/images/ExperimentalIcon.png) | This component is in the current status just an experimental component. The main purpose of the Notification history component is list all the notification received in the current session. They will disappear from the list after the refresh. | [Source](../lib/core/src/lib/notifications/components/notification-history.component.ts) |  |
 | [Pagination Component](core/components/pagination.component.md) | Adds pagination to the component it is used with. | [Source](../lib/core/src/lib/pagination/pagination.component.ts) |
 | [Search Text Input Component](core/components/search-text-input.component.md) | Displays a input text that supports autocompletion | [Source](<>) |
 | [Sidebar action menu component](core/components/sidebar-action-menu.component.md) | Displays a sidebar-action menu information panel. | [Source](../lib/core/src/lib/layout/components/sidebar-action/sidebar-action-menu.component.ts) |
@@ -150,6 +147,7 @@ A collection of Angular components for generic use.

 | Name | Description | Source link |
 | ---- | ----------- | ----------- |
+| [Confirm dialog component](core/dialogs/confirm.dialog.md) | Requests a yes/no choice from the user. | [Source](../lib/core/src/lib/dialogs/confirm-dialog/confirm.dialog.ts) |
 | [Edit JSON Dialog](core/dialogs/edit-json.dialog.md) | Allows a user to preview or edit a JSON content in a dialog. | [Source](../lib/testing/src/lib/core/dialog/edit-json-dialog.ts) |
 | [Unsaved Changes Dialog](core/dialogs/unsaved-changes-dialog.component.md) | Dialog which informs about unsaved changes. Allows discard them and proceed or close dialog and stop proceeding. | [Source](../lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.ts) | 

@@ -194,7 +192,7 @@ A collection of Angular components for generic use.
 ### Services

 | Name | Description | Source link |
-| ---- | ----------- | ----------- |
+| ---- | ----------- | -------- |
 | [APS Alfresco Content Service](core/services/activiti-alfresco.service.md) | Gets Alfresco Repository folder content based on a Repository account configured in Alfresco Process Services (APS). | [Source](../lib/process-services/src/lib/form/services/activiti-alfresco.service.ts) |
 | [Alfresco Api Service](core/services/alfresco-api.service.md) | Provides access to an initialized AlfrescoJSApi instance. | [Source](../lib/core/src/lib/services/alfresco-api.service.ts) |
 | [App Config service](core/services/app-config.service.md) | Supports app configuration settings, stored server side. | [Source](../lib/core/src/lib/app-config/app-config.service.ts) |
@@ -206,17 +204,13 @@ A collection of Angular components for generic use.
 | [Authentication Service](core/services/authentication.service.md) | Provides authentication to ACS and APS. | [Source](../lib/core/src/lib/auth/services/authentication.service.ts) |
 | [Bpm User service](core/services/bpm-user.service.md) | Gets information about the current Process Services user. | [Source](../lib/core/src/lib/services/bpm-user.service.ts) |
 | [Card Item Type service](core/services/card-item-types.service.md) | Maps type names to field component types for the Card View component. | [Source](../lib/core/src/lib/card-view/services/card-item-types.service.ts) |
-| [Card View Update service](core/services/card-view-update.service.md) | Reports edits and clicks within fields of a Card View component. |  |
-| Implements BaseCardViewUpdate. | [Source](../lib/core/src/lib/card-view/services/card-view-update.service.ts) |  |
+| [Card View Update service](core/services/card-view-update.service.md) | Reports edits and clicks within fields of a Card View component. Implements BaseCardViewUpdate. | [Source](../lib/core/src/lib/card-view/services/card-view-update.service.ts) |  |
 | [Clipboard service](core/services/clipboard.service.md) | Copies text to the clipboard. | [Source](../lib/core/src/lib/clipboard/clipboard.service.ts) |
 | [Comment Content service](core/services/comment-content.service.md) | Adds and retrieves comments for nodes in Content Services. | [Source](../lib/core/src/lib/services/comment-content.service.ts) |
 | [Comment Process service](core/services/comment-process.service.md) | Adds and retrieves comments for task and process instances in Process Services. | [Source](../lib/process-services/src/lib/process-comments/services/comment-process.service.ts) |
 | [Content service](core/services/content.service.md) | Accesses app-generated data objects via URLs and file downloads. | [Source](../lib/content-services/src/lib/common/services/content.service.ts) |
 | [Cookie service](core/services/cookie.service.md) | Stores key-value data items as browser cookies. | [Source](../lib/core/src/lib/common/services/cookie.service.ts) |
-| [DataTable service](core/services/datatable.service.md) | If you need to update one row of your datatable you can use the  DataTableService to update it. |  |
-
-To update a single row you can use the rowUpdate subject. 
-The model to update the DataTable require the ID of the row you want change and the new data Object of the row | [Source](../lib/core/src/lib/datatable/services/datatable.service.ts) |
+| [DataTable service](core/services/datatable.service.md) | If you need to update one row of your datatable you can use the  DataTableService to update it. To update a single row you can use the rowUpdate subject. The model to update the DataTable require the ID of the row you want change and the new data Object of the row | [Source](../lib/core/src/lib/datatable/services/datatable.service.ts) |
 | [Deleted Nodes Api service](core/services/deleted-nodes-api.service.md) | Gets a list of Content Services nodes currently in the trash. | [Source](../lib/core/src/lib/services/deleted-nodes-api.service.ts) |
 | [Discovery Api service](core/services/discovery-api.service.md) | Gets version and license information for Process Services and Content Services. | [Source](../lib/content-services/src/lib/common/services/discovery-api.service.ts) |
 | [Download zip service](core/services/download-zip.service.md) | Creates and manages downloads. | [Source](../lib/content-services/src/lib/dialogs/download-zip/services/download-zip.service.ts) |
@@ -348,7 +342,6 @@ for more information about installing and using the source code.
 | Name | Description | Source link |
 | ---- | ----------- | ----------- |
 | [Dialog component](content-services/dialogs/dialog.md) | Dialog styled wrapper. | [Source](../lib/content-services/src/lib/dialogs/dialog/dialog.component.ts) |
-| [Confirm dialog component](content-services/dialogs/confirm.dialog.md) | Requests a yes/no choice from the user. | [Source](../lib/content-services/src/lib/dialogs/confirm.dialog.ts) |
 | [Library dialog component](content-services/dialogs/library.dialog.md) | Creates a new Content Services document library/site. | [Source](../lib/content-services/src/lib/dialogs/library/library.dialog.ts) |

 ### Interfaces
@@ -96,7 +96,7 @@ However, you can use a more complex template if necessary:
                class="adf-search-autocomplete-item"
                (click)="elementClicked(item)"
                (keyup.enter)="elementClicked(item)">
-                <mat-icon mat-list-icon>
+                <mat-icon matListItemLine>
                    <img [src]="getMimeTypeIcon(item)" />
                </mat-icon>
                    <h4 mat-line id="result_name_{{idx}}"
@@ -5,7 +5,7 @@ Status: Active
 Last reviewed: 2024-03-12
 ---

-# [Category selector dialog component](../../../lib/content-services/src/lib/dialogs/category-selector.dialog.ts "Defined in category-selector.dialog.ts")
+# Category Selector Dialog

 Allows the user to select one or multiple categories.

@@ -13,43 +13,41 @@ Allows the user to select one or multiple categories.

 ## Dialog inputs

-| Name | Type      | Default value | Description |
-| ---- |-----------| ------------- | ----------- |
-| select | [`Subject<Category[]>`](https://github.com/Alfresco/alfresco-ng2-components/blob/develop/lib/js-api/src/api/content-rest-api/docs/CategoriesApi.md)  |  | Emits an array of selected categories when the dialog closes |
-| multiSelect | `boolean` | `true` | (optional) Toggles multiselect mode |
+| Name        | Type                  | Default value | Description                                                  |
+|-------------|-----------------------|---------------|--------------------------------------------------------------|
+| select      | `Subject<Category[]>` |               | Emits an array of selected categories when the dialog closes |
+| multiSelect | `boolean`             | `true`        | (optional) Toggles multiselect mode                          |

 ## Basic Usage 

 ```ts
-constructor(private dialog: MatDialog) {}
+export class MyComponent {
+    constructor(private dialog: MatDialog) {
+    }

-...
+    openCatDialog() {
+        const data: CategorySelectorDialogOptions = {
+            select: new Subject<Category[]>(),
+            multiSelect: false
+        };

-function openCatDialog() {
-    const data: CategorySelectorDialogOptions = {
-        select: new Subject<Category[]>(),
-        multiSelect: false
-    };
+        this.dialog.open(CategorySelectorDialogComponent, {
+            data,
+            width: '400px'
+        });

-    this.dialog.open(CategorySelectorDialogComponent, {
-        data,
-        width: '400px'
-    });
-
-    data.select.subscribe(
-        (selections: Category[]) => {
-            ...
-        }
-    );
+        data.select.subscribe((selections) => {
+            // ...
+        });
+    }
 }
 ```
-All the results will be streamed to the select [subject](http://reactivex.io/rxjs/manual/overview.html#subject) present in the `CategorySelectorDialogOptions` object passed to the dialog.
+All the results will be streamed to the `select` subject present in the `CategorySelectorDialogOptions` object passed to the dialog.
 When the category is selected by clicking the `Select` button, the `options.select` stream will be completed.

 ## Details

-This component lets the user select categories. Use the
-Angular [`MatDialog`](https://material.angular.io/components/dialog/overview)
+This component lets the user select categories. Use the Angular `MatDialog`
 service to open the dialog, as shown in the example, and pass a `options` object
 with properties.

@@ -1,56 +0,0 @@
---
-Title: Audit Service
-Added: v3.9.0
-Status: Active
-Last reviewed: 2020-08-12
---
-
-# [Audit Service](../../../lib/content-services/src/lib/audit/audit.service.ts "Defined in audit.service.ts")
-
-Manages Audit apps and entries.
-
-## Class members
-
-### Methods
-
-   **deleteAuditEntries**(auditApplicationId: `string`, where: `string`): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
-    Permanently delete audit entries for an audit application.
-    -   _auditApplicationId:_ `string`  - The identifier of an audit application.
-    -   _where:_ `string`  - Audit entries to permanently delete for an audit application, given an inclusive time period or range of ids.
-    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<any>` - 
-   **deleteAuditEntry**(auditApplicationId: `string`, auditEntryId: `string`): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
-    Permanently delete an audit entry.
-    -   _auditApplicationId:_ `string`  - The identifier of an audit application.
-    -   _auditEntryId:_ `string`  - The identifier of an audit entry.
-    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<any>` - 
-   **getAuditApp**(auditApplicationId: `string`, opts?: `any`): [`Observable`](http://reactivex.io/documentation/observable.html)`<AuditAppEntry>`<br/>
-    Get audit application info.
-    -   _auditApplicationId:_ `string`  - The identifier of an audit application.
-    -   _opts:_ `any`  - (Optional) Options.
-    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<AuditAppEntry>` - status of an audit application.
-   **getAuditApps**(opts?: `any`): [`Observable`](http://reactivex.io/documentation/observable.html)`<AuditAppPaging>`<br/>
-    Gets a list of audit applications.
-    -   _opts:_ `any`  - (Optional) Options.
-    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<AuditAppPaging>` - a list of the audit applications.
-   **getAuditEntries**(auditApplicationId: `string`, opts?: `any`): [`Observable`](http://reactivex.io/documentation/observable.html)`<AuditEntryPaging>`<br/>
-    List audit entries for an audit application.
-    -   _auditApplicationId:_ `string`  - The identifier of an audit application.
-    -   _opts:_ `any`  - (Optional) Options.
-    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<AuditEntryPaging>` - a list of audit entries.
-   **getAuditEntriesForNode**(nodeId: `string`, opts?: `any`): [`Observable`](http://reactivex.io/documentation/observable.html)`<AuditEntryPaging>`<br/>
-    List audit entries for a node.
-    -   _nodeId:_ `string`  - The identifier of a node.
-    -   _opts:_ `any`  - (Optional) Options.
-    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<AuditEntryPaging>` - 
-   **getAuditEntry**(auditApplicationId: `string`, auditEntryId: `string`, opts?: `any`): [`Observable`](http://reactivex.io/documentation/observable.html)`<AuditEntryEntry>`<br/>
-    Get audit entry.
-    -   _auditApplicationId:_ `string`  - The identifier of an audit application.
-    -   _auditEntryId:_ `string`  - The identifier of an audit entry.
-    -   _opts:_ `any`  - (Optional) Options.
-    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<AuditEntryEntry>` - audit entry.
-   **updateAuditApp**(auditApplicationId: `string`, auditAppBodyUpdate: `boolean`, opts?: `any`): [`Observable`](http://reactivex.io/documentation/observable.html)`<AuditApp|any>`<br/>
-    Update audit application info.
-    -   _auditApplicationId:_ `string`  - The identifier of an audit application.
-    -   _auditAppBodyUpdate:_ `boolean`  - The audit application to update.
-    -   _opts:_ `any`  - (Optional) Options.
-    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<AuditApp|any>` -
@@ -1,40 +0,0 @@
---
-Title: About Application Modules Component
-Added: v3.5.0
-Status: Experimental
-Last reviewed: 2019-09-09
---
-
-# [About Application Modules Component](lib/core/src/lib/about/about-application-modules/about-application-modules.component.ts "Defined in about-application-modules.component.ts")
-
-Shows which ADF libraries and plugins an application is using.
-
-## Basic Usage
-
-With default input values:
-
-```html
-<adf-about-application-modules></adf-about-application-modules>
-```
-
-With custom input values:
-
-```html
-<adf-about-application-modules
-    [dependencies]="yourDependencies"
-    [showExtensions]="true"
-    [regexp]="^(@alfresco)">
-</adf-about-application-modules>
-```
-
-### Properties
-
-| Name | Type | Default value | Description |
-| ---- | ---- | ------------- | ----------- |
-| dependencies | `any` |  | The dependencies value defined in the package.json |
-| showExtensions | `boolean` | true | Toggles showing/hiding of extensions block. |
-| regexp | `string` | "^(@alfresco)" | Regular expression for filtering dependencies packages. |
-
-## Details
-
-Use this component to display an overview of the dependencies and plugins used by an application.
@@ -1,38 +0,0 @@
---
-Title: About GitHub Link Component
-Added: v3.5.0
-Status: Experimental
-Last reviewed: 2019-09-09
---
-
-# [About GitHub Link Component](../../../lib/core/src/lib/about/about-github-link/about-github-link.component.ts "Defined in about-github-link.component.ts")
-
-Shows which version of the application is running based on the latest GitHub commit, as well as the server settings for the application.
-
-## Basic Usage
-
-With default input values:
-
-```html
-<adf-about-github-link></adf-about-github-link>
-```
-
-With custom input values:
-
-```html
-<adf-about-github-link
-    [url]=yourUrl"
-    [version]="yourVersion">
-</adf-about-github-link>
-```
-
-### Properties
-
-| Name | Type | Default value | Description |
-| ---- | ---- | ------------- | ----------- |
-| url | `string` |  | The GitHub commit that corresponds to the version of ADF in use. |
-| version | `string` | "3.x.x" | A number displaying the version of ADF in use. |
-
-## Details
-
-Use this component to display an overview of the latest GitHub commit and the server settings used by an application.
@@ -1,22 +0,0 @@
---
-Title: About Product Version Component
-Added: v3.5.0
-Status: Experimental
-Last reviewed: 2019-09-09
---
-
-# [About Product Version Component](lib/core/src/lib/about/about-product-version/about-product-version.component.ts "Defined in about-product-version.component.ts")
-
-Shows which version of Process Services (BPM) and Content Services (ECM) an application is running. It also shows the relevant license information, application status and Alfresco modules running in an application.
-
-## Basic Usage
-
-With default input values:
-
-```html
-<adf-about-product-version></adf-about-product-version>
-```
-
-## Details
-
-Use this component to display an overview of which version of Process Services and Content Services an application is running as well as the associated license information. It also displays application status and any modules running.
@@ -0,0 +1 @@
+../../../lib/core/src/lib/header/header.component.md
@@ -1,45 +0,0 @@
---
-Title: Host settings component
-Added: v2.0.0
-Status: Internal
-Last reviewed: 2019-01-16
---
-
-# [Host settings component](../../../lib/core/src/lib/settings/host-settings.component.ts "Defined in host-settings.component.ts")
-
-Validates the URLs for ACS and APS and saves them in the user's local storage
-
-**Note:** this is an internal component and is not meant to be used in production.
-
-![Host settings](../../docassets/images/host-settings-component.png)
-
-## Basic Usage
-
-```html
-<adf-host-settings>
-</adf-host-settings>
-```
-
-```ts
-@NgModule({
- providers: [
-        { provide: AppConfigService, useClass: DebugAppConfigService },
-    ]
-)]
-```
-
-## Class members
-
-### Properties
-
-| Name | Type | Default value | Description |
-| ---- | ---- | ------------- | ----------- |
-| providers | `string[]` |  | Tells the component which provider options are available. Possible valid values are "ECM" (Content), "BPM" (Process) , "ALL" (Content and Process), 'OAUTH2' SSO. |
-
-### Events
-
-| Name | Type | Description |
-| ---- | ---- | ----------- |
-| cancel | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>` | Emitted when the user cancels the changes. |
-| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<string>` | Emitted when the URL is invalid. |
-| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>` | Emitted when the changes are successfully applied. |
@@ -0,0 +1 @@
+../../../lib/core/src/lib/progress/progress.component.md
@@ -26,22 +26,23 @@ Displays a input text that supports autocompletion

 ### Properties

-| Name | Type | Default value | Description |
-| ---- | ---- | ------------- | ----------- |
-| autocomplete | `boolean` | false | Toggles auto-completion of the search input field. |
-| collapseOnBlur | `boolean` | true | Toggles whether to collapse the search on blur. |
-| collapseOnSubmit | `boolean` | true | Collapse search bar on submit. |
-| debounceTime | `number` | 0 | Debounce time in milliseconds. |
-| defaultState | `SearchTextStateEnum` |  | Default state expanded or Collapsed. |
-| expandable | `boolean` | true | Toggles whether to use an expanding search control. If false then a regular input is used. |
-| focusListener | [`Observable`](http://reactivex.io/documentation/observable.html)`<FocusEvent>` |  | Listener for results-list events (focus, blur and focusout). |
-| hintLabel | `string` | "" | Hint label |
-| inputType | `string` | "text" | Type of the input field to render, e.g. "search" or "text" (default). |
-| liveSearchEnabled | `boolean` | true | Toggles "find-as-you-type" suggestions for possible matches. |
-| placeholder | `string` | "" | Placeholder text to show in the input field |
-| searchAutocomplete | `any` | false | Trigger autocomplete results on input change. |
-| searchTerm | `string` | "" | Search term preselected |
-| showClearButton | `boolean` | false | Toggles whether to show a clear button that closes the search |
+| Name               | Type | Default value | Description                                                                                |
+|--------------------| ---- | ------------- |--------------------------------------------------------------------------------------------|
+| autocomplete       | `boolean` | false | Toggles auto-completion of the search input field.                                         |
+| collapseOnBlur     | `boolean` | true | Toggles whether to collapse the search on blur.                                            |
+| collapseOnSubmit   | `boolean` | true | Collapse search bar on submit.                                                             |
+| debounceTime       | `number` | 0 | Debounce time in milliseconds.                                                             |
+| defaultState       | `SearchTextStateEnum` |  | Default state expanded or Collapsed.                                                       |
+| expandable         | `boolean` | true | Toggles whether to use an expanding search control. If false then a regular input is used. |
+| focusListener      | [`Observable`](http://reactivex.io/documentation/observable.html)`<FocusEvent>` |  | Listener for results-list events (focus, blur and focusout).                               |
+| hintLabel          | `string` | "" | Hint label                                                                                 |
+| inputType          | `string` | "text" | Type of the input field to render, e.g. "search" or "text" (default).                      |
+| liveSearchEnabled  | `boolean` | true | Toggles "find-as-you-type" suggestions for possible matches.                               |
+| placeholder        | `string` | "" | Placeholder text to show in the input field                                                |
+| label              | `string` | "" | Label text to show over the input field                                                    |
+| searchAutocomplete | `any` | false | Trigger autocomplete results on input change.                                              |
+| searchTerm         | `string` | "" | Search term preselected                                                                    |
+| showClearButton    | `boolean` | false | Toggles whether to show a clear button that closes the search                              |

 ### Events

@@ -5,7 +5,7 @@ Status: Active
 Last reviewed: 2019-01-22
 ---

-# [Confirm dialog component](../../../lib/content-services/src/lib/dialogs/confirm.dialog.ts "Defined in confirm.dialog.ts")
+# [Confirm dialog component](../../../lib/core/src/lib/dialogs/confirm-dialog/confirm.dialog.ts "Defined in confirm.dialog.ts")

 Requests a yes/no choice from the user.

@@ -175,7 +175,7 @@ Is now possible add an extra button in the Confirm Dialog

 For more details refer to the:

-   [Confirm Dialog](../content-services/dialogs/confirm.dialog.md) 
+-   [Confirm Dialog](../core/dialogs/confirm.dialog.md) 

 ### Configuration option to change the default viewer zoom

@@ -441,7 +441,7 @@ backend services have been tested with each released version of ADF.
 <!--v230 start-->

 -   [Comment content service](core/services/comment-content.service.md)
-   [Confirm dialog](content-services/dialogs/confirm.dialog.md)
+-   [Confirm dialog](core/dialogs/confirm.dialog.md)
 -   [Content node share directive](content-services/directives/content-node-share.directive.md)
 -   [Custom resources service](content-services/services/custom-resources.service.md)
 -   [Inherited button directive](content-services/directives/inherited-button.directive.md)
@@ -16,4 +16,4 @@
 */

 export * from './components';
-export * from './stories/base.stories';
+export * from './stories/base-stories';
@@ -24,7 +24,7 @@ interface NavigationParameters {
    moduleNames: string[];
    componentName: string;
    story: string;
-};
+}

 export class BaseStories extends PlaywrightBase {
    private libraryName: string;
@@ -34,15 +34,13 @@ export class BaseStories extends PlaywrightBase {
        this.libraryName = libraryName;
    }

-    private buildStoryId({ moduleNames, componentName, story }: NavigationParameters): string{
+    private buildStoryId({ moduleNames, componentName, story }: NavigationParameters): string {
        const moduleNamesConcatenated = moduleNames.reduce((module, submodule) => module + '-' + submodule);
        return this.libraryName + '-' + moduleNamesConcatenated + '-' + componentName + '--' + story;
    }

    async navigateTo(navigationParameters: NavigationParameters): Promise<void> {
-        await this.page.goto(`/iframe.html?args=&viewMode=story&id=${this.buildStoryId(navigationParameters)}`, {
-            waitUntil: 'networkidle',
-            timeout: timeouts.large
-        });
+        await this.page.goto(`/iframe.html?viewMode=story&id=${this.buildStoryId(navigationParameters)}`);
+        await this.page.waitForSelector('storybook-root', { timeout: timeouts.large });
    }
 }
@@ -15,7 +15,15 @@
 * limitations under the License.
 */

-import { createApiService, CheckboxPage, LoginPage, UploadActions, UserModel, UsersActions, ViewerPage } from '@alfresco/adf-testing';
+import { createApiService,
+    CheckboxPage,
+    LoginPage,
+    UploadActions,
+    UserModel,
+    UsersActions,
+    ViewerPage,
+    TogglePage
+} from '@alfresco/adf-testing';
 import { MetadataViewPage } from '../../core/pages/metadata-view.page';
 import { FileModel } from '../../models/ACS/file.model';
 import { browser } from 'protractor';
@@ -37,6 +45,7 @@ describe('CardView Component - properties', () => {
    const viewerPage = new ViewerPage();
    const metadataViewPage = new MetadataViewPage();
    const contentServicesPage = new ContentServicesPage();
+    const togglePage = new TogglePage();

    let acsUser: UserModel;

@@ -127,13 +136,13 @@ describe('CardView Component - properties', () => {
        await viewerPage.checkInfoSideBarIsDisplayed();
        await metadataViewPage.clickOnPropertiesTab();

-        await CheckboxPage.uncheck(metadataViewPage.defaultPropertiesSwitch);
+        await togglePage.disableToggle(metadataViewPage.defaultPropertiesSwitch);

        await metadataViewPage.checkMetadataGroupIsNotPresent('properties');
        await metadataViewPage.checkMetadataGroupIsPresent('Versionable');
        await metadataViewPage.checkMetadataGroupIsExpand('Versionable');

-        await CheckboxPage.check(metadataViewPage.defaultPropertiesSwitch);
+        await togglePage.enableToggle(metadataViewPage.defaultPropertiesSwitch);

        await metadataViewPage.checkMetadataGroupIsPresent('properties');
        await metadataViewPage.checkMetadataGroupIsExpand('properties');
@@ -145,7 +154,11 @@ describe('CardView Component - properties', () => {
        await viewerPage.checkInfoSideBarIsDisplayed();
        await metadataViewPage.clickOnPropertiesTab();

-        await CheckboxPage.uncheck(metadataViewPage.defaultPropertiesSwitch);
+        await metadataViewPage.checkMetadataGroupIsPresent('properties');
+
+        await togglePage.disableToggle(metadataViewPage.defaultPropertiesSwitch);
+
+        await metadataViewPage.checkMetadataGroupIsNotPresent('properties');
    });

    it('[C307975] Should be able to choose which aspect to show expanded in the info-drawer', async () => {
@@ -35,7 +35,7 @@ export class ContentServicesPage {
    uploadBorder = $('#document-list-container');
    currentFolder = $('div[class*="adf-breadcrumb-item adf-active"] div');
    createFolderButton = $('button[data-automation-id="create-new-folder"]');
-    uploadFileButton = $('.adf-upload-button-file-container button');
+    uploadFileButton = $('.adf-upload-button-file-container label');
    uploadFileButtonInput = $('input[data-automation-id="upload-single-file"]');
    uploadMultipleFileButton = $('input[data-automation-id="upload-multiple-files"]');
    uploadFolderButton = $('input[data-automation-id="uploadFolder"]');
@@ -38,11 +38,12 @@ export class MetadataViewPage {
    multiSwitch = $(`#adf-metadata-multi`);
    defaultPropertiesSwitch = $('#adf-metadata-default-properties');
    closeButton = element(by.cssContainingText(`button${materialLocators.Button.class} span`, 'Close'));
-    displayAspect = $(`input[data-placeholder='Display Aspect']`);
-    applyAspect = element(by.cssContainingText(`button span${materialLocators.Button.wrapper}`, 'Apply Aspect'));
+    displayAspect = $(`input[placeholder='Display Aspect']`);
+    applyAspect = element(by.cssContainingText(`button span${materialLocators.Button.label}`, 'Apply Aspect'));
    saveMetadataButton = $(`[data-automation-id='save-metadata']`);
    saveGeneralMetadataButton = $(`[data-automation-id='save-general-info-metadata']`);
    resetMetadataButton = $(`[data-automation-id='reset-metadata']`);
+    informationButton = $(`button[data-automation-id='meta-data-card-toggle-expand']`);

    private getMetadataGroupLocator = async (groupName: string): Promise<ElementFinder> =>
        $(`[data-automation-id="adf-metadata-group-${groupName}"]`);
@@ -113,12 +114,7 @@ export class MetadataViewPage {
    }

    async clickOnPropertiesTab(): Promise<void> {
-        const propertiesTab = element(
-            by.cssContainingText(
-                `.adf-info-drawer-layout-content div${materialLocators.Tab.labels.class} div ${materialLocators.Tab.label.content.class}`,
-                `Properties`
-            )
-        );
+        const propertiesTab = element(by.cssContainingText(`.adf-info-drawer-layout-content ${materialLocators.Tab.labels.class}`, `Properties`));
        await BrowserActions.click(propertiesTab);
    }

@@ -274,4 +270,12 @@ export class MetadataViewPage {
    async clickSaveGeneralMetadata(): Promise<void> {
        await BrowserActions.click(this.saveGeneralMetadataButton);
    }
+
+    async informationButtonIsDisplayed(): Promise<void> {
+        await BrowserVisibility.waitUntilElementIsClickable(this.informationButton);
+    }
+
+    async informationButtonIsNotDisplayed(): Promise<void> {
+        await BrowserVisibility.waitUntilElementIsNotVisible(this.informationButton);
+    }
 }
@@ -18,12 +18,17 @@
 import { FormCloudComponentPage, LoginPage, ProcessCloudWidgetPage } from '@alfresco/adf-testing';

 import { NavigationBarPage } from '../../core/pages/navigation-bar.page';
-import { tabFieldValueVisibilityJson, tabVarValueVisibilityJson, tabVarFieldVisibilityJson,
-    tabFieldFieldVisibilityJson, tabFieldVarVisibilityJson, tabVarVarVisibilityJson,
-    tabNextOperatorsVisibilityJson } from '../../resources/forms/tab-visibility-conditions';
+import {
+    tabFieldValueVisibilityJson,
+    tabVarValueVisibilityJson,
+    tabVarFieldVisibilityJson,
+    tabFieldFieldVisibilityJson,
+    tabFieldVarVisibilityJson,
+    tabVarVarVisibilityJson,
+    tabNextOperatorsVisibilityJson
+} from '../../resources/forms/tab-visibility-conditions';

 describe('Visibility conditions on tabs - cloud', () => {
-
    const loginSSOPage = new LoginPage();
    const navigationBarPage = new NavigationBarPage();
    const formCloudDemoPage = new FormCloudComponentPage();
@@ -21,7 +21,7 @@ import { ProcessServicesPage } from '../pages/process-services.page';
 import { ChecklistDialog } from '../pages/dialog/create-checklist-dialog.page';
 import { NavigationBarPage } from '../../core/pages/navigation-bar.page';
 import { browser } from 'protractor';
-import CONSTANTS = require('../../util/constants');
+import * as CONSTANTS from '../../util/constants';

 describe('Checklist component', () => {
    const app = browser.params.resources.Files.SIMPLE_APP_WITH_USER_FORM;
@@ -75,7 +75,8 @@ describe('Checklist component', () => {
        await taskPage.tasksListPage().checkContentIsDisplayed(tasks[0]);
        await taskPage.tasksListPage().selectRow(tasks[0]);

-        await (await taskPage.clickOnAddChecklistButton()).clickCreateChecklistButton();
+        await taskPage.clickOnAddChecklistButton();
+        await checklistDialog.clickCreateChecklistButton();
        await taskPage.checkChecklistDialogIsNotDisplayed();
        await taskPage.checkNoChecklistIsDisplayed();
        expect(await taskPage.getNumberOfChecklists()).toEqual('0');
@@ -20,7 +20,7 @@ import { TasksPage } from './../pages/tasks.page';
 import { NavigationBarPage } from '../../core/pages/navigation-bar.page';
 import { ProcessServicesPage } from './../pages/process-services.page';
 import { browser } from 'protractor';
-import CONSTANTS = require('../../util/constants');
+import * as CONSTANTS from '../../util/constants';

 describe('People component', () => {
    const app = browser.params.resources.Files.SIMPLE_APP_WITH_USER_FORM;
@@ -21,8 +21,8 @@ import { BrowserVisibility, BrowserActions } from '@alfresco/adf-testing';
 export class ChecklistDialog {

    nameField = $('input[data-automation-id="checklist-name"]');
-    addChecklistButton = $('button[id="add-check"] span');
-    closeButton = $('button[id="close-check-dialog"] span');
+    addChecklistButton = $('button[id="add-check"]');
+    closeButton = $('button[id="close-check-dialog"]');
    dialogTitle = $('#add-checklist-title');

    async addName(name: string): Promise<void> {
@@ -42,7 +42,7 @@ export class ChecklistDialog {
    }

    async getNameFieldPlaceholder(): Promise<string> {
-        return BrowserActions.getAttribute(this.nameField, 'data-placeholder');
+        return BrowserActions.getAttribute(this.nameField, 'placeholder');
    }

    async checkCancelButtonIsEnabled(): Promise<void> {
@@ -58,7 +58,7 @@ export class StartTaskDialogPage {
    }

    async getAssignee(): Promise<string> {
-        return BrowserActions.getAttribute(this.assignee, 'data-placeholder');
+        return BrowserActions.getAttribute(this.assignee, 'placeholder');
    }

    async selectForm(form): Promise<void> {
@@ -20,19 +20,19 @@ import { element, by, browser } from 'protractor';

 export class ProcessServiceTabBarPage {

-    tasksButton = element.all(by.cssContainingText(`div[class*="${materialLocators.Tab.label.root}"] ${materialLocators.Tab.labels.class} div`, 'Tasks')).first();
-    processButton = element.all(by.cssContainingText(`div[class*="${materialLocators.Tab.label.root}"] ${materialLocators.Tab.labels.class} div`, 'Process')).first();
-    reportsButton = element.all(by.cssContainingText(`div[class*="${materialLocators.Tab.label.root}"] ${materialLocators.Tab.labels.class} div`, 'Reports')).first();
-    reportsButtonSelected = element.all(by.cssContainingText(`div[class*="${materialLocators.Tab.label.root}"] ${materialLocators.Tab.labels.class} div[aria-selected="true"]`, 'Reports')).first();
+    tasksButton = element.all(by.cssContainingText(`div${materialLocators.Tab.labels.container.class} ${materialLocators.Tab.labels.class}`, 'Tasks')).first();
+    processButton = element.all(by.cssContainingText(`div${materialLocators.Tab.labels.container.class} ${materialLocators.Tab.labels.class}`, 'Process')).first();
+    reportsButton = element.all(by.cssContainingText(`div${materialLocators.Tab.labels.container.class} ${materialLocators.Tab.labels.class}`, 'Reports')).first();
+    reportsButtonSelected = element.all(by.cssContainingText(`div${materialLocators.Tab.labels.container.class} ${materialLocators.Tab.labels.class} div[aria-selected="true"]`, 'Reports')).first();

    async clickTasksButton(): Promise<void> {
        await BrowserActions.click(this.tasksButton);
-        await browser.sleep(500);
+        await browser.sleep(100);
    }

    async clickProcessButton(): Promise<void> {
        await BrowserActions.click(this.processButton);
-        await browser.sleep(500);
+        await browser.sleep(100);
    }

    async clickReportsButton(): Promise<void> {
@@ -180,7 +180,7 @@ export class TaskDetailsPage {
    }

    async getDescriptionPlaceholder(): Promise<string> {
-        return BrowserActions.getAttribute(this.descriptionField, 'data-placeholder');
+        return BrowserActions.getAttribute(this.descriptionField, 'placeholder');
    }

    getDueDate(): Promise<string> {
@@ -310,7 +310,7 @@ export class TaskDetailsPage {
    }

    async getInvolvePeoplePlaceholder(): Promise<string> {
-        return BrowserActions.getAttribute(this.addPeopleField, 'data-placeholder');
+        return BrowserActions.getAttribute(this.addPeopleField, 'placeholder');
    }

    async checkCancelButtonIsEnabled(): Promise<void> {
@@ -43,7 +43,7 @@ export class TaskFiltersDemoPage {
        return new TaskFiltersPage(this.involvedTask);
    }

-    customTaskFilter(filterName: string): TaskFiltersPage {
+      customTaskFilter(filterName: string): TaskFiltersPage {
        return new TaskFiltersPage($(`button[data-automation-id="${filterName}_filter"]`));
    }

@@ -21,6 +21,8 @@ import { browser, $, $$ } from 'protractor';
 export class TasksListPage {

    taskList = $('adf-tasklist');
+    selectedTab = $('[data-automation-id="navigation-bar"] .mdc-tab--active .mdc-tab__text-label');
+    taskTab = $$('[data-automation-id="navigation-bar"] .mdc-tab__text-label').first();
    noTasksFound = $$('.adf-empty-content__title').first();
    dataTable = new DataTableComponentPage(this.taskList);

@@ -61,4 +63,11 @@ export class TasksListPage {
        return BrowserActions.getText(this.noTasksFound);
    }

+    async selectTaskTab() {
+        const currentTab = await BrowserActions.getText(this.selectedTab);
+        if(currentTab && currentTab.toLowerCase().trim() !== 'tasks') {
+            await BrowserActions.click(this.taskTab);
+        }
+    }
+
 }
@@ -27,13 +27,13 @@ import { BrowserActions, BrowserVisibility, FormFields, materialLocators } from
 export class TasksPage {
    createButton = $('button[data-automation-id="create-button"');
    addChecklistButton = $('button[class*="adf-add-to-checklist-button"]');
-    rowByRowName = by.xpath(`ancestor::${materialLocators.Chip.root}`);
+    rowByRowName = by.xpath(`ancestor::${materialLocators.Chip.list.option.class}`);
    checklistContainer = $('div[class*="checklist-menu"]');
    taskTitle = '.adf-activiti-task-details__header span';
    completeButtonNoForm = $('#adf-no-form-complete-button');
    checklistDialog = $('#checklist-dialog');
    checklistNoMessage = $('#checklist-none-message');
-    numberOfChecklists = $(`[data-automation-id="checklist-label"] ${materialLocators.Chip.root}`);
+    numberOfChecklists = $(`[data-automation-id="checklist-label"] ${materialLocators.Chip.list.option.value}`);

    async createNewTask(): Promise<StartTaskDialogPage> {
        await this.clickOnCreateButton();
@@ -82,7 +82,7 @@ export class TasksPage {
    }

    getRowsName(name: string) {
-        return this.checklistContainer.element(by.cssContainingText('span', name));
+        return this.checklistContainer.element(by.cssContainingText(`span${materialLocators.Chip.list.option.value}`, name));
    }

    getChecklistByName(name: string) {
@@ -95,6 +95,7 @@ describe('Task Filters Sorting', () => {
        await userFiltersUtil.createUserTaskFilter(newFilter);

        await browser.refresh();
+        await tasksListPage.selectTaskTab();
        await taskFiltersDemoPage.customTaskFilter(newFilter.name).clickTaskFilter();

        expect(await tasksListPage.getDataTable().contentInPosition(1)).toBe(tasks[2].name);
@@ -18,7 +18,7 @@
 import { createApiService, ApplicationsUtil, LoginPage, ProcessUtil, UsersActions, Widget, UserModel } from '@alfresco/adf-testing';
 import { TasksPage } from '../pages/tasks.page';
 import { browser } from 'protractor';
-import CONSTANTS = require('../../util/constants');
+import * as CONSTANTS from '../../util/constants';
 import { ProcessServicesPage } from '../pages/process-services.page';
 import { AppDefinitionRepresentation, ProcessInstanceRepresentation } from '@alfresco/js-api';

@@ -65,6 +65,12 @@ describe('Checkbox Widget', () => {
        await usersActions.deleteTenant(processUserModel.tenantId);
    });

+    it('[C272812] Should be able to set visibility settings for Checkbox widget', async () => {
+        await widget.checkboxWidget().isCheckboxHidden(app.FIELD.checkbox_field_id);
+        await taskPage.formFields().setValueInInputById(app.FIELD.number_input_id, '2');
+        await widget.checkboxWidget().isCheckboxDisplayed(app.FIELD.checkbox_field_id);
+    });
+
    it('[C268554] Should be able to set general settings for Checkbox widget ', async () => {
        await taskPage.formFields().setValueInInputById(app.FIELD.number_input_id, '2');
        expect(await widget.checkboxWidget().getCheckboxLabel()).toContain(app.FIELD.checkbox_label);
@@ -72,10 +78,4 @@ describe('Checkbox Widget', () => {
        await widget.checkboxWidget().clickCheckboxInput(app.FIELD.checkbox_input_id);
        expect(await taskPage.formFields().isCompleteFormButtonEnabled()).toEqual(true);
    });
-
-    it('[C272812] Should be able to set visibility settings for Checkbox widget', async () => {
-        await widget.checkboxWidget().isCheckboxHidden(app.FIELD.checkbox_field_id);
-        await taskPage.formFields().setValueInInputById(app.FIELD.number_input_id, '2');
-        await widget.checkboxWidget().isCheckboxDisplayed(app.FIELD.checkbox_field_id);
-    });
 });
@@ -8,8 +8,8 @@
  "C280063": "https://alfresco.atlassian.net/browse/ACS-4595",
  "C280064": "https://alfresco.atlassian.net/browse/ACS-4595",
  "C313200": "https://alfresco.atlassian.net/browse/APPS-2234",
-  "C311318-3": "https://alfresco.atlassian.net/browse/APPS-2254",
  "C311319-2": "https://alfresco.atlassian.net/browse/APPS-2254",
+  "C311318-3": "https://alfresco.atlassian.net/browse/APPS-2254",
  "C311319-4": "https://alfresco.atlassian.net/browse/APPS-2254",
  "C297691": "https://alfresco.atlassian.net/browse/APPS-2254",
  "C297692": "https://alfresco.atlassian.net/browse/ACS-6244",
@@ -32,10 +32,14 @@ const createField = (id = 'TextTwo', name = 'TextTwo') => ({
    }
 });

-const createFieldDefinition = (id = 'dcde7e13-2444-48bc-ab30-32902cea549e', tabName = '71da814d-5580-4f1f-972a-8089253aeded', fields = {
-    1: [createField()],
-    2: []
-}) => ({
+const createFieldDefinition = (
+    id = 'dcde7e13-2444-48bc-ab30-32902cea549e',
+    tabName = '71da814d-5580-4f1f-972a-8089253aeded',
+    fields = {
+        1: [createField()],
+        2: []
+    }
+) => ({
    id,
    name: 'Label',
    type: 'container',
@@ -57,7 +61,14 @@ const fieldDefinition3 = createFieldDefinition('df452297-d0e8-4406-b9d3-10842033
 const fieldsDefinitions1 = [fieldDefinition1, fieldDefinition2];
 const fieldsDefinitions2 = [fieldDefinition1, fieldDefinition3];

-const createVisibilityCondition = (leftType = 'field', leftValue = 'TextOne', nextCondition?: any, rightValue = 'showTab', rightType = 'value', operator = '==') => ({
+const createVisibilityCondition = (
+    leftType = 'field',
+    leftValue = 'TextOne',
+    nextCondition?: any,
+    rightValue = 'showTab',
+    rightType = 'value',
+    operator = '=='
+) => ({
    leftType,
    leftValue,
    operator,
@@ -67,39 +78,44 @@ const createVisibilityCondition = (leftType = 'field', leftValue = 'TextOne', ne
    nextCondition
 });

-const createTab = (id = '71da814d-5580-4f1f-972a-8089253aeded', title = 'tabBasicFieldValue', visibilityCondition = createVisibilityCondition('field', 'TextOne', null)) => ({
+const createTab = (
+    id = '71da814d-5580-4f1f-972a-8089253aeded',
+    title = 'tabBasicFieldValue',
+    visibilityCondition = createVisibilityCondition('field', 'TextOne', null)
+) => ({
    id,
    title,
    visibilityCondition
 });

-const createTabVisibilityJson = (tabs = [
-    createTab(),
-    createTab('442eea0b-65f9-484e-b37f-f5a91d5e1f21', 'tabWithFields', null)
-], fields = [
-    createFieldDefinition(),
-    createFieldDefinition('df452297-d0e8-4406-b9d3-10842033549d', '442eea0b-65f9-484e-b37f-f5a91d5e1f21', {
-        1: [
-            {
-                id: 'TextOne',
-                name: 'TextOne',
-                type: 'text',
-                required: false,
-                colspan: 1,
-                placeholder: null,
-                minLength: 0,
-                maxLength: 0,
-                regexPattern: null,
-                visibilityCondition: null,
-                params: {
-                    existingColspan: 1,
-                    maxColspan: 2
+const createTabVisibilityJson = (
+    tabs = [createTab(), createTab('442eea0b-65f9-484e-b37f-f5a91d5e1f21', 'tabWithFields', null)],
+    fields = [
+        createFieldDefinition(),
+        createFieldDefinition('df452297-d0e8-4406-b9d3-10842033549d', '442eea0b-65f9-484e-b37f-f5a91d5e1f21', {
+            1: [
+                {
+                    id: 'TextOne',
+                    name: 'TextOne',
+                    type: 'text',
+                    required: false,
+                    colspan: 1,
+                    placeholder: null,
+                    minLength: 0,
+                    maxLength: 0,
+                    regexPattern: null,
+                    visibilityCondition: null,
+                    params: {
+                        existingColspan: 1,
+                        maxColspan: 2
+                    }
                }
-            }
-        ],
-        2: []
-    })
-], variables = []) => ({
+            ],
+            2: []
+        })
+    ],
+    variables = []
+) => ({
    formRepresentation: {
        id: 'form-3aff57d3-62af-4adf-9b14-1d8f44a28077',
        name: 'tabvisibility',
@@ -118,89 +134,109 @@ const createTabVisibilityJson = (tabs = [

 export const tabFieldValueVisibilityJson = createTabVisibilityJson();

-export const tabVarValueVisibilityJson = createTabVisibilityJson([
-    createTab('71da814d-5580-4f1f-972a-8089253aeded', 'tabBasicVarValue', createVisibilityCondition('variable', 'stringVar'))
-], [fieldDefinition1], [
-    {
-        id: '803269e6-a568-40e2-aec3-75ad2f411688',
-        name: 'stringVar',
-        type: 'string',
-        value: 'showTab'
-    }
-]);
+export const tabVarValueVisibilityJson = createTabVisibilityJson(
+    [createTab('71da814d-5580-4f1f-972a-8089253aeded', 'tabBasicVarValue', createVisibilityCondition('variable', 'stringVar'))],
+    [fieldDefinition1],
+    [
+        {
+            id: '803269e6-a568-40e2-aec3-75ad2f411688',
+            name: 'stringVar',
+            type: 'string',
+            value: 'showTab'
+        }
+    ]
+);

-export const tabVarFieldVisibilityJson = createTabVisibilityJson([
-    createTab(
-        '71da814d-5580-4f1f-972a-8089253aeded',
-        'tabBasicVarField',
-        createVisibilityCondition('variable', 'stringVar', undefined, 'TextOne', 'field')
-    ),
-    createTab('0e538a28-f8d6-4cb8-ae93-dbfb2efdf3b1', 'tabWithFields', null)
-], fieldsDefinitions1, [
-    {
-        id: '803269e6-a568-40e2-aec3-75ad2f411688',
-        name: 'stringVar',
-        type: 'string',
-        value: 'showTab'
-    }
-]);
+export const tabVarFieldVisibilityJson = createTabVisibilityJson(
+    [
+        createTab(
+            '71da814d-5580-4f1f-972a-8089253aeded',
+            'tabBasicVarField',
+            createVisibilityCondition('variable', 'stringVar', undefined, 'TextOne', 'field')
+        ),
+        createTab('0e538a28-f8d6-4cb8-ae93-dbfb2efdf3b1', 'tabWithFields', null)
+    ],
+    fieldsDefinitions1,
+    [
+        {
+            id: '803269e6-a568-40e2-aec3-75ad2f411688',
+            name: 'stringVar',
+            type: 'string',
+            value: 'showTab'
+        }
+    ]
+);

-export const tabFieldFieldVisibilityJson = createTabVisibilityJson([
-    createTab(
-        '71da814d-5580-4f1f-972a-8089253aeded',
-        'tabBasicFieldField',
-        createVisibilityCondition('field', 'TextThree', undefined, 'TextOne', 'field')
-    ),
-    createTab('442eea0b-65f9-484e-b37f-f5a91d5e1f21', 'tabWithFields', null)
-], fieldsDefinitions2);
+export const tabFieldFieldVisibilityJson = createTabVisibilityJson(
+    [
+        createTab(
+            '71da814d-5580-4f1f-972a-8089253aeded',
+            'tabBasicFieldField',
+            createVisibilityCondition('field', 'TextThree', undefined, 'TextOne', 'field')
+        ),
+        createTab('442eea0b-65f9-484e-b37f-f5a91d5e1f21', 'tabWithFields', null)
+    ],
+    fieldsDefinitions2
+);

-export const tabFieldVarVisibilityJson = createTabVisibilityJson([
-    createTab(
-        '71da814d-5580-4f1f-972a-8089253aeded',
-        'tabBasicVarField',
-        createVisibilityCondition('field', 'TextOne', undefined, 'stringVar', 'variable')
-    ),
-    createTab('0e538a28-f8d6-4cb8-ae93-dbfb2efdf3b1', 'tabWithFields', null)
-], fieldsDefinitions1, [
-    {
-        id: '803269e6-a568-40e2-aec3-75ad2f411688',
-        name: 'stringVar',
-        type: 'string',
-        value: 'showTab'
-    }
-]);
+export const tabFieldVarVisibilityJson = createTabVisibilityJson(
+    [
+        createTab(
+            '71da814d-5580-4f1f-972a-8089253aeded',
+            'tabBasicVarField',
+            createVisibilityCondition('field', 'TextOne', undefined, 'stringVar', 'variable')
+        ),
+        createTab('0e538a28-f8d6-4cb8-ae93-dbfb2efdf3b1', 'tabWithFields', null)
+    ],
+    fieldsDefinitions1,
+    [
+        {
+            id: '803269e6-a568-40e2-aec3-75ad2f411688',
+            name: 'stringVar',
+            type: 'string',
+            value: 'showTab'
+        }
+    ]
+);

-export const tabVarVarVisibilityJson = createTabVisibilityJson([
-    createTab(
-        'ef512cb3-0c41-4d12-84ef-a7ef8f0b111a',
-        'tabBasicVarVar',
-        createVisibilityCondition('variable', 'showTabOne', undefined, 'showTabTwo', 'variable')
-    )
-], [
-    createFieldDefinition('6eeb9e54-e51d-44f3-9557-503308f07361', 'ef512cb3-0c41-4d12-84ef-a7ef8f0b111a', {
-        1: [createField('TextOne', 'TextOne')],
-        2: []
-    })
-], [
-    {
-        id: 'b116df99-f6b5-45f8-b48c-15b74f7f1c92',
-        name: 'showTabOne',
-        type: 'string',
-        value: 'showTab'
-    },
-    {
-        id: '6e3e88ab-848c-4f48-8326-a404d1427f60',
-        name: 'showTabTwo',
-        type: 'string',
-        value: 'showTab'
-    }
-]);
+export const tabVarVarVisibilityJson = createTabVisibilityJson(
+    [
+        createTab(
+            'ef512cb3-0c41-4d12-84ef-a7ef8f0b111a',
+            'tabBasicVarVar',
+            createVisibilityCondition('variable', 'showTabOne', undefined, 'showTabTwo', 'variable')
+        )
+    ],
+    [
+        createFieldDefinition('6eeb9e54-e51d-44f3-9557-503308f07361', 'ef512cb3-0c41-4d12-84ef-a7ef8f0b111a', {
+            1: [createField('TextOne', 'TextOne')],
+            2: []
+        })
+    ],
+    [
+        {
+            id: 'b116df99-f6b5-45f8-b48c-15b74f7f1c92',
+            name: 'showTabOne',
+            type: 'string',
+            value: 'showTab'
+        },
+        {
+            id: '6e3e88ab-848c-4f48-8326-a404d1427f60',
+            name: 'showTabTwo',
+            type: 'string',
+            value: 'showTab'
+        }
+    ]
+);

-export const tabNextOperatorsVisibilityJson = createTabVisibilityJson([
-    createTab(
-        '71da814d-5580-4f1f-972a-8089253aeded',
-        'tabNextOperators',
-        createVisibilityCondition('field', 'TextOne', createVisibilityCondition('field', 'TextThree', null, 'showTab', 'value', '!='))
-    ),
-    createTab('442eea0b-65f9-484e-b37f-f5a91d5e1f21', 'tabWithFields', null)
-], fieldsDefinitions2);
+export const tabNextOperatorsVisibilityJson = createTabVisibilityJson(
+    [
+        createTab(
+            '71da814d-5580-4f1f-972a-8089253aeded',
+            'tabNextOperators',
+            createVisibilityCondition('field', 'TextOne', createVisibilityCondition('field', 'TextThree', null, 'showTab', 'value', '!='))
+        ),
+        createTab('442eea0b-65f9-484e-b37f-f5a91d5e1f21', 'tabWithFields', null)
+    ],
+    fieldsDefinitions2
+);
@@ -318,6 +318,7 @@ describe('Search Number Range Filter', () => {
        expect(await sizeRangeFilter.getFromNumber()).toEqual('');
        expect(await sizeRangeFilter.getToNumber()).toEqual('');

+        await dataTable.waitTillContentLoaded();
        const resultsSize = (await dataTable.geCellElementDetail('Size')) as ElementFinder[];
        for (const currentResult of resultsSize) {
            const currentSize = await BrowserActions.getAttribute(currentResult, 'title');
@@ -99,7 +99,7 @@ describe('Search Slider Filter', () => {
    });

    it('[C276972] Should be keep value when Search Size Slider is collapsed', async () => {
-        const size = 5;
+        const size = 10;

        await searchFilters.checkSizeSliderFilterIsDisplayed();
        await searchFilters.clickSizeSliderFilterHeader();
@@ -107,9 +107,9 @@ describe('Search Slider Filter', () => {
        await sizeSliderFilter.setValue(size);
        await searchFilters.clickSizeSliderFilterHeader();
        await searchFilters.checkSizeSliderFilterIsCollapsed();
+        await searchFilters.checkSizeSliderFilterIsDisplayed();
        await searchFilters.clickSizeSliderFilterHeader();
        await searchFilters.checkSizeSliderFilterIsExpanded();
-        await searchFilters.checkSizeSliderFilterIsDisplayed();

        expect(await sizeSliderFilter.getValue()).toEqual(`${size}`);
    });
@@ -23,7 +23,7 @@ export class SearchBarPage {
    searchBar = $(`adf-search-control input`);
    searchBarExpanded = TestElement.byCss(`adf-search-control ${materialLocators.Form.field.root}[class*="${materialLocators.Focused.root}"] input`);
    noResultMessage = $(`p[class*='adf-search-fixed-text']`);
-    rowsAuthor = `${materialLocators.List.text.class} p[class*='adf-search-fixed-text']`;
+    rowsAuthor = `${materialLocators.List.content.class} p[class*='adf-search-fixed-text']`;
    completeName = `h4[class*='adf-search-fixed-text']`;
    highlightName = `.adf-highlight`;
    searchBarPage = $(`${materialLocators.List.root}[id='autocomplete-search-result-list']`);
@@ -199,7 +199,7 @@ describe('Search Filters', () => {
    it('[C287796] Should be able to display the correct bucket number after selecting a filter', async () => {
        await BrowserActions.getUrl(`${browser.baseUrl}/search;q=*`);

-        await searchFiltersPage.fileTypeCheckListFiltersPage().clickCheckListOption('PNG Image');
+        await searchFiltersPage.fileTypeCheckListFiltersPage().clickCheckListOption('PNG');

        const bucketNumberForFilter = await searchFiltersPage.fileTypeCheckListFiltersPage().getBucketNumberOfFilterType(filter.type);
        const resultFileNames: any = await contentList.getAllRowsColumnValues('Display name');
@@ -9,7 +9,7 @@
      "version": "6.9.0",
      "license": "Apache-2.0",
      "dependencies": {
-        "@alfresco/js-api": ">=7.7.0",
+        "@alfresco/js-api": ">=7.8.0",
        "commander": "^6.2.1",
        "ejs": "^3.1.9",
        "license-checker": "^25.0.1",
@@ -30,9 +30,9 @@
      }
    },
    "node_modules/@alfresco/js-api": {
-      "version": "7.7.0",
-      "resolved": "https://registry.npmjs.org/@alfresco/js-api/-/js-api-7.7.0.tgz",
-      "integrity": "sha512-qD88MfQ+7fBv3vFi0Ju1oEaDAE9L+VxISlmpXZq1HYkBCNcSrqbFwi8ZCBPb3gZPnKG88edebTTqC6MYsusFmQ==",
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/@alfresco/js-api/-/js-api-7.8.0.tgz",
+      "integrity": "sha512-3y5WwtvsEkwAB3WaFC9Ec+QMzvPmZccJ7Em06lVBDwxtFgZ1F2CisVNepWgZLoCSkCH8Lgm6e4Tr0L93S3AmoQ==",
      "dependencies": {
        "event-emitter": "^0.3.5",
        "superagent": "^9.0.1",
@@ -4,12 +4,12 @@
  "version": "6.9.0",
  "author": "Hyland Software, Inc. and its affiliates",
  "bin": {
-    "adf-cli": "./bin/adf-cli",
-    "adf": "./bin/adf-cli"
+    "adf-cli": "bin/adf-cli",
+    "adf": "bin/adf-cli"
  },
  "repository": {
    "type": "git",
-    "url": "https://github.com/Alfresco/alfresco-ng2-components.git"
+    "url": "git+https://github.com/Alfresco/alfresco-ng2-components.git"
  },
  "bugs": {
    "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
@@ -0,0 +1,65 @@
+{
+  "name": "cli",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "lib/cli",
+  "projectType": "library",
+  "prefix": "adf",
+  "targets": {
+    "build": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "cd lib/cli && npm i && npm run dist",
+        "stylePreprocessorOptions": {
+          "includePaths": ["lib", "lib/core/src/lib"]
+        }
+      },
+      "configurations": {
+        "production": {
+          "tsConfig": "lib/cli/tsconfig.json"
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "bundle": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          {
+            "command": "echo cli bundle created"
+          }
+        ]
+      },
+      "dependsOn": ["copyToNodeModules"]
+    },
+    "copyToNodeModules": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          {
+            "command": "rm -rf ./node_modules/@alfresco/adf-cli/ && mkdir -p ./node_modules/@alfresco/adf-cli/ && cp -R ./dist/libs/cli/* ./node_modules/@alfresco/adf-cli/"
+          }
+        ]
+      },
+      "dependsOn": ["build"]
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "options": {
+        "lintFilePatterns": ["lib/cli/**/*.ts", "lib/cli/**/*.html"]
+      }
+    },
+    "npm-publish": {
+      "executor": "nx:run-commands",
+      "dependsOn": ["build"],
+      "options": {
+        "cwd": "dist/libs/cli",
+        "commands": [
+          {
+            "command": "npm publish --tag {args.tag}",
+            "forwardAllArgs": true
+          }
+        ]
+      }
+    }
+  }
+}
@@ -51,7 +51,7 @@ export default function main(_args: string[], workingDir: string) {
        exit(0);
    }

-    const options = program.opts<AuditCommandArgs>();
+    const options: AuditCommandArgs = program.opts();

    let packagePath = path.resolve(workingDir, 'package.json');

@@ -50,7 +50,7 @@ export default async function main() {
        .option('-r, --retry [type]', 'retry ')
        .parse(argv);

-    const opts = program.opts<CheckCsEnvArgs>();
+    const opts = program.opts();
    await checkEnv(opts);
    // TODO: https://alfresco.atlassian.net/browse/ACS-5873
    // await checkDiskSpaceFullEnv();
@@ -50,7 +50,7 @@ export default async function main() {
        .option('--ui, --uiName [type]', 'uiName', 'Deployed app UI type on activiti-cloud')
        .parse(argv);

-    const options = program.opts<CheckPluginArgs>();
+    const options: CheckPluginArgs = program.opts();

    pluginEnv = new CheckEnv(options.host, options.username, options.password, options.clientId);
    await pluginEnv.checkEnv();
@@ -755,7 +755,7 @@ export default async function main() {
        return;
    }

-    const options = initializeDefaultToken(program.opts());
+    const options = initializeDefaultToken(program.opts() as ConfigArgs);

    args = {
        host: options.host,
@@ -49,7 +49,7 @@ export default async function main() {
        .option('-u, --username [type]', 'username ')
        .parse(argv);

-    const opts = program.opts<InitAcsEnvArgs>();
+    const opts = program.opts();
    await checkEnv(opts);

    logger.info(`***** Step initialize ACS *****`);
@@ -65,7 +65,7 @@ export default async function main() {
        .option('--license [type]', 'APS license S3 path ')
        .parse(argv);

-    const opts = program.opts<InitApsEnvArgs>();
+    const opts = program.opts();
    await checkEnv(opts);

    logger.info(`***** Step 1 - Check License *****`);
@@ -115,7 +115,7 @@ export default function main(_args: string[], workingDir: string) {
        exit(0);
    }

-    const options = program.opts<LicensesCommandArgs>();
+    const options: LicensesCommandArgs = program.opts();
    let packagePath = path.resolve(workingDir, 'package.json');

    if (options.package) {
@@ -1,9 +1,27 @@
-const rootMain = require('../../../.storybook/main');
+var rootPath = require('../../../.storybook/main');

 module.exports = {
-    ...rootMain,
-    core: { ...rootMain.core, builder: 'webpack5' },
-    stories: [...rootMain.stories, '../**/*.stories.@(js|jsx|ts|tsx)'],
-    staticDirs: [...rootMain.staticDirs, { from: __dirname + '/../src/lib/i18n', to: 'assets/adf-content-services/i18n' }],
-    addons: [...rootMain.addons]
+    rootMain: rootPath,
+    stories: [...rootPath.stories, '../**/*.stories.@(js|jsx|ts|tsx)'],
+
+    staticDirs: [
+        ...rootPath.staticDirs,
+        { from: __dirname + '/../src/lib/i18n', to: 'assets/adf-core/i18n' },
+        { from: __dirname + '/../src/lib/assets/images', to: 'assets/images' }
+    ],
+
+    addons: ['@storybook/addon-essentials', ...rootPath.addons],
+
+    framework: {
+        name: '@storybook/angular',
+        options: {}
+    },
+
+    docs: {
+        autodocs: true
+    },
+
+    core: {
+        builder: '@storybook/builder-webpack5'
+    }
 };
@@ -1,6 +1,6 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 import alfrescoTheme from '../../../.storybook/alfrescoTheme';

 addons.setConfig({
-  theme: alfrescoTheme,
+    theme: alfrescoTheme
 });
@@ -0,0 +1,111 @@
+{
+  "name": "content-services",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "lib/content-services/src",
+  "projectType": "library",
+  "prefix": "adf",
+  "targets": {
+    "build": {
+      "executor": "@angular-devkit/build-angular:ng-packagr",
+      "options": {
+        "tsConfig": "lib/content-services/tsconfig.lib.json",
+        "project": "lib/content-services/ng-package.json"
+      },
+      "configurations": {
+        "production": {
+          "project": "lib/content-services/ng-package.json",
+          "tsConfig": "lib/content-services/tsconfig.lib.prod.json"
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "test": {
+      "executor": "@angular-devkit/build-angular:karma",
+      "options": {
+        "main": "lib/content-services/src/test.ts",
+        "tsConfig": "lib/content-services/tsconfig.spec.json",
+        "karmaConfig": "lib/content-services/karma.conf.js",
+        "sourceMap": true,
+        "codeCoverage": true,
+        "stylePreprocessorOptions": {
+          "includePaths": ["lib", "lib/core/src/lib"]
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "options": {
+        "lintFilePatterns": ["lib/content-services/**/*.ts", "lib/content-services/**/*.html"]
+      }
+    },
+    "storybook": {
+      "executor": "@storybook/angular:start-storybook",
+      "options": {
+        "port": 4400,
+        "browserTarget": "content-services:storybook",
+        "configDir": "lib/content-services/.storybook",
+        "compodoc": false,
+        "styles": [
+          "demo-shell/src/styles.scss",
+          "demo-shell/src/custom-style-dev.scss",
+          "node_modules/cropperjs/dist/cropper.min.css",
+          "node_modules/pdfjs-dist/web/pdf_viewer.css"
+        ],
+        "stylePreprocessorOptions": {
+          "includePaths": ["lib", "lib/core/src/lib"]
+        }
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "build-storybook": {
+      "executor": "@storybook/angular:build-storybook",
+      "options": {
+        "browserTarget": "content-services:build-storybook",
+        "configDir": "lib/content-services/.storybook",
+        "outputDir": "dist/storybook/content-services",
+        "compodoc": false,
+        "styles": [
+          "demo-shell/src/styles.scss",
+          "demo-shell/src/custom-style-dev.scss",
+          "node_modules/cropperjs/dist/cropper.min.css",
+          "node_modules/pdfjs-dist/web/pdf_viewer.css"
+        ],
+        "stylePreprocessorOptions": {
+          "includePaths": ["lib", "lib/core/src/lib"]
+        }
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "stylelint": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          {
+            "command": "npx stylelint lib/content-services/**/*.scss --config stylelint-config.json"
+          }
+        ]
+      }
+    },
+    "npm-publish": {
+      "executor": "nx:run-commands",
+      "dependsOn": ["build"],
+      "options": {
+        "cwd": "dist/libs/content-services",
+        "commands": [
+          {
+            "command": "npm publish --tag {args.tag}",
+            "forwardAllArgs": true
+          }
+        ]
+      }
+    }
+  }
+}
@@ -1,3 +1,13 @@
+@import 'styles/mat-selectors';
+
+adf-aspect-list-dialog {
+    display: block;
+
+    #{$mat-expansion-panel-body} {
+        margin-top: -2px;
+    }
+}
+
 .adf {
    &-aspect-list-dialog-title {
        font-size: large;
@@ -13,21 +23,34 @@
    &-aspect-list-dialog-information {
        display: flex;
        justify-content: space-between;
-        padding-left: 5px;
-        padding-right: 5px;
+        padding-bottom: 4px;
+        padding-left: 4px;
+        padding-right: 4px;
        font-size: small;
    }

    &-aspect-list-dialog {
        justify-content: space-between;
+        padding-left: 4px;
+        padding-right: 4px;
+        padding-top: 0;
+
+        #{$mat-dialog-content} {
+            padding: 0;
+        }
+
+        &::before {
+            display: none;
+        }
    }

    &-aspect-dialog-content {
-        padding-top: 3px;
+        margin-bottom: 8px;

        .adf-aspect-property-table {
            .adf-aspect-property-table-cell {
                font-size: smaller;
+                color: var(--adf-theme-foreground-text-color-087);
            }

            .adf-aspect-property-table-column {
@@ -27,6 +27,7 @@ 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 { HttpClientTestingModule } from '@angular/common/http/testing';

 const aspectListMock: AspectEntry[] = [
    {
@@ -113,7 +114,7 @@ describe('AspectListDialogComponent', () => {
            excludedAspects: []
        };
        await TestBed.configureTestingModule({
-            imports: [ContentTestingModule, MatDialogModule],
+            imports: [HttpClientTestingModule, ContentTestingModule, MatDialogModule],
            providers: [
                { provide: MAT_DIALOG_DATA, useValue: data },
                {
@@ -1,3 +1,4 @@
+@import 'styles/mat-selectors';
 $dialog-title-height: 100px;
 $dialog-information-height: 44px;
 $dialog-buttons-height: 68px;
@@ -30,6 +31,7 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei
        }

        .adf-aspect-list-element-title {
+            font-size: smaller;
            display: flex;
            align-items: center;
        }
@@ -37,8 +39,14 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei
        .adf-accordion-aspect-list-expansion-panel {
            margin: 0;

+            #{$mat-checkbox-background} {
+                height: 16px;
+                width: 16px;
+            }
+
            &-header {
                font-size: smaller;
+                padding-left: 12px;
            }

            &-header-title {
@@ -59,17 +67,28 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei
    &-aspect-property-table {
        width: 100%;

+        .adf-aspect-property-table-column-name,
+        .adf-aspect-property-table-column-title,
+        .adf-aspect-property-table-column-data-type {
+            font-size: 12px;
+            color: var(--adf-theme-foreground-text-color-054);
+        }
+
        .adf-aspect-property-table-column {
            &-name {
                width: 15%;
+                padding-left: 24px;
+                padding-right: 0;
            }

            &-title {
                width: 65%;
+                padding: 0;
            }

            &-data-type {
                width: 20%;
+                padding-right: 24px;
                padding-left: 10px;
            }
        }
@@ -16,31 +16,29 @@
 */

 import { TestBed } from '@angular/core/testing';
-import { AlfrescoApiService, CoreTestingModule } from '@alfresco/adf-core';
+import { AlfrescoApiService } from '@alfresco/adf-core';
 import { AspectListService } from './aspect-list.service';
 import { AspectPaging, AspectsApi, AspectEntry } from '@alfresco/js-api';
+import { HttpClientTestingModule } from '@angular/common/http/testing';

 const stdAspect1: AspectEntry = { entry: { id: 'std:standardAspectOne', description: 'Standard Aspect One', title: 'StandardAspectOne' } };
 const stdAspect2: AspectEntry = { entry: { id: 'std:standardAspectTwo', description: 'Standard Aspect Two', title: 'StandardAspectTwo' } };
 const stdAspect3: AspectEntry = { entry: { id: 'std:standardAspectThree', description: 'Standard Aspect Three', title: 'StandardAspectThree' } };
-const standardAspectPagingMock: AspectPaging = { list: { entries: [ stdAspect1, stdAspect2, stdAspect3 ] } };
+const standardAspectPagingMock: AspectPaging = { list: { entries: [stdAspect1, stdAspect2, stdAspect3] } };

 const cstAspect1: AspectEntry = { entry: { id: 'cst:customAspectOne', description: 'Custom Aspect One', title: 'CustomAspectOne' } };
 const cstAspect2: AspectEntry = { entry: { id: 'cst:customAspectTwo', description: 'Custom Aspect Two', title: 'CustomAspectTwo' } };
 const cstAspect3: AspectEntry = { entry: { id: 'cst:customAspectThree', description: 'Custom Aspect Three', title: 'CustomAspectThree' } };
-const customAspectPagingMock: AspectPaging = { list: { entries: [ cstAspect1, cstAspect2, cstAspect3 ] } };
+const customAspectPagingMock: AspectPaging = { list: { entries: [cstAspect1, cstAspect2, cstAspect3] } };

 describe('AspectListService', () => {
-
    let aspectListService: AspectListService;
    let apiService: AlfrescoApiService;
    let aspectsApi: AspectsApi;

    beforeEach(() => {
        TestBed.configureTestingModule({
-            imports: [
-                CoreTestingModule
-            ]
+            imports: [HttpClientTestingModule]
        });

        aspectListService = TestBed.inject(AspectListService);
@@ -1,144 +0,0 @@
-/*!
- * @license
- * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { Injectable } from '@angular/core';
-import { Observable, from } from 'rxjs';
-import { AlfrescoApiService } from '@alfresco/adf-core';
-import { AuditApi, AuditAppPaging, AuditApp, AuditEntryPaging, AuditEntryEntry } from '@alfresco/js-api';
-
-@Injectable({
-    providedIn: 'root'
-})
-export class AuditService {
-    private _auditApi: AuditApi;
-    get auditApi(): AuditApi {
-        this._auditApi = this._auditApi ?? new AuditApi(this.apiService.getInstance());
-        return this._auditApi;
-    }
-
-    constructor(private apiService: AlfrescoApiService) {}
-
-    /**
-     * Gets a list of audit applications.
-     *
-     * @param opts Options.
-     * @returns a list of the audit applications.
-     */
-    getAuditApps(opts?: any): Observable<AuditAppPaging> {
-        const defaultOptions = {
-            skipCount: 0
-        };
-        const queryOptions = Object.assign({}, defaultOptions, opts);
-        return from(this.auditApi.listAuditApps(queryOptions));
-    }
-
-    /**
-     * Get audit application info.
-     *
-     * @param auditApplicationId The identifier of an audit application.
-     * @param opts Options.
-     * @returns status of an audit application.
-     */
-    getAuditApp(auditApplicationId: string, opts?: any): Observable<AuditApp> {
-        const defaultOptions = {
-            auditApplicationId
-        };
-        const queryOptions = Object.assign({}, defaultOptions, opts);
-        return from(this.auditApi.getAuditApp(queryOptions));
-    }
-
-    /**
-     * Update audit application info.
-     *
-     * @param auditApplicationId The identifier of an audit application.
-     * @param auditAppBodyUpdate The audit application to update.
-     * @param opts Options.
-     * @returns audit application model
-     */
-    updateAuditApp(auditApplicationId: string, auditAppBodyUpdate: boolean, opts?: any): Observable<AuditApp | any> {
-        const defaultOptions = {};
-        const queryOptions = Object.assign({}, defaultOptions, opts);
-        return from(this.auditApi.updateAuditApp(auditApplicationId, { isEnabled: auditAppBodyUpdate }, queryOptions));
-    }
-
-    /**
-     * List audit entries for an audit application.
-     *
-     * @param auditApplicationId The identifier of an audit application.
-     * @param opts Options.
-     * @returns a list of audit entries.
-     */
-    getAuditEntries(auditApplicationId: string, opts?: any): Observable<AuditEntryPaging> {
-        const defaultOptions = {
-            skipCount: 0,
-            maxItems: 100
-        };
-        const queryOptions = Object.assign({}, defaultOptions, opts);
-        return from(this.auditApi.listAuditEntriesForAuditApp(auditApplicationId, queryOptions));
-    }
-
-    /**
-     * Get audit entry.
-     *
-     * @param auditApplicationId The identifier of an audit application.
-     * @param auditEntryId The identifier of an audit entry.
-     * @param opts Options.
-     * @returns audit entry.
-     */
-    getAuditEntry(auditApplicationId: string, auditEntryId: string, opts?: any): Observable<AuditEntryEntry> {
-        const defaultOptions = {};
-        const queryOptions = Object.assign({}, defaultOptions, opts);
-        return from(this.auditApi.getAuditEntry(auditApplicationId, auditEntryId, queryOptions));
-    }
-
-    /**
-     * List audit entries for a node.
-     *
-     * @param nodeId The identifier of a node.
-     * @param opts Options.
-     * @returns audit entry list
-     */
-    getAuditEntriesForNode(nodeId: string, opts?: any): Observable<AuditEntryPaging> {
-        const defaultOptions = {
-            nodeId
-        };
-        const queryOptions = Object.assign({}, defaultOptions, opts);
-        return from(this.auditApi.listAuditEntriesForNode(queryOptions));
-    }
-
-    /**
-     * Permanently delete audit entries for an audit application.
-     *
-     * @param auditApplicationId The identifier of an audit application.
-     * @param where Audit entries to permanently delete for an audit application, given an inclusive time period or range of ids.
-     * @returns void operation
-     */
-    deleteAuditEntries(auditApplicationId: string, where: string): Observable<any> {
-        return from(this.auditApi.deleteAuditEntriesForAuditApp(auditApplicationId, where));
-    }
-
-    /**
-     * Permanently delete an audit entry.
-     *
-     * @param auditApplicationId The identifier of an audit application.
-     * @param auditEntryId The identifier of an audit entry.
-     * @returns void operation
-     */
-    deleteAuditEntry(auditApplicationId: string, auditEntryId: string): Observable<any> {
-        return from(this.auditApi.deleteAuditEntry(auditApplicationId, auditEntryId));
-    }
-}
@@ -16,14 +16,19 @@
 */

 import { Component, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild, ViewEncapsulation, OnDestroy } from '@angular/core';
-import { MatSelect } from '@angular/material/select';
+import { MatSelect, MatSelectModule } from '@angular/material/select';
 import { Node, PathElement } from '@alfresco/js-api';
 import { DocumentListComponent } from '../document-list/components/document-list.component';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { TranslateModule } from '@ngx-translate/core';

@Component({
    selector: 'adf-breadcrumb',
+    standalone: true,
+    imports: [CommonModule, MatIconModule, TranslateModule, MatSelectModule],
    templateUrl: './breadcrumb.component.html',
    styleUrls: ['./breadcrumb.component.scss'],
    encapsulation: ViewEncapsulation.None,
@@ -15,27 +15,15 @@
 * limitations under the License.
 */

-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { MaterialModule } from '../material.module';
-
 import { BreadcrumbComponent } from './breadcrumb.component';
 import { DropdownBreadcrumbComponent } from './dropdown-breadcrumb.component';
-import { CoreModule } from '@alfresco/adf-core';

+export const BREADCRUMB_DIRECTIVES = [BreadcrumbComponent, DropdownBreadcrumbComponent] as const;
+
+/** @deprecated use `...BREADCRUMB_DIRECTIVES` instead */
@NgModule({
-    imports: [
-        CommonModule,
-        MaterialModule,
-        CoreModule
-    ],
-    exports: [
-        BreadcrumbComponent,
-        DropdownBreadcrumbComponent
-    ],
-    declarations: [
-        BreadcrumbComponent,
-        DropdownBreadcrumbComponent
-    ]
+    imports: [...BREADCRUMB_DIRECTIVES],
+    exports: [...BREADCRUMB_DIRECTIVES]
 })
 export class BreadcrumbModule {}
@@ -18,6 +18,7 @@
        <mat-select
            #dropdown
            *ngIf="hasPreviousNodes()"
+            panelClass="adf-breadcrumb-dropdown-panel"
            class="adf-dropdown-breadcrumb-path-select"
            tabindex="-1"
            role="button"
@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 $dropdown-horizontal-offset: 30px;

 .adf {
@@ -47,7 +49,6 @@ $dropdown-horizontal-offset: 30px;
        width: 0;
        height: 0;
        overflow: hidden;
-        margin-top: 35px;

        &-select {
            width: 0;
@@ -64,8 +65,6 @@ $dropdown-horizontal-offset: 30px;
    }

    &-dropdown-breadcrumb-path-option.adf-dropdown-breadcrumb-path-option-node {
-        height: 28px;
-        line-height: 28px;
        padding: 0 12px;
        font-size: var(--theme-caption-font-size);
    }
@@ -98,3 +97,7 @@ $dropdown-horizontal-offset: 30px;
        margin-right: $dropdown-horizontal-offset;
    }
 }
+
+#{$cdk-overlay-pane}:has(>.adf-breadcrumb-dropdown-panel){
+    min-width: fit-content;
+}
@@ -16,12 +16,17 @@
 */

 import { Component, OnChanges, ViewChild, ViewEncapsulation } from '@angular/core';
-import { MatSelect } from '@angular/material/select';
+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 { TranslateModule } from '@ngx-translate/core';

@Component({
    selector: 'adf-dropdown-breadcrumb',
+    standalone: true,
+    imports: [CommonModule, MatIconModule, MatSelectModule, TranslateModule],
    templateUrl: './dropdown-breadcrumb.component.html',
    styleUrls: ['./dropdown-breadcrumb.component.scss'],
    encapsulation: ViewEncapsulation.None,
@@ -1,8 +1,6 @@
 <div class="adf-categories-management">
    <div *ngIf="categoryNameControlVisible" class="adf-category-name-field">
        <input #categoryNameInput
-            matInput
-            autocomplete="off"
            [formControl]="categoryNameControl"
            (keyup.enter)="addCategory()"
            placeholder="{{'CATEGORIES_MANAGEMENT.CATEGORIES_SEARCH_PLACEHOLDER' | translate }}"
@@ -10,7 +8,7 @@
            />
        <mat-error *ngIf="categoryNameControl.invalid">{{ categoryNameErrorMessageKey | translate }}</mat-error>
    </div>
-    <div class="adf-categories-list" [class.adf-categories-list-fixed]="!categoryNameControlVisible">
+    <div class="adf-categories-list" *ngIf="categories?.length > 0" [class.adf-categories-list-fixed]="!categoryNameControlVisible">
        <span
            *ngFor="let category of categories"
            [class.adf-categories-padded]="!isCRUDMode"
@@ -53,7 +51,7 @@
                    *ngFor="let category of existingCategories"
                    class="adf-category"
                    (click)='addCategoryToAssign(category)'>
-                    {{ category.name }}
+                        {{ category.name }}
                </mat-list-item>
                <p *ngIf="!existingCategories?.length && !existingCategoriesLoading"
                   data-automation-id="no-categories-message">
@@ -1,17 +1,27 @@
-.adf-categories-management {
-    padding-top: 12px;
+@import 'styles/mat-selectors';

+.adf-categories-management {
    .adf-category-name-field {
-        justify-content: space-between;
-        width: 100%;
-        color: var(--adf-metadata-property-panel-text-color);
-        background: var(--adf-metadata-buttons-background-color);
-        height: 32px;
-        border-radius: 12px;
-        align-items: center;
+        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;
+        }
+
+        #{$mat-form-field-error} {
+            padding-top: 5px;
        }
    }

@@ -46,7 +56,7 @@
        background-color: inherit;
        color: inherit;

-        &:hover {
+        &:not(#{$mat-list-item-disabled}):hover {
            cursor: pointer;
            background: var(--adf-theme-mat-grey-color-a200);
        }
@@ -68,9 +78,15 @@
 }

 .adf-existing-categories-panel {
+    min-height: 22vh;
+
    .adf-create-category-label {
        color: var(--theme-primary-color);
        cursor: pointer;
        overflow-wrap: anywhere;
    }
+
+    #{$mat-list-item-disabled} #{$mat-list-item-primary-text} {
+        opacity: 1;
+    }
 }
@@ -47,8 +47,7 @@ describe('CategoriesManagementComponent', () => {

    beforeEach(() => {
        TestBed.configureTestingModule({
-            declarations: [CategoriesManagementComponent],
-            imports: [ContentTestingModule],
+            imports: [ContentTestingModule, CategoriesManagementComponent],
            providers: [
                {
                    provide: CategoryService,
@@ -17,11 +17,19 @@

 import { Category } from '@alfresco/js-api';
 import { Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core';
-import { FormControl, Validators } from '@angular/forms';
+import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 import { EMPTY, Observable, Subject, timer } from 'rxjs';
 import { debounce, first, map, takeUntil, tap } from 'rxjs/operators';
 import { CategoriesManagementMode } from './categories-management-mode';
 import { CategoryService } from '../services/category.service';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } 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';

 interface CategoryNameControlErrors {
    duplicatedExistingCategory?: boolean;
@@ -31,10 +39,22 @@ interface CategoryNameControlErrors {
 }

@Component({
-  selector: 'adf-categories-management',
-  templateUrl: './categories-management.component.html',
-  styleUrls: ['./categories-management.component.scss'],
-  encapsulation: ViewEncapsulation.None
+    selector: 'adf-categories-management',
+    standalone: true,
+    imports: [
+        CommonModule,
+        TranslateModule,
+        AutoFocusDirective,
+        ReactiveFormsModule,
+        MatFormFieldModule,
+        MatButtonModule,
+        MatIconModule,
+        MatListModule,
+        MatProgressSpinnerModule
+    ],
+    templateUrl: './categories-management.component.html',
+    styleUrls: ['./categories-management.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class CategoriesManagementComponent implements OnInit, OnDestroy {
    readonly nameErrorMessagesByErrors = new Map<keyof CategoryNameControlErrors, string>([
@@ -49,11 +69,7 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
    private onDestroy$ = new Subject<void>();
    private _categoryNameControl = new FormControl<string>(
        '',
-        [
-            this.validateIfNotAlreadyAdded.bind(this),
-            this.validateEmptyCategory,
-            Validators.required
-        ],
+        [this.validateIfNotAlreadyAdded.bind(this), this.validateEmptyCategory, Validators.required],
        this.validateIfNotAlreadyCreated.bind(this)
    );
    private _existingCategories: Category[];
@@ -78,23 +94,23 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
     *
     * @param categoryNameControlVisible control visibility.
     */
-     @Input()
-     set categoryNameControlVisible(categoryNameControlVisible: boolean) {
-         this._categoryNameControlVisible = categoryNameControlVisible;
-         if (categoryNameControlVisible) {
-             setTimeout(() => {
-                 this.categoryNameInputElement.nativeElement.scrollIntoView();
-             });
-             this._existingCategoriesPanelVisible = true;
-         } else {
+    @Input()
+    set categoryNameControlVisible(categoryNameControlVisible: boolean) {
+        this._categoryNameControlVisible = categoryNameControlVisible;
+        if (categoryNameControlVisible) {
+            setTimeout(() => {
+                this.categoryNameInputElement.nativeElement.scrollIntoView();
+            });
+            this._existingCategoriesPanelVisible = true;
+        } else {
            this._existingCategoriesPanelVisible = false;
            this.clearCategoryNameInput();
-         }
-     }
+        }
+    }

-     get categoryNameControlVisible(): boolean {
-         return this._categoryNameControlVisible;
-     }
+    get categoryNameControlVisible(): boolean {
+        return this._categoryNameControlVisible;
+    }

    /** Emits when classifiable aspect changes */
    @Input()
@@ -150,9 +166,7 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
            )
            .subscribe((name: string) => this.onNameControlValueChange(name));

-        this.categoryNameControl.statusChanges
-            .pipe(takeUntil(this.onDestroy$))
-            .subscribe(() => this.setCategoryNameControlErrorMessageKey());
+        this.categoryNameControl.statusChanges.pipe(takeUntil(this.onDestroy$)).subscribe(() => this.setCategoryNameControlErrorMessageKey());

        this.setCategoryNameControlErrorMessageKey();

@@ -164,13 +178,11 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
            this._categoryNameControl.removeValidators(Validators.required);
            this.categories.forEach((category) => this.initialCategories.push(category));
            if (this.classifiableChanged) {
-                this.classifiableChanged
-                    .pipe(takeUntil(this.onDestroy$))
-                    .subscribe(() => {
-                        this.categories = [];
-                        this.categoryNameControlVisible = false;
-                        this.categoryNameControlVisibleChange.emit(false);
-                    });
+                this.classifiableChanged.pipe(takeUntil(this.onDestroy$)).subscribe(() => {
+                    this.categories = [];
+                    this.categoryNameControlVisible = false;
+                    this.categoryNameControlVisibleChange.emit(false);
+                });
            }
        }
    }
@@ -188,7 +200,7 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {

    /*
     * Returns `true` if categories empty and category panel non editable state, otherwise `false`
-    */
+     */
    get showEmptyCategoryMessage(): boolean {
        return this.categories.length === 0 && !this.categoryNameControlVisible;
    }
@@ -237,11 +249,13 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
     * @param category - selection list change containing selected category
     */
    addCategoryToAssign(category: Category) {
-        const selectedCategory: Category = category;
-        this.categories.push(selectedCategory);
-        this._existingCategories.splice(this._existingCategories.indexOf(selectedCategory), 1);
-        this.categoryNameControl.updateValueAndValidity();
-        this.categoriesChange.emit(this.categories);
+        if (!(this.isCRUDMode || (!this.multiSelect && this.categories.length > 0))) {
+            const selectedCategory: Category = category;
+            this.categories.push(selectedCategory);
+            this._existingCategories.splice(this._existingCategories.indexOf(selectedCategory), 1);
+            this.categoryNameControl.updateValueAndValidity();
+            this.categoriesChange.emit(this.categories);
+        }
    }

    /**
@@ -275,7 +289,7 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
    }

    private searchForExistingCategories(searchTerm: string) {
-        this.categoryService.searchCategories(searchTerm, 0 , this.existingCategoriesListLimit).subscribe((existingCategoriesResult) => {
+        this.categoryService.searchCategories(searchTerm, 0, this.existingCategoriesListLimit).subscribe((existingCategoriesResult) => {
            this._existingCategories = existingCategoriesResult.list.entries.map((rowEntry) => {
                const existingCat = new Category();
                existingCat.id = rowEntry.entry.id;
@@ -283,7 +297,9 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
                existingCat.name = path ? `${path}/${rowEntry.entry.name}` : rowEntry.entry.name;
                return existingCat;
            });
-            this._existingCategories = this._existingCategories.filter((existingCat) => this.categories.find((category) => existingCat.id === category.id) === undefined);
+            this._existingCategories = this._existingCategories.filter(
+                (existingCat) => this.categories.find((category) => existingCat.id === category.id) === undefined
+            );
            this.sortCategoriesList(this._existingCategories);
            this._existingCategoriesLoading = false;
            this._typing = false;
@@ -294,7 +310,9 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
    private getChildrenCategories(searchTerm: string) {
        this.categoryService.getSubcategories(this.parentId).subscribe((childrenCategories) => {
            this._existingCategories = childrenCategories.list.entries.map((categoryEntry) => categoryEntry.entry);
-            this._existingCategories = this._existingCategories.filter((existingCat) => existingCat.name.toLowerCase().includes(searchTerm.toLowerCase()));
+            this._existingCategories = this._existingCategories.filter((existingCat) =>
+                existingCat.name.toLowerCase().includes(searchTerm.toLowerCase())
+            );
            this.sortCategoriesList(this._existingCategories);
            this._existingCategoriesLoading = false;
            this._typing = false;
@@ -308,11 +326,13 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
            : null;
    }

-    private validateIfNotAlreadyCreated(nameControl: FormControl<string>): Observable<CategoryNameControlErrors | null>  {
+    private validateIfNotAlreadyCreated(nameControl: FormControl<string>): Observable<CategoryNameControlErrors | null> {
        return this.existingCategoryLoaded$.pipe(
-            map<void, CategoryNameControlErrors | null>(() => this.existingCategories.some((category) => this.compareCategories(category, nameControl.value)) && this.isCRUDMode
+            map<void, CategoryNameControlErrors | null>(() =>
+                this.existingCategories.some((category) => this.compareCategories(category, nameControl.value)) && this.isCRUDMode
                    ? { duplicatedExistingCategory: true }
-                    : null),
+                    : null
+            ),
            first()
        );
    }
@@ -322,9 +342,7 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
    }

    private validateEmptyCategory(categoryNameControl: FormControl<string>): CategoryNameControlErrors | null {
-        return categoryNameControl.value.length && !categoryNameControl.value.trim()
-            ? { emptyCategory: true }
-            : null;
+        return categoryNameControl.value.length && !categoryNameControl.value.trim() ? { emptyCategory: true } : null;
    }

    private setCategoryNameControlErrorMessageKey() {
@@ -15,27 +15,12 @@
 * limitations under the License.
 */

-import { CoreModule } from '@alfresco/adf-core';
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { TranslateModule } from '@ngx-translate/core';
-import { ContentDirectiveModule } from '../directives/content-directive.module';
-import { MaterialModule } from '../material.module';
 import { CategoriesManagementComponent } from './categories-management/categories-management.component';

+/** @deprecated use `CategoriesManagementComponent` standalone component instead */
@NgModule({
-    imports: [
-        CommonModule,
-        CoreModule,
-        MaterialModule,
-        TranslateModule,
-        ContentDirectiveModule
-    ],
-    declarations: [
-        CategoriesManagementComponent
-    ],
-    exports: [
-        CategoriesManagementComponent
-    ]
+    imports: [CategoriesManagementComponent],
+    exports: [CategoriesManagementComponent]
 })
 export class CategoriesModule {}
@@ -15,7 +15,6 @@
 * limitations under the License.
 */

-import { CoreTestingModule } from '@alfresco/adf-core';
 import { fakeAsync, TestBed } from '@angular/core/testing';
 import { CategoryService } from '../services/category.service';
 import { CategoryNode, CategoryTreeDatasourceService } from '@alfresco/adf-content-services';
@@ -25,17 +24,12 @@ import { EMPTY, of } from 'rxjs';
 import { Pagination } from '@alfresco/js-api';

 describe('CategoryTreeDatasourceService', () => {
-  let categoryTreeDatasourceService: CategoryTreeDatasourceService;
-  let categoryService: CategoryService;
+    let categoryTreeDatasourceService: CategoryTreeDatasourceService;
+    let categoryService: CategoryService;

    beforeEach(() => {
        TestBed.configureTestingModule({
-            imports: [
-                CoreTestingModule
-            ],
-            providers: [
-                { provide: CategoryService, useClass: CategoryServiceMock }
-            ]
+            providers: [CategoryTreeDatasourceService, { provide: CategoryService, useClass: CategoryServiceMock }]
        });

        categoryTreeDatasourceService = TestBed.inject(CategoryTreeDatasourceService);
@@ -44,7 +38,7 @@ describe('CategoryTreeDatasourceService', () => {

    it('should get root level categories', fakeAsync(() => {
        spyOn(categoryTreeDatasourceService, 'getParentNode').and.returnValue(undefined);
-        categoryTreeDatasourceService.getSubNodes(null, 0 , 100).subscribe((treeResponse: TreeResponse<CategoryNode>) => {
+        categoryTreeDatasourceService.getSubNodes(null, 0, 100).subscribe((treeResponse: TreeResponse<CategoryNode>) => {
            expect(treeResponse.entries.length).toBe(1);
            expect(treeResponse.entries[0].level).toBe(0);
            expect(treeResponse.entries[0].nodeType).toBe(TreeNodeType.RegularNode);
@@ -62,7 +56,7 @@ describe('CategoryTreeDatasourceService', () => {
            nodeType: TreeNodeType.RegularNode
        };
        spyOn(categoryTreeDatasourceService, 'getParentNode').and.returnValue(parentNode);
-        categoryTreeDatasourceService.getSubNodes(parentNode.id, 0 , 100).subscribe((treeResponse: TreeResponse<CategoryNode>) => {
+        categoryTreeDatasourceService.getSubNodes(parentNode.id, 0, 100).subscribe((treeResponse: TreeResponse<CategoryNode>) => {
            expect(treeResponse.entries.length).toBe(2);
            expect(treeResponse.entries[0].parentId).toBe(parentNode.id);
            expect(treeResponse.entries[0].level).toBe(1);
@@ -84,7 +78,8 @@ describe('CategoryTreeDatasourceService', () => {
    });

    it('should call getCategory for every instance if value of name parameter is defined', (done) => {
-        spyOn(categoryService, 'getCategory').and.returnValues(of({
+        spyOn(categoryService, 'getCategory').and.returnValues(
+            of({
                entry: {
                    name: 'name',
                    id: 'some id 1',
@@ -97,18 +92,18 @@ describe('CategoryTreeDatasourceService', () => {
                    id: 'some id 2',
                    hasChildren: false
                }
-            }));
-        categoryTreeDatasourceService.getSubNodes('id', undefined, undefined, 'name')
-            .subscribe(() => {
-
-                expect(categoryService.getCategory).toHaveBeenCalledWith('some id 1');
-                expect(categoryService.getCategory).toHaveBeenCalledWith('some id 2');
-                done();
-            });
+            })
+        );
+        categoryTreeDatasourceService.getSubNodes('id', undefined, undefined, 'name').subscribe(() => {
+            expect(categoryService.getCategory).toHaveBeenCalledWith('some id 1');
+            expect(categoryService.getCategory).toHaveBeenCalledWith('some id 2');
+            done();
+        });
    });

    it('should return observable which emits correct categories', (done) => {
-        spyOn(categoryService, 'getCategory').and.returnValues(of({
+        spyOn(categoryService, 'getCategory').and.returnValues(
+            of({
                entry: {
                    name: 'some name',
                    id: 'some id 1',
@@ -121,14 +116,15 @@ describe('CategoryTreeDatasourceService', () => {
                    id: 'some id 2',
                    hasChildren: false
                }
-            }));
-        categoryTreeDatasourceService.getSubNodes('id', undefined, undefined, 'name')
-            .subscribe((response) => {
-                const pagination = new Pagination();
-                pagination.count = 2;
-                expect(response).toEqual({
-                    pagination,
-                    entries: [{
+            })
+        );
+        categoryTreeDatasourceService.getSubNodes('id', undefined, undefined, 'name').subscribe((response) => {
+            const pagination = new Pagination();
+            pagination.count = 2;
+            expect(response).toEqual({
+                pagination,
+                entries: [
+                    {
                        id: 'some id 1',
                        nodeName: 'some name',
                        parentId: 'parent id 1',
@@ -136,7 +132,8 @@ describe('CategoryTreeDatasourceService', () => {
                        nodeType: TreeNodeType.RegularNode,
                        hasChildren: true,
                        isLoading: false
-                    }, {
+                    },
+                    {
                        id: 'some id 2',
                        nodeName: 'Language/some other name',
                        parentId: 'parent id 2',
@@ -144,9 +141,10 @@ describe('CategoryTreeDatasourceService', () => {
                        nodeType: TreeNodeType.RegularNode,
                        hasChildren: false,
                        isLoading: false
-                    }]
-                });
-                done();
+                    }
+                ]
            });
+            done();
+        });
    });
 });
@@ -15,7 +15,7 @@
 * limitations under the License.
 */

-import { AppConfigService, CoreTestingModule, UserPreferencesService } from '@alfresco/adf-core';
+import { AppConfigService, TranslationMock, TranslationService, UserPreferencesService } from '@alfresco/adf-core';
 import {
    CategoryBody,
    CategoryEntry,
@@ -29,6 +29,8 @@ import {
 } from '@alfresco/js-api';
 import { fakeAsync, TestBed } from '@angular/core/testing';
 import { CategoryService } from './category.service';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { TranslateModule } from '@ngx-translate/core';

 describe('CategoryService', () => {
    let categoryService: CategoryService;
@@ -44,7 +46,8 @@ describe('CategoryService', () => {

    beforeEach(() => {
        TestBed.configureTestingModule({
-            imports: [CoreTestingModule]
+            imports: [HttpClientTestingModule, TranslateModule.forRoot()],
+            providers: [CategoryService, UserPreferencesService, { provide: TranslationService, useClass: TranslationMock }]
        });

        categoryService = TestBed.inject(CategoryService);
@@ -17,8 +17,10 @@

 import { TestBed } from '@angular/core/testing';
 import { ContentService } from './content.service';
-import { AppConfigService, AuthenticationService, StorageService, CoreTestingModule } from '@alfresco/adf-core';
+import { AppConfigService, AuthenticationService, RedirectAuthService, StorageService } from '@alfresco/adf-core';
 import { Node, PermissionsInfo } from '@alfresco/js-api';
+import { EMPTY, of } from 'rxjs';
+import { HttpClientTestingModule } from '@angular/common/http/testing';

 describe('ContentService', () => {
    let contentService: ContentService;
@@ -27,7 +29,8 @@ describe('ContentService', () => {

    beforeEach(() => {
        TestBed.configureTestingModule({
-            imports: [CoreTestingModule]
+            imports: [HttpClientTestingModule],
+            providers: [ContentService, AuthenticationService, { provide: RedirectAuthService, useValue: { onLogin: EMPTY, onTokenReceived: of() } }]
        });
        authService = TestBed.inject(AuthenticationService);
        contentService = TestBed.inject(ContentService);
@@ -16,10 +16,12 @@
 */

 import { fakeEcmUser } from '../mocks/ecm-user.service.mock';
-import { AlfrescoApiService, AlfrescoApiServiceMock, CoreTestingModule } from '@alfresco/adf-core';
+import { AlfrescoApiService, AlfrescoApiServiceMock, RedirectAuthService } from '@alfresco/adf-core';
 import { PeopleContentQueryRequestModel, PeopleContentService } from './people-content.service';
 import { TestBed } from '@angular/core/testing';
 import { PersonPaging } from '@alfresco/js-api';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { EMPTY, of } from 'rxjs';

 export const fakeEcmUser2 = {
    id: 'another-fake-id',
@@ -66,8 +68,12 @@ describe('PeopleContentService', () => {

    beforeEach(() => {
        TestBed.configureTestingModule({
-            imports: [CoreTestingModule],
-            providers: [{ provide: AlfrescoApiService, useClass: AlfrescoApiServiceMock }]
+            imports: [HttpClientTestingModule],
+            providers: [
+                PeopleContentService,
+                { provide: AlfrescoApiService, useClass: AlfrescoApiServiceMock },
+                { provide: RedirectAuthService, useValue: { onLogin: EMPTY, onTokenReceived: of() } }
+            ]
        });

        peopleContentService = TestBed.inject(PeopleContentService);
@@ -257,17 +257,14 @@ export class RenditionService {
    printFile(url: string, type: string): void {
        const pwa = window.open(url, RenditionService.TARGET);
        if (pwa) {
-            // Because of the way chrome focus and close image window vs. pdf preview window
-            if (type === RenditionService.ContentGroup.IMAGE) {
-                pwa.onfocus = () => {
+            pwa.onload = () => {
+                pwa.print();
+                if (type === RenditionService.ContentGroup.IMAGE) {
+                    // Because of the way chrome focus and close image window vs. pdf preview window
                    setTimeout(() => {
                        pwa.close();
                    }, 500);
-                };
-            }
-
-            pwa.onload = () => {
-                pwa.print();
+                }
            };
        }
    }
@@ -17,12 +17,13 @@

 import { EventEmitter } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
-import { AppConfigService, CoreTestingModule } from '@alfresco/adf-core';
+import { AlfrescoApiService, AlfrescoApiServiceMock, AppConfigModule, AppConfigService, AppConfigServiceMock } from '@alfresco/adf-core';
 import { UploadService } from './upload.service';
 import { RepositoryInfo } from '@alfresco/js-api';
 import { BehaviorSubject } from 'rxjs';
 import { DiscoveryApiService } from '../../common/services/discovery-api.service';
 import { FileModel, FileUploadStatus } from '../../common/models/file.model';
+import { HttpClientTestingModule } from '@angular/common/http/testing';

 declare let jasmine: any;

@@ -35,8 +36,11 @@ describe('UploadService', () => {

    beforeEach(() => {
        TestBed.configureTestingModule({
-            imports: [CoreTestingModule],
+            imports: [AppConfigModule, HttpClientTestingModule],
            providers: [
+                UploadService,
+                { provide: AlfrescoApiService, useClass: AlfrescoApiServiceMock },
+                { provide: AppConfigService, useClass: AppConfigServiceMock },
                {
                    provide: DiscoveryApiService,
                    useValue: {
@@ -281,9 +285,7 @@ describe('UploadService', () => {
        service.cancelUpload(...file);

        const request = jasmine.Ajax.requests.mostRecent();
-        expect(request.url).toBe(
-            'http://localhost:9876/ecm/alfresco/api/-default-/public/alfresco/versions/1/nodes/fakeId/content?include=allowableOperations'
-        );
+        expect(request.url).toContain('ecm/alfresco/api/-default-/public/alfresco/versions/1/nodes/fakeId/content?include=allowableOperations');
        expect(request.method).toBe('PUT');

        jasmine.Ajax.requests.mostRecent().respondWith({
@@ -338,8 +340,8 @@ describe('UploadService', () => {
        service.uploadFilesInTheQueue(emitter);

        const request = jasmine.Ajax.requests.mostRecent();
-        expect(request.url).toBe(
-            'http://localhost:9876/ecm/alfresco/api/-default-/public/alfresco/versions/1/nodes/123/children?autoRename=true&include=allowableOperations'
+        expect(request.url).toContain(
+            '/ecm/alfresco/api/-default-/public/alfresco/versions/1/nodes/123/children?autoRename=true&include=allowableOperations'
        );
        expect(request.method).toBe('POST');

@@ -1,4 +1,4 @@
-<mat-card *ngIf="node" class="adf-content-metadata-card-view">
+<mat-card appearance="outlined" *ngIf="node" class="adf-content-metadata-card-view">
    <mat-card-content class="adf-content-metadata-card-view-content">
        <adf-content-metadata
            [displayDefaultProperties]="displayDefaultProperties"
@@ -20,12 +20,23 @@ import { By } from '@angular/platform-browser';
 import { Node } from '@alfresco/js-api';
 import { ContentMetadataCardComponent } from './content-metadata-card.component';
 import { ContentMetadataComponent } from '../content-metadata/content-metadata.component';
-import { ContentTestingModule } from '../../../testing/content.testing.module';
-import { SimpleChange } from '@angular/core';
+import { APP_INITIALIZER, SimpleChange } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
 import { NodeAspectService } from '../../../aspect-list/services/node-aspect.service';
 import { ContentMetadataService } from '../../services/content-metadata.service';
 import { AllowableOperationsEnum } from '../../../common/models/allowable-operations.enum';
 import { of } from 'rxjs';
+import { AlfrescoApiService, AlfrescoApiServiceMock, AuthModule, PipeModule, TranslationMock, TranslationService } from '@alfresco/adf-core';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { HttpClientModule } from '@angular/common/http';
+import { versionCompatibilityFactory } from '../../../version-compatibility/version-compatibility-factory';
+import { VersionCompatibilityService } from '../../../version-compatibility';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { CategoryService } from '../../../category';
+import { TagService } from '../../../tag';
+import { PropertyDescriptorsService } from '../../public-api';

 describe('ContentMetadataCardComponent', () => {
    let component: ContentMetadataCardComponent;
@@ -34,15 +45,41 @@ describe('ContentMetadataCardComponent', () => {
    let node: Node;
    const preset = 'custom-preset';
    let nodeAspectService: NodeAspectService = null;
+    let tagService: TagService = null;
+    let categoryService: CategoryService = null;
+    let propertyDescriptorsService: PropertyDescriptorsService = null;

    const getToggleEditButton = () => fixture.debugElement.query(By.css('[data-automation-id="meta-data-card-toggle-edit"]'));

    beforeEach(() => {
        TestBed.configureTestingModule({
-            imports: [ContentTestingModule]
+            imports: [
+                TranslateModule.forRoot(),
+                NoopAnimationsModule,
+                AuthModule.forRoot({ useHash: true }),
+                HttpClientModule,
+                MatDialogModule,
+                PipeModule,
+                MatSnackBarModule,
+                MatTooltipModule,
+                ContentMetadataCardComponent
+            ],
+            providers: [
+                { provide: AlfrescoApiService, useClass: AlfrescoApiServiceMock },
+                { provide: TranslationService, useClass: TranslationMock },
+                {
+                    provide: APP_INITIALIZER,
+                    useFactory: versionCompatibilityFactory,
+                    deps: [VersionCompatibilityService],
+                    multi: true
+                }
+            ]
        });
        fixture = TestBed.createComponent(ContentMetadataCardComponent);
        contentMetadataService = TestBed.inject(ContentMetadataService);
+        tagService = TestBed.inject(TagService);
+        categoryService = TestBed.inject(CategoryService);
+        propertyDescriptorsService = TestBed.inject(PropertyDescriptorsService);
        component = fixture.componentInstance;
        node = {
            aspectNames: [],
@@ -59,6 +96,9 @@ describe('ContentMetadataCardComponent', () => {
        component.editAspectSupported = true;
        nodeAspectService = TestBed.inject(NodeAspectService);
        spyOn(contentMetadataService, 'getContentTypeProperty').and.returnValue(of([]));
+        spyOn(tagService, 'getTagsByNodeId').and.returnValue(of());
+        spyOn(categoryService, 'getCategoryLinksForNode').and.returnValue(of());
+        spyOn(propertyDescriptorsService, 'load').and.returnValue(of());
        fixture.detectChanges();
    });

@@ -22,9 +22,17 @@ import { ContentMetadataCustomPanel, PresetConfig } from '../../interfaces/conte
 import { VersionCompatibilityService } from '../../../version-compatibility/version-compatibility.service';
 import { ContentService } from '../../../common/services/content.service';
 import { AllowableOperationsEnum } from '../../../common/models/allowable-operations.enum';
+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 { TranslateModule } from '@ngx-translate/core';

@Component({
    selector: 'adf-content-metadata-card',
+    standalone: true,
+    imports: [CommonModule, MatCardModule, ContentMetadataComponent, MatButtonModule, MatIconModule, TranslateModule],
    templateUrl: './content-metadata-card.component.html',
    styleUrls: ['./content-metadata-card.component.scss'],
    encapsulation: ViewEncapsulation.None,
@@ -28,21 +28,21 @@ import { TranslateModule } from '@ngx-translate/core';
    encapsulation: ViewEncapsulation.None,
    styles: [
        `
-            adf-content-metadata-header {
-                display: flex;
-                align-items: center;
-                width: 100%;
-            }
+                    adf-content-metadata-header {
+                        display: flex;
+                        align-items: center;
+                        width: 100%;
+                    }

-            .adf-metadata-properties-title {
-                display: block;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                font-weight: 700;
-                font-size: 15px;
-                padding-left: 12px;
-            }
-        `
+                    .adf-metadata-properties-title {
+                        display: block;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        font-weight: 700;
+                        font-size: 15px;
+                        padding-left: 12px;
+                    }
+                `
    ],
    template: `
        <ng-container>
--- a/Show More
+++ b/Show More
@@ -1 +1 @@
 .18.2
 .20.3
				`@@ -0,0 +1 @@`
				`../../../lib/core/src/lib/header/header.component.md`
				`@@ -0,0 +1 @@`
				`../../../lib/core/src/lib/progress/progress.component.md`