lock update

* [AAE-6360] added config and logo files to process cloud and stories lib

* [AAE-6360] fixed build by adding unimplemented methods in form cloud mock service

* [AAE-6360] added config files for core and content services

* [AAE-6360] fixed bimport to correct build content-services storybook

.github/dependabot.yml

@@ -3,7 +3,8 @@ updates:
 - package-ecosystem: npm
   directory: "/"
   schedule:
-    interval: daily
+    interval: "weekly"
+    day: "sunday"
   open-pull-requests-limit: 5
   target-branch: develop
   ignore:

.gitignore

@@ -9,6 +9,7 @@ workspace.xml
 dist/
 e2e/.env.cloud
 tmp
+temp
 e2e-output*/
 /e2e/downloads/
 *.npmrc
@@ -27,3 +28,5 @@ out-tsc
 !/.protractor-smartrunner/
 /reports/
 e2e-result-*
+licenses.txt
+.DS_Store

.storybook/alfrescoTheme.js

@@ -0,0 +1,8 @@
+import { create } from '@storybook/theming';
+
+export default create({
+  base: 'light',
+  brandTitle: 'Hyland | Alfresco Storybook App',
+  brandUrl: 'https://www.alfresco.com/',
+  brandImage: '/assets/storybook-logo.png',
+});

.storybook/main.js

@@ -0,0 +1,11 @@
+module.exports = {
+    stories: [],
+    addons: ['@storybook/addon-essentials'],
+    // uncomment the property below if you want to apply some webpack config globally
+    // webpackFinal: async (config, { configType }) => {
+    //   // Make whatever fine-grained changes you need that should apply to all storybook configs
+
+    //   // Return the altered config
+    //   return config;
+    // },
+};

.storybook/tsconfig.json

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

.storybook/webpack.config.js

@@ -0,0 +1,12 @@
+/**
+ * Export a function. Accept the base config as the only param.
+ * @param {Object} options
+ * @param {Required<import('webpack').Configuration>} options.config
+ * @param {'DEVELOPMENT' | 'PRODUCTION'} options.mode - change the build configuration. 'PRODUCTION' is used when building the static version of storybook.
+ */
+module.exports = async ({ config, mode }) => {
+  // Make whatever fine-grained changes you need
+
+  // Return the altered config
+  return config;
+};

.travis.yml

@@ -6,13 +6,17 @@ language: node_js
 arch: arm64-graviton2
 dist: bionic
 node_js:
-  - '12.18.4'
+  - '14'
 
 before_install: . ./scripts/ci/job_hooks/before_install.sh
 install: ./scripts/ci/job_hooks/install.sh
 
 env:
     global:
+        # REPOSITORY
+        - REPO_OWNER="Alfresco"
+        - REPO_NAME="alfresco-ng2-components"
+
         - S3_DBP_PATH="s3://alfresco-travis-builds/adf"
         - DEMO_SHELL_DIR="./dist/demo-shell"
         - BUILT_LIBS_DIR="./lib/dist"
@@ -21,9 +25,15 @@ env:
         #E2E VARIABLES
         - SAVE_SCREENSHOT=true
         - REDIRECT_URI=/
-        - REDIRECT_URI_LOGOUT=/logout/
         - BROWSER_RUN=true
         - MAXINSTANCES=2
+        - PROXY_HOST_ADF=$E2E_HOST
+        - HOST_SSO=$HOST_SSO
+        - USERNAME_ADF=$E2E_USERNAME
+        - PASSWORD_ADF=$E2E_PASSWORD
+        - IDENTITY_ADMIN_EMAIL=$E2E_ADMIN_EMAIL_IDENTITY
+        - IDENTITY_ADMIN_PASSWORD=$E2E_ADMIN_PASSWORD_IDENTITY
+        - URL_HOST_ADF="http://localhost:4200"
 
 branches:
   only:
@@ -34,21 +44,24 @@ branches:
   - /.*beta.*/
 
 stages:
+  - name: Prerequisite
   - name: Setup
-  - name: "Lint & Build Dist & Release"
+  - name: "Build lib"
     if: tag IS blank
-  - name: Trigger Alpha ADF child build
-    if: (branch = develop AND type = push) OR type = api
-  - name: Check bundle
+  - name: "Check bundle"
     if: type = push AND tag IS blank
-  - name: Unit test
-    if: (branch != master AND type != cron AND tag IS blank) OR type = api
-  - name: e2e Test
-    if: (branch != master AND type != cron AND tag IS blank) OR type = api
-  - name: Trigger Beta ADF child build
-    if: tag =~ .*beta.*
-  - name: Release tag
-    if: type = cron OR branch = master
+  - name: "Trigger Alpha ADF child build"
+    if: branch = develop AND (type = cron || type = api)
+  - name: "Build Demo shell"
+    if: tag IS blank
+  - name: "Unit test Lib"
+    if: type = pull_request || (type = cron || type = api)
+  - name: "e2e Test"
+    if: type = pull_request || (type = cron || type = api)
+  - name: "Release tag"
+    if: branch = master
+  - name: "Deprecate develop builds"
+    if: branch = master
 
 addons:
     chrome: stable
@@ -59,6 +72,15 @@ services:
 
 jobs:
     include:
+        # Big Bang ===================
+        - stage: Prerequisite
+          name: "Before anything unnece$$ary happens..."
+          if: type == pull_request
+          language: python
+          python: 3.8
+          install: echo "no install here"
+          script: ./scripts/ci/jobs/dbpci-build-guard-check $TRAVIS_PULL_REQUEST || exit 1
+
         # Setup ======================
         - stage: Setup
           name: "Node modules cache preparation"
@@ -71,134 +93,350 @@ jobs:
             use: node_modules_cache
 
         # Run Only for any PR
-        - stage: "Lint & Build Dist & Release"
-          name:  Build
+        - stage: "Build lib"
+          name:  "Lib::Build"
           script:
-            - ./scripts/travis/build/build.sh
-            - ./scripts/travis/release/release-npm.sh
-            - ./scripts/travis/release/release-docker.sh
+            - ./scripts/travis/build/build-libs.sh || travis_terminate 1
+            - ./scripts/travis/release/release-npm.sh || travis_terminate 1
           workspaces:
             create:
-              name: built_artefacts_cache
+              name: built_libs_cache
               paths:
-                - "$DEMO_SHELL_DIR"
                 - "$BUILT_LIBS_DIR"
+                - "$NODE_MODULES_DIR"
             use: node_modules_cache
 
-        - stage: "Lint & Build Dist & Release"
+        - stage: "Build lib"
           name: "Lint"
           script: ./scripts/lint.sh
           workspaces:
-            use: node_modules_cache
+              use: node_modules_cache
 
-        - stage: Unit test
-          name: Unit test content
+        - stage: "Build Demo shell"
+          name:  "Demo Shell & Storybook :Build && dockerize"
+          script:
+              # Build Demo shell & Storybook for production docker"
+              - NODE_OPTIONS=--max_old_space_size=8192 nx build demoshell --configuration production
+              - NODE_OPTIONS=--max_old_space_size=8192 nx run stories:build-storybook --configuration ci
+              - ./scripts/travis/release/release-docker.sh
+          workspaces:
+              create:
+                  name: built_demo_shell_cache
+                  paths:
+                      - "$DEMO_SHELL_DIR"
+              use:
+                  - built_libs_cache
+
+        - stage: "Unit test Lib"
+          name: "content::unit"
           script:  ./scripts/travis/unit-test/content.sh
           workspaces:
-            use: node_modules_cache
+            use: built_libs_cache
 
-        - stage: Unit test
-          name: Unit test core extension demo
+        - stage: "Unit test Lib"
+          name: "core-extension::unit"
           script: ./scripts/travis/unit-test/core-extension.sh
           workspaces:
-            use: node_modules_cache
+            use: built_libs_cache
 
-        - stage: Unit test
-          name: Unit test process insights
+        - stage: "Unit test Lib"
+          name: "process-insights::unit"
           script: ./scripts/travis/unit-test/process.sh
           workspaces:
-            use: node_modules_cache
+            use: built_libs_cache
 
-        - stage: Unit test
-          name: Unit test process-cloud
+        - stage: "Unit test Lib"
+          name: "process-cloud::unit"
           script: ./scripts/travis/unit-test/process-cloud.sh
           workspaces:
-            use: node_modules_cache
+            use: built_libs_cache
 
-        - stage: Trigger Alpha ADF child build
-          name: Trigger Alpha ADF child build
+        - stage: "Trigger Alpha ADF child build"
+          name: "Trigger Alpha ADF child build"
           script: ./scripts/travis/update/update-project.sh -p $TRAVIS_BUILD_NUMBER -t $GITHUB_TOKEN -v alpha
           workspaces:
-            use: node_modules_cache
+            use: built_libs_cache
 
-        - stage: Trigger Beta ADF child build
-          name: Trigger Beta ADF child build
-          script: ./scripts/travis/update/update-project.sh -p $TRAVIS_BUILD_NUMBER -t $GITHUB_TOKEN -v beta
-          workspaces:
-            use: node_modules_cache
-
-        - stage: Release tag
+        - stage: "Release tag"
           script: ./scripts/travis/release/git-tag.sh
 
-        - stage: e2e Test
-          name: core
+        - stage: "Deprecate develop builds"
+          script:
+              - ADF_VERSION=$(npm view @alfresco/adf-core@${TAG_NPM} version)
+              - ./scripts/travis/release/deprecate-develop-build.sh -v ${ADF_VERSION}
+
+        - stage: "e2e Test"
+          name: "Core"
           before_script:
             - ./scripts/ci/job_hooks/before_e2e.sh
             - ./scripts/ci/check-env/check-cs-env.sh || travis_terminate 1
             - ./scripts/ci/check-env/check-ps-env.sh || travis_terminate 1
-          script: ./scripts/travis/e2e/core-e2e.sh
+          script: ./scripts/travis/e2e/e2e.sh
           after_script: ./scripts/ci/job_hooks/after_e2e.sh
           workspaces:
             use:
-              - node_modules_cache
-              - built_artefacts_cache
+              - built_libs_cache
+              - built_demo_shell_cache
+          env:
+              - FOLDER="core"
+              - PROVIDER='ALL'
+              - AUTH_TYPE='OAUTH'
 
-        - stage: e2e Test
-          name:  content
+        - stage: "e2e Test"
+          name:  "Content: Components"
           before_script:
               - ./scripts/ci/job_hooks/before_e2e.sh
               - ./scripts/ci/check-env/check-cs-env.sh || travis_terminate 1
-          script: ./scripts/travis/e2e/content-services-e2e.sh
+          script: ./scripts/travis/e2e/e2e.sh
           after_script: ./scripts/ci/job_hooks/after_e2e.sh
           workspaces:
             use:
-              - node_modules_cache
-              - built_artefacts_cache
+              - built_libs_cache
+              - built_demo_shell_cache
+          env:
+              - FOLDER="content-services/components"
+              - PROVIDER="ECM"
+              - AUTH_TYPE="BASIC"
 
-        - stage: e2e Test
-          name:  search
+        - stage: "e2e Test"
+          name:  "Content: Directives"
           before_script:
               - ./scripts/ci/job_hooks/before_e2e.sh
               - ./scripts/ci/check-env/check-cs-env.sh || travis_terminate 1
-          script: ./scripts/travis/e2e/search-e2e.sh
+          script: ./scripts/travis/e2e/e2e.sh
           after_script: ./scripts/ci/job_hooks/after_e2e.sh
           workspaces:
             use:
-              - node_modules_cache
-              - built_artefacts_cache
+              - built_libs_cache
+              - built_demo_shell_cache
+          env:
+              - FOLDER="content-services/directives"
+              - PROVIDER="ECM"
+              - AUTH_TYPE="BASIC"
 
-        - stage: e2e Test
-          name: process
+        - stage: "e2e Test"
+          name:  "Content: Document List"
+          before_script:
+              - ./scripts/ci/job_hooks/before_e2e.sh
+              - ./scripts/ci/check-env/check-cs-env.sh || travis_terminate 1
+          script: ./scripts/travis/e2e/e2e.sh
+          after_script: ./scripts/ci/job_hooks/after_e2e.sh
+          workspaces:
+            use:
+              - built_libs_cache
+              - built_demo_shell_cache
+          env:
+              - FOLDER="content-services/document-list"
+              - PROVIDER="ECM"
+              - AUTH_TYPE="BASIC"
+
+        - stage: "e2e Test"
+          name:  "Content: Metadata"
+          before_script:
+              - ./scripts/ci/job_hooks/before_e2e.sh
+              - ./scripts/ci/check-env/check-cs-env.sh || travis_terminate 1
+          script: ./scripts/travis/e2e/e2e.sh
+          after_script: ./scripts/ci/job_hooks/after_e2e.sh
+          workspaces:
+            use:
+              - built_libs_cache
+              - built_demo_shell_cache
+          env:
+              - FOLDER="content-services/metadata"
+              - PROVIDER="ECM"
+              - AUTH_TYPE="BASIC"
+
+        - stage: "e2e Test"
+          name:  "Content: Upload and Versioning"
+          before_script:
+              - ./scripts/ci/job_hooks/before_e2e.sh
+              - ./scripts/ci/check-env/check-cs-env.sh || travis_terminate 1
+          script: ./scripts/travis/e2e/e2e.sh
+          after_script: ./scripts/ci/job_hooks/after_e2e.sh
+          workspaces:
+            use:
+              - built_libs_cache
+              - built_demo_shell_cache
+          env:
+              - FOLDER="content-services/upload"
+              - PROVIDER="ECM"
+              - AUTH_TYPE="BASIC"
+
+        - stage: "e2e Test"
+          name:  "Search"
+          before_script:
+              - ./scripts/ci/job_hooks/before_e2e.sh
+              - ./scripts/ci/check-env/check-cs-env.sh || travis_terminate 1
+          script: ./scripts/travis/e2e/e2e.sh
+          after_script: ./scripts/ci/job_hooks/after_e2e.sh
+          workspaces:
+            use:
+              - built_libs_cache
+              - built_demo_shell_cache
+          env:
+            - FOLDER="search"
+            - PROVIDER="ECM"
+            - AUTH_TYPE="BASIC"
+
+        - stage: "e2e Test"
+          name: "Process: Form"
           before_script:
               - ./scripts/ci/job_hooks/before_e2e.sh || travis_terminate 1
               - ./scripts/ci/check-env/check-ps-env.sh || travis_terminate 1
               - ./scripts/ci/check-env/check-external-cs-env.sh || travis_terminate 1
-          script: ./scripts/travis/e2e/process-services-e2e.sh
+          script: ./scripts/travis/e2e/e2e.sh
           after_script: ./scripts/ci/job_hooks/after_e2e.sh
           workspaces:
             use:
-              - node_modules_cache
-              - built_artefacts_cache
+              - built_libs_cache
+              - built_demo_shell_cache
+          env:
+              - FOLDER="process-services/form"
+              - PROVIDER="BPM"
+              - AUTH_TYPE="OAUTH"
 
-        - stage: e2e Test
-          name: process Cloud
+        - stage: "e2e Test"
+          name: "Process: Process"
+          before_script:
+              - ./scripts/ci/job_hooks/before_e2e.sh || travis_terminate 1
+              - ./scripts/ci/check-env/check-ps-env.sh || travis_terminate 1
+              - ./scripts/ci/check-env/check-external-cs-env.sh || travis_terminate 1
+          script: ./scripts/travis/e2e/e2e.sh
+          after_script: ./scripts/ci/job_hooks/after_e2e.sh
+          workspaces:
+            use:
+              - built_libs_cache
+              - built_demo_shell_cache
+          env:
+              - FOLDER="process-services/process"
+              - PROVIDER="BPM"
+              - AUTH_TYPE="OAUTH"
+
+        - stage: "e2e Test"
+          name: "Process: Tasks"
+          before_script:
+              - ./scripts/ci/job_hooks/before_e2e.sh || travis_terminate 1
+              - ./scripts/ci/check-env/check-ps-env.sh || travis_terminate 1
+              - ./scripts/ci/check-env/check-external-cs-env.sh || travis_terminate 1
+          script: ./scripts/travis/e2e/e2e.sh
+          after_script: ./scripts/ci/job_hooks/after_e2e.sh
+          workspaces:
+            use:
+              - built_libs_cache
+              - built_demo_shell_cache
+          env:
+              - FOLDER="process-services/tasks"
+              - PROVIDER="BPM"
+              - AUTH_TYPE="OAUTH"
+
+        - stage: "e2e Test"
+          name: "Process: Widgets"
+          before_script:
+              - ./scripts/ci/job_hooks/before_e2e.sh || travis_terminate 1
+              - ./scripts/ci/check-env/check-ps-env.sh || travis_terminate 1
+              - ./scripts/ci/check-env/check-external-cs-env.sh || travis_terminate 1
+          script: ./scripts/travis/e2e/e2e.sh
+          after_script: ./scripts/ci/job_hooks/after_e2e.sh
+          workspaces:
+            use:
+              - built_libs_cache
+              - built_demo_shell_cache
+          env:
+              - FOLDER="process-services/widgets"
+              - PROVIDER="BPM"
+              - AUTH_TYPE="OAUTH"
+
+        - stage: "e2e Test"
+          name: "Process Cloud : Form"
           before_script:
               - ./scripts/ci/job_hooks/before_e2e.sh
               - ./scripts/ci/check-env/check-cs-env.sh || travis_terminate 1
               - ./scripts/ci/check-env/check-ps-cloud-env.sh || travis_terminate 1
-          script: ./scripts/travis/e2e/process-services-cloud-e2e.sh
+          script: ./scripts/travis/e2e/e2e.sh
           after_script: ./scripts/ci/job_hooks/after_e2e.sh
           workspaces:
             use:
