Merge pull request #4984 from Alfresco/development

Release ADF version 3.4.0

.github/CODEOWNERS

@@ -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

.gitignore

@@ -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/

.travis.yml

@@ -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,7 +15,7 @@ branches:
   only:
   - master
   - development
-  - /.*old-env.*/  
+  - /.*old-env.*/
   - /.*next-release.*/
   - /.*beta.*/
   - /.*greenkeeper.*/
@@ -25,8 +25,7 @@ stages:
   - name: Warm Up Cache & Lint & Build Dist
   - name: Unit test
   - name: e2e Test
-  - name: Create Docker PR
-  - name: Deploy Docker PR
+  - name: Deploy PR
 
 addons:
     chrome: stable
@@ -43,169 +42,45 @@ before_install:
 jobs:
     include:
         - stage: Warm Up Cache & Lint & Build Dist
+          name:  Warm Up Cache & Lint & Build Dist
           script:
-            - if [[ $TRAVIS_PULL_REQUEST == "false" ]];
-              then
-               ./scripts/lint.sh || exit 1;
-               ./scripts/npm-build-all.sh || exit 1;
-              else
-               ./scripts/update-version.sh -gnu -alpha || exit 1;
-               npm install;
-               ./scripts/lint.sh || exit 1;
-               rm -rf tmp && mkdir tmp;
-               git merge-base origin/$TRAVIS_BRANCH HEAD > ./tmp/devhead.txt;
-               ./scripts/smart-build.sh -b $TRAVIS_BRANCH  -gnu || exit 1;
-              fi;
-              npm run build:dist || exit 1;
-              ./scripts/license-list-generator.sh || exit 1;
+             ./scripts/travis/build/build.sh
         - stage: Unit test
-          name: core and extensions
+          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: Deploy PR
+          name: Deploy PR
           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
+             ./scripts/travis/deploy/deploy.sh
+        - stage: Update children projects dependency #Update children projects dependency
+          name: Update Related Project
           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
+          script: ./scripts/travis/update/update-children.sh
+        - stage: e2e Test
           name: core
+          script: ./scripts/travis/e2e/core-e2e.sh
+        - stage: e2e Test
+          name:  content
           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
+            ./scripts/travis/e2e/content-services-e2e.sh
+        - stage: e2e Test
+          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 =~ "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
+              ./scripts/travis/e2e/search-e2e.sh
+        - stage: e2e Test
+          name: process
           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
+              ./scripts/travis/e2e/process-services-e2e.sh
+        - stage: e2e Test
+          name: process 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 =~ "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/e2e/process-services-cloud-e2e.sh
 
 # Send coverage data to codecov
 after_success:

README.md

@@ -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
 

angular.json

@@ -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",
               {
@@ -324,6 +342,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 +372,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 +387,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 +421,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"
             ],
@@ -516,7 +552,7 @@
         "e2e": {
           "builder": "@angular-devkit/build-angular:protractor",
           "options": {
-            "protractorConfig": "./protractor.conf.js",
+            "protractorConfig": "./protractor.conf.ts",
             "devServerTarget": "lib-e2e-test:serve"
           }
         },

cspell.json

@@ -126,8 +126,9 @@
     "uncheck",
     "subfolders",
     "ECMBPM",
-    "candidateuserapp",
-    "processwithvariables"
+    "processwithvariables",
+    "dropdownrestprocess",
+    "devops"
   ],
   "dictionaries": [
     "html",

demo-shell/package.json

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

demo-shell/proxy.conf.js

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

demo-shell/resources/i18n/ar.json

@@ -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": "قائمة العلامات حسب معرف العقدة"
   },

demo-shell/resources/i18n/cs.json

@@ -78,6 +78,7 @@
     "UPLOADER": "Nástroj pro odesílání",
     "WEBSCRIPT": "Webový skript",
     "TAG": "Tag",
+    "PIPES": "Potrubí",
     "TRASHCAN": "Koš",
     "SOCIAL": "Sociální",
     "SETTINGS": "Nastavení",
@@ -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": {

demo-shell/resources/i18n/da.json

@@ -78,6 +78,7 @@
     "UPLOADER": "Uploader",
     "WEBSCRIPT": "Webscript",
     "TAG": "Tag",
+    "PIPES": "Rør",
     "TRASHCAN": "Papirkurv",
     "SOCIAL": "Social",
     "SETTINGS": "Indstillinger",
@@ -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": {

demo-shell/resources/i18n/de.json

@@ -78,6 +78,7 @@
     "UPLOADER": "Uploader",
     "WEBSCRIPT": "Webscript",
     "TAG": "Tag",
+    "PIPES": "Pipes",
     "TRASHCAN": "Papierkorb",
     "SOCIAL": "Soziale Funktionen",
     "SETTINGS": "Einstellungen",
@@ -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": {

demo-shell/resources/i18n/en.json

@@ -78,6 +78,7 @@
     "UPLOADER": "Uploader",
     "WEBSCRIPT": "Webscript",
     "TAG": "Tag",
+    "PIPES": "Pipes",
     "TRASHCAN": "Trashcan",
     "SOCIAL": "Social",
     "SETTINGS": "Settings",

demo-shell/resources/i18n/es.json

@@ -78,6 +78,7 @@
     "UPLOADER": "Cargador",
     "WEBSCRIPT": "Webscript",
     "TAG": "Etiqueta",
+    "PIPES": "Tubos",
     "TRASHCAN": "Papelera",
     "SOCIAL": "Social",
     "SETTINGS": "Configuración",
@@ -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": {

