Try to create tag with token

Cache the lib/dist for npm publish purpose
[ADF-4843] - Automate more manual test cases for visibility chaining … (#5014 )
2026-09-16 18:13:06 +00:00 · 2019-08-30 12:16:01 +01:00 · 2019-08-30 12:03:53 +01:00 · 2019-08-30 11:51:56 +01:00 · 2019-08-30 10:44:21 +01:00 · 2019-08-30 10:28:40 +01:00
1294 changed files with 71259 additions and 37000 deletions
@@ -0,0 +1,37 @@
+# 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 @gmandakini @marouanbentaleb
+
+ # You can also use email addresses if you prefer. They'll be
+# used to look up users just like we do for commit author
+# emails.
+#*.go docs@example.com
+docs/* @m-hulbert  @eromano
+
+ # In this example, @doctocat owns any files in the build/logs
+# directory at the root of the repository and any of its
+# subdirectories.
+#/build/logs/ @doctocat
+
+ # The `docs/*` pattern will match files like
+# `docs/getting-started.md` but not further nested files like
+# `docs/build-app/troubleshooting.md`.
+#docs/*  docs@example.com
+
+ # In this example, @octocat owns any file in an apps directory
+# anywhere in your repository.
+#apps/ @octocat
+
+ # In this example, @doctocat owns any file in the `/docs`
+# directory in the root of your repository.
+#/docs/ @doctocat
@@ -3,22 +3,13 @@ node_modules
 bundles
 workspace.xml
 .idea/
+.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/
@@ -32,3 +23,4 @@ src/environments/
 /protractorFailuresReport
 coverage/
 /desktop.ini
+out-tsc
@@ -6,7 +6,7 @@ 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'
+  - '10.16.0'

 install:
    echo "no install"
@@ -15,18 +15,33 @@ 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 != cron
  - name: Unit test
+    if: type != cron
+  - name: Deploy docker
+    if: type = push
+  - name: Update Rancher
+    if: type = push
+  - name: Release on npm
+    if: type = push
+  - name: Check bundle
+    if: type = push
  - name: e2e Test
-  - name: Create Docker PR
-  - name: Deploy Docker PR
+    if: type != cron
+  - name: Update Rancher PR
+    if: type = pull_request
+  - name: Update Children Projects
+    if: branch = master AND type = push OR (tag =~ .*beta.*)
+  - name: Release beta tag
+    if: type = cron

 addons:
    chrome: stable
@@ -42,177 +57,98 @@ before_install:

 jobs:
    include:
-        - stage: Warm Up Cache & Lint & Build Dist
+        - stage: Lint & Build Dist
+          name:  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;
+        - stage: Lint & Build Dist
+          name:  Lint
+          script: npm install && ./scripts/lint.sh || exit 1;

-# Send coverage data to codecov
-after_success:
-    bash <(curl -s https://codecov.io/bash) -X gcov
+
+        - 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-demo.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-beta.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: Release on npm
+          script: ./scripts/travis/release/release.sh
+
+
+        - stage: Check bundle
+          script:
+          - ADF_VERSION=$(npm view @alfresco/adf-core@${TAG_NPM} version)
+          - ./scripts/npm-check-bundles.sh -v ${ADF_VERSION}
+
+
+        - stage: Deploy docker
+          script:
+          - TAG_VERSION=$(./scripts/travis/deploy/tag-travis-branch.sh)
+          - echo "Running the docker with tag" $TAG_VERSION
+          - ./node_modules/@alfresco/adf-cli/bin/adf-cli docker-publish --loginCheck --loginUsername "$DOCKER_REPOSITORY_USER" --loginPassword "$DOCKER_REPOSITORY_PASSWORD" --loginRepo "$DOCKER_REPOSITORY_DOMAIN" --dockerRepo "$DOCKER_REPOSITORY" --dockerTags "$TAG_VERSION" --pathProject "$(pwd)"
+
+
+        - stage: Update Rancher
+          script:
+          - TAG_VERSION=$(./scripts/travis/deploy/tag-travis-branch.sh)
+          - echo "Update rancher with docker tag" $TAG_VERSION  --url $REPO_RANCHER --environment_name $REPO_RANCHER_ADF_NAME
+          - ./scripts/rancher-update.sh --access_key $RANCHER_TOKEN --secret_key $RANCHER_SECRET --url $REPO_RANCHER --environment_name $REPO_RANCHER_ADF_NAME --image docker:$DOCKER_REPOSITORY:$TAG_VERSION
+
+
+        - stage: Update Rancher PR
+          name: Update Rancher PR
+          script: ./scripts/travis/deploy/deploy.sh
+
+
+before_deploy:
+  # Set up git user name and tag this commit
+  - git config --local user.name "Alfresco"
+  - export TRAVIS_TAG=$(cat package.json | grep version | head -1 | awk -F= "{ print $2 }" | sed 's/[version:,\",]//g' | tr -d '[[:space:]]')
+  - echo "Create tag:" $TRAVIS_TAG
+  - git tag $TRAVIS_TAG
+
+deploy:
+  provider: releases
+  api_key: $GITHUB_TOKEN
+  name: $TRAVIS_TAG
+  body: "Add the release note"
+  skip_cleanup: true
+  on:
+    branch: master

 cache:
  directories:
  - node_modules
  - demo-shell/dist
  - tmp
+  - lib/dist
@@ -14,7 +14,7 @@
  <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

@@ -23,7 +23,7 @@
            },
            "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",
              {
@@ -78,6 +78,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"
            ],
@@ -106,6 +108,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"
+                }
+              ]
            }
          }
        },
@@ -113,11 +123,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,12 +157,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.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",
              {
@@ -209,7 +227,8 @@
              "./demo-shell/src/tsconfig.app.json"
            ],
            "exclude": [
-              "**/node_modules/**/*"
+              "**/node_modules/**/*",
+              "package.json"
            ]
          }
        }
@@ -324,6 +343,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 +373,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 +388,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,6 +422,8 @@
              "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"
            ],
@@ -489,7 +526,8 @@
              "./demo-shell/src/tsconfig.app.json"
            ],
            "exclude": [
-              "**/node_modules/**/*"
+              "**/node_modules/**/*",
+              "package.json"
            ]
          }
        }
@@ -516,14 +554,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/**/*"
            ]
@@ -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
@@ -126,8 +126,9 @@
    "uncheck",
    "subfolders",
    "ECMBPM",