-              - node_modules_cache
-              - built_artefacts_cache
+              - built_libs_cache
+              - built_demo_shell_cache
+          env:
+              - FOLDER="process-services-cloud/form-field"
+              - PROVIDER="ALL"
+              - AUTH_TYPE="OAUTH"
+
+        - stage: "e2e Test"
+          name: "Process Cloud : People"
+          before_script:
+              - ./scripts/ci/job_hooks/before_e2e.sh
+              - ./scripts/ci/check-env/check-cs-env.sh || travis_terminate 1
+              - ./scripts/ci/check-env/check-ps-cloud-env.sh || travis_terminate 1
+          script: ./scripts/travis/e2e/e2e.sh
+          after_script: ./scripts/ci/job_hooks/after_e2e.sh
+          workspaces:
+            use:
+              - built_libs_cache
+              - built_demo_shell_cache
+          env:
+              - FOLDER="process-services-cloud/people"
+              - PROVIDER="ALL"
+              - AUTH_TYPE="OAUTH"
+
+        - stage: "e2e Test"
+          name: "Process Cloud : Process"
+          before_script:
+              - ./scripts/ci/job_hooks/before_e2e.sh
+              - ./scripts/ci/check-env/check-cs-env.sh || travis_terminate 1
+              - ./scripts/ci/check-env/check-ps-cloud-env.sh || travis_terminate 1
+          script: ./scripts/travis/e2e/e2e.sh
+          after_script: ./scripts/ci/job_hooks/after_e2e.sh
+          workspaces:
+            use:
+              - built_libs_cache
+              - built_demo_shell_cache
+          env:
+              - FOLDER="process-services-cloud/process"
+              - PROVIDER="ALL"
+              - AUTH_TYPE="OAUTH"
+
+        - stage: "e2e Test"
+          name: "Process Cloud : Start Task"
+          before_script:
+              - ./scripts/ci/job_hooks/before_e2e.sh
+              - ./scripts/ci/check-env/check-cs-env.sh || travis_terminate 1
+              - ./scripts/ci/check-env/check-ps-cloud-env.sh || travis_terminate 1
+          script: ./scripts/travis/e2e/e2e.sh
+          after_script: ./scripts/ci/job_hooks/after_e2e.sh
+          workspaces:
+            use:
+              - built_libs_cache
+              - built_demo_shell_cache
+          env:
+              - FOLDER="process-services-cloud/start-task"
+              - PROVIDER="ALL"
+              - AUTH_TYPE="OAUTH"
+
+        - stage: "e2e Test"
+          name: "Process Cloud : Tasks List"
+          before_script:
+              - ./scripts/ci/job_hooks/before_e2e.sh
+              - ./scripts/ci/check-env/check-cs-env.sh || travis_terminate 1
+              - ./scripts/ci/check-env/check-ps-cloud-env.sh || travis_terminate 1
+          script: ./scripts/travis/e2e/e2e.sh
+          after_script: ./scripts/ci/job_hooks/after_e2e.sh
+          workspaces:
+            use:
+              - built_libs_cache
+              - built_demo_shell_cache
+          env:
+             - FOLDER="process-services-cloud/task-list"
+             - PROVIDER="ALL"
+             - AUTH_TYPE="OAUTH"
 
         - stage: Check bundle
           script:
           - ADF_VERSION=$(npm view @alfresco/adf-core@${TAG_NPM} version)
           - ./scripts/travis/build/npm-check-bundles.sh -v ${ADF_VERSION}
           workspaces:
-            use: node_modules_cache
+            use: built_libs_cache
 
 notifications:
   slack:

Dockerfile

@@ -10,7 +10,11 @@ RUN mkdir -p ./licenses && \
 
 # 2. Generate image
 
-FROM nginxinc/nginx-unprivileged:1.19.3-alpine
+FROM nginxinc/nginx-unprivileged:1.21-alpine
+
+USER root
+RUN apk update && apk upgrade
+USER 101
 
 ARG PROJECT_NAME
 

README.md

@@ -9,9 +9,6 @@
 [![Join the chat at https://gitter.im/Alfresco/alfresco-ng2-components](https://badges.gitter.im/Alfresco/alfresco-ng2-components.svg)](https://gitter.im/Alfresco/alfresco-ng2-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
 <p>
-  <a href='https://codecov.io/gh/Alfresco/alfresco-ng2-components'>
-    <img src='http://img.shields.io/codecov/c/github/Alfresco/alfresco-ng2-components/master.svg?maxAge=2592000' alt='Coverage Status' />
-  </a>
   <a href='https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE'>
      <img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
   </a>
@@ -33,6 +30,17 @@ You can find the sources for all ADF components in the
 Full documentation for all components is available at the
 [ADF Component Catalog](https://alfresco.github.io/adf-component-catalog/).
 
+## Libraries
+
+ADF Libraries list:
+- [Content services](https://github.com/Alfresco/alfresco-ng2-components/tree/develop/lib/content-services)
+- [Core](https://github.com/Alfresco/alfresco-ng2-components/tree/develop/lib/core)
+- [Extensions](https://github.com/Alfresco/alfresco-ng2-components/tree/develop/lib/extensions)
+- [Insights](https://github.com/Alfresco/alfresco-ng2-components/tree/develop/lib/insights)
+- [Process Service Cloud](https://github.com/Alfresco/alfresco-ng2-components/tree/develop/lib/process-services-cloud)
+- [Process service](https://github.com/Alfresco/alfresco-ng2-components/tree/develop/lib/process-services)
+- [Stories](https://github.com/Alfresco/alfresco-ng2-components/tree/develop/lib/stories) 
+    
 ## Demo Application
 
 A separate application showcasing integration of components can be found

angular.json

@@ -30,7 +30,9 @@
             "tsConfig": "tsconfig.dev.json",
             "polyfills": "demo-shell/src/polyfills.ts",
             "stylePreprocessorOptions": {
-              "includePaths": ["lib"]
+              "includePaths": [
+                "lib"
+              ]
             },
             "assets": [
               "demo-shell/src/assets",
@@ -121,7 +123,8 @@
               "demo-shell/src/assets/fonts/material-icons/material-icons.css",
               "demo-shell/src/assets/fonts/muli/muli.css",
               "demo-shell/src/styles.scss",
-              "demo-shell/src/custom-style-dev.scss"
+              "demo-shell/src/custom-style-dev.scss",
+              "node_modules/cropperjs/dist/cropper.min.css"
             ],
             "scripts": [
               "node_modules/pdfjs-dist/build/pdf.js",
@@ -162,6 +165,16 @@
                   "maximumWarning": "6kb"
                 }
               ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": true,
+              "buildOptimizer": true,
+              "verbose": false,
               "fileReplacements": [
                 {
                   "replace": "demo-shell/src/environments/environment.ts",
@@ -298,8 +311,14 @@
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": ["tsconfig.dev.json"],
-            "exclude": ["**/node_modules/**/*", "package.json"]
+            "tsConfig": [
+              "tsconfig.dev.json"
+            ],
+            "exclude": [
+              "**/node_modules/**/*",
+              "**/lib/**/*",
+              "package.json"
+            ]
           }
         }
       }
@@ -332,8 +351,13 @@
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": ["./e2e/tsconfig.e2e.json"],
-            "exclude": ["**/node_modules/**/*"]
+            "tsConfig": [
+              "./e2e/tsconfig.e2e.json"
+            ],
+            "exclude": [
+              "**/lib/**/*",
+              "**/node_modules/**/*"
+            ]
           }
         }
       }
@@ -374,7 +398,47 @@
               "lib/core/tsconfig.lib.json",
               "lib/core/tsconfig.spec.json"
             ],
-            "exclude": ["**/node_modules/**"]
+            "exclude": [
+              "**/lib/extensions/**/*",
+              "**/lib/content-services/**/*",
+              "**/lib/insights/**/*",
+              "**/lib/process-services-cloud/**/*",
+              "**/lib/process-services/**/*",
+              "**/node_modules/**"
+            ]
+          }
+        },
+        "storybook": {
+          "builder": "@nrwl/storybook:storybook",
+          "options": {
+            "uiFramework": "@storybook/angular",
+            "port": 4400,
+            "config": {
+              "configFolder": "lib/core/.storybook"
+            }
+          },
+          "configurations": {
+            "ci": {
+              "quiet": true
+            }
+          }
+        },
+        "build-storybook": {
+          "builder": "@nrwl/storybook:build",
+          "outputs": [
+            "{options.outputPath}"
+          ],
+          "options": {
+            "uiFramework": "@storybook/angular",
+            "outputPath": "dist/storybook/core",
+            "config": {
+              "configFolder": "lib/core/.storybook"
+            }
+          },
+          "configurations": {
+            "ci": {
+              "quiet": true
+            }
           }
         }
       }
@@ -415,7 +479,47 @@
               "lib/content-services/tsconfig.lib.json",
               "lib/content-services/tsconfig.spec.json"
             ],
-            "exclude": ["**/node_modules/**"]
+            "exclude": [
+              "**/lib/extensions/**/*",
+              "**/lib/core/**/*",
+              "**/lib/insights/**/*",
+              "**/lib/process-services-cloud/**/*",
+              "**/lib/process-services/**/*",
+              "**/node_modules/**"
+            ]
+          }
+        },
+        "storybook": {
+          "builder": "@nrwl/storybook:storybook",
+          "options": {
+            "uiFramework": "@storybook/angular",
+            "port": 4400,
+            "config": {
+              "configFolder": "lib/content-services/.storybook"
+            }
+          },
+          "configurations": {
+            "ci": {
+              "quiet": true
+            }
+          }
+        },
+        "build-storybook": {
+          "builder": "@nrwl/storybook:build",
+          "outputs": [
+            "{options.outputPath}"
+          ],
+          "options": {
+            "uiFramework": "@storybook/angular",
+            "outputPath": "dist/storybook/content-services",
+            "config": {
+              "configFolder": "lib/content-services/.storybook"
+            }
+          },
+          "configurations": {
+            "ci": {
+              "quiet": true
+            }
           }
         }
       }
@@ -456,7 +560,14 @@
               "lib/process-services/tsconfig.lib.json",
               "lib/process-services/tsconfig.spec.json"
             ],
-            "exclude": ["**/node_modules/**"]
+            "exclude": [
+              "**/lib/extensions/**/*",
+              "**/lib/core/**/*",
+              "**/lib/insights/**/*",
+              "**/lib/process-services-cloud/**/*",
+              "**/lib/content-services/**/*",
+              "**/node_modules/**"
+            ]
           }
         }
       }
@@ -497,7 +608,47 @@
               "lib/process-services-cloud/tsconfig.lib.json",
               "lib/process-services-cloud/tsconfig.spec.json"
             ],
-            "exclude": ["**/node_modules/**"]
+            "exclude": [
+              "**/lib/extensions/**/*",
+              "**/lib/core/**/*",
+              "**/lib/insights/**/*",
+              "**/lib/process-services/**/*",
+              "**/lib/content-services/**/*",
+              "**/node_modules/**"
+            ]
+          }
+        },
+        "storybook": {
+          "builder": "@nrwl/storybook:storybook",
+          "options": {
+            "uiFramework": "@storybook/angular",
+            "port": 4400,
+            "config": {
+              "configFolder": "lib/process-services-cloud/.storybook"
+            }
+          },
+          "configurations": {
+            "ci": {
+              "quiet": true
+            }
+          }
+        },
+        "build-storybook": {
+          "builder": "@nrwl/storybook:build",
+          "outputs": [
+            "{options.outputPath}"
+          ],
+          "options": {
+            "uiFramework": "@storybook/angular",
+            "outputPath": "dist/storybook/process-services-cloud",
+            "config": {
+              "configFolder": "lib/process-services-cloud/.storybook"
+            }
+          },
+          "configurations": {
+            "ci": {
+              "quiet": true
+            }
           }
         }
       }
@@ -538,7 +689,14 @@
               "lib/insights/tsconfig.lib.json",
               "lib/insights/tsconfig.spec.json"
             ],
-            "exclude": ["**/node_modules/**"]
+            "exclude": [
+              "**/lib/extensions/**/*",
+              "**/lib/core/**/*",
+              "**/lib/process-services-cloud/**/*",
+              "**/lib/process-services/**/*",
+              "**/lib/content-services/**/*",
+              "**/node_modules/**"
+            ]
           }
         }
       }
@@ -578,7 +736,14 @@
               "lib/extensions/tsconfig.lib.json",
               "lib/extensions/tsconfig.spec.json"
             ],
-            "exclude": ["**/node_modules/**"]
+            "exclude": [
+              "**/lib/core/**/*",
+              "**/lib/content-services/**/*",
+              "**/lib/process-services/**/*",
+              "**/lib/process-services-cloud/**/*",
+              "**/lib/insights/**/*",
+              "**/node_modules/**"
+            ]
           }
         }
       }
@@ -608,7 +773,14 @@
               "lib/testing/tsconfig.lib.json",
               "lib/testing/tsconfig.spec.json"
             ],
-            "exclude": ["**/node_modules/**"]
+            "exclude": [
+              "**/lib/core/**/*",
+              "**/lib/content-services/**/*",
+              "**/lib/process-services/**/*",
+              "**/lib/process-services-cloud/**/*",
+              "**/lib/insight/**/*",
+              "**/node_modules/**"
+            ]
           }
         }
       }
@@ -631,7 +803,50 @@
           }
         }
       }
+    },
+    "stories": {
+      "root": "lib/stories",
+      "sourceRoot": "lib/stories",
+      "projectType": "library",
+      "architect": {
+        "storybook": {
+          "builder": "@nrwl/storybook:storybook",
+          "options": {
+            "uiFramework": "@storybook/angular",
+            "port": 4400,
+            "config": {
+              "configFolder": "lib/stories/.storybook"
+            }
+          },
+          "configurations": {
+            "ci": {
+              "quiet": true
+            }
+          }
+        },
+        "build-storybook": {
+          "builder": "@nrwl/storybook:build",
+          "outputs": [
+            "{options.outputPath}"
+          ],
+          "options": {
+            "uiFramework": "@storybook/angular",
+            "outputPath": "dist/storybook/stories",
+            "config": {
+              "configFolder": "lib/stories/.storybook"
+            }
+          },
+          "configurations": {
+            "ci": {
+              "quiet": true
+            }
+          }
+        }
+      }
     }
   },
-  "defaultProject": "demoshell"
+  "defaultProject": "demoshell",
+  "cli": {
+    "analytics": "0ce5075f-0835-439a-bebe-7c41750179a6"
+  }
 }

demo-shell/package.json

@@ -1,7 +1,7 @@
 {
   "name": "Alfresco-ADF-Angular-Demo",
   "description": "Demo shell for Alfresco Angular components",
-  "version": "4.3.0",
+  "version": "4.7.0",
   "author": "Alfresco Software, Ltd.",
   "repository": {
     "type": "git",

demo-shell/resources/i18n/ar.json

@@ -55,6 +55,7 @@
   },
   "APP_LAYOUT": {
     "APP": "تطبيق",
+    "HEADER_TEXT_COLOR": "لون نص العنوان",
     "APP_NAME": "تطبيق ADF التوضيحي",
     "FILTERED_SEARCH": "عنوان عامل التصفية",
     "HOME": "رئيسية",
@@ -219,7 +220,8 @@
   "NOTIFICATIONS": {
     "TASK_ASSIGNED": "تم تعيين المهمة {{taskName}} إلى {{assignee}}",
     "PROCESS_STARTED": "تم بدء عملية {{processName}}",
-    "TASK_UPDATED": "تم تحديث تفاصيل مهمة {{taskName}}"
+    "TASK_UPDATED": "تم تحديث تفاصيل مهمة {{taskName}}",
+    "TASK_CREATED": "تم إنشاء المهمة {{TaskName}}"
   },
   "FORM-LOADING": {
     "FORM_DATA": "بيانات النموذج",
@@ -348,5 +350,6 @@
       "PROCESS_ID": "معرّف مثيل المعالجة",
       "ACTION_TYPE": "نوع الإجراء"
     }
-  }
+  },
+  "DEFAULT_SEARCH": "افتراضي"
 }

demo-shell/resources/i18n/cs.json

@@ -55,6 +55,7 @@
   },
   "APP_LAYOUT": {
     "APP": "Aplikace",
+    "HEADER_TEXT_COLOR": "Barva textu záhlaví",
     "APP_NAME": "Ukázková aplikace ADF",
     "FILTERED_SEARCH": "Záhlaví filtru",
     "HOME": "Domů",
@@ -219,7 +220,8 @@
   "NOTIFICATIONS": {
     "TASK_ASSIGNED": "Úkol {{taskName}} byl přiřazen uživateli {{assignee}}",
     "PROCESS_STARTED": "Byl spuštěn proces {{processName}}",
-    "TASK_UPDATED": "Byly aktualizovány podrobnosti úkolu {{taskName}}"
+    "TASK_UPDATED": "Byly aktualizovány podrobnosti úkolu {{taskName}}",
+    "TASK_CREATED": "Úkol {{taskName}} byl vytvořen"
   },
   "FORM-LOADING": {
     "FORM_DATA": "Data formuláře",
@@ -251,11 +253,11 @@
       "CREATED_THIS_YEAR": "1.Vytvořeno tento rok",
       "MIMETYPE": "2.Typ: HTML",
       "XTRASMALL": "3.Velikost: extra malé",
-      "SMALL": "3.Velikost: malé",
-      "MEDIUM": "3.Velikost: střední",
-      "LARGE": "3.Velikost: velké",
-      "XTRALARGE": "3.Velikost: extra velké",
-      "XXTRALARGE": "3.Velikost: XX velké"
+      "SMALL": "4.Velikost: malé",
+      "MEDIUM": "5.Velikost: střední",
+      "LARGE": "6.Velikost: velké",
+      "XTRALARGE": "7.Velikost: extra velké",
+      "XXTRALARGE": "8.Velikost: XX velké"
     }
   },
   "SOCIAL": {
@@ -348,5 +350,6 @@
       "PROCESS_ID": "ID instance procesu",
       "ACTION_TYPE": "Typ akce"
     }
-  }
+  },
+  "DEFAULT_SEARCH": "Výchozí"
 }

demo-shell/resources/i18n/da.json

