[AAE-2020] Add release version filter for process instances (#5581)

* [AAE-2020] Add release version filter for process instances

* Updated unit tests

* Updated unit test case

* Added translation key

.github/CODEOWNERS

@@ -0,0 +1,18 @@
+# Each line is a file pattern followed by one or more owners.
+
+ # These owners will be the default owners for everything in
+# the repo. Unless a later match takes precedence,
+# these users will be requested for
+# review when someone opens a pull request.
+*   @eromano @popovicsandras @DenysVuika
+
+ # Order is important; the last matching pattern takes the most
+# precedence. When someone opens a pull request that only
+# modifies JS files, only @js-owner and not the global
+# owner(s) will be requested for a review.
+/e2e/   @eromano @cristinaj
+
+ # The `docs/*` pattern will match files like
+# `docs/getting-started.md` but not further nested files like
+# `docs/build-app/troubleshooting.md`.
+/docs/  @m-hulbert  @eromano

.gitignore

@@ -3,32 +3,23 @@ node_modules
 bundles
 workspace.xml
 .idea/
+.env.*
+.env
 dist/
+e2e/.env.cloud
 tmp
 e2e-output/
-e2e/downloads/
-ng2-components/coverage/
-!systemjs.config.js
-demo-shell-ng2/app/components/router/
-ng2-components/ng2-alfresco-userinfo-old/demo/src/app/
-ng2-components/ng2-alfresco-userinfo-old/src/services/bpm-user.service.spec.ts
-ng2-components/ng2-alfresco-userinfo-old/src/services/ecm-user.service.spec.ts
-src/environments/
-/ng2-components/ng2-example-webpack/
-/ng2-components/config/coverage/
+/e2e/downloads/
 *.npmrc
-/demo-shell-ng2/ng2-components/
-.happypack/
 .history
 /ng2-components/ng2-alfresco-core/prebuilt-themes/
 .ng_pkg_build/
 /demo-shell/dist-dev-temp/
 /lib/export-new.json
 /lib/config/exportCheck.js
-/lib/config/export-check/export-new.json
-/lib/config/export-check/exportCheck.js
 /docs/sourceinfo
 /docs/docs.json
 /protractorFailuresReport
 coverage/
 /desktop.ini
+out-tsc

.mergify.yml

@@ -0,0 +1,20 @@
+pull_request_rules:
+    - name: automatic merge for Dependabot pull requests
+      conditions:
+          - author=dependabot-preview[bot]
+          - status-success=continuous-integration/travis-ci/pr
+          - status-success=security/snyk - package.json (eromano (GitHub marketplace))
+      actions:
+          merge:
+              method: merge
+    - name: merge when all requested reviews are valid
+      conditions:
+          - status-success=continuous-integration/travis-ci/pr
+          - status-success=security/snyk - package.json (eromano (GitHub marketplace))
+          - '#approved-reviews-by>=1'
+          - '#changes-requested-reviews-by=0'
+          - '#commented-reviews-by=0'
+          - label!="do not merge"
+      actions:
+          merge:
+              method: merge

.snyk

@@ -0,0 +1,13 @@
+# Snyk (https://snyk.io) policy file, patches or ignores known vulnerabilities.
+version: v1.14.0
+ignore: {}
+# patches apply the minimum changes required to fix a vulnerability
+patch:
+  SNYK-JS-HTTPSPROXYAGENT-469131:
+    - '@alfresco/adf-cli > npm-registry-fetch > make-fetch-happen > https-proxy-agent':
+        patched: '2019-11-20T10:48:59.194Z'
+    - '@alfresco/js-api > @alfresco/adf-cli > npm-registry-fetch > make-fetch-happen > https-proxy-agent':
+        patched: '2019-11-20T10:48:59.194Z'
+  SNYK-JS-TREEKILL-536781:
+    - snyk > snyk-sbt-plugin > tree-kill:
+        patched: '2019-12-12T00:35:06.820Z'

.stylelintignore

@@ -1 +1,2 @@
 _theming.scss
+lib/core/viewer/components/pdf-viewer-host.component.scss

.travis.yml

@@ -1,12 +1,11 @@
 git:
   depth: 3
   quiet: true
+
 language: node_js
 dist: trusty
-sudo: required
 node_js:
- # Use the explicit NodeJS LTS version 8.9.4 to avoid any automatic upgrade of the version.
-  - '8.9.4'
+  - '12.13.1'
 
 install:
     echo "no install"
@@ -15,24 +14,38 @@ branches:
   only:
   - master
   - development
-  - /.*old-env.*/  
+  - /.*old-env.*/
   - /.*next-release.*/
   - /.*beta.*/
   - /.*greenkeeper.*/
 
 # TRAVIS_PULL_REQUEST == false means is running on dev branch and is not a PR
 stages:
-  - name: Warm Up Cache & Lint & Build Dist
+  - name: Lint & Build Dist
+    if: type = pull_request OR type = api
+  - name: Lint & Build Dist & Release
+    if: (type = push OR type = cron) AND tag IS blank
+  - name: Update Rancher
+    if: (type = push AND tag IS blank)  OR type = api
+  - name: Check bundle
+    if: type = push AND tag IS blank
   - name: Unit test
+    if: (type != cron AND tag IS blank) OR type = api
   - name: e2e Test
-  - name: Create Docker PR
-  - name: Deploy Docker PR
+    if: (type != cron AND tag IS blank) OR type = api
+  - name: Update Children Projects
+    if: branch = master AND type = push OR (tag =~ .*beta.*)
+  - name: Release beta tag
+    if: type = cron OR branch = master
+  - name: Trigger ADF child build
+    if: (branch = development AND type = push) OR type = api
 
 addons:
     chrome: stable
 before_script:
     - "sudo chown root /opt/google/chrome/chrome-sandbox"
     - "sudo chmod 4755 /opt/google/chrome/chrome-sandbox"
+    - export GIT_HASH=`git rev-parse HEAD`
 
 before_install:
     - export CHROME_BIN=chromium-browser
@@ -42,174 +55,82 @@ before_install:
 
 jobs:
     include:
-        - stage: Warm Up Cache & Lint & Build Dist
+        # Run Only for any PR
+        - stage: Lint & Build Dist
+          name:  Lint & Build Dist
           script:
-            - if [[ $TRAVIS_PULL_REQUEST == "false" ]];
-              then
-               ./scripts/lint.sh || exit 1;
-               ./scripts/npm-build-all.sh || exit 1;
-              else
-               ./scripts/update-version.sh -gnu -alpha || exit 1;
-               npm install;
-               ./scripts/lint.sh || exit 1;
-               rm -rf tmp && mkdir tmp;
-               git merge-base origin/$TRAVIS_BRANCH HEAD > ./tmp/devhead.txt;
-               ./scripts/smart-build.sh -b $TRAVIS_BRANCH  -gnu || exit 1;
-              fi;
-              npm run build:dist || exit 1;
-              ./scripts/license-list-generator.sh || exit 1;
-        - stage: Unit test
-          name: core and extensions
-          script:
-            AFFECTED_LIBS="$(./scripts/affected-libs.sh -gnu -b $TRAVIS_BRANCH)";
-            if [[ $AFFECTED_LIBS =~ "core$" || $TRAVIS_PULL_REQUEST == "false" ]];
-            then
-                ng test core --watch=false || exit 1;
-            fi;
-            AFFECTED_LIBS="$(./scripts/affected-libs.sh -gnu -b $TRAVIS_BRANCH)";
-            if [[ $AFFECTED_LIBS =~ "extensions$" || $TRAVIS_PULL_REQUEST == "false"  ]];
-            then
-                ng test extensions --watch=false || exit 1;
-            fi;
-        - stage: Unit test
-          name: process-services and insights
-          script:
-            AFFECTED_LIBS="$(./scripts/affected-libs.sh -gnu -b $TRAVIS_BRANCH)";
-            if [[ $AFFECTED_LIBS =~ "process-services$" || $TRAVIS_PULL_REQUEST == "false"  ]];
-            then
-                ng test process-services --watch=false || exit 1;
-            fi;
-            AFFECTED_LIBS="$(./scripts/affected-libs.sh -gnu -b $TRAVIS_BRANCH)";
-            if [[ $AFFECTED_LIBS =~ "insights$" || $TRAVIS_PULL_REQUEST == "false"  ]];
-            then
-                ng test insights --watch=false || exit 1;
-            fi;
-        - stage: Unit test
-          name: content-services
-          script:
-            AFFECTED_LIBS="$(./scripts/affected-libs.sh -gnu -b $TRAVIS_BRANCH)";
-            if [[ $AFFECTED_LIBS =~ "content-services$" || $TRAVIS_PULL_REQUEST == "false"  ]];
-            then
-                ng test content-services --watch=false || exit 1;
-            fi;
-        - stage: Unit test
-          name: process-services-cloud
-          script:
-            AFFECTED_LIBS="$(./scripts/affected-libs.sh -gnu -b $TRAVIS_BRANCH)";
-            if [[ $AFFECTED_LIBS =~ "process-services-cloud$" || $TRAVIS_PULL_REQUEST == "false"  ]];
-            then
-                ng test process-services-cloud --watch=false || exit 1;
-            fi;
-        - stage: Unit test
-          name: demo-shell
-          script:   if ([ "$TRAVIS_BRANCH" = "master" ]); then
-                            (./scripts/start.sh -t -ss  -si || exit 1;);
-                       else
-                            (./scripts/start.sh -dev -t -ss -si || exit 1;);
-                    fi;
-        - stage: Update children projects dependency #Update generator-ng2-alfresco-app
-          name: Update Generator
-          if: tag =~ .*beta.*
-          script: ./scripts/update-project.sh -gnu -t $GITHUB_TOKEN -n 'Alfresco/generator-ng2-alfresco-app'
-        - stage: Update children projects dependency # Test Update alfresco-content-app
-          name: Update ACA
-          if: tag =~ .*beta.*
-          script: ./scripts/update-project.sh -gnu -t $GITHUB_TOKEN -n 'Alfresco/alfresco-content-app'
-        - stage: Update children projects dependency # Test Update adf-app-manager-ui
-          name: Update adf-app-manager-ui
-          if: tag =~ .*beta.*
-          script: ./scripts/update-project.sh -gnu -t $GITHUB_TOKEN -n 'Alfresco/adf-app-manager-ui'
-        - stage: Update children projects dependency # Test Update alfresco-ng2-components
-          name: Update alfresco-ng2-components
-          if: tag =~ .*beta.*
-          script: ./scripts/update-project.sh -gnu -t $GITHUB_TOKEN -n 'Alfresco/alfresco-ng2-components'
-        - stage: Update children projects dependency # Test Update alfresco-modeler-app
-          name: Update alfresco modeler app
-          if: tag =~ .*beta.*
-          script: ./scripts/update-project.sh -gnu -t $GITHUB_TOKEN -n 'Alfresco/alfresco-modeler-app'
-        - stage: Update children projects dependency # Test Update activiti-modeling-app
-          name: Update alfresco modeler activiti app
-          if: tag =~ .*beta.*
-          script: ./scripts/update-project.sh -gnu -t $GITHUB_TOKEN -n 'Activiti/activiti-modeling-app'
-        - stage: Update children projects dependency # Test alfresco-admin-app
-          name: Update alfresco admin app
-          if: tag =~ .*beta.*
-          script: ./scripts/update-project.sh -gnu -t $GITHUB_TOKEN -n 'Alfresco/alfresco-admin-app'
-        - stage: e2e Test # Test core
-          name: core
-          script:
-            AFFECTED_E2E="$(./scripts/affected-folder.sh -b $TRAVIS_BRANCH -f "e2e")";
-            AFFECTED_LIBS="$(./scripts/affected-libs.sh -gnu -b $TRAVIS_BRANCH)";
-            if [[ $AFFECTED_LIBS =~ "core$" || $AFFECTED_E2E = "e2e" || $TRAVIS_PULL_REQUEST == "false"  ]];
-            then
-                node ./scripts/check-ps-env.js --host "$E2E_HOST" -u "$E2E_USERNAME" -p "$E2E_PASSWORD" || exit 1;
-                node ./scripts/check-cs-env.js --host "$E2E_HOST" -u "$E2E_USERNAME" -p "$E2E_PASSWORD" || exit 1;
-                ./scripts/test-e2e-lib.sh -host localhost:4200 -proxy "$E2E_HOST" -u "$E2E_USERNAME" -p "$E2E_PASSWORD" -e "$E2E_EMAIL" --folder core --skip-lint -save --use-dist || exit 1;
-            fi;
-        - stage: e2e Test # Test process-services
-          name: process-services
-          script:
-            AFFECTED_E2E="$(./scripts/affected-folder.sh -b $TRAVIS_BRANCH -f "e2e")";
-            AFFECTED_LIBS="$(./scripts/affected-libs.sh -gnu -b $TRAVIS_BRANCH)";
-            if [[ $AFFECTED_LIBS =~ "process-services$" || $AFFECTED_E2E = "e2e" || $TRAVIS_PULL_REQUEST == "false"  ]];
-            then
-                node ./scripts/check-ps-env.js --host "$E2E_HOST" -u "$E2E_USERNAME" -p "$E2E_PASSWORD" || exit 1;
-                ./scripts/test-e2e-lib.sh -host localhost:4200 -proxy "$E2E_HOST" -u "$E2E_USERNAME" -p "$E2E_PASSWORD" -e "$E2E_EMAIL" --folder process-services --skip-lint --use-dist  || exit 1;
-            fi;
-        - stage: e2e Test # Test content-services
-          name: content-services
-          script:
-            AFFECTED_E2E="$(./scripts/affected-folder.sh -b $TRAVIS_BRANCH -f "e2e")";
-            AFFECTED_LIBS="$(./scripts/affected-libs.sh -gnu -b $TRAVIS_BRANCH)";
-            if [[ $AFFECTED_LIBS =~ "content-services$" || $AFFECTED_E2E = "e2e" || $TRAVIS_PULL_REQUEST == "false"  ]];
-            then
-                node ./scripts/check-cs-env.js --host "$E2E_HOST" -u "$E2E_USERNAME" -p "$E2E_PASSWORD" || exit 1;
-                ./scripts/test-e2e-lib.sh -host localhost:4200 -proxy "$E2E_HOST" -u "$E2E_USERNAME" -p "$E2E_PASSWORD" -e "$E2E_EMAIL" --folder content-services --skip-lint --use-dist  || exit 1;
-            fi;
-        - stage: e2e Test # Test search
-          name: search
-          script:
-            AFFECTED_E2E="$(./scripts/affected-folder.sh -b $TRAVIS_BRANCH -f "e2e")";
-            AFFECTED_LIBS="$(./scripts/affected-libs.sh -gnu -b $TRAVIS_BRANCH)";
-            if [[ $AFFECTED_LIBS =~ "content-services$"  || $AFFECTED_E2E = "e2e" || $TRAVIS_PULL_REQUEST == "false"  ]];
-            then
-                node ./scripts/check-cs-env.js --host "$E2E_HOST" -u "$E2E_USERNAME" -p "$E2E_PASSWORD" || exit 1;
-                ./scripts/test-e2e-lib.sh -host localhost:4200 -proxy "$E2E_HOST" -u "$E2E_USERNAME" -p "$E2E_PASSWORD" -e "$E2E_EMAIL" --folder search --skip-lint --use-dist  || exit 1;
-            fi;
-        - stage: e2e Test # Test process-services-cloud
-          name: process-services-cloud
-          script:
-            AFFECTED_E2E="$(./scripts/affected-folder.sh -b $TRAVIS_BRANCH -f "e2e")";
-            AFFECTED_LIBS="$(./scripts/affected-libs.sh -gnu -b $TRAVIS_BRANCH)";
-            if [[ $AFFECTED_LIBS =~ "process-services-cloud$" || $AFFECTED_E2E = "e2e" || $TRAVIS_PULL_REQUEST == "false"  ]];
-            then
-                node ./scripts/check-activiti-env.js --host "$E2E_HOST_BPM" -u "$E2E_USERNAME" -p "$E2E_PASSWORD" --client 'activiti' || exit 1;
-                ./scripts/test-e2e-lib.sh -host localhost:4200 -proxy "$E2E_HOST_BPM" -u "$E2E_USERNAME" -p "$E2E_PASSWORD" -e "$E2E_EMAIL" --folder process-services-cloud --skip-lint --use-dist -timeout 8000  || exit 1;
-            fi;
-        - stage: e2e Test # Test insights
-          name: insights
-          script:
-            AFFECTED_E2E="$(./scripts/affected-folder.sh -b $TRAVIS_BRANCH -f "e2e")";
-            AFFECTED_LIBS="$(./scripts/affected-libs.sh -gnu -b $TRAVIS_BRANCH)";
-            if [[ $AFFECTED_LIBS =~ "process-services-cloud$" || $AFFECTED_E2E = "e2e" || $TRAVIS_PULL_REQUEST == "false"  ]];
-            then
-              node ./scripts/check-ps-env.js --host "$E2E_HOST" -u "$E2E_USERNAME" -p "$E2E_PASSWORD" || exit 1;
-              ./scripts/test-e2e-lib.sh -host localhost:4200 -proxy "$E2E_HOST" -u "$E2E_USERNAME" -p "$E2E_PASSWORD" -e "$E2E_EMAIL" --folder insights --skip-lint --use-dist  || exit 1;
-            fi;
-        - stage: Create Docker and Deploy Docker PR
-          script:
-          - if [ "$TRAVIS_PULL_REQUEST" != "false" ];
-            then
-              node ./scripts/move-dist-folder.js --base-href $TRAVIS_BUILD_NUMBER && (./scripts/pr-publish.sh -n $TRAVIS_BUILD_NUMBER -r $REPO_DOCKER -u $USERNAME_DOCKER -p $PASSWORD_DOCKER || exit 1);
-            fi;
-          - if [ "$TRAVIS_PULL_REQUEST" != "false" ];
-            then
-              (node --no-deprecation ./scripts/pr-deploy.js -n $TRAVIS_BUILD_NUMBER -u $RANCHER_TOKEN -p $RANCHER_SECRET -s $REPO_RANCHER --image "docker:$REPO_DOCKER/adf/demo-shell:$TRAVIS_BUILD_NUMBER" --env $ENVIRONMENT_NAME -r $ENVIRONMENT_URL || exit 1);
-            fi;
+            - ./scripts/travis/build/build.sh || exit 1;
+            - ./scripts/lint.sh || exit 1;
 
-# Send coverage data to codecov
-after_success:
-    bash <(curl -s https://codecov.io/bash) -X gcov
+        # Run Only on Development and master
+        - stage: Lint & Build Dist & Release
+          name:  Lint & Build Dist & Release
+          script:
+            - ./scripts/travis/build/build.sh || exit 1;
+            - ./scripts/lint.sh || exit 1;
+            - ./scripts/travis/release/release-npm.sh
+
+
+        - stage: Unit test
+          name: Unit test content
+          script:  ./scripts/travis/unit-test/content.sh
+        - stage: Unit test
+          name: Unit test core extension demo
+          script: ./scripts/travis/unit-test/core-extension.sh
+        - stage: Unit test
+          name: Unit test process process-cloud insights
+          script: ./scripts/travis/unit-test/process.sh
+
+
+        - stage: Update Children Projects
+          script: ./scripts/travis/update/update-children.sh
+
+        - stage: Release beta tag
+          script: ./scripts/travis/release/git-tag.sh
+
+
+        - stage: e2e Test
+          name: core
+          script: ./scripts/travis/e2e/core-e2e.sh
+        - stage: e2e Test
+          name:  content
+          script: ./scripts/travis/e2e/content-services-e2e.sh
+        - stage: e2e Test
+          name:  search
+          script: ./scripts/travis/e2e/search-e2e.sh
+        - stage: e2e Test
+          name: process
+          script: ./scripts/travis/e2e/process-services-e2e.sh
+        - stage: e2e Test
+          name: process Cloud
+          script: ./scripts/travis/e2e/process-services-cloud-e2e.sh
+
+
+        - stage: Update Rancher
+          name: Update Rancher
+          script: ./scripts/travis/deploy/deploy.sh
+
+
+        - stage: Check bundle
+          script:
+          - ADF_VERSION=$(npm view @alfresco/adf-core@${TAG_NPM} version)
+          - ./scripts/npm-check-bundles.sh -v ${ADF_VERSION}
+
+        - stage: Trigger ADF child build
+          name: Trigger ADF child build
+          script: ./scripts/travis/update/trigger-travis-children.sh --branch $TRAVIS_BRANCH Alfresco $TRAVIS_ACCESS_TOKEN
+
+notifications:
+  slack:
+    on_pull_requests: false
+    rooms:
+      secure: "qcTP/+rhVweMSZZAQMPz4sW7boS8XC0RX1SPYgg7hIfxBr9747WpRLkJ1sirkVaXI/6XfYAyl42CTfPmTuJxIC+co/NSnEDknwVsnKZd0O/ykTpo+mxIN4BTZX8dm+gELR5IEYQPs+Yki3ZnD9b+0mCK1yD8JallKCQeE2U9BhzZhP/Fn0ce35EulybNp3QQDaox0XC+7gadMdxlvK8mzP1scw76wRLtx25QLxxV+OwEw0bzyh8y3onfjHfnoDcUQWRTNdnjapzmgf1LNdC202A5kwp5sJggfSDr+ActRqaMvv4BbMsFpdan34B6zPQJfyZL1r8IB8O8BEKcAaOUVcTjnZAOom8kHS8F07/mo5xnNYmV8oNX2/egr1CiG4U0EAGF2XGqM+vetYnF88LTEzy84kVxmSwKGVfzlGOyTplMXJ1iCENndtfWm1AXhAFj5RSsSAZg6IStTM+mcpnC75moEwQtj8bTenwehHz1HQAjQX7xeTQo27SxDc7oqp1ReyXCllMjKxckjVGmp2j6yxn1Jl55kivBj57vluLtEtziOGluVELP5E2fV0VAuErNhnjLm4LJARVN76PQaTOXYwATVVJJDhb/77TesvxQsr3VfiROEKm7QB7IDFjghjLLisSX67JQ5+7K/qMlqf9+9hNw4n0v1eMylVjt+gyxspc="
+    on_failure: always
+    on_success: change
+    template:
+      - "Repo `%{repository_slug}` *%{result}* build (<%{build_url}|#%{build_number}>) for commit (<%{compare_url}|%{commit}>) on branch `%{branch}`."
+      - "Author: %{author} Execution time: *%{duration}*"
+      - "Message: %{message}"
 
 cache:
   directories:

.vscode/closest-config-finder.sh

@@ -0,0 +1,17 @@
+specFile=$1;
+configFile=$2;
+
+findconfig() {
+  if [ -f "$1" ]; then
+    printf '%s\n' "${PWD%/}/$1"
+  elif [ "$PWD" = / ]; then
+    false
+  else
+    (cd .. && findconfig $1)
+  fi
+}
+
+DIR=$(dirname "$specFile")
+cd $DIR
+configFile=`findconfig "$configFile"`;
+echo "$configFile";

.vscode/launch.json

@@ -0,0 +1,27 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+          "type": "node",
+          "request": "launch",
+          "name": "e2e",
+          "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
+          "args": [
+              "`${workspaceFolder}/.vscode/closest-config-finder.sh ${file} protractor.conf.ts`",
+              "--specs=${file}"
+          ],
+          "envFile": "${workspaceFolder}/.env",
+          "console": "integratedTerminal",
+          "sourceMaps": true,
+          "smartStep": true,
+          "skipFiles": [
+              "${workspaceFolder}/node_modules/**/*.js",
+              "<node_internals>/**/*.js"
+          ],
+          "internalConsoleOptions": "neverOpen"
+      }
+    ]
+}

README.md

@@ -1,20 +1,21 @@
 # Alfresco Application Development Framework (ADF)
 
+| branch | status |
+| --- | --- |
+| master | [![Build Status](https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master)](https://travis-ci.org/Alfresco/alfresco-ng2-components) |
+| development | [![Build Status](https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=development)](https://travis-ci.org/Alfresco/alfresco-ng2-components) |
+
 [![Codacy Badge](https://api.codacy.com/project/badge/Grade/d9eb873741da403bb3284778102372e7)](https://www.codacy.com/app/Alfresco/alfresco-ng2-components?utm_source=github.com&utm_medium=referral&utm_content=Alfresco/alfresco-ng2-components&utm_campaign=badger)
 [![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 title='Build Status Travis' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
-    <img src='https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master'  alt='travis
-    Status' />
-  </a>
   <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>
-</p>
+</p
 
 ## Introduction
 
@@ -65,4 +66,3 @@ All components are supported in the following browsers:
 * Due to a [known issue](https://bugzilla.mozilla.org/show_bug.cgi?id=1188880) in Firefox, the Alfresco Upload Component does not currently support folder upload functionality on Firefox.    
 
 See the [Browser Support](BROWSER-SUPPORT.md) article for more details. 
-

angular.json

@@ -23,9 +23,8 @@
             },
             "assets": [
               "demo-shell/src/assets",
-              "demo-shell/src/favicon.ico",
+              "demo-shell/src/favicon-96x96.png",
               "demo-shell/src/app.config.json",
-              "demo-shell/src/versions.json",
               {
                 "glob": "**/*",
                 "input": "demo-shell/resources",
@@ -78,6 +77,8 @@
               }
             ],
             "styles": [
+              "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.scss"
             ],
@@ -100,12 +101,29 @@
               "vendorChunk": true,
               "buildOptimizer": true,
               "verbose": false,
+              "budgets": [
+                {
+                  "type": "bundle",
+                  "name": "vendor",
+                  "baseline": "4.2MB",
+                  "warning": "4.5MB",
+                  "error": "5.0MB"
+                }
+              ],
               "fileReplacements": [
                 {
                   "replace": "demo-shell/src/environments/environment.ts",
                   "with": "demo-shell/src/environments/environment.prod.ts"
                 }
               ]
+            },
+            "e2e": {
+              "fileReplacements": [
+                {
+                  "replace": "demo-shell/src/environments/environment.ts",
+                  "with": "demo-shell/src/environments/environment.e2e.ts"
+                }
+              ]
             }
           }
         },
@@ -113,11 +131,17 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
             "browserTarget": "dist:build",
-            "port": 3000
+            "host": "0.0.0.0",
+            "port": 3000,
+            "proxyConfig": "demo-shell/proxy.conf.js",
+            "disableHostCheck": true
           },
           "configurations": {
             "production": {
               "browserTarget": "dist:build:production"
+            },
+            "e2e": {
+              "browserTarget": "dist:build:e2e"
             }
           }
         },
@@ -141,14 +165,15 @@
               "node_modules/moment/min/moment.min.js"
             ],
             "styles": [
+              "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.scss"
             ],
             "assets": [
               "demo-shell/src/assets",
-              "demo-shell/src/favicon.ico",
+              "demo-shell/src/favicon-96x96.png",
               "demo-shell/src/app.config.json",
-              "demo-shell/src/versions.json",
               {
                 "glob": "**/*",
                 "input": "demo-shell/resources",
@@ -209,7 +234,8 @@
               "./demo-shell/src/tsconfig.app.json"
             ],
             "exclude": [
-              "**/node_modules/**/*"
+              "**/node_modules/**/*",
+              "package.json"
             ]
           }
         }
@@ -236,7 +262,6 @@
             "assets": [
               "demo-shell/src/assets",
               "demo-shell/src/app.config.json",
-              "demo-shell/src/versions.json",
               {
                 "glob": "**/*",
                 "input": "demo-shell/src/assets",
@@ -247,11 +272,6 @@
                 "input": "demo-shell/src",
                 "output": "/"
               },
-              {
-                "glob": "versions.json",
-                "input": "demo-shell/src",
-                "output": "/"
-              },
               {
                 "glob": "**/*",
                 "input": "demo-shell/resources",
@@ -274,17 +294,17 @@
               },
               {
                 "glob": "**/*",
-                "input": "lib/process-services/assets",
+                "input": "lib/process-services/src/lib/assets",
                 "output": "/assets"
               },
               {
                 "glob": "**/*",
-                "input": "lib/process-services-cloud/assets",
+                "input": "lib/process-services-cloud/src/lib/assets",
                 "output": "/assets"
               },
               {
                 "glob": "**/*",
-                "input": "lib/content-services/assets",
+                "input": "lib/content-services/src/lib/assets",
                 "output": "/assets"
               },
               {
@@ -294,12 +314,12 @@
               },
               {
                 "glob": "**/*",
-                "input": "lib/content-services/i18n",
+                "input": "lib/content-services/src/lib/i18n",
                 "output": "/assets/adf-content-services/i18n"
               },
               {
                 "glob": "**/*",
-                "input": "lib/process-services/i18n",
+                "input": "lib/process-services/src/lib/i18n",
                 "output": "/assets/adf-process-services/i18n"
               },
               {
@@ -309,7 +329,7 @@
               },
               {
                 "glob": "**/*",
-                "input": "lib/insights/i18n",
+                "input": "lib/insights/src/lib/i18n",
                 "output": "/assets/adf-insights/i18n"
               },
               {
@@ -324,6 +344,8 @@
               }
             ],
             "styles": [
+              "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"
             ],
@@ -352,6 +374,14 @@
                   "with": "demo-shell/src/environments/environment.prod.ts"
                 }
               ]
+            },
+            "e2e": {
+              "fileReplacements": [
+                {
+                  "replace": "demo-shell/src/environments/environment.ts",
+                  "with": "demo-shell/src/environments/environment.e2e.ts"
+                }
+              ]
             }
           }
         },
