[ADF-3358] Header - update demo shell component (#3655)

* [ADF-3358] update demo-shell header component

* [ADF-3358] style demo-shell header component

.angular-cli.json

@@ -52,6 +52,11 @@
           "glob": "pdf.worker.js",
           "input": "../../node_modules/pdfjs-dist/build",
           "output": "./"
+        },
+        {
+          "glob": "**/*",
+          "input": "../../node_modules/ngx-monaco-editor/assets/monaco",
+          "output": "./assets/monaco/"
         }
       ],
       "index": "index.html",
@@ -159,6 +164,11 @@
           "glob": "pdf.worker.js",
           "input": "../../node_modules/pdfjs-dist/build",
           "output": "./"
+        },
+        {
+          "glob": "**/*",
+          "input": "../../node_modules/ngx-monaco-editor/assets/monaco",
+          "output": "./assets/monaco/"
         }
       ],
       "index": "index.html",
@@ -192,7 +202,7 @@
   ],
   "e2e": {
     "protractor": {
-      "config": "./demo-shell/protractor.conf.js"
+      "config": "./protractor.conf.js"
     }
   },
   "lint": [

.gitignore

@@ -4,6 +4,8 @@ bundles
 workspace.xml
 .idea/
 dist/
+e2e-output/
+e2e/downloads/
 ng2-components/coverage/
 !systemjs.config.js
 demo-shell-ng2/app/components/router/
@@ -24,3 +26,5 @@ src/environments/
 /lib/config/exportCheck.js
 /lib/config/export-check/export-new.json
 /lib/config/export-check/exportCheck.js
+/docs/sourceinfo
+/docs/docs.json

.travis.yml

@@ -14,6 +14,7 @@ before_install:
     - export CHROME_BIN=chromium-browser
     - export DISPLAY=:99.0
     - sh -e /etc/init.d/xvfb start
+    - sleep 3 # give xvfb some time to start
 
 env:
   matrix:
@@ -70,7 +71,6 @@ jobs:
           script: ./scripts/test-e2e-bc.sh
         - # Test expors
           script: npm run test-export
-        - stage: Update Apps dependencies
         - # Test Update generator-ng2-alfresco-app
           if: tag =~ .*beta.*
           script: ./scripts/update-project.sh -gnu -t $GITHUB_TOKEN -n generator-ng2-alfresco-app
@@ -86,6 +86,14 @@ jobs:
         - # Test Update alfresco-modeler-app
           if: tag =~ .*beta.*
           script: ./scripts/update-project.sh -gnu -t $GITHUB_TOKEN -n alfresco-modeler-app
+        - stage: e2e Test
+          script: ./scripts/test-e2e-lib.sh -host localhost:4200 -proxy $E2E_HOST -u $E2E_USERNAME -p $E2E_PASSWORD -e $E2E_EMAIL -b -save -dev -timeout 40000 --folder core
+        - # Test process-services
+          script: ./scripts/test-e2e-lib.sh -host localhost:4200 -proxy $E2E_HOST -u $E2E_USERNAME -p $E2E_PASSWORD -e $E2E_EMAIL -b -save -dev -timeout 40000 --folder process-services
+        - # Test content-services
+          script: ./scripts/test-e2e-lib.sh -host localhost:4200 -proxy $E2E_HOST -u $E2E_USERNAME -p $E2E_PASSWORD -e $E2E_EMAIL -b -save -dev -timeout 40000 --folder content-services
+        - # Test insights
+          script: ./scripts/test-e2e-lib.sh -host localhost:4200 -proxy $E2E_HOST -u $E2E_USERNAME -p $E2E_PASSWORD -e $E2E_EMAIL -b -save -dev -timeout 40000 --folder insights
         - stage: Deploy PR
           script: node ./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
 

CONTRIBUTING.md

@@ -73,6 +73,6 @@ In ADF we are encouraging the use of behavior-driven development (BDD)
 
 ### Test Name
 
-Any test should follow the naming convetion:
+Any test should follow the naming convention:
 
 [Should] [ ***Expected Behavior** ] [when/after/before] [ ***State Under Test*** ].

demo-shell/package.json

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

demo-shell/protractor.conf.js

@@ -1,30 +0,0 @@
-// Protractor configuration file, see link for more information
-// https://github.com/angular/protractor/blob/master/lib/config.ts
-
-const { SpecReporter } = require('jasmine-spec-reporter');
-
-exports.config = {
-  allScriptsTimeout: 11000,
-  specs: [
-    './e2e/**/*.e2e-spec.ts'
-  ],
-  capabilities: {
-    'browserName': 'chrome'
-  },
-  directConnect: true,
-  baseUrl: 'http://localhost:4200/',
-  framework: 'jasmine',
-  jasmineNodeOpts: {
-    showColors: true,
-    defaultTimeoutInterval: 30000,
-    print: function() {}
-  },
-  beforeLaunch: function() {
-    require('ts-node').register({
-      project: './demo-shell/e2e/tsconfig.e2e.json'
-    });
-  },
-  onPrepare() {
-    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
-  }
-};

demo-shell/resources/i18n/en.json

@@ -20,10 +20,14 @@
       "ALLOW_DELETE": "Allow delete",
       "SHOW_COMMENTS": "Show comments on versions",
       "ALLOW_DOWNLOAD": "Enable version download",
-      "READ_ONLY": "Read-only"
+      "READ_ONLY": "Read-only",
+      "ALLOW_DOWNLOAD": "Allow Download",
+      "COMMENTS": "Show comments"
     },
     "PERSONAL-FILES": "Personal Files",
     "WARN-MULTIPLE-UPLOADS": "Display warning for multiple uploads.",
+    "CUSTOM-PERMISSION-MESSAGE": "Enable custom permission message",
+    "MEDIUM-TIME-FORMAT": "Enable medium time format for document list",
     "SEARCH": {
       "RADIO": {
         "NONE": "None",
@@ -49,11 +53,19 @@
       "TITLE": "Metadata"
     }
   },
+  "COMMENTS": {
+    "ADD_COMMENT": "ADD"
+  },
   "APP_LAYOUT": {
     "APP_NAME": "ADF Demo Application",
     "HOME": "Home",
+    "NODE-SELECTOR": "Node Selector",
     "CONTENT_SERVICES": "Content Services",
     "BREADCRUMB": "Breadcrumb",
+    "NOTIFICATIONS": "Notifications",
+    "TASK_LIST": "Task List",
+    "PROCESS_LIST": "Process List",
+    "CARD_VIEW": "CardView",
     "PROCESS_SERVICES": "Process Services",
     "LOGIN": "Login",
     "CUSTOM_SOURCES": "Custom Sources",
@@ -68,6 +80,7 @@
     "TRASHCAN": "Trashcan",
     "SOCIAL": "Social",
     "SETTINGS": "Settings",
+    "CONFIG-EDITOR": "Config editor",
     "OVERLAY_VIEWER": "Overlay Viewer",
     "ABOUT": "About",
     "SEARCH": "Extended Search",
@@ -75,7 +88,8 @@
     "EXTENDED_SEARCH_QUERY_BODY": "Extended Search with Query Body",
     "WORD_TO_SEARCH": "Search Word",
     "SEARCH_CREATED_BY": "Created By",
-    "SEARCH_SERVICE_APPROACH": "Check this to disable the input property and configure using the service"
+    "SEARCH_SERVICE_APPROACH": "Check this to disable the input property and configure using the service",
+    "HEADER_DATA": "Header data"
   },
   "TRASHCAN": {
     "ACTIONS": {
@@ -90,7 +104,7 @@
   },
   "DOCUMENT_LIST": {
     "MULTISELECT_CHECKBOXES": "Multiselect (with checkboxes)",
-    "THUMBNAILS" :"Enable Thumbnails",
+    "THUMBNAILS": "Enable Thumbnails",
     "MULTIPLE_FILE_UPLOAD": "Multiple File Upload",
     "FOLDER_UPLOAD": "Folder upload",
     "CUSTOM_FILTER": "Custom extensions filter",
@@ -166,7 +180,8 @@
     "START-TASK": "Start task",
     "START-PROCESS": "Start process",
     "PROCESS-AUDIT-LOG": "Process Audit log",
-    "TASK-AUDIT-LOG": "Task Audit log"
+    "TASK-AUDIT-LOG": "Task Audit log",
+    "TASK-SHOW-HEADER": "Show details header"
   },
   "FORM-LIST": {
     "STORE": "Store",
@@ -182,7 +197,10 @@
   "LOGIN": {
     "CONTENT_SERVICES": "Content Services",
     "PROCESS_SERVICES": "Process Services",
-    "LOGIN_FOOTER": "Login footer"
+    "LOGIN_FOOTER": "Login footer",
+    "SHOW_REMEMBERME": "Show Remember me",
+    "SHOW_SUCCESS_ROUTE": "Show success route",
+    "CUSTOM_LOGO": "Custom Logo"
   },
   "SEARCH": {
     "RESULTS": "Search results",
@@ -200,5 +218,21 @@
   "DEMO_PERMISSION": {
     "INHERIT_PERMISSION_BUTTON": "Inherit Permission",
     "INHERITED_PERMISSIONS_BUTTON": "Permission Inherited"
-  }
+  },
+  "TASK_LIST_DEMO": {
+    "ERROR_MESSAGE": {
+      "APP_ID_REQUIRED_ERROR": "Insert App Id",
+      "APP_ID_TYPE_ERROR": "App Id must be a number",
+      "NUMBER_TYPE_ERROR": "Value must be a number"
+    },
+    "TOOLTIP_MESSAGE": {
+      "START_INPUT": "Starting page"
+    }
+  },
+  "PROCESS_LIST_DEMO": {
+    "APP_ID_REQUIRED_ERROR": "Insert App Id",
+    "APP_ID_TYPE_ERROR": "App Id must be a number"
+  },
+  "GROUP-TITLE1-TRANSLATION-KEY": "CUSTOM TITLE TRANSLATION ONE",
+  "GROUP-TITLE2-TRANSLATION-KEY": "CUSTOM TITLE TRANSLATION TWO"
 }

demo-shell/src/app.config.json

@@ -72,7 +72,9 @@
         "options": [
           { "key": "name", "label": "Name", "type": "FIELD", "field": "cm:name", "ascending": true },
           { "key": "content.sizeInBytes", "label": "Size", "type": "FIELD", "field": "content.size", "ascending": true },
-          { "key": "description", "label": "Description", "type": "FIELD", "field": "cm:description", "ascending": true }
+          { "key": "description", "label": "Description", "type": "FIELD", "field": "cm:description", "ascending": true },
+          { "key": "createdByUser", "label": "Author", "type": "FIELD", "field": "cm:creator", "ascending": true },
+          { "key": "createdAt", "label": "Created", "type": "FIELD", "field": "cm:created", "ascending": true }
         ],
         "defaults": [
           { "key": "name", "type": "FIELD", "field": "cm:name", "ascending": true }
@@ -83,24 +85,24 @@
         { "query": "NOT cm:creator:System" }
       ],
       "facetFields": [
-        { "field": "content.mimetype", "mincount": 1, "label": "Type" },
-        { "field": "content.size", "mincount": 1, "label": "Size" },
-        { "field": "creator", "mincount": 1, "label": "Creator" },
-        { "field": "modifier", "mincount": 1, "label": "Modifier" },
-        { "field": "created", "mincount": 1, "label": "Created" }
+        { "field": "content.mimetype", "mincount": 1, "label": "1:Type" },
+        { "field": "content.size", "mincount": 1, "label": "2:Size" },
+        { "field": "creator", "mincount": 1, "label": "3:Creator" },
+        { "field": "modifier", "mincount": 1, "label": "4:Modifier" },
+        { "field": "created", "mincount": 1, "label": "5:Created" }
       ],
       "facetQueries": {
         "label": "My facet queries",
         "pageSize": 5,
         "queries": [
-          { "query": "created:2018", "label": "Created This Year" },
-          { "query": "content.mimetype", "label": "Type" },
-          { "query": "content.size:[0 TO 10240]", "label": "Size: xtra small"},
-          { "query": "content.size:[10240 TO 102400]", "label": "Size: small"},
-          { "query": "content.size:[102400 TO 1048576]", "label": "Size: medium" },
-          { "query": "content.size:[1048576 TO 16777216]", "label": "Size: large" },
-          { "query": "content.size:[16777216 TO 134217728]", "label": "Size: xtra large" },
-          { "query": "content.size:[134217728 TO MAX]", "label": "Size: XX large" }
+          { "query": "created:2018", "label": "1.Created This Year" },
+          { "query": "content.mimetype", "label": "2.Type" },
+          { "query": "content.size:[0 TO 10240]", "label": "3.Size: xtra small"},
+          { "query": "content.size:[10240 TO 102400]", "label": "4.Size: small"},
+          { "query": "content.size:[102400 TO 1048576]", "label": "5.Size: medium" },
+          { "query": "content.size:[1048576 TO 16777216]", "label": "6.Size: large" },
+          { "query": "content.size:[16777216 TO 134217728]", "label": "7.Size: xtra large" },
+          { "query": "content.size:[134217728 TO MAX]", "label": "8.Size: XX large" }
         ]
       },
       "categories": [
@@ -194,11 +196,14 @@
       ]
     },
     "pagination": {
-        "size": 25,
+        "size": 20,
         "supportedPageSizes": [ 5, 10, 15, 20 ]
     },
     "files": {
-        "excluded": [".DS_Store", "desktop.ini", ".git"]
+        "excluded": [".DS_Store", "desktop.ini", ".git"],
+        "match-options": {
+          "nocase": true
+        }
     },
     "logLevel": "trace",
     "activiti": {
@@ -498,10 +503,22 @@
                     "sortable": true
                 },
                 {
-                    "key": "created",
+                    "key": "id",
                     "type": "text",
+                    "title": "ADF_PROCESS_LIST.PROPERTIES.ID",
+                    "sortable": true
+                },
+                {
+                    "key": "processDefinitionId",
+                    "type": "text",
+                    "title": "ADF_PROCESS_LIST.PROPERTIES.PROCESS_DEFINITION_ID",
+                    "sortable": true
+                },
+                {
+                    "key": "started",
+                    "type": "date",
                     "title": "ADF_PROCESS_LIST.PROPERTIES.CREATED",
-                    "cssClass": "hidden",
+                    "format": "timeAgo",
                     "sortable": true
                 }
             ]

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

@@ -43,7 +43,6 @@ export class AppComponent implements OnInit {
                     this.router.navigate(['/login']);
                 }
             }
-
         });
     }
 }

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

@@ -52,7 +52,16 @@ import { SharedLinkViewComponent } from './components/shared-link-view/shared-li
 import { DemoPermissionComponent } from './components/permissions/demo-permissions.component';
 import { PreviewService } from './services/preview.service';
 import { BreadcrumbDemoComponent } from './components/breadcrumb-demo/breadcrumb-demo.component';
+import { TaskListDemoComponent } from './components/task-list-demo/task-list-demo.component';
+import { ProcessListDemoComponent } from './components/process-list-demo/process-list-demo.component';
+import { ContentNodeSelectorComponent } from './components/content-node-selector/content-node-selector.component';
 import { NotificationsComponent } from './components/notifications/notifications.component';
+import { ReportIssueComponent } from './components/report-issue/report-issue.component';
+import { CardViewComponent } from './components/card-view/card-view.component';
+import { HeaderDataComponent } from './components/header-data/header-data.component';
+import { ConfigEditorComponent } from './components/config-editor/config-editor.component';
+import { HeaderDataService } from './components/header-data/header-data.service';
+import { MonacoEditorModule } from 'ngx-monaco-editor';
 
 @NgModule({
     imports: [
@@ -66,7 +75,8 @@ import { NotificationsComponent } from './components/notifications/notifications
         FlexLayoutModule,
         ChartsModule,
         HttpClientModule,
-        AdfModule
+        AdfModule,
+        MonacoEditorModule.forRoot()
     ],
     declarations: [
         AppComponent,
@@ -106,7 +116,14 @@ import { NotificationsComponent } from './components/notifications/notifications
         FormLoadingComponent,
         BlobPreviewComponent,
         BreadcrumbDemoComponent,
-        NotificationsComponent
+        NotificationsComponent,
+        CardViewComponent,
+        ContentNodeSelectorComponent,
+        ReportIssueComponent,
+        TaskListDemoComponent,
+        ProcessListDemoComponent,
+        HeaderDataComponent,
+        ConfigEditorComponent
     ],
     providers: [
         { provide: AppConfigService, useClass: DebugAppConfigService }, // not use this service in production
@@ -126,9 +143,13 @@ import { NotificationsComponent } from './components/notifications/notifications
                 source: 'resources/lazy-loading'
             }
         },
-        PreviewService
+        PreviewService,
+        HeaderDataService
+    ],
+    entryComponents: [
+        VersionManagerDialogAdapterComponent,
+        MetadataDialogAdapterComponent
     ],
-    entryComponents: [VersionManagerDialogAdapterComponent, MetadataDialogAdapterComponent],
     bootstrap: [AppComponent]
 })
 export class AppModule {}

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

@@ -49,7 +49,14 @@ import { FormLoadingComponent } from './components/form/form-loading.component';
 import { DemoPermissionComponent } from './components/permissions/demo-permissions.component';
 import { BlobPreviewComponent } from './components/blob-preview/blob-preview.component';
 import { BreadcrumbDemoComponent } from './components/breadcrumb-demo/breadcrumb-demo.component';
+import { TaskListDemoComponent } from './components/task-list-demo/task-list-demo.component';
+import { ProcessListDemoComponent } from './components/process-list-demo/process-list-demo.component';
 import { NotificationsComponent } from './components/notifications/notifications.component';
+import { CardViewComponent } from './components/card-view/card-view.component';
+import { ContentNodeSelectorComponent } from './components/content-node-selector/content-node-selector.component';
+import { ReportIssueComponent } from './components/report-issue/report-issue.component';
+import { HeaderDataComponent } from './components/header-data/header-data.component';
+import { ConfigEditorComponent } from './components/config-editor/config-editor.component';
 
 export const appRoutes: Routes = [
     { path: 'login', component: LoginComponent },
@@ -73,6 +80,36 @@ export const appRoutes: Routes = [
             }
         ]
     },
+    {
+        path: 'config-editor',
+        component: AppLayoutComponent ,
+        children: [
+            {
+                path: '',
+                component: ConfigEditorComponent
+            }
+        ]
+    },
+    {
+        path: 'card-view',
+        component: AppLayoutComponent ,
+        children: [
+            {
+                path: '',
+                component: CardViewComponent
+            }
+        ]
+    },
+    {
+        path: 'header-data',
+        component: AppLayoutComponent,
+        children: [
+            {
+                path: '',
+                component: HeaderDataComponent
+            }
+        ]
+    },
     {
         path: '',
         component: AppLayoutComponent,
@@ -86,6 +123,10 @@ export const appRoutes: Routes = [
                 path: 'home',
                 component: HomeComponent
             },
+            {
+                path: 'node-selector',
+                component: ContentNodeSelectorComponent
+            },
             {
                 path: 'settings-layout',
                 component: SettingsComponent
@@ -216,10 +257,34 @@ export const appRoutes: Routes = [
                 component: OverlayViewerComponent,
                 canActivate: [AuthGuardEcm]
             },
+            {
+                path: 'report-issue',
+                component: ReportIssueComponent
+            },
             {
                 path: 'datatable-lazy',
                 loadChildren: 'app/components/lazy-loading/lazy-loading.module#LazyLoadingModule'
             },
+            {
+                path: 'task-list',
+                component: TaskListDemoComponent,
+                canActivate: [AuthGuardBpm]
+            },
+            {
+                path: 'task-list/:id',
+                component: TaskListDemoComponent,
+                canActivate: [AuthGuardBpm]
+            },
+            {
+                path: 'process-list',
+                component: ProcessListDemoComponent,
+                canActivate: [AuthGuardBpm]
+            },
+            {
+                path: 'process-list/:id',
+                component: ProcessListDemoComponent,
+                canActivate: [AuthGuardBpm]
+            },
             {
                 path: 'error/:id',
                 component: ErrorContentComponent
@@ -228,7 +293,6 @@ export const appRoutes: Routes = [
                 path: '**',
                 redirectTo: 'error/404'
             }
-
         ]
     }
 ];

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

@@ -1,32 +1,30 @@
-<adf-sidenav-layout [sidenavMin]="70" [sidenavMax]="220" [stepOver]="780" [hideSidenav]="false"[expandedSidenav]= "expandedSidenav" (expanded)="setState($event)">
+<adf-sidenav-layout [sidenavMin]="70" [sidenavMax]="220" [stepOver]="780" [hideSidenav]="hideSidenav" [expandedSidenav]= "expandedSidenav" (expanded)="setState($event)">
 
     <adf-sidenav-layout-header>
         <ng-template let-toggleMenu="toggleMenu">
-            <mat-toolbar color="primary" class="adf-app-layout-toolbar mat-elevation-z6">
-                <button mat-icon-button (click)="toggleMenu()">
-                    <mat-icon>menu</mat-icon>
-                </button>
+            <adf-layout-header  id="adf-header" [title]="title | translate" [redirectUrl]="redirectUrl" [logo]="logo" [tooltip]="tooltip | translate" [showSidenavToggle]="showMenu" [color]="color" (clicked)=toggleMenu($event) >
 
-                <span fxFlex="1 1 auto" fxShow fxHide.lt-sm="true">{{'APP_LAYOUT.APP_NAME' | translate }}</span>
+            <div class="adf-app-layout-menu-spacer"></div>
 
-                <div class="adf-app-layout-menu-spacer"></div>
+            <app-search-bar fxFlex="0 1 auto"></app-search-bar>
 
-                <app-search-bar fxFlex="0 1 auto"></app-search-bar>
+            <div class="adf-header-delimiter"></div>
 
-                <adf-userinfo
-                    class="adf-app-layout-user-profile"
-                    [menuPositionX]="'before'"
-                    [menuPositionY]="'above'">
-                </adf-userinfo>
+            <adf-userinfo
+                class="adf-app-layout-user-profile"
+                [menuPositionX]="'before'"
+                [menuPositionY]="'above'">
+            </adf-userinfo>
 
-                <app-theme-picker></app-theme-picker>
-                <button mat-icon-button [matMenuTriggerFor]="langMenu">
-                    <mat-icon>language</mat-icon>
-                </button>
-                <mat-menu #langMenu="matMenu" class="adf-menu">
-                    <adf-language-menu></adf-language-menu>
-                </mat-menu>
-            </mat-toolbar>
+            <app-theme-picker></app-theme-picker>
+            <button data-automation-id="language-menu-button" mat-icon-button [matMenuTriggerFor]="langMenu">
+                <mat-icon>language</mat-icon>
+            </button>
+            <mat-menu #langMenu="matMenu" class="adf-menu">
+                <adf-language-menu></adf-language-menu>
+            </mat-menu>
+
+            </adf-layout-header>
         </ng-template>
     </adf-sidenav-layout-header>
 
@@ -45,7 +43,7 @@
         </ng-template>
     </adf-sidenav-layout-navigation>
 
-    <adf-sidenav-layout-content>
+    <adf-sidenav-layout-content >
         <ng-template>
             <router-outlet></router-outlet>
         </ng-template>

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

@@ -17,6 +17,8 @@
 
 import { Component, ViewEncapsulation, OnInit } from '@angular/core';
 import { UserPreferencesService, AppConfigService, AlfrescoApiService } from '@alfresco/adf-core';