@@ -55,6 +55,7 @@
   },
   "APP_LAYOUT": {
     "APP": "App",
+    "HEADER_TEXT_COLOR": "Farve på tekst i overskrift",
     "APP_NAME": "ADF-demoapp",
     "FILTERED_SEARCH": "Filter-overskrift",
     "HOME": "Hjem",
@@ -219,7 +220,8 @@
   "NOTIFICATIONS": {
     "TASK_ASSIGNED": "{{taskName}} opgave er blevet tildelt til {{assignee}}",
     "PROCESS_STARTED": "{{processName}} processen er startet",
-    "TASK_UPDATED": "{{taskName}} opgavedetaljer er blevet opdateret"
+    "TASK_UPDATED": "{{taskName}} opgavedetaljer er blevet opdateret",
+    "TASK_CREATED": "Opgaven {{taskName}} blev oprettet"
   },
   "FORM-LOADING": {
     "FORM_DATA": "Formulardata",
@@ -348,5 +350,6 @@
       "PROCESS_ID": "Procesforekomst-id",
       "ACTION_TYPE": "Handlingstype"
     }
-  }
+  },
+  "DEFAULT_SEARCH": "Standard"
 }

demo-shell/resources/i18n/de.json

@@ -55,6 +55,7 @@
   },
   "APP_LAYOUT": {
     "APP": "Anwendung",
+    "HEADER_TEXT_COLOR": "Farbe des Überschriftstextes",
     "APP_NAME": "ADF-Demoanwendung",
     "FILTERED_SEARCH": "Filter-Header",
     "HOME": "Startseite",
@@ -219,7 +220,8 @@
   "NOTIFICATIONS": {
     "TASK_ASSIGNED": "Aufgabe '{{taskName}}' wurde {{assignee}} zugewiesen",
     "PROCESS_STARTED": "Prozess '{{processName}}' wurde gestartet",
-    "TASK_UPDATED": "Aufgabe '{{taskName}}' wurde aktualisiert"
+    "TASK_UPDATED": "Aufgabe '{{taskName}}' wurde aktualisiert",
+    "TASK_CREATED": "Die Aufgabe {{taskName}} wurde erstellt"
   },
   "FORM-LOADING": {
     "FORM_DATA": "Formulardaten",
@@ -348,5 +350,6 @@
       "PROCESS_ID": "Prozessinstanz-ID",
       "ACTION_TYPE": "Aktionstyp"
     }
-  }
+  },
+  "DEFAULT_SEARCH": "Standard"
 }

demo-shell/resources/i18n/en.json

@@ -55,6 +55,7 @@
   },
   "APP_LAYOUT": {
     "APP": "App",
+    "HEADER_TEXT_COLOR": "Header text color",
     "APP_NAME": "ADF Demo Application",
     "FILTERED_SEARCH": "Filter Header",
     "HOME": "Home",
@@ -349,5 +350,6 @@
       "PROCESS_ID": "Process Instance ID",
       "ACTION_TYPE": "Action Type"
     }
-  }
+  },
+  "DEFAULT_SEARCH": "Default"
 }

demo-shell/resources/i18n/es.json

@@ -55,6 +55,7 @@
   },
   "APP_LAYOUT": {
     "APP": "Aplicación",
+    "HEADER_TEXT_COLOR": "Color de texto de encabezado",
     "APP_NAME": "Aplicación ADF Demo",
     "FILTERED_SEARCH": "Filtros",
     "HOME": "Inicio",
@@ -219,7 +220,8 @@
   "NOTIFICATIONS": {
     "TASK_ASSIGNED": "La tarea {{taskName}} ha sido asignada a {{assignee}}",
     "PROCESS_STARTED": "Se ha iniciado el proceso {{processName}}",
-    "TASK_UPDATED": "Se actualizaron los detalles de la tarea {{taskName}}"
+    "TASK_UPDATED": "Se actualizaron los detalles de la tarea {{taskName}}",
+    "TASK_CREATED": "Se ha creado la tarea {{taskName}}"
   },
   "FORM-LOADING": {
     "FORM_DATA": "Datos del formulario",
@@ -348,5 +350,6 @@
       "PROCESS_ID": "ID de instancia del proceso",
       "ACTION_TYPE": "Tipo de acción"
     }
-  }
+  },
+  "DEFAULT_SEARCH": "Predeterminado"
 }

demo-shell/resources/i18n/fi.json

@@ -55,6 +55,7 @@
   },
   "APP_LAYOUT": {
     "APP": "Sovellus",
+    "HEADER_TEXT_COLOR": "Otsikkotekstin väri",
     "APP_NAME": "ADF-demosovellus",
     "FILTERED_SEARCH": "Suodattimet",
     "HOME": "Aloitussivu",
@@ -219,7 +220,8 @@
   "NOTIFICATIONS": {
     "TASK_ASSIGNED": "{{taskName}} -tehtävä on määritetty käyttäjälle {{assignee}}",
     "PROCESS_STARTED": "{{processName}} -prosessi on käynnistetty",
-    "TASK_UPDATED": "{{taskName}} -tehtävän tiedot on päivitetty"
+    "TASK_UPDATED": "{{taskName}} -tehtävän tiedot on päivitetty",
+    "TASK_CREATED": "{{taskName}} -tehtävä luotiin"
   },
   "FORM-LOADING": {
     "FORM_DATA": "Lomaketiedot",
@@ -348,5 +350,6 @@
       "PROCESS_ID": "Prosessiesiintymätunnus",
       "ACTION_TYPE": "Toiminnon tyyppi"
     }
-  }
+  },
+  "DEFAULT_SEARCH": "Oletus"
 }

demo-shell/resources/i18n/fr.json

@@ -55,6 +55,7 @@
   },
   "APP_LAYOUT": {
     "APP": "Application",
+    "HEADER_TEXT_COLOR": "Couleur du texte de l'en-tête",
     "APP_NAME": "Application Démo ADF",
     "FILTERED_SEARCH": "En-tête du filtre",
     "HOME": "Accueil",
@@ -219,7 +220,8 @@
   "NOTIFICATIONS": {
     "TASK_ASSIGNED": "La tâche {{taskName}} a été assignée à {{assignee}}",
     "PROCESS_STARTED": "Le processus {{processName}} a été démarré",
-    "TASK_UPDATED": "Les détails de la tâche {{taskName}} ont été mis à jour"
+    "TASK_UPDATED": "Les détails de la tâche {{taskName}} ont été mis à jour",
+    "TASK_CREATED": "{{taskName}} tâche a été créée"
   },
   "FORM-LOADING": {
     "FORM_DATA": "Données du formulaire",
@@ -268,7 +270,7 @@
     "NODE_LIST": "Liste de balises par ID de nœud"
   },
   "DEMO_PERMISSION": {
-    "INHERIT_PERMISSION_BUTTON": "Hériter les droits d'accès",
+    "INHERIT_PERMISSION_BUTTON": "Hériter des droits d'accès",
     "INHERITED_PERMISSIONS_BUTTON": "Droits d'accès hérités"
   },
   "TASK_LIST_DEMO": {
@@ -348,5 +350,6 @@
       "PROCESS_ID": "ID de l'instance de processus",
       "ACTION_TYPE": "Type d'action"
     }
-  }
+  },
+  "DEFAULT_SEARCH": "Par défaut"
 }

demo-shell/resources/i18n/it.json

@@ -39,8 +39,8 @@
   },
   "title": "Benvenuto",
   "VERSION": {
-    "NO_PERMISSION": "Non si dispone dei permessi per gestire versioni di questo contenuto",
-    "NO_PERMISSION_EVENT": "Non si dispone dei permessi ${event.permission} di ${event.action} ${event.type}",
+    "NO_PERMISSION": "Non si dispone dell'autorizzazione per gestire versioni di questo contenuto",
+    "NO_PERMISSION_EVENT": "Non si dispone dell'autorizzazione ${event.permission} per ${event.action} ${event.type}",
     "CHOOSE_FILE": "Seleziona un file per visualizzarne le versioni",
     "DIALOG": {
       "CLOSE": "Chiudi",
@@ -55,6 +55,7 @@
   },
   "APP_LAYOUT": {
     "APP": "Applicazione",
+    "HEADER_TEXT_COLOR": "Colore testo intestazione",
     "APP_NAME": "Applicazione demo ADF",
     "FILTERED_SEARCH": "Intestazione filtro",
     "HOME": "Home",
@@ -171,7 +172,7 @@
       "LOCK": "Blocca",
       "METADATA": "Informazioni",
       "DOWNLOAD": "Scarica",
-      "PERMISSION": "Permesso",
+      "PERMISSION": "Autorizzazione",
       "FOLDER": {
         "COPY": "Copia",
         "MOVE": "Sposta",
@@ -219,7 +220,8 @@
   "NOTIFICATIONS": {
     "TASK_ASSIGNED": "Il compito {{taskName}} è stato assegnato a {{assignee}}",
     "PROCESS_STARTED": "Il processo {{processName}} è stato avviato",
-    "TASK_UPDATED": "I dettagli del compito {{taskName}} sono stati aggiornati"
+    "TASK_UPDATED": "I dettagli del compito {{taskName}} sono stati aggiornati",
+    "TASK_CREATED": "Il compito {{taskName}} è stato creato"
   },
   "FORM-LOADING": {
     "FORM_DATA": "Dati modulo",
@@ -268,8 +270,8 @@
     "NODE_LIST": "Elenco tag per ID nodo"
   },
   "DEMO_PERMISSION": {
-    "INHERIT_PERMISSION_BUTTON": "Eredita permessi",
-    "INHERITED_PERMISSIONS_BUTTON": "Permesso ereditato"
+    "INHERIT_PERMISSION_BUTTON": "Eredita autorizzazione",
+    "INHERITED_PERMISSIONS_BUTTON": "Autorizzazione ereditata"
   },
   "TASK_LIST_DEMO": {
     "ERROR_MESSAGE": {
@@ -348,5 +350,6 @@
       "PROCESS_ID": "ID istanza di processo",
       "ACTION_TYPE": "Tipo di azione"
     }
-  }
+  },
+  "DEFAULT_SEARCH": "Predefinito"
 }

demo-shell/resources/i18n/ja.json

@@ -55,6 +55,7 @@
   },
   "APP_LAYOUT": {
     "APP": "アプリ",
+    "HEADER_TEXT_COLOR": "ヘッダーテキストカラー",
     "APP_NAME": "ADF デモアプリケーション",
     "FILTERED_SEARCH": "フィルタヘッダー",
     "HOME": "ホーム",
@@ -219,7 +220,8 @@
   "NOTIFICATIONS": {
     "TASK_ASSIGNED": "{{taskName}}タスクが{{assignee}}に割り当てられました",
     "PROCESS_STARTED": "{{processName}}プロセスが開始しました",
-    "TASK_UPDATED": "{{taskName}}タスクの詳細が更新されました"
+    "TASK_UPDATED": "{{taskName}}タスクの詳細が更新されました",
+    "TASK_CREATED": "{{taskName}}タスクが作成されました"
   },
   "FORM-LOADING": {
     "FORM_DATA": "フォーム データ",
@@ -348,5 +350,6 @@
       "PROCESS_ID": "プロセスインスタンス ID",
       "ACTION_TYPE": "処理のタイプ"
     }
-  }
+  },
+  "DEFAULT_SEARCH": "デフォルト"
 }

demo-shell/resources/i18n/nb.json

@@ -55,6 +55,7 @@
   },
   "APP_LAYOUT": {
     "APP": "App",
+    "HEADER_TEXT_COLOR": "Overskriftstekstfarge",
     "APP_NAME": "ADF-demoprogam",
     "FILTERED_SEARCH": "Filteroverskrift",
     "HOME": "Hjem",
@@ -219,7 +220,8 @@
   "NOTIFICATIONS": {
     "TASK_ASSIGNED": "{{taskName}}-oppgaven er tilordnet til {{assignee}}",
     "PROCESS_STARTED": "{{processName}}-prosessen er startet",
-    "TASK_UPDATED": "{{taskName}}-oppgavedetaljene er oppdatert"
+    "TASK_UPDATED": "{{taskName}}-oppgavedetaljene er oppdatert",
+    "TASK_CREATED": "Oppgaven {{taskName}} ble opprettet"
   },
   "FORM-LOADING": {
     "FORM_DATA": "Skjemadata",
@@ -348,5 +350,6 @@
       "PROCESS_ID": "Prosesstilfelle-ID",
       "ACTION_TYPE": "Handlingstype"
     }
-  }
+  },
+  "DEFAULT_SEARCH": "Standard"
 }

demo-shell/resources/i18n/nl.json

@@ -55,6 +55,7 @@
   },
   "APP_LAYOUT": {
     "APP": "App",
+    "HEADER_TEXT_COLOR": "Kleur van koptekst",
     "APP_NAME": "ADF-demotoepassing",
     "FILTERED_SEARCH": "Filterkop",
     "HOME": "Home",
@@ -171,7 +172,7 @@
       "LOCK": "Vergrendeling",
       "METADATA": "Info",
       "DOWNLOAD": "Downloaden",
-      "PERMISSION": "Machtiging",
+      "PERMISSION": "Rechten",
       "FOLDER": {
         "COPY": "Kopiëren",
         "MOVE": "Verplaatsen",
@@ -219,7 +220,8 @@
   "NOTIFICATIONS": {
     "TASK_ASSIGNED": "{{taskName}}-taak is toegewezen aan {{assignee}}",
     "PROCESS_STARTED": "{{processName}}-proces is gestart",
-    "TASK_UPDATED": "{{taskName}}-taakdetails zijn bijgewerkt"
+    "TASK_UPDATED": "{{taskName}}-taakdetails zijn bijgewerkt",
+    "TASK_CREATED": "Taak {{taskName}} is gemaakt"
   },
   "FORM-LOADING": {
     "FORM_DATA": "Formuliergegevens",
@@ -268,8 +270,8 @@
     "NODE_LIST": "Taglijst per node-id"
   },
   "DEMO_PERMISSION": {
-    "INHERIT_PERMISSION_BUTTON": "Machtiging overnemen",
-    "INHERITED_PERMISSIONS_BUTTON": "Machtiging overgenomen"
+    "INHERIT_PERMISSION_BUTTON": "Rechten overnemen",
+    "INHERITED_PERMISSIONS_BUTTON": "Rechten overgenomen"
   },
   "TASK_LIST_DEMO": {
     "ERROR_MESSAGE": {
@@ -348,5 +350,6 @@
       "PROCESS_ID": "Procesinstantie-id",
       "ACTION_TYPE": "Actietype"
     }
-  }
+  },
+  "DEFAULT_SEARCH": "Standaard"
 }

demo-shell/resources/i18n/pl.json

@@ -55,6 +55,7 @@
   },
   "APP_LAYOUT": {
     "APP": "Aplikacja",
+    "HEADER_TEXT_COLOR": "Kolor tekstu nagłówka",
     "APP_NAME": "Wersja demonstracyjna aplikacji ADF",
     "FILTERED_SEARCH": "Nagłówek filtra",
     "HOME": "Strona główna",
@@ -219,7 +220,8 @@
   "NOTIFICATIONS": {
     "TASK_ASSIGNED": "Zadanie {{taskName}} zostało przydzielone do {{assignee}}",
     "PROCESS_STARTED": "Proces {{processName}} został uruchomiony",
-    "TASK_UPDATED": "Szczegóły zadania {{taskName}} zostały zaktualizowane"
+    "TASK_UPDATED": "Szczegóły zadania {{taskName}} zostały zaktualizowane",
+    "TASK_CREATED": "Zadanie {{taskName}} zostało utworzone"
   },
   "FORM-LOADING": {
     "FORM_DATA": "Dane formularza",
@@ -348,5 +350,6 @@
       "PROCESS_ID": "Identyfikator wystąpienia procesu",
       "ACTION_TYPE": "Typ czynności"
     }
-  }
+  },
+  "DEFAULT_SEARCH": "Domyślne"
 }

demo-shell/resources/i18n/pt-BR.json

@@ -55,6 +55,7 @@
   },
   "APP_LAYOUT": {
     "APP": "Aplicativo",
+    "HEADER_TEXT_COLOR": "Cor do texto do cabeçalho",
     "APP_NAME": "Aplicativo Demo ADF",
     "FILTERED_SEARCH": "Filtros",
     "HOME": "Página Inicial",
@@ -219,7 +220,8 @@
   "NOTIFICATIONS": {
     "TASK_ASSIGNED": "A tarefa {{taskName}} foi atribuída a {{assignee}}",
     "PROCESS_STARTED": "O processo {{processName}} foi iniciado",
-    "TASK_UPDATED": "Os detalhes da tarefa {{taskName}} foram atualizados"
+    "TASK_UPDATED": "Os detalhes da tarefa {{taskName}} foram atualizados",
+    "TASK_CREATED": "A tarefa {{taskName}} foi criada"
   },
   "FORM-LOADING": {
     "FORM_DATA": "Dados do formulário",
@@ -348,5 +350,6 @@
       "PROCESS_ID": "ID de instância de processo",
       "ACTION_TYPE": "Tipo de ação"
     }
-  }
+  },
+  "DEFAULT_SEARCH": "Padrão"
 }

demo-shell/resources/i18n/ru.json

@@ -55,6 +55,7 @@
   },
   "APP_LAYOUT": {
     "APP": "Приложение",
+    "HEADER_TEXT_COLOR": "Цвет текста заголовка",
     "APP_NAME": "Демонстрационное приложение ADF",
     "FILTERED_SEARCH": "Заголовок фильтра",
     "HOME": "Домашняя",
@@ -70,7 +71,7 @@
     "PROCESS_SERVICES": "Process Services",
     "LOGIN": "Войти",
     "CUSTOM_SOURCES": "Пользовательские источники",
-    "DATATABLE": "Datatable",
+    "DATATABLE": "Таблица данных",
     "DATATABLE_LAZY": "Таблица данных (частичная загрузка)",
     "DOCUMENT_LIST": "Список документов",
     "TEMPLATE": "Шаблон",
@@ -219,7 +220,8 @@
   "NOTIFICATIONS": {
     "TASK_ASSIGNED": "Задача {{taskName}} была назначена {{assignee}}",
     "PROCESS_STARTED": "Процесс {{processName}} запущен",
-    "TASK_UPDATED": "Сведения о задаче {{taskName}} обновлены"
+    "TASK_UPDATED": "Сведения о задаче {{taskName}} обновлены",
+    "TASK_CREATED": "{{taskName}} задача создана"
   },
   "FORM-LOADING": {
     "FORM_DATA": "Данные формы",
@@ -348,5 +350,6 @@
       "PROCESS_ID": "Идентификатор экземпляра процесса",
       "ACTION_TYPE": "Тип действия"
     }
-  }
+  },
+  "DEFAULT_SEARCH": "По умолчанию"
 }

