Merge branch 'ADF-5567' of https://github.com/Alfresco/alfresco-ng2-components into ADF-5567

* [AAE-18459] Replace all placeholders if the configuration key is an object

* [AAE-18459] don't invalidate session if authentication is not handled by js-api

.eslintignore

@@ -0,0 +1,11 @@
+.angular
+nxcache
+node_modules
+dist
+coverage
+.github
+.vscode
+scripts
+/angular.json
+docs/**/*.md
+lib/js-api/docs/**/*.md

.eslintrc.js

@@ -78,6 +78,7 @@ module.exports = {
                         accessibility: 'explicit'
                     }
                 ],
+                '@typescript-eslint/await-thenable': 'error',
                 '@typescript-eslint/prefer-optional-chain': 'warn',
                 '@typescript-eslint/no-inferrable-types': 'off',
                 '@typescript-eslint/no-require-imports': 'off',
@@ -101,7 +102,7 @@ module.exports = {
                 ],
                 '@typescript-eslint/member-ordering': 'off',
                 'prefer-arrow/prefer-arrow-functions': 'off',
-
+                'prefer-promise-reject-errors': 'error',
                 'brace-style': 'off',
                 '@typescript-eslint/brace-style': 'error',
                 'comma-dangle': 'error',

.github/actions/artifact-append/action.yml

@@ -22,13 +22,13 @@ runs:
     - run: echo "Artifact Append"
       shell: bash
     - name: Download artifact
-      uses: actions/download-artifact@v3
+      uses: actions/download-artifact@9bc31d5ccc31df68ecc42ccf4149144866c47d8a # v3.0.2
       with:
         name: ${{ inputs.artifact-name }}
     - run: ls
       shell: bash
     - name: Append content
-      uses: actions/github-script@v6
+      uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
       env:
         contentFile: ${{ inputs.content }}
         fileName: ${{ inputs.file-name }}
@@ -83,7 +83,7 @@ runs:
             }
           }
     - name: Upload artifact
-      uses: actions/upload-artifact@v3
+      uses: actions/upload-artifact@a8a3f3ad30e3422c9c7b888a15615d19a852ae32 # v3.1.3
       with:
         name: ${{ inputs.artifact-name }}
         path: ${{ inputs.file-name }}

.github/actions/artifact-extract/action.yml

@@ -24,11 +24,11 @@ runs:
   using: "composite"
 
   steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
     - run: echo "Artifact Extract"
       shell: bash
     - name: Download artifact
-      uses: actions/download-artifact@v3
+      uses: actions/download-artifact@9bc31d5ccc31df68ecc42ccf4149144866c47d8a # v3.0.2
       with:
         name: ${{ inputs.artifact-name }}
     - id: extract

.github/actions/artifact-initialize/action.yml

@@ -19,14 +19,14 @@ runs:
   using: "composite"
 
   steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
     - name: Create empty artifact
       shell: bash
       run: 
         echo "${{inputs.content}}" > ${{ inputs.file-name }}
 
     - name: Upload artifact
-      uses: actions/upload-artifact@v3
+      uses: actions/upload-artifact@a8a3f3ad30e3422c9c7b888a15615d19a852ae32 # v3.1.3
       with:
         name: ${{ inputs.artifact-name }}
         path: ${{ inputs.file-name }}

.github/actions/before-install/action.yml

@@ -60,8 +60,9 @@ runs:
             echo "Setting up CI flags for Push develop patch"
         else
           echo "Setting up CI flags for Push on develop branch"
-          base=$(git describe --tags $(git rev-list --tags --max-count=1))
-          echo "NX_CALCULATION_FLAGS=--base=$base --head=$HEAD_HASH" >> $GITHUB_ENV
+          # base=$(git describe --tags $(git rev-list --tags --max-count=1))
+          # we publish always all the libs until we don't handle partial release
+          echo "NX_CALCULATION_FLAGS=--all" >> $GITHUB_ENV
         fi
         echo "BREAK_ACTION=true" >> $GITHUB_ENV
 

.github/actions/e2e/action.yml

@@ -153,7 +153,7 @@ runs:
         echo $PROXY_HOST_BPM
         echo "GIT_HASH=$GIT_HASH" >> $GITHUB_ENV
 
-    - name: run test 
+    - name: run test
       id: e2e_run
       if: ${{ steps.determine-affected.outputs.isAffected == 'true' }}
       env:
@@ -184,7 +184,7 @@ runs:
     - name: upload artifacts on gh
       id: upload_gh
       if: ${{ steps.determine-affected.outputs.isAffected == 'true' }}
-      uses: actions/upload-artifact@v3
+      uses: actions/upload-artifact@a8a3f3ad30e3422c9c7b888a15615d19a852ae32 # v3.1.3
       with:
         name: e2e-artifact-output
         path: /home/runner/work/alfresco-ng2-components/alfresco-ng2-components/e2e-output-*

.github/actions/npm-check-bundle/action.yml

@@ -20,9 +20,7 @@ runs:
       id: sha_out
       run: |
         if [[ -z $TAG_NPM ]]; then
-            echo "TAG_NPM not set, aborting"
-            exit 1
+          echo "TAG_NPM not set, aborting"
+          exit 1
         fi
-        ADF_VERSION=$(npm view @alfresco/adf-core@${TAG_NPM} version)
-        echo "check bundle on TAG_NPM='${TAG_NPM}' and ADF_VERSION='${ADF_VERSION}'"
-        ./scripts/github/build/npm-check-bundles.sh -v ${ADF_VERSION}
+        ./scripts/github/build/npm-check-bundles.sh

.github/actions/setup/action.yml

@@ -20,18 +20,18 @@ runs:
   using: "composite"
   steps:
       - name: install NPM
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65 # v4.0.0
         with:
           node-version-file: '.nvmrc'
           cache-dependency-path: package-lock.json
       - name: get latest tag sha
         id: tag-sha
-        uses: Alfresco/alfresco-build-tools/.github/actions/git-latest-tag@v1.29.0
+        uses: Alfresco/alfresco-build-tools/.github/actions/git-latest-tag@b88340ccab0e8f2351eb1e056235f5671cfc5aab # v5.6.0
 # CACHE
       - name: Node Modules cache
         id: node-modules-cache
         if: ${{ inputs.enable-node-modules-cache == 'true' }}
-        uses: actions/cache@v3
+        uses: actions/cache@704facf57e6136b1bc63b828d79edcd491f0ee84 # v3.3.2
         env:
           cache-name: node-modules-cache
         with:
@@ -43,7 +43,7 @@ runs:
             node_modules-${{ runner.os }}-build-
             node_modules-${{ runner.os }}-
       - name: pip cache
-        uses: actions/cache@v3
+        uses: actions/cache@704facf57e6136b1bc63b828d79edcd491f0ee84 # v3.3.2
         if: ${{ inputs.enable-cache == 'true' }}
         with:
           path: ~/.cache/pip

.github/actions/slack-group-area/action.yml

@@ -18,7 +18,7 @@ runs:
   steps:
     - name: Append group
       id: group
-      uses: actions/github-script@v6
+      uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
       env:
         affectedLib: ${{ inputs.affected }}
       with:

.github/dependabot.yml

@@ -1,31 +1,92 @@
 version: 2
 updates:
-- package-ecosystem: npm
-  directory: "/"
-  schedule:
-    interval: "weekly"
-    day: "sunday"
-    time: "07:00"
-  open-pull-requests-limit: 5
-  target-branch: develop
-  groups:
-      - label: "Angular Updates"
-        packages:
+  - package-ecosystem: npm
+    directory: "/"
+    schedule:
+      interval: "weekly"
+      day: "sunday"
+      time: "07:00"
+    open-pull-requests-limit: 5
+    target-branch: develop
+    groups:
+      angular:
+        patterns:
           - "@angular/*"
-        version: "widen"
-     - label: "Angular-devkit Updates"
-        packages:
+      angular-devkit:
+        patterns:
           - "@angular-devkit/*"
-        version: "widen"
-      - label: "ngrx Updates"
-        packages:
+      ngrx:
+        patterns:
           - "@ngrx/*"
-        version: "widen"
-      - label: "nrwl Updates"
-        packages:
+      nrwl:
+        patterns:
           - "@nrwl/*"
-        version: "widen"    
-  ignore:
-    - dependency-name: "pdfjs-dist"
-    - dependency-name: "@types/*"
-    - dependency-name: "typescript"
+    ignore:
+      - dependency-name: "pdfjs-dist"
+      - dependency-name: "@types/*"
+      - dependency-name: "typescript"
+
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "github-actions"
+    directory: "/.github/actions/artifact-append"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "github-actions"
+    directory: "/.github/actions/artifact-extract"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "github-actions"
+    directory: "/.github/actions/artifact-initialize"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "github-actions"
+    directory: "/.github/actions/before-install"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "github-actions"
+    directory: "/.github/actions/download-node-modules-and-artifacts"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "github-actions"
+    directory: "/.github/actions/e2e"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "github-actions"
+    directory: "/.github/actions/enable-dryrun"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "github-actions"
+    directory: "/.github/actions/get-latest-tag-sha"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "github-actions"
+    directory: "/.github/actions/npm-check-bundle"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "github-actions"
+    directory: "/.github/actions/print-affected-libs"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "github-actions"
+    directory: "/.github/actions/set-npm-tag"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "github-actions"
+    directory: "/.github/actions/setup"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "github-actions"
+    directory: "/.github/actions/setup-chrome"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "github-actions"
+    directory: "/.github/actions/slack-group-area"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "github-actions"
+    directory: "/.github/actions/upload-node-modules-and-artifacts"
+    schedule:
+      interval: "weekly"

.github/workflows/codeql-analysis.yml

@@ -22,7 +22,7 @@ jobs:
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v3
+      uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
       with:
         # We must fetch at least the immediate parents so that if this is
         # a pull request then we can checkout the head.
@@ -30,7 +30,7 @@ jobs:
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
+      uses: github/codeql-action/init@c0d1daa7f7e14667747d73a7dbbe8c074bc8bfe2 # v2.22.9
       # Override language selection by uncommenting this and choosing your languages
       with:
         languages: javascript
@@ -39,7 +39,7 @@ jobs:
     # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
     # If this step fails, then you should remove it and run the build manually (see below)
     - name: Autobuild
-      uses: github/codeql-action/autobuild@v2
+      uses: github/codeql-action/autobuild@c0d1daa7f7e14667747d73a7dbbe8c074bc8bfe2 # v2.22.9
 
     # ℹ️ Command-line programs to run using the OS shell.
     # 📚 https://git.io/JvXDl
@@ -53,4 +53,4 @@ jobs:
     #   make release
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
+      uses: github/codeql-action/analyze@c0d1daa7f7e14667747d73a7dbbe8c074bc8bfe2 # v2.22.9

.github/workflows/cron-e2e.yml

@@ -73,7 +73,7 @@ jobs:
     runs-on: ubuntu-latest
     name: Initialize artifacts
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
       - uses: ./.github/actions/artifact-initialize
         with:
           artifact-name: global-e2e-result

.github/workflows/git-tag.yml

@@ -96,13 +96,13 @@ jobs:
       GITHUB_TOKEN: $BOT_GITHUB_TOKEN
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
       - id: set-dryrun
         uses: ./.github/actions/enable-dryrun
         with:
           dry-run-flag: ${{ inputs.dry-run-flag }}
       - name: install NPM
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65 # v4.0.0
         with:
           node-version-file: '.nvmrc'
       - name: "Release tag"

.github/workflows/package_dispatch.yml

@@ -9,7 +9,7 @@ jobs:
     if: github.event.registry_package.package_type == 'npm' && github.event.registry_package.name == 'adf-core'
     steps:
       - name: Dispatch event to monorepo
-        uses: actions/github-script@v6
+        uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
         with:
           github-token: ${{ secrets.PAT_WRITE_PKG }}
           retries: 3

.github/workflows/pull-request.yml

@@ -94,11 +94,14 @@ env:
   PROXY_HOST_ECM: ${{ secrets.E2E_HOST }}
 
 jobs:
-  check-package-lock:
+  pre-checks:
     runs-on: ubuntu-22.04
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
+
+      - name: Ensure SHA pinned actions
+        uses: zgosalvez/github-actions-ensure-sha-pinned-actions@b1b635d24259e8a047a6ce7d6501ea432aa7a830 # v3.0.2
 
       - name: Check package-lock.json version
         run: |
@@ -113,15 +116,15 @@ jobs:
     runs-on: ubuntu-22.04
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
         with:
          fetch-depth: 0
 
       - name: Get branch name
-        uses: Alfresco/alfresco-build-tools/.github/actions/get-branch-name@v1.36.0
+        uses: Alfresco/alfresco-build-tools/.github/actions/get-branch-name@b88340ccab0e8f2351eb1e056235f5671cfc5aab # v5.6.0
 
       - name: Save commit message
-        uses: Alfresco/alfresco-build-tools/.github/actions/get-commit-message@v1.36.0
+        uses: Alfresco/alfresco-build-tools/.github/actions/get-commit-message@b88340ccab0e8f2351eb1e056235f5671cfc5aab # v5.6.0
 
       - name: ci:force flag parser
         shell: bash
@@ -136,7 +139,7 @@ jobs:
 
       - name: Get PR number
         if: ${{ github.event_name != 'schedule' }}
-        uses: kamatama41/get-pr-number-action@5c77b38a1b4974ebf8a9521a689f38a5898eadd6
+        uses: kamatama41/get-pr-number-action@0bcaab5752c0b699149e74667c8ce2f764cbb7fa # v0.9.1
         id: action
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
@@ -193,10 +196,10 @@ jobs:
     timeout-minutes: 30
     name: "Setup"
     runs-on: ubuntu-22.04
-    needs: [check-if-pr-is-approved, check-package-lock]
+    needs: [check-if-pr-is-approved, pre-checks]
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
         with:
           fetch-depth: 0 # Fetch all history for all tags and branches
       - uses: ./.github/actions/setup
@@ -218,19 +221,21 @@ jobs:
       # max-parallel: 4
       matrix:
         unit-tests:
+          - name: js-api
+            exclude: "core,insights,content-services,process-services,process-services-cloud,eslint-plugin-eslint-angular"
           - name: content-services
-            exclude: "insights,core,extensions,process-services,process-services-cloud,eslint-plugin-eslint-angular"
+            exclude: "insights,core,extensions,process-services,process-services-cloud,eslint-plugin-eslint-angular,js-api"
           - name: core
-            exclude: "insights,content-services,process-services,process-services-cloud,eslint-plugin-eslint-angular"
+            exclude: "insights,content-services,process-services,process-services-cloud,eslint-plugin-eslint-angular,js-api"
           - name: insights
-            exclude: "core,extensions,content-services,process-services-cloud,process-services,eslint-plugin-eslint-angular"
+            exclude: "core,extensions,content-services,process-services-cloud,process-services,eslint-plugin-eslint-angular,js-api"
           - name: process-services
-            exclude: "core,extensions,content-services,process-services-cloud,insights,eslint-plugin-eslint-angular"
+            exclude: "core,extensions,content-services,process-services-cloud,insights,eslint-plugin-eslint-angular,js-api"
           - name: process-cloud
-            exclude: "insights,core,extensions,content-services,process-services,eslint-plugin-eslint-angular"
+            exclude: "insights,core,extensions,content-services,process-services,eslint-plugin-eslint-angular,js-api"
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
         with:
           fetch-depth: 0 # Fetch all history for all tags and branches
       - uses: ./.github/actions/setup
@@ -247,7 +252,7 @@ jobs:
     needs: [setup]
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
         with:
           fetch-depth: 0 # Fetch all history for all tags and branches
       - uses: ./.github/actions/setup
@@ -262,7 +267,7 @@ jobs:
     needs: [setup]
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
         with:
           fetch-depth: 0 # Fetch all history for all tags and branches
       - uses: ./.github/actions/setup
@@ -279,7 +284,7 @@ jobs:
     runs-on: ubuntu-22.04
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
         with:
           fetch-depth: 0 # Fetch all history for all
       - uses: ./.github/actions/setup
@@ -392,15 +397,6 @@ jobs:
             check-cs-env: "true"
             check-ps-cloud-env: "true"
             deps: "testing"
-          - description: "Process Cloud: People"
-            test-id: "process-services-cloud"
-            folder: "process-services-cloud/people"
-            provider: "ALL"
-            auth: "OAUTH"
-            apa-proxy: true
-            check-cs-env: "true"
-            check-ps-cloud-env: "true"
-            deps: "testing"
           - description: "Process Cloud: Process"
             test-id: "process-services-cloud"
             folder: "process-services-cloud/process"
@@ -431,7 +427,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
         with:
           fetch-depth: 0 # Fetch all history for all
       - uses: ./.github/actions/setup
@@ -461,12 +457,12 @@ jobs:
     steps:
       - id: checkoutRepo
         name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
         with:
           fetch-depth: 1
       - name: PR contains forbidden labels
         id: pr-forbidden
-        uses: actions/github-script@v6
+        uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
         with:
           script: |
             const issueHasLabels = require('./scripts/github/update/check-issue-has-label.js');