demo-shell/resources/i18n/fi.json

@@ -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": {

demo-shell/resources/i18n/fr.json

@@ -78,6 +78,7 @@
     "UPLOADER": "Chargeur",
     "WEBSCRIPT": "Script Web",
     "TAG": "Tag",
+    "PIPES": "Tuyaux",
     "TRASHCAN": "Corbeille",
     "SOCIAL": "Réseaux sociaux",
     "SETTINGS": "Paramètres",
@@ -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": {

demo-shell/resources/i18n/it.json

@@ -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": {

demo-shell/resources/i18n/ja.json

@@ -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": {

demo-shell/resources/i18n/nb.json

@@ -78,6 +78,7 @@
     "UPLOADER": "Opplaster",
     "WEBSCRIPT": "Webscript",
     "TAG": "Tagg",
+    "PIPES": "Rør",
     "TRASHCAN": "Søppelkurv",
     "SOCIAL": "Sosial",
     "SETTINGS": "Innstillinger",
@@ -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": {

demo-shell/resources/i18n/nl.json

@@ -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": {

demo-shell/resources/i18n/pl.json

@@ -78,6 +78,7 @@
     "UPLOADER": "Program do przesyłania",
     "WEBSCRIPT": "Skrypt internetowy",
     "TAG": "Znacznik",
+    "PIPES": "Rury",
     "TRASHCAN": "Kosz",
     "SOCIAL": "Społecznościowy",
     "SETTINGS": "Ustawienia",
@@ -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": {

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

@@ -78,6 +78,7 @@
     "UPLOADER": "Carregador",
     "WEBSCRIPT": "Webscript",
     "TAG": "Marca",
+    "PIPES": "Tubos",
     "TRASHCAN": "Lixeira",
     "SOCIAL": "Social",
     "SETTINGS": "Configurações",
@@ -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": {

demo-shell/resources/i18n/ru.json

@@ -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": {

demo-shell/resources/i18n/sv.json

@@ -24,8 +24,8 @@
       "COMMENTS": "Visa kommentarer"
     },
     "PERSONAL-FILES": "Personliga filer",
-    "WARN-MULTIPLE-UPLOADS": "Visa varning för flera uppladningar",
-    "CUSTOM-PERMISSION-MESSAGE": "Aktivera anpassat behörighetersmeddelande",
+    "WARN-MULTIPLE-UPLOADS": "Visa varning för flera uppladdningar",
+    "CUSTOM-PERMISSION-MESSAGE": "Aktivera anpassat behörighetsmeddelande",
     "MEDIUM-TIME-FORMAT": "Aktivera mellantidsformat för dokumentlista",
     "SEARCH": {
       "RADIO": {
@@ -59,12 +59,12 @@
     "NODE-SELECTOR": "Nodväljare",
     "SITES": "Webbplatser",
     "CONTENT_SERVICES": "Content Services",
-    "BREADCRUMB": "Brödsmula",
+    "BREADCRUMB": "Synlig sökväg",
     "NOTIFICATIONS": "Aviseringar",
     "TASK_LIST": "Uppgiftslista",
     "PROCESS_LIST": "Processlista",
     "PROCESS_CLOUD": "Activiti Cloud",
-    "CARD_VIEW": "CardView",
+    "CARD_VIEW": "Kortvy",
     "PROCESS_SERVICES": "Process Services",
     "LOGIN": "Inloggning",
     "CUSTOM_SOURCES": "Anpassade källor",
@@ -75,14 +75,15 @@
     "FORM": "Formulär",
     "FORM_LIST": "Formulärlista",
     "FORM_LOADING": "Formulär läses in",
-    "UPLOADER": "Uppladdare",
+    "UPLOADER": "Uppladdad av",
     "WEBSCRIPT": "Webbskript",
     "TAG": "Tagg",
+    "PIPES": "Pipes",
     "TRASHCAN": "Papperskorg",
     "SOCIAL": "Social",
     "SETTINGS": "Inställningar",
     "CONFIG-EDITOR": "Konfigurationseditor",
-    "OVERLAY_VIEWER": "Överdragsvisare",
+    "OVERLAY_VIEWER": "Överlagringssvisare",
     "ABOUT": "Om",
     "SEARCH": "Utvidgad sökning",
     "EXTENDED_SEARCH_QUERY_BODY": "Utvidgad sökning med frågetext",
@@ -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",

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

@@ -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": {

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

@@ -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);
 }

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

@@ -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,

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

@@ -17,9 +17,14 @@
 
 import { ModuleWithProviders } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { AuthGuard, AuthGuardEcm, ErrorContentComponent, AuthGuardBpm, AuthGuardSsoRoleService } from '@alfresco/adf-core';
+import {
+    AuthGuard,
+    AuthGuardEcm,
+    ErrorContentComponent,
+    AuthGuardBpm,
+    AuthGuardSsoRoleService
+} from '@alfresco/adf-core';
 import { AppLayoutComponent } from './components/app-layout/app-layout.component';
-import { LoginComponent } from './components/login/login.component';
 import { HomeComponent } from './components/home/home.component';
 import { LogoutComponent } from './components/logout/logout.component';
 import { ProcessServiceComponent } from './components/process-service/process-service.component';
@@ -52,16 +57,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: '',

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

@@ -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">
+                    <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>

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

@@ -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);
+    }
 }

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