demo-shell/resources/i18n/sv.json

@@ -55,6 +55,7 @@
   },
   "APP_LAYOUT": {
     "APP": "Program",
+    "HEADER_TEXT_COLOR": "Rubrikens textfärg",
     "APP_NAME": "ADF-demoprogram",
     "FILTERED_SEARCH": "Filter sidhuvud",
     "HOME": "Hem",
@@ -219,7 +220,8 @@
   "NOTIFICATIONS": {
     "TASK_ASSIGNED": "{{taskName}} uppgiften har tilldelats till {{assignee}}",
     "PROCESS_STARTED": "{{processName}} processen har startats",
-    "TASK_UPDATED": "{{taskName}} uppgiftsinformation har uppdaterats"
+    "TASK_UPDATED": "{{taskName}} uppgiftsinformation har uppdaterats",
+    "TASK_CREATED": "Uppgiften {{taskName}} skapades"
   },
   "FORM-LOADING": {
     "FORM_DATA": "Formulärdata",
@@ -348,5 +350,6 @@
       "PROCESS_ID": "Processinstans-ID",
       "ACTION_TYPE": "Åtgärdstyp"
     }
-  }
+  },
+  "DEFAULT_SEARCH": "Standard"
 }

demo-shell/resources/i18n/zh-CN.json

@@ -55,6 +55,7 @@
   },
   "APP_LAYOUT": {
     "APP": "APP",
+    "HEADER_TEXT_COLOR": "标题文本颜色",
     "APP_NAME": "ADF 演示应用程序",
     "FILTERED_SEARCH": "筛选标题",
     "HOME": "主页",
@@ -219,7 +220,8 @@
   "NOTIFICATIONS": {
     "TASK_ASSIGNED": "{{taskName}} 任务已分配给 {{assignee}}",
     "PROCESS_STARTED": "{{processName}} 进程已启动",
-    "TASK_UPDATED": "{{taskName}} 任务详细信息已更新"
+    "TASK_UPDATED": "{{taskName}} 任务详细信息已更新",
+    "TASK_CREATED": "{{taskName}} 任务已创建"
   },
   "FORM-LOADING": {
     "FORM_DATA": "表单数据",
@@ -348,5 +350,6 @@
       "PROCESS_ID": "流程实例 ID",
       "ACTION_TYPE": "操作类型"
     }
-  }
+  },
+  "DEFAULT_SEARCH": "默认值"
 }

demo-shell/src/app.config.json

@@ -31,80 +31,10 @@
   "application": {
     "storagePrefix": "ADF",
     "name": "Alfresco ADF Application",
-    "copyright": "© 2016 - 2018 Alfresco Software, Inc. All Rights Reserved."
+    "copyright": "© 2016 - 2021 Alfresco Software, Inc. All Rights Reserved."
   },
-  "languages": [
-    {
-      "key": "en",
-      "label": "English"
-    },
-    {
-      "key": "fr",
-      "label": "Français"
-    },
-    {
-      "key": "de",
-      "label": "Deutsch"
-    },
-    {
-      "key": "it",
-      "label": "Italiano"
-    },
-    {
-      "key": "es",
-      "label": "Español"
-    },
-    {
-      "key": "ja",
-      "label": "日本語"
-    },
-    {
-      "key": "nl",
-      "label": "Nederlands"
-    },
-    {
-      "key": "pt-BR",
-      "label": "Português (Brasil)"
-    },
-    {
-      "key": "nb",
-      "label": "Bokmål"
-    },
-    {
-      "key": "ru",
-      "label": "Русский"
-    },
-    {
-      "key": "zh-CN",
-      "label": "中文简体"
-    },
-    {
-      "key": "ar",
-      "label": "عربى",
-      "direction": "rtl"
-    },
-    {
-      "key": "cs",
-      "label": "Čeština"
-    },
-    {
-      "key": "pl",
-      "label": "Polski"
-    },
-    {
-      "key": "fi",
-      "label": "Suomi"
-    },
-    {
-      "key": "da",
-      "label": "Dansk"
-    },
-    {
-      "key": "sv",
-      "label": "Svenska"
-    }
-  ],
-  "search": {
+  "notifications": true,
+  "search": [{
     "filterWithContains": true,
     "app:fields": [
       "cm:name",
@@ -435,8 +365,279 @@
           "postfix": ")"
         }
       ]
-    }
+    },
+    "name": "DEFAULT_SEARCH",
+    "default": true
   },