@@ -359,11 +389,17 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
             "browserTarget": "dev:build",
-            "port": 3000
+            "host": "0.0.0.0",
+            "port": 3000,
+            "proxyConfig": "demo-shell/proxy.conf.js",
+            "disableHostCheck": true
           },
           "configurations": {
             "production": {
               "browserTarget": "dev:build:production"
+            },
+            "e2e": {
+              "browserTarget": "dev:build:e2e"
             }
           }
         },
@@ -387,13 +423,14 @@
               "node_modules/moment/min/moment.min.js"
             ],
             "styles": [
+              "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"
             ],
             "assets": [
               "demo-shell/src/assets",
               "demo-shell/src/app.config.json",
-              "demo-shell/src/versions.json",
               {
                 "glob": "**/*",
                 "input": "demo-shell/src/assets",
@@ -404,11 +441,6 @@
                 "input": "demo-shell/src",
                 "output": "/"
               },
-              {
-                "glob": "versions.json",
-                "input": "demo-shell/src",
-                "output": "/"
-              },
               {
                 "glob": "**/*",
                 "input": "demo-shell/resources",
@@ -431,17 +463,17 @@
               },
               {
                 "glob": "**/*",
-                "input": "lib/process-services/assets",
+                "input": "lib/process-services/src/lib/assets",
                 "output": "/assets"
               },
               {
                 "glob": "**/*",
-                "input": "lib/process-services-cloud/assets",
+                "input": "lib/process-services-cloud/src/lib/assets",
                 "output": "/assets"
               },
               {
                 "glob": "**/*",
-                "input": "lib/content-services/assets",
+                "input": "lib/content-services/src/lib/assets",
                 "output": "/assets"
               },
               {
@@ -451,12 +483,12 @@
               },
               {
                 "glob": "**/*",
-                "input": "lib/content-services/i18n",
+                "input": "lib/content-services/src/lib/i18n",
                 "output": "/assets/adf-content-services/i18n"
               },
               {
                 "glob": "**/*",
-                "input": "lib/process-services/i18n",
+                "input": "lib/process-services/src/lib/i18n",
                 "output": "/assets/adf-process-services/i18n"
               },
               {
@@ -466,7 +498,7 @@
               },
               {
                 "glob": "**/*",
-                "input": "lib/insights/i18n",
+                "input": "lib/insights/src/lib/i18n",
                 "output": "/assets/adf-insights/i18n"
               },
               {
@@ -489,7 +521,8 @@
               "./demo-shell/src/tsconfig.app.json"
             ],
             "exclude": [
-              "**/node_modules/**/*"
+              "**/node_modules/**/*",
+              "package.json"
             ]
           }
         }
@@ -516,14 +549,16 @@
         "e2e": {
           "builder": "@angular-devkit/build-angular:protractor",
           "options": {
-            "protractorConfig": "./protractor.conf.js",
+            "protractorConfig": "./protractor.conf.ts",
             "devServerTarget": "lib-e2e-test:serve"
           }
         },
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": [],
+            "tsConfig": [
+              "./e2e/tsconfig.e2e.json"
+            ],
             "exclude": [
               "**/node_modules/**/*"
             ]
@@ -575,7 +610,7 @@
     },
     "content-services": {
       "root": "lib/content-services",
-      "sourceRoot": "lib/content-services",
+      "sourceRoot": "lib/content-services/src",
       "projectType": "library",
       "prefix": "adf",
       "architect": {
@@ -594,7 +629,7 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "lib/content-services/test.ts",
+            "main": "lib/content-services/src/test.ts",
             "tsConfig": "lib/content-services/tsconfig.spec.json",
             "karmaConfig": "lib/content-services/karma.conf.js",
             "codeCoverage": true,
@@ -606,7 +641,7 @@
           "options": {
             "tsConfig": [
               "lib/content-services/tsconfig.lib.json",
-              "lib/content-services/tsconfig.lib.json"
+              "lib/content-services/tsconfig.spec.json"
             ],
             "exclude": [
               "**/node_modules/**"
@@ -636,7 +671,7 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "lib/process-services/test.ts",
+            "main": "lib/process-services/src/test.ts",
             "tsConfig": "lib/process-services/tsconfig.spec.json",
             "karmaConfig": "lib/process-services/karma.conf.js",
             "codeCoverage": true,
@@ -648,7 +683,7 @@
           "options": {
             "tsConfig": [
               "lib/process-services/tsconfig.lib.json",
-              "lib/process-services/tsconfig.lib.json"
+              "lib/process-services/tsconfig.spec.json"
             ],
             "exclude": [
               "**/node_modules/**"
@@ -708,7 +743,7 @@
         "build": {
           "builder": "@angular-devkit/build-ng-packagr:build",
           "options": {
-            "tsConfig": "lib/extensions/tsconfig.lib.json",
+            "tsConfig": "lib/insights/tsconfig.lib.json",
             "project": "lib/insights/ng-package.json"
           },
           "configurations": {
@@ -720,8 +755,8 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "lib/insights/test.ts",
-            "tsConfig": "lib/extensions/tsconfig.spec.json",
+            "main": "lib/insights/src/test.ts",
+            "tsConfig": "lib/insights/tsconfig.spec.json",
             "karmaConfig": "lib/insights/karma.conf.js",
             "codeCoverage": true,
             "sourceMap": true
@@ -732,7 +767,7 @@
           "options": {
             "tsConfig": [
               "lib/insights/tsconfig.lib.json",
-              "lib/insights/tsconfig.lib.json"
+              "lib/insights/tsconfig.spec.json"
             ],
             "exclude": [
               "**/node_modules/**"
@@ -812,6 +847,20 @@
           }
         }
       }
+    },
+    "cli": {
+      "root": "lib/cli",
+      "sourceRoot": "lib/cli",
+      "projectType": "library",
+      "prefix": "adf",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "lib/cli/tsconfig.json"
+          }
+        }
+      }
     }
   },
   "defaultProject": "dist"

appveyor.yml

@@ -1,63 +0,0 @@
-# Test against this version of Node.js
-branches:
-  only:
-    - master
-    - development
-    - dev-build-test
-
-environment:
-  nodejs_version: "8"
-
-  matrix:
-    - COMPONENT_NAME: process-service
-    - COMPONENT_NAME: content-service
-    - COMPONENT_NAME: core
-    - COMPONENT_NAME: insights
-#  - COMPONENT_NAME: ng2-demo-shell
-
-# Install scripts. (runs after repo cloning)
-install:
-  # Get the latest stable version of Node.js or io.js
-  - ps: Install-Product node $env:nodejs_version
-  # install module
-  - if %COMPONENT_NAME% EQU process-service (
-              if %APPVEYOR_REPO_BRANCH EQU master
-                (cd scripts && sh npm-build-all.sh -t "process-services"  || exit 1)
-              else
-                (cd scripts && sh npm-build-all.sh -t "process-services" -vjsapi alpha|| exit 1)
-    )
-  - if %COMPONENT_NAME% EQU content-service (
-              if %APPVEYOR_REPO_BRANCH EQU master
-                (cd scripts && sh npm-build-all.sh -t "content-services"  || exit 1)
-              else
-                (cd scripts && sh npm-build-all.sh -t "content-services" -vjsapi alpha|| exit 1)
-    )
-  - if %COMPONENT_NAME% EQU insights (
-              if %APPVEYOR_REPO_BRANCH EQU master
-                (cd scripts && sh npm-build-all.sh -t "insights"  || exit 1)
-              else
-                (cd scripts && sh npm-build-all.sh -t "insights" -vjsapi alpha|| exit 1)
-    )
-  - if %COMPONENT_NAME% EQU core (
-              if %APPVEYOR_REPO_BRANCH EQU master
-                (cd scripts && sh npm-build-all.sh -t "core"  || exit 1)
-              else
-                (cd scripts && sh npm-build-all.sh -t "core" -vjsapi alpha|| exit 1)
-    )
-  - if %COMPONENT_NAME% EQU process-service-cloud (
-              if %APPVEYOR_REPO_BRANCH EQU master
-                (cd scripts && sh npm-build-all.sh -t "process-services-cloud"  || exit 1)
-              else
-                (cd scripts && sh npm-build-all.sh -t "process-services-cloud" -vjsapi alpha|| exit 1)
-    )
-#  - if %COMPONENT_NAME% EQU ng2-demo-shell (
-#              if %APPVEYOR_REPO_BRANCH EQU master
-#                (cd scripts && sh start.sh -t -ss || exit 1)
-#              else
-#                (cd scripts && sh start.sh -dev -t -ss -vjsapi alpha || exit 1)
-#    )
-
-# Don't actually build.
-build: off
-matrix:
-  fast_finish: true

cspell.json

@@ -126,8 +126,21 @@
     "uncheck",
     "subfolders",
     "ECMBPM",
-    "candidateuserapp",
-    "processwithvariables"
+    "processwithvariables",
+    "dropdownrestprocess",
+    "devops",
+    "mouseenter",
+    "starteventform",
+    "formtotestvalidations",
+    "requirednumbervisibility",
+    "numbervisibilityprocess",
+    "booleanvisibilityprocess",
+    "booleanvisibility",
+    "processparent",
+    "uploadfileform",
+    "processwithstarteventform",
+    "processstring",
+    "typeahed"
   ],
   "dictionaries": [
     "html",

demo-shell/.gitignore

@@ -52,7 +52,6 @@ app/**/*.d.ts
 
 !app/js/Polyline.js
 .idea
-**/versions.json
 
 
 dist/

demo-shell/karma.conf.js

@@ -1,5 +1,6 @@
 // Karma configuration file, see link for more information
 // https://karma-runner.github.io/0.13/config/configuration-file.html
+process.env.CHROME_BIN = require('puppeteer').executablePath();
 
 module.exports = function (config) {
     config.set({

demo-shell/package.json

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

demo-shell/proxy.conf.js

@@ -1,6 +1,8 @@
+var PROXY_HOST_ADF = process.env.PROXY_HOST_ADF;
+
 module.exports = {
     "/alfresco": {
-        "target": "http://localhost:8080",
+        "target": (PROXY_HOST_ADF || "http://localhost:8080"),
         "secure": false,
         "pathRewrite": {
             "^/alfresco/alfresco": ""
@@ -15,7 +17,7 @@ module.exports = {
         }
     },
     "/activiti-app": {
-        "target": "http://localhost:8080",
+        "target": (PROXY_HOST_ADF || "http://localhost:8080"),
         "secure": false,
         "pathRewrite": {
             "^/activiti-app/activiti-app": ""

demo-shell/resources/i18n/ar.json

@@ -63,7 +63,7 @@
     "NOTIFICATIONS": "إعلامات",
     "TASK_LIST": "قائمة المهام",
     "PROCESS_LIST": "مهام عملية",
-    "PROCESS_CLOUD": "سحابة العملية",
+    "PROCESS_CLOUD": "Activiti Cloud",
     "CARD_VIEW": "CardView",
     "PROCESS_SERVICES": "Process Services",
     "LOGIN": "دخول",
@@ -78,6 +78,7 @@
     "UPLOADER": "مُحمِّل",
     "WEBSCRIPT": "برنامج الويب النصي",
     "TAG": "علامة",
+    "PIPES": "أنابيب",
     "TRASHCAN": "سلة المحذوفات",
     "SOCIAL": "اجتماعي",
     "SETTINGS": "إعدادات",
@@ -93,9 +94,16 @@
     "TREE_VIEW": "طريقة عرض الشجرة",
     "ICONS": "أيقونات",
     "PEOPLE_GROUPS_CLOUD": "سحابة الأشخاص/المجموعة",
+    "TASK_HEADER_CLOUD": {
+      "COMPONENT_NAME": "عنوان مهمة السحابة",
+      "APP_NAME_INPUT": "اسم التطبيق",
+      "TASK_ID_INPUT": "معرف المهمة",
+      "FIND_TASK_BUTTON": "بحث عن المهمة"
+    },
     "PEOPLE_CLOUD": "مكون سحابة الأشخاص",
     "GROUPS_CLOUD": "مكون سحابة المجموعة",
-    "CONFIRM-DIALOG": "مربع حوار التأكيد"
+    "CONFIRM-DIALOG": "مربع حوار التأكيد",
+    "COMMUNITY": "Community"
   },
   "TRASHCAN": {
     "ACTIONS": {
@@ -245,7 +253,7 @@
     "RATING": "مكون التقييم"
   },
   "TAG": {
-    "LIST": "خدمات محتوى علامات القائمة",
+    "LIST": "Content Services علامات القائمة",
     "INSERT": "إدراج معرف العقدة",
     "NODE_LIST": "قائمة العلامات حسب معرف العقدة"
   },
@@ -300,25 +308,33 @@
     "APP_NAME": "اسم التطبيق",
     "APP_FILTER_MODE": "التصفية حسب اسم التطبيق",
     "ROLE_FILTER_MODE": "التصفية حسب الدور",
-    "PRESELECT_VALIDATION": "التحديد المسبق للتحقق من الصحة"
-  },
-  "ABOUT": {
-    "TITLE": "مكونات إضافية",
-    "TABLE_HEADERS": {
-      "ID": "المعرف",
-      "NAME": "الاسم",
-      "VERSION": "الإصدار",
-      "VENDOR": "المورد",
-      "LICENSE": "الترخيص",
-      "RUNTIME": "وقت التشغيل",
-      "DESCRIPTION": "الوصف"
-    }
+    "PRESELECT_VALIDATION": "التحديد المسبق للتحقق من الصحة",
+    "ALL_PRESELECTED_USERS": "كل المستخدمين المحددين مسبقًا",
+    "ALL_PRESELECTED_GROUPS": "كل المجموعات المحددة مسبقًا",
+    "INVALID_USERS": "المستخدمون غير الصالحين",
+    "INVALID_GROUPS": "مجموعات غير صالحة",
+    "READONLY_MODE": "وضع القراءة فقط"
   },
   "SETTINGS_CLOUD": {
     "MULTISELECTION": "تحديد متعدد",
     "TESTING_MODE": "وضع الاختبار",
     "SELECTION_MODE": "وضع التحديد",
+    "SELECTED_ROWS": "الصفوف المحدّدة",
     "TASK_DETAILS_REDIRECTION": "عرض تفاصيل المهمة عند النقر فوق المهمة",
-    "PROCESS_DETAILS_REDIRECTION": "عرض تفاصيل العملية عند النقر على العملية"
+    "PROCESS_DETAILS_REDIRECTION": "عرض تفاصيل العملية عند النقر على العملية",
+    "ACTION": {
+      "ACTION_TITLE": "إضافة إجراء",
+      "ACTION_MENU": "قائمة الإجراءات",
+      "CONTEX_MENU": "قائمة السياق",
+      "ACTION_VISIBLE": "مرئي",
+      "ACTION_DISABLE": "معطّل",
+      "ADD_BUTTON": "إضافة",
+      "KEY": "المفتاح",
+      "TITLE": "العنوان",
+      "ICON": "أيقونة",
+      "TASK_ID": "معرف المهمة",
+      "PROCESS_ID": "معرّف مثيل المعالجة",
+      "ACTION_TYPE": "نوع الإجراء"
+    }
   }
 }

demo-shell/resources/i18n/cs.json

@@ -78,6 +78,7 @@
     "UPLOADER": "Nástroj pro odesílání",
     "WEBSCRIPT": "Webový skript",
     "TAG": "Tag",
+    "PIPES": "Potrubí",
     "TRASHCAN": "Koš",
     "SOCIAL": "Sociální",
     "SETTINGS": "Nastavení",
@@ -93,9 +94,16 @@
     "TREE_VIEW": "Stromová struktura",
     "ICONS": "Ikony",
     "PEOPLE_GROUPS_CLOUD": "Cloud osob/skupin",
+    "TASK_HEADER_CLOUD": {
+      "COMPONENT_NAME": "Záhlaví úkolu cloudové komponenty",
+      "APP_NAME_INPUT": "Název aplikace",
+      "TASK_ID_INPUT": "ID úkolu",
+      "FIND_TASK_BUTTON": "Najít úkol"
+    },
     "PEOPLE_CLOUD": "Součást cloudu osob",
     "GROUPS_CLOUD": "Součást cloudu skupin",
-    "CONFIRM-DIALOG": "Dialogové okno s potvrzením"
+    "CONFIRM-DIALOG": "Dialogové okno s potvrzením",
+    "COMMUNITY": "Community"
   },
   "TRASHCAN": {
     "ACTIONS": {
@@ -300,25 +308,33 @@
     "APP_NAME": "Název aplikace",
     "APP_FILTER_MODE": "Filtrovat podle názvu aplikace",
     "ROLE_FILTER_MODE": "Filtrovat podle role",
-    "PRESELECT_VALIDATION": "Ověření předvolené hodnoty"
-  },
-  "ABOUT": {
-    "TITLE": "Doplňky",
-    "TABLE_HEADERS": {
-      "ID": "ID",
-      "NAME": "Název",
-      "VERSION": "Verze",
-      "VENDOR": "Dodavatel",
-      "LICENSE": "Licence",
-      "RUNTIME": "Délka",
-      "DESCRIPTION": "Popis"
-    }
+    "PRESELECT_VALIDATION": "Ověření předvolené hodnoty",
+    "ALL_PRESELECTED_USERS": "Všichni předvolení uživatelé",
+    "ALL_PRESELECTED_GROUPS": "Všechny předvolené skupiny",
+    "INVALID_USERS": "Neplatní uživatelé",
+    "INVALID_GROUPS": "Neplatné skupiny",
+    "READONLY_MODE": "Režim jen pro čtení"
   },
   "SETTINGS_CLOUD": {
     "MULTISELECTION": "Hromadný výběr",
     "TESTING_MODE": "Testovací režim",
     "SELECTION_MODE": "Režim výběru",
+    "SELECTED_ROWS": "Vybrané řádky",
     "TASK_DETAILS_REDIRECTION": "Zobrazit podrobnosti o úkolu při kliknutí na úkol",
-    "PROCESS_DETAILS_REDIRECTION": "Zobrazit podrobnosti o průběhu při kliknutí na proces"
+    "PROCESS_DETAILS_REDIRECTION": "Zobrazit podrobnosti o průběhu při kliknutí na proces",
+    "ACTION": {
+      "ACTION_TITLE": "Přidat akci",
+      "ACTION_MENU": "Nabídka akcí",
+      "CONTEX_MENU": "Místní nabídka",
+      "ACTION_VISIBLE": "Viditelné",
+      "ACTION_DISABLE": "Zakázat",
+      "ADD_BUTTON": "Přidat",
+      "KEY": "Klíč",
+      "TITLE": "Označení",
+      "ICON": "Ikona",
+      "TASK_ID": "ID úkolu",
+      "PROCESS_ID": "ID instance procesu",
+      "ACTION_TYPE": "Typ akce"
+    }
   }
 }

demo-shell/resources/i18n/da.json

@@ -78,6 +78,7 @@
     "UPLOADER": "Uploader",
     "WEBSCRIPT": "Webscript",
     "TAG": "Tag",
+    "PIPES": "Rør",
     "TRASHCAN": "Papirkurv",
     "SOCIAL": "Social",
     "SETTINGS": "Indstillinger",
@@ -93,9 +94,16 @@
     "TREE_VIEW": "Trævisning",
     "ICONS": "Ikoner",
     "PEOPLE_GROUPS_CLOUD": "Person/gruppecloud",
+    "TASK_HEADER_CLOUD": {
+      "COMPONENT_NAME": "Opgaveheader for cloud",
+      "APP_NAME_INPUT": "Appnavn",
+      "TASK_ID_INPUT": "Opgave-id",
+      "FIND_TASK_BUTTON": "Find opgave"
+    },
     "PEOPLE_CLOUD": "Personcloudkomponent",
     "GROUPS_CLOUD": "Gruppecloudkomponent",
-    "CONFIRM-DIALOG": "Bekræftelsesdialogboks"
+    "CONFIRM-DIALOG": "Bekræftelsesdialogboks",
+    "COMMUNITY": "Community"
   },
   "TRASHCAN": {
     "ACTIONS": {
@@ -300,25 +308,33 @@
     "APP_NAME": "Appnavn",
     "APP_FILTER_MODE": "Filtrer efter appnavn",
     "ROLE_FILTER_MODE": "Filtrer efter rolle",
-    "PRESELECT_VALIDATION": "Forudvælg validering"
-  },
-  "ABOUT": {
-    "TITLE": "Plug-ins",
-    "TABLE_HEADERS": {
-      "ID": "Id",
-      "NAME": "Navn",
-      "VERSION": "Version",
-      "VENDOR": "Leverandør",
-      "LICENSE": "Licens",
-      "RUNTIME": "Kørselstidspunkt",
-      "DESCRIPTION": "Beskrivelse"
-    }
+    "PRESELECT_VALIDATION": "Forudvælg validering",
+    "ALL_PRESELECTED_USERS": "Alle forudvalgte brugere",
+    "ALL_PRESELECTED_GROUPS": "Alle forudvalgte grupper",
+    "INVALID_USERS": "Ugyldige brugere",
+    "INVALID_GROUPS": "Ugyldige grupper",
+    "READONLY_MODE": "Skrivebeskyttet tilstand"
   },
   "SETTINGS_CLOUD": {
     "MULTISELECTION": "Multivalg",
     "TESTING_MODE": "Testtilstand",
     "SELECTION_MODE": "Valgtilstand",
+    "SELECTED_ROWS": "Valgte rækker",
     "TASK_DETAILS_REDIRECTION": "Vis opgavedetaljer på opgave ved at klikke",
-    "PROCESS_DETAILS_REDIRECTION": "Vis behandlingsdetaljer for processen ved at klikke"
+    "PROCESS_DETAILS_REDIRECTION": "Vis behandlingsdetaljer for processen ved at klikke",
+    "ACTION": {
+      "ACTION_TITLE": "Tilføj handling",
+      "ACTION_MENU": "Menuen Handling",
+      "CONTEX_MENU": "Genvejsmenu",
+      "ACTION_VISIBLE": "Synlig",
+      "ACTION_DISABLE": "Deaktiver",
+      "ADD_BUTTON": "Tilføj",
+      "KEY": "Nøgle",
+      "TITLE": "Titel",
+      "ICON": "Ikon",
+      "TASK_ID": "Opgave-id",
+      "PROCESS_ID": "Procesforekomst-id",
+      "ACTION_TYPE": "Handlingstype"
+    }
   }
 }

demo-shell/resources/i18n/de.json

@@ -78,6 +78,7 @@
     "UPLOADER": "Uploader",
     "WEBSCRIPT": "Webscript",
     "TAG": "Tag",
+    "PIPES": "Pipes",
     "TRASHCAN": "Papierkorb",
     "SOCIAL": "Soziale Funktionen",
     "SETTINGS": "Einstellungen",
@@ -93,9 +94,16 @@
     "TREE_VIEW": "Strukturansicht",
     "ICONS": "Symbole",
     "PEOPLE_GROUPS_CLOUD": "Personen-/Gruppen-Cloud",
+    "TASK_HEADER_CLOUD": {
+      "COMPONENT_NAME": "Aufgaben-Header für Cloud",
+      "APP_NAME_INPUT": "Anwendungsname",
+      "TASK_ID_INPUT": "Aufgaben-ID",
+      "FIND_TASK_BUTTON": "Aufgabe suchen"
+    },
     "PEOPLE_CLOUD": "Personen-Cloud-Komponente",
     "GROUPS_CLOUD": "Gruppen-Cloud-Komponente",
-    "CONFIRM-DIALOG": "Bestätigungsdialog"
+    "CONFIRM-DIALOG": "Bestätigungsdialog",
+    "COMMUNITY": "Community"
   },
   "TRASHCAN": {
     "ACTIONS": {
@@ -300,25 +308,33 @@
     "APP_NAME": "Anwendungsname",
     "APP_FILTER_MODE": "Nach Anwendungsname filtern",
     "ROLE_FILTER_MODE": "Nach Rolle filtern",
-    "PRESELECT_VALIDATION": "Vorauswahl-Prüfung"
-  },
-  "ABOUT": {
-    "TITLE": "Plugins",
-    "TABLE_HEADERS": {
-      "ID": "ID",
-      "NAME": "Name",
-      "VERSION": "Version",
-      "VENDOR": "Hersteller",
-      "LICENSE": "Lizenz",
-      "RUNTIME": "Laufzeit",
-      "DESCRIPTION": "Beschreibung"
-    }
+    "PRESELECT_VALIDATION": "Vorauswahl-Prüfung",
+    "ALL_PRESELECTED_USERS": "Alle vorausgewählten Benutzer",
+    "ALL_PRESELECTED_GROUPS": "Alle vorausgewählten Gruppen",
+    "INVALID_USERS": "Unzulässige Benutzer",
+    "INVALID_GROUPS": "Unzulässige Gruppen",
+    "READONLY_MODE": "Schreibgeschützter Modus"
   },
   "SETTINGS_CLOUD": {
     "MULTISELECTION": "Mehrfachauswahl",
     "TESTING_MODE": "Testmodus",
     "SELECTION_MODE": "Auswahlmodus",
+    "SELECTED_ROWS": "Ausgewählte Zeilen",
     "TASK_DETAILS_REDIRECTION": "Bei Klicken auf Aufgabe Aufgabendetails einblenden",
-    "PROCESS_DETAILS_REDIRECTION": "Bei Klicken auf Prozess Prozessdetails anzeigen"
+    "PROCESS_DETAILS_REDIRECTION": "Bei Klicken auf Prozess Prozessdetails anzeigen",
+    "ACTION": {
+      "ACTION_TITLE": "Aktion hinzufügen",
+      "ACTION_MENU": "Aktionsmenü",
+      "CONTEX_MENU": "Kontextmenü",
+      "ACTION_VISIBLE": "Sichtbar",
+      "ACTION_DISABLE": "Deaktivieren",
+      "ADD_BUTTON": "Hinzufügen",
+      "KEY": "Schlüssel",
+      "TITLE": "Titel",
+      "ICON": "Symbol",
+      "TASK_ID": "Aufgaben-ID",
+      "PROCESS_ID": "Prozessinstanz-ID",
+      "ACTION_TYPE": "Aktionstyp"
+    }
   }
 }

demo-shell/resources/i18n/en.json

@@ -78,6 +78,7 @@
     "UPLOADER": "Uploader",
     "WEBSCRIPT": "Webscript",
     "TAG": "Tag",
+    "PIPES": "Pipes",
     "TRASHCAN": "Trashcan",
     "SOCIAL": "Social",
     "SETTINGS": "Settings",
@@ -93,6 +94,12 @@
     "TREE_VIEW": "Tree View",
     "ICONS": "Icons",
     "PEOPLE_GROUPS_CLOUD": "People/Group Cloud",
+    "TASK_HEADER_CLOUD": {
+      "COMPONENT_NAME": "Task Header Cloud",
+      "APP_NAME_INPUT": "App name",
+      "TASK_ID_INPUT": "Task id",
+      "FIND_TASK_BUTTON": "Find Task"
+    },
     "PEOPLE_CLOUD": "People Cloud Component",
     "GROUPS_CLOUD": "Groups Cloud Component",
     "CONFIRM-DIALOG": "Confirmation Dialog",
@@ -263,14 +270,16 @@
     },
     "TOOLTIP_MESSAGE": {
       "START_INPUT": "Starting page"
-    }
+    },
+    "TASK_CONTEXT_MENU": "Task List Context Menu"
   },
   "PROCESS_LIST_DEMO": {
     "ERROR_MESSAGE": {
       "APP_ID_REQUIRED_ERROR": "Insert App ID",
       "APP_ID_TYPE_ERROR": "App ID must be a number",
       "NUMBER_GREATER_THAN": "Value must be greater than or equal to {{ value }}"
-    }
+    },
+    "PROCESS_CONTEXT_MENU": "Process List Context Menu"
   },
   "GROUP-TITLE1-TRANSLATION-KEY": "CUSTOM TITLE TRANSLATION ONE",
   "GROUP-TITLE2-TRANSLATION-KEY": "CUSTOM TITLE TRANSLATION TWO",
@@ -301,25 +310,33 @@
     "APP_NAME": "Application Name",
     "APP_FILTER_MODE": "Filter by application name",
     "ROLE_FILTER_MODE": "Filter by role",
-    "PRESELECT_VALIDATION": "Preselect validation"
-  },
-  "ABOUT": {
-    "TITLE": "Plugins",
-    "TABLE_HEADERS": {
-      "ID": "ID",
-      "NAME": "Name",
-      "VERSION": "Version",
-      "VENDOR": "Vendor",
-      "LICENSE": "License",
-      "RUNTIME": "Runtime",
-      "DESCRIPTION": "Description"
-    }
+    "PRESELECT_VALIDATION": "Preselect validation",
+    "ALL_PRESELECTED_USERS": "All Preselected Users",
+    "ALL_PRESELECTED_GROUPS": "All Preselected Groups",
+    "INVALID_USERS": "Invalid Users",
+    "INVALID_GROUPS": "Invalid Groups",
+    "READONLY_MODE": "Read-only Mode"
   },
   "SETTINGS_CLOUD": {
     "MULTISELECTION": "Multiselection",
     "TESTING_MODE": "Testing Mode",
     "SELECTION_MODE": "Selection Mode",
+    "SELECTED_ROWS": "Selected Rows",
     "TASK_DETAILS_REDIRECTION": "Display task details on task click",
-    "PROCESS_DETAILS_REDIRECTION": "Display process details on process click"
+    "PROCESS_DETAILS_REDIRECTION": "Display process details on process click",
+    "ACTION": {
+      "ACTION_TITLE": "Add Action",
+      "ACTION_MENU": "Action Menu",
+      "CONTEX_MENU": "Context Menu",
+      "ACTION_VISIBLE": "Visible",
+      "ACTION_DISABLE": "Disable",
+      "ADD_BUTTON": "Add",
+      "KEY": "Key",
+      "TITLE": "Title",
+      "ICON": "Icon",
+      "TASK_ID": "Task ID",
+      "PROCESS_ID": "Process Instance ID",
+      "ACTION_TYPE": "Action Type"
+    }
   }
 }

