Migration to NG15 - step 1

.browserslistrc

@@ -1,17 +0,0 @@
-# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
-# For additional information regarding the format and rule options, please see:
-# https://github.com/browserslist/browserslist#queries
-
-# For the full list of supported browsers by the Angular framework, please see:
-# https://angular.io/guide/browser-support
-
-# You can see what browsers were selected by your queries by running:
-#   npx browserslist
-
-last 1 Chrome version
-last 1 Firefox version
-last 2 Edge major versions
-last 2 Safari major version
-last 2 iOS major versions
-Firefox ESR
-not IE 9-11 # For IE 9-11 support, remove 'not'.

.eslintrc.js

@@ -10,7 +10,7 @@ module.exports = {
         '**/scripts',
         '**/docs'
     ],
-    plugins: ['@nrwl/nx'],
+    plugins: ['@nx'],
     overrides: [
         {
             files: ['*.ts'],
@@ -19,11 +19,9 @@ module.exports = {
                 createDefaultProgram: true
             },
             extends: [
-                'plugin:@nrwl/nx/typescript',
-                'plugin:@nrwl/nx/angular',
+                'plugin:@nx/typescript',
+                'plugin:@nx/angular',
                 'plugin:@cspell/recommended',
-                'plugin:@angular-eslint/ng-cli-compat',
-                'plugin:@angular-eslint/ng-cli-compat--formatting-add-on',
                 'plugin:@angular-eslint/template/process-inline-templates',
                 'plugin:jsdoc/recommended-typescript-error'
             ],

.eslintrc.json

@@ -1,188 +1,3 @@
-module.exports = {
-    root: true,
-    ignorePatterns: [
-        'projects/**/*',
-        '**/node_modules/**/*',
-        'lib/cli/node_modules/**/*',
-        '**/node_modules',
-        '**/docker',
-        '**/assets',
-        '**/scripts',
-        '**/docs'
-    ],
-    plugins: ['@nrwl/nx'],
-    overrides: [
-        {
-            files: ['*.ts'],
-            parserOptions: {
-                project: ['tsconfig.json', 'e2e/tsconfig.e2e.json'],
-                createDefaultProgram: true
-            },
-            extends: [
-                'plugin:@nrwl/nx/typescript',
-                'plugin:@nrwl/nx/angular',
-                'plugin:@cspell/recommended',
-                'plugin:@angular-eslint/ng-cli-compat',
-                'plugin:@angular-eslint/ng-cli-compat--formatting-add-on',
-                'plugin:@angular-eslint/template/process-inline-templates',
-                'plugin:jsdoc/recommended-typescript-error'
-            ],
-            plugins: [
-                'eslint-plugin-unicorn',
-                'eslint-plugin-rxjs',
-                'prettier',
-                'ban',
-                'license-header',
-                '@cspell',
-                'eslint-plugin-import',
-                '@angular-eslint/eslint-plugin',
-                '@typescript-eslint',
-                'jsdoc'
-            ],
-            rules: {
-                // Uncomment this to enable prettier checks as part of the ESLint
-                // 'prettier/prettier': 'error',
-                'ban/ban': [
-                    'error',
-                    { name: 'eval', message: 'Calls to eval is not allowed.' },
-                    { name: 'fdescribe', message: 'Calls to fdescribe is not allowed' },
-                    { name: 'fit', message: 'Calls to fit is not allowed' },
-                    { name: 'xit', message: 'Calls to xit is not allowed' },
-                    { name: 'xdescribe', message: 'Calls to xdescribe is not allowed' },
-                    { name: ['test', 'only'], message: 'Calls to test.only is not allowed' },
-                    { name: ['describe', 'only'], message: 'Calls to describe.only is not allowed' }
-                ],
-                '@angular-eslint/component-selector': [
-                    'error',
-                    {
-                        type: 'element',
-                        prefix: ['adf', 'app'],
-                        style: 'kebab-case'
-                    }
-                ],
-                '@angular-eslint/directive-selector': [
-                    'error',
-                    {
-                        type: ['element', 'attribute'],
-                        prefix: ['adf', 'app'],
-                        style: 'kebab-case'
-                    }
-                ],
-                '@angular-eslint/no-host-metadata-property': 'off',
-                '@angular-eslint/no-input-prefix': 'error',
-                '@typescript-eslint/consistent-type-definitions': 'error',
-                '@typescript-eslint/dot-notation': 'off',
-                '@typescript-eslint/explicit-member-accessibility': [
-                    'off',
-                    {
-                        accessibility: 'explicit'
-                    }
-                ],
-                '@typescript-eslint/await-thenable': 'error',
-                '@typescript-eslint/prefer-optional-chain': 'warn',
-                '@typescript-eslint/no-inferrable-types': 'off',
-                '@typescript-eslint/no-require-imports': 'off',
-                '@typescript-eslint/no-var-requires': 'error',
-                '@typescript-eslint/naming-convention': [
-                    'error',
-                    {
-                        selector: [
-                            'classProperty',
-                            'objectLiteralProperty',
-                            'typeProperty',
-                            'classMethod',
-                            'objectLiteralMethod',
-                            'typeMethod',
-                            'accessor',
-                            'enumMember'
-                        ],
-                        format: null,
-                        modifiers: ['requiresQuotes']
-                    }
-                ],
-                '@typescript-eslint/member-ordering': 'off',
-                'prefer-arrow/prefer-arrow-functions': 'off',
-                'prefer-promise-reject-errors': 'error',
-                'brace-style': 'off',
-                '@typescript-eslint/brace-style': 'error',
-                'comma-dangle': 'error',
-                'default-case': 'error',
-                'import/order': 'off',
-                'max-len': [
-                    'error',
-                    {
-                        code: 240
-                    }
-                ],
-                'no-bitwise': 'off',
-                'no-console': [
-                    'error',
-                    {
-                        allow: [
-                            'warn',
-                            'dir',
-                            'timeLog',
-                            'assert',
-                            'clear',
-                            'count',
-                            'countReset',
-                            'group',
-                            'groupEnd',
-                            'table',
-                            'dirxml',
-                            'error',
-                            'groupCollapsed',
-                            'Console',
-                            'profile',
-                            'profileEnd',
-                            'timeStamp',
-                            'context'
-                        ]
-                    }
-                ],
-                'no-duplicate-imports': 'error',
-                'no-multiple-empty-lines': 'error',
-                'no-redeclare': 'error',
-                'no-return-await': 'error',
-                'rxjs/no-create': 'error',
-                'rxjs/no-subject-unsubscribe': 'error',
-                'rxjs/no-subject-value': 'error',
-                'rxjs/no-unsafe-takeuntil': 'error',
-                'unicorn/filename-case': 'error',
-                '@typescript-eslint/no-unused-expressions': [
-                    'error',
-                    {
-                        allowShortCircuit: true,
-                        allowTernary: true
-                    }
-                ],
-                'license-header/header': [
-                    'error',
-                    [
-                        '/*!',
-                        ' * @license',
-                        ' * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.',
-                        ' *',
-                        ' * Licensed under the Apache License, Version 2.0 (the "License");',
-                        ' * you may not use this file except in compliance with the License.',
-                        ' * You may obtain a copy of the License at',
-                        ' *',
-                        ' *     http://www.apache.org/licenses/LICENSE-2.0',
-                        ' *',
-                        ' * Unless required by applicable law or agreed to in writing, software',
-                        ' * distributed under the License is distributed on an "AS IS" BASIS,',
-                        ' * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.',
-                        ' * See the License for the specific language governing permissions and',
-                        ' * limitations under the License.',
-                        ' */'
-                    ]
-                ]
-            }
-        },
-        {
-            files: ['*.html'],
-            extends: ['plugin:@angular-eslint/template/recommended'],
-            rules: {}
-        }
-    ]
-};
+{
+  "extends": ["../../.eslintrc.js"]
+}

.storybook/main.js

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

demo-shell/project.json

@@ -0,0 +1,200 @@
+{
+  "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"
+        ],
+        "outputPath": "dist/demo-shell",
+        "index": "demo-shell/src/index.html",
+        "main": "demo-shell/src/main.ts",
+        "tsConfig": "tsconfig.dev.json",
+        "polyfills": "demo-shell/src/polyfills.ts",
+        "stylePreprocessorOptions": {
+          "includePaths": ["lib", "lib/core/src/lib"]
+        },
+        "assets": [
+          "demo-shell/src/assets",
+          "demo-shell/src/favicon-96x96.png",
+          "demo-shell/src/app.config.json",
+          {
+            "glob": "**/*",
+            "input": "demo-shell/src/assets",
+            "output": "/assets"
+          },
+          {
+            "glob": "app.config.json",
+            "input": "demo-shell/src",
+            "output": "/"
+          },
+          {
+            "glob": "**/*",
+            "input": "demo-shell/resources",
+            "output": "/resources"
+          },
+          {
+            "glob": "**/*",
+            "input": "lib/core/src/lib/assets",
+            "output": "/assets"
+          },
+          {
+            "glob": "**/*",
+            "input": "lib/process-services/src/lib/assets",
+            "output": "/assets"
+          },
+          {
+            "glob": "**/*",
+            "input": "lib/process-services-cloud/src/lib/assets",
+            "output": "/assets"
+          },
+          {
+            "glob": "**/*",
+            "input": "lib/content-services/src/lib/assets",
+            "output": "/assets"
+          },
+          {
+            "glob": "**/*",
+            "input": "lib/core/src/lib/i18n",
+            "output": "/assets/adf-core/i18n"
+          },
+          {
+            "glob": "**/*",
+            "input": "lib/content-services/src/lib/i18n",
+            "output": "/assets/adf-content-services/i18n"
+          },
+          {
+            "glob": "**/*",
+            "input": "lib/process-services/src/lib/i18n",
+            "output": "/assets/adf-process-services/i18n"
+          },
+          {
+            "glob": "**/*",
+            "input": "lib/process-services-cloud/src/lib/i18n",
+            "output": "/assets/adf-process-services-cloud/i18n"
+          },
+          {
+            "glob": "**/*",
+            "input": "lib/insights/src/lib/i18n",
+            "output": "/assets/adf-insights/i18n"
+          },
+          {
+            "glob": "pdf.worker.min.js",
+            "input": "node_modules/pdfjs-dist/build",
+            "output": "/"
+          },
+          {
+            "glob": "**/*",
+            "input": "node_modules/monaco-editor",
+            "output": "/assets/monaco/"
+          }
+        ],
+        "styles": [
+          "demo-shell/src/styles.scss",
+          "demo-shell/src/custom-style-dev.scss",
+          "node_modules/cropperjs/dist/cropper.min.css",
+          "node_modules/pdfjs-dist/web/pdf_viewer.css"
+        ],
+        "scripts": ["node_modules/pdfjs-dist/build/pdf.js", "node_modules/pdfjs-dist/web/pdf_viewer.js", "node_modules/raphael/raphael.min.js"],
+        "vendorChunk": true,
+        "extractLicenses": false,
+        "buildOptimizer": false,
+        "sourceMap": true,
+        "optimization": false,
+        "namedChunks": true
+      },
+      "configurations": {
+        "production": {
+          "budgets": [
+            {
+              "type": "anyComponentStyle",
+              "maximumWarning": "12kb"
+            }
+          ],
+          "optimization": true,
+          "outputHashing": "all",
+          "sourceMap": false,
+          "namedChunks": false,
+          "extractLicenses": true,
+          "buildOptimizer": true,
+          "verbose": false,
+          "fileReplacements": [
+            {
+              "replace": "demo-shell/src/environments/environment.ts",
+              "with": "demo-shell/src/environments/environment.prod.ts"
+            }
+          ]
+        },
+        "canary": {
+          "fileReplacements": [
+            {
+              "replace": "demo-shell/src/environments/environment.ts",
+              "with": "demo-shell/src/environments/environment.canary.ts"
+            }
+          ]
+        },
+        "e2e": {
+          "budgets": [
+            {
+              "type": "anyComponentStyle",
+              "maximumWarning": "6kb"
+            }
+          ],
+          "optimization": true,
+          "outputHashing": "all",
+          "sourceMap": false,
+          "namedChunks": false,
+          "extractLicenses": true,
+          "buildOptimizer": true,
+          "verbose": false,
+          "fileReplacements": [
+            {
+              "replace": "demo-shell/src/environments/environment.ts",
+              "with": "demo-shell/src/environments/environment.e2e.ts"
+            }
+          ]
+        }
+      },
+      "defaultConfiguration": ""
+    },
+    "serve": {
+      "executor": "@angular-devkit/build-angular:dev-server",
+      "options": {
+        "browserTarget": "demoshell:build",
+        "host": "0.0.0.0",
+        "port": 3000,
+        "proxyConfig": "demo-shell/proxy.conf.js",
+        "disableHostCheck": true
+      },
+      "configurations": {
+        "production": {
+          "browserTarget": "demoshell:build:production"
+        },
+        "canary": {
+          "browserTarget": "demoshell:build:canary"
+        },
+        "e2e": {
+          "browserTarget": "demoshell:build:e2e"
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "options": {
+        "lintFilePatterns": ["demo-shell/**/*.ts", "demo-shell/**/*.html"]
+      }
+    }
+  }
+}

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

@@ -73,7 +73,7 @@ import { UserInfoComponent } from './components/app-layout/user-info/user-info.c
         BrowserModule,
         environment.e2e ? NoopAnimationsModule : BrowserAnimationsModule,
         ReactiveFormsModule,
-        RouterModule.forRoot(appRoutes, { useHash: true, relativeLinkResolution: 'legacy' }),
+        RouterModule.forRoot(appRoutes, { useHash: true }),
         AuthModule.forRoot({ useHash: true }),
         FormsModule,
         HttpClientModule,

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

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

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

@@ -2,6 +2,8 @@
     overflow: auto;
 }
 