+  {
+    "filterWithContains": true,
+    "app:fields": [
+      "cm:name",
+      "cm:title",
+      "cm:description",
+      "ia:whatEvent",
+      "ia:descriptionEvent",
+      "lnk:title",
+      "lnk:description",
+      "TEXT",
+      "TAG"
+    ],
+    "include": [
+      "path",
+      "allowableOperations",
+      "properties"
+    ],
+    "sorting": {
+      "options": [
+        {
+          "key": "name",
+          "label": "Name",
+          "type": "FIELD",
+          "field": "cm:name",
+          "ascending": true
+        },
+        {
+          "key": "content.sizeInBytes",
+          "label": "Size",
+          "type": "FIELD",
+          "field": "content.size",
+          "ascending": true
+        },
+        {
+          "key": "createdByUser",
+          "label": "Author",
+          "type": "FIELD",
+          "field": "cm:creator",
+          "ascending": true
+        },
+        {
+          "key": "createdAt",
+          "label": "Created",
+          "type": "FIELD",
+          "field": "cm:created",
+          "ascending": true
+        },
+        {
+          "key": "score",
+          "label": "Relevance",
+          "type": "SCORE",
+          "field": "score",
+          "ascending": false
+        }
+      ],
+      "defaults": [
+        {
+          "key": "score",
+          "type": "FIELD",
+          "field": "score",
+          "ascending": false
+        }
+      ]
+    },
+    "resetButton": true,
+    "filterQueries": [
+      {
+        "query": "TYPE:'cm:folder'"
+      },
+      {
+        "query": "NOT cm:creator:System"
+      }
+    ],
+    "facetFields": {
+      "expanded": true,
+      "fields": [
+        {
+          "field": "content.size",
+          "mincount": 1,
+          "label": "Folder Size",
+          "settings": {
+            "allowUpdateOnChange": false,
+            "hideDefaultAction": true,
+            "unit": "Bytes"
+          }
+        },
+        {
+          "field": "creator",
+          "mincount": 1,
+          "label": "Folder created",
+          "settings": {
+            "allowUpdateOnChange": false,
+            "hideDefaultAction": true
+          }
+        },
+        {
+          "field": "modifier",
+          "mincount": 1,
+          "label": "Folder Modifier",
+          "settings": {
+            "allowUpdateOnChange": false,
+            "hideDefaultAction": true
+          }
+        },
+        {
+          "field": "created",
+          "mincount": 1,
+          "label": "Folder Created",
+          "settings": {
+            "allowUpdateOnChange": false,
+            "hideDefaultAction": true
+          }
+        }
+      ]
+    },
+    "facetQueries": {
+      "label": "SEARCH.FACET_QUERIES.MY_FACET_QUERIES",
+      "pageSize": 5,
+      "expanded": true,
+      "mincount": 1,
+      "queries": [
+        {
+          "query": "created:2019",
+          "label": "SEARCH.FACET_QUERIES.CREATED_THIS_YEAR"
+        },
+        {
+          "query": "content.mimetype:text/html",
+          "label": "SEARCH.FACET_QUERIES.MIMETYPE",
+          "group": "Type facet queries"
+        },
+        {
+          "query": "content.size:[0 TO 10240]",
+          "label": "SEARCH.FACET_QUERIES.XTRASMALL",
+          "group": "Size facet queries"
+        },
+        {
+          "query": "content.size:[10240 TO 102400]",
+          "label": "SEARCH.FACET_QUERIES.SMALL",
+          "group": "Size facet queries"
+        },
+        {
+          "query": "content.size:[102400 TO 1048576]",
+          "label": "SEARCH.FACET_QUERIES.MEDIUM",
+          "group": "Size facet queries"
+        },
+        {
+          "query": "content.size:[1048576 TO 16777216]",
+          "label": "SEARCH.FACET_QUERIES.LARGE",
+          "group": "Size facet queries"
+        },
+        {
+          "query": "content.size:[16777216 TO 134217728]",
+          "label": "SEARCH.FACET_QUERIES.XTRALARGE",
+          "group": "Size facet queries"
+        },
+        {
+          "query": "content.size:[134217728 TO MAX]",
+          "label": "SEARCH.FACET_QUERIES.XXTRALARGE",
+          "group": "Size facet queries"
+        }
+      ],
+      "settings": {
+        "allowUpdateOnChange": false,
+        "hideDefaultAction": true
+      }
+    },
+    "facetIntervals": {
+      "expanded": true,
+      "intervals": [
+        {
+          "label": "The Created",
+          "field": "cm:created",
+          "sets": [
+            {
+              "label": "lastYear",
+              "start": "2018",
+              "end": "2019",
+              "endInclusive": false
+            },
+            {
+              "label": "currentYear",
+              "start": "NOW/YEAR",
+              "end": "NOW/YEAR+1YEAR"
+            },
+            {
+              "label": "earlier",
+              "start": "*",
+              "end": "2018",
+              "endInclusive": false
+            }
+          ],
+          "settings": {
+            "allowUpdateOnChange": false,
+            "hideDefaultAction": true
+          }
+        },
+        {
+          "label": "The Modified",
+          "field": "cm:modified",
+          "sets": [
+            {
+              "label": "2017",
+              "start": "2017",
+              "end": "2018",
+              "endInclusive": false
+            },
+            {
+              "label": "2017-2018",
+              "start": "2017",
+              "end": "2018",
+              "endInclusive": true
+            },
+            {
+              "label": "currentYear",
+              "start": "NOW/YEAR",
+              "end": "NOW/YEAR+1YEAR"
+            },
+            {
+              "label": "earlierThan2017",
+              "start": "*",
+              "end": "2017",
+              "endInclusive": false
+            }
+          ],
+          "settings": {
+            "allowUpdateOnChange": false,
+            "hideDefaultAction": true
+          }
+        }
+      ]
+    },
+    "categories": [
+      {
+        "id": "contentSize",
+        "name": "Content Size",
+        "enabled": true,
+        "component": {
+          "selector": "slider",
+          "settings": {
+            "allowUpdateOnChange": false,
+            "hideDefaultAction": true,
+            "unit": "Byte",
+            "field": "cm:content.size",
+            "min": 0,
+            "max": 18,
+            "step": 1,
+            "thumbLabel": true
+          }
+        }
+      }
+    ],
+    "highlight": {
+      "prefix": " ",
+      "postfix": " ",
+      "mergeContiguous": true,
+      "fields": [
+        {
+          "field": "cm:title"
+        },
+        {
+          "field": "description",
+          "prefix": "(",
+          "postfix": ")"
+        }
+      ]
+    },
+    "name": "Folder"
+  }],
   "search-headers": {
     "filterWithContains": true,
     "app:fields": [
@@ -1004,7 +1205,8 @@
       "status",
       "sort",
       "order",
-      "processName"
+      "processName",
+      "name"
     ],
     "sortProperties": [
       "id",

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

@@ -114,6 +114,7 @@ import localeDa from '@angular/common/locales/da';
 import localeSv from '@angular/common/locales/sv';
 import { setupAppNotifications } from './services/app-notifications-factory';
 import { AppNotificationsService } from './services/app-notifications.service';
+import { SearchFilterChipsComponent } from './components/search/search-filter-chips.component';
 
 registerLocaleData(localeFr);
 registerLocaleData(localeDe);
@@ -137,7 +138,7 @@ registerLocaleData(localeSv);
         BrowserModule,
         environment.e2e ? NoopAnimationsModule : BrowserAnimationsModule,
         ReactiveFormsModule,
-        RouterModule.forRoot(appRoutes, { useHash: true }),
+        RouterModule.forRoot(appRoutes, { useHash: true, relativeLinkResolution: 'legacy' }),
         FormsModule,
         HttpClientModule,
         MaterialModule,
@@ -204,7 +205,8 @@ registerLocaleData(localeSv);
         CustomEditorComponent,
         CustomWidgetComponent,
         ProcessCloudLayoutComponent,
-        ServiceTaskListCloudDemoComponent
+        ServiceTaskListCloudDemoComponent,
+        SearchFilterChipsComponent
     ],
     providers: [
         {

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

@@ -55,6 +55,7 @@ import { FilteredSearchComponent } from './components/files/filtered-search.comp
 import { ProcessCloudLayoutComponent } from './components/cloud/process-cloud-layout.component';
 import { ServiceTaskListCloudDemoComponent } from './components/cloud/service-task-list-cloud-demo.component';
 import { AspectListSampleComponent } from './components/aspect-list-sample/aspect-list-sample.component';
+import { SearchFilterChipsComponent } from './components/search/search-filter-chips.component';
 
 export const appRoutes: Routes = [
     { path: 'login', loadChildren: () => import('./components/login/login.module').then(m => m.AppLoginModule) },
@@ -325,6 +326,11 @@ export const appRoutes: Routes = [
                 component: SearchResultComponent,
                 canActivate: [AuthGuardEcm]
             },
+            {
+                path: 'search-filter-chips',
+                component: SearchFilterChipsComponent,
+                canActivate: [AuthGuardEcm]
+            },
             {
                 path: 'extendedSearch',
                 component: SearchExtendedComponent,

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

@@ -16,23 +16,18 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-import {
-    name,
-    version,
-    commit,
-    dependencies
-} from '../../../../../package.json';
+import pkg from '../../../../../package.json';
 import { AppConfigService } from '@alfresco/adf-core';
 
 @Component({
     selector: 'app-about-page',
     templateUrl: './about.component.html',
-    styleUrls: ['about.component.scss']
+    styleUrls: ['./about.component.scss']
 })
 export class AboutComponent implements OnInit {
-    url = `https://github.com/Alfresco/${name}/commits/${commit}`;
-    version = version;
-    dependencies = dependencies;
+    url = `https://github.com/Alfresco/${pkg.name}/commits/${pkg.commit}`;
+    version = pkg.version;
+    dependencies = pkg.dependencies;
     showExtensions = true;
     application = '';
 

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

@@ -4,9 +4,17 @@
     <adf-sidenav-layout-header>
         <ng-template let-toggleMenu="toggleMenu" let-isMenuMinimized="isMenuMinimized">
 
-            <adf-layout-header id="adf-header" [title]="title | translate" [redirectUrl]="redirectUrl" [logo]="logo"
-                [tooltip]="tooltip | translate" [showSidenavToggle]="showMenu" [expandedSidenav]="!isMenuMinimized()"
-                [color]="color" [position]="position" (clicked)=toggleMenu($event)>
+            <adf-layout-header
+                id="adf-header"
+                [title]="title | translate"
+                [redirectUrl]="redirectUrl"
+                [logo]="logo"
+                [tooltip]="tooltip | translate"
+                [showSidenavToggle]="showMenu"
+                [expandedSidenav]="!isMenuMinimized()"
+                [color]="color"
+                [position]="position"
+                (clicked)=toggleMenu($event)>
 
                 <div class="app-layout-menu-spacer"></div>
 
@@ -87,3 +95,5 @@
         </button>
     </ng-template>
 </mat-menu>
+
+<adf-file-uploading-dialog #fileDialog position="left"></adf-file-uploading-dialog>

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

@@ -1,65 +1,65 @@
-@mixin app-layout-theme($theme) {
-    $primary: map-get($theme, primary);
-    $minimumAppWidth: 320px;
 
-    @media screen and ($mat-xsmall) {
-        app-search-bar {
-            width: 150px;
-        }
-    }
-
-    @media screen and (max-width: 350px) {
-        app-search-bar {
-            width: 100px;
-        }
-    }
-
-    .app-layout {
-        display: flex;
-        flex: 1;
-        min-width: $minimumAppWidth;
-        height: 100%;
-
-        .app-sidenav-link--active {
-            color: mat-color($primary);
-        }
-
-        .app-sidenav-link {
-            .mat-list-text {
-                font-size: 14px;
-                white-space: nowrap;
-                min-width: 120px;
-                padding: 0 10px;
-            }
-        }
-
-        .mat-nav-list .mat-list-item.app-sidenav-link {
-            height: 40px;
-        }
-
-        &-menu-spacer {
-            flex: 1 1 auto;
-        }
-    }
-
-    @media screen and ($mat-small) {
-        .app-menu {
-            padding-top: 0;
-        }
-    }
-
-    @media screen and ($mat-xsmall) {}
-
-    mat-sidenav-content > div {
-        display: flex;
-        height: 100%;
-
-        > div {
-            flex: auto;
-        }
-    }
-
-    [dir='rtl'] .app-sidenav-link__expand-button {
-        transform: rotateY(180deg);
+@media screen and (max-width: 599px) {
+    app-search-bar {
+        width: 150px;
     }
 }
+
+@media screen and (max-width: 350px) {
+    app-search-bar {
+        width: 100px;
+    }
+}
+
+adf-file-uploading-dialog {
+    z-index: 1100;
+}
+
+.app-layout {
+    display: flex;
+    flex: 1;
+    min-width: 320px;
+    height: 100%;
+
+    .app-sidenav-link--active {
+        color: var(--theme-primary-color);
+    }
+
+    .app-sidenav-link {
+        .mat-list-text {
+            font-size: 14px;
+            white-space: nowrap;
+            min-width: 120px;
+            padding: 0 10px;
+        }
+    }
+
+    .mat-nav-list .mat-list-item.app-sidenav-link {
+        height: 40px;
+    }
+
+    &-menu-spacer {
+        flex: 1 1 auto;
+    }
+}
+
+@media screen and (max-width: 959px) {
+    .app-menu {
+        padding-top: 0;
+    }
+}
+
+@media screen and (max-width: 599px) {}
+
+mat-sidenav-content > div {
+    display: flex;
+    height: 100%;
+
+    > div {
+        flex: auto;
+    }
+}
+
+[dir='rtl'] .app-sidenav-link__expand-button {
+    transform: rotateY(180deg);
+}

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

@@ -20,13 +20,12 @@ import { UserPreferencesService, AppConfigService, AlfrescoApiService, UserPrefe
 import { HeaderDataService } from '../header-data/header-data.service';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { ThemePalette } from '@angular/material/core';
 
 @Component({
-    templateUrl: 'app-layout.component.html',
-    styleUrls: ['app-layout.component.scss'],
-    host: {
-        'class': 'app-layout'
-    },
+    templateUrl: './app-layout.component.html',
+    styleUrls: ['./app-layout.component.scss'],
+    host: { 'class': 'app-layout' },
     encapsulation: ViewEncapsulation.None
 })
 export class AppLayoutComponent implements OnInit, OnDestroy {
@@ -93,14 +92,14 @@ export class AppLayoutComponent implements OnInit, OnDestroy {
 
     expandedSidenav = false;
 
-    position = 'start';
+    position: 'start' | 'end' = 'start';
     direction = 'ltr';
 
     hideSidenav = false;
     showMenu = true;
 
     enableRedirect = true;
-    color = 'primary';
+    color: ThemePalette = 'primary';
     title = 'APP_LAYOUT.APP_NAME';
     logo: string;
     redirectUrl: string | any[] = ['/home'];
@@ -122,12 +121,25 @@ export class AppLayoutComponent implements OnInit, OnDestroy {
 
         this.headerService.color
             .pipe(takeUntil(this.onDestroy$))
-            .subscribe(color => this.color = color);
+            .subscribe(color => {
+                if (['primary', 'accent', 'warn'].includes(color)) {
+                    this.color = color;
+                } else {
+                    this.color = undefined;
+                    document.documentElement.style.setProperty('--adf-header-background-color', color);
+                }
+            });
 
         this.headerService.title
             .pipe(takeUntil(this.onDestroy$))
             .subscribe(title => this.title = title);
 
+        this.headerService.headerTextColor
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(headerTextColor => {
+                document.documentElement.style.setProperty('--adf-header-text-color', headerTextColor);
+            });
+
         this.headerService.logo
             .pipe(takeUntil(this.onDestroy$))
             .subscribe(path => this.logo = path);

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

@@ -34,8 +34,8 @@ import {
 } from '../../../cloud/custom-form-components/custom-editor.component';
 
 @Component({
-    templateUrl: 'cloud-form-demo.component.html',
-    styleUrls: ['cloud-form-demo.component.scss'],
+    templateUrl: './cloud-form-demo.component.html',
+    styleUrls: ['./cloud-form-demo.component.scss'],
     providers: [
         { provide: FormRenderingService, useClass: CloudFormRenderingService }
     ]

demo-shell/src/app/components/aspect-list-sample/aspect-list-sample.component.ts

@@ -20,8 +20,8 @@ import { Component } from '@angular/core';
 
 @Component({
     selector: 'app-expandable-menu',
-    templateUrl: 'aspect-list-sample.component.html',
-    styleUrls: ['aspect-list-sample.component.scss']
+    templateUrl: './aspect-list-sample.component.html',
+    styleUrls: ['./aspect-list-sample.component.scss']
 })
 export class AspectListSampleComponent {
 

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

@@ -125,6 +125,15 @@ export class CardViewComponent implements OnInit, OnDestroy {
                 format: 'shortDate',
                 editable: this.isEditable
             }),
+            new CardViewDateItemModel({
+                label: 'CardView Date Item - Multivalue (chips)',
+                value: [new Date(1983, 11, 24, 10, 0, 30)],
+                key: 'date',
+                default: new Date(1983, 11, 24, 10, 0, 30),
+                format: 'shortDate',
+                editable: this.isEditable,
+                multivalued: true
+            }),
             new CardViewDatetimeItemModel({
                 label: 'CardView Datetime Item',
                 value: new Date(1983, 11, 24, 10, 0, 0),
@@ -133,6 +142,15 @@ export class CardViewComponent implements OnInit, OnDestroy {
                 format: 'short',
                 editable: this.isEditable
             }),
+            new CardViewDatetimeItemModel({
+                label: 'CardView Datetime Item - Multivalue (chips)',
+                value: [new Date(1983, 11, 24, 10, 0, 0)],
+                key: 'datetime',
+                default: new Date(1983, 11, 24, 10, 0, 0),
+                format: 'short',
+                editable: this.isEditable,
+                multivalued: true
+            }),
             new CardViewBoolItemModel({
                 label: 'CardView Boolean Item',
                 value: true,
@@ -162,6 +180,15 @@ export class CardViewComponent implements OnInit, OnDestroy {
                 editable: this.isEditable,
                 pipes: [{ pipe: this.decimalNumberPipe }]
             }),
+            new CardViewFloatItemModel({
+                label: 'CardView Float Item - Multivalue (chips)',
+                value: [9.9],
+                key: 'float',
+                default: 0.0,
+                editable: this.isEditable,
+                multivalued: true,
+                pipes: [{ pipe: this.decimalNumberPipe }]
+            }),
             new CardViewKeyValuePairsItemModel({
                 label: 'CardView Key-Value Pairs Item',
                 value: [{ name: 'hey', value: 'you' }, { name: 'hey', value: 'you' }],

demo-shell/src/app/components/cloud/cloud-breadcrumb-component.ts

@@ -21,7 +21,7 @@ import { ActivatedRoute } from '@angular/router';
 @Component({
     selector: 'app-cloud-breadcrumbs',
     templateUrl: './cloud-breadcrumb-component.html',
-    styleUrls: ['cloud-breadcrumb-component.scss']
+    styleUrls: ['./cloud-breadcrumb-component.scss']
 })
 export class CloudBreadcrumbsComponent implements OnInit {
     appName: string;

demo-shell/src/app/components/cloud/cloud-filters-demo.component.ts

@@ -24,7 +24,7 @@ import { ProcessFilterCloudModel } from '@alfresco/adf-process-services-cloud';
 @Component({
     selector: 'app-cloud-filters-demo',
     templateUrl: './cloud-filters-demo.component.html',
-    styleUrls: ['cloud-filters-demo.component.scss'],
+    styleUrls: ['./cloud-filters-demo.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
 export class CloudFiltersDemoComponent implements OnInit {

demo-shell/src/app/components/cloud/community/community-task-cloud.component.ts

@@ -48,7 +48,7 @@ export class CommunityTasksCloudDemoComponent implements OnInit, OnDestroy {
 
     filterId;
     multiselect: boolean;
-    selectedRows: string[] = [];
+    selectedRows: any[] = [];
     testingMode: boolean;
     selectionMode: string;
     taskDetailsRedirection: boolean;

demo-shell/src/app/components/cloud/community/community-task-details-cloud.component.html

@@ -9,7 +9,8 @@
                 (taskClaimed)="onClaimTask()"
                 (taskCompleted)="onTaskCompleted()"
                 (taskUnclaimed)="onUnclaimTask()"
-                (formSaved)="onFormSaved()">
+                (formSaved)="onFormSaved()"
+                (error)="onError($event)">
             </adf-cloud-task-form>
         </div>
         <adf-cloud-task-header fxFlex

demo-shell/src/app/components/cloud/community/community-task-details-cloud.component.ts

@@ -64,4 +64,13 @@ export class CommunityTaskDetailsCloudDemoComponent {
     onFormSaved() {
         this.notificationService.openSnackMessage('Task has been saved successfully');
     }
+
+    onError({ message: error }: Error) {
+        let errorMessage;
+        try {
+            errorMessage = JSON.parse(error).message || JSON.parse(error).entry?.message;
+            errorMessage = JSON.parse(errorMessage).message;
+        } catch {}
+        this.notificationService.showError(errorMessage || error);
+    }
 }

demo-shell/src/app/components/cloud/people-groups-cloud-demo.component.html

@@ -20,15 +20,15 @@
             </mat-radio-group>
             <mat-form-field *ngIf="!isPeopleAppNameSelected()" class="app-preselect-value">
                 <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.ROLE' | translate }} ["ACTIVITI_ADMIN", "ACTIVITI_USER"]</mat-label>
-                <input matInput (input)="setPeopleRoles($event.target?.value)" data-automation-id="app-people-roles-input" />
+                <input matInput (input)="setPeopleRoles($any($event).target?.value)" data-automation-id="app-people-roles-input" />
             </mat-form-field>
             <mat-form-field *ngIf="isPeopleAppNameSelected()" class="app-preselect-value">
                 <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.APP_NAME' | translate }}</mat-label>
-                <input matInput (input)="setPeopleAppName($event.target?.value)" data-automation-id="app-people-app-input" />
+                <input matInput (input)="setPeopleAppName($any($event).target?.value)" data-automation-id="app-people-app-input" />
             </mat-form-field>
             <mat-form-field class="app-preselect-value-full">
                 <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.PRESELECTED_VALUE' | translate }} {{ DEFAULT_PEOPLE_PLACEHOLDER }}</mat-label>
-                <input matInput (input)="setPeoplePreselectValue($event.target?.value)"  data-automation-id="app-people-preselect-input" />
+                <input matInput (input)="setPeoplePreselectValue($any($event).target?.value)"  data-automation-id="app-people-preselect-input" />
             </mat-form-field>
             <mat-checkbox class="app-preselect-value" (change)="onChangePeopleValidation($event)">{{
                 'PEOPLE_GROUPS_CLOUD.PRESELECT_VALIDATION' | translate }}</mat-checkbox>
@@ -92,19 +92,19 @@
             <mat-form-field *ngIf="!isGroupAppNameSelected()" class="app-preselect-value">
                 <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.ROLE' | translate }} ["ACTIVITI_ADMIN", "ACTIVITI_USER"]</mat-label>
                 <input matInput
-                    (input)="setGroupRoles($event.target?.value)"
+                    (input)="setGroupRoles($any($event).target?.value)"
                     data-automation-id="app-group-roles-input"/>
             </mat-form-field>
             <mat-form-field *ngIf="isGroupAppNameSelected()" class="app-preselect-value">
                 <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.APP_NAME' | translate }}</mat-label>
                 <input matInput
-                    (input)="setGroupAppName($event.target?.value)"
+                    (input)="setGroupAppName($any($event).target?.value)"
                     data-automation-id="app-group-app-input"/>
             </mat-form-field>
             <mat-form-field class="app-preselect-value-full">
                 <mat-label>Preselect: {{ DEFAULT_GROUP_PLACEHOLDER }}</mat-label>
                 <input matInput
-                    (input)="setGroupsPreselectValue($event.target?.value)"
+                    (input)="setGroupsPreselectValue($any($event).target?.value)"
                     data-automation-id="app-group-preselect-input" />
             </mat-form-field>
             <mat-checkbox class="app-preselect-value" (change)="onChangeGroupValidation($event)">

demo-shell/src/app/components/cloud/processes-cloud-demo.component.html

@@ -15,7 +15,7 @@
             class="app-cloud-layout-overflow"
             [appName]="editedFilter.appName"
             [appVersion]="editedFilter.appVersion"
-            [initiator]="getInitiatorValue()"
+            [initiator]="editedFilter.initiator"
             [processDefinitionId]="editedFilter.processDefinitionId"
             [processDefinitionName]="editedFilter.processDefinitionName"
             [processDefinitionKey]="editedFilter.processDefinitionKey"

demo-shell/src/app/components/cloud/processes-cloud-demo.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { EditProcessFilterCloudComponent, ProcessFilterAction, ProcessFilterCloudModel, ProcessFilterCloudService } from '@alfresco/adf-process-services-cloud';
+import { EditProcessFilterCloudComponent, ProcessFilterAction, ProcessFilterCloudModel } from '@alfresco/adf-process-services-cloud';
 import { ActivatedRoute, Router } from '@angular/router';
 import { UserPreferencesService, DataCellEvent } from '@alfresco/adf-core';
 import { CloudLayoutService, CloudServiceSettings } from './services/cloud-layout.service';
@@ -60,7 +60,6 @@ export class ProcessesCloudDemoComponent implements OnInit, OnDestroy {
         private router: Router,
         private cloudLayoutService: CloudLayoutService,
         private cloudProcessFiltersService: CloudProcessFiltersService,
-        private processFilterCloudService: ProcessFilterCloudService,
         private userPreference: UserPreferencesService) {
     }
 
@@ -102,10 +101,6 @@ export class ProcessesCloudDemoComponent implements OnInit, OnDestroy {
         }
     }
 
-    getInitiatorValue(): string {
-        return this.editedFilter.initiator?.map(initiator => initiator.username).join(',');
-    }
-
     onChangePageSize(event: Pagination) {
         this.userPreference.paginationSize = event.maxItems;
     }
@@ -121,7 +116,10 @@ export class ProcessesCloudDemoComponent implements OnInit, OnDestroy {
     }
 
     onFilterChange(filter: ProcessFilterCloudModel) {
-        const queryParams = this.cloudProcessFiltersService.writeQueryParams(filter, this.appName, this.filterId);
+        const queryParams = {
+            ...this.cloudProcessFiltersService.writeQueryParams(filter, this.appName, filter.id),
+            filterId: filter.id
+        };
         this.router.navigate([`/cloud/${this.appName}/processes/`], {queryParams});
     }
 
@@ -181,9 +179,7 @@ export class ProcessesCloudDemoComponent implements OnInit, OnDestroy {
 
     private loadFilter(model: ProcessFilterCloudModel) {
         if (model && model.appName && model.id) {
-            this.processFilterCloudService.getFilterById(model.appName, model.id).subscribe(filter => {
-                this.editedFilter = Object.assign({}, filter, model);
-            });
+            this.editedFilter = model;
         }
     }
 }

demo-shell/src/app/components/cloud/service-task-list-cloud-demo.component.ts

@@ -23,7 +23,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
-    templateUrl: 'service-task-list-cloud-demo.component.html'
+    templateUrl: './service-task-list-cloud-demo.component.html'
 })
 export class ServiceTaskListCloudDemoComponent implements OnInit, OnDestroy {
 

demo-shell/src/app/components/cloud/start-process-cloud-demo.component.ts

@@ -24,7 +24,6 @@ import { CloudFormRenderingService } from '@alfresco/adf-process-services-cloud'
 
 @Component({
     templateUrl: './start-process-cloud-demo.component.html',
-    styleUrls: ['./start-process-cloud-demo.component.scss'],
     providers: [
         { provide: FormRenderingService, useClass: CloudFormRenderingService }
     ]
@@ -33,7 +32,7 @@ export class StartProcessCloudDemoComponent implements OnInit {
 
     appName;
     processName: string;
-    formValues: string;
+    formValues: any;
     variables: any;
 
     constructor(private appConfig: AppConfigService,

demo-shell/src/app/components/cloud/start-task-cloud-demo.component.ts

@@ -21,8 +21,7 @@ import { NotificationService } from '@alfresco/adf-core';
 import { CloudLayoutService } from './services/cloud-layout.service';
 
 @Component({
-    templateUrl: './start-task-cloud-demo.component.html',
-    styleUrls: ['./start-task-cloud-demo.component.scss']
+    templateUrl: './start-task-cloud-demo.component.html'
 })
 export class StartTaskCloudDemoComponent implements OnInit {
 

demo-shell/src/app/components/cloud/task-details-cloud-demo.component.html

@@ -9,7 +9,8 @@
                 (cancelClick)="goBack()"
                 (taskCompleted)="onTaskCompleted()"
                 (formContentClicked)="onFormContentClicked($event)"
-                (formSaved)="onFormSaved()">
+                (formSaved)="onFormSaved()"
+                (error)="onError($event)">
             </adf-cloud-task-form>
         </div>
         <adf-cloud-task-header #taskHeader fxFlex

demo-shell/src/app/components/cloud/task-details-cloud-demo.component.ts

@@ -67,4 +67,13 @@ export class TaskDetailsCloudDemoComponent {
     onFormSaved() {
         this.notificationService.openSnackMessage('Task has been saved successfully');
     }
+
+    onError({ message: error }: Error) {
+        let errorMessage;
+        try {
+            errorMessage = JSON.parse(error).message || JSON.parse(error).entry?.message;
+            errorMessage = JSON.parse(errorMessage).message;
+        } catch {}
+        this.notificationService.showError(errorMessage || error);
+    }
 }

demo-shell/src/app/components/cloud/tasks-cloud-demo.component.html

@@ -37,8 +37,7 @@
             (showRowContextMenu)="onShowRowContextMenu($event)"
             (executeRowAction)="onExecuteRowAction($event)"
             (rowClick)="onRowClick($event)"
-            (rowsSelected)="onRowsSelected($event)"
-            #taskCloud>
+            (rowsSelected)="onRowsSelected($event)">
         </adf-cloud-task-list>
         <adf-pagination
             [target]="taskCloud"

demo-shell/src/app/components/cloud/tasks-cloud-demo.component.ts

@@ -24,8 +24,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
-    templateUrl: 'tasks-cloud-demo.component.html',
-    styleUrls: ['tasks-cloud-demo.component.scss']
+    templateUrl: './tasks-cloud-demo.component.html'
 })
 export class TasksCloudDemoComponent implements OnInit, OnDestroy {
 
@@ -48,7 +47,7 @@ export class TasksCloudDemoComponent implements OnInit, OnDestroy {
 
     filterId;
     multiselect: boolean;
-    selectedRows: string[] = [];
+    selectedRows: any[] = [];
     actionMenu: boolean;
     contextMenu: boolean;
     actions: any[] = [];

demo-shell/src/app/components/config-editor/config-editor.component.ts

@@ -27,7 +27,7 @@ import { takeUntil } from 'rxjs/operators';
 
 @Component({
     selector: 'app-config-editor',
-    templateUrl: 'config-editor.component.html',
+    templateUrl: './config-editor.component.html',
     styleUrls: ['./config-editor.component.scss']
 })
 export class ConfigEditorComponent implements OnDestroy {

demo-shell/src/app/components/confirm-dialog/confirm-dialog-example.component.ts

@@ -21,8 +21,7 @@ import { ConfirmDialogComponent } from '@alfresco/adf-content-services';
 
 @Component({
     selector: 'app-confirm-dialog-example',
-    templateUrl: 'confirm-dialog-example.component.html',
-    styleUrls: ['confirm-dialog-example.component.scss']
+    templateUrl: './confirm-dialog-example.component.html'
 })
 export class ConfirmDialogExampleComponent {
 

demo-shell/src/app/components/content-node-selector/content-node-selector.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, ViewEncapsulation } from '@angular/core';
-import { SitePaging, SiteEntry, MinimalNodeEntryEntity } from '@alfresco/js-api';
+import { SitePaging, SiteEntry, MinimalNodeEntryEntity, Node } from '@alfresco/js-api';
 import { ContentNodeDialogService, ShareDataRow, RowFilter } from '@alfresco/adf-content-services';
 import { ThumbnailService } from '@alfresco/adf-core';
 
@@ -99,8 +99,8 @@ export class ContentNodeSelectorComponent {
         return this.thumbnailService.getMimeTypeIcon('video/quicktime');
     }
 
-    onNodeSelect(node: MinimalNodeEntryEntity) {
-        this.validSelection = !!node;
+    onNodeSelect(selection: Node[]) {
+        this.validSelection = !!selection;
     }
 
     customIsValidFunction(entry: MinimalNodeEntryEntity): boolean {

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

@@ -33,6 +33,9 @@
             <data-column type="text" key="users" title="Users"></data-column>
             <data-column key="status" title="Status">
                 <ng-template let-value="value">{{value | json }}</ng-template>
+                <adf-data-column-header>
+                    <ng-template>STATUS</ng-template>
+                </adf-data-column-header>
             </data-column>
         </data-columns>
         -->

demo-shell/src/app/components/datatable/drag-and-drop/datatable-dnd.component.html

@@ -1,8 +1,8 @@
 <h1>DataTable Drag and Drop Demo</h1>
 <div data-automation-id="datatable"
     (header-dragover)="onDragOver($event)"
-    (header-drop)="onDrop($event)"
+    (header-drop)="onDrop($any($event))"
     (cell-dragover)="onDragOver($event)"
-    (cell-drop)="onDrop($event)">
+    (cell-drop)="onDrop($any($event))">
     <adf-datatable [data]="data"></adf-datatable>
 </div>

demo-shell/src/app/components/datatable/drag-and-drop/datatable-dnd.component.ts

@@ -88,7 +88,7 @@ export class DataTableDnDComponent implements OnInit {
         this.data.setSorting(new DataSorting('id', 'asc'));
     }
 
-    onDragOver(event: CustomEvent) {
+    onDragOver(event: Event) {
         event.preventDefault();
     }
 

demo-shell/src/app/components/document-list/extension-presets/extension-presets.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { AppExtensionService } from '@alfresco/adf-extensions';
+import { AppExtensionService, DocumentListPresetRef } from '@alfresco/adf-extensions';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -28,7 +28,7 @@ import { takeUntil } from 'rxjs/operators';
 export class ExtensionPresetsComponent implements OnInit, OnDestroy {
     onDestroy$ = new Subject<boolean>();
 
-    columns: any[] = [];
+    columns: DocumentListPresetRef[] = [];
     isSmallScreen = false;
 
     constructor(
@@ -55,7 +55,7 @@ export class ExtensionPresetsComponent implements OnInit, OnDestroy {
         this.onDestroy$.complete();
     }
 
-    trackById(_: number, obj: { id: string }) {
+    trackById(_: number, obj: DocumentListPresetRef): string {
         return obj.id;
     }
 }

demo-shell/src/app/components/document-list/extension-presets/name-column/name-column.component.ts

@@ -44,6 +44,9 @@ export class NameColumnComponent implements OnInit, OnDestroy {
     @Input()
     context: any;
 
+    @Input()
+    key = 'name';
+
     displayText$ = new BehaviorSubject<string>('');
     node: NodeEntry;
 
@@ -73,7 +76,8 @@ export class NameColumnComponent implements OnInit, OnDestroy {
         this.node = this.context.row.node;
 
         if (this.node && this.node.entry) {
-            this.displayText$.next(this.node.entry.name || this.node.entry.id);
+            const displayText = this.context.row.getValue(this.key);
+            this.displayText$.next(displayText || this.node.entry.id);
         }
     }
 

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

@@ -17,14 +17,14 @@
 
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, Router, PRIMARY_OUTLET } from '@angular/router';
-import { ContentService, AllowableOperationsEnum, PermissionsEnum, NodesApiService } from '@alfresco/adf-core';
+import { ContentService, AllowableOperationsEnum, PermissionsEnum, NodesApiService, FileUploadErrorEvent } from '@alfresco/adf-core';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { PreviewService } from '../../services/preview.service';
 
 @Component({
     selector: 'app-file-view',
-    templateUrl: 'file-view.component.html',
-    styleUrls: ['file-view.component.scss'],
+    templateUrl: './file-view.component.html',
+    styleUrls: ['./file-view.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
 export class FileViewComponent implements OnInit {
@@ -103,7 +103,8 @@ export class FileViewComponent implements OnInit {
         this.router.navigateByUrl(primaryUrl);
     }
 
-    onUploadError(errorMessage: string) {
+    onUploadError(event: FileUploadErrorEvent) {
+        const errorMessage = event.error;
         this.snackBar.open(errorMessage, '', { duration: 4000 });
     }
 

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

@@ -20,7 +20,7 @@ import { DocumentListComponent } from '@alfresco/adf-content-services';
 
 @Component({
     selector: 'app-custom-sources',
-    templateUrl: 'custom-sources.component.html'
+    templateUrl: './custom-sources.component.html'
 })
 export class CustomSourcesComponent {
 

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

@@ -14,7 +14,7 @@
                 locationFormat="/files"
                 [display]="'gallery'"
                 [preselectNodes]="selectedNodes"
-                [showHeader]="false"
+                [showHeader]="noHeaderMode"
                 [maxItems]="5"
                 (preview)="showFile($event)"
                 selectionMode="null">
@@ -117,7 +117,7 @@
                     <button mat-icon-button
                             data-automation-id="delete-toolbar-button"
                             adf-check-allowable-operation="delete"
-                            permanent=true
+                            [permanent]="true"
                             [adf-nodes]="documentList.selection"
                             title="{{ 'DOCUMENT_LIST.TOOLBAR.DELETE' | translate }}"
                             (delete)="onDeleteActionSuccess($event)"
@@ -156,7 +156,7 @@
                 </button>
 
                 <mat-menu #themePicker="matMenu">
-                    <button mat-menu-item (click)="toolbarColor = 'default'">Default</button>
+                    <button mat-menu-item (click)="toolbarColor = null">Default</button>
                     <button mat-menu-item (click)="toolbarColor = 'primary'">Primary</button>
                     <button mat-menu-item (click)="toolbarColor = 'accent'">Accent</button>
                     <button mat-menu-item (click)="toolbarColor = 'warn'">Warn</button>
@@ -239,7 +239,7 @@
                 (preview)="showFile($event)"
                 (folderChange)="onFolderChange($event)"
                 (permissionError)="handlePermissionError($event)"
-                (name-click)="documentList.onNodeDblClick($event.detail?.node)"
+                (name-click)="documentList.onNodeDblClick($any($event).detail?.node)"
                 (filterSelection)="onFilterSelected($event)">
 
                 <adf-custom-no-permission-template *ngIf="enableCustomPermissionMessage">
@@ -266,7 +266,7 @@
                         title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
                         [formatTooltip]="getNodeNameTooltip">
                         <ng-template let-context>
-                            <adf-name-column [context]="context"></adf-name-column>
+                            <adf-name-column key="name" [context]="context"></adf-name-column>
                         </ng-template>
                     </data-column>
                     <data-column
@@ -410,7 +410,7 @@
                         (execute)="onManageMetadata($event)">
                     </content-action>
                     <content-action
-                        icon="settings_input_component"
+                        icon="supervisor_account"
                         title="DOCUMENT_LIST.ACTIONS.PERMISSION"
                         permission="copy"
                         (error)="onContentActionError($event)"
@@ -648,7 +648,7 @@
         <form class="example-form">
             <mat-form-field *ngIf="preselectNodes" class="adf-preselect-nodes-input">
                 <input matInput
-                (input)="setPreselectNodes($event.target?.value)"
+                (input)="setPreselectNodes($any($event).target?.value)"
                 placeholder="NodeEntry[] => [{ entry: { isFile: true, id: 'node-id' }}, { entry: { isFile: true, id: 'node-id' }} ]">
             </mat-form-field>
         </form>
@@ -721,5 +721,3 @@
         </mat-form-field>
     </div>
 </div>
-
-<adf-file-uploading-dialog #fileDialog (error)="openSnackMessageError($event)"></adf-file-uploading-dialog>

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

@@ -1,95 +1,93 @@
-@mixin app-file-component-theme($theme) {
+.app-container {
+    margin: 10px !important;
+}
+
+@media screen and (max-width: 599px) {
     .app-container {
-        margin: 10px !important;
+        margin: 0;
     }
 
-    @media screen and ($mat-xsmall) {
-        .app-container {
-            margin: 0;
-        }
-
-        .app-show-versions-button.mat-icon-button {
-            display: none;
-        }
-    }
-
-    .app-error-message {
-        text-align: left;
-    }
-
-    .app-error-message--text {
-        color: #d50000;
-    }
-
-    .app-document-list-container {
-        min-height: 400px;
-
-        .app-datatable-list {
-            min-height: 400px;
-        }
-    }
-
-    .adf-datatable-card .app-lock-button {
-        top: -10px;
-        position: absolute;
-    }
-
-    .app-site-container-style {
-        margin-top: 10px;
-        margin-bottom: 10px;
-        width: 100%;
-        min-width: 200px;
-    }
-
-    .app-content-service-settings {
-        padding: 16px;
-    }
-
-    .app-manage-versions-sidebar {
-        width: 360px !important;
-
-        & .app-info-drawer-layout-header {
-            display: none !important;
-        }
-    }
-
-    .app-no-result__empty_doc_lib {
-        width: 565px;
-        height: 161px;
-        object-fit: contain;
-        margin-top: 17px;
-    }
-
-    .app-empty_template {
-        text-align: center;
-        margin-top: 20px;
-        margin-bottom: 20px;
-    }
-
-    .app-no-result-message {
-        height: 32px;
-        opacity: 0.26;
-        font-size: 24px;
-        line-height: 1.33;
-        letter-spacing: -1px;
-    }
-
-    .app-container-recent {
-        mat-icon {
-            margin-left: 20px;
-        }
-
-        .app-empty-list__block {
-            height: 100%;
-            padding: 0;
-            margin: 0;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-    }
-
-    .adf-preselect-nodes-input {
-        width: 100%;
+    .app-show-versions-button.mat-icon-button {
+        display: none;
     }
 }
+
+.app-error-message {
+    text-align: left;
+}
+
+.app-error-message--text {
+    color: #d50000;
+}
+
+.app-document-list-container {
+    min-height: 400px;
+
+    .app-datatable-list {
+        min-height: 400px;
+    }
+}
+
+.adf-datatable-card .app-lock-button {
+    top: -10px;
+    position: absolute;
+}
+
+.app-site-container-style {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    width: 100%;
+    min-width: 200px;
+}
+
+.app-content-service-settings {
+    padding: 16px;
+}
+
+.app-manage-versions-sidebar {
+    width: 360px !important;
+
+    & .app-info-drawer-layout-header {
+        display: none !important;
+    }
+}
+
+.app-no-result__empty_doc_lib {
+    width: 565px;
+    height: 161px;
+    object-fit: contain;
+    margin-top: 17px;
+}
+
+.app-empty_template {
+    text-align: center;
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+.app-no-result-message {
+    height: 32px;
+    opacity: 0.26;
+    font-size: 24px;
+    line-height: 1.33;
+    letter-spacing: -1px;
+}
+
+.app-container-recent {
+    mat-icon {
+        margin-left: 20px;
+    }
+
+    .app-empty-list__block {
+        height: 100%;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+}
+
+.adf-preselect-nodes-input {
+    width: 100%;
+}

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, Input, OnInit, OnChanges, OnDestroy, Optional, EventEmitter, ViewChild, SimpleChanges, Output } from '@angular/core';
+import { Component, Input, OnInit, OnChanges, OnDestroy, Optional, EventEmitter, ViewChild, SimpleChanges, Output, ViewEncapsulation } from '@angular/core';
 import { Location } from '@angular/common';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Params, Router } from '@angular/router';
@@ -48,6 +48,7 @@ import { MetadataDialogAdapterComponent } from './metadata-dialog-adapter.compon
 import { Subject } from 'rxjs';
 import { PreviewService } from '../../services/preview.service';
 import { takeUntil, debounceTime, scan } from 'rxjs/operators';
+import { ThemePalette } from '@angular/material/core';
 
 const DEFAULT_FOLDER_TO_SHOW = '-my-';
 
@@ -55,6 +56,7 @@ const DEFAULT_FOLDER_TO_SHOW = '-my-';
     selector: 'app-files-component',
     templateUrl: './files.component.html',
     styleUrls: ['./files.component.scss'],
+    encapsulation: ViewEncapsulation.None,
     providers: [
         { provide: FormRenderingService, useClass: ProcessFormRenderingService }
     ]
@@ -75,7 +77,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
         this.appConfig.get<string>(AppConfigValues.BASESHAREURL) ||
         this.appConfig.get<string>(AppConfigValues.ECMHOST)) + '/preview/s/';
 
-    toolbarColor = 'default';
+    toolbarColor: ThemePalette;
 
     selectionModes = [
         { value: 'none', viewValue: 'None' },
@@ -95,7 +97,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
     sorting = ['name', 'ASC'];
 
     @Input()
-    sortingMode = 'server';
+    sortingMode: 'server' | 'client' = 'server';
 
     @Input()
     showRecentFiles = true;
@@ -107,7 +109,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
     showSettingsPanel = true;
 
     @Input()
-    showHeader: string = ShowHeaderMode.Always;
+    showHeader = ShowHeaderMode.Always;
 
     @Input()
     selectionMode = 'multiple';
@@ -208,7 +210,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
     preselectNodes: boolean;
     warnOnMultipleUploads = false;
     thumbnails = false;
-
+    noHeaderMode = ShowHeaderMode.Never;
     enableCustomPermissionMessage = false;
     enableMediumTimeFormat = false;
     displayEmptyMetadata = false;
@@ -405,8 +407,8 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
         });
     }
 
-    openSnackMessageError(message: string) {
-        this.notificationService.showError(message);
+    openSnackMessageError(error: any) {
+        this.notificationService.showError(error.value || error);
     }
 
     openSnackMessageInfo(message: string) {

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

@@ -20,6 +20,7 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { MinimalNodeEntryEntity } from '@alfresco/js-api';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { PreviewService } from '../../services/preview.service';
+import { FileUploadErrorEvent } from '@alfresco/adf-core';
 
 @Component({
     templateUrl: './version-manager-dialog-adapter.component.html',
@@ -45,8 +46,9 @@ export class VersionManagerDialogAdapterComponent {
         this.allowDownload = data.hasOwnProperty('allowDownload') ? data.allowDownload : this.allowDownload;
     }
 
-    uploadError(errorMessage: string) {
-        this.snackBar.open(errorMessage, '', {duration: 4000});
+    uploadError(event: FileUploadErrorEvent) {
+        const errorMessage = event.error;
+        this.snackBar.open(errorMessage, '', { duration: 4000 });
     }
 
     close() {
@@ -58,7 +60,7 @@ export class VersionManagerDialogAdapterComponent {
         this.close();
     }
 
-    hideVersionComparison(isCancelled: boolean | Node) {
+    hideVersionComparison(isCancelled: any) {
         if (isCancelled) {
             this.showVersionComparison = false;
             this.newFileVersion = null;

demo-shell/src/app/components/form/form-list.component.html

@@ -1,4 +1,4 @@
-<adf-form-list [forms]="formList" (row-dblclick)="onRowDblClick($event)">
+<adf-form-list [forms]="formList" (row-dblclick)="onRowDblClick($any($event))">
 </adf-form-list>
 <div class="app-form-container" *ngIf="!isEmptyForm()">
     <adf-form #adfForm [form]="form" [data]="restoredData" [showValidationIcon]="showValidationIcon">

demo-shell/src/app/components/form/form-list.component.ts

@@ -23,8 +23,8 @@ import { takeUntil } from 'rxjs/operators';
 
 @Component({
     selector: 'app-form-list',
-    templateUrl: 'form-list.component.html',
-    styleUrls: ['form-list.component.scss']
+    templateUrl: './form-list.component.html',
+    styleUrls: ['./form-list.component.scss']
 })
 export class FormListComponent implements OnInit, OnDestroy {
 
@@ -60,7 +60,7 @@ export class FormListComponent implements OnInit, OnDestroy {
         this.onDestroy$.complete();
     }
 
-    onRowDblClick(event: CustomEvent) {
+    onRowDblClick(event: CustomEvent<any>) {
         const rowForm = event.detail.value.obj;
 
         this.formService.getFormDefinitionById(rowForm.id).subscribe((formModel) => {

demo-shell/src/app/components/form/form-loading.component.ts

@@ -29,8 +29,8 @@ import { takeUntil } from 'rxjs/operators';
 
 @Component({
     selector: 'app-form-loading',
-    templateUrl: 'form-loading.component.html',
-    styleUrls: ['form-loading.component.scss'],
+    templateUrl: './form-loading.component.html',
+    styleUrls: ['./form-loading.component.scss'],
     providers: [{ provide: FormService, useClass: FakeFormService }]
 })
 export class FormLoadingComponent implements OnInit, OnDestroy {

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

@@ -24,8 +24,8 @@ import { takeUntil } from 'rxjs/operators';
 
 @Component({
     selector: 'app-form',
-    templateUrl: 'form.component.html',
-    styleUrls: ['form.component.scss'],
+    templateUrl: './form.component.html',
+    styleUrls: ['./form.component.scss'],
     providers: [
         { provide: FormService, useClass: InMemoryFormService },
         { provide: FormRenderingService, useClass: ProcessFormRenderingService }

demo-shell/src/app/components/header-data/header-data.component.html

@@ -7,13 +7,13 @@
 
         <div>
             <label>Choose header color</label>
-            <select (change)="changeColor($event.target.value)">
+            <select (change)="changeColor($any($event).target.value)">
                 <option value="primary">Primary</option>
                 <option value="accent">Accent</option>
                 <option value="warn">Warn</option>
             </select>
             OR
-            <input type="text" name="color" (keyup.enter)="changeColor($event.target.value)"
+            <input type="text" name="color" (keyup.enter)="changeColor($any($event).target.value)"
                    placeholder="hex color code">
             <p>*Choose only one value at a time: either hex code or theme color.</p>
             <p>*press enter for submitting new hex color</p>
@@ -21,27 +21,35 @@
 
         <div>
             <label>Change title</label>
-            <input type="text" name="title" (keyup.enter)="submitTitle($event.target.value)"
+            <input type="text" name="title" (keyup.enter)="submitTitle($any($event).target.value)"
                    placeholder="{{ 'APP_LAYOUT.APP_NAME' | translate}}">
             <p>*press enter for submitting new title</p>
         </div>
 
+        <div>
+            <label>Change header text color</label>
+            <input type="text" name="headerColor" (keyup.enter)="submitHeaderTextColor($any($event).target.value)"
+                   placeholder="{{ 'APP_LAYOUT.HEADER_TEXT_COLOR' | translate}}">
+            <p>*press enter for submitting new color text</p>
+            <p>*hex color</p>
+        </div>
+
         <div>
             <label>Change logo</label>
-            <input type="text" placeholder="URL path" (keyup.enter)="submitLogo($event.target.value)">
+            <input type="text" placeholder="URL path" (keyup.enter)="submitLogo($any($event).target.value)">
             <p>*press enter for submitting new logo</p>
         </div>
 
         <div>
             <label>Change logo link</label>
-            <input type="url" placeholder="Redirect URL" (keyup.enter)="submitRedirectUrl($event.target.value)">
+            <input type="url" placeholder="Redirect URL" (keyup.enter)="submitRedirectUrl($any($event).target.value)">
             <p>*Input JSON friendly array or explicit string. E.g. ["/test", 33, "user", 11] or "/test"</p>
             <p>*press enter for submitting new link on logo</p>
         </div>
 
         <div>
             <label>Change logo tooltip</label>
-            <input type="text" placeholder="Tooltip text" (keyup.enter)="submitTooltip($event.target.value)">
+            <input type="text" placeholder="Tooltip text" (keyup.enter)="submitTooltip($any($event).target.value)">
             <p>*press enter for submitting new tooltip</p>
         </div>
 

demo-shell/src/app/components/header-data/header-data.component.ts

@@ -16,6 +16,7 @@
  */
 
 import { Component } from '@angular/core';
+import { ThemePalette } from '@angular/material/core';
 import { HeaderDataService } from './header-data.service';
 
 @Component({
@@ -24,8 +25,13 @@ import { HeaderDataService } from './header-data.service';
 })
 export class HeaderDataComponent {
     checkbox = true;
-    position = 'start';
+    position: 'start' | 'end' = 'start';
     hideSidenavToggle = false;
+    colorsHashesTests = [
+        /#[a-z0-9]{3}/i,
+        /#[a-z0-9]{4}/i,
+        /#[a-z0-9]{6}/i
+    ];
 
     constructor(private headerService: HeaderDataService) {
     }
@@ -34,7 +40,7 @@ export class HeaderDataComponent {
         this.headerService.hideMenuButton();
     }
 
-    changeColor(color: string) {
+    changeColor(color: ThemePalette) {
         this.headerService.changeColor(color);
     }
 
@@ -44,6 +50,14 @@ export class HeaderDataComponent {
         }
     }
 
+    submitHeaderTextColor(color: string): void {
+        const isColorHashValid = this.colorsHashesTests.some(colorTest => colorTest.test(color));
+
+        if (isColorHashValid || !color) {
+            this.headerService.changeHeaderTextColor(color);
+        }
+    }
+
     submitLogo(logoPath: string) {
         if (logoPath) {
             this.headerService.changeLogo(logoPath);

demo-shell/src/app/components/header-data/header-data.service.ts

@@ -16,6 +16,7 @@
  */
 
 import { Injectable, Output, EventEmitter } from '@angular/core';
+import { ThemePalette } from '@angular/material/core';
 
 @Injectable({
     providedIn: 'root'
@@ -26,12 +27,13 @@ export class HeaderDataService {
     show = true;
 
     @Output() hideMenu = new EventEmitter<boolean>();
-    @Output() color = new EventEmitter<string>();
+    @Output() color = new EventEmitter<ThemePalette>();
+    @Output() headerTextColor = new EventEmitter<string>();
     @Output() title = new EventEmitter<string>();
     @Output() logo = new EventEmitter<string>();
     @Output() redirectUrl = new EventEmitter<string | any[]>();
     @Output() tooltip = new EventEmitter<string>();
-    @Output() position = new EventEmitter<string>();
+    @Output() position = new EventEmitter<'start' | 'end'>();
     @Output() hideSidenav = new EventEmitter<boolean>();
 
     hideMenuButton() {
@@ -39,19 +41,22 @@ export class HeaderDataService {
         this.hideMenu.emit(this.show);
     }
 
-    changeColor(color: string) {
+    changeColor(color: ThemePalette) {
         this.color.emit(color);
     }
 
     changeTitle(title: string) {
         this.title.emit(title);
-
     }
 
     changeLogo(logoPath: string) {
         this.logo.emit(logoPath);
     }
 
+    changeHeaderTextColor(color: string): void {
+        this.headerTextColor.emit(color);
+    }
+
     changeRedirectUrl(redirectUrl: string | any[]) {
         this.redirectUrl.emit(redirectUrl);
     }
@@ -60,7 +65,7 @@ export class HeaderDataService {
         this.tooltip.emit(tooltip);
     }
 
-    changePosition(position: string) {
+    changePosition(position: 'start' | 'end') {
         this.position.emit(position);
     }
 

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

@@ -6,7 +6,7 @@
         </div>
 
         <div class="app-home-start">
-            <a mat-raised-button class="app-home-docs-button adf-primary-color" href="https://github.com/Alfresco/alfresco-ng2-components/tree/master/docs">{{ 'APP.HOME.DOCUMENTATION' | translate}}</a>
+            <a mat-raised-button color="primary" class="app-home-docs-button" href="https://github.com/Alfresco/alfresco-ng2-components/tree/master/docs">{{ 'APP.HOME.DOCUMENTATION' | translate}}</a>
         </div>
     </div>
 </header>

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

@@ -1,51 +1,49 @@
-@mixin app-login-component-theme($theme) {
-    .app-setting-button.mat-fab.mat-accent {
-        position: absolute;
-        right: 10px;
-        top: 10px;
-        z-index: 1;
-    }
+.app-setting-button.mat-fab.mat-accent {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 1;
+}
 
-    .app-settings {
-        border-radius: 8px;
-        position: absolute;
-        background-color: papayawhip;
-        color: cadetblue;
-        left: 10px;
-        top: 10px;
-        z-index: 1;
-    }
+.app-settings {
+    border-radius: 8px;
+    position: absolute;
+    background-color: papayawhip;
+    color: cadetblue;
+    left: 10px;
+    top: 10px;
+    z-index: 1;
+}
 
-    .app-toggle {
-        width: auto;
-        margin: 5px;
-        padding: 5px;
-    }
+.app-toggle {
+    width: auto;
+    margin: 5px;
+    padding: 5px;
+}
 
-    .app-mobile-settings, .app-mobile-setting-button {
+.app-mobile-settings, .app-mobile-setting-button {
+    display: none;
+}
+
+@media screen and (max-width: 959px) {
+    .app-settings, .app-setting-button.mat-fab.mat-accent {
         display: none;
     }
 
-    @media screen and ($mat-small) {
-        .app-settings, .app-setting-button.mat-fab.mat-accent {
-            display: none;
-        }
-
-        .app-mobile-settings, .app-mobile-setting-button {
-            display: block;
-        }
-
-        .app-mobile-setting-button {
-            width: 100%;
-        }
-
-        .app-mobile-settings {
-            padding-bottom: 20px;
-            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-        }
+    .app-mobile-settings, .app-mobile-setting-button {
+        display: block;
     }
 
-    .app-settings ::ng-deep .mat-slide-toggle-thumb-container {
-        cursor: pointer;
+    .app-mobile-setting-button {
+        width: 100%;
+    }
+
+    .app-mobile-settings {
+        padding-bottom: 20px;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
     }
 }
+
+.app-settings ::ng-deep .mat-slide-toggle-thumb-container {
+    cursor: pointer;
+}

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

@@ -15,14 +15,15 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { Router } from '@angular/router';
 import { LogService } from '@alfresco/adf-core';
 
 @Component({
     selector: 'app-login',
     templateUrl: './login.component.html',
-    styleUrls: ['./login.component.scss']
+    styleUrls: ['./login.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class LoginComponent {
 

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

@@ -6,11 +6,11 @@
         </div>
 
         <div class="app-logout-login">
-            <a mat-raised-button class="app-logout-docs-button adf-primary-color"
+            <a mat-raised-button color="primary" class="app-logout-docs-button"
                href="#/login">{{ 'APP.LOGOUT.LOGIN' | translate}}</a>
         </div>
         <div class="app-logout-home">
-            <a mat-raised-button class="app-logout-docs-button adf-primary-color"
+            <a mat-raised-button color="primary" class="app-logout-docs-button"
                href="/">{{ 'APP.LOGOUT.HOME' | translate}}</a>
         </div>
     </div>

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

@@ -132,7 +132,7 @@ export class NotificationsComponent implements OnInit, OnDestroy {
     }
 
     quickInfo() {
-        this.notificationService.showInfo(this.message);
+        this.notificationService.showInfo(this.message, 'Agree');
     }
 
     quickWarning() {

demo-shell/src/app/components/overlay-viewer/overlay-viewer.component.ts

@@ -18,7 +18,7 @@
 import { Component, Input } from '@angular/core';
 
 @Component({
-    templateUrl: 'overlay-viewer.component.html'
+    templateUrl: './overlay-viewer.component.html'
 })
 export class OverlayViewerComponent {
 

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

@@ -1,18 +1,3 @@
-<div class="app-inherit_permission_button">
-    <button mat-raised-button
-            [color]="toggleStatus?'accent':'primary'"
-            adf-inherit-permission [nodeId]="nodeId"
-            (error)="showErrorMessage($event)"
-            (updated)="onUpdatedPermissions($event)">
-            {{ (toggleStatus?'DEMO_PERMISSION.INHERITED_PERMISSIONS_BUTTON':'DEMO_PERMISSION.INHERIT_PERMISSION_BUTTON') | translate}}</button>
-    <button mat-button color="primary" (click)="openAddPermissionDialog()" data-automation-id="adf-add-permission-button">Add User or Group</button>
+<div class="app-permission-section">
+    <adf-permission-list [nodeId]="nodeId"></adf-permission-list>
 </div>
-
-<div>
-    <adf-permission-list #permissionList
-                        [nodeId]="nodeId"
-                        (update)="reloadList()"
-                        (error)="showErrorMessage($event)">
-	</adf-permission-list>
-</div>
-

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

@@ -1,6 +1,4 @@
-.app-inherit_permission_button {
-    padding-top: 20px;
-    display: flex;
-    justify-content: center;
-    padding-bottom: 20px;
+.app-permission-section {
+    box-sizing: border-box;
+    height: 100%;
 }

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

@@ -15,11 +15,8 @@
  * limitations under the License.
  */
 
-import { Component, Optional, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, Optional } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
-import { PermissionListComponent, NodePermissionDialogService } from '@alfresco/adf-content-services';
-import { MinimalNodeEntryEntity } from '@alfresco/js-api';
-import { NodesApiService, NotificationService } from '@alfresco/adf-core';
 
 @Component({
     selector: 'app-permissions',
@@ -28,16 +25,9 @@ import { NodesApiService, NotificationService } from '@alfresco/adf-core';
 })
 export class DemoPermissionComponent implements OnInit {
 
-    @ViewChild('permissionList', { static: true })
-    displayPermissionComponent: PermissionListComponent;
-
     nodeId: string;
-    toggleStatus = false;
 
-    constructor(@Optional() private route: ActivatedRoute,
-                private nodeService: NodesApiService,
-                private nodePermissionDialogService: NodePermissionDialogService,
-                private notificationService: NotificationService) {
+    constructor(@Optional() private route: ActivatedRoute) {
     }
 
     ngOnInit() {
@@ -48,34 +38,5 @@ export class DemoPermissionComponent implements OnInit {
                 }
             });
         }
-        this.nodeService
-            .getNode(this.nodeId, {include: ['permissions'] })
-            .subscribe( (currentNode: MinimalNodeEntryEntity) => {
-                this.toggleStatus = currentNode.permissions?.isInheritanceEnabled ?? false;
-            });
     }
-
-    onUpdatedPermissions(node: MinimalNodeEntryEntity) {
-        this.toggleStatus = node.permissions?.isInheritanceEnabled ?? false;
-        this.displayPermissionComponent.reload();
-    }
-
-    reloadList() {
-        this.displayPermissionComponent.reload();
-    }
-
-    openAddPermissionDialog() {
-        this.nodePermissionDialogService
-            .updateNodePermissionByDialog(this.nodeId)
-            .subscribe(
-                () =>  this.displayPermissionComponent.reload(),
-                (error) => this.showErrorMessage(error)
-            );
-    }
-
-    showErrorMessage(error) {
-        const message = error.message ? error.message : error;
-        this.notificationService.openSnackMessage(message);
-    }
-
 }

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

@@ -21,7 +21,7 @@ import { AppConfigService } from '@alfresco/adf-core';
 @Component({
     selector: 'app-pipes-page',
     templateUrl: './pipes.component.html',
-    styleUrls: ['pipes.component.scss']
+    styleUrls: ['./pipes.component.scss']
 })
 export class PipesComponent {
 

demo-shell/src/app/components/process-list-demo/process-list-demo.component.ts

@@ -148,31 +148,35 @@ export class ProcessListDemoComponent implements OnInit, OnDestroy {
         return ended ? 'Completed' : 'Active';
     }
 
-    get processAppId(): AbstractControl {
-        return this.processListForm.get('processAppId');
+    private getControl<T extends AbstractControl>(key: string): T {
+        return this.processListForm.get(key) as T;
     }
 
-    get processDefinitionId(): AbstractControl {
-        return this.processListForm.get('processDefinitionId');
+    get processAppId(): FormControl {
+        return this.getControl<FormControl>('processAppId');
     }
 
-    get processInstanceId(): AbstractControl {
-        return this.processListForm.get('processInstanceId');
+    get processDefinitionId(): FormControl {
+        return this.getControl<FormControl>('processDefinitionId');
     }
 
-    get processState(): AbstractControl {
-        return this.processListForm.get('processState');
+    get processInstanceId(): FormControl {
+        return this.getControl<FormControl>('processInstanceId');
     }
 
-    get processSort(): AbstractControl {
-        return this.processListForm.get('processSort');
+    get processState(): FormControl {
+        return this.getControl<FormControl>('processState');
     }
 
-    get processSize(): AbstractControl {
-        return this.processListForm.get('processSize');
+    get processSort(): FormControl {
+        return this.getControl<FormControl>('processSort');
     }
 
-    get processPage(): AbstractControl {
-        return this.processListForm.get('processPage');
+    get processSize(): FormControl {
+        return this.getControl<FormControl>('processSize');
+    }
+
+    get processPage(): FormControl {
+        return this.getControl<FormControl>('processPage');
     }
 }

demo-shell/src/app/components/process-service/process-service.component.html

@@ -53,7 +53,7 @@
                         (rowClick)="onTaskRowClick($event)"
                         (success)="onSuccessTaskList()"
                         (row-click)="onRowClick($event)"
-                        (row-dblclick)="onTaskRowDblClick($event)"
+                        (row-dblclick)="onTaskRowDblClick($any($event))"
                         [multiselect]="multiSelectTask"
                         #taskList>
                         <!-- Custom column definition demo -->
@@ -168,7 +168,7 @@
                         [showContextMenu]="processContextMenu"
                         (showRowContextMenu)="onShowProcessRowContextMenu($event)"
                         (rowClick)="onProcessRowClick($event)"
-                        (row-dblclick)="onProcessRowDblClick($event)"
+                        (row-dblclick)="onProcessRowDblClick($any($event))"
                         [multiselect]="multiSelectProcess"
                         (success)="onSuccessProcessList()">
                         <!-- Custom column definition demo -->

demo-shell/src/app/components/process-service/process-service.component.scss

@@ -1,100 +1,97 @@
-@mixin app-process-service-component-theme($theme) {
-    .app-no-form-container {
-        text-align: center;
-        font-weight: 600;
-        font-size: 18px;
+.app-no-form-container {
+    text-align: center;
+    font-weight: 600;
+    font-size: 18px;
+}
+
+.app-grid {
+    .app-grid-item {
+        margin: 4px;
+        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+            0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+        padding: 10px;
     }
 
-    .app-grid {
-        .app-grid-item {
-            margin: 4px;
-            box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
-            0 3px 1px -2px rgba(0, 0, 0, 0.2),
-            0 1px 5px 0 rgba(0, 0, 0, 0.12);
-            padding: 10px;
-        }
+    .app-list-buttons {
+        margin-bottom: 24px;
+    }
 
-        .app-list-buttons {
-            margin-bottom: 24px;
-        }
+    .app-tasks-list.app-small-pagination,
+    .app-processes-list.app-small-pagination {
+        .app-pagination {
+            flex-wrap: wrap;
+            padding-bottom: 24px;
+            padding-top: 8px;
 
-        .app-tasks-list.app-small-pagination,
-        .app-processes-list.app-small-pagination {
-            .app-pagination {
-
-                flex-wrap: wrap;
-                padding-bottom: 24px;
-                padding-top: 8px;
-
-                &__range-block.app-pagination__block:first-child {
-                    order: 1;
-                    width: 60%;
-                    flex: 0 0 auto;
-                    box-sizing: border-box;
-                    padding-left: 2px;
-                    justify-content: flex-start;
-                }
-
-                &__perpage-block {
-                    order: 3;
-                    width: 60%;
-                    box-sizing: border-box;
-                    padding-left: 2px;
-                    justify-content: flex-start;
-                }
-
-                &__actualinfo-block {
-                    order: 2;
-                    width: 40%;
-                    box-sizing: border-box;
-                    padding-right: 2px;
-                    justify-content: flex-end;
-                }
-
-                &__controls-block {
-                    order: 4;
-                    width: 40%;
-                    box-sizing: border-box;
-                    padding-right: 2px;
-                    justify-content: flex-end;
-                }
+            &__range-block.app-pagination__block:first-child {
+                order: 1;
+                width: 60%;
+                flex: 0 0 auto;
+                box-sizing: border-box;
+                padding-left: 2px;
+                justify-content: flex-start;
             }
-        }
 
-        .app-list {
-            .app-datatable-list {
-                border: none;
+            &__perpage-block {
+                order: 3;
+                width: 60%;
+                box-sizing: border-box;
+                padding-left: 2px;
+                justify-content: flex-start;
             }
-        }
 
-        mat-slide-toggle {
-            margin: 10px;
-        }
+            &__actualinfo-block {
+                order: 2;
+                width: 40%;
+                box-sizing: border-box;
+                padding-right: 2px;
+                justify-content: flex-end;
+            }
 
-        @media screen and ($mat-small) {
-            container-widget .app-grid-list {
-                flex-direction: column;
+            &__controls-block {
+                order: 4;
+                width: 40%;
+                box-sizing: border-box;
+                padding-right: 2px;
+                justify-content: flex-end;
             }
         }
     }
 
-    .app-accordion-panel {
-        .mat-expansion-panel {
-            background: inherit;
+    .app-list {
+        .app-datatable-list {
+            border: none;
         }
+    }
 
-        .mat-expansion-panel-header-title, .mat-expansion-panel-header-description {
-            flex-basis: 0;
-            align-items: center;
-        }
+    mat-slide-toggle {
+        margin: 10px;
+    }
 
-        .mat-expansion-panel-header-description {
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        .app-accordion-title-padding {
-            padding-left: 20px;
+    @media screen and (max-width: 959px) {
+        container-widget .app-grid-list {
+            flex-direction: column;
         }
     }
 }
+
+.app-accordion-panel {
+    .mat-expansion-panel {
+        background: inherit;
+    }
+
+    .mat-expansion-panel-header-title,
+    .mat-expansion-panel-header-description {
+        flex-basis: 0;
+        align-items: center;
+    }
+
+    .mat-expansion-panel-header-description {
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .app-accordion-title-padding {
+        padding-left: 20px;
+    }
+}

demo-shell/src/app/components/process-service/process-service.component.ts

@@ -31,7 +31,8 @@ import {
 import { ActivatedRoute, Router } from '@angular/router';
 import {
     Pagination,
-    UserProcessInstanceFilterRepresentation
+    UserProcessInstanceFilterRepresentation,
+    ScriptFilesApi
 } from '@alfresco/js-api';
 import {
     FORM_FIELD_VALIDATORS, FormRenderingService, FormService,
@@ -113,10 +114,10 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
     @Input()
     appId: number = null;
 
-    filterSelected: object = null;
+    filterSelected: any = null;
 
     @Output()
-    changePageSize: EventEmitter<Pagination> = new EventEmitter();
+    changePageSize = new EventEmitter<Pagination>();
 
     selectFirstReport = false;
     multiSelectTask = false;
@@ -167,6 +168,7 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
     ];
 
     private onDestroy$ = new Subject<boolean>();
+    private scriptFileApi: ScriptFilesApi;
 
     constructor(private elementRef: ElementRef,
                 private route: ActivatedRoute,
@@ -181,6 +183,7 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
                 private notificationService: NotificationService,
                 private preferenceService: UserPreferencesService) {
 
+        this.scriptFileApi = new ScriptFilesApi(this.apiService.getInstance());
         this.defaultProcessName = this.appConfig.get<string>('adf-start-process.name');
         this.defaultProcessDefinitionName = this.appConfig.get<string>('adf-start-process.processDefinitionName');
         this.defaultTaskName = this.appConfig.get<string>('adf-start-task.name');
@@ -488,7 +491,7 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
     }
 
     loadStencilScriptsInPageFromProcessService() {
-        this.apiService.getInstance().activiti.scriptFileApi.getControllers().then((response) => {
+        this.scriptFileApi.getControllers().then((response) => {
             if (response) {
                 const stencilScript = document.createElement('script');
                 stencilScript.type = 'text/javascript';

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

@@ -0,0 +1,39 @@
+<div class="app-search-results">
+    <div class="app-search-results__content">
+        <mat-progress-bar *ngIf="isLoading" color="primary" mode="indeterminate"></mat-progress-bar>
+        <div class="app-search-results__sorting">
+            <div style="padding: 0 12px">
+                <adf-search-form></adf-search-form>
+            </div>
+
+            <mat-divider [vertical]="true"></mat-divider>
+
+            <div style="padding: 0 12px; flex: 65%">
+                <adf-search-filter-chips></adf-search-filter-chips>
+            </div>
+
+            <mat-icon adf-reset-search matTooltip="reset" style="padding-right: 5px;">refresh</mat-icon>
+
+            <adf-search-sorting-picker style="width: 240px"></adf-search-sorting-picker>
+        </div>
+        <app-files-component
+            [showHeader]="showHeader"
+            [sorting]="sorting"
+            [sortingMode]="'server'"
+            [showRecentFiles]="false"
+            [showSitePicker]="false"
+            [showSettingsPanel]="false"
+            [currentFolderId]="null"
+            [nodeResult]="$any(data)"
+            [disableDragArea]="true"
+            [pagination]="pagination"
+            [searchTerm]="searchedWord"
+            (changedPageSize)="onRefreshPagination($event)"
+            (changedPageNumber)="onRefreshPagination($event)"
+            (turnedNextPage)="onRefreshPagination($event)"
+            (loadNext)="onRefreshPagination($event)"
+            (turnedPreviousPage)="onRefreshPagination($event)"
+            (deleteElementSuccess)="onDeleteElementSuccess()">
+        </app-files-component>
+    </div>
+</div>

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

@@ -0,0 +1,44 @@
+.app-search-results {
+    display: flex;
+    margin-left: 5px;
+
+    .app-search-settings {
+        width: 260px;
+        border: 1px solid #eee;
+    }
+
+    &__facets {
+        margin: 5px;
+    }
+
+    &__content {
+        flex: 1;
+    }
+
+    &__sorting {
+        padding-top: 16px;
+        padding-bottom: 16px;
+        display: flex;
+    }
+}
+
+div.app-search-results-container {
+    padding: 0 20px 20px;
+}
+
+.app-search-title {
+    font-size: 22px;
+    padding: 15px 0;
+}
+
+@media screen and (max-width: 600px) {
+    :host .app-col-display-name {
+        min-width: 100px;
+    }
+    :host .app-col-modified-at, :host .app-col-modified-by {
+        display: none;
+    }
+    :host div.app-search-results-container table {
+        width: 100%;
+    }
+}

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

@@ -0,0 +1,168 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * 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, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute, Params, Router } from '@angular/router';
+import { Pagination, ResultSetPaging } from '@alfresco/js-api';
+import { SearchConfiguration, SearchForm, SearchQueryBuilderService } from '@alfresco/adf-content-services';
+import { SearchService, ShowHeaderMode, UserPreferencesService } from '@alfresco/adf-core';
+import { combineLatest, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+    selector: 'app-search-filter-chips',
+    templateUrl: './search-filter-chips.component.html',
+    styleUrls: [ './search-filter-chips.component.scss' ],
+    providers: [SearchService]
+})
+export class SearchFilterChipsComponent implements OnInit, OnDestroy {
+
+    queryParamName = 'q';
+    searchedWord = '';
+    data: ResultSetPaging;
+    pagination: Pagination;
+    isLoading = true;
+
+    sorting = ['name', 'asc'];
+    searchForms: SearchForm[];
+    showHeader = ShowHeaderMode.Always;
+
+    private onDestroy$ = new Subject<boolean>();
+
+    constructor(public router: Router,
+                private preferences: UserPreferencesService,
+                private queryBuilder: SearchQueryBuilderService,
+                private route: ActivatedRoute) {
+        combineLatest([this.route.params, this.queryBuilder.configUpdated])
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(([params, searchConfig]) => {
+                this.updateSearchSetting(searchConfig);
+                this.searchedWord = params.hasOwnProperty(this.queryParamName) ? params[this.queryParamName] : null;
+                const query = this.formatSearchQuery(this.searchedWord, searchConfig['app:fields']);
+                if (query) {
+                    this.queryBuilder.userQuery = query;
+                }
+        });
+
+        queryBuilder.paging = {
+            maxItems: this.preferences.paginationSize,
+            skipCount: 0
+        };
+    }
+
+    ngOnInit() {
+        this.queryBuilder.resetToDefaults();
+
+        this.sorting = this.getSorting();
+
+        this.queryBuilder.updated
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(() => {
+                this.sorting = this.getSorting();
+                this.isLoading = true;
+            });
+
+        this.queryBuilder.executed
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe((resultSetPaging: ResultSetPaging) => {
+                this.queryBuilder.paging.skipCount = 0;
+
+                this.onSearchResultLoaded(resultSetPaging);
+                this.isLoading = false;
+            });
+
+        if (this.route) {
+            this.route.params.forEach((params: Params) => {
+                this.searchedWord = params.hasOwnProperty(this.queryParamName) ? params[this.queryParamName] : null;
+                if (this.searchedWord) {
+                    this.queryBuilder.update();
+                } else {
+                    this.queryBuilder.userQuery = null;
+                    this.queryBuilder.executed.next(new ResultSetPaging({
+                        list: {
+                            pagination: { totalItems: 0 },
+                            entries: []
+                        }
+                    }));
+                }
+            });
+        }
+    }
+
+    private formatSearchQuery(userInput: string, fields =  ['cm:name']) {
+        if (!userInput) {
+            return null;
+        }
+        return fields.map((field) => `${field}:"${userInput}*"`).join(' OR ');
+    }
+
+    ngOnDestroy() {
+        this.onDestroy$.next(true);
+        this.onDestroy$.complete();
+    }
+
+    onSearchResultLoaded(resultSetPaging: ResultSetPaging) {
+        this.data = resultSetPaging;
+        this.pagination = { ...resultSetPaging.list.pagination };
+    }
+
+    onRefreshPagination(pagination: Pagination) {
+        this.queryBuilder.paging = {
+            maxItems: pagination.maxItems,
+            skipCount: pagination.skipCount
+        };
+        this.queryBuilder.update();
+    }
+
+    onDeleteElementSuccess() {
+        this.queryBuilder.execute();
+    }
+
+    private getSorting(): string[] {
+        const primary = this.queryBuilder.getPrimarySorting();
+
+        if (primary) {
+            return [primary.key, primary.ascending ? 'asc' : 'desc'];
+        }
+
+        return ['name', 'asc'];
+    }
+
+    private updateSearchSetting(config: SearchConfiguration): void {
+        if (config.facetQueries) {
+            this.updateSetting(config.facetQueries);
+        }
+
+        if (config.facetFields?.fields?.length) {
+            config.facetFields.fields.forEach((field) => this.updateSetting(field));
+        }
+
+        if (config.facetIntervals?.intervals?.length) {
+            config.facetIntervals.intervals.forEach((field) => this.updateSetting(field));
+        }
+
+        if (config.categories.length) {
+            config.categories.forEach((field) => this.updateSetting(field.component));
+        }
+    }
+
+    private updateSetting(field) {
+        field.settings = field.settings ?? {};
+        field.settings.allowUpdateOnChange = false;
+        field.settings.hideDefaultAction = true;
+    }
+}

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

@@ -9,16 +9,20 @@
         <mat-progress-bar *ngIf="isLoading" color="primary" mode="indeterminate"></mat-progress-bar>
         <div class="app-search-results__sorting">
             <adf-search-sorting-picker></adf-search-sorting-picker>
+
+            <div style="padding: 0 12px">
+                <button mat-stroked-button (click)="switchLayout()"> Switch to new layout </button>
+            </div>
         </div>
         <app-files-component
-            [showHeader]="false"
+            [showHeader]="showHeader"
             [sorting]="sorting"
             [sortingMode]="'server'"
             [showRecentFiles]="false"
             [showSitePicker]="false"
             [showSettingsPanel]="false"
             [currentFolderId]="null"
-            [nodeResult]="data"
+            [nodeResult]="$any(data)"
             [disableDragArea]="true"
             [pagination]="pagination"
             [searchTerm]="searchedWord"

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

@@ -16,7 +16,11 @@
     }
 
     &__sorting {
-        text-align: right;
+        padding-top: 16px;
+        padding-bottom: 16px;
+        display: flex;
+        flex-direction: row-reverse;
+        justify-content: space-between;
     }
 }
 

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

@@ -15,12 +15,12 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, Optional, OnDestroy } from '@angular/core';
-import { Router, ActivatedRoute, Params } from '@angular/router';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute, Params, Router } from '@angular/router';
 import { Pagination, ResultSetPaging } from '@alfresco/js-api';
-import { SearchQueryBuilderService } from '@alfresco/adf-content-services';
-import { UserPreferencesService, SearchService, AppConfigService } from '@alfresco/adf-core';
-import { Subject } from 'rxjs';
+import { SearchForm, SearchQueryBuilderService } from '@alfresco/adf-content-services';
+import { SearchService, ShowHeaderMode, UserPreferencesService } from '@alfresco/adf-core';
+import { combineLatest, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
@@ -38,14 +38,25 @@ export class SearchResultComponent implements OnInit, OnDestroy {
     isLoading = true;
 
     sorting = ['name', 'asc'];
+    searchForms: SearchForm[];
+    showHeader = ShowHeaderMode.Always;
 
     private onDestroy$ = new Subject<boolean>();
 
     constructor(public router: Router,
-                private config: AppConfigService,
                 private preferences: UserPreferencesService,
                 private queryBuilder: SearchQueryBuilderService,
-                @Optional() private route: ActivatedRoute) {
+                private route: ActivatedRoute) {
+        combineLatest([this.route.params, this.queryBuilder.configUpdated])
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(([params, searchConfig]) => {
+                this.searchedWord = params.hasOwnProperty(this.queryParamName) ? params[this.queryParamName] : null;
+                const query = this.formatSearchQuery(this.searchedWord, searchConfig['app:fields']);
+                if (query) {
+                    this.queryBuilder.userQuery = query;
+                }
+        });
+
         queryBuilder.paging = {
             maxItems: this.preferences.paginationSize,
             skipCount: 0
@@ -76,10 +87,7 @@ export class SearchResultComponent implements OnInit, OnDestroy {
         if (this.route) {
             this.route.params.forEach((params: Params) => {
                 this.searchedWord = params.hasOwnProperty(this.queryParamName) ? params[this.queryParamName] : null;
-                const query = this.formatSearchQuery(this.searchedWord);
-
-                if (query) {
-                    this.queryBuilder.userQuery = query;
+                if (this.searchedWord) {
                     this.queryBuilder.update();
                 } else {
                     this.queryBuilder.userQuery = null;
@@ -94,15 +102,11 @@ export class SearchResultComponent implements OnInit, OnDestroy {
         }
     }
 
-    private formatSearchQuery(userInput: string) {
+    private formatSearchQuery(userInput: string, fields =  ['cm:name']) {
         if (!userInput) {
             return null;
         }
-
-        const fields = this.config.get<string[]>('search.app:fields', ['cm:name']);
-        const query = fields.map((field) => `${field}:"${userInput}*"`).join(' OR ');
-
-        return query;
+        return fields.map((field) => `${field}:"${userInput}*"`).join(' OR ');
     }
 
     ngOnDestroy() {
@@ -136,4 +140,8 @@ export class SearchResultComponent implements OnInit, OnDestroy {
 
         return ['name', 'asc'];
     }
+
+    switchLayout() {
+        this.router.navigate(['search-filter-chips', { q: this.searchedWord }] );
+    }
 }

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

@@ -21,7 +21,7 @@ import { Router } from '@angular/router';
 
 @Component({
     selector: 'app-settings',
-    templateUrl: 'settings.component.html'
+    templateUrl: './settings.component.html'
 })
 export class SettingsComponent {
 

demo-shell/src/app/components/shared-link-view/shared-link-view.component.ts

@@ -20,8 +20,8 @@ import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
     selector: 'app-shared-link-view',
-    templateUrl: 'shared-link-view.component.html',
-    styleUrls: [ 'shared-link-view.component.scss' ],
+    templateUrl: './shared-link-view.component.html',
+    styleUrls: [ './shared-link-view.component.scss' ],
     encapsulation: ViewEncapsulation.None,
     // tslint:disable-next-line:use-host-property-decorator
     host: { 'class': 'app-shared-link-view' }