diff --git a/.travis.yml b/.travis.yml
index 9ded3af2a3..a3e5f89fbd 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,12 +1,16 @@
 language: node_js
 dist: trusty
-sudo: false
+sudo: required
 node_js:
   - "8"
 
+addons:
+    chrome: stable
+
 before_install:
-  - "export DISPLAY=:99.0"
-  - "sh -e /etc/init.d/xvfb start"
+    - export CHROME_BIN=chromium-browser
+    - export DISPLAY=:99.0
+    - sh -e /etc/init.d/xvfb start
 
 env:
   matrix:
@@ -15,6 +19,7 @@ env:
     - MODULE=process-services
     - MODULE=content-services
     - MODULE=demo-shell
+    - MODULE=packaging
 
 install:
     - if ([ "$MODULE" != "demo-shell" ]); then
@@ -27,7 +32,7 @@ install:
 
 script:
     - if ([ "$MODULE" == "core" ]); then
-            (./scripts/npm-build-all.sh -si -sb -t "core*" || exit 1;);
+            (./scripts/npm-build-all.sh -si -sb -t "core" || exit 1;);
       fi
 
     - if ([ "$MODULE" == "process-services" ]); then
@@ -42,6 +47,10 @@ script:
             (./scripts/npm-build-all.sh -si -sb -t "content-services" || exit 1;);
       fi
 
+    - if ([ "$MODULE" == "packaging" ]); then
+            (cd lib && npm run new-build || exit 1;);
+      fi
+
     - if ([ "$MODULE" == "demo-shell" ]); then
        if ([ "$TRAVIS_BRANCH" = "master" ]); then
             (./scripts/start.sh -t -ss || exit 1;);
@@ -80,7 +89,5 @@ after_success:
 
 cache:
   directories:
-  - ./node_modules/material-design-lite
-  - ./node_modules/material-design-icons
   - demo-shell/node_modules
   - lib/node_modules
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000000..474eb72d44
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,6 @@
+FROM nginx
+
+COPY demo-shell/nginx.conf /etc/nginx/nginx.conf
+
+WORKDIR /usr/share/nginx/html
+COPY demo-shell/dist/ .
diff --git a/assets/ps-example-apps/example_start_process_attach_file.zip b/assets/ps-example-apps/example_start_process_attach_file.zip
new file mode 100644
index 0000000000..c827929b05
Binary files /dev/null and b/assets/ps-example-apps/example_start_process_attach_file.zip differ
diff --git a/demo-shell/.gitignore b/demo-shell/.gitignore
index a17031c0d5..62713789e8 100644
--- a/demo-shell/.gitignore
+++ b/demo-shell/.gitignore
@@ -57,7 +57,3 @@ app/**/*.d.ts
 
 dist/
 coverage/
-
-# docker files
-docker-compose.yml
-Dockerfile
diff --git a/demo-shell/nginx.conf b/demo-shell/nginx.conf
new file mode 100644
index 0000000000..ea9434b3de
--- /dev/null
+++ b/demo-shell/nginx.conf
@@ -0,0 +1,25 @@
+worker_processes  1;
+
+events {
+    worker_connections  1024;
+}
+
+http {
+    server {
+        listen 80;
+        server_name  localhost;
+
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+        include /etc/nginx/mime.types;
+
+        gzip on;
+        gzip_min_length 1000;
+        gzip_proxied expired no-cache no-store private auth;
+        gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
+
+        location / {
+            try_files $uri $uri/ /index.html;
+        }
+    }
+}
diff --git a/demo-shell/package.json b/demo-shell/package.json
index 02abfb46cf..e4e2b10b85 100644
--- a/demo-shell/package.json
+++ b/demo-shell/package.json
@@ -1,17 +1,17 @@
 {
   "name": "Alfresco-ADF-Angular-Demo",
   "description": "Demo shell for Alfresco Angular components",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "ng": "ng",
     "start": "npm run server-versions && rimraf dist && ng serve --host 0.0.0.0 --app dist --open --aot=false",
-    "start:dev": "npm run lint && npm run style:dev & npm run clean-lib-angular && npm run server-versions && rimraf dist && ng serve --host 0.0.0.0 --disable-host-check --app dev pp-dev --proxy-config proxy.conf.js --open",
+    "start:dev": "npm run lint && npm run server-versions && rimraf dist && npm run clean-lib-angular && concurrently \"ng serve --host 0.0.0.0 --disable-host-check --app dev pp-dev --proxy-config proxy.conf.js --open\" \"npm run style:dev -- --watch\" ",
     "start:dist": "npm run server-versions && rimraf dist && node --max_old_space_size=30000 node_modules/.bin/ng serve --prod --build-optimizer=false  --aot=false --host 0.0.0.0 --disable-host-check --app dist",
     "build": "npm run server-versions && rimraf dist && ng build  --app dist",
-    "build:dev": "npm run lint && npm run style:dev & npm run server-versions && rimraf dist && ng build --app dev",
-    "build:dist": "npm run style:dev & npm run server-versions && rimraf dist && node --max_old_space_size=30000 node_modules/.bin/ng build --prod  --build-optimizer=false  --aot=false --app dist",
-    "style:dev": "npm run webpack -- --config  config/webpack.style.js --progress --profile --bail --watch",
+    "build:dev": "npm run lint && npm run style:dev && npm run server-versions && rimraf dist && ng build --app dev",
+    "build:dist": "npm run style:dev && npm run server-versions && rimraf dist && node --max_old_space_size=30000 node_modules/.bin/ng build --prod  --build-optimizer=false  --aot=false --app dist",
+    "style:dev": "npm run webpack -- --config  config/webpack.style.js --progress --profile --bail",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
@@ -60,24 +60,26 @@
   ],
   "private": true,
   "dependencies": {
-    "@angular/animations": "5.0.0",
-    "@angular/cdk": "5.0.0-rc0",
-    "@angular/common": "5.0.0",
-    "@angular/compiler": "5.0.0",
-    "@angular/core": "5.0.0",
-    "@angular/flex-layout": "2.0.0-beta.10",
-    "@angular/forms": "5.0.0",
-    "@angular/http": "5.0.0",
-    "@angular/material": "5.0.0-rc0",
-    "@angular/platform-browser": "5.0.0",
-    "@angular/platform-browser-dynamic": "5.0.0",
-    "@angular/router": "5.0.0",
+    "@alfresco/adf-content-services": "2.1.0",
+    "@alfresco/adf-core": "2.1.0",
+    "@alfresco/adf-insights": "2.1.0",
+    "@alfresco/adf-process-services": "2.1.0",
+    "@angular/animations": "5.1.1",
+    "@angular/cdk": "5.0.1",
+    "@angular/common": "5.1.1",
+    "@angular/compiler": "5.1.1",
+    "@angular/core": "5.1.1",
+    "@angular/flex-layout": "2.0.0-beta.12",
+    "@angular/forms": "5.1.1",
+    "@angular/http": "5.1.1",
+    "@angular/material": "5.0.1",
+    "@angular/platform-browser": "5.1.1",
+    "@angular/platform-browser-dynamic": "5.1.1",
+    "@angular/router": "5.1.1",
+    "@mat-datetimepicker/core": "^1.0.1",
+    "@mat-datetimepicker/moment": "^1.0.1",
     "@ngx-translate/core": "8.0.0",
-    "alfresco-js-api": "2.0.0",
-    "@alfresco/adf-content-services": "2.0.0",
-    "@alfresco/adf-process-services": "2.0.0",
-    "@alfresco/adf-core": "2.0.0",
-    "@alfresco/adf-insights": "2.0.1",
+    "alfresco-js-api": "2.1.0",
     "chart.js": "2.5.0",
     "classlist.js": "1.1.20150312",
     "core-js": "2.4.1",
@@ -96,13 +98,15 @@
     "zone.js": "0.8.14"
   },
   "devDependencies": {
+    "@angular-devkit/core": "0.0.28",
     "@angular/cli": "1.5.0",
-    "@angular/compiler-cli": "^5.0.0",
-    "@angular/language-service": "^5.0.0",
+    "@angular/compiler-cli": "5.1.1",
+    "@angular/language-service": "5.1.1",
     "@types/jasmine": "~2.5.53",
     "@types/jasminewd2": "~2.0.2",
     "@types/node": "~6.0.60",
     "codelyzer": "4.0.0",
+    "concurrently": "^3.5.1",
     "jasmine-core": "~2.6.2",
     "jasmine-spec-reporter": "~4.1.0",
     "karma": "~1.7.0",
@@ -115,6 +119,6 @@
     "rimraf": "^2.6.2",
     "ts-node": "~3.2.0",
     "tslint": "^5.7.0",
-    "typescript": "~2.4.2"
+    "typescript": "2.6.2"
   }
 }
diff --git a/demo-shell/resources/i18n/de.json b/demo-shell/resources/i18n/de.json
index a3e0f3e60e..90ff9ade50 100644
--- a/demo-shell/resources/i18n/de.json
+++ b/demo-shell/resources/i18n/de.json
@@ -3,7 +3,11 @@
   "VERSION": {
     "NO_PERMISSION": "Sie verfügen nicht über die nötige Berechtigung, um Versionen dieses Inhalts zu verwalten",
     "NO_PERMISSION_EVENT": "Sie verfügen nicht über die nötige Berechtigung ('${event.permission}'), um ${event.action} zu ${event.type}",
-    "CHOOSE_FILE": "Wählen Sie eine Datei aus, um ihre Versionen anzuzeigen"
+    "CHOOSE_FILE": "Wählen Sie eine Datei aus, um ihre Versionen anzuzeigen",
+    "DIALOG": {
+      "CLOSE": "Schließen",
+      "TITLE": "Versionen verwalten"
+    }
   },
   "APP_LAYOUT": {
     "APP_NAME": "ADF-Demoanwendung",
@@ -20,6 +24,7 @@
     "TAG": "Tag",
     "SOCIAL": "Soziale Funktionen",
     "SETTINGS": "Einstellungen",
+    "OVERLAY_VIEWER": "Overlay-Viewer",
     "ABOUT": "Info"
   },
   "DOCUMENT_LIST": {
@@ -30,6 +35,7 @@
     "MAX_SIZE": "Filter für max. Größe",
     "ENABLE_VERSIONING": "Versionsverwaltung aktivieren",
     "DESCRIPTION_UPLOAD": "Hochladen aktivieren",
+    "ENABLE_INFINITE_SCROLL": "Unendlich Scrollen aktivieren",
     "MULTISELECT_DESCRIPTION": "Mit der Befehls- (Mac) oder der Steuerungstaste (Windows) können Sie die Auswahl mehrerer Elemente umschalten",
     "COLUMNS": {
       "DISPLAY_NAME": "Namen anzeigen",
@@ -48,7 +54,8 @@
         "DOWNLOAD": "Herunterladen",
         "COPY": "Kopieren",
         "MOVE": "Verschieben",
-        "DELETE": "Löschen"
+        "DELETE": "Löschen",
+        "PROCESS_ACTION": "Prozess starten"
       }
     }
   },
@@ -70,7 +77,8 @@
     "REPORTS-TAB": "Berichte",
     "START-TASK": "Aufgabe starten",
     "START-PROCESS": "Prozess starten",
-    "AUDIT-LOG": "Audit-Protokoll verarbeiten"
+    "PROCESS-AUDIT-LOG": "Prozess-Audit-Protokoll",
+    "TASK-AUDIT-LOG": "Aufgaben-Audit-Protokoll"
   },
   "FORM-LIST": {
     "STORE": "Speichern",
@@ -82,7 +90,8 @@
     "LOGIN_FOOTER": "Login-Fußzeile"
   },
   "SEARCH": {
-    "RESULTS": "Ergebnisse durchsuchen"
+    "RESULTS": "Ergebnisse durchsuchen",
+    "NO_RESULT": "Keine Ergebnisse gefunden"
   },
   "SOCIAL": {
     "LIKE": "Like-Komponente",
diff --git a/demo-shell/resources/i18n/en.json b/demo-shell/resources/i18n/en.json
index 51c4e15f77..e232a358c6 100644
--- a/demo-shell/resources/i18n/en.json
+++ b/demo-shell/resources/i18n/en.json
@@ -3,7 +3,11 @@
     "VERSION": {
       "NO_PERMISSION": "You don't have permission to manage versions of this content",
       "NO_PERMISSION_EVENT": "You don't have ${event.permission} permission to ${event.action} the ${event.type}",
-      "CHOOSE_FILE": "Select a file to see its versions"
+      "CHOOSE_FILE": "Select a file to see its versions",
+      "DIALOG": {
+        "CLOSE": "Close",
+        "TITLE": "Manage Versions"
+      }
     },
     "APP_LAYOUT": {
         "APP_NAME": "ADF Demo Application",
@@ -50,7 +54,8 @@
                 "DOWNLOAD": "Download",
                 "COPY": "Copy",
                 "MOVE": "Move",
-                "DELETE": "Delete"
+                "DELETE": "Delete",
+                "PROCESS_ACTION": "Start Process"
             }
         }
     },
diff --git a/demo-shell/resources/i18n/es.json b/demo-shell/resources/i18n/es.json
index 1c38b54cc6..f4fd01fa82 100644
--- a/demo-shell/resources/i18n/es.json
+++ b/demo-shell/resources/i18n/es.json
@@ -3,7 +3,11 @@
   "VERSION": {
     "NO_PERMISSION": "No tiene permiso para administrar versiones de este contenido",
     "NO_PERMISSION_EVENT": "No tiene permiso ${event.permission} para ${event.action} el ${event.type}",
-    "CHOOSE_FILE": "Seleccione un fichero para ver sus versiones"
+    "CHOOSE_FILE": "Seleccione un fichero para ver sus versiones",
+    "DIALOG": {
+      "CLOSE": "Cerrar",
+      "TITLE": "Gestionar versiones"
+    }
   },
   "APP_LAYOUT": {
     "APP_NAME": "Aplicación ADF Demo",
@@ -20,6 +24,7 @@
     "TAG": "Etiqueta",
     "SOCIAL": "Social",
     "SETTINGS": "Configuración",
+    "OVERLAY_VIEWER": "Visor de superposición",
     "ABOUT": "Acerca de"
   },
   "DOCUMENT_LIST": {
@@ -30,6 +35,7 @@
     "MAX_SIZE": "Filtro de tamaño máximo",
     "ENABLE_VERSIONING": "Habilitar control de versiones",
     "DESCRIPTION_UPLOAD": "Habilitar carga",
+    "ENABLE_INFINITE_SCROLL": "Habilitar desplazamiento infinito",
     "MULTISELECT_DESCRIPTION": "Utilice Cmd (Mac) o Ctrl (Windows) para cambiar la selección de varios elementos",
     "COLUMNS": {
       "DISPLAY_NAME": "Nombre a mostrar",
@@ -48,7 +54,8 @@
         "DOWNLOAD": "Descargar",
         "COPY": "Copiar",
         "MOVE": "Mover",
-        "DELETE": "Eliminar"
+        "DELETE": "Eliminar",
+        "PROCESS_ACTION": "Iniciar proceso"
       }
     }
   },
@@ -70,7 +77,8 @@
     "REPORTS-TAB": "Informes",
     "START-TASK": "Iniciar tarea",
     "START-PROCESS": "Iniciar proceso",
-    "AUDIT-LOG": "Procesar registro de auditorías"
+    "PROCESS-AUDIT-LOG": "Registro de auditoría de procesos",
+    "TASK-AUDIT-LOG": "Registro de auditoría de tareas"
   },
   "FORM-LIST": {
     "STORE": "Almacenar",
@@ -82,7 +90,8 @@
     "LOGIN_FOOTER": "Pie del inicio de sesión"
   },
   "SEARCH": {
-    "RESULTS": "Resultados de la búsqueda"
+    "RESULTS": "Resultados de la búsqueda",
+    "NO_RESULT": "Ningún resultado encontrado"
   },
   "SOCIAL": {
     "LIKE": "Componente Me gusta",
diff --git a/demo-shell/resources/i18n/fr.json b/demo-shell/resources/i18n/fr.json
index 54c5db502e..c927dfad77 100644
--- a/demo-shell/resources/i18n/fr.json
+++ b/demo-shell/resources/i18n/fr.json
@@ -3,7 +3,11 @@
   "VERSION": {
     "NO_PERMISSION": "Vous n'avez pas les droits d'accès pour gérer les versions de ce contenu",
     "NO_PERMISSION_EVENT": "Vous n'avez pas les droits d'accès ${event.permission} pour ${event.action} le/la ${event.type}",
-    "CHOOSE_FILE": "Sélectionnez un fichier pour afficher ses versions"
+    "CHOOSE_FILE": "Sélectionnez un fichier pour afficher ses versions",
+    "DIALOG": {
+      "CLOSE": "Fermer",
+      "TITLE": "Gérer les versions"
+    }
   },
   "APP_LAYOUT": {
     "APP_NAME": "Application Démo ADF",
@@ -20,6 +24,7 @@
     "TAG": "Tag",
     "SOCIAL": "Réseaux sociaux",
     "SETTINGS": "Paramètres",
+    "OVERLAY_VIEWER": "Visualisation de la superposition",
     "ABOUT": "À propos de"
   },
   "DOCUMENT_LIST": {
@@ -30,6 +35,7 @@
     "MAX_SIZE": "Filtre de taille max",
     "ENABLE_VERSIONING": "Activer le contrôle de version",
     "DESCRIPTION_UPLOAD": "Activer l'importation",
+    "ENABLE_INFINITE_SCROLL": "Activer le défilement illimité",
     "MULTISELECT_DESCRIPTION": "Utiliser Cmd (Mac) ou Ctrl (Windows) pour activer/désactiver la sélection d'éléments multiples",
     "COLUMNS": {
       "DISPLAY_NAME": "Nom affiché",
@@ -48,7 +54,8 @@
         "DOWNLOAD": "Télécharger",
         "COPY": "Copier",
         "MOVE": "Déplacer",
-        "DELETE": "Supprimer"
+        "DELETE": "Supprimer",
+        "PROCESS_ACTION": "Démarrer le processus"
       }
     }
   },
@@ -70,7 +77,8 @@
     "REPORTS-TAB": "Rapports",
     "START-TASK": "Démarrer la tâche",
     "START-PROCESS": "Démarrer le processus",
-    "AUDIT-LOG": "Journal d'audit des processus"
+    "PROCESS-AUDIT-LOG": "Journal d'audit des processus",
+    "TASK-AUDIT-LOG": "Journal d'audit des tâches"
   },
   "FORM-LIST": {
     "STORE": "Stocker",
@@ -82,7 +90,8 @@
     "LOGIN_FOOTER": "Pied de la page connexion"
   },
   "SEARCH": {
-    "RESULTS": "Résultats de la recherche"
+    "RESULTS": "Résultats de la recherche",
+    "NO_RESULT": "Aucun résultat trouvé"
   },
   "SOCIAL": {
     "LIKE": "Composant J'aime",
diff --git a/demo-shell/resources/i18n/it.json b/demo-shell/resources/i18n/it.json
index e97d67c852..b94d33d640 100644
--- a/demo-shell/resources/i18n/it.json
+++ b/demo-shell/resources/i18n/it.json
@@ -3,7 +3,11 @@
   "VERSION": {
     "NO_PERMISSION": "Non hai il permesso di gestire versioni di questo contenuto",
     "NO_PERMISSION_EVENT": "Non hai il permesso ${event.permission} di ${event.action} ${event.type}",
-    "CHOOSE_FILE": "Seleziona un file per visualizzarne le versioni"
+    "CHOOSE_FILE": "Seleziona un file per visualizzarne le versioni",
+    "DIALOG": {
+      "CLOSE": "Chiudi",
+      "TITLE": "Gestione versioni"
+    }
   },
   "APP_LAYOUT": {
     "APP_NAME": "Applicazione demo ADF",
@@ -20,6 +24,7 @@
     "TAG": "Tag",
     "SOCIAL": "Social",
     "SETTINGS": "Impostazioni",
+    "OVERLAY_VIEWER": "Visualizzatore overlay",
     "ABOUT": "Informazioni su"
   },
   "DOCUMENT_LIST": {
@@ -30,6 +35,7 @@
     "MAX_SIZE": "Filtro dimensioni max",
     "ENABLE_VERSIONING": "Abilita controllo delle versioni",
     "DESCRIPTION_UPLOAD": "Abilita caricamento",
+    "ENABLE_INFINITE_SCROLL": "Abilita scorrimento infinito",
     "MULTISELECT_DESCRIPTION": "Usa Cmd (Mac) o Ctrl (Windows) per attivare/disattivare la selezione di più elementi",
     "COLUMNS": {
       "DISPLAY_NAME": "Nome visualizzato",
@@ -48,7 +54,8 @@
         "DOWNLOAD": "Download",
         "COPY": "Copia",
         "MOVE": "Sposta",
-        "DELETE": "Elimina"
+        "DELETE": "Elimina",
+        "PROCESS_ACTION": "Avvia processo"
       }
     }
   },
@@ -70,7 +77,8 @@
     "REPORTS-TAB": "Rapporti",
     "START-TASK": "Avvia compito",
     "START-PROCESS": "Avvia processo",
-    "AUDIT-LOG": "Log di audit processo"
+    "PROCESS-AUDIT-LOG": "Registro di audit processo",
+    "TASK-AUDIT-LOG": "Registro di audit compito"
   },
   "FORM-LIST": {
     "STORE": "Memorizza",
@@ -82,7 +90,8 @@
     "LOGIN_FOOTER": "Piè di pagina login"
   },
   "SEARCH": {
-    "RESULTS": "Risultati della ricerca"
+    "RESULTS": "Risultati della ricerca",
+    "NO_RESULT": "Nessun risultato trovato"
   },
   "SOCIAL": {
     "LIKE": "Componente Like",
diff --git a/demo-shell/resources/i18n/ja.json b/demo-shell/resources/i18n/ja.json
index b848de67fe..cb7a4251e7 100644
--- a/demo-shell/resources/i18n/ja.json
+++ b/demo-shell/resources/i18n/ja.json
@@ -3,7 +3,11 @@
   "VERSION": {
     "NO_PERMISSION": "このコンテンツのバージョンを管理する権限がありません",
     "NO_PERMISSION_EVENT": "${event.type} を ${event.action} するための ${event.permission} 権限がありません",
-    "CHOOSE_FILE": "バージョンを表示するファイルを選択してください"
+    "CHOOSE_FILE": "バージョンを表示するファイルを選択してください",
+    "DIALOG": {
+      "CLOSE": "閉じる",
+      "TITLE": "バージョンの管理"
+    }
   },
   "APP_LAYOUT": {
     "APP_NAME": "ADF デモアプリケーション",
@@ -20,6 +24,7 @@
     "TAG": "タグ",
     "SOCIAL": "ソーシャル",
     "SETTINGS": "設定",
+    "OVERLAY_VIEWER": "オーバーレイビューア",
     "ABOUT": "バージョン情報"
   },
   "DOCUMENT_LIST": {
@@ -30,6 +35,7 @@
     "MAX_SIZE": "最大サイズフィルタ",
     "ENABLE_VERSIONING": "バージョン管理を有効にする",
     "DESCRIPTION_UPLOAD": "アップロードを有効にします",
+    "ENABLE_INFINITE_SCROLL": "無限スクロールを有効にする",
     "MULTISELECT_DESCRIPTION": "複数選択の切り替えを行うには、Cmd (Mac) キーまたは Ctrl (Windows) キーを押します",
     "COLUMNS": {
       "DISPLAY_NAME": "表示名",
@@ -48,7 +54,8 @@
         "DOWNLOAD": "ダウンロード",
         "COPY": "コピー",
         "MOVE": "移動",
-        "DELETE": "削除"
+        "DELETE": "削除",
+        "PROCESS_ACTION": "プロセスの開始"
       }
     }
   },
@@ -70,7 +77,8 @@
     "REPORTS-TAB": "レポート",
     "START-TASK": "タスクの開始",
     "START-PROCESS": "プロセスの開始",
-    "AUDIT-LOG": "プロセスの監査ログ"
+    "PROCESS-AUDIT-LOG": "プロセスの監査ログ",
+    "TASK-AUDIT-LOG": "タスクの監査ログ"
   },
   "FORM-LIST": {
     "STORE": "保存",
@@ -82,7 +90,8 @@
     "LOGIN_FOOTER": "ログインページのフッター"
   },
   "SEARCH": {
-    "RESULTS": "検索結果"
+    "RESULTS": "検索結果",
+    "NO_RESULT": "一致するアイテムはありません"
   },
   "SOCIAL": {
     "LIKE": "[いいね!] コンポーネント",
diff --git a/demo-shell/resources/i18n/nb.json b/demo-shell/resources/i18n/nb.json
index 32a4830689..797289a58a 100644
--- a/demo-shell/resources/i18n/nb.json
+++ b/demo-shell/resources/i18n/nb.json
@@ -3,7 +3,11 @@
   "VERSION": {
     "NO_PERMISSION": "Du har ikke tillatelse til å håndtere versjoner av dette innholdet",
     "NO_PERMISSION_EVENT": "Du har ikke ${event.permission} tillatelse til å ${event.action} ${event.type}",
-    "CHOOSE_FILE": "Velg en fil for å se versjonene"
+    "CHOOSE_FILE": "Velg en fil for å se versjonene",
+    "DIALOG": {
+      "CLOSE": "Lukk",
+      "TITLE": "Håndtere versjoner"
+    }
   },
   "APP_LAYOUT": {
     "APP_NAME": "ADF-demoprogam",
@@ -20,6 +24,7 @@
     "TAG": "Tagg",
     "SOCIAL": "Sosial",
     "SETTINGS": "Innstillinger",
+    "OVERLAY_VIEWER": "Overleggsfremviser",
     "ABOUT": "Om"
   },
   "DOCUMENT_LIST": {
@@ -30,6 +35,7 @@
     "MAX_SIZE": "Maks. størrelsesfilter",
     "ENABLE_VERSIONING": "Aktiver versjonering",
     "DESCRIPTION_UPLOAD": "Aktiver opplasting",
+    "ENABLE_INFINITE_SCROLL": "Aktiver uendelig rulling",
     "MULTISELECT_DESCRIPTION": "Bruk Cmd (Mac) eller Ctrl (Windows) for å veksle mellom valg av flere elementer",
     "COLUMNS": {
       "DISPLAY_NAME": "Vis navn",
@@ -48,7 +54,8 @@
         "DOWNLOAD": "Last ned",
         "COPY": "Kopier",
         "MOVE": "Flytt",
-        "DELETE": "Slett"
+        "DELETE": "Slett",
+        "PROCESS_ACTION": "Start prosess"
       }
     }
   },
@@ -70,7 +77,8 @@
     "REPORTS-TAB": "Rapporter",
     "START-TASK": "Start oppgave",
     "START-PROCESS": "Start prosess",
-    "AUDIT-LOG": "Behandle revisjonslogg"
+    "PROCESS-AUDIT-LOG": "Prosessrevisjonslogg",
+    "TASK-AUDIT-LOG": "Oppgaverevisjonslogg"
   },
   "FORM-LIST": {
     "STORE": "Lagre",
@@ -82,7 +90,8 @@
     "LOGIN_FOOTER": "Bunntekt pålogging"
   },
   "SEARCH": {
-    "RESULTS": "Søkeresultater"
+    "RESULTS": "Søkeresultater",
+    "NO_RESULT": "Ingen resultater funnet"
   },
   "SOCIAL": {
     "LIKE": "Like komponent",
diff --git a/demo-shell/resources/i18n/nl.json b/demo-shell/resources/i18n/nl.json
index 33a7474511..75f6eb261e 100644
--- a/demo-shell/resources/i18n/nl.json
+++ b/demo-shell/resources/i18n/nl.json
@@ -3,7 +3,11 @@
   "VERSION": {
     "NO_PERMISSION": "U hebt geen rechten voor het beheren van versies van deze content",
     "NO_PERMISSION_EVENT": "U hebt geen ${event.permission} rechten voor het ${event.action} van ${event.type}",
-    "CHOOSE_FILE": "Selecteer een bestand om de versies ervan te zien"
+    "CHOOSE_FILE": "Selecteer een bestand om de versies ervan te zien",
+    "DIALOG": {
+      "CLOSE": "Sluiten",
+      "TITLE": "Versies beheren"
+    }
   },
   "APP_LAYOUT": {
     "APP_NAME": "ADF-demotoepassing",
@@ -20,6 +24,7 @@
     "TAG": "Tag",
     "SOCIAL": "Sociaal",
     "SETTINGS": "Instellingen",
+    "OVERLAY_VIEWER": "Overlay-viewer",
     "ABOUT": "Info"
   },
   "DOCUMENT_LIST": {
@@ -30,6 +35,7 @@
     "MAX_SIZE": "Max.formaat filter",
     "ENABLE_VERSIONING": "Versiebeheer inschakelen",
     "DESCRIPTION_UPLOAD": "Uploaden inschakelen",
+    "ENABLE_INFINITE_SCROLL": "Oneindig scrollen inschakelen",
     "MULTISELECT_DESCRIPTION": "Cmd (Mac) of Ctrl (Windows) gebruiken om de selectie van meerdere items in of uit te schakelen",
     "COLUMNS": {
       "DISPLAY_NAME": "Getoonde naam",
@@ -48,7 +54,8 @@
         "DOWNLOAD": "Downloaden",
         "COPY": "Kopiëren",
         "MOVE": "Verplaatsen",
-        "DELETE": "Verwijderen"
+        "DELETE": "Verwijderen",
+        "PROCESS_ACTION": "Proces starten"
       }
     }
   },
@@ -70,7 +77,8 @@
     "REPORTS-TAB": "Rapporten",
     "START-TASK": "Taak starten",
     "START-PROCESS": "Proces starten",
-    "AUDIT-LOG": "Auditlog van proces"
+    "PROCESS-AUDIT-LOG": "Auditlog van proces",
+    "TASK-AUDIT-LOG": "Auditlog van taak"
   },
   "FORM-LIST": {
     "STORE": "Opslaan",
@@ -82,7 +90,8 @@
     "LOGIN_FOOTER": "Voettekst aanmeldingspagina"
   },
   "SEARCH": {
-    "RESULTS": "Zoekresultaten"
+    "RESULTS": "Zoekresultaten",
+    "NO_RESULT": "Geen resultaten gevonden"
   },
   "SOCIAL": {
     "LIKE": "'Vind ik leuk'-component",
diff --git a/demo-shell/resources/i18n/pt-BR.json b/demo-shell/resources/i18n/pt-BR.json
index c957184d77..b80d1e7308 100644
--- a/demo-shell/resources/i18n/pt-BR.json
+++ b/demo-shell/resources/i18n/pt-BR.json
@@ -3,7 +3,11 @@
   "VERSION": {
     "NO_PERMISSION": "Você não tem permissão para gerenciar versões deste conteúdo",
     "NO_PERMISSION_EVENT": "Você não tem a permissão ${event.permission} para ${event.action} o ${event.type}",
-    "CHOOSE_FILE": "Selecione um arquivo para ver suas versões"
+    "CHOOSE_FILE": "Selecione um arquivo para ver suas versões",
+    "DIALOG": {
+      "CLOSE": "Fechar",
+      "TITLE": "Gerenciar versões"
+    }
   },
   "APP_LAYOUT": {
     "APP_NAME": "Aplicativo Demo ADF",
@@ -20,6 +24,7 @@
     "TAG": "Marca",
     "SOCIAL": "Social",
     "SETTINGS": "Configurações",
+    "OVERLAY_VIEWER": "Visualizador de sobreposição",
     "ABOUT": "Sobre"
   },
   "DOCUMENT_LIST": {
@@ -30,6 +35,7 @@
     "MAX_SIZE": "Tamanho máximo do filtro",
     "ENABLE_VERSIONING": "Ativar versões",
     "DESCRIPTION_UPLOAD": "Ativar carregamento",
+    "ENABLE_INFINITE_SCROLL": "Ativar rolagem infinita",
     "MULTISELECT_DESCRIPTION": "Use Cmd (Mac) ou Ctrl (Windows) para alternar a seleção de vários itens",
     "COLUMNS": {
       "DISPLAY_NAME": "Nome de exibição",
@@ -48,7 +54,8 @@
         "DOWNLOAD": "Download",
         "COPY": "Copiar",
         "MOVE": "Mover",
-        "DELETE": "Excluir"
+        "DELETE": "Excluir",
+        "PROCESS_ACTION": "Iniciar processo"
       }
     }
   },
@@ -70,7 +77,8 @@
     "REPORTS-TAB": "Relatórios",
     "START-TASK": "Iniciar tarefa",
     "START-PROCESS": "Iniciar processo",
-    "AUDIT-LOG": "Log de auditoria de processo"
+    "PROCESS-AUDIT-LOG": "Log de auditoria de processo",
+    "TASK-AUDIT-LOG": "Log de auditoria de tarefa"
   },
   "FORM-LIST": {
     "STORE": "Armazenar",
@@ -82,7 +90,8 @@
     "LOGIN_FOOTER": "Rodapé de login"
   },
   "SEARCH": {
-    "RESULTS": "Resultados da pesquisa"
+    "RESULTS": "Resultados da pesquisa",
+    "NO_RESULT": "Nenhum resultado encontrado"
   },
   "SOCIAL": {
     "LIKE": "Componente Like",
diff --git a/demo-shell/resources/i18n/ru.json b/demo-shell/resources/i18n/ru.json
index 02c307d627..e8f5fc0f68 100644
--- a/demo-shell/resources/i18n/ru.json
+++ b/demo-shell/resources/i18n/ru.json
@@ -3,7 +3,11 @@
   "VERSION": {
     "NO_PERMISSION": "У вас нет разрешения на управление версиями этого контента",
     "NO_PERMISSION_EVENT": "У вас нет разрешения ${event.permission} на ${event.action} ${event.type}",
-    "CHOOSE_FILE": "Чтобы просмотреть версии файла, выберите файл"
+    "CHOOSE_FILE": "Чтобы просмотреть версии файла, выберите файл",
+    "DIALOG": {
+      "CLOSE": "Закрыть",
+      "TITLE": "Управление версиями"
+    }
   },
   "APP_LAYOUT": {
     "APP_NAME": "Демонстрационное приложение ADF",
@@ -20,6 +24,7 @@
     "TAG": "Метка",
     "SOCIAL": "Социальный",
     "SETTINGS": "Параметры",
+    "OVERLAY_VIEWER": "Просмотр наложения",
     "ABOUT": "О приложении"
   },
   "DOCUMENT_LIST": {
@@ -30,6 +35,7 @@
     "MAX_SIZE": "Фильтр максимального размера",
     "ENABLE_VERSIONING": "Включить поддержку версий",
     "DESCRIPTION_UPLOAD": "Включить загрузку",
+    "ENABLE_INFINITE_SCROLL": "Включить бесконечную прокрутку",
     "MULTISELECT_DESCRIPTION": "Использовать кнопку Cmd (Mac) или Ctrl (Windows) для переключения выбора нескольких элементов",
     "COLUMNS": {
       "DISPLAY_NAME": "Отображаемое имя",
@@ -48,7 +54,8 @@
         "DOWNLOAD": "Скачать",
         "COPY": "Копировать",
         "MOVE": "Переместить",
-        "DELETE": "Удалить"
+        "DELETE": "Удалить",
+        "PROCESS_ACTION": "Начать процесс"
       }
     }
   },
@@ -70,7 +77,8 @@
     "REPORTS-TAB": "Отчеты",
     "START-TASK": "Начать задачу",
     "START-PROCESS": "Начать процесс",
-    "AUDIT-LOG": "Журнал аудита процессов"
+    "PROCESS-AUDIT-LOG": "Журнал проверки процесса",
+    "TASK-AUDIT-LOG": "Журнал проверки задачи"
   },
   "FORM-LIST": {
     "STORE": "Хранилище",
@@ -82,7 +90,8 @@
     "LOGIN_FOOTER": "Нижний колонтитул страницы входа в систему"
   },
   "SEARCH": {
-    "RESULTS": "Результаты поиска"
+    "RESULTS": "Результаты поиска",
+    "NO_RESULT": "Результаты не найдены"
   },
   "SOCIAL": {
     "LIKE": "Компонент \"Нравится\"",
diff --git a/demo-shell/resources/i18n/zh-CN.json b/demo-shell/resources/i18n/zh-CN.json
index 28834a6c9f..375762ead0 100644
--- a/demo-shell/resources/i18n/zh-CN.json
+++ b/demo-shell/resources/i18n/zh-CN.json
@@ -3,7 +3,11 @@
   "VERSION": {
     "NO_PERMISSION": "您没有管理此内容版本的权限",
     "NO_PERMISSION_EVENT": "您没有${event.action}${event.type}的${event.permission}权限",
-    "CHOOSE_FILE": "选择一个文件，查看其版本"
+    "CHOOSE_FILE": "选择一个文件，查看其版本",
+    "DIALOG": {
+      "CLOSE": "关闭",
+      "TITLE": "管理版本"
+    }
   },
   "APP_LAYOUT": {
     "APP_NAME": "ADF 演示应用程序",
@@ -20,6 +24,7 @@
     "TAG": "标签",
     "SOCIAL": "社交",
     "SETTINGS": "设置",
+    "OVERLAY_VIEWER": "重叠查看器",
     "ABOUT": "关于"
   },
   "DOCUMENT_LIST": {
@@ -30,6 +35,7 @@
     "MAX_SIZE": "最大大小过滤器",
     "ENABLE_VERSIONING": "启用版本控制",
     "DESCRIPTION_UPLOAD": "启用上传",
+    "ENABLE_INFINITE_SCROLL": "启用无限滚动",
     "MULTISELECT_DESCRIPTION": "使用 Cmd (Mac) 或 Ctrl (Windows) 切换多个项目的选择",
     "COLUMNS": {
       "DISPLAY_NAME": "显示名称",
@@ -48,7 +54,8 @@
         "DOWNLOAD": "下载",
         "COPY": "复制",
         "MOVE": "移动",
-        "DELETE": "删除"
+        "DELETE": "删除",
+        "PROCESS_ACTION": "启动流程"
       }
     }
   },
@@ -70,7 +77,8 @@
     "REPORTS-TAB": "报告",
     "START-TASK": "启动任务",
     "START-PROCESS": "启动流程",
-    "AUDIT-LOG": "流程审计记录"
+    "PROCESS-AUDIT-LOG": "流程审计日志",
+    "TASK-AUDIT-LOG": "任务审计日志"
   },
   "FORM-LIST": {
     "STORE": "存储",
@@ -82,7 +90,8 @@
     "LOGIN_FOOTER": "登录页脚"
   },
   "SEARCH": {
-    "RESULTS": "搜索结果"
+    "RESULTS": "搜索结果",
+    "NO_RESULT": "未找到结果"
   },
   "SOCIAL": {
     "LIKE": "点赞组件",
diff --git a/demo-shell/src/app.config.json b/demo-shell/src/app.config.json
index 71fbd87860..5030d4ac60 100644
--- a/demo-shell/src/app.config.json
+++ b/demo-shell/src/app.config.json
@@ -2,7 +2,7 @@
     "ecmHost": "http://{hostname}:{port}",
     "bpmHost": "http://{hostname}:{port}",
     "application": {
-        "name": "Alfresco ADF Appplication"
+        "name": "Alfresco ADF Application"
     },
     "languages": [
         {
@@ -51,7 +51,8 @@
         }
     ],
     "pagination": {
-        "size": 25
+        "size": 25,
+        "supportedPageSizes": [ 5, 10, 15, 20 ]
     },
     "files": {
         "excluded": [".DS_Store", "desktop.ini", ".git"]
@@ -83,7 +84,6 @@
         }
     },
     "document-list": {
-        "supportedPageSizes": [ 5, 10, 15, 25 ],
         "presets": {
             "-trashcan-": [
                 {
@@ -330,7 +330,6 @@
         }
     },
     "adf-task-list": {
-        "supportedPageSizes": [ 5, 10, 15, 25 ],
         "presets": {
             "default": [
                 {
@@ -338,52 +337,14 @@
                     "type": "text",
                     "title": "ADF_TASK_LIST.PROPERTIES.NAME",
                     "sortable": true
-                },
-                {
-                    "key": "noassignee",
-                    "type": "text",
-                    "title": "ADF_TASK_LIST.PROPERTIES.ASSIGNEE_DEFAULT",
-                    "cssClass": "hidden",
-                    "sortable": true
-                },
-                {
-                    "key": "nodueDate",
-                    "type": "text",
-                    "title": "ADF_TASK_LIST.PROPERTIES.DUE_DATE_DEFAULT",
-                    "cssClass": "hidden",
-                    "sortable": true
-                },
-                {
-                    "key": "nocategory",
-                    "type": "text",
-                    "title": "ADF_TASK_LIST.PROPERTIES.CATEGORY_DEFAULT",
-                    "cssClass": "hidden",
-                    "sortable": true
-                },
-                {
-                    "key": "noparentname",
-                    "type": "text",
-                    "title": "ADF_TASK_LIST.PROPERTIES.PARENT_NAME_DEFAULT",
-                    "cssClass": "hidden",
-                    "sortable": true
-                },
-                {
-                    "key": "nodescription",
-                    "type": "date",
-                    "title": "ADF_TASK_LIST.PROPERTIES.DESCRIPTION_DEFAULT",
-                    "cssClass": "hidden",
-                    "sortable": true
-                },
-                {
-                    "key": "noformName",
-                    "type": "date",
-                    "title": "ADF_TASK_LIST.PROPERTIES.FORM_NAME_DEFAULT",
-                    "cssClass": "hidden",
-                    "sortable": true
                 }
             ]
         }
     },
+    "adf-start-process": {
+        "name": "My Default Name",
+        "processDefinitionName": "My default process def name"
+    },
     "adf-process-list": {
         "presets": {
             "default": [
@@ -402,5 +363,12 @@
                 }
             ]
         }
+    },
+    "content-metadata": {
+        "presets": {
+            "default": {
+                "exif:exif": "*"
+            }
+        }
     }
 }
diff --git a/demo-shell/src/app/app.component.ts b/demo-shell/src/app/app.component.ts
index 955a939ccd..1354f1cdf9 100644
--- a/demo-shell/src/app/app.component.ts
+++ b/demo-shell/src/app/app.component.ts
@@ -16,7 +16,7 @@
  */
 
 import { Component, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 import { SettingsService, PageTitleService, StorageService, TranslationService } from '@alfresco/adf-core';
 
 @Component({
@@ -26,14 +26,12 @@ import { SettingsService, PageTitleService, StorageService, TranslationService }
   encapsulation: ViewEncapsulation.None
 })
 export class AppComponent {
-  searchTerm = '';
 
   constructor(private settingsService: SettingsService,
               private storage: StorageService,
               translationService: TranslationService,
               pageTitleService: PageTitleService,
-              route: ActivatedRoute,
-              router: Router) {
+              route: ActivatedRoute) {
     this.setProvider();
     pageTitleService.setTitle();
   }
diff --git a/demo-shell/src/app/app.module.ts b/demo-shell/src/app/app.module.ts
index 3c0d5b9585..3649774921 100644
--- a/demo-shell/src/app/app.module.ts
+++ b/demo-shell/src/app/app.module.ts
@@ -16,6 +16,7 @@ import { AppLayoutComponent } from './components/app-layout/app-layout.component
 import { HomeComponent } from './components/home/home.component';
 import { SearchBarComponent } from './components/search/search-bar.component';
 import { SearchResultComponent } from './components/search/search-result.component';
+import { SearchExtendedComponent } from './components/search/search-extended.component';
 import { AboutComponent } from './components/about/about.component';
 import { FormComponent } from './components/form/form.component';
 import { FormListComponent } from './components/form/form-list.component';
@@ -43,6 +44,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { TaskAttachmentsComponent } from './components/process-service/task-attachments.component';
 import { ProcessAttachmentsComponent } from './components/process-service/process-attachments.component';
+import { SharedLinkViewComponent } from './components/shared-link-view/shared-link-view.component';
 
 
 @NgModule({
@@ -67,6 +69,7 @@ import { ProcessAttachmentsComponent } from './components/process-service/proces
         HomeComponent,
         SearchBarComponent,
         SearchResultComponent,
+        SearchExtendedComponent,
         AboutComponent,
         ProcessServiceComponent,
         ShowDiagramComponent,
@@ -85,7 +88,8 @@ import { ProcessAttachmentsComponent } from './components/process-service/proces
         VersionManagerDialogAdapterComponent,
         TaskAttachmentsComponent,
         ProcessAttachmentsComponent,
-        OverlayViewerComponent
+        OverlayViewerComponent,
+        SharedLinkViewComponent
     ],
     providers: [
         TranslateService,
diff --git a/demo-shell/src/app/app.routes.ts b/demo-shell/src/app/app.routes.ts
index 913e872f5b..5869b81417 100644
--- a/demo-shell/src/app/app.routes.ts
+++ b/demo-shell/src/app/app.routes.ts
@@ -29,6 +29,7 @@ import { FormViewerComponent } from './components/process-service/form-viewer.co
 import { FormNodeViewerComponent } from './components/process-service/form-node-viewer.component';
 import { AppsViewComponent } from './components/process-service/apps-view.component';
 import { SearchResultComponent } from './components/search/search-result.component';
+import { SearchExtendedComponent } from './components/search/search-extended.component';
 
 import { DataTableComponent } from './components/datatable/datatable.component';
 import { WebscriptComponent } from './components/webscript/webscript.component';
@@ -42,11 +43,16 @@ import { FileViewComponent } from './components/file-view/file-view.component';
 import { CustomSourcesComponent } from './components/files/custom-sources.component';
 import { FormListComponent } from './components/form/form-list.component';
 import { OverlayViewerComponent } from './components/overlay-viewer/overlay-viewer.component';
+import { SharedLinkViewComponent } from './components/shared-link-view/shared-link-view.component';
 
 export const appRoutes: Routes = [
     { path: 'login', component: LoginComponent },
     { path: 'settings', component: SettingsComponent },
     { path: 'files/:nodeId/view', component: FileViewComponent, canActivate: [ AuthGuardEcm ] },
+    {
+        path: 'preview/s/:id',
+        component: SharedLinkViewComponent
+    },
     {
         path: '',
         component: AppLayoutComponent,
@@ -90,6 +96,11 @@ export const appRoutes: Routes = [
                 component: SearchResultComponent,
                 canActivate: [AuthGuardEcm]
             },
+            {
+                path: 'extendedSearch',
+                component: SearchExtendedComponent,
+                canActivate: [AuthGuardEcm]
+            },
             {
                 path: 'activiti',
                 component: AppsViewComponent,
diff --git a/demo-shell/src/app/components/about/about.component.html b/demo-shell/src/app/components/about/about.component.html
index 23b587f28d..77adea7267 100644
--- a/demo-shell/src/app/components/about/about.component.html
+++ b/demo-shell/src/app/components/about/about.component.html
@@ -1,7 +1,7 @@
 <div class="about-container">
     <h3>Server settings</h3>
     <mat-list>
-        <small>The values below are taken from the AppConfigService and loaded from the '{{ configFile }}' file.</small>
+        <small>The values below are taken from the AppConfigService </small>
         <mat-list-item>
             <h4 matLine> Alfresco Process Services URL: {{ bpmHost }}</h4>
         </mat-list-item>
diff --git a/demo-shell/src/app/components/about/about.component.ts b/demo-shell/src/app/components/about/about.component.ts
index cd2546ccc4..0c0e26334e 100644
--- a/demo-shell/src/app/components/about/about.component.ts
+++ b/demo-shell/src/app/components/about/about.component.ts
@@ -39,7 +39,6 @@ export class AboutComponent implements OnInit {
     modules: ObjectDataTableAdapter;
     githubUrlCommitAlpha = 'https://github.com/Alfresco/alfresco-ng2-components/commits/';
 
-    configFile = 'app.config.json';
     ecmHost = '';
     bpmHost = '';
 
@@ -80,7 +79,7 @@ export class AboutComponent implements OnInit {
                     {type: 'text', key: 'expiresAt', title: 'Expires At', sortable: true},
                     {type: 'text', key: 'remainingDays', title: 'Remaining Days', sortable: true},
                     {type: 'text', key: 'holder', title: 'Holder', sortable: true},
-                    {type: 'text', key: 'mode', title: 'Is Cluster Enabled', sortable: true},
+                    {type: 'text', key: 'mode', title: 'Mode', sortable: true},
                     {type: 'text', key: 'isClusterEnabled', title: 'Is Cluster Enabled', sortable: true},
                     {type: 'text', key: 'isCryptodocEnabled', title: 'Is Cryptodoc Enable', sortable: true}
                 ]);
diff --git a/demo-shell/src/app/components/app-layout/app-layout.component.ts b/demo-shell/src/app/components/app-layout/app-layout.component.ts
index fc3c044d31..1fef973b98 100644
--- a/demo-shell/src/app/components/app-layout/app-layout.component.ts
+++ b/demo-shell/src/app/components/app-layout/app-layout.component.ts
@@ -41,6 +41,7 @@ export class AppLayoutComponent {
         { href: '/tag', icon: 'local_offer', title: 'APP_LAYOUT.TAG' },
         { href: '/social', icon: 'thumb_up', title: 'APP_LAYOUT.SOCIAL' },
         { href: '/settings', icon: 'settings', title: 'APP_LAYOUT.SETTINGS' },
+        { 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' }
     ];
diff --git a/demo-shell/src/app/components/file-view/file-view.component.html b/demo-shell/src/app/components/file-view/file-view.component.html
index 7625eb1e0f..f7afcaf3b2 100644
--- a/demo-shell/src/app/components/file-view/file-view.component.html
+++ b/demo-shell/src/app/components/file-view/file-view.component.html
@@ -9,7 +9,8 @@
             <adf-info-drawer-tab label="Versions">
                 <mat-card>
                     <mat-card-content>
-                        Versions go here...
+                        <adf-version-manager [node]="node">
+                        </adf-version-manager>
                     </mat-card-content>
                 </mat-card>
             </adf-info-drawer-tab>
@@ -49,4 +50,4 @@
         </extension-viewer>
         -->
     </adf-viewer>
-</ng-container>
\ No newline at end of file
+</ng-container>
diff --git a/demo-shell/src/app/components/files/files.component.html b/demo-shell/src/app/components/files/files.component.html
index 1fcfe16e6b..facb0ca9d7 100644
--- a/demo-shell/src/app/components/files/files.component.html
+++ b/demo-shell/src/app/components/files/files.component.html
@@ -191,6 +191,7 @@
                         format="timeAgo"
                         class="desktop-only">
                     </data-column>
+
                 </data-columns>
 
                 <content-actions>
@@ -222,6 +223,7 @@
                         [disableWithNoPermission]="true"
                         title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.DELETE' | translate}}"
                         (permissionEvent)="handlePermissionError($event)"
+                        (success)="onDeleteActionSuccess($event)"
                         handler="delete">
                     </content-action>
                     <!-- document actions -->
@@ -267,6 +269,13 @@
                         (success)="onDeleteActionSuccess($event)"
                         handler="delete">
                     </content-action>
+                    <content-action
+                        *ngIf="authenticationService.isBpmLoggedIn()"
+                        icon="play_arrow"
+                        target="document" 
+                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.PROCESS_ACTION' | translate}}"
+                        (execute)="startProcesAction($event)">
+                    </content-action>
                 </content-actions>
             </adf-document-list>
             <adf-pagination
@@ -274,6 +283,7 @@
                 *ngIf="!infiniteScrolling"
                 class="adf-documentlist-pagination"
                 [target]="documentList"
+                [supportedPageSizes]="supportedPages"
                 (changePageSize)="onChangePageSize($event)"
                 (changePageNumber)="onChangePageNumber($event)"
                 (nextPage)="onNextPage($event)"
@@ -281,13 +291,12 @@
             </adf-pagination>
             <adf-infinite-pagination
                 *ngIf="infiniteScrolling"
-                [pagination]="pagination"
-                [loading]="documentList.infiniteLoading"
-                [pageSize]="currentMaxItems"
-                (loadMore)="loadNextBatch($event)">
+                [target]="documentList"
+                [loading]="documentList.infiniteLoading">
                 {{ 'ADF-DOCUMENT-LIST.LAYOUT.LOAD_MORE' | translate }}
             </adf-infinite-pagination>
         </adf-upload-drag-area>
+
         <adf-info-drawer-layout *ngIf="showVersions" class="adf-manage-versions-sidebar" fxFlex="0 0 auto">
             <div info-drawer-content>
                 <ng-container *ngIf="hasOneFileSelected();else choose_document_template">
@@ -316,6 +325,13 @@
 
 <context-menu-holder></context-menu-holder>
 
+<div *ngIf="processId" >
+    <adf-start-process
+        [values]="formValues"
+        [appId]="processId">
+    </adf-start-process>
+</div>
+
 <div class="adf-content-service-settings">
 
     <p>Current folder ID: {{ documentList.currentFolderId }}</p>
diff --git a/demo-shell/src/app/components/files/files.component.ts b/demo-shell/src/app/components/files/files.component.ts
index 92ab592679..3c349d56ac 100644
--- a/demo-shell/src/app/components/files/files.component.ts
+++ b/demo-shell/src/app/components/files/files.component.ts
@@ -21,16 +21,18 @@ import {
 } from '@angular/core';
 import { MatDialog } from '@angular/material';
 import { ActivatedRoute, Params, Router } from '@angular/router';
-import { MinimalNodeEntity, NodePaging, Pagination, MinimalNodeEntryEntity } from 'alfresco-js-api';
+import { MinimalNodeEntity, NodePaging, Pagination, MinimalNodeEntryEntity, SiteEntry } from 'alfresco-js-api';
 import {
-    AlfrescoApiService, ContentService, TranslationService,
+    AlfrescoApiService, AuthenticationService, ContentService, TranslationService,
     FileUploadEvent, FolderCreatedEvent, LogService, NotificationService,
-    SiteModel, UploadService, DataColumn, DataRow, UserPreferencesService,
-    PaginationComponent
+    UploadService, DataColumn, DataRow, UserPreferencesService,
+    PaginationComponent, FormValues
 } from '@alfresco/adf-core';
 
 import { DocumentListComponent, PermissionStyleModel, DownloadZipDialogComponent } from '@alfresco/adf-content-services';
 
+import { SelectAppsDialogComponent } from '@alfresco/adf-process-services';
+
 import { VersionManagerDialogAdapterComponent } from './version-manager-dialog-adapter.component';
 import { Subscription } from 'rxjs/Rx';
 
@@ -60,6 +62,10 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
         // The identifier of a node. You can also use one of these well-known aliases: -my- | -shared- | -root-
     currentFolderId: string = DEFAULT_FOLDER_TO_SHOW;
 
+    formValues: FormValues = {};
+
+    processId;
+
     @Input()
     selectionMode = 'multiple';
 
@@ -117,6 +123,9 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
     @Output()
     loadNext: EventEmitter<Pagination> = new EventEmitter();
 
+    @Output()
+    deleteElementSuccess: EventEmitter<any> = new EventEmitter();
+
     @ViewChild(DocumentListComponent)
     documentList: DocumentListComponent;
 
@@ -125,6 +134,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
 
     permissionsStyle: PermissionStyleModel[] = [];
     infiniteScrolling: boolean;
+    supportedPages: number[];
 
     private onCreateFolder: Subscription;
     private onEditFolder: Subscription;
@@ -139,7 +149,8 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
                 private router: Router,
                 private logService: LogService,
                 private preference: UserPreferencesService,
-                @Optional() private route: ActivatedRoute) {
+                @Optional() private route: ActivatedRoute,
+                public authenticationService: AuthenticationService) {
     }
 
     showFile(event) {
@@ -182,6 +193,7 @@ 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.preference.getDifferentPageSizes();
 
         // this.permissionsStyle.push(new PermissionStyleModel('document-list__create', PermissionsEnum.CREATE));
         // this.permissionsStyle.push(new PermissionStyleModel('document-list__disable', PermissionsEnum.NOT_CREATE, false, true));
@@ -203,7 +215,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
     }
 
     giveDefaultPaginationWhenNotDefined() {
-        this.pagination =  <Pagination> {
+        this.pagination = <Pagination> {
             maxItems: this.preference.paginationSize,
             skipCount: 0,
             totalItems: 0,
@@ -251,7 +263,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
     }
 
     handlePermissionError(event: any) {
-        this.translateService.get('OPERATION.ERROR.NO_PERMISSION_EVENT', {
+        this.translateService.get('VERSION.NO_PERMISSION_EVENT', {
             permission: event.permission,
             action: event.action,
             type: event.type
@@ -308,6 +320,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
 
     onDeleteActionSuccess(message) {
         this.uploadService.fileDeleted.next(message);
+        this.deleteElementSuccess.emit();
     }
 
     onManageVersions(event) {
@@ -325,8 +338,8 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
         }
     }
 
-    getSiteContent(site: SiteModel) {
-        this.currentFolderId = site && site.guid ? site.guid : DEFAULT_FOLDER_TO_SHOW;
+    getSiteContent(site: SiteEntry) {
+        this.currentFolderId = site && site.entry.guid ? site.entry.guid : DEFAULT_FOLDER_TO_SHOW;
     }
 
     getDocumentListCurrentFolderId() {
@@ -440,6 +453,20 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
         return false;
     }
 
+    startProcesAction($event) {
+        this.formValues['file'] = $event.value.entry;
+
+        const dialogRef = this.dialog.open(SelectAppsDialogComponent, {
+            width: '630px',
+            panelClass: 'adf-version-manager-dialog'
+        });
+
+        dialogRef.afterClosed().subscribe(selectedProcess => {
+            this.processId = selectedProcess.id;
+        });
+
+    }
+
     onChangePageSize(event: Pagination): void {
         this.preference.paginationSize = event.maxItems;
         this.changedPageSize.emit(event);
diff --git a/demo-shell/src/app/components/files/version-manager-dialog-adapter.component.html b/demo-shell/src/app/components/files/version-manager-dialog-adapter.component.html
index e1decb8bd4..062fbf32a4 100644
--- a/demo-shell/src/app/components/files/version-manager-dialog-adapter.component.html
+++ b/demo-shell/src/app/components/files/version-manager-dialog-adapter.component.html
@@ -1,7 +1,7 @@
-<header mat-dialog-title>Manage versions</header>
+<header mat-dialog-title>{{'VERSION.DIALOG.TITLE' | translate}}</header>
 <section mat-dialog-content>
     <adf-version-manager [node]="contentEntry"></adf-version-manager>
 </section>
 <footer mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
-    <button mat-button (click)="close()">Close</button>
+    <button mat-button (click)="close()">{{'VERSION.DIALOG.CLOSE' | translate}}</button>
 </footer>
diff --git a/demo-shell/src/app/components/process-service/process-attachments.component.html b/demo-shell/src/app/components/process-service/process-attachments.component.html
index 61670f6fcd..7955be82a2 100644
--- a/demo-shell/src/app/components/process-service/process-attachments.component.html
+++ b/demo-shell/src/app/components/process-service/process-attachments.component.html
@@ -6,10 +6,24 @@
             [disabled]="isCompletedProcess()">
 
             <adf-process-attachment-list #processAttachList
-                                            *ngIf="processInstanceId"
-                                            [disabled]="isCompletedProcess()"
-                                            [processInstanceId]="processInstanceId"
-                                            (attachmentClick)="onAttachmentClick($event)">
+                *ngIf="processInstanceId"
+                [disabled]="isCompletedProcess()"
+                [processInstanceId]="processInstanceId"
+                (attachmentClick)="onAttachmentClick($event)">
+                    <adf-empty-list>
+                      <div adf-empty-list-header class="adf-empty-list-header">
+                          {{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.HEADER' | translate}} 
+                       </div>
+                            <div adf-empty-list-body>
+                            <div fxHide.lt-md="true" class="adf-empty-list-drag_drop">
+                              {{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.DRAG-AND-DROP.TITLE' | translate}}
+                            </div>
+                                  <div fxHide.lt-md="true" class="adf-empty-list__any-files-here-to-add">
+                                  {{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate}}
+                                  </div>
+                            </div>
+                        
+                    </adf-empty-list>
             </adf-process-attachment-list>
 
         </adf-upload-drag-area>
diff --git a/demo-shell/src/app/components/process-service/process-service.component.html b/demo-shell/src/app/components/process-service/process-service.component.html
index 74d2e07e01..bd82e5e4da 100644
--- a/demo-shell/src/app/components/process-service/process-service.component.html
+++ b/demo-shell/src/app/components/process-service/process-service.component.html
@@ -4,10 +4,14 @@
             <div class="adf-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
                 <div class="adf-grid-item adf-tasks-menu" fxFlex.gt-md="225px">
                     <div class="adf-list-buttons">
-                        <button color="primary" mat-raised-button data-automation-id="btn-start-task" class="adf-list-buttons-start" (click)="navigateStartTask()">
-                            <mat-icon>add</mat-icon>
-                            <span>{{'PS-TAB.START-TASK' | translate}}</span>
-                        </button>
+                        <adf-sidebar-action-menu [expanded]="true" title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
+                            <mat-icon sidebar-menu-title-icon >arrow_drop_down</mat-icon>
+                                <div sidebar-menu-options>
+                                    <button mat-menu-item data-automation-id="btn-start-task" (click)="navigateStartTask()">
+                                        <span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_TASK' | translate}}</span>
+                                    </button>
+                                </div>
+                        </adf-sidebar-action-menu>
                     </div>
                     <adf-accordion>
                         <adf-accordion-group [heading]="'Tasks'" [isSelected]="true" [isOpen]="true"
@@ -57,7 +61,7 @@
                         (nextPage)="onNextPage($event)"
                         (prevPage)="onPrevPage($event)"
                         [pagination]="taskPagination"
-                        [supportedPageSizes]="[2, 4, 6, 8, 10, 12]">
+                        [supportedPageSizes]="supportedPages">
                     </adf-pagination>
                 </div>
                 <div class="adf-grid-item adf-tasks-details" *ngIf="!isStartTaskMode()" fxFlex.gt-md="1 1 auto">
@@ -105,15 +109,14 @@
             <div class="adf-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
                 <div class="adf-grid-item adf-processes-menu" fxFlex.gt-md="225px">
                     <div class="adf-list-buttons">
-                        <button
-                            color="primary"
-                            mat-raised-button
-                            class="adf-list-buttons-start"
-                            data-automation-id="btn-start-process"
-                            (click)="navigateStartProcess()">
-                            <mat-icon>add</mat-icon>
-                            <span>{{'PS-TAB.START-PROCESS' | translate}}</span>
-                        </button>
+                        <adf-sidebar-action-menu [expanded]="true" title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
+                            <mat-icon sidebar-menu-title-icon >arrow_drop_down</mat-icon>
+                            <div sidebar-menu-options>
+                                <button mat-menu-item data-automation-id="btn-start-process" (click)="navigateStartProcess()">
+                                    <span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_PROCESS' | translate}}</span>
+                                </button>
+                            </div>
+                        </adf-sidebar-action-menu>
                     </div>
                     <adf-accordion>
                         <adf-accordion-group [heading]="'Processes'" [isSelected]="true" [isOpen]="true"
@@ -130,12 +133,12 @@
                 <div class="adf-grid-item adf-processes-list adf-list" fxFlex.gt-md="335px" [ngClass.gt-md]="{'small-pagination': true}"
                      *ngIf="processFilter && !isStartProcessMode()">
                     <adf-process-instance-list
-                        *ngIf="processFilter?.hasFilter()" [appId]="processFilter.appId"
-                        [processDefinitionKey]="processFilter.filter.processDefinitionKey"
-                        [name]="processFilter.filter.name"
+                        *ngIf="processFilter?.filter" [appId]="processFilter?.appId"
+                        [processDefinitionKey]="processFilter?.filter?.processDefinitionKey"
+                        [name]="processFilter?.filter?.name"
                         [presetColumn]="presetColoum"
-                        [state]="processFilter.filter.state"
-                        [sort]="processFilter.filter.sort"
+                        [state]="processFilter?.filter?.state"
+                        [sort]="processFilter?.filter?.sort"
                         [data]="dataProcesses"
                         (rowClick)="onProcessRowClick($event)"
                         (row-dblclick)="onProcessRowDblClick($event)"
@@ -179,6 +182,8 @@
                      *ngIf="isStartProcessMode()">
                     <adf-start-process
                         [appId]="appId"
+                        [name]="defaultProcessName"
+                        [processDefinitionName]="defaultProcessDefinitionName"
                         (start)="onStartProcessInstance($event)"
                         (cancel)="onCancelProcessInstance()">
                     </adf-start-process>
diff --git a/demo-shell/src/app/components/process-service/process-service.component.ts b/demo-shell/src/app/components/process-service/process-service.component.ts
index e2d4b817aa..57c678f0ea 100644
--- a/demo-shell/src/app/components/process-service/process-service.component.ts
+++ b/demo-shell/src/app/components/process-service/process-service.component.ts
@@ -30,7 +30,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { Pagination, ProcessInstanceFilterRepresentation } from 'alfresco-js-api';
 import {
     FORM_FIELD_VALIDATORS, FormEvent, FormFieldEvent, FormRenderingService, FormService,
-    DynamicTableRow, ValidateDynamicTableRowEvent
+    DynamicTableRow, ValidateDynamicTableRowEvent, AppConfigService
 } from '@alfresco/adf-core';
 
 import { AnalyticsReportListComponent } from '@alfresco/adf-insights';
@@ -52,7 +52,7 @@ import {
     TaskListService
 } from '@alfresco/adf-process-services';
 import { LogService } from '@alfresco/adf-core';
-import { AlfrescoApiService } from '@alfresco/adf-core';
+import { AlfrescoApiService, UserPreferencesService } from '@alfresco/adf-core';
 import {
     DataSorting,
     ObjectDataRow,
@@ -121,6 +121,11 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
     taskPage = 0;
     processSchemaColumns: any[] = [];
 
+    supportedPages: number[];
+
+    defaultProcessDefinitionName: string;
+    defaultProcessName: string;
+
     activeTab: number = this.tabs.tasks; // tasks|processes|reports
 
     taskFilter: FilterRepresentationModel;
@@ -146,10 +151,17 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
                 private taskListService: TaskListService,
                 private apiService: AlfrescoApiService,
                 private logService: LogService,
+                private appConfig: AppConfigService,
                 formRenderingService: FormRenderingService,
-                formService: FormService) {
+                formService: FormService,
+                private preferenceService: UserPreferencesService) {
         this.dataTasks = new ObjectDataTableAdapter();
         this.dataTasks.setSorting(new DataSorting('created', 'desc'));
+        this.supportedPages = this.preferenceService.getDifferentPageSizes();
+        this.taskPagination.maxItems = this.preferenceService.paginationSize;
+
+        this.defaultProcessName = this.appConfig.get<string>('adf-start-process.name');
+        this.defaultProcessDefinitionName = this.appConfig.get<string>('adf-start-process.processDefinitionName');
 
         // Uncomment this line to replace all 'text' field editors with custom component
         // formRenderingService.setComponentTypeResolver('text', () => CustomEditorComponent, true);
@@ -200,6 +212,7 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
         this.taskPage = this.currentPage(skipCount, maxItems);
         this.taskPagination.maxItems = maxItems;
         this.taskPagination.skipCount = skipCount;
+        this.preferenceService.paginationSize = maxItems;
     }
 
     onChangePageNumber(pagination: Pagination): void {
@@ -288,7 +301,6 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
     }
 
     onProcessFilterClick(event: ProcessInstanceFilterRepresentation): void {
-        this.currentProcessInstanceId = null;
         this.processFilter = event;
     }
 
diff --git a/demo-shell/src/app/components/search/search-config-test.service.ts b/demo-shell/src/app/components/search/search-config-test.service.ts
new file mode 100644
index 0000000000..42683447c3
--- /dev/null
+++ b/demo-shell/src/app/components/search/search-config-test.service.ts
@@ -0,0 +1,44 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { QueryBody } from 'alfresco-js-api';
+import { SearchConfigurationInterface } from '@alfresco/adf-core';
+
+export class TestSearchConfigurationService implements SearchConfigurationInterface {
+
+    constructor() {
+    }
+
+    public generateQueryBody(searchTerm: string, maxResults: string, skipCount: string): QueryBody {
+        const defaultQueryBody: QueryBody = {
+            query: {
+                query: searchTerm ? `${searchTerm}* OR name:${searchTerm}*` : searchTerm
+            },
+            include: ['path', 'allowableOperations'],
+            paging: {
+                maxItems: maxResults,
+                skipCount: skipCount
+            },
+            filterQueries: [
+                /*tslint:disable-next-line */
+                { query: "TYPE:'cm:folder'" },
+                { query: 'NOT cm:creator:System' }]
+        };
+
+        return defaultQueryBody;
+    }
+}
diff --git a/demo-shell/src/app/components/search/search-extended.component.html b/demo-shell/src/app/components/search/search-extended.component.html
new file mode 100644
index 0000000000..5fe9ee9ed7
--- /dev/null
+++ b/demo-shell/src/app/components/search/search-extended.component.html
@@ -0,0 +1,39 @@
+<div>
+    <h3>{{'APP_LAYOUT.EXTENDED_SEARCH_QUERY_BODY' | translate}}</h3>
+    <mat-checkbox [(ngModel)]="useServiceApproach">
+            {{'APP_LAYOUT.SEARCH_SERVICE_APPROACH' | translate}}
+    </mat-checkbox>
+
+    <div id="container-for-custom-input" class="search-extended-input-containers">
+        <mat-form-field>
+            <label>{{'APP_LAYOUT.WORD_TO_SEARCH' | translate}}</label>
+            <input type="text" matInput
+                    id="custom-input" [(ngModel)]="searchedWord" [searchAutocomplete]="auto">
+        </mat-form-field>
+    </div>
+    <div>
+      <adf-search #auto="searchAutocomplete"
+                  [queryBody]="generateQueryBody(searchedWord)"
+                  class="example-card-search-container">
+          <ng-template let-data>
+            <mat-card class="example-card"
+                 *ngFor="let item of data?.list?.entries; let idx = index" (click)="onClick(item)">
+                <mat-card-header>
+                    <div mat-card-avatar class="example-header-image"></div>
+                    <mat-card-title>{{ item?.entry.name }}</mat-card-title>
+                    <mat-card-subtitle>{{ item?.entry.createdAt }}</mat-card-subtitle>
+                </mat-card-header>
+                <img mat-card-image [src]="getMimeTypeIcon(item)">
+                <mat-card-content>
+                    <p>
+                        {{'APP_LAYOUT.SEARCH_CREATED_BY' | translate}}: {{item?.entry.createdByUser?.displayName}}
+                    </p>
+                </mat-card-content>
+            </mat-card>
+            <mat-card class="example-card" id="search_no_result" *ngIf="data?.list?.entries.length === 0">
+                <p mat-line class="adf-search-fixed-text">{{ 'SEARCH.RESULTS.NONE' | translate:{searchTerm: searchTerm} }}</p>
+            </mat-card>
+        </ng-template>
+      </adf-search>
+    </div>
+</div>
diff --git a/demo-shell/src/app/components/search/search-extended.component.scss b/demo-shell/src/app/components/search/search-extended.component.scss
new file mode 100644
index 0000000000..386a94a880
--- /dev/null
+++ b/demo-shell/src/app/components/search/search-extended.component.scss
@@ -0,0 +1,62 @@
+div.search-results-container {
+    padding: 0 20px 20px 20px;
+}
+
+.adf-search-title {
+    font-size: 22px;
+    padding: 15px 0 15px 0;
+}
+
+@media screen and (max-width: 600px) {
+    :host .col-display-name {
+        min-width: 100px;
+    }
+    :host .col-modified-at, :host .col-modified-by {
+        display: none;
+    }
+    :host div.search-results-container table {
+        width: 100%;
+    }
+}
+
+.adf-search-results-content{
+    display: flex;
+}
+
+.search-extended-input-containers {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: space-evenly;
+}
+
+.search-extended-input-textarea {
+    width: 300px;
+}
+
+.search-extended-label-error {
+    display: flex;
+    flex-direction: column;
+}
+
+.example-card {
+    width: 200px;
+    flex: 0 20%;
+    margin: 15px;
+  }
+
+  .example-card-search-container {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .example-header-image {
+
+    background-size: cover;
+    margin-bottom: 15px;
+  }
+
+  .example-search-input {
+      width: 100px;
+      border: 1 solid;
+      border-color: black;
+  }
diff --git a/demo-shell/src/app/components/search/search-extended.component.ts b/demo-shell/src/app/components/search/search-extended.component.ts
new file mode 100644
index 0000000000..8f6842b746
--- /dev/null
+++ b/demo-shell/src/app/components/search/search-extended.component.ts
@@ -0,0 +1,84 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
+import { NodePaging, Pagination, QueryBody, MinimalNodeEntity } from 'alfresco-js-api';
+import { SearchComponent } from '@alfresco/adf-content-services';
+import { ThumbnailService } from '@alfresco/adf-core';
+import { SearchService, SearchConfigurationService } from '@alfresco/adf-core';
+import { TestSearchConfigurationService } from './search-config-test.service';
+
+@Component({
+    selector: 'app-search-extended-component',
+    templateUrl: './search-extended.component.html',
+    styleUrls: ['./search-extended.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    providers: [
+        { provide: SearchConfigurationService, useClass: TestSearchConfigurationService },
+        SearchService
+    ]
+})
+export class SearchExtendedComponent {
+
+    @ViewChild('search')
+    search: SearchComponent;
+
+    queryParamName = 'q';
+    searchedWord = '';
+    queryBodyString = '';
+    errorMessage = '';
+    resultNodePageList: NodePaging;
+    maxItems: number;
+    skipCount = 0;
+    pagination: Pagination;
+    queryBody: QueryBody;
+    useServiceApproach = false;
+
+    constructor(public thumbnailService: ThumbnailService) {
+
+    }
+
+    getMimeTypeIcon(node: MinimalNodeEntity): string {
+        let mimeType;
+
+        if (node.entry.content && node.entry.content.mimeType) {
+            mimeType = node.entry.content.mimeType;
+        }
+        if (node.entry.isFolder) {
+            mimeType = 'folder';
+        }
+
+        return this.thumbnailService.getMimeTypeIcon(mimeType);
+    }
+
+    generateQueryBody(searchTerm: string): QueryBody {
+        if (this.useServiceApproach) {
+            return null;
+        } else {
+            return {
+                query: {
+                    query: searchTerm ? `${searchTerm}* OR name:${searchTerm}*` : searchTerm
+                },
+                include: ['path', 'allowableOperations'],
+                filterQueries: [
+                    /*tslint:disable-next-line */
+                    { query: "TYPE:'cm:folder' OR TYPE:'cm:content'" },
+                    { query: 'NOT cm:creator:System' }]
+            };
+        }
+    }
+}
diff --git a/demo-shell/src/app/components/search/search-result.component.html b/demo-shell/src/app/components/search/search-result.component.html
index 913bf2b5e1..e8f461e9e1 100644
--- a/demo-shell/src/app/components/search/search-result.component.html
+++ b/demo-shell/src/app/components/search/search-result.component.html
@@ -14,5 +14,6 @@
         (changedPageNumber)="onRefreshPagination($event)"
         (turnedNextPage)="onRefreshPagination($event)"
         (loadNext)="onRefreshPagination($event)"
-        (turnedPreviousPage)="onRefreshPagination($event)">
+        (turnedPreviousPage)="onRefreshPagination($event)"
+        (deleteElementSuccess)="onDeleteElementSuccess($event)">
 </app-files-component>
diff --git a/demo-shell/src/app/components/search/search-result.component.ts b/demo-shell/src/app/components/search/search-result.component.ts
index 81a8914f43..7b7288a946 100644
--- a/demo-shell/src/app/components/search/search-result.component.ts
+++ b/demo-shell/src/app/components/search/search-result.component.ts
@@ -62,4 +62,8 @@ export class SearchResultComponent implements OnInit {
          this.maxItems = pagination.maxItems;
          this.skipCount = pagination.skipCount;
     }
+
+    onDeleteElementSuccess(element: any) {
+        this.search.reload();
+    }
 }
diff --git a/demo-shell/src/app/components/shared-link-view/shared-link-view.component.html b/demo-shell/src/app/components/shared-link-view/shared-link-view.component.html
new file mode 100644
index 0000000000..07da8ce05d
--- /dev/null
+++ b/demo-shell/src/app/components/shared-link-view/shared-link-view.component.html
@@ -0,0 +1,6 @@
+<ng-container *ngIf="sharedLinkId">
+    <adf-viewer
+        [sharedLinkId]="sharedLinkId"
+        [allowGoBack]="false">
+    </adf-viewer>
+</ng-container>
diff --git a/demo-shell/src/app/components/shared-link-view/shared-link-view.component.scss b/demo-shell/src/app/components/shared-link-view/shared-link-view.component.scss
new file mode 100644
index 0000000000..39982fce39
--- /dev/null
+++ b/demo-shell/src/app/components/shared-link-view/shared-link-view.component.scss
@@ -0,0 +1,4 @@
+.app-shared-link-view {
+    width: 100%;
+    height: 100%;
+}
diff --git a/demo-shell/src/app/components/shared-link-view/shared-link-view.component.ts b/demo-shell/src/app/components/shared-link-view/shared-link-view.component.ts
new file mode 100644
index 0000000000..056301dca9
--- /dev/null
+++ b/demo-shell/src/app/components/shared-link-view/shared-link-view.component.ts
@@ -0,0 +1,24 @@
+import { Component, ViewEncapsulation, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+    selector: 'app-shared-link-view',
+    templateUrl: 'shared-link-view.component.html',
+    styleUrls: [ 'shared-link-view.component.scss' ],
+    encapsulation: ViewEncapsulation.None,
+    // tslint:disable-next-line:use-host-property-decorator
+    host: { 'class': 'app-shared-link-view' }
+})
+export class SharedLinkViewComponent implements OnInit {
+
+    sharedLinkId: string = null;
+
+    constructor(private route: ActivatedRoute) {}
+
+    ngOnInit() {
+        this.route.params.subscribe(params => {
+            this.sharedLinkId = params.id;
+        });
+    }
+
+}
diff --git a/demo-shell/src/polyfills.ts b/demo-shell/src/polyfills.ts
index fdf0d3805b..1fbf2b074f 100644
--- a/demo-shell/src/polyfills.ts
+++ b/demo-shell/src/polyfills.ts
@@ -34,11 +34,10 @@ import 'core-js/es6/map';
 import 'core-js/es6/set';
 
 /** IE10 and IE11 requires the following for NgClass support on SVG elements */
- import 'classlist.js';  // Run `npm install --save classlist.js`.
+import 'classlist.js';  // Run `npm install --save classlist.js`.
 
 /** IE10 and IE11 requires the following to support `@angular/animation`. */
- import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
+import 'web-animations-js';  // Run `npm install --save web-animations-js`.
 
 /** Evergreen browsers require these. **/
 import 'core-js/es6/reflect';
@@ -47,18 +46,11 @@ import 'core-js/es6/array';
 import 'core-js/es7/array';
 
 
-/** ALL Firefox browsers require the following to support `@angular/animation`. **/
-import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
-
-
 /***************************************************************************************************
  * Zone JS is required by Angular itself.
  */
 import 'zone.js/dist/zone';  // Included with Angular CLI.
 
-
-
 /***************************************************************************************************
  * APPLICATION IMPORTS
  */
diff --git a/docs/FormFieldValidator.md b/docs/FormFieldValidator.md
index 54108e2b8f..133d3fd32f 100644
--- a/docs/FormFieldValidator.md
+++ b/docs/FormFieldValidator.md
@@ -56,7 +56,7 @@ during the validation phase.
 Several validator classes are predefined for you to use:
 
 | Validator name | Checks that: |
-| --- | --- |
+| -------------- | ------------ |
 | `RequiredFieldValidator` | Field is not left blank |
 | `NumberFieldValidator` | Field contains numeric data |
 | `MinLengthFieldValidator` | Field text has at least a minimum number of characters |
@@ -144,10 +144,7 @@ If you now run the application and try to enter "admin" in one of the text field
 
 ![](docassets/images/demo-validator.png)
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Form field model](form-field.model.md)
-- [Form component](form.component.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [Form field model](form-field.model.md)
+-   [Form component](form.component.md)
diff --git a/docs/README.md b/docs/README.md
index 37776d8f24..eae8aa1192 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -2,27 +2,30 @@
 
 Below is an index of the documentation for ADF. The [User Guide](#user-guide)
 section discusses particular techniques in depth. The other sections are references for the ADF
-libraries. Items marked with an asterisk (*) do not currently have documentation - the link leads
-to the appropriate source file.
+libraries. Click the name of an item to see its documentation or click the source link to see
+its main source file. Note that ADF is developed continuously, so the source files for some items
+may be listed here before their documentation is available. 
 
 ## Contents
 
-- [User Guide](#user-guide)
-- [ADF Core](#adf-core)
-- [ADF Content Services](#adf-content-services)
-- [ADF Process Services](#adf-process-services)
-- [ADF Insights](#adf-insights)
+-   [User Guide](#user-guide)
+-   [ADF Core](#adf-core)
+-   [ADF Content Services](#adf-content-services)
+-   [ADF Process Services](#adf-process-services)
+-   [ADF Insights](#adf-insights)
 
 ## User guide
 
-<!-- guide start -->
-- [Form Extensibility and Customisation](extensibility.md)
-- [Angular Material Design](angular-material-design.md)
-- [Theming](theming.md)
-- [Typography](typography.md)
-- [Walkthrough: adding indicators to highlight information about a node](metadata-indicators.md)
+<!--guide start-->
+
+-   [Form Extensibility and Customisation](extensibility.md)
+-   [Angular Material Design](angular-material-design.md)
+-   [Theming](theming.md)
+-   [Typography](typography.md)
+-   [Walkthrough - adding indicators to highlight information about a node](metadata-indicators.md)
+
+<!--guide end-->
 
-<!-- guide end -->
 [(Back to Contents)](#contents)
 
 ## ADF Core
@@ -31,112 +34,128 @@ Contains a variety of components used throughout ADF.
 See the library's
 [README file](../lib/core/README.md)
 for more information about installing and using the source code.
-<!-- core start -->
 
-### Components
+<!--core start-->
 
-- [Card view component](card-view.component.md)
-- [Accordion group component](accordion-group.component.md)
-- [Accordion component](accordion.component.md)
-- [Data column component](data-column.component.md)
-- [Datatable component](datatable.component.md)
-- [Form field component](form-field.component.md)
-- [Form list component](form-list.component.md)
-- [Form component](form.component.md)
-- [Start form component](start-form.component.md)
-- [Text mask component](text-mask.component.md)
-- [Widget component](widget.component.md)
-- [Info drawer layout component](info-drawer-layout.component.md)
-- [Info drawer component](info-drawer.component.md)
-- [Language menu component](language-menu.component.md)
-- [Login component](login.component.md)
-- [Infinite pagination component](infinite-pagination.component.md)
-- [Pagination component](pagination.component.md)
-- [Host settings component](host-settings.component.md)
-- [Toolbar divider component](toolbar-divider.component.md)
-- [Toolbar title component](toolbar-title.component.md)
-- [Toolbar component](toolbar.component.md)
-- [User info component](user-info.component.md)
-- [Viewer component](viewer.component.md)
+## Components
 
-### Directives
+| Name | Description | Source link |
+| ---- | ----------- | ----------- |
+| [Card view component](card-view.component.md) | Displays a configurable property list renderer. | [Source](../lib/core/card-view/components/card-view/card-view.component.ts) |
+| [Accordion group component](accordion-group.component.md) | Adds a collapsible panel to an [accordion menu](accordion.component.md). | [Source](../lib/core/collapsable/accordion-group.component.ts) |
+| [Accordion component](accordion.component.md) | Creates a collapsible accordion menu. | [Source](../lib/core/collapsable/accordion.component.ts) |
+| [Data column component](data-column.component.md) | Defines column properties for DataTable, Tasklist, Document List and other components. | [Source](../lib/core/data-column/data-column.component.ts) |
+| [Datatable component](datatable.component.md) | Displays data as a table with customizable columns and presentation. | [Source](../lib/core/datatable/components/datatable/datatable.component.ts) |
+| [Form field component](form-field.component.md) | A form field in an APS form. | [Source](../lib/core/form/components/form-field/form-field.component.ts) |
+| [Form list component](form-list.component.md) | Shows APS forms as a list. | [Source](../lib/core/form/components/form-list.component.ts) |
+| [Form component](form.component.md) | Shows a Form from APS (see it live: [Form Quickstart](https://embed.plnkr.co/YSLXTqb3DtMhVJSqXKkE/)) | [Source](../lib/core/form/components/form.component.ts) |
+| [Start form component](start-form.component.md) | Displays the Start Form for a process. | [Source](../lib/core/form/components/start-form.component.ts) |
+| [Text mask component](text-mask.component.md) | Implements text field input masks. | [Source](../lib/core/form/components/widgets/text/text-mask.component.ts) |
+| [Info drawer layout component](info-drawer-layout.component.md) | Displays a sidebar-style information panel. | [Source](../lib/core/info-drawer/info-drawer-layout.component.ts) |
+| [Info drawer component](info-drawer.component.md) | Displays a sidebar-style information panel with tabs. | [Source](../lib/core/info-drawer/info-drawer.component.ts) |
+| [Language menu component](language-menu.component.md) | Displays all the languages that are present in the "app.config.json" or the default one (EN). | [Source](../lib/core/language-menu/language-menu.component.ts) |
+| [Login component](login.component.md) | Authenticates to Alfresco Content Services and Alfresco Process Services. | [Source](../lib/core/login/components/login.component.ts) |
+| [Infinite pagination component](infinite-pagination.component.md) | Adds "infinite" pagination to the component it is used with. | [Source](../lib/core/pagination/infinite-pagination.component.ts) |
+| [Pagination component](pagination.component.md) | Adds pagination to the component it is used with. | [Source](../lib/core/pagination/pagination.component.ts) |
+| [Host settings component](host-settings.component.md) | Validates the URLs for ACS and APS and saves them in the user's local storage | [Source](../lib/core/settings/host-settings.component.ts) |
+| [Sidebar action menu component](sidebar-action-menu.component.md) | Displays a sidebar-action menu information panel. | [Source](../lib/core/sidebar/sidebar-action-menu.component.ts) |
+| [Toolbar divider component](toolbar-divider.component.md) | Divides groups of elements in a Toolbar with a visual separator. | [Source](../lib/core/toolbar/toolbar-divider.component.ts) |
+| [Toolbar title component](toolbar-title.component.md) | Supplies custom HTML to be included in a Toolbar component title. | [Source](../lib/core/toolbar/toolbar-title.component.ts) |
+| [Toolbar component](toolbar.component.md) | Simple container for headers, titles, actions and breadcrumbs. | [Source](../lib/core/toolbar/toolbar.component.ts) |
+| [User info component](user-info.component.md) | Shows user information. | [Source](../lib/core/userinfo/components/user-info.component.ts) |
+| [Viewer component](viewer.component.md) | Displays content from an ACS repository. | [Source](../lib/core/viewer/components/viewer.component.ts) |
 
-- [Context menu directive](context-menu.directive.md)
-- [Highlight directive](highlight.directive.md)
-- [Logout directive](logout.directive.md)
-- [Node delete directive](node-delete.directive.md)
-- [Node favorite directive](node-favorite.directive.md)
-- [Node permission directive](node-permission.directive.md)
-- [Node restore directive](node-restore.directive.md)
-- [Upload directive](upload.directive.md)
+## Directives
 
-### Models
+| Name | Description | Source link |
+| ---- | ----------- | ----------- |
+| [Context menu directive](context-menu.directive.md) | Adds a context menu to a component. | [Source](../lib/core/context-menu/context-menu.directive.ts) |
+| [Highlight directive](highlight.directive.md) | Adds highlighting to selected sections of an HTML element's content. | [Source](../lib/core/directives/highlight.directive.ts) |
+| [Logout directive](logout.directive.md) | Logs the user out when the decorated element is clicked. | [Source](../lib/core/directives/logout.directive.ts) |
+| [Node delete directive](node-delete.directive.md) | Deletes multiple files and folders. | [Source](../lib/core/directives/node-delete.directive.ts) |
+| [Node favorite directive](node-favorite.directive.md) | Selectively toggles nodes as favorite | [Source](../lib/core/directives/node-favorite.directive.ts) |
+| [Node permission directive](node-permission.directive.md) | Selectively disables an HTML element or Angular component | [Source](../lib/core/directives/node-permission.directive.ts) |
+| [Node restore directive](node-restore.directive.md) | Restores deleted nodes to their original location. | [Source](../lib/core/directives/node-restore.directive.ts) |
+| [Upload directive](upload.directive.md) | Allows your components or common HTML elements reacting on File drag and drop in order to upload content. | [Source](../lib/core/directives/upload.directive.ts) |
 
-- [Form field model](form-field.model.md)
-- [Comment process model](comment-process.model.md)
-- [Product version model](product-version.model.md)
-- [Site model](site.model.md)
-- [User process model](user-process.model.md)
-- [Bpm user model](bpm-user.model.md)
-- [Ecm user model](ecm-user.model.md)
+## Models
 
-### Pipes
+| Name | Description | Source link |
+| ---- | ----------- | ----------- |
+| [Form field model](form-field.model.md) | Contains the value and metadata for a field of an [ADF Form](form.component.md). | [Source](../lib/core/form/components/widgets/core/form-field.model.ts) |
+| [Comment process model](comment-process.model.md) | Represents a comment added to a Process Services task or process instance. | [Source](../lib/core/models/comment-process.model.ts) |
+| [Product version model](product-version.model.md) | Contains version and license information classes for Alfresco products. | [Source](../lib/core/models/product-version.model.ts) |
+| [User process model](user-process.model.md) | Represents a Process Services user. | [Source](../lib/core/models/user-process.model.ts) |
+| [Bpm user model](bpm-user.model.md) | Contains information about a Process Services user. | [Source](../lib/core/userinfo/models/bpm-user.model.ts) |
+| [Ecm user model](ecm-user.model.md) | Contains information about a Content Services user. | [Source](../lib/core/userinfo/models/ecm-user.model.ts) |
 
-- [File size pipe](file-size.pipe.md)
-- [Mime type icon pipe](mime-type-icon.pipe.md)
-- [Node name tooltip pipe](node-name-tooltip.pipe.md)
-- [Text highlight pipe](text-highlight.pipe.md)
-- [Time ago pipe](time-ago.pipe.md)
-- [User initial pipe](user-initial.pipe.md)
+## Pipes
 
-### Services
+| Name | Description | Source link |
+| ---- | ----------- | ----------- |
+| [File size pipe](file-size.pipe.md) | Converts a number of bytes to the equivalent in KB, MB, etc. | [Source](../lib/core/pipes/file-size.pipe.ts) |
+| [Mime type icon pipe](mime-type-icon.pipe.md) | Retrieves an icon to represent a MIME type. | [Source](../lib/core/pipes/mime-type-icon.pipe.ts) |
+| [Node name tooltip pipe](node-name-tooltip.pipe.md) | Formats the tooltip for a Node. | [Source](../lib/core/pipes/node-name-tooltip.pipe.ts) |
+| [Text highlight pipe](text-highlight.pipe.md) | Adds highlighting to words or sections of text that match a search string. | [Source](../lib/core/pipes/text-highlight.pipe.ts) |
+| [Time ago pipe](time-ago.pipe.md) | Converts a recent past date into a number of days ago. | [Source](../lib/core/pipes/time-ago.pipe.ts) |
+| [User initial pipe](user-initial.pipe.md) | Takes the name fields of a UserProcessModel object and extracts and formats the initials. | [Source](../lib/core/pipes/user-initial.pipe.ts) |
 
-- [App config service](app-config.service.md)
-- [Activiti alfresco service](activiti-alfresco.service.md)
-- [Form rendering service](form-rendering.service.md)
-- [Form service](form.service.md)
-- [Node service](node.service.md)
-- [Process content service](process-content.service.md)
-- [Alfresco api service](alfresco-api.service.md)
-- [Apps process service](apps-process.service.md)
-- [Auth guard bpm service](auth-guard-bpm.service.md)
-- [Auth guard ecm service](auth-guard-ecm.service.md)
-- [Auth guard service](auth-guard.service.md)
-- [Authentication service](authentication.service.md)
-- [Card view update service](card-view-update.service.md)
-- [Comment process service](comment-process.service.md)
-- [Content service](content.service.md)
-- [Cookie service](cookie.service.md)
-- [Deleted nodes api service](deleted-nodes-api.service.md)
-- [Discovery api service](discovery-api.service.md)
-- [Favorites api service](favorites-api.service.md)
-- [Highlight transform service](highlight-transform.service.md)
-- [Log service](log.service.md)
-- [Nodes api service](nodes-api.service.md)
-- [Notification service](notification.service.md)
-- [Page title service](page-title.service.md)
-- [People content service](people-content.service.md)
-- [People process service](people-process.service.md)
-- [Renditions service](renditions.service.md)
-- [Shared links api service](shared-links-api.service.md)
-- [Storage service](storage.service.md)
-- [Thumbnail service](thumbnail.service.md)
-- [Translation service](translation.service.md)
-- [Upload service](upload.service.md)
-- [User preferences service](user-preferences.service.md)
-- [Bpm user service](bpm-user.service.md)
-- [Ecm user service](ecm-user.service.md)
-- [*Sites service](../lib/core/services/sites.service.ts)
+## Services
 
-### Widgets
+| Name | Description | Source link |
+| ---- | ----------- | ----------- |
+| [Card view update service](card-view-update.service.md) | Reports edits and clicks within fields of a [Card View component](card-view.component.md). | [Source](../lib/core/card-view/services/card-view-update.service.ts) |
+| [Activiti alfresco service](activiti-alfresco.service.md) | Gets Alfresco Repository folder content based on a Repository account configured in Alfresco Process Services (APS). | [Source](../lib/core/form/services/activiti-alfresco.service.ts) |
+| [Form rendering service](form-rendering.service.md) | Maps an APS form field type string onto the corresponding form widget component type. | [Source](../lib/core/form/services/form-rendering.service.ts) |
+| [Form service](form.service.md) | Implements Process Services form methods | [Source](../lib/core/form/services/form.service.ts) |
+| [Node service](node.service.md) | Gets Alfresco Repository node metadata and creates nodes with metadata.  | [Source](../lib/core/form/services/node.service.ts) |
+| [Process content service](process-content.service.md) | Manipulates content related to a Process Instance or Task Instance in APS. | [Source](../lib/core/form/services/process-content.service.ts) |
+| [Alfresco api service](alfresco-api.service.md) | Provides access to initialized **AlfrescoJSApi** instance. | [Source](../lib/core/services/alfresco-api.service.ts) |
+| [Apps process service](apps-process.service.md) | Gets details of the Process Services apps that are deployed for the user. | [Source](../lib/core/services/apps-process.service.ts) |
+| [Auth guard bpm service](auth-guard-bpm.service.md) | Adds authentication with Process Services to a route within the app. | [Source](../lib/core/services/auth-guard-bpm.service.ts) |
+| [Auth guard ecm service](auth-guard-ecm.service.md) | Adds authentication with Content Services to a route within the app. | [Source](../lib/core/services/auth-guard-ecm.service.ts) |
+| [Auth guard service](auth-guard.service.md) | Adds authentication to a route within the app. | [Source](../lib/core/services/auth-guard.service.ts) |
+| [Authentication service](authentication.service.md) | Provides authentication for use with the Login component. | [Source](../lib/core/services/authentication.service.ts) |
+| [Comment process service](comment-process.service.md) | Adds and retrieves comments for task and process instances in Process Services. | [Source](../lib/core/services/comment-process.service.ts) |
+| [Content service](content.service.md) | Accesses app-generated data objects via URLs and file downloads. | [Source](../lib/core/services/content.service.ts) |
+| [Cookie service](cookie.service.md) | Stores key-value data items as browser cookies. | [Source](../lib/core/services/cookie.service.ts) |
+| [Deleted nodes api service](deleted-nodes-api.service.md) | Gets a list of Content Services nodes currently in the trash. | [Source](../lib/core/services/deleted-nodes-api.service.ts) |
+| [Discovery api service](discovery-api.service.md) | Gets version and license information for Process Services and Content Services. | [Source](../lib/core/services/discovery-api.service.ts) |
+| [Favorites api service](favorites-api.service.md) | Gets a list of items a user has marked as their favorites. | [Source](../lib/core/services/favorites-api.service.ts) |
+| [Highlight transform service](highlight-transform.service.md) | Adds HTML to a string to highlight chosen sections. | [Source](../lib/core/services/highlight-transform.service.ts) |
+| [Log service](log.service.md) | Provide a log functionality for your ADF application. | [Source](../lib/core/services/log.service.ts) |
+| [Nodes api service](nodes-api.service.md) | Accesses and manipulates ACS document nodes using their node IDs. | [Source](../lib/core/services/nodes-api.service.ts) |
+| [Notification service](notification.service.md) | Shows a notification message with optional feedback. | [Source](../lib/core/services/notification.service.ts) |
+| [Page title service](page-title.service.md) | Sets the page title. | [Source](../lib/core/services/page-title.service.ts) |
+| [People content service](people-content.service.md) | Gets information about a Content Services user. | [Source](../lib/core/services/people-content.service.ts) |
+| [People process service](people-process.service.md) | Gets information about Process Services users. | [Source](../lib/core/services/people-process.service.ts) |
+| [Renditions service](renditions.service.md) | Manages prearranged conversions of content to different formats. | [Source](../lib/core/services/renditions.service.ts) |
+| [Search configuration service](search-configuration.service.md) | Provides fine control of parameters to a search. | [Source](../lib/core/services/search-configuration.service.ts) |
+| [Shared links api service](shared-links-api.service.md) | Finds shared links to Content Services items. | [Source](../lib/core/services/shared-links-api.service.ts) |
+| [Sites service](sites.service.md) | Accesses and manipulates sites from a Content Services repository. | [Source](../lib/core/services/sites.service.ts) |
+| [Storage service](storage.service.md) | Stores items in the form of key-value pairs. | [Source](../lib/core/services/storage.service.ts) |
+| [Thumbnail service](thumbnail.service.md) | Retrieves an SVG thumbnail image to represent a document type. | [Source](../lib/core/services/thumbnail.service.ts) |
+| [Translation service](translation.service.md) | Supports localisation. | [Source](../lib/core/services/translation.service.ts) |
+| [Upload service](upload.service.md) | Provides access to various APIs related to file upload features. | [Source](../lib/core/services/upload.service.ts) |
+| [User preferences service](user-preferences.service.md) | Stores preferences for components. | [Source](../lib/core/services/user-preferences.service.ts) |
+| [Bpm user service](bpm-user.service.md) | Gets information about the current Process Services user. | [Source](../lib/core/userinfo/services/bpm-user.service.ts) |
+| [Ecm user service](ecm-user.service.md) | Gets information about a Content Services user. | [Source](../lib/core/userinfo/services/ecm-user.service.ts) |
 
-- [Content widget](content.widget.md)
-<!-- core end -->
+## Widgets
 
-### Other classes and interfaces
+| Name | Description | Source link |
+| ---- | ----------- | ----------- |
+| [Content widget](content.widget.md) | Shows the content preview. | [Source](../lib/core/form/components/widgets/content/content.widget.ts) |
 
-- [DataTableAdapter interface](DataTableAdapter.md)
-- [FormFieldValidator interface](FormFieldValidator.md)
+<!--core end-->
+
+## Other classes and interfaces
+
+| Name | Description | Source link |
+| ---- | ----------- | ----------- |
+| [Data Table Adapter interface](DataTableAdapter.md) | Defines how table data is supplied to [DataTable](datatable.component.md) and [Tasklist](task-list.component.md) components. | [Source](../core/datatable/data/datatable-adapter.ts) |
+| [Form Field Validator interface](FormFieldValidator.md) | Defines how the input fields of [ADF Form](form.component.md) and [ADF Task Details](task-details.component.md) components are validated. | [Source](../core/form/components/widgets/core/form-field-validator.ts) |
+| [Search Configuration interface](search-configuration.interface.md) | Provides fine control of parameters to a search. | [Source](../core/services/search-configuration.service.ts) |
 
 [(Back to Contents)](#contents)
 
@@ -146,52 +165,62 @@ Contains components related to Content Services.
 See the library's
 [README file](../lib/content-services/README.md)
 for more information about installing and using the source code.
-<!-- content-services start -->
 
-### Components
+<!--content-services start-->
 
-- [Breadcrumb component](breadcrumb.component.md)
-- [Dropdown breadcrumb component](dropdown-breadcrumb.component.md)
-- [Content node selector component](content-node-selector.component.md)
-- [Content action component](content-action.component.md)
-- [Document list component](document-list.component.md)
-- [Search control component](search-control.component.md)
-- [Search component](search.component.md)
-- [Sites dropdown component](sites-dropdown.component.md)
-- [Like component](like.component.md)
-- [Rating component](rating.component.md)
-- [Tag actions component](tag-actions.component.md)
-- [Tag list component](tag-list.component.md)
-- [Tag node list component](tag-node-list.component.md)
-- [File uploading dialog component](file-uploading-dialog.component.md)
-- [Upload button component](upload-button.component.md)
-- [Upload drag area component](upload-drag-area.component.md)
-- [Version list component](version-list.component.md)
-- [Version manager component](version-manager.component.md)
-- [Webscript component](webscript.component.md)
-- [*Content metadata card component](../lib/content-services/content-metadata/content-metadata-card.component.ts)
-- [*Content metadata component](../lib/content-services/content-metadata/content-metadata.component.ts)
+## Components
 
-### Directives
+| Name | Description | Source link |
+| ---- | ----------- | ----------- |
+| [Breadcrumb component](breadcrumb.component.md) | Indicates the current position within a navigation hierarchy. | [Source](../lib/content-services/breadcrumb/breadcrumb.component.ts) |
+| [Dropdown breadcrumb component](dropdown-breadcrumb.component.md) | Indicates the current position within a navigation hierarchy using a dropdown menu. | [Source](../lib/content-services/breadcrumb/dropdown-breadcrumb.component.ts) |
+| [Content metadata component](content-metadata.component.md) | Allows a user to display and edit metadata related to a node. | [Source](../lib/content-services/content-metadata/components/content-metadata/content-metadata.component.ts) |
+| [Content node selector panel component](content-node-selector-panel.component.md) | Opens a [Content Node Selector](content-node-selector.component.md) in its own dialog window. | [Source](../lib/content-services/content-node-selector/content-node-selector-panel.component.ts) |
+| [Content node selector component](content-node-selector.component.md) | Allows a user to select items from a Content Services repository. | [Source](../lib/content-services/content-node-selector/content-node-selector.component.ts) |
+| [Content action component](content-action.component.md) | Adds options to a Document List actions menu for a particular content type. | [Source](../lib/content-services/document-list/components/content-action/content-action.component.ts) |
+| [Document list component](document-list.component.md) | Displays the documents from a repository. | [Source](../lib/content-services/document-list/components/document-list.component.ts) |
+| [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 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) |
+| [Tag actions component](tag-actions.component.md) | Shows available actions for tags. | [Source](../lib/content-services/tag/tag-actions.component.ts) |
+| [Tag list component](tag-list.component.md) | Shows tags for an item. | [Source](../lib/content-services/tag/tag-list.component.ts) |
+| [Tag node list component](tag-node-list.component.md) | Shows tags for a node. | [Source](../lib/content-services/tag/tag-node-list.component.ts) |
+| [File uploading dialog component](file-uploading-dialog.component.md) | Shows a dialog listing all the files uploaded with the Upload Button or Drag Area components. | [Source](../lib/content-services/upload/components/file-uploading-dialog.component.ts) |
+| [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 Alfresco. | [Source](../lib/content-services/upload/components/upload-drag-area.component.ts) |
+| [Version list component](version-list.component.md) | Displays the version history of a node in a [Version Manager component](version-manager.component.md) | [Source](../lib/content-services/version-manager/version-list.component.ts) |
+| [Version manager component](version-manager.component.md) | 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) |
 
-- [Folder create directive](folder-create.directive.md)
-- [Folder edit directive](folder-edit.directive.md)
-- [File draggable directive](file-draggable.directive.md)
+## Directives
 
-### Models
+| Name | Description | Source link |
+| ---- | ----------- | ----------- |
+| [Folder create directive](folder-create.directive.md) | Allows folders to be created. | [Source](../lib/content-services/folder-directive/folder-create.directive.ts) |
+| [Folder edit directive](folder-edit.directive.md) | Allows folders to be edited. | [Source](../lib/content-services/folder-directive/folder-edit.directive.ts) |
+| [File draggable directive](file-draggable.directive.md) | Provide drag-and-drop features for an element such as a `div`. | [Source](../lib/content-services/upload/directives/file-draggable.directive.ts) |
 
-- [Document library model](document-library.model.md)
-- [Permissions style model](permissions-style.model.md)
+## Models
 
-### Services
+| Name | Description | Source link |
+| ---- | ----------- | ----------- |
+| [Document library model](document-library.model.md) | Defines classes for use with the Content Services node API. | [Source](../lib/content-services/document-list/models/document-library.model.ts) |
+| [Permissions style model](permissions-style.model.md) | Sets custom CSS styles for rows of a [Document List](document-list.component.md) according to the item's permissions. | [Source](../lib/content-services/document-list/models/permissions-style.model.ts) |
 
-- [Document actions service](document-actions.service.md)
-- [Document list service](document-list.service.md)
-- [Folder actions service](folder-actions.service.md)
-- [Rating service](rating.service.md)
-- [Tag service](tag.service.md)
-- [*Content metadata service](../lib/content-services/content-metadata/content-metadata.service.ts)
-<!-- content-services end -->
+## Services
+
+| Name | Description | Source link |
+| ---- | ----------- | ----------- |
+| [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) |
+| [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) |
+| [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) |
+
+<!--content-services end-->
 
 [(Back to Contents)](#contents)
 
@@ -201,52 +230,61 @@ Contains components related to Process Services.
 See the library's
 [README file](../lib/process-services/README.md)
 for more information about installing and using the source code.
-<!-- process-services start -->
 
-### Components
+<!--process-services start-->
 
-- [Apps list component](apps-list.component.md)
-- [Create process attachment component](create-process-attachment.component.md)
-- [Create task attachment component](create-task-attachment.component.md)
-- [Process attachment list component](process-attachment-list.component.md)
-- [Task attachment list component](task-attachment-list.component.md)
-- [Comment list component](comment-list.component.md)
-- [Comments component](comments.component.md)
-- [Process comments component](process-comments.component.md)
-- [People list component](people-list.component.md)
-- [People search component](people-search.component.md)
-- [People component](people.component.md)
-- [Process filters component](process-filters.component.md)
-- [Process instance details component](process-instance-details.component.md)
-- [Process instance header component](process-instance-header.component.md)
-- [Process instance tasks component](process-instance-tasks.component.md)
-- [Process list component](process-list.component.md)
-- [Start process component](start-process.component.md)
-- [Checklist component](checklist.component.md)
-- [Start task component](start-task.component.md)
-- [Task details component](task-details.component.md)
-- [Task filters component](task-filters.component.md)
-- [Task header component](task-header.component.md)
-- [Task list component](task-list.component.md)
+## Components
 
-### Directives
+| Name | Description | Source link |
+| ---- | ----------- | ----------- |
+| [Apps list component](apps-list.component.md) | Shows all available apps. | [Source](../lib/process-services/app-list/apps-list.component.ts) |
+| [Create process attachment component](create-process-attachment.component.md) | Displays Upload Component (Drag and Click) to upload the attachment to a specified process instance | [Source](../lib/process-services/attachment/create-process-attachment.component.ts) |
+| [Create task attachment component](create-task-attachment.component.md) | Displays Upload Component (Drag and Click) to upload the attachment to a specified task | [Source](../lib/process-services/attachment/create-task-attachment.component.ts) |
+| [Process attachment list component](process-attachment-list.component.md) | Displays attached documents on a specified process instance | [Source](../lib/process-services/attachment/process-attachment-list.component.ts) |
+| [Task attachment list component](task-attachment-list.component.md) | Displays attached documents on a specified task. | [Source](../lib/process-services/attachment/task-attachment-list.component.ts) |
+| [Comment list component](comment-list.component.md) | Shows a list of comments. | [Source](../lib/process-services/comments/comment-list.component.ts) |
+| [Comments component](comments.component.md) | Displays comments from users involved in a specified task and allows an involved user to add a comment to the task. | [Source](../lib/process-services/comments/comments.component.ts) |
+| [Process comments component](process-comments.component.md) | Displays comments associated with a particular process instance and allows the user to add new comments | [Source](../lib/process-services/comments/process-comments.component.ts) |
+| [People list component](people-list.component.md) | Shows a list of users (people). | [Source](../lib/process-services/people/people-list.component.ts) |
+| [People search component](people-search.component.md) | Searches users/people. | [Source](../lib/process-services/people/people-search.component.ts) |
+| [People component](people.component.md) | Displays users involved with a specified task | [Source](../lib/process-services/people/people.component.ts) |
+| [Process filters component](process-filters.component.md) | Collection of criteria used to filter process instances, which may be customized by users. | [Source](../lib/process-services/process-list/components/process-filters.component.ts) |
+| [Process instance details component](process-instance-details.component.md) | Displays detailed information on a specified process instance | [Source](../lib/process-services/process-list/components/process-instance-details.component.ts) |
+| [Process instance header component](process-instance-header.component.md) | Sub-component of the process details component, which renders some general information about the selected process. | [Source](../lib/process-services/process-list/components/process-instance-header.component.ts) |
+| [Process instance tasks component](process-instance-tasks.component.md) | Lists both the active and completed tasks associated with a particular process instance | [Source](../lib/process-services/process-list/components/process-instance-tasks.component.ts) |
+| [Process list component](process-list.component.md) | Renders a list containing all the process instances matched by the parameters specified. | [Source](../lib/process-services/process-list/components/process-list.component.ts) |
+| [Start process component](start-process.component.md) | Starts a process. | [Source](../lib/process-services/process-list/components/start-process.component.ts) |
+| [Checklist component](checklist.component.md) | Shows the checklist task functionality. | [Source](../lib/process-services/task-list/components/checklist.component.ts) |
+| [Start task component](start-task.component.md) | Creates/Starts new task for the specified app | [Source](../lib/process-services/task-list/components/start-task.component.ts) |
+| [Task details component](task-details.component.md) | Shows the details of the task id passed in input | [Source](../lib/process-services/task-list/components/task-details.component.ts) |
+| [Task filters component](task-filters.component.md) | Shows all available filters. | [Source](../lib/process-services/task-list/components/task-filters.component.ts) |
+| [Task header component](task-header.component.md) | Shows all the information related to a task. | [Source](../lib/process-services/task-list/components/task-header.component.ts) |
+| [Task list component](task-list.component.md) | Renders a list containing all the tasks matched by the parameters specified. | [Source](../lib/process-services/task-list/components/task-list.component.ts) |
 
-- [Process audit directive](process-audit.directive.md)
-- [Task audit directive](task-audit.directive.md)
+## Directives
 
-### Models
+| Name | Description | Source link |
+| ---- | ----------- | ----------- |
+| [Process audit directive](process-audit.directive.md) | Fetches the Process Audit information in the pdf or json format. | [Source](../lib/process-services/process-list/components/process-audit.directive.ts) |
+| [Task audit directive](task-audit.directive.md) | Fetches the Task Audit information in the pdf or json format. | [Source](../lib/process-services/task-list/components/task-audit.directive.ts) |
 
-- [Filter model](filter.model.md)
-- [Task details model](task-details.model.md)
+## Models
 
-### Services
+| Name | Description | Source link |
+| ---- | ----------- | ----------- |
+| [Filter model](filter.model.md) | Contains classes related to filters in Process Services. | [Source](../lib/process-services/task-list/models/filter.model.ts) |
+| [Task details model](task-details.model.md) | Information about a task. | [Source](../lib/process-services/task-list/models/task-details.model.ts) |
 
-- [Process filter service](process-filter.service.md)
-- [Process service](process.service.md)
-- [Task filter service](task-filter.service.md)
-- [Tasklist service](tasklist.service.md)
-- [*Task upload service](../lib/process-services/task-list/services/task-upload.service.ts)
-<!-- process-services end -->
+## Services
+
+| Name | Description | Source link |
+| ---- | ----------- | ----------- |
+| [Process filter service](process-filter.service.md) | Manage Process Filters, which are pre-configured Process Instance queries.  | [Source](../lib/process-services/process-list/services/process-filter.service.ts) |
+| [Process service](process.service.md) | Manage Process Instances, Process Variables, and Process Audit Log.  | [Source](../lib/process-services/process-list/services/process.service.ts) |
+| [Task filter service](task-filter.service.md) | Manage Task Filters, which are pre-configured Task Instance queries.  | [Source](../lib/process-services/task-list/services/task-filter.service.ts) |
+| [Tasklist service](tasklist.service.md) | Manage Task Instances.  | [Source](../lib/process-services/task-list/services/tasklist.service.ts) |
+
+<!--process-services end-->
 
 [(Back to Contents)](#contents)
 
@@ -256,15 +294,19 @@ Contains components for Process Services analytics and diagrams.
 See the library's
 [README file](../lib/insights/README.md)
 for more information about installing and using the source code.
-<!-- insights start -->
 
-### Components
+<!--insights start-->
 
-- [Analytics generator component](analytics-generator.component.md)
-- [Analytics report list component](analytics-report-list.component.md)
-- [Analytics component](analytics.component.md)
-- [Widget component](widget.component.md)
-- [Diagram component](diagram.component.md)
-<!-- insights end -->
+## Components
 
-[(Back to Contents)](#contents)
\ No newline at end of file
+| Name | Description | Source link |
+| ---- | ----------- | ----------- |
+| [Widget component](widget.component.md) | Base class for standard and custom widget classes. | [Source](../lib/insights/analytics-process/components/widgets/widget.component.ts) |
+| [Analytics generator component](analytics-generator.component.md) | Generates and shows charts | [Source](../lib/insights/analytics-process/components/analytics-generator.component.ts) |
+| [Analytics report list component](analytics-report-list.component.md) | Shows a list of all available reports | [Source](../lib/insights/analytics-process/components/analytics-report-list.component.ts) |
+| [Analytics component](analytics.component.md) | Shows the charts related to the reportId passed as input | [Source](../lib/insights/analytics-process/components/analytics.component.ts) |
+| [Diagram component](diagram.component.md) | This component shows the diagram of a process. | [Source](../lib/insights/diagram/components/diagram.component.ts) |
+
+<!--insights end-->
+
+[(Back to Contents)](#contents)
diff --git a/docs/accordion-group.component.md b/docs/accordion-group.component.md
index 9def0e6bef..d329b66704 100644
--- a/docs/accordion-group.component.md
+++ b/docs/accordion-group.component.md
@@ -32,20 +32,24 @@ export class MyComponent implements OnInit {
 ### Properties
 
 | Name | Type | Description |
-| --- | --- | --- |
-| heading | string | Title heading for the group. |
-| isSelected | boolean | Is this group currently selected? |
-| headingIcon | string | The material design icon. |
-| hasAccordionIcon | boolean | Should the (expanded) accordion icon be shown? Defaults to true |
-| headingIconTooltip | string | Tooltip message to be shown for headingIcon |
+| ---- | ---- | ----------- |
+| heading | `string` | Title heading for the group.  |
+| headingIcon | `string` | The material design icon.  |
+| headingIconTooltip | `string` | Tooltip message to be shown for headingIcon  |
+| hasAccordionIcon | `boolean` | Should the (expanded) accordion icon be shown? <br/> Default value: `true` |
+| isOpen | `boolean` | Is this group currently open?  |
+| isSelected | `boolean` | Is this group currently selected?  |
+
+### Events
+
+| Name | Type | Description |
+| ---- | ---- | ----------- |
+| headingClick | `EventEmitter<any>` | Emitted when the heading is clicked. |
 
 ## Details
 
 Place one or more accordion groups within an [Accordion component](accordion.component.md) to define a menu. 
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Accordion component](accordion.component.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [Accordion component](accordion.component.md)
diff --git a/docs/accordion.component.md b/docs/accordion.component.md
index c7c1867298..cc22c96aac 100644
--- a/docs/accordion.component.md
+++ b/docs/accordion.component.md
@@ -29,15 +29,6 @@ export class MyComponent implements OnInit {
 }
 ```
 
-### Properties
-
-| Name | Type | Description |
-| --- | --- | --- |
-| heading | string | The header title. |
-| isSelected | boolean | Define if the accordion group is selected or not. |
-| headingIcon | string | The material design icon. |
-| hasAccordionIcon | boolean | Define if the accordion (expand) icon needs to be shown or not, the default value is true |
-
 ## Details
 
 An accordion menu contains several panels of content, only one of which is visible at any time. The
@@ -69,9 +60,7 @@ the following example:
 
 ![how-create-accordion-menu](docassets/images/how-to-create-accordion-menu.png)
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Accordion group component](accordion-group.component.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [Accordion group component](accordion-group.component.md)
+
diff --git a/docs/activiti-alfresco.service.md b/docs/activiti-alfresco.service.md
index cc14a55758..d90b47d8ee 100644
--- a/docs/activiti-alfresco.service.md
+++ b/docs/activiti-alfresco.service.md
@@ -1,6 +1,7 @@
 # Activiti Alfresco Content Service
 
-Get Alfresco Repository folder content based on a Repository account configured in Alfresco Process Services (APS). 
+Gets Alfresco Repository folder content based on a Repository account configured in Alfresco Process Services (APS).
+
 It is possible to configure multiple Alfresco Repository accounts in APS (i.e. multiple Alfresco Servers).
 This service can also be used to link Alfresco content as related content in APS. 
 Content such as documents and other files can be attached to Process Instances 
diff --git a/docs/alfresco-api.service.md b/docs/alfresco-api.service.md
index 3101bfd562..e7682c9488 100644
--- a/docs/alfresco-api.service.md
+++ b/docs/alfresco-api.service.md
@@ -2,17 +2,6 @@
 
 Provides access to initialized **AlfrescoJSApi** instance.
 
-<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
-
-<!-- toc -->
-
-- [Basic Usage](#basic-usage)
-- [Details](#details)
-
-<!-- tocstop -->
-
-<!-- markdown-toc end -->
-
 ## Basic Usage
 
 ```ts
@@ -42,4 +31,4 @@ Alfresco JS api by casting the instance to `any` type like the following:_
 ```ts
 let api: any = this.apiService.getInstance();
 api.nodes.addNode('-root-', body, {});
-```
\ No newline at end of file
+```
diff --git a/docs/analytics-generator.component.md b/docs/analytics-generator.component.md
index 4d5c77fc61..3071fc7015 100644
--- a/docs/analytics-generator.component.md
+++ b/docs/analytics-generator.component.md
@@ -14,20 +14,13 @@ Generates and shows charts
 ### Properties
 
 | Name | Type | Description |
-| --- | --- | -- |
+| ---- | ---- | ----------- |
 | reportId | string | The report id |
 | reportParamQuery | ReportQuery | The object contains all the parameters that the report needs |
 
 ### Events
 
 | Name | Description |
-| --- | --- |
+| ---- | ----------- |
 | success | Raised when the charts are loaded |
 | error | Raised when an error occurs during the loading |
-
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
-## See also
-
-
-<!-- seealso end -->
\ No newline at end of file
diff --git a/docs/analytics-report-list.component.md b/docs/analytics-report-list.component.md
index a30a948984..4139a9e89f 100644
--- a/docs/analytics-report-list.component.md
+++ b/docs/analytics-report-list.component.md
@@ -13,22 +13,15 @@ Shows a list of all available reports
 ### Properties
 
 | Name | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| appId | string | optional | | The application id |
-| layoutType | string | required | | Define the layout of the apps. There are two possible values: GRID or LIST. LIST is the default value|
-| selectFirst | boolean | optional | false | Change the value to true if you want to select the first item in the list as default|
+| ---- | ---- | -------- | ------- | ----------- |
+| appId | string | optional |  | The application id |
+| layoutType | string | required |  | Define the layout of the apps. There are two possible values: GRID or LIST. LIST is the default value |
+| selectFirst | boolean | optional | false | Change the value to true if you want to select the first item in the list as default |
 
 ### Events
 
 | Name | Description |
-| --- | --- |
+| ---- | ----------- |
 | success | The event is emitted when the report list is loaded |
 | error | The event is emitted when an error occurs during the loading |
 | reportClick | The event is emitted when the report in the list is selected |
-
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
-## See also
-
-
-<!-- seealso end -->
\ No newline at end of file
diff --git a/docs/analytics.component.md b/docs/analytics.component.md
index d3869435eb..da927e3861 100644
--- a/docs/analytics.component.md
+++ b/docs/analytics.component.md
@@ -16,7 +16,7 @@ Shows the charts related to the reportId passed as input
 ### Properties
 
 | Name | Type | Description |
-| --- | --- | --- |
+| ---- | ---- | ----------- |
 | appId | string | The application id |
 | reportId | string | The report id |
 | hideParameters | boolean | Toggle the analytics parameters |
@@ -36,15 +36,8 @@ You can also hide chart parameters UI by setting the `hideParameters` to `true`:
 ### Events
 
 | Name | Description |
-| --- | --- |
+| ---- | ----------- |
 | success | The event is emitted when the report parameters are loaded |
 | error | The event is emitted when an error occurs during the loading |
 | reportSaved | The event is emitted when a report is saved |
 | reportDeleted | The event is emitted when a report is deleted |
-
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
-## See also
-
-
-<!-- seealso end -->
\ No newline at end of file
diff --git a/docs/angular-material-design.md b/docs/angular-material-design.md
index b5fd0dece5..b1ec5cb69f 100644
--- a/docs/angular-material-design.md
+++ b/docs/angular-material-design.md
@@ -2,7 +2,7 @@
 
 Google's
 [Material Design](https://material.io/guidelines/material-design/introduction.html)
-is an example of a *design language*, a
+is an example of a _design language_, a
 general set of principles and ideas that are used to give designs a
 consistent look and feel. A design language might be used in-house by
 a company to maintain a "family resemblance" between its products or to
@@ -53,9 +53,6 @@ See the Material Design
 [system icon docs](https://material.io/guidelines/style/icons.html#icons-system-icons)
 for further information and to download the set of standard icon images.
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Theming](theming.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [Theming](theming.md)
diff --git a/docs/app-config.service.md b/docs/app-config.service.md
index 70f2340be6..64e265599f 100644
--- a/docs/app-config.service.md
+++ b/docs/app-config.service.md
@@ -2,17 +2,6 @@
 
 Supports app configuration settings, stored server side.
 
-<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
-
-<!-- toc -->
-
-- [Details](#details)
-  * [Variable substitution in configuration strings](#variable-substitution-in-configuration-strings)
-
-<!-- tocstop -->
-
-<!-- markdown-toc end -->
-
 ## Details
 
 The `AppConfigService` service provides support for loading and accessing global application configuration settings that you store on the server side in the form of a JSON file.
@@ -102,6 +91,6 @@ The `AppConfigService` also supports a limited set of variable substitutions to
 The supported variables are:
 
 | Variable name | Runtime value |
-| --- | --- |
+| ------------- | ------------- |
 | hostname | `location.hostname` |
 | port | `location.port` |
diff --git a/docs/apps-list.component.md b/docs/apps-list.component.md
index 2f4640fcd5..9d9e3d3c51 100644
--- a/docs/apps-list.component.md
+++ b/docs/apps-list.component.md
@@ -1,4 +1,4 @@
-# Activiti Apps Component
+# Apps List Component
 
 Shows all available apps.
 
@@ -15,15 +15,16 @@ Shows all available apps.
 ### Properties
 
 | Name | Type | Description |
-| --- | --- | --- |
-| layoutType | string | (**required**) Define the layout of the apps. There are two possible values: GRID or LIST. |
-| filtersAppId | Object | Provide a way to filter the apps to show. |
+| ---- | ---- | ----------- |
+| layoutType | `string` | (\*\*required\*\*) Defines the layout of the apps. There are two possible values, "GRID" and "LIST".<br/> Default value: `AppsListComponent.LAYOUT_GRID` |
+| filtersAppId | `any[]` | Provides a way to filter the apps to show.  |
 
 ### Events
 
-| Name | Description |
-| --- | --- |
-| appClick | Raised when an app entry is clicked |
+| Name | Type | Description |
+| ---- | ---- | ----------- |
+| appClick | `EventEmitter<AppDefinitionRepresentationModel>` | Emitted when an app entry is clicked. |
+| error | `EventEmitter<any>` | Emitted when an error occurs. |
 
 ## Details
 
diff --git a/docs/auth-guard-bpm.service.md b/docs/auth-guard-bpm.service.md
index e60e94cc6c..fbba383834 100644
--- a/docs/auth-guard-bpm.service.md
+++ b/docs/auth-guard-bpm.service.md
@@ -31,13 +31,7 @@ either ACS or APS. See the
 [ADF custom page tutorial](https://community.alfresco.com/docs/DOC-6628-adf-105-creating-custom-pages-and-components)
 for worked examples of all three guards.
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Auth guard ecm service](auth-guard-ecm.service.md)
-- [Auth guard service](auth-guard.service.md)
-<!-- seealso end -->
-
-
-
+-   [Auth guard ecm service](auth-guard-ecm.service.md)
+-   [Auth guard service](auth-guard.service.md)
diff --git a/docs/auth-guard-ecm.service.md b/docs/auth-guard-ecm.service.md
index 213867218e..b19dcb2bff 100644
--- a/docs/auth-guard-ecm.service.md
+++ b/docs/auth-guard-ecm.service.md
@@ -31,13 +31,7 @@ either APS or ACS. See the
 [ADF custom page tutorial](https://community.alfresco.com/docs/DOC-6628-adf-105-creating-custom-pages-and-components)
 for worked examples of all three guards.
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Auth guard service](auth-guard.service.md)
-- [Auth guard bpm service](auth-guard-bpm.service.md)
-<!-- seealso end -->
-
-
-
+-   [Auth guard service](auth-guard.service.md)
+-   [Auth guard bpm service](auth-guard-bpm.service.md)
diff --git a/docs/auth-guard.service.md b/docs/auth-guard.service.md
index ea6a49a8e2..dd2ea4cb8d 100644
--- a/docs/auth-guard.service.md
+++ b/docs/auth-guard.service.md
@@ -32,13 +32,7 @@ against APS or ACS, respectively. See the
 [ADF custom page tutorial](https://community.alfresco.com/docs/DOC-6628-adf-105-creating-custom-pages-and-components)
 for worked examples of all three guards.
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Auth guard bpm service](auth-guard-bpm.service.md)
-- [Auth guard ecm service](auth-guard-ecm.service.md)
-<!-- seealso end -->
-
-
-
+-   [Auth guard bpm service](auth-guard-bpm.service.md)
+-   [Auth guard ecm service](auth-guard-ecm.service.md)
diff --git a/docs/authentication.service.md b/docs/authentication.service.md
index 395695cd1d..8c81d3f59b 100644
--- a/docs/authentication.service.md
+++ b/docs/authentication.service.md
@@ -2,18 +2,6 @@
 
 Provides authentication for use with the Login component.
 
-<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
-
-<!-- toc -->
-
-- [Basic Usage](#basic-usage)
-  * [Events](#events)
-- [Details](#details)
-
-<!-- tocstop -->
-
-<!-- markdown-toc end -->
-
 ## Basic Usage
 
 **app.component.ts**
@@ -39,10 +27,10 @@ export class AppComponent {
 ### Events
 
 | Name | Description |
-| --- | --- |
+| ---- | ----------- |
 | onLogin | Raised when user logs in |
 | onLogout | Raised when user logs out |
 
 ## Details
 
-The authentication service is used inside the [login component](../ng2-components/ng2-alfresco-login/README.md) and is possible to find there an example of how to use it.
+The authentication service is used inside the [login component](login.component.md) and is possible to find there an example of how to use it.
diff --git a/docs/bpm-user.model.md b/docs/bpm-user.model.md
index 03de2832b7..feba39a405 100644
--- a/docs/bpm-user.model.md
+++ b/docs/bpm-user.model.md
@@ -14,11 +14,8 @@ it is likely to change and so its properties are not listed here. For the
 latest version of the class, see the
 [source file](https://github.com/Alfresco/alfresco-ng2-components/blob/development/lib/core/userinfo/models/bpm-user.model.ts).
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Bpm user service](bpm-user.service.md)
-- [Ecm user model](ecm-user.model.md)
-- [People process service](people-process.service.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [Bpm user service](bpm-user.service.md)
+-   [Ecm user model](ecm-user.model.md)
+-   [People process service](people-process.service.md)
diff --git a/docs/bpm-user.service.md b/docs/bpm-user.service.md
index d5d551f6fd..73c08c8fb5 100644
--- a/docs/bpm-user.service.md
+++ b/docs/bpm-user.service.md
@@ -21,10 +21,7 @@ and
 [getProfilePictureUrl](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-activiti-rest-api/docs/ProfileApi.md#getProfilePictureUrl)
 methods in the Alfresco JS API for more information about the REST calls used by this service.
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Ecm user service](ecm-user.service.md)
-- [Bpm user model](bpm-user.model.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [Ecm user service](ecm-user.service.md)
+-   [Bpm user model](bpm-user.model.md)
diff --git a/docs/breadcrumb.component.md b/docs/breadcrumb.component.md
index e7a3f548b5..ca632764b3 100644
--- a/docs/breadcrumb.component.md
+++ b/docs/breadcrumb.component.md
@@ -16,22 +16,19 @@ Indicates the current position within a navigation hierarchy.
 ### Properties
 
 | Name | Type | Description |
-| --- | --- | --- |
-| target | DocumentListComponent | (optional) DocumentList component to operate with. Upon clicks will instruct the given component to update. |
-| folderNode | [MinimalNodeEntryEntity](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.md) | Active node, builds UI based on `folderNode.path.elements` collection. |
-| root | string |  (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 i18n resource key for the property value. |
-| rootId | string | (optional) The id of the root element. You can use this property to set a custom element the breadcrumb should start with. |
+| ---- | ---- | ----------- |
+| folderNode | `MinimalNodeEntryEntity` | Active node, builds UI based on folderNode.path.elements collection. <br/> Default value: `null` |
+| root | `string` | (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.<br/> Default value: `null` |
+| rootId | `string` | (optional) The id of the root element. You can use this property to set a custom element the breadcrumb should start with.<br/> Default value: `null` |
+| target | `DocumentListComponent` | (optional) Document List component to operate with. The list will update when the breadcrumb is clicked. |
 
 ### Events
 
-| Name | Returned Type | Description |
-| --- | --- | --- |
-| navigate | [PathElementEntity](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/PathElementEntity.md) | emitted when user clicks on a breadcrumb  |
+| Name | Type | Description |
+| ---- | ---- | ----------- |
+| navigate | `EventEmitter<PathElementEntity>` | Emitted when the user clicks on a breadcrumb. |
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Document list component](document-list.component.md)
-- [Dropdown breadcrumb component](dropdown-breadcrumb.component.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [Document list component](document-list.component.md)
+-   [Dropdown breadcrumb component](dropdown-breadcrumb.component.md)
diff --git a/docs/card-view.component.md b/docs/card-view.component.md
index 620c0629ac..c333533cc3 100644
--- a/docs/card-view.component.md
+++ b/docs/card-view.component.md
@@ -8,19 +8,19 @@ Displays a configurable property list renderer.
 
 <!-- toc -->
 
-- [Basic Usage](#basic-usage)
-  * [Properties](#properties)
-- [Details](#details)
-  * [Editing](#editing)
-  * [Defining properties](#defining-properties)
-    + [Card Text Item](#card-text-item)
-    + [Card Map Item](#card-map-item)
-    + [Card Date Item](#card-date-item)
-  * [Defining your custom card Item](#defining-your-custom-card-item)
-    + [1. Define the model for the custom type](#1-define-the-model-for-the-custom-type)
-    + [2. Define the component for the custom type](#2-define-the-component-for-the-custom-type)
-    + [3. Add you custom component to your module's entryComponents list](#3-add-you-custom-component-to-your-modules-entrycomponents-list)
-- [See also](#see-also)
+-   [Basic Usage](#basic-usage)
+    -   [Properties](#properties)
+-   [Details](#details)
+    -   [Editing](#editing)
+    -   [Defining properties](#defining-properties)
+        -   [Card Text Item](#card-text-item)
+        -   [Card Map Item](#card-map-item)
+        -   [Card Date Item](#card-date-item)
+    -   [Defining your custom card Item](#defining-your-custom-card-item)
+        -   [1. Define the model for the custom type](#1-define-the-model-for-the-custom-type)
+        -   [2. Define the component for the custom type](#2-define-the-component-for-the-custom-type)
+        -   [3. Add you custom component to your module's entryComponents list](#3-add-you-custom-component-to-your-modules-entrycomponents-list)
+-   [See also](#see-also)
 
 <!-- tocstop -->
 
@@ -33,15 +33,15 @@ Displays a configurable property list renderer.
     [properties]="[{label: 'My Label', value: 'My value'}]"
     [editable]="false">
 </adf-card-view>
-
 ```
 
 ### Properties
 
-| Name | Type | Description |
-| --- | --- | --- |
-| properties | [CardViewItem](#cardviewitem)[] | (**required**) The custom view to render |
-| editable | boolean | If the component editable or not |
+| Name | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| properties | [CardViewItem](#defining-properties)\[] | - | (**required**) The custom view to render |
+| editable | boolean | - | If the component editable or not |
+| displayEmpty | boolean | true | Whether to show empty properties in non-editable mode |
 
 ## Details
 
@@ -50,8 +50,9 @@ You define the property list, the CardViewComponent does the rest. Each property
 ### Editing
 
 The card view can optionally allow its properties to be edited. You can control the editing of the properties in two level.
-- **global level** - *via the editable parameter of the card-view.component*
-- **property level** -  *in each property via the editable attribute*
+
+-   **global level** - _via the editable parameter of the card-view.component_
+-   **property level** -  _in each property via the editable attribute_
 
 If you set the global editable parameter to false, no properties can be edited regardless of what is set inside the property.
 
@@ -75,11 +76,15 @@ export interface CardViewItem {
 }
 ```
 
-At the moment three models are defined out of the box:
+At the moment these are the models supported:
 
-- **CardViewTextItemModel** - *for text items*
-- **CardViewMapItemModel** - *for map items*
-- **CardViewDateItemModel** - *for date items*
+-   **CardViewTextItemModel** - _for text items_
+-   **CardViewMapItemModel** - _for map items_
+-   **CardViewDateItemModel** - _for date items_
+-   **CardViewDatetimeItemModel** - _for datetime items_
+-   **CardViewBoolItemModel** - _for bool items (checkbox)_
+-   **CardViewIntItemModel** - _for integers items_
+-   **CardViewFloatItemModel** - _for float items_
 
 Each of them extends the abstract CardViewBaseItemModel class to add some custom functionality to the basic behaviour.
 
@@ -100,13 +105,39 @@ Each of them extends the abstract CardViewBaseItemModel class to add some custom
         clickable: true
     }),
     new CardViewDateItemModel({
-        label: 'Birth of date',
+        label: 'Date of birth',
         value: someDate,
-        key: 'birth-of-date',
+        key: 'date-of-birth',
         default: new Date(),
         format: '<any format that momentjs accepts>',
         editable: true
     }),
+    new CardViewDatetimeItemModel({
+        label: 'Datetime of birth',
+        value: someDatetime,
+        key: 'datetime-of-birth',
+        default: new Date(),
+        format: '<any format that momentjs accepts>',
+        editable: true
+    }),
+    new CardViewBoolItemModel({
+        label: 'Vulcanian',
+        value: true,
+        key: 'vulcanian',
+        default: false
+    }),
+    new CardViewIntItemModel({
+        label: 'Intelligence',
+        value: 213,
+        key: 'intelligence',
+        default: 1
+    }),
+    new CardViewFloatItemModel({
+        label: 'Mental stability',
+        value: 9.9,
+        key: 'mental-stability',
+        default: 0.0
+    }),
     ...
 ]
 ```
@@ -120,16 +151,16 @@ const textItemProperty = new CardViewTextItemModel(options);
 ```
 
 | Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| label* | string | --- | The label to render |
-| value* | any | --- | The original value |
-| key* | string | --- | the key of the property. Have an important role when editing the property. |
+| ---- | ---- | ------- | ----------- |
+| label\* | string | --- | The label to render |
+| value\* | any | --- | The original value |
+| key\* | string | --- | the key of the property. Have an important role when editing the property. |
 | default | any | --- | The default value to render in case the value is empty |
-| displayValue* | string | --- | The value to render |
+| displayValue\* | string | --- | The value to render |
 | editable | boolean | false | Whether the property editable or not |
 | clickable | boolean | false | Whether the property clickable or not |
 | multiline | string | false | Single or multiline text |
-| pipes | CardViewTextItemPipeProperty[] | [] | Pipes to be applied on the displayValue |
+| pipes | CardViewTextItemPipeProperty\[] | \[] | Pipes to be applied on the displayValue |
 
 ##### Using pipes in Card Text Item
 
@@ -159,12 +190,12 @@ const mapItemProperty = new CardViewMapItemModel(options);
 ```
 
 | Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| label* | string | --- | The label to render |
-| value* | Map | --- | A map that contains the key value pairs |
-| key* | string | --- | the key of the property. Have an important role when editing the property. |
+| ---- | ---- | ------- | ----------- |
+| label\* | string | --- | The label to render |
+| value\* | Map | --- | A map that contains the key value pairs |
+| key\* | string | --- | the key of the property. |
 | default | any | --- | The default value to render in case the value is empty |
-| displayValue* | string | --- | The value to render |
+| displayValue\* | string | --- | The value to render |
 | clickable | boolean | false | Whether the property clickable or not |
 
 #### Card Date Item
@@ -176,15 +207,84 @@ const dateItemProperty = new CardViewDateItemModel(options);
 ```
 
 | Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| label* | string | --- | The label to render |
-| value* | any | --- | The original value |
-| key* | string | --- | the key of the property. Have an important role when editing the property. |
+| ---- | ---- | ------- | ----------- |
+| label\* | string | --- | The label to render |
+| value\* | any | --- | The original value |
+| key\* | string | --- | the key of the property. |
 | default | any | --- | The default value to render in case the value is empty |
-| displayValue* | string | --- | The value to render |
+| displayValue\* | any | --- | The value to render |
 | editable | boolean | false | Whether the property editable or not |
 | format | boolean | "MMM DD YYYY" | any format that momentjs accepts |
 
+#### Card Datetime Item
+
+CardViewDatetimeItemModel is a property type for datetime properties.
+
+```js
+const datetimeItemProperty = new CardViewDatetimeItemModel(options);
+```
+
+| Name | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| label\* | string | --- | The label to render |
+| value\* | any | --- | The original value |
+| key\* | string | --- | the key of the property. |
+| default | any | any | The default value to render in case the value is empty |
+| displayValue\* | string | --- | The value to render |
+| editable | boolean | false | Whether the property editable or not |
+| format | boolean | "MMM DD YYYY HH:mm" | any format that momentjs accepts |
+
+#### Card Bool Item
+
+CardViewBoolItemModel is a property type for boolean properties.
+
+```js
+const boolItemProperty = new CardViewBoolItemModel(options);
+```
+
+| Name | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| label\* | string | --- | The label to render |
+| value\* | boolean | --- | The original value |
+| key\* | string | --- | the key of the property. |
+| default | boolean | false | The default value to render in case the value is empty |
+| displayValue\* | boolean | --- | The value to render |
+| editable | boolean | false | Whether the property editable or not |
+
+#### Card Int Item
+
+CardViewIntItemModel is a property type for integer properties.
+
+```js
+const intItemProperty = new CardViewIntItemModel(options);
+```
+
+| Name | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| label\* | string | --- | The label to render |
+| value\* | integer | --- | The original value |
+| key\* | string | --- | the key of the property. |
+| default | integer | --- | The default value to render in case the value is empty |
+| displayValue\* | integer | --- | The value to render |
+| editable | boolean | false | Whether the property editable or not |
+
+#### Card Float Item
+
+CardViewFloatItemModel is a property type for float properties.
+
+```js
+const floatItemProperty = new CardViewFloatItemModel(options);
+```
+
+| Name | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| label\* | string | --- | The label to render |
+| value\* | float | --- | The original value |
+| key\* | string | --- | the key of the property. |
+| default | float | --- | The default value to render in case the value is empty |
+| displayValue\* | float | --- | The value to render |
+| editable | boolean | false | Whether the property editable or not |
+
 ### Defining your custom card Item
 
 Card item components are loaded dynamically, which makes you able to define your own custom component for the custom card item type.
@@ -194,7 +294,7 @@ Let's consider you want to have a **stardate** type to display Captain Picard's
 #### 1. Define the Model for the custom type
 
 Your model has to extend the **CardViewBaseItemModel** and implement the **CardViewItem** and **DynamicComponentModel** interface.
-*(You can check how the CardViewTextItemModel is implemented for further guidance.)*
+_(You can check how the CardViewTextItemModel is implemented for further guidance.)_
 
 ```js
 import { CardViewBaseItemModel, CardViewItem, DynamicComponentModel } from '@alfresco/adf-core';
@@ -231,7 +331,7 @@ export class CardViewStarDateItemComponent {
 
     constructor(private cardViewUpdateService: CardViewUpdateService) {}
 
-    isEditble() {
+    isEditable() {
         return this.editable && this.property.editable;
     }
 
@@ -239,8 +339,8 @@ export class CardViewStarDateItemComponent {
         ...
     }
 }
-
 ```
+
 To make your component editable, you can have a look on either the CardViewTextItemComponent' or on the CardViewDateItemComponent's source.
 
 #### 3. Add you custom component to your module's entryComponents list
@@ -283,8 +383,10 @@ export class SomeParentComponent {
 ```
 
 <!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
+
 <!-- seealso start -->
+
 ## See also
 
-- [Card view update service](card-view-update.service.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [Card view update service](card-view-update.service.md)
+    <!-- seealso end -->
diff --git a/docs/checklist.component.md b/docs/checklist.component.md
index 65c76cba67..4528ec4f4a 100644
--- a/docs/checklist.component.md
+++ b/docs/checklist.component.md
@@ -1,4 +1,4 @@
-# Activiti Checklist Component
+# Checklist Component
 
 Shows the checklist task functionality.
 
@@ -15,7 +15,15 @@ Shows the checklist task functionality.
 ### Properties
 
 | Name | Type | Description |
-| --- | --- | --- |
-| taskId | string | (**required**) The id of the parent task which sub tasks are attached on. |
-| readOnlyForm | boolean | Toggle readonly state of the form. Enforces all form widgets render readonly if enabled. |
-| assignee | string | (**required**) The assignee id where the subtasks are assigned to. |
+| ---- | ---- | ----------- |
+| taskId | `string` | (required) The id of the parent task to which subtasks are attached. |
+| readOnly | `boolean` | Toggle readonly state of the form. All form widgets will render as readonly if enabled.<br/> Default value: `false` |
+| assignee | `string` | (required) The assignee id that the subtasks are assigned to.  |
+
+### Events
+
+| Name | Type | Description |
+| ---- | ---- | ----------- |
+| checklistTaskCreated | `EventEmitter<TaskDetailsModel>` | Emitted when a new checklist task is created. |
+| checklistTaskDeleted | `EventEmitter<string>` | Emitted when a checklist task is deleted. |
+| error | `EventEmitter<any>` | Emitted when an error occurs. |
diff --git a/docs/comment-list.component.md b/docs/comment-list.component.md
index 3d164d1d82..d90a9ec9ae 100644
--- a/docs/comment-list.component.md
+++ b/docs/comment-list.component.md
@@ -1,9 +1,11 @@
 # Comment list component
+
 Shows a list of comments.
 
 ![ADF Comment List](docassets/images/adf-comment-list.png)
 
 ## Basic Usage
+
 Populate the comments in the component class:
 
 ```ts
@@ -39,7 +41,6 @@ export class SomeComponent implements OnInit {
   onClickCommentRow(comment: CommentProcessModel) {
     console.log('Clicked row: ', comment);
   }
-
 ```
 
 In the component template use the comment list component:
@@ -53,17 +54,12 @@ In the component template use the comment list component:
 
 ### Properties
 
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| comments | CommentProcessModel[] |  | The comments data used to populate the list |
+| Name | Type | Description |
+| ---- | ---- | ----------- |
+| comments | `any[]` | The comments data used to populate the list.  |
 
 ### Events
 
-| Name | Description |
-| --- | --- |
-| clickRow | Emitted when the user clicks on one of the comment rows |
-
-
-<!-- seealso start -->
-
-<!-- seealso end -->
\ No newline at end of file
+| Name | Type | Description |
+| ---- | ---- | ----------- |
+| clickRow | `EventEmitter<any>` | Emitted when the user clicks on one of the comment rows. |
diff --git a/docs/comment-process.model.md b/docs/comment-process.model.md
index d24f45bb5f..96d8fe6e15 100644
--- a/docs/comment-process.model.md
+++ b/docs/comment-process.model.md
@@ -19,9 +19,6 @@ class CommentProcessModel implements CommentRepresentation {
 }
 ```
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Comment process service](comment-process.service.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [Comment process service](comment-process.service.md)
diff --git a/docs/comment-process.service.md b/docs/comment-process.service.md
index 4a8f479293..7e0f258d68 100644
--- a/docs/comment-process.service.md
+++ b/docs/comment-process.service.md
@@ -23,12 +23,6 @@ comments returned by the methods of this service. Also, the Comments API section
 [Alfresco JS API docs](https://github.com/Alfresco/alfresco-js-api/tree/master/src/alfresco-activiti-rest-api)
 has further details about the underlying REST API.
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Comment process model](comment-process.model.md)
-<!-- seealso end -->
-
-
-
+-   [Comment process model](comment-process.model.md)
diff --git a/docs/comments.component.md b/docs/comments.component.md
index 640da34a1b..818aff2d2e 100644
--- a/docs/comments.component.md
+++ b/docs/comments.component.md
@@ -1,4 +1,4 @@
-# ADF Comments Component
+# Comments Component
 
 Displays comments from users involved in a specified task and allows an involved user to add a comment to the task.
 
@@ -16,12 +16,12 @@ Displays comments from users involved in a specified task and allows an involved
 ### Properties
 
 | Name | Type | Description |
-| --- | --- | --- |
-| taskId | string | The numeric ID of the task |
-| readOnly | boolean | The boolean flag |
+| ---- | ---- | ----------- |
+| taskId | `string` | The numeric ID of the task.  |
+| readOnly | `boolean` | Are the comments read only? <br/> Default value: `false` |
 
 ### Events
 
-| Name | Description |
-| --- | --- |
-| error | Raised when an error occurs while displaying/adding a comment |
+| Name | Type | Description |
+| ---- | ---- | ----------- |
+| error | `EventEmitter<any>` | Emitted when an error occurs while displaying/adding a comment. |
diff --git a/docs/content-action.component.md b/docs/content-action.component.md
index 10576cb19d..12e02e12a7 100644
--- a/docs/content-action.component.md
+++ b/docs/content-action.component.md
@@ -4,30 +4,25 @@ Adds options to a Document List actions menu for a particular content type.
 
 ![Document Actions](docassets/images/document-actions.png)
 
-<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
+## Contents
 
-<!-- toc -->
+-   [Basic Usage](#basic-usage)
 
-- [Basic Usage](#basic-usage)
-  * [Properties](#properties)
-  * [Events](#events)
-- [Details](#details)
-  * [Built-in action examples](#built-in-action-examples)
-    + [Delete - System handler combined with custom handler](#delete---system-handler-combined-with-custom-handler)
-    + [Download](#download)
-    + [Copy and move](#copy-and-move)
-  * [Error, Permission and Success callbacks](#error-permission-and-success-callbacks)
-  * [Customizing built-in actions](#customizing-built-in-actions)
-- [See also](#see-also)
+    -   [Properties](#properties)
+    -   [Events](#events)
 
-<!-- tocstop -->
+-   [Details](#details)
 
-<!-- markdown-toc end -->
+    -   [Built-in action examples](#built-in-action-examples)
+    -   [Error, Permission and Success callbacks](#error-permission-and-success-callbacks)
+    -   [Customizing built-in actions](#customizing-built-in-actions)
+
+-   [See also](#see-also)
 
 ## Basic Usage
 
 ```html
-<adf-document-list ...>
+<adf-document-list [contentActions]="true"...>
     <content-actions>
 
         <!-- system handler -->
@@ -79,24 +74,24 @@ export class MyView {
 
 ### Properties
 
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `target` | string | | "document" or "folder" |
-| `title` | string | | The title of the action as shown in the menu |
-| `icon` | string | | The name of the icon to display next to the menu command (can be left blank) |
-| `handler` | string | | System type actions. Can be "delete", "download", "copy" or "move" |
-| `permission` | string | | The name of the permission |
-| `disabled` | boolean | | Is the menu item disabled? 
-| `disableWithNoPermission` | boolean | | Should this action be disabled in the menu if the user doesn't have permission for it? |
+| Name | Type | Description |
+| ---- | ---- | ----------- |
+| title | `string` | The title of the action as shown in the menu. <br/> Default value: `'Action'` |
+| icon | `string` | The name of the icon to display next to the menu command (can be left blank).  |
+| handler | `string` | System actions. Can be "delete", "download", "copy" or "move".  |
+| target | `string` | Type of item that the action appies to. Can be "document" or "folder"  |
+| permission | `string` | The permission type.  |
+| disableWithNoPermission | `boolean` | Should this action be disabled in the menu if the user doesn't have permission for it?  |
+| disabled | `boolean` | Is the menu item disabled? <br/> Default value: `false` |
 
 ### Events
 
-| Name | Handler | Description |
-| --- | --- | --- |
-| `execute` | All | Emitted when user clicks on the action. For combined handlers see below |
-| `permissionEvent` | All | Emitted when a permission error happens |
-| `success` | copy, move, delete | Emitted on successful action with the success string message |
-| `error` | copy, move | Emitted on unsuccessful action with the error event |
+| Name | Type | Description |
+| ---- | ---- | ----------- |
+| execute | `EventEmitter<{}>` | Emitted when the user selects the action from the menu. |
+| permissionEvent | `EventEmitter<{}>` | Emitted when a permission error occurs |
+| error | `EventEmitter<{}>` | Emitted when an error occurs during the action. Applies to copy and move actions. |
+| success | `EventEmitter<{}>` | Emitted when the action succeeds with the success string message. Applies to copy, move and delete actions. |
 
 ## Details
 
@@ -105,16 +100,53 @@ The document actions are rendered on a dropdown menu for each items of content.
 
 A number of built-in actions are defined to handle common use cases:
 
-- **Download** (document)
-- **Copy** (document, folder)
-- **Move** (document, folder)
-- **Delete** (document, folder)
+-   **Download** (document)
+-   **Copy** (document, folder)
+-   **Move** (document, folder)
+-   **Delete** (document, folder)
 
 You can use one of the built-in handlers by assigning its name to the `handler` property.
 (The names are case-insensitive, so `handler="download"` and `handler="DOWNLOAD"`
 will trigger the same action.) You can also add your own handler by implementing the
-`execute` event. Note that you can use *both* a built-in handler and your own `execute`
-function in the same action.
+`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` 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,
+type and other details of the item just deleted:
+
+```html
+ <content-actions>
+    <content-action
+        target="document"
+        title="Delete"
+        permission="delete"
+        disableWithNoPermission="true"
+        handler="delete"
+        (execute)="myCustomActionAfterDelete($event)">
+    </content-action>
+</content-actions>
+```
+
+```ts
+  myCustomActionAfterDelete(event) {
+    let entry = event.value.entry;
+
+    let item = "";
+
+    if (entry.isFile) {
+      item = "file";
+    } else if (entry.isFolder) {
+      item = "folder"
+    }
+
+    this.notificationService.openSnackMessage(`Deleted ${item} "${entry.name}" `, 20000);
+  }
+```
+
+![Custom delete message screenshot](docassets/images/ContentActSnackMessage.png)
 
 ### Built-in action examples
 
@@ -149,7 +181,7 @@ You can also implement the `permissionEvent` to handle permission errors
 and use the [Notification service](notification.service.md) to show a message.
 
 ```html
-<adf-document-list ...>
+<adf-document-list [contentActions]="true"...>
     <content-actions>
 
         <content-action
@@ -181,7 +213,7 @@ export class MyComponent {
 This action simply starts a download of the corresponding document file.
 
 ```html
-<adf-document-list ...>
+<adf-document-list [contentActions]="true"...>
     <content-actions>
 
         <content-action
@@ -205,7 +237,7 @@ allow the item being copied/moved to be the destination if it is itself a folder
 ![Copy/move dialog](docassets/images/document-action-copymovedialog.png)
 
 ```html
-<adf-document-list ...>
+<adf-document-list [contentActions]="true"...>
     <content-actions>
 
         <content-action
@@ -240,9 +272,9 @@ allow the item being copied/moved to be the destination if it is itself a folder
 
 Defining error, permission and success callbacks are pretty much the same as doing it for the delete permission handling.
 
-- The error handler callback gets the error object which was raised
-- The success callback's only parameter is the translatable success message string (could be used for showing in snackbar for example)
-- The permissionEvent callback is the same as described above with the delete action
+-   The error handler callback gets the error object which was raised
+-   The success callback's only parameter is the translatable success message string (could be used for showing in snackbar for example)
+-   The permissionEvent callback is the same as described above with the delete action
 
 ![Copy/move document action](docassets/images/document-action-copymove.png)
 
@@ -255,10 +287,12 @@ and override the default implementations. See the doc pages for
 for details and examples.
 
 <!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
+
 <!-- seealso start -->
+
 ## See also
 
-- [Document list component](document-list.component.md)
-- [Document actions service](document-actions.service.md)
-- [Folder actions service](folder-actions.service.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [Document list component](document-list.component.md)
+-   [Document actions service](document-actions.service.md)
+-   [Folder actions service](folder-actions.service.md)
+    <!-- seealso end -->
diff --git a/docs/content-metadata.component.md b/docs/content-metadata.component.md
new file mode 100644
index 0000000000..5a679ab077
--- /dev/null
+++ b/docs/content-metadata.component.md
@@ -0,0 +1,113 @@
+# Content Metadata Card component
+
+<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
+<!-- toc -->
+<!-- tocstop -->
+<!-- markdown-toc end -->
+
+Allows a user to display and edit metadata related to a node.
+
+<img src="docassets/images/ContentMetadata.png" width="325">
+
+## Properties
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| node | MinimalNodeEntryEntity | - | (**required**) The node entity to fetch metadata about |
+| displayEmpty | boolean | false | Display empty values in card view or not |
+| preset | string | "*" | The metadata preset's name, which defines aspects and their properties |
+
+## Basic Usage
+
+The component shows metadata related to the given node. The component uses the card view component to render the properties of metadata aspects.
+The different aspects and their properties to be shown can be configured as application config preset, for details about it see the related section below. By default the component only shows the basic properties of the node. Clicking on the pencil icon at the bottom, renders the underlying card view component in edit mode enabling to edit and update the metadata properties.
+
+```html
+<adf-content-metadata-card
+    [displayEmpty]="false"
+    [preset]="'*'"
+    [node]="node">
+</adf-content-metadata-card>
+```
+
+## Application config presets
+
+In the application config file you can define different presets for the metadata component or override the default preset. The **default** preset is "*" if not set, meaning the component will display every aspects and properties of the nodes without filtering. One can think about presets as **whitelist filters** for the content metadata component.
+
+Beside the default preset you can define as many presets as you want, if you'd like to use different metadata components with different presets.
+
+To understand presets better, you can have a look at on the following different example configurations.
+
+### Mimicking the default "default" preset
+
+If you don't have any preset configured manually in you application config, this would be equivalent as if you had the application config as defined below:
+
+```json
+...
+"content-metadata": {
+    "presets": {
+        "default": "*"
+    }
+}
+...
+```
+
+### Whitelisting only a few aspects in the default preset
+
+If you want to restrict to only a few aspects (e.g.: exif, your-custom-aspect), you have to use the name of that particular aspect to be able to whitelist it. In case of exif aspect this is "exif:exif".
+
+```json
+...
+"content-metadata": {
+    "presets": {
+        "default": {
+            "custom:aspect": "*",
+            "exif:exif": "*"
+        }
+    }
+}
+...
+```
+
+### Whitelisting only a few properties of a few aspects in the default preset
+
+If you want to filter more, you can do this on property level also. For this, you have to list the names of whitelisted aspect properties in an array of strings. Again, for identifying a property, you have to use its name.
+
+```json
+...
+"content-metadata": {
+    "presets": {
+        "default": {
+            "custom:aspect": "*",
+            "exif:exif": [ "exif:width", "exif:height"]
+        }
+    }
+}
+...
+```
+
+### Whitelisting only a few properties of a few aspects in a custom preset
+
+And finally, you can create any custom aspect following the same rules.
+
+```json
+...
+"content-metadata": {
+    "presets": {
+        "default": "*",
+        "kitten-images": {
+            "custom:aspect": "*",
+            "exif:exif": [ "exif:width", "exif:height"]
+        }
+    }
+}
+...
+```
+
+## What happens when there is a whitelisted aspect in the config but the given node doesn't relate to that aspect
+
+Nothing, this aspect (as it is not related to the node) will be simply ignored and not be displayed. The aspects to be displayed are calculated as an intersection of the preset's aspects and the aspects related to the node.
+
+<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
+<!-- seealso start -->
+<!-- seealso end -->
diff --git a/docs/content-node-dialog.service.md b/docs/content-node-dialog.service.md
new file mode 100644
index 0000000000..edb0a17451
--- /dev/null
+++ b/docs/content-node-dialog.service.md
@@ -0,0 +1,69 @@
+# Content Node Dialog service
+
+Displays and manages dialogs for selecting content to open, copy or upload.
+
+## Methods
+
+`openFileBrowseDialogByFolderId(folderNodeId: string): Observable<MinimalNodeEntryEntity[]>`<br/>
+Opens a file browser at a chosen folder location.
+
+`openFolderBrowseDialogByFolderId(folderNodeId: string): Observable<MinimalNodeEntryEntity[]>`<br/>
+Opens a folder browser at a chosen folder location.
+
+`openFileBrowseDialogBySite(): Observable<MinimalNodeEntryEntity[]>`<br/>
+Opens a file browser at a chosen site location.
+
+`openFolderBrowseDialogBySite(): Observable<MinimalNodeEntryEntity[]>`<br/>
+Opens a folder browser at a chosen site location.
+
+`openCopyMoveDialog(action: string, contentEntry: MinimalNodeEntryEntity, permission?: string): Observable<MinimalNodeEntryEntity[]>`<br/>
+Opens a dialog to copy or move an item to a new location.
+
+`openUploadFileDialog(action: string, contentEntry: MinimalNodeEntryEntity): Observable<MinimalNodeEntryEntity[]>`<br/>
+Opens a dialog to choose a file to upload.
+
+`openUploadFolderDialog(action: string, contentEntry: MinimalNodeEntryEntity): Observable<MinimalNodeEntryEntity[]>`<br/>
+Opens a dialog to choose a folder to upload.
+
+`close()`<br/>
+Closes the currently open dialog.
+
+## Details
+
+The `openXXX` methods return an 
+[Observable](http://reactivex.io/rxjs/manual/overview.html#observable) that you can subscribe
+to in order to get the information from the result:
+
+```ts
+import { ContentNodeDialogService } from '@adf/content-services'
+
+
+constructor(private contentDialogService: ContentNodeDialogService){}
+
+yourFunctionOnCopyOrMove(){
+        this.contentDialogService
+            .openCopyMoveDialog(actionName, targetNode, neededPermissionForAction)
+            .subscribe((selections: MinimalNodeEntryEntity[]) => {
+                // place your action here on operation success!
+            });
+}
+```
+
+The `openXXXByFolderId` methods let you set the initial folder location of the browser
+using a folder ID string. This can be obtained from the `id` property of a
+[MinimalNodeEntryEntity](document-library.model.md) object (returned from a previous
+dialog operation, say) or be set to one of the well-known names "-my-" , "-shared-" or
+"-root-".
+
+The `openCopyMoveDialog` and `openUploadXXX` methods require the following parameters:
+
+| Name | Type | Description |
+| ---- | ---- | ----------- |
+| action | string | The label for the confirm button of the dialog. |
+| contentEntry | [MinimalNodeEntryEntity](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/MinimalNode.md) | The node we want to be copied/moved or uploaded. |
+| neededPermissionForAction | string | (`openCopyMoveDialog` only) Permission required to perform the relative action (eg: copy will need the 'update' permission ). |
+
+## See Also
+
+-   [Content node selector panel component](content-node-selector-panel.component.md)
+-   [Content node selector component](content-node-selector.component.md)
diff --git a/docs/content-node-selector-panel.component.md b/docs/content-node-selector-panel.component.md
new file mode 100644
index 0000000000..afea02f65e
--- /dev/null
+++ b/docs/content-node-selector-panel.component.md
@@ -0,0 +1,47 @@
+# Content Node Selector Panel component
+
+Opens a [Content Node Selector](content-node-selector.component.md) in its own dialog window.
+
+## Basic Usage
+
+```html
+    <adf-content-node-selector-panel
+        [currentFolderId]="currentFolderId"
+        [dropdownHideMyFiles]="dropdownHideMyFiles"
+        [dropdownSiteList]="dropdownSiteList"
+        [rowFilter]="rowFilter"
+        [imageResolver]="imageResolver"
+        (select)="onSelect($event)">
+    </adf-content-node-selector-panel>
+```
+
+### Properties
+
+| Name | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| 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 More](sites-dropdown.component.md) |
+| dropdownSiteList | [SitePaging](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/SitePaging.md) |  | custom site for site dropdown same as siteList. [See More](sites-dropdown.component.md#properties) |
+| rowFilter | RowFilter | null | Custom row filter function. [See More](document-list.component.md#custom-row-filter) |
+| imageResolver | ImageResolver | null | Custom image resolver function. [See More](document-list.component.md#custom-image-resolver) |
+| pageSize | number | 10 | Number of items shown per page in the list |
+
+### Events
+
+| Name | Description |
+| ---- | ----------- |
+| select | Emitted when the user has selected an item |
+
+## Details
+
+This component opens a _content node selector_ in its own dialog window. This behaves a lot like the
+standard file open/save dialogs used by applications to choose files. Full details are given in the
+[Content Node Selector component](content-node-selector.component.md) page (this is similar but does
+not manage the dialog window for you). Also, the
+[Content Node Dialog service](content-node-dialog.service.md) has several methods that give you
+finer control over the behavior of the dialog.
+
+## See also
+
+-   [Content Node Selector component](content-node-selector.component.md)
+-   [Content Node Dialog service](content-node-dialog.service.md)
diff --git a/docs/content-node-selector.component.md b/docs/content-node-selector.component.md
index 509d1615eb..db45add79b 100644
--- a/docs/content-node-selector.component.md
+++ b/docs/content-node-selector.component.md
@@ -6,50 +6,22 @@ Allows a user to select items from a Content Services repository.
 
 ## Basic Usage
 
-```ts
-import { MatDialog } from '@angular/material';
- ...
-
-constructor(dialog: MatDialog ... ) {}
-
-openSelectorDialog() {
-    data: ContentNodeSelectorComponentData = {
-        title: "Choose an item",
-        currentFolderId: someFolderId,
-        select: new EventEmitter<MinimalNodeEntryEntity[]>()
-    };
-
-    this.dialog.open(
-        ContentNodeSelectorComponent,
-        {
-            data, panelClass: 'adf-content-node-selector-dialog',
-            width: '630px'
-        }
-    );
-
-    data.select.subscribe((selections: MinimalNodeEntryEntity[]) => {
-        // Use or store selection...
-
-        this.dialog.closeAll();
-    });
-}
-
-```
-
 ### Properties
 
 | Name | Type | Default | Description |
-| --- | --- | --- | --- |
+| ---- | ---- | ------- | ----------- |
 | title | string | "" | Text shown at the top of the selector |
 | currentFolderId | string | null | Node ID of the folder currently listed |
-| rowFilter | RowFilter | null | Custom row filter function |
-| imageResolver | ImageResolver | null | Custom image resolver function |
+| dropdownHideMyFiles | boolean | false | Hide the "My Files" option added to the site list by default. [See More](sites-dropdown.component.md) |
+| dropdownSiteList | [SitePaging](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/SitePaging.md) |  | custom site for site dropdown same as siteList. [See More](sites-dropdown.component.md#properties) |
+| rowFilter | RowFilter | null | Custom row filter function. [See More](document-list.component.md#custom-row-filter) |
+| imageResolver | ImageResolver | null | Custom image resolver function. [See More](document-list.component.md#custom-image-resolver) |
 | pageSize | number | 10 | Number of items shown per page in the list |
 
 ### Events
 
 | Name | Description |
-| --- | --- |
+| ---- | ----------- |
 | select | Emitted when the user has selected an item |
 
 ## Details
@@ -62,7 +34,7 @@ of Copy/Move actions (see the [Content Action component](content-action.componen
 more information).
 
 Unlike most components, the Content Node Selector is typically shown in a dialog box
-rather than the main page. You can use the
+rather than the main page and you are responsible for opening the dialog yourself. You can use the
 [Angular Material Dialog](https://material.angular.io/components/dialog/overview) for this,
 as shown in the usage example. ADF provides the `ContentNodeSelectorComponentData` interface
 to work with the Dialog's
@@ -78,6 +50,52 @@ interface ContentNodeSelectorComponentData {
 }
 ```
 
+If you don't want to manage the dialog yourself then it is easier to use the
+[Content Node Selector Panel component](content-node-selector-panel.component.md), or the
+methods of the [Content Node Dialog service](content-node-dialog.service.md), which create
+the dialog for you.
+
+### Usage example
+
+```ts
+import { MatDialog } from '@angular/material';
+import { ContentNodeSelectorComponentData, ContentNodeSelectorComponent} from '@adf/content-services'
+import { Subject } from 'rxjs/Subject';
+ ...
+
+constructor(dialog: MatDialog ... ) {}
+
+openSelectorDialog() {
+    data: ContentNodeSelectorComponentData = {
+        title: "Choose an item",
+        currentFolderId: someFolderId,
+        select: new Subject<MinimalNodeEntryEntity[]>()
+    };
+
+    this.dialog.open(
+        ContentNodeSelectorComponent,
+        {
+            data, panelClass: 'adf-content-node-selector-dialog',
+            width: '630px'
+        }
+    );
+
+    data.select.subscribe((selections: MinimalNodeEntryEntity[]) => {
+        // Use or store selection...
+    }, 
+    (error)=>{
+        //your error handling
+    }, 
+    ()=>{
+        //action called when an action or cancel is clicked on the dialog
+        this.dialog.closeAll();
+    });
+}
+```
+
+All the results will be streamed to the select [subject](http://reactivex.io/rxjs/manual/overview.html#subject) present in the `ContentNodeSelectorComponentData` object passed to the dialog.
+When the dialog action is selected by clicking, the `data.select` stream will be completed.
+
 ### RowFilter and ImageResolver
 
 The Content Node Selector uses a [Document List](document-list.component.md) to display the
@@ -88,9 +106,8 @@ a row filter to hide document nodes in a folder selector. See the
 [Advanced Usage and Customization](document-list.component.md#advanced-usage-and-customization)
 section of the Document List page to learn how these functions are implemented.
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Document list component](document-list.component.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [Document list component](document-list.component.md)
+-   [Content Node Selector Panel component](content-node-selector-panel.component.md)
+-   [Content Node Dialog service](content-node-dialog.service.md)
diff --git a/docs/content.service.md b/docs/content.service.md
index ad9a55a5c3..fbe9eb5928 100644
--- a/docs/content.service.md
+++ b/docs/content.service.md
@@ -28,7 +28,7 @@ some cases by viewing it directly in the browser via a special URL that referenc
 the Blob. For example, you could use the Blob interface to construct an image in the
 [PNG format](https://en.wikipedia.org/wiki/Portable_Network_Graphics). Since
 PNG is a format the browser can display, you could use the Blob's URL in an
-&lt;img&gt; element to view the image within the page. Alternatively, you could let
+&lt;img> element to view the image within the page. Alternatively, you could let
 the user download it as a PNG file.
 
 The `downloadBlob` method starts a download of the Blob data to the `filename`
@@ -40,20 +40,14 @@ for details of how a Blob's contents are assembled from the constructor argument
 Use `createdTrustedUrl` to generate a URL string for a Blob. The URL refers to
 the Blob as though it were a file but it is actually an object stored in memory,
 so it does not persist across browser sessions. This URL can be used much like any
-other, so you could use it for the `src` attribute of an &lt;img&gt; element or the
+other, so you could use it for the `src` attribute of an &lt;img> element or the
 `href` of a download link. Note that while the URL is 'trusted', the data it contains
 is not necessarily trustworthy unless you can vouch for it yourself; be careful that
 the data doesn't expose your app to
 [Cross Site Scripting](https://en.wikipedia.org/wiki/Cross-site_scripting)
 attacks.
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Cookie service](cookie.service.md)
-- [Storage service](storage.service.md)
-<!-- seealso end -->
-
-
-
+-   [Cookie service](cookie.service.md)
+-   [Storage service](storage.service.md)
diff --git a/docs/content.widget.md b/docs/content.widget.md
index f1fa2b000f..903a1489e7 100644
--- a/docs/content.widget.md
+++ b/docs/content.widget.md
@@ -1,18 +1,6 @@
 # Activiti Content Component
 
-The component shows the content preview.
-
-<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
-
-<!-- toc -->
-
-- [Basic Usage](#basic-usage)
-  * [Properties](#properties)
-  * [Events](#events)
-
-<!-- tocstop -->
-
-<!-- markdown-toc end -->
+Shows the content preview.
 
 ## Basic Usage
 
@@ -27,11 +15,11 @@ The component shows the content preview.
 The recommended set of properties can be found in the following table:
 
 | Name | Type | Default | Description |
-| --- | --- | --- | --- |
+| ---- | ---- | ------- | ----------- |
 | contentId | string |  | The content id to show. |
 
 ### Events
 
 | Name | Description |
-| --- | --- |
-| contentClick | Invoked when the content is clicked. |
\ No newline at end of file
+| ---- | ----------- |
+| contentClick | Invoked when the content is clicked. |
diff --git a/docs/context-menu.directive.md b/docs/context-menu.directive.md
index 3f0dd41fe0..c4067fb0f0 100644
--- a/docs/context-menu.directive.md
+++ b/docs/context-menu.directive.md
@@ -1,15 +1,6 @@
 # Context Menu directive
 
-<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
-
-<!-- toc -->
-
-- [Basic Usage](#basic-usage)
-- [Details](#details)
-
-<!-- tocstop -->
-
-<!-- markdown-toc end -->
+Adds a context menu to a component.
 
 ## Basic Usage
 
@@ -48,8 +39,8 @@ export class MyComponent implements OnInit {
 ### Properties
 
 | Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| showIcons | boolean | false | Render defined icons  |
+| ---- | ---- | ------- | ----------- |
+| showIcons | boolean | false | Render defined icons |
 
 ## Details
 
diff --git a/docs/create-process-attachment.component.md b/docs/create-process-attachment.component.md
index a4173999e2..d499d9e23c 100644
--- a/docs/create-process-attachment.component.md
+++ b/docs/create-process-attachment.component.md
@@ -17,12 +17,12 @@ Displays Upload Component (Drag and Click) to upload the attachment to a specifi
 ### Properties
 
 | Name | Type | Description |
-| --- | --- | --- |
-| processInstanceId | string | (**required**): The ID of the process instance to display |
+| ---- | ---- | ----------- |
+| processInstanceId | `string` | (required) The ID of the process instance to display.  |
 
 ### Events
 
-| Name | Description |
-| --- | --- |
-| error | Raised when the error occurred while creating/uploading the attachment by the user from within the component |
-| success | Raised when the attachment created/uploaded successfully from within the component |
+| Name | Type | Description |
+| ---- | ---- | ----------- |
+| error | `EventEmitter<any>` | Emitted when an error occurs while creating or uploading an attachment from the user within the component. |
+| success | `EventEmitter<any>` | Emitted when an attachment is successfully created or uploaded from within the component. |
diff --git a/docs/create-task-attachment.component.md b/docs/create-task-attachment.component.md
index ed32812b0d..3528fd635e 100644
--- a/docs/create-task-attachment.component.md
+++ b/docs/create-task-attachment.component.md
@@ -17,12 +17,12 @@ Displays Upload Component (Drag and Click) to upload the attachment to a specifi
 ### Properties
 
 | Name | Type | Description |
-| --- | --- | --- |
+| ---- | ---- | ----------- |
 | taskId | string | (**required**): The numeric ID of the task to display |
 
 ### Events
 
 | Name | Description |
-| --- | --- |
+| ---- | ----------- |
 | error | Raised when the error occurred while creating/uploading the attachment by the user from within the component |
 | success | Raised when the attachment created/uploaded successfully from within the component |
diff --git a/docs/data-column.component.md b/docs/data-column.component.md
index 1e11cf73eb..f8d5d31aaf 100644
--- a/docs/data-column.component.md
+++ b/docs/data-column.component.md
@@ -2,24 +2,20 @@
 
 Defines column properties for DataTable, Tasklist, Document List and other components.
 
-<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
+## Contents
 
-<!-- toc -->
+-   [Basic Usage](#basic-usage)
 
-- [Basic Usage](#basic-usage)
-  * [Properties](#properties)
-- [Details](#details)
-  * [Automatic column header translation](#automatic-column-header-translation)
-  * [Custom tooltips](#custom-tooltips)
-  * [Column Template](#column-template)
-  * [Styling Techniques](#styling-techniques)
-    + [Custom icons for selected rows](#custom-icons-for-selected-rows)
-    + [Hiding columns on small screens](#hiding-columns-on-small-screens)
-- [See also](#see-also)
+    -   [Properties](#properties)
 
-<!-- tocstop -->
+-   [Details](#details)
 
-<!-- markdown-toc end -->
+    -   [Automatic column header translation](#automatic-column-header-translation)
+    -   [Custom tooltips](#custom-tooltips)
+    -   [Column Template](#column-template)
+    -   [Styling Techniques](#styling-techniques)
+
+-   [See also](#see-also)
 
 ## Basic Usage
 
@@ -37,17 +33,16 @@ Defines column properties for DataTable, Tasklist, Document List and other compo
 
 ### Properties
 
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| key | string | | Data source key, can be either column/property key like `title` or property path like `createdBy.name` |
-| type | string | text | Value type for the column. Possible settings are 'text', 'image', 'date', 'fileSize' and 'location'. |
-| format | string | | Value format (if supported by components), for example format of the date |
-| sortable | boolean | true | Toggles ability to sort by this column, for example by clicking the column header |
-| title | string | | Display title of the column, typically used for column headers. You can use the i18n resouce key to get it translated automatically. |
-| template | `TemplateRef` | | Custom column template |
-| sr-title | string | | Screen reader title, used for accessibility purposes |
-| class | string | | Additional CSS class to be applied to column (header and cells) |
-| formatTooltip | Function | | Custom tooltip formatter function. |
+| Name | Type | Description |
+| ---- | ---- | ----------- |
+| key | `string` | Data source key. Can be either a column/property key like `title` or a property path like `createdBy.name`.  |
+| type | `string` | Value type for the column. Possible settings are 'text', 'image', 'date', 'fileSize' and 'location'.<br/> Default value: `'text'` |
+| format | `string` | Value format (if supported by the parent component), for example format of the date.  |
+| sortable | `boolean` | Toggles ability to sort by this column, for example by clicking the column header. <br/> Default value: `true` |
+| title | `string` | Display title of the column, typically used for column headers. You can use the i18n resource key to get it translated automatically.<br/> Default value: `''` |
+| formatTooltip | `Function` | Custom tooltip formatter function.  |
+| srTitle | `string` | Title to be used for screen readers.  |
+| cssClass | `string` | Additional CSS class to be applied to column (header and cells).  |
 
 ## Details
 
@@ -105,9 +100,9 @@ You can provide custom column/cell templates that may contain other Angular comp
 Every cell in the DataTable component is bound to the dynamic data context containing the following properties:
 
 | Name | Type | Description |
-| --- | --- | --- |
+| ---- | ---- | ----------- |
 | data | [DataTableAdapter](DataTableAdapter.md) | Data adapter instance. |
-| row | [DataRow](DataTableAdapter.md) | Current data row instance.  |
+| row | [DataRow](DataTableAdapter.md) | Current data row instance. |
 | col | [DataColumn](DataTableAdapter.md) | Current data column instance. |
 
 You can use all three properties to gain full access to underlying data from within your custom templates. 
@@ -145,7 +140,7 @@ You may want using **row** api to get raw value access.
 </data-column>
 ```
 
-Use **data** api to get values with post-processing, like datetime/icon conversion._
+Use **data** api to get values with post-processing, like datetime/icon conversion.\_
 
 In the Example below we will prepend `Hi!` to each file and folder name in the list: 
 
@@ -180,7 +175,7 @@ You can add a custom CSS class to a column using its `class` property. This is u
 many purposes - some examples are given below.
 
 #### Custom icons for selected rows
- 
+
 Custom styling can be used to change the look and feel of the icon for the selected rows.
 
 Let's start by assigning an "image-table-cell" class to the thumbnail column:
@@ -272,10 +267,12 @@ Now you can declare columns and assign `desktop-only` class where needed:
 ![Responsive Mobile](docassets/images/responsive-mobile.png)
 
 <!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
+
 <!-- seealso start -->
+
 ## See also
 
-- [Document list component](document-list.component.md)
-- [Datatable component](datatable.component.md)
-- [Task list component](task-list.component.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [Document list component](document-list.component.md)
+-   [Datatable component](datatable.component.md)
+-   [Task list component](task-list.component.md)
+    <!-- seealso end -->
diff --git a/docs/datatable.component.md b/docs/datatable.component.md
index 292893a4d9..f86ea0fcde 100644
--- a/docs/datatable.component.md
+++ b/docs/datatable.component.md
@@ -6,31 +6,23 @@ Displays data as a table with customizable columns and presentation.
 
 See it live: [DataTable Quickstart](https://embed.plnkr.co/80qr4YFBeHjLMdAV0F6l/)
 
-<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
+## Contents
 
-<!-- toc -->
+-   [Basic usage](#basic-usage)
 
-- [Basic usage](#basic-usage)
-  * [Properties](#properties)
-  * [Events](#events)
-- [Details](#details)
-  * [Supplying data for the table](#supplying-data-for-the-table)
-  * [Customizing columns](#customizing-columns)
-  * [DataTable DOM Events](#datatable-dom-events)
-  * [Custom Empty content template](#custom-empty-content-template)
-  * [Loading content template](#loading-content-template)
-  * [Events](#events-1)
-    + [row-keyup DOM event](#row-keyup-dom-event)
-    + [rowClick event](#rowclick-event)
-    + [rowDblClick event](#rowdblclick-event)
-    + [showRowContextMenu event](#showrowcontextmenu-event)
-    + [showRowActionsMenu event](#showrowactionsmenu-event)
-    + [executeRowAction event](#executerowaction-event)
-- [See also](#see-also)
+    -   [Properties](#properties)
+    -   [Events](#events)
 
-<!-- tocstop -->
+-   [Details](#details)
 
-<!-- markdown-toc end -->
+    -   [Supplying data for the table](#supplying-data-for-the-table)
+    -   [Customizing columns](#customizing-columns)
+    -   [DataTable DOM Events](#datatable-dom-events)
+    -   [Custom Empty content template](#custom-empty-content-template)
+    -   [Loading content template](#loading-content-template)
+    -   [Events](#events-1)
+
+-   [See also](#see-also)
 
 ## Basic usage
 
@@ -127,26 +119,26 @@ export class DataTableDemo {
 ### Properties
 
 | Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| selectionMode | string | 'single' | Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows.  |
-| rowStyle | string | | The inline style to apply to every row, see [NgStyle](https://angular.io/docs/ts/latest/api/common/index/NgStyle-directive.html) 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 none, `single` or `multiple`. For `multiple` mode you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows. |
+| rowStyle | string |  | The inline style to apply to every row, see [NgStyle](https://angular.io/docs/ts/latest/api/common/index/NgStyle-directive.html) docs for more details and usage examples |
+| rowStyleClass | string |  | The CSS class to apply to every row |
 | data | DataTableAdapter | instance of **ObjectDataTableAdapter** | data source |
-| rows | Object[] | [] | The rows that the datatable should show |
+| rows | Object\[] | \[] | The rows that the datatable should show |
 | multiselect | boolean | false | Toggles multiple row selection, renders checkboxes at the beginning of each row |
 | actions | boolean | false | Toggles data actions column |
-| actionsPosition | string (left\|right) | right | Position of the actions dropdown menu. | 
-| fallbackThumbnail | string |  | Fallback image for row where thumbnail is missing|
+| actionsPosition | string (left\|right) | right | Position of the actions dropdown menu. |
+| fallbackThumbnail | string |  | Fallback image for row where thumbnail is missing |
 | contextMenu | boolean | false | Toggles custom context menu for the component |
 | allowDropFiles | boolean | false | Toggle file drop support for rows (see **ng2-alfresco-core/UploadDirective** for more details) |
-| loading | boolean | false | Flag that indicates if the datatable is in loading state and needs to show the loading template. Read the documentation above to see how to configure a loading template  |
+| loading | boolean | false | Flag that indicates if the datatable is in loading state and needs to show the loading template. Read the documentation above to see how to configure a loading template |
 | showHeader | boolean | true | Toggles header visibility |
-| selection | DataRow[] | [] | Contains selected rows |
+| selection | DataRow\[] | \[] | Contains selected rows |
 
 ### Events
 
-| Name | Description
-| --- | --- |
+| Name | Description |
+| ---- | ----------- |
 | [rowClick](#rowclick-event) | Emitted when user clicks the row |
 | [rowDblClick](#rowdblclick-event) | Emitted when user double-clicks the row |
 | [showRowContextMenu](#showrowcontextmenu-event) | Emitted before context menu is displayed for a row |
@@ -174,12 +166,12 @@ Below are the DOM events raised by DataTable component.
 These events bubble up the component tree and can be handled by any parent component.
 
 | Name | Description |
-| --- | --- |
+| ---- | ----------- |
 | row-click | Raised when user clicks a row |
 | row-dblclick | Raised when user double-clicks a row |
 | row-select | Raised after user selects a row |
 | row-unselect | Raised after user unselects a row |
-| row-keyup | Raised on the 'keyup' event for the focused row.  |
+| row-keyup | Raised on the 'keyup' event for the focused row. |
 
 For example:
 
@@ -250,8 +242,8 @@ You can use any HTML layout or Angular component as a content of the empty templ
 </adf-datatable>
 ```
 
-| Name | Type | Default | Description
-| --- | --- | --- | --- |
+| Name | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
 | emptyListImageUrl | String | empty_doc_lib.svg | The default image used as background |
 | emptyMsg | String | This list is empty | The default title message |
 | dragDropMsg | String | Drag and drop | The default drag and drop message |
@@ -462,11 +454,13 @@ where you can handle the process, inspect the action payload and all custom prop
 and do corresponding actions.
 
 <!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
+
 <!-- seealso start -->
+
 ## See also
 
-- [Data column component](data-column.component.md)
-- [Pagination component](pagination.component.md)
-- [DataTableAdapter](DataTableAdapter.md)
-- [Document list component](document-list.component.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [Data column component](data-column.component.md)
+-   [Pagination component](pagination.component.md)
+-   [DataTableAdapter](DataTableAdapter.md)
+-   [Document list component](document-list.component.md)
+    <!-- seealso end -->
diff --git a/docs/docassets/images/ContentActSnackMessage.png b/docs/docassets/images/ContentActSnackMessage.png
new file mode 100644
index 0000000000..ef100c31f5
Binary files /dev/null and b/docs/docassets/images/ContentActSnackMessage.png differ
diff --git a/docs/docassets/images/ContentMetadata.png b/docs/docassets/images/ContentMetadata.png
new file mode 100644
index 0000000000..f643f199e4
Binary files /dev/null and b/docs/docassets/images/ContentMetadata.png differ
diff --git a/docs/docassets/images/NotiService.png b/docs/docassets/images/NotiService.png
new file mode 100644
index 0000000000..0bcdf574a3
Binary files /dev/null and b/docs/docassets/images/NotiService.png differ
diff --git a/docs/docassets/images/process-attachment-list.png b/docs/docassets/images/process-attachment-list.png
new file mode 100644
index 0000000000..f9c6c70421
Binary files /dev/null and b/docs/docassets/images/process-attachment-list.png differ
diff --git a/docs/docassets/images/select-apps-dialog.png b/docs/docassets/images/select-apps-dialog.png
new file mode 100644
index 0000000000..a5f9501a92
Binary files /dev/null and b/docs/docassets/images/select-apps-dialog.png differ
diff --git a/docs/docassets/images/sidebar-action-menu-button.png b/docs/docassets/images/sidebar-action-menu-button.png
new file mode 100644
index 0000000000..44523e8660
Binary files /dev/null and b/docs/docassets/images/sidebar-action-menu-button.png differ
diff --git a/docs/docassets/images/sidebar-action-menu-icon.png b/docs/docassets/images/sidebar-action-menu-icon.png
new file mode 100644
index 0000000000..22a70eaa5d
Binary files /dev/null and b/docs/docassets/images/sidebar-action-menu-icon.png differ
diff --git a/docs/docassets/images/start_process.png b/docs/docassets/images/start_process.png
new file mode 100644
index 0000000000..ac808e5c63
Binary files /dev/null and b/docs/docassets/images/start_process.png differ
diff --git a/docs/document-list.component.md b/docs/document-list.component.md
index e5514502d4..f23ec46e80 100644
--- a/docs/document-list.component.md
+++ b/docs/document-list.component.md
@@ -4,37 +4,35 @@ Displays the documents from a repository.
 
 ![Custom columns](docassets/images/custom-columns.png)
 
-<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
+## Contents
 
-<!-- toc -->
+-   [Basic Usage](#basic-usage)
 
-- [Basic Usage](#basic-usage)
-  * [Properties](#properties)
-  * [Events](#events)
-- [Details](#details)
-  * [DOM Events](#dom-events)
-  * [Pagination strategy](#pagination-strategy)
-  * [Data Sources](#data-sources)
-    + [Node ID](#node-id)
-    + [Repository aliases](#repository-aliases)
-    + [DocumentList aliases](#documentlist-aliases)
-  * [Setting default folder](#setting-default-folder)
-  * [Calling DocumentList api directly](#calling-documentlist-api-directly)
-  * [Underlying node object](#underlying-node-object)
-  * [Custom columns](#custom-columns)
-  * [Date Column](#date-column)
-  * [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)
-- [See also](#see-also)
+    -   [Properties](#properties)
+    -   [Events](#events)
 
-<!-- tocstop -->
+-   [Details](#details)
 
-<!-- markdown-toc end -->
+    -   [DOM Events](#dom-events)
+    -   [Pagination strategy](#pagination-strategy)
+    -   [Data Sources](#data-sources)
+    -   [Setting default folder](#setting-default-folder)
+    -   [Calling DocumentList api directly](#calling-documentlist-api-directly)
+    -   [Underlying node object](#underlying-node-object)
+    -   [Custom columns](#custom-columns)
+    -   [Date Column](#date-column)
+    -   [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)
+
+-   [See also](#see-also)
 
 ## Basic Usage
 
@@ -49,56 +47,55 @@ Displays the documents from a repository.
 
 ### Properties
 
-The properties currentFolderId, folderNode and node are the entry initialization properties of the document list. They cannot be used together, choose the one that suites more your use case.
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| permissionsStyle | [PermissionStyleModel[]](permissions-style.model.md) | null | Define a set of CSS styles styles to apply depending on the permission of the user on that node. See the [Permission Style model](permissions-style.model.md) page for further details and examples. | 
-| locationFormat | string | '/' | The default route for all the location-based columns (if declared). |
-| navigate | boolean | true | Toggles navigation to folder content or file preview |
-| navigationMode | string (click,dblclick) | dblclick | User interaction for folder navigation or file preview |
-| thumbnails | boolean | false | Show document thumbnails rather than icons |
-| selectionMode | string | 'single' | Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows.  |
-| multiselect | boolean | false | Toggles multiselect mode |
-| contentActions | boolean | false | Toggles content actions for each row |
-| contentActionsPosition | string (left\|right) | right | Position of the content actions dropdown menu. |
-| contextMenuActions | boolean | false | Toggles context menus for each row |
-| emptyFolderImageUrl | string | assets/images/empty_doc_lib.svg | Custom image for empty folder |
-| allowDropFiles | boolean | false | Toggle file drop support for rows (see **ng2-alfresco-core/UploadDirective** for more details) |
-| sorting | string[] | | 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 default sorting detected by the component based on columns. |
-| rowStyle | string | | The inline style to apply to every row, see [NgStyle](https://angular.io/docs/ts/latest/api/common/index/NgStyle-directive.html) docs for more details and usage examples |
-| rowStyleClass | string | | The CSS class to apply to every row |
-| 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. |
-| rowFilter | `RowFilter` | | Custom row filter, [see more](#custom-row-filter). |
-| imageResolver | `ImageResolver` | | Custom image resolver, [see more](#custom-image-resolver). |
-| currentFolderId | string | null | The ID of the folder node to display or a reserved string alias for special sources (see **Data Sources**) |
-| folderNode | [MinimalNodeEntryEntity](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.md) | null | Currently displayed folder node | 
-| node | [NodePaging](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodePaging.md) | null | Document list will show all the nodes contained in the NodePaging entity  | 
-| maxItems | number | Default value is stored into user preference settings | determine the size of the page for the element into document list |
-| skipCount | number | 0 | element to skip over for pagination purpose |
-| enableInfiniteScrolling | boolean | true | Enable documentlist to work into infinite scrolling mode |
+| Name | Type | Description |
+| ---- | ---- | ----------- |
+| permissionsStyle | `PermissionStyleModel[]` | Define a set of CSS styles styles to apply depending on the permission of the user on that node. See the Permission Style model page for further details and examples.<br/> Default value: `[]` |
+| locationFormat | `string` | The default route for all the location-based columns (if declared). <br/> Default value: `'/'` |
+| navigate | `boolean` | Toggles navigation to folder content or file preview <br/> Default value: `true` |
+| navigationMode | `string` | User interaction for folder navigation or file preview. Valid values are "click" and "dblclick". <br/> Default value: `DocumentListComponent.DOUBLE_CLICK_NAVIGATION` |
+| thumbnails | `boolean` | Show document thumbnails rather than icons <br/> Default value: `false` |
+| selectionMode | `string` | 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.<br/> Default value: `'single'` |
+| multiselect | `boolean` | Toggles multiselect mode <br/> Default value: `false` |
+| contentActions | `boolean` | Toggles content actions for each row <br/> Default value: `false` |
+| contentActionsPosition | `string` | Position of the content actions dropdown menu. Can be set to "left" or "right". <br/> Default value: `'right'` |
+| contextMenuActions | `boolean` | Toggles context menus for each row <br/> Default value: `false` |
+| emptyFolderImageUrl | `string` | Custom image for empty folder <br/> Default value: `'./assets/images/empty_doc_lib.svg'` |
+| allowDropFiles | `boolean` | Toggle file drop support for rows (see Upload Directive for further details <br/> Default value: `false` |
+| sorting | `string[]` | 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. |
+| 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  |
+| loading | `boolean` | Toggles the loading state and animated spinners for the component. Used in combination with `navigate=false` to perform custom navigation and loading state indication.<br/> Default value: `false` |
+| rowFilter | `any` | Custom row filter <br/> Default value: `null` |
+| imageResolver | `any` | Custom image resolver <br/> Default value: `null` |
+| currentFolderId | `string` | The ID of the folder node to display or a reserved string alias for special sources <br/> Default value: `null` |
+| folderNode | `MinimalNodeEntryEntity` | Currently displayed folder node <br/> Default value: `null` |
+| node | `NodePaging` | The Document list will show all the nodes contained in the NodePaging entity <br/> Default value: `null` |
+| maxItems | `number` | Default value is stored into user preference settings  |
+| skipCount | `number` | Number of elements to skip over for pagination purposes <br/> Default value: `0` |
+| enableInfiniteScrolling | `boolean` | Set document list to work in infinite scrolling mode <br/> Default value: `false` |
 
 ### Events
 
-| Name | Description |
-| --- | --- |
-| nodeClick | emitted when user clicks a list node |
-| nodeDblClick | emitted when user double-clicks list node |
-| folderChange | emitted once current display folder has changed |
-| preview | emitted when user acts upon files with either single or double click (depends on `navigation-mode`), recommended for Viewer components integration  |
-| permissionError | emitted when user is attempting to create a folder via action menu without having the permission to do it |
-| ready | emitted when the documentList is ready and loads all the elements|
-| error | emitted when API fails to get documentList data|
+| Name | Type | Description |
+| ---- | ---- | ----------- |
+| nodeClick | `EventEmitter<NodeEntityEvent>` | Emitted when the user clicks a list node |
+| nodeDblClick | `EventEmitter<NodeEntityEvent>` | Emitted when the user double-clicks a list node |
+| folderChange | `EventEmitter<NodeEntryEvent>` | Emitted when the current display folder changes |
+| 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 |
+| error | `EventEmitter<any>` | Emitted when the API fails to get the Document List data |
 
 ## Details
 
+The properties currentFolderId, folderNode and node are the entry initialization properties of the document list. They cannot be used together, so choose the one that suits your use case best.
+
 ### DOM Events
 
 Below are the DOM events the DocumentList component emits.
 All of them are `bubbling`, meaning you can handle them in any component up the parent hierarchy, even if DocumentList is wrapped by another component(s).
 
 | Name | Description |
-| --- | --- |
+| ---- | ----------- |
 | node-click | Raised when user clicks the node |
 | node-dblclick | Raised when user double-clicks the node |
 | node-select | Raised when user selects a node |
@@ -134,8 +131,8 @@ Below is a basic example of handling DOM events in the parent elements.
 
 The Document List by default supports 2 type of pagination, the **finite** and the **infinite** pagination. 
 
-- With the **finite** pagination you must provide document list with 2 parameters : maxItems and skipCount.
-- With the **infinite** pagination you must provide documentlist with 3 parameters : enableInfiniteScrolling, maxItems and skipCount.
+-   With the **finite** pagination you must provide document list with 2 parameters : maxItems and skipCount.
+-   With the **infinite** pagination you must provide documentlist with 3 parameters : enableInfiniteScrolling, maxItems and skipCount.
 
 ### Data Sources
 
@@ -149,20 +146,20 @@ The unique identifier of the Node. Gets automatically updated when you perform n
 
 You can use one of the well-known reserved aliases:
 
-- `-root-`
-- `-shared-`
-- `-my-`
+-   `-root-`
+-   `-shared-`
+-   `-my-`
 
 #### DocumentList aliases
 
 The DocumentList component also provides support for the following reserved aliases you can use:
 
-- `-trashcan-`,
-- `-sharedlinks-`
-- `-sites-`
-- `-mysites-`
-- `-favorites-`
-- `-recent-`
+-   `-trashcan-`,
+-   `-sharedlinks-`
+-   `-sites-`
+-   `-mysites-`
+-   `-favorites-`
+-   `-recent-`
 
 Note that due to specific origin of the data the sources above do not support navigation.
 You may want handling single and double clicks yourself to perform navigation to other sources.
@@ -177,13 +174,13 @@ There's a possibility to set the default location format using "locationFormat"
 
 The default column layout for non-reserved views is:
 
-- Icon
-- Name
-- Size
-- Modified (date)
-- Modified by
+-   Icon
+-   Name
+-   Size
+-   Modified (date)
+-   Modified by
 
-__Trashcan__
+**Trashcan**
 
 ```html
 <adf-document-list
@@ -194,14 +191,14 @@ __Trashcan__
 
 Default layout:
 
-- Icon
-- Name
-- Location
-- Size
-- Deleted
-- Deleted by
+-   Icon
+-   Name
+-   Location
+-   Size
+-   Deleted
+-   Deleted by
 
-__Shared Links__
+**Shared Links**
 
 ```html
 <adf-document-list
@@ -212,15 +209,15 @@ __Shared Links__
 
 Default layout:
 
-- Icon
-- Name
-- Location
-- Size
-- Modified
-- Modified by
-- Shared by
+-   Icon
+-   Name
+-   Location
+-   Size
+-   Modified
+-   Modified by
+-   Shared by
 
-__Sites__
+**Sites**
 
 ```html
 <adf-document-list
@@ -230,11 +227,11 @@ __Sites__
 
 Default layout:
 
-- Icon
-- Title
-- Status
+-   Icon
+-   Title
+-   Status
 
-__My Sites__
+**My Sites**
 
 ```html
 <adf-document-list
@@ -244,11 +241,11 @@ __My Sites__
 
 Default layout:
 
-- Icon
-- Title
-- Status
+-   Icon
+-   Title
+-   Status
 
-__Favorites__
+**Favorites**
 
 ```html
 <adf-document-list
@@ -259,14 +256,14 @@ __Favorites__
 
 Default layout:
 
-- Icon
-- Name
-- Location
-- Size
-- Modified
-- Modified by
+-   Icon
+-   Name
+-   Location
+-   Size
+-   Modified
+-   Modified by
 
-__Recent Files__
+**Recent Files**
 
 ```html
 <adf-document-list
@@ -277,9 +274,9 @@ __Recent Files__
 
 Default layout:
 
-- Icon
-- Name
-- Location
+-   Icon
+-   Name
+-   Location
 
 ### Setting default folder
 
@@ -516,12 +513,12 @@ _For granular permissions, the Location Column may or may not render link locati
 
 You are going to use it with custom navigation or when displaying content from the sources like:
 
-- Sites
-- My Sites
-- Shared Links
-- Recent Files
-- Favorites
-- Trashcan
+-   Sites
+-   My Sites
+-   Shared Links
+-   Recent Files
+-   Favorites
+-   Trashcan
 
 or any other location that needs nagivating to the node parent folder easily.
 
@@ -566,7 +563,7 @@ actions you have defined in a context menu:
 @Component({
     selector: 'my-view',
     template: `
-        <adf-document-list>...</adf-document-list>
+        <adf-document-list [contextMenuActions]="true">...</adf-document-list>
         <context-menu-holder></context-menu-holder>
     `
 })
@@ -584,11 +581,11 @@ By default DocumentList component uses 'double-click' mode for navigation.
 That means user will see the contents of the folder by double-clicking its name
 or icon (similar to Google Drive behaviour). However it is possible switching to 
 other modes, like single-click navigation for example.
- 
+
 The following navigation modes are supported:
 
-- **click**
-- **dblclick**
+-   **click**
+-   **dblclick**
 
 The following example switches navigation to single clicks:
 
@@ -756,23 +753,26 @@ This can be changed by means of the custom html template:
 That will give the following output:
 
 ![Custom no permission](docassets/images/no-permission-custom.png)
+
 <!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
+
 <!-- seealso start -->
+
 ## See also
 
-- [Datatable component](datatable.component.md)
-- [Data column component](data-column.component.md)
-- [Pagination component](pagination.component.md)
-- [Infinite pagination component](infinite-pagination.component.md)
-- [Sites dropdown component](sites-dropdown.component.md)
-- [Metadata indicators](metadata-indicators.md)
-- [Document library model](document-library.model.md)
-- [Nodes api service](nodes-api.service.md)
-- [Breadcrumb component](breadcrumb.component.md)
-- [Content action component](content-action.component.md)
-- [Content node selector component](content-node-selector.component.md)
-- [Document list service](document-list.service.md)
-- [Dropdown breadcrumb component](dropdown-breadcrumb.component.md)
-- [Permissions style model](permissions-style.model.md)
-- [Version manager component](version-manager.component.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [Datatable component](datatable.component.md)
+-   [Data column component](data-column.component.md)
+-   [Pagination component](pagination.component.md)
+-   [Infinite pagination component](infinite-pagination.component.md)
+-   [Sites dropdown component](sites-dropdown.component.md)
+-   [Metadata indicators](metadata-indicators.md)
+-   [Document library model](document-library.model.md)
+-   [Nodes api service](nodes-api.service.md)
+-   [Breadcrumb component](breadcrumb.component.md)
+-   [Content action component](content-action.component.md)
+-   [Content node selector component](content-node-selector.component.md)
+-   [Document list service](document-list.service.md)
+-   [Dropdown breadcrumb component](dropdown-breadcrumb.component.md)
+-   [Permissions style model](permissions-style.model.md)
+-   [Version manager component](version-manager.component.md)
+    <!-- seealso end -->
diff --git a/docs/dropdown-breadcrumb.component.md b/docs/dropdown-breadcrumb.component.md
index 0f0aba167b..81c28f5a18 100644
--- a/docs/dropdown-breadcrumb.component.md
+++ b/docs/dropdown-breadcrumb.component.md
@@ -16,22 +16,24 @@ Indicates the current position within a navigation hierarchy using a dropdown me
 ### Properties
 
 | Name | Type | Description |
-| --- | --- | --- |
+| ---- | ---- | ----------- |
 | target | DocumentListComponent | (optional) DocumentList component to operate with. Upon clicks will instruct the given component to update. |
 | folderNode | [MinimalNodeEntryEntity](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.md) | Active node, builds UI based on `folderNode.path.elements` collection. |
-| root | string |  (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 i18n resource key for the property value. |
+| root | string | (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 i18n resource key for the property value. |
 | rootId | string | (optional) The id of the root element. You can use this property to set a custom element the breadcrumb should start with. |
 
 ### Events
 
 | Name | Returned Type | Description |
-| --- | --- | --- |
-| navigate | [PathElementEntity](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/PathElementEntity.md) | emitted when user clicks on a breadcrumb  |
+| ---- | ------------- | ----------- |
+| navigate | [PathElementEntity](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/PathElementEntity.md) | emitted when user clicks on a breadcrumb |
 
 <!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
+
 <!-- seealso start -->
+
 ## See also
 
-- [Document list component](document-list.component.md)
-- [Breadcrumb component](breadcrumb.component.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [Document list component](document-list.component.md)
+-   [Breadcrumb component](breadcrumb.component.md)
+    <!-- seealso end -->
diff --git a/docs/ecm-user.model.md b/docs/ecm-user.model.md
index 8cd598cc8e..ae1b75083a 100644
--- a/docs/ecm-user.model.md
+++ b/docs/ecm-user.model.md
@@ -14,11 +14,8 @@ it is likely to change and so its properties are not listed here. For the
 latest version of the class, see the
 [source file](https://github.com/Alfresco/alfresco-ng2-components/blob/development/lib/core/userinfo/models/ecm-user.model.ts).
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Ecm user service](ecm-user.service.md)
-- [People content service](people-content.service.md)
-- [Bpm user model](bpm-user.model.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [Ecm user service](ecm-user.service.md)
+-   [People content service](people-content.service.md)
+-   [Bpm user model](bpm-user.model.md)
diff --git a/docs/ecm-user.service.md b/docs/ecm-user.service.md
index 9d12922459..93881e2f62 100644
--- a/docs/ecm-user.service.md
+++ b/docs/ecm-user.service.md
@@ -24,10 +24,7 @@ See the
 [getPerson](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/PeopleApi.md#getPerson)
 method in the Alfresco JS API for more information about the REST calls used by this service.
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Bpm user service](bpm-user.service.md)
-- [Ecm user model](ecm-user.model.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [Bpm user service](bpm-user.service.md)
+-   [Ecm user model](ecm-user.model.md)
diff --git a/docs/extensibility.md b/docs/extensibility.md
index 30b2f83627..7c1850baa2 100644
--- a/docs/extensibility.md
+++ b/docs/extensibility.md
@@ -1,10 +1,10 @@
 # Form Extensibility and Customisation
 
-_Note: it is assumed you are familiar with Alfresco Activiti form definition structure._
+_Note: it is assumed you are familiar with Alfresco Process Services (powered by Activiti) form definition structure._
 
-- How components and widgets are rendered on a Form
-- Replacing default form widgets with custom components
-- Replacing custom stencils with custom components
+-   How components and widgets are rendered on a Form
+-   Replacing default form widgets with custom components
+-   Replacing custom stencils with custom components
 
 ## How components and widgets are rendered on a Form
 
@@ -63,7 +63,7 @@ formRenderingService.setComponentTypeResolver('text', customResolver, true);
 ### Default component mappings
 
 | Stencil Name | Field Type | Component Type |
-| --- | --- | --- |
+| ------------ | ---------- | -------------- |
 | Text | text | TextWidgetComponent |
 | Number | integer | NumberWidgetComponent |
 | Multi-line text | multi-line-text | MultilineTextWidgetComponentComponent |
@@ -86,10 +86,10 @@ formRenderingService.setComponentTypeResolver('text', customResolver, true);
 
 ## Replacing default form widgets with custom components
 
-This is a short walkthrough on replacing a standard `Text` widget with a custom component for all Alfresco Activiti forms
-rendered within `<activiti-form>` component.
+This is a short walkthrough on replacing a standard `Text` widget with a custom component for all APS forms
+rendered within `<adf-form>` component.
 
-First let's create a simple Alfresco Activiti form with `Text` widgets:
+First let's create a simple APS form with `Text` widgets:
 
 ![default text widget](docassets/images/text-default-widget.png)
 
@@ -162,7 +162,7 @@ At runtime it should look similar to the following:
 
 ## Replacing custom stencils with custom components
 
-This is a short walkthrough on rendering custom Alfresco Activiti stencils by means of custom Angular components.
+This is a short walkthrough on rendering custom APS stencils by means of custom Angular components.
 
 ### Creating custom stencil
 
@@ -182,13 +182,13 @@ Now you are ready to design a test form based on your custom stencil:
 
 ![custom stencil form](docassets/images/activiti-stencil-02.png)
 
-Once wired with a new task it should look like the following within Alfresco Activiti web application:
+Once wired with a new task it should look like the following within APS web application:
 
 ![custom stencil task](docassets/images/activiti-stencil-03.png)
 
 ### Creating custom widget
 
-If you load previously created task into ADF `<activiti-form>` component you will see something like the following:
+If you load previously created task into ADF `<adf-form>` component you will see something like the following:
 
 ![adf stencil](docassets/images/adf-stencil-01.png)
 
@@ -252,4 +252,11 @@ export class MyView {
 
 At runtime you should now see your custom Angular component rendered in place of the stencils:
 
-![adf stencil runtime](docassets/images/adf-stencil-02.png)
\ No newline at end of file
+![adf stencil runtime](docassets/images/adf-stencil-02.png)
+
+## See Also
+
+-   [Form field model](form-field.model.md)
+-   [Form rendering service](form-rendering.service.md)
+-   [Form component](form.component.md)
+-   [Widget component](widget.component.md)
diff --git a/docs/favorites-api.service.md b/docs/favorites-api.service.md
index 3660e8c227..43e47fcee0 100644
--- a/docs/favorites-api.service.md
+++ b/docs/favorites-api.service.md
@@ -20,8 +20,3 @@ person is the currently logged-in user.
 You can specify a number of `options` to modify the search further. See the
 [Alfresco JS API page](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/FavoritesApi.md#getfavorites)
 for `getFavorites` for more information.
-
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
-
-<!-- seealso end -->
\ No newline at end of file
diff --git a/docs/file-draggable.directive.md b/docs/file-draggable.directive.md
index bca9999f11..6242293718 100644
--- a/docs/file-draggable.directive.md
+++ b/docs/file-draggable.directive.md
@@ -1,4 +1,5 @@
 # File Draggable directive
+
 Provide drag-and-drop features for an element such as a `div`.
 
 ## Basic Usage
@@ -27,7 +28,25 @@ Some sample CSS to show the drag and drop area:
 }
 ```
 
-Event handler implementations:
+### Properties
+
+| Name | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| file-draggable | boolean | true | Toggles between enable/disable of the drag-and-drop functionality. |
+
+### Events
+
+| Name | Description |
+| ---- | ----------- |
+| filesEntityDropped | Emitted when one or more files are dragged and dropped onto the draggable element, such as a `div` |
+| folderEntityDropped | Emitted when a directory is dragged and dropped onto the draggable element, such as a `div` |
+| filesDropped | Emitted when one or more files are dragged and dropped onto the draggable element, such as a `div` |
+
+## Details
+
+Typically you would use the Upload Drag Area component instead of this directive.
+
+### Event handler implementations
 
 ```ts
 export class SomeComponent implements OnInit {
@@ -52,23 +71,6 @@ export class SomeComponent implements OnInit {
   }
 ```
 
-### Properties
+## See also
 
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| file-draggable | boolean | true | Toggles between enable/disable of the drag-and-drop functionality. |
-
-### Events
-
-| Name | Description |
-| --- | --- |
-| filesEntityDropped | Emitted when one or more files are dragged and dropped onto the draggable element, such as a `div` |
-| folderEntityDropped | Emitted when a directory is dragged and dropped onto the draggable element, such as a `div`|
-| filesDropped | Emitted when one or more files are dragged and dropped onto the draggable element, such as a `div`|
-
-## Details
-Typically you would use the Upload Drag Area component instead of this directive.
-
-<!-- seealso start -->
-
-<!-- seealso end -->
\ No newline at end of file
+-   [Upload Drag Area component](upload-drag-area.component.md)
diff --git a/docs/file-size.pipe.md b/docs/file-size.pipe.md
index f4ab4f975f..2655354d79 100644
--- a/docs/file-size.pipe.md
+++ b/docs/file-size.pipe.md
@@ -16,8 +16,3 @@ The pipe chooses the largest unit that is less than the total number of bytes an
 divides the total by this number. This ensures that the number of units is greater
 than 1 (eg, you will see "512 Bytes" rather than "0.5KB"). The pipe parameter indicates
 the number of decimal places to use for the value, defaulting to 2 decimal places.
-
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
-
-<!-- seealso end -->
\ No newline at end of file
diff --git a/docs/file-uploading-dialog.component.md b/docs/file-uploading-dialog.component.md
index 4d16b49a30..26f549b6a2 100644
--- a/docs/file-uploading-dialog.component.md
+++ b/docs/file-uploading-dialog.component.md
@@ -11,19 +11,16 @@ Shows a dialog listing all the files uploaded with the Upload Button or Drag Are
 ### Properties
 
 | Name | Type | Default | Description |
-| --- | --- | --- | --- |
+| ---- | ---- | ------- | ----------- |
 | position | string | 'right' | Dialog position. Accepted values are 'left' or 'right' |
 
 ## Details
 
 This component should be used in combination with the
 [Upload Button component](upload-button.component.md) or the
-[Drag Area component](drag-area.component.md).
+[Upload Drag Area component](upload-drag-area.component.md).
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Upload button component](upload-button.component.md)
-- [Upload drag area component](upload-drag-area.component.md)
-<!-- seealso end -->
+-   [Upload button component](upload-button.component.md)
+-   [Upload drag area component](upload-drag-area.component.md)
diff --git a/docs/filter.model.md b/docs/filter.model.md
index de6bd09d70..359e9da90b 100644
--- a/docs/filter.model.md
+++ b/docs/filter.model.md
@@ -62,11 +62,8 @@ class TaskQueryRequestRepresentationModel implements TaskQueryRequestRepresentat
 }
 ```
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Process filters component](process-filters.component.md)
-- [Task filters component](task-filters.component.md)
-- [Apps process service](apps-process.service.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [Process filters component](process-filters.component.md)
+-   [Task filters component](task-filters.component.md)
+-   [Apps process service](apps-process.service.md)
diff --git a/docs/folder-actions.service.md b/docs/folder-actions.service.md
index 7e16a40ca9..60720e83fb 100644
--- a/docs/folder-actions.service.md
+++ b/docs/folder-actions.service.md
@@ -72,10 +72,7 @@ export class MyView {
 You will probably want to set up all your custom actions at the application root level or
 with a custom application service.
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Document actions service](document-actions.service.md)
-- [Content action component](content-action.component.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [Document actions service](document-actions.service.md)
+-   [Content action component](content-action.component.md)
diff --git a/docs/folder-create.directive.md b/docs/folder-create.directive.md
index 339f1e60b6..a5c7ba7e7e 100644
--- a/docs/folder-create.directive.md
+++ b/docs/folder-create.directive.md
@@ -1,17 +1,6 @@
 # Folder Create directive
 
-<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
-
-<!-- toc -->
-
-- [Basic Usage](#basic-usage)
-  * [Properties](#properties)
-  * [Events](#events)
-- [Details](#details)
-
-<!-- tocstop -->
-
-<!-- markdown-toc end -->
+Allows folders to be created.
 
 ## Basic Usage
 
@@ -30,11 +19,11 @@
 
 ### Properties
 
-| Name              | Type                | Default   | Description                                                       |
-| ----------------- | ------------------- | --------- | ----------------------------------------------------------------- |
-| adf-create-folder | string              | '-my-'    | Parent folder where the new folder will be located after creation |
+| Name | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| adf-create-folder | string | '-my-' | Parent folder where the new folder will be located after creation |
 
 ## Details
 
 'FolderCreateDirective' directive needs the id of the parent folder where we want the new folder node to be created. If no value is provided, the '-my-' alias is used.
-It opens the FolderDialogComponent to receive data for the new folder. If data is valid, on dialog close, it emits folderCreate event.
\ No newline at end of file
+It opens the FolderDialogComponent to receive data for the new folder. If data is valid, on dialog close, it emits folderCreate event.
diff --git a/docs/folder-edit.directive.md b/docs/folder-edit.directive.md
index 14f1469fba..e748aa9194 100644
--- a/docs/folder-edit.directive.md
+++ b/docs/folder-edit.directive.md
@@ -1,17 +1,6 @@
 # Folder Edit directive
 
-<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
-
-<!-- toc -->
-
-- [Basic Usage](#basic-usage)
-  * [Properties](#properties)
-  * [Events](#events)
-- [Details](#details)
-
-<!-- tocstop -->
-
-<!-- markdown-toc end -->
+Allows folders to be edited.
 
 ## Basic Usage
 
diff --git a/docs/form-field.component.md b/docs/form-field.component.md
index c48a4e34fd..5b712c5be3 100644
--- a/docs/form-field.component.md
+++ b/docs/form-field.component.md
@@ -1,7 +1,9 @@
 # Form field component
+
 A form field in an APS form.
 
 ## Basic Usage
+
 All form field editors (aka widgets) on a Form are rendered by means of a `FormFieldComponent`
 that takes an instance of a `FormFieldModel`:
 
@@ -13,20 +15,23 @@ This component depends on the `FormRenderingService` to map the `FormFieldModel`
 based on the field type or the metadata information.
 
 ### Properties
+
 | Name | Type | Default | Description |
-| --- | --- | --- | --- |
+| ---- | ---- | ------- | ----------- |
 | field | FormFieldModel |  | Contains all the necessary data needed to determine what UI Widget to use when rendering the field in the form. You would typically not create this data manually but instead create the form in APS and export it to get to all the `FormFieldModel` definitions. |
 
 ## Details
+
 You would typically not use this component directly but instead use the `<adf-form>` component, which under the hood
 uses `<adf-form-field>` components to render the form fields. See next section for how each field in a form definition
 is mapped to a form field component (i.e. UI widget) implementation.
 
 ### Field Type -> Form Field Component mappings
+
 Forms defined in APS have the following default mappings for the form fields:
 
 | APS Form Designer Widget | Field Type | Component Type |
-| --- | --- | --- |
+| ------------------------ | ---------- | -------------- |
 | Text | text | TextWidgetComponent |
 | Multi-line text | multi-line-text | MultilineTextWidgetComponentComponent |
 | Number | integer | NumberWidgetComponent |
@@ -46,7 +51,3 @@ Forms defined in APS have the following default mappings for the form fields:
 | Display text | readonly-text | DisplayTextWidgetComponentComponent |
 | N/A | container | ContainerWidgetComponent (layout component) |
 | N/A | N/A | UnknownWidgetComponent |
-
-<!-- seealso start -->
-
-<!-- seealso end -->
\ No newline at end of file
diff --git a/docs/form-field.model.md b/docs/form-field.model.md
index 621fd765fa..785de085fe 100644
--- a/docs/form-field.model.md
+++ b/docs/form-field.model.md
@@ -1,12 +1,11 @@
 # Form Field model
 
-Contains the value and metadata for a field of an
-[ADF Form](form.component.md).
+Contains the value and metadata for a field of an [ADF Form](form.component.md).
 
 ## Properties
 
 | Name | Type | Default | Description |
-|--|--|--|--|
+| ---- | ---- | ------- | ----------- |
 | id | string |  | Field ID |
 | name | string |  | Field name |
 | type | string |  | Field type (see [Form Rendering service](form-rendering.service.md) for a list of available type strings) |
@@ -24,7 +23,7 @@ Contains the value and metadata for a field of an
 | minValue | string |  | Minimum allowed value (eg, for number or date) |
 | maxValue | string |  | Minimum allowed value (eg, for number or date) |
 | regexPattern | string |  | Regular expression that text data should match |
-| options | FormFieldOption[] | [] | Option items for a dropdown menu |
+| options | FormFieldOption\[] | \[] | Option items for a dropdown menu |
 | restUrl | string |  | URL for a REST call to populate a dropdown menu |
 | restResponsePath | string |  | Path within REST response JSON to the array of dropdown data |
 | restIdProperty | string |  | JSON property name to use for the `id` property of a dropdown item |
@@ -41,10 +40,10 @@ Contains the value and metadata for a field of an
 | currency | string | null | Currency symbol for Amount widgets |
 | dateDisplayFormat | string |  | Date/time display format template |
 | numberOfColumns | number | 1 | Number of columns defined by a container field |
-| fields | FormFieldModel[] | [] | Fields contained within a container field |
-| columns | ContainerColumnModel[] | [] | Column definitions for a container field |
+| fields | FormFieldModel\[] | \[] | Fields contained within a container field |
+| columns | ContainerColumnModel\[] | \[] | Column definitions for a container field |
 | emptyOption | FormFieldOption |  | Dropdown menu item to use when no option is chosen |
-| validationSummary | string |  | Error/information message added during field validation (see [FormFieldValidator](FormFieldValidator) interface) |
+| validationSummary | string |  | Error/information message added during field validation (see [FormFieldValidator](FormFieldValidator.md) interface) |
 
 ## Details
 
@@ -74,26 +73,23 @@ for the user to read. See the [FormFieldValidator](FormFieldValidator.md) page f
 You can set the items shown on a dropdown menu using data returned by a REST call. The
 properties used by the call are:
 
-- `restUrl`: The URL for the REST service
-- `restResponsePath`: Optional path to an array within the JSON object returned by
-the REST call. Each element in the array corresponds to an item on the dropdown.
-- `restIdProperty`: The name of a JSON property present in each element of the array
-selected by `restResponsePath`. Its value will be used for the `id` property of the
-dropdown item.
-`restLabelProperty`: The name of a JSON property present in each element of the array
-selected by `restResponsePath`. Its value will be used for the `label` property of the
-dropdown item (ie, the text visible to the user).
+-   `restUrl`: The URL for the REST service
+-   `restResponsePath`: Optional path to an array within the JSON object returned by
+    the REST call. Each element in the array corresponds to an item on the dropdown.
+-   `restIdProperty`: The name of a JSON property present in each element of the array
+    selected by `restResponsePath`. Its value will be used for the `id` property of the
+    dropdown item.
+    `restLabelProperty`: The name of a JSON property present in each element of the array
+    selected by `restResponsePath`. Its value will be used for the `label` property of the
+    dropdown item (ie, the text visible to the user).
 
 The [REST Call Task 101](https://community.alfresco.com/community/bpm/blog/2016/08/31/rest-integration-101)
 tutorial on the [APS community site](https://community.alfresco.com/community/bpm)
 contains full details about how the REST calls work, along with a worked example.
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Extensibility](extensibility.md)
-- [FormFieldValidator](FormFieldValidator.md)
-- [Form rendering service](form-rendering.service.md)
-- [Form component](form.component.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [Extensibility](extensibility.md)
+-   [FormFieldValidator](FormFieldValidator.md)
+-   [Form rendering service](form-rendering.service.md)
+-   [Form component](form.component.md)
diff --git a/docs/form-list.component.md b/docs/form-list.component.md
index 4a2c814c0e..23783412e1 100644
--- a/docs/form-list.component.md
+++ b/docs/form-list.component.md
@@ -1,17 +1,6 @@
 # ADF Form List Component
 
-The component shows the activiti forms as a list.
-
-<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
-
-<!-- toc -->
-
-- [Basic Usage](#basic-usage)
-  * [Properties](#properties)
-
-<!-- tocstop -->
-
-<!-- markdown-toc end -->
+Shows APS forms as a list.
 
 ## Basic Usage
 
@@ -26,5 +15,5 @@ The component shows the activiti forms as a list.
 The recommended set of properties can be found in the following table:
 
 | Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| forms | any |  | The array that contains the information to show inside the list. |
\ No newline at end of file
+| ---- | ---- | ------- | ----------- |
+| forms | any |  | The array that contains the information to show inside the list. |
diff --git a/docs/form-rendering.service.md b/docs/form-rendering.service.md
index 7dbb016006..fa2f47662b 100644
--- a/docs/form-rendering.service.md
+++ b/docs/form-rendering.service.md
@@ -47,7 +47,7 @@ formRenderingService.setComponentTypeResolver('text', customResolver, true);
 The Form Rendering service is initialized with the mapping shown in the table below:
 
 | Stencil name | Field type string | Component type |
-|---|---|---|
+| ------------ | ----------------- | -------------- |
 | Amount | "amount" | AmountWidgetComponent |
 | Attach | "upload" | AttachWidgetComponent or UploadWidgetComponent (based on metadata) |
 | Checkbox | "boolean" | CheckboxWidgetComponent |
@@ -84,14 +84,8 @@ implements a modified layout or responds differently when the data is entered. S
 [Form Extensibility and Customisation](extensibility.md) guide for further details and examples
 of this technique.
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Extensibility](extensibility.md)
-- [Form field model](form-field.model.md)
-- [Form component](form.component.md)
-<!-- seealso end -->
-
-
-
+-   [Extensibility](extensibility.md)
+-   [Form field model](form-field.model.md)
+-   [Form component](form.component.md)
diff --git a/docs/form.component.md b/docs/form.component.md
index 14abeac0ef..4110767a74 100644
--- a/docs/form.component.md
+++ b/docs/form.component.md
@@ -1,28 +1,26 @@
-# Activiti Form component
+# Form component
 
-The component shows a Form from Activiti (see it live: [Form Quickstart](https://embed.plnkr.co/YSLXTqb3DtMhVJSqXKkE/))
+Shows a Form from APS (see it live: [Form Quickstart](https://embed.plnkr.co/YSLXTqb3DtMhVJSqXKkE/))
 
-<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
+## Contents
 
-<!-- toc -->
+-   [Basic Usage](#basic-usage)
 
-- [Basic Usage](#basic-usage)
-  * [Properties](#properties)
-  * [Advanced properties](#advanced-properties)
-  * [Events](#events)
-- [Details](#details)
-  * [Custom empty form template](#custom-empty-form-template)
-  * [Controlling outcome execution behaviour](#controlling-outcome-execution-behaviour)
-  * [Field Validators](#field-validators)
-- [Other documentation](#other-documentation)
-  * [Common scenarios](#common-scenarios)
-    + [Changing field value based on another field](#changing-field-value-based-on-another-field)
-    + [Listen all form Events](#listen-all-form-events)
-- [See also](#see-also)
+    -   [Properties](#properties)
+    -   [Advanced properties](#advanced-properties)
+    -   [Events](#events)
 
-<!-- tocstop -->
+-   [Details](#details)
 
-<!-- markdown-toc end -->
+    -   [Custom empty form template](#custom-empty-form-template)
+    -   [Controlling outcome execution behaviour](#controlling-outcome-execution-behaviour)
+    -   [Field Validators](#field-validators)
+
+-   [Other documentation](#other-documentation)
+
+    -   [Common scenarios](#common-scenarios)
+
+-   [See also](#see-also)
 
 ## Basic Usage
 
@@ -104,11 +102,11 @@ and store the form field as metadata. The param nameNode is optional.
 ### Properties
 
 | Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| taskId | string | | Task id to fetch corresponding form and values. |
-| formId | string | | The id of the form definition to load and display with custom values. |
-| formName | string | | Name of the form definition to load and display with custom values. |
-| data | FormValues | | Custom form values map to be used with the rendered form. |
+| ---- | ---- | ------- | ----------- |
+| taskId | string |  | Task id to fetch corresponding form and values. |
+| formId | string |  | The id of the form definition to load and display with custom values. |
+| formName | string |  | Name of the form definition to load and display with custom values. |
+| data | FormValues |  | Custom form values map to be used with the rendered form. |
 | showTitle | boolean | true | Toggle rendering of the form title. |
 | showCompleteButton | boolean | true | Toggle rendering of the `Complete` outcome button. |
 | disableCompleteButton | boolean | false | The `Complete` outcome button is shown but it will be disabled. |
@@ -118,28 +116,28 @@ and store the form field as metadata. The param nameNode is optional.
 | showRefreshButton | boolean | true | Toggle rendering of the `Refresh` button. |
 | showValidationIcon | boolean | true | Toggle rendering of the validation icon next form title. |
 | saveMetadata | boolean | false | Store the value of the form as metadata. |
-| path | string |  |  Path of the folder where to store the metadata. |
+| path | string |  | Path of the folder where to store the metadata. |
 | nameNode | string | true | Name to assign to the new node where the metadata are stored. |
-| fieldValidators | FormFieldValidator[] | See [Field Validators](#field-validators) section below | Contains a list of form field validator instances. |
+| fieldValidators | FormFieldValidator\[] | See [Field Validators](#field-validators) section below | Contains a list of form field validator instances. |
 
 ### Advanced properties
 
  The following properties are for complex customisation purposes:
 
 | Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| form | FormModel | | Underlying form model instance. |
+| ---- | ---- | ------- | ----------- |
+| form | FormModel |  | Underlying form model instance. |
 | showDebugButton | boolean | false | Toggle debug options. |
 | debugMode | boolean | false | Toggle debug mode, allows displaying additional data for development and debugging purposes. |
 
 ### Events
 
-| Name |  Return Type | Description |
-| --- | --- | --- |
+| Name | Return Type | Description |
+| ---- | ----------- | ----------- |
 | formLoaded | [FormModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts) | Invoked when form is loaded or reloaded. |
-| formSaved | [FormModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts)  | Invoked when form is submitted with `Save` or custom outcomes.  |
-| formCompleted | [FormModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts)  | Invoked when form is submitted with `Complete` outcome.  |
-| formDataRefreshed | [FormModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts) | Invoked when form values are refreshed due to a data property change  |
+| formSaved | [FormModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts) | Invoked when form is submitted with `Save` or custom outcomes. |
+| formCompleted | [FormModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts) | Invoked when form is submitted with `Complete` outcome. |
+| formDataRefreshed | [FormModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts) | Invoked when form values are refreshed due to a data property change |
 | executeOutcome | [FormOutcomeEvent](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form-outcome-event.model.ts) | Invoked when any outcome is executed, default behaviour can be prevented via `event.preventDefault()` |
 | error | any | Invoked at any error |
 
@@ -176,7 +174,6 @@ You can add a template that will be show if no form definition has been found
     </div>
 
 </adf-form>
-
 ```
 
 ### Controlling outcome execution behaviour
@@ -225,8 +222,8 @@ export class MyView {
 
 There are two additional functions that can be of a great value when controlling outcomes:
 
-- `saveTaskForm()` - saves current form
-- `completeTaskForm(outcome?: string)` - save and complete form with a given outcome name
+-   `saveTaskForm()` - saves current form
+-   `completeTaskForm(outcome?: string)` - save and complete form with a given outcome name
 
 **Please note that if `event.preventDefault()` is not called then default outcome behaviour
 will also be executed after your custom code.**
@@ -278,13 +275,10 @@ formService.formEvents.subscribe((event: Event) => {
 });
 ```
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Stencils](stencils.md)
-- [FormFieldValidator](FormFieldValidator.md)
-- [Extensibility](extensibility.md)
-- [Form rendering service](form-rendering.service.md)
-- [Form field model](form-field.model.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [Stencils](stencils.md)
+-   [FormFieldValidator](FormFieldValidator.md)
+-   [Extensibility](extensibility.md)
+-   [Form rendering service](form-rendering.service.md)
+-   [Form field model](form-field.model.md)
diff --git a/docs/form.service.md b/docs/form.service.md
index ac5c9bae4f..429ca737ad 100644
--- a/docs/form.service.md
+++ b/docs/form.service.md
@@ -32,40 +32,40 @@ class MyComponent {
 ### Events
 
 | Name | Args Type | Description |
-| --- | --- | --- |
+| ---- | --------- | ----------- |
 | formLoaded | FormEvent | Raised when form has been loaded or reloaded |
 | formFieldValueChanged | FormFieldEvent | Raised when input values change |
 | taskCompleted | FormEvent | Raised when a task is completed successfully |
-| taskCompletedError | FormErrorEvent | Raised when a task is completed unsuccessfully  |
+| taskCompletedError | FormErrorEvent | Raised when a task is completed unsuccessfully |
 | taskSaved | FormEvent | Raised when a task is saved successfully |
 | taskSavedError | FormErrorEvent | Raised when a task is saved unsuccessfully |
 | executeOutcome | FormOutcomeEvent | Raised when a form outcome is executed |
 | formEvents | Event | You can subscribe to this event to listen : ( click, blur, change, focus, focusin, focusout, input, invalid, select) of any elements in the form , see doc below |
 | validateForm | ValidateFormEvent | Raised each time a form is validated. You can use it to provide custom validation or prevent default behaviour. |
-| validateFormField | ValidateFormFieldEvent | Raised each time a form field is validated. You can use it to provide custom validation or prevent default behaviour.|
+| validateFormField | ValidateFormFieldEvent | Raised each time a form field is validated. You can use it to provide custom validation or prevent default behaviour. |
 
 ### Methods
 
 | Name | Params | Returns | Description |
-| --- | --- | --- | --- |
-| createFormFromANode | (formName: string) | Observable\<any\> | Create a Form with a fields for each metadata properties |
-| createForm | (formName: string) | Observable\<any\> | Create a Form |
-| addFieldsToAForm | (formId: string, formModel: FormDefinitionModel) | Observable\<any\> | Add Fileds to A form |
-| searchFrom | (name: string) | Observable\<any\> | Search For A Form by name |
-| getForms | n/a | Observable\<any\> | Get All the forms |
-| getProcessDefinitions | n/a | Observable\<any\> | Get Process Definitions |
-| getTasks | n/a | Observable\<any\> | Get All the Tasks |
-| getTask | (taskId: string) | Observable\<any\> | Get Task |
-| saveTaskForm | (taskId: string, formValues: FormValues) | Observable\<any\> | Save Task Form |
-| completeTaskForm | (taskId: string, formValues: FormValues, outcome?: string) | Observable\<any\> | Complete Task Form |
-| getTaskForm | (taskId: string) | Observable\<any\> | Get Form related to a taskId |
-| getFormDefinitionById | (formId: string) | Observable\<any\> | Get Form Definition |
-| getFormDefinitionByName | (name: string) | Observable\<any\> | Returns form definition by a given name. |
-| getStartFormInstance | (processId: string) | Observable\<any\> | Get start form instance for a given processId |
-| getStartFormDefinition | (processId: string) | Observable\<any\> | Get start form definition for a given process |
-| getRestFieldValues | (taskId: string, field: string) | Observable\<any\> |  |
-| getRestFieldValuesByProcessId | (processDefinitionId: string, field: string) | Observable\<any\> |  |
-| getRestFieldValuesColumnByProcessId | (processDefinitionId: string, field: string, column?: string) | Observable\<any\> |  |
-| getRestFieldValuesColumn | (taskId: string, field: string, column?: string) | Observable\<any\> |  |
-| getWorkflowGroups\ | (filter: string, groupId?: string) | Observable\<GroupModel[]\> |  |
-| getWorkflowUsers\ | (filter: string, groupId?: string) | Observable\<GroupUserModel[]\> |  |
+| ---- | ------ | ------- | ----------- |
+| createFormFromANode | (formName: string) | Observable\\&lt;any> | Create a Form with a fields for each metadata properties |
+| createForm | (formName: string) | Observable\\&lt;any> | Create a Form |
+| addFieldsToAForm | (formId: string, formModel: FormDefinitionModel) | Observable\\&lt;any> | Add Fileds to A form |
+| searchFrom | (name: string) | Observable\\&lt;any> | Search For A Form by name |
+| getForms | n/a | Observable\\&lt;any> | Get All the forms |
+| getProcessDefinitions | n/a | Observable\\&lt;any> | Get Process Definitions |
+| getTasks | n/a | Observable\\&lt;any> | Get All the Tasks |
+| getTask | (taskId: string) | Observable\\&lt;any> | Get Task |
+| saveTaskForm | (taskId: string, formValues: FormValues) | Observable\\&lt;any> | Save Task Form |
+| completeTaskForm | (taskId: string, formValues: FormValues, outcome?: string) | Observable\\&lt;any> | Complete Task Form |
+| getTaskForm | (taskId: string) | Observable\\&lt;any> | Get Form related to a taskId |
+| getFormDefinitionById | (formId: string) | Observable\\&lt;any> | Get Form Definition |
+| getFormDefinitionByName | (name: string) | Observable\\&lt;any> | Returns form definition by a given name. |
+| getStartFormInstance | (processId: string) | Observable\\&lt;any> | Get start form instance for a given processId |
+| getStartFormDefinition | (processId: string) | Observable\\&lt;any> | Get start form definition for a given process |
+| getRestFieldValues | (taskId: string, field: string) | Observable\\&lt;any> |  |
+| getRestFieldValuesByProcessId | (processDefinitionId: string, field: string) | Observable\\&lt;any> |  |
+| getRestFieldValuesColumnByProcessId | (processDefinitionId: string, field: string, column?: string) | Observable\\&lt;any> |  |
+| getRestFieldValuesColumn | (taskId: string, field: string, column?: string) | Observable\\&lt;any> |  |
+| getWorkflowGroups\\ | (filter: string, groupId?: string) | Observable\\&lt;GroupModel\[]> |  |
+| getWorkflowUsers\\ | (filter: string, groupId?: string) | Observable\\&lt;GroupUserModel\[]> |  |
diff --git a/docs/highlight-transform.service.md b/docs/highlight-transform.service.md
index 31ccd68aed..7579dd0c8e 100644
--- a/docs/highlight-transform.service.md
+++ b/docs/highlight-transform.service.md
@@ -13,10 +13,10 @@ A typical use case for this service is to display the results from a search engi
 An excerpt of a retrieved document can be shown with the matching search terms
 highlighted to indicate where they were found.
 
-The service works by adding HTML &lt;span&gt; elements around all sections of text
+The service works by adding HTML &lt;span> elements around all sections of text
 that match the `search` string. You can specify multiple search strings at once by
 separating them with spaces, so passing "Apple Banana Cherry" in `search` will
-highlight any of those words individually. The &lt;span&gt; element includes a
+highlight any of those words individually. The &lt;span> element includes a
 `class` attribute which defaults to "highlight" but you can pass any class name
 you like using the `wrapperClass` parameter.
 
@@ -33,13 +33,7 @@ interface HightlightTransformResult {
 The `changed` flag will be false if the search string was not found (ie, no highlighting
 took place) and true otherwise.
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Text highlight pipe](text-highlight.pipe.md)
-- [Highlight directive](highlight.directive.md)
-<!-- seealso end -->
-
-
-
+-   [Text highlight pipe](text-highlight.pipe.md)
+-   [Highlight directive](highlight.directive.md)
diff --git a/docs/highlight.directive.md b/docs/highlight.directive.md
index 4d5acef679..210bfcb187 100644
--- a/docs/highlight.directive.md
+++ b/docs/highlight.directive.md
@@ -35,8 +35,8 @@ If the search string contain spaces then each section between the spaces will
 be treated as a separate item to highlight. For example, you could use this to
 highlight all occurrences of words in a list.
 
-The highlighting works by adding an HTML &lt;span&gt; element around the
-selected text. The &lt;span&gt; includes a CSS class; this defaults to
+The highlighting works by adding an HTML &lt;span> element around the
+selected text. The &lt;span> includes a CSS class; this defaults to
 "adf-highlight" but you can supply your own class using the `adf-highlight-class`
 property:
 
@@ -51,10 +51,7 @@ property:
 </div>
 ```
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Text highlight pipe](text-highlight.pipe.md)
-- [Highlight transform service](highlight-transform.service.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [Text highlight pipe](text-highlight.pipe.md)
+-   [Highlight transform service](highlight-transform.service.md)
diff --git a/docs/host-settings.component.md b/docs/host-settings.component.md
index 59149c96c5..15c6c5d9ad 100644
--- a/docs/host-settings.component.md
+++ b/docs/host-settings.component.md
@@ -1,11 +1,10 @@
 # Host settings component
 
-This component is a form that allows you to validate and set the url of your content service and process service saving 
-it in the user local storage
+Validates the URLs for ACS and APS and saves them in the user's local storage
 
 ![Host settings](docassets/images/host-settings-component.png)
 
-## Basic Usage 
+## Basic Usage
 
 ```html
 <adf-host-settings>
@@ -15,13 +14,11 @@ it in the user local storage
 ### Properties
 
 | Name | Type | Default Value | Description |
-| --- | --- | --- | --- |
-| providers | string | ALL | Possible valid values are ECM, BPM or ALL. It indicate which URL configurations show  |
-
+| ---- | ---- | ------------- | ----------- |
+| providers | string | ALL | Possible valid values are ECM, BPM or ALL. It indicate which URL configurations show |
 
 ### Events
 
 | Name | Returned Type | Description |
-| --- | --- | --- |
-| error | string | emitted when the url inserted is wrong   |
-
+| ---- | ------------- | ----------- |
+| error | string | emitted when the url inserted is wrong |
diff --git a/docs/infinite-pagination.component.md b/docs/infinite-pagination.component.md
index 6a5f85954d..0968cdb98b 100644
--- a/docs/infinite-pagination.component.md
+++ b/docs/infinite-pagination.component.md
@@ -14,18 +14,31 @@ Adds "infinite" pagination to the component it is used with.
 </adf-infinite-pagination>
 ```
 
+## Integrating with Document List
+
+```html
+<adf-document-list #documentList ...></adf-document-list>
+
+<adf-infinite-pagination 
+    [target]="documentList"
+    [loading="documentList.infiniteLoading">
+</adf-infinite-pagination>
+```
+
 ### Properties
 
 | Name | Type | Default | Description |
-| --- | --- | --- | --- |
+| ---- | ---- | ------- | ----------- |
 | pagination | Pagination | `InfinitePaginationComponent.DEFAULT_PAGINATION` | Pagination object |
 | pageSize | number | `InfinitePaginationComponent.DEFAULT_PAGE_SIZE` | Number of items that are added with each "load more" event |
 | loading | boolean | false |  |
+| target | PaginatedComponent |  | Component that provides custom pagination support |
+
 
 ### Events
 
 | Name | Description |
-| --- | --- |
+| ---- | ----------- |
 | loadMore | Emitted when the "Load More" button is clicked |
 
 ## Details
@@ -43,10 +56,7 @@ page within the list to be shown, whether there are more items left to show, etc
 
 See the [Pagination component](pagination.component.md) for more information about the alternative "finite" pagination scheme.
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Document list component](document-list.component.md)
-- [Pagination component](pagination.component.md)
-<!-- seealso end -->
+-   [Document list component](document-list.component.md)
+-   [Pagination component](pagination.component.md)
diff --git a/docs/info-drawer-layout.component.md b/docs/info-drawer-layout.component.md
index 3b561fe3d2..9dbc989ca9 100644
--- a/docs/info-drawer-layout.component.md
+++ b/docs/info-drawer-layout.component.md
@@ -26,13 +26,10 @@ Displays a sidebar-style information panel.
 
 As the name suggests, this is basically just a layout with CSS styling. There are three regions where you can add your own content, as shown in the example:
 
-- info-drawer-title
-- info-drawer-buttons
-- info-drawer-content
+-   info-drawer-title
+-   info-drawer-buttons
+-   info-drawer-content
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Info drawer component](info-drawer.component.md)
-<!-- seealso end -->
+-   [Info drawer component](info-drawer.component.md)
diff --git a/docs/info-drawer.component.md b/docs/info-drawer.component.md
index f0082c5e9a..66f33731af 100644
--- a/docs/info-drawer.component.md
+++ b/docs/info-drawer.component.md
@@ -27,8 +27,9 @@ Displays a sidebar-style information panel with tabs.
 ### Properties
 
 | Name | Type | Default | Description |
-| --- | --- | --- | --- |
+| ---- | ---- | ------- | ----------- |
 | title | string | null | The title of the info drawer |
+| selectedIndex | number | 0 | The selected index tab |
 | currentTab | any | null | The currently active tab |
 
 ## Details
@@ -37,9 +38,6 @@ This is a variant of the [Info Drawer Layout component](info-drawer-layout.compo
 
 You can also customize the three regions (title, buttons and content) as with the Info Drawer Layout component.
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Info drawer layout component](info-drawer-layout.component.md)
-<!-- seealso end -->
+-   [Info drawer layout component](info-drawer-layout.component.md)
diff --git a/docs/language-menu.component.md b/docs/language-menu.component.md
index be7351bca5..0692d71fec 100644
--- a/docs/language-menu.component.md
+++ b/docs/language-menu.component.md
@@ -39,6 +39,7 @@ This is how the configuration looks like in the the "app.config.json"
         }
     ]
 ```
+
 In case no setting is provided, the component shows only the English language.
 
 ### Nested Menu language
@@ -58,12 +59,9 @@ How to attach an ADF Language Menu as nested menu
     <adf-language-menu></adf-language-menu>
 </mat-menu>
 ```
+
 ![Nested Language Menu screenshot](docassets/images/languages-menu-nested.png)
 
 ### Nested menu details
 
 In the previous example we are using the ADF Language Menu as nested menu.
-
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
-<!-- seealso end -->
diff --git a/docs/like.component.md b/docs/like.component.md
index eedaba6187..ddee210949 100644
--- a/docs/like.component.md
+++ b/docs/like.component.md
@@ -1,29 +1,28 @@
 # ADF Like component
 
+Allows a user to add "likes" to an item.
+
 ![Custom columns](docassets/images/social1.png)
 
 ## Basic Usage
 
 ```html
 <adf-like [nodeId]="nodeId"></adf-like>
-``` 
+```
 
 ### Properties
 
 | Attribute | Type | Default | Description |
-| --- | --- | --- | --- |
-| nodeId | string | | The identifier of a node.| 
+| --------- | ---- | ------- | ----------- |
+| nodeId | string |  | The identifier of a node. |
 
 ### Events
 
 | Name | Description |
-| --- | --- |
+| ---- | ----------- |
 | changeVote | Raised when vote gets changed |
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Rating component](rating.component.md)
-- [Rating service](rating.service.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [Rating component](rating.component.md)
+-   [Rating service](rating.service.md)
diff --git a/docs/login.component.md b/docs/login.component.md
index 4daf2dd036..971835066f 100644
--- a/docs/login.component.md
+++ b/docs/login.component.md
@@ -4,25 +4,22 @@ Authenticates to Alfresco Content Services and Alfresco Process Services.
 
 ![Login component](docassets/images/custom-footer.png)
 
-<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
+## Contents
 
-<!-- toc -->
+-   [Basic usage](#basic-usage)
 
-- [Basic usage](#basic-usage)
-  * [Properties](#properties)
-  * [Events](#events)
-- [Details](#details)
-  * [Handling events](#handling-events)
-  * [Change footer content](#change-footer-content)
-  * [Change header content](#change-header-content)
-  * [Extra content](#extra-content)
-  * [Custom logo and background](#custom-logo-and-background)
-  * [Customize Validation rules](#customize-validation-rules)
-  * [Controlling form submit execution behaviour](#controlling-form-submit-execution-behaviour)
+    -   [Properties](#properties)
+    -   [Events](#events)
 
-<!-- tocstop -->
+-   [Details](#details)
 
-<!-- markdown-toc end -->
+    -   [Handling events](#handling-events)
+    -   [Change footer content](#change-footer-content)
+    -   [Change header content](#change-header-content)
+    -   [Extra content](#extra-content)
+    -   [Custom logo and background](#custom-logo-and-background)
+    -   [Customize Validation rules](#customize-validation-rules)
+    -   [Controlling form submit execution behaviour](#controlling-form-submit-execution-behaviour)
 
 ## Basic usage
 
@@ -36,23 +33,23 @@ Authenticates to Alfresco Content Services and Alfresco Process Services.
 ### Properties
 
 | Name | Type | Default Value | Description |
-| --- | --- | --- | --- |
-| providers | string | | Possible valid values are ECM, BPM or ALL. The default behaviour of this component will log in only in the ECM . If you want to log in in both systems the correct value to use is ALL. |
-| successRoute | string | | Route to redirect to upon successful login. |
+| ---- | ---- | ------------- | ----------- |
+| providers | string |  | Possible valid values are ECM, BPM or ALL. The default behaviour of this component will log in only in the ECM . If you want to log in in both systems the correct value to use is ALL. |
+| successRoute | string |  | Route to redirect to upon successful login. |
 | disableCsrf | boolean | false | To prevent the CSRF Token from being submitted. Only for Alfresco Process Services call |
-| needHelpLink | string | | It will change the url of the NEED HELP link in the footer  |
-| registerLink | string | | It will change the url of the REGISTER link in the footer |
-| logoImageUrl | string | \<ADF logo image> | To change the logo image with a customised image |
-| copyrightText | string | \<ADF copyright string> | The copyright text below the login box |
-| backgroundImageUrl | string | \<ADF background image> | To change the background image with a customised image |
-| fieldsValidation | { [key: string]: any; }, extra?: { [key: string]: any; } |  | Use it to customise the validation rules of the login form |
+| needHelpLink | string |  | It will change the url of the NEED HELP link in the footer |
+| registerLink | string |  | It will change the url of the REGISTER link in the footer |
+| logoImageUrl | string | \\<ADF logo image> | To change the logo image with a customised image |
+| copyrightText | string | \\<ADF copyright string> | The copyright text below the login box |
+| backgroundImageUrl | string | \\<ADF background image> | To change the background image with a customised image |
+| fieldsValidation | { [key: string]&#x3A; any; }, extra?: { [key: string]&#x3A; any; } |  | Use it to customise the validation rules of the login form |
 | showRememberMe | boolean | false | Toggle `Remember me` checkbox visibility |
 | showLoginActions | boolean | false | Toggle extra actions visibility (`Need Help`, `Register`, etc.) |
 
 ### Events
 
 | Name | Description |
-| --- | --- |
+| ---- | ----------- |
 | success | Raised when the login is done |
 | error | Raised when the login fails |
 | executeSubmit | Raised when the form is submitted |
@@ -230,3 +227,7 @@ export class MyCustomLogin {
 
 **Please note that if `event.preventDefault()` is not called then default behaviour 
 will also be executed after your custom code.**
+
+## See Also
+
+-   [Logout directive](logout.directive.md)
diff --git a/docs/logout.directive.md b/docs/logout.directive.md
index 11951e9cc5..4631813ded 100644
--- a/docs/logout.directive.md
+++ b/docs/logout.directive.md
@@ -2,25 +2,12 @@
 
 Logs the user out when the decorated element is clicked.
 
-<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
-
-<!-- toc -->
-
-- [Basic Usage](#basic-usage)
-
-<!-- tocstop -->
-
-<!-- markdown-toc end -->
-
 ## Basic Usage
 
 ```html
 <button adf-logout>Logout</button>
 ```
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Login component](login.component.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [Login component](login.component.md)
diff --git a/docs/mime-type-icon.pipe.md b/docs/mime-type-icon.pipe.md
index f4dc71e44c..ffd0a05a4a 100644
--- a/docs/mime-type-icon.pipe.md
+++ b/docs/mime-type-icon.pipe.md
@@ -15,9 +15,6 @@ Retrieves an icon to represent a MIME type.
 The pipe takes a MIME type as input and returns the URL of an SVG file that
 symbolizes that type (see the [Thumbnail service](thumbnail.service.md) for the mapping between types and icons). The pipe will return a "miscellaneous" icon when no specific mapping is defined.
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Thumbnail service](thumbnail.service.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [Thumbnail service](thumbnail.service.md)
diff --git a/docs/node-delete.directive.md b/docs/node-delete.directive.md
index 0c72469853..573e6a8937 100644
--- a/docs/node-delete.directive.md
+++ b/docs/node-delete.directive.md
@@ -19,17 +19,21 @@ Deletes multiple files and folders.
 
 ### Properties
 
-| Name              | Type                | Default | Description                 |
-| ----------------- | ------------------- | ------- | --------------------------- |
-| adf-delete        | MinimalNodeEntity[] | []      | Nodes to delete             |
-| permanent         | boolean             | false   | Permanent delete            |
+| Name | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| adf-delete | MinimalNodeEntity\[] | \[] | Nodes to delete |
+| permanent | boolean | false | Permanent delete |
 
 ### Events
 
-| Name                      | Description                                  |
-| ------------------------- | -------------------------------------------- |
-| delete                    | emitted when delete process is done          |
+| Name | Description |
+| ---- | ----------- |
+| delete | emitted when delete process is done |
 
 ## Details
 
 See **Demo Shell**
+
+## See also
+
+-   [Node Restore directive](node-restore.directive.md)
diff --git a/docs/node-name-tooltip.pipe.md b/docs/node-name-tooltip.pipe.md
index 346a73dac8..df16126f82 100644
--- a/docs/node-name-tooltip.pipe.md
+++ b/docs/node-name-tooltip.pipe.md
@@ -1,21 +1,6 @@
 # Node Name Tooltip directive
 
-Formats the tooltip of the underlying Node based on the following rules:
-
-* if the *title* and *description* are missing, then the tooltip shows the *name*;
-* if the *title* is missing, then the tooltip shows the *name* and *description*;
-* if the *description* is missing, then the tooltip shows the *name* and *title*;
-* if *name* and *title*, *name* and *description*, or *title* and *description* are the same, then only a single line is displayed.
-
-<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
-
-<!-- toc -->
-
-- [Basic Usage](#basic-usage)
-
-<!-- tocstop -->
-
-<!-- markdown-toc end -->
+Formats the tooltip for a Node.
 
 ## Basic Usage
 
@@ -29,9 +14,11 @@ Formats the tooltip of the underlying Node based on the following rules:
 </data-column>
 ```
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
+## Details
 
-## See also
+The tooltip is formatted according to the following rules:
 
-<!-- seealso end -->
\ No newline at end of file
+-   if the _title_ and _description_ are missing, then the tooltip shows the _name_;
+-   if the _title_ is missing, then the tooltip shows the _name_ and _description_;
+-   if the _description_ is missing, then the tooltip shows the _name_ and _title_;
+-   if _name_ and _title_, _name_ and _description_, or _title_ and _description_ are the same, then only a single line is displayed.
diff --git a/docs/node-permission.directive.md b/docs/node-permission.directive.md
index 4a799fb373..c65698b8e5 100644
--- a/docs/node-permission.directive.md
+++ b/docs/node-permission.directive.md
@@ -2,30 +2,14 @@
 
 Selectively disables an HTML element or Angular component
 
-<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
-
-<!-- toc -->
-
-- [Basic Usage](#basic-usage)
-  * [Properties](#properties)
-- [Details](#details)
-  * [HTML element example](#html-element-example)
-  * [Angular component example](#angular-component-example)
-  * [Implementing the NodePermissionSubject interface](#implementing-the-nodepermissionsubject-interface)
-  * [Defining your components as an EXTENDIBLE_COMPONENT parent component](#defining-your-components-as-an-extendible_component-parent-component)
-
-<!-- tocstop -->
-
-<!-- markdown-toc end -->
-
 ## Basic Usage
 
 ### Properties
 
 | Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| adf-node-permission | [Permissions](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-core/src/models/permissions.enum.ts) | null | Node permission to check (create, delete, update, updatePermissions, !create, !delete, !update, !updatePermissions)|
-| adf-nodes | MinimalNodeEntity[] | [] | Nodes to check permission for |
+| ---- | ---- | ------- | ----------- |
+| adf-node-permission | [Permissions](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-core/src/models/permissions.enum.ts) | null | Node permission to check (create, delete, update, updatePermissions, !create, !delete, !update, !updatePermissions) |
+| adf-nodes | MinimalNodeEntity\[] | \[] | Nodes to check permission for |
 
 ## Details
 
@@ -34,8 +18,8 @@ by taking a collection of the `MinimalNodeEntity` instances and checking the par
 
 The decorated element will be disabled if:
 
-- there are no nodes in the collection
-- at least one of the nodes has no expected permission
+-   there are no nodes in the collection
+-   at least one of the nodes has no expected permission
 
 ### HTML element example
 
@@ -94,8 +78,8 @@ The directive will look up the component in the dependency injection tree, up to
 
 > "The host component is typically the component requesting the dependency. **But when this component is projected into a parent component, that parent component becomes the host.**"
 
-- because of this, you have to provide your component with forward referencing as the EXTENDIBLE_COMPONENT.
-- because of the emphasized second sentence you have to provide your component as a viewProvider.
+-   because of this, you have to provide your component with forward referencing as the EXTENDIBLE_COMPONENT.
+-   because of the emphasized second sentence you have to provide your component as a viewProvider.
 
 ```js
 import { EXTENDIBLE_COMPONENT } from '@alfresco/adf-core';
diff --git a/docs/node-restore.directive.md b/docs/node-restore.directive.md
index 0a6d04f2b5..ba17424c3c 100644
--- a/docs/node-restore.directive.md
+++ b/docs/node-restore.directive.md
@@ -1,5 +1,7 @@
 # Node Restore directive
 
+Restores deleted nodes to their original location.
+
 ## Basic Usage
 
 ```html
@@ -20,16 +22,16 @@
 
 ### Properties
 
-| Name              | Type                | Default | Description                      |
-| ----------------- | ------------------- | ------- | -------------------------------  |
-| adf-restore       | DeletedNodeEntry[]  | []      | Deleted nodes to restore         |
-| location          | string              | ''      | Route path to view restored node |
+| Name | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| adf-restore | DeletedNodeEntry\[] | \[] | Deleted nodes to restore |
+| location | string | '' | Route path to view restored node |
 
 ### Events
 
-| Name      | Description                     |
-| --------- | ------------------------------- |
-| restore   | Raised when the restore is done |
+| Name | Description |
+| ---- | ----------- |
+| restore | Raised when the restore is done |
 
 ## Details
 
@@ -37,3 +39,7 @@
 If the original location doesn't exist anymore, then they remain in the trash list.
 
 For single node restore, there is action to jump to the location where the node has been restored and for this `location` is used to specify the route path where the list of nodes are rendered
+
+## See Also
+
+-   [Node delete directive](node-delete.directive.md)
diff --git a/docs/node.service.md b/docs/node.service.md
index 13bb79c4a9..7f813f36d0 100644
--- a/docs/node.service.md
+++ b/docs/node.service.md
@@ -1,5 +1,7 @@
 # Node Service
-Get Alfresco Repository node metadata and create nodes with metadata. 
+
+Gets Alfresco Repository node metadata and creates nodes with metadata. 
+
 This service cannot be used to create nodes with content.
 
 ## Importing
@@ -16,6 +18,7 @@ export class SomePageComponent implements OnInit {
 ## Methods
 
 #### getNodeMetadata(nodeId: string): Observable`<NodeMetadata>`
+
 Get the metadata and type for passed in node ID (e.g. 3062d73b-fe47-4040-89d2-79efae63869c): 
 
 ```ts
@@ -38,14 +41,12 @@ or the name of the node (i.e. `cm:name`).
 
 The `metadata` response looks like in this example:
 
-```
-author: "Martin"
-description: "Installation guide for Alfresco 3.3 on Linux"
-lastThumbnailModification: "doclib:1505900632400"
-title: "Install 3.3 Linux"
-versionLabel: "1.0"
-versionType: "MAJOR"
-```
+    author: "Martin"
+    description: "Installation guide for Alfresco 3.3 on Linux"
+    lastThumbnailModification: "doclib:1505900632400"
+    title: "Install 3.3 Linux"
+    versionLabel: "1.0"
+    versionType: "MAJOR"
 
 Note that the properties are missing namespace prefix. The `nodeType` response will be returned with namespace prefix, 
 such as `cm:content`.
@@ -53,6 +54,7 @@ such as `cm:content`.
 Executing this method on a folder node returns no metadata, just the type.
 
 #### createNode(name: string, nodeType: string, properties: any, path: string): Observable`<any>`
+
 Creates a node in the Alfresco Repository with passed in `name`, `nodeType`, and metadata `properties`.
 It will be created in the folder `path` that is passed in. 
 
@@ -70,27 +72,27 @@ this.nodeService2.createNode(nodeName, nodeType, properties, nodePath).subscribe
   console.log('Error: ', error);
 });
 ```
+
 Note that the `path` property should not include the **/Company Home** bit.
 
 The response includes all metadata about the new node:
 
-```
-entry: 
-    aspectNames: (2) ["cm:titled", "cm:auditable"]
-    createdAt: Mon Nov 06 2017 13:04:49 GMT+0000 (GMT) {}
-    createdByUser: {id: "admin@app.activiti.com", displayName: "ADF User"}
-    id: "1ab71bb1-d67f-4147-95f6-b5801830ca08"
-    isFile: false
-    isFolder: true
-    modifiedAt: Mon Nov 06 2017 13:04:49 GMT+0000 (GMT) {}
-    modifiedByUser: {id: "admin@app.activiti.com", displayName: "ADF User"}
-    name: "someFolder"
-    nodeType: "cm:folder"
-    parentId: "a29b5fe3-81f6-46a7-9bed-6a53620acb32"
-    properties: {cm:title: "Some title", cm:description: "Some description"}
-```
+    entry: 
+        aspectNames: (2) ["cm:titled", "cm:auditable"]
+        createdAt: Mon Nov 06 2017 13:04:49 GMT+0000 (GMT) {}
+        createdByUser: {id: "admin@app.activiti.com", displayName: "ADF User"}
+        id: "1ab71bb1-d67f-4147-95f6-b5801830ca08"
+        isFile: false
+        isFolder: true
+        modifiedAt: Mon Nov 06 2017 13:04:49 GMT+0000 (GMT) {}
+        modifiedByUser: {id: "admin@app.activiti.com", displayName: "ADF User"}
+        name: "someFolder"
+        nodeType: "cm:folder"
+        parentId: "a29b5fe3-81f6-46a7-9bed-6a53620acb32"
+        properties: {cm:title: "Some title", cm:description: "Some description"}
 
 #### createNodeMetadata(nodeType: string, nameSpace: any, data: any, path: string, name?: string): Observable`<any>`
+
 This is a convenience method if your property list is missing namespace prefix for property names. 
 The namespace prefix can then be supplied separately and this method will prepend it automatically.
 This method calls the `createNode` method internally: 
@@ -112,10 +114,8 @@ this.nodeService2.createNodeMetadata(nodeType, propNamespacePrefix, properties,
 ```
 
 See the `createNode` method for information about the response object.
- 
-<!-- seealso start -->
+
 ## See also
 
-- [Nodes api service](nodes-api.service.md)
-- [Deleted nodes api service](deleted-nodes-api.service.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [Nodes api service](nodes-api.service.md)
+-   [Deleted nodes api service](deleted-nodes-api.service.md)
diff --git a/docs/nodes-api.service.md b/docs/nodes-api.service.md
index 1525e89d50..fed1b10f59 100644
--- a/docs/nodes-api.service.md
+++ b/docs/nodes-api.service.md
@@ -2,22 +2,6 @@
 
 Accesses and manipulates ACS document nodes using their node IDs.
 
-<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
-
-<!-- toc -->
-
-- [Methods](#methods)
-- [Details](#details)
-  * [Getting node information](#getting-node-information)
-  * [Getting folder node contents](#getting-folder-node-contents)
-  * [Creating and updating nodes](#creating-and-updating-nodes)
-  * [Deleting and restoring nodes](#deleting-and-restoring-nodes)
-- [See also](#see-also)
-
-<!-- tocstop -->
-
-<!-- markdown-toc end -->
-
 ## Methods
 
 `getNode(nodeId: string, options: any = {}): Observable<MinimalNodeEntryEntity>`<br/>
@@ -168,12 +152,9 @@ and
 pages in the Alfresco JS API for further details and options. Note that you can also use the
 [Deleted Nodes Api service](deleted-nodes-api.service.md) get a list of all items currently in the trashcan.
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Document library model](document-library.model.md)
-- [Deleted nodes api service](deleted-nodes-api.service.md)
-- [Document list component](document-list.component.md)
-- [Node service](node.service.md)
-<!-- seealso end -->
+-   [Document library model](document-library.model.md)
+-   [Deleted nodes api service](deleted-nodes-api.service.md)
+-   [Document list component](document-list.component.md)
+-   [Node service](node.service.md)
diff --git a/docs/notification.service.md b/docs/notification.service.md
index 613805eb86..c6284e210f 100644
--- a/docs/notification.service.md
+++ b/docs/notification.service.md
@@ -2,15 +2,7 @@
 
 Shows a notification message with optional feedback.
 
-<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
-
-<!-- toc -->
-
-- [Details](#details)
-
-<!-- tocstop -->
-
-<!-- markdown-toc end -->
+![Notification Service screenshot](docassets/images/NotiService.png)
 
 ## Details
 
diff --git a/docs/page-title.service.md b/docs/page-title.service.md
index 1d0de1da8d..a1640d81fd 100644
--- a/docs/page-title.service.md
+++ b/docs/page-title.service.md
@@ -16,12 +16,6 @@ a result of the form "PageName - AppName" (see
 is not supplied then just the app name is used; this will default to
 "Alfresco ADF Application" when no app name set in the config file.
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [App config service](app-config.service.md)
-<!-- seealso end -->
-
-
-
+-   [App config service](app-config.service.md)
diff --git a/docs/pagination.component.md b/docs/pagination.component.md
index 290c778f5a..3aa8f33a6a 100644
--- a/docs/pagination.component.md
+++ b/docs/pagination.component.md
@@ -4,19 +4,6 @@ Adds pagination to the component it is used with.
 
 ![](docassets/images/basic.png)
 
-<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
-
-<!-- toc -->
-
-- [Basic Usage](#basic-usage)
-  * [Properties](#properties)
-  * [Events](#events)
-- [Details](#details)
-
-<!-- tocstop -->
-
-<!-- markdown-toc end -->
-
 ## Basic Usage
 
 ```html
@@ -43,20 +30,20 @@ Adds pagination to the component it is used with.
 ### Properties
 
 | Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| pagination | Pagination | | Pagination object |
-| supportedPageSizes | Array&lt;number&gt; | [ 25, 50, 100 ] | An array of page sizes |
-| target | PaginatedComponent | | Component that provides custom pagination support |
+| ---- | ---- | ------- | ----------- |
+| pagination | Pagination |  | Pagination object |
+| supportedPageSizes | Array&lt;number> | [ 25, 50, 100 ] | An array of page sizes |
+| target | PaginatedComponent |  | Component that provides custom pagination support |
 
 ### Events
 
 | Name | Type | Description |
-| --- | --- | --- |
-| change | EventEmitter&lt;PaginationQueryParams&gt; | Triggered for any action in pagination |
-| nextPage | EventEmitter&lt;Pagination&gt; | Triggered on next page action |
-| prevPage | EventEmitter&lt;Pagination&gt; | Triggered on previous page action |
-| changePageSize | EventEmitter&lt;Pagination&gt; | Triggered on page size change action |
-| changePageNumber | EventEmitter&lt;Pagination&gt; | Triggered on page change action |
+| ---- | ---- | ----------- |
+| change | EventEmitter&lt;PaginationQueryParams> | Triggered for any action in pagination |
+| nextPage | EventEmitter&lt;Pagination> | Triggered on next page action |
+| prevPage | EventEmitter&lt;Pagination> | Triggered on previous page action |
+| changePageSize | EventEmitter&lt;Pagination> | Triggered on page size change action |
+| changePageNumber | EventEmitter&lt;Pagination> | Triggered on page change action |
 
 ## Details
 
@@ -83,4 +70,4 @@ export interface PaginatedComponent {
 ```
 
 Your component needs to provide a `pagination` subject to allow Pagination component to reflect to changes.
-Every time user interacts with the Pagination, it will call the `updatePagination` method and pass the parameters.
\ No newline at end of file
+Every time user interacts with the Pagination, it will call the `updatePagination` method and pass the parameters.
diff --git a/docs/people-content.service.md b/docs/people-content.service.md
index 25e92ddbb6..d4d179778b 100644
--- a/docs/people-content.service.md
+++ b/docs/people-content.service.md
@@ -21,10 +21,7 @@ See the
 [getPerson](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/PeopleApi.md#getPerson)
 method in the Alfresco JS API for more information about the REST calls used by this service.
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [People process service](people-process.service.md)
-- [Ecm user model](ecm-user.model.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [People process service](people-process.service.md)
+-   [Ecm user model](ecm-user.model.md)
diff --git a/docs/people-list.component.md b/docs/people-list.component.md
index 9226cfdf70..343b46568d 100644
--- a/docs/people-list.component.md
+++ b/docs/people-list.component.md
@@ -59,22 +59,19 @@ In the component template use the people list component:
   </data-columns>
 </adf-people-list>
 ```
+
 Note that the people list component is based on the `<adf-datatable` component.
 
 ### Properties
 
 | Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| users | UserProcessModel[] |  | The array of user data that should be used to populate the people list |
+| ---- | ---- | ------- | ----------- |
+| users | UserProcessModel\[] |  | The array of user data that should be used to populate the people list |
 | actions | boolean | false | true if actions should be visible, i.e. the 'Three-Dots' menu |
 
 ### Events
 
 | Name | Description |
-| --- | --- |
+| ---- | ----------- |
 | clickRow | Emitted when the user clicks a row in the people list. |
 | clickAction | Emitted when the user clicks in the 'Three Dots' drop down menu for a row. |
-
-<!-- seealso start -->
-
-<!-- seealso end -->
\ No newline at end of file
diff --git a/docs/people-process.service.md b/docs/people-process.service.md
index 4d78bfb4e8..84560abf26 100644
--- a/docs/people-process.service.md
+++ b/docs/people-process.service.md
@@ -19,7 +19,7 @@ Removes a user who is currently involved with a task.
 ## Details
 
 Use `getWorkflowUsers` to find users across all tasks, optionally filtering by the `searchWord`
-in the task name. The `taskId` parameter, if used, specifies a task to be *excluded* from the
+in the task name. The `taskId` parameter, if used, specifies a task to be _excluded_ from the
 results. You would typically use this feature to find new users to assign to a task, in which
 case you would want to exclude users already assigned to that task.
 
@@ -34,12 +34,8 @@ You can find more information about the REST API methods used by this service in
 (for `getWorkflowUsers`) and the
 [User API](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-activiti-rest-api/docs/UserApi.md#getuserprofilepictureurl)(for `getUserImage`).
 
-
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [User process model](user-process.model.md)
-- [Bpm user model](bpm-user.model.md)
-- [People content service](people-content.service.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [User process model](user-process.model.md)
+-   [Bpm user model](bpm-user.model.md)
+-   [People content service](people-content.service.md)
diff --git a/docs/people-search.component.md b/docs/people-search.component.md
index 1e31cb4f3d..69174c3160 100644
--- a/docs/people-search.component.md
+++ b/docs/people-search.component.md
@@ -2,19 +2,6 @@
 
 Searches users/people.
 
-<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
-
-<!-- toc -->
-
-- [Basic Usage](#basic-usage)
-  * [Properties](#properties)
-  * [Events](#events)
-- [Details](#details)
-
-<!-- tocstop -->
-
-<!-- markdown-toc end -->
-
 ## Basic Usage
 
 ```html
@@ -24,27 +11,26 @@ Searches users/people.
 ### Properties
 
 | Name | Type | Description |
-| --- | --- | --- |
-| results | Observable<User[]> | The params to show people list |
+| ---- | ---- | ----------- |
+| results | Observable&lt;User\[]> | The params to show people list |
 
 ### Events
 
 | Name | Description |
-| --- | --- |
-| searchPeople | Raised when the search people with new keyword  |
-| success | Raised when select the user and click action button  |
-| closeSearch | Raised when click the clse button  |
+| ---- | ----------- |
+| searchPeople | Raised when the search people with new keyword |
+| success | Raised when select the user and click action button |
+| closeSearch | Raised when click the clse button |
 
 ## Details
 
- ```html
+```html
 <adf-people-search
-        (searchPeople)="searchUser($event)"
-        (success)="involveUser($event)"
-        (closeSearch)="onCloseSearch()"
-        [results]="peopleSearch$">
-            <header-title>{{ 'TASK_DETAILS.LABELS.ADD_PEOPLE' | translate }}</header-title>
-            <action-button-label>{{ 'PEOPLE.ADD_USER' | translate }}</action-button-label>
-        </adf-people-search>
-
+       (searchPeople)="searchUser($event)"
+       (success)="involveUser($event)"
+       (closeSearch)="onCloseSearch()"
+       [results]="peopleSearch$">
+           <header-title>{{ 'TASK_DETAILS.LABELS.ADD_PEOPLE' | translate }}</header-title>
+           <action-button-label>{{ 'PEOPLE.ADD_USER' | translate }}</action-button-label>
+       </adf-people-search>
 ```
diff --git a/docs/people.component.md b/docs/people.component.md
index cb26fc9c0a..88099e667d 100644
--- a/docs/people.component.md
+++ b/docs/people.component.md
@@ -1,24 +1,21 @@
-# Task People Component
+# People Component
 
-Displays involved users to a specified task
+Displays users involved with a specified task
 
-<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
+## Contents
 
-<!-- toc -->
+-   [Basic Usage](#basic-usage)
 
-- [Basic Usage](#basic-usage)
-  * [Properties](#properties)
-  * [Events](#events)
-- [Details](#details)
-  * [How to customize the people component behavior](#how-to-customize-the-people-component-behavior)
-  * [Involve People single click and close search](#involve-people-single-click-and-close-search)
-  * [Involve People single click without close search](#involve-people-single-click-without-close-search)
-  * [Involve People double click and close search](#involve-people-double-click-and-close-search)
-  * [Involve People double double without close search](#involve-people-double-double-without-close-search)
+    -   [Properties](#properties)
+    -   [Events](#events)
 
-<!-- tocstop -->
+-   [Details](#details)
 
-<!-- markdown-toc end -->
+    -   [How to customize the people component behavior](#how-to-customize-the-people-component-behavior)
+    -   [Involve People single click and close search](#involve-people-single-click-and-close-search)
+    -   [Involve People single click without close search](#involve-people-single-click-without-close-search)
+    -   [Involve People double click and close search](#involve-people-double-click-and-close-search)
+    -   [Involve People double double without close search](#involve-people-double-double-without-close-search)
 
 ## Basic Usage
 
@@ -35,8 +32,8 @@ Displays involved users to a specified task
 ### Properties
 
 | Name | Type | Description |
-| --- | --- | --- |
-| people | User[] | The array of User object to display |
+| ---- | ---- | ----------- |
+| people | User\[] | The array of User object to display |
 | taskId | string | The numeric ID of the task |
 | readOnly | boolean | The boolean flag |
 
@@ -49,8 +46,9 @@ No Events
 ### How to customize the people component behavior
 
 The people component provide two methods to customize the behavior:
-- involveUserAndCloseSearch: The selected user is going to be added and the search section closed
-- involveUserWithoutCloseSearch: The selected user is going to be added without close the search section
+
+-   involveUserAndCloseSearch: The selected user is going to be added and the search section closed
+-   involveUserWithoutCloseSearch: The selected user is going to be added without close the search section
 
 In this way will be easy customize the people component to involve the user with the single or double click event:
 
diff --git a/docs/permissions-style.model.md b/docs/permissions-style.model.md
index d8315bc80a..fff438ea73 100644
--- a/docs/permissions-style.model.md
+++ b/docs/permissions-style.model.md
@@ -5,11 +5,11 @@ Sets custom CSS styles for rows of a [Document List](document-list.component.md)
 ## Properties
 
 | Property | Type | Description |
-| --- | --- | --- |
+| -------- | ---- | ----------- |
 | isFile | boolean | Does this style apply to files? |
 | isFolder | boolean | Does this style apply to folders? |
-| permission | Permissions | An enum value defining the permissions that this style applies to (see below) | 
-| css| string | The name of the CSS class to add | 
+| permission | Permissions | An enum value defining the permissions that this style applies to (see below) |
+| css | string | The name of the CSS class to add |
 
 ## Details
 
@@ -48,11 +48,9 @@ adf-document-list ::ng-deep adf-datatable tr.document-list__create {
 If you want to change the style on the folders where the user doesn't have the permission to update: 
 
 ```ts
-
 let permissionsStyle: PermissionStyleModel[] = [];
 
 this.permissionsStyle.push(new PermissionStyleModel('document-list__disable', PermissionsEnum.NOT_UPDATE, false, true));
-
 ```
 
 ```html
@@ -66,9 +64,6 @@ adf-document-list ::ng-deep adf-datatable tr.document-list__disable {
 }
 ```
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Document list component](document-list.component.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [Document list component](document-list.component.md)
diff --git a/docs/process-attachment-list.component.md b/docs/process-attachment-list.component.md
index 01f68571c1..5ad571eb5e 100644
--- a/docs/process-attachment-list.component.md
+++ b/docs/process-attachment-list.component.md
@@ -2,6 +2,8 @@
 
 Displays attached documents on a specified process instance
 
+![process-attachment-list-sample](docassets/images/process-attachment-list.png)
+
 ## Basic Usage
 
 ```html
@@ -11,6 +13,10 @@ Displays attached documents on a specified process instance
 </adf-process-attachment-list>
 ```
 
+If the List is empty, a default no content template is displayed.
+
+![default-no-content-template-sample](docassets/images/default-no-content-template.png)
+
 Make sure to override the UploadService with the ProcessUploadService
 ```ts
 
@@ -28,6 +34,33 @@ export class MyCustomProcessAttachmentComponent {
 }
 ```
 
+### How to Add Drag and Drop Functionality
+
+If we want user to be able to upload attachments for empty lists, We can wrap our component with upload drag area component. In that case, We should also pass a custom *no content template* as shown below with our component urging the user to drag files to upload whenever the list is empty.
+
+```html
+<adf-upload-drag-area
+    [parentId]="YOUR_PROCESS_ID"
+    [showNotificationBar]="BOOLEAN">
+    <adf-process-attachment-list  
+        [processId]="YOUR_PROCESS_ID"
+        (attachmentClick)="YOUR_HANDLER">
+            <div adf-empty-list> //no content template
+                <adf-empty-list>
+                    <div adf-empty-list-header>{{This List is empty}}</div>
+                    <div adf-empty-list-body>{{Drag and drop to upload}}</div>
+                    <div adf-empty-list-footer>
+                        <img [src]="Your custom image URL"></div> 
+                </adf-empty-list>
+            </div>
+    </adf-process-attachment-list>
+</adf-upload-drag-area>
+```
+
+If the List is empty, the custom no-content template we passed is displayed.
+
+![custom-no-content-drag-drop-template-sample](docassets/images/custom-no-content-drag-drop-template.png)
+
 ### Properties
 
 | Name | Type | Description |
diff --git a/docs/process-comments.component.md b/docs/process-comments.component.md
index 0f1347bc1e..ea25d1e7e5 100644
--- a/docs/process-comments.component.md
+++ b/docs/process-comments.component.md
@@ -2,17 +2,6 @@
 
 Displays comments associated with a particular process instance and allows the user to add new comments
 
-<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
-
-<!-- toc -->
-
-- [Basic Usage](#basic-usage)
-  * [Properties](#properties)
-
-<!-- tocstop -->
-
-<!-- markdown-toc end -->
-
 ## Basic Usage
 
 ```html
@@ -24,5 +13,5 @@ Displays comments associated with a particular process instance and allows the u
 ### Properties
 
 | Name | Type | Description |
-| --- | --- | --- |
+| ---- | ---- | ----------- |
 | processInstanceId | string | (**required**): The numeric ID of the process instance to display comments for |
diff --git a/docs/process-content.service.md b/docs/process-content.service.md
index 1944d6c0dd..471031ebbe 100644
--- a/docs/process-content.service.md
+++ b/docs/process-content.service.md
@@ -1,6 +1,7 @@
 # Process Content Service
-Manipulate content related to a Process Instance or Task Instance in APS. Related content can be 
-uploaded to APS via for example a file upload dialog. 
+Manipulates content related to a Process Instance or Task Instance in APS.
+
+Related content can be uploaded to APS via for example a file upload dialog. 
 
 ## Importing
 
diff --git a/docs/process-filter.service.md b/docs/process-filter.service.md
index 9ef756cc13..d7bd9dff58 100644
--- a/docs/process-filter.service.md
+++ b/docs/process-filter.service.md
@@ -1,4 +1,5 @@
 # Process Filter Service
+
 Manage Process Filters, which are pre-configured Process Instance queries. 
 
 ## Importing
@@ -15,6 +16,7 @@ export class SomePageComponent implements OnInit {
 ## Methods
 
 #### createDefaultFilters(appId: number): Observable`<any[]>`
+
 Create and return the default filters for a Process App:
 
 ```ts
@@ -29,28 +31,27 @@ this.processFilterService.createDefaultFilters(processAppId)
 
 The response is an array of `FilterProcessRepresentationModel` objects:
 
-```
-filters:  
-    0: {
-       appId: 2
-       filter:
-            name: ""
-            sort: "created-desc"
-            state: "running"
-       icon: "glyphicon-random"
-       id: null
-       index: undefined    
-       name: "Running"
-       recent: true
-       }
-    1: {id: null, appId: 2, name: "Completed", recent: false, icon: "glyphicon-ok-sign", …}
-    2: {id: null, appId: 2, name: "All", recent: true, icon: "glyphicon-th", …}
-```
+    filters:  
+        0: {
+           appId: 2
+           filter:
+                name: ""
+                sort: "created-desc"
+                state: "running"
+           icon: "glyphicon-random"
+           id: null
+           index: undefined    
+           name: "Running"
+           recent: true
+           }
+        1: {id: null, appId: 2, name: "Completed", recent: false, icon: "glyphicon-ok-sign", …}
+        2: {id: null, appId: 2, name: "All", recent: true, icon: "glyphicon-th", …}
 
 These filters can now be used to get matching process instances for Process App with ID 2, 
 such as 'Running', 'Completed', and 'All' .
 
 #### getProcessFilters(appId: number): Observable`<FilterProcessRepresentationModel[]>`
+
 Get all filters defined for a Process App: 
 
 ```ts
@@ -65,23 +66,23 @@ this.processFilterService.getProcessFilters(processAppId)
 
 The response is an array of `FilterProcessRepresentationModel` objects:
 
-```
-filters:  
-    0: {id: 15, appId: 2, name: "Running", recent: true, icon: "glyphicon-random", …}
-    1: {id: 14, appId: 2, name: "Completed", recent: false, icon: "glyphicon-ok-sign", …}
-    2: {id: 13, appId: 2, name: "All", recent: false, icon: "glyphicon-th", …}
-    3: {id: 3003, appId: 2, name: "Running", recent: false, icon: "glyphicon-random", …}
-    4: {id: 3004, appId: 2, name: "Completed", recent: false, icon: "glyphicon-ok-sign", …}
-    5: {id: 3005, appId: 2, name: "All", recent: false, icon: "glyphicon-th", …}
- 
-```
+    filters:  
+        0: {id: 15, appId: 2, name: "Running", recent: true, icon: "glyphicon-random", …}
+        1: {id: 14, appId: 2, name: "Completed", recent: false, icon: "glyphicon-ok-sign", …}
+        2: {id: 13, appId: 2, name: "All", recent: false, icon: "glyphicon-th", …}
+        3: {id: 3003, appId: 2, name: "Running", recent: false, icon: "glyphicon-random", …}
+        4: {id: 3004, appId: 2, name: "Completed", recent: false, icon: "glyphicon-ok-sign", …}
+        5: {id: 3005, appId: 2, name: "All", recent: false, icon: "glyphicon-th", …}
+     
+
 In this example I had run the `createDefaultFilters` method ones and that created the duplicate of 
 the default filters.
 
 These filters can now be used to get matching process instances for Process App with ID 2, 
 such as 'Running', 'Completed', and 'All' .
 
-#### getProcessFilterById(filterId: number, appId?: number): Observable`<FilterProcessRepresentationModel>` 
+#### getProcessFilterById(filterId: number, appId?: number): Observable`<FilterProcessRepresentationModel>`
+
 Get a specific Process Filter based on its ID, optionally pass in Process App ID to improve performance
 when searching for filter: 
 
@@ -98,18 +99,17 @@ this.processFilterService.getProcessFilterById(filterId, processAppId)
 
 The response is a `FilterProcessRepresentationModel` object:
 
-```
-appId: 2
-filter: {sort: "created-desc", name: "", state: "running"}
-icon: "glyphicon-random"
-id: 3003
-name: "Running"
-recent: false
-```
+    appId: 2
+    filter: {sort: "created-desc", name: "", state: "running"}
+    icon: "glyphicon-random"
+    id: 3003
+    name: "Running"
+    recent: false
 
 The filter can now be used to get 'Running' process instances for Process App with ID 2.
 
-#### getProcessFilterByName(filterName: string, appId?: number): Observable`<FilterProcessRepresentationModel>` 
+#### getProcessFilterByName(filterName: string, appId?: number): Observable`<FilterProcessRepresentationModel>`
+
 Get a specific Process Filter based on its name, optionally pass in Process App ID to improve performance
 when searching for filter: 
 
@@ -126,20 +126,20 @@ this.processFilterService.getProcessFilterByName(filterName, processAppId)
 
 The response is a `FilterProcessRepresentationModel` object:
 
-```
-appId: 2
-filter: {sort: "created-desc", name: "", state: "running"}
-icon: "glyphicon-random"
-id: 15
-name: "Running"
-recent: true
-```
+    appId: 2
+    filter: {sort: "created-desc", name: "", state: "running"}
+    icon: "glyphicon-random"
+    id: 15
+    name: "Running"
+    recent: true
+
 If there are several filters with the same name for the Process App, then you get back the 
 first one found matching the name.
 
 The filter can now be used to get 'Running' process instances for Process App with ID 2.
 
 #### addProcessFilter(filter: FilterProcessRepresentationModel): Observable`<FilterProcessRepresentationModel>`
+
 Add a new Process Instance filter: 
 
 ```ts
@@ -162,13 +162,11 @@ this.processFilterService.addProcessFilter(filterRunningAsc)
 
 The response is a `FilterProcessRepresentationModel` object:
 
-```
-appId: 2
-icon: "glyphicon-random"
-id: 3008
-name: "RunningAsc"
-recent: false
-```
+    appId: 2
+    icon: "glyphicon-random"
+    id: 3008
+    name: "RunningAsc"
+    recent: false
 
 The filter can now be used to get 'Running' process instances for 
 Process App with ID 2 in created date ascending order. 
@@ -176,6 +174,7 @@ Process App with ID 2 in created date ascending order.
 See also the `getRunningFilterInstance` method.
 
 #### getRunningFilterInstance(appId: number): FilterProcessRepresentationModel
+
 Convenience method to create and return a filter that matches `running` process instances 
 for passed in Process App ID: 
 
@@ -187,19 +186,13 @@ console.log('Running filter', runningFilter);
 
 The response is a `FilterProcessRepresentationModel` object:
 
-```
-appId: 2
-filter: {sort: "created-desc", name: "", state: "running"}
-icon: "glyphicon-random"
-id: null
-index: undefined
-name: "Running"
-recent: true
-```
+    appId: 2
+    filter: {sort: "created-desc", name: "", state: "running"}
+    icon: "glyphicon-random"
+    id: null
+    index: undefined
+    name: "Running"
+    recent: true
 
 The filter can now be used to get 'Running' process instances for 
 Process App with ID 2 in created date ascending order.
-
-<!-- seealso start -->
-
-<!-- seealso end -->
\ No newline at end of file
diff --git a/docs/process-filters.component.md b/docs/process-filters.component.md
index 37283b977c..2802c4046a 100644
--- a/docs/process-filters.component.md
+++ b/docs/process-filters.component.md
@@ -13,7 +13,7 @@ Collection of criteria used to filter process instances, which may be customized
 ### Properties
 
 | Name | Type | Description |
-| --- | --- | --- |
+| ---- | ---- | ----------- |
 | filterParam | [FilterParamsModel](#filterparamsmodel) | The params to filter the task filter. If there is no match the default one (first filter of the list) is selected |
 | appId | string | Display filters available to the current user for the application with the specified ID. |
 | appName | string | Display filters available to the current user for the application with the specified name. |
@@ -24,7 +24,7 @@ If both `appId` and `appName` are specified then `appName` will take precedence
 ### Events
 
 | Name | Description |
-| --- | --- |
+| ---- | ----------- |
 | success | Raised when the list of filters has been successfully loaded from the server |
 | error | Raised when an error occurs |
 | filterClick | Raised when the user selects a filter from the list |
@@ -39,11 +39,11 @@ process instances are displayed in the list.
 
 ### How filter the activiti process filters
 
- ```html
+```html
 <adf-process-instance-filters 
-    [filterParam]="{index: 0}">
+   [filterParam]="{index: 0}">
 </adf-filters>
- ```
+```
 
 You can use inside the filterParam one of the properties defined by [FilterParamsModel](#filterparamsmodel) (see below).
 
@@ -58,7 +58,7 @@ You can use inside the filterParam one of the properties defined by [FilterParam
 ```
 
 | Name | Type | Description |
-| --- | --- | --- |
+| ---- | ---- | ----------- |
 | id | string | The id of the task filter. |
 | name | string | The name of the task filter, lowercase is checked. |
 | index | number | Zero-based position of the filter in the array. |
@@ -68,9 +68,6 @@ You can use inside the filterParam one of the properties defined by [FilterParam
 The process filter often works well as an item in an accordion menu. See the [Accordion component](accordion.component.md)
 page for an example of how to do set this up.
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Filter model](filter.model.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [Filter model](filter.model.md)
diff --git a/docs/process-instance-details.component.md b/docs/process-instance-details.component.md
index ffb96fb04a..2d8afb75d8 100644
--- a/docs/process-instance-details.component.md
+++ b/docs/process-instance-details.component.md
@@ -2,18 +2,6 @@
 
 Displays detailed information on a specified process instance
 
-<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
-
-<!-- toc -->
-
-- [Basic Usage](#basic-usage)
-  * [Properties](#properties)
-  * [Events](#events)
-
-<!-- tocstop -->
-
-<!-- markdown-toc end -->
-
 ## Basic Usage
 
 ```html
@@ -25,13 +13,13 @@ Displays detailed information on a specified process instance
 ### Properties
 
 | Name | Type | Description |
-| --- | --- | --- |
+| ---- | ---- | ----------- |
 | processInstanceId | string | (required): The numeric ID of the process instance to display |
 
 ### Events
 
 | Name | Description |
-| --- | --- |
+| ---- | ----------- |
 | processCancelledEmitter | Raised when the current process is cancelled by the user from within the component |
 | taskFormCompletedEmitter | Raised when the form associated with an active task is completed from within the component |
-| showProcessDiagram | Raised when the show diagram button is clicked |
\ No newline at end of file
+| showProcessDiagram | Raised when the show diagram button is clicked |
diff --git a/docs/process-instance-header.component.md b/docs/process-instance-header.component.md
index 0c3b39db5e..a69a938039 100644
--- a/docs/process-instance-header.component.md
+++ b/docs/process-instance-header.component.md
@@ -4,18 +4,6 @@ Sub-component of the process details component, which renders some general infor
 
 ![adf-process-instance-header](docassets/images/adf-process-instance-header-attachment.png)
 
-<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
-
-<!-- toc -->
-
-- [Basic Usage](#basic-usage)
-  * [Properties](#properties)
-    + [Events](#events)
-
-<!-- tocstop -->
-
-<!-- markdown-toc end -->
-
 ## Basic Usage
 
 ```html
@@ -26,10 +14,10 @@ Sub-component of the process details component, which renders some general infor
 
 ### Properties
 
-| Name | Type| Description |
-| --- | --- | --- |
+| Name | Type | Description |
+| ---- | ---- | ----------- |
 | processInstance | [ProcessInstanceModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-processlist/src/models/process-instance.model.ts) | (**required**): Full details of the process instance to display information about |
 
 #### Events
 
-This component does not define any events.
\ No newline at end of file
+This component does not define any events.
diff --git a/docs/process-instance-tasks.component.md b/docs/process-instance-tasks.component.md
index 15aee05e3b..db6b9b3abc 100644
--- a/docs/process-instance-tasks.component.md
+++ b/docs/process-instance-tasks.component.md
@@ -2,18 +2,6 @@
 
 Lists both the active and completed tasks associated with a particular process instance
 
-<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
-
-<!-- toc -->
-
-- [Basic Usage](#basic-usage)
-  * [Properties](#properties)
-  * [Events](#events)
-
-<!-- tocstop -->
-
-<!-- markdown-toc end -->
-
 ## Basic Usage
 
 ```html
@@ -26,12 +14,12 @@ Lists both the active and completed tasks associated with a particular process i
 ### Properties
 
 | Name | Type | Description |
-| --- | --- | --- |
+| ---- | ---- | ----------- |
 | processInstanceId | string | (**required**): The ID of the process instance to display tasks for |
 | showRefreshButton | boolean | (default: `true`): Whether to show a refresh button next to the list of tasks to allow this to be updated from the server |
 
 ### Events
 
 | Name | Description |
-| --- | --- |
+| ---- | ----------- |
 | taskFormCompletedEmitter | Raised when the form associated with an active task is completed from within the component |
diff --git a/docs/process-list.component.md b/docs/process-list.component.md
index 03b32be284..51f7b86e79 100644
--- a/docs/process-list.component.md
+++ b/docs/process-list.component.md
@@ -1,19 +1,6 @@
-# Activiti Process Instance List
+# Process Instance List
 
-This component renders a list containing all the process instances matched by the parameters specified.
-
-<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
-
-<!-- toc -->
-
-- [Basic Usage](#basic-usage)
-  * [Properties](#properties)
-  * [Events](#events)
-- [Details](#details)
-
-<!-- tocstop -->
-
-<!-- markdown-toc end -->
+Renders a list containing all the process instances matched by the parameters specified.
 
 ## Basic Usage
 
@@ -58,28 +45,26 @@ define custom schema in the app.config.json as shown below json format.
     [presetColumn]="'customSchema'">
 </adf-process-instance-list>
 ```
+
 ### Properties
 
-| Name | Description |
-| --- | --- |
-| appId | The id of the app. |
-| processDefinitionKey | The processDefinitionKey of the process. |
-| presetColumn | string || The presetColumn of the custom schema to fetch. |
-| state | Define state of the processes. Possible values are `running`, `completed` and `all` |
-| sort | Define sort of the processes. Possible values are `created-desc`, `created-asc`, `ended-desc`, `ended-asc` |
-| schemaColumn | List of columns to display in the process instances datatable (see the [Details](#details) section below) |
+| Name | Description |  |  |
+| ---- | ----------- | --- | --- |
+| appId | The id of the app. |  |  |
+| processDefinitionKey | The processDefinitionKey of the process. |  |  |
+| presetColumn | string |  | The presetColumn of the custom schema to fetch. |
+| state | Define state of the processes. Possible values are `running`, `completed` and `all` |  |  |
+| sort | Define sort of the processes. Possible values are `created-desc`, `created-asc`, `ended-desc`, `ended-asc` |  |  |
+| schemaColumn | List of columns to display in the process instances datatable (see the [Details](#details) section below) |  |  |
 
 ### Events
 
 | Name | Description |
-| --- | --- |
+| ---- | ----------- |
 | rowClick | Emitted when a row in the process list is clicked |
 | success | Emitted when the list of process instances has been loaded successfully from the server |
 | error | Emitted when an error is encountered loading the list of process instances from the server |
 
-
-
-
 ## Details
 
 Example value for the schemaColumn property (see [Properties](#properties) section above):
diff --git a/docs/process.service.md b/docs/process.service.md
index bdb6fc8700..7f3b007f9e 100644
--- a/docs/process.service.md
+++ b/docs/process.service.md
@@ -1,4 +1,5 @@
 # Process Service
+
 Manage Process Instances, Process Variables, and Process Audit Log. 
 
 ## Importing
@@ -15,7 +16,8 @@ export class SomePageComponent implements OnInit {
 
 ## Methods
 
-#### getProcess(processInstanceId: string): Observable`<ProcessInstance>` 
+#### getProcess(processInstanceId: string): Observable`<ProcessInstance>`
+
 Get Process Instance metadata for passed in Process Instance ID:
 
 ```ts
@@ -30,35 +32,34 @@ this.processService.getProcess(processInstanceId).subscribe( (processInstance: P
 The `processInstanceId` refers to a process instance ID for a running process in APS.  
 The returned `processInstance` object is of type `ProcessInstance` and looks like in this sample:
 
-```
-   businessKey: null
-   ended: null
-   graphicalNotationDefined: true
-   id: "11337"
-   name: "Invoice Approval 2 started from ADF client"
-   processDefinitionCategory: "http://www.activiti.org/processdef"
-   processDefinitionDeploymentId: "18"
-   processDefinitionDescription: "This is a simple invoice approval process that allows a person to assign a dedicated approver for the the invoice. It will then be routed to the Accounting department for payment preparation. Once payment is prepared the invoice will be stored in a specific folder and an email notification will be sent."
-   processDefinitionId: "InvoiceApprovalProcess:2:21"
-   processDefinitionKey: "InvoiceApprovalProcess"
-   processDefinitionName: "Invoice Approval Process"
-   processDefinitionVersion: 2
-   startFormDefined: true
-   started: Tue Oct 10 2017 10:35:42 GMT+0100 (BST) {}
-   startedBy: {id: 1, firstName: null, lastName: "Administrator", email: "admin@app.activiti.com"}
-   suspended: false
-   tenantId: "tenant_1"
-   variables:  
-        0: {name: "initiator", type: "string", value: "1"}
-        1: {name: "approver", type: "long", value: 2002}
-        2: {name: "companyemail", type: "string", value: "martin.bergljung@xxxxx.com"}
-        3: {name: "invoicetobeapproved", value: null}
-        4: {name: "invoiceFileName", type: "string", value: " - [Alfresco_Enterprise_Edition_3_3_Windows_Simple_Install.pdf]"}
-        5: {name: "comments", value: null}
-        6: {name: "form8outcome", type: "string", value: "Reject"}
-```
+       businessKey: null
+       ended: null
+       graphicalNotationDefined: true
+       id: "11337"
+       name: "Invoice Approval 2 started from ADF client"
+       processDefinitionCategory: "http://www.activiti.org/processdef"
+       processDefinitionDeploymentId: "18"
+       processDefinitionDescription: "This is a simple invoice approval process that allows a person to assign a dedicated approver for the the invoice. It will then be routed to the Accounting department for payment preparation. Once payment is prepared the invoice will be stored in a specific folder and an email notification will be sent."
+       processDefinitionId: "InvoiceApprovalProcess:2:21"
+       processDefinitionKey: "InvoiceApprovalProcess"
+       processDefinitionName: "Invoice Approval Process"
+       processDefinitionVersion: 2
+       startFormDefined: true
+       started: Tue Oct 10 2017 10:35:42 GMT+0100 (BST) {}
+       startedBy: {id: 1, firstName: null, lastName: "Administrator", email: "admin@app.activiti.com"}
+       suspended: false
+       tenantId: "tenant_1"
+       variables:  
+            0: {name: "initiator", type: "string", value: "1"}
+            1: {name: "approver", type: "long", value: 2002}
+            2: {name: "companyemail", type: "string", value: "martin.bergljung@xxxxx.com"}
+            3: {name: "invoicetobeapproved", value: null}
+            4: {name: "invoiceFileName", type: "string", value: " - [Alfresco_Enterprise_Edition_3_3_Windows_Simple_Install.pdf]"}
+            5: {name: "comments", value: null}
+            6: {name: "form8outcome", type: "string", value: "Reject"}
+
+#### startProcess(processDefinitionId: string, name: string, outcome?: string, startFormValues?: any, variables?: ProcessInstanceVariable\[]): Observable`<ProcessInstance>`
 
-#### startProcess(processDefinitionId: string, name: string, outcome?: string, startFormValues?: any, variables?: ProcessInstanceVariable[]): Observable`<ProcessInstance>`
 Start a process based on passed in Process Definition, name, form values or variables.
 
 When starting you can choose to pass in form field values or process variables (you cannot pass in both).
@@ -84,30 +85,27 @@ this.processService.startProcess(processDefinitionId, name, outcome, startFormVa
 
 A `ProcessInstance` object is returned for a successfully started process:
 
-```
-businessKey: null
-ended: null
-graphicalNotationDefined: true
-id: "75001"
-name: "Sample Invoice Process"
-processDefinitionCategory: "http://www.activiti.org/processdef"
-processDefinitionDeploymentId: "18"
-processDefinitionDescription: "This is a simple invoice approval process that allows a person to assign a dedicated approver for the the invoice. It will then be routed to the Accounting department for payment preparation. Once payment is prepared the invoice will be stored in a specific folder and an email notification will be sent."
-processDefinitionId: "InvoiceApprovalProcess:2:21"
-processDefinitionKey: "InvoiceApprovalProcess"
-processDefinitionName: "Invoice Approval Process"
-processDefinitionVersion: 2
-startFormDefined: false
-started: Thu Nov 09 2017 08:15:37 GMT+0000 (GMT) {}
-startedBy: {id: 1, firstName: null, lastName: "Administrator", email: "admin@app.activiti.com"}
-tenantId: "tenant_1"
-variables:
-    0: {name: "approver", value: null}
-    1: {name: "companyemail", type: "string", value: "someone@acme.com"}
-    2: {name: "initiator", type: "string", value: "1"}
-    3: {name: "invoicetobeapproved", value: null}
-
-```
+    businessKey: null
+    ended: null
+    graphicalNotationDefined: true
+    id: "75001"
+    name: "Sample Invoice Process"
+    processDefinitionCategory: "http://www.activiti.org/processdef"
+    processDefinitionDeploymentId: "18"
+    processDefinitionDescription: "This is a simple invoice approval process that allows a person to assign a dedicated approver for the the invoice. It will then be routed to the Accounting department for payment preparation. Once payment is prepared the invoice will be stored in a specific folder and an email notification will be sent."
+    processDefinitionId: "InvoiceApprovalProcess:2:21"
+    processDefinitionKey: "InvoiceApprovalProcess"
+    processDefinitionName: "Invoice Approval Process"
+    processDefinitionVersion: 2
+    startFormDefined: false
+    started: Thu Nov 09 2017 08:15:37 GMT+0000 (GMT) {}
+    startedBy: {id: 1, firstName: null, lastName: "Administrator", email: "admin@app.activiti.com"}
+    tenantId: "tenant_1"
+    variables:
+        0: {name: "approver", value: null}
+        1: {name: "companyemail", type: "string", value: "someone@acme.com"}
+        2: {name: "initiator", type: "string", value: "1"}
+        3: {name: "invoicetobeapproved", value: null}
 
 We can see here that the form field values have been converted to process variables.
 
@@ -142,8 +140,9 @@ this.processService.startProcess(processDefinitionId, name)
   console.log('Error: ', error);
 });
 ```
- 
+
 #### cancelProcess(processInstanceId: string): Observable`<void>`
+
 Cancel a process instance by passing in its process instance ID:
 
 ```ts
@@ -163,7 +162,8 @@ Once a Process Instance is cancelled it will show up under processes with status
 You typically get the `processInstanceId` when you start a process. It is then
 contained in the `ProcessInstance.id` response. 
 
-#### createOrUpdateProcessInstanceVariables(processDefinitionId: string, variables: ProcessInstanceVariable[]): Observable`<ProcessInstanceVariable[]>`
+#### createOrUpdateProcessInstanceVariables(processDefinitionId: string, variables: ProcessInstanceVariable\[]): Observable`<ProcessInstanceVariable[]>`
+
 Create or update variables for a Process Instance: 
 
 ```ts
@@ -182,17 +182,16 @@ this.processService.createOrUpdateProcessInstanceVariables(processInstanceId, va
 
 The response is an array of the successfully created `ProcessInstanceVariable`:
 
-```
-Response:  
-    0: {name: "sampleVar1", type: "string", value: "hello", scope: "global"}
-    1: {name: "sampleVar2", type: "string", value: "bye", scope: "global"}
-```
+    Response:  
+        0: {name: "sampleVar1", type: "string", value: "hello", scope: "global"}
+        1: {name: "sampleVar2", type: "string", value: "bye", scope: "global"}
 
 If a variable already exist, then its value will be updated.
 
 **Note**. you need to pass in a Process Instance ID here, not a Process Definition ID.
 
 #### deleteProcessInstanceVariable(processDefinitionId: string, variableName: string): Observable`<void>`
+
 Delete a variable for a Process Instance: 
 
 ```ts
@@ -207,10 +206,11 @@ this.processService.deleteProcessInstanceVariable(processInstanceId, variableNam
 ```
 
 The response will be `null` if the variable was successfully deleted from the Process Instance.
- 
+
 **Note**. you need to pass in a Process Instance ID here, not a Process Definition ID.
 
-#### getProcessInstanceVariables(processDefinitionId: string): Observable`<ProcessInstanceVariable[]>` 
+#### getProcessInstanceVariables(processDefinitionId: string): Observable`<ProcessInstanceVariable[]>`
+
 Get all the variables for a Process Instance: 
 
 ```ts
@@ -225,20 +225,18 @@ this.processService.getProcessInstanceVariables(processInstanceId)
 
 The response is an array of `ProcessInstanceVariable`:
 
-```
-procVars:  
-    0: {name: "approver", scope: "global", value: null, valueUrl: null}
-    1: {name: "companyemail", scope: "global", value: "someone@acme.com", valueUrl: null}
-    2: {name: "initiator", scope: "global", value: "1", valueUrl: null}
-    3: {name: "sampleVar2", scope: "global", value: "bye", valueUrl: null}
-    4: {name: "invoicetobeapproved", scope: "global", value: null, valueUrl: null}
-    5: {name: "invoiceFileName", scope: "global", value: " - [UNKNOWN]", valueUrl: null}
-```
- 
+    procVars:  
+        0: {name: "approver", scope: "global", value: null, valueUrl: null}
+        1: {name: "companyemail", scope: "global", value: "someone@acme.com", valueUrl: null}
+        2: {name: "initiator", scope: "global", value: "1", valueUrl: null}
+        3: {name: "sampleVar2", scope: "global", value: "bye", valueUrl: null}
+        4: {name: "invoicetobeapproved", scope: "global", value: null, valueUrl: null}
+        5: {name: "invoiceFileName", scope: "global", value: " - [UNKNOWN]", valueUrl: null}
+
 **Note**. you need to pass in a Process Instance ID here, not a Process Definition ID.
 
- 
 #### getProcessDefinitions(appId?: number): Observable`<ProcessDefinitionRepresentation[]>`
+
 Get Process Definitions associated with a Process App:
 
 ```ts
@@ -253,19 +251,17 @@ this.processService.getProcessDefinitions(processAppId)
 
 The response is an array of `ProcessDefinitionRepresentation` objects looking like in this example:
 
-```
-0:
-    category: "http://www.activiti.org/processdef"
-    deploymentId: "18"
-    description: "This is a simple invoice approval process that allows a person to assign a dedicated approver for the the invoice. It will then be routed to the Accounting department for payment preparation. Once payment is prepared the invoice will be stored in a specific folder and an email notification will be sent."
-    hasStartForm: true
-    id: "InvoiceApprovalProcess:2:21"
-    key: "InvoiceApprovalProcess"
-    metaDataValues: []
-    name: "Invoice Approval Process"
-    tenantId: "tenant_1"
-    version: 2
-```
+    0:
+        category: "http://www.activiti.org/processdef"
+        deploymentId: "18"
+        description: "This is a simple invoice approval process that allows a person to assign a dedicated approver for the the invoice. It will then be routed to the Accounting department for payment preparation. Once payment is prepared the invoice will be stored in a specific folder and an email notification will be sent."
+        hasStartForm: true
+        id: "InvoiceApprovalProcess:2:21"
+        key: "InvoiceApprovalProcess"
+        metaDataValues: []
+        name: "Invoice Approval Process"
+        tenantId: "tenant_1"
+        version: 2
 
 If you wanted a list of all available process definitions call the method without specifying the
 process application ID:
@@ -280,6 +276,7 @@ this.processService.getProcessDefinitions()
 ```
 
 #### getProcessInstances(requestNode: ProcessFilterParamRepresentationModel, processDefinitionKey?: string): Observable`<ProcessInstance[]>`
+
 Get Process Instances for passed in filter and optionally Process Definition: 
 
 ```ts
@@ -298,21 +295,21 @@ this.processService.getProcessInstances(filterRunningAsc, processDefKey)
 
 The response is an array of `ProcessInstance` objects as in this example:
 
-```
-    0: {id: "7501", name: "Invoice Approval Process - October 9th 2017", businessKey: null, processDefinitionId: "InvoiceApprovalProcess:3:2511", tenantId: "tenant_1", …}
-    1: {id: "7520", name: "Invoice Approval Process - October 9th 2017", businessKey: null, processDefinitionId: "InvoiceApprovalProcess:2:21", tenantId: "tenant_1", …}
-    2: {id: "8206", name: "Invoice Approval Process - October 9th 2017", businessKey: null, processDefinitionId: "InvoiceApprovalProcess:2:21", tenantId: "tenant_1", …}
-    3: {id: "8302", name: "Invoice Approval Process - October 9th 2017", businessKey: null, processDefinitionId: "InvoiceApprovalProcess:2:21", tenantId: "tenant_1", …}
-    4: {id: "11337", name: "Invoice Approval 2 started from ADF client", businessKey: null, processDefinitionId: "InvoiceApprovalProcess:2:21", tenantId: "tenant_1", …}
-    5: {id: "11437", name: "Invoice Approval Process - October 10th 2017", businessKey: null, processDefinitionId: "InvoiceApprovalProcess:2:21", tenantId: "tenant_1", …}
-    6: {id: "67143", name: "Sample Invoice Approval 2017-10-26", businessKey: null, processDefinitionId: "InvoiceApprovalProcess:5:62514", tenantId: "tenant_1", …}
-    7: {id: "75001", name: "Sample Invoice Process", businessKey: null, processDefinitionId: "InvoiceApprovalProcess:2:21", tenantId: "tenant_1", …}
-```
+        0: {id: "7501", name: "Invoice Approval Process - October 9th 2017", businessKey: null, processDefinitionId: "InvoiceApprovalProcess:3:2511", tenantId: "tenant_1", …}
+        1: {id: "7520", name: "Invoice Approval Process - October 9th 2017", businessKey: null, processDefinitionId: "InvoiceApprovalProcess:2:21", tenantId: "tenant_1", …}
+        2: {id: "8206", name: "Invoice Approval Process - October 9th 2017", businessKey: null, processDefinitionId: "InvoiceApprovalProcess:2:21", tenantId: "tenant_1", …}
+        3: {id: "8302", name: "Invoice Approval Process - October 9th 2017", businessKey: null, processDefinitionId: "InvoiceApprovalProcess:2:21", tenantId: "tenant_1", …}
+        4: {id: "11337", name: "Invoice Approval 2 started from ADF client", businessKey: null, processDefinitionId: "InvoiceApprovalProcess:2:21", tenantId: "tenant_1", …}
+        5: {id: "11437", name: "Invoice Approval Process - October 10th 2017", businessKey: null, processDefinitionId: "InvoiceApprovalProcess:2:21", tenantId: "tenant_1", …}
+        6: {id: "67143", name: "Sample Invoice Approval 2017-10-26", businessKey: null, processDefinitionId: "InvoiceApprovalProcess:5:62514", tenantId: "tenant_1", …}
+        7: {id: "75001", name: "Sample Invoice Process", businessKey: null, processDefinitionId: "InvoiceApprovalProcess:2:21", tenantId: "tenant_1", …}
+
 You can also narrow down the search via other properties in the `ProcessFilterParamRepresentationModel`, such as
 `processDefinitionId` and `appDefinitionId`.
 The number of Process Instances that are returned can be controlled with the `page` and `size` properties.
 
 #### getProcessTasks(processInstanceId: string, state?: string): Observable`<TaskDetailsModel[]>`
+
 Get Task Instances for passed in Process Instance, optionally filter by task state: 
 
 ```ts
@@ -327,46 +324,45 @@ this.processService.getProcessTasks(processInstanceId)
 
 The response is an array of `TaskDetailsModel` objects as in this example:
 
-```
-{
-    "size":1,
-    "total":1,
-    "start":0,
-    "data":[
-        {"id":"75010",
-        "name":"Approve Invoice  - [Invoice 123]",
-        "description":null,
-        "category":null,
-        "assignee":{"id":1,"firstName":null,"lastName":"Administrator","email":"admin@app.activiti.com"},
-        "created":"2017-11-09T08:15:37.427+0000",
-        "dueDate":null,
-        "endDate":null,
-        "duration":null,
-        "priority":50,
-        "parentTaskId":null,
-        "parentTaskName":null,
-        "processInstanceId":"75001",
-        "processInstanceName":null,
-        "processDefinitionId":"InvoiceApprovalProcess:2:21",
-        "processDefinitionName":"Invoice Approval Process",
-        "processDefinitionDescription":"This is a simple invoice approval process that allows a person to assign a dedicated approver for the the invoice. It will then be routed to the Accounting department for payment preparation. Once payment is prepared the invoice will be stored in a specific folder and an email notification will be sent.",
-        "processDefinitionKey":"InvoiceApprovalProcess",
-        "processDefinitionCategory":"http://www.activiti.org/processdef",
-        "processDefinitionVersion":2,
-        "processDefinitionDeploymentId":"18",
-        "formKey":"8",
-        "processInstanceStartUserId":null,
-        "initiatorCanCompleteTask":false,
-        "adhocTaskCanBeReassigned":false,
-        "taskDefinitionKey":"approveInvoice",
-        "executionId":"75001",
-        "memberOfCandidateGroup":false,
-        "memberOfCandidateUsers":false,
-        "managerOfCandidateGroup":false
-        }
-        ]
-}
-```
+    {
+        "size":1,
+        "total":1,
+        "start":0,
+        "data":[
+            {"id":"75010",
+            "name":"Approve Invoice  - [Invoice 123]",
+            "description":null,
+            "category":null,
+            "assignee":{"id":1,"firstName":null,"lastName":"Administrator","email":"admin@app.activiti.com"},
+            "created":"2017-11-09T08:15:37.427+0000",
+            "dueDate":null,
+            "endDate":null,
+            "duration":null,
+            "priority":50,
+            "parentTaskId":null,
+            "parentTaskName":null,
+            "processInstanceId":"75001",
+            "processInstanceName":null,
+            "processDefinitionId":"InvoiceApprovalProcess:2:21",
+            "processDefinitionName":"Invoice Approval Process",
+            "processDefinitionDescription":"This is a simple invoice approval process that allows a person to assign a dedicated approver for the the invoice. It will then be routed to the Accounting department for payment preparation. Once payment is prepared the invoice will be stored in a specific folder and an email notification will be sent.",
+            "processDefinitionKey":"InvoiceApprovalProcess",
+            "processDefinitionCategory":"http://www.activiti.org/processdef",
+            "processDefinitionVersion":2,
+            "processDefinitionDeploymentId":"18",
+            "formKey":"8",
+            "processInstanceStartUserId":null,
+            "initiatorCanCompleteTask":false,
+            "adhocTaskCanBeReassigned":false,
+            "taskDefinitionKey":"approveInvoice",
+            "executionId":"75001",
+            "memberOfCandidateGroup":false,
+            "memberOfCandidateUsers":false,
+            "managerOfCandidateGroup":false
+            }
+            ]
+    }
+
 You can also filter by task state, which can be `active` or `completed`:
 
 ```ts
@@ -381,6 +377,7 @@ this.processService.getProcessTasks(processInstanceId, taskState)
 ```
 
 #### fetchProcessAuditJsonById(processId: string): Observable`<any>`
+
 Fetch Process Audit log as JSON for a Process Instance ID: 
 
 ```ts
@@ -395,98 +392,97 @@ this.processService.fetchProcessAuditJsonById(processInstanceId)
 
 The response is JSON object with the Process Instance audit log:
 
-```
-{
-  "processInstanceId": "75001",
-  "processInstanceName": "Sample Invoice Process",
-  "processDefinitionName": "Invoice Approval Process",
-  "processDefinitionVersion": "2",
-  "processInstanceStartTime": "Thu Nov 09 08:15:37 GMT 2017",
-  "processInstanceEndTime": null,
-  "processInstanceDurationInMillis": null,
-  "processInstanceInitiator": " Administrator",
-  "entries": [
     {
-      "index": 1,
-      "type": "startForm",
-      "selectedOutcome": null,
-      "formData": [
+      "processInstanceId": "75001",
+      "processInstanceName": "Sample Invoice Process",
+      "processDefinitionName": "Invoice Approval Process",
+      "processDefinitionVersion": "2",
+      "processInstanceStartTime": "Thu Nov 09 08:15:37 GMT 2017",
+      "processInstanceEndTime": null,
+      "processInstanceDurationInMillis": null,
+      "processInstanceInitiator": " Administrator",
+      "entries": [
         {
-          "fieldName": "Approver",
-          "fieldId": "approver",
-          "value": ""
+          "index": 1,
+          "type": "startForm",
+          "selectedOutcome": null,
+          "formData": [
+            {
+              "fieldName": "Approver",
+              "fieldId": "approver",
+              "value": ""
+            },
+            {
+              "fieldName": "Company Email",
+              "fieldId": "companyemail",
+              "value": "someone@acme.com"
+            },
+            {
+              "fieldName": "Invoice to be approved",
+              "fieldId": "invoicetobeapproved",
+              "value": ""
+            }
+          ],
+          "taskName": null,
+          "taskAssignee": null,
+          "activityId": null,
+          "activityName": null,
+          "activityType": null,
+          "startTime": null,
+          "endTime": null,
+          "durationInMillis": null
         },
         {
-          "fieldName": "Company Email",
-          "fieldId": "companyemail",
-          "value": "someone@acme.com"
+          "index": 2,
+          "type": "activityExecuted",
+          "selectedOutcome": null,
+          "formData": [],
+          "taskName": null,
+          "taskAssignee": null,
+          "activityId": "startInvoiceProcess",
+          "activityName": "Start Invoice Process",
+          "activityType": "startEvent",
+          "startTime": "Thu Nov 09 08:15:37 GMT 2017",
+          "endTime": "Thu Nov 09 08:15:37 GMT 2017",
+          "durationInMillis": 37
         },
         {
-          "fieldName": "Invoice to be approved",
-          "fieldId": "invoicetobeapproved",
-          "value": ""
+          "index": 3,
+          "type": "activityExecuted",
+          "selectedOutcome": null,
+          "formData": [],
+          "taskName": null,
+          "taskAssignee": null,
+          "activityId": "approveInvoice",
+          "activityName": "Approve Invoice",
+          "activityType": "userTask",
+          "startTime": "Thu Nov 09 08:15:37 GMT 2017",
+          "endTime": null,
+          "durationInMillis": null
+        },
+        {
+          "index": 4,
+          "type": "taskCreated",
+          "selectedOutcome": null,
+          "formData": [],
+          "taskName": "Approve Invoice  - [UNKNOWN]",
+          "taskAssignee": " Administrator",
+          "activityId": null,
+          "activityName": null,
+          "activityType": null,
+          "startTime": "Thu Nov 09 08:15:37 GMT 2017",
+          "endTime": null,
+          "durationInMillis": null
         }
       ],
-      "taskName": null,
-      "taskAssignee": null,
-      "activityId": null,
-      "activityName": null,
-      "activityType": null,
-      "startTime": null,
-      "endTime": null,
-      "durationInMillis": null
-    },
-    {
-      "index": 2,
-      "type": "activityExecuted",
-      "selectedOutcome": null,
-      "formData": [],
-      "taskName": null,
-      "taskAssignee": null,
-      "activityId": "startInvoiceProcess",
-      "activityName": "Start Invoice Process",
-      "activityType": "startEvent",
-      "startTime": "Thu Nov 09 08:15:37 GMT 2017",
-      "endTime": "Thu Nov 09 08:15:37 GMT 2017",
-      "durationInMillis": 37
-    },
-    {
-      "index": 3,
-      "type": "activityExecuted",
-      "selectedOutcome": null,
-      "formData": [],
-      "taskName": null,
-      "taskAssignee": null,
-      "activityId": "approveInvoice",
-      "activityName": "Approve Invoice",
-      "activityType": "userTask",
-      "startTime": "Thu Nov 09 08:15:37 GMT 2017",
-      "endTime": null,
-      "durationInMillis": null
-    },
-    {
-      "index": 4,
-      "type": "taskCreated",
-      "selectedOutcome": null,
-      "formData": [],
-      "taskName": "Approve Invoice  - [UNKNOWN]",
-      "taskAssignee": " Administrator",
-      "activityId": null,
-      "activityName": null,
-      "activityType": null,
-      "startTime": "Thu Nov 09 08:15:37 GMT 2017",
-      "endTime": null,
-      "durationInMillis": null
+      "decisionInfo": {
+        "calculatedValues": [],
+        "appliedRules": []
+      }
     }
-  ],
-  "decisionInfo": {
-    "calculatedValues": [],
-    "appliedRules": []
-  }
-}
-```
 
 #### fetchProcessAuditPdfById(processId: string): Observable`<Blob>`
+
 Fetch Process Audit log as a PDF for a Process Instance ID: 
 
 ```ts
@@ -501,11 +497,4 @@ this.processService.fetchProcessAuditPdfById(processInstanceId)
 
 The response is a BLOB as follows:
 
-```
-Process Audit log BLOB:  Blob {size: 124511, type: "text/xml"}
-```
-
-
-<!-- seealso start -->
-
-<!-- seealso end -->
\ No newline at end of file
+    Process Audit log BLOB:  Blob {size: 124511, type: "text/xml"}
diff --git a/docs/product-version.model.md b/docs/product-version.model.md
index f81eeff0a0..0496409a03 100644
--- a/docs/product-version.model.md
+++ b/docs/product-version.model.md
@@ -67,9 +67,6 @@ class VersionModuleModel {
 }
 ```
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Discovery api service](discovery-api.service.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [Discovery api service](discovery-api.service.md)
diff --git a/docs/rating.component.md b/docs/rating.component.md
index 0ec88269a5..e1bb0b6534 100644
--- a/docs/rating.component.md
+++ b/docs/rating.component.md
@@ -1,5 +1,7 @@
 # ADF Rating component
 
+Allows a user to add ratings to an item.
+
 ![Rating component screenshot](docassets/images/social2.png)
 
 ## Basic Usage
@@ -8,24 +10,21 @@
 <adf-rating  
     [nodeId]="'74cd8a96-8a21-47e5-9b3b-a1b3e296787d'">
 </adf-rating>
-``` 
+```
 
 ### Properties
 
 | Attribute | Type | Default | Description |
-| --- | --- | --- | --- |
-| nodeId | string | | The identifier of a node |
+| --------- | ---- | ------- | ----------- |
+| nodeId | string |  | The identifier of a node |
 
 ### Events
 
 | Name | Description |
-| --- | --- |
+| ---- | ----------- |
 | changeVote | Raised when vote gets changed |
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Like component](like.component.md)
-- [Rating service](rating.service.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [Like component](like.component.md)
+-   [Rating service](rating.service.md)
diff --git a/docs/rating.service.md b/docs/rating.service.md
index 92706b19aa..e81a346db6 100644
--- a/docs/rating.service.md
+++ b/docs/rating.service.md
@@ -25,10 +25,7 @@ See the [Ratings API](https://github.com/Alfresco/alfresco-js-api/blob/master/sr
 in the Alfresco JS API for more information about the returned data and the
 REST API that this service is based on.
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Like component](like.component.md)
-- [Rating component](rating.component.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [Like component](like.component.md)
+-   [Rating component](rating.component.md)
diff --git a/docs/renditions.service.md b/docs/renditions.service.md
index bdca46654a..51e490a7ab 100644
--- a/docs/renditions.service.md
+++ b/docs/renditions.service.md
@@ -1,6 +1,40 @@
-# Renditions Service
+# Renditions service
 
-* getRenditionsListByNodeId(nodeId: string)
-* createRendition(nodeId: string, encoding: string)
-* getRendition(nodeId: string, encoding: string)
-* isRenditionAvailable(nodeId: string, encoding: string)
+Manages prearranged conversions of content to different formats.
+
+## Methods
+
+`isRenditionAvailable(nodeId: string, encoding: string): Observable<boolean>`<br/>
+Has the specified rendition been set up for this item?
+
+`isConversionPossible(nodeId: string, encoding: string): Observable<boolean>`<br/>
+Is it possible to convert this item to the specified format?
+
+`getRenditionUrl(nodeId: string, encoding: string): string`<br/>
+Gets a URL linking to a rendition.
+
+`getRenditionsListByNodeId(nodeId: string): Observable<RenditionPaging>`<br/>
+Gets all available renditions for an item.
+
+`convert(nodeId: string, encoding: string, pollingInterval: number = 1000)`<br/>
+Performs a format conversion on an item directly.
+
+## Details
+
+ACS allows content items to be converted to other formats for display or delivery.
+For example, a raw text file might be converted to HTML to enable better formatting
+in a web browser or a PDF might be converted to an equivalent bitmap image. A
+*rendition* is a prearranged conversion that is set up for an item for convenient
+repeated use. More information about renditions is available in the
+[Content Services documentation](https://docs.alfresco.com/5.2/references/dev-extension-points-content-transformer.html).
+
+In the Renditions service methods, the `nodeId` is a string identifying the content
+node that the rendition applies to. This can be obtained from
+[Document List component](document-list.component.md) events and various other places
+in the ADF API. The `encoding` identifies the conversion performed by the rendition.
+
+See the
+[Renditions API page](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/RenditionsApi.md#createRendition)
+in the Alfresco JS API for more information about the
+[RenditionPaging](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/RenditionPaging.md)
+class and other implementation details.
diff --git a/docs/search-api.service.md b/docs/search-api.service.md
index 784c8c3d25..81d4859868 100644
--- a/docs/search-api.service.md
+++ b/docs/search-api.service.md
@@ -12,8 +12,3 @@ Searches the repository.
 See the
 [Alfresco JS API](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-search-rest-api/docs/SearchApi.md#search)
 for the format of the query and returned data.
-
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
-
-<!-- seealso end -->
\ No newline at end of file
diff --git a/docs/search-configuration.interface.md b/docs/search-configuration.interface.md
new file mode 100644
index 0000000000..0bc74c7f42
--- /dev/null
+++ b/docs/search-configuration.interface.md
@@ -0,0 +1,88 @@
+# Search Configuration interface
+
+Provides fine control of parameters to a search.
+
+## Methods
+
+`generateQueryBody(searchTerm: string, maxResults: string, skipCount: string): QueryBody`<br/>
+Generates a QueryBody object with custom search parameters.
+
+## Details
+
+The interface defines a service that generates a custom
+[QueryBody](https://github.com/Alfresco/alfresco-js-api/blob/1.6.0/src/alfresco-search-rest-api/docs/QueryBody.md)
+object. This object can then be supplied to a search operation to refine the search parameters.
+
+A standard implementation, the
+[Search Configuration service](search-configuration.service.md) is provided in the ADF Core library
+source. This works fine in most cases but if you need to, you can implement your own service, as
+described below.
+
+### How to use the interface
+
+1.  Implement the service class
+
+    Create your own service class to implement the SearchConfigurationInterface. This defines the
+    the `generateQueryBody` method that returns the QueryBody object. See the
+    [QueryBody](https://github.com/Alfresco/alfresco-js-api/blob/1.6.0/src/alfresco-search-rest-api/docs/QueryBody.md)
+    page in the Alfresco JS API for further details about the options this object provides.
+
+    An example implementation is given below:
+
+    ```ts
+    import { QueryBody } from 'alfresco-js-api';
+    import { SearchConfigurationInterface } from '@alfresco/adf-core';
+
+    export class TestSearchConfigurationService implements SearchConfigurationInterface {
+
+        constructor() {
+        }
+
+        public generateQueryBody(searchTerm: string, maxResults: string, skipCount: string): QueryBody {
+            const defaultQueryBody: QueryBody = {
+                query: {
+                    query: searchTerm ? `${searchTerm}* OR name:${searchTerm}*` : searchTerm
+                },
+                include: ['path', 'allowableOperations'],
+                paging: {
+                    maxItems: maxResults,
+                    skipCount: skipCount
+                },
+                filterQueries: [
+                    { query: "TYPE:'cm:folder'" },
+                    { query: 'NOT cm:creator:System' }]
+            };
+
+            return defaultQueryBody;
+        }
+    }
+    ```
+
+2.  Provide your service class to the module
+
+    Once you have created your service class, you must inform the component to use it instead
+    of the default one. This is easily done using the component providers:
+
+    ```ts
+        import { SearchService, SearchConfigurationService } from '@alfresco/adf-core';
+        import { TestSearchConfigurationService } from './search-config-test.service';
+
+        @Component({
+            selector: 'app-search-extended-component',
+            templateUrl: './search-extended.component.html',
+            styleUrls: ['./search-extended.component.scss'],
+            encapsulation: ViewEncapsulation.None,
+            providers: [
+                { provide: SearchConfigurationService, useClass: TestSearchConfigurationService },
+                SearchService
+            ]
+        })
+    ```
+
+    You also need to add the SearchService as a provider to avoid overriding the module instance. This component will have his own instance of the SearchService that will use the class you have provided
+    as its configuration.
+
+## See also
+
+-   [Search component](search.component.md)
+-   [Search configuration service](search-configuration.service.md)
diff --git a/docs/search-configuration.service.md b/docs/search-configuration.service.md
new file mode 100644
index 0000000000..0cf3f78bae
--- /dev/null
+++ b/docs/search-configuration.service.md
@@ -0,0 +1,26 @@
+# Search Configuration service
+
+Provides fine control of parameters to a search.
+
+## Methods
+
+`generateQueryBody(searchTerm: string, maxResults: string, skipCount: string): QueryBody`<br/>
+Generates a QueryBody object with custom search parameters.
+
+## Details
+
+The `generateQueryBody` method returns a
+[QueryBody](https://github.com/Alfresco/alfresco-js-api/blob/1.6.0/src/alfresco-search-rest-api/docs/QueryBody.md)
+object. This configures the search to use `searchTerm` along with `maxResults` and `skipCount`
+specified for the paging of the search results.
+
+This service is a standard implementation of the
+[Search configuration interface](search-configuration.interface.md) that works well for many
+common cases. However, you can also supply your own implementation if you need to. See the
+[Search configuration interface](search-configuration.interface.md) page for full details and
+example code.
+
+## See also
+
+-   [Search component](search.component.md)
+-   [Search configuration interface](search-configuration.interface.md)
diff --git a/docs/search-control.component.md b/docs/search-control.component.md
index 8e9fe6c9d1..fa492e3adb 100644
--- a/docs/search-control.component.md
+++ b/docs/search-control.component.md
@@ -4,20 +4,6 @@ Displays a input text which shows find-as-you-type suggestions.
 
 ![adf-search-control](docassets/images/search-control-component.png)
 
-
-<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
-
-<!-- toc -->
-
-- [Basic usage](#basic-usage)
-  * [Properties](#properties)
-  * [Events](#events)
-- [Details](#details)
-
-<!-- tocstop -->
-
-<!-- markdown-toc end -->
-
 ## Basic usage
 
 ```html
@@ -31,20 +17,20 @@ Displays a input text which shows find-as-you-type suggestions.
 ### Properties
 
 | Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| searchTerm | string  | |  Search term to pre-populate the field with |
-| inputType | string  | "text" | Type of the input field to render, e.g. "search" or "text" (default) |
-| autocomplete | boolean | true  | Whether the browser should offer field auto-completion for the input field to the user. |
-| highlight | boolean | false  | Use the true value if you want to see the searched word highlighted. |
-| expandable | boolean |  true  | Whether to use an expanding search control, if false then a regular input is used. |
-| liveSearchEnabled | boolean | true  | Whether find-as-you-type suggestions should be offered for matching content items. Set to false to disable. |
-| liveSearchMaxResults | number | 5 |  Maximum number of results to show in the live search. |
-| customQueryBody | [QueryBody](https://github.com/Alfresco/alfresco-js-api/blob/1.6.0/src/alfresco-search-rest-api/docs/QueryBody.md) | | object which allow you to perform more elaborated query from the search api |
+| ---- | ---- | ------- | ----------- |
+| searchTerm | string |  | Search term to pre-populate the field with |
+| inputType | string | "text" | Type of the input field to render, e.g. "search" or "text" (default) |
+| autocomplete | boolean | true | Whether the browser should offer field auto-completion for the input field to the user. |
+| highlight | boolean | false | Use the true value if you want to see the searched word highlighted. |
+| expandable | boolean | true | Whether to use an expanding search control, if false then a regular input is used. |
+| liveSearchEnabled | boolean | true | Whether find-as-you-type suggestions should be offered for matching content items. Set to false to disable. |
+| liveSearchMaxResults | number | 5 | Maximum number of results to show in the live search. |
+| customQueryBody | [QueryBody](https://github.com/Alfresco/alfresco-js-api/blob/1.6.0/src/alfresco-search-rest-api/docs/QueryBody.md) |  | object which allow you to perform more elaborated query from the search api. This input is deprecated, to use the extended query body function please refer to the suggested solution [here](search-configuration.interface.md) |
 
 ### Events
 
 | Name | Description |
-| --- | --- |
+| ---- | ----------- |
 | searchChange | 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 | Emitted when the search is submitted pressing ENTER button. The search term is provided as value of the event. |
 | optionClicked | Emitted when a file item from the list of find-as-you-type results is selected |
diff --git a/docs/search.component.md b/docs/search.component.md
index 63bb972fdf..e7b8f6b709 100644
--- a/docs/search.component.md
+++ b/docs/search.component.md
@@ -1,19 +1,6 @@
 # Search component
 
-
-
-<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
-
-<!-- toc -->
-
-- [Basic usage](#basic-usage)
-  * [Properties](#properties)
-  * [Events](#events)
-- [Details](#details)
-
-<!-- tocstop -->
-
-<!-- markdown-toc end -->
+Searches items for supplied search terms. 
 
 ## Basic usage
 
@@ -27,22 +14,23 @@
 ### Properties
 
 | Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| searchTerm | string | | Search term to use when executing the search. Updating this value will run a new search and update the results  |
-| maxResults | number  | 20 | Maximum number of results to show in the search. |
-| skipResults | number  | 0 | Number of results to skip from the results pagination. |
-| displayWith | function | | Function that maps an option's value to its display value in the trigger |
-| queryBody| [QueryBody](https://github.com/Alfresco/alfresco-js-api/blob/1.6.0/src/alfresco-search-rest-api/docs/QueryBody.md) | | object which allow you to perform more elaborated query from the search api |
+| ---- | ---- | ------- | ----------- |
+| searchTerm | string |  | Search term to use when executing the search. Updating this value will run a new search and update the results |
+| maxResults | number | 20 | Maximum number of results to show in the search. |
+| skipResults | number | 0 | Number of results to skip from the results pagination. |
+| displayWith | function |  | Function that maps an option's value to its display value in the trigger |
+| queryBody | [QueryBody](https://github.com/Alfresco/alfresco-js-api/blob/1.6.0/src/alfresco-search-rest-api/docs/QueryBody.md) |  | object which allow you to perform more elaborated query from the search api. This input is deprecated, to use the extended query body function please refer to the suggested solution [here](search-configuration.interface.md) |
 
 ### Events
 
 | Name | Description |
-| --- | --- |
+| ---- | ----------- |
 | resultLoaded | Emitted when search results have fully loaded |
 
 ## Details
 
 ### Customise Search Results
+
 You have to add a template that will be shown when the results are loaded.
 
 ```html
@@ -56,6 +44,7 @@ You have to add a template that will be shown when the results are loaded.
     </ng-template>
 </adf-search>
 ```
+
 The results are provided via the [$implicit variable of angular2](https://angular.io/api/common/NgTemplateOutlet) and can be accessed via the sugar sintax 'let-yourChosenName'. As per example above the result will be something like : 
 
 ![adf-search-control](docassets/images/search-component-simple-template.png)
@@ -106,9 +95,10 @@ Which will look like :
 
 ![adf-search-control](docassets/images/search-component-complex-template.png)
 
-
 ### Attach an input field to the search
+
 You can also attach your input field to the adf-search component via the trigger [searchAutocomplete]
+Yuo can do this by exporting the adf-search panel instance into a local template variable (here we called it "search"), and binding that variable to the input's searchAutocomplete property.
 
 ```html
 <input type="text" [searchAutocomplete]="search">
@@ -121,4 +111,20 @@ You can also attach your input field to the adf-search component via the trigger
     </ng-template>
 </adf-search>        
 ```
-In this way it is possible to fetch the results from the word typed into the input text straight into the adf-search component via the custom template variable.
\ No newline at end of file
+
+In this way it is possible to fetch the results from the word typed into the input text straight into the adf-search component via the custom template variable.
+
+### Custom search configuration
+
+You can get finer control over the parameters of a search by defining them in a custom
+[QueryBody](https://github.com/Alfresco/alfresco-js-api/blob/1.6.0/src/alfresco-search-rest-api/docs/QueryBody.md)
+object. The recommended way to do this is with a custom implementation of the
+[Search Configuration interface](search-configuration.interface.md) (the `queryBody` parameter of the `Search component` is now deprecated). The ADF source provides a standard implementation of this
+interface, `SearchConfigurationService` that you can use as a base to adapt to your needs. See the
+[Search Configuration interface](search-configuration.interface.md) page for full details of how to
+customize your search.
+
+## See Also
+
+-   [Search configuration interface](search-configuration.interface.md)
+-   [Search configuration service](search-configuration.service.md)
diff --git a/docs/select-apps-dialog.component.md b/docs/select-apps-dialog.component.md
new file mode 100644
index 0000000000..c2b076c538
--- /dev/null
+++ b/docs/select-apps-dialog.component.md
@@ -0,0 +1,29 @@
+# Select app Component
+
+Show all available apps and return the selected app.
+
+![select-apps-dialog](docassets/images/select-apps-dialog.png)
+
+## Basic Usage
+
+```ts
+import { SelectAppsDialogComponent } from '@alfresco/adf-process-services';
+
+constructor(private dialog: MatDialog) {
+}
+   
+startSelectDialog(){
+   const dialogRef = this.dialog.open(SelectAppsDialogComponent, {
+       width: '630px',
+       panelClass: 'adf-version-manager-dialog'
+   });
+   
+   dialogRef.afterClosed().subscribe(selectedProcess => {
+       this.processId = selectedProcess.id;
+   });
+}
+```
+
+## See Also
+
+-   [Start process component](start-process.component.md)
diff --git a/docs/shared-links-api.service.md b/docs/shared-links-api.service.md
index 59fac0115a..e0f980b79e 100644
--- a/docs/shared-links-api.service.md
+++ b/docs/shared-links-api.service.md
@@ -11,15 +11,10 @@ Gets shared links available to the current user.
 
 Content Services allows users to generate URLs that can be shared with
 other people, even if they don't have a Content Services account. These
-URLs are known as *shared links*.
+URLs are known as _shared links_.
 
 Use `getSharedLinks` to find all the shared links that are available to
 the current user. You can supply a number of `options` to refine the
 search; see the
 [Alfresco JS API](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/SharedlinksApi.md#findsharedlinks)
 for more information.
-
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
-
-<!-- seealso end -->
\ No newline at end of file
diff --git a/docs/sidebar-action-menu.component.md b/docs/sidebar-action-menu.component.md
new file mode 100644
index 0000000000..d4bb2cb2a4
--- /dev/null
+++ b/docs/sidebar-action-menu.component.md
@@ -0,0 +1,38 @@
+# Sidebar action menu component
+
+Displays a sidebar-action menu information panel.
+
+![Sidebar action menu button screenshot](docassets/images/sidebar-action-menu-button.png)
+![Sidebar action menu icon screenshot](docassets/images/sidebar-action-menu-icon.png)
+
+## Basic usage
+
+```html
+<adf-sidebar-action-menu>
+    <mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon>
+    <div sidebar-menu-expand-icon>
+        <mat-icon>queue</mat-icon>
+    </div>
+    <div sidebar-menu-options>
+        <button mat-menu-item>
+            <mat-icon>assignment</mat-icon>
+            <span>Button Name</span>
+        </button>
+    </div>
+</adf-sidebar-action-menu>
+```
+
+### Properties
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| title | string | null | The title of the Sidebar action |
+| expanded | boolean | false | Toggle the sidebar action menu on expand.
+## Details
+
+As the name suggests, this is basically just a layout with CSS styling. There are three regions where you can add your own content, as shown in the example:
+
+- sidebar-menu-title-icon
+- sidebar-menu-options
+- sidebar-menu-expand-icon
+
diff --git a/docs/site.model.md b/docs/site.model.md
index 48b78e2163..4e826d1566 100644
--- a/docs/site.model.md
+++ b/docs/site.model.md
@@ -40,9 +40,6 @@ class SiteMembersModel {
 }
 ```
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Sites api service](sites.service.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [Sites service](sites.service.md)
diff --git a/docs/sites-dropdown.component.md b/docs/sites-dropdown.component.md
index b82bb12d9e..4011eacacf 100644
--- a/docs/sites-dropdown.component.md
+++ b/docs/sites-dropdown.component.md
@@ -17,7 +17,7 @@ Displays a dropdown menu to show and interact with the sites of the current user
 | Attribute | Type | Default | Description |
 | --- | --- | --- | --- |
 | hideMyFiles | boolean | false | Hide the "My Files" option added to the list by default |
-| siteList | any[] | 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. |
+| 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|
 
 ### Events
diff --git a/docs/sites-api.service.md b/docs/sites.service.md
similarity index 89%
rename from docs/sites-api.service.md
rename to docs/sites.service.md
index 3b45e94842..38b8b8abc4 100644
--- a/docs/sites-api.service.md
+++ b/docs/sites.service.md
@@ -40,12 +40,6 @@ and
 [getSite](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/SitesApi.md#getSite)
 for more information about the available options.
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Site model](site.model.md)
-<!-- seealso end -->
-
-
-
+-   [Site model](site.model.md)
diff --git a/docs/start-form.component.md b/docs/start-form.component.md
index f9a16dcbad..a8d1d18f53 100644
--- a/docs/start-form.component.md
+++ b/docs/start-form.component.md
@@ -16,7 +16,7 @@ Displays the Start Form for a process.
 ### Properties
 
 | Name | Type | Default | Description |
-| --- | --- | --- | --- |
+| ---- | ---- | ------- | ----------- |
 | processDefinitionId | string |  | Definition ID of the process to start. |
 | processId | string |  | Process ID of the process to start. |
 | showOutcomeButtons | boolean | true | Should form outcome buttons be shown? |
@@ -26,7 +26,7 @@ Displays the Start Form for a process.
 ### Events
 
 | Name | Description |
-| --- | --- |
+| ---- | ----------- |
 | outcomeClick | Emitted when the user clicks one of the outcome buttons that completes the form. |
 
 ## Details
@@ -40,7 +40,6 @@ The `outcomeClick` event is passed a string containing the ID of the outcome but
 the user clicked. You can pass this value to the `startProcess` method (defined in the
 [Process service](process.service.md)) when activating the process, if necessary.
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
+## See also
 
-<!-- seealso end -->
\ No newline at end of file
+-   [Process service](process.service.md)
diff --git a/docs/start-process.component.md b/docs/start-process.component.md
index 806d4db9c4..334fd6246d 100644
--- a/docs/start-process.component.md
+++ b/docs/start-process.component.md
@@ -1,6 +1,6 @@
 # Start Process component
 
-Displays Start Process, allowing the user to specify some basic details needed to start a new process instance.
+Starts a process.
 
 ![adf-start-process ](docassets/images/startProcess.png)
 
@@ -8,21 +8,116 @@ Displays Start Process, allowing the user to specify some basic details needed t
 
 ```html
 <adf-start-process 
-    appId="YOUR_APP_ID" >
+   [appId]="YOUR_APP_ID">
 </adf-start-process>
 ```
 
 ### Properties
 
-| Name | Description |
-| --- | --- |
-| appId |  (required): Limit the list of processes which can be started to those contained in the specified app |
-| variables | Variables in input to the process [RestVariable](https://github.com/Alfresco/alfresco-js-api/tree/master/src/alfresco-activiti-rest-api/docs/RestVariable.md)|
+| Name | Type | Description |
+| ---- | -- | ----------- |
+| appId | `number` | (optional): Limit the list of processes which can be started to those contained in the specified app |
+| name | `string` | (optional) name to assign to the current process |
+| processDefinitionName | `string` | (optional) definition name of the process to start |
+| variables | `ProcessInstanceVariable[]` |Variables in input to the process [RestVariable](https://github.com/Alfresco/alfresco-js-api/tree/master/src/alfresco-activiti-rest-api/docs/RestVariable.md) |
+| values | `FormValues` | Parameter to pass form field values in the start form if is associated |
+| showSelectProcessDropdown  | `boolean` | hide or show the process selection drodown, true by default |
 
 ### Events
 
-| Name | Description |
-| --- | --- |
-| start | Raised when the process start |
-| cancel | Raised when the process canceled |
-| error | Raised when the start process fail |
+| Name | Type | Description |
+| ---- | -- | --------- |
+| start | `EventEmitter<ProcessInstance>` | Emitted when the process starts |
+| cancel | `EventEmitter<ProcessInstance>` |  Emitted when the process is canceled |
+| error | `EventEmitter<ProcessInstance>` |  Emitted when the start process operation fails |
+
+### Start a process with a default name and pre-selected process definition name
+
+```html
+ <adf-start-process 
+      [appId]="YOUR_APP_ID"
+      [name]="PROCESS_NAME"
+      [processDefinitionName]="PROCESS_DEFINITION_NAME">
+ </adf-start-process>		 
+```
+
+If your app has more than one process definition, with the property processDefinitionName you can select as dropdown default value your PROCESS_DEFINITION_NAME. The name will be the PROCESS_NAME.
+
+### Start a process not included in an app
+
+```html
+ <adf-start-process 
+      [processDefinitionName]="PROCESS_DEFINITION_NAME">
+ </adf-start-process>		 
+```
+
+With the property processDefinitionName you can select as dropdown default value your PROCESS_DEFINITION_NAME. 
+
+
+### Custom data example
+
+Here is an example of how to pass in form field values to initialize the start form that has been
+defined for the process:
+
+```ts
+const formValues: FormValues  = {
+    'test_1': 'value_1',
+    'test_2': 'value_2',
+    'test_3': 'value_1',
+    'test_4': 'dropdown_id',
+    'test_5': 'dropdown_label',
+    'dropdown': {'id': 'dropdown_id', 'name': 'dropdown_label'}
+};
+```
+
+```html
+<adf-start-process 
+    [values]="formValues"
+    [appId]="YOUR_APP_ID" >
+</adf-start-process>
+```
+
+### Attaching a File to the start form of the process
+
+After the repository is created in APS, you can it in the Alfresco Repositories list.
+If the ID is set to 1 then all default values are fine. 
+However, if it is set to something else, for example, _1002_ and the name is _alfresco_, you must set the property `alfrescoRepositoryName` in your `app.config.json` file to  _alfresco-1002_:
+
+```json
+        {
+            name: 'Alfresco ADF Application'
+        },
+        ecmHost: 'http://{hostname}{:port}/ecm',
+        bpmHost: 'http://{hostname}{:port}/bpm',
+        logLevel: 'silent',
+        alfrescoRepositoryName : 'alfresco-1002'
+```
+
+You then need to pass the node as the input `values` object with the other properties:
+
+```ts
+let node: MinimalNodeEntryEntity = this.nodesApiService.getNode(NODE_ID);
+
+const formValues: FormValues  = {
+    'file' : node
+    'field_one': 'example text'
+};
+```
+
+Note that in the object above, the key `file` is the name of the attach file field in the start form of the process. The value of the `file` property must be a
+[MinimalNodeEntryEntity](document-library.model.md):
+
+```html
+<adf-start-process 
+    [values]="formValues"
+    [appId]="YOUR_APP_ID" >
+</adf-start-process>
+```
+
+The result will be the start form prefilled with the file data:
+
+![Start process load file](docassets/images/start_process.png)
+
+## See also
+
+-   [Select Apps Dialog component](select-apps-dialog.component.md)
diff --git a/docs/storage.service.md b/docs/storage.service.md
index 04c14e13d4..ce3cbe3ed2 100644
--- a/docs/storage.service.md
+++ b/docs/storage.service.md
@@ -32,10 +32,7 @@ more widely supported by browsers and can be set to expire after a certain date.
 If local storage is not available then non-persistent memory storage within the app is
 used instead.
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Cookie service](cookie.service.md)
-- [Content service](content.service.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [Cookie service](cookie.service.md)
+-   [Content service](content.service.md)
diff --git a/docs/summary.json b/docs/summary.json
index ba164f88fd..a1683909c0 100644
--- a/docs/summary.json
+++ b/docs/summary.json
@@ -3,5 +3,5 @@
     { "title": "Angular Material Design", "file": "angular-material-design.md" },
     { "title": "Theming", "file": "theming.md" },
     { "title": "Typography", "file": "typography.md" },
-    { "title": "Walkthrough: adding indicators to highlight information about a node", "file": "metadata-indicators.md" }
+    { "title": "Walkthrough - adding indicators to highlight information about a node", "file": "metadata-indicators.md" }
 ]
diff --git a/docs/tag-actions.component.md b/docs/tag-actions.component.md
index 1be68f1399..ad6974f559 100644
--- a/docs/tag-actions.component.md
+++ b/docs/tag-actions.component.md
@@ -1,4 +1,6 @@
-# Alfresco Tag Node Actions List component
+# Tag Node Actions List component
+
+Shows available actions for tags.
 
 ![Custom columns](docassets/images/tag3.png)
 
@@ -8,10 +10,10 @@
 <adf-tag-node-actions-list 
     [nodeId]="nodeId">
 </adf-tag-node-actions-list>
-```  
+```
 
 ### Properties
 
 | Attribute | Type | Default | Description |
-| --- | --- | --- | --- |
-| nodeId | string | | The identifier of a node |
\ No newline at end of file
+| --------- | ---- | ------- | ----------- |
+| nodeId | string |  | The identifier of a node |
diff --git a/docs/tag-list.component.md b/docs/tag-list.component.md
index 46214d914f..5fb700cdc5 100644
--- a/docs/tag-list.component.md
+++ b/docs/tag-list.component.md
@@ -1,3 +1,9 @@
-# Alfresco Tag List component
+# Tag List component
 
-![Custom columns](docassets/images/tag2.png)
\ No newline at end of file
+Shows tags for an item.
+
+![Custom columns](docassets/images/tag2.png)
+
+## See Also
+
+-   [Tag service](tag.service.md)
diff --git a/docs/tag-node-list.component.md b/docs/tag-node-list.component.md
index 25ec81dba5..30e4dd4dea 100644
--- a/docs/tag-node-list.component.md
+++ b/docs/tag-node-list.component.md
@@ -1,4 +1,6 @@
-# Alfresco Tag Node List component
+# Tag Node List component
+
+Shows tags for a node.
 
 ![Custom columns](docassets/images/tag1.png)
 
@@ -8,10 +10,10 @@
 <adf-tag-node-list 
     [nodeId]="nodeId">
 </adf-tag-node-list>
-``` 
+```
 
 ### Properties
 
 | Attribute | Type | Default | Description |
-| --- | --- | --- | --- |
-| nodeId | string | | The identifier of a node |
+| --------- | ---- | ------- | ----------- |
+| nodeId | string |  | The identifier of a node |
diff --git a/docs/tag.service.md b/docs/tag.service.md
index e669188604..5c4478eda7 100644
--- a/docs/tag.service.md
+++ b/docs/tag.service.md
@@ -35,12 +35,6 @@ in the Alfresco JS API for more information about the types returned by Tag
 service methods and for the implementation of the REST API the service is
 based on.
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Tag list component](tag-list.component.md)
-<!-- seealso end -->
-
-
-
+-   [Tag list component](tag-list.component.md)
diff --git a/docs/task-details.model.md b/docs/task-details.model.md
index 9e3928a6e1..99f5addb01 100644
--- a/docs/task-details.model.md
+++ b/docs/task-details.model.md
@@ -1,4 +1,8 @@
-# TaskDetailsModel
+# Task Details model
+
+Information about a task.
+
+## Details
 
 ```json
 { 
@@ -9,3 +13,7 @@
     "description": "string"
 }
 ```
+
+## See Also
+
+-   [Task header component](task-header.component.md)
diff --git a/docs/task-filters.component.md b/docs/task-filters.component.md
index 6cc6d1b296..a548d59c78 100644
--- a/docs/task-filters.component.md
+++ b/docs/task-filters.component.md
@@ -1,4 +1,4 @@
-# Activiti Filter component
+# Task Filters component
 
 Shows all available filters.
 
@@ -11,7 +11,7 @@ Shows all available filters.
 ### Properties
 
 | Name | Type | Description |
-| --- | --- | --- |
+| ---- | ---- | ----------- |
 | filterParam | [FilterParamsModel](#filterparamsmodel) | The params to filter the task filter. If there is no match the default one (first filter of the list) is selected |
 | appId | string | Display filters available to the current user for the application with the specified ID. |
 | `appName` | string | Display filters available to the current user for the application with the specified name. |
@@ -22,20 +22,19 @@ If both `appId` and `appName` are specified then `appName` will take precedence
 ### Events
 
 | Name | Description |
-| --- | --- |
-| filterClick | Raised when the filter in the list is clicked  |
-| success | Raised when the list is loaded  |
-| error | Raised if there is an error during the loading  |
+| ---- | ----------- |
+| filterClick | Raised when the filter in the list is clicked |
+| success | Raised when the list is loaded |
+| error | Raised if there is an error during the loading |
 
 ## Details
 
 ### How filter the activiti task filters
 
- ```html
+```html
 <adf-filters 
-    [filterParam]="{name:'My tasks'}">
+   [filterParam]="{name:'My tasks'}">
 </adf-filters>
-
 ```
 
 You can use inside the filterParam one of the properties from [FilterParamsModel](#filterparamsmodel) (see below).
@@ -51,7 +50,7 @@ You can use inside the filterParam one of the properties from [FilterParamsModel
 ```
 
 | Name | Type | Description |
-| --- | --- | --- |
+| ---- | ---- | ----------- |
 | id | string | The id of the task filter |
 | name | string | The name of the task filter, lowercase is checked |
 | index | string | The zero-based position of the filter in the array. |
@@ -61,9 +60,6 @@ You can use inside the filterParam one of the properties from [FilterParamsModel
 The task filter often works well as an item in an accordion menu. See the [Accordion component](accordion.component.md)
 page for an example of how to do set this up.
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Filter model](filter.model.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [Filter model](filter.model.md)
diff --git a/docs/task-header.component.md b/docs/task-header.component.md
index cb0c0c3130..c85607fc73 100644
--- a/docs/task-header.component.md
+++ b/docs/task-header.component.md
@@ -1,4 +1,4 @@
-# Activiti Task Header component
+# Task Header component
 
 Shows all the information related to a task.
 
@@ -15,17 +15,21 @@ Shows all the information related to a task.
 ### Properties
 
 | Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| taskDetails | [TaskDetailsModel](#taskdetailsmodel) | | (**required**) The task details related to the task. |
-| formName | string | | The name of the form. |
+| ---- | ---- | ------- | ----------- |
+| taskDetails | [TaskDetailsModel](task-details.model.md) |  | (**required**) Details related to the task. |
+| formName | string |  | The name of the form. |
 
 ### Events
 
 | Name | Description |
-| --- | --- |
+| ---- | ----------- |
 | claim | Raised when the task is claimed. |
 | unclaim | Raised when the task is unclaimed (requeued). |
 
 ## Details
 
 The purpose of the component is to populate the local variable called `properties` (array of CardViewModel), with all the information that we want to display.
+
+## See also
+
+-   [Task Details model](task-details.model.md)
diff --git a/docs/task-list.component.md b/docs/task-list.component.md
index 152335dba4..368c2ec4f7 100644
--- a/docs/task-list.component.md
+++ b/docs/task-list.component.md
@@ -1,4 +1,4 @@
-# Activiti Task List component
+# Task List component
 
 Renders a list containing all the tasks matched by the parameters specified.
 
@@ -12,6 +12,39 @@ Renders a list containing all the tasks matched by the parameters specified.
 </adf-tasklist>
 ```
 
+You can pass schema as data adapter for the tasklist like shown below :
+
+```ts
+let data = new ObjectDataTableAdapter(
+    // Row data
+    [
+        { id: 1, name: 'Name 1' },
+        { id: 2, name: 'Name 2' }
+    ],
+    // Column schema
+    [
+        { 
+            type: 'text', 
+            key: 'id', 
+            title: 'Id', 
+            sortable: true 
+        },
+        {
+            type: 'text', 
+            key: 'name', 
+            title: 'Name', 
+            sortable: true
+        }
+    ]
+);
+```
+
+```html
+<adf-tasklist
+    [data]="'data'">
+</adf-tasklist>
+```
+
 You can also use HTML-based schema declaration like shown below:
 
 ```html
@@ -23,9 +56,9 @@ You can also use HTML-based schema declaration like shown below:
 </adf-tasklist>
 ```
 
-You can also use custom schema declaration as shown below:
+You can also use static custom schema declaration as shown below:
 
-define custom schema in the app.config.json as shown below json format.
+define static custom schema in the app.config.json as shown below json format.
 
 ```json
 "adf-task-list": {
@@ -47,38 +80,77 @@ define custom schema in the app.config.json as shown below json format.
         }
 }
 ```
+
 ```html
 <adf-tasklist 
     [appId]="'1'" 
     [presetColumn]="'customSchema'">
 </adf-tasklist>
 ```
+
+You can also use both HTML-based and app.config.json custom schema declaration at same time like shown below:
+
+```json
+"adf-task-list": {
+        "presets": {
+            "customSchema": [
+            {
+                    "key": "id",
+                    "type": "text",
+                    "title": "Id",
+                    "sortable": true         
+            }],
+            "default": [
+                {
+                    "key": "name",
+                    "type": "text",
+                    "title": "name",
+                    "sortable": true
+            }],
+        }
+}
+```
+
+```html
+<adf-tasklist
+    [appId]="'1'" 
+    [presetColumn]="'customSchema'">
+    <data-columns>
+        <data-column key="assignee" title="Assignee" class="full-width name-column">
+            <ng-template let-entry="$implicit">
+                    <div>{{getFullName(entry.row.obj.assignee)}}</div>
+            </ng-template>
+        </data-column>
+    </data-columns>
+</adf-tasklist>
+```
+
 ### Properties
 
 | Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| appId | string || The id of the app. |
-| processDefinitionKey | string || The processDefinitionKey of the process. |
-| processInstanceId | string || The processInstanceId of the process. |
-| presetColumn | string || The presetColumn of the custom schema to fetch. |
+| ---- | ---- | ------- | ----------- |
+| appId | string |  | The id of the app. |
+| processDefinitionKey | string |  | The processDefinitionKey of the process. |
+| processInstanceId | string |  | The processInstanceId of the process. |
+| presetColumn | string |  | The presetColumn of the custom schema to fetch. |
 | page | number | 0 | The page of the tasks to fetch. |
 | size | number | 5 | The number of tasks to fetch. |
-| assignment | string || The assignment of the process. <ul>Possible values are: <li>assignee : where the current user is the assignee</li> <li>candidate: where the current user is a task candidate </li><li>group_x: where the task is assigned to a group where the current user is a member of.</li> <li>no value: where the current user is involved</li> </ul> |
-| selectionMode | string | 'single' | Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows.  | 
-| multiselect | boolean | false | Toggles multiple row selection, renders checkboxes at the beginning of each row | 
-| state | string || Define state of the processes. Possible values are: `completed`, `active` |
+| assignment | string |  | The assignment of the process. <ul>Possible values are: <li>assignee : where the current user is the assignee</li> <li>candidate: where the current user is a task candidate </li><li>group_x: where the task is assigned to a group where the current user is a member of.</li> <li>no value: where the current user is involved</li> </ul> |
+| selectionMode | string | 'single' | Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows. |
+| multiselect | boolean | false | Toggles multiple row selection, renders checkboxes at the beginning of each row |
+| state | string |  | Define state of the processes. Possible values are: `completed`, `active` |
 | hasIcon | boolean | true | Toggle the icon on the left . |
-| landingTaskId | string | | Define which task id should be selected after the reloading. If the task id doesn't exist or nothing is passed it will select the first task |
-| sort | string | | Define the sort of the processes. Possible values are : `created-desc`, `created-asc`, `due-desc`, `due-asc` |
-| data | [DataTableAdapter](DataTableAdapter.md) | | JSON object that represent the number and the type of the columns that you want show (see the [example](#datatableadapter-example) section below) |
+| landingTaskId | string |  | Define which task id should be selected after the reloading. If the task id doesn't exist or nothing is passed it will select the first task |
+| sort | string |  | Define the sort of the processes. Possible values are : `created-desc`, `created-asc`, `due-desc`, `due-asc` |
+| data | [DataTableAdapter](DataTableAdapter.md) |  | JSON object that represent the number and the type of the columns that you want show (see the [example](#datatableadapter-example) section below) |
 
 ### Events
 
 | Name | Description |
-| --- | --- |
+| ---- | ----------- |
 | success | Raised when the task list is loaded |
 | rowClick | Raised when the task in the list is clicked |
-| rowsSelected | Raised when the a row is selected/unselected | 
+| rowsSelected | Raised when the a row is selected/unselected |
 
 ## Details
 
@@ -104,10 +176,7 @@ typical tasklist.
 
 You can customize the styling of a column and also add features like tooltips and automatic translation of column titles. See the [DataColumn](data-column.component.md) page for more information about these features.
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Data column component](data-column.component.md)
-- [DataTableAdapter](DataTableAdapter.md)
-<!-- seealso end -->
+-   [Data column component](data-column.component.md)
+-   [DataTableAdapter](DataTableAdapter.md)
diff --git a/docs/tasklist.service.md b/docs/tasklist.service.md
index b6c79f20d0..1e5f8035ed 100644
--- a/docs/tasklist.service.md
+++ b/docs/tasklist.service.md
@@ -17,6 +17,7 @@ export class SomePageComponent implements OnInit {
 ## Methods
 
 #### getTaskDetails(taskId: string): Observable`<TaskDetailsModel>`
+
 Get Task Instance metadata for passed in Task Instance ID:
 
 ```ts
@@ -31,41 +32,40 @@ this.tasklistService.getTaskDetails(taskInstanceId).subscribe( (taskInstance: Ta
 The `taskInstanceId` refers to a Task Instance identifier in APS.  
 The returned `taskInstance` object is of type `TaskDetailsModel` and looks like in this sample:
 
-```
-adhocTaskCanBeReassigned: false
-assignee: UserProcessModel {pictureId: null, id: 1, email: "admin@app.activiti.com", firstName: null, lastName: "Administrator"}
-category: null
-created: Wed Oct 11 2017 09:07:14 GMT+0100 (BST) {}
-description: null
-dueDate: null
-duration: null
-endDate: null
-executionId: "11337"
-formKey: "9"
-id: "15303"
-initiatorCanCompleteTask: false
-involvedPeople: []
-managerOfCandidateGroup: false
-memberOfCandidateGroup: false
-memberOfCandidateUsers: false
-name: "Clarify Invoice - Invoice-20302.pdf"
-parentTaskId: null
-parentTaskName: null
-priority: 50
-processDefinitionCategory: "http://www.activiti.org/processdef"
-processDefinitionDeploymentId: "18"
-processDefinitionDescription: "This is a simple invoice approval process that allows a person to assign a dedicated approver for the the invoice. It will then be routed to the Accounting department for payment preparation. Once payment is prepared the invoice will be stored in a specific folder and an email notification will be sent."
-processDefinitionId: "InvoiceApprovalProcess:2:21"
-processDefinitionKey: "InvoiceApprovalProcess"
-processDefinitionName: "Invoice Approval Process"
-processDefinitionVersion: 2
-processInstanceId: "11337"
-processInstanceName: null
-processInstanceStartUserId: "1"
-taskDefinitionKey: "clarifyInvoice"
-```
+    adhocTaskCanBeReassigned: false
+    assignee: UserProcessModel {pictureId: null, id: 1, email: "admin@app.activiti.com", firstName: null, lastName: "Administrator"}
+    category: null
+    created: Wed Oct 11 2017 09:07:14 GMT+0100 (BST) {}
+    description: null
+    dueDate: null
+    duration: null
+    endDate: null
+    executionId: "11337"
+    formKey: "9"
+    id: "15303"
+    initiatorCanCompleteTask: false
+    involvedPeople: []
+    managerOfCandidateGroup: false
+    memberOfCandidateGroup: false
+    memberOfCandidateUsers: false
+    name: "Clarify Invoice - Invoice-20302.pdf"
+    parentTaskId: null
+    parentTaskName: null
+    priority: 50
+    processDefinitionCategory: "http://www.activiti.org/processdef"
+    processDefinitionDeploymentId: "18"
+    processDefinitionDescription: "This is a simple invoice approval process that allows a person to assign a dedicated approver for the the invoice. It will then be routed to the Accounting department for payment preparation. Once payment is prepared the invoice will be stored in a specific folder and an email notification will be sent."
+    processDefinitionId: "InvoiceApprovalProcess:2:21"
+    processDefinitionKey: "InvoiceApprovalProcess"
+    processDefinitionName: "Invoice Approval Process"
+    processDefinitionVersion: 2
+    processInstanceId: "11337"
+    processInstanceName: null
+    processInstanceStartUserId: "1"
+    taskDefinitionKey: "clarifyInvoice"
 
 #### getTaskChecklist(id: string): Observable`<TaskDetailsModel[]>`
+
 Get all the sub-task instances for a Task Instance, also called the check list: 
 
 ```ts
@@ -79,48 +79,47 @@ this.tasklistService.getTaskChecklist(parentTaskId).subscribe( (subTasks: TaskDe
 
 The response is an array of `TaskDetailsModel` representing the sub-tasks:
 
-```
-Sub Tasks: 
-    0:
-        adhocTaskCanBeReassigned: false
-        assignee: UserProcessModel {pictureId: null, id: 1, email: "admin@app.activiti.com", firstName: null, lastName: "Administrator"}
-        category: "2"
-        created: "2017-10-29T07:29:28.881+0000"
-        description: null
-        dueDate: null
-        duration: null
-        endDate: null
-        executionId: null
-        formKey: null
-        id: "74745"
-        initiatorCanCompleteTask: false
-        involvedPeople: undefined
-        managerOfCandidateGroup: false
-        memberOfCandidateGroup: false
-        memberOfCandidateUsers: false
-        name: "Double check invoice amount"
-        parentTaskId: "15303"
-        parentTaskName: "Clarify Invoice - Invoice-10292.pdf"
-        priority: 50
-        processDefinitionCategory: null
-        processDefinitionDeploymentId: null
-        processDefinitionDescription: null
-        processDefinitionId: null
-        processDefinitionKey: null
-        processDefinitionName: null
-        processDefinitionVersion: 0
-        processInstanceId: null
-        processInstanceName: null
-        processInstanceStartUserId: null
-        taskDefinitionKey: null
-    1 :
-        {processDefinitionVersion: 0, id: "74746", name: "Verify with the person that did the purchase", priority: 50, assignee: UserProcessModel, …}
-```
+    Sub Tasks: 
+        0:
+            adhocTaskCanBeReassigned: false
+            assignee: UserProcessModel {pictureId: null, id: 1, email: "admin@app.activiti.com", firstName: null, lastName: "Administrator"}
+            category: "2"
+            created: "2017-10-29T07:29:28.881+0000"
+            description: null
+            dueDate: null
+            duration: null
+            endDate: null
+            executionId: null
+            formKey: null
+            id: "74745"
+            initiatorCanCompleteTask: false
+            involvedPeople: undefined
+            managerOfCandidateGroup: false
+            memberOfCandidateGroup: false
+            memberOfCandidateUsers: false
+            name: "Double check invoice amount"
+            parentTaskId: "15303"
+            parentTaskName: "Clarify Invoice - Invoice-10292.pdf"
+            priority: 50
+            processDefinitionCategory: null
+            processDefinitionDeploymentId: null
+            processDefinitionDescription: null
+            processDefinitionId: null
+            processDefinitionKey: null
+            processDefinitionName: null
+            processDefinitionVersion: 0
+            processInstanceId: null
+            processInstanceName: null
+            processInstanceStartUserId: null
+            taskDefinitionKey: null
+        1 :
+            {processDefinitionVersion: 0, id: "74746", name: "Verify with the person that did the purchase", priority: 50, assignee: UserProcessModel, …}
 
 Looking at the `TaskDetailsModel` for a sub-task we can see that it has a parent task ID that matches what we specified
 when calling this method.
 
 #### getTasks(requestNode: TaskQueryRequestRepresentationModel): Observable`<TaskListModel>`
+
 Get tasks matching passed in query definition:
 
 ```ts
@@ -161,22 +160,21 @@ pooled tasks (i.e. tasks that needs to be claimed by a user), then use `candidat
 A `TaskListModel` object is returned for a successful query and the `data` property is an array of
 `TaskDetailsModel`:
 
-```
-data:
-    0: {id: "75010", name: "Approve Invoice  - Invoice-10202.pdf", description: null, category: null, assignee: {…}, …}
-    1: {id: "74746", name: "Verify with the person that did the purchase", description: null, category: "2", assignee: {…}, …}
-    2: {id: "74745", name: "Double check invoice amount", description: null, category: "2", assignee: {…}, …}
-    3: {id: "20686", name: "Sample checklist task 1", description: null, category: "2", assignee: {…}, …}
-    4: {id: "15303", name: "Clarify Invoice - Invoice-20302.pdf", description: null, category: null, assignee: {…}, …}
-length: 5
-size: 5
-start: 0
-total: 10
-```
+    data:
+        0: {id: "75010", name: "Approve Invoice  - Invoice-10202.pdf", description: null, category: null, assignee: {…}, …}
+        1: {id: "74746", name: "Verify with the person that did the purchase", description: null, category: "2", assignee: {…}, …}
+        2: {id: "74745", name: "Double check invoice amount", description: null, category: "2", assignee: {…}, …}
+        3: {id: "20686", name: "Sample checklist task 1", description: null, category: "2", assignee: {…}, …}
+        4: {id: "15303", name: "Clarify Invoice - Invoice-20302.pdf", description: null, category: null, assignee: {…}, …}
+    length: 5
+    size: 5
+    start: 0
+    total: 10
 
 We can see that this query resulted in 10 tasks (see `total`), but only 5 were returned as we set `size` to `5`.
 
 #### getTotalTasks(requestNode: TaskQueryRequestRepresentationModel): Observable`<any>`
+
 Get total number of tasks matching passed in query definition:
 
 ```ts
@@ -202,16 +200,15 @@ this.tasklistService.getTotalTasks(taskQuery).subscribe( (response: any) => {
 This is pretty much the same type of query as the `getTasks` method, except that here we just 
 return how many Task Instances it matched in the `total` property:
 
-```
-data:[]
-size: 0
-start: 0
-total: 10
-```
+    data:[]
+    size: 0
+    start: 0
+    total: 10
 
 When you call this method it always sets the `size` property to `0`.
 
 #### findTasksByState(requestNode: TaskQueryRequestRepresentationModel, state?: string): Observable`<TaskListModel>`
+
 Find and return Task Instances by state `open` or `completed` and query model:
 
 ```ts
@@ -235,6 +232,7 @@ this.tasklistService.findTasksByState(taskQuery, taskState).subscribe( (taskList
   console.log('Error: ', error);
 });
 ```
+
 The number of tasks that are returned is controlled by the `size` property.
 
 This is a convenience method on top of the `getTasks` method. It overwrites the `requestNode.state` property 
@@ -242,6 +240,7 @@ with passed in `state` before making the call to `getTasks`.
 For an example of the response see the `getTasks` method.
 
 #### findAllTaskByState(requestNode: TaskQueryRequestRepresentationModel, state?: string): Observable`<TaskListModel>`
+
 Find and return all Task Instances by state `open` or `completed` and query model:
 
 ```ts
@@ -274,6 +273,7 @@ passed in `state` before making any other calls. Before making the `getTasks` ca
 **Note** that this can return a lot of data if you are not careful.
 
 #### findAllTasksWithoutState(requestNode: TaskQueryRequestRepresentationModel): Observable`<TaskListModel>`
+
 Find and return all Task Instances that matches query model, regardless of state:
 
 ```ts
@@ -305,6 +305,7 @@ Internally it basically calls `findTasksByState(requestNode, 'open')` and
 **Note** that this can return a lot of data if you are not careful.
 
 #### assignTaskByUserId(taskId: string, userId: number): Observable`<TaskDetailsModel>`
+
 Assign a Task Instance to a user via the User ID:
 
 ```ts
@@ -320,6 +321,7 @@ this.tasklistService.assignTaskByUserId(taskId, userId).subscribe( (taskInstance
 The user ID identifies a User in APS.
 
 #### assignTask(taskId: string, requestNode: any): Observable`<TaskDetailsModel>`
+
 Assign a task to a user via a user object with an `id` property, for example:
 
 ```ts
@@ -335,7 +337,8 @@ this.tasklistService.assignTask(taskId, user).subscribe( (taskInstance: TaskDeta
 This method does the same as the `assignTaskByUserId` method, the only difference is that this
 method can be used when you have an object where the User ID is contained in an `id` property.
 
-#### claimTask(taskId: string): Observable`<TaskDetailsModel>` 
+#### claimTask(taskId: string): Observable`<TaskDetailsModel>`
+
 Claim a pooled task (i.e. candidate task) as current user so it can be worked on and later on completed: 
 
 ```ts
@@ -348,10 +351,11 @@ this.tasklistService.claimTask(taskId).subscribe( (taskInstance: TaskDetailsMode
 ```
 
 The response will be `null` if the task was claimed successfully.
- 
+
 The task assignment changes from `candidate` to `assignee`.
 
-#### unclaimTask(taskId: string): Observable`<TaskDetailsModel>` 
+#### unclaimTask(taskId: string): Observable`<TaskDetailsModel>`
+
 Return a claimed task to the pool (i.e. make it a candidate task): 
 
 ```ts
@@ -362,10 +366,11 @@ this.tasklistService.unclaimTask(taskId).subscribe( (taskInstance: TaskDetailsMo
   console.log('Error: ', error);
 });
 ```
- 
+
 The task assignment changes from `assignee` to `candidate`.
 
-#### completeTask(taskId: string) 
+#### completeTask(taskId: string)
+
 Complete a Task Instance as current user and progress Process Instance:
 
 ```ts
@@ -377,9 +382,10 @@ This only works if the Task Instance has only one Outcome (i.e. the default `Com
 If the Task Instance has multiple Outcomes, such as Approve and Reject, then this method does not
 work, and the Task Instance has to be completed via its associated form. Otherwise you will see an error such as:
 
-*ERROR Error: Uncaught (in promise): Error: {"message":"Task must be completed using it's form","messageKey":"GENERAL.ERROR.BAD-REQUEST"}*
+_ERROR Error: Uncaught (in promise): Error: {"message":"Task must be completed using it's form","messageKey":"GENERAL.ERROR.BAD-REQUEST"}_
+
+#### updateTask(taskId: any, updated): Observable`<TaskDetailsModel>`
 
-#### updateTask(taskId: any, updated): Observable`<TaskDetailsModel>` 
 Update name, description, and due date for a Task Instance:
 
 ```ts
@@ -395,43 +401,43 @@ this.tasklistService.updateTask(taskId, updateData).subscribe( (updatedTaskDetai
   console.log('Error: ', error);
 });
 ```
+
 The response is all info about the updated Task Instance, in this example a stand-alone task was updated so there
 is no associated process:
 
-```
-adhocTaskCanBeReassigned: false
-assignee: undefined
-category: null
-created: Mon Nov 13 2017 16:34:49 GMT+0000 (GMT) {}
-description: "Updated description"
-dueDate: Sat Feb 10 2018 11:00:00 GMT+0000 (GMT) {}
-duration: NaN
-endDate: null
-executionId: null
-formKey: "5005"
-id: "80002"
-initiatorCanCompleteTask: false
-managerOfCandidateGroup: false
-memberOfCandidateGroup: false
-memberOfCandidateUsers: false
-name: "Updated name"
-parentTaskId: null
-parentTaskName: null
-priority: 50
-processDefinitionCategory: null
-processDefinitionDeploymentId: null
-processDefinitionDescription: null
-processDefinitionId: null
-processDefinitionKey: null
-processDefinitionName: null
-processDefinitionVersion: 0
-processInstanceId: null
-processInstanceName: null
-processInstanceStartUserId: null
-taskDefinitionKey: null
-``` 
+    adhocTaskCanBeReassigned: false
+    assignee: undefined
+    category: null
+    created: Mon Nov 13 2017 16:34:49 GMT+0000 (GMT) {}
+    description: "Updated description"
+    dueDate: Sat Feb 10 2018 11:00:00 GMT+0000 (GMT) {}
+    duration: NaN
+    endDate: null
+    executionId: null
+    formKey: "5005"
+    id: "80002"
+    initiatorCanCompleteTask: false
+    managerOfCandidateGroup: false
+    memberOfCandidateGroup: false
+    memberOfCandidateUsers: false
+    name: "Updated name"
+    parentTaskId: null
+    parentTaskName: null
+    priority: 50
+    processDefinitionCategory: null
+    processDefinitionDeploymentId: null
+    processDefinitionDescription: null
+    processDefinitionId: null
+    processDefinitionKey: null
+    processDefinitionName: null
+    processDefinitionVersion: 0
+    processInstanceId: null
+    processInstanceName: null
+    processInstanceStartUserId: null
+    taskDefinitionKey: null
 
 #### createNewTask(task: TaskDetailsModel): Observable`<TaskDetailsModel>`
+
 Create a new stand-alone Task Instance that is not associated with a Process Instance:
 
 ```ts
@@ -452,45 +458,44 @@ and that is not assigned to a user (i.e. `assignee: null`).
 
 The response looks like this, we can see that an ID was generated for the Task Instance:
 
-```
-Created task details:  
-    adhocTaskCanBeReassigned: false
-    assignee: null
-    category: null
-    created: Mon Nov 13 2017 16:34:49 GMT+0000 (GMT) {}
-    description: "A new stand-alone task"
-    dueDate: null
-    duration: null
-    endDate: null
-    executionId: null
-    formKey: null
-    id: "80002"
-    initiatorCanCompleteTask: false
-    involvedPeople: undefined
-    managerOfCandidateGroup: false
-    memberOfCandidateGroup: false
-    memberOfCandidateUsers: false
-    name: "Some Task"
-    parentTaskId: null
-    parentTaskName: null
-    priority: 50
-    processDefinitionCategory: null
-    processDefinitionDeploymentId: null
-    processDefinitionDescription: null
-    processDefinitionId: null
-    processDefinitionKey: null
-    processDefinitionName: null
-    processDefinitionVersion: 0
-    processInstanceId: null
-    processInstanceName: null
-    processInstanceStartUserId: null
-    taskDefinitionKey: null
-```
+    Created task details:  
+        adhocTaskCanBeReassigned: false
+        assignee: null
+        category: null
+        created: Mon Nov 13 2017 16:34:49 GMT+0000 (GMT) {}
+        description: "A new stand-alone task"
+        dueDate: null
+        duration: null
+        endDate: null
+        executionId: null
+        formKey: null
+        id: "80002"
+        initiatorCanCompleteTask: false
+        involvedPeople: undefined
+        managerOfCandidateGroup: false
+        memberOfCandidateGroup: false
+        memberOfCandidateUsers: false
+        name: "Some Task"
+        parentTaskId: null
+        parentTaskName: null
+        priority: 50
+        processDefinitionCategory: null
+        processDefinitionDeploymentId: null
+        processDefinitionDescription: null
+        processDefinitionId: null
+        processDefinitionKey: null
+        processDefinitionName: null
+        processDefinitionVersion: 0
+        processInstanceId: null
+        processInstanceName: null
+        processInstanceStartUserId: null
+        taskDefinitionKey: null
 
 See the `attachFormToATask` method for how to attach a form to the User Task. And see the `assignTaskByUserId` method
 for how to assign a user to the new Task Instance.
 
 #### attachFormToATask(taskId: string, formId: number): Observable`<any>`
+
 Attach a form to a User Task:
 
 ```ts
@@ -510,6 +515,7 @@ in APS when you work with it). See the `getFormList` method for how fetch a list
 The response will be `null` if form was attached successfully to task.  
 
 #### getFormList(): Observable`<Form []>`
+
 Get a list of the available reusable forms:
 
 ```ts
@@ -522,16 +528,14 @@ this.tasklistService.getFormList().subscribe( (formList: Form[]) => {
 
 A successful response looks like this:
 
-```
-Available forms:  
+    Available forms:  
 
-0:  
-    id: 5005
-    name: "Name Info"
-1: {name: "cm:folder", id: 3012}
-2: {name: "Alfresco Node Form", id: 3011}
-3: {name: "Employee", id: 3010}
-```
+    0:  
+        id: 5005
+        name: "Name Info"
+    1: {name: "cm:folder", id: 3012}
+    2: {name: "Alfresco Node Form", id: 3011}
+    3: {name: "Employee", id: 3010}
 
 The form id property can be used with the `attachFormToATask` method.
 
@@ -539,6 +543,7 @@ The form id property can be used with the `attachFormToATask` method.
 Only reusable forms are included.
 
 #### addTask(task: TaskDetailsModel): Observable`<TaskDetailsModel>`
+
 Add a Sub-Task (i.e. checklist task) to a parent Task Instance:
 
 ```ts
@@ -557,41 +562,40 @@ this.tasklistService.addTask(subTaskDetails).subscribe( (updatedTaskDetails: Tas
 The response includes the new sub-task id and also parent task name.
 In this example the parent task was just a stand-alone task, so no process information is included:
 
-```
-adhocTaskCanBeReassigned: false
-assignee: null
-category: null
-created: Tue Nov 14 2017 13:32:41 GMT+0000 (GMT) {}
-description: null
-dueDate: null
-duration: null
-endDate: null
-executionId: null
-formKey: null
-id: "80003"
-initiatorCanCompleteTask: false
-involvedPeople: undefined
-managerOfCandidateGroup: false
-memberOfCandidateGroup: false
-memberOfCandidateUsers: false
-name: "Check the invoice amount"
-parentTaskId: "80002"
-parentTaskName: "Some Task"
-priority: 50
-processDefinitionCategory: null
-processDefinitionDeploymentId: null
-processDefinitionDescription: null
-processDefinitionId: null
-processDefinitionKey: null
-processDefinitionName: null
-processDefinitionVersion: 0
-processInstanceId: null
-processInstanceName: null
-processInstanceStartUserId:null
-taskDefinitionKey: null
-```
+    adhocTaskCanBeReassigned: false
+    assignee: null
+    category: null
+    created: Tue Nov 14 2017 13:32:41 GMT+0000 (GMT) {}
+    description: null
+    dueDate: null
+    duration: null
+    endDate: null
+    executionId: null
+    formKey: null
+    id: "80003"
+    initiatorCanCompleteTask: false
+    involvedPeople: undefined
+    managerOfCandidateGroup: false
+    memberOfCandidateGroup: false
+    memberOfCandidateUsers: false
+    name: "Check the invoice amount"
+    parentTaskId: "80002"
+    parentTaskName: "Some Task"
+    priority: 50
+    processDefinitionCategory: null
+    processDefinitionDeploymentId: null
+    processDefinitionDescription: null
+    processDefinitionId: null
+    processDefinitionKey: null
+    processDefinitionName: null
+    processDefinitionVersion: 0
+    processInstanceId: null
+    processInstanceName: null
+    processInstanceStartUserId:null
+    taskDefinitionKey: null
 
 #### deleteTask(taskId: string): Observable`<TaskDetailsModel>`
+
 Delete a Sub-Task (i.e. checklist task):
 
 ```ts
@@ -606,6 +610,7 @@ this.tasklistService.deleteTask(taskId).subscribe( (taskDetails: TaskDetailsMode
 **Note**. you can only delete so called checklist tasks with this method. 
 
 #### fetchTaskAuditJsonById(taskId: string): Observable`<any>`
+
 Fetch Task Audit log as JSON for a Task Instance ID:
 
 ```ts
@@ -620,18 +625,17 @@ this.tasklistService.fetchTaskAuditJsonById(taskId)
 
 The response is JSON object with the Task Instance audit log:
 
-```
-{
-  taskId: "15368",
-  taskName: "Approve by someone in Accounting",
-  processInstanceId: "15361",
-  processDefinitionName: "Process With Pooled task",
-  processDefinitionVersion: 1,
-  …
-}
-```
+    {
+      taskId: "15368",
+      taskName: "Approve by someone in Accounting",
+      processInstanceId: "15361",
+      processDefinitionName: "Process With Pooled task",
+      processDefinitionVersion: 1,
+      …
+    }
 
 #### fetchTaskAuditPdfById(taskId: string): Observable`<Blob>`
+
 Fetch Task Audit log as JSON for a Task Instance ID:
 
 ```ts
@@ -644,8 +648,3 @@ this.tasklistService.fetchTaskAuditPdfById(taskId)
 ```
 
 The response is PDF with the Task Instance audit log.
-
-
-<!-- seealso start -->
-
-<!-- seealso end -->
\ No newline at end of file
diff --git a/docs/text-highlight.pipe.md b/docs/text-highlight.pipe.md
index 9c80cc0978..ca7fb50138 100644
--- a/docs/text-highlight.pipe.md
+++ b/docs/text-highlight.pipe.md
@@ -17,10 +17,7 @@ be highlighted with added HTML (see the
 [Highlight Transform service](highlight-transform.service.md) for more information about how
 this is implemented). The parameter can contain spaces, in which case each separate "word" in the string will be highlighted individually.
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Highlight directive](highlight.directive.md)
-- [Highlight transform service](highlight-transform.service.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [Highlight directive](highlight.directive.md)
+-   [Highlight transform service](highlight-transform.service.md)
diff --git a/docs/text-mask.component.md b/docs/text-mask.component.md
index 564637f894..68b74f4d48 100644
--- a/docs/text-mask.component.md
+++ b/docs/text-mask.component.md
@@ -11,7 +11,7 @@ Implements text field input masks.
 ### Properties
 
 | Name | Type | Default | Description |
-| --- | --- | --- | --- |
+| ---- | ---- | ------- | ----------- |
 | textMask | any |  | Object defining mask and "reversed" status. |
 
 ## Details
@@ -36,11 +36,11 @@ text mask in ADF would be:
 The following characters have special meaning within a mask; all other characters
 are included in the text as they are:
 
-- **"0"**: Denotes a digit
-- **"9"**: Denotes a digit that can optionally be left out
-- **"A"**: Denotes a alphanumeric character (upper- or lower-case A-Z and digits 0-9)
-- **"S"**: Denotes a alphabetic character (upper- or lower-case A-Z)
-- **"#"**: Denotes a string of zero or more digits
+-   **"0"**: Denotes a digit
+-   **"9"**: Denotes a digit that can optionally be left out
+-   **"A"**: Denotes a alphanumeric character (upper- or lower-case A-Z and digits 0-9)
+-   **"S"**: Denotes a alphabetic character (upper- or lower-case A-Z)
+-   **"#"**: Denotes a string of zero or more digits
 
 The mask is passed to the directive in the `mask` field of the parameter object. The
 `reversed` field indicates that digits in the mask are "filled up" in
@@ -60,8 +60,3 @@ However, with reversed (right-to-left) ordering, the textbox would show
 `2.3`
 
 ...and these digits would slide leftward as the user typed more.
-
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
-
-<!-- seealso end -->
\ No newline at end of file
diff --git a/docs/theming.md b/docs/theming.md
index 00e106d139..bf404c5ae7 100644
--- a/docs/theming.md
+++ b/docs/theming.md
@@ -22,7 +22,7 @@ Available pre-built themes:
 
 If you're using Angular CLI you can include one of the prebuilt theme in your `styles.scss` file:
 ```css
-@import '~ng2-alfresco-core/prebuilt-themes/adf-blue-orange.css';
+@import '~@alfresco/adf-core/prebuilt-themes/adf-blue-orange.css';
 ```
 Or you can add it directly in your index.html
 
diff --git a/docs/thumbnail.service.md b/docs/thumbnail.service.md
index 572aa76a64..d5bbfa4bc8 100644
--- a/docs/thumbnail.service.md
+++ b/docs/thumbnail.service.md
@@ -20,16 +20,16 @@ a document node or a MIME type. The default mapping between types
 and icons is shown in the table below:
 
 | Document | Icon | Types |
-| --- | --- | --- |
+| -------- | ---- | ----- |
 | Compressed archive | ![Archive thumbnail](docassets/images/ft_ic_archive.png) | 'application/x-compressed', 'application/x-zip-compressed', 'application/zip' |
 | Text | ![Text thumbnail](docassets/images/ft_ic_document.png) | 'text/plain', 'application/json', 'application/x-javascript', 'application/vnd.apple.pages' |
 | Bitmap/raster image | ![Bitmap thumbnail](docassets/images/ft_ic_raster_image.png) | 'image/png', 'image/jpeg', 'image/gif' |
 | MP4 video | ![MP4 thumbnail](docassets/images/ft_ic_video.png) | 'video/mp4' |
-| SVG vector image| ![SVG thumbnail](docassets/images/ft_ic_vector_image.png) | 'image/svg+xml' |
+| SVG vector image | ![SVG thumbnail](docassets/images/ft_ic_vector_image.png) | 'image/svg+xml' |
 | HTML file | ![HTML thumbnail](docassets/images/ft_ic_website.png) | 'text/html' |
 | PDF file | ![PDF thumbnail](docassets/images/ft_ic_pdf.png) | 'application/pdf' |
 | Folder | ![Folder thumbnail](docassets/images/ft_ic_folder.png) |  |
-| Disabled folder | ![Disabled folder thumbnail](docassets/images/ft_ic_folder_disable.png) | |
+| Disabled folder | ![Disabled folder thumbnail](docassets/images/ft_ic_folder_disable.png) |  |
 | Excel spreadsheet | ![Spreadsheet thumbnail](docassets/images/ft_ic_ms_excel.png) | 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.openxmlformats-officedocument.spreadsheetml.template' |
 | PowerPoint slideshow | ![PowerPoint thumbnail](docassets/images/ft_ic_ms_powerpoint.png) | 'application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.presentationml.presentation', 'application/vnd.openxmlformats-officedocument.presentationml.template', 'application/vnd.openxmlformats-officedocument.presentationml.slideshow' |
 | Word document | ![Word thumbnail](docassets/images/ft_ic_ms_word.png) | 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.openxmlformats-officedocument.wordprocessingml.template' |
@@ -54,14 +54,6 @@ GIF <mat-icon svgIcon="image/gif"></mat-icon>
 .....
 ```
 
-
-
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Mime type icon pipe](mime-type-icon.pipe.md)
-<!-- seealso end -->
-
-
-
+-   [Mime type icon pipe](mime-type-icon.pipe.md)
diff --git a/docs/time-ago.pipe.md b/docs/time-ago.pipe.md
index 4af4c339d5..17d078232d 100644
--- a/docs/time-ago.pipe.md
+++ b/docs/time-ago.pipe.md
@@ -15,8 +15,3 @@ Converts a recent past date into a number of days ago.
 The pipe finds the difference between the input date and the current date. If it
 is less than seven days then then the date will be formatted as "X days ago".
 Otherwise, the usual full date format is used.
-
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
-
-<!-- seealso end -->
\ No newline at end of file
diff --git a/docs/toolbar-divider.component.md b/docs/toolbar-divider.component.md
index d6ecf6af76..ee9a6e4b64 100644
--- a/docs/toolbar-divider.component.md
+++ b/docs/toolbar-divider.component.md
@@ -11,4 +11,9 @@ Divides groups of elements in a Toolbar with a visual separator.
     <adf-toolbar-divider></adf-toolbar-divider>
     <button></button>
 </adf-toolbar>
-```
\ No newline at end of file
+```
+
+## See Also
+
+-   [Toolbar component](toolbar.component.md)
+-   [Toolbar Title component](toolbar-title.component.md)
diff --git a/docs/toolbar-title.component.md b/docs/toolbar-title.component.md
index 5de232d5cd..292701cadf 100644
--- a/docs/toolbar-title.component.md
+++ b/docs/toolbar-title.component.md
@@ -18,3 +18,8 @@ Supplies custom HTML to be included in a Toolbar component title.
 ## Details
 
 You can use this component to include any HTML or Angular components in the Toolbar title section.
+
+## See Also
+
+-   [Toolbar component](toolbar.component.md)
+-   [Toolbar divider component](toolbar-divider.component.md)
diff --git a/docs/toolbar.component.md b/docs/toolbar.component.md
index a01b67053e..960639546b 100644
--- a/docs/toolbar.component.md
+++ b/docs/toolbar.component.md
@@ -4,22 +4,6 @@ Simple container for headers, titles, actions and breadcrumbs.
 
 ![](docassets/images/adf-toolbar-01.png)
 
-<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
-
-<!-- toc -->
-
-- [Basic Usage](#basic-usage)
-  * [Properties](#properties)
-- [Details](#details)
-  * [Custom title](#custom-title)
-  * [Divider](#divider)
-  * [Dropdown menu](#dropdown-menu)
-  * [Custom color](#custom-color)
-
-<!-- tocstop -->
-
-<!-- markdown-toc end -->
-
 ## Basic Usage
 
 ```html
@@ -36,9 +20,9 @@ Simple container for headers, titles, actions and breadcrumbs.
 ### Properties
 
 | Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| title | string | | Toolbar title |
-| color | string | | Toolbar color, can be changed to empty value (default), `primary`, `accent` or `warn`. |
+| ---- | ---- | ------- | ----------- |
+| title | string |  | Toolbar title |
+| color | string |  | Toolbar color, can be changed to empty value (default), `primary`, `accent` or `warn`. |
 
 ## Details
 
@@ -120,4 +104,9 @@ For example:
 
 ![](docassets/images/adf-toolbar-06.png)
 
-![](docassets/images/adf-toolbar-07.png)
\ No newline at end of file
+![](docassets/images/adf-toolbar-07.png)
+
+## See also
+
+-   [Toolbar Divider component](toolbar-divider.component.md)
+-   [Toolbar Title component](toolbar-title.component.md)
diff --git a/docs/undocStoplist.json b/docs/undocStoplist.json
index b0f4f60b20..c978ab9cdc 100644
--- a/docs/undocStoplist.json
+++ b/docs/undocStoplist.json
@@ -38,5 +38,13 @@
     "node-actions",
     "content-node-selector.service",
     "analytics",
-    "process-upload"
+    "process-upload",
+    "properties-loader",
+    "property-descriptors",
+    "attach-file",
+    "attach-folder",
+    "task-upload",
+    "aspect-whitelist",
+    "basic-properties",
+    "content-metadata"
 ]
\ No newline at end of file
diff --git a/docs/upload-button.component.md b/docs/upload-button.component.md
index be6b899d40..363a877bf5 100644
--- a/docs/upload-button.component.md
+++ b/docs/upload-button.component.md
@@ -1,5 +1,7 @@
 # Upload Button Component
 
+Activates a file upload.
+
 ## Basic Usage
 
 ```html
diff --git a/docs/upload.directive.md b/docs/upload.directive.md
index b1b7b426dd..930853ade1 100644
--- a/docs/upload.directive.md
+++ b/docs/upload.directive.md
@@ -2,22 +2,6 @@
 
 Allows your components or common HTML elements reacting on File drag and drop in order to upload content.
 
-<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
-
-<!-- toc -->
-
-- [Basic usage](#basic-usage)
-- [Details](#details)
-  * [Modes](#modes)
-    + [Click mode](#click-mode)
-    + [Drop mode](#drop-mode)
-  * [Events](#events)
-  * [Styling](#styling)
-
-<!-- tocstop -->
-
-<!-- markdown-toc end -->
-
 ## Basic usage
 
 The directive itself does not do any file management process,
@@ -55,8 +39,8 @@ Used by attaching to an element or component.
 
 Directive supports several modes:
 
-- **drop** mode, where decorated element acts like a drop zone for files (**default** mode)
-- **click** mode, where decorated element invokes File Dialog to select files or folders.
+-   **drop** mode, where decorated element acts like a drop zone for files (**default** mode)
+-   **click** mode, where decorated element invokes File Dialog to select files or folders.
 
 It is also possible combining modes together.
 
@@ -70,9 +54,9 @@ It is also possible combining modes together.
 
 For the click mode you can provide additional attributes for the File Dialog:
 
-- **directory**, enables directory selection
-- **multiple**, enables multiple file/folder selection
-- **accept**, filters the content accepted
+-   **directory**, enables directory selection
+-   **multiple**, enables multiple file/folder selection
+-   **accept**, filters the content accepted
 
 ```html
 <div style="width: 50px; height: 50px; background-color: brown"
@@ -174,4 +158,4 @@ for example you may want drawing a dashed border around the table row on drag:
 .adf-upload__dragging > td:last-child {
     border-right: 1px dashed rgb(68,138,255);
 }
-```
\ No newline at end of file
+```
diff --git a/docs/user-info.component.md b/docs/user-info.component.md
index 6157a3690d..fe7046a027 100644
--- a/docs/user-info.component.md
+++ b/docs/user-info.component.md
@@ -1,4 +1,6 @@
-# Alfresco User Info component
+# User Info component
+
+Shows user information.
 
 ## Basic usage
 
@@ -9,13 +11,13 @@
 ### Properties
 
 | Name | Type | Default | Description |
-| --- | --- | --- | --- |
+| ---- | ---- | ------- | ----------- |
 | ecmBackgroundImage | string | (alfresco image) | Custom path for the background banner image for ECM users |
 | bpmBackgroundImage | string | (alfresco image) | Custom path for the background banner image for BPM users |
-| menuPositionX | string |   | Custom choice for opening the menu bottom : `before` or `after`  |
-| menuPositionY | string |   | Custom choice for opening the menu bottom : `above` or `below`  |
-| namePosition | string | `right` | When the username is showed this define his position relatively the user info button. It can be two values : `right` or `left`|
-| showName | boolean | true | Show/Hide the username next the user info button|
+| menuPositionX | string |  | Custom choice for opening the menu bottom : `before` or `after` |
+| menuPositionY | string |  | Custom choice for opening the menu bottom : `above` or `below` |
+| namePosition | string | `right` | When the username is showed this define his position relatively the user info button. It can be two values : `right` or `left` |
+| showName | boolean | true | Show/Hide the username next the user info button |
 
 ## Details
 
diff --git a/docs/user-initial.pipe.md b/docs/user-initial.pipe.md
index a83eb89d4a..7ca5e08da3 100644
--- a/docs/user-initial.pipe.md
+++ b/docs/user-initial.pipe.md
@@ -13,14 +13,9 @@ Takes the name fields of a UserProcessModel object and extracts and formats the
 ## Details
 
 The pipe gets the initial characters of the user's first and last names and
-concatenates them. The results are returned in an HTML &lt;div&gt; element.
+concatenates them. The results are returned in an HTML &lt;div> element.
 
-The first pipe parameter specifies an optional CSS class to add to the &lt;div&gt;
+The first pipe parameter specifies an optional CSS class to add to the &lt;div>
 element (eg, a background color is commonly used to emphasise initials). The
 second parameter is an optional delimiter to add between the initials.
 Both parameters default to empty strings.
-
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
-
-<!-- seealso end -->
\ No newline at end of file
diff --git a/docs/user-process.model.md b/docs/user-process.model.md
index bfe5872cf3..92cab98473 100644
--- a/docs/user-process.model.md
+++ b/docs/user-process.model.md
@@ -13,9 +13,6 @@ it is likely to change and so its properties are not listed here. For the
 latest version of the class, see the
 [source file](https://github.com/Alfresco/alfresco-ng2-components/blob/development/lib/core/models/user-process.model.ts).
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [People process service](people-process.service.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [People process service](people-process.service.md)
diff --git a/docs/version-list.component.md b/docs/version-list.component.md
index 8a9abe2a48..3f3a7d5089 100644
--- a/docs/version-list.component.md
+++ b/docs/version-list.component.md
@@ -1,7 +1,6 @@
 # Version List component
 
-Displays the version history of a node in a
-[Version Manager component](version-manager.component.md)
+Displays the version history of a node in a [Version Manager component](version-manager.component.md)
 
 ### Basic Usage
 
@@ -12,7 +11,7 @@ Displays the version history of a node in a
 ### Properties
 
 | Name | Type | Description |
-| --- | --- | --- |
+| ---- | ---- | ----------- |
 | id | string | The node id you want to see the version history of. |
 
 ## Details
@@ -20,9 +19,6 @@ Displays the version history of a node in a
 Inside the version manager component, there is the underlying VersionListComponent.
 The VersionListComponent loads and displays the version history of a node.
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Version manager component](version-manager.component.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [Version manager component](version-manager.component.md)
diff --git a/docs/version-manager.component.md b/docs/version-manager.component.md
index 0891319ccd..97b3f0de9f 100644
--- a/docs/version-manager.component.md
+++ b/docs/version-manager.component.md
@@ -2,7 +2,7 @@
 
 Displays the version history of a node with the ability to upload a new version.
 
-![#f03c15](https://placehold.it/15/f03c15/000000?text=+) `This component is still in experimental phase, it has several limitations which will be resolved soon.`
+![\#f03c15](https://placehold.it/15/f03c15/000000?text=+) `This component is still in experimental phase, it has several limitations which will be resolved soon.`
 
 ![Version Manager](docassets/images/version-manager.png)
 
@@ -15,7 +15,7 @@ Displays the version history of a node with the ability to upload a new version.
 ### Properties
 
 | Name | Type | Description |
-| --- | --- | --- |
+| ---- | ---- | ----------- |
 | node | [MinimalNodeEntryEntity](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.md) | The node you want to manage the version history of. |
 
 ## Details
@@ -24,14 +24,11 @@ Displays the version history of a node with the ability to upload a new version.
 
 Each version has a context menu on the right, with the following actions.
 
-| Action   | Versions  | Description |
-| ---      | ---       | ---         |
-| Restore  | All       | Revert the current version to the selected one with creating a new version of it. |
+| Action | Versions | Description |
+| ------ | -------- | ----------- |
+| Restore | All | Revert the current version to the selected one with creating a new version of it. |
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Version list component](version-list.component.md)
-- [Document list component](document-list.component.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [Version list component](version-list.component.md)
+-   [Document list component](document-list.component.md)
diff --git a/docs/viewer.component.md b/docs/viewer.component.md
index 1f22031f41..461fb87414 100644
--- a/docs/viewer.component.md
+++ b/docs/viewer.component.md
@@ -1,22 +1,27 @@
-# Alfresco Viewer component
+# Viewer component
+
+Displays content from an ACS repository.
 
 See it live: [Viewer Quickstart](https://embed.plnkr.co/iTuG1lFIXfsP95l6bDW6/)
 
-<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
+## Contents
 
-<!-- toc -->
+-   [Basic usage](#basic-usage)
 
-- [Basic usage](#basic-usage)
-- [Properties](#properties)
-- [Details](#details)
-  * [Supported file formats](#supported-file-formats)
-  * [PDF Conversion](#pdf-conversion)
-  * [Configuring PDF.js library](#configuring-pdfjs-library)
-  * [Custom extension handler](#custom-extension-handler)
+    -   [Properties](#properties)
+    -   [Events](#events)
 
-<!-- tocstop -->
+-   [Details](#details)
 
-<!-- markdown-toc end -->
+    -   [Integrating with DocumentList component](#integrating-with-documentlist-component)
+    -   [Supported file formats](#supported-file-formats)
+    -   [PDF Conversion](#pdf-conversion)
+    -   [Configuring PDF.js library](#configuring-pdfjs-library)
+    -   [Custom toolbar](#custom-toolbar)
+    -   [Custom sidebar](#custom-sidebar)
+    -   [Custom "Open With" menu](#custom-open-with-menu)
+    -   [Custom "More actions" menu](#custom-more-actions-menu)
+    -   [Extending the Viewer](#extending-the-viewer)
 
 ## Basic usage
 
@@ -39,35 +44,40 @@ Using with file url:
 </adf-viewer>
 ```
 
-## Properties
+### Properties
 
 | Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| fileNodeId | string | | Node Id of the file to load |
-| urlFile | string | | If you want to load an external file that does not come from ECM you can use this Url where to load the file |
-| urlBlob | Blob | | If you want to load a Blob File |
+| ---- | ---- | ------- | ----------- |
+| fileNodeId | string |  | Node Id of the file to load |
+| sharedLinkId | string |  | Shared link id (to display shared file) |
+| urlFile | string |  | If you want to load an external file that does not come from ECM you can use this Url where to load the file |
+| urlFileViewer | string | null | Viewer to use with the `urlFile` address (`pdf`, `image`, `media`, `text`). Used when `urlFile` has no filename and extension. |
+| urlBlob | Blob |  | If you want to load a Blob File |
 | overlayMode | boolean | false | If `true` show the Viewer full page over the present content otherwise will fit the parent div |
 | showViewer | boolean | true | Hide or show the viewer |
 | showToolbar | boolean | true | Hide or show the toolbar |
-| displayName | string | | You can specify the name of the file |
+| displayName | string |  | You can specify the name of the file |
 | allowGoBack | boolean | true | Allow `back` navigation |
 | allowDownload | boolean | true | Toggle download feature |
 | allowPrint | boolean | false | Toggle printing feature |
 | allowShare | boolean | false | Toggle sharing feature |
-| allowSidebar | boolean |false | Toggle sidebar feature |
+| allowSidebar | boolean | false | Toggle sidebar feature |
 | showSidebar | boolean | false | Toggles sidebar visibility. Requires `allowSidebar` to be set to `true`. |
 | sidebarPosition | string | right | The position of the sidebar. Can be `left` or `right`. |
+| sidebarTemplate | TemplateRef<any> | null | The template intended to be used as a sidebar. The template context contains the loaded node data. |
 
-## Events
+### Events
 
 | Name | Argument Type | Cancelable | Description |
-| --- | --- | --- | --- |
+| ---- | ------------- | ---------- | ----------- |
 | goBack | any | Yes | Raised when user clicks the 'Back' button. |
 | download | any | Yes | Raised when user clicks the 'Download' button. |
 | print | any | Yes | Raised when user clicks the 'Print' button. |
 | share | any | Yes | Raised when user clicks the 'Share' button. |
 
-## Integrating with DocumentList component
+## Details
+
+### Integrating with DocumentList component
 
 Below is the most simple integration of Viewer and DocumentList components within your custom component:
 
@@ -103,12 +113,23 @@ export class OverlayViewerComponent {
 }
 ```
 
-## Details
+### Custom file parameters
+
+You can provide custom file parameters, for example a value for the `mimeType` or `displayName` when using URL values that have no file names or extensions:
+
+```html
+<adf-viewer
+    [displayName]="fileName"
+    [allowGoBack]="false"
+    [mimeType]="mimeType"
+    [urlFile]="fileUrl">
+</adf-viewer>
+```
 
 ### Supported file formats
 
 | Type | Extension |
-| --- | --- |
+| ---- | --------- |
 | Media | wav, Mp3, Mp4, WebM, Ogv |
 | Images | png, jpg, jpeg, gif, bmp |
 | Text | pdf, txt |
@@ -173,6 +194,13 @@ Everything you put inside the "adf-viewer-toolbar" tags is going to be rendered
 The Viewer component also supports custom sidebar components and layouts.
 The `allowSidebar` property should be set to `true` to enable this feature.
 
+Custom sidebar for the viewer can be injected in two different ways:
+
+-   using transclusion
+-   using template **(only works when using the viewer with fileNodeId)**
+
+#### Using transclusion
+
 ```html
 <adf-viewer [allowSidebar]="true">
     <adf-viewer-sidebar>
@@ -181,7 +209,16 @@ The `allowSidebar` property should be set to `true` to enable this feature.
 </adf-viewer>
 ```
 
-Everything you put inside the "adf-viewer-sidebar" tags is going to be rendered instead of the default sidebar.
+Everything you put inside the "adf-viewer-sidebar" tags is going to be rendered.
+
+#### Using template injection (only works when using the viewer with fileNodeId)
+
+```html
+<ng-template let-node="node" #sidebarTemplate>
+    <adf-content-metadata-card [node]="node"></adf-content-metadata-card>
+</ng-template>
+<adf-viewer [allowSidebar]="true" [sidebarTemplate]="sidebarTemplate"></adf-viewer>
+```
 
 ### Custom "Open With" menu
 
diff --git a/docs/webscript.component.md b/docs/webscript.component.md
index 275b2dab59..9cd7d3400a 100644
--- a/docs/webscript.component.md
+++ b/docs/webscript.component.md
@@ -1,19 +1,6 @@
-# Alfresco Webscript Get component
+# Webscript component
 
-<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
-
-<!-- toc -->
-
-- [Basic usage](#basic-usage)
-  * [Properties](#properties)
-- [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)
-
-<!-- tocstop -->
-
-<!-- markdown-toc end -->
+Provides access to Webscript features.
 
 ## Basic usage
 
@@ -56,24 +43,23 @@ export class AppComponent {
 ### Properties
 
 | Attribute | Type | Default | Description |
-| --- | --- | --- | --- |
-| scriptPath | string | |  (**mandatory**) path to Web Script (as defined by Web Script) |
-| scriptArgs | Object | | arguments to pass to Web Script |
-| contextRoot | string | | path where application is deployed | 
-| scriptPath | string | alfresco |  path to Web Script (as defined by Web Script) | 
-| contentType | string | service | path where Web Script service is mapped default value | 
+| --------- | ---- | ------- | ----------- |
+| scriptPath | string |  | (**mandatory**) path to Web Script (as defined by Web Script) |
+| scriptArgs | Object |  | arguments to pass to Web Script |
+| contextRoot | string |  | path where application is deployed |
+| scriptPath | string | alfresco | path to Web Script (as defined by Web Script) |
+| contentType | string | service | path where Web Script service is mapped default value |
 | contentType | string | TEXT | how to handle the data received from the web script JSON , HTML , DATATABLE or TEXT |
 | showData | boolean | true | render the webscript data |
 
-
 ### Events
 
 | Name | Description |
-| --- | --- |
+| ---- | ----------- |
 | success | You can get the plain data from the webscript through the **success** event parameter and use it as you need in your application |
 
 **contentType** {string}  
-***data***      {string}  data containing the plain value you get from the webscipt as an output parameter
+**_data_**      {string}  data containing the plain value you get from the webscipt as an output parameter
 
 ## Details
 
@@ -82,7 +68,7 @@ export class AppComponent {
 This sample demonstrates how to implement a Webscript component that renders the HTML contents that come from a webscript
 This sample Web Scripts reside in your Alfresco Server. You can access the folder webscript here:
 
-```http://localhost:8080/alfresco/service/sample/folder/Company%20Home```
+`http://localhost:8080/alfresco/service/sample/folder/Company%20Home`
 
 ```html
 <adf-webscript-get 
@@ -92,7 +78,7 @@ This sample Web Scripts reside in your Alfresco Server. You can access the folde
     [scriptPath]="'Sample/folder/Company%20Home'"
     [contentType]="'HTML'">
 </adf-webscript-get>
-```                          
+```
 
 ![Custom columns](docassets/images/HTML.png)                         
 
@@ -100,7 +86,7 @@ This sample Web Scripts reside in your Alfresco Server. You can access the folde
 
 This sample demonstrates how to implement a Webscript component that renders the JSON contents that come from a webscript
 
-```http://localhost:8080/alfresco/service/sample/folder/DATATABLE```
+`http://localhost:8080/alfresco/service/sample/folder/DATATABLE`
 
 ```html
 <adf-webscript-get 
@@ -110,7 +96,7 @@ This sample demonstrates how to implement a Webscript component that renders the
     [scriptPath]="'Sample/folder/DATATABLE'"
     [contentType]="'DATATABLE'">
 </adf-webscript-get>
-```  
+```
 
 If you want to show the result from a webscript inside a ng2-alfresco-datatable you have to return from the GET of the webscript the datastructure below:
 subdivide in data and schema
@@ -158,7 +144,7 @@ that will render the following table
 This sample demonstrates how to implement a Webscript component that renders the JSON contents that come from a webscript
 This sample Web Scripts reside in your Alfresco Server. You can access the folder webscript here:
 
-```http://localhost:8080/alfresco/service/sample/folder/JSON%EXAMPLE```
+`http://localhost:8080/alfresco/service/sample/folder/JSON%EXAMPLE`
 
 ```html
 <adf-webscript-get 
@@ -170,7 +156,7 @@ This sample Web Scripts reside in your Alfresco Server. You can access the folde
     [showData]="false"
     (success)="logDataExample($event)">
 </adf-webscript-get>
-``` 
+```
 
 You can get the plain data from the webscript through the **success** event parameter and use it as you need in your application
 
@@ -178,4 +164,4 @@ You can get the plain data from the webscript through the **success** event para
 logDataExample(data) {
     console.log('You webscript data are here' + data);
 }
-```
\ No newline at end of file
+```
diff --git a/docs/widget.component.md b/docs/widget.component.md
index 023c156c1f..f74e5573de 100644
--- a/docs/widget.component.md
+++ b/docs/widget.component.md
@@ -20,7 +20,7 @@ export class CustomEditorComponent extends WidgetComponent {}
 ### Properties
 
 | Name | Type | Default | Description |
-| --- | --- | --- | --- |
+| ---- | ---- | ------- | ----------- |
 | readOnly | boolean | false | Does the widget show a read-only value? (ie, can't be edited) |
 | field | [FormFieldModel](form-field.model.md) |  | Data to be displayed in the field |
 
@@ -30,9 +30,6 @@ The Widget component is the base class for all standard and custom form widgets.
 [Form Extensibility and Customisation](extensibility.md) page for full details about
 implementing custom widgets.
 
-<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
-<!-- seealso start -->
 ## See also
 
-- [Extensibility](extensibility.md)
-<!-- seealso end -->
\ No newline at end of file
+-   [Extensibility](extensibility.md)
diff --git a/lib/config/DocProcessor/docProcessor.js b/lib/config/DocProcessor/docProcessor.js
new file mode 100644
index 0000000000..87ce734411
--- /dev/null
+++ b/lib/config/DocProcessor/docProcessor.js
@@ -0,0 +1,184 @@
+var fs = require("fs");
+var path = require("path");
+var program = require("commander");
+
+var remark = require("remark");
+var parse = require("remark-parse");
+var stringify = require("remark-stringify");
+
+/*
+var managetoc = require("./managetoc");
+var sa = require("./seealso");
+var index = require("./index");
+*/
+
+// "Aggregate" data collected over the whole file set.
+var aggData = {};
+
+var toolsFolderName = "tools";
+var configFileName = "doctool.config.json";
+var defaultFolder = path.resolve("..", "docs");
+
+
+function initPhase(aggData) {
+    /*
+    toolModules.seealso.initPhase(aggData);
+    toolModules.index.initPhase(aggData);
+    */
+
+    toolList.forEach(toolName => {
+        toolModules[toolName].initPhase(aggData);
+    });
+}
+
+
+function readPhase(srcFolder, filenames, aggData) {
+    for (var i = 0; i < filenames.length; i++) {
+        var pathname = path.resolve(srcFolder, filenames[i]);
+        
+        var src = fs.readFileSync(pathname);
+        var tree = remark().parse(src)
+
+        toolList.forEach(toolName => {
+            toolModules[toolName].readPhase(tree, pathname, aggData);
+        });
+
+        /*
+        toolModules.seealso.readPhase(tree, pathname, aggData);
+        toolModules.index.readPhase(tree, pathname, aggData);
+        */
+    }
+
+    //console.log(JSON.stringify(aggData.mdFileData));
+}
+
+
+function aggPhase(aggData) {
+    toolList.forEach(toolName => {
+        toolModules[toolName].aggPhase(aggData);
+    });
+
+    /*
+    toolModules.seealso.aggPhase(aggData);
+    toolModules.index.aggPhase(aggData);
+    */
+}
+
+
+function updatePhase(srcFolder, destFolder, filenames, aggData) {
+    for (var i = 0; i < filenames.length; i++) {
+        var pathname = path.resolve(srcFolder, filenames[i]);
+        
+        var src = fs.readFileSync(pathname);
+        var tree = remark().parse(src)
+
+        var modified = false;
+
+        toolList.forEach(toolName => {
+            modified |= toolModules[toolName].updatePhase(tree, pathname, aggData);
+        });
+        
+        if (modified)
+            fs.writeFileSync(path.resolve(destFolder, filenames[i]), remark().data("settings", {paddedTable: false}).stringify(tree));
+            //console.log(JSON.stringify(tree));
+    }
+}
+
+
+function loadToolModules() {
+    var mods = {};
+    var toolsFolderPath = path.resolve(__dirname, toolsFolderName);
+    var modFiles = fs.readdirSync(toolsFolderPath);
+
+    for (var i = 0; i < modFiles.length; i++) {
+        var modPath = path.resolve(toolsFolderPath, modFiles[i])
+
+        if (path.extname(modPath) === ".js") {
+            var toolName = path.basename(modPath, ".js");
+            mods[toolName] = require(modPath);
+        }
+    }
+
+    return mods;
+}
+
+
+function loadToolConfig(configFilePath) {
+    var config = JSON.parse(fs.readFileSync(configFilePath));
+
+    return config.enabledTools;
+}
+
+
+program
+.usage("[options] <source> [dest]")
+.parse(process.argv);
+
+if (program.args.length === 0) {
+    console.log("Error: source argument required");
+    return 0;
+}
+
+/*
+var sourcePath;
+
+
+if (program.args.length > 0)
+    sourcePath = path.resolve(program.args[0]);
+else
+    sourcePath = defaultFolder;
+*/
+var sourcePath = path.resolve(program.args[0]);
+var sourceInfo = fs.statSync(sourcePath);
+
+var destPath;
+var destInfo;
+
+if (program.args.length >= 2) {
+    destPath = path.resolve(program.args[1]);
+    destInfo = fs.statSync(sourcePath);
+} else {
+    destPath = sourcePath;
+    destInfo = sourceInfo;
+}
+
+if (sourceInfo.isDirectory() && !destInfo.isDirectory()) {
+    console.log("Error: The <dest> argument must be a directory");
+    return 0;
+}
+
+var toolModules = loadToolModules();
+var toolList = loadToolConfig(path.resolve(__dirname, configFileName));
+
+
+var files;
+
+if (sourceInfo.isDirectory()) {
+    files = fs.readdirSync(sourcePath);
+} else if (sourceInfo.isFile()) {
+    files = [ path.basename(sourcePath) ];
+    sourcePath = path.dirname(sourcePath);
+    destPath = path.dirname(destPath);
+}
+
+files = files.filter(filename => 
+    (path.extname(filename) === ".md") &&
+    (filename !== "README.md")
+);
+
+//files.forEach(element => console.log(element));
+
+console.log("Initialising...");
+initPhase(aggData);
+
+console.log("Analysing Markdown files...");
+readPhase(sourcePath, files, aggData);
+
+console.log("Computing aggregate data...");
+aggPhase(aggData);
+
+console.log("Updating Markdown files...");
+updatePhase(sourcePath, destPath, files, aggData);
+
+
+
diff --git a/lib/config/DocProcessor/doctool.config.json b/lib/config/DocProcessor/doctool.config.json
new file mode 100644
index 0000000000..6f7ef23478
--- /dev/null
+++ b/lib/config/DocProcessor/doctool.config.json
@@ -0,0 +1,5 @@
+{
+    "enabledTools": [
+        "index"
+    ]
+}
\ No newline at end of file
diff --git a/lib/config/DocProcessor/ngHelpers.js b/lib/config/DocProcessor/ngHelpers.js
new file mode 100644
index 0000000000..961234fc2a
--- /dev/null
+++ b/lib/config/DocProcessor/ngHelpers.js
@@ -0,0 +1,19 @@
+module.exports = {
+    "ngNameToDisplayName": ngNameToDisplayName,
+    "dekebabifyName": dekebabifyName,
+    "classTypes": ["component", "directive", "model", "pipe", "service", "widget"]
+}
+
+
+function ngNameToDisplayName(ngName) {
+    var mainSections = ngName.split(".");
+    mainSections[0] = dekebabifyName(mainSections[0]);
+    return mainSections.join(" ");
+}
+
+
+function dekebabifyName(name) {
+    var result = name.replace(/-/g, " ");
+    result = result.substr(0, 1).toUpperCase() + result.substr(1);
+    return result;
+}
\ No newline at end of file
diff --git a/lib/config/DocProcessor/tools/index.js b/lib/config/DocProcessor/tools/index.js
new file mode 100644
index 0000000000..6ce79ec65d
--- /dev/null
+++ b/lib/config/DocProcessor/tools/index.js
@@ -0,0 +1,362 @@
+var fs = require("fs");
+var path = require("path");
+
+var remark = require("remark");
+var stringify = require("remark-stringify");
+var zone = require("mdast-zone");
+
+var unist = require("../unistHelpers");
+var ngHelpers = require("../ngHelpers");
+
+
+module.exports = {
+    "initPhase": initPhase,
+    "readPhase": readPhase,
+    "aggPhase": aggPhase,
+    "updatePhase": updatePhase
+}
+
+var angFilenameRegex = /([a-zA-Z0-9\-]+)\.((component)|(directive)|(model)|(pipe)|(service)|(widget))\.ts/;
+var searchFolderOmitRegex = /(config)|(mock)|(i18n)|(assets)|(styles)/;
+
+var docsFolderPath = path.resolve("..", "docs");
+var undocStoplistFileName = path.resolve(docsFolderPath, "undocStoplist.json");
+var rootFolder = ".";
+var indexMdFilePath = path.resolve(docsFolderPath, "README.md");
+var guideSummaryFileName = path.resolve(docsFolderPath, "summary.json");
+
+var maxBriefDescLength = 180;
+
+var adfLibNames = ["core", "content-services", "insights", "process-services"];
+
+
+function initPhase(aggData) {
+    aggData.stoplist = makeStoplist(undocStoplistFileName);    
+    aggData.srcData = {};
+    aggData.mdFileDesc = [];
+
+    searchLibraryRecursive(aggData.srcData, path.resolve(rootFolder));
+
+    //console.log(JSON.stringify(aggData.srcData));
+}
+
+
+function readPhase(tree, pathname, aggData) {
+    var itemName = path.basename(pathname, ".md");
+
+    // Look for the first paragraph in the file by skipping other items.
+    // Should usually be a position 1 in the tree.
+    var s;
+    var briefDesc;
+
+    for (
+        s = 0;
+        (s < tree.children.length) && !unist.isParagraph(tree.children[s]);
+        s++
+    );
+
+    if (s < tree.children.length) {
+        briefDesc = tree.children[s];
+    }
+
+    aggData.mdFileDesc[itemName] = briefDesc;
+}
+
+function aggPhase(aggData) {
+    var sections = prepareIndexSections(aggData);
+    //console.log(JSON.stringify(sections));
+
+    var indexFileText = fs.readFileSync(indexMdFilePath, "utf8");
+    var indexFileTree = remark().parse(indexFileText);
+
+    for (var l = 0; l < adfLibNames.length; l++) {
+
+        var libName = adfLibNames[l];
+        var libSection = sections[libName];
+        
+        var md = makeLibSectionMD(libSection);
+
+        zone(indexFileTree, libName, (startComment, oldSection, endComment) => {
+            md.unshift(startComment);
+            md.push(endComment);
+            return md;
+        });
+    }
+
+    var guideSection = buildGuideSection(guideSummaryFileName);
+
+    zone(indexFileTree, "guide", (startComment, oldSection, endComment) => {
+        return [
+            startComment, guideSection, endComment
+        ]
+    });
+
+    fs.writeFileSync(path.resolve("..", "docs", "README.md"), remark().data("settings", {paddedTable: false}).stringify(indexFileTree));
+    //fs.writeFileSync(indexMdFilePath, remark().stringify(indexFileTree));
+    //fs.writeFileSync(path.resolve(".", "testJson.md"), JSON.stringify(indexFileTree));
+}
+
+
+function updatePhase(tree, pathname, aggData) {
+    return false;
+}
+
+
+// Create a stoplist of regular expressions.
+function makeStoplist(slFilePath) {
+    var listExpressions = JSON.parse(fs.readFileSync(slFilePath, 'utf8'));
+    
+    var result = [];
+    
+    for (var i = 0; i < listExpressions.length; i++) {
+        result.push(new RegExp(listExpressions[i]));
+    }
+    
+    return result;
+}
+
+// Check if an item is covered by the stoplist and reject it if so.
+function rejectItemViaStoplist(stoplist, itemName) {
+    for (var i = 0; i < stoplist.length; i++) {
+        if (stoplist[i].test(itemName)) {
+            return true;
+        }
+    }
+    
+    return false;
+}
+
+
+//  Search source folders for .ts files to discover all components, directives, etc.
+function searchLibraryRecursive(srcData, folderPath) {
+    var items = fs.readdirSync(folderPath);
+    
+    for (var i = 0; i < items.length; i++) {
+        var itemPath = path.resolve(folderPath, items[i]);
+        var info = fs.statSync(itemPath);
+        
+        if (info.isFile() && (items[i].match(angFilenameRegex))) {
+            var nameNoSuffix = path.basename(items[i], '.ts');
+            
+            var displayPath = itemPath.replace(/\\/g, '/');
+            displayPath = displayPath.substr(displayPath.indexOf("lib") + 4);
+
+            // Type == "component", "directive", etc.
+            var itemType = nameNoSuffix.split('.')[1];
+            
+            srcData[nameNoSuffix] = { "path": displayPath, "type": itemType };            
+        } else if (info.isDirectory() && !items[i].match(searchFolderOmitRegex)) {
+            searchLibraryRecursive(srcData, itemPath);
+        }
+    }
+}
+
+
+function prepareIndexSections(aggData) {
+    var srcNames = Object.keys(aggData.srcData);
+    var sections = initEmptySections();
+
+    for (var i = 0; i < srcNames.length; i++) {
+        var itemName = srcNames[i];
+        var srcData = aggData.srcData[itemName];
+        var libName = srcData.path.substr(0, srcData.path.indexOf("/"));
+
+        var briefDesc = aggData.mdFileDesc[itemName];
+
+        var displayName = ngHelpers.ngNameToDisplayName(itemName);
+
+        if (briefDesc) {
+            sections[libName][srcData.type].documented.push({
+                "displayName": displayName,
+                "mdName": itemName + ".md",
+                "srcPath": srcData.path,
+                "briefDesc": briefDesc
+            });
+        } else if (!rejectItemViaStoplist(aggData.stoplist, itemName)) {
+            sections[libName][srcData.type].undocumented.push({
+                "displayName": displayName,
+                "mdName": itemName + ".md",
+                "srcPath": srcData.path
+            });
+        }
+    }
+
+    return sections;
+}
+
+
+function initEmptySections() {
+    var result = {};
+
+    for (var l = 0; l < adfLibNames.length; l++) {
+        var lib = result[adfLibNames[l]] = {};
+
+        for (var c = 0; c < ngHelpers.classTypes.length; c++) {
+            var classType = lib[ngHelpers.classTypes[c]] = {};
+
+            classType.undocumented = [];
+            classType.documented = [];
+        }
+    }
+
+    return result;
+}
+
+
+function buildMDDocumentedSection(docItems) {
+    var listItems = [];
+
+    for (var i = 0; i < docItems.length; i++) {
+        listItems.push(makeMDDocumentedListItem(docItems[i]));
+    }
+
+    return unist.makeListUnordered(listItems);
+}
+
+
+function buildMDUndocumentedSection(docItems) {
+    var listItems = [];
+
+    for (var i = 0; i < docItems.length; i++) {
+        listItems.push(makeMDUndocumentedListItem(docItems[i]));
+    }
+
+    return unist.makeListUnordered(listItems);
+}
+
+
+function buildMDDocumentedTable(docItems) {
+    var rows = [
+        
+    ];
+    
+    for (var i = 0; i < docItems.length; i++) {
+        rows.push(makeMDDocumentedTableRow(docItems[i]));
+    }
+
+    return rows;
+    //return unist.makeTable([null, null, null, null], rows);
+}
+
+
+function buildMDUndocumentedTable(docItems) {
+    var rows = [
+       
+    ];
+    
+    for (var i = 0; i < docItems.length; i++) {
+        rows.push(makeMDUndocumentedTableRow(docItems[i]));
+    }
+
+    return rows;
+    //return unist.makeTable([null, null, null, null], rows);
+}
+
+
+function makeMDDocumentedListItem(docItem) {
+    var mdFileLink = unist.makeLink(unist.makeText(docItem.displayName), docItem.mdName);
+    var srcFileLink = unist.makeLink(unist.makeText("Source"), "../lib/" + docItem.srcPath);
+    var desc = docItem.briefDesc;
+
+    var para = unist.makeParagraph([
+        mdFileLink, unist.makeText(" ("), srcFileLink, unist.makeText(") "), desc 
+    ]);
+
+    return unist.makeListItem(para);
+}
+
+
+function makeMDUndocumentedListItem(docItem) {
+    var itemName = unist.makeText(docItem.displayName);
+    var srcFileLink = unist.makeLink(unist.makeText("Source"), "../lib/" + docItem.srcPath);
+
+    var para = unist.makeParagraph([
+       unist.makeText("* "), itemName, unist.makeText(" ("), srcFileLink, unist.makeText(")") 
+    ]);
+
+    return unist.makeListItem(para);
+}
+
+
+function makeMDDocumentedTableRow(docItem) {
+    var mdFileLink = unist.makeLink(unist.makeText(docItem.displayName), docItem.mdName);
+    var srcFileLink = unist.makeLink(unist.makeText("Source"), "../lib/" + docItem.srcPath);
+    var desc = docItem.briefDesc;
+
+    return unist.makeTableRow([
+        unist.makeTableCell([mdFileLink]),
+        unist.makeTableCell([desc]),
+        unist.makeTableCell([srcFileLink])
+    ]);
+}
+
+
+function makeMDUndocumentedTableRow(docItem) {
+    var itemName = unist.makeText(docItem.displayName);
+    var srcFileLink = unist.makeLink(unist.makeText("Source"), "../lib/" + docItem.srcPath);
+
+    return unist.makeTableRow([
+        unist.makeTableCell([unist.makeEmphasis([itemName])]),
+        unist.makeTableCell([unist.makeEmphasis([unist.makeText("Not currently documented")])]),
+        unist.makeTableCell([srcFileLink])
+    ]);
+}
+
+
+function makeLibSectionMD(libSection){
+    var md = [];
+
+    var libClassTypes = Object.keys(libSection);
+    
+    for (var i = 0; i < libClassTypes.length; i++) {
+        var classType = libClassTypes[i];
+
+        var classSection = libSection[classType];
+
+        if (!classSection)
+            continue;
+
+        var displayNameNode;
+
+        if ((classSection.documented.length > 0) || (classSection.undocumented.length > 0)) {
+            displayNameNode = unist.makeText(ngHelpers.dekebabifyName(classType + "s"));
+            md.push(unist.makeHeading(displayNameNode, 2));
+        
+            var tableRows = [
+                unist.makeTableRow([
+                    unist.makeTableCell([unist.makeText("Name")]),
+                    unist.makeTableCell([unist.makeText("Description")]),
+                    unist.makeTableCell([unist.makeText("Source link")])
+                ])
+            ];
+
+            if (classSection.documented.length > 0) {
+                //md.push(buildMDDocumentedSection(classSection.documented));
+                tableRows = tableRows.concat(buildMDDocumentedTable(classSection.documented));
+            }
+
+            if (classSection.undocumented.length > 0) {
+                // md.push(buildMDUndocumentedSection(classSection.undocumented));
+                tableRows = tableRows.concat(buildMDUndocumentedTable(classSection.undocumented));
+            }
+
+            md.push(unist.makeTable([null, null, null, null], tableRows));
+        }
+    }
+
+    return md;
+}
+
+
+function buildGuideSection(guideJsonFilename) {
+    var summary = JSON.parse(fs.readFileSync(guideJsonFilename, "utf8"));
+
+    var listItems = [];
+
+    for (var i = 0; i < summary.length; i++) {
+        var link = unist.makeLink(unist.makeText(summary[i].title), summary[i].file);
+        listItems.push(unist.makeListItem(link));
+    }
+
+    return unist.makeListUnordered(listItems);
+}
\ No newline at end of file
diff --git a/lib/config/DocProcessor/tools/seealso.js b/lib/config/DocProcessor/tools/seealso.js
new file mode 100644
index 0000000000..47d998370a
--- /dev/null
+++ b/lib/config/DocProcessor/tools/seealso.js
@@ -0,0 +1,175 @@
+var path = require("path");
+var getSection = require("mdast-util-heading-range");
+
+var unist = require("../unistHelpers");
+
+var seeAlsoHeading = "See Also";
+
+module.exports = {
+    "initPhase": initPhase,
+    "readPhase": readPhase,
+    "aggPhase": aggPhase,
+    "updatePhase": updatePhase
+}
+
+
+function initPhase(aggData) {
+    aggData.saGraph = {};
+    aggData.saUpdateGraph = {};
+}
+
+
+function readPhase(tree, pathname, aggData) {
+    var saHeadingOffset = findSeeAlsoSection(tree);
+    
+    var saNode = [];
+
+    if (saHeadingOffset !== -1) {
+        // Skip over non-list parts.
+        var s;
+
+        for (
+            s = saHeadingOffset;
+            (s < tree.children.length) && !unist.isListUnordered(tree.children[s]);
+            s++
+        );
+
+        if ((s < tree.children.length) && unist.isListUnordered(tree.children[s])) {
+            var list = tree.children[s];
+
+            for (var i = 0; i < list.children.length; i++) {
+                var itemLink = getItemLinkInfo(list.children[i]);
+    
+                if (itemLink) {
+                    saNode.push(itemLink);
+                }
+            }
+        }
+    }
+
+    aggData.saGraph[path.basename(pathname, ".md")] = saNode;
+}
+
+
+function aggPhase(aggData) {
+    aggData.saUpdateGraph = tidyGraph(aggData.saGraph);
+}
+
+
+function updatePhase(tree, pathname, aggData) {
+    var currNodeName = path.basename(pathname, ".md");
+    var currNodeArcs = aggData.saUpdateGraph[currNodeName];
+
+    if (currNodeArcs.length > 0) {
+        var saListItems = [];
+
+        for (var i = 0; i < currNodeArcs.length; i++) {
+            var linkText = graphKeyToLinkName(currNodeArcs[i]);
+            var linkTarget = currNodeArcs[i] + ".md";
+            var link = unist.makeLink(unist.makeText(linkText), linkTarget);
+            saListItems.push(unist.makeListItem(link));
+        }
+
+        var saHeadingOffset = findSeeAlsoSection(tree);
+
+        if (saHeadingOffset !== -1) {
+            // Skip over non-list parts.
+            var s;
+
+            for (
+                s = saHeadingOffset;
+                (s < tree.children.length) && !unist.isListUnordered(tree.children[s]);
+                s++
+            );
+
+            // Push all elements of the items array as if they were separate elements.
+            Array.prototype.push.apply(tree.children[s].children, saListItems);
+        } else {
+            // This file doesn't currently have a See Also section, so add one at the end.
+            tree.children.push(unist.makeHeading(unist.makeText(seeAlsoHeading), 2));
+            tree.children.push(unist.makeListUnordered(saListItems));
+        }
+    }
+
+    return true;
+}
+
+
+function graphKeyToLinkName(key) {
+    var mainSections = key.split(".");
+    mainSections[0] =  tidyName(mainSections[0]);
+    return mainSections.join(" ");
+}
+
+// Convert an Angular-style name (eg, "card-view") into one with correct spaces and uppercase (eg, "Card view").
+function tidyName(name) {
+    var result = name.replace(/-/g, " ");
+    result = result.substr(0, 1).toUpperCase() + result.substr(1);
+    return result;
+}
+
+
+function makeEmptySAList() {
+    var result = [];
+
+    
+}
+
+
+// Makes link symmetrical between items (ie, if A links to B but not the other way
+// around then it adds the missing link).
+function tidyGraph(graph) {
+    var nodeNames = Object.keys(graph);
+    var result = {};
+
+    for (var n = 0; n < nodeNames.length; n++) {
+        result[nodeNames[n]] = [];
+    }
+
+    for (var n = 0; n < nodeNames.length; n++) {
+        var currNodeName = nodeNames[n];
+
+        var currNodeArcs = graph[currNodeName];
+        
+        for (var a = 0; a < currNodeArcs.length; a++) {
+            var linkedNode = graph[currNodeArcs[a]];
+            var resultNode = result[currNodeArcs[a]];
+
+            if (!linkedNode) {
+                console.log(`Warning: item '${currNodeArcs[a]}' (in See Also section of '${currNodeName}') has no corresponding file`);
+            } else if (linkedNode.indexOf(currNodeName) === -1) {
+                linkedNode.push(currNodeName);
+                resultNode.push(currNodeName);    
+            }
+        }
+    }
+
+    return result;
+}
+
+
+function findSeeAlsoSection(tree) {
+    var i;
+
+    for (i = 0; i < tree.children.length; i++) {
+        var child = tree.children[i];
+
+        if (unist.isHeading(child) && (child.children[0].value.toLowerCase() === seeAlsoHeading.toLowerCase()))
+            return i;
+    }
+
+    return -1;
+}
+
+
+function getItemLinkInfo(listItem) {
+    var linkTarget = listItem.children[0].children[0].url;
+
+    if (linkTarget.startsWith("http:") ||
+        linkTarget.startsWith("#") ||
+        !linkTarget.endsWith(".md"))
+        return null;
+    else
+        return path.basename(linkTarget, ".md");
+}
+
diff --git a/lib/config/DocProcessor/tools/toc.js b/lib/config/DocProcessor/tools/toc.js
new file mode 100644
index 0000000000..de00d7db76
--- /dev/null
+++ b/lib/config/DocProcessor/tools/toc.js
@@ -0,0 +1,93 @@
+var remark = require("remark");
+var tocGenerator = require("mdast-util-toc");
+var replaceSection = require("mdast-util-heading-range");
+
+var unist = require("../unistHelpers");
+
+const contentsHeading = "Contents";
+const minHeadingsForToc = 8;
+const maxTocHeadingDepth = 3;
+
+module.exports = {
+    "initPhase": initPhase,
+    "readPhase": readPhase,
+    "aggPhase": aggPhase,
+    "updatePhase": updatePhase
+}
+
+function initPhase(aggData) {}
+function readPhase(tree, pathname, aggData) {}
+function aggPhase(aggData) {}
+
+
+// Find an existing Contents section or add a new empty one if needed.
+// Returns true if section is present/needed, false if not needed.
+function establishContentsSection(mdTree) {
+    var firstL2HeadingPos = -1;
+    var numTocHeadings = 0;
+    var foundContentsHeading = false;
+
+    for (var i = 0; i < mdTree.children.length; i++) {
+        var child = mdTree.children[i];
+        
+        // Look through all headings.
+        if (child.type === "heading") {
+
+            if ((child.depth > 1) && (child.depth <= maxTocHeadingDepth)) {
+                numTocHeadings++;
+            }
+
+            if (child.depth === 2) {
+                // Note where the first L2 heading is.
+                if (firstL2HeadingPos === -1) {
+                    firstL2HeadingPos = i;
+                }
+
+                // If it is also a Contents heading then we're done. We don't include the
+                // Contents heading itself within the ToC, so decrement the count for that.
+                if ((child.children[0].value === contentsHeading) && !foundContentsHeading) {
+                    foundContentsHeading = true;
+                    numTocHeadings--;
+                }
+            }
+        }
+    }
+
+    // If we get here then a level 2 Contents heading was not found.
+    // If there are enough headings for a ToC to be necessary then
+    // add one in the right place.
+    if (!foundContentsHeading) {
+        var newContsHeading = unist.makeHeading(unist.makeText(contentsHeading), 2);
+
+        // If we found another L2 heading then add the Contents in just before it.
+        if (firstL2HeadingPos != -1) {
+            mdTree.children.splice(firstL2HeadingPos, 0, newContsHeading);
+        } else {
+            // Otherwise, the unlikely situation where a ToC is required but there
+            // are no L2 headings! Add it as the second element in the document.
+            mdTree.children.splice(1, 0, newContsHeading);
+        }
+    }
+
+    return numTocHeadings;
+}
+
+function updatePhase(tree, pathname, aggData) {
+// If we need a contents section then add one or update the existing one.
+    var numTocHeadings = establishContentsSection(tree);
+
+    if (numTocHeadings >= minHeadingsForToc) {
+        var newToc = tocGenerator(tree, {heading: contentsHeading, maxDepth: 3});
+
+        replaceSection(tree, contentsHeading, function(before, oldSection, after) {
+            return [before, newToc.map, after];
+        });
+    } else {
+        // Otherwise, we don't need one, so remove any existing one.
+        replaceSection(tree, contentsHeading, function(before, oldSection, after) {
+            return [after];
+        });
+    }
+
+    return true;
+}
\ No newline at end of file
diff --git a/lib/config/DocProcessor/tools/tscProps.js b/lib/config/DocProcessor/tools/tscProps.js
new file mode 100644
index 0000000000..505f7b0314
--- /dev/null
+++ b/lib/config/DocProcessor/tools/tscProps.js
@@ -0,0 +1,208 @@
+"use strict";
+exports.__esModule = true;
+var ts = require("typescript");
+var path = require("path");
+var heading = require("mdast-util-heading-range");
+var remark = require("remark");
+var unist = require("../unistHelpers");
+var typescript_1 = require("typescript");
+function initPhase(aggData) {
+}
+exports.initPhase = initPhase;
+function readPhase(tree, pathname, aggData) {
+}
+exports.readPhase = readPhase;
+function aggPhase(aggData) {
+}
+exports.aggPhase = aggPhase;
+function updatePhase(tree, pathname, aggData) {
+    var fileNameNoSuffix = path.basename(pathname, ".md");
+    if (fileNameNoSuffix.match(/component/)) {
+        var srcData = aggData.srcData[fileNameNoSuffix];
+        if (srcData) {
+            var srcPath = srcData.path;
+            var className = fixCompodocFilename(fileNameNoSuffix);
+            var inputs = [];
+            var outputs = [];
+            getPropDocData(path.resolve(".", srcPath), className, inputs, outputs);
+            var inTable_1 = buildInputsTable(inputs);
+            var outTable_1 = buildOutputsTable(outputs);
+            if (inTable_1) {
+                heading(tree, "Properties", function (before, section, after) {
+                    return [before, inTable_1, after];
+                });
+            }
+            if (outTable_1) {
+                heading(tree, "Events", function (before, section, after) {
+                    return [before, outTable_1, after];
+                });
+            }
+        }
+    }
+    return true;
+}
+exports.updatePhase = updatePhase;
+function initialCap(str) {
+    return str[0].toUpperCase() + str.substr(1);
+}
+function fixCompodocFilename(rawName) {
+    var name = rawName.replace(/\]|\(|\)/g, '');
+    var fileNameSections = name.split('.');
+    var compNameSections = fileNameSections[0].split('-');
+    var outCompName = '';
+    for (var i = 0; i < compNameSections.length; i++) {
+        outCompName = outCompName + initialCap(compNameSections[i]);
+    }
+    var itemTypeIndicator = '';
+    if (fileNameSections.length > 1) {
+        itemTypeIndicator = initialCap(fileNameSections[1]);
+    }
+    var finalName = outCompName + itemTypeIndicator;
+    return finalName;
+}
+function getPropDocData(srcPath, docClassName, inputs, outputs) {
+    var prog = ts.createProgram([srcPath], {
+        target: ts.ScriptTarget.ES5, module: ts.ModuleKind.CommonJS
+    });
+    var sourceFiles = prog.getSourceFiles();
+    var checker = prog.getTypeChecker();
+    for (var i = 0; i < sourceFiles.length; i++) {
+        if (!sourceFiles[i].isDeclarationFile)
+            ts.forEachChild(sourceFiles[i], visit);
+    }
+    function visit(node) {
+        if (!isNodeExported(node))
+            return;
+        if (ts.isClassDeclaration(node) && node.name) {
+            var classDec = node;
+            var sourceFile = classDec.getSourceFile();
+            if (classDec.name.escapedText === docClassName) {
+                getPropDataFromClassChain(checker, classDec, inputs, outputs);
+            }
+        }
+    }
+}
+// Get properties/events from main class and all inherited classes.
+function getPropDataFromClassChain(checker, classDec, inputs, outputs) {
+    // Main class
+    getPropDataFromClass(checker, classDec, inputs, outputs);
+    // Inherited classes
+    for (var _i = 0, _a = classDec.heritageClauses; _i < _a.length; _i++) {
+        var hc = _a[_i];
+        var hcType = checker.getTypeFromTypeNode(hc.types[0]);
+        console.log(checker.getFullyQualifiedName(hcType.symbol));
+        for (var _b = 0, _c = hcType.symbol.declarations; _b < _c.length; _b++) {
+            var dec = _c[_b];
+            if (typescript_1.isClassDeclaration(dec)) {
+                getPropDataFromClassChain(checker, dec, inputs, outputs);
+            }
+        }
+    }
+}
+function getPropDataFromClass(checker, classDec, inputs, outputs) {
+    var sourceFile = classDec.getSourceFile();
+    for (var i = 0; i < classDec.members.length; i++) {
+        var member = classDec.members[i];
+        if (ts.isPropertyDeclaration(member) ||
+            ts.isGetAccessorDeclaration(member) ||
+            ts.isSetAccessorDeclaration(member)) {
+            var prop = member;
+            var mods = ts.getCombinedModifierFlags(prop);
+            var nonPrivate = (mods & ts.ModifierFlags.Private) === 0;
+            var memSymbol = checker.getSymbolAtLocation(prop.name);
+            if (nonPrivate && memSymbol && prop.decorators) {
+                var name_1 = memSymbol.getName();
+                var initializer = "";
+                if (prop.initializer) {
+                    initializer = prop.initializer.getText(sourceFile);
+                }
+                var doc = ts.displayPartsToString(memSymbol.getDocumentationComment(checker));
+                doc = doc.replace(/\r\n/g, " ");
+                var propType = checker.typeToString(checker.getTypeOfSymbolAtLocation(memSymbol, memSymbol.valueDeclaration));
+                var dec = prop.decorators[0].getText(sourceFile);
+                if (dec.match(/@Input/)) {
+                    inputs.push({
+                        "name": name_1,
+                        "type": propType,
+                        "init": initializer,
+                        "docText": doc
+                    });
+                }
+                else if (dec.match(/@Output/)) {
+                    outputs.push({
+                        "name": name_1,
+                        "type": propType,
+                        "docText": doc
+                    });
+                }
+            }
+        }
+    }
+}
+function buildInputsTable(inputs) {
+    if (inputs.length === 0) {
+        return null;
+    }
+    var rows = [
+        unist.makeTableRow([
+            unist.makeTableCell([unist.makeText("Name")]),
+            unist.makeTableCell([unist.makeText("Type")]),
+            // unist.makeTableCell([unist.makeText("Default value")]),
+            unist.makeTableCell([unist.makeText("Description")])
+        ])
+    ];
+    for (var i = 0; i < inputs.length; i++) {
+        var pName = inputs[i].name;
+        var pType = inputs[i].type;
+        var pDefault = inputs[i].init || "";
+        var pDesc = inputs[i].docText || "";
+        if (pDesc) {
+            //pDesc = pDesc.trim().replace(/[\n\r]+/, " ");
+            pDesc = pDesc.replace(/[\n\r]+/, " ");
+        }
+        var descCellContent = remark().parse(pDesc).children;
+        if (pDefault) {
+            descCellContent.push(unist.makeHTML("<br/>"));
+            descCellContent.push(unist.makeText(" Default value: "));
+            descCellContent.push(unist.makeInlineCode(pDefault));
+        }
+        var cells = [
+            unist.makeTableCell([unist.makeText(pName)]),
+            unist.makeTableCell([unist.makeInlineCode(pType)]),
+            //unist.makeTableCell([unist.makeText(pDefault)]),
+            unist.makeTableCell(descCellContent)
+        ];
+        rows.push(unist.makeTableRow(cells));
+    }
+    return unist.makeTable([null, null, null, null], rows);
+}
+function buildOutputsTable(outputs) {
+    if (outputs.length === 0) {
+        return null;
+    }
+    var rows = [
+        unist.makeTableRow([
+            unist.makeTableCell([unist.makeText("Name")]),
+            unist.makeTableCell([unist.makeText("Type")]),
+            unist.makeTableCell([unist.makeText("Description")])
+        ])
+    ];
+    for (var i = 0; i < outputs.length; i++) {
+        var eName = outputs[i].name;
+        var eType = outputs[i].type;
+        var eDesc = outputs[i].docText || "";
+        if (eDesc) {
+            eDesc = eDesc.trim().replace(/[\n\r]+/, ' ');
+        }
+        var cells = [
+            unist.makeTableCell([unist.makeText(eName)]),
+            unist.makeTableCell([unist.makeInlineCode(eType)]),
+            unist.makeTableCell(remark().parse(eDesc).children)
+        ];
+        rows.push(unist.makeTableRow(cells));
+    }
+    return unist.makeTable([null, null, null], rows);
+}
+function isNodeExported(node) {
+    return (ts.getCombinedModifierFlags(node) & ts.ModifierFlags.Export) !== 0 || (!!node.parent && node.parent.kind === ts.SyntaxKind.SourceFile);
+}
diff --git a/lib/config/DocProcessor/tools/tscProps.ts b/lib/config/DocProcessor/tools/tscProps.ts
new file mode 100644
index 0000000000..eda11a78d3
--- /dev/null
+++ b/lib/config/DocProcessor/tools/tscProps.ts
@@ -0,0 +1,278 @@
+import * as ts from "typescript";
+import * as fs from "fs";
+import * as path from "path";
+import * as program from "commander";
+
+import * as heading from "mdast-util-heading-range";
+import * as remark from "remark";
+
+import * as unist from "../unistHelpers";
+import { JsxEmit, isClassDeclaration } from "typescript";
+
+export function initPhase(aggData) {
+}
+
+export function readPhase(tree, pathname, aggData) {
+}
+
+export function aggPhase(aggData) {
+}
+
+export function updatePhase(tree, pathname, aggData) {
+    let fileNameNoSuffix = path.basename(pathname, ".md");
+
+    if (fileNameNoSuffix.match(/component/)) {
+        let srcData = aggData.srcData[fileNameNoSuffix];
+
+        if (srcData) {
+            let srcPath = srcData.path;
+            let className = fixCompodocFilename(fileNameNoSuffix);
+            
+            let inputs = [];
+            let outputs = [];
+            getPropDocData(path.resolve(".", srcPath), className, inputs, outputs);
+
+            let inTable = buildInputsTable(inputs);
+            let outTable = buildOutputsTable(outputs);
+
+            if (inTable) {
+                heading(tree, "Properties", (before, section, after) => {
+                    return [before, inTable, after];
+                });
+            }
+
+            if (outTable) {
+                heading(tree, "Events", (before, section, after) => {
+                    return [before, outTable, after];
+                });
+            }
+        }
+    }
+
+    return true;
+}
+
+
+function initialCap(str: string) {
+    return str[0].toUpperCase() + str.substr(1);
+}
+
+
+function fixCompodocFilename(rawName: string) {
+	var name = rawName.replace(/\]|\(|\)/g, '');
+	
+    var fileNameSections = name.split('.');
+    var compNameSections = fileNameSections[0].split('-');
+    
+    var outCompName = '';
+    
+    for (var i = 0; i < compNameSections.length; i++) {
+        outCompName = outCompName + initialCap(compNameSections[i]);
+    }
+    
+    var itemTypeIndicator = '';
+    
+    if (fileNameSections.length > 1) {
+        itemTypeIndicator = initialCap(fileNameSections[1]);
+    }
+	
+    var finalName = outCompName + itemTypeIndicator;
+	
+    return finalName;
+}
+
+
+function getPropDocData(srcPath: string, docClassName: string, inputs: any[], outputs: any[]) {
+    let prog = ts.createProgram([srcPath], {
+        target: ts.ScriptTarget.ES5, module: ts.ModuleKind.CommonJS
+    });
+
+    let sourceFiles = prog.getSourceFiles();
+    let checker = prog.getTypeChecker();
+
+    for (var i = 0; i < sourceFiles.length; i++) {
+        if (!sourceFiles[i].isDeclarationFile)
+            ts.forEachChild(sourceFiles[i], visit);
+    }
+
+    function visit(node: ts.Node) {
+        if (!isNodeExported(node))
+            return;
+        
+        if (ts.isClassDeclaration(node) && node.name) {
+            let classDec: ts.ClassDeclaration = node;
+            let sourceFile = classDec.getSourceFile();
+    
+            if (classDec.name.escapedText === docClassName) {
+                getPropDataFromClassChain(checker, classDec, inputs, outputs);
+            }
+        }
+    }
+}
+
+
+// Get properties/events from main class and all inherited classes.
+function getPropDataFromClassChain(
+    checker: ts.TypeChecker,
+    classDec: ts.ClassDeclaration,
+    inputs: any[],
+    outputs: any[]
+){ 
+    // Main class
+    getPropDataFromClass(checker, classDec, inputs, outputs);
+
+    // Inherited classes
+    for(const hc of classDec.heritageClauses) {
+        let hcType = checker.getTypeFromTypeNode(hc.types[0]);
+        
+        console.log(checker.getFullyQualifiedName(hcType.symbol));
+
+        for (const dec of hcType.symbol.declarations) {
+            if (isClassDeclaration(dec)) {
+                getPropDataFromClassChain(checker, dec, inputs, outputs);
+            }
+        }
+    }
+
+}
+
+
+function getPropDataFromClass(
+    checker: ts.TypeChecker,
+    classDec: ts.ClassDeclaration,
+    inputs: any[],
+    outputs: any[]
+){
+    let sourceFile = classDec.getSourceFile();
+
+    for (var i = 0; i < classDec.members.length; i++) {
+        let member = classDec.members[i];
+
+        if (ts.isPropertyDeclaration(member) ||
+            ts.isGetAccessorDeclaration(member) ||
+            ts.isSetAccessorDeclaration(member)) {
+            let prop: ts.PropertyDeclaration = member;
+
+            let mods = ts.getCombinedModifierFlags(prop);
+            let nonPrivate = (mods & ts.ModifierFlags.Private) === 0;
+            let memSymbol = checker.getSymbolAtLocation(prop.name);
+            
+            if (nonPrivate && memSymbol && prop.decorators) {
+                let name = memSymbol.getName();
+                let initializer = "";
+                
+                if (prop.initializer) {
+                    initializer = prop.initializer.getText(sourceFile);
+                }
+                
+                let doc = ts.displayPartsToString(memSymbol.getDocumentationComment(checker));
+                doc = doc.replace(/\r\n/g, " ");
+                
+                let propType = checker.typeToString(checker.getTypeOfSymbolAtLocation(memSymbol, memSymbol.valueDeclaration!));
+                
+                let dec = prop.decorators[0].getText(sourceFile);
+            
+                if (dec.match(/@Input/)) {
+                    inputs.push({
+                        "name": name,
+                        "type": propType,
+                        "init": initializer,
+                        "docText": doc
+                    });
+                } else if (dec.match(/@Output/)) {
+                    outputs.push({
+                        "name": name,
+                        "type": propType,
+                        "docText": doc
+                    });
+                }
+            }
+        }
+    }
+}
+
+
+function buildInputsTable(inputs: any[]) {
+    if (inputs.length === 0) {
+        return null;
+    }
+
+    var rows = [
+        unist.makeTableRow([
+            unist.makeTableCell([unist.makeText("Name")]),
+            unist.makeTableCell([unist.makeText("Type")]),
+           // unist.makeTableCell([unist.makeText("Default value")]),
+            unist.makeTableCell([unist.makeText("Description")])
+        ])
+    ];
+    
+    for (var i = 0; i < inputs.length; i++) {
+        var pName = inputs[i].name;
+        var pType = inputs[i].type;
+        var pDefault = inputs[i].init || "";
+        var pDesc = inputs[i].docText || "";
+
+        if (pDesc) {
+            //pDesc = pDesc.trim().replace(/[\n\r]+/, " ");
+            pDesc = pDesc.replace(/[\n\r]+/, " ");
+        }
+
+        var descCellContent = remark().parse(pDesc).children;
+
+        if (pDefault) {
+            descCellContent.push(unist.makeHTML("<br/>"));
+            descCellContent.push(unist.makeText(" Default value: "));
+            descCellContent.push(unist.makeInlineCode(pDefault));
+        }
+
+        var cells = [
+            unist.makeTableCell([unist.makeText(pName)]),
+            unist.makeTableCell([unist.makeInlineCode(pType)]),
+            //unist.makeTableCell([unist.makeText(pDefault)]),
+            unist.makeTableCell(descCellContent)
+        ];
+
+        rows.push(unist.makeTableRow(cells));
+    }
+
+    return unist.makeTable([null, null, null, null], rows);
+}
+
+
+function buildOutputsTable(outputs: any[]) {
+    if (outputs.length === 0) {
+        return null;
+    }
+
+    var rows = [
+        unist.makeTableRow([
+            unist.makeTableCell([unist.makeText("Name")]),
+            unist.makeTableCell([unist.makeText("Type")]),
+            unist.makeTableCell([unist.makeText("Description")])
+        ])
+    ];
+    
+    for (var i = 0; i < outputs.length; i++){
+        var eName = outputs[i].name;
+        var eType = outputs[i].type;
+        var eDesc = outputs[i].docText || "";
+
+        if (eDesc) {
+            eDesc = eDesc.trim().replace(/[\n\r]+/, ' ');
+        }
+
+        var cells = [
+            unist.makeTableCell([unist.makeText(eName)]),
+            unist.makeTableCell([unist.makeInlineCode(eType)]),
+            unist.makeTableCell(remark().parse(eDesc).children)
+        ];
+
+        rows.push(unist.makeTableRow(cells));
+    }
+
+    return unist.makeTable([null, null, null], rows);
+}
+
+function isNodeExported(node: ts.Node): boolean {
+    return (ts.getCombinedModifierFlags(node) & ts.ModifierFlags.Export) !== 0 || (!!node.parent && node.parent.kind === ts.SyntaxKind.SourceFile);
+}
\ No newline at end of file
diff --git a/lib/config/DocProcessor/unistHelpers.js b/lib/config/DocProcessor/unistHelpers.js
new file mode 100644
index 0000000000..597ae764d4
--- /dev/null
+++ b/lib/config/DocProcessor/unistHelpers.js
@@ -0,0 +1,122 @@
+module.exports = {
+
+    makeRoot: function (children) {
+        return {
+            "type": "root",
+            "children": children
+        };
+    },
+
+    makeText: function (textVal) {
+        return {
+            "type": "text",
+            "value": textVal
+        };
+    },
+
+    makeEmphasis: function (content) {
+        return {
+            "type": "emphasis",
+            "children": content
+        };
+    },
+
+    makeStrong: function (content) {
+        return {
+            "type": "strong",
+            "children": content
+        };
+    },
+
+    makeHeading: function (caption, depth) {
+        return {
+            "type": "heading",
+            "depth": depth,
+            "children": [caption]
+        };
+    },
+
+    makeLink: function (caption, url) {
+        return {
+            "type": "link",
+            "url": url,
+            "children": [ caption ]
+        };
+    },
+
+    makeListItem: function (itemValue) {
+        return {
+            "type": "listItem",
+            "loose": false,
+            "children": [ itemValue ]
+        };
+    },
+
+    makeListUnordered: function (itemsArray) {
+        return {
+            "type": "list",
+            "ordered": false,
+            "children": itemsArray,
+            "loose": false
+        };
+    },
+
+    makeParagraph: function (itemsArray) {
+        return {
+            "type": "paragraph",
+            "children": itemsArray
+        }
+    },
+
+    makeTable: function (colAlignArray, rowArray) {
+        return {
+            "type": "table",
+            "align": colAlignArray,
+            "children": rowArray
+        };
+    },
+
+    makeTableRow: function (cellArray) {
+        return {
+            "type": "tableRow",
+            "children": cellArray
+        };
+    },
+
+    makeTableCell: function (content) {
+        return {
+            "type": "tableCell",
+            "children": content
+        };
+    },
+
+    makeInlineCode: function (codeText) {
+        return {
+            "type": "inlineCode",
+            "value": codeText
+        }
+    },
+
+    makeHTML: function (htmlText) {
+        return {
+            "type": "html",
+            "value": htmlText
+        };
+    },
+
+    isHeading: function (node) {
+        return node.type === "heading";
+    },
+
+    isListUnordered: function (node) {
+        return (node.type === "list") && !node.ordered;
+    },
+
+    isParagraph: function (node) {
+        return node.type === "paragraph";
+    },
+
+    isText: function (node) {
+        return node.type === "text";
+    }
+}
\ No newline at end of file
diff --git a/lib/config/karma.conf-all.js b/lib/config/karma.conf-all.js
index e3fbc071e3..540f03f4fe 100644
--- a/lib/config/karma.conf-all.js
+++ b/lib/config/karma.conf-all.js
@@ -1,4 +1,5 @@
 const webpackCoverage = require('./webpack.coverage');
+const webpackTest= require('./webpack.test');
 
 module.exports = function (config) {
     var _config = {
@@ -46,7 +47,7 @@ module.exports = function (config) {
             {pattern: './config/app.config.json', included: false, served: true, watched: false}
         ],
 
-        webpack: webpackCoverage(config),
+        webpack: (config.mode === 'coverage') ? webpackCoverage(config) : webpackTest(config),
 
         webpackMiddleware: {
             noInfo: true,
@@ -69,11 +70,9 @@ module.exports = function (config) {
 
         autoWatch: false,
 
-        captureTimeout: 4800000,
-        browserDisconnectTimeout: 4800000,
-        browserDisconnectTolerance: 10,
-        browserNoActivityTimeout: 3000000,
-
+        browserDisconnectTimeout: 200000,
+        browserNoActivityTimeout: 2400000,
+        captureTimeout: 1200000,
         browsers: ['Chrome'],
 
         // Karma plugins loaded
@@ -114,10 +113,5 @@ module.exports = function (config) {
         }
     };
 
-    if (process.env.TRAVIS) {
-        config.browsers = ['ChromeHeadless'];
-        config.reporters = ['dots', 'coverage'];
-    }
-
     config.set(_config);
 };
diff --git a/lib/config/webpack.coverage.js b/lib/config/webpack.coverage.js
index fa4d1dbc42..4632ecdad5 100644
--- a/lib/config/webpack.coverage.js
+++ b/lib/config/webpack.coverage.js
@@ -1,15 +1,25 @@
 const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
-const testConfig = require('./webpack.test.js');
+const commonConfig = require('./webpack.common.js');
 const helpers = require('./helpers');
 
 module.exports = function (config) {
-    return webpackMerge(testConfig, {
+    return webpackMerge(commonConfig, {
 
         devtool: 'inline-source-map',
 
         module: {
             rules: [
+                {
+                    test: /\.(txt|pdf)$/,
+                    loader: 'file-loader',
+                    query: {
+                        name: '[path][name].[ext]',
+                        outputPath: (url)=> {
+                        return url.replace('src', 'dist');
+                        }
+                    }
+                },
                 {
                     enforce: 'post',
                     test: /^(?!(.*spec|index|.*mock|.*model|.*event)).*\.ts?$/,
diff --git a/lib/config/webpack.test.js b/lib/config/webpack.test.js
index 5a54422886..364d4b5bf9 100644
--- a/lib/config/webpack.test.js
+++ b/lib/config/webpack.test.js
@@ -1,22 +1,24 @@
 const webpackMerge = require('webpack-merge');
 const commonConfig = require('./webpack.common.js');
 
-module.exports = webpackMerge(commonConfig, {
+module.exports = function (config) {
+    return webpackMerge(commonConfig, {
 
-    devtool: 'inline-source-map',
+        devtool: 'inline-source-map',
 
-    module: {
-        rules: [
-            {
-                test: /\.(txt|pdf)$/,
-                loader: 'file-loader',
-                query: {
-                    name: '[path][name].[ext]',
-                    outputPath: (url)=> {
+        module: {
+            rules: [
+                {
+                    test: /\.(txt|pdf)$/,
+                    loader: 'file-loader',
+                    query: {
+                        name: '[path][name].[ext]',
+                        outputPath: (url)=> {
                         return url.replace('src', 'dist');
+                        }
                     }
                 }
-            }
-        ]
-    }
-});
+            ]
+        }
+    });
+};
diff --git a/lib/content-services/breadcrumb/breadcrumb.component.ts b/lib/content-services/breadcrumb/breadcrumb.component.ts
index ae63523d48..9679c7690e 100644
--- a/lib/content-services/breadcrumb/breadcrumb.component.ts
+++ b/lib/content-services/breadcrumb/breadcrumb.component.ts
@@ -30,15 +30,26 @@ import { DocumentListComponent } from '../document-list';
 })
 export class BreadcrumbComponent implements OnChanges {
 
+    /** Active node, builds UI based on folderNode.path.elements collection. */
     @Input()
     folderNode: MinimalNodeEntryEntity = 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.
+     */
     @Input()
     root: string = null;
 
+    /** (optional) The id of the root element. You can use this property
+     * to set a custom element the breadcrumb should start with.
+     */
     @Input()
     rootId: string = null;
 
+    /** (optional) Document List component to operate with. The list will
+     * update when the breadcrumb is clicked.
+     */
     @Input()
     target: DocumentListComponent;
 
@@ -48,6 +59,7 @@ export class BreadcrumbComponent implements OnChanges {
         return !!this.root;
     }
 
+    /** Emitted when the user clicks on a breadcrumb. */
     @Output()
     navigate: EventEmitter<PathElementEntity> = new EventEmitter<PathElementEntity>();
 
diff --git a/lib/content-services/content-metadata/components/content-metadata-card/content-metadata-card.component.html b/lib/content-services/content-metadata/components/content-metadata-card/content-metadata-card.component.html
new file mode 100644
index 0000000000..f0a23fc436
--- /dev/null
+++ b/lib/content-services/content-metadata/components/content-metadata-card/content-metadata-card.component.html
@@ -0,0 +1,28 @@
+<mat-card *ngIf="node">
+    <mat-card-content>
+        <adf-content-metadata
+            [node]="node"
+            [displayEmpty]="displayEmpty"
+            [editable]="editable"
+            [expanded]="expanded"
+            [preset]="preset">
+        </adf-content-metadata>
+    </mat-card-content>
+    <mat-card-footer class="adf-content-metadata-card-footer" fxLayout="row" fxLayoutAlign="space-between stretch">
+        <div>
+            <button mat-icon-button (click)="toggleEdit()" data-automation-id="mata-data-card-toggle-edit">
+                <mat-icon>mode_edit</mat-icon>
+            </button>
+        </div>
+        <button mat-button (click)="toggleExpanded()" data-automation-id="mata-data-card-toggle-expand">
+            <ng-container *ngIf="!expanded">
+                <span data-automation-id="mata-data-card-toggle-expand-label">{{ 'ADF_VIEWER.SIDEBAR.METADATA.MORE_INFORMATION' | translate }}</span>
+                <mat-icon>keyboard_arrow_down</mat-icon>
+            </ng-container>
+            <ng-container *ngIf="expanded">
+                <span data-automation-id="mata-data-card-toggle-expand-label">{{ 'ADF_VIEWER.SIDEBAR.METADATA.LESS_INFORMATION' | translate }}</span>
+                <mat-icon>keyboard_arrow_up</mat-icon>
+            </ng-container>
+        </button>
+    </mat-card-footer>
+</mat-card>
diff --git a/lib/content-services/content-metadata/content-metadata-card.component.scss b/lib/content-services/content-metadata/components/content-metadata-card/content-metadata-card.component.scss
similarity index 68%
rename from lib/content-services/content-metadata/content-metadata-card.component.scss
rename to lib/content-services/content-metadata/components/content-metadata-card/content-metadata-card.component.scss
index 9426378da6..81a5a73fd4 100644
--- a/lib/content-services/content-metadata/content-metadata-card.component.scss
+++ b/lib/content-services/content-metadata/components/content-metadata-card/content-metadata-card.component.scss
@@ -3,9 +3,18 @@
     $background: map-get($theme, background);
     $foreground: map-get($theme, foreground);
 
-    .adf-viewer-default-sidebar {
+    .adf-content-metadata-card {
 
-        &-card-footer.mat-card-footer {
+        .mat-card {
+            padding: 0;
+
+            .mat-card-content {
+                margin-bottom: 0;
+            }
+        }
+
+        &-footer.mat-card-footer {
+            margin: 0;
             padding: 8px 12px;
             border-top: 1px solid mat-color($foreground, text, 0.07);
 
diff --git a/lib/content-services/content-metadata/components/content-metadata-card/content-metadata-card.component.spec.ts b/lib/content-services/content-metadata/components/content-metadata-card/content-metadata-card.component.spec.ts
new file mode 100644
index 0000000000..04522dacc0
--- /dev/null
+++ b/lib/content-services/content-metadata/components/content-metadata-card/content-metadata-card.component.spec.ts
@@ -0,0 +1,172 @@
+/*!
+ * @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.
+ */
+
+/*tslint:disable: ban*/
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { MinimalNodeEntryEntity } from 'alfresco-js-api';
+import { ContentMetadataCardComponent } from './content-metadata-card.component';
+import { ContentMetadataComponent } from '../content-metadata/content-metadata.component';
+import { MatExpansionModule, MatCardModule, MatButtonModule, MatIconModule } from '@angular/material';
+import { ContentMetadataService } from '../../services/content-metadata.service';
+import { BasicPropertiesService } from '../../services/basic-properties.service';
+import { PropertyDescriptorLoaderService } from '../../services/properties-loader.service';
+import { PropertyDescriptorsService } from '../../services/property-descriptors.service';
+import { AspectWhiteListService } from '../../services/aspect-whitelist.service';
+import { AlfrescoApiService } from '@alfresco/adf-core';
+
+describe('ContentMetadataCardComponent', () => {
+
+    let component: ContentMetadataCardComponent,
+        fixture: ComponentFixture<ContentMetadataCardComponent>,
+        node: MinimalNodeEntryEntity,
+        preset = 'custom-preset';
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                MatExpansionModule,
+                MatCardModule,
+                MatButtonModule,
+                MatIconModule
+            ],
+            declarations: [
+                ContentMetadataCardComponent,
+                ContentMetadataComponent
+            ],
+            providers: [
+                ContentMetadataService,
+                BasicPropertiesService,
+                PropertyDescriptorLoaderService,
+                PropertyDescriptorsService,
+                AspectWhiteListService,
+                AlfrescoApiService
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(ContentMetadataCardComponent);
+        component = fixture.componentInstance;
+        node = <MinimalNodeEntryEntity> {
+            aspectNames: [],
+            content: {},
+            properties: {},
+            createdByUser: {},
+            modifiedByUser: {}
+        };
+
+        component.node = node;
+        component.preset = preset;
+        fixture.detectChanges();
+    });
+
+    afterEach(() => {
+        fixture.destroy();
+        TestBed.resetTestingModule();
+    });
+
+    it('should have displayEmpty input param as false by default', () => {
+        expect(component.displayEmpty).toBe(false);
+    });
+
+    it('should pass through the node to the underlying component', () => {
+        const contentMetadataComponent = fixture.debugElement.query(By.directive(ContentMetadataComponent)).componentInstance;
+
+        expect(contentMetadataComponent.node).toBe(node);
+    });
+
+    it('should pass through the preset to the underlying component', () => {
+        const contentMetadataComponent = fixture.debugElement.query(By.directive(ContentMetadataComponent)).componentInstance;
+
+        expect(contentMetadataComponent.preset).toBe(preset);
+    });
+
+    it('should pass through the preset to the underlying component', () => {
+        component.displayEmpty = true;
+        fixture.detectChanges();
+        const contentMetadataComponent = fixture.debugElement.query(By.directive(ContentMetadataComponent)).componentInstance;
+
+        expect(contentMetadataComponent.displayEmpty).toBe(true);
+    });
+
+    it('should pass through the editable to the underlying component', () => {
+        component.editable = true;
+        fixture.detectChanges();
+        const contentMetadataComponent = fixture.debugElement.query(By.directive(ContentMetadataComponent)).componentInstance;
+
+        expect(contentMetadataComponent.editable).toBe(true);
+    });
+
+    it('should pass through the expanded to the underlying component', () => {
+        component.expanded = true;
+        fixture.detectChanges();
+        const contentMetadataComponent = fixture.debugElement.query(By.directive(ContentMetadataComponent)).componentInstance;
+
+        expect(contentMetadataComponent.expanded).toBe(true);
+    });
+
+    it('should not show anything if node is not present', () => {
+        component.node = undefined;
+        fixture.detectChanges();
+
+        const contentMetadataComponent = fixture.debugElement.query(By.directive(ContentMetadataComponent));
+
+        expect(contentMetadataComponent).toBeNull();
+    });
+
+    it('should toggle editable by clicking on the button', () => {
+        component.editable = true;
+        fixture.detectChanges();
+
+        const button = fixture.debugElement.query(By.css('[data-automation-id="mata-data-card-toggle-edit"]'));
+        button.triggerEventHandler('click', {});
+        fixture.detectChanges();
+
+        expect(component.editable).toBe(false);
+    });
+
+    it('should toggle expanded by clicking on the button', () => {
+        component.expanded = true;
+        fixture.detectChanges();
+
+        const button = fixture.debugElement.query(By.css('[data-automation-id="mata-data-card-toggle-expand"]'));
+        button.triggerEventHandler('click', {});
+        fixture.detectChanges();
+
+        expect(component.expanded).toBe(false);
+    });
+
+    it('should have the proper text on button while collapsed', () => {
+        component.expanded = false;
+        fixture.detectChanges();
+
+        const buttonLabel = fixture.debugElement.query(By.css('[data-automation-id="mata-data-card-toggle-expand-label"]'));
+
+        expect(buttonLabel.nativeElement.innerText.trim()).toBe('ADF_VIEWER.SIDEBAR.METADATA.MORE_INFORMATION');
+    });
+
+    it('should have the proper text on button while collapsed', () => {
+        component.expanded = true;
+        fixture.detectChanges();
+
+        const buttonLabel = fixture.debugElement.query(By.css('[data-automation-id="mata-data-card-toggle-expand-label"]'));
+
+        expect(buttonLabel.nativeElement.innerText.trim()).toBe('ADF_VIEWER.SIDEBAR.METADATA.LESS_INFORMATION');
+    });
+});
diff --git a/lib/content-services/content-metadata/content-metadata-card.component.ts b/lib/content-services/content-metadata/components/content-metadata-card/content-metadata-card.component.ts
similarity index 85%
rename from lib/content-services/content-metadata/content-metadata-card.component.ts
rename to lib/content-services/content-metadata/components/content-metadata-card/content-metadata-card.component.ts
index 5021a57c01..fc1a6b5f23 100644
--- a/lib/content-services/content-metadata/content-metadata-card.component.ts
+++ b/lib/content-services/content-metadata/components/content-metadata-card/content-metadata-card.component.ts
@@ -18,19 +18,23 @@
 import { Component, Input, ViewEncapsulation } from '@angular/core';
 import { MinimalNodeEntryEntity } from 'alfresco-js-api';
 
-const PROPERTY_COUNTER_WHILE_COLLAPSED = 5;
-
 @Component({
     selector: 'adf-content-metadata-card',
     templateUrl: './content-metadata-card.component.html',
     styleUrls: ['./content-metadata-card.component.scss'],
     encapsulation: ViewEncapsulation.None,
-    host: { 'class': 'adf-viewer-default-sidebar' }
+    host: { 'class': 'adf-content-metadata-card' }
 })
 export class ContentMetadataCardComponent {
     @Input()
     node: MinimalNodeEntryEntity;
 
+    @Input()
+    displayEmpty: boolean = false;
+
+    @Input()
+    preset: string;
+
     editable: boolean = false;
     expanded: boolean = false;
 
@@ -41,8 +45,4 @@ export class ContentMetadataCardComponent {
     toggleExpanded(): void {
         this.expanded = !this.expanded;
     }
-
-    get maxPropertiesToShow(): number {
-        return this.expanded ? Infinity : PROPERTY_COUNTER_WHILE_COLLAPSED;
-    }
 }
diff --git a/lib/content-services/content-metadata/components/content-metadata/content-metadata.component.html b/lib/content-services/content-metadata/components/content-metadata/content-metadata.component.html
new file mode 100644
index 0000000000..81cab09477
--- /dev/null
+++ b/lib/content-services/content-metadata/components/content-metadata/content-metadata.component.html
@@ -0,0 +1,43 @@
+<div class="adf-metadata-properties">
+    <mat-accordion displayMode="flat">
+        <mat-expansion-panel [expanded]="!expanded" [hideToggle]="!expanded">
+            <mat-expansion-panel-header>
+                <mat-panel-title>
+                    {{ 'CORE.METADATA.BASIC.HEADER' | translate }}
+                </mat-panel-title>
+            </mat-expansion-panel-header>
+
+            <adf-card-view
+                class="adf-metadata-properties-basic"
+                data-automation-id="adf-metadata-properties-basic"
+                [properties]="basicProperties$ | async"
+                [editable]="editable"
+                [displayEmpty]="displayEmpty">
+            </adf-card-view>
+        </mat-expansion-panel>
+
+        <ng-container *ngIf="expanded">
+            <ng-container *ngIf="aspects$ | async; else loading; let aspects">
+                <div *ngFor="let aspect of aspects" class="adf-metadata-properties-aspect">
+                    <mat-expansion-panel>
+                        <mat-expansion-panel-header>
+                            <mat-panel-title>
+                                {{aspect.title}}
+                            </mat-panel-title>
+                        </mat-expansion-panel-header>
+
+                        <adf-card-view
+                            class="adf-node-aspect-properties"
+                            [properties]="aspect.properties"
+                            [editable]="editable"
+                            [displayEmpty]="displayEmpty">
+                        </adf-card-view>
+                    </mat-expansion-panel>
+                </div>
+            </ng-container>
+            <ng-template #loading>
+                <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+            </ng-template>
+        </ng-container>
+    </mat-accordion>
+</div>
\ No newline at end of file
diff --git a/lib/content-services/content-metadata/components/content-metadata/content-metadata.component.scss b/lib/content-services/content-metadata/components/content-metadata/content-metadata.component.scss
new file mode 100644
index 0000000000..ef15fefd80
--- /dev/null
+++ b/lib/content-services/content-metadata/components/content-metadata/content-metadata.component.scss
@@ -0,0 +1,9 @@
+@mixin adf-content-metadata-theme($theme) {
+    .adf {
+        &-metadata-properties {
+            .mat-expansion-panel:not([class*=mat-elevation-z]) {
+                box-shadow: none;
+            }
+        }
+    }
+}
diff --git a/lib/content-services/content-metadata/components/content-metadata/content-metadata.component.spec.ts b/lib/content-services/content-metadata/components/content-metadata/content-metadata.component.spec.ts
new file mode 100644
index 0000000000..63d63447fd
--- /dev/null
+++ b/lib/content-services/content-metadata/components/content-metadata/content-metadata.component.spec.ts
@@ -0,0 +1,258 @@
+/*!
+ * @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.
+ */
+
+/*tslint:disable: ban*/
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { SimpleChange } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { MinimalNodeEntryEntity } from 'alfresco-js-api';
+import { ContentMetadataComponent } from './content-metadata.component';
+import { MatExpansionModule, MatButtonModule, MatIconModule } from '@angular/material';
+import { ContentMetadataService } from '../../services/content-metadata.service';
+import { BasicPropertiesService } from '../../services/basic-properties.service';
+import { PropertyDescriptorLoaderService } from '../../services/properties-loader.service';
+import { PropertyDescriptorsService } from '../../services/property-descriptors.service';
+import { AspectWhiteListService } from '../../services/aspect-whitelist.service';
+import { AlfrescoApiService } from '@alfresco/adf-core';
+import { CardViewBaseItemModel, CardViewComponent, CardViewUpdateService, NodesApiService, LogService } from '@alfresco/adf-core';
+import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
+import { Observable } from 'rxjs/Observable';
+
+describe('ContentMetadataComponent', () => {
+
+    let component: ContentMetadataComponent,
+        fixture: ComponentFixture<ContentMetadataComponent>,
+        node: MinimalNodeEntryEntity,
+        preset = 'custom-preset';
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                MatExpansionModule,
+                MatButtonModule,
+                MatIconModule
+            ],
+            declarations: [
+                ContentMetadataComponent
+            ],
+            providers: [
+                ContentMetadataService,
+                BasicPropertiesService,
+                PropertyDescriptorLoaderService,
+                PropertyDescriptorsService,
+                AspectWhiteListService,
+                AlfrescoApiService,
+                NodesApiService,
+                { provide: LogService, useValue: { error: jasmine.createSpy('error') } }
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(ContentMetadataComponent);
+        component = fixture.componentInstance;
+        node = <MinimalNodeEntryEntity> {
+            id: 'node-id',
+            aspectNames: [],
+            content: {},
+            properties: {},
+            createdByUser: {},
+            modifiedByUser: {}
+        };
+
+        component.node = node;
+        component.preset = preset;
+        fixture.detectChanges();
+    });
+
+    afterEach(() => {
+        fixture.destroy();
+        TestBed.resetTestingModule();
+    });
+
+    describe('Default input param values', () => {
+
+        it('should have editable input param as false by default', () => {
+            expect(component.editable).toBe(false);
+        });
+
+        it('should have displayEmpty input param as false by default', () => {
+            expect(component.displayEmpty).toBe(false);
+        });
+
+        it('should have expanded input param as false by default', () => {
+            expect(component.expanded).toBe(false);
+        });
+    });
+
+    describe('Saving', () => {
+
+        it('should save the node on itemUpdate', () => {
+            const property = <CardViewBaseItemModel> { key: 'property-key', value: 'original-value' },
+                updateService: CardViewUpdateService = fixture.debugElement.injector.get(CardViewUpdateService),
+                nodesApiService: NodesApiService = TestBed.get(NodesApiService);
+            spyOn(nodesApiService, 'updateNode');
+
+            updateService.update(property, 'updated-value');
+
+            expect(nodesApiService.updateNode).toHaveBeenCalledWith('node-id', {
+                'property-key': 'updated-value'
+            });
+        });
+
+        it('should update the node on successful save', async(() => {
+            const property = <CardViewBaseItemModel> { key: 'property-key', value: 'original-value' },
+                updateService: CardViewUpdateService = fixture.debugElement.injector.get(CardViewUpdateService),
+                nodesApiService: NodesApiService = TestBed.get(NodesApiService),
+                expectedNode = Object.assign({}, node, { name: 'some-modified-value' });
+
+            spyOn(nodesApiService, 'updateNode').and.callFake(() => {
+                return Observable.of(expectedNode);
+            });
+
+            updateService.update(property, 'updated-value');
+
+            fixture.whenStable().then(() => {
+                expect(component.node).toBe(expectedNode);
+            });
+        }));
+
+        it('should throw error on unsuccessful save', () => {
+            const property = <CardViewBaseItemModel> { key: 'property-key', value: 'original-value' },
+                updateService: CardViewUpdateService = fixture.debugElement.injector.get(CardViewUpdateService),
+                nodesApiService: NodesApiService = TestBed.get(NodesApiService),
+                logService: LogService = TestBed.get(LogService);
+
+            spyOn(nodesApiService, 'updateNode').and.callFake(() => {
+                return ErrorObservable.create(new Error('My bad'));
+            });
+
+            updateService.update(property, 'updated-value');
+
+            expect(logService.error).toHaveBeenCalledWith(new Error('My bad'));
+        });
+    });
+
+    describe('Properties loading', () => {
+
+        let expectedNode,
+            contentMetadataService: ContentMetadataService;
+
+        beforeEach(() => {
+            expectedNode = Object.assign({}, node, { name: 'some-modified-value' });
+            contentMetadataService = TestBed.get(ContentMetadataService);
+            fixture.detectChanges();
+        });
+
+        it('should load the basic properties on node change', () => {
+            spyOn(contentMetadataService, 'getBasicProperties');
+
+            component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) });
+
+            expect(contentMetadataService.getBasicProperties).toHaveBeenCalledWith(expectedNode);
+        });
+
+        it('should pass through the loaded basic properties to the card view', async(() => {
+            const expectedProperties = [];
+            component.expanded = false;
+            fixture.detectChanges();
+            spyOn(contentMetadataService, 'getBasicProperties').and.callFake(() => {
+                return Observable.of(expectedProperties);
+            });
+
+            component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) });
+
+            component.basicProperties$.subscribe(() => {
+                fixture.detectChanges();
+                const basicPropertiesComponent = fixture.debugElement.query(By.directive(CardViewComponent)).componentInstance;
+                expect(basicPropertiesComponent.properties).toBe(expectedProperties);
+            });
+        }));
+
+        it('should pass through the displayEmpty to the card view of basic properties', async(() => {
+            component.displayEmpty = false;
+            fixture.detectChanges();
+            spyOn(contentMetadataService, 'getBasicProperties').and.returnValue(Observable.of([]));
+
+            component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) });
+
+            component.basicProperties$.subscribe(() => {
+                fixture.detectChanges();
+                const basicPropertiesComponent = fixture.debugElement.query(By.directive(CardViewComponent)).componentInstance;
+                expect(basicPropertiesComponent.displayEmpty).toBe(false);
+            });
+        }));
+
+        it('should load the aspect properties on node change', () => {
+            spyOn(contentMetadataService, 'getAspectProperties');
+
+            component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) });
+
+            expect(contentMetadataService.getAspectProperties).toHaveBeenCalledWith(expectedNode, 'custom-preset');
+        });
+
+        it('should pass through the loaded aspect properties to the card view', async(() => {
+            const expectedProperties = [];
+            component.expanded = true;
+            fixture.detectChanges();
+            spyOn(contentMetadataService, 'getAspectProperties').and.callFake(() => {
+                return Observable.of([{ properties: expectedProperties }]);
+            });
+
+            component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) });
+
+            component.basicProperties$.subscribe(() => {
+                fixture.detectChanges();
+                const firstAspectPropertiesComponent = fixture.debugElement.query(By.css('.adf-metadata-properties-aspect adf-card-view')).componentInstance;
+                expect(firstAspectPropertiesComponent.properties).toBe(expectedProperties);
+            });
+        }));
+
+        it('should pass through the displayEmpty to the card view of aspect properties', async(() => {
+            component.expanded = true;
+            component.displayEmpty = false;
+            fixture.detectChanges();
+            spyOn(contentMetadataService, 'getAspectProperties').and.returnValue(Observable.of([{ properties: [] }]));
+
+            component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) });
+
+            component.basicProperties$.subscribe(() => {
+                fixture.detectChanges();
+                const basicPropertiesComponent = fixture.debugElement.query(By.css('.adf-metadata-properties-aspect adf-card-view')).componentInstance;
+                expect(basicPropertiesComponent.displayEmpty).toBe(false);
+            });
+        }));
+
+        it('should be performed again if property updating occured, since the originally passed node has changed, so the previously calculated properties', () => {
+            const property = <CardViewBaseItemModel> { key: 'property-key', value: 'original-value' },
+                updateService = fixture.debugElement.injector.get(CardViewUpdateService),
+                nodesApiService = TestBed.get(NodesApiService);
+
+            spyOn(nodesApiService, 'updateNode').and.callFake(() => Observable.of(node));
+            spyOn(contentMetadataService, 'getBasicProperties');
+            component.ngOnChanges({ node: new SimpleChange(null, node, true) });
+            updateService.update(property, 'updated-value');
+
+            component.ngOnChanges({ expanded: new SimpleChange(false, true, false) });
+            component.ngOnChanges({ expanded: new SimpleChange(true, false, false) });
+            component.ngOnChanges({ expanded: new SimpleChange(false, true, false) });
+
+            expect(contentMetadataService.getBasicProperties).toHaveBeenCalledTimes(2);
+        });
+    });
+});
diff --git a/lib/content-services/content-metadata/content-metadata.component.ts b/lib/content-services/content-metadata/components/content-metadata/content-metadata.component.ts
similarity index 52%
rename from lib/content-services/content-metadata/content-metadata.component.ts
rename to lib/content-services/content-metadata/components/content-metadata/content-metadata.component.ts
index a39afedc53..72f6739b3e 100644
--- a/lib/content-services/content-metadata/content-metadata.component.ts
+++ b/lib/content-services/content-metadata/components/content-metadata/content-metadata.component.ts
@@ -15,21 +15,20 @@
  * limitations under the License.
  */
 
-import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, Input, OnChanges, OnInit, SimpleChanges, SimpleChange, ViewEncapsulation } from '@angular/core';
 import { MinimalNodeEntryEntity } from 'alfresco-js-api';
 import { Observable } from 'rxjs/Observable';
-import { CardViewItem, CardViewUpdateService, FileSizePipe, NodesApiService } from '@alfresco/adf-core';
-import { ContentMetadataService } from './content-metadata.service';
+import { CardViewItem, CardViewUpdateService, NodesApiService, LogService } from '@alfresco/adf-core';
+import { ContentMetadataService } from '../../services/content-metadata.service';
+import { CardViewAspect } from '../../interfaces/content-metadata.interfaces';
 
 @Component({
     selector: 'adf-content-metadata',
     templateUrl: './content-metadata.component.html',
     styleUrls: ['./content-metadata.component.scss'],
     host: { 'class': 'adf-content-metadata' },
-    changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
-    providers: [ CardViewUpdateService ],
-    viewProviders: [ ContentMetadataService, FileSizePipe ]
+    providers: [ CardViewUpdateService ]
 })
 export class ContentMetadataComponent implements OnChanges, OnInit {
 
@@ -40,43 +39,47 @@ export class ContentMetadataComponent implements OnChanges, OnInit {
     editable: boolean = false;
 
     @Input()
-    maxPropertiesToShow: number = Infinity;
+    displayEmpty: boolean = false;
 
-    properties: CardViewItem[] = [];
+    @Input()
+    expanded: boolean = false;
+
+    @Input()
+    preset: string;
+
+    nodeHasBeenUpdated: boolean = false;
+    basicProperties$: Observable<CardViewItem[]>;
+    aspects$: Observable<CardViewAspect[]>;
 
     constructor(private contentMetadataService: ContentMetadataService,
                 private cardViewUpdateService: CardViewUpdateService,
-                private nodesApi: NodesApiService) {}
+                private nodesApi: NodesApiService,
+                private logService: LogService) {}
 
-    ngOnInit(): void {
+    ngOnInit() {
         this.cardViewUpdateService.itemUpdated$
             .switchMap(this.saveNode.bind(this))
             .subscribe(
-                node => this.node = node,
-                error => this.handleError(error)
+                (node) => {
+                    this.nodeHasBeenUpdated = true;
+                    this.node = node;
+                },
+                error => this.logService.error(error)
             );
     }
 
-    ngOnChanges(): void {
-        this.recalculateProperties();
+    ngOnChanges(changes: SimpleChanges) {
+        const nodeChange: SimpleChange = changes['node'];
+        if (nodeChange || this.nodeHasBeenUpdated) {
+            const node = nodeChange && nodeChange.currentValue || this.node;
+            this.nodeHasBeenUpdated = false;
+
+            this.basicProperties$ = this.contentMetadataService.getBasicProperties(node);
+            this.aspects$ = this.contentMetadataService.getAspectProperties(node, this.preset);
+        }
     }
 
     private saveNode({ changed: nodeBody }): Observable<MinimalNodeEntryEntity> {
         return this.nodesApi.updateNode(this.node.id, nodeBody);
     }
-
-    private handleError(error): void {
-        /*tslint:disable-next-line*/
-        console.log(error);
-    }
-
-    private recalculateProperties(): void {
-        let basicProperties = this.contentMetadataService.getBasicProperties(this.node);
-
-        if (this.maxPropertiesToShow) {
-            basicProperties = basicProperties.slice(0, this.maxPropertiesToShow);
-        }
-
-        this.properties = [...basicProperties];
-    }
 }
diff --git a/lib/content-services/content-metadata/content-metadata-card.component.html b/lib/content-services/content-metadata/content-metadata-card.component.html
deleted file mode 100644
index 5dea07f211..0000000000
--- a/lib/content-services/content-metadata/content-metadata-card.component.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<mat-card *ngIf="node">
-    <mat-card-content>
-        <adf-content-metadata [node]="node" [editable]="editable" [maxPropertiesToShow]="maxPropertiesToShow"></adf-content-metadata>
-    </mat-card-content>
-    <mat-card-footer class="adf-viewer-default-sidebar-card-footer" fxLayout="row" fxLayoutAlign="space-between stretch">
-        <div>
-            <button mat-icon-button>
-                <mat-icon>star_border</mat-icon>
-            </button>
-            <button mat-icon-button (click)="toggleEdit()">
-                <mat-icon>mode_edit</mat-icon>
-            </button>
-        </div>
-        <button mat-button (click)="toggleExpanded()">
-            <ng-container *ngIf="!expanded">
-                <span>{{ 'ADF_VIEWER.SIDEBAR.METADATA.MORE_INFORMATION' | translate }}</span>
-                <mat-icon>keyboard_arrow_down</mat-icon>
-            </ng-container>
-            <ng-container *ngIf="expanded">
-                <span>{{ 'ADF_VIEWER.SIDEBAR.METADATA.LESS_INFORMATION' | translate }}</span>
-                <mat-icon>keyboard_arrow_up</mat-icon>
-            </ng-container>
-        </button>
-    </mat-card-footer>
-</mat-card>
diff --git a/lib/content-services/content-metadata/content-metadata.component.html b/lib/content-services/content-metadata/content-metadata.component.html
deleted file mode 100644
index b9eae6c36d..0000000000
--- a/lib/content-services/content-metadata/content-metadata.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="adf-metadata-properties">
-    <adf-card-view [properties]="properties" [editable]="editable"></adf-card-view>
-</div>
\ No newline at end of file
diff --git a/lib/content-services/content-metadata/content-metadata.component.scss b/lib/content-services/content-metadata/content-metadata.component.scss
deleted file mode 100644
index 25222c4a69..0000000000
--- a/lib/content-services/content-metadata/content-metadata.component.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@mixin adf-content-metadata-theme($theme) {
-    $primary: map-get($theme, primary);
-    $background: map-get($theme, background);
-    $foreground: map-get($theme, foreground);
-
-    .adf {
-        &-metadata-properties {
-
-            .adf-property {
-                display: block;
-                margin-bottom: 20px;
-
-                .adf-property-label {
-                    display: block;
-                    padding: 0;
-                    font-size: 12px;
-                    color: mat-color($foreground, text, 0.4);
-                }
-
-                .adf-property-value {
-                    display: block;
-                    padding: 0;
-                    font-size: 14px;
-                    color: mat-color($foreground, text, 0.87);
-                }
-            }
-        }
-    }
-}
diff --git a/lib/content-services/content-metadata/content-metadata.module.scss b/lib/content-services/content-metadata/content-metadata.module.scss
new file mode 100644
index 0000000000..4c043f0d19
--- /dev/null
+++ b/lib/content-services/content-metadata/content-metadata.module.scss
@@ -0,0 +1,7 @@
+@import './components/content-metadata/content-metadata.component';
+@import './components/content-metadata-card/content-metadata-card.component';
+
+@mixin adf-content-metadata-module-theme($theme) {
+    @include adf-content-metadata-theme($theme);
+    @include adf-content-metadata-card-theme($theme);
+}
diff --git a/lib/content-services/content-metadata/content-metadata.module.ts b/lib/content-services/content-metadata/content-metadata.module.ts
index 5d4e76b863..55f84715bf 100644
--- a/lib/content-services/content-metadata/content-metadata.module.ts
+++ b/lib/content-services/content-metadata/content-metadata.module.ts
@@ -20,10 +20,14 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 import { NgModule } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { MaterialModule } from '../material.module';
-import { CardViewModule } from '@alfresco/adf-core';
-
-import { ContentMetadataComponent } from './content-metadata.component';
-import { ContentMetadataCardComponent } from './content-metadata-card.component';
+import { CardViewModule , FileSizePipe } from '@alfresco/adf-core';
+import { ContentMetadataComponent } from './components/content-metadata/content-metadata.component';
+import { ContentMetadataCardComponent } from './components/content-metadata-card/content-metadata-card.component';
+import { PropertyDescriptorsService } from './services/property-descriptors.service';
+import { PropertyDescriptorLoaderService } from './services/properties-loader.service';
+import { AspectWhiteListService } from './services/aspect-whitelist.service';
+import { BasicPropertiesService } from './services/basic-properties.service';
+import { ContentMetadataService } from './services/content-metadata.service';
 
 @NgModule({
     imports: [
@@ -40,6 +44,14 @@ import { ContentMetadataCardComponent } from './content-metadata-card.component'
     declarations: [
         ContentMetadataComponent,
         ContentMetadataCardComponent
+    ],
+    providers: [
+        ContentMetadataService,
+        PropertyDescriptorsService,
+        PropertyDescriptorLoaderService,
+        AspectWhiteListService,
+        BasicPropertiesService,
+        FileSizePipe
     ]
 })
 export class ContentMetadataModule {}
diff --git a/lib/content-services/content-metadata/interfaces/aspect-property.interface.ts b/lib/content-services/content-metadata/interfaces/aspect-property.interface.ts
new file mode 100644
index 0000000000..c88f3d2ba5
--- /dev/null
+++ b/lib/content-services/content-metadata/interfaces/aspect-property.interface.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.
+ */
+
+export interface AspectProperty {
+    name: string;
+    title: string;
+    description?: string;
+    dataType: string;
+    defaultValue?: any;
+    mandatory: boolean;
+    multiValued: boolean;
+}
diff --git a/lib/content-services/content-metadata/interfaces/aspect.interface.ts b/lib/content-services/content-metadata/interfaces/aspect.interface.ts
new file mode 100644
index 0000000000..5c02e3c886
--- /dev/null
+++ b/lib/content-services/content-metadata/interfaces/aspect.interface.ts
@@ -0,0 +1,25 @@
+/*!
+ * @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 { AspectProperty } from "./aspect-property.interface";
+
+export interface Aspect {
+    name: string;
+    title: string;
+    description: string;
+    properties: AspectProperty[]
+}
diff --git a/lib/content-services/content-metadata/interfaces/card-view-aspect.interface.ts b/lib/content-services/content-metadata/interfaces/card-view-aspect.interface.ts
new file mode 100644
index 0000000000..af07068985
--- /dev/null
+++ b/lib/content-services/content-metadata/interfaces/card-view-aspect.interface.ts
@@ -0,0 +1,23 @@
+/*!
+ * @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 { CardViewItem} from '@alfresco/adf-core';
+
+export interface CardViewAspect {
+    name: string;
+    properties: CardViewItem[]
+}
diff --git a/lib/content-services/content-metadata/interfaces/content-metadata.interfaces.ts b/lib/content-services/content-metadata/interfaces/content-metadata.interfaces.ts
new file mode 100644
index 0000000000..d9ec4f5016
--- /dev/null
+++ b/lib/content-services/content-metadata/interfaces/content-metadata.interfaces.ts
@@ -0,0 +1,20 @@
+/*!
+ * @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.
+ */
+
+export * from './aspect-property.interface';
+export * from './aspect.interface';
+export * from './card-view-aspect.interface';
\ No newline at end of file
diff --git a/lib/content-services/content-metadata/public-api.ts b/lib/content-services/content-metadata/public-api.ts
index dd66fdddb0..ecb6235824 100644
--- a/lib/content-services/content-metadata/public-api.ts
+++ b/lib/content-services/content-metadata/public-api.ts
@@ -15,5 +15,5 @@
  * limitations under the License.
  */
 
-export * from './content-metadata.component';
-export * from './content-metadata.service';
+export * from './components/content-metadata-card/content-metadata-card.component';
+export { ContentMetadataModule } from './content-metadata.module';
diff --git a/lib/content-services/content-metadata/services/aspect-whitelist.service.ts b/lib/content-services/content-metadata/services/aspect-whitelist.service.ts
new file mode 100644
index 0000000000..5c23391c9e
--- /dev/null
+++ b/lib/content-services/content-metadata/services/aspect-whitelist.service.ts
@@ -0,0 +1,75 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Injectable } from '@angular/core';
+import { AppConfigService, LogService } from '@alfresco/adf-core';
+
+@Injectable()
+export class AspectWhiteListService {
+
+    static readonly DEFAULT_PRESET = '*';
+    static readonly DEFAULT_PRESET_NAME = 'default';
+
+    preset: object | string = AspectWhiteListService.DEFAULT_PRESET;
+
+    constructor(private appConfigService: AppConfigService,
+                private logService: LogService) {}
+
+    public choosePreset(presetName: string) {
+        try {
+            const preset = this.appConfigService.config['content-metadata'].presets[presetName];
+
+            if (preset) {
+                this.preset = preset;
+            } else if (presetName !== AspectWhiteListService.DEFAULT_PRESET_NAME) {
+                this.logService.error(`No content-metadata preset for: ${presetName}`);
+            }
+        } catch (e) {
+            this.preset = AspectWhiteListService.DEFAULT_PRESET;
+        }
+    }
+
+    public isAspectAllowed(aspectName) {
+        if (this.isEveryAspectAllowed) {
+            return true;
+        }
+
+        const aspectNames = Object.keys(this.preset);
+        return aspectNames.indexOf(aspectName) !== -1;
+    }
+
+    public isPropertyAllowed(aspectName, propertyName) {
+        if (this.isEveryAspectAllowed || this.isEveryPropertyAllowedFor(aspectName)) {
+            return true;
+        }
+
+        if (this.preset[aspectName]) {
+            return this.preset[aspectName].indexOf(propertyName) !== -1;
+        }
+
+        return false;
+    }
+
+    private get isEveryAspectAllowed(): boolean {
+        return typeof this.preset === 'string' && this.preset === AspectWhiteListService.DEFAULT_PRESET;
+    }
+
+    private isEveryPropertyAllowedFor(aspectName): boolean {
+        const whitedListedProperties = this.preset[aspectName];
+        return typeof whitedListedProperties === 'string' && whitedListedProperties === AspectWhiteListService.DEFAULT_PRESET;
+    }
+}
diff --git a/lib/content-services/content-metadata/content-metadata.service.ts b/lib/content-services/content-metadata/services/basic-properties.service.ts
similarity index 98%
rename from lib/content-services/content-metadata/content-metadata.service.ts
rename to lib/content-services/content-metadata/services/basic-properties.service.ts
index 06d05cd540..a57afd8739 100644
--- a/lib/content-services/content-metadata/content-metadata.service.ts
+++ b/lib/content-services/content-metadata/services/basic-properties.service.ts
@@ -20,7 +20,7 @@ import { MinimalNodeEntryEntity } from 'alfresco-js-api';
 import { CardViewDateItemModel, CardViewTextItemModel, FileSizePipe } from '@alfresco/adf-core';
 
 @Injectable()
-export class ContentMetadataService {
+export class BasicPropertiesService {
 
     constructor(private fileSizePipe: FileSizePipe) {}
 
diff --git a/lib/content-services/content-metadata/services/content-metadata.service.spec.ts b/lib/content-services/content-metadata/services/content-metadata.service.spec.ts
new file mode 100644
index 0000000000..a0ec319c14
--- /dev/null
+++ b/lib/content-services/content-metadata/services/content-metadata.service.spec.ts
@@ -0,0 +1,325 @@
+/*!
+ * @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 { async, TestBed } from '@angular/core/testing';
+import { ContentMetadataService } from './content-metadata.service';
+import { PropertyDescriptorsService } from './property-descriptors.service';
+import { BasicPropertiesService } from './basic-properties.service';
+import { AspectWhiteListService } from './aspect-whitelist.service';
+import { PropertyDescriptorLoaderService } from './properties-loader.service';
+import { AlfrescoApiService } from '@alfresco/adf-core';
+import { Observable } from 'rxjs/Observable';
+import { Aspect, AspectProperty } from '../interfaces/content-metadata.interfaces';
+import { MinimalNodeEntryEntity } from 'alfresco-js-api';
+import {
+    CardViewTextItemModel,
+    CardViewDateItemModel,
+    CardViewIntItemModel,
+    CardViewFloatItemModel,
+    LogService,
+    CardViewBoolItemModel,
+    CardViewDatetimeItemModel
+} from '@alfresco/adf-core';
+
+describe('ContentMetadataService', () => {
+
+    let service: ContentMetadataService,
+        descriptorsService: PropertyDescriptorsService,
+        aspects: Aspect[],
+        aspect: Aspect,
+        aspectProperty: AspectProperty,
+        node: MinimalNodeEntryEntity;
+
+    const dummyPreset = 'default';
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            providers: [
+                ContentMetadataService,
+                BasicPropertiesService,
+                AspectWhiteListService,
+                PropertyDescriptorLoaderService,
+                AlfrescoApiService,
+                { provide: LogService, useValue: { error: () => {} }},
+                PropertyDescriptorsService
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        service = TestBed.get(ContentMetadataService);
+        descriptorsService = TestBed.get(PropertyDescriptorsService);
+
+        node = <MinimalNodeEntryEntity> { properties: {} };
+        aspectProperty = {
+            name: 'FAS:PLAGUE',
+            title: 'The Faro Plague',
+            dataType: '',
+            defaultValue: '',
+            mandatory: false,
+            multiValued: false
+        };
+        aspect = {
+            name: 'FAS:FAS',
+            title: 'Faro Automated Solutions',
+            description: 'Faro Automated Solutions is an old Earth corporation that manufactured robots in the mid-21st century.',
+            properties: [aspectProperty]
+        };
+        aspects = [];
+        spyOn(descriptorsService, 'getAspects').and.returnValue(Observable.of(aspects));
+    });
+
+    afterEach(() => {
+        TestBed.resetTestingModule();
+    });
+
+    describe('General transformation', () => {
+
+        it('should translate more properties in an aspect properly', () => {
+            aspect.properties = [{
+                name: 'FAS:PLAGUE',
+                title: 'title',
+                dataType: 'd:text',
+                defaultValue: 'defaultValue',
+                mandatory: false,
+                multiValued: false
+            },
+            {
+                name: 'FAS:ALOY',
+                title: 'title',
+                dataType: 'd:text',
+                defaultValue: 'defaultValue',
+                mandatory: false,
+                multiValued: false
+            }];
+            aspects.push(aspect);
+
+            node.properties = { 'FAS:PLAGUE': 'The Chariot Line' };
+
+            service.getAspectProperties(node, dummyPreset).subscribe((cardViewAspect) => {
+                expect(cardViewAspect[0].properties.length).toBe(2);
+                expect(cardViewAspect[0].properties[0] instanceof CardViewTextItemModel).toBeTruthy('First property should be instance of CardViewTextItemModel');
+                expect(cardViewAspect[0].properties[1] instanceof CardViewTextItemModel).toBeTruthy('Second property should be instance of CardViewTextItemModel');
+            });
+        });
+
+        it('should translate every property in every aspect properly', () => {
+            aspects.push(
+                Object.assign({}, aspect, {
+                    properties: [{
+                        name: 'FAS:PLAGUE',
+                        title: 'title',
+                        dataType: 'd:text',
+                        defaultValue: 'defaultvalue',
+                        mandatory: false,
+                        multiValued: false
+                    }]
+                }),
+                Object.assign({}, aspect, {
+                    properties: [{
+                        name: 'FAS:ALOY',
+                        title: 'title',
+                        dataType: 'd:text',
+                        defaultValue: 'defaultvalue',
+                        mandatory: false,
+                        multiValued: false
+                    }]
+                })
+            );
+
+            node.properties = { 'FAS:PLAGUE': 'The Chariot Line' };
+
+            service.getAspectProperties(node, dummyPreset).subscribe((cardViewAspect) => {
+                expect(cardViewAspect.length).toBe(2);
+                expect(cardViewAspect[0].properties[0] instanceof CardViewTextItemModel).toBeTruthy('First aspect\'s property should be instance of CardViewTextItemModel');
+                expect(cardViewAspect[1].properties[0] instanceof CardViewTextItemModel).toBeTruthy('Second aspect\'s property should be instance of CardViewTextItemModel');
+            });
+        });
+
+        it('should log an error if unrecognised type is found', () => {
+            const logService = TestBed.get(LogService);
+            spyOn(logService, 'error').and.stub();
+
+            aspectProperty.name = 'FAS:PLAGUE';
+            aspectProperty.title = 'The Faro Plague';
+            aspectProperty.dataType = 'daemonic:scorcher';
+            aspectProperty.defaultValue = 'Daemonic beast';
+            aspects.push(aspect);
+
+            service.getAspectProperties(node, dummyPreset).subscribe((cardViewAspect) => {
+                expect(logService.error).toHaveBeenCalledWith('Unknown type for mapping: daemonic:scorcher');
+            });
+        });
+
+        it('should fall back to singleline property type if unrecognised type is found', () => {
+            aspectProperty.name = 'FAS:PLAGUE';
+            aspectProperty.title = 'The Faro Plague';
+            aspectProperty.dataType = 'daemonic:scorcher';
+            aspectProperty.defaultValue = 'Daemonic beast';
+            aspects.push(aspect);
+
+            service.getAspectProperties(node, dummyPreset).subscribe((cardViewAspect) => {
+                const property: CardViewTextItemModel = <CardViewTextItemModel> cardViewAspect[0].properties[0];
+                expect(property instanceof CardViewTextItemModel).toBeTruthy('Property should be instance of CardViewTextItemModel');
+            });
+        });
+    });
+
+    describe('Different types\'s attributes', () => {
+
+        ContentMetadataService.RECOGNISED_ECM_TYPES.forEach((dataType) => {
+            it(`should translate properly the basic attributes of a property for ${dataType}`, () => {
+                aspectProperty.name = 'prefix:name';
+                aspectProperty.title = 'title';
+                aspectProperty.defaultValue = 'default value';
+                aspectProperty.dataType = dataType;
+                aspects.push(aspect);
+
+                node.properties = { 'prefix:name': null };
+
+                service.getAspectProperties(node, dummyPreset).subscribe((cardViewAspect) => {
+                    const property = cardViewAspect[0].properties[0];
+                    expect(property.label).toBe(aspectProperty.title);
+                    expect(property.key).toBe('properties.prefix:name');
+                    expect(property.default).toBe(aspectProperty.defaultValue);
+                    expect(property.editable).toBeTruthy('Property should be editable');
+                });
+            });
+        });
+
+        it('should translate properly the multiline and value attributes for d:text', () => {
+            aspectProperty.dataType = 'd:text';
+            aspects.push(aspect);
+
+            node.properties = { 'FAS:PLAGUE': 'The Chariot Line' };
+
+            service.getAspectProperties(node, dummyPreset).subscribe((cardViewAspect) => {
+                const property: CardViewTextItemModel = <CardViewTextItemModel> cardViewAspect[0].properties[0];
+                expect(property instanceof CardViewTextItemModel).toBeTruthy('Property should be instance of CardViewTextItemModel');
+                expect(property.value).toBe('The Chariot Line');
+                expect(property.multiline).toBeFalsy('Property should be singleline');
+            });
+        });
+
+        it('should translate properly the multiline and value attributes for d:mltext', () => {
+            aspectProperty.dataType = 'd:mltext';
+            aspects.push(aspect);
+
+            node.properties = { 'FAS:PLAGUE': 'The Chariot Line' };
+
+            service.getAspectProperties(node, dummyPreset).subscribe((cardViewAspect) => {
+                const property: CardViewTextItemModel = <CardViewTextItemModel> cardViewAspect[0].properties[0];
+                expect(property instanceof CardViewTextItemModel).toBeTruthy('Property should be instance of CardViewTextItemModel');
+                expect(property.value).toBe('The Chariot Line');
+                expect(property.multiline).toBeTruthy('Property should be multiline');
+            });
+        });
+
+        it('should translate properly the value attribute for d:date', () => {
+            const expectedValue = new Date().toISOString();
+            aspectProperty.dataType = 'd:date';
+            aspects.push(aspect);
+
+            node.properties = { 'FAS:PLAGUE': expectedValue };
+
+            service.getAspectProperties(node, dummyPreset).subscribe((cardViewAspect) => {
+                const property: CardViewDateItemModel = <CardViewDateItemModel> cardViewAspect[0].properties[0];
+                expect(property instanceof CardViewDateItemModel).toBeTruthy('Property should be instance of CardViewDateItemModel');
+                expect(property.value).toBe(expectedValue);
+            });
+        });
+
+        it('should translate properly the value attribute for d:date', () => {
+            const expectedValue = new Date().toISOString();
+            aspectProperty.dataType = 'd:datetime';
+            aspects.push(aspect);
+
+            node.properties = { 'FAS:PLAGUE': expectedValue };
+
+            service.getAspectProperties(node, dummyPreset).subscribe((cardViewAspect) => {
+                const property: CardViewDatetimeItemModel = <CardViewDatetimeItemModel> cardViewAspect[0].properties[0];
+                expect(property instanceof CardViewDatetimeItemModel).toBeTruthy('Property should be instance of CardViewDatetimeItemModel');
+                expect(property.value).toBe(expectedValue);
+            });
+        });
+
+        it('should translate properly the value attribute for d:int', () => {
+            aspectProperty.dataType = 'd:int';
+            aspects.push(aspect);
+
+            node.properties = { 'FAS:PLAGUE': '1024' };
+
+            service.getAspectProperties(node, dummyPreset).subscribe((cardViewAspect) => {
+                const property: CardViewIntItemModel = <CardViewIntItemModel> cardViewAspect[0].properties[0];
+                expect(property instanceof CardViewIntItemModel).toBeTruthy('Property should be instance of CardViewIntItemModel');
+                expect(property.value).toBe(1024);
+            });
+        });
+
+        it('should translate properly the value attribute for d:long', () => {
+            aspectProperty.dataType = 'd:long';
+            aspects.push(aspect);
+
+            node.properties = { 'FAS:PLAGUE': '1024' };
+
+            service.getAspectProperties(node, dummyPreset).subscribe((cardViewAspect) => {
+                const property: CardViewIntItemModel = <CardViewIntItemModel> cardViewAspect[0].properties[0];
+                expect(property instanceof CardViewIntItemModel).toBeTruthy('Property should be instance of CardViewIntItemModel');
+                expect(property.value).toBe(1024);
+            });
+        });
+
+        it('should translate properly the value attribute for d:float', () => {
+            aspectProperty.dataType = 'd:float';
+            aspects.push(aspect);
+
+            node.properties = { 'FAS:PLAGUE': '1024.24' };
+
+            service.getAspectProperties(node, dummyPreset).subscribe((cardViewAspect) => {
+                const property: CardViewFloatItemModel = <CardViewFloatItemModel> cardViewAspect[0].properties[0];
+                expect(property instanceof CardViewFloatItemModel).toBeTruthy('Property should be instance of CardViewFloatItemModel');
+                expect(property.value).toBe(1024.24);
+            });
+        });
+
+        it('should translate properly the value attribute for d:double', () => {
+            aspectProperty.dataType = 'd:double';
+            aspects.push(aspect);
+
+            node.properties = { 'FAS:PLAGUE': '1024.24' };
+
+            service.getAspectProperties(node, dummyPreset).subscribe((cardViewAspect) => {
+                const property: CardViewFloatItemModel = <CardViewFloatItemModel> cardViewAspect[0].properties[0];
+                expect(property instanceof CardViewFloatItemModel).toBeTruthy('Property should be instance of CardViewFloatItemModel');
+                expect(property.value).toBe(1024.24);
+            });
+        });
+
+        it('should translate properly the value attribute for d:boolean', () => {
+            aspectProperty.dataType = 'd:boolean';
+            aspects.push(aspect);
+
+            node.properties = { 'FAS:PLAGUE': true };
+
+            service.getAspectProperties(node, dummyPreset).subscribe((cardViewAspect) => {
+                const property: CardViewBoolItemModel = <CardViewBoolItemModel> cardViewAspect[0].properties[0];
+                expect(property instanceof CardViewBoolItemModel).toBeTruthy('Property should be instance of CardViewBoolItemModel');
+                expect(property.value).toBe(true);
+            });
+        });
+    });
+});
diff --git a/lib/content-services/content-metadata/services/content-metadata.service.ts b/lib/content-services/content-metadata/services/content-metadata.service.ts
new file mode 100644
index 0000000000..924aa9ced7
--- /dev/null
+++ b/lib/content-services/content-metadata/services/content-metadata.service.ts
@@ -0,0 +1,139 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Injectable } from '@angular/core';
+import { MinimalNodeEntryEntity } from 'alfresco-js-api';
+import { PropertyDescriptorsService } from './property-descriptors.service';
+import { BasicPropertiesService } from './basic-properties.service';
+import {
+    CardViewItemProperties,
+    CardViewItem,
+    CardViewTextItemModel,
+    CardViewBoolItemModel,
+    CardViewDateItemModel,
+    CardViewDatetimeItemModel,
+    CardViewIntItemModel,
+    CardViewFloatItemModel,
+    LogService
+} from '@alfresco/adf-core';
+import { Observable } from 'rxjs/Observable';
+import { AspectProperty, CardViewAspect, Aspect } from '../interfaces/content-metadata.interfaces';
+
+const D_TEXT = 'd:text';
+const D_MLTEXT = 'd:mltext';
+const D_DATE = 'd:date';
+const D_DATETIME = 'd:datetime';
+const D_INT = 'd:int';
+const D_LONG = 'd:long';
+const D_FLOAT = 'd:float';
+const D_DOUBLE = 'd:double';
+const D_BOOLEAN = 'd:boolean';
+
+@Injectable()
+export class ContentMetadataService {
+
+    static readonly RECOGNISED_ECM_TYPES = [ D_TEXT, D_MLTEXT, D_DATE, D_DATETIME, D_INT, D_LONG , D_FLOAT, D_DOUBLE, D_BOOLEAN ];
+
+    constructor(private basicPropertiesService: BasicPropertiesService,
+                private propertyDescriptorsService: PropertyDescriptorsService,
+                private logService: LogService) {}
+
+    getBasicProperties(node: MinimalNodeEntryEntity): Observable<CardViewItem[]> {
+        return Observable.of(this.basicPropertiesService.getBasicProperties(node));
+    }
+
+    getAspectProperties(node: MinimalNodeEntryEntity, preset: string): Observable<CardViewAspect[]> {
+        return this.propertyDescriptorsService.getAspects(node, preset)
+            .map(aspects => this.translateAspects(aspects, node.properties));
+    }
+
+    private translateAspects(aspects: Aspect[], nodeProperties): CardViewAspect[] {
+        return aspects.map(aspect => {
+            const translatedAspect: any = Object.assign({}, aspect);
+            translatedAspect.properties = this.translateProperties(aspect.properties, nodeProperties);
+            return translatedAspect;
+        });
+    }
+
+    private translateProperties(aspectProperties: AspectProperty[], nodeProperties: any): CardViewItem[] {
+        return aspectProperties.map(aspectProperty => {
+            return this.translateProperty(aspectProperty, nodeProperties[aspectProperty.name]);
+        });
+    }
+
+    private translateProperty(aspectProperty: AspectProperty, nodeProperty: any): CardViewItem {
+        this.checkECMTypeValidity(aspectProperty.dataType);
+
+        let propertyDefinition: CardViewItemProperties = {
+            label: aspectProperty.title,
+            value: nodeProperty,
+            key: this.getAspectPropertyKey(aspectProperty.name),
+            default: aspectProperty.defaultValue,
+            editable: true
+        };
+        let property;
+
+        switch (aspectProperty.dataType) {
+
+            case D_MLTEXT:
+                property = new CardViewTextItemModel(Object.assign(propertyDefinition, {
+                    multiline: true
+                }));
+                break;
+
+            case D_INT:
+            case D_LONG:
+                property = new CardViewIntItemModel(propertyDefinition);
+                break;
+
+            case D_FLOAT:
+            case D_DOUBLE:
+                property = new CardViewFloatItemModel(propertyDefinition);
+                break;
+
+            case D_DATE:
+                property = new CardViewDateItemModel(propertyDefinition);
+                break;
+
+            case D_DATETIME:
+                property = new CardViewDatetimeItemModel(propertyDefinition);
+                break;
+
+            case D_BOOLEAN:
+                property = new CardViewBoolItemModel(propertyDefinition);
+                break;
+
+            case D_TEXT:
+            default:
+                property = new CardViewTextItemModel(Object.assign(propertyDefinition, {
+                    multiline: false
+                }));
+        }
+
+        return property;
+    }
+
+    private checkECMTypeValidity(ecmPropertyType) {
+        if (ContentMetadataService.RECOGNISED_ECM_TYPES.indexOf(ecmPropertyType) === -1) {
+            this.logService.error(`Unknown type for mapping: ${ecmPropertyType}`);
+        }
+    }
+
+    private getAspectPropertyKey(propertyName) {
+        return `properties.${propertyName}`;
+    }
+}
diff --git a/lib/content-services/content-metadata/services/properties-loader.service.spec.ts b/lib/content-services/content-metadata/services/properties-loader.service.spec.ts
new file mode 100644
index 0000000000..5211866aa3
--- /dev/null
+++ b/lib/content-services/content-metadata/services/properties-loader.service.spec.ts
@@ -0,0 +1,95 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { async, TestBed } from '@angular/core/testing';
+import { PropertyDescriptorLoaderService } from './properties-loader.service';
+import { AlfrescoApiService } from '@alfresco/adf-core';
+import { Observable } from 'rxjs/Observable';
+import { ClassesApi } from 'alfresco-js-api';
+
+describe('PropertyDescriptorLoaderService', () => {
+
+    let aspectProperties: PropertyDescriptorLoaderService,
+        classesApi: ClassesApi;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            providers: [
+                PropertyDescriptorLoaderService,
+                AlfrescoApiService
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        aspectProperties = TestBed.get(PropertyDescriptorLoaderService);
+        const alfrescoApiService = TestBed.get(AlfrescoApiService);
+        classesApi = alfrescoApiService.classesApi;
+    });
+
+    afterEach(() => {
+        TestBed.resetTestingModule();
+    });
+
+    it('should load the aspects passed by paramter', () => {
+        spyOn(classesApi, 'getClass');
+
+        aspectProperties.load(['exif:exif', 'cm:content', 'custom:custom'])
+            .subscribe(() => {});
+
+        expect(classesApi.getClass).toHaveBeenCalledTimes(3);
+        expect(classesApi.getClass).toHaveBeenCalledWith('exif_exif');
+        expect(classesApi.getClass).toHaveBeenCalledWith('cm_content');
+        expect(classesApi.getClass).toHaveBeenCalledWith('custom_custom');
+    });
+
+    it('should merge the forked values', (done) => {
+
+        const exifResponse = {
+            name: 'exif:exif',
+            id: 1,
+            properties: {
+                'exif:1': { id: 'exif:1:id', name: 'exif:1' },
+                'exif:2': { id: 'exif:2:id', name: 'exif:2' }
+            }
+        };
+
+        const contentResponse = {
+            name: 'cm:content',
+            id: 2,
+            properties: {
+                'cm:content': { id: 'cm:content:id', name: 'cm:content' }
+            }
+        };
+
+        const apiResponses = [ exifResponse, contentResponse ];
+        let counter = 0;
+
+        spyOn(classesApi, 'getClass').and.callFake(() => {
+            return Observable.of(apiResponses[counter++]);
+        });
+
+        aspectProperties.load(['exif:exif', 'cm:content'])
+            .subscribe({
+                next: (data) => {
+                    expect(data[0]).toBe(exifResponse);
+                    expect(data[1]).toBe(contentResponse);
+                },
+                complete: done
+            });
+    });
+});
diff --git a/lib/content-services/content-metadata/services/properties-loader.service.ts b/lib/content-services/content-metadata/services/properties-loader.service.ts
new file mode 100644
index 0000000000..406a1b63a0
--- /dev/null
+++ b/lib/content-services/content-metadata/services/properties-loader.service.ts
@@ -0,0 +1,36 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Injectable } from '@angular/core';
+import { AlfrescoApiService } from '@alfresco/adf-core';
+import { forkJoin } from 'rxjs/observable/forkJoin';
+import { Observable } from 'rxjs/Observable';
+import { defer } from 'rxjs/observable/defer';
+
+@Injectable()
+export class PropertyDescriptorLoaderService {
+
+    constructor(private alfrescoApiService: AlfrescoApiService) {}
+
+    load(aspects: string[]): Observable<any> {
+        const aspectFetchStreams = aspects
+            .map(aspectName => aspectName.replace(':', '_'))
+            .map(aspectName => defer( () => this.alfrescoApiService.classesApi.getClass(aspectName)) );
+
+        return forkJoin(aspectFetchStreams);
+    }
+}
diff --git a/lib/content-services/content-metadata/services/property-descriptors.service.spec.ts b/lib/content-services/content-metadata/services/property-descriptors.service.spec.ts
new file mode 100644
index 0000000000..9eb76f98f2
--- /dev/null
+++ b/lib/content-services/content-metadata/services/property-descriptors.service.spec.ts
@@ -0,0 +1,209 @@
+/*!
+ * @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 { async, TestBed } from '@angular/core/testing';
+import { PropertyDescriptorsService } from './property-descriptors.service';
+import { PropertyDescriptorLoaderService } from './properties-loader.service';
+import { MinimalNodeEntryEntity } from 'alfresco-js-api';
+import { AlfrescoApiService } from '@alfresco/adf-core';
+import { AspectWhiteListService } from './aspect-whitelist.service';
+import { AppConfigService, LogService } from '@alfresco/adf-core';
+import { Observable } from 'rxjs/Observable';
+import { AspectProperty } from '../interfaces/content-metadata.interfaces';
+
+describe('PropertyDescriptorsService', () => {
+
+    let contentMetadataService: PropertyDescriptorsService,
+        aspectProperties: PropertyDescriptorLoaderService,
+        appConfigService: AppConfigService,
+        logService: LogService,
+        node: MinimalNodeEntryEntity,
+        testPresets: any;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            providers: [
+                PropertyDescriptorsService,
+                PropertyDescriptorLoaderService,
+                AppConfigService,
+                AspectWhiteListService,
+                { provide: LogService, useValue: { error: () => {} }},
+                AlfrescoApiService
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        contentMetadataService = TestBed.get(PropertyDescriptorsService);
+        aspectProperties = TestBed.get(PropertyDescriptorLoaderService);
+        appConfigService = TestBed.get(AppConfigService);
+        logService = TestBed.get(LogService);
+    });
+
+    afterEach(() => {
+        TestBed.resetTestingModule();
+    });
+
+    describe('getAspects', () => {
+
+        beforeEach(() => {
+            node = <MinimalNodeEntryEntity> { aspectNames: [ 'exif:exif', 'cm:content', 'custom:custom' ] };
+
+            testPresets = {};
+            appConfigService.config['content-metadata'] = {
+                presets: testPresets
+            };
+        });
+
+        it('should call the aspect properties loading for the default aspects related to the given node and defined in the app config', () => {
+            spyOn(aspectProperties, 'load').and.callFake(x => Observable.of({}));
+            testPresets.default = { 'exif:exif': [], 'custom:custom': [], 'banana:banana': [] };
+
+            contentMetadataService.getAspects(node);
+
+            expect(aspectProperties.load).toHaveBeenCalledWith(['exif:exif', 'custom:custom']);
+        });
+
+        it('should call the aspect properties loading for the defined aspects related to the given node and defined in the app config', () => {
+            spyOn(aspectProperties, 'load').and.callFake(x => Observable.of({}));
+            testPresets.pink = { 'cm:content': [], 'custom:custom': [] };
+
+            contentMetadataService.getAspects(node, 'pink');
+
+            expect(aspectProperties.load).toHaveBeenCalledWith(['cm:content', 'custom:custom']);
+        });
+
+        it('should call the aspect properties loading for all the node aspectNames if the "*" widecard is used for the preset', () => {
+            spyOn(aspectProperties, 'load').and.callFake(x => Observable.of({}));
+            testPresets.default = '*';
+
+            contentMetadataService.getAspects(node);
+
+            expect(aspectProperties.load).toHaveBeenCalledWith(['exif:exif', 'cm:content', 'custom:custom']);
+        });
+
+        it('should call the aspect properties loading for all the node aspectNames if there is no preset data defined in the app config', () => {
+            spyOn(aspectProperties, 'load').and.callFake(x => Observable.of({}));
+            spyOn(logService, 'error').and.stub();
+            appConfigService.config['content-metadata'] = undefined;
+
+            contentMetadataService.getAspects(node);
+
+            expect(logService.error).not.toHaveBeenCalled();
+            expect(aspectProperties.load).toHaveBeenCalledWith(['exif:exif', 'cm:content', 'custom:custom']);
+        });
+
+        it('should show meaningful error when invalid preset are given', () => {
+            spyOn(aspectProperties, 'load').and.callFake(x => Observable.of({}));
+            spyOn(logService, 'error').and.stub();
+            testPresets.pink = { 'cm:content': {}, 'custom:custom': {} };
+
+            contentMetadataService.getAspects(node, 'blue');
+
+            expect(logService.error).toHaveBeenCalledWith('No content-metadata preset for: blue');
+        });
+
+        it('should filter out properties which are not defined in the particular aspect', () => {
+            spyOn(aspectProperties, 'load').and.callFake(() => {
+                return Observable.of([
+                    {
+                        name: 'exif:exif',
+                        properties: [
+                            { name: 'exif:1' },
+                            { name: 'exif:2' }
+                        ]
+                    }
+                ]);
+            });
+
+            testPresets.default = { 'exif:exif': ['exif:2'] };
+
+            contentMetadataService.getAspects(node).subscribe({
+                next: (aspects) => {
+                    expect(aspects[0].name).toBe('exif:exif');
+                    expect(aspects[0].properties).toContain(<AspectProperty> { name: 'exif:2' });
+                    expect(aspects[0].properties).not.toContain(<AspectProperty> { name: 'exif:1' });
+                }
+            });
+        });
+
+        it('should accept "*" wildcard for aspect properties', () => {
+            spyOn(aspectProperties, 'load').and.callFake(() => {
+                return Observable.of([
+                    {
+                        name: 'exif:exif',
+                        properties: [
+                            { name: 'exif:1' },
+                            { name: 'exif:2' }
+                        ]
+                    },
+                    {
+                        name: 'custom:custom',
+                        properties: [
+                            { name: 'custom:1' },
+                            { name: 'custom:2' }
+                        ]
+                    }
+                ]);
+            });
+
+            testPresets.default = {
+                'exif:exif': '*',
+                'custom:custom': ['custom:1']
+            };
+
+            contentMetadataService.getAspects(node).subscribe({
+                next: (aspects) => {
+                    expect(aspects.length).toBe(2);
+                    expect(aspects[0].name).toBe('exif:exif');
+                    expect(aspects[0].properties).toContain(<AspectProperty> { name: 'exif:1' });
+                    expect(aspects[0].properties).toContain(<AspectProperty> { name: 'exif:2' });
+
+                    expect(aspects[1].name).toBe('custom:custom');
+                    expect(aspects[1].properties).toContain(<AspectProperty> { name: 'custom:1' });
+                    expect(aspects[1].properties).not.toContain(<AspectProperty> { name: 'custom:2' });
+                }
+            });
+        });
+
+        it('should filter out aspects which are not present in app config preset', () => {
+            spyOn(aspectProperties, 'load').and.callFake(() => {
+                return Observable.of([
+                    {
+                        name: 'exif:exif',
+                        properties: [
+                            { name: 'exif:1' }
+                        ]
+                    }
+                ]);
+            });
+
+            testPresets.default = {
+                'exif:exif': ['exif:1'],
+                'banana:banana': ['banana:1']
+            };
+
+            contentMetadataService.getAspects(node).subscribe({
+                next: (aspects) => {
+                    expect(aspects.length).toBe(1);
+                    expect(aspects[0].name).toBe('exif:exif');
+                    expect(aspects[0].properties).toContain(<AspectProperty> { name: 'exif:1' });
+                }
+            });
+        });
+    });
+});
diff --git a/lib/content-services/content-metadata/services/property-descriptors.service.ts b/lib/content-services/content-metadata/services/property-descriptors.service.ts
new file mode 100644
index 0000000000..1a24659a78
--- /dev/null
+++ b/lib/content-services/content-metadata/services/property-descriptors.service.ts
@@ -0,0 +1,60 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Injectable } from '@angular/core';
+import { MinimalNodeEntryEntity } from 'alfresco-js-api';
+import { PropertyDescriptorLoaderService } from './properties-loader.service';
+import { AspectWhiteListService } from './aspect-whitelist.service';
+import { Observable } from 'rxjs/Observable';
+import { Aspect, AspectProperty } from '../interfaces/content-metadata.interfaces';
+
+@Injectable()
+export class PropertyDescriptorsService {
+
+    constructor(private aspectWhiteListService: AspectWhiteListService,
+                private aspectPropertiesService: PropertyDescriptorLoaderService) {}
+
+    getAspects(node: MinimalNodeEntryEntity, presetName: string = 'default'): Observable<Aspect[]> {
+        this.aspectWhiteListService.choosePreset(presetName);
+
+        return this.loadAspectDescriptors(node.aspectNames)
+            .map(this.filterPropertiesByWhitelist.bind(this));
+    }
+
+    private loadAspectDescriptors(aspectsAssignedToNode: string[]): Observable<any> {
+        const aspectsToLoad = aspectsAssignedToNode
+            .filter(nodeAspectName => this.aspectWhiteListService.isAspectAllowed(nodeAspectName));
+
+        return this.aspectPropertiesService.load(aspectsToLoad);
+    }
+
+    private filterPropertiesByWhitelist(aspectDescriptors): Aspect[] {
+        return aspectDescriptors.map((aspectDescriptor) => {
+            return Object.assign({}, aspectDescriptor, {
+                properties: this.getFilteredPropertiesArray(aspectDescriptor)
+            });
+        });
+    }
+
+    private getFilteredPropertiesArray(aspectDescriptor): AspectProperty[] {
+        const aspectName = aspectDescriptor.name;
+
+        return Object.keys(aspectDescriptor.properties)
+            .map(propertyName => aspectDescriptor.properties[propertyName])
+            .filter(property => this.aspectWhiteListService.isPropertyAllowed(aspectName, property.name));
+    }
+}
diff --git a/lib/content-services/content-node-selector/content-node-dialog.service.spec.ts b/lib/content-services/content-node-selector/content-node-dialog.service.spec.ts
new file mode 100644
index 0000000000..dbc2adc35f
--- /dev/null
+++ b/lib/content-services/content-node-selector/content-node-dialog.service.spec.ts
@@ -0,0 +1,130 @@
+/*!
+ * @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 { async, TestBed, fakeAsync, tick } from '@angular/core/testing';
+import { MinimalNodeEntryEntity, SitePaging } from 'alfresco-js-api';
+import { AppConfigService, SitesService } from '@alfresco/adf-core';
+import { DocumentListService } from '../document-list/services/document-list.service';
+import { ContentNodeDialogService } from './content-node-dialog.service';
+import { MatDialog } from '@angular/material';
+import { Observable } from 'rxjs/Observable';
+
+const fakeNode: MinimalNodeEntryEntity = <MinimalNodeEntryEntity> {
+        id: 'fake',
+        name: 'fake-name'
+};
+
+const fakeSiteList: SitePaging = {
+       list: {
+        pagination: {
+            count: 1,
+            hasMoreItems: false,
+            totalItems: 1,
+            skipCount: 0,
+            maxItems: 100
+        },
+        entries: [
+            {
+                entry: {
+                    id: 'FAKE',
+                    guid: 'FAKE-GUID',
+                    title: 'FAKE-SITE-TITLE'
+                }
+            }
+        ]
+    }
+};
+
+describe('ContentNodeDialogService', () => {
+
+    let service: ContentNodeDialogService;
+    let documentListService: DocumentListService;
+    let sitesService: SitesService;
+    let materialDialog: MatDialog;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [],
+            providers: [
+                ContentNodeDialogService,
+                DocumentListService,
+                SitesService,
+                MatDialog
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        let appConfig: AppConfigService = TestBed.get(AppConfigService);
+        appConfig.config.ecmHost = 'http://localhost:9876/ecm';
+
+        service = TestBed.get(ContentNodeDialogService);
+        documentListService = TestBed.get(DocumentListService);
+        materialDialog = TestBed.get(MatDialog);
+        sitesService =  TestBed.get(SitesService);
+        spyOn(materialDialog, 'open').and.stub();
+        spyOn(materialDialog, 'closeAll').and.stub();
+
+    });
+
+    it('should be able to create the service', () => {
+        expect(service).not.toBeNull();
+    });
+
+    it('should be able to open the dialog when node has permission', () => {
+        service.openCopyMoveDialog('fake-action', fakeNode, '!update');
+        expect(materialDialog.open).toHaveBeenCalled();
+    });
+
+    it('should NOT be able to open the dialog when node has NOT permission', () => {
+        service.openCopyMoveDialog('fake-action', fakeNode, 'noperm').subscribe(
+            () => { },
+            (error) => {
+                expect(materialDialog.open).not.toHaveBeenCalled();
+                expect(JSON.parse(error.message).error.statusCode).toBe(403);
+            });
+    });
+
+    it('should be able to open the dialog using a folder id', fakeAsync(() => {
+        spyOn(documentListService, 'getFolderNode').and.returnValue(Promise.resolve(fakeNode));
+        service.openFileBrowseDialogByFolderId('fake-folder-id').subscribe();
+        tick();
+        expect(materialDialog.open).toHaveBeenCalled();
+    }));
+
+    it('should be able to open the dialog for files using the first user site', fakeAsync(() => {
+        spyOn(sitesService, 'getSites').and.returnValue(Observable.of(fakeSiteList));
+        spyOn(documentListService, 'getFolderNode').and.returnValue(Promise.resolve(fakeNode));
+        service.openFileBrowseDialogBySite().subscribe();
+        tick();
+        expect(materialDialog.open).toHaveBeenCalled();
+    }));
+
+    it('should be able to open the dialog for folder using the first user site', fakeAsync(() => {
+        spyOn(sitesService, 'getSites').and.returnValue(Observable.of(fakeSiteList));
+        spyOn(documentListService, 'getFolderNode').and.returnValue(Promise.resolve(fakeNode));
+        service.openFolderBrowseDialogBySite().subscribe();
+        tick();
+        expect(materialDialog.open).toHaveBeenCalled();
+    }));
+
+    it('should be able to close the material dialog', () => {
+        service.close();
+        expect(materialDialog.closeAll).toHaveBeenCalled();
+    });
+
+});
diff --git a/lib/content-services/content-node-selector/content-node-dialog.service.ts b/lib/content-services/content-node-selector/content-node-dialog.service.ts
new file mode 100644
index 0000000000..c6da1fe915
--- /dev/null
+++ b/lib/content-services/content-node-selector/content-node-dialog.service.ts
@@ -0,0 +1,173 @@
+/*!
+ * @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 { MatDialog } from '@angular/material';
+import { Injectable } from '@angular/core';
+import { ContentService } from '@alfresco/adf-core';
+import { Subject } from 'rxjs/Subject';
+import { Observable } from 'rxjs/Observable';
+import { ShareDataRow } from '../document-list/data/share-data-row.model';
+import { MinimalNodeEntryEntity, SitePaging } from 'alfresco-js-api';
+import { DataColumn, SitesService } from '@alfresco/adf-core';
+import { DocumentListService } from '../document-list/services/document-list.service';
+import { ContentNodeSelectorComponent } from './content-node-selector.component';
+import { ContentNodeSelectorComponentData } from './content-node-selector.component-data.interface';
+
+@Injectable()
+export class ContentNodeDialogService {
+
+    constructor(private dialog: MatDialog,
+                private contentService: ContentService,
+                private documentListService: DocumentListService,
+                private siteService: SitesService) { }
+
+    openFileBrowseDialogByFolderId(folderNodeId: string): Observable<MinimalNodeEntryEntity[]> {
+        return Observable.fromPromise(this.documentListService.getFolderNode(folderNodeId))
+            .switchMap((node: MinimalNodeEntryEntity) => {
+                return this.openUploadFileDialog('Choose', node);
+        });
+    }
+
+    openFileBrowseDialogBySite(): Observable<MinimalNodeEntryEntity[]> {
+       return this.siteService.getSites().switchMap((response: SitePaging) => {
+            return this.openFileBrowseDialogByFolderId(response.list.entries[0].entry.guid);
+        });
+    }
+
+    openFolderBrowseDialogBySite(): Observable<MinimalNodeEntryEntity[]> {
+        return this.siteService.getSites().switchMap((response: SitePaging) => {
+             return this.openFolderBrowseDialogByFolderId(response.list.entries[0].entry.guid);
+         });
+     }
+
+    openFolderBrowseDialogByFolderId(folderNodeId: string): Observable<MinimalNodeEntryEntity[]> {
+        return Observable.fromPromise(this.documentListService.getFolderNode(folderNodeId))
+            .switchMap((node: MinimalNodeEntryEntity) => {
+                return this.openUploadFolderDialog('Choose', node);
+        });
+    }
+
+    openCopyMoveDialog(action: string, contentEntry: MinimalNodeEntryEntity, permission?: string): Observable<MinimalNodeEntryEntity[]> {
+        if (this.contentService.hasPermission(contentEntry, permission)) {
+
+            const select = new Subject<MinimalNodeEntryEntity[]>();
+            select.subscribe({
+                complete: this.close.bind(this)
+            });
+
+            const data: ContentNodeSelectorComponentData = {
+                title: `${action} '${contentEntry.name}' to ...`,
+                actionName: action,
+                currentFolderId: contentEntry.parentId,
+                imageResolver: this.imageResolver.bind(this),
+                rowFilter : this.rowFilter.bind(this, contentEntry.id),
+                isSelectionValid: this.hasEntityCreatePermission.bind(this),
+                select: select
+            };
+
+            this.openContentNodeDialog(data, 'adf-content-node-selector-dialog', '630px');
+
+            return select;
+        } else {
+            let errors = new Error(JSON.stringify({ error: { statusCode: 403 } } ));
+            return Observable.throw(errors);
+        }
+    }
+
+    openUploadFolderDialog(action: string, contentEntry: MinimalNodeEntryEntity): Observable<MinimalNodeEntryEntity[]> {
+        const select = new Subject<MinimalNodeEntryEntity[]>();
+        select.subscribe({
+            complete: this.close.bind(this)
+        });
+
+        const data: ContentNodeSelectorComponentData = {
+            title: `${action} '${contentEntry.name}' to ...`,
+            actionName: action,
+            currentFolderId: contentEntry.id,
+            imageResolver: this.imageResolver.bind(this),
+            isSelectionValid: this.hasPermissionOnNodeFolder.bind(this),
+            rowFilter : this.rowFilter.bind(this, contentEntry.id),
+            select: select
+        };
+
+        this.openContentNodeDialog(data, 'adf-content-node-selector-dialog', '630px');
+        return select;
+    }
+
+    openUploadFileDialog(action: string, contentEntry: MinimalNodeEntryEntity): Observable<MinimalNodeEntryEntity[]> {
+            const select = new Subject<MinimalNodeEntryEntity[]>();
+            select.subscribe({
+                complete: this.close.bind(this)
+            });
+
+            const data: ContentNodeSelectorComponentData = {
+                title: `${action} '${contentEntry.name}' to ...`,
+                actionName: action,
+                currentFolderId: contentEntry.id,
+                imageResolver: this.imageResolver.bind(this),
+                isSelectionValid: this.isNodeFile.bind(this),
+                select: select
+            };
+
+            this.openContentNodeDialog(data, 'adf-content-node-selector-dialog', '630px');
+            return select;
+    }
+
+    private openContentNodeDialog(data: ContentNodeSelectorComponentData, currentPanelClass: string, chosenWidth: string) {
+        this.dialog.open(ContentNodeSelectorComponent, { data, panelClass: currentPanelClass, width: chosenWidth });
+    }
+
+    private imageResolver(row: ShareDataRow, col: DataColumn): string | null {
+        const entry: MinimalNodeEntryEntity = row.node.entry;
+        if (!this.contentService.hasPermission(entry, 'create')) {
+            return this.documentListService.getMimeTypeIcon('disable/folder');
+        }
+
+        return null;
+    }
+
+    private rowFilter(currentNodeId, row: ShareDataRow): boolean {
+        const node: MinimalNodeEntryEntity = row.node.entry;
+
+        if (node.id === currentNodeId || node.isFile) {
+            return false;
+        } else {
+            return true;
+        }
+    }
+
+    private isNodeFile(entry: MinimalNodeEntryEntity): boolean {
+        return entry.isFile;
+    }
+
+    private hasPermissionOnNodeFolder(entry: MinimalNodeEntryEntity): boolean {
+        return this.isNodeFolder(entry) && this.contentService.hasPermission(entry, 'create');
+    }
+
+    private isNodeFolder(entry: MinimalNodeEntryEntity): boolean {
+        return entry.isFolder;
+    }
+
+    private hasEntityCreatePermission(entry: MinimalNodeEntryEntity): boolean {
+        return this.contentService.hasPermission(entry, 'create');
+    }
+
+    close() {
+        this.dialog.closeAll();
+    }
+
+}
diff --git a/lib/content-services/content-node-selector/content-node-selector-panel.component.html b/lib/content-services/content-node-selector/content-node-selector-panel.component.html
new file mode 100644
index 0000000000..ef18759562
--- /dev/null
+++ b/lib/content-services/content-node-selector/content-node-selector-panel.component.html
@@ -0,0 +1,95 @@
+<div (node-select)="onNodeSelect($event)">
+    <mat-form-field floatPlaceholder="never" class="adf-content-node-selector-content-input">
+            <input matInput
+                id="searchInput"
+                [formControl]="searchInput"
+                type="text"
+                placeholder="Search"
+                [value]="searchTerm"
+                data-automation-id="content-node-selector-search-input">
+
+            <mat-icon *ngIf="searchTerm.length > 0"
+                matSuffix (click)="clear()"
+                class="adf-content-node-selector-content-input-icon"
+                data-automation-id="content-node-selector-search-clear">clear
+            </mat-icon>
+
+            <mat-icon *ngIf="searchTerm.length === 0"
+                matSuffix
+                class="adf-content-node-selector-content-input-icon"
+                data-automation-id="content-node-selector-search-icon">search
+            </mat-icon>
+
+        </mat-form-field>
+
+        <adf-sites-dropdown
+            (change)="siteChanged($event)"
+            [placeholder]="'NODE_SELECTOR.SELECT_LOCATION'"
+            [hideMyFiles]="dropdownHideMyFiles"
+            [siteList]="dropdownSiteList"
+            data-automation-id="content-node-selector-sites-combo"></adf-sites-dropdown>
+
+        <adf-toolbar>
+            <adf-toolbar-title>
+                <adf-dropdown-breadcrumb *ngIf="needBreadcrumbs()"
+                    class="adf-content-node-selector-content-breadcrumb"
+                    (navigate)="clear()"
+                    [target]="documentList"
+                    [folderNode]="breadcrumbFolderNode"
+                    data-automation-id="content-node-selector-content-breadcrumb">
+                </adf-dropdown-breadcrumb>
+            </adf-toolbar-title>
+        </adf-toolbar>
+
+        <div
+            class="adf-content-node-selector-content-list"
+            [class.adf-content-node-selector-content-list-searchLayout]="showingSearchResults"
+            data-automation-id="content-node-selector-content-list">
+            <adf-document-list
+                #documentList
+                adf-highlight
+                adf-highlight-selector="adf-name-location-cell .adf-name-location-cell-name"
+                [node]="nodes"
+                [maxItems]="pageSize"
+                [skipCount]="skipCount"
+                [enableInfiniteScrolling]="infiniteScroll"
+                [rowFilter]="rowFilter"
+                [imageResolver]="imageResolver"
+                [currentFolderId]="folderIdToShow"
+                selectionMode="single"
+                [contextMenuActions]="false"
+                [contentActions]="false"
+                [allowDropFiles]="false"
+                (folderChange)="onFolderChange()"
+                (ready)="onFolderLoaded($event)"
+                (node-dblclick)="onNodeDoubleClick($event)"
+                data-automation-id="content-node-selector-document-list">
+                <empty-folder-content>
+                    <ng-template>
+                        <div>{{ 'NODE_SELECTOR.NO_RESULTS' | translate }}</div>
+                    </ng-template>
+                </empty-folder-content>
+
+                <data-columns>
+                    <data-column key="$thumbnail" type="image"></data-column>
+                    <data-column key="name" type="text" class="full-width ellipsis-cell">
+                        <ng-template let-context="$implicit">
+                            <adf-name-location-cell [data]="context.data" [column]="context.col" [row]="context.row"></adf-name-location-cell>
+                        </ng-template>
+                    </data-column>
+                    <data-column key="modifiedAt" type="date" format="timeAgo" class="adf-content-selector-modified-cell"></data-column>
+                    <data-column key="modifiedByUser.displayName" type="text" class="adf-content-selector-modifier-cell"></data-column>
+                </data-columns>
+
+            </adf-document-list>
+
+            <adf-infinite-pagination
+                [pagination]="pagination"
+                [pageSize]="pageSize"
+                [loading]="loadingSearchResults"
+                (loadMore)="getNextPageOfSearch($event)"
+                data-automation-id="content-node-selector-search-pagination">
+                {{ 'ADF-DOCUMENT-LIST.LAYOUT.LOAD_MORE' | translate }}
+            </adf-infinite-pagination>
+        </div>
+</div>
diff --git a/lib/content-services/content-node-selector/content-node-selector-panel.component.scss b/lib/content-services/content-node-selector/content-node-selector-panel.component.scss
new file mode 100644
index 0000000000..50024727fc
--- /dev/null
+++ b/lib/content-services/content-node-selector/content-node-selector-panel.component.scss
@@ -0,0 +1,161 @@
+@mixin adf-content-node-selector-theme($theme) {
+    $primary: map-get($theme, primary);
+    $foreground: map-get($theme, foreground);
+    $background: map-get($theme, background);
+
+    .adf-content-node-selector {
+
+        &-content {
+            padding-top: 0;
+
+            &-input {
+                width: 100%;
+
+                &-icon {
+                    color: mat-color($foreground, disabled-button);
+                    cursor: pointer;
+
+                    &:hover {
+                        color: mat-color($foreground, base);
+                    }
+                }
+            }
+
+            .mat-input-underline .mat-input-ripple {
+                height: 1px;
+                transition: none;
+            }
+
+            .adf-site-dropdown-container {
+                .mat-form-field {
+                    display: block;
+                    margin-bottom: 15px;
+                }
+            }
+
+            .adf-site-dropdown-list-element {
+                width: 100%;
+                margin-bottom: 0;
+
+                .mat-select-trigger {
+                    font-size: 14px;
+                }
+
+            }
+
+            .adf-toolbar .mat-toolbar {
+                border-bottom-width: 0;
+                font-size: 14px;
+
+                &.mat-toolbar-single-row {
+                    height: auto;
+                }
+            }
+
+            &-breadcrumb {
+                .adf-dropdown-breadcumb-trigger {
+                    outline: none;
+                    .mat-icon {
+                        color: mat-color($foreground, base, 0.45);
+
+                        &:hover {
+                            color: mat-color($foreground, base, 0.65);
+                        }
+                    }
+                }
+
+                .adf-dropddown-breadcrumb-item-chevron {
+                    color: mat-color($foreground, base, 0.45);
+                }
+            }
+
+            &-list {
+                height: 200px;
+                overflow: auto;
+                border: 1px solid mat-color($foreground, base, 0.07);
+
+                .adf-highlight {
+                    color: mat-color($primary);
+                }
+
+                .adf-data-table {
+                    border: none;
+
+                    .adf-no-content-container {
+                        text-align: center;
+                    }
+
+                    thead {
+                        display: none;
+                    }
+
+                    .adf-data-table-cell {
+                        padding-top: 8px;
+                        padding-bottom: 8px;
+                        height: 30px;
+
+                        & .adf-name-location-cell-location {
+                            display: none;
+                        }
+
+                        & .adf-name-location-cell-name {
+                            padding: 0;
+                        }
+
+                        &--image {
+                            padding-left: 16px;
+                            padding-right: 8px;
+                        }
+
+                        &--text {
+                            padding-left: 8px;
+                        }
+                    }
+
+                    tbody tr {
+                        height: auto !important;
+
+                        &:first-child {
+                            .adf-data-table-cell {
+                                border-top: none;
+                            }
+                        }
+
+                        &:last-child {
+                            .adf-data-table-cell {
+                                border-bottom: none;
+                            }
+                        }
+                    }
+                }
+
+                &-searchLayout {
+
+                    .adf-data-table {
+                        .adf-data-table-cell {
+                            height: 56px;
+                            padding-bottom: 24px;
+
+                            & .adf-name-location-cell-location {
+                                display: block
+                            }
+
+                            & .adf-name-location-cell-name {
+                                padding: 18px 0 2px 0;
+                            }
+
+                            &.adf-content-selector-modified-cell {
+                                display: none;
+                            }
+
+                            &.adf-content-selector-modifier-cell {
+                                display: none;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+}
diff --git a/lib/content-services/content-node-selector/content-node-selector-panel.component.spec.ts b/lib/content-services/content-node-selector/content-node-selector-panel.component.spec.ts
new file mode 100644
index 0000000000..ea412d8c9b
--- /dev/null
+++ b/lib/content-services/content-node-selector/content-node-selector-panel.component.spec.ts
@@ -0,0 +1,687 @@
+/*!
+ * @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 { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { MinimalNodeEntryEntity, SiteEntry } from 'alfresco-js-api';
+import {
+    AlfrescoApiService,
+    ContentService,
+    TranslationService,
+    SearchService,
+    SitesService,
+    UserPreferencesService
+} from '@alfresco/adf-core';
+import { DataTableModule } from '@alfresco/adf-core';
+import { Observable } from 'rxjs/Observable';
+import { Observer } from 'rxjs/Observer';
+import { MaterialModule } from '../material.module';
+import { EmptyFolderContentDirective, DocumentListComponent, DocumentListService } from '../document-list';
+import { DropdownSitesComponent } from '../site-dropdown';
+import { DropdownBreadcrumbComponent } from '../breadcrumb';
+import { ContentNodeSelectorPanelComponent } from './content-node-selector-panel.component';
+import { ContentNodeSelectorService } from './content-node-selector.service';
+import { NodePaging } from 'alfresco-js-api';
+
+const ONE_FOLDER_RESULT = {
+    list: {
+        entries: [
+            {
+                entry: {
+                    id: '123', name: 'MyFolder', isFile: false, isFolder: true,
+                    createdByUser: { displayName: 'John Doe' },
+                    modifiedByUser: { displayName: 'John Doe' }
+                }
+            }
+        ],
+        pagination: {
+            hasMoreItems: true
+        }
+    }
+};
+
+describe('ContentNodeSelectorComponent', () => {
+    let component: ContentNodeSelectorPanelComponent;
+    let fixture: ComponentFixture<ContentNodeSelectorPanelComponent>;
+    let searchService: SearchService;
+    let searchSpy: jasmine.Spy;
+
+    let _observer: Observer<NodePaging>;
+
+    function typeToSearchBox(searchTerm = 'string-to-search') {
+        let searchInput = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-search-input"]'));
+        searchInput.nativeElement.value = searchTerm;
+        component.searchInput.setValue(searchTerm);
+        fixture.detectChanges();
+    }
+
+    function respondWithSearchResults(result) {
+        _observer.next(result);
+    }
+
+    function returnAlwaysTrue(entry: MinimalNodeEntryEntity) {
+        return true;
+    }
+
+    function setupTestbed(plusProviders) {
+        TestBed.configureTestingModule({
+            imports: [
+                DataTableModule,
+                MaterialModule
+            ],
+            declarations: [
+                DocumentListComponent,
+                EmptyFolderContentDirective,
+                DropdownSitesComponent,
+                DropdownBreadcrumbComponent,
+                ContentNodeSelectorPanelComponent
+            ],
+            providers: [
+                AlfrescoApiService,
+                ContentService,
+                SearchService,
+                TranslationService,
+                DocumentListService,
+                SitesService,
+                ContentNodeSelectorService,
+                UserPreferencesService,
+                ...plusProviders
+            ],
+            schemas: [CUSTOM_ELEMENTS_SCHEMA]
+        });
+    }
+
+    afterEach(() => {
+        fixture.destroy();
+        TestBed.resetTestingModule();
+    });
+
+    describe('General component features', () => {
+
+        beforeEach(async(() => {
+            setupTestbed([]);
+            TestBed.compileComponents();
+        }));
+
+        beforeEach(() => {
+            fixture = TestBed.createComponent(ContentNodeSelectorPanelComponent);
+            component = fixture.componentInstance;
+            component.debounceSearch = 0;
+
+            searchService = TestBed.get(SearchService);
+            searchSpy = spyOn(searchService, 'searchByQueryBody').and.callFake(() => {
+                return Observable.create((observer: Observer<NodePaging>) => {
+                    _observer = observer;
+                });
+            });
+        });
+
+        describe('Parameters', () => {
+
+            it('should trigger the select event when selection has been made', (done) => {
+                const expectedNode = <MinimalNodeEntryEntity> {};
+                component.select.subscribe((nodes) => {
+                    expect(nodes.length).toBe(1);
+                    expect(nodes[0]).toBe(expectedNode);
+                    done();
+                });
+
+                component.chosenNode = expectedNode;
+            });
+        });
+
+        describe('Breadcrumbs', () => {
+
+            let documentListService,
+                sitesService,
+                expectedDefaultFolderNode;
+
+            beforeEach(() => {
+                expectedDefaultFolderNode = <MinimalNodeEntryEntity> { path: { elements: [] } };
+                documentListService = TestBed.get(DocumentListService);
+                sitesService = TestBed.get(SitesService);
+                spyOn(documentListService, 'getFolderNode').and.returnValue(Promise.resolve(expectedDefaultFolderNode));
+                spyOn(documentListService, 'getFolder').and.returnValue(Observable.throw('No results for test'));
+                spyOn(sitesService, 'getSites').and.returnValue(Observable.of({ list: { entries: [] } }));
+                spyOn(component.documentList, 'loadFolderNodesByFolderNodeId').and.returnValue(Promise.resolve());
+                component.currentFolderId = 'cat-girl-nuku-nuku';
+                fixture.detectChanges();
+            });
+
+            it('should show the breadcrumb for the currentFolderId by default', (done) => {
+                fixture.detectChanges();
+
+                fixture.whenStable().then(() => {
+                    fixture.detectChanges();
+                    const breadcrumb = fixture.debugElement.query(By.directive(DropdownBreadcrumbComponent));
+                    expect(breadcrumb).not.toBeNull();
+                    expect(breadcrumb.componentInstance.folderNode).toBe(expectedDefaultFolderNode);
+                    done();
+                });
+            });
+
+            it('should not show the breadcrumb if search was performed as last action', (done) => {
+                typeToSearchBox();
+                fixture.detectChanges();
+
+                setTimeout(() => {
+                    respondWithSearchResults(ONE_FOLDER_RESULT);
+
+                    fixture.whenStable().then(() => {
+                        fixture.detectChanges();
+                        const breadcrumb = fixture.debugElement.query(By.directive(DropdownBreadcrumbComponent));
+                        expect(breadcrumb).toBeNull();
+                        done();
+                    });
+                }, 300);
+
+            });
+
+            it('should show the breadcrumb again on folder navigation in the results list', (done) => {
+                typeToSearchBox();
+                fixture.detectChanges();
+
+                setTimeout(() => {
+                    respondWithSearchResults(ONE_FOLDER_RESULT);
+                    fixture.whenStable().then(() => {
+                        fixture.detectChanges();
+                        component.onFolderChange();
+                        fixture.detectChanges();
+                        const breadcrumb = fixture.debugElement.query(By.directive(DropdownBreadcrumbComponent));
+                        expect(breadcrumb).not.toBeNull();
+                        done();
+                    });
+                }, 300);
+
+            });
+
+            it('should show the breadcrumb for the selected node when search results are displayed', (done) => {
+                const alfrescoContentService = TestBed.get(ContentService);
+                spyOn(alfrescoContentService, 'hasPermission').and.returnValue(true);
+
+                typeToSearchBox();
+
+                setTimeout(() => {
+                    respondWithSearchResults(ONE_FOLDER_RESULT);
+                    fixture.whenStable().then(() => {
+                        fixture.detectChanges();
+
+                        const chosenNode = <MinimalNodeEntryEntity> { path: { elements: ['one'] } };
+                        component.onNodeSelect({ detail: { node: { entry: chosenNode } } });
+                        fixture.detectChanges();
+
+                        const breadcrumb = fixture.debugElement.query(By.directive(DropdownBreadcrumbComponent));
+                        expect(breadcrumb).not.toBeNull();
+                        expect(breadcrumb.componentInstance.folderNode.path).toBe(chosenNode.path);
+                        done();
+                    });
+                }, 300);
+            });
+
+            it('should NOT show the breadcrumb for the selected node when not on search results list', (done) => {
+                const alfrescoContentService = TestBed.get(ContentService);
+                spyOn(alfrescoContentService, 'hasPermission').and.returnValue(true);
+
+                typeToSearchBox();
+
+                setTimeout(() => {
+                    respondWithSearchResults(ONE_FOLDER_RESULT);
+
+                    fixture.detectChanges();
+                    component.onFolderChange();
+                    fixture.detectChanges();
+
+                    const chosenNode = <MinimalNodeEntryEntity> { path: { elements: [] } };
+                    component.onNodeSelect({ detail: { node: { entry: chosenNode } } });
+                    fixture.detectChanges();
+
+                    const breadcrumb = fixture.debugElement.query(By.directive(DropdownBreadcrumbComponent));
+                    expect(breadcrumb).not.toBeNull();
+                    expect(breadcrumb.componentInstance.folderNode).toBe(expectedDefaultFolderNode);
+                    done();
+                }, 300);
+            });
+        });
+
+        describe('Search functionality', () => {
+
+            function defaultSearchOptions(searchTerm, rootNodeId = undefined, skipCount = 0) {
+
+                const parentFiltering = rootNodeId ? [{ query: `ANCESTOR:'workspace://SpacesStore/${rootNodeId}'` }] : [];
+
+                let defaultSearchNode: any = {
+                    query: {
+                        query: searchTerm ? `${searchTerm}* OR name:${searchTerm}*` : searchTerm
+                    },
+                    include: ['path', 'allowableOperations'],
+                    paging: {
+                        maxItems: '25',
+                        skipCount: skipCount.toString()
+                    },
+                    filterQueries: [
+                        { query: "TYPE:'cm:folder'" },
+                        { query: 'NOT cm:creator:System' },
+                        ...parentFiltering
+                    ],
+                    scope: {
+                        locations: ['nodes']
+                    }
+                };
+
+                return defaultSearchNode;
+            }
+
+            beforeEach(() => {
+                const documentListService = TestBed.get(DocumentListService);
+                const expectedDefaultFolderNode = <MinimalNodeEntryEntity> { path: { elements: [] } };
+
+                spyOn(documentListService, 'getFolderNode').and.returnValue(Promise.resolve(expectedDefaultFolderNode));
+                spyOn(component.documentList, 'loadFolderNodesByFolderNodeId').and.returnValue(Promise.resolve());
+
+                component.currentFolderId = 'cat-girl-nuku-nuku';
+                fixture.detectChanges();
+            });
+
+            it('should load the results by calling the search api on search change', (done) => {
+                typeToSearchBox('kakarot');
+
+                setTimeout(() => {
+                    expect(searchSpy).toHaveBeenCalledWith(defaultSearchOptions('kakarot'));
+                    done();
+                }, 300);
+            });
+
+            it('should reset the currently chosen node in case of starting a new search', (done) => {
+                component.chosenNode = <MinimalNodeEntryEntity> {};
+                typeToSearchBox('kakarot');
+
+                setTimeout(() => {
+                    expect(component.chosenNode).toBeNull();
+                    done();
+                }, 300);
+            });
+
+            it('should call the search api on changing the site selectbox\'s value', (done) => {
+                typeToSearchBox('vegeta');
+
+                setTimeout(() => {
+                    expect(searchSpy.calls.count()).toBe(1, 'Search count should be one after only one search');
+
+                    component.siteChanged(<SiteEntry> { entry: { guid: 'namek' } });
+
+                    expect(searchSpy.calls.count()).toBe(2, 'Search count should be two after the site change');
+                    expect(searchSpy.calls.argsFor(1)).toEqual([defaultSearchOptions('vegeta', 'namek')] );
+                    done();
+                }, 300);
+            });
+
+            it('should show the search icon by default without the X (clear) icon', (done) => {
+                fixture.detectChanges();
+                setTimeout(() => {
+
+                    let searchIcon = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-search-icon"]'));
+                    let clearIcon = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-search-clear"]'));
+
+                    expect(searchIcon).not.toBeNull('Search icon should be in the DOM');
+                    expect(clearIcon).toBeNull('Clear icon should NOT be in the DOM');
+                    done();
+                }, 300);
+            });
+
+            it('should show the X (clear) icon without the search icon when the search contains at least one character', (done) => {
+                fixture.detectChanges();
+                typeToSearchBox('123');
+
+                setTimeout(() => {
+                    fixture.detectChanges();
+
+                    let searchIcon = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-search-icon"]'));
+                    let clearIcon = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-search-clear"]'));
+
+                    expect(searchIcon).toBeNull('Search icon should NOT be in the DOM');
+                    expect(clearIcon).not.toBeNull('Clear icon should be in the DOM');
+                    done();
+                }, 300);
+            });
+
+            it('should clear the search field, nodes and chosenNode when clicking on the X (clear) icon', () => {
+                component.chosenNode = <MinimalNodeEntryEntity> {};
+                component.nodes = {
+                    list: {
+                        entries: [{ entry: component.chosenNode }]
+                    }
+                };
+                component.searchTerm = 'piccolo';
+                component.showingSearchResults = true;
+
+                component.clear();
+
+                expect(component.searchTerm).toBe('');
+                expect(component.nodes).toEqual(null);
+                expect(component.chosenNode).toBeNull();
+                expect(component.showingSearchResults).toBeFalsy();
+            });
+
+            it('should show the current folder\'s content instead of search results if search was not performed', () => {
+                let documentList = fixture.debugElement.query(By.directive(DocumentListComponent));
+                expect(documentList).not.toBeNull('Document list should be shown');
+                expect(documentList.componentInstance.currentFolderId).toBe('cat-girl-nuku-nuku');
+            });
+
+            it('should pass through the rowFilter to the documentList', () => {
+                const filter = () => {
+                };
+                component.rowFilter = filter;
+
+                fixture.detectChanges();
+
+                let documentList = fixture.debugElement.query(By.directive(DocumentListComponent));
+                expect(documentList).not.toBeNull('Document list should be shown');
+                expect(documentList.componentInstance.rowFilter).toBe(filter);
+            });
+
+            it('should pass through the imageResolver to the documentList', () => {
+                const resolver = () => 'piccolo';
+                component.imageResolver = resolver;
+
+                fixture.detectChanges();
+
+                let documentList = fixture.debugElement.query(By.directive(DocumentListComponent));
+                expect(documentList).not.toBeNull('Document list should be shown');
+                expect(documentList.componentInstance.imageResolver).toBe(resolver);
+            });
+
+            it('should show the result list when search was performed', (done) => {
+                typeToSearchBox();
+
+                setTimeout(() => {
+                    respondWithSearchResults(ONE_FOLDER_RESULT);
+
+                    fixture.detectChanges();
+                    let documentList = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-document-list"]'));
+                    expect(documentList).not.toBeNull('Document list should be shown');
+                    expect(documentList.componentInstance.currentFolderId).toBeNull();
+                    done();
+                }, 300);
+            });
+
+            xit('should highlight the results when search was performed in the next timeframe', (done) => {
+                spyOn(component.highlighter, 'highlight');
+                typeToSearchBox('shenron');
+
+                setTimeout(() => {
+                    respondWithSearchResults(ONE_FOLDER_RESULT);
+                    fixture.detectChanges();
+
+                    expect(component.highlighter.highlight).not.toHaveBeenCalled();
+
+                    setTimeout(() => {
+                        expect(component.highlighter.highlight).toHaveBeenCalledWith('shenron');
+                    }, 300);
+
+                    done();
+                }, 300);
+
+            });
+
+            it('should show the default text instead of result list if search was cleared', (done) => {
+                typeToSearchBox();
+
+                setTimeout(() => {
+                    respondWithSearchResults(ONE_FOLDER_RESULT);
+                    fixture.detectChanges();
+
+                    fixture.whenStable().then(() => {
+                        let clearButton = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-search-clear"]'));
+                        expect(clearButton).not.toBeNull('Clear button should be in DOM');
+                        clearButton.triggerEventHandler('click', {});
+                        fixture.detectChanges();
+
+                        let documentList = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-document-list"]'));
+                        expect(documentList).not.toBeNull('Document list should be shown');
+                        expect(documentList.componentInstance.currentFolderId).toBe('cat-girl-nuku-nuku');
+                        done();
+                    });
+                }, 300);
+            });
+
+            xit('should reload the original documentlist when clearing the search input', (done) => {
+                typeToSearchBox('shenron');
+
+                setTimeout(() => {
+                    respondWithSearchResults(ONE_FOLDER_RESULT);
+
+                    typeToSearchBox('');
+                    fixture.detectChanges();
+
+                    setTimeout(() => {
+                        let documentList = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-document-list"]'));
+                        expect(documentList.componentInstance.currentFolderId).toBe('cat-girl-nuku-nuku');
+                    }, 300);
+
+                    done();
+                }, 300);
+            });
+
+            it('should set the folderIdToShow to the default "currentFolderId" if siteId is undefined', (done) => {
+                component.siteChanged(<SiteEntry> { entry: { guid: 'Kame-Sennin Muten Roshi' } });
+                fixture.detectChanges();
+
+                let documentList = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-document-list"]'));
+                expect(documentList.componentInstance.currentFolderId).toBe('Kame-Sennin Muten Roshi');
+
+                component.siteChanged(<SiteEntry> { entry: { guid: undefined } });
+                fixture.detectChanges();
+
+                documentList = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-document-list"]'));
+                expect(documentList.componentInstance.currentFolderId).toBe('cat-girl-nuku-nuku');
+
+                done();
+            });
+
+            describe('Pagination "Load more" button', () => {
+
+                it('should NOT be shown by default', () => {
+                    fixture.detectChanges();
+                    const pagination = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-button"]'));
+                    expect(pagination).toBeNull();
+                });
+
+                it('should be shown when diplaying search results', (done) => {
+                    typeToSearchBox('shenron');
+
+                    setTimeout(() => {
+                        respondWithSearchResults(ONE_FOLDER_RESULT);
+
+                        fixture.whenStable().then(() => {
+                            fixture.detectChanges();
+                            const pagination = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-search-pagination"]'));
+                            expect(pagination).not.toBeNull();
+                            done();
+                        });
+                    }, 300);
+                });
+
+                it('button\'s callback should load the next batch of results by calling the search api', () => {
+                    const skipCount = 8;
+                    component.searchTerm = 'kakarot';
+
+                    component.getNextPageOfSearch({ skipCount });
+
+                    expect(searchSpy).toHaveBeenCalledWith(defaultSearchOptions('kakarot', undefined, skipCount));
+                });
+
+                it('should be shown when pagination\'s hasMoreItems is true', () => {
+                    component.pagination = {
+                        hasMoreItems: true
+                    };
+                    fixture.detectChanges();
+
+                    const pagination = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-search-pagination"]'));
+                    expect(pagination).not.toBeNull();
+                });
+
+                it('button\'s callback should load the next batch of folder results when there is no searchTerm', () => {
+                    const skipCount = 5;
+
+                    component.searchTerm = '';
+                    component.pagination = {
+                        hasMoreItems: true
+                    };
+                    fixture.detectChanges();
+
+                    component.getNextPageOfSearch({skipCount});
+                    fixture.detectChanges();
+                    expect(component.searchTerm).toBe('');
+
+                    expect(component.infiniteScroll).toBeTruthy();
+                    expect(component.skipCount).toBe(skipCount);
+                    expect(searchSpy).not.toHaveBeenCalled();
+                });
+
+                it('should set its loading state to true after search was started', (done) => {
+                    component.showingSearchResults = true;
+                    component.pagination = { hasMoreItems: true };
+
+                    typeToSearchBox('shenron');
+
+                    setTimeout(() => {
+                        fixture.detectChanges();
+
+                        const spinnerSelector = By.css('[data-automation-id="content-node-selector-search-pagination"] [data-automation-id="adf-infinite-pagination-spinner"]');
+                        const paginationLoading = fixture.debugElement.query(spinnerSelector);
+                        expect(paginationLoading).not.toBeNull();
+                        done();
+                    }, 300);
+                });
+
+                it('should set its loading state to true after search was performed', (done) => {
+                    component.showingSearchResults = true;
+                    component.pagination = { hasMoreItems: true };
+
+                    typeToSearchBox('shenron');
+                    fixture.detectChanges();
+
+                    setTimeout(() => {
+                        respondWithSearchResults(ONE_FOLDER_RESULT);
+
+                        fixture.whenStable().then(() => {
+                            fixture.detectChanges();
+                            const spinnerSelector = By.css('[data-automation-id="content-node-selector-search-pagination"] [data-automation-id="adf-infinite-pagination-spinner"]');
+                            const paginationLoading = fixture.debugElement.query(spinnerSelector);
+                            expect(paginationLoading).toBeNull();
+                            done();
+                        });
+                    }, 300);
+                });
+            });
+        });
+
+        describe('Action button for the chosen node', () => {
+
+            const entry: MinimalNodeEntryEntity = <MinimalNodeEntryEntity> { list: {entries: [{}]}};
+            const nodePage: NodePaging = <NodePaging> {list: {}, pagination: {}};
+            let hasPermission;
+
+            beforeEach(() => {
+                const alfrescoContentService = TestBed.get(ContentService);
+                spyOn(alfrescoContentService, 'hasPermission').and.callFake(() => hasPermission);
+                component.isSelectionValid = returnAlwaysTrue.bind(this);
+            });
+
+            it('should become enabled after loading node with the necessary permissions', async(() => {
+                hasPermission = true;
+                component.documentList.folderNode = entry;
+
+                component.select.subscribe((nodes) => {
+                    expect(nodes).toBeDefined();
+                    expect(nodes).not.toBeNull();
+                });
+
+                component.documentList.ready.emit(nodePage);
+                fixture.detectChanges();
+            }));
+
+            it('should remain disabled after loading node without the necessary permissions', () => {
+                hasPermission = false;
+                component.documentList.folderNode = entry;
+
+                component.select.subscribe((nodes) => {
+                    expect(nodes).toBeDefined();
+                    expect(nodes).not.toBeNull();
+                });
+
+                component.documentList.ready.emit(nodePage);
+                fixture.detectChanges();
+            });
+
+            it('should be enabled when clicking on a node (with the right permissions) in the list (onNodeSelect)', () => {
+                hasPermission = true;
+
+                component.select.subscribe((nodes) => {
+                    expect(nodes).toBeDefined();
+                    expect(nodes).not.toBeNull();
+                });
+
+                component.onNodeSelect({ detail: { node: { entry } } });
+                fixture.detectChanges();
+            });
+
+            it('should remain disabled when clicking on a node (with the WRONG permissions) in the list (onNodeSelect)', () => {
+                hasPermission = false;
+
+                component.select.subscribe((nodes) => {
+                    expect(nodes).toBeDefined();
+                    expect(nodes).not.toBeNull();
+                });
+
+                component.onNodeSelect({ detail: { node: { entry } } });
+                fixture.detectChanges();
+            });
+
+            it('should become disabled when clicking on a node (with the WRONG permissions) after previously selecting a right node', () => {
+                component.select.subscribe((nodes) => {
+                    expect(nodes).toBeDefined();
+                    expect(nodes).not.toBeNull();
+                });
+
+                hasPermission = true;
+                component.onNodeSelect({ detail: { node: { entry } } });
+                fixture.detectChanges();
+
+                hasPermission = false;
+                component.onNodeSelect({ detail: { node: { entry } } });
+                fixture.detectChanges();
+            });
+
+            it('should emit null when the chosenNode is reset', () => {
+                hasPermission = true;
+                component.onNodeSelect({ detail: { node: { entry: <MinimalNodeEntryEntity> {} } } });
+                fixture.detectChanges();
+
+                component.select.subscribe((nodes) => {
+                    expect(nodes).toBeDefined();
+                    expect(nodes).toBeNull();
+                });
+
+                component.resetChosenNode();
+                fixture.detectChanges();
+            });
+        });
+    });
+});
diff --git a/lib/content-services/content-node-selector/content-node-selector-panel.component.ts b/lib/content-services/content-node-selector/content-node-selector-panel.component.ts
new file mode 100644
index 0000000000..1a512375f4
--- /dev/null
+++ b/lib/content-services/content-node-selector/content-node-selector-panel.component.ts
@@ -0,0 +1,318 @@
+/*!
+ * @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,
+    EventEmitter,
+    Input,
+    OnInit,
+    Output,
+    ViewChild,
+    ViewEncapsulation
+} from '@angular/core';
+import {
+    AlfrescoApiService,
+    HighlightDirective,
+    UserPreferencesService
+} from '@alfresco/adf-core';
+import { FormControl } from '@angular/forms';
+import { MinimalNodeEntryEntity, NodePaging, Pagination, SiteEntry, SitePaging } from 'alfresco-js-api';
+import { DocumentListComponent, PaginationStrategy } from '../document-list/components/document-list.component';
+import { RowFilter } from '../document-list/data/row-filter.model';
+import { ImageResolver } from '../document-list/data/image-resolver.model';
+import { ContentNodeSelectorService } from './content-node-selector.service';
+import { debounceTime } from 'rxjs/operators';
+
+export type ValidationFunction = (entry: MinimalNodeEntryEntity) => boolean;
+
+const defaultValidation = () => true;
+
+@Component({
+    selector: 'adf-content-node-selector-panel',
+    styleUrls: ['./content-node-selector-panel.component.scss'],
+    templateUrl: './content-node-selector-panel.component.html',
+    encapsulation: ViewEncapsulation.None
+})
+export class ContentNodeSelectorPanelComponent implements OnInit {
+
+    @Input()
+    currentFolderId: string = null;
+
+    @Input()
+    dropdownHideMyFiles: boolean = false;
+
+    @Input()
+    dropdownSiteList: SitePaging = null;
+
+    @Input()
+    rowFilter: RowFilter = null;
+
+    @Input()
+    imageResolver: ImageResolver = null;
+
+    @Input()
+    pageSize: number;
+
+    @Input()
+    isSelectionValid: ValidationFunction = defaultValidation;
+
+    @Output()
+    select: EventEmitter<MinimalNodeEntryEntity[]> = new EventEmitter<MinimalNodeEntryEntity[]>();
+
+    @ViewChild(DocumentListComponent)
+    documentList: DocumentListComponent;
+
+    @ViewChild(HighlightDirective)
+    highlighter: HighlightDirective;
+
+    nodes: NodePaging | null = null;
+    siteId: null | string;
+    searchTerm: string = '';
+    showingSearchResults: boolean = false;
+    loadingSearchResults: boolean = false;
+    inDialog: boolean = false;
+    _chosenNode: MinimalNodeEntryEntity = null;
+    folderIdToShow: string | null = null;
+    paginationStrategy: PaginationStrategy;
+    pagination: Pagination;
+    skipCount: number = 0;
+    infiniteScroll: boolean = false;
+    debounceSearch: number= 200;
+    searchInput: FormControl = new FormControl();
+
+    constructor(private contentNodeSelectorService: ContentNodeSelectorService,
+                private apiService: AlfrescoApiService,
+                private preferences: UserPreferencesService) {
+        this.searchInput.valueChanges
+            .pipe(
+                debounceTime(this.debounceSearch)
+            )
+            .subscribe((searchValue) => {
+                this.search(searchValue);
+            });
+        this.pageSize = this.preferences.paginationSize;
+    }
+
+    set chosenNode(value: MinimalNodeEntryEntity) {
+        this._chosenNode = value;
+        let valuesArray = null;
+        if (value) {
+            valuesArray = [value];
+        }
+        this.select.next(valuesArray);
+    }
+
+    get chosenNode() {
+        return this._chosenNode;
+    }
+
+    ngOnInit() {
+        this.folderIdToShow = this.currentFolderId;
+        this.paginationStrategy = PaginationStrategy.Infinite;
+    }
+
+    /**
+     * Updates the site attribute and starts a new search
+     *
+     * @param chosenSite SiteEntry to search within
+     */
+    siteChanged(chosenSite: SiteEntry): void {
+        this.siteId = chosenSite.entry.guid;
+        this.updateResults();
+    }
+
+    /**
+     * Updates the searchTerm attribute and starts a new search
+     *
+     * @param searchTerm string value to search against
+     */
+    search(searchTerm: string): void {
+        this.searchTerm = searchTerm;
+        this.updateResults();
+    }
+
+    /**
+     * Returns whether breadcrumb has to be shown or not
+     */
+    needBreadcrumbs() {
+        const whenInFolderNavigation = !this.showingSearchResults,
+            whenInSelectingSearchResult = this.showingSearchResults && this.chosenNode;
+
+        return whenInFolderNavigation || whenInSelectingSearchResult;
+    }
+
+    /**
+     * Returns the actually selected|entered folder node or null in case of searching for the breadcrumb
+     */
+    get breadcrumbFolderNode(): MinimalNodeEntryEntity | null {
+        if (this.showingSearchResults && this.chosenNode) {
+            return this.chosenNode;
+        } else {
+            return this.documentList.folderNode;
+        }
+    }
+
+    /**
+     * Clear the search input
+     */
+    clear(): void {
+        this.searchTerm = '';
+        this.nodes = null;
+        this.skipCount = 0;
+        this.chosenNode = null;
+        this.showingSearchResults = false;
+        this.folderIdToShow = this.currentFolderId;
+    }
+
+    /**
+     * Update the result list depending on the criterias
+     */
+    private updateResults(): void {
+        if (this.searchTerm.length === 0) {
+            this.folderIdToShow = this.siteId || this.currentFolderId;
+        } else {
+            this.startNewSearch();
+        }
+    }
+
+    /**
+     * Load the first page of a new search result
+     */
+    private startNewSearch(): void {
+        this.nodes = null;
+        this.skipCount = 0;
+        this.chosenNode = null;
+        this.folderIdToShow = null;
+        this.querySearch();
+    }
+
+    /**
+     * Loads the next batch of search results
+     *
+     * @param event Pagination object
+     */
+    getNextPageOfSearch(event: Pagination): void {
+        this.infiniteScroll = true;
+        this.skipCount = event.skipCount;
+
+        if (this.searchTerm.length > 0) {
+            this.querySearch();
+        }
+    }
+
+    /**
+     * Perform the call to searchService with the proper parameters
+     */
+    private querySearch(): void {
+        this.loadingSearchResults = true;
+
+        this.contentNodeSelectorService.search(this.searchTerm, this.siteId, this.skipCount, this.pageSize)
+            .subscribe(this.showSearchResults.bind(this));
+    }
+
+    /**
+     * Show the results of the search
+     *
+     * @param results Search results
+     */
+    private showSearchResults(results: NodePaging): void {
+        this.showingSearchResults = true;
+        this.loadingSearchResults = false;
+
+        // Documentlist hack, since data displaying for preloaded nodes is a little bit messy there
+        if (!this.nodes) {
+            this.nodes = results;
+        } else {
+            this.documentList.data.loadPage(results, true);
+        }
+
+        this.pagination = results.list.pagination;
+        this.highlight();
+    }
+
+    /**
+     * Hightlight the actual searchterm in the next frame
+     */
+    highlight(): void {
+        setTimeout(() => {
+            this.highlighter.highlight(this.searchTerm);
+        }, 0);
+    }
+
+    /**
+     * Sets showingSearchResults state to be able to differentiate between search results or folder results
+     */
+    onFolderChange(): void {
+        this.skipCount = 0;
+        this.infiniteScroll = false;
+        this.showingSearchResults = false;
+    }
+
+    /**
+     * Attempts to set the currently loaded node
+     */
+    onFolderLoaded(nodePage: NodePaging): void {
+        this.attemptNodeSelection(this.documentList.folderNode);
+        this.pagination = nodePage.list.pagination;
+    }
+
+    /**
+     * Selects node as chosen if it has the right permission, clears the selection otherwise
+     *
+     * @param entry
+     */
+    private attemptNodeSelection(entry: MinimalNodeEntryEntity): void {
+        if (this.isSelectionValid(entry)) {
+            this.chosenNode = entry;
+        } else {
+            this.resetChosenNode();
+        }
+    }
+
+    /**
+     * Clears the chosen node
+     */
+    resetChosenNode(): void {
+        this.chosenNode = null;
+    }
+
+    /**
+     * Invoked when user selects a node
+     *
+     * @param event CustomEvent for node-select
+     */
+    onNodeSelect(event: any): void {
+        this.attemptNodeSelection(event.detail.node.entry);
+    }
+
+    onNodeDoubleClick(e: CustomEvent) {
+        const node: any = e.detail.node.entry;
+
+        if (node && node.guid) {
+            const options = {
+                maxItems: this.pageSize,
+                skipCount: this.skipCount,
+                include: ['path', 'properties', 'allowableOperations']
+            };
+
+            this.apiService.nodesApi.getNode(node.guid, options)
+                .then(documentLibrary => {
+                    this.documentList.performCustomSourceNavigation(documentLibrary);
+                });
+        }
+    }
+}
diff --git a/lib/content-services/content-node-selector/content-node-selector.component-data.interface.ts b/lib/content-services/content-node-selector/content-node-selector.component-data.interface.ts
index 66aaff996a..e97dccf832 100644
--- a/lib/content-services/content-node-selector/content-node-selector.component-data.interface.ts
+++ b/lib/content-services/content-node-selector/content-node-selector.component-data.interface.ts
@@ -15,16 +15,17 @@
  * limitations under the License.
  */
 
-import { EventEmitter } from '@angular/core';
-import { MinimalNodeEntryEntity } from 'alfresco-js-api';
+import { MinimalNodeEntryEntity, SitePaging } from 'alfresco-js-api';
+import { Subject } from 'rxjs/Subject';
 
 export interface ContentNodeSelectorComponentData {
     title: string;
     actionName?: string;
-    currentFolderId?: string;
+    currentFolderId: string;
     dropdownHideMyFiles?: boolean;
-    dropdownSiteList?: any[];
+    dropdownSiteList?: SitePaging;
     rowFilter?: any;
     imageResolver?: any;
-    select: EventEmitter<MinimalNodeEntryEntity[]>;
+    isSelectionValid?: (entry: MinimalNodeEntryEntity) => boolean;
+    select: Subject<MinimalNodeEntryEntity[]>;
 }
diff --git a/lib/content-services/content-node-selector/content-node-selector.component.html b/lib/content-services/content-node-selector/content-node-selector.component.html
index 077490330d..5473e7eb2f 100644
--- a/lib/content-services/content-node-selector/content-node-selector.component.html
+++ b/lib/content-services/content-node-selector/content-node-selector.component.html
@@ -1,107 +1,35 @@
 <header matDialogTitle
-        class="adf-content-node-selector-title"
-        data-automation-id="content-node-selector-title">{{title}}
+        class="adf-content-node-selector-dialog-title"
+        data-automation-id="content-node-selector-title">{{title || data?.title}}
 </header>
 
 <section matDialogContent
-         class="adf-content-node-selector-content"
-         (node-select)="onNodeSelect($event)">
-
-    <mat-form-field floatPlaceholder="never" class="adf-content-node-selector-content-input">
-        <input matInput
-               id="searchInput"
-               [formControl]="searchInput"
-               type="text"
-               placeholder="Search"
-               [value]="searchTerm"
-               data-automation-id="content-node-selector-search-input">
-
-        <mat-icon *ngIf="searchTerm.length > 0"
-                  matSuffix (click)="clear()"
-                  class="adf-content-node-selector-content-input-icon"
-                  data-automation-id="content-node-selector-search-clear">clear
-        </mat-icon>
-
-        <mat-icon *ngIf="searchTerm.length === 0"
-                  matSuffix
-                  class="adf-content-node-selector-content-input-icon"
-                  data-automation-id="content-node-selector-search-icon">search
-        </mat-icon>
-
-    </mat-form-field>
-
-    <adf-sites-dropdown
-        (change)="siteChanged($event)"
-        [placeholder]="'NODE_SELECTOR.SELECT_LOCATION'"
-        [hideMyFiles]="dropdownHideMyFiles"
-        [siteList]="dropdownSiteList"
-        data-automation-id="content-node-selector-sites-combo"></adf-sites-dropdown>
-
-    <adf-toolbar>
-        <adf-toolbar-title>
-            <adf-dropdown-breadcrumb *ngIf="needBreadcrumbs()"
-                                     class="adf-content-node-selector-content-breadcrumb"
-                                     (navigate)="clear()"
-                                     [target]="documentList"
-                                     [folderNode]="breadcrumbFolderNode"
-                                     data-automation-id="content-node-selector-content-breadcrumb">
-            </adf-dropdown-breadcrumb>
-        </adf-toolbar-title>
-    </adf-toolbar>
-
-    <div class="adf-content-node-selector-content-list" data-automation-id="content-node-selector-content-list">
-        <adf-document-list
-            #documentList
-            adf-highlight
-            adf-highlight-selector=".cell-value adf-datatable-cell .adf-datatable-cell-value"
-            [node]="nodes"
-            [maxItems]="pageSize"
-            [skipCount]="skipCount"
-            [enableInfiniteScrolling]="infiniteScroll"
-            [rowFilter]="rowFilter"
-            [imageResolver]="imageResolver"
-            [currentFolderId]="folderIdToShow"
-            selectionMode="single"
-            [contextMenuActions]="false"
-            [contentActions]="false"
-            [allowDropFiles]="false"
-            (folderChange)="onFolderChange()"
-            (ready)="onFolderLoaded($event)"
-            (node-dblclick)="onNodeDoubleClick($event)"
-            data-automation-id="content-node-selector-document-list">
-            <empty-folder-content>
-                <ng-template>
-                    <div>{{ 'NODE_SELECTOR.NO_RESULTS' | translate }}</div>
-                </ng-template>
-            </empty-folder-content>
-        </adf-document-list>
-
-        <adf-infinite-pagination
-            [pagination]="pagination"
-            [pageSize]="pageSize"
-            [loading]="loadingSearchResults"
-            (loadMore)="getNextPageOfSearch($event)"
-            data-automation-id="content-node-selector-search-pagination">
-            {{ 'ADF-DOCUMENT-LIST.LAYOUT.LOAD_MORE' | translate }}
-        </adf-infinite-pagination>
-    </div>
-
+         class="adf-content-node-selector-dialog-content">
+    <adf-content-node-selector-panel
+        [currentFolderId]="currentFolderId || data?.currentFolderId"
+        [dropdownHideMyFiles]="dropdownHideMyFiles || data?.dropdownHideMyFiles"
+        [dropdownSiteList]="dropdownSiteList || data?.dropdownSiteList"
+        [rowFilter]="rowFilter || data?.rowFilter"
+        [imageResolver]="imageResolver || data?.imageResolver"
+        [isSelectionValid]="data?.isSelectionValid"
+        (select)="onSelect($event)">
+    </adf-content-node-selector-panel>
 </section>
 
 <footer matDialogActions class="adf-content-node-selector-actions">
-
-    <button *ngIf="inDialog"
-            mat-button
-            class="adf-content-node-selector-actions-cancel"
-            (click)="close()"
-            data-automation-id="content-node-selector-actions-cancel">{{ 'NODE_SELECTOR.CANCEL' | translate }}
+    <button
+        mat-button
+        class="adf-content-node-selector-actions-cancel"
+        (click)="close()"
+        data-automation-id="content-node-selector-actions-cancel">{{ 'NODE_SELECTOR.CANCEL' | translate }}
     </button>
 
     <button mat-button
-            [disabled]="!chosenNode"
-            class="adf-content-node-selector-actions-choose"
-            (click)="choose()"
-            data-automation-id="content-node-selector-actions-choose">{{ buttonActionName | translate }}
+        [disabled]="!chosenNode"
+        class="adf-content-node-selector-actions-choose"
+        (click)="onClick()"
+        data-automation-id="content-node-selector-actions-choose">{{ buttonActionName | translate }}
     </button>
 
 </footer>
+
diff --git a/lib/content-services/content-node-selector/content-node-selector.component.scss b/lib/content-services/content-node-selector/content-node-selector.component.scss
index e4de262546..c00ce02870 100644
--- a/lib/content-services/content-node-selector/content-node-selector.component.scss
+++ b/lib/content-services/content-node-selector/content-node-selector.component.scss
@@ -1,147 +1,56 @@
-@mixin adf-content-node-selector-theme($theme) {
+@mixin adf-content-node-selector-dialog-theme($theme) {
     $primary: map-get($theme, primary);
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
 
-    .adf-content-node-selector-dialog {
+    .mat-dialog-container {
+        padding: 0;
+    }
 
-        .mat-dialog-container {
-            padding: 0;
+    .adf-content-node-selector-dialog {
+        &-title,
+        &-content,
+        &-actions {
+            padding: 16px;
+            margin: 0;
         }
 
-        .adf-content-node-selector {
-            &-title,
-            &-content,
-            &-actions {
-                padding: 16px;
-                margin: 0;
-            }
+        &-content{
+            padding-top: 0;
+        }
 
-            &-title::first-letter {
+        &-title::first-letter {
+            text-transform: uppercase;
+        }
+
+        &-actions {
+            padding: 8px;
+            background-color: mat-color($background, background);
+            display: flex;
+            justify-content: flex-end;
+            color: mat-color($foreground, secondary-text);
+
+            button {
                 text-transform: uppercase;
             }
 
-            &-content {
-                padding-top: 0;
-
-                &-input {
-                    width: 100%;
-
-                    &-icon {
-                        color: mat-color($foreground, disabled-button);
-                        cursor: pointer;
-
-                        &:hover {
-                            color: mat-color($foreground, base);
-                        }
-                    }
-                }
-
-                .mat-input-underline .mat-input-ripple {
-                    height: 1px;
-                    transition: none;
-                }
-
-                .adf-site-dropdown-container {
-                    .mat-form-field {
-                        display: block;
-                        margin-bottom: 15px;
-                    }
-                }
-
-                .adf-site-dropdown-list-element {
-                    width: 100%;
-                    margin-bottom: 0;
-
-                    .mat-select-trigger {
-                        font-size: 14px;
-                    }
-
-                }
-
-                .adf-toolbar .mat-toolbar {
-                    border-bottom-width: 0;
-                    font-size: 14px;
-                }
-
-                &-list {
-                    height: 200px;
-                    overflow: auto;
-                    border: 1px solid mat-color($foreground, base, 0.07);
-
-                    .adf-highlight {
-                        color: mat-color($primary);
-                    }
-
-                    .adf-data-table {
-                        border: none;
-
-                        .adf-no-content-container {
-                            text-align: center;
-                        }
-
-                        thead {
-                            display: none;
-                        }
-
-                        .adf-data-table-cell {
-                            padding-top: 8px;
-                            padding-bottom: 8px;
-                            border-top: none;
-                            height: 30px;
-
-                            &--image {
-                                padding-left: 16px;
-                                padding-right: 8px;                                
-                            }
-
-                            &--text {
-                                padding-left: 8px;
-                            }
-                        }
-
-                        tbody tr {
-                            height: auto !important;
-
-                            &:last-child {
-                                .adf-data-table-cell {
-                                    border-bottom: none;
-                                }
-                            }
-                        }
-                    }
-                }
+            &:last-child {
+                margin-bottom: 0px;
             }
 
-            &-actions {
-                padding: 8px;
-                background-color: mat-color($background, background);
-                display: flex;
-                justify-content: flex-end;
-                color: mat-color($foreground, secondary-text);
+            &-cancel {
+                font-weight: normal;
+            }
 
-                button {
-                    text-transform: uppercase;
+            &-choose {
+                font-weight: normal;
+
+                &[disabled] {
+                    opacity: 0.6;
                 }
 
-                &:last-child {
-                    margin-bottom: 0px;
-                }
-
-                &-cancel {
-                    font-weight: normal;
-                }
-
-                &-choose {
-                    font-weight: normal;
-
-                    &[disabled] {
-                        opacity: 0.6;
-                    }
-
-                    &:enabled {
-                        color: mat-color($primary);
-                    }
+                &:enabled {
+                    color: mat-color($primary);
                 }
             }
         }
diff --git a/lib/content-services/content-node-selector/content-node-selector.component.spec.ts b/lib/content-services/content-node-selector/content-node-selector.component.spec.ts
index 0b5a67d8ba..31be93bfeb 100644
--- a/lib/content-services/content-node-selector/content-node-selector.component.spec.ts
+++ b/lib/content-services/content-node-selector/content-node-selector.component.spec.ts
@@ -15,92 +15,48 @@
  * limitations under the License.
  */
 
-import { CUSTOM_ELEMENTS_SCHEMA, EventEmitter } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { EventEmitter } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
-import { By } from '@angular/platform-browser';
-import { MinimalNodeEntryEntity } from 'alfresco-js-api';
-import {
-    AlfrescoApiService,
-    ContentService,
-    TranslationService,
-    SearchService,
-    SiteModel,
-    SitesService,
-    UserPreferencesService
-} from '@alfresco/adf-core';
-import { DataTableModule } from '@alfresco/adf-core';
-import { Observable } from 'rxjs/Observable';
-import { Observer } from 'rxjs/Observer';
-import { MaterialModule } from '../material.module';
-import { EmptyFolderContentDirective, DocumentListComponent, DocumentListService } from '../document-list';
-import { DropdownSitesComponent } from '../site-dropdown';
-import { DropdownBreadcrumbComponent } from '../breadcrumb';
 import { ContentNodeSelectorComponent } from './content-node-selector.component';
+import { ContentNodeSelectorPanelComponent } from './content-node-selector-panel.component';
 import { ContentNodeSelectorService } from './content-node-selector.service';
-import { NodePaging } from 'alfresco-js-api';
+import { MinimalNodeEntryEntity } from 'alfresco-js-api';
+import { MaterialModule } from '../material.module';
+import { By } from '@angular/platform-browser';
+import {
+        EmptyFolderContentDirective,
+        DocumentListComponent,
+        DocumentListService
+    } from '../document-list';
+import { AlfrescoApiService, ContentService } from '@alfresco/adf-core';
 
-const ONE_FOLDER_RESULT = {
-    list: {
-        entries: [
-            {
-                entry: {
-                    id: '123', name: 'MyFolder', isFile: false, isFolder: true,
-                    createdByUser: { displayName: 'John Doe' },
-                    modifiedByUser: { displayName: 'John Doe' }
-                }
-            }
-        ],
-        pagination: {
-            hasMoreItems: true
-        }
-    }
-};
+describe('ContentNodeSelectorDialogComponent', () => {
 
-describe('ContentNodeSelectorComponent', () => {
     let component: ContentNodeSelectorComponent;
     let fixture: ComponentFixture<ContentNodeSelectorComponent>;
     let data: any;
-    let searchService: SearchService;
-    let searchSpy: jasmine.Spy;
-    let apiService: AlfrescoApiService;
-    let nodesApi;
-
-    let _observer: Observer<NodePaging>;
-
-    function typeToSearchBox(searchTerm = 'string-to-search') {
-        let searchInput = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-search-input"]'));
-        searchInput.nativeElement.value = searchTerm;
-        component.searchInput.setValue(searchTerm);
-        fixture.detectChanges();
-    }
-
-    function respondWithSearchResults(result) {
-        _observer.next(result);
-    }
 
     function setupTestbed(plusProviders) {
         TestBed.configureTestingModule({
             imports: [
-                DataTableModule,
                 MaterialModule
             ],
             declarations: [
+                ContentNodeSelectorComponent,
+                ContentNodeSelectorPanelComponent,
                 DocumentListComponent,
-                EmptyFolderContentDirective,
-                DropdownSitesComponent,
-                DropdownBreadcrumbComponent,
-                ContentNodeSelectorComponent
+                EmptyFolderContentDirective
             ],
             providers: [
+                ContentNodeSelectorService,
+                ContentNodeSelectorPanelComponent,
+                DocumentListService,
                 AlfrescoApiService,
                 ContentService,
-                SearchService,
-                TranslationService,
                 DocumentListService,
-                SitesService,
                 ContentNodeSelectorService,
-                UserPreferencesService,
                 ...plusProviders
             ],
             schemas: [CUSTOM_ELEMENTS_SCHEMA]
@@ -112,681 +68,100 @@ describe('ContentNodeSelectorComponent', () => {
         TestBed.resetTestingModule();
     });
 
-    describe('Dialog features', () => {
+    beforeEach(async(() => {
+        data = {
+            title: 'Move along citizen...',
+            actionName: 'move',
+            select: new EventEmitter<MinimalNodeEntryEntity>(),
+            rowFilter: () => {
+            },
+            imageResolver: () => 'piccolo',
+            currentFolderId: 'cat-girl-nuku-nuku'
+        };
 
-        beforeEach(async(() => {
-            data = {
-                title: 'Move along citizen...',
-                actionName: 'move',
-                select: new EventEmitter<MinimalNodeEntryEntity>(),
-                rowFilter: () => {
-                },
-                imageResolver: () => 'piccolo',
-                currentFolderId: 'cat-girl-nuku-nuku'
-            };
+        setupTestbed([{ provide: MAT_DIALOG_DATA, useValue: data }]);
+        TestBed.compileComponents();
+    }));
 
-            setupTestbed([{ provide: MAT_DIALOG_DATA, useValue: data }]);
-            TestBed.compileComponents();
-        }));
+    beforeEach(() => {
+        fixture = TestBed.createComponent(ContentNodeSelectorComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
 
-        beforeEach(() => {
-            fixture = TestBed.createComponent(ContentNodeSelectorComponent);
-            component = fixture.componentInstance;
+    describe('Data injecting with the "Material dialog way"', () => {
+
+        it('should show the INJECTED title', () => {
+            const titleElement = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-title"]'));
+            expect(titleElement).not.toBeNull();
+            expect(titleElement.nativeElement.innerText).toBe('Move along citizen...');
+        });
+
+        it('should have the INJECTED actionName on the name of the choose button', () => {
+            const actionButton = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-actions-choose"]'));
+            expect(actionButton).not.toBeNull();
+            expect(actionButton.nativeElement.innerText).toBe('NODE_SELECTOR.MOVE');
+        });
+
+        it('should pass through the injected currentFolderId to the documentlist', () => {
+            let documentList = fixture.debugElement.query(By.directive(DocumentListComponent));
+            expect(documentList).not.toBeNull('Document list should be shown');
+            expect(documentList.componentInstance.currentFolderId).toBe('cat-girl-nuku-nuku');
+        });
+
+        it('should pass through the injected rowFilter to the documentlist', () => {
+            let documentList = fixture.debugElement.query(By.directive(DocumentListComponent));
+            expect(documentList).not.toBeNull('Document list should be shown');
+            expect(documentList.componentInstance.rowFilter).toBe(data.rowFilter);
+        });
+
+        it('should pass through the injected imageResolver to the documentlist', () => {
+            let documentList = fixture.debugElement.query(By.directive(DocumentListComponent));
+            expect(documentList).not.toBeNull('Document list should be shown');
+            expect(documentList.componentInstance.imageResolver).toBe(data.imageResolver);
+        });
+
+    });
+
+    describe('Cancel button', () => {
+
+        it('should complete the data stream when user click "CANCEL"', () => {
+            let cancelButton;
+            data.select.subscribe(
+                () => { },
+                () => { },
+                () => {
+                    cancelButton = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-actions-cancel"]'));
+                    expect(cancelButton).not.toBeNull();
+                });
+
+            cancelButton = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-actions-cancel"]'));
+            cancelButton.triggerEventHandler('click', {});
+        });
+
+        it('should not be shown if dialogRef is NOT injected', () => {
+            const closeButton = fixture.debugElement.query(By.css('[content-node-selector-actions-cancel]'));
+            expect(closeButton).toBeNull();
+        });
+    });
+
+    describe('Action button for the chosen node', () => {
+
+        it('should be disabled by default', () => {
             fixture.detectChanges();
+
+            let actionButton = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-actions-choose"]'));
+            expect(actionButton.nativeElement.disabled).toBeTruthy();
         });
 
-        describe('Data injecting with the "Material dialog way"', () => {
+        it('should be enabled when a node is chosen', () => {
+            component.onSelect([{ id: 'fake' }]);
+            fixture.detectChanges();
 
-            it('should show the INJECTED title', () => {
-                const titleElement = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-title"]'));
-                expect(titleElement).not.toBeNull();
-                expect(titleElement.nativeElement.innerText).toBe('Move along citizen...');
-            });
-
-            it('should have the INJECTED actionName on the name of the choose button', () => {
-                const actionButton = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-actions-choose"]'));
-                expect(actionButton).not.toBeNull();
-                expect(actionButton.nativeElement.innerText).toBe('NODE_SELECTOR.MOVE');
-            });
-
-            it('should pass through the injected currentFolderId to the documentlist', () => {
-                let documentList = fixture.debugElement.query(By.directive(DocumentListComponent));
-                expect(documentList).not.toBeNull('Document list should be shown');
-                expect(documentList.componentInstance.currentFolderId).toBe('cat-girl-nuku-nuku');
-            });
-
-            it('should pass through the injected rowFilter to the documentlist', () => {
-                let documentList = fixture.debugElement.query(By.directive(DocumentListComponent));
-                expect(documentList).not.toBeNull('Document list should be shown');
-                expect(documentList.componentInstance.rowFilter).toBe(data.rowFilter);
-            });
-
-            it('should pass through the injected imageResolver to the documentlist', () => {
-                let documentList = fixture.debugElement.query(By.directive(DocumentListComponent));
-                expect(documentList).not.toBeNull('Document list should be shown');
-                expect(documentList.componentInstance.imageResolver).toBe(data.imageResolver);
-            });
-
-            it('should trigger the INJECTED select event when selection has been made', (done) => {
-                const expectedNode = <MinimalNodeEntryEntity> {};
-                data.select.subscribe((nodes) => {
-                    expect(nodes.length).toBe(1);
-                    expect(nodes[0]).toBe(expectedNode);
-                    done();
-                });
-
-                component.chosenNode = expectedNode;
-                component.choose();
-            });
+            let actionButton = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-actions-choose"]'));
+            expect(actionButton.nativeElement.disabled).toBeFalsy();
         });
 
-        describe('Cancel button', () => {
-
-            let dummyMdDialogRef;
-            let fakePreference: UserPreferencesService = <UserPreferencesService> jasmine.createSpyObj('UserPreferencesService', ['paginationSize']);
-            fakePreference.paginationSize = 10;
-
-            beforeEach(() => {
-                dummyMdDialogRef = <MatDialogRef<ContentNodeSelectorComponent>> {
-                    close: () => {
-                    }
-                };
-            });
-
-            it('should be shown if dialogRef is injected', () => {
-                const componentInstance = new ContentNodeSelectorComponent(null, null, null, fakePreference, data, dummyMdDialogRef);
-                expect(componentInstance.inDialog).toBeTruthy();
-            });
-
-            it('should should call the close method in the injected dialogRef', () => {
-                spyOn(dummyMdDialogRef, 'close');
-                const componentInstance = new ContentNodeSelectorComponent(null, null, null, fakePreference, data, dummyMdDialogRef);
-
-                componentInstance.close();
-
-                expect(dummyMdDialogRef.close).toHaveBeenCalled();
-            });
-        });
     });
 
-    describe('General component features', () => {
-
-        beforeEach(async(() => {
-            setupTestbed([]);
-            TestBed.compileComponents();
-        }));
-
-        beforeEach(() => {
-            fixture = TestBed.createComponent(ContentNodeSelectorComponent);
-            component = fixture.componentInstance;
-            component.debounceSearch = 0;
-
-            searchService = TestBed.get(SearchService);
-            searchSpy = spyOn(searchService, 'search').and.callFake(() => {
-                return Observable.create((observer: Observer<NodePaging>) => {
-                    _observer = observer;
-                });
-            });
-
-            apiService = TestBed.get(AlfrescoApiService);
-            nodesApi = apiService.nodesApi;
-
-        });
-
-        describe('Parameters', () => {
-
-            it('should show the title', () => {
-                component.title = 'Move along citizen...';
-                fixture.detectChanges();
-
-                const titleElement = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-title"]'));
-                expect(titleElement).not.toBeNull();
-                expect(titleElement.nativeElement.innerText).toBe('Move along citizen...');
-            });
-
-            it('should trigger the select event when selection has been made', (done) => {
-                const expectedNode = <MinimalNodeEntryEntity> {};
-                component.select.subscribe((nodes) => {
-                    expect(nodes.length).toBe(1);
-                    expect(nodes[0]).toBe(expectedNode);
-                    done();
-                });
-
-                component.chosenNode = expectedNode;
-                component.choose();
-            });
-        });
-
-        describe('Breadcrumbs', () => {
-
-            let documentListService,
-                sitesService,
-                expectedDefaultFolderNode;
-
-            beforeEach(() => {
-                expectedDefaultFolderNode = <MinimalNodeEntryEntity> { path: { elements: [] } };
-                documentListService = TestBed.get(DocumentListService);
-                sitesService = TestBed.get(SitesService);
-                spyOn(documentListService, 'getFolderNode').and.returnValue(Promise.resolve(expectedDefaultFolderNode));
-                spyOn(documentListService, 'getFolder').and.returnValue(Observable.throw('No results for test'));
-                spyOn(sitesService, 'getSites').and.returnValue(Observable.of([]));
-                spyOn(component.documentList, 'loadFolderNodesByFolderNodeId').and.returnValue(Promise.resolve());
-                component.currentFolderId = 'cat-girl-nuku-nuku';
-                fixture.detectChanges();
-            });
-
-            it('should show the breadcrumb for the currentFolderId by default', (done) => {
-                fixture.detectChanges();
-
-                fixture.whenStable().then(() => {
-                    fixture.detectChanges();
-                    const breadcrumb = fixture.debugElement.query(By.directive(DropdownBreadcrumbComponent));
-                    expect(breadcrumb).not.toBeNull();
-                    expect(breadcrumb.componentInstance.folderNode).toBe(expectedDefaultFolderNode);
-                    done();
-                });
-            });
-
-            it('should not show the breadcrumb if search was performed as last action', (done) => {
-                typeToSearchBox();
-                fixture.detectChanges();
-
-                setTimeout(() => {
-                    respondWithSearchResults(ONE_FOLDER_RESULT);
-
-                    fixture.whenStable().then(() => {
-                        fixture.detectChanges();
-                        const breadcrumb = fixture.debugElement.query(By.directive(DropdownBreadcrumbComponent));
-                        expect(breadcrumb).toBeNull();
-                        done();
-                    });
-                }, 300);
-
-            });
-
-            it('should show the breadcrumb again on folder navigation in the results list', (done) => {
-                typeToSearchBox();
-                fixture.detectChanges();
-
-                setTimeout(() => {
-                    respondWithSearchResults(ONE_FOLDER_RESULT);
-                    fixture.whenStable().then(() => {
-                        fixture.detectChanges();
-                        component.onFolderChange();
-                        fixture.detectChanges();
-                        const breadcrumb = fixture.debugElement.query(By.directive(DropdownBreadcrumbComponent));
-                        expect(breadcrumb).not.toBeNull();
-                        done();
-                    });
-                }, 300);
-
-            });
-
-            it('should show the breadcrumb for the selected node when search results are displayed', (done) => {
-                const alfrescoContentService = TestBed.get(ContentService);
-                spyOn(alfrescoContentService, 'hasPermission').and.returnValue(true);
-
-                typeToSearchBox();
-
-                setTimeout(() => {
-                    respondWithSearchResults(ONE_FOLDER_RESULT);
-                    fixture.whenStable().then(() => {
-                        fixture.detectChanges();
-
-                        const chosenNode = <MinimalNodeEntryEntity> { path: { elements: ['one'] } };
-                        component.onNodeSelect({ detail: { node: { entry: chosenNode } } });
-                        fixture.detectChanges();
-
-                        const breadcrumb = fixture.debugElement.query(By.directive(DropdownBreadcrumbComponent));
-                        expect(breadcrumb).not.toBeNull();
-                        expect(breadcrumb.componentInstance.folderNode.path).toBe(chosenNode.path);
-                        done();
-                    });
-                }, 300);
-            });
-
-            it('should NOT show the breadcrumb for the selected node when not on search results list', (done) => {
-                const alfrescoContentService = TestBed.get(ContentService);
-                spyOn(alfrescoContentService, 'hasPermission').and.returnValue(true);
-
-                typeToSearchBox();
-
-                setTimeout(() => {
-                    respondWithSearchResults(ONE_FOLDER_RESULT);
-
-                    fixture.detectChanges();
-                    component.onFolderChange();
-                    fixture.detectChanges();
-
-                    const chosenNode = <MinimalNodeEntryEntity> { path: { elements: [] } };
-                    component.onNodeSelect({ detail: { node: { entry: chosenNode } } });
-                    fixture.detectChanges();
-
-                    const breadcrumb = fixture.debugElement.query(By.directive(DropdownBreadcrumbComponent));
-                    expect(breadcrumb).not.toBeNull();
-                    expect(breadcrumb.componentInstance.folderNode).toBe(expectedDefaultFolderNode);
-                    done();
-                }, 300);
-            });
-        });
-
-        describe('Search functionality', () => {
-
-            function defaultSearchOptions(searchTerm, rootNodeId = undefined, skipCount = 0) {
-                let defaultSearchNode: any = {
-                    query: {
-                        query: searchTerm ? `${searchTerm}* OR name:${searchTerm}*` : searchTerm
-                    },
-                    include: ['path', 'allowableOperations'],
-                    paging: {
-                        maxItems: '25',
-                        skipCount: skipCount.toString()
-                    },
-                    filterQueries: [
-                        { query: "TYPE:'cm:folder'" },
-                        { query: 'NOT cm:creator:System' }]
-                };
-
-                if (rootNodeId) {
-                    defaultSearchNode.scope = rootNodeId;
-                }
-
-                return defaultSearchNode;
-            }
-
-            beforeEach(() => {
-                const documentListService = TestBed.get(DocumentListService);
-                const expectedDefaultFolderNode = <MinimalNodeEntryEntity> { path: { elements: [] } };
-
-                spyOn(documentListService, 'getFolderNode').and.returnValue(Promise.resolve(expectedDefaultFolderNode));
-                spyOn(component.documentList, 'loadFolderNodesByFolderNodeId').and.returnValue(Promise.resolve());
-
-                component.currentFolderId = 'cat-girl-nuku-nuku';
-                fixture.detectChanges();
-            });
-
-            it('should load the results by calling the search api on search change', (done) => {
-                typeToSearchBox('kakarot');
-
-                setTimeout(() => {
-                    expect(searchSpy).toHaveBeenCalledWith(defaultSearchOptions('kakarot'));
-                    done();
-                }, 300);
-            });
-
-            it('should reset the currently chosen node in case of starting a new search', (done) => {
-                component.chosenNode = <MinimalNodeEntryEntity> {};
-                typeToSearchBox('kakarot');
-
-                setTimeout(() => {
-                    expect(component.chosenNode).toBeNull();
-                    done();
-                }, 300);
-            });
-
-            it('should call the search api on changing the site selectbox\'s value', (done) => {
-                typeToSearchBox('vegeta');
-
-                setTimeout(() => {
-                    expect(searchSpy.calls.count()).toBe(1, 'Search count should be one after only one search');
-
-                    component.siteChanged(<SiteModel> { guid: 'namek' });
-
-                    expect(searchSpy.calls.count()).toBe(2, 'Search count should be two after the site change');
-                    expect(searchSpy.calls.argsFor(1)).toEqual([defaultSearchOptions('vegeta', 'namek')]);
-                    done();
-                }, 300);
-            });
-
-            it('should show the search icon by default without the X (clear) icon', (done) => {
-                fixture.detectChanges();
-                setTimeout(() => {
-
-                    let searchIcon = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-search-icon"]'));
-                    let clearIcon = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-search-clear"]'));
-
-                    expect(searchIcon).not.toBeNull('Search icon should be in the DOM');
-                    expect(clearIcon).toBeNull('Clear icon should NOT be in the DOM');
-                    done();
-                }, 300);
-            });
-
-            it('should show the X (clear) icon without the search icon when the search contains at least one character', (done) => {
-                fixture.detectChanges();
-                typeToSearchBox('123');
-
-                setTimeout(() => {
-                    fixture.detectChanges();
-
-                    let searchIcon = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-search-icon"]'));
-                    let clearIcon = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-search-clear"]'));
-
-                    expect(searchIcon).toBeNull('Search icon should NOT be in the DOM');
-                    expect(clearIcon).not.toBeNull('Clear icon should be in the DOM');
-                    done();
-                }, 300);
-            });
-
-            it('should clear the search field, nodes and chosenNode when clicking on the X (clear) icon', () => {
-                component.chosenNode = <MinimalNodeEntryEntity> {};
-                component.nodes = {
-                    list: {
-                        entries: [{ entry: component.chosenNode }]
-                    }
-                };
-                component.searchTerm = 'piccolo';
-                component.showingSearchResults = true;
-
-                component.clear();
-
-                expect(component.searchTerm).toBe('');
-                expect(component.nodes).toEqual(null);
-                expect(component.chosenNode).toBeNull();
-                expect(component.showingSearchResults).toBeFalsy();
-            });
-
-            it('should show the current folder\'s content instead of search results if search was not performed', () => {
-                let documentList = fixture.debugElement.query(By.directive(DocumentListComponent));
-                expect(documentList).not.toBeNull('Document list should be shown');
-                expect(documentList.componentInstance.currentFolderId).toBe('cat-girl-nuku-nuku');
-            });
-
-            it('should pass through the rowFilter to the documentList', () => {
-                const filter = () => {
-                };
-                component.rowFilter = filter;
-
-                fixture.detectChanges();
-
-                let documentList = fixture.debugElement.query(By.directive(DocumentListComponent));
-                expect(documentList).not.toBeNull('Document list should be shown');
-                expect(documentList.componentInstance.rowFilter).toBe(filter);
-            });
-
-            it('should pass through the imageResolver to the documentList', () => {
-                const resolver = () => 'piccolo';
-                component.imageResolver = resolver;
-
-                fixture.detectChanges();
-
-                let documentList = fixture.debugElement.query(By.directive(DocumentListComponent));
-                expect(documentList).not.toBeNull('Document list should be shown');
-                expect(documentList.componentInstance.imageResolver).toBe(resolver);
-            });
-
-            it('should show the result list when search was performed', (done) => {
-                typeToSearchBox();
-
-                setTimeout(() => {
-                    respondWithSearchResults(ONE_FOLDER_RESULT);
-
-                    fixture.detectChanges();
-                    let documentList = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-document-list"]'));
-                    expect(documentList).not.toBeNull('Document list should be shown');
-                    expect(documentList.componentInstance.currentFolderId).toBeNull();
-                    done();
-                }, 300);
-            });
-
-            xit('should highlight the results when search was performed in the next timeframe', (done) => {
-                spyOn(component.highlighter, 'highlight');
-                typeToSearchBox('shenron');
-
-                setTimeout(() => {
-                    respondWithSearchResults(ONE_FOLDER_RESULT);
-                    fixture.detectChanges();
-
-                    expect(component.highlighter.highlight).not.toHaveBeenCalled();
-
-                    setTimeout(() => {
-                        expect(component.highlighter.highlight).toHaveBeenCalledWith('shenron');
-                    }, 300);
-
-                    done();
-                }, 300);
-
-            });
-
-            it('should show the default text instead of result list if search was cleared', (done) => {
-                typeToSearchBox();
-
-                setTimeout(() => {
-                    respondWithSearchResults(ONE_FOLDER_RESULT);
-                    fixture.detectChanges();
-
-                    fixture.whenStable().then(() => {
-                        let clearButton = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-search-clear"]'));
-                        expect(clearButton).not.toBeNull('Clear button should be in DOM');
-                        clearButton.triggerEventHandler('click', {});
-                        fixture.detectChanges();
-
-                        let documentList = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-document-list"]'));
-                        expect(documentList).not.toBeNull('Document list should be shown');
-                        expect(documentList.componentInstance.currentFolderId).toBe('cat-girl-nuku-nuku');
-                        done();
-                    });
-                }, 300);
-            });
-
-            xit('should reload the original documentlist when clearing the search input', (done) => {
-                typeToSearchBox('shenron');
-
-                setTimeout(() => {
-                    respondWithSearchResults(ONE_FOLDER_RESULT);
-
-                    typeToSearchBox('');
-                    fixture.detectChanges();
-
-                    setTimeout(() => {
-                        let documentList = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-document-list"]'));
-                        expect(documentList.componentInstance.currentFolderId).toBe('cat-girl-nuku-nuku');
-                    }, 300);
-
-                    done();
-                }, 300);
-            });
-
-            it('should set the folderIdToShow to the default "currentFolderId" if siteId is undefined', (done) => {
-                component.siteChanged(<SiteModel> { guid: 'Kame-Sennin Muten Roshi' });
-                fixture.detectChanges();
-
-                let documentList = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-document-list"]'));
-                expect(documentList.componentInstance.currentFolderId).toBe('Kame-Sennin Muten Roshi');
-
-                component.siteChanged(<SiteModel> { guid: undefined });
-                fixture.detectChanges();
-
-                documentList = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-document-list"]'));
-                expect(documentList.componentInstance.currentFolderId).toBe('cat-girl-nuku-nuku');
-
-                done();
-            });
-
-            describe('Pagination "Load more" button', () => {
-
-                it('should NOT be shown by default', () => {
-                    fixture.detectChanges();
-                    const pagination = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-button"]'));
-                    expect(pagination).toBeNull();
-                });
-
-                it('should be shown when diplaying search results', (done) => {
-                    typeToSearchBox('shenron');
-
-                    setTimeout(() => {
-                        respondWithSearchResults(ONE_FOLDER_RESULT);
-
-                        fixture.whenStable().then(() => {
-                            fixture.detectChanges();
-                            const pagination = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-search-pagination"]'));
-                            expect(pagination).not.toBeNull();
-                            done();
-                        });
-                    }, 300);
-                });
-
-                it('button\'s callback should load the next batch of results by calling the search api', () => {
-                    const skipCount = 8;
-                    component.searchTerm = 'kakarot';
-
-                    component.getNextPageOfSearch({ skipCount });
-
-                    expect(searchSpy).toHaveBeenCalledWith(defaultSearchOptions('kakarot', undefined, skipCount));
-                });
-
-                it('should set its loading state to true after search was started', (done) => {
-                    component.showingSearchResults = true;
-                    component.pagination = { hasMoreItems: true };
-
-                    typeToSearchBox('shenron');
-
-                    setTimeout(() => {
-                        fixture.detectChanges();
-
-                        const spinnerSelector = By.css('[data-automation-id="content-node-selector-search-pagination"] [data-automation-id="adf-infinite-pagination-spinner"]');
-                        const paginationLoading = fixture.debugElement.query(spinnerSelector);
-                        expect(paginationLoading).not.toBeNull();
-                        done();
-                    }, 300);
-                });
-
-                it('should set its loading state to true after search was performed', (done) => {
-                    component.showingSearchResults = true;
-                    component.pagination = { hasMoreItems: true };
-
-                    typeToSearchBox('shenron');
-                    fixture.detectChanges();
-
-                    setTimeout(() => {
-                        respondWithSearchResults(ONE_FOLDER_RESULT);
-
-                        fixture.whenStable().then(() => {
-                            fixture.detectChanges();
-                            const spinnerSelector = By.css('[data-automation-id="content-node-selector-search-pagination"] [data-automation-id="adf-infinite-pagination-spinner"]');
-                            const paginationLoading = fixture.debugElement.query(spinnerSelector);
-                            expect(paginationLoading).toBeNull();
-                            done();
-                        });
-                    }, 300);
-                });
-            });
-        });
-
-        describe('Cancel button', () => {
-
-            it('should not be shown if dialogRef is NOT injected', () => {
-                const closeButton = fixture.debugElement.query(By.css('[content-node-selector-actions-cancel]'));
-                expect(closeButton).toBeNull();
-            });
-        });
-
-        describe('Action button for the chosen node', () => {
-
-            const entry: MinimalNodeEntryEntity = <MinimalNodeEntryEntity> {};
-            let hasPermission;
-
-            beforeEach(() => {
-                const alfrescoContentService = TestBed.get(ContentService);
-                spyOn(alfrescoContentService, 'hasPermission').and.callFake(() => hasPermission);
-            });
-
-            it('should be disabled by default', () => {
-                fixture.detectChanges();
-
-                let actionButton = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-actions-choose"]'));
-                expect(actionButton.nativeElement.disabled).toBe(true);
-            });
-
-            it('should become enabled after loading node with the necessary permissions', () => {
-                hasPermission = true;
-                component.documentList.folderNode = entry;
-                component.documentList.ready.emit();
-                fixture.detectChanges();
-
-                let actionButton = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-actions-choose"]'));
-                expect(actionButton.nativeElement.disabled).toBe(false);
-            });
-
-            it('should remain disabled after loading node without the necessary permissions', () => {
-                hasPermission = false;
-                component.documentList.folderNode = entry;
-                component.documentList.ready.emit();
-                fixture.detectChanges();
-
-                let actionButton = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-actions-choose"]'));
-                expect(actionButton.nativeElement.disabled).toBe(true);
-            });
-
-            it('should be enabled when clicking on a node (with the right permissions) in the list (onNodeSelect)', () => {
-                hasPermission = true;
-
-                component.onNodeSelect({ detail: { node: { entry } } });
-                fixture.detectChanges();
-
-                let actionButton = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-actions-choose"]'));
-                expect(actionButton.nativeElement.disabled).toBe(false);
-            });
-
-            it('should remain disabled when clicking on a node (with the WRONG permissions) in the list (onNodeSelect)', () => {
-                hasPermission = false;
-
-                component.onNodeSelect({ detail: { node: { entry } } });
-                fixture.detectChanges();
-
-                let actionButton = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-actions-choose"]'));
-                expect(actionButton.nativeElement.disabled).toBe(true);
-            });
-
-            it('should become disabled when clicking on a node (with the WRONG permissions) after previously selecting a right node', () => {
-                hasPermission = true;
-                component.onNodeSelect({ detail: { node: { entry } } });
-                fixture.detectChanges();
-
-                hasPermission = false;
-                component.onNodeSelect({ detail: { node: { entry } } });
-                fixture.detectChanges();
-
-                let actionButton = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-actions-choose"]'));
-                expect(actionButton.nativeElement.disabled).toBe(true);
-            });
-
-            it('should be disabled when resetting the chosen node', () => {
-                hasPermission = true;
-                component.onNodeSelect({ detail: { node: { entry: <MinimalNodeEntryEntity> {} } } });
-                fixture.detectChanges();
-
-                component.resetChosenNode();
-                fixture.detectChanges();
-
-                let actionButton = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-actions-choose"]'));
-                expect(actionButton.nativeElement.disabled).toBe(true);
-            });
-
-            it('should make the call to get the corresponding node entry to emit when a site node is selected as destination', () => {
-                spyOn(nodesApi, 'getNode').and.callFake((nodeId) => {
-                    return new Promise(resolve => {
-                        resolve({ entry: { id: nodeId } });
-                    });
-                });
-
-                const siteNode1 = { title: 'my files', guid: '-my-' };
-                const siteNode2 = { title: 'my sites', guid: '-mysites-' };
-
-                component.dropdownSiteList = [siteNode1, siteNode2];
-                fixture.detectChanges();
-                component.chosenNode = siteNode1;
-                fixture.detectChanges();
-                component.choose();
-
-                const options = {
-                    include: ['path', 'properties', 'allowableOperations']
-                };
-                expect(nodesApi.getNode).toHaveBeenCalledWith(
-                    '-my-',
-                    options
-                );
-            });
-
-        });
-    });
 });
diff --git a/lib/content-services/content-node-selector/content-node-selector.component.ts b/lib/content-services/content-node-selector/content-node-selector.component.ts
index 3951b0fda5..f17bc989a9 100644
--- a/lib/content-services/content-node-selector/content-node-selector.component.ts
+++ b/lib/content-services/content-node-selector/content-node-selector.component.ts
@@ -15,345 +15,80 @@
  * limitations under the License.
  */
 
-import {
-    Component,
-    EventEmitter,
-    Inject,
-    Input,
-    OnInit,
-    Optional,
-    Output,
-    ViewChild,
-    ViewEncapsulation
-} from '@angular/core';
-import {
-    AlfrescoApiService,
-    ContentService,
-    HighlightDirective,
-    SiteModel,
-    UserPreferencesService
-} from '@alfresco/adf-core';
-import { FormControl } from '@angular/forms';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
-import { MinimalNodeEntryEntity, NodePaging, Pagination, Site } from 'alfresco-js-api';
-import { DocumentListComponent, PaginationStrategy } from '../document-list/components/document-list.component';
+import { Component, Inject, ViewEncapsulation, Input } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material';
+import { MinimalNodeEntryEntity, SitePaging } from 'alfresco-js-api';
+import { ContentNodeSelectorComponentData } from './content-node-selector.component-data.interface';
 import { RowFilter } from '../document-list/data/row-filter.model';
 import { ImageResolver } from '../document-list/data/image-resolver.model';
 
-import { ContentNodeSelectorComponentData } from './content-node-selector.component-data.interface';
-import { ContentNodeSelectorService } from './content-node-selector.service';
-import { debounceTime } from 'rxjs/operators';
-
 @Component({
     selector: 'adf-content-node-selector',
-    styleUrls: ['./content-node-selector.component.scss'],
     templateUrl: './content-node-selector.component.html',
+    styleUrls: ['./content-node-selector.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
-export class ContentNodeSelectorComponent implements OnInit {
-
-    nodes: NodePaging | null = null;
-    siteId: null | string;
-    searchTerm: string = '';
-    showingSearchResults: boolean = false;
-    loadingSearchResults: boolean = false;
-    inDialog: boolean = false;
-    chosenNode: MinimalNodeEntryEntity | Site | null = null;
-    folderIdToShow: string | null = null;
-    paginationStrategy: PaginationStrategy;
-    pagination: Pagination;
-    skipCount: number = 0;
-    infiniteScroll: boolean = false;
-    buttonActionName: string;
+export class ContentNodeSelectorComponent {
 
+    /**
+     * @deprecated in 2.1.0
+     */
     @Input()
-    title: string;
+    title: string = null;
 
+    /**
+     * @deprecated in 2.1.0
+     */
     @Input()
-    actionName: string;
-
-    @Input()
-    currentFolderId: string | null = null;
+    currentFolderId: string = null;
 
+    /**
+     * @deprecated in 2.1.0
+     */
     @Input()
     dropdownHideMyFiles: boolean = false;
 
+    /**
+     * @deprecated in 2.1.0
+     */
     @Input()
-    dropdownSiteList: any[] = null;
+    dropdownSiteList: SitePaging = null;
 
+    /**
+     * @deprecated in 2.1.0
+     */
     @Input()
     rowFilter: RowFilter = null;
 
+    /**
+     * @deprecated in 2.1.0
+     */
     @Input()
     imageResolver: ImageResolver = null;
 
+    /**
+     * @deprecated in 2.1.0
+     */
     @Input()
     pageSize: number;
 
-    @Output()
-    select: EventEmitter<MinimalNodeEntryEntity[]> = new EventEmitter<MinimalNodeEntryEntity[]>();
+    buttonActionName: string;
+    private chosenNode: MinimalNodeEntryEntity[];
 
-    @ViewChild(DocumentListComponent)
-    documentList: DocumentListComponent;
-
-    @ViewChild(HighlightDirective)
-    highlighter: HighlightDirective;
-
-    debounceSearch: number= 200;
-
-    searchInput: FormControl = new FormControl();
-
-    constructor(private contentNodeSelectorService: ContentNodeSelectorService,
-                private contentService: ContentService,
-                private apiService: AlfrescoApiService,
-                private preferences: UserPreferencesService,
-                @Optional() @Inject(MAT_DIALOG_DATA) data?: ContentNodeSelectorComponentData,
-                @Optional() private containingDialog?: MatDialogRef<ContentNodeSelectorComponent>) {
-        if (data) {
-            this.title = data.title;
-            this.actionName = data.actionName;
-            this.select = data.select;
-            this.currentFolderId = data.currentFolderId;
-            this.dropdownHideMyFiles = data.dropdownHideMyFiles;
-            this.dropdownSiteList = data.dropdownSiteList;
-            this.rowFilter = data.rowFilter;
-            this.imageResolver = data.imageResolver;
-        }
-        this.buttonActionName = this.actionName ? `NODE_SELECTOR.${this.actionName.toUpperCase()}` : 'NODE_SELECTOR.CHOOSE';
-
-        if (this.containingDialog) {
-            this.inDialog = true;
-        }
-
-        this.searchInput.valueChanges
-            .pipe(
-                debounceTime(this.debounceSearch)
-            )
-            .subscribe((searchValue) => {
-                this.search(searchValue);
-            });
-
-        this.pageSize = this.preferences.paginationSize;
+    constructor(@Inject(MAT_DIALOG_DATA) public data: ContentNodeSelectorComponentData) {
+        this.buttonActionName = data.actionName ? `NODE_SELECTOR.${data.actionName.toUpperCase()}` : 'NODE_SELECTOR.CHOOSE';
     }
 
-    ngOnInit() {
-        this.folderIdToShow = this.currentFolderId;
-        this.paginationStrategy = PaginationStrategy.Infinite;
+    close() {
+        this.data.select.complete();
     }
 
-    /**
-     * Updates the site attribute and starts a new search
-     *
-     * @param chosenSite Sitemodel to search within
-     */
-    siteChanged(chosenSite: SiteModel): void {
-        this.siteId = chosenSite.guid;
-        this.updateResults();
+    onSelect(nodeList: MinimalNodeEntryEntity[]) {
+        this.chosenNode = nodeList;
     }
 
-    /**
-     * Updates the searchTerm attribute and starts a new search
-     *
-     * @param searchTerm string value to search against
-     */
-    search(searchTerm: string): void {
-        this.searchTerm = searchTerm;
-        this.updateResults();
-    }
-
-    /**
-     * Returns whether breadcrumb has to be shown or not
-     */
-    needBreadcrumbs() {
-        const whenInFolderNavigation = !this.showingSearchResults,
-            whenInSelectingSearchResult = this.showingSearchResults && this.chosenNode;
-
-        return whenInFolderNavigation || whenInSelectingSearchResult;
-    }
-
-    /**
-     * Returns the actually selected|entered folder node or null in case of searching for the breadcrumb
-     */
-    get breadcrumbFolderNode(): MinimalNodeEntryEntity | null {
-        if (this.showingSearchResults && this.chosenNode) {
-            return this.chosenNode;
-        } else {
-            return this.documentList.folderNode;
-        }
-    }
-
-    /**
-     * Clear the search input
-     */
-    clear(): void {
-        this.searchTerm = '';
-        this.nodes = null;
-        this.skipCount = 0;
-        this.chosenNode = null;
-        this.showingSearchResults = false;
-        this.folderIdToShow = this.currentFolderId;
-    }
-
-    /**
-     * Update the result list depending on the criterias
-     */
-    private updateResults(): void {
-        if (this.searchTerm.length === 0) {
-            this.folderIdToShow = this.siteId || this.currentFolderId;
-        } else {
-            this.startNewSearch();
-        }
-    }
-
-    /**
-     * Load the first page of a new search result
-     */
-    private startNewSearch(): void {
-        this.nodes = null;
-        this.skipCount = 0;
-        this.chosenNode = null;
-        this.folderIdToShow = null;
-        this.querySearch();
-    }
-
-    /**
-     * Loads the next batch of search results
-     *
-     * @param event Pagination object
-     */
-    getNextPageOfSearch(event: Pagination): void {
-        this.infiniteScroll = true;
-        this.skipCount = event.skipCount;
-        this.querySearch();
-    }
-
-    /**
-     * Perform the call to searchService with the proper parameters
-     */
-    private querySearch(): void {
-        this.loadingSearchResults = true;
-
-        this.contentNodeSelectorService.search(this.searchTerm, this.siteId, this.skipCount, this.pageSize)
-            .subscribe(this.showSearchResults.bind(this));
-    }
-
-    /**
-     * Show the results of the search
-     *
-     * @param results Search results
-     */
-    private showSearchResults(results: NodePaging): void {
-        this.showingSearchResults = true;
-        this.loadingSearchResults = false;
-
-        // Documentlist hack, since data displaying for preloaded nodes is a little bit messy there
-        if (!this.nodes) {
-            this.nodes = results;
-        } else {
-            this.documentList.data.loadPage(results, true);
-        }
-
-        this.pagination = results.list.pagination;
-        this.highlight();
-    }
-
-    /**
-     * Hightlight the actual searchterm in the next frame
-     */
-    highlight(): void {
-        setTimeout(() => {
-            this.highlighter.highlight(this.searchTerm);
-        }, 0);
-    }
-
-    /**
-     * Invoked when user selects a node
-     *
-     * @param event CustomEvent for node-select
-     */
-    onNodeSelect(event: any): void {
-        this.attemptNodeSelection(event.detail.node.entry);
-    }
-
-    /**
-     * Sets showingSearchResults state to be able to differentiate between search results or folder results
-     */
-    onFolderChange(): void {
-        this.skipCount = 0;
-        this.infiniteScroll = false;
-        this.showingSearchResults = false;
-    }
-
-    /**
-     * Attempts to set the currently loaded node
-     */
-    onFolderLoaded(nodePage: NodePaging): void {
-        this.attemptNodeSelection(this.documentList.folderNode);
-        this.pagination = nodePage.list.pagination;
-    }
-
-    /**
-     * Selects node as chosen if it has the right permission, clears the selection otherwise
-     *
-     * @param entry
-     */
-    private attemptNodeSelection(entry: MinimalNodeEntryEntity): void {
-        if (this.contentService.hasPermission(entry, 'create')) {
-            this.chosenNode = entry;
-        } else {
-            this.resetChosenNode();
-        }
-    }
-
-    /**
-     * Clears the chosen node
-     */
-    resetChosenNode(): void {
-        this.chosenNode = null;
-    }
-
-    /**
-     * Emit event with the chosen node
-     */
-    choose(): void {
-        const entry: any = this.chosenNode;
-
-        if (entry && entry.guid) {
-            const options = {
-                include: ['path', 'properties', 'allowableOperations']
-            };
-            this.apiService.nodesApi.getNode(entry.guid, options)
-                .then(chosenSiteNode => {
-                    this.select.next([chosenSiteNode.entry]);
-                });
-
-        } else {
-            this.select.next([this.chosenNode]);
-
-        }
-    }
-
-    /**
-     * Close the dialog
-     */
-    close(): void {
-        this.containingDialog.close();
-    }
-
-    onNodeDoubleClick(e: CustomEvent) {
-        const node: any = e.detail.node.entry;
-
-        if (node && node.guid) {
-            const options = {
-                maxItems: this.pageSize,
-                skipCount: this.skipCount,
-                include: ['path', 'properties', 'allowableOperations']
-            };
-
-            this.apiService.nodesApi.getNode(node.guid, options)
-                .then(documentLibrary => {
-                    this.documentList.performCustomSourceNavigation(documentLibrary);
-                });
-        }
+    onClick(): void {
+        this.data.select.next(this.chosenNode);
+        this.data.select.complete();
     }
 }
diff --git a/lib/content-services/content-node-selector/content-node-selector.module.ts b/lib/content-services/content-node-selector/content-node-selector.module.ts
index 03a3c36c22..d9c974a4bf 100644
--- a/lib/content-services/content-node-selector/content-node-selector.module.ts
+++ b/lib/content-services/content-node-selector/content-node-selector.module.ts
@@ -21,12 +21,15 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MaterialModule } from '../material.module';
 import { TranslateModule } from '@ngx-translate/core';
 
+import { ContentNodeSelectorPanelComponent } from './content-node-selector-panel.component';
 import { ContentNodeSelectorComponent } from './content-node-selector.component';
 import { ContentNodeSelectorService } from './content-node-selector.service';
+import { ContentNodeDialogService } from './content-node-dialog.service';
 import { SitesDropdownModule } from '../site-dropdown/sites-dropdown.module';
 import { BreadcrumbModule } from '../breadcrumb/breadcrumb.module';
-import { PaginationModule, ToolbarModule, DirectiveModule } from '@alfresco/adf-core';
+import { PaginationModule, ToolbarModule, DirectiveModule, DataColumnModule, DataTableModule } from '@alfresco/adf-core';
 import { DocumentListModule } from '../document-list/document-list.module';
+import { NameLocationCellComponent } from './name-location-cell/name-location-cell.component';
 
 @NgModule({
     imports: [
@@ -40,19 +43,24 @@ import { DocumentListModule } from '../document-list/document-list.module';
         BreadcrumbModule,
         ToolbarModule,
         DocumentListModule,
+        DataColumnModule,
+        DataTableModule,
         PaginationModule
     ],
     exports: [
-        ContentNodeSelectorComponent
+        ContentNodeSelectorPanelComponent, ContentNodeSelectorComponent
     ],
     entryComponents: [
-        ContentNodeSelectorComponent
+        ContentNodeSelectorPanelComponent, ContentNodeSelectorComponent
     ],
     declarations: [
+        ContentNodeSelectorPanelComponent,
+        NameLocationCellComponent,
         ContentNodeSelectorComponent
     ],
     providers: [
-        ContentNodeSelectorService
+        ContentNodeSelectorService,
+        ContentNodeDialogService
     ]
 })
 export class ContentNodeSelectorModule {}
diff --git a/lib/content-services/content-node-selector/content-node-selector.service.spec.ts b/lib/content-services/content-node-selector/content-node-selector.service.spec.ts
new file mode 100644
index 0000000000..9669449206
--- /dev/null
+++ b/lib/content-services/content-node-selector/content-node-selector.service.spec.ts
@@ -0,0 +1,106 @@
+/*!
+ * @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 { async, TestBed } from '@angular/core/testing';
+import { QueryBody } from 'alfresco-js-api';
+import { SearchService } from '@alfresco/adf-core';
+import { ContentNodeSelectorService } from './content-node-selector.service';
+
+class SearchServiceMock {
+    public query: QueryBody;
+    searchByQueryBody(query: QueryBody) {
+        this.query = query;
+    }
+}
+
+describe('ContentNodeSelectorService', () => {
+
+    let service: ContentNodeSelectorService,
+        search: SearchServiceMock;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            providers: [
+                ContentNodeSelectorService,
+                { provide: SearchService, useClass: SearchServiceMock }
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        service = TestBed.get(ContentNodeSelectorService);
+        search = TestBed.get(SearchService);
+    });
+
+    it('should have the proper main query for search string', () => {
+        service.search('nuka cola quantum');
+
+        expect(search.query.query).toEqual({
+            query: 'nuka cola quantum* OR name:nuka cola quantum*'
+        });
+    });
+
+    it('should make it including the path and allowableOperations', () => {
+        service.search('nuka cola quantum');
+
+        expect(search.query.include).toEqual(['path', 'allowableOperations']);
+    });
+
+    it('should make the search restricted to nodes only', () => {
+        service.search('nuka cola quantum');
+
+        expect(search.query.scope.locations).toEqual(['nodes']);
+    });
+
+    it('should set the maxItems and paging properly by parameters', () => {
+        service.search('nuka cola quantum', null, 10, 100);
+
+        expect(search.query.paging.maxItems).toEqual('100');
+        expect(search.query.paging.skipCount).toEqual('10');
+    });
+
+    it('should set the maxItems and paging properly by default', () => {
+        service.search('nuka cola quantum');
+
+        expect(search.query.paging.maxItems).toEqual('25');
+        expect(search.query.paging.skipCount).toEqual('0');
+    });
+
+    it('should filter the search only for folders', () => {
+        service.search('nuka cola quantum');
+
+        expect(search.query.filterQueries).toContain({ query: "TYPE:'cm:folder'" });
+    });
+
+    it('should filter out the "system-base" entries', () => {
+        service.search('nuka cola quantum');
+
+        expect(search.query.filterQueries).toContain({ query: 'NOT cm:creator:System' });
+    });
+
+    it('should filter for the provided ancestor if defined', () => {
+        service.search('nuka cola quantum', 'diamond-city');
+
+        expect(search.query.filterQueries).toContain({ query: 'ANCESTOR:\'workspace://SpacesStore/diamond-city\'' });
+    });
+
+    it('should NOT filter for the ancestor if NOT defined', () => {
+        service.search('nuka cola quantum');
+
+        expect(search.query.filterQueries).not.toContain({ query: 'ANCESTOR:\'workspace://SpacesStore/null\'' });
+    });
+});
diff --git a/lib/content-services/content-node-selector/content-node-selector.service.ts b/lib/content-services/content-node-selector/content-node-selector.service.ts
index 474267c9c8..d743fbc5f7 100644
--- a/lib/content-services/content-node-selector/content-node-selector.service.ts
+++ b/lib/content-services/content-node-selector/content-node-selector.service.ts
@@ -26,8 +26,7 @@ import { Observable } from 'rxjs/Observable';
 @Injectable()
 export class ContentNodeSelectorService {
 
-    constructor(private searchService: SearchService) {
-    }
+    constructor(private searchService: SearchService) {}
 
     /**
      * Performs a search for content node selection
@@ -37,7 +36,9 @@ export class ContentNodeSelectorService {
      * @param rootNodeId    The root is to start the search from
      * @param maxItems      How many items to load
      */
-    public search(searchTerm: string, rootNodeId: string, skipCount: number = 0, maxItems: number = 25): Observable<NodePaging> {
+    public search(searchTerm: string, rootNodeId: string = null, skipCount: number = 0, maxItems: number = 25): Observable<NodePaging> {
+
+        const parentFiltering = rootNodeId ? [ { query: `ANCESTOR:'workspace://SpacesStore/${rootNodeId}'` } ] : [];
 
         let defaultSearchNode: any = {
             query: {
@@ -50,13 +51,14 @@ export class ContentNodeSelectorService {
             },
             filterQueries: [
                 { query: "TYPE:'cm:folder'" },
-                { query: 'NOT cm:creator:System' }]
+                { query: 'NOT cm:creator:System' },
+                ...parentFiltering
+            ],
+            scope: {
+                locations: ['nodes']
+            }
         };
 
-        if (rootNodeId) {
-            defaultSearchNode.scope = rootNodeId;
-        }
-
-        return this.searchService.search(defaultSearchNode);
+        return this.searchService.searchByQueryBody(defaultSearchNode);
     }
 }
diff --git a/lib/content-services/content-node-selector/name-location-cell/name-location-cell.component.scss b/lib/content-services/content-node-selector/name-location-cell/name-location-cell.component.scss
new file mode 100644
index 0000000000..cb3aec5dd0
--- /dev/null
+++ b/lib/content-services/content-node-selector/name-location-cell/name-location-cell.component.scss
@@ -0,0 +1,13 @@
+@mixin adf-name-location-cell-theme($theme) {
+    $foreground: map-get($theme, foreground);
+
+    .adf-name-location-cell {        
+        &-location {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;                
+            color: mat-color($foreground, base, 0.5);
+            font-size: 12px;
+        }
+    }
+}
diff --git a/lib/content-services/content-node-selector/name-location-cell/name-location-cell.component.spec.ts b/lib/content-services/content-node-selector/name-location-cell/name-location-cell.component.spec.ts
new file mode 100644
index 0000000000..72376c2b35
--- /dev/null
+++ b/lib/content-services/content-node-selector/name-location-cell/name-location-cell.component.spec.ts
@@ -0,0 +1,65 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { NameLocationCellComponent } from './name-location-cell.component';
+import { By } from '@angular/platform-browser';
+import { DataRow } from '@alfresco/adf-core';
+
+describe('NameLocationCellComponent', () => {
+    let component: NameLocationCellComponent;
+    let fixture: ComponentFixture<NameLocationCellComponent>;
+    let rowData: DataRow;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [
+                NameLocationCellComponent
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(NameLocationCellComponent);
+        component = fixture.componentInstance;
+
+        rowData = <DataRow> {
+            getValue(key) {
+                if (key === 'name') {
+                    return 'file-name';
+                } else if (key === 'path') {
+                    return { name: '/path/to/location' };
+                }
+            }
+        };
+        component.row = rowData;
+        fixture.detectChanges();
+    });
+
+    it('should set fileName and location properly', () => {
+        const fileName = fixture.debugElement.query(By.css('.adf-name-location-cell-name')).nativeElement.innerText;
+        const location = fixture.debugElement.query(By.css('.adf-name-location-cell-location')).nativeElement.innerText;
+        expect(fileName).toBe('file-name');
+        expect(location).toBe('/path/to/location');
+    });
+
+    it('should set tooltip properly', () => {
+        const tooltip = fixture.debugElement.query(By.css('.adf-name-location-cell-location')).nativeElement.getAttribute('title');
+
+        expect(tooltip).toEqual('/path/to/location');
+    });
+});
diff --git a/lib/content-services/content-node-selector/name-location-cell/name-location-cell.component.ts b/lib/content-services/content-node-selector/name-location-cell/name-location-cell.component.ts
new file mode 100644
index 0000000000..61800cbc9d
--- /dev/null
+++ b/lib/content-services/content-node-selector/name-location-cell/name-location-cell.component.ts
@@ -0,0 +1,43 @@
+/*!
+ * @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 { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { DataTableCellComponent } from '@alfresco/adf-core';
+
+@Component({
+    selector: 'adf-name-location-cell',
+    template: `
+    <div class="adf-name-location-cell-name">{{ name }}</div>
+    <div class="adf-name-location-cell-location" [title]="path?.name">{{ path?.name }}</div>
+    `,
+    styleUrls: ['./name-location-cell.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: { class: 'adf-name-location-cell' }
+})
+export class NameLocationCellComponent extends DataTableCellComponent implements OnInit {
+
+    path: string = '';
+    name: string = '';
+
+    ngOnInit() {
+        if (this.row) {
+            this.path = this.row.getValue('path');
+            this.name = this.row.getValue('name');
+        }
+    }
+}
diff --git a/lib/content-services/content-node-selector/public-api.ts b/lib/content-services/content-node-selector/public-api.ts
index 585c742fdf..b3736503c3 100644
--- a/lib/content-services/content-node-selector/public-api.ts
+++ b/lib/content-services/content-node-selector/public-api.ts
@@ -16,5 +16,7 @@
  */
 
 export * from './content-node-selector.component-data.interface';
+export * from './content-node-selector-panel.component';
 export * from './content-node-selector.component';
 export * from './content-node-selector.service';
+export * from './content-node-dialog.service';
diff --git a/lib/content-services/content.module.ts b/lib/content-services/content.module.ts
index 3bbace2f4f..a52cdb2f1f 100644
--- a/lib/content-services/content.module.ts
+++ b/lib/content-services/content.module.ts
@@ -83,8 +83,7 @@ import { ContentMetadataModule } from './content-metadata/content-metadata.modul
         ContentNodeSelectorModule,
         ContentMetadataModule,
         DialogModule,
-        FolderDirectiveModule,
-        MaterialModule
+        FolderDirectiveModule
     ]
 })
 export class ContentModule {
diff --git a/lib/content-services/dialogs/download-zip.dialog.ts b/lib/content-services/dialogs/download-zip.dialog.ts
index ffdb2f472a..84a9b003e9 100644
--- a/lib/content-services/dialogs/download-zip.dialog.ts
+++ b/lib/content-services/dialogs/download-zip.dialog.ts
@@ -34,32 +34,17 @@ export class DownloadZipDialogComponent implements OnInit {
 
     constructor(private apiService: AlfrescoApiService,
                 private dialogRef: MatDialogRef<DownloadZipDialogComponent>,
-                @Inject(MAT_DIALOG_DATA) private data: { nodeIds?: string[] },
+                @Inject(MAT_DIALOG_DATA) private data: any,
                 private logService: LogService) {
     }
 
-    private get downloadsApi() {
-        return this.apiService.getInstance().core.downloadsApi;
-    }
-
-    private get nodesApi() {
-        return this.apiService.getInstance().core.nodesApi;
-    }
-
-    private get contentApi() {
-        return this.apiService.getInstance().content;
-    }
-
     ngOnInit() {
         if (this.data && this.data.nodeIds && this.data.nodeIds.length > 0) {
-            // change timeout to have a delay for demo purposes
-            setTimeout(() => {
-                if (!this.cancelled) {
-                    this.downloadZip(this.data.nodeIds);
-                } else {
-                    this.logService.log('Cancelled');
-                }
-            }, 0);
+            if (!this.cancelled) {
+                this.downloadZip(this.data.nodeIds);
+            } else {
+                this.logService.log('Cancelled');
+            }
         }
     }
 
@@ -71,7 +56,7 @@ export class DownloadZipDialogComponent implements OnInit {
     downloadZip(nodeIds: string[]) {
         if (nodeIds && nodeIds.length > 0) {
 
-            const promise: any = this.downloadsApi.createDownload({ nodeIds });
+            const promise: any = this.apiService.getInstance().core.downloadsApi.createDownload({ nodeIds });
 
             promise.on('progress', progress => this.logService.log('Progress', progress));
             promise.on('error', error => this.logService.error('Error', error));
@@ -79,9 +64,9 @@ export class DownloadZipDialogComponent implements OnInit {
 
             promise.on('success', (data: DownloadEntry) => {
                 if (data && data.entry && data.entry.id) {
-                    const url = this.contentApi.getContentUrl(data.entry.id, true);
-                    // the call is needed only to get the name of the package
-                    this.nodesApi.getNode(data.entry.id).then((downloadNode: MinimalNodeEntity) => {
+                    const url = this.apiService.getInstance().content.getContentUrl(data.entry.id, true);
+
+                    this.apiService.getInstance().core.nodesApi.getNode(data.entry.id).then((downloadNode: MinimalNodeEntity) => {
                         this.logService.log(downloadNode);
                         const fileName = downloadNode.entry.name;
                         this.waitAndDownload(data.entry.id, url, fileName);
@@ -96,9 +81,9 @@ export class DownloadZipDialogComponent implements OnInit {
             return;
         }
 
-        this.downloadsApi.getDownload(downloadId).then((d: DownloadEntry) => {
-            if (d.entry) {
-                if (d.entry.status === 'DONE') {
+        this.apiService.getInstance().core.downloadsApi.getDownload(downloadId).then((downloadEntry: DownloadEntry) => {
+            if (downloadEntry.entry) {
+                if (downloadEntry.entry.status === 'DONE') {
                     this.download(url, fileName);
                 } else {
                     setTimeout(() => {
diff --git a/lib/content-services/document-list/components/content-action/content-action.component.spec.ts b/lib/content-services/document-list/components/content-action/content-action.component.spec.ts
index a22c3ff1df..f30f94f7a9 100644
--- a/lib/content-services/document-list/components/content-action/content-action.component.spec.ts
+++ b/lib/content-services/document-list/components/content-action/content-action.component.spec.ts
@@ -62,7 +62,7 @@ describe('ContentAction', () => {
 
     beforeEach(() => {
         contentService = TestBed.get(ContentService);
-        nodeActionsService = new NodeActionsService(null, null, null);
+        nodeActionsService = new NodeActionsService(null, null);
         documentActions = new DocumentActionsService(nodeActionsService);
         folderActions = new FolderActionsService(nodeActionsService, null, contentService);
 
diff --git a/lib/content-services/document-list/components/content-action/content-action.component.ts b/lib/content-services/document-list/components/content-action/content-action.component.ts
index 5361cdfad5..6c0f93fd92 100644
--- a/lib/content-services/document-list/components/content-action/content-action.component.ts
+++ b/lib/content-services/document-list/components/content-action/content-action.component.ts
@@ -35,36 +35,51 @@ import { ContentActionListComponent } from './content-action-list.component';
 })
 export class ContentActionComponent implements OnInit, OnChanges {
 
+    /** The title of the action as shown in the menu. */
     @Input()
     title: string = 'Action';
 
+    /** The name of the icon to display next to the menu command (can be left blank). */
     @Input()
     icon: string;
 
+    /** System actions. Can be "delete", "download", "copy" or "move". */
     @Input()
     handler: string;
 
+    /** Type of item that the action appies to. Can be "document" or "folder" */
     @Input()
     target: string;
 
+    /** The permission type. */
     @Input()
     permission: string;
 
+    /** Should this action be disabled in the menu if the user doesn't have permission for it? */
     @Input()
     disableWithNoPermission: boolean;
 
+    /** Is the menu item disabled? */
     @Input()
     disabled: boolean = false;
 
+    /** Emitted when the user selects the action from the menu. */
     @Output()
     execute = new EventEmitter();
 
+    /** Emitted when a permission error occurs */
     @Output()
     permissionEvent = new EventEmitter();
 
+    /** Emitted when an error occurs during the action.
+     * Applies to copy and move actions.
+     */
     @Output()
     error = new EventEmitter();
 
+    /** Emitted when the action succeeds with the success string message.
+     * Applies to copy, move and delete actions.
+     */
     @Output()
     success = new EventEmitter();
 
diff --git a/lib/content-services/document-list/components/content-column/content-column.component.ts b/lib/content-services/document-list/components/content-column/content-column.component.ts
index ebca175b37..1a79d22b91 100644
--- a/lib/content-services/document-list/components/content-column/content-column.component.ts
+++ b/lib/content-services/document-list/components/content-column/content-column.component.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
- /* tslint:disable:component-selector  */
+ /* tslint:disable:component-selector no-input-rename  */
 
 import { DataColumn } from '@alfresco/adf-core';
 import { LogService } from '@alfresco/adf-core';
diff --git a/lib/content-services/document-list/components/document-list.component.ts b/lib/content-services/document-list/components/document-list.component.ts
index f01d57a7a6..4c6b380f77 100644
--- a/lib/content-services/document-list/components/document-list.component.ts
+++ b/lib/content-services/document-list/components/document-list.component.ts
@@ -41,6 +41,7 @@ import {
 } from 'alfresco-js-api';
 import { Observable } from 'rxjs/Observable';
 import { Subject } from 'rxjs/Subject';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { presetsDefaultModel } from '../models/preset.model';
 import { ShareDataRow } from './../data/share-data-row.model';
 import { ShareDataTableAdapter } from './../data/share-datatable-adapter';
@@ -70,94 +71,140 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
 
     @ContentChild(DataColumnListComponent) columnList: DataColumnListComponent;
 
+    /** Define a set of CSS styles styles to apply depending on the permission
+     * of the user on that node. See the Permission Style model
+     * page for further details and examples.
+     */
     @Input()
     permissionsStyle: PermissionStyleModel[] = [];
 
+    /** The default route for all the location-based columns (if declared). */
     @Input()
     locationFormat: string = '/';
 
+    /** Toggles navigation to folder content or file preview */
     @Input()
     navigate: boolean = true;
 
+    /** User interaction for folder navigation or file preview. Valid values are "click" and "dblclick". */
     @Input()
     navigationMode: string = DocumentListComponent.DOUBLE_CLICK_NAVIGATION; // click|dblclick
 
+    /** Show document thumbnails rather than icons */
     @Input()
     thumbnails: boolean = false;
 
+    /** 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.
+     */
     @Input()
     selectionMode: string = 'single'; // null|single|multiple
 
+    /** Toggles multiselect mode */
     @Input()
     multiselect: boolean = false;
 
+    /** Toggles content actions for each row */
     @Input()
     contentActions: boolean = false;
 
+    /** Position of the content actions dropdown menu. Can be set to "left" or "right". */
     @Input()
     contentActionsPosition: string = 'right'; // left|right
 
+    /** Toggles context menus for each row */
     @Input()
     contextMenuActions: boolean = false;
 
+    /** Custom image for empty folder */
     @Input()
     emptyFolderImageUrl: string = './assets/images/empty_doc_lib.svg';
 
+    /** Toggle file drop support for rows (see Upload Directive for further details */
     @Input()
     allowDropFiles: boolean = false;
 
+    /** 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.
+     */
     @Input()
     sorting: string[];
 
+    /** The inline style to apply to every row. See
+     * the Angular NgStyle
+     * docs for more details and usage examples.
+     */
     @Input()
     rowStyle: string;
 
+    /** The CSS class to apply to every row */
     @Input()
     rowStyleClass: string;
 
+    /** Toggles the loading state and animated spinners for the component. Used in
+     * combination with `navigate=false` to perform custom navigation and loading
+     * state indication.
+     */
     @Input()
     loading: boolean = false;
 
+    /** Custom row filter */
     @Input()
     rowFilter: any | null = null;
 
+    /** Custom image resolver */
     @Input()
     imageResolver: any | null = null;
 
-    // The identifier of a node. You can also use one of these well-known aliases: -my- | -shared- | -root-
+    /** The ID of the folder node to display or a reserved string alias for special sources */
     @Input()
     currentFolderId: string = null;
 
+    /** Currently displayed folder node */
     @Input()
     folderNode: MinimalNodeEntryEntity = null;
 
+    /** The Document list will show all the nodes contained in the NodePaging entity */
     @Input()
     node: NodePaging = null;
 
+    /** Default value is stored into user preference settings */
     @Input()
     maxItems: number;
 
+    /** Number of elements to skip over for pagination purposes */
     @Input()
     skipCount: number = 0;
 
+    /** Set document list to work in infinite scrolling mode */
     @Input()
     enableInfiniteScrolling: boolean = false;
 
+    /** Emitted when the user clicks a list node */
     @Output()
     nodeClick: EventEmitter<NodeEntityEvent> = new EventEmitter<NodeEntityEvent>();
 
+    /** Emitted when the user double-clicks a list node */
     @Output()
     nodeDblClick: EventEmitter<NodeEntityEvent> = new EventEmitter<NodeEntityEvent>();
 
+    /** Emitted when the current display folder changes */
     @Output()
     folderChange: EventEmitter<NodeEntryEvent> = new EventEmitter<NodeEntryEvent>();
 
+    /** Emitted when the user acts upon files with either single or double click
+     * (depends on `navigation-mode`). Useful for integration with the
+     * Viewer component.
+     */
     @Output()
     preview: EventEmitter<NodeEntityEvent> = new EventEmitter<NodeEntityEvent>();
 
+    /** Emitted when the Document List has loaded all items and is ready for use */
     @Output()
     ready: EventEmitter<NodePaging> = new EventEmitter();
 
+    /** Emitted when the API fails to get the Document List data */
     @Output()
     error: EventEmitter<any> = new EventEmitter();
 
@@ -174,7 +221,7 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
     noPermission: boolean = false;
     selection = new Array<MinimalNodeEntity>();
 
-    pagination = new Subject<Pagination>();
+    pagination: BehaviorSubject<Pagination>;
 
     private layoutPresets = {};
     private currentNodeAllowableOperations: string[] = [];
@@ -190,7 +237,7 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
                 private preferences: UserPreferencesService) {
         this.maxItems = this.preferences.paginationSize;
 
-        this.pagination.next(<Pagination> {
+        this.pagination = new BehaviorSubject<Pagination>(<Pagination> {
             maxItems: this.preferences.paginationSize,
             skipCount: 0,
             totalItems: 0,
@@ -874,7 +921,7 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
     }
 
     get supportedPageSizes(): number[] {
-        return this.appConfig.get('document-list.supportedPageSizes', [5, 10, 15, 25]);
+        return this.preferences.getDifferentPageSizes();
     }
 
     ngOnDestroy() {
diff --git a/lib/content-services/document-list/services/document-actions.service.spec.ts b/lib/content-services/document-list/services/document-actions.service.spec.ts
index f49fb7a620..d6b83d5cf4 100644
--- a/lib/content-services/document-list/services/document-actions.service.spec.ts
+++ b/lib/content-services/document-list/services/document-actions.service.spec.ts
@@ -32,7 +32,7 @@ describe('DocumentActionsService', () => {
     beforeEach(() => {
         documentListService = new DocumentListServiceMock();
         contentService = new ContentService(null, null, null, null);
-        nodeActionsService = new NodeActionsService(null, null, null);
+        nodeActionsService = new NodeActionsService(null, null);
         service = new DocumentActionsService(nodeActionsService, documentListService, contentService);
     });
 
diff --git a/lib/content-services/document-list/services/folder-actions.service.spec.ts b/lib/content-services/document-list/services/folder-actions.service.spec.ts
index c32baa93d7..371d4846ab 100644
--- a/lib/content-services/document-list/services/folder-actions.service.spec.ts
+++ b/lib/content-services/document-list/services/folder-actions.service.spec.ts
@@ -23,6 +23,7 @@ import { ContentActionHandler } from '../models/content-action.model';
 import { DocumentListService } from './document-list.service';
 import { FolderActionsService } from './folder-actions.service';
 import { NodeActionsService } from './node-actions.service';
+import { ContentNodeDialogService } from '../../content-node-selector/content-node-dialog.service';
 
 describe('FolderActionsService', () => {
 
@@ -37,7 +38,8 @@ describe('FolderActionsService', () => {
                 FolderActionsService,
                 NodeActionsService,
                 TranslationService,
-                NotificationService
+                NotificationService,
+                ContentNodeDialogService
             ]
         }).compileComponents();
     }));
diff --git a/lib/content-services/document-list/services/node-actions.service.service.spec.ts b/lib/content-services/document-list/services/node-actions.service.service.spec.ts
new file mode 100644
index 0000000000..600a94d472
--- /dev/null
+++ b/lib/content-services/document-list/services/node-actions.service.service.spec.ts
@@ -0,0 +1,106 @@
+/*!
+ * @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 { async, TestBed } from '@angular/core/testing';
+import { MinimalNodeEntryEntity } from 'alfresco-js-api';
+import { AppConfigService } from '@alfresco/adf-core';
+import { DocumentListService } from './document-list.service';
+import { NodeActionsService } from './node-actions.service';
+import { ContentNodeDialogService } from '../../content-node-selector/content-node-dialog.service';
+import { Observable } from 'rxjs/Observable';
+
+const fakeNode: MinimalNodeEntryEntity = <MinimalNodeEntryEntity> {
+        id: 'fake'
+};
+
+describe('NodeActionsService', () => {
+
+    let service: NodeActionsService;
+    let documentListService: DocumentListService;
+    let contentDialogService: ContentNodeDialogService;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [],
+            providers: [
+                NodeActionsService,
+                DocumentListService,
+                ContentNodeDialogService
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        let appConfig: AppConfigService = TestBed.get(AppConfigService);
+        appConfig.config.ecmHost = 'http://localhost:9876/ecm';
+
+        service = TestBed.get(NodeActionsService);
+        documentListService = TestBed.get(DocumentListService);
+        contentDialogService = TestBed.get(ContentNodeDialogService);
+    });
+
+    it('should be able to create the service', () => {
+        expect(service).not.toBeNull();
+    });
+
+    it('should be able to copy content', async(() => {
+        spyOn(documentListService, 'copyNode').and.returnValue(Observable.of('FAKE-OK'));
+        spyOn(contentDialogService, 'openCopyMoveDialog').and.returnValue(Observable.of([fakeNode]));
+
+        service.copyContent(fakeNode, 'allowed').subscribe((value) => {
+            expect(value).toBe('OPERATION.SUCCES.CONTENT.COPY');
+        });
+    }));
+
+    it('should be able to move content', async(() => {
+        spyOn(documentListService, 'moveNode').and.returnValue(Observable.of('FAKE-OK'));
+        spyOn(contentDialogService, 'openCopyMoveDialog').and.returnValue(Observable.of([fakeNode]));
+
+        service.moveContent(fakeNode, 'allowed').subscribe((value) => {
+            expect(value).toBe('OPERATION.SUCCES.CONTENT.MOVE');
+        });
+    }));
+
+    it('should be able to move folder', async(() => {
+        spyOn(documentListService, 'moveNode').and.returnValue(Observable.of('FAKE-OK'));
+        spyOn(contentDialogService, 'openCopyMoveDialog').and.returnValue(Observable.of([fakeNode]));
+
+        service.moveFolder(fakeNode, 'allowed').subscribe((value) => {
+            expect(value).toBe('OPERATION.SUCCES.FOLDER.MOVE');
+        });
+    }));
+
+    it('should be able to copy folder', async(() => {
+        spyOn(documentListService, 'copyNode').and.returnValue(Observable.of('FAKE-OK'));
+        spyOn(contentDialogService, 'openCopyMoveDialog').and.returnValue(Observable.of([fakeNode]));
+
+        service.copyFolder(fakeNode, 'allowed').subscribe((value) => {
+            expect(value).toBe('OPERATION.SUCCES.FOLDER.COPY');
+        });
+    }));
+
+    it('should be able to propagate the dialog error', async(() => {
+        spyOn(documentListService, 'copyNode').and.returnValue(Observable.throw('FAKE-KO'));
+        spyOn(contentDialogService, 'openCopyMoveDialog').and.returnValue(Observable.of([fakeNode]));
+
+        service.copyFolder(fakeNode, '!allowed').subscribe((value) => {
+        }, (error) => {
+            expect(error).toBe('FAKE-KO');
+        });
+    }));
+
+});
diff --git a/lib/content-services/document-list/services/node-actions.service.ts b/lib/content-services/document-list/services/node-actions.service.ts
index 42ccb6e951..fbbad226f2 100644
--- a/lib/content-services/document-list/services/node-actions.service.ts
+++ b/lib/content-services/document-list/services/node-actions.service.ts
@@ -15,23 +15,17 @@
  * limitations under the License.
  */
 
-import { DataColumn } from '@alfresco/adf-core';
-import { ContentService } from '@alfresco/adf-core';
-import { EventEmitter, Injectable } from '@angular/core';
-import { MatDialog } from '@angular/material';
+import { Injectable } from '@angular/core';
 import { MinimalNodeEntryEntity } from 'alfresco-js-api';
 import { Subject } from 'rxjs/Subject';
-import { ContentNodeSelectorComponent } from '../../content-node-selector/content-node-selector.component';
-import { ContentNodeSelectorComponentData } from '../../content-node-selector/content-node-selector.component-data.interface';
-import { ShareDataRow } from '../data/share-data-row.model';
 import { DocumentListService } from './document-list.service';
+import { ContentNodeDialogService } from '../../content-node-selector/content-node-dialog.service';
 
 @Injectable()
 export class NodeActionsService {
 
-    constructor(private dialog: MatDialog,
-                private documentListService?: DocumentListService,
-                private contentService?: ContentService) {}
+    constructor(private contentDialogService: ContentNodeDialogService,
+                private documentListService?: DocumentListService) {}
 
     /**
      * Copy content node
@@ -84,51 +78,20 @@ export class NodeActionsService {
     private doFileOperation(action: string, type: string, contentEntry: MinimalNodeEntryEntity, permission?: string): Subject<string> {
         const observable: Subject<string> = new Subject<string>();
 
-        if (this.contentService.hasPermission(contentEntry, permission)) {
-            const data: ContentNodeSelectorComponentData = {
-                title: `${action} '${contentEntry.name}' to ...`,
-                actionName: action,
-                currentFolderId: contentEntry.parentId,
-                rowFilter: this.rowFilter.bind(this, contentEntry.id),
-                imageResolver: this.imageResolver.bind(this),
-                select: new EventEmitter<MinimalNodeEntryEntity[]>()
-            };
-
-            this.dialog.open(ContentNodeSelectorComponent, { data, panelClass: 'adf-content-node-selector-dialog', width: '630px' });
-
-            data.select.subscribe((selections: MinimalNodeEntryEntity[]) => {
+        this.contentDialogService
+            .openCopyMoveDialog(action, contentEntry, permission)
+            .subscribe((selections: MinimalNodeEntryEntity[]) => {
                 const selection = selections[0];
                 this.documentListService[`${action}Node`].call(this.documentListService, contentEntry.id, selection.id)
                     .subscribe(
-                        observable.next.bind(observable, `OPERATION.SUCCES.${type.toUpperCase()}.${action.toUpperCase()}`),
-                        observable.error.bind(observable)
+                    observable.next.bind(observable, `OPERATION.SUCCES.${type.toUpperCase()}.${action.toUpperCase()}`),
+                    observable.error.bind(observable)
                     );
-                this.dialog.closeAll();
+            },
+            (error) => {
+                observable.error(error);
+                return observable;
             });
-
-            return observable;
-        } else {
-            observable.error(new Error(JSON.stringify({ error: { statusCode: 403 } })));
-            return observable;
-        }
-    }
-
-    private rowFilter(currentNodeId, row: ShareDataRow): boolean {
-        const node: MinimalNodeEntryEntity = row.node.entry;
-
-        if (node.id === currentNodeId || node.isFile) {
-            return false;
-        } else {
-            return true;
-        }
-    }
-
-    private imageResolver(row: ShareDataRow, col: DataColumn): string|null {
-        const entry: MinimalNodeEntryEntity = row.node.entry;
-        if (!this.contentService.hasPermission(entry, 'create')) {
-            return this.documentListService.getMimeTypeIcon('disable/folder');
-        }
-
-        return null;
+        return observable;
     }
 }
diff --git a/lib/content-services/folder-directive/folder-create.directive.ts b/lib/content-services/folder-directive/folder-create.directive.ts
index 493b0b20c1..b7bcc6b241 100644
--- a/lib/content-services/folder-directive/folder-create.directive.ts
+++ b/lib/content-services/folder-directive/folder-create.directive.ts
@@ -15,6 +15,8 @@
  * limitations under the License.
  */
 
+/* tslint:disable:no-input-rename  */
+
 import { Directive, HostListener, Input } from '@angular/core';
 import { MatDialog, MatDialogConfig } from '@angular/material';
 import { MinimalNodeEntryEntity } from 'alfresco-js-api';
diff --git a/lib/content-services/folder-directive/folder-edit.directive.ts b/lib/content-services/folder-directive/folder-edit.directive.ts
index 3db1a46751..17e3f8b760 100644
--- a/lib/content-services/folder-directive/folder-edit.directive.ts
+++ b/lib/content-services/folder-directive/folder-edit.directive.ts
@@ -15,6 +15,8 @@
  * limitations under the License.
  */
 
+/* tslint:disable:no-input-rename  */
+
 import { Directive, ElementRef, HostListener, Input } from '@angular/core';
 import { MatDialog, MatDialogConfig } from '@angular/material';
 
diff --git a/lib/content-services/i18n/de.json b/lib/content-services/i18n/de.json
index 40e2339672..fcb846301a 100644
--- a/lib/content-services/i18n/de.json
+++ b/lib/content-services/i18n/de.json
@@ -1,25 +1,4 @@
 {
-  "FORM": {
-    "START_FORM": {
-      "TITLE": "Startformular"
-    },
-    "PREVIEW": {
-      "IMAGE_NOT_AVAILABLE": "Vorschau nicht verfügbar"
-    },
-    "FIELD": {
-      "UPLOAD": "Hochladen",
-      "REQUIRED": "*Erforderlich",
-      "VALIDATOR": {
-        "INVALID_NUMBER": "Verwenden Sie ein anderes Zahlenformat",
-        "INVALID_DATE": "Verwenden Sie ein anderes Datumsformat",
-        "INVALID_VALUE": "Geben Sie einen anderen Wert ein",
-        "NOT_GREATER_THAN": "Darf nicht größer als {{ maxValue }} sein",
-        "NOT_LESS_THAN": "Darf nicht kleiner als {{ minValue }} sein",
-        "AT_LEAST_LONG": "Geben Sie mindestens {{ minLength }} Zeichen ein",
-        "NO_LONGER_THAN": "Geben Sie höchstens {{ maxLength }} Zeichen ein"
-      }
-    }
-  },
   "ADF-DOCUMENT-LIST": {
     "EMPTY": {
       "HEADER": "Dieser Ordner ist leer"
@@ -62,7 +41,8 @@
     "CHOOSE": "Auswählen",
     "COPY": "Kopieren",
     "MOVE": "Verschieben",
-    "NO_RESULTS": "Keine Ergebnisse gefunden"
+    "NO_RESULTS": "Keine Ergebnisse gefunden",
+    "SELECT_LOCATION": "Speicherort auswählen"
   },
   "OPERATION": {
     "SUCCES": {
@@ -184,5 +164,20 @@
   },
   "PERMISSON": {
     "LACKOF": "Sie verfügen nicht über die nötige Berechtigung ('{{permission}}'), um {{type}} zu {{action}}"
+  },
+  "METADATA": {
+    "BASIC": {
+      "HEADER": "Eigenschaften",
+      "NAME": "Name",
+      "TITLE": "Titel",
+      "DESCRIPTION": "Beschreibung",
+      "AUTHOR": "Autor",
+      "MIMETYPE": "MIME-Type",
+      "SIZE": "Größe",
+      "CREATOR": "Ersteller",
+      "CREATED_DATE": "Datum der Erstellung",
+      "MODIFIER": "Bearbeiter",
+      "MODIFIED_DATE": "Datum der Änderung"
+    }
   }
 }
\ No newline at end of file
diff --git a/lib/content-services/i18n/en.json b/lib/content-services/i18n/en.json
index 0c242715b1..77b90fcd5a 100644
--- a/lib/content-services/i18n/en.json
+++ b/lib/content-services/i18n/en.json
@@ -1,25 +1,4 @@
 {
-  "FORM": {
-    "START_FORM": {
-      "TITLE": "Start Form"
-    },
-    "PREVIEW": {
-      "IMAGE_NOT_AVAILABLE": "Preview not available"
-    },
-    "FIELD": {
-      "UPLOAD": "UPLOAD",
-      "REQUIRED": "*Required",
-      "VALIDATOR": {
-        "INVALID_NUMBER": "Use a different number format",
-        "INVALID_DATE": "Use a different date format",
-        "INVALID_VALUE": "Enter a different value",
-        "NOT_GREATER_THAN": "Can't be greater than {{ maxValue }}",
-        "NOT_LESS_THAN": "Can't be less than {{ minValue }}",
-        "AT_LEAST_LONG": "Enter at least {{ minLength }} characters",
-        "NO_LONGER_THAN": "Enter no more than {{ maxLength }} characters"
-      }
-    }
-  },
   "ADF-DOCUMENT-LIST": {
     "EMPTY": {
       "HEADER": "This folder is empty"
@@ -188,6 +167,7 @@
   },
   "METADATA": {
     "BASIC": {
+        "HEADER": "Properties",
         "NAME": "Name",
         "TITLE": "Title",
         "DESCRIPTION": "Description",
diff --git a/lib/content-services/i18n/es.json b/lib/content-services/i18n/es.json
index fc1c4cbc42..27e670e9f4 100644
--- a/lib/content-services/i18n/es.json
+++ b/lib/content-services/i18n/es.json
@@ -1,25 +1,4 @@
 {
-  "FORM": {
-    "START_FORM": {
-      "TITLE": "Iniciar formulario"
-    },
-    "PREVIEW": {
-      "IMAGE_NOT_AVAILABLE": "Vista previa no disponible"
-    },
-    "FIELD": {
-      "UPLOAD": "Cargar",
-      "REQUIRED": "*Requerido",
-      "VALIDATOR": {
-        "INVALID_NUMBER": "Utilizar un formato de número diferente",
-        "INVALID_DATE": "Utilizar un formato de fecha diferente",
-        "INVALID_VALUE": "Introducir un valor diferente",
-        "NOT_GREATER_THAN": "No puede ser mayor que {{ maxValue }}",
-        "NOT_LESS_THAN": "No puede ser menor que {{ minValue }}",
-        "AT_LEAST_LONG": "Introducir al menos {{ minLength }} caracteres",
-        "NO_LONGER_THAN": "No introducir más de {{ maxLength }} caracteres"
-      }
-    }
-  },
   "ADF-DOCUMENT-LIST": {
     "EMPTY": {
       "HEADER": "Esta carpeta está vacía"
@@ -62,7 +41,8 @@
     "CHOOSE": "Elegir",
     "COPY": "Copiar",
     "MOVE": "Mover",
-    "NO_RESULTS": "Ningún resultado encontrado"
+    "NO_RESULTS": "Ningún resultado encontrado",
+    "SELECT_LOCATION": "Seleccionar ubicación"
   },
   "OPERATION": {
     "SUCCES": {
@@ -184,5 +164,20 @@
   },
   "PERMISSON": {
     "LACKOF": "No tiene permiso {{permission}} para {{action}} el {{type}}"
+  },
+  "METADATA": {
+    "BASIC": {
+      "HEADER": "Propiedades",
+      "NAME": "Nombre",
+      "TITLE": "Título",
+      "DESCRIPTION": "Descripción",
+      "AUTHOR": "Autor",
+      "MIMETYPE": "Tipo MIME",
+      "SIZE": "Tamaño",
+      "CREATOR": "Creador",
+      "CREATED_DATE": "Fecha de creación",
+      "MODIFIER": "Modificador",
+      "MODIFIED_DATE": "Fecha de modificación"
+    }
   }
 }
\ No newline at end of file
diff --git a/lib/content-services/i18n/fr.json b/lib/content-services/i18n/fr.json
index ee5b4847c0..e07899c0f7 100644
--- a/lib/content-services/i18n/fr.json
+++ b/lib/content-services/i18n/fr.json
@@ -1,25 +1,4 @@
 {
-  "FORM": {
-    "START_FORM": {
-      "TITLE": "Démarrer le formulaire"
-    },
-    "PREVIEW": {
-      "IMAGE_NOT_AVAILABLE": "Aperçu non disponible"
-    },
-    "FIELD": {
-      "UPLOAD": "Importer",
-      "REQUIRED": "*Obligatoire",
-      "VALIDATOR": {
-        "INVALID_NUMBER": "Utiliser un format de numéro différent",
-        "INVALID_DATE": "Utiliser un format de date différent",
-        "INVALID_VALUE": "Entrer une valeur différente",
-        "NOT_GREATER_THAN": "Ne peut pas être supérieur à {{ maxValue }}",
-        "NOT_LESS_THAN": "Ne peut pas être inférieur à {{ minValue }}",
-        "AT_LEAST_LONG": "Entrez {{ minLength }} caractères minimum",
-        "NO_LONGER_THAN": "Entrez {{ maxLength }} caractères maximum"
-      }
-    }
-  },
   "ADF-DOCUMENT-LIST": {
     "EMPTY": {
       "HEADER": "Ce dossier est vide"
@@ -62,7 +41,8 @@
     "CHOOSE": "Choisir",
     "COPY": "Copier",
     "MOVE": "Déplacer",
-    "NO_RESULTS": "Aucun résultat trouvé"
+    "NO_RESULTS": "Aucun résultat trouvé",
+    "SELECT_LOCATION": "Sélectionner l'emplacement"
   },
   "OPERATION": {
     "SUCCES": {
@@ -184,5 +164,20 @@
   },
   "PERMISSON": {
     "LACKOF": "Vous n'avez pas les droits d'accès {{permission}} pour {{action}} le {{type}}"
+  },
+  "METADATA": {
+    "BASIC": {
+      "HEADER": "Propriétés",
+      "NAME": "Nom",
+      "TITLE": "Titre",
+      "DESCRIPTION": "Description",
+      "AUTHOR": "Auteur",
+      "MIMETYPE": "Type MIME",
+      "SIZE": "Taille",
+      "CREATOR": "Créateur",
+      "CREATED_DATE": "Date de création",
+      "MODIFIER": "Modificateur",
+      "MODIFIED_DATE": "Date de Modification"
+    }
   }
 }
\ No newline at end of file
diff --git a/lib/content-services/i18n/it.json b/lib/content-services/i18n/it.json
index ee66c94228..11d6ba5a6a 100644
--- a/lib/content-services/i18n/it.json
+++ b/lib/content-services/i18n/it.json
@@ -1,25 +1,4 @@
 {
-  "FORM": {
-    "START_FORM": {
-      "TITLE": "Modulo di inizio"
-    },
-    "PREVIEW": {
-      "IMAGE_NOT_AVAILABLE": "Anteprima non disponibile"
-    },
-    "FIELD": {
-      "UPLOAD": "Carica",
-      "REQUIRED": "*Obbligatorio",
-      "VALIDATOR": {
-        "INVALID_NUMBER": "Usa un formato numerico diverso",
-        "INVALID_DATE": "Usa un formato di data diverso",
-        "INVALID_VALUE": "Immetti un valore diverso",
-        "NOT_GREATER_THAN": "Non può essere maggiore di {{ maxValue }}",
-        "NOT_LESS_THAN": "Non può essere inferiore di {{ minValue }}",
-        "AT_LEAST_LONG": "Immetti almeno {{ minLength }} caratteri",
-        "NO_LONGER_THAN": "Immetti non più di {{ maxLength }} caratteri"
-      }
-    }
-  },
   "ADF-DOCUMENT-LIST": {
     "EMPTY": {
       "HEADER": "Questa cartella è vuota"
@@ -62,7 +41,8 @@
     "CHOOSE": "Scegli",
     "COPY": "Copia",
     "MOVE": "Sposta",
-    "NO_RESULTS": "Nessun risultato trovato"
+    "NO_RESULTS": "Nessun risultato trovato",
+    "SELECT_LOCATION": "Seleziona località"
   },
   "OPERATION": {
     "SUCCES": {
@@ -184,5 +164,20 @@
   },
   "PERMISSON": {
     "LACKOF": "Non hai l'autorizzazione {{permission}} per {{action}} {{type}}"
+  },
+  "METADATA": {
+    "BASIC": {
+      "HEADER": "Proprietà",
+      "NAME": "Nome",
+      "TITLE": "Titolo",
+      "DESCRIPTION": "Descrizione",
+      "AUTHOR": "Autore",
+      "MIMETYPE": "Tipo MIME",
+      "SIZE": "Dimensione",
+      "CREATOR": "Creatore",
+      "CREATED_DATE": "Data di creazione",
+      "MODIFIER": "Modificatore",
+      "MODIFIED_DATE": "Data di modifica"
+    }
   }
 }
\ No newline at end of file
diff --git a/lib/content-services/i18n/ja.json b/lib/content-services/i18n/ja.json
index e5d050f084..23cf0e7554 100644
--- a/lib/content-services/i18n/ja.json
+++ b/lib/content-services/i18n/ja.json
@@ -1,25 +1,4 @@
 {
-  "FORM": {
-    "START_FORM": {
-      "TITLE": "開始フォーム"
-    },
-    "PREVIEW": {
-      "IMAGE_NOT_AVAILABLE": "プレビューは使用できません"
-    },
-    "FIELD": {
-      "UPLOAD": "アップロード",
-      "REQUIRED": "*必須",
-      "VALIDATOR": {
-        "INVALID_NUMBER": "別の番号形式を使用してください",
-        "INVALID_DATE": "別の日付形式を使用してください",
-        "INVALID_VALUE": "別の値を入力してください",
-        "NOT_GREATER_THAN": "{{ maxValue }} より大きい値にすることはできません",
-        "NOT_LESS_THAN": "{{ minValue }} より小さい値にすることはできません",
-        "AT_LEAST_LONG": "{{ minLength }} 文字以上で入力してください",
-        "NO_LONGER_THAN": "{{ maxLength }} 文字以内で入力してください"
-      }
-    }
-  },
   "ADF-DOCUMENT-LIST": {
     "EMPTY": {
       "HEADER": "このフォルダは空です"
@@ -62,7 +41,8 @@
     "CHOOSE": "選択",
     "COPY": "コピー",
     "MOVE": "移動",
-    "NO_RESULTS": "一致するアイテムはありません"
+    "NO_RESULTS": "一致するアイテムはありません",
+    "SELECT_LOCATION": "場所の選択"
   },
   "OPERATION": {
     "SUCCES": {
@@ -184,5 +164,20 @@
   },
   "PERMISSON": {
     "LACKOF": "{{type}} を {{action}} するための {{permission}} 権限がありません"
+  },
+  "METADATA": {
+    "BASIC": {
+      "HEADER": "プロパティ",
+      "NAME": "名前",
+      "TITLE": "タイトル",
+      "DESCRIPTION": "説明",
+      "AUTHOR": "作成者",
+      "MIMETYPE": "MIME タイプ",
+      "SIZE": "サイズ",
+      "CREATOR": "作成者",
+      "CREATED_DATE": "作成日",
+      "MODIFIER": "変更者",
+      "MODIFIED_DATE": "変更日"
+    }
   }
 }
\ No newline at end of file
diff --git a/lib/content-services/i18n/nb.json b/lib/content-services/i18n/nb.json
index 040fad2225..506a3add96 100644
--- a/lib/content-services/i18n/nb.json
+++ b/lib/content-services/i18n/nb.json
@@ -1,25 +1,4 @@
 {
-  "FORM": {
-    "START_FORM": {
-      "TITLE": "Start skjema"
-    },
-    "PREVIEW": {
-      "IMAGE_NOT_AVAILABLE": "Forhåndsvisning ikke tilgjengelig"
-    },
-    "FIELD": {
-      "UPLOAD": "Laster opp",
-      "REQUIRED": "*Påkrevd",
-      "VALIDATOR": {
-        "INVALID_NUMBER": "Bruk et annet nummerformat",
-        "INVALID_DATE": "Bruk et annet datoformat",
-        "INVALID_VALUE": "Angi en annen verdi",
-        "NOT_GREATER_THAN": "Kan ikke være større enn {{ maxValue }}",
-        "NOT_LESS_THAN": "Kan ikke være mindre enn {{ minValue }}",
-        "AT_LEAST_LONG": "Angi minst {{ minLength }} tegn",
-        "NO_LONGER_THAN": "Ikke angi flere enn {{ maxLength }} tegn"
-      }
-    }
-  },
   "ADF-DOCUMENT-LIST": {
     "EMPTY": {
       "HEADER": "Denne mappen er tom"
@@ -62,7 +41,8 @@
     "CHOOSE": "Velg",
     "COPY": "Kopier",
     "MOVE": "Flytt",
-    "NO_RESULTS": "Ingen resultater funnet"
+    "NO_RESULTS": "Ingen resultater funnet",
+    "SELECT_LOCATION": "Velg plassering"
   },
   "OPERATION": {
     "SUCCES": {
@@ -184,5 +164,20 @@
   },
   "PERMISSON": {
     "LACKOF": "Du har ikke {{permission}} tillatelsen til å {{action}} {{type}}"
+  },
+  "METADATA": {
+    "BASIC": {
+      "HEADER": "Egenskaper",
+      "NAME": "Navn",
+      "TITLE": "Tittel",
+      "DESCRIPTION": "Beskrivelse",
+      "AUTHOR": "Forfatter",
+      "MIMETYPE": "Mimetype",
+      "SIZE": "Størrelse",
+      "CREATOR": "Oppretter",
+      "CREATED_DATE": "Opprettelsesdato",
+      "MODIFIER": "Modifikator",
+      "MODIFIED_DATE": "Endringsdato"
+    }
   }
 }
\ No newline at end of file
diff --git a/lib/content-services/i18n/nl.json b/lib/content-services/i18n/nl.json
index ab84be4e38..d0106b71f1 100644
--- a/lib/content-services/i18n/nl.json
+++ b/lib/content-services/i18n/nl.json
@@ -1,25 +1,4 @@
 {
-  "FORM": {
-    "START_FORM": {
-      "TITLE": "Beginformulier"
-    },
-    "PREVIEW": {
-      "IMAGE_NOT_AVAILABLE": "Preview niet beschikbaar"
-    },
-    "FIELD": {
-      "UPLOAD": "Uploaden",
-      "REQUIRED": "*Verplicht",
-      "VALIDATOR": {
-        "INVALID_NUMBER": "Gebruik een andere getalnotatie",
-        "INVALID_DATE": "Gebruik een andere datumnotatie",
-        "INVALID_VALUE": "Voer een andere waarde in",
-        "NOT_GREATER_THAN": "Mag niet groter zijn dan {{ maxValue }}",
-        "NOT_LESS_THAN": "Mag niet kleiner zijn dan {{ minValue }}",
-        "AT_LEAST_LONG": "Voer minimaal {{ minLength }} tekens in",
-        "NO_LONGER_THAN": "Voer maximaal {{ maxLength }} tekens in"
-      }
-    }
-  },
   "ADF-DOCUMENT-LIST": {
     "EMPTY": {
       "HEADER": "Deze map is leeg"
@@ -62,7 +41,8 @@
     "CHOOSE": "Kiezen",
     "COPY": "Kopiëren",
     "MOVE": "Verplaatsen",
-    "NO_RESULTS": "Geen resultaten gevonden"
+    "NO_RESULTS": "Geen resultaten gevonden",
+    "SELECT_LOCATION": "Locatie selecteren"
   },
   "OPERATION": {
     "SUCCES": {
@@ -184,5 +164,20 @@
   },
   "PERMISSON": {
     "LACKOF": "U hebt geen {{permission}} rechten voor het {{action}} van {{type}}"
+  },
+  "METADATA": {
+    "BASIC": {
+      "HEADER": "Eigenschappen",
+      "NAME": "Naam",
+      "TITLE": "Titel",
+      "DESCRIPTION": "Beschrijving",
+      "AUTHOR": "Auteur",
+      "MIMETYPE": "Mimetype",
+      "SIZE": "Grootte",
+      "CREATOR": "Maker",
+      "CREATED_DATE": "Datum gemaakt",
+      "MODIFIER": "Gewijzigd door",
+      "MODIFIED_DATE": "Datum gewijzigd"
+    }
   }
 }
\ No newline at end of file
diff --git a/lib/content-services/i18n/pt-BR.json b/lib/content-services/i18n/pt-BR.json
index 7f0a53083c..12fbe14993 100644
--- a/lib/content-services/i18n/pt-BR.json
+++ b/lib/content-services/i18n/pt-BR.json
@@ -1,25 +1,4 @@
 {
-  "FORM": {
-    "START_FORM": {
-      "TITLE": "Iniciar formulário"
-    },
-    "PREVIEW": {
-      "IMAGE_NOT_AVAILABLE": "Pré-visualização não disponível"
-    },
-    "FIELD": {
-      "UPLOAD": "Carregar",
-      "REQUIRED": "*Obrigatório",
-      "VALIDATOR": {
-        "INVALID_NUMBER": "Use um formato de número diferente",
-        "INVALID_DATE": "Use um formato de data diferente",
-        "INVALID_VALUE": "Insira um valor diferente",
-        "NOT_GREATER_THAN": "Não pode ser maior do que {{ maxValue }}",
-        "NOT_LESS_THAN": "Não pode ser menor do que {{ minValue }}",
-        "AT_LEAST_LONG": "Insira no mínimo {{ minLength }} caracteres",
-        "NO_LONGER_THAN": "Insira no máximo {{ maxLength }} caracteres"
-      }
-    }
-  },
   "ADF-DOCUMENT-LIST": {
     "EMPTY": {
       "HEADER": "Esta pasta está vazia"
@@ -62,7 +41,8 @@
     "CHOOSE": "Escolher",
     "COPY": "Copiar",
     "MOVE": "Mover",
-    "NO_RESULTS": "Nenhum resultado encontrado"
+    "NO_RESULTS": "Nenhum resultado encontrado",
+    "SELECT_LOCATION": "Selecionar localização"
   },
   "OPERATION": {
     "SUCCES": {
@@ -184,5 +164,20 @@
   },
   "PERMISSON": {
     "LACKOF": "Você não tem a permissão {{permission}} para {{action}} o {{type}}"
+  },
+  "METADATA": {
+    "BASIC": {
+      "HEADER": "Propriedades",
+      "NAME": "Nome",
+      "TITLE": "Título",
+      "DESCRIPTION": "Descrição",
+      "AUTHOR": "Autor",
+      "MIMETYPE": "Tipo mime",
+      "SIZE": "Tamanho",
+      "CREATOR": "Criador",
+      "CREATED_DATE": "Data de criação",
+      "MODIFIER": "Modificador",
+      "MODIFIED_DATE": "Data de modificação"
+    }
   }
 }
\ No newline at end of file
diff --git a/lib/content-services/i18n/ru.json b/lib/content-services/i18n/ru.json
index a78ca9cba3..82df9a88b5 100644
--- a/lib/content-services/i18n/ru.json
+++ b/lib/content-services/i18n/ru.json
@@ -1,25 +1,4 @@
 {
-  "FORM": {
-    "START_FORM": {
-      "TITLE": "Запустить форму"
-    },
-    "PREVIEW": {
-      "IMAGE_NOT_AVAILABLE": "Предварительный просмотр недоступен"
-    },
-    "FIELD": {
-      "UPLOAD": "Загрузить",
-      "REQUIRED": "*Обязательно для заполнения",
-      "VALIDATOR": {
-        "INVALID_NUMBER": "Используйте другой формат числа",
-        "INVALID_DATE": "Используйте другой формат даты",
-        "INVALID_VALUE": "Введите другое значение",
-        "NOT_GREATER_THAN": "Не может быть более {{ maxValue }}",
-        "NOT_LESS_THAN": "Не может быть менее {{ minValue }}",
-        "AT_LEAST_LONG": "Введите не менее {{ minLength }} символ",
-        "NO_LONGER_THAN": "Введите не более {{ maxLength }} символ"
-      }
-    }
-  },
   "ADF-DOCUMENT-LIST": {
     "EMPTY": {
       "HEADER": "Эта папка пуста"
@@ -62,7 +41,8 @@
     "CHOOSE": "Выбрать",
     "COPY": "Копировать",
     "MOVE": "Переместить",
-    "NO_RESULTS": "Результаты не найдены"
+    "NO_RESULTS": "Результаты не найдены",
+    "SELECT_LOCATION": "Выбрать местоположение"
   },
   "OPERATION": {
     "SUCCES": {
@@ -184,5 +164,20 @@
   },
   "PERMISSON": {
     "LACKOF": "У вас нет разрешения {{permission}}, чтобы {{action}} {{type}}"
+  },
+  "METADATA": {
+    "BASIC": {
+      "HEADER": "Свойства",
+      "NAME": "Имя",
+      "TITLE": "Заголовок",
+      "DESCRIPTION": "Описание",
+      "AUTHOR": "Автор",
+      "MIMETYPE": "Тип MIME",
+      "SIZE": "Размер",
+      "CREATOR": "Создатель",
+      "CREATED_DATE": "Дата создания",
+      "MODIFIER": "Редактор",
+      "MODIFIED_DATE": "Дата изменения"
+    }
   }
 }
\ No newline at end of file
diff --git a/lib/content-services/i18n/zh-CN.json b/lib/content-services/i18n/zh-CN.json
index af51418d22..542760ac2f 100644
--- a/lib/content-services/i18n/zh-CN.json
+++ b/lib/content-services/i18n/zh-CN.json
@@ -1,25 +1,4 @@
 {
-  "FORM": {
-    "START_FORM": {
-      "TITLE": "启动表单"
-    },
-    "PREVIEW": {
-      "IMAGE_NOT_AVAILABLE": "预览不可用"
-    },
-    "FIELD": {
-      "UPLOAD": "上传",
-      "REQUIRED": "*必填项",
-      "VALIDATOR": {
-        "INVALID_NUMBER": "使用其他数字格式",
-        "INVALID_DATE": "使用其他日期格式",
-        "INVALID_VALUE": "输入其他值",
-        "NOT_GREATER_THAN": "不得大于 {{ maxValue }}",
-        "NOT_LESS_THAN": "不得小于 {{ minValue }}",
-        "AT_LEAST_LONG": "输入至少 {{ minLength }} 个字符",
-        "NO_LONGER_THAN": "不得输入超过 {{ maxLength }} 个字符"
-      }
-    }
-  },
   "ADF-DOCUMENT-LIST": {
     "EMPTY": {
       "HEADER": "此文件夹为空"
@@ -62,7 +41,8 @@
     "CHOOSE": "选择",
     "COPY": "复制",
     "MOVE": "移动",
-    "NO_RESULTS": "未找到结果"
+    "NO_RESULTS": "未找到结果",
+    "SELECT_LOCATION": "选择位置"
   },
   "OPERATION": {
     "SUCCES": {
@@ -184,5 +164,20 @@
   },
   "PERMISSON": {
     "LACKOF": "您没有 {{action}} {{type}} 的 {{permission}} 权限"
+  },
+  "METADATA": {
+    "BASIC": {
+      "HEADER": "属性",
+      "NAME": "名称",
+      "TITLE": "标题",
+      "DESCRIPTION": "说明",
+      "AUTHOR": "作者",
+      "MIMETYPE": "MIME 类型",
+      "SIZE": "字号(&S)",
+      "CREATOR": "创建者",
+      "CREATED_DATE": "创建日期",
+      "MODIFIER": "修改者",
+      "MODIFIED_DATE": "修改日期"
+    }
   }
 }
\ No newline at end of file
diff --git a/lib/content-services/material.module.ts b/lib/content-services/material.module.ts
index 9c79ff8008..4eb6c5c1f4 100644
--- a/lib/content-services/material.module.ts
+++ b/lib/content-services/material.module.ts
@@ -29,6 +29,7 @@ import {
     MatProgressBarModule,
     MatProgressSpinnerModule,
     MatRippleModule,
+    MatExpansionModule,
     MatSelectModule
 } from '@angular/material';
 
@@ -46,6 +47,7 @@ export function modules() {
         MatRippleModule,
         MatMenuModule,
         MatOptionModule,
+        MatExpansionModule,
         MatSelectModule
     ];
 }
diff --git a/lib/content-services/package.json b/lib/content-services/package.json
index ade9d2981b..e7b887f6ad 100644
--- a/lib/content-services/package.json
+++ b/lib/content-services/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@alfresco/adf-content-services",
   "description": "Alfresco ADF content services",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "author": "Alfresco Software, Ltd.",
   "main": "bundles/adf-content-services.js",
   "repository": {
@@ -12,22 +12,22 @@
     "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
   },
   "dependencies": {
-    "@angular/animations": "5.0.0",
-    "@angular/cdk": "5.0.0-rc0",
-    "@angular/common": "5.0.0",
-    "@angular/compiler": "5.0.0",
-    "@angular/core": "5.0.0",
-    "@angular/flex-layout": "2.0.0-beta.10",
-    "@angular/forms": "5.0.0",
-    "@angular/http": "5.0.0",
-    "@angular/material": "5.0.0-rc0",
-    "@angular/material-moment-adapter": "^5.0.0-rc0",
-    "@angular/platform-browser": "5.0.0",
-    "@angular/platform-browser-dynamic": "5.0.0",
-    "@angular/router": "5.0.0",
+    "@angular/animations": "5.1.1",
+    "@angular/cdk": "5.0.1",
+    "@angular/common": "5.1.1",
+    "@angular/compiler": "5.1.1",
+    "@angular/core": "5.1.1",
+    "@angular/flex-layout": "2.0.0-beta.12",
+    "@angular/forms": "5.1.1",
+    "@angular/http": "5.1.1",
+    "@angular/material": "5.0.1",
+    "@angular/material-moment-adapter": "5.0.1",
+    "@angular/platform-browser": "5.1.1",
+    "@angular/platform-browser-dynamic": "5.1.1",
+    "@angular/router": "5.1.1",
     "@ngx-translate/core": "8.0.0",
-    "alfresco-js-api": "2.0.0",
-    "@alfresco/adf-core": "2.0.0",
+    "alfresco-js-api": "2.1.0",
+    "@alfresco/adf-core": "2.1.0",
     "chart.js": "2.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
diff --git a/lib/content-services/search/components/search-control.component.html b/lib/content-services/search/components/search-control.component.html
index 28af9a18b7..3d33f1ac6c 100644
--- a/lib/content-services/search/components/search-control.component.html
+++ b/lib/content-services/search/components/search-control.component.html
@@ -27,13 +27,14 @@
 
 <adf-search #auto="searchAutocomplete"
             class="adf-search-result-autocomplete"
-            [queryBody]="customQueryBody"
-            [maxResults]="liveSearchMaxResults">
+            [maxResults]="liveSearchMaxResults"
+            [queryBody]="customQueryBody">
     <ng-template let-data>
         <mat-list *ngIf="isSearchBarActive()" id="autocomplete-search-result-list">
             <mat-list-item
                 *ngFor="let item of data?.list?.entries; let idx = index"
                 id="result_option_{{idx}}"
+                [attr.data-automation-id]="'autocomplete_for_' + item.entry.name"
                 [tabindex]="0"
                 (focus)="onFocus($event)"
                 (blur)="onBlur($event)"
diff --git a/lib/content-services/search/components/search-control.component.ts b/lib/content-services/search/components/search-control.component.ts
index 30c47fb815..a9901719ed 100644
--- a/lib/content-services/search/components/search-control.component.ts
+++ b/lib/content-services/search/components/search-control.component.ts
@@ -63,6 +63,7 @@ export class SearchControlComponent implements OnInit, OnDestroy {
     @Input()
     liveSearchMaxResults: number = 5;
 
+    /** @deprecated in 2.1.0 */
     @Input()
     customQueryBody: QueryBody;
 
diff --git a/lib/content-services/search/components/search-trigger.directive.ts b/lib/content-services/search/components/search-trigger.directive.ts
index c9c6df7df9..c8c196d9be 100644
--- a/lib/content-services/search/components/search-trigger.directive.ts
+++ b/lib/content-services/search/components/search-trigger.directive.ts
@@ -15,6 +15,8 @@
  * limitations under the License.
  */
 
+/* tslint:disable:no-input-rename  */
+
 import { ENTER, ESCAPE } from '@angular/cdk/keycodes';
 import {
     ChangeDetectorRef,
diff --git a/lib/content-services/search/components/search.component.spec.ts b/lib/content-services/search/components/search.component.spec.ts
index f2cf87679f..133a157edc 100644
--- a/lib/content-services/search/components/search.component.spec.ts
+++ b/lib/content-services/search/components/search.component.spec.ts
@@ -23,10 +23,10 @@ import { SearchModule } from '../../index';
 import { differentResult, folderResult, result, SimpleSearchTestComponent } from '../../mock';
 
 function fakeNodeResultSearch(searchNode: QueryBody): Observable<any> {
-    if (searchNode.query.query === 'FAKE_SEARCH_EXMPL') {
+    if (searchNode && searchNode.query.query === 'FAKE_SEARCH_EXMPL') {
         return Observable.of(differentResult);
     }
-    if (searchNode.filterQueries.length === 1 &&
+    if (searchNode && searchNode.filterQueries.length === 1 &&
         searchNode.filterQueries[0].query === "TYPE:'cm:folder'") {
         return Observable.of(folderResult);
     }
@@ -132,18 +132,18 @@ describe('SearchComponent', () => {
         });
 
         it('should perform a search based on the query node given', async(() => {
-            spyOn(searchService, 'search')
-                .and.callFake((searchObj) => fakeNodeResultSearch(searchObj));
+            spyOn(searchService, 'searchByQueryBody')
+                    .and.callFake((searchObj) => fakeNodeResultSearch(searchObj));
             let fakeSearchNode: QueryBody = {
                 query: {
-                    query: ''
+                    query: 'TEST-FAKE-NODE'
                 },
                 filterQueries: [
                     { 'query': "TYPE:'cm:folder'" }
                 ]
             };
-            component.setSearchNodeTo(fakeSearchNode);
             component.setSearchWordTo('searchTerm');
+            component.setSearchNodeTo(fakeSearchNode);
             fixture.detectChanges();
             fixture.whenStable().then(() => {
                 fixture.detectChanges();
@@ -156,7 +156,7 @@ describe('SearchComponent', () => {
 
         it('should perform a search with a defaultNode if no searchnode is given', async(() => {
             spyOn(searchService, 'search')
-                .and.callFake((searchObj) => fakeNodeResultSearch(searchObj));
+                .and.returnValue(Observable.of(result));
             component.setSearchWordTo('searchTerm');
             fixture.detectChanges();
             fixture.whenStable().then(() => {
@@ -169,7 +169,7 @@ describe('SearchComponent', () => {
         }));
 
         it('should perform a search with the searchNode given', async(() => {
-            spyOn(searchService, 'search')
+            spyOn(searchService, 'searchByQueryBody')
                 .and.callFake((searchObj) => fakeNodeResultSearch(searchObj));
             let fakeSearchNode: QueryBody = {
                 query: {
@@ -179,6 +179,7 @@ describe('SearchComponent', () => {
                     { 'query': "TYPE:'cm:folder'" }
                 ]
             };
+            component.setSearchWordTo('searchTerm');
             component.setSearchNodeTo(fakeSearchNode);
             fixture.detectChanges();
             fixture.whenStable().then(() => {
diff --git a/lib/content-services/search/components/search.component.ts b/lib/content-services/search/components/search.component.ts
index 63d8ec2090..48fc102e23 100644
--- a/lib/content-services/search/components/search.component.ts
+++ b/lib/content-services/search/components/search.component.ts
@@ -18,8 +18,6 @@
 import { SearchService } from '@alfresco/adf-core';
 import {
     AfterContentInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
     Component,
     ContentChild,
     ElementRef,
@@ -40,7 +38,6 @@ import { Subject } from 'rxjs/Subject';
     styleUrls: ['./search.component.scss'],
     encapsulation: ViewEncapsulation.None,
     preserveWhitespaces: false,
-    changeDetection: ChangeDetectionStrategy.OnPush,
     exportAs: 'searchAutocomplete',
     host: {
         'class': 'adf-search'
@@ -63,12 +60,13 @@ export class SearchComponent implements AfterContentInit, OnChanges {
     @Input()
     skipResults: number = 0;
 
-    @Input()
-    searchTerm: string = '';
-
+    /** @deprecated in 2.1.0 */
     @Input()
     queryBody: QueryBody;
 
+    @Input()
+    searchTerm: string = '';
+
     @Input('class')
     set classList(classList: string) {
         if (classList && classList.length) {
@@ -101,13 +99,13 @@ export class SearchComponent implements AfterContentInit, OnChanges {
     _classList: { [key: string]: boolean } = {};
 
     constructor(private searchService: SearchService,
-                private changeDetectorRef: ChangeDetectorRef,
                 private _elementRef: ElementRef) {
         this.keyPressedStream.asObservable()
             .debounceTime(200)
             .subscribe((searchedWord: string) => {
                 this.loadSearchResults(searchedWord);
             });
+
     }
 
     ngAfterContentInit() {
@@ -115,14 +113,12 @@ export class SearchComponent implements AfterContentInit, OnChanges {
     }
 
     ngOnChanges(changes) {
-        this.resetResults();
-
+        if (changes.queryBody &&
+            this.hasDifferentQueryBody(changes.queryBody.previousValue, changes.queryBody.currentValue)) {
+            this.loadSearchResults();
+        }
         if (changes.searchTerm && changes.searchTerm.currentValue) {
             this.loadSearchResults(changes.searchTerm.currentValue);
-        } else if (changes.queryBody && changes.queryBody.currentValue) {
-            this.loadSearchResults();
-        } else {
-            this.loadSearchResults(this.searchTerm);
         }
     }
 
@@ -135,23 +131,27 @@ export class SearchComponent implements AfterContentInit, OnChanges {
         this.loadSearchResults(this.searchTerm);
     }
 
+    private hasDifferentQueryBody(previousQueryBody: QueryBody, currentQueryBody: QueryBody) {
+        return JSON.stringify(previousQueryBody) !== JSON.stringify(currentQueryBody);
+    }
+
     private cleanResults() {
         if (this.results) {
             this.results = {};
         }
     }
 
-    private hasValidSearchQuery(searchOpts: QueryBody) {
-        return searchOpts && searchOpts.query && searchOpts.query.query;
-    }
-
     private loadSearchResults(searchTerm?: string) {
-        let searchOpts: QueryBody = this.getQueryBody(searchTerm);
-
-        if (this.hasValidSearchQuery(searchOpts)) {
-            this.searchService
-                .search(searchOpts)
-                .subscribe(
+        this.resetResults();
+        if (searchTerm) {
+            let search$;
+            if (this.queryBody) {
+                search$ = this.searchService.searchByQueryBody(this.queryBody);
+            } else {
+                search$ = this.searchService
+                    .search(searchTerm, this.maxResults.toString(), this.skipResults.toString());
+            }
+            search$.subscribe(
                     results => {
                         this.results = <NodePaging> results;
                         this.resultLoaded.emit(this.results);
@@ -169,41 +169,11 @@ export class SearchComponent implements AfterContentInit, OnChanges {
         }
     }
 
-    private getQueryBody(searchTerm: string): QueryBody {
-        if (this.queryBody) {
-            if (!this.queryBody.query.query && searchTerm) {
-                this.queryBody.query.query = searchTerm;
-            }
-            return this.queryBody;
-        } else {
-            return this.generateDefaultSearchNode(searchTerm);
-        }
-    }
-
-    private generateDefaultSearchNode(searchTerm: string): QueryBody {
-        let defaultQueryBody: QueryBody = {
-            query: {
-                query: searchTerm ? `${searchTerm}* OR name:${searchTerm}*` : searchTerm
-            },
-            include: ['path', 'allowableOperations'],
-            paging: {
-                maxItems: this.maxResults.toString(),
-                skipCount: this.skipResults.toString()
-            },
-            filterQueries: [
-                { query: "TYPE:'cm:folder' OR TYPE:'cm:content'" },
-                { query: 'NOT cm:creator:System' }]
-        };
-
-        return defaultQueryBody;
-    }
-
     hidePanel() {
         if (this.isOpen) {
             this._classList['adf-search-show'] = false;
             this._classList['adf-search-hide'] = true;
             this.isOpen = false;
-            this.changeDetectorRef.markForCheck();
         }
     }
 
@@ -211,6 +181,5 @@ export class SearchComponent implements AfterContentInit, OnChanges {
         this.showPanel = !!this.results && !!this.results.list;
         this._classList['adf-search-show'] = this.showPanel;
         this._classList['adf-search-hide'] = !this.showPanel;
-        this.changeDetectorRef.markForCheck();
     }
 }
diff --git a/lib/content-services/site-dropdown/sites-dropdown.component.html b/lib/content-services/site-dropdown/sites-dropdown.component.html
index 941335de2c..0663175877 100644
--- a/lib/content-services/site-dropdown/sites-dropdown.component.html
+++ b/lib/content-services/site-dropdown/sites-dropdown.component.html
@@ -9,8 +9,8 @@
             [(ngModel)]="siteSelected"
             (ngModelChange)="selectedSite()">
             <mat-option *ngIf="!hideMyFiles" data-automation-id="site-my-files-option" id="default_site_option" [value]="MY_FILES_VALUE">{{'DROPDOWN.MY_FILES_OPTION' | translate}}</mat-option>
-            <mat-option *ngFor="let site of siteList" [value]="site.guid">
-                {{ site.title | translate }}
+            <mat-option *ngFor="let site of siteList?.list.entries" [value]="site.entry.guid">
+                {{ site.entry.title | translate}}
             </mat-option>
         </mat-select>
     </mat-form-field>
diff --git a/lib/content-services/site-dropdown/sites-dropdown.component.spec.ts b/lib/content-services/site-dropdown/sites-dropdown.component.spec.ts
index a5cad3b3da..821f0fa419 100644
--- a/lib/content-services/site-dropdown/sites-dropdown.component.spec.ts
+++ b/lib/content-services/site-dropdown/sites-dropdown.component.spec.ts
@@ -153,7 +153,7 @@ describe('DropdownSitesComponent', () => {
 
             fixture.whenStable().then(() => {
                 fixture.detectChanges();
-                expect(fixture.nativeElement.innerText.trim()).toBe('DROPDOWN.PLACEHOLDER_LABEL');
+                expect(fixture.nativeElement.innerText.trim()).toContain('DROPDOWN.PLACEHOLDER_LABEL');
             });
         }));
 
@@ -166,12 +166,30 @@ describe('DropdownSitesComponent', () => {
 
             fixture.whenStable().then(() => {
                 fixture.detectChanges();
-                expect(fixture.nativeElement.innerText.trim()).toBe('NODE_SELECTOR.SELECT_LOCATION');
+                expect(fixture.nativeElement.innerText.trim()).toContain('NODE_SELECTOR.SELECT_LOCATION');
             });
         }));
 
         it('should load custom sites when the \'siteList\' input property is given a value', async(() => {
-            component.siteList = [{title: 'PERSONAL_FILES', guid: '-my-'}, {title: 'FILE_LIBRARIES', guid: '-mysites-'}];
+            component.siteList = {
+                'list': {
+                    'entries': [
+                        {
+                            'entry': {
+                                'guid': '-my-',
+                                'title': 'PERSONAL_FILES'
+                            }
+                        },
+                        {
+                            'entry': {
+                                'guid': '-mysites-',
+                                'title': 'FILE_LIBRARIES'
+                            }
+                        }
+                    ]
+                }
+            };
+
             fixture.detectChanges();
 
             openSelectbox();
@@ -236,7 +254,7 @@ describe('DropdownSitesComponent', () => {
             });
 
             component.change.subscribe((site) => {
-                expect(site.guid).toBe('fake-1');
+                expect(site.entry.guid).toBe('fake-1');
                 done();
             });
         });
diff --git a/lib/content-services/site-dropdown/sites-dropdown.component.ts b/lib/content-services/site-dropdown/sites-dropdown.component.ts
index cf86745d9c..0949b44912 100644
--- a/lib/content-services/site-dropdown/sites-dropdown.component.ts
+++ b/lib/content-services/site-dropdown/sites-dropdown.component.ts
@@ -15,7 +15,8 @@
  * limitations under the License.
  */
 
-import { SiteModel, SitesService } from '@alfresco/adf-core';
+import { SitesService } from '@alfresco/adf-core';
+import { SitePaging, SiteEntry } from 'alfresco-js-api';
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 
 @Component({
@@ -29,13 +30,13 @@ export class DropdownSitesComponent implements OnInit {
     hideMyFiles: boolean = false;
 
     @Input()
-    siteList: any[] = null;
+    siteList: SitePaging = null;
 
     @Input()
     placeholder: string = 'DROPDOWN.PLACEHOLDER_LABEL';
 
     @Output()
-    change: EventEmitter<SiteModel> = new EventEmitter();
+    change: EventEmitter<SiteEntry> = new EventEmitter();
 
     public MY_FILES_VALUE = 'default';
 
@@ -52,15 +53,14 @@ export class DropdownSitesComponent implements OnInit {
     selectedSite() {
         let siteFound;
         if (this.siteSelected === this.MY_FILES_VALUE) {
-            siteFound = new SiteModel();
+           siteFound = { entry: {}};
         }else {
-           siteFound = this.siteList.find( site => site.guid === this.siteSelected);
+           siteFound = this.siteList.list.entries.find( site => site.entry.guid === this.siteSelected);
         }
         this.change.emit(siteFound);
     }
 
     setDefaultSiteList() {
-        this.siteList = [];
         this.sitesService.getSites().subscribe((result) => {
                 this.siteList = result;
             },
diff --git a/lib/content-services/styles/_index.scss b/lib/content-services/styles/_index.scss
index 5bae304533..550f533880 100644
--- a/lib/content-services/styles/_index.scss
+++ b/lib/content-services/styles/_index.scss
@@ -1,6 +1,7 @@
 @import '../breadcrumb/breadcrumb.component';
 @import '../breadcrumb/dropdown-breadcrumb.component';
-@import '../content-node-selector/content-node-selector.component';
+@import '../content-node-selector/content-node-selector-panel.component';
+@import '../content-node-selector/name-location-cell/name-location-cell.component';
 @import '../document-list/components/document-list.component';
 
 @import '../upload/components/file-uploading-list-row.component';
@@ -11,19 +12,20 @@
 
 @import '../dialogs/folder.dialog';
 
-@import '../content-metadata/content-metadata.component';
-@import '../content-metadata/content-metadata-card.component';
+@import '../content-node-selector/content-node-selector.component';
+@import '../content-metadata/content-metadata.module';
 
 @mixin adf-content-services-theme($theme) {
     @include adf-breadcrumb-theme($theme);
     @include adf-breadcrumb-dropdown-theme($theme);
     @include adf-content-node-selector-theme($theme) ;
+    @include adf-name-location-cell-theme($theme);
     @include adf-document-list-theme($theme) ;
     @include adf-file-uploading-row-theme($theme);
     @include adf-upload-dialog-theme($theme);
     @include adf-search-control-theme($theme);
     @include adf-search-autocomplete-theme($theme);
     @include adf-dialog-theme($theme);
-    @include adf-content-metadata-theme($theme);
-    @include adf-content-metadata-card-theme($theme);
+    @include adf-content-node-selector-dialog-theme($theme) ;
+    @include adf-content-metadata-module-theme($theme);
 }
diff --git a/lib/content-services/upload/components/upload-button.component.spec.ts b/lib/content-services/upload/components/upload-button.component.spec.ts
index d6f2b1b2c8..031631e819 100644
--- a/lib/content-services/upload/components/upload-button.component.spec.ts
+++ b/lib/content-services/upload/components/upload-button.component.spec.ts
@@ -216,6 +216,17 @@ describe('UploadButtonComponent', () => {
             expect(addToQueueSpy.calls.mostRecent()).toBeUndefined();
         });
 
+        it('should allow file of 0 size when the max file size is set to 0', () => {
+            const zeroFiles: File[] = [
+                <File> { name: 'zeroFile.png', size: 0 }
+            ];
+            component.maxFilesSize = 0;
+
+            component.uploadFiles(zeroFiles);
+
+            expect(addToQueueSpy.calls.mostRecent()).toBeDefined();
+        });
+
         it('should filter out all files if maxFilesSize is <0', () => {
             component.maxFilesSize = -2;
 
diff --git a/lib/content-services/upload/components/upload-button.component.ts b/lib/content-services/upload/components/upload-button.component.ts
index 59151e5dac..acc7fd38e2 100644
--- a/lib/content-services/upload/components/upload-button.component.ts
+++ b/lib/content-services/upload/components/upload-button.component.ts
@@ -201,7 +201,7 @@ export class UploadButtonComponent implements OnInit, OnChanges, NodePermissionS
     private isFileSizeAcceptable(file: FileModel): boolean {
         let acceptableSize = true;
 
-        if ((this.maxFilesSize !== undefined && this.maxFilesSize !== null ) && (this.maxFilesSize <= 0 || file.size > this.maxFilesSize)) {
+        if (this.isFileSizeAllowed(file)) {
             acceptableSize = false;
 
             this.translateService.get('FILE_UPLOAD.MESSAGES.EXCEED_MAX_FILE_SIZE', {fileName: file.name}).subscribe((message: string) => {
@@ -212,6 +212,18 @@ export class UploadButtonComponent implements OnInit, OnChanges, NodePermissionS
         return acceptableSize;
     }
 
+    private isFileSizeAllowed(file: FileModel) {
+        return this.isMaxFileSizeDefined() && this.isFileSizeCorrect(file);
+    }
+
+    private isMaxFileSizeDefined() {
+        return this.maxFilesSize !== undefined && this.maxFilesSize !== null;
+    }
+
+    private isFileSizeCorrect(file: FileModel) {
+        return this.maxFilesSize < 0 || file.size > this.maxFilesSize;
+    }
+
     checkPermission() {
         if (this.rootFolderId) {
             this.getFolderNode(this.rootFolderId).subscribe(
diff --git a/lib/content-services/upload/directives/file-draggable.directive.ts b/lib/content-services/upload/directives/file-draggable.directive.ts
index c0cf40d4fd..e29e26e7d3 100644
--- a/lib/content-services/upload/directives/file-draggable.directive.ts
+++ b/lib/content-services/upload/directives/file-draggable.directive.ts
@@ -15,6 +15,8 @@
  * limitations under the License.
  */
 
+/* tslint:disable:no-input-rename  */
+
 import { FileUtils } from '@alfresco/adf-core';
 import { Directive, ElementRef, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output } from '@angular/core';
 
diff --git a/lib/content-services/webscript/webscript.component.spec.ts b/lib/content-services/webscript/webscript.component.spec.ts
index 54e7e3b5e1..b765fc60a0 100644
--- a/lib/content-services/webscript/webscript.component.spec.ts
+++ b/lib/content-services/webscript/webscript.component.spec.ts
@@ -37,23 +37,21 @@ describe('WebscriptComponent', () => {
             declarations: [
                 WebscriptComponent
             ]
-        }).compileComponents();
+        }).compileComponents().then(() => {
+            let appConfig: AppConfigService = TestBed.get(AppConfigService);
+            appConfig.config.ecmHost = 'http://localhost:9876/ecm';
+
+            fixture = TestBed.createComponent(WebscriptComponent);
+            component = fixture.componentInstance;
+
+            element = fixture.nativeElement;
+            component = fixture.componentInstance;
+            component.scriptPath = 'fakePath';
+            component.showData = true;
+            fixture.detectChanges();
+        });
     }));
 
-    beforeEach(() => {
-        let appConfig: AppConfigService = TestBed.get(AppConfigService);
-        appConfig.config.ecmHost = 'http://localhost:9876/ecm';
-
-        fixture = TestBed.createComponent(WebscriptComponent);
-        component = fixture.componentInstance;
-
-        element = fixture.nativeElement;
-        component = fixture.componentInstance;
-        component.scriptPath = 'fakePath';
-        component.showData = true;
-        fixture.detectChanges();
-    });
-
     describe('View', () => {
         it('html wrapper should be present', () => {
             expect(element.querySelector('#webscript-html-wrapper')).toBeDefined();
diff --git a/lib/core/app-config/app-config.module.ts b/lib/core/app-config/app-config.module.ts
index 8c4f579a2c..1f46cc71d8 100644
--- a/lib/core/app-config/app-config.module.ts
+++ b/lib/core/app-config/app-config.module.ts
@@ -18,10 +18,7 @@
 import { HttpClientModule } from '@angular/common/http';
 import { APP_INITIALIZER, NgModule } from '@angular/core';
 import { AppConfigService } from './app-config.service';
-
-export function startupServiceFactory(configService: AppConfigService): Function {
-    return () => configService.load();
-}
+import { startupServiceFactory } from './startup-service-factory';
 
 @NgModule({
     imports: [
diff --git a/lib/core/app-config/app-config.service.ts b/lib/core/app-config/app-config.service.ts
index b6f3054b63..d250a25379 100644
--- a/lib/core/app-config/app-config.service.ts
+++ b/lib/core/app-config/app-config.service.ts
@@ -30,7 +30,8 @@ export class AppConfigService {
         },
         ecmHost: 'http://{hostname}{:port}/ecm',
         bpmHost: 'http://{hostname}{:port}/bpm',
-        logLevel: 'silent'
+        logLevel: 'silent',
+        alfrescoRepositoryName : 'alfresco-1'
     };
 
     constructor(private http: HttpClient) {
diff --git a/lib/core/app-config/startup-service-factory.ts b/lib/core/app-config/startup-service-factory.ts
new file mode 100644
index 0000000000..8bc35093ae
--- /dev/null
+++ b/lib/core/app-config/startup-service-factory.ts
@@ -0,0 +1,22 @@
+/*!
+ * @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 { AppConfigService } from './app-config.service';
+
+export function startupServiceFactory(configService: AppConfigService): Function {
+    return () => configService.load();
+}
diff --git a/lib/core/card-view/card-view-dateitem.component.html b/lib/core/card-view/card-view-dateitem.component.html
deleted file mode 100644
index 452153ba32..0000000000
--- a/lib/core/card-view/card-view-dateitem.component.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<div class="adf-property-label">{{ property.label | translate }}</div>
-<div class="adf-property-value">
-    <span *ngIf="!isEditable()">
-        <span [attr.data-automation-id]="'card-dateitem-' + property.key">
-            <span *ngIf="!property.isEmpty(); else elseEmptyValueBlock">{{ property.displayValue }}</span>
-        </span>
-    </span>
-    <span *ngIf="isEditable()" class="adf-dateitem-editable">
-        <input class="adf-invisible-date-input" [matDatepicker]="picker" [value]="valueDate"
-               (dateChange)="onDateChanged($event)">
-        <span
-            class="adf-datepicker-toggle"
-            [attr.data-automation-id]="'datepicker-label-toggle-' + property.key"
-            (click)="showDatePicker($event)">
-            <span *ngIf="!property.isEmpty(); else elseEmptyValueBlock">{{ property.displayValue }}</span>
-        </span>
-        <mat-datepicker-toggle
-            [attr.data-automation-id]="'datepickertoggle-' + property.key"
-            [for]="picker">
-        </mat-datepicker-toggle>
-        <mat-datepicker #picker
-                       [attr.data-automation-id]="'datepicker-' + property.key"
-                       [startAt]="valueDate"
-                       [touchUi]="true">
-        </mat-datepicker>
-    </span>
-    <ng-template #elseEmptyValueBlock>
-        {{ property.default | translate }}
-    </ng-template>
-</div>
diff --git a/lib/core/card-view/card-view-dateitem.component.scss b/lib/core/card-view/card-view-dateitem.component.scss
deleted file mode 100644
index 59b2c249bf..0000000000
--- a/lib/core/card-view/card-view-dateitem.component.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-@mixin adf-card-view-dateitem-theme($theme) {
-
-    .adf {
-        &-invisible-date-input {
-            height: 24px;
-            width: 0;
-            overflow: hidden;
-            opacity: 0;
-            border: none;
-            margin: 0;
-            padding: 0;
-            display: none;
-        }
-
-        &-dateitem-editable {
-            cursor: pointer;
-
-            button.mat-icon-button {
-                line-height: 20px;
-                height: 20px;
-                width: 20px;
-            }
-
-            mat-icon {
-                width: 16px;
-                height: 16px;
-                opacity: 0.5;
-                margin-left: 4px;
-            }
-
-            &:hover mat-icon {
-                opacity: 1;
-            }
-        }
-    }
-}
diff --git a/lib/core/card-view/card-view-textitem.component.html b/lib/core/card-view/card-view-textitem.component.html
deleted file mode 100644
index c8fcf87199..0000000000
--- a/lib/core/card-view/card-view-textitem.component.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<div class="adf-property-label">{{ property.label | translate }}</div>
-<div class="adf-property-value">
-    <span *ngIf="!isEditble()">
-        <span *ngIf="!isClickable(); else elseBlock" [attr.data-automation-id]="'card-textitem-value-' + property.key">
-            <span *ngIf="!property.isEmpty(); else elseEmptyValueBlock">{{ property.displayValue }}</span>
-        </span>
-        <ng-template #elseBlock>
-            <span class="adf-textitem-clickable-value" (click)="clicked()" [attr.data-automation-id]="'card-textitem-value-' + property.key">
-                <span *ngIf="!property.isEmpty(); else elseEmptyValueBlock">{{ property.displayValue }}</span>
-            </span>
-        </ng-template>
-    </span>
-    <span *ngIf="isEditble()">
-        <div *ngIf="!inEdit" (click)="setEditMode(true)" class="adf-textitem-readonly" [attr.data-automation-id]="'card-textitem-edit-toggle-' + property.key" fxLayout="row" fxLayoutAlign="space-between center">
-            <span [attr.data-automation-id]="'card-textitem-value-' + property.key">
-                <span *ngIf="!property.isEmpty(); else elseEmptyValueBlock">{{ property.displayValue }}</span>
-            </span>
-            <mat-icon fxFlex="0 0 auto" [attr.data-automation-id]="'card-textitem-edit-icon-' + property.key" class="adf-textitem-icon">create</mat-icon>
-        </div>
-        <div *ngIf="inEdit" class="adf-textitem-editable">
-            <mat-form-field floatPlaceholder="never" class="adf-input-container">
-                <input *ngIf="!property.multiline" #editorInput
-                    matInput
-                    class="adf-input"
-                    [placeholder]="property.default | translate"
-                    [(ngModel)]="editedValue"
-                    [attr.data-automation-id]="'card-textitem-editinput-' + property.key">
-                <textarea *ngIf="property.multiline" #editorInput
-                    matInput
-                    matTextareaAutosize
-                    matAutosizeMaxRows="1"
-                    matAutosizeMaxRows="5"
-                    class="adf-textarea"
-                    [placeholder]="property.default | translate"
-                    [(ngModel)]="editedValue"
-                    [attr.data-automation-id]="'card-textitem-edittextarea-' + property.key"></textarea>
-            </mat-form-field>
-            <mat-icon
-                class="adf-textitem-icon adf-update-icon"
-                (click)="update()"
-                [attr.data-automation-id]="'card-textitem-update-' + property.key">done</mat-icon>
-            <mat-icon
-                class="adf-textitem-icon adf-reset-icon"
-                (click)="reset()"
-                [attr.data-automation-id]="'card-textitem-reset-' + property.key">clear</mat-icon>
-        </div>
-    </span>
-    <ng-template #elseEmptyValueBlock>
-        {{ property.default | translate }}
-    </ng-template>
-</div>
diff --git a/lib/core/card-view/card-view-textitem.component.spec.ts b/lib/core/card-view/card-view-textitem.component.spec.ts
deleted file mode 100644
index ff73e6fdbc..0000000000
--- a/lib/core/card-view/card-view-textitem.component.spec.ts
+++ /dev/null
@@ -1,233 +0,0 @@
-/*!
- * @license
- * Copyright 2016 Alfresco Software, Ltd.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { HttpClientModule } from '@angular/common/http';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormsModule } from '@angular/forms';
-import { MatDatepickerModule, MatIconModule, MatInputModule, MatNativeDateModule } from '@angular/material';
-import { By } from '@angular/platform-browser';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { CardViewTextItemModel } from '../models/card-view-textitem.model';
-import { AppConfigService } from '../app-config/app-config.service';
-import { CardViewUpdateService } from '../services/card-view-update.service';
-import { LogService } from '../services/log.service';
-import { TranslateLoaderService } from '../services/translate-loader.service';
-
-import { CardViewTextItemComponent } from './card-view-textitem.component';
-
-describe('CardViewTextItemComponent', () => {
-
-    let fixture: ComponentFixture<CardViewTextItemComponent>;
-    let component: CardViewTextItemComponent;
-
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-            imports: [
-                HttpClientModule,
-                FormsModule,
-                NoopAnimationsModule,
-                MatDatepickerModule,
-                MatIconModule,
-                MatInputModule,
-                MatNativeDateModule,
-                TranslateModule.forRoot({
-                    loader: {
-                        provide: TranslateLoader,
-                        useClass: TranslateLoaderService
-                    }
-                })
-            ],
-            declarations: [
-                CardViewTextItemComponent
-            ],
-            providers: [
-                AppConfigService,
-                CardViewUpdateService,
-                LogService
-            ]
-        }).compileComponents();
-    }));
-
-    beforeEach(() => {
-        fixture = TestBed.createComponent(CardViewTextItemComponent);
-        component = fixture.componentInstance;
-        component.property = new CardViewTextItemModel ({
-            label: 'Text label',
-            value: 'Lorem ipsum',
-            key: 'textkey',
-            default: 'FAKE-DEFAULT-KEY',
-            editable: false
-        });
-    });
-
-    afterEach(() => {
-        fixture.destroy();
-        TestBed.resetTestingModule();
-    });
-
-    it('should render the label and value', () => {
-        fixture.detectChanges();
-
-        let labelValue = fixture.debugElement.query(By.css('.adf-property-label'));
-        expect(labelValue).not.toBeNull();
-        expect(labelValue.nativeElement.innerText).toBe('Text label');
-
-        let value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-${component.property.key}"]`));
-        expect(value).not.toBeNull();
-        expect(value.nativeElement.innerText.trim()).toBe('Lorem ipsum');
-    });
-
-    it('should render the default as value if the value is empty and editable false', () => {
-        component.property = new CardViewTextItemModel ({
-            label: 'Text label',
-            value: '',
-            key: 'textkey',
-            default: 'FAKE-DEFAULT-KEY',
-            editable: false
-        });
-        fixture.detectChanges();
-
-        let value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-${component.property.key}"]`));
-        expect(value).not.toBeNull();
-        expect(value.nativeElement.innerText.trim()).toBe('FAKE-DEFAULT-KEY');
-    });
-
-    it('should render the default as value if the value is empty and editable true', () => {
-        component.property = new CardViewTextItemModel ({
-            label: 'Text label',
-            value: '',
-            key: 'textkey',
-            default: 'FAKE-DEFAULT-KEY',
-            editable: true
-        });
-        fixture.detectChanges();
-
-        let value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-${component.property.key}"]`));
-        expect(value).not.toBeNull();
-        expect(value.nativeElement.innerText.trim()).toBe('FAKE-DEFAULT-KEY');
-    });
-
-    it('should render the default as value if the value is empty and clickable false', () => {
-        component.property = new CardViewTextItemModel ({
-            label: 'Text label',
-            value: '',
-            key: 'textkey',
-            default: 'FAKE-DEFAULT-KEY',
-            clickable: false
-        });
-        fixture.detectChanges();
-
-        let value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-${component.property.key}"]`));
-        expect(value).not.toBeNull();
-        expect(value.nativeElement.innerText.trim()).toBe('FAKE-DEFAULT-KEY');
-    });
-
-    it('should render the default as value if the value is empty and clickable true', () => {
-        component.property = new CardViewTextItemModel ({
-            label: 'Text label',
-            value: '',
-            key: 'textkey',
-            default: 'FAKE-DEFAULT-KEY',
-            clickable: true
-        });
-        fixture.detectChanges();
-
-        let value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-${component.property.key}"]`));
-        expect(value).not.toBeNull();
-        expect(value.nativeElement.innerText.trim()).toBe('FAKE-DEFAULT-KEY');
-    });
-
-    it('should render value when editable:true', () => {
-        component.editable = true;
-        component.property.editable = true;
-        fixture.detectChanges();
-
-        let value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-${component.property.key}"]`));
-        expect(value).not.toBeNull();
-        expect(value.nativeElement.innerText.trim()).toBe('Lorem ipsum');
-    });
-
-    it('should render the edit icon in case of editable:true', () => {
-        component.editable = true;
-        component.property.editable = true;
-        fixture.detectChanges();
-
-        let editIcon = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-icon-${component.property.key}"]`));
-        expect(editIcon).not.toBeNull('Edit icon should be shown');
-    });
-
-    it('should NOT render the edit icon in case of editable:false', () => {
-        component.editable = false;
-        fixture.detectChanges();
-
-        let editIcon = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-icon-${component.property.key}"]`));
-        expect(editIcon).toBeNull('Edit icon should NOT be shown');
-    });
-
-    it('should NOT render the picker and toggle in case of editable:true but (general) editable:false', () => {
-        component.editable = false;
-        component.property.editable = true;
-        fixture.detectChanges();
-
-        let editIcon = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-icon-${component.property.key}"]`));
-        expect(editIcon).toBeNull('Edit icon should NOT be shown');
-    });
-
-    it('should trigger an update event on the CardViewUpdateService', (done) => {
-        component.editable = true;
-        component.property.editable = true;
-        const cardViewUpdateService = TestBed.get(CardViewUpdateService);
-        const expectedText = 'changed text';
-        fixture.detectChanges();
-
-        cardViewUpdateService.itemUpdated$.subscribe(
-            (updateNotification) => {
-                expect(updateNotification.target).toBe(component.property);
-                expect(updateNotification.changed).toEqual({ textkey: expectedText });
-                done();
-            }
-        );
-
-        let editIcon = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-toggle-${component.property.key}"]`));
-        editIcon.triggerEventHandler('click', null);
-        fixture.detectChanges();
-
-        let editInput = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-editinput-${component.property.key}"]`));
-        editInput.nativeElement.value = expectedText;
-        editInput.nativeElement.dispatchEvent(new Event('input'));
-        fixture.detectChanges();
-
-        let updateInput = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-update-${component.property.key}"]`));
-        updateInput.triggerEventHandler('click', null);
-    });
-
-    it('should switch back to readonly mode after an update attempt', async(() => {
-        component.editable = true;
-        component.property.editable = true;
-        component.inEdit = true;
-        component.editedValue = 'updated-value';
-        fixture.detectChanges();
-
-        component.update();
-
-        fixture.whenStable().then(() => {
-            expect(component.property.value).toBe(component.editedValue);
-            expect(component.inEdit).toBeFalsy();
-        });
-    }));
-});
diff --git a/lib/core/card-view/card-view.component.html b/lib/core/card-view/card-view.component.html
deleted file mode 100644
index afe045024f..0000000000
--- a/lib/core/card-view/card-view.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="adf-property-list">
-    <div *ngFor="let property of properties">
-        <div [attr.data-automation-id]="'header-'+property.key" class="adf-property">
-            <adf-card-view-item-dispatcher [property]="property" [editable]="editable"></adf-card-view-item-dispatcher>
-        </div>
-    </div>
-</div>
-
diff --git a/lib/core/card-view/card-view.component.scss b/lib/core/card-view/card-view.component.scss
deleted file mode 100644
index 2cac58417d..0000000000
--- a/lib/core/card-view/card-view.component.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-
-@mixin adf-card-view-theme($theme) {
-
-    .adf {
-        &-property-list {
-            display: table;
-            width: 100%;
-            border-collapse: collapse;
-            border-spacing: 0;
-        }
-
-        &-property {
-            display: table-row;
-        }
-
-        &-property &-property-label {
-            display: table-cell;
-            min-width: 100px;
-            padding-right: 30px;
-            word-wrap: break-word;
-            color: rgb(186, 186, 186);;
-            vertical-align: top;
-            padding-bottom: 20px;
-        }
-
-        &-property &-property-value {
-            width: 100%;
-            display: table-cell;
-            color: rgb(101, 101, 101);
-            vertical-align: top;
-            padding-bottom: 20px;
-        }
-    }
-}
diff --git a/lib/core/card-view/card-view.module.scss b/lib/core/card-view/card-view.module.scss
new file mode 100644
index 0000000000..a3a1c75074
--- /dev/null
+++ b/lib/core/card-view/card-view.module.scss
@@ -0,0 +1,11 @@
+@import './components/card-view-dateitem/card-view-dateitem.component';
+@import './components/card-view-textitem/card-view-textitem.component';
+@import './components/card-view/card-view.component';
+@import '~@mat-datetimepicker/core/datetimepicker/datetimepicker-theme.scss';
+
+@mixin adf-card-view-module-theme($theme) {
+    @include adf-card-view-dateitem-theme($theme);
+    @include adf-card-view-textitem-theme($theme);
+    @include adf-card-view-theme($theme);
+    @include mat-datetimepicker-theme($theme);
+}
diff --git a/lib/core/card-view/card-view.module.ts b/lib/core/card-view/card-view.module.ts
index 4941131289..416aff18c9 100644
--- a/lib/core/card-view/card-view.module.ts
+++ b/lib/core/card-view/card-view.module.ts
@@ -18,47 +18,69 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { MatButtonModule, MatDatepickerModule, MatIconModule, MatInputModule, MatNativeDateModule } from '@angular/material';
+import {
+    MatButtonModule,
+    MatDatepickerModule,
+    MatIconModule,
+    MatInputModule,
+    MatCheckboxModule,
+    MatNativeDateModule
+} from '@angular/material';
+import { MatDatetimepickerModule, MatNativeDatetimeModule } from '@mat-datetimepicker/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { TranslateModule } from '@ngx-translate/core';
 
-import { CardViewContentProxyDirective } from './card-view-content-proxy.directive';
-import { CardViewDateItemComponent } from './card-view-dateitem.component';
-import { CardViewItemDispatcherComponent } from './card-view-item-dispatcher.component';
-import { CardViewMapItemComponent } from './card-view-mapitem.component';
-import { CardViewTextItemComponent } from './card-view-textitem.component';
-import { CardViewComponent } from './card-view.component';
+import { CardViewContentProxyDirective } from './directives/card-view-content-proxy.directive';
+import { CardViewComponent } from './components/card-view/card-view.component';
+import { CardViewBoolItemComponent } from './components/card-view-boolitem/card-view-boolitem.component';
+import { CardViewDateItemComponent } from './components/card-view-dateitem/card-view-dateitem.component';
+import { CardViewItemDispatcherComponent } from './components/card-view-item-dispatcher/card-view-item-dispatcher.component';
+import { CardViewMapItemComponent } from './components/card-view-mapitem/card-view-mapitem.component';
+import { CardViewTextItemComponent } from './components/card-view-textitem/card-view-textitem.component';
+
+import { CardItemTypeService } from './services/card-item-types.service';
+import { CardViewUpdateService } from './services/card-view-update.service';
 
 @NgModule({
     imports: [
         CommonModule,
+        FormsModule,
+        FlexLayoutModule,
+        TranslateModule,
         MatDatepickerModule,
         MatNativeDateModule,
+        MatCheckboxModule,
         MatInputModule,
         MatIconModule,
         MatButtonModule,
-        FormsModule,
-        FlexLayoutModule,
-        TranslateModule
+        MatDatetimepickerModule,
+        MatNativeDatetimeModule
     ],
     declarations: [
         CardViewComponent,
-        CardViewItemDispatcherComponent,
-        CardViewContentProxyDirective,
-        CardViewTextItemComponent,
+        CardViewBoolItemComponent,
+        CardViewDateItemComponent,
         CardViewMapItemComponent,
-        CardViewDateItemComponent
+        CardViewTextItemComponent,
+        CardViewItemDispatcherComponent,
+        CardViewContentProxyDirective
     ],
     entryComponents: [
-        CardViewTextItemComponent,
+        CardViewBoolItemComponent,
+        CardViewDateItemComponent,
         CardViewMapItemComponent,
-        CardViewDateItemComponent
+        CardViewTextItemComponent
     ],
     exports: [
         CardViewComponent,
-        CardViewTextItemComponent,
+        CardViewBoolItemComponent,
+        CardViewDateItemComponent,
         CardViewMapItemComponent,
-        CardViewDateItemComponent
+        CardViewTextItemComponent
+    ],
+    providers: [
+        CardItemTypeService,
+        CardViewUpdateService
     ]
 })
 export class CardViewModule {}
diff --git a/lib/core/card-view/components/card-view-boolitem/card-view-boolitem.component.html b/lib/core/card-view/components/card-view-boolitem/card-view-boolitem.component.html
new file mode 100644
index 0000000000..202f179844
--- /dev/null
+++ b/lib/core/card-view/components/card-view-boolitem/card-view-boolitem.component.html
@@ -0,0 +1,10 @@
+<ng-container *ngIf="!property.isEmpty() || isEditable()">
+    <div class="adf-property-label">{{ property.label | translate }}</div>
+    <div class="adf-property-value">
+        <mat-checkbox
+            [checked]="property.displayValue"
+            [disabled]="!isEditable()"
+            (change)="changed($event)">
+        </mat-checkbox>
+    </div>
+</ng-container>
diff --git a/lib/core/card-view/components/card-view-boolitem/card-view-boolitem.component.scss b/lib/core/card-view/components/card-view-boolitem/card-view-boolitem.component.scss
new file mode 100644
index 0000000000..a94027d036
--- /dev/null
+++ b/lib/core/card-view/components/card-view-boolitem/card-view-boolitem.component.scss
@@ -0,0 +1,2 @@
+.adf {
+}
diff --git a/lib/core/card-view/components/card-view-boolitem/card-view-boolitem.component.spec.ts b/lib/core/card-view/components/card-view-boolitem/card-view-boolitem.component.spec.ts
new file mode 100644
index 0000000000..1e32830480
--- /dev/null
+++ b/lib/core/card-view/components/card-view-boolitem/card-view-boolitem.component.spec.ts
@@ -0,0 +1,243 @@
+/*!
+ * @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 { HttpClientModule } from '@angular/common/http';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { MaterialModule } from '../../../material.module';
+import { MatCheckboxChange, MatCheckbox } from '@angular/material';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { AppConfigService } from '../../../app-config/app-config.service';
+import { CardViewUpdateService } from '../../services/card-view-update.service';
+import { LogService } from '../../../services/log.service';
+import { TranslateLoaderService } from '../../../services/translate-loader.service';
+
+import { CardViewBoolItemComponent } from './card-view-boolitem.component';
+import { CardViewBoolItemModel } from '../../models/card-view-boolitem.model';
+
+describe('CardViewBoolItemComponent', () => {
+
+    let fixture: ComponentFixture<CardViewBoolItemComponent>;
+    let component: CardViewBoolItemComponent;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                HttpClientModule,
+                FormsModule,
+                NoopAnimationsModule,
+                MaterialModule,
+                TranslateModule.forRoot({
+                    loader: {
+                        provide: TranslateLoader,
+                        useClass: TranslateLoaderService
+                    }
+                })
+            ],
+            declarations: [
+                CardViewBoolItemComponent
+            ],
+            providers: [
+                AppConfigService,
+                CardViewUpdateService,
+                LogService
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(CardViewBoolItemComponent);
+        component = fixture.componentInstance;
+        component.property = new CardViewBoolItemModel({
+            label: 'Boolean label',
+            value: true,
+            key: 'boolkey',
+            default: false,
+            editable: false
+        });
+    });
+
+    afterEach(() => {
+        fixture.destroy();
+        TestBed.resetTestingModule();
+    });
+
+    describe('Rendering', () => {
+
+        it('should render the label and value if the property is editable', () => {
+            component.editable = true;
+            component.property.editable = true;
+            fixture.detectChanges();
+
+            let label = fixture.debugElement.query(By.css('.adf-property-label'));
+            expect(label).not.toBeNull();
+            expect(label.nativeElement.innerText).toBe('Boolean label');
+
+            let value = fixture.debugElement.query(By.css('.adf-property-value'));
+            expect(value).not.toBeNull();
+        });
+
+        it('should NOT render the label and value if the property is NOT editable and doesn\'t have a proper boolean value set' , () => {
+            component.editable = true;
+            component.property.value = undefined;
+            component.property.editable = false;
+            fixture.detectChanges();
+
+            let label = fixture.debugElement.query(By.css('.adf-property-label'));
+            expect(label).toBeNull();
+
+            let value = fixture.debugElement.query(By.css('.adf-property-value'));
+            expect(value).toBeNull();
+        });
+
+        it('should render the label and value if the property is NOT editable but has a proper boolean value set' , () => {
+            component.editable = true;
+            component.property.value = false;
+            component.property.editable = false;
+            fixture.detectChanges();
+
+            let label = fixture.debugElement.query(By.css('.adf-property-label'));
+            expect(label).not.toBeNull();
+
+            let value = fixture.debugElement.query(By.css('.adf-property-value'));
+            expect(value).not.toBeNull();
+        });
+
+        it('should render ticked checkbox if property\'s value is true', () => {
+            component.property.value = true;
+            fixture.detectChanges();
+
+            let value = fixture.debugElement.query(By.css('.adf-property-value input[type="checkbox"]'));
+            expect(value).not.toBeNull();
+            expect(value.nativeElement.checked).toBe(true);
+        });
+
+        it('should render ticked checkbox if property\'s value is not set but default is true and editable', () => {
+            component.editable = true;
+            component.property.editable = true;
+            component.property.value = undefined;
+            component.property.default = true;
+            fixture.detectChanges();
+
+            let value = fixture.debugElement.query(By.css('.adf-property-value input[type="checkbox"]'));
+            expect(value).not.toBeNull();
+            expect(value.nativeElement.checked).toBe(true);
+        });
+
+        it('should render unticked checkbox if property\'s value is false', () => {
+            component.property.value = false;
+            fixture.detectChanges();
+
+            let value = fixture.debugElement.query(By.css('.adf-property-value input[type="checkbox"]'));
+            expect(value).not.toBeNull();
+            expect(value.nativeElement.checked).toBe(false);
+        });
+
+        it('should render unticked checkbox if property\'s value is not set but default is false and editable', () => {
+            component.editable = true;
+            component.property.editable = true;
+            component.property.value = undefined;
+            component.property.default = false;
+            fixture.detectChanges();
+
+            let value = fixture.debugElement.query(By.css('.adf-property-value input[type="checkbox"]'));
+            expect(value).not.toBeNull();
+            expect(value.nativeElement.checked).toBe(false);
+        });
+
+        it('should render enabled checkbox if property and component are both editable', () => {
+            component.editable = true;
+            component.property.editable = true;
+            component.property.value = true;
+            fixture.detectChanges();
+
+            let value = fixture.debugElement.query(By.css('.adf-property-value input[type="checkbox"]'));
+            expect(value).not.toBeNull();
+            expect(value.nativeElement.hasAttribute('disabled')).toBe(false);
+        });
+
+        it('should render disabled checkbox if property is not editable', () => {
+            component.editable = true;
+            component.property.editable = false;
+            component.property.value = true;
+            fixture.detectChanges();
+
+            let value = fixture.debugElement.query(By.css('.adf-property-value input[type="checkbox"]'));
+            expect(value).not.toBeNull();
+            expect(value.nativeElement.hasAttribute('disabled')).toBe(true);
+        });
+
+        it('should render disabled checkbox if component is not editable', () => {
+            component.editable = false;
+            component.property.editable = true;
+            component.property.value = true;
+            fixture.detectChanges();
+
+            let value = fixture.debugElement.query(By.css('.adf-property-value input[type="checkbox"]'));
+            expect(value).not.toBeNull();
+            expect(value.nativeElement.hasAttribute('disabled')).toBe(true);
+        });
+    });
+
+    describe('Update', () => {
+
+        beforeEach(() => {
+            component.editable = true;
+            component.property.editable = true;
+            component.property.value = undefined;
+            fixture.detectChanges();
+        });
+
+        it('should trigger the update event when changing the checkbox', () => {
+            const cardViewUpdateService = TestBed.get(CardViewUpdateService);
+            spyOn(cardViewUpdateService, 'update');
+
+            component.changed(<MatCheckboxChange> {checked: true});
+
+            expect(cardViewUpdateService.update).toHaveBeenCalledWith(component.property, true);
+        });
+
+        it('should update the propery\'s value after a changed', async(() => {
+            component.property.value = true;
+
+            component.changed(<MatCheckboxChange> {checked: false});
+
+            fixture.whenStable().then(() => {
+                expect(component.property.value).toBe(false);
+            });
+        }));
+
+        it('should trigger an update event on the CardViewUpdateService [integration]', (done) => {
+            const cardViewUpdateService = TestBed.get(CardViewUpdateService);
+            component.property.value = false;
+            fixture.detectChanges();
+
+            cardViewUpdateService.itemUpdated$.subscribe(
+                (updateNotification) => {
+                    expect(updateNotification.target).toBe(component.property);
+                    expect(updateNotification.changed).toEqual({ boolkey: true });
+                    done();
+                }
+            );
+
+            const labelElement = fixture.debugElement.query(By.directive(MatCheckbox)).nativeElement.querySelector('label');
+            labelElement.click();
+        });
+    });
+});
diff --git a/lib/core/card-view/components/card-view-boolitem/card-view-boolitem.component.ts b/lib/core/card-view/components/card-view-boolitem/card-view-boolitem.component.ts
new file mode 100644
index 0000000000..719f484479
--- /dev/null
+++ b/lib/core/card-view/components/card-view-boolitem/card-view-boolitem.component.ts
@@ -0,0 +1,47 @@
+/*!
+ * @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, Input } from '@angular/core';
+import { MatCheckboxChange } from '@angular/material';
+import { CardViewBoolItemModel } from '../../models/card-view-boolitem.model';
+import { CardViewUpdateService } from '../../services/card-view-update.service';
+
+@Component({
+    selector: 'adf-card-view-boolitem',
+    templateUrl: './card-view-boolitem.component.html',
+    styleUrls: ['./card-view-boolitem.component.scss']
+})
+
+export class CardViewBoolItemComponent {
+
+    @Input()
+    property: CardViewBoolItemModel;
+
+    @Input()
+    editable: boolean;
+
+    constructor(private cardViewUpdateService: CardViewUpdateService) {}
+
+    isEditable() {
+        return this.editable && this.property.editable;
+    }
+
+    changed(change: MatCheckboxChange) {
+        this.cardViewUpdateService.update(this.property, change.checked );
+        this.property.value = change.checked;
+    }
+}
diff --git a/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.html b/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.html
new file mode 100644
index 0000000000..d16f4bfb7e
--- /dev/null
+++ b/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.html
@@ -0,0 +1,37 @@
+<div class="adf-property-label" *ngIf="showProperty() || isEditable()">{{ property.label | translate }}</div>
+<div class="adf-property-value">
+    <span *ngIf="!isEditable()">
+        <span [attr.data-automation-id]="'card-dateitem-' + property.key">
+            <span *ngIf="showProperty()">{{ property.displayValue }}</span>
+        </span>
+    </span>
+    <div *ngIf="isEditable()" class="adf-dateitem-editable">
+        <div class="adf-dateitem-editable-controls">
+            <span
+                class="adf-datepicker-toggle"
+                [attr.data-automation-id]="'datepicker-label-toggle-' + property.key"
+                (click)="showDatePicker($event)">
+                <span *ngIf="showProperty(); else elseEmptyValueBlock">{{ property.displayValue }}</span>
+            </span>
+            <mat-datetimepicker-toggle
+                [attr.data-automation-id]="'datepickertoggle-' + property.key"
+                [for]="datetimePicker">
+            </mat-datetimepicker-toggle>
+        </div>
+
+        <input class="adf-invisible-date-input"
+            [matDatetimepicker]="datetimePicker"
+            [value]="valueDate"
+            (dateChange)="onDateChanged($event)">
+
+        <mat-datetimepicker #datetimePicker
+            [type]="property.type"
+            timeInterval="5"
+            [attr.data-automation-id]="'datepicker-' + property.key"
+            [startAt]="valueDate">
+        </mat-datetimepicker>
+    </div>
+    <ng-template #elseEmptyValueBlock>
+        {{ property.default | translate }}
+    </ng-template>
+</div>
diff --git a/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.scss b/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.scss
new file mode 100644
index 0000000000..17a1307e3f
--- /dev/null
+++ b/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.scss
@@ -0,0 +1,41 @@
+@mixin adf-card-view-dateitem-theme($theme) {
+
+    .adf {
+        &-invisible-date-input {
+            height: 2px;
+            width: 0;
+            overflow: hidden;
+            opacity: 0;
+            border: none;
+            margin: 0;
+            padding: 0;
+            float: right;
+        }
+
+        &-dateitem-editable {
+            cursor: pointer;
+
+            &-controls {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+
+                button.mat-icon-button {
+                    line-height: 20px;
+                    height: 20px;
+                    width: 20px;
+                }
+
+                mat-icon {
+                    width: 16px;
+                    height: 16px;
+                    opacity: 0.5;
+                }
+
+                &:hover mat-icon {
+                    opacity: 1;
+                }
+            }
+        }
+    }
+}
diff --git a/lib/core/card-view/card-view-dateitem.component.spec.ts b/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts
similarity index 79%
rename from lib/core/card-view/card-view-dateitem.component.spec.ts
rename to lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts
index 19cbe653ca..3a15f3d5cd 100644
--- a/lib/core/card-view/card-view-dateitem.component.spec.ts
+++ b/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts
@@ -18,13 +18,14 @@
 import { HttpClientModule } from '@angular/common/http';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatDatepickerModule, MatInputModule, MatNativeDateModule } from '@angular/material';
+import { MatDatetimepickerModule, MatNativeDatetimeModule } from '@mat-datetimepicker/core';
 import { By } from '@angular/platform-browser';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import moment from 'moment-es6';
-import { AppConfigService } from '../index';
-import { CardViewDateItemModel } from '../models/card-view-dateitem.model';
-import { CardViewUpdateService } from '../services/card-view-update.service';
-import { TranslateLoaderService } from '../services/translate-loader.service';
+import { AppConfigService } from '../../../index';
+import { CardViewDateItemModel } from '../../models/card-view-dateitem.model';
+import { CardViewUpdateService } from '../../services/card-view-update.service';
+import { TranslateLoaderService } from '../../../services/translate-loader.service';
 
 import { CardViewDateItemComponent } from './card-view-dateitem.component';
 
@@ -40,6 +41,8 @@ describe('CardViewDateItemComponent', () => {
                 MatDatepickerModule,
                 MatInputModule,
                 MatNativeDateModule,
+                MatNativeDatetimeModule,
+                MatDatetimepickerModule,
                 TranslateModule.forRoot({
                     loader: {
                         provide: TranslateLoader,
@@ -87,7 +90,7 @@ describe('CardViewDateItemComponent', () => {
         expect(value.nativeElement.innerText.trim()).toBe('Jul 10 2017');
     });
 
-    it('should render the default as value if the value is empty and editable:false', () => {
+    it('should NOT render the default as value if the value is empty, editable:false and displayEmpty is false', () => {
         component.property = new CardViewDateItemModel ({
             label: 'Date label',
             value: '',
@@ -96,6 +99,26 @@ describe('CardViewDateItemComponent', () => {
             format: '',
             editable: false
         });
+        component.editable = true;
+        component.displayEmpty = false;
+        fixture.detectChanges();
+
+        let value = fixture.debugElement.query(By.css('.adf-property-value'));
+        expect(value).not.toBeNull();
+        expect(value.nativeElement.innerText.trim()).toBe('');
+    });
+
+    it('should render the default as value if the value is empty, editable:false and displayEmpty is true', () => {
+        component.property = new CardViewDateItemModel ({
+            label: 'Date label',
+            value: '',
+            key: 'datekey',
+            default: 'FAKE-DEFAULT-KEY',
+            format: '',
+            editable: false
+        });
+        component.editable = true;
+        component.displayEmpty = true;
         fixture.detectChanges();
 
         let value = fixture.debugElement.query(By.css('.adf-property-value'));
@@ -112,6 +135,7 @@ describe('CardViewDateItemComponent', () => {
             format: '',
             editable: true
         });
+        component.editable = true;
         fixture.detectChanges();
 
         let value = fixture.debugElement.query(By.css('.adf-property-value'));
@@ -161,7 +185,7 @@ describe('CardViewDateItemComponent', () => {
         expect(datePickerToggle).toBeNull('Datepicker toggle should NOT be shown');
     });
 
-    it('should open the datetimepicker when clicking on the label', () => {
+    it('should open the dateXXXpicker when clicking on the label', () => {
         component.editable = true;
         component.property.editable = true;
         fixture.detectChanges();
@@ -190,4 +214,20 @@ describe('CardViewDateItemComponent', () => {
 
         component.onDateChanged({value: expectedDate});
     });
+
+    it('should update the propery\'s value after a succesful update attempt', async(() => {
+        component.editable = true;
+        component.property.editable = true;
+        component.property.value = null;
+        const expectedDate = moment('Jul 10 2017', 'MMM DD YY');
+        fixture.detectChanges();
+
+        component.onDateChanged({value: expectedDate});
+
+        fixture.whenStable().then(
+            (updateNotification) => {
+                expect(component.property.value).toEqual(expectedDate.toDate());
+            }
+        );
+    }));
 });
diff --git a/lib/core/card-view/card-view-dateitem.component.ts b/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.ts
similarity index 66%
rename from lib/core/card-view/card-view-dateitem.component.ts
rename to lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.ts
index ab353da31a..09f5be4e9b 100644
--- a/lib/core/card-view/card-view-dateitem.component.ts
+++ b/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.ts
@@ -16,20 +16,24 @@
  */
 
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
-import { MatDatepicker } from '@angular/material';
 import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material';
+import { MatDatetimepicker, DatetimeAdapter, MAT_DATETIME_FORMATS } from '@mat-datetimepicker/core';
+import { MomentDatetimeAdapter, MAT_MOMENT_DATETIME_FORMATS } from '@mat-datetimepicker/moment';
 import moment from 'moment-es6';
 import { Moment } from 'moment';
-import { CardViewDateItemModel } from '../models/card-view-dateitem.model';
-import { CardViewUpdateService } from '../services/card-view-update.service';
-import { UserPreferencesService } from '../services/user-preferences.service';
-import { MomentDateAdapter } from '../utils/momentDateAdapter';
-import { MOMENT_DATE_FORMATS } from '../utils/moment-date-formats.model';
+import { CardViewDateItemModel } from '../../models/card-view-dateitem.model';
+import { CardViewUpdateService } from '../../services/card-view-update.service';
+import { UserPreferencesService } from '../../../services/user-preferences.service';
+import { MomentDateAdapter } from '../../../utils/momentDateAdapter';
+import { MOMENT_DATE_FORMATS } from '../../../utils/moment-date-formats.model';
 
 @Component({
     providers: [
         { provide: DateAdapter, useClass: MomentDateAdapter },
-        { provide: MAT_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS }],
+        { provide: MAT_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS },
+        { provide: DatetimeAdapter, useClass: MomentDatetimeAdapter },
+        { provide: MAT_DATETIME_FORMATS, useValue: MAT_MOMENT_DATETIME_FORMATS }
+    ],
     selector: 'adf-card-view-dateitem',
     templateUrl: './card-view-dateitem.component.html',
     styleUrls: ['./card-view-dateitem.component.scss']
@@ -42,10 +46,13 @@ export class CardViewDateItemComponent implements OnInit {
     property: CardViewDateItemModel;
 
     @Input()
-    editable: boolean;
+    editable: boolean = false;
 
-    @ViewChild(MatDatepicker)
-    public datepicker: MatDatepicker<any>;
+    @Input()
+    displayEmpty: boolean = true;
+
+    @ViewChild(MatDatetimepicker)
+    public datepicker: MatDatetimepicker<any>;
 
     valueDate: Moment;
 
@@ -58,13 +65,15 @@ export class CardViewDateItemComponent implements OnInit {
         this.preferences.locale$.subscribe((locale) => {
             this.dateAdapter.setLocale(locale);
         });
-        let momentDateAdapter = <MomentDateAdapter> this.dateAdapter;
-        momentDateAdapter.overrideDisplyaFormat = this.SHOW_FORMAT;
+        (<MomentDateAdapter> this.dateAdapter).overrideDisplyaFormat = this.SHOW_FORMAT;
 
         if (this.property.value) {
             this.valueDate = moment(this.property.value, this.SHOW_FORMAT);
         }
+    }
 
+    showProperty() {
+        return this.displayEmpty || !this.property.isEmpty();
     }
 
     isEditable() {
@@ -81,6 +90,7 @@ export class CardViewDateItemComponent implements OnInit {
             if (momentDate.isValid()) {
                 this.valueDate = momentDate;
                 this.cardViewUpdateService.update(this.property, momentDate.toDate());
+                this.property.value = momentDate.toDate();
             }
         }
     }
diff --git a/lib/core/card-view/card-view-item-dispatcher.component.spec.ts b/lib/core/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.spec.ts
similarity index 71%
rename from lib/core/card-view/card-view-item-dispatcher.component.spec.ts
rename to lib/core/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.spec.ts
index 42da90102d..8201923007 100644
--- a/lib/core/card-view/card-view-item-dispatcher.component.spec.ts
+++ b/lib/core/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.spec.ts
@@ -17,14 +17,14 @@
 
 /* tslint:disable:component-selector  */
 
-import { Component, Input } from '@angular/core';
+import { Component, Input, SimpleChange } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
-import { CardViewItem } from '../interface/card-view-item.interface';
-import { CardItemTypeService } from '../services/card-item-types.service';
-import { CardViewContentProxyDirective } from './card-view-content-proxy.directive';
-import { CardViewItemDispatcherComponent } from './card-view-item-dispatcher.component';
+import { CardViewItem } from '../../interfaces/card-view-item.interface';
+import { CardItemTypeService } from '../../services/card-item-types.service';
+import { CardViewContentProxyDirective } from '../../directives/card-view-content-proxy.directive';
+import { CardViewItemDispatcherComponent } from '../card-view-item-dispatcher/card-view-item-dispatcher.component';
 
 @Component({
     selector: 'whatever-you-want-to-have',
@@ -79,9 +79,10 @@ describe('CardViewItemDispatcherComponent', () => {
             }
         };
         component.editable = true;
+        component.displayEmpty = true;
 
         fixture.detectChanges();
-        component.ngOnChanges(null);
+        component.ngOnChanges({});
     });
 
     afterEach(() => {
@@ -97,9 +98,9 @@ describe('CardViewItemDispatcherComponent', () => {
         });
 
         it('should load the CardViewShinyCustomElementItemComponent only ONCE', () => {
-            component.ngOnChanges();
-            component.ngOnChanges();
-            component.ngOnChanges();
+            component.ngOnChanges({});
+            component.ngOnChanges({});
+            component.ngOnChanges({});
             fixture.detectChanges();
 
             const shinyCustomElementItemComponent = fixture.debugElement.queryAll(By.css('whatever-you-want-to-have'));
@@ -107,11 +108,32 @@ describe('CardViewItemDispatcherComponent', () => {
             expect(shinyCustomElementItemComponent.length).toEqual(1);
         });
 
-        it('should pass through the property and editable parameters', () => {
+        it('should pass through the property, editable and displayEmpty parameters', () => {
             const shinyCustomElementItemComponent = fixture.debugElement.query(By.css('whatever-you-want-to-have')).componentInstance;
 
             expect(shinyCustomElementItemComponent.property).toBe(component.property);
             expect(shinyCustomElementItemComponent.editable).toBe(component.editable);
+            expect(shinyCustomElementItemComponent.displayEmpty).toBe(component.displayEmpty);
+        });
+
+        it('should update the subcomponent\'s input parameters', () => {
+            const expectedEditable = false,
+                expectedDisplayEmpty = true,
+                expectedProperty = <CardViewItem> {},
+                expectedCustomInput = 1;
+
+            component.ngOnChanges({
+                editable: new SimpleChange(true, expectedEditable, false),
+                displayEmpty: new SimpleChange(false, expectedDisplayEmpty, false),
+                property: new SimpleChange(null, expectedProperty, false),
+                customInput: new SimpleChange(0, expectedCustomInput, false)
+            });
+
+            const shinyCustomElementItemComponent = fixture.debugElement.query(By.css('whatever-you-want-to-have')).componentInstance;
+            expect(shinyCustomElementItemComponent.property).toBe(expectedProperty);
+            expect(shinyCustomElementItemComponent.editable).toBe(expectedEditable);
+            expect(shinyCustomElementItemComponent.displayEmpty).toBe(expectedDisplayEmpty);
+            expect(shinyCustomElementItemComponent.customInput).toBe(expectedCustomInput);
         });
     });
 
@@ -138,21 +160,21 @@ describe('CardViewItemDispatcherComponent', () => {
             lifeCycleMethods.forEach((lifeCycleMethod) => {
                 shinyCustomElementItemComponent[lifeCycleMethod] = () => {};
                 spyOn(shinyCustomElementItemComponent, lifeCycleMethod);
-                const param1 = {};
-                const param2 = {};
+                const param = {};
 
-                component[lifeCycleMethod].call(component, param1, param2);
+                component[lifeCycleMethod].call(component, param);
 
-                expect(shinyCustomElementItemComponent[lifeCycleMethod]).toHaveBeenCalledWith(param1, param2);
+                expect(shinyCustomElementItemComponent[lifeCycleMethod]).toHaveBeenCalledWith(param);
             });
         });
 
         it('should NOT call through the lifecycle methods if the method does not exist (no error should be thrown)', () => {
+            const param = {};
             lifeCycleMethods.forEach((lifeCycleMethod) => {
                 shinyCustomElementItemComponent[lifeCycleMethod] = undefined;
 
                 const execution = () => {
-                    component[lifeCycleMethod].call(component);
+                    component[lifeCycleMethod].call(component, param);
                 };
 
                 expect(execution).not.toThrowError();
diff --git a/lib/core/card-view/card-view-item-dispatcher.component.ts b/lib/core/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.ts
similarity index 76%
rename from lib/core/card-view/card-view-item-dispatcher.component.ts
rename to lib/core/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.ts
index c8b3ea13c0..338d1cf3a7 100644
--- a/lib/core/card-view/card-view-item-dispatcher.component.ts
+++ b/lib/core/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.ts
@@ -20,11 +20,13 @@ import {
     ComponentFactoryResolver,
     Input,
     OnChanges,
+    SimpleChange,
+    SimpleChanges,
     ViewChild
 } from '@angular/core';
-import { CardViewItem } from '../interface/card-view-item.interface';
-import { CardItemTypeService } from '../services/card-item-types.service';
-import { CardViewContentProxyDirective } from './card-view-content-proxy.directive';
+import { CardViewItem } from '../../interfaces/card-view-item.interface';
+import { CardItemTypeService } from '../../services/card-item-types.service';
+import { CardViewContentProxyDirective } from '../../directives/card-view-content-proxy.directive';
 
 @Component({
     selector: 'adf-card-view-item-dispatcher',
@@ -37,6 +39,9 @@ export class CardViewItemDispatcherComponent implements OnChanges {
     @Input()
     editable: boolean;
 
+    @Input()
+    displayEmpty: boolean = true;
+
     @ViewChild(CardViewContentProxyDirective)
     private content: CardViewContentProxyDirective;
 
@@ -63,13 +68,19 @@ export class CardViewItemDispatcherComponent implements OnChanges {
         });
     }
 
-    ngOnChanges(...args) {
+    ngOnChanges(changes: SimpleChanges) {
         if (!this.loaded) {
             this.loadComponent();
             this.loaded = true;
         }
 
-        this.proxy('ngOnChanges', ...args);
+        Object.keys(changes)
+            .map(changeName => [changeName, changes[changeName]])
+            .forEach(([inputParamName, simpleChange]: [string, SimpleChange]) => {
+                this.componentReference.instance[inputParamName] = simpleChange.currentValue;
+            });
+
+        this.proxy('ngOnChanges', changes);
     }
 
     private loadComponent() {
@@ -80,6 +91,7 @@ export class CardViewItemDispatcherComponent implements OnChanges {
 
         this.componentReference.instance.editable = this.editable;
         this.componentReference.instance.property = this.property;
+        this.componentReference.instance.displayEmpty = this.displayEmpty;
     }
 
     private proxy(methodName, ...args) {
diff --git a/lib/core/card-view/card-view-mapitem.component.html b/lib/core/card-view/components/card-view-mapitem/card-view-mapitem.component.html
similarity index 63%
rename from lib/core/card-view/card-view-mapitem.component.html
rename to lib/core/card-view/components/card-view-mapitem/card-view-mapitem.component.html
index 01021e0348..82f9749b3c 100644
--- a/lib/core/card-view/card-view-mapitem.component.html
+++ b/lib/core/card-view/components/card-view-mapitem/card-view-mapitem.component.html
@@ -1,12 +1,12 @@
-<div class="adf-property-label">{{ property.label | translate }}</div>
+<div class="adf-property-label" *ngIf="showProperty()">{{ property.label | translate }}</div>
 <div class="adf-property-value">
     <div>
         <span *ngIf="!isClickable(); else elseBlock" [attr.data-automation-id]="'card-mapitem-value-' + property.key">
-            <span *ngIf="!property.isEmpty(); else elseEmptyValueBlock">{{ property.displayValue }}</span>
+            <span *ngIf="showProperty();">{{ property.displayValue }}</span>
         </span>
         <ng-template #elseBlock>
             <span class="adf-mapitem-clickable-value" (click)="clicked()" [attr.data-automation-id]="'card-mapitem-value-' + property.key">
-                <span *ngIf="!property.isEmpty(); else elseEmptyValueBlock">{{ property.displayValue }}</span>
+                <span *ngIf="showProperty(); else elseEmptyValueBlock">{{ property.displayValue }}</span>
             </span>
         </ng-template>
     </div>
diff --git a/lib/core/card-view/card-view-mapitem.component.scss b/lib/core/card-view/components/card-view-mapitem/card-view-mapitem.component.scss
similarity index 100%
rename from lib/core/card-view/card-view-mapitem.component.scss
rename to lib/core/card-view/components/card-view-mapitem/card-view-mapitem.component.scss
diff --git a/lib/core/card-view/card-view-mapitem.component.spec.ts b/lib/core/card-view/components/card-view-mapitem/card-view-mapitem.component.spec.ts
similarity index 77%
rename from lib/core/card-view/card-view-mapitem.component.spec.ts
rename to lib/core/card-view/components/card-view-mapitem/card-view-mapitem.component.spec.ts
index e9e3a0b480..814cdc89f4 100644
--- a/lib/core/card-view/card-view-mapitem.component.spec.ts
+++ b/lib/core/card-view/components/card-view-mapitem/card-view-mapitem.component.spec.ts
@@ -19,15 +19,15 @@ import { HttpClientModule } from '@angular/common/http';
 import { DebugElement } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
-import { MaterialModule } from '../material.module';
+import { MaterialModule } from '../../../material.module';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { CardViewMapItemModel } from '../models/card-view-mapitem.model';
-import { AppConfigService } from '../app-config/app-config.service';
-import { CardViewUpdateService } from '../services/card-view-update.service';
-import { LogService } from '../services/log.service';
-import { TranslateLoaderService } from '../services/translate-loader.service';
+import { CardViewMapItemModel } from '../../models/card-view-mapitem.model';
+import { AppConfigService } from '../../../app-config/app-config.service';
+import { CardViewUpdateService } from '../../services/card-view-update.service';
+import { LogService } from '../../../services/log.service';
+import { TranslateLoaderService } from '../../../services/translate-loader.service';
 
 import { CardViewMapItemComponent } from './card-view-mapitem.component';
 
@@ -77,14 +77,15 @@ describe('CardViewMapItemComponent', () => {
         TestBed.resetTestingModule();
     });
 
-    it('should render the default if the value is empty', () => {
+    it('should render the default if the value is empty and displayEmpty is true', () => {
         component.property = new CardViewMapItemModel({
             label: 'Map label',
             value: null,
             key: 'mapkey',
-            default: 'Fake default'
+            default: 'Fake default',
+            clickable: false
         });
-
+        component.displayEmpty = true;
         fixture.detectChanges();
 
         let labelValue = debug.query(By.css('.adf-property-label'));
@@ -96,6 +97,25 @@ describe('CardViewMapItemComponent', () => {
         expect(value.nativeElement.innerText.trim()).toBe('Fake default');
     });
 
+    it('should NOT render the default if the value is empty and displayEmpty is false', () => {
+        component.property = new CardViewMapItemModel({
+            label: 'Map label',
+            value: null,
+            key: 'mapkey',
+            default: 'Fake default',
+            clickable: false
+        });
+        component.displayEmpty = false;
+        fixture.detectChanges();
+
+        let labelValue = debug.query(By.css('.adf-property-label'));
+        expect(labelValue).toBeNull();
+
+        let value = debug.query(By.css(`[data-automation-id="card-mapitem-value-${component.property.key}"]`));
+        expect(value).not.toBeNull();
+        expect(value.nativeElement.innerText.trim()).toBe('');
+    });
+
     it('should render the label and value', () => {
         component.property = new CardViewMapItemModel({
             label: 'Map label',
diff --git a/lib/core/card-view/card-view-mapitem.component.ts b/lib/core/card-view/components/card-view-mapitem/card-view-mapitem.component.ts
similarity index 79%
rename from lib/core/card-view/card-view-mapitem.component.ts
rename to lib/core/card-view/components/card-view-mapitem/card-view-mapitem.component.ts
index a6a4f30641..c325db0c3c 100644
--- a/lib/core/card-view/card-view-mapitem.component.ts
+++ b/lib/core/card-view/components/card-view-mapitem/card-view-mapitem.component.ts
@@ -16,8 +16,8 @@
  */
 
 import { Component, Input } from '@angular/core';
-import { CardViewMapItemModel } from '../models/card-view-mapitem.model';
-import { CardViewUpdateService } from '../services/card-view-update.service';
+import { CardViewMapItemModel } from '../../models/card-view-mapitem.model';
+import { CardViewUpdateService } from '../../services/card-view-update.service';
 
 @Component({
     selector: 'adf-card-view-mapitem',
@@ -29,8 +29,15 @@ export class CardViewMapItemComponent {
     @Input()
     property: CardViewMapItemModel;
 
+    @Input()
+    displayEmpty: boolean = true;
+
     constructor(private cardViewUpdateService: CardViewUpdateService) {}
 
+    showProperty() {
+        return this.displayEmpty || !this.property.isEmpty();
+    }
+
     isClickable() {
         return this.property.clickable;
     }
diff --git a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html
new file mode 100644
index 0000000000..9947abc706
--- /dev/null
+++ b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html
@@ -0,0 +1,58 @@
+<div class="adf-property-label" *ngIf="showProperty() || isEditable()">{{ property.label | translate }}</div>
+<div class="adf-property-value">
+    <span *ngIf="!isEditable()">
+        <span *ngIf="!isClickable(); else elseBlock" [attr.data-automation-id]="'card-textitem-value-' + property.key">
+            <span *ngIf="showProperty()">{{ property.displayValue }}</span>
+        </span>
+        <ng-template #elseBlock>
+            <span class="adf-textitem-clickable-value" (click)="clicked()" [attr.data-automation-id]="'card-textitem-value-' + property.key">
+                <span *ngIf="showProperty(); else elseEmptyValueBlock">{{ property.displayValue }}</span>
+            </span>
+        </ng-template>
+    </span>
+    <span *ngIf="isEditable()">
+        <div *ngIf="!inEdit" (click)="setEditMode(true)" class="adf-textitem-readonly" [attr.data-automation-id]="'card-textitem-edit-toggle-' + property.key" fxLayout="row" fxLayoutAlign="space-between center">
+            <span [attr.data-automation-id]="'card-textitem-value-' + property.key">
+                <span *ngIf="showProperty(); else elseEmptyValueBlock">{{ property.displayValue }}</span>
+            </span>
+            <mat-icon fxFlex="0 0 auto" [attr.data-automation-id]="'card-textitem-edit-icon-' + property.key" class="adf-textitem-icon">create</mat-icon>
+        </div>
+        <div *ngIf="inEdit" class="adf-textitem-editable">
+            <div class="adf-textitem-editable-controls">
+                <mat-form-field floatPlaceholder="never" class="adf-input-container">
+                    <input *ngIf="!property.multiline" #editorInput
+                        matInput
+                        class="adf-input"
+                        [placeholder]="property.default | translate"
+                        [(ngModel)]="editedValue"
+                        [attr.data-automation-id]="'card-textitem-editinput-' + property.key">
+                    <textarea *ngIf="property.multiline" #editorInput
+                        matInput
+                        matTextareaAutosize
+                        matAutosizeMaxRows="1"
+                        matAutosizeMaxRows="5"
+                        class="adf-textarea"
+                        [placeholder]="property.default | translate"
+                        [(ngModel)]="editedValue"
+                        [attr.data-automation-id]="'card-textitem-edittextarea-' + property.key"></textarea>
+                </mat-form-field>
+                <mat-icon
+                    class="adf-textitem-icon adf-update-icon"
+                    (click)="update()"
+                    [attr.data-automation-id]="'card-textitem-update-' + property.key">done</mat-icon>
+                <mat-icon
+                    class="adf-textitem-icon adf-reset-icon"
+                    (click)="reset()"
+                    [attr.data-automation-id]="'card-textitem-reset-' + property.key">clear</mat-icon>
+            </div>
+            <mat-error class="adf-textitem-editable-error" *ngIf="hasErrors()">
+                <ul>
+                    <li *ngFor="let errorMessage of errorMessages">{{ errorMessage | translate }}</li>
+                </ul>
+            </mat-error>
+        </div>
+    </span>
+    <ng-template #elseEmptyValueBlock>
+        <span class="adf-textitem-default-value">{{ property.default | translate }}</span>
+    </ng-template>
+</div>
diff --git a/lib/core/card-view/card-view-textitem.component.scss b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.scss
similarity index 66%
rename from lib/core/card-view/card-view-textitem.component.scss
rename to lib/core/card-view/components/card-view-textitem/card-view-textitem.component.scss
index a803682fad..58b5209f1c 100644
--- a/lib/core/card-view/card-view-textitem.component.scss
+++ b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.scss
@@ -30,23 +30,46 @@
         }
 
         &-textitem-editable {
-            display: flex;
 
-            mat-icon:hover {
-                opacity: 1;
-                cursor: pointer;
+            &-controls {
+                display: flex;
+
+                mat-icon:hover {
+                    opacity: 1;
+                    cursor: pointer;
+                }
+
+                mat-form-field {
+                    width: 100%;
+                }
+
+                input:focus,
+                textarea:focus {
+                    border: 1px solid mat-color($foreground, text, 0.15);
+                }
             }
 
-            mat-form-field {
-                width: 100%;
-            }
+            &-error {
+                font-size: 12px;
+                padding-top: 4px;
 
-            input:focus,
-            textarea:focus {
-                border: 1px solid mat-color($foreground, text, 0.15);
+                ul {
+                    margin: 0;
+                    padding: 0;
+                    list-style-type: none;
+
+                    li {
+                        margin: 0;
+                        padding: 0;
+                    }
+                }
             }
         }
 
+        &-textitem-default-value {
+            color: mat-color($foreground, text, 0.54);
+        }
+
         &-textitem-editable .mat-input-wrapper {
             margin: 0;
             padding-bottom: 0;
@@ -67,7 +90,7 @@
         }
 
         &-textitem-editable .mat-input-placeholder {
-            top: 0;
+            top: 4px;
         }
 
         &-textitem-editable .mat-input-element {
diff --git a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts
new file mode 100644
index 0000000000..7aeee87c86
--- /dev/null
+++ b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts
@@ -0,0 +1,325 @@
+/*!
+ * @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 { HttpClientModule } from '@angular/common/http';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { MatDatepickerModule, MatIconModule, MatInputModule, MatNativeDateModule } from '@angular/material';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { CardViewTextItemModel } from '../../models/card-view-textitem.model';
+import { AppConfigService } from '../../../app-config/app-config.service';
+import { CardViewUpdateService } from '../../services/card-view-update.service';
+import { LogService } from '../../../services/log.service';
+import { TranslateLoaderService } from '../../../services/translate-loader.service';
+
+import { CardViewTextItemComponent } from './card-view-textitem.component';
+
+describe('CardViewTextItemComponent', () => {
+
+    let fixture: ComponentFixture<CardViewTextItemComponent>;
+    let component: CardViewTextItemComponent;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                HttpClientModule,
+                FormsModule,
+                NoopAnimationsModule,
+                MatDatepickerModule,
+                MatIconModule,
+                MatInputModule,
+                MatNativeDateModule,
+                TranslateModule.forRoot({
+                    loader: {
+                        provide: TranslateLoader,
+                        useClass: TranslateLoaderService
+                    }
+                })
+            ],
+            declarations: [
+                CardViewTextItemComponent
+            ],
+            providers: [
+                AppConfigService,
+                CardViewUpdateService,
+                LogService
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(CardViewTextItemComponent);
+        component = fixture.componentInstance;
+        component.property = new CardViewTextItemModel ({
+            label: 'Text label',
+            value: 'Lorem ipsum',
+            key: 'textkey',
+            default: 'FAKE-DEFAULT-KEY',
+            editable: false
+        });
+    });
+
+    afterEach(() => {
+        fixture.destroy();
+        TestBed.resetTestingModule();
+    });
+
+    describe('Rendering', () => {
+
+        it('should render the label and value', () => {
+            fixture.detectChanges();
+
+            let labelValue = fixture.debugElement.query(By.css('.adf-property-label'));
+            expect(labelValue).not.toBeNull();
+            expect(labelValue.nativeElement.innerText).toBe('Text label');
+
+            let value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-${component.property.key}"]`));
+            expect(value).not.toBeNull();
+            expect(value.nativeElement.innerText.trim()).toBe('Lorem ipsum');
+        });
+
+        it('should NOT render the default as value if the value is empty, editable is false and displayEmpty is false', () => {
+            component.property = new CardViewTextItemModel ({
+                label: 'Text label',
+                value: '',
+                key: 'textkey',
+                default: 'FAKE-DEFAULT-KEY',
+                editable: false
+            });
+            component.displayEmpty = false;
+            fixture.detectChanges();
+
+            let value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-${component.property.key}"]`));
+            expect(value).not.toBeNull();
+            expect(value.nativeElement.innerText.trim()).toBe('');
+        });
+
+        it('should render the default as value if the value is empty, editable is false and displayEmpty is true', () => {
+            component.property = new CardViewTextItemModel ({
+                label: 'Text label',
+                value: '',
+                key: 'textkey',
+                default: 'FAKE-DEFAULT-KEY',
+                editable: false
+            });
+            component.displayEmpty = true;
+            fixture.detectChanges();
+
+            let value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-${component.property.key}"]`));
+            expect(value).not.toBeNull();
+            expect(value.nativeElement.innerText.trim()).toBe('FAKE-DEFAULT-KEY');
+        });
+
+        it('should render the default as value if the value is empty and editable true', () => {
+            component.property = new CardViewTextItemModel ({
+                label: 'Text label',
+                value: '',
+                key: 'textkey',
+                default: 'FAKE-DEFAULT-KEY',
+                editable: true
+            });
+            component.editable = true;
+            fixture.detectChanges();
+
+            let value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-${component.property.key}"]`));
+            expect(value).not.toBeNull();
+            expect(value.nativeElement.innerText.trim()).toBe('FAKE-DEFAULT-KEY');
+        });
+
+        it('should NOT render the default as value if the value is empty, clickable is false and displayEmpty is false', () => {
+            component.property = new CardViewTextItemModel ({
+                label: 'Text label',
+                value: '',
+                key: 'textkey',
+                default: 'FAKE-DEFAULT-KEY',
+                clickable: false
+            });
+            component.displayEmpty = false;
+            fixture.detectChanges();
+
+            let value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-${component.property.key}"]`));
+            expect(value).not.toBeNull();
+            expect(value.nativeElement.innerText.trim()).toBe('');
+        });
+
+        it('should render the default as value if the value is empty, clickable is false and displayEmpty is true', () => {
+            component.property = new CardViewTextItemModel ({
+                label: 'Text label',
+                value: '',
+                key: 'textkey',
+                default: 'FAKE-DEFAULT-KEY',
+                clickable: false
+            });
+            component.displayEmpty = true;
+            fixture.detectChanges();
+
+            let value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-${component.property.key}"]`));
+            expect(value).not.toBeNull();
+            expect(value.nativeElement.innerText.trim()).toBe('FAKE-DEFAULT-KEY');
+        });
+
+        it('should render the default as value if the value is empty and clickable true', () => {
+            component.property = new CardViewTextItemModel ({
+                label: 'Text label',
+                value: '',
+                key: 'textkey',
+                default: 'FAKE-DEFAULT-KEY',
+                clickable: true
+            });
+            fixture.detectChanges();
+
+            let value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-${component.property.key}"]`));
+            expect(value).not.toBeNull();
+            expect(value.nativeElement.innerText.trim()).toBe('FAKE-DEFAULT-KEY');
+        });
+
+        it('should render value when editable:true', () => {
+            component.editable = true;
+            component.property.editable = true;
+            fixture.detectChanges();
+
+            let value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-${component.property.key}"]`));
+            expect(value).not.toBeNull();
+            expect(value.nativeElement.innerText.trim()).toBe('Lorem ipsum');
+        });
+
+        it('should render the edit icon in case of editable:true', () => {
+            component.editable = true;
+            component.property.editable = true;
+            fixture.detectChanges();
+
+            let editIcon = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-icon-${component.property.key}"]`));
+            expect(editIcon).not.toBeNull('Edit icon should be shown');
+        });
+
+        it('should NOT render the edit icon in case of editable:false', () => {
+            component.editable = false;
+            fixture.detectChanges();
+
+            let editIcon = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-icon-${component.property.key}"]`));
+            expect(editIcon).toBeNull('Edit icon should NOT be shown');
+        });
+
+        it('should NOT render the picker and toggle in case of editable:true but (general) editable:false', () => {
+            component.editable = false;
+            component.property.editable = true;
+            fixture.detectChanges();
+
+            let editIcon = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-icon-${component.property.key}"]`));
+            expect(editIcon).toBeNull('Edit icon should NOT be shown');
+        });
+    });
+
+    describe('Update', () => {
+
+        beforeEach(() => {
+            component.editable = true;
+            component.property.editable = true;
+            component.inEdit = true;
+            component.editedValue = 'updated-value';
+            fixture.detectChanges();
+        });
+
+        it('should call the isValid method with the edited value', () => {
+            spyOn(component.property, 'isValid');
+            component.editedValue = 'updated-value';
+
+            component.update();
+
+            expect(component.property.isValid).toHaveBeenCalledWith('updated-value');
+        });
+
+        it('should trigger the update event if the editedValue is valid', () => {
+            component.property.isValid = () => true;
+            const cardViewUpdateService = TestBed.get(CardViewUpdateService);
+            spyOn(cardViewUpdateService, 'update');
+            component.editedValue = 'updated-value';
+
+            component.update();
+
+            expect(cardViewUpdateService.update).toHaveBeenCalledWith(component.property, 'updated-value');
+        });
+
+        it('should NOT trigger the update event if the editedValue is invalid', () => {
+            component.property.isValid = () => false;
+            const cardViewUpdateService = TestBed.get(CardViewUpdateService);
+            spyOn(cardViewUpdateService, 'update');
+
+            component.update();
+
+            expect(cardViewUpdateService.update).not.toHaveBeenCalled();
+        });
+
+        it('should set the errorMessages properly if the editedValue is invalid', () => {
+            const expectedErrorMessages = ['Something went wrong'];
+            component.property.isValid = () => false;
+            component.property.getValidationErrors = () => expectedErrorMessages;
+
+            component.update();
+
+            expect(component.errorMessages).toBe(expectedErrorMessages);
+        });
+
+        it('should update the propery\'s value after a succesful update attempt', async(() => {
+            component.property.isValid = () => true;
+            component.update();
+
+            fixture.whenStable().then(() => {
+                expect(component.property.value).toBe(component.editedValue);
+            });
+        }));
+
+        it('should switch back to readonly mode after an update attempt', async(() => {
+            component.property.isValid = () => true;
+            component.update();
+
+            fixture.whenStable().then(() => {
+                expect(component.inEdit).toBeFalsy();
+            });
+        }));
+
+        it('should trigger an update event on the CardViewUpdateService [integration]', (done) => {
+            component.inEdit = false;
+            component.property.isValid = () => true;
+            const cardViewUpdateService = TestBed.get(CardViewUpdateService);
+            const expectedText = 'changed text';
+            fixture.detectChanges();
+
+            cardViewUpdateService.itemUpdated$.subscribe(
+                (updateNotification) => {
+                    expect(updateNotification.target).toBe(component.property);
+                    expect(updateNotification.changed).toEqual({ textkey: expectedText });
+                    done();
+                }
+            );
+
+            let editIcon = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-toggle-${component.property.key}"]`));
+            editIcon.triggerEventHandler('click', null);
+            fixture.detectChanges();
+
+            let editInput = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-editinput-${component.property.key}"]`));
+            editInput.nativeElement.value = expectedText;
+            editInput.nativeElement.dispatchEvent(new Event('input'));
+            fixture.detectChanges();
+
+            let updateInput = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-update-${component.property.key}"]`));
+            updateInput.triggerEventHandler('click', null);
+        });
+    });
+});
diff --git a/lib/core/card-view/card-view-textitem.component.ts b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts
similarity index 63%
rename from lib/core/card-view/card-view-textitem.component.ts
rename to lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts
index 6e9aea1826..015aebca63 100644
--- a/lib/core/card-view/card-view-textitem.component.ts
+++ b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts
@@ -16,8 +16,8 @@
  */
 
 import { Component, Input, OnChanges, ViewChild } from '@angular/core';
-import { CardViewTextItemModel } from '../models/card-view-textitem.model';
-import { CardViewUpdateService } from '../services/card-view-update.service';
+import { CardViewTextItemModel } from '../../models/card-view-textitem.model';
+import { CardViewUpdateService } from '../../services/card-view-update.service';
 
 @Component({
     selector: 'adf-card-view-textitem',
@@ -29,32 +29,46 @@ export class CardViewTextItemComponent implements OnChanges {
     property: CardViewTextItemModel;
 
     @Input()
-    editable: boolean;
+    editable: boolean = false;
+
+    @Input()
+    displayEmpty: boolean = true;
 
     @ViewChild('editorInput')
     private editorInput: any;
 
     inEdit: boolean = false;
     editedValue: string;
+    errorMessages: string[];
 
     constructor(private cardViewUpdateService: CardViewUpdateService) {}
 
-    ngOnChanges() {
+    ngOnChanges(): void {
         this.editedValue = this.property.value;
     }
 
-    isEditble() {
+    showProperty(): boolean {
+        return this.displayEmpty || !this.property.isEmpty();
+    }
+
+    isEditable(): boolean {
         return this.editable && this.property.editable;
     }
 
-    isClickable() {
+    isClickable(): boolean {
         return this.property.clickable;
     }
 
+    hasErrors(): number {
+        return this.errorMessages && this.errorMessages.length;
+    }
+
     setEditMode(editStatus: boolean): void {
         this.inEdit = editStatus;
         setTimeout(() => {
-            this.editorInput.nativeElement.click();
+            if (this.editorInput) {
+                this.editorInput.nativeElement.click();
+            }
         }, 0);
     }
 
@@ -64,9 +78,13 @@ export class CardViewTextItemComponent implements OnChanges {
     }
 
     update(): void {
-        this.cardViewUpdateService.update(this.property, this.editedValue );
-        this.property.value = this.editedValue;
-        this.setEditMode(false);
+        if (this.property.isValid(this.editedValue)) {
+            this.cardViewUpdateService.update(this.property, this.editedValue );
+            this.property.value = this.editedValue;
+            this.setEditMode(false);
+        } else {
+            this.errorMessages = this.property.getValidationErrors(this.editedValue);
+        }
     }
 
     clicked(): void {
diff --git a/lib/core/card-view/components/card-view.components.ts b/lib/core/card-view/components/card-view.components.ts
new file mode 100644
index 0000000000..3187f44ff6
--- /dev/null
+++ b/lib/core/card-view/components/card-view.components.ts
@@ -0,0 +1,23 @@
+/*!
+ * @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.
+ */
+
+export * from './card-view/card-view.component';
+export * from './card-view-boolitem/card-view-boolitem.component';
+export * from './card-view-dateitem/card-view-dateitem.component';
+export * from './card-view-item-dispatcher/card-view-item-dispatcher.component';
+export * from './card-view-mapitem/card-view-mapitem.component';
+export * from './card-view-textitem/card-view-textitem.component';
diff --git a/lib/core/card-view/components/card-view/card-view.component.html b/lib/core/card-view/components/card-view/card-view.component.html
new file mode 100644
index 0000000000..e362d0552f
--- /dev/null
+++ b/lib/core/card-view/components/card-view/card-view.component.html
@@ -0,0 +1,11 @@
+<div class="adf-property-list">
+    <div *ngFor="let property of properties">
+        <div [attr.data-automation-id]="'header-'+property.key" class="adf-property">
+            <adf-card-view-item-dispatcher
+                [property]="property"
+                [editable]="editable"
+                [displayEmpty]="displayEmpty">
+            </adf-card-view-item-dispatcher>
+        </div>
+    </div>
+</div>
diff --git a/lib/core/card-view/components/card-view/card-view.component.scss b/lib/core/card-view/components/card-view/card-view.component.scss
new file mode 100644
index 0000000000..04b07cbb11
--- /dev/null
+++ b/lib/core/card-view/components/card-view/card-view.component.scss
@@ -0,0 +1,22 @@
+
+@mixin adf-card-view-theme($theme) {
+    $primary: map-get($theme, primary);
+    $foreground: map-get($theme, foreground);
+
+    .adf-property-list {
+        .adf-property {
+            margin-bottom: 20px;
+
+            .adf-property-label {
+                font-size: 12px;
+                color: mat-color($foreground, text, 0.4);
+                word-wrap: break-word;
+            }
+
+            .adf-property-value {
+                font-size: 14px;
+                color: mat-color($foreground, text, 0.87);
+            }
+        }
+    }
+}
diff --git a/lib/core/card-view/card-view.component.spec.ts b/lib/core/card-view/components/card-view/card-view.component.spec.ts
similarity index 61%
rename from lib/core/card-view/card-view.component.spec.ts
rename to lib/core/card-view/components/card-view/card-view.component.spec.ts
index 03f28b6eed..6e6c351079 100644
--- a/lib/core/card-view/card-view.component.spec.ts
+++ b/lib/core/card-view/components/card-view/card-view.component.spec.ts
@@ -20,24 +20,26 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { HttpClientModule } from '@angular/common/http';
 import { FormsModule } from '@angular/forms';
 import { MatDatepickerModule, MatIconModule, MatInputModule, MatNativeDateModule } from '@angular/material';
+import { MatDatetimepickerModule, MatNativeDatetimeModule } from '@mat-datetimepicker/core';
 import { By } from '@angular/platform-browser';
 import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
 
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { AppConfigService } from '../app-config/app-config.service';
+import { AppConfigService } from '../../../app-config/app-config.service';
 
-import { CardViewDateItemModel } from '../models/card-view-dateitem.model';
-import { CardViewTextItemModel } from '../models/card-view-textitem.model';
-import { CardViewUpdateService } from '../services/card-view-update.service';
+import { CardViewDateItemModel } from '../../models/card-view-dateitem.model';
+import { CardViewTextItemModel } from '../../models/card-view-textitem.model';
+import { CardViewUpdateService } from '../../services/card-view-update.service';
 
-import { TranslateLoaderService } from '../services/translate-loader.service';
-import { CardViewContentProxyDirective } from './card-view-content-proxy.directive';
-import { CardViewDateItemComponent } from './card-view-dateitem.component';
-import { CardViewItemDispatcherComponent } from './card-view-item-dispatcher.component';
-import { CardViewTextItemComponent } from './card-view-textitem.component';
+import { TranslateLoaderService } from '../../../services/translate-loader.service';
+import { CardViewContentProxyDirective } from '../../directives/card-view-content-proxy.directive';
+import { CardViewDateItemComponent } from '../card-view-dateitem/card-view-dateitem.component';
+import { CardItemTypeService } from '../../services/card-item-types.service';
+import { CardViewItemDispatcherComponent } from '../card-view-item-dispatcher/card-view-item-dispatcher.component';
+import { CardViewTextItemComponent } from '../card-view-textitem/card-view-textitem.component';
 import { CardViewComponent } from './card-view.component';
 
-describe('AdfCardView', () => {
+describe('CardViewComponent', () => {
 
     let fixture: ComponentFixture<CardViewComponent>;
     let component: CardViewComponent;
@@ -50,6 +52,8 @@ describe('AdfCardView', () => {
                 MatIconModule,
                 MatInputModule,
                 MatNativeDateModule,
+                MatDatetimepickerModule,
+                MatNativeDatetimeModule,
                 FormsModule,
                 TranslateModule.forRoot({
                     loader: {
@@ -66,6 +70,7 @@ describe('AdfCardView', () => {
                 CardViewDateItemComponent
             ],
             providers: [
+                CardItemTypeService,
                 CardViewUpdateService,
                 AppConfigService
             ]
@@ -135,14 +140,42 @@ describe('AdfCardView', () => {
         });
     }));
 
-    it('should render the default value if the value is empty', async(() => {
+    it('should NOT render anything if the value is empty, not editable and displayEmpty is false', async(() => {
         component.properties = [new CardViewTextItemModel({
             label: 'My default label',
             value: null,
             default: 'default value',
-            key: 'some key'
+            key: 'some-key',
+            editable: false
         })];
+        component.editable = true;
+        component.displayEmpty = false;
         fixture.detectChanges();
+
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+
+            let labelValue = fixture.debugElement.query(By.css('.adf-property-label'));
+            expect(labelValue).toBeNull();
+
+            let value = fixture.debugElement.query(By.css('.adf-property-value'));
+            expect(value).not.toBeNull();
+            expect(value.nativeElement.innerText.trim()).toBe('');
+        });
+    }));
+
+    it('should render the default value if the value is empty, not editable and displayEmpty is true', async(() => {
+        component.properties = [new CardViewTextItemModel({
+            label: 'My default label',
+            value: null,
+            default: 'default value',
+            key: 'some-key',
+            editable: false
+        })];
+        component.editable = true;
+        component.displayEmpty = true;
+        fixture.detectChanges();
+
         fixture.whenStable().then(() => {
             fixture.detectChanges();
 
@@ -150,9 +183,34 @@ describe('AdfCardView', () => {
             expect(labelValue).not.toBeNull();
             expect(labelValue.nativeElement.innerText).toBe('My default label');
 
-            let value = fixture.debugElement.query(By.css('.adf-property-value'));
+            let value = fixture.debugElement.query(By.css('.adf-property-value [data-automation-id="card-textitem-value-some-key"]'));
             expect(value).not.toBeNull();
-            expect(value.nativeElement.innerText).toBe('default value');
+            expect(value.nativeElement.innerText.trim()).toBe('default value');
+        });
+    }));
+
+    it('should render the default value if the value is empty and is editable', async(() => {
+        component.properties = [new CardViewTextItemModel({
+            label: 'My default label',
+            value: null,
+            default: 'default value',
+            key: 'some-key',
+            editable: true
+        })];
+        component.editable = true;
+        component.displayEmpty = false;
+        fixture.detectChanges();
+
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+
+            let labelValue = fixture.debugElement.query(By.css('.adf-property-label'));
+            expect(labelValue).not.toBeNull();
+            expect(labelValue.nativeElement.innerText).toBe('My default label');
+
+            let value = fixture.debugElement.query(By.css('.adf-property-value [data-automation-id="card-textitem-value-some-key"]'));
+            expect(value).not.toBeNull();
+            expect(value.nativeElement.innerText.trim()).toBe('default value');
         });
     }));
 });
diff --git a/lib/core/card-view/card-view.component.ts b/lib/core/card-view/components/card-view/card-view.component.ts
similarity index 88%
rename from lib/core/card-view/card-view.component.ts
rename to lib/core/card-view/components/card-view/card-view.component.ts
index 06ef49d618..d945c61cc8 100644
--- a/lib/core/card-view/card-view.component.ts
+++ b/lib/core/card-view/components/card-view/card-view.component.ts
@@ -16,7 +16,7 @@
  */
 
 import { Component, Input } from '@angular/core';
-import { CardViewItem } from '../interface/card-view-item.interface';
+import { CardViewItem } from '../../interfaces/card-view-item.interface';
 
 @Component({
     selector: 'adf-card-view',
@@ -29,4 +29,7 @@ export class CardViewComponent {
 
     @Input()
     editable: boolean;
+
+    @Input()
+    displayEmpty: boolean = true;
 }
diff --git a/lib/core/card-view/card-view-content-proxy.directive.ts b/lib/core/card-view/directives/card-view-content-proxy.directive.ts
similarity index 100%
rename from lib/core/card-view/card-view-content-proxy.directive.ts
rename to lib/core/card-view/directives/card-view-content-proxy.directive.ts
diff --git a/lib/core/card-view/interfaces/card-view-boolitem-properties.interface.ts b/lib/core/card-view/interfaces/card-view-boolitem-properties.interface.ts
new file mode 100644
index 0000000000..99be6e2d78
--- /dev/null
+++ b/lib/core/card-view/interfaces/card-view-boolitem-properties.interface.ts
@@ -0,0 +1,23 @@
+/*!
+ * @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 { CardViewItemProperties } from './card-view-item-properties.interface';
+
+export interface CardViewBoolItemProperties extends CardViewItemProperties {
+    value: any;
+    default?: boolean;
+}
diff --git a/lib/core/card-view/interfaces/card-view-dateitem-properties.interface.ts b/lib/core/card-view/interfaces/card-view-dateitem-properties.interface.ts
new file mode 100644
index 0000000000..d96c22acaf
--- /dev/null
+++ b/lib/core/card-view/interfaces/card-view-dateitem-properties.interface.ts
@@ -0,0 +1,22 @@
+/*!
+ * @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 { CardViewItemProperties } from './card-view-item-properties.interface';
+
+export interface CardViewDateItemProperties extends CardViewItemProperties {
+    format?: string;
+}
diff --git a/lib/core/card-view/interfaces/card-view-item-properties.interface.ts b/lib/core/card-view/interfaces/card-view-item-properties.interface.ts
new file mode 100644
index 0000000000..7561d776bc
--- /dev/null
+++ b/lib/core/card-view/interfaces/card-view-item-properties.interface.ts
@@ -0,0 +1,28 @@
+/*!
+ * @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 { CardViewItemValidator } from './card-view-item-validator.interface';
+
+export interface CardViewItemProperties {
+    label: string;
+    value: any;
+    key: any;
+    default?: any;
+    editable?: boolean;
+    clickable?: boolean;
+    validators?: CardViewItemValidator[];
+}
diff --git a/lib/core/card-view/interfaces/card-view-item-validator.interface.ts b/lib/core/card-view/interfaces/card-view-item-validator.interface.ts
new file mode 100644
index 0000000000..78f0c7c498
--- /dev/null
+++ b/lib/core/card-view/interfaces/card-view-item-validator.interface.ts
@@ -0,0 +1,21 @@
+/*!
+ * @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.
+ */
+
+export interface CardViewItemValidator {
+    message: string;
+    isValid(value: any): boolean;
+}
diff --git a/lib/core/interface/card-view-item.interface.ts b/lib/core/card-view/interfaces/card-view-item.interface.ts
similarity index 96%
rename from lib/core/interface/card-view-item.interface.ts
rename to lib/core/card-view/interfaces/card-view-item.interface.ts
index b3496f234e..38cb44ade9 100644
--- a/lib/core/interface/card-view-item.interface.ts
+++ b/lib/core/card-view/interfaces/card-view-item.interface.ts
@@ -21,6 +21,6 @@ export interface CardViewItem {
     key: string;
     default?: any;
     type: string;
-    displayValue: string;
+    displayValue: any;
     editable?: boolean;
 }
diff --git a/lib/core/card-view/interfaces/card-view-textitem-pipe-property.interface.ts b/lib/core/card-view/interfaces/card-view-textitem-pipe-property.interface.ts
new file mode 100644
index 0000000000..e5284a5381
--- /dev/null
+++ b/lib/core/card-view/interfaces/card-view-textitem-pipe-property.interface.ts
@@ -0,0 +1,23 @@
+/*!
+ * @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 { PipeTransform } from '@angular/core';
+
+export interface CardViewTextItemPipeProperty {
+    pipe: PipeTransform;
+    params?: any[];
+}
diff --git a/lib/core/card-view/interfaces/card-view-textitem-properties.interface.ts b/lib/core/card-view/interfaces/card-view-textitem-properties.interface.ts
new file mode 100644
index 0000000000..5ceb9cfa42
--- /dev/null
+++ b/lib/core/card-view/interfaces/card-view-textitem-properties.interface.ts
@@ -0,0 +1,24 @@
+/*!
+ * @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 { CardViewItemProperties } from './card-view-item-properties.interface';
+import { CardViewTextItemPipeProperty } from './card-view-textitem-pipe-property.interface';
+
+export interface CardViewTextItemProperties extends CardViewItemProperties {
+    multiline?: boolean;
+    pipes?: CardViewTextItemPipeProperty[];
+}
diff --git a/lib/core/card-view/interfaces/card-view.interfaces.ts b/lib/core/card-view/interfaces/card-view.interfaces.ts
new file mode 100644
index 0000000000..a28204cf4c
--- /dev/null
+++ b/lib/core/card-view/interfaces/card-view.interfaces.ts
@@ -0,0 +1,24 @@
+/*!
+ * @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.
+ */
+
+export * from './card-view-item-properties.interface';
+export * from './card-view-item-validator.interface';
+export * from './card-view-item.interface';
+export * from './card-view-textitem-properties.interface';
+export * from './card-view-dateitem-properties.interface';
+export * from './card-view-boolitem-properties.interface';
+export * from './card-view-textitem-pipe-property.interface';
diff --git a/lib/core/card-view/models/card-view-baseitem.model.spec.ts b/lib/core/card-view/models/card-view-baseitem.model.spec.ts
new file mode 100644
index 0000000000..0ae5f559e9
--- /dev/null
+++ b/lib/core/card-view/models/card-view-baseitem.model.spec.ts
@@ -0,0 +1,85 @@
+/*!
+ * @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 { CardViewItemProperties } from '../interfaces/card-view.interfaces';
+import { CardViewBaseItemModel } from './card-view-baseitem.model';
+import { CardViewItemValidator } from '../interfaces/card-view.interfaces';
+
+class CarViewCustomItemModel extends CardViewBaseItemModel {}
+
+describe('CardViewBaseItemModel', () => {
+
+    let properties: CardViewItemProperties;
+
+    beforeEach(() => {
+        properties = {
+            label: 'Tribe',
+            value: 'Oseram',
+            key: 'tribe'
+        };
+    });
+
+    describe('isValid & Validation errors', () => {
+
+        it('should be true when no validators are set', () => {
+            const itemModel = new CarViewCustomItemModel(properties);
+
+            const isValid = itemModel.isValid(null);
+
+            expect(isValid).toBe(true);
+        });
+
+        it('should call the registered validators to validate', () => {
+            const validator1: CardViewItemValidator = { isValid: () => true, message: 'validator 1' };
+            const validator2: CardViewItemValidator = { isValid: () => true, message: 'validator 2' };
+            spyOn(validator1, 'isValid');
+            spyOn(validator2, 'isValid');
+            properties.validators = [ validator1, validator2 ];
+            const itemModel = new CarViewCustomItemModel(properties);
+
+            itemModel.isValid('test-against-this');
+
+            expect(validator1.isValid).toHaveBeenCalledWith('test-against-this');
+            expect(validator2.isValid).toHaveBeenCalledWith('test-against-this');
+        });
+
+        it('should return the registered validators\' common decision (case true)', () => {
+            const validator1: CardViewItemValidator = { isValid: () => true, message: 'validator 1' };
+            const validator2: CardViewItemValidator = { isValid: () => true, message: 'validator 2' };
+            properties.validators = [ validator1, validator2 ];
+            const itemModel = new CarViewCustomItemModel(properties);
+
+            const isValid = itemModel.isValid('test-against-this');
+
+            expect(isValid).toBe(true);
+            expect(itemModel.getValidationErrors('test-against-this')).toEqual([]);
+        });
+
+        it('should return the registered validators\' common decision (case false)', () => {
+            const validator1: CardViewItemValidator = { isValid: () => false, message: 'validator 1' };
+            const validator2: CardViewItemValidator = { isValid: () => true, message: 'validator 2' };
+            const validator3: CardViewItemValidator = { isValid: () => false, message: 'validator 3' };
+            properties.validators = [ validator1, validator2, validator3 ];
+            const itemModel = new CarViewCustomItemModel(properties);
+
+            const isValid = itemModel.isValid('test-against-this');
+
+            expect(isValid).toBe(false);
+            expect(itemModel.getValidationErrors('test-against-this')).toEqual(['validator 1', 'validator 3']);
+        });
+    });
+});
diff --git a/lib/core/models/card-view-baseitem.model.ts b/lib/core/card-view/models/card-view-baseitem.model.ts
similarity index 59%
rename from lib/core/models/card-view-baseitem.model.ts
rename to lib/core/card-view/models/card-view-baseitem.model.ts
index d4f2432796..beb5ecb68e 100644
--- a/lib/core/models/card-view-baseitem.model.ts
+++ b/lib/core/card-view/models/card-view-baseitem.model.ts
@@ -15,30 +15,16 @@
  * limitations under the License.
  */
 
-/**
- *
- * This object represent the basic structure of a card view.
- *
- *
- * @returns {CardViewBaseItemModel} .
- */
-
-export interface CardViewItemProperties {
-    label: string;
-    value: any;
-    key: any;
-    default?: string;
-    editable?: boolean;
-    clickable?: boolean;
-}
+import { CardViewItemProperties, CardViewItemValidator } from '../interfaces/card-view.interfaces';
 
 export abstract class CardViewBaseItemModel {
     label: string;
     value: any;
     key: any;
-    default: string;
+    default: any;
     editable: boolean;
     clickable: boolean;
+    validators?: CardViewItemValidator[];
 
     constructor(obj: CardViewItemProperties) {
         this.label = obj.label || '';
@@ -47,9 +33,30 @@ export abstract class CardViewBaseItemModel {
         this.default = obj.default;
         this.editable = !!obj.editable;
         this.clickable = !!obj.clickable;
+        this.validators = obj.validators || [];
     }
 
     isEmpty(): boolean {
         return this.value === undefined || this.value === null || this.value === '';
     }
+
+    isValid(newValue: any): boolean {
+        if (!this.validators.length) {
+            return true;
+        }
+
+        return this.validators
+            .map((validator) => validator.isValid(newValue))
+            .reduce((isValidUntilNow, isValid) => isValidUntilNow && isValid, true);
+    }
+
+    getValidationErrors(value): string[] {
+        if (!this.validators.length) {
+            return [];
+        }
+
+        return this.validators
+            .filter((validator) => !validator.isValid(value))
+            .map((validator) => validator.message);
+    }
 }
diff --git a/lib/core/card-view/models/card-view-boolitem.model.spec.ts b/lib/core/card-view/models/card-view-boolitem.model.spec.ts
new file mode 100644
index 0000000000..835423f0e4
--- /dev/null
+++ b/lib/core/card-view/models/card-view-boolitem.model.spec.ts
@@ -0,0 +1,88 @@
+/*!
+ * @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 { CardViewBoolItemModel } from './card-view-boolitem.model';
+import { CardViewBoolItemProperties } from '../interfaces/card-view.interfaces';
+
+describe('CardViewFloatItemModel', () => {
+
+    let properties: CardViewBoolItemProperties;
+
+    beforeEach(() => {
+        properties = {
+            label: 'Tribe',
+            value: undefined,
+            key: 'tribe'
+        };
+    });
+
+    it('true should be parsed as true', () => {
+        properties.value = true;
+        const itemModel = new CardViewBoolItemModel(properties);
+
+        expect(itemModel.value).toBe(true);
+    });
+
+    it('"true" should be parsed as true', () => {
+        properties.value = 'true';
+        const itemModel = new CardViewBoolItemModel(properties);
+
+        expect(itemModel.value).toBe(true);
+    });
+
+    it('1 should be parsed as true', () => {
+        properties.value = 1;
+        const itemModel = new CardViewBoolItemModel(properties);
+
+        expect(itemModel.value).toBe(true);
+    });
+
+    it('"1" should be parsed as true', () => {
+        properties.value = '1';
+        const itemModel = new CardViewBoolItemModel(properties);
+
+        expect(itemModel.value).toBe(true);
+    });
+
+    it('"false" should be parsed as false', () => {
+        properties.value = 'false';
+        const itemModel = new CardViewBoolItemModel(properties);
+
+        expect(itemModel.value).toBe(false);
+    });
+
+    it('false should be parsed as false', () => {
+        properties.value = 'false';
+        const itemModel = new CardViewBoolItemModel(properties);
+
+        expect(itemModel.value).toBe(false);
+    });
+
+    it('undefined should be parsed as false', () => {
+        properties.value = undefined;
+        const itemModel = new CardViewBoolItemModel(properties);
+
+        expect(itemModel.value).toBe(false);
+    });
+
+    it('null should be parsed as false', () => {
+        properties.value = null;
+        const itemModel = new CardViewBoolItemModel(properties);
+
+        expect(itemModel.value).toBe(false);
+    });
+});
diff --git a/lib/core/card-view/models/card-view-boolitem.model.ts b/lib/core/card-view/models/card-view-boolitem.model.ts
new file mode 100644
index 0000000000..aef558aac8
--- /dev/null
+++ b/lib/core/card-view/models/card-view-boolitem.model.ts
@@ -0,0 +1,43 @@
+/*!
+ * @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 { CardViewItem } from '../interfaces/card-view-item.interface';
+import { DynamicComponentModel } from '../../services/dynamic-component-mapper.service';
+import { CardViewBaseItemModel } from './card-view-baseitem.model';
+import { CardViewBoolItemProperties } from '../interfaces/card-view.interfaces';
+
+export class CardViewBoolItemModel extends CardViewBaseItemModel implements CardViewItem, DynamicComponentModel {
+    type: string = 'bool';
+    value: boolean = false;
+    default: boolean;
+
+    constructor(obj: CardViewBoolItemProperties) {
+        super(obj);
+
+        if (obj.value !== undefined) {
+            this.value = !!JSON.parse(obj.value);
+        }
+    }
+
+    get displayValue() {
+        if (this.isEmpty()) {
+            return this.default;
+        } else {
+            return this.value;
+        }
+    }
+}
diff --git a/lib/core/models/card-view-dateitem.model.ts b/lib/core/card-view/models/card-view-dateitem.model.ts
similarity index 66%
rename from lib/core/models/card-view-dateitem.model.ts
rename to lib/core/card-view/models/card-view-dateitem.model.ts
index 2ec89e66ac..efd303cc4a 100644
--- a/lib/core/models/card-view-dateitem.model.ts
+++ b/lib/core/card-view/models/card-view-dateitem.model.ts
@@ -15,30 +15,23 @@
  * limitations under the License.
  */
 
-/**
- *
- * This object represent the basic structure of a card view.
- *
- *
- * @returns {CardViewDateItemModel} .
- */
-
 import moment from 'moment-es6';
-import { CardViewItem } from '../interface/card-view-item.interface';
-import { DynamicComponentModel } from '../services/dynamic-component-mapper.service';
-import { CardViewBaseItemModel, CardViewItemProperties } from './card-view-baseitem.model';
-
-export interface CardViewDateItemProperties extends CardViewItemProperties {
-    format?: string;
-}
+import { CardViewItem } from '../interfaces/card-view-item.interface';
+import { DynamicComponentModel } from '../../services/dynamic-component-mapper.service';
+import { CardViewBaseItemModel } from './card-view-baseitem.model';
+import { CardViewDateItemProperties } from '../interfaces/card-view.interfaces';
 
 export class CardViewDateItemModel extends CardViewBaseItemModel implements CardViewItem, DynamicComponentModel {
     type: string = 'date';
-    format: string;
+    format: string = 'MMM DD YYYY';
 
     constructor(obj: CardViewDateItemProperties) {
         super(obj);
-        this.format = obj.format || 'MMM DD YYYY';
+
+        if (obj.format) {
+            this.format = obj.format;
+        }
+
     }
 
     get displayValue() {
diff --git a/lib/core/card-view/models/card-view-datetimeitem.model.ts b/lib/core/card-view/models/card-view-datetimeitem.model.ts
new file mode 100644
index 0000000000..bef5c813f3
--- /dev/null
+++ b/lib/core/card-view/models/card-view-datetimeitem.model.ts
@@ -0,0 +1,25 @@
+/*!
+ * @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 { CardViewItem } from '../interfaces/card-view-item.interface';
+import { DynamicComponentModel } from '../../services/dynamic-component-mapper.service';
+import { CardViewDateItemModel } from './card-view-dateitem.model';
+
+export class CardViewDatetimeItemModel extends CardViewDateItemModel implements CardViewItem, DynamicComponentModel {
+    type: string = 'datetime';
+    format: string = 'MMM DD YYYY HH:mm';
+}
diff --git a/lib/core/card-view/models/card-view-floatitem.model.spec.ts b/lib/core/card-view/models/card-view-floatitem.model.spec.ts
new file mode 100644
index 0000000000..7a47f6e6d6
--- /dev/null
+++ b/lib/core/card-view/models/card-view-floatitem.model.spec.ts
@@ -0,0 +1,59 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CardViewFloatItemModel } from './card-view-floatitem.model';
+import { CardViewTextItemProperties } from '../interfaces/card-view.interfaces';
+
+describe('CardViewFloatItemModel', () => {
+
+    let properties: CardViewTextItemProperties;
+
+    beforeEach(() => {
+        properties = {
+            label: 'Tribe',
+            value: '42.42',
+            key: 'tribe'
+        };
+    });
+
+    it('value should be parsed as float', () => {
+        const itemModel = new CardViewFloatItemModel(properties);
+
+        expect(itemModel.value).toBe(42.42);
+    });
+
+    it('value should be parsed as float only if there is a value', () => {
+        properties.value = undefined;
+        const itemModel = new CardViewFloatItemModel(properties);
+
+        expect(itemModel.value).toBe(undefined);
+    });
+
+    it('isValid should return the validator\'s value', () => {
+        const itemModel = new CardViewFloatItemModel(properties);
+
+        expect(itemModel.isValid(42)).toBe(true, 'For 42 it should be true');
+        expect(itemModel.isValid(42.0)).toBe(true, 'For 42.0 it should be true');
+        expect(itemModel.isValid('42')).toBe(true, 'For "42" it should be true');
+        expect(itemModel.isValid('42.0')).toBe(true, 'For "42.0" it should be true');
+        expect(itemModel.isValid('4e2')).toBe(true, 'For "4e2" it should be true');
+        expect(itemModel.isValid('4g2')).toBe(false, 'For "4g2" it should be false');
+        expect(itemModel.isValid(42.3)).toBe(true, 'For 42.3 it should be true');
+        expect(itemModel.isValid('42.3')).toBe(true, 'For "42.3" it should be true');
+        expect(itemModel.isValid('test')).toBe(false, 'For "test" it should be false');
+    });
+});
diff --git a/lib/core/card-view/models/card-view-floatitem.model.ts b/lib/core/card-view/models/card-view-floatitem.model.ts
new file mode 100644
index 0000000000..a302f25a96
--- /dev/null
+++ b/lib/core/card-view/models/card-view-floatitem.model.ts
@@ -0,0 +1,35 @@
+/*!
+ * @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 { CardViewItem } from '../interfaces/card-view-item.interface';
+import { DynamicComponentModel } from '../../services/dynamic-component-mapper.service';
+import { CardViewTextItemModel } from './card-view-textitem.model';
+import { CardViewTextItemProperties } from '../interfaces/card-view.interfaces';
+import { CardViewItemFloatValidator } from '..//validators/card-view.validators';
+
+export class CardViewFloatItemModel extends CardViewTextItemModel implements CardViewItem, DynamicComponentModel {
+    type: string = 'float';
+
+    constructor(obj: CardViewTextItemProperties) {
+        super(obj);
+
+        this.validators.push(new CardViewItemFloatValidator());
+        if (obj.value) {
+            this.value = parseFloat(obj.value);
+        }
+    }
+}
diff --git a/lib/core/card-view/models/card-view-intitem.model.spec.ts b/lib/core/card-view/models/card-view-intitem.model.spec.ts
new file mode 100644
index 0000000000..f6e7ee818a
--- /dev/null
+++ b/lib/core/card-view/models/card-view-intitem.model.spec.ts
@@ -0,0 +1,59 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CardViewIntItemModel } from './card-view-intitem.model';
+import { CardViewTextItemProperties } from '../interfaces/card-view.interfaces';
+
+describe('CardViewIntItemModel', () => {
+
+    let properties: CardViewTextItemProperties;
+
+    beforeEach(() => {
+        properties = {
+            label: 'Tribe',
+            value: '42',
+            key: 'tribe'
+        };
+    });
+
+    it('value should be parsed as integer', () => {
+        const itemModel = new CardViewIntItemModel(properties);
+
+        expect(itemModel.value).toBe(42);
+    });
+
+    it('value should be parsed as integer only if there is a value', () => {
+        properties.value = undefined;
+        const itemModel = new CardViewIntItemModel(properties);
+
+        expect(itemModel.value).toBe(undefined);
+    });
+
+    it('isValid should return the validator\'s value', () => {
+        const itemModel = new CardViewIntItemModel(properties);
+
+        expect(itemModel.isValid(42)).toBe(true, 'For 42 it should be true');
+        expect(itemModel.isValid(42.0)).toBe(true, 'For 42.0 it should be true');
+        expect(itemModel.isValid('42')).toBe(true, 'For "42" it should be true');
+        expect(itemModel.isValid('42.0')).toBe(true, 'For "42.0" it should be true');
+        expect(itemModel.isValid('4e2')).toBe(true, 'For "4e2" it should be true');
+        expect(itemModel.isValid('4g2')).toBe(false, 'For "4g2" it should be false');
+        expect(itemModel.isValid(42.3)).toBe(false, 'For 42.3 it should be false');
+        expect(itemModel.isValid('42.3')).toBe(false, 'For "42.3" it should be false');
+        expect(itemModel.isValid('test')).toBe(false, 'For "test" it should be false');
+    });
+});
diff --git a/lib/core/card-view/models/card-view-intitem.model.ts b/lib/core/card-view/models/card-view-intitem.model.ts
new file mode 100644
index 0000000000..09f38b6738
--- /dev/null
+++ b/lib/core/card-view/models/card-view-intitem.model.ts
@@ -0,0 +1,35 @@
+/*!
+ * @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 { CardViewItem } from '../interfaces/card-view-item.interface';
+import { DynamicComponentModel } from '../../services/dynamic-component-mapper.service';
+import { CardViewTextItemModel } from './card-view-textitem.model';
+import { CardViewTextItemProperties } from '../interfaces/card-view.interfaces';
+import { CardViewItemIntValidator } from '../validators/card-view.validators';
+
+export class CardViewIntItemModel extends CardViewTextItemModel implements CardViewItem, DynamicComponentModel {
+    type: string = 'int';
+
+    constructor(obj: CardViewTextItemProperties) {
+        super(obj);
+
+        this.validators.push(new CardViewItemIntValidator());
+        if (obj.value) {
+            this.value = parseInt(obj.value, 10);
+        }
+    }
+}
diff --git a/lib/core/models/card-view-mapitem.model.ts b/lib/core/card-view/models/card-view-mapitem.model.ts
similarity index 69%
rename from lib/core/models/card-view-mapitem.model.ts
rename to lib/core/card-view/models/card-view-mapitem.model.ts
index 61fd04085d..5f0f52111f 100644
--- a/lib/core/models/card-view-mapitem.model.ts
+++ b/lib/core/card-view/models/card-view-mapitem.model.ts
@@ -15,26 +15,14 @@
  * limitations under the License.
  */
 
-/**
- *
- * This object represent the basic structure of a card view.
- *
- *
- * @returns {CardViewMapItemModel} .
- */
-
-import { CardViewItem } from '../interface/card-view-item.interface';
-import { DynamicComponentModel } from '../services/dynamic-component-mapper.service';
-import { CardViewBaseItemModel, CardViewItemProperties } from './card-view-baseitem.model';
+import { CardViewItem } from '../interfaces/card-view-item.interface';
+import { DynamicComponentModel } from '../../services/dynamic-component-mapper.service';
+import { CardViewBaseItemModel } from './card-view-baseitem.model';
 
 export class CardViewMapItemModel extends CardViewBaseItemModel implements CardViewItem, DynamicComponentModel {
     type: string = 'map';
     value: Map<string, string>;
 
-    constructor(obj: CardViewItemProperties) {
-        super(obj);
-    }
-
     get displayValue() {
         if (this.value && this.value.size > 0) {
             return this.value.values().next().value;
diff --git a/lib/core/models/card-view-textitem.model.spec.ts b/lib/core/card-view/models/card-view-textitem.model.spec.ts
similarity index 63%
rename from lib/core/models/card-view-textitem.model.spec.ts
rename to lib/core/card-view/models/card-view-textitem.model.spec.ts
index 240dc17803..2fa78b6db7 100644
--- a/lib/core/models/card-view-textitem.model.spec.ts
+++ b/lib/core/card-view/models/card-view-textitem.model.spec.ts
@@ -16,7 +16,8 @@
  */
 
 import { PipeTransform } from '@angular/core';
-import { CardViewTextItemModel, CardViewTextItemProperties } from './card-view-textitem.model';
+import { CardViewTextItemModel } from './card-view-textitem.model';
+import { CardViewTextItemProperties } from '../interfaces/card-view.interfaces';
 
 class TestPipe implements PipeTransform {
     transform(value: string, pipeParam: string): string {
@@ -39,28 +40,36 @@ describe('CardViewTextItemModel', () => {
 
     describe('displayValue', () => {
 
-        it('should return the extension if file has it', () => {
-            const file = new CardViewTextItemModel(properties);
+        it('should return the value if it is present', () => {
+            const itemModel = new CardViewTextItemModel(properties);
 
-            expect(file.displayValue).toBe('Banuk');
+            expect(itemModel.displayValue).toBe('Banuk');
+        });
+
+        it('should return the default value if the value is not present', () => {
+            properties.value = undefined;
+            properties.default = 'default-value';
+            const itemModel = new CardViewTextItemModel(properties);
+
+            expect(itemModel.displayValue).toBe('default-value');
         });
 
         it('should apply a pipe on the value if it is present', () => {
             properties.pipes = [
                 { pipe: new TestPipe() }
             ];
-            const file = new CardViewTextItemModel(properties);
+            const itemModel = new CardViewTextItemModel(properties);
 
-            expect(file.displayValue).toBe('testpiped-Banuk');
+            expect(itemModel.displayValue).toBe('testpiped-Banuk');
         });
 
         it('should apply a pipe on the value with parameters if those are present', () => {
             properties.pipes = [
                 { pipe: new TestPipe(), params: ['withParams'] }
             ];
-            const file = new CardViewTextItemModel(properties);
+            const itemModel = new CardViewTextItemModel(properties);
 
-            expect(file.displayValue).toBe('testpiped-Banuk-withParams');
+            expect(itemModel.displayValue).toBe('testpiped-Banuk-withParams');
         });
 
         it('should apply more pipes on the value with parameters if those are present', () => {
@@ -70,9 +79,9 @@ describe('CardViewTextItemModel', () => {
                 { pipe, params: ['2'] },
                 { pipe, params: ['3'] }
             ];
-            const file = new CardViewTextItemModel(properties);
+            const itemModel = new CardViewTextItemModel(properties);
 
-            expect(file.displayValue).toBe('testpiped-testpiped-testpiped-Banuk-1-2-3');
+            expect(itemModel.displayValue).toBe('testpiped-testpiped-testpiped-Banuk-1-2-3');
         });
     });
 });
diff --git a/lib/core/models/card-view-textitem.model.ts b/lib/core/card-view/models/card-view-textitem.model.ts
similarity index 62%
rename from lib/core/models/card-view-textitem.model.ts
rename to lib/core/card-view/models/card-view-textitem.model.ts
index 48eea977dc..a30dfcabbe 100644
--- a/lib/core/models/card-view-textitem.model.ts
+++ b/lib/core/card-view/models/card-view-textitem.model.ts
@@ -15,31 +15,15 @@
  * limitations under the License.
  */
 
-/**
- *
- * This object represent the basic structure of a card view.
- *
- *
- * @returns {CardViewTextItemModel} .
- */
+import { CardViewItem } from '../interfaces/card-view-item.interface';
+import { DynamicComponentModel } from '../../services/dynamic-component-mapper.service';
+import { CardViewBaseItemModel } from './card-view-baseitem.model';
+import { CardViewTextItemPipeProperty, CardViewTextItemProperties } from '../interfaces/card-view.interfaces';
 
-import { PipeTransform } from '@angular/core';
-import { CardViewItem } from '../interface/card-view-item.interface';
-import { DynamicComponentModel } from '../services/dynamic-component-mapper.service';
-import { CardViewBaseItemModel, CardViewItemProperties } from './card-view-baseitem.model';
-
-export interface CardViewTextItemPipeProperty {
-    pipe: PipeTransform;
-    params?: Array<any>;
-}
-export interface CardViewTextItemProperties extends CardViewItemProperties {
-    multiline?: boolean;
-    pipes?: Array<CardViewTextItemPipeProperty>;
-}
 export class CardViewTextItemModel extends CardViewBaseItemModel implements CardViewItem, DynamicComponentModel {
     type: string = 'text';
     multiline?: boolean;
-    pipes?: Array<CardViewTextItemPipeProperty>;
+    pipes?: CardViewTextItemPipeProperty[];
 
     constructor(obj: CardViewTextItemProperties) {
         super(obj);
@@ -48,7 +32,11 @@ export class CardViewTextItemModel extends CardViewBaseItemModel implements Card
     }
 
     get displayValue() {
-        return this.applyPipes(this.value);
+        if (this.isEmpty()) {
+            return this.default;
+        } else {
+            return this.applyPipes(this.value);
+        }
     }
 
     private applyPipes(displayValue) {
diff --git a/lib/core/card-view/models/card-view.models.ts b/lib/core/card-view/models/card-view.models.ts
new file mode 100644
index 0000000000..0d16dc6552
--- /dev/null
+++ b/lib/core/card-view/models/card-view.models.ts
@@ -0,0 +1,25 @@
+/*!
+ * @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.
+ */
+
+export * from './card-view-baseitem.model';
+export * from './card-view-boolitem.model';
+export * from './card-view-dateitem.model';
+export * from './card-view-datetimeitem.model';
+export * from './card-view-floatitem.model';
+export * from './card-view-intitem.model';
+export * from './card-view-mapitem.model';
+export * from './card-view-textitem.model';
diff --git a/lib/core/card-view/public-api.ts b/lib/core/card-view/public-api.ts
index 14c9afc436..6d6b8d8bc0 100644
--- a/lib/core/card-view/public-api.ts
+++ b/lib/core/card-view/public-api.ts
@@ -15,9 +15,16 @@
  * limitations under the License.
  */
 
-export * from './card-view-content-proxy.directive';
-export * from './card-view-dateitem.component';
-export * from './card-view-item-dispatcher.component';
-export * from './card-view-mapitem.component';
-export * from './card-view-textitem.component';
-export * from './card-view.component';
+export {
+    CardViewComponent,
+    CardViewBoolItemComponent,
+    CardViewDateItemComponent,
+    CardViewMapItemComponent,
+    CardViewTextItemComponent
+} from './components/card-view.components';
+
+export * from './interfaces/card-view.interfaces';
+export * from './validators/card-view.validators';
+export * from './models/card-view.models';
+export * from './services/card-view.services';
+export * from './directives/card-view-content-proxy.directive';
diff --git a/lib/core/services/card-item-types.service.ts b/lib/core/card-view/services/card-item-types.service.ts
similarity index 59%
rename from lib/core/services/card-item-types.service.ts
rename to lib/core/card-view/services/card-item-types.service.ts
index 2b7d7e1866..e237d44005 100644
--- a/lib/core/services/card-item-types.service.ts
+++ b/lib/core/card-view/services/card-item-types.service.ts
@@ -16,10 +16,11 @@
  */
 
 import { Injectable, Type } from '@angular/core';
-import { CardViewDateItemComponent } from '../card-view/card-view-dateitem.component';
-import { CardViewMapItemComponent } from '../card-view/card-view-mapitem.component';
-import { CardViewTextItemComponent } from '../card-view/card-view-textitem.component';
-import { DynamicComponentMapper, DynamicComponentResolveFunction, DynamicComponentResolver } from '../services/dynamic-component-mapper.service';
+import { CardViewDateItemComponent } from '../components/card-view-dateitem/card-view-dateitem.component';
+import { CardViewMapItemComponent } from '../components/card-view-mapitem/card-view-mapitem.component';
+import { CardViewTextItemComponent } from '../components/card-view-textitem/card-view-textitem.component';
+import { CardViewBoolItemComponent } from '../components/card-view-boolitem/card-view-boolitem.component';
+import { DynamicComponentMapper, DynamicComponentResolveFunction, DynamicComponentResolver } from '../../services/dynamic-component-mapper.service';
 
 @Injectable()
 export class CardItemTypeService extends DynamicComponentMapper {
@@ -28,7 +29,11 @@ export class CardItemTypeService extends DynamicComponentMapper {
 
     protected types: { [key: string]: DynamicComponentResolveFunction } = {
         'text': DynamicComponentResolver.fromType(CardViewTextItemComponent),
+        'int': DynamicComponentResolver.fromType(CardViewTextItemComponent),
+        'float': DynamicComponentResolver.fromType(CardViewTextItemComponent),
         'date': DynamicComponentResolver.fromType(CardViewDateItemComponent),
+        'datetime': DynamicComponentResolver.fromType(CardViewDateItemComponent),
+        'bool': DynamicComponentResolver.fromType(CardViewBoolItemComponent),
         'map': DynamicComponentResolver.fromType(CardViewMapItemComponent)
     };
 }
diff --git a/lib/core/services/card-view-update.service.spec.ts b/lib/core/card-view/services/card-view-update.service.spec.ts
similarity index 100%
rename from lib/core/services/card-view-update.service.spec.ts
rename to lib/core/card-view/services/card-view-update.service.spec.ts
diff --git a/lib/core/services/card-view-update.service.ts b/lib/core/card-view/services/card-view-update.service.ts
similarity index 100%
rename from lib/core/services/card-view-update.service.ts
rename to lib/core/card-view/services/card-view-update.service.ts
diff --git a/lib/core/card-view/services/card-view.services.ts b/lib/core/card-view/services/card-view.services.ts
new file mode 100644
index 0000000000..a64e2fa0b5
--- /dev/null
+++ b/lib/core/card-view/services/card-view.services.ts
@@ -0,0 +1,19 @@
+/*!
+ * @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.
+ */
+
+export * from './card-item-types.service';
+export * from './card-view-update.service';
diff --git a/lib/core/card-view/validators/card-view-item-float.validator.ts b/lib/core/card-view/validators/card-view-item-float.validator.ts
new file mode 100644
index 0000000000..e1fe97ffa5
--- /dev/null
+++ b/lib/core/card-view/validators/card-view-item-float.validator.ts
@@ -0,0 +1,27 @@
+/*!
+ * @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 { CardViewItemValidator } from '../interfaces/card-view.interfaces';
+
+export class CardViewItemFloatValidator implements CardViewItemValidator {
+
+    message = 'CORE.CARDVIEW.VALIDATORS.FLOAT_VALIDATION_ERROR';
+
+    isValid(value: any): boolean {
+        return !isNaN(parseFloat(value)) && isFinite(value);
+    }
+}
diff --git a/lib/core/card-view/validators/card-view-item-int.validator.ts b/lib/core/card-view/validators/card-view-item-int.validator.ts
new file mode 100644
index 0000000000..962611551e
--- /dev/null
+++ b/lib/core/card-view/validators/card-view-item-int.validator.ts
@@ -0,0 +1,27 @@
+/*!
+ * @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 { CardViewItemValidator } from '../interfaces/card-view.interfaces';
+
+export class CardViewItemIntValidator implements CardViewItemValidator {
+
+    message = 'CORE.CARDVIEW.VALIDATORS.INT_VALIDATION_ERROR';
+
+    isValid(value: any): boolean {
+        return !isNaN(value) && (function(x) { return (x | 0) === x; })(parseFloat(value));
+    }
+}
diff --git a/lib/core/card-view/validators/card-view.validators.ts b/lib/core/card-view/validators/card-view.validators.ts
new file mode 100644
index 0000000000..a924d5da02
--- /dev/null
+++ b/lib/core/card-view/validators/card-view.validators.ts
@@ -0,0 +1,19 @@
+/*!
+ * @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.
+ */
+
+export * from './card-view-item-int.validator';
+export * from './card-view-item-float.validator';
diff --git a/lib/core/collapsable/accordion-group.component.ts b/lib/core/collapsable/accordion-group.component.ts
index c4b98a9bfb..939b29516b 100644
--- a/lib/core/collapsable/accordion-group.component.ts
+++ b/lib/core/collapsable/accordion-group.component.ts
@@ -31,21 +31,27 @@ export class AccordionGroupComponent implements OnDestroy {
     @ViewChild('contentWrapper')
     contentWrapper: any;
 
+    /** Title heading for the group. */
     @Input()
     heading: string;
 
+    /** The material design icon. */
     @Input()
     headingIcon: string;
 
+    /** Tooltip message to be shown for headingIcon */
     @Input()
     headingIconTooltip: string;
 
+    /** Should the (expanded) accordion icon be shown? */
     @Input()
     hasAccordionIcon: boolean = true;
 
+    /** Emitted when the heading is clicked. */
     @Output()
     headingClick: EventEmitter<any> = new EventEmitter<any>();
 
+    /** Is this group currently open? */
     @Input()
     set isOpen(value: boolean) {
         this._isOpen = value;
@@ -58,6 +64,7 @@ export class AccordionGroupComponent implements OnDestroy {
         return this._isOpen;
     }
 
+    /** Is this group currently selected? */
     @Input()
     set isSelected(value: boolean) {
         this._isSelected = value;
diff --git a/lib/core/context-menu/context-menu.directive.ts b/lib/core/context-menu/context-menu.directive.ts
index 75e2ca9042..ff5cb13f3c 100644
--- a/lib/core/context-menu/context-menu.directive.ts
+++ b/lib/core/context-menu/context-menu.directive.ts
@@ -15,6 +15,8 @@
  * limitations under the License.
  */
 
+/* tslint:disable:no-input-rename  */
+
 import { Directive, HostListener, Input } from '@angular/core';
 import { ContextMenuService } from './context-menu.service';
 
diff --git a/lib/core/core.module.ts b/lib/core/core.module.ts
index f55d0e1796..012c43d73c 100644
--- a/lib/core/core.module.ts
+++ b/lib/core/core.module.ts
@@ -41,6 +41,7 @@ import { ToolbarModule } from './toolbar/toolbar.module';
 import { UserInfoModule } from './userinfo/userinfo.module';
 import { ViewerModule } from './viewer/viewer.module';
 import { FormModule } from './form/form.module';
+import { SideBarActionModule } from './sidebar/sidebar-action.module';
 
 import { DirectiveModule } from './directives/directive.module';
 import { PipeModule } from './pipes/pipe.module';
@@ -55,6 +56,7 @@ export function createTranslateLoader(http: HttpClient, logService: LogService)
 @NgModule({
     imports: [
         ViewerModule,
+        SideBarActionModule,
         PipeModule,
         CommonModule,
         DirectiveModule,
@@ -113,6 +115,7 @@ export function createTranslateLoader(http: HttpClient, logService: LogService)
         HostSettingsModule,
         ServiceModule,
         ViewerModule,
+        SideBarActionModule,
         PipeModule,
         DirectiveModule,
         FormModule,
diff --git a/lib/core/data-column/data-column.component.ts b/lib/core/data-column/data-column.component.ts
index 175f387bc4..938bf1db9b 100644
--- a/lib/core/data-column/data-column.component.ts
+++ b/lib/core/data-column/data-column.component.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
- /* tslint:disable:component-selector  */
+ /* tslint:disable:component-selector no-input-rename  */
 
 import { Component, ContentChild, Input, OnInit, TemplateRef } from '@angular/core';
 
@@ -25,33 +25,44 @@ import { Component, ContentChild, Input, OnInit, TemplateRef } from '@angular/co
 })
 export class DataColumnComponent implements OnInit {
 
+    /** Data source key. Can be either a column/property key like `title`
+     *  or a property path like `createdBy.name`.
+     */
     @Input()
     key: string;
 
+    /** Value type for the column. Possible settings are 'text', 'image',
+     * 'date', 'fileSize' and 'location'.
+     */
     @Input()
     type: string = 'text';
 
+    /** Value format (if supported by the parent component), for example format of the date. */
     @Input()
     format: string;
 
+    /** Toggles ability to sort by this column, for example by clicking the column header. */
     @Input()
     sortable: boolean = true;
 
+    /** Display title of the column, typically used for column headers. You can use the
+     * i18n resource key to get it translated automatically.
+     */
     @Input()
     title: string = '';
 
     @ContentChild(TemplateRef)
     template: any;
 
+    /** Custom tooltip formatter function. */
     @Input()
     formatTooltip: Function;
 
-    /**
-     * Title to be used for screen readers.
-     */
+    /** Title to be used for screen readers. */
     @Input('sr-title')
     srTitle: string;
 
+    /** Additional CSS class to be applied to column (header and cells). */
     @Input('class')
     cssClass: string;
 
diff --git a/lib/core/datatable/components/datatable/datatable.component.scss b/lib/core/datatable/components/datatable/datatable.component.scss
index db7424270b..861858c4a8 100644
--- a/lib/core/datatable/components/datatable/datatable.component.scss
+++ b/lib/core/datatable/components/datatable/datatable.component.scss
@@ -120,6 +120,7 @@
             color: $data-table-header-color;
             padding-bottom: 8px;
             box-sizing: border-box;
+            white-space: nowrap;
 
             &.sortable {
                 @include no-select;
diff --git a/lib/core/datatable/components/datatable/datatable.component.ts b/lib/core/datatable/components/datatable/datatable.component.ts
index 993cd0ef35..50560ffe61 100644
--- a/lib/core/datatable/components/datatable/datatable.component.ts
+++ b/lib/core/datatable/components/datatable/datatable.component.ts
@@ -49,57 +49,82 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
     @ContentChild(DataColumnListComponent)
     columnList: DataColumnListComponent;
 
+    /* Data source for the table */
     @Input()
     data: DataTableAdapter;
 
+    /* The rows that the datatable will show */
     @Input()
     rows: any[] = [];
 
+    /* Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode,
+     * you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows.
+     */
     @Input()
     selectionMode: string = 'single'; // none|single|multiple
 
+    /* Toggles multiple row selection, which renders checkboxes at the beginning of each row */
     @Input()
     multiselect: boolean = false;
 
+    /* Toggles data actions column */
     @Input()
     actions: boolean = false;
 
+    /* Position of the actions dropdown menu. Can be "left" or "right". */
     @Input()
     actionsPosition: string = 'right'; // left|right
 
+    /* Fallback image for row where thumbnail is missing */
     @Input()
     fallbackThumbnail: string;
 
+    /* Toggles custom context menu for the component */
     @Input()
     contextMenu: boolean = false;
 
+    /* Toggle file drop support for rows (see Upload Directive for further details) */
     @Input()
     allowDropFiles: boolean = false;
 
+    /* The inline style to apply to every row. See
+     * [NgStyle](https://angular.io/docs/ts/latest/api/common/index/NgStyle-directive.html)
+     * docs for more details and usage examples.
+     */
     @Input()
     rowStyle: string;
 
+    /* The CSS class to apply to every row */
     @Input()
     rowStyleClass: string = '';
 
+    /* Toggles the header */
     @Input()
     showHeader: boolean = true;
 
+    /* Emitted when user clicks the row */
     @Output()
     rowClick = new EventEmitter<DataRowEvent>();
 
+    /* Emitted when user double-clicks the row */
     @Output()
     rowDblClick = new EventEmitter<DataRowEvent>();
 
+    /* Emitted before context menu is displayed for a row */
     @Output()
     showRowContextMenu = new EventEmitter<DataCellEvent>();
 
+    /* Emitted before actions menu is displayed for a row */
     @Output()
     showRowActionsMenu = new EventEmitter<DataCellEvent>();
 
+    /* Emitted when row action is executed by user */
     @Output()
     executeRowAction = new EventEmitter<DataRowActionEvent>();
 
+    /* Flag that indicates if the datatable is in loading state and needs to show the
+     * loading template (see the docs to learn how to configure a loading template).
+     */
     @Input()
     loading: boolean = false;
 
diff --git a/lib/core/datatable/components/datatable/filesize-cell.component.ts b/lib/core/datatable/components/datatable/filesize-cell.component.ts
index 4413ace72e..350be11fe9 100644
--- a/lib/core/datatable/components/datatable/filesize-cell.component.ts
+++ b/lib/core/datatable/components/datatable/filesize-cell.component.ts
@@ -15,12 +15,11 @@
  * limitations under the License.
  */
 
-import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { DataTableCellComponent } from './datatable-cell.component';
 
 @Component({
     selector: 'adf-filesize-cell',
-    changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
         <ng-container>
             <span [title]="tooltip">{{ value | adfFileSize }}</span>
diff --git a/lib/core/directives/highlight.directive.ts b/lib/core/directives/highlight.directive.ts
index 78a6db810c..875a87ae9e 100644
--- a/lib/core/directives/highlight.directive.ts
+++ b/lib/core/directives/highlight.directive.ts
@@ -15,6 +15,8 @@
  * limitations under the License.
  */
 
+/* tslint:disable:no-input-rename  */
+
 import { Directive, ElementRef, Input, Renderer } from '@angular/core';
 import { HighlightTransformService, HightlightTransformResult } from '../services/highlight-transform.service';
 
diff --git a/lib/core/directives/node-delete.directive.ts b/lib/core/directives/node-delete.directive.ts
index aa6b281ca4..92522be416 100644
--- a/lib/core/directives/node-delete.directive.ts
+++ b/lib/core/directives/node-delete.directive.ts
@@ -15,6 +15,8 @@
  * limitations under the License.
  */
 
+/* tslint:disable:no-input-rename  */
+
 import { Directive, ElementRef, EventEmitter, HostListener, Input, OnChanges, Output } from '@angular/core';
 import { MinimalNodeEntity, MinimalNodeEntryEntity } from 'alfresco-js-api';
 import { Observable } from 'rxjs/Observable';
diff --git a/lib/core/directives/node-favorite.directive.ts b/lib/core/directives/node-favorite.directive.ts
index 6044899f0b..bbebf938c7 100644
--- a/lib/core/directives/node-favorite.directive.ts
+++ b/lib/core/directives/node-favorite.directive.ts
@@ -15,6 +15,8 @@
  * limitations under the License.
  */
 
+/* tslint:disable:no-input-rename  */
+
 import { Directive, EventEmitter, HostListener, Input, OnChanges, Output } from '@angular/core';
 import { FavoriteBody, MinimalNodeEntity } from 'alfresco-js-api';
 import { Observable } from 'rxjs/Observable';
diff --git a/lib/core/directives/node-permission.directive.ts b/lib/core/directives/node-permission.directive.ts
index 0df5b49e87..9370d1d43b 100644
--- a/lib/core/directives/node-permission.directive.ts
+++ b/lib/core/directives/node-permission.directive.ts
@@ -15,6 +15,8 @@
  * limitations under the License.
  */
 
+/* tslint:disable:no-input-rename  */
+
 import { ChangeDetectorRef, Directive, ElementRef, Host, Inject, Input, OnChanges, Optional, Renderer2,  SimpleChanges } from '@angular/core';
 import { MinimalNodeEntity } from 'alfresco-js-api';
 import { ContentService } from './../services/content.service';
diff --git a/lib/core/directives/node-restore.directive.ts b/lib/core/directives/node-restore.directive.ts
index 2815233237..68839b7deb 100644
--- a/lib/core/directives/node-restore.directive.ts
+++ b/lib/core/directives/node-restore.directive.ts
@@ -15,6 +15,8 @@
  * limitations under the License.
  */
 
+/* tslint:disable:component-selector no-input-rename */
+
 import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core';
 import { Router } from '@angular/router';
 import { DeletedNodeEntry, DeletedNodesPaging, PathInfoEntity } from 'alfresco-js-api';
diff --git a/lib/core/directives/upload.directive.ts b/lib/core/directives/upload.directive.ts
index 35b25b1028..a0800e34cb 100644
--- a/lib/core/directives/upload.directive.ts
+++ b/lib/core/directives/upload.directive.ts
@@ -15,6 +15,8 @@
  * limitations under the License.
  */
 
+/* tslint:disable:no-input-rename  */
+
 import { Directive, ElementRef, HostListener, Input, NgZone, OnDestroy, OnInit, Renderer } from '@angular/core';
 import { FileInfo, FileUtils } from '../utils/file-utils';
 
diff --git a/lib/core/form/components/form-field/form-field.component.ts b/lib/core/form/components/form-field/form-field.component.ts
index fce62d13a8..3184697250 100644
--- a/lib/core/form/components/form-field/form-field.component.ts
+++ b/lib/core/form/components/form-field/form-field.component.ts
@@ -68,6 +68,10 @@ export class FormFieldComponent implements OnInit, OnDestroy {
     }
 
     ngOnInit() {
+        const w: any = window;
+        if (w.adf === undefined) {
+            w.adf = {};
+        }
         let originalField = this.getField();
         if (originalField) {
             let customTemplate = this.field.form.customFieldTemplates[originalField.type];
diff --git a/lib/core/form/components/form.component.html b/lib/core/form/components/form.component.html
index 7eb25440fe..19edbb04a6 100644
--- a/lib/core/form/components/form.component.html
+++ b/lib/core/form/components/form.component.html
@@ -2,7 +2,7 @@
     <ng-content select="[empty-form]">
     </ng-content>
 </div>
-<div *ngIf="hasForm()" class="{{form.className}}">
+<div *ngIf="hasForm()" class="{{form.className}} adf-form-container">
     <mat-card>
         <mat-card-header>
             <mat-card-title>
@@ -12,8 +12,7 @@
                             <mat-icon>refresh</mat-icon>
                         </button>
                     </div>
-                    <mat-icon>{{ form.isValid ? 'event_available' : 'event_busy' }}</mat-icon>
-                    <span>{{form.taskName}}</span>
+                    <span class="adf-form-title">{{form.taskName}}</span>
 
                 </h4>
             </mat-card-title>
@@ -29,9 +28,10 @@
                 </div>
             </div>
         </mat-card-content>
-        <mat-card-actions *ngIf="form.hasOutcomes()">
+        <mat-card-actions *ngIf="form.hasOutcomes()" class="adf-form-mat-card-actions">
             <!--[class.mdl-button--colored]="!outcome.isSystem"-->
-            <button *ngFor="let outcome of form.outcomes"
+            <button *ngFor="let outcome of form.outcomes" 
+                    [color]="getColorForOutcome(outcome.name)"
                     mat-button
                     [disabled]="!isOutcomeButtonEnabled(outcome)"
                     [class.adf-form-hide-button]="!isOutcomeButtonVisible(outcome, form.readOnly)"
diff --git a/lib/core/form/components/form.component.scss b/lib/core/form/components/form.component.scss
index 27ae3ec7fe..03ce48c359 100644
--- a/lib/core/form/components/form.component.scss
+++ b/lib/core/form/components/form.component.scss
@@ -1,44 +1,112 @@
-.adf {
-    &-form-container {
+@mixin adf-form-component-theme($theme) {
+
+    $config: mat-typography-config();
+
+    .adf {
+        &-form-container {
+            max-width: 100% !important;
+            max-height: 100% !important;
+    
+            & .mat-card {
+                padding: 16px 24px;
+                overflow: hidden;
+            }
+    
+            & .mat-card-header-text {
+                margin: 0px !important;
+            }
+    
+            & .mat-tab-body-content {
+                overflow: hidden;
+            }
+    
+            & .mat-tab-label {
+                font-size: mat-font-size($config, subheading-2);
+                line-height: mat-line-height($config, headline);
+                letter-spacing: -0.4px;
+                text-align: left;
+                color: rgba(0, 0, 0, 0.54);
+                text-transform: uppercase;
+            }
+    
+            & .mat-ink-bar {
+                height: 4px;
+            }
+    
+            & .mat-input-wrapper {
+                margin: 0px 12px 0px 0px;
+            }
+        }    
+    
+        &-form-title {
+            font-size: mat-font-size($alfresco-typography, title);
+        }
+    
+        &-form-debug-container {
+            padding: 10px;
+        }
+    
+        &-form-debug-container .debug-toggle-text {
+            padding-left: 15px;
+            cursor: pointer;
+        }
+    
+        &-form-debug-container .debug-toggle-text:hover {
+            font-weight: bold;
+        }
+    
+        &-form-reload-button {
+            position: absolute;
+            right: 12px;
+            top: 30px;
+        }
+    
+        &-form-hide-button {
+            display: none !important;
+        }
+    
+        &-task-title {
+            text-align: center
+        }
+    
+        &-label {
+            width: 32px;
+            height: 16px;
+            font-size: mat-font-size($config, caption);
+            line-height: mat-line-height($config, headline);
+            text-align: left;
+            white-space: nowrap;
+        }
+    
+        &-form-mat-card-actions {
+            float: right;
+            padding-bottom: 25px !important;
+            padding-right: 25px !important; 
+    
+            & .mat-button {
+                height: 36px;
+                border-radius: 5px;
+        
+            }
+    
+            & .mat-button-wrapper {
+                width: 58px;
+                height: 20px;
+                opacity: 0.54;
+                font-size: mat-font-size($config, body-2);
+                font-weight: bold;
+            }
+        }
+    }
+    
+    form-field {
         width: 100%;
-        min-height: 100px;
-        overflow: visible;
-    }
-
-    &-form-debug-container {
-        padding: 10px;
-    }
-
-    &-form-debug-container .debug-toggle-text {
-        padding-left: 15px;
-        cursor: pointer;
-    }
-
-    &-form-debug-container .debug-toggle-text:hover {
-        font-weight: bold;
-    }
-
-    &-form-reload-button {
-        position: absolute;
-        right: 0;
-        top: 0;
-    }
-
-    &-form-hide-button {
-        display: none;
-    }
-
-    &-task-title {
-        text-align: center
-    }
-}
-
-form-field {
-    width: 100%;
-
-    .mat-input-element {
-        font-size: 14px;
-        padding-top: 8px;
-        line-height: normal;
+    
+        .mat-input-element {
+            font-size: mat-font-size($config, body-2);
+            padding-top: 8px;
+            line-height: normal;
+        }
     }
+    
 }
diff --git a/lib/core/form/components/form.component.spec.ts b/lib/core/form/components/form.component.spec.ts
index 129991c477..b2a22b8260 100644
--- a/lib/core/form/components/form.component.spec.ts
+++ b/lib/core/form/components/form.component.spec.ts
@@ -77,6 +77,10 @@ describe('FormComponent', () => {
         expect(formComponent.isTitleEnabled()).toBeFalsy();
     });
 
+    it('should return primary color for complete button', () => {
+        expect(formComponent.getColorForOutcome('Complete')).toBe('primary');
+    });
+
     it('should not enable outcome button when model missing', () => {
         expect(formComponent.isOutcomeButtonVisible(null, false)).toBeFalsy();
     });
diff --git a/lib/core/form/components/form.component.ts b/lib/core/form/components/form.component.ts
index f80fba5620..f46d9fe807 100644
--- a/lib/core/form/components/form.component.ts
+++ b/lib/core/form/components/form.component.ts
@@ -38,6 +38,8 @@ export class FormComponent implements OnInit, OnChanges {
     static COMPLETE_OUTCOME_ID: string = '$complete';
     static START_PROCESS_OUTCOME_ID: string = '$startProcess';
     static CUSTOM_OUTCOME_ID: string = '$custom';
+    static COMPLETE_BUTTON_COLOR: string = 'primary';
+    static COMPLETE_OUTCOME_NAME: string ='Complete'
 
     @Input()
     form: FormModel;
@@ -138,6 +140,10 @@ export class FormComponent implements OnInit, OnChanges {
         return false;
     }
 
+    getColorForOutcome(outcomeName: string): string {
+        return outcomeName === FormComponent.COMPLETE_OUTCOME_NAME ? FormComponent.COMPLETE_BUTTON_COLOR : '';
+    }
+
     isOutcomeButtonEnabled(outcome: FormOutcomeModel): boolean {
         if (this.form.readOnly) {
             return false;
diff --git a/lib/core/form/components/form.component.visibility.spec.ts b/lib/core/form/components/form.component.visibility.spec.ts
index 59f201b417..8a5835c991 100644
--- a/lib/core/form/components/form.component.visibility.spec.ts
+++ b/lib/core/form/components/form.component.visibility.spec.ts
@@ -104,9 +104,9 @@ describe('FormComponent UI and visibiltiy', () => {
             const optTwo = fixture.debugElement.queryAll(By.css('[id="mat-option-2"]'));
             const optThree = fixture.debugElement.queryAll(By.css('[id="mat-option-3"]'));
 
-            expect(optOne[0].nativeElement.innerText).toEqual('united kingdom');
-            expect(optTwo[0].nativeElement.innerText).toEqual('italy');
-            expect(optThree[0].nativeElement.innerText).toEqual('france');
+            expect(optOne[0].nativeElement.innerText.trim()).toEqual('united kingdom');
+            expect(optTwo[0].nativeElement.innerText.trim()).toEqual('italy');
+            expect(optThree[0].nativeElement.innerText.trim()).toEqual('france');
 
             optTwo[0].nativeElement.click();
             fixture.detectChanges();
diff --git a/lib/core/form/components/widgets/amount/amount.widget.scss b/lib/core/form/components/widgets/amount/amount.widget.scss
index 397f665796..4e8ea42fbf 100644
--- a/lib/core/form/components/widgets/amount/amount.widget.scss
+++ b/lib/core/form/components/widgets/amount/amount.widget.scss
@@ -11,7 +11,7 @@
 
         .mat-input-prefix {
             position: absolute;
-            margin-top: 42px;
+            margin-top: 58px;
         }
 
         .mat-input-placeholder {
diff --git a/lib/core/form/components/widgets/attach/attach.widget.css b/lib/core/form/components/widgets/attach/attach.widget.css
deleted file mode 100644
index 8bb37584c6..0000000000
--- a/lib/core/form/components/widgets/attach/attach.widget.css
+++ /dev/null
@@ -1,15 +0,0 @@
-.attach-widget {
-    width:100%
-}
-
-.attach-widget__icon {
-    float: left;
-}
-
-.attach-widget__file {
-    margin-top: 4px;
-}
-
-.attach-widget__reset {
-    margin-top: 4px;
-}
diff --git a/lib/core/form/components/widgets/attach/attach.widget.html b/lib/core/form/components/widgets/attach/attach.widget.html
deleted file mode 100644
index ea31aecc0b..0000000000
--- a/lib/core/form/components/widgets/attach/attach.widget.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<div class="attach-widget {{field.className}}">
-    <label [attr.for]="field.id">{{field.name}}<span *ngIf="isRequired()">*</span></label>
-    <div>
-        <span *ngIf="hasFile()" class="attach-widget__file mdl-chip"><span class="mdl-chip__text">{{getLinkedFileName()}}</span></span>
-        <button #browseFile [disabled]="field.readOnly" (click)="showDialog();" class="mdl-button mdl-jsm-button mdl-js-ripple-effect attach-widget__browser">
-            <mat-icon>image</mat-icon>
-            Browse {{selectedFolderSiteName}}
-        </button>
-        <button *ngIf="hasFile" [disabled]="field.readOnly" (click)="reset(file);" class="mdl-button mdl-js-button mdl-js-ripple-effect attach-widget__reset">Clear</button>
-    </div>
-</div>
-
-<dialog class="mdl-dialog" #dialog>
-    <h4 class="mdl-dialog__title">Select content</h4>
-    <div class="mdl-dialog__content">
-        <ul class='mdl-list'>
-            <li class="mdl-list__item" *ngFor="let node of selectedFolderNodes">
-            <span class="mdl-list__item-primary-content" *ngIf="node.folder">
-            <mat-icon class="mdl-list__item-icon">folder</mat-icon>
-            <a (click)="selectFolder(node, $event)">{{node.title}}</a>
-            </span>
-            <span class="mdl-list__item-primary-content" *ngIf="!node.folder">
-            <mat-icon class="mdl-list__item-icon">description</mat-icon>
-            <a (click)="selectFile(node, $event)">{{node.title}}</a>
-            </span>
-            </li>
-        </ul>
-    </div>
-    <div class="mdl-dialog__actions">
-        <button type="button" (click)="cancel()" class="mdl-button close">Cancel</button>
-    </div>
-</dialog>
diff --git a/lib/core/form/components/widgets/attach/attach.widget.spec.ts b/lib/core/form/components/widgets/attach/attach.widget.spec.ts
deleted file mode 100644
index d1fb09e366..0000000000
--- a/lib/core/form/components/widgets/attach/attach.widget.spec.ts
+++ /dev/null
@@ -1,302 +0,0 @@
-/*!
- * @license
- * Copyright 2016 Alfresco Software, Ltd.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { Observable } from 'rxjs/Observable';
-import { ActivitiContentService } from '../../../services/activiti-alfresco.service';
-import { MaterialModule } from '../../../../material.module';
-import { ExternalContent } from '../core/external-content';
-import { ExternalContentLink } from '../core/external-content-link';
-import { FormFieldTypes } from '../core/form-field-types';
-import { ErrorWidgetComponent } from '../error/error.component';
-import { EcmModelService } from './../../../services/ecm-model.service';
-import { FormService } from './../../../services/form.service';
-import { FormFieldModel } from './../core/form-field.model';
-import { FormModel } from './../core/form.model';
-import { AttachWidgetComponent } from './attach.widget';
-
-describe('AttachWidgetComponent', () => {
-
-    let widget: AttachWidgetComponent;
-    let fixture: ComponentFixture<AttachWidgetComponent>;
-    let contentService: ActivitiContentService;
-
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-            imports: [
-                MaterialModule
-            ],
-            declarations: [
-                AttachWidgetComponent,
-                ErrorWidgetComponent
-            ],
-            providers: [
-                FormService,
-                EcmModelService,
-                ActivitiContentService
-            ]
-        }).compileComponents();
-    }));
-
-    beforeEach(() => {
-        fixture = TestBed.createComponent(AttachWidgetComponent);
-        contentService = TestBed.get(ActivitiContentService);
-
-        widget = fixture.componentInstance;
-    });
-
-    it('should require field value to check file', () => {
-        widget.field = null;
-        widget.ngOnInit();
-        expect(widget.hasFile()).toBeFalsy();
-
-        widget.field = new FormFieldModel(null, {
-            type: FormFieldTypes.UPLOAD,
-            value: null
-        });
-        widget.ngOnInit();
-        expect(widget.hasFile()).toBeFalsy();
-
-        widget.field = new FormFieldModel(null, {
-            type: FormFieldTypes.UPLOAD,
-            value: [{ name: 'file' }]
-        });
-        widget.ngOnInit();
-        expect(widget.hasFile()).toBeTruthy();
-    });
-
-    it('should setup with form field', () => {
-        let nodes: any = [{}];
-        spyOn(contentService, 'getAlfrescoNodes').and.returnValue(
-            Observable.create(observer => {
-                observer.next(nodes);
-                observer.complete();
-            })
-        );
-
-        let config = {
-            siteId: '<id>',
-            site: '<site>',
-            pathId: '<pathId>',
-            accountId: '<accountId>'
-        };
-
-        widget.field = new FormFieldModel(null, {
-            type: FormFieldTypes.UPLOAD,
-            params: {
-                fileSource: {
-                    selectedFolder: config
-                }
-            }
-        });
-        widget.ngOnInit();
-
-        expect(widget.selectedFolderSiteId).toBe(config.siteId);
-        expect(widget.selectedFolderSiteName).toBe(config.site);
-        expect(widget.selectedFolderPathId).toBe(config.pathId);
-        expect(widget.selectedFolderAccountId).toBe(config.accountId);
-        expect(widget.selectedFolderNodes).toEqual(nodes);
-    });
-
-    xit('should link file on select', () => {
-        let link = <ExternalContentLink> {};
-        spyOn(contentService, 'linkAlfrescoNode').and.returnValue(
-            Observable.create(observer => {
-                observer.next(link);
-                observer.complete();
-            })
-        );
-
-        widget.field = new FormFieldModel(null, {
-            type: FormFieldTypes.UPLOAD
-        });
-        widget.ngOnInit();
-
-        let node = <ExternalContent> {};
-        widget.selectFile(node, null);
-
-        expect(contentService.linkAlfrescoNode).toHaveBeenCalled();
-        expect(widget.selectedFile).toBe(node);
-        expect(widget.field.value).toEqual([link]);
-        expect(widget.field.json.value).toEqual([link]);
-        expect(widget.hasFile()).toBeTruthy();
-    });
-
-    it('should reset', () => {
-        widget.field = new FormFieldModel(new FormModel(), {
-            type: FormFieldTypes.UPLOAD,
-            value: [{ name: 'filename' }]
-        });
-
-        widget.reset();
-        expect(widget.hasFile()).toBeFalsy();
-        expect(widget.field.value).toBeNull();
-        expect(widget.field.json.value).toBeNull();
-        expect(widget.hasFile()).toBeFalsy();
-    });
-
-    it('should close dialog on cancel', () => {
-        let closed = false;
-        widget.dialog = {
-            nativeElement: {
-                close: function () {
-                    closed = true;
-                }
-            }
-        };
-        widget.cancel();
-        expect(closed).toBeTruthy();
-    });
-
-    xit('should show modal dialog', () => {
-        spyOn(contentService, 'getAlfrescoNodes').and.returnValue(
-            Observable.create(observer => {
-                observer.next([]);
-                observer.complete();
-            })
-        );
-
-        widget.field = new FormFieldModel(null, {
-            type: FormFieldTypes.UPLOAD,
-            params: {
-                fileSource: {
-                    selectedFolder: {}
-                }
-            }
-        });
-
-        let modalShown = false;
-        widget.dialog = {
-            nativeElement: {
-                showModal: function () {
-                    modalShown = true;
-                }
-            }
-        };
-
-        widget.showDialog();
-        expect(modalShown).toBeTruthy();
-    });
-
-    it('should select folder and load nodes', () => {
-        let nodes: any = [{}];
-        spyOn(contentService, 'getAlfrescoNodes').and.returnValue(
-            Observable.create(observer => {
-                observer.next(nodes);
-                observer.complete();
-            })
-        );
-
-        let node = <ExternalContent> { id: '<id>' };
-        widget.selectFolder(node, null);
-
-        expect(widget.selectedFolderPathId).toBe(node.id);
-        expect(widget.selectedFolderNodes).toEqual(nodes);
-    });
-
-    it('should get linked file name via local variable', () => {
-        widget.fileName = '<fileName>';
-        widget.selectedFile = null;
-        widget.field = null;
-        expect(widget.getLinkedFileName()).toBe(widget.fileName);
-    });
-
-    it('should get linked file name via selected file', () => {
-        widget.fileName = null;
-        widget.selectedFile = <ExternalContent> { title: '<title>' };
-        widget.field = null;
-        expect(widget.getLinkedFileName()).toBe(widget.selectedFile.title);
-    });
-
-    it('should get linked file name via form field', () => {
-        widget.fileName = null;
-        widget.selectedFile = null;
-
-        let name = '<file>';
-        widget.field = new FormFieldModel(null, {
-            type: FormFieldTypes.UPLOAD,
-            value: [{ name: name }]
-        });
-
-        expect(widget.getLinkedFileName()).toBe(name);
-    });
-
-    it('should require form field to setup file browser', () => {
-        widget.field = null;
-        widget.setupFileBrowser();
-
-        expect(widget.selectedFolderPathId).toBeUndefined();
-        expect(widget.selectedFolderAccountId).toBeUndefined();
-
-        const pathId = '<pathId>';
-        const accountId = '<accountId>';
-
-        widget.field = new FormFieldModel(null, {
-            type: FormFieldTypes.UPLOAD,
-            params: {
-                fileSource: {
-                    selectedFolder: {
-                        pathId: pathId,
-                        accountId: accountId
-                    }
-                }
-            }
-        });
-        widget.setupFileBrowser();
-        expect(widget.selectedFolderPathId).toBe(pathId);
-        expect(widget.selectedFolderAccountId).toBe(accountId);
-    });
-
-    it('should get external content nodes', () => {
-        let nodes: any = [{}];
-        spyOn(contentService, 'getAlfrescoNodes').and.returnValue(
-            Observable.create(observer => {
-                observer.next(nodes);
-                observer.complete();
-            })
-        );
-
-        const accountId = '<accountId>';
-        const pathId = '<pathId>';
-        widget.selectedFolderAccountId = accountId;
-        widget.selectedFolderPathId = pathId;
-        widget.getExternalContentNodes();
-
-        expect(contentService.getAlfrescoNodes).toHaveBeenCalledWith(accountId, pathId);
-        expect(widget.selectedFolderNodes).toEqual(nodes);
-    });
-
-    it('should handle error', (done) => {
-        let error = 'error';
-        spyOn(contentService, 'getAlfrescoNodes').and.returnValue(
-            Observable.throw(error)
-        );
-
-        widget.error.subscribe(() => {
-            done();
-        });
-
-        widget.getExternalContentNodes();
-    });
-
-    it('should require configured dialog to show modal', () => {
-        widget.dialog = null;
-        spyOn(widget, 'setupFileBrowser').and.stub();
-        spyOn(widget, 'getExternalContentNodes').and.stub();
-        expect(widget.showDialog()).toBeFalsy();
-    });
-});
diff --git a/lib/core/form/components/widgets/attach/attach.widget.ts b/lib/core/form/components/widgets/attach/attach.widget.ts
deleted file mode 100644
index 088a3c764c..0000000000
--- a/lib/core/form/components/widgets/attach/attach.widget.ts
+++ /dev/null
@@ -1,156 +0,0 @@
-/*!
- * @license
- * Copyright 2016 Alfresco Software, Ltd.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
- /* tslint:disable:component-selector  */
-
-import { Component, EventEmitter, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core';
-import { ActivitiContentService } from '../../../services/activiti-alfresco.service';
-import { ExternalContent } from '../core/external-content';
-import { ExternalContentLink } from '../core/external-content-link';
-import { FormFieldModel } from '../core/form-field.model';
-import { FormService } from './../../../services/form.service';
-import { baseHost , WidgetComponent } from './../widget.component';
-
-@Component({
-    selector: 'attach-widget',
-    templateUrl: './attach.widget.html',
-    styleUrls: ['./attach.widget.css'],
-    host: baseHost,
-    encapsulation: ViewEncapsulation.None
-})
-export class AttachWidgetComponent extends WidgetComponent implements OnInit {
-
-    selectedFolderPathId: string;
-    selectedFolderSiteId: string;
-    selectedFolderSiteName: string;
-    selectedFolderAccountId: string;
-    fileName: string;
-    selectedFolderNodes: [ExternalContent];
-    selectedFile: ExternalContent;
-
-    @Output()
-    fieldChanged: EventEmitter<FormFieldModel> = new EventEmitter<FormFieldModel>();
-
-    @Output()
-    error: EventEmitter<any> = new EventEmitter<any>();
-
-    @ViewChild('dialog')
-    dialog: any;
-
-    constructor(public formService: FormService,
-                private contentService: ActivitiContentService) {
-         super(formService);
-    }
-
-    ngOnInit() {
-        if (this.field) {
-            let params = this.field.params;
-
-            if (params &&
-                params.fileSource &&
-                params.fileSource.selectedFolder) {
-                this.selectedFolderSiteId = params.fileSource.selectedFolder.siteId;
-                this.selectedFolderSiteName = params.fileSource.selectedFolder.site;
-                this.setupFileBrowser();
-                this.getExternalContentNodes();
-            }
-        }
-    }
-
-    setupFileBrowser() {
-        if (this.field) {
-            let params = this.field.params;
-            this.selectedFolderPathId = params.fileSource.selectedFolder.pathId;
-            this.selectedFolderAccountId = params.fileSource.selectedFolder.accountId;
-        }
-    }
-
-    getLinkedFileName(): string {
-        let result = this.fileName;
-
-        if (this.selectedFile &&
-            this.selectedFile.title) {
-            result = this.selectedFile.title;
-        }
-        if (this.field &&
-            this.field.value &&
-            this.field.value.length > 0 &&
-            this.field.value[0].name) {
-            result = this.field.value[0].name;
-        }
-
-        return result;
-    }
-
-    getExternalContentNodes() {
-        this.contentService.getAlfrescoNodes(this.selectedFolderAccountId, this.selectedFolderPathId)
-            .subscribe(
-                nodes => this.selectedFolderNodes = nodes,
-                (err) => {
-                    this.error.emit(err);
-                }
-            );
-    }
-
-    selectFile(node: ExternalContent, $event: any) {
-        this.contentService.linkAlfrescoNode(this.selectedFolderAccountId, node, this.selectedFolderSiteId).subscribe(
-            (link: ExternalContentLink) => {
-                this.selectedFile = node;
-                this.field.value = [link];
-                this.field.json.value = [link];
-                this.closeDialog();
-                this.fieldChanged.emit(this.field);
-            }
-        );
-    }
-
-    selectFolder(node: ExternalContent, $event: any) {
-        this.selectedFolderPathId = node.id;
-        this.getExternalContentNodes();
-    }
-
-    showDialog(): boolean {
-        this.setupFileBrowser();
-        this.getExternalContentNodes();
-
-        if (this.dialog) {
-            // todo: show dialog
-            return true;
-        }
-        return false;
-    }
-
-    private closeDialog() {
-        if (this.dialog) {
-            this.dialog.nativeElement.close();
-        }
-    }
-
-    cancel() {
-        this.closeDialog();
-    }
-
-    reset() {
-        this.field.value = null;
-        this.field.json.value = null;
-    }
-
-    hasFile(): boolean {
-        return this.field && this.field.value;
-    }
-
-}
diff --git a/lib/core/form/components/widgets/checkbox/checkbox.widget.ts b/lib/core/form/components/widgets/checkbox/checkbox.widget.ts
index ad517c3513..a4ccf77b95 100644
--- a/lib/core/form/components/widgets/checkbox/checkbox.widget.ts
+++ b/lib/core/form/components/widgets/checkbox/checkbox.widget.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-/* tslint:disable:component-selector  */
+/* tslint:disable:component-selector no-input-rename */
 
 import { Component, ViewEncapsulation } from '@angular/core';
 import { WidgetVisibilityService } from '../../../services/widget-visibility.service';
diff --git a/lib/core/form/components/widgets/core/index.ts b/lib/core/form/components/widgets/core/index.ts
index 4cd936b504..daab3ca5ba 100644
--- a/lib/core/form/components/widgets/core/index.ts
+++ b/lib/core/form/components/widgets/core/index.ts
@@ -33,3 +33,5 @@ export * from './form-outcome-event.model';
 export * from './form-field-validator';
 export * from './content-link.model';
 export * from './error-message.model';
+export * from './external-content';
+export * from './external-content-link';
diff --git a/lib/core/form/components/widgets/dropdown/dropdown.widget.spec.ts b/lib/core/form/components/widgets/dropdown/dropdown.widget.spec.ts
index af675290c7..8fb63854bb 100644
--- a/lib/core/form/components/widgets/dropdown/dropdown.widget.spec.ts
+++ b/lib/core/form/components/widgets/dropdown/dropdown.widget.spec.ts
@@ -304,7 +304,7 @@ describe('DropdownWidgetComponent', () => {
                         fixture.detectChanges();
                         expect(element.querySelector('#dropdown-id')).not.toBeNull();
                         const option = fixture.debugElement.query(By.css('.mat-option')).nativeElement;
-                        expect(option.innerText).toEqual('FakeValue');
+                        expect(option.innerText.trim()).toEqual('FakeValue');
                     });
             }));
         });
diff --git a/lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.scss b/lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.scss
index 03c629d693..bc3f4779ff 100644
--- a/lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.scss
+++ b/lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.scss
@@ -19,6 +19,11 @@
     $dynamic-table-cell-top: $dynamic-table-card-padding / 2;
     $dynamic-table-drag-border: 1px dashed rgb(68, 138, 255);
 
+    dynamic-table-widget .adf-label {
+        width: auto;
+        height: auto;
+    }
+
     .adf {
 
         &-dynamic-table {
diff --git a/lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.spec.ts b/lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.spec.ts
index 5d2768492c..511af7a664 100644
--- a/lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.spec.ts
+++ b/lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.spec.ts
@@ -359,7 +359,7 @@ describe('DynamicTableWidgetComponent', () => {
 
             expect(element.querySelector('#dynamic-table-fake-dynamic-table')).not.toBeNull();
             expect(rowElement).not.toBeNull();
-            expect(rowElement.className).toBeFalsy();
+            expect(rowElement.className).not.toContain('adf-dynamic-table-widget__row-selected');
 
             let event: any = new Event('keyup');
             event.keyCode = 32;
@@ -368,7 +368,7 @@ describe('DynamicTableWidgetComponent', () => {
 
             fixture.whenStable().then(() => {
                 let selectedRow = element.querySelector('#fake-dynamic-table-row-0');
-                expect(selectedRow.className).toBe('adf-dynamic-table-widget__row-selected');
+                expect(selectedRow.className).toContain('adf-dynamic-table-widget__row-selected');
             });
         }));
 
diff --git a/lib/core/form/components/widgets/index.ts b/lib/core/form/components/widgets/index.ts
index d793a18cf5..3fa1231187 100644
--- a/lib/core/form/components/widgets/index.ts
+++ b/lib/core/form/components/widgets/index.ts
@@ -20,7 +20,6 @@ import { TabsWidgetComponent } from './tabs/tabs.widget';
 import { UnknownWidgetComponent } from './unknown/unknown.widget';
 
 import { AmountWidgetComponent } from './amount/amount.widget';
-import { AttachWidgetComponent } from './attach/attach.widget';
 import { CheckboxWidgetComponent } from './checkbox/checkbox.widget';
 import { DateWidgetComponent } from './date/date.widget';
 import { DisplayTextWidgetComponentComponent } from './display-text/display-text.widget';
@@ -63,7 +62,6 @@ export * from './hyperlink/hyperlink.widget';
 export * from './radio-buttons/radio-buttons.widget';
 export * from './display-text/display-text.widget';
 export * from './upload/upload.widget';
-export * from './attach/attach.widget';
 export * from './typeahead/typeahead.widget';
 export * from './functional-group/functional-group.widget';
 export * from './people/people.widget';
@@ -95,7 +93,6 @@ export const WIDGET_DIRECTIVES: any[] = [
     RadioButtonsWidgetComponent,
     DisplayTextWidgetComponentComponent,
     UploadWidgetComponent,
-    AttachWidgetComponent,
     TypeaheadWidgetComponent,
     FunctionalGroupWidgetComponent,
     PeopleWidgetComponent,
diff --git a/lib/core/form/components/widgets/number/number.widget.ts b/lib/core/form/components/widgets/number/number.widget.ts
index 513fd1833e..476f182328 100644
--- a/lib/core/form/components/widgets/number/number.widget.ts
+++ b/lib/core/form/components/widgets/number/number.widget.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
- /* tslint:disable:component-selector  */
+ /* tslint:disable:component-selector no-input-rename   */
 
 import { Component, ViewEncapsulation } from '@angular/core';
 import { FormService } from './../../../services/form.service';
diff --git a/lib/core/form/components/widgets/text/text-mask.component.ts b/lib/core/form/components/widgets/text/text-mask.component.ts
index 98474b9be1..c53f33f78e 100644
--- a/lib/core/form/components/widgets/text/text-mask.component.ts
+++ b/lib/core/form/components/widgets/text/text-mask.component.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
- /* tslint:disable: component-selector, no-use-before-declare  */
+ /* tslint:disable: component-selector no-use-before-declare no-input-rename  */
 
 import {
     Directive,
diff --git a/lib/core/form/components/widgets/upload-folder/upload-folder.widget.html b/lib/core/form/components/widgets/upload-folder/upload-folder.widget.html
new file mode 100644
index 0000000000..abe6ce2694
--- /dev/null
+++ b/lib/core/form/components/widgets/upload-folder/upload-folder.widget.html
@@ -0,0 +1,7 @@
+<div class="adf-upload-folder-widget {{field.className}}"
+    [class.adf-invalid]="!field.isValid"
+    [class.adf-readonly]="field.readOnly">
+<label class="adf-label" [attr.for]="field.id">{{field.name}}<span *ngIf="isRequired()">*</span></label>
+    <div class="adf-upload-widget-container">
+    </div>
+</div>
diff --git a/lib/core/form/components/widgets/upload-folder/upload-folder.widget.scss b/lib/core/form/components/widgets/upload-folder/upload-folder.widget.scss
new file mode 100644
index 0000000000..2dddb9ee90
--- /dev/null
+++ b/lib/core/form/components/widgets/upload-folder/upload-folder.widget.scss
@@ -0,0 +1,12 @@
+@import '../form';
+
+
+.adf {
+
+    &-upload-folder-widget {
+        width: 100%;
+        word-break: break-all;
+        padding: 0.4375em 0;
+        border-top: 0.84375em solid transparent;
+    }
+}
diff --git a/lib/core/form/components/widgets/upload-folder/upload-folder.widget.spec.ts b/lib/core/form/components/widgets/upload-folder/upload-folder.widget.spec.ts
new file mode 100644
index 0000000000..58ad8b656b
--- /dev/null
+++ b/lib/core/form/components/widgets/upload-folder/upload-folder.widget.spec.ts
@@ -0,0 +1,16 @@
+/*!
+ * @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.
+ */
diff --git a/lib/core/form/components/widgets/upload-folder/upload-folder.widget.ts b/lib/core/form/components/widgets/upload-folder/upload-folder.widget.ts
new file mode 100644
index 0000000000..31df392ea2
--- /dev/null
+++ b/lib/core/form/components/widgets/upload-folder/upload-folder.widget.ts
@@ -0,0 +1,150 @@
+/*!
+ * @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.
+ */
+
+/* tslint:disable:component-selector  */
+
+import { LogService } from '../../../../services/log.service';
+import { ThumbnailService } from '../../../../services/thumbnail.service';
+import { Component, ElementRef, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { FormService } from '../../../services/form.service';
+import { ProcessContentService } from '../../../services/process-content.service';
+import { ContentLinkModel } from '../core/content-link.model';
+import { baseHost, WidgetComponent } from './../widget.component';
+import 'rxjs/add/operator/mergeMap';
+
+@Component({
+    selector: 'upload-folder-widget',
+    templateUrl: './upload-folder.widget.html',
+    styleUrls: ['./upload-folder.widget.scss'],
+    host: baseHost,
+    encapsulation: ViewEncapsulation.None
+})
+export class UploadFolderWidgetComponent extends WidgetComponent implements OnInit {
+
+    hasFile: boolean;
+    displayText: string;
+    multipleOption: string = '';
+    mimeTypeIcon: string;
+
+    @ViewChild('uploadFiles')
+    fileInput: ElementRef;
+
+    constructor(public formService: FormService,
+                private logService: LogService,
+                private thumbnailService: ThumbnailService,
+                public processContentService: ProcessContentService) {
+        super(formService);
+    }
+
+    ngOnInit() {
+        if (this.field &&
+            this.field.value &&
+            this.field.value.length > 0) {
+            this.hasFile = true;
+        }
+        this.getMultipleFileParam();
+    }
+
+    removeFile(file: any) {
+        if (this.field) {
+            this.removeElementFromList(file);
+        }
+    }
+
+    onFileChanged(event: any) {
+        let files = event.target.files;
+        let filesSaved = [];
+
+        if (this.field.json.value) {
+            filesSaved = [...this.field.json.value];
+        }
+
+        if (files && files.length > 0) {
+            Observable.from(files).mergeMap(file => this.uploadRawContent(file)).subscribe((res) => {
+                    filesSaved.push(res);
+                },
+                (error) => {
+                    this.logService.error('Error uploading file. See console output for more details.');
+                },
+                () => {
+                    this.field.value = filesSaved;
+                    this.field.json.value = filesSaved;
+                });
+
+            this.hasFile = true;
+        }
+    }
+
+    private uploadRawContent(file): Observable<any> {
+        return this.processContentService.createTemporaryRawRelatedContent(file)
+            .map((response: any) => {
+                this.logService.info(response);
+                return response;
+            });
+    }
+
+    private getMultipleFileParam() {
+        if (this.field &&
+            this.field.params &&
+            this.field.params.multiple) {
+            this.multipleOption = this.field.params.multiple ? 'multiple' : '';
+        }
+    }
+
+    private removeElementFromList(file) {
+        let index = this.field.value.indexOf(file);
+
+        if (index !== -1) {
+            this.field.value.splice(index, 1);
+            this.field.json.value = this.field.value;
+            this.field.updateForm();
+        }
+
+        this.hasFile = this.field.value.length > 0;
+
+        this.resetFormValueWithNoFiles();
+    }
+
+    private resetFormValueWithNoFiles() {
+        if (this.field.value.length === 0) {
+            this.field.value = [];
+            this.field.json.value = [];
+        }
+    }
+
+    getIcon(mimeType) {
+        return this.thumbnailService.getMimeTypeIcon(mimeType);
+    }
+
+    fileClicked(obj: any): void {
+        const file = new ContentLinkModel(obj);
+        let fetch = this.processContentService.getContentPreview(file.id);
+        if (file.isTypeImage() || file.isTypePdf()) {
+            fetch = this.processContentService.getFileRawContent(file.id);
+        }
+        fetch.subscribe(
+            (blob: Blob) => {
+                file.contentBlob = blob;
+                this.formService.formContentClicked.next(file);
+            },
+            (error) => {
+                this.logService.error('Unable to send event for file ' + file.name);
+            }
+        );
+    }
+}
diff --git a/lib/core/form/components/widgets/upload/upload.widget.ts b/lib/core/form/components/widgets/upload/upload.widget.ts
index fc4d195087..c6a50dee7f 100644
--- a/lib/core/form/components/widgets/upload/upload.widget.ts
+++ b/lib/core/form/components/widgets/upload/upload.widget.ts
@@ -98,7 +98,7 @@ export class UploadWidgetComponent extends WidgetComponent implements OnInit {
             });
     }
 
-    private getMultipleFileParam() {
+    getMultipleFileParam() {
         if (this.field &&
             this.field.params &&
             this.field.params.multiple) {
diff --git a/lib/core/form/public-api.ts b/lib/core/form/public-api.ts
index 5fa6d1cddf..bfc50da1cc 100644
--- a/lib/core/form/public-api.ts
+++ b/lib/core/form/public-api.ts
@@ -27,5 +27,6 @@ export * from './services/ecm-model.service';
 export * from './services/node.service';
 export * from './services/form-rendering.service';
 export * from './services/process-content.service';
+export * from './services/activiti-alfresco.service';
 
 export * from './events/index';
diff --git a/lib/core/form/services/activiti-alfresco.service.ts b/lib/core/form/services/activiti-alfresco.service.ts
index 4b1ae760bb..574bffbb83 100644
--- a/lib/core/form/services/activiti-alfresco.service.ts
+++ b/lib/core/form/services/activiti-alfresco.service.ts
@@ -18,7 +18,7 @@
 import { AlfrescoApiService } from '../../services/alfresco-api.service';
 import { LogService } from '../../services/log.service';
 import { Injectable } from '@angular/core';
-import { AlfrescoApi } from 'alfresco-js-api';
+import { AlfrescoApi, MinimalNodeEntryEntity } from 'alfresco-js-api';
 import { Observable } from 'rxjs/Observable';
 import { ExternalContent } from '../components/widgets/core/external-content';
 import { ExternalContentLink } from '../components/widgets/core/external-content-link';
@@ -49,6 +49,24 @@ export class ActivitiContentService {
             .catch(err => this.handleError(err));
     }
 
+    /**
+     * Returns a list of all the repositories configured
+     *
+     * @param accountId
+     * @param folderId
+     * @returns {any}
+     */
+    getAlfrescoRepositories(tenantId: number, includeAccount: boolean): Observable<any> {
+        let apiService: AlfrescoApi = this.apiService.getInstance();
+        const opts = {
+            tenantId: tenantId,
+            includeAccounts: includeAccount
+        };
+        return Observable.fromPromise(apiService.activiti.alfrescoApi.getRepositories(opts))
+            .map(this.toJsonArray)
+            .catch(err => this.handleError(err));
+    }
+
     /**
      * Returns a list of child nodes below the specified folder
      *
@@ -68,6 +86,20 @@ export class ActivitiContentService {
         })).map(this.toJson).catch(err => this.handleError(err));
     }
 
+    applyAlfrescoNode(node: MinimalNodeEntryEntity, siteId: string, accountId: string) {
+        let apiService: AlfrescoApi = this.apiService.getInstance();
+        let params: any = {
+            source: accountId,
+            sourceId: node.id + ';1.0@' + siteId,
+            name: node.name,
+            link: false
+        };
+        return Observable.fromPromise(
+                apiService.activiti.contentApi.createTemporaryRelatedContent(params))
+                    .map(this.toJson)
+                    .catch(err => this.handleError(err));
+    }
+
     toJson(res: any) {
         if (res) {
             return res || {};
diff --git a/lib/core/form/services/form-rendering.service.spec.ts b/lib/core/form/services/form-rendering.service.spec.ts
index eafb18e735..5f0a65ea4b 100644
--- a/lib/core/form/services/form-rendering.service.spec.ts
+++ b/lib/core/form/services/form-rendering.service.spec.ts
@@ -17,7 +17,6 @@
 
 import { DynamicComponentResolver } from '../../index';
 import {
-    AttachWidgetComponent,
     FormFieldModel,
     FormFieldTypes,
     UnknownWidgetComponent,
@@ -33,17 +32,6 @@ describe('FormRenderingService', () => {
         service = new FormRenderingService();
     });
 
-    it('should resolve Upload field as Attach widget', () => {
-        let field = new FormFieldModel(null, {
-            type: FormFieldTypes.UPLOAD,
-            params: {
-                link: 'link'
-            }
-        });
-        let type = service.resolveComponentType(field);
-        expect(type).toBe(AttachWidgetComponent);
-    });
-
     it('should resolve Upload field as Upload widget', () => {
         let field = new FormFieldModel(null, {
             type: FormFieldTypes.UPLOAD,
@@ -55,10 +43,10 @@ describe('FormRenderingService', () => {
         expect(type).toBe(UploadWidgetComponent);
     });
 
-    it('should resolve Unknown widget for Upload field', () => {
+    it('should resolve Upload widget for Upload field', () => {
         let resolver = service.getComponentTypeResolver(FormFieldTypes.UPLOAD);
         let type = resolver(null);
-        expect(type).toBe(UnknownWidgetComponent);
+        expect(type).toBe(UploadWidgetComponent);
     });
 
     it('should resolve Uknown widget for unknown field type', () => {
@@ -67,12 +55,6 @@ describe('FormRenderingService', () => {
         expect(type).toBe(UnknownWidgetComponent);
     });
 
-    it('shoulld resolve custom value for unknown field type', () => {
-        let resolver = service.getComponentTypeResolver('missing-type', AttachWidgetComponent);
-        let type = resolver(null);
-        expect(type).toBe(AttachWidgetComponent);
-    });
-
     it('should fallback to default resolver when field type missing', () => {
         let resolver = service.getComponentTypeResolver(null);
         let type = resolver(null);
@@ -123,7 +105,7 @@ describe('FormRenderingService', () => {
     });
 
     it('should return custom value when resolving with no field', () => {
-        expect(service.resolveComponentType(null, AttachWidgetComponent)).toBe(AttachWidgetComponent);
+        expect(service.resolveComponentType(null, UploadWidgetComponent)).toBe(UploadWidgetComponent);
     });
 
 });
diff --git a/lib/core/form/services/form-rendering.service.ts b/lib/core/form/services/form-rendering.service.ts
index 45c8346ea7..6ad1082e19 100644
--- a/lib/core/form/services/form-rendering.service.ts
+++ b/lib/core/form/services/form-rendering.service.ts
@@ -20,7 +20,6 @@ import { Injectable, Type } from '@angular/core';
 
 import {
     AmountWidgetComponent,
-    AttachWidgetComponent,
     CheckboxWidgetComponent,
     ContainerWidgetComponent,
     DateWidgetComponent,
@@ -28,7 +27,6 @@ import {
     DocumentWidgetComponent,
     DropdownWidgetComponent,
     DynamicTableWidgetComponent,
-    FormFieldModel,
     FunctionalGroupWidgetComponent,
     HyperlinkWidgetComponent,
     MultilineTextWidgetComponentComponent,
@@ -63,21 +61,11 @@ export class FormRenderingService extends DynamicComponentMapper {
         'dynamic-table': DynamicComponentResolver.fromType(DynamicTableWidgetComponent),
         'container': DynamicComponentResolver.fromType(ContainerWidgetComponent),
         'group': DynamicComponentResolver.fromType(ContainerWidgetComponent),
-        'document': DynamicComponentResolver.fromType(DocumentWidgetComponent)
+        'document': DynamicComponentResolver.fromType(DocumentWidgetComponent),
+        'upload':  DynamicComponentResolver.fromType(UploadWidgetComponent)
     };
 
     constructor() {
         super();
-
-        this.types['upload'] = (field: FormFieldModel): Type<{}> => {
-            if (field) {
-                let params = field.params;
-                if (params && params.link) {
-                    return AttachWidgetComponent;
-                }
-                return UploadWidgetComponent;
-            }
-            return UnknownWidgetComponent;
-        };
     }
 }
diff --git a/lib/core/i18n/de.json b/lib/core/i18n/de.json
index bca5c09460..38490c45d0 100644
--- a/lib/core/i18n/de.json
+++ b/lib/core/i18n/de.json
@@ -1,5 +1,39 @@
 {
+  "FORM": {
+    "START_FORM": {
+      "TITLE": "Startformular"
+    },
+    "PREVIEW": {
+      "IMAGE_NOT_AVAILABLE": "Vorschau nicht verfügbar"
+    },
+    "FIELD": {
+      "LOCALSTORAGE": "Lokaler Speicherort",
+      "SOURCE": "Quelle auswählen aus ",
+      "UPLOAD": "Hochladen",
+      "REQUIRED": "*Erforderlich",
+      "VALIDATOR": {
+        "INVALID_NUMBER": "Verwenden Sie ein anderes Zahlenformat",
+        "INVALID_DATE": "Verwenden Sie ein anderes Datumsformat",
+        "INVALID_VALUE": "Geben Sie einen anderen Wert ein",
+        "NOT_GREATER_THAN": "Darf nicht größer als {{ maxValue }} sein",
+        "NOT_LESS_THAN": "Darf nicht kleiner als {{ minValue }} sein",
+        "AT_LEAST_LONG": "Geben Sie mindestens {{ minLength }} Zeichen ein",
+        "NO_LONGER_THAN": "Geben Sie höchstens {{ maxLength }} Zeichen ein"
+      }
+    }
+  },
   "CORE": {
+    "FILE_SIZE": {
+      "BYTES": "Bytes",
+      "KB": "KB",
+      "MB": "MB",
+      "GB": "GB",
+      "TB": "TB",
+      "PB": "PB",
+      "EB": "EB",
+      "ZB": "ZB",
+      "YB": "YB"
+    },
     "PAGINATION": {
       "ITEMS_RANGE": "Angezeigt werden {{ range }} von {{ total }}",
       "ITEMS_PER_PAGE": "Elemente pro Seite",
@@ -71,6 +105,27 @@
       "BACK": "Zurück",
       "APPLY": "Anwenden",
       "NOT_VALID": "http(s)://host|ip:port(/path) nicht erkannt. Probieren Sie es mit einer anderen URL."
+    },
+    "CARDVIEW": {
+      "VALIDATORS": {
+        "FLOAT_VALIDATION_ERROR": "Verwenden Sie ein Zahlenformat",
+        "INT_VALIDATION_ERROR": "Verwenden Sie ein Ganzzahlenformat"
+      }
+    },
+    "METADATA": {
+      "BASIC": {
+        "HEADER": "Eigenschaften",
+        "NAME": "Name",
+        "TITLE": "Titel",
+        "DESCRIPTION": "Beschreibung",
+        "AUTHOR": "Autor",
+        "MIMETYPE": "MIME-Type",
+        "SIZE": "Größe",
+        "CREATOR": "Ersteller",
+        "CREATED_DATE": "Datum der Erstellung",
+        "MODIFIER": "Bearbeiter",
+        "MODIFIED_DATE": "Datum der Änderung"
+      }
     }
   },
   "LOGIN": {
@@ -146,6 +201,12 @@
       "OF": "von"
     },
     "LOADING": "Laden",
-    "UNKNOWN_FORMAT": "Vorschau konnte nicht geladen werden"
+    "UNKNOWN_FORMAT": "Vorschau konnte nicht geladen werden",
+    "SIDEBAR": {
+      "METADATA": {
+        "MORE_INFORMATION": "Mehr Informationen",
+        "LESS_INFORMATION": "Weniger Informationen"
+      }
+    }
   }
 }
\ No newline at end of file
diff --git a/lib/core/i18n/en.json b/lib/core/i18n/en.json
index 7cd077d03f..9b5f07b361 100644
--- a/lib/core/i18n/en.json
+++ b/lib/core/i18n/en.json
@@ -1,5 +1,39 @@
 {
+  "FORM": {
+    "START_FORM": {
+      "TITLE": "Start Form"
+    },
+    "PREVIEW": {
+      "IMAGE_NOT_AVAILABLE": "Preview not available"
+    },
+    "FIELD": {
+      "LOCALSTORAGE" : "Local storage",
+      "SOURCE": "Select source from ",
+      "UPLOAD": "UPLOAD",
+      "REQUIRED": "*Required",
+      "VALIDATOR": {
+        "INVALID_NUMBER": "Use a different number format",
+        "INVALID_DATE": "Use a different date format",
+        "INVALID_VALUE": "Enter a different value",
+        "NOT_GREATER_THAN": "Can't be greater than {{ maxValue }}",
+        "NOT_LESS_THAN": "Can't be less than {{ minValue }}",
+        "AT_LEAST_LONG": "Enter at least {{ minLength }} characters",
+        "NO_LONGER_THAN": "Enter no more than {{ maxLength }} characters"
+      }
+    }
+  },
   "CORE": {
+    "FILE_SIZE": {
+      "BYTES": "Bytes",
+      "KB": "KB",
+      "MB": "MB",
+      "GB": "GB",
+      "TB": "TB",
+      "PB": "PB",
+      "EB": "EB",
+      "ZB": "ZB",
+      "YB": "YB"
+    },
     "PAGINATION": {
       "ITEMS_RANGE": "Showing {{ range }} of {{ total }}",
       "ITEMS_PER_PAGE": "Items per page",
@@ -72,8 +106,15 @@
       "APPLY": "APPLY",
       "NOT_VALID": "http(s)://host|ip:port(/path) not recognized, try a different URL."
     },
+    "CARDVIEW": {
+      "VALIDATORS": {
+        "FLOAT_VALIDATION_ERROR": "Use a number format",
+        "INT_VALIDATION_ERROR": "Use an integer format"
+      }
+    },
     "METADATA": {
       "BASIC": {
+          "HEADER": "Properties",
           "NAME": "Name",
           "TITLE": "Title",
           "DESCRIPTION": "Description",
diff --git a/lib/core/i18n/es.json b/lib/core/i18n/es.json
index 56b348ef19..c8d1045409 100644
--- a/lib/core/i18n/es.json
+++ b/lib/core/i18n/es.json
@@ -1,5 +1,39 @@
 {
+  "FORM": {
+    "START_FORM": {
+      "TITLE": "Iniciar formulario"
+    },
+    "PREVIEW": {
+      "IMAGE_NOT_AVAILABLE": "Vista previa no disponible"
+    },
+    "FIELD": {
+      "LOCALSTORAGE": "Almacenamiento local",
+      "SOURCE": "Seleccionar origen de ",
+      "UPLOAD": "Cargar",
+      "REQUIRED": "*Obligatorio",
+      "VALIDATOR": {
+        "INVALID_NUMBER": "Utilizar un formato de número diferente",
+        "INVALID_DATE": "Utilizar un formato de fecha diferente",
+        "INVALID_VALUE": "Introducir un valor diferente",
+        "NOT_GREATER_THAN": "No puede ser mayor que {{ maxValue }}",
+        "NOT_LESS_THAN": "No puede ser menor que {{ minValue }}",
+        "AT_LEAST_LONG": "Introducir al menos {{ minLength }} caracteres",
+        "NO_LONGER_THAN": "No introducir más de {{ maxLength }} caracteres"
+      }
+    }
+  },
   "CORE": {
+    "FILE_SIZE": {
+      "BYTES": "bytes",
+      "KB": "KB",
+      "MB": "MB",
+      "GB": "GB",
+      "TB": "TB",
+      "PB": "PB",
+      "EB": "EB",
+      "ZB": "ZB",
+      "YB": "YB"
+    },
     "PAGINATION": {
       "ITEMS_RANGE": "Mostrando {{ range }} de {{ total }}",
       "ITEMS_PER_PAGE": "Elementos por página",
@@ -71,6 +105,27 @@
       "BACK": "Volver",
       "APPLY": "Aplicar",
       "NOT_VALID": "http(s)://host|ip:port(/path) no reconocido; pruebe con una URL diferente."
+    },
+    "CARDVIEW": {
+      "VALIDATORS": {
+        "FLOAT_VALIDATION_ERROR": "Utilizar un formato de número",
+        "INT_VALIDATION_ERROR": "Utilizar un formato de entero"
+      }
+    },
+    "METADATA": {
+      "BASIC": {
+        "HEADER": "Propiedades",
+        "NAME": "Nombre",
+        "TITLE": "Título",
+        "DESCRIPTION": "Descripción",
+        "AUTHOR": "Autor",
+        "MIMETYPE": "Tipo MIME",
+        "SIZE": "Tamaño",
+        "CREATOR": "Creador",
+        "CREATED_DATE": "Fecha de creación",
+        "MODIFIER": "Modificador",
+        "MODIFIED_DATE": "Fecha de modificación"
+      }
     }
   },
   "LOGIN": {
@@ -89,7 +144,7 @@
       "LOGIN-ERROR-PROVIDERS": "Los proveedores no pueden estar no definidos",
       "LOGIN-ERROR-CORS": "Excepción CORS, compruebe la configuración del servidor",
       "LOGIN-ERROR-CSRF": "Excepción CSRF, configure [disableCsrf]=\"true\" en login.component",
-      "LOGIN-ECM-LICENSE": "El respositorio de Alfresco Content Services está en modo solo lectura"
+      "LOGIN-ECM-LICENSE": "El repositorio de Alfresco Content Services está en modo solo lectura"
     },
     "BUTTON": {
       "LOGIN": "Iniciar sesión",
@@ -146,6 +201,12 @@
       "OF": "de"
     },
     "LOADING": "Cargando",
-    "UNKNOWN_FORMAT": "No se ha podido cargar la vista previa"
+    "UNKNOWN_FORMAT": "No se ha podido cargar la vista previa",
+    "SIDEBAR": {
+      "METADATA": {
+        "MORE_INFORMATION": "Más información",
+        "LESS_INFORMATION": "Menos información"
+      }
+    }
   }
 }
\ No newline at end of file
diff --git a/lib/core/i18n/fr.json b/lib/core/i18n/fr.json
index 4bcfd68a24..a7055f8bee 100644
--- a/lib/core/i18n/fr.json
+++ b/lib/core/i18n/fr.json
@@ -1,5 +1,39 @@
 {
+  "FORM": {
+    "START_FORM": {
+      "TITLE": "Démarrer le formulaire"
+    },
+    "PREVIEW": {
+      "IMAGE_NOT_AVAILABLE": "Aperçu non disponible"
+    },
+    "FIELD": {
+      "LOCALSTORAGE": "Stockage local",
+      "SOURCE": "Sélectionner la source dans ",
+      "UPLOAD": "Importer",
+      "REQUIRED": "*Obligatoire",
+      "VALIDATOR": {
+        "INVALID_NUMBER": "Utiliser un format de numéro différent",
+        "INVALID_DATE": "Utiliser un format de date différent",
+        "INVALID_VALUE": "Saisir une valeur différente",
+        "NOT_GREATER_THAN": "Ne peut pas être supérieur à {{ maxValue }}",
+        "NOT_LESS_THAN": "Ne peut pas être inférieur à {{ minValue }}",
+        "AT_LEAST_LONG": "Saisir {{ minLength }} caractères minimum",
+        "NO_LONGER_THAN": "Saisir {{ maxLength }} caractères maximum"
+      }
+    }
+  },
   "CORE": {
+    "FILE_SIZE": {
+      "BYTES": "Octets",
+      "KB": "Ko",
+      "MB": "Mo",
+      "GB": "Go",
+      "TB": "To",
+      "PB": "Po",
+      "EB": "Eo",
+      "ZB": "Zo",
+      "YB": "Yo"
+    },
     "PAGINATION": {
       "ITEMS_RANGE": "Affichage de {{ range }} sur {{ total }}",
       "ITEMS_PER_PAGE": "Éléments par page",
@@ -71,6 +105,27 @@
       "BACK": "Retour",
       "APPLY": "Appliquer",
       "NOT_VALID": "Adresse http(s)://host|ip:port(/path) non reconnue, essayez une autre URL."
+    },
+    "CARDVIEW": {
+      "VALIDATORS": {
+        "FLOAT_VALIDATION_ERROR": "Utiliser un format de numéro",
+        "INT_VALIDATION_ERROR": "Utiliser un format d'entier"
+      }
+    },
+    "METADATA": {
+      "BASIC": {
+        "HEADER": "Propriétés",
+        "NAME": "Nom",
+        "TITLE": "Titre",
+        "DESCRIPTION": "Description",
+        "AUTHOR": "Auteur",
+        "MIMETYPE": "Type MIME",
+        "SIZE": "Taille",
+        "CREATOR": "Créateur",
+        "CREATED_DATE": "Date de création",
+        "MODIFIER": "Modificateur",
+        "MODIFIED_DATE": "Date de Modification"
+      }
     }
   },
   "LOGIN": {
@@ -146,6 +201,12 @@
       "OF": "sur"
     },
     "LOADING": "Chargement en cours",
-    "UNKNOWN_FORMAT": "Impossible de charger l'aperçu"
+    "UNKNOWN_FORMAT": "Impossible de charger l'aperçu",
+    "SIDEBAR": {
+      "METADATA": {
+        "MORE_INFORMATION": "Plus d'informations",
+        "LESS_INFORMATION": "Moins d'informations"
+      }
+    }
   }
 }
\ No newline at end of file
diff --git a/lib/core/i18n/it.json b/lib/core/i18n/it.json
index b4ca34cb72..341f4f7b58 100644
--- a/lib/core/i18n/it.json
+++ b/lib/core/i18n/it.json
@@ -1,5 +1,39 @@
 {
+  "FORM": {
+    "START_FORM": {
+      "TITLE": "Modulo di inizio"
+    },
+    "PREVIEW": {
+      "IMAGE_NOT_AVAILABLE": "Anteprima non disponibile"
+    },
+    "FIELD": {
+      "LOCALSTORAGE": "Archivio locale",
+      "SOURCE": "Seleziona origine da ",
+      "UPLOAD": "Carica",
+      "REQUIRED": "*Obbligatorio",
+      "VALIDATOR": {
+        "INVALID_NUMBER": "Utilizzare un formato numerico diverso",
+        "INVALID_DATE": "Utilizzare un formato data diverso",
+        "INVALID_VALUE": "Immettere un altro valore",
+        "NOT_GREATER_THAN": "Non può essere maggiore di {{ maxValue }}",
+        "NOT_LESS_THAN": "Non può essere minore di {{ minValue }}",
+        "AT_LEAST_LONG": "Immettere almeno {{ minLength }} caratteri",
+        "NO_LONGER_THAN": "Immettere non più di {{ maxLength }} caratteri"
+      }
+    }
+  },
   "CORE": {
+    "FILE_SIZE": {
+      "BYTES": "byte",
+      "KB": "KB",
+      "MB": "MB",
+      "GB": "GB",
+      "TB": "TB",
+      "PB": "PB",
+      "EB": "EB",
+      "ZB": "ZB",
+      "YB": "YB"
+    },
     "PAGINATION": {
       "ITEMS_RANGE": "Visualizzazione di {{ range }} su {{ total }}",
       "ITEMS_PER_PAGE": "Elementi per pagina",
@@ -71,6 +105,27 @@
       "BACK": "Indietro",
       "APPLY": "Applica",
       "NOT_VALID": "http(s)://host|ip:port(/path) non riconosciuto, provare un URL diverso."
+    },
+    "CARDVIEW": {
+      "VALIDATORS": {
+        "FLOAT_VALIDATION_ERROR": "Utilizzare un formato numerico",
+        "INT_VALIDATION_ERROR": "Utilizzare numeri interi"
+      }
+    },
+    "METADATA": {
+      "BASIC": {
+        "HEADER": "Proprietà",
+        "NAME": "Nome",
+        "TITLE": "Titolo",
+        "DESCRIPTION": "Descrizione",
+        "AUTHOR": "Autore",
+        "MIMETYPE": "Tipo MIME",
+        "SIZE": "Dimensione",
+        "CREATOR": "Creatore",
+        "CREATED_DATE": "Data di creazione",
+        "MODIFIER": "Modificatore",
+        "MODIFIED_DATE": "Data di modifica"
+      }
     }
   },
   "LOGIN": {
@@ -146,6 +201,12 @@
       "OF": "di"
     },
     "LOADING": "Caricamento in corso",
-    "UNKNOWN_FORMAT": "Impossibile caricare l'anteprima"
+    "UNKNOWN_FORMAT": "Impossibile caricare l'anteprima",
+    "SIDEBAR": {
+      "METADATA": {
+        "MORE_INFORMATION": "Più informazioni",
+        "LESS_INFORMATION": "Meno informazioni"
+      }
+    }
   }
 }
\ No newline at end of file
diff --git a/lib/core/i18n/ja.json b/lib/core/i18n/ja.json
index 480b9abd8d..d5e3e074c3 100644
--- a/lib/core/i18n/ja.json
+++ b/lib/core/i18n/ja.json
@@ -1,5 +1,39 @@
 {
+  "FORM": {
+    "START_FORM": {
+      "TITLE": "開始フォーム"
+    },
+    "PREVIEW": {
+      "IMAGE_NOT_AVAILABLE": "プレビューは使用できません"
+    },
+    "FIELD": {
+      "LOCALSTORAGE": "ローカルストレージ",
+      "SOURCE": "ソースの選択先 ",
+      "UPLOAD": "アップロード",
+      "REQUIRED": "*必須",
+      "VALIDATOR": {
+        "INVALID_NUMBER": "別の番号形式を使用してください",
+        "INVALID_DATE": "別の日付形式を使用してください",
+        "INVALID_VALUE": "別の値を入力してください",
+        "NOT_GREATER_THAN": "{{ maxValue }} より大きい値にすることはできません",
+        "NOT_LESS_THAN": "{{ minValue }} より小さい値にすることはできません",
+        "AT_LEAST_LONG": "{{ minLength }} 文字以上で入力してください",
+        "NO_LONGER_THAN": "{{ maxLength }} 文字以内で入力してください"
+      }
+    }
+  },
   "CORE": {
+    "FILE_SIZE": {
+      "BYTES": "バイト",
+      "KB": "KB",
+      "MB": "MB",
+      "GB": "GB",
+      "TB": "TB",
+      "PB": "PB",
+      "EB": "EB",
+      "ZB": "ZB",
+      "YB": "YB"
+    },
     "PAGINATION": {
       "ITEMS_RANGE": "表示中: {{ range }} / {{ total }} 件",
       "ITEMS_PER_PAGE": "1 ページのアイテム数",
@@ -71,6 +105,27 @@
       "BACK": "戻る",
       "APPLY": "適用",
       "NOT_VALID": "http(s)://host|ip:port(/path) が認識されません。別の URL を指定してください."
+    },
+    "CARDVIEW": {
+      "VALIDATORS": {
+        "FLOAT_VALIDATION_ERROR": "番号形式を使用してください",
+        "INT_VALIDATION_ERROR": "整数形式を使用してください"
+      }
+    },
+    "METADATA": {
+      "BASIC": {
+        "HEADER": "プロパティ",
+        "NAME": "名前",
+        "TITLE": "タイトル",
+        "DESCRIPTION": "説明",
+        "AUTHOR": "作成者",
+        "MIMETYPE": "MIME タイプ",
+        "SIZE": "サイズ",
+        "CREATOR": "作成者",
+        "CREATED_DATE": "作成日",
+        "MODIFIER": "変更者",
+        "MODIFIED_DATE": "変更日"
+      }
     }
   },
   "LOGIN": {
@@ -146,6 +201,12 @@
       "OF": "/"
     },
     "LOADING": "読み込み中",
-    "UNKNOWN_FORMAT": "プレビューを読み込めませんでした"
+    "UNKNOWN_FORMAT": "プレビューを読み込めませんでした",
+    "SIDEBAR": {
+      "METADATA": {
+        "MORE_INFORMATION": "詳細",
+        "LESS_INFORMATION": "概要"
+      }
+    }
   }
 }
\ No newline at end of file
diff --git a/lib/core/i18n/nb.json b/lib/core/i18n/nb.json
index d5d1e31d63..dd2f8b3937 100644
--- a/lib/core/i18n/nb.json
+++ b/lib/core/i18n/nb.json
@@ -1,5 +1,39 @@
 {
+  "FORM": {
+    "START_FORM": {
+      "TITLE": "Start skjema"
+    },
+    "PREVIEW": {
+      "IMAGE_NOT_AVAILABLE": "Forhåndsvisning er ikke tilgjengelig"
+    },
+    "FIELD": {
+      "LOCALSTORAGE": "Lokal lagring",
+      "SOURCE": "Velg kilde fra ",
+      "UPLOAD": "Last opp",
+      "REQUIRED": "*Påkrevd",
+      "VALIDATOR": {
+        "INVALID_NUMBER": "Bruk et annet nummerformat",
+        "INVALID_DATE": "Bruk et annet datoformat",
+        "INVALID_VALUE": "Angi en annen verdi",
+        "NOT_GREATER_THAN": "Kan ikke være større enn {{ maxValue }}",
+        "NOT_LESS_THAN": "Kan ikke være mindre enn {{ minValue }}",
+        "AT_LEAST_LONG": "Angi minst {{ minLength }} tegn",
+        "NO_LONGER_THAN": "Angi opptil {{ maxLength }} tegn"
+      }
+    }
+  },
   "CORE": {
+    "FILE_SIZE": {
+      "BYTES": "Byte",
+      "KB": "KB",
+      "MB": "MB",
+      "GB": "GB",
+      "TB": "TB",
+      "PB": "PB",
+      "EB": "EB",
+      "ZB": "ZB",
+      "YB": "YB"
+    },
     "PAGINATION": {
       "ITEMS_RANGE": "Vis {{ range }} av {{ total }}",
       "ITEMS_PER_PAGE": "Elementer per side",
@@ -71,6 +105,27 @@
       "BACK": "Tilbake",
       "APPLY": "Bruk",
       "NOT_VALID": "http(s)://host|ip:port(/path) ikke gjenkjent, prøv en annen URL."
+    },
+    "CARDVIEW": {
+      "VALIDATORS": {
+        "FLOAT_VALIDATION_ERROR": "Bruk et nummerformat",
+        "INT_VALIDATION_ERROR": "Bruk heltall"
+      }
+    },
+    "METADATA": {
+      "BASIC": {
+        "HEADER": "Egenskaper",
+        "NAME": "Navn",
+        "TITLE": "Tittel",
+        "DESCRIPTION": "Beskrivelse",
+        "AUTHOR": "Forfatter",
+        "MIMETYPE": "Mimetype",
+        "SIZE": "Størrelse",
+        "CREATOR": "Oppretter",
+        "CREATED_DATE": "Opprettelsesdato",
+        "MODIFIER": "Modifikator",
+        "MODIFIED_DATE": "Endringsdato"
+      }
     }
   },
   "LOGIN": {
@@ -146,6 +201,12 @@
       "OF": "av"
     },
     "LOADING": "Laster",
-    "UNKNOWN_FORMAT": "Kan ikke laste forhåndsvisning"
+    "UNKNOWN_FORMAT": "Kan ikke laste forhåndsvisning",
+    "SIDEBAR": {
+      "METADATA": {
+        "MORE_INFORMATION": "Mer informasjon",
+        "LESS_INFORMATION": "Mindre informasjon"
+      }
+    }
   }
 }
\ No newline at end of file
diff --git a/lib/core/i18n/nl.json b/lib/core/i18n/nl.json
index c7dd3185ae..fe4c196149 100644
--- a/lib/core/i18n/nl.json
+++ b/lib/core/i18n/nl.json
@@ -1,5 +1,39 @@
 {
+  "FORM": {
+    "START_FORM": {
+      "TITLE": "Beginformulier"
+    },
+    "PREVIEW": {
+      "IMAGE_NOT_AVAILABLE": "Voorbeeld niet beschikbaar"
+    },
+    "FIELD": {
+      "LOCALSTORAGE": "Lokale opslag",
+      "SOURCE": "Selecteer bron uit ",
+      "UPLOAD": "Uploaden",
+      "REQUIRED": "*Vereist",
+      "VALIDATOR": {
+        "INVALID_NUMBER": "Gebruik een andere getalnotatie",
+        "INVALID_DATE": "Gebruik een andere datumnotatie",
+        "INVALID_VALUE": "Voer een andere waarde in",
+        "NOT_GREATER_THAN": "Mag niet groter zijn dan {{ maxValue }}",
+        "NOT_LESS_THAN": "Mag niet kleiner zijn dan {{ minValue }}",
+        "AT_LEAST_LONG": "Voer ten minste {{ minLength }} tekens in",
+        "NO_LONGER_THAN": "Voer niet meer dan {{ maxLength }} tekens in"
+      }
+    }
+  },
   "CORE": {
+    "FILE_SIZE": {
+      "BYTES": "bytes",
+      "KB": "KB",
+      "MB": "MB",
+      "GB": "GB",
+      "TB": "TB",
+      "PB": "PB",
+      "EB": "EB",
+      "ZB": "ZB",
+      "YB": "YB"
+    },
     "PAGINATION": {
       "ITEMS_RANGE": "{{ range }} van {{ total }} wordt weergegeven",
       "ITEMS_PER_PAGE": "Items per pagina",
@@ -71,6 +105,27 @@
       "BACK": "Terug",
       "APPLY": "Toepassen",
       "NOT_VALID": "http(s)://host|ip:port(/path) niet herkend, probeer een andere URL."
+    },
+    "CARDVIEW": {
+      "VALIDATORS": {
+        "FLOAT_VALIDATION_ERROR": "Gebruik een getalnotatie",
+        "INT_VALIDATION_ERROR": "Gebruik een notatie voor gehele getallen"
+      }
+    },
+    "METADATA": {
+      "BASIC": {
+        "HEADER": "Eigenschappen",
+        "NAME": "Naam",
+        "TITLE": "Titel",
+        "DESCRIPTION": "Beschrijving",
+        "AUTHOR": "Auteur",
+        "MIMETYPE": "Mimetype",
+        "SIZE": "Grootte",
+        "CREATOR": "Maker",
+        "CREATED_DATE": "Datum gemaakt",
+        "MODIFIER": "Gewijzigd door",
+        "MODIFIED_DATE": "Datum gewijzigd"
+      }
     }
   },
   "LOGIN": {
@@ -146,6 +201,12 @@
       "OF": "van"
     },
     "LOADING": "Wordt geladen",
-    "UNKNOWN_FORMAT": "Kan voorbeeld niet laden"
+    "UNKNOWN_FORMAT": "Kan voorbeeld niet laden",
+    "SIDEBAR": {
+      "METADATA": {
+        "MORE_INFORMATION": "Meer informatie",
+        "LESS_INFORMATION": "Minder informatie"
+      }
+    }
   }
 }
\ No newline at end of file
diff --git a/lib/core/i18n/pt-BR.json b/lib/core/i18n/pt-BR.json
index 1ca23ecef3..fe6c56c215 100644
--- a/lib/core/i18n/pt-BR.json
+++ b/lib/core/i18n/pt-BR.json
@@ -1,5 +1,39 @@
 {
+  "FORM": {
+    "START_FORM": {
+      "TITLE": "Iniciar formulário"
+    },
+    "PREVIEW": {
+      "IMAGE_NOT_AVAILABLE": "Visualização não disponível"
+    },
+    "FIELD": {
+      "LOCALSTORAGE": "Armazenamento local",
+      "SOURCE": "Selecionar origem de ",
+      "UPLOAD": "Carregar",
+      "REQUIRED": "*Obrigatório",
+      "VALIDATOR": {
+        "INVALID_NUMBER": "Use um formato de número diferente",
+        "INVALID_DATE": "Use um formato de data diferente",
+        "INVALID_VALUE": "Insira um valor diferente",
+        "NOT_GREATER_THAN": "Não pode ser maior do que {{ maxValue }}",
+        "NOT_LESS_THAN": "Não pode ser menor do que {{ minValue }}",
+        "AT_LEAST_LONG": "Insira no mínimo {{ minLength }} caracteres",
+        "NO_LONGER_THAN": "Insira no máximo {{ maxLength }} caracteres"
+      }
+    }
+  },
   "CORE": {
+    "FILE_SIZE": {
+      "BYTES": "Bytes",
+      "KB": "KB",
+      "MB": "MB",
+      "GB": "GB",
+      "TB": "TB",
+      "PB": "PB",
+      "EB": "EB",
+      "ZB": "ZB",
+      "YB": "YB"
+    },
     "PAGINATION": {
       "ITEMS_RANGE": "Mostrando {{ range }} de {{ total }}",
       "ITEMS_PER_PAGE": "Itens por página",
@@ -71,6 +105,27 @@
       "BACK": "Voltar",
       "APPLY": "Aplicar",
       "NOT_VALID": "http(s)://host|ip:port(/path) não reconhecida, tente uma URL diferente."
+    },
+    "CARDVIEW": {
+      "VALIDATORS": {
+        "FLOAT_VALIDATION_ERROR": "Use um formato de número",
+        "INT_VALIDATION_ERROR": "Use um formato inteiro"
+      }
+    },
+    "METADATA": {
+      "BASIC": {
+        "HEADER": "Propriedades",
+        "NAME": "Nome",
+        "TITLE": "Título",
+        "DESCRIPTION": "Descrição",
+        "AUTHOR": "Autor",
+        "MIMETYPE": "Tipo mime",
+        "SIZE": "Tamanho",
+        "CREATOR": "Criador",
+        "CREATED_DATE": "Data de criação",
+        "MODIFIER": "Modificador",
+        "MODIFIED_DATE": "Data de modificação"
+      }
     }
   },
   "LOGIN": {
@@ -146,6 +201,12 @@
       "OF": "de"
     },
     "LOADING": "Carregando",
-    "UNKNOWN_FORMAT": "Não foi possível carregar pré-visualização"
+    "UNKNOWN_FORMAT": "Não foi possível carregar pré-visualização",
+    "SIDEBAR": {
+      "METADATA": {
+        "MORE_INFORMATION": "Mais informação",
+        "LESS_INFORMATION": "Menos informação"
+      }
+    }
   }
 }
\ No newline at end of file
diff --git a/lib/core/i18n/ru.json b/lib/core/i18n/ru.json
index 1de39c030a..e636b8e6b9 100644
--- a/lib/core/i18n/ru.json
+++ b/lib/core/i18n/ru.json
@@ -1,5 +1,39 @@
 {
+  "FORM": {
+    "START_FORM": {
+      "TITLE": "Запустить форму"
+    },
+    "PREVIEW": {
+      "IMAGE_NOT_AVAILABLE": "Предварительный просмотр недоступен"
+    },
+    "FIELD": {
+      "LOCALSTORAGE": "Локальное хранение",
+      "SOURCE": "Выберите источник из ",
+      "UPLOAD": "Загрузить",
+      "REQUIRED": "*Обязательное поле",
+      "VALIDATOR": {
+        "INVALID_NUMBER": "Используйте другой формат числа",
+        "INVALID_DATE": "Используйте другой формат даты",
+        "INVALID_VALUE": "Введите другое значение",
+        "NOT_GREATER_THAN": "Не может превышать {{ maxValue }}",
+        "NOT_LESS_THAN": "Не может быть меньше {{ minValue }}",
+        "AT_LEAST_LONG": "Введите не менее {{ minLength }} символов",
+        "NO_LONGER_THAN": "Введите не более {{ maxLength }} символов"
+      }
+    }
+  },
   "CORE": {
+    "FILE_SIZE": {
+      "BYTES": "б",
+      "KB": "КБ",
+      "MB": "МБ",
+      "GB": "ГБ",
+      "TB": "ТБ",
+      "PB": "ПБ",
+      "EB": "ЭБ",
+      "ZB": "ЗБ",
+      "YB": "ИБ"
+    },
     "PAGINATION": {
       "ITEMS_RANGE": "Отображается {{ range }} из {{ total }}",
       "ITEMS_PER_PAGE": "Элементов на странице",
@@ -71,6 +105,27 @@
       "BACK": "Назад",
       "APPLY": "Применить",
       "NOT_VALID": "http(s)://host|ip:port(/path) не распознан, используйте другой URL-адрес."
+    },
+    "CARDVIEW": {
+      "VALIDATORS": {
+        "FLOAT_VALIDATION_ERROR": "Использовать формат числа",
+        "INT_VALIDATION_ERROR": "Использовать формат целого числа"
+      }
+    },
+    "METADATA": {
+      "BASIC": {
+        "HEADER": "Свойства",
+        "NAME": "Имя",
+        "TITLE": "Заголовок",
+        "DESCRIPTION": "Описание",
+        "AUTHOR": "Автор",
+        "MIMETYPE": "Тип MIME",
+        "SIZE": "Размер",
+        "CREATOR": "Создатель",
+        "CREATED_DATE": "Дата создания",
+        "MODIFIER": "Редактор",
+        "MODIFIED_DATE": "Дата изменения"
+      }
     }
   },
   "LOGIN": {
@@ -146,6 +201,12 @@
       "OF": "из"
     },
     "LOADING": "Загружается",
-    "UNKNOWN_FORMAT": "Не удалось загрузить предварительный просмотр"
+    "UNKNOWN_FORMAT": "Не удалось загрузить предварительный просмотр",
+    "SIDEBAR": {
+      "METADATA": {
+        "MORE_INFORMATION": "Дополнительные сведения",
+        "LESS_INFORMATION": "Краткие сведения"
+      }
+    }
   }
 }
\ No newline at end of file
diff --git a/lib/core/i18n/zh-CN.json b/lib/core/i18n/zh-CN.json
index 21b1e449a4..bd5e9ebb31 100644
--- a/lib/core/i18n/zh-CN.json
+++ b/lib/core/i18n/zh-CN.json
@@ -1,5 +1,39 @@
 {
+  "FORM": {
+    "START_FORM": {
+      "TITLE": "启动表单"
+    },
+    "PREVIEW": {
+      "IMAGE_NOT_AVAILABLE": "预览不可用"
+    },
+    "FIELD": {
+      "LOCALSTORAGE": "本地存储",
+      "SOURCE": "来源选自 ",
+      "UPLOAD": "上传",
+      "REQUIRED": "*必需",
+      "VALIDATOR": {
+        "INVALID_NUMBER": "使用其他数字格式",
+        "INVALID_DATE": "使用其他日期格式",
+        "INVALID_VALUE": "使用其他值",
+        "NOT_GREATER_THAN": "不能大于 {{ maxValue }}",
+        "NOT_LESS_THAN": "不能小于 {{ minValue }}",
+        "AT_LEAST_LONG": "至少输入 {{ minLength }} 个字符",
+        "NO_LONGER_THAN": "输入不超过 {{ maxLength }} 个字符"
+      }
+    }
+  },
   "CORE": {
+    "FILE_SIZE": {
+      "BYTES": "字节",
+      "KB": "KB",
+      "MB": "MB",
+      "GB": "GB",
+      "TB": "TB",
+      "PB": "PB",
+      "EB": "EB",
+      "ZB": "ZB",
+      "YB": "YB"
+    },
     "PAGINATION": {
       "ITEMS_RANGE": "显示 {{range}}/{{total}}",
       "ITEMS_PER_PAGE": "每页的项目",
@@ -71,6 +105,27 @@
       "BACK": "返回",
       "APPLY": "应用",
       "NOT_VALID": "http(s)://host|ip:port(/path) 无法识别，请使用其他 URL."
+    },
+    "CARDVIEW": {
+      "VALIDATORS": {
+        "FLOAT_VALIDATION_ERROR": "使用数字格式",
+        "INT_VALIDATION_ERROR": "使用整数格式"
+      }
+    },
+    "METADATA": {
+      "BASIC": {
+        "HEADER": "属性",
+        "NAME": "名称",
+        "TITLE": "标题",
+        "DESCRIPTION": "说明",
+        "AUTHOR": "作者",
+        "MIMETYPE": "MIME 类型",
+        "SIZE": "字号(&S)",
+        "CREATOR": "创建者",
+        "CREATED_DATE": "创建日期",
+        "MODIFIER": "修改者",
+        "MODIFIED_DATE": "修改日期"
+      }
     }
   },
   "LOGIN": {
@@ -146,6 +201,12 @@
       "OF": "/"
     },
     "LOADING": "正在加载",
-    "UNKNOWN_FORMAT": "无法加载预览"
+    "UNKNOWN_FORMAT": "无法加载预览",
+    "SIDEBAR": {
+      "METADATA": {
+        "MORE_INFORMATION": "更多信息",
+        "LESS_INFORMATION": "更少信息"
+      }
+    }
   }
 }
\ No newline at end of file
diff --git a/lib/core/index.ts b/lib/core/index.ts
index 574b4cff70..6347462be1 100644
--- a/lib/core/index.ts
+++ b/lib/core/index.ts
@@ -45,6 +45,7 @@ export * from './pagination';
 export * from './login';
 export * from './language-menu';
 export * from './info-drawer';
+export * from './sidebar';
 export * from './data-column';
 export * from './datatable';
 export * from './context-menu';
diff --git a/lib/core/info-drawer/info-drawer.component.html b/lib/core/info-drawer/info-drawer.component.html
index 8006c2fdd4..45b406728b 100644
--- a/lib/core/info-drawer/info-drawer.component.html
+++ b/lib/core/info-drawer/info-drawer.component.html
@@ -7,7 +7,7 @@
     <ng-container info-drawer-content *ngIf="showTabLayout(); then tabLayout else singleLayout"></ng-container>
 
     <ng-template #tabLayout>
-        <mat-tab-group class="adf-info-drawer-tabs" (selectedTabChange)="onTabChange($event)">
+        <mat-tab-group [(selectedIndex)]="selectedIndex" class="adf-info-drawer-tabs" (selectedTabChange)="onTabChange($event)">
             <ng-container *ngFor="let contentBlock of contentBlocks">
                 <mat-tab [label]="contentBlock.label" class="adf-info-drawer-tab">
                     <ng-container *ngTemplateOutlet="contentBlock.content"></ng-container>
@@ -19,4 +19,4 @@
     <ng-template #singleLayout>
         <ng-content select="[info-drawer-content]"></ng-content>
     </ng-template>
-</adf-info-drawer-layout>
\ No newline at end of file
+</adf-info-drawer-layout>
diff --git a/lib/core/info-drawer/info-drawer.component.spec.ts b/lib/core/info-drawer/info-drawer.component.spec.ts
index 8c3c594b93..4cd21fcd6d 100644
--- a/lib/core/info-drawer/info-drawer.component.spec.ts
+++ b/lib/core/info-drawer/info-drawer.component.spec.ts
@@ -22,6 +22,7 @@ import { By } from '@angular/platform-browser';
 import { MaterialModule } from '../material.module';
 import { InfoDrawerLayoutComponent } from './info-drawer-layout.component';
 import { InfoDrawerComponent } from './info-drawer.component';
+import { InfoDrawerTabComponent } from './info-drawer.component';
 
 describe('InfoDrawerComponent', () => {
     let element: HTMLElement;
@@ -73,21 +74,28 @@ describe('InfoDrawerComponent', () => {
 
 @Component({
     template: `
-    <adf-info-drawer>
+    <adf-info-drawer [selectedIndex]="tabIndex">
         <div info-drawer-title>Fake Title Custom</div>
+        <adf-info-drawer-tab label="Tab1">
+        </adf-info-drawer-tab>
+        <adf-info-drawer-tab label="Tab2">
+        </adf-info-drawer-tab>
     </adf-info-drawer>
        `
 })
-class CustomInfoDrawerComponent {
+class CustomInfoDrawerComponent extends InfoDrawerComponent {
+    tabIndex: number;
 }
 
 describe('Custom InfoDrawer', () => {
     let fixture: ComponentFixture<CustomInfoDrawerComponent>;
+    let component: CustomInfoDrawerComponent;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             declarations: [
                 InfoDrawerComponent,
+                InfoDrawerTabComponent,
                 InfoDrawerLayoutComponent,
                 CustomInfoDrawerComponent
             ],
@@ -100,6 +108,7 @@ describe('Custom InfoDrawer', () => {
     beforeEach(() => {
         fixture = TestBed.createComponent(CustomInfoDrawerComponent);
         fixture.detectChanges();
+        component = fixture.componentInstance;
     });
 
     it('should render the title', () => {
@@ -108,4 +117,19 @@ describe('Custom InfoDrawer', () => {
         expect(title.length).toBe(1);
         expect(title[0].nativeElement.innerText).toBe('Fake Title Custom');
     });
+
+    it('should select the tab 1 (index 0) as default', () => {
+        fixture.detectChanges();
+        let tab: any = fixture.debugElement.queryAll(By.css('.mat-tab-label-active'));
+        expect(tab.length).toBe(1);
+        expect(tab[0].nativeElement.innerText).toBe('Tab1');
+    });
+
+    it('should select the tab 2 (index 1)', () => {
+        component.tabIndex = 1;
+        fixture.detectChanges();
+        let tab: any = fixture.debugElement.queryAll(By.css('.mat-tab-label-active'));
+        expect(tab.length).toBe(1);
+        expect(tab[0].nativeElement.innerText).toBe('Tab2');
+    });
 });
diff --git a/lib/core/info-drawer/info-drawer.component.ts b/lib/core/info-drawer/info-drawer.component.ts
index 4af5a8ab79..fa44ff6026 100644
--- a/lib/core/info-drawer/info-drawer.component.ts
+++ b/lib/core/info-drawer/info-drawer.component.ts
@@ -37,6 +37,9 @@ export class InfoDrawerComponent {
     @Input()
     title: string|null = null;
 
+    @Input()
+    selectedIndex: number = 0;
+
     @Output()
     currentTab: EventEmitter<number> = new EventEmitter<number>();
 
diff --git a/lib/core/interface/public-api.ts b/lib/core/interface/public-api.ts
index abc2977d14..b69f6f445a 100644
--- a/lib/core/interface/public-api.ts
+++ b/lib/core/interface/public-api.ts
@@ -16,5 +16,5 @@
  */
 
 export * from './authentication.interface';
-export * from './card-view-item.interface';
 export * from './injection.tokens';
+export * from './search-configuration.interface';
diff --git a/lib/core/interface/search-configuration.interface.ts b/lib/core/interface/search-configuration.interface.ts
new file mode 100644
index 0000000000..fe68d17edb
--- /dev/null
+++ b/lib/core/interface/search-configuration.interface.ts
@@ -0,0 +1,24 @@
+/*!
+ * @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 { QueryBody } from 'alfresco-js-api';
+
+export interface SearchConfigurationInterface {
+
+    generateQueryBody(searchTerm: string, maxResults: string, skipCount: string): QueryBody;
+
+}
diff --git a/lib/core/login/components/login.component.spec.ts b/lib/core/login/components/login.component.spec.ts
index 27345bf47e..59e197a643 100644
--- a/lib/core/login/components/login.component.spec.ts
+++ b/lib/core/login/components/login.component.spec.ts
@@ -26,8 +26,8 @@ import { AuthenticationService } from '../../services/authentication.service';
 import { MaterialModule } from '../../material.module';
 import { LoginErrorEvent } from '../models/login-error.event';
 import { LoginSuccessEvent } from '../models/login-success.event';
-import { AuthenticationMock } from './../../mock/authentication.service.mock';
 import { LoginComponent } from './login.component';
+import { Observable } from 'rxjs/Observable';
 
 describe('LoginComponent', () => {
     let component: LoginComponent;
@@ -64,7 +64,7 @@ describe('LoginComponent', () => {
                 LoginComponent
             ],
             providers: [
-                {provide: AuthenticationService, useClass: AuthenticationMock}
+                AuthenticationService
             ]
         }).compileComponents();
     }));
@@ -101,6 +101,7 @@ describe('LoginComponent', () => {
     }
 
     it('should redirect to route on successful login', () => {
+        spyOn(authService, 'login').and.returnValue(Observable.of({ type: 'type', ticket: 'ticket'}));
         const redirect = '/home';
         component.successRoute = redirect;
         spyOn(router, 'navigate');
@@ -109,9 +110,10 @@ describe('LoginComponent', () => {
     });
 
     it('should redirect to previous route state on successful login', () => {
+        spyOn(authService, 'login').and.returnValue(Observable.of({ type: 'type', ticket: 'ticket'}));
         const redirect = '/home';
         component.successRoute = redirect;
-        authService.setRedirectUrl('redirect-url');
+        authService.setRedirectUrl({ provider: 'ECM', url: 'redirect-url' } );
 
         spyOn(router, 'navigate');
 
@@ -152,12 +154,14 @@ describe('LoginComponent', () => {
         });
 
         it('should be changed back to the default after a failed login attempt', () => {
+            spyOn(authService, 'login').and.returnValue(Observable.throw('Fake server error'));
             loginWithCredentials('fake-wrong-username', 'fake-wrong-password');
 
             expect(getLoginButtonText()).toEqual('LOGIN.BUTTON.LOGIN');
         });
 
         it('should be changed to the "welcome key" after a successful login attempt', () => {
+            spyOn(authService, 'login').and.returnValue(Observable.of({ type: 'type', ticket: 'ticket'}));
             loginWithCredentials('fake-username', 'fake-password');
 
             expect(getLoginButtonText()).toEqual('LOGIN.BUTTON.WELCOME');
@@ -436,6 +440,12 @@ describe('LoginComponent', () => {
     }));
 
     it('should return CORS error when server CORS error occurs', async(() => {
+        spyOn(authService, 'login').and.returnValue(Observable.throw({
+            error: {
+                crossDomain: true,
+                message: 'ERROR: the network is offline, Origin is not allowed by Access-Control-Allow-Origin'
+            }
+        }));
         component.providers = 'ECM';
 
         component.error.subscribe(() => {
@@ -450,6 +460,8 @@ describe('LoginComponent', () => {
     }));
 
     it('should return CSRF error when server CSRF error occurs', async(() => {
+        spyOn(authService, 'login')
+            .and.returnValue(Observable.throw({ message: 'ERROR: Invalid CSRF-token', status: 403 }));
         component.providers = 'ECM';
 
         component.error.subscribe(() => {
@@ -464,6 +476,14 @@ describe('LoginComponent', () => {
     }));
 
     it('should return ECOM read-oly error when error occurs', async(() => {
+        spyOn(authService, 'login')
+            .and.returnValue(
+            Observable.throw(
+                {
+                    message: 'ERROR: 00170728 Access Denied.  The system is currently in read-only mode',
+                    status: 403
+                }
+            ));
         component.providers = 'ECM';
 
         component.error.subscribe(() => {
@@ -493,6 +513,7 @@ describe('LoginComponent', () => {
     }));
 
     it('should emit error event after the login has failed', async(() => {
+        spyOn(authService, 'login').and.returnValue(Observable.throw('Fake server error'));
         component.providers = 'ECM';
 
         component.error.subscribe((error) => {
diff --git a/lib/core/login/components/login.component.ts b/lib/core/login/components/login.component.ts
index 0264d7093f..08743f4dd6 100644
--- a/lib/core/login/components/login.component.ts
+++ b/lib/core/login/components/login.component.ts
@@ -55,45 +55,61 @@ export class LoginComponent implements OnInit {
 
     isPasswordShow: boolean = false;
 
+    /* Should the `Remember me` checkbox be shown? */
     @Input()
     showRememberMe: boolean = true;
 
+    /* Should the extra actions (`Need Help`, `Register`, etc) be shown? */
     @Input()
     showLoginActions: boolean = true;
 
+    /* Sets the URL of the NEED HELP link in the footer */
     @Input()
     needHelpLink: string = '';
 
+    /* Sets the URL of the REGISTER link in the footer */
     @Input()
     registerLink: string = '';
 
+    /* Path to a custom logo image */
     @Input()
     logoImageUrl: string = './assets/images/alfresco-logo.svg';
 
+    /* Path to a custom background image */
     @Input()
     backgroundImageUrl: string = './assets/images/background.svg';
 
+    /* The copyright text below the login box */
     @Input()
     copyrightText: string = '\u00A9 2016 Alfresco Software, Inc. All Rights Reserved.';
 
+    /* Possible valid values are ECM, BPM or ALL. By default, this component
+     * will log in only to ECM. If you want to log in in both systems then use ALL.
+     */
     @Input()
     providers: string;
 
+    /* Custom validation rules for the login form */
     @Input()
     fieldsValidation: any;
 
+    /* Prevents the CSRF Token from being submitted. Only valid for Alfresco Process Services. */
     @Input()
     disableCsrf: boolean;
 
+    /* Route to redirect to on successful login. */
     @Input()
     successRoute: string = null;
 
+    /* Emitted when the login is successful */
     @Output()
     success = new EventEmitter<LoginSuccessEvent>();
 
+    /* Emitted when the login fails */
     @Output()
     error = new EventEmitter<LoginErrorEvent>();
 
+    /* Emitted when the login form is submitted */
     @Output()
     executeSubmit = new EventEmitter<LoginSubmitEvent>();
 
@@ -197,7 +213,7 @@ export class LoginComponent implements OnInit {
         this.authService.login(values.username, values.password, this.rememberMe)
             .subscribe(
                 (token: any) => {
-                    const redirectUrl = this.authService.getRedirectUrl();
+                    const redirectUrl = this.authService.getRedirectUrl(this.providers);
 
                     this.actualLoginStep = LoginSteps.Welcome;
                     this.userPreferences.setStoragePrefix(values.username);
diff --git a/lib/core/mock/traslation.service.mock.ts b/lib/core/mock/traslation.service.mock.ts
index cb86c632b9..68e36cceb9 100644
--- a/lib/core/mock/traslation.service.mock.ts
+++ b/lib/core/mock/traslation.service.mock.ts
@@ -25,13 +25,17 @@ export interface LangChangeEvent {
 
 export class TranslationMock {
 
-    public onLangChange: EventEmitter<LangChangeEvent> = new EventEmitter<LangChangeEvent>();
+    onLangChange: EventEmitter<LangChangeEvent> = new EventEmitter<LangChangeEvent>();
 
     addTranslationFolder() {
 
     }
 
-    public get(key: string|Array<string>, interpolateParams?: Object): Observable<string|any> {
+    get(key: string|Array<string>, interpolateParams?: Object): Observable<string|any> {
         return Observable.of(key);
     }
+
+    instant(key: string | Array<string>, interpolateParams?: Object): string | any {
+        return key;
+    }
 }
diff --git a/lib/core/models/public-api.ts b/lib/core/models/public-api.ts
index 21f4d19b7c..e2e64f651e 100644
--- a/lib/core/models/public-api.ts
+++ b/lib/core/models/public-api.ts
@@ -15,14 +15,10 @@
  * limitations under the License.
  */
 
-export * from './card-view-baseitem.model';
-export * from './card-view-textitem.model';
-export * from './card-view-mapitem.model';
-export * from './card-view-dateitem.model';
 export * from './file.model';
 export * from './permissions.enum';
-export * from './site.model';
 export * from './product-version.model';
 export * from './user-process.model';
 export * from './comment-process.model';
 export * from './ecm-company.model';
+export * from './redirection.model';
diff --git a/lib/core/models/redirection.model.ts b/lib/core/models/redirection.model.ts
new file mode 100644
index 0000000000..c44359d843
--- /dev/null
+++ b/lib/core/models/redirection.model.ts
@@ -0,0 +1,33 @@
+/*!
+ * @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.
+ */
+
+/**
+ * This object represent the user redirection guard.*
+ */
+
+export class RedirectionModel {
+    provider: string;
+    url?: string;
+
+    constructor(obj?: any) {
+        if (obj) {
+            this.provider = obj.provider;
+            this.url = obj.url || null;
+        }
+    }
+
+}
diff --git a/lib/core/models/site.model.ts b/lib/core/models/site.model.ts
deleted file mode 100644
index 540b452b18..0000000000
--- a/lib/core/models/site.model.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-/*!
- * @license
- * Copyright 2016 Alfresco Software, Ltd.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { Pagination } from 'alfresco-js-api';
-
-export class SiteContentsModel {
-    id: string;
-    folderId: string;
-
-    constructor(obj?: any) {
-        if (obj) {
-            this.id = obj.id || null;
-            this.folderId = obj.folderId || null;
-        }
-    }
-}
-
-export class SiteMembersModel {
-    role: string;
-    firstName: string;
-    emailNotificationsEnabled: boolean = false;
-    company: any;
-    id: string;
-    enable: boolean = false;
-    email: string;
-
-    constructor(obj?: any) {
-        if (obj) {
-            this.role = obj.role;
-            this.firstName = obj.firstName || null;
-            this.emailNotificationsEnabled = obj.emailNotificationsEnabled;
-            this.company = obj.company || null;
-            this.id = obj.id || null;
-            this.enable = obj.enable;
-            this.email = obj.email;
-        }
-    }
-}
-
-export class SiteModel {
-    role: string;
-    visibility: string;
-    guid: string;
-    description: string;
-    id: string;
-    preset: string;
-    title: string;
-    contents: SiteContentsModel[] = [];
-    members: SiteMembersModel[] = [];
-    pagination: Pagination;
-
-    constructor(obj?: any) {
-        if (obj && obj.entry) {
-            this.role = obj.entry.role || null;
-            this.visibility = obj.entry.visibility || null;
-            this.guid = obj.entry.guid || null;
-            this.description = obj.entry.description || null;
-            this.id = obj.entry.id || null;
-            this.preset = obj.entry.preset;
-            this.title = obj.entry.title;
-            this.pagination = obj.pagination || null;
-
-            if (obj.relations && obj.relations.containers) {
-                obj.relations.containers.list.entries.forEach((content) => {
-                    this.contents.push(new SiteContentsModel(content.entry));
-                });
-            }
-
-            if (obj.relations && obj.relations.members) {
-                obj.relations.members.list.entries.forEach((member) => {
-                    this.members.push(new SiteMembersModel(member.entry));
-                });
-            }
-        }
-    }
-
-}
diff --git a/lib/core/package.json b/lib/core/package.json
index da645a7af6..aad20cb270 100644
--- a/lib/core/package.json
+++ b/lib/core/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@alfresco/adf-core",
   "description": "Alfresco ADF core",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "author": "Alfresco Software, Ltd.",
   "main": "bundles/adf-core.js",
   "repository": {
@@ -12,21 +12,21 @@
     "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
   },
   "dependencies": {
-    "@angular/animations": "5.0.0",
-    "@angular/cdk": "5.0.0-rc0",
-    "@angular/common": "5.0.0",
-    "@angular/compiler": "5.0.0",
-    "@angular/core": "5.0.0",
-    "@angular/flex-layout": "2.0.0-beta.10",
-    "@angular/forms": "5.0.0",
-    "@angular/http": "5.0.0",
-    "@angular/material": "5.0.0-rc0",
-    "@angular/material-moment-adapter": "^5.0.0-rc0",
-    "@angular/platform-browser": "5.0.0",
-    "@angular/platform-browser-dynamic": "5.0.0",
-    "@angular/router": "5.0.0",
+    "@angular/animations": "5.1.1",
+    "@angular/cdk": "5.0.1",
+    "@angular/common": "5.1.1",
+    "@angular/compiler": "5.1.1",
+    "@angular/core": "5.1.1",
+    "@angular/flex-layout": "2.0.0-beta.12",
+    "@angular/forms": "5.1.1",
+    "@angular/http": "5.1.1",
+    "@angular/material": "5.0.1",
+    "@angular/material-moment-adapter": "5.0.1",
+    "@angular/platform-browser": "5.1.1",
+    "@angular/platform-browser-dynamic": "5.1.1",
+    "@angular/router": "5.1.1",
     "@ngx-translate/core": "8.0.0",
-    "alfresco-js-api": "2.0.0",
+    "alfresco-js-api": "2.1.0",
     "chart.js": "2.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
diff --git a/lib/core/pagination/infinite-pagination.component.spec.ts b/lib/core/pagination/infinite-pagination.component.spec.ts
index 8243d80cbb..6b5a9c908b 100644
--- a/lib/core/pagination/infinite-pagination.component.spec.ts
+++ b/lib/core/pagination/infinite-pagination.component.spec.ts
@@ -21,6 +21,8 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { Pagination } from 'alfresco-js-api';
 import { MaterialModule } from '../material.module';
 import { InfinitePaginationComponent } from './infinite-pagination.component';
+import { PaginatedComponent } from './paginated-component.interface';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 describe('InfinitePaginationComponent', () => {
 
@@ -55,62 +57,111 @@ describe('InfinitePaginationComponent', () => {
         TestBed.resetTestingModule();
     });
 
-    it('should show the loading spinner if loading', () => {
-        pagination.hasMoreItems = true;
-        component.pagination = pagination;
-        component.isLoading = true;
-        fixture.detectChanges();
+    describe('Standalone', () => {
 
-        let loadingSpinner = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-spinner"]'));
-        expect(loadingSpinner).not.toBeNull();
-    });
+        it('should show the loading spinner if loading', () => {
+            pagination.hasMoreItems = true;
+            component.pagination = pagination;
+            component.isLoading = true;
+            fixture.detectChanges();
 
-    it('should NOT show the loading spinner if NOT loading', () => {
-        pagination.hasMoreItems = true;
-        component.pagination = pagination;
-        component.isLoading = false;
-        fixture.detectChanges();
-
-        let loadingSpinner = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-spinner"]'));
-        expect(loadingSpinner).toBeNull();
-    });
-
-    it('should show the load more button if NOT loading and has more items', () => {
-        pagination.hasMoreItems = true;
-        component.pagination = pagination;
-        component.isLoading = false;
-        fixture.detectChanges();
-
-        let loadMoreButton = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-button"]'));
-        expect(loadMoreButton).not.toBeNull();
-    });
-
-    it('should NOT show anything if pagination has NO more items', () => {
-        pagination.hasMoreItems = false;
-        component.pagination = pagination;
-        fixture.detectChanges();
-
-        let loadMoreButton = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-button"]'));
-        expect(loadMoreButton).toBeNull();
-        let loadingSpinner = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-spinner"]'));
-        expect(loadingSpinner).toBeNull();
-    });
-
-    it('should trigger the loadMore event with the proper pagination object', (done) => {
-        pagination.hasMoreItems = true;
-        pagination.skipCount = 5;
-        component.pagination = pagination;
-        component.isLoading = false;
-        component.pageSize = 5;
-        fixture.detectChanges();
-
-        component.loadMore.subscribe((newPagination: Pagination) => {
-            expect(newPagination.skipCount).toBe(10);
-            done();
+            let loadingSpinner = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-spinner"]'));
+            expect(loadingSpinner).not.toBeNull();
         });
 
-        let loadMoreButton = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-button"]'));
-        loadMoreButton.triggerEventHandler('click', {});
+        it('should NOT show the loading spinner if NOT loading', () => {
+            pagination.hasMoreItems = true;
+            component.pagination = pagination;
+            component.isLoading = false;
+            fixture.detectChanges();
+
+            let loadingSpinner = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-spinner"]'));
+            expect(loadingSpinner).toBeNull();
+        });
+
+        it('should show the load more button if NOT loading and has more items', () => {
+            pagination.hasMoreItems = true;
+            component.pagination = pagination;
+            component.isLoading = false;
+            fixture.detectChanges();
+
+            let loadMoreButton = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-button"]'));
+            expect(loadMoreButton).not.toBeNull();
+        });
+
+        it('should NOT show anything if pagination has NO more items', () => {
+            pagination.hasMoreItems = false;
+            component.pagination = pagination;
+            fixture.detectChanges();
+
+            let loadMoreButton = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-button"]'));
+            expect(loadMoreButton).toBeNull();
+            let loadingSpinner = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-spinner"]'));
+            expect(loadingSpinner).toBeNull();
+        });
+
+        it('should trigger the loadMore event with the proper pagination object', (done) => {
+            pagination.hasMoreItems = true;
+            pagination.skipCount = 5;
+            component.pagination = pagination;
+            component.isLoading = false;
+            component.pageSize = 5;
+            fixture.detectChanges();
+
+            component.loadMore.subscribe((newPagination: Pagination) => {
+                expect(newPagination.skipCount).toBe(10);
+                done();
+            });
+
+            let loadMoreButton = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-button"]'));
+            loadMoreButton.triggerEventHandler('click', {});
+        });
     });
 
+    describe('Target', () => {
+
+        let testTarget: PaginatedComponent;
+
+        beforeEach(() => {
+
+            pagination = { maxItems: 444, skipCount: 0, totalItems: 888, hasMoreItems: true };
+            testTarget = {
+                pagination: new BehaviorSubject<Pagination>(pagination),
+                supportedPageSizes: [],
+                updatePagination() {}
+            };
+
+            spyOn(testTarget, 'updatePagination');
+        });
+
+        it('should subscribe to target\'s pagination observable to update pagination and pagesize correctly', () => {
+            component.target = testTarget;
+            fixture.detectChanges();
+
+            expect(component.pagination).toBe(pagination);
+            expect(component.pageSize).toBe(pagination.maxItems);
+        });
+
+        it('should call the target\'s updatePagination on invoking the onLoadMore', () => {
+            component.target = testTarget;
+            fixture.detectChanges();
+
+            component.onLoadMore();
+
+            expect(testTarget.updatePagination).toHaveBeenCalledWith({ maxItems: 444, skipCount: 444, totalItems: 888, hasMoreItems: true });
+        });
+
+        it('should unsubscribe from the target\'s pagination on onDestroy', () => {
+            component.target = testTarget;
+            fixture.detectChanges();
+            fixture.destroy();
+
+            const emitNewPaginationEvent = () => {
+                let newPagination = { maxItems: 1, skipCount: 0, totalItems: 2, hasMoreItems: true };
+                testTarget.pagination.next(newPagination);
+            };
+
+            expect(emitNewPaginationEvent).not.toThrow();
+        });
+    });
 });
diff --git a/lib/core/pagination/infinite-pagination.component.ts b/lib/core/pagination/infinite-pagination.component.ts
index 891813ab64..203b9d8a57 100644
--- a/lib/core/pagination/infinite-pagination.component.ts
+++ b/lib/core/pagination/infinite-pagination.component.ts
@@ -15,17 +15,23 @@
  * limitations under the License.
  */
 
+/* tslint:disable:no-input-rename  */
+
 import {
     ChangeDetectionStrategy,
+    ChangeDetectorRef,
     Component,
     EventEmitter,
     Input,
     OnInit,
     Output,
+    OnDestroy,
     ViewEncapsulation
 } from '@angular/core';
-
+import { PaginatedComponent } from './paginated-component.interface';
+import { PaginationQueryParams } from './pagination-query-params.interface';
 import { Pagination } from 'alfresco-js-api';
+import { Subscription } from 'rxjs/Subscription';
 
 @Component({
     selector: 'adf-infinite-pagination',
@@ -35,7 +41,7 @@ import { Pagination } from 'alfresco-js-api';
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None
 })
-export class InfinitePaginationComponent implements OnInit {
+export class InfinitePaginationComponent implements OnInit, OnDestroy {
 
     static DEFAULT_PAGE_SIZE: number = 25;
 
@@ -47,6 +53,9 @@ export class InfinitePaginationComponent implements OnInit {
     @Input()
     pagination: Pagination;
 
+    @Input()
+    target: PaginatedComponent;
+
     @Input()
     pageSize: number = InfinitePaginationComponent.DEFAULT_PAGE_SIZE;
 
@@ -56,7 +65,19 @@ export class InfinitePaginationComponent implements OnInit {
     @Output()
     loadMore: EventEmitter<Pagination> = new EventEmitter<Pagination>();
 
+    private paginationSubscription: Subscription;
+
+    constructor(private cdr: ChangeDetectorRef) {}
+
     ngOnInit() {
+        if (this.target) {
+            this.paginationSubscription = this.target.pagination.subscribe(page => {
+                this.pagination = page;
+                this.pageSize = page.maxItems;
+                this.cdr.detectChanges();
+            });
+        }
+
         if (!this.pagination) {
             this.pagination = InfinitePaginationComponent.DEFAULT_PAGINATION;
         }
@@ -65,5 +86,15 @@ export class InfinitePaginationComponent implements OnInit {
     onLoadMore() {
         this.pagination.skipCount += this.pageSize;
         this.loadMore.next(this.pagination);
+
+        if (this.target) {
+            this.target.updatePagination(<PaginationQueryParams> this.pagination);
+        }
+    }
+
+    ngOnDestroy() {
+        if (this.paginationSubscription) {
+            this.paginationSubscription.unsubscribe();
+        }
     }
 }
diff --git a/lib/core/pagination/paginated-component.interface.ts b/lib/core/pagination/paginated-component.interface.ts
index d745ddda80..34bfd53733 100644
--- a/lib/core/pagination/paginated-component.interface.ts
+++ b/lib/core/pagination/paginated-component.interface.ts
@@ -16,14 +16,12 @@
  */
 
 import { Pagination } from 'alfresco-js-api';
-import { Subject } from 'rxjs/Subject';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 import { PaginationQueryParams } from './pagination-query-params.interface';
 
 export interface PaginatedComponent {
-
-    pagination: Subject<Pagination>;
+    pagination: BehaviorSubject<Pagination>;
     supportedPageSizes: number[];
     updatePagination(params: PaginationQueryParams);
-
 }
diff --git a/lib/core/pagination/pagination.component.spec.ts b/lib/core/pagination/pagination.component.spec.ts
index 21b3e32c10..24c4819f4d 100644
--- a/lib/core/pagination/pagination.component.spec.ts
+++ b/lib/core/pagination/pagination.component.spec.ts
@@ -27,7 +27,7 @@ import { TranslateLoaderService } from '../services/translate-loader.service';
 import { TranslationService } from '../services/translation.service';
 import { PaginationComponent } from './pagination.component';
 import { PaginatedComponent } from './public-api';
-import { Subject } from 'rxjs/Subject';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 class FakePaginationInput implements Pagination {
     count: number = 25;
@@ -91,6 +91,11 @@ describe('PaginationComponent', () => {
             });
     }));
 
+    it('should have an "empty" class if no items present', () => {
+        fixture.detectChanges();
+        expect(fixture.nativeElement.classList.contains('adf-pagination__empty')).toBeTruthy();
+    });
+
     describe('Single page', () => {
         beforeEach(() => {
             component.pagination = new FakePaginationInput(1, 1, 10);
@@ -274,7 +279,7 @@ describe('PaginationComponent', () => {
             const pagination: Pagination = {};
 
             const customComponent = <PaginatedComponent> {
-                pagination: new Subject<Pagination>()
+                pagination: new BehaviorSubject<Pagination>({})
             };
 
             component.target = customComponent;
@@ -289,7 +294,7 @@ describe('PaginationComponent', () => {
             const pagination2: Pagination = {};
 
             const customComponent = <PaginatedComponent> {
-                pagination: new Subject<Pagination>()
+                pagination: new BehaviorSubject<Pagination>({})
             };
 
             component.target = customComponent;
@@ -304,7 +309,7 @@ describe('PaginationComponent', () => {
 
         it('should send pagination event to paginated component', () => {
             const customComponent = <PaginatedComponent> {
-                pagination: new Subject<Pagination>(),
+                pagination: new BehaviorSubject<Pagination>({}),
                 updatePagination() {},
                 supportedPageSizes: []
             };
diff --git a/lib/core/pagination/pagination.component.ts b/lib/core/pagination/pagination.component.ts
index 779c99bf0d..c161002f73 100644
--- a/lib/core/pagination/pagination.component.ts
+++ b/lib/core/pagination/pagination.component.ts
@@ -24,7 +24,8 @@ import {
     Output,
     ViewEncapsulation,
     ChangeDetectorRef,
-    OnDestroy
+    OnDestroy,
+    HostBinding
 } from '@angular/core';
 
 import { Pagination } from 'alfresco-js-api';
@@ -134,6 +135,11 @@ export class PaginationComponent implements OnInit, OnDestroy {
         return this.pagination && this.pagination.count > 0;
     }
 
+    @HostBinding('class.adf-pagination__empty')
+    get isEmpty(): boolean {
+        return !this.hasItems;
+    }
+
     get range(): number[] {
         const { skipCount, maxItems, totalItems } = this.pagination;
         const { isLastPage } = this;
diff --git a/lib/core/pipes/file-size.pipe.spec.ts b/lib/core/pipes/file-size.pipe.spec.ts
index 0e177ad691..e2b0a2f0a8 100644
--- a/lib/core/pipes/file-size.pipe.spec.ts
+++ b/lib/core/pipes/file-size.pipe.spec.ts
@@ -22,7 +22,23 @@ describe('FileSizePipe', () => {
     let pipe: FileSizePipe;
 
     beforeEach(() => {
-        pipe = new FileSizePipe();
+        const translation: any = {
+            instant(key) {
+                const enUs = {
+                    'CORE.FILE_SIZE.BYTES': 'Bytes',
+                    'CORE.FILE_SIZE.KB': 'KB',
+                    'CORE.FILE_SIZE.MB': 'MB',
+                    'CORE.FILE_SIZE.GB': 'GB',
+                    'CORE.FILE_SIZE.TB': 'TB',
+                    'CORE.FILE_SIZE.PB': 'PB',
+                    'CORE.FILE_SIZE.EB': 'EB',
+                    'CORE.FILE_SIZE.ZB': 'ZB',
+                    'CORE.FILE_SIZE.YB': 'YB'
+                };
+                return enUs[key];
+            }
+        };
+        pipe = new FileSizePipe(translation);
     });
 
     it('returns empty string with invalid input', () => {
diff --git a/lib/core/pipes/file-size.pipe.ts b/lib/core/pipes/file-size.pipe.ts
index ac28ba22fb..12cb6f1b9e 100644
--- a/lib/core/pipes/file-size.pipe.ts
+++ b/lib/core/pipes/file-size.pipe.ts
@@ -16,27 +16,34 @@
  */
 
 import { Pipe, PipeTransform } from '@angular/core';
+import { TranslationService } from '../services/translation.service';
 
 @Pipe({
-    name: 'adfFileSize'
+    name: 'adfFileSize',
+    pure: false
 })
 export class FileSizePipe implements PipeTransform {
 
+    constructor(private translation: TranslationService) {
+    }
+
     transform(bytes: number, decimals: number = 2): string {
         if (bytes == null || bytes === undefined) {
             return '';
         }
 
         if (bytes === 0) {
-            return '0 Bytes';
+            return '0 ' + this.translation.instant('CORE.FILE_SIZE.BYTES');
         }
 
         const k = 1024,
             dm = decimals || 2,
-            sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
+            sizes = ['BYTES', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
             i = Math.floor(Math.log(bytes) / Math.log(k));
 
-        return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+        const i18nSize = this.translation.instant(`CORE.FILE_SIZE.${sizes[i]}`);
+
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + i18nSize;
     }
 
 }
diff --git a/lib/core/services/alfresco-api.service.ts b/lib/core/services/alfresco-api.service.ts
index 3f739691d2..a16baa73d8 100644
--- a/lib/core/services/alfresco-api.service.ts
+++ b/lib/core/services/alfresco-api.service.ts
@@ -19,7 +19,7 @@ import { Injectable } from '@angular/core';
 import {
     AlfrescoApi, ContentApi, FavoritesApi, NodesApi,
     PeopleApi, RenditionsApi, SharedlinksApi, SitesApi,
-    VersionsApi
+    VersionsApi, ClassesApi
 } from 'alfresco-js-api';
 import * as alfrescoApi from 'alfresco-js-api';
 import { AppConfigService } from '../app-config/app-config.service';
@@ -70,6 +70,10 @@ export class AlfrescoApiService {
         return this.getInstance().core.versionsApi;
     }
 
+    get classesApi(): ClassesApi {
+        return this.getInstance().core.classesApi;
+    }
+
     constructor(private appConfig: AppConfigService,
                 private storage: StorageService) {
 
diff --git a/lib/core/services/auth-guard-bpm.service.spec.ts b/lib/core/services/auth-guard-bpm.service.spec.ts
index 0ec1f504e0..86e8c20b70 100644
--- a/lib/core/services/auth-guard-bpm.service.spec.ts
+++ b/lib/core/services/auth-guard-bpm.service.spec.ts
@@ -15,14 +15,14 @@
  * limitations under the License.
  */
 
-import { async, inject, TestBed } from '@angular/core/testing';
-import { Router } from '@angular/router';
+import { async, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { CookieServiceMock } from './../mock/cookie.service.mock';
 import { AlfrescoApiService } from './alfresco-api.service';
 import { SettingsService } from './settings.service';
 import { AppConfigModule } from '../app-config/app-config.module';
+import { AppConfigService } from '../app-config/app-config.service';
 import { AuthGuardBpm } from './auth-guard-bpm.service';
 import { AuthenticationService } from './authentication.service';
 import { CookieService } from './cookie.service';
@@ -30,9 +30,15 @@ import { LogService } from './log.service';
 import { StorageService } from './storage.service';
 import { TranslateLoaderService } from './translate-loader.service';
 import { UserPreferencesService } from './user-preferences.service';
+import { RouterStateSnapshot, Router } from '@angular/router';
 
 describe('AuthGuardService BPM', () => {
 
+    let authGuard: AuthGuardBpm;
+    let authService: AuthenticationService;
+    let routerService: Router;
+    let appConfigService: AppConfigService;
+
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             imports: [
@@ -58,43 +64,58 @@ describe('AuthGuardService BPM', () => {
         }).compileComponents();
     }));
 
-    it('if the alfresco js api is logged in should canActivate be true',
-        async(inject([AuthGuardBpm, Router, SettingsService, StorageService, AuthenticationService], (auth, router, settingsService, storage, authService) => {
-            spyOn(router, 'navigate');
+    beforeEach(() => {
+        authService = TestBed.get(AuthenticationService);
+        authGuard = TestBed.get(AuthGuardBpm);
+        routerService = TestBed.get(Router);
+        appConfigService = TestBed.get(AppConfigService);
+    });
 
-            authService.isBpmLoggedIn = () => {
-                return true;
-            };
+    it('if the alfresco js api is logged in should canActivate be true', async(() => {
+        spyOn(authService, 'isBpmLoggedIn').and.returnValue(true);
+        const router: RouterStateSnapshot = <RouterStateSnapshot>  {url : ''};
 
-            expect(auth.canActivate(null, { url: '' })).toBeTruthy();
-            expect(router.navigate).not.toHaveBeenCalled();
-        }))
-    );
+        expect(authGuard.canActivate(null, router)).toBeTruthy();
+    }));
 
-    it('if the alfresco js api is NOT logged in should canActivate be false',
-        async(inject([AuthGuardBpm, Router, SettingsService, StorageService, AuthenticationService], (auth, router, settingsService, storage, authService) => {
+    it('if the alfresco js api is NOT logged in should canActivate be false', async(() => {
+        spyOn(authService, 'isBpmLoggedIn').and.returnValue(false);
+        spyOn(routerService, 'navigate').and.stub();
+        const router: RouterStateSnapshot = <RouterStateSnapshot> { url: '' };
 
-            spyOn(router, 'navigate');
+        expect(authGuard.canActivate(null, router)).toBeFalsy();
+    }));
 
-            authService.isBpmLoggedIn = () => {
-                return false;
-            };
+    it('if the alfresco js api is NOT logged in should trigger a redirect event', async(() => {
+        spyOn(routerService, 'navigate');
+        spyOn(authService, 'isBpmLoggedIn').and.returnValue(false);
+        const router: RouterStateSnapshot = <RouterStateSnapshot>  {url : ''};
 
-            expect(auth.canActivate(null, { url: '' })).toBeFalsy();
-            expect(router.navigate).toHaveBeenCalled();
-        }))
-    );
+        expect(authGuard.canActivate(null, router)).toBeFalsy();
+        expect(routerService.navigate).toHaveBeenCalledWith(['/login']);
+    }));
 
-    it('should set redirect url',
-        async(inject([AuthGuardBpm, Router, AuthenticationService], (auth, router, authService) => {
-            const state = { url: 'some-url' };
+    it('should set redirect url', async(() => {
+        spyOn(authService, 'setRedirectUrl').and.callThrough();
+        spyOn(routerService, 'navigate').and.stub();
+        const router: RouterStateSnapshot = <RouterStateSnapshot> { url: 'some-url' };
 
-            spyOn(router, 'navigate');
-            spyOn(authService, 'setRedirectUrl');
+        authGuard.canActivate(null, router);
 
-            auth.canActivate(null , state);
+        expect(authService.setRedirectUrl).toHaveBeenCalledWith({provider: 'BPM', url: 'some-url' } );
+        expect(authService.getRedirectUrl('BPM')).toBe('some-url');
+    }));
+
+    it('should get redirect url from config if there is one configured', async(() => {
+        appConfigService.config.loginRoute = 'fakeLoginRoute';
+        spyOn(authService, 'setRedirectUrl').and.callThrough();
+        spyOn(routerService, 'navigate').and.stub();
+        const router: RouterStateSnapshot = <RouterStateSnapshot> { url: 'some-url' };
+
+        authGuard.canActivate(null, router);
+
+        expect(authService.setRedirectUrl).toHaveBeenCalledWith({provider: 'BPM', url: 'some-url' } );
+        expect(routerService.navigate).toHaveBeenCalledWith(['/fakeLoginRoute']);
+    }));
 
-            expect(authService.setRedirectUrl).toHaveBeenCalledWith(state.url);
-        }))
-    );
 });
diff --git a/lib/core/services/auth-guard-bpm.service.ts b/lib/core/services/auth-guard-bpm.service.ts
index 9f302bf93d..7aa826e4e0 100644
--- a/lib/core/services/auth-guard-bpm.service.ts
+++ b/lib/core/services/auth-guard-bpm.service.ts
@@ -18,15 +18,16 @@
 import { Injectable } from '@angular/core';
 import {
   ActivatedRouteSnapshot, CanActivate, CanActivateChild,
-  Router,
-  RouterStateSnapshot
+  RouterStateSnapshot, Router
 } from '@angular/router';
-
+import { AppConfigService } from '../app-config/app-config.service';
 import { AuthenticationService } from './authentication.service';
 
 @Injectable()
 export class AuthGuardBpm implements CanActivate, CanActivateChild {
-    constructor(private authService: AuthenticationService, private router: Router) {}
+    constructor(private authService: AuthenticationService,
+                private router: Router,
+                private appConfig: AppConfigService) {}
 
     canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
         return this.checkLogin(state.url);
@@ -41,9 +42,16 @@ export class AuthGuardBpm implements CanActivate, CanActivateChild {
             return true;
         }
 
-        this.authService.setRedirectUrl(redirectUrl);
+        this.authService.setRedirectUrl({ provider: 'BPM', url: redirectUrl });
+        const pathToLogin = this.getRouteDestinationForLogin();
+        this.router.navigate(['/' + pathToLogin]);
 
-        this.router.navigate(['/login']);
         return false;
     }
+
+    private getRouteDestinationForLogin(): string {
+        return this.appConfig &&
+               this.appConfig.get<string>('loginRoute') ?
+                        this.appConfig.get<string>('loginRoute') : 'login';
+    }
 }
diff --git a/lib/core/services/auth-guard-ecm.service.spec.ts b/lib/core/services/auth-guard-ecm.service.spec.ts
index 42a78586d9..7f02eeeaec 100644
--- a/lib/core/services/auth-guard-ecm.service.spec.ts
+++ b/lib/core/services/auth-guard-ecm.service.spec.ts
@@ -125,7 +125,7 @@ class TestConfig {
     }
 }
 
-describe('CanActivateLoggedIn', () => {
+describe('AuthGuardService ECM', () => {
     describe('user is not logged in', () => {
         beforeEach(async(() => {
             this.test = new TestConfig({
@@ -211,7 +211,7 @@ describe('CanActivateLoggedIn', () => {
         }));
 
         it('should set redirect url', () => {
-            expect(this.auth.setRedirectUrl).toHaveBeenCalledWith('some-url');
+            expect(this.auth.setRedirectUrl).toHaveBeenCalledWith({ provider: 'ECM', url: 'some-url' });
         });
     });
 
diff --git a/lib/core/services/auth-guard-ecm.service.ts b/lib/core/services/auth-guard-ecm.service.ts
index 3858d305b8..28ef5119ef 100644
--- a/lib/core/services/auth-guard-ecm.service.ts
+++ b/lib/core/services/auth-guard-ecm.service.ts
@@ -16,16 +16,18 @@
  */
 
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, Router } from '@angular/router';
 import { AlfrescoApiService } from './alfresco-api.service';
 import { AuthenticationService } from './authentication.service';
+import { AppConfigService } from '../app-config/app-config.service';
 
 @Injectable()
 export class AuthGuardEcm implements CanActivate {
     constructor(
         private authService: AuthenticationService,
         private apiService: AlfrescoApiService,
-        private router: Router) {
+        private router: Router,
+        private appConfig: AppConfigService) {
     }
 
     private get authApi() {
@@ -51,11 +53,18 @@ export class AuthGuardEcm implements CanActivate {
 
         return this.isLoggedIn().then(isLoggedIn => {
             if (!isLoggedIn) {
-                this.authService.setRedirectUrl(state.url);
-                this.router.navigate([ '/login' ]);
+                this.authService.setRedirectUrl({ provider: 'ECM', url: state.url });
+                const pathToLogin = this.getRouteDestinationForLogin();
+                this.router.navigate(['/' + pathToLogin]);
             }
 
             return isLoggedIn;
         });
     }
+
+    private getRouteDestinationForLogin(): string {
+        return this.appConfig &&
+               this.appConfig.get<string>('loginRoute') ?
+                        this.appConfig.get<string>('loginRoute') : 'login';
+    }
 }
diff --git a/lib/core/services/auth-guard.service.spec.ts b/lib/core/services/auth-guard.service.spec.ts
index a5f21bc583..35771a43a2 100644
--- a/lib/core/services/auth-guard.service.spec.ts
+++ b/lib/core/services/auth-guard.service.spec.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, inject, TestBed } from '@angular/core/testing';
+import { async, TestBed } from '@angular/core/testing';
 import { Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
@@ -24,6 +24,7 @@ import { CookieServiceMock } from './../mock/cookie.service.mock';
 import { AlfrescoApiService } from './alfresco-api.service';
 import { SettingsService } from './settings.service';
 import { AppConfigModule } from '../app-config/app-config.module';
+import { AppConfigService } from '../app-config/app-config.service';
 import { AuthGuard } from './auth-guard.service';
 import { AuthenticationService } from './authentication.service';
 import { CookieService } from './cookie.service';
@@ -34,6 +35,10 @@ import { UserPreferencesService } from './user-preferences.service';
 
 describe('AuthGuardService', () => {
     let state;
+    let authService: AuthenticationService;
+    let router: Router;
+    let service: AuthGuard;
+    let appConfigService: AppConfigService;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
@@ -62,45 +67,50 @@ describe('AuthGuardService', () => {
 
     beforeEach(() => {
         state = { url: '' };
+        authService = TestBed.get(AuthenticationService);
+        router = TestBed.get(Router);
+        service = TestBed.get(AuthGuard);
+        appConfigService = TestBed.get(AppConfigService);
     });
 
-    it('if the alfresco js api is logged in should canActivate be true',
-        async(inject([AuthGuard, Router, SettingsService, StorageService, AuthenticationService], (auth, router, settingsService, storage, authService) => {
-            spyOn(router, 'navigate');
+    it('if the alfresco js api is logged in should canActivate be true', async(() => {
+        spyOn(router, 'navigate');
+        spyOn(authService, 'isLoggedIn').and.returnValue(true);
 
-            authService.isLoggedIn = () => {
-                return true;
-            };
+        expect(service.canActivate(null, state)).toBeTruthy();
+        expect(router.navigate).not.toHaveBeenCalled();
+    }));
 
-            expect(auth.canActivate(null, state)).toBeTruthy();
-            expect(router.navigate).not.toHaveBeenCalled();
-        }))
-    );
+    it('if the alfresco js api is NOT logged in should canActivate be false', async(() => {
+        spyOn(router, 'navigate');
+        spyOn(authService, 'isLoggedIn').and.returnValue(false);
 
-    it('if the alfresco js api is NOT logged in should canActivate be false',
-        async(inject([AuthGuard, Router, SettingsService, StorageService, AuthenticationService], (auth, router, settingsService, storage, authService) => {
+        expect(service.canActivate(null, state)).toBeFalsy();
+        expect(router.navigate).toHaveBeenCalled();
+    }));
 
-            spyOn(router, 'navigate');
+    it('should set redirect url', async(() => {
+        state.url = 'some-url';
 
-            authService.isLoggedIn = () => {
-                return false;
-            };
+        spyOn(router, 'navigate');
+        spyOn(authService, 'setRedirectUrl');
 
-            expect(auth.canActivate(null, state)).toBeFalsy();
-            expect(router.navigate).toHaveBeenCalled();
-        }))
-    );
+        service.canActivate(null, state);
 
-    it('should set redirect url',
-        async(inject([AuthGuard, Router, AuthenticationService], (auth, router, authService) => {
-            state.url = 'some-url';
+        expect(authService.setRedirectUrl).toHaveBeenCalledWith({ provider: 'ALL', url: 'some-url' });
+        expect(router.navigate).toHaveBeenCalledWith(['/login']);
+    }));
 
-            spyOn(router, 'navigate');
-            spyOn(authService, 'setRedirectUrl');
+    it('should get redirect url from config if there is one configured', async(() => {
+        state.url = 'some-url';
+        appConfigService.config.loginRoute = 'fakeLoginRoute';
 
-            auth.canActivate(null , state);
+        spyOn(router, 'navigate');
+        spyOn(authService, 'setRedirectUrl');
 
-            expect(authService.setRedirectUrl).toHaveBeenCalledWith(state.url);
-        }))
-    );
+        service.canActivate(null, state);
+
+        expect(authService.setRedirectUrl).toHaveBeenCalledWith({ provider: 'ALL', url: 'some-url' });
+        expect(router.navigate).toHaveBeenCalledWith(['/fakeLoginRoute']);
+    }));
 });
diff --git a/lib/core/services/auth-guard.service.ts b/lib/core/services/auth-guard.service.ts
index d10cd781d4..ff6224e5f5 100644
--- a/lib/core/services/auth-guard.service.ts
+++ b/lib/core/services/auth-guard.service.ts
@@ -17,16 +17,17 @@
 
 import { Injectable } from '@angular/core';
 import {
-  ActivatedRouteSnapshot, CanActivate, CanActivateChild,
-  Router,
-  RouterStateSnapshot
+  ActivatedRouteSnapshot, CanActivate,
+  CanActivateChild, RouterStateSnapshot, Router
 } from '@angular/router';
-
+import { AppConfigService } from '../app-config/app-config.service';
 import { AuthenticationService } from './authentication.service';
 
 @Injectable()
 export class AuthGuard implements CanActivate, CanActivateChild {
-    constructor(private authService: AuthenticationService, private router: Router) {}
+    constructor(private authService: AuthenticationService,
+                private router: Router,
+                private appConfig: AppConfigService) {}
 
     canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
         const redirectUrl = state.url;
@@ -43,9 +44,16 @@ export class AuthGuard implements CanActivate, CanActivateChild {
             return true;
         }
 
-        this.authService.setRedirectUrl(redirectUrl);
+        this.authService.setRedirectUrl({ provider: 'ALL', url: redirectUrl } );
+        const pathToLogin = this.getRouteDestinationForLogin();
+        this.router.navigate(['/' + pathToLogin]);
 
-        this.router.navigate(['/login']);
         return false;
     }
+
+    private getRouteDestinationForLogin(): string {
+        return this.appConfig &&
+               this.appConfig.get<string>('loginRoute') ?
+                        this.appConfig.get<string>('loginRoute') : 'login';
+    }
 }
diff --git a/lib/core/services/authentication.service.spec.ts b/lib/core/services/authentication.service.spec.ts
index 1f0cf9e6a1..4f25dd591c 100644
--- a/lib/core/services/authentication.service.spec.ts
+++ b/lib/core/services/authentication.service.spec.ts
@@ -258,6 +258,24 @@ describe('AuthenticationService', () => {
             expect(authService.isLoggedIn()).toBe(false);
             expect(authService.isEcmLoggedIn()).toBe(false);
         });
+
+        it('[ECM] should set/get redirectUrl when provider is ECM', () => {
+            authService.setRedirectUrl({provider: 'ECM', url: 'some-url' } );
+
+            expect(authService.getRedirectUrl(preferences.authType)).toBe('some-url');
+        });
+
+        it('[ECM] should set/get redirectUrl when provider is BPM', () => {
+            authService.setRedirectUrl({provider: 'BPM', url: 'some-url' } );
+
+            expect(authService.getRedirectUrl(preferences.authType)).toBeNull();
+        });
+
+        it('[ECM] should return null as redirectUrl when redirectUrl field is not set', () => {
+            authService.setRedirectUrl( null );
+
+            expect(authService.getRedirectUrl(preferences.authType)).toBeNull();
+        });
     });
 
     describe('when the setting is BPM', () => {
@@ -367,6 +385,24 @@ describe('AuthenticationService', () => {
                 'status': 403
             });
         });
+
+        it('[BPM] should set/get redirectUrl when provider is BPM', () => {
+            authService.setRedirectUrl({provider: 'BPM', url: 'some-url' } );
+
+            expect(authService.getRedirectUrl(preferences.authType)).toBe('some-url');
+        });
+
+        it('[BPM] should set/get redirectUrl when provider is ECM', () => {
+            authService.setRedirectUrl({provider: 'ECM', url: 'some-url' } );
+
+            expect(authService.getRedirectUrl(preferences.authType)).toBeNull();
+        });
+
+        it('[BPM] should return null as redirectUrl when redirectUrl field is not set', () => {
+            authService.setRedirectUrl( null );
+
+            expect(authService.getRedirectUrl(preferences.authType)).toBeNull();
+        });
     });
 
     describe('when the setting is both ECM and BPM ', () => {
@@ -396,7 +432,7 @@ describe('AuthenticationService', () => {
             });
         });
 
-        xit('[ALL] should return login fail if only ECM call fail', (done) => {
+        it('[ALL] should return login fail if only ECM call fail', (done) => {
             authService.login('fake-username', 'fake-password').subscribe(
                 (res) => {
                 },
@@ -417,7 +453,7 @@ describe('AuthenticationService', () => {
             });
         });
 
-        xit('[ALL] should return login fail if only BPM call fail', (done) => {
+        it('[ALL] should return login fail if only BPM call fail', (done) => {
             authService.login('fake-username', 'fake-password').subscribe(
                 (res) => {
                 },
@@ -461,11 +497,30 @@ describe('AuthenticationService', () => {
                 'status': 403
             });
         });
+
+        it('[ALL] should set/get redirectUrl when provider is ALL', () => {
+            authService.setRedirectUrl({provider: 'ALL', url: 'some-url' } );
+
+            expect(authService.getRedirectUrl(preferences.authType)).toBe('some-url');
+        });
+
+        it('[ALL] should set/get redirectUrl when provider is BPM', () => {
+            authService.setRedirectUrl({provider: 'BPM', url: 'some-url' } );
+
+            expect(authService.getRedirectUrl(preferences.authType)).toBe('some-url');
+        });
+
+        it('[ALL] should set/get redirectUrl when provider is ECM', () => {
+            authService.setRedirectUrl({provider: 'ECM', url: 'some-url' } );
+
+            expect(authService.getRedirectUrl(preferences.authType)).toBe('some-url');
+        });
+
+        it('[ALL] should return null as redirectUrl when redirectUrl field is not set', () => {
+            authService.setRedirectUrl( null );
+
+            expect(authService.getRedirectUrl(preferences.authType)).toBeNull();
+        });
     });
 
-    it('should set/get redirectUrl', () => {
-        authService.setRedirectUrl('some-url');
-
-        expect(authService.getRedirectUrl()).toBe('some-url');
-    });
 });
diff --git a/lib/core/services/authentication.service.ts b/lib/core/services/authentication.service.ts
index 4ca675ee29..5c4821b6cc 100644
--- a/lib/core/services/authentication.service.ts
+++ b/lib/core/services/authentication.service.ts
@@ -26,13 +26,14 @@ import { UserPreferencesService } from './user-preferences.service';
 import 'rxjs/add/observable/fromPromise';
 import 'rxjs/add/operator/catch';
 import 'rxjs/add/observable/throw';
+import { RedirectionModel } from '../models/redirection.model';
 
 const REMEMBER_ME_COOKIE_KEY = 'ALFRESCO_REMEMBER_ME';
 const REMEMBER_ME_UNTIL = 1000 * 60 * 60 * 24 * 30 ;
 
 @Injectable()
 export class AuthenticationService {
-    private redirectUrl: string = '';
+    private redirectUrl: RedirectionModel = null;
 
     onLogin: Subject<any> = new Subject<any>();
     onLogout: Subject<any> = new Subject<any>();
@@ -233,12 +234,20 @@ export class AuthenticationService {
         return this.alfrescoApi.getInstance().bpmAuth.username;
     }
 
-    setRedirectUrl(url: string) {
+    setRedirectUrl(url: RedirectionModel) {
         this.redirectUrl = url;
     }
 
-    getRedirectUrl(): string {
-        return this.redirectUrl;
+    getRedirectUrl(provider: string): string {
+        return this.hasValidRedirection(provider) ? this.redirectUrl.url : null;
+    }
+
+    private hasValidRedirection(provider: string): boolean {
+        return this.redirectUrl && (this.redirectUrl.provider === provider || this.hasSelectedProviderAll(provider));
+    }
+
+    private hasSelectedProviderAll(provider: string): boolean {
+        return this.redirectUrl && (this.redirectUrl.provider === 'ALL' || provider === 'ALL');
     }
 
     /**
diff --git a/lib/core/services/content.service.ts b/lib/core/services/content.service.ts
index 3661863b77..50c7a606de 100644
--- a/lib/core/services/content.service.ts
+++ b/lib/core/services/content.service.ts
@@ -133,35 +133,35 @@ export class ContentService {
     /**
      * Get thumbnail URL for the given document node.
      *
-     * @param {string|MinimalNodeEntity} nodeId Node to get URL for.
+     * @param {string|MinimalNodeEntity} nodeId or node to get URL for.
      * @param {boolean} [attachment] Retrieve content as an attachment for download
      * @param {string} [ticket] Custom ticket to use for authentication
      * @returns {string} The URL address pointing to the content.
      */
-    getDocumentThumbnailUrl(nodeId: any, attachment?: boolean, ticket?: string): string {
+    getDocumentThumbnailUrl(node: any, attachment?: boolean, ticket?: string): string {
 
-        if (nodeId && nodeId.entry) {
-            nodeId = nodeId.entry.id;
+        if (node && node.entry) {
+            node = node.entry.id;
         }
 
-        return this.contentApi.getDocumentThumbnailUrl(nodeId, attachment, ticket);
+        return this.contentApi.getDocumentThumbnailUrl(node, attachment, ticket);
     }
 
     /**
      * Get content URL for the given node.
      *
-     * @param nodeId {string|MinimalNodeEntity} Node to get URL for.
+     * @param node {string|MinimalNodeEntity} nodeId or node to get URL for.
      * @param {boolean} [attachment] Retrieve content as an attachment for download
      * @param {string} [ticket] Custom ticket to use for authentication
      * @returns {string} The URL address pointing to the content.
      */
-    getContentUrl(nodeId: any, attachment?: boolean, ticket?: string): string {
+    getContentUrl(node: any, attachment?: boolean, ticket?: string): string {
 
-        if (nodeId && nodeId.entry) {
-            nodeId = nodeId.entry.id;
+        if (node && node.entry) {
+            node = node.entry.id;
         }
 
-        return this.contentApi.getContentUrl(nodeId, attachment, ticket);
+        return this.contentApi.getContentUrl(node, attachment, ticket);
     }
 
     /**
diff --git a/lib/core/services/dynamic-component-mapper.service.ts b/lib/core/services/dynamic-component-mapper.service.ts
index c654dce9f1..b8a6d1eaac 100644
--- a/lib/core/services/dynamic-component-mapper.service.ts
+++ b/lib/core/services/dynamic-component-mapper.service.ts
@@ -16,14 +16,13 @@
  */
 
 import { Type } from '@angular/core';
+import { getType } from './get-type';
 
 export interface DynamicComponentModel { type: string; }
 export type DynamicComponentResolveFunction = (model: DynamicComponentModel) => Type<{}>;
 export class DynamicComponentResolver {
     static fromType(type: Type<{}>): DynamicComponentResolveFunction {
-        return (model: DynamicComponentModel) => {
-            return type;
-        };
+        return getType(type);
     }
 }
 
diff --git a/lib/core/services/favorites-api.service.ts b/lib/core/services/favorites-api.service.ts
index 25a501d459..930d4c3575 100644
--- a/lib/core/services/favorites-api.service.ts
+++ b/lib/core/services/favorites-api.service.ts
@@ -23,16 +23,6 @@ import { UserPreferencesService } from './user-preferences.service';
 
 @Injectable()
 export class FavoritesApiService {
-    static remapFavoritesData(data: any = {}): NodePaging {
-        const list = (data.list || {});
-        const pagination = (list.pagination || {});
-        const entries: any[] = FavoritesApiService
-            .remapFavoriteEntries(list.entries || []);
-
-        return <NodePaging> {
-            list: { entries, pagination }
-        };
-    }
 
     static remapEntry({ entry }: any): any {
         entry.properties = {
@@ -43,7 +33,18 @@ export class FavoritesApiService {
         return { entry };
     }
 
-    static remapFavoriteEntries(entries: any[]) {
+    remapFavoritesData(data: any = {}): NodePaging {
+        const list = (data.list || {});
+        const pagination = (list.pagination || {});
+        const entries: any[] = this
+            .remapFavoriteEntries(list.entries || []);
+
+        return <NodePaging> {
+            list: { entries, pagination }
+        };
+    }
+
+    remapFavoriteEntries(entries: any[]) {
         return entries
             .map(({ entry: { target }}: any) => ({
                 entry: target.file || target.folder
@@ -72,7 +73,7 @@ export class FavoritesApiService {
         const queryOptions = Object.assign(defaultOptions, options);
         const promise = favoritesApi
             .getFavorites(personId, queryOptions)
-            .then(FavoritesApiService.remapFavoritesData);
+            .then(this.remapFavoritesData);
 
         return Observable
             .fromPromise(promise)
diff --git a/lib/core/services/get-type.ts b/lib/core/services/get-type.ts
new file mode 100644
index 0000000000..2329cbc3d9
--- /dev/null
+++ b/lib/core/services/get-type.ts
@@ -0,0 +1,20 @@
+/*!
+ * @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.
+ */
+
+export function getType(type: any): any {
+    return () => type;
+}
diff --git a/lib/core/services/public-api.ts b/lib/core/services/public-api.ts
index 053cfdff7c..f9eea442a1 100644
--- a/lib/core/services/public-api.ts
+++ b/lib/core/services/public-api.ts
@@ -34,8 +34,6 @@ export * from './translate-loader.service';
 export * from './thumbnail.service';
 export * from './upload.service';
 export * from './dynamic-component-mapper.service';
-export * from './card-item-types.service';
-export * from './card-view-update.service';
 export * from './user-preferences.service';
 export * from './highlight-transform.service';
 export * from './deleted-nodes-api.service';
@@ -48,3 +46,4 @@ export * from './shared-links-api.service';
 export * from './sites.service';
 export * from './discovery-api.service';
 export * from './comment-process.service';
+export * from './search-configuration.service';
diff --git a/lib/core/services/renditions.service.ts b/lib/core/services/renditions.service.ts
index 21718b1cb4..3ccc69af02 100644
--- a/lib/core/services/renditions.service.ts
+++ b/lib/core/services/renditions.service.ts
@@ -71,7 +71,7 @@ export class RenditionsService {
     }
 
     getRenditionUrl(nodeId: string, encoding: string): string {
-        return this.apiService.contentApi.getRenditionUrl(nodeId, 'pdf');
+        return this.apiService.contentApi.getRenditionUrl(nodeId, encoding);
     }
 
     getRendition(nodeId: string, encoding: string): Observable<RenditionEntry> {
diff --git a/lib/core/services/search-configuration.service.ts b/lib/core/services/search-configuration.service.ts
new file mode 100644
index 0000000000..92d490d382
--- /dev/null
+++ b/lib/core/services/search-configuration.service.ts
@@ -0,0 +1,45 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Injectable } from '@angular/core';
+import { QueryBody } from 'alfresco-js-api';
+import { SearchConfigurationInterface } from '../interface/search-configuration.interface';
+
+@Injectable()
+export class SearchConfigurationService implements SearchConfigurationInterface {
+
+    constructor() {
+    }
+
+    public generateQueryBody(searchTerm: string, maxResults: string, skipCount: string): QueryBody {
+        let defaultQueryBody: QueryBody = {
+            query: {
+                query: searchTerm ? `${searchTerm}* OR name:${searchTerm}*` : searchTerm
+            },
+            include: ['path', 'allowableOperations'],
+            paging: {
+                maxItems: maxResults,
+                skipCount: skipCount
+            },
+            filterQueries: [
+                { query: "TYPE:'cm:folder' OR TYPE:'cm:content'" },
+                { query: 'NOT cm:creator:System' }]
+        };
+
+        return defaultQueryBody;
+    }
+}
diff --git a/lib/core/services/search.service.ts b/lib/core/services/search.service.ts
index fa7806bed7..bcf345ca59 100644
--- a/lib/core/services/search.service.ts
+++ b/lib/core/services/search.service.ts
@@ -21,15 +21,14 @@ import { Observable } from 'rxjs/Observable';
 import { AlfrescoApiService } from './alfresco-api.service';
 import { AuthenticationService } from './authentication.service';
 import 'rxjs/add/observable/throw';
+import { SearchConfigurationService } from './search-configuration.service';
 
-/**
- * Internal service used by Document List component.
- */
 @Injectable()
 export class SearchService {
 
     constructor(public authService: AuthenticationService,
-                private apiService: AlfrescoApiService) {
+                private apiService: AlfrescoApiService,
+                private searchConfigurationService: SearchConfigurationService) {
     }
 
     getNodeQueryResults(term: string, options?: SearchOptions): Observable<NodePaging> {
@@ -38,8 +37,8 @@ export class SearchService {
             .catch(err => this.handleError(err));
     }
 
-    search(query: QueryBody): Observable<NodePaging> {
-        const searchQuery = Object.assign(query);
+    search(searchTerm: string, maxResults: string, skipCount: string): Observable<NodePaging> {
+        const searchQuery = Object.assign(this.searchConfigurationService.generateQueryBody(searchTerm, maxResults, skipCount));
         const promise = this.apiService.getInstance().search.searchApi.search(searchQuery);
 
         return Observable
@@ -47,6 +46,14 @@ export class SearchService {
             .catch(err => this.handleError(err));
     }
 
+    searchByQueryBody(queryBody: QueryBody): Observable<NodePaging> {
+        const promise = this.apiService.getInstance().search.searchApi.search(queryBody);
+
+        return Observable
+            .fromPromise(promise)
+            .catch(err => this.handleError(err));
+    }
+
     private handleError(error: any): Observable<any> {
         return Observable.throw(error || 'Server error');
     }
diff --git a/lib/core/services/service.module.ts b/lib/core/services/service.module.ts
index 2a60514026..4a905442b7 100644
--- a/lib/core/services/service.module.ts
+++ b/lib/core/services/service.module.ts
@@ -23,8 +23,6 @@ import { AuthGuardBpm } from './auth-guard-bpm.service';
 import { AuthGuardEcm } from './auth-guard-ecm.service';
 import { AuthGuard } from './auth-guard.service';
 import { AuthenticationService } from './authentication.service';
-import { CardItemTypeService } from './card-item-types.service';
-import { CardViewUpdateService } from './card-view-update.service';
 import { CommentProcessService } from './comment-process.service';
 import { ContentService } from './content.service';
 import { CookieService } from './cookie.service';
@@ -49,6 +47,7 @@ import { TranslateLoaderService } from './translate-loader.service';
 import { TranslationService } from './translation.service';
 import { UploadService } from './upload.service';
 import { UserPreferencesService } from './user-preferences.service';
+import { SearchConfigurationService } from './search-configuration.service';
 
 @NgModule({
     imports: [],
@@ -72,8 +71,6 @@ import { UserPreferencesService } from './user-preferences.service';
         TranslateLoaderService,
         ThumbnailService,
         UploadService,
-        CardItemTypeService,
-        CardViewUpdateService,
         UserPreferencesService,
         HighlightTransformService,
         DeletedNodesApiService,
@@ -85,7 +82,8 @@ import { UserPreferencesService } from './user-preferences.service';
         SharedLinksApiService,
         SitesService,
         DiscoveryApiService,
-        CommentProcessService
+        CommentProcessService,
+        SearchConfigurationService
     ],
     exports: [
     ]
diff --git a/lib/core/services/sites-api.spec.ts b/lib/core/services/sites.service.spec.ts
similarity index 97%
rename from lib/core/services/sites-api.spec.ts
rename to lib/core/services/sites.service.spec.ts
index a9a55de4d3..39abcb24a5 100644
--- a/lib/core/services/sites-api.spec.ts
+++ b/lib/core/services/sites.service.spec.ts
@@ -76,7 +76,7 @@ describe('Sites service', () => {
 
     it('Should get a list of users sites', (done) => {
         service.getSites().subscribe((data) => {
-            expect(data[0].title).toBe('FAKE');
+            expect(data.list.entries[0].entry.title).toBe('FAKE');
             done();
         });
 
@@ -111,7 +111,7 @@ describe('Sites service', () => {
 
     it('Should get single sites via siteId', (done) => {
         service.getSite('fake-site-id').subscribe((data) => {
-            expect(data.title).toBe('FAKE-SINGLE-TITLE');
+            expect(data.entry.title).toBe('FAKE-SINGLE-TITLE');
             done();
         });
 
diff --git a/lib/core/services/sites.service.ts b/lib/core/services/sites.service.ts
index ce71f8b7e3..e669a1fd53 100644
--- a/lib/core/services/sites.service.ts
+++ b/lib/core/services/sites.service.ts
@@ -18,10 +18,10 @@
 import { Injectable } from '@angular/core';
 import { Response } from '@angular/http';
 import { Observable } from 'rxjs/Observable';
-import { SiteModel } from '../models/site.model';
 import { AlfrescoApiService } from './alfresco-api.service';
 import 'rxjs/add/observable/fromPromise';
 import 'rxjs/add/operator/catch';
+import { SitePaging, SiteEntry } from 'alfresco-js-api';
 
 @Injectable()
 export class SitesService {
@@ -29,35 +29,33 @@ export class SitesService {
     constructor(
         private apiService: AlfrescoApiService) { }
 
-    getSites(opts: any = {}): any {
+    getSites(opts: any = {}): Observable<SitePaging> {
         const defaultOptions = {
             skipCount: 0,
             include: ['properties']
         };
         const queryOptions = Object.assign({}, defaultOptions, opts);
         return Observable.fromPromise(this.apiService.getInstance().core.sitesApi.getSites(queryOptions))
-            .map((res) => this.convertToModel(res))
             .catch(this.handleError);
     }
 
-    getSite(siteId: string, opts?: any): any {
+    getSite(siteId: string, opts?: any): Observable<SiteEntry> {
         return Observable.fromPromise(this.apiService.getInstance().core.sitesApi.getSite(siteId, opts))
-            .map((res: any) => new SiteModel(res))
             .catch(this.handleError);
     }
 
-    deleteSite(siteId: string, permanentFlag: boolean = true): any {
+    deleteSite(siteId: string, permanentFlag: boolean = true): Observable<any> {
         let options: any = {};
         options.permanent = permanentFlag;
         return Observable.fromPromise(this.apiService.getInstance().core.sitesApi.deleteSite(siteId, options)
             .catch(this.handleError));
     }
 
-    getSiteContent(siteId: string): Observable<any> {
+    getSiteContent(siteId: string): Observable<SiteEntry> {
         return this.getSite(siteId, { relations: ['containers'] });
     }
 
-    getSiteMembers(siteId: string): Observable<any> {
+    getSiteMembers(siteId: string): Observable<SiteEntry> {
         return this.getSite(siteId, { relations: ['members'] });
     }
 
@@ -65,18 +63,4 @@ export class SitesService {
         console.error(error);
         return Observable.throw(error || 'Server error');
     }
-
-    private convertToModel(response: any) {
-        let convertedList: SiteModel[] = [];
-        if (response &&
-            response.list &&
-            response.list.entries &&
-            response.list.entries.length > 0) {
-            response.list.entries.forEach((element: any) => {
-                element.pagination = response.list.pagination;
-                convertedList.push(new SiteModel(element));
-            });
-        }
-        return convertedList;
-    }
 }
diff --git a/lib/core/services/thumbnail.service.ts b/lib/core/services/thumbnail.service.ts
index 973f4c5a96..a5a1dae1ab 100644
--- a/lib/core/services/thumbnail.service.ts
+++ b/lib/core/services/thumbnail.service.ts
@@ -125,8 +125,8 @@ export class ThumbnailService {
      * @param document Node to get URL for.
      * @returns {string} URL address.
      */
-    public getDocumentThumbnailUrl(document: any): string {
-        let thumbnail = this.contentService.getDocumentThumbnailUrl(document);
+    public getDocumentThumbnailUrl(node: any): string {
+        let thumbnail = this.contentService.getDocumentThumbnailUrl(node);
         return thumbnail || this.DEFAULT_ICON;
     }
 
diff --git a/lib/core/services/translate-loader.service.ts b/lib/core/services/translate-loader.service.ts
index 727b04b557..d5e7ac819b 100644
--- a/lib/core/services/translate-loader.service.ts
+++ b/lib/core/services/translate-loader.service.ts
@@ -60,8 +60,10 @@ export class TranslateLoaderService implements TranslateLoader {
             if (!this.isComponentInQueue(lang, component.name)) {
                 this.queue[lang].push(component.name);
 
-                let currentObserv = Observable.create(observer => {
-                    this.http.get(`${component.path}/${this.prefix}/${lang}${this.suffix}`)
+                const loader = Observable.create(observer => {
+                    const translationUrl = `${component.path}/${this.prefix}/${lang}${this.suffix}?v=${Date.now()}`;
+
+                    this.http.get(translationUrl)
                         .map((res: Response) => {
                             component.json[lang] = res;
                         }).subscribe((result) => {
@@ -73,7 +75,7 @@ export class TranslateLoaderService implements TranslateLoader {
                     });
                 });
 
-                observableBatch.push(currentObserv);
+                observableBatch.push(loader);
             }
         });
 
diff --git a/lib/core/services/translation.service.ts b/lib/core/services/translation.service.ts
index 99cd087744..5cba275066 100644
--- a/lib/core/services/translation.service.ts
+++ b/lib/core/services/translation.service.ts
@@ -91,4 +91,8 @@ export class TranslationService {
     get(key: string|Array<string>, interpolateParams?: Object): Observable<string|any> {
         return this.translate.get(key, interpolateParams);
     }
+
+    instant(key: string | Array<string>, interpolateParams?: Object): string | any {
+        return this.translate.instant(key, interpolateParams);
+    }
 }
diff --git a/lib/core/services/user-preferences.service.spec.ts b/lib/core/services/user-preferences.service.spec.ts
index a0eab114a8..3a613bee54 100644
--- a/lib/core/services/user-preferences.service.spec.ts
+++ b/lib/core/services/user-preferences.service.spec.ts
@@ -28,6 +28,7 @@ import { UserPreferencesService } from './user-preferences.service';
 describe('UserPreferencesService', () => {
 
     const defaultPaginationSize: number = 10;
+    const supportedPaginationSize = [5, 10, 15, 20];
     let preferences: UserPreferencesService;
     let storage: StorageService;
     let appConfig: AppConfigService;
@@ -55,7 +56,8 @@ describe('UserPreferencesService', () => {
         appConfig = TestBed.get(AppConfigService);
         appConfig.config = {
             pagination: {
-                size: 10
+                'size': 10,
+                'supportedPageSizes': [ 5, 10, 15, 20 ]
             }
         };
         preferences = TestBed.get(UserPreferencesService);
@@ -64,7 +66,12 @@ describe('UserPreferencesService', () => {
     });
 
     it('should get default pagination from app config', () => {
-        expect(preferences.paginationSize).toBe(defaultPaginationSize);
+        expect(preferences.defaults.paginationSize).toBe(defaultPaginationSize);
+    });
+
+    it('should return supported page sizes defined in the app config', () => {
+        const supportedPages = preferences.getDifferentPageSizes();
+        expect(supportedPages).toEqual(supportedPaginationSize);
     });
 
     it('should use [GUEST] as default storage prefix', () => {
diff --git a/lib/core/services/user-preferences.service.ts b/lib/core/services/user-preferences.service.ts
index a8210551ab..acf7092653 100644
--- a/lib/core/services/user-preferences.service.ts
+++ b/lib/core/services/user-preferences.service.ts
@@ -26,8 +26,9 @@ import { StorageService } from './storage.service';
 @Injectable()
 export class UserPreferencesService {
 
-    private defaults = {
+    defaults = {
         paginationSize: 25,
+        supportedPageSizes: [5, 10, 15, 20],
         locale: 'en'
     };
 
@@ -43,7 +44,8 @@ export class UserPreferencesService {
         const currentLocale = this.locale || this.getDefaultLocale();
         this.localeSubject = new BehaviorSubject(currentLocale);
         this.locale$ = this.localeSubject.asObservable();
-        this.defaults.paginationSize = appConfig.get('pagination.size', 25);
+        this.defaults.paginationSize = this.appConfig.get('pagination.size', this.defaults.paginationSize);
+        this.defaults.supportedPageSizes = this.appConfig.get('pagination.supportedPageSizes', this.defaults.supportedPageSizes);
     }
 
     get(property: string, defaultValue?: string): string {
@@ -76,6 +78,10 @@ export class UserPreferencesService {
         return `${this.getStoragePrefix()}__${property}`;
     }
 
+    getDifferentPageSizes(): number[] {
+        return this.defaults.supportedPageSizes;
+    }
+
     set authType(value: string) {
         this.storage.setItem('AUTH_TYPE', value);
         this.apiService.reset();
diff --git a/lib/core/sidebar/index.ts b/lib/core/sidebar/index.ts
new file mode 100644
index 0000000000..4c6ac1d58f
--- /dev/null
+++ b/lib/core/sidebar/index.ts
@@ -0,0 +1,18 @@
+/*!
+ * @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.
+ */
+
+export * from './public-api';
diff --git a/lib/core/sidebar/public-api.ts b/lib/core/sidebar/public-api.ts
new file mode 100644
index 0000000000..40f4feee03
--- /dev/null
+++ b/lib/core/sidebar/public-api.ts
@@ -0,0 +1,18 @@
+/*!
+ * @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.
+ */
+
+export * from './sidebar-action-menu.component';
diff --git a/lib/core/sidebar/sidebar-action-menu.component.html b/lib/core/sidebar/sidebar-action-menu.component.html
new file mode 100644
index 0000000000..88e0273aab
--- /dev/null
+++ b/lib/core/sidebar/sidebar-action-menu.component.html
@@ -0,0 +1,16 @@
+<div class="adf-sidebar-action-menu">
+    <button *ngIf="isExpanded()" mat-raised-button class="adf-sidebar-action-menu-button" data-automation-id="create-button" [matMenuTriggerFor]="adfSidebarMenu">
+        <span *ngIf="title" class="adf-sidebar-action-menu-text">{{ title }}</span>
+        <ng-content select="[sidebar-menu-title-icon]"></ng-content>
+    </button>
+
+    <div *ngIf="!isExpanded()" class="adf-sidebar-action-menu-icon" [matMenuTriggerFor]="adfSidebarMenu">
+        <ng-content select="[sidebar-menu-expand-icon]"></ng-content>
+    </div>
+
+    <mat-menu #adfSidebarMenu="matMenu" class="adf-sidebar-action-menu-panel" [overlapTrigger]="false" yPosition="below">
+        <div class="adf-sidebar-action-menu-options">
+            <ng-content select="[sidebar-menu-options]"></ng-content>
+        </div>
+    </mat-menu>
+</div>
diff --git a/lib/core/sidebar/sidebar-action-menu.component.scss b/lib/core/sidebar/sidebar-action-menu.component.scss
new file mode 100644
index 0000000000..3b7a47b59b
--- /dev/null
+++ b/lib/core/sidebar/sidebar-action-menu.component.scss
@@ -0,0 +1,63 @@
+@mixin  adf-sidebar-action-menu-theme($theme) {
+
+    $primary: map-get($theme, primary);
+    $foreground: map-get($theme, foreground);
+
+    $adf-sidebar-action-menu-button-height: 37.5px;
+    $adf-sidebar-action-menu-button-width: 202px;
+    $adf-sidebar-action-menu-button-border-radius: 4px;
+    $adf-sidebar-action-menu-opacity: 0.54;
+    $adf-sidebar-action-menu-item-opacity: 0.87;
+    $adf-sidebar-action-menu-item-line-spacing: -0.4px;
+
+    .adf {
+        &-sidebar-action-menu {
+            & .mat-raised-button {
+                width: $adf-sidebar-action-menu-button-width;
+                height: $adf-sidebar-action-menu-button-height;
+                font-weight: bold;
+                background-color: mat-color($primary);
+                color: mat-color($primary, default-contrast) !important;
+                border-radius: $adf-sidebar-action-menu-button-border-radius;
+                & mat-icon {
+                    width: 24px;
+                    height: 25px;
+                    color: mat-color($primary, default-contrast) !important;
+                }
+            }
+            &-text {
+                width: 100%;
+                height: 20px;
+                text-align: left;
+            }
+        }
+        &-sidebar-action-menu-icon {
+            margin: 18px 0px 0px 20px;
+            color: mat-color($foreground, text, $adf-sidebar-action-menu-opacity);
+            cursor: pointer;
+            &:hover {
+                color: mat-color($primary);
+            }
+        }
+        &-sidebar-action-menu-options {
+            text-align: left;
+            letter-spacing: $adf-sidebar-action-menu-item-line-spacing;
+            .mat-menu-item {
+                color: mat-color($foreground, text, $adf-sidebar-action-menu-item-opacity);
+                text-align: left;
+                line-height: 1.5;
+                letter-spacing: $adf-sidebar-action-menu-item-line-spacing;
+            }
+            .mat-menu-item:hover {
+                color: mat-color($primary);
+                opacity: inherit;
+            }
+        }
+        &-sidebar-action-menu-panel {
+            margin-top: 7.5px;
+            border-radius: 2px;
+            box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.26), 0 0 8px 0 rgba(0, 0, 0, 0.12);
+            min-width: $adf-sidebar-action-menu-button-width !important;
+        }
+    }
+}
\ No newline at end of file
diff --git a/lib/core/sidebar/sidebar-action-menu.component.spec.ts b/lib/core/sidebar/sidebar-action-menu.component.spec.ts
new file mode 100644
index 0000000000..da75d50d74
--- /dev/null
+++ b/lib/core/sidebar/sidebar-action-menu.component.spec.ts
@@ -0,0 +1,149 @@
+/*!
+ * @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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MaterialModule } from '../material.module';
+import { SidebarActionMenuComponent } from './sidebar-action-menu.component';
+
+describe('SidebarActionMenuComponent', () => {
+    let element: HTMLElement;
+    let component: SidebarActionMenuComponent;
+    let fixture: ComponentFixture<SidebarActionMenuComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [
+                SidebarActionMenuComponent
+            ],
+            imports: [
+                MaterialModule
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(SidebarActionMenuComponent);
+        element = fixture.nativeElement;
+        component = fixture.componentInstance;
+    });
+
+    it('should create instance of SidebarActionMenuComponent', () => {
+        expect(fixture.componentInstance instanceof SidebarActionMenuComponent).toBe(true, 'should create SidebarActionMenuComponent');
+    });
+
+    it('should display title', () => {
+        component.title = 'Fake-Title';
+        component.expanded = true;
+        fixture.detectChanges();
+        const title = element.querySelector('.adf-sidebar-action-menu-text');
+        fixture.detectChanges();
+        expect(title.textContent).toBe('Fake-Title');
+    });
+});
+
+@Component({
+    template: `
+    <adf-sidebar-action-menu [expanded]="expanded" [title]="title">
+    <mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon>
+    <div sidebar-menu-expand-icon>
+        <mat-icon>queue</mat-icon>
+    </div>
+    <div sidebar-menu-options>
+        <button mat-menu-item>
+            <mat-icon>assignment</mat-icon>
+            <span>Option1</span>
+        </button>
+        <button mat-menu-item>
+            <mat-icon>assignment</mat-icon>
+            <span>Option2</span>
+        </button>
+    </div>
+</adf-sidebar-action-menu>
+       `
+})
+class CustomSidebarActionMenuComponent {
+    title: string = 'Fake title';
+    expanded: boolean = true;
+}
+
+describe('Custom SidebarActionMenuComponent', () => {
+    let fixture: ComponentFixture<CustomSidebarActionMenuComponent>;
+    let component: CustomSidebarActionMenuComponent;
+    let element: HTMLElement;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [
+                SidebarActionMenuComponent,
+                CustomSidebarActionMenuComponent
+            ],
+            imports: [
+                MaterialModule
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(CustomSidebarActionMenuComponent);
+        fixture.detectChanges();
+        component = fixture.componentInstance;
+        element = fixture.nativeElement;
+    });
+
+    it('should create instance of CustomSidebarActionMenuComponent', () => {
+        expect(component instanceof CustomSidebarActionMenuComponent).toBe(true, 'should create CustomSidebarActionMenuComponent');
+    });
+
+    it('should defined adf-sidebar-action-menu', () => {
+        fixture.detectChanges();
+        element = fixture.nativeElement.querySelector('adf-sidebar-action-menu');
+        expect(element).toBeDefined();
+    });
+
+    it('should display the title', () => {
+        component.title = 'FakeTitle';
+        fixture.detectChanges();
+        const title = element.querySelector('.adf-sidebar-action-menu-text');
+        fixture.detectChanges();
+        expect(title.textContent).toBe('FakeTitle');
+    });
+
+    it('should render the sidebar-menu-options', () => {
+        fixture.detectChanges();
+        const actionButton = fixture.nativeElement.querySelector('.adf-sidebar-action-menu-button');
+        const options = fixture.nativeElement.querySelectorAll('.adf-sidebar-action-menu-options');
+        actionButton.click();
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            expect(actionButton).not.toBeNull();
+            expect(actionButton).toBeDefined();
+            expect(options).toBeDefined();
+            expect(actionButton.innerText.trim()).toBe('Fake title arrow_drop_down');
+        });
+    });
+
+    it('should show icon on icon menu', () => {
+        component.title = 'FakeTitle';
+        component.expanded = false;
+        fixture.detectChanges();
+        const actionIcon = fixture.nativeElement.querySelector('.adf-sidebar-action-menu-icon');
+        expect(actionIcon).not.toBeNull();
+        expect(actionIcon).toBeDefined();
+        expect(actionIcon.innerText.trim()).toBe('queue');
+    });
+});
diff --git a/lib/core/sidebar/sidebar-action-menu.component.ts b/lib/core/sidebar/sidebar-action-menu.component.ts
new file mode 100644
index 0000000000..b082d56904
--- /dev/null
+++ b/lib/core/sidebar/sidebar-action-menu.component.ts
@@ -0,0 +1,44 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ChangeDetectionStrategy, Component, Directive, Input, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    selector: 'adf-sidebar-action-menu',
+    templateUrl: './sidebar-action-menu.component.html',
+    styleUrls: ['./sidebar-action-menu.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    host: { 'class': 'adf-sidebar-action-menu' }
+})
+
+export class SidebarActionMenuComponent {
+
+    @Input()
+    title: string;
+
+    @Input()
+    expanded: boolean;
+
+    isExpanded(): boolean {
+        return this.expanded;
+    }
+}
+
+@Directive({ selector: '[sidebar-menu-options]' }) export class SidebarMenuDirective {}
+@Directive({ selector: '[sidebar-menu-title-icon]' }) export class SidebarMenuTitleIconDirective { }
+@Directive({ selector: '[sidebar-menu-expand-icon]' }) export class SidebarMenuExpandIconDirective { }
diff --git a/lib/core/sidebar/sidebar-action.module.ts b/lib/core/sidebar/sidebar-action.module.ts
new file mode 100644
index 0000000000..7750d0ac66
--- /dev/null
+++ b/lib/core/sidebar/sidebar-action.module.ts
@@ -0,0 +1,38 @@
+/*!
+ * @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 { CommonModule } from '@angular/common';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { NgModule } from '@angular/core';
+import { MaterialModule } from '../material.module';
+
+import { SidebarActionMenuComponent } from './sidebar-action-menu.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        MaterialModule,
+        FlexLayoutModule
+    ],
+    declarations: [
+        SidebarActionMenuComponent
+    ],
+    exports: [
+        SidebarActionMenuComponent
+    ]
+})
+export class SideBarActionModule {}
diff --git a/lib/core/styles/_index.scss b/lib/core/styles/_index.scss
index 9868291429..e26c0ba8ed 100644
--- a/lib/core/styles/_index.scss
+++ b/lib/core/styles/_index.scss
@@ -2,10 +2,7 @@
 @import './default-class';
 @import './theming';
 
-
-@import '../card-view/card-view-dateitem.component';
-@import '../card-view/card-view-textitem.component';
-@import '../card-view/card-view.component';
+@import '../card-view/card-view.module';
 @import '../collapsable/accordion-group.component';
 @import '../datatable/components/datatable/datatable.component';
 @import '../form/components/widgets/container/container.widget';
@@ -20,13 +17,14 @@
 @import '../toolbar/toolbar.component';
 @import '../userinfo/components/user-info.component';
 @import '../viewer/components/viewer.component';
+@import '../form/components/form.component';
+@import '../sidebar/sidebar-action-menu.component';
+@import '../viewer/components/pdfViewer.component';
 
 @mixin adf-core-theme($theme) {
     @include adf-colors-theme($theme);
     @include adf-default-class-theme($theme);
-    @include adf-card-view-dateitem-theme($theme);
-    @include adf-card-view-textitem-theme($theme);
-    @include adf-card-view-theme($theme);
+    @include adf-card-view-module-theme($theme);
     @include adf-accordion-theme($theme);
     @include adf-datatable-theme($theme);
     @include adf-form-container-widget-theme($theme);
@@ -41,6 +39,9 @@
     @include adf-toolbar-theme($theme);
     @include adf-userinfo-theme($theme);
     @include adf-viewer-theme($theme);
+    @include adf-pdf-viewer-theme($theme);
+    @include adf-form-component-theme($theme);
+    @include adf-sidebar-action-menu-theme($theme);
 }
 
 
diff --git a/lib/core/styles/_mixins.scss b/lib/core/styles/_mixins.scss
index 6a1ac6994f..d2e2b69d24 100644
--- a/lib/core/styles/_mixins.scss
+++ b/lib/core/styles/_mixins.scss
@@ -1,30 +1,60 @@
-@import 'variables';
+@import "variables";
 
 @mixin no-select {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 
-@mixin typo-icon() {
-  font-family: 'Material Icons';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  word-wrap: normal;
-  font-feature-settings: 'liga';
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
+@mixin typo-icon {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    word-wrap: normal;
+    font-feature-settings: 'liga';
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
 }
 
-@mixin material-animation-default($duration:0.2s) {
-  transition-duration: $duration;
-  transition-timing-function: $animation-curve-default;
+@mixin material-animation-default($duration: 0.2s) {
+    transition-duration: $duration;
+    transition-timing-function: $animation-curve-default;
+}
+
+@mixin line-clamp($line-height: 1.25, $lines: 3) {
+    display: block;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    position: relative;
+    line-height: $line-height;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 0 !important;
+    -webkit-line-clamp: $lines;
+    height: calc(0.99em * #{$line-height} * #{$lines});
+
+    &:after {
+        content: '...';
+        text-align: right;
+        bottom: 0;
+        right: 0;
+        width: 25%;
+        display: block;
+        position: absolute;
+        height: calc(0.99em * #{$line-height});
+    }
+}
+
+@supports (-webkit-line-clamp: 1) {
+    .line-clamp:after  {
+        display: none !important;
+    }
 }
diff --git a/lib/core/userinfo/components/user-info.component.spec.ts b/lib/core/userinfo/components/user-info.component.spec.ts
index 194220426f..59beb48d5a 100644
--- a/lib/core/userinfo/components/user-info.component.spec.ts
+++ b/lib/core/userinfo/components/user-info.component.spec.ts
@@ -29,35 +29,35 @@ import { UserInfoComponent } from './user-info.component';
 
 class FakeSanitazer extends DomSanitizer {
 
-        constructor() {
-            super();
-        }
-
-        sanitize(html) {
-            return html;
-        }
-
-        bypassSecurityTrustHtml(value: string): any {
-            return value;
-        }
-
-        bypassSecurityTrustStyle(value: string): any {
-            return null;
-        }
-
-        bypassSecurityTrustScript(value: string): any {
-            return null;
-        }
-
-        bypassSecurityTrustUrl(value: string): any {
-            return null;
-        }
-
-        bypassSecurityTrustResourceUrl(value: string): any {
-            return null;
-        }
+    constructor() {
+        super();
     }
 
+    sanitize(html) {
+        return html;
+    }
+
+    bypassSecurityTrustHtml(value: string): any {
+        return value;
+    }
+
+    bypassSecurityTrustStyle(value: string): any {
+        return null;
+    }
+
+    bypassSecurityTrustScript(value: string): any {
+        return null;
+    }
+
+    bypassSecurityTrustUrl(value: string): any {
+        return null;
+    }
+
+    bypassSecurityTrustResourceUrl(value: string): any {
+        return null;
+    }
+}
+
 declare let jasmine: any;
 
 describe('User info component', () => {
@@ -119,7 +119,7 @@ describe('User info component', () => {
             jasmine.Ajax.requests.mostRecent().respondWith({
                 status: 200,
                 contentType: 'application/json',
-                responseText: JSON.stringify({entry: fakeEcmEditedUser})
+                responseText: JSON.stringify({ entry: fakeEcmEditedUser })
             });
 
             fixture.whenStable().then(() => {
@@ -141,7 +141,7 @@ describe('User info component', () => {
             jasmine.Ajax.requests.mostRecent().respondWith({
                 status: 200,
                 contentType: 'application/json',
-                responseText: JSON.stringify({entry: fakeEcmEditedUser})
+                responseText: JSON.stringify({ entry: fakeEcmEditedUser })
             });
 
             fixture.whenStable().then(() => {
@@ -157,7 +157,7 @@ describe('User info component', () => {
             jasmine.Ajax.requests.mostRecent().respondWith({
                 status: 200,
                 contentType: 'application/json',
-                responseText: JSON.stringify({entry: fakeEcmEditedUser})
+                responseText: JSON.stringify({ entry: fakeEcmEditedUser })
             });
 
             fixture.whenStable().then(() => {
@@ -171,7 +171,7 @@ describe('User info component', () => {
             jasmine.Ajax.requests.mostRecent().respondWith({
                 status: 200,
                 contentType: 'application/json',
-                responseText: JSON.stringify({entry: fakeEcmEditedUser})
+                responseText: JSON.stringify({ entry: fakeEcmEditedUser })
             });
 
             fixture.whenStable().then(() => {
@@ -186,7 +186,7 @@ describe('User info component', () => {
             jasmine.Ajax.requests.mostRecent().respondWith({
                 status: 200,
                 contentType: 'application/json',
-                responseText: JSON.stringify({entry: fakeEcmEditedUser})
+                responseText: JSON.stringify({ entry: fakeEcmEditedUser })
             });
 
             fixture.whenStable().then(() => {
@@ -203,7 +203,7 @@ describe('User info component', () => {
                 jasmine.Ajax.requests.mostRecent().respondWith({
                     status: 200,
                     contentType: 'application/json',
-                    responseText: JSON.stringify({entry: fakeEcmUser})
+                    responseText: JSON.stringify({ entry: fakeEcmUser })
                 });
             }));
 
@@ -262,7 +262,7 @@ describe('User info component', () => {
                 jasmine.Ajax.requests.mostRecent().respondWith({
                     status: 200,
                     contentType: 'application/json',
-                    responseText: JSON.stringify({entry: fakeEcmUserNoImage})
+                    responseText: JSON.stringify({ entry: fakeEcmUserNoImage })
                 });
                 fixture.whenStable().then(() => fixture.detectChanges());
             }));
@@ -417,20 +417,23 @@ describe('User info component', () => {
 
     describe('when user is logged on bpm and ecm', () => {
 
+        beforeEach(async(() => {
+
+        }));
+
         beforeEach(async(() => {
             spyOn(stubAuthService, 'isEcmLoggedIn').and.returnValue(true);
             spyOn(stubAuthService, 'isBpmLoggedIn').and.returnValue(true);
             spyOn(stubAuthService, 'isLoggedIn').and.returnValue(true);
             spyOn(stubContent, 'getContentUrl').and.returnValue('src/assets/images/ecmImg.gif');
             jasmine.Ajax.install();
-        }));
 
-        beforeEach(async(() => {
             fixture.detectChanges();
+
             jasmine.Ajax.requests.first().respondWith({
                 status: 200,
                 contentType: 'application/json',
-                responseText: JSON.stringify({entry: fakeEcmUser})
+                responseText: JSON.stringify({ entry: fakeEcmUser })
             });
             jasmine.Ajax.requests.mostRecent().respondWith({
                 status: 200,
@@ -441,8 +444,10 @@ describe('User info component', () => {
 
         beforeEach(() => {
             fixture.detectChanges();
+
             let imageButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#logged-user-img');
             imageButton.click();
+
             fixture.detectChanges();
         });
 
@@ -457,24 +462,28 @@ describe('User info component', () => {
             let bpmUsername = fixture.debugElement.query(By.css('#bpm-username'));
             let bpmImage = fixture.debugElement.query(By.css('#bpm-user-detail-image'));
 
-            expect(element.querySelector('#userinfo_container')).not.toBeNull();
-            expect(bpmUsername).not.toBeNull();
-            expect(bpmImage).not.toBeNull();
-            expect(bpmImage.properties.src).toContain('app/rest/admin/profile-picture');
-            expect(bpmUsername.nativeElement.textContent).toContain('fake-bpm-first-name fake-bpm-last-name');
-            expect(fixture.debugElement.query(By.css('#bpm-tenant')).nativeElement.textContent).toContain('fake-tenant-name');
+            fixture.whenStable().then(() => {
+                expect(element.querySelector('#userinfo_container')).not.toBeNull();
+                expect(bpmUsername).not.toBeNull();
+                expect(bpmImage).not.toBeNull();
+                expect(bpmImage.properties.src).toContain('app/rest/admin/profile-picture');
+                expect(bpmUsername.nativeElement.textContent).toContain('fake-bpm-first-name fake-bpm-last-name');
+                expect(fixture.debugElement.query(By.css('#bpm-tenant')).nativeElement.textContent).toContain('fake-tenant-name');
+            });
         });
 
         it('should get the ecm user informations from the service', () => {
             let ecmUsername = fixture.debugElement.query(By.css('#ecm-username'));
             let ecmImage = fixture.debugElement.query(By.css('#ecm-user-detail-image'));
 
-            expect(element.querySelector('#userinfo_container')).toBeDefined();
-            expect(ecmUsername).not.toBeNull();
-            expect(ecmImage).not.toBeNull();
-            expect(ecmImage.properties.src).toContain('assets/images/ecmImg.gif');
-            expect(fixture.debugElement.query(By.css('#ecm-full-name')).nativeElement.textContent).toContain('fake-ecm-first-name fake-ecm-last-name');
-            expect(fixture.debugElement.query(By.css('#ecm-job-title')).nativeElement.textContent).toContain('job-ecm-test');
+            fixture.whenStable().then(() => {
+                expect(element.querySelector('#userinfo_container')).toBeDefined();
+                expect(ecmUsername).not.toBeNull();
+                expect(ecmImage).not.toBeNull();
+                expect(ecmImage.properties.src).toContain('assets/images/ecmImg.gif');
+                expect(fixture.debugElement.query(By.css('#ecm-full-name')).nativeElement.textContent).toContain('fake-ecm-first-name fake-ecm-last-name');
+                expect(fixture.debugElement.query(By.css('#ecm-job-title')).nativeElement.textContent).toContain('job-ecm-test');
+            });
         });
 
         it('should show the ecm image if exists', () => {
diff --git a/lib/core/viewer/components/pdfViewer.component.html b/lib/core/viewer/components/pdfViewer.component.html
index a7bd395f93..dedb69d260 100644
--- a/lib/core/viewer/components/pdfViewer.component.html
+++ b/lib/core/viewer/components/pdfViewer.component.html
@@ -34,15 +34,14 @@
             <mat-icon>keyboard_arrow_down</mat-icon>
         </button>
 
-        <div>
-            {{ 'ADF_VIEWER.PAGE_LABEL.SHOWING' | translate }}
+        <div class="adf-pdf-viewer__toolbar-page-selector">
+            <span>{{ 'ADF_VIEWER.PAGE_LABEL.SHOWING' | translate }}</span>
             <input #page
-                class="adf-pdf-viewer__toolbar-page-selector"
                 type="text"
                 pattern="-?[0-9]*(\.[0-9]+)?"
                 value="{{ displayPage }}"
                 (keyup.enter)="inputPage(page.value)">
-            {{ 'ADF_VIEWER.PAGE_LABEL.OF' | translate }} {{ totalPages }}
+            <span>{{ 'ADF_VIEWER.PAGE_LABEL.OF' | translate }} {{ totalPages }}</span>
         </div>
 
         <adf-toolbar-divider></adf-toolbar-divider>
diff --git a/lib/core/viewer/components/pdfViewer.component.scss b/lib/core/viewer/components/pdfViewer.component.scss
index 0efe4c0b69..7770305700 100644
--- a/lib/core/viewer/components/pdfViewer.component.scss
+++ b/lib/core/viewer/components/pdfViewer.component.scss
@@ -1,38 +1,53 @@
-.adf-pdf-viewer {
-    .loader-container {
-        display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
-        display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
-        display: -webkit-flex;     /* NEW - Chrome */
-        display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
-        -webkit-box-flex-direction: row;
-        -moz-box-flex-direction: row;
-        -webkit-flex-direction: row;
-        flex-direction: row;
-        height:100%;
-    }
+@mixin adf-pdf-viewer-theme($theme) {
+    .adf-pdf-viewer {
+        .loader-container {
+            display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
+            display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
+            display: -webkit-flex;     /* NEW - Chrome */
+            display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
+            -webkit-box-flex-direction: row;
+            -moz-box-flex-direction: row;
+            -webkit-flex-direction: row;
+            flex-direction: row;
+            height:100%;
+        }
 
-    .loader-item {
-        margin: auto;
-        max-height:100px;
-        max-width:300px;
-    }
+        .loader-item {
+            margin: auto;
+            max-height:100px;
+            max-width:300px;
+        }
 
-    &__toolbar {
-        position: absolute;
-        bottom: 0;
+        &__toolbar {
+            position: absolute;
+            bottom: 5px;
 
-        left: 50%;
-        transform: translateX(-50%);
+            left: 50%;
+            transform: translateX(-50%);
 
-        &-page-selector {
-            font-size: 16px;
-            padding: 4px 0;
-            text-align: right;
-            width: 33px;
-            margin-right: 4px;
-            height: 20px;
-            outline-width: 1px;
-            outline-color: gray;
+            .adf-toolbar .mat-toolbar {
+                max-height: 48px;
+                background-color: mat-color($primary, default-contrast, 1);
+                border-width: 0;
+                border-radius: 2px;
+                box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+            }
+
+            &-page-selector {
+                padding-left: 10px;
+                padding-right: 10px;
+                font-size: 14px;
+
+                & > input {
+                    font-size: 14px;
+                    padding: 4px 0;
+                    text-align: right;
+                    width: 33px;
+                    margin-right: 4px;
+                    outline-width: 1px;
+                    outline-color: gray;
+                }
+            }
         }
     }
 }
diff --git a/lib/core/viewer/components/pdfViewerHost.component.scss b/lib/core/viewer/components/pdfViewerHost.component.scss
index 1f2503d46c..a9d85f6504 100644
--- a/lib/core/viewer/components/pdfViewerHost.component.scss
+++ b/lib/core/viewer/components/pdfViewerHost.component.scss
@@ -165,6 +165,11 @@
                 right: 0;
                 bottom: 0;
             }
+
+            * {
+                padding: 0;
+                margin: 0;
+            }
         }
 
         &.removePageBorders {
@@ -202,10 +207,7 @@
         }
     }
 
-    * {
-        padding: 0;
-        margin: 0;
-    }
+
 
     .hidden, [hidden] {
         display: none !important;
diff --git a/lib/core/viewer/components/txtViewer.component.scss b/lib/core/viewer/components/txtViewer.component.scss
index 4b58d2e074..a3c88afc85 100644
--- a/lib/core/viewer/components/txtViewer.component.scss
+++ b/lib/core/viewer/components/txtViewer.component.scss
@@ -3,5 +3,4 @@
     width: 100vw;
     overflow: hidden;
     overflow-y: scroll;
-    margin-bottom: 42px;
 }
diff --git a/lib/core/viewer/components/viewer.component.html b/lib/core/viewer/components/viewer.component.html
index 019b091725..212923b8ef 100644
--- a/lib/core/viewer/components/viewer.component.html
+++ b/lib/core/viewer/components/viewer.component.html
@@ -18,7 +18,7 @@
                         <mat-icon>arrow_back</mat-icon>
                     </button>
                     <img class="adf-viewer__mimeicon" [src]="mimeType | adfMimeTypeIcon">
-                    <span id="adf-viewer-display-name">{{ displayName }}</span>
+                    <span class="adf-viewer__display-name" id="adf-viewer-display-name">{{ displayName }}</span>
                 </adf-toolbar-title>
 
                 <ng-container *ngIf="mnuOpenWith">
@@ -84,7 +84,7 @@
                         matTooltip="{{ 'ADF_VIEWER.ACTIONS.INFO' | translate }}"
                         data-automation-id="toolbar-sidebar"
                         [color]="showSidebar ? 'accent' : 'default'"
-                        (click)="showSidebar = !showSidebar">
+                        (click)="toggleSidebar($event)">
                         <mat-icon>info_outline</mat-icon>
                     </button>
                 </ng-container>
@@ -103,7 +103,7 @@
 
         <div *ngIf="!isLoading" fxLayout="row" fxFlex="1 1 auto">
 
-            <ng-container *ngIf="showSidebar">
+            <ng-container *ngIf="allowSidebar && showSidebar">
                 <div class="adf-viewer__sidebar" fxFlexOrder="{{sidebarPosition === 'left'? 1: 2 }}">
                     <ng-container *ngIf="sidebarTemplate">
                         <ng-container *ngTemplateOutlet="sidebarTemplate;context:sidebarTemplateContext"></ng-container>
@@ -133,7 +133,7 @@
                         </ng-container>
 
                         <ng-container *ngSwitchCase="'custom'">
-                            <span *ngFor="let extensionTemplate of extensionTemplates">
+                            <span class="adf-viewer-custom-content" *ngFor="let extensionTemplate of extensionTemplates">
                                 <ng-template *ngIf="extensionTemplate.isVisible" [ngTemplateOutlet]="extensionTemplate.template" [ngTemplateOutletContext]="{ urlFileContent: urlFileContent, extension:extension }">
                                 </ng-template>
                             </span>
diff --git a/lib/core/viewer/components/viewer.component.scss b/lib/core/viewer/components/viewer.component.scss
index 600ed97138..7104892d4e 100644
--- a/lib/core/viewer/components/viewer.component.scss
+++ b/lib/core/viewer/components/viewer.component.scss
@@ -13,6 +13,24 @@
 
         &__mimeicon {
             vertical-align: middle;
+            height: 18px;
+            width: 18px;
+        }
+
+        &-toolbar {
+            .mat-toolbar {
+                background-color: mat-color($primary, default-contrast)
+            }
+        }
+
+        &__display-name {
+            font-size: 16px;
+            opacity: 0.87;
+            line-height: 1.5;
+            letter-spacing: -0.4px;
+            font-weight: normal;
+            font-style: normal;
+            font-stretch: normal;
         }
 
         &-container {
@@ -22,6 +40,7 @@
                 overflow-y: auto;
                 overflow-x: hidden;
                 z-index: 1;
+                background-color: mat-color($background, background);
 
                 display: flex;
                 flex-direction: row;
@@ -70,6 +89,10 @@
             justify-content: center;
         }
 
+        &-custom-content {
+            width: 100vw;
+        }
+
         &-unknown-content {
             align-items: center;
             display: flex;
diff --git a/lib/core/viewer/components/viewer.component.spec.ts b/lib/core/viewer/components/viewer.component.spec.ts
index 49eb56f376..7a8fa90ffc 100644
--- a/lib/core/viewer/components/viewer.component.spec.ts
+++ b/lib/core/viewer/components/viewer.component.spec.ts
@@ -208,8 +208,18 @@ describe('ViewerComponent', () => {
         expect(customElement.querySelector('.adf-viewer-container-more-actions')).toBeDefined();
     });
 
+    it('should NOT display sidebar if is not allowed', () => {
+        component.showSidebar = true;
+        component.allowSidebar = false;
+        component.sidebarPosition = 'left';
+        fixture.detectChanges();
+        let sidebar = element.querySelector('.adf-viewer__sidebar');
+        expect(sidebar).toBeNull();
+    });
+
     it('should display sidebar on the left side', () => {
         component.showSidebar = true;
+        component.allowSidebar = true;
         component.sidebarPosition = 'left';
         fixture.detectChanges();
         let sidebar = element.querySelector('.adf-viewer__sidebar');
@@ -218,6 +228,7 @@ describe('ViewerComponent', () => {
 
     it('should display sidebar on the right side', () => {
         component.showSidebar = true;
+        component.allowSidebar = true;
         component.sidebarPosition = 'right';
         fixture.detectChanges();
         let sidebar = element.querySelector('.adf-viewer__sidebar');
@@ -226,6 +237,7 @@ describe('ViewerComponent', () => {
 
     it('should display sidebar on the right side as fallback', () => {
         component.showSidebar = true;
+        component.allowSidebar = true;
         component.sidebarPosition = 'unknown-value';
         fixture.detectChanges();
         let sidebar = element.querySelector('.adf-viewer__sidebar');
diff --git a/lib/core/viewer/components/viewer.component.ts b/lib/core/viewer/components/viewer.component.ts
index 9b49e2365d..72b6ffcd39 100644
--- a/lib/core/viewer/components/viewer.component.ts
+++ b/lib/core/viewer/components/viewer.component.ts
@@ -54,12 +54,18 @@ export class ViewerComponent implements OnChanges {
     @Input()
     urlFile = '';
 
+    @Input()
+    urlFileViewer: string = null;
+
     @Input()
     blobFile: Blob;
 
     @Input()
     fileNodeId: string = null;
 
+    @Input()
+    sharedLinkId: string = null;
+
     @Input()
     overlayMode = false;
 
@@ -96,6 +102,15 @@ export class ViewerComponent implements OnChanges {
     @Input()
     sidebarTemplate: TemplateRef<any> = null;
 
+    @Input()
+    mimeType: string;
+
+    @Input()
+    fileName: string;
+
+    @Input()
+    downloadUrl: string = null;
+
     @Output()
     goBack = new EventEmitter<BaseEvent<any>>();
 
@@ -115,8 +130,6 @@ export class ViewerComponent implements OnChanges {
     extensionChange = new EventEmitter<string>();
 
     viewerType = 'unknown';
-    downloadUrl: string = null;
-    fileName = 'document';
     isLoading = false;
     node: MinimalNodeEntryEntity;
 
@@ -125,7 +138,6 @@ export class ViewerComponent implements OnChanges {
     urlFileContent: string;
     otherMenu: any;
     extension: string;
-    mimeType: string;
     sidebarTemplateContext: { node: MinimalNodeEntryEntity } = { node: null };
 
     private extensions = {
@@ -146,10 +158,14 @@ export class ViewerComponent implements OnChanges {
                 private renditionService: RenditionsService) {
     }
 
+    isSourceDefined(): boolean {
+        return (this.urlFile || this.blobFile || this.fileNodeId || this.sharedLinkId) ? true : false;
+    }
+
     ngOnChanges(changes: SimpleChanges) {
         if (this.showViewer) {
-            if (!this.urlFile && !this.blobFile && !this.fileNodeId) {
-                throw new Error('Attribute urlFile or fileNodeId or blobFile is required');
+            if (!this.isSourceDefined()) {
+                throw new Error('A content source attribute value is missing.');
             }
 
             return new Promise((resolve, reject) => {
@@ -176,7 +192,7 @@ export class ViewerComponent implements OnChanges {
                     this.downloadUrl = this.urlFile;
                     this.fileName = this.displayName;
 
-                    this.viewerType = this.getViewerTypeByExtension(this.extension);
+                    this.viewerType = this.urlFileViewer || this.getViewerTypeByExtension(this.extension);
                     if (this.viewerType === 'unknown') {
                         this.viewerType = this.getViewerTypeByMimeType(this.mimeType);
                     }
@@ -203,7 +219,7 @@ export class ViewerComponent implements OnChanges {
                             }
 
                             if (this.viewerType === 'unknown') {
-                                this.displayAsPdf(data.id);
+                                this.displayNodeRendition(data.id);
                             } else {
                                 this.isLoading = false;
                             }
@@ -219,11 +235,48 @@ export class ViewerComponent implements OnChanges {
                             this.logService.error('This node does not exist');
                         }
                     );
+                } else if (this.sharedLinkId) {
+                    this.isLoading = true;
+
+                    this.apiService.sharedLinksApi.getSharedLink(this.sharedLinkId).then(details => {
+                        this.mimeType = details.entry.content.mimeType;
+                        this.displayName = this.getDisplayName(details.entry.name);
+                        this.extension = this.getFileExtension(details.entry.name);
+                        this.fileName = details.entry.name;
+
+                        this.urlFileContent = this.apiService.contentApi.getSharedLinkContentUrl(this.sharedLinkId, false);
+                        this.downloadUrl = this.apiService.contentApi.getSharedLinkContentUrl(this.sharedLinkId, true);
+
+                        this.viewerType = this.getViewerTypeByMimeType(this.mimeType);
+                        if (this.viewerType === 'unknown') {
+                            this.viewerType = this.getViewerTypeByExtension(this.extension);
+                        }
+
+                        if (this.viewerType === 'unknown') {
+                            this.displaySharedLinkRendition(this.sharedLinkId);
+                        } else {
+                            this.isLoading = false;
+                        }
+
+                        this.extensionChange.emit(this.extension);
+                        this.isLoading = false;
+                        resolve();
+                    });
                 }
             });
         }
     }
 
+    toggleSidebar() {
+        this.showSidebar = !this.showSidebar;
+        if (this.showSidebar && this.fileNodeId) {
+            this.apiService.getInstance().nodes.getNodeInfo(this.fileNodeId)
+                .then((data: MinimalNodeEntryEntity) => {
+                    this.sidebarTemplateContext.node = data;
+                });
+        }
+    }
+
     private getDisplayName(name) {
         return this.displayName || name;
     }
@@ -328,13 +381,20 @@ export class ViewerComponent implements OnChanges {
     }
 
     /**
-     * Get the token from the local storage
+     * Get file extension from the string.
+     * Supports the URL formats like:
+     * http://localhost/test.jpg?cache=1000
+     * http://localhost/test.jpg#cache=1000
      *
      * @param {string} fileName - file name
      * @returns {string} file name extension
      */
     getFileExtension(fileName: string): string {
-        return fileName.split('.').pop().toLowerCase();
+        if (fileName) {
+            const match = fileName.match(/\.([^\./\?\#]+)($|\?|\#)/);
+            return match ? match[1] : null;
+        }
+        return null;
     }
 
     isCustomViewerExtension(extension: string): boolean {
@@ -393,40 +453,64 @@ export class ViewerComponent implements OnChanges {
         }
     }
 
-    private displayAsPdf(nodeId: string) {
+    private async displayNodeRendition(nodeId: string) {
         this.isLoading = true;
 
-        this.renditionService.getRendition(nodeId, 'pdf').subscribe(
-            (response) => {
-                const status = response.entry.status.toString();
+        try {
+            const rendition = await this.apiService.renditionsApi.getRendition(nodeId, 'pdf');
+            const status = rendition.entry.status.toString();
 
-                if (status === 'CREATED') {
-                    this.isLoading = false;
-                    this.showPdfRendition(nodeId);
-                } else if (status === 'NOT_CREATED') {
-                    this.renditionService.convert(nodeId, 'pdf').subscribe({
-                        complete: () => {
-                            this.isLoading = false;
-                            this.showPdfRendition(nodeId);
-                        },
-                        error: (error) => {
-                            this.isLoading = false;
-                        }
-                    });
-                } else {
-                    this.isLoading = false;
+            if (status === 'CREATED') {
+                this.viewerType = 'pdf';
+                this.urlFileContent = this.apiService.contentApi.getRenditionUrl(nodeId, 'pdf');
+            } else if (status === 'NOT_CREATED') {
+                try {
+                    await this.renditionService.convert(nodeId, 'pdf').toPromise();
+                    this.viewerType = 'pdf';
+                    this.urlFileContent = this.apiService.contentApi.getRenditionUrl(nodeId, 'pdf');
+                } catch (error) {
+                    this.logService.error(error);
                 }
-            },
-            (err) => {
-                this.isLoading = false;
             }
-        );
+        } catch (error) {
+            this.logService.error(error);
+
+            try {
+                const imagePreview = await this.apiService.renditionsApi.getRendition(nodeId, 'imgpreview');
+                if (imagePreview.entry.status.toString() === 'CREATED') {
+                    this.viewerType = 'image';
+                    this.urlFileContent = this.apiService.contentApi.getRenditionUrl(nodeId, 'imgpreview');
+                }
+            } catch (error) {
+                this.logService.error(error);
+            }
+        }
+
+        this.isLoading = false;
     }
 
-    private showPdfRendition(nodeId: string) {
-        if (nodeId) {
-            this.viewerType = 'pdf';
-            this.urlFileContent = this.renditionService.getRenditionUrl(nodeId, 'pdf');
+    private async displaySharedLinkRendition(sharedId: string) {
+        this.isLoading = true;
+
+        try {
+            const rendition = await this.apiService.renditionsApi.getSharedLinkRendition(sharedId, 'pdf');
+            if (rendition.entry.status.toString() === 'CREATED') {
+                this.viewerType = 'pdf';
+                this.urlFileContent = this.apiService.contentApi.getSharedLinkRenditionUrl(sharedId, 'pdf');
+            }
+        } catch (error) {
+            this.logService.error(error);
+            try {
+                const rendition = await this.apiService.renditionsApi.getSharedLinkRendition(sharedId, 'imgpreview');
+                if (rendition.entry.status.toString() === 'CREATED') {
+                    this.viewerType = 'image';
+                    this.urlFileContent = this.apiService.contentApi.getSharedLinkRenditionUrl(sharedId, 'imgpreview');
+                }
+            } catch (error) {
+                this.logService.error(error);
+            }
         }
+
+        this.isLoading = false;
     }
 }
diff --git a/lib/insights/analytics-process/components/analytics-report-parameters.component.spec.ts b/lib/insights/analytics-process/components/analytics-report-parameters.component.spec.ts
index 9984f57b23..79bfb3f131 100644
--- a/lib/insights/analytics-process/components/analytics-report-parameters.component.spec.ts
+++ b/lib/insights/analytics-process/components/analytics-report-parameters.component.spec.ts
@@ -25,7 +25,7 @@ import { MaterialModule } from '../../material.module';
 
 declare let jasmine: any;
 
-fdescribe('AnalyticsReportParametersComponent', () => {
+describe('AnalyticsReportParametersComponent', () => {
 
     let component: AnalyticsReportParametersComponent;
     let fixture: ComponentFixture<AnalyticsReportParametersComponent>;
diff --git a/lib/insights/analytics-process/components/widgets/checkbox/checkbox.widget.ts b/lib/insights/analytics-process/components/widgets/checkbox/checkbox.widget.ts
index 071d895cc1..d41b2a5b62 100644
--- a/lib/insights/analytics-process/components/widgets/checkbox/checkbox.widget.ts
+++ b/lib/insights/analytics-process/components/widgets/checkbox/checkbox.widget.ts
@@ -15,14 +15,13 @@
  * limitations under the License.
  */
 
- /* tslint:disable:component-selector  */
+ /* tslint:disable:component-selector no-access-missing-member no-input-rename  */
 
-/* tslint:disable:no-access-missing-member */
-import { Component, ElementRef, Input, ViewEncapsulation } from '@angular/core';
-import { FormGroup } from '@angular/forms';
-import { WidgetComponent } from './../widget.component';
+ import { Component, ElementRef, Input, ViewEncapsulation } from '@angular/core';
+ import { FormGroup } from '@angular/forms';
+ import { WidgetComponent } from './../widget.component';
 
-@Component({
+ @Component({
     selector: 'analytics-checkbox-widget',
     templateUrl: './checkbox.widget.html',
     encapsulation: ViewEncapsulation.None
diff --git a/lib/insights/analytics-process/components/widgets/date-range/date-range.widget.ts b/lib/insights/analytics-process/components/widgets/date-range/date-range.widget.ts
index 188253c822..83b17f1fff 100644
--- a/lib/insights/analytics-process/components/widgets/date-range/date-range.widget.ts
+++ b/lib/insights/analytics-process/components/widgets/date-range/date-range.widget.ts
@@ -15,6 +15,8 @@
  * limitations under the License.
  */
 
+/* tslint:disable:no-input-rename  */
+
 import { MOMENT_DATE_FORMATS, MomentDateAdapter, UserPreferencesService } from '@alfresco/adf-core';
 import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms';
diff --git a/lib/insights/analytics-process/components/widgets/dropdown/dropdown.widget.ts b/lib/insights/analytics-process/components/widgets/dropdown/dropdown.widget.ts
index 494e3317df..3b22d15b9e 100644
--- a/lib/insights/analytics-process/components/widgets/dropdown/dropdown.widget.ts
+++ b/lib/insights/analytics-process/components/widgets/dropdown/dropdown.widget.ts
@@ -15,9 +15,8 @@
  * limitations under the License.
  */
 
- /* tslint:disable:component-selector  */
+ /* tslint:disable:component-selector no-access-missing-member no-input-rename  */
 
-/* tslint:disable::no-access-missing-member */
 import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { WidgetComponent } from './../widget.component';
diff --git a/lib/insights/analytics-process/components/widgets/duration/duration.widget.ts b/lib/insights/analytics-process/components/widgets/duration/duration.widget.ts
index d6cc715e91..6f45fe3485 100644
--- a/lib/insights/analytics-process/components/widgets/duration/duration.widget.ts
+++ b/lib/insights/analytics-process/components/widgets/duration/duration.widget.ts
@@ -15,9 +15,8 @@
  * limitations under the License.
  */
 
- /* tslint:disable:component-selector  */
+ /* tslint:disable:component-selector no-access-missing-member no-input-rename   */
 
-/* tslint:disable::no-access-missing-member */
 import { Component, ElementRef, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { ParameterValueModel } from '../../../../diagram/models/report/parameterValue.model';
diff --git a/lib/insights/analytics-process/components/widgets/number/number.widget.ts b/lib/insights/analytics-process/components/widgets/number/number.widget.ts
index b56a9adb20..dc05a57f76 100644
--- a/lib/insights/analytics-process/components/widgets/number/number.widget.ts
+++ b/lib/insights/analytics-process/components/widgets/number/number.widget.ts
@@ -15,9 +15,8 @@
  * limitations under the License.
  */
 
- /* tslint:disable:component-selector  */
+ /* tslint:disable:component-selector no-access-missing-member no-input-rename */
 
-/* tslint:disable::no-access-missing-member */
 import { Component, ElementRef, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormGroup, Validators } from '@angular/forms';
 import { WidgetComponent } from './../widget.component';
diff --git a/lib/insights/diagram/components/diagram.component.boundary.spec.ts b/lib/insights/diagram/components/diagram.component.boundary.spec.ts
index 4602c0a8e5..a84bedad43 100644
--- a/lib/insights/diagram/components/diagram.component.boundary.spec.ts
+++ b/lib/insights/diagram/components/diagram.component.boundary.spec.ts
@@ -31,9 +31,7 @@ describe('Diagrams boundary', () => {
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            imports: [
-                DiagramsModule
-            ]
+            imports: [DiagramsModule]
         }).compileComponents();
     }));
 
diff --git a/lib/insights/diagram/components/diagram.component.events.spec.ts b/lib/insights/diagram/components/diagram.component.events.spec.ts
index 07a24731eb..3811838ed0 100644
--- a/lib/insights/diagram/components/diagram.component.events.spec.ts
+++ b/lib/insights/diagram/components/diagram.component.events.spec.ts
@@ -31,9 +31,7 @@ describe('Diagrams events', () => {
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            imports: [
-                DiagramsModule
-            ]
+            imports: [DiagramsModule]
         }).compileComponents();
     }));
 
diff --git a/lib/insights/diagram/components/diagram.component.swim.spec.ts b/lib/insights/diagram/components/diagram.component.swim.spec.ts
index 132bb50170..706d2d88fa 100644
--- a/lib/insights/diagram/components/diagram.component.swim.spec.ts
+++ b/lib/insights/diagram/components/diagram.component.swim.spec.ts
@@ -31,11 +31,7 @@ describe('Diagrams swim', () => {
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            imports: [
-                DiagramsModule
-            ],
-            declarations: [
-            ]
+            imports: [DiagramsModule]
         }).compileComponents();
     }));
 
diff --git a/lib/insights/diagram/components/diagram.component.throw.spec.ts b/lib/insights/diagram/components/diagram.component.throw.spec.ts
index a9522f745f..256a6eef0f 100644
--- a/lib/insights/diagram/components/diagram.component.throw.spec.ts
+++ b/lib/insights/diagram/components/diagram.component.throw.spec.ts
@@ -31,36 +31,27 @@ describe('Diagrams throw', () => {
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            imports: [],
-            declarations: [
-                DiagramsModule
-            ],
-            providers: [
+            imports: [DiagramsModule]
+        }).compileComponents().then(() => {
+            jasmine.Ajax.install();
 
-            ]
-        }).compileComponents();
+            fixture = TestBed.createComponent(DiagramComponent);
+            component = fixture.componentInstance;
+            element = fixture.nativeElement;
+            component.processInstanceId = '38399';
+            component.processDefinitionId = 'fakeprocess:24:38399';
+            component.metricPercentages = { startEvent: 0 };
+
+            fixture.detectChanges();
+        });
     }));
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(DiagramComponent);
-        component = fixture.componentInstance;
-        element = fixture.nativeElement;
-        fixture.detectChanges();
-    });
-
-    beforeEach(() => {
-        jasmine.Ajax.install();
-        component.processInstanceId = '38399';
-        component.processDefinitionId = 'fakeprocess:24:38399';
-        component.metricPercentages = { startEvent: 0 };
-    });
-
     afterEach(() => {
         component.success.unsubscribe();
         jasmine.Ajax.uninstall();
     });
 
-    let ajaxReply =  (resp: any) => {
+    let ajaxReply = (resp: any) => {
         jasmine.Ajax.requests.mostRecent().respondWith({
             status: 200,
             contentType: 'json',
diff --git a/lib/insights/diagram/services/diagrams.service.spec.ts b/lib/insights/diagram/services/diagrams.service.spec.ts
new file mode 100644
index 0000000000..1297cd5dc6
--- /dev/null
+++ b/lib/insights/diagram/services/diagrams.service.spec.ts
@@ -0,0 +1,84 @@
+/*!
+ * @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 { async, TestBed } from '@angular/core/testing';
+import { AppConfigService, CoreModule } from '@alfresco/adf-core';
+import { DiagramsService } from './diagrams.service';
+
+declare let jasmine: any;
+
+describe('DiagramsService', () => {
+
+    let service: DiagramsService;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                CoreModule
+            ],
+            providers: [
+                DiagramsService
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        let appConfig: AppConfigService = TestBed.get(AppConfigService);
+        appConfig.config.ecmHost = 'http://localhost:9876/ecm';
+
+        service = TestBed.get(DiagramsService);
+    });
+
+    beforeEach(() => {
+        jasmine.Ajax.install();
+    });
+
+    afterEach(() => {
+        jasmine.Ajax.uninstall();
+    });
+
+    it('getProcessDefinitionModel should perform a call against the server', (done) => {
+        service.getProcessDefinitionModel('fake-processDefinitionId').subscribe(() => {
+            done();
+        });
+
+        jasmine.Ajax.requests.mostRecent().respondWith({
+            status: 200
+        });
+    });
+
+    it('getRunningProcessDefinitionModel should perform a call against the server', (done) => {
+        service.getRunningProcessDefinitionModel('fake-processInstanceId').subscribe(() => {
+            done();
+        });
+
+        jasmine.Ajax.requests.mostRecent().respondWith({
+            status: 200
+        });
+    });
+
+    it('getTagsByNodeId catch errors call', (done) => {
+        service.getProcessDefinitionModel('fake-processDefinitionId').subscribe(() => {
+        }, () => {
+            done();
+        });
+
+        jasmine.Ajax.requests.mostRecent().respondWith({
+            status: 403
+        });
+    });
+});
diff --git a/lib/insights/index.ts b/lib/insights/index.ts
index 42a4a5bc7b..e9b19ef037 100644
--- a/lib/insights/index.ts
+++ b/lib/insights/index.ts
@@ -16,7 +16,9 @@
  */
 
 export * from './insights.module';
-//
+
 export * from './analytics-process/analytics-process.module';
-//
+export * from './diagram/diagram.module';
+
 export * from './analytics-process';
+export * from './diagram';
diff --git a/lib/insights/insights.module.ts b/lib/insights/insights.module.ts
index 82a49983b5..b144c046c9 100644
--- a/lib/insights/insights.module.ts
+++ b/lib/insights/insights.module.ts
@@ -53,7 +53,6 @@ import { MaterialModule } from './material.module';
         FormsModule,
         ReactiveFormsModule,
         BrowserAnimationsModule,
-        MaterialModule,
         DiagramsModule,
         AnalyticsProcessModule
     ]
diff --git a/lib/insights/package.json b/lib/insights/package.json
index e4e2bf535f..f0716fe403 100644
--- a/lib/insights/package.json
+++ b/lib/insights/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@alfresco/adf-insights",
   "description": "Alfresco ADF insights",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "author": "Alfresco Software, Ltd.",
   "main": "bundles/adf-insights.js",
   "repository": {
@@ -12,22 +12,22 @@
     "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
   },
   "dependencies": {
-    "@angular/animations": "5.0.0",
-    "@angular/cdk": "5.0.0-rc0",
-    "@angular/common": "5.0.0",
-    "@angular/compiler": "5.0.0",
-    "@angular/core": "5.0.0",
-    "@angular/flex-layout": "2.0.0-beta.10",
-    "@angular/forms": "5.0.0",
-    "@angular/http": "5.0.0",
-    "@angular/material": "5.0.0-rc0",
-    "@angular/material-moment-adapter": "^5.0.0-rc0",
-    "@angular/platform-browser": "5.0.0",
-    "@angular/platform-browser-dynamic": "5.0.0",
-    "@angular/router": "5.0.0",
+    "@angular/animations": "5.1.1",
+    "@angular/cdk": "5.0.1",
+    "@angular/common": "5.1.1",
+    "@angular/compiler": "5.1.1",
+    "@angular/core": "5.1.1",
+    "@angular/flex-layout": "2.0.0-beta.12",
+    "@angular/forms": "5.1.1",
+    "@angular/http": "5.1.1",
+    "@angular/material": "5.0.1",
+    "@angular/material-moment-adapter": "5.0.1",
+    "@angular/platform-browser": "5.1.1",
+    "@angular/platform-browser-dynamic": "5.1.1",
+    "@angular/router": "5.1.1",
     "@ngx-translate/core": "8.0.0",
-    "alfresco-js-api": "2.0.0",
-    "@alfresco/adf-core": "2.0.0",
+    "alfresco-js-api": "2.1.0",
+    "@alfresco/adf-core": "2.1.0",
     "chart.js": "2.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
diff --git a/lib/ng-package/ng-package-core.json b/lib/ng-package/ng-package-core.json
index 3320d01be5..a8c7d8a51f 100644
--- a/lib/ng-package/ng-package-core.json
+++ b/lib/ng-package/ng-package-core.json
@@ -11,6 +11,8 @@
       "minimatch": "minimatch",
       "@angular/platform-browser/animations": "@angular/platform-browser/animations",
       "@angular/material": "@angular/material",
+      "@mat-datetimepicker/core": "@mat-datetimepicker/core",
+      "@mat-datetimepicker/moment": "@mat-datetimepicker/moment",
       "@angular/flex-layout": "@angular/flex-layout",
       "@angular/material-moment-adapter": "@angular/material-moment-adapter",
       "@angular/animations": "@angular/animations",
diff --git a/lib/ng-package/ng-package-process.json b/lib/ng-package/ng-package-process.json
index cbc383f54f..52783e606a 100644
--- a/lib/ng-package/ng-package-process.json
+++ b/lib/ng-package/ng-package-process.json
@@ -13,6 +13,7 @@
       "@angular/material": "@angular/material",
       "@angular/flex-layout": "@angular/flex-layout",
       "@alfresco/adf-core": "@alfresco/adf-core",
+      "@alfresco/adf-content-services": "@alfresco/adf-content-services",
       "@angular/material-moment-adapter": "@angular/material-moment-adapter",
       "@angular/animations": "@angular/animations",
       "@angular/cdk/platform": "@angular/cdk/platform",
diff --git a/lib/package.json b/lib/package.json
index 17bf8dd1c6..edebf8c121 100644
--- a/lib/package.json
+++ b/lib/package.json
@@ -1,7 +1,7 @@
 {
   "name": "alfresco-components",
   "description": "Alfresco Angular components",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "clean": "rimraf node_modules",
@@ -20,12 +20,13 @@
     "bundlesize-check": "bundlesize",
     "markdownlint": "markdownlint ../docs",
     "doc": "npm run toc && npm run markdownlint && npm run webpack -- --config config/webpack.doc.js --progress --profile --bail",
-    "docindex": "node config/buildFullDocIndex.js",
-    "mv-es5": "mv core/dist/@alfresco core/dist/esm5 && mv content-services/dist/@alfresco content-services/dist/esm5 && mv process-services/dist/@alfresco process-services/dist/esm5 && mv insights/dist/@alfresco insights/dist/esm5 ",
+    "docindex": "node config/DocProcessor/docProcessor.js ../docs",
     "copy-i18n": "mkdir -p core/dist/bundles/assets/adf-core/i18n && cp -R core/i18n/* core/dist/bundles/assets/adf-core/i18n && mkdir -p content-services/dist/bundles/assets/adf-content-services/i18n && cp -R content-services/i18n/* content-services/dist/bundles/assets/adf-content-services/i18n && mkdir -p process-services/dist/bundles/assets/adf-process-services/i18n && cp -R process-services/i18n/* process-services/dist/bundles/assets/adf-process-services/i18n && mkdir -p insights/dist/bundles/assets/adf-insights/i18n && cp -R insights/i18n/* insights/dist/bundles/assets/adf-insights/i18n",
     "copy-assets": "cp -R core/assets/* core/dist/bundles/assets && cp -R content-services/assets/* content-services/dist/bundles/assets && cp -R process-services/assets/* process-services/dist/bundles/assets",
-    "new-build": "npm run build-bundles && npm run build-style-new && npm run copy-i18n && npm run copy-assets && npm run mv-es5",
-    "build-bundles": "npm run build-core && mkdir -p ./node_modules/@alfresco/adf-core/ && cp -R ./core/dist/* ./node_modules/@alfresco/adf-core/ && npm run build-content && npm run build-process && npm run build-insights",
+    "new-build": "npm run build-bundles && npm run build-style-new && npm run copy-i18n && npm run copy-assets",
+    "build-bundles": "npm run build-core && npm run link-core && npm run build-content && npm run link-content && npm run build-process && npm run build-insights",
+    "link-core": "mkdir -p ./node_modules/@alfresco/adf-core/ && cp -R ./core/dist/* ./node_modules/@alfresco/adf-core/",
+    "link-content": "mkdir -p ./node_modules/@alfresco/adf-content-services/ && cp -R ./content-services/dist/* ./node_modules/@alfresco/adf-content-services/",
     "build-core": "ng-packagr -p ./ng-package/ng-package-core.json",
     "build-content": "ng-packagr -p ./ng-package/ng-package-content.json",
     "build-process": "ng-packagr -p ./ng-package/ng-package-process.json",
@@ -50,28 +51,30 @@
     "process services"
   ],
   "dependencies": {
-    "@angular/animations": "5.0.0",
-    "@angular/cdk": "5.0.0-rc0",
-    "@angular/common": "5.0.0",
-    "@angular/compiler": "5.0.0",
-    "@angular/core": "5.0.0",
-    "@angular/flex-layout": "2.0.0-beta.10",
-    "@angular/forms": "5.0.0",
-    "@angular/http": "5.0.0",
-    "@angular/material": "5.0.0-rc0",
-    "@angular/material-moment-adapter": "^5.0.0-rc0",
-    "@angular/platform-browser": "5.0.0",
-    "@angular/platform-browser-dynamic": "5.0.0",
-    "@angular/router": "5.0.0",
+    "@angular/animations": "5.1.1",
+    "@angular/cdk": "5.0.1",
+    "@angular/common": "5.1.1",
+    "@angular/compiler": "5.1.1",
+    "@angular/core": "5.1.1",
+    "@angular/flex-layout": "2.0.0-beta.12",
+    "@angular/forms": "5.1.1",
+    "@angular/http": "5.1.1",
+    "@angular/material": "5.0.1",
+    "@angular/material-moment-adapter": "5.0.1",
+    "@angular/platform-browser": "5.1.1",
+    "@angular/platform-browser-dynamic": "5.1.1",
+    "@angular/router": "5.1.1",
+    "@mat-datetimepicker/core": "^1.0.1",
+    "@mat-datetimepicker/moment": "^1.0.1",
     "@ngx-translate/core": "8.0.0",
-    "alfresco-js-api": "2.0.0",
+    "alfresco-js-api": "2.1.0",
     "chart.js": "2.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
     "minimatch": "3.0.4",
     "moment": "2.18.1",
     "moment-es6": "^1.0.0",
-    "ng-packagr": "^1.6.0",
+    "ng-packagr": "2.0.0-rc.4",
     "ng2-charts": "1.6.0",
     "pdfjs-dist": "1.5.404",
     "raphael": "2.2.7",
@@ -81,6 +84,7 @@
     "zone.js": "0.8.14"
   },
   "devDependencies": {
+    "@angular/compiler-cli": "5.1.1",
     "@types/hammerjs": "2.0.35",
     "@types/jasmine": "^2.5.35",
     "@types/node": "6.0.90",
@@ -100,7 +104,7 @@
     "happypack": "4.0.0",
     "html-loader": "0.4.4",
     "html-webpack-plugin": "2.28.0",
-    "istanbul-instrumenter-loader": "0.2.0",
+    "istanbul-instrumenter-loader": "3.0.0",
     "jasmine-ajax": "3.2.0",
     "jasmine-core": "2.4.1",
     "karma": "0.13.22",
@@ -113,7 +117,7 @@
     "karma-remap-istanbul": "0.6.0",
     "karma-sourcemap-loader": "0.3.7",
     "karma-systemjs": "0.16.0",
-    "karma-webpack": "2.0.5",
+    "karma-webpack": "2.0.9",
     "loader-utils": "1.1.0",
     "markdown-toc": "1.1.0",
     "markdownlint-cli": "^0.3.1",
@@ -126,23 +130,22 @@
     "run-sequence": "1.2.2",
     "sass-loader": "6.0.5",
     "script-loader": "0.7.0",
-    "scss-bundle": "^2.1.0",
-    "source-map-loader": "0.1.6",
+    "scss-bundle": "2.1.0",
+    "source-map-loader": "0.2.3",
     "style-loader": "0.13.1",
     "systemjs-builder": "0.15.34",
     "to-string-loader": "1.1.5",
     "traceur": "0.0.91",
-    "ts-loader": "3.1.1",
+    "ts-loader": "3.3.0",
     "ts-node": "2.0.0",
     "tslint": "5.7.0",
     "tslint-loader": "3.5.3",
     "typescript": "2.6.1",
-    "uglifyjs-webpack-plugin": "^1.0.1",
-    "webpack": "3.8.1",
+    "uglifyjs-webpack-plugin": "1.1.6",
+    "webpack": "3.10.0",
     "webpack-bundle-analyzer": "2.9.0",
-    "webpack-dev-server": "2.9.4",
-    "webpack-merge": "2.6.1",
-    "wsrv": "0.1.7"
+    "webpack-dev-server": "2.11.1",
+    "webpack-merge": "2.6.1"
   },
   "license": "Apache-2.0",
   "bundlesize": [
diff --git a/lib/process-services/app-list/apps-list.component.html b/lib/process-services/app-list/apps-list.component.html
index 498ce131f0..dab36c7336 100644
--- a/lib/process-services/app-list/apps-list.component.html
+++ b/lib/process-services/app-list/apps-list.component.html
@@ -24,7 +24,7 @@
                             <h1>{{getAppName(app) | async}}</h1>
                         </div>
                         <mat-card-subtitle class="adf-app-listgrid-item-card-subtitle" fxFlex="1 0 auto">
-                            <p>{{app.description}}</p>
+                            <div class="line-clamp">{{app.description}}</div>
                         </mat-card-subtitle>
 
                         <mat-card-actions class="adf-app-listgrid-item-card-actions">
diff --git a/lib/process-services/app-list/apps-list.component.scss b/lib/process-services/app-list/apps-list.component.scss
index 682a1ab76b..2af14a42ee 100644
--- a/lib/process-services/app-list/apps-list.component.scss
+++ b/lib/process-services/app-list/apps-list.component.scss
@@ -1,3 +1,8 @@
+// TODO: import this mixin from core mixins...
+// -------
+@mixin line-clamp($line-height: 1.25, $lines: 3) { display: block; display: -webkit-box; -webkit-box-orient: vertical; position: relative; line-height: $line-height; overflow: hidden; text-overflow: ellipsis; padding: 0 !important; -webkit-line-clamp: $lines; height: calc(0.99em * #{$line-height} * #{$lines}); &:after { content: '...'; text-align: right; bottom: 0; right: 0; width: 25%; display: block; position: absolute; height: calc(0.99em * #{$line-height}); } } @supports (-webkit-line-clamp: 1) { .line-clamp:after { display: none !important; } }
+// -------
+
 :host {
     width: 100%;
 }
@@ -52,6 +57,7 @@ $themes: (
                 right: 20px;
                 top: 20px;
                 padding: 16px;
+                z-index: 9998;
 
                 &-icon {
                     font-size: 70px;
@@ -69,6 +75,8 @@ $themes: (
 
             &-title {
                 padding: 16px;
+                margin-bottom: 0;
+                z-index: 9999;
 
                 h1 {
                     color: white;
@@ -83,7 +91,13 @@ $themes: (
             }
 
             &-subtitle {
+                color: white;
+                z-index: 9999;
                 padding: 16px;
+
+                .line-clamp {
+                    @include line-clamp(1.25, 3);
+                }
             }
 
             &-actions {
diff --git a/lib/process-services/app-list/apps-list.component.spec.ts b/lib/process-services/app-list/apps-list.component.spec.ts
index f3ec7ca70b..63f7296dd4 100644
--- a/lib/process-services/app-list/apps-list.component.spec.ts
+++ b/lib/process-services/app-list/apps-list.component.spec.ts
@@ -55,7 +55,7 @@ describe('AppsListComponent', () => {
         component = fixture.componentInstance;
         debugElement = fixture.debugElement;
 
-        service = fixture.debugElement.injector.get(AppsProcessService);
+        service = TestBed.get(AppsProcessService);
         getAppsSpy = spyOn(service, 'getDeployedApplications').and.returnValue(Observable.of(deployedApps));
     });
 
diff --git a/lib/process-services/app-list/apps-list.component.ts b/lib/process-services/app-list/apps-list.component.ts
index 01bbb8a786..fb3e83aec6 100644
--- a/lib/process-services/app-list/apps-list.component.ts
+++ b/lib/process-services/app-list/apps-list.component.ts
@@ -37,15 +37,21 @@ export class AppsListComponent implements OnInit {
     public static DEFAULT_TASKS_APP_ICON: string = 'glyphicon-asterisk';
     public static DEFAULT_TASKS_APP_MATERIAL_ICON: string = 'favorite_border';
 
+    /** (**required**) Defines the layout of the apps. There are two possible
+     * values, "GRID" and "LIST".
+     */
     @Input()
     layoutType: string = AppsListComponent.LAYOUT_GRID;
 
+    /** Provides a way to filter the apps to show. */
     @Input()
     filtersAppId: any[];
 
+    /** Emitted when an app entry is clicked. */
     @Output()
     appClick: EventEmitter<AppDefinitionRepresentationModel> = new EventEmitter<AppDefinitionRepresentationModel>();
 
+    /** Emitted when an error occurs. */
     @Output()
     error: EventEmitter<any> = new EventEmitter<any>();
 
diff --git a/lib/process-services/app-list/apps-list.module.ts b/lib/process-services/app-list/apps-list.module.ts
index 26a8dfdc28..d6423d50d6 100644
--- a/lib/process-services/app-list/apps-list.module.ts
+++ b/lib/process-services/app-list/apps-list.module.ts
@@ -22,6 +22,7 @@ import { MaterialModule } from '../material.module';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { AppsListComponent } from './apps-list.component';
+import { SelectAppsDialogComponent } from './select-apps-dialog-component';
 
 @NgModule({
     imports: [
@@ -31,11 +32,16 @@ import { AppsListComponent } from './apps-list.component';
         TranslateModule
     ],
     declarations: [
-        AppsListComponent
+        AppsListComponent,
+        SelectAppsDialogComponent
     ],
     providers: [],
     exports: [
-        AppsListComponent
+        AppsListComponent,
+        SelectAppsDialogComponent
+    ],
+    entryComponents: [
+        SelectAppsDialogComponent
     ]
 })
 export class AppsListModule {
diff --git a/lib/process-services/app-list/public-api.ts b/lib/process-services/app-list/public-api.ts
index fb2c71a74d..48eb0254f0 100644
--- a/lib/process-services/app-list/public-api.ts
+++ b/lib/process-services/app-list/public-api.ts
@@ -16,3 +16,4 @@
  */
 
 export * from './apps-list.component';
+export * from './select-apps-dialog-component';
diff --git a/lib/process-services/app-list/select-apps-dialog-component.html b/lib/process-services/app-list/select-apps-dialog-component.html
new file mode 100644
index 0000000000..e49a1c08f6
--- /dev/null
+++ b/lib/process-services/app-list/select-apps-dialog-component.html
@@ -0,0 +1,13 @@
+<header mat-dialog-title id="adf-selet-app-dialog-title">{{'APP.DIALOG.TITLE' | translate}}</header>
+<section mat-dialog-content>
+
+    <mat-select id="adf-selet-app-dialog-dropdown" placeholder="{{'APP.DIALOG.LIST' | translate}}" [(value)]="selectedProcess" >
+        <mat-option *ngFor="let currentProcessApp of processApps" [value]="currentProcessApp">
+            {{ currentProcessApp.name }}
+        </mat-option>
+    </mat-select>
+
+</section>
+<footer mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+    <button mat-button (click)="onStart()">{{'APP.DIALOG.START' | translate}}</button>
+</footer>
diff --git a/lib/process-services/app-list/select-apps-dialog-component.spec.ts b/lib/process-services/app-list/select-apps-dialog-component.spec.ts
new file mode 100644
index 0000000000..3e236b10dc
--- /dev/null
+++ b/lib/process-services/app-list/select-apps-dialog-component.spec.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
+ * 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 { async, TestBed } from '@angular/core/testing';
+import { ComponentFixture } from '@angular/core/testing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { MaterialModule } from '../material.module';
+import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
+import { MatDialog } from '@angular/material';
+import { OverlayContainer } from '@angular/cdk/overlay';
+import { AppsProcessService } from '@alfresco/adf-core';
+import { deployedApps } from '../mock/apps-list.mock';
+import { Observable } from 'rxjs/Observable';
+
+import { SelectAppsDialogComponent } from './select-apps-dialog-component';
+
+@Component({
+    selector: 'adf-dialog-test',
+    template: ''
+})
+export class DialogSelectAppTestComponent {
+
+    processId: any;
+
+    dialogRef: any;
+
+    constructor(private dialog: MatDialog) {
+    }
+
+    startProcesAction() {
+        this.dialogRef = this.dialog.open(SelectAppsDialogComponent, {
+            width: '630px'
+        });
+
+        this.dialogRef.afterClosed().subscribe(selectedProcess => {
+            this.processId = selectedProcess.id;
+        });
+    }
+
+}
+
+describe('Select app dialog', () => {
+
+    let fixture: ComponentFixture<DialogSelectAppTestComponent>;
+    let component: DialogSelectAppTestComponent;
+    let dialogRef;
+    let overlayContainerElement: HTMLElement;
+    let service: AppsProcessService;
+
+    beforeEach(async(() => {
+        dialogRef = {
+            close: jasmine.createSpy('close')
+        };
+
+        TestBed.configureTestingModule({
+            imports: [
+                MaterialModule,
+                FormsModule,
+                ReactiveFormsModule,
+                BrowserDynamicTestingModule
+            ],
+            declarations: [
+                SelectAppsDialogComponent,
+                DialogSelectAppTestComponent
+            ],
+            providers: [
+                AppsProcessService,
+                {
+                    provide: OverlayContainer,
+                    useFactory: () => {
+                        overlayContainerElement = document.createElement('div');
+                        return { getContainerElement: () => overlayContainerElement };
+                    }
+                }
+                {
+                    provide: MatDialogRef, useValue: dialogRef
+                },
+                {
+                    provide: MAT_DIALOG_DATA,
+                    useValue: {}
+                }
+            ]
+        });
+
+        TestBed.overrideModule(BrowserDynamicTestingModule, {
+            set: { entryComponents: [SelectAppsDialogComponent] }
+        });
+
+        TestBed.compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(DialogSelectAppTestComponent);
+        component = fixture.componentInstance;
+
+        service = TestBed.get(AppsProcessService);
+
+        spyOn(service, 'getDeployedApplications').and.returnValue(Observable.of(deployedApps));
+    });
+
+    describe('Dialog', () => {
+
+        beforeEach(() => {
+            fixture.detectChanges();
+        };
+
+        it('should init title and dropdown', () => {
+            component.startProcesAction();
+
+            expect(overlayContainerElement.querySelector('.adf-selet-app-dialog-title')).toBeDefined();
+            expect(overlayContainerElement.querySelector('.adf-selet-app-dialog-dropdown')).toBeDefined();
+        });
+    });
+
+});
diff --git a/lib/process-services/app-list/select-apps-dialog-component.ts b/lib/process-services/app-list/select-apps-dialog-component.ts
new file mode 100644
index 0000000000..953de62b17
--- /dev/null
+++ b/lib/process-services/app-list/select-apps-dialog-component.ts
@@ -0,0 +1,56 @@
+/*!
+ * @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 { AppsProcessService, NotificationService, TranslationService } from '@alfresco/adf-core';
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+
+@Component({
+    selector: 'adf-select-apps-dialog',
+    templateUrl: 'select-apps-dialog-component.html'
+})
+export class SelectAppsDialogComponent {
+
+    processApps: any;
+
+    selectedProcess: any;
+
+    constructor(private appsProcessService: AppsProcessService,
+                private translateService: TranslationService,
+                private notificationService: NotificationService,
+                public dialogRef: MatDialogRef<SelectAppsDialogComponent>,
+                @Inject(MAT_DIALOG_DATA) public data: any) {
+
+        this.appsProcessService.getDeployedApplications().subscribe(
+            (apps: any[]) => {
+                this.processApps = apps.filter((currentApp) => {
+                    return currentApp.id;
+                });
+            },
+            (err) => {
+                this.translateService.get('TAG.MESSAGES.EXIST').subscribe((error) => {
+                    this.notificationService.openSnackMessage(error, 4000);
+                });
+            }
+        );
+
+    }
+
+    onStart(): void {
+        this.dialogRef.close(this.selectedProcess);
+    }
+}
diff --git a/lib/process-services/assets/images/alfresco-flower.svg b/lib/process-services/assets/images/alfresco-flower.svg
new file mode 100644
index 0000000000..0b796b7d60
--- /dev/null
+++ b/lib/process-services/assets/images/alfresco-flower.svg
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="17.2 134.6 562 573.1" enable-background="new 17.2 134.6 562 573.1" xml:space="preserve">
+<path fill="#FFFFFF" d="M298.2,421.3L219,340.4l-2.9-2.9c-45.4-46.5-119.5-46.5-164.7-0.2c-45.6,46.3-45.6,121.5,0,167.8
+	c45.2,46.4,119,46.4,164.4,0L298.2,421.3z"/>
+<path fill="#FFFFFF" d="M298.2,421.2v114.3l0.2,4.2c0,65.5-52.2,119-116.5,119c-64.3,0-116.5-53.1-116.5-118.6
+	c0-65.6,52.4-118.8,116.5-118.8H298.2z"/>
+<path fill="#FFFFFF" d="M298.2,421.2v114.3l0.2,4.2c0,65.5-52.2,119-116.5,119c-64.3,0-116.5-53.1-116.5-118.6
+	c0-65.6,52.4-118.8,116.5-118.8H298.2z"/>
+<path fill="#FFFFFF" d="M298.2,421.2v114.3l0.2,4.2c0,65.5-52.2,119-116.5,119c-64.3,0-116.5-53.1-116.5-118.6
+	c0-7.3,0.8-14.4,2-21.2c45.4,32.2,108.2,27.7,148.6-13.7l82.4-83.8V421.2z"/>
+<path fill="#8ABF42" d="M181.9,436.1c-56.1,0-101.6,46.5-101.6,103.8c0,57.1,45.6,103.5,101.6,103.5c56.2,0,101.7-46.4,101.7-103.5
+	v-4.5v-99.3H182.1H181.9z"/>
+<path fill="#FFFFFF" d="M298.2,421.2l79.2,80.8l3.3,2.9c45.2,46.4,45.5,121.8,0,168.1c-45.6,46.3-119.2,46.3-164.8,0
+	c-45.4-46.3-45.4-121.5,0-168L298.2,421.2z"/>
+<path fill="#8ABF42" d="M226.5,515.6c-39.8,40.5-39.8,106.2,0,146.6c39.6,40.5,104,40.5,143.8,0c39.6-40.4,39.6-106.1,0-146.6
+	l-3.3-3l-68.7-70.2l-71.7,73.1V515.6z"/>
+<path fill="#FFFFFF" d="M298.2,421.2h112.2l4.1-0.2c64.4,0,116.5,53.2,116.5,118.8c0,65.6-52,118.6-116.3,118.6
+	c-64.3,0-116.5-53.1-116.5-118.6V421.2z"/>
+<path fill="#8ABF42" d="M313.1,539.8c0,57.3,45.4,103.7,101.6,103.7c56,0,101.4-46.4,101.4-103.7c0-57.3-45.4-103.6-101.4-103.6
+	h-4.3h-97.4v103.3V539.8z"/>
+<path fill="#FFFFFF" d="M298.2,421.2l79.2-80.9l3.1-3.1c45.4-46.3,119.2-46.5,164.6-0.2c45.4,46.4,45.4,121.5,0,167.9
+	c-45.4,46.4-119.2,46.4-164.6,0L298.2,421.2z"/>
+<path fill="#8ABF42" d="M391.1,494.3c39.4,40.6,103.8,40.6,143.6,0c39.8-40.4,39.8-106,0-146.5c-39.8-40.5-104.1-40.5-143.6,0
+	l-3.3,3.2l-68.6,70.3l71.5,73L391.1,494.3z"/>
+<path fill="#FFFFFF" d="M298.2,421.2V306.8v-4.3c0-65.5,51.9-118.8,116.5-118.8c64.2,0,116.1,52.9,116.1,118.6
+	c0,65.6-52,118.8-116.1,118.8H298.2z"/>
+<path fill="#F89F31" d="M414.7,406.1c56,0,101.4-46.4,101.4-103.7c0-57.1-45.4-103.6-101.4-103.6c-56.3,0-101.8,46.5-101.8,103.6
+	l0.2,4.4v99.3h101.1H414.7z"/>
+<path fill="#FFFFFF" d="M298.2,421.2L219,340.3l-3.1-2.9c-45.4-46.5-45.4-121.8,0-168.1c45.2-46.4,119.1-46.4,164.6,0
+	c45.4,46.3,45.4,121.6,0,167.9L298.2,421.2z"/>
+<path fill="#0080C5" d="M370.1,327.6c39.6-40.5,39.6-106.2,0-146.6c-39.8-40.5-104-40.5-143.7,0c-39.8,40.4-39.8,106.1,0,146.6
+	l2.9,3.1l69,70.1l71.6-73L370.1,327.6z"/>
+<path fill="#FFFFFF" d="M298.2,422.1H186.1l-4.2,0.1c-64.1,0-116.5-53.2-116.5-118.8c0-65.5,52.2-118.7,116.3-118.7
+	c64.3,0,116.6,53.2,116.6,118.8V422.1z"/>
+<path fill="#0080C5" d="M283.5,303.5c0-57.3-45.4-103.6-101.8-103.6c-56,0-101.6,46.3-101.6,103.5c0,57.2,45.6,103.7,101.6,103.7
+	l4.4-0.1h97.4V303.8V303.5z"/>
+<path fill="#FFFFFF" d="M298.2,422.1l-281,0.1c0-30.4,11.2-60.8,34.2-84c45.2-46.3,119-46.3,164.4,0L298.2,422.1z"/>
+<path fill="#0080C5" d="M205.4,348.9l71.9,73.3h-95.5c-51.6,0-95.5,34.3-110.7,81.9c-3.1-2.7-6.4-5.5-9.3-8.7
+	c-39.8-40.5-39.8-106,0-146.5C101.3,308.4,165.8,308.4,205.4,348.9"/>
+<path fill="#005DA9" d="M205.6,349l56.9,58l-80.9,0.2c-46.6,0-85.8-31.9-97.8-75.5c38.6-22.1,89.2-16.8,121.6,17.1L205.6,349z"/>
+<path fill="#005DA9" d="M283.5,303.7l-0.1,82.1l-57.1-58.2c-32.9-33.6-38.7-84.4-17-123.8c42.7,12.2,74.2,52.2,74.2,99.8V303.7z"/>
+<path fill="#005DA9" d="M312.6,386v-82.4c0-47.5,31.5-87.5,74.2-99.8c21.6,39.5,17.6,89-16.4,123.3L312.6,386z"/>
+<path fill="#FFDE4F" d="M333.9,406.1l57.1-58.3c32.9-33.6,82.8-39.3,121.4-17.2c-12.2,43.5-49.4,74.8-95.3,75.6L333.9,406.1z"/>
+<path fill="#48A64A" d="M333.8,436.1h80.8c46.6,0,85.8,31.7,97.8,75.4c-38.9,22.2-88.7,16.3-121.8-17.2L333.8,436.1z"/>
+<path fill="#48A64A" d="M313.1,539.2v-82l57.2,58.2c32.9,33.7,38.5,84.7,16.8,124.1c-42.7-12.2-74-52.4-74-99.9V539.2z"/>
+<path fill="#48A64A" d="M226.6,515.4l56.9-58l0.1,82.4c0,47.5-31.3,87.4-74,99.7c-21.6-39.5-15.8-90.4,17-123.9V515.4z"/>
+<path fill="#48A64A" d="M182.4,436.1h80.4l-57,58.2c-32.8,33.5-83.1,39.3-121.7,17.3c12.1-43.7,51.4-75.5,98-75.5H182.4z"/>
+</svg>
diff --git a/lib/process-services/attachment/create-process-attachment.component.ts b/lib/process-services/attachment/create-process-attachment.component.ts
index 669e137f05..c06bbb4b69 100644
--- a/lib/process-services/attachment/create-process-attachment.component.ts
+++ b/lib/process-services/attachment/create-process-attachment.component.ts
@@ -25,12 +25,19 @@ import { ProcessContentService } from '@alfresco/adf-core';
 })
 export class CreateProcessAttachmentComponent implements OnChanges {
 
+    /** (required) The ID of the process instance to display. */
     @Input()
     processInstanceId: string;
 
+    /** Emitted when an error occurs while creating or uploading an attachment
+     * from the user within the component.
+     */
     @Output()
     error: EventEmitter<any> = new EventEmitter<any>();
 
+    /** Emitted when an attachment is successfully created or uploaded
+     * from within the component.
+     */
     @Output()
     success: EventEmitter<any> = new EventEmitter<any>();
 
diff --git a/lib/process-services/attachment/create-task-attachment.component.ts b/lib/process-services/attachment/create-task-attachment.component.ts
index 65310420e3..037136c9d5 100644
--- a/lib/process-services/attachment/create-task-attachment.component.ts
+++ b/lib/process-services/attachment/create-task-attachment.component.ts
@@ -25,12 +25,19 @@ import { ProcessContentService } from '@alfresco/adf-core';
 })
 export class AttachmentComponent implements OnChanges {
 
+    /** (required) The numeric ID of the task to display. */
     @Input()
     taskId: string;
 
+    /** Emitted when an error occurs while creating or uploading an
+     *  attachment from the user within the component.
+     */
     @Output()
     error: EventEmitter<any> = new EventEmitter<any>();
 
+    /** Emitted when an attachment is created or uploaded successfully
+     * from within the component.
+     */
     @Output()
     success: EventEmitter<any> = new EventEmitter<any>();
 
diff --git a/lib/process-services/attachment/process-attachment-list.component.html b/lib/process-services/attachment/process-attachment-list.component.html
index 456d650759..f2fe9bf97b 100644
--- a/lib/process-services/attachment/process-attachment-list.component.html
+++ b/lib/process-services/attachment/process-attachment-list.component.html
@@ -1,16 +1,22 @@
-<adf-datatable [rows]="attachments" [actions]="true" [loading]="isLoading" (rowDblClick)="openContent($event)" (showRowActionsMenu)="onShowRowActionsMenu($event)"
-    (executeRowAction)="onExecuteRowAction($event)">
+<adf-datatable  [rows]="attachments" 
+                [actions]="true" 
+                [loading]="isLoading" 
+                (rowDblClick)="openContent($event)" 
+                (showRowActionsMenu)="onShowRowActionsMenu($event)"
+                (executeRowAction)="onExecuteRowAction($event)">
 
-    <adf-empty-list *ngIf="isEmpty()">
-        <div adf-empty-list-header class="adf-empty-list-header"> {{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.HEADER' | translate}} </div>
-        <div adf-empty-list-body *ngIf="!isDisabled()">
-            <div fxHide.lt-md="true" class="adf-empty-list-drag_drop">{{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.DRAG-AND-DROP.TITLE' | translate}}</div>
-            <div fxHide.lt-md="true" class="adf-empty-list__any-files-here-to-add"> {{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate}} </div>
-        </div>
-        <div adf-empty-list-footer *ngIf="!isDisabled()">
-            <img class="adf-empty-list__empty_doc_lib" [src]="emptyListImageUrl">
-        </div>
-    </adf-empty-list>
+                <no-content-template>
+                    <ng-template>
+                        <ng-content *ngIf="hasCustomTemplate; else defaulEmptyList" class="adf-custom-empty-template"></ng-content>
+                        <ng-template #defaulEmptyList>
+                            <adf-empty-list>
+                                <div adf-empty-list-header class="adf-empty-list-header">
+                                    {{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.HEADER' | translate}}
+                                </div>
+                            </adf-empty-list>
+                        </ng-template>
+                    </ng-template>
+                </no-content-template>
 
     <data-columns>
         <data-column key="icon" type="image" srTitle="ADF_PROCESS_LIST.PROPERTIES.THUMBNAIL" [sortable]="false"></data-column>
diff --git a/lib/process-services/attachment/process-attachment-list.component.spec.ts b/lib/process-services/attachment/process-attachment-list.component.spec.ts
index 6575736445..348c3e2c74 100644
--- a/lib/process-services/attachment/process-attachment-list.component.spec.ts
+++ b/lib/process-services/attachment/process-attachment-list.component.spec.ts
@@ -15,14 +15,14 @@
  * limitations under the License.
  */
 
-import { NgZone, SimpleChange } from '@angular/core';
+import { NgZone, SimpleChange, Component } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatProgressSpinnerModule } from '@angular/material';
+import { MaterialModule } from '../material.module';
 import { By } from '@angular/platform-browser';
 import { TranslateService } from '@ngx-translate/core';
 import { ProcessContentService } from '@alfresco/adf-core';
 import { Observable } from 'rxjs/Observable';
-
 import { ProcessAttachmentListComponent } from './process-attachment-list.component';
 
 describe('ProcessAttachmentListComponent', () => {
@@ -202,22 +202,6 @@ describe('ProcessAttachmentListComponent', () => {
         });
     }));
 
-    it('should show the empty list drag and drop component when the process is not completed', async(() => {
-        getProcessRelatedContentSpy.and.returnValue(Observable.of({
-            'size': 0,
-            'total': 0,
-            'start': 0,
-            'data': []
-        }));
-        let change = new SimpleChange(null, '123', true);
-        component.ngOnChanges({'processInstanceId': change});
-        fixture.whenStable().then(() => {
-            fixture.detectChanges();
-            expect(fixture.nativeElement.querySelector('adf-empty-list .adf-empty-list-drag_drop').innerText.trim())
-            .toEqual('ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.DRAG-AND-DROP.TITLE');
-        });
-    }));
-
     it('should not show the empty list drag and drop component when is disabled', async(() => {
         getProcessRelatedContentSpy.and.returnValue(Observable.of({
             'size': 0,
@@ -308,3 +292,45 @@ describe('ProcessAttachmentListComponent', () => {
     });
 
 });
+
+@Component({
+    template: `
+    <adf-process-attachment-list>
+        <adf-empty-list>
+            <div adf-empty-list-header class="adf-empty-list-header">Custom header</div>
+        </adf-empty-list>
+    </adf-process-attachment-list>
+       `
+})
+class CustomEmptyTemplateComponent {
+}
+
+describe('Custom CustomEmptyTemplateComponent', () => {
+    let fixture: ComponentFixture<CustomEmptyTemplateComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [
+                ProcessAttachmentListComponent,
+                CustomEmptyTemplateComponent
+            ],
+            imports: [
+                MaterialModule
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(CustomEmptyTemplateComponent);
+        fixture.detectChanges();
+    });
+
+    it('should render the custom template', () => {
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            let title: any = fixture.debugElement.queryAll(By.css('[adf-empty-list-header]'));
+            expect(title.length).toBe(1);
+            expect(title[0].nativeElement.innerText).toBe('Custom header');
+        });
+    });
+});
diff --git a/lib/process-services/attachment/process-attachment-list.component.ts b/lib/process-services/attachment/process-attachment-list.component.ts
index da1c40e4a4..50976948b9 100644
--- a/lib/process-services/attachment/process-attachment-list.component.ts
+++ b/lib/process-services/attachment/process-attachment-list.component.ts
@@ -15,16 +15,20 @@
  * limitations under the License.
  */
 
-import { ContentService, ThumbnailService } from '@alfresco/adf-core';
-import { Component, EventEmitter, Input, NgZone, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { ContentService, EmptyListComponent , ThumbnailService } from '@alfresco/adf-core';
+import { AfterContentInit, ContentChild, Component, EventEmitter, Input, NgZone, OnChanges, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
 import { ProcessContentService } from '@alfresco/adf-core';
 
 @Component({
     selector: 'adf-process-attachment-list',
     styleUrls: ['./process-attachment-list.component.scss'],
-    templateUrl: './process-attachment-list.component.html'
+    templateUrl: './process-attachment-list.component.html',
+    encapsulation: ViewEncapsulation.None
 })
-export class ProcessAttachmentListComponent implements OnChanges {
+export class ProcessAttachmentListComponent implements OnChanges, AfterContentInit {
+
+    @ContentChild(EmptyListComponent)
+    emptyTemplate: EmptyListComponent;
 
     @Input()
     processInstanceId: string;
@@ -41,8 +45,7 @@ export class ProcessAttachmentListComponent implements OnChanges {
     @Output()
     error: EventEmitter<any> = new EventEmitter<any>();
 
-    @Input()
-    emptyListImageUrl: string = './assets/images/empty_doc_lib.svg';
+    hasCustomTemplate: boolean = false;
 
     attachments: any[] = [];
     isLoading: boolean = true;
@@ -59,6 +62,12 @@ export class ProcessAttachmentListComponent implements OnChanges {
         }
     }
 
+    ngAfterContentInit() {
+        if (this.emptyTemplate) {
+            this.hasCustomTemplate = true;
+        }
+    }
+
     reset() {
         this.attachments = [];
     }
@@ -69,6 +78,10 @@ export class ProcessAttachmentListComponent implements OnChanges {
         });
     }
 
+    hasCutomEmptyTemplate() {
+        return !!this.emptyTemplate;
+    }
+
     add(content: any): void {
         this.ngZone.run(() => {
             this.attachments.push({
diff --git a/lib/process-services/attachment/task-attachment-list.component.spec.ts b/lib/process-services/attachment/task-attachment-list.component.spec.ts
index 9c957d22c5..16fb136d84 100644
--- a/lib/process-services/attachment/task-attachment-list.component.spec.ts
+++ b/lib/process-services/attachment/task-attachment-list.component.spec.ts
@@ -331,9 +331,11 @@ describe('Custom CustomEmptyTemplateComponent', () => {
     });
 
     it('should render the custom template', () => {
-        fixture.detectChanges();
-        let title: any = fixture.debugElement.queryAll(By.css('[adf-empty-list-header]'));
-        expect(title.length).toBe(1);
-        expect(title[0].nativeElement.innerText).toBe('Custom header');
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            let title: any = fixture.debugElement.queryAll(By.css('[adf-empty-list-header]'));
+            expect(title.length).toBe(1);
+            expect(title[0].nativeElement.innerText).toBe('Custom header');
+        });
     });
 });
diff --git a/lib/process-services/attachment/task-attachment-list.component.ts b/lib/process-services/attachment/task-attachment-list.component.ts
index f30ab4d23f..e2ff5606bb 100644
--- a/lib/process-services/attachment/task-attachment-list.component.ts
+++ b/lib/process-services/attachment/task-attachment-list.component.ts
@@ -16,7 +16,7 @@
  */
 
 import { ContentService, ThumbnailService, EmptyListComponent } from '@alfresco/adf-core';
-import { AfterContentInit, ContentChild, Component, ElementRef, EventEmitter, Input, NgZone, OnChanges, Output, SimpleChanges, ViewChild, ViewEncapsulation } from '@angular/core';
+import { AfterContentInit, ContentChild, Component, EventEmitter, Input, NgZone, OnChanges, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
 import { ProcessContentService } from '@alfresco/adf-core';
 
 @Component({
@@ -47,11 +47,6 @@ export class TaskAttachmentListComponent implements OnChanges, AfterContentInit
 
     hasCustomTemplate: boolean = false;
 
-    @ViewChild('customEmptyListTemplate')
-    customTemplateRef: ElementRef;
-
-    curret: any;
-
     attachments: any[] = [];
     isLoading: boolean = false;
 
diff --git a/lib/process-services/comments/comment-list.component.ts b/lib/process-services/comments/comment-list.component.ts
index 3f4bc1f27b..92d357f838 100644
--- a/lib/process-services/comments/comment-list.component.ts
+++ b/lib/process-services/comments/comment-list.component.ts
@@ -27,9 +27,11 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 export class CommentListComponent {
 
+    /** The comments data used to populate the list. */
     @Input()
     comments: CommentProcessModel[];
 
+    /** Emitted when the user clicks on one of the comment rows. */
     @Output()
     clickRow: EventEmitter<CommentProcessModel> = new EventEmitter<CommentProcessModel>();
 
diff --git a/lib/process-services/comments/comments.component.ts b/lib/process-services/comments/comments.component.ts
index 08102ae930..eece99d06b 100644
--- a/lib/process-services/comments/comments.component.ts
+++ b/lib/process-services/comments/comments.component.ts
@@ -27,12 +27,15 @@ import { Observer } from 'rxjs/Observer';
 })
 export class CommentsComponent implements OnChanges {
 
+    /** The numeric ID of the task. */
     @Input()
     taskId: string;
 
+    /** Are the comments read only? */
     @Input()
     readOnly: boolean = false;
 
+    /** Emitted when an error occurs while displaying/adding a comment. */
     @Output()
     error: EventEmitter<any> = new EventEmitter<any>();
 
diff --git a/lib/process-services/content-widget/attach-file-widget.component.html b/lib/process-services/content-widget/attach-file-widget.component.html
new file mode 100644
index 0000000000..561efd3ac3
--- /dev/null
+++ b/lib/process-services/content-widget/attach-file-widget.component.html
@@ -0,0 +1,83 @@
+<div class="adf-attach-widget {{field.className}}"
+    [class.adf-invalid]="!field.isValid"
+    [class.adf-readonly]="field.readOnly">
+    <label class="adf-label" [attr.for]="field.id">{{field.name}}
+        <span *ngIf="isRequired()">*</span>
+    </label>
+    <div class="adf-attach-widget-container">
+        <div id="adf-attach-widget-simple-upload" *ngIf="isSimpleUploadButton() && isUploadButtonVisible()">
+            <a mat-raised-button color="primary">
+                {{ 'FORM.FIELD.UPLOAD' | translate }}
+                <mat-icon>file_upload</mat-icon>
+                <input #uploadFiles
+                        [multiple]="multipleOption"
+                        type="file"
+                        [id]="field.id"
+                        (change)="onFileChanged($event)" />
+            </a>
+        </div>
+        <div class="adf-attach-widget__menu-upload" *ngIf="isUploadButtonVisible() && isMultipleSourceUpload()">
+            <button mat-raised-button color="primary" [matMenuTriggerFor]="menu" [id]="field.id">
+                    {{ 'FORM.FIELD.UPLOAD' | translate }}
+                    <mat-icon>attach_file</mat-icon>
+            </button>
+            <mat-menu #menu="matMenu" class="adf-attach-widget__menu-content">
+                <button mat-menu-item (click)="uploadFile.click()"
+                        id="attach-local-file"
+                        *ngIf="isAllFileSourceSelected()">
+                    {{ 'FORM.FIELD.LOCALSTORAGE' | translate }}
+                    <mat-icon>file_upload</mat-icon>
+                    <input #uploadFile
+                            class="adf-attach-widget__input-type"
+                            [multiple]="multipleOption"
+                            type="file"
+                            [id]="field.id"
+                            (change)="onFileChanged($event)" />
+                </button>
+                <button mat-menu-item
+                        *ngIf="isDefinedSourceFolder()"
+                        id="attach-{{field.params?.fileSource?.name}}"
+                        (click)="openSelectDialogFromFileSource()">
+                        {{field.params?.fileSource?.name}}
+                        <mat-icon>
+                            <img class="adf-attach-widget__image-logo" src="../assets/images/alfresco-flower.svg">
+                        </mat-icon>
+                </button>
+                <div *ngIf="!isDefinedSourceFolder()">
+                    <button mat-menu-item *ngFor="let repo of repositoryList"
+                            id="attach-{{repo?.name}}"
+                           (click)="openSelectDialog(repo.id, repo.name)">
+                            {{repo.name}}
+                            <mat-icon>
+                                <img class="adf-attach-widget__image-logo" src="../assets/images/alfresco-flower.svg">
+                            </mat-icon>
+                    </button>
+                </div>
+            </mat-menu>
+        </div>
+    </div>
+</div>
+
+<div id="adf-attach-widget-readonly-list">
+    <mat-list *ngIf="hasFile">
+        <mat-list-item class="adf-attach-files-row" *ngFor="let file of field.value">
+            <img mat-list-icon class="adf-attach-widget__icon"
+                 [id]="'file-'+file.id+'-icon'"
+                 [src]="getIcon(file.mimeType)"
+                 [alt]="mimeTypeIcon"
+                 (click)="fileClicked(file)"
+                 (keyup.enter)="fileClicked(file)"
+                 role="button"
+                 tabindex="0"/>
+            <span matLine id="{{'file-'+file.id}}" (click)="fileClicked(file)" (keyup.enter)="fileClicked(file)"
+                  role="button" tabindex="0" class="adf-file">{{file.name}}</span>
+            <button *ngIf="!field.readOnly" mat-icon-button [id]="'file-'+file.id+'-remove'"
+                    (click)="removeFile(file);" (keyup.enter)="removeFile(file);">
+                <mat-icon class="mat-24">highlight_off</mat-icon>
+            </button>
+        </mat-list-item>
+    </mat-list>
+</div>
+
+<error-widget [error]="field.validationSummary"></error-widget>
+<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
diff --git a/lib/process-services/content-widget/attach-file-widget.component.scss b/lib/process-services/content-widget/attach-file-widget.component.scss
new file mode 100644
index 0000000000..61b904af33
--- /dev/null
+++ b/lib/process-services/content-widget/attach-file-widget.component.scss
@@ -0,0 +1,73 @@
+.adf {
+
+    &-attach-widget-container {
+        margin-bottom: 15px;
+        display: flex;
+        align-items: center;
+
+        input {
+            cursor: pointer;
+            height: 100%;
+            right: 0;
+            opacity: 0;
+            position: absolute;
+            top: 0;
+            width: 300px;
+            z-index: 4;
+        }
+    }
+
+    &-attach-widget__menu-upload {
+        display: flex;
+        align-items: center;
+    }
+
+    &-attach-widget__input-type {
+        width: 0.1px;
+        height: 0.1px;
+        opacity: 0;
+        overflow: hidden;
+        position: absolute;
+        z-index: -1;
+    }
+
+    &-attach-widget__image-logo{
+        padding-left: 5px;
+    }
+
+    &-attach-widget-repo-button{
+        padding-left: 10px;
+
+        .mat-button-wrapper {
+            display: inline;
+        }
+
+        .mat-mini-fab.mat-accent {
+            background-color: inherit;
+        }
+    }
+
+    &-attach-widget {
+        width: 100%;
+        word-break: break-all;
+        padding: 0.4375em 0;
+        border-top: 0.84375em solid transparent;
+    }
+
+    &-attach-widget__icon {
+        padding: 6px;
+        float: left;
+        cursor: pointer;
+    }
+
+    &-attach-widget__reset {
+        margin-top: -2px;
+    }
+
+    &-attach-files-row {
+        .mat-line {
+            margin-bottom: 0px;
+        }
+    }
+
+}
diff --git a/lib/process-services/content-widget/attach-file-widget.component.ts b/lib/process-services/content-widget/attach-file-widget.component.ts
new file mode 100644
index 0000000000..9eab0f881f
--- /dev/null
+++ b/lib/process-services/content-widget/attach-file-widget.component.ts
@@ -0,0 +1,142 @@
+/*!
+ * @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.
+ */
+
+/* tslint:disable:component-selector */
+
+import { Component, ViewEncapsulation, OnInit } from '@angular/core';
+import {
+    baseHost,
+    UploadWidgetComponent,
+    FormService,
+    LogService,
+    ThumbnailService,
+    ProcessContentService,
+    ActivitiContentService
+} from '@alfresco/adf-core';
+import { ContentNodeDialogService } from '@alfresco/adf-content-services';
+import { MinimalNodeEntryEntity } from 'alfresco-js-api';
+import { Observable } from 'rxjs/Observable';
+
+@Component({
+    selector: 'attach-widget',
+    templateUrl: './attach-file-widget.component.html',
+    styleUrls: ['./attach-file-widget.component.scss'],
+    host: baseHost,
+    encapsulation: ViewEncapsulation.None
+})
+export class AttachFileWidgetComponent extends UploadWidgetComponent implements OnInit {
+
+    repositoryList = [];
+
+    constructor(public formService: FormService,
+                private logger: LogService,
+                public thumbnails: ThumbnailService,
+                public processContentService: ProcessContentService,
+                private activitiContentService: ActivitiContentService,
+                private contentDialog: ContentNodeDialogService) {
+        super(formService, logger, thumbnails, processContentService);
+    }
+
+    ngOnInit() {
+        if (this.field &&
+            this.field.value &&
+            this.field.value.length > 0) {
+            this.hasFile = true;
+        }
+        this.getMultipleFileParam();
+        this.activitiContentService.getAlfrescoRepositories(null, true).subscribe((repoList) => {
+            this.repositoryList = repoList;
+        });
+    }
+
+    isFileSourceConfigured(): boolean {
+        return !!this.field.params && !!this.field.params.fileSource;
+    }
+
+    isMultipleSourceUpload(): boolean {
+        return !this.field.readOnly && this.isFileSourceConfigured() && !this.isOnlyLocalSourceSelected();
+    }
+
+    isAllFileSourceSelected(): boolean {
+        return this.field.params &&
+            this.field.params.fileSource &&
+            this.field.params.fileSource.serviceId === 'all-file-sources';
+    }
+
+    isOnlyLocalSourceSelected(): boolean {
+        return this.field.params &&
+            this.field.params.fileSource &&
+            this.field.params.fileSource.serviceId === 'local-file';
+    }
+
+    isSimpleUploadButton(): boolean {
+        return this.isUploadButtonVisible() &&
+            !this.isFileSourceConfigured() ||
+            this.isOnlyLocalSourceSelected();
+    }
+
+    isUploadButtonVisible(): boolean {
+        return (!this.hasFile || this.multipleOption) && !this.field.readOnly;
+    }
+
+    isDefinedSourceFolder(): boolean {
+        return !!this.field.params &&
+            !!this.field.params.fileSource &&
+            !!this.field.params.fileSource.selectedFolder;
+    }
+
+    openSelectDialogFromFileSource() {
+        let params = this.field.params;
+        if (this.isDefinedSourceFolder()) {
+            this.contentDialog.openFileBrowseDialogByFolderId(params.fileSource.selectedFolder.pathId).subscribe(
+                (selections: MinimalNodeEntryEntity[]) => {
+                    this.uploadFileFromCS(selections,
+                        this.field.params.fileSource.selectedFolder.accountId,
+                        this.field.params.fileSource.selectedFolder.siteId);
+                });
+        }
+    }
+
+    openSelectDialog(repoId: string, repoName: string) {
+        const accountIdentifier = 'alfresco-' + repoId + repoName;
+        this.contentDialog.openFileBrowseDialogBySite().subscribe(
+            (selections: MinimalNodeEntryEntity[]) => {
+                this.uploadFileFromCS(selections, accountIdentifier);
+            });
+    }
+
+    private uploadFileFromCS(fileNodeList: MinimalNodeEntryEntity[], accountId: string, siteId?: string) {
+        let filesSaved = [];
+        Observable.from(fileNodeList)
+            .mergeMap(node =>
+                this.activitiContentService.applyAlfrescoNode(node,
+                    siteId,
+                    accountId)
+            ).subscribe((res) => {
+                filesSaved.push(res);
+            },
+            (error) => {
+                this.logger.error(error);
+            },
+            () => {
+                this.field.value = filesSaved;
+                this.field.json.value = filesSaved;
+            });
+        this.hasFile = true;
+    }
+
+}
diff --git a/lib/process-services/content-widget/attach-file-widget.components.spec.ts b/lib/process-services/content-widget/attach-file-widget.components.spec.ts
new file mode 100644
index 0000000000..5f52021e8b
--- /dev/null
+++ b/lib/process-services/content-widget/attach-file-widget.components.spec.ts
@@ -0,0 +1,243 @@
+/*!
+ * @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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { AttachFileWidgetComponent } from './attach-file-widget.component';
+import {
+    FormFieldModel,
+    FormModel,
+    FormFieldTypes,
+    FormService,
+    ProcessContentService,
+    ActivitiContentService,
+    AlfrescoApiService,
+    LogService,
+    ThumbnailService,
+    SitesService,
+    FormFieldMetadata
+} from '@alfresco/adf-core';
+import { ContentNodeDialogService, DocumentListService } from '@alfresco/adf-content-services';
+import { MaterialModule } from '../material.module';
+import { Observable } from 'rxjs/Observable';
+import { MinimalNodeEntryEntity } from 'alfresco-js-api';
+
+const fakeRepositoryListAnswer = [
+    {
+        'authorized': true,
+        'serviceId': 'alfresco-9999-SHAREME',
+        'metaDataAllowed': true,
+        'name': 'SHAREME'
+    },
+    {
+        'authorized': true,
+        'serviceId': 'alfresco-0000-GOKUSHARE',
+        'metaDataAllowed': true,
+        'name': 'GOKUSHARE'
+    }];
+
+const onlyLocalParams = {
+    fileSource : {
+        serviceId: 'local-file'
+    }
+};
+
+const allSourceParams = {
+    fileSource : {
+        serviceId: 'all-file-sources'
+    }
+};
+
+const definedSourceParams = {
+    fileSource : {
+        serviceId: 'goku-sources',
+        name: 'pippo-baudo',
+        selectedFolder: {
+            accountId: 'goku-share-account-id'
+        }
+    }
+};
+
+const fakeMinimalNode: MinimalNodeEntryEntity = <MinimalNodeEntryEntity> {
+    id: 'fake',
+    name: 'fake-name'
+};
+
+const fakePngAnswer = {
+    'id': 1155,
+    'name': 'a_png_file.png',
+    'created': '2017-07-25T17:17:37.099Z',
+    'createdBy': {'id': 1001, 'firstName': 'Admin', 'lastName': 'admin', 'email': 'admin'},
+    'relatedContent': false,
+    'contentAvailable': true,
+    'link': false,
+    'mimeType': 'image/png',
+    'simpleType': 'image',
+    'previewStatus': 'queued',
+    'thumbnailStatus': 'queued'
+};
+
+describe('AttachFileWidgetComponent', () => {
+
+    let widget: AttachFileWidgetComponent;
+    let fixture: ComponentFixture<AttachFileWidgetComponent>;
+    let element: HTMLInputElement;
+    let activitiContentService: ActivitiContentService;
+    let contentNodeDialogService: ContentNodeDialogService;
+    let processContentService: ProcessContentService;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [MaterialModule],
+            declarations: [AttachFileWidgetComponent],
+            providers: [
+                        FormService,
+                        ProcessContentService,
+                        ThumbnailService,
+                        ActivitiContentService,
+                        AlfrescoApiService,
+                        LogService,
+                        SitesService,
+                        DocumentListService,
+                        ContentNodeDialogService
+                    ]
+        }).compileComponents().then(() => {
+            fixture = TestBed.createComponent(AttachFileWidgetComponent);
+            widget = fixture.componentInstance;
+            element = fixture.nativeElement;
+            activitiContentService = TestBed.get(ActivitiContentService);
+            contentNodeDialogService = TestBed.get(ContentNodeDialogService);
+            processContentService = TestBed.get(ProcessContentService);
+        });
+    }));
+
+    afterEach(() => {
+        fixture.destroy();
+    });
+
+    it('should be able to create the widget', () => {
+        expect(widget).not.toBeNull();
+    });
+
+    it('should show up as simple upload when is configured for only local files', () => {
+        widget.field = new FormFieldModel(new FormModel(), {
+            type: FormFieldTypes.UPLOAD,
+            value: []
+        });
+        widget.field.id = 'simple-upload-button';
+        widget.field.params = <FormFieldMetadata> onlyLocalParams;
+        fixture.detectChanges();
+        expect(element.querySelector('#simple-upload-button')).not.toBeNull();
+    });
+
+    it('should show up all the repository option on menu list', () => {
+        widget.field = new FormFieldModel(new FormModel(), {
+            type: FormFieldTypes.UPLOAD,
+            value: []
+        });
+        widget.field.id = 'attach-file-attach';
+        widget.field.params = <FormFieldMetadata>  allSourceParams;
+        spyOn(activitiContentService, 'getAlfrescoRepositories').and.returnValue(Observable.of(fakeRepositoryListAnswer));
+        fixture.detectChanges();
+
+        let attachButton: HTMLButtonElement = element.querySelector('#attach-file-attach');
+        expect(attachButton).not.toBeNull();
+        attachButton.click();
+        fixture.detectChanges();
+
+        expect(fixture.debugElement.queryAll(By.css('#attach-local-file'))).not.toBeNull();
+        expect(fixture.debugElement.queryAll(By.css('#attach-local-file'))).not.toBeUndefined();
+        expect(fixture.debugElement.queryAll(By.css('#attach-SHAREME'))).not.toBeNull();
+        expect(fixture.debugElement.queryAll(By.css('#attach-SHAREME'))).not.toBeUndefined();
+        expect(fixture.debugElement.queryAll(By.css('#attach-GOKUSHARE'))).not.toBeNull();
+        expect(fixture.debugElement.queryAll(By.css('#attach-GOKUSHARE'))).not.toBeUndefined();
+    });
+
+    it('should be able to upload files coming from content node selector', () => {
+        widget.field = new FormFieldModel(new FormModel(), {
+            type: FormFieldTypes.UPLOAD,
+            value: []
+        });
+        widget.field.id = 'attach-file-attach';
+        widget.field.params = <FormFieldMetadata>  allSourceParams;
+        spyOn(activitiContentService, 'getAlfrescoRepositories').and.returnValue(Observable.of(fakeRepositoryListAnswer));
+        spyOn(activitiContentService, 'applyAlfrescoNode').and.returnValue(Observable.of(fakePngAnswer));
+        spyOn(contentNodeDialogService, 'openFileBrowseDialogBySite').and.returnValue(Observable.of([fakeMinimalNode]));
+        fixture.detectChanges();
+
+        let attachButton: HTMLButtonElement = element.querySelector('#attach-file-attach');
+        expect(attachButton).not.toBeNull();
+        attachButton.click();
+        fixture.detectChanges();
+        fixture.debugElement.query(By.css('#attach-SHAREME')).nativeElement.click();
+        fixture.detectChanges();
+
+        expect(element.querySelector('#file-1155-icon')).not.toBeNull();
+    });
+
+    it('should be able to upload files when a defined folder is selected', () => {
+        widget.field = new FormFieldModel(new FormModel(), {
+            type: FormFieldTypes.UPLOAD,
+            value: []
+        });
+        widget.field.id = 'attach-file-attach';
+        widget.field.params = <FormFieldMetadata>  definedSourceParams;
+        spyOn(activitiContentService, 'getAlfrescoRepositories').and.returnValue(Observable.of(fakeRepositoryListAnswer));
+        spyOn(activitiContentService, 'applyAlfrescoNode').and.returnValue(Observable.of(fakePngAnswer));
+        spyOn(contentNodeDialogService, 'openFileBrowseDialogByFolderId').and.returnValue(Observable.of([fakeMinimalNode]));
+        fixture.detectChanges();
+
+        let attachButton: HTMLButtonElement = element.querySelector('#attach-file-attach');
+        expect(attachButton).not.toBeNull();
+        attachButton.click();
+        fixture.detectChanges();
+        fixture.debugElement.query(By.css('#attach-pippo-baudo')).nativeElement.click();
+        fixture.detectChanges();
+
+        expect(element.querySelector('#file-1155-icon')).not.toBeNull();
+    });
+
+    it('should be able to upload files from local source', () => {
+        widget.field = new FormFieldModel(new FormModel(), {
+            type: FormFieldTypes.UPLOAD,
+            value: []
+        });
+        widget.field.id = 'attach-file-attach';
+        widget.field.params = <FormFieldMetadata>  onlyLocalParams;
+        spyOn(processContentService, 'createTemporaryRawRelatedContent').and.returnValue(Observable.of(fakePngAnswer));
+        fixture.detectChanges();
+
+        let inputDebugElement = fixture.debugElement.query(By.css('#attach-file-attach'));
+        inputDebugElement.triggerEventHandler('change', {target: {files: [fakePngAnswer]}});
+        fixture.detectChanges();
+
+        expect(element.querySelector('#file-1155-icon')).not.toBeNull();
+    });
+
+    it('should display file list when field has value', () => {
+        widget.field = new FormFieldModel(new FormModel(), {
+            type: FormFieldTypes.UPLOAD,
+            value: [fakePngAnswer]
+        });
+        widget.field.id = 'attach-file-attach';
+        widget.field.params = <FormFieldMetadata>  onlyLocalParams;
+        fixture.detectChanges();
+
+        expect(element.querySelector('#file-1155-icon')).not.toBeNull();
+    });
+
+});
diff --git a/lib/process-services/content-widget/attach-folder-widget.component.html b/lib/process-services/content-widget/attach-folder-widget.component.html
new file mode 100644
index 0000000000..9d67f76422
--- /dev/null
+++ b/lib/process-services/content-widget/attach-folder-widget.component.html
@@ -0,0 +1,30 @@
+<div class="adf-attach-folder-widget {{field.className}}"
+     [class.adf-invalid]="!field.isValid"
+     [class.adf-readonly]="field.readOnly">
+    <label class="adf-label" [attr.for]="field.id">{{field.name}}<span *ngIf="isRequired()">*</span></label>
+    <div class="adf-attach-folder-widget-container">
+        <div *ngIf="hasFolder" class="adf-attach-folder-result">
+            <mat-icon>folder</mat-icon>
+            <div class="adf-attach-folder-files-row">
+                <span matLine id="{{'folder-'+field?.id}}"
+                        role="button" tabindex="0" class="adf-folder">{{selectedFolderName}}</span>
+                <button *ngIf="!field.readOnly" mat-icon-button [id]="'folder-'+field?.id+'-remove'"
+                        (click)="removeFolder();">
+                    <mat-icon class="mat-24">highlight_off</mat-icon>
+                </button>
+            </div>
+        </div>
+
+        <div class="button-row" *ngIf="!hasFolder && !field.readOnly">
+            <button mat-raised-button
+                color="primary"
+                (click)="openSelectDialogFromFileSource()"
+                [id]="'folder-'+field?.id+'-button'">
+                    {{ 'FORM.FIELD.UPLOAD' | translate }}
+                <mat-icon>cloud_upload</mat-icon>
+            </button>
+        </div>
+    </div>
+    <error-widget [error]="field.validationSummary"></error-widget>
+    <error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
+</div>
diff --git a/lib/process-services/content-widget/attach-folder-widget.component.scss b/lib/process-services/content-widget/attach-folder-widget.component.scss
new file mode 100644
index 0000000000..a7226dbf0c
--- /dev/null
+++ b/lib/process-services/content-widget/attach-folder-widget.component.scss
@@ -0,0 +1,39 @@
+.adf {
+
+    &-attach-folder-widget-container {
+        margin-bottom: 15px;
+        display: flex;
+        align-items: center;
+
+        input {
+            cursor: pointer;
+            height: 100%;
+            right: 0;
+            opacity: 0;
+            position: absolute;
+            top: 0;
+            width: 300px;
+            z-index: 4;
+        }
+    }
+
+    &-attach-folder-widget {
+        width: 100%;
+        word-break: break-all;
+        padding: 0.4375em 0;
+        border-top: 0.84375em solid transparent;
+    }
+
+    &-attach-folder-files-row {
+        padding-left: 8px;
+        .mat-line {
+            margin-bottom: 0px;
+        }
+    }
+
+    &-attach-folder-result {
+        display: flex;
+        align-items: center;
+    }
+
+}
diff --git a/lib/process-services/content-widget/attach-folder-widget.component.spec.ts b/lib/process-services/content-widget/attach-folder-widget.component.spec.ts
new file mode 100644
index 0000000000..3f72aed067
--- /dev/null
+++ b/lib/process-services/content-widget/attach-folder-widget.component.spec.ts
@@ -0,0 +1,169 @@
+/*!
+ * @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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { AttachFolderWidgetComponent } from './attach-folder-widget.component';
+import {
+    FormFieldModel,
+    FormModel,
+    FormService,
+    AlfrescoApiService,
+    LogService,
+    ThumbnailService,
+    SitesService,
+    NodesApiService
+} from '@alfresco/adf-core';
+import { ContentNodeDialogService, DocumentListService } from '@alfresco/adf-content-services';
+import { MaterialModule } from '../material.module';
+import { Observable } from 'rxjs/Observable';
+import { MinimalNodeEntryEntity } from 'alfresco-js-api';
+
+const fakeMinimalNode: MinimalNodeEntryEntity = <MinimalNodeEntryEntity> {
+    id: 'fake',
+    name: 'fake-name'
+};
+
+const definedSourceParams = {
+    folderSource : {
+        serviceId: 'goofy-sources',
+        name: 'pippo-baudo',
+        selectedFolder: {
+            accountId: 'goku-share-account-id',
+            pathId: 'fake-pippo-baudo-id'
+        }
+    }
+};
+
+describe('AttachFolderWidgetComponent', () => {
+
+    let widget: AttachFolderWidgetComponent;
+    let fixture: ComponentFixture<AttachFolderWidgetComponent>;
+    let element: HTMLInputElement;
+    let contentNodeDialogService: ContentNodeDialogService;
+    let nodeService: NodesApiService;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [MaterialModule],
+            declarations: [AttachFolderWidgetComponent],
+            providers: [
+                        FormService,
+                        ThumbnailService,
+                        AlfrescoApiService,
+                        LogService,
+                        SitesService,
+                        DocumentListService,
+                        ContentNodeDialogService,
+                        NodesApiService
+                    ]
+        }).compileComponents().then(() => {
+            fixture = TestBed.createComponent(AttachFolderWidgetComponent);
+            widget = fixture.componentInstance;
+            element = fixture.nativeElement;
+            contentNodeDialogService = TestBed.get(ContentNodeDialogService);
+            nodeService = TestBed.get(NodesApiService);
+        });
+    }));
+
+    afterEach(() => {
+        fixture.destroy();
+    });
+
+    it('should be able to create the widget', () => {
+        expect(widget).not.toBeNull();
+    });
+
+    it('should be rendered correctly', () => {
+        expect(widget).not.toBeNull();
+        widget.field = new FormFieldModel(new FormModel(), {
+            type: 'select-folder',
+            id: 'fake-widget',
+            value: null
+        });
+        fixture.detectChanges();
+        expect(element.querySelector('#folder-fake-widget-button')).toBeDefined();
+        expect(element.querySelector('#folder-fake-widget-button')).not.toBeNull();
+    });
+
+    it('should show the folder selected by content node', async(() => {
+        spyOn(contentNodeDialogService, 'openFolderBrowseDialogBySite').and.returnValue(Observable.of([fakeMinimalNode]));
+        expect(widget).not.toBeNull();
+        widget.field = new FormFieldModel(new FormModel(), {
+            type: 'select-folder',
+            id: 'fake-widget',
+            value: null
+        });
+        fixture.detectChanges();
+        fixture.debugElement.query(By.css('#folder-fake-widget-button')).nativeElement.click();
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            expect(element.querySelector('#folder-fake-widget')).not.toBeNull();
+        });
+    }));
+
+    it('should show the folder selected by content node opening on a configured folder', async(() => {
+        spyOn(contentNodeDialogService, 'openFolderBrowseDialogByFolderId').and.returnValue(Observable.of([fakeMinimalNode]));
+        expect(widget).not.toBeNull();
+        widget.field = new FormFieldModel(new FormModel(), {
+            type: 'select-folder',
+            id: 'fake-widget',
+            value: null,
+            params: definedSourceParams
+        });
+        fixture.detectChanges();
+        fixture.debugElement.query(By.css('#folder-fake-widget-button')).nativeElement.click();
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            expect(element.querySelector('#folder-fake-widget')).not.toBeNull();
+        });
+    }));
+
+    it('should retrieve the node information on init', async(() => {
+        spyOn(nodeService, 'getNode').and.returnValue(Observable.of(fakeMinimalNode));
+        expect(widget).not.toBeNull();
+        widget.field = new FormFieldModel(new FormModel(), {
+            type: 'select-folder',
+            id: 'fake-widget',
+            value: 'fake-pippo-baudo-id'
+        });
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            expect(element.querySelector('#folder-fake-widget')).not.toBeNull();
+            expect(element.querySelector('#folder-fake-widget-button')).toBeNull();
+        });
+    }));
+
+    it('should remove the folder via the remove button', async(() => {
+        spyOn(nodeService, 'getNode').and.returnValue(Observable.of(fakeMinimalNode));
+        expect(widget).not.toBeNull();
+        widget.field = new FormFieldModel(new FormModel(), {
+            type: 'select-folder',
+            id: 'fake-widget',
+            value: 'fake-pippo-baudo-id'
+        });
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            expect(element.querySelector('#folder-fake-widget')).not.toBeNull();
+            expect(element.querySelector('#folder-fake-widget-button')).toBeNull();
+            fixture.debugElement.query(By.css('#folder-fake-widget-remove')).nativeElement.click();
+            fixture.detectChanges();
+            expect(element.querySelector('#folder-fake-widget')).toBeNull();
+        });
+    }));
+
+});
diff --git a/lib/process-services/content-widget/attach-folder-widget.component.ts b/lib/process-services/content-widget/attach-folder-widget.component.ts
new file mode 100644
index 0000000000..c8769f2f97
--- /dev/null
+++ b/lib/process-services/content-widget/attach-folder-widget.component.ts
@@ -0,0 +1,89 @@
+/*!
+ * @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.
+ */
+
+/* tslint:disable:component-selector*/
+
+import { Component, ViewEncapsulation, OnInit } from '@angular/core';
+import {
+    baseHost,
+    WidgetComponent,
+    FormService,
+    NodesApiService
+} from '@alfresco/adf-core';
+import { ContentNodeDialogService } from '@alfresco/adf-content-services';
+import { MinimalNodeEntryEntity } from 'alfresco-js-api';
+
+@Component({
+    selector: 'attach-folder-widget',
+    templateUrl: './attach-folder-widget.component.html',
+    styleUrls: ['./attach-folder-widget.component.scss'],
+    host: baseHost,
+    encapsulation: ViewEncapsulation.None
+})
+export class AttachFolderWidgetComponent extends WidgetComponent implements OnInit {
+
+    hasFolder: boolean = false;
+    selectedFolderName: string = '';
+
+    constructor(private contentDialog: ContentNodeDialogService,
+                public formService: FormService,
+                private nodeService: NodesApiService) {
+        super();
+    }
+
+    ngOnInit() {
+        if (this.field &&
+            this.field.value) {
+            this.hasFolder = true;
+            this.nodeService.getNode(this.field.value).subscribe((node: MinimalNodeEntryEntity) => {
+                this.selectedFolderName = node.name;
+            });
+        }
+    }
+
+    isDefinedSourceFolder(): boolean {
+        return !!this.field.params &&
+            !!this.field.params.folderSource &&
+            !!this.field.params.folderSource.selectedFolder;
+    }
+
+    openSelectDialogFromFileSource() {
+        let params = this.field.params;
+        if (this.isDefinedSourceFolder()) {
+            this.contentDialog.openFolderBrowseDialogByFolderId(params.folderSource.selectedFolder.pathId).subscribe(
+                (selections: MinimalNodeEntryEntity[]) => {
+                    this.selectedFolderName = selections[0].name;
+                    this.field.value = selections[0].id;
+                    this.hasFolder = true;
+                });
+        } else {
+            this.contentDialog.openFolderBrowseDialogBySite().subscribe(
+                (selections: MinimalNodeEntryEntity[]) => {
+                    this.selectedFolderName = selections[0].name;
+                    this.field.value = selections[0].id;
+                    this.hasFolder = true;
+                });
+        }
+    }
+
+    removeFolder() {
+        this.field.value = null;
+        this.selectedFolderName = '';
+        this.hasFolder = false;
+    }
+
+}
diff --git a/lib/process-services/content-widget/content-widget.module.ts b/lib/process-services/content-widget/content-widget.module.ts
new file mode 100644
index 0000000000..336ca2705d
--- /dev/null
+++ b/lib/process-services/content-widget/content-widget.module.ts
@@ -0,0 +1,52 @@
+/*!
+ * @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 { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { MaterialModule } from '../material.module';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { DataColumnModule, DataTableModule, FormModule } from '@alfresco/adf-core';
+
+import { AttachFileWidgetComponent } from './attach-file-widget.component';
+import { AttachFolderWidgetComponent } from './attach-folder-widget.component';
+
+@NgModule({
+    imports: [
+        DataColumnModule,
+        DataTableModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MaterialModule,
+        CommonModule,
+        TranslateModule,
+        FormModule
+    ],
+    entryComponents: [
+        AttachFileWidgetComponent,
+        AttachFolderWidgetComponent
+    ],
+    declarations: [
+        AttachFileWidgetComponent,
+        AttachFolderWidgetComponent
+    ],
+    exports: [
+        AttachFileWidgetComponent,
+        AttachFolderWidgetComponent
+    ]
+})
+export class ContentWidgetModule {}
diff --git a/lib/process-services/content-widget/index.ts b/lib/process-services/content-widget/index.ts
new file mode 100644
index 0000000000..4c6ac1d58f
--- /dev/null
+++ b/lib/process-services/content-widget/index.ts
@@ -0,0 +1,18 @@
+/*!
+ * @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.
+ */
+
+export * from './public-api';
diff --git a/lib/process-services/content-widget/public-api.ts b/lib/process-services/content-widget/public-api.ts
new file mode 100644
index 0000000000..592b6804b9
--- /dev/null
+++ b/lib/process-services/content-widget/public-api.ts
@@ -0,0 +1,19 @@
+/*!
+ * @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.
+ */
+
+export * from './attach-file-widget.component';
+export * from './attach-folder-widget.component';
diff --git a/lib/process-services/i18n/de.json b/lib/process-services/i18n/de.json
index ecac7c02db..03f0cc0f47 100644
--- a/lib/process-services/i18n/de.json
+++ b/lib/process-services/i18n/de.json
@@ -176,8 +176,9 @@
     "PROPERTIES": {
       "PROCESS_NAME": "Prozess",
       "NAME": "Name",
+      "THUMBNAIL": "Miniaturansicht",
       "STATUS": "Status",
-      "END_DATE": "Fälligkeitsdatum",
+      "END_DATE": "Enddatum",
       "END_DATE_DEFAULT": "Kein Datum",
       "CATEGORY": "Kategorie",
       "CATEGORY_DEFAULT": "Keine Kategorie",
@@ -294,5 +295,20 @@
         "CREATED-ON": "Erstellt am"
       }
     }
+  },
+  "ADF_SIDEBAR_ACTION_MENU": {
+    "BUTTON": {
+      "CREATE": "Erstellen",
+      "NEW_TASK": "Neue Aufgabe",
+      "NEW_PROCESS": "Neuer Prozess"
+    }
+  },
+  "APP": {
+    "DIALOG": {
+      "START": "Start",
+      "TITLE": "Prozess auswählen",
+      "LIST": "Prozessliste",
+      "ERROR": "Bei der Verbindung zu Process Services ist ein Fehler aufgetreten"
+    }
   }
 }
\ No newline at end of file
diff --git a/lib/process-services/i18n/en.json b/lib/process-services/i18n/en.json
index 746b13af4b..94ca834091 100644
--- a/lib/process-services/i18n/en.json
+++ b/lib/process-services/i18n/en.json
@@ -295,5 +295,20 @@
         "CREATED-ON": "Created on"
       }
     }
+  },
+  "ADF_SIDEBAR_ACTION_MENU": {
+    "BUTTON": {
+      "CREATE": "CREATE",
+      "NEW_TASK": "New Task",
+      "NEW_PROCESS": "New Process"
+    }
+  },
+  "APP":{
+    "DIALOG" :{
+      "START" : "Start",
+      "TITLE" : "Select a process",
+      "LIST": "Process list",
+      "ERROR" : "There is a problem connecting to Process Services"
+    }
   }
 }
diff --git a/lib/process-services/i18n/es.json b/lib/process-services/i18n/es.json
index f4749aee9b..36020188ef 100644
--- a/lib/process-services/i18n/es.json
+++ b/lib/process-services/i18n/es.json
@@ -176,8 +176,9 @@
     "PROPERTIES": {
       "PROCESS_NAME": "Proceso",
       "NAME": "Nombre",
+      "THUMBNAIL": "Miniatura",
       "STATUS": "Estado",
-      "END_DATE": "Fecha de vencimiento",
+      "END_DATE": "Fecha de fin",
       "END_DATE_DEFAULT": "Sin fecha",
       "CATEGORY": "Categoría",
       "CATEGORY_DEFAULT": "Sin categoría",
@@ -294,5 +295,20 @@
         "CREATED-ON": "Creado"
       }
     }
+  },
+  "ADF_SIDEBAR_ACTION_MENU": {
+    "BUTTON": {
+      "CREATE": "Crear",
+      "NEW_TASK": "Nueva tarea",
+      "NEW_PROCESS": "Nuevo proceso"
+    }
+  },
+  "APP": {
+    "DIALOG": {
+      "START": "Comenzar",
+      "TITLE": "Seleccionar proceso",
+      "LIST": "Lista de procesos",
+      "ERROR": "Hay un problema con la conexión a Process Services"
+    }
   }
 }
\ No newline at end of file
diff --git a/lib/process-services/i18n/fr.json b/lib/process-services/i18n/fr.json
index 82ef672db6..09e4c6524b 100644
--- a/lib/process-services/i18n/fr.json
+++ b/lib/process-services/i18n/fr.json
@@ -176,8 +176,9 @@
     "PROPERTIES": {
       "PROCESS_NAME": "Processus",
       "NAME": "Nom",
+      "THUMBNAIL": "Miniature",
       "STATUS": "Statut",
-      "END_DATE": "Date d'échéance",
+      "END_DATE": "Date de fin",
       "END_DATE_DEFAULT": "Aucune date",
       "CATEGORY": "Catégorie",
       "CATEGORY_DEFAULT": "Aucune catégorie",
@@ -294,5 +295,20 @@
         "CREATED-ON": "Créé le"
       }
     }
+  },
+  "ADF_SIDEBAR_ACTION_MENU": {
+    "BUTTON": {
+      "CREATE": "Créer",
+      "NEW_TASK": "Nouvelle tâche",
+      "NEW_PROCESS": "Nouveau processus"
+    }
+  },
+  "APP": {
+    "DIALOG": {
+      "START": "Démarrer",
+      "TITLE": "Sélectionner un processus",
+      "LIST": "Liste de processus",
+      "ERROR": "Nous rencontrons un problème de connexion à Process Services"
+    }
   }
 }
\ No newline at end of file
diff --git a/lib/process-services/i18n/it.json b/lib/process-services/i18n/it.json
index 524e7ef081..8d0573512f 100644
--- a/lib/process-services/i18n/it.json
+++ b/lib/process-services/i18n/it.json
@@ -176,8 +176,9 @@
     "PROPERTIES": {
       "PROCESS_NAME": "Processo",
       "NAME": "Nome",
+      "THUMBNAIL": "Miniatura",
       "STATUS": "Stato",
-      "END_DATE": "Scadenza",
+      "END_DATE": "Data di fine",
       "END_DATE_DEFAULT": "Nessuna data",
       "CATEGORY": "Categoria",
       "CATEGORY_DEFAULT": "Nessuna categoria",
@@ -294,5 +295,20 @@
         "CREATED-ON": "Creato il"
       }
     }
+  },
+  "ADF_SIDEBAR_ACTION_MENU": {
+    "BUTTON": {
+      "CREATE": "Crea",
+      "NEW_TASK": "Nuovo compito",
+      "NEW_PROCESS": "Nuovo processo"
+    }
+  },
+  "APP": {
+    "DIALOG": {
+      "START": "Avvia",
+      "TITLE": "Seleziona processo",
+      "LIST": "Elenco processi",
+      "ERROR": "Si è verificato un problema di connessione a Process Services"
+    }
   }
 }
\ No newline at end of file
diff --git a/lib/process-services/i18n/ja.json b/lib/process-services/i18n/ja.json
index 76dcc7bee0..4b2d530afe 100644
--- a/lib/process-services/i18n/ja.json
+++ b/lib/process-services/i18n/ja.json
@@ -176,8 +176,9 @@
     "PROPERTIES": {
       "PROCESS_NAME": "プロセス",
       "NAME": "名前",
+      "THUMBNAIL": "サムネイル",
       "STATUS": "ステータス",
-      "END_DATE": "期限",
+      "END_DATE": "終了日",
       "END_DATE_DEFAULT": "期限なし",
       "CATEGORY": "カテゴリ",
       "CATEGORY_DEFAULT": "カテゴリなし",
@@ -294,5 +295,20 @@
         "CREATED-ON": "作成日"
       }
     }
+  },
+  "ADF_SIDEBAR_ACTION_MENU": {
+    "BUTTON": {
+      "CREATE": "作成",
+      "NEW_TASK": "新しいタスク",
+      "NEW_PROCESS": "新しいプロセス"
+    }
+  },
+  "APP": {
+    "DIALOG": {
+      "START": "開始",
+      "TITLE": "プロセスの選択",
+      "LIST": "プロセスリスト",
+      "ERROR": "Process Services への接続中に問題が発生しました"
+    }
   }
 }
\ No newline at end of file
diff --git a/lib/process-services/i18n/nb.json b/lib/process-services/i18n/nb.json
index 14177f7008..aeb93a42de 100644
--- a/lib/process-services/i18n/nb.json
+++ b/lib/process-services/i18n/nb.json
@@ -176,8 +176,9 @@
     "PROPERTIES": {
       "PROCESS_NAME": "Prosess",
       "NAME": "Navn",
+      "THUMBNAIL": "Miniatyrbilde",
       "STATUS": "Status",
-      "END_DATE": "Forfallsdato",
+      "END_DATE": "Sluttdato",
       "END_DATE_DEFAULT": "Ingen fristdato",
       "CATEGORY": "Kategori",
       "CATEGORY_DEFAULT": "Ingen kategori",
@@ -294,5 +295,20 @@
         "CREATED-ON": "Opprettet"
       }
     }
+  },
+  "ADF_SIDEBAR_ACTION_MENU": {
+    "BUTTON": {
+      "CREATE": "Opprett",
+      "NEW_TASK": "Ny oppgave",
+      "NEW_PROCESS": "Ny prosess"
+    }
+  },
+  "APP": {
+    "DIALOG": {
+      "START": "Start",
+      "TITLE": "Velg prosess",
+      "LIST": "Prosessliste",
+      "ERROR": "Kan ikke koble til Process Services"
+    }
   }
 }
\ No newline at end of file
diff --git a/lib/process-services/i18n/nl.json b/lib/process-services/i18n/nl.json
index a3de4aa854..56c2e3b2e7 100644
--- a/lib/process-services/i18n/nl.json
+++ b/lib/process-services/i18n/nl.json
@@ -176,8 +176,9 @@
     "PROPERTIES": {
       "PROCESS_NAME": "Proces",
       "NAME": "Naam",
+      "THUMBNAIL": "Miniatuur",
       "STATUS": "Status",
-      "END_DATE": "Vervaldatum",
+      "END_DATE": "Einddatum",
       "END_DATE_DEFAULT": "Geen vervaldatum",
       "CATEGORY": "Categorie",
       "CATEGORY_DEFAULT": "Geen categorie",
@@ -294,5 +295,20 @@
         "CREATED-ON": "Gemaakt op"
       }
     }
+  },
+  "ADF_SIDEBAR_ACTION_MENU": {
+    "BUTTON": {
+      "CREATE": "Maken",
+      "NEW_TASK": "Nieuwe taak",
+      "NEW_PROCESS": "Nieuw proces"
+    }
+  },
+  "APP": {
+    "DIALOG": {
+      "START": "Start",
+      "TITLE": "Proces selecteren",
+      "LIST": "Proceslijst",
+      "ERROR": "Er is een probleem opgetreden bij het verbinden met Process Services"
+    }
   }
 }
\ No newline at end of file
diff --git a/lib/process-services/i18n/pt-BR.json b/lib/process-services/i18n/pt-BR.json
index 167af3bb4d..beeed0c450 100644
--- a/lib/process-services/i18n/pt-BR.json
+++ b/lib/process-services/i18n/pt-BR.json
@@ -176,8 +176,9 @@
     "PROPERTIES": {
       "PROCESS_NAME": "Processo",
       "NAME": "Nome",
+      "THUMBNAIL": "Miniatura",
       "STATUS": "Status",
-      "END_DATE": "Data de vencimento",
+      "END_DATE": "Data de término",
       "END_DATE_DEFAULT": "Nenhuma data",
       "CATEGORY": "Categoria",
       "CATEGORY_DEFAULT": "Nenhuma categoria",
@@ -294,5 +295,20 @@
         "CREATED-ON": "Criado em"
       }
     }
+  },
+  "ADF_SIDEBAR_ACTION_MENU": {
+    "BUTTON": {
+      "CREATE": "Criar",
+      "NEW_TASK": "Nova tarefa",
+      "NEW_PROCESS": "Novo processo"
+    }
+  },
+  "APP": {
+    "DIALOG": {
+      "START": "Iniciar",
+      "TITLE": "Selecionar Processo",
+      "LIST": "Lista de processo",
+      "ERROR": "Houve um problema ao conectar com o Process Services"
+    }
   }
 }
\ No newline at end of file
diff --git a/lib/process-services/i18n/ru.json b/lib/process-services/i18n/ru.json
index 8af5b810ce..f0689f43b1 100644
--- a/lib/process-services/i18n/ru.json
+++ b/lib/process-services/i18n/ru.json
@@ -176,8 +176,9 @@
     "PROPERTIES": {
       "PROCESS_NAME": "Процесс",
       "NAME": "Имя",
+      "THUMBNAIL": "Эскиз",
       "STATUS": "Статус",
-      "END_DATE": "Срок",
+      "END_DATE": "Дата окончания",
       "END_DATE_DEFAULT": "Нет срока",
       "CATEGORY": "Категория",
       "CATEGORY_DEFAULT": "Нет категории",
@@ -294,5 +295,20 @@
         "CREATED-ON": "Дата создания"
       }
     }
+  },
+  "ADF_SIDEBAR_ACTION_MENU": {
+    "BUTTON": {
+      "CREATE": "Создать",
+      "NEW_TASK": "Новая задача",
+      "NEW_PROCESS": "Новый процесс"
+    }
+  },
+  "APP": {
+    "DIALOG": {
+      "START": "Начать",
+      "TITLE": "Выбрать процесс",
+      "LIST": "Список процессов",
+      "ERROR": "Возникла проблема при подключении к Process Services"
+    }
   }
 }
\ No newline at end of file
diff --git a/lib/process-services/i18n/zh-CN.json b/lib/process-services/i18n/zh-CN.json
index dd335d5982..0d89bf586c 100644
--- a/lib/process-services/i18n/zh-CN.json
+++ b/lib/process-services/i18n/zh-CN.json
@@ -176,8 +176,9 @@
     "PROPERTIES": {
       "PROCESS_NAME": "流程",
       "NAME": "名称",
+      "THUMBNAIL": "缩略图",
       "STATUS": "状态",
-      "END_DATE": "截止日期",
+      "END_DATE": "结束日期",
       "END_DATE_DEFAULT": "没有日期",
       "CATEGORY": "类别",
       "CATEGORY_DEFAULT": "没有类别",
@@ -294,5 +295,20 @@
         "CREATED-ON": "创建日期"
       }
     }
+  },
+  "ADF_SIDEBAR_ACTION_MENU": {
+    "BUTTON": {
+      "CREATE": "创建",
+      "NEW_TASK": "新任务",
+      "NEW_PROCESS": "新建流程"
+    }
+  },
+  "APP": {
+    "DIALOG": {
+      "START": "开始",
+      "TITLE": "选择流程",
+      "LIST": "流程列表",
+      "ERROR": "连接到 Process Services 时出现问题"
+    }
   }
 }
\ No newline at end of file
diff --git a/lib/process-services/material.module.ts b/lib/process-services/material.module.ts
index daac2a4345..966f50cf82 100644
--- a/lib/process-services/material.module.ts
+++ b/lib/process-services/material.module.ts
@@ -21,7 +21,7 @@ import {
     MatChipsModule, MatDatepickerModule, MatDialogModule, MatGridListModule, MatIconModule,
     MatInputModule, MatListModule, MatNativeDateModule, MatOptionModule, MatProgressSpinnerModule, MatRadioModule,
     MatRippleModule, MatSelectModule, MatSlideToggleModule, MatTableModule, MatTabsModule,
-    MatTooltipModule
+    MatTooltipModule, MatMenuModule
 } from '@angular/material';
 
 export function modules() {
@@ -30,7 +30,7 @@ export function modules() {
         MatCheckboxModule, MatDatepickerModule, MatGridListModule, MatIconModule, MatInputModule,
         MatListModule, MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule, MatTableModule,
         MatTabsModule, MatProgressSpinnerModule, MatNativeDateModule, MatRippleModule, MatTooltipModule,
-        MatChipsModule
+        MatChipsModule, MatMenuModule
     ];
 }
 
diff --git a/lib/process-services/mock/process/start-process.component.mock.ts b/lib/process-services/mock/process/start-process.component.mock.ts
index 6e79388486..667839971e 100644
--- a/lib/process-services/mock/process/start-process.component.mock.ts
+++ b/lib/process-services/mock/process/start-process.component.mock.ts
@@ -29,7 +29,13 @@ export let testProcessDefRepr = new ProcessDefinitionRepresentation({
     hasStartForm: false
 });
 
-export let testProcessDefs = [new ProcessDefinitionRepresentation({
+export let testProcessDefinitions = [new ProcessDefinitionRepresentation({
+    id: 'my:process1',
+    name: 'My Process 1',
+    hasStartForm: false
+})];
+
+export let testMultipleProcessDefs = [new ProcessDefinitionRepresentation({
     id: 'my:process1',
     name: 'My Process 1',
     hasStartForm: false
diff --git a/lib/process-services/package.json b/lib/process-services/package.json
index 5ab70822a9..b53462b74d 100644
--- a/lib/process-services/package.json
+++ b/lib/process-services/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@alfresco/adf-process-services",
   "description": "Alfresco ADF process services",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "author": "Alfresco Software, Ltd.",
   "main": "bundles/adf-process-services.js",
   "repository": {
@@ -12,22 +12,23 @@
     "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
   },
   "dependencies": {
-    "@angular/animations": "5.0.0",
-    "@angular/cdk": "5.0.0-rc0",
-    "@angular/common": "5.0.0",
-    "@angular/compiler": "5.0.0",
-    "@angular/core": "5.0.0",
-    "@angular/flex-layout": "2.0.0-beta.10",
-    "@angular/forms": "5.0.0",
-    "@angular/http": "5.0.0",
-    "@angular/material": "5.0.0-rc0",
-    "@angular/material-moment-adapter": "^5.0.0-rc0",
-    "@angular/platform-browser": "5.0.0",
-    "@angular/platform-browser-dynamic": "5.0.0",
-    "@angular/router": "5.0.0",
+    "@angular/animations": "5.1.1",
+    "@angular/cdk": "5.0.1",
+    "@angular/common": "5.1.1",
+    "@angular/compiler": "5.1.1",
+    "@angular/core": "5.1.1",
+    "@angular/flex-layout": "2.0.0-beta.12",
+    "@angular/forms": "5.1.1",
+    "@angular/http": "5.1.1",
+    "@angular/material": "5.0.1",
+    "@angular/material-moment-adapter": "5.0.1",
+    "@angular/platform-browser": "5.1.1",
+    "@angular/platform-browser-dynamic": "5.1.1",
+    "@angular/router": "5.1.1",
     "@ngx-translate/core": "8.0.0",
-    "alfresco-js-api": "2.0.0",
-    "@alfresco/adf-core": "2.0.0",
+    "alfresco-js-api": "2.1.0",
+    "@alfresco/adf-core": "2.1.0",
+    "@alfresco/adf-process-services": "2.1.0",
     "chart.js": "2.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
diff --git a/lib/process-services/people/people.component.scss b/lib/process-services/people/people.component.scss
index 843dd37c43..27ea5f7099 100644
--- a/lib/process-services/people/people.component.scss
+++ b/lib/process-services/people/people.component.scss
@@ -51,10 +51,18 @@
         padding: 0px;
     }
 
-    adf-people-list ::ng-deep adf-datatable ::ng-deep {
+    
+
+    adf-people-list adf-datatable {
         thead {
             display: none;
         }
+        
+        .adf-data-table .adf-data-table-cell .cell-container {
+            flex-direction: column;
+            align-items: left;
+        }
+
         .people-email {
             opacity: 0.54;
         }
diff --git a/lib/process-services/process-list/components/process-audit.directive.ts b/lib/process-services/process-list/components/process-audit.directive.ts
index 59c8ba26d5..44883d76ed 100644
--- a/lib/process-services/process-list/components/process-audit.directive.ts
+++ b/lib/process-services/process-list/components/process-audit.directive.ts
@@ -15,6 +15,8 @@
  * limitations under the License.
  */
 
+/* tslint:disable:no-input-rename  */
+
 import { ContentService } from '@alfresco/adf-core';
 import { Directive, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
 import { ProcessService } from './../services/process.service';
diff --git a/lib/process-services/process-list/components/process-instance-header.component.ts b/lib/process-services/process-list/components/process-instance-header.component.ts
index 07923d3096..da718fdc17 100644
--- a/lib/process-services/process-list/components/process-instance-header.component.ts
+++ b/lib/process-services/process-list/components/process-instance-header.component.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { CardViewDateItemModel, CardViewItem, CardViewTextItemModel } from '@alfresco/adf-core';
+import { CardViewDateItemModel, CardViewItem, CardViewTextItemModel, TranslationService } from '@alfresco/adf-core';
 import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { ProcessInstance } from '../models/process-instance.model';
 
@@ -31,6 +31,9 @@ export class ProcessInstanceHeaderComponent implements OnChanges {
 
     properties: CardViewItem [];
 
+    constructor(private translationService: TranslationService) {
+    }
+
     ngOnChanges(changes: SimpleChanges) {
         this.refreshData();
     }
@@ -50,28 +53,28 @@ export class ProcessInstanceHeaderComponent implements OnChanges {
                         value: this.processInstance.ended,
                         format: 'MMM DD YYYY',
                         key: 'ended',
-                        default: 'ADF_PROCESS_LIST.PROPERTIES.END_DATE_DEFAULT'
+                        default: this.translationService.instant('ADF_PROCESS_LIST.PROPERTIES.END_DATE_DEFAULT')
                     }),
                 new CardViewTextItemModel(
                     {
                         label: 'ADF_PROCESS_LIST.PROPERTIES.CATEGORY',
                         value: this.processInstance.processDefinitionCategory,
                         key: 'category',
-                        default: 'ADF_PROCESS_LIST.PROPERTIES.CATEGORY_DEFAULT'
+                        default: this.translationService.instant('ADF_PROCESS_LIST.PROPERTIES.CATEGORY_DEFAULT')
                     }),
                 new CardViewTextItemModel(
                     {
                         label: 'ADF_PROCESS_LIST.PROPERTIES.BUSINESS_KEY',
                         value: this.processInstance.businessKey,
                         key: 'businessKey',
-                        default: 'ADF_PROCESS_LIST.PROPERTIES.BUSINESS_KEY_DEFAULT'
+                        default: this.translationService.instant('ADF_PROCESS_LIST.PROPERTIES.BUSINESS_KEY_DEFAULT')
                     }),
                 new CardViewTextItemModel(
                     {
                         label: 'ADF_PROCESS_LIST.PROPERTIES.CREATED_BY',
                         value: this.getStartedByFullName(),
                         key: 'assignee',
-                        default: 'ADF_PROCESS_LIST.PROPERTIES.CREATED_BY_DEFAULT'
+                        default: this.translationService.instant('ADF_PROCESS_LIST.PROPERTIES.CREATED_BY_DEFAULT')
                     }),
                 new CardViewDateItemModel(
                     {
@@ -89,7 +92,7 @@ export class ProcessInstanceHeaderComponent implements OnChanges {
                     {label: 'ADF_PROCESS_LIST.PROPERTIES.DESCRIPTION',
                     value: this.processInstance.processDefinitionDescription,
                     key: 'description',
-                    default: 'ADF_PROCESS_LIST.PROPERTIES.DESCRIPTION_DEFAULT'
+                    default: this.translationService.instant('ADF_PROCESS_LIST.PROPERTIES.DESCRIPTION_DEFAULT')
                 })
             ];
         }
diff --git a/lib/process-services/process-list/components/process-instance-tasks.component.ts b/lib/process-services/process-list/components/process-instance-tasks.component.ts
index 71de634c58..710a501080 100644
--- a/lib/process-services/process-list/components/process-instance-tasks.component.ts
+++ b/lib/process-services/process-list/components/process-instance-tasks.component.ts
@@ -53,9 +53,6 @@ export class ProcessInstanceTasksComponent implements OnInit, OnChanges {
     message: string;
     processId: string;
 
-    // @ViewChild('dialog')
-    // dialog: any;
-
     @ViewChild('startDialog')
     startDialog: any;
 
diff --git a/lib/process-services/process-list/components/process-list.component.css b/lib/process-services/process-list/components/process-list.component.css
index 39467dee0c..85ccfdaab1 100644
--- a/lib/process-services/process-list/components/process-list.component.css
+++ b/lib/process-services/process-list/components/process-list.component.css
@@ -1,13 +1,13 @@
-adf-datatable >>> .column-header {
+adf-datatable ::ng-deep .column-header {
     color: #232323;
     font-size: 15px;
 }
 
-adf-datatable >>> .data-cell {
+adf-datatable ::ng-deep .data-cell {
     cursor: pointer !important;
 }
 
-adf-datatable >>> .cell-value{
+adf-datatable ::ng-deep .cell-value{
     width: 250px;
     white-space: nowrap;
     overflow: hidden;
diff --git a/lib/process-services/process-list/components/start-process.component.html b/lib/process-services/process-list/components/start-process.component.html
index 3203e9aa1d..8d8952a0c1 100644
--- a/lib/process-services/process-list/components/start-process.component.html
+++ b/lib/process-services/process-list/components/start-process.component.html
@@ -8,17 +8,22 @@
 		<mat-form-field class="adf-process-input-container">
 			<input matInput placeholder="{{'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.NAME'|translate}}" [(ngModel)]="name" id="processName" required />
 		</mat-form-field>
-        <mat-form-field>
-            <mat-select placeholder="{{'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.TYPE'|translate}}" [(ngModel)]="currentProcessDef.id" (ngModelChange)="onProcessDefChange($event)" required>
-                <mat-option>{{'ADF_PROCESS_LIST.START_PROCESS.FORM.TYPE_PLACEHOLDER' | translate}}</mat-option>
-                <mat-option *ngFor="let processDef of processDefinitions" [value]="processDef.id">
-                    {{ processDef.name }}
-                </mat-option>
-            </mat-select>
-        </mat-form-field>
+
+        <div *ngIf="showSelectProcessDropdown">
+            <mat-form-field>
+                <mat-select [(value)]="selectedProcessDef" placeholder="{{'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.TYPE'|translate}}" required>
+                    <mat-option *ngIf="!hasSingleProcessDefinition()">{{'ADF_PROCESS_LIST.START_PROCESS.FORM.TYPE_PLACEHOLDER' | translate}}</mat-option>
+                    <mat-option *ngFor="let processDef of processDefinitions" [value]="processDef">
+                        {{ processDef.name }}
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>
+
         <adf-start-form *ngIf="hasStartForm()"
+                        [data]="values"
             [disableStartProcessButton]="!hasProcessName()"
-			[processDefinitionId]="currentProcessDef.id"
+			[processDefinitionId]="selectedProcessDef.id"
 			(outcomeClick)="onOutcomeClick($event)"
 		    [showRefreshButton]="false">
 		<button form-custom-button mat-button (click)="cancelStartProcess()" id="cancle_process" class=""> {{'ADF_PROCESS_LIST.START_PROCESS.FORM.ACTION.CANCEL'| translate}} </button>
@@ -31,6 +36,6 @@
 	</mat-card-content>
 	<mat-card-actions *ngIf="!hasStartForm()">
 		<button mat-button *ngIf="!hasStartForm()" (click)="cancelStartProcess()" id="cancle_process" class=""> {{'ADF_PROCESS_LIST.START_PROCESS.FORM.ACTION.CANCEL'| translate}} </button>
-		<button mat-button *ngIf="!hasStartForm()" [disabled]="!validateForm()" (click)="startProcess()" data-automation-id="btn-start" id="button-start" class="btn-start"> {{'ADF_PROCESS_LIST.START_PROCESS.FORM.ACTION.START' | translate}} </button>
+		<button color="primary" mat-button *ngIf="!hasStartForm()" [disabled]="!validateForm()" (click)="startProcess()" data-automation-id="btn-start" id="button-start" class="btn-start"> {{'ADF_PROCESS_LIST.START_PROCESS.FORM.ACTION.START' | translate}} </button>
 	</mat-card-actions>
 </mat-card>
diff --git a/lib/process-services/process-list/components/start-process.component.scss b/lib/process-services/process-list/components/start-process.component.scss
index 251dfb070e..b95df69d10 100644
--- a/lib/process-services/process-list/components/start-process.component.scss
+++ b/lib/process-services/process-list/components/start-process.component.scss
@@ -1,8 +1,8 @@
 .adf {
     &-start-process {
-        width: calc(66.6666% - 48px);
-        margin-left: calc(33.3333333333% / 2);
-        margin-right: calc(33.3333333333% / 2);
+        width: 66%;
+        margin-left: auto;
+        margin-right: auto;
         margin-top: 10px;
         .mat-select-trigger {
             font-size: 14px !important;
@@ -16,6 +16,9 @@
         }
         mat-card-actions {
             text-align: right;
+            .mat-button {
+                text-transform: uppercase !important;
+            }
         }
     }
     &-process-input-container {
@@ -32,4 +35,12 @@
     &-start-form-actions {
         text-align: right !important;
     }
-}
\ No newline at end of file
+}
+
+@media (max-width: 600px) {
+    .adf-start-process {
+        width: 90%;
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
diff --git a/lib/process-services/process-list/components/start-process.component.spec.ts b/lib/process-services/process-list/components/start-process.component.spec.ts
index 3e5c6fa833..ce8b1b9dda 100644
--- a/lib/process-services/process-list/components/start-process.component.spec.ts
+++ b/lib/process-services/process-list/components/start-process.component.spec.ts
@@ -23,16 +23,25 @@ import {
     MatInputModule,
     MatSelectModule
 } from '@angular/material';
-import { FormModule, FormService } from '@alfresco/adf-core';
+import { ActivitiContentService, AppConfigService, FormModule, FormService } from '@alfresco/adf-core';
 import { Observable } from 'rxjs/Observable';
 
 import { ProcessInstanceVariable } from '../models/process-instance-variable.model';
 import { ProcessService } from '../services/process.service';
-import { newProcess, taskFormMock, testProcessDefRepr, testProcessDefs, testProcessDefWithForm } from '../../mock';
+import {
+    newProcess,
+    taskFormMock,
+    testProcessDefRepr,
+    testMultipleProcessDefs,
+    testProcessDefWithForm,
+    testProcessDefinitions
+} from '../../mock';
 import { StartProcessInstanceComponent } from './start-process.component';
 
-describe('StartProcessInstanceComponent', () => {
+describe('StartFormComponent', () => {
 
+    let appConfig: AppConfigService;
+    let activitiContentService: ActivitiContentService;
     let component: StartProcessInstanceComponent;
     let fixture: ComponentFixture<StartProcessInstanceComponent>;
     let processService: ProcessService;
@@ -54,6 +63,7 @@ describe('StartProcessInstanceComponent', () => {
                 StartProcessInstanceComponent
             ],
             providers: [
+                ActivitiContentService,
                 ProcessService,
                 FormService
             ]
@@ -61,51 +71,158 @@ describe('StartProcessInstanceComponent', () => {
     }));
 
     beforeEach(() => {
-
+        appConfig = TestBed.get(AppConfigService);
+        activitiContentService = TestBed.get(ActivitiContentService);
         fixture = TestBed.createComponent(StartProcessInstanceComponent);
         component = fixture.componentInstance;
         processService = fixture.debugElement.injector.get(ProcessService);
         formService = fixture.debugElement.injector.get(FormService);
 
-        getDefinitionsSpy = spyOn(processService, 'getProcessDefinitions').and.returnValue(Observable.of(testProcessDefs));
+        getDefinitionsSpy = spyOn(processService, 'getProcessDefinitions').and.returnValue(Observable.of(testMultipleProcessDefs));
         startProcessSpy = spyOn(processService, 'startProcess').and.returnValue(Observable.of(newProcess));
         getStartFormDefinitionSpy = spyOn(formService, 'getStartFormDefinition').and.returnValue(Observable.of(taskFormMock));
-
+        spyOn(activitiContentService, 'applyAlfrescoNode').and.returnValue(Observable.of({ id: 1234 }));
     });
 
     it('should create instance of StartProcessInstanceComponent', () => {
         expect(fixture.componentInstance instanceof StartProcessInstanceComponent).toBe(true, 'should create StartProcessInstanceComponent');
     });
 
+    describe('first step', () => {
+
+        describe('without start form', () => {
+
+            beforeEach(() => {
+                component.name = 'My new process';
+                let change = new SimpleChange(null, 123, true);
+                component.ngOnChanges({ 'appId': change });
+            });
+
+            it('should enable start button when name and process filled out', async(() => {
+                component.selectedProcessDef = testProcessDefRepr;
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    let startBtn = fixture.nativeElement.querySelector('#button-start');
+                    expect(startBtn.disabled).toBe(false);
+                });
+            }));
+
+            it('should have start button disabled when name not filled out', async(() => {
+                component.name = '';
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    let startBtn = fixture.nativeElement.querySelector('#button-start');
+                    expect(startBtn.disabled).toBe(true);
+                });
+            }));
+
+            it('should have start button disabled when no process is selected', async(() => {
+                component.selectedProcessDef = null;
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    let startBtn = fixture.nativeElement.querySelector('#button-start');
+                    expect(startBtn.disabled).toBe(true);
+                });
+            }));
+        });
+
+        describe('with start form', () => {
+
+            beforeEach(() => {
+                getDefinitionsSpy.and.returnValue(Observable.of(testProcessDefWithForm));
+                let change = new SimpleChange(null, 123, true);
+                component.ngOnChanges({ 'appId': change });
+            });
+
+            it('should initialize start form', async(() => {
+                fixture.detectChanges();
+
+                fixture.whenStable().then(() => {
+                    expect(component.startForm).toBeDefined();
+                    expect(component.startForm).not.toBeNull();
+                });
+            }));
+
+            it('should load start form from service', async(() => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(getStartFormDefinitionSpy).toHaveBeenCalled();
+                });
+            }));
+
+            it('should have start button disabled if the process is not seleted', async(() => {
+                component.name = 'My new process';
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    let startBtn = fixture.nativeElement.querySelector('#button-start');
+                    expect(startBtn).toBeNull();
+                });
+            }));
+
+            it('should emit cancel event on cancel Button', async(() => {
+                fixture.detectChanges();
+                let cancelButton = fixture.nativeElement.querySelector('#cancle_process');
+                let cancelSpy: jasmine.Spy = spyOn(component.cancel, 'emit');
+                cancelButton.click();
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(cancelSpy).toHaveBeenCalled();
+                });
+            }));
+        });
+
+        describe('CS content connection', () => {
+
+            it('alfrescoRepositoryName default configuration property', () => {
+                expect(component.getAlfrescoRepositoryName()).toBe('alfresco-1Alfresco');
+            });
+
+            it('alfrescoRepositoryName configuration property should be fetched', () => {
+                appConfig.config = Object.assign(appConfig.config, {
+                    'alfrescoRepositoryName': 'alfresco-123'
+                };
+
+                expect(component.getAlfrescoRepositoryName()).toBe('alfresco-123Alfresco');
+            });
+
+            it('if values in input is a node should be linked in the process service', async(() => {
+
+                component.values = {};
+                component.values['file'] = {
+                    isFile: true,
+                    name= 'example-file'
+                };
+
+                component.moveNodeFromCStoPS();
+
+                fixture.whenStable().then(() => {
+                    expect(component.values.file[0].id).toBe(1234);
+                });
+            }));
+        });
+    });
+
     describe('process definitions list', () => {
 
         it('should call service to fetch process definitions with appId', () => {
-            let change = new SimpleChange(null, '123', true);
-            component.ngOnChanges({'appId': change});
+            component.appId = 123;
+            component.ngOnChanges({});
             fixture.detectChanges();
 
-            expect(getDefinitionsSpy).toHaveBeenCalledWith('123');
-        });
-
-        it('should call service to fetch process definitions without appId', () => {
-            let change = new SimpleChange(null, null, true);
-            component.ngOnChanges({'appId': change});
-            fixture.detectChanges();
-
-            expect(getDefinitionsSpy).toHaveBeenCalledWith(null);
+            expect(getDefinitionsSpy).toHaveBeenCalledWith(123);
         });
 
         it('should call service to fetch process definitions with appId when provided', () => {
-            let change = new SimpleChange(null, '123', true);
-            component.ngOnChanges({'appId': change});
+            component.appId = 123;
+            component.ngOnChanges({});
             fixture.detectChanges();
 
-            expect(getDefinitionsSpy).toHaveBeenCalledWith('123');
+            expect(getDefinitionsSpy).toHaveBeenCalledWith(123);
         });
 
         it('should display the correct number of processes in the select list', () => {
-            let change = new SimpleChange(null, '123', true);
-            component.ngOnChanges({'appId': change});
+            component.appId = 123;
+            component.ngOnChanges({});
             fixture.detectChanges();
 
             let selectElement = fixture.nativeElement.querySelector('mat-select');
@@ -113,9 +230,9 @@ describe('StartProcessInstanceComponent', () => {
         });
 
         it('should display the option def details', () => {
-            let change = new SimpleChange(null, '123', true);
-            component.ngOnChanges({'appId': change});
-            component.processDefinitions = testProcessDefs;
+            component.appId = 123;
+            component.ngOnChanges({});
+            component.processDefinitions = testMultipleProcessDefs;
             fixture.detectChanges();
             fixture.whenStable().then(() => {
                 let selectElement = fixture.nativeElement.querySelector('mat-select > .mat-select-trigger');
@@ -130,8 +247,8 @@ describe('StartProcessInstanceComponent', () => {
 
         it('should indicate an error to the user if process defs cannot be loaded', async(() => {
             getDefinitionsSpy = getDefinitionsSpy.and.returnValue(Observable.throw({}));
-            let change = new SimpleChange(null, '123', true);
-            component.ngOnChanges({'appId': change});
+            component.appId = 123;
+            component.ngOnChanges({});
             fixture.detectChanges();
 
             fixture.whenStable().then(() => {
@@ -143,8 +260,8 @@ describe('StartProcessInstanceComponent', () => {
 
         it('should show no process available message when no process definition is loaded', async(() => {
             getDefinitionsSpy = getDefinitionsSpy.and.returnValue(Observable.of([]));
-            let change = new SimpleChange(null, '123', true);
-            component.ngOnChanges({'appId': change});
+            component.appId = 123;
+            component.ngOnChanges({});
             fixture.detectChanges();
 
             fixture.whenStable().then(() => {
@@ -154,12 +271,71 @@ describe('StartProcessInstanceComponent', () => {
             });
         }));
 
+        it('should select processDefinition based on processDefinition input', async(() => {
+            getDefinitionsSpy = getDefinitionsSpy.and.returnValue(Observable.of(testMultipleProcessDefs));
+            component.appId = 123;
+            component.processDefinitionName = 'My Process 2';
+            component.ngOnChanges({});
+            fixture.detectChanges();
+            fixture.whenStable().then(() => {
+                expect(component.selectedProcessDef.name).toBe(JSON.parse(JSON.stringify(testMultipleProcessDefs[1])).name);
+            });
+        }));
+
+        it('should select automatically the processDefinition if the app contain oly one', async(() => {
+            getDefinitionsSpy = getDefinitionsSpy.and.returnValue(Observable.of(testProcessDefinitions));
+            component.appId = 123;
+            component.ngOnChanges({});
+            fixture.detectChanges();
+            fixture.whenStable().then(() => {
+                expect(component.selectedProcessDef.name).toBe(JSON.parse(JSON.stringify(testProcessDefinitions[0])).name);
+            });
+        }));
+
+        describe('dropdown', () => {
+
+            it('should hide the process dropdown if showSelectProcessDropdown is false', async(() => {
+                getDefinitionsSpy = getDefinitionsSpy.and.returnValue(Observable.of([testProcessDefRepr]));
+                component.appId = 123;
+                component.showSelectProcessDropdown = false;
+                component.ngOnChanges({});
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    let selectElement = fixture.nativeElement.querySelector('mat-select > .mat-select-trigger');
+                    expect(selectElement).toBeNull();
+                });
+            }));
+
+            it('should show the process dropdown if showSelectProcessDropdown is false', async(() => {
+                getDefinitionsSpy = getDefinitionsSpy.and.returnValue(Observable.of(testMultipleProcessDefs));
+                component.appId = 123;
+                component.processDefinitionName = 'My Process 2';
+                component.showSelectProcessDropdown = true;
+                component.ngOnChanges({});
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    let selectElement = fixture.nativeElement.querySelector('mat-select > .mat-select-trigger');
+                    expect(selectElement).not.toBeNull();
+                });
+            }));
+
+            it('should show the process dropdown by default', async(() => {
+                getDefinitionsSpy = getDefinitionsSpy.and.returnValue(Observable.of(testMultipleProcessDefs));
+                component.appId = 123;
+                component.processDefinitionName = 'My Process 2';
+                component.ngOnChanges({});
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    let selectElement = fixture.nativeElement.querySelector('mat-select > .mat-select-trigger');
+                    expect(selectElement).not.toBeNull();
+                });
+            }));
+        });
     });
 
     describe('input changes', () => {
 
         let change = new SimpleChange(123, 456, true);
-        let nullChange = new SimpleChange(123, null, true);
 
         beforeEach(async(() => {
             component.appId = 123;
@@ -170,22 +346,20 @@ describe('StartProcessInstanceComponent', () => {
             });
         }));
 
-        it('should reload processes when appId input changed', () => {
-            component.ngOnChanges({appId: change});
-            expect(getDefinitionsSpy).toHaveBeenCalledWith(456);
-        });
-
-        it('should reload processes when appId input changed to null', () => {
-            component.ngOnChanges({appId: nullChange});
-            expect(getDefinitionsSpy).toHaveBeenCalledWith(null);
-        });
+        it('should reload processes when appId input changed', async(() => {
+            component.appId = 456;
+            component.ngOnChanges({ appId: change });
+            fixture.whenStable().then(() => {
+                expect(getDefinitionsSpy).toHaveBeenCalledWith(456);
+            });
+        }));
 
         it('should get current processDeff', () => {
-            component.ngOnChanges({appId: change});
-            component.onProcessDefChange('my:Process');
+            component.appId = 456;
+            component.ngOnChanges({ appId: change });
             fixture.detectChanges();
             expect(getDefinitionsSpy).toHaveBeenCalled();
-            expect(component.processDefinitions).toBe(testProcessDefs);
+            expect(component.processDefinitions).toBe(testMultipleProcessDefs);
         });
     });
 
@@ -193,12 +367,12 @@ describe('StartProcessInstanceComponent', () => {
 
         beforeEach(() => {
             component.name = 'My new process';
-            let change = new SimpleChange(null, 123, true);
-            component.ngOnChanges({'appId': change});
+            component.appId = 123;
+            component.ngOnChanges({});
         });
 
         it('should call service to start process if required fields provided', async(() => {
-            component.onProcessDefChange('my:process1');
+            component.selectedProcessDef = testProcessDefRepr;
             component.startProcess();
             fixture.whenStable().then(() => {
                 expect(startProcessSpy).toHaveBeenCalled();
@@ -214,7 +388,7 @@ describe('StartProcessInstanceComponent', () => {
         }));
 
         it('should call service to start process with the correct parameters', async(() => {
-            component.onProcessDefChange('my:process1');
+            component.selectedProcessDef = testProcessDefRepr;
             component.startProcess();
             fixture.whenStable().then(() => {
                 expect(startProcessSpy).toHaveBeenCalledWith('my:process1', 'My new process', undefined, undefined, undefined);
@@ -231,7 +405,7 @@ describe('StartProcessInstanceComponent', () => {
             inputProcessVariable.push(variable);
 
             component.variables = inputProcessVariable;
-            component.onProcessDefChange('my:process1');
+            component.selectedProcessDef = testProcessDefRepr;
             component.startProcess();
             fixture.whenStable().then(() => {
                 expect(startProcessSpy).toHaveBeenCalledWith('my:process1', 'My new process', undefined, undefined, inputProcessVariable);
@@ -240,7 +414,7 @@ describe('StartProcessInstanceComponent', () => {
 
         it('should output start event when process started successfully', async(() => {
             let emitSpy = spyOn(component.start, 'emit');
-            component.onProcessDefChange('my:process1');
+            component.selectedProcessDef = testProcessDefRepr;
             component.startProcess();
             fixture.whenStable().then(() => {
                 expect(emitSpy).toHaveBeenCalledWith(newProcess);
@@ -249,9 +423,9 @@ describe('StartProcessInstanceComponent', () => {
 
         it('should throw error event when process cannot be started', async(() => {
             let errorSpy = spyOn(component.error, 'error');
-            let error = {message: 'My error'};
+            let error = { message: 'My error' };
             startProcessSpy = startProcessSpy.and.returnValue(Observable.throw(error));
-            component.onProcessDefChange('my:process1');
+            component.selectedProcessDef = testProcessDefRepr;
             component.startProcess();
             fixture.whenStable().then(() => {
                 expect(errorSpy).toHaveBeenCalledWith(error);
@@ -260,7 +434,7 @@ describe('StartProcessInstanceComponent', () => {
 
         it('should indicate an error to the user if process cannot be started', async(() => {
             startProcessSpy = startProcessSpy.and.returnValue(Observable.throw({}));
-            component.onProcessDefChange('my:process1');
+            component.selectedProcessDef = testProcessDefRepr;
             component.startProcess();
             fixture.whenStable().then(() => {
                 fixture.detectChanges();
@@ -270,16 +444,38 @@ describe('StartProcessInstanceComponent', () => {
             });
         }));
 
-        it('should emit start event when start the process with currentProcessDef and name', () => {
+        it('should emit start event when start select a process and add a name', async(() => {
             let startSpy: jasmine.Spy = spyOn(component.start, 'emit');
-            component.currentProcessDef.id = '1001';
+            component.selectedProcessDef = testProcessDefRepr;
             component.name = 'my:Process';
             component.startProcess();
             fixture.detectChanges();
-            expect(startSpy).toHaveBeenCalled();
+            fixture.whenStable().then(() => {
+                let startButton = fixture.nativeElement.querySelector('#button-start');
+                startButton.click();
+                expect(startSpy).toHaveBeenCalled();
+            });
+        }));
+
+        it('should not emit start event when start the process without select a process and name', () => {
+            component.name = null;
+            component.selectedProcessDef = null;
+            let startSpy: jasmine.Spy = spyOn(component.start, 'emit');
+            component.startProcess();
+            fixture.detectChanges();
+            expect(startSpy).not.toHaveBeenCalled();
         });
 
-        it('should not emit start event when start the process without currentProcessDef and name', () => {
+        it('should not emit start event when start the process without name', () => {
+            component.name = null;
+            let startSpy: jasmine.Spy = spyOn(component.start, 'emit');
+            component.startProcess();
+            fixture.detectChanges();
+            expect(startSpy).not.toHaveBeenCalled();
+        });
+
+        it('should not emit start event when start the process without select a process', () => {
+            component.selectedProcessDef = null;
             let startSpy: jasmine.Spy = spyOn(component.start, 'emit');
             component.startProcess();
             fixture.detectChanges();
@@ -289,7 +485,7 @@ describe('StartProcessInstanceComponent', () => {
         it('should able to start the process when the required fields are filled up', async(() => {
             let startSpy: jasmine.Spy = spyOn(component.start, 'emit');
             component.name = 'my:process1';
-            component.onProcessDefChange('my:process1');
+            component.selectedProcessDef = testProcessDefRepr;
             fixture.detectChanges();
             fixture.whenStable().then(() => {
                 let startButton = fixture.nativeElement.querySelector('#button-start');
@@ -299,9 +495,9 @@ describe('StartProcessInstanceComponent', () => {
         }));
 
         it('should return true if startFrom defined', async(() => {
-            component.currentProcessDef = testProcessDefRepr;
+            component.selectedProcessDef = testProcessDefRepr;
             component.name = 'my:process1';
-            component.currentProcessDef.hasStartForm = true;
+            component.selectedProcessDef.hasStartForm = true;
             component.hasStartForm();
             fixture.whenStable().then(() => {
                 expect(component.hasStartForm()).toBe(true);
@@ -310,85 +506,4 @@ describe('StartProcessInstanceComponent', () => {
 
     });
 
-    describe('start forms', () => {
-
-        let startBtn;
-
-        describe('without start form', () => {
-
-            beforeEach(async(() => {
-                component.name = 'My new process';
-                let change = new SimpleChange(null, '123', true);
-                component.ngOnChanges({'appId': change});
-                fixture.detectChanges();
-                component.onProcessDefChange('my:process1');
-                fixture.whenStable();
-                startBtn = fixture.nativeElement.querySelector('#button-start');
-            }));
-
-            it('should have start button disabled when name not filled out', async(() => {
-                component.name = '';
-                fixture.detectChanges();
-                expect(startBtn.disabled).toBe(true);
-            }));
-
-            it('should have start button disabled when no process is selected', async(() => {
-                component.onProcessDefChange('');
-                fixture.detectChanges();
-                expect(startBtn.disabled).toBe(true);
-            }));
-
-            it('should enable start button when name and process filled out', async(() => {
-                fixture.detectChanges();
-                let startButton = fixture.nativeElement.querySelector('#button-start');
-                expect(startButton.disabled).toBeFalsy();
-            }));
-
-            it('should disable the start process button when process name is empty', async(() => {
-                component.name = '';
-                fixture.detectChanges();
-                let startButton = fixture.nativeElement.querySelector('#button-start');
-                expect(startButton.disabled).toBeTruthy();
-            }));
-
-        });
-
-        describe('with start form', () => {
-
-            beforeEach(() => {
-                getDefinitionsSpy.and.returnValue(Observable.of(testProcessDefWithForm));
-                let change = new SimpleChange(null, '123', true);
-                component.ngOnChanges({'appId': change});
-                component.onProcessDefChange('my:process1');
-                fixture.detectChanges();
-                fixture.whenStable();
-                startBtn = fixture.nativeElement.querySelector('#button-start');
-            });
-
-            it('should initialize start form', () => {
-                expect(component.startForm).toBeDefined();
-                expect(component.startForm).not.toBeNull();
-            });
-
-            it('should load start form from service', () => {
-                expect(getStartFormDefinitionSpy).toHaveBeenCalled();
-            });
-
-            it('should not show the start process button', async(() => {
-                component.name = 'My new process';
-                fixture.detectChanges();
-                expect(startBtn).toBeNull();
-            }));
-
-            it('should emit cancel event on cancel Button', () => {
-                let cancelButton =  fixture.nativeElement.querySelector('#cancle_process');
-                let cancelSpy: jasmine.Spy = spyOn(component.cancel, 'emit');
-                cancelButton.click();
-                fixture.detectChanges();
-                expect(cancelSpy).toHaveBeenCalled();
-            });
-        });
-
-    });
-
 });
diff --git a/lib/process-services/process-list/components/start-process.component.ts b/lib/process-services/process-list/components/start-process.component.ts
index 2c16a45acf..d08fda65ea 100644
--- a/lib/process-services/process-list/components/start-process.component.ts
+++ b/lib/process-services/process-list/components/start-process.component.ts
@@ -15,12 +15,28 @@
  * limitations under the License.
  */
 
-import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges,  ViewChild, ViewEncapsulation } from '@angular/core';
-import { StartFormComponent } from '@alfresco/adf-core';
+import {
+    Component,
+    EventEmitter,
+    Input,
+    OnChanges,
+    Output,
+    SimpleChanges,
+    ViewChild,
+    ViewEncapsulation
+} from '@angular/core';
+import {
+    ActivitiContentService,
+    AppConfigService,
+    StartFormComponent,
+    FormRenderingService,
+    FormValues
+} from '@alfresco/adf-core';
 import { ProcessInstanceVariable } from '../models/process-instance-variable.model';
 import { ProcessDefinitionRepresentation } from './../models/process-definition.model';
 import { ProcessInstance } from './../models/process-instance.model';
 import { ProcessService } from './../services/process.service';
+import { AttachFileWidgetComponent, AttachFolderWidgetComponent } from '../../content-widget';
 
 @Component({
     selector: 'adf-start-process',
@@ -33,9 +49,21 @@ export class StartProcessInstanceComponent implements OnChanges {
     @Input()
     appId: number;
 
+    @Input()
+    processDefinitionName: string;
+
     @Input()
     variables: ProcessInstanceVariable[];
 
+    @Input()
+    values: FormValues;
+
+    @Input()
+    name: string;
+
+    @Input()
+    showSelectProcessDropdown: boolean = true;
+
     @Output()
     start: EventEmitter<ProcessInstance> = new EventEmitter<ProcessInstance>();
 
@@ -50,39 +78,81 @@ export class StartProcessInstanceComponent implements OnChanges {
 
     processDefinitions: ProcessDefinitionRepresentation[] = [];
 
-    name: string;
-
-    currentProcessDef: ProcessDefinitionRepresentation = new ProcessDefinitionRepresentation();
+    selectedProcessDef: ProcessDefinitionRepresentation = new ProcessDefinitionRepresentation();
 
     errorMessageId: string = '';
 
-    constructor(private activitiProcess: ProcessService) {
+    constructor(private activitiProcess: ProcessService,
+                private formRenderingService: FormRenderingService,
+                private activitiContentService: ActivitiContentService,
+                private appConfig: AppConfigService) {
+        this.formRenderingService.setComponentTypeResolver('upload', () => AttachFileWidgetComponent, true);
+        this.formRenderingService.setComponentTypeResolver('select-folder', () => AttachFolderWidgetComponent, true);
     }
 
     ngOnChanges(changes: SimpleChanges) {
-        let appIdChange = changes['appId'];
-        let appId = appIdChange ? appIdChange.currentValue : null;
-        this.load(appId);
+        if (changes['values'] && changes['values'].currentValue) {
+            this.moveNodeFromCStoPS();
+        }
+
+        this.loadStartProcess();
     }
 
-    public load(appId?: number) {
+    public loadStartProcess() {
         this.resetSelectedProcessDefinition();
         this.resetErrorMessage();
-        this.activitiProcess.getProcessDefinitions(appId).subscribe(
-            (res) => {
-                this.processDefinitions = res;
+
+        this.activitiProcess.getProcessDefinitions(this.appId).subscribe(
+            (processDefinitionRepresentations: ProcessDefinitionRepresentation[]) => {
+                this.processDefinitions = processDefinitionRepresentations;
+
+                if (this.hasSingleProcessDefinition()) {
+                    this.selectedProcessDef = this.processDefinitions[0];
+                } else {
+                    this.selectedProcessDef = this.processDefinitions.find((currentProcessDefinition) => {
+                        return currentProcessDefinition.name === this.processDefinitionName;
+                    });
+                }
             },
             () => {
                 this.errorMessageId = 'ADF_PROCESS_LIST.START_PROCESS.ERROR.LOAD_PROCESS_DEFS';
+            });
+
+    }
+
+    hasSingleProcessDefinition(): boolean {
+        return this.processDefinitions.length === 1;
+    }
+
+    getAlfrescoRepositoryName(): string {
+        let alfrescoRepositoryName = this.appConfig.get<string>('alfrescoRepositoryName');
+        if (!alfrescoRepositoryName) {
+            alfrescoRepositoryName = 'alfresco-1';
+        }
+        return alfrescoRepositoryName + 'Alfresco';
+    }
+
+    moveNodeFromCStoPS() {
+        let accountIdentifier = this.getAlfrescoRepositoryName();
+
+        for (let key in this.values) {
+            if (this.values.hasOwnProperty(key)) {
+                let currentValue = this.values[key];
+
+                if (currentValue.isFile) {
+                    this.activitiContentService.applyAlfrescoNode(currentValue, null, accountIdentifier).subscribe((res) => {
+                        this.values[key] = [res];
+                    });
+                }
             }
-        );
+        }
     }
 
     public startProcess(outcome?: string) {
-        if (this.currentProcessDef.id && this.name) {
+        if (this.selectedProcessDef && this.selectedProcessDef.id && this.name) {
             this.resetErrorMessage();
             let formValues = this.startForm ? this.startForm.form.values : undefined;
-            this.activitiProcess.startProcess(this.currentProcessDef.id, this.name, outcome, formValues, this.variables).subscribe(
+            this.activitiProcess.startProcess(this.selectedProcessDef.id, this.name, outcome, formValues, this.variables).subscribe(
                 (res) => {
                     this.name = '';
                     this.start.emit(res);
@@ -95,30 +165,19 @@ export class StartProcessInstanceComponent implements OnChanges {
         }
     }
 
-    onProcessDefChange(processDefinitionId) {
-        let processDef = this.processDefinitions.find((processDefinition) => {
-            return processDefinition.id === processDefinitionId;
-        });
-        if (processDef) {
-            this.currentProcessDef = JSON.parse(JSON.stringify(processDef));
-        } else {
-            this.resetSelectedProcessDefinition();
-        }
-    }
-
     public cancelStartProcess() {
         this.cancel.emit();
     }
 
-    hasStartForm() {
-        return this.currentProcessDef && this.currentProcessDef.hasStartForm;
+    hasStartForm(): boolean {
+        return this.selectedProcessDef && this.selectedProcessDef.hasStartForm;
     }
 
     isProcessDefinitionEmpty() {
         return this.processDefinitions ? (this.processDefinitions.length > 0 || this.errorMessageId) : this.errorMessageId;
     }
 
-    isStartFormMissingOrValid() {
+    isStartFormMissingOrValid(): boolean {
         if (this.startForm) {
             return this.startForm.form && this.startForm.form.isValid;
         } else {
@@ -126,19 +185,19 @@ export class StartProcessInstanceComponent implements OnChanges {
         }
     }
 
-    validateForm() {
-        return this.currentProcessDef.id && this.name && this.isStartFormMissingOrValid();
+    validateForm(): boolean {
+        return this.selectedProcessDef && this.selectedProcessDef.id && this.name && this.isStartFormMissingOrValid();
     }
 
     private resetSelectedProcessDefinition() {
-        this.currentProcessDef = new ProcessDefinitionRepresentation();
+        this.selectedProcessDef = new ProcessDefinitionRepresentation();
     }
 
     private resetErrorMessage(): void {
         this.errorMessageId = '';
     }
 
-    hasErrorMessage() {
+    hasErrorMessage(): boolean {
         return this.processDefinitions.length === 0 && !this.errorMessageId;
     }
 
diff --git a/lib/process-services/process-list/process-list.module.ts b/lib/process-services/process-list/process-list.module.ts
index 86e59a5022..6dc219970d 100644
--- a/lib/process-services/process-list/process-list.module.ts
+++ b/lib/process-services/process-list/process-list.module.ts
@@ -27,6 +27,7 @@ import { CardViewModule, CardViewUpdateService, DataColumnModule, DataTableModul
 import { TaskListModule } from '../task-list/task-list.module';
 import { PeopleModule } from '../people/people.module';
 import { CommentsModule } from '../comments/comments.module';
+import { ContentWidgetModule } from '../content-widget/content-widget.module';
 
 import { ProcessAuditDirective } from './components/process-audit.directive';
 import { ProcessFiltersComponent } from './components/process-filters.component';
@@ -55,7 +56,8 @@ import { ProcessFilterService } from './services/process-filter.service';
         DataColumnModule,
         DirectiveModule,
         PeopleModule,
-        CommentsModule
+        CommentsModule,
+        ContentWidgetModule
     ],
     declarations: [
         ProcessInstanceListComponent,
diff --git a/lib/process-services/process-list/services/process-filter.service.spec.ts b/lib/process-services/process-list/services/process-filter.service.spec.ts
index 0485eeabde..3464f26725 100644
--- a/lib/process-services/process-list/services/process-filter.service.spec.ts
+++ b/lib/process-services/process-list/services/process-filter.service.spec.ts
@@ -23,6 +23,8 @@ import { mockError, fakeProcessFilters } from '../../mock';
 import { FilterProcessRepresentationModel } from '../models/filter-process.model';
 import { ProcessFilterService } from './process-filter.service';
 
+declare let jasmine: any;
+
 describe('Process filter', () => {
 
     let service: ProcessFilterService;
@@ -51,9 +53,11 @@ describe('Process filter', () => {
                 .and
                 .returnValue(Promise.resolve(fakeProcessFilters));
 
-            createFilter = spyOn(alfrescoApi.activiti.userFiltersApi, 'createUserProcessInstanceFilter')
-                .and
-                .callFake((filter: FilterProcessRepresentationModel) => Promise.resolve(filter));
+            jasmine.Ajax.install();
+        });
+
+        afterEach(() => {
+            jasmine.Ajax.uninstall();
         });
 
         describe('get filters', () => {
@@ -103,16 +107,41 @@ describe('Process filter', () => {
             }));
 
             it('should return the default filters', (done) => {
-                service.createDefaultFilters(1234).subscribe(
-                    (res: FilterProcessRepresentationModel []) => {
-                        expect(res).toBeDefined();
-                        expect(res.length).toEqual(3);
-                        expect(res[0].name).toEqual('Running');
-                        expect(res[1].name).toEqual('Completed');
-                        expect(res[2].name).toEqual('All');
-                        done();
-                    }
-                );
+                service.createDefaultFilters(1234).subscribe((res: FilterProcessRepresentationModel []) => {
+                    expect(res).toBeDefined();
+                    expect(res.length).toEqual(3);
+                    expect(res[0].name).toEqual('Running');
+                    expect(res[0].id).toEqual(111);
+                    expect(res[1].name).toEqual('Completed');
+                    expect(res[1].id).toEqual(222);
+                    expect(res[2].name).toEqual('All');
+                    expect(res[2].id).toEqual(333);
+                    done();
+                });
+
+                jasmine.Ajax.requests.at(0).respondWith({
+                    'status': 200,
+                    contentType: 'application/json',
+                    responseText: JSON.stringify({
+                        appId: 1001, id: '111', name: 'Running', icon: 'fake-icon', recent: false
+                    })
+                });
+
+                jasmine.Ajax.requests.at(1).respondWith({
+                    'status': 200,
+                    contentType: 'application/json',
+                    responseText: JSON.stringify({
+                        appId: 1001, id: '222', name: 'Completed', icon: 'fake-icon', recent: false
+                    })
+                });
+
+                jasmine.Ajax.requests.at(2).respondWith({
+                    'status': 200,
+                    contentType: 'application/json',
+                    responseText: JSON.stringify({
+                        appId: 1001, id: '333', name: 'All', icon: 'fake-icon', recent: false
+                    })
+                });
             });
 
             it('should pass on any error that is returned by the API', async(() => {
@@ -130,6 +159,12 @@ describe('Process filter', () => {
 
         describe('add filter', () => {
 
+            beforeEach(() => {
+                createFilter = spyOn(alfrescoApi.activiti.userFiltersApi, 'createUserProcessInstanceFilter')
+                .and
+                .callFake((processfilter: FilterProcessRepresentationModel) => Promise.resolve(processfilter));
+            });
+
             let filter = fakeProcessFilters.data[0];
 
             it('should call the API to create the filter', () => {
diff --git a/lib/process-services/process-list/services/process-filter.service.ts b/lib/process-services/process-list/services/process-filter.service.ts
index 12950df71c..12dde7113b 100644
--- a/lib/process-services/process-list/services/process-filter.service.ts
+++ b/lib/process-services/process-list/services/process-filter.service.ts
@@ -91,10 +91,13 @@ export class ProcessFilterService {
                     let filters: FilterProcessRepresentationModel[] = [];
                     res.forEach((filter) => {
                         if (filter.name === runningFilter.name) {
+                            runningFilter.id = filter.id;
                             filters.push(runningFilter);
                         } else if (filter.name === completedFilter.name) {
+                            completedFilter.id = filter.id;
                             filters.push(completedFilter);
                         } else if (filter.name === allFilter.name) {
+                            allFilter.id = filter.id;
                             filters.push(allFilter);
                         }
                     });
diff --git a/lib/process-services/process-list/services/process.service.ts b/lib/process-services/process-list/services/process.service.ts
index 3239cb1249..b087c37587 100644
--- a/lib/process-services/process-list/services/process.service.ts
+++ b/lib/process-services/process-list/services/process.service.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { AlfrescoApiService } from '@alfresco/adf-core';
+import { AlfrescoApiService, FormValues } from '@alfresco/adf-core';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
 import { TaskDetailsModel } from '../../task-list';
@@ -98,7 +98,7 @@ export class ProcessService {
             .catch(err => this.handleProcessError(err));
     }
 
-    startProcess(processDefinitionId: string, name: string, outcome?: string, startFormValues?: any, variables?: ProcessInstanceVariable[]): Observable<ProcessInstance> {
+    startProcess(processDefinitionId: string, name: string, outcome?: string, startFormValues?: FormValues, variables?: ProcessInstanceVariable[]): Observable<ProcessInstance> {
         let startRequest: any = {
             name: name,
             processDefinitionId: processDefinitionId
diff --git a/lib/process-services/process.module.ts b/lib/process-services/process.module.ts
index aeb531d674..0299b5b1fa 100644
--- a/lib/process-services/process.module.ts
+++ b/lib/process-services/process.module.ts
@@ -65,8 +65,7 @@ import { PeopleModule } from './people/people.module';
         TaskListModule,
         AppsListModule,
         AttachmentModule,
-        PeopleModule,
-        MaterialModule
+        PeopleModule
     ]
 })
 export class ProcessModule {
diff --git a/lib/process-services/task-list/components/checklist.component.ts b/lib/process-services/task-list/components/checklist.component.ts
index adf8fc2e84..02283bc543 100644
--- a/lib/process-services/task-list/components/checklist.component.ts
+++ b/lib/process-services/task-list/components/checklist.component.ts
@@ -30,21 +30,31 @@ import { TaskListService } from './../services/tasklist.service';
 })
 export class ChecklistComponent implements OnInit, OnChanges {
 
+    /** (required) The id of the parent task to which subtasks are
+     * attached.
+     */
     @Input()
     taskId: string;
 
+    /** Toggle readonly state of the form. All form widgets
+     * will render as readonly if enabled.
+     */
     @Input()
     readOnly: boolean = false;
 
+    /** (required) The assignee id that the subtasks are assigned to. */
     @Input()
     assignee: string;
 
+    /** Emitted when a new checklist task is created. */
     @Output()
     checklistTaskCreated: EventEmitter<TaskDetailsModel> = new EventEmitter<TaskDetailsModel>();
 
+    /** Emitted when a checklist task is deleted. */
     @Output()
     checklistTaskDeleted: EventEmitter<string> = new EventEmitter<string>();
 
+    /** Emitted when an error occurs. */
     @Output()
     error: EventEmitter<any> = new EventEmitter<any>();
 
diff --git a/lib/process-services/task-list/components/no-task-detail-template.directive.spec.ts b/lib/process-services/task-list/components/no-task-detail-template.directive.spec.ts
index f44a78655f..f74a7785c2 100644
--- a/lib/process-services/task-list/components/no-task-detail-template.directive.spec.ts
+++ b/lib/process-services/task-list/components/no-task-detail-template.directive.spec.ts
@@ -17,6 +17,7 @@
 
 import { NoTaskDetailsTemplateDirective } from './no-task-detail-template.directive';
 import { TaskDetailsComponent } from './task-details.component';
+import { FormRenderingService } from '@alfresco/adf-core';
 
 describe('NoTaskDetailsTemplateDirective', () => {
 
@@ -24,7 +25,7 @@ describe('NoTaskDetailsTemplateDirective', () => {
     let detailsComponent: TaskDetailsComponent;
 
     beforeEach(() => {
-        detailsComponent = new TaskDetailsComponent(null, null, null, null, null, null);
+        detailsComponent = new TaskDetailsComponent(null, null, null, new FormRenderingService(), null, null, null);
         component = new NoTaskDetailsTemplateDirective(detailsComponent);
     });
 
diff --git a/lib/process-services/task-list/components/start-task.component.html b/lib/process-services/task-list/components/start-task.component.html
index 8da846fdd3..e16230fda2 100644
--- a/lib/process-services/task-list/components/start-task.component.html
+++ b/lib/process-services/task-list/components/start-task.component.html
@@ -74,7 +74,7 @@
                     <button mat-button (click)="onCancel()" id="button-cancle">
                         {{'ADF_TASK_LIST.START_TASK.FORM.ACTION.CANCEL'|translate}}
                     </button>
-                    <button mat-button [disabled]="!startTaskmodel.name || dateError" (click)="start()" id="button-start">
+                    <button color="primary" mat-button [disabled]="!startTaskmodel.name || dateError" (click)="start()" id="button-start">
                         {{'ADF_TASK_LIST.START_TASK.FORM.ACTION.START'|translate}}
                     </button>
                 </div>
diff --git a/lib/process-services/task-list/components/start-task.component.scss b/lib/process-services/task-list/components/start-task.component.scss
index eeb352e272..6aa9d0d25e 100644
--- a/lib/process-services/task-list/components/start-task.component.scss
+++ b/lib/process-services/task-list/components/start-task.component.scss
@@ -14,9 +14,9 @@
     }
 
     .adf-new-task-layout-card {
-        width: 66.6667%;
-        margin-right: calc(33.3333% / 2 - 24px);
-        margin-left: calc(33.3333% / 2 - 24px);
+        width: 66%;
+        margin-right: auto;
+        margin-left: auto;
         margin-top: 10px;
         margin-bottom: 10px;
         padding: 0px;
@@ -46,6 +46,12 @@
     adf-start-task {
         .adf {
 
+            &-new-task-footer {
+                .mat-button {
+                    text-transform: uppercase !important;
+                }
+            }
+
             &-start-task-input-container .mat-input-wrapper {
                 padding-top: 8px;
             }
@@ -104,3 +110,11 @@
         }
     }
 }
+
+@media (max-width: 600px) {
+    .adf-new-task-layout-card {
+        width: 90%;
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
diff --git a/lib/process-services/task-list/components/task-audit.directive.ts b/lib/process-services/task-list/components/task-audit.directive.ts
index 58ebc074fe..70a55f9681 100644
--- a/lib/process-services/task-list/components/task-audit.directive.ts
+++ b/lib/process-services/task-list/components/task-audit.directive.ts
@@ -15,6 +15,8 @@
  * limitations under the License.
  */
 
+/* tslint:disable:no-input-rename  */
+
 import { ContentService } from '@alfresco/adf-core';
 import { Directive, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
 import { TaskListService } from './../services/tasklist.service';
diff --git a/lib/process-services/task-list/components/task-details.component.ts b/lib/process-services/task-list/components/task-details.component.ts
index 414838adfa..17db8dce4e 100644
--- a/lib/process-services/task-list/components/task-details.component.ts
+++ b/lib/process-services/task-list/components/task-details.component.ts
@@ -16,7 +16,7 @@
  */
 
 import { PeopleProcessService, UserProcessModel } from '@alfresco/adf-core';
-import { AuthenticationService, CardViewUpdateService, ClickNotification, LogService, UpdateNotification } from '@alfresco/adf-core';
+import { AuthenticationService, CardViewUpdateService, ClickNotification, LogService, UpdateNotification, FormRenderingService } from '@alfresco/adf-core';
 import { Component,
     EventEmitter,
     Input,
@@ -35,6 +35,7 @@ import { TaskQueryRequestRepresentationModel } from '../models/filter.model';
 import { TaskDetailsModel } from '../models/task-details.model';
 import { TaskListService } from './../services/tasklist.service';
 import { CommentsComponent } from '../../comments';
+import { AttachFileWidgetComponent, AttachFolderWidgetComponent } from '../../content-widget';
 
 @Component({
     selector: 'adf-task-details',
@@ -141,9 +142,13 @@ export class TaskDetailsComponent implements OnInit, OnChanges {
     constructor(private taskListService: TaskListService,
                 private authService: AuthenticationService,
                 private peopleProcessService: PeopleProcessService,
+                private formRenderingService: FormRenderingService,
                 private logService: LogService,
                 private cardViewUpdateService: CardViewUpdateService,
                 private dialog: MatDialog) {
+
+        this.formRenderingService.setComponentTypeResolver('select-folder', () => AttachFolderWidgetComponent, true);
+        this.formRenderingService.setComponentTypeResolver('upload', () => AttachFileWidgetComponent, true);
         this.peopleSearch$ = new Observable<UserProcessModel[]>(observer => this.peopleSearchObserver = observer).share();
     }
 
diff --git a/lib/process-services/task-list/components/task-header.component.spec.ts b/lib/process-services/task-list/components/task-header.component.spec.ts
index e78ecabf0d..dacbfb492f 100644
--- a/lib/process-services/task-list/components/task-header.component.spec.ts
+++ b/lib/process-services/task-list/components/task-header.component.spec.ts
@@ -107,6 +107,14 @@ describe('TaskHeaderComponent', () => {
         expect(formNameEl.nativeElement.innerText).toBe('Wilbur Adams');
     });
 
+    it('should display priority', () => {
+        component.taskDetails.priority = 27;
+        component.ngOnChanges({});
+        fixture.detectChanges();
+        let formNameEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-priority"]'));
+        expect(formNameEl.nativeElement.innerText).toBe('27');
+    });
+
     it('should set editable to false if the task has already completed', () => {
         component.taskDetails.endDate = new Date('05/05/2002');
         component.ngOnChanges({});
diff --git a/lib/process-services/task-list/components/task-header.component.ts b/lib/process-services/task-list/components/task-header.component.ts
index 049f1655b6..0efe281723 100644
--- a/lib/process-services/task-list/components/task-header.component.ts
+++ b/lib/process-services/task-list/components/task-header.component.ts
@@ -17,7 +17,7 @@
 
 import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 
-import { BpmUserService, CardViewDateItemModel, CardViewItem, CardViewMapItemModel, CardViewTextItemModel, LogService } from '@alfresco/adf-core';
+import { BpmUserService, CardViewDateItemModel, CardViewItem, CardViewMapItemModel, CardViewTextItemModel, LogService, TranslationService } from '@alfresco/adf-core';
 
 import { TaskDetailsModel } from '../models/task-details.model';
 import { TaskListService } from './../services/tasklist.service';
@@ -48,6 +48,7 @@ export class TaskHeaderComponent implements OnChanges, OnInit {
 
     constructor(private activitiTaskService: TaskListService,
                 private bpmUserService: BpmUserService,
+                private translationService: TranslationService,
                 private logService: LogService) {
     }
 
@@ -71,7 +72,7 @@ export class TaskHeaderComponent implements OnChanges, OnInit {
                      label: 'ADF_TASK_LIST.PROPERTIES.ASSIGNEE',
                      value: this.taskDetails.getFullName(),
                      key: 'assignee',
-                     default: 'ADF_TASK_LIST.PROPERTIES.ASSIGNEE_DEFAULT',
+                     default: this.translationService.instant('ADF_TASK_LIST.PROPERTIES.ASSIGNEE_DEFAULT'),
                      clickable: !this.isCompleted()
                     }
                 ),
@@ -86,7 +87,8 @@ export class TaskHeaderComponent implements OnChanges, OnInit {
                     {
                         label: 'ADF_TASK_LIST.PROPERTIES.PRIORITY',
                         value: this.taskDetails.priority,
-                        key: 'priority'
+                        key: 'priority',
+                        editable: true
                     }
                 ),
                 new CardViewDateItemModel(
@@ -94,7 +96,7 @@ export class TaskHeaderComponent implements OnChanges, OnInit {
                         label: 'ADF_TASK_LIST.PROPERTIES.DUE_DATE',
                         value: this.taskDetails.dueDate,
                         key: 'dueDate',
-                        default: 'ADF_TASK_LIST.PROPERTIES.DUE_DATE_DEFAULT',
+                        default: this.translationService.instant('ADF_TASK_LIST.PROPERTIES.DUE_DATE_DEFAULT'),
                         editable: true
                     }
                 ),
@@ -103,14 +105,14 @@ export class TaskHeaderComponent implements OnChanges, OnInit {
                         label: 'ADF_TASK_LIST.PROPERTIES.CATEGORY',
                         value: this.taskDetails.category,
                         key: 'category',
-                        default: 'ADF_TASK_LIST.PROPERTIES.CATEGORY_DEFAULT'
+                        default: this.translationService.instant('ADF_TASK_LIST.PROPERTIES.CATEGORY_DEFAULT')
                     }
                 ),
                 new CardViewMapItemModel(
                     {
                         label: 'ADF_TASK_LIST.PROPERTIES.PARENT_NAME',
                         value: parentInfoMap, key: 'parentName',
-                        default: 'ADF_TASK_LIST.PROPERTIES.PARENT_NAME_DEFAULT',
+                        default: this.translationService.instant('ADF_TASK_LIST.PROPERTIES.PARENT_NAME_DEFAULT'),
                         clickable: true
                     }
                 ),
@@ -140,7 +142,7 @@ export class TaskHeaderComponent implements OnChanges, OnInit {
                         label: 'ADF_TASK_LIST.PROPERTIES.DESCRIPTION',
                         value: this.taskDetails.description,
                         key: 'description',
-                        default: 'ADF_TASK_LIST.PROPERTIES.DESCRIPTION_DEFAULT',
+                        default: this.translationService.instant('ADF_TASK_LIST.PROPERTIES.DESCRIPTION_DEFAULT'),
                         multiline: true,
                         editable: true
                     }
@@ -150,7 +152,7 @@ export class TaskHeaderComponent implements OnChanges, OnInit {
                         label: 'ADF_TASK_LIST.PROPERTIES.FORM_NAME',
                         value: this.formName,
                         key: 'formName',
-                        default: 'ADF_TASK_LIST.PROPERTIES.FORM_NAME_DEFAULT'
+                        default: this.translationService.instant('ADF_TASK_LIST.PROPERTIES.FORM_NAME_DEFAULT')
                     }
                 )
             ];
diff --git a/lib/process-services/task-list/components/task-list.component.css b/lib/process-services/task-list/components/task-list.component.css
index a83c1106da..41e447251f 100644
--- a/lib/process-services/task-list/components/task-list.component.css
+++ b/lib/process-services/task-list/components/task-list.component.css
@@ -1,13 +1,13 @@
-alfresco-datatable >>> .column-header {
+alfresco-datatable ::ng-deep .column-header {
     color: #232323;
     font-size: 15px;
 }
 
-alfresco-datatable >>> .data-cell {
+alfresco-datatable ::ng-deep .data-cell {
     cursor: pointer !important;
 }
 
-alfresco-datatable >>> .cell-value{
+alfresco-datatable ::ng-deep .cell-value{
     width: 250px;
     white-space: nowrap;
     overflow: hidden;
diff --git a/lib/process-services/task-list/components/task-list.component.spec.ts b/lib/process-services/task-list/components/task-list.component.spec.ts
index 9efeedb6c0..f74c495752 100644
--- a/lib/process-services/task-list/components/task-list.component.spec.ts
+++ b/lib/process-services/task-list/components/task-list.component.spec.ts
@@ -206,10 +206,10 @@ describe('TaskListComponent', () => {
     });
 
     it('should fetch custom schemaColumn when the input presetColumn is defined', () => {
-        component.presetColumn = 'fakeCutomColumns';
+        component.presetColumn = 'fakeCutomSchema';
         fixture.detectChanges();
         expect(component.data.getColumns()).toBeDefined();
-        expect(component.data.getColumns().length).toEqual(3);
+        expect(component.data.getColumns().length).toEqual(2);
     });
 
     it('should return an empty task list when no input parameters are passed', () => {
diff --git a/lib/process-services/task-list/components/task-list.component.ts b/lib/process-services/task-list/components/task-list.component.ts
index a3affa5a95..80a4b297fa 100644
--- a/lib/process-services/task-list/components/task-list.component.ts
+++ b/lib/process-services/task-list/components/task-list.component.ts
@@ -36,48 +36,74 @@ export class TaskListComponent implements OnChanges, OnInit, AfterContentInit {
 
     @ContentChild(DataColumnListComponent) columnList: DataColumnListComponent;
 
+    /* The id of the app. */
     @Input()
     appId: number;
 
+    /* The Instance Id of the process. */
     @Input()
     processInstanceId: string;
 
+    /* The Definition Key of the process. */
     @Input()
     processDefinitionKey: string;
 
+    /* Current state of the process. Possible values are: `completed`, `active`. */
     @Input()
     state: string;
 
+    /* The assignment of the process. Possible values are: "assignee" (the current user
+     * is the assignee), candidate (the current user is a task candidate", "group_x" (the task
+     * is assigned to a group where the current user is a member,
+     * no value(the current user is involved).
+     */
     @Input()
     assignment: string;
 
+    /* Define the sort order of the processes. Possible values are : `created-desc`,
+     * `created-asc`, `due-desc`, `due-asc`
+     */
     @Input()
     sort: string;
 
     @Input()
     name: string;
 
+    /* Define which task id should be selected after reloading. If the task id doesn't
+     * exist or nothing is passed then the first task will be selected.
+     */
     @Input()
     landingTaskId: string;
 
+    /* Data source object that represents the number and the type of the columns that
+     * you want to show.
+     */
     @Input()
     data: DataTableAdapter;
 
+    /* Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode,
+     * you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for
+     * multiple rows.
+     */
     @Input()
     selectionMode: string = 'single'; // none|single|multiple
 
     @Input()
     presetColumn: string;
 
+    /* Toggles multiple row selection, renders checkboxes at the beginning of each row */
     @Input()
     multiselect: boolean = false;
 
+    /* Emitted when a task in the list is clicked */
     @Output()
     rowClick: EventEmitter<string> = new EventEmitter<string>();
 
+    /* Emitted when rows are selected/unselected */
     @Output()
     rowsSelected: EventEmitter<any[]> = new EventEmitter<any[]>();
 
+    /* Emitted when the task list is loaded */
     @Output()
     success: EventEmitter<any> = new EventEmitter<any>();
 
@@ -88,9 +114,11 @@ export class TaskListComponent implements OnChanges, OnInit, AfterContentInit {
     selectedInstances: any[];
     layoutPresets = {};
 
+    /* The page number of the tasks to fetch. */
     @Input()
     page: number = 0;
 
+    /* The number of tasks to fetch. */
     @Input()
     size: number = DEFAULT_SIZE;
 
@@ -145,21 +173,11 @@ export class TaskListComponent implements OnChanges, OnInit, AfterContentInit {
      * If component is assigned with an empty data adater the default schema settings applied.
      */
     setupSchema(): void {
-        let schema: DataColumn[] = [];
-
-        if (this.columnList && this.columnList.columns && this.columnList.columns.length > 0) {
-            schema = this.columnList.columns.map(c => <DataColumn> c);
-        }
-
+        let schema = this.getSchema();
         if (!this.data) {
-            this.data = new ObjectDataTableAdapter([], schema.length > 0 ? schema :  this.presetColumn  ? this.getLayoutPreset(this.presetColumn) : this.getLayoutPreset());
-
-        } else {
-            if (schema && schema.length > 0) {
-                this.data.setColumns(schema);
-            } else if (this.data.getColumns().length === 0) {
-                this.presetColumn ? this.setupDefaultColumns(this.presetColumn) : this.setupDefaultColumns();
-            }
+            this.data = new ObjectDataTableAdapter([], schema);
+        } else if (this.data.getColumns().length === 0) {
+            this.data.setColumns(schema);
         }
     }
 
@@ -341,13 +359,6 @@ export class TaskListComponent implements OnChanges, OnInit, AfterContentInit {
         return new TaskQueryRequestRepresentationModel(requestNode);
     }
 
-    setupDefaultColumns(preset: string = 'default'): void {
-        if (this.data) {
-            const columns = this.getLayoutPreset(preset);
-            this.data.setColumns(columns);
-        }
-    }
-
     private loadLayoutPresets(): void {
         const externalSettings = this.appConfig.get('adf-task-list.presets', null);
 
@@ -356,10 +367,30 @@ export class TaskListComponent implements OnChanges, OnInit, AfterContentInit {
         } else {
             this.layoutPresets = taskPresetsDefaultModel;
         }
-
     }
 
-    private getLayoutPreset(name: string = 'default'): DataColumn[] {
-        return (this.layoutPresets[name] || this.layoutPresets['default']).map(col => new ObjectDataColumn(col));
+    getSchema(): any {
+        let customSchemaColumns = [];
+        customSchemaColumns = this.getSchemaFromConfig(this.presetColumn).concat(this.getSchemaFromHtml());
+        if (customSchemaColumns.length === 0) {
+            customSchemaColumns = this.getDefaultLayoutPreset();
+        }
+        return customSchemaColumns;
+    }
+
+    getSchemaFromHtml(): any {
+        let schema = [];
+        if (this.columnList && this.columnList.columns && this.columnList.columns.length > 0) {
+            schema = this.columnList.columns.map(c => <DataColumn> c);
+        }
+        return schema;
+    }
+
+    private getSchemaFromConfig(name: string): DataColumn[] {
+        return name ? (this.layoutPresets[name]).map(col => new ObjectDataColumn(col)) : [];
+    }
+
+    private getDefaultLayoutPreset(): DataColumn[] {
+        return (this.layoutPresets['default']).map(col => new ObjectDataColumn(col));
     }
 }
diff --git a/lib/process-services/task-list/public-api.ts b/lib/process-services/task-list/public-api.ts
index c9a291d354..b25ea0ad48 100644
--- a/lib/process-services/task-list/public-api.ts
+++ b/lib/process-services/task-list/public-api.ts
@@ -30,8 +30,10 @@ export * from './services/task-upload.service';
 export * from './services/task-filter.service';
 
 export * from './models/filter.model';
-export * from './models/task-details.model';
-export * from './models/task-details.event';
-export * from './models/user-event.model';
+export * from './models/form.model';
 export * from './models/start-task.model';
+export * from './models/task-details.event';
+export * from './models/task-details.model';
 export * from './models/task-list.model';
+export * from './models/user-event.model';
+export * from './models/user-group.model';
diff --git a/lib/process-services/task-list/services/task-filter.service.spec.ts b/lib/process-services/task-list/services/task-filter.service.spec.ts
index 996db0e67e..df7555ef60 100644
--- a/lib/process-services/task-list/services/task-filter.service.spec.ts
+++ b/lib/process-services/task-list/services/task-filter.service.spec.ts
@@ -26,27 +26,21 @@ import { TaskFilterService } from './task-filter.service';
 
 declare let jasmine: any;
 
-describe('Activiti Tas filter Service', () => {
+describe('Activiti Task filter Service', () => {
 
     let service: TaskFilterService;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-
             providers: [
                 TaskFilterService
             ]
-        }).compileComponents();
+        }).compileComponents().then(() => {
+            service = TestBed.get(TaskFilterService);
+            jasmine.Ajax.install();
+        });
     }));
 
-    beforeEach(() => {
-        service = TestBed.get(TaskFilterService);
-    });
-
-    beforeEach(() => {
-        jasmine.Ajax.install();
-    });
-
     afterEach(() => {
         jasmine.Ajax.uninstall();
     });
@@ -54,15 +48,13 @@ describe('Activiti Tas filter Service', () => {
     describe('Content tests', () => {
 
         it('should return the task list filters', (done) => {
-            service.getTaskListFilters().subscribe(
-                (res) => {
-                    expect(res).toBeDefined();
-                    expect(res.length).toEqual(2);
-                    expect(res[0].name).toEqual('FakeInvolvedTasks');
-                    expect(res[1].name).toEqual('FakeMyTasks');
-                    done();
-                }
-            );
+            service.getTaskListFilters().subscribe((res) => {
+                expect(res).toBeDefined();
+                expect(res.length).toEqual(2);
+                expect(res[0].name).toEqual('FakeInvolvedTasks');
+                expect(res[1].name).toEqual('FakeMyTasks');
+                done();
+            });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
                 'status': 200,
@@ -72,17 +64,15 @@ describe('Activiti Tas filter Service', () => {
         });
 
         it('should return the task filter by id', (done) => {
-            service.getTaskFilterById(2).subscribe(
-                (taskFilter: FilterRepresentationModel) => {
-                    expect(taskFilter).toBeDefined();
-                    expect(taskFilter.id).toEqual(2);
-                    expect(taskFilter.name).toEqual('FakeMyTasks');
-                    expect(taskFilter.filter.sort).toEqual('created-desc');
-                    expect(taskFilter.filter.state).toEqual('open');
-                    expect(taskFilter.filter.assignment).toEqual('fake-assignee');
-                    done();
-                }
-            );
+            service.getTaskFilterById(2).subscribe((taskFilter: FilterRepresentationModel) => {
+                expect(taskFilter).toBeDefined();
+                expect(taskFilter.id).toEqual(2);
+                expect(taskFilter.name).toEqual('FakeMyTasks');
+                expect(taskFilter.filter.sort).toEqual('created-desc');
+                expect(taskFilter.filter.state).toEqual('open');
+                expect(taskFilter.filter.assignment).toEqual('fake-assignee');
+                done();
+            });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
                 'status': 200,
@@ -92,8 +82,7 @@ describe('Activiti Tas filter Service', () => {
         });
 
         it('should return the task filter by name', (done) => {
-            service.getTaskFilterByName('FakeMyTasks').subscribe(
-                (res: FilterRepresentationModel) => {
+            service.getTaskFilterByName('FakeMyTasks').subscribe((res: FilterRepresentationModel) => {
                     expect(res).toBeDefined();
                     expect(res.id).toEqual(2);
                     expect(res.name).toEqual('FakeMyTasks');
@@ -111,28 +100,24 @@ describe('Activiti Tas filter Service', () => {
             });
         });
 
-        it('should call the api withthe appId', (done) => {
+        it('should call the api with the appId', (done) => {
             spyOn(service, 'callApiTaskFilters').and.returnValue((fakeAppPromise));
 
             let appId = 1;
-            service.getTaskListFilters(appId).subscribe(
-                (res) => {
-                    expect(service.callApiTaskFilters).toHaveBeenCalledWith(appId);
-                    done();
-                }
-            );
+            service.getTaskListFilters(appId).subscribe((res) => {
+                expect(service.callApiTaskFilters).toHaveBeenCalledWith(appId);
+                done();
+            });
         });
 
         it('should return the app filter by id', (done) => {
             let appId = 1;
-            service.getTaskListFilters(appId).subscribe(
-                (res) => {
-                    expect(res).toBeDefined();
-                    expect(res.length).toEqual(1);
-                    expect(res[0].name).toEqual('FakeInvolvedTasks');
-                    done();
-                }
-            );
+            service.getTaskListFilters(appId).subscribe((res) => {
+                expect(res).toBeDefined();
+                expect(res.length).toEqual(1);
+                expect(res[0].name).toEqual('FakeInvolvedTasks');
+                done();
+            });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
                 'status': 200,
@@ -142,23 +127,25 @@ describe('Activiti Tas filter Service', () => {
         });
 
         it('should return the default filters', (done) => {
-            service.createDefaultFilters(1234).subscribe(
-                (res: FilterRepresentationModel []) => {
-                    expect(res).toBeDefined();
-                    expect(res.length).toEqual(4);
-                    expect(res[0].name).toEqual('Involved Tasks');
-                    expect(res[1].name).toEqual('My Tasks');
-                    expect(res[2].name).toEqual('Queued Tasks');
-                    expect(res[3].name).toEqual('Completed Tasks');
-                    done();
-                }
-            );
+            service.createDefaultFilters(1234).subscribe((res: FilterRepresentationModel []) => {
+                expect(res).toBeDefined();
+                expect(res.length).toEqual(4);
+                expect(res[0].name).toEqual('Involved Tasks');
+                expect(res[0].id).toEqual(111);
+                expect(res[1].name).toEqual('My Tasks');
+                expect(res[1].id).toEqual(222);
+                expect(res[2].name).toEqual('Queued Tasks');
+                expect(res[2].id).toEqual(333);
+                expect(res[3].name).toEqual('Completed Tasks');
+                expect(res[3].id).toEqual(444);
+                done();
+            });
 
             jasmine.Ajax.requests.at(0).respondWith({
                 'status': 200,
                 contentType: 'application/json',
                 responseText: JSON.stringify({
-                    id: '111', name: 'Involved Tasks', filter: { assignment: 'fake-involved' }
+                    appId: 1001, id: '111', name: 'Involved Tasks', icon: 'fake-icon', recent: false
                 })
             });
 
@@ -166,7 +153,7 @@ describe('Activiti Tas filter Service', () => {
                 'status': 200,
                 contentType: 'application/json',
                 responseText: JSON.stringify({
-                    id: '222', name: 'My Tasks', filter: { assignment: 'fake-assignee' }
+                    appId: 1001, id: '222', name: 'My Tasks', icon: 'fake-icon', recent: false
                 })
             });
 
@@ -174,7 +161,7 @@ describe('Activiti Tas filter Service', () => {
                 'status': 200,
                 contentType: 'application/json',
                 responseText: JSON.stringify({
-                    id: '333', name: 'Queued Tasks', filter: { assignment: 'fake-candidate' }
+                    appId: 1001, id: '333', name: 'Queued Tasks', icon: 'fake-icon', recent: false
                 })
             });
 
@@ -182,26 +169,24 @@ describe('Activiti Tas filter Service', () => {
                 'status': 200,
                 contentType: 'application/json',
                 responseText: JSON.stringify({
-                    id: '444', name: 'Completed Tasks', filter: { assignment: 'fake-involved' }
+                    appId: 1001, id: '444', name: 'Completed Tasks', icon: 'fake-icon', recent: false
                 })
             });
         });
 
-        it('should add a filter ', (done) => {
+        it('should add a filter', (done) => {
             let filterFake = new FilterRepresentationModel({
                 name: 'FakeNameFilter',
                 assignment: 'fake-assignement'
             });
 
-            service.addFilter(filterFake).subscribe(
-                (res: FilterRepresentationModel) => {
-                    expect(res).toBeDefined();
-                    expect(res.id).not.toEqual(null);
-                    expect(res.name).toEqual('FakeNameFilter');
-                    expect(res.filter.assignment).toEqual('fake-assignement');
-                    done();
-                }
-            );
+            service.addFilter(filterFake).subscribe((res: FilterRepresentationModel) => {
+                expect(res).toBeDefined();
+                expect(res.id).not.toEqual(null);
+                expect(res.name).toEqual('FakeNameFilter');
+                expect(res.filter.assignment).toEqual('fake-assignement');
+                done();
+            });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
                 'status': 200,
diff --git a/lib/process-services/task-list/services/task-filter.service.ts b/lib/process-services/task-list/services/task-filter.service.ts
index 7e7beaf95b..dc892c25f9 100644
--- a/lib/process-services/task-list/services/task-filter.service.ts
+++ b/lib/process-services/task-list/services/task-filter.service.ts
@@ -63,12 +63,16 @@ export class TaskFilterService {
                     let filters: FilterRepresentationModel[] = [];
                     res.forEach((filter) => {
                         if (filter.name === involvedTasksFilter.name) {
+                            involvedTasksFilter.id = filter.id;
                             filters.push(involvedTasksFilter);
                         } else if (filter.name === myTasksFilter.name) {
+                            myTasksFilter.id = filter.id;
                             filters.push(myTasksFilter);
                         } else if (filter.name === queuedTasksFilter.name) {
+                            queuedTasksFilter.id = filter.id;
                             filters.push(queuedTasksFilter);
                         } else if (filter.name === completedTasksFilter.name) {
+                            completedTasksFilter.id = filter.id;
                             filters.push(completedTasksFilter);
                         }
                     });
diff --git a/lib/process-services/task-list/services/tasklist.service.spec.ts b/lib/process-services/task-list/services/tasklist.service.spec.ts
index d3574a376c..b7f3b1c5ec 100644
--- a/lib/process-services/task-list/services/tasklist.service.spec.ts
+++ b/lib/process-services/task-list/services/tasklist.service.spec.ts
@@ -40,27 +40,21 @@ import { TaskListService } from './tasklist.service';
 
 declare let jasmine: any;
 
-xdescribe('Activiti TaskList Service', () => {
+describe('Activiti TaskList Service', () => {
 
     let service: TaskListService;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-
             providers: [
                 TaskListService
             ]
-        }).compileComponents();
+        }).compileComponents().then(() => {
+            service = TestBed.get(TaskListService);
+            jasmine.Ajax.install();
+        });
     }));
 
-    beforeEach(() => {
-        service = TestBed.get(TaskListService);
-    });
-
-    beforeEach(() => {
-        jasmine.Ajax.install();
-    });
-
     afterEach(() => {
         jasmine.Ajax.uninstall();
     });
@@ -68,20 +62,18 @@ xdescribe('Activiti TaskList Service', () => {
     describe('Content tests', () => {
 
         it('should return the task list filtered', (done) => {
-            service.getTasks(<TaskQueryRequestRepresentationModel> fakeFilter).subscribe(
-                res => {
-                    expect(res).toBeDefined();
-                    expect(res.size).toEqual(1);
-                    expect(res.start).toEqual(0);
-                    expect(res.data).toBeDefined();
-                    expect(res.data.length).toEqual(1);
-                    expect(res.data[0].name).toEqual('FakeNameTask');
-                    expect(res.data[0].assignee.email).toEqual('fake-email@dom.com');
-                    expect(res.data[0].assignee.firstName).toEqual('firstName');
-                    expect(res.data[0].assignee.lastName).toEqual('lastName');
-                    done();
-                }
-            );
+            service.getTasks(<TaskQueryRequestRepresentationModel> fakeFilter).subscribe(res => {
+                expect(res).toBeDefined();
+                expect(res.size).toEqual(1);
+                expect(res.start).toEqual(0);
+                expect(res.data).toBeDefined();
+                expect(res.data.length).toEqual(1);
+                expect(res.data[0].name).toEqual('FakeNameTask');
+                expect(res.data[0].assignee.email).toEqual('fake-email@dom.com');
+                expect(res.data[0].assignee.firstName).toEqual('firstName');
+                expect(res.data[0].assignee.lastName).toEqual('lastName');
+                done();
+            });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
                 'status': 200,
@@ -91,20 +83,18 @@ xdescribe('Activiti TaskList Service', () => {
         });
 
         it('should return the task list filtered by processDefinitionKey', (done) => {
-            service.getTasks(<TaskQueryRequestRepresentationModel> fakeFilter).subscribe(
-                res => {
-                    expect(res).toBeDefined();
-                    expect(res.size).toEqual(2);
-                    expect(res.start).toEqual(0);
-                    expect(res.data).toBeDefined();
-                    expect(res.data.length).toEqual(2);
-                    expect(res.data[0].name).toEqual('FakeNameTask');
-                    expect(res.data[0].assignee.email).toEqual('fake-email@dom.com');
-                    expect(res.data[0].assignee.firstName).toEqual('firstName');
-                    expect(res.data[0].assignee.lastName).toEqual('lastName');
-                    done();
-                }
-            );
+            service.getTasks(<TaskQueryRequestRepresentationModel> fakeFilter).subscribe(res => {
+                expect(res).toBeDefined();
+                expect(res.size).toEqual(2);
+                expect(res.start).toEqual(0);
+                expect(res.data).toBeDefined();
+                expect(res.data.length).toEqual(2);
+                expect(res.data[0].name).toEqual('FakeNameTask');
+                expect(res.data[0].assignee.email).toEqual('fake-email@dom.com');
+                expect(res.data[0].assignee.firstName).toEqual('firstName');
+                expect(res.data[0].assignee.lastName).toEqual('lastName');
+                done();
+            });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
                 'status': 200,
@@ -113,14 +103,13 @@ xdescribe('Activiti TaskList Service', () => {
             });
         });
 
-        it('should throw an exception when the response is wrong', () => {
-            service.getTasks(<TaskQueryRequestRepresentationModel> fakeFilter).subscribe(
-                (res) => {
+        it('should throw an exception when the response is wrong', (done) => {
+            service.getTasks(<TaskQueryRequestRepresentationModel> fakeFilter).subscribe((res) => {
                 },
                 (err: any) => {
                     expect(err).toBeDefined();
-                }
-            );
+                    done();
+                });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
                 'status': 404,
@@ -133,58 +122,52 @@ xdescribe('Activiti TaskList Service', () => {
             spyOn(service, 'getTasks').and.returnValue(Observable.of(fakeTaskList));
             spyOn(service, 'getTotalTasks').and.returnValue(Observable.of(fakeTaskList));
 
-            service.findAllTaskByState(<TaskQueryRequestRepresentationModel> fakeFilter, 'open').subscribe(
-                res => {
+            service.findAllTaskByState(<TaskQueryRequestRepresentationModel> fakeFilter, 'open').subscribe(res => {
 
-                    expect(res).toBeDefined();
-                    expect(res.size).toEqual(1);
-                    expect(res.start).toEqual(0);
-                    expect(res.data).toBeDefined();
-                    expect(res.data.length).toEqual(1);
-                    expect(res.data[0].name).toEqual('FakeNameTask');
-                    expect(res.data[0].assignee.email).toEqual('fake-email@dom.com');
-                    expect(res.data[0].assignee.firstName).toEqual('firstName');
-                    expect(res.data[0].assignee.lastName).toEqual('lastName');
-                    done();
-                }
-            );
+                expect(res).toBeDefined();
+                expect(res.size).toEqual(1);
+                expect(res.start).toEqual(0);
+                expect(res.data).toBeDefined();
+                expect(res.data.length).toEqual(1);
+                expect(res.data[0].name).toEqual('FakeNameTask');
+                expect(res.data[0].assignee.email).toEqual('fake-email@dom.com');
+                expect(res.data[0].assignee.firstName).toEqual('firstName');
+                expect(res.data[0].assignee.lastName).toEqual('lastName');
+                done();
+            });
         });
 
         it('should return the task list with all tasks filtered', (done) => {
             spyOn(service, 'getTasks').and.returnValue(Observable.of(fakeTaskList));
             spyOn(service, 'getTotalTasks').and.returnValue(Observable.of(fakeTaskList));
 
-            service.findAllTaskByState(<TaskQueryRequestRepresentationModel> fakeFilter).subscribe(
-                res => {
-                    expect(res).toBeDefined();
-                    expect(res.size).toEqual(1);
-                    expect(res.start).toEqual(0);
-                    expect(res.data).toBeDefined();
-                    expect(res.data.length).toEqual(1);
-                    expect(res.data[0].name).toEqual('FakeNameTask');
-                    expect(res.data[0].assignee.email).toEqual('fake-email@dom.com');
-                    expect(res.data[0].assignee.firstName).toEqual('firstName');
-                    expect(res.data[0].assignee.lastName).toEqual('lastName');
-                    done();
-                }
-            );
+            service.findAllTaskByState(<TaskQueryRequestRepresentationModel> fakeFilter).subscribe(res => {
+                expect(res).toBeDefined();
+                expect(res.size).toEqual(1);
+                expect(res.start).toEqual(0);
+                expect(res.data).toBeDefined();
+                expect(res.data.length).toEqual(1);
+                expect(res.data[0].name).toEqual('FakeNameTask');
+                expect(res.data[0].assignee.email).toEqual('fake-email@dom.com');
+                expect(res.data[0].assignee.firstName).toEqual('firstName');
+                expect(res.data[0].assignee.lastName).toEqual('lastName');
+                done();
+            });
         });
 
         it('should return the task list filtered by state', (done) => {
-            service.findTasksByState(<TaskQueryRequestRepresentationModel> fakeFilter, 'open').subscribe(
-                res => {
-                    expect(res).toBeDefined();
-                    expect(res.size).toEqual(1);
-                    expect(res.start).toEqual(0);
-                    expect(res.data).toBeDefined();
-                    expect(res.data.length).toEqual(1);
-                    expect(res.data[0].name).toEqual('FakeNameTask');
-                    expect(res.data[0].assignee.email).toEqual('fake-email@dom.com');
-                    expect(res.data[0].assignee.firstName).toEqual('firstName');
-                    expect(res.data[0].assignee.lastName).toEqual('lastName');
-                    done();
-                }
-            );
+            service.findTasksByState(<TaskQueryRequestRepresentationModel> fakeFilter, 'open').subscribe(res => {
+                expect(res).toBeDefined();
+                expect(res.size).toEqual(1);
+                expect(res.start).toEqual(0);
+                expect(res.data).toBeDefined();
+                expect(res.data.length).toEqual(1);
+                expect(res.data[0].name).toEqual('FakeNameTask');
+                expect(res.data[0].assignee.email).toEqual('fake-email@dom.com');
+                expect(res.data[0].assignee.firstName).toEqual('firstName');
+                expect(res.data[0].assignee.lastName).toEqual('lastName');
+                done();
+            });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
                 'status': 200,
@@ -194,19 +177,17 @@ xdescribe('Activiti TaskList Service', () => {
         });
 
         it('should return the task list filtered', (done) => {
-            service.findTasksByState(<TaskQueryRequestRepresentationModel> fakeFilter).subscribe(
-                res => {
-                    expect(res.size).toEqual(1);
-                    expect(res.start).toEqual(0);
-                    expect(res.data).toBeDefined();
-                    expect(res.data.length).toEqual(1);
-                    expect(res.data[0].name).toEqual('FakeNameTask');
-                    expect(res.data[0].assignee.email).toEqual('fake-email@dom.com');
-                    expect(res.data[0].assignee.firstName).toEqual('firstName');
-                    expect(res.data[0].assignee.lastName).toEqual('lastName');
-                    done();
-                }
-            );
+            service.findTasksByState(<TaskQueryRequestRepresentationModel> fakeFilter).subscribe(res => {
+                expect(res.size).toEqual(1);
+                expect(res.start).toEqual(0);
+                expect(res.data).toBeDefined();
+                expect(res.data.length).toEqual(1);
+                expect(res.data[0].name).toEqual('FakeNameTask');
+                expect(res.data[0].assignee.email).toEqual('fake-email@dom.com');
+                expect(res.data[0].assignee.firstName).toEqual('firstName');
+                expect(res.data[0].assignee.lastName).toEqual('lastName');
+                done();
+            });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
                 'status': 200,
@@ -219,83 +200,67 @@ xdescribe('Activiti TaskList Service', () => {
             spyOn(service, 'getTasks').and.returnValue(Observable.of(fakeTaskList));
             spyOn(service, 'getTotalTasks').and.returnValue(Observable.of(fakeTaskList));
 
-            service.findAllTasksWithoutState(<TaskQueryRequestRepresentationModel> fakeFilter).subscribe(
-                res => {
-                    expect(res).toBeDefined();
-                    expect(res.data).toBeDefined();
-                    expect(res.data.length).toEqual(2);
-                    expect(res.data[0].name).toEqual('FakeNameTask');
-                    expect(res.data[0].assignee.email).toEqual('fake-email@dom.com');
-                    expect(res.data[0].assignee.firstName).toEqual('firstName');
-                    expect(res.data[0].assignee.lastName).toEqual('lastName');
+            service.findAllTasksWithoutState(<TaskQueryRequestRepresentationModel> fakeFilter).subscribe(res => {
+                expect(res).toBeDefined();
+                expect(res.data).toBeDefined();
+                expect(res.data.length).toEqual(2);
+                expect(res.data[0].name).toEqual('FakeNameTask');
+                expect(res.data[0].assignee.email).toEqual('fake-email@dom.com');
+                expect(res.data[0].assignee.firstName).toEqual('firstName');
+                expect(res.data[0].assignee.lastName).toEqual('lastName');
 
-                    expect(res.data[1].name).toEqual('FakeNameTask');
-                    expect(res.data[1].assignee.email).toEqual('fake-email@dom.com');
-                    expect(res.data[1].assignee.firstName).toEqual('firstName');
-                    expect(res.data[1].assignee.lastName).toEqual('lastName');
-                    done();
-                }
-            );
+                expect(res.data[1].name).toEqual('FakeNameTask');
+                expect(res.data[1].assignee.email).toEqual('fake-email@dom.com');
+                expect(res.data[1].assignee.firstName).toEqual('firstName');
+                expect(res.data[1].assignee.lastName).toEqual('lastName');
+                done();
+            });
         });
 
         it('Should return both open and completed task', (done) => {
             spyOn(service, 'findTasksByState').and.returnValue(Observable.of(fakeOpenTaskList));
             spyOn(service, 'findAllTaskByState').and.returnValue(Observable.of(fakeCompletedTaskList));
-            service.findAllTasksWithoutState(<TaskQueryRequestRepresentationModel> fakeFilter).subscribe(
-                res => {
-                    expect(res).toBeDefined();
-                    expect(res.data).toBeDefined();
-                    expect(res.data.length).toEqual(4);
-                    expect(res.data[0].name).toEqual('FakeOpenTask1');
-                    expect(res.data[1].assignee.email).toEqual('fake-open-email@dom.com');
-                    expect(res.data[2].name).toEqual('FakeCompletedTaskName1');
-                    expect(res.data[2].assignee.email).toEqual('fake-completed-email@dom.com');
-                    expect(res.data[3].name).toEqual('FakeCompletedTaskName2');
-                    done();
-                }
-            );
+            service.findAllTasksWithoutState(<TaskQueryRequestRepresentationModel> fakeFilter).subscribe(res => {
+                expect(res).toBeDefined();
+                expect(res.data).toBeDefined();
+                expect(res.data.length).toEqual(4);
+                expect(res.data[0].name).toEqual('FakeOpenTask1');
+                expect(res.data[1].assignee.email).toEqual('fake-open-email@dom.com');
+                expect(res.data[2].name).toEqual('FakeCompletedTaskName1');
+                expect(res.data[2].assignee.email).toEqual('fake-completed-email@dom.com');
+                expect(res.data[3].name).toEqual('FakeCompletedTaskName2');
+                done();
+            });
         });
 
         it('should add  the task list to the tasklistSubject with all tasks filtered without state', (done) => {
             spyOn(service, 'getTasks').and.returnValue(Observable.of(fakeTaskList));
             spyOn(service, 'getTotalTasks').and.returnValue(Observable.of(fakeTaskList));
 
-            service.tasksList$.subscribe(
-                 (res) => {
-                    expect(res).toBeDefined();
-                    expect(res.data).toBeDefined();
-                    expect(res.data.length).toEqual(2);
-                    expect(res.data[0].name).toEqual('FakeNameTask');
-                    expect(res.data[1].assignee.email).toEqual('fake-email@dom.com');
-                });
-            service.findAllTasksWithoutState(<TaskQueryRequestRepresentationModel> fakeFilter).subscribe(
-                res => {
-                    expect(res).toBeDefined();
-                    expect(res.data).toBeDefined();
-                    expect(res.data.length).toEqual(2);
-                    expect(res.data[0].name).toEqual('FakeNameTask');
-                    expect(res.data[0].assignee.email).toEqual('fake-email@dom.com');
-                    expect(res.data[1].name).toEqual('FakeNameTask');
-                    expect(res.data[1].assignee.email).toEqual('fake-email@dom.com');
-                    done();
-                }
-            );
+            service.findAllTasksWithoutState(<TaskQueryRequestRepresentationModel> fakeFilter).subscribe(res => {
+                expect(res).toBeDefined();
+                expect(res.data).toBeDefined();
+                expect(res.data.length).toEqual(2);
+                expect(res.data[0].name).toEqual('FakeNameTask');
+                expect(res.data[0].assignee.email).toEqual('fake-email@dom.com');
+                expect(res.data[1].name).toEqual('FakeNameTask');
+                expect(res.data[1].assignee.email).toEqual('fake-email@dom.com');
+                done();
+            });
         });
 
-        it('should return the task details ', (done) => {
-            service.getTaskDetails('999').subscribe(
-                (res: TaskDetailsModel) => {
-                    expect(res).toBeDefined();
-                    expect(res.id).toEqual('999');
-                    expect(res.name).toEqual('fake-task-name');
-                    expect(res.formKey).toEqual('99');
-                    expect(res.assignee).toBeDefined();
-                    expect(res.assignee.email).toEqual('fake-email@dom.com');
-                    expect(res.assignee.firstName).toEqual('firstName');
-                    expect(res.assignee.lastName).toEqual('lastName');
-                    done();
-                }
-            );
+        xit('should return the task details ', (done) => {
+            service.getTaskDetails('999').subscribe((res: TaskDetailsModel) => {
+                expect(res).toBeDefined();
+                expect(res.id).toEqual('999');
+                expect(res.name).toEqual('fake-task-name');
+                expect(res.formKey).toEqual('99');
+                expect(res.assignee).toBeDefined();
+                expect(res.assignee.email).toEqual('fake-email@dom.com');
+                expect(res.assignee.firstName).toEqual('firstName');
+                expect(res.assignee.lastName).toEqual('lastName');
+                done();
+            });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
                 'status': 200,
@@ -304,22 +269,20 @@ xdescribe('Activiti TaskList Service', () => {
             });
         });
 
-        it('should return the tasks checklists ', (done) => {
-            service.getTaskChecklist('999').subscribe(
-                (res: TaskDetailsModel[]) => {
-                    expect(res).toBeDefined();
-                    expect(res.length).toEqual(2);
-                    expect(res[0].name).toEqual('FakeCheckTask1');
-                    expect(res[0].assignee.email).toEqual('fake-email@dom.com');
-                    expect(res[0].assignee.firstName).toEqual('firstName');
-                    expect(res[0].assignee.lastName).toEqual('lastName');
-                    expect(res[1].name).toEqual('FakeCheckTask2');
-                    expect(res[1].assignee.email).toEqual('fake-email@dom.com');
-                    expect(res[1].assignee.firstName).toEqual('firstName');
-                    expect(res[0].assignee.lastName).toEqual('lastName');
-                    done();
-                }
-            );
+        xit('should return the tasks checklists ', (done) => {
+            service.getTaskChecklist('999').subscribe((res: TaskDetailsModel[]) => {
+                expect(res).toBeDefined();
+                expect(res.length).toEqual(2);
+                expect(res[0].name).toEqual('FakeCheckTask1');
+                expect(res[0].assignee.email).toEqual('fake-email@dom.com');
+                expect(res[0].assignee.firstName).toEqual('firstName');
+                expect(res[0].assignee.lastName).toEqual('lastName');
+                expect(res[1].name).toEqual('FakeCheckTask2');
+                expect(res[1].assignee.email).toEqual('fake-email@dom.com');
+                expect(res[1].assignee.firstName).toEqual('firstName');
+                expect(res[0].assignee.lastName).toEqual('lastName');
+                done();
+            });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
                 'status': 200,
@@ -328,7 +291,7 @@ xdescribe('Activiti TaskList Service', () => {
             });
         });
 
-        it('should add a task ', (done) => {
+        xit('should add a task ', (done) => {
             let taskFake = new TaskDetailsModel({
                 id: 123,
                 parentTaskId: 456,
@@ -339,15 +302,13 @@ xdescribe('Activiti TaskList Service', () => {
                 created: ''
             });
 
-            service.addTask(taskFake).subscribe(
-                (res: TaskDetailsModel) => {
-                    expect(res).toBeDefined();
-                    expect(res.id).not.toEqual('');
-                    expect(res.name).toEqual('FakeNameTask');
-                    expect(res.created).not.toEqual(null);
-                    done();
-                }
-            );
+            service.addTask(taskFake).subscribe((res: TaskDetailsModel) => {
+                expect(res).toBeDefined();
+                expect(res.id).not.toEqual('');
+                expect(res.name).toEqual('FakeNameTask');
+                expect(res.created).not.toEqual(null);
+                done();
+            });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
                 'status': 200,
@@ -360,12 +321,10 @@ xdescribe('Activiti TaskList Service', () => {
             });
         });
 
-        it('should remove a checklist task ', (done) => {
-            service.deleteTask('999').subscribe(
-                () => {
-                    done();
-                }
-            );
+        xit('should remove a checklist task ', (done) => {
+            service.deleteTask('999').subscribe(() => {
+                done();
+            });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
                 'status': 200,
@@ -373,13 +332,11 @@ xdescribe('Activiti TaskList Service', () => {
             });
         });
 
-        it('should complete the task ', (done) => {
-            service.completeTask('999').subscribe(
-                (res: any) => {
-                    expect(res).toBeDefined();
-                    done();
-                }
-            );
+        xit('should complete the task', (done) => {
+            service.completeTask('999').subscribe((res: any) => {
+                expect(res).toBeDefined();
+                done();
+            });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
                 'status': 200,
@@ -388,15 +345,13 @@ xdescribe('Activiti TaskList Service', () => {
             });
         });
 
-        it('should return the total number of tasks', (done) => {
-            service.getTotalTasks(<TaskQueryRequestRepresentationModel> fakeFilter).subscribe(
-                res => {
-                    expect(res).toBeDefined();
-                    expect(res.size).toEqual(1);
-                    expect(res.total).toEqual(1);
-                    done();
-                }
-            );
+        xit('should return the total number of tasks', (done) => {
+            service.getTotalTasks(<TaskQueryRequestRepresentationModel> fakeFilter).subscribe((res: any) => {
+                expect(res).toBeDefined();
+                expect(res.size).toEqual(1);
+                expect(res.total).toEqual(1);
+                done();
+            });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
                 'status': 200,
@@ -405,24 +360,22 @@ xdescribe('Activiti TaskList Service', () => {
             });
         });
 
-        it('should create a new standalone task ', (done) => {
+        xit('should create a new standalone task ', (done) => {
             let taskFake = new TaskDetailsModel({
                 name: 'FakeNameTask',
                 description: 'FakeDescription',
                 category: '3'
             });
 
-            service.createNewTask(taskFake).subscribe(
-                (res: TaskDetailsModel) => {
-                    expect(res).toBeDefined();
-                    expect(res.id).not.toEqual('');
-                    expect(res.name).toEqual('FakeNameTask');
-                    expect(res.description).toEqual('FakeDescription');
-                    expect(res.category).toEqual('3');
-                    expect(res.created).not.toEqual(null);
-                    done();
-                }
-            );
+            service.createNewTask(taskFake).subscribe((res: TaskDetailsModel) => {
+                expect(res).toBeDefined();
+                expect(res.id).not.toEqual('');
+                expect(res.name).toEqual('FakeNameTask');
+                expect(res.description).toEqual('FakeDescription');
+                expect(res.category).toEqual('3');
+                expect(res.created).not.toEqual(null);
+                done();
+            });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
                 'status': 200,
@@ -438,25 +391,23 @@ xdescribe('Activiti TaskList Service', () => {
             });
         });
 
-        it('should assign task to a user', (done) => {
+        xit('should assign task to a user', (done) => {
             let testTaskId = '8888';
-            service.assignTask(testTaskId, fakeUser2).subscribe(
-                (res: TaskDetailsModel) => {
-                    expect(res).toBeDefined();
-                    expect(res.id).toEqual(testTaskId);
-                    expect(res.name).toEqual('FakeNameTask');
-                    expect(res.description).toEqual('FakeDescription');
-                    expect(res.category).toEqual('3');
-                    expect(res.created).not.toEqual(null);
-                    expect(res.adhocTaskCanBeReassigned).toBe(true);
-                    expect(res.assignee).toEqual(new UserProcessModel(fakeUser2));
-                    expect(res.involvedPeople[0].email).toEqual(fakeUser1.email);
-                    expect(res.involvedPeople[0].firstName).toEqual(fakeUser1.firstName);
-                    expect(res.involvedPeople[0].lastName).toEqual(fakeUser1.lastName);
-                    expect(res.involvedPeople[0].id).toEqual(fakeUser1.id);
-                    done();
-                }
-            );
+            service.assignTask(testTaskId, fakeUser2).subscribe((res: TaskDetailsModel) => {
+                expect(res).toBeDefined();
+                expect(res.id).toEqual(testTaskId);
+                expect(res.name).toEqual('FakeNameTask');
+                expect(res.description).toEqual('FakeDescription');
+                expect(res.category).toEqual('3');
+                expect(res.created).not.toEqual(null);
+                expect(res.adhocTaskCanBeReassigned).toBe(true);
+                expect(res.assignee).toEqual(new UserProcessModel(fakeUser2));
+                expect(res.involvedPeople[0].email).toEqual(fakeUser1.email);
+                expect(res.involvedPeople[0].firstName).toEqual(fakeUser1.firstName);
+                expect(res.involvedPeople[0].lastName).toEqual(fakeUser1.lastName);
+                expect(res.involvedPeople[0].id).toEqual(fakeUser1.id);
+                done();
+            });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
                 'status': 200,
@@ -474,23 +425,21 @@ xdescribe('Activiti TaskList Service', () => {
             });
         });
 
-        it('should assign task to a userId', (done) => {
+        xit('should assign task to a userId', (done) => {
             let testTaskId = '8888';
-            service.assignTaskByUserId(testTaskId, fakeUser2.id).subscribe(
-                (res: TaskDetailsModel) => {
-                    expect(res).toBeDefined();
-                    expect(res.id).toEqual(testTaskId);
-                    expect(res.name).toEqual('FakeNameTask');
-                    expect(res.description).toEqual('FakeDescription');
-                    expect(res.category).toEqual('3');
-                    expect(res.created).not.toEqual(null);
-                    expect(res.adhocTaskCanBeReassigned).toBe(true);
-                    expect(res.assignee).toEqual(new UserProcessModel(fakeUser2));
-                    expect(res.involvedPeople[0].email).toEqual(fakeUser1.email);
-                    expect(res.involvedPeople[0].firstName).toEqual(fakeUser1.firstName);
-                    done();
-                }
-            );
+            service.assignTaskByUserId(testTaskId, fakeUser2.id).subscribe((res: TaskDetailsModel) => {
+                expect(res).toBeDefined();
+                expect(res.id).toEqual(testTaskId);
+                expect(res.name).toEqual('FakeNameTask');
+                expect(res.description).toEqual('FakeDescription');
+                expect(res.category).toEqual('3');
+                expect(res.created).not.toEqual(null);
+                expect(res.adhocTaskCanBeReassigned).toBe(true);
+                expect(res.assignee).toEqual(new UserProcessModel(fakeUser2));
+                expect(res.involvedPeople[0].email).toEqual(fakeUser1.email);
+                expect(res.involvedPeople[0].firstName).toEqual(fakeUser1.firstName);
+                done();
+            });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
                 'status': 200,
@@ -508,14 +457,12 @@ xdescribe('Activiti TaskList Service', () => {
             });
         });
 
-        it('should claim a task', (done) => {
+        xit('should claim a task', (done) => {
             let taskId = '111';
 
-            service.claimTask(taskId).subscribe(
-                (res: any) => {
-                    done();
-                }
-            );
+            service.claimTask(taskId).subscribe(() => {
+                done();
+            });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
                 'status': 200,
@@ -524,14 +471,12 @@ xdescribe('Activiti TaskList Service', () => {
             });
         });
 
-        it('should unclaim a task', (done) => {
+        xit('should unclaim a task', (done) => {
             let taskId = '111';
 
-            service.unclaimTask(taskId).subscribe(
-                (res: any) => {
-                    done();
-                }
-            );
+            service.unclaimTask(taskId).subscribe(() => {
+                done();
+            });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
                 'status': 200,
@@ -540,14 +485,12 @@ xdescribe('Activiti TaskList Service', () => {
             });
         });
 
-        it('should update a task', (done) => {
+        xit('should update a task', (done) => {
             let taskId = '111';
 
-            service.updateTask(taskId, {property: 'value'}).subscribe(
-                (res: any) => {
-                    done();
-                }
-            );
+            service.updateTask(taskId, { property: 'value' }).subscribe(() => {
+                done();
+            });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
                 'status': 200,
@@ -556,7 +499,7 @@ xdescribe('Activiti TaskList Service', () => {
             });
         });
 
-        it('should return the filter if it contains task id', (done) => {
+        xit('should return the filter if it contains task id', (done) => {
             let taskId = '1';
             let filterFake = new FilterRepresentationModel({
                 name: 'FakeNameFilter',
@@ -569,13 +512,11 @@ xdescribe('Activiti TaskList Service', () => {
                 }
             });
 
-            service.isTaskRelatedToFilter(taskId, filterFake).subscribe(
-                (res: any) => {
-                    expect(res).toBeDefined();
-                    expect(res).not.toBeNull();
-                    done();
-                }
-            );
+            service.isTaskRelatedToFilter(taskId, filterFake).subscribe((res: any) => {
+                expect(res).toBeDefined();
+                expect(res).not.toBeNull();
+                done();
+            });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
                 'status': 200,
@@ -584,23 +525,21 @@ xdescribe('Activiti TaskList Service', () => {
             });
         });
 
-        it('should return the filters if it contains task id', async(() => {
+        xit('should return the filters if it contains task id', (done) => {
             let taskId = '1';
 
             let fakeFilterList: FilterRepresentationModel[] = [];
             fakeFilterList.push(fakeRepresentationFilter1, fakeRepresentationFilter2);
             let resultFilter: FilterRepresentationModel = null;
-            service.getFilterForTaskById(taskId, fakeFilterList).subscribe(
-                (res: FilterRepresentationModel) => {
-                    resultFilter = res;
-                },
-                () => {
-                },
-                () => {
-                    expect(resultFilter).toBeDefined();
-                    expect(resultFilter).not.toBeNull();
-                    expect(resultFilter.name).toBe('CONTAIN FILTER');
-                });
+            service.getFilterForTaskById(taskId, fakeFilterList).subscribe((res: FilterRepresentationModel) => {
+                resultFilter = res;
+            }, () => {
+            }, () => {
+                expect(resultFilter).toBeDefined();
+                expect(resultFilter).not.toBeNull();
+                expect(resultFilter.name).toBe('CONTAIN FILTER');
+                done();
+            });
 
             jasmine.Ajax.requests.at(0).respondWith({
                 'status': 200,
@@ -613,20 +552,18 @@ xdescribe('Activiti TaskList Service', () => {
                 contentType: 'application/json',
                 responseText: JSON.stringify(secondFakeTaskList)
             });
-        }));
+        });
 
-        it('should get possibile form list', (done) => {
-            service.getFormList().subscribe(
-                (res: any) => {
-                    expect(res).toBeDefined();
-                    expect(res.length).toBe(2);
-                    expect(res[0].id).toBe(1);
-                    expect(res[0].name).toBe('form with all widgets');
-                    expect(res[1].id).toBe(2);
-                    expect(res[1].name).toBe('uppy');
-                    done();
-                }
-            );
+        xit('should get possible form list', (done) => {
+            service.getFormList().subscribe((res: any) => {
+                expect(res).toBeDefined();
+                expect(res.length).toBe(2);
+                expect(res[0].id).toBe(1);
+                expect(res[0].name).toBe('form with all widgets');
+                expect(res[1].id).toBe(2);
+                expect(res[1].name).toBe('uppy');
+                done();
+            });
 
             jasmine.Ajax.requests.mostRecent().respondWith({
                 'status': 200,
@@ -635,5 +572,4 @@ xdescribe('Activiti TaskList Service', () => {
             });
         });
     });
-
 });
diff --git a/lib/process-services/task-list/task-list.module.ts b/lib/process-services/task-list/task-list.module.ts
index 7ed4c1bec0..ab8010e789 100644
--- a/lib/process-services/task-list/task-list.module.ts
+++ b/lib/process-services/task-list/task-list.module.ts
@@ -27,6 +27,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MaterialModule } from '../material.module';
 import { PeopleModule } from '../people/people.module';
 import { CommentsModule } from '../comments/comments.module';
+import { ContentWidgetModule } from '../content-widget/content-widget.module';
 import { TaskUploadService } from './services/task-upload.service';
 import { ProcessUploadService } from './services/process-upload.service';
 import { TaskListService } from './services/tasklist.service';
@@ -56,7 +57,8 @@ import { TaskListComponent } from './components/task-list.component';
         FormsModule,
         ReactiveFormsModule,
         PeopleModule,
-        CommentsModule
+        CommentsModule,
+        ContentWidgetModule
     ],
     declarations: [
         NoTaskDetailsTemplateDirective,
diff --git a/lib/tsconfig.json b/lib/tsconfig.json
index 0530c87b5a..c375ff0340 100644
--- a/lib/tsconfig.json
+++ b/lib/tsconfig.json
@@ -27,6 +27,7 @@
             "@alfresco/adf-insights": ["./analytics"],
             "alfresco-js-api": ["./node_modules/alfresco-js-api/"],
             "@angular/*": ["./node_modules/@angular/*"],
+            "@mat-datetimepicker/*": ["./node_modules/@mat-datetimepicker/*"],
             "rxjs/*": ["./node_modules/rxjs/*"]
         },
         "lib": [
diff --git a/lib/tslint.json b/lib/tslint.json
index 30901bcb6e..597f0ceb03 100644
--- a/lib/tslint.json
+++ b/lib/tslint.json
@@ -9,7 +9,10 @@
             "parameters",
             "statements"
         ],
-        "ban": false,
+        "ban": [
+          true,
+          "eval"
+        ],
         "class-name": true,
         "comment-format": [
             true,
@@ -152,6 +155,8 @@
         "no-access-missing-member": false,
         "adf-file-name": true,
         "adf-class-name": true,
-        "adf-prefix-name": true
+        "adf-prefix-name": true,
+        "no-input-rename": true,
+        "no-output-rename": true
     }
 }
diff --git a/scripts/import-langs.sh b/scripts/import-langs.sh
index d0cfb374a9..064d5b9b6f 100755
--- a/scripts/import-langs.sh
+++ b/scripts/import-langs.sh
@@ -5,9 +5,9 @@ DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
 LANG_ROOT="./i18n"
 
 show_help() {
-    echo "Usage: import-langs.sh import the i18n files from a folder"
+    echo "Usage: import-langs.sh --input NAME_FOLDER import the i18n files from a folder"
     echo ""
-    echo "--output or -o to specify a folder otherwise it will be created in i18n"
+    echo "--input or -o to specify a folder otherwise it will be created in i18n"
 }
 
 input_folder(){
diff --git a/scripts/next_version.sh b/scripts/next_version.sh
index ca1f65c01e..3033a801f3 100755
--- a/scripts/next_version.sh
+++ b/scripts/next_version.sh
@@ -51,7 +51,7 @@ done
 
 if [[ "${EXEC_MINOR}" == true ]]
 then
-    ADF_VERSION=$(npm view ng2-alfresco-core version)
+    ADF_VERSION=$(npm view @alfresco/adf-core version)
     NEXT_VERSION=( ${ADF_VERSION//./ } )
     ((NEXT_VERSION[1]++))
     NEXT_VERSION[2]=0
@@ -60,7 +60,7 @@ fi
 
 if [[ "${EXEC_MAJOR}" == true ]]
 then
-    ADF_VERSION=$(npm view ng2-alfresco-core version)
+    ADF_VERSION=$(npm view @alfresco/adf-core version)
     NEXT_VERSION=( ${ADF_VERSION//./ } )
     ((NEXT_VERSION[0]++))
     NEXT_VERSION[1]=0
diff --git a/scripts/npm-build-all.sh b/scripts/npm-build-all.sh
index 42c9fe1066..c9d2ffdbad 100755
--- a/scripts/npm-build-all.sh
+++ b/scripts/npm-build-all.sh
@@ -23,8 +23,8 @@ eval projects=( "core"
 show_help() {
     echo "Usage: npm-build-all.sh"
     echo ""
-    echo "-t or --test <pkg>        Build your local components and run their tests, this parameter also accept a wildecard to execute test e.g: -t "ng2-alfresco-core"."
-    echo "-d or --debug <pkg>       Build your local components and run their tests IN THE BROWSER, this parameter also accept a wildecard to execute test e.g: -t "ng2-alfresco-core"."
+    echo "-t or --test <pkg>        Build your local components and run their tests, this parameter also accept a wildecard to execute test e.g: -t "core"."
+    echo "-d or --debug <pkg>       Build your local components and run their tests IN THE BROWSER, this parameter also accept a wildecard to execute test e.g: -t "core"."
     echo "-c or --clean             Clean the node_modules before starting the build."
     echo "-si or --skipinstall      Skip the install of node_modules before starting the build."
     echo "-sb or --skipbuild        Skip the build of ng-components."
@@ -54,7 +54,7 @@ enable_testbrowser(){
 
 test_project() {
     echo "====== test project: $1 ====="
-    npm run test -- --component $1 || exit 1
+    npm run test -- --component $1 --mode coverage || exit 1
 }
 
 debug_project() {
diff --git a/scripts/npm-check-bundles.sh b/scripts/npm-check-bundles.sh
index 6a7c9cf44e..e9d6e9a7a2 100755
--- a/scripts/npm-check-bundles.sh
+++ b/scripts/npm-check-bundles.sh
@@ -82,6 +82,20 @@ do
      echo "js.map ok!"
  fi
 
+ if [ ! -f package/esm5/$PACKAGE'.js' ]; then
+    error_out '31;1' "esm5/$PACKAGE.js not found!" >&2
+    exit 1
+ else
+     echo "esm5 ok!"
+ fi
+
+ if [ ! -f package/esm2015/$PACKAGE'.js' ]; then
+    error_out '31;1' "esm2015/$PACKAGE.js not found!" >&2
+    exit 1
+ else
+     echo "esm2015 ok!"
+ fi
+
   if [ ! -f package/_theming.scss ]; then
     error_out '31;1' "$PACKAGE style not found!" >&2
     exit 1
diff --git a/scripts/update-version.sh b/scripts/update-version.sh
index 520b7a3c5a..90ea74760f 100755
--- a/scripts/update-version.sh
+++ b/scripts/update-version.sh
@@ -23,6 +23,8 @@ show_help() {
     echo "-vj or -versionjsapi  to use a different version of js-api"
     echo "-demoshell execute the change version only in the demo shell "
     echo "-v or -version  version to update"
+    echo "-nextalpha update next alpha version of js-api and lib automatically"
+    echo "-nextbeta update next beta version of js-api and lib automatically"
     echo "-alpha update last alpha version of js-api and lib automatically"
     echo "-beta update beta alpha version of js-api and lib automatically"
     echo "-gnu for gnu"
@@ -47,7 +49,7 @@ last_alpha_mode() {
 
 next_alpha_mode() {
     echo "====== Auto find next ALPHA version ====="
-    VERSION=$(./next_version.sh -major -alpha)
+    VERSION=$(./next_version.sh -minor -alpha)
 
     echo "====== version lib ${VERSION} ====="
 
@@ -59,7 +61,7 @@ next_alpha_mode() {
 
 next_beta_mode() {
     echo "====== Auto find next BETA version ====="
-    VERSION=$(./next_version.sh -major -beta)
+    VERSION=$(./next_version.sh -minor -beta)
 
     echo "====== version lib ${VERSION} ====="
 
@@ -71,7 +73,7 @@ next_beta_mode() {
 
 last_beta_mode() {
     echo "====== Auto find last BETA version ====="
-    VERSION=$(npm view ng2-alfresco-core@beta version)
+    VERSION=$(npm view @alfresco/adf-core@beta version)
 
     echo "====== version lib ${VERSION} ====="
 
diff --git a/tslint.json b/tslint.json
index ce80085e69..d9d1e66e41 100644
--- a/tslint.json
+++ b/tslint.json
@@ -1,17 +1,23 @@
 {
+  "rulesDirectory": [
+    "node_modules/codelyzer",
+    "node_modules/adf-tslint-rules"
+  ],
   "rules": {
     "align": [
       true,
       "parameters",
-      "arguments",
       "statements"
     ],
-    "ban": false,
+    "ban": [
+      true,
+      "eval",
+      {"name": ["fdescribe", "fit"], "message": "don't focus tests"}
+    ],
     "class-name": true,
     "comment-format": [
       true,
-      "check-space",
-      "check-lowercase"
+      "check-space"
     ],
     "curly": true,
     "eofline": true,
@@ -23,24 +29,23 @@
     "interface-name": false,
     "jsdoc-format": true,
     "label-position": true,
-    "label-undefined": true,
     "max-line-length": [
       true,
-      140
+      180
     ],
     "member-ordering": [
       true,
-      "public-before-private",
       "static-before-instance",
       "variables-before-functions"
     ],
     "no-any": false,
     "no-arg": true,
-    "no-bitwise": true,
+    "no-bitwise": false,
     "no-conditional-assignment": true,
-    "no-consecutive-blank-lines": false,
+    "no-consecutive-blank-lines": true,
     "no-console": [
       true,
+      "log",
       "debug",
       "info",
       "time",
@@ -50,17 +55,15 @@
     "no-construct": true,
     "no-constructor-vars": false,
     "no-debugger": true,
-    "no-duplicate-key": true,
     "no-duplicate-variable": true,
-    "no-empty": true,
+    "no-empty": false,
     "no-eval": true,
     "no-inferrable-types": false,
     "no-internal-module": true,
-    "no-require-imports": true,
+    "no-require-imports": false,
     "no-shadowed-variable": true,
     "no-switch-case-fall-through": true,
     "no-trailing-whitespace": true,
-    "no-unreachable": true,
     "no-unused-expression": true,
     "no-unused-variable": true,
     "no-use-before-declare": true,
@@ -111,12 +114,48 @@
       "allow-leading-underscore",
       "ban-keywords"
     ],
+    "callable-types": true,
+    "import-blacklist": [
+      true,
+      "rxjs"
+    ],
+    "import-spacing": true,
+    "interface-over-type-literal": true,
+    "member-access": false,
+    "no-empty-interface": true,
+    "no-string-literal": false,
+    "no-string-throw": true,
+    "prefer-const": false,
+    "typeof-compare": true,
+    "unified-signatures": true,
     "whitespace": [
       true,
       "check-branch",
       "check-decl",
       "check-operator",
-      "check-separator"
-    ]
+      "check-separator",
+      "check-typecast",
+      "check-type",
+      "check-typecast",
+      "check-module"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "adf",
+      "kebab-case"
+    ],
+    "ordered-imports": false,
+    "use-input-property-decorator": true,
+    "use-output-property-decorator": true,
+    "use-host-property-decorator": false,
+    "use-life-cycle-interface": true,
+    "use-pipe-transform-interface": true,
+    "component-class-suffix": true,
+    "directive-class-suffix": true,
+    "no-access-missing-member": false,
+    "adf-file-name": true,
+    "adf-class-name": true,
+    "adf-prefix-name": true
   }
 }