demo-shell/resources/i18n/es.json

@@ -78,6 +78,7 @@
     "UPLOADER": "Cargador",
     "WEBSCRIPT": "Webscript",
     "TAG": "Etiqueta",
+    "PIPES": "Tubos",
     "TRASHCAN": "Papelera",
     "SOCIAL": "Social",
     "SETTINGS": "Configuración",
@@ -93,9 +94,16 @@
     "TREE_VIEW": "Vista de árbol",
     "ICONS": "Iconos",
     "PEOPLE_GROUPS_CLOUD": "Personas/Grupos en la nube",
+    "TASK_HEADER_CLOUD": {
+      "COMPONENT_NAME": "Encabezados de tareas en componente nube",
+      "APP_NAME_INPUT": "Nombre de aplicación",
+      "TASK_ID_INPUT": "ID de tarea",
+      "FIND_TASK_BUTTON": "Buscar tarea"
+    },
     "PEOPLE_CLOUD": "Componente en la nube de personas",
     "GROUPS_CLOUD": "Componente en la nube de grupos",
-    "CONFIRM-DIALOG": "Cuadro de diálogo de confirmación"
+    "CONFIRM-DIALOG": "Cuadro de diálogo de confirmación",
+    "COMMUNITY": "Community"
   },
   "TRASHCAN": {
     "ACTIONS": {
@@ -104,7 +112,7 @@
     },
     "EMPTY_STATE": {
       "TITLE": "La papelera está vacía",
-      "FIRST_TEXT": "Los elementos que elimine se trasladan a la papelera.",
+      "FIRST_TEXT": "Los elementos que elimine se moverán a la papelera.",
       "SECOND_TEXT": "Vacíe la papelera para eliminar los elementos permanentemente."
     }
   },
@@ -215,7 +223,7 @@
     "PROCESS_SERVICES": "Process Services",
     "LOGIN_FOOTER": "Pie del inicio de sesión",
     "SHOW_REMEMBERME": "Mostrar opción para recordarme",
-    "SHOW_SUCCESS_ROUTE": "Permitir ruta correcta",
+    "SHOW_SUCCESS_ROUTE": "Mostrar ruta correcta",
     "CUSTOM_LOGO": "Logotipo personalizado"
   },
   "SEARCH": {
@@ -300,25 +308,33 @@
     "APP_NAME": "Nombre de la aplicación",
     "APP_FILTER_MODE": "Filtrar por nombre de la aplicación",
     "ROLE_FILTER_MODE": "Filtrar por función",
-    "PRESELECT_VALIDATION": "Preseleccionar validación"
-  },
-  "ABOUT": {
-    "TITLE": "Complementos",
-    "TABLE_HEADERS": {
-      "ID": "ID",
-      "NAME": "Nombre",
-      "VERSION": "Versión",
-      "VENDOR": "Proveedor",
-      "LICENSE": "Licencia",
-      "RUNTIME": "Tiempo de ejecución",
-      "DESCRIPTION": "Descripción"
-    }
+    "PRESELECT_VALIDATION": "Preseleccionar validación",
+    "ALL_PRESELECTED_USERS": "Todos los usuarios preseleccionados",
+    "ALL_PRESELECTED_GROUPS": "Todos los grupos preseleccionados",
+    "INVALID_USERS": "Usuarios no válidos",
+    "INVALID_GROUPS": "Grupos no válidos",
+    "READONLY_MODE": "Modo de solo lectura"
   },
   "SETTINGS_CLOUD": {
     "MULTISELECTION": "Selección múltiple",
     "TESTING_MODE": "Modo de prueba",
     "SELECTION_MODE": "Modo de selección",
+    "SELECTED_ROWS": "Filas seleccionadas",
     "TASK_DETAILS_REDIRECTION": "Mostrar detalles de la tarea haciendo clic en la tarea",
-    "PROCESS_DETAILS_REDIRECTION": "Mostrar detalles del proceso al hacer clic en el proceso"
+    "PROCESS_DETAILS_REDIRECTION": "Mostrar detalles del proceso al hacer clic en el proceso",
+    "ACTION": {
+      "ACTION_TITLE": "Añadir acción",
+      "ACTION_MENU": "Menú de acción",
+      "CONTEX_MENU": "Menú de contexto",
+      "ACTION_VISIBLE": "Visible",
+      "ACTION_DISABLE": "Desactivar",
+      "ADD_BUTTON": "Añadir",
+      "KEY": "Clave",
+      "TITLE": "Título",
+      "ICON": "Icono",
+      "TASK_ID": "ID de tarea",
+      "PROCESS_ID": "ID de instancia del proceso",
+      "ACTION_TYPE": "Tipo de acción"
+    }
   }
 }

demo-shell/resources/i18n/fi.json

@@ -63,7 +63,7 @@
     "NOTIFICATIONS": "Ilmoitukset",
     "TASK_LIST": "Tehtäväluettelo",
     "PROCESS_LIST": "Prosessiluettelo",
-    "PROCESS_CLOUD": "Prosessipilvi",
+    "PROCESS_CLOUD": "Activiti Cloud",
     "CARD_VIEW": "Korttinäkymä",
     "PROCESS_SERVICES": "Process Services",
     "LOGIN": "Kirjaudu sisään",
@@ -78,6 +78,7 @@
     "UPLOADER": "Lataustoiminto",
     "WEBSCRIPT": "Verkkokomentosarja",
     "TAG": "Tunniste",
+    "PIPES": "Putket",
     "TRASHCAN": "Roskakori",
     "SOCIAL": "Sosiaalinen",
     "SETTINGS": "Asetukset",
@@ -93,9 +94,16 @@
     "TREE_VIEW": "Puunäkymä",
     "ICONS": "Kuvakkeet",
     "PEOPLE_GROUPS_CLOUD": "Ihmispilvi/Ryhmäpilvi",
+    "TASK_HEADER_CLOUD": {
+      "COMPONENT_NAME": "Tehtävänimikepilvi",
+      "APP_NAME_INPUT": "Sovelluksen nimi",
+      "TASK_ID_INPUT": "Tehtävän tunnus",
+      "FIND_TASK_BUTTON": "Etsi tehtävä"
+    },
     "PEOPLE_CLOUD": "Ihmispilvi-komponentti",
     "GROUPS_CLOUD": "Ryhmäpilvi-komponentti",
-    "CONFIRM-DIALOG": "Vahvistusvalintaikkuna"
+    "CONFIRM-DIALOG": "Vahvistusvalintaikkuna",
+    "COMMUNITY": "Community"
   },
   "TRASHCAN": {
     "ACTIONS": {
@@ -300,25 +308,33 @@
     "APP_NAME": "Sovelluksen nimi",
     "APP_FILTER_MODE": "Suodata sovelluksen nimen perusteella",
     "ROLE_FILTER_MODE": "Suodata roolin perusteella",
-    "PRESELECT_VALIDATION": "Vahvistus esivalittu"
-  },
-  "ABOUT": {
-    "TITLE": "Lisäosat",
-    "TABLE_HEADERS": {
-      "ID": "Tunnus",
-      "NAME": "Nimi",
-      "VERSION": "Versio",
-      "VENDOR": "Toimittaja",
-      "LICENSE": "Käyttöoikeus",
-      "RUNTIME": "Suorituspalvelu",
-      "DESCRIPTION": "Kuvaus"
-    }
+    "PRESELECT_VALIDATION": "Vahvistus esivalittu",
+    "ALL_PRESELECTED_USERS": "Kaikki esivalitut käyttäjät",
+    "ALL_PRESELECTED_GROUPS": "Kaikki esivalitut ryhmät",
+    "INVALID_USERS": "Kelpaamattomat käyttäjät",
+    "INVALID_GROUPS": "Kelpaamattomat ryhmät",
+    "READONLY_MODE": "Vain luku -tila"
   },
   "SETTINGS_CLOUD": {
     "MULTISELECTION": "Monivalinta",
     "TESTING_MODE": "Testaustila",
     "SELECTION_MODE": "Valintatila",
+    "SELECTED_ROWS": "Valitut rivit",
     "TASK_DETAILS_REDIRECTION": "Näytä tehtävätiedot tehtävää napsauttamalla",
-    "PROCESS_DETAILS_REDIRECTION": "Näyttää prosessin tiedot prosessia napsautettaessa"
+    "PROCESS_DETAILS_REDIRECTION": "Näyttää prosessin tiedot prosessia napsautettaessa",
+    "ACTION": {
+      "ACTION_TITLE": "Lisää toiminto",
+      "ACTION_MENU": "Toiminnon valikko",
+      "CONTEX_MENU": "Pikavalikko",
+      "ACTION_VISIBLE": "Näkyvissä",
+      "ACTION_DISABLE": "Poista käytöstä",
+      "ADD_BUTTON": "Lisää",
+      "KEY": "Avain",
+      "TITLE": "Otsikko",
+      "ICON": "Kuvake",
+      "TASK_ID": "Tehtävätunnus",
+      "PROCESS_ID": "Prosessiesiintymätunnus",
+      "ACTION_TYPE": "Toiminnon tyyppi"
+    }
   }
 }

demo-shell/resources/i18n/fr.json

@@ -78,6 +78,7 @@
     "UPLOADER": "Chargeur",
     "WEBSCRIPT": "Script Web",
     "TAG": "Tag",
+    "PIPES": "Tuyaux",
     "TRASHCAN": "Corbeille",
     "SOCIAL": "Réseaux sociaux",
     "SETTINGS": "Paramètres",
@@ -93,9 +94,16 @@
     "TREE_VIEW": "Arborescence",
     "ICONS": "Icônes",
     "PEOPLE_GROUPS_CLOUD": "Cloud des personnes/groupes",
+    "TASK_HEADER_CLOUD": {
+      "COMPONENT_NAME": "En-tête de la tâche du composant cloud",
+      "APP_NAME_INPUT": "Nom de l'application",
+      "TASK_ID_INPUT": "ID de la tâche",
+      "FIND_TASK_BUTTON": "Trouver la tâche"
+    },
     "PEOPLE_CLOUD": "Composant cloud des personnes",
     "GROUPS_CLOUD": "Composant cloud des groupes",
-    "CONFIRM-DIALOG": "Boîte de dialogue de confirmation"
+    "CONFIRM-DIALOG": "Boîte de dialogue de confirmation",
+    "COMMUNITY": "Communauté"
   },
   "TRASHCAN": {
     "ACTIONS": {
@@ -300,25 +308,33 @@
     "APP_NAME": "Nom de l'application",
     "APP_FILTER_MODE": "Filtrer par nom d'application",
     "ROLE_FILTER_MODE": "Filtrer par rôle",
-    "PRESELECT_VALIDATION": "Validation présélectionnée"
-  },
-  "ABOUT": {
-    "TITLE": "Plugins",
-    "TABLE_HEADERS": {
-      "ID": "ID",
-      "NAME": "Nom",
-      "VERSION": "Version",
-      "VENDOR": "Fournisseur",
-      "LICENSE": "Licence",
-      "RUNTIME": "Java Runtime",
-      "DESCRIPTION": "Description"
-    }
+    "PRESELECT_VALIDATION": "Validation présélectionnée",
+    "ALL_PRESELECTED_USERS": "Tous les utilisateurs présélectionnés",
+    "ALL_PRESELECTED_GROUPS": "Tous les groupes présélectionnés",
+    "INVALID_USERS": "Utilisateurs non valides",
+    "INVALID_GROUPS": "Groupes non valides",
+    "READONLY_MODE": "Mode lecture seule"
   },
   "SETTINGS_CLOUD": {
     "MULTISELECTION": "Multisélection",
     "TESTING_MODE": "Mode de test",
     "SELECTION_MODE": "Mode de sélection",
+    "SELECTED_ROWS": "Lignes sélectionnées",
     "TASK_DETAILS_REDIRECTION": "Afficher les détails de la tâche en cliquant dessus",
-    "PROCESS_DETAILS_REDIRECTION": "Afficher les détails du processus en cliquant dessus"
+    "PROCESS_DETAILS_REDIRECTION": "Afficher les détails du processus en cliquant dessus",
+    "ACTION": {
+      "ACTION_TITLE": "Ajouter une action",
+      "ACTION_MENU": "Menu Action",
+      "CONTEX_MENU": "Menu contextuel",
+      "ACTION_VISIBLE": "Visible",
+      "ACTION_DISABLE": "Désactiver",
+      "ADD_BUTTON": "Ajouter",
+      "KEY": "Clé",
+      "TITLE": "Titre",
+      "ICON": "Icône",
+      "TASK_ID": "ID de la tâche",
+      "PROCESS_ID": "ID de l'instance de processus",
+      "ACTION_TYPE": "Type d'action"
+    }
   }
 }

demo-shell/resources/i18n/it.json

@@ -4,14 +4,14 @@
       "TITLE": "Dettagli",
       "COMMENTS": "Commenti",
       "PROPERTIES": "Proprietà",
-      "VERSIONS": "Versione"
+      "VERSIONS": "Versioni"
     },
     "HOME": {
       "TITLE": "Componenti angolari per Alfresco",
       "DOCUMENTATION": "Documentazione"
     },
     "LOGOUT": {
-      "TITLE": "Pagina di uscita",
+      "TITLE": "Pagina di logout",
       "SUB_TITLE": "Utente disconnesso",
       "LOGIN": "Login",
       "HOME": "Home"
@@ -19,7 +19,7 @@
     "ADF_VERSION_MANAGER": {
       "ALLOW_DELETE": "Consenti eliminazione",
       "SHOW_COMMENTS": "Mostra commenti sulle versioni",
-      "ALLOW_DOWNLOAD": "Abilita download versioni",
+      "ALLOW_DOWNLOAD": "Abilita scaricamento versioni",
       "READ_ONLY": "Sola lettura",
       "COMMENTS": "Mostra commenti"
     },
@@ -38,8 +38,8 @@
   },
   "title": "Benvenuto",
   "VERSION": {
-    "NO_PERMISSION": "Non hai il permesso di gestire versioni di questo contenuto",
-    "NO_PERMISSION_EVENT": "Non hai il permesso ${event.permission} di ${event.action} ${event.type}",
+    "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}",
     "CHOOSE_FILE": "Seleziona un file per visualizzarne le versioni",
     "DIALOG": {
       "CLOSE": "Chiudi",
@@ -61,7 +61,7 @@
     "CONTENT_SERVICES": "Content Services",
     "BREADCRUMB": "Breadcrumb",
     "NOTIFICATIONS": "Notifiche",
-    "TASK_LIST": "Elenco attività",
+    "TASK_LIST": "Elenco compiti",
     "PROCESS_LIST": "Elenco processi",
     "PROCESS_CLOUD": "Activiti Cloud",
     "CARD_VIEW": "CardView",
@@ -78,6 +78,7 @@
     "UPLOADER": "Uploader",
     "WEBSCRIPT": "Webscript",
     "TAG": "Tag",
+    "PIPES": "Tubi",
     "TRASHCAN": "Cestino",
     "SOCIAL": "Social",
     "SETTINGS": "Impostazioni",
@@ -93,9 +94,16 @@
     "TREE_VIEW": "Vista struttura",
     "ICONS": "Icone",
     "PEOPLE_GROUPS_CLOUD": "Cloud persone/gruppi",
+    "TASK_HEADER_CLOUD": {
+      "COMPONENT_NAME": "Cloud intestazione compito",
+      "APP_NAME_INPUT": "Nome applicazione",
+      "TASK_ID_INPUT": "ID compito",
+      "FIND_TASK_BUTTON": "Trova compito"
+    },
     "PEOPLE_CLOUD": "Componente Cloud persone",
     "GROUPS_CLOUD": "Componente Cloud gruppi",
-    "CONFIRM-DIALOG": "Finestra di conferma"
+    "CONFIRM-DIALOG": "Finestra di conferma",
+    "COMMUNITY": "Community"
   },
   "TRASHCAN": {
     "ACTIONS": {
@@ -110,7 +118,7 @@
   },
   "DOCUMENT_LIST": {
     "MULTISELECT_CHECKBOXES": "Selezione multipla (con caselle di spunta)",
-    "THUMBNAILS": "Abilita anteprime",
+    "THUMBNAILS": "Abilita miniature",
     "ALLOW_DROP_FILES": "Abilita trascinamento di file in una cartella",
     "MULTIPLE_FILE_UPLOAD": "Caricamento di file multipli",
     "FOLDER_UPLOAD": "Caricamento cartelle",
@@ -143,7 +151,7 @@
       "SHARE_EDIT": "Modifica impostazioni",
       "NEW_FOLDER": "Nuova cartella",
       "EDIT_FOLDER": "Modifica cartella",
-      "DOWNLOAD": "Download",
+      "DOWNLOAD": "Scarica",
       "DELETE": "Elimina",
       "FAVORITES": "Aggiungi ai preferiti",
       "SHARE": "Condividi",
@@ -157,7 +165,7 @@
       "VERSIONS": "Gestione versioni",
       "LOCK": "Blocca",
       "METADATA": "Informazioni",
-      "DOWNLOAD": "Download",
+      "DOWNLOAD": "Scarica",
       "PERMISSION": "Permesso",
       "FOLDER": {
         "COPY": "Copia",
@@ -255,8 +263,8 @@
   },
   "TASK_LIST_DEMO": {
     "ERROR_MESSAGE": {
-      "APP_ID_REQUIRED_ERROR": "Inserisci ID app",
-      "APP_ID_TYPE_ERROR": "L'ID app deve essere un numero",
+      "APP_ID_REQUIRED_ERROR": "Inserisci ID applicazione",
+      "APP_ID_TYPE_ERROR": "L'ID applicazione deve essere un numero",
       "NUMBER_TYPE_ERROR": "Il valore deve essere un numero",
       "NUMBER_GREATER_THAN": "Il valore deve essere maggiore o uguale a {{ value }}"
     },
@@ -266,8 +274,8 @@
   },
   "PROCESS_LIST_DEMO": {
     "ERROR_MESSAGE": {
-      "APP_ID_REQUIRED_ERROR": "Inserisci ID app",
-      "APP_ID_TYPE_ERROR": "L'ID app deve essere un numero",
+      "APP_ID_REQUIRED_ERROR": "Inserisci ID applicazione",
+      "APP_ID_TYPE_ERROR": "L'ID applicazione deve essere un numero",
       "NUMBER_GREATER_THAN": "Il valore deve essere maggiore o uguale a {{ value }}"
     }
   },
@@ -300,25 +308,33 @@
     "APP_NAME": "Nome applicazione",
     "APP_FILTER_MODE": "Filtra per nome applicazione",
     "ROLE_FILTER_MODE": "Filtra per ruolo",
-    "PRESELECT_VALIDATION": "Convalida preselezione"
-  },
-  "ABOUT": {
-    "TITLE": "Plug-in",
-    "TABLE_HEADERS": {
-      "ID": "ID",
-      "NAME": "Nome",
-      "VERSION": "Versione",
-      "VENDOR": "Fornitore",
-      "LICENSE": "Licenza",
-      "RUNTIME": "Runtime",
-      "DESCRIPTION": "Descrizione"
-    }
+    "PRESELECT_VALIDATION": "Convalida preselezione",
+    "ALL_PRESELECTED_USERS": "Tutti gli utenti preselezionati",
+    "ALL_PRESELECTED_GROUPS": "Tutti i gruppi preselezionati",
+    "INVALID_USERS": "Utenti non validi",
+    "INVALID_GROUPS": "Gruppi non validi",
+    "READONLY_MODE": "Modalità sola lettura"
   },
   "SETTINGS_CLOUD": {
     "MULTISELECTION": "Selezione multipla",
     "TESTING_MODE": "Modalità di test",
     "SELECTION_MODE": "Modalità di selezione",
+    "SELECTED_ROWS": "Righe selezionate",
     "TASK_DETAILS_REDIRECTION": "Mostra dettagli compito dopo clic su compito",
-    "PROCESS_DETAILS_REDIRECTION": "Mostra i dettagli dopo il clic sul processo"
+    "PROCESS_DETAILS_REDIRECTION": "Mostra i dettagli dopo il clic sul processo",
+    "ACTION": {
+      "ACTION_TITLE": "Aggiungi azione",
+      "ACTION_MENU": "Menu azione",
+      "CONTEX_MENU": "Menu contestuale",
+      "ACTION_VISIBLE": "Visibile",
+      "ACTION_DISABLE": "Disattiva",
+      "ADD_BUTTON": "Aggiungi",
+      "KEY": "Chiave",
+      "TITLE": "Titolo",
+      "ICON": "Icona",
+      "TASK_ID": "ID compito",
+      "PROCESS_ID": "ID istanza di processo",
+      "ACTION_TYPE": "Tipo di azione"
+    }
   }
 }

demo-shell/resources/i18n/ja.json

@@ -78,6 +78,7 @@
     "UPLOADER": "アップローダー",
     "WEBSCRIPT": "Webscript",
     "TAG": "タグ",
+    "PIPES": "パイプ",
     "TRASHCAN": "ごみ箱",
     "SOCIAL": "ソーシャル",
     "SETTINGS": "設定",
@@ -93,9 +94,16 @@
     "TREE_VIEW": "ツリービュー",
     "ICONS": "アイコン",
     "PEOPLE_GROUPS_CLOUD": "メンバー/グループのクラウド",
+    "TASK_HEADER_CLOUD": {
+      "COMPONENT_NAME": "クラウドのタスクヘッダー",
+      "APP_NAME_INPUT": "アプリケーション名",
+      "TASK_ID_INPUT": "タスク ID",
+      "FIND_TASK_BUTTON": "タスクの検索"
+    },
     "PEOPLE_CLOUD": "メンバーのクラウドコンポーネント",
     "GROUPS_CLOUD": "グループのクラウドコンポーネント",
-    "CONFIRM-DIALOG": "確認ダイアログ"
+    "CONFIRM-DIALOG": "確認ダイアログ",
+    "COMMUNITY": "Community"
   },
   "TRASHCAN": {
     "ACTIONS": {
@@ -300,25 +308,33 @@
     "APP_NAME": "アプリケーション名",
     "APP_FILTER_MODE": "アプリケーション名でフィルタ",
     "ROLE_FILTER_MODE": "役割でフィルタ",
-    "PRESELECT_VALIDATION": "事前選択の検証"
-  },
-  "ABOUT": {
-    "TITLE": "プラグイン",
-    "TABLE_HEADERS": {
-      "ID": "ID",
-      "NAME": "名前",
-      "VERSION": "バージョン",
-      "VENDOR": "ベンダー",
-      "LICENSE": "ライセンス",
-      "RUNTIME": "ランタイム",
-      "DESCRIPTION": "説明"
-    }
+    "PRESELECT_VALIDATION": "事前選択の検証",
+    "ALL_PRESELECTED_USERS": "選択されている全ユーザー",
+    "ALL_PRESELECTED_GROUPS": "選択されている全グループ",
+    "INVALID_USERS": "無効なユーザー",
+    "INVALID_GROUPS": "無効なグループ",
+    "READONLY_MODE": "読み取り専用モード"
   },
   "SETTINGS_CLOUD": {
     "MULTISELECTION": "複数選択",
     "TESTING_MODE": "テストモード",
     "SELECTION_MODE": "選択モード",
+    "SELECTED_ROWS": "選択した行",
     "TASK_DETAILS_REDIRECTION": "タスクのクリック時にタスクの詳細を表示",
-    "PROCESS_DETAILS_REDIRECTION": "プロセスのクリックでプロセスの詳細を表示"
+    "PROCESS_DETAILS_REDIRECTION": "プロセスのクリックでプロセスの詳細を表示",
+    "ACTION": {
+      "ACTION_TITLE": "処理の追加",
+      "ACTION_MENU": "処理メニュー",
+      "CONTEX_MENU": "コンテキストメニュー",
+      "ACTION_VISIBLE": "表示",
+      "ACTION_DISABLE": "無効",
+      "ADD_BUTTON": "追加",
+      "KEY": "キー",
+      "TITLE": "タイトル",
+      "ICON": "アイコン",
+      "TASK_ID": "タスク ID",
+      "PROCESS_ID": "プロセスインスタンス ID",
+      "ACTION_TYPE": "処理のタイプ"
+    }
   }
 }

demo-shell/resources/i18n/nb.json

@@ -78,6 +78,7 @@
     "UPLOADER": "Opplaster",
     "WEBSCRIPT": "Webscript",
     "TAG": "Tagg",
+    "PIPES": "Rør",
     "TRASHCAN": "Søppelkurv",
     "SOCIAL": "Sosial",
     "SETTINGS": "Innstillinger",
@@ -93,9 +94,16 @@
     "TREE_VIEW": "Trevisning",
     "ICONS": "Ikoner",
     "PEOPLE_GROUPS_CLOUD": "Person-/gruppesky",
+    "TASK_HEADER_CLOUD": {
+      "COMPONENT_NAME": "Oppgaveoverskrift for sky",
+      "APP_NAME_INPUT": "Navn på app",
+      "TASK_ID_INPUT": "Oppgave-ID",
+      "FIND_TASK_BUTTON": "Finn oppgave"
+    },
     "PEOPLE_CLOUD": "Personsky-komponent",
     "GROUPS_CLOUD": "Gruppesky-kompontent",
-    "CONFIRM-DIALOG": "Bekreftelsesdialog"
+    "CONFIRM-DIALOG": "Bekreftelsesdialog",
+    "COMMUNITY": "Community"
   },
   "TRASHCAN": {
     "ACTIONS": {
@@ -300,25 +308,33 @@
     "APP_NAME": "Programnavn",
     "APP_FILTER_MODE": "Filtrer etter programnavn",
     "ROLE_FILTER_MODE": "Filtrer etter rolle",
-    "PRESELECT_VALIDATION": "Forhåndsvelg validering"
-  },
-  "ABOUT": {
-    "TITLE": "Plugin-moduler",
-    "TABLE_HEADERS": {
-      "ID": "ID",
-      "NAME": "Navn",
-      "VERSION": "Versjon",
-      "VENDOR": "Leverandør",
-      "LICENSE": "Lisens",
-      "RUNTIME": "Kjøretid",
-      "DESCRIPTION": "Beskrivelse"
-    }
+    "PRESELECT_VALIDATION": "Forhåndsvelg validering",
+    "ALL_PRESELECTED_USERS": "Alle forhåndsvalgte brukere",
+    "ALL_PRESELECTED_GROUPS": "Alle forhåndsvalgte grupper",
+    "INVALID_USERS": "Ugyldige brukere",
+    "INVALID_GROUPS": "Ugyldige grupper",
+    "READONLY_MODE": "Skrivebeskyttet modus"
   },
   "SETTINGS_CLOUD": {
     "MULTISELECTION": "Flervalg",
     "TESTING_MODE": "Testmodus",
     "SELECTION_MODE": "Valgmodus",
+    "SELECTED_ROWS": "Valgte rader",
     "TASK_DETAILS_REDIRECTION": "Vis oppgavedetaljer ved oppgaveklikk",
-    "PROCESS_DETAILS_REDIRECTION": "Vis prosessdetaljer ved prosessklikk"
+    "PROCESS_DETAILS_REDIRECTION": "Vis prosessdetaljer ved prosessklikk",
+    "ACTION": {
+      "ACTION_TITLE": "Legg til handling",
+      "ACTION_MENU": "Handlingsmeny",
+      "CONTEX_MENU": "Kontekstmeny",
+      "ACTION_VISIBLE": "Synlig",
+      "ACTION_DISABLE": "Deaktiver",
+      "ADD_BUTTON": "Legg til",
+      "KEY": "Nøkkel",
+      "TITLE": "Tittel",
+      "ICON": "Ikon",
+      "TASK_ID": "Oppgave-ID",
+      "PROCESS_ID": "Prosesstilfelle-ID",
+      "ACTION_TYPE": "Handlingstype"
+    }
   }
 }

demo-shell/resources/i18n/nl.json

@@ -78,6 +78,7 @@
     "UPLOADER": "Uploader",
     "WEBSCRIPT": "Webscript",
     "TAG": "Tag",
+    "PIPES": "Pipes",
     "TRASHCAN": "Prullenbak",
     "SOCIAL": "Sociaal",
     "SETTINGS": "Instellingen",
@@ -93,9 +94,16 @@
     "TREE_VIEW": "Structuurweergave",
     "ICONS": "Pictogrammen",
     "PEOPLE_GROUPS_CLOUD": "Personen-/groepencloud",
+    "TASK_HEADER_CLOUD": {
+      "COMPONENT_NAME": "Taakkop cloud",
+      "APP_NAME_INPUT": "App-naam",
+      "TASK_ID_INPUT": "Taak-id",
+      "FIND_TASK_BUTTON": "Taak zoeken"
+    },
     "PEOPLE_CLOUD": "Component Personencloud",
     "GROUPS_CLOUD": "Component Groepencloud",
