fix typo pageSize in InfinitePaginationComponent (#4296 )

Removing C268119 test that shouldn't be automated (#4297 )
[ADF-4056][ADF-4060][ADF-3930] Content Node Selector fix (#4293 )
2026-09-16 18:13:06 +00:00 · 2019-02-11 13:56:11 +00:00 · 2019-02-11 11:15:20 +00:00 · 2019-02-11 11:14:05 +00:00 · 2019-02-11 10:44:37 +00:00 · 2019-02-11 10:43:47 +00:00
1129 changed files with 31275 additions and 17029 deletions
@@ -1,12 +1,26 @@
 .git
 .github
 .vscode
+assets
 coverage
 docs
 e2e
+e2e-output
 node_modules
 scripts
 src
 lib
 integration
-/demo-shell/config/
+tools
+demo-shell/src/
+demo-shell/resources/
+/angular.json
+/desktop.ini
+/cspell.json
+/.travis.yml
+/CODE_OF_CONDUCT.md
+/.stylelintignore
+/ALFRESCOCORS.md
+/CONTRIBUTING.md
+/appveyor.yml
+/BROWSER-SUPPORT.md
@@ -31,3 +31,4 @@ src/environments/
 /docs/docs.json
 /protractorFailuresReport
 coverage/
+/desktop.ini
@@ -8,6 +8,9 @@ node_js:
 # Use the explicit NodeJS LTS version 8.9.4 to avoid any automatic upgrade of the version.
  - '8.9.4'

+install:
+    echo "no install"
+
 branches:
  only:
  - master
@@ -55,6 +58,7 @@ jobs:
          - npm run stylelint || exit 1
          - rm -rf tmp && (./scripts/smart-build.sh -b $TRAVIS_BRANCH || exit 1;);
          - npm run build:dist || exit 1
+          - ./scripts/license-list-generator.sh
        - stage: Unit test
          name: core
          script:
@@ -132,7 +136,7 @@ jobs:
            AFFECTED_LIBS="$(./scripts/affected-libs.sh -b $TRAVIS_BRANCH)";
            if [[ $AFFECTED_LIBS =~ "core$" || $AFFECTED_E2E = "e2e" || $TRAVIS_PULL_REQUEST == "false"  ]];
            then
-                (./scripts/test-e2e-lib.sh -host localhost:4200 --host_sso "$E2E_HOST_SSO" -proxy "$E2E_HOST" -u "$E2E_USERNAME" -p "$E2E_PASSWORD" -e $E2E_EMAIL -b -save --folder core --skip-lint --use-dist || exit 1;);
+                (./scripts/test-e2e-lib.sh -host localhost:4200 --host_sso "$E2E_HOST_SSO" --host_bpm "$E2E_HOST_BPM" --host_identity "$E2E_HOST_IDENTITY" -proxy "$E2E_HOST" -u "$E2E_USERNAME" -p "$E2E_PASSWORD" -e $E2E_EMAIL -b --folder core --skip-lint --use-dist || exit 1;);
            fi
        - stage: e2e Test # Test process-services
          name: process-services
@@ -141,7 +145,7 @@ jobs:
            AFFECTED_LIBS="$(./scripts/affected-libs.sh -b $TRAVIS_BRANCH)";
            if [[ $AFFECTED_LIBS =~ "process-services$" || $AFFECTED_E2E = "e2e" || $TRAVIS_PULL_REQUEST == "false"  ]];
            then
-                (./scripts/test-e2e-lib.sh -host localhost:4200 -proxy "$E2E_HOST" -u "$E2E_USERNAME" -p "$E2E_PASSWORD" -e $E2E_EMAIL -b -save --folder process-services --skip-lint --use-dist || exit 1;);
+                (./scripts/test-e2e-lib.sh -host localhost:4200 -proxy "$E2E_HOST" -u "$E2E_USERNAME" -p "$E2E_PASSWORD" -e $E2E_EMAIL -b --folder process-services --skip-lint --use-dist || exit 1;);
            fi
        - stage: e2e Test # Test content-services
          name: content-services
@@ -150,16 +154,16 @@ jobs:
            AFFECTED_LIBS="$(./scripts/affected-libs.sh -b $TRAVIS_BRANCH)";
            if [[ $AFFECTED_LIBS =~ "content-services$" || $AFFECTED_E2E = "e2e" || $TRAVIS_PULL_REQUEST == "false"  ]];
            then
-                (./scripts/test-e2e-lib.sh -host localhost:4200 -proxy "$E2E_HOST" -u "$E2E_USERNAME" -p "$E2E_PASSWORD" -e $E2E_EMAIL -b -save --folder content-services --skip-lint --use-dist || exit 1;);
+                (./scripts/test-e2e-lib.sh -host localhost:4200 -proxy "$E2E_HOST" -u "$E2E_USERNAME" -p "$E2E_PASSWORD" -e $E2E_EMAIL -b --folder content-services --skip-lint --use-dist || exit 1;);
            fi
        - stage: e2e Test # Test search
          name: search
          script:
            AFFECTED_E2E="$(./scripts/affected-folder.sh -b $TRAVIS_BRANCH -f "e2e")";
            AFFECTED_LIBS="$(./scripts/affected-libs.sh -b $TRAVIS_BRANCH)";
-            if [[ $AFFECTED_LIBS =~ "content-services$" || $AFFECTED_E2E = "e2e" ]];
+            if [[ $AFFECTED_LIBS =~ "content-services$" || $AFFECTED_E2E = "e2e" || $TRAVIS_PULL_REQUEST == "false"  ]];
            then
-                (./scripts/test-e2e-lib.sh -host localhost:4200 -proxy "$E2E_HOST" -u "$E2E_USERNAME" -p "$E2E_PASSWORD" -e $E2E_EMAIL -b -save --folder search --skip-lint --use-dist  || exit 1;);
+                (./scripts/test-e2e-lib.sh -host localhost:4200 -proxy "$E2E_HOST" -u "$E2E_USERNAME" -p "$E2E_PASSWORD" -e $E2E_EMAIL -b --folder search --skip-lint --use-dist  || exit 1;);
            fi
        - stage: e2e Test # Test process-services-cloud
          name: process-services-cloud
@@ -168,7 +172,7 @@ jobs:
            AFFECTED_LIBS="$(./scripts/affected-libs.sh -b $TRAVIS_BRANCH)";
            if [[ $AFFECTED_LIBS =~ "process-services-cloud$" || $AFFECTED_E2E = "e2e" || $TRAVIS_PULL_REQUEST == "false"  ]];
            then
-                (./scripts/test-e2e-lib.sh -host localhost:4200 --host_sso "$E2E_HOST_SSO" -proxy "$E2E_HOST" -u "$E2E_USERNAME" -p "$E2E_PASSWORD" -e $E2E_EMAIL -b -save --folder process-services-cloud --skip-lint --use-dist  || exit 1;);
+                (./scripts/test-e2e-lib.sh -host localhost:4200 --host_sso "$E2E_HOST_SSO" --host_bpm "$E2E_HOST_BPM" --host_identity "$E2E_HOST_IDENTITY" -proxy "$E2E_HOST" -u "$E2E_USERNAME" -p "$E2E_PASSWORD" -e $E2E_EMAIL -b --folder process-services-cloud --skip-lint --use-dist  || exit 1;);
            fi
        - stage: e2e Test # Test insights
          name: insights
@@ -177,10 +181,10 @@ jobs:
            AFFECTED_LIBS="$(./scripts/affected-libs.sh -b $TRAVIS_BRANCH)";
            if [[ $AFFECTED_LIBS =~ "process-services-cloud$" || $AFFECTED_E2E = "e2e" || $TRAVIS_PULL_REQUEST == "false"  ]];
            then
-                (./scripts/test-e2e-lib.sh -host localhost:4200 -proxy "$E2E_HOST" -u "$E2E_USERNAME" -p "$E2E_PASSWORD" -e $E2E_EMAIL -b -save --folder insights --skip-lint --use-dist  || exit 1;);
+                (./scripts/test-e2e-lib.sh -host localhost:4200 -proxy "$E2E_HOST" -u "$E2E_USERNAME" -p "$E2E_PASSWORD" -e $E2E_EMAIL -b --folder insights --skip-lint --use-dist  || exit 1;);
            fi
        - stage: Create Docker PR
-          script: (./scripts/pr-publish.sh -n $TRAVIS_BUILD_NUMBER -r $REPO_DOCKER -u $USERNAME_DOCKER -p $PASSWORD_DOCKER || exit 1)
+          script: 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)
        - stage: Deploy Docker PR
          script: 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

@@ -8,10 +8,6 @@
    <img src='https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master'  alt='travis
    Status' />
  </a>
-  <a title='Build Status AppVeyor' href="https://ci.appveyor.com/project/alfresco/alfresco-ng2-components">
-    <img src='https://ci.appveyor.com/api/projects/status/github/Alfresco/alfresco-ng2-components'  alt='travis
-    Status' />
-  </a>
  <a href='https://codecov.io/gh/Alfresco/alfresco-ng2-components'>
    <img src='http://img.shields.io/codecov/c/github/Alfresco/alfresco-ng2-components/master.svg?maxAge=2592000' alt='Coverage Status' />
  </a>
@@ -20,6 +16,7 @@
  </a>
 </p>

+
 ## Introduction

 See the [Introduction page](INTRODUCTION.md) to get started with the Alfresco Application Development Framework.
@@ -533,7 +533,7 @@
    },
    "core": {
      "root": "lib/core",
-      "sourceRoot": "lib/core/src",
+      "sourceRoot": "lib/core",
      "projectType": "library",
      "prefix": "adf",
      "architect": {
@@ -122,7 +122,8 @@
    "penta",
    "BASESHAREURL",
    "hardend",
-    "filedata"
+    "filedata",
+    "uncheck"
  ],
  "dictionaries": [
    "html",
@@ -15,7 +15,7 @@ module.exports = {
        }
    },
    "/activiti-app": {
-        "target": "http://localhost:9999",
+        "target": "http://localhost:8080",
        "secure": false,
        "pathRewrite": {
            "^/activiti-app/activiti-app": ""
@@ -1,6 +1,5 @@
 {
  "APP": {
-    "CREATE_LIBRARY": "Create Library",
    "INFO_DRAWER": {
      "TITLE": "Details",
      "COMMENTS": "Comments",
@@ -63,13 +62,14 @@
    "TASK_LIST": "Task List",
    "PROCESS_LIST": "Process List",
    "PROCESS_CLOUD": "Process Cloud",
-    "PROCESS_LIST_CLOUD": "Process List Cloud",
    "CARD_VIEW": "CardView",
    "PROCESS_SERVICES": "Process Services",
    "LOGIN": "Login",
    "CUSTOM_SOURCES": "Custom Sources",
    "DATATABLE": "Datatable",
    "DATATABLE_LAZY": "Datatable (Lazy)",
+    "DOCUMENT_LIST": "Document List",
+    "TEMPLATE": "Template",
    "FORM": "Form",
    "FORM_LIST": "Form List",
    "FORM_LOADING": "Form Loading",
@@ -88,7 +88,11 @@
    "SEARCH_CREATED_BY": "Created By",
    "SEARCH_SERVICE_APPROACH": "Check this to disable the input property and configure using the service",
    "HEADER_DATA": "Header Data",
-    "TREE_VIEW": "Tree View"
+    "TREE_VIEW": "Tree View",
+    "ICONS": "Icons",
+    "PEOPLE_GROUPS_CLOUD": "People/Group Cloud",
+    "PEOPLE_CLOUD": "People Cloud Component",
+    "GROUPS_CLOUD": "Groups Cloud Component"
  },
  "TRASHCAN": {
    "ACTIONS": {
@@ -143,7 +147,8 @@
      "THEME": "Select a theme",
      "SHOW_VERSION": "Show version",
      "HIDE_VERSION": "Hide version",
-      "LISTVIEW": "List view mode"
+      "LISTVIEW": "List view mode",
+      "CREATE_LIBRARY": "Create Library"
    },
    "ACTIONS": {
      "VERSIONS": "Manage versions",
@@ -187,6 +192,10 @@
    "TASK-AUDIT-LOG": "Task Audit log",
    "TASK-SHOW-HEADER": "Show details header"
  },
+  "PS_CLOUD_TAB": {
+    "APPS_TAB": "App",
+    "SETTINGS_TAB": "Settings"
+  },
  "FORM-LIST": {
    "STORE": "Store",
    "RESTORE": "Restore"
@@ -219,7 +228,7 @@
    "FACET_QUERIES": {
      "MY_FACET_QUERIES": "My facet queries",
      "CREATED_THIS_YEAR": "1.Created This Year",
-      "MIMETYPE": "2.Type",
+      "MIMETYPE": "2.Type: HTML",
      "XTRASMALL": "3.Size: xtra small",
      "SMALL": "4.Size: small",
      "MEDIUM": "5.Size: medium",
@@ -273,7 +282,34 @@
      }
    }
  },
-  "PROCESS_LIST_CLOUD": {
-    "TITLE": "PROCESS LIST CLOUD DEMO"
+  "PROCESS_LIST_CLOUD_DEMO": {
+    "TITLE": "PROCESS LIST CLOUD DEMO",
+    "CUSTOMIZE_FILTERS": "Customise your filter"
+  },
+  "TASK_LIST_CLOUD_DEMO": {
+    "CUSTOMIZE_FILTERS": "Customise your filter"
+  },
+  "PEOPLE_GROUPS_CLOUD": {
+    "SINGLE": "Single Selection",
+    "MULTI": "Multiple Selection",
+    "PRESELECTED_VALUE": "Preselect: ",
+    "ROLE": "Roles: "
+  },
+  "ABOUT": {
+    "TITLE": "Plugins",
+    "TABLE_HEADERS": {
+      "ID": "ID",
+      "NAME": "Name",
+      "VERSION": "Version",
+      "VENDOR": "Vendor",
+      "LICENSE": "License",
+      "RUNTIME": "Runtime",
+      "DESCRIPTION": "Description"
+    }
+  },
+  "SETTINGS_CLOUD": {
+      "MULTISELECTION": "Multiselection",
+      "TESTING_MODE": "Testing Mode",
+      "SELECTION_MODE": "Selection Mode"
  }
 }
@@ -1,19 +1,24 @@
 {
    "$schema": "../../lib/core/app-config/schema.json",
-    "ecmHost": "http://{hostname}:{port}",
-    "bpmHost": "http://{hostname}:{port}",
-    "baseShareUrl": null,
+    "ecmHost": "{protocol}//{hostname}{:port}",
+    "bpmHost": "{protocol}//{hostname}{:port}",
+    "identityHost": "{protocol}//{hostname}{:port}/auth/realms/alfresco",
    "loginRoute": "login",
    "providers": "ALL",
    "contextRootBpm": "activiti-app",
    "authType" : "BASIC",
+    "locale" : "en",
+    "auth": {
+      "withCredentials": false
+    },
    "oauth2": {
-      "host": "http://localhost:30081/auth/realms/myrealm",
-      "clientId": "activiti",
+      "host": "{protocol}//{hostname}{:port}/auth/realms/alfresco",
+      "clientId": "alfresco",
      "scope": "openid",
      "secret": "",
-      "implicitFlow": false,
-      "silentLogin": false,
+      "implicitFlow": true,
+      "silentLogin": true,
+      "redirectSilentIframeUri": "{protocol}//{hostname}{:port}/assets/silent-refresh.html",
      "redirectUri": "/",
      "redirectUriLogout": "/logout"
    },
@@ -28,43 +33,43 @@
        },
        {
            "key": "fr",
-            "label": "French"
+            "label": "Français"
        },
        {
            "key": "de",
-            "label": "German"
+            "label": "Deutsch"
        },
        {
            "key": "it",
-            "label": "Italian"
+            "label": "Italiano"
        },
        {
            "key": "es",
-            "label": "Spanish"
+            "label": "Español"
        },
        {
            "key": "ja",
-            "label": "Japanese"
+            "label": "日本語"
        },
        {
            "key": "nl",
-            "label": "Dutch"
+            "label": "Nederlands"
        },
        {
            "key": "pt-BR",
-            "label": "Brazilian Portuguese"
+            "label": "Português (Brasil)"
        },
        {
            "key": "nb",
-            "label": "Norwegian"
+            "label": "Bokmål"
        },
        {
            "key": "ru",
-            "label": "Russian"
+            "label": "Русский"
        },
        {
            "key": "zh-CN",
-            "label": "Simplified Chinese"
+            "label": "中文简体"
        }
    ],
    "search": {
@@ -114,15 +119,17 @@
      "facetQueries": {
        "label": "SEARCH.FACET_QUERIES.MY_FACET_QUERIES",
        "pageSize": 5,
+        "expanded": true,
+        "mincount": 1,
        "queries": [
          { "query": "created:2018", "label": "SEARCH.FACET_QUERIES.CREATED_THIS_YEAR" },
-          { "query": "content.mimetype", "label": "SEARCH.FACET_QUERIES.MIMETYPE" },
-          { "query": "content.size:[0 TO 10240]", "label": "SEARCH.FACET_QUERIES.XTRASMALL"},
-          { "query": "content.size:[10240 TO 102400]", "label": "SEARCH.FACET_QUERIES.SMALL"},
-          { "query": "content.size:[102400 TO 1048576]", "label": "SEARCH.FACET_QUERIES.MEDIUM" },
-          { "query": "content.size:[1048576 TO 16777216]", "label": "SEARCH.FACET_QUERIES.LARGE" },
-          { "query": "content.size:[16777216 TO 134217728]", "label": "SEARCH.FACET_QUERIES.XTRALARGE" },
-          { "query": "content.size:[134217728 TO MAX]", "label": "SEARCH.FACET_QUERIES.XXTRALARGE" }
+          { "query": "content.mimetype:text/html", "label": "SEARCH.FACET_QUERIES.MIMETYPE", "group":"Type facet queries" },
+          { "query": "content.size:[0 TO 10240]", "label": "SEARCH.FACET_QUERIES.XTRASMALL", "group":"Size facet queries"},
+          { "query": "content.size:[10240 TO 102400]", "label": "SEARCH.FACET_QUERIES.SMALL", "group":"Size facet queries"},
+          { "query": "content.size:[102400 TO 1048576]", "label": "SEARCH.FACET_QUERIES.MEDIUM", "group":"Size facet queries" },
+          { "query": "content.size:[1048576 TO 16777216]", "label": "SEARCH.FACET_QUERIES.LARGE", "group":"Size facet queries" },
+          { "query": "content.size:[16777216 TO 134217728]", "label": "SEARCH.FACET_QUERIES.XTRALARGE", "group":"Size facet queries" },
+          { "query": "content.size:[134217728 TO MAX]", "label": "SEARCH.FACET_QUERIES.XXTRALARGE", "group":"Size facet queries" }
        ]
      },
      "categories": [
@@ -534,6 +541,11 @@
            ]
        }
    },
+    "adf-edit-task-filter": {
+        "properties": [
+            "state", "assignment", "sort", "order"
+        ]
+    },
    "content-metadata": {
        "presets": {
            "default": {
@@ -544,5 +556,81 @@
    "sideNav": {
      "expandedSidenav": true,
      "preserveState": true
+    },
+    "adf-cloud-task-list": {
+        "presets": {
+            "default": [
+                {
+                    "key": "entry.id",
+                    "type": "text",
+                    "title": "ADF_CLOUD_TASK_LIST.PROPERTIES.ID",
+                    "sortable": true
+                },
+                {
+                    "key": "entry.name",
+                    "type": "text",
+                    "title": "ADF_CLOUD_TASK_LIST.PROPERTIES.NAME",
+                    "sortable": true,
+                    "cssClass": "full-width name-column ellipsis-cell"
+                },
+                {
+                    "key": "entry.status",
+                    "type": "text",
+                    "title": "ADF_CLOUD_TASK_LIST.PROPERTIES.STATUS",
+                    "sortable": true
+                },
+                {
+                    "key": "entry.priority",
+                    "type": "text",
+                    "title": "ADF_CLOUD_TASK_LIST.PROPERTIES.PRIORITY",
+                    "sortable": true
+                },
+                {
+                    "key": "entry.createdDate",
+                    "type": "date",
+                    "title": "ADF_CLOUD_TASK_LIST.PROPERTIES.CREATED_DATE",
+                    "sortable": true,
+                    "format": "timeAgo"
+                },
+                {
+                    "key": "entry.lastModified",
+                    "type": "date",
+                    "title": "ADF_CLOUD_TASK_LIST.PROPERTIES.LAST_MODIFIED",
+                    "sortable": true,
+                    "format": "timeAgo"
+                }
+            ]
+        }
+    },
+    "adf-cloud-process-list": {
+        "presets": {
+            "default": [
+                {
+                    "key": "entry.id",
+                    "type": "text",
+                    "title": "ADF_CLOUD_PROCESS_LIST.PROPERTIES.ID",
+                    "sortable": true
+                },
+                {
+                    "key": "entry.name",
+                    "type": "text",
+                    "title": "ADF_CLOUD_PROCESS_LIST.PROPERTIES.NAME",
+                    "sortable": true
+                },
+                {
+                    "key": "entry.status",
+                    "type": "text",
+                    "title": "ADF_CLOUD_PROCESS_LIST.PROPERTIES.STATUS",
+                    "sortable": true
+                },
+                {
+                    "key": "entry.startDate",
+                    "type": "date",
+                    "title": "ADF_CLOUD_PROCESS_LIST.PROPERTIES.START_DATE",
+                    "sortable": true,
+                    "format": "timeAgo"
+                }
+            ]
+        }
    }
 }
@@ -63,12 +63,22 @@ import { ContentModule } from '@alfresco/adf-content-services';
 import { InsightsModule } from '@alfresco/adf-insights';
 import { ProcessModule } from '@alfresco/adf-process-services';
 import { AuthBearerInterceptor } from './services';
-import { ProcessServicesCloudModule } from '@alfresco/adf-process-services-cloud';
-import { CloudComponent } from './components/cloud/cloud.component';
-import { TaskListCloudDemoComponent } from './components/task-list-cloud-demo/task-list-cloud-demo.component';
-import { ProcessListCloudExampleComponent } from './components/cloud/process-list-cloud-example.component';
+import { ProcessServicesCloudModule, GroupCloudModule } from '@alfresco/adf-process-services-cloud';
 import { TreeViewSampleComponent } from './components/tree-view/tree-view-sample.component';
 import { AppExtensionsModule } from './extensions/extensions.module';
+import { CloudLayoutComponent } from './components/app-layout/cloud/cloud-layout.component';
+import { AppsCloudDemoComponent } from './components/app-layout/cloud/apps-cloud-demo.component';
+import { ProcessesCloudDemoComponent } from './components/app-layout/cloud/processes-cloud-demo.component';
+import { TaskDetailsCloudDemoComponent } from './components/app-layout/cloud/task-details-cloud-demo.component';
+import { StartTaskCloudDemoComponent } from './components/app-layout/cloud/start-task-cloud-demo.component';
+import { CloudBreadcrumbsComponent } from './components/app-layout/cloud/cloud-breadcrumb-component';
+import { TasksCloudDemoComponent } from './components/app-layout/cloud/tasks-cloud-demo.component';
+import { CloudFiltersDemoComponent } from './components/app-layout/cloud/cloud-filters-demo.component';
+import { StartProcessCloudDemoComponent } from './components/app-layout/cloud/start-process-cloud-demo.component';
+import { TemplateDemoComponent } from './components/template-list/template-demo.component';
+import { PeopleGroupCloudDemoComponent } from './components/app-layout/cloud/people-groups-cloud-demo.component';
+import { CloudSettingsComponent } from './components/app-layout/cloud/cloud-settings.component';
+
@NgModule({
    imports: [
        BrowserModule,
@@ -87,12 +97,12 @@ import { AppExtensionsModule } from './extensions/extensions.module';
        ChartsModule,
        MonacoEditorModule.forRoot(),
        ProcessServicesCloudModule,
-        AppExtensionsModule.forRoot()
+        AppExtensionsModule.forRoot(),
+        GroupCloudModule
    ],
    declarations: [
        AppComponent,
        LoginComponent,
-        CloudComponent,
        LogoutComponent,
        AppLayoutComponent,
        HomeComponent,
@@ -118,10 +128,19 @@ import { AppExtensionsModule } from './extensions/extensions.module';
        DemoPermissionComponent,
        FormLoadingComponent,
        ReportIssueComponent,
-        TaskListCloudDemoComponent,
-        ProcessListCloudExampleComponent,
        TreeViewSampleComponent,
-        TaskListCloudDemoComponent
+        CloudLayoutComponent,
+        AppsCloudDemoComponent,
+        TasksCloudDemoComponent,
+        ProcessesCloudDemoComponent,
+        TaskDetailsCloudDemoComponent,
+        StartTaskCloudDemoComponent,
+        StartProcessCloudDemoComponent,
+        CloudBreadcrumbsComponent,
+        CloudFiltersDemoComponent,
+        TemplateDemoComponent,
+        PeopleGroupCloudDemoComponent,
+        CloudSettingsComponent
    ],
    providers: [
        {
@@ -29,10 +29,8 @@ import { FormNodeViewerComponent } from './components/process-service/form-node-
 import { AppsViewComponent } from './components/process-service/apps-view.component';
 import { SearchResultComponent } from './components/search/search-result.component';
 import { SearchExtendedComponent } from './components/search/search-extended.component';
-
 import { FilesComponent } from './components/files/files.component';
 import { FormComponent } from './components/form/form.component';
-
 import { FormListComponent } from './components/form/form-list.component';
 import { OverlayViewerComponent } from './components/overlay-viewer/overlay-viewer.component';
 import { SharedLinkViewComponent } from './components/shared-link-view/shared-link-view.component';
@@ -40,10 +38,16 @@ import { FormLoadingComponent } from './components/form/form-loading.component';
 import { DemoPermissionComponent } from './components/permissions/demo-permissions.component';
 import { ReportIssueComponent } from './components/report-issue/report-issue.component';
 import { AppComponent } from './app.component';
-import { CloudComponent } from './components/cloud/cloud.component';
-import { TaskListCloudDemoComponent } from './components/task-list-cloud-demo/task-list-cloud-demo.component';
-import { ProcessListCloudExampleComponent } from './components/cloud/process-list-cloud-example.component';
 import { TreeViewSampleComponent } from './components/tree-view/tree-view-sample.component';
+import { CloudLayoutComponent } from './components/app-layout/cloud/cloud-layout.component';
+import { ProcessesCloudDemoComponent } from './components/app-layout/cloud/processes-cloud-demo.component';
+import { TaskDetailsCloudDemoComponent } from './components/app-layout/cloud/task-details-cloud-demo.component';
+import { AppsCloudDemoComponent } from './components/app-layout/cloud/apps-cloud-demo.component';
+import { TasksCloudDemoComponent } from './components/app-layout/cloud/tasks-cloud-demo.component';
+import { StartTaskCloudDemoComponent } from './components/app-layout/cloud/start-task-cloud-demo.component';
+import { StartProcessCloudDemoComponent } from './components/app-layout/cloud/start-process-cloud-demo.component';
+import { TemplateDemoComponent } from './components/template-list/template-demo.component';
+import { PeopleGroupCloudDemoComponent } from './components/app-layout/cloud/people-groups-cloud-demo.component';

 export const appRoutes: Routes = [
    { path: 'login', component: LoginComponent },
@@ -81,11 +85,12 @@ export const appRoutes: Routes = [
    {
        path: 'breadcrumb',
        canActivate: [AuthGuardEcm],
+        component: AppLayoutComponent,
        loadChildren: 'app/components/breadcrumb-demo/breadcrumb-demo.module#AppBreadcrumbModule'
    },
    {
        path: 'notifications',
-        component: AppLayoutComponent ,
+        component: AppLayoutComponent,
        children: [
            {
                path: '',
@@ -95,7 +100,7 @@ export const appRoutes: Routes = [
    },
    {
        path: 'config-editor',
-        component: AppLayoutComponent ,
+        component: AppLayoutComponent,
        children: [
            {
                path: '',
@@ -105,7 +110,7 @@ export const appRoutes: Routes = [
    },
    {
        path: 'card-view',
-        component: AppLayoutComponent ,
+        component: AppLayoutComponent,
        children: [
            {
                path: '',
@@ -141,20 +146,45 @@ export const appRoutes: Routes = [
                children: [
                    {
                        path: '',
-                        component: CloudComponent,
-                        canActivate: [AuthGuard]
+                        component: AppsCloudDemoComponent
                    },
                    {
-                        path: ':applicationName/tasks',
-                        component: TaskListCloudDemoComponent,
-                        canActivate: [AuthGuard]
+                        path: 'people-group-cloud',
+                        component: PeopleGroupCloudDemoComponent
+                    },
+                    {
+                        path: ':applicationName',
+                        children: [
+                            {
+                                path: '',
+                                component: CloudLayoutComponent,
+                                children: [
+                                    {
+                                        path: 'tasks',
+                                        component: TasksCloudDemoComponent
+                                    },
+                                    {
+                                        path: 'processes',
+                                        component: ProcessesCloudDemoComponent
+                                    }
+                                ]
+                            },
+                            {
+                                path: 'start-task',
+                                component: StartTaskCloudDemoComponent
+                            },
+                            {
+                                path: 'start-process',
+                                component: StartProcessCloudDemoComponent
+                            },
+                            {
+                                path: 'task-details/:taskId',
+                                component: TaskDetailsCloudDemoComponent
+                            }
+                        ]
                    }
                ]
            },
-            {
-                path: 'process-list-cloud',
-                component: ProcessListCloudExampleComponent
-            },
            {
                path: 'node-selector',
                loadChildren: 'app/components/content-node-selector/content-node-selector.module#AppContentNodeSelectorModule'
@@ -291,6 +321,10 @@ export const appRoutes: Routes = [
                path: 'about',
                loadChildren: 'app/components/about/about.module#AppAboutModule'
            },
+            {
+                path: 'icons',
+                loadChildren: './components/icons/icons.module#AppIconsModule'
+            },
            { path: 'form', component: FormComponent },
            { path: 'form-list', component: FormListComponent },
            { path: 'form-loading', component: FormLoadingComponent },
@@ -307,6 +341,10 @@ export const appRoutes: Routes = [
                path: 'datatable-lazy',
                loadChildren: 'app/components/lazy-loading/lazy-loading.module#LazyLoadingModule'
            },
+            {
+                path: 'template-list',
+                component: TemplateDemoComponent
+            },
            {
                path: 'task-list',
                canActivate: [AuthGuardBpm],
@@ -1,45 +1,45 @@
-<h3>Plugins</h3>
+<h3>{{ 'ABOUT.TITLE' | translate }}</h3>
 <div class="adf-extension-details-container">
    <mat-table [dataSource]="extensions$ | async">
        <!-- $id Column -->
        <ng-container matColumnDef="$id">
-            <mat-header-cell *matHeaderCellDef>ID</mat-header-cell>
+            <mat-header-cell *matHeaderCellDef>{{ 'ABOUT.TABLE_HEADERS.ID' | translate }}</mat-header-cell>
            <mat-cell *matCellDef="let element">{{element.$id}}</mat-cell>
        </ng-container>

        <!-- $name Column -->
        <ng-container matColumnDef="$name">
-        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+        <mat-header-cell *matHeaderCellDef>{{ 'ABOUT.TABLE_HEADERS.NAME' | translate }}</mat-header-cell>
        <mat-cell *matCellDef="let element">{{element.$name}}</mat-cell>
        </ng-container>

        <!-- $version Column -->
        <ng-container matColumnDef="$version">
-            <mat-header-cell *matHeaderCellDef>Version</mat-header-cell>
+            <mat-header-cell *matHeaderCellDef>{{ 'ABOUT.TABLE_HEADERS.VERSION' | translate }}</mat-header-cell>
            <mat-cell *matCellDef="let element">{{element.$version}}</mat-cell>
        </ng-container>

        <!-- $vendor Column -->
        <ng-container matColumnDef="$vendor">
-            <mat-header-cell *matHeaderCellDef>Vendor</mat-header-cell>
+            <mat-header-cell *matHeaderCellDef>{{ 'ABOUT.TABLE_HEADERS.VENDOR' | translate }}</mat-header-cell>
            <mat-cell *matCellDef="let element">{{element.$vendor}}</mat-cell>
        </ng-container>

        <!-- $license Column -->
        <ng-container matColumnDef="$license">
-            <mat-header-cell *matHeaderCellDef>License</mat-header-cell>
+            <mat-header-cell *matHeaderCellDef>{{ 'ABOUT.TABLE_HEADERS.LICENSE' | translate }}</mat-header-cell>
            <mat-cell *matCellDef="let element">{{element.$license}}</mat-cell>
        </ng-container>

        <!-- $runtime Column -->
        <ng-container matColumnDef="$runtime">
-            <mat-header-cell *matHeaderCellDef>Runtime</mat-header-cell>
+            <mat-header-cell *matHeaderCellDef>{{ 'ABOUT.TABLE_HEADERS.RUNTIME' | translate }}</mat-header-cell>
            <mat-cell *matCellDef="let element">{{element.$runtime}}</mat-cell>
        </ng-container>

        <!-- $description Column -->
        <ng-container matColumnDef="$description">
-            <mat-header-cell *matHeaderCellDef>Description</mat-header-cell>
+            <mat-header-cell *matHeaderCellDef>{{ 'ABOUT.TABLE_HEADERS.DESCRIPTION' | translate }}</mat-header-cell>
            <mat-cell *matCellDef="let element">{{element.$description}}</mat-cell>
        </ng-container>

@@ -103,4 +103,13 @@
    }

    @media screen and ($mat-xsmall) {}
+
+    mat-sidenav-content > div {
+        display: flex;
+        height: 100%;
+
+        > div {
+            flex: auto;
+        }
+    }
 }
@@ -41,13 +41,14 @@ export class AppLayoutComponent implements OnInit {
        { href: '/task-list', icon: 'assignment', title: 'APP_LAYOUT.TASK_LIST' },
        { href: '/process-list', icon: 'assignment', title: 'APP_LAYOUT.PROCESS_LIST' },
        { href: '/cloud', icon: 'cloud', title: 'APP_LAYOUT.PROCESS_CLOUD' },
-        { href: '/process-list-cloud', icon: 'cloud', title: 'APP_LAYOUT.PROCESS_LIST_CLOUD' },
+        { href: '/cloud/people-group-cloud', icon: 'group', title: 'APP_LAYOUT.PEOPLE_GROUPS_CLOUD' },
        { href: '/activiti', icon: 'device_hub', title: 'APP_LAYOUT.PROCESS_SERVICES' },
        { href: '/login', icon: 'vpn_key', title: 'APP_LAYOUT.LOGIN' },
        { href: '/trashcan', icon: 'delete', title: 'APP_LAYOUT.TRASHCAN' },
        { href: '/dl-custom-sources', icon: 'extension', title: 'APP_LAYOUT.CUSTOM_SOURCES' },
        { href: '/datatable', icon: 'view_module', title: 'APP_LAYOUT.DATATABLE' },
        { href: '/datatable-lazy', icon: 'view_module', title: 'APP_LAYOUT.DATATABLE_LAZY' },
+        { href: '/template-list', icon: 'list_alt', title: 'APP_LAYOUT.TEMPLATE' },
        { href: '/form', icon: 'poll', title: 'APP_LAYOUT.FORM' },
        { href: '/form-list', icon: 'library_books', title: 'APP_LAYOUT.FORM_LIST' },
        { href: '/form-loading', icon: 'cached', title: 'APP_LAYOUT.FORM_LOADING' },
@@ -60,6 +61,7 @@ export class AppLayoutComponent implements OnInit {
        /* cspell:disable-next-line */
        { href: '/overlay-viewer', icon: 'pageview', title: 'APP_LAYOUT.OVERLAY_VIEWER' },
        { href: '/treeview', icon: 'nature', title: 'APP_LAYOUT.TREE_VIEW' },
+        { href: '/icons', icon: 'tag_faces', title: 'APP_LAYOUT.ICONS' },
        { href: '/about', icon: 'info_outline', title: 'APP_LAYOUT.ABOUT' }
    ];

@@ -1,2 +1 @@
-
 <adf-cloud-app-list (appClick)="onAppClick($event)"></adf-cloud-app-list>
@@ -17,17 +17,19 @@

 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
-@Component({
-    selector: 'app-cloud',
-    templateUrl: './cloud.component.html',
-    styleUrls: ['./cloud.component.scss']
-})
-export class CloudComponent {
+import { CloudLayoutService } from './services/cloud-layout.service';

-    constructor(private router: Router) {
+@Component({
+    templateUrl: './apps-cloud-demo.component.html'
+})
+
+export class AppsCloudDemoComponent {
+
+    constructor(private router: Router, private cloudLayoutService: CloudLayoutService) {
    }

    onAppClick(app) {
-        this.router.navigate([`/cloud/${app.name}/tasks/`]);
+        this.cloudLayoutService.setCurrentTaskFilterParam({key: 'my-tasks'});
+        this.router.navigate([`/cloud/${app.name}`]);
    }
 }
@@ -0,0 +1,8 @@
+<adf-toolbar>
+  <div fxLayout="column" fxLayoutAlign="center">
+    <div fxLayout="row">
+      <div class="adf-app-crumb">{{applicationName + ' >'}} </div>
+      <div class="adf-filter-crumb"> {{filterName | translate}}</div>
+    </div>
+  </div>
+</adf-toolbar>
@@ -0,0 +1,8 @@
+.adf-app-crumb {
+  opacity: 0.5;
+}
+
+.adf-filter-crumb {
+  opacity: 0.8;
+  margin-left: 5px;
+}
@@ -0,0 +1,44 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-cloud-breadcrumbs',
+  templateUrl: './cloud-breadcrumb-component.html',
+  styleUrls: ['cloud-breadcrumb-component.scss']
+})
+export class CloudBreadcrumbsComponent implements OnInit {
+
+  applicationName: string;
+  filterName: string;
+
+  constructor(private route: ActivatedRoute) { }
+
+  ngOnInit() {
+    this.route.parent.params.subscribe((
+      params) => {
+      this.applicationName = params.applicationName;
+    });
+    this.route.queryParams.subscribe((params) => {
+      if (params.filterName) {
+        this.filterName = params.filterName;
+      }
+    });
+  }
+}
@@ -0,0 +1,31 @@
+<mat-accordion>
+  <mat-expansion-panel [expanded]="expandTaskFilter" (opened)="onTaskFilterOpen()" (closed)="onTaskFilterClose()" data-automation-id='Task Filters'>
+    <mat-expansion-panel-header>
+      <mat-panel-title>
+        Task Filters
+      </mat-panel-title>
+    </mat-expansion-panel-header>
+    <adf-cloud-task-filters
+        *ngIf="expandTaskFilter"
+        [appName]="appName"
+        [showIcons]="true"
+        [filterParam]="currentTaskFilter$ | async"
+        (filterClick)="onTaskFilterSelected($event)">
+      </adf-cloud-task-filters>
+  </mat-expansion-panel>
+
+  <mat-expansion-panel [expanded]="expandProcessFilter" (opened)="onProcessFilterOpen()" (closed)="onProcessFilterClose()" data-automation-id='Process Filters'>
+    <mat-expansion-panel-header>
+      <mat-panel-title>
+          Process Filters
+      </mat-panel-title>
+    </mat-expansion-panel-header>
+    <adf-cloud-process-filters
+        *ngIf="expandProcessFilter"
+        [appName]="appName"
+        [showIcons]="true"
+        [filterParam]="currentProcessFilter$ | async"
+        (filterClick)="onProcessFilterSelected($event)">
+      </adf-cloud-process-filters>
+  </mat-expansion-panel>
+</mat-accordion>
@@ -0,0 +1,3 @@
+adf-cloud-task-filters .adf-filters__entry, adf-cloud-process-filters .adf-filters__entry {
+  padding-left: 0 !important;
+}
@@ -0,0 +1,95 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, ViewEncapsulation, Input, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { CloudLayoutService } from './services/cloud-layout.service';
+import { Router, ActivatedRoute } from '@angular/router';
+@Component({
+    selector: 'app-cloud-filters-demo',
+    templateUrl: './cloud-filters-demo.component.html',
+    styleUrls: ['cloud-filters-demo.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class CloudFiltersDemoComponent implements OnInit {
+
+    @Input()
+    appName: string;
+
+    currentTaskFilter$: Observable<any>;
+    currentProcessFilter$: Observable<any>;
+
+    toggleTaskFilter = true;
+    toggleProcessFilter = true;
+
+    expandTaskFilter = true;
+    expandProcessFilter = false;
+
+    constructor(
+        private cloudLayoutService: CloudLayoutService,
+        private router: Router,
+        private route: ActivatedRoute
+    ) {}
+
+    ngOnInit() {
+        this.currentTaskFilter$ = this.cloudLayoutService.getCurrentTaskFilterParam();
+        this.currentProcessFilter$ = this.cloudLayoutService.getCurrentProcessFilterParam();
+        let root = '';
+        if (this.route.snapshot && this.route.snapshot.firstChild) {
+            root = this.route.snapshot.firstChild.url[0].path;
+            if (root === 'tasks') {
+                this.expandTaskFilter = true;
+                this.expandProcessFilter = false;
+            } else if (root === 'processes') {
+                this.expandProcessFilter = true;
+                this.expandTaskFilter = false;
+            }
+        }
+    }
+
+    onTaskFilterSelected(filter) {
+        this.cloudLayoutService.setCurrentTaskFilterParam({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});
+        const currentFilter = Object.assign({}, filter);
+        this.router.navigate([`/cloud/${this.appName}/processes/`], { queryParams: currentFilter });
+    }
+
+    onTaskFilterOpen(): boolean {
+        this.expandTaskFilter = true;
+        this.expandProcessFilter = false;
+        return this.toggleTaskFilter;
+    }
+
+    onTaskFilterClose(): boolean {
+        return !this.toggleTaskFilter;
+    }
+
+    onProcessFilterOpen(): boolean {
+        this.expandProcessFilter = true;
+        this.expandTaskFilter = false;
+        return this.toggleProcessFilter;
+    }
+
+    onProcessFilterClose(): boolean {
+        return !this.toggleProcessFilter;
+    }
+}
@@ -0,0 +1,41 @@
+<mat-tab-group fxFill class="adf-cloud-layout-tab-body">
+  <mat-tab label="{{'PS_CLOUD_TAB.APPS_TAB' | translate}}">
+    <div fxFill fxLayout>
+      <adf-sidenav-layout fxFlex [sidenavMin]="70" [sidenavMax]="270" [stepOver]="780">
+        <adf-sidenav-layout-header>
+          <ng-template>
+            <app-cloud-breadcrumbs></app-cloud-breadcrumbs>
+          </ng-template>
+        </adf-sidenav-layout-header>
+        <adf-sidenav-layout-navigation>
+          <ng-template>
+            <adf-sidebar-action-menu [expanded]="true" [width]="205" title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
+              <mat-icon adf-sidebar-menu-title-icon>arrow_drop_down</mat-icon>
+              <div adf-sidebar-menu-options>
+                <button mat-menu-item data-automation-id="btn-start-task" (click)="onStartTask()">
+                  <mat-icon>assessment</mat-icon>
+                  <span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_TASK' | translate}}</span>
+                </button>
+              </div>
+              <div adf-sidebar-menu-options>
+                <button mat-menu-item data-automation-id="btn-start-process" (click)="onStartProcess()">
+                  <mat-icon>assessment</mat-icon>
+                  <span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_PROCESS' | translate}}</span>
+                </button>
+              </div>
+            </adf-sidebar-action-menu>
+            <app-cloud-filters-demo [appName]="applicationName"></app-cloud-filters-demo>
+          </ng-template>
+        </adf-sidenav-layout-navigation>
+        <adf-sidenav-layout-content>
+          <ng-template>
+            <router-outlet></router-outlet>
+          </ng-template>
+        </adf-sidenav-layout-content>
+      </adf-sidenav-layout>
+    </div>
+  </mat-tab>
+  <mat-tab label="{{'PS_CLOUD_TAB.SETTINGS_TAB' | translate}}">
+      <app-cloud-settings></app-cloud-settings>
+  </mat-tab>
+</mat-tab-group>
@@ -0,0 +1,7 @@
+.adf-cloud-layout-overflow {
+  overflow: auto;
+}
+
+.adf-cloud-layout-tab-body .mat-tab-body-wrapper {
+  height: 100%;
+}
@@ -0,0 +1,65 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { CloudLayoutService } from './services/cloud-layout.service';
+
+@Component({
+    selector: 'app-cloud-layout',
+    templateUrl: './cloud-layout.component.html',
+    styleUrls: ['./cloud-layout.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class CloudLayoutComponent implements OnInit {
+    displayMenu = true;
+    applicationName: string;
+
+    constructor(
+        private router: Router,
+        private route: ActivatedRoute,
+        private cloudLayoutService: CloudLayoutService
+    ) { }
+
+    ngOnInit() {
+        let root: string = '';
+        this.route.params.subscribe((params) => {
+            this.applicationName = params.applicationName;
+        });
+
+        if (this.route.snapshot && this.route.snapshot.firstChild) {
+            root = this.route.snapshot.firstChild.url[0].path;
+        }
+
+        this.route.queryParams.subscribe((params) => {
+            if (root === 'tasks' && params.id) {
+                this.cloudLayoutService.setCurrentTaskFilterParam({ id: params.id });
+            }
+
+            if (root === 'processes' && params.id) {
+                this.cloudLayoutService.setCurrentProcessFilterParam({ id: params.id });
+            }
+        });
+    }
+
+    onStartTask() {
+        this.router.navigate([`/cloud/${this.applicationName}/start-task/`]);
+    }
+
+    onStartProcess() {
+        this.router.navigate([`/cloud/${this.applicationName}/start-process/`]);
+    }
+}
@@ -0,0 +1,18 @@
+<div fxFlex fxLayout="column" class="adf-settings-container">
+    <mat-checkbox [color]="'primary'" [checked]="multiselect" (change)="toggleMultiselect()" data-automation-id="multiSelection">
+        {{ 'SETTINGS_CLOUD.MULTISELECTION' | translate }}
+    </mat-checkbox>
+    <mat-checkbox [color]="'primary'" [checked]="testingMode" (change)="toggleTestingMode()" data-automation-id="testingMode">
+        {{ 'SETTINGS_CLOUD.TESTING_MODE' | translate }}
+    </mat-checkbox>
+    <mat-form-field>
+        <mat-label>
+            {{ 'SETTINGS_CLOUD.SELECTION_MODE' | translate }}
+        </mat-label>
+        <mat-select [(ngModel)]="selectionMode" (selectionChange)="onSelectionModeChange()">
+            <mat-option *ngFor="let option of selectionModeOptions" [value]="option.value">
+                {{ option.title }}
+            </mat-option>
+        </mat-select>
+    </mat-form-field>
+</div>
@@ -0,0 +1,7 @@
+.adf-settings-container {
+    padding: 20px 30px;
+}
+
+.adf-settings-container mat-form-field {
+    max-width: 200px;
+}
@@ -0,0 +1,78 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, OnInit } from '@angular/core';
+import { CloudLayoutService } from './services/cloud-layout.service';
+
+@Component({
+    selector: 'app-cloud-settings',
+    templateUrl: './cloud-settings.component.html',
+    styleUrls: ['./cloud-settings.component.scss']
+})
+export class CloudSettingsComponent implements OnInit {
+
+    multiselect: boolean;
+    selectionMode: string;
+    testingMode: boolean;
+
+    selectionModeOptions = [
+        { value: '', title: 'None' },
+        { value: 'single', title: 'Single' },
+        { value: 'multiple', title: 'Multiple' }
+    ];
+
+    constructor(private cloudLayoutService: CloudLayoutService) { }
+
+    ngOnInit() {
+        this.cloudLayoutService.getCurrentSettings()
+            .subscribe((settings) => this.setCurrentSettings(settings));
+    }
+
+    setCurrentSettings(settings) {
+        if (settings.multiselect !== undefined) {
+            this.multiselect = settings.multiselect;
+        }
+        if (settings.testingMode !== undefined) {
+            this.testingMode = settings.testingMode;
+        }
+        if (settings.selectionMode !== undefined) {
+            this.selectionMode = settings.selectionMode;
+        }
+    }
+
+    toggleMultiselect() {
+        this.multiselect = !this.multiselect;
+        this.setSetting();
+    }
+
+    toggleTestingMode() {
+        this.testingMode = !this.testingMode;
+        this.setSetting();
+    }
+
+    onSelectionModeChange() {
+        this.setSetting();
+    }
+
+    setSetting() {
+        this.cloudLayoutService.setCurrentSettings({
+            multiselect: this.multiselect,
+            testingMode: this.testingMode,
+            selectionMode: this.selectionMode
+        });
+    }
+}
@@ -0,0 +1,76 @@
+<mat-card class="adf-section">
+    <mat-card-title>
+        {{ 'APP_LAYOUT.PEOPLE_CLOUD' | translate}}
+    </mat-card-title>
+
+    <mat-card-content>
+        <br>
+        <mat-radio-group (change)="onChangePeopleMode($event)">
+            <mat-radio-button checked="true" class="adf-people-single-mode" value="{{ peopleSingleMode }}">{{
+                'PEOPLE_GROUPS_CLOUD.SINGLE' | translate }}</mat-radio-button>
+            <mat-radio-button class="adf-people-multiple-mode" value="{{ peopleMultipleMode }}">{{
+                'PEOPLE_GROUPS_CLOUD.MULTI' | translate }}</mat-radio-button>
+        </mat-radio-group>
+        <div class="people-control-options">
+            <mat-form-field class="adf-preselect-value">
+                <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.ROLE' | translate }} ['ACTIVITI_ADMIN', "ACTIVITI_USER"]</mat-label>
+                <input matInput (input)="setPeopleRoles($event)" />
+            </mat-form-field>
+            <mat-form-field class="adf-preselect-value full">
+                <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.PRESELECTED_VALUE' | translate }}: {{ DEFAULT_PEOPLE_PLACEHOLDER }}</mat-label>
+                <input matInput (input)="setPeoplePreselectValue($event)" />
+            </mat-form-field>
+        </div>
+        <div>
+            <adf-cloud-people [preSelectUsers]="preSelectUsers" [roles]="peopleRoles" [mode]="peopleMode"></adf-cloud-people>
+        </div>
+
+        <div class="adf-people-list" *ngIf="canShowPeopleList()">
+            <mat-list role="list">
+                <mat-list-item *ngFor="let item of preSelectUsers" role="listitem">
+                    <mat-icon mat-list-icon>person</mat-icon>
+                    {{ item?.firstName }} {{ item?.lastName }}
+                </mat-list-item>
+            </mat-list>
+        </div>
+    </mat-card-content>
+</mat-card>
+
+<mat-card class="adf-section">
+    <mat-card-title>
+        {{ 'APP_LAYOUT.GROUPS_CLOUD' | translate}}
+    </mat-card-title>
+
+    <mat-card-content>
+        <br>
+        <mat-radio-group (change)="onChangeGroupsMode($event)">
+            <mat-radio-button checked="true" class="adf-people-single-mode" value="{{ groupSingleMode }}">{{
+                'PEOPLE_GROUPS_CLOUD.SINGLE' | translate }}</mat-radio-button>
+            <mat-radio-button class="adf-people-multiple-mode" value="{{ groupMultipleMode }}">{{
+                'PEOPLE_GROUPS_CLOUD.MULTI' | translate }}</mat-radio-button>
+        </mat-radio-group>
+        <div class="groups-control-options">
+            <mat-form-field class="adf-preselect-value">
+                <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.ROLE' | translate }} ['ACTIVITI_ADMIN', "ACTIVITI_USER"]</mat-label>
+                <input matInput (input)="setGroupRoles($event)" />
+            </mat-form-field>
+            <mat-form-field class="adf-preselect-value full">
+                <mat-label>Preselect: {{ DEFAULT_GROUP_PLACEHOLDER }}</mat-label>
+                <input matInput (input)="setGroupsPreselectValue($event)" />
+            </mat-form-field>
+        </div>
+        <div>
+            <adf-cloud-group [mode]="groupMode" [roles]="groupRoles" [preSelectGroups]="preSelectGroup" (selectGroup)="onSelectGroup($event)"
+                (removeGroup)="onRemoveGroup($event)"></adf-cloud-group>
+        </div>
+
+        <div class="adf-group-list" *ngIf="canShowGroupList()">
+            <mat-list role="list">
+                <mat-list-item *ngFor="let item of preSelectGroup" role="listitem">
+                    <mat-icon mat-list-icon>group</mat-icon>
+                    {{ item.name }}
+                </mat-list-item>
+            </mat-list>
+        </div>
+    </mat-card-content>
+</mat-card>
@@ -0,0 +1,27 @@
+.adf {
+    &-section {
+        mat-card-title {
+            font-size:18px;
+            font-weight: bold;
+        }
+        mat-radio-group {
+            margin:7px 10px;
+
+            mat-radio-button {
+                margin: 0 3px;
+            }
+        }
+
+        mat-card-content {
+
+            .adf-preselect-value {
+                margin-right: 15px;
+                min-width: 330px;
+
+                &-full {
+                    width:60%;
+                }
+            }
+        }
+    }
+}
@@ -0,0 +1,119 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, ViewEncapsulation } from '@angular/core';
+import { PeopleCloudComponent, GroupCloudComponent, GroupModel } from '@alfresco/adf-process-services-cloud';
+import { MatRadioChange } from '@angular/material';
+
+@Component({
+    selector: 'app-people-groups-cloud',
+    templateUrl: './people-groups-cloud-demo.component.html',
+    styleUrls: ['./people-groups-cloud-demo.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class PeopleGroupCloudDemoComponent {
+
+    DEFAULT_GROUP_PLACEHOLDER: string = `[{"id": "1", "name":"activitiUserGroup"}]`;
+    DEFAULT_PEOPLE_PLACEHOLDER: string = `[{"email": "example@alfresco.com", "firstName":"Administrator", "lastName": "ADF"}]`;
+
+    peopleMode: string = PeopleCloudComponent.MODE_SINGLE;
+    preSelectUsers: string[] = [];
+    peopleRoles: string[] = [];
+
+    groupMode: string = GroupCloudComponent.MODE_SINGLE;
+    preSelectGroup: GroupModel[] = [];
+    selectedGroupList: GroupModel[] = [];
+    groupRoles: string[];
+
+    setPeoplePreselectValue(event: any) {
+        this.preSelectUsers = this.getArrayFromString(event.target.value);
+    }
+
+    setGroupsPreselectValue(event: any) {
+        this.preSelectGroup = this.getArrayFromString(event.target.value);
+    }
+
+    setPeopleRoles(event: any) {
+        this.peopleRoles = this.getArrayFromString(event.target.value);
+    }
+
+    setGroupRoles(event: any) {
+        this.groupRoles = this.getArrayFromString(event.target.value);
+    }
+
+    onChangePeopleMode(event: MatRadioChange) {
+       this.peopleMode = event.value;
+       this.preSelectUsers = [...this.preSelectUsers];
+    }
+
+    onChangeGroupsMode(event: MatRadioChange) {
+        this.groupMode = event.value;
+        this.preSelectGroup = [...this.preSelectGroup];
+    }
+
+    isStringArray(str: string) {
+        try {
+            const result = JSON.parse(str);
+            return Array.isArray(result);
+        } catch (e) {
+            return false;
+        }
+    }
+
+    private getArrayFromString(value: string) {
+
+        if (this.isStringArray(value)) {
+            return JSON.parse(value);
+        } else {
+            return [];
+        }
+    }
+
+    canShowPeopleList() {
+        return this.peopleMode === GroupCloudComponent.MODE_MULTIPLE;
+    }
+
+    canShowGroupList() {
+        return this.groupMode === GroupCloudComponent.MODE_MULTIPLE;
+    }
+
+    onRemoveGroup(group: GroupModel) {
+        this.preSelectGroup = this.preSelectGroup.filter((value: any) => value.id !== group.id);
+    }
+
+    onSelectGroup(group: GroupModel) {
+        if (this.groupMode === GroupCloudComponent.MODE_MULTIPLE) {
+            this.preSelectGroup.push(group);
+        }
+    }
+
+    get peopleSingleMode() {
+        return PeopleCloudComponent.MODE_SINGLE;
+    }
+
+    get peopleMultipleMode() {
+        return PeopleCloudComponent.MODE_MULTIPLE;
+    }
+
+    get groupSingleMode() {
+        return GroupCloudComponent.MODE_SINGLE;
+    }
+
+    get groupMultipleMode() {
+        return GroupCloudComponent.MODE_MULTIPLE;
+    }
+}
@@ -0,0 +1,38 @@
+<div fxLayout="column" fxFill fxLayoutGap="2px">
+    <adf-cloud-edit-process-filter
+        [appName]="applicationName"
+        [id]="filterId"
+        [filterProperties]="processFilterProperties"
+        (filterChange)="onFilterChange($event)"
+        (action)="onProcessFilterAction($event)">
+    </adf-cloud-edit-process-filter>
+    <div fxLayout="column" fxFlex fxLayoutAlign="space-between" *ngIf="editedFilter">
+        <adf-cloud-process-list fxFlex class="adf-cloud-layout-overflow"
+                                [applicationName]="editedFilter.appName"
+                                [initiator]="editedFilter.initiator"
+                                [processDefinitionId]="editedFilter.processDefinitionId"
+                                [processDefinitionKey]="editedFilter.processDefinitionKey"
+                                [id]="editedFilter.processInstanceId"
+                                [status]="editedFilter.state"
+                                [name]="editedFilter.processName"
+                                [sorting]="sortArray"
+                                [selectionMode]="selectionMode"
+                                [multiselect]="multiselect"
+                                (rowClick)="onRowClick($event)"
+                                (rowsSelected)="onRowsSelected($event)"
+                                #processCloud>
+        </adf-cloud-process-list>
+        <adf-pagination 
+            [target]="processCloud" 
+            (changePageSize)="onChangePageSize($event)"
+            (nextPage)="resetSelectedRows()"
+            (prevPage)="resetSelectedRows()">
+        </adf-pagination>
+        <div *ngIf="testingMode">
+            Selected rows:
+            <ul>
+                <li *ngFor="let row of selectedRows">{{ row.id }}</li>
+            </ul>
+        </div>
+    </div>
+</div>
@@ -0,0 +1,127 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, ViewChild, OnInit } from '@angular/core';
+import {
+    ProcessListCloudComponent,
+    ProcessFilterCloudModel,
+    ProcessListCloudSortingModel,
+    ProcessFiltersCloudComponent
+} from '@alfresco/adf-process-services-cloud';
+
+import { ActivatedRoute, Router } from '@angular/router';
+import { UserPreferencesService, AppConfigService } from '@alfresco/adf-core';
+import { CloudLayoutService } from './services/cloud-layout.service';
+
+@Component({
+    templateUrl: './processes-cloud-demo.component.html',
+    styleUrls: ['./processes-cloud-demo.component.scss']
+})
+export class ProcessesCloudDemoComponent implements OnInit {
+
+    public static ACTION_SAVE_AS = 'SAVE_AS';
+    static PROCESS_FILTER_PROPERTY_KEYS = 'adf-edit-process-filter.properties';
+
+    @ViewChild('processCloud')
+    processCloud: ProcessListCloudComponent;
+
+    @ViewChild('processFiltersCloud')
+    processFiltersCloud: ProcessFiltersCloudComponent;
+
+    applicationName: string = '';
+    isFilterLoaded: boolean;
+
+    filterId: string = '';
+    sortArray: any = [];
+    selectedRow: any;
+    multiselect: boolean;
+    selectionMode: string;
+    selectedRows: string[] = [];
+    testingMode: boolean;
+    processFilterProperties: any[] = [];
+
+    editedFilter: ProcessFilterCloudModel;
+
+    constructor(
+        private route: ActivatedRoute,
+        private router: Router,
+        private cloudLayoutService: CloudLayoutService,
+        private userPreference: UserPreferencesService,
+        private appConfig: AppConfigService) {
+        const properties = this.appConfig.get<Array<any>>(ProcessesCloudDemoComponent.PROCESS_FILTER_PROPERTY_KEYS);
+        if (properties) {
+            this.processFilterProperties = properties;
+        }
+    }
+
+    ngOnInit() {
+        this.isFilterLoaded = false;
+        this.route.parent.params.subscribe((params) => {
+            this.applicationName = params.applicationName;
+        });
+
+        this.route.queryParams.subscribe((params) => {
+            this.isFilterLoaded = true;
+            this.onFilterChange(params);
+            this.filterId = params.id;
+        });
+
+        this.cloudLayoutService.getCurrentSettings()
+            .subscribe((settings) => this.setCurrentSettings(settings));
+    }
+
+    setCurrentSettings(settings) {
+        if (settings.multiselect !== undefined) {
+            this.multiselect = settings.multiselect;
+        }
+        if (settings.testingMode !== undefined) {
+            this.testingMode = settings.testingMode;
+        }
+        if (settings.selectionMode !== undefined) {
+            this.selectionMode = settings.selectionMode;
+        }
+    }
+
+    onChangePageSize(event) {
+        this.userPreference.paginationSize = event.maxItems;
+    }
+
+    resetSelectedRows() {
+        this.selectedRows = [];
+    }
+
+    onRowClick($event) {
+        this.selectedRow = $event;
+    }
+
+    onFilterChange(query: any) {
+        this.editedFilter = Object.assign({}, query);
+        this.sortArray = [new ProcessListCloudSortingModel({ orderBy: this.editedFilter.sort, direction: this.editedFilter.order })];
+    }
+
+    onProcessFilterAction(filterAction: any) {
+        this.cloudLayoutService.setCurrentProcessFilterParam({ id: filterAction.filter.id });
+        if (filterAction.actionType === ProcessesCloudDemoComponent.ACTION_SAVE_AS) {
+            this.router.navigate([`/cloud/${this.applicationName}/processes/`], { queryParams: filterAction.filter });
+        }
+    }
+
+    onRowsSelected(nodes) {
+        this.resetSelectedRows();
+        this.selectedRows = nodes.map((node) => node.obj.entry);
+    }
+}
@@ -0,0 +1,68 @@
+/*!
+ * @license
+ * Copyright 2016 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 { Injectable } from '@angular/core';
+import { Observable, BehaviorSubject } from 'rxjs';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class CloudLayoutService {
+
+    private settings = {
+        multiselect: false,
+        testingMode: false,
+        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>;
+
+    constructor() {
+        this.filterTask$ = this.filterTaskSubject.asObservable();
+        this.filterProcess$ = this.filterProcessSubject.asObservable();
+        this.settings$ = this.settingsSubject.asObservable();
+    }
+
+    getCurrentTaskFilterParam() {
+        return this.filterTask$;
+    }
+
+    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);
+    }
+}
@@ -0,0 +1,7 @@
+<adf-cloud-start-process 
+    [appName]="applicationName" 
+    [name]="processName" 
+    (error)="openSnackMessage($event)" 
+    (success)="onStartProcessSuccess()"
+    (cancel)="onCancelStartProcess()">
+</adf-cloud-start-process>
@@ -0,0 +1,62 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { NotificationService, AppConfigService } from '@alfresco/adf-core';
+import { CloudLayoutService } from './services/cloud-layout.service';
+@Component({
+    templateUrl: './start-process-cloud-demo.component.html',
+    styleUrls: ['./start-process-cloud-demo.component.scss']
+})
+export class StartProcessCloudDemoComponent implements OnInit {
+
+    applicationName;
+    processName: string;
+
+    constructor(private appConfig: AppConfigService,
+                private cloudLayoutService: CloudLayoutService,
+                private route: ActivatedRoute,
+                private notificationService: NotificationService,
+                private router: Router) {
+    }
+
+    ngOnInit() {
+        this.route.parent.params.subscribe((params) => {
+            this.applicationName = params.applicationName;
+        });
+
+        this.processName = this.appConfig.get<string>('adf-start-process.name');
+    }
+
+    onStartProcessSuccess() {
+        this.cloudLayoutService.setCurrentProcessFilterParam({ key: 'running-processes' });
+        this.router.navigate([`/cloud/${this.applicationName}/processes`]);
+    }
+
+    onCancelStartProcess() {
+        this.cloudLayoutService.setCurrentProcessFilterParam({ key: 'all-processes' });
+        this.router.navigate([`/cloud/${this.applicationName}/processes`]);
+    }
+
+    openSnackMessage(event: any) {
+        this.notificationService.openSnackMessage(
+            event.response.body.message,
+            4000
+        );
+    }
+}
@@ -0,0 +1,6 @@
+<adf-cloud-start-task
+    [appName]="applicationName"
+    (error)="openSnackMessage($event)"
+    (success)="onStartTaskSuccess()"
+    (cancel)="onCancelStartTask()">
+</adf-cloud-start-task>
@@ -0,0 +1,59 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { NotificationService } from '@alfresco/adf-core';
+import { CloudLayoutService } from './services/cloud-layout.service';
+@Component({
+    templateUrl: './start-task-cloud-demo.component.html',
+    styleUrls: ['./start-task-cloud-demo.component.scss']
+})
+export class StartTaskCloudDemoComponent implements OnInit {
+
+    applicationName;
+
+    constructor(
+        private cloudLayoutService: CloudLayoutService,
+        private route: ActivatedRoute,
+        private notificationService: NotificationService,
+        private router: Router) {
+    }
+
+    ngOnInit() {
+        this.route.parent.params.subscribe((params) => {
+            this.applicationName = params.applicationName;
+        });
+    }
+
+    onStartTaskSuccess() {
+        this.cloudLayoutService.setCurrentTaskFilterParam({key: 'my-tasks'});
+        this.router.navigate([`/cloud/${this.applicationName}/tasks`]);
+    }
+
+    onCancelStartTask() {
+        this.cloudLayoutService.setCurrentTaskFilterParam({key: 'my-tasks'});
+        this.router.navigate([`/cloud/${this.applicationName}/tasks`]);
+    }
+
+    openSnackMessage(event: any) {
+        this.notificationService.openSnackMessage(
+            event.response.body.message,
+            4000
+        );
+    }
+}
@@ -0,0 +1,12 @@
+
+<button data-automation-id="go-back" mat-icon-button (click)="onGoBack()">
+    <mat-icon>arrow_back</mat-icon> Go Back
+</button>
+
+<h4>Simple page to show the taskId: {{ taskId }} of the app: {{ applicationName }}</h4>
+
+<adf-cloud-task-header
+    [appName]="applicationName"
+    [taskId]="taskId"
+    [readOnly]="readOnly">
+</adf-cloud-task-header>
@@ -0,0 +1,44 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+@Component({
+    templateUrl: './task-details-cloud-demo.component.html',
+    styleUrls: ['./task-details-cloud-demo.component.scss']
+})
+export class TaskDetailsCloudDemoComponent {
+
+    taskId: string;
+    applicationName: string;
+    readOnly = false;
+
+    constructor(private route: ActivatedRoute, private router: Router) {
+        this.route.params.subscribe((params) => {
+            this.taskId = params.taskId;
+        });
+        this.route.parent.params.subscribe((params) => {
+            this.applicationName = params.applicationName;
+        });
+    }
+
+    onGoBack() {
+        this.router.navigate([`/cloud/${this.applicationName}/`]);
+
+    }
+}
@@ -0,0 +1,40 @@
+<div fxLayout="column" fxFill fxLayoutGap="2px">
+    <adf-cloud-edit-task-filter
+        [appName]="applicationName"
+        [id]="filterId"
+        [filterProperties]="taskFilterProperties"
+        (action)="onTaskFilterAction($event)"
+        (filterChange)="onFilterChange($event)">
+    </adf-cloud-edit-task-filter>
+    <div fxLayout="column" fxFlex fxLayoutAlign="space-between" *ngIf="editedFilter">
+        <adf-cloud-task-list #taskCloud
+            [applicationName]="editedFilter.appName"
+            [processDefinitionId]="editedFilter.processDefinitionId"
+            [processInstanceId]="editedFilter.processInstanceId"
+            [name]="editedFilter.taskName"
+            [parentTaskId]="editedFilter.parentTaskId"
+            [priority]="editedFilter.priority"
+            [owner]="editedFilter.owner"
+            [lastModifiedFrom]="editedFilter.lastModifiedFrom"
+            [lastModifiedTo]="editedFilter.lastModifiedTo"
+            [status]="editedFilter.state"
+            [assignee]="editedFilter.assignment"
+            [sorting]="sortArray"
+            [multiselect]="multiselect"
+            [selectionMode]="selectionMode"
+            (rowClick)="onRowClick($event)"
+            (rowsSelected)="onRowsSelected($event)">
+        </adf-cloud-task-list>
+        <adf-pagination [target]="taskCloud"
+                        (changePageSize)="onChangePageSize($event)"
+                        (nextPage)="resetSelectedRows()"
+                        (prevPage)="resetSelectedRows()">
+        </adf-pagination>
+        <div *ngIf="testingMode">
+            Selected rows:
+            <ul>
+                <li *ngFor="let row of selectedRows" [attr.data-automation-id]="row.id">{{ row.name }}</li>
+            </ul>
+        </div>
+    </div>
+</div>
@@ -0,0 +1,123 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, ViewChild, OnInit } 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';
+
+@Component({
+    templateUrl: 'tasks-cloud-demo.component.html',
+    styleUrls: ['tasks-cloud-demo.component.scss']
+})
+export class TasksCloudDemoComponent implements OnInit {
+
+    public static ACTION_SAVE_AS = 'SAVE_AS';
+    static TASK_FILTER_PROPERTY_KEYS = 'adf-edit-task-filter.properties';
+
+    @ViewChild('taskCloud')
+    taskCloud: TaskListCloudComponent;
+
+    applicationName: string = '';
+
+    isFilterLoaded = false;
+
+    selectedRow: any;
+
+    sortArray: TaskListCloudSortingModel[];
+    editedFilter: TaskFilterCloudModel;
+    taskFilterProperties: any[] = [];
+
+    filterId;
+    multiselect: boolean;
+    selectedRows: string[] = [];
+    testingMode: boolean;
+    selectionMode: string;
+
+    constructor(
+        private cloudLayoutService: CloudLayoutService,
+        private route: ActivatedRoute,
+        private router: Router,
+        private userPreference: UserPreferencesService,
+        private appConfig: AppConfigService) {
+
+        const properties = this.appConfig.get<Array<any>>(TasksCloudDemoComponent.TASK_FILTER_PROPERTY_KEYS);
+        if (properties) {
+            this.taskFilterProperties = properties;
+        }
+    }
+
+    ngOnInit() {
+        this.isFilterLoaded = false;
+        this.route.parent.params.subscribe((params) => {
+            this.applicationName = params.applicationName;
+        });
+
+        this.route.queryParams.subscribe((params) => {
+            this.isFilterLoaded = true;
+            this.onFilterChange(params);
+            this.filterId = params.id;
+        });
+
+        this.cloudLayoutService.getCurrentSettings()
+            .subscribe((settings) => this.setCurrentSettings(settings));
+    }
+
+    setCurrentSettings(settings) {
+        if (settings.multiselect !== undefined) {
+            this.multiselect = settings.multiselect;
+        }
+        if (settings.testingMode !== undefined) {
+            this.testingMode = settings.testingMode;
+        }
+        if (settings.selectionMode !== undefined) {
+            this.selectionMode = settings.selectionMode;
+        }
+    }
+
+    onChangePageSize(event) {
+        this.userPreference.paginationSize = event.maxItems;
+    }
+
+    resetSelectedRows() {
+        this.selectedRows = [];
+    }
+
+    onRowClick(taskId) {
+        if (!this.multiselect && this.selectionMode !== 'multiple') {
+            this.router.navigate([`/cloud/${this.applicationName}/task-details/${taskId}`]);
+        }
+    }
+
+    onRowsSelected(nodes) {
+        this.resetSelectedRows();
+        this.selectedRows = nodes.map((node) => node.obj.entry);
+    }
+
+    onFilterChange(filter: any) {
+        this.editedFilter = Object.assign({}, filter);
+        this.sortArray = [new TaskListCloudSortingModel({ orderBy: this.editedFilter.sort, direction: this.editedFilter.order })];
+    }
+
+    onTaskFilterAction(filterAction: any) {
+        this.cloudLayoutService.setCurrentTaskFilterParam({ id: filterAction.filter.id });
+        if (filterAction.actionType === TasksCloudDemoComponent.ACTION_SAVE_AS) {
+            this.router.navigate([`/cloud/${this.applicationName}/tasks/`], { queryParams: filterAction.filter });
+        }
+    }
+}
@@ -76,6 +76,13 @@
        </div>
    </adf-toolbar>

+    <h2>6. Dropdown Breadcrumb</h2>
+
+    <adf-dropdown-breadcrumb fxHide fxShow.lt-sm="true"
+                             class="adf-files-breadcrumb"
+                             [target]="documentList">
+    </adf-dropdown-breadcrumb>
+
    <div class="adf-content">
        <adf-document-list #documentList currentFolderId="-my-">
        </adf-document-list>
@@ -1,73 +0,0 @@
-<h3>{{'PROCESS_LIST_CLOUD.TITLE' | translate}}</h3>
-<adf-cloud-process-filters
-    [appName]="currentAppName"
-    [showIcons]="true"
-    (filterClick)="onFilterSelected($event)"
-    *ngIf="currentAppName">
-</adf-cloud-process-filters>
-
-<adf-cloud-app-list *ngIf="!currentAppName"
-                    (appClick)="onAppClick($event)"></adf-cloud-app-list>
-<div *ngIf="currentAppName">
-    <mat-accordion>
-        <mat-expansion-panel>
-            <mat-expansion-panel-header>
-                <mat-panel-title>
-                    {{filterName | translate}}
-                </mat-panel-title>
-                <mat-panel-description>
-                    Customise your filter
-                </mat-panel-description>
-            </mat-expansion-panel-header>
-            <div>
-                <mat-form-field>
-                    <mat-select placeholder="Status" [(ngModel)]="status">
-                        <mat-option value="">
-                            ALL
-                        </mat-option>
-                        <mat-option value="RUNNING">
-                            RUNNING
-                        </mat-option>
-                    <mat-option value="COMPLETED">
-                            COMPLETED
-                        </mat-option>
-                    </mat-select>
-                </mat-form-field>
-                <mat-form-field>
-                    <mat-select [formControl]="sortFormControl">
-                        <mat-option [value]="''">Select a column</mat-option>
-                        <mat-option *ngFor="let column of columns" [value]="column.key">
-                        {{column.label}}
-                        </mat-option>
-                    </mat-select>
-                </mat-form-field>
-                <mat-form-field>
-                    <mat-select [formControl]="sortDirectionFormControl">
-                        <mat-option [value]="''">Select a direction</mat-option>
-                        <mat-option value="ASC">
-                            ASC
-                        </mat-option>
-                        <mat-option value="DESC">
-                            DESC
-                        </mat-option>
-                    </mat-select>
-                </mat-form-field>
-            </div>
-        </mat-expansion-panel>
-    </mat-accordion>
-    <adf-cloud-process-list
-                            [applicationName]="currentAppName"
-                            [status]="status"
-                            [sorting]="sortArray"
-                            [id]="filterId"
-                            #processCloud>
-        <data-columns>
-            <data-column key="entry.id" title="Id"></data-column>
-            <data-column key="entry.appName" title="Name"></data-column>
-            <data-column key="entry.status" title="Status"></data-column>
-        </data-columns>
-    </adf-cloud-process-list>
-    <adf-pagination [target]="processCloud" (changePageSize)="onChangePageSize($event)">
-    </adf-pagination>
-    <button mat-fab class="adf-process-list-cloud-button" color="primary" (click)="onClick()">Back</button>
-</div>
@@ -1,11 +0,0 @@
-.adf-process-list-cloud-button {
-    margin: 15px;
-}
-
-.adf-process-cloud-spacing {
-    margin: 10px;
-}
-
-mat-form-field {
-    margin-left: 10px;
-}
@@ -1,106 +0,0 @@
-/*!
- * @license
- * Copyright 2016 Alfresco Software, Ltd.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { Component, ViewChild, OnInit } from '@angular/core';
-import { UserPreferencesService } from '@alfresco/adf-core';
-import { ProcessListCloudComponent } from '@alfresco/adf-process-services-cloud';
-import { FormControl } from '@angular/forms';
-
-@Component({
-    selector: 'app-process-list-example',
-    templateUrl: './process-list-cloud-example.component.html',
-    styleUrls: ['./process-list-cloud-example.component.scss']
-})
-export class ProcessListCloudExampleComponent implements OnInit {
-
-    @ViewChild('processCloud')
-    processCloud: ProcessListCloudComponent;
-
-    sortFormControl: FormControl;
-    sortDirectionFormControl: FormControl;
-
-    currentAppName: string = '';
-    filterName: string = '';
-    status: string = '';
-    filterId: string = '';
-    sort: string = '';
-    sortArray: any[];
-    sortField: string;
-    sortDirection: string;
-
-    columns = [
-        {key: 'id', label: 'ID'},
-        {key: 'name', label: 'NAME'},
-        {key: 'status', label: 'STATUS'},
-        {key: 'startDate', label: 'START DATE'}
-      ];
-
-    constructor(private userPreference: UserPreferencesService) {
-    }
-
-    ngOnInit() {
-        this.sortFormControl = new FormControl('');
-
-        this.sortFormControl.valueChanges.subscribe(
-            (sortValue) => {
-                this.sort = sortValue;
-
-                this.sortArray = [{
-                    orderBy: this.sort,
-                    direction: this.sortDirection
-                }];
-            }
-        );
-        this.sortDirectionFormControl = new FormControl('');
-
-        this.sortDirectionFormControl.valueChanges.subscribe(
-            (sortDirectionValue) => {
-                this.sortDirection = sortDirectionValue;
-
-                this.sortArray = [{
-                    orderBy: this.sort,
-                    direction: this.sortDirection
-                }];
-            }
-        );
-    }
-
-    onAppClick(appClicked: any) {
-        this.currentAppName = appClicked.name;
-    }
-
-    onClick() {
-        this.currentAppName = '';
-    }
-
-    onChangePageSize(event) {
-        this.userPreference.paginationSize = event.maxItems;
-    }
-
-    onClearFilters() {
-        this.processCloud.reload();
-    }
-
-    onFilterSelected(filter) {
-        this.status = filter.query.state || '';
-        this.sort = filter.query.sort;
-        this.sortDirection = filter.query.order;
-        this.filterName = filter.name;
-        this.sortDirectionFormControl.setValue(this.sortDirection);
-        this.sortFormControl.setValue(this.sort);
-    }
-}
@@ -41,6 +41,34 @@
                <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>	
+            <button mat-icon-button>	
+                <mat-icon>info</mat-icon>	
+            </button>	
+        </mat-list-item>
    </mat-nav-list>

    <div>
@@ -106,6 +106,30 @@ export class ConfigEditorComponent {
        this.indentCode();
    }

+    taskListCloudConfClick() {
+        this.code = JSON.stringify(this.appConfig.config['adf-cloud-task-list']);
+        this.field = 'adf-cloud-task-list';
+        this.indentCode();
+    }
+
+    editProcessFilterConfClick() {
+        this.code = JSON.stringify(this.appConfig.config['adf-edit-process-filter']);
+        this.field = 'adf-edit-process-filter';
+        this.indentCode();
+    }
+
+     editTaskFilterConfClick() {
+        this.code = JSON.stringify(this.appConfig.config['adf-edit-task-filter']);
+        this.field = 'adf-edit-task-filter';
+        this.indentCode();
+    }
+
+    processListCloudConfClick() {
+        this.code = JSON.stringify(this.appConfig.config['adf-cloud-process-list']);
+        this.field = 'adf-cloud-process-list';
+        this.indentCode();
+    }
+
    indentCode() {
        setTimeout(() => {
            this.editor.getAction('editor.action.formatDocument').run();
@@ -112,6 +112,39 @@
                    </adf-content-node-selector-panel>
                </div>
        </mat-expansion-panel>
+        <mat-expansion-panel>
+                <mat-expansion-panel-header>
+                    <mat-panel-title>
+                        <h2>Exclude Site Content</h2>
+                    </mat-panel-title>
+                    <mat-panel-description>
+                        <label class="adf-content-node-selector-demo-basic-label">
+                            The exclude site content is filtered out from the list
+                        </label>
+                    </mat-panel-description>
+                </mat-expansion-panel-header>
+                <div>
+                    <label>Case when the excludeSiteContent is set as : <b>{{ excludeSiteContentList.join(', ') }}</b></label>
+                </div>
+                <div>
+                    <label>Navigate into a site having the top content along the 'documentLibrary' to see that such items are not displayed.</label>
+                </div>
+                <br />
+                <mat-slide-toggle color="primary" [(ngModel)]="showFiles" (click)="recreateRowFilterFunction()">
+                    Show Files
+                </mat-slide-toggle>
+                <mat-slide-toggle color="primary" [(ngModel)]="showFolders" (click)="recreateRowFilterFunction()">
+                    Show Folders
+                </mat-slide-toggle>
+
+                <div class="adf-content-node-selector-demo-basic-table">
+                    <adf-content-node-selector-panel
+                        [rowFilter]="rowFilterFunction"
+                        [excludeSiteContent]="excludeSiteContentList"
+                        [currentFolderId]="'-root-'">
+                    </adf-content-node-selector-panel>
+                </div>
+        </mat-expansion-panel>
        <mat-expansion-panel>
                <mat-expansion-panel-header>
                    <mat-panel-title>
@@ -16,8 +16,8 @@
 */

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

@Component({
@@ -40,24 +40,25 @@ export class ContentNodeSelectorComponent {
    customSideTitle = '';
    actualPageSize = 2;

-    rowFilterFunction: any = null;
+    rowFilterFunction: RowFilter = null;
+    excludeSiteContentList: string[] = ContentNodeDialogService.nonDocumentSiteContent;
    customImageResolver: any = null;

    defaultSites: SiteEntry[] = [
-        { entry: { title: 'MINE', guid: '-my-' } },
-        { entry: { title: 'ROOTY', guid: '-root-' } }];
+        new SiteEntry({ entry: { title: 'MINE', guid: '-my-' } }),
+        new SiteEntry({ entry: { title: 'ROOTY', guid: '-root-' } })];

-    customSites: SitePaging = {
+    customSites: SitePaging = new SitePaging({
        list: {
            entries: [
                { entry: { title: 'MINE', guid: '-my-' } },
                { entry: { title: 'ROOTY', guid: '-root-' } }],
            pagination: {}
        }
-    };
+    });

    onClickAddSite() {
-        const newSiteEntry: SiteEntry = { entry: { title: this.customSideTitle, guid: this.customSideGuid } };
+        const newSiteEntry: SiteEntry = new SiteEntry({ entry: { title: this.customSideTitle, guid: this.customSideGuid } });
        this.customSites.list.entries.push(newSiteEntry);
        this.customSideGuid = '';
        this.customSideTitle = '';
@@ -188,6 +188,16 @@
                    </mat-slide-toggle>
                </p>

+                <p class="toggle">
+                    <mat-slide-toggle
+                        id="adf-switch-moreactionsmenu"
+                        [color]="'primary'"
+                        (change)="toggleMoreActionsMenu()"
+                        [checked]="moreActionsMenu">
+                        More Actions Menu
+                    </mat-slide-toggle>
+                </p>
+
                <p class="toggle">
                    <mat-slide-toggle
                        id="adf-switch-download"
@@ -208,22 +218,12 @@
                    </mat-slide-toggle>
                </p>

-                <p class="toggle">
-                    <mat-slide-toggle
-                        id="adf-switch-share"
-                        [color]="'primary'"
-                        (change)="toggleAllowShare()"
-                        [checked]="allowShare">
-                        Allow Share
-                    </mat-slide-toggle>
-                </p>
-
                <p class="toggle">
                    <mat-slide-toggle
                        id="adf-switch-allowsidebar"
                        [color]="'primary'"
-                        (change)="toggleAllowSidebar()"
-                        [checked]="allowSidebar">
+                        (change)="toggleAllowRightSidebar()"
+                        [checked]="allowRightSidebar">
                        Allow Right Sidebar
                    </mat-slide-toggle>
                </p>
@@ -265,23 +265,20 @@
        </adf-info-drawer>
    </ng-template>

-    <ng-template let-node="node" #sidebarTemplate> <adf-info-drawer-layout> <div info-drawer-content> <mat-card> My info </mat-card> </div> </adf-info-drawer-layout> </ng-template>
-
    <adf-viewer
        [nodeId]="nodeId"
-        [showSidebar]="showRightSidebar"
+        [showRightSidebar]="showRightSidebar"
        [showLeftSidebar]="showLeftSidebar"
        [allowGoBack]="allowGoBack"
        [displayName]="displayName"
        [showToolbar]="showToolbar"
-        [allowShare]="allowShare"
        [allowPrint]="allowPrint"
        [allowDownload]="allowDownload"
-        [allowSidebar]="allowSidebar"
+        [allowRightSidebar]="allowRightSidebar"
        [allowLeftSidebar]="allowLeftSidebar"
        [urlFile]="urlFile"
        [sidebarLeftTemplate]="sidebarLeftTemplate"
-        [sidebarTemplate]="sidebarRightTemplate">
+        [sidebarRightTemplate]="sidebarRightTemplate">

        <adf-viewer-toolbar *ngIf="customToolbar" data-automation-id="adf-viewer-custom-toolbar">
            <h1>My custom toolbar</h1>
@@ -299,6 +296,21 @@
            </button>
        </adf-viewer-toolbar-actions>

+        <adf-viewer-more-actions *ngIf="moreActionsMenu">
+            <button mat-menu-item id="adf-viewer-more-menu-alarm">
+                <mat-icon>alarm</mat-icon>
+                <span>Alarm</span>
+            </button>
+            <button mat-menu-item id="adf-viewer-more-menu-backup">
+                <mat-icon>backup</mat-icon>
+                <span>Backup</span>
+            </button>
+            <button mat-menu-item id="adf-viewer-more-menu-bug">
+                <mat-icon>bug_report</mat-icon>
+                <span>Bug report</span>
+            </button>
+        </adf-viewer-more-actions>
+
        <ng-container *ngIf="openWith">
            <adf-viewer-open-with>
                <button mat-menu-item>
@@ -43,10 +43,10 @@ export class FileViewComponent implements OnInit {
    openWith = false;
    allowDownload = true;
    allowPrint = true;
-    allowShare = true;
-    allowSidebar = true;
+    allowRightSidebar = true;
    allowLeftSidebar = true;
    moreActions = true;
+    moreActionsMenu = false;
    customName = false;
    fileUrlSwitch = false;
    showLeftSidebar = null;
@@ -68,7 +68,7 @@ export class FileViewComponent implements OnInit {
                this.nodeApiService.getNode(id).subscribe(
                    (node) => {
                        if (node && node.isFile) {
-                            this.isCommentEnabled = !this.contentServices.hasPermission(node, PermissionsEnum.UPDATE);
+                            this.isCommentEnabled = !this.contentServices.hasPermissions(node, PermissionsEnum.NOT_CONSUMER);
                            this.nodeId = id;
                            return;
                        }
@@ -120,14 +120,14 @@ export class FileViewComponent implements OnInit {
        this.allowPrint = !this.allowPrint;
    }

-    toggleAllowShare() {
-        this.allowShare = !this.allowShare;
-    }
-
    toggleOpenMoreActions() {
        this.moreActions = !this.moreActions;
    }

+    toggleMoreActionsMenu() {
+        this.moreActionsMenu = !this.moreActionsMenu;
+    }
+
    toggleShowRightSidebar() {
        this.showRightSidebar = !this.showRightSidebar;
    }
@@ -136,8 +136,8 @@ export class FileViewComponent implements OnInit {
        this.showLeftSidebar = false;
    }

-    toggleAllowSidebar() {
-        this.allowSidebar = !this.allowSidebar;
+    toggleAllowRightSidebar() {
+        this.allowRightSidebar = !this.allowRightSidebar;
    }

    toggleAllowLeftSidebar() {
@@ -16,14 +16,12 @@
                [maxItems]="5"
                (preview)="showFile($event)"
                selectionMode="null">
-                <empty-folder-content>
-                    <ng-template>
-                        <div class="adf-empty-list__block">
-                            <mat-icon>history</mat-icon>
-                            <p class="adf-empty-list__title">{{ 'DOCUMENT_LIST.RECENT.EMPTY_STATE.TITLE' | translate}}</p>
-                        </div>
-                    </ng-template>
-                </empty-folder-content>
+                <adf-custom-empty-content-template>
+                    <div class="adf-empty-list__block">
+                        <mat-icon>history</mat-icon>
+                        <p class="adf-empty-list__title">{{ 'DOCUMENT_LIST.RECENT.EMPTY_STATE.TITLE' | translate}}</p>
+                    </div>
+                </adf-custom-empty-content-template>
            </adf-document-list>
        </mat-expansion-panel>
    </mat-accordion>
@@ -37,9 +35,9 @@
        <adf-upload-drag-area fxFlex="1 1 auto"
                              [disabled]="disableDragArea"
                              [acceptedFilesType]="getFileFiltering()"
-                              [rootFolderId]="getDocumentListCurrentFolderId()"
+                              [rootFolderId]="currentFolderId"
                              [versioning]="versioning"
-                              [adf-node-permission]="'create'"
+                              [adf-check-allowable-operation]="'create'"
                              [adf-nodes]="disableDragArea ? getCurrentDocumentListNode() : []"
                              (beginUpload)="onBeginUpload($event)">
            <div *ngIf="errorMessage" class="adf-error-message">
@@ -53,13 +51,11 @@
                    <adf-breadcrumb fxShow fxHide.lt-sm="true"
                                    class="adf-files-breadcrumb"
                                    root="APP.PERSONAL-FILES"
-                                    [target]="documentList"
-                                    [folderNode]="documentList.folderNode">
+                                    [target]="documentList">
                    </adf-breadcrumb>
                    <adf-dropdown-breadcrumb fxHide fxShow.lt-sm="true"
                                             class="adf-files-breadcrumb"
-                                             [target]="documentList"
-                                             [folderNode]="documentList.folderNode">
+                                             [target]="documentList">
                    </adf-dropdown-breadcrumb>
                </adf-toolbar-title>

@@ -81,13 +77,14 @@
                        title="{{ 'DOCUMENT_LIST.TOOLBAR.NEW_FOLDER' | translate }}"
                        (error)="openSnackMessage($event)"
                        (success)="documentList.reload()"
-                        [adf-create-folder]="getDocumentListCurrentFolderId()"
+                        [adf-create-folder]="currentFolderId"
                        matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.NEW_FOLDER' | translate }}">
                        <mat-icon>create_new_folder</mat-icon>
                    </button>
                    <button
                        mat-icon-button
-                        matTooltip="{{ 'APP.CREATE_LIBRARY' | translate }}"
+                        matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.CREATE_LIBRARY' | translate }}"
+                        data-automation-id="create-new-library"
                        (click)="createLibrary()">
                        <mat-icon>library_add</mat-icon>
                    </button>
@@ -108,7 +105,7 @@
                        <mat-icon>get_app</mat-icon>
                    </button>
                    <button mat-icon-button
-                            adf-node-permission="delete"
+                            adf-check-allowable-operation="delete"
                            [adf-nodes]="documentList.selection"
                            title="{{ 'DOCUMENT_LIST.TOOLBAR.DELETE' | translate }}"
                            (delete)="onDeleteActionSuccess($event)"
@@ -169,10 +166,15 @@
                    </button>
                    <button mat-menu-item
                            (error)="openSnackMessage($event)"
-                            [adf-create-folder]="getDocumentListCurrentFolderId()">
+                            [adf-create-folder]="currentFolderId">
                        <mat-icon>create_new_folder</mat-icon>
                        <span>{{ 'DOCUMENT_LIST.TOOLBAR.NEW_FOLDER' | translate }}</span>
                    </button>
+                    <button mat-menu-item
+                            (click)="createLibrary()">
+                        <mat-icon>library_add</mat-icon>
+                        <span>{{ 'DOCUMENT_LIST.TOOLBAR.CREATE_LIBRARY' | translate }}</span>
+                    </button>
                    <button mat-menu-item
                            [disabled]="!canEditFolder(documentList.selection)"
                            (error)="openSnackMessage($event)"
@@ -188,7 +190,7 @@
                        <span>{{ 'DOCUMENT_LIST.TOOLBAR.DOWNLOAD' | translate }}</span>
                    </button>
                    <button mat-menu-item
-                            adf-node-permission="delete"
+                            adf-check-allowable-operation="delete"
                            [adf-nodes]="documentList.selection"
                            (delete)="onDeleteActionSuccess($event)"
                            [adf-delete]="documentList.selection">
@@ -219,19 +221,16 @@
                (ready)="emitReadyEvent($event)"
                (preview)="showFile($event)"
                (folderChange)="onFolderChange($event)"
-                (permissionError)="handlePermissionError($event)">
-                <no-permission-content *ngIf="enableCustomPermissionMessage">
-                    <ng-template>
+                (permissionError)="handlePermissionError($event)"
+                (name-click)="documentList.onNodeDblClick($event.detail?.node)">
+                <adf-custom-no-permission-template *ngIf="enableCustomPermissionMessage">
                        <h1>You don't have permissions</h1>
-                    </ng-template>
-                </no-permission-content>
-                <empty-folder-content *ngIf="disableDragArea">
-                    <ng-template>
+                </adf-custom-no-permission-template>
+                <adf-custom-empty-content-template *ngIf="disableDragArea">
                        <div class="adf-empty_template">
                            <div class="adf-no-result-message">{{ 'SEARCH.NO_RESULT' | translate }}</div>
                        </div>
-                    </ng-template>
-                </empty-folder-content>
+                </adf-custom-empty-content-template>
                <data-columns>
                    <data-column
                        key="$thumbnail"
@@ -241,7 +240,17 @@
                        [class.adf-cell-thumbnail]="thumbnails">
                    </data-column>
                    <data-column
-                        *ngIf="showNameColumn"
+                        *ngIf="showNameColumn && hyperlinkNavigation"
+                        key="name"
+                        title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
+                        [formatTooltip]="getNodeNameTooltip"
+                        class="adf-full-width adf-ellipsis-cell">
+                        <ng-template let-context>
+                            <adf-name-column [context]="context"></adf-name-column>
+                        </ng-template>
+                    </data-column>
+                    <data-column
+                        *ngIf="showNameColumn && !hyperlinkNavigation"
                        key="name"
                        title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
                        [formatTooltip]="getNodeNameTooltip"
@@ -376,14 +385,14 @@
                        (execute)="onManageVersions($event)">
                    </content-action>
                    <content-action
-                        target="document" 
+                        target="document"
                        *ngIf="authenticationService.isBpmLoggedIn()"
                        icon="play_arrow"
                        title="DOCUMENT_LIST.ACTIONS.DOCUMENT.PROCESS_ACTION"
-                        (execute)="startProcessAction($event)">
+                        (execute)="startProcessAction($event)">
                    </content-action>
                    <content-action
-                        target="document" 
+                        target="document"
                        icon="lock"
                        permission="lock"
                        handler="lock"
@@ -479,6 +488,12 @@
            </mat-slide-toggle>
        </section>

+        <section>
+            <mat-slide-toggle [(ngModel)]="hyperlinkNavigation">
+                Hyperlink navigation
+            </mat-slide-toggle>
+        </section>
+
        <section>
            <mat-slide-toggle [color]="'primary'" [(ngModel)]="multiselect">
                {{'DOCUMENT_LIST.MULTISELECT_CHECKBOXES' | translate}}
@@ -516,7 +531,7 @@
        </section>

        <section>
-            <mat-slide-toggle id="adf-document-list-enable-drop-files" [color]="'primary'" (click)="toggleAllowDropFiles()" >
+            <mat-slide-toggle id="adf-document-list-enable-drop-files" [color]="'primary'" [(ngModel)]="allowDropFiles" (click)="toggleAllowDropFiles()" >
                {{'DOCUMENT_LIST.ALLOW_DROP_FILES' | translate}}
            </mat-slide-toggle>
        </section>
@@ -597,7 +612,7 @@
                [maxFilesSize]="maxSizeShow ? maxFilesSize : null"
                (error)="openSnackMessage($event)"
                [versioning]="versioning"
-                [adf-node-permission]="'create'"
+                [adf-check-allowable-operation]="'create'"
                [adf-nodes]="enableUpload ? getCurrentDocumentListNode() : []"
                (permissionEvent)="handlePermissionError($event)"
                (beginUpload)="onBeginUpload($event)">
@@ -614,7 +629,7 @@
                [uploadFolders]="folderUpload"
                [versioning]="versioning"
                (error)="openSnackMessage($event)"
-                [adf-node-permission]="'create'"
+                [adf-check-allowable-operation]="'create'"
                [adf-nodes]="enableUpload ? getCurrentDocumentListNode() : []"
                (permissionEvent)="handlePermissionError($event)">
            </adf-upload-button>
@@ -23,7 +23,7 @@ import { Location } from '@angular/common';

 import { MatDialog } from '@angular/material';
 import { ActivatedRoute, Params, Router } from '@angular/router';
-import { MinimalNodeEntity, NodePaging, Pagination, MinimalNodeEntryEntity, SiteEntry } from 'alfresco-js-api';
+import { MinimalNodeEntity, NodePaging, Pagination, MinimalNodeEntryEntity, SiteEntry } from '@alfresco/js-api';
 import {
    AlfrescoApiService, AuthenticationService, AppConfigService, AppConfigValues, ContentService, TranslationService,
    FileUploadEvent, FolderCreatedEvent, LogService, NotificationService,
@@ -57,7 +57,7 @@ const DEFAULT_FOLDER_TO_SHOW = '-my-';
 export class FilesComponent implements OnInit, OnChanges, OnDestroy {

    errorMessage: string = null;
-    fileNodeId: any;
+    nodeId: any;
    showViewer = false;
    showVersions = false;
    allowDropFiles = true;
@@ -187,6 +187,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
    enableCustomPermissionMessage = false;
    enableMediumTimeFormat = false;
    displayEmptyMetadata = false;
+    hyperlinkNavigation = false;

    private onCreateFolder: Subscription;
    private onEditFolder: Subscription;
@@ -230,7 +231,6 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
    }

    toggleAllowDropFiles() {
-        this.allowDropFiles = !this.allowDropFiles;
        this.documentList.reload();
    }

@@ -263,8 +263,8 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
        this.onCreateFolder = this.contentService.folderCreate.subscribe((value) => this.onFolderAction(value));
        this.onEditFolder = this.contentService.folderEdit.subscribe((value) => this.onFolderAction(value));

-        // this.permissionsStyle.push(new PermissionStyleModel('document-list__create', PermissionsEnum.CREATE));
-        // this.permissionsStyle.push(new PermissionStyleModel('document-list__disable', PermissionsEnum.NOT_CREATE, false, true));
+        // this.permissionsStyle.push(new PermissionStyleModel('document-list__create', AllowableOperationsEnum.CREATE));
+        // this.permissionsStyle.push(new PermissionStyleModel('document-list__disable', AllowableOperationsEnum.NOT_CREATE, false, true));
    }

    ngOnDestroy() {
@@ -399,7 +399,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
        const showComments = this.showVersionComments;
        const allowDownload = this.allowVersionDownload;

-        if (this.contentService.hasPermission(contentEntry, 'update')) {
+        if (this.contentService.hasAllowableOperations(contentEntry, 'update')) {
            this.dialog.open(VersionManagerDialogAdapterComponent, {
                data: { contentEntry: contentEntry, showComments: showComments, allowDownload: allowDownload },
                panelClass: 'adf-version-manager-dialog',
@@ -414,7 +414,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
    onManageMetadata(event) {
        const contentEntry = event.value.entry;

-        if (this.contentService.hasPermission(contentEntry, 'update')) {
+        if (this.contentService.hasAllowableOperations(contentEntry, 'update')) {
            this.dialog.open(MetadataDialogAdapterComponent, {
                data: {
                    contentEntry: contentEntry,
@@ -433,10 +433,6 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
        this.currentFolderId = site.entry.guid;
    }

-    getDocumentListCurrentFolderId() {
-        return this.documentList.currentFolderId || DEFAULT_FOLDER_TO_SHOW;
-    }
-
    hasSelection(selection: Array<MinimalNodeEntity>): boolean {
        return selection && selection.length > 0;
    }
@@ -448,7 +444,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {

    userHasPermissionToManageVersions(): boolean {
        const selection: Array<MinimalNodeEntity> = this.documentList.selection;
-        return this.contentService.hasPermission(selection[0].entry, 'update');
+        return this.contentService.hasAllowableOperations(selection[0].entry, 'update');
    }

    getNodeNameTooltip(row: DataRow, col: DataColumn): string {
@@ -463,7 +459,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
            const entry = selection[0].entry;

            if (entry && entry.isFolder) {
-                return this.contentService.hasPermission(entry, 'update');
+                return this.contentService.hasAllowableOperations(entry, 'update');
            }
        }
        return false;
@@ -471,7 +467,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {

    canCreateContent(parentNode: MinimalNodeEntryEntity): boolean {
        if (parentNode) {
-            return this.contentService.hasPermission(parentNode, 'create');
+            return this.contentService.hasAllowableOperations(parentNode, 'create');
        }
        return false;
    }
@@ -528,7 +524,6 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
    onInfiniteScrolling(): void {
        this.infiniteScrolling = !this.infiniteScrolling;
        this.infinitePaginationComponent.reset();
-        this.documentList.reload();
    }

    canDownloadNode(node: MinimalNodeEntity): boolean {
@@ -17,7 +17,7 @@

 import { Component, Inject, ViewEncapsulation } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
-import { MinimalNodeEntryEntity } from 'alfresco-js-api';
+import { MinimalNodeEntryEntity } from '@alfresco/js-api';

@Component({
    templateUrl: './metadata-dialog-adapter.component.html',
@@ -17,7 +17,7 @@

 import { Component, Inject, ViewEncapsulation } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
-import { MinimalNodeEntryEntity } from 'alfresco-js-api';
+import { MinimalNodeEntryEntity } from '@alfresco/js-api';
 import { MatSnackBar } from '@angular/material';

@Component({
@@ -61,12 +61,5 @@
            </mat-slide-toggle>
        </section>

-        <div>
-            <mat-radio-group [(ngModel)]="position" (change)="changePosition()">
-                <mat-radio-button value="start">Start</mat-radio-button>
-                <mat-radio-button value="end">End</mat-radio-button>
-            </mat-radio-group>
-        </div>
-
    </mat-card>
 </div>
@@ -0,0 +1,59 @@
+<h1>Icons</h1>
+
+<h2>Ligatures</h2>
+<small>
+    See more details here:
+    <a href="https://material.angular.io/components/icon/overview#font-icons-with-ligatures">Font icons with ligatures</a>
+</small>
+
+<div>
+    <div><strong>Markup:</strong></div>
+    <pre>
+    &lt;adf-icon value="folder"&gt;&lt;/adf-icon&gt;</pre>
+</div>
+
+<div>
+    <div><strong>Result:</strong></div>
+    <adf-icon value="folder"></adf-icon>
+</div>
+
+<h2>Named icons</h2>
+<small>
+    See more details here:
+    <a href="https://material.angular.io/components/icon/overview#named-icons">Named icons</a>
+</small>
+
+<div>
+    <div><strong>Code:</strong></div>
+    <pre>
+    matIconRegistry.addSvgIconInNamespace(
+        'adf',
+        'move_file',
+        this.sanitizer.bypassSecurityTrustResourceUrl(
+            './assets/images/adf-move-file-24px.svg'
+        )
+    );</pre>
+</div>
+
+<div>
+    <div><strong>Markup:</strong></div>
+    <pre>
+    &lt;adf-icon value="adf:move_file"&gt;&lt;/adf-icon&gt;</pre>
+</div>
+
+<div>
+    <div><strong>Result:</strong></div>
+    <adf-icon value="adf:move_file"></adf-icon>
+</div>
+
+<h2>ADF Thumbnail Service</h2>
+<div>
+    <div><strong>Markup:</strong></div>
+    <pre>
+    &lt;adf-icon value="adf:folder"&gt;&lt;/adf-icon&gt;</pre>
+</div>
+
+<div>
+    <div><strong>Result:</strong></div>
+    <adf-icon value="adf:folder"></adf-icon>
+</div>
@@ -0,0 +1,41 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, OnInit } from '@angular/core';
+import { MatIconRegistry } from '@angular/material';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Component({
+    selector: 'app-icons-demo',
+    templateUrl: './icons.component.html'
+})
+export class IconsComponent implements OnInit {
+    constructor(
+        private matIconRegistry: MatIconRegistry,
+        private sanitizer: DomSanitizer
+    ) {}
+
+    ngOnInit() {
+        this.matIconRegistry.addSvgIconInNamespace(
+            'adf',
+            'move_file',
+            this.sanitizer.bypassSecurityTrustResourceUrl(
+                './assets/images/adf-move-file-24px.svg'
+            )
+        );
+    }
+}
@@ -0,0 +1,39 @@
+/*!
+ * @license
+ * Copyright 2016 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 { IconsComponent } from './icons.component';
+
+const routes: Routes = [
+    {
+      path: '',
+      component: IconsComponent
+    }
+];
+
+@NgModule({
+    imports: [
+        CommonModule,
+        CoreModule.forChild(),
+        RouterModule.forChild(routes)
+    ],
+    declarations: [IconsComponent]
+})
+export class AppIconsModule {}
@@ -81,7 +81,6 @@
    [successRoute]="customSuccessRouteURI"
    [logoImageUrl]="customLogoImageURL"
    [fieldsValidation]="customValidation"
-    [disableCsrf]="disableCsrf"
    [showLoginActions]="showFooter"
    [showRememberMe]="showFooter && showRememberMe"
    (executeSubmit)="checkForm($event)"
@@ -18,5 +18,5 @@
 <adf-viewer
    [(showViewer)]="showViewer"
    [overlayMode]="isOverlay"
-    [fileNodeId]="nodeId">
+    [nodeId]="nodeId">
 </adf-viewer>
@@ -18,7 +18,7 @@
 import { Component, Optional, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
 import { PermissionListComponent, NodePermissionDialogService } from '@alfresco/adf-content-services';
-import { MinimalNodeEntryEntity } from 'alfresco-js-api';
+import { MinimalNodeEntryEntity } from '@alfresco/js-api';
 import { NodesApiService, NotificationService } from '@alfresco/adf-core';

@Component({
@@ -3,9 +3,9 @@
    <form [formGroup]="processListForm">
        <mat-form-field>
            <mat-label>App Id</mat-label>
-            <input
-                matInput
-                [formControl]="processAppId">
+            <input data-automation-id="app-id"
+                   matInput
+                   [formControl]="processAppId">
            <mat-error *ngIf="processAppId.hasError('required')">
                {{ 'PROCESS_LIST_DEMO.ERROR_MESSAGE.APP_ID_REQUIRED_ERROR' | translate }}
            </mat-error>
@@ -19,25 +19,25 @@

        <mat-form-field>
            <mat-label>ProcessInstanceId</mat-label>
-            <input
-                matInput
-                class="form-control"
-                [formControl]="processInstanceId">
+            <input data-automation-id="process-instance-id"
+                   matInput
+                   class="form-control"
+                   [formControl]="processInstanceId">
            <mat-hint>SimpleProcess:1:2</mat-hint>
        </mat-form-field>

        <mat-form-field>
            <mat-label>ProcessDefinitionId</mat-label>
-            <input
-                matInput
-                [formControl]="processDefinitionId">
+            <input data-automation-id="process-definition-id"
+                   matInput
+                   [formControl]="processDefinitionId">
            <mat-hint>SimpleProcess:1:2</mat-hint>
        </mat-form-field>

        <mat-form-field>
            <mat-label>State</mat-label>
            <mat-select
-                [formControl]="processState">
+                [formControl]="processState" data-automation-id="state">
                <mat-option *ngFor="let stateOption of stateOptions" [value]="stateOption.value">{{ stateOption.title }}</mat-option>
            </mat-select>
        </mat-form-field>
@@ -45,7 +45,7 @@
        <mat-form-field>
            <mat-label>Sort</mat-label>
            <mat-select
-                [formControl]="processSort">
+                [formControl]="processSort" data-automation-id="sort">
                <mat-option *ngFor="let sortOption of sortOptions" [value]="sortOption.value">{{ sortOption.title }}</mat-option>
            </mat-select>
        </mat-form-field>
@@ -109,4 +109,3 @@
        [target]="processList">
    </adf-pagination>
 </div>
-
@@ -29,7 +29,7 @@ export class ProcessListDemoComponent implements OnInit {

    DEFAULT_SIZE = 20;

-    minValue = 1;
+    minValue = 0;

    processListForm: FormGroup;

@@ -74,7 +74,7 @@ export class ProcessListDemoComponent implements OnInit {

    buildForm() {
        this.processListForm = this.formBuilder.group({
-            processAppId: new FormControl(this.appId, [Validators.required, Validators.pattern('^[0-9]*$'), Validators.min(this.minValue)]),
+            processAppId: new FormControl(this.appId, [Validators.pattern('^[0-9]*$'), Validators.min(this.minValue)]),
            processDefinitionId: new FormControl(''),
            processInstanceId: new FormControl(''),
            processState: new FormControl(''),
@@ -96,7 +96,11 @@ export class ProcessListDemoComponent implements OnInit {
    }

    filterProcesses(processFilter: any) {
-        this.appId = processFilter.processAppId;
+        if (processFilter.processAppId && processFilter.processAppId !== 0) {
+            this.appId = processFilter.processAppId;
+        } else {
+            this.appId = null;
+        }
        this.processDefId = processFilter.processDefinitionId;
        this.processInsId = processFilter.processInstanceId;
        this.state = processFilter.processState;
@@ -2,7 +2,7 @@
    <div class="adf-no-form-container">

        <adf-upload-drag-area
-            [parentId]="processInstanceId"
+            [rootFolderId]="processInstanceId"
            [disabled]="isCompletedProcess()">

            <adf-process-attachment-list #processAttachList
@@ -12,7 +12,7 @@
                (attachmentClick)="onAttachmentClick($event)">
                    <adf-empty-list>
                      <div adf-empty-list-header class="adf-empty-list-header">
-                          {{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.HEADER' | translate}} 
+                          {{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.HEADER' | translate}}
                       </div>
                            <div adf-empty-list-body>
                            <div fxHide.lt-md="true" class="adf-empty-list-drag_drop">
@@ -22,7 +22,7 @@
                                  {{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate}}
                                  </div>
                            </div>
-                        
+
                    </adf-empty-list>
            </adf-process-attachment-list>

@@ -35,4 +35,4 @@
        </adf-create-process-attachment>

    </div>
-</div>
+</div>
@@ -8,7 +8,7 @@
                        <adf-sidebar-action-menu [expanded]="true" [width]="205"
                                                 title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
                            <mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon>
-                            <div sidebar-menu-options>
+                            <div adf-sidebar-menu-options>
                                <button mat-menu-item data-automation-id="btn-start-task" (click)="navigateStartTask()">
                                    <mat-icon>assessment</mat-icon>
                                    <span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_TASK' | translate}}</span>
@@ -42,7 +42,6 @@
                        [page]="taskPage"
                        [size]="paginationPageSize"
                        [selectionMode]="selectionMode"
-                        [processDefinitionKey]="taskFilter?.filter?.processDefinitionKey"
                        [name]="taskFilter?.filter?.name"
                        [assignment]="taskFilter?.filter?.assignment"
                        [state]="taskFilter?.filter?.state"
@@ -121,7 +120,7 @@
                        <adf-sidebar-action-menu [expanded]="true" [width]="205"
                                                 title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
                            <mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon>
-                            <div sidebar-menu-options>
+                            <div adf-sidebar-menu-options>
                                <button mat-menu-item data-automation-id="btn-start-process"
                                        (click)="navigateStartProcess()">
                                    <mat-icon>assessment</mat-icon>
@@ -157,7 +156,6 @@
                        #processList
                        *ngIf="processFilter?.filter" [appId]="processFilter?.appId"
                        [selectionMode]="selectionMode"
-                        [processDefinitionKey]="processFilter?.filter?.processDefinitionKey"
                        [presetColumn]="presetColumn"
                        [state]="processFilter?.filter?.state"
                        [page]="processPage"
@@ -231,12 +229,12 @@
            <div class="adf-grid-item adf-reports-menu" fxFlex.gt-md="300px">
                <span><h5>Report List</h5></span>
                <mat-divider></mat-divider>
-                <analytics-report-list
+                <adf-analytics-report-list
                    [appId]="appId"
                    [selectFirst]="selectFirstReport"
                    (reportClick)="onReportClick($event)"
                    #analyticsReportList>
-                </analytics-report-list>
+                </adf-analytics-report-list>
            </div>
            <div class="adf-grid-item adf-reports-details" fxFlex.gt-md="1 1 auto">
                <adf-analytics
@@ -33,7 +33,7 @@ import {
    ProcessInstanceFilterRepresentation,
    Pagination,
    UserProcessInstanceFilterRepresentation
-} from 'alfresco-js-api';
+} from '@alfresco/js-api';
 import {
    FORM_FIELD_VALIDATORS, FormEvent, FormFieldEvent, FormRenderingService, FormService,
    DynamicTableRow, ValidateDynamicTableRowEvent, AppConfigService, PaginationComponent, UserPreferenceValues
@@ -2,7 +2,7 @@
    <div class="adf-no-form-container">

        <adf-upload-drag-area
-            [parentId]="taskId">
+            [rootFolderId]="taskId">

            <adf-task-attachment-list #taskAttachList
                [disabled]="isCompletedTask()"
@@ -17,7 +17,7 @@

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

@Component({
@@ -15,7 +15,7 @@
 * limitations under the License.
 */

-import { QueryBody } from 'alfresco-js-api';
+import { QueryBody } from '@alfresco/js-api';
 import { SearchConfigurationInterface } from '@alfresco/adf-core';

 export class TestSearchConfigurationService implements SearchConfigurationInterface {
@@ -1,9 +1,4 @@
 <div>
-    <h3>{{'APP_LAYOUT.EXTENDED_SEARCH_QUERY_BODY' | translate}}</h3>
-    <mat-checkbox [(ngModel)]="useServiceApproach">
-            {{'APP_LAYOUT.SEARCH_SERVICE_APPROACH' | translate}}
-    </mat-checkbox>
-
    <div id="container-for-custom-input" class="adf-search-extended-input-containers">
        <mat-form-field>
            <label>{{'APP_LAYOUT.WORD_TO_SEARCH' | translate}}</label>
@@ -13,7 +8,6 @@
    </div>
    <div>
      <adf-search #auto="searchAutocomplete"
-                  [queryBody]="generateQueryBody(searchedWord)"
                  class="adf-example-card-search-container">
          <ng-template let-data>
            <mat-card class="adf-example-card"
@@ -16,7 +16,7 @@
 */

 import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
-import { NodePaging, Pagination, QueryBody, MinimalNodeEntity } from 'alfresco-js-api';
+import { Pagination, QueryBody, MinimalNodeEntity } from '@alfresco/js-api';
 import { SearchComponent } from '@alfresco/adf-content-services';
 import { ThumbnailService } from '@alfresco/adf-core';
 import { SearchService, SearchConfigurationService } from '@alfresco/adf-core';
@@ -41,12 +41,10 @@ export class SearchExtendedComponent {
    searchedWord = '';
    queryBodyString = '';
    errorMessage = '';
-    resultNodePageList: NodePaging;
    maxItems: number;
    skipCount = 0;
    pagination: Pagination;
    queryBody: QueryBody;
-    useServiceApproach = false;

    constructor(public thumbnailService: ThumbnailService) {

@@ -65,20 +63,4 @@ export class SearchExtendedComponent {
        return this.thumbnailService.getMimeTypeIcon(mimeType);
    }

-    generateQueryBody(searchTerm: string): QueryBody {
-        if (this.useServiceApproach) {
-            return null;
-        } else {
-            return {
-                query: {
-                    query: searchTerm ? `${searchTerm}* OR name:${searchTerm}*` : searchTerm
-                },
-                include: ['path', 'allowableOperations'],
-                filterQueries: [
-                    /*tslint:disable-next-line */
-                    { query: "TYPE:'cm:folder' OR TYPE:'cm:content'" },
-                    { query: 'NOT cm:creator:System' }]
-            };
-        }
-    }
 }
@@ -17,7 +17,7 @@

 import { Component, OnInit, Optional, OnDestroy } from '@angular/core';
 import { Router, ActivatedRoute, Params } from '@angular/router';
-import { NodePaging, Pagination } from 'alfresco-js-api';
+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';
@@ -61,10 +61,10 @@ export class SearchResultComponent implements OnInit, OnDestroy {
                this.isLoading = true;
            }),

-            this.queryBuilder.executed.subscribe((data) => {
+            this.queryBuilder.executed.subscribe((resultSetPaging: ResultSetPaging) => {
                this.queryBuilder.paging.skipCount = 0;

-                this.onSearchResultLoaded(data);
+                this.onSearchResultLoaded(resultSetPaging);
                this.isLoading = false;
            })
        );
@@ -79,7 +79,12 @@ export class SearchResultComponent implements OnInit, OnDestroy {
                    this.queryBuilder.update();
                } else {
                    this.queryBuilder.userQuery = null;
-                    this.queryBuilder.executed.next({ list: { pagination: { totalItems: 0 }, entries: [] } });
+                    this.queryBuilder.executed.next(new ResultSetPaging({
+                        list: {
+                            pagination: { totalItems: 0 },
+                            entries: []
+                        }
+                    }));
                }
            });
        }
@@ -101,9 +106,9 @@ export class SearchResultComponent implements OnInit, OnDestroy {
        this.subscriptions = [];
    }

-    onSearchResultLoaded(nodePaging: NodePaging) {
-        this.data = nodePaging;
-        this.pagination = { ...nodePaging.list.pagination };
+    onSearchResultLoaded(resultSetPaging: ResultSetPaging) {
+        this.data = resultSetPaging;
+        this.pagination = { ...resultSetPaging.list.pagination };
    }

    onRefreshPagination(pagination: Pagination) {
@@ -1,54 +0,0 @@
-<h2>TASK LIST CLOUD DEMO</h2>
-<div fxLayout="row" fxLayout.xs="column">
-    <div fxFlexOrder="1" fxFlex="15%">
-        <adf-sidebar-action-menu [expanded]="true" [width]="205" title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
-            <mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon>
-            <div sidebar-menu-options>
-                <button mat-menu-item data-automation-id="btn-start-task" (click)="onStartTask()">
-                    <mat-icon>assessment</mat-icon>
-                    <span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_TASK' | translate}}</span>
-                </button>
-            </div>
-        </adf-sidebar-action-menu>
-    </div>
-</div>
-
-<div *ngIf="showStartTask">
-    <adf-cloud-start-task [appName]="applicationName" (success)="onStartTaskSuccess()" (cancel)="onCancelStartTask()">
-    </adf-cloud-start-task>
-</div>
-<div *ngIf="!showStartTask">
-    <adf-cloud-task-filters  #taskFiltersCloud
-     [appName]="applicationName"
-     [filterParam]="filterTaskParam"
-     [showIcons]="true"
-     (filterClick)="onFilterSelected($event)">
-    </adf-cloud-task-filters>
-
-    <adf-cloud-edit-task-filter
-        [appName]="applicationName"
-        [id]="currentFilter.id"
-        (filterChange)="onFilterChange($event)"
-        (action)="onEditActions($event)">
-    </adf-cloud-edit-task-filter>
-
-    <div *ngIf="editedFilter">
-        <adf-cloud-task-list #taskCloud
-            [applicationName]="editedFilter.appName"
-            [status]="editedFilter.state"
-            [assignee]="editedFilter.assignment"
-            [sorting]="sortArray"
-            (rowClick)="onRowClick($event)">
-            <data-columns>
-                <data-column key="entry.id" title="Id"></data-column>
-                <data-column key="entry.name" title="Name" class="full-width name-column ellipsis-cell"></data-column>
-                <data-column key="entry.status" title="Status"></data-column>
-                <data-column key="entry.processDefinitionId" title="Process Definition Id"></data-column>
-                <data-column key="entry.priority" title="Priority"></data-column>
-                <data-column key="entry.createdDate" type="date" title="Created Date" [format]="'timeAgo'"></data-column>
-            </data-columns>
-        </adf-cloud-task-list>
-        <adf-pagination [target]="taskCloud" (changePageSize)="onChangePageSize($event)">
-        </adf-pagination>
-    </div>
-</div>
@@ -1,15 +0,0 @@
-.adf-task-cloud-demo-select {
-    padding: 10px;
-}
-
-.adf-task-cloud-demo-select .mat-expansion-panel-body {
-    display: flex;
-}
-
-.adf-app-task-list-cloud-demo-selection {
-    display: flex;
-}
-
-.adf-task-row-clicked {
-    align-self: center;
-}
@@ -1,128 +0,0 @@
-/*!
- * @license
- * Copyright 2016 Alfresco Software, Ltd.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { Component, ViewChild, OnInit } from '@angular/core';
-import {
-    TaskListCloudComponent,
-    TaskFiltersCloudComponent,
-    TaskListCloudSortingModel,
-    TaskFilterCloudModel,
-    EditTaskFilterCloudComponent
-} from '@alfresco/adf-process-services-cloud';
-import { UserPreferencesService } from '@alfresco/adf-core';
-import { Observable } from 'rxjs';
-import { ActivatedRoute, Router } from '@angular/router';
-
-@Component({
-    selector: 'app-task-list-cloud-demo',
-    templateUrl: 'task-list-cloud-demo.component.html',
-    styleUrls: ['task-list-cloud-demo.component.scss']
-})
-export class TaskListCloudDemoComponent implements OnInit {
-
-    @ViewChild('taskCloud')
-    taskCloud: TaskListCloudComponent;
-
-    @ViewChild('taskFiltersCloud')
-    taskFiltersCloud: TaskFiltersCloudComponent;
-
-    appDefinitionList: Observable<any>;
-    applicationName;
-    status: string = '';
-    showStartTask = false;
-    clickedRow: string = '';
-    filterTaskParam;
-    sortArray: TaskListCloudSortingModel[];
-    editedFilter: TaskFilterCloudModel;
-
-    currentFilter: TaskFilterCloudModel;
-
-    constructor(
-        private route: ActivatedRoute,
-        private router: Router,
-        private userPreference: UserPreferencesService
-    ) {}
-
-    ngOnInit() {
-        this.route.params.subscribe((params) => {
-            this.applicationName = params.applicationName;
-        });
-
-        this.route.queryParams.subscribe( (params) => {
-            this.onFilterChange(params);
-        });
-    }
-
-    onFilterSelected(filter: TaskFilterCloudModel) {
-        this.currentFilter = Object.assign({}, filter);
-        this.sortArray = [new TaskListCloudSortingModel({ orderBy: this.currentFilter.sort, direction: this.currentFilter.order})];
-
-        this.router.navigate([`/cloud/${this.applicationName}/tasks/`], {
-            queryParams: this.currentFilter
-        });
-    }
-
-    onFilterChange(filter: any) {
-        this.editedFilter = Object.assign({}, this.currentFilter, filter);
-        this.sortArray = [new TaskListCloudSortingModel({ orderBy: this.editedFilter.sort, direction: this.editedFilter.order})];
-    }
-
-    onStartTask() {
-        this.showStartTask = true;
-    }
-
-    onStartTaskSuccess() {
-        this.showStartTask = false;
-        this.filterTaskParam = { name: 'My tasks'};
-    }
-
-    onCancelStartTask() {
-        this.showStartTask = false;
-    }
-
-    onChangePageSize(event) {
-        this.userPreference.paginationSize = event.maxItems;
-    }
-
-    onRowClick($event) {
-        this.clickedRow = $event;
-    }
-
-    onEditActions(event: any) {
-        if (event.actionType === EditTaskFilterCloudComponent.ACTION_SAVE) {
-            this.save(event.id);
-        } else if (event.actionType === EditTaskFilterCloudComponent.ACTION_SAVE_AS) {
-            this.saveAs(event.id);
-        } else if (event.actionType === EditTaskFilterCloudComponent.ACTION_DELETE) {
-            this.deleteFilter();
-        }
-    }
-
-    saveAs(filterId) {
-        this.taskFiltersCloud.filterParam = <any> {id : filterId};
-        this.taskFiltersCloud.getFilters(this.applicationName);
-    }
-
-    save(filterId) {
-        this.taskFiltersCloud.filterParam = <any> {id : filterId};
-        this.taskFiltersCloud.getFilters(this.applicationName);
-    }
-
-    deleteFilter() {
-        this.taskFiltersCloud.getFilters(this.applicationName);
-    }
-}
@@ -0,0 +1,36 @@
+<h1>Document List Demo Page</h1>
+
+<h3>Default Loading Template</h3>
+<adf-document-list currentFolderId="-my-" #defaultDocumentList>
+</adf-document-list>
+
+<h3>Custom Loading Template</h3>
+<adf-document-list currentFolderId="-my-" #customLoadingDocumentList>
+        <adf-custom-loading-content-template>
+                This is a custom loading template
+                <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+        </adf-custom-loading-content-template>
+</adf-document-list>
+
+<h3>Default No Permission Template</h3>
+<adf-document-list currentFolderId="-my-" #defaultNoPermissionDocumentList>
+</adf-document-list>
+
+<h3>Custom No Permission Template</h3>
+<adf-document-list currentFolderId="-my-" #customNoPermissionDocumentList>
+        <adf-custom-no-permission-template>
+                This is a custom no permission template<mat-icon>pan_tool</mat-icon> You shall not see the content
+        </adf-custom-no-permission-template>
+</adf-document-list>
+
+<h3>Default Empty Content Template</h3>
+<adf-document-list #defaultEmptyDocumentList>
+</adf-document-list>
+
+<h3>Custom Empty Content Template</h3>
+<adf-document-list #customEmptyDocumentList>
+        <adf-custom-empty-content-template>
+                <div>This is a custom no content template</div>
+                <mat-icon>cancel_presentation</mat-icon>
+        </adf-custom-empty-content-template>
+</adf-document-list>
@@ -0,0 +1,57 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, ViewChild, AfterViewChecked } from '@angular/core';
+import { DocumentListComponent } from '@alfresco/adf-content-services';
+import { ObjectDataTableAdapter } from '@alfresco/adf-core';
+
+@Component({
+    selector: 'app-template-list',
+    templateUrl: './template-demo.component.html'
+})
+export class TemplateDemoComponent implements AfterViewChecked {
+
+    @ViewChild('defaultDocumentList')
+    defaultDocumentListComponent: DocumentListComponent;
+
+    @ViewChild('customLoadingDocumentList')
+    customLoadingDocumentList: DocumentListComponent;
+
+    @ViewChild('customNoPermissionDocumentList')
+    customNoPermissionDocumentList: DocumentListComponent;
+
+    @ViewChild('defaultNoPermissionDocumentList')
+    defaultNoPermissionDocumentList: DocumentListComponent;
+
+    @ViewChild('customEmptyDocumentList')
+    customEmptyDocumentList: DocumentListComponent;
+
+    @ViewChild('defaultEmptyDocumentList')
+    defaultEmptyDocumentList: DocumentListComponent;
+
+    constructor() {
+    }
+
+    ngAfterViewChecked(): void {
+        this.defaultDocumentListComponent.dataTable.loading = true;
+        this.customLoadingDocumentList.dataTable.loading = true;
+        this.customEmptyDocumentList.dataTable.data = new ObjectDataTableAdapter();
+        this.defaultEmptyDocumentList.dataTable.data = new ObjectDataTableAdapter();
+        this.customNoPermissionDocumentList.dataTable.noPermission = true;
+        this.defaultNoPermissionDocumentList.dataTable.noPermission = true;
+    }
+}
@@ -38,16 +38,14 @@
                           [contextMenuActions]="true"
                           [contentActions]="false">

-            <empty-folder-content>
-                <ng-template>
-                    <adf-empty-content
-                        icon="delete"
-                        [title]="'TRASHCAN.EMPTY_STATE.TITLE'">
-                        <p class="adf-empty-content__text">{{ 'TRASHCAN.EMPTY_STATE.FIRST_TEXT' | translate }}</p>
-                        <p class="adf-empty-content__text">{{ 'TRASHCAN.EMPTY_STATE.SECOND_TEXT' | translate }}</p>
-                    </adf-empty-content>
-                </ng-template>
-            </empty-folder-content>
+            <adf-custom-empty-content-template>
+                <adf-empty-content
+                    icon="delete"
+                    [title]="'TRASHCAN.EMPTY_STATE.TITLE'">
+                    <p class="adf-empty-content__text">{{ 'TRASHCAN.EMPTY_STATE.FIRST_TEXT' | translate }}</p>
+                    <p class="adf-empty-content__text">{{ 'TRASHCAN.EMPTY_STATE.SECOND_TEXT' | translate }}</p>
+                </adf-empty-content>
+            </adf-custom-empty-content-template>

            <data-columns>

@@ -19,7 +19,7 @@ import { Component, ViewChild } from '@angular/core';
 import { DocumentListComponent } from '@alfresco/adf-content-services';
 import { UserPreferencesService, UserPreferenceValues, RestoreMessageModel, NotificationService } from '@alfresco/adf-core';
 import { Router } from '@angular/router';
-import { PathInfoEntity } from 'alfresco-js-api';
+import { PathInfoEntity } from '@alfresco/js-api';

@Component({
    templateUrl: './trashcan.component.html',
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g id="Artboard_1"><g id="Page_1"><rect id="Fill_1" x="0" y="0" width="24" height="24" style="fill:none;"/><path id="Fill_2" d="M20,20l-16,0c-1.097,0 -2,-0.903 -2,-2l0.01,-12c0,-1.093 0.897,-1.995 1.99,-2l6,0l2,2l8,0c1.097,0 2,0.903 2,2l0,10c0,1.097 -0.903,2 -2,2Zm-9,-9l0,4l4,0l0,2l4,-4l-4,-4l0,2l-4,0Z" style="fill-rule:nonzero;"/></g></g></svg>
@@ -3,7 +3,6 @@
@import './app/components/login/login.component.scss';
@import './app/components/process-service/process-service.component.scss';

-
@import '~@alfresco/adf-content-services/theming';
@import '~@alfresco/adf-process-services/theming';
@import '~@alfresco/adf-process-services-cloud/theming';
@@ -55,7 +55,7 @@ import 'classlist.js';  // Run `npm install --save classlist.js`.

 /** Evergreen browsers require these. */
 import 'core-js/es6/reflect';
-import 'core-js/es7/reflect';
+
 import 'core-js/es6/array';
 import 'core-js/es7/array';

@@ -8,8 +8,8 @@
    "skipLibCheck": false,
    "types": [],
    "paths": {
-      "alfresco-js-api": [
-        "../../node_modules/alfresco-js-api/dist/alfresco-js-api.js"
+      "@alfresco/js-api": [
+        "../../node_modules/@alfresco/js-api"
      ],
      "rxjs/*": [
        "../../node_modules/rxjs/*"
@@ -10,10 +10,6 @@ section discusses particular techniques in depth. The other sections are referen
 libraries. Click the name of an item to see its documentation or click the source link to see
 its main source file. Note that ADF is developed continuously, so the source files for some items may be listed here before their documentation is available.

-See the [Version Index](versionIndex.md) for a list of components ordered by
-the ADF version where they were introduced. You can see the full details of each release
-in the [Release notes](release-notes/README.md) section.
-
 Components are sometimes marked with an icon to show their status. No icon indicates
 that the component is complete and suitable for normal use. The other status levels are:

@@ -27,6 +23,18 @@ that the component is complete and suitable for normal use. The other status lev
 There is also a set of ADF tutorials that describe how to accomplish tasks step-by-step.
 See the [Tutorials index](tutorials/README.md) for the full list.

+A few other pages of information are also available:
+
+-   The [Version Index](versionIndex.md) has a list of components ordered by
+    the ADF version where they were introduced.
+-   The [Release notes](release-notes/README.md) section has details of all
+    the features introduced and bugs fixed with each release.
+-   The [Version compatibility](compatibility.md) page shows which versions
+    of Alfresco's backend servies (ACS and APS) are compatible with each released
+    version of ADF.
+-   The [Roadmap](roadmap.md)
+    contains a preview of features we hope to release in future versions of ADF.
+
 ## Contents

 -   [User Guide](#user-guide)
@@ -79,6 +87,7 @@ for more information about installing and using the source code.
 | [Form component](core/form.component.md) | Shows a Form from APS | [Source](../lib/core/form/components/form.component.ts) |
 | [Start form component](core/start-form.component.md) | Displays the Start Form for a process. | [Source](../lib/core/form/components/start-form.component.ts) |
 | [Text mask component](core/text-mask.component.md) | Implements text field input masks. | [Source](../lib/core/form/components/widgets/text/text-mask.component.ts) |
+| [Icon component](core/icon.component.md) | Provides a universal way of rendering registered and named icons. | [Source](../lib/core/icon/icon.component.ts) |
 | [Info drawer layout component](core/info-drawer-layout.component.md) | Displays a sidebar-style information panel. | [Source](../lib/core/info-drawer/info-drawer-layout.component.ts) |
 | [Info drawer component](core/info-drawer.component.md) | Displays a sidebar-style information panel with tabs. | [Source](../lib/core/info-drawer/info-drawer.component.ts) |
 | [Language menu component](core/language-menu.component.md) | Displays all the languages that are present in "app.config.json" and the default (EN). | [Source](../lib/core/language-menu/language-menu.component.ts) |
@@ -108,6 +117,7 @@ for more information about installing and using the source code.
 | [Highlight directive](core/highlight.directive.md) | Adds highlighting to selected sections of an HTML element's content. | [Source](../lib/core/directives/highlight.directive.ts) |
 | [Logout directive](core/logout.directive.md) | Logs the user out when the decorated element is clicked. | [Source](../lib/core/directives/logout.directive.ts) |
 | [Node delete directive](core/node-delete.directive.md) | Deletes multiple files and folders. | [Source](../lib/core/directives/node-delete.directive.ts) |
+| [Node download directive](core/node-download.directive.md) | Allows folders and/or files to be downloaded, with multiple nodes packed as a '.ZIP' archive. | [Source](../lib/core/directives/node-download.directive.ts) |
 | [Node favorite directive](core/node-favorite.directive.md) | Selectively toggles nodes as favorites. | [Source](../lib/core/directives/node-favorite.directive.ts) |
 | [Node permission directive](core/node-permission.directive.md) | Selectively disables an HTML element or Angular component. | [Source](../lib/core/directives/node-permission.directive.ts) |
 | [Node restore directive](core/node-restore.directive.md) | Restores deleted nodes to their original location. | [Source](../lib/core/directives/node-restore.directive.ts) |
@@ -159,8 +169,10 @@ for more information about installing and using the source code.
 | [Cookie service](core/cookie.service.md) | Stores key-value data items as browser cookies. | [Source](../lib/core/services/cookie.service.ts) |
 | [Deleted nodes api service](core/deleted-nodes-api.service.md) | Gets a list of Content Services nodes currently in the trash. | [Source](../lib/core/services/deleted-nodes-api.service.ts) |
 | [Discovery api service](core/discovery-api.service.md) | Gets version and license information for Process Services and Content Services. | [Source](../lib/core/services/discovery-api.service.ts) |
+| [Download zip service](core/download-zip.service.md) | Creates and manages downloads. | [Source](../lib/core/services/download-zip.service.ts) |
 | [Favorites api service](core/favorites-api.service.md) | Gets a list of items a user has marked as their favorites. | [Source](../lib/core/services/favorites-api.service.ts) |
 | [Highlight transform service](core/highlight-transform.service.md) | Adds HTML to a string to highlight chosen sections. | [Source](../lib/core/services/highlight-transform.service.ts) |
+| [Jwt helper service](core/jwt-helper.service.md) | Decodes a JSON Web Token (JWT) to a JavaScript object.  | [Source](../lib/core/services/jwt-helper.service.ts) |
 | [Log service](core/log.service.md) | Provides log functionality. | [Source](../lib/core/services/log.service.ts) |
 | [Login dialog service](core/login-dialog.service.md) | Manages login dialogs. | [Source](../lib/core/services/login-dialog.service.ts) |
 | [Nodes api service](core/nodes-api.service.md) | Accesses and manipulates ACS document nodes using their node IDs. | [Source](../lib/core/services/nodes-api.service.ts) |
@@ -168,7 +180,7 @@ for more information about installing and using the source code.
 | [Page title service](core/page-title.service.md) | Sets the page title. | [Source](../lib/core/services/page-title.service.ts) |
 | [People content service](core/people-content.service.md) | Gets information about a Content Services user.   | [Source](../lib/core/services/people-content.service.ts) |
 | [People process service](core/people-process.service.md) | Gets information about Process Services users. | [Source](../lib/core/services/people-process.service.ts) |
-| [Renditions service](core/renditions.service.md) ![Deprecated](docassets/images/DeprecatedIcon.png) | Manages prearranged conversions of content to different formats. | [Source](../lib/core/services/renditions.service.ts) |
+| [Renditions service](core/renditions.service.md) | Manages prearranged conversions of content to different formats. | [Source](../lib/core/services/renditions.service.ts) |
 | [Search configuration service](core/search-configuration.service.md) | Provides fine control of parameters to a search. | [Source](../lib/core/services/search-configuration.service.ts) |
 | [Search service](core/search.service.md) | Accesses the Content Services Search API. | [Source](../lib/core/services/search.service.ts) |
 | [Shared links api service](core/shared-links-api.service.md) | Finds shared links to Content Services items. | [Source](../lib/core/services/shared-links-api.service.ts) |
@@ -180,8 +192,7 @@ for more information about installing and using the source code.
 | [User preferences service](core/user-preferences.service.md) | Stores preferences for the app and for individual components. | [Source](../lib/core/services/user-preferences.service.ts) |
 | [Bpm user service](core/bpm-user.service.md) | Gets information about the current Process Services user. | [Source](../lib/core/userinfo/services/bpm-user.service.ts) |
 | [Ecm user service](core/ecm-user.service.md) | Gets information about a Content Services user. | [Source](../lib/core/userinfo/services/ecm-user.service.ts) |
-| _Jwt helper service_ | _Not currently documented_ | [Source](../lib/core/services/jwt-helper.service.ts) |
-| _Identity user service_ | _Not currently documented_ | [Source](../lib/core/userinfo/services/identity-user.service.ts) |
+| [Identity user service](core/identity-user.service.md) | Gets OAuth2 personal details and roles for users.  | [Source](../lib/core/userinfo/services/identity-user.service.ts) |

 ## Widgets

@@ -218,7 +229,7 @@ for more information about installing and using the source code.
 | [Dropdown breadcrumb component](content-services/dropdown-breadcrumb.component.md) | Indicates the current position within a navigation hierarchy using a dropdown menu. | [Source](../lib/content-services/breadcrumb/dropdown-breadcrumb.component.ts) |
 | [Content metadata component](content-services/content-metadata.component.md) | Displays and edits metadata related to a node. | [Source](../lib/content-services/content-metadata/components/content-metadata/content-metadata.component.ts) |
 | [Content metadata card component](content-services/content-metadata-card.component.md) | Displays and edits metadata related to a node. | [Source](../lib/content-services/content-metadata/components/content-metadata-card/content-metadata-card.component.ts) |
-| [Content node selector panel component](content-services/content-node-selector-panel.component.md) | Opens a Content Node Selector in its own dialog window. | [Source](../lib/content-services/content-node-selector/content-node-selector-panel.component.ts) |
+| [Content node selector panel component](content-services/content-node-selector-panel.component.md) | Opens a Content Node Selector  in its own dialog window. | [Source](../lib/content-services/content-node-selector/content-node-selector-panel.component.ts) |
 | [Content node selector component](content-services/content-node-selector.component.md) | Allows a user to select items from a Content Services repository. | [Source](../lib/content-services/content-node-selector/content-node-selector.component.ts) |
 | [Content action component](content-services/content-action.component.md) | Adds options to a Document List actions menu for a particular content type. | [Source](../lib/content-services/document-list/components/content-action/content-action.component.ts) |
 | [Document list component](content-services/document-list.component.md) | Displays the documents from a repository. | [Source](../lib/content-services/document-list/components/document-list.component.ts) |
@@ -252,13 +263,19 @@ for more information about installing and using the source code.
 | [Version manager component](content-services/version-manager.component.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Displays the version history of a node with the ability to upload a new version. | [Source](../lib/content-services/version-manager/version-manager.component.ts) |
 | [Webscript component](content-services/webscript.component.md) | Provides access to Webscript features. | [Source](../lib/content-services/webscript/webscript.component.ts) |

+## Dialogs
+
+| Name | Description | Source link |
+| ---- | ----------- | ----------- |
+| [Confirm dialog](content-services/confirm.dialog.md) | Requests a yes/no choice from the user. | [Source](../lib/content-services/dialogs/confirm.dialog.ts) |
+| [Library dialog](content-services/library.dialog.md) | Creates a new Content Services document library/site. | [Source](../lib/content-services/dialogs/library/library.dialog.ts) |
+
 ## Directives

 | Name | Description | Source link |
 | ---- | ----------- | ----------- |
 | [Content node share directive](content-services/content-node-share.directive.md) | Creates and manages public shared links for files. | [Source](../lib/content-services/content-node-share/content-node-share.directive.ts) |
-| [Node download directive](content-services/node-download.directive.md) | Allows folders and/or files to be downloaded, with multiple nodes packed as a '.ZIP' archive. | [Source](../lib/content-services/directives/node-download.directive.ts) |
-| [Node lock directive](content-services/node-lock.directive.md) | Locks a node. | [Source](../lib/content-services/directives/node-lock.directive.ts) |
+| [Node lock directive](content-services/node-lock.directive.md) | Locks or unlocks a node. | [Source](../lib/content-services/directives/node-lock.directive.ts) |
 | [Folder create directive](content-services/folder-create.directive.md) | Creates folders. | [Source](../lib/content-services/folder-directive/folder-create.directive.ts) |
 | [Folder edit directive](content-services/folder-edit.directive.md) | Allows folders to be edited. | [Source](../lib/content-services/folder-directive/folder-edit.directive.ts) |
 | [Inherited button directive](content-services/inherited-button.directive.md) | Update the current node by adding/removing the inherited permissions. | [Source](../lib/content-services/permission-manager/components/inherited-button.directive.ts) |
@@ -268,9 +285,16 @@ for more information about installing and using the source code.

 | Name | Description | Source link |
 | ---- | ----------- | ----------- |
-| [Document library model](content-services/document-library.model.md) | Defines classes for use with the Content Services node API. | [Source](../lib/content-services/document-list/models/document-library.model.ts) |
+| [Image resolver model](content-services/image-resolver.model.md) | Defines the Image Resolver function used by the Document List Component. | [Source](../lib/content-services/document-list/data/image-resolver.model.ts) |
+| [Row filter model](content-services/row-filter.model.md) | Defines the Row Filter function used by the Document List Component. | [Source](../lib/content-services/document-list/data/row-filter.model.ts) |
 | [Permissions style model](content-services/permissions-style.model.md) | Sets custom CSS styles for rows of a Document List according to the item's permissions. | [Source](../lib/content-services/document-list/models/permissions-style.model.ts) |

+## Pipes
+
+| Name | Description | Source link |
+| ---- | ----------- | ----------- |
+| [File upload error pipe](content-services/file-upload-error.pipe.md) | Converts an upload error code to an error message. | [Source](../lib/content-services/upload/pipes/file-upload-error.pipe.ts) |
+
 ## Services

 | Name | Description | Source link |
@@ -311,10 +335,10 @@ for more information about installing and using the source code.
 | Name | Description | Source link |
 | ---- | ----------- | ----------- |
 | [Apps list component](process-services/apps-list.component.md) | Shows all available apps. | [Source](../lib/process-services/app-list/apps-list.component.ts) |
-| [Create process attachment component](process-services/create-process-attachment.component.md) | Displays Upload Component (Drag and Click) to upload the attachment to a specified process instance | [Source](../lib/process-services/attachment/create-process-attachment.component.ts) |
-| [Create task attachment component](process-services/create-task-attachment.component.md) | Displays Upload Component (Drag and Click) to upload the attachment to a specified task | [Source](../lib/process-services/attachment/create-task-attachment.component.ts) |
-| [Process attachment list component](process-services/process-attachment-list.component.md) | Displays attached documents on a specified process instance | [Source](../lib/process-services/attachment/process-attachment-list.component.ts) |
-| [Task attachment list component](process-services/task-attachment-list.component.md) | Displays attached documents on a specified task. | [Source](../lib/process-services/attachment/task-attachment-list.component.ts) |
+| [Create process attachment component](process-services/create-process-attachment.component.md) | Displays an Upload Component (Drag and Click) to upload the attachment to a specified process instance. | [Source](../lib/process-services/attachment/create-process-attachment.component.ts) |
+| [Create task attachment component](process-services/create-task-attachment.component.md) | Displays an Upload Component (Drag and Click) to upload the attachment to a specified task. | [Source](../lib/process-services/attachment/create-task-attachment.component.ts) |
+| [Process attachment list component](process-services/process-attachment-list.component.md) | Displays documents attached to a specified process instance. | [Source](../lib/process-services/attachment/process-attachment-list.component.ts) |
+| [Task attachment list component](process-services/task-attachment-list.component.md) | Displays documents attached to a specified task. | [Source](../lib/process-services/attachment/task-attachment-list.component.ts) |
 | [People component](process-services/people.component.md) | Displays users involved with a specified task | [Source](../lib/process-services/people/components/people/people.component.ts) |
 | [People list component](process-services/people-list.component.md) | Shows a list of users (people). | [Source](../lib/process-services/people/components/people-list/people-list.component.ts) |
 | [People search component](process-services/people-search.component.md) | Searches users/people. | [Source](../lib/process-services/people/components/people-search/people-search.component.ts) |
@@ -327,7 +351,7 @@ for more information about installing and using the source code.
 | [Start process component](process-services/start-process.component.md) | Starts a process. | [Source](../lib/process-services/process-list/components/start-process.component.ts) |
 | [Attach form component](process-services/attach-form.component.md) | This component can be used when there is no form attached to a task and you want to add one. | [Source](../lib/process-services/task-list/components/attach-form.component.ts) |
 | [Checklist component](process-services/checklist.component.md) | Shows the checklist task functionality. | [Source](../lib/process-services/task-list/components/checklist.component.ts) |
-| [Start task component](process-services/start-task.component.md) | Creates/Starts a new task for the specified app | [Source](../lib/process-services/task-list/components/start-task.component.ts) |
+| [Start task component](process-services/start-task.component.md) | Creates/Starts a new task for the specified app. | [Source](../lib/process-services/task-list/components/start-task.component.ts) |
 | [Task details component](process-services/task-details.component.md) | Shows the details of the task ID passed in as input. | [Source](../lib/process-services/task-list/components/task-details.component.ts) |
 | [Task filters component](process-services/task-filters.component.md) | Shows all available filters. | [Source](../lib/process-services/task-list/components/task-filters.component.ts) |
 | [Task header component](process-services/task-header.component.md) | Shows all the information related to a task. | [Source](../lib/process-services/task-list/components/task-header.component.ts) |
@@ -338,7 +362,7 @@ for more information about installing and using the source code.

 | Name | Description | Source link |
 | ---- | ----------- | ----------- |
-| [Process audit directive](process-services/process-audit.directive.md) | Fetches the Process Audit information the PDF or JSON format. | [Source](../lib/process-services/process-list/components/process-audit.directive.ts) |
+| [Process audit directive](process-services/process-audit.directive.md) | Fetches the Process Audit information in PDF or JSON format. | [Source](../lib/process-services/process-list/components/process-audit.directive.ts) |
 | [Task audit directive](process-services/task-audit.directive.md) | Fetches the Task Audit information in PDF or JSON format. | [Source](../lib/process-services/task-list/components/task-audit.directive.ts) |

 ## Services
@@ -367,25 +391,38 @@ for more information about installing and using the source code.

 | Name | Description | Source link |
 | ---- | ----------- | ----------- |
-| [App list cloud component](process-services-cloud/app-list-cloud.component.md) | Shows all deployed cloud application instances. | [Source](../lib/process-services-cloud/src/lib/app-list-cloud/components/app-list-cloud.component.ts) |
-| [Process list cloud component](process-services-cloud/process-list-cloud.component.md) | Renders a list containing all the process instances matched by the parameters specified. | [Source](../lib/process-services-cloud/src/lib/process-list-cloud/components/process-list-cloud.component.ts) |
-| [Start task cloud component](process-services-cloud/start-task-cloud.component.md) | Creates/Starts new task for the specified app | [Source](../lib/process-services-cloud/src/lib/start-task-cloud/components/start-task-cloud.component.ts) |
-| [Task filters cloud component](process-services-cloud/task-filters-cloud.component.md) | Shows all available filters. | [Source](../lib/process-services-cloud/src/lib/task-cloud/task-filters-cloud/task-filters-cloud.component.ts) |
-| [Task list cloud component](process-services-cloud/task-list-cloud.component.md) | Renders a list containing all the tasks matched by the parameters specified. | [Source](../lib/process-services-cloud/src/lib/task-list-cloud/components/task-list-cloud.component.ts) |
-| _App details cloud component_ | _Not currently documented_ | [Source](../lib/process-services-cloud/src/lib/app-list-cloud/components/app-details-cloud.component.ts) |
-| _Process filters cloud component_ | _Not currently documented_ | [Source](../lib/process-services-cloud/src/lib/process-cloud/process-filters-cloud/process-filters-cloud.component.ts) |
-| _People cloud component_ | _Not currently documented_ | [Source](../lib/process-services-cloud/src/lib/start-task-cloud/components/people-cloud/people-cloud.component.ts) |
+| [App list cloud component](process-services-cloud/app-list-cloud.component.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Shows all deployed cloud application instances. | [Source](../lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.ts) |
+| [Group cloud component](process-services-cloud/group-cloud.component.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Searches Groups. | [Source](../lib/process-services-cloud/src/lib/group/components/group-cloud.component.ts) |
+| [Edit process filter cloud component](process-services-cloud/edit-process-filter-cloud.component.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Shows Process Filter Details. | [Source](../lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.ts) |
+| [Process filters cloud component](process-services-cloud/process-filters-cloud.component.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Lists all available process filters and allows to select a filter. | [Source](../lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.ts) |
+| [Process list cloud component](process-services-cloud/process-list-cloud.component.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Renders a list containing all the process instances matched by the parameters specified. | [Source](../lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.ts) |
+| [Start process cloud component](process-services-cloud/start-process-cloud.component.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Starts a process. | [Source](../lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.ts) |
+| [People cloud component](process-services-cloud/people-cloud.component.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Allows one or more users to be selected (with auto-suggestion) based on the input parameters. | [Source](../lib/process-services-cloud/src/lib/task/start-task/components/people-cloud/people-cloud.component.ts) |
+| [Start task cloud component](process-services-cloud/start-task-cloud.component.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Creates/starts a new task for the specified app. | [Source](../lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.ts) |
+| [Edit task filter cloud component](process-services-cloud/edit-task-filter-cloud.component.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Edits Task Filter Details. | [Source](../lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filter-cloud.component.ts) |
+| [Task filters cloud component](process-services-cloud/task-filters-cloud.component.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Shows all available filters. | [Source](../lib/process-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.ts) |
+| [Task header cloud component](process-services-cloud/task-header-cloud.component.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Shows all the information related to a task. | [Source](../lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.ts) |
+| [Task list cloud component](process-services-cloud/task-list-cloud.component.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Renders a list containing all the tasks matched by the parameters specified. | [Source](../lib/process-services-cloud/src/lib/task/task-list/components/task-list-cloud.component.ts) |
+
+## Pipes
+
+| Name | Description | Source link |
+| ---- | ----------- | ----------- |
+| [Group initial pipe](process-services-cloud/group-initial.pipe.md) | Extracts the initial character from a group name. | [Source](../lib/process-services-cloud/src/lib/group/pipe/group-initial.pipe.ts) |

 ## Services

 | Name | Description | Source link |
 | ---- | ----------- | ----------- |
-| _Apps process cloud service_ | _Not currently documented_ | [Source](../lib/process-services-cloud/src/lib/app-list-cloud/services/apps-process-cloud.service.ts) |
-| _Process filter cloud service_ | _Not currently documented_ | [Source](../lib/process-services-cloud/src/lib/process-cloud/services/process-filter-cloud.service.ts) |
-| _Process list cloud service_ | _Not currently documented_ | [Source](../lib/process-services-cloud/src/lib/process-list-cloud/services/process-list-cloud.service.ts) |
-| _Start task cloud service_ | _Not currently documented_ | [Source](../lib/process-services-cloud/src/lib/start-task-cloud/services/start-task-cloud.service.ts) |
-| _Task filter cloud service_ | _Not currently documented_ | [Source](../lib/process-services-cloud/src/lib/task-cloud/services/task-filter-cloud.service.ts) |
-| _Task list cloud service_ | _Not currently documented_ | [Source](../lib/process-services-cloud/src/lib/task-list-cloud/services/task-list-cloud.service.ts) |
+| [Apps process cloud service](process-services-cloud/apps-process-cloud.service.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Gets details of deployed apps for the current user.  | [Source](../lib/process-services-cloud/src/lib/app/services/apps-process-cloud.service.ts) |
+| [Group cloud service](process-services-cloud/group-cloud.service.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Searches and gets information for groups.  | [Source](../lib/process-services-cloud/src/lib/group/services/group-cloud.service.ts) |
+| [Process filter cloud service](process-services-cloud/process-filter-cloud.service.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Manage Process Filters, which are pre-configured Process Instance queries.  | [Source](../lib/process-services-cloud/src/lib/process/process-filters/services/process-filter-cloud.service.ts) |
+| [Process list cloud service](process-services-cloud/process-list-cloud.service.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Searches processes.  | [Source](../lib/process-services-cloud/src/lib/process/process-list/services/process-list-cloud.service.ts) |
+| [Start process cloud service](process-services-cloud/start-process-cloud.service.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Gets process definitions and starts processes.  | [Source](../lib/process-services-cloud/src/lib/process/start-process/services/start-process-cloud.service.ts) |
+| [Start task cloud service](process-services-cloud/start-task-cloud.service.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Starts standalone tasks.  | [Source](../lib/process-services-cloud/src/lib/task/start-task/services/start-task-cloud.service.ts) |
+| [Task filter cloud service](process-services-cloud/task-filter-cloud.service.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Manages task filters.  | [Source](../lib/process-services-cloud/src/lib/task/task-filters/services/task-filter-cloud.service.ts) |
+| [Task header cloud service](process-services-cloud/task-header-cloud.service.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Manages cloud tasks.  | [Source](../lib/process-services-cloud/src/lib/task/task-header/services/task-header-cloud.service.ts) |
+| [Task list cloud service](process-services-cloud/task-list-cloud.service.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Searches tasks.  | [Source](../lib/process-services-cloud/src/lib/task/task-list/services/task-list-cloud.service.ts) |

 <!--process-services-cloud end-->

@@ -404,15 +441,13 @@ for more information about installing and using the source code.

 | Name | Description | Source link |
 | ---- | ----------- | ----------- |
-| _Dynamic component_ | _Not currently documented_ | [Source](../lib/extensions/src/lib/components/dynamic-component/dynamic.component.ts) |
-| _Dynamic tab component_ | _Not currently documented_ | [Source](../lib/extensions/src/lib/components/dynamic-tab/dynamic-tab.component.ts) |
+| [Dynamic component](extensions/dynamic.component.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Displays dynamically-loaded extension components. | [Source](../lib/extensions/src/lib/components/dynamic-component/dynamic.component.ts) |

 ## Services

 | Name | Description | Source link |
 | ---- | ----------- | ----------- |
-| _Extension loader service_ | _Not currently documented_ | [Source](../lib/extensions/src/lib/services/extension-loader.service.ts) |
-| _Extension service_ | _Not currently documented_ | [Source](../lib/extensions/src/lib/services/extension.service.ts) |
+| [Extension service](extensions/extension.service.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Manages and runs basic extension functionality. | [Source](../lib/extensions/src/lib/services/extension.service.ts) |

 <!--extensions end-->

@@ -0,0 +1,26 @@
+- tutorials:
+    title: Tutorials
+    children:
+        - creating-your-first-adf-application.md: 'Creating your first ADF application'
+        - creating-the-app-using-yeoman.md: 'Creating your ADF application using Yeoman'
+        - creating-javascript-app-using-alfresco-js-api.md: 'Creating your JavaScript application using alfresco-js-api'
+        - new-component.md: 'Adding a new component'
+        - new-view.md: 'Adding a new view'
+        - using-components.md: 'Using components'
+        - basic-theming.md: 'Basic theming'
+        - customising-login.md: 'Customising the Login component'
+        - working-with-data-table.md: 'Working with a DataTable'
+        - working-with-nodes-api-service.md: 'Working with the Nodes API Service'
+        - working-with-nodes-js-api.md: 'Working with nodes using the JS-API'
+        - content-metadata-component.md: 'Content metadata component'
+- user-guide: 'User guide'
+- core: 'Core API'
+- content-services: 'Content Services API'
+- process-services: 'Process Services API'
+- process-services-cloud: 'Process Services Cloud API'
+- extensions: 'Extensions API'
+- insights: 'Insights API'
+- roadmap.md: 'Roadmap'
+- versionIndex.md: 'Version index'
+- compatibility.md: 'Version compatibility'
+- release-notes: 'Release notes'
@@ -0,0 +1,19 @@
+---
+Title: Version compatibility
+---
+
+# Version compatibility
+
+The table below shows the versions of Alfresco's backend services that
+have been tested with latest versions of ADF. Note that *smoke testing*
+means that the version should be safe to use (ie, it won't "catch fire")
+but it is not guaranteed to be free of minor issues or missing features.
+
+You can find further information about released versions of ADF in the
+[version index](versionIndex.md) and the [release notes](release-notes/README.md).
+
+| ADF version | ACS versions | APS versions |
+| -- | -- | -- |
+| [2.6.0](versionIndex.md#v260) | **Full test:** v6.0.0, v5.2.4 <br/> **Smoke test:** v5.2.3 | **Full test:** v1.9.0 <br/>**Smoke test:** v1.8.1, v1.7.0, v1.6.4  |
+| [2.5.0](versionIndex.md#v250) | **Full test:** v5.2.3 | **Full test:** v1.6.4 |
+| [2.4.0](versionIndex.md#v240) | **Full test:** v5.2.3 <br/> **Smoke test:** v6.0.0 | **Full test:** v1.8.1 <br/> **Smoke test:** v1.9.0, v1.8.0, v1.7.0, v1.6.4 |
@@ -20,7 +20,7 @@ for more information about installing and using the source code.
 | [Dropdown breadcrumb component](dropdown-breadcrumb.component.md) | Indicates the current position within a navigation hierarchy using a dropdown menu. | [Source](../../lib/content-services/breadcrumb/dropdown-breadcrumb.component.ts) |
 | [Content metadata component](content-metadata.component.md) | Displays and edits metadata related to a node. | [Source](../../lib/content-services/content-metadata/components/content-metadata/content-metadata.component.ts) |
 | [Content metadata card component](content-metadata-card.component.md) | Displays and edits metadata related to a node. | [Source](../../lib/content-services/content-metadata/components/content-metadata-card/content-metadata-card.component.ts) |
-| [Content node selector panel component](content-node-selector-panel.component.md) | Opens a Content Node Selector in its own dialog window. | [Source](../../lib/content-services/content-node-selector/content-node-selector-panel.component.ts) |
+| [Content node selector panel component](content-node-selector-panel.component.md) | Opens a Content Node Selector  in its own dialog window. | [Source](../../lib/content-services/content-node-selector/content-node-selector-panel.component.ts) |
 | [Content node selector component](content-node-selector.component.md) | Allows a user to select items from a Content Services repository. | [Source](../../lib/content-services/content-node-selector/content-node-selector.component.ts) |
 | [Content action component](content-action.component.md) | Adds options to a Document List actions menu for a particular content type. | [Source](../../lib/content-services/document-list/components/content-action/content-action.component.ts) |
 | [Document list component](document-list.component.md) | Displays the documents from a repository. | [Source](../../lib/content-services/document-list/components/document-list.component.ts) |
@@ -54,13 +54,19 @@ for more information about installing and using the source code.
 | [Version manager component](version-manager.component.md) ![Experimental](../docassets/images/ExperimentalIcon.png) | Displays the version history of a node with the ability to upload a new version. | [Source](../../lib/content-services/version-manager/version-manager.component.ts) |
 | [Webscript component](webscript.component.md) | Provides access to Webscript features. | [Source](../../lib/content-services/webscript/webscript.component.ts) |

+## Dialogs
+
+| Name | Description | Source link |
+| ---- | ----------- | ----------- |
+| [Confirm dialog](confirm.dialog.md) | Requests a yes/no choice from the user. | [Source](../../lib/content-services/dialogs/confirm.dialog.ts) |
+| [Library dialog](library.dialog.md) | Creates a new Content Services document library/site. | [Source](../../lib/content-services/dialogs/library/library.dialog.ts) |
+
 ## Directives

 | Name | Description | Source link |
 | ---- | ----------- | ----------- |
 | [Content node share directive](content-node-share.directive.md) | Creates and manages public shared links for files. | [Source](../../lib/content-services/content-node-share/content-node-share.directive.ts) |
-| [Node download directive](node-download.directive.md) | Allows folders and/or files to be downloaded, with multiple nodes packed as a '.ZIP' archive. | [Source](../../lib/content-services/directives/node-download.directive.ts) |
-| [Node lock directive](node-lock.directive.md) | Locks a node. | [Source](../../lib/content-services/directives/node-lock.directive.ts) |
+| [Node lock directive](node-lock.directive.md) | Locks or unlocks a node. | [Source](../../lib/content-services/directives/node-lock.directive.ts) |
 | [Folder create directive](folder-create.directive.md) | Creates folders. | [Source](../../lib/content-services/folder-directive/folder-create.directive.ts) |
 | [Folder edit directive](folder-edit.directive.md) | Allows folders to be edited. | [Source](../../lib/content-services/folder-directive/folder-edit.directive.ts) |
 | [Inherited button directive](inherited-button.directive.md) | Update the current node by adding/removing the inherited permissions. | [Source](../../lib/content-services/permission-manager/components/inherited-button.directive.ts) |
@@ -70,9 +76,16 @@ for more information about installing and using the source code.

 | Name | Description | Source link |
 | ---- | ----------- | ----------- |
-| [Document library model](document-library.model.md) | Defines classes for use with the Content Services node API. | [Source](../../lib/content-services/document-list/models/document-library.model.ts) |
+| [Image resolver model](image-resolver.model.md) | Defines the Image Resolver function used by the Document List Component. | [Source](../../lib/content-services/document-list/data/image-resolver.model.ts) |
+| [Row filter model](row-filter.model.md) | Defines the Row Filter function used by the Document List Component. | [Source](../../lib/content-services/document-list/data/row-filter.model.ts) |
 | [Permissions style model](permissions-style.model.md) | Sets custom CSS styles for rows of a Document List according to the item's permissions. | [Source](../../lib/content-services/document-list/models/permissions-style.model.ts) |

+## Pipes
+
+| Name | Description | Source link |
+| ---- | ----------- | ----------- |
+| [File upload error pipe](file-upload-error.pipe.md) | Converts an upload error code to an error message. | [Source](../../lib/content-services/upload/pipes/file-upload-error.pipe.ts) |
+
 ## Services

 | Name | Description | Source link |
@@ -2,7 +2,7 @@
 Title: Add Permission Component
 Added: v2.4.0
 Status: Active
-Last reviewed: 2018-11-19
+Last reviewed: 2019-01-16
 ---

 # [Add Permission Component](../../lib/content-services/permission-manager/components/add-permission/add-permission.component.ts "Defined in add-permission.component.ts")
@@ -34,7 +34,7 @@ Searches for people or groups to add to the current node permissions.
 | Name | Type | Description |
 | ---- | ---- | ----------- |
 | error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when an error occurs during the update. |
-| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`>` | Emitted when the node is updated successfully. |
+| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`Node`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md)`>` | Emitted when the node is updated successfully. |

 ## Details

@@ -2,7 +2,7 @@
 Title: Breadcrumb Component
 Added: v2.0.0
 Status: Active
-Last reviewed: 2018-06-08
+Last reviewed: 2019-01-16
 ---

 # [Breadcrumb Component](../../lib/content-services/breadcrumb/breadcrumb.component.ts "Defined in breadcrumb.component.ts")
@@ -15,8 +15,7 @@ Indicates the current position within a navigation hierarchy.

 ```html
 <adf-breadcrumb
-    [target]="documentList"
-    [folderNode]="documentList.folderNode">
+    [target]="documentList">
 </adf-breadcrumb>
 ```

@@ -26,7 +25,7 @@ Indicates the current position within a navigation hierarchy.

 | Name | Type | Default value | Description |
 | ---- | ---- | ------------- | ----------- |
-| folderNode | [`MinimalNodeEntryEntity`](../content-services/document-library.model.md) | null | Active node, builds UI based on folderNode.path.elements collection. |
+| folderNode | [`Node`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md) | null | Active node, builds UI based on folderNode.path.elements collection. |
 | maxItems | `number` |  | Maximum number of nodes to display before wrapping them with a dropdown element. |
 | root | `string` | null | (optional) Name of the root element of the breadcrumb. You can use this property to rename "Company Home" to "Personal Files" for example. You can use an i18n resource key for the property value. |
 | rootId | `string` | null | (optional) The id of the root element. You can use this property to set a custom element the breadcrumb should start with. |
@@ -37,7 +36,7 @@ Indicates the current position within a navigation hierarchy.

 | Name | Type | Description |
 | ---- | ---- | ----------- |
-| navigate | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`PathElementEntity`](../../lib/content-services/document-list/models/document-library.model.ts)`>` | Emitted when the user clicks on a breadcrumb. |
+| navigate | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the user clicks on a breadcrumb. |

 ## Details

@@ -48,7 +47,7 @@ removed and kept in a menu as with the

 ### Using the transform function

-The function supplied in the `transform` property lets you modify the Node object that the component
+The function supplied in the `transform` property lets you modify the [`Node`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md) object that the component
 uses to find the "crumbs" for the list. You can use this, for example, to remove unwanted items from
 the list by altering the node's `path.elements` property.

@@ -75,7 +74,7 @@ initialization:
 A transform function to remove the "Sites" folder from the path would look something like this:

 ```ts
-    private changeBreadcrumbPath(node: MinimalNodeEntryEntity) {
+    private changeBreadcrumbPath(node: Node) {

        if (node && node.path && node.path.elements) {
            const elements = node.path.elements;
@@ -0,0 +1,47 @@
+---
+Title: Confirm dialog component
+Added: v2.3.0
+Status: Active
+Last reviewed: 2019-01-22
+---
+
+# [Confirm dialog component](../../lib/content-services/dialogs/confirm.dialog.ts "Defined in confirm.dialog.ts")
+
+Requests a yes/no choice from the user.
+
+![Confirm dialog](../docassets/images/ConfirmDialog.png)
+
+## Basic Usage
+
+```ts
+constructor(private dialog: MatDialog) {}
+
+...
+
+let files = [
+    // Files defined here...
+];
+
+const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+    data: {
+        title: 'Upload',
+        message: `Are you sure you want to upload ${files.length} file(s)?`
+    },
+    minWidth: '250px'
+});
+
+dialogRef.afterClosed().subscribe((result) => {
+    if (result === true) {
+        event.resumeUpload();
+    }
+});
+```
+
+## Details
+
+This component lets the user make a yes/no choice to confirm an action. Use the
+Angular [`MatDialog`](https://material.angular.io/components/dialog/overview)
+service to open the dialog, as shown in the example, and pass a `data` object
+with properties for the `title` and `message` to show. The `afterClosed` event
+of the [`MatDialog`](https://material.angular.io/components/dialog/overview)
+gives you the user's choice via the `result` parameter.
@@ -2,7 +2,7 @@
 Title: Content Action component
 Added: v2.0.0
 Status: Active
-Last reviewed: 2018-11-20
+Last reviewed: 2019-01-17
 ---

 # [Content Action component](../../lib/content-services/document-list/components/content-action/content-action.component.ts "Defined in content-action.component.ts")
@@ -122,8 +122,7 @@ will trigger the same action.) You can also add your own handler by implementing

 Note that you can use _both_ a built-in handler and your own `execute`
 function in the same action. The `execute` function is passed a [`NodeMinimalEntry`](../../lib/content-services/document-list/models/document-library.model.ts) as its
-parameter (see the [Document Library model](document-library.model.md) page for more
-information) which contains full details of the item that the action is operating on. For
+parameter. For
 example, with `handler="delete"` you could use `execute` to show a message with the name,
 type, and other details of the item just deleted:

@@ -354,7 +353,7 @@ your component class:
 ```ts
 export class MyComponent {

-    canDownloadNode = (node: MinimalNodeEntity): boolean => {
+    canDownloadNode = (node: Node): boolean => {
        if (node && node.entry && node.entry.name === 'For Sale.docx') {
            return true;
        }
@@ -410,7 +409,7 @@ The code above relies on the `isCustomActionDisabled` property of a `Function` t
 ```ts
 export class MyComponent {

-    isCustomActionDisabled = (node: MinimalNodeEntity): boolean => {
+    isCustomActionDisabled = (node: Node): boolean => {
        if (node && node.entry && node.entry.name === 'custom') {
            return false;
        }
--- a/Show More
+++ b/Show More
				`@@ -1,2 +1 @@`

				`<adf-cloud-app-list (appClick)="onAppClick($event)"></adf-cloud-app-list>`
				`@@ -0,0 +1 @@`
				<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g id="Artboard_1"><g id="Page_1"><rect id="Fill_1" x="0" y="0" width="24" height="24" style="fill:none;"/><path id="Fill_2" d="M20,20l-16,0c-1.097,0 -2,-0.903 -2,-2l0.01,-12c0,-1.093 0.897,-1.995 1.99,-2l6,0l2,2l8,0c1.097,0 2,0.903 2,2l0,10c0,1.097 -0.903,2 -2,2Zm-9,-9l0,4l4,0l0,2l4,-4l-4,-4l0,2l-4,0Z" style="fill-rule:nonzero;"/></g></g></svg>