+/* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
+/* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
 .app-cloud-layout-tab-body .mat-tab-body-wrapper {
     height: 100%;
 }

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

@@ -43,11 +43,11 @@
         <button mat-raised-button (click)="addAction()">Add</button>
     </form>
     <div *ngIf="actions.length > 0">
-        <mat-chip-list>
-            <mat-chip *ngFor="let action of actions" [removable]="true">
+        <mat-chip-listbox>
+            <mat-chip-option *ngFor="let action of actions" [removable]="true">
                 {{action.title}}
                 <mat-icon matChipRemove (click)="removeAction(action)">cancel</mat-icon>
-            </mat-chip>
-        </mat-chip-list>
+            </mat-chip-option>
+        </mat-chip-listbox>
     </div>
 </div>

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

@@ -1,6 +1,7 @@
 @use '@angular/material' as mat;
 @import '../../lib/core/src/lib/styles/index';
 @import '../../lib/core/src/lib/styles/typography';
+@include mat.all-component-typographies;
 @include mat.core;
 
 $primary: mat.define-palette($alfresco-accent-orange);

lib/cli/.eslintrc.json

@@ -4,7 +4,7 @@
   "overrides": [
     {
       "files": ["*.ts"],
-      "extends": ["plugin:@nrwl/nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
+      "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
       "rules": {
         "prefer-arrow/prefer-arrow-functions": "off",
         "@typescript-eslint/no-var-requires": "off",
@@ -37,7 +37,7 @@
     },
     {
       "files": ["*.html"],
-      "extends": ["plugin:@nrwl/nx/angular-template"],
+      "extends": ["plugin:@nx/angular-template"],
       "rules": {}
     }
   ]

lib/cli/project.json

@@ -0,0 +1,70 @@
+{
+  "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": [
+        {
+          "projects": "self",
+          "target": "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
+          }
+        ]
+      }
+    }
+  }
+}

lib/content-services/.eslintrc.json

@@ -4,9 +4,9 @@
   "overrides": [
     {
       "files": ["*.ts"],
-      "extends": ["plugin:@nrwl/nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
+      "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
       "rules": {
-        "jsdoc/newline-after-description": "warn",
+
         "@typescript-eslint/naming-convention": "warn",
         "@typescript-eslint/consistent-type-assertions": "warn",
         "@typescript-eslint/prefer-for-of": "warn",
@@ -73,7 +73,7 @@
     },
     {
       "files": ["*.html"],
-      "extends": ["plugin:@nrwl/nx/angular-template"],
+      "extends": ["plugin:@nx/angular-template"],
       "rules": {
         "@angular-eslint/template/no-autofocus": "error",
         "@angular-eslint/template/no-positive-tabindex": "error"

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

@@ -5,5 +5,5 @@ module.exports = {
     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]
+    addons: ['@storybook/addon-essentials', ...rootMain.addons]
 };

lib/content-services/project.json

@@ -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
+          }
+        ]
+      }
+    }
+  }
+}

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

@@ -19,7 +19,7 @@
     }
 
     &-aspect-list-dialog {
-        .mat-dialog-actions {
+        .mat-mdc-dialog-actions {
             justify-content: space-between;
         }
     }
@@ -28,7 +28,7 @@
         padding-top: 3px;
 
         .adf-aspect-property-table {
-            .mat-cell {
+            .mat-mdc-cell {
                 font-size: smaller;
             }
 

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

@@ -24,7 +24,7 @@
             overflow: hidden;
             margin-top: 35px;
 
-            &.mat-select {
+            &.mat-mdc-select {
                 width: 0;
             }
         }

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

@@ -49,7 +49,7 @@ $dropdown-horizontal-offset: 30px;
         overflow: hidden;
         margin-top: 35px;
 
-        &.mat-select {
+        &.mat-mdc-select {
             width: 0;
         }
     }
@@ -63,18 +63,18 @@ $dropdown-horizontal-offset: 30px;
         color: var(--adf-theme-foreground-text-color);
     }
 
-    &-dropdown-breadcrumb-path-option.mat-option {
+    &-dropdown-breadcrumb-path-option.mat-mdc-option {
         height: 28px;
         line-height: 28px;
         padding: 0 12px;
         font-size: var(--theme-caption-font-size);
     }
 
-    &-dropdown-breadcrumb-path-option.mat-option:first-child {
+    &-dropdown-breadcrumb-path-option.mat-mdc-option:first-child {
         padding-top: 4px;
     }
 
-    &-dropdown-breadcrumb-path-option.mat-option:last-child {
+    &-dropdown-breadcrumb-path-option.mat-mdc-option:last-child {
         padding-bottom: 4px;
     }
 }

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

@@ -35,20 +35,22 @@
 
 .adf-categories-list {
     padding-bottom: 10px;
-
-    .mat-list-base .mat-list-item,
-    .mat-list-base .mat-list-option {
+    /* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version. */
+    .mat-mdc-list-base .mat-mdc-list-item,
+    .mat-mdc-list-base .mat-list-option {
         display: flex;
         height: 100%;
         overflow-wrap: anywhere;
         padding: 5px 0;
         font-size: 14px;
-
+        /* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version. */
+        /* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version. */
         &.mat-list-item-disabled {
             background-color: inherit;
             color: inherit;
         }
-
+        /* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version. */
+        /* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version. */
         .mat-list-item-content,
         .mat-list-item-content-reverse {
             padding: 0;

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

@@ -1,4 +1,4 @@
-<mat-card *ngIf="node">
+<mat-card appearance="outlined" *ngIf="node">
     <mat-card-content>
         <adf-content-metadata
             [displayDefaultProperties]="displayDefaultProperties"

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

@@ -1,13 +1,13 @@
 .adf-content-metadata-card {
-    .mat-card {
+    .mat-mdc-card {
         padding: 0;
 
-        .mat-card-content {
+        .mat-mdc-card-content {
             margin-bottom: 0;
         }
     }
 
-    &-footer.mat-card-footer {
+    &-footer.mat-mdc-card-footer {
         margin: 0;
         padding: 8px 12px;
         border-top: 1px solid var(--adf-theme-foreground-text-color-007);

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

@@ -48,13 +48,13 @@ h2.adf-search-results-label {
             }
         }
 
-        .mat-form-field-underline .mat-form-field-ripple {
+        .mat-mdc-form-field-underline .mat-mdc-form--field-ripple {
             height: 1px;
             transition: none;
         }
 
         .adf-site-dropdown-container {
-            .mat-form-field {
+            .mat-mdc-form-field {
                 display: block;
                 margin-bottom: 15px;
             }
@@ -64,7 +64,7 @@ h2.adf-search-results-label {
             width: 100%;
             margin-bottom: 0;
 
-            .mat-select-trigger {
+            .mat--mdc-select-trigger {
                 font-size: var(--theme-body-1-font-size);
             }
         }

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

@@ -1,6 +1,6 @@
 adf-content-node-selector {
     .adf-content-node-selector-headless-tabs {
-        .mat-tab-header {
+        .mat-mdc-tab-header {
             display: none;
         }
     }
@@ -51,7 +51,7 @@ adf-content-node-selector {
         padding-right: 24px;
     }
 
-    .mat-dialog-title {
+    .mat-mdc-dialog-title {
         margin-left: 24px;
         margin-right: 24px;
         font-size: var(--theme-title-font-size);
@@ -68,17 +68,17 @@ adf-content-node-selector {
         }
     }
 
-    .mat-dialog-container {
+    .mat-mdc-dialog-container {
         padding-left: 0;
         padding-right: 0;
     }
 
-    .mat-dialog-content {
+    .mat-mdc-dialog-content {
         margin: 0;
         overflow: hidden;
     }
 
-    .mat-dialog-actions {
+    .mat-mdc-dialog-actions {
         padding: 8px;
         height: 61px;
         background-color: var(--theme-background-color);
@@ -104,7 +104,7 @@ adf-content-node-selector {
     }
 
     @media screen and (max-width: 768px) {
-        .mat-dialog-container {
+        .mat-mdc-dialog-container {
             height: 100vh;
         }
     }

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

@@ -112,11 +112,11 @@
         margin-left: 8px;
     }
 
-    .mat-form-field-infix {
+    .mat-mdc-form-field-infix {
         border-top: unset;
     }
 
-    .mat-dialog-actions {
+    .mat-mdc-dialog-actions {
         justify-content: flex-end;
         padding: 0;
         margin: 8px 0 0;
@@ -128,35 +128,35 @@
         }
     }
 
-    .mat-form-field-flex {
+    .mat-mdc-form-field-flex {
         align-items: center;
     }
 
-    .mat-dialog-container {
+    .mat-mdc-dialog-container {
         padding: 0;
     }
 
-    .mat-form-field-appearance-legacy .mat-form-field-underline {
+    .mat-mdc-form-field-appearance-legacy .mat-mdc-form-field-underline {
         display: none;
     }
 
-    .mat-form-field-appearance-legacy .mat-form-field-wrapper {
+    .mat-mdc-form-field-appearance-legacy .mat-mdc-form-field-wrapper {
         padding-bottom: 8px;
         margin-right: 8px;
         margin-left: 8px;
     }
 
     @media screen and (max-width: 380px) {
-        .mat-dialog-container {
+        .mat-mdc-dialog-container {
             padding: 0 15px;
         }
 
-        .mat-dialog-actions {
+        .mat-mdc-dialog-actions {
             margin-bottom: 0;
             padding: 2px 0;
         }
 
-        .mat-form-field-suffix {
+        .mat-mdc-form-field-suffix {
             padding-left: 8px;
         }
     }

lib/content-services/src/lib/content-user-info/content-user-info.component.html

@@ -42,7 +42,7 @@
                        class="adf-userinfo-tab adf-hide-tab">
             <mat-tab label="{{ 'USER_PROFILE.TAB.CS' | translate }}" role="dialog"
                      *ngIf="mode === userInfoMode.CONTENT">
-                <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(' + ecmBackgroundImage + ')'">
                         <div *ngIf="ecmUser.avatarId; else initialTemplate"
@@ -55,7 +55,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">
@@ -77,7 +77,7 @@
                 </mat-card>
             </mat-tab>
             <mat-tab id="identity-panel" role="dialog" *ngIf="mode === userInfoMode.CONTENT_SSO">
-                <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 + ')'">
                         <div *ngIf="ecmUser.avatarId; else initialTemplate"
@@ -89,7 +89,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">

lib/content-services/src/lib/content-user-info/content-user-info.component.scss

@@ -49,7 +49,7 @@
         display: inline-block;
     }
 
-    &-userinfo-menu_button.mat-button {
+    &-userinfo-menu_button.mat-mdc-button {
         margin-right: 0;
         border-radius: 90%;
         padding: 0;
@@ -57,12 +57,13 @@
         height: 40px;
     }
 
-    &-userinfo-tab .mat-tab-header {
+    &-userinfo-tab .mat-mdc-tab-header {
         align-self: center;
         width: 100%;
         min-width: 250px;
     }
-
+    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
+    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
     &-userinfo-tab .mat-tab-label {
         flex: auto;
         font-weight: 500;
@@ -81,7 +82,7 @@
         box-sizing: border-box;
     }
 
-    &-userinfo-card.mat-card {
+    &-userinfo-card.mat-mdc-card {
         padding: 0;
     }
 
@@ -146,14 +147,15 @@
     &-userinfo-detail {
         text-align: left;
     }
-
+    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
+    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
     &-hide-tab .mat-tab-label-active {
         display: none !important;
     }
 }
 
 @media only screen and (min-device-width: 480px) {
-    .mat-menu-panel.adf-userinfo-menu {
+    .mat-mdc-menu-panel.adf-userinfo-menu {
         max-height: 450px;
         min-width: 450px;
         overflow: auto;
@@ -161,6 +163,6 @@
     }
 }
 
-.mat-menu-panel.adf-userinfo-menu .mat-menu-content {
+.mat-mdc-menu-panel.adf-userinfo-menu .mat-mdc-menu-content {
     padding: 0;
 }

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

@@ -2,6 +2,8 @@
     flex: 1 1 auto;
 }
 
+/* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
+/* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
 .adf-confirm-dialog .mat-dialog-actions .mat-button-wrapper {
     text-transform: uppercase;
 }

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

@@ -1,3 +1,6 @@
+
+/* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
+/* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
 .adf-download-zip-dialog .mat-dialog-actions .mat-button-wrapper {
     text-transform: uppercase;
 }

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

@@ -7,15 +7,19 @@
 }
 
 .adf-lock-file-name {
+    /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
+    /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
     .mat-checkbox-layout {
         width: 100%;
     }
-
+    /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
+    /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
     .mat-checkbox-label {
         text-overflow: ellipsis;
         overflow: hidden;
     }
-
+    /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
+    /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
     .mat-checkbox-inner-container {
         margin: auto 8px auto 0;
     }
@@ -34,11 +38,11 @@
 }
 
 @media screen and (max-width: 380px) {
-    .mat-form-field {
+    .mat-mdc-form-field {
         font-size: 6px;
     }
 
-    .mat-dialog-title {
+    .mat-mdc-dialog-title {
         margin: 0;
     }
 

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

@@ -1,15 +1,15 @@
 .adf-library-dialog {
-    .mat-radio-group {
+    .mat-mdc-radio-group {
         display: flex;
         flex-direction: column;
         margin: 0 0 20px;
     }
 
-    .mat-radio-group .mat-radio-button {
+    .mat-mdc-radio-group .mat-mdc-radio-button {
         margin: 10px 0;
     }
 
-    .mat-form-field {
+    .mat-mdc-form-field {
         width: 100%;
     }
 
@@ -22,7 +22,7 @@
         flex-direction: row;
         justify-content: flex-end;
 
-        .mat-button {
+        .mat-mdc-button {
             text-transform: uppercase;
         }
     }

lib/content-services/src/lib/new-version-uploader/new-version-uploader.dialog.scss

@@ -24,7 +24,7 @@
         height: 500px;
     }
 
-    .mat-dialog {
+    .mat-mdc-dialog {
         &-title {
             flex: 0 0 auto;
             font-size: 20px;
@@ -59,7 +59,10 @@
             }
         }
     }
-
+    /*TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version.
+ */
+    /*TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version.
+ */
     .mat-list-item-content {
         padding: 0;
         margin: 0 16px;
@@ -72,7 +75,7 @@
             padding: 0;
         }
 
-        .mat-list.adf-version-list {
+        .mat-mdc-list.adf-version-list {
             overflow: auto;
         }
     }

lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.scss

@@ -1,5 +1,5 @@
 .adf-add-permission-dialog {
-    .mat-dialog-title {
+    .mat-mdc-dialog-title {
         margin-left: 24px;
         margin-right: 24px;
         font-size: var(--theme-title-font-size);
@@ -11,12 +11,12 @@
         color: var(--adf-theme-foreground-text-color-087);
     }
 
-    .mat-dialog-container {
+    .mat-mdc-dialog-container {
         padding-left: 0;
         padding-right: 0;
     }
 
-    .mat-dialog-content {
+    .mat-mdc-dialog-content {
         margin: 0;
         overflow: hidden;
         flex-grow: 1;
@@ -31,7 +31,7 @@
         }
     }
 
-    .mat-dialog-actions {
+    .mat-mdc-dialog-actions {
         padding: 0 24px;
         background-color: var(--theme-background-color);
         display: flex;
@@ -57,7 +57,8 @@
     .adf {
         &-search-user-button {
             width: 100%;
-
+            /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
+            /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
             .mat-button-wrapper {
                 display: flex;
                 align-items: center;

lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss

@@ -51,7 +51,8 @@ $search-result-height: calc(100% - 75px);
         mat-pseudo-checkbox {
             display: none;
         }
-
+        /* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version. */
+        /* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version. */
         .mat-list-text {
             display: flex;
             flex-direction: row !important;

lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.html

@@ -1,4 +1,4 @@
-<mat-card class="adf-permission-card" id="adf-permission-manager-card">
+<mat-card appearance="outlined" class="adf-permission-card" id="adf-permission-manager-card">
     <div *ngIf="(permissionList.data$ | async) === null && permissionList.loading$ | async" class="adf-permission-loader">
         <mat-progress-spinner [color]="'primary'"
                               [mode]="'indeterminate'">

lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.scss

@@ -51,7 +51,7 @@
         position: relative !important;
         height: 40px;
 
-        .mat-form-field-infix {
+        .mat-mdc-form-field-infix {
             border: none;
         }
     }

lib/content-services/src/lib/permission-manager/components/user-role-column/user-role-column.component.ts

@@ -21,7 +21,7 @@ import { RoleModel } from '../../models/role.model';
 @Component({
     selector: 'adf-user-role-column',
     template: `
-        <mat-form-field floatLabel="never" class="adf-role-selector-field" *ngIf="!readonly">
+        <mat-form-field class="adf-role-selector-field" *ngIf="!readonly">
             <mat-select
                 (click)="$event.stopPropagation()"
                 [placeholder]="placeholder | translate"
@@ -42,18 +42,18 @@ import { RoleModel } from '../../models/role.model';
     host: { class: 'adf-user-role-column adf-datatable-content-cell adf-expand-cell-4' },
     styles: [
         `.adf-role-selector-field {
-            width: 100%;
-        }
-
-        .adf-role-selector-field .mat-form-field {
-            width: 100%;
-            max-width: 200px;
-        }
-
-        .adf-readonly-role {
-            padding-left: 0 !important;
-        }
-        `
+                            width: 100%;
+                        }
+        
+                        .adf-role-selector-field .mat-mdc-form-field {
+                            width: 100%;
+                            max-width: 200px;
+                        }
+        
+                        .adf-readonly-role {
+                            padding-left: 0 !important;
+                        }
+                        `
     ]
 })
 export class UserRoleColumnComponent {

lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.scss

@@ -3,16 +3,18 @@
     flex-direction: column;
 
     .adf-facet-filter {
-        &.mat-checkbox {
+        &.mat-mdc-checkbox {
             display: block;
         }
-
+        /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
+        /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
         .mat-checkbox-label {
             text-overflow: ellipsis;
             overflow: hidden;
             width: 100%;
         }
-
+        /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
+        /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
         .mat-checkbox-layout {
             width: 100%;
         }

lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html

@@ -1,6 +1,6 @@
 <mat-form-field class="adf-chip-list" appearance="outline">
-    <mat-chip-list #chipList [attr.aria-label]="'SEARCH.FILTER.ARIA-LABEL.OPTIONS-SELECTION' | translate">
-        <mat-chip
+    <mat-chip-grid #chipList [attr.aria-label]="'SEARCH.FILTER.ARIA-LABEL.OPTIONS-SELECTION' | translate">
+        <mat-chip-row
             class="adf-option-chips"
             *ngFor="let option of selectedOptions"
             (removed)="remove(option)">
@@ -14,7 +14,7 @@
                     [attr.aria-label]="('SEARCH.FILTER.BUTTONS.REMOVE' | translate) + ' ' + option.value">
                 <mat-icon class="adf-option-chips-delete-icon">close</mat-icon>
             </button>
-        </mat-chip>
+        </mat-chip-row>
         <input
             placeholder="{{ placeholder | translate }}"
             aria-controls="adf-search-chip-autocomplete"
@@ -27,7 +27,7 @@
             (matChipInputTokenEnd)="add($event)"
             (blur)="activeAnyOption = false"
             data-automation-id="adf-search-chip-autocomplete-input">
-    </mat-chip-list>
+    </mat-chip-grid>
     <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)" id="adf-search-chip-autocomplete"
                       (optionActivated)="activeAnyOption = true" (closed)="activeAnyOption = false">
         <ng-container *ngIf="optionInput.value.length > 0">

lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss

@@ -3,15 +3,15 @@ adf-search-chip-autocomplete-input {
         width: 100%;
     }
 
-    .mat-form-field-appearance-outline .mat-form-field-outline {
+    .mat-mdc-form-field-appearance-outline .mat-mdc-form-field-outline {
         top: 0;
     }
 
-    .mat-form-field-infix {
+    .mat-mdc-form-field-infix {
         border: none;
     }
 
-    .mat-chip.adf-option-chips {
+    .mat-mdc-chip.adf-option-chips {
         border: 1px solid var(--theme-text-color);
         border-radius: 10px;
         background-color: var(--theme-primary-color-default-contrast);
@@ -19,7 +19,7 @@ adf-search-chip-autocomplete-input {
         word-break: break-word;
     }
 
-    .mat-chip-remove.adf-option-chips-delete-button {
+    .mat-mdc-chip-remove.adf-option-chips-delete-button {
         font-size: 13px;
         height: 13px;
         width: 13px;
@@ -31,20 +31,19 @@ adf-search-chip-autocomplete-input {
         }
     }
 
-    .mat-chip-list-wrapper {
+    .mat-mdc-chip-list-wrapper {
         min-height: 40px;
     }
 
-    .mat-form-field-wrapper {
+    .mat-mdc-form-field-wrapper {
         padding: 0;
     }
 }
-
-.mat-tooltip-hide {
+.mat-mdc-tooltip-hide {
     display: none;
 }
 
-.mat-option.adf-autocomplete-added-option {
+.mat-mdc-option.adf-autocomplete-added-option {
     background: var(--adf-theme-mat-grey-color-a200);
     color: var(--adf-theme-primary-300);
 }

lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.html

@@ -1,6 +1,6 @@
-<mat-chip-list>
+<mat-chip-listbox>
     <ng-container *ngIf="facetFiltersService.selectedBuckets.length">
-        <mat-chip *ngIf="clearAll && facetFiltersService.selectedBuckets.length > 1"
+        <mat-chip-option *ngIf="clearAll && facetFiltersService.selectedBuckets.length > 1"
             data-automation-id="reset-filter"
             color="primary"
             selected
@@ -8,15 +8,15 @@
             matTooltipPosition="right"
             (click)="facetFiltersService.resetAllSelectedBuckets()">
             {{ 'SEARCH.FILTER.BUTTONS.CLEAR-ALL.LABEL' | translate }}
-        </mat-chip>
+        </mat-chip-option>
 
-        <mat-chip
+        <mat-chip-option
             data-automation-id="chip-list-entry"
             *ngFor="let selection of facetFiltersService.selectedBuckets"
             [removable]="true"
             (removed)="facetFiltersService.unselectFacetBucket(selection.field, selection.bucket)">
             {{ (selection.bucket.display || selection.bucket.label) | translate }}
             <mat-icon matChipRemove>cancel</mat-icon>
-        </mat-chip>
+        </mat-chip-option>
     </ng-container>
-</mat-chip-list>
+</mat-chip-listbox>

lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.scss

@@ -1,7 +1,8 @@
-.mat-chip:focus {
+.mat-mdc-chip:focus {
     color: var(--theme-accent-color-default-contrast);
     background-color: var(--theme-accent-color);
-
+    /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
+    /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
     .mat-chip-remove {
         color: var(--theme-accent-color-default-contrast);
         opacity: 1;

lib/content-services/src/lib/search/components/search-control.component.ts

@@ -167,7 +167,7 @@ export class SearchControlComponent implements OnDestroy {
         if (this.listResultElement && this.listResultElement.length > 0) {
             const firstElement = this.listResultElement.first as MatListItem;
             // eslint-disable-next-line no-underscore-dangle
-            firstElement._getHostElement().focus();
+            firstElement._hostElement.focus();
         }
     }
 

lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.html

@@ -4,7 +4,7 @@
             <button mat-icon-button class="adf-facet-search-icon" tabindex="-1">
                 <mat-icon>search</mat-icon>
             </button>
-            <mat-form-field class="adf-facet-search-field" floatLabel="never">
+            <mat-form-field class="adf-facet-search-field">
                 <input matInput placeholder="{{ 'SEARCH.FILTER.ACTIONS.SEARCH' | translate }}"
                        [attr.data-automation-id]="'facet-result-filter-'+field.label" [(ngModel)]="field.buckets.filterText">
                 <button *ngIf="field.buckets.filterText" mat-button matSuffix mat-icon-button

lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.scss

@@ -6,13 +6,15 @@
         max-height: 180px;
         padding: 5px 0;
         overflow-y: auto;
-
+        /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
+        /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
         .mat-checkbox-label {
             text-overflow: ellipsis;
             overflow: hidden;
             width: 100%;
         }
-
+        /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
+        /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
         .mat-checkbox-layout {
             width: 100%;
         }
@@ -23,9 +25,10 @@
             white-space: nowrap;
         }
 
-        .mat-checkbox {
+        .mat-mdc-checkbox {
             margin: 5px;
-
+            /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
+            /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
             &.mat-checkbox-checked .mat-checkbox-label {
                 font-weight: bold;
             }
@@ -58,11 +61,10 @@
                 line-height: 24px;
                 letter-spacing: 0.25px;
 
-                .mat-form-field-underline {
+                .mat-mdc-form-field-underline {
                     display: none;
                 }
-
-                .mat-form-field-suffix {
+                .mat-mdc-form-field-suffix {
                     padding-right: 1px;
                 }
             }
@@ -72,7 +74,7 @@
     .adf-facet-buttons {
         text-align: right;
 
-        .mat-button {
+        .mat-mdc-button {
             text-transform: uppercase;
         }
 
@@ -80,7 +82,8 @@
             padding-top: 15px;
         }
     }
-
+    /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
+    /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
     .mat-checkbox-label,
     .mat-radio-label {
         color: var(--adf-theme-foreground-text-color-054);

lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component.html

@@ -1,4 +1,4 @@
-<mat-chip [attr.data-automation-id]="'search-filter-chip-tabbed-' + tabbedFacet.label"
+<mat-chip-option [attr.data-automation-id]="'search-filter-chip-tabbed-' + tabbedFacet.label"
           disableRipple
           class="adf-search-filter-chip-tabbed"
           [class.adf-search-toggle-chip]="displayValue || menuTrigger.menuOpen"
@@ -21,7 +21,7 @@
     <ng-template #disabledIcon>
         <mat-icon>remove</mat-icon>
     </ng-template>
-</mat-chip>
+</mat-chip-option>
 
 <mat-menu #menu="matMenu" class="adf-search-widget-extra-width" backdropClass="adf-search-filter-chip-menu" (closed)="onClosed()">
     <div #menuContainer [attr.data-automation-id]="'search-field-' + tabbedFacet.label">

lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component.scss

@@ -11,6 +11,8 @@ adf-search-facet-chip-tabbed {
 }
 
 adf-search-filter-tabbed {
+    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
+    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
     .mat-tab-body-wrapper {
         margin-top: 16px;
     }

lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.html

@@ -1,4 +1,4 @@
-<mat-chip [attr.data-automation-id]="'search-filter-chip-' + field.label"
+<mat-chip-option [attr.data-automation-id]="'search-filter-chip-' + field.label"
           disableRipple
           class="adf-search-filter-chip"
           [class.adf-search-toggle-chip]="(facetField.displayValue$ | async) || menuTrigger.menuOpen"
@@ -23,7 +23,7 @@
     <ng-template #disabledIcon>
         <mat-icon>remove</mat-icon>
     </ng-template>
-</mat-chip>
+</mat-chip-option>
 
 <mat-menu #menu="matMenu" backdropClass="adf-search-filter-chip-menu" (closed)="onClosed()">
     <div #menuContainer [attr.data-automation-id]="'search-field-' + field.label">

lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.html

@@ -1,4 +1,4 @@
-<mat-chip-list role="listbox" [attr.aria-label]="'SEARCH.FILTER.ARIA-LABEL.SEARCH_FILTER' | translate">
+<mat-chip-listbox role="listbox" [attr.aria-label]="'SEARCH.FILTER.ARIA-LABEL.SEARCH_FILTER' | translate">
     <ng-container *ngFor="let category of queryBuilder.categories">
         <adf-search-widget-chip [category]="category"></adf-search-widget-chip>
     </ng-container>
@@ -14,4 +14,4 @@
             <adf-search-facet-chip [field]="field" [attr.data-automation-id]="'search-fact-chip-' + field.field" ></adf-search-facet-chip>
         </ng-container>
     </ng-container>
-</mat-chip-list>
+</mat-chip-listbox>

lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss

@@ -2,7 +2,7 @@
 
 .adf-search-filter-chip,
 .adf-search-filter-chip-tabbed {
-    &.mat-chip {
+    &.mat-mdc-chip {
         border: 2px solid transparent;
         transition: border 500ms ease-in-out;
         max-width: 320px;
@@ -14,11 +14,12 @@
             color: unset;
         }
 
-        &.mat-standard-chip::after {
+        &.mat-mdc-standard-chip::after {
             background: var(--adf-theme-background-unselected-chip-color);
             color: unset;
         }
-
+        /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
+        /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
         &.mat-chip-list-wrapper {
             margin: 4px 6px;
         }
@@ -28,7 +29,7 @@
         background: var(--adf-theme-background-card-color);
         border: 2px solid var(--theme-primary-color);
 
-        &.mat-chip::after {
+        &.mat-mdc-chip::after {
             background: unset;
         }
     }
@@ -55,7 +56,7 @@
         padding-left: 5px;
     }
 
-    &-menu + * .cdk-overlay-pane .mat-menu-panel {
+    &-menu + * .cdk-overlay-pane .mat-mdc-menu-panel {
         min-width: 320px;
         border-radius: 12px;
 

lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.html

@@ -1,4 +1,4 @@
-<mat-chip [attr.data-automation-id]="'search-filter-chip-' + category.name"
+<mat-chip-option [attr.data-automation-id]="'search-filter-chip-' + category.name"
           disableRipple
           class="adf-search-filter-chip"
           [class.adf-search-toggle-chip]="(widget.getDisplayValue() | async) || menuTrigger.menuOpen"
@@ -17,7 +17,7 @@
     </span>
     <ng-template #showAny><span class="adf-search-filter-ellipsis adf-filter-value">&nbsp;{{ 'SEARCH.FILTER.ANY' | translate }}</span></ng-template>
     <mat-icon>{{ chipIcon }}</mat-icon>
-</mat-chip>
+</mat-chip-option>
 
 <mat-menu #menu="matMenu" class="adf-search-widget-extra-width" backdropClass="adf-search-filter-chip-menu" [class]="'adf-search-filter-chip-menu-panel-' + category.id" (closed)="onClosed()">
     <div #menuContainer [attr.data-automation-id]="'search-field-' + category.name">

lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.ts

@@ -26,10 +26,10 @@ import { SearchWidgetContainerComponent } from '../../search-widget-container/se
   templateUrl: './search-widget-chip.component.html',
   styles: [
       `
-    .adf-search-widget-extra-width {
-      max-width: 500px;
-    }
-  `
+                .adf-search-widget-extra-width {
+                  max-width: 500px;
+                }
+              `
   ],
   encapsulation: ViewEncapsulation.None
 })

lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.scss

@@ -61,7 +61,7 @@
     }
 }
 
-.mat-menu-panel.adf-filter-menu .mat-menu-content {
+.mat-mdc-menu-panel.adf-filter-menu .mat-mdc-menu-content {
     min-width: 260px;
     padding: 0;
 }

lib/content-services/src/lib/search/components/search-filter-tabbed/search-filter-tabbed.component.scss

@@ -1,7 +1,12 @@
 adf-search-filter-tabbed {
+    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.*/
+    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.*/
+    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.*/
+    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.*/
     .mat-tab-label {
         flex: 1;
-
+        /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.*/
+        /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.*/
         &.mat-tab-label-active {
             border-bottom: 2px solid var(--theme-primary-color);
         }
@@ -9,7 +14,9 @@ adf-search-filter-tabbed {
 
     // The important tag is used here as a workaround for a bug in angular material, when MatTabs are used in conjunction with MatMenu
     // https://github.com/angular/components/issues/27426
-    .mat-tab-body.mat-tab-body-active .mat-tab-body-content {
+    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.*/
+    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.*/
+    .mat-mdc-tab-body.mat-tab-body-active .mat-tab-body-content {
         display: block;
         visibility: visible !important;
     }

lib/content-services/src/lib/search/components/search-filter/search-filter.component.scss

@@ -3,7 +3,8 @@
         font-size: var(--theme-body-1-font-size);
         color: var(--adf-theme-foreground-text-color-087);
     }
-
+    /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
+    /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
     .mat-checkbox-label,
     .mat-radio-label {
         color: var(--adf-theme-foreground-text-color-054);

lib/content-services/src/lib/search/components/search-form/search-form.component.scss

@@ -1,13 +1,14 @@
 @use '@angular/material' as mat;
 
 .adf-search-form {
-    &.mat-button {
+    &.mat-mdc-button {
         height: 35px;
         max-width: 190px;
         min-width: 190px;
         align-content: center;
         overflow: hidden;
-
+        /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
+        /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
         .mat-button-wrapper {
             display: flex;
             align-items: center;
@@ -36,12 +37,12 @@
         border-color: var(--theme-accent-color);
     }
 
-    &-menu + * .mat-menu-panel {
+    &-menu + * .mat-mdc-menu-panel {
         @include mat.elevation(2);
 
         border-radius: 6px;
 
-        .mat-menu-content {
+        .mat-mdc-menu-content {
             padding: 0;
         }
     }

lib/content-services/src/lib/search/components/search-properties/search-properties.component.scss

@@ -18,20 +18,22 @@ adf-search-properties {
 
     .adf-search-properties-file-size-operator,
     .adf-search-properties-file-size-unit {
-        .mat-form-field-infix {
+
+        .mat-mdc-form-field-infix {
             border: 1px solid var(--adf-theme-mat-grey-color-a400);
             border-radius: 5px;
             padding: 9px;
         }
 
         &.mat-focused {
-            .mat-form-field-infix {
+
+            .mat-mdc-form-field-infix {
                 outline: 2px auto -webkit-focus-ring-color;
             }
         }
     }
 
-    .mat-form-field-underline {
+    .mat-mdc-form-field-underline {
         display: none;
     }
 
@@ -42,8 +44,9 @@ adf-search-properties {
     adf-search-chip-autocomplete-input {
         display: block;
 
-        .mat-form-field-outline {
-            .mat-form-field-outline {
+        .mat-mdc-form-field-outline {
+
+            .mat-mdc-form-field-outline {
                 &-start,
                 &-end {
                     border-top: 1px solid var(--adf-theme-mat-grey-color-a400);
@@ -61,14 +64,16 @@ adf-search-properties {
         }
 
         .mat-focused {
-            .mat-form-field-outline {
+            .mat-mdc-form-field-outline {
                 outline: 2px auto -webkit-focus-ring-color;
             }
         }
 
-        .mat-form-field-appearance-outline {
-            .mat-form-field-outline-thick {
-                .mat-form-field-outline {
+        .mat-mdc-form-field-appearance-outline {
+
+            .mat-mdc-form-field-outline-thick {
+
+                .mat-mdc-form-field-outline {
                     &-start,
                     &-end {
                         border-width: 1px;

lib/content-services/src/lib/search/components/search-radio/search-radio.component.scss

@@ -1,20 +1,23 @@
 .adf-search-radio {
-    .mat-radio-group {
+    .mat-mdc-radio-group {
         display: flex;
         flex-direction: column;
     }
 
-    .mat-radio-button {
+    .mat-mdc-radio-button {
         margin: 5px;
     }
 
     .adf-facet-filter {
+        /* TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version. */
+        /* TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version. */
         .mat-radio-label-content {
             text-overflow: ellipsis;
             overflow: hidden;
             width: 100%;
         }
-
+        /* TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version. */
+        /* TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version. */
         .mat-radio-label {
             width: 100%;
         }

lib/content-services/src/lib/search/components/search-slider/search-slider.component.html

@@ -1,11 +1,10 @@
 <mat-slider
-    [(value)]="value"
     [min]="min"
     [max]="max"
     [step]="step"
-    [thumbLabel]="thumbLabel"
-    (change)="onChangedHandler($event)"
-    data-automation-id="slider-range">
+    data-automation-id="slider-range" #ngSlider><input matSliderThumb />
+    <input matSliderThumb (change)="onChangedHandler({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value})" #ngSliderThumb="matSliderThumb" [(value)]="value" />
+    <input *ngIf="thumbLabel" matSliderThumb>
 </mat-slider>
 
 <div class="adf-facet-buttons" *ngIf="!settings?.hideDefaultAction">

lib/content-services/src/lib/search/components/search-slider/search-slider.component.scss

@@ -1,5 +1,5 @@
 .adf-search-slider {
-    .mat-slider {
+    .mat-mdc-slider {
         width: 100%;
     }
 }

lib/content-services/src/lib/search/components/search-sorting-picker/search-sorting-picker.component.scss

@@ -1,5 +1,5 @@
 .adf-search-sorting-picker {
-    .mat-icon-button {
+    .mat-mdc-icon-button {
         color: var(--adf-theme-foreground-text-color-054);
     }
 }

lib/content-services/src/lib/search/components/search-text/search-text.component.scss

@@ -1,5 +1,5 @@
 .adf-search-text {
-    .mat-form-field {
+    .mat-mdc-form-field {
         width: 100%;
         max-width: 168px;
     }

lib/content-services/src/lib/site-dropdown/sites-dropdown.component.scss

@@ -1,6 +1,6 @@
 .adf-sites-dropdown {
     &.adf-full-width {
-        .mat-form-field {
+        .mat-mdc-form-field {
             width: 100%;
         }
     }

lib/content-services/src/lib/social/rating.component.scss

@@ -22,7 +22,8 @@ $adf-average-star-color: #808080;
         transition: all 0.3s;
         cursor: pointer;
         width: 25px;
-
+        /* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version. */
+        /* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version. */
         .mat-list-item-content {
             padding: 0 !important;
         }

lib/content-services/src/lib/tag/tag-list.component.html

@@ -1,10 +1,10 @@
-<mat-chip-list class="adf-tag-chips-list">
+<mat-chip-listbox class="adf-tag-chips-list">
     <div class="adf-list-tag" *ngFor="let currentEntry of tagsEntries; let idx = index">
-        <mat-chip>
+        <mat-chip-option>
             <span id="tag_name_{{idx}}">{{currentEntry.entry.tag}}</span>
-        </mat-chip>
+        </mat-chip-option>
     </div>
-</mat-chip-list>
+</mat-chip-listbox>
 
 <div class="adf-tag-list-controls">
     <button

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

@@ -12,7 +12,7 @@
             display: block;
             font-size: var(--theme-subheading-2-font-size);
 
-            .mat-chip {
+            .mat-mdc-chip {
                 color: var(--theme-primary-color-default-contrast);
                 background-color: var(--theme-primary-color);
 

lib/content-services/src/lib/tag/tag-node-list.component.html

@@ -1,14 +1,14 @@
 <div class="adf-tag-node-list" [class.adf-flex-column]="limitTagsDisplayed && (!calculationsDone || columnFlexDirection)" #nodeListContainer>
-    <mat-chip-list [class.adf-full-width]="limitTagsDisplayed && !calculationsDone" role="listbox" [attr.aria-label]="'METADATA.BASIC.TAGS' | translate">
-        <mat-chip class="adf-tag-chips"
+    <mat-chip-listbox [class.adf-full-width]="limitTagsDisplayed && !calculationsDone" role="listbox" [attr.aria-label]="'METADATA.BASIC.TAGS' | translate">
+        <mat-chip-option class="adf-tag-chips"
                   *ngFor="let currentEntry of tagsEntries; let idx = index"
                   (removed)="removeTag(currentEntry.entry.id)">
             <span id="tag_name_{{idx}}">{{currentEntry.entry.tag}}</span>
             <mat-icon *ngIf="showDelete" id="tag_chips_delete_{{currentEntry.entry.tag}}"
                       class="adf-tag-chips-delete-icon" matChipRemove>cancel
             </mat-icon>
-        </mat-chip>
-    </mat-chip-list>
+        </mat-chip-option>
+    </mat-chip-listbox>
     <button mat-button
         [hidden]="!limitTagsDisplayed"
         [style.left.px]="viewMoreButtonLeftOffset"

lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss

@@ -92,7 +92,8 @@ adf-tags-creator {
                 & + .adf-tag {
                     margin-top: -10px;
                 }
-
+                /* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version. */
+                /* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version. */
                 .mat-list-item-content-reverse {
                     padding: 0 6px;
 
@@ -107,14 +108,16 @@ adf-tags-creator {
                 overflow: unset;
                 min-height: 62px;
             }
-
+            /* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version. */
+            /* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version. */
             .mat-list-item-disabled {
                 background-color: inherit;
                 color: inherit;
             }
         }
     }
-
+    /* TODO(mdc-migration): The following rule targets internal classes of dialog that may no longer apply for the MDC version. */
+    /* TODO(mdc-migration): The following rule targets internal classes of dialog that may no longer apply for the MDC version. */
     mat-dialog-actions {
         margin-right: -24px;
         background-color: inherit;

lib/content-services/src/lib/upload/components/file-uploading-list-row.component.html

@@ -13,10 +13,10 @@
     </span>
 
     <span *ngIf="isUploadVersion()" class="adf-file-uploading-row__version" tabindex="0" >
-        <mat-chip color="primary"
+        <mat-chip-option color="primary"
             [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.VERSION' | translate: { version:  versionNumber }"
             [title]="'version' + versionNumber" disabled
-        >{{ versionNumber }}</mat-chip>
+        >{{ versionNumber }}</mat-chip-option>
     </span>
 
     <div

lib/content-services/src/lib/version-manager/version-list.component.scss

@@ -1,4 +1,6 @@
 .adf-version-list {
+    /* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version. */
+    /* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version. */
     .mat-list-item-content {
         border-bottom: 1px solid #d8d8d8;
     }

lib/content-services/src/lib/version-manager/version-manager.component.scss

@@ -1,9 +1,10 @@
 adf-version-manager {
-    .mat-list .mat-3-line {
+    .mat-mdc-list .mat-3-line {
         height: auto !important;
         width: 100% !important;
     }
-
+    /* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version. */
+    /* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version. */
     .mat-list-item-content {
         padding: 16px 0 !important;
     }

lib/content-services/src/test.ts

@@ -18,25 +18,12 @@
 import 'zone.js';
 import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
-import {
-    BrowserDynamicTestingModule,
-    platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
-
-declare const require: any;
+import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
 
 // First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-    BrowserDynamicTestingModule,
-    platformBrowserDynamicTesting(), {
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
     teardown: { destroyAfterEach: false }
-}
-);
+});
 
 declare const pdfjsLib: any;
 pdfjsLib.GlobalWorkerOptions.workerSrc = 'base/pdfjs-dist/build/pdf.worker.min.js';
-
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);

lib/content-services/tsconfig.lib.json

@@ -9,6 +9,8 @@
       "@alfresco/adf-extensions/*": ["../../../dist/libs/extensions/*"],
       "@alfresco/adf-core": ["../../../dist/libs/core"],
       "@alfresco/adf-core/*": ["../../../dist/libs/core/*"]
-    }
+    },
+    "target": "ES2022",
+    "useDefineForClassFields": false
   }
 }

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

@@ -1,7 +1,9 @@
 {
   "extends": "./tsconfig.lib.json",
   "compilerOptions": {
-    "declarationMap": false
+    "declarationMap": false,
+    "target": "ES2022",
+    "useDefineForClassFields": false
   },
   "angularCompilerOptions": {
     "compilationMode": "partial"

lib/content-services/tsconfig.spec.json

@@ -1,7 +1,9 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "outDir": "../../dist/out-tsc"
+    "outDir": "../../dist/out-tsc",
+    "target": "ES2022",
+    "useDefineForClassFields": false
   },
   "files": ["src/test.ts"],
   "include": ["**/*.spec.ts", "**/*.test.ts", "**/*.d.ts"]

lib/core/.eslintrc.json

@@ -4,9 +4,9 @@
   "overrides": [
     {
       "files": ["*.ts"],
-      "extends": ["plugin:@nrwl/nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
+      "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
       "rules": {
-        "jsdoc/newline-after-description": "warn",
+
         "@typescript-eslint/naming-convention": "off",
         "@typescript-eslint/consistent-type-assertions": "warn",
         "@typescript-eslint/prefer-for-of": "off",
@@ -74,7 +74,7 @@
     },
     {
       "files": ["*.html"],
-      "extends": ["plugin:@nrwl/nx/angular-template"],
+      "extends": ["plugin:@nx/angular-template"],
       "rules": {
         "@angular-eslint/template/no-autofocus": "error",
         "@angular-eslint/template/no-positive-tabindex": "error",

lib/core/.storybook/main.js

@@ -1,16 +1,13 @@
 const rootMain = 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-core/i18n' },
-    { from: __dirname + '/../src/lib/assets/images', to: 'assets/images' }
-  ],
-  addons: [...rootMain.addons ]
+    ...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-core/i18n' },
+        { from: __dirname + '/../src/lib/assets/images', to: 'assets/images' }
+    ],
+    addons: ['@storybook/addon-essentials', ...rootMain.addons]
 };

lib/core/api/src/lib/adf-http-client.service.spec.ts

@@ -23,31 +23,31 @@ import { AdfHttpClient } from './adf-http-client.service';
 import { AlfrescoApiResponseError } from './alfresco-api/alfresco-api.response-error';
 
 const securityOptions: SecurityOptions = {
-    authentications: {},
-    defaultHeaders: {},
-    isBpmRequest: false,
-    enableCsrf: true,
-    withCredentials: false
+    "authentications": {},
+    "defaultHeaders": {},
+    "isBpmRequest": false,
+    "enableCsrf": true,
+    "withCredentials": false
 };
 
 const emitter = {
-    emit: () => {},
-    off: () => {},
-    on: () => {},
-    once: () => {}
+    "emit": () => {},
+    "off": () => {},
+    "on": () => {},
+    "once": () => {}
 };
 
 const emitters: Emitters = {
-    eventEmitter: emitter,
-    apiClientEmitter: emitter
+    "eventEmitter": emitter,
+    "apiClientEmitter": emitter
 };
 
 const mockResponse =  {
-    data: [
+    "data": [
         {
-            id: 14,
-            name: 'nameFake1',
-            created: '2017-03-01T12:25:17.189+0000'
+            "id": 14,
+            "name": 'nameFake1',
+            "created": '2017-03-01T12:25:17.189+0000'
         }
     ]
 };
@@ -58,7 +58,7 @@ describe('AdfHttpClient', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [
+            "imports": [
                 HttpClientTestingModule
             ]
         });
@@ -76,13 +76,13 @@ describe('AdfHttpClient', () => {
         it('should deserialize incoming request based on return type', (done) => {
 
             const options: RequestOptions = {
-                path: '',
-                httpMethod: 'POST',
-                returnType: ResultListDataRepresentationTaskRepresentation,
-                headerParams: {
+                "path": '',
+                "httpMethod": 'POST',
+                "returnType": ResultListDataRepresentationTaskRepresentation,
+                "headerParams": {
                     'Content-Type': 'application/json'
                 },
-                accepts: ['application/json']
+                "accepts": ['application/json']
             };
 
             angularHttpClient.request('http://example.com', options, securityOptions, emitters).then((res: ResultListDataRepresentationTaskRepresentation) => {
@@ -102,9 +102,9 @@ describe('AdfHttpClient', () => {
         it('should return parsed json object when responseType is json', (done) => {
 
             const options: RequestOptions = {
-                path: '',
-                httpMethod: 'POST',
-                responseType: 'json'
+                "path": '',
+                "httpMethod": 'POST',
+                "responseType": 'json'
             };
 
             angularHttpClient.request('http://example.com', options, securityOptions, emitters).then((res) => {
@@ -121,8 +121,8 @@ describe('AdfHttpClient', () => {
 
         it('should emit unauthorized message for 401 request', (done) => {
             const options: RequestOptions = {
-                path: '',
-                httpMethod: 'POST'
+                "path": '',
+                "httpMethod": 'POST'
             };
 
             const spy = spyOn(emitter, 'emit').and.callThrough();
@@ -135,7 +135,7 @@ describe('AdfHttpClient', () => {
             const req = controller.expectOne('http://example.com');
             expect(req.request.method).toEqual('POST');
 
-            req.flush('<div></div>', { status: 401, statusText: 'unauthorized'});
+            req.flush('<div></div>', { "status": 401, "statusText": 'unauthorized'});
         });
 
     });
@@ -148,33 +148,33 @@ describe('AdfHttpClient', () => {
 
         it('should behave...', () => {
             const requestOptions: RequestOptions = {
-                path: '/nodes/{nodeId}/children',
-                httpMethod: 'POST',
-                queryParams: {
-                    autoRename: true,
-                    include: 'allowableOperations',
-                    fields: null
+                "path": '/nodes/{nodeId}/children',
+                "httpMethod": 'POST',
+                "queryParams": {
+                    "autoRename": true,
+                    "include": 'allowableOperations',
+                    "fields": null
                 },
-                formParams: {
-                    filedata: new File([], 'file.txt'),
-                    relativePath: '',
-                    include: ['allowableOperations'],
-                    renditions: 'doclib',
-                    autoRename: true,
-                    nodeType: 'cm:content'
+                "formParams": {
+                    "filedata": new File([], 'file.txt'),
+                    "relativePath": '',
+                    "include": ['allowableOperations'],
+                    "renditions": 'doclib',
+                    "autoRename": true,
+                    "nodeType": 'cm:content'
                 },
-                bodyParam: {
-                    name: 'demo.txt',
-                    nodeType: 'cm:content',
-                    relativePath: '',
-                    newVersion: false,
-                    majorVersion: false,
-                    parentId: '-my-',
-                    path: ''
+                "bodyParam": {
+                    "name": 'demo.txt',
+                    "nodeType": 'cm:content',
+                    "relativePath": '',
+                    "newVersion": false,
+                    "majorVersion": false,
+                    "parentId": '-my-',
+                    "path": ''
                 },
-                contentType: 'multipart/form-data',
-                accept: 'application/json',
-                returnType: null
+                "contentType": 'multipart/form-data',
+                "accept": 'application/json',
+                "returnType": null
             };
 
             angularHttpClient.request('http://example.com', requestOptions, securityOptions, emitters).catch(error =>
@@ -201,14 +201,14 @@ describe('AdfHttpClient', () => {
 
     it('should return a Error type on failed promise, for backward compatibility, with string value to prevent JSON.parse from crashing when we try to get status code from message', (done) => {
         const options: RequestOptions = {
-            path: '',
-            httpMethod: 'POST'
+            "path": '',
+            "httpMethod": 'POST'
         };
 
         const errorResponse = {
-            error: {
-                errorKey: 'Cant perform action',
-                statusCode: 403
+            "error": {
+                "errorKey": 'Cant perform action',
+                "statusCode": 403
             }
         };
 
@@ -222,14 +222,14 @@ describe('AdfHttpClient', () => {
         const req = controller.expectOne('http://example.com');
         expect(req.request.method).toEqual('POST');
 
-        req.flush(errorResponse, { status: 403, statusText: 'Forbidden' });
+        req.flush(errorResponse, { "status": 403, "statusText": 'Forbidden' });
     });
 
     it('should return a Error type on failed promise with response body', (done) => {
         const options: RequestOptions = {
-            path: '',
-            httpMethod: 'POST',
-            responseType: 'blob'
+            "path": '',
+            "httpMethod": 'POST',
+            "responseType": 'blob'
         };
 
         const errorResponse = new Blob();
@@ -242,20 +242,20 @@ describe('AdfHttpClient', () => {
 
         const req = controller.expectOne('http://example.com');
 
-        req.flush(errorResponse, { status: 400, statusText: 'Bad request' });
+        req.flush(errorResponse, { "status": 400, "statusText": 'Bad request' });
     });
 
     it('should correctly handle queryParams with arrays', () => {
         const options: RequestOptions = {
-            path: '',
-            httpMethod: 'POST',
-            queryParams: {
-                skipCount: 0,
-                status: [
+            "path": '',
+            "httpMethod": 'POST',
+            "queryParams": {
+                "skipCount": 0,
+                "status": [
                     'RUNNING',
                     'SUSPENDED'
                 ],
-                sort: 'startDate,DESC'
+                "sort": 'startDate,DESC'
             }
         };
 
@@ -266,13 +266,13 @@ describe('AdfHttpClient', () => {
         const req = controller.expectOne('http://example.com/candidatebaseapp/query/v1/process-instances?skipCount=0&status=RUNNING&status=SUSPENDED&sort=startDate%2CDESC');
         expect(req.request.method).toEqual('POST');
 
-        req.flush(null, { status: 200, statusText: 'Ok' });
+        req.flush(null, { "status": 200, "statusText": 'Ok' });
     });
 
     it('should convert null values to empty stirng for backward compatibility', (done) => {
         const options: RequestOptions = {
-            path: '',
-            httpMethod: 'GET'
+            "path": '',
+            "httpMethod": 'GET'
         };
 
         angularHttpClient.request('http://example.com', options, securityOptions, emitters).then((res) => {
@@ -282,15 +282,15 @@ describe('AdfHttpClient', () => {
 
         const req = controller.expectOne('http://example.com');
 
-        req.flush(null, { status: 200, statusText: 'Ok' });
+        req.flush(null, { "status": 200, "statusText": 'Ok' });
     });
 
     it('should correctly decode types to string', () => {
         const options: RequestOptions = {
-            path: '',
-            httpMethod: 'POST',
-            queryParams: {
-                lastModifiedFrom: '2022-08-17T00:00:00.000+02:00'
+            "path": '',
+            "httpMethod": 'POST',
+            "queryParams": {
+                "lastModifiedFrom": '2022-08-17T00:00:00.000+02:00'
             }
         };
 
@@ -300,15 +300,15 @@ describe('AdfHttpClient', () => {
 
         const req = controller.expectOne('http://example.com?lastModifiedFrom=2022-08-17T00%3A00%3A00.000%2B02%3A00');
 
-        req.flush(null, { status: 200, statusText: 'Ok' });
+        req.flush(null, { "status": 200, "statusText": 'Ok' });
     });
 
     it('should correctly decode Date types to string ', () => {
         const options: RequestOptions = {
-            path: '',
-            httpMethod: 'POST',
-            queryParams: {
-                lastModifiedFrom: new Date('2022-08-17T00:00:00.000Z')
+            "path": '',
+            "httpMethod": 'POST',
+            "queryParams": {
+                "lastModifiedFrom": new Date('2022-08-17T00:00:00.000Z')
             }
         };
 
@@ -318,16 +318,16 @@ describe('AdfHttpClient', () => {
 
         const req = controller.expectOne('http://example.com?lastModifiedFrom=2022-08-17T00%3A00%3A00.000Z');
 
-        req.flush(null, { status: 200, statusText: 'Ok' });
+        req.flush(null, { "status": 200, "statusText": 'Ok' });
     });
 
     it('should set Content-type to multipart/form-data if contentTypes array contains only multipart/form-data element', () => {
         const options: RequestOptions = {
-            path: '',
-            httpMethod: 'POST',
-            contentTypes: ['multipart/form-data'],
-            queryParams: {
-                lastModifiedFrom: new Date('2022-08-17T00:00:00.000Z')
+            "path": '',
+            "httpMethod": 'POST',
+            "contentTypes": ['multipart/form-data'],
+            "queryParams": {
+                "lastModifiedFrom": new Date('2022-08-17T00:00:00.000Z')
             }
         };
 
@@ -339,16 +339,16 @@ describe('AdfHttpClient', () => {
 
         expect(req.request.headers.get('Content-Type')).toEqual('multipart/form-data');
 
-        req.flush(null, { status: 200, statusText: 'Ok' });
+        req.flush(null, { "status": 200, "statusText": 'Ok' });
     });
 
     it('should set Content-type header to application/json if contentTypes array contains application/json', () => {
         const options: RequestOptions = {
-            path: '',
-            httpMethod: 'POST',
-            contentTypes: ['multipart/form-data', 'application/json'],
-            queryParams: {
-                lastModifiedFrom: new Date('2022-08-17T00:00:00.000Z')
+            "path": '',
+            "httpMethod": 'POST',
+            "contentTypes": ['multipart/form-data', 'application/json'],
+            "queryParams": {
+                "lastModifiedFrom": new Date('2022-08-17T00:00:00.000Z')
             }
         };
 
@@ -360,15 +360,15 @@ describe('AdfHttpClient', () => {
 
         expect(req.request.headers.get('Content-Type')).toEqual('application/json');
 
-        req.flush(null, { status: 200, statusText: 'Ok' });
+        req.flush(null, { "status": 200, "statusText": 'Ok' });
     });
 
     it('should set Content-type to application/json if contentTypes is not passed to the request options', () => {
         const options: RequestOptions = {
-            path: '',
-            httpMethod: 'POST',
-            queryParams: {
-                lastModifiedFrom: new Date('2022-08-17T00:00:00.000Z')
+            "path": '',
+            "httpMethod": 'POST',
+            "queryParams": {
+                "lastModifiedFrom": new Date('2022-08-17T00:00:00.000Z')
             }
         };
 
@@ -380,15 +380,15 @@ describe('AdfHttpClient', () => {
 
         expect(req.request.headers.get('Content-Type')).toEqual('application/json');
 
-        req.flush(null, { status: 200, statusText: 'Ok' });
+        req.flush(null, { "status": 200, "statusText": 'Ok' });
     });
 
     it('should set Accept header to application/json if accepts is not passed to the request options', () => {
         const options: RequestOptions = {
-            path: '',
-            httpMethod: 'POST',
-            queryParams: {
-                lastModifiedFrom: new Date('2022-08-17T00:00:00.000Z')
+            "path": '',
+            "httpMethod": 'POST',
+            "queryParams": {
+                "lastModifiedFrom": new Date('2022-08-17T00:00:00.000Z')
             }
         };
 
@@ -400,7 +400,7 @@ describe('AdfHttpClient', () => {
 
         expect(req.request.headers.get('Accept')).toEqual('application/json');
 
-        req.flush(null, { status: 200, statusText: 'Ok' });
+        req.flush(null, { "status": 200, "statusText": 'Ok' });
     });
 
 });

lib/core/api/src/lib/adf-http-client.service.ts

@@ -50,7 +50,7 @@ export interface Emitters {
 }
 
 @Injectable({
-    providedIn: 'root'
+    "providedIn": 'root'
 })
 export class AdfHttpClient implements ee.Emitter,JsApiHttpClient {
 
@@ -61,30 +61,30 @@ export class AdfHttpClient implements ee.Emitter,JsApiHttpClient {
 
     emit: (type: string, ...args: any[]) => void;
 
-    get disableCsrf(): boolean {
+    get disableCsrf (): boolean {
         return this._disableCsrf;
     }
 
-    set disableCsrf(disableCsrf: boolean) {
+    set disableCsrf (disableCsrf: boolean) {
         this._disableCsrf = disableCsrf;
     }
 
     private defaultSecurityOptions = {
-        withCredentials: true,
-        isBpmRequest: false,
-        authentications: {},
-        defaultHeaders: {}
+        "withCredentials": true,
+        "isBpmRequest": false,
+        "authentications": {},
+        "defaultHeaders": {}
     };
 
-    constructor(private httpClient: HttpClient) {
+    constructor (private httpClient: HttpClient) {
         ee(this);
     }
 
-    setDefaultSecurityOption(options: any) {
+    setDefaultSecurityOption (options: any) {
         this.defaultSecurityOptions = this.merge(this.defaultSecurityOptions, options);
     }
 
-    merge(...objects): any {
+    merge (...objects): any {
         const result = {};
 
         objects.forEach((source) => {
@@ -102,7 +102,7 @@ export class AdfHttpClient implements ee.Emitter,JsApiHttpClient {
         return result;
     }
 
-    request<T = any>(url: string, options?: RequestOptions, sc: SecurityOptions = this.defaultSecurityOptions, emitters?: JsApiEmitters): Promise<T> {
+    request<T = any> (url: string, options?: RequestOptions, sc: SecurityOptions = this.defaultSecurityOptions, emitters?: JsApiEmitters): Promise<T> {
         const body = AdfHttpClient.getBody(options);
         const params = getQueryParamsWithCustomEncoder(options.queryParams, new AlfrescoApiParamEncoder());
         const responseType = AdfHttpClient.getResponseType(options);
@@ -123,48 +123,48 @@ export class AdfHttpClient implements ee.Emitter,JsApiHttpClient {
                 ...security,
                 ...(params && {params}),
                 headers,
-                observe: 'events',
-                reportProgress: true
+                "observe": 'events',
+                "reportProgress": true
             }
         );
 
         return this.requestWithLegacyEventEmitters<T>(request, emitters, options.returnType);
     }
 
-    post<T = any>(url: string, options?: RequestOptions, sc?: SecurityOptions, emitters?: JsApiEmitters): Promise<T> {
-        return this.request<T>(url, {...options, httpMethod: 'POST'}, sc, emitters);
+    post<T = any> (url: string, options?: RequestOptions, sc?: SecurityOptions, emitters?: JsApiEmitters): Promise<T> {
+        return this.request<T>(url, {...options, "httpMethod": 'POST'}, sc, emitters);
     }
 
-    put<T = any>(url: string, options?: RequestOptions, sc?: SecurityOptions, emitters?: JsApiEmitters): Promise<T> {
-        return this.request<T>(url, {...options, httpMethod: 'PUT'}, sc, emitters);
+    put<T = any> (url: string, options?: RequestOptions, sc?: SecurityOptions, emitters?: JsApiEmitters): Promise<T> {
+        return this.request<T>(url, {...options, "httpMethod": 'PUT'}, sc, emitters);
     }
 
-    get<T = any>(url: string, options?: RequestOptions, sc?: SecurityOptions, emitters?: JsApiEmitters): Promise<T> {
-        return this.request<T>(url, {...options, httpMethod: 'GET'}, sc, emitters);
+    get<T = any> (url: string, options?: RequestOptions, sc?: SecurityOptions, emitters?: JsApiEmitters): Promise<T> {
+        return this.request<T>(url, {...options, "httpMethod": 'GET'}, sc, emitters);
     }
 
-    delete<T = void>(url: string, options?: RequestOptions, sc?: SecurityOptions, emitters?: JsApiEmitters): Promise<T> {
-        return this.request<T>(url, {...options, httpMethod: 'DELETE'}, sc, emitters);
+    delete<T = void> (url: string, options?: RequestOptions, sc?: SecurityOptions, emitters?: JsApiEmitters): Promise<T> {
+        return this.request<T>(url, {...options, "httpMethod": 'DELETE'}, sc, emitters);
     }
 
-    private addPromiseListeners<T = any>(promise: Promise<T>, eventEmitter: any)  {
+    private addPromiseListeners<T = any> (promise: Promise<T>, eventEmitter: any)  {
         const eventPromise = Object.assign(promise, {
-            on() {
+            on () {
                 // eslint-disable-next-line prefer-spread, prefer-rest-params
                 eventEmitter.on.apply(eventEmitter, arguments);
                 return this;
             },
-            once() {
+            once () {
                 // eslint-disable-next-line prefer-spread, prefer-rest-params
                 eventEmitter.once.apply(eventEmitter, arguments);
                 return this;
             },
-            emit() {
+            emit () {
                 // eslint-disable-next-line prefer-spread, prefer-rest-params
                 eventEmitter.emit.apply(eventEmitter, arguments);
                 return this;
             },
-            off() {
+            off () {
                 // eslint-disable-next-line prefer-spread, prefer-rest-params
                 eventEmitter.off.apply(eventEmitter, arguments);
                 return this;
@@ -174,21 +174,21 @@ export class AdfHttpClient implements ee.Emitter,JsApiHttpClient {
         return eventPromise;
     }
 
-    private getEventEmitters(): Emitters {
+    private getEventEmitters (): Emitters {
         const apiClientEmitter = {
-            on: this.on.bind(this),
-            off: this.off.bind(this),
-            once: this.once.bind(this),
-            emit: this.emit.bind(this)
+            "on": this.on.bind(this),
+            "off": this.off.bind(this),
+            "once": this.once.bind(this),
+            "emit": this.emit.bind(this)
         };
 
         return {
             apiClientEmitter,
-            eventEmitter: ee({})
+            "eventEmitter": ee({})
         };
     }
 
-    private requestWithLegacyEventEmitters<T = any>(request$: Observable<HttpEvent<T>>, emitters: JsApiEmitters, returnType: any): Promise<T> {
+    private requestWithLegacyEventEmitters<T = any> (request$: Observable<HttpEvent<T>>, emitters: JsApiEmitters, returnType: any): Promise<T> {
 
         const abort$ = new Subject<void>();
         const {eventEmitter, apiClientEmitter} = emitters;
@@ -197,7 +197,7 @@ export class AdfHttpClient implements ee.Emitter,JsApiHttpClient {
             map((res) => {
                 if (isHttpUploadProgressEvent(res)) {
                     const percent = Math.round((res.loaded / res.total) * 100);
-                    eventEmitter.emit('progress', {loaded: res.loaded, total: res.total, percent});
+                    eventEmitter.emit('progress', {"loaded": res.loaded, "total": res.total, percent});
                 }
 
                 if (isHttpResponseEvent(res)) {
@@ -216,7 +216,7 @@ export class AdfHttpClient implements ee.Emitter,JsApiHttpClient {
                 }
 
                 eventEmitter.emit('error', err);
-                apiClientEmitter.emit('error', { ...err, response: { req: err } });
+                apiClientEmitter.emit('error', { ...err, "response": { "req": err } });
 
                 if (err.status === 401) {
                     eventEmitter.emit('unauthorized');
@@ -231,7 +231,7 @@ export class AdfHttpClient implements ee.Emitter,JsApiHttpClient {
                 // for backwards compatibility to handle cases in code where we try read response.error.response.body;
 
                 const error = {
-                    ...err, body: err.error
+                    ...err, "body": err.error
                 };
 
                 const alfrescoApiError = new AlfrescoApiResponseError(msg, err.status, error);
@@ -240,7 +240,7 @@ export class AdfHttpClient implements ee.Emitter,JsApiHttpClient {
             takeUntil(abort$)
         ).toPromise();
 
-        (promise as any).abort = function() {
+        (promise as any).abort = function () {
             eventEmitter.emit('abort');
             abort$.next();
             abort$.complete();
@@ -250,7 +250,7 @@ export class AdfHttpClient implements ee.Emitter,JsApiHttpClient {
         return this.addPromiseListeners(promise, eventEmitter);
     }
 
-    private static getBody(options: RequestOptions): any {
+    private static getBody (options: RequestOptions): any {
         const contentType = options.contentType ? options.contentType : AdfHttpClient.jsonPreferredMime(options.contentTypes);
         const isFormData = contentType === 'multipart/form-data';
         const isFormUrlEncoded = contentType === 'application/x-www-form-urlencoded';
@@ -261,19 +261,19 @@ export class AdfHttpClient implements ee.Emitter,JsApiHttpClient {
         }
 
         if (isFormUrlEncoded) {
-            return new HttpParams({fromObject: removeNilValues(options.formParams)});
+            return new HttpParams({"fromObject": removeNilValues(options.formParams)});
         }
 
         return body;
     }
 
-    private getHeaders(options: RequestOptions): HttpHeaders {
+    private getHeaders (options: RequestOptions): HttpHeaders {
         const contentType = options.contentType || AdfHttpClient.jsonPreferredMime(options.contentTypes);
         const accept = options.accept || AdfHttpClient.jsonPreferredMime(options.accepts);
 
         const optionsHeaders = {
             ...options.headerParams,
-            ...(accept && {Accept: accept}),
+            ...(accept && {"Accept": accept}),
             ...((contentType) && {'Content-Type': contentType})
         };
 
@@ -286,11 +286,10 @@ export class AdfHttpClient implements ee.Emitter,JsApiHttpClient {
 
     /**
      * Chooses a content type from the given array, with JSON preferred; i.e. return JSON if included, otherwise return the first.
-     *
      * @param contentTypes a contentType array
      * @returns  The chosen content type, preferring JSON.
      */
-    private static jsonPreferredMime(contentTypes: readonly string[]): string {
+    private static jsonPreferredMime (contentTypes: readonly string[]): string {
         if (!contentTypes?.length) {
             return 'application/json';
         }
@@ -311,16 +310,15 @@ export class AdfHttpClient implements ee.Emitter,JsApiHttpClient {
      * <li>application/json; charset=UTF8</li>
      * <li>APPLICATION/JSON</li>
      * </ul>
-     *
      * @param contentType The MIME content type to check.
      * @returns <code>true</code> if <code>contentType</code> represents JSON, otherwise <code>false</code>.
      */
-    private static isJsonMime(contentType: string): boolean {
+    private static isJsonMime (contentType: string): boolean {
         return Boolean(contentType?.match(/^application\/json(;.*)?$/i));
     }
 
 
-    private setCsrfToken(optionsHeaders: any) {
+    private setCsrfToken (optionsHeaders: any) {
         const token = this.createCSRFToken();
         optionsHeaders['X-CSRF-TOKEN'] = token;
 
@@ -331,12 +329,12 @@ export class AdfHttpClient implements ee.Emitter,JsApiHttpClient {
         }
     }
 
-    private createCSRFToken(a?: any): string {
+    private createCSRFToken (a?: any): string {
         const randomValue = window.crypto.getRandomValues(new Uint32Array(1))[0];
         return a ? (a ^ ((randomValue * 16) >> (a / 4))).toString(16) : ([1e16] + (1e16).toString()).replace(/[01]/g, this.createCSRFToken);
     }
 
-    private static getResponseType(options: RequestOptions): 'blob' | 'json' | 'text' {
+    private static getResponseType (options: RequestOptions): 'blob' | 'json' | 'text' {
 
         const isBlobType = options.returnType?.toString().toLowerCase() === 'blob' || options.responseType?.toString().toLowerCase() === 'blob';
 
@@ -353,12 +351,11 @@ export class AdfHttpClient implements ee.Emitter,JsApiHttpClient {
 
     /**
      * Deserialize an HTTP response body into a value of the specified type.
-     *
      * @param response response object
      * @param returnType return type
      * @returns deserialized object
      */
-    private static deserialize<T>(response: HttpResponse<T>, returnType?: Constructor<unknown> | 'blob'): any {
+    private static deserialize<T> (response: HttpResponse<T>, returnType?: Constructor<unknown> | 'blob'): any {
 
         if (response === null) {
             return null;
@@ -391,8 +388,8 @@ export class AdfHttpClient implements ee.Emitter,JsApiHttpClient {
     }
 
 
-    private static deserializeBlobResponse(response: HttpResponse<Blob>) {
-        return new Blob([response.body], {type: response.headers.get('Content-Type')});
+    private static deserializeBlobResponse (response: HttpResponse<Blob>) {
+        return new Blob([response.body], {"type": response.headers.get('Content-Type')});
     }
 }
 

lib/core/api/src/lib/alfresco-api/alfresco-api.param-encoder.ts

@@ -22,19 +22,19 @@ import { HttpParameterCodec } from '@angular/common/http';
 
 export class AlfrescoApiParamEncoder implements HttpParameterCodec {
 
-    encodeKey(key: string): string {
+    encodeKey (key: string): string {
         return encodeURIComponent(key);
     }
 
-    encodeValue(value: string): string {
+    encodeValue (value: string): string {
         return encodeURIComponent(value);
     }
 
-    decodeKey(key: string): string {
+    decodeKey (key: string): string {
         return decodeURIComponent(key);
     }
 
-    decodeValue(value: string): string {
+    decodeValue (value: string): string {
         return decodeURIComponent(value);
     }
 }

lib/core/api/src/lib/alfresco-api/alfresco-api.response-error.ts

@@ -19,7 +19,7 @@ export class AlfrescoApiResponseError extends Error {
 
     public name = 'AlfrescoApiResponseError';
 
-    constructor(msg: string, public status: number, public response: Record<string, any> ) {
+    constructor (msg: string, public status: number, public response: Record<string, any> ) {
         super(msg);
     }
 }

lib/core/api/src/lib/alfresco-api/alfresco-api.utils.spec.ts

@@ -24,7 +24,7 @@ describe('AlfrescoApiUtils', () => {
         /**
          * Mock function for tests
          */
-        function mockFUnction() {}
+        function mockFUnction () {}
 
         it('should return true for class and functions', () => {
             expect(isConstructor(MockClass)).toBe(true);
@@ -55,8 +55,8 @@ describe('AlfrescoApiUtils', () => {
 
         it('should return queryParams with removed undefined values', () => {
             const actual = getQueryParamsWithCustomEncoder({
-                key1: 'value1',
-                key2: undefined
+                "key1": 'value1',
+                "key2": undefined
             });
 
             expect(actual?.has('key2')).toBe(false);
@@ -64,8 +64,8 @@ describe('AlfrescoApiUtils', () => {
 
         it('should handle array values', () => {
             const actual = getQueryParamsWithCustomEncoder({
-                key1: 'value1',
-                key2: [undefined, 'value2', null, 'value3', '']
+                "key1": 'value1',
+                "key2": [undefined, 'value2', null, 'value3', '']
             });
 
             expect(actual?.get('key2')).toEqual('value2');
@@ -78,20 +78,20 @@ describe('AlfrescoApiUtils', () => {
 
         it('should return queryParams with removed undefined values', () => {
             const actual = removeNilValues({
-                key1: 'value1',
-                key2: undefined,
-                key3: null
+                "key1": 'value1',
+                "key2": undefined,
+                "key3": null
             });
 
             expect(actual).toEqual({
-                key1: 'value1'
+                "key1": 'value1'
             });
         });
 
         it('should handle array values', () => {
             const actual = getQueryParamsWithCustomEncoder({
-                key1: 'value1',
-                key2: [undefined, 'value2', null, 'value3', '']
+                "key1": 'value1',
+                "key2": [undefined, 'value2', null, 'value3', '']
             });
 
             expect(actual?.get('key2')).toEqual('value2');

lib/core/api/src/lib/alfresco-api/alfresco-api.utils.ts

@@ -57,7 +57,6 @@ export const getQueryParamsWithCustomEncoder = (obj: Record<string | number, unk
 
 /**
  * Removes null and undefined values from an object.
- *
  * @param obj object to process
  * @returns object with updated values
  */

lib/core/auth/src/authentication-interceptor/authentication.interceptor.spec.ts

@@ -22,13 +22,13 @@ import { Authentication } from '../authentication';
 import { AuthenticationInterceptor, SHOULD_ADD_AUTH_TOKEN } from './authentication.interceptor';
 
 class MockAuthentication extends Authentication {
-  addTokenToHeader(_: string, httpHeaders: HttpHeaders): Observable<HttpHeaders> {
+  addTokenToHeader (_: string, httpHeaders: HttpHeaders): Observable<HttpHeaders> {
     return of(httpHeaders);
   }
 }
 
 const mockNext: HttpHandler = {
-  handle: () => new Observable(subscriber => {
+  "handle": () => new Observable(subscriber => {
     subscriber.complete();
   })
 };
@@ -41,7 +41,7 @@ describe('AuthenticationInterceptor', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [AuthenticationInterceptor, {provide: Authentication, useClass: MockAuthentication}]
+      "providers": [AuthenticationInterceptor, {"provide": Authentication, "useClass": MockAuthentication}]
     });
     interceptor = TestBed.inject(AuthenticationInterceptor);
     addTokenToHeaderSpy = spyOn(interceptor['authService'], 'addTokenToHeader');

lib/core/auth/src/authentication-interceptor/authentication.interceptor.ts

@@ -37,16 +37,16 @@ export const SHOULD_ADD_AUTH_TOKEN = new HttpContextToken<boolean>(() => false);
 @Injectable()
 export class AuthenticationInterceptor implements HttpInterceptor {
 
-    constructor( private authService: Authentication) { }
+    constructor ( private authService: Authentication) { }
 
-    intercept(req: HttpRequest<any>, next: HttpHandler):
+    intercept (req: HttpRequest<any>, next: HttpHandler):
       Observable<HttpSentEvent | HttpHeaderResponse | HttpProgressEvent | HttpResponse<any> | HttpUserEvent<any>> {
 
       if (req.context.get(SHOULD_ADD_AUTH_TOKEN)) {
           return this.authService.addTokenToHeader(req.url, req.headers).pipe(
               mergeMap((headersWithBearer) => {
                   const headerWithContentType = this.appendJsonContentType(headersWithBearer);
-                  const kcReq = req.clone({ headers: headerWithContentType});
+                  const kcReq = req.clone({ "headers": headerWithContentType});
                   return next.handle(kcReq)
                   .pipe(
                       catchError((error) => observableThrowError(error))
@@ -58,7 +58,7 @@ export class AuthenticationInterceptor implements HttpInterceptor {
       return next.handle(req).pipe(catchError((error) => observableThrowError(error)));
     }
 
-    private appendJsonContentType(headers: HttpHeaders): HttpHeaders {
+    private appendJsonContentType (headers: HttpHeaders): HttpHeaders {
 
       // prevent adding any content type, to properly handle formData with boundary browser generated value,
       // as adding any Content-Type its going to break the upload functionality

lib/core/breadcrumbs/src/_stories/breadcrumb.stories.ts

@@ -31,21 +31,20 @@ type StoryWithoutFunction<T> = NonFunctionProperties<Story<T>>;
 
 /**
  * Copy storybook story
- *
  * @param story story
  * @param annotations annotations
  * @returns a copy of the story
  */
-function storybookCopyStory<T>( story: Story<T>, annotations?: StoryWithoutFunction<T> ): Story<T> {
+function storybookCopyStory<T> ( story: Story<T>, annotations?: StoryWithoutFunction<T> ): Story<T> {
   const cloned = story.bind({});
   return Object.assign(cloned, annotations);
 }
 
 const meta: Meta = {
-  title: 'Core/Breadcrumb',
-  decorators: [
+  "title": 'Core/Breadcrumb',
+  "decorators": [
     moduleMetadata({
-      imports: [
+      "imports": [
         CoreStoryModule,
         BreadcrumbComponent,
         BreadcrumbItemComponent,
@@ -55,28 +54,28 @@ const meta: Meta = {
       ]
     })
   ],
-  args: {
-    compact: false,
-    showBreadcrumbItemWithMenu: false
+  "args": {
+    "compact": false,
+    "showBreadcrumbItemWithMenu": false
   },
-  argTypes: {
-    compact: {control: 'boolean'},
-    showBreadcrumbItemWithMenu: {control: 'boolean'}
+  "argTypes": {
+    "compact": {"control": 'boolean'},
+    "showBreadcrumbItemWithMenu": {"control": 'boolean'}
   }
 };
 export default meta;
 
 export const breadcrumb: Story = args => ({
-  component: DemoBreadcrumbComponent,
-  props: args
+  "component": DemoBreadcrumbComponent,
+  "props": args
 });
 
 export const compact = storybookCopyStory(breadcrumb);
 compact.args = {
-  compact: true
+  "compact": true
 };
 
 export const withMenu = storybookCopyStory(breadcrumb);
 withMenu.args = {
-  showBreadcrumbItemWithMenu: true
+  "showBreadcrumbItemWithMenu": true
 };

lib/core/breadcrumbs/src/_stories/demo-breadcrumb.component.ts

@@ -18,8 +18,8 @@
 import {Component} from '@angular/core';
 
 @Component({
-  selector: 'adf-demo-breadcrumb',
-  template: `
+  "selector": 'adf-demo-breadcrumb',
+  "template": `
   <adf-breadcrumb [compact]="compact">
     <adf-breadcrumb-item>
         <a href="/">Home</a>

lib/core/breadcrumbs/src/components/breadcrumb-item/breadcrumb-item.component.ts

@@ -18,15 +18,15 @@
 import { Component, TemplateRef, ViewChild } from '@angular/core';
 
 @Component({
-    standalone: true,
-    selector: 'adf-breadcrumb-item',
-    template: `
+    "standalone": true,
+    "selector": 'adf-breadcrumb-item',
+    "template": `
         <ng-template #breadcrumbItemTemplate>
             <ng-content></ng-content>
         </ng-template>
     `
 })
 export class BreadcrumbItemComponent {
-    @ViewChild('breadcrumbItemTemplate', { static: true })
+    @ViewChild('breadcrumbItemTemplate', { "static": true })
     templateRef!: TemplateRef<any>;
 }

lib/core/breadcrumbs/src/components/breadcrumb/breadcrumb.component.ts

@@ -27,12 +27,12 @@ import { BreadcrumbFocusDirective } from '../../directives/breadcrumb-focus.dire
 import { BreadcrumbItemComponent } from '../breadcrumb-item/breadcrumb-item.component';
 
 @Component({
-    standalone: true,
-    selector: 'adf-breadcrumb',
-    templateUrl: './breadcrumb.component.html',
-    styleUrls: ['./breadcrumb.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [ CommonModule, MatIconModule, TranslateModule, MatButtonModule, MatTooltipModule ]
+    "standalone": true,
+    "selector": 'adf-breadcrumb',
+    "templateUrl": './breadcrumb.component.html',
+    "styleUrls": ['./breadcrumb.component.scss'],
+    "changeDetection": ChangeDetectionStrategy.OnPush,
+    "imports": [ CommonModule, MatIconModule, TranslateModule, MatButtonModule, MatTooltipModule ]
 })
 export class BreadcrumbComponent implements AfterContentInit, OnChanges {
     private _breadcrumbTemplateRefs: Array<TemplateRef<unknown>> = [];
@@ -51,9 +51,9 @@ export class BreadcrumbComponent implements AfterContentInit, OnChanges {
 
     selectedBreadcrumbs: Array<TemplateRef<unknown>> = [];
 
-    constructor(private cdr: ChangeDetectorRef) {}
+    constructor (private cdr: ChangeDetectorRef) {}
 
-    ngAfterContentInit() {
+    ngAfterContentInit () {
         this.breadcrumbItems.changes
             .pipe(
                 startWith(this.breadcrumbItems),
@@ -67,13 +67,13 @@ export class BreadcrumbComponent implements AfterContentInit, OnChanges {
             });
     }
 
-    ngOnChanges(changes: SimpleChanges): void {
+    ngOnChanges (changes: SimpleChanges): void {
         if (changes.compact) {
             this.setBreadcrumbs(this._breadcrumbTemplateRefs);
         }
     }
 
-    toggleCompact(compact = false) {
+    toggleCompact (compact = false) {
         this.compact = compact;
         this.setBreadcrumbs(this._breadcrumbTemplateRefs);
         this.compactChange.emit(this.compact);
@@ -82,7 +82,7 @@ export class BreadcrumbComponent implements AfterContentInit, OnChanges {
         }
     }
 
-    private setBreadcrumbs(breadcrumbs: Array<TemplateRef<unknown>>) {
+    private setBreadcrumbs (breadcrumbs: Array<TemplateRef<unknown>>) {
         this.selectedBreadcrumbs =
             this.compact && breadcrumbs.length > 2
                 ? [breadcrumbs[0], breadcrumbs[breadcrumbs.length - 1]]
@@ -90,7 +90,7 @@ export class BreadcrumbComponent implements AfterContentInit, OnChanges {
         this.cdr.detectChanges();
     }
 
-    private mapToTemplateRefs( breadcrumbItems: QueryList<BreadcrumbItemComponent> ) {
+    private mapToTemplateRefs ( breadcrumbItems: QueryList<BreadcrumbItemComponent> ) {
         return breadcrumbItems
             .toArray()
             .map((breadcrumbItem) => breadcrumbItem.templateRef);

lib/core/breadcrumbs/src/directives/breadcrumb-focus.directive.ts

@@ -19,20 +19,20 @@ import { Directive, ElementRef } from '@angular/core';
 
 /** @internal */
 @Directive({
-    standalone: true,
-    selector: '[adf-breadcrumb-focus]',
-    host: {
-        class: 'adf-breadcrumb-focus'
+    "standalone": true,
+    "selector": '[adf-breadcrumb-focus]',
+    "host": {
+        "class": 'adf-breadcrumb-focus'
     }
 })
 export class BreadcrumbFocusDirective {
-    constructor(private elementRef: ElementRef) {}
+    constructor (private elementRef: ElementRef) {}
 
-    focusOnFirstFocusableElement() {
+    focusOnFirstFocusableElement () {
         this.getFocusableElements(this.elementRef.nativeElement)[0].focus();
     }
 
-    private getFocusableElements(root: HTMLElement): HTMLElement[] {
+    private getFocusableElements (root: HTMLElement): HTMLElement[] {
         const allFocusableElements = `button, a, input, select, textarea, [tabindex]:not([tabindex="-1"])`;
         return Array.from(
             root.querySelectorAll(

lib/core/custom-theme/theme/typography.scss

@@ -3,40 +3,38 @@
 @import '../variables/font-family';
 
 @function get-mat-typography($base-font-size, $font-family) {
-    $custom-typography: mat.define-typography-config(
-        $font-family: $default-font-family,
-        $display-4: mat.define-typography-level(112px, 112px, 300),
-        $display-3: mat.define-typography-level(56px, 56px, 400),
-        $display-2: mat.define-typography-level(45px, 48px, 400),
-        $display-1: mat.define-typography-level(34px, 40px, 400),
-        $headline: mat.define-typography-level(24px, 32px, 400),
-        $title: mat.define-typography-level(20px, 32px, 500),
-        $subheading-2: mat.define-typography-level(16px, 28px, 400),
-        $subheading-1: mat.define-typography-level(15px, 24px, 400),
-        $body-2: mat.define-typography-level(14px, 24px, 500),
-        $body-1: mat.define-typography-level(14px, 20px, 400),
+    $custom-typography: mat.define-legacy-typography-configmat.define-typography-config(
+        $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif',
+        $headline-1: mat.define-typography-level(112px, 112px, 300),
+        $headline-2: mat.define-typography-level(56px, 56px, 400),
+        $headline-3: mat.define-typography-level(45px, 48px, 400),
+        $headline-4: mat.define-typography-level(34px, 40px, 400),
+        $headline-5: mat.define-typography-level(24px, 32px, 400),
+        $headline-6: mat.define-typography-level(20px, 32px, 500),
+        $subtitle-1: mat.define-typography-level(16px, 28px, 400),
+        $body-1: mat.define-typography-level(15px, 24px, 400),
+        $subtitle-2: mat.define-typography-level(14px, 24px, 500),
+        $body-2: mat.define-typography-level(14px, 20px, 400),
         $caption: mat.define-typography-level(12px, 20px, 400),
         $button: mat.define-typography-level(14px, 14px, 500),
         // Line-height must be unit-less fraction of the font-size.
-        $input: mat.define-typography-level(16px, 1.25, 400),
     );
 
     @if $base-font-size {
-        $custom-typography: mat.define-typography-config(
-            $display-4: mat.define-typography-level(8rem, 8rem, 300),
-            $display-3: mat.define-typography-level(4rem, 4rem, 400),
-            $display-2: mat.define-typography-level(3.21rem, 3.21rem, 400),
-            $display-1: mat.define-typography-level(2.42rem, 2.85rem, 400),
-            $headline: mat.define-typography-level(1.71rem, 2.28rem, 400),
-            $title: mat.define-typography-level(1.42rem, 2.28rem, 500),
-            $subheading-2: mat.define-typography-level(1.14rem, 2rem, 400),
-            $subheading-1: mat.define-typography-level(1.07rem, 1.71rem, 400),
-            $body-2: mat.define-typography-level(1rem, 1.71rem, 500),
-            $body-1: mat.define-typography-level(1rem, 1.42rem, 400),
+        $custom-typography: mat.define-legacy-typography-configmat.define-typography-config(
+            $headline-1: mat.define-typography-level(8rem, 8rem, 300),
+            $headline-2: mat.define-typography-level(4rem, 4rem, 400),
+            $headline-3: mat.define-typography-level(3.21rem, 3.21rem, 400),
+            $headline-4: mat.define-typography-level(2.42rem, 2.85rem, 400),
+            $headline-5: mat.define-typography-level(1.71rem, 2.28rem, 400),
+            $headline-6: mat.define-typography-level(1.42rem, 2.28rem, 500),
+            $subtitle-1: mat.define-typography-level(1.14rem, 2rem, 400),
+            $body-1: mat.define-typography-level(1.07rem, 1.71rem, 400),
+            $subtitle-2: mat.define-typography-level(1rem, 1.71rem, 500),
+            $body-2: mat.define-typography-level(1rem, 1.42rem, 400),
             $caption: mat.define-typography-level(0.86rem, 1.42rem, 400),
             $button: mat.define-typography-level(1rem, 1rem, 500),
             $font-family: $default-font-family,
-            $input: mat.define-typography-level(1.14em, 1.25, 400),
         );
     }
 

lib/core/project.json

@@ -0,0 +1,150 @@
+{
+  "name": "core",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "library",
+  "sourceRoot": "lib/core",
+  "prefix": "adf",
+  "targets": {
+    "build": {
+      "executor": "@angular-devkit/build-angular:ng-packagr",
+      "options": {
+        "tsConfig": "lib/core/tsconfig.lib.json",
+        "project": "lib/core/ng-package.json"
+      },
+      "dependsOn": ["^build", "license"],
+      "configurations": {
+        "production": {
+          "project": "lib/core/ng-package.json",
+          "tsConfig": "lib/core/tsconfig.lib.prod.json"
+        },
+        "development": {
+          "tsConfig": "lib/core/tsconfig.lib.json"
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "test": {
+      "executor": "@angular-devkit/build-angular:karma",
+      "options": {
+        "main": "lib/core/test.ts",
+        "tsConfig": "lib/core/tsconfig.spec.json",
+        "karmaConfig": "lib/core/karma.conf.js",
+        "sourceMap": true,
+        "codeCoverage": true,
+        "stylePreprocessorOptions": {
+          "includePaths": ["lib", "lib/core/src/lib"]
+        },
+        "styles": ["demo-shell/src/styles.scss"]
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "options": {
+        "lintFilePatterns": [
+          "lib/core/**/*.ts",
+          "lib/core/**/*.html",
+          "lib/core/api/**/*.ts",
+          "lib/core/api/**/*.html",
+          "lib/core/auth/**/*.ts",
+          "lib/core/auth/**/*.html",
+          "lib/core/shell/**/*.ts",
+          "lib/core/shell/**/*.html",
+          "lib/core/breadcrumbs/**/*.ts",
+          "lib/core/breadcrumbs/**/*.html"
+        ]
+      }
+    },
+    "storybook": {
+      "executor": "@storybook/angular:start-storybook",
+      "options": {
+        "port": 4400,
+        "browserTarget": "core:storybook",
+        "configDir": "lib/core/.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": "core:build-storybook",
+        "configDir": "lib/core/.storybook",
+        "outputDir": "dist/storybook/core",
+        "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/core/**/*.scss --config stylelint-config.json"
+          }
+        ]
+      }
+    },
+    "license": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          {
+            "command": "npx license-checker --production  --failOn 'GPL;GPL-2.0' > licenses.txt"
+          }
+        ]
+      }
+    },
+    "pretheme": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          {
+            "command": "npx webpack -- --config ./lib/config/webpack.style.js --progress --profile --bail"
+          }
+        ]
+      }
+    },
+    "npm-publish": {
+      "executor": "nx:run-commands",
+      "dependsOn": ["build"],
+      "options": {
+        "cwd": "dist/libs/core",
+        "commands": [
+          {
+            "command": "npm publish --tag {args.tag}",
+            "forwardAllArgs": true
+          }
+        ],
+        "stylePreprocessorOptions": {
+          "includePaths": ["lib", "lib/core/src/lib"]
+        }
+      }
+    }
+  }
+}

lib/core/shell/src/lib/components/shell/shell.component.spec.ts

@@ -32,9 +32,9 @@ class MockRouter {
   private url = 'some-url';
   private subject = new Subject();
   events = this.subject.asObservable();
-  routerState = { snapshot: { url: this.url } };
+  routerState = { "snapshot": { "url": this.url } };
 
-  navigateByUrl(url: string) {
+  navigateByUrl (url: string) {
     const navigationStart = new NavigationStart(0, url);
     this.subject.next(navigationStart);
   }
@@ -48,17 +48,17 @@ describe('AppLayoutComponent', () => {
 
   beforeEach(() => {
     const shellService: ShellAppService = {
-      pageHeading$: of('Title'),
-      hideSidenavConditions: [],
-      minimizeSidenavConditions: [],
-      preferencesService: {
-        get: () => 'true',
-        set: () => {}
+      "pageHeading$": of('Title'),
+      "hideSidenavConditions": [],
+      "minimizeSidenavConditions": [],
+      "preferencesService": {
+        "get": () => 'true',
+        "set": () => {}
       }
     };
 
     TestBed.configureTestingModule({
-      imports: [
+      "imports": [
         CommonModule,
         NoopAnimationsModule,
         HttpClientModule,
@@ -67,18 +67,18 @@ describe('AppLayoutComponent', () => {
         RouterModule.forChild([]),
         TranslateModule.forRoot()
       ],
-      providers: [
+      "providers": [
         {
-          provide: Router,
-          useClass: MockRouter
+          "provide": Router,
+          "useClass": MockRouter
         },
         {
-          provide: SHELL_APP_SERVICE,
-          useValue: shellService
+          "provide": SHELL_APP_SERVICE,
+          "useValue": shellService
         }
       ],
-      declarations: [ShellLayoutComponent],
-      schemas: [NO_ERRORS_SCHEMA]
+      "declarations": [ShellLayoutComponent],
+      "schemas": [NO_ERRORS_SCHEMA]
     });
 
     fixture = TestBed.createComponent(ShellLayoutComponent);
@@ -95,8 +95,8 @@ describe('AppLayoutComponent', () => {
   describe('sidenav state', () => {
     it('should get state from configuration', () => {
       appConfig.config.sideNav = {
-        expandedSidenav: false,
-        preserveState: false
+        "expandedSidenav": false,
+        "preserveState": false
       };
 
       fixture.detectChanges();
@@ -114,8 +114,8 @@ describe('AppLayoutComponent', () => {
 
     it('should get state from user settings as true', () => {
       appConfig.config.sideNav = {
-        expandedSidenav: false,
-        preserveState: true
+        "expandedSidenav": false,
+        "preserveState": true
       };
 
       spyOn(shellAppService.preferencesService, 'get').and.callFake((key) => {
@@ -132,8 +132,8 @@ describe('AppLayoutComponent', () => {
 
     it('should get state from user settings as false', () => {
       appConfig.config.sidenav = {
-        expandedSidenav: false,
-        preserveState: true
+        "expandedSidenav": false,
+        "preserveState": true
       };
 
       spyOn(shellAppService.preferencesService, 'get').and.callFake((key) => {
@@ -152,14 +152,14 @@ describe('AppLayoutComponent', () => {
   it('should close menu on mobile screen size', () => {
     component.minimizeSidenav = false;
     component.layout.container = {
-      isMobileScreenSize: true,
-      toggleMenu: () => {}
+      "isMobileScreenSize": true,
+      "toggleMenu": () => {}
     };
 
     spyOn(component.layout.container, 'toggleMenu');
     fixture.detectChanges();
 
-    component.hideMenu({ preventDefault: () => {} } as any);
+    component.hideMenu({ "preventDefault": () => {} } as any);
 
     expect(component.layout.container.toggleMenu).toHaveBeenCalled();
   });
@@ -168,14 +168,14 @@ describe('AppLayoutComponent', () => {
     fixture.detectChanges();
     component.minimizeSidenav = true;
     component.layout.container = {
-      isMobileScreenSize: true,
-      toggleMenu: () => {}
+      "isMobileScreenSize": true,
+      "toggleMenu": () => {}
     };
 
     spyOn(component.layout.container, 'toggleMenu');
     fixture.detectChanges();
 
-    component.hideMenu({ preventDefault: () => {} } as any);
+    component.hideMenu({ "preventDefault": () => {} } as any);
 
     expect(component.layout.container.toggleMenu).toHaveBeenCalled();
   });

lib/core/shell/src/lib/components/shell/shell.component.ts

@@ -25,14 +25,14 @@ import { Directionality } from '@angular/cdk/bidi';
 import { SHELL_APP_SERVICE, ShellAppService, SHELL_NAVBAR_MIN_WIDTH, SHELL_NAVBAR_MAX_WIDTH } from '../../services/shell-app.service';
 
 @Component({
-  selector: 'app-shell',
-  templateUrl: './shell.component.html',
-  styleUrls: ['./shell.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-  host: { class: 'app-shell' }
+  "selector": 'app-shell',
+  "templateUrl": './shell.component.html',
+  "styleUrls": ['./shell.component.scss'],
+  "encapsulation": ViewEncapsulation.None,
+  "host": { "class": 'app-shell' }
 })
 export class ShellLayoutComponent implements OnInit, OnDestroy {
-  @ViewChild('layout', { static: true })
+  @ViewChild('layout', { "static": true })
   layout: SidenavLayoutComponent;
 
   onDestroy$: Subject<boolean> = new Subject<boolean>();
@@ -45,7 +45,7 @@ export class ShellLayoutComponent implements OnInit, OnDestroy {
   sidenavMax: number;
   direction: Directionality;
 
-  constructor(
+  constructor (
     private router: Router,
     private appConfigService: AppConfigService,
     private breakpointObserver: BreakpointObserver,
@@ -57,7 +57,7 @@ export class ShellLayoutComponent implements OnInit, OnDestroy {
     this.sidenavMax = navbarMaxWidth ?? 320;
   }
 
-  ngOnInit() {
+  ngOnInit () {
     this.isSmallScreen$ = this.breakpointObserver.observe(['(max-width: 600px)']).pipe(map((result) => result.matches));
 
     this.hideSidenav = this.shellService.hideSidenavConditions.some((el) => this.router.routerState.snapshot.url.includes(el));
@@ -92,19 +92,19 @@ export class ShellLayoutComponent implements OnInit, OnDestroy {
       });
   }
 
-  ngOnDestroy() {
+  ngOnDestroy () {
     this.onDestroy$.next(true);
     this.onDestroy$.complete();
   }
 
-  hideMenu(event: Event) {
+  hideMenu (event: Event) {
     if (this.layout.container.isMobileScreenSize) {
       event.preventDefault();
       this.layout.container.toggleMenu();
     }
   }
 
-  private updateState() {
+  private updateState () {
     if (this.minimizeSidenav && !this.layout.isMenuMinimized) {
       this.layout.isMenuMinimized = true;
       if (!this.layout.container.isMobileScreenSize) {
@@ -120,13 +120,13 @@ export class ShellLayoutComponent implements OnInit, OnDestroy {
     }
   }
 
-  onExpanded(state: boolean) {
+  onExpanded (state: boolean) {
     if (!this.minimizeSidenav && this.appConfigService.get('sideNav.preserveState')) {
       this.shellService.preferencesService.set('expandedSidenav', state);
     }
   }
 
-  private getSidenavState(): boolean {
+  private getSidenavState (): boolean {
     const expand = this.appConfigService.get<boolean>('sideNav.expandedSidenav', true);
     const preserveState = this.appConfigService.get<boolean>('sideNav.preserveState', true);
 

lib/core/shell/src/lib/shell.module.ts

@@ -29,12 +29,12 @@ export interface AppShellRoutesConfig {
 }
 
 @NgModule({
-  imports: [SidenavLayoutModule, ExtensionsModule, RouterModule.forChild([]), CommonModule],
-  exports: [ShellLayoutComponent],
-  declarations: [ShellLayoutComponent]
+  "imports": [SidenavLayoutModule, ExtensionsModule, RouterModule.forChild([]), CommonModule],
+  "exports": [ShellLayoutComponent],
+  "declarations": [ShellLayoutComponent]
 })
 export class ShellModule {
-  static withRoutes(routes: Routes | AppShellRoutesConfig): ModuleWithProviders<ShellModule> {
+  static withRoutes (routes: Routes | AppShellRoutesConfig): ModuleWithProviders<ShellModule> {
     if (Array.isArray(routes)) {
       return getModuleForRoutes(routes);
     }
@@ -45,11 +45,10 @@ export class ShellModule {
 
 /**
  * Resolve module for routes
- *
  * @param routes route configuration
  * @returns module with providers
  */
-function getModuleForRoutes(routes: Routes): ModuleWithProviders<ShellModule> {
+function getModuleForRoutes (routes: Routes): ModuleWithProviders<ShellModule> {
   const shellLayoutRoute = SHELL_LAYOUT_ROUTE;
 
   routes.forEach((childRoute) => {
@@ -57,18 +56,17 @@ function getModuleForRoutes(routes: Routes): ModuleWithProviders<ShellModule> {
   });
 
   return {
-    ngModule: ShellModule,
-    providers: provideRoutes([shellLayoutRoute])
+    "ngModule": ShellModule,
+    "providers": provideRoutes([shellLayoutRoute])
   };
 }
 
 /**
  * Resolve a module for the route configuration
- *
  * @param config route configuration
  * @returns module with providers
  */
-function getModuleForRouteConfig(config: AppShellRoutesConfig): ModuleWithProviders<ShellModule> {
+function getModuleForRouteConfig (config: AppShellRoutesConfig): ModuleWithProviders<ShellModule> {
   const shellLayoutRoute = SHELL_LAYOUT_ROUTE;
 
   const shellParentRoute = config.shellParentRoute;
@@ -87,7 +85,7 @@ function getModuleForRouteConfig(config: AppShellRoutesConfig): ModuleWithProvid
   }
 
   return {
-    ngModule: ShellModule,
-    providers: provideRoutes([rootRoute])
+    "ngModule": ShellModule,
+    "providers": provideRoutes([rootRoute])
   };
 }

lib/core/shell/src/lib/shell.routes.ts

@@ -20,8 +20,8 @@ import { ShellLayoutComponent } from './components/shell/shell.component';
 import { SHELL_AUTH_TOKEN } from './services/shell-app.service';
 
 export const SHELL_LAYOUT_ROUTE: Route = {
-  path: '',
-  component: ShellLayoutComponent,
-  canActivate: [SHELL_AUTH_TOKEN],
-  children: []
+  "path": '',
+  "component": ShellLayoutComponent,
+  "canActivate": [SHELL_AUTH_TOKEN],
+  "children": []
 };

lib/core/src/lib/about/about-extension-list/about-extension-list.component.ts

@@ -19,22 +19,22 @@ import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input } from '@a
 import { ExtensionRef } from '@alfresco/adf-extensions';
 
 @Component({
-  selector: 'adf-about-extension-list',
-  templateUrl: './about-extension-list.component.html',
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  "selector": 'adf-about-extension-list',
+  "templateUrl": './about-extension-list.component.html',
+  "encapsulation": ViewEncapsulation.None,
+  "changeDetection": ChangeDetectionStrategy.OnPush
 })
 export class AboutExtensionListComponent {
   columns = [
     {
-      columnDef: 'name',
-      header: 'ABOUT.PLUGINS.NAME',
-      cell: (row: ExtensionRef) => `${row.$name}`
+      "columnDef": 'name',
+      "header": 'ABOUT.PLUGINS.NAME',
+      "cell": (row: ExtensionRef) => `${row.$name}`
     },
     {
-      columnDef: 'version',
-      header: 'ABOUT.PLUGINS.VERSION',
-      cell: (row: ExtensionRef) => `${row.$version}`
+      "columnDef": 'version',
+      "header": 'ABOUT.PLUGINS.VERSION',
+      "cell": (row: ExtensionRef) => `${row.$version}`
     }
   ];