-    "CONFIRM-DIALOG": "Bevestigingsdialoogvenster"
+    "CONFIRM-DIALOG": "Bevestigingsdialoogvenster",
+    "COMMUNITY": "Community"
   },
   "TRASHCAN": {
     "ACTIONS": {
@@ -300,25 +308,33 @@
     "APP_NAME": "Toepassingsnaam",
     "APP_FILTER_MODE": "Filteren op toepassingsnaam",
     "ROLE_FILTER_MODE": "Filteren op rol",
-    "PRESELECT_VALIDATION": "Validatie voorselecteren"
-  },
-  "ABOUT": {
-    "TITLE": "Plug-ins",
-    "TABLE_HEADERS": {
-      "ID": "Id",
-      "NAME": "Naam",
-      "VERSION": "Versie",
-      "VENDOR": "Leverancier",
-      "LICENSE": "Licentie",
-      "RUNTIME": "Runtime",
-      "DESCRIPTION": "Beschrijving"
-    }
+    "PRESELECT_VALIDATION": "Validatie voorselecteren",
+    "ALL_PRESELECTED_USERS": "Alle voorgeselecteerde gebruikers",
+    "ALL_PRESELECTED_GROUPS": "Alle voorgeselecteerde groepen",
+    "INVALID_USERS": "Ongeldige gebruikers",
+    "INVALID_GROUPS": "Ongeldige groepen",
+    "READONLY_MODE": "Alleen-lezenmodus"
   },
   "SETTINGS_CLOUD": {
     "MULTISELECTION": "Multiselectie",
     "TESTING_MODE": "Testmodus",
     "SELECTION_MODE": "Selectiemodus",
+    "SELECTED_ROWS": "Geselecteerde rijen",
     "TASK_DETAILS_REDIRECTION": "Taakdetails weergeven bij klikken op taak",
-    "PROCESS_DETAILS_REDIRECTION": "Procesdetails weergeven bij klikken op proces"
+    "PROCESS_DETAILS_REDIRECTION": "Procesdetails weergeven bij klikken op proces",
+    "ACTION": {
+      "ACTION_TITLE": "Actie toevoegen",
+      "ACTION_MENU": "Actiemenu",
+      "CONTEX_MENU": "Contextmenu",
+      "ACTION_VISIBLE": "Zichtbaar",
+      "ACTION_DISABLE": "Uitschakelen",
+      "ADD_BUTTON": "Toevoegen",
+      "KEY": "Key",
+      "TITLE": "Titel",
+      "ICON": "Pictogram",
+      "TASK_ID": "Taak-ID",
+      "PROCESS_ID": "Procesinstantie-ID",
+      "ACTION_TYPE": "Actietype"
+    }
   }
 }

demo-shell/resources/i18n/pl.json

@@ -78,6 +78,7 @@
     "UPLOADER": "Program do przesyłania",
     "WEBSCRIPT": "Skrypt internetowy",
     "TAG": "Znacznik",
+    "PIPES": "Rury",
     "TRASHCAN": "Kosz",
     "SOCIAL": "Społecznościowy",
     "SETTINGS": "Ustawienia",
@@ -93,9 +94,16 @@
     "TREE_VIEW": "Widok drzewa",
     "ICONS": "Ikony",
     "PEOPLE_GROUPS_CLOUD": "Chmura dla osób/grup",
+    "TASK_HEADER_CLOUD": {
+      "COMPONENT_NAME": "Chmura nagłówka zadania",
+      "APP_NAME_INPUT": "Nazwa aplikacji",
+      "TASK_ID_INPUT": "Identyfikator zadania",
+      "FIND_TASK_BUTTON": "Znajdź zadanie"
+    },
     "PEOPLE_CLOUD": "Składnik Chmura dla osób",
     "GROUPS_CLOUD": "Składnik Chmura dla grup",
-    "CONFIRM-DIALOG": "Okno dialogowe potwierdzenia"
+    "CONFIRM-DIALOG": "Okno dialogowe potwierdzenia",
+    "COMMUNITY": "Community"
   },
   "TRASHCAN": {
     "ACTIONS": {
@@ -300,25 +308,33 @@
     "APP_NAME": "Nazwa aplikacji",
     "APP_FILTER_MODE": "Filtruj według nazwy aplikacji",
     "ROLE_FILTER_MODE": "Filtruj według roli",
-    "PRESELECT_VALIDATION": "Sprawdzanie poprawności wstępnego wyboru"
-  },
-  "ABOUT": {
-    "TITLE": "Dodatki typu plugin",
-    "TABLE_HEADERS": {
-      "ID": "Identyfikator",
-      "NAME": "Nazwa",
-      "VERSION": "Wersja",
-      "VENDOR": "Sprzedawca",
-      "LICENSE": "Licencja",
-      "RUNTIME": "Środowisko uruchomieniowe",
-      "DESCRIPTION": "Opis"
-    }
+    "PRESELECT_VALIDATION": "Sprawdzanie poprawności wstępnego wyboru",
+    "ALL_PRESELECTED_USERS": "Wszyscy wstępnie wybrani użytkownicy",
+    "ALL_PRESELECTED_GROUPS": "Wszystkie wstępnie wybrane grupy",
+    "INVALID_USERS": "Nieprawidłowi użytkownicy",
+    "INVALID_GROUPS": "Nieprawidłowe grupy",
+    "READONLY_MODE": "Tryb tylko do odczytu"
   },
   "SETTINGS_CLOUD": {
     "MULTISELECTION": "Wybór wielokrotny",
     "TESTING_MODE": "Tryb testowania",
     "SELECTION_MODE": "Tryb wyboru",
+    "SELECTED_ROWS": "Wybrane wiersze",
     "TASK_DETAILS_REDIRECTION": "Wyświetlaj szczegóły zadania po kliknięciu zadania",
-    "PROCESS_DETAILS_REDIRECTION": "Wyświetlaj szczegóły procesu po kliknięciu procesu"
+    "PROCESS_DETAILS_REDIRECTION": "Wyświetlaj szczegóły procesu po kliknięciu procesu",
+    "ACTION": {
+      "ACTION_TITLE": "Dodaj czynność",
+      "ACTION_MENU": "Menu czynności",
+      "CONTEX_MENU": "Menu kontekstowe",
+      "ACTION_VISIBLE": "Widoczne",
+      "ACTION_DISABLE": "Wyłącz",
+      "ADD_BUTTON": "Dodaj",
+      "KEY": "Klucz",
+      "TITLE": "Tytuł",
+      "ICON": "Ikona",
+      "TASK_ID": "Identyfikator zadania",
+      "PROCESS_ID": "Identyfikator wystąpienia procesu",
+      "ACTION_TYPE": "Typ czynności"
+    }
   }
 }

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

@@ -78,6 +78,7 @@
     "UPLOADER": "Carregador",
     "WEBSCRIPT": "Webscript",
     "TAG": "Marca",
+    "PIPES": "Tubos",
     "TRASHCAN": "Lixeira",
     "SOCIAL": "Social",
     "SETTINGS": "Configurações",
@@ -93,9 +94,16 @@
     "TREE_VIEW": "Exibição em árvore",
     "ICONS": "Ícones",
     "PEOPLE_GROUPS_CLOUD": "Nuvem de Pessoas/Grupo",
+    "TASK_HEADER_CLOUD": {
+      "COMPONENT_NAME": "Cabeçalho de tarefa da nuvem",
+      "APP_NAME_INPUT": "Nome do aplicativo",
+      "TASK_ID_INPUT": "ID da tarefa",
+      "FIND_TASK_BUTTON": "Localizar tarefa"
+    },
     "PEOPLE_CLOUD": "Componente da Nuvem de Pessoas",
     "GROUPS_CLOUD": "Componente da Nuvem de Grupos",
-    "CONFIRM-DIALOG": "Caixa de diálogo de confirmação"
+    "CONFIRM-DIALOG": "Caixa de diálogo de confirmação",
+    "COMMUNITY": "Comunidade"
   },
   "TRASHCAN": {
     "ACTIONS": {
@@ -300,25 +308,33 @@
     "APP_NAME": "Nome do aplicativo",
     "APP_FILTER_MODE": "Filtrar por nome do aplicativo",
     "ROLE_FILTER_MODE": "Filtrar por função",
-    "PRESELECT_VALIDATION": "Validação de pré-seleção"
-  },
-  "ABOUT": {
-    "TITLE": "Plugins",
-    "TABLE_HEADERS": {
-      "ID": "ID",
-      "NAME": "Nome",
-      "VERSION": "Versão",
-      "VENDOR": "Fornecedor",
-      "LICENSE": "Licença",
-      "RUNTIME": "Tempo de execução",
-      "DESCRIPTION": "Descrição"
-    }
+    "PRESELECT_VALIDATION": "Validação de pré-seleção",
+    "ALL_PRESELECTED_USERS": "Todos os usuários pré-selecionados",
+    "ALL_PRESELECTED_GROUPS": "Todos os grupos pré-selecionados",
+    "INVALID_USERS": "Usuários inválidos",
+    "INVALID_GROUPS": "Grupos inválidos",
+    "READONLY_MODE": "Modo somente leitura"
   },
   "SETTINGS_CLOUD": {
     "MULTISELECTION": "Seleção Múltipla",
     "TESTING_MODE": "Modo de Teste",
     "SELECTION_MODE": "Modo de Seleção",
+    "SELECTED_ROWS": "Linhas selecionadas",
     "TASK_DETAILS_REDIRECTION": "Exibir detalhes da tarefa ao clicar na tarefa",
-    "PROCESS_DETAILS_REDIRECTION": "Exibir detalhes do processo ao clicar no processo"
+    "PROCESS_DETAILS_REDIRECTION": "Exibir detalhes do processo ao clicar no processo",
+    "ACTION": {
+      "ACTION_TITLE": "Adicionar ação",
+      "ACTION_MENU": "Menu de ação",
+      "CONTEX_MENU": "Menu de contexto",
+      "ACTION_VISIBLE": "Visível",
+      "ACTION_DISABLE": "Desativar",
+      "ADD_BUTTON": "Adicionar",
+      "KEY": "Chave",
+      "TITLE": "Título",
+      "ICON": "Ícone",
+      "TASK_ID": "ID de tarefa",
+      "PROCESS_ID": "ID de instância de processo",
+      "ACTION_TYPE": "Tipo de ação"
+    }
   }
 }

demo-shell/resources/i18n/ru.json

@@ -78,6 +78,7 @@
     "UPLOADER": "Загрузчик",
     "WEBSCRIPT": "Webscript",
     "TAG": "Метка",
+    "PIPES": "Каналы",
     "TRASHCAN": "Корзина",
     "SOCIAL": "Социальный",
     "SETTINGS": "Параметры",
@@ -93,9 +94,16 @@
     "TREE_VIEW": "Иерархическое представление",
     "ICONS": "Значки",
     "PEOPLE_GROUPS_CLOUD": "Облако пользователей/групп",
+    "TASK_HEADER_CLOUD": {
+      "COMPONENT_NAME": "Облако заголовков задач",
+      "APP_NAME_INPUT": "Название приложения",
+      "TASK_ID_INPUT": "Идентификатор задачи",
+      "FIND_TASK_BUTTON": "Найти задачу"
+    },
     "PEOPLE_CLOUD": "Компонент облака «Пользователи»",
     "GROUPS_CLOUD": "Компонент облака «Группы»",
-    "CONFIRM-DIALOG": "Диалоговое окно подтверждения"
+    "CONFIRM-DIALOG": "Диалоговое окно подтверждения",
+    "COMMUNITY": "Community"
   },
   "TRASHCAN": {
     "ACTIONS": {
@@ -300,25 +308,33 @@
     "APP_NAME": "Имя приложения",
     "APP_FILTER_MODE": "Фильтровать по имени приложения",
     "ROLE_FILTER_MODE": "Фильтровать по роли",
-    "PRESELECT_VALIDATION": "Проверка предварительного выбора"
-  },
-  "ABOUT": {
-    "TITLE": "Подключаемые модули",
-    "TABLE_HEADERS": {
-      "ID": "Идентификатор",
-      "NAME": "Имя",
-      "VERSION": "Версия",
-      "VENDOR": "Поставщик",
-      "LICENSE": "Лицензия",
-      "RUNTIME": "Среда выполнения",
-      "DESCRIPTION": "Описание"
-    }
+    "PRESELECT_VALIDATION": "Проверка предварительного выбора",
+    "ALL_PRESELECTED_USERS": "Все заранее заданные пользователи",
+    "ALL_PRESELECTED_GROUPS": "Все заранее заданные группы",
+    "INVALID_USERS": "Недействительные пользователи",
+    "INVALID_GROUPS": "Недействительные группы",
+    "READONLY_MODE": "Режим только для чтения"
   },
   "SETTINGS_CLOUD": {
     "MULTISELECTION": "Выбор нескольких",
     "TESTING_MODE": "Режим тестирования",
     "SELECTION_MODE": "Режим выбора",
+    "SELECTED_ROWS": "Выбранные ряды",
     "TASK_DETAILS_REDIRECTION": "Отображать подробные сведения о задаче при нажатии на задачу",
-    "PROCESS_DETAILS_REDIRECTION": "Показывать сведения о процессе при нажатии на процессе"
+    "PROCESS_DETAILS_REDIRECTION": "Показывать сведения о процессе при нажатии на процессе",
+    "ACTION": {
+      "ACTION_TITLE": "Добавить действие",
+      "ACTION_MENU": "Меню действий",
+      "CONTEX_MENU": "Контекстное меню",
+      "ACTION_VISIBLE": "Видимый",
+      "ACTION_DISABLE": "Отключить",
+      "ADD_BUTTON": "Добавить",
+      "KEY": "Ключ",
+      "TITLE": "Заголовок",
+      "ICON": "Значок",
+      "TASK_ID": "ИД задачи",
+      "PROCESS_ID": "Идентификатор экземпляра процесса",
+      "ACTION_TYPE": "Тип действия"
+    }
   }
 }

demo-shell/resources/i18n/sv.json

@@ -24,8 +24,8 @@
       "COMMENTS": "Visa kommentarer"
     },
     "PERSONAL-FILES": "Personliga filer",
-    "WARN-MULTIPLE-UPLOADS": "Visa varning för flera uppladningar",
-    "CUSTOM-PERMISSION-MESSAGE": "Aktivera anpassat behörighetersmeddelande",
+    "WARN-MULTIPLE-UPLOADS": "Visa varning för flera uppladdningar",
+    "CUSTOM-PERMISSION-MESSAGE": "Aktivera anpassat behörighetsmeddelande",
     "MEDIUM-TIME-FORMAT": "Aktivera mellantidsformat för dokumentlista",
     "SEARCH": {
       "RADIO": {
@@ -59,12 +59,12 @@
     "NODE-SELECTOR": "Nodväljare",
     "SITES": "Webbplatser",
     "CONTENT_SERVICES": "Content Services",
-    "BREADCRUMB": "Brödsmula",
+    "BREADCRUMB": "Synlig sökväg",
     "NOTIFICATIONS": "Aviseringar",
     "TASK_LIST": "Uppgiftslista",
     "PROCESS_LIST": "Processlista",
     "PROCESS_CLOUD": "Activiti Cloud",
-    "CARD_VIEW": "CardView",
+    "CARD_VIEW": "Kortvy",
     "PROCESS_SERVICES": "Process Services",
     "LOGIN": "Inloggning",
     "CUSTOM_SOURCES": "Anpassade källor",
@@ -75,14 +75,15 @@
     "FORM": "Formulär",
     "FORM_LIST": "Formulärlista",
     "FORM_LOADING": "Formulär läses in",
-    "UPLOADER": "Uppladdare",
+    "UPLOADER": "Uppladdad av",
     "WEBSCRIPT": "Webbskript",
     "TAG": "Tagg",
+    "PIPES": "Pipes",
     "TRASHCAN": "Papperskorg",
     "SOCIAL": "Social",
     "SETTINGS": "Inställningar",
     "CONFIG-EDITOR": "Konfigurationseditor",
-    "OVERLAY_VIEWER": "Överdragsvisare",
+    "OVERLAY_VIEWER": "Överlagringssvisare",
     "ABOUT": "Om",
     "SEARCH": "Utvidgad sökning",
     "EXTENDED_SEARCH_QUERY_BODY": "Utvidgad sökning med frågetext",
@@ -93,9 +94,16 @@
     "TREE_VIEW": "Trädvy",
     "ICONS": "Ikoner",
     "PEOPLE_GROUPS_CLOUD": "Personer/grupp moln",
+    "TASK_HEADER_CLOUD": {
+      "COMPONENT_NAME": "Uppgiftsrubrik för moln eller molnkomponent",
+      "APP_NAME_INPUT": "Programnamn",
+      "TASK_ID_INPUT": "Uppgifts-ID",
+      "FIND_TASK_BUTTON": "Hitta uppgift"
+    },
     "PEOPLE_CLOUD": "Personer moln-komponent",
     "GROUPS_CLOUD": "Grupper moln-komponent",
-    "CONFIRM-DIALOG": "Bekräftelsedialog"
+    "CONFIRM-DIALOG": "Dialogruta för bekräftelse",
+    "COMMUNITY": "Community"
   },
   "TRASHCAN": {
     "ACTIONS": {
@@ -109,7 +117,7 @@
     }
   },
   "DOCUMENT_LIST": {
-    "MULTISELECT_CHECKBOXES": "Flera val (med kryssrutor)",
+    "MULTISELECT_CHECKBOXES": "Flerval (med kryssrutor)",
     "THUMBNAILS": "Aktivera miniatyrbilder",
     "ALLOW_DROP_FILES": "Aktivera släpp filer i en mapp",
     "MULTIPLE_FILE_UPLOAD": "Uppladdning av flera filer",
@@ -177,8 +185,8 @@
     "ADD_ROW": "Lägg till rad",
     "REPLACE_ROWS": "Ersätt rader",
     "REPLACE_COLUMNS": "Ersätt kolumner",
-    "LOAD_NODE": "Ladda upp nod",
-    "MULTISELECT": "Flera val",
+    "LOAD_NODE": "Läs in nod",
+    "MULTISELECT": "Flerval",
     "MULTISELECT_DESCRIPTION": "Använd Cmd (Mac) eller Ctrl (Windows) för att växla val av flera objekt"
   },
   "ANALYTICS_REPORT": {
@@ -208,7 +216,7 @@
     "FORM_DATA_MESSAGE": "Ange värden för att fylla formuläret",
     "TYPEAHEAD_PLACEHOLDER": "Typeahead",
     "RADIO_PLACEHOLDER": "Radioknapp",
-    "SELECT_PLACEHOLDER": "DropDown"
+    "SELECT_PLACEHOLDER": "Dropdown"
   },
   "LOGIN": {
     "CONTENT_SERVICES": "Content Services",
@@ -224,12 +232,12 @@
     "FACET_FIELDS": {
       "TYPE": "1:Typ",
       "SIZE": "2:Storlek",
-      "CREATOR": "3:Skapat av",
-      "MODIFIER": "4:Ändrat av",
+      "CREATOR": "3:Skapad av",
+      "MODIFIER": "4:Ändrad av",
       "CREATED": "5:Skapad den"
     },
     "FACET_QUERIES": {
-      "MY_FACET_QUERIES": "Mina facet-förfrågningar",
+      "MY_FACET_QUERIES": "Mina fasettförfrågningar",
       "CREATED_THIS_YEAR": "1.Skapad det här året",
       "MIMETYPE": "2.Typ: HTML",
       "XTRASMALL": "3.Storlek: extra small",
@@ -300,25 +308,33 @@
     "APP_NAME": "Programnamn",
     "APP_FILTER_MODE": "Filterera på programnamn",
     "ROLE_FILTER_MODE": "Filtrera på roll",
-    "PRESELECT_VALIDATION": "Förval validering"
-  },
-  "ABOUT": {
-    "TITLE": "Plugins",
-    "TABLE_HEADERS": {
-      "ID": "ID",
-      "NAME": "Namn",
-      "VERSION": "Version",
-      "VENDOR": "Säljare",
-      "LICENSE": "Licens",
-      "RUNTIME": "Runtime",
-      "DESCRIPTION": "Beskrivning"
-    }
+    "PRESELECT_VALIDATION": "Förval validering",
+    "ALL_PRESELECTED_USERS": "Alla förvalda användare",
+    "ALL_PRESELECTED_GROUPS": "Alla förvalda grupper",
+    "INVALID_USERS": "Ogiltiga användare",
+    "INVALID_GROUPS": "Ogiltiga grupper",
+    "READONLY_MODE": "Skrivskyddat läge"
   },
   "SETTINGS_CLOUD": {
     "MULTISELECTION": "Flerval",
     "TESTING_MODE": "Testläge",
     "SELECTION_MODE": "Urvalsläge",
+    "SELECTED_ROWS": "Valda rader",
     "TASK_DETAILS_REDIRECTION": "Visa uppgiftsdetaljer vid klick på uppgift",
-    "PROCESS_DETAILS_REDIRECTION": "Visa processinformation vid processklick"
+    "PROCESS_DETAILS_REDIRECTION": "Visa processinformation vid processklick",
+    "ACTION": {
+      "ACTION_TITLE": "Lägg till åtgärd",
+      "ACTION_MENU": "Åtgärdsmeny",
+      "CONTEX_MENU": "Innehållsmeny",
+      "ACTION_VISIBLE": "Synlig",
+      "ACTION_DISABLE": "Avaktivera",
+      "ADD_BUTTON": "Lägg till",
+      "KEY": "Nyckel",
+      "TITLE": "Titel",
+      "ICON": "Ikon",
+      "TASK_ID": "Uppgifts-ID",
+      "PROCESS_ID": "Processinstans-ID",
+      "ACTION_TYPE": "Åtgärdstyp"
+    }
   }
 }

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

@@ -78,6 +78,7 @@
     "UPLOADER": "上传程序",
     "WEBSCRIPT": "Webscript",
     "TAG": "标签",
+    "PIPES": "管道",
     "TRASHCAN": "垃圾桶",
     "SOCIAL": "社交",
     "SETTINGS": "设置",
@@ -93,9 +94,16 @@
     "TREE_VIEW": "树视图",
     "ICONS": "图标",
     "PEOPLE_GROUPS_CLOUD": "人员/一组云",
+    "TASK_HEADER_CLOUD": {
+      "COMPONENT_NAME": "云的任务标题",
+      "APP_NAME_INPUT": "应用程序名称",
+      "TASK_ID_INPUT": "任务 id",
+      "FIND_TASK_BUTTON": "查找任务"
+    },
     "PEOPLE_CLOUD": "人员云组件",
     "GROUPS_CLOUD": "组云组件",
-    "CONFIRM-DIALOG": "确认对话"
+    "CONFIRM-DIALOG": "确认对话",
+    "COMMUNITY": "Community"
   },
   "TRASHCAN": {
     "ACTIONS": {
@@ -103,9 +111,9 @@
       "RESTORE": "恢复"
     },
     "EMPTY_STATE": {
-      "TITLE": "“垃圾”为空",
-      "FIRST_TEXT": "删除的项目移动到“垃圾”。",
-      "SECOND_TEXT": "清空“垃圾”以永久删除项目。"
+      "TITLE": "回收站为空",
+      "FIRST_TEXT": "您删除的项目已移至回收站。",
+      "SECOND_TEXT": "清空回收站以永久删除项目。"
     }
   },
   "DOCUMENT_LIST": {
@@ -129,7 +137,7 @@
     "COLUMNS": {
       "DISPLAY_NAME": "显示名称",
       "IS_LOCKED": "锁定",
-      "TAG": "标签",
+      "TAG": "标记",
       "NODE_ID": "节点 ID",
       "CREATED_BY": "创建者",
       "CREATED_ON": "创建日期",
@@ -245,9 +253,9 @@
     "RATING": "评分组件"
   },
   "TAG": {
-    "LIST": "列表标签 Content Services",
+    "LIST": "列表标记 Content Services",
     "INSERT": "插入节点 ID",
-    "NODE_LIST": "标签列表（按节点 ID 排序）"
+    "NODE_LIST": "标记列表（按节点 ID 排序）"
   },
   "DEMO_PERMISSION": {
     "INHERIT_PERMISSION_BUTTON": "继承权限",
@@ -300,25 +308,33 @@
     "APP_NAME": "应用程序名称",
     "APP_FILTER_MODE": "按应用程序名称筛选",
     "ROLE_FILTER_MODE": "按角色筛选",
-    "PRESELECT_VALIDATION": "预先选择验证"
-  },
-  "ABOUT": {
-    "TITLE": "插件",
-    "TABLE_HEADERS": {
-      "ID": "ID",
-      "NAME": "名称",
-      "VERSION": "版本",
-      "VENDOR": "供应商",
-      "LICENSE": "许可证",
-      "RUNTIME": "运行时",
-      "DESCRIPTION": "说明"
-    }
+    "PRESELECT_VALIDATION": "预先选择验证",
+    "ALL_PRESELECTED_USERS": "所有预选用户",
+    "ALL_PRESELECTED_GROUPS": "所有预选组",
+    "INVALID_USERS": "无效用户",
+    "INVALID_GROUPS": "无效组",
+    "READONLY_MODE": "Read-only（只读）模式"
   },
   "SETTINGS_CLOUD": {
     "MULTISELECTION": "多重选择",
     "TESTING_MODE": "测试模式",
     "SELECTION_MODE": "选择模式",
+    "SELECTED_ROWS": "选定行",
     "TASK_DETAILS_REDIRECTION": "单击任务时显示任务详情",
-    "PROCESS_DETAILS_REDIRECTION": "单击流程时显示流程详细信息"
+    "PROCESS_DETAILS_REDIRECTION": "单击流程时显示流程详细信息",
+    "ACTION": {
+      "ACTION_TITLE": "添加操作",
+      "ACTION_MENU": "操作菜单",
+      "CONTEX_MENU": "上下文菜单",
+      "ACTION_VISIBLE": "可见",
+      "ACTION_DISABLE": "禁用",
+      "ADD_BUTTON": "添加",
+      "KEY": "Key",
+      "TITLE": "标题",
+      "ICON": "图标",
+      "TASK_ID": "任务 ID",
+      "PROCESS_ID": "流程实例 ID",
+      "ACTION_TYPE": "操作类型"
+    }
   }
 }

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

@@ -1,4 +1,4 @@
-<div class="adf-demo-app-container">
+<div class="app-demo-app-container">
     <router-outlet></router-outlet>
     <router-outlet name="overlay"></router-outlet>
 </div>

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

@@ -7,22 +7,11 @@ router-outlet[name='overlay'] + * {
     right: 0;
 }
 