-    "candidateuserapp",
-    "processwithvariables"
+    "processwithvariables",
+    "dropdownrestprocess",
+    "devops"
  ],
  "dictionaries": [
    "html",
@@ -1,7 +1,7 @@
 {
  "name": "Alfresco-ADF-Angular-Demo",
  "description": "Demo shell for Alfresco Angular components",
-  "version": "3.2.1",
+  "version": "3.4.0",
  "author": "Alfresco Software, Ltd.",
  "repository": {
    "type": "git",
@@ -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": ""
@@ -78,6 +78,7 @@
    "UPLOADER": "مُحمِّل",
    "WEBSCRIPT": "برنامج الويب النصي",
    "TAG": "علامة",
+    "PIPES": "أنابيب",
    "TRASHCAN": "سلة المحذوفات",
    "SOCIAL": "اجتماعي",
    "SETTINGS": "إعدادات",
@@ -95,7 +96,8 @@
    "PEOPLE_GROUPS_CLOUD": "سحابة الأشخاص/المجموعة",
    "PEOPLE_CLOUD": "مكون سحابة الأشخاص",
    "GROUPS_CLOUD": "مكون سحابة المجموعة",
-    "CONFIRM-DIALOG": "مربع حوار التأكيد"
+    "CONFIRM-DIALOG": "مربع حوار التأكيد",
+    "COMMUNITY": "Community"
  },
  "TRASHCAN": {
    "ACTIONS": {
@@ -245,7 +247,7 @@
    "RATING": "مكون التقييم"
  },
  "TAG": {
-    "LIST": "خدمات محتوى علامات القائمة",
+    "LIST": "Content Services علامات القائمة",
    "INSERT": "إدراج معرف العقدة",
    "NODE_LIST": "قائمة العلامات حسب معرف العقدة"
  },
@@ -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í",
@@ -95,7 +96,8 @@
    "PEOPLE_GROUPS_CLOUD": "Cloud osob/skupin",
    "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": {
@@ -78,6 +78,7 @@
    "UPLOADER": "Uploader",
    "WEBSCRIPT": "Webscript",
    "TAG": "Tag",
+    "PIPES": "Rør",
    "TRASHCAN": "Papirkurv",
    "SOCIAL": "Social",
    "SETTINGS": "Indstillinger",
@@ -95,7 +96,8 @@
    "PEOPLE_GROUPS_CLOUD": "Person/gruppecloud",
    "PEOPLE_CLOUD": "Personcloudkomponent",
    "GROUPS_CLOUD": "Gruppecloudkomponent",
-    "CONFIRM-DIALOG": "Bekræftelsesdialogboks"
+    "CONFIRM-DIALOG": "Bekræftelsesdialogboks",
+    "COMMUNITY": "Community"
  },
  "TRASHCAN": {
    "ACTIONS": {
@@ -78,6 +78,7 @@
    "UPLOADER": "Uploader",
    "WEBSCRIPT": "Webscript",
    "TAG": "Tag",
+    "PIPES": "Pipes",
    "TRASHCAN": "Papierkorb",
    "SOCIAL": "Soziale Funktionen",
    "SETTINGS": "Einstellungen",
@@ -95,7 +96,8 @@
    "PEOPLE_GROUPS_CLOUD": "Personen-/Gruppen-Cloud",
    "PEOPLE_CLOUD": "Personen-Cloud-Komponente",
    "GROUPS_CLOUD": "Gruppen-Cloud-Komponente",
-    "CONFIRM-DIALOG": "Bestätigungsdialog"
+    "CONFIRM-DIALOG": "Bestätigungsdialog",
+    "COMMUNITY": "Community"
  },
  "TRASHCAN": {
    "ACTIONS": {
@@ -78,6 +78,7 @@
    "UPLOADER": "Uploader",
    "WEBSCRIPT": "Webscript",
    "TAG": "Tag",
+    "PIPES": "Pipes",
    "TRASHCAN": "Trashcan",
    "SOCIAL": "Social",
    "SETTINGS": "Settings",
@@ -303,23 +304,25 @@
    "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"
-    }
-  },
  "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",
+      "PROCESS_ID": "ProcessInstanceId",
+      "ACTION_TYPE": "Action Type"
+    }
  }
 }
@@ -78,6 +78,7 @@
    "UPLOADER": "Cargador",
    "WEBSCRIPT": "Webscript",
    "TAG": "Etiqueta",
+    "PIPES": "Tubos",
    "TRASHCAN": "Papelera",
    "SOCIAL": "Social",
    "SETTINGS": "Configuración",
@@ -95,7 +96,8 @@
    "PEOPLE_GROUPS_CLOUD": "Personas/Grupos en la nube",
    "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": {
@@ -78,6 +78,7 @@
    "UPLOADER": "Lataustoiminto",
    "WEBSCRIPT": "Verkkokomentosarja",
    "TAG": "Tunniste",
+    "PIPES": "Putket",
    "TRASHCAN": "Roskakori",
    "SOCIAL": "Sosiaalinen",
    "SETTINGS": "Asetukset",
@@ -95,7 +96,8 @@
    "PEOPLE_GROUPS_CLOUD": "Ihmispilvi/Ryhmäpilvi",
    "PEOPLE_CLOUD": "Ihmispilvi-komponentti",
    "GROUPS_CLOUD": "Ryhmäpilvi-komponentti",
-    "CONFIRM-DIALOG": "Vahvistusvalintaikkuna"
+    "CONFIRM-DIALOG": "Vahvistusvalintaikkuna",
+    "COMMUNITY": "Community"
  },
  "TRASHCAN": {
    "ACTIONS": {
@@ -78,6 +78,7 @@
    "UPLOADER": "Chargeur",
    "WEBSCRIPT": "Script Web",
    "TAG": "Tag",
+    "PIPES": "Tuyaux",
    "TRASHCAN": "Corbeille",
    "SOCIAL": "Réseaux sociaux",
    "SETTINGS": "Paramètres",
@@ -95,7 +96,8 @@
    "PEOPLE_GROUPS_CLOUD": "Cloud des personnes/groupes",
    "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": {
@@ -78,6 +78,7 @@
    "UPLOADER": "Uploader",
    "WEBSCRIPT": "Webscript",
    "TAG": "Tag",
+    "PIPES": "Tubi",
    "TRASHCAN": "Cestino",
    "SOCIAL": "Social",
    "SETTINGS": "Impostazioni",
@@ -95,7 +96,8 @@
    "PEOPLE_GROUPS_CLOUD": "Cloud persone/gruppi",
    "PEOPLE_CLOUD": "Componente Cloud persone",
    "GROUPS_CLOUD": "Componente Cloud gruppi",
-    "CONFIRM-DIALOG": "Finestra di conferma"
+    "CONFIRM-DIALOG": "Finestra di conferma",
+    "COMMUNITY": "Community"
  },
  "TRASHCAN": {
    "ACTIONS": {
@@ -78,6 +78,7 @@
    "UPLOADER": "アップローダー",
    "WEBSCRIPT": "Webscript",
    "TAG": "タグ",
+    "PIPES": "パイプ",
    "TRASHCAN": "ごみ箱",
    "SOCIAL": "ソーシャル",
    "SETTINGS": "設定",
@@ -95,7 +96,8 @@
    "PEOPLE_GROUPS_CLOUD": "メンバー/グループのクラウド",
    "PEOPLE_CLOUD": "メンバーのクラウドコンポーネント",
    "GROUPS_CLOUD": "グループのクラウドコンポーネント",
-    "CONFIRM-DIALOG": "確認ダイアログ"
+    "CONFIRM-DIALOG": "確認ダイアログ",
+    "COMMUNITY": "Community"
  },
  "TRASHCAN": {
    "ACTIONS": {
@@ -78,6 +78,7 @@
    "UPLOADER": "Opplaster",
    "WEBSCRIPT": "Webscript",
    "TAG": "Tagg",
+    "PIPES": "Rør",
    "TRASHCAN": "Søppelkurv",
    "SOCIAL": "Sosial",
    "SETTINGS": "Innstillinger",
@@ -95,7 +96,8 @@
    "PEOPLE_GROUPS_CLOUD": "Person-/gruppesky",
    "PEOPLE_CLOUD": "Personsky-komponent",
    "GROUPS_CLOUD": "Gruppesky-kompontent",
-    "CONFIRM-DIALOG": "Bekreftelsesdialog"
+    "CONFIRM-DIALOG": "Bekreftelsesdialog",
+    "COMMUNITY": "Community"
  },
  "TRASHCAN": {
    "ACTIONS": {
@@ -78,6 +78,7 @@
    "UPLOADER": "Uploader",
    "WEBSCRIPT": "Webscript",
    "TAG": "Tag",
+    "PIPES": "Pipes",
    "TRASHCAN": "Prullenbak",
    "SOCIAL": "Sociaal",
    "SETTINGS": "Instellingen",
@@ -95,7 +96,8 @@
    "PEOPLE_GROUPS_CLOUD": "Personen-/groepencloud",
    "PEOPLE_CLOUD": "Component Personencloud",
    "GROUPS_CLOUD": "Component Groepencloud",
-    "CONFIRM-DIALOG": "Bevestigingsdialoogvenster"
+    "CONFIRM-DIALOG": "Bevestigingsdialoogvenster",
+    "COMMUNITY": "Community"
  },
  "TRASHCAN": {
    "ACTIONS": {
@@ -78,6 +78,7 @@
    "UPLOADER": "Program do przesyłania",
    "WEBSCRIPT": "Skrypt internetowy",
    "TAG": "Znacznik",
+    "PIPES": "Rury",
    "TRASHCAN": "Kosz",
    "SOCIAL": "Społecznościowy",
    "SETTINGS": "Ustawienia",
@@ -95,7 +96,8 @@
    "PEOPLE_GROUPS_CLOUD": "Chmura dla osób/grup",
    "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": {
@@ -78,6 +78,7 @@
    "UPLOADER": "Carregador",
    "WEBSCRIPT": "Webscript",
    "TAG": "Marca",
+    "PIPES": "Tubos",
    "TRASHCAN": "Lixeira",
    "SOCIAL": "Social",
    "SETTINGS": "Configurações",
@@ -95,7 +96,8 @@
    "PEOPLE_GROUPS_CLOUD": "Nuvem de Pessoas/Grupo",
    "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": "Community"
  },
  "TRASHCAN": {
    "ACTIONS": {
@@ -78,6 +78,7 @@
    "UPLOADER": "Загрузчик",
    "WEBSCRIPT": "Webscript",
    "TAG": "Метка",
+    "PIPES": "Каналы",
    "TRASHCAN": "Корзина",
    "SOCIAL": "Социальный",
    "SETTINGS": "Параметры",
@@ -95,7 +96,8 @@
    "PEOPLE_GROUPS_CLOUD": "Облако пользователей/групп",
    "PEOPLE_CLOUD": "Компонент облака «Пользователи»",
    "GROUPS_CLOUD": "Компонент облака «Группы»",
-    "CONFIRM-DIALOG": "Диалоговое окно подтверждения"
+    "CONFIRM-DIALOG": "Диалоговое окно подтверждения",
+    "COMMUNITY": "Community"
  },
  "TRASHCAN": {
    "ACTIONS": {
@@ -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",
@@ -95,7 +96,8 @@
    "PEOPLE_GROUPS_CLOUD": "Personer/grupp moln",
    "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 +111,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 +179,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 +210,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 +226,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",
@@ -78,6 +78,7 @@
    "UPLOADER": "上传程序",
    "WEBSCRIPT": "Webscript",
    "TAG": "标签",
+    "PIPES": "管道",
    "TRASHCAN": "垃圾桶",
    "SOCIAL": "社交",
    "SETTINGS": "设置",
@@ -95,7 +96,8 @@
    "PEOPLE_GROUPS_CLOUD": "人员/一组云",
    "PEOPLE_CLOUD": "人员云组件",
    "GROUPS_CLOUD": "组云组件",
-    "CONFIRM-DIALOG": "确认对话"
+    "CONFIRM-DIALOG": "确认对话",
+    "COMMUNITY": "Community"
  },
  "TRASHCAN": {
    "ACTIONS": {
@@ -12,17 +12,6 @@ router-outlet[name='overlay'] + * {
    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);
 }
@@ -21,13 +21,12 @@ import { FormsModule } 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 { 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';
@@ -80,23 +79,55 @@ 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 {
+    UserPreferenceCloudService,
+    PROCESS_FILTERS_SERVICE_TOKEN,
+    TASK_FILTERS_SERVICE_TOKEN
+} 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 +143,11 @@ import { CommunityTaskDetailsCloudDemoComponent } from './components/cloud/commu
        ExtensionsModule.forRoot(),
        ThemePickerModule,
        ChartsModule,
+        AppCloudSharedModule,
        MonacoEditorModule.forRoot()
    ],
    declarations: [
        AppComponent,
-        LoginComponent,
        LogoutComponent,
        AppLayoutComponent,
        HomeComponent,
@@ -156,25 +187,17 @@ import { CommunityTaskDetailsCloudDemoComponent } from './components/cloud/commu
        CloudFiltersDemoComponent,
        TemplateDemoComponent,
        PeopleGroupCloudDemoComponent,
-        CloudSettingsComponent,
-        NestedMenuPositionDirective,
        ConfirmDialogExampleComponent,
        FormCloudDemoComponent,
-        ConfirmDialogExampleComponent,
-        CommunityCloudComponent,
-        CommunityTasksCloudDemoComponent,
-        CommunityCloudFiltersDemoComponent,
-        CommunityProcessesCloudDemoComponent,
-        CommunityStartProcessCloudDemoComponent,
-        CommunityStartTaskCloudDemoComponent,
-        CommunityProcessDetailsCloudDemoComponent,
-        CommunityTaskDetailsCloudDemoComponent
+        ConfirmDialogExampleComponent
    ],
    providers: [
        {
            provide: HTTP_INTERCEPTORS, useClass:
            AuthBearerInterceptor, multi: true
        },
+        { provide: PROCESS_FILTERS_SERVICE_TOKEN, useClass: UserPreferenceCloudService },
+        { provide: TASK_FILTERS_SERVICE_TOKEN, useClass: UserPreferenceCloudService },
        { provide: AppConfigService, useClass: DebugAppConfigService }, // not use this service in production
        {
            provide: TRANSLATION_PROVIDER,
@@ -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,8 @@ 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';
-
 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 +67,8 @@ export const appRoutes: Routes = [
    {
        path: 'files/:nodeId/view',
        component: AppComponent,
-        canActivate: [ AuthGuardEcm ],
-        canActivateChild: [ AuthGuardEcm ],
+        canActivate: [AuthGuardEcm],
+        canActivateChild: [AuthGuardEcm],
        outlet: 'overlay',
        children: [
            {
@@ -88,7 +85,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 +118,15 @@ export const appRoutes: Routes = [
                    }
                ]
            },
+            {
+                path: 'pipes',
+                children: [
+                    {
+                        path: '',
+                        loadChildren: 'app/components/pipes/pipes.module#AppPipesModule'
+                    }
+                ]
+            },
            {
                path: 'card-view',
                children: [
@@ -159,7 +165,7 @@ export const appRoutes: Routes = [
            {
                path: 'cloud',
                canActivate: [AuthGuardSsoRoleService],
-                data: { roles: ['ACTIVITI_USER'], redirectUrl: '/error/403'},
+                data: { roles: ['ACTIVITI_USER'], redirectUrl: '/error/403' },

                children: [
                    {
@@ -172,38 +178,12 @@ export const appRoutes: Routes = [
                    },
                    {
                        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: '',
@@ -1 +1,5 @@
-<adf-about></adf-about>
+<adf-about
+    [githubUrlCommitAlpha]="githubUrlCommitAlpha"
+    [version]="version"
+    [dependencies]="dependencies">
+</adf-about>
@@ -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,10 @@ import { Component } from '@angular/core';
 })
 export class AboutComponent {

+    githubUrlCommitAlpha = `https://github.com/Alfresco/${name}/commits/${commit}`;
+    version = version;
+    dependencies = dependencies;
+
    constructor() {

    }
@@ -1,5 +1,5 @@
-<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">
@@ -14,7 +14,7 @@

                <div class="adf-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>
@@ -25,6 +25,8 @@
                    <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>
@@ -32,33 +34,31 @@
    <adf-sidenav-layout-navigation>
        <ng-template let-isMenuMinimized="isMenuMinimized">
            <mat-nav-list class="adf-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="adf-sidenav-link">
+                            <mat-icon matListIcon>{{link.icon}}</mat-icon>
+                            <span matLine *ngIf="!isMenuMinimized()">{{link.title | translate }}</span>
+                            <mat-icon class="adf-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="adf-sidenav-link--active" [routerLinkActiveOptions]="{ exact: true }"
+                            [attr.data-automation-id]="link.title | translate" class="adf-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="adf-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="adf-sidenav-link"
            [attr.data-automation-id]="link.title | translate"
-            routerLinkActive="active"
+            routerLinkActive="adf-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>
@@ -1,9 +1,6 @@
@mixin adf-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,45 +14,22 @@
        }
    }

-    .adf-app-layout-toolbar {
-        z-index: 998;
-        position: relative;
-        overflow: visible !important;
-    }
-
    .adf-app-layout {
        display: flex;
        flex: 1;
        min-width: $minimumAppWidth;
        height: 100%;

-        .adf-nav-container {
-            display: block;
-            min-width: $minimumAppWidth;
-            height: 100%;
-        }
-
-        .adf-sidenav-linklist {
-            height: 100%;
-            overflow: auto;
-            padding-bottom: 8px;
-            box-sizing: border-box;
+        .adf-sidenav-link--active {
+            color: mat-color($primary);
        }

        .adf-sidenav-link {
-            &.adf-active {
-                color: mat-color($primary);
-            }
-
-            .adf-sidenav-menu-icon {
-                margin-right: 20px;
-                font-size: 14px;
-            }
-
-            .adf-sidenav-menu-label {
+            .mat-list-text {
                font-size: 14px;
                white-space: nowrap;
                min-width: 120px;
+                padding: 0 10px;
            }
        }

@@ -63,34 +37,9 @@
            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) {
@@ -113,4 +62,8 @@
            flex: auto;
        }
    }
+
+    [dir='rtl'] .adf-sidenav-link__expand-button {
+        transform: rotateY(180deg);
+    }
 }
@@ -15,9 +15,11 @@
 * 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',
@@ -27,8 +29,8 @@ import { HeaderDataService } from '../header-data/header-data.service';
    },
    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' },
@@ -72,6 +74,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 +110,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) {
@@ -1,7 +1,7 @@
 <div class="main-content">

    <mat-tab-group>
-        <mat-tab label="Form">
+        <mat-tab label="Form" class="form-cloud-render">
            <div class="adf-form-container">
                <adf-cloud-form
                    [showRefreshButton]="false"
@@ -17,7 +17,7 @@
                    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"
@@ -16,10 +16,9 @@
 */

 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { FormFieldModel, NotificationService, FormRenderingService } from '@alfresco/adf-core';
+import { FormFieldModel, NotificationService, FormRenderingService, CoreAutomationService } from '@alfresco/adf-core';
 import { FormCloud, FormCloudService, UploadCloudWidgetComponent } from '@alfresco/adf-process-services-cloud';
 import { Subscription } from 'rxjs';
-import { formDefinition } from './demo-form';

@Component({
    templateUrl: 'cloud-form-demo.component.html',
@@ -45,7 +44,8 @@ export class FormCloudDemoComponent implements OnInit, OnDestroy {
    constructor(
        private notificationService: NotificationService,
        private formRenderingService: FormRenderingService,
-        private formService: FormCloudService) {
+        private formService: FormCloudService,
+        private automationService: CoreAutomationService) {
        this.formRenderingService.setComponentTypeResolver('upload', () => UploadCloudWidgetComponent, true);
    }

@@ -54,7 +54,7 @@ export class FormCloudDemoComponent implements OnInit, OnDestroy {
    }

    ngOnInit() {
-        this.formConfig = formDefinition;
+        this.formConfig = JSON.stringify(this.automationService.forms.getFormCloudDefinition());
        this.parseForm();
    }

@@ -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"
-          }
-        ]
-      }
-    }}
-  `;
@@ -1,5 +0,0 @@
-<adf-viewer 
-    [showViewer]="true" 
-    [blobFile]="content" 
-    [displayName]="name">
-</adf-viewer>
@@ -8,13 +8,6 @@
    margin: 10px 0;
 }

-.adf-full-content-toolbar {
-    .adf-toolbar-title {
-        display: flex;
-        width: 100%;
-
-        .adf-breadcrumb {
-            width: 0;
-        }
-    }
+.adf-full-content-toolbar .adf-toolbar-title .adf-breadcrumb {
+    width: 0;
 }
@@ -4,7 +4,9 @@
    <mat-card class="adf-card-view">
        <adf-card-view
            [properties]="properties"
-            [editable]="true">
+            [editable]="true"
+            [displayClearAction]="showClearDateAction"
+            [displayNoneOption]="showNoneOption">
        </adf-card-view>
    </mat-card>

@@ -22,6 +24,20 @@
        (change)="toggleEditable()"
        [checked]="isEditable">
        Editable
+    </mat-slide-toggle><br>
+    <mat-slide-toggle
+        id="adf-toggle-clear-date"
+        [color]="'primary'"
+        (change)="toggleClearDate()"
+        [checked]="showClearDateAction">
+        Show clear date icon
+    </mat-slide-toggle><br>
+    <mat-slide-toggle
+        id="adf-toggle-none-option"
+        [color]="'primary'"
+        (change)="toggleNoneOption()"
+        [checked]="showNoneOption">
+        Show none option
    </mat-slide-toggle>
 </p>

@@ -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,30 @@ import {
    CardViewSelectItemModel,
    CardViewUpdateService,
    CardViewMapItemModel,
-    UpdateNotification
+    UpdateNotification,
+    DecimalNumberPipe
 } 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 +60,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() {
@@ -72,7 +86,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 +94,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({
@@ -102,7 +116,8 @@ export class CardViewComponent implements OnInit {
                value: 9.9,
                key: 'float',
                default: 0.0,
-                editable: this.isEditable
+                editable: this.isEditable,
+                pipes: [{ pipe: this.decimalNumberPipe}]
            }),
            new CardViewKeyValuePairsItemModel({
                label: 'CardView Key-Value Pairs Item',
@@ -153,6 +168,14 @@ export class CardViewComponent implements OnInit {
        this.createCard();
    }

+    toggleClearDate() {
+        this.showClearDateAction = !this.showClearDateAction;
+    }
+
+    toggleNoneOption() {
+        this.showNoneOption = !this.showNoneOption;
+    }
+
    reset() {
        this.isEditable = true;
        this.createCard();
@@ -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;
+            }
+        });
+    }
 }
@@ -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,13 +63,13 @@ export class CloudFiltersDemoComponent implements OnInit {
    }

    onTaskFilterSelected(filter) {
-        this.cloudLayoutService.setCurrentTaskFilterParam({id: filter.id});
+        this.cloudLayoutService.setCurrentTaskFilterParam({id: filter && filter.id ? filter.id : ''});
        const currentFilter = Object.assign({}, filter);
        this.router.navigate([`/cloud/${this.appName}/tasks/`], { queryParams: currentFilter });
    }

    onProcessFilterSelected(filter) {
-        this.cloudLayoutService.setCurrentProcessFilterParam({id: filter.id});
+        this.cloudLayoutService.setCurrentProcessFilterParam({id: filter && filter.id ? filter.id : ''});
        const currentFilter = Object.assign({}, filter);
        this.router.navigate([`/cloud/${this.appName}/processes/`], { queryParams: currentFilter });
    }
@@ -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>
@@ -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();
-    }
-
 }
@@ -29,7 +29,7 @@ import { CloudLayoutService } from '../services/cloud-layout.service';
        height: 100% !important;
      }
      `],
-      encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None
 })
 export class CommunityCloudComponent  {

@@ -45,8 +45,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;
@@ -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';

@@ -56,6 +58,8 @@ export class CommunityProcessesCloudDemoComponent implements OnInit {

    editedFilter: ProcessFilterCloudModel;

+    private onDestroy$ = new Subject<boolean>();
+
    constructor(
        private route: ActivatedRoute,
        private router: Router,
@@ -63,7 +67,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,6 +78,7 @@ export class CommunityProcessesCloudDemoComponent implements OnInit {

    ngOnInit() {
        this.isFilterLoaded = false;
+
        this.route.parent.params.subscribe((params) => {
            this.appName = params.appName;
        });
@@ -85,14 +93,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 +120,7 @@ export class CommunityProcessesCloudDemoComponent implements OnInit {
        }
    }

-    onChangePageSize(event) {
+    onChangePageSize(event: Pagination) {
        this.userPreference.paginationSize = event.maxItems;
    }

@@ -111,13 +128,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) {
@@ -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}`]);
        }
@@ -5,7 +5,7 @@
        display: flex;
    }

-    &-task-tiitle {
+    &-task-title {
        margin-left:15px;
    }

@@ -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 {}
@@ -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;
-            });
-        }
-    }
-
-}
@@ -27,7 +27,7 @@
                <input matInput (input)="setPeopleAppName($event)" data-automation-id="adf-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>
+                <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>
            <mat-checkbox class="adf-preselect-value" (change)="onChangePeopleValidation($event)">{{
@@ -16,8 +16,9 @@
 */

 import { Component, ViewEncapsulation } from '@angular/core';
-import { PeopleCloudComponent, GroupCloudComponent, GroupModel } from '@alfresco/adf-process-services-cloud';
+import { PeopleCloudComponent, GroupCloudComponent } from '@alfresco/adf-process-services-cloud';
 import { MatRadioChange, MatCheckboxChange } from '@angular/material';
+import { IdentityGroupModel } from '@alfresco/adf-core';

@Component({
    selector: 'app-people-groups-cloud',
@@ -39,8 +40,8 @@ export class PeopleGroupCloudDemoComponent {
    peoplePreselectValidation: Boolean = false;

    groupMode: string = GroupCloudComponent.MODE_SINGLE;
-    preSelectGroup: GroupModel[] = [];
-    selectedGroupList: GroupModel[] = [];
+    preSelectGroup: IdentityGroupModel[] = [];
+    selectedGroupList: IdentityGroupModel[] = [];
    groupRoles: string[];
    groupAppName: string;
    groupFilterMode: string = this.DEFAULT_FILTER_MODE;
@@ -144,11 +145,11 @@ export class PeopleGroupCloudDemoComponent {
        return this.groupMode === GroupCloudComponent.MODE_MULTIPLE;
    }

-    onRemoveGroup(group: GroupModel) {
+    onRemoveGroup(group: IdentityGroupModel) {
        this.preSelectGroup = this.preSelectGroup.filter((value: any) => value.id !== group.id);
    }

-    onSelectGroup(group: GroupModel) {
+    onSelectGroup(group: IdentityGroupModel) {
        if (this.groupMode === GroupCloudComponent.MODE_MULTIPLE) {
            this.preSelectGroup.push(group);
        }
@@ -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>
@@ -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,14 +24,17 @@ 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';
    static PROCESS_FILTER_PROPERTY_KEYS = 'adf-edit-process-filter';
@@ -52,11 +55,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 +92,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 +123,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,7 +131,12 @@ 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) {
@@ -124,4 +150,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};
+    }
 }
@@ -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 disable?: 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);
    }
 }
@@ -0,0 +1,71 @@
+<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]="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="disable">
+                    {{ '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>
@@ -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,16 +44,34 @@ 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),
+        disable: 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) {
        if (settings) {
            this.multiselect = settings.multiselect;
+            this.actionMenu = this.actionMenu;
+            this.contextMenu = this.contextMenu;
+            this.actions = this.actions;
            this.testingMode = settings.testingMode;
            this.selectionMode = settings.selectionMode;
            this.taskDetailsRedirection = settings.taskDetailsRedirection;
@@ -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,
@@ -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 {}
@@ -1,6 +1,8 @@
 <adf-cloud-start-process
    [appName]="appName"
    [name]="processName"
+    [values]="formValues"
+    [variables]="variables"
    (error)="openSnackMessage($event)"
    (success)="onStartProcessSuccess()"
    (cancel)="onCancelStartProcess()">
@@ -28,6 +28,8 @@ export class StartProcessCloudDemoComponent implements OnInit {

    appName;
    processName: string;
+    formValues: string;
+    variables: any;

    constructor(private appConfig: AppConfigService,
                private cloudLayoutService: CloudLayoutService,
@@ -41,7 +43,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 +59,6 @@ export class StartProcessCloudDemoComponent implements OnInit {
    }

    openSnackMessage(event: any) {
-        this.notificationService.openSnackMessage(event.response.body.message);
+        this.notificationService.openSnackMessage(event.response.body.entry.message);
    }
 }
@@ -7,13 +7,13 @@
                [appName]="appName"
                [taskId]="taskId"
                (cancelClick)="goBack()"
-                (taskClaimed)="onClaimTask()"
                (taskCompleted)="onTaskCompleted()"
-                (taskUnclaimed)="onUnclaimTask()"
+                (taskClaimed)="onTaskClaimed()"
+                (taskUnclaimed)="onTaskUnclaimed()"
                (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>
@@ -5,7 +5,7 @@
        display: flex;
    }

-    &-task-tiitle {
+    &-task-title {
        margin-left:15px;
    }

@@ -15,9 +15,10 @@
 * 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';

@Component({
    templateUrl: './task-details-cloud-demo.component.html',
@@ -25,6 +26,9 @@ import { NotificationService } from '@alfresco/adf-core';
 })
 export class TaskDetailsCloudDemoComponent {

+    @ViewChild('taskHeader')
+    taskHeader: TaskHeaderCloudComponent;
+
    taskId: string;
    appName: string;

@@ -50,22 +54,18 @@ export class TaskDetailsCloudDemoComponent {
        this.router.navigate([`/cloud/${this.appName}/`]);
    }

-    onCompletedTask() {
-        this.goBack();
-    }
-
-    onUnclaimTask() {
-        this.goBack();
-    }
-
-    onClaimTask() {
-        this.goBack();
-    }
-
    onTaskCompleted() {
        this.goBack();
    }

+    onTaskClaimed() {
+        this.taskHeader.ngOnInit();
+    }
+
+    onTaskUnclaimed() {
+        this.taskHeader.ngOnInit();
+    }
+
    onFormContentClicked(resourceId) {
        this.router.navigate([`/cloud/${this.appName}/task-details/${this.taskId}/files/${resourceId.nodeId}/view`]);
    }
@@ -15,17 +15,19 @@
 * limitations under the License.
 */

-import { Component, ViewChild, OnInit } from '@angular/core';
+import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core';
 import { TaskListCloudComponent, TaskListCloudSortingModel, TaskFilterCloudModel } 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';

@Component({
    templateUrl: 'tasks-cloud-demo.component.html',
    styleUrls: ['tasks-cloud-demo.component.scss']
 })
-export class TasksCloudDemoComponent implements OnInit {
+export class TasksCloudDemoComponent implements OnInit, OnDestroy {

    public static ACTION_SAVE_AS = 'saveAs';
    static TASK_FILTER_PROPERTY_KEYS = 'adf-edit-task-filter';
@@ -50,6 +52,8 @@ export class TasksCloudDemoComponent implements OnInit {
    selectionMode: string;
    taskDetailsRedirection: boolean;

+    private onDestroy$ = new Subject<boolean>();
+
    constructor(
        private cloudLayoutService: CloudLayoutService,
        private route: ActivatedRoute,
@@ -75,8 +79,14 @@ export class TasksCloudDemoComponent 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));
+    }
+
+    ngOnDestroy() {
+        this.onDestroy$.next(true);
+        this.onDestroy$.complete();
    }

    setCurrentSettings(settings) {
@@ -1,77 +1,8 @@
 <div>
    <mat-nav-list class="adf-list-confgurations">
-        <mat-list-item  (click)="metadataConfClick()">
-            <a matLine id="adf-metadata-conf">Metadata App config editor</a>
-            <button mat-icon-button>
-                <mat-icon>info</mat-icon>
-            </button>
-        </mat-list-item>

-        <mat-list-item (click)="searchConfClick()">
-            <a matLine id="adf-search-conf" >Search App config editor</a>
-            <button mat-icon-button>
-                <mat-icon>info</mat-icon>
-            </button>
-        </mat-list-item>
-
-        <mat-list-item (click)="fileConfClick()">
-            <a matLine id="adf-file-conf" >Excluded config file</a>
-            <button mat-icon-button>
-                <mat-icon>info</mat-icon>
-            </button>
-        </mat-list-item>
-
-        <mat-list-item (click)="taskHeaderConfClick()">
-            <a matLine id="adf-task-conf" >Task header</a>
-            <button mat-icon-button>
-                <mat-icon>info</mat-icon>
-            </button>
-        </mat-list-item>
-
-        <mat-list-item (click)="processInstanceHeaderConfClick()">
-            <a matLine id="adf-process-conf" >Process instance Header</a>
-            <button mat-icon-button>
-                <mat-icon>info</mat-icon>
-            </button>
-        </mat-list-item>
-
-        <mat-list-item (click)="startProcessConfClick()">
-            <a matLine id="adf-start-process-conf">Start process</a>
-            <button mat-icon-button>
-                <mat-icon>info</mat-icon>
-            </button>
-        </mat-list-item>
-
-        <mat-list-item (click)="applicationListCloudConfClick()">
-            <a matLine id="adf-apps-cloud-conf">Application List Cloud</a>
-            <button mat-icon-button>
-                <mat-icon>info</mat-icon>
-            </button>
-        </mat-list-item>
-
-        <mat-list-item (click)="taskListCloudConfClick()">
-            <a matLine id="adf-task-list-cloud-conf">Task List Cloud</a>
-            <button mat-icon-button>
-                <mat-icon>info</mat-icon>
-            </button>
-        </mat-list-item>
-
-        <mat-list-item (click)="editProcessFilterConfClick()">
-            <a matLine id="adf-edit-process-filter-conf">Edit process filter</a>
-            <button mat-icon-button>
-                <mat-icon>info</mat-icon>
-            </button>
-        </mat-list-item>
-
-        <mat-list-item (click)="processListCloudConfClick()">
-            <a matLine id="adf-process-list-cloud-conf">Process List Cloud</a>
-            <button mat-icon-button>
-                <mat-icon>info</mat-icon>
-            </button>
-        </mat-list-item>
-
-        <mat-list-item (click)="editTaskFilterConfClick()">
-            <a matLine id="adf-edit-task-filter-conf">Edit task filter</a>
+        <mat-list-item  (click)="appConfigClick()">
+            <a matLine id="adf-app-conf">App Config Editor</a>
            <button mat-icon-button>
                <mat-icon>info</mat-icon>
            </button>
@@ -15,24 +15,28 @@
 * limitations under the License.
 */

-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import {
    AppConfigService,
    NotificationService,
    UserPreferencesService,
    UserPreferenceValues
 } from '@alfresco/adf-core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';

@Component({
    selector: 'app-config-editor',
    templateUrl: 'config-editor.component.html',
    styleUrls: ['./config-editor.component.scss']
 })
-export class ConfigEditorComponent {
+export class ConfigEditorComponent implements OnDestroy {
+
+    private onDestroy$ = new Subject<boolean>();

    editor: any;
    code: any;
-    field = 'content-metadata';
+    field: string;
    invalidJson = false;
    isUserPreference = false;
    userPreferenceProperty: string;
@@ -53,7 +57,7 @@ export class ConfigEditorComponent {
    constructor(private appConfig: AppConfigService,
                private userPreferencesService: UserPreferencesService,
                private notificationService: NotificationService) {
-        this.code = JSON.stringify(appConfig.config['content-metadata']);
+        this.code = JSON.stringify(appConfig.config);
    }

    onSave() {
@@ -61,7 +65,7 @@ export class ConfigEditorComponent {
            if (this.isUserPreference) {
                this.userPreferencesService.set(this.userPreferenceProperty, JSON.parse(this.editor.getValue()));
            } else {
-                this.appConfig.config[this.field] = JSON.parse(this.editor.getValue());
+                this.appConfig.config = JSON.parse(this.editor.getValue());
            }
        } catch (error) {
            this.invalidJson = true;
@@ -77,114 +81,57 @@ export class ConfigEditorComponent {
        this.code = '';
    }

-    fileConfClick() {
+    appConfigClick() {
        this.isUserPreference = false;
-        this.code = JSON.stringify(this.appConfig.config['files']);
-        this.field = 'files';
+        this.code = JSON.stringify(this.appConfig.config);
        this.indentCode();
    }

+    ngOnDestroy() {
+        this.onDestroy$.next(true);
+        this.onDestroy$.complete();
+    }
+
    textOrientationClick() {
        this.isUserPreference = true;
        this.userPreferenceProperty = 'textOrientation';

-        this.userPreferencesService.select(this.userPreferenceProperty).subscribe((textOrientation: number) => {
-            this.code = JSON.stringify(textOrientation);
-            this.field = 'textOrientation';
-            this.indentCode();
-        });
+        this.userPreferencesService
+            .select(this.userPreferenceProperty)
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe((textOrientation: number) => {
+                this.code = JSON.stringify(textOrientation);
+                this.field = 'textOrientation';
+                this.indentCode();
+            });

        this.indentCode();
    }

-    searchConfClick() {
-        this.isUserPreference = false;
-        this.code = JSON.stringify(this.appConfig.config['search']);
-        this.field = 'search';
-        this.indentCode();
-    }
-
-    metadataConfClick() {
-        this.isUserPreference = false;
-        this.code = JSON.stringify(this.appConfig.config['content-metadata']);
-        this.field = 'content-metadata';
-        this.indentCode();
-    }
-
-    taskHeaderConfClick() {
-        this.isUserPreference = false;
-        this.code = JSON.stringify(this.appConfig.config['adf-task-header']);
-        this.field = 'adf-task-header';
-        this.indentCode();
-    }
-
-    processInstanceHeaderConfClick() {
-        this.isUserPreference = false;
-        this.code = JSON.stringify(this.appConfig.config['adf-process-instance-header']);
-        this.field = 'adf-process-instance-header';
-        this.indentCode();
-    }
-
-    startProcessConfClick() {
-        this.isUserPreference = false;
-        this.code = JSON.stringify(this.appConfig.config['adf-start-process']);
-        this.field = 'adf-start-process';
-        this.indentCode();
-    }
-
-    taskListCloudConfClick() {
-        this.isUserPreference = false;
-        this.code = JSON.stringify(this.appConfig.config['adf-cloud-task-list']);
-        this.field = 'adf-cloud-task-list';
-        this.indentCode();
-    }
-
-    editProcessFilterConfClick() {
-        this.isUserPreference = false;
-        this.code = JSON.stringify(this.appConfig.config['adf-edit-process-filter']);
-        this.field = 'adf-edit-process-filter';
-        this.indentCode();
-    }
-
-    editTaskFilterConfClick() {
-        this.isUserPreference = false;
-        this.code = JSON.stringify(this.appConfig.config['adf-edit-task-filter']);
-        this.field = 'adf-edit-task-filter';
-        this.indentCode();
-    }
-
-    processListCloudConfClick() {
-        this.isUserPreference = false;
-        this.code = JSON.stringify(this.appConfig.config['adf-cloud-process-list']);
-        this.field = 'adf-cloud-process-list';
-        this.indentCode();
-    }
-
    infinitePaginationConfClick() {
        this.isUserPreference = true;
        this.userPreferenceProperty = UserPreferenceValues.PaginationSize;
-        this.userPreferencesService.select(this.userPreferenceProperty).subscribe((pageSize: number) => {
-            this.code = JSON.stringify(pageSize);
-            this.field = 'adf-infinite-pagination';
-            this.indentCode();
-        });
+        this.userPreferencesService
+            .select(this.userPreferenceProperty)
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe((pageSize: number) => {
+                this.code = JSON.stringify(pageSize);
+                this.field = 'adf-infinite-pagination';
+                this.indentCode();
+            });
    }

    supportedPageSizesClick() {
        this.isUserPreference = true;
        this.userPreferenceProperty = UserPreferenceValues.SupportedPageSizes;
-        this.userPreferencesService.select(this.userPreferenceProperty).subscribe((supportedPageSizes: number) => {
-            this.code = JSON.stringify(supportedPageSizes);
-            this.field = 'adf-supported-page-size';
-            this.indentCode();
-        });
-    }
-
-    applicationListCloudConfClick() {
-        this.isUserPreference = false;
-        this.code = JSON.stringify(this.appConfig.config['alfresco-deployed-apps']);
-        this.field = 'alfresco-deployed-apps';
-        this.indentCode();
+        this.userPreferencesService
+            .select(this.userPreferenceProperty)
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe((supportedPageSizes: number) => {
+                this.code = JSON.stringify(supportedPageSizes);
+                this.field = 'adf-supported-page-size';
+                this.indentCode();
+            });
    }

    indentCode() {
@@ -18,7 +18,7 @@
 import { Component, ViewEncapsulation } from '@angular/core';
 import { SitePaging, SiteEntry, MinimalNodeEntryEntity } from '@alfresco/js-api';
 import { ContentNodeDialogService, ShareDataRow, RowFilter } from '@alfresco/adf-content-services';
-import { DataRow, DataColumn, ThumbnailService } from '@alfresco/adf-core';
+import { ThumbnailService } from '@alfresco/adf-core';

@Component({
    templateUrl: './content-node-selector.component.html',
@@ -95,7 +95,7 @@ export class ContentNodeSelectorComponent {
        return showNode;
    }

-    customImageResolverExample(row: DataRow, col: DataColumn) {
+    customImageResolverExample() {
        return this.thumbnailService.getMimeTypeIcon('video/quicktime');
    }

@@ -55,7 +55,7 @@ export class ExtensionPresetsComponent implements OnInit, OnDestroy {
        this.onDestroy$.complete();
    }

-    trackById(index: number, obj: { id: string }) {
+    trackById(_: number, obj: { id: string }) {
        return obj.id;
    }
 }
@@ -25,9 +25,10 @@ import {
    OnDestroy
 } from '@angular/core';
 import { NodeEntry } from '@alfresco/js-api';
-import { BehaviorSubject, Subscription } from 'rxjs';
+import { BehaviorSubject, Subject } from 'rxjs';
 import { AlfrescoApiService } from '@alfresco/adf-core';
 import { Node } from '@alfresco/js-api';
+import { takeUntil } from 'rxjs/operators';

@Component({
    selector: 'app-name-column',
@@ -47,24 +48,26 @@ export class NameColumnComponent implements OnInit, OnDestroy {
    displayText$ = new BehaviorSubject<string>('');
    node: NodeEntry;

-    private sub: Subscription;
+    private onDestroy$ = new Subject<boolean>();

    constructor(private element: ElementRef, private alfrescoApiService: AlfrescoApiService) {}

    ngOnInit() {
        this.updateValue();

-        this.sub = this.alfrescoApiService.nodeUpdated.subscribe((node: Node) => {
-            const row = this.context.row;
-            if (row) {
-                const { entry } = row.node;
+        this.alfrescoApiService.nodeUpdated
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe((node: Node) => {
+                const row = this.context.row;
+                if (row) {
+                    const { entry } = row.node;

-                if (entry === node) {
-                    row.node = { entry };
-                    this.updateValue();
+                    if (entry === node) {
+                        row.node = { entry };
+                        this.updateValue();
+                    }
                }
-            }
-        });
+            });
    }

    protected updateValue() {
@@ -87,9 +90,7 @@ export class NameColumnComponent implements OnInit, OnDestroy {
    }

    ngOnDestroy() {
-        if (this.sub) {
-            this.sub.unsubscribe();
-            this.sub = null;
-        }
+        this.onDestroy$.next(true);
+        this.onDestroy$.complete();
    }
 }
@@ -1,13 +1,13 @@
-<ng-container *ngIf="nodeId">
+<ng-container *ngIf="nodeId || content">

    <ng-template let-node="node" #sidebarRightTemplate>
        <adf-info-drawer [title]="'APP.INFO_DRAWER.TITLE' | translate">

-            <adf-info-drawer-tab [label]="'APP.INFO_DRAWER.COMMENTS' | translate">
+            <adf-info-drawer-tab label="APP.INFO_DRAWER.COMMENTS">
                <adf-comments [nodeId]="nodeId" [readOnly]="!isCommentEnabled"></adf-comments>
            </adf-info-drawer-tab>

-            <adf-info-drawer-tab [label]="'APP.INFO_DRAWER.PROPERTIES' | translate">
+            <adf-info-drawer-tab label="APP.INFO_DRAWER.PROPERTIES">
                <adf-content-metadata-card *ngIf="isPreset" [node]="node"
                                           [multi]="multi"
                                           [preset]="customPreset"
@@ -104,7 +104,7 @@

            </adf-info-drawer-tab>

-            <adf-info-drawer-tab [label]="'APP.INFO_DRAWER.VERSIONS' | translate">
+            <adf-info-drawer-tab label="APP.INFO_DRAWER.VERSIONS">
                <mat-card>
                    <mat-card-content>
                        <adf-version-manager [node]="node"
@@ -120,7 +120,7 @@
    <ng-template let-node="node" #sidebarLeftTemplate>
        <adf-info-drawer [title]="'Viewer Options'">

-            <adf-info-drawer-tab [label]="'Settings'">
+            <adf-info-drawer-tab label="Settings">
                <p class="toggle">
                    <mat-slide-toggle
                        id="adf-switch-custoname"
@@ -284,14 +284,16 @@
                </p>

                <p class="toggle">
-                    <button mat-raised-button id="adf-switch-showrightsidebar" (click)="toggleShowRightSidebar()" color="primary">
-                      Toggle Right Sidebar
+                    <button mat-raised-button id="adf-switch-showrightsidebar" (click)="toggleShowRightSidebar()"
+                            color="primary">
+                        Toggle Right Sidebar
                    </button>
                </p>

                <p class="toggle">
-                    <button mat-raised-button id="adf-switch-showleftsidebar" (click)="hideLeftSidebar()" color="primary">
-                         Hide Left Sidebar
+                    <button mat-raised-button id="adf-switch-showleftsidebar" (click)="hideLeftSidebar()"
+                            color="primary">
+                        Hide Left Sidebar
                    </button>
                </p>

@@ -314,6 +316,7 @@
    </ng-template>

    <adf-viewer
+        [blobFile]="content"
        [nodeId]="nodeId"
        [showRightSidebar]="showRightSidebar"
        [showLeftSidebar]="showLeftSidebar"
@@ -325,6 +328,7 @@
        [allowRightSidebar]="allowRightSidebar"
        [allowLeftSidebar]="allowLeftSidebar"
        [urlFile]="urlFile"
+        (showViewerChange)="onViewerVisibilityChanged($event)"
        [sidebarLeftTemplate]="sidebarLeftTemplate"
        [sidebarRightTemplate]="sidebarRightTemplate">

@@ -16,9 +16,10 @@
 */

 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, PRIMARY_OUTLET } from '@angular/router';
 import { ContentService, AllowableOperationsEnum, PermissionsEnum, NodesApiService } from '@alfresco/adf-core';
 import { MatSnackBar } from '@angular/material';
+import { PreviewService } from '../../services/preview.service';

@Component({
    selector: 'app-file-view',
@@ -57,12 +58,15 @@ export class FileViewComponent implements OnInit {
    showTabWithIconAndLabel = false;
    desiredAspect: string = null;
    showAspect: string = null;
+    content: Blob;
+    name: string;

    constructor(private router: Router,
                private route: ActivatedRoute,
                private snackBar: MatSnackBar,
                private nodeApiService: NodesApiService,
-                private contentServices: ContentService) {
+                private contentServices: ContentService,
+                private preview: PreviewService) {
    }

    ngOnInit() {
@@ -81,10 +85,18 @@ export class FileViewComponent implements OnInit {
                    },
                    () => this.router.navigate(['/files', id])
                );
+            } else if (this.preview.content) {
+                this.content = this.preview.content;
+                this.displayName = this.preview.name;
            }
        });
    }

+    onViewerVisibilityChanged() {
+        const primaryUrl = this.router.parseUrl(this.router.url).root.children[PRIMARY_OUTLET].toString();
+        this.router.navigateByUrl(primaryUrl);
+    }
+
    onUploadError(errorMessage: string) {
        this.snackBar.open(errorMessage, '', { duration: 4000 });
    }
@@ -94,7 +94,9 @@
                        (click)="createLibrary()">
                        <mat-icon>library_add</mat-icon>
                    </button>
-                    <button mat-icon-button
+                    <button
+                        data-automation-id="edit-folder"
+                        mat-icon-button
                            [disabled]="!canEditFolder(documentList.selection)"
                            title="{{ 'DOCUMENT_LIST.TOOLBAR.EDIT_FOLDER' | translate }}"
                            (error)="openSnackMessage($event)"
@@ -119,7 +121,9 @@
                            matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.DELETE' | translate }}">
                        <mat-icon>delete</mat-icon>
                    </button>
-                    <button mat-icon-button
+                    <button
+                        data-automation-id="favorite"
+                        mat-icon-button
                            [disabled]="!documentList.selection.length"
                            #favorite="adfFavorite"
                            [adf-node-favorite]="documentList.selection"
@@ -250,12 +254,13 @@
                        key="$thumbnail"
                        type="image"
                        [sortable]="false"
-                        class="adf-image-table-cell "
+                        class="adf-image-table-cell"
                        [class.adf-cell-thumbnail]="thumbnails">
                    </data-column>
                    <data-column
                        *ngIf="showNameColumn && hyperlinkNavigation"
                        key="name"
+                        class="adf-ellipsis-cell"
                        title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
                        [formatTooltip]="getNodeNameTooltip">
                        <ng-template let-context>
@@ -282,7 +287,7 @@
                        key="content.sizeInBytes"
                        title="{{'DOCUMENT_LIST.COLUMNS.SIZE' | translate}}"
                        type="fileSize"
-                        class="adf-desktop-only">
+                        class="adf-desktop-only adf-ellipsis-cell">
                    </data-column>
                    <data-column
                        *ngIf="searchTerm"
@@ -313,7 +318,7 @@
                    <data-column
                        title="{{'DOCUMENT_LIST.COLUMNS.IS_LOCKED' | translate}}"
                        key="id"
-                        class="adf-desktop-only">
+                        class="adf-desktop-only adf-ellipsis-cell">
                        <ng-template let-entry="$implicit">
                            <button mat-icon-button [adf-node-lock]="entry.row.node.entry" class="adf-lock-button">
                                <mat-icon *ngIf="entry.row.getValue('isLocked')">lock</mat-icon>
@@ -447,13 +452,13 @@
            <div info-drawer-content>

                <adf-info-drawer [title]="'Details'" *ngIf="documentList.selection[0]">
-                    <adf-info-drawer-tab [label]="'Properties'">
+                    <adf-info-drawer-tab label="Properties">
                        <adf-content-metadata-card
                            [node]="documentList.selection[0].entry"
                            [displayEmpty]="displayEmptyMetadata">
                        </adf-content-metadata-card>
                    </adf-info-drawer-tab>
-                    <adf-info-drawer-tab [label]="'Versions'">
+                    <adf-info-drawer-tab label="Versions">
                        <ng-container *ngIf="hasOneFileSelected();else choose_document_template">
                            <ng-container *ngIf="userHasPermissionToManageVersions(); else no_permission_to_versions">
                                <adf-version-manager
@@ -1,7 +1,4 @@
@mixin adf-file-component-theme($theme) {
-    $foreground: map-get($theme, foreground);
-
-
    .adf-container {
        margin: 10px !important;
    }
@@ -24,26 +21,6 @@
        color: #d50000;
    }

-    .adf-not-overlay-viewer {
-        height: 900px;
-    }
-
-    adf-document-list ::ng-deep adf-datatable tr.adf-document-list__create {
-        background: green !important;
-    }
-
-    adf-document-list ::ng-deep adf-datatable tr.adf-document-list__disable {
-        background: red !important;
-    }
-
-    adf-document-list ::ng-deep .adf-datatable-selected > svg {
-        fill: #00bcd4 !important;
-        margin-top: -4px;
-        margin-left: -4px;
-        width: 32px;
-        height: 32px;
-    }
-
    .adf-document-list-container {
        min-height: 400px;

@@ -67,13 +44,6 @@
        padding: 16px;
    }

-    .adf-files-toolbar {
-        .adf-toolbar-title {
-            display: flex;
-            width: 100%;
-        }
-    }
-
    .adf-manage-versions-sidebar {
        width: 360px !important;

@@ -117,117 +87,4 @@
            justify-content: center;
        }
    }
-
-    @media all {
-        .adf-isLocked-column {
-            max-width: 30px !important;
-            margin-right: 5px;
-        }
-
-        .adf-folder-image-column {
-            max-width: 28px!important;
-        }
-    }
-
-    @media (max-width: 768px) {
-            .adf-createdOn-column {
-                display: none !important;
-            }
-    }
-
-    @media (max-width: 500px) {
-        .adf-datatable-list {
-            .adf {
-
-                &-display-name-column {
-                    max-width: 50% !important;
-                }
-                &-size-column {
-                    display: none !important;
-                }
-                &-createdBy-column {
-                    max-width: 45% !important;
-                }
-                &-nodeId-column {
-                    display: none !important;
-                }
-            }
-        }
-    }
-
-    @media (max-width: 600px) {
-        .adf-datatable-list {
-            .adf {
-                &-display-name-column {
-                    max-width: 35%;
-                }
-                &-size-column {
-                    max-width: 8%;
-                }
-                &-createdBy-column {
-                    max-width: 35%;
-                }
-                &-createdOn-column {
-                    max-width: 15%;
-                }
-                &-nodeId-column {
-                    max-width: 10%;
-                }
-                &-isLocked-column {
-                    display: none!important;
-                }
-                &-standard-breadcrumb {
-                    display: none !important;
-                }
-            }
-        }
-    }
-
-    @media (min-width: 601px) {
-        .adf-datatable-list {
-            .adf {
-
-                &-display-name-column {
-                    max-width: 30%;
-                }
-                &-size-column {
-                    max-width: 10%;
-                }
-                &-createdBy-column {
-                    max-width: 30%;
-                }
-                &-createdOn-column {
-                    max-width: 15%;
-                }
-                &-nodeId-column {
-                    max-width: 12%;
-                }
-                &-alternate-breadcrumb {
-                    display: none !important;
-                }
-            }
-        }
-    }
-
-    @media (min-width: 1400px) {
-        .adf-datatable-list {
-            .adf {
-                &-display-name-column {
-                    max-width: 40%;
-                }
-                &-size-column {
-                    max-width: 15%;
-                }
-                &-createdBy-column {
-                    max-width: 20%;
-                }
-                &-createdOn-column {
-                    max-width: 20%;
-                }
-                &-nodeId-column {
-                    max-width: 20%;
-                }
-            }
-        }
-    }
 }
@@ -27,8 +27,9 @@ import { MinimalNodeEntity, NodePaging, Pagination, MinimalNodeEntryEntity, Site
 import {
    AlfrescoApiService, AuthenticationService, AppConfigService, AppConfigValues, ContentService, TranslationService,
    FileUploadEvent, FolderCreatedEvent, LogService, NotificationService,
-    UploadService, DataColumn, DataRow, UserPreferencesService,
-    PaginationComponent, FormValues, DisplayMode, InfinitePaginationComponent, HighlightDirective
+    UploadService, DataRow, UserPreferencesService,
+    PaginationComponent, FormValues, DisplayMode, InfinitePaginationComponent, HighlightDirective,
+    SharedLinksApiService
 } from '@alfresco/adf-core';

 import {
@@ -36,16 +37,17 @@ import {
    PermissionStyleModel,
    UploadFilesEvent,
    ConfirmDialogComponent,
-    LibraryDialogComponent
+    LibraryDialogComponent,
+    ContentMetadataService
 } from '@alfresco/adf-content-services';

 import { SelectAppsDialogComponent } from '@alfresco/adf-process-services';

 import { VersionManagerDialogAdapterComponent } from './version-manager-dialog-adapter.component';
 import { MetadataDialogAdapterComponent } from './metadata-dialog-adapter.component';
-import { Subscription } from 'rxjs';
+import { Subject } from 'rxjs';
 import { PreviewService } from '../../services/preview.service';
-import { debounceTime } from 'rxjs/operators';
+import { debounceTime, takeUntil } from 'rxjs/operators';
 import { SearchEntry } from '@alfresco/js-api';

 const DEFAULT_FOLDER_TO_SHOW = '-my-';
@@ -57,6 +59,8 @@ const DEFAULT_FOLDER_TO_SHOW = '-my-';
 })
 export class FilesComponent implements OnInit, OnChanges, OnDestroy {

+    protected onDestroy$ = new Subject<boolean>();
+
    errorMessage: string = null;
    nodeId: any;
    showViewer = false;
@@ -197,9 +201,6 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
    displayEmptyMetadata = false;
    hyperlinkNavigation = false;

-    private onCreateFolder: Subscription;
-    private onEditFolder: Subscription;
-
    constructor(private notificationService: NotificationService,
                private uploadService: UploadService,
                private contentService: ContentService,
@@ -213,7 +214,9 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
                private preview: PreviewService,
                @Optional() private route: ActivatedRoute,
                public authenticationService: AuthenticationService,
-                public alfrescoApiService: AlfrescoApiService) {
+                public alfrescoApiService: AlfrescoApiService,
+                private contentMetadataService: ContentMetadataService,
+                private sharedLinksApiService: SharedLinksApiService) {
    }

    showFile(event) {
@@ -258,22 +261,45 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
            });
        }

-        // this.disableDragArea = false;
-        this.uploadService.fileUploadComplete.asObservable()
-            .pipe(debounceTime(300))
-            .subscribe((value) => this.onFileUploadEvent(value));
-        this.uploadService.fileUploadDeleted.subscribe((value) => this.onFileUploadEvent(value));
-        this.contentService.folderCreated.subscribe((value) => this.onFolderCreated(value));
-        this.onCreateFolder = this.contentService.folderCreate.subscribe((value) => this.onFolderAction(value));
-        this.onEditFolder = this.contentService.folderEdit.subscribe((value) => this.onFolderAction(value));
+        this.uploadService.fileUploadComplete
+            .pipe(
+                debounceTime(300),
+                takeUntil(this.onDestroy$)
+            )
+            .subscribe(value => this.onFileUploadEvent(value));

-        // this.permissionsStyle.push(new PermissionStyleModel('document-list__create', AllowableOperationsEnum.CREATE));
-        // this.permissionsStyle.push(new PermissionStyleModel('document-list__disable', AllowableOperationsEnum.NOT_CREATE, false, true));
+        this.uploadService.fileUploadDeleted
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(value => this.onFileUploadEvent(value));
+
+        this.contentService.folderCreated
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(value => this.onFolderCreated(value));
+
+        this.contentService.folderCreate
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(value => this.onFolderAction(value));
+
+        this.contentService.folderEdit
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(value => this.onFolderAction(value));
+
+        this.contentMetadataService.error
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe((err: { message: string }) => {
+                this.notificationService.showError(err.message);
+            });
+
+        this.sharedLinksApiService.error
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe((err: { message: string }) => {
+                this.notificationService.showError(err.message);
+            });
    }

    ngOnDestroy() {
-        this.onCreateFolder.unsubscribe();
-        this.onEditFolder.unsubscribe();
+        this.onDestroy$.next(true);
+        this.onDestroy$.complete();
    }

    ngOnChanges(changes: SimpleChanges) {
@@ -366,21 +392,21 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {

        switch (errorStatusCode) {
            case 403:
-                translatedErrorMessage = this.translateService.get('OPERATION.ERROR.PERMISSION');
+                translatedErrorMessage = this.translateService.instant('OPERATION.ERROR.PERMISSION');
                break;
            case 409:
-                translatedErrorMessage = this.translateService.get('OPERATION.ERROR.CONFLICT');
+                translatedErrorMessage = this.translateService.instant('OPERATION.ERROR.CONFLICT');
                break;
            default:
-                translatedErrorMessage = this.translateService.get('OPERATION.ERROR.UNKNOWN');
+                translatedErrorMessage = this.translateService.instant('OPERATION.ERROR.UNKNOWN');
        }

-        this.openSnackMessage(translatedErrorMessage.value);
+        this.openSnackMessage(translatedErrorMessage);
    }

    onContentActionSuccess(message) {
-        const translatedMessage: any = this.translateService.get(message);
-        this.openSnackMessage(translatedMessage.value);
+        const translatedMessage: any = this.translateService.instant(message);
+        this.openSnackMessage(translatedMessage);
        this.documentList.reload();
    }

@@ -407,8 +433,8 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
                width: '630px'
            });
        } else {
-            const translatedErrorMessage: any = this.translateService.get('OPERATION.ERROR.PERMISSION');
-            this.openSnackMessage(translatedErrorMessage.value);
+            const translatedErrorMessage: any = this.translateService.instant('OPERATION.ERROR.PERMISSION');
+            this.openSnackMessage(translatedErrorMessage);
        }
    }

@@ -425,8 +451,8 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
                width: '630px'
            });
        } else {
-            const translatedErrorMessage: any = this.translateService.get('OPERATION.ERROR.PERMISSION');
-            this.openSnackMessage(translatedErrorMessage.value);
+            const translatedErrorMessage: any = this.translateService.instant('OPERATION.ERROR.PERMISSION');
+            this.openSnackMessage(translatedErrorMessage);
        }
    }

@@ -448,7 +474,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
        return this.contentService.hasAllowableOperations(selection[0].entry, 'update');
    }

-    getNodeNameTooltip(row: DataRow, col: DataColumn): string {
+    getNodeNameTooltip(row: DataRow): string {
        if (row) {
            return row.getValue('name');
        }
@@ -575,7 +601,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
            width: '400px'
        });

-        dialogInstance.componentInstance.error.subscribe((message) => {
+        dialogInstance.componentInstance.error.subscribe((message: string) => {
            this.notificationService.openSnackMessage(message);
        });
    }
@@ -18,35 +18,43 @@
 import { Observable, of } from 'rxjs';
 import { Injectable } from '@angular/core';
 import {
-    AppConfigService, AlfrescoApiService, EcmModelService, LogService, FormService, FormOutcomeEvent
+    AlfrescoApiService,
+    EcmModelService,
+    LogService,
+    FormService,
+    FormOutcomeEvent
 } from '@alfresco/adf-core';
 import { Subject } from 'rxjs';

@Injectable()
 export class FakeFormService extends FormService {
-
    executeOutcome = new Subject<FormOutcomeEvent>();

-    constructor(appConfig: AppConfigService,
-                ecmModelService: EcmModelService,
-                apiService: AlfrescoApiService,
-                protected logService: LogService) {
+    constructor(
+        ecmModelService: EcmModelService,
+        apiService: AlfrescoApiService,
+        protected logService: LogService
+    ) {
        super(ecmModelService, apiService, logService);
    }

-    public getRestFieldValues(taskId: string, fieldId: string): Observable<any> {
+    public getRestFieldValues(
+        taskId: string,
+        fieldId: string
+    ): Observable<any> {
        if (fieldId === 'typeaheadField') {
            return of([
-                { 'id': '1', 'name': 'Leanne Graham' },
-                { 'id': '2', 'name': 'Ervin Howell' },
-                { 'id': '3', 'name': 'Clementine Bauch' },
-                { 'id': '4', 'name': 'Patricia Lebsack' },
-                { 'id': '5', 'name': 'Chelsey Dietrich' },
-                { 'id': '6', 'name': 'Mrs. Dennis Schulist' },
-                { 'id': '7', 'name': 'Kurtis Weissnat' },
-                { 'id': '8', 'name': 'Nicholas Runolfsdottir V' },
-                { 'id': '9', 'name': 'Glenna Reichert' },
-                { 'id': '10', 'name': 'Clementina DuBuque' }]);
+                { id: '1', name: 'Leanne Graham' },
+                { id: '2', name: 'Ervin Howell' },
+                { id: '3', name: 'Clementine Bauch' },
+                { id: '4', name: 'Patricia Lebsack' },
+                { id: '5', name: 'Chelsey Dietrich' },
+                { id: '6', name: 'Mrs. Dennis Schulist' },
+                { id: '7', name: 'Kurtis Weissnat' },
+                { id: '8', name: 'Nicholas Runolfsdottir V' },
+                { id: '9', name: 'Glenna Reichert' },
+                { id: '10', name: 'Clementina DuBuque' }
+            ]);
        } else {
            return super.getRestFieldValues(taskId, fieldId);
        }
@@ -15,16 +15,18 @@
 * limitations under the License.
 */

-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, OnDestroy, OnInit } from '@angular/core';
 import { FormModel, FormService, LogService, FormOutcomeEvent } from '@alfresco/adf-core';
 import { FormComponent } from '@alfresco/adf-process-services';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';

@Component({
    selector: 'app-form-list',
    templateUrl: 'form-list.component.html',
    styleUrls: ['form-list.component.scss']
 })
-export class FormListComponent {
+export class FormListComponent implements OnInit, OnDestroy {

    @ViewChild('adfForm')
    activitiForm: FormComponent;
@@ -38,13 +40,24 @@ export class FormListComponent {
    restoredData: any = {};

    showValidationIcon = false;
+    private onDestroy$ = new Subject<boolean>();

    constructor(private formService: FormService, private logService: LogService) {
+    }
+
+    ngOnInit() {
        // Prevent default outcome actions
-        formService.executeOutcome.subscribe((formOutcomeEvent: FormOutcomeEvent) => {
-            formOutcomeEvent.preventDefault();
-            this.logService.log(formOutcomeEvent.outcome);
-        });
+        this.formService.executeOutcome
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe((formOutcomeEvent: FormOutcomeEvent) => {
+                formOutcomeEvent.preventDefault();
+                this.logService.log(formOutcomeEvent.outcome);
+            });
+    }
+
+    ngOnDestroy() {
+        this.onDestroy$.next(true);
+        this.onDestroy$.complete();
    }

    onRowDblClick(event: CustomEvent) {
@@ -15,46 +15,60 @@
 * limitations under the License.
 */

-import { Component, Inject, OnInit } from '@angular/core';
-import { FormModel, FormService, FormOutcomeEvent } from '@alfresco/adf-core';
+import { Component, Inject, OnInit, OnDestroy } from '@angular/core';
+import {
+    FormModel,
+    FormService,
+    FormOutcomeEvent,
+    CoreAutomationService
+} from '@alfresco/adf-core';
 import { InMemoryFormService } from '../../services/in-memory-form.service';
-import { DemoForm } from './demo-form';
 import { FakeFormService } from './fake-form.service';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';

@Component({
    selector: 'app-form-loading',
    templateUrl: 'form-loading.component.html',
    styleUrls: ['form-loading.component.scss'],
-    providers: [
-        { provide: FormService, useClass: FakeFormService }
-    ]
+    providers: [{ provide: FormService, useClass: FakeFormService }]
 })
-export class FormLoadingComponent implements OnInit {
-
+export class FormLoadingComponent implements OnInit, OnDestroy {
    form: FormModel;
    typeaheadFieldValue = '';
    selectFieldValue = '';
    radioButtonFieldValue = '';
    formattedData = {};

-    constructor(@Inject(FormService) private formService: InMemoryFormService) {
-        formService.executeOutcome.subscribe((formOutcomeEvent: FormOutcomeEvent) => {
-            formOutcomeEvent.preventDefault();
-        });
-    }
+    private onDestroy$ = new Subject<boolean>();
+
+    constructor(
+        @Inject(FormService) private formService: InMemoryFormService,
+        private automationService: CoreAutomationService
+    ) {}

    ngOnInit() {
+        this.formService.executeOutcome
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe((formOutcomeEvent: FormOutcomeEvent) => {
+                formOutcomeEvent.preventDefault();
+            });
+
        this.formattedData = {};
-        const formDefinitionJSON: any = DemoForm.getSimpleFormDefinition();
+        const formDefinitionJSON: any = this.automationService.forms.getSimpleFormDefinition();
        this.form = this.formService.parseForm(formDefinitionJSON);
    }

+    ngOnDestroy() {
+        this.onDestroy$.next(true);
+        this.onDestroy$.complete();
+    }
+
    onLoadButtonClicked() {
        this.formattedData = {
-                               'typeaheadField': this.typeaheadFieldValue,
-                               'selectBox': this.selectFieldValue,
-                               'radioButton': this.radioButtonFieldValue
-                            };
+            typeaheadField: this.typeaheadFieldValue,
+            selectBox: this.selectFieldValue,
+            radioButton: this.radioButtonFieldValue
+        };
    }
-
 }
@@ -16,10 +16,10 @@
 */

 import { Component, Inject, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { FormModel, FormFieldModel, FormService, FormOutcomeEvent, NotificationService } from '@alfresco/adf-core';
+import { FormModel, FormFieldModel, FormService, FormOutcomeEvent, NotificationService, CoreAutomationService } from '@alfresco/adf-core';
 import { InMemoryFormService } from '../../services/in-memory-form.service';
-import { DemoForm } from './demo-form';
-import { Subscription } from 'rxjs';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';

@Component({
    selector: 'app-form',
@@ -36,7 +36,6 @@ export class FormComponent implements OnInit, OnDestroy {
    errorFields: FormFieldModel[] = [];
    formConfig: string;
    editor: any;
-    private subscriptions: Subscription[] = [];

    editorOptions = {
        theme: 'vs-dark',
@@ -47,14 +46,11 @@ export class FormComponent implements OnInit, OnDestroy {
        automaticLayout: true
    };

-    constructor(@Inject(FormService) private formService: InMemoryFormService,
-                private notificationService: NotificationService) {
+    private onDestroy$ = new Subject<boolean>();

-        this.subscriptions.push(
-            formService.executeOutcome.subscribe((formOutcomeEvent: FormOutcomeEvent) => {
-                formOutcomeEvent.preventDefault();
-            })
-        );
+    constructor(@Inject(FormService) private formService: InMemoryFormService,
+                private notificationService: NotificationService,
+                private automationService: CoreAutomationService) {
    }

    logErrors(errorFields: FormFieldModel[]) {
@@ -62,14 +58,21 @@ export class FormComponent implements OnInit, OnDestroy {
    }

    ngOnInit() {
-        const formDefinitionJSON: any = DemoForm.getDefinition();
-        this.formConfig = JSON.stringify(formDefinitionJSON);
+        this.formService.executeOutcome
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe((formOutcomeEvent: FormOutcomeEvent) => {
+                formOutcomeEvent.preventDefault();
+            });
+
+        this.formConfig = JSON.stringify(
+            this.automationService.forms.getFormDefinition()
+        );
        this.parseForm();
    }

    ngOnDestroy() {
-        this.subscriptions.forEach((subscription) => subscription.unsubscribe());
-        this.subscriptions = [];
+        this.onDestroy$.next(true);
+        this.onDestroy$.complete();
    }

    onInitFormEditor(editor) {
@@ -24,14 +24,14 @@ export class HeaderDataService {

    show = true;

-    @Output() hideMenu: EventEmitter<boolean> = new EventEmitter();
-    @Output() color: EventEmitter<string> = new EventEmitter();
-    @Output() title: EventEmitter<string> = new EventEmitter();
-    @Output() logo: EventEmitter<string> = new EventEmitter();
-    @Output() redirectUrl: EventEmitter<string | any[]> = new EventEmitter();
-    @Output() tooltip: EventEmitter<string> = new EventEmitter();
-    @Output() position: EventEmitter<string> = new EventEmitter();
-    @Output() hideSidenav: EventEmitter<string> = new EventEmitter();
+    @Output() hideMenu = new EventEmitter<boolean>();
+    @Output() color = new EventEmitter<string>();
+    @Output() title = new EventEmitter<string>();
+    @Output() logo = new EventEmitter<string>();
+    @Output() redirectUrl = new EventEmitter<string | any[]>();
+    @Output() tooltip = new EventEmitter<string>();
+    @Output() position = new EventEmitter<string>();
+    @Output() hideSidenav = new EventEmitter<boolean>();

    hideMenuButton() {
        this.show = !this.show;
@@ -59,11 +59,11 @@ export class HeaderDataService {
        this.tooltip.emit(tooltip);
    }

-    changePosition(position) {
+    changePosition(position: string) {
        this.position.emit(position);
    }

-    changeSidenavVisibility(hideSidenav) {
+    changeSidenavVisibility(hideSidenav: boolean) {
        this.hideSidenav.emit(hideSidenav);
    }
 }
@@ -16,7 +16,7 @@
 */

 import { NgModule } from '@angular/core';
-import { CoreModule, TranslationService } from '@alfresco/adf-core';
+import { CoreModule } from '@alfresco/adf-core';

 import { LazyLoadingRoutes } from './lazy-loading.routes';
 import { LazyLoadingComponent } from './lazy-loading.component';
@@ -30,7 +30,4 @@ import { LazyLoadingComponent } from './lazy-loading.component';
        LazyLoadingComponent
    ]
 })
-export class LazyLoadingModule {
-    constructor(translation: TranslationService) {
-    }
-}
+export class LazyLoadingModule {}
@@ -15,36 +15,57 @@
 * limitations under the License.
 */

-import { Component, HostListener } from '@angular/core';
+import { Component, HostListener, OnDestroy, OnInit } from '@angular/core';
 import { LogService, ObjectDataTableAdapter } from '@alfresco/adf-core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';

@Component({
    selector: 'app-log',
    templateUrl: './log.component.html',
    styleUrls: ['./log.component.css']
 })
-export class LogComponent {
+export class LogComponent implements OnInit, OnDestroy {
    logs: any[] = [];
    show = false;
    ctrlLKey = 12;
    logsData: ObjectDataTableAdapter;

-    constructor(public logService: LogService) {
+    private onDestroy$ = new Subject<boolean>();

-        logService.onMessage.subscribe((message) => {
-            let contentMessage = '';
-            try {
-                contentMessage = JSON.stringify(message.text);
-            } catch (error) {
-                return;
-            }
-            this.logs.push({ type: message.type, text: contentMessage});
-            this.logsData = new ObjectDataTableAdapter(this.logs, [
-                { type: 'text', key: 'type', title: 'Log level', sortable: true },
-                { type: 'text', key: 'text', title: 'Message', sortable: false }
-            ]);
+    constructor(public logService: LogService) {}

-        });
+    ngOnInit() {
+        this.logService.onMessage
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(message => {
+                let contentMessage = '';
+                try {
+                    contentMessage = JSON.stringify(message.text);
+                } catch (error) {
+                    return;
+                }
+                this.logs.push({ type: message.type, text: contentMessage });
+                this.logsData = new ObjectDataTableAdapter(this.logs, [
+                    {
+                        type: 'text',
+                        key: 'type',
+                        title: 'Log level',
+                        sortable: true
+                    },
+                    {
+                        type: 'text',
+                        key: 'text',
+                        title: 'Message',
+                        sortable: false
+                    }
+                ]);
+            });
+    }
+
+    ngOnDestroy() {
+        this.onDestroy$.next(true);
+        this.onDestroy$.complete();
    }

    @HostListener('document:keypress', ['$event'])
@@ -54,6 +75,5 @@ export class LogComponent {
        if (key === this.ctrlLKey) {
            this.show = !this.show;
        }
-
    }
 }
@@ -85,7 +85,7 @@
    [showRememberMe]="showFooter && showRememberMe"
    (executeSubmit)="checkForm($event)"
    copyrightText="{{ 'application.copyright' | adfAppConfig }}"
-    (success)="onLogin($event)"
+    (success)="onLogin()"
    (error)="onError($event)">
    <div class="adf-mobile-settings">
        <p>
@@ -4,7 +4,6 @@
        right: 10px;
        top: 10px;
        z-index: 1;
-
    }

    .adf-settings {
@@ -55,7 +55,7 @@ export class LoginComponent implements OnInit {
        this.alfrescoLogin.addCustomValidationError('password', 'required', 'LOGIN.MESSAGES.PASSWORD-REQUIRED');
    }

-    onLogin($event) {
+    onLogin() {
        this.router.navigate(['/home']);
    }

@@ -16,34 +16,26 @@
 */

 import { NgModule } from '@angular/core';
+import { LoginComponent } from './login.component';
 import { Routes, RouterModule } from '@angular/router';
 import { CommonModule } from '@angular/common';
-import { CoreModule, InfoDrawerModule } from '@alfresco/adf-core';
-import { ContentDirectiveModule, ContentMetadataModule, VersionManagerModule } from '@alfresco/adf-content-services';
-import { BlobPreviewComponent } from './blob-preview.component';
+import { CoreModule } from '@alfresco/adf-core';
+import { ContentModule } from '@alfresco/adf-content-services';

 const routes: Routes = [
    {
-        path: '',
-        component: BlobPreviewComponent
+      path: '',
+      component: LoginComponent
    }
 ];

@NgModule({
    imports: [
        CommonModule,
-        RouterModule.forChild(routes),
        CoreModule.forChild(),
-        InfoDrawerModule,
-        ContentDirectiveModule,
-        ContentMetadataModule,
-        VersionManagerModule
+        RouterModule.forChild(routes),
+        ContentModule.forChild()
    ],
-    declarations: [
-        BlobPreviewComponent
-    ],
-    exports: [
-        BlobPreviewComponent
-    ]
+    declarations: [LoginComponent]
 })
-export class BlobPreviewModule {}
+export class AppLoginModule {}
@@ -65,4 +65,10 @@
            {{snackBarConfigObject}}
        </p>
    </div>
+    <div>
+        <h3>Quick Messages</h3>
+        <button mat-button color="primary" (click)="quickInfo()">Info</button>
+        <button mat-button color="warn" (click)="quickError()">Error</button>
+        <button mat-button color="accent" (click)="quickWarning()">Warning</button>
+    </div>
 </div>
@@ -15,16 +15,18 @@
 * limitations under the License.
 */

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { NotificationService } from '@alfresco/adf-core';
 import { MatSnackBarConfig } from '@angular/material';
 import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';

@Component({
    templateUrl: './notifications.component.html',
    styleUrls: ['./notifications.component.scss']
 })
-export class NotificationsComponent implements OnInit {
+export class NotificationsComponent implements OnInit, OnDestroy {

    message = 'I ♥️ ADF';
    withAction = false;
@@ -55,6 +57,8 @@ export class NotificationsComponent implements OnInit {

    defaultDuration = 20000;

+    private onDestroy$ = new Subject<boolean>();
+
    constructor(private notificationService: NotificationService,
                private formBuilder: FormBuilder) {
        this.snackBarConfig.duration = this.defaultDuration;
@@ -69,10 +73,15 @@ export class NotificationsComponent implements OnInit {
        });

        this.configForm.valueChanges
-            .subscribe((configFormValues) =>
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(configFormValues =>
                this.setSnackBarConfig(configFormValues)
            );
+    }

+    ngOnDestroy() {
+        this.onDestroy$.next(true);
+        this.onDestroy$.complete();
    }

    setSnackBarConfig(configFormValues: any) {
@@ -117,4 +126,16 @@ export class NotificationsComponent implements OnInit {
    dismissSnackBar() {
        this.notificationService.dismissSnackMessageAction();
    }
+
+    quickError() {
+        this.notificationService.showError(this.message, 'Fix');
+    }
+
+    quickInfo() {
+        this.notificationService.showInfo(this.message);
+    }
+
+    quickWarning() {
+        this.notificationService.showWarning(this.message, 'Undo');
+    }
 }
@@ -20,6 +20,7 @@ import { NotificationsComponent } from './notifications.component';
 import { Routes, RouterModule } from '@angular/router';
 import { CommonModule } from '@angular/common';
 import { CoreModule } from '@alfresco/adf-core';
+import { MatButtonModule } from '@angular/material/button';

 const routes: Routes = [
    {
@@ -32,7 +33,8 @@ const routes: Routes = [
    imports: [
        CommonModule,
        CoreModule.forChild(),
-        RouterModule.forChild(routes)
+        RouterModule.forChild(routes),
+        MatButtonModule
    ],
    declarations: [NotificationsComponent]
 })
@@ -5,7 +5,7 @@
            (error)="showErrorMessage($event)"
            (updated)="onUpdatedPermissions($event)">
            {{ (toggleStatus?'DEMO_PERMISSION.INHERITED_PERMISSIONS_BUTTON':'DEMO_PERMISSION.INHERIT_PERMISSION_BUTTON') | translate}}</button>
-    <button mat-button color="primary" (click)="openAddPermissionDialog($event)" data-automation-id="adf-add-permission-button">Add User or Group</button>
+    <button mat-button color="primary" (click)="openAddPermissionDialog()" data-automation-id="adf-add-permission-button">Add User or Group</button>
 </div>

 <div>
@@ -48,9 +48,11 @@ export class DemoPermissionComponent implements OnInit {
                }
            });
        }
-        this.nodeService.getNode(this.nodeId, {include: ['permissions'] }).subscribe( (currentNode: MinimalNodeEntryEntity) => {
-            this.toggleStatus = currentNode.permissions.isInheritanceEnabled;
-        });
+        this.nodeService
+            .getNode(this.nodeId, {include: ['permissions'] })
+            .subscribe( (currentNode: MinimalNodeEntryEntity) => {
+                this.toggleStatus = currentNode.permissions.isInheritanceEnabled;
+            });
    }

    onUpdatedPermissions(node: MinimalNodeEntryEntity) {
@@ -62,10 +64,13 @@ export class DemoPermissionComponent implements OnInit {
        this.displayPermissionComponent.reload();
    }

-    openAddPermissionDialog(event: Event) {
-        this.nodePermissionDialogService.updateNodePermissionByDialog(this.nodeId).subscribe(
-            () =>  this.displayPermissionComponent.reload(),
-            (error) => this.showErrorMessage(error));
+    openAddPermissionDialog() {
+        this.nodePermissionDialogService
+            .updateNodePermissionByDialog(this.nodeId)
+            .subscribe(
+                () =>  this.displayPermissionComponent.reload(),
+                (error) => this.showErrorMessage(error)
+            );
    }

    showErrorMessage(error) {
@@ -0,0 +1,109 @@
+<h2>ADF Pipes</h2>
+
+<mat-accordion>
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+                Localized dates
+            </mat-panel-title>
+            <mat-panel-description>
+                adfLocalizedDate
+            </mat-panel-description>
+        </mat-expansion-panel-header>
+
+        <mat-form-field class="adf-input-field">
+            <input matInput placeholder="Format" [(ngModel)]="format">
+        </mat-form-field>
+
+        <mat-form-field class="adf-input-field">
+            <mat-select placeholder="Locale dropdown" [(ngModel)]="locale">
+                <mat-option *ngFor="let language of languages" [value]="language.key">
+                    {{language.label}}
+                </mat-option>
+            </mat-select>
+        </mat-form-field>
+
+        <h3>AdfLocalizedDate Pipe - Default</h3>
+        <div>{{ today | adfLocalizedDate }} </div>
+        <br>
+        <h3>AdfLocalizedDate Pipe - Custom format</h3>
+        <div>{{ today | adfLocalizedDate : format }} </div>
+        <br>
+        <h3>AdfLocalizedDate Pipe - Custom format and locale</h3>
+        <div>{{ today | adfLocalizedDate : format : locale }} </div>
+    </mat-expansion-panel>
+
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+                Time ago
+            </mat-panel-title>
+            <mat-panel-description>
+                adfTimeAgo
+            </mat-panel-description>
+        </mat-expansion-panel-header>
+
+        <mat-form-field class="adf-input-field">
+            <input matInput placeholder="Format" [(ngModel)]="format">
+        </mat-form-field>
+
+        <mat-form-field class="adf-input-field">
+            <mat-select placeholder="Locale dropdown" [(ngModel)]="locale">
+                <mat-option *ngFor="let language of languages" [value]="language.key">
+                    {{language.label}}
+                </mat-option>
+            </mat-select>
+        </mat-form-field>
+        <h3>AdfTimeAgo Pipe - Default</h3>
+        <div>{{ today | adfTimeAgo }} </div>
+        <br>
+        <h3>AdfTimeAgo Pipe - Custom locale</h3>
+        <div>{{ today | adfTimeAgo : locale}} </div>
+    </mat-expansion-panel>
+
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+                Decimal numbers
+            </mat-panel-title>
+            <mat-panel-description>
+                adfDecimalNumber
+            </mat-panel-description>
+        </mat-expansion-panel-header>
+
+        <mat-form-field class="adf-input-field">
+            <input matInput placeholder="Number" [(ngModel)]="number">
+        </mat-form-field>
+        <mat-form-field class="adf-input-field">
+            <input matInput placeholder="Min Integer Digits" [(ngModel)]="decimalValues.minIntegerDigits">
+        </mat-form-field>
+        <mat-form-field class="adf-input-field">
+            <input matInput placeholder="Min Fraction Digits" [(ngModel)]="decimalValues.minFractionDigits">
+        </mat-form-field>
+        <mat-form-field class="adf-input-field">
+            <input matInput placeholder="Max Fraction Digits" [(ngModel)]="decimalValues.maxFractionDigits">
+        </mat-form-field>
+
+        <mat-form-field class="adf-input-field">
+            <mat-select placeholder="Locale dropdown" [(ngModel)]="locale">
+                <mat-option *ngFor="let language of languages" [value]="language.key">
+                    {{language.label}}
+                </mat-option>
+            </mat-select>
+        </mat-form-field>
+
+        <h3>AdfDecimalNumber Pipe - Default</h3>
+        <div>{{ number | adfDecimalNumber }} </div>
+        <br>
+        <h3>AdfDecimalNumber Pipe - Custom digits config</h3>
+        <div>{{ number | adfDecimalNumber : decimalValues }} </div>
+        <br>
+        <h3>AdfDecimalNumber Pipe - Custom locale</h3>
+        <div>{{ number | adfDecimalNumber : {} : locale }} </div>
+        <br>
+        <h3>AdfDecimalNumber Pipe - Custom digits config and locale</h3>
+        <div>{{ number | adfDecimalNumber : decimalValues : locale }} </div>
+        <br>
+
+    </mat-expansion-panel>
+</mat-accordion>
@@ -0,0 +1,7 @@
+h2 {
+    padding: 20px;
+}
+
+.adf-input-field {
+    margin: 20px;
+}
@@ -16,23 +16,27 @@
 */

 import { Component } from '@angular/core';
-import { PreviewService } from '../../services/preview.service';
-import { Router } from '@angular/router';
+import { AppConfigService } from '@alfresco/adf-core';

@Component({
-    templateUrl: 'bob-preview.component.html'
+    selector: 'app-pipes-page',
+    templateUrl: './pipes.component.html',
+    styleUrls: ['pipes.component.scss']
 })
-export class BlobPreviewComponent {
-    content: Blob;
-    name: string;
+export class PipesComponent {

-    constructor(preview: PreviewService, router: Router) {
-        if (preview.content === null || preview.name === null) {
-            router.navigate([{ outlets: { overlay: null } }]);
-            return;
-        }
+    today = new Date();
+    locale: string;
+    format: string;
+    number = 12345.56;
+    decimalValues = {
+        minIntegerDigits: undefined,
+        minFractionDigits: undefined,
+        maxFractionDigits: undefined
+    };
+    languages: any[];

-        this.content = preview.content;
-        this.name = preview.name;
+    constructor(private appConfig: AppConfigService) {
+        this.languages = this.appConfig.get('languages', []);
    }
 }
@@ -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 { Routes, RouterModule } from '@angular/router';
+import { PipesComponent } from './pipes.component';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+
+const routes: Routes = [
+    {
+      path: '',
+      component: PipesComponent
+    }
+];
+
+@NgModule({
+    imports: [
+        CommonModule,
+        CoreModule.forChild(),
+        RouterModule.forChild(routes)
+    ],
+    declarations: [PipesComponent]
+})
+export class AppPipesModule {}
@@ -15,17 +15,18 @@
 * limitations under the License.
 */

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { FormGroup, FormBuilder, Validators, FormControl, AbstractControl } from '@angular/forms';
 import { ActivatedRoute, Params } from '@angular/router';
-import { debounceTime } from 'rxjs/operators';
+import { debounceTime, takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';

@Component({
    templateUrl: './process-list-demo.component.html',
    styleUrls: [`./process-list-demo.component.scss`]
 })

-export class ProcessListDemoComponent implements OnInit {
+export class ProcessListDemoComponent implements OnInit, OnDestroy {

    DEFAULT_SIZE = 20;

@@ -54,6 +55,8 @@ export class ProcessListDemoComponent implements OnInit {
        {value: 'created-desc', title: 'Created (desc)'}
    ];

+    private onDestroy$ = new Subject<boolean>();
+
    constructor(private route: ActivatedRoute,
                private formBuilder: FormBuilder) {
    }
@@ -72,6 +75,11 @@ export class ProcessListDemoComponent implements OnInit {
        this.buildForm();
    }

+    ngOnDestroy() {
+        this.onDestroy$.next(true);
+        this.onDestroy$.complete();
+    }
+
    buildForm() {
        this.processListForm = this.formBuilder.group({
            processAppId: new FormControl(this.appId, [Validators.pattern('^[0-9]*$'), Validators.min(this.minValue)]),
@@ -84,10 +92,9 @@ export class ProcessListDemoComponent implements OnInit {
        });

        this.processListForm.valueChanges
-            .pipe(
-                debounceTime(500)
-            )
-            .subscribe((processFilter) => {
+            .pipe(takeUntil(this.onDestroy$))
+            .pipe(debounceTime(500))
+            .subscribe(processFilter => {
                if (this.isFormValid()) {
                    this.filterProcesses(processFilter);
                }
@@ -15,32 +15,25 @@
 * 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';

@Component({
    selector: 'app-form-node-viewer',
    templateUrl: './form-node-viewer.component.html',
    styleUrls: ['./form-node-viewer.component.css']
 })
-export class FormNodeViewerComponent implements OnInit, OnDestroy {
+export class FormNodeViewerComponent implements OnInit {

    nodeId: string;

-    private sub: Subscription;
-
    constructor(private route: ActivatedRoute) {
    }

    ngOnInit() {
-        this.sub = this.route.params.subscribe((params) => {
+        this.route.params.subscribe((params) => {
            this.nodeId = params['id'];
        });
    }

-    ngOnDestroy() {
-        this.sub.unsubscribe();
-    }
-
 }
--- a/Show More
+++ b/Show More