@@ -486,9 +482,9 @@ jobs:
     if: ${{ always() }}
     runs-on: ubuntu-latest
     name: Final Results
-    needs: [check-if-pr-is-approved, check-package-lock, setup, unit-tests, lint, build-libs, e2e, e2e-storybook]
+    needs: [check-if-pr-is-approved, pre-checks, setup, unit-tests, lint, build-libs, e2e, e2e-storybook]
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
       - name: Log e2e result
         id: e2e-result
         if: ${{ github.event_name == 'schedule' }}
@@ -502,7 +498,7 @@ jobs:
         uses: ./.github/actions/slack-group-area
         with:
           affected: ${{ steps.e2e-result.outputs.result }}
-      - uses: slackapi/slack-github-action@v1.23.0
+      - uses: slackapi/slack-github-action@e28cf165c92ffef168d23c5c9000cffc8a25e117 # v1.24.0
         name: Nofify QA failure
         if: ${{ github.event_name == 'schedule' && contains(needs.*.result, 'failure') }}
         env:

.github/workflows/rebase.yml

@@ -9,10 +9,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - name: Checkout the latest code
-      uses: actions/checkout@v3
+      uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
       with:
         fetch-depth: 0
     - name: Automatic Rebase
-      uses: cirrus-actions/rebase@1.8
+      uses: cirrus-actions/rebase@b87d48154a87a85666003575337e27b8cd65f691 # 1.8
       env:
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release-branch.yml

@@ -87,7 +87,7 @@ jobs:
           echo "Set TAG with name: ${TAG_NPM}"
           echo "TAG_NPM=${TAG_NPM}" >> $GITHUB_ENV
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
         with:
           fetch-depth: 0
       - uses: ./.github/actions/setup
@@ -110,7 +110,7 @@ jobs:
       packages: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
         with:
           fetch-depth: 0
       - uses: ./.github/actions/setup
@@ -125,10 +125,10 @@ jobs:
       - name: build libraries
         run: |
           set -u;
-          ./scripts/update-version.sh -gnu -nextalpha|| exit 1;
+          ./scripts/update-version.sh -gnu || exit 1;
           npx nx affected:build $NX_CALCULATION_FLAGS --prod --exclude="demoshell" --skip-nx-cache
           npx nx affected $NX_CALCULATION_FLAGS --target=pretheme
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65 # v4.0.0
         name: release libraries GH registry
         with:
           node-version-file: '.nvmrc'
@@ -137,7 +137,7 @@ jobs:
       - run: npx nx affected --target=npm-publish $NX_CALCULATION_FLAGS --tag=branch|| exit 1
         env:
           NODE_AUTH_TOKEN: ${{ secrets.PAT_WRITE_PKG }}
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65 # v4.0.0
         name: release libraries Npm registry
         with:
           node-version-file: '.nvmrc'
@@ -153,5 +153,5 @@ jobs:
     runs-on: ubuntu-22.04
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
       - uses: ./.github/actions/npm-check-bundle

.github/workflows/release.yml

@@ -88,7 +88,7 @@ jobs:
     runs-on: ubuntu-22.04
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
         with:
           fetch-depth: 0
       - uses: ./.github/actions/setup
@@ -109,7 +109,7 @@ jobs:
     runs-on: ubuntu-22.04
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
         with:
           fetch-depth: 1
       - run: git fetch --all
@@ -135,7 +135,7 @@ jobs:
     runs-on: ubuntu-22.04
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
         with:
           fetch-depth: 1
       - run: git fetch --all
@@ -165,7 +165,7 @@ jobs:
       packages: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
         with:
           fetch-depth: 0
       - uses: ./.github/actions/setup
@@ -183,7 +183,7 @@ jobs:
           ./scripts/github/build/bumpversion.sh
           npx nx affected:build $NX_CALCULATION_FLAGS --prod --exclude="demoshell" --skip-nx-cache
           npx nx affected $NX_CALCULATION_FLAGS --target=pretheme
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65 # v4.0.0
         name: release libraries GH registry
         with:
           node-version-file: '.nvmrc'
@@ -192,7 +192,7 @@ jobs:
       - run: npx nx affected --target=npm-publish $NX_CALCULATION_FLAGS --tag=$TAG_NPM || exit 1
         env:
           NODE_AUTH_TOKEN: ${{ secrets.PAT_WRITE_PKG }}
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65 # v4.0.0
         name: release libraries Npm registry
         with:
           node-version-file: '.nvmrc'
@@ -209,7 +209,7 @@ jobs:
     runs-on: ubuntu-22.04
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
       - uses: ./.github/actions/npm-check-bundle
 
   finalize:
@@ -219,11 +219,11 @@ jobs:
       needs: [release-demoshell, release-storybook, release-npm, npm-check-bundle]
       steps:
 
-        - uses: slackapi/slack-github-action@v1.23.0
-          name: Nofify FE hxp-front-end-apps workflow failed
+        - uses: slackapi/slack-github-action@e28cf165c92ffef168d23c5c9000cffc8a25e117 # v1.24.0
+          name: Nofify FE eng-guild-front-end workflow failed
           if: ${{ contains(toJson(needs.*.result), 'failure') }}
           env:
             SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}
           with:
-            channel-id: 'C04N93XU491' #hxp-front-end-apps
-            slack-message: "🔴 Warning: The release workflow of alfresco-ng2-components pipe failed\n Author: name:${{ github.event.pusher.name }}\n Workflow run : <https://github.com/Alfresco/alfresco-ng2-components/actions/runs/${{ github.run_id }}| here>\n>"
+            channel-id: 'C016SMNNL8L' #eng-guild-front-end
+            slack-message: "🔴 Warning: The release workflow of alfresco-ng2-components pipe failed\n Author: name:${{ github.event.pusher.name }} username:${{ github.event.pusher.username }}\n Workflow run : <https://github.com/Alfresco/alfresco-ng2-components/actions/runs/${{ github.run_id }}| here>\n>"

.github/workflows/upstream-js.yml

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

.nvmrc

@@ -1 +1 @@
-18
+18.18.2

.vscode/launch.json

@@ -10,7 +10,7 @@
           "name": "e2e",
           "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
           "args": [
-              "`${workspaceFolder}/.vscode/closest-config-finder.sh ${file} e2e/protractor.conf.js`",
+              "./e2e/protractor.conf.js",
               "--specs=${file}"
           ],
           "envFile": "${workspaceFolder}/.env",

angular.json

@@ -29,7 +29,7 @@
             "polyfills": "demo-shell/src/polyfills.ts",
             "stylePreprocessorOptions": {
               "includePaths": [
-                "lib"
+                "lib", "lib/core/src/lib"
               ]
             },
             "assets": [
@@ -108,7 +108,6 @@
               }
             ],
             "styles": [
-              "demo-shell/src/assets/fonts/muli/muli.css",
               "demo-shell/src/styles.scss",
               "demo-shell/src/custom-style-dev.scss",
               "node_modules/cropperjs/dist/cropper.min.css",
@@ -117,8 +116,7 @@
             "scripts": [
               "node_modules/pdfjs-dist/build/pdf.js",
               "node_modules/pdfjs-dist/web/pdf_viewer.js",
-              "node_modules/raphael/raphael.min.js",
-              "node_modules/moment/min/moment.min.js"
+              "node_modules/raphael/raphael.min.js"
             ],
             "vendorChunk": true,
             "extractLicenses": false,
@@ -240,6 +238,52 @@
         }
       }
     },
+    "js-api": {
+      "projectType": "library",
+      "root": "lib/js-api/src",
+      "sourceRoot": "lib/js-api/src",
+      "architect": {
+        "build": {
+          "builder": "nx:run-commands",
+          "options": {
+            "command": "npm run js_api_build"
+          },
+          "configurations": {
+            "production": {}
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "executor": "nx:run-commands",
+          "options": {
+            "commands": ["TS_NODE_PROJECT=lib/js-api/test/tsconfig.json mocha --full-trace --config lib/js-api/.mocharc.json"]
+          }
+        },
+        "lint": {
+          "builder": "@nrwl/linter:eslint",
+          "options": {
+            "lintFilePatterns": [
+              "lib/js-api/**/*.ts"
+            ]
+          }
+        },
+        "npm-publish": {
+          "executor": "nx:run-commands",
+          "dependsOn": [
+            "build"
+          ],
+          "options": {
+            "cwd": "dist/libs/js-api",
+            "commands": [
+              {
+                "command": "npm publish --tag {args.tag}",
+                "forwardAllArgs": true
+              }
+            ]
+          }
+        }
+      }
+    },
     "core": {
       "projectType": "library",
       "root": "lib/core",
@@ -272,6 +316,11 @@
             "karmaConfig": "lib/core/karma.conf.js",
             "sourceMap": true,
             "codeCoverage": true,
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
+              ]
+            },
             "styles": [
               "demo-shell/src/styles.scss"
             ]
@@ -302,12 +351,16 @@
             "configDir": "lib/core/.storybook",
             "compodoc": false,
             "styles": [
-              "demo-shell/src/assets/fonts/muli/muli.css",
               "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": {
@@ -323,12 +376,16 @@
             "outputDir": "dist/storybook/core",
             "compodoc": false,
             "styles": [
-              "demo-shell/src/assets/fonts/muli/muli.css",
               "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": {
@@ -378,7 +435,12 @@
                 "command": "npm publish --tag {args.tag}",
                 "forwardAllArgs": true
               }
-            ]
+            ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
+              ]
+            }
           }
         }
       }
@@ -410,7 +472,12 @@
             "tsConfig": "lib/content-services/tsconfig.spec.json",
             "karmaConfig": "lib/content-services/karma.conf.js",
             "sourceMap": true,
-            "codeCoverage": true
+            "codeCoverage": true,
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
+              ]
+            }
           }
         },
         "lint": {
@@ -430,12 +497,16 @@
             "configDir": "lib/content-services/.storybook",
             "compodoc": false,
             "styles": [
-              "demo-shell/src/assets/fonts/muli/muli.css",
               "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": {
@@ -451,12 +522,16 @@
             "outputDir": "dist/storybook/content-services",
             "compodoc": false,
             "styles": [
-              "demo-shell/src/assets/fonts/muli/muli.css",
               "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": {
@@ -518,7 +593,12 @@
             "tsConfig": "lib/process-services/tsconfig.spec.json",
             "karmaConfig": "lib/process-services/karma.conf.js",
             "sourceMap": true,
-            "codeCoverage": true
+            "codeCoverage": true,
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
+              ]
+            }
           }
         },
         "lint": {
@@ -584,7 +664,12 @@
             "tsConfig": "lib/process-services-cloud/tsconfig.spec.json",
             "karmaConfig": "lib/process-services-cloud/karma.conf.js",
             "sourceMap": true,
-            "codeCoverage": true
+            "codeCoverage": true,
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
+              ]
+            }
           }
         },
         "lint": {
@@ -604,12 +689,16 @@
             "configDir": "lib/process-services-cloud/.storybook",
             "compodoc": false,
             "styles": [
-              "demo-shell/src/assets/fonts/muli/muli.css",
               "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": {
@@ -625,12 +714,16 @@
             "outputDir": "dist/storybook/process-services-cloud",
             "compodoc": false,
             "styles": [
-              "demo-shell/src/assets/fonts/muli/muli.css",
               "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": {
@@ -703,7 +796,12 @@
             "tsConfig": "lib/insights/tsconfig.spec.json",
             "karmaConfig": "lib/insights/karma.conf.js",
             "sourceMap": true,
-            "codeCoverage": true
+            "codeCoverage": true,
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
+              ]
+            }
           }
         },
         "lint": {
@@ -768,7 +866,12 @@
             "tsConfig": "lib/extensions/tsconfig.spec.json",
             "karmaConfig": "lib/extensions/karma.conf.js",
             "sourceMap": true,
-            "codeCoverage": true
+            "codeCoverage": true,
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
+              ]
+            }
           }
         },
         "lint": {
@@ -816,7 +919,12 @@
                 "entryName": "shared",
                 "entryPath": "/lib/testing/src/lib/shared/index.ts"
               }