+import { HeaderDataService } from '../header-data/header-data.service';
+
 
 @Component({
     templateUrl: 'app-layout.component.html',
@@ -34,6 +36,11 @@ export class AppLayoutComponent implements OnInit {
         { href: '/files', icon: 'folder_open', title: 'APP_LAYOUT.CONTENT_SERVICES' },
         { href: '/breadcrumb', icon: 'label', title: 'APP_LAYOUT.BREADCRUMB' },
         { href: '/notifications', icon: 'alarm', title: 'APP_LAYOUT.NOTIFICATIONS'},
+        { href: '/card-view', icon: 'view_headline', title: 'APP_LAYOUT.CARD_VIEW'},
+        { href: '/header-data', icon: 'edit', title: 'APP_LAYOUT.HEADER_DATA'},
+        { href: '/node-selector', icon: 'attachment', title: 'APP_LAYOUT.NODE-SELECTOR' },
+        { href: '/task-list', icon: 'assignment', title: 'APP_LAYOUT.TASK_LIST' },
+        { href: '/process-list', icon: 'assignment', title: 'APP_LAYOUT.PROCESS_LIST' },
         { 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' },
@@ -47,6 +54,7 @@ export class AppLayoutComponent implements OnInit {
         { href: '/tag', icon: 'local_offer', title: 'APP_LAYOUT.TAG' },
         { href: '/social', icon: 'thumb_up', title: 'APP_LAYOUT.SOCIAL' },
         { href: '/settings-layout', icon: 'settings', title: 'APP_LAYOUT.SETTINGS' },
+        { href: '/config-editor', icon: 'code', title: 'APP_LAYOUT.CONFIG-EDITOR' },
         { href: '/extendedSearch', icon: 'search', title: 'APP_LAYOUT.SEARCH' },
         { href: '/overlay-viewer', icon: 'pageview', title: 'APP_LAYOUT.OVERLAY_VIEWER' },
         { href: '/about', icon: 'info_outline', title: 'APP_LAYOUT.ABOUT' }
@@ -54,7 +62,15 @@ export class AppLayoutComponent implements OnInit {
 
     expandedSidenav = false;
 
+    hideSidenav = false;
+    showMenu = true;
+
     enabelRedirect = true;
+    color = 'primary';
+    title = 'APP_LAYOUT.APP_NAME';
+    logo: string;
+    redirectUrl: string | any[] = ['/home'];
+    tooltip = 'APP_LAYOUT.APP_NAME';
 
     ngOnInit() {
         const expand = this.config.get<boolean>('sideNav.expandedSidenav');
@@ -65,9 +81,20 @@ export class AppLayoutComponent implements OnInit {
         } else if (expand) {
             this.expandedSidenav = expand;
         }
+
+        this.headerService.hideMenu.subscribe(show => this.showMenu = show);
+        this.headerService.color.subscribe(color => this.color = color);
+        this.headerService.title.subscribe(title => this.title = title);
+        this.headerService.logo.subscribe(path => this.logo = path);
+        this.headerService.redirectUrl.subscribe(redirectUrl => this.redirectUrl = redirectUrl);
+        this.headerService.tooltip.subscribe(tooltip => this.tooltip = tooltip);
     }
 
-    constructor(private userpreference: UserPreferencesService, private config: AppConfigService, private alfrescoApiService: AlfrescoApiService) {
+    constructor(
+        private userpreference: UserPreferencesService,
+        private config: AppConfigService,
+        private alfrescoApiService: AlfrescoApiService,
+        private headerService: HeaderDataService) {
         if (this.alfrescoApiService.getInstance().isOauthConfiguration()) {
             this.enabelRedirect = false;
         }
@@ -78,4 +105,4 @@ export class AppLayoutComponent implements OnInit {
             this.userpreference.set('expandedSidenav', state);
         }
     }
-}
+ }

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

@@ -19,7 +19,7 @@ import { Component } from '@angular/core';
 
 @Component({
     templateUrl: './breadcrumb-demo.component.html',
-    styleUrls: [`./breadcrumb-demo.component.scss`],
+    styleUrls: [`./breadcrumb-demo.component.scss`]
 })
 export class BreadcrumbDemoComponent {
 

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

@@ -0,0 +1,30 @@
+<div class="main-content">
+    <h1>CardView Component</h1>
+
+    <mat-card class="card-view">
+        <adf-card-view
+            [properties]="properties"
+            [editable]="true">
+        </adf-card-view>
+    </mat-card>
+
+    <div class="console" #console>
+        <h3>Changes log:</h3>
+        <p *ngFor="let log of logs">{{ log }}</p>
+    </div>
+
+</div>
+
+<p class="toggle">
+    <mat-slide-toggle
+        id="adf-toogle-editable"
+        [color]="'primary'"
+        (change)="toggleEditable()"
+        [checked]="isEditable">
+        Editable
+    </mat-slide-toggle>
+</p>
+
+<button mat-button id="adf-reset-card-log" (click)="reset()" color="primary">Reset Log</button>
+
+<br>

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

@@ -0,0 +1,28 @@
+.main-content {
+    padding: 0 15px;
+}
+
+.card-view {
+    width: 30%;
+    display: inline-block;
+}
+
+.console {
+    width: 60%;
+    display: inline-block;
+    vertical-align: top;
+    margin-left: 10px;
+    height: 500px;
+    overflow: scroll;
+    padding-bottom: 30px;
+
+    h3 {
+        margin-top: 0;
+    }
+
+    p {
+        display: block;
+        font-family: monospace, monospace;
+        margin: 0;
+    }
+}

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

@@ -0,0 +1,146 @@
+/*!
+ * @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, ElementRef, ViewChild } from '@angular/core';
+import {
+    CardViewTextItemModel,
+    CardViewDateItemModel,
+    CardViewDatetimeItemModel,
+    CardViewBoolItemModel,
+    CardViewIntItemModel,
+    CardViewFloatItemModel,
+    CardViewKeyValuePairsItemModel,
+    CardViewSelectItemModel,
+    CardViewUpdateService,
+    CardViewMapItemModel,
+    UpdateNotification
+} from '@alfresco/adf-core';
+import { of } from 'rxjs/observable/of';
+
+@Component({
+    templateUrl: './card-view.component.html',
+    styleUrls: ['./card-view.component.scss']
+})
+export class CardViewComponent implements OnInit {
+
+    @ViewChild('console') console: ElementRef;
+
+    isEditable = true;
+    properties: any;
+    logs: string[];
+
+    constructor(private cardViewUpdateService: CardViewUpdateService) {
+        this.logs = [];
+        this.createCard();
+    }
+
+    ngOnInit() {
+        this.cardViewUpdateService.itemUpdated$.subscribe(this.onItemChange.bind(this));
+    }
+
+    createCard() {
+        this.properties = [
+            new CardViewTextItemModel({
+                label: 'CardView Text Item',
+                value: 'Spock',
+                key: 'name',
+                default: 'default bar',
+                multiline: false,
+                icon: 'icon',
+                editable: this.isEditable
+            }),
+            new CardViewDateItemModel({
+                label: 'CardView Date Item',
+                value: new Date(1983, 11, 24, 10, 0, 30),
+                key: 'date',
+                default: new Date(1983, 11, 24, 10, 0, 30),
+                format: 'DD.MM.YYYY',
+                editable: this.isEditable
+            }),
+            new CardViewDatetimeItemModel({
+                label: 'CardView Datetime Item',
+                value: new Date(1983, 11, 24, 10, 0, 0),
+                key: 'datetime',
+                default: new Date(1983, 11, 24, 10, 0, 0),
+                format: 'DD.MM.YYYY',
+                editable: this.isEditable
+            }),
+            new CardViewBoolItemModel({
+                label: 'CardView Boolean Item',
+                value: true,
+                key: 'boolean',
+                default: false,
+                editable: this.isEditable
+            }),
+            new CardViewIntItemModel({
+                label: 'CardView Int Item',
+                value: 213,
+                key: 'int',
+                default: 1,
+                editable: this.isEditable
+            }),
+            new CardViewFloatItemModel({
+                label: 'CardView Float Item',
+                value: 9.9,
+                key: 'float',
+                default: 0.0,
+                editable: this.isEditable
+            }),
+            new CardViewKeyValuePairsItemModel({
+                label: 'CardView Key-Value Pairs Item',
+                value: [],
+                key: 'key-value-pairs',
+                editable: this.isEditable
+            }),
+            new CardViewSelectItemModel({
+                label: 'CardView Select Item',
+                value: 'one',
+                options$: of([{ key: 'one', label: 'One' }, { key: 'two', label: 'Two' }]),
+                key: 'select',
+                editable: this.isEditable
+            }),
+            new CardViewMapItemModel({
+                label: 'My map',
+                value: new Map([['999', 'My Value']]),
+                key: 'map',
+                default: 'default map value'
+            })
+        ];
+    }
+
+    onItemChange(notification: UpdateNotification) {
+        let value = notification.changed[notification.target.key];
+
+        if (notification.target.type === 'keyvaluepairs') {
+            value = JSON.stringify(value);
+        }
+
+        this.logs.push(`[${notification.target.label}] - ${value}`);
+        this.console.nativeElement.scrollTop = this.console.nativeElement.scrollHeight;
+    }
+
+    toggleEditable() {
+        this.isEditable = !this.isEditable;
+        this.createCard();
+    }
+
+    reset() {
+        this.isEditable = true;
+        this.createCard();
+        this.logs = [];
+    }
+}

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

@@ -0,0 +1,20 @@
+
+<h2>Metadata App config editor</h2>
+
+<ngx-monaco-editor id="adf-metadata-editor" class="adf-metadata-editor" [options]="editorOptions" [(ngModel)]="metadataConf" (onInit)="onInitMetadata($event)" ></ngx-monaco-editor>
+
+<button  mat-raised-button id="adf-metadata-save"  (click)="onSaveMetadata()" color="primary">Save metadata configuration</button>
+<button  mat-raised-button id="adf-metadata-clear" (click)="onClearMetadata()" color="primary">Clear metadata configuration</button>
+
+<br>
+<br>
+<br>
+
+<h2>Search App config editor</h2>
+
+<ngx-monaco-editor id="adf-search-editor" class="adf-search-editor" [options]="editorOptions" [(ngModel)]="searchConf" (onInit)="onInitSearch($event)" ></ngx-monaco-editor>
+
+<button  mat-raised-button id="adf-search-save"  (click)="onSaveSearch()" color="primary">Save Search configuration</button>
+<button  mat-raised-button id="adf-search-clear" (click)="onClearSearch()" color="primary">Clear Search configuration</button>
+
+<br>

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

@@ -0,0 +1,3 @@
+.adf-metadata-editor {
+    height: 300px;
+}

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

@@ -0,0 +1,90 @@
+/*!
+ * @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 { AppConfigService, NotificationService } from '@alfresco/adf-core';
+
+@Component({
+    selector: 'app-config-editor',
+    templateUrl: 'config-editor.component.html',
+    styleUrls: ['./config-editor.component.scss']
+})
+export class ConfigEditorComponent {
+
+    editor: any;
+    editorSearch: any;
+
+    editorOptions = {
+        theme: 'vs-dark',
+        language: 'json',
+        autoIndent: true,
+        formatOnPaste: true,
+        formatOnType: true
+    };
+
+    metadataConf: string;
+    searchConf: string;
+
+    onInitMetadata(editor) {
+        this.editor = editor;
+        setTimeout(() => {
+            this.editor.getAction('editor.action.formatDocument').run();
+        }, 1000);
+    }
+
+    onInitSearch(editor) {
+        this.editorSearch = editor;
+        setTimeout(() => {
+            this.editorSearch.getAction('editor.action.formatDocument').run();
+        }, 1000);
+    }
+
+    constructor(private appConfig: AppConfigService, private notificationService: NotificationService) {
+        this.metadataConf = JSON.stringify(appConfig.config['content-metadata']);
+        this.searchConf = JSON.stringify(appConfig.config['search']);
+    }
+
+    onSaveMetadata() {
+        try {
+            this.appConfig.config['content-metadata'] = JSON.parse(this.editor.getValue());
+        } catch (error) {
+            this.notificationService.openSnackMessage(
+                'Wrong metadata configuration',
+                4000
+            );
+        }
+    }
+
+    onSaveSearch() {
+        try {
+            this.appConfig.config['search'] = JSON.parse(this.editor.getValue());
+        } catch (error) {
+            this.notificationService.openSnackMessage(
+                'Wrong sSearch configuration',
+                4000
+            );
+        }
+    }
+
+    onClearMetadata() {
+        this.metadataConf = '';
+    }
+
+    onClearSearch() {
+        this.searchConf = '';
+    }
+}

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

@@ -0,0 +1,198 @@
+<main>
+    <h1>Object picker</h1>
+
+    <mat-accordion>
+        <mat-expansion-panel>
+            <mat-expansion-panel-header>
+                <mat-panel-title>
+                    <h2>Plain picker</h2>
+                </mat-panel-title>
+                <mat-panel-description>
+                    <label class="content-node-selector-demo-basic-label">
+                        dropdownHideMyFiles: {{dropdownHideMyFiles}}
+                    </label>
+                </mat-panel-description>
+            </mat-expansion-panel-header>
+
+            <div class="content-node-selector-demo-basic-table">
+                <adf-content-node-selector-panel
+                    [currentFolderId]="'-root-'">
+                </adf-content-node-selector-panel>
+            </div>
+        </mat-expansion-panel>
+        <mat-expansion-panel>
+            <mat-expansion-panel-header>
+                <mat-panel-title>
+                    <h2>Hide My files</h2>
+                </mat-panel-title>
+                <mat-panel-description>
+                    <label class="content-node-selector-demo-basic-label">
+                        My Files site will be hided from dropdown
+                    </label>
+                </mat-panel-description>
+            </mat-expansion-panel-header>
+
+            <div class="content-node-selector-demo-basic-table">
+                <adf-content-node-selector-panel
+                    [currentFolderId]="'-root-'"
+                    [dropdownHideMyFiles]="true">
+                </adf-content-node-selector-panel>
+            </div>
+        </mat-expansion-panel>
+        <mat-expansion-panel>
+            <mat-expansion-panel-header>
+                <mat-panel-title>
+                    <h2>Custom Site List</h2>
+                </mat-panel-title>
+                <mat-panel-description>
+                    <label class="content-node-selector-demo-basic-label">
+                        Adding a custom site list
+                    </label>
+                </mat-panel-description>
+            </mat-expansion-panel-header>
+
+            <div>
+                <mat-list>
+                    <h3 mat-subheader>Add Site</h3>
+                    <form class="content-node-selector-demo-example-form">
+                        <mat-form-field>
+                            <label>Site Guid</label>
+                            <input matInput [(ngModel)]="customSideGuid" [ngModelOptions]="{standalone: true}">
+                        </mat-form-field>
+
+                        <mat-form-field>
+                            <label>Site Title</label>
+                            <input matInput [(ngModel)]="customSideTitle" [ngModelOptions]="{standalone: true}">
+                        </mat-form-field>
+                    </form>
+                    <button mat-button color="primary" (click)="onClickAddSite()">Add</button>
+                    <button mat-button color="primary" (click)="onClickResetSite()">Reset</button>
+
+                    <mat-divider></mat-divider>
+                    <h3 mat-subheader>Custom Sites Added</h3>
+                    <mat-list-item *ngFor="let customSite of customSites.list.entries">
+                        <mat-icon mat-list-icon>shopping_basket</mat-icon>
+                        <h4 mat-line>{{customSite.entry.title}}</h4>
+                        <p mat-line> {{customSite.entry.guid}} </p>
+                    </mat-list-item>
+                </mat-list>
+            </div>
+
+
+            <div class="content-node-selector-demo-basic-table">
+                <adf-content-node-selector-panel
+                    [currentFolderId]="'-root-'"
+                    [dropdownSiteList]="customSites">
+                </adf-content-node-selector-panel>
+            </div>
+        </mat-expansion-panel>
+        <mat-expansion-panel>
+                <mat-expansion-panel-header>
+                    <mat-panel-title>
+                        <h2>Row Filtering</h2>
+                    </mat-panel-title>
+                    <mat-panel-description>
+                        <label class="content-node-selector-demo-basic-label">
+                            Will automatically filter the row on the list
+                        </label>
+                    </mat-panel-description>
+                </mat-expansion-panel-header>
+
+                <mat-slide-toggle color="primary" [(ngModel)]="showFiles" (click)="recreateRowFilterFunction()">
+                    Show Files
+                </mat-slide-toggle>
+                <mat-slide-toggle color="primary" [(ngModel)]="showFolders" (click)="recreateRowFilterFunction()">
+                    Slide Folders
+                </mat-slide-toggle>
+
+                <div class="content-node-selector-demo-basic-table">
+                    <adf-content-node-selector-panel
+                        [rowFilter]="rowFilterFunction"
+                        [currentFolderId]="'-root-'">
+                    </adf-content-node-selector-panel>
+                </div>
+        </mat-expansion-panel>
+        <mat-expansion-panel>
+                <mat-expansion-panel-header>
+                    <mat-panel-title>
+                        <h2>Custom Image Resolving</h2>
+                    </mat-panel-title>
+                    <mat-panel-description>
+                        <label class="content-node-selector-demo-basic-label">
+                            A function to manage the way folder/file icons and thumbnails are resolved
+                        </label>
+                    </mat-panel-description>
+                </mat-expansion-panel-header>
+
+                <mat-slide-toggle color="primary" (click)="recreateImageResolverFunction()">
+                    Add Custom Images Resolver
+                </mat-slide-toggle>
+
+                <div class="content-node-selector-demo-basic-table">
+                    <adf-content-node-selector-panel
+                        [imageResolver]="customImageResolver"
+                        [currentFolderId]="'-root-'">
+                    </adf-content-node-selector-panel>
+                </div>
+        </mat-expansion-panel>
+        <mat-expansion-panel>
+            <mat-expansion-panel-header>
+                <mat-panel-title>
+                    <h2>Set Page Size</h2>
+                </mat-panel-title>
+                <mat-panel-description>
+                    <label class="content-node-selector-demo-basic-label">
+                        Number of items shown per page in the list. actual page {{actualPageSize}}
+                    </label>
+                </mat-panel-description>
+            </mat-expansion-panel-header>
+            <div class="content-node-selector-demo-basic-table">
+                <adf-content-node-selector-panel
+                    [currentFolderId]="'-root-'"
+                    [pageSize]="actualPageSize"
+                    >
+                </adf-content-node-selector-panel>
+            </div>
+        </mat-expansion-panel>
+        <mat-expansion-panel>
+            <mat-expansion-panel-header>
+                <mat-panel-title>
+                    <h2>Is Valid Selection Function </h2>
+                </mat-panel-title>
+                <mat-panel-description>
+                    <label class="content-node-selector-demo-basic-label">
+                        Function used to decide if the selected node has permission to be selected
+                    </label>
+                </mat-panel-description>
+            </mat-expansion-panel-header>
+            <label>Only folder starting with the letter 'a' or 'A' are valid selections</label>
+            <label>Actual Selection is : {{validSelection}}</label>
+            <div class="content-node-selector-demo-basic-table">
+                <adf-content-node-selector-panel
+                    (select)="onNodeSelect($event)"
+                    [isSelectionValid]="customIsValidFunction"
+                    [currentFolderId]="'-root-'">
+                </adf-content-node-selector-panel>
+            </div>
+        </mat-expansion-panel>
+        <mat-expansion-panel>
+            <mat-expansion-panel-header>
+                <mat-panel-title>
+                    <h2>BreadCrumb Transform Function </h2>
+                </mat-panel-title>
+                <mat-panel-description>
+                    <label class="content-node-selector-demo-basic-label">
+                        Transformation to be performed on the chosen/folder node before building the breadcrumb UI
+                    </label>
+                </mat-panel-description>
+            </mat-expansion-panel-header>
+            <label>Folder starting with letter 'd' or 'D' won't be displayed in the breadcrumb dropdown</label>
+            <div class="content-node-selector-demo-basic-table">
+                <adf-content-node-selector-panel
+                    [breadcrumbTransform]="customBreadcrumbFunction"
+                    [currentFolderId]="'-root-'">
+                </adf-content-node-selector-panel>
+            </div>
+        </mat-expansion-panel>
+    </mat-accordion>
+</main>

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

@@ -0,0 +1,27 @@
+.content-node-selector-demo {
+
+    &-main {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        align-content: center;
+        align-self: center;
+        align-items: center;
+    }
+
+    &-basic-table {
+        height:400px;
+        width:700px
+    }
+
+    &-basic-label {
+        display: flex;
+        align-self: center;
+    }
+
+    &-example-form {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+    }
+}

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

@@ -0,0 +1,115 @@
+/*!
+ * @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 { SitePaging, SiteEntry, MinimalNodeEntryEntity } from 'alfresco-js-api';
+import { ShareDataRow } from '@alfresco/adf-content-services';
+import { DataRow, DataColumn, ThumbnailService } from '@alfresco/adf-core';
+
+@Component({
+    templateUrl: './content-node-selector.component.html',
+    styleUrls: [`./content-node-selector.component.scss`],
+    encapsulation: ViewEncapsulation.None
+})
+export class ContentNodeSelectorComponent {
+
+    constructor(private thumbnailService: ThumbnailService) {
+    }
+
+    dropdownHideMyFiles = false;
+    showFiles = false;
+    showFolders = false;
+    enableImageResolver = false;
+    validSelection = false;
+
+    customSideGuid = '';
+    customSideTitle = '';
+    actualPageSize = 2;
+
+    rowFilterFunction: any = null;
+    customImageResolver: any = null;
+
+    defaultSites: SiteEntry[] = [
+        { entry: { title: 'MINE', guid: '-my-' } },
+        { entry: { title: 'ROOTY', guid: '-root-' } }];
+
+    customSites: 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 } };
+        this.customSites.list.entries.push(newSiteEntry);
+        this.customSideGuid = '';
+        this.customSideTitle = '';
+    }
+
+    onClickResetSite() {
+        this.customSites.list.entries = this.defaultSites;
+        this.customSideGuid = '';
+        this.customSideTitle = '';
+    }
+
+    recreateRowFilterFunction() {
+        this.rowFilterFunction = this.rowFilteringExample.bind(this);
+    }
+
+    recreateImageResolverFunction() {
+        this.enableImageResolver = !this.enableImageResolver;
+        if (this.enableImageResolver) {
+            this.customImageResolver = this.customImageResolverExample.bind(this);
+        } else {
+            this.customImageResolver = null;
+        }
+    }
+
+    rowFilteringExample(row: ShareDataRow) {
+        let showNode = true;
+        const node: MinimalNodeEntryEntity = row.node.entry;
+        if (this.showFiles) {
+            showNode = node.isFile;
+        }
+        if (this.showFolders) {
+            showNode = node.isFolder;
+        }
+        return showNode;
+    }
+
+    customImageResolverExample(row: DataRow, col: DataColumn) {
+        return this.thumbnailService.getMimeTypeIcon('video/quicktime');
+    }
+
+    onNodeSelect(node: MinimalNodeEntryEntity) {
+        this.validSelection = !!node;
+    }
+
+    customIsValidFunction(entry: MinimalNodeEntryEntity): boolean {
+        return entry.name.startsWith('a') || entry.name.startsWith('A');
+    }
+
+    customBreadcrumbFunction(node: MinimalNodeEntryEntity) {
+        if (node && node.path && node.path.elements) {
+            node.path.elements = node.path.elements.filter((element) => !element.name.toLocaleLowerCase().startsWith('d') ? element : null );
+        }
+        return node;
+    }
+}

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

@@ -1,5 +1,5 @@
 <mat-form-field>
-    <input matInput placeholder="Name filter" [(ngModel)]="data.filterValue">
+    <input id="adf-datatable-filter-input" matInput placeholder="Name filter" [(ngModel)]="data.filterValue">
 </mat-form-field>
 
 <adf-datatable

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

@@ -7,7 +7,70 @@
             </adf-info-drawer-tab>
 
             <adf-info-drawer-tab [label]="'APP.INFO_DRAWER.PROPERTIES' | translate">
-                <adf-content-metadata-card [node]="node"></adf-content-metadata-card>
+                <adf-content-metadata-card *ngIf="isPreset" [node]="node"
+                                           [multi]="multi"
+                                           [preset]="customPreset"
+                                           [readOnly]="isReadOnly"
+                                           [displayEmpty]="displayEmptyMetadata"></adf-content-metadata-card>
+
+                <adf-content-metadata-card *ngIf="!isPreset" [node]="node"
+                                           [multi]="multi"
+                                           [readOnly]="isReadOnly"
+                                           [displayEmpty]="displayEmptyMetadata"></adf-content-metadata-card>
+
+                <p class="toggle">
+                    <mat-slide-toggle
+                        id="adf-metadata-empty"
+                        [color]="'primary'"
+                        (change)="toggleEmptyMetadata()"
+                        [checked]="displayEmptyMetadata">
+                        Display Empty Metadata
+                    </mat-slide-toggle>
+                </p>
+
+                <p class="toggle">
+                    <mat-slide-toggle
+                        id="adf-metadata-multi"
+                        [color]="'primary'"
+                        (change)="toggleMulti()"
+                        [checked]="multi">
+                        multi accordion
+                    </mat-slide-toggle>
+                </p>
+
+                <p class="toggle">
+                    <mat-slide-toggle
+                        id="adf-metadata-readonly"
+                        [color]="'primary'"
+                        (change)="toggleReadOnly()"
+                        [checked]="isReadOnly">
+                        Editable
+                    </mat-slide-toggle>
+                </p>
+
+                <p class="toggle">
+                    <mat-slide-toggle
+                        id="adf-toggle-custom-preset"
+                        [color]="'primary'"
+                        (change)="togglePreset()"
+                        [checked]="isPreset">
+                        Custom preset
+                    </mat-slide-toggle>
+                </p>
+                <p class="toggle">
+                    <ng-container *ngIf="isPreset">
+                        <mat-form-field floatPlaceholder="float">
+                            <input matInput
+                                   placeholder="Custom Preset"
+                                   [(ngModel)]="customPreset"
+                                   data-automation-id="adf-text-custom-preset">
+                        </mat-form-field>
+
+                        <button  mat-raised-button  id="adf-metadata-aplly" (click)="applyCustomPreset()" color="primary">Apply</button>
+
+                    </ng-container>
+                </p>
+
             </adf-info-drawer-tab>
 
             <adf-info-drawer-tab [label]="'APP.INFO_DRAWER.VERSIONS' | translate">

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

@@ -29,6 +29,11 @@ import { MatSnackBar } from '@angular/material';
 export class FileViewComponent implements OnInit {
 
     nodeId: string = null;
+    displayEmptyMetadata = false;
+    multi = false;
+    isReadOnly = false;
+    isPreset = false;
+    customPreset: string = null;
 
     constructor(private router: Router,
                 private route: ActivatedRoute,
@@ -58,4 +63,30 @@ export class FileViewComponent implements OnInit {
     onUploadError(errorMessage: string) {
         this.snackBar.open(errorMessage, '', { duration: 4000 });
     }
+
+    toggleEmptyMetadata() {
+        this.displayEmptyMetadata = !this.displayEmptyMetadata;
+    }
+
+    toggleMulti() {
+        this.multi = !this.multi;
+    }
+
+    toggleReadOnly() {
+        this.isReadOnly = !this.isReadOnly;
+    }
+
+    togglePreset() {
+        this.isPreset = !this.isPreset;
+        if (!this.isPreset) {
+            this.customPreset = null;
+        }
+    }
+
+    applyCustomPreset() {
+        this.isPreset = false;
+        setTimeout(() => {
+            this.isPreset = true;
+        }, 100);
+    }
 }

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

@@ -33,7 +33,7 @@
         </adf-sites-dropdown>
     </div>
 
-    <div class="document-list-container" fxLayout="row" fxLayoutAlign="start stretch" fxLayoutGap="16px">
+    <div id="document-list-container" class="document-list-container" fxLayout="row" fxLayoutAlign="start stretch" fxLayoutGap="16px">
         <adf-upload-drag-area fxFlex="1 1 auto"
                               [disabled]="disableDragArea"
                               [acceptedFilesType]="getFileFiltering()"
@@ -68,6 +68,7 @@
                 <div fxFlex="0 0 auto" class="adf-document-action-buttons" fxShow fxHide.lt-sm="true">
                     <button
                         mat-icon-button
+                        data-automation-id="document-list-grid-view"
                         title="{{ 'DOCUMENT_LIST.TOOLBAR.CARDVIEW' | translate }}"
                         (click)="toogleGalleryView()">
                         <mat-icon *ngIf="displayMode === 'list'" matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.CARDVIEW' | translate }}">view_comfy</mat-icon>
@@ -78,6 +79,7 @@
                         [disabled]="!canCreateContent(documentList.folderNode)"
                         title="{{ 'DOCUMENT_LIST.TOOLBAR.NEW_FOLDER' | translate }}"
                         (error)="openSnackMessage($event)"
+                        (success)="documentList.reload()"
                         [adf-create-folder]="getDocumentListCurrentFolderId()"
                         matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.NEW_FOLDER' | translate }}">
                         <mat-icon>create_new_folder</mat-icon>
@@ -116,7 +118,7 @@
                         </mat-icon>
                     </button>
                     <button mat-icon-button
-                            [disabled]="!documentList.selection.length"
+                            disabled
                             [baseShareUrl]="baseShareUrl"
                             [adf-share]="documentList.selection[0]"
                             matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.SHARE' | translate }}">
@@ -207,6 +209,11 @@
                 (preview)="showFile($event)"
                 (folderChange)="onFolderChange($event)"
                 (permissionError)="handlePermissionError($event)">
+                <no-permission-content *ngIf="enableCustomPermissionMessage">
+                    <ng-template>
+                    <h1>Cris you don't have permissions</h1>
+                    </ng-template>
+                </no-permission-content>
                 <empty-folder-content *ngIf="disableDragArea">
                     <ng-template>
                         <div class="adf-empty_template">
@@ -273,7 +280,7 @@
                         title="{{'DOCUMENT_LIST.COLUMNS.CREATED' | translate}}"
                         key="createdAt"
                         type="date"
-                        format="timeAgo"
+                        [format]="enableMediumTimeFormat ? 'medium' : 'timeAgo'"
                         class="desktop-only">
                     </data-column>
 
@@ -337,6 +344,13 @@
                         title="DOCUMENT_LIST.ACTIONS.METADATA"
                         (execute)="onManageMetadata($event)">
                     </content-action>
+                    <content-action
+                        icon="settings_input_component"
+                        title="DOCUMENT_LIST.ACTIONS.PERMISSION"
+                        permission="copy"
+                        (error)="onContentActionError($event)"
+                        (execute)="onPermissionRequested($event)">
+                    </content-action>
                     <!-- document actions -->
                     <content-action
                         icon="storage"
@@ -345,6 +359,7 @@
                         (execute)="onManageVersions($event)">
                     </content-action>
                     <content-action
+                        target="document" 
                         *ngIf="authenticationService.isBpmLoggedIn()"
                         icon="play_arrow"
                         target="document" 
@@ -352,13 +367,7 @@
                         (execute)="startProcesAction($event)">
                     </content-action>
                     <content-action
-                        icon="settings_input_component"
-                        title="DOCUMENT_LIST.ACTIONS.PERMISSION"
-                        permission="copy"
-                        (error)="onContentActionError($event)"
-                        (execute)="onPermissionRequested($event)">
-                    </content-action>
-                    <content-action
+                        target="document" 
                         icon="lock"
                         permission="lock"
                         handler="lock"
@@ -371,7 +380,6 @@
                 *ngIf="!infiniteScrolling"
                 class="adf-documentlist-pagination"
                 [target]="documentList"
-                [supportedPageSizes]="supportedPages"
                 (changePageSize)="onChangePageSize($event)"
                 (changePageNumber)="onChangePageNumber($event)"
                 (nextPage)="onNextPage($event)"
@@ -388,7 +396,7 @@
         <adf-info-drawer-layout *ngIf="showVersions" class="adf-manage-versions-sidebar" fxFlex="0 0 auto">
             <div info-drawer-content>
 
-                <adf-info-drawer [title]="'Details'">
+                <adf-info-drawer [title]="'Details'"  *ngIf="documentList.selection[0]" >
                     <adf-info-drawer-tab [label]="'Properties'">
                         <adf-content-metadata-card
                             [node]="documentList.selection[0].entry">
@@ -428,7 +436,9 @@
 <div *ngIf="processId">
     <adf-start-process
         [values]="formValues"
-        [appId]="processId">
+        [appId]="processId"
+        (start)="closeStartProcess()"
+        (cancel)="closeStartProcess()">
     </adf-start-process>
 </div>
 
@@ -483,7 +493,7 @@
         </section>
 
         <section>
-            <mat-slide-toggle [color]="'primary'" (click)="toggleThumbnails()" >{{'DOCUMENT_LIST.THUMBNAILS' |
+            <mat-slide-toggle [color]="'primary'" (click)="toggleThumbnails()" id="enableThumbnails">{{'DOCUMENT_LIST.THUMBNAILS' |
                 translate}}
             </mat-slide-toggle>
         </section>
@@ -518,6 +528,18 @@
             </mat-slide-toggle>
         </section>
 
+        <section>
+            <mat-slide-toggle color="primary" [(ngModel)]="enableCustomPermissionMessage">
+                {{'APP.CUSTOM-PERMISSION-MESSAGE' | translate}}
+            </mat-slide-toggle>
+        </section>
+
+        <section>
+            <mat-slide-toggle color="primary" [(ngModel)]="enableMediumTimeFormat" id="enableMediumTimeFormat">
+                {{'APP.MEDIUM-TIME-FORMAT' | translate}}
+            </mat-slide-toggle>
+        </section>
+
         <h5>Upload</h5>
         <section *ngIf="acceptedFilesTypeShow">
             <mat-form-field floatPlaceholder="float">
@@ -569,7 +591,7 @@
             </adf-upload-button>
         </div>
         <section>
-            <mat-checkbox [(ngModel)]="enableUpload">
+            <mat-checkbox id="adf-disable-upload" [(ngModel)]="enableUpload">
                 {{'DOCUMENT_LIST.DESCRIPTION_UPLOAD' | translate}}
             </mat-checkbox>
         </section>

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

@@ -25,13 +25,18 @@ import { MatDialog } from '@angular/material';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { MinimalNodeEntity, NodePaging, Pagination, MinimalNodeEntryEntity, SiteEntry } from 'alfresco-js-api';
 import {
-    AuthenticationService, AppConfigService, AppConfigValues, ContentService, TranslationService,
+    AlfrescoApiService, AuthenticationService, AppConfigService, AppConfigValues, ContentService, TranslationService,
     FileUploadEvent, FolderCreatedEvent, LogService, NotificationService,
     UploadService, DataColumn, DataRow, UserPreferencesService,
-    PaginationComponent, FormValues, DisplayMode, UserPreferenceValues, InfinitePaginationComponent
+    PaginationComponent, FormValues, DisplayMode, InfinitePaginationComponent
 } from '@alfresco/adf-core';
 
-import { DocumentListComponent, PermissionStyleModel, UploadFilesEvent, ConfirmDialogComponent } from '@alfresco/adf-content-services';
+import {
+    DocumentListComponent,
+    PermissionStyleModel,
+    UploadFilesEvent,
+    ConfirmDialogComponent
+} from '@alfresco/adf-content-services';
 
 import { SelectAppsDialogComponent } from '@alfresco/adf-process-services';
 
@@ -172,10 +177,11 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
 
     permissionsStyle: PermissionStyleModel[] = [];
     infiniteScrolling: boolean;
-    supportedPages: number[];
     currentSiteid = '';
     warnOnMultipleUploads = false;
     thumbnails = false;
+    enableCustomPermissionMessage = false;
+    enableMediumTimeFormat = false;
 
     private onCreateFolder: Subscription;
     private onEditFolder: Subscription;
@@ -192,11 +198,12 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
                 private preference: UserPreferencesService,
                 private preview: PreviewService,
                 @Optional() private route: ActivatedRoute,
-                public authenticationService: AuthenticationService) {
-        this.preference.select(UserPreferenceValues.SupportedPageSizes)
-            .subscribe((pages) => {
-                this.supportedPages = pages;
-            });
+                public authenticationService: AuthenticationService,
+                public alfrescoApiService: AlfrescoApiService) {
+
+        this.alfrescoApiService.nodeUpdated.subscribe(() => {
+            this.documentList.reload();
+        });
     }
 
     showFile(event) {
@@ -243,7 +250,6 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
         this.contentService.folderCreated.subscribe(value => this.onFolderCreated(value));
         this.onCreateFolder = this.contentService.folderCreate.subscribe(value => this.onFolderAction(value));
         this.onEditFolder = this.contentService.folderEdit.subscribe(value => this.onFolderAction(value));
-        this.supportedPages = this.supportedPages ? this.supportedPages : this.preference.getDefaultPageSizes();
 
         // this.permissionsStyle.push(new PermissionStyleModel('document-list__create', PermissionsEnum.CREATE));
         // this.permissionsStyle.push(new PermissionStyleModel('document-list__disable', PermissionsEnum.NOT_CREATE, false, true));
@@ -474,6 +480,10 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
 
     }
 
+    closeStartProcess() {
+        this.processId = null;
+    }
+
     onChangePageSize(event: Pagination): void {
         this.preference.paginationSize = event.maxItems;
         this.changedPageSize.emit(event);

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

@@ -1,11 +1,23 @@
 <header mat-dialog-title>{{'VERSION.DIALOG.TITLE' | translate}}</header>
 
 <section>
-    <mat-slide-toggle color="primary" [(ngModel)]="readOnly">
+    <mat-slide-toggle id="adf-version-manager-switch-readonly" color="primary" [(ngModel)]="readOnly">
         {{'APP.ADF_VERSION_MANAGER.READ_ONLY' | translate}}
     </mat-slide-toggle>
 </section>
 
+<section>
+    <mat-slide-toggle id="adf-version-manager-switch-download"color="primary" [(ngModel)]="allowDownload">
+        {{'APP.ADF_VERSION_MANAGER.ALLOW_DOWNLOAD' | translate}}
+    </mat-slide-toggle>
+</section>
+
+<section>
+    <mat-slide-toggle id="adf-version-manager-switch-comments" color="primary" [(ngModel)]="showComments">
+        {{'APP.ADF_VERSION_MANAGER.COMMENTS' | translate}}
+    </mat-slide-toggle>
+</section>
+
 <section mat-dialog-content *ngIf="!readOnly">
     <adf-version-manager [node]="contentEntry" [allowDownload]="allowDownload" [showComments]="showComments" (uploadError)="uploadError($event)"></adf-version-manager>
 </section>

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

@@ -1214,7 +1214,7 @@ export class DemoForm {
                                 'readOnly': false,
                                 'overrideId': false,
                                 'colspan': 1,
-                                'placeholder': null,
+                                'placeholder': '10',
                                 'minLength': 0,
                                 'maxLength': 0,
                                 'minValue': null,

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

@@ -0,0 +1,46 @@
+<div class="content header-data">
+    <h1>Header data</h1>
+    <mat-card>
+        <div>
+            <mat-checkbox [(ngModel)]="checkbox" (change)="hideButton()">Show menu button</mat-checkbox>
+        </div>
+
+        <div>
+            <label>Choose header color</label>
+            <select (change)="changeColor($event.target.value)">
+                <option value="primary">Primary</option>
+                <option value="accent">Accent</option>
+                <option value="warn">Warn</option>
+            </select>
+            OR
+            <input type="text" name="color" (keyup.enter)="changeColor($event.target.value)" placeholder="hex color code">
+            <p>*Choose only one value at a time: either hex code or theme color.</p>
+            <p>*press enter for submitting new hex color</p>
+        </div>
+
+        <div>
+            <label>Change title</label>
+            <input type="text" name="title" (keyup.enter)="submitTitle($event.target.value)" placeholder ="{{ 'APP_LAYOUT.APP_NAME' | translate}}">
+            <p>*press enter for submitting new title</p>
+        </div>
+
+        <div>
+            <label>Change logo</label>
+            <input type="text" placeholder="URL path" (keyup.enter)="submitLogo($event.target.value)" >
+            <p>*press enter for submitting new logo</p>
+        </div>
+
+        <div>
+            <label>Change logo link</label>
+            <input type="url" placeholder="Redirect URL" (keyup.enter)="submitRedirectUrl($event.target.value)" >
+            <p>*Input JSON friendly array or explicit string. E.g. ["/test", 33, "user", 11] or "/test"</p>
+            <p>*press enter for submitting new link on logo</p>
+        </div>
+
+        <div>
+            <label>Change logo tooltip</label>
+            <input type="text" placeholder="Tooltip text" (keyup.enter)="submitTooltip($event.target.value)" >
+            <p>*press enter for submitting new tooltip</p>
+        </div>
+    </mat-card>
+</div>

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

@@ -0,0 +1,28 @@
+.content {
+    padding: 10px;
+    .mat-card {
+        padding: 16px 24px;
+        max-width: 100% !important;
+        max-height: 100% !important;
+
+        div {
+            padding: 0;
+            margin-bottom: 30px;
+
+            label {
+                font-weight: bold;
+            }
+
+            .mat-form-field, input, select {
+                display: block;
+                width: 100%;
+                height: 30px;
+                margin-bottom: 5px;
+            }
+
+            p {
+                margin: 0 0 5px 0;
+            }
+        }
+    }
+}

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

@@ -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 } from '@angular/core';
+import { HeaderDataService } from './header-data.service';
+
+@Component({
+    templateUrl: './header-data.component.html',
+    styleUrls: ['./header-data.component.scss']
+})
+export class HeaderDataComponent {
+    checkbox = true;
+
+    constructor(private headerService: HeaderDataService) {}
+
+    hideButton() {
+        this.headerService.hideMenuButton();
+    }
+
+    changeColor(color: string) {
+        this.headerService.changeColor(color);
+    }
+
+    submitTitle(title: string) {
+        if (title) {
+            this.headerService.changeTitle(title);
+        }
+    }
+
+    submitLogo(logoPath: string) {
+        if (logoPath) {
+            this.headerService.changeLogo(logoPath);
+        }
+    }
+
+    submitRedirectUrl(value: string) {
+        const redirectUrl = JSON.parse(value);
+        if (redirectUrl) {
+            this.headerService.changeRedirectUrl(redirectUrl);
+        }
+    }
+
+    submitTooltip(tooltip: string) {
+        if (tooltip) {
+            this.headerService.changeTooltip(tooltip);
+        }
+    }
+}

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

@@ -0,0 +1,41 @@
+import { Injectable, Output, EventEmitter } from '@angular/core';
+
+
+@Injectable()
+export class HeaderDataService {
+
+  show = true;
+
+  @Output() hideMenu: EventEmitter<boolean> = new EventEmitter();
+  @Output() color: EventEmitter<string> = new EventEmitter();
+  @Output() title: EventEmitter<string> = new EventEmitter();
+  @Output() logo: EventEmitter<string> = new EventEmitter();
+  @Output() redirectUrl: EventEmitter<string|any[]> = new EventEmitter();
+  @Output() tooltip: EventEmitter<string> = new EventEmitter();
+
+  hideMenuButton() {
+    this.show = !this.show;
+    this.hideMenu.emit(this.show);
+  }
+
+  changeColor(color: string) {
+    this.color.emit(color);
+  }
+
+  changeTitle(title: string) {
+    this.title.emit(title);
+
+  }
+
+  changeLogo(logoPath: string) {
+    this.logo.emit(logoPath);
+  }
+
+  changeRedirectUrl(redirectUrl: string | any[]) {
+    this.redirectUrl.emit(redirectUrl);
+  }
+
+  changeTooltip(tooltip: string) {
+    this.tooltip.emit(tooltip);
+  }
+}

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

@@ -19,6 +19,55 @@
             {{ 'LOGIN.LOGIN_FOOTER'| translate }}
         </mat-slide-toggle>
     </p>
+    <p class="toggle">
+        <mat-slide-toggle
+            id="adf-toogle-show-rememberme"
+            [color]="'primary'"
+            (change)="toggleRemamberme()"
+            [checked]="showRememberMe">
+            {{ 'LOGIN.SHOW_REMEMBERME'| translate }}
+        </mat-slide-toggle>
+    </p>
+    <p class="toggle">
+        <mat-slide-toggle
+            id="adf-toogle-show-successRoute"
+            [color]="'primary'"
+            (change)="toggleSuccessRoute()"
+            [checked]="customSuccessRoute">
+            {{ 'LOGIN.SHOW_SUCCESS_ROUTE'| translate }}
+        </mat-slide-toggle>
+    </p>
+    <p class="toggle">
+        <ng-container *ngIf="customSuccessRoute">
+            <mat-form-field floatPlaceholder="float">
+                <input matInput
+                       placeholder="Custom success route"
+                       [(ngModel)]="customSuccessRouteURI"
+                       data-automation-id="adf-success-route">
+            </mat-form-field>
+        </ng-container>
+    </p>
+
+    <p class="toggle">
+        <mat-slide-toggle
+            id="adf-toogle-logo"
+            [color]="'primary'"
+            (change)="toggleLogo()"
+            [checked]="customLogoImage">
+            {{ 'LOGIN.CUSTOM_LOGO'| translate }}
+        </mat-slide-toggle>
+    </p>
+    <p class="toggle">
+        <ng-container *ngIf="customLogoImage">
+            <mat-form-field floatPlaceholder="float">
+                <input matInput
+                       placeholder="Custom success Logo URL"
+                       [(ngModel)]="customLogoImageURL"
+                       data-automation-id="adf-url-logo">
+            </mat-form-field>
+        </ng-container>
+    </p>
+
 </div>
 
 <!--SETTING BUTTON-->
@@ -29,10 +78,12 @@
 
 <adf-login
     #alfrescologin
+    [successRoute]="customSuccessRouteURI"
+    [logoImageUrl]="customLogoImageURL"
     [fieldsValidation]="customValidation"
     [disableCsrf]="disableCsrf"
     [showLoginActions]="showFooter"
-    [showRememberMe]="showFooter"
+    [showRememberMe]="showFooter && showRememberMe"
     (executeSubmit)="checkForm($event)"
     copyrightText="{{ 'application.copyright' | adfAppConfig }}"
     (success)="onLogin($event)"
@@ -56,7 +107,9 @@
                 {{ 'LOGIN.LOGIN_FOOTER'| translate }}
             </mat-slide-toggle>
         </p>
-        <button type="button" mat-raised-button color="accent" class="mobile-setting-button" routerLink="/settings" data-automation-id="settings">{{ 'APP_LAYOUT.SETTINGS'| translate }}</button>
+        <button type="button" mat-raised-button color="accent" class="mobile-setting-button" routerLink="/settings"
+                data-automation-id="settings">{{ 'APP_LAYOUT.SETTINGS'| translate }}
+        </button>
 
     </div>
 </adf-login>

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

@@ -31,9 +31,14 @@ export class LoginComponent implements OnInit {
     alfrescologin: any;
 
     customValidation: any;
+    customSuccessRouteURI = '';
+    customLogoImageURL = './assets/images/alfresco-logo.svg';
 
     disableCsrf = false;
     showFooter = true;
+    showRememberMe = true;
+    customSuccessRoute = false;
+    customLogoImage = false;
     customMinLength = 2;
 
     constructor(private router: Router,
@@ -46,7 +51,7 @@ export class LoginComponent implements OnInit {
 
     ngOnInit() {
         this.alfrescologin.addCustomValidationError('username', 'required', 'LOGIN.MESSAGES.USERNAME-REQUIRED');
-        this.alfrescologin.addCustomValidationError('username', 'minlength', 'LOGIN.MESSAGES.USERNAME-MIN', {minLength: this.customMinLength});
+        this.alfrescologin.addCustomValidationError('username', 'minlength', 'LOGIN.MESSAGES.USERNAME-MIN', { minLength: this.customMinLength });
         this.alfrescologin.addCustomValidationError('password', 'required', 'LOGIN.MESSAGES.PASSWORD-REQUIRED');
     }
 
@@ -66,6 +71,24 @@ export class LoginComponent implements OnInit {
         this.showFooter = !this.showFooter;
     }
 
+    toggleRemamberme() {
+        this.showRememberMe = !this.showRememberMe;
+    }
+
+    toggleSuccessRoute() {
+        this.customSuccessRoute = !this.customSuccessRoute;
+        if (!this.customSuccessRoute) {
+            this.customSuccessRouteURI = null;
+        }
+    }
+
+    toggleLogo() {
+        this.customLogoImage = !this.customLogoImage;
+        if (!this.customLogoImage) {
+            this.customLogoImageURL = null;
+        }
+    }
+
     checkForm(event: any) {
         const values = event.values;
         this.logService.log(values);

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

@@ -16,7 +16,7 @@
             data-automation-id="notification-message">
     </mat-form-field>
 
-    <button mat-icon-button (click)="send()">
+    <button mat-icon-button (click)="send()" data-automation-id="notification-default-button">
         <mat-icon>send</mat-icon>
     </button>
 
@@ -28,8 +28,43 @@
         </mat-slide-toggle>
     </div>
 
-    <div data-automation-id="notification-action-output">
+    <div data-automation-id="notification-action-output" *ngIf="actionOutput">
         {{ actionOutput }}
     </div>
-
+    
+    <h2>Custom Configuration</h2>
+    
+    <form [formGroup]="configForm">
+        <mat-form-field>
+            <mat-select class="form-control" formControlName="direction" placeholder="Direction" data-automation-id="notification-direction">
+                    <mat-option *ngFor="let direction of directions" [value]="direction.value">
+                        {{ direction.title }}
+                    </mat-option>
+            </mat-select>
+        </mat-form-field>
+        <mat-form-field>
+            <input matInput type="number" class="form-control" formControlName="duration" placeholder="Duration" data-automation-id="notification-duration">
+        </mat-form-field>
+        <mat-form-field>
+            <mat-select class="form-control" formControlName="horizontalPosition" placeholder="Horizontal Position" data-automation-id="notification-horizontal-position">
+                <mat-option *ngFor="let horizontalPosition of horizontalPositions" [value]="horizontalPosition.value">
+                    {{ horizontalPosition.title }}
+                </mat-option>
+            </mat-select>
+        </mat-form-field>
+        <mat-form-field>
+            <mat-select class="form-control" formControlName="verticalPosition" placeholder="Vertical Position" data-automation-id="notification-vertical-position">
+                <mat-option *ngFor="let verticalPosition of verticalPositions" [value]="verticalPosition.value">{{ verticalPosition.title }}</mat-option>
+            </mat-select>
+        </mat-form-field>
+        <button mat-icon-button (click)="sendCustomConfig()" data-automation-id="notification-custom-config-button">
+            <mat-icon>send</mat-icon>
+        </button>
+    </form>
+    <div>
+        <h3>SnackBar Config</h3>
+        <p *ngIf="snackBarConfigObject" data-automation-id="notification-custom-object">
+            {{snackBarConfigObject}}
+        </p>
+    </div>
 </div>

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

@@ -15,20 +15,82 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { NotificationService } from '@alfresco/adf-core';
+import { MatSnackBarConfig } from '@angular/material';
+import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
 
 @Component({
     templateUrl: './notifications.component.html',
     styleUrls: ['./notifications.component.scss']
 })
-export class NotificationsComponent {
+export class NotificationsComponent implements OnInit {
 
     message = 'I ♥️ ADF';
     withAction = false;
     actionOutput = '';
+    snackBarConfigObject = '';
 
-    constructor(private notificationService: NotificationService) {}
+    configForm: FormGroup;
+
+    snackBarConfig: MatSnackBarConfig = new MatSnackBarConfig();
+
+    directions = [
+        {value: 'ltr', title: 'Left to right'},
+        {value: 'rtl', title: 'Right to left'}
+    ];
+
+    horizontalPositions = [
+        {value: 'start', title: 'Start'},
+        {value: 'center', title: 'Center'},
+        {value: 'end', title: 'End'},
+        {value: 'left', title: 'Left'},
+        {value: 'right', title: 'Right'}
+    ];
+
+    verticalPositions = [
+        {value: 'top', title: 'Top'},
+        {value: 'bottom', title: 'Bottom'}
+    ];
+
+    constructor(private notificationService: NotificationService,
+                private formBuilder: FormBuilder) { }
+
+    ngOnInit() {
+        this.configForm = this.formBuilder.group({
+            direction: new FormControl(''),
+            horizontalPosition: new FormControl(''),
+            verticalPosition: new FormControl(''),
+            duration: new FormControl('')
+        });
+
+        this.configForm.valueChanges
+        .subscribe(configFormValues =>
+            this.setSnackBarConfig(configFormValues)
+        );
+
+    }
+
+    setSnackBarConfig(configFormValues: any) {
+
+        if (configFormValues.announcementMessage) {
+            this.snackBarConfig.announcementMessage = configFormValues.announcementMessage;
+        }
+        if (configFormValues.direction) {
+            this.snackBarConfig.direction = configFormValues.direction;
+
+        }
+        if (configFormValues.duration) {
+            this.snackBarConfig.duration = configFormValues.duration;
+
+        }
+        if (configFormValues.horizontalPosition) {
+            this.snackBarConfig.horizontalPosition = configFormValues.horizontalPosition;
+        }
+        if (configFormValues.verticalPosition) {
+            this.snackBarConfig.verticalPosition = configFormValues.verticalPosition;
+        }
+    }
 
     send() {
         this.actionOutput = '';
@@ -44,4 +106,22 @@ export class NotificationsComponent {
             }
         }
     }
+
+    sendCustomConfig() {
+        this.actionOutput = '';
+        this.snackBarConfigObject = `{"direction": "${this.snackBarConfig.direction}",
+                                    "duration": "${this.snackBarConfig.duration}",
+                                    "horizontalPosition": "${ this.snackBarConfig.horizontalPosition}",
+                                    "verticalPosition": "${ this.snackBarConfig.verticalPosition}"}`;
+        if (this.message) {
+            if (this.withAction) {
+                this.notificationService
+                    .openSnackMessageAction(this.message, 'Some action', this.snackBarConfig )
+                    .onAction()
+                    .subscribe(() => this.actionOutput = 'Action clicked');
+            } else {
+                this.notificationService.openSnackMessage(this.message, this.snackBarConfig);
+            }
+        }
+    }
 }

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

@@ -67,7 +67,7 @@ export class DemoPermissionComponent implements OnInit {
             this.displayPermissionComponent.reload();
         },
             (error) => {
-                this.showErrorMessage(error);
+                this.showErrorMessage(error.message);
             });
     }
 

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

@@ -0,0 +1,81 @@
+<div class="process-list-inputs">
+
+    <form [formGroup]="processListForm">
+        <mat-form-field>
+            <mat-label>App Id</mat-label>
+            <input
+                matInput
+                class="form-control"
+                [formControl]="processAppId">
+            <mat-error *ngIf="processAppId.hasError('required')">
+                {{ 'PROCESS_LIST_DEMO.APP_ID_REQUIRED_ERROR' | translate }}
+            </mat-error>
+            <mat-error *ngIf="processAppId.hasError('pattern')">
+                {{ 'PROCESS_LIST_DEMO.APP_ID_TYPE_ERROR' | translate }}
+            </mat-error>
+        </mat-form-field>
+
+        <mat-form-field>
+            <mat-label>ProcessDefinitionId</mat-label>
+            <input
+                matInput
+                class="form-control"
+                [formControl]="processDefinitionId">
+            <mat-hint>SimpleProcess:1:2</mat-hint>
+        </mat-form-field>
+
+        <mat-form-field>
+            <mat-label>ProcessInstanceId</mat-label>
+            <input
+                matInput
+                class="form-control"
+                [formControl]="processInstanceId">
+        </mat-form-field>
+
+        <mat-form-field>
+            <mat-label>Status</mat-label>
+            <mat-select
+                class="form-control"
+                [formControl]="processState">
+                <mat-option *ngFor="let stateOption of stateOptions" [value]="stateOption.value">{{ stateOption.title }}</mat-option>
+            </mat-select>
+        </mat-form-field>
+
+        <mat-form-field>
+            <mat-label>Sort</mat-label>
+            <mat-select
+                class="form-control"
+                [formControl]="processSort">
+                <mat-option *ngFor="let sortOption of sortOptions" [value]="sortOption.value">{{ sortOption.title }}</mat-option>
+            </mat-select>
+        </mat-form-field>
+
+        <div class="adf-reset-button">
+            <button mat-raised-button (click)="resetProcessForm()">Reset</button>
+        </div>
+    </form>
+</div>
+
+<div>
+    <adf-process-instance-list
+        #processList
+        [appId]="appId"
+        [processDefinitionId]="processDefId"
+        [processInstanceId]="instanceId"
+        [state]="state"
+        [sort]="sort"
+        [presetColumn]="presetColumn">
+        <data-columns>
+            <data-column key="ended" title="ADF_PROCESS_LIST.PROPERTIES.STATUS">
+                <ng-template let-entry="$implicit">
+                    <div title="{{getStatus(entry.row.obj.ended)}}">{{getStatus(entry.row.obj.ended)}}</div>
+                </ng-template>
+            </data-column>
+        </data-columns>
+    </adf-process-instance-list>
+
+    <adf-pagination
+        [target]="processList">
+    </adf-pagination>
+</div>
+

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

@@ -0,0 +1,17 @@
+.process-list-inputs {
+    margin-top: 100px;
+    margin-bottom: 50px;
+    display: flex;
+    justify-content: space-evenly;
+}
+
+.adf-reset-button {
+    margin-top: 50px;
+    display: flex;
+    justify-content: center;
+}
+
+.process-list-error-message {
+    color: red;
+    text-align: center;
+}

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

@@ -0,0 +1,131 @@
+/*!
+ * @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
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * limitations under the License.
+ */
+
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators, FormControl, AbstractControl } from '@angular/forms';
+import { ActivatedRoute, Params } from '@angular/router';
+
+
+@Component({
+    templateUrl: './process-list-demo.component.html',
+    styleUrls: [`./process-list-demo.component.scss`],
+})
+
+export class ProcessListDemoComponent implements OnInit {
+
+    processListForm: FormGroup;
+
+    defaultAppId: number;
+
+    appId: number;
+
+    name: string;
+
+    processDefId: string;
+
+    instanceId: number|string;
+
+    state: string;
+
+    sort: string;
+
+    presetColumn = 'default';
+
+    stateOptions = [
+        {value: 'all', title: 'All'},
+        {value: 'active', title: 'Active'},
+        {value: 'completed', title: 'Completed'}
+    ];
+
+    sortOptions = [
+        {value: 'created-asc', title: 'Created (asc)'},
+        {value: 'created-desc', title: 'Created (desc)'}
+    ];
+
+    constructor(private route: ActivatedRoute,
+                private formBuilder: FormBuilder) {}
+
+    ngOnInit() {
+        if (this.route) {
+            this.route.params.forEach((params: Params) => {
+                this.defaultAppId = params['id'] ? +params['id'] : 0;
+            });
+        }
+        this.appId = this.defaultAppId;
+        this.buildForm();
+    }
+
+    buildForm() {
+        this.processListForm = this.formBuilder.group({
+            processAppId: new FormControl(this.defaultAppId, [Validators.required, Validators.pattern('^[0-9]*$')]),
+            processDefinitionId: new FormControl(''),
+            processInstanceId: new FormControl(''),
+            processState: new FormControl(''),
+            processSort: new FormControl('')
+        });
+
+        this.processListForm.valueChanges
+            .debounceTime(500)
+            .subscribe(processFilter => {
+                if (this.isFormValid()) {
+                    this.filterProcesses(processFilter);
+                }
+            });
+
+    }
+
+    filterProcesses(processFilter: any) {
+        this.appId = processFilter.processAppId;
+        this.name = processFilter.processName;
+        this.processDefId = processFilter.processDefinitionId;
+        this.instanceId = processFilter.processInstanceId;
+        this.state = processFilter.processState;
+        this.sort = processFilter.processSort;
+    }
+
+    isFormValid() {
+        return this.processListForm && this.processListForm.dirty && this.processListForm.valid;
+    }
+
+    resetProcessForm() {
+        this.processListForm.reset();
+    }
+
+    getStatus(ended: Date) {
+        return ended ? 'Completed' : 'Active';
+    }
+
+    get processAppId(): AbstractControl {
+        return this.processListForm.get('processAppId');
+    }
+
+    get processDefinitionId(): AbstractControl {
+        return this.processListForm.get('processDefinitionId');
+    }
+
+    get processInstanceId(): AbstractControl {
+        return this.processListForm.get('processInstanceId');
+    }
+
+    get processState(): AbstractControl {
+        return this.processListForm.get('processState');
+    }
+
+    get processSort(): AbstractControl {
+        return this.processListForm.get('processSort');
+    }
+}

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

@@ -32,7 +32,7 @@
                      *ngIf="taskFilter && !isStartTaskMode()">
                     <adf-tasklist
                         [appId]="taskFilter?.appId"
-                        [presetColumn]="presetColoum"
+                        [presetColumn]="presetColumn"
                         [page]="taskPage"
                         [size]="paginationPageSize"
                         [processDefinitionKey]="taskFilter?.filter?.processDefinitionKey"
@@ -59,7 +59,6 @@
                         *ngIf="taskList"
                         [target]="taskList"
                         (changePageSize)="onChangePageSize($event)"
-                        [supportedPageSizes]="supportedPages"
                         #taskListPagination>
                     </adf-pagination>
                 </div>
@@ -123,7 +122,7 @@
                                              [headingIcon]="'assessment'">
                             <adf-process-instance-filters
                                 #activitiprocessfilter
-                                [filterParam]="{index: 0}"
+                                [filterParam]="filterSelected"
                                 [appId]="appId"
                                 (filterClick)="onProcessFilterClick($event)"
                                 (success)="onSuccessProcessFilterList($event)">
@@ -137,8 +136,7 @@
                         #processList
                         *ngIf="processFilter?.filter" [appId]="processFilter?.appId"
                         [processDefinitionKey]="processFilter?.filter?.processDefinitionKey"
-                        [name]="processFilter?.filter?.name"
-                        [presetColumn]="presetColoum"
+                        [presetColumn]="presetColumn"
                         [state]="processFilter?.filter?.state"
                         [page]="processPage"
                         [size]="paginationPageSize"
@@ -158,7 +156,6 @@
                         *ngIf="processList"
                         [target]="processList"
                         (changePageSize)="onChangePageSize($event)"
-                        [supportedPageSizes]="supportedPages"
                         #processListPagination>
                     </adf-pagination>
                 </div>

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

@@ -127,8 +127,6 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
     paginationPageSize = 0;
     processSchemaColumns: any[] = [];
 
-    supportedPages: number[];
-
     defaultProcessDefinitionName: string;
     defaultProcessName: string;
 
@@ -140,7 +138,7 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
     blobFile: any;
     flag = true;
 
-    presetColoum = 'default';
+    presetColumn = 'default';
 
     showTaskTab: boolean;
     showProcessTab: boolean;
@@ -225,7 +223,6 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
             this.currentProcessInstanceId = null;
         });
         this.layoutType = AppsListComponent.LAYOUT_GRID;
-        this.supportedPages = this.preferenceService.getDefaultPageSizes();
     }
 
     ngOnDestroy() {

demo-shell/src/app/components/report-issue/report-issue.component.html

@@ -0,0 +1,9 @@
+<div class="adf-report-issue">
+    <h1>Report Issue</h1>
+    <form class="adf-report-issue-form">
+        <mat-form-field>
+            <textarea matInput placeholder="Leave a comment" class="adf-report-issue-form-textarea"></textarea>
+        </mat-form-field>
+    </form>
+    <button mat-raised-button>Submit</button>
+</div>

demo-shell/src/app/components/report-issue/report-issue.component.scss

@@ -0,0 +1,24 @@
+.adf-report-issue {
+    margin: 50px 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    &-form {
+
+        width: 50%;
+        min-width: 250px;
+        margin-bottom: 50px;
+
+        & mat-form-field {
+            width: 100%;
+        }
+
+        &-textarea {
+            background-color: white;
+            width: 100%;
+            height: 250px;
+        }
+    }
+}

demo-shell/src/app/components/report-issue/report-issue.component.ts

@@ -0,0 +1,26 @@
+/*!
+ * @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';
+
+@Component({
+    templateUrl: './report-issue.component.html',
+    styleUrls: [`./report-issue.component.scss`],
+})
+export class ReportIssueComponent {
+
+}

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

@@ -0,0 +1,134 @@
+<div class="task-list-demo-inputs">
+
+     <form [formGroup]="taskListForm">
+        <mat-form-field>
+            <mat-label>App Id</mat-label>
+                <input 
+                matInput
+                class="form-control" 
+                [formControl]="taskAppId">
+                <mat-error *ngIf="taskAppId.hasError('required')">
+                    {{ 'TASK_LIST_DEMO.ERROR_MESSAGE.APP_ID_REQUIRED_ERROR' | translate }}
+                </mat-error>
+                <mat-error *ngIf="taskAppId.hasError('pattern')">
+                    {{ 'TASK_LIST_DEMO.ERROR_MESSAGE.APP_ID_TYPE_ERROR' | translate }}
+                </mat-error>
+        </mat-form-field>
+        
+        <mat-form-field>
+            <mat-label>Task Name</mat-label>
+            <input 
+            matInput 
+            class="form-control" 
+            [formControl]="taskName">
+        </mat-form-field>
+
+        <mat-form-field>
+            <mat-label>Task Id</mat-label>
+            <input 
+            matInput 
+            class="form-control" 
+            [formControl]="taskId">
+        </mat-form-field>
+
+        <mat-form-field>
+            <mat-label>Start</mat-label>
+            <input 
+            matInput 
+            class="form-control" 
+            matTooltip="{{ 'TASK_LIST_DEMO.TOOLTIP_MESSAGE.START_INPUT' | translate }}"
+            [formControl]="taskStart">
+            <mat-error *ngIf="taskStart.hasError('pattern')">
+                {{ 'TASK_LIST_DEMO.ERROR_MESSAGE.NUMBER_TYPE_ERROR' | translate }}
+            </mat-error>
+        </mat-form-field>
+
+        <mat-form-field>
+            <mat-label>ProcessDefinitionId</mat-label>
+            <input 
+            matInput 
+            class="form-control" 
+            [formControl]="taskProcessDefinitionId">
+            <mat-hint>E.g. SimpleProcess:1:2</mat-hint>
+        </mat-form-field>
+
+        <mat-form-field>
+            <mat-label>ProcessInstanceId</mat-label>
+            <input 
+            matInput 
+            class="form-control"
+            [formControl]="taskProcessInstanceId">
+            <mat-hint>E.g. 12345</mat-hint>
+        </mat-form-field>
+
+        <mat-form-field>
+                <mat-label>Process Instance</mat-label>
+                <mat-select 
+                class="form-control" 
+                [formControl]="taskIncludeProcessInstance">
+                 <mat-option *ngFor="let includeProcessInstanceOption of includeProcessInstanceOptions" [value]="includeProcessInstanceOption.value">{{ includeProcessInstanceOption.title }}</mat-option>
+                </mat-select>
+        </mat-form-field>
+
+        <mat-form-field>
+                <mat-label>Assignment</mat-label>
+                <mat-select 
+                class="form-control" 
+                [formControl]="taskAssignment">
+                 <mat-option *ngFor="let assignmentOption of assignmentOptions" [value]="assignmentOption.value">{{ assignmentOption.title }}</mat-option>
+                </mat-select>
+        </mat-form-field>
+
+        <mat-form-field>
+                <mat-label>State</mat-label>
+                <mat-select 
+                class="form-control" 
+                [formControl]="taskState">
+                    <mat-option *ngFor="let stateOption of stateOptions" [value]="stateOption.value">{{ stateOption.title }}</mat-option>
+                </mat-select>
+        </mat-form-field>
+
+        <mat-form-field>
+                <mat-label>Sort</mat-label>
+                <mat-select 
+                class="form-control" 
+                [formControl]="taskSort">
+                    <mat-option *ngFor="let sortOption of sortOptions" [value]="sortOption.value">{{ sortOption.title }}</mat-option>
+                </mat-select>
+        </mat-form-field>
+    </form>
+</div>
+<div class="adf-reset-button">
+    <button mat-raised-button (click)="resetTaskForm()">Reset</button>
+</div>
+
+<div>
+    <adf-tasklist
+        [appId]="appId" 
+        [taskId]="id" 
+        [name]="name" 
+        [processDefinitionId]="processDefinitionId" 
+        [processInstanceId]="processInstanceId" 
+        [assignment]="assignment" 
+        [state]="state" 
+        [sort]="sort"
+        [start]="start"
+        [includeProcessInstance]="includeProcessInstance"
+        (error)="onError($event)"
+        #taskList>
+        <data-columns>
+                <data-column key="id" title="Id"></data-column>
+                <data-column key="name" title="Name"></data-column>
+                <data-column key="description" title="Description"></data-column>
+                <data-column key="created" title="Created"></data-column>
+                <data-column key="dueDate" title="Due Date"></data-column>
+                <data-column key="processInstanceId" title="Process Instance Id"></data-column>
+                <data-column key="processDefinitionId" title="Process Definition Id"></data-column>
+            </data-columns>
+    </adf-tasklist>
+    
+    <adf-pagination 
+        [target]="taskList">
+    </adf-pagination>
+</div>
+

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

@@ -0,0 +1,23 @@
+.task-list-demo-inputs {
+    margin: 100px auto 0 auto;
+    width: 80%;
+    display: flex;
+    flex: wrap;
+    justify-content: space-evenly;
+
+    & mat-form-field {
+        margin: 20px 0;
+        width: calc(100% * (1/4) - 10px);
+    }
+}
+
+.adf-reset-button {
+    margin-bottom: 50px;
+    display: flex;
+    justify-content: center;
+}
+
+.task-list-demo-error-message {
+    color: red;
+    text-align: center;
+}

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

@@ -0,0 +1,192 @@
+/*!
+ * @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
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * limitations under the License.
+ */
+
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators, FormControl, AbstractControl } from '@angular/forms';
+import { ActivatedRoute, Params } from '@angular/router';
+import { NotificationService } from '@alfresco/adf-core';
+
+@Component({
+    templateUrl: './task-list-demo.component.html',
+    styleUrls: [`./task-list-demo.component.scss`],
+})
+
+export class TaskListDemoComponent implements OnInit {
+
+    defaultAppId: number;
+
+    taskListForm: FormGroup;
+
+    errorMessage: string;
+
+    appId: number;
+
+    id: string;
+
+    processDefinitionId: string;
+
+    processInstanceId: string;
+
+    state: string;
+
+    assignment: string;
+
+    name: string;
+
+    sort: string;
+
+    start: number;
+
+    includeProcessInstance: boolean;
+
+    assignmentOptions = [
+        {value: 'assignee', title: 'Assignee'},
+        {value: 'candidate', title: 'Candidate'}
+    ];
+
+    includeProcessInstanceOptions = [
+        {value: 'include', title: 'Include'},
+        {value: 'exclude', title: 'Exclude'}
+    ];
+
+    stateOptions = [
+        {value: 'all', title: 'All'},
+        {value: 'active', title: 'Active'},
+        {value: 'completed', title: 'Completed'}
+    ];
+
+    sortOptions = [
+        {value: 'created-asc', title: 'Created (asc)'},
+        {value: 'created-desc', title: 'Created (desc)'},
+        {value: 'due-asc', title: 'Due (asc)'},
+        {value: 'due-desc', title: 'Due (desc)'}
+    ];
+
+    constructor(private route: ActivatedRoute,
+                private formBuilder: FormBuilder,
+                private notificationService: NotificationService) {
+    }
+
+    ngOnInit() {
+        if (this.route) {
+            this.route.params.forEach((params: Params) => {
+                if (params['id']) {
+                    this.defaultAppId = +params['id'];
+                } else {
+                    this.defaultAppId = 0;
+                }
+            });
+        }
+
+        this.appId = this.defaultAppId;
+        this.errorMessage = 'Insert App Id';
+
+        this.buildForm();
+    }
+
+    buildForm() {
+        this.taskListForm = this.formBuilder.group({
+            taskAppId: new FormControl(this.defaultAppId, [Validators.required, Validators.pattern('^[0-9]*$')]),
+            taskName: new FormControl(''),
+            taskId: new FormControl(''),
+            taskProcessDefinitionId: new FormControl(''),
+            taskProcessInstanceId: new FormControl(''),
+            taskAssignment: new FormControl(''),
+            taskState: new FormControl(''),
+            taskSort: new FormControl(''),
+            taskStart: new FormControl('', [Validators.pattern('^[0-9]*$')]),
+            taskIncludeProcessInstance: new FormControl('')
+        });
+
+        this.taskListForm.valueChanges
+        .debounceTime(500)
+            .subscribe(taskFilter => {
+                if (this.isFormValid()) {
+                    this.filterTasks(taskFilter);
+                }
+        });
+    }
+
+    filterTasks(taskFilter: any) {
+        this.appId = taskFilter.taskAppId;
+        this.id = taskFilter.taskId;
+        this.processDefinitionId = taskFilter.taskProcessDefinitionId;
+        this.processInstanceId = taskFilter.taskProcessInstanceId;
+        this.name = taskFilter.taskName;
+        this.assignment = taskFilter.taskAssignment;
+        this.state = taskFilter.taskState;
+        this.sort = taskFilter.taskSort;
+        this.start = taskFilter.taskStart;
+
+        this.includeProcessInstance = taskFilter.taskIncludeProcessInstance === 'include';
+    }
+
+    onError($event) {
+        const errorMessage = JSON.parse($event.message).message;
+        this.notificationService.openSnackMessageAction(errorMessage, 'Reset', 5000).onAction().subscribe(() => {
+           this.resetTaskForm();
+        });
+    }
+
+    resetTaskForm() {
+        this.taskListForm.reset();
+    }
+
+    isFormValid() {
+        return this.taskListForm && this.taskListForm.dirty && this.taskListForm.valid;
+    }
+
+    get taskAppId(): AbstractControl {
+        return this.taskListForm.get('taskAppId');
+    }
+
+    get taskId(): AbstractControl {
+        return this.taskListForm.get('taskId');
+    }
+
+    get taskProcessDefinitionId(): AbstractControl {
+        return this.taskListForm.get('taskProcessDefinitionId');
+    }
+
+    get taskProcessInstanceId(): AbstractControl {
+        return this.taskListForm.get('taskProcessInstanceId');
+    }
+
+    get taskName(): AbstractControl {
+        return this.taskListForm.get('taskName');
+    }
+
+    get taskAssignment(): AbstractControl {
+        return this.taskListForm.get('taskAssignment');
+    }
+
+    get taskState(): AbstractControl {
+        return this.taskListForm.get('taskState');
+    }
+
+    get taskSort(): AbstractControl {
+        return this.taskListForm.get('taskSort');
+    }
+
+    get taskIncludeProcessInstance(): AbstractControl {
+        return this.taskListForm.get('taskIncludeProcessInstance');
+    }
+
+    get taskStart(): AbstractControl {
+        return this.taskListForm.get('taskStart');
+    }
+}

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

@@ -91,7 +91,6 @@
 
         </adf-document-list>
         <adf-pagination [ngClass]="{ 'no-border' : documentList.isEmpty()}"
-                        [supportedPageSizes]="supportedPages"
                         [target]="documentList">
         </adf-pagination>
     </div>

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

@@ -37,7 +37,6 @@ export class TrashcanComponent {
     @ViewChild('documentList')
     documentList: DocumentListComponent;
 
-    supportedPages = [];
     currentLocale;
 
     constructor(
@@ -45,12 +44,6 @@ export class TrashcanComponent {
         private router: Router,
         private notificationService: NotificationService
     ) {
-        this.preference
-            .select(UserPreferenceValues.SupportedPageSizes)
-            .subscribe(pages => {
-                this.supportedPages = pages;
-            });
-
         this.preference
             .select(UserPreferenceValues.Locale)
             .subscribe(locale => {

docs/content-services/README.md

@@ -22,17 +22,17 @@ for more information about installing and using the source code.
 | [Add permission panel component](add-permission-panel.component.md) | Searches for people or groups to add to the current node permissions. | [Source](../../lib/content-services/permission-manager/components/add-permission/add-permission-panel.component.ts) |
 | [Add permission component](add-permission.component.md) | Searches for people or groups to add to the current node permissions. | [Source](../../lib/content-services/permission-manager/components/add-permission/add-permission.component.ts) |
 | [Permission list component](permission-list.component.md) | Shows node permissions as a table. | [Source](../../lib/content-services/permission-manager/components/permission-list/permission-list.component.ts) |
-| [Search check list component](search-check-list.component.md) | Implements a checklist widget for the Search Filter component. | [Source](../../lib/content-services/search/components/search-check-list/search-check-list.component.ts) |
+| [Search check list component](search-check-list.component.md) | Implements a checklist widget for the [Search Filter component](../content-services/search-filter.component.md). | [Source](../../lib/content-services/search/components/search-check-list/search-check-list.component.ts) |
 | [Search chip list component](search-chip-list.component.md) | Displays search criteria as a set of "chips". | [Source](../../lib/content-services/search/components/search-chip-list/search-chip-list.component.ts) |
 | [Search control component](search-control.component.md) | Displays a input text which shows find-as-you-type suggestions. | [Source](../../lib/content-services/search/components/search-control.component.ts) |
-| [Search date range component](search-date-range.component.md) | Implements a date range widget for the Search Filter component. | [Source](../../lib/content-services/search/components/search-date-range/search-date-range.component.ts) |
+| [Search date range component](search-date-range.component.md) | Implements a date range widget for the [Search Filter component](../content-services/search-filter.component.md). | [Source](../../lib/content-services/search/components/search-date-range/search-date-range.component.ts) |
 | [Search filter component](search-filter.component.md) | Represents a main container component for custom search and faceted search settings. | [Source](../../lib/content-services/search/components/search-filter/search-filter.component.ts) |
-| [Search number range component](search-number-range.component.md) | Implements a number range widget for the Search Filter component. | [Source](../../lib/content-services/search/components/search-number-range/search-number-range.component.ts) |
-| [Search radio component](search-radio.component.md) | Implements a radio button list widget for the Search Filter component. | [Source](../../lib/content-services/search/components/search-radio/search-radio.component.ts) |
-| [Search slider component](search-slider.component.md) | Implements a numeric slider widget for the Search Filter component. | [Source](../../lib/content-services/search/components/search-slider/search-slider.component.ts) |
+| [Search number range component](search-number-range.component.md) | Implements a number range widget for the [Search Filter component](../content-services/search-filter.component.md). | [Source](../../lib/content-services/search/components/search-number-range/search-number-range.component.ts) |
+| [Search radio component](search-radio.component.md) | Implements a radio button list widget for the [Search Filter component](../content-services/search-filter.component.md). | [Source](../../lib/content-services/search/components/search-radio/search-radio.component.ts) |
+| [Search slider component](search-slider.component.md) | Implements a numeric slider widget for the [Search Filter component](../content-services/search-filter.component.md). | [Source](../../lib/content-services/search/components/search-slider/search-slider.component.ts) |
 | [Search sorting picker component](search-sorting-picker.component.md) | Provides an ability to select one of the predefined sorting definitions for search results: | [Source](../../lib/content-services/search/components/search-sorting-picker/search-sorting-picker.component.ts) |
-| [Search text component](search-text.component.md) | Implements a text input widget for the Search Filter component. | [Source](../../lib/content-services/search/components/search-text/search-text.component.ts) |
-| [Search component](search.component.md) | Searches items for supplied search terms.  | [Source](../../lib/content-services/search/components/search.component.ts) |
+| [Search text component](search-text.component.md) | Implements a text input widget for the [Search Filter component](../content-services/search-filter.component.md). | [Source](../../lib/content-services/search/components/search-text/search-text.component.ts) |
+| [Search component](search.component.md) | Searches items for supplied search terms. | [Source](../../lib/content-services/search/components/search.component.ts) |
 | [Sites dropdown component](sites-dropdown.component.md) | Displays a dropdown menu to show and interact with the sites of the current user. | [Source](../../lib/content-services/site-dropdown/sites-dropdown.component.ts) |
 | [Like component](like.component.md) | Allows a user to add "likes" to an item. | [Source](../../lib/content-services/social/like.component.ts) |
 | [Rating component](rating.component.md) | Allows a user to add ratings to an item. | [Source](../../lib/content-services/social/rating.component.ts) |
@@ -43,7 +43,7 @@ for more information about installing and using the source code.
 | [Upload button component](upload-button.component.md) | Activates a file upload. | [Source](../../lib/content-services/upload/components/upload-button.component.ts) |
 | [Upload drag area component](upload-drag-area.component.md) | Adds a drag and drop area to upload files to ACS. | [Source](../../lib/content-services/upload/components/upload-drag-area.component.ts) |
 | [Upload version button component](upload-version-button.component.md) ![Experimental](../docassets/images/ExperimentalIcon.png) | Activates a file version upload. | [Source](../../lib/content-services/upload/components/upload-version-button.component.ts) |
-| [Version list component](version-list.component.md) ![Experimental](../docassets/images/ExperimentalIcon.png) | Displays the version history of a node in a Version Manager component. | [Source](../../lib/content-services/version-manager/version-list.component.ts) |
+| [Version list component](version-list.component.md) ![Experimental](../docassets/images/ExperimentalIcon.png) | Displays the version history of a node in a [Version Manager component](../content-services/version-manager.component.md). | [Source](../../lib/content-services/version-manager/version-list.component.ts) |
 | [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) |
 
@@ -72,12 +72,12 @@ for more information about installing and using the source code.
 | ---- | ----------- | ----------- |
 | [Content node dialog service](content-node-dialog.service.md) | Displays and manages dialogs for selecting content to open, copy or upload. | [Source](../../lib/content-services/content-node-selector/content-node-dialog.service.ts) |
 | [Custom resources service](custom-resources.service.md) | Manages Document List information that is specific to a user. | [Source](../../lib/content-services/document-list/services/custom-resources.service.ts) |
-| [Document actions service](document-actions.service.md) | Implements the document menu actions for the Document List component. | [Source](../../lib/content-services/document-list/services/document-actions.service.ts) |
-| [Document list service](document-list.service.md) | Implements node operations used by the Document List component. | [Source](../../lib/content-services/document-list/services/document-list.service.ts) |
-| [Folder actions service](folder-actions.service.md) | Implements the folder menu actions for the Document List component. | [Source](../../lib/content-services/document-list/services/folder-actions.service.ts) |
+| [Document actions service](document-actions.service.md) | Implements the document menu actions for the [Document List component](../content-services/document-list.component.md). | [Source](../../lib/content-services/document-list/services/document-actions.service.ts) |
+| [Document list service](document-list.service.md) | Implements node operations used by the [Document List component](../content-services/document-list.component.md). | [Source](../../lib/content-services/document-list/services/document-list.service.ts) |
+| [Folder actions service](folder-actions.service.md) | Implements the folder menu actions for the [Document List component](../content-services/document-list.component.md). | [Source](../../lib/content-services/document-list/services/folder-actions.service.ts) |
 | [Node permission dialog service](node-permission-dialog.service.md) | Displays dialogs to let the user set node permissions. | [Source](../../lib/content-services/permission-manager/services/node-permission-dialog.service.ts) |
 | [Node permission service](node-permission.service.md) | Manages role permissions for content nodes. | [Source](../../lib/content-services/permission-manager/services/node-permission.service.ts) |
-| [Search filter service](search-filter.service.md) | Registers widgets for use with the Search Filter component. | [Source](../../lib/content-services/search/components/search-filter/search-filter.service.ts) |
+| [Search filter service](search-filter.service.md) | Registers widgets for use with the [Search Filter component](../content-services/search-filter.component.md). | [Source](../../lib/content-services/search/components/search-filter/search-filter.service.ts) |
 | [Search query builder service](search-query-builder.service.md) | Stores information from all the custom search and faceted search widgets, compiles and runs the final search query. | [Source](../../lib/content-services/search/search-query-builder.service.ts) |
 | [Rating service](rating.service.md) | Manages ratings for items in Content Services. | [Source](../../lib/content-services/social/services/rating.service.ts) |
 | [Tag service](tag.service.md) | Manages tags in Content Services. | [Source](../../lib/content-services/tag/services/tag.service.ts) |
@@ -88,4 +88,4 @@ for more information about installing and using the source code.
 
 | Name | Description | Source link |
 | ---- | ----------- | ----------- |
-| [Search Widget interface](search-widget.interface.md) | Specifies required properties for Search filter component widgets. | [Source](../../lib/content-services/search/search-widget.interface.ts) |
+| [Search Widget interface](search-widget.interface.md) | Specifies required properties for [Search filter component](../content-services/search-filter.component.md) widgets. | [Source](../../lib/content-services/search/search-widget.interface.ts) |

docs/content-services/add-permission-panel.component.md

@@ -25,7 +25,7 @@ Searches for people or groups to add to the current node permissions.
 ### Events
 
 | Name | Type | Description |
-| -- | -- | -- |
+| ---- | ---- | ----------- |
 | select | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when a permission list item is selected. |
 
 ## Details

docs/content-services/add-permission.component.md

@@ -25,13 +25,13 @@ Searches for people or groups to add to the current node permissions.
 ### Properties
 
 | Name | Type | Default value | Description |
-| -- | -- | -- | -- |
+| ---- | ---- | ------------- | ----------- |
 | nodeId | `string` |  | ID of the target node. |
 
 ### Events
 
 | 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. |
 

docs/content-services/breadcrumb.component.md

@@ -24,19 +24,19 @@ Indicates the current position within a navigation hierarchy.
 ### Properties
 
 | 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 | [`MinimalNodeEntryEntity`](../content-services/document-library.model.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. |
+| 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. |
 | target | [`DocumentListComponent`](../content-services/document-list.component.md) |  | (optional) [Document List component](../content-services/document-list.component.md) to operate with. The list will update when the breadcrumb is clicked. |
-| transform | `function` |  | Transformation to be performed on the chosen/folder node before building the breadcrumb UI. Can be useful when custom formatting is needed for the breadcrumb. You can change the path elements from the node that are used to build the breadcrumb using this function. |
+| transform | `Function` |  | Transformation to be performed on the chosen/folder node before building the breadcrumb UI. Can be useful when custom formatting is needed for the breadcrumb. You can change the path elements from the node that are used to build the breadcrumb using this function. |
 
 ### Events
 
 | 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
 

docs/content-services/content-action.component.md

@@ -13,19 +13,15 @@ Adds options to a Document List actions menu for a particular content type.
 ## Contents
 
 -   [Basic Usage](#basic-usage)
-
 -   [Class members](#class-members)
-
     -   [Properties](#properties)
     -   [Events](#events)
-
 -   [Details](#details)
-
     -   [Examples](#examples)
     -   [Conditional visibility](#conditional-visibility)
+    -   [Conditional disabled state](#conditional-disabled-state)
     -   [Customizing built-in actions](#customizing-built-in-actions)
     -   [Error, Permission and Success callbacks](#error-permission-and-success-callbacks)
-
 -   [See also](#see-also)
 
 ## Basic Usage
@@ -86,24 +82,24 @@ export class MyView {
 ### Properties
 
 | Name | Type | Default value | Description |
-| -- | -- | -- | -- |
+| ---- | ---- | ------------- | ----------- |
 | disableWithNoPermission | `boolean` |  | Should this action be disabled in the menu if the user doesn't have permission for it? |
-| disabled | `boolean \|Function` | false | Is the menu item disabled? |
+| disabled | `boolean \| Function` | false | Is the menu item disabled? |
 | handler | `string` |  | System actions. Can be "delete", "download", "copy" or "move". |
 | icon | `string` |  | The name of the icon to display next to the menu command (can be left blank). |
 | permission | `string` |  | The permission type. |
-| target | `string` |  [`ContentActionTarget`](../../lib/content-services/document-list/models/content-action.model.ts).All | Type of item that the action applies to. Can be "document" or "folder" |
+| target | `string` |  | Type of item that the action applies to. Can be "document" or "folder" |
 | title | `string` | "Action" | The title of the action as shown in the menu. |
 | visible | `boolean \| Function` | true | Visibility state (see examples). |
 
 ### Events
 
 | Name | Type | Description |
-| -- | -- | -- |
+| ---- | ---- | ----------- |
 | error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when an error occurs during the action. Applies to copy and move actions. |
 | execute | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when the user selects the action from the menu. |
 | permissionEvent | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when a permission error occurs |
-| success | `EventEmitter<Object>` | Emitted when the action succeeds with the success string message. Applies to copy, move and delete actions. |
+| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when the action succeeds with the success string message. Applies to copy, move and delete actions. |
 
 ## Details
 
@@ -124,7 +120,7 @@ will trigger the same action.) You can also add your own handler by implementing
 `execute` event.
 
 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
+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
 example, with `handler="delete"` you could use `execute` to show a message with the name,
@@ -383,8 +379,8 @@ funcName = (parameters): boolean => {
 
 Similar to `visible` property, it is possible to control the `disabled` state with the following scenarios:
 
-- direct value of `boolean` type
-- binding to a property of the `Function` type that evaluates condition and returns `boolean` value
+-   direct value of `boolean` type
+-   binding to a property of the `Function` type that evaluates condition and returns `boolean` value
 
 #### Using direct value of boolean type
 

docs/content-services/content-metadata.component.md

@@ -25,11 +25,11 @@ Displays and edits metadata related to a node.
 ### Properties
 
 | Name | Type | Default value | Description |
-| -- | -- | -- | -- |
+| ---- | ---- | ------------- | ----------- |
 | displayEmpty | `boolean` | false | Toggles whether to display empty values in the card view |
 | editable | `boolean` | false | Toggles whether the edit button should be shown |
 | expanded | `boolean` | false | Toggles between expanded (ie, full information) and collapsed (ie, reduced information) in the display |
-| multi | `boolean` | false | The multi parameter of the underlying material expansion panel |
+| multi | `boolean` | false | The multi parameter of the underlying material expansion panel, set to true to allow multi accordion to be expanded at the same time |
 | node | [`MinimalNodeEntryEntity`](../content-services/document-library.model.md) |  | (required) The node entity to fetch metadata about |
 | preset | `string` |  | Name of the metadata preset, which defines aspects and their properties |
 

docs/content-services/content-node-dialog.service.md

@@ -14,41 +14,41 @@ Displays and manages dialogs for selecting content to open, copy or upload.
 
 -   **close**()<br/>
     Closes the currently open dialog.
--   **getTitleTranslation**(action: `string` = `null`, name: `string` = `null`): `string`<br/>
+-   **getTitleTranslation**(action: `string`, name: `string`): `string`<br/>
     Gets the translation of the dialog title.
     -   _action:_ `string`  - Name of the action to display in the dialog title
     -   _name:_ `string`  - Name of the item on which the action is being performed
     -   **Returns** `string` - Translated version of the title
--   **openCopyMoveDialog**(action: `string` = `null`, contentEntry: [`MinimalNodeEntryEntity`](../content-services/document-library.model.md) = `null`, permission?: `string` = `null`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`[]>`<br/>
+-   **openCopyMoveDialog**(action: `string`, contentEntry: [`MinimalNodeEntryEntity`](../content-services/document-library.model.md), permission?: `string`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`[]>`<br/>
     Opens a dialog to copy or move an item to a new location.
     -   _action:_ `string`  - Name of the action (eg, "Copy" or "Move") to show in the title
     -   _contentEntry:_ [`MinimalNodeEntryEntity`](../content-services/document-library.model.md)  - Item to be copied or moved
     -   _permission:_ `string`  - (Optional) Permission for the operation
     -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`[]>` - Information about files that were copied/moved
--   **openFileBrowseDialogByFolderId**(folderNodeId: `string` = `null`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`[]>`<br/>
+-   **openFileBrowseDialogByFolderId**(folderNodeId: `string`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`[]>`<br/>
     Opens a file browser at a chosen folder location.
     -   _folderNodeId:_ `string`  - ID of the folder to use
     -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`[]>` - Information about the selected file(s)
 -   **openFileBrowseDialogBySite**(): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`[]>`<br/>
     Opens a file browser at a chosen site location.
     -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`[]>` - Information about the selected file(s)
--   **openFolderBrowseDialogByFolderId**(folderNodeId: `string` = `null`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`[]>`<br/>
+-   **openFolderBrowseDialogByFolderId**(folderNodeId: `string`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`[]>`<br/>
     Opens a folder browser at a chosen folder location.
     -   _folderNodeId:_ `string`  - ID of the folder to use
     -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`[]>` - Information about the selected folder(s)
 -   **openFolderBrowseDialogBySite**(): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`[]>`<br/>
     Opens a folder browser at a chosen site location.
     -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`[]>` - Information about the selected folder(s)
--   **openLockNodeDialog**(contentEntry: [`MinimalNodeEntryEntity`](../content-services/document-library.model.md) = `null`): [`Subject`](http://reactivex.io/documentation/subject.html)`<string>`<br/>
+-   **openLockNodeDialog**(contentEntry: [`MinimalNodeEntryEntity`](../content-services/document-library.model.md)): [`Subject`](http://reactivex.io/documentation/subject.html)`<string>`<br/>
     Opens a lock node dialog.
     -   _contentEntry:_ [`MinimalNodeEntryEntity`](../content-services/document-library.model.md)  - Node to lock
     -   **Returns** [`Subject`](http://reactivex.io/documentation/subject.html)`<string>` - Error/status message (if any)
--   **openUploadFileDialog**(action: `string` = `null`, contentEntry: [`MinimalNodeEntryEntity`](../content-services/document-library.model.md) = `null`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`[]>`<br/>
+-   **openUploadFileDialog**(action: `string`, contentEntry: [`MinimalNodeEntryEntity`](../content-services/document-library.model.md)): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`[]>`<br/>
     Opens a dialog to choose a file to upload.
     -   _action:_ `string`  - Name of the action to show in the title
     -   _contentEntry:_ [`MinimalNodeEntryEntity`](../content-services/document-library.model.md)  - Item to upload
     -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`[]>` - Information about the chosen file(s)
--   **openUploadFolderDialog**(action: `string` = `null`, contentEntry: [`MinimalNodeEntryEntity`](../content-services/document-library.model.md) = `null`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`[]>`<br/>
+-   **openUploadFolderDialog**(action: `string`, contentEntry: [`MinimalNodeEntryEntity`](../content-services/document-library.model.md)): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`[]>`<br/>
     Opens a dialog to choose folders to upload.
     -   _action:_ `string`  - Name of the action to show in the title
     -   _contentEntry:_ [`MinimalNodeEntryEntity`](../content-services/document-library.model.md)  - Item to upload

docs/content-services/content-node-selector-panel.component.md

@@ -28,20 +28,20 @@ Opens a Content Node Selector in its own dialog window.
 ### Properties
 
 | Name | Type | Default value | Description |
-| -- | -- | -- | -- |
-| breadcrumbTransform | `function` |  | Transformation to be performed on the chosen/folder node before building the breadcrumb UI. Can be useful when custom formatting is needed for the breadcrumb. You can change the path elements from the node that are used to build the breadcrumb using this function. |
-| currentFolderId | `string` |  null | Node ID of the folder currently listed. |
+| ---- | ---- | ------------- | ----------- |
+| breadcrumbTransform | `Function` |  | Transformation to be performed on the chosen/folder node before building the breadcrumb UI. Can be useful when custom formatting is needed for the breadcrumb. You can change the path elements from the node that are used to build the breadcrumb using this function. |
+| currentFolderId | `string` | null | Node ID of the folder currently listed. |
 | dropdownHideMyFiles | `boolean` | false | Hide the "My Files" option added to the site list by default. See the [Sites Dropdown component](sites-dropdown.component.md) for more information. |
-| dropdownSiteList | [`SitePaging`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/SitePaging.md) |  null | Custom site for site dropdown same as siteList. See the [Sites Dropdown component](sites-dropdown.component.md) for more information. |
-| imageResolver | [`ImageResolver`](../../lib/content-services/document-list/data/image-resolver.model.ts) |  null | Custom image resolver function. See the [Document List component](document-list.component.md#custom-row-filter) for more information. |
-| isSelectionValid | [`ValidationFunction`](../../lib/content-services/content-node-selector/content-node-selector-panel.component.ts) |  defaultValidation | Function used to decide if the selected node has permission to be selected. Default value is a function that always returns true. |
+| dropdownSiteList | [`SitePaging`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/SitePaging.md) | null | Custom site for site dropdown same as siteList. See the [Sites Dropdown component](sites-dropdown.component.md) for more information. |
+| imageResolver | `ImageResolver` | null | Custom image resolver function. See the [Document List component](document-list.component.md#custom-row-filter) for more information. |
+| isSelectionValid | `ValidationFunction` | defaultValidation | Function used to decide if the selected node has permission to be selected. Default value is a function that always returns true. |
 | pageSize | `number` |  | Number of items shown per page in the list. |
-| rowFilter | [`RowFilter`](../../lib/content-services/document-list/data/row-filter.model.ts) |  null | Custom row filter function. See the [Document List component](document-list.component.md#custom-row-filter) for more information. |
+| rowFilter | `RowFilter` | null | Custom row filter function. See the [Document List component](document-list.component.md#custom-row-filter) for more information. |
 
 ### Events
 
 | Name | Type | Description |
-| -- | -- | -- |
+| ---- | ---- | ----------- |
 | select | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`[]>` | Emitted when the user has chosen an item. |
 
 ## Details

docs/content-services/content-node-selector.component.md

@@ -13,16 +13,12 @@ Allows a user to select items from a Content Services repository.
 ## Contents
 
 -   [Class members](#class-members)
-
     -   [Properties](#properties)
-
 -   [Details](#details)
-
     -   [Showing the dialog](#showing-the-dialog)
     -   [Usage example](#usage-example)
     -   [RowFilter and ImageResolver](#rowfilter-and-imageresolver)
     -   [Using the breadcrumbTransform function](#using-the-breadcrumbtransform-function)
-
 -   [See also](#see-also)
 
 ## Class members
@@ -30,14 +26,14 @@ Allows a user to select items from a Content Services repository.
 ### Properties
 
 | Name | Type | Default value | Description |
-| -- | -- | -- | -- |
-| currentFolderId | `string` |  null | (**Deprecated:** in 2.1.0)  |
-| dropdownHideMyFiles | `boolean` | false | (**Deprecated:** in 2.1.0)  |
-| dropdownSiteList | [`SitePaging`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/SitePaging.md) |  null | (**Deprecated:** in 2.1.0)  |
-| imageResolver | [`ImageResolver`](../../lib/content-services/document-list/data/image-resolver.model.ts) |  null | (**Deprecated:** in 2.1.0)  |
-| pageSize | `number` |  | (**Deprecated:** in 2.1.0)  |
-| rowFilter | [`RowFilter`](../../lib/content-services/document-list/data/row-filter.model.ts) |  null | (**Deprecated:** in 2.1.0)  |
-| title | `string` |  null | (**Deprecated:** in 2.1.0)  |
+| ---- | ---- | ------------- | ----------- |
+| currentFolderId | `string` | null | (**Deprecated:** in 2.1.0) |
+| dropdownHideMyFiles | `boolean` | false | (**Deprecated:** in 2.1.0) |
+| dropdownSiteList | [`SitePaging`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/SitePaging.md) | null | (**Deprecated:** in 2.1.0) |
+| imageResolver | `ImageResolver` | null | (**Deprecated:** in 2.1.0) |
+| pageSize | `number` |  | (**Deprecated:** in 2.1.0) |
+| rowFilter | `RowFilter` | null | (**Deprecated:** in 2.1.0) |
+| title | `string` | null | (**Deprecated:** in 2.1.0) |
 
 ## Details
 

docs/content-services/custom-resources.service.md

@@ -12,47 +12,47 @@ Manages Document List information that is specific to a user.
 
 ### Methods
 
--   **getCorrespondingNodeIds**(nodeId: `string` = `null`, pagination: [`PaginationModel`](../../lib/core/models/pagination.model.ts) = `null`): [`Observable`](http://reactivex.io/documentation/observable.html)`<string[]>`<br/>
+-   **getCorrespondingNodeIds**(nodeId: `string`, pagination: [`PaginationModel`](lib/core/models/pagination.model.ts)): [`Observable`](http://reactivex.io/documentation/observable.html)`<string[]>`<br/>
     Gets the contents of one of the well-known aliases in the form of node ID strings.
     -   _nodeId:_ `string`  - ID of the target folder node
-    -   _pagination:_ [`PaginationModel`](../../lib/core/models/pagination.model.ts)  - Specifies how to paginate the results
+    -   _pagination:_ [`PaginationModel`](lib/core/models/pagination.model.ts)  - Specifies how to paginate the results
     -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<string[]>` - List of node IDs
--   **getRecentFiles**(personId: `string` = `null`, pagination: [`PaginationModel`](../../lib/core/models/pagination.model.ts) = `null`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`NodePaging`](../../lib/content-services/document-list/models/document-library.model.ts)`>`<br/>
+-   **getRecentFiles**(personId: `string`, pagination: [`PaginationModel`](lib/core/models/pagination.model.ts)): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`NodePaging`](lib/content-services/document-list/models/document-library.model.ts)`>`<br/>
     Gets files recently accessed by a user.
     -   _personId:_ `string`  - ID of the user
-    -   _pagination:_ [`PaginationModel`](../../lib/core/models/pagination.model.ts)  - Specifies how to paginate the results
-    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`NodePaging`](../../lib/content-services/document-list/models/document-library.model.ts)`>` - List of nodes for the recently used files
--   **isCustomSource**(folderId: `string` = `null`): `boolean`<br/>
+    -   _pagination:_ [`PaginationModel`](lib/core/models/pagination.model.ts)  - Specifies how to paginate the results
+    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`NodePaging`](lib/content-services/document-list/models/document-library.model.ts)`>` - List of nodes for the recently used files
+-   **isCustomSource**(folderId: `string`): `boolean`<br/>
     Is the folder ID one of the well-known aliases?
     -   _folderId:_ `string`  - Folder ID name to check
     -   **Returns** `boolean` - True if the ID is a well-known name, false otherwise
--   **loadFavorites**(pagination: [`PaginationModel`](../../lib/core/models/pagination.model.ts) = `null`, includeFields: `string[]` = `[]`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`NodePaging`](../../lib/content-services/document-list/models/document-library.model.ts)`>`<br/>
+-   **loadFavorites**(pagination: [`PaginationModel`](lib/core/models/pagination.model.ts), includeFields: `string[]` = `[]`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`NodePaging`](lib/content-services/document-list/models/document-library.model.ts)`>`<br/>
     Gets favorite files for the current user.
-    -   _pagination:_ [`PaginationModel`](../../lib/core/models/pagination.model.ts)  - Specifies how to paginate the results
+    -   _pagination:_ [`PaginationModel`](lib/core/models/pagination.model.ts)  - Specifies how to paginate the results
     -   _includeFields:_ `string[]`  - List of data field names to include in the results
-    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`NodePaging`](../../lib/content-services/document-list/models/document-library.model.ts)`>` - List of favorite files
--   **loadFolderByNodeId**(nodeId: `string` = `null`, pagination: [`PaginationModel`](../../lib/core/models/pagination.model.ts) = `null`, includeFields: `string[]` = `null`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`NodePaging`](../../lib/content-services/document-list/models/document-library.model.ts)`>`<br/>
+    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`NodePaging`](lib/content-services/document-list/models/document-library.model.ts)`>` - List of favorite files
+-   **loadFolderByNodeId**(nodeId: `string`, pagination: [`PaginationModel`](lib/core/models/pagination.model.ts), includeFields: `string[]`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`NodePaging`](lib/content-services/document-list/models/document-library.model.ts)`>`<br/>
     Gets a folder's contents.
     -   _nodeId:_ `string`  - ID of the target folder node
-    -   _pagination:_ [`PaginationModel`](../../lib/core/models/pagination.model.ts)  - Specifies how to paginate the results
+    -   _pagination:_ [`PaginationModel`](lib/core/models/pagination.model.ts)  - Specifies how to paginate the results
     -   _includeFields:_ `string[]`  - List of data field names to include in the results
-    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`NodePaging`](../../lib/content-services/document-list/models/document-library.model.ts)`>` - List of items contained in the folder
--   **loadMemberSites**(pagination: [`PaginationModel`](../../lib/core/models/pagination.model.ts) = `null`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`NodePaging`](../../lib/content-services/document-list/models/document-library.model.ts)`>`<br/>
+    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`NodePaging`](lib/content-services/document-list/models/document-library.model.ts)`>` - List of items contained in the folder
+-   **loadMemberSites**(pagination: [`PaginationModel`](lib/core/models/pagination.model.ts)): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`NodePaging`](lib/content-services/document-list/models/document-library.model.ts)`>`<br/>
     Gets sites that the current user is a member of.
-    -   _pagination:_ [`PaginationModel`](../../lib/core/models/pagination.model.ts)  - Specifies how to paginate the results
-    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`NodePaging`](../../lib/content-services/document-list/models/document-library.model.ts)`>` - List of sites
--   **loadSharedLinks**(pagination: [`PaginationModel`](../../lib/core/models/pagination.model.ts) = `null`, includeFields: `string[]` = `[]`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`NodePaging`](../../lib/content-services/document-list/models/document-library.model.ts)`>`<br/>
+    -   _pagination:_ [`PaginationModel`](lib/core/models/pagination.model.ts)  - Specifies how to paginate the results
+    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`NodePaging`](lib/content-services/document-list/models/document-library.model.ts)`>` - List of sites
+-   **loadSharedLinks**(pagination: [`PaginationModel`](lib/core/models/pagination.model.ts), includeFields: `string[]` = `[]`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`NodePaging`](lib/content-services/document-list/models/document-library.model.ts)`>`<br/>
     Gets shared links for the current user.
-    -   _pagination:_ [`PaginationModel`](../../lib/core/models/pagination.model.ts)  - Specifies how to paginate the results
+    -   _pagination:_ [`PaginationModel`](lib/core/models/pagination.model.ts)  - Specifies how to paginate the results
     -   _includeFields:_ `string[]`  - List of data field names to include in the results
-    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`NodePaging`](../../lib/content-services/document-list/models/document-library.model.ts)`>` - List of shared links
--   **loadSites**(pagination: [`PaginationModel`](../../lib/core/models/pagination.model.ts) = `null`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`NodePaging`](../../lib/content-services/document-list/models/document-library.model.ts)`>`<br/>
+    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`NodePaging`](lib/content-services/document-list/models/document-library.model.ts)`>` - List of shared links
+-   **loadSites**(pagination: [`PaginationModel`](lib/core/models/pagination.model.ts)): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`NodePaging`](lib/content-services/document-list/models/document-library.model.ts)`>`<br/>
     Gets all sites in the respository.
-    -   _pagination:_ [`PaginationModel`](../../lib/core/models/pagination.model.ts)  - Specifies how to paginate the results
-    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`NodePaging`](../../lib/content-services/document-list/models/document-library.model.ts)`>` - List of sites
--   **loadTrashcan**(pagination: [`PaginationModel`](../../lib/core/models/pagination.model.ts) = `null`, includeFields: `string[]` = `[]`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`DeletedNodesPaging`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/DeletedNodesPaging.md)`>`<br/>
+    -   _pagination:_ [`PaginationModel`](lib/core/models/pagination.model.ts)  - Specifies how to paginate the results
+    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`NodePaging`](lib/content-services/document-list/models/document-library.model.ts)`>` - List of sites
+-   **loadTrashcan**(pagination: [`PaginationModel`](lib/core/models/pagination.model.ts), includeFields: `string[]` = `[]`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`DeletedNodesPaging`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/DeletedNodesPaging.md)`>`<br/>
     Gets all items currently in the trash.
-    -   _pagination:_ [`PaginationModel`](../../lib/core/models/pagination.model.ts)  - Specifies how to paginate the results
+    -   _pagination:_ [`PaginationModel`](lib/core/models/pagination.model.ts)  - Specifies how to paginate the results
     -   _includeFields:_ `string[]`  - List of data field names to include in the results
     -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`DeletedNodesPaging`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/DeletedNodesPaging.md)`>` - List of deleted items
 

docs/content-services/document-actions.service.md

@@ -12,18 +12,18 @@ Implements the document menu actions for the [Document List component](../conten
 
 ### Methods
 
--   **canExecuteAction**(obj: `any` = `null`): `boolean`<br/>
+-   **canExecuteAction**(obj: `any`): `boolean`<br/>
     Checks if actions can be executed for an item.
     -   _obj:_ `any`  - Item to receive an action
     -   **Returns** `boolean` - True if the action can be executed on this item, false otherwise
--   **getHandler**(key: `string` = `null`): [`ContentActionHandler`](../../lib/content-services/document-list/models/content-action.model.ts)<br/>
+-   **getHandler**(key: `string`): `ContentActionHandler`<br/>
     Gets the handler for an action.
     -   _key:_ `string`  - Identifier of the action
-    -   **Returns** [`ContentActionHandler`](../../lib/content-services/document-list/models/content-action.model.ts) - The handler for the action
--   **setHandler**(key: `string` = `null`, handler: [`ContentActionHandler`](../../lib/content-services/document-list/models/content-action.model.ts) = `null`): `boolean`<br/>
+    -   **Returns** `ContentActionHandler` - The handler for the action
+-   **setHandler**(key: `string`, handler: `ContentActionHandler`): `boolean`<br/>
     Sets a new handler for an action.
     -   _key:_ `string`  - Identifier of the action
-    -   _handler:_ [`ContentActionHandler`](../../lib/content-services/document-list/models/content-action.model.ts)  - Handler for the action
+    -   _handler:_ `ContentActionHandler`  - Handler for the action
     -   **Returns** `boolean` - False if the key was an empty/null string, true otherwise
 
 ## Details

docs/content-services/document-list.component.md

@@ -13,14 +13,10 @@ Displays the documents from a repository.
 ## Contents
 
 -   [Basic Usage](#basic-usage)
-
 -   [Class members](#class-members)
-
     -   [Properties](#properties)
     -   [Events](#events)
-
 -   [Details](#details)
-
     -   [DOM Events](#dom-events)
     -   [Conditional visibility](#conditional-visibility)
     -   [Card view](#card-view)
@@ -34,14 +30,11 @@ Displays the documents from a repository.
     -   [Location Column](#location-column)
     -   [Actions](#actions)
     -   [Navigation mode](#navigation-mode)
-
 -   [Advanced usage and customization](#advanced-usage-and-customization)
-
     -   [Custom row filter](#custom-row-filter)
     -   [Custom image resolver](#custom-image-resolver)
-    -   [Custom 'empty folder' template](#custom-empty-folder-template)
-    -   [Custom 'permission denied' template](#custom-permission-denied-template)
-
+    -   [Custom 'empty folder' template](#custom-'empty-folder'-template)
+    -   [Custom 'permission denied' template](#custom-'permission-denied'-template)
 -   [See also](#see-also)
 
 ## Basic Usage
@@ -60,46 +53,46 @@ Displays the documents from a repository.
 ### Properties
 
 | Name | Type | Default value | Description |
-| -- | -- | -- | -- |
+| ---- | ---- | ------------- | ----------- |
 | allowDropFiles | `boolean` | false | Toggle file drop support for rows (see [Upload Directive](../core/upload.directive.md) for further details |
 | contentActions | `boolean` | false | Toggles content actions for each row |
 | contentActionsPosition | `string` | "right" | Position of the content actions dropdown menu. Can be set to "left" or "right". |
 | contextMenuActions | `boolean` | false | Toggles context menus for each row |
-| currentFolderId | `string` |  null | The ID of the folder node to display or a reserved string alias for special sources |
-| display | `string` |  [`DisplayMode`](../../lib/core/datatable/components/datatable/datatable.component.ts).List | Change the display mode of the table. Can be "list" or "gallery". |
-| emptyFolderImageUrl | `string` | "./assets/images/empty_doc_lib.svg" | Custom image for empty folder. Default value: './assets/images/empty_doc_lib.svg' |
+| currentFolderId | `string` | null | The ID of the folder node to display or a reserved string alias for special sources |
+| display | `string` | DisplayMode.List | Change the display mode of the table. Can be "list" or "gallery". |
+| emptyFolderImageUrl | `string` |  | Custom image for empty folder. Default value: './assets/images/empty_doc_lib.svg' |
 | enableInfiniteScrolling | `boolean` | false | Set document list to work in infinite scrolling mode |
-| folderNode | [`MinimalNodeEntryEntity`](../content-services/document-library.model.md) |  null | Currently displayed folder node |
-| imageResolver | `any \| null` |  null | Custom image resolver |
+| folderNode | [`MinimalNodeEntryEntity`](../content-services/document-library.model.md) | null | Currently displayed folder node |
+| imageResolver | `any \| null` | null | Custom image resolver |
 | includeFields | `string[]` |  | Include additional information about the node in the server request.for example: association, isLink, isLocked and others. |
 | loading | `boolean` | false | Toggles the loading state and animated spinners for the component. Used in combination with `navigate=false` to perform custom navigation and loading state indication. |
 | locationFormat | `string` | "/" | The default route for all the location-based columns (if declared). |
 | maxItems | `number` |  | Default value is stored into user preference settings use it only if you are not using the pagination |
 | multiselect | `boolean` | false | Toggles multiselect mode |
 | navigate | `boolean` | true | Toggles navigation to folder content or file preview |
-| navigationMode | `string` |  [`DocumentListComponent`](../content-services/document-list.component.md).DOUBLE_CLICK_NAVIGATION | User interaction for folder navigation or file preview. Valid values are "click" and "dblclick". Default value: "dblclick" |
-| node | [`NodePaging`](../../lib/content-services/document-list/models/document-library.model.ts) |  null | The Document list will show all the nodes contained in the [`NodePaging`](../../lib/content-services/document-list/models/document-library.model.ts) entity |
-| permissionsStyle | [`PermissionStyleModel`](../../lib/content-services/document-list/models/permissions-style.model.ts)`[]` |  \[] | Define a set of CSS styles styles to apply depending on the permission of the user on that node. See the [Permission Style model](../../lib/content-services/document-list/models/permissions-style.model.ts) page for further details and examples. |
-| rowFilter | `any \| null` |  null | Custom row filter |
+| navigationMode | `string` |  | User interaction for folder navigation or file preview. Valid values are "click" and "dblclick". Default value: "dblclick" |
+| node | [`NodePaging`](lib/content-services/document-list/models/document-library.model.ts) | null | The Document list will show all the nodes contained in the [NodePaging](lib/content-services/document-list/models/document-library.model.ts) entity |
+| permissionsStyle | [`PermissionStyleModel`](lib/content-services/document-list/models/permissions-style.model.ts)`[]` | \[] | Define a set of CSS styles styles to apply depending on the permission of the user on that node. See the [Permission Style model](lib/content-services/document-list/models/permissions-style.model.ts) page for further details and examples. |
+| rowFilter | `any \| null` | null | Custom row filter |
 | rowStyle | `string` |  | The inline style to apply to every row. See the Angular NgStyle docs for more details and usage examples. |
 | rowStyleClass | `string` |  | The CSS class to apply to every row |
 | selectionMode | `string` | "single" | Row selection mode. Can be null, `single` or `multiple`. For `multiple` mode, you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows. |
 | showHeader | `boolean` | true | Toggles the header |
 | skipCount | `number` | 0 | Number of elements to skip over for pagination purposes |
-| sorting | `string[]` |  ['name', 'asc'] | Defines default sorting. The format is an array of 2 strings `[key, direction]` i.e. `['name', 'desc']` or `['name', 'asc']`. Set this value only if you want to override the default sorting detected by the component based on columns. |
+| sorting | `string[]` | ['name', 'asc'] | Defines default sorting. The format is an array of 2 strings `[key, direction]` i.e. `['name', 'desc']` or `['name', 'asc']`. Set this value only if you want to override the default sorting detected by the component based on columns. |
 | sortingMode | `string` | "client" | Defines sorting mode. Can be either `client` or `server`. |
 | thumbnails | `boolean` | false | Show document thumbnails rather than icons |
 
 ### Events
 
 | Name | Type | Description |
-| -- | -- | -- |
+| ---- | ---- | ----------- |
 | error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the API fails to get the Document List data |
-| folderChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntryEvent`](../../lib/content-services/document-list/components/node.event.ts)`>` | Emitted when the current display folder changes |
-| nodeClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntityEvent`](../../lib/content-services/document-list/components/node.event.ts)`>` | Emitted when the user clicks a list node |
-| nodeDblClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntityEvent`](../../lib/content-services/document-list/components/node.event.ts)`>` | Emitted when the user double-clicks a list node |
-| preview | `EventEmitter<NodeEntityEvent>` | Emitted when the user acts upon files with either single or double click (depends on `navigation-mode`). Useful for integration with the Viewer component. |
-| ready | `EventEmitter<NodePaging>` | Emitted when the Document List has loaded all items and is ready for use |
+| folderChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntryEvent`](lib/content-services/document-list/components/node.event.ts)`>` | Emitted when the current display folder changes |
+| nodeClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntityEvent`](lib/content-services/document-list/components/node.event.ts)`>` | Emitted when the user clicks a list node |
+| nodeDblClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntityEvent`](lib/content-services/document-list/components/node.event.ts)`>` | Emitted when the user double-clicks a list node |
+| preview | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntityEvent`](lib/content-services/document-list/components/node.event.ts)`>` | Emitted when the user acts upon files with either single or double click (depends on `navigation-mode`). Useful for integration with the [Viewer component](../core/viewer.component.md). |
+| ready | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodePaging`](lib/content-services/document-list/models/document-library.model.ts)`>` | Emitted when the Document List has loaded all items and is ready for use |
 
 ## Details
 
@@ -660,7 +653,7 @@ The following example switches navigation to single clicks:
 
 You can create a custom row filter function that returns `true` if the row should be
 displayed or `false` if it should be hidden.
-A typical row filter implementation receives a [`ShareDataRow`](../../lib/content-services/document-list/data/share-data-row.model.ts) object as a parameter:
+A typical row filter implementation receives a [`ShareDataRow`](lib/content-services/document-list/data/share-data-row.model.ts) object as a parameter:
 
 ```ts
 myFilter(row: ShareDataRow): boolean {

docs/content-services/document-list.service.md

@@ -12,55 +12,53 @@ Implements node operations used by the [Document List component](../content-serv
 
 ### Methods
 
--   **copyNode**(nodeId: `string` = `null`, targetParentId: `string` = `null`): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
+-   **copyNode**(nodeId: `string`, targetParentId: `string`): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
     Copy a node to destination node
     -   _nodeId:_ `string`  - The id of the node to be copied
     -   _targetParentId:_ `string`  - The id of the folder where the node will be copied
     -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<any>` - NodeEntry for the copied node
--   **createFolder**(name: `string` = `null`, parentId: `string` = `null`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`MinimalNodeEntity`](../content-services/document-library.model.md)`>`<br/>
+-   **createFolder**(name: `string`, parentId: `string`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`MinimalNodeEntity`](../content-services/document-library.model.md)`>`<br/>
     Creates a new folder in the path.
     -   _name:_ `string`  - Folder name
     -   _parentId:_ `string`  - Parent folder ID
     -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`MinimalNodeEntity`](../content-services/document-library.model.md)`>` - Details of the created folder node
--   **deleteNode**(nodeId: `string` = `null`): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
+-   **deleteNode**(nodeId: `string`): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
     Deletes a node.
     -   _nodeId:_ `string`  - ID of the node to delete
     -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<any>` - Empty response when the operation is complete
 -   **getDefaultMimeTypeIcon**(): `string`<br/>
     Gets a default icon for MIME types with no specific icon.
     -   **Returns** `string` - Path to the icon file
--   **getDocumentThumbnailUrl**(node: [`MinimalNodeEntity`](../content-services/document-library.model.md) = `null`): `string`<br/>
+-   **getDocumentThumbnailUrl**(node: [`MinimalNodeEntity`](../content-services/document-library.model.md)): `string`<br/>
     Get thumbnail URL for the given document node.
     -   _node:_ [`MinimalNodeEntity`](../content-services/document-library.model.md)  - Node to get URL for.
     -   **Returns** `string` - Thumbnail URL string
--   **getFolder**(folder: `string` = `null`, opts?: `any` = `null`, includeFields: `string[]` = `[]`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`NodePaging`](../../lib/content-services/document-list/models/document-library.model.ts)`>`<br/>
+-   **getFolder**(folder: `string`, opts?: `any`, includeFields: `string[]` = `[]`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`NodePaging`](lib/content-services/document-list/models/document-library.model.ts)`>`<br/>
     Gets the folder node with the specified relative name path below the root node.
     -   _folder:_ `string`  - Path to folder.
     -   _opts:_ `any`  - (Optional) Options.
     -   _includeFields:_ `string[]`  - Extra information to include (available options are "aspectNames", "isLink" and "association")
-    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`NodePaging`](../../lib/content-services/document-list/models/document-library.model.ts)`>` - Details of the folder
--   **getFolderNode**(nodeId: `string` = `null`, includeFields: `string[]` = `[]`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`>`<br/>
-
+    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`NodePaging`](lib/content-services/document-list/models/document-library.model.ts)`>` - Details of the folder
+-   **getFolderNode**(nodeId: `string`, includeFields: `string[]` = `[]`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`>`<br/>
+    (**Deprecated:** 2.3.0 Gets a folder node via its node ID.) 
     -   _nodeId:_ `string`  - ID of the folder node
     -   _includeFields:_ `string[]`  - Extra information to include (available options are "aspectNames", "isLink" and "association")
     -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`>` - Details of the folder
-
--   **getMimeTypeIcon**(mimeType: `string` = `null`): `string`<br/>
+-   **getMimeTypeIcon**(mimeType: `string`): `string`<br/>
     Gets the icon that represents a MIME type.
     -   _mimeType:_ `string`  - MIME type to get the icon for
     -   **Returns** `string` - Path to the icon file
--   **getNode**(nodeId: `string` = `null`, includeFields: `string[]` = `[]`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`NodeEntry`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeEntry.md)`>`<br/>
+-   **getNode**(nodeId: `string`, includeFields: `string[]` = `[]`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`NodeEntry`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeEntry.md)`>`<br/>
     Gets a node via its node ID.
     -   _nodeId:_ `string`  - ID of the target node
     -   _includeFields:_ `string[]`  - Extra information to include (available options are "aspectNames", "isLink" and "association")
     -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`NodeEntry`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeEntry.md)`>` - Details of the folder
--   **hasPermission**(node: `any` = `null`, permission: [`PermissionsEnum`](../../lib/core/models/permissions.enum.ts)` | string` = `null`): `boolean`<br/>
-
+-   **hasPermission**(node: `any`, permission: [`PermissionsEnum`](lib/core/models/permissions.enum.ts)`|string`): `boolean`<br/>
+    (**Deprecated:** 2.3.0 use the one in the content service Checks if a node has the specified permission.) 
     -   _node:_ `any`  - Target node
-    -   _permission:_ [`PermissionsEnum`](../../lib/core/models/permissions.enum.ts)` | string`  - Permission level to query
+    -   _permission:_ [`PermissionsEnum`](lib/core/models/permissions.enum.ts)`|string`  - Permission level to query
     -   **Returns** `boolean` - True if the node has the permission, false otherwise
-
--   **moveNode**(nodeId: `string` = `null`, targetParentId: `string` = `null`): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
+-   **moveNode**(nodeId: `string`, targetParentId: `string`): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
     Moves a node to destination node.
     -   _nodeId:_ `string`  - The id of the node to be moved
     -   _targetParentId:_ `string`  - The id of the folder where the node will be moved

docs/content-services/dropdown-breadcrumb.component.md

@@ -24,24 +24,24 @@ Indicates the current position within a navigation hierarchy using a dropdown me
 ### Properties
 
 | 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 | [`MinimalNodeEntryEntity`](../content-services/document-library.model.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. |
+| 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. |
 | target | [`DocumentListComponent`](../content-services/document-list.component.md) |  | (optional) [Document List component](../content-services/document-list.component.md) to operate with. The list will update when the breadcrumb is clicked. |
-| transform | `function` |  | Transformation to be performed on the chosen/folder node before building the breadcrumb UI. Can be useful when custom formatting is needed for the breadcrumb. You can change the path elements from the node that are used to build the breadcrumb using this function. |
+| transform | `Function` |  | Transformation to be performed on the chosen/folder node before building the breadcrumb UI. Can be useful when custom formatting is needed for the breadcrumb. You can change the path elements from the node that are used to build the breadcrumb using this function. |
 
 ### Events
 
 | 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
 
 Although this component inherits the `maxItems` property from the [Breadcrumb component,](../content-services/breadcrumb.component.md) the
-"crumbs" are _always_ shown on a menu. By contrast, the Breadcrumb component only falls back
+"crumbs" are _always_ shown on a menu. By contrast, the [Breadcrumb component](../content-services/breadcrumb.component.md) only falls back
 to a menu when its maximum number of nodes is exceeded. 
 
 ## See also

docs/content-services/file-draggable.directive.md

@@ -38,16 +38,16 @@ Some sample CSS to show the drag and drop area:
 ### Properties
 
 | Name | Type | Default value | Description |
-| -- | -- | -- | -- |
-| file-draggable | `boolean` | true | Enables/disables drag-and-drop functionality. |
+| ---- | ---- | ------------- | ----------- |
+| enabled | `boolean` | true | Enables/disables drag-and-drop functionality. |
 
 ### Events
 
 | Name | Type | Description |
-| -- | -- | -- |
+| ---- | ---- | ----------- |
 | filesDropped | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<File[]>` | Emitted when one or more files are dragged and dropped onto the draggable element. |
-| filesEntityDropped | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | (**Deprecated:** in 2.4.0: use `filesDropped` instead. Emitted when one or more files are dragged and dropped onto the draggable element.)  |
-| folderEntityDropped | `EventEmitter<any>` | Emitted when a directory is dragged and dropped onto the draggable element. |
+| filesEntityDropped | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | (**Deprecated:** in 2.4.0: use `filesDropped` instead. Emitted when one or more files are dragged and dropped onto the draggable element.) |
+| folderEntityDropped | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when a directory is dragged and dropped onto the draggable element. |
 
 ## Details
 

docs/content-services/file-uploading-dialog.component.md

@@ -19,13 +19,13 @@ Shows a dialog listing all the files uploaded with the Upload Button or Drag Are
 ### Properties
 
 | Name | Type | Default value | Description |
-| -- | -- | -- | -- |
+| ---- | ---- | ------------- | ----------- |
 | position | `string` | "right" | Dialog position. Can be 'left' or 'right'. |
 
 ### Events
 
 | Name | Type | Description |
-| -- | -- | -- |
+| ---- | ---- | ----------- |
 | error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when a file in the list has an error. |
 
 ## Details

docs/content-services/folder-actions.service.md

@@ -12,18 +12,18 @@ Implements the folder menu actions for the [Document List component](../content-
 
 ### Methods
 
--   **canExecuteAction**(obj: `any` = `null`): `boolean`<br/>
+-   **canExecuteAction**(obj: `any`): `boolean`<br/>
     Checks if an action is available for a particular item.
     -   _obj:_ `any`  - Item to check
     -   **Returns** `boolean` - True if the action is available, false otherwise
--   **getHandler**(key: `string` = `null`): [`ContentActionHandler`](../../lib/content-services/document-list/models/content-action.model.ts)<br/>
+-   **getHandler**(key: `string`): `ContentActionHandler`<br/>
     Gets the handler function for an action.
     -   _key:_ `string`  - Identifier for the action
-    -   **Returns** [`ContentActionHandler`](../../lib/content-services/document-list/models/content-action.model.ts) - The handler function
--   **setHandler**(key: `string` = `null`, handler: [`ContentActionHandler`](../../lib/content-services/document-list/models/content-action.model.ts) = `null`): `boolean`<br/>
+    -   **Returns** `ContentActionHandler` - The handler function
+-   **setHandler**(key: `string`, handler: `ContentActionHandler`): `boolean`<br/>
     Sets a new handler function for an action.
     -   _key:_ `string`  - Identifier for the action
-    -   _handler:_ [`ContentActionHandler`](../../lib/content-services/document-list/models/content-action.model.ts)  - The new handler function
+    -   _handler:_ `ContentActionHandler`  - The new handler function
     -   **Returns** `boolean` - True if the key was a valid action identifier, false otherwise
 
 ## Details

docs/content-services/folder-create.directive.md

@@ -30,15 +30,15 @@ Creates folders.
 ### Properties
 
 | Name | Type | Default value | Description |
-| -- | -- | -- | -- |
+| ---- | ---- | ------------- | ----------- |
 | nodeType | `string` | "cm:folder" | Type of node to create. |
-| adf-create-folder | `string` |  DEFAULT_FOLDER_PARENT_ID | Parent folder where the new folder will be located after creation. |
-| title | `string` |  null | Title of folder creation dialog. |
+| parentNodeId | `string` |  | Parent folder where the new folder will be located after creation. |
+| title | `string` | null | Title of folder creation dialog. |
 
 ### Events
 
 | Name | Type | Description |
-| -- | -- | -- |
+| ---- | ---- | ----------- |
 | error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when an error occurs (eg, a folder with same name already exists). |
 | success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`>` | Emitted when the folder is created successfully. |
 

docs/content-services/folder-edit.directive.md

@@ -30,14 +30,14 @@ Allows folders to be edited.
 ### Properties
 
 | Name | Type | Default value | Description |
-| -- | -- | -- | -- |
-| adf-edit-folder | [`MinimalNodeEntryEntity`](../content-services/document-library.model.md) |  | Folder node to edit. |
-| title | `string` |  null | Title of folder edit dialog. |
+| ---- | ---- | ------------- | ----------- |
+| folder | [`MinimalNodeEntryEntity`](../content-services/document-library.model.md) |  | Folder node to edit. |
+| title | `string` | null | Title of folder edit dialog. |
 
 ### Events
 
 | Name | Type | Description |
-| -- | -- | -- |
+| ---- | ---- | ----------- |
 | error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when an error occurs (eg, a folder with same name already exists). |
 | success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`>` | Emitted when the folder has been edited successfully. |
 

docs/content-services/inherited-button.directive.md

@@ -29,7 +29,8 @@ Update the current node by adding/removing the inherited permissions.
 
 | Name | Type | Description |
 | ---- | ---- | ----------- |
-| updated | [`EventEmitter<MinimalNodeEntryEntity>`](../content-services/document-library.model.md) | Emitted when the node is updated |
+| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` |  |
+| updated | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`>` | Emitted when the node is updated |
 
 ## Details
 

docs/content-services/like.component.md

@@ -20,13 +20,13 @@ Allows a user to add "likes" to an item.
 ### Properties
 
 | Name | Type | Default value | Description |
-| -- | -- | -- | -- |
+| ---- | ---- | ------------- | ----------- |
 | nodeId | `string` |  | Identifier of a node to apply likes to. |
 
 ### Events
 
 | Name | Type | Description |
-| -- | -- | -- |
+| ---- | ---- | ----------- |
 | changeVote | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when the "vote" gets changed. |
 
 ## See also

docs/content-services/node-download.directive.md

@@ -28,5 +28,5 @@ Allows folders and/or files to be downloaded, with multiple nodes packed as a '.
 ### Properties
 
 | Name | Type | Default value | Description |
-| -- | -- | -- | -- |
-| adfNodeDownload | [`MinimalNodeEntity`](../content-services/document-library.model.md)`[]` |  | Nodes to download. |
+| ---- | ---- | ------------- | ----------- |
+| nodes | [`MinimalNodeEntity`](../content-services/document-library.model.md)`[]` |  | Nodes to download. |

docs/content-services/node-lock.directive.md

@@ -21,8 +21,8 @@ Locks a node.
 ### Properties
 
 | Name | Type | Default value | Description |
-| -- | -- | -- | -- |
-| adf-node-lock | [`MinimalNodeEntryEntity`](../content-services/document-library.model.md) |  | Node to lock/unlock. |
+| ---- | ---- | ------------- | ----------- |
+| node | [`MinimalNodeEntryEntity`](../content-services/document-library.model.md) |  | Node to lock/unlock. |
 
 ## Details
 

docs/content-services/node-permission-dialog.service.md

@@ -14,12 +14,12 @@ Displays dialogs to let the user set node permissions.
 
 -   **close**()<br/>
     Closes the currently-open dialog.
--   **openAddPermissionDialog**(nodeId: `string` = `null`, title?: `string` = `null`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`MinimalNodeEntity`](../content-services/document-library.model.md)`[]>`<br/>
+-   **openAddPermissionDialog**(node: `Node`, title?: `string`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`MinimalNodeEntity`](../content-services/document-library.model.md)`[]>`<br/>
     Opens a dialog to add permissions to a node.
-    -   _nodeId:_ `string`  - ID of the target node
+    -   _node:_ `Node`  - 
     -   _title:_ `string`  - (Optional) Dialog title
     -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`MinimalNodeEntity`](../content-services/document-library.model.md)`[]>` - Node with updated permissions
--   **updateNodePermissionByDialog**(nodeId?: `string` = `null`, title?: `string` = `null`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`>`<br/>
+-   **updateNodePermissionByDialog**(nodeId?: `string`, title?: `string`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`>`<br/>
     Opens a dialog to update permissions for a node.
     -   _nodeId:_ `string`  - (Optional) ID of the target node
     -   _title:_ `string`  - (Optional) Dialog title

docs/content-services/node-permission.service.md

@@ -12,35 +12,35 @@ Manages role permissions for content nodes.
 
 ### Methods
 
--   **getGroupMemeberByGroupName**(groupName: `string` = `null`, opts?: `any` = `null`): [`Observable`](http://reactivex.io/documentation/observable.html)`<GroupMemberPaging>`<br/>
+-   **getGroupMemeberByGroupName**(groupName: `string`, opts?: `any`): [`Observable`](http://reactivex.io/documentation/observable.html)`<GroupMemberPaging>`<br/>
     Gets all members related to a group name.
     -   _groupName:_ `string`  - Name of group to look for members
     -   _opts:_ `any`  - (Optional) Extra options supported by JSAPI
     -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<GroupMemberPaging>` - List of members
--   **getNodeRoles**(node: [`MinimalNodeEntryEntity`](../content-services/document-library.model.md) = `null`): [`Observable`](http://reactivex.io/documentation/observable.html)`<string[]>`<br/>
+-   **getNodeRoles**(node: [`MinimalNodeEntryEntity`](../content-services/document-library.model.md)): [`Observable`](http://reactivex.io/documentation/observable.html)`<string[]>`<br/>
     Gets a list of roles for the current node.
     -   _node:_ [`MinimalNodeEntryEntity`](../content-services/document-library.model.md)  - The target node
     -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<string[]>` - Array of strings representing the roles
--   **removePermission**(node: [`MinimalNodeEntryEntity`](../content-services/document-library.model.md) = `null`, permissionToRemove: `PermissionElement` = `null`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`>`<br/>
+-   **removePermission**(node: [`MinimalNodeEntryEntity`](../content-services/document-library.model.md), permissionToRemove: `PermissionElement`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`>`<br/>
 
     -   _node:_ [`MinimalNodeEntryEntity`](../content-services/document-library.model.md)  - 
     -   _permissionToRemove:_ `PermissionElement`  - 
     -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`>` - 
 
--   **updateLocallySetPermissions**(node: [`MinimalNodeEntryEntity`](../content-services/document-library.model.md) = `null`, nodes: [`MinimalNodeEntity`](../content-services/document-library.model.md)`[]` = `null`, nodeRole: `string[]` = `null`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`>`<br/>
+-   **updateLocallySetPermissions**(node: [`MinimalNodeEntryEntity`](../content-services/document-library.model.md), nodes: [`MinimalNodeEntity`](../content-services/document-library.model.md)`[]`, nodeRole: `string[]`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`>`<br/>
 
     -   _node:_ [`MinimalNodeEntryEntity`](../content-services/document-library.model.md)  - 
     -   _nodes:_ [`MinimalNodeEntity`](../content-services/document-library.model.md)`[]`  - 
     -   _nodeRole:_ `string[]`  - 
     -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`>` - 
 
--   **updateNodePermissions**(nodeId: `string` = `null`, permissionList: [`MinimalNodeEntity`](../content-services/document-library.model.md)`[]` = `null`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`>`<br/>
+-   **updateNodePermissions**(nodeId: `string`, permissionList: [`MinimalNodeEntity`](../content-services/document-library.model.md)`[]`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`>`<br/>
 
     -   _nodeId:_ `string`  - 
     -   _permissionList:_ [`MinimalNodeEntity`](../content-services/document-library.model.md)`[]`  - 
     -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`>` - 
 
--   **updatePermissionRole**(node: [`MinimalNodeEntryEntity`](../content-services/document-library.model.md) = `null`, updatedPermissionRole: `PermissionElement` = `null`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`>`<br/>
+-   **updatePermissionRole**(node: [`MinimalNodeEntryEntity`](../content-services/document-library.model.md), updatedPermissionRole: `PermissionElement`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`>`<br/>
     Updates the permission for a node.
     -   _node:_ [`MinimalNodeEntryEntity`](../content-services/document-library.model.md)  - Target node
     -   _updatedPermissionRole:_ `PermissionElement`  - Permission role to update or add

docs/content-services/node-share.directive.md

@@ -32,8 +32,8 @@ Creates and manages public shared links for files.
 
 | Name | Type | Default value | Description |
 | ---- | ---- | ------------- | ----------- |
-| node | [`MinimalNodeEntity`](../content-services/document-library.model.md) |  | Nodes to share. |
 | baseShareUrl | `string` |  | baseShareUrl to add as prefix to the generated link |
+| node | [`MinimalNodeEntity`](../content-services/document-library.model.md) |  | Node to share. |
 
 ## Details
 

docs/content-services/permission-list.component.md

@@ -33,13 +33,13 @@ or custom template can be added:
 ### Properties
 
 | Name | Type | Default value | Description |
-| -- | -- | -- | -- |
+| ---- | ---- | ------------- | ----------- |
 | nodeId | `string` | "" | ID of the node whose permissions you want to show. |
 
 ### Events
 
 | Name | Type | Description |
-| -- | -- | -- |
+| ---- | ---- | ----------- |
 | error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` |  |
 | update | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<PermissionElement>` | Emitted when the permission is updated. |
 

docs/content-services/rating.component.md

@@ -22,13 +22,13 @@ Allows a user to add ratings to an item.
 ### Properties
 
 | Name | Type | Default value | Description |
-| -- | -- | -- | -- |
+| ---- | ---- | ------------- | ----------- |
 | nodeId | `string` |  | Identifier of the node to apply the rating to. |
 
 ### Events
 
 | Name | Type | Description |
-| -- | -- | -- |
+| ---- | ---- | ----------- |
 | changeVote | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when the "vote" gets changed. |
 
 ## See also

docs/content-services/rating.service.md

@@ -12,17 +12,17 @@ Manages ratings for items in Content Services.
 
 ### Methods
 
--   **deleteRating**(nodeId: `string` = `null`, ratingType: `any` = `null`): `any`<br/>
+-   **deleteRating**(nodeId: `string`, ratingType: `any`): `any`<br/>
     Removes the current user's rating for a node.
     -   _nodeId:_ `string`  - Target node
     -   _ratingType:_ `any`  - Type of rating to remove (can be "likes" or "fiveStar")
     -   **Returns** `any` - Null response indicating that the operation is complete
--   **getRating**(nodeId: `string` = `null`, ratingType: `any` = `null`): `any`<br/>
+-   **getRating**(nodeId: `string`, ratingType: `any`): `any`<br/>
     Gets the current user's rating for a node.
     -   _nodeId:_ `string`  - Node to get the rating from
     -   _ratingType:_ `any`  - Type of rating (can be "likes" or "fiveStar")
     -   **Returns** `any` - The rating value
--   **postRating**(nodeId: `string` = `null`, ratingType: `any` = `null`, vote: `any` = `null`): `any`<br/>
+-   **postRating**(nodeId: `string`, ratingType: `any`, vote: `any`): `any`<br/>
     Adds the current user's rating for a node.
     -   _nodeId:_ `string`  - Target node for the rating
     -   _ratingType:_ `any`  - Type of rating (can be "likes" or "fiveStar")

docs/content-services/search-control.component.md

@@ -25,9 +25,9 @@ Displays a input text which shows find-as-you-type suggestions.
 ### Properties
 
 | Name | Type | Default value | Description |
-| -- | -- | -- | -- |
+| ---- | ---- | ------------- | ----------- |
 | autocomplete | `boolean` | false | Toggles auto-completion of the search input field. |
-| customQueryBody | `QueryBody` |  | (**Deprecated:** in 2.1.0)  |
+| customQueryBody | `QueryBody` |  | (**Deprecated:** in 2.1.0) |
 | expandable | `boolean` | true | Toggles whether to use an expanding search control. If false then a regular input is used. |
 | highlight | `boolean` | false | Toggles highlighting of the search term in the results. |
 | inputType | `string` | "text" | Type of the input field to render, e.g. "search" or "text" (default). |
@@ -37,10 +37,10 @@ Displays a input text which shows find-as-you-type suggestions.
 ### Events
 
 | Name | Type | Description |
-| -- | -- | -- |
+| ---- | ---- | ----------- |
 | optionClicked | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when a file item from the list of "find-as-you-type" results is selected. |
 | searchChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<string>` | Emitted when the search term is changed. The search term is provided in the 'value' property of the returned object.  If the term is less than three characters in length then the term is truncated to an empty string. |
-| submit | `EventEmitter<any>` | Emitted when the search is submitted pressing ENTER button. The search term is provided as value of the event. |
+| submit | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the search is submitted pressing ENTER button. The search term is provided as value of the event. |
 
 ## Details
 

docs/content-services/search-filter.component.md

@@ -11,16 +11,13 @@ Represents a main container component for custom search and faceted search setti
 ## Contents
 
 -   [Basic usage](#basic-usage)
-
 -   [Details](#details)
-
     -   [Configuration](#configuration)
     -   [Extra fields and filter queries](#extra-fields-and-filter-queries)
     -   [Sorting](#sorting)
     -   [Categories and widgets](#categories-and-widgets)
     -   [Facet Fields](#facet-fields)
     -   [Facet Queries](#facet-queries)
-
 -   [See also](#see-also)
 
 ## Basic usage
@@ -178,7 +175,7 @@ for further details.
 
 ### Categories and widgets
 
-The Search Settings component and Query Builder require a `categories` section in the
+The Search [Settings component](demo-shell/src/app/components/settings/settings.component.ts) and Query Builder require a `categories` section in the
 configuration.
 
 Categories are used to configure the UI widgets that let the user edit the search query

docs/content-services/search-query-builder.service.md

@@ -12,40 +12,41 @@ Stores information from all the custom search and faceted search widgets, compil
 
 ### Methods
 
--   **addFilterQuery**(query: `string` = `null`)<br/>
-    Adds a new filter query.
-    -   _query:_ `string`  - Text of the query to add
+-   **addFilterQuery**(query: `string`)<br/>
+
+    -   _query:_ `string`  - 
 
 -   **buildQuery**(): `QueryBody`<br/>
-    Builds a new query using the added elements.
-    -   **Returns** `QueryBody` - The resulting query
+
+    -   **Returns** `QueryBody` - 
 
 -   **execute**(): [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises)`<void>`<br/>
-    Executes the query.
-    -   **Returns** [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises)`<void>` - Notification of query completion
 
--   **getFacetField**(label: `string` = `null`): [`FacetField`](../../lib/content-services/search/facet-field.interface.ts)<br/>
-    Gets the details of a facet field.
-    -   _label:_ `string`  - Identifying label of the facet field
-    -   **Returns** [`FacetField`](../../lib/content-services/search/facet-field.interface.ts) - Facet field details
+    -   **Returns** [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises)`<void>` - 
 
--   **getFacetQuery**(label: `string` = `null`): [`FacetQuery`](../../lib/content-services/search/facet-query.interface.ts)<br/>
-    Gets the details of a facet query
-    -   _label:_ `string`  - Identifying label of the facet query
-    -   **Returns** [`FacetQuery`](../../lib/content-services/search/facet-query.interface.ts) - Details of the facet query
+-   **getFacetField**(label: `string`): `FacetField`<br/>
 
--   **getPrimarySorting**(): [`SearchSortingDefinition`](../../lib/content-services/search/search-sorting-definition.interface.ts)<br/>
+    -   _label:_ `string`  - 
+    -   **Returns** `FacetField` - 
+
+-   **getFacetQuery**(label: `string`): `FacetQuery`<br/>
+
+    -   _label:_ `string`  - 
+    -   **Returns** `FacetQuery` - 
+
+-   **getPrimarySorting**(): `SearchSortingDefinition`<br/>
     Returns primary sorting definition.
-    -   **Returns** [`SearchSortingDefinition`](../../lib/content-services/search/search-sorting-definition.interface.ts) - Sorting definition
--   **getSortingOptions**(): [`SearchSortingDefinition`](../../lib/content-services/search/search-sorting-definition.interface.ts)`[]`<br/>
+    -   **Returns** `SearchSortingDefinition` - 
+-   **getSortingOptions**(): `SearchSortingDefinition[]`<br/>
     Returns all pre-configured sorting options that users can choose from.
-    -   **Returns** [`SearchSortingDefinition`](../../lib/content-services/search/search-sorting-definition.interface.ts)`[]` - List of available sorting options
--   **removeFilterQuery**(query: `string` = `null`)<br/>
-    Removes a previously added filter query.
-    -   _query:_ `string`  - The query to remove
+    -   **Returns** `SearchSortingDefinition[]` - 
+-   **removeFilterQuery**(query: `string`)<br/>
+
+    -   _query:_ `string`  - 
+
+-   **resetToDefaults**()<br/>
 
 -   **update**()<br/>
-    Builds the query and notifies subscribers when complete.
 
 ## Details
 
@@ -81,5 +82,5 @@ constructor(queryBuilder: SearchQueryBuilderService) {
 
 ## See also
 
-- [Search filter component](search-filter.component.md)
-- [Search Widget interface](search-widget.interface.md)
+-   [Search filter component](search-filter.component.md)
+-   [Search Widget interface](search-widget.interface.md)

docs/content-services/search-widget.interface.md

@@ -11,16 +11,12 @@ Specifies required properties for [Search filter component](../content-services/
 ## Contents
 
 -   [Basic usage](#basic-usage)
-
     -   [Properties](#properties)
-
 -   [Details](#details)
-
     -   [Implementing a custom widget](#implementing-a-custom-widget)
     -   [Reading external settings](#reading-external-settings)
     -   [Updating the final query](#updating-the-final-query)
     -   [Registering a custom widget](#registering-a-custom-widget)
-
 -   [See also](#see-also)
 
 ## Basic usage
@@ -39,14 +35,14 @@ export interface SearchWidget {
 | ---- | ---- | ------------- | ----------- |
 | id | `string` |  | Unique identifying value for the widget |
 | settings | [`SearchWidgetSettings`](../../lib/content-services/search/search-widget-settings.interface.ts) |  | Settings for component properties |
-| context | [`SearchQueryBuilderService`](../content-services/search-query-builder.service.md) |  | Instance of the Search Query Builder service to process the query |
+| context | [`SearchQueryBuilderService`](../content-services/search-query-builder.service.md) |  | Instance of the [Search Query Builder service](../content-services/search-query-builder.service.md) to process the query |
 
 ## Details
 
 The [Search Filter component](../content-services/search-filter.component.md) uses widgets to provide the UI that lets the user customize the
 search. ADF provides a number of widgets out of the box (see the [See Also](#see-also) section
 for a full list) but you can also implement your own. Both built-in and custom widgets must
-implement the Search Widget interface to operate with the Search Filter component.
+implement the Search Widget interface to operate with the [Search Filter component](../content-services/search-filter.component.md).
 
 ### Implementing a custom widget
 

docs/content-services/search.component.md

@@ -11,18 +11,13 @@ Searches items for supplied search terms.
 ## Contents
 
 -   [Basic usage](#basic-usage)
-
 -   [Class members](#class-members)
-
     -   [Properties](#properties)
     -   [Events](#events)
-
 -   [Details](#details)
-
     -   [Customise Search Results](#customise-search-results)
     -   [Attach an input field to the search](#attach-an-input-field-to-the-search)
     -   [Custom search configuration](#custom-search-configuration)
-
 -   [See Also](#see-also)
 
 ## Basic usage
@@ -39,20 +34,19 @@ Searches items for supplied search terms.
 ### Properties
 
 | Name | Type | Default value | Description |
-| -- | -- | -- | -- |
-| displayWith | `function \| null` |  null | Function that maps an option's value to its display value in the trigger. |
+| ---- | ---- | ------------- | ----------- |
+| displayWith | `Function \| null` | null | Function that maps an option's value to its display value in the trigger. |
 | maxResults | `number` | 20 | Maximum number of results to show in the search. |
-| queryBody | `QueryBody` |  | (**Deprecated:** in 2.1.0)  |
+| queryBody | `QueryBody` |  | (**Deprecated:** in 2.1.0) |
 | searchTerm | `string` | "" | Search term to use when executing the search. Updating this value will run a new search and update the results. |
 | skipResults | `number` | 0 | Number of results to skip from the results pagination. |
-| class |  |  | CSS class for display. |
 
 ### Events
 
 | Name | Type | Description |
-| -- | -- | -- |
+| ---- | ---- | ----------- |
 | error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when an error occurs. |
-| resultLoaded | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodePaging`](../../lib/content-services/document-list/models/document-library.model.ts)`>` | Emitted when search results have fully loaded. |
+| resultLoaded | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodePaging`](lib/content-services/document-list/models/document-library.model.ts)`>` | Emitted when search results have fully loaded. |
 
 ## Details
 

docs/content-services/sites-dropdown.component.md

@@ -22,16 +22,16 @@ Displays a dropdown menu to show and interact with the sites of the current user
 
 ### Properties
 
-| Attribute | Type | Default | Description |
-| --------- | ---- | ------- | ----------- |
-| hideMyFiles | boolean | false | Hide the "My Files" option added to the list by default |
+| Name | Type | Default value | Description |
+| ---- | ---- | ------------- | ----------- |
+| hideMyFiles | `boolean` | false | Hide the "My Files" option. |
+| placeholder | `string` |  | Text or a translation key to act as a placeholder. Default value is the key "DROPDOWN.PLACEHOLDER_LABEL". |
+| relations | `string` |  | Filter for the results of the sites query. Possible values are "members" and "containers". When "members" is used, the site list will be restricted to the sites that the user is a member of. |
 | siteList | [`SitePaging`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/SitePaging.md) | null | A custom list of sites to be displayed by the dropdown. If no value is given, the sites of the current user are displayed by default. A list of objects only with properties 'title' and 'guid' is enough to be able to display the dropdown. |
-| placeholder | string | 'DROPDOWN.PLACEHOLDER_LABEL' | The placeholder text/the key from translation files for the placeholder text to be shown by default |
-| value | string | null | Id of the select site |
-| relations | string | null | A custom list of sites to be displayed by the dropdown. If no value is given, the sites of the current user are displayed by default. A list of objects only with properties 'title' and 'guid' is enough to be able to display the dropdown. |
+| value | `string` | null | Id of the selected site |
 
 ### Events
 
-| Name | Returned Type | Description |
-| ---- | ------------- | ----------- |
-| change | [SiteModel](../core/site.model.md) | Emitted when user selects a site. When default option is selected an empty model is emitted |
+| Name | Type | Description |
+| ---- | ---- | ----------- |
+| change | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`SiteEntry`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/SiteEntry.md)`>` | Emitted when the user selects a site. When the default option is selected, an empty model is emitted. |

docs/content-services/tag-actions.component.md

@@ -22,13 +22,13 @@ Shows available actions for tags.
 ### Properties
 
 | Name | Type | Default value | Description |
-| -- | -- | -- | -- |
+| ---- | ---- | ------------- | ----------- |
 | nodeId | `string` |  | The identifier of a node. |
 
 ### Events
 
 | Name | Type | Description |
-| -- | -- | -- |
+| ---- | ---- | ----------- |
 | error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when an error occurs. |
 | result | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when an action is chosen. |
-| successAdd | `EventEmitter<any>` | Emitted when a tag is added successfully. |
+| successAdd | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when a tag is added successfully. |

docs/content-services/tag-list.component.md

@@ -14,7 +14,7 @@ Shows tags for an item.
 ### Events
 
 | Name | Type | Description |
-| -- | -- | -- |
+| ---- | ---- | ----------- |
 | result | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when a tag is selected. |
 
 ## See Also

docs/content-services/tag-node-list.component.md

@@ -22,11 +22,11 @@ Shows tags for a node.
 ### Properties
 
 | Name | Type | Default value | Description |
-| -- | -- | -- | -- |
+| ---- | ---- | ------------- | ----------- |
 | nodeId | `string` |  | The identifier of a node. |
 
 ### Events
 
 | Name | Type | Description |
-| -- | -- | -- |
+| ---- | ---- | ----------- |
 | results | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when a tag is selected. |

docs/content-services/tag.service.md

@@ -12,7 +12,7 @@ Manages tags in Content Services.
 
 ### Methods
 
--   **addTag**(nodeId: `string` = `null`, tagName: `string` = `null`): `any`<br/>
+-   **addTag**(nodeId: `string`, tagName: `string`): `any`<br/>
     Adds a tag to a node.
     -   _nodeId:_ `string`  - ID of the target node
     -   _tagName:_ `string`  - Name of the tag to add
@@ -20,11 +20,11 @@ Manages tags in Content Services.
 -   **getAllTheTags**(): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
     Gets a list of all the tags already defined in the repository.
     -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<any>` - TagPaging object (defined in JSAPI) containing the tags
--   **getTagsByNodeId**(nodeId: `string` = `null`): `any`<br/>
+-   **getTagsByNodeId**(nodeId: `string`): `any`<br/>
     Gets a list of tags added to a node.
     -   _nodeId:_ `string`  - ID of the target node
     -   **Returns** `any` - TagPaging object (defined in JSAPI) containing the tags
--   **removeTag**(nodeId: `string` = `null`, tag: `string` = `null`): `any`<br/>
+-   **removeTag**(nodeId: `string`, tag: `string`): `any`<br/>
     Removes a tag from a node.
     -   _nodeId:_ `string`  - ID of the target node
     -   _tag:_ `string`  - Name of the tag to remove

docs/content-services/upload-button.component.md

@@ -27,7 +27,7 @@ Activates a file upload.
 ### Properties
 
 | Name | Type | Default value | Description |
-| -- | -- | -- | -- |
+| ---- | ---- | ------------- | ----------- |
 | acceptedFilesType | `string` | "\*" | Filter for accepted file types. |
 | comment | `string` |  | When you overwrite existing content, you can use the comment field to add a version comment that appears in the version history |
 | disabled | `boolean` | false | Toggles component disabled state (if there is no node permission checking). |
@@ -37,19 +37,19 @@ Activates a file upload.
 | nodeType | `string` | "cm:content" | Custom node type for uploaded file |
 | rootFolderId | `string` | "-root-" | The ID of the root. Use the nodeId for Content Services or the taskId/processId for Process Services. |
 | staticTitle | `string` |  | Defines the text of the upload button. |
-| tooltip | `string` |  null | Custom tooltip text. |
+| tooltip | `string` | null | Custom tooltip text. |
 | uploadFolders | `boolean` | false | Allows/disallows upload folders (only for Chrome). |
 | versioning | `boolean` | false | Toggles versioning. |
 
 ### Events
 
 | Name | Type | Description |
-| -- | -- | -- |
-| beginUpload | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`UploadFilesEvent`](../../lib/content-services/upload/components/upload-files.event.ts)`>` |  |
+| ---- | ---- | ----------- |
+| beginUpload | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`UploadFilesEvent`](lib/content-services/upload/components/upload-files.event.ts)`>` |  |
 | createFolder | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when a folder is created. |
 | error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when an error occurs. |
-| permissionEvent | `EventEmitter<PermissionModel>` | Emitted when create permission is missing. |
-| success | `EventEmitter<Object>` | Emitted when the file is uploaded successfully. |
+| permissionEvent | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`PermissionModel`](lib/content-services/document-list/models/permissions.model.ts)`>` | Emitted when create permission is missing. |
+| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when the file is uploaded successfully. |
 
 ## Details
 

docs/content-services/upload-drag-area.component.md

@@ -34,7 +34,7 @@ export class AppComponent {
 ### Properties
 
 | Name | Type | Default value | Description |
-| -- | -- | -- | -- |
+| ---- | ---- | ------------- | ----------- |
 | acceptedFilesType | `string` | "\*" | Filter for accepted file types. |
 | comment | `string` |  | When you overwrite existing content, you can use the comment field to add a version comment that appears in the version history |
 | disabled | `boolean` | false | Toggles component disabled state (if there is no node permission checking). |
@@ -43,22 +43,21 @@ export class AppComponent {
 | nodeType | `string` | "cm:content" | Custom node type for uploaded file |
 | rootFolderId | `string` | "-root-" | The ID of the root. Use the nodeId for Content Services or the taskId/processId for Process Services. |
 | versioning | `boolean` | false | Toggles versioning. |
-| parentId |  |  | **Deprecated:** 2.4.0  use rootFolderId ID of parent folder node. |
 
 ### Events
 
 | Name | Type | Description |
-| -- | -- | -- |
-| beginUpload | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`UploadFilesEvent`](../../lib/content-services/upload/components/upload-files.event.ts)`>` | Raised after files or folders dropped and before the upload process starts. |
+| ---- | ---- | ----------- |
+| beginUpload | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`UploadFilesEvent`](lib/content-services/upload/components/upload-files.event.ts)`>` | Raised after files or folders dropped and before the upload process starts. |
 | createFolder | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when a folder is created. |
-| error | `EventEmitter<Object>` | Emitted when an error occurs. |
-| success | `EventEmitter<Object>` | Emitted when the file is uploaded successfully. |
+| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when an error occurs. |
+| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when the file is uploaded successfully. |
 
 ## Intercepting uploads
 
 You can intercept the upload process by utilizing the `beginUpload` event. 
 
-The event has a type of [`UploadFilesEvent`](../../lib/content-services/upload/components/upload-files.event.ts) and provides the following APIs:
+The event has a type of [`UploadFilesEvent`](lib/content-services/upload/components/upload-files.event.ts) and provides the following APIs:
 
 -   **files**: get access to the [`FileInfo`](../../lib/core/utils/file-utils.ts) objects that are prepared for the upload
 -   **pauseUpload**: pause the upload and perform additional tasks, like showing the confirmation dialog

docs/content-services/upload-version-button.component.md

@@ -24,17 +24,12 @@ to enrich the features and decrease the restrictions currently applied to node v
 </adf-upload-version-button>
 ```
 
-This component extends the [Upload Button component](upload-button.component.md). The
-properties and events are the same except for the `node` property that specifies the node
-to be versioned (this is a _required_ input parameter). However, some properties don't make
-sense when applied to the [Upload Version Button component,](../content-services/upload-version-button.component.md) so they are simply ignored.
-
 ## Class members
 
 ### Properties
 
 | Name | Type | Default value | Description |
-| -- | -- | -- | -- |
+| ---- | ---- | ------------- | ----------- |
 | acceptedFilesType | `string` | "\*" | Filter for accepted file types. |
 | comment | `string` |  | When you overwrite existing content, you can use the comment field to add a version comment that appears in the version history |
 | disabled | `boolean` | false | Toggles component disabled state (if there is no node permission checking). |
@@ -45,35 +40,26 @@ sense when applied to the [Upload Version Button component,](../content-services
 | nodeType | `string` | "cm:content" | Custom node type for uploaded file |
 | rootFolderId | `string` | "-root-" | The ID of the root. Use the nodeId for Content Services or the taskId/processId for Process Services. |
 | staticTitle | `string` |  | Defines the text of the upload button. |
-| tooltip | `string` |  null | Custom tooltip text. |
+| tooltip | `string` | null | Custom tooltip text. |
 | uploadFolders | `boolean` | false | Allows/disallows upload folders (only for Chrome). |
 | versioning | `boolean` | false | Toggles versioning. |
 
 ### Events
 
 | Name | Type | Description |
-| -- | -- | -- |
-| beginUpload | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`UploadFilesEvent`](../../lib/content-services/upload/components/upload-files.event.ts)`>` |  |
+| ---- | ---- | ----------- |
+| beginUpload | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`UploadFilesEvent`](lib/content-services/upload/components/upload-files.event.ts)`>` |  |
 | createFolder | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when a folder is created. |
 | error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when an error occurs. |
-| permissionEvent | `EventEmitter<PermissionModel>` | Emitted when create permission is missing. |
-| success | `EventEmitter<Object>` | Emitted when the file is uploaded successfully. |
+| permissionEvent | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`PermissionModel`](lib/content-services/document-list/models/permissions.model.ts)`>` | Emitted when create permission is missing. |
+| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when the file is uploaded successfully. |
 
 ## Details
 
-### Restrictions
-
-Currently, the API only allows new version uploads for a node where the name
-(and most importantly the _extension_) of the new version
-is exactly the same as the old version. As a result, this workaround component uploads the
-chosen file with the same name that the original file had. This is the reason why the `node`
-is a mandatory dependency for this component.
-
-So, to sum up, this component:
-
--   **Can** upload a new version from the same file extension regardless of the file name.
--   **Cannot** upload a new version that has a different file extension, to the file that was
-    originally uploaded (an error message will be emitted by the `error` [`EventEmitter`](https://angular.io/api/core/EventEmitter) of the component.
+This component extends the [Upload Button component](upload-button.component.md). The
+properties and events are the same except for the `node` property that specifies the node
+to be versioned (this is a _required_ input parameter). However, some properties don't make
+sense when applied to the [Upload Version Button component,](../content-services/upload-version-button.component.md) so they are simply ignored.
 
 ## See also
 

docs/content-services/version-list.component.md

@@ -19,13 +19,20 @@ Displays the version history of a node in a [Version Manager component](../conte
 ### Properties
 
 | Name | Type | Default value | Description |
-| -- | -- | -- | -- |
+| ---- | ---- | ------------- | ----------- |
 | allowDownload | `boolean` | true | Enable/disable downloading a version of the current node. |
-| id | `string` |  | (**Deprecated:** in 2.3.0)  |
+| id | `string` |  | (**Deprecated:** in 2.3.0) |
 | node | [`MinimalNodeEntryEntity`](../content-services/document-library.model.md) |  | The target node. |
 | showActions | `boolean` | true | Toggles showing/hiding of version actions |
 | showComments | `boolean` | true | Toggles showing/hiding of comments |
 
+### Events
+
+| Name | Type | Description |
+| ---- | ---- | ----------- |
+| deleted | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`>` | Emitted when a version is deleted |
+| restored | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`>` | Emitted when a version is restored |
+
 ## Details
 
 This component is used by the [Version Manager component](../content-services/version-manager.component.md) to

docs/content-services/version-manager.component.md

@@ -27,7 +27,7 @@ Displays the version history of a node with the ability to upload a new version.
 ### Properties
 
 | Name | Type | Default value | Description |
-| -- | -- | -- | -- |
+| ---- | ---- | ------------- | ----------- |
 | allowDownload | `boolean` | true | Enable/disable downloading a version of the current node. |
 | node | [`MinimalNodeEntryEntity`](../content-services/document-library.model.md) |  | Target node to manage version history. |
 | showComments | `boolean` | true | Toggles showing/hiding of comments. |
@@ -35,9 +35,9 @@ Displays the version history of a node with the ability to upload a new version.
 ### Events
 
 | Name | Type | Description |
-| -- | -- | -- |
-| uploadError | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when an error occurs during upload. |
-| uploadSuccess | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when a file is uploaded successfully. |
+| ---- | ---- | ----------- |
+| uploadError | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`>` | Emitted when an error occurs during upload. |
+| uploadSuccess | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`MinimalNodeEntryEntity`](../content-services/document-library.model.md)`>` | Emitted when a file is uploaded successfully. |
 
 ## Details
 

docs/content-services/webscript.component.md

@@ -10,14 +10,10 @@ Provides access to Webscript features.
 ## Contents
 
 -   [Basic usage](#basic-usage)
-
 -   [Class members](#class-members)
-
     -   [Properties](#properties)
     -   [Events](#events)
-
 -   [Details](#details)
-
     -   [Webscript View HTML example](#webscript-view-html-example)
     -   [Webscript View DATATABLE example](#webscript-view-datatable-example)
     -   [Webscript View JSON example](#webscript-view-json-example)
@@ -38,7 +34,7 @@ Provides access to Webscript features.
 
 Another example:
 
-**app.component.html**
+**[app.component](demo-shell/src/app/app.component.ts).html**
 
 ```html
 <adf-webscript-get 
@@ -50,7 +46,7 @@ Another example:
 </adf-webscript-get>
 ```
 
-**app.component.ts**
+**[app.component](demo-shell/src/app/app.component.ts).ts**
 
 ```ts
 export class AppComponent {
@@ -65,7 +61,7 @@ export class AppComponent {
 ### Properties
 
 | Name | Type | Default value | Description |
-| -- | -- | -- | -- |
+| ---- | ---- | ------------- | ----------- |
 | contentType | `string` | "TEXT" | Content type to interpret the data received from the webscript. Can be "JSON" , "HTML" , "DATATABLE" or "TEXT" |
 | contextRoot | `string` | "alfresco" | Path where the application is deployed |
 | scriptArgs | `any` |  | Arguments to pass to the webscript. |
@@ -76,7 +72,7 @@ export class AppComponent {
 ### Events
 
 | Name | Type | Description |
-| -- | -- | -- |
+| ---- | ---- | ----------- |
 | success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when the operation succeeds. You can get the plain data from the webscript through the **success** event parameter and use it as you need in your application. |
 
 ## Details

docs/core/card-view.component.md

@@ -74,6 +74,17 @@ Defining properties from Typescript:
         key: 'mental-stability',
         default: 0.0
     }),
+    new CardViewKeyValuePairsItemModel({
+        label: 'Variables',
+        value: [],
+        key: 'key-value-pairs'
+    }),
+    new CardViewSelectItemModel({
+        label: 'Select box',
+        value: 'one',
+        options$: of([{ key: 'one', label: 'One' }, { key: 'two', label: 'Two' }]),
+        key: 'select'
+    }),
     ...
 ]
 ```
@@ -99,6 +110,8 @@ You define the property list, the [`CardViewComponent`](../core/card-view.compon
 -   [**CardViewBoolItemModel**](#card-bool-item) - _for bool items (checkbox)_
 -   [**CardViewIntItemModel**](#card-int-item) - _for integer items_
 -   [**CardViewFloatItemModel**](#card-float-item) - _for float items_
+-   [**CardViewKeyValuePairsItemModel**](#card-key-values-pairs-item) - _for key-value-pairs items_
+-   [**CardViewSelectItemModel**](#card-select-item) - _for select items_
 
 Each of these types implements the [Card View Item interface](card-view-item.interface.md):
 
@@ -287,6 +300,40 @@ const floatItemProperty = new CardViewFloatItemModel(options);
 | displayValue\* | float |  | The value to display |
 | editable | boolean | false | Toggles whether the item is editable |
 
+#### Card Key Value Pairs Item
+
+[`CardViewKeyValuePairsItemModel`](../../lib/core/card-view/models/card-view-keyvaluepairs.model.ts) is a property type for key-value properties.
+
+```ts
+const keyValuePairsItemProperty = new CardViewKeyValuePairsItemModel(options);
+```
+
+| Name | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| label\* | string |  | Item label |
+| key\* | string |  | Identifying key (important when editing the item) |
+| editable | boolean | false | Toggles whether the item is editable |
+| value\* | `[{ name: '', value: '' }, ...]` |  | The original data value for the item |
+
+
+#### Card Select Item
+
+[`CardViewSelectItemModel`](../../lib/core/card-view/models/card-view-selectitem.model.ts) is a property type for select properties.
+
+```ts
+const selectItemProperty = new CardViewSelectItemModel(options);
+```
+
+| Name | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| label\* | string |  | Item label |
+| key\* | string |  | Identifying key (important when editing the item) |
+| editable | boolean | false | Toggles whether the item is editable |
+| value | string |  | The original data value for the item |
+| options$\* | Observable<CardViewSelectItemOption[]> |  | The original data value for the item |
+
+
+
 ## See also
 
 -   [Card View Update service](card-view-update.service.md)

docs/core/empty-content.component.md

@@ -20,7 +20,7 @@ Provides a generic "Empty Content" placeholder for components.
                 icon="star_rate"
                 title="APP.BROWSE.FAVORITES.EMPTY_STATE.TITLE"
                 subtitle="APP.BROWSE.FAVORITES.EMPTY_STATE.TEXT">
-            </adf-empty-folder>
+            </adf-empty-content>
         </ng-template>
     </empty-folder-content>
 </adf-document-list>
@@ -48,7 +48,7 @@ Provides a generic "Empty Content" placeholder for components.
                 icon="star_rate"
                 title="APP.BROWSE.FAVORITES.EMPTY_STATE.TITLE"
                 subtitle="APP.BROWSE.FAVORITES.EMPTY_STATE.TEXT">
-            </adf-empty-folder>
+            </adf-empty-content>
         </ng-template>
     </empty-folder-content>
 </adf-document-list>