@@ -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) {

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

@@ -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"

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

@@ -16,10 +16,9 @@
  */
 
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { FormFieldModel, NotificationService, FormRenderingService } from '@alfresco/adf-core';
+import { 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();
     }
 

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

@@ -1,96 +0,0 @@
-/*!
- * @license
- * Copyright 2019 Alfresco Software, Ltd.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export const formDefinition = `{
-    "formRepresentation": {
-      "id": "text-form",
-      "name": "test-start-form",
-      "version": 0,
-      "description": "",
-      "formDefinition": {
-        "tabs": [],
-        "fields": [
-          {
-            "id": "1511517333638",
-            "type": "container",
-            "fieldType": "ContainerRepresentation",
-            "name": "Label",
-            "tab": null,
-            "numberOfColumns": 2,
-            "fields": {
-              "1": [
-                {
-                  "fieldType": "FormFieldRepresentation",
-                  "id": "texttest",
-                  "name": "texttest",
-                  "type": "text",
-                  "value": null,
-                  "required": false,
-                  "placeholder": "text",
-                  "params": {
-                    "existingColspan": 2,
-                    "maxColspan": 6,
-                    "inputMaskReversed": true,
-                    "inputMask": "0#",
-                    "inputMaskPlaceholder": "(0-9)"
-                  }
-                }
-              ],
-              "2": [{
-                              "fieldType": "AttachFileFieldRepresentation",
-                              "id": "attachfiletest",
-                              "name": "attachfiletest",
-                              "type": "upload",
-                              "required": true,
-                              "colspan": 2,
-                              "placeholder": "attachfile",
-                              "params": {
-                                  "existingColspan": 2,
-                                  "maxColspan": 2,
-                                  "fileSource": {
-                                          "serviceId": "local-file",
-                                          "name": "Local File"
-                                  },
-                                  "multiple": true,
-                                  "link": false
-                          },
-                              "visibilityCondition": {
-                              }
-                          }]
-            }
-          }
-        ],
-        "outcomes": [],
-        "metadata": {
-          "property1": "value1",
-          "property2": "value2"
-        },
-        "variables": [
-          {
-            "name": "variable1",
-            "type": "string",
-            "value": "value1"
-          },
-          {
-            "name": "variable2",
-            "type": "string",
-            "value": "value2"
-          }
-        ]
-      }
-    }}
-  `;

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

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

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

@@ -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;
 }

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

@@ -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>
 

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
+import { Component, OnInit, ElementRef, ViewChild, OnDestroy } from '@angular/core';
 import {
     CardViewTextItemModel,
     CardViewDateItemModel,
@@ -27,23 +27,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();

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

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

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

@@ -46,8 +46,9 @@ export class CloudFiltersDemoComponent implements OnInit {
     ) {}
 
     ngOnInit() {
-        this.currentTaskFilter$ = this.cloudLayoutService.getCurrentTaskFilterParam();
-        this.currentProcessFilter$ = this.cloudLayoutService.getCurrentProcessFilterParam();
+        this.currentTaskFilter$ = this.cloudLayoutService.taskFilter$;
+        this.currentProcessFilter$ = this.cloudLayoutService.processFilter$;
+
         let root = '';
         if (this.route.snapshot && this.route.snapshot.firstChild) {
             root = this.route.snapshot.firstChild.url[0].path;
@@ -62,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 });
     }

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

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

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

@@ -29,7 +29,7 @@ import { CloudLayoutService } from '../services/cloud-layout.service';
         height: 100% !important;
       }
       `],
-      encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None
 })
 export class CommunityCloudComponent  {
 

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

@@ -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;

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, ViewChild, OnInit } from '@angular/core';
+import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core';
 import {
     ProcessListCloudComponent,
     ProcessFilterCloudModel,
@@ -27,12 +27,14 @@ import {
 import { ActivatedRoute, Router } from '@angular/router';
 import { UserPreferencesService, AppConfigService } from '@alfresco/adf-core';
 import { CloudLayoutService } from '../services/cloud-layout.service';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { Pagination } from '@alfresco/js-api';
 
 @Component({
     templateUrl: './community-processes-cloud.component.html'
 })
-export class CommunityProcessesCloudDemoComponent implements OnInit {
-
+export class CommunityProcessesCloudDemoComponent implements OnInit, OnDestroy {
     public static ACTION_SAVE_AS = 'saveAs';
     static PROCESS_FILTER_PROPERTY_KEYS = 'adf-edit-process-filter';
 
@@ -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) {

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

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

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

@@ -5,7 +5,7 @@
         display: flex;
     }
 
-    &-task-tiitle {
+    &-task-title {
         margin-left:15px;
     }
 

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

@@ -0,0 +1,97 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import {
+    ProcessServicesCloudModule,
+    LocalPreferenceCloudService,
+    PROCESS_FILTERS_SERVICE_TOKEN,
+    TASK_FILTERS_SERVICE_TOKEN
+} from '@alfresco/adf-process-services-cloud';
+
+import { CommunityCloudComponent } from './community-cloud.component';
+import { CommunityTasksCloudDemoComponent } from './community-task-cloud.component';
+import { CommunityCloudFiltersDemoComponent } from './community-filters.component';
+import { CommunityProcessesCloudDemoComponent } from './community-processes-cloud.component';
+import { CommunityStartProcessCloudDemoComponent } from './community-start-process-cloud.component';
+import { CommunityStartTaskCloudDemoComponent } from './community-start-task-cloud.component';
+import { CommunityProcessDetailsCloudDemoComponent } from './community-process-details-cloud.component';
+import { CommunityTaskDetailsCloudDemoComponent } from './community-task-details-cloud.component';
+import { AppCloudSharedModule } from '../shared/cloud.shared.module';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: CommunityCloudComponent,
+        children: [
+            {
+                path: 'tasks',
+                component: CommunityTasksCloudDemoComponent
+            },
+            {
+                path: 'processes',
+                component: CommunityProcessesCloudDemoComponent
+            },
+            {
+                path: 'start-task',
+                component: CommunityStartTaskCloudDemoComponent
+            },
+            {
+                path: 'start-process',
+                component: CommunityStartProcessCloudDemoComponent
+            },
+            {
+                path: 'task-details/:taskId',
+                component: CommunityTaskDetailsCloudDemoComponent
+            },
+            {
+                path: 'process-details/:processInstanceId',
+                component: CommunityProcessDetailsCloudDemoComponent
+            }
+        ]
+    }
+];
+
+@NgModule({
+    imports: [
+        CommonModule,
+        CoreModule.forChild(),
+        ProcessServicesCloudModule,
+        RouterModule.forChild(routes),
+        AppCloudSharedModule,
+        FlexLayoutModule
+    ],
+    declarations: [
+        CommunityCloudComponent,
+        CommunityTasksCloudDemoComponent,
+        CommunityCloudFiltersDemoComponent,
+        CommunityProcessesCloudDemoComponent,
+        CommunityStartProcessCloudDemoComponent,
+        CommunityStartTaskCloudDemoComponent,
+        CommunityProcessDetailsCloudDemoComponent,
+        CommunityTaskDetailsCloudDemoComponent
+    ],
+    providers: [
+        { provide: PROCESS_FILTERS_SERVICE_TOKEN, useClass: LocalPreferenceCloudService },
+        { provide: TASK_FILTERS_SERVICE_TOKEN, useClass: LocalPreferenceCloudService }
+    ]
+})
+export class AppCommunityModule {}

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

@@ -1,43 +0,0 @@
-/*!
- * @license
- * Copyright 2019 Alfresco Software, Ltd.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { Directive, HostListener, Input } from '@angular/core';
-
-@Directive({
-    selector: '[appNestedMenuPosition]'
-})
-export class NestedMenuPositionDirective {
-
-    @Input()
-    menuMinimized: string;
-
-    nestedMenuLeftPadding: string = '220px';
-
-    @HostListener('click', ['$event'])
-    onClick() {
-
-        const overlayContainer = (document.querySelector('.cdk-overlay-connected-position-bounding-box') as HTMLElement);
-        (document.querySelector('.cdk-overlay-pane') as HTMLElement).style.width = '100%';
-
-        if (!this.menuMinimized) {
-            setTimeout(() => {
-                overlayContainer.style.left = this.nestedMenuLeftPadding;
-            });
-        }
-    }
-
-}

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

@@ -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)">{{

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, ViewChild, OnInit } from '@angular/core';
+import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core';
 import {
     ProcessListCloudComponent,
     ProcessFilterCloudModel,
@@ -25,13 +25,16 @@ import {
 
 import { ActivatedRoute, Router } from '@angular/router';
 import { UserPreferencesService, AppConfigService } from '@alfresco/adf-core';
-import { CloudLayoutService } from './services/cloud-layout.service';
+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';
@@ -57,6 +60,8 @@ export class ProcessesCloudDemoComponent implements OnInit {
 
     editedFilter: ProcessFilterCloudModel;
 
+    private onDestroy$ = new Subject<boolean>();
+
     constructor(
         private route: ActivatedRoute,
         private router: Router,
@@ -81,11 +86,17 @@ 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));
     }
 
-    setCurrentSettings(settings) {
+    ngOnDestroy() {
+        this.onDestroy$.next(true);
+        this.onDestroy$.complete();
+    }
+
+    setCurrentSettings(settings: CloudServiceSettings) {
         if (settings) {
             this.multiselect = settings.multiselect;
             this.testingMode = settings.testingMode;
@@ -94,7 +105,7 @@ export class ProcessesCloudDemoComponent implements OnInit {
         }
     }
 
-    onChangePageSize(event) {
+    onChangePageSize(event: Pagination) {
         this.userPreference.paginationSize = event.maxItems;
     }
 
@@ -102,7 +113,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 +121,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) {

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

@@ -16,14 +16,28 @@
  */
 
 import { Injectable } from '@angular/core';
-import { Observable, BehaviorSubject } from 'rxjs';
+import { BehaviorSubject } from 'rxjs';
+
+export interface CloudServiceSettings {
+    multiselect: boolean;
+    testingMode: boolean;
+    taskDetailsRedirection: boolean;
+    processDetailsRedirection: boolean;
+    selectionMode: string;
+}
+
+export interface FilterSettings {
+    id?: string;
+    index?: number;
+    key?: string;
+}
 
 @Injectable({
     providedIn: 'root'
 })
 export class CloudLayoutService {
 
-    private settings = {
+    private settings: CloudServiceSettings = {
         multiselect: false,
         testingMode: false,
         taskDetailsRedirection: true,
@@ -31,40 +45,19 @@ export class CloudLayoutService {
         selectionMode: 'single'
     };
 
-    private filterTaskSubject: BehaviorSubject<any> = new BehaviorSubject({index: 0});
-    private filterTask$: Observable<any>;
-    private filterProcessSubject: BehaviorSubject<any> = new BehaviorSubject({index: 0});
-    private filterProcess$: Observable<any>;
-    private settingsSubject: BehaviorSubject<any> = new BehaviorSubject(this.settings);
-    private settings$: Observable<any>;
+    taskFilter$ = new BehaviorSubject<FilterSettings>({index: 0});
+    processFilter$ = new BehaviorSubject<FilterSettings>({index: 0});
+    settings$ = new BehaviorSubject<CloudServiceSettings>(this.settings);
 
-    constructor() {
-        this.filterTask$ = this.filterTaskSubject.asObservable();
-        this.filterProcess$ = this.filterProcessSubject.asObservable();
-        this.settings$ = this.settingsSubject.asObservable();
+    setCurrentTaskFilterParam(param: FilterSettings) {
+        this.taskFilter$.next(param);
     }
 
-    getCurrentTaskFilterParam() {
-        return this.filterTask$;
+    setCurrentProcessFilterParam(param: FilterSettings) {
+        this.processFilter$.next(param);
     }
 
-    setCurrentTaskFilterParam(param) {
-        this.filterTaskSubject.next(param);
-    }
-
-    getCurrentProcessFilterParam() {
-        return this.filterProcess$;
-    }
-
-    setCurrentProcessFilterParam(param) {
-        this.filterProcessSubject.next(param);
-    }
-
-    getCurrentSettings() {
-        return this.settings$;
-    }
-
-    setCurrentSettings(param) {
-        this.settingsSubject.next(param);
+    setCurrentSettings(param: CloudServiceSettings) {
+        this.settings$.next(param);
     }
 }

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

@@ -15,15 +15,18 @@
  * 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 } from '../services/cloud-layout.service';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 @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;
     selectionMode: string;
@@ -40,8 +43,15 @@ export class CloudSettingsComponent implements OnInit {
     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) {

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

@@ -0,0 +1,37 @@
+/*!
+ * @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';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        CoreModule.forChild(),
+        MatDialogModule,
+        MatInputModule,
+        MatSelectModule,
+        MatSlideToggleModule
+    ],
+    declarations: [ CloudSettingsComponent ],
+    exports: [ CommonModule, CloudSettingsComponent]
+})
+
+export class AppCloudSharedModule {}

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

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

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

@@ -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);
     }
 }

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

@@ -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>

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

@@ -5,7 +5,7 @@
         display: flex;
     }
 
-    &-task-tiitle {
+    &-task-title {
         margin-left:15px;
     }
 

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

@@ -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`]);
     }

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

@@ -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) {

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

@@ -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>

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

@@ -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() {

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

@@ -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();
     }
 }

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

@@ -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">
 

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

@@ -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 });
     }

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

@@ -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

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

@@ -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%;
-                }
-            }
-        }
-    }
 }

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

@@ -28,7 +28,8 @@ import {
     AlfrescoApiService, AuthenticationService, AppConfigService, AppConfigValues, ContentService, TranslationService,
     FileUploadEvent, FolderCreatedEvent, LogService, NotificationService,
     UploadService, DataColumn, DataRow, UserPreferencesService,
-    PaginationComponent, FormValues, DisplayMode, InfinitePaginationComponent, HighlightDirective
+    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);
         }
     }
 
@@ -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);
         });
     }

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

@@ -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) {

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

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

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

@@ -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) {

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

@@ -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);
     }
 }

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

@@ -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;
         }
-
     }
 }

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

@@ -4,7 +4,6 @@
         right: 10px;
         top: 10px;
         z-index: 1;
-
     }
 
     .adf-settings {

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

@@ -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 {}

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

@@ -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>

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

@@ -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');
+    }
 }

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

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

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

@@ -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) {
@@ -63,9 +65,12 @@ export class DemoPermissionComponent implements OnInit {
     }
 
     openAddPermissionDialog(event: Event) {
-        this.nodePermissionDialogService.updateNodePermissionByDialog(this.nodeId).subscribe(
-            () =>  this.displayPermissionComponent.reload(),
-            (error) => this.showErrorMessage(error));
+        this.nodePermissionDialogService
+            .updateNodePermissionByDialog(this.nodeId)
+            .subscribe(
+                () =>  this.displayPermissionComponent.reload(),
+                (error) => this.showErrorMessage(error)
+            );
     }
 
     showErrorMessage(error) {

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

@@ -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>

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

@@ -0,0 +1,7 @@
+h2 {
+    padding: 20px;
+}
+
+.adf-input-field {
+    margin: 20px;
+}

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

@@ -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', []);
     }
 }

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

@@ -0,0 +1,39 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { NgModule } from '@angular/core';
+import { 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 {}

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

@@ -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);
                 }

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

@@ -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();
-    }
-
 }

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

@@ -15,9 +15,8 @@
  * 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({
@@ -25,23 +24,16 @@ import { Params } from '@angular/router/src/shared';
     templateUrl: './form-viewer.component.html',
     styleUrls: ['./form-viewer.component.css']
 })
-export class FormViewerComponent implements OnInit, OnDestroy {
+export class FormViewerComponent implements OnInit {
 
     taskId: string;
 
-    private sub: Subscription;
-
     constructor(private route: ActivatedRoute) {
     }
 
     ngOnInit() {
-        this.sub = this.route.params.subscribe((params: Params) => {
+        this.route.params.subscribe((params: Params) => {
             this.taskId = params['id'];
         });
     }
-
-    ngOnDestroy() {
-        this.sub.unsubscribe();
-    }
-
 }

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

@@ -1,5 +1,5 @@
 <div id="attachment-process-list" *ngIf="processInstanceId">
-    <div class="adf-no-form-container">
+    <div>
 
         <adf-upload-drag-area
             [rootFolderId]="processInstanceId"

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

@@ -22,7 +22,8 @@ import { UploadService } from '@alfresco/adf-core';
 import { AlfrescoApiService } from '@alfresco/adf-core';
 import { AppConfigService } from '@alfresco/adf-core';
 import { PreviewService } from '../../services/preview.service';
-import { Subscription } from 'rxjs';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 export function processUploadServiceFactory(api: AlfrescoApiService, config: AppConfigService) {
     return new ProcessUploadService(api, config);
@@ -51,7 +52,7 @@ export class ProcessAttachmentsComponent implements OnInit, OnChanges, OnDestroy
 
     processInstance: ProcessInstance;
 
-    private subscriptions: Subscription[] = [];
+    private onDestroy$ = new Subject<boolean>();
 
     constructor(
         private uploadService: UploadService,
@@ -60,11 +61,9 @@ export class ProcessAttachmentsComponent implements OnInit, OnChanges, OnDestroy
     ) {}
 
     ngOnInit() {
-        this.subscriptions.push(
-            this.uploadService.fileUploadComplete.subscribe(
-                (value) => this.onFileUploadComplete(value.data)
-            )
-        );
+        this.uploadService.fileUploadComplete
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(value => this.onFileUploadComplete(value.data));
     }
 
     ngOnChanges() {
@@ -77,8 +76,8 @@ export class ProcessAttachmentsComponent implements OnInit, OnChanges, OnDestroy
     }
 
     ngOnDestroy() {
-        this.subscriptions.forEach((subscription) => subscription.unsubscribe());
-        this.subscriptions = [];
+        this.onDestroy$.next(true);
+        this.onDestroy$.complete();
     }
 
     onFileUploadComplete(content: any) {

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

@@ -34,7 +34,7 @@
                     </mat-accordion>
                 </div>
                 <div class="adf-grid-item adf-tasks-list" fxFlex.gt-md="380px"
-                     [ngClass.gt-md]="{'small-pagination': true}"
+                     [ngClass.gt-md]="{'adf-small-pagination': true}"
                      *ngIf="taskFilter && !isStartTaskMode()">
                     <adf-tasklist
                         [appId]="taskFilter?.appId"

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

@@ -6,7 +6,6 @@
     }
 
     .adf-grid {
-
         .adf-grid-item {
             margin: 4px;
             box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
@@ -19,10 +18,6 @@
             margin-bottom: 24px;
         }
 
-        .adf-list-buttons-start {
-            width: 100%;
-        }
-
         .adf-tasks-list.adf-small-pagination,
         .adf-processes-list.adf-small-pagination {
             .adf-pagination {
@@ -31,10 +26,6 @@
                 padding-bottom: 24px;
                 padding-top: 8px;
 
-                &__block {
-                    border-right: none;
-                }
-
                 &__range-block.adf-pagination__block:first-child {
                     order: 1;
                     width: 60%;
@@ -74,26 +65,6 @@
             .adf-datatable-list {
                 border: none;
             }
-
-            .adf-datatable tr,
-            .adf-datatable td {
-                height: 36px;
-                font-size: 14px;
-            }
-
-            .adf-datatable td {
-                padding-top: 0;
-                padding-bottom: 0;
-                border-bottom: none;
-            }
-
-            .adf-datatable th {
-                padding-top: 0;
-                padding-bottom: 0;
-                height: 40px;
-                vertical-align: middle;
-                font-size: 14px;
-            }
         }
 
         mat-slide-toggle {
@@ -108,7 +79,6 @@
     }
 
     .adf-accordion-panel {
-
         .mat-expansion-panel {
             background: inherit;
         }
@@ -123,11 +93,6 @@
             align-items: center;
         }
 
-        .mat-expansion-panel-header.mat-expanded .mat-expansion-panel-header-title {
-            color: mat-color($primary);
-            opacity: 1;
-        }
-
         .adf-accordion-title-padding {
             padding-left: 20px;
         }

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

@@ -35,7 +35,7 @@ import {
     UserProcessInstanceFilterRepresentation
 } from '@alfresco/js-api';
 import {
-    FORM_FIELD_VALIDATORS, FormEvent, FormFieldEvent, FormRenderingService, FormService,
+    FORM_FIELD_VALIDATORS, FormRenderingService, FormService,
     DynamicTableRow, ValidateDynamicTableRowEvent, AppConfigService, PaginationComponent, UserPreferenceValues
 } from '@alfresco/adf-core';
 
@@ -57,12 +57,13 @@ import {
     TaskListComponent
 } from '@alfresco/adf-process-services';
 import { LogService } from '@alfresco/adf-core';
-import { AlfrescoApiService, UserPreferencesService, ValidateFormEvent } from '@alfresco/adf-core';
-import { Subscription } from 'rxjs';
+import { AlfrescoApiService, UserPreferencesService } from '@alfresco/adf-core';
+import { Subject } from 'rxjs';
 import { /*CustomEditorComponent*/ CustomStencil01 } from './custom-editor/custom-editor.component';
 import { DemoFieldValidator } from './demo-field-validator';
 import { PreviewService } from '../../services/preview.service';
 import { Location } from '@angular/common';
+import { takeUntil } from 'rxjs/operators';
 
 const currentProcessIdNew = '__NEW__';
 const currentTaskIdNew = '__NEW__';
@@ -160,7 +161,7 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
         new DemoFieldValidator()
     ];
 
-    private subscriptions: Subscription[] = [];
+    private onDestroy$ = new Subject<boolean>();
 
     constructor(private elementRef: ElementRef,
                 private route: ActivatedRoute,
@@ -184,17 +185,28 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
         // Uncomment this line to map 'custom_stencil_01' to local editor component
         formRenderingService.setComponentTypeResolver('custom_stencil_01', () => CustomStencil01, true);
 
-        this.subscriptions.push(
-            formService.formLoaded.subscribe((formEvent: FormEvent) => {
+        formService.formLoaded
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(formEvent => {
                 this.logService.log(`Form loaded: ${formEvent.form.id}`);
-            }),
-            formService.formFieldValueChanged.subscribe((formFieldEvent: FormFieldEvent) => {
+            });
+
+        formService.formFieldValueChanged
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(formFieldEvent => {
                 this.logService.log(`Field value changed. Form: ${formFieldEvent.form.id}, Field: ${formFieldEvent.field.id}, Value: ${formFieldEvent.field.value}`);
-            }),
-            this.preferenceService.select(UserPreferenceValues.PaginationSize).subscribe((pageSize) => {
+            });
+
+        this.preferenceService
+            .select(UserPreferenceValues.PaginationSize)
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe((pageSize) => {
                 this.paginationPageSize = pageSize;
-            }),
-            formService.validateDynamicTableRow.subscribe(
+            });
+
+        formService.validateDynamicTableRow
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(
                 (validateDynamicTableRowEvent: ValidateDynamicTableRowEvent) => {
                     const row: DynamicTableRow = validateDynamicTableRowEvent.row;
                     if (row && row.value && row.value.name === 'admin') {
@@ -203,23 +215,28 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
                         validateDynamicTableRowEvent.preventDefault();
                     }
                 }
-            ),
+            );
 
-            formService.formContentClicked.subscribe((content) => {
+        formService.formContentClicked
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe((content) => {
                 this.showContentPreview(content);
-            }),
+            });
 
-            formService.validateForm.subscribe((validateFormEvent: ValidateFormEvent) => {
+        formService.validateForm
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(validateFormEvent => {
                 this.logService.log('Error form:' + validateFormEvent.errorsField);
-            })
-        );
+            });
 
         // Uncomment this block to see form event handling in action
         /*
-        formService.formEvents.subscribe((event: Event) => {
-            this.logService.log('Event fired:' + event.type);
-            this.logService.log('Event Target:' + event.target);
-        });
+        formService.formEvents
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe((event: Event) => {
+                this.logService.log('Event fired:' + event.type);
+                this.logService.log('Event Target:' + event.target);
+            });
         */
     }
 
@@ -247,8 +264,8 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
     }
 
     ngOnDestroy() {
-        this.subscriptions.forEach((subscription) => subscription.unsubscribe());
-        this.subscriptions = [];
+        this.onDestroy$.next(true);
+        this.onDestroy$.complete();
     }
 
     onTaskFilterClick(filter: FilterRepresentationModel): void {

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

@@ -1,5 +1,5 @@
 <div id="attachment-task-list" *ngIf="taskId">
-    <div class="adf-no-form-container">
+    <div>
 
         <adf-upload-drag-area
             [rootFolderId]="taskId">

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

@@ -19,12 +19,13 @@ import { Component, Input, OnChanges, OnInit, ViewChild, OnDestroy } from '@angu
 import {
     TaskListService,
     TaskAttachmentListComponent,
-    TaskDetailsModel,
-    TaskUploadService
+    TaskUploadService,
+    TaskDetailsModel
 } from '@alfresco/adf-process-services';
-import { UploadService, AlfrescoApiService, AppConfigService, FileUploadCompleteEvent } from '@alfresco/adf-core';
+import { UploadService, AlfrescoApiService, AppConfigService } from '@alfresco/adf-core';
 import { PreviewService } from '../../services/preview.service';
-import { Subscription } from 'rxjs';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 export function taskUploadServiceFactory(api: AlfrescoApiService, config: AppConfigService) {
     return new TaskUploadService(api, config);
@@ -51,9 +52,9 @@ export class TaskAttachmentsComponent implements OnInit, OnChanges, OnDestroy {
     @Input()
     taskId: string;
 
-    taskDetails: any;
+    taskDetails: TaskDetailsModel;
 
-    private subscriptions: Subscription[] = [];
+    private onDestroy$ = new Subject<boolean>();
 
     constructor(
         private uploadService: UploadService,
@@ -62,25 +63,22 @@ export class TaskAttachmentsComponent implements OnInit, OnChanges, OnDestroy {
     }
 
     ngOnInit() {
-        this.subscriptions.push(
-            this.uploadService.fileUploadComplete.subscribe(
-                (fileUploadCompleteEvent: FileUploadCompleteEvent) => this.onFileUploadComplete(fileUploadCompleteEvent.data)
-            )
-        );
+        this.uploadService.fileUploadComplete
+        .pipe(takeUntil(this.onDestroy$))
+        .subscribe(event => this.onFileUploadComplete(event.data));
     }
 
     ngOnChanges() {
         if (this.taskId) {
-            this.activitiTaskList.getTaskDetails(this.taskId)
-                .subscribe((taskDetails: TaskDetailsModel) => {
-                    this.taskDetails = taskDetails;
-                });
+            this.activitiTaskList
+                .getTaskDetails(this.taskId)
+                .subscribe(taskDetails => this.taskDetails = taskDetails);
         }
     }
 
     ngOnDestroy() {
-        this.subscriptions.forEach((subscription) => subscription.unsubscribe());
-        this.subscriptions = [];
+        this.onDestroy$.next(true);
+        this.onDestroy$.complete();
     }
 
     onFileUploadComplete(content: any) {

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

@@ -20,7 +20,8 @@ import { Router, ActivatedRoute, Params } from '@angular/router';
 import { NodePaging, Pagination, ResultSetPaging } from '@alfresco/js-api';
 import { SearchQueryBuilderService } from '@alfresco/adf-content-services';
 import { UserPreferencesService, SearchService, AppConfigService } from '@alfresco/adf-core';
-import { Subscription } from 'rxjs';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
     selector: 'app-search-result-component',
@@ -38,7 +39,7 @@ export class SearchResultComponent implements OnInit, OnDestroy {
 
     sorting = ['name', 'asc'];
 
-    private subscriptions: Subscription[] = [];
+    private onDestroy$ = new Subject<boolean>();
 
     constructor(public router: Router,
                 private config: AppConfigService,
@@ -55,19 +56,21 @@ export class SearchResultComponent implements OnInit, OnDestroy {
 
         this.sorting = this.getSorting();
 
-        this.subscriptions.push(
-            this.queryBuilder.updated.subscribe(() => {
+        this.queryBuilder.updated
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(() => {
                 this.sorting = this.getSorting();
                 this.isLoading = true;
-            }),
+            });
 
-            this.queryBuilder.executed.subscribe((resultSetPaging: ResultSetPaging) => {
+        this.queryBuilder.executed
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe((resultSetPaging: ResultSetPaging) => {
                 this.queryBuilder.paging.skipCount = 0;
 
                 this.onSearchResultLoaded(resultSetPaging);
                 this.isLoading = false;
-            })
-        );
+            });
 
         if (this.route) {
             this.route.params.forEach((params: Params) => {
@@ -102,8 +105,8 @@ export class SearchResultComponent implements OnInit, OnDestroy {
     }
 
     ngOnDestroy() {
-        this.subscriptions.forEach((subscription) => subscription.unsubscribe());
-        this.subscriptions = [];
+        this.onDestroy$.next(true);
+        this.onDestroy$.complete();
     }
 
     onSearchResultLoaded(resultSetPaging: ResultSetPaging) {

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

@@ -1,5 +1,8 @@
 <label for="nodeId"><b>{{'TAG.INSERT' | translate }}</b></label><br>
-<input id="nodeId" type="text" size="48" [(ngModel)]="nodeId"><br>
+<input id="nodeId" type="text" size="48" [(ngModel)]="nodeIdInput">
+<button mat-raised-button id="adf-tag-node-send" (click)="onSubmit()" color="primary">Confirm</button>
+
+<br>
 <div fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
     <div class="adf-tag-example-area" fxFlex.gt-md="1 1 auto">
         <mat-card>

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

@@ -25,9 +25,14 @@ import { Component } from '@angular/core';
 export class TagComponent {
 
     nodeId = '';
+    nodeIdInput = '';
     showDelete = true;
 
     toggleDeleteButton() {
         this.showDelete = !this.showDelete;
     }
+
+    onSubmit() {
+        this.nodeId = this.nodeIdInput;
+    }
 }

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

@@ -171,12 +171,12 @@
             <data-column key="description" title="Description"></data-column>
             <data-column key="created" title="Created">
                 <ng-template let-entry="$implicit">
-                    <div>{{entry.row.obj.created | date:'MMM d, yyyy' }} </div>
+                    <div>{{entry.row.obj.created | adfLocalizedDate: 'MMM d, yyyy' }} </div>
                 </ng-template>
             </data-column>
             <data-column key="dueDate" title="Due Date" type="date">
                 <ng-template let-entry="$implicit">
-                    <div>{{entry.row.obj.dueDate | date:'MMM d, yyyy' }} </div>
+                    <div>{{entry.row.obj.dueDate | adfLocalizedDate: 'MMM d, yyyy' }} </div>
                 </ng-template>
             </data-column>
             <data-column key="processInstanceId" title="Process Instance Id"></data-column>

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

@@ -15,18 +15,20 @@
  * 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 moment from 'moment-es6';
+import { Subject } from 'rxjs';
 
 @Component({
+    selector: 'app-task-list-demo',
     templateUrl: './task-list-demo.component.html',
     styleUrls: [`./task-list-demo.component.scss`]
 })
 
-export class TaskListDemoComponent implements OnInit {
+export class TaskListDemoComponent implements OnInit, OnDestroy {
     DEFAULT_SIZE = 20;
 
     taskListForm: FormGroup;
@@ -74,6 +76,8 @@ export class TaskListDemoComponent implements OnInit {
         {value: 'due-desc', title: 'Due (desc)'}
     ];
 
+    private onDestroy$ = new Subject<boolean>();
+
     constructor(private route: ActivatedRoute,
                 private formBuilder: FormBuilder) {
     }
@@ -93,6 +97,11 @@ export class TaskListDemoComponent implements OnInit {
         this.buildForm();
     }
 
+    ngOnDestroy() {
+        this.onDestroy$.next(true);
+        this.onDestroy$.complete();
+    }
+
     buildForm() {
         this.taskListForm = this.formBuilder.group({
             taskAppId: new FormControl(this.defaultAppId, [Validators.pattern('^[0-9]*$')]),
@@ -113,9 +122,10 @@ export class TaskListDemoComponent implements OnInit {
 
         this.taskListForm.valueChanges
             .pipe(
-                debounceTime(500)
+                debounceTime(500),
+                takeUntil(this.onDestroy$)
             )
-            .subscribe((taskFilter) => {
+            .subscribe(taskFilter => {
                 if (this.isFormValid()) {
                     this.filterTasks(taskFilter);
                 }