-            ]
+            ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
+              ]
+            }
           },
           "configurations": {
             "production": {
@@ -897,7 +1005,12 @@
             "outputPath": "dist/libs/eslint-plugin-eslint-angular",
             "main": "lib/eslint-angular/index.ts",
             "generatePackageJson" : true,
-            "tsConfig": "lib/eslint-angular/tsconfig.lib.prod.json"
+            "tsConfig": "lib/eslint-angular/tsconfig.lib.prod.json",
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
+              ]
+            }
           },
           "configurations": {
             "production": {
@@ -952,11 +1065,15 @@
       "prefix": "adf",
       "architect": {
         "build": {
-          "builder": "@nrwl/workspace:run-commands",
+          "builder": "nx:run-commands",
           "options": {
-            "commands": [
-              "cd lib/cli && npm i && npm run dist"
-            ]
+            "command": "cd lib/cli && npm run dist",
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib",
+                "lib/core/src/lib"
+              ]
+            }
           },
           "configurations": {
             "production": {
@@ -1032,8 +1149,12 @@
             "browserTarget": "stories:storybook",
             "configDir": "lib/stories/.storybook",
             "compodoc": false,
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
+              ]
+            },
             "styles": [
-              "demo-shell/src/assets/fonts/muli/muli.css",
               "demo-shell/src/styles.scss",
               "demo-shell/src/custom-style-dev.scss",
               "node_modules/cropperjs/dist/cropper.min.css",
@@ -1054,12 +1175,16 @@
             "outputDir": "dist/storybook/stories",
             "compodoc": false,
             "styles": [
-              "demo-shell/src/assets/fonts/muli/muli.css",
               "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": {

cspell.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1",
+  "version": "0.2",
   "language": "en",
   "words": [
     "activiti",
@@ -141,7 +141,8 @@
     "webscript",
     "Whitespaces",
     "xdescribe",
-    "xsrf"
+    "xsrf",
+    "BPMECM"
   ],
   "dictionaries": [
     "html",

decorate-angular-cli.js

@@ -25,7 +25,7 @@ const fs = require("fs");
 const os = require("os");
 const cp = require("child_process");
 const isWindows = os.platform() === "win32";
-const { output } = require("@nrwl/workspace");
+const output = require('nx/src/utils/output').output;
 
 /**
  * Paths to files being patched

demo-shell/e2e/tsconfig.e2e.json

@@ -1,9 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/e2e",
-    "module": "commonjs",
-    "target": "es5",
-    "types": ["jasmine", "jasminewd2", "node"]
-  }
-}

demo-shell/package.json

@@ -1,7 +1,7 @@
 {
   "name": "Alfresco-ADF-Angular-Demo",
   "description": "Demo shell for Alfresco Angular components",
-  "version": "6.3.0",
+  "version": "6.5.2",
   "author": "Hyland Software, Inc. and its affiliates",
   "repository": {
     "type": "git",

demo-shell/src/app.config.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "../../lib/core/src/lib/app-config/schema.json",
+  "$schema": "../../lib/core/src/lib/app-config/app.config.schema.json",
   "ecmHost": "{protocol}//{hostname}{:port}",
   "bpmHost": "{protocol}//{hostname}{:port}",
   "identityHost": "{protocol}//{hostname}{:port}/auth/admin/realms/alfresco",
@@ -20,7 +20,8 @@
     "clientId": "alfresco",
     "scope": "openid profile email",
     "secret": "",
-    "implicitFlow": true,
+    "implicitFlow": false,
+    "codeFlow": true,
     "silentLogin": true,
     "redirectSilentIframeUri": "{protocol}//{hostname}{:port}/assets/silent-refresh.html",
     "redirectUri": "/",
@@ -309,25 +310,12 @@
           }
         }
       },
-      {
-        "id": "createdDateRange",
-        "name": "Created Date (range)",
-        "enabled": true,
-        "component": {
-          "selector": "date-range",
-          "settings": {
-            "field": "cm:created",
-            "dateFormat": "DD-MMM-YY",
-            "maxDate": "today"
-          }
-        }
-      },
       {
         "id": "createdModifiedDateRange",
         "name": "Date",
         "enabled": true,
         "component": {
-          "selector": "date-range-advanced",
+          "selector": "date-range",
           "settings": {
             "dateFormat": "dd-MMM-yy",
             "maxDate": "today",
@@ -745,15 +733,17 @@
       {
         "id": "createdDateRange",
         "name": "SEARCH.SEARCH_HEADER.FILTERS.DATE.TITLE",
-        "columnKey": "createdAt",
         "enabled": true,
         "component": {
           "selector": "date-range",
           "settings": {
             "allowUpdateOnChange": false,
+            "dateFormat": "dd-MMM-yy",
+            "maxDate": "today",
             "field": "cm:created",
-            "dateFormat": "DD-MMM-YY",
-            "maxDate": "today"
+            "displayedLabelsByField": {
+              "cm:created": "Created Date"
+            }
           }
         }
       }

demo-shell/src/app/app.component.scss

@@ -11,7 +11,3 @@ router-outlet[name='overlay'] + * {
     height: 100%;
     width: 100%;
 }
-
-[dir='rtl'] .mat-icon {
-    transform: scale(-1, 1);
-}

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

@@ -18,11 +18,11 @@
 import { Component, ViewEncapsulation, OnInit } from '@angular/core';
 import {
     AuthenticationService,
-    AlfrescoApiService,
     PageTitleService
 } from '@alfresco/adf-core';
 import { Router } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
+import { AdfHttpClient } from '@alfresco/adf-core/api';
 
 @Component({
     selector: 'app-root',
@@ -33,7 +33,7 @@ import { MatDialog } from '@angular/material/dialog';
 export class AppComponent implements OnInit {
 
     constructor(private pageTitleService: PageTitleService,
-                private alfrescoApiService: AlfrescoApiService,
+                private adfHttpClient: AdfHttpClient,
                 private authenticationService: AuthenticationService,
                 private router: Router,
                 private dialogRef: MatDialog) {
@@ -43,7 +43,7 @@ export class AppComponent implements OnInit {
     ngOnInit() {
         this.pageTitleService.setTitle('title');
 
-        this.alfrescoApiService.getInstance().on('error', (error) => {
+        this.adfHttpClient.on('error', (error) => {
             if (error.status === 401) {
                 if (!this.authenticationService.isLoggedIn()) {
                     this.dialogRef.closeAll();

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

@@ -22,20 +22,12 @@ import { NgChartsModule } from 'ng2-charts';
 import { HttpClientModule } from '@angular/common/http';
 import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { TranslateModule } from '@ngx-translate/core';
-import {
-    AppConfigService,
-    DebugAppConfigService,
-    CoreModule,
-    CoreAutomationService,
-    AuthModule,
-    provideTranslations
-} from '@alfresco/adf-core';
+import { AppConfigService, DebugAppConfigService, CoreModule, CoreAutomationService, AuthModule, provideTranslations } from '@alfresco/adf-core';
 import { ExtensionsModule } from '@alfresco/adf-extensions';
 import { AppComponent } from './app.component';
 import { MaterialModule } from './material.module';
 import { LogoutComponent } from './components/logout/logout.component';
 import { AppLayoutComponent } from './components/app-layout/app-layout.component';
-import { HomeComponent } from './components/home/home.component';
 import { SearchBarComponent } from './components/search/search-bar.component';
 import { SearchResultComponent } from './components/search/search-result.component';
 import { FormComponent } from './components/form/form.component';
@@ -46,7 +38,6 @@ import { FormNodeViewerComponent } from './components/process-service/form-node-
 import { AppsViewComponent } from './components/process-service/apps-view.component';
 import { FilesComponent } from './components/files/files.component';
 import { VersionManagerDialogAdapterComponent } from './components/files/version-manager-dialog-adapter.component';
-import { MetadataDialogAdapterComponent } from './components/files/metadata-dialog-adapter.component';
 import { appRoutes } from './app.routes';
 import { TaskAttachmentsComponent } from './components/process-service/task-attachments.component';
 import { ProcessAttachmentsComponent } from './components/process-service/process-attachments.component';
@@ -55,7 +46,6 @@ import { MonacoEditorModule } from 'ngx-monaco-editor-v2';
 import { ContentModule } from '@alfresco/adf-content-services';
 import { InsightsModule } from '@alfresco/adf-insights';
 import { ProcessModule } from '@alfresco/adf-process-services';
-import { TreeViewSampleComponent } from './components/tree-view/tree-view-sample.component';
 import { CloudLayoutComponent } from './components/cloud/cloud-layout.component';
 import { AppsCloudDemoComponent } from './components/cloud/apps-cloud-demo.component';
 import { TasksCloudDemoComponent } from './components/cloud/tasks-cloud-demo.component';
@@ -84,7 +74,7 @@ import { UserInfoComponent } from './components/app-layout/user-info/user-info.c
         environment.e2e ? NoopAnimationsModule : BrowserAnimationsModule,
         ReactiveFormsModule,
         RouterModule.forRoot(appRoutes, { useHash: true, relativeLinkResolution: 'legacy' }),
-        ...(environment.oidc ? [AuthModule.forRoot({ useHash: true })] : []),
+        AuthModule.forRoot({ useHash: true }),
         FormsModule,
         HttpClientModule,
         MaterialModule,
@@ -104,7 +94,6 @@ import { UserInfoComponent } from './components/app-layout/user-info/user-info.c
         LogoutComponent,
         AppLayoutComponent,
         UserInfoComponent,
-        HomeComponent,
         SearchBarComponent,
         SearchResultComponent,
         ProcessServiceComponent,
@@ -115,12 +104,10 @@ import { UserInfoComponent } from './components/app-layout/user-info/user-info.c
         FilesComponent,
         FormComponent,
         VersionManagerDialogAdapterComponent,
-        MetadataDialogAdapterComponent,
         TaskAttachmentsComponent,
         ProcessAttachmentsComponent,
         DemoPermissionComponent,
         DemoErrorComponent,
-        TreeViewSampleComponent,
         CloudLayoutComponent,
         AppsCloudDemoComponent,
         TasksCloudDemoComponent,

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

@@ -30,7 +30,6 @@ import { FilesComponent } from './components/files/files.component';
 import { FormComponent } from './components/form/form.component';
 import { DemoPermissionComponent } from './components/permissions/demo-permissions.component';
 import { AppComponent } from './app.component';
-import { TreeViewSampleComponent } from './components/tree-view/tree-view-sample.component';
 import { AppsCloudDemoComponent } from './components/cloud/apps-cloud-demo.component';
 import { CloudLayoutComponent } from './components/cloud/cloud-layout.component';
 import { TasksCloudDemoComponent } from './components/cloud/tasks-cloud-demo.component';
@@ -245,11 +244,6 @@ export const appRoutes: Routes = [
                 component: DemoPermissionComponent,
                 canActivate: [AuthGuardEcm]
             },
-            {
-                path: 'treeview',
-                component: TreeViewSampleComponent,
-                canActivate: [AuthGuardEcm]
-            },
             { path: 'form-cloud', component: FormCloudDemoComponent },
             { path: 'form', component: FormComponent },
             {

demo-shell/src/app/components/app-layout/app-layout.component.html

@@ -23,13 +23,13 @@
     </adf-sidenav-layout-header>
 
     <adf-sidenav-layout-navigation>
-        <ng-template let-isMenuMinimized="isMenuMinimized">
+        <ng-template>
             <mat-nav-list class="app-sidenav-linklist">
                 <ng-container *ngFor="let link of links">
                     <ng-container *ngIf="link.children">
                         <mat-list-item (click)="trigger.openMenu()" [attr.data-automation-id]="link.title | translate" class="app-sidenav-link">
                             <mat-icon matListIcon>{{link.icon}}</mat-icon>
-                            <span matLine *ngIf="!isMenuMinimized()">{{link.title | translate }}</span>
+                            <span matLine>{{ link.title | translate }}</span>
                             <mat-icon class="app-sidenav-link__expand-button" [matMenuTriggerData]="{links: link.children}"
                                 rippleTrigger mat-icon-button #trigger="matMenuTrigger"
                                 [matMenuTriggerFor]="nestedMenu">arrow_right</mat-icon>
@@ -41,14 +41,14 @@
                             routerLinkActive="app-sidenav-link--active" [routerLinkActiveOptions]="{ exact: true }"
                             [attr.data-automation-id]="link.title | translate" class="app-sidenav-link">
                             <mat-icon matListIcon >{{link.icon}}</mat-icon>
-                            <span matLine *ngIf="!isMenuMinimized()">{{link.title | translate }}</span>
+                            <span matLine>{{link.title | translate }}</span>
                         </mat-list-item>
                     </ng-container>
                 </ng-container>
 
                 <mat-list-item adf-logout [enableRedirect]="enableRedirect" redirectUri="/logout" class="app-sidenav-link" data-automation-id="Logout" >
                     <mat-icon matListIcon>exit_to_app</mat-icon>
-                    <span matLine *ngIf="!isMenuMinimized()">Logout</span>
+                    <span matLine>Logout</span>
                 </mat-list-item>
             </mat-nav-list>
 

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

@@ -1,7 +1,3 @@
-adf-file-uploading-dialog {
-    z-index: 1100;
-}
-
 .app-layout {
     display: flex;
     flex: 1;
@@ -12,25 +8,7 @@ adf-file-uploading-dialog {
         color: var(--theme-primary-color);
     }
 
-    .app-sidenav-link {
-        .mat-list-text {
-            font-size: 14px;
-            white-space: nowrap;
-            min-width: 120px;
-            padding: 0 10px;
-        }
-    }
-
     &-menu-spacer {
         flex: 1 1 auto;
     }
 }
-
-mat-sidenav-content > div {
-    display: flex;
-    height: 100%;
-
-    > div {
-        flex: auto;
-    }
-}

demo-shell/src/app/components/app-layout/app-layout.component.ts

@@ -42,8 +42,7 @@ export class AppLayoutComponent {
             { href: '/form', icon: 'poll', title: 'Form' }
         ]},
         { href: '/login', icon: 'vpn_key', title: 'Login' },
-        { href: '/settings-layout', icon: 'settings', title: 'Settings' },
-        { href: '/treeview', icon: 'nature', title: 'Tree View' }
+        { href: '/settings-layout', icon: 'settings', title: 'Settings' }
     ];
 
     enableRedirect = true;

demo-shell/src/app/components/app-layout/user-info/user-info.component.ts

@@ -17,7 +17,13 @@
 
 import { EcmUserModel, PeopleContentService } from '@alfresco/adf-content-services';
 import { BpmUserModel, PeopleProcessService } from '@alfresco/adf-process-services';
-import { AuthenticationService, IdentityUserModel, IdentityUserService, UserInfoMode } from '@alfresco/adf-core';
+import {
+    AuthenticationService,
+    BasicAlfrescoAuthService,
+    IdentityUserModel,
+    IdentityUserService,
+    UserInfoMode
+} from '@alfresco/adf-core';
 import { Component, OnInit, Input } from '@angular/core';
 import { MenuPositionX, MenuPositionY } from '@angular/material/menu';
 import { Observable, of } from 'rxjs';
@@ -46,6 +52,7 @@ export class UserInfoComponent implements OnInit {
     constructor(private peopleContentService: PeopleContentService,
                 private peopleProcessService: PeopleProcessService,
                 private identityUserService: IdentityUserService,
+                private basicAlfrescoAuthService: BasicAlfrescoAuthService,
                 private authService: AuthenticationService) {
     }
 
@@ -77,7 +84,7 @@ export class UserInfoComponent implements OnInit {
     }
 
     get isLoggedIn(): boolean {
-        if (this.authService.isKerberosEnabled()) {
+        if (this.basicAlfrescoAuthService.isKerberosEnabled()) {
             return true;
         }
         return this.authService.isLoggedIn();
@@ -96,15 +103,15 @@ export class UserInfoComponent implements OnInit {
     }
 
     private isAllLoggedIn() {
-        return (this.authService.isEcmLoggedIn() && this.authService.isBpmLoggedIn()) || (this.authService.isALLProvider() && this.authService.isKerberosEnabled());
+        return (this.authService.isEcmLoggedIn() && this.authService.isBpmLoggedIn()) || (this.authService.isALLProvider() && this.basicAlfrescoAuthService.isKerberosEnabled());
     }
 
     private isBpmLoggedIn() {
-        return this.authService.isBpmLoggedIn() || (this.authService.isECMProvider() && this.authService.isKerberosEnabled());
+        return this.authService.isBpmLoggedIn() || (this.authService.isECMProvider() && this.basicAlfrescoAuthService.isKerberosEnabled());
     }
 
     private isEcmLoggedIn() {
-        return this.authService.isEcmLoggedIn() || (this.authService.isECMProvider() && this.authService.isKerberosEnabled());
+        return this.authService.isEcmLoggedIn() || (this.authService.isECMProvider() && this.basicAlfrescoAuthService.isKerberosEnabled());
     }
 }
 

demo-shell/src/app/components/card-view/card-view.component.html

@@ -1,17 +1,15 @@
 <div class="app-main-content">
     <h1>CardView Component</h1>
 
-    <mat-card class="app-card-view">
-        <adf-card-view
-            [properties]="properties"
-            [editable]="isEditable"
-            [displayClearAction]="showClearDateAction"
-            [displayNoneOption]="showNoneOption"
-            [displayLabelForChips]="showLabelForChips">
-        </adf-card-view>
-    </mat-card>
+    <adf-card-view
+        [properties]="properties"
+        [editable]="isEditable"
+        [displayClearAction]="showClearDateAction"
+        [displayNoneOption]="showNoneOption"
+        [displayLabelForChips]="showLabelForChips">
+    </adf-card-view>
 
-    <div class="app-console" #console>
+    <div class="app-console">
         <h3>Changes log:</h3>
         <p *ngFor="let log of logs">{{ log }}</p>
     </div>

demo-shell/src/app/components/card-view/card-view.component.scss

@@ -2,7 +2,7 @@
     padding: 0 15px;
 }
 
-.app-card-view {
+adf-card-view {
     width: 30%;
     display: inline-block;
 }

demo-shell/src/app/components/card-view/card-view.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, ElementRef, ViewChild, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import {
     CardViewTextItemModel,
     CardViewDateItemModel,
@@ -39,9 +39,6 @@ import { takeUntil } from 'rxjs/operators';
     styleUrls: ['./card-view.component.scss']
 })
 export class CardViewComponent implements OnInit, OnDestroy {
-
-    @ViewChild('console', { static: true }) console: ElementRef;
-
     isEditable = true;
     properties: any;
     logs: string[];
@@ -51,8 +48,7 @@ export class CardViewComponent implements OnInit, OnDestroy {
 
     private onDestroy$ = new Subject<boolean>();
 
-    constructor(private cardViewUpdateService: CardViewUpdateService,
-                private decimalNumberPipe: DecimalNumberPipe) {
+    constructor(private cardViewUpdateService: CardViewUpdateService, private decimalNumberPipe: DecimalNumberPipe) {
         this.logs = [];
         this.createCard();
     }
@@ -62,9 +58,7 @@ export class CardViewComponent implements OnInit, OnDestroy {
     }
 
     ngOnInit() {
-        this.cardViewUpdateService.itemUpdated$
-            .pipe(takeUntil(this.onDestroy$))
-            .subscribe(this.onItemChange.bind(this));
+        this.cardViewUpdateService.itemUpdated$.pipe(takeUntil(this.onDestroy$)).subscribe(this.onItemChange.bind(this));
     }
 
     ngOnDestroy() {
@@ -192,20 +186,29 @@ export class CardViewComponent implements OnInit, OnDestroy {
             }),
             new CardViewKeyValuePairsItemModel({
                 label: 'CardView Key-Value Pairs Item',
-                value: [{ name: 'hey', value: 'you' }, { name: 'hey', value: 'you' }],
+                value: [
+                    { name: 'hey', value: 'you' },
+                    { name: 'hey', value: 'you' }
+                ],
                 key: 'key-value-pairs',
                 editable: this.isEditable
             }),
             new CardViewKeyValuePairsItemModel({
                 label: 'CardView Key-Value Pairs Item',
-                value: [{ name: 'hey', value: 'you' }, { name: 'hey', value: 'you' }],
+                value: [
+                    { name: 'hey', value: 'you' },
+                    { name: 'hey', value: 'you' }
+                ],
                 key: 'key-value-pairs',
                 editable: false
             }),
             new CardViewSelectItemModel({
                 label: 'CardView Select Item',
                 value: 'one',
-                options$: of([{ key: 'one', label: 'One' }, { key: 'two', label: 'Two' }]),
+                options$: of([
+                    { key: 'one', label: 'One' },
+                    { key: 'two', label: 'Two' }
+                ]),
                 key: 'select',
                 editable: this.isEditable
             }),
@@ -253,7 +256,6 @@ export class CardViewComponent implements OnInit, OnDestroy {
         }
 
         this.logs.push(`[${notification.target.label}] - ${value}`);
-        this.console.nativeElement.scrollTop = this.console.nativeElement.scrollHeight;
     }
 
     toggleEditable() {

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

@@ -16,7 +16,8 @@
 <mat-slide-toggle [checked]="processDetailsRedirection" (change)="toggleProcessDetailsRedirection()" data-automation-id="processDetailsRedirection">
     Display process details on process click
 </mat-slide-toggle>
-<mat-form-field data-automation-id="selectionMode">
+
+<mat-form-field data-automation-id="selectionMode" class="adf-cloud-settings-selection-mode">
     <mat-label>Selection Mode</mat-label>
     <mat-select [(ngModel)]="selectionMode" (selectionChange)="onSelectionModeChange()">
         <mat-option *ngFor="let option of selectionModeOptions" [value]="option.value">
@@ -24,32 +25,29 @@
         </mat-option>
     </mat-select>
 </mat-form-field>
-<mat-card *ngIf="actionMenu || contextMenu">
-    <mat-card-header>
-      <mat-card-title>Add Action</mat-card-title>
-    </mat-card-header>
-    <mat-card-content>
-        <form class="app-cloud-settings-form" [formGroup]="actionMenuForm">
-            <mat-form-field>
-                <input matInput formControlName="key" placeholder="Key">
-            </mat-form-field>
-            <mat-form-field>
-                <input matInput formControlName="title" placeholder="Title">
-            </mat-form-field>
-            <mat-form-field>
-                <input matInput formControlName="icon" placeholder="Icon">
-            </mat-form-field>
-            <mat-checkbox formControlName="visible">Visible</mat-checkbox>
-            <mat-checkbox formControlName="disabled">Disable</mat-checkbox>
-            <button mat-raised-button (click)="addAction()">Add</button>
-        </form>
-        <div *ngIf="actions.length > 0">
-            <mat-chip-list>
-                <mat-chip *ngFor="let action of actions" [removable]="true">
-                    {{action.title}}
-                    <mat-icon matChipRemove (click)="removeAction(action)">cancel</mat-icon>
-                </mat-chip>
-            </mat-chip-list>
-        </div>
-    </mat-card-content>
-</mat-card>
+
+<div class="app-cloud-actions" *ngIf="actionMenu || contextMenu">
+    <h2>Add Action</h2>
+    <form class="app-cloud-settings-form" [formGroup]="actionMenuForm">
+        <mat-form-field class="app-cloud-settings-form-input">
+            <input matInput formControlName="key" placeholder="Key">
+        </mat-form-field>
+        <mat-form-field class="app-cloud-settings-form-input">
+            <input matInput formControlName="title" placeholder="Title">
+        </mat-form-field>
+        <mat-form-field class="app-cloud-settings-form-input">
+            <input matInput formControlName="icon" placeholder="Icon">
+        </mat-form-field>
+        <mat-checkbox formControlName="visible">Visible</mat-checkbox>
+        <mat-checkbox formControlName="disabled">Disable</mat-checkbox>
+        <button mat-raised-button (click)="addAction()">Add</button>
+    </form>
+    <div *ngIf="actions.length > 0">
+        <mat-chip-list>
+            <mat-chip *ngFor="let action of actions" [removable]="true">
+                {{action.title}}
+                <mat-icon matChipRemove (click)="removeAction(action)">cancel</mat-icon>
+            </mat-chip>
+        </mat-chip-list>
+    </div>
+</div>

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

@@ -4,7 +4,11 @@ app-cloud-settings {
     display: flex;
     flex: 1;
 
-    mat-form-field {
+    .app-cloud-actions {
+        background-color: white;
+    }
+
+    .adf-cloud-settings-selection-mode {
         max-width: 200px;
     }
 
@@ -13,13 +17,9 @@ app-cloud-settings {
         place-content: center space-around;
         align-items: center;
 
-        mat-form-field {
+        .app-cloud-settings-form-input {
             flex: 1 1 100%;
             max-width: 23%;
         }
-
-        mat-form-field, mat-checkbox {
-            margin-right: 20px;
-        }
     }
 }

demo-shell/src/app/components/file-view/file-view.component.html

@@ -1,71 +1,24 @@
 <ng-container *ngIf="nodeId">
-
     <adf-alfresco-viewer
         (showViewerChange)="onViewerClosed()"
         [nodeId]="nodeId"
         [versionId]="versionId"
-        [showRightSidebar]="showRightSidebar"
-        [showLeftSidebar]="showLeftSidebar"
-        [allowGoBack]="allowGoBack"
-        [showToolbar]="showToolbar"
-        [allowPrint]="allowPrint"
-        [allowDownload]="allowDownload"
-        [allowRightSidebar]="allowRightSidebar"
-        [allowLeftSidebar]="allowLeftSidebar"
-        [sidebarLeftTemplate]="sidebarLeftTemplate"
+        [showToolbar]="true"
+        [allowRightSidebar]="true"
         [sidebarRightTemplate]="sidebarRightTemplate">
-
-        <adf-viewer-toolbar *ngIf="customToolbar" data-automation-id="adf-viewer-custom-toolbar">
-            <h1>My custom toolbar</h1>
-        </adf-viewer-toolbar>
-
-        <adf-viewer-toolbar-actions *ngIf="moreActions">
-            <button mat-icon-button id="adf-viewer-time">
-                <mat-icon>alarm</mat-icon>
-            </button>
-            <button mat-icon-button id="adf-viewer-upload">
-                <mat-icon>backup</mat-icon>
-            </button>
-            <button mat-icon-button id="adf-viewer-bug">
-                <mat-icon>bug_report</mat-icon>
-            </button>
-        </adf-viewer-toolbar-actions>
-
-        <adf-viewer-more-actions *ngIf="moreActionsMenu">
-            <button mat-menu-item id="adf-viewer-more-menu-alarm">
-                <mat-icon>alarm</mat-icon>
-                <span>Alarm</span>
-            </button>
-            <button mat-menu-item id="adf-viewer-more-menu-backup">
-                <mat-icon>backup</mat-icon>
-                <span>Backup</span>
-            </button>
-            <button mat-menu-item id="adf-viewer-more-menu-bug">
-                <mat-icon>bug_report</mat-icon>
-                <span>Bug report</span>
-            </button>
-        </adf-viewer-more-actions>
-
-        <ng-container *ngIf="openWith">
-            <adf-viewer-open-with>
-                <button mat-menu-item>
-                    <mat-icon>dialpad</mat-icon>
-                    <span>Option 1</span>
-                </button>
-                <button mat-menu-item disabled>
-                    <mat-icon>voicemail</mat-icon>
-                    <span>Option 2</span>
-                </button>
-                <button mat-menu-item>
-                    <mat-icon>notifications_off</mat-icon>
-                    <span>Option 3</span>
-                </button>
-            </adf-viewer-open-with>
-        </ng-container>
     </adf-alfresco-viewer>
-
 </ng-container>
 
+<ng-container *ngIf="blobFile">
+    <adf-viewer
+        [blobFile]="blobFile"
+        [fileName]="fileName"
+        [showToolbar]="true"
+        [allowRightSidebar]="true"
+        (showViewerChange)="onViewerClosed()"
+        [sidebarRightTemplate]="sidebarRightTemplate">
+    </adf-viewer>
+</ng-container>
 
 <ng-template let-node="node" #sidebarRightTemplate>
     <adf-info-drawer title="Details">
@@ -157,242 +110,10 @@
         </adf-info-drawer-tab>
 
         <adf-info-drawer-tab label="Versions">
-            <mat-card>
-                <mat-card-content>
-                    <adf-version-manager [node]="node"
-                                         (uploadError)="onUploadError($event)"
-                                         (viewVersion)="onViewVersion($event)">
-                    </adf-version-manager>
-                </mat-card-content>
-            </mat-card>
+            <adf-version-manager [node]="node"
+                                 (uploadError)="onUploadError($event)"
+                                 (viewVersion)="onViewVersion($event)">
+            </adf-version-manager>
         </adf-info-drawer-tab>
     </adf-info-drawer>
 </ng-template>
-
-<ng-template #sidebarLeftTemplate>
-    <adf-info-drawer [title]="'Viewer Options'">
-
-        <adf-info-drawer-tab label="Settings">
-
-            <p class="toggle">
-                <mat-slide-toggle
-                    id="adf-switch-fileurl"
-                    (change)="toggleFileUrl()"
-                    [checked]="fileUrlSwitch">
-                    Url File
-                </mat-slide-toggle>
-            </p>
-
-            <p class="toggle">
-                <ng-container *ngIf="fileUrlSwitch">
-                    <mat-form-field floatPlaceholder="float">
-                        <input matInput
-                               placeholder="Url File"
-                               [(ngModel)]="urlFile"
-                               data-automation-id="adf-text-file-url">
-                    </mat-form-field>
-                </ng-container>
-            </p>
-
-            <p class="toggle">
-                <mat-slide-toggle
-                    id="adf-switch-toolbar"
-                    (change)="toggleShowToolbar()"
-                    [checked]="showToolbar">
-                    Show Toolbar
-                </mat-slide-toggle>
-            </p>
-
-            <p class="toggle">
-                <mat-slide-toggle
-                    id="adf-switch-goback"
-                    (change)="toggleAllowGoBack()"
-                    [checked]="allowGoBack">
-                    Allow GoBack
-                </mat-slide-toggle>
-            </p>
-
-            <p class="toggle">
-                <mat-slide-toggle
-                    id="adf-switch-openwith"
-                    (change)="toggleOpenWith()"
-                    [checked]="openWith">
-                    Open With
-                </mat-slide-toggle>
-            </p>
-
-            <p class="toggle">
-                <mat-slide-toggle
-                    id="adf-switch-moreactions"
-                    (change)="toggleOpenMoreActions()"
-                    [checked]="moreActions">
-                    More Actions
-                </mat-slide-toggle>
-            </p>
-
-            <p class="toggle">
-                <mat-slide-toggle
-                    id="adf-switch-moreactionsmenu"
-                    (change)="toggleMoreActionsMenu()"
-                    [checked]="moreActionsMenu">
-                    More Actions Menu
-                </mat-slide-toggle>
-            </p>
-
-            <p class="toggle">
-                <mat-slide-toggle
-                    id="adf-switch-download"
-                    (change)="toggleAllowDownload()"
-                    [checked]="allowDownload">
-                    Allow Download
-                </mat-slide-toggle>
-            </p>
-
-            <p class="toggle">
-                <mat-slide-toggle
-                    id="adf-switch-print"
-                    (change)="toggleAllowPrint()"
-                    [checked]="allowPrint">
-                    Allow Print
-                </mat-slide-toggle>
-            </p>
-
-            <p class="toggle">
-                <mat-slide-toggle
-                    id="adf-switch-allowsidebar"
-                    (change)="toggleAllowRightSidebar()"
-                    [checked]="allowRightSidebar">
-                    Allow Right Sidebar
-                </mat-slide-toggle>
-            </p>
-
-            <p class="toggle">
-                <mat-slide-toggle
-                    id="adf-switch-allowLeftSidebar"
-                    (change)="toggleAllowLeftSidebar()"
-                    [checked]="allowLeftSidebar">
-                    Allow Left Sidebar
-                </mat-slide-toggle>
-            </p>
-
-            <p class="toggle">
-                <mat-slide-toggle
-                    id="adf-toggle-custom-toolbar"
-                    (change)="toggleToolbar()"
-                    [checked]="customToolbar">
-                    Custom Toolbar
-                </mat-slide-toggle>
-            </p>
-
-            <p class="toggle">
-                <mat-slide-toggle
-                    id="adf-tab-with-icon"
-                    (change)="toggleShowTabWithIcon()"
-                    [checked]="showTabWithIcon">
-                    Show tab with icon
-                </mat-slide-toggle>
-            </p>
-
-            <p class="toggle">
-                <mat-slide-toggle
-                    id="adf-icon-and-label-tab"
-                    (change)="toggleShowTabWithIconAndLabel()"
-                    [checked]="showTabWithIconAndLabel">
-                    Show tab with icon and label
-                </mat-slide-toggle>
-            </p>
-
-            <p class="toggle">
-                <button mat-raised-button id="adf-switch-showrightsidebar" (click)="toggleShowRightSidebar()">
-                    Toggle Right Sidebar
-                </button>
-            </p>
-
-            <p class="toggle">
-                <button mat-raised-button id="adf-switch-showleftsidebar" (click)="hideLeftSidebar()">
-                    Hide Left Sidebar
-                </button>
-            </p>
-
-        </adf-info-drawer-tab>
-
-        <adf-info-drawer-tab
-            *ngIf="showTabWithIcon"
-            [label]=""
-            [icon]="'face'"
-            data-automation-id="adf-settings-tab">
-        </adf-info-drawer-tab>
-
-        <adf-info-drawer-tab
-            *ngIf="showTabWithIconAndLabel"
-            [label]="'Comments'"
-            [icon]="'comment'"
-            data-automation-id="adf-settings-tab">
-        </adf-info-drawer-tab>
-    </adf-info-drawer>
-</ng-template>
-
-<ng-container *ngIf="blobFile">
-    <adf-viewer
-        [blobFile]="blobFile"
-        [fileName]="fileName"
-        [showRightSidebar]="showRightSidebar"
-        [showLeftSidebar]="showLeftSidebar"
-        [allowGoBack]="allowGoBack"
-        [showToolbar]="showToolbar"
-        [allowRightSidebar]="allowRightSidebar"
-        [allowLeftSidebar]="allowLeftSidebar"
-        (showViewerChange)="onViewerClosed()"
-        [sidebarLeftTemplate]="sidebarLeftTemplate"
-        [sidebarRightTemplate]="sidebarRightTemplate">
-
-        <adf-viewer-toolbar *ngIf="customToolbar" data-automation-id="adf-viewer-custom-toolbar">
-            <h1>My custom toolbar</h1>
-        </adf-viewer-toolbar>
-
-        <adf-viewer-toolbar-actions *ngIf="moreActions">
-            <button mat-icon-button id="adf-viewer-time">
-                <mat-icon>alarm</mat-icon>
-            </button>
-            <button mat-icon-button id="adf-viewer-upload">
-                <mat-icon>backup</mat-icon>
-            </button>
-            <button mat-icon-button id="adf-viewer-bug">
-                <mat-icon>bug_report</mat-icon>
-            </button>
-        </adf-viewer-toolbar-actions>
-
-        <adf-viewer-more-actions *ngIf="moreActionsMenu">
-            <button mat-menu-item id="adf-viewer-more-menu-alarm">
-                <mat-icon>alarm</mat-icon>
-                <span>Alarm</span>
-            </button>
-            <button mat-menu-item id="adf-viewer-more-menu-backup">
-                <mat-icon>backup</mat-icon>
-                <span>Backup</span>
-            </button>
-            <button mat-menu-item id="adf-viewer-more-menu-bug">
-                <mat-icon>bug_report</mat-icon>
-                <span>Bug report</span>
-            </button>
-        </adf-viewer-more-actions>
-
-        <ng-container *ngIf="openWith">
-            <adf-viewer-open-with>
-                <button mat-menu-item>
-                    <mat-icon>dialpad</mat-icon>
-                    <span>Option 1</span>
-                </button>
-                <button mat-menu-item disabled>
-                    <mat-icon>voicemail</mat-icon>
-                    <span>Option 2</span>
-                </button>
-                <button mat-menu-item>
-                    <mat-icon>notifications_off</mat-icon>
-                    <span>Option 3</span>
-                </button>
-            </adf-viewer-open-with>
-        </ng-container>
-
-    </adf-viewer>
-</ng-container>

demo-shell/src/app/components/file-view/file-view.component.scss

@@ -1,12 +0,0 @@
-.app-viewer__sidebar {
-    width: 380px !important;
-}
-
-/* stylelint-disable */
-.monaco-scrollable-element {
-    width: 600px;
-}
-
-app-preview-extension {
-    width: 600px;
-}

demo-shell/src/app/components/file-view/file-view.component.ts

@@ -17,26 +17,16 @@
 
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, Router, PRIMARY_OUTLET } from '@angular/router';
-import {
-    NotificationService
-} from '@alfresco/adf-core';
-import {
-    ContentService,
-    AllowableOperationsEnum,
-    PermissionsEnum,
-    NodesApiService,
-    FileUploadErrorEvent
-} from '@alfresco/adf-content-services';
+import { NotificationService } from '@alfresco/adf-core';
+import { ContentService, AllowableOperationsEnum, PermissionsEnum, NodesApiService, FileUploadErrorEvent } from '@alfresco/adf-content-services';
 import { PreviewService } from '../../services/preview.service';
 
 @Component({
     selector: 'app-file-view',
     templateUrl: './file-view.component.html',
-    styleUrls: ['./file-view.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
 export class FileViewComponent implements OnInit {
-
     nodeId: string = null;
     versionId: string = null;
     displayEmptyMetadata = false;
@@ -46,36 +36,21 @@ export class FileViewComponent implements OnInit {
     isPreset = false;
     customPreset: string = null;
     displayDefaultProperties = true;
-    showToolbar = true;
-    urlFile = null;
-    allowGoBack = true;
-    openWith = false;
-    allowDownload = true;
-    allowPrint = true;
-    allowRightSidebar = true;
-    allowLeftSidebar = true;
-    moreActions = true;
-    moreActionsMenu = false;
-    fileUrlSwitch = false;
-    showLeftSidebar = null;
-    showRightSidebar = false;
-    customToolbar = false;
     isCommentEnabled = false;
-    showTabWithIcon = false;
-    showTabWithIconAndLabel = false;
     desiredAspect: string = null;
     showAspect: string = null;
     name: string;
     fileName: string;
     blobFile: Blob;
 
-    constructor(private router: Router,
-                private route: ActivatedRoute,
-                private nodeApiService: NodesApiService,
-                private contentServices: ContentService,
-                private preview: PreviewService,
-                private notificationService: NotificationService) {
-    }
+    constructor(
+        private router: Router,
+        private route: ActivatedRoute,
+        private nodeApiService: NodesApiService,
+        private contentServices: ContentService,
+        private preview: PreviewService,
+        private notificationService: NotificationService
+    ) {}
 
     ngOnInit() {
         this.route.params.subscribe((params) => {
@@ -85,7 +60,8 @@ export class FileViewComponent implements OnInit {
                 this.nodeApiService.getNode(id).subscribe(
                     (node) => {
                         if (node?.isFile) {
-                            this.isCommentEnabled = this.contentServices.hasPermissions(node, PermissionsEnum.NOT_CONSUMER) ||
+                            this.isCommentEnabled =
+                                this.contentServices.hasPermissions(node, PermissionsEnum.NOT_CONSUMER) ||
                                 this.contentServices.hasAllowableOperations(node, AllowableOperationsEnum.UPDATE);
                             this.nodeId = id;
                             return;
@@ -131,66 +107,6 @@ export class FileViewComponent implements OnInit {
         this.displayDefaultProperties = !this.displayDefaultProperties;
     }
 
-    toggleShowToolbar() {
-        this.showToolbar = !this.showToolbar;
-    }
-
-    toggleAllowGoBack() {
-        this.allowGoBack = !this.allowGoBack;
-    }
-
-    toggleOpenWith() {
-        this.openWith = !this.openWith;
-    }
-
-    toggleAllowDownload() {
-        this.allowDownload = !this.allowDownload;
-    }
-
-    toggleAllowPrint() {
-        this.allowPrint = !this.allowPrint;
-    }
-
-    toggleOpenMoreActions() {
-        this.moreActions = !this.moreActions;
-    }
-
-    toggleMoreActionsMenu() {
-        this.moreActionsMenu = !this.moreActionsMenu;
-    }
-
-    toggleShowRightSidebar() {
-        this.showRightSidebar = !this.showRightSidebar;
-    }
-
-    hideLeftSidebar() {
-        this.showLeftSidebar = false;
-    }
-
-    toggleAllowRightSidebar() {
-        this.allowRightSidebar = !this.allowRightSidebar;
-    }
-
-    toggleAllowLeftSidebar() {
-        this.allowLeftSidebar = !this.allowLeftSidebar;
-    }
-
-    toggleShowTabWithIcon() {
-        this.showTabWithIcon = !this.showTabWithIcon;
-    }
-
-    toggleShowTabWithIconAndLabel() {
-        this.showTabWithIconAndLabel = !this.showTabWithIconAndLabel;
-    }
-
-    toggleFileUrl() {
-        this.fileUrlSwitch = !this.fileUrlSwitch;
-
-        if (!this.fileUrlSwitch) {
-            this.urlFile = null;
-        }
-    }
-
     togglePreset() {
         this.isPreset = !this.isPreset;
         if (!this.isPreset) {
@@ -198,10 +114,6 @@ export class FileViewComponent implements OnInit {
         }
     }
 
-    toggleToolbar() {
-        this.customToolbar = !this.customToolbar;
-    }
-
     applyCustomPreset() {
         this.isPreset = false;
         setTimeout(() => {

demo-shell/src/app/components/files/files.component.html

@@ -1,9 +1,4 @@
 <div class="app-container">
-    <div *ngIf="showSitePicker" class="app-site-container-style" id="site-container">
-        <adf-sites-dropdown (change)="onSiteChange($event)" [hideMyFiles]="false" [relations]="'members'">
-        </adf-sites-dropdown>
-    </div>
-
     <div
         id="document-list-container"
         class="app-document-list-container">
@@ -14,7 +9,6 @@
                               [versioning]="versioning"
                               [adf-check-allowable-operation]="'create'"
                               [adf-nodes]="disableDragArea ? getCurrentDocumentListNode() : []"
-                              (beginUpload)="onBeginUpload($event)"
                               (updateFileVersion)="onUploadNewVersion($event)">
             <div *ngIf="errorMessage" class="app-error-message">
                 <button (click)="resetError()" mat-icon-button>
@@ -30,16 +24,7 @@
                     </adf-dropdown-breadcrumb>
                 </adf-toolbar-title>
 
-                <adf-toolbar-divider></adf-toolbar-divider>
-
                 <div class="app-document-action-buttons">
-                    <button
-                        mat-icon-button
-                        data-automation-id="document-list-grid-view"
-                        title="Toggle display mode"
-                        (click)="toggleGalleryView()">
-                        <mat-icon>list</mat-icon>
-                    </button>
                     <button
                         data-automation-id="create-new-folder"
                         mat-icon-button
@@ -79,11 +64,6 @@
                     <mat-icon>more_vert</mat-icon>
                 </button>
                 <mat-menu #menu="matMenu">
-                    <button mat-menu-item (click)="toggleGalleryView()">
-                        <mat-icon *ngIf="displayMode === 'list'">view_comfy</mat-icon>
-                        <mat-icon *ngIf="displayMode === 'gallery'">list</mat-icon>
-                        <span>Card view mode</span>
-                    </button>
                     <button mat-menu-item
                             (error)="openSnackMessageError($event)"
                             [adf-create-folder]="currentFolderId">
@@ -125,7 +105,6 @@
                 [sorting]="sorting"
                 [sortingMode]="sortingMode"
                 [showHeader]="showHeader"
-                [thumbnails]="thumbnails"
                 [stickyHeader]="stickyHeader"
                 [headerFilters]="headerFilters"
                 [filterValue]="paramValues"
@@ -147,41 +126,26 @@
                     <data-column
                         key="$thumbnail"
                         type="image"
-                        [sortable]="false"
-                        class="app-image-table-cell"
-                        [class.adf-cell-thumbnail]="thumbnails">
+                        [sortable]="false">
                     </data-column>
                     <data-column
-                        *ngIf="showNameColumn && hyperlinkNavigation"
-                        key="name"
-                        sortingKey="name"
-                        class="app-ellipsis-cell"
-                        title="Display name"
-                        [formatTooltip]="getNodeNameTooltip">
-                        <ng-template let-context>
-                            <adf-name-column key="name" [context]="context"></adf-name-column>
-                        </ng-template>
-                    </data-column>
-                    <data-column
-                        *ngIf="showNameColumn && !hyperlinkNavigation"
                         key="name"
                         sortingKey="name"
                         title="Display name"
-                        [formatTooltip]="getNodeNameTooltip"
-                        class="app-ellipsis-cell adf-expand-cell-5">
+                        class="adf-expand-cell-5">
                     </data-column>
                     <data-column
                         key="content.sizeInBytes"
                         title="Size"
                         type="fileSize"
                         sortingKey="sizeInBytes"
-                        class="app-desktop-only adf-ellipsis-cell">
+                        class="adf-ellipsis-cell">
                     </data-column>
                     <data-column
                         *ngIf="searchTerm"
                         key="search"
                         title="Search"
-                        class="app-desktop-only adf-expand-cell-3">
+                        class="adf-expand-cell-3">
                         <ng-template let-entry="$implicit">
                             <div [innerHTML]="searchResultsHighlight(entry.row.node.entry.search) | highlight:searchTerm">
                             </div>
@@ -200,7 +164,7 @@
                         key="lock"
                         [focus]="false"
                         [sortable]="false"
-                        class="app-desktop-only adf-ellipsis-cell">
+                        class="adf-ellipsis-cell">
                         <ng-template let-entry="$implicit">
                             <button mat-icon-button [adf-node-lock]="entry.row.node.entry" class="app-lock-button">
                                 <mat-icon *ngIf="entry.row.getValue('isLocked')">lock</mat-icon>
@@ -212,15 +176,15 @@
                         title="Created by"
                         key="createdByUser.displayName"
                         sortingKey="createdByUser"
-                        class="app-desktop-only adf-ellipsis-cell">
+                        class="adf-ellipsis-cell">
                     </data-column>
                     <data-column
                         title="Created"
                         key="createdAt"
                         sortingKey="createdAt"
                         type="date"
-                        [format]="enableMediumTimeFormat ? 'medium' : 'timeAgo'"
-                        class="app-desktop-only adf-ellipsis-cell">
+                        [format]="'timeAgo'"
+                        class="adf-ellipsis-cell">
                     </data-column>
 
                 </data-columns>
@@ -240,11 +204,6 @@
                         (success)="onDeleteActionSuccess($event)"
                         handler="delete">
                     </content-action>
-                    <content-action
-                        icon="info"
-                        title="Info"
-                        (execute)="onManageMetadata($event)">
-                    </content-action>
                     <content-action
                         icon="supervisor_account"
                         title="Permission"
@@ -269,21 +228,12 @@
             </adf-document-list>
                 </div>
             <adf-pagination
-                #standardPagination
-                *ngIf="!infiniteScrolling"
-                class="app-documentlist-pagination"
                 [target]="documentList"
                 (changePageSize)="onChangePageSize($event)"
                 (changePageNumber)="onChangePageNumber($event)"
                 (nextPage)="onNextPage($event)"
                 (prevPage)="onPrevPage($event)">
             </adf-pagination>
-            <adf-infinite-pagination
-                [hidden]="!infiniteScrolling"
-                [target]="documentList"
-                [loading]="documentList.loading">
-                {{ 'ADF-DOCUMENT-LIST.LAYOUT.LOAD_MORE' | translate }}
-            </adf-infinite-pagination>
         </adf-upload-drag-area>
 
         <adf-info-drawer-layout *ngIf="showVersions" class="app-manage-versions-sidebar">
@@ -301,7 +251,7 @@
                             <ng-container *ngIf="userHasPermissionToManageVersions(); else no_permission_to_versions">
                                 <adf-version-manager
                                     [node]="documentList.selection[0].entry"
-                                    [showComments]="showVersionComments"
+                                    [showComments]="true"
                                     [allowDownload]="allowVersionDownload">
                                 </adf-version-manager>
                             </ng-container>
@@ -338,18 +288,6 @@
     </div>
 
     <div class="app-container">
-        <section>
-            <mat-slide-toggle [(ngModel)]="showNameColumn">
-                Show Name Column
-            </mat-slide-toggle>
-        </section>
-
-        <section>
-            <mat-slide-toggle [(ngModel)]="hyperlinkNavigation">
-                Hyperlink navigation
-            </mat-slide-toggle>
-        </section>
-
         <section>
             <mat-slide-toggle data-automation-id="multiSelectToggle" [(ngModel)]="multiselect">
                 Multiselect (with checkboxes)
@@ -380,48 +318,18 @@
             </mat-slide-toggle>
         </section>
 
-        <section>
-            <mat-slide-toggle id="adf-thumbnails-upload-switch" (click)="toggleThumbnails()">
-                Enable Thumbnails
-            </mat-slide-toggle>
-        </section>
-
         <section>
             <mat-slide-toggle id="adf-version-upload-switch" [(ngModel)]="versioning">
                 Enable versioning
             </mat-slide-toggle>
         </section>
 
-        <section>
-            <mat-slide-toggle (click)="onInfiniteScrolling()">
-                Enable Infinite Scrolling
-            </mat-slide-toggle>
-        </section>
-
-        <section>
-            <mat-slide-toggle [(ngModel)]="showVersionComments">
-                Show comments on versions
-            </mat-slide-toggle>
-        </section>
-
         <section>
             <mat-slide-toggle [(ngModel)]="allowVersionDownload">
                 Enable version download
             </mat-slide-toggle>
         </section>
 
-        <section>
-            <mat-slide-toggle [(ngModel)]="warnOnMultipleUploads">
-                Display warning for multiple uploads
-            </mat-slide-toggle>
-        </section>
-
-        <section>
-            <mat-slide-toggle [(ngModel)]="enableMediumTimeFormat" id="enableMediumTimeFormat">
-                Enable medium time format for document list
-            </mat-slide-toggle>
-        </section>
-
         <section>
             <mat-slide-toggle [(ngModel)]="displayEmptyMetadata" id="displayEmptyMetadata">
                 Display Empty Metadata
@@ -461,8 +369,7 @@
                 [versioning]="versioning"
                 [adf-check-allowable-operation]="'create'"
                 [adf-nodes]="enableUpload ? getCurrentDocumentListNode() : []"
-                (permissionEvent)="handlePermissionError($event)"
-                (beginUpload)="onBeginUpload($event)">
+                (permissionEvent)="handlePermissionError($event)">
             </adf-upload-button>
         </div>
         <div *ngIf="acceptedFilesTypeShow">

demo-shell/src/app/components/files/files.component.scss

@@ -2,16 +2,6 @@
     margin: 10px !important;
 }
 
-@media screen and (max-width: 599px) {
-    .app-container {
-        margin: 0;
-    }
-
-    .app-show-versions-button.mat-icon-button {
-        display: none;
-    }
-}
-
 .app-error-message {
     text-align: left;
 }
@@ -37,18 +27,6 @@
         .app-document-action-buttons {
             flex: 0 0 auto;
         }
-
-        @media screen and (max-width: 600px) {
-            adf-breadcrumb, .app-document-action-buttons {
-                display: none;
-            }
-        }
-
-        @media screen and (min-width: 600px) {
-            adf-dropdown-breadcrumb, .app-toolbar-divider-before-more-menu, .app-toolbar-more-menu-button {
-                display: none;
-            }
-        }
     }
 
     &:not(.app-document-list-container-in-upload-drag-area) {
@@ -64,13 +42,6 @@
     position: absolute;
 }
 
-.app-site-container-style {
-    margin-top: 10px;
-    margin-bottom: 10px;
-    width: 100%;
-    min-width: 200px;
-}
-
 .app-content-service-settings {
     padding: 16px;
 }

demo-shell/src/app/components/files/files.component.ts

@@ -28,29 +28,23 @@ import {
     Output,
     ViewEncapsulation
 } from '@angular/core';
-import { Location } from '@angular/common';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Params, Router } from '@angular/router';
-import { NodeEntry, NodePaging, Pagination, Node, SiteEntry, SearchEntry } from '@alfresco/js-api';
+import { NodeEntry, NodePaging, Pagination, Node, SearchEntry } from '@alfresco/js-api';
 import {
     NotificationService,
-    DataRow,
     UserPreferencesService,
     PaginationComponent,
     DisplayMode,
     ShowHeaderMode,
-    InfinitePaginationComponent,
     FormRenderingService
 } from '@alfresco/adf-core';
-
 import {
     ContentService,
     FolderCreatedEvent,
     UploadService,
     DocumentListComponent,
     PermissionStyleModel,
-    UploadFilesEvent,
-    ConfirmDialogComponent,
     ContentMetadataService,
     FilterSearch,
     DialogAspectListService,
@@ -59,7 +53,6 @@ import {
 } from '@alfresco/adf-content-services';
 import { ProcessFormRenderingService } from '@alfresco/adf-process-services';
 import { VersionManagerDialogAdapterComponent } from './version-manager-dialog-adapter.component';
-import { MetadataDialogAdapterComponent } from './metadata-dialog-adapter.component';
 import { Subject } from 'rxjs';
 import { PreviewService } from '../../services/preview.service';
 import { takeUntil, debounceTime, scan } from 'rxjs/operators';
@@ -100,12 +93,6 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
     @Input()
     sortingMode: 'server' | 'client' = 'server';
 
-    @Input()
-    showRecentFiles = true;
-
-    @Input()
-    showSitePicker = true;
-
     @Input()
     showSettingsPanel = true;
 
@@ -130,9 +117,6 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
     @Input()
     maxSizeShow = false;
 
-    @Input()
-    showVersionComments = true;
-
     @Input()
     versioning = false;
 
@@ -157,9 +141,6 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
     @Input()
     disableDragArea = false;
 
-    @Input()
-    showNameColumn = true;
-
     @Input()
     searchTerm = '';
 
@@ -202,24 +183,15 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
     @ViewChild('standardPagination')
     standardPagination: PaginationComponent;
 
-    @ViewChild(InfinitePaginationComponent, { static: true })
-    infinitePaginationComponent: InfinitePaginationComponent;
-
     permissionsStyle: PermissionStyleModel[] = [];
-    infiniteScrolling: boolean;
     stickyHeader: boolean;
-    warnOnMultipleUploads = false;
-    thumbnails = false;
-    enableMediumTimeFormat = false;
     displayEmptyMetadata = false;
-    hyperlinkNavigation = false;
 
     constructor(
         private notificationService: NotificationService,
         private uploadService: UploadService,
         private contentService: ContentService,
         private dialog: MatDialog,
-        private location: Location,
         private router: Router,
         private preference: UserPreferencesService,
         private preview: PreviewService,
@@ -236,11 +208,6 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
         }
     }
 
-    toggleThumbnails() {
-        this.thumbnails = !this.thumbnails;
-        this.documentList.reload();
-    }
-
     ngOnInit() {
         if (!this.pagination) {
             this.pagination = {
@@ -399,7 +366,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
 
     onManageVersions(event: any) {
         const contentEntry = event.value.entry;
-        const showComments = this.showVersionComments;
+        const showComments = true;
         const allowDownload = this.allowVersionDownload;
 
         if (this.contentService.hasAllowableOperations(contentEntry, 'update')) {
@@ -421,28 +388,6 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
         });
     }
 
-    onManageMetadata(event: any) {
-        const contentEntry = event.value.entry;
-        const displayEmptyMetadata = this.displayEmptyMetadata;
-
-        if (this.contentService.hasAllowableOperations(contentEntry, 'update')) {
-            this.dialog.open(MetadataDialogAdapterComponent, {
-                data: {
-                    contentEntry,
-                    displayEmptyMetadata
-                },
-                panelClass: 'adf-metadata-manager-dialog',
-                width: '630px'
-            });
-        } else {
-            this.openSnackMessageError('OPERATION.ERROR.PERMISSION');
-        }
-    }
-
-    onSiteChange(site: SiteEntry) {
-        this.currentFolderId = site.entry.guid;
-    }
-
     hasSelection(selection: Array<any>): boolean {
         return selection && selection.length > 0;
     }
@@ -457,13 +402,6 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
         return this.contentService.hasAllowableOperations(selection[0].entry, 'update');
     }
 
-    getNodeNameTooltip(row: DataRow): string {
-        if (row) {
-            return row.getValue('name');
-        }
-        return null;
-    }
-
     canEditFolder(selection: Array<NodeEntry>): boolean {
         if (selection && selection.length === 1) {
             const entry = selection[0].entry;
@@ -507,44 +445,9 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
         this.turnedPreviousPage.emit(event);
     }
 
-    toggleGalleryView(): void {
-        this.displayMode = this.displayMode === DisplayMode.List ? DisplayMode.Gallery : DisplayMode.List;
-        const url = this.router.createUrlTree(['/files', this.currentFolderId, 'display', this.displayMode]).toString();
-
-        this.location.go(url);
-    }
-
-    onInfiniteScrolling(): void {
-        this.infiniteScrolling = !this.infiniteScrolling;
-        this.infinitePaginationComponent.reset();
-    }
-
-    onBeginUpload(event: UploadFilesEvent) {
-        if (this.warnOnMultipleUploads && event) {
-            const files = event.files || [];
-            if (files.length > 1) {
-                event.pauseUpload();
-
-                const dialogRef = this.dialog.open(ConfirmDialogComponent, {
-                    data: {
-                        title: 'Upload',
-                        message: `Are you sure you want to upload ${files.length} file(s)?`
-                    },
-                    minWidth: '250px'
-                });
-
-                dialogRef.afterClosed().subscribe((result) => {
-                    if (result === true) {
-                        event.resumeUpload();
-                    }
-                });
-            }
-        }
-    }
-
     onUploadNewVersion(ev) {
         const contentEntry = ev.detail.data.node.entry;
-        const showComments = this.showVersionComments;
+        const showComments = true;
         const allowDownload = this.allowVersionDownload;
         const newFileVersion = ev.detail.files[0].file;
 

demo-shell/src/app/components/files/metadata-dialog-adapter.component.html

@@ -1,10 +0,0 @@
-<header mat-dialog-title>Metadata</header>
-<section mat-dialog-content>
-    <adf-content-metadata-card
-        [node]="contentEntry"
-        [displayEmpty]="displayEmptyMetadata">
-    </adf-content-metadata-card>
-</section>
-<footer mat-dialog-actions>
-    <button mat-button (click)="close()">Close</button>
-</footer>

demo-shell/src/app/components/files/metadata-dialog-adapter.component.ts

@@ -1,38 +0,0 @@
-/*!
- * @license
- * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { Component, Inject, ViewEncapsulation } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { Node } from '@alfresco/js-api';
-
-@Component({
-    templateUrl: './metadata-dialog-adapter.component.html',
-    encapsulation: ViewEncapsulation.None
-})
-export class MetadataDialogAdapterComponent {
-    contentEntry: Node;
-    displayEmptyMetadata = false;
-
-    constructor(@Inject(MAT_DIALOG_DATA) data: any, private containingDialog?: MatDialogRef<MetadataDialogAdapterComponent>) {
-        this.contentEntry = data.contentEntry;
-        this.displayEmptyMetadata = data.displayEmptyMetadata;
-    }
-
-    close() {
-        this.containingDialog.close();
-    }
-}

demo-shell/src/app/components/home/home.component.html

@@ -3,6 +3,4 @@
         <h1>ADF</h1>
         <h2>Angular components for Alfresco</h2>
     </div>
-
-    <a mat-raised-button href="https://github.com/Alfresco/alfresco-ng2-components/tree/master/docs">Documentation</a>
 </div>

demo-shell/src/app/components/home/home.component.ts

@@ -18,6 +18,7 @@
 import { Component, ViewEncapsulation } from '@angular/core';
 
 @Component({
+    standalone: true,
     selector: 'app-home-view',
     templateUrl: './home.component.html',
     styleUrls: ['./home.component.scss'],

demo-shell/src/app/components/login/login.component.html

@@ -1,4 +1,4 @@
-<a mat-fab class="app-setting-button" data-automation-id="settings" href="" routerLink="/settings">
+<a class="app-setting-button" data-automation-id="settings" href="" routerLink="/settings">
     <mat-icon>settings</mat-icon>
 </a>
 

demo-shell/src/app/components/login/login.component.scss

@@ -1,6 +1,7 @@
-.app-setting-button.mat-fab {
+.app-setting-button {
     position: absolute;
     right: 10px;
     top: 10px;
     z-index: 1;
+    color: white;
 }

demo-shell/src/app/components/logout/logout.component.html

@@ -1,15 +1,11 @@
-<header class="app-logout-background">
+<header>
     <div class="app-logout-section" data-automation-id="adf-logout-section">
         <div class="app-logout-headline">
             <h1 class="mat-h1">Logout Page</h1>
             <h2 class="mat-h2">You are now logged out</h2>
         </div>
 
-        <div class="app-logout-login">
-            <a mat-raised-button class="app-logout-docs-button" href="#/login">Login}</a>
-        </div>
-        <div class="app-logout-home">
-            <a mat-raised-button class="app-logout-docs-button" href="/">Home</a>
-        </div>
+        <a mat-raised-button class="app-logout-docs-button" href="#/login">Login</a>
+        <a mat-raised-button class="app-logout-docs-button" href="/">Home</a>
     </div>
 </header>

demo-shell/src/app/components/logout/logout.component.scss

@@ -4,10 +4,6 @@
     align-items: center;
 }
 
-.app-logout-header-background {
-    overflow: hidden;
-}
-
 .app-logout-section {
     text-align: center;
     padding-top: 60px;
@@ -24,9 +20,5 @@
 }
 
 .app-logout-docs-button {
-    margin: 30px;
-}
-
-.app-logout-login {
-    float: left;
+    margin: 8px;
 }

demo-shell/src/app/components/search/search-filter-chips.component.html

@@ -20,8 +20,6 @@
             [showHeader]="showHeader"
             [sorting]="sorting"
             [sortingMode]="'server'"
-            [showRecentFiles]="false"
-            [showSitePicker]="false"
             [showSettingsPanel]="false"
             [currentFolderId]="null"
             [nodeResult]="$any(data)"

demo-shell/src/app/components/search/search-result.component.html

@@ -18,8 +18,6 @@
             [showHeader]="showHeader"
             [sorting]="sorting"
             [sortingMode]="'server'"
-            [showRecentFiles]="false"
-            [showSitePicker]="false"
             [showSettingsPanel]="false"
             [currentFolderId]="null"
             [nodeResult]="$any(data)"

demo-shell/src/app/components/settings/host-settings.component.html

@@ -1,120 +1,106 @@
 <div class="adf-setting-container">
-    <mat-card class="adf-setting-card">
-        <form id="host-form" [formGroup]="form" (submit)="onSubmit(form.value)" (keydown)="keyDownFunction($event)">
-            <mat-form-field *ngIf="showSelectProviders">
-                <mat-select  id="adf-provider-selector" [formControl]="providersControl">
-                    <mat-option *ngFor="let provider of providers" [value]="provider">
-                        {{ provider }}
-                    </mat-option>
-                </mat-select>
+    <form id="host-form" [formGroup]="form" (submit)="onSubmit(form.value)" (keydown)="keyDownFunction($event)">
+        <mat-form-field *ngIf="showSelectProviders">
+            <mat-select id="adf-provider-selector" [formControl]="providersControl">
+                <mat-option *ngFor="let provider of providers" [value]="provider">
+                    {{ provider }}
+                </mat-option>
+            </mat-select>
+        </mat-form-field>
+
+        <div class="adf-authentication-type">
+            <div>Authentication type:</div>
+            <mat-radio-group formControlName="authType" class="adf-authentication-radio-group">
+                <mat-radio-button value="BASIC" class="adf-authentication-radio-button">Basic Authentication</mat-radio-button>
+                <mat-radio-button value="OAUTH" class="adf-authentication-radio-button">SSO</mat-radio-button>
+            </mat-radio-group>
+        </div>
+
+        <mat-form-field *ngIf="isALL() || isECM()" class="adf-full-width">
+            <mat-label>Content Services URL</mat-label>
+            <input matInput [formControl]="ecmHost" data-automation-id="ecmHost" type="text" id="ecmHost" [placeholder]="PLACEHOLDER_URL">
+            <mat-error *ngIf="ecmHost.hasError('pattern')">{{ ERR_INVALID_URL }}</mat-error>
+            <mat-error *ngIf="ecmHost.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
+        </mat-form-field>
+
+        <mat-form-field *ngIf="isALL() || isBPM()" class="adf-full-width">
+            <mat-label>Process Services URL</mat-label>
+            <input matInput [formControl]="bpmHost" data-automation-id="bpmHost" type="text" id="bpmHost" [placeholder]="PLACEHOLDER_URL">
+            <mat-error *ngIf="bpmHost.hasError('pattern')">{{ ERR_INVALID_URL }}</mat-error>
+            <mat-error *ngIf="bpmHost.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
+        </mat-form-field>
+
+        <mat-form-field *ngIf="isOAUTH()" class="adf-full-width">
+            <mat-label>Identity Host</mat-label>
+            <input matInput name="identityHost" id="identityHost" formControlName="identityHost" [placeholder]="PLACEHOLDER_URL">
+            <mat-error *ngIf="identityHost.hasError('pattern')">{{ ERR_INVALID_URL }}</mat-error>
+            <mat-error *ngIf="identityHost.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
+        </mat-form-field>
+
+        <div *ngIf="isOAUTH()" formGroupName="oauthConfig">
+            <mat-form-field class="adf-full-width">
+                <mat-label>Auth Host</mat-label>
+                <input matInput name="host" id="oauthHost" formControlName="host" [placeholder]="PLACEHOLDER_URL">
+                <mat-error *ngIf="host.hasError('pattern')">{{ ERR_INVALID_URL }}</mat-error>
+                <mat-error *ngIf="host.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
             </mat-form-field>
 
-            <div class="adf-authentication-type">
-                <div>Authentication type :</div>
-                <mat-radio-group formControlName="authType" >
-                <mat-radio-button value="BASIC">Basic Authentication</mat-radio-button>
-                <mat-radio-button value="OAUTH">SSO</mat-radio-button>
-            </mat-radio-group>
-            </div>
+            <mat-form-field class="adf-full-width">
+                <mat-label>Client ID</mat-label>
+                <input matInput name="clientId" id="clientId" formControlName="clientId">
+                <mat-error *ngIf="clientId.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
+            </mat-form-field>
 
-            <ng-container *ngIf="isALL() || isECM()">
-                <mat-card-content>
-                    <mat-form-field class="adf-full-width">
-                        <mat-label>Content Services URL</mat-label>
-                        <input matInput [formControl]="ecmHost" data-automation-id="ecmHost" type="text" id="ecmHost" [placeholder]="PLACEHOLDER_URL">
-                        <mat-error *ngIf="ecmHost.hasError('pattern')">{{ ERR_INVALID_URL }}</mat-error>
-                        <mat-error *ngIf="ecmHost.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
-                    </mat-form-field>
-                </mat-card-content>
+            <mat-form-field class="adf-full-width">
+                <mat-label>Scope Id</mat-label>
+                <input matInput name="Scope" formControlName="scope">
+                <mat-error *ngIf="scope.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
+            </mat-form-field>
+
+            <mat-form-field class="adf-full-width">
+                <mat-label>Secret</mat-label>
+                <input matInput name="Secret" formControlName="secret">
+                <mat-error *ngIf="secret.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
+            </mat-form-field>
+
+            <mat-label>Silent Login</mat-label>
+            <mat-slide-toggle class="adf-full-width" name="silentLogin" formControlName="silentLogin">
+            </mat-slide-toggle>
+
+            <mat-label>Implicit Flow</mat-label>
+            <mat-slide-toggle class="adf-full-width" name="implicitFlow" formControlName="implicitFlow">
+            </mat-slide-toggle>
+
+            <ng-container *ngIf="isOAUTH">
+                <mat-label>Code Flow</mat-label>
+                <mat-slide-toggle class="adf-full-width" name="codeFlow" formControlName="codeFlow">
+                </mat-slide-toggle>
             </ng-container>
 
-            <ng-container *ngIf="isALL() || isBPM()">
-                <mat-card-content>
-                    <mat-form-field class="adf-full-width">
-                        <mat-label>Process Services URL</mat-label>
-                        <input matInput [formControl]="bpmHost" data-automation-id="bpmHost" type="text" id="bpmHost" [placeholder]="PLACEHOLDER_URL">
-                        <mat-error *ngIf="bpmHost.hasError('pattern')">{{ ERR_INVALID_URL }}</mat-error>
-                        <mat-error *ngIf="bpmHost.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
-                    </mat-form-field>
-                </mat-card-content>
-            </ng-container>
+            <mat-form-field class="adf-full-width">
+                <mat-label>Redirect URI</mat-label>
+                <input matInput  name="redirectUri" formControlName="redirectUri">
+                <mat-error *ngIf="redirectUri.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
+            </mat-form-field>
 
-            <ng-container *ngIf="isOAUTH()">
-                <mat-card-content>
-                    <mat-form-field class="adf-full-width">
-                        <mat-label>Identity Host</mat-label>
-                        <input matInput name="identityHost" id="identityHost" formControlName="identityHost" [placeholder]="PLACEHOLDER_URL">
-                        <mat-error *ngIf="identityHost.hasError('pattern')">{{ ERR_INVALID_URL }}</mat-error>
-                        <mat-error *ngIf="identityHost.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
-                    </mat-form-field>
-                </mat-card-content>
-            </ng-container>
+            <mat-form-field class="adf-full-width">
+                <mat-label>Redirect URI Logout</mat-label>
+                <input id="logout-url" matInput name="redirectUriLogout" formControlName="redirectUriLogout">
+            </mat-form-field>
 
-            <ng-container *ngIf="isOAUTH()">
-                <div formGroupName="oauthConfig">
-                    <mat-form-field class="adf-full-width">
-                        <mat-label>Auth Host</mat-label>
-                        <input matInput name="host" id="oauthHost" formControlName="host" [placeholder]="PLACEHOLDER_URL">
-                        <mat-error *ngIf="host.hasError('pattern')">{{ ERR_INVALID_URL }}</mat-error>
-                        <mat-error *ngIf="host.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
-                    </mat-form-field>
+            <mat-form-field class="adf-full-width">
+                <mat-label>Public urls silent Login</mat-label>
+                <input id="public-url" matInput name="publicUrls" formControlName="publicUrls">
+            </mat-form-field>
+        </div>
 
-                    <mat-form-field class="adf-full-width">
-                        <mat-label>Client ID</mat-label>
-                        <input matInput name="clientId" id="clientId" formControlName="clientId">
-                        <mat-error *ngIf="clientId.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
-                    </mat-form-field>
-
-                    <mat-form-field class="adf-full-width">
-                        <mat-label>Scope Id</mat-label>
-                        <input matInput name="Scope" formControlName="scope">
-                        <mat-error *ngIf="scope.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
-                    </mat-form-field>
-
-                    <mat-form-field class="adf-full-width">
-                        <mat-label>Secret</mat-label>
-                        <input matInput name="Secret" formControlName="secret">
-                        <mat-error *ngIf="secret.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
-                    </mat-form-field>
-
-                    <mat-label>Silent Login</mat-label>
-                    <mat-slide-toggle class="adf-full-width" name="silentLogin" formControlName="silentLogin">
-                    </mat-slide-toggle>
-
-                    <mat-label>Implicit Flow</mat-label>
-                    <mat-slide-toggle class="adf-full-width" name="implicitFlow" formControlName="implicitFlow">
-                    </mat-slide-toggle>
-
-                    <ng-container *ngIf="supportsCodeFlow">
-                        <mat-label>Code Flow</mat-label>
-                        <mat-slide-toggle class="adf-full-width" name="codeFlow" formControlName="codeFlow">
-                        </mat-slide-toggle>
-                    </ng-container>
-
-                    <mat-form-field class="adf-full-width">
-                        <mat-label>Redirect URI</mat-label>
-                        <input matInput  name="redirectUri" formControlName="redirectUri">
-                        <mat-error *ngIf="redirectUri.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
-                    </mat-form-field>
-
-                    <mat-form-field class="adf-full-width">
-                        <mat-label>Redirect URI Logout</mat-label>
-                        <input id="logout-url" matInput name="redirectUriLogout" formControlName="redirectUriLogout">
-                    </mat-form-field>
-
-                    <mat-form-field class="adf-full-width">
-                        <mat-label>Public urls silent Login</mat-label>
-                        <input id="public-url" matInput name="publicUrls" formControlName="publicUrls">
-                    </mat-form-field>
-
-                </div>
-            </ng-container>
-            <mat-card-actions align="end">
-                <button mat-button (click)="onCancel()">Back</button>
-                <button type="submit" class="adf-login-button" mat-button
-                        color="primary" data-automation-id="settings-apply-button"
-                        [disabled]="!form.valid">Apply</button>
-            </mat-card-actions>
-        </form>
-    </mat-card>
+        <div class="adf-host-settings-actions">
+            <button mat-button (click)="onCancel()">Back</button>
+            <button type="submit"
+                    mat-button
+                    color="primary"
+                    data-automation-id="settings-apply-button"
+                    [disabled]="!form.valid">Apply</button>
+        </div>
+    </form>
 </div>

demo-shell/src/app/components/settings/host-settings.component.scss

@@ -3,11 +3,26 @@
     min-height: 100%;
     align-items: center;
 
+    .adf-host-settings-actions {
+        text-align: end;
+    }
+
     .adf-authentication-type {
         margin-bottom: 20px;
         margin-top: 10px;
     }
 
+    .adf-authentication-radio-group {
+        display: flex;
+        flex-direction: column;
+        margin: 15px 0;
+        align-items: flex-start;
+    }
+
+    .adf-authentication-radio-button {
+        margin: 5px;
+    }
+
     .adf-setting-container {
         width: 800px;
         display: table;

demo-shell/src/app/components/settings/host-settings.component.ts

@@ -65,7 +65,7 @@ export class HostSettingsComponent implements OnInit {
         private storageService: StorageService,
         private alfrescoApiService: AlfrescoApiService,
         private appConfig: AppConfigService,
-        private auth: AuthenticationService
+        private authenticationService: AuthenticationService
     ) {}
 
     ngOnInit() {
@@ -191,8 +191,8 @@ export class HostSettingsComponent implements OnInit {
         this.storageService.setItem(AppConfigValues.AUTHTYPE, values.authType);
 
         this.alfrescoApiService.reset();
-        this.auth.reset();
-        this.alfrescoApiService.getInstance().invalidateSession();
+        this.authenticationService.reset();
+        this.authenticationService.logout();
         this.success.emit(true);
     }
 
@@ -235,10 +235,6 @@ export class HostSettingsComponent implements OnInit {
         return this.form.get('authType').value === 'OAUTH';
     }
 
-    get supportsCodeFlow(): boolean {
-        return this.auth.supportCodeFlow;
-    }
-
     get providersControl(): UntypedFormControl {
         return this.form.get('providersControl') as UntypedFormControl;
     }

demo-shell/src/app/components/task-list-demo/task-list.module.ts

@@ -19,7 +19,7 @@ import { NgModule } from '@angular/core';
 import { TaskListDemoComponent } from './task-list-demo.component';
 import { Routes, RouterModule } from '@angular/router';
 import { CommonModule } from '@angular/common';
-import { CoreModule } from '@alfresco/adf-core';
+import { CoreModule, LocalizedDatePipe } from '@alfresco/adf-core';
 import { ProcessModule } from '@alfresco/adf-process-services';
 
 const routes: Routes = [
@@ -38,7 +38,8 @@ const routes: Routes = [
         CommonModule,
         RouterModule.forChild(routes),
         CoreModule,
-        ProcessModule.forChild()
+        ProcessModule.forChild(),
+        LocalizedDatePipe
     ],
     declarations: [TaskListDemoComponent]
 })

demo-shell/src/app/components/tree-view/tree-view-sample.component.html

@@ -1,19 +0,0 @@
-<div>TREE VIEW TEST</div>
-<mat-form-field class="example-full-width">
-    <input matInput placeholder="Node Id"
-                [(ngModel)]="nodeIdSample"
-                (ngModelChange)="reset()">
-</mat-form-field>
-<span>
-    CLICKED NODE: {{clickedNodeName}}
-</span>
-
-<adf-tree-view-list *ngIf="!errorMessage; else errorOccurred"
-        [nodeId]="nodeIdSample"
-        (nodeClicked)="onClick($event)"
-        (error)="onErrorOccurred($event)">
-</adf-tree-view-list>
-<ng-template #errorOccurred>
-    <span>An Error Occurred </span>
-    <span>{{errorMessage}}</span>
-</ng-template>

demo-shell/src/app/components/tree-view/tree-view-sample.component.scss

@@ -1,3 +0,0 @@
-.example-full-width {
-    width: 100%;
-}

demo-shell/src/assets/fonts/muli/OFL.txt

@@ -1,93 +0,0 @@
-Copyright (c) 2016 The Muli Project Authors (contact@sansoxygen.com)
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is copied below, and is also available with a FAQ at:
-http://scripts.sil.org/OFL
-
-
------------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
------------------------------------------------------------
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded, 
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION & CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.

demo-shell/src/assets/fonts/muli/muli.css

@@ -1,63 +0,0 @@
-/* vietnamese */
-@font-face {
-    font-family: 'Muli';
-    font-style: normal;
-    font-weight: 400;
-    src: local('Muli Regular'),
-         local('Muli-Regular'),
-         url(Muli-Regular.ttf) format('truetype');
-    unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
-  }
-  /* latin-ext */
-  @font-face {
-    font-family: 'Muli';
-    font-style: normal;
-    font-weight: 400;
-    src: local('Muli Regular'),
-         local('Muli-Regular'),
-         url(Muli-Regular.ttf) format('truetype');
-    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
-  }
-  /* latin */
-  @font-face {
-    font-family: 'Muli';
-    font-style: normal;
-    font-weight: 400;
-    src: local('Muli Regular'),
-         local('Muli-Regular'),
-         url(Muli-Regular.ttf) format('truetype');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
-  }
-
-/* vietnamese */
-@font-face {
-    font-family: 'Muli';
-    font-style: normal;
-    font-weight: 100;
-    src: local('Muli Light'),
-    local('Muli-Light'),
-    url(Muli-Light.ttf) format('truetype');
-    unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
-}
-
-/* latin-ext */
-@font-face {
-    font-family: 'Muli';
-    font-style: normal;
-    font-weight: 100;
-    src: local('Muli Light'),
-    local('Muli-Light'),
-    url(Muli-Light.ttf) format('truetype');
-    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
-}
-
-/* latin */
-@font-face {
-    font-family: 'Muli';
-    font-style: normal;
-    font-weight: 100;
-    src: local('Muli Light'),
-    local('Muli-Light'),
-    url(Muli-Light.ttf) format('truetype');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
-}

docker/docker-entrypoint.d/30-sed-on-appconfig.sh

@@ -33,6 +33,11 @@ if [ -n "${APP_CONFIG_OAUTH2_IMPLICIT_FLOW}" ]; then
     -i "${NGINX_ENVSUBST_OUTPUT_DIR}/app.config.json"
 fi
 
+if [ -n "${APP_CONFIG_OAUTH2_CODE_FLOW}" ]; then
+  sed -e "s/\"codeFlow\": [^,]*/\"codeFlow\": ${APP_CONFIG_OAUTH2_CODE_FLOW}/g" \
+    -i "${NGINX_ENVSUBST_OUTPUT_DIR}/app.config.json"
+fi
+
 if [ -n "${APP_CONFIG_OAUTH2_SILENT_LOGIN}" ]; then
   sed -e "s/\"silentLogin\": [^,]*/\"silentLogin\": ${APP_CONFIG_OAUTH2_SILENT_LOGIN}/g" \
     -i "${NGINX_ENVSUBST_OUTPUT_DIR}/app.config.json"

docker/run.sh

@@ -14,6 +14,7 @@ docker run --rm -it \
   --env APP_CONFIG_OAUTH2_HOST=$APP_CONFIG_OAUTH2_HOST \
   --env APP_CONFIG_OAUTH2_CLIENTID=$APP_CONFIG_OAUTH2_CLIENTID \
   --env APP_CONFIG_OAUTH2_IMPLICIT_FLOW=$APP_CONFIG_OAUTH2_IMPLICIT_FLOW \
+  --env APP_CONFIG_OAUTH2_IMPLICIT_FLOW=$APP_CONFIG_OAUTH2_CODE_FLOW \
   --env APP_CONFIG_OAUTH2_SILENT_LOGIN=$APP_CONFIG_OAUTH2_SILENT_LOGIN \
   --env APP_CONFIG_OAUTH2_REDIRECT_SILENT_IFRAME_URI=$APP_CONFIG_OAUTH2_REDIRECT_SILENT_IFRAME_URI \
   --env APP_CONFIG_BPM_HOST=$APP_CONFIG_BPM_HOST \

docs/README.md

@@ -290,10 +290,9 @@ for more information about installing and using the source code.
 | [Search Chip Input Component](content-services/components/search-chip-input.component.md) | Displays input for providing phrases display as "chips". | [Source](../lib/content-services/src/lib/search/components/search-chip-input/search-chip-input.component.ts) |
 | [Search Chip Autocomplete Input component](content-services/components/search-chip-autocomplete-input.component.md) | Displays an input with autocomplete options. | [Source](../lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.ts) |
 | [Search Chip List Component](content-services/components/search-chip-list.component.md) | Displays search criteria as a set of "chips". | [Source](../lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.ts) |
-| [Search Date Range Advanced Component](content-services/components/search-date-range-advanced.component.md) | Displays a UI to configure different kinds of search criteria around date. Options are 'Anyytime', 'In the last' and 'Between' | [Source](../lib/content-services/src/lib/search/components/search-date-range-advanced-tabbed/search-date-range-advanced/search-date-range-advanced.component.ts) |
 | [Search control component](content-services/components/search-control.component.md) | Displays a input text that shows find-as-you-type suggestions. | [Source](../lib/content-services/src/lib/search/components/search-control.component.ts) |
-| [Search date range component](content-services/components/search-date-range.component.md) | Implements a search widget for the Search Filter component. | [Source](../lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.ts) |
-| [Search date range advanced tabbed component](content-services/components/search-date-range-advanced-tabbed.component.md) | Implements a tabbed advanced search widget for the Search Filter component. | [Source](../lib/content-services/src/lib/search/components/search-date-range-advanced-tabbed/search-date-range-advanced-tabbed.component.ts) |
+| [Search Date Range Component](content-services/components/search-date-range.component.md) | Displays a UI to configure different kinds of search criteria around date. Options are 'Anytime', 'In the last' and 'Between' | [Source](../lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.ts) |
+| [Search Date Range Tabbed component](content-services/components/search-date-range-tabbed.component.md) | Implements a tabbed advanced search widget for the Search Date Range component. | [Source](../lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range-tabbed.component.ts) |
 | [Search datetime range component](content-services/components/search-datetime-range.component.md) | Implements a search widget for the Search Filter component. | [Source](../lib/content-services/src/lib/search/components/search-datetime-range/search-datetime-range.component.ts) |
 | [Search Filter Autocomplete Chips component](content-services/components/search-filter-autocomplete-chips.component.md) | Implements a search widget for the Search Filter component. | [Source](../lib/content-services/src/lib/search/components/search-filter-autocomplete-chips/search-filter-autocomplete-chips.component.ts) |
 | [Search Filter Chips component](content-services/components/search-filter-chips.component.md) | Represents a chip based container component for custom search and faceted search settings. | [Source](../lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.ts) |
@@ -357,6 +356,7 @@ for more information about installing and using the source code.
 | [Base Card View Content Update interface](content-services/interfaces/base-card-view-content-update.interface.md) | Specifies required properties and methods for Card View Content Update service. |  |
 | Extends from BaseCardViewUpdate. | [Source](../lib/content-services/src/lib/interfaces/base-card-view-content-update.interface.ts) |  |
 | [Search widget interface](content-services/interfaces/search-widget.interface.md) | Specifies required properties for Search filter component widgets. | [Source](../lib/content-services/src/lib/search/models/search-widget.interface.ts) |
+| [Content Metadata Custom Panel interface](content-services/interfaces/content-metadata-custom-panel.interface.md) | Specifies required properties for metadata custom panel. | [Source](../lib/content-services/src/lib/content-metadata/interfaces/content-metadata-custom-panel.interface.ts) |
 
 ### Models
 

docs/content-services/components/aspect-list-dialog.component.md

@@ -29,6 +29,7 @@ export interface AspectListDialogComponentData {
     overTableMessage: string;
     select: Subject<string[]>;
     nodeId?: string;
+    excludedAspects?: string[];
 }
 ```
 
@@ -41,6 +42,7 @@ The properties are described in the table below:
 | overTableMessage | `string` | "" | Text that will be showed on the top of the aspect list table |
 | select | [`Subject<Node>`](https://github.com/Alfresco/alfresco-js-api/blob/develop/src/api/content-rest-api/docs/Node.md) |  | Event emitted with the current node selection when the dialog closes |
 | nodeId | `string` | "" | Identifier of a node to apply aspects to. |
+| excludedAspects | `string[]` | undefined | List of aspects' ids which should not be displayed. |
 
 If you don't want to manage the dialog yourself then it is easier to use the
 [Aspect List component](aspect-list.component.md), or the

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

@@ -30,6 +30,7 @@ The aspect are filtered via the app.config.json in this way :
 | Name | Type | Default value | Description |
 | ---- | ---- | ------------- | ----------- |
 | nodeId | `string` | "" | Node Id of the node that we want to update |
+| excludedAspects | `string[]` | undefined | List of aspects' ids which should not be displayed. |
 
 ### Events
 

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

@@ -27,6 +27,7 @@ Displays and edits metadata related to a node.
     -   [Use chips for multi value properties](#use-chips-for-multi-value-properties)
 -   [Copy to Clipboard on click](#copy-to-clipboard-on-click)
 -   [Search select options (ACS 7+)](#search-select-options-acs-7)
+-   [Custom metadata panels](#custom-metadata-panels)
 
 ## Basic Usage
 
@@ -53,6 +54,7 @@ Displays and edits metadata related to a node.
 | readOnly | `boolean` | false | (optional) This flag sets the metadata in read only mode preventing changes. |
 | displayDefaultProperties | `boolean` |  | (optional) This flag displays/hides the metadata properties. |
 | editable | `boolean` |  | (optional) This flag toggles editable of content. |
+| customPanels | [`ContentMetadataCustomPanel`](../interfaces/content-metadata-custom-panel.interface.md)`[]` | | (optional) List of custom metadata panels to be displayed as [`Dynamic components`](../../extensions/components/dynamic.component.md). |
 
 ### Events
 
@@ -438,3 +440,7 @@ When the list of values is too long, the options selection panel will be enhance
 ```
 
 ![Chips for multi value properties](../../docassets/images/adf-search-select.png)
+
+## Custom metadata panels
+
+If there is a need to display some custom node properties that require additional UI or data to be fetched you can define custom metadata panels for the metadata component. After creating custom component to be displayed it has to be registered in [Extension Service](../../extensions/services/extension.service.md). Both `panelTitle` and `component` properties have to be defined.

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

@@ -60,6 +60,8 @@ Displays the documents from a repository.
 | ---- | ---- | ------------- | ----------- |
 | additionalSorting | [`DataSorting`](../../../lib/core/src/lib/datatable/data/data-sorting.model.ts) |  | Defines default sorting. The format is an array of strings `[key direction, otherKey otherDirection]` i.e. `['name desc', 'nodeType asc']` or `['name asc']`. Set this value if you want a base rule to be added to the sorting apart from the one driven by the header. |
 | allowDropFiles | `boolean` | false | When true, this enables you to drop files directly into subfolders shown as items in the list or into another file to trigger updating it's version. When false, the dropped file will be added to the current folder (ie, the one containing all the items shown in the list). See the [Upload directive](../../core/directives/upload.directive.md) for further details about how the file drop is handled. |
+| blurOnResize | `boolean` | true | Toggles blur when columns of the list are being resized. |
+| columnsPresetKey | `string` |  | Key of columns preset set in extension.json|
 | contentActions | `boolean` | false | Toggles content actions for each row |
 | contentActionsPosition | `string` | "right" | Position of the content actions dropdown menu. Can be set to "left" or "right". |
 | contextMenuActions | `boolean` | false | Toggles context menus for each row |
@@ -70,8 +72,10 @@ Displays the documents from a repository.
 | headerFilters | `boolean` | false | Toggles the header filters mode. |
 | imageResolver | `any \| null` | null | Custom function to choose image file paths to show. See the [Image Resolver Model](image-resolver.model.md) page for more information. |
 | includeFields | `string[]` |  | Include additional information about the node in the server request. For example: association, isLink, isLocked and others. |
+| isResizingEnabled | `boolean` | false | Toggles column resizing for document list. |
 | loading | `boolean` | false | Toggles the loading state and animated spinners for the component. Used in combination with `navigate=false` to perform custom navigation and loading state indication. |
 | locationFormat | `string` | "/" | The default route for all the location-based columns (if declared). |
+| maxColumnsVisible | `number` |  | Limit of possible visible columns, including "$thumbnail" column if provided |
 | maxItems | `number` |  | Default value is stored in the user preference settings. Use this only if you are not using pagination. |
 | multiselect | `boolean` | false | Toggles multiselect mode |
 | navigate | `boolean` | true | Toggles navigation to folder content or file preview |

docs/content-services/components/search-check-list.component.md

@@ -76,7 +76,7 @@ items in the list.
 -   [Search Configuration Guide](../../user-guide/search-configuration-guide.md)
 -   [Search filter chips component](search-filter-chips.component.md)
 -   [Search filter component](search-filter.component.md)
--   [Search date range component](search-date-range.component.md)
+-   [Search date range tabbed component](search-date-range-tabbed.component.md)
 -   [Search number range component](search-number-range.component.md)
 -   [Search radio component](search-radio.component.md)
 -   [Search slider component](search-slider.component.md)

docs/content-services/components/search-chip-autocomplete-input.component.md

@@ -50,7 +50,7 @@ Represents an input with autocomplete options.
 -   [Search Filter Autocomplete Chips component](search-filter-autocomplete-chips.component.md)
 -   [Search Logical Filter component](search-logical-filter.component.md)
 -   [Search check list component](search-check-list.component.md)
--   [Search date range component](search-date-range.component.md)
+-   [Search date range tabbed component](search-date-range-tabbed.component.md)
 -   [Search number range component](search-number-range.component.md)
 -   [Search radio component](search-radio.component.md)
 -   [Search slider component](search-slider.component.md)

docs/content-services/components/search-date-range-advanced.component.md

@@ -1,47 +0,0 @@
----
-Title: Search date range advanced component
-Added: v6.2.0
-Status: Active
-Last reviewed: 2023-07-10
----
-
-# [Search date range advanced component](../../../lib/content-services/src/lib/search/components/search-date-range-advanced-tabbed/search-date-range-advanced/search-date-range-advanced.component.ts "Defined in search-date-range-advanced.component.ts")
-
-Represents an advanced date range component for
-the [SearchAdvancedDateRangeTabbedComponent](search-date-range-advanced-tabbed.component.md).
-
-![Date Range Advanced Widget](../../docassets/images/search-date-range-advanced.png)
-
-## Basic usage
-
-```html
-
-<adf-search-date-range-advanced></adf-search-date-range-advanced>
-```
-
-## Class Members
-
-### Properties
-
-| Name         | Type                    | Description                                                                                                                                                                                                                                                |
-|--------------|-------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| field        | string                  | Field to apply the query to. Required value                                                                                                                                                                                                                |
-| maxDate      | string                  | A fixed date (default format: dd-MMM-yy) or the string `"today"` that will set the maximum searchable date. Default is today.                                                                                                                              |
-| dateFormat   | string                  | Date format. Dates used by the datepicker are Javascript Date objects, using [date-fns](https://date-fns.org/v2.30.0/docs/format) for formatting, so you can use any date format supported by the library. Default is 'dd-MMM-yy (sample date - 07-Jun-23) |
-| initialValue | SearchDateRangeAdvanced | Initial value for the component                                                                                                                                                                                                                            |
-
-### Events
-
-| Name                | Type                                                                                           | Description                                                                                                                                    |
-|---------------------|------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------|
-| changed             | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Partial<SearchDateRangeAdvanced>>` | Emitted whenever a change is made in the component values. Emits the changes being made in the component.                                      |
-| valid               | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>`                          | Emitted whenever a change is made in the component values. Emits a flag indicating whether the current state of the component is valid or not. |
-
-## Details
-
-This component lets the user choose a variety of options to perform date related operations.
-
-- Anytime - No date related data will be returned. This option is selected by default
-- In the last - Allows user to perform date related operations over a period of time. The user can select the length of the period from current time, 
-as well as its unit. Currently, 3 units are supported - Days, Weeks, and Months.
-- Between - Allows the user to select a range of dates to perform operations on.

docs/content-services/components/search-date-range-tabbed.component.md

@@ -1,16 +1,15 @@
 ---
-Title: Search date range advanced tabbed component
+Title: Search date range tabbed component
 Added: v6.2.0
 Status: Active
 Last reviewed: 2023-07-10
 ---
 
-# [Search date range advanced tabbed component](../../../lib/content-services/src/lib/search/components/search-date-range-advanced-tabbed/search-date-range-advanced-tabbed.component.ts "Defined in search-date-range-advanced-tabbed.component.ts")
+# [Search date range tabbed component](../../../lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range-tabbed.component.ts "Defined in search-date-range-tabbed.component.ts")
 
-Represents a tabbed advanced date range [search widget](../../../lib/content-services/src/lib/search/models/search-widget.interface.ts) for
-the [Search Filter component](search-filter.component.md).
+Represents a tabbed date range [search widget](../../../lib/content-services/src/lib/search/models/search-widget.interface.ts) for the [Search Filter component](search-filter.component.md).
 
-![Date Range Advanced Widget](../../docassets/images/search-date-range-advanced-tabbed.png)
+![Date Range Tabbed Widget](../../docassets/images/search-date-range-tabbed.png)
 
 ## Basic usage
 
@@ -23,7 +22,7 @@ the [Search Filter component](search-filter.component.md).
                 "name": "Date",
                 "enabled": true,
                 "component": {
-                    "selector": "date-range-advanced",
+                    "selector": "date-range",
                     "settings": {
                         "dateFormat": "dd-MMM-yy",
                         "maxDate": "today",
@@ -51,7 +50,7 @@ the [Search Filter component](search-filter.component.md).
 
 ## Details
 
-This component creates a tabbed layout where each tab consists of the [SearchDateRangeAdvanced](./search-date-range-advanced-tabbed.component.md) component, which allows user to create a query containing multiple date related queries in one go. 
+This component creates a tabbed layout where each tab consists of the [SearchDateRange](./search-date-range.component.md) component, which allows user to create a query containing multiple date related queries in one go. 
 
 See the [Search filter component](search-filter.component.md) for full details of how to use widgets in a search query.
 
@@ -70,7 +69,7 @@ in the `dateFormat` and in the `maxDate` setting:
                 "name": "Date",
                 "enabled": true,
                 "component": {
-                    "selector": "date-range-advanced",
+                    "selector": "date-range",
                     "settings": {
                         "dateFormat": "dd-MMM-yy",
                         "maxDate": "02-May-23",
@@ -87,7 +86,7 @@ in the `dateFormat` and in the `maxDate` setting:
 }
 ```
 
-The [SearchDateRangeAdvanced](./search-date-range-advanced-tabbed.component.md) component allows 3 different kinds of date related operations to be performed.
+The [SearchDateRange](./search-date-range.component.md) component allows 3 different kinds of date related operations to be performed.
 Based on what information is provided to that component, this component will create different kinds of queries -
 
 - Anytime - No date filters are applied on the `field`. This option is selected by default
@@ -105,7 +104,6 @@ The queries generated by this filter when using the 'In the last' or 'Between' o
 - [Search Query Builder service](../services/search-query-builder.service.md)
 - [Search Widget Interface](../interfaces/search-widget.interface.md)
 - [Search check list component](search-check-list.component.md)
-- [Search date range component](search-date-range.component.md)
 - [Search number range component](search-number-range.component.md)
 - [Search radio component](search-radio.component.md)
 - [Search slider component](search-slider.component.md)

docs/content-services/components/search-date-range.component.md

@@ -1,88 +1,49 @@
 ---
 Title: Search date range component
-Added: v2.4.0
+Added: v6.2.0
 Status: Active
-Last reviewed: 2018-06-11
+Last reviewed: 2023-07-10
 ---
 
-# [Search date range component](../../../lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.ts "Defined in search-date-range.component.ts")
+# [Search date range component](../../../lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.ts "Defined in search-date-range.component.ts")
 
-Implements a [search widget](../../../lib/content-services/src/lib/search/search-widget.interface.ts) for the [Search Filter component](search-filter.component.md).
+Represents a date range component for the [SearchDateRangeTabbedComponent](search-date-range-tabbed.component.md).
 
 ![Date Range Widget](../../docassets/images/search-date-range.png)
 
+NOTE: As of v6.5.0, the settings configuration for the original SearchDateRangeComponent have changed. If you have been using this component since
+before that release, please ensure that your component configuration is updated according to the new settings listed below. 
+
 ## Basic usage
 
-```json
-{
-    "search": {
-        "categories": [
-            {
-                "id": "createdDateRange",
-                "name": "Created Date (range)",
-                "enabled": true,
-                "component": {
-                    "selector": "date-range",
-                    "settings": {
-                        "field": "cm:created"
-                    }
-                }
-            }
-        ]
-    }
-}
+```html
+
+<adf-search-date-range></adf-search-date-range>
 ```
 
-### Settings
+## Class Members
 
-| Name | Type | Description |
-| ---- | ---- | ----------- |
-| field | string | Field to apply the query to. Required value |
-| dateFormat | string | Date format. Dates used by the datepicker are [Moment.js](https://momentjs.com/docs/#/parsing/string-format/) instances, so you can use any date format supported by Moment. Default is 'DD/MM/YYYY'. |
-| maxDate | string | A fixed date or the string `"today"` that will set the maximum searchable date. Default is no maximum. |
-| hideDefaultAction | boolean | Show/hide the [widget](../../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) actions. By default is false. |
+### Properties
+
+| Name         | Type            | Description                                                                                                                                                                                                                                                |
+|--------------|-----------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| field        | string          | Field to apply the query to. Required value                                                                                                                                                                                                                |
+| maxDate      | string          | A fixed date (default format: dd-MMM-yy) or the string `"today"` that will set the maximum searchable date. Default is today.                                                                                                                              |
+| dateFormat   | string          | Date format. Dates used by the datepicker are Javascript Date objects, using [date-fns](https://date-fns.org/v2.30.0/docs/format) for formatting, so you can use any date format supported by the library. Default is 'dd-MMM-yy (sample date - 07-Jun-23) |
+| initialValue | SearchDateRange | Initial value for the component                                                                                                                                                                                                                            |
+
+### Events
+
+| Name                | Type                                                                                   | Description                                                                                                                                    |
+|---------------------|----------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------|
+| changed             | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Partial<SearchDateRange>>` | Emitted whenever a change is made in the component values. Emits the changes being made in the component.                                      |
+| valid               | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>`                  | Emitted whenever a change is made in the component values. Emits a flag indicating whether the current state of the component is valid or not. |
 
 ## Details
 
-This component lets the user select a range between two dates based on the particular `field`.
-See the [Search filter component](search-filter.component.md) for full details of how to use widgets
-in a search query.
+This component lets the user choose a variety of options to perform date related operations.
 
-### Custom date format
-
-You can set the date range picker to work with any date format your app requires. You can use
-any date format supported by [Moment.js](https://momentjs.com/docs/#/parsing/string-format/)
-in the `dateFormat` and in the `maxDate` setting:
-
-```json
-{
-    "search": {
-        "categories": [
-            {
-                "id": "createdDateRange",
-                "name": "Created Date (range)",
-                "enabled": true,
-                "component": {
-                    "selector": "date-range",
-                    "settings": {
-                        "field": "cm:created",
-                        "dateFormat": "DD-MMM-YY",
-                        "maxDate": "02-Mar-20"
-                    }
-                }
-            }
-        ]
-    }
-}
-```
-
-## See also
-
--   [Search Configuration Guide](../../user-guide/search-configuration-guide.md)
--   [Search filter chips component](search-filter-chips.component.md)
--   [Search filter component](search-filter.component.md)
--   [Search check list component](search-check-list.component.md)
--   [Search number range component](search-number-range.component.md)
--   [Search radio component](search-radio.component.md)
--   [Search slider component](search-slider.component.md)
--   [Search text component](search-text.component.md)
+- Anytime - No date related data will be returned. This option is selected by default
+- In the last - Allows user to perform date related operations over a period of time. The user can select the length of the period from current time, 
+as well as its unit. Currently, 3 units are supported - Days, Weeks, and Months.
+- Between - Allows the user to select a range of dates to perform operations on.

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

@@ -59,7 +59,7 @@ See the [Search Chip Autocomplete Input component](search-chip-autocomplete-inpu
 -   [Search Chip Autocomplete Input component](search-chip-autocomplete-input.component.md)
 -   [Search Chip Input component](search-chip-input.component.md)
 -   [Search check list component](search-check-list.component.md)
--   [Search date range component](search-date-range.component.md)
+-   [Search date range tabbed component](search-date-range-tabbed.component.md)
 -   [Search number range component](search-number-range.component.md)
 -   [Search radio component](search-radio.component.md)
 -   [Search slider component](search-slider.component.md)

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

@@ -70,7 +70,7 @@ here is the [example configuration](https://github.com/Alfresco/alfresco-ng2-com
 -   [Search Query Builder service](../services/search-query-builder.service.md)
 -   [Search Widget Interface](../interfaces/search-widget.interface.md)
 -   [Search check list component](search-check-list.component.md)
--   [Search date range component](search-date-range.component.md)
+-   [Search date range tabbed component](search-date-range-tabbed.component.md)
 -   [Search number range component](search-number-range.component.md)
 -   [Search radio component](search-radio.component.md)
 -   [Search slider component](search-slider.component.md)

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

@@ -34,7 +34,7 @@ with the name input property being assigned the value of whatever name should be
 - [Search Widget Interface](../interfaces/search-widget.interface.md)
 - [Search check list component](search-check-list.component.md)
 - [Search date range component](search-date-range.component.md)
-- [Search date range advanced component](search-date-range-advanced.component.md)
+- [Search date range component](search-date-range.component.md)
 - [Search number range component](search-number-range.component.md)
 - [Search radio component](search-radio.component.md)
 - [Search slider component](search-slider.component.md)

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

@@ -36,8 +36,8 @@ to build and execute the query.
 -   [Search Sorting Picker Component](search-sorting-picker.component.md)
 -   [Search Widget Interface](../interfaces/search-widget.interface.md)
 -   [Search check list component](search-check-list.component.md)
+-   [Search date range tabbed component](search-date-range-tabbed.component.md)
 -   [Search date range component](search-date-range.component.md)
--   [Search date range advanced component](search-date-range-advanced.component.md)
 -   [Search number range component](search-number-range.component.md)
 -   [Search radio component](search-radio.component.md)
 -   [Search slider component](search-slider.component.md)

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

@@ -52,7 +52,7 @@ This component lets the user provide logical conditions to apply to each `field`
 -   [Search Query Builder service](../services/search-query-builder.service.md)
 -   [Search Widget Interface](../interfaces/search-widget.interface.md)
 -   [Search check list component](search-check-list.component.md)
--   [Search date range component](search-date-range.component.md)
+-   [Search date range tabbed component](search-date-range-tabbed.component.md)
 -   [Search number range component](search-number-range.component.md)
 -   [Search radio component](search-radio.component.md)
 -   [Search slider component](search-slider.component.md)

docs/content-services/components/search-number-range.component.md

@@ -75,7 +75,7 @@ cm:content.size:[0 TO 100]
 -   [Search filter chips component](search-filter-chips.component.md)
 -   [Search filter component](search-filter.component.md)
 -   [Search check list component](search-check-list.component.md)
--   [Search date range component](search-date-range.component.md)
+-   [Search date range tabbed component](search-date-range-tabbed.component.md)
 -   [Search number range component](search-number-range.component.md)
 -   [Search radio component](search-radio.component.md)
 -   [Search slider component](search-slider.component.md)

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

@@ -54,7 +54,7 @@ Allows to search by file size and type.
 -   [Search Query Builder service](../services/search-query-builder.service.md)
 -   [Search Widget Interface](../interfaces/search-widget.interface.md)
 -   [Search check list component](search-check-list.component.md)
--   [Search date range component](search-date-range.component.md)
+-   [Search date range tabbed component](search-date-range-tabbed.component.md)
 -   [Search number range component](search-number-range.component.md)
 -   [Search radio component](search-radio.component.md)
 -   [Search slider component](search-slider.component.md)

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

@@ -66,7 +66,7 @@ buttons as appropriate.
 -   [Search filter chips component](search-filter-chips.component.md)
 -   [Search filter component](search-filter.component.md)
 -   [Search check list component](search-check-list.component.md)
--   [Search date range component](search-date-range.component.md)
+-   [Search date range tabbed component](search-date-range-tabbed.component.md)
 -   [Search number range component](search-number-range.component.md)
 -   [Search slider component](search-slider.component.md)
 -   [Search text component](search-text.component.md)

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

@@ -73,7 +73,7 @@ or zero and the corresponsing query fragment is removed from the query.
 -   [Search filter chips component](search-filter-chips.component.md)
 -   [Search filter component](search-filter.component.md)
 -   [Search check list component](search-check-list.component.md)
--   [Search date range component](search-date-range.component.md)
+-   [Search date range tabbed component](search-date-range-tabbed.component.md)
 -   [Search number range component](search-number-range.component.md)
 -   [Search radio component](search-radio.component.md)
 -   [Search text component](search-text.component.md)