-.adf-demo-app-container {
+.app-demo-app-container {
     height: 100%;
     width: 100%;
 }
 
-@media (max-width: 425px) {
-    adf-content-node-selector {
-        .adf-content-node-selector-content-list {
-            .adf-datatable-cell {
-                display: none;
-            }
-
-            .adf-datatable-cell:first-child,
-            .adf-datatable-cell:nth-child(2) {
-                display: table-cell;
-            }
-        }
-    }
+[dir='rtl'] .mat-icon {
+    transform: scale(-1, 1);
 }

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

@@ -17,17 +17,16 @@
 
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { ChartsModule } from 'ng2-charts';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
 
-import { AppConfigService, TRANSLATION_PROVIDER, DebugAppConfigService, CoreModule, CoreAutomationService } from '@alfresco/adf-core';
+import { AppConfigService, TRANSLATION_PROVIDER, DebugAppConfigService, CoreModule, CoreAutomationService, AuthBearerInterceptor } from '@alfresco/adf-core';
 import { ExtensionsModule } from '@alfresco/adf-extensions';
 import { AppComponent } from './app.component';
 import { MaterialModule } from './material.module';
-import { LoginComponent } from './components/login/login.component';
 import { LogoutComponent } from './components/logout/logout.component';
 import { AppLayoutComponent } from './components/app-layout/app-layout.component';
 import { HomeComponent } from './components/home/home.component';
@@ -52,7 +51,6 @@ import { MetadataDialogAdapterComponent } from './components/files/metadata-dial
 import { ThemePickerModule } from './components/theme-picker/theme-picker';
 
 import { routing } from './app.routes';
-import { ReactiveFormsModule } from '@angular/forms';
 import { TaskAttachmentsComponent } from './components/process-service/task-attachments.component';
 import { ProcessAttachmentsComponent } from './components/process-service/process-attachments.component';
 import { SharedLinkViewComponent } from './components/shared-link-view/shared-link-view.component';
@@ -63,8 +61,6 @@ import { MonacoEditorModule } from 'ngx-monaco-editor';
 import { ContentModule } from '@alfresco/adf-content-services';
 import { InsightsModule } from '@alfresco/adf-insights';
 import { ProcessModule } from '@alfresco/adf-process-services';
-import { AuthBearerInterceptor } from './services';
-import { ProcessServicesCloudModule } from '@alfresco/adf-process-services-cloud';
 import { AppExtensionsModule } from './app-extension.module';
 import { TreeViewSampleComponent } from './components/tree-view/tree-view-sample.component';
 import { CloudLayoutComponent } from './components/cloud/cloud-layout.component';
@@ -72,6 +68,7 @@ import { AppsCloudDemoComponent } from './components/cloud/apps-cloud-demo.compo
 import { TasksCloudDemoComponent } from './components/cloud/tasks-cloud-demo.component';
 import { ProcessesCloudDemoComponent } from './components/cloud/processes-cloud-demo.component';
 import { TaskDetailsCloudDemoComponent } from './components/cloud/task-details-cloud-demo.component';
+import { TaskHeaderCloudDemoComponent } from './components/cloud/task-header-cloud-demo.component';
 import { CloudViewerComponent } from './components/cloud/cloud-viewer.component';
 import { ProcessDetailsCloudDemoComponent } from './components/cloud/process-details-cloud-demo.component';
 import { StartTaskCloudDemoComponent } from './components/cloud/start-task-cloud-demo.component';
@@ -80,23 +77,54 @@ import { CloudBreadcrumbsComponent } from './components/cloud/cloud-breadcrumb-c
 import { CloudFiltersDemoComponent } from './components/cloud/cloud-filters-demo.component';
 import { TemplateDemoComponent } from './components/template-list/template-demo.component';
 import { PeopleGroupCloudDemoComponent } from './components/cloud/people-groups-cloud-demo.component';
-import { CloudSettingsComponent } from './components/cloud/cloud-settings.component';
-import { NestedMenuPositionDirective } from './components/cloud/directives/nested-menu-position.directive';
 import { ConfirmDialogExampleComponent } from './components/confirm-dialog/confirm-dialog-example.component';
 import { FormCloudDemoComponent } from './components/app-layout/cloud/form-demo/cloud-form-demo.component';
-import { CommunityCloudComponent } from './components/cloud/community/community-cloud.component';
-import { CommunityTasksCloudDemoComponent } from './components/cloud/community/community-task-cloud.component';
-import { CommunityCloudFiltersDemoComponent } from './components/cloud/community/community-filters.component';
-import { CommunityStartProcessCloudDemoComponent } from './components/cloud/community/community-start-process-cloud.component';
-import { CommunityStartTaskCloudDemoComponent } from './components/cloud/community/community-start-task-cloud.component';
-import { CommunityProcessDetailsCloudDemoComponent } from './components/cloud/community/community-process-details-cloud.component';
-import { CommunityProcessesCloudDemoComponent } from './components/cloud/community/community-processes-cloud.component';
-import { CommunityTaskDetailsCloudDemoComponent } from './components/cloud/community/community-task-details-cloud.component';
+import { environment } from '../environments/environment';
+import { AppCloudSharedModule } from './components/cloud/shared/cloud.shared.module';
+import { DemoErrorComponent } from './components/error/demo-error.component';
+import {
+    ProcessServicesCloudModule
+} from '@alfresco/adf-process-services-cloud';
+
+import { registerLocaleData } from '@angular/common';
+import localeFr from '@angular/common/locales/fr';
+import localeDe from '@angular/common/locales/de';
+import localeIt from '@angular/common/locales/it';
+import localeEs from '@angular/common/locales/es';
+import localeJa from '@angular/common/locales/ja';
+import localeNl from '@angular/common/locales/nl';
+import localePt from '@angular/common/locales/pt';
+import localeNb from '@angular/common/locales/nb';
+import localeRu from '@angular/common/locales/ru';
+import localeCh from '@angular/common/locales/zh';
+import localeAr from '@angular/common/locales/ar';
+import localeCs from '@angular/common/locales/cs';
+import localePl from '@angular/common/locales/pl';
+import localeFi from '@angular/common/locales/fi';
+import localeDa from '@angular/common/locales/da';
+import localeSv from '@angular/common/locales/sv';
+
+registerLocaleData(localeFr);
+registerLocaleData(localeDe);
+registerLocaleData(localeIt);
+registerLocaleData(localeEs);
+registerLocaleData(localeJa);
+registerLocaleData(localeNl);
+registerLocaleData(localePt);
+registerLocaleData(localeNb);
+registerLocaleData(localeRu);
+registerLocaleData(localeCh);
+registerLocaleData(localeAr);
+registerLocaleData(localeCs);
+registerLocaleData(localePl);
+registerLocaleData(localeFi);
+registerLocaleData(localeDa);
+registerLocaleData(localeSv);
 
 @NgModule({
     imports: [
         BrowserModule,
-        BrowserAnimationsModule,
+        environment.e2e ? NoopAnimationsModule : BrowserAnimationsModule,
         ReactiveFormsModule,
         routing,
         FormsModule,
@@ -112,11 +140,11 @@ import { CommunityTaskDetailsCloudDemoComponent } from './components/cloud/commu
         ExtensionsModule.forRoot(),
         ThemePickerModule,
         ChartsModule,
+        AppCloudSharedModule,
         MonacoEditorModule.forRoot()
     ],
     declarations: [
         AppComponent,
-        LoginComponent,
         LogoutComponent,
         AppLayoutComponent,
         HomeComponent,
@@ -140,6 +168,7 @@ import { CommunityTaskDetailsCloudDemoComponent } from './components/cloud/commu
         SharedLinkViewComponent,
         FormLoadingComponent,
         DemoPermissionComponent,
+        DemoErrorComponent,
         FormLoadingComponent,
         ReportIssueComponent,
         TreeViewSampleComponent,
@@ -148,6 +177,7 @@ import { CommunityTaskDetailsCloudDemoComponent } from './components/cloud/commu
         TasksCloudDemoComponent,
         ProcessesCloudDemoComponent,
         TaskDetailsCloudDemoComponent,
+        TaskHeaderCloudDemoComponent,
         CloudViewerComponent,
         ProcessDetailsCloudDemoComponent,
         StartTaskCloudDemoComponent,
@@ -156,19 +186,9 @@ import { CommunityTaskDetailsCloudDemoComponent } from './components/cloud/commu
         CloudFiltersDemoComponent,
         TemplateDemoComponent,
         PeopleGroupCloudDemoComponent,
-        CloudSettingsComponent,
-        NestedMenuPositionDirective,
         ConfirmDialogExampleComponent,
         FormCloudDemoComponent,
-        ConfirmDialogExampleComponent,
-        CommunityCloudComponent,
-        CommunityTasksCloudDemoComponent,
-        CommunityCloudFiltersDemoComponent,
-        CommunityProcessesCloudDemoComponent,
-        CommunityStartProcessCloudDemoComponent,
-        CommunityStartTaskCloudDemoComponent,
-        CommunityProcessDetailsCloudDemoComponent,
-        CommunityTaskDetailsCloudDemoComponent
+        ConfirmDialogExampleComponent
     ],
     providers: [
         {

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

@@ -17,9 +17,14 @@
 
 import { ModuleWithProviders } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { AuthGuard, AuthGuardEcm, ErrorContentComponent, AuthGuardBpm, AuthGuardSsoRoleService } from '@alfresco/adf-core';
+import {
+    AuthGuard,
+    AuthGuardEcm,
+    ErrorContentComponent,
+    AuthGuardBpm,
+    AuthGuardSsoRoleService
+} from '@alfresco/adf-core';
 import { AppLayoutComponent } from './components/app-layout/app-layout.component';
-import { LoginComponent } from './components/login/login.component';
 import { HomeComponent } from './components/home/home.component';
 import { LogoutComponent } from './components/logout/logout.component';
 import { ProcessServiceComponent } from './components/process-service/process-service.component';
@@ -52,16 +57,10 @@ import { ProcessDetailsCloudDemoComponent } from './components/cloud/process-det
 import { TemplateDemoComponent } from './components/template-list/template-demo.component';
 import { FormCloudDemoComponent } from './components/app-layout/cloud/form-demo/cloud-form-demo.component';
 import { ConfirmDialogExampleComponent } from './components/confirm-dialog/confirm-dialog-example.component';
-import { CommunityTasksCloudDemoComponent } from './components/cloud/community/community-task-cloud.component';
-import { CommunityCloudComponent } from './components/cloud/community/community-cloud.component';
-import { CommunityStartProcessCloudDemoComponent } from './components/cloud/community/community-start-process-cloud.component';
-import { CommunityStartTaskCloudDemoComponent } from './components/cloud/community/community-start-task-cloud.component';
-import { CommunityProcessDetailsCloudDemoComponent } from './components/cloud/community/community-process-details-cloud.component';
-import { CommunityProcessesCloudDemoComponent } from './components/cloud/community/community-processes-cloud.component';
-import { CommunityTaskDetailsCloudDemoComponent } from './components/cloud/community/community-task-details-cloud.component';
-
+import { DemoErrorComponent } from './components/error/demo-error.component';
+import { TaskHeaderCloudDemoComponent } from './components/cloud/task-header-cloud-demo.component';
 export const appRoutes: Routes = [
-    { path: 'login', component: LoginComponent },
+    { path: 'login', loadChildren: 'app/components/login/login.module#AppLoginModule' },
     { path: 'logout', component: LogoutComponent },
     {
         path: 'settings',
@@ -70,8 +69,8 @@ export const appRoutes: Routes = [
     {
         path: 'files/:nodeId/view',
         component: AppComponent,
-        canActivate: [ AuthGuardEcm ],
-        canActivateChild: [ AuthGuardEcm ],
+        canActivate: [AuthGuardEcm],
+        canActivateChild: [AuthGuardEcm],
         outlet: 'overlay',
         children: [
             {
@@ -88,7 +87,7 @@ export const appRoutes: Routes = [
         children: [
             {
                 path: '',
-                loadChildren: 'app/components/blob-preview/blob-preview.module#BlobPreviewModule'
+                loadChildren: 'app/components/file-view/file-view.module#FileViewModule'
             }
         ]
     },
@@ -121,6 +120,15 @@ export const appRoutes: Routes = [
                     }
                 ]
             },
+            {
+                path: 'pipes',
+                children: [
+                    {
+                        path: '',
+                        loadChildren: 'app/components/pipes/pipes.module#AppPipesModule'
+                    }
+                ]
+            },
             {
                 path: 'card-view',
                 children: [
@@ -159,8 +167,7 @@ export const appRoutes: Routes = [
             {
                 path: 'cloud',
                 canActivate: [AuthGuardSsoRoleService],
-                data: { roles: ['ACTIVITI_USER'], redirectUrl: '/error/403'},
-
+                data: { roles: ['ACTIVITI_USER'], redirectUrl: '/error/403' },
                 children: [
                     {
                         path: '',
@@ -170,40 +177,18 @@ export const appRoutes: Routes = [
                         path: 'people-group-cloud',
                         component: PeopleGroupCloudDemoComponent
                     },
+                    {
+                        path: 'task-header-cloud',
+                        component: TaskHeaderCloudDemoComponent
+                    },
                     {
                         path: 'community',
-                        component: CommunityCloudComponent,
-                        children: [
-                            {
-                                path: 'tasks',
-                                component: CommunityTasksCloudDemoComponent
-                            },
-                            {
-                                path: 'processes',
-                                component: CommunityProcessesCloudDemoComponent
-                            },
-                            {
-                                path: 'start-task',
-                                component: CommunityStartTaskCloudDemoComponent
-                            },
-                            {
-                                path: 'start-process',
-                                component: CommunityStartProcessCloudDemoComponent
-                            },
-                            {
-                                path: 'task-details/:taskId',
-                                component: CommunityTaskDetailsCloudDemoComponent
-                            },
-                            {
-                                path: 'process-details/:processInstanceId',
-                                component: CommunityProcessDetailsCloudDemoComponent
-                            }
-                        ]
+                        loadChildren: 'app/components/cloud/community/community.module#AppCommunityModule'
                     },
                     {
                         path: ':appName',
                         canActivate: [AuthGuardSsoRoleService],
-                        data: { clientRoles: ['appName'], roles: ['ACTIVITI_USER'], redirectUrl: '/error/403'},
+                        data: { clientRoles: ['appName'], roles: ['ACTIVITI_USER'], redirectUrl: '/error/403' },
                         children: [
                             {
                                 path: '',
@@ -432,19 +417,30 @@ export const appRoutes: Routes = [
                 canActivate: [AuthGuardBpm],
                 loadChildren: 'app/components/process-list-demo/process-list.module#AppProcessListModule'
             },
-            {
-                path: 'error/:id',
-                component: ErrorContentComponent
-            },
             {
                 path: 'error/no-authorization',
                 component: ErrorContentComponent
-            },
-            {
-                path: '**',
-                redirectTo: 'error/404'
             }
         ]
+    },
+    {
+        path: 'error',
+        component: AppLayoutComponent,
+        children: [
+            {
+                path: '',
+                redirectTo: '/error/404',
+                pathMatch: 'full'
+            },
+            {
+                path: ':id',
+                component: DemoErrorComponent
+            }
+        ]
+    },
+    {
+        path: '**',
+        redirectTo: 'error/404'
     }
 ];
 

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

@@ -1 +1,12 @@
-<adf-about></adf-about>
+<adf-about-github-link
+    [url]="url"
+    [version]="version">
+</adf-about-github-link>
+
+<adf-about-product-version>
+</adf-about-product-version>
+
+<adf-about-application-modules
+    [dependencies]="dependencies"
+    [showExtensions]="showExtensions">
+</adf-about-application-modules>

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

@@ -16,6 +16,7 @@
  */
 
 import { Component } from '@angular/core';
+import { name, version, commit, dependencies } from '../../../../../package.json';
 
 @Component({
     selector: 'app-about-page',
@@ -24,6 +25,11 @@ import { Component } from '@angular/core';
 })
 export class AboutComponent {
 
+    url = `https://github.com/Alfresco/${name}/commits/${commit}`;
+    version = version;
+    dependencies = dependencies;
+    showExtensions = true;
+
     constructor() {
 
     }

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

@@ -1,64 +1,64 @@
-<adf-sidenav-layout [sidenavMin]="70" [sidenavMax]="220" [stepOver]="780" [hideSidenav]="hideSidenav" [direction]="direction"
-    [expandedSidenav]="expandedSidenav" (expanded)="setState($event)" [position]="position">
+<adf-sidenav-layout [sidenavMin]="70" [sidenavMax]="220" [stepOver]="780" [hideSidenav]="hideSidenav"
+    [expandedSidenav]="expandedSidenav" (expanded)="setState($event)" [position]="position" data-automation-id="sidenav-layout">
 
     <adf-sidenav-layout-header>
-        <ng-template let-toggleMenu="toggleMenu">
+        <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" [color]="color" [position]="position"
-                (clicked)=toggleMenu($event)>
+                [tooltip]="tooltip | translate" [showSidenavToggle]="showMenu" [expandedSidenav]="!isMenuMinimized()"
+                [color]="color" [position]="position" (clicked)=toggleMenu($event)>
 
-                <div class="adf-app-layout-menu-spacer"></div>
+                <div class="app-layout-menu-spacer"></div>
 
                 <app-search-bar fxFlex="0 1 auto"></app-search-bar>
 
-                <div class="adf-header-delimiexpandedSidenavter"></div>
+                <div class="app-header-delimiexpandedSidenavter"></div>
 
-                <adf-userinfo class="adf-app-layout-user-profile" [menuPositionX]="'before'" [menuPositionY]="'above'">
+                <adf-userinfo [menuPositionX]="'before'" [menuPositionY]="'above'">
                 </adf-userinfo>
 
                 <app-theme-picker></app-theme-picker>
                 <button data-automation-id="language-menu-button" mat-icon-button [matMenuTriggerFor]="langMenu">
                     <mat-icon>language</mat-icon>
                 </button>
-                <mat-menu #langMenu="matMenu" class="adf-menu">
+                <mat-menu #langMenu="matMenu" class="app-menu">
                     <adf-language-menu></adf-language-menu>
                 </mat-menu>
 
+                <adf-notification-history menuPositionX="before" menuPositionY="above"></adf-notification-history>
+
             </adf-layout-header>
         </ng-template>
     </adf-sidenav-layout-header>
 
     <adf-sidenav-layout-navigation>
         <ng-template let-isMenuMinimized="isMenuMinimized">
-            <mat-nav-list class="adf-sidenav-linklist">
-
+            <mat-nav-list class="app-sidenav-linklist">
                 <ng-container *ngFor="let link of links">
-                    <a appNestedMenuPosition mat-list-item #appMenuTrigger *ngIf="link.children" [attr.data-automation-id]="link.title | translate"
-                        class="adf-sidenav-link" [matMenuTriggerFor]="nestedMenu" [menuMinimized]="isMenuMinimized()"
-                        [matMenuTriggerData]="{links: link.children}">
+                    <ng-container *ngIf="link.children">
+                        <mat-list-item (click)="trigger.openMenu()" [attr.data-automation-id]="link.title | translate" class="app-sidenav-link">
+                            <mat-icon matListIcon>{{link.icon}}</mat-icon>
+                            <span matLine *ngIf="!isMenuMinimized()">{{link.title | translate }}</span>
+                            <mat-icon class="app-sidenav-link__expand-button" [matMenuTriggerData]="{links: link.children}"
+                                rippleTrigger mat-icon-button #trigger="matMenuTrigger"
+                                [matMenuTriggerFor]="nestedMenu">arrow_right</mat-icon>
+                        </mat-list-item>
+                    </ng-container>
 
-                        <mat-icon matListIcon class="adf-sidenav-menu-icon">{{link.icon}}</mat-icon>
-                        <div class="adf-sidenav-menu-label" *ngIf="!isMenuMinimized()">
-                            {{link.title | translate }}</div>
-                        <mat-icon class="adf-menu-expand-icon">arrow_right</mat-icon>
-                    </a>
-
-                    <a mat-list-item *ngIf="!link.children" [attr.data-automation-id]="link.title | translate"
-                        class="adf-sidenav-link" [routerLink]="link.href" routerLinkActive="active"
-                        [routerLinkActiveOptions]="{ exact: true }">
-
-                        <mat-icon matListIcon class="adf-sidenav-menu-icon">{{link.icon}}</mat-icon>
-                        <div class="adf-sidenav-menu-label" *ngIf="!isMenuMinimized()">
-                            {{link.title | translate }}</div>
-                    </a>
+                    <ng-container *ngIf="!link.children">
+                        <mat-list-item [routerLink]="link.href"
+                            routerLinkActive="app-sidenav-link--active" [routerLinkActiveOptions]="{ exact: true }"
+                            [attr.data-automation-id]="link.title | translate" class="app-sidenav-link">
+                            <mat-icon matListIcon >{{link.icon}}</mat-icon>
+                            <span matLine *ngIf="!isMenuMinimized()">{{link.title | translate }}</span>
+                        </mat-list-item>
+                    </ng-container>
                 </ng-container>
 
-                <a mat-list-item adf-logout [enableRedirect]="enableRedirect" redirectUri="/logout"
-                    class="adf-sidenav-link">
-                    <mat-icon matListIcon class="adf-sidenav-menu-icon">exit_to_app</mat-icon>
-                    <div class="adf-sidenav-menu-label" *ngIf="!isMenuMinimized()">Logout</div>
-                </a>
+                <mat-list-item adf-logout [enableRedirect]="enableRedirect" redirectUri="/logout" class="app-sidenav-link" data-automation-id="Logout" >
+                    <mat-icon matListIcon>exit_to_app</mat-icon>
+                    <span matLine *ngIf="!isMenuMinimized()">Logout</span>
+                </mat-list-item>
             </mat-nav-list>
 
         </ng-template>
@@ -73,15 +73,16 @@
 </adf-sidenav-layout>
 <app-log></app-log>
 
-<mat-menu #nestedMenu="matMenu" [xPosition]="'before'">
+<mat-menu #nestedMenu="matMenu" xPosition="after" class="nestedMenu">
     <ng-template matMenuContent let-links="links">
         <button mat-menu-item *ngFor="let link of links"
+            class="app-sidenav-link"
             [attr.data-automation-id]="link.title | translate"
-            routerLinkActive="active"
+            routerLinkActive="app-sidenav-link--active"
             [routerLink]="link.href"
             [routerLinkActiveOptions]="{ exact: true }">
 
-            <mat-icon matListIcon class="adf-sidenav-menu-icon">{{link.icon}}</mat-icon>
+            <mat-icon matListIcon>{{link.icon}}</mat-icon>
             {{ link.title | translate }}
         </button>
     </ng-template>

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

@@ -1,9 +1,6 @@
-@mixin adf-app-layout-theme($theme) {
+@mixin app-layout-theme($theme) {
     $primary: map-get($theme, primary);
-    $background: map-get($theme, background);
-    $foreground: map-get($theme, foreground);
     $minimumAppWidth: 320px;
-    $toolbarHeight: 64px;
 
     @media screen and ($mat-xsmall) {
         app-search-bar {
@@ -17,80 +14,32 @@
         }
     }
 
-    .adf-app-layout-toolbar {
-        z-index: 998;
-        position: relative;
-        overflow: visible !important;
-    }
-
-    .adf-app-layout {
+    .app-layout {
         display: flex;
         flex: 1;
         min-width: $minimumAppWidth;
         height: 100%;
 
-        .adf-nav-container {
-            display: block;
-            min-width: $minimumAppWidth;
-            height: 100%;
+        .app-sidenav-link--active {
+            color: mat-color($primary);
         }
 
-        .adf-sidenav-linklist {
-            height: 100%;
-            overflow: auto;
-            padding-bottom: 8px;
-            box-sizing: border-box;
-        }
-
-        .adf-sidenav-link {
-            &.adf-active {
-                color: mat-color($primary);
-            }
-
-            .adf-sidenav-menu-icon {
-                margin-right: 20px;
-                font-size: 14px;
-            }
-
-            .adf-sidenav-menu-label {
+        .app-sidenav-link {
+            .mat-list-text {
                 font-size: 14px;
                 white-space: nowrap;
                 min-width: 120px;
+                padding: 0 10px;
             }
         }
 
-        .mat-nav-list .mat-list-item.adf-sidenav-link {
+        .mat-nav-list .mat-list-item.app-sidenav-link {
             height: 40px;
         }
 
-        &-user-profile {
-            margin-right: 10px;
-        }
-
         &-menu-spacer {
             flex: 1 1 auto;
         }
-
-        &-toolbar {
-            height: $toolbarHeight;
-            line-height: $toolbarHeight;
-            overflow: hidden;
-
-            mat-toolbar-row {
-                height: $toolbarHeight;
-                align-items: stretch;
-                justify-content: space-between;
-            }
-
-            .adf-toolbar-link {
-                min-width: 0;
-                line-height: $toolbarHeight;
-
-                &.adf-active {
-                    background-color: rgba(0, 0, 0, 0.12);
-                }
-            }
-        }
     }
 
     @media screen and ($mat-small) {
@@ -98,7 +47,7 @@
             display: none;
         }
 
-        .adf-menu {
+        .app-menu {
             padding-top: 0;
         }
     }
@@ -113,4 +62,8 @@
             flex: auto;
         }
     }
+
+    [dir='rtl'] .app-sidenav-link__expand-button {
+        transform: rotateY(180deg);
+    }
 }

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

@@ -15,20 +15,22 @@
  * limitations under the License.
  */
 
-import { Component, ViewEncapsulation, OnInit } from '@angular/core';
+import { Component, ViewEncapsulation, OnInit, OnDestroy } from '@angular/core';
 import { UserPreferencesService, AppConfigService, AlfrescoApiService, UserPreferenceValues } from '@alfresco/adf-core';
 import { HeaderDataService } from '../header-data/header-data.service';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
     templateUrl: 'app-layout.component.html',
     styleUrls: ['app-layout.component.scss'],
     host: {
-        'class': 'adf-app-layout'
+        'class': 'app-layout'
     },
     encapsulation: ViewEncapsulation.None
 })
-
-export class AppLayoutComponent implements OnInit {
+export class AppLayoutComponent implements OnInit, OnDestroy {
+    private onDestroy$ = new Subject<boolean>();
 
     links: Array<any> = [
         { href: '/home', icon: 'home', title: 'APP_LAYOUT.HOME' },
@@ -46,12 +48,15 @@ export class AppLayoutComponent implements OnInit {
         { href: '/node-selector', icon: 'attachment', title: 'APP_LAYOUT.NODE-SELECTOR' },
         { href: '/sites', icon: 'format_list_bulleted', title: 'APP_LAYOUT.SITES' },
         { href: '/task-list', icon: 'assignment', title: 'APP_LAYOUT.TASK_LIST' },
-        { href: '/cloud', icon: 'cloud', title: 'APP_LAYOUT.PROCESS_CLOUD', children: [
-            { href: '/cloud/', icon: 'cloud', title: 'APP_LAYOUT.HOME' },
-            { href: '/cloud/community', icon: 'cloud', title: 'APP_LAYOUT.COMMUNITY' },
-            { href: '/form-cloud', icon: 'poll', title: 'APP_LAYOUT.FORM' },
-            { href: '/cloud/people-group-cloud', icon: 'group', title: 'APP_LAYOUT.PEOPLE_GROUPS_CLOUD' }
-        ]},
+        {
+            href: '/cloud', icon: 'cloud', title: 'APP_LAYOUT.PROCESS_CLOUD', children: [
+                { href: '/cloud/', icon: 'cloud', title: 'APP_LAYOUT.HOME' },
+                { href: '/cloud/community', icon: 'cloud', title: 'APP_LAYOUT.COMMUNITY' },
+                { href: '/form-cloud', icon: 'poll', title: 'APP_LAYOUT.FORM' },
+                { href: '/cloud/people-group-cloud', icon: 'group', title: 'APP_LAYOUT.PEOPLE_GROUPS_CLOUD' },
+                { href: '/cloud/task-header-cloud', icon: 'cloud', title: 'APP_LAYOUT.TASK_HEADER_CLOUD.COMPONENT_NAME' }
+            ]
+        },
         { href: '/activiti', icon: 'device_hub', title: 'APP_LAYOUT.PROCESS_SERVICES', children: [
             { href: '/activiti', icon: 'vpn_key', title: 'APP_LAYOUT.APP' },
             { href: '/process-list', icon: 'assignment', title: 'APP_LAYOUT.PROCESS_LIST' },
@@ -72,6 +77,7 @@ export class AppLayoutComponent implements OnInit {
         { href: '/webscript', icon: 'extension', title: 'APP_LAYOUT.WEBSCRIPT' },
         { href: '/tag', icon: 'local_offer', title: 'APP_LAYOUT.TAG' },
         { href: '/social', icon: 'thumb_up', title: 'APP_LAYOUT.SOCIAL' },
+        { href: '/pipes', icon: 'layers', title: 'APP_LAYOUT.PIPES' },
         { href: '/settings-layout', icon: 'settings', title: 'APP_LAYOUT.SETTINGS' },
         { href: '/config-editor', icon: 'code', title: 'APP_LAYOUT.CONFIG-EDITOR' },
         { href: '/extendedSearch', icon: 'search', title: 'APP_LAYOUT.SEARCH' },
@@ -107,31 +113,52 @@ export class AppLayoutComponent implements OnInit {
             this.expandedSidenav = expand;
         }
 
-        this.headerService.hideMenu.subscribe((show) => this.showMenu = show);
-        this.headerService.color.subscribe((color) => this.color = color);
-        this.headerService.title.subscribe((title) => this.title = title);
-        this.headerService.logo.subscribe((path) => this.logo = path);
-        this.headerService.redirectUrl.subscribe((redirectUrl) => this.redirectUrl = redirectUrl);
-        this.headerService.tooltip.subscribe((tooltip) => this.tooltip = tooltip);
-        this.headerService.position.subscribe((position) => this.position = position);
-        this.headerService.hideSidenav.subscribe((hideSidenav) => this.hideSidenav = hideSidenav);
+        this.headerService.hideMenu
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(show => this.showMenu = show);
 
-        this.userPreferencesService.select('textOrientation').subscribe((textOrientation) => {
-            this.direction = textOrientation;
-        });
+        this.headerService.color
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(color => this.color = color);
+
+        this.headerService.title
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(title => this.title = title);
+
+        this.headerService.logo
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(path => this.logo = path);
+
+        this.headerService.redirectUrl
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(redirectUrl => this.redirectUrl = redirectUrl);
+
+        this.headerService.tooltip
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(tooltip => this.tooltip = tooltip);
+
+        this.headerService.position
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(position => this.position = position);
+
+        this.headerService.hideSidenav
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(hideSidenav => this.hideSidenav = hideSidenav);
+    }
+
+    ngOnDestroy() {
+        this.onDestroy$.next(true);
+        this.onDestroy$.complete();
     }
 
     constructor(
         private userPreferences: UserPreferencesService,
         private config: AppConfigService,
         private alfrescoApiService: AlfrescoApiService,
-        private userPreferencesService: UserPreferencesService,
         private headerService: HeaderDataService) {
         if (this.alfrescoApiService.getInstance().isOauthConfiguration()) {
             this.enableRedirect = false;
         }
-
-        this.userPreferencesService.set('textOrientation', this.direction);
     }
 
     setState(state) {

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

@@ -1,8 +1,8 @@
 <div class="main-content">
 
     <mat-tab-group>
-        <mat-tab label="Form">
-            <div class="adf-form-container">
+        <mat-tab label="Form" class="form-cloud-render">
+            <div class="app-form-container">
                 <adf-cloud-form
                     [showRefreshButton]="false"
                     [form]="form"
@@ -11,29 +11,29 @@
                 </adf-cloud-form>
             </div>
 
-            <div class="adf-console" #console>
+            <div class="app-console" #console>
                 <h3>Error log:</h3>
                 <p *ngFor="let error of errorFields">Error {{ error.name }} {{error.validationSummary.message |
                     translate}}</p>
             </div>
         </mat-tab>
-        <mat-tab label="Editor">
+        <mat-tab label="Editor" class="form-cloud-editor">
             <ngx-monaco-editor
                 id="adf-form-config-editor"
-                class="adf-form-config-editor"
+                class="app-form-config-editor"
                 [options]="editorOptions"
                 [(ngModel)]="formConfig"
                 (onInit)="onInitFormEditor($event)">
             </ngx-monaco-editor>
-            <div class="adf-form-editor-buttons">
-                <button mat-raised-button id="adf-form-config-save" (click)="onSaveFormConfig()" color="primary">Save
+            <div class="app-form-editor-buttons">
+                <button mat-raised-button id="app-form-config-save" (click)="onSaveFormConfig()" color="primary">Save
                     form config
                 </button>
-                <button mat-raised-button id="adf-form-config-clear" (click)="onClearFormConfig()" color="primary">Clear
+                <button mat-raised-button id="app-form-config-clear" (click)="onClearFormConfig()" color="primary">Clear
                     form config
                 </button>
             </div>
-            <div class="adf-upload-config-button">
+            <div class="app-upload-config-button">
                 <a mat-raised-button color="primary" >
                     <mat-icon>file_upload</mat-icon>
                     <label for="upload-config-file">Upload JSON File</label>

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

@@ -1,17 +1,17 @@
-.adf-form-container {
+.app-form-container {
     padding: 10px;
 }
 
-.adf-main-content {
+.app-main-content {
     padding: 0 15px;
 }
 
-.adf-card-view {
+.app-card-view {
     width: 30%;
     display: inline-block;
 }
 
-.adf-console {
+.app-console {
     width: 60%;
     display: inline-block;
     vertical-align: top;
@@ -31,16 +31,16 @@
     }
 }
 
-.adf-form-config-editor {
+.app-form-config-editor {
     height: 500px !important;
 }
 
-.adf-form-editor-buttons {
+.app-form-editor-buttons {
     display: flex;
     justify-content: space-evenly;
 }
 
-.adf-upload-config-button {
+.app-upload-config-button {
     display: flex;
     justify-content: center;
 

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

@@ -16,10 +16,9 @@
  */
 
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { FormFieldModel, NotificationService, FormRenderingService } from '@alfresco/adf-core';
-import { FormCloud, FormCloudService, UploadCloudWidgetComponent } from '@alfresco/adf-process-services-cloud';
+import { FormFieldModel, NotificationService, CoreAutomationService, FormModel } from '@alfresco/adf-core';
+import { FormCloudService } from '@alfresco/adf-process-services-cloud';
 import { Subscription } from 'rxjs';
-import { formDefinition } from './demo-form';
 
 @Component({
     templateUrl: 'cloud-form-demo.component.html',
@@ -27,7 +26,7 @@ import { formDefinition } from './demo-form';
 })
 export class FormCloudDemoComponent implements OnInit, OnDestroy {
 
-    form: FormCloud;
+    form: FormModel;
     errorFields: FormFieldModel[] = [];
     formConfig: string;
     editor: any;
@@ -44,9 +43,8 @@ export class FormCloudDemoComponent implements OnInit, OnDestroy {
 
     constructor(
         private notificationService: NotificationService,
-        private formRenderingService: FormRenderingService,
-        private formService: FormCloudService) {
-        this.formRenderingService.setComponentTypeResolver('upload', () => UploadCloudWidgetComponent, true);
+        private formService: FormCloudService,
+        private automationService: CoreAutomationService) {
     }
 
     logErrors(errorFields: FormFieldModel[]) {
@@ -54,7 +52,7 @@ export class FormCloudDemoComponent implements OnInit, OnDestroy {
     }
 
     ngOnInit() {
-        this.formConfig = formDefinition;
+        this.formConfig = JSON.stringify(this.automationService.forms.getFormCloudDefinition());
         this.parseForm();
     }
 

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

@@ -1,96 +0,0 @@
-/*!
- * @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.
- */
-
-export const formDefinition = `{
-    "formRepresentation": {
-      "id": "text-form",
-      "name": "test-start-form",
-      "version": 0,
-      "description": "",
-      "formDefinition": {
-        "tabs": [],
-        "fields": [
-          {
-            "id": "1511517333638",
-            "type": "container",
-            "fieldType": "ContainerRepresentation",
-            "name": "Label",
-            "tab": null,
-            "numberOfColumns": 2,
-            "fields": {
-              "1": [
-                {
-                  "fieldType": "FormFieldRepresentation",
-                  "id": "texttest",
-                  "name": "texttest",
-                  "type": "text",
-                  "value": null,
-                  "required": false,
-                  "placeholder": "text",
-                  "params": {
-                    "existingColspan": 2,
-                    "maxColspan": 6,
-                    "inputMaskReversed": true,
-                    "inputMask": "0#",
-                    "inputMaskPlaceholder": "(0-9)"
-                  }
-                }
-              ],
-              "2": [{
-                              "fieldType": "AttachFileFieldRepresentation",
-                              "id": "attachfiletest",
-                              "name": "attachfiletest",
-                              "type": "upload",
-                              "required": true,
-                              "colspan": 2,
-                              "placeholder": "attachfile",
-                              "params": {
-                                  "existingColspan": 2,
-                                  "maxColspan": 2,
-                                  "fileSource": {
-                                          "serviceId": "local-file",
-                                          "name": "Local File"
-                                  },
-                                  "multiple": true,
-                                  "link": false
-                          },
-                              "visibilityCondition": {
-                              }
-                          }]
-            }
-          }
-        ],
-        "outcomes": [],
-        "metadata": {
-          "property1": "value1",
-          "property2": "value2"
-        },
-        "variables": [
-          {
-            "name": "variable1",
-            "type": "string",
-            "value": "value1"
-          },
-          {
-            "name": "variable2",
-            "type": "string",
-            "value": "value2"
-          }
-        ]
-      }
-    }}
-  `;

demo-shell/src/app/components/blob-preview/bob-preview.component.html

@@ -1,5 +0,0 @@
-<adf-viewer 
-    [showViewer]="true" 
-    [blobFile]="content" 
-    [displayName]="name">
-</adf-viewer>

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

@@ -8,7 +8,7 @@
     <h2>1. Standalone (fixed size)</h2>
     <small>Component is used in the fixed-width layout</small>
 
-    <div class="adf-breadcrumb-container-restricted">
+    <div class="app-breadcrumb-container-restricted">
         <adf-breadcrumb root="APP.PERSONAL-FILES" [target]="documentList" [folderNode]="documentList.folderNode">
         </adf-breadcrumb>
     </div>
@@ -57,7 +57,7 @@
         Buttons do nothing and are present for layout purposes.
     </small>
 
-    <adf-toolbar class="adf-full-content-toolbar">
+    <adf-toolbar class="app-full-content-toolbar">
         <adf-toolbar-title fxFlex="0 1 auto">
             <adf-breadcrumb root="APP.PERSONAL-FILES" [target]="documentList" [folderNode]="documentList.folderNode">
             </adf-breadcrumb>
@@ -79,11 +79,11 @@
     <h2>6. Dropdown Breadcrumb</h2>
 
     <adf-dropdown-breadcrumb fxHide fxShow.lt-sm="true"
-                             class="adf-files-breadcrumb"
+                             class="app-files-breadcrumb"
                              [target]="documentList">
     </adf-dropdown-breadcrumb>
 
-    <div class="adf-content">
+    <div class="app-content">
         <adf-document-list #documentList currentFolderId="-my-">
         </adf-document-list>
     </div>

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

@@ -1,20 +1,13 @@
-.adf-breadcrumb-container-restricted {
+.app-breadcrumb-container-restricted {
     width: 800px;
     max-width: 800px;
     border: 1px solid lightgray;
 }
 
-.adf-content {
+.app-content {
     margin: 10px 0;
 }
 
-.adf-full-content-toolbar {
-    .adf-toolbar-title {
-        display: flex;
-        width: 100%;
-
-        .adf-breadcrumb {
-            width: 0;
-        }
-    }
+.app-full-content-toolbar .app-toolbar-title .app-breadcrumb {
+    width: 0;
 }

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

@@ -1,27 +1,43 @@
-<div class="adf-main-content">
+<div class="app-main-content">
     <h1>CardView Component</h1>
 
-    <mat-card class="adf-card-view">
+    <mat-card class="app-card-view">
         <adf-card-view
             [properties]="properties"
-            [editable]="true">
+            [editable]="isEditable"
+            [displayClearAction]="showClearDateAction"
+            [displayNoneOption]="showNoneOption">
         </adf-card-view>
     </mat-card>
 
-    <div class="adf-console" #console>
+    <div class="app-console" #console>
         <h3>Changes log:</h3>
         <p *ngFor="let log of logs">{{ log }}</p>
     </div>
 
 </div>
 
-<p class="adf-toggle">
+<p class="app-toggle">
     <mat-slide-toggle
-        id="adf-toggle-editable"
+        id="app-toggle-editable"
         [color]="'primary'"
         (change)="toggleEditable()"
         [checked]="isEditable">
         Editable
+    </mat-slide-toggle><br>
+    <mat-slide-toggle
+        id="app-toggle-clear-date"
+        [color]="'primary'"
+        (change)="toggleClearDate()"
+        [checked]="showClearDateAction">
+        Show clear date icon
+    </mat-slide-toggle><br>
+    <mat-slide-toggle
+        id="app-toggle-none-option"
+        [color]="'primary'"
+        (change)="toggleNoneOption()"
+        [checked]="showNoneOption">
+        Show none option
     </mat-slide-toggle>
 </p>
 

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

@@ -1,13 +1,13 @@
-.adf-main-content {
+.app-main-content {
     padding: 0 15px;
 }
 
-.adf-card-view {
+.app-card-view {
     width: 30%;
     display: inline-block;
 }
 
-.adf-console {
+.app-console {
     width: 60%;
     display: inline-block;
     vertical-align: top;

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
+import { Component, OnInit, ElementRef, ViewChild, OnDestroy } from '@angular/core';
 import {
     CardViewTextItemModel,
     CardViewDateItemModel,
@@ -27,23 +27,31 @@ import {
     CardViewSelectItemModel,
     CardViewUpdateService,
     CardViewMapItemModel,
-    UpdateNotification
+    UpdateNotification,
+    DecimalNumberPipe,
+    CardViewArrayItemModel
 } from '@alfresco/adf-core';
-import { of } from 'rxjs';
+import { of, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
     templateUrl: './card-view.component.html',
     styleUrls: ['./card-view.component.scss']
 })
-export class CardViewComponent implements OnInit {
+export class CardViewComponent implements OnInit, OnDestroy {
 
     @ViewChild('console') console: ElementRef;
 
     isEditable = true;
     properties: any;
     logs: string[];
+    showClearDateAction = false;
+    showNoneOption = false;
 
-    constructor(private cardViewUpdateService: CardViewUpdateService) {
+    private onDestroy$ = new Subject<boolean>();
+
+    constructor(private cardViewUpdateService: CardViewUpdateService,
+                private decimalNumberPipe: DecimalNumberPipe) {
         this.logs = [];
         this.createCard();
     }
@@ -53,7 +61,14 @@ export class CardViewComponent implements OnInit {
     }
 
     ngOnInit() {
-        this.cardViewUpdateService.itemUpdated$.subscribe(this.onItemChange.bind(this));
+        this.cardViewUpdateService.itemUpdated$
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(this.onItemChange.bind(this));
+    }
+
+    ngOnDestroy() {
+        this.onDestroy$.next(true);
+        this.onDestroy$.complete();
     }
 
     createCard() {
@@ -63,8 +78,43 @@ export class CardViewComponent implements OnInit {
                 value: 'Spock',
                 key: 'name',
                 default: 'default bar',
+                editable: this.isEditable
+            }),
+            new CardViewTextItemModel({
+                label: 'CardView Text Item - Protected value',
+                value: 'Spock',
+                key: 'name',
+                default: 'default bar',
                 multiline: false,
                 icon: 'icon',
+                editable: false
+            }),
+            new CardViewTextItemModel({
+                label: 'CardView Text Item - Multiline',
+                value: 'Spock',
+                key: 'name',
+                default: 'default bar',
+                multiline: true,
+                icon: 'icon',
+                editable: this.isEditable
+            }),
+            new CardViewTextItemModel({
+                label: 'CardView Text Item - Default Value',
+                value: '',
+                key: 'name',
+                default: 'default bar',
+                multiline: false,
+                icon: 'icon',
+                editable: this.isEditable
+            }),
+            new CardViewTextItemModel({
+                label: 'CardView Text Item - Multivalue (chips)',
+                value: [1, 2, 3],
+                key: 'name',
+                default: 'default bar',
+                multiline: true,
+                multivalued: true,
+                icon: 'icon',
                 editable: this.isEditable
             }),
             new CardViewDateItemModel({
@@ -72,7 +122,7 @@ export class CardViewComponent implements OnInit {
                 value: new Date(1983, 11, 24, 10, 0, 30),
                 key: 'date',
                 default: new Date(1983, 11, 24, 10, 0, 30),
-                format: 'DD.MM.YYYY',
+                format: 'shortDate',
                 editable: this.isEditable
             }),
             new CardViewDatetimeItemModel({
@@ -80,7 +130,7 @@ export class CardViewComponent implements OnInit {
                 value: new Date(1983, 11, 24, 10, 0, 0),
                 key: 'datetime',
                 default: new Date(1983, 11, 24, 10, 0, 0),
-                format: 'DD.MM.YYYY',
+                format: 'short',
                 editable: this.isEditable
             }),
             new CardViewBoolItemModel({
@@ -90,6 +140,13 @@ export class CardViewComponent implements OnInit {
                 default: false,
                 editable: this.isEditable
             }),
+            new CardViewBoolItemModel({
+                label: 'Agree to all terms and conditions',
+                value: true,
+                key: 'boolean',
+                default: false,
+                editable: this.isEditable
+            }),
             new CardViewIntItemModel({
                 label: 'CardView Int Item',
                 value: 213,
@@ -102,13 +159,20 @@ export class CardViewComponent implements OnInit {
                 value: 9.9,
                 key: 'float',
                 default: 0.0,
+                editable: this.isEditable,
+                pipes: [{ pipe: this.decimalNumberPipe }]
+            }),
+            new CardViewKeyValuePairsItemModel({
+                label: 'CardView Key-Value Pairs Item',
+                value: [{ name: 'hey', value: 'you' }, { name: 'hey', value: 'you' }],
+                key: 'key-value-pairs',
                 editable: this.isEditable
             }),
             new CardViewKeyValuePairsItemModel({
                 label: 'CardView Key-Value Pairs Item',
-                value: [],
+                value: [{ name: 'hey', value: 'you' }, { name: 'hey', value: 'you' }],
                 key: 'key-value-pairs',
-                editable: this.isEditable
+                editable: false
             }),
             new CardViewSelectItemModel({
                 label: 'CardView Select Item',
@@ -130,9 +194,24 @@ export class CardViewComponent implements OnInit {
                 default: 'click here',
                 editable: this.isEditable,
                 clickable: true,
+                icon: 'close',
                 clickCallBack: () => {
                     this.respondToCardClick();
                 }
+            }),
+            new CardViewArrayItemModel({
+                label: 'CardView Array of items',
+                value: of([
+                    { icon: 'directions_bike', value: 'Zlatan' },
+                    { icon: 'directions_bike', value: 'Lionel Messi' },
+                    { value: 'Mohamed', directions_bike: 'save' },
+                    { value: 'Ronaldo' }
+                ]),
+                key: 'array',
+                icon: 'edit',
+                default: 'Empty',
+                noOfItemsToDisplay: 2,
+                editable: this.isEditable
             })
         ];
     }
@@ -153,6 +232,14 @@ export class CardViewComponent implements OnInit {
         this.createCard();
     }
 
+    toggleClearDate() {
+        this.showClearDateAction = !this.showClearDateAction;
+    }
+
+    toggleNoneOption() {
+        this.showNoneOption = !this.showNoneOption;
+    }
+
     reset() {
         this.isEditable = true;
         this.createCard();

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

@@ -1,8 +1,8 @@
 <adf-toolbar>
   <div fxLayout="column" fxLayoutAlign="center">
     <div fxLayout="row">
-      <div class="adf-app-crumb">{{appName + ' >'}} </div>
-      <div class="adf-filter-crumb"> {{filterName | translate}}</div>
+      <div class="app-crumb">{{appName + ' >'}} </div>
+      <div class="app-filter-crumb"> {{filterName | translate}}</div>
     </div>
   </div>
 </adf-toolbar>

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

@@ -1,8 +1,8 @@
-.adf-app-crumb {
+.app-app-crumb {
   opacity: 0.5;
 }
 
-.adf-filter-crumb {
+.app-filter-crumb {
   opacity: 0.8;
   margin-left: 5px;
 }

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

@@ -19,26 +19,24 @@ import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 @Component({
-  selector: 'app-cloud-breadcrumbs',
-  templateUrl: './cloud-breadcrumb-component.html',
-  styleUrls: ['cloud-breadcrumb-component.scss']
+    selector: 'app-cloud-breadcrumbs',
+    templateUrl: './cloud-breadcrumb-component.html',
+    styleUrls: ['cloud-breadcrumb-component.scss']
 })
 export class CloudBreadcrumbsComponent implements OnInit {
+    appName: string;
+    filterName: string;
 
-  appName: string;
-  filterName: string;
+    constructor(private route: ActivatedRoute) {}
 
-  constructor(private route: ActivatedRoute) { }
-
-  ngOnInit() {
-    this.route.parent.params.subscribe((
-      params) => {
-      this.appName = params.appName;
-    });
-    this.route.queryParams.subscribe((params) => {
-      if (params.filterName) {
-        this.filterName = params.filterName;
-      }
-    });
-  }
+    ngOnInit() {
+        this.route.parent.params.subscribe(params => {
+            this.appName = params.appName;
+        });
+        this.route.queryParams.subscribe(params => {
+            if (params.filterName) {
+                this.filterName = params.filterName;
+            }
+        });
+    }
 }

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

@@ -1,3 +1,3 @@
-adf-cloud-task-filters .adf-filters__entry, adf-cloud-process-filters .adf-filters__entry {
+app-cloud-task-filters .app-filters__entry, app-cloud-process-filters .app-filters__entry {
   padding-left: 0 !important;
 }

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

@@ -46,8 +46,9 @@ export class CloudFiltersDemoComponent implements OnInit {
     ) {}
 
     ngOnInit() {
-        this.currentTaskFilter$ = this.cloudLayoutService.getCurrentTaskFilterParam();
-        this.currentProcessFilter$ = this.cloudLayoutService.getCurrentProcessFilterParam();
+        this.currentTaskFilter$ = this.cloudLayoutService.taskFilter$;
+        this.currentProcessFilter$ = this.cloudLayoutService.processFilter$;
+
         let root = '';
         if (this.route.snapshot && this.route.snapshot.firstChild) {
             root = this.route.snapshot.firstChild.url[0].path;
@@ -62,15 +63,11 @@ export class CloudFiltersDemoComponent implements OnInit {
     }
 
     onTaskFilterSelected(filter) {
-        this.cloudLayoutService.setCurrentTaskFilterParam({id: filter.id});
-        const currentFilter = Object.assign({}, filter);
-        this.router.navigate([`/cloud/${this.appName}/tasks/`], { queryParams: currentFilter });
+        this.router.navigate([`/cloud/${this.appName}/tasks/`], { queryParams: filter });
     }
 
     onProcessFilterSelected(filter) {
-        this.cloudLayoutService.setCurrentProcessFilterParam({id: filter.id});
-        const currentFilter = Object.assign({}, filter);
-        this.router.navigate([`/cloud/${this.appName}/processes/`], { queryParams: currentFilter });
+        this.router.navigate([`/cloud/${this.appName}/processes/`], { queryParams: filter });
     }
 
     onTaskFilterOpen(): boolean {

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

@@ -1,4 +1,4 @@
-<mat-tab-group fxFill class="adf-cloud-layout-tab-body">
+<mat-tab-group fxFill class="app-cloud-layout-tab-body">
   <mat-tab label="{{'PS_CLOUD_TAB.APPS_TAB' | translate}}">
     <div fxFill fxLayout>
       <adf-sidenav-layout fxFlex [sidenavMin]="70" [sidenavMax]="270" [stepOver]="780">

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

@@ -1,7 +1,7 @@
-.adf-cloud-layout-overflow {
+.app-cloud-layout-overflow {
   overflow: auto;
 }
 
-.adf-cloud-layout-tab-body .mat-tab-body-wrapper {
+.app-cloud-layout-tab-body .mat-tab-body-wrapper {
   height: 100%;
 }

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

@@ -1,24 +0,0 @@
-<div fxFlex fxLayout="column" class="adf-settings-container">
-    <mat-slide-toggle [color]="'primary'" [checked]="multiselect" (change)="toggleMultiselect()" data-automation-id="multiSelection">
-        {{ 'SETTINGS_CLOUD.MULTISELECTION' | translate }}
-    </mat-slide-toggle>
-    <mat-slide-toggle [color]="'primary'" [checked]="testingMode" (change)="toggleTestingMode()" data-automation-id="testingMode">
-        {{ 'SETTINGS_CLOUD.TESTING_MODE' | translate }}
-    </mat-slide-toggle>
-    <mat-slide-toggle [color]="'primary'" [checked]="taskDetailsRedirection" (change)="toggleTaskDetailsRedirection()" data-automation-id="taskDetailsRedirection">
-        {{ 'SETTINGS_CLOUD.TASK_DETAILS_REDIRECTION' | translate }}
-    </mat-slide-toggle>
-    <mat-slide-toggle [color]="'primary'" [checked]="processDetailsRedirection" (change)="toggleProcessDetailsRedirection()" data-automation-id="processDetailsRedirection">
-        {{ 'SETTINGS_CLOUD.PROCESS_DETAILS_REDIRECTION' | translate }}
-    </mat-slide-toggle>
-    <mat-form-field data-automation-id="selectionMode">
-        <mat-label>
-            {{ 'SETTINGS_CLOUD.SELECTION_MODE' | translate }}
-        </mat-label>
-        <mat-select [(ngModel)]="selectionMode" (selectionChange)="onSelectionModeChange()">
-            <mat-option *ngFor="let option of selectionModeOptions" [value]="option.value">
-                {{ option.title }}
-            </mat-option>
-        </mat-select>
-    </mat-form-field>
-</div>

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

@@ -1,7 +0,0 @@
-.adf-settings-container {
-    padding: 20px 30px;
-}
-
-.adf-settings-container mat-form-field {
-    max-width: 200px;
-}

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

@@ -15,32 +15,24 @@
  * limitations under the License.
  */
 
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { Subscription } from 'rxjs';
 import { Params } from '@angular/router/src/shared';
 
 @Component({
     selector: 'app-cloud-viewer',
     templateUrl: './cloud-viewer.component.html'
 })
-export class CloudViewerComponent implements OnInit, OnDestroy {
+export class CloudViewerComponent implements OnInit {
 
     nodeId: string;
 
-    private sub: Subscription;
-
     constructor(private route: ActivatedRoute) {
     }
 
     ngOnInit() {
-        this.sub = this.route.params.subscribe((params: Params) => {
+        this.route.params.subscribe((params: Params) => {
             this.nodeId = params['nodeId'];
         });
     }
-
-    ngOnDestroy() {
-        this.sub.unsubscribe();
-    }
-
 }

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

@@ -1,4 +1,4 @@
-<mat-tab-group fxFill class="adf-cloud-layout-tab-body">
+<mat-tab-group fxFill class="app-cloud-layout-tab-body">
     <mat-tab label="{{'PS_CLOUD_TAB.APPS_TAB' | translate}}">
       <div fxFill fxLayout>
         <adf-sidenav-layout fxFlex [sidenavMin]="70" [sidenavMax]="270" [stepOver]="780">

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

@@ -21,20 +21,18 @@ import { CloudLayoutService } from '../services/cloud-layout.service';
 
 @Component({
     templateUrl: './community-cloud.component.html',
-    styles: [`.adf-cloud-layout-overflow {
+    styles: [`.app-cloud-layout-overflow {
         overflow: auto;
       }
 
-      .adf-cloud-layout-tab-body .mat-tab-body-wrapper {
+      .app-cloud-layout-tab-body .mat-tab-body-wrapper {
         height: 100% !important;
       }
       `],
-      encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None
 })
 export class CommunityCloudComponent  {
 
-    appName: string = '';
-
     constructor(
         private router: Router,
         private route: ActivatedRoute,

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

@@ -7,7 +7,6 @@
       </mat-expansion-panel-header>
       <adf-cloud-task-filters
           *ngIf="expandTaskFilter"
-          [appName]="appName"
           [showIcons]="true"
           [filterParam]="currentTaskFilter$ | async"
           (filterClick)="onTaskFilterSelected($event)">
@@ -22,7 +21,6 @@
       </mat-expansion-panel-header>
       <adf-cloud-process-filters
           *ngIf="expandProcessFilter"
-          [appName]="appName"
           [showIcons]="true"
           [filterParam]="currentProcessFilter$ | async"
           (filterClick)="onProcessFilterSelected($event)">

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, ViewEncapsulation, Input, OnInit } from '@angular/core';
+import { Component, ViewEncapsulation, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import { Router, ActivatedRoute } from '@angular/router';
 import { CloudLayoutService } from '../services/cloud-layout.service';
@@ -26,9 +26,6 @@ import { CloudLayoutService } from '../services/cloud-layout.service';
 })
 export class CommunityCloudFiltersDemoComponent implements OnInit {
 
-    @Input()
-    appName: string = 'community';
-
     currentTaskFilter$: Observable<any>;
     currentProcessFilter$: Observable<any>;
 
@@ -45,8 +42,9 @@ export class CommunityCloudFiltersDemoComponent implements OnInit {
     ) {}
 
     ngOnInit() {
-        this.currentTaskFilter$ = this.cloudLayoutService.getCurrentTaskFilterParam();
-        this.currentProcessFilter$ = this.cloudLayoutService.getCurrentProcessFilterParam();
+        this.currentTaskFilter$ = this.cloudLayoutService.taskFilter$;
+        this.currentProcessFilter$ = this.cloudLayoutService.processFilter$;
+
         let root = '';
         if (this.route.snapshot && this.route.snapshot.firstChild) {
             root = this.route.snapshot.firstChild.url[0].path;

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

@@ -3,22 +3,20 @@
     <mat-icon>arrow_back</mat-icon> Go Back
 </button>
 
-<h4 data-automation-id="process-details-header">Simple page to show the process instance: {{ processInstanceId }} of the app: {{ appName }}</h4>
+<h4 data-automation-id="process-details-header">Simple page to show the process instance: {{ processInstanceId }}</h4>
 
-<div class="adf-process-cloud-container">
+<div class="app-process-cloud-container">
 
     <adf-cloud-task-list
         fxFlex
-        class="adf-cloud-layout-overflow"
-        [appName]="''"
+        class="app-cloud-layout-overflow"
         [processInstanceId]="processInstanceId"
         (rowClick)="onRowClick($event)"
         #taskCloud>
     </adf-cloud-task-list>
 
     <adf-cloud-process-header
-        class="adf-process-cloud-header"
-        [appName]="''"
+        class="app-process-cloud-header"
         [processInstanceId]="processInstanceId">
     </adf-cloud-process-header>
 </div>

demo-shell/src/app/components/cloud/community/community-process-details-cloud.component.scss

@@ -1,4 +1,4 @@
-.adf {
+.app {
     &-process-cloud-container {
         display: flex;
     }

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

@@ -25,16 +25,11 @@ import { ActivatedRoute, Router } from '@angular/router';
 export class CommunityProcessDetailsCloudDemoComponent {
 
     processInstanceId: string;
-    appName: string;
 
     constructor(private route: ActivatedRoute, private router: Router) {
         this.route.params.subscribe((params) => {
             this.processInstanceId = params.processInstanceId;
         });
-
-        this.route.parent.params.subscribe((params) => {
-            this.appName = params.appName;
-        });
     }
 
     onGoBack() {

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

@@ -1,7 +1,6 @@
 <div fxLayout="column" fxFill fxLayoutGap="2px">
     <adf-cloud-edit-process-filter
         [id]="filterId"
-        [appName]="'community'"
         [filterProperties]="processFilterProperties.filterProperties"
         [sortProperties]="processFilterProperties.sortProperties"
         [actions]="processFilterProperties.actions"
@@ -11,8 +10,7 @@
     <div fxLayout="column" fxFlex fxLayoutAlign="space-between" *ngIf="editedFilter">
         <adf-cloud-process-list #processCloud
             fxFlex
-            [appName]="''"
-            class="adf-cloud-layout-overflow"
+            class="app-cloud-layout-overflow"
             [initiator]="editedFilter.initiator"
             [processDefinitionId]="editedFilter.processDefinitionId"
             [processDefinitionKey]="editedFilter.processDefinitionKey"

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, ViewChild, OnInit } from '@angular/core';
+import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core';
 import {
     ProcessListCloudComponent,
     ProcessFilterCloudModel,
@@ -27,12 +27,14 @@ import {
 import { ActivatedRoute, Router } from '@angular/router';
 import { UserPreferencesService, AppConfigService } from '@alfresco/adf-core';
 import { CloudLayoutService } from '../services/cloud-layout.service';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { Pagination } from '@alfresco/js-api';
 
 @Component({
     templateUrl: './community-processes-cloud.component.html'
 })
-export class CommunityProcessesCloudDemoComponent implements OnInit {
-
+export class CommunityProcessesCloudDemoComponent implements OnInit, OnDestroy {
     public static ACTION_SAVE_AS = 'saveAs';
     static PROCESS_FILTER_PROPERTY_KEYS = 'adf-edit-process-filter';
 
@@ -42,9 +44,7 @@ export class CommunityProcessesCloudDemoComponent implements OnInit {
     @ViewChild('processFiltersCloud')
     processFiltersCloud: ProcessFiltersCloudComponent;
 
-    appName: string = '';
     isFilterLoaded: boolean;
-
     filterId: string = '';
     sortArray: any = [];
     selectedRow: any;
@@ -56,6 +56,8 @@ export class CommunityProcessesCloudDemoComponent implements OnInit {
 
     editedFilter: ProcessFilterCloudModel;
 
+    private onDestroy$ = new Subject<boolean>();
+
     constructor(
         private route: ActivatedRoute,
         private router: Router,
@@ -63,7 +65,10 @@ export class CommunityProcessesCloudDemoComponent implements OnInit {
         private userPreference: UserPreferencesService,
         private processFilterCloudService: ProcessFilterCloudService,
         private appConfig: AppConfigService) {
-        const properties = this.appConfig.get<Array<any>>(CommunityProcessesCloudDemoComponent.PROCESS_FILTER_PROPERTY_KEYS);
+        const properties = this.appConfig.get<Array<any>>(
+            CommunityProcessesCloudDemoComponent.PROCESS_FILTER_PROPERTY_KEYS
+        );
+
         if (properties) {
             this.processFilterProperties = properties;
         }
@@ -71,9 +76,6 @@ export class CommunityProcessesCloudDemoComponent implements OnInit {
 
     ngOnInit() {
         this.isFilterLoaded = false;
-        this.route.parent.params.subscribe((params) => {
-            this.appName = params.appName;
-        });
 
         this.route.queryParams.subscribe((params) => {
             if (Object.keys(params).length > 0) {
@@ -85,14 +87,23 @@ export class CommunityProcessesCloudDemoComponent implements OnInit {
             }
         });
 
-        this.cloudLayoutService.getCurrentSettings()
-            .subscribe((settings) => this.setCurrentSettings(settings));
+        this.cloudLayoutService
+            .settings$
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(settings => this.setCurrentSettings(settings));
+    }
+
+    ngOnDestroy() {
+        this.onDestroy$.next(true);
+        this.onDestroy$.complete();
     }
 
     loadDefaultFilters() {
-        this.processFilterCloudService.getProcessFilters('community').subscribe( (filters: ProcessFilterCloudModel[]) => {
-            this.onFilterChange(filters[0]);
-        });
+        this.processFilterCloudService
+            .getProcessFilters('community')
+            .subscribe((filters: ProcessFilterCloudModel[]) => {
+                this.onFilterChange(filters[0]);
+            });
     }
 
     setCurrentSettings(settings) {
@@ -103,7 +114,7 @@ export class CommunityProcessesCloudDemoComponent implements OnInit {
         }
     }
 
-    onChangePageSize(event) {
+    onChangePageSize(event: Pagination) {
         this.userPreference.paginationSize = event.maxItems;
     }
 
@@ -111,13 +122,18 @@ export class CommunityProcessesCloudDemoComponent implements OnInit {
         this.selectedRows = [];
     }
 
-    onRowClick(processInstanceId) {
+    onRowClick(processInstanceId: string) {
         this.router.navigate([`/cloud/community/process-details/${processInstanceId}`]);
     }
 
     onFilterChange(query: any) {
         this.editedFilter = Object.assign({}, query);
-        this.sortArray = [new ProcessListCloudSortingModel({ orderBy: this.editedFilter.sort, direction: this.editedFilter.order })];
+        this.sortArray = [
+            new ProcessListCloudSortingModel({
+                orderBy: this.editedFilter.sort,
+                direction: this.editedFilter.order
+            })
+        ];
     }
 
     onProcessFilterAction(filterAction: any) {

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

@@ -1,6 +1,5 @@
 <adf-cloud-start-process
     [name]="processName"
-    [appName]="''"
     (error)="openSnackMessage($event)"
     (success)="onStartProcessSuccess()"
     (cancel)="onCancelStartProcess()">

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

@@ -1,5 +1,4 @@
 <adf-cloud-start-task
-    [appName]="''"
     (error)="openSnackMessage($event)"
     (success)="onStartTaskSuccess()"
     (cancel)="onCancelStartTask()">

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

@@ -1,7 +1,6 @@
 <div fxLayout="column" fxFill fxLayoutGap="2px">
     <adf-cloud-edit-task-filter
         [id]="filterId"
-        [appName]="'community'"
         [filterProperties]="taskFilterProperties.filterProperties"
         [sortProperties]="taskFilterProperties.sortProperties"
         [actions]="taskFilterProperties.actions"
@@ -11,8 +10,7 @@
     <div fxLayout="column" fxFlex fxLayoutAlign="space-between" *ngIf="editedFilter">
         <adf-cloud-task-list #taskCloud
             fxFlex
-            [appName]="''"
-            class="adf-cloud-layout-overflow"
+            class="app-cloud-layout-overflow"
             [processDefinitionId]="editedFilter.processDefinitionId"
             [processInstanceId]="editedFilter.processInstanceId"
             [name]="editedFilter.taskName"

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

@@ -15,11 +15,14 @@
  * limitations under the License.
  */
 
-import { Component, ViewChild, OnInit } from '@angular/core';
+import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core';
 import { TaskListCloudComponent, TaskListCloudSortingModel, TaskFilterCloudModel, TaskFilterCloudService } from '@alfresco/adf-process-services-cloud';
 import { UserPreferencesService, AppConfigService } from '@alfresco/adf-core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { CloudLayoutService } from '../services/cloud-layout.service';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { Pagination } from '@alfresco/js-api';
 
 @Component({
     templateUrl: './community-task-cloud.component.html',
@@ -28,8 +31,7 @@ import { CloudLayoutService } from '../services/cloud-layout.service';
       }
       `]
 })
-export class CommunityTasksCloudDemoComponent implements OnInit {
-
+export class CommunityTasksCloudDemoComponent implements OnInit, OnDestroy {
     public static ACTION_SAVE_AS = 'saveAs';
     static TASK_FILTER_PROPERTY_KEYS = 'adf-edit-task-filter';
 
@@ -51,6 +53,8 @@ export class CommunityTasksCloudDemoComponent implements OnInit {
     selectionMode: string;
     taskDetailsRedirection: boolean;
 
+    private onDestroy$ = new Subject<boolean>();
+
     constructor(
         private cloudLayoutService: CloudLayoutService,
         private route: ActivatedRoute,
@@ -79,14 +83,23 @@ export class CommunityTasksCloudDemoComponent implements OnInit {
             }
         });
 
-        this.cloudLayoutService.getCurrentSettings()
-            .subscribe((settings) => this.setCurrentSettings(settings));
+        this.cloudLayoutService
+            .settings$
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(settings => this.setCurrentSettings(settings));
+    }
+
+    ngOnDestroy() {
+        this.onDestroy$.next(true);
+        this.onDestroy$.complete();
     }
 
     loadDefaultFilters() {
-        this.taskFilterCloudService.getTaskListFilters('community').subscribe( (filters: TaskFilterCloudModel[]) => {
-            this.onFilterChange(filters[0]);
-        });
+        this.taskFilterCloudService
+            .getTaskListFilters('community')
+            .subscribe((filters: TaskFilterCloudModel[]) => {
+                this.onFilterChange(filters[0]);
+            });
     }
 
     setCurrentSettings(settings) {
@@ -98,7 +111,7 @@ export class CommunityTasksCloudDemoComponent implements OnInit {
         }
     }
 
-    onChangePageSize(event) {
+    onChangePageSize(event: Pagination) {
         this.userPreference.paginationSize = event.maxItems;
     }
 
@@ -106,7 +119,7 @@ export class CommunityTasksCloudDemoComponent implements OnInit {
         this.selectedRows = [];
     }
 
-    onRowClick(taskId) {
+    onRowClick(taskId: string) {
         if (!this.multiselect && this.selectionMode !== 'multiple' && this.taskDetailsRedirection) {
             this.router.navigate([`/cloud/community/task-details/${taskId}`]);
         }

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

@@ -1,10 +1,9 @@
-<h4 data-automation-id="task-details-header">Simple page to show the taskId: {{ taskId }} of the app: {{ appName }}</h4>
+<h4 data-automation-id="task-details-header">Simple page to show the taskId: {{ taskId }}</h4>
 
 <div fxLayout="column" fxFill fxLayoutGap="2px">
     <div fxLayout="row" fxFill>
         <div fxLayout="column" fxFlex="80%">
             <adf-cloud-task-form
-                [appName]="''"
                 [taskId]="taskId"
                 (cancelClick)="goBack()"
                 (taskClaimed)="onClaimTask()"
@@ -14,7 +13,6 @@
             </adf-cloud-task-form>
         </div>
         <adf-cloud-task-header fxFlex
-            [appName]="''"
             [taskId]="taskId">
         </adf-cloud-task-header>
     </div>

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

@@ -1,11 +1,11 @@
 
-.adf {
+.app {
 
     &-task-detail-container {
         display: flex;
     }
 
-    &-task-tiitle {
+    &-task-title {
         margin-left:15px;
     }
 

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

@@ -26,7 +26,6 @@ import { NotificationService } from '@alfresco/adf-core';
 export class CommunityTaskDetailsCloudDemoComponent {
 
     taskId: string;
-    appName: string;
 
     constructor(
         private route: ActivatedRoute,
@@ -36,13 +35,10 @@ export class CommunityTaskDetailsCloudDemoComponent {
         this.route.params.subscribe((params) => {
             this.taskId = params.taskId;
         });
-        this.route.parent.params.subscribe((params) => {
-            this.appName = params.appName;
-        });
     }
 
     isTaskValid(): boolean {
-        return this.appName !== undefined && this.taskId !== undefined;
+        return this.taskId !== undefined;
     }
 
     goBack() {

demo-shell/src/app/components/cloud/community/community.module.ts

@@ -0,0 +1,97 @@
+/*!
+ * @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 { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import {
+    ProcessServicesCloudModule,
+    LocalPreferenceCloudService,
+    PROCESS_FILTERS_SERVICE_TOKEN,
+    TASK_FILTERS_SERVICE_TOKEN
+} from '@alfresco/adf-process-services-cloud';
+
+import { CommunityCloudComponent } from './community-cloud.component';
+import { CommunityTasksCloudDemoComponent } from './community-task-cloud.component';
+import { CommunityCloudFiltersDemoComponent } from './community-filters.component';
+import { CommunityProcessesCloudDemoComponent } from './community-processes-cloud.component';
+import { CommunityStartProcessCloudDemoComponent } from './community-start-process-cloud.component';
+import { CommunityStartTaskCloudDemoComponent } from './community-start-task-cloud.component';
+import { CommunityProcessDetailsCloudDemoComponent } from './community-process-details-cloud.component';
+import { CommunityTaskDetailsCloudDemoComponent } from './community-task-details-cloud.component';
+import { AppCloudSharedModule } from '../shared/cloud.shared.module';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: CommunityCloudComponent,
+        children: [
+            {
+                path: 'tasks',
+                component: CommunityTasksCloudDemoComponent
+            },
+            {
+                path: 'processes',
+                component: CommunityProcessesCloudDemoComponent
+            },
+            {
+                path: 'start-task',
+                component: CommunityStartTaskCloudDemoComponent
+            },
+            {
+                path: 'start-process',
+                component: CommunityStartProcessCloudDemoComponent
+            },
+            {
+                path: 'task-details/:taskId',
+                component: CommunityTaskDetailsCloudDemoComponent
+            },
+            {
+                path: 'process-details/:processInstanceId',
+                component: CommunityProcessDetailsCloudDemoComponent
+            }
+        ]
+    }
+];
+
+@NgModule({
+    imports: [
+        CommonModule,
+        CoreModule.forChild(),
+        ProcessServicesCloudModule,
+        RouterModule.forChild(routes),
+        AppCloudSharedModule,
+        FlexLayoutModule
+    ],
+    declarations: [
+        CommunityCloudComponent,
+        CommunityTasksCloudDemoComponent,
+        CommunityCloudFiltersDemoComponent,
+        CommunityProcessesCloudDemoComponent,
+        CommunityStartProcessCloudDemoComponent,
+        CommunityStartTaskCloudDemoComponent,
+        CommunityProcessDetailsCloudDemoComponent,
+        CommunityTaskDetailsCloudDemoComponent
+    ],
+    providers: [
+        { provide: PROCESS_FILTERS_SERVICE_TOKEN, useClass: LocalPreferenceCloudService },
+        { provide: TASK_FILTERS_SERVICE_TOKEN, useClass: LocalPreferenceCloudService }
+    ]
+})
+export class AppCommunityModule {}

demo-shell/src/app/components/cloud/directives/nested-menu-position.directive.ts

@@ -1,43 +0,0 @@
-/*!
- * @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 { Directive, HostListener, Input } from '@angular/core';
-
-@Directive({
-    selector: '[appNestedMenuPosition]'
-})
-export class NestedMenuPositionDirective {
-
-    @Input()
-    menuMinimized: string;
-
-    nestedMenuLeftPadding: string = '220px';
-
-    @HostListener('click', ['$event'])
-    onClick() {
-
-        const overlayContainer = (document.querySelector('.cdk-overlay-connected-position-bounding-box') as HTMLElement);
-        (document.querySelector('.cdk-overlay-pane') as HTMLElement).style.width = '100%';
-
-        if (!this.menuMinimized) {
-            setTimeout(() => {
-                overlayContainer.style.left = this.nestedMenuLeftPadding;
-            });
-        }
-    }
-
-}

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

@@ -1,4 +1,4 @@
-<mat-card class="adf-section">
+<mat-card class="app-section">
     <mat-card-title>
         {{ 'APP_LAYOUT.PEOPLE_CLOUD' | translate}}
     </mat-card-title>
@@ -6,56 +6,70 @@
     <mat-card-content>
         <br>
         <mat-radio-group (change)="onChangePeopleMode($event)">
-            <mat-radio-button checked="true" class="adf-people-single-mode" data-automation-id="adf-people-single-mode" value="{{ peopleSingleMode }}">{{
+            <mat-radio-button checked="true" class="app-people-single-mode" data-automation-id="app-people-single-mode" value="single">{{
                 'PEOPLE_GROUPS_CLOUD.SINGLE' | translate }}</mat-radio-button>
-            <mat-radio-button class="adf-people-multiple-mode" data-automation-id="adf-people-multiple-mode" value="{{ peopleMultipleMode }}">{{
+            <mat-radio-button class="app-people-multiple-mode" data-automation-id="app-people-multiple-mode" value="multiple">{{
                 'PEOPLE_GROUPS_CLOUD.MULTI' | translate }}</mat-radio-button>
         </mat-radio-group>
-        <div class="people-control-options">
+        <div class="app-people-control-options">
             <mat-radio-group (change)="onChangePeopleFilterMode($event)">
-                <mat-radio-button checked="true" class="adf-people-single-mode" value="appName">{{
+                <mat-radio-button checked="true" class="app-people-single-mode" value="appName">{{
                     'PEOPLE_GROUPS_CLOUD.APP_FILTER_MODE' | translate }}</mat-radio-button>
-                <mat-radio-button class="adf-people-multiple-mode" data-automation-id="adf-people-filter-role" value="role">{{
+                <mat-radio-button class="app-people-multiple-mode" data-automation-id="app-people-filter-role" value="role">{{
                     'PEOPLE_GROUPS_CLOUD.ROLE_FILTER_MODE' | translate }}</mat-radio-button>
             </mat-radio-group>
-            <mat-form-field *ngIf="!isPeopleAppNameSelected()" class="adf-preselect-value">
+            <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)" data-automation-id="adf-people-roles-input" />
+                <input matInput (input)="setPeopleRoles($event.target?.value)" data-automation-id="app-people-roles-input" />
             </mat-form-field>
-            <mat-form-field *ngIf="isPeopleAppNameSelected()" class="adf-preselect-value">
+            <mat-form-field *ngIf="isPeopleAppNameSelected()" class="app-preselect-value">
                 <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.APP_NAME' | translate }}</mat-label>
-                <input matInput (input)="setPeopleAppName($event)" data-automation-id="adf-people-app-input" />
+                <input matInput (input)="setPeopleAppName($event.target?.value)" data-automation-id="app-people-app-input" />
             </mat-form-field>
-            <mat-form-field class="adf-preselect-value-full">
-                <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.PRESELECTED_VALUE' | translate }}: {{ DEFAULT_PEOPLE_PLACEHOLDER }}</mat-label>
-                <input matInput (input)="setPeoplePreselectValue($event)"  data-automation-id="adf-people-preselect-input" />
+            <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" />
             </mat-form-field>
-            <mat-checkbox class="adf-preselect-value" (change)="onChangePeopleValidation($event)">{{
+            <mat-checkbox class="app-preselect-value" (change)="onChangePeopleValidation($event)">{{
                 'PEOPLE_GROUPS_CLOUD.PRESELECT_VALIDATION' | translate }}</mat-checkbox>
+            <mat-checkbox data-automation-id="app-people-readonly" value="{{ peopleReadonly }}" (change)="onChangePeopleReadonly($event)">{{
+                'PEOPLE_GROUPS_CLOUD.READONLY_MODE' | translate }}</mat-checkbox>
         </div>
         <div>
             <adf-cloud-people
                 [preSelectUsers]="preSelectUsers"
+                [readOnly]="peopleReadonly"
                 [validate]="peoplePreselectValidation"
                 [appName]="peopleAppName"
                 [roles]="peopleRoles"
-                [appName]="peopleAppName"
                 [title]="'ADF_TASK_LIST.START_TASK.FORM.LABEL.ASSIGNEE'"
-                [mode]="peopleMode"></adf-cloud-people>
+                [mode]="peopleMode"
+                (warning)="onUsersWarning($event)"></adf-cloud-people>
         </div>
 
-        <div class="adf-people-list" *ngIf="canShowPeopleList()">
+        <div class="app-people-list" *ngIf="peopleMode === 'multiple'">
+            <h4>{{ 'PEOPLE_GROUPS_CLOUD.ALL_PRESELECTED_USERS' | translate }}</h4>
             <mat-list role="list">
                 <mat-list-item *ngFor="let item of preSelectUsers" role="listitem">
                     <mat-icon mat-list-icon>person</mat-icon>
-                    {{ item?.firstName }} {{ item?.lastName }}
+                    {{item | fullName}}
                 </mat-list-item>
             </mat-list>
+
+            <div *ngIf="invalidUsers.length > 0">
+                <h4>{{ 'PEOPLE_GROUPS_CLOUD.INVALID_USERS' | translate }} <mat-icon>warning</mat-icon> </h4>
+                <mat-list role="list">
+                    <mat-list-item *ngFor="let invalidUser of invalidUsers" role="listitem">
+                        <mat-icon mat-list-icon>person</mat-icon>
+                        {{invalidUser | fullName}}
+                    </mat-list-item>
+                </mat-list>
+            </div>
         </div>
     </mat-card-content>
 </mat-card>
 
-<mat-card class="adf-section">
+<mat-card class="app-section">
     <mat-card-title>
         {{ 'APP_LAYOUT.GROUPS_CLOUD' | translate}}
     </mat-card-title>
@@ -63,43 +77,75 @@
     <mat-card-content>
         <br>
         <mat-radio-group (change)="onChangeGroupsMode($event)">
-            <mat-radio-button checked="true" class="adf-people-single-mode" data-automation-id="adf-group-single-mode" value="{{ groupSingleMode }}">{{
+            <mat-radio-button checked="true" class="app-people-single-mode" data-automation-id="app-group-single-mode" value="single">{{
                 'PEOPLE_GROUPS_CLOUD.SINGLE' | translate }}</mat-radio-button>
-            <mat-radio-button class="adf-people-multiple-mode" data-automation-id="adf-group-multiple-mode" value="{{ groupMultipleMode }}">{{
+            <mat-radio-button class="app-people-multiple-mode" data-automation-id="app-group-multiple-mode" value="multiple">{{
                 'PEOPLE_GROUPS_CLOUD.MULTI' | translate }}</mat-radio-button>
         </mat-radio-group>
-        <div class="groups-control-options">
+        <div class="app-groups-control-options">
             <mat-radio-group (change)="onChangeGroupsFilterMode($event)">
-                <mat-radio-button checked="true" class="adf-people-single-mode" value="appName">{{
+                <mat-radio-button checked="true" class="app-people-single-mode" value="appName">{{
                     'PEOPLE_GROUPS_CLOUD.APP_FILTER_MODE' | translate }}</mat-radio-button>
-                <mat-radio-button class="adf-people-multiple-mode" data-automation-id="adf-group-filter-role" value="role">{{
+                <mat-radio-button class="app-people-multiple-mode" data-automation-id="app-group-filter-role" value="role">{{
                     'PEOPLE_GROUPS_CLOUD.ROLE_FILTER_MODE' | translate }}</mat-radio-button>
             </mat-radio-group>
-            <mat-form-field *ngIf="!isGroupAppNameSelected()" class="adf-preselect-value">
+            <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)" data-automation-id="adf-group-roles-input"/>
+                <input matInput
+                    (input)="setGroupRoles($event.target?.value)"
+                    data-automation-id="app-group-roles-input"/>
             </mat-form-field>
-            <mat-form-field *ngIf="isGroupAppNameSelected()" class="adf-preselect-value">
+            <mat-form-field *ngIf="isGroupAppNameSelected()" class="app-preselect-value">
                 <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.APP_NAME' | translate }}</mat-label>
-                <input matInput (input)="setGroupAppName($event)" data-automation-id="adf-group-app-input"/>
+                <input matInput
+                    (input)="setGroupAppName($event.target?.value)"
+                    data-automation-id="app-group-app-input"/>
             </mat-form-field>
-            <mat-form-field class="adf-preselect-value-full">
+            <mat-form-field class="app-preselect-value-full">
                 <mat-label>Preselect: {{ DEFAULT_GROUP_PLACEHOLDER }}</mat-label>
-                <input matInput (input)="setGroupsPreselectValue($event)" data-automation-id="adf-group-preselect-input" />
+                <input matInput
+                    (input)="setGroupsPreselectValue($event.target?.value)"
+                    data-automation-id="app-group-preselect-input" />
             </mat-form-field>
+            <mat-checkbox class="app-preselect-value" (change)="onChangeGroupValidation($event)">
+                {{ 'PEOPLE_GROUPS_CLOUD.PRESELECT_VALIDATION' | translate }}
+            </mat-checkbox>
+            <mat-checkbox
+                data-automation-id="app-group-readonly"
+                value="{{ groupReadonly }}"
+                (change)="onChangeGroupReadonly($event)">
+                {{ 'PEOPLE_GROUPS_CLOUD.READONLY_MODE' | translate }}
+            </mat-checkbox>
         </div>
         <div>
-            <adf-cloud-group [mode]="groupMode" [roles]="groupRoles" [appName]="groupAppName" [preSelectGroups]="preSelectGroup"
-                (selectGroup)="onSelectGroup($event)" (removeGroup)="onRemoveGroup($event)"></adf-cloud-group>
+            <adf-cloud-group
+                [mode]="groupMode"
+                [readOnly]="groupReadonly"
+                [validate]="groupPreselectValidation"
+                [roles]="groupRoles"
+                [appName]="groupAppName"
+                [preSelectGroups]="preSelectGroup"
+                (warning)="onGroupsWarning($event)"></adf-cloud-group>
         </div>
 
-        <div class="adf-group-list" *ngIf="canShowGroupList()">
+        <div class="app-group-list" *ngIf="groupMode === 'multiple'">
+            <h4>{{ 'PEOPLE_GROUPS_CLOUD.ALL_PRESELECTED_GROUPS' | translate }}</h4>
             <mat-list role="list">
                 <mat-list-item *ngFor="let item of preSelectGroup" role="listitem">
                     <mat-icon mat-list-icon>group</mat-icon>
                     {{ item.name }}
                 </mat-list-item>
             </mat-list>
+
+            <div *ngIf="invalidGroups.length > 0">
+                <h4>{{ 'PEOPLE_GROUPS_CLOUD.INVALID_GROUPS' | translate }} <mat-icon>warning</mat-icon> </h4>
+                <mat-list role="list">
+                    <mat-list-item *ngFor="let invalidGroup of invalidGroups" role="listitem">
+                        <mat-icon mat-list-icon>group</mat-icon>
+                        {{invalidGroup?.name}}
+                    </mat-list-item>
+                </mat-list>
+            </div>
         </div>
     </mat-card-content>
 </mat-card>

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

@@ -1,4 +1,4 @@
-.adf {
+.app {
     &-section {
         mat-card-title {
             font-size:18px;
@@ -14,7 +14,7 @@
 
         mat-card-content {
 
-            .adf-preselect-value {
+            .app-preselect-value {
                 margin-right: 15px;
                 min-width: 25%;
 

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

@@ -16,8 +16,9 @@
  */
 
 import { Component, ViewEncapsulation } from '@angular/core';
-import { PeopleCloudComponent, GroupCloudComponent, GroupModel } from '@alfresco/adf-process-services-cloud';
+import { ComponentSelectionMode } from '@alfresco/adf-process-services-cloud';
 import { MatRadioChange, MatCheckboxChange } from '@angular/material';
+import { IdentityGroupModel, IdentityUserModel } from '@alfresco/adf-core';
 
 @Component({
     selector: 'app-people-groups-cloud',
@@ -31,73 +32,83 @@ export class PeopleGroupCloudDemoComponent {
     DEFAULT_GROUP_PLACEHOLDER: string = `[{"id": "1", "name":"activitiUserGroup"}]`;
     DEFAULT_PEOPLE_PLACEHOLDER: string = `[{"id": "1", email": "user@user.com", "firstName":"user", "lastName": "lastName", "username": "user"}]`;
 
-    peopleMode: string = PeopleCloudComponent.MODE_SINGLE;
-    preSelectUsers: string[] = [];
+    peopleMode: ComponentSelectionMode = 'single';
+    preSelectUsers: IdentityUserModel[] = [];
+    invalidUsers: IdentityUserModel[] = [];
     peopleRoles: string[] = [];
     peopleAppName: string;
     peopleFilterMode: string = this.DEFAULT_FILTER_MODE;
-    peoplePreselectValidation: Boolean = false;
+    peoplePreselectValidation = false;
+    groupPreselectValidation = false;
+    peopleReadonly = false;
+    groupReadonly = false;
 
-    groupMode: string = GroupCloudComponent.MODE_SINGLE;
-    preSelectGroup: GroupModel[] = [];
-    selectedGroupList: GroupModel[] = [];
+    groupMode: ComponentSelectionMode = 'single';
+    preSelectGroup: IdentityGroupModel[] = [];
+    invalidGroups: IdentityGroupModel[] = [];
     groupRoles: string[];
     groupAppName: string;
     groupFilterMode: string = this.DEFAULT_FILTER_MODE;
 
-    setPeoplePreselectValue(event: any) {
-        this.preSelectUsers = this.getArrayFromString(event.target.value);
+    setPeoplePreselectValue(value: string): void {
+        this.preSelectUsers = this.getArrayFromString(value);
     }
 
-    setGroupsPreselectValue(event: any) {
-        this.preSelectGroup = this.getArrayFromString(event.target.value);
+    setGroupsPreselectValue(value: string): void {
+        this.preSelectGroup = this.getArrayFromString(value);
     }
 
-    setPeopleRoles(event: any) {
-        this.peopleRoles = this.getArrayFromString(event.target.value);
+    setPeopleRoles(value: string): void {
+        this.peopleRoles = this.getArrayFromString(value);
     }
 
-    setGroupRoles(event: any) {
-        this.groupRoles = this.getArrayFromString(event.target.value);
+    setGroupRoles(value: string): void {
+        this.groupRoles = this.getArrayFromString(value);
     }
 
-    setPeopleAppName(event: any) {
-        this.peopleAppName = event.target.value;
+    setPeopleAppName(value: string): void {
+        this.peopleAppName = value;
     }
 
-    setGroupAppName(event: any) {
-        this.groupAppName = event.target.value;
+    setGroupAppName(value: string): void {
+        this.groupAppName = value;
     }
 
-    onChangePeopleMode(event: MatRadioChange) {
+    onChangePeopleMode(event: MatRadioChange): void {
        this.peopleMode = event.value;
-       this.preSelectUsers = [...this.preSelectUsers];
     }
 
-    onChangeGroupsMode(event: MatRadioChange) {
+    onChangePeopleReadonly(event: MatCheckboxChange): void {
+        this.peopleReadonly = event.checked;
+    }
+
+    onChangeGroupReadonly(event: MatCheckboxChange): void {
+        this.groupReadonly = event.checked;
+    }
+
+    onChangeGroupsMode(event: MatRadioChange): void {
         this.groupMode = event.value;
-        this.preSelectGroup = [...this.preSelectGroup];
     }
 
-    onChangePeopleFilterMode(event: MatRadioChange) {
+    onChangePeopleFilterMode(event: MatRadioChange): void {
         this.peopleFilterMode = event.value;
         this.resetPeopleFilter();
     }
 
-    onChangeGroupsFilterMode(event: MatRadioChange) {
+    onChangeGroupsFilterMode(event: MatRadioChange): void {
         this.groupFilterMode = event.value;
         this.restGroupFilter();
     }
 
-    isPeopleAppNameSelected() {
+    isPeopleAppNameSelected(): boolean {
         return this.peopleFilterMode === 'appName';
     }
 
-    isGroupAppNameSelected() {
+    isGroupAppNameSelected(): boolean {
         return this.groupFilterMode === 'appName';
     }
 
-    resetPeopleFilter() {
+    resetPeopleFilter(): void {
         if (this.isPeopleAppNameSelected()) {
             this.peopleRoles = [];
         } else {
@@ -105,7 +116,7 @@ export class PeopleGroupCloudDemoComponent {
         }
     }
 
-    restGroupFilter() {
+    restGroupFilter(): void {
         if (this.isGroupAppNameSelected()) {
             this.groupRoles = [];
         } else {
@@ -113,12 +124,23 @@ export class PeopleGroupCloudDemoComponent {
         }
     }
 
-    onChangePeopleValidation(event: MatCheckboxChange) {
+    onChangePeopleValidation(event: MatCheckboxChange): void {
         this.peoplePreselectValidation = event.checked;
-        this.preSelectUsers = [...this.preSelectUsers];
     }
 
-    isStringArray(str: string) {
+    onChangeGroupValidation(event: MatCheckboxChange): void {
+        this.groupPreselectValidation = event.checked;
+    }
+
+    onGroupsWarning(warning: any): void {
+        this.invalidGroups = warning.groups;
+    }
+
+    onUsersWarning(warning: any): void {
+        this.invalidUsers = warning.users;
+    }
+
+    isStringArray(str: string): boolean {
         try {
             const result = JSON.parse(str);
             return Array.isArray(result);
@@ -127,46 +149,11 @@ export class PeopleGroupCloudDemoComponent {
         }
     }
 
-    private getArrayFromString(value: string) {
-
+    private getArrayFromString<T = any>(value: string): T[] {
         if (this.isStringArray(value)) {
             return JSON.parse(value);
         } else {
             return [];
         }
     }
-
-    canShowPeopleList() {
-        return this.peopleMode === GroupCloudComponent.MODE_MULTIPLE;
-    }
-
-    canShowGroupList() {
-        return this.groupMode === GroupCloudComponent.MODE_MULTIPLE;
-    }
-
-    onRemoveGroup(group: GroupModel) {
-        this.preSelectGroup = this.preSelectGroup.filter((value: any) => value.id !== group.id);
-    }
-
-    onSelectGroup(group: GroupModel) {
-        if (this.groupMode === GroupCloudComponent.MODE_MULTIPLE) {
-            this.preSelectGroup.push(group);
-        }
-    }
-
-    get peopleSingleMode() {
-        return PeopleCloudComponent.MODE_SINGLE;
-    }
-
-    get peopleMultipleMode() {
-        return PeopleCloudComponent.MODE_MULTIPLE;
-    }
-
-    get groupSingleMode() {
-        return GroupCloudComponent.MODE_SINGLE;
-    }
-
-    get groupMultipleMode() {
-        return GroupCloudComponent.MODE_MULTIPLE;
-    }
 }

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

@@ -1,15 +1,14 @@
-
 <button data-automation-id="go-back" mat-icon-button (click)="onGoBack()">
     <mat-icon>arrow_back</mat-icon> Go Back
 </button>
 
 <h4 data-automation-id="process-details-header">Simple page to show the process instance: {{ processInstanceId }} of the app: {{ appName }}</h4>
 
-<div class="adf-process-cloud-container">
+<div class="app-process-cloud-container">
 
     <adf-cloud-task-list
         fxFlex
-        class="adf-cloud-layout-overflow"
+        class="app-cloud-layout-overflow"
         [appName]="appName"
         [processInstanceId]="processInstanceId"
         (rowClick)="onRowClick($event)"
@@ -17,9 +16,8 @@
     </adf-cloud-task-list>
 
     <adf-cloud-process-header
-        class="adf-process-cloud-header"
+        class="app-process-cloud-header"
         [appName]="appName"
         [processInstanceId]="processInstanceId">
     </adf-cloud-process-header>
 </div>
-

demo-shell/src/app/components/cloud/process-details-cloud-demo.component.scss

@@ -1,4 +1,4 @@
- .adf {
+ .app {
     &-process-cloud-container {
         display: flex;
     }
@@ -11,4 +11,5 @@
         margin-left: 10px;
         width: 25%;
     }
+
  }

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

@@ -11,7 +11,7 @@
     <div fxLayout="column" fxFlex fxLayoutAlign="space-between" *ngIf="editedFilter">
         <adf-cloud-process-list #processCloud
             fxFlex
-            class="adf-cloud-layout-overflow"
+            class="app-cloud-layout-overflow"
             [appName]="editedFilter.appName"
             [initiator]="editedFilter.initiator"
             [processDefinitionId]="editedFilter.processDefinitionId"
@@ -24,7 +24,13 @@
             [lastModifiedTo]="editedFilter.lastModifiedTo"
             [sorting]="sortArray"
             [selectionMode]="selectionMode"
+            [stickyHeader]="true"
+            [showActions]="actionMenu"
+            [showContextMenu]="contextMenu"
             [multiselect]="multiselect"
+            (showRowActionsMenu)="onShowRowActionsMenu($event)"
+            (showRowContextMenu)="onShowRowContextMenu($event)"
+            (executeRowAction)="onExecuteRowAction($event)"
             (rowClick)="onRowClick($event)"
             (rowsSelected)="onRowsSelected($event)">
         </adf-cloud-process-list>
@@ -35,10 +41,28 @@
             (prevPage)="resetSelectedRows()">
         </adf-pagination>
         <div *ngIf="testingMode">
-            Selected rows:
-            <ul>
-                <li *ngFor="let row of selectedRows">{{ row.id }}</li>
-            </ul>
+            <div *ngIf="multiselect">
+                {{ 'SETTINGS_CLOUD.SELECTED_ROWS' | translate }}:
+                <ul>
+                    <li *ngFor="let row of selectedRows">{{ row.id }}</li>
+                </ul>
+            </div>
+            <div *ngIf="actionMenu">
+                <span>{{ 'SETTINGS_CLOUD.ACTION.ACTION_MENU' | translate }}:</span>
+                <br>
+                <div *ngIf="selectedAction">
+                    <span>{{ 'SETTINGS_CLOUD.ACTION.PROCESS_ID' | translate }}: {{ selectedAction.id }}</span><br>
+                    <span>{{ 'SETTINGS_CLOUD.ACTION.ACTION_TYPE' | translate }}: {{ selectedAction.actionType }}</span>
+                </div>
+            </div>
+            <div *ngIf="contextMenu">
+                <span>{{ 'SETTINGS_CLOUD.ACTION.CONTEX_MENU' | translate }}:</span>
+                <br>
+                <div *ngIf="selectedContextAction">
+                    <span>{{ 'SETTINGS_CLOUD.ACTION.PROCESS_ID' | translate }}: {{ selectedContextAction.id }}</span><br>
+                    <span>{{ 'SETTINGS_CLOUD.ACTION.ACTION_TYPE' | translate }}: {{ selectedContextAction.actionType }}</span>
+                </div>
+            </div>
         </div>
     </div>
 </div>

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, ViewChild, OnInit } from '@angular/core';
+import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core';
 import {
     ProcessListCloudComponent,
     ProcessFilterCloudModel,
@@ -24,16 +24,20 @@ import {
 } from '@alfresco/adf-process-services-cloud';
 
 import { ActivatedRoute, Router } from '@angular/router';
-import { UserPreferencesService, AppConfigService } from '@alfresco/adf-core';
-import { CloudLayoutService } from './services/cloud-layout.service';
+import { UserPreferencesService, AppConfigService, DataCellEvent } from '@alfresco/adf-core';
+import { CloudLayoutService, CloudServiceSettings } from './services/cloud-layout.service';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { Pagination } from '@alfresco/js-api';
 
 @Component({
     templateUrl: './processes-cloud-demo.component.html',
     styleUrls: ['./processes-cloud-demo.component.scss']
 })
-export class ProcessesCloudDemoComponent implements OnInit {
+export class ProcessesCloudDemoComponent implements OnInit, OnDestroy {
 
     public static ACTION_SAVE_AS = 'saveAs';
+    public static ACTION_DELETE = 'delete';
     static PROCESS_FILTER_PROPERTY_KEYS = 'adf-edit-process-filter';
 
     @ViewChild('processCloud')
@@ -52,11 +56,19 @@ export class ProcessesCloudDemoComponent implements OnInit {
     selectionMode: string;
     selectedRows: string[] = [];
     testingMode: boolean;
+    actionMenu: boolean;
+    contextMenu: boolean;
+    actions: any[] = [];
+    selectedAction: { id: number, name: string, actionType: string};
+    selectedContextAction: { id: number, name: string, actionType: string};
     processFilterProperties: any  = { filterProperties: [], sortProperties: [], actions: [] };
     processDetailsRedirection: boolean;
 
     editedFilter: ProcessFilterCloudModel;
 
+    private performAction$ = new Subject<any>();
+    private onDestroy$ = new Subject<boolean>();
+
     constructor(
         private route: ActivatedRoute,
         private router: Router,
@@ -81,20 +93,30 @@ export class ProcessesCloudDemoComponent implements OnInit {
             this.filterId = params.id;
         });
 
-        this.cloudLayoutService.getCurrentSettings()
-            .subscribe((settings) => this.setCurrentSettings(settings));
+        this.cloudLayoutService.settings$
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(settings => this.setCurrentSettings(settings));
+        this.performContextActions();
     }
 
-    setCurrentSettings(settings) {
+    ngOnDestroy() {
+        this.onDestroy$.next(true);
+        this.onDestroy$.complete();
+    }
+
+    setCurrentSettings(settings: CloudServiceSettings) {
         if (settings) {
             this.multiselect = settings.multiselect;
             this.testingMode = settings.testingMode;
             this.selectionMode = settings.selectionMode;
             this.processDetailsRedirection = settings.processDetailsRedirection;
+            this.actionMenu = settings.actionMenu;
+            this.contextMenu = settings.contextMenu;
+            this.actions = settings.actions;
         }
     }
 
-    onChangePageSize(event) {
+    onChangePageSize(event: Pagination) {
         this.userPreference.paginationSize = event.maxItems;
     }
 
@@ -102,7 +124,7 @@ export class ProcessesCloudDemoComponent implements OnInit {
         this.selectedRows = [];
     }
 
-    onRowClick(processInstanceId) {
+    onRowClick(processInstanceId: string) {
         if (!this.multiselect && this.selectionMode !== 'multiple' && this.processDetailsRedirection) {
             this.router.navigate([`/cloud/${this.appName}/process-details/${processInstanceId}`]);
         }
@@ -110,11 +132,21 @@ export class ProcessesCloudDemoComponent implements OnInit {
 
     onFilterChange(query: any) {
         this.editedFilter = Object.assign({}, query);
-        this.sortArray = [new ProcessListCloudSortingModel({ orderBy: this.editedFilter.sort, direction: this.editedFilter.order })];
+        this.sortArray = [
+            new ProcessListCloudSortingModel({
+                orderBy: this.editedFilter.sort,
+                direction: this.editedFilter.order
+            })
+        ];
     }
 
     onProcessFilterAction(filterAction: any) {
-        this.cloudLayoutService.setCurrentProcessFilterParam({ id: filterAction.filter.id });
+        if (filterAction.actionType === ProcessesCloudDemoComponent.ACTION_DELETE) {
+            this.cloudLayoutService.setCurrentProcessFilterParam({ index: 0 });
+        } else {
+            this.cloudLayoutService.setCurrentProcessFilterParam({ id: filterAction.filter.id });
+        }
+
         if (filterAction.actionType === ProcessesCloudDemoComponent.ACTION_SAVE_AS) {
             this.router.navigate([`/cloud/${this.appName}/processes/`], { queryParams: filterAction.filter });
         }
@@ -124,4 +156,41 @@ export class ProcessesCloudDemoComponent implements OnInit {
         this.resetSelectedRows();
         this.selectedRows = nodes.map((node) => node.obj.entry);
     }
+
+    onShowRowActionsMenu(event: DataCellEvent) {
+        event.value.actions = this.actions;
+    }
+
+    onShowRowContextMenu(event: DataCellEvent) {
+        event.value.actions = this.actions.map((action) => {
+            return {
+                data: event.value.row['obj'],
+                model: action,
+                subject: this.performAction$
+
+            };
+        });
+    }
+
+    onExecuteRowAction(row: any) {
+        const value = row.value.row['obj'].entry;
+        const action = row.value.action;
+        this.selectedAction = {id: value.id, name: value.name, actionType: action.title};
+    }
+
+    performContextActions() {
+        this.performAction$
+          .pipe(takeUntil(this.onDestroy$))
+          .subscribe((action: any) => {
+            if (action) {
+              this.onExecuteContextAction(action);
+            }
+          });
+    }
+
+    onExecuteContextAction(contextAction: any) {
+        const value = contextAction.data.entry;
+        const action = contextAction.model;
+        this.selectedContextAction = {id: value.id, name: value.name, actionType: action.title};
+    }
 }

demo-shell/src/app/components/cloud/services/cloud-layout.service.ts

@@ -16,55 +16,65 @@
  */
 
 import { Injectable } from '@angular/core';
-import { Observable, BehaviorSubject } from 'rxjs';
+import { BehaviorSubject } from 'rxjs';
+
+export interface CloudServiceSettings {
+    multiselect: boolean;
+    actionMenu: boolean;
+    contextMenu: boolean;
+    testingMode: boolean;
+    taskDetailsRedirection: boolean;
+    processDetailsRedirection: boolean;
+    selectionMode: string;
+    actions: any[];
+}
+
+export interface FilterSettings {
+    id?: string;
+    index?: number;
+    key?: string;
+}
+
+export class ActionMenuModel {
+    constructor(
+        public key: string,
+        public icon: string,
+        public title: string,
+        public visible?: boolean,
+        public disabled?: boolean
+      ) {  }
+
+}
 
 @Injectable({
     providedIn: 'root'
 })
 export class CloudLayoutService {
 
-    private settings = {
+    private settings: CloudServiceSettings = {
         multiselect: false,
+        actionMenu: false,
+        contextMenu: false,
         testingMode: false,
         taskDetailsRedirection: true,
         processDetailsRedirection: true,
-        selectionMode: 'single'
+        selectionMode: 'single',
+        actions: []
     };
 
-    private filterTaskSubject: BehaviorSubject<any> = new BehaviorSubject({index: 0});
-    private filterTask$: Observable<any>;
-    private filterProcessSubject: BehaviorSubject<any> = new BehaviorSubject({index: 0});
-    private filterProcess$: Observable<any>;
-    private settingsSubject: BehaviorSubject<any> = new BehaviorSubject(this.settings);
-    private settings$: Observable<any>;
+    taskFilter$ = new BehaviorSubject<FilterSettings>({index: 0});
+    processFilter$ = new BehaviorSubject<FilterSettings>({index: 0});
+    settings$ = new BehaviorSubject<CloudServiceSettings>(this.settings);
 
-    constructor() {
-        this.filterTask$ = this.filterTaskSubject.asObservable();
-        this.filterProcess$ = this.filterProcessSubject.asObservable();
-        this.settings$ = this.settingsSubject.asObservable();
+    setCurrentTaskFilterParam(param: FilterSettings) {
+        this.taskFilter$.next(param);
     }
 
-    getCurrentTaskFilterParam() {
-        return this.filterTask$;
+    setCurrentProcessFilterParam(param: FilterSettings) {
+        this.processFilter$.next(param);
     }
 
-    setCurrentTaskFilterParam(param) {
-        this.filterTaskSubject.next(param);
-    }
-
-    getCurrentProcessFilterParam() {
-        return this.filterProcess$;
-    }
-
-    setCurrentProcessFilterParam(param) {
-        this.filterProcessSubject.next(param);
-    }
-
-    getCurrentSettings() {
-        return this.settings$;
-    }
-
-    setCurrentSettings(param) {
-        this.settingsSubject.next(param);
+    setCurrentSettings(param: CloudServiceSettings) {
+        this.settings$.next(param);
     }
 }

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

@@ -0,0 +1,71 @@
+<div fxFlex fxLayout="column" class="app-settings-container">
+    <mat-slide-toggle [color]="'primary'" [checked]="multiselect" (change)="toggleMultiselect()" data-automation-id="multiSelection">
+        {{ 'SETTINGS_CLOUD.MULTISELECTION' | translate }}
+    </mat-slide-toggle>
+    <mat-slide-toggle [color]="'primary'" [checked]="actionMenu" (change)="toggleActionMenu()" data-automation-id="actionmenu">
+        {{ 'SETTINGS_CLOUD.ACTION.ACTION_MENU' | translate }}
+    </mat-slide-toggle>
+    <mat-slide-toggle [color]="'primary'" [checked]="contextMenu" (change)="toggleContextMenu()" data-automation-id="contextmenu">
+        {{ 'SETTINGS_CLOUD.ACTION.CONTEX_MENU' | translate }}
+    </mat-slide-toggle>
+    <mat-slide-toggle [color]="'primary'" [checked]="testingMode" (change)="toggleTestingMode()" data-automation-id="testingMode">
+        {{ 'SETTINGS_CLOUD.TESTING_MODE' | translate }}
+    </mat-slide-toggle>
+    <mat-slide-toggle [color]="'primary'" [checked]="taskDetailsRedirection" (change)="toggleTaskDetailsRedirection()" data-automation-id="taskDetailsRedirection">
+        {{ 'SETTINGS_CLOUD.TASK_DETAILS_REDIRECTION' | translate }}
+    </mat-slide-toggle>
+    <mat-slide-toggle [color]="'primary'" [checked]="processDetailsRedirection" (change)="toggleProcessDetailsRedirection()" data-automation-id="processDetailsRedirection">
+        {{ 'SETTINGS_CLOUD.PROCESS_DETAILS_REDIRECTION' | translate }}
+    </mat-slide-toggle>
+    <mat-form-field data-automation-id="selectionMode">
+        <mat-label>
+            {{ 'SETTINGS_CLOUD.SELECTION_MODE' | translate }}
+        </mat-label>
+        <mat-select [(ngModel)]="selectionMode" (selectionChange)="onSelectionModeChange()">
+            <mat-option *ngFor="let option of selectionModeOptions" [value]="option.value">
+                {{ option.title }}
+            </mat-option>
+        </mat-select>
+    </mat-form-field>
+    <mat-card *ngIf="actionMenu || contextMenu">
+        <mat-card-header>
+          <mat-card-title>{{ 'SETTINGS_CLOUD.ACTION.ACTION_TITLE' | translate }}</mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+            <form [formGroup]="actionMenuForm" fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="20px">
+                <mat-form-field fxFlex="23%">
+                    <input matInput formControlName="key" placeholder="{{ 'SETTINGS_CLOUD.ACTION.KEY' | translate }}">
+                </mat-form-field>
+
+                <mat-form-field fxFlex="23%">
+                    <input matInput formControlName="title" placeholder="{{ 'SETTINGS_CLOUD.ACTION.TITLE' | translate }}">
+                </mat-form-field>
+
+                <mat-form-field fxFlex="23%">
+                    <input matInput formControlName="icon" placeholder="{{ 'SETTINGS_CLOUD.ACTION.ICON' | translate }}"I>
+                </mat-form-field>
+                <mat-checkbox formControlName="visible">
+                    {{ 'SETTINGS_CLOUD.ACTION.ACTION_VISIBLE' | translate }}
+                </mat-checkbox>
+                <mat-checkbox formControlName="disabled">
+                    {{ 'SETTINGS_CLOUD.ACTION.ACTION_DISABLE' | translate }}
+                </mat-checkbox>
+                <button mat-raised-button (click)="addAction()">
+                        {{ 'SETTINGS_CLOUD.ACTION.ADD_BUTTON' | translate }}
+                </button>
+            </form>
+            <div *ngIf="actions.length > 0">
+                <mat-chip-list #chipList>
+                    <mat-chip *ngFor="let action of actions" [removable]="true">
+                        {{action.title}}
+                        <mat-icon
+                            matChipRemove
+                            (click)="removeAction(action)">
+                            cancel
+                        </mat-icon>
+                    </mat-chip>
+                </mat-chip-list>
+            </div>
+        </mat-card-content>
+    </mat-card>
+</div>

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

@@ -0,0 +1,7 @@
+.app-settings-container {
+    padding: 20px 30px;
+}
+
+.app-settings-container mat-form-field {
+    max-width: 200px;
+}

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

@@ -15,17 +15,24 @@
  * limitations under the License.
  */
 
-import { Component, OnInit } from '@angular/core';
-import { CloudLayoutService } from './services/cloud-layout.service';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { CloudLayoutService, ActionMenuModel } from '../services/cloud-layout.service';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { FormGroup, FormControl } from '@angular/forms';
 
 @Component({
     selector: 'app-cloud-settings',
     templateUrl: './cloud-settings.component.html',
     styleUrls: ['./cloud-settings.component.scss']
 })
-export class CloudSettingsComponent implements OnInit {
+export class CloudSettingsComponent implements OnInit, OnDestroy {
+    private onDestroy$ = new Subject<boolean>();
 
     multiselect: boolean;
+    actionMenu: boolean;
+    contextMenu: boolean;
+    actions: ActionMenuModel[] = [];
     selectionMode: string;
     testingMode: boolean;
     taskDetailsRedirection: boolean;
@@ -37,11 +44,26 @@ export class CloudSettingsComponent implements OnInit {
         { value: 'multiple', title: 'Multiple' }
     ];
 
+    actionMenuForm = new FormGroup({
+        key: new FormControl(''),
+        title: new FormControl(''),
+        icon: new FormControl(''),
+        visible: new FormControl(true),
+        disabled: new FormControl(false)
+      });
+
     constructor(private cloudLayoutService: CloudLayoutService) { }
 
     ngOnInit() {
-        this.cloudLayoutService.getCurrentSettings()
-            .subscribe((settings) => this.setCurrentSettings(settings));
+        this.cloudLayoutService
+            .settings$
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(settings => this.setCurrentSettings(settings));
+    }
+
+    ngOnDestroy() {
+        this.onDestroy$.next(true);
+        this.onDestroy$.complete();
     }
 
     setCurrentSettings(settings) {
@@ -51,6 +73,9 @@ export class CloudSettingsComponent implements OnInit {
             this.selectionMode = settings.selectionMode;
             this.taskDetailsRedirection = settings.taskDetailsRedirection;
             this.processDetailsRedirection = settings.processDetailsRedirection;
+            this.actionMenu = settings.actionMenu;
+            this.contextMenu = settings.contextMenu;
+            this.actions = settings.actions;
         }
     }
 
@@ -78,9 +103,35 @@ export class CloudSettingsComponent implements OnInit {
         this.setSetting();
     }
 
+    toggleActionMenu() {
+        this.actionMenu = !this.actionMenu;
+        this.setSetting();
+    }
+
+    toggleContextMenu() {
+        this.contextMenu = !this.contextMenu;
+        this.setSetting();
+    }
+
+    addAction() {
+        this.actions.push(<ActionMenuModel> this.actionMenuForm.value);
+        this.actionMenuForm.get('key').reset();
+        this.actionMenuForm.get('title').reset();
+        this.actionMenuForm.get('icon').reset();
+        this.setSetting();
+    }
+
+    removeAction(removedAction: ActionMenuModel) {
+        this.actions = this.actions.filter((action: ActionMenuModel) => action.key !== removedAction.key);
+        this.setSetting();
+    }
+
     setSetting() {
         this.cloudLayoutService.setCurrentSettings({
             multiselect: this.multiselect,
+            actionMenu: this.actionMenu,
+            contextMenu: this.contextMenu,
+            actions: this.actions,
             testingMode: this.testingMode,
             selectionMode: this.selectionMode,
             taskDetailsRedirection: this.taskDetailsRedirection,

demo-shell/src/app/components/cloud/shared/cloud.shared.module.ts

@@ -0,0 +1,39 @@
+/*!
+ * @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 { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CloudSettingsComponent } from './cloud-settings.component';
+import { MatDialogModule, MatInputModule, MatSelectModule, MatSlideToggleModule } from '@angular/material';
+import { CoreModule } from '@alfresco/adf-core';
+import { FlexLayoutModule } from '@angular/flex-layout';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        CoreModule.forChild(),
+        MatDialogModule,
+        MatInputModule,
+        MatSelectModule,
+        MatSlideToggleModule,
+        FlexLayoutModule
+    ],
+    declarations: [ CloudSettingsComponent ],
+    exports: [ CommonModule, CloudSettingsComponent]
+})
+
+export class AppCloudSharedModule {}

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

@@ -1,7 +1,10 @@
 <adf-cloud-start-process
     [appName]="appName"
     [name]="processName"
+    [values]="formValues"
+    [variables]="variables"
     (error)="openSnackMessage($event)"
     (success)="onStartProcessSuccess()"
+    (formContentClicked)="onFormContentClicked($event)"
     (cancel)="onCancelStartProcess()">
 </adf-cloud-start-process>

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

@@ -19,6 +19,7 @@ import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { NotificationService, AppConfigService } from '@alfresco/adf-core';
 import { CloudLayoutService } from './services/cloud-layout.service';
+import { PreviewService } from 'app/services/preview.service';
 
 @Component({
     templateUrl: './start-process-cloud-demo.component.html',
@@ -28,10 +29,13 @@ export class StartProcessCloudDemoComponent implements OnInit {
 
     appName;
     processName: string;
+    formValues: string;
+    variables: any;
 
     constructor(private appConfig: AppConfigService,
                 private cloudLayoutService: CloudLayoutService,
                 private route: ActivatedRoute,
+                private previewService: PreviewService,
                 private notificationService: NotificationService,
                 private router: Router) {
     }
@@ -41,7 +45,9 @@ export class StartProcessCloudDemoComponent implements OnInit {
             this.appName = params.appName;
         });
 
-        this.processName = this.appConfig.get<string>('adf-start-process.name');
+        this.processName = this.appConfig.get<string>('adf-cloud-start-process.name');
+        this.formValues = this.appConfig.get<string>('adf-cloud-start-process.values');
+        this.variables = this.appConfig.get<string>('adf-cloud-start-process.variables');
     }
 
     onStartProcessSuccess() {
@@ -55,6 +61,10 @@ export class StartProcessCloudDemoComponent implements OnInit {
     }
 
     openSnackMessage(event: any) {
-        this.notificationService.openSnackMessage(event.response.body.message);
+        this.notificationService.openSnackMessage(event.response.body.entry.message);
+    }
+
+    onFormContentClicked(resourceClicked: any) {
+        this.previewService.showResource(resourceClicked.nodeId);
     }
 }

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

@@ -7,13 +7,12 @@
                 [appName]="appName"
                 [taskId]="taskId"
                 (cancelClick)="goBack()"
-                (taskClaimed)="onClaimTask()"
                 (taskCompleted)="onTaskCompleted()"
-                (taskUnclaimed)="onUnclaimTask()"
+                (formContentClicked)="onFormContentClicked($event)"
                 (formSaved)="onFormSaved()">
             </adf-cloud-task-form>
         </div>
-        <adf-cloud-task-header fxFlex
+        <adf-cloud-task-header #taskHeader fxFlex
             [appName]="appName"
             [taskId]="taskId">
         </adf-cloud-task-header>

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

@@ -1,11 +1,11 @@
 
-.adf {
+.app {
 
     &-task-detail-container {
         display: flex;
     }
 
-    &-task-tiitle {
+    &-task-title {
         margin-left:15px;
     }
 

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

@@ -15,9 +15,11 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { NotificationService } from '@alfresco/adf-core';
+import { TaskHeaderCloudComponent } from '@alfresco/adf-process-services-cloud';
+import { PreviewService } from 'app/services/preview.service';
 
 @Component({
     templateUrl: './task-details-cloud-demo.component.html',
@@ -25,13 +27,17 @@ import { NotificationService } from '@alfresco/adf-core';
 })
 export class TaskDetailsCloudDemoComponent {
 
+    @ViewChild('taskHeader')
+    taskHeader: TaskHeaderCloudComponent;
+
     taskId: string;
     appName: string;
 
     constructor(
         private route: ActivatedRoute,
         private router: Router,
-        private notificationService: NotificationService
+        private notificationService: NotificationService,
+        private previewService: PreviewService
         ) {
         this.route.params.subscribe((params) => {
             this.taskId = params.taskId;
@@ -50,24 +56,12 @@ export class TaskDetailsCloudDemoComponent {
         this.router.navigate([`/cloud/${this.appName}/`]);
     }
 
-    onCompletedTask() {
-        this.goBack();
-    }
-
-    onUnclaimTask() {
-        this.goBack();
-    }
-
-    onClaimTask() {
-        this.goBack();
-    }
-
     onTaskCompleted() {
         this.goBack();
     }
 
-    onFormContentClicked(resourceId) {
-        this.router.navigate([`/cloud/${this.appName}/task-details/${this.taskId}/files/${resourceId.nodeId}/view`]);
+    onFormContentClicked(resourceClicked: any) {
+        this.previewService.showResource(resourceClicked.nodeId);
     }
 
     onFormSaved() {

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

@@ -0,0 +1,27 @@
+<h2>{{ 'APP_LAYOUT.TASK_HEADER_CLOUD.COMPONENT_NAME' | translate }}</h2>
+
+<mat-form-field class="app-appName-input">
+    {{ 'APP_LAYOUT.TASK_HEADER_CLOUD.APP_NAME_INPUT' | translate }}
+    <input matInput
+           [type]="'text'"
+           [formControl]="appNameFormControl"
+           (change)="updateTaskHeader()">
+</mat-form-field>
+
+<mat-form-field class="app-taskId-input">
+    {{ 'APP_LAYOUT.TASK_HEADER_CLOUD.TASK_ID_INPUT' | translate }}
+    <input matInput
+           [type]="'text'"
+           [formControl]="taskIdFormControl"
+           (change)="updateTaskHeader()">
+</mat-form-field>
+
+<mat-error *ngIf="errorMessage">{{errorMessage}}</mat-error>
+
+<div>
+    <adf-cloud-task-header #taskHeader
+                           [appName]="appName"
+                           [taskId]="taskId"
+                           (error)="onError($event)">
+    </adf-cloud-task-header>
+</div>