Merge pull request #408 from Alfresco/dev-denys-393

Documentation updates

PREREQUISITES.md

@@ -6,6 +6,10 @@ The [Angular 2](https://angular.io/) based application development framework req
 - [Node.js](https://nodejs.org/en/) JavaScript runtime.
 - [npm](https://www.npmjs.com/) package manager for JavaScript.
  
+**Verify that you are running at least node `v5.x.x` and npm `3.x.x`**
+by running `node -v` and `npm -v` in a terminal/console window.
+Older versions produce errors.
+
 ## Installing Alfresco
  
 Alfresco comes with installers that will install all the servers, webapps, and tools needed to run Alfresco.

demo-shell-ng2/app/components/files/files.component.css

@@ -0,0 +1,9 @@
+.container {
+    margin: 10px;
+}
+
+@media only screen and (max-width: 640px) {
+    .container {
+        margin: 0;
+    }
+}

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

@@ -1,3 +1,4 @@
+<div class="container">
     <alfresco-upload-drag-area
             [showUploadDialog]="true"
             [currentFolderPath]="currentPath"
@@ -68,7 +69,6 @@
                         title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.DELETE' | translate}}"
                         handler="delete">
                 </content-action>
-
                 <!-- document actions -->
                 <content-action
                         target="document"
@@ -93,6 +93,7 @@
             </content-actions>
         </alfresco-document-list>
     </alfresco-upload-drag-area>
+</div>
 
 <context-menu-holder></context-menu-holder>
 

ng2-components/ng2-alfresco-datatable/README.md

@@ -28,16 +28,49 @@
   </a>
 </p>
 
-### Node
-To correctly use this component check that on your machine is running Node version 5.0.0 or higher.
+## Prerequisites
+
+Before you start using this development framework, make sure you have installed all required software and done all the 
+necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
 
 ## Install
 
 ```sh
-npm install --save ng2-alfresco-datatable material-design-lite material-design-icons
+npm install --save ng2-alfresco-datatable
 ```
 
-## Basic usage
+### Dependencies
+
+You must separately install the following libraries for your application:
+ 
+- [ng2-translate](https://github.com/ocombe/ng2-translate)
+- [ng2-alfresco-core](https://www.npmjs.com/package/ng2-alfresco-core)
+
+```sh
+npm install --save ng2-translate ng2-alfresco-core
+```
+
+#### Material Design Lite
+
+The style of this component is based on [material design](https://getmdl.io/), so if you want to visualize it correctly you have to add the material
+design dependency to your project:
+
+```sh
+npm install --save material-design-icons material-design-lite
+```
+
+Also make sure you include these dependencies in your `index.html` file:
+
+```html
+<!-- Google Material Design Lite -->
+<link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
+<script src="node_modules/material-design-lite/material.min.js"></script>
+<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
+```
+
+## Basic usage example
+
+**my.component.html**
 
 ```html
 <alfresco-datatable 
@@ -45,7 +78,7 @@ npm install --save ng2-alfresco-datatable material-design-lite material-design-i
 </alfresco-datatable>
 ```
 
-Example of an App that declares the file viewer component :
+**my.component.ts**
 
 ```ts
 import { Component } from '@angular/core';
@@ -56,7 +89,7 @@ import {
 
 @Component({
     selector: 'my-view',
-    template: '<YOUR TEMPLATE>',
+    templateUrl: './my.component.html',
     directives: [ALFRESCO_DATATABLE_DIRECTIVES]
 })
 export class MyView {
@@ -71,13 +104,23 @@ export class MyView {
             ],
             // schema
             [
-                {type: 'text', key: 'id', title: 'Id', sortable: true},
-                {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true}
+                { 
+                    type: 'text', 
+                    key: 'id', 
+                    title: 'Id', 
+                    sortable: true 
+                },
+                { 
+                    type: 'text', 
+                    key: 'name', 
+                    title: 'Name', 
+                    cssClass: 'full-width', 
+                    sortable: true 
+                }
             ]
         );
     }
 }
-
 ```
 
 ![DataTable demo](docs/assets/datatable-demo.png)
@@ -86,26 +129,181 @@ export class MyView {
 
 | Name | Type | Default | Description
 | --- | --- | --- | --- |
-| data | DataTableAdapter | empty **ObjectDataTableAdapter** | data source |
-| multiselect | boolean | false | toggle multiple row selection, renders checkboxes at the beginning of each row |
-| actions | boolean | false | toggle data actions column |
+| data | DataTableAdapter | instance of **ObjectDataTableAdapter** | data source |
+| multiselect | boolean | false | Toggles multiple row selection, renders checkboxes at the beginning of each row |
+| actions | boolean | false | Toggles data actions column |
 
 ### Events
 
 | Name | Description
 | --- | --- |
-| rowClick | emitted when user clicks the row |
-| rowDblClick | emitted when user double-clicks the row |
+| [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 |
+| [showRowActionsMenu](#showrowactionsmenu-event) | Emitted before actions menu is displayed for a row |
+| [executeRowAction](#executerowaction-event) | Emitted when row action is executed by user |
+
+**Advanced usage example**
+
+```html
+<alfresco-datatable
+    [data]="data"
+    [actions]="contentActions"
+    [multiselect]="multiselect"
+    (showRowContextMenu)="onShowRowContextMenu($event)"
+    (showRowActionsMenu)="onShowRowActionsMenu($event)"
+    (executeRowAction)="onExecuteRowAction($event)"
+    (rowClick)="onRowClick($event)"
+    (rowDblClick)="onRowDblClick($event)">
+    <no-content-template>
+        <template>
+            <h1>Sorry, no content</h1>
+        </template>
+    </no-content-template>
+</alfresco-datatable>
+```
+
+#### rowClick event
+
+_This event is emitted when user clicks the row._
+
+Event properties:
+
+```ts
+row: DataRow, // row clicked
+event: Event  // original HTML DOM event
+```
+
+Handler example:
+
+```ts
+onRowClicked(event) {
+    console.log(event.row);
+}
+```
+
+#### rowDblClick event
+
+_This event is emitted when user double-clicks the row._
+
+Event properties:
+
+```ts
+row: DataRow, // row clicked
+event: Event  // original HTML DOM event
+```
+
+Handler example:
+
+```ts
+onRowDblClicked(event) {
+    console.log(event.row);
+}
+```
+
+#### showRowContextMenu event
+
+_Emitted before context menu is displayed for a row._ 
+
+Note that DataTable itself does not populate context menu items,
+you can provide all necessary content via handler.
+
+Event properties:
+
+```ts
+args: {
+    row: DataRow,
+    col: DataColumn,
+    actions: []
+}
+```
+
+Handler example:
+
+```ts
+onShowRowContextMenu(event) {
+    event.args.actions = [
+        { ... },
+        { ... }
+    ]
+}
+```
+
+DataTable will automatically render provided menu items.
+
+_Please refer to [ContextMenu](https://www.npmjs.com/package/ng2-alfresco-core) 
+documentation for more details on context actions format and behavior._
+
+#### showRowActionsMenu event
+
+_Emitted before actions menu is displayed for a row.
+Requires `actions` property to be set to `true`._
+
+Note that DataTable itself does not populate action menu items,
+you can provide all necessary content via handler.
+
+Event properties:
+
+```ts
+args: {
+    row: DataRow,
+    col: DataColumn,
+    actions: []
+}
+```
+
+Handler example:
+
+```ts
+onShowRowActionsMenu(event) {
+    event.args.actions = [
+        { ... },
+        { ... }
+    ]
+}
+```
+
+#### executeRowAction event
+
+_Emitted when row action is executed by user._
+
+Usually accompanies `showRowActionsMenu` event. 
+DataTable itself does not execute actions but provides support for external
+integration. If there were actions provided with `showRowActionsMenu` event
+then `executeRowAction` will be automatically executed when user clicks 
+corresponding menu item.
+
+Event properties:
+
+```ts
+args: {
+    row: DataRow
+    action: any
+}
+```
+
+Handler example:
+
+```ts
+onExecuteRowAction(event) {
+    
+    // get event arguments
+    let row = event.args.row;
+    let action = event.args.action;
+    
+    // your code to execute action
+    this.executeContentAction(row, action);
+}
+```
 
 ## Data sources
 
 DataTable component gets data by means of data adapter. 
 It is possible having data retrieved from different kinds of sources by implementing
-a custom `DataTableAdapter`:
+a custom `DataTableAdapter` using the following interfaces:
 
 ```ts
 interface DataTableAdapter {
-
     getRows(): Array<DataRow>;
     setRows(rows: Array<DataRow>): void;
     getColumns(): Array<DataColumn>;
@@ -114,12 +312,28 @@ interface DataTableAdapter {
     getSorting(): DataSorting;
     setSorting(sorting: DataSorting): void;
     sort(key?: string, direction?: string): void;
+}
 
+interface DataRow {
+    isSelected: boolean;
+    hasValue(key: string): boolean;
+    getValue(key: string): any;
+}
+
+interface DataColumn {
+    key: string;
+    type: string; // text|image|date
+    format?: string;
+    sortable?: boolean;
+    title?: string;
+    srTitle?: string;
+    cssClass?: string;
 }
 ```
 
-DataTable ships `ObjectDataTableAdapter` out-of-box. This is a simple data adapter
-that binds to object arrays and turns object fields into columns:
+DataTable provides [ObjectDataTableAdapter](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts) out-of-box. 
+This is a simple data adapter implementation that binds to object arrays 
+and turns object fields into columns:
 
 ```ts
 let data = new ObjectDataTableAdapter(
@@ -130,8 +344,18 @@ let data = new ObjectDataTableAdapter(
     ],
     // schema
     [
-        {type: 'text', key: 'id', title: 'Id', sortable: true},
-        {type: 'text', key: 'name', title: 'Name', sortable: true}
+        { 
+            type: 'text', 
+            key: 'id', 
+            title: 'Id', 
+            sortable: true 
+        },
+        {
+            type: 'text', 
+            key: 'name', 
+            title: 'Name', 
+            sortable: true
+        }
     ]
 );
 ```
@@ -145,19 +369,19 @@ npm install
 npm run build
 ```
 
-##Build the files and keep watching for changes
+### Build the files and keep watching for changes
 
 ```sh
 $ npm run build:w
 ```
     
-## Running unit tests
+### Running unit tests
 
 ```sh
 npm test
 ```
 
-## Running unit tests in browser
+### Running unit tests in browser
 
 ```sh
 npm test-browser
@@ -166,7 +390,7 @@ npm test-browser
 This task rebuilds all the code, runs tslint, license checks and other quality check tools 
 before performing unit testing. 
 
-## Code coverage
+### Code coverage
 
 ```sh
 npm run coverage

ng2-components/ng2-alfresco-datatable/src/components/datatable.component.ts

@@ -94,7 +94,7 @@ export class DataTableComponent implements OnInit, AfterViewChecked {
         }
     }
 
-    onRowClick(row: DataRow, e?) {
+    onRowClick(row: DataRow, e?: Event) {
         if (e) {
             e.preventDefault();
         }

ng2-components/ng2-alfresco-documentlist/README.md

@@ -28,8 +28,10 @@
   </a>
 </p>
 
-### Node
-To correctly use this component check that on your machine is running Node version 5.0.0 or higher.
+## Prerequisites
+
+Before you start using this development framework, make sure you have installed all required software and done all the 
+necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
 
 ## Install
 
@@ -37,7 +39,7 @@ To correctly use this component check that on your machine is running Node versi
 npm install --save ng2-alfresco-documentlist
 ```
 
-#### Dependencies
+### Dependencies
 
 Add the following dependency to your index.html:
 
@@ -45,25 +47,25 @@ Add the following dependency to your index.html:
 <script src="node_modules/alfresco-js-api/bundle.js"></script>
 ```
 
-The following component needs to be added to your systemjs.config: 
+The following component needs to be added to your `systemjs.config.js` file: 
 
-- ng2-translate
-- ng2-alfresco-core
-- ng2-alfresco-documentlist
+- [ng2-translate](https://github.com/ocombe/ng2-translate)
+- [ng2-alfresco-core](https://www.npmjs.com/package/ng2-alfresco-core)
+- [ng2-alfresco-datatable](https://www.npmjs.com/package/ng2-alfresco-datatable)
 
-Please refer to the following example to have an idea of how your systemjs.config should look like :
+You can get more details in the 
+[example implementation](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-documentlist/demo/systemjs.config.js).
 
-https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-documentlist/demo/systemjs.config.js
+#### Material Design Lite
 
-#### Style
-The style of this component is based on material design, so if you want to visualize it correctly you have to add the material
+The style of this component is based on [material design](https://getmdl.io/), so if you want to visualize it correctly you have to add the material
 design dependency to your project:
 
 ```sh
 npm install --save material-design-icons material-design-lite
 ```
 
-Also make sure you include these dependencies in your .html page:
+Also make sure you include these dependencies in your `index.html` file:
 
 ```html
 <!-- Google Material Design Lite -->
@@ -72,107 +74,52 @@ Also make sure you include these dependencies in your .html page:
 <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
 ```
 
-
 ## Basic usage
 
 ```html
 <alfresco-document-list
-    [breadcrumb]="breadcrumb"
-    [navigate]="navigation"
-    (itemClick)="onItemClick($event)">
+    #documentList
+    [currentFolderPath]="currentPath"
+    [contextMenuActions]="true"
+    [contentActions]="true"
+    [multiselect]="true"
+    (folderChange)="onFolderChanged($event)">
 </alfresco-document-list>
 ```
 
-Example of the component that declares document list and provides values for bindings:
+### Properties
 
-```ts
-import { Component, OnInit } from '@angular/core';
-import { bootstrap } from '@angular/platform-browser-dynamic';
-import { HTTP_PROVIDERS } from '@angular/http';
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| 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 |
+| multiselect | boolean | false | Toggles multiselect mode |
+| contentActions | boolean | false | Toggles content actions for each row |
+| contextMenuActions | boolean | false | Toggles context menus for each row |
 
-import {
-    ALFRESCO_CORE_PROVIDERS,
-    AlfrescoSettingsService,
-    AlfrescoAuthenticationService,
-    AlfrescoPipeTranslate,
-    AlfrescoTranslationService,
-    CONTEXT_MENU_DIRECTIVES
-} from 'ng2-alfresco-core';
+### Events
 
-import {
-    DOCUMENT_LIST_DIRECTIVES,
-    DOCUMENT_LIST_PROVIDERS,
-    DocumentActionsService
-} from 'ng2-alfresco-documentlist';
+| Name | Description |
+| --- | --- |
+| nodeClick | Emitted when user clicks the node |
+| nodeDblClick | Emitted when user double-clicks the node |
+| folderChange | Emitted upon display folder changed |
+| preview | Emitted when document preview is requested either with single or double click |
 
-@Component({
-    selector: 'alfresco-documentlist-demo',
-    template: `
-        <div class="container">
-            <alfresco-document-list [breadcrumb]="true"  *ngIf="authenticated">
-            </alfresco-document-list>
-        </div>
-    `,
-    styles: [':host > .container {padding: 10px}'],
-    directives: [DOCUMENT_LIST_DIRECTIVES],
-    providers: [DOCUMENT_LIST_PROVIDERS],
-    pipes: [AlfrescoPipeTranslate]
-})
-class DocumentListDemo implements OnInit {
 
-    authenticated: boolean;
-
-    constructor(private authService: AlfrescoAuthenticationService,
-                settings: AlfrescoSettingsService,
-                translation: AlfrescoTranslationService,
-                documentActions: DocumentActionsService) {
-
-        settings.host = 'http://myalfrescoip';
-        translation.addTranslationFolder();
-        documentActions.setHandler('my-handler', this.myDocumentActionHandler.bind(this));
-    }
-
-    ngOnInit() {
-        this.login();
-    }
-
-    myDocumentActionHandler(obj: any) {
-        window.alert('my custom action handler');
-    }
-
-    myCustomAction1(event) {
-        alert('Custom document action for ' + event.value.displayName);
-    }
-
-    myFolderAction1(event) {
-        alert('Custom folder action for ' + event.value.displayName);
-    }
-
-    login() {
-        this.authService.login('admin', 'admin').subscribe(token => {
-            this.authenticated = true;
-        });
-    }
-}
-
-bootstrap(DocumentListDemo, [
-    HTTP_PROVIDERS,
-    ALFRESCO_CORE_PROVIDERS
-]);
-```
-
-Note the use of ```DOCUMENT_LIST_DIRECTIVES``` barrel that consolidates all the document list related directives together.
-It gives you access to ```<document-actions>```, ```<folder-actions>``` and many other directives.
-In addition ```DOCUMENT_LIST_PROVIDERS``` exports all primary services and providers needed for component to function.
+_For a complete example source code please refer to 
+[DocumentList Demo](https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-components/ng2-alfresco-documentlist/demo) 
+repository._
 
 ### Breadcrumb
 
 DocumentList provides simple breadcrumb element to indicate the current position within a navigation hierarchy.
-It can be enabled via `breadcrumb` attribute:
 
 ```html
-<alfresco-document-list [breadcrumb]="true">
-</alfresco-document-list>
+<alfresco-document-list-breadcrumb
+    [target]="documentList">
+</alfresco-document-list-breadcrumb>
 ```
 
 ![Breadcrumb](docs/assets/breadcrumb.png)
@@ -189,10 +136,27 @@ A custom set of columns can look like the following:
 ```html
 <alfresco-document-list ...>
     <content-columns>
-        <content-column source="$thumbnail" type="image"></content-column>
-        <content-column title="Name" source="name" class="full-width name-column"></content-column>
-        <content-column title="Created By" source="createdByUser.displayName"></content-column>
-        <content-column title="Created On" source="createdAt" type="date" format="medium"></content-column>
+        <content-column key="$thumbnail" type="image"></content-column>
+        <content-column 
+            title="Name" 
+            key="name" 
+            sortable="true"
+            class="full-width ellipsis-cell">
+        </content-column>
+        <content-column 
+            title="Created By" 
+            key="createdByUser.displayName"
+            sortable="true"
+            class="desktop-only">
+        </content-column>
+        <content-column 
+            title="Created On" 
+            key="createdAt" 
+            type="date" 
+            format="medium"
+            sortable="true"
+            class="desktop-only">
+        </content-column>
     </content-columns>
 </alfresco-document-list>
 ```
@@ -220,9 +184,9 @@ the binding value for the Site column to display location site will be `location
 ```html
 <alfresco-document-list ...>
     <content-columns>
-        <content-column source="$thumbnail" type="image"></content-column>
-        <content-column title="Name" source="displayName" class="full-width name-column"></content-column>
-        <content-column title="Site" source="location.site"></content-column>
+        <content-column key="$thumbnail" type="image"></content-column>
+        <content-column title="Name" key="displayName" class="full-width ellipsis-cell"></content-column>
+        <content-column title="Site" key="location.site"></content-column>
     </content-columns>
 </alfresco-document-list>
 ```
@@ -235,8 +199,9 @@ HTML attributes:
 | --- | --- | --- | --- |
 | title | string | | Column title |
 | sr-title | string | | Screen reader title, used only when `title` is empty |
-| source | string | | Column source, example: `createdByUser.displayName` |
-| class | string | | CSS class list, example: `full-width name-column` |
+| key | string | | Column source key, example: `createdByUser.displayName` |
+| sortable | boolean | false | Toggle sorting ability via column header clicks |
+| class | string | | CSS class list, example: `full-width ellipsis-cell` |
 | type | string | text | Column type, text\|date\|number |
 | format | string | | Value format pattern |
 
@@ -257,14 +222,12 @@ You can define both folder and document actions at the same time.
 
         <content-action
             target="document"
-            type="menu"
             title="System action"
             handler="system2">
         </content-action>
 
         <content-action
             target="document"
-            type="menu"
             title="Custom action"
             (execute)="myCustomAction1($event)">
         </content-action>
@@ -278,12 +241,13 @@ export class MyView {
     // ...
 
     myCustomAction1(event) {
-        alert('Custom document action for ' + event.value.displayName);
+        let entry = event.value.entry;
+        alert(`Custom document action for ${entry.name}`);
     }
 }
 ```
 
-All document actions with `type="menu"` are rendered as a dropdown menu as on the picture below:
+All document actions are rendered as a dropdown menu as on the picture below:
 
 ![Document Actions](docs/assets/document-actions.png)
 
@@ -292,8 +256,8 @@ All document actions with `type="menu"` are rendered as a dropdown menu as on th
 
 The following action handlers are provided out-of-box:
 
-- Download (document)
-- Delete (document, folder)
+- **Download** (document)
+- **Delete** (document, folder)
 
 All system handler names are case-insensitive, `handler="download"` and `handler="DOWNLOAD"`
 will trigger the same `download` action.
@@ -308,7 +272,6 @@ Initiates download of the corresponding document file.
 
         <content-action
             target="document"
-            type="menu"
             title="Download"
             handler="download">
         </content-action>
@@ -320,36 +283,6 @@ Initiates download of the corresponding document file.
 ![Download document action](docs/assets/document-action-download.png)
 
 
-#### Document action buttons
-
-It is also possible to display most frequent actions within a separate buttons panel:
-
-```html
-<alfresco-document-list ...>
-    <content-actions>
-
-        <content-action
-            target="document"
-            type="button"
-            icon="extension"
-            handler="system1">
-        </content-action>
-
-        <content-action
-            target="document"
-            type="button"
-            icon="thumb_up"
-            handler="system2">
-        </content-action>
-
-    </content-actions>
-</alfresco-document-list>
-```
-
-Button actions provide same support for system and custom handlers.
-
-![Quick document Actions](docs/assets/quick-document-actions.png)
-
 #### Folder actions
 
 Folder actions have the same declaration as document actions except ```taget="folder"``` attribute value.
@@ -360,14 +293,12 @@ Folder actions have the same declaration as document actions except ```taget="fo
 
         <content-action
             target="folder"
-            type="menu"
             title="Default folder action 1"
             handler="system1">
         </content-action>
 
         <content-action
             target="folder"
-            type="menu"
             title="Custom folder action"
             (execute)="myFolderAction1($event)">
         </content-action>
@@ -381,40 +312,18 @@ export class MyView {
     // ...
 
     myFolderAction1(event) {
-        alert('Custom folder action for ' + event.value.displayName);
+        let entry = event.value.entry;
+        alert(`Custom folder action for ${entry.name}`);
     }
 }
 ```
 
 ![Folder Actions](docs/assets/folder-actions.png)
 
-#### Folder action buttons
-
-Every folder action is rendered as a separate button.
-
-```html
-<alfresco-document-list ...>
-    <content-actions>
-
-        <content-action
-            target="folder"
-            type="button"
-            icon="delete"
-            title="Delete"
-            handler="system1">
-        </content-action>
-
-    </content-actions>
-</alfresco-document-list>
-```
-
-![Quick folder Actions](docs/assets/quick-folder-actions.png)
-
-
 ### Context Menu
 
 DocumentList also provide integration for 'Context Menu Service' from the 
-`ng2-alfresco-core` library.
+[ng2-alfresco-core](https://www.npmjs.com/package/ng2-alfresco-core) library.
 
 You can automatically turn all menu actions (for the files and folders) 
 into context menu items like shown below:
@@ -453,18 +362,18 @@ This enables context menu items for documents and folders.
 
 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 Google Drive behaviour). However it is possible switching to 
+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:
 
 ```html
-<alfresco-document-list navigation-mode="click">
+<alfresco-document-list [navigationMode]="'click'">
 </alfresco-document-list>
 ```
 
@@ -474,82 +383,11 @@ Document List emits the following events:
 
 | Name | Description |
 | --- | --- |
-| itemClick | emitted when user clicks a document list entry |
-| itemDblClick | emitted when user double-clicks document a document list entry |
+| 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  |
 
-### itemClick event
-
-Emitted when user clicks on document or folder.
-
-```html
-<alfresco-document-list (itemClick)="onItemClick($event)">
-</alfresco-document-list>
-```
-
-```ts
-export class MyView {
-    ...
-    onItemClick(e) {
-        console.log(e.value);
-    }
-}
-```
-
-For the event `value` the full node info is provided, i.e.:
-
-```json
-{
-   "nodeRef": "workspace://SpacesStore/8bb36efb-c26d-4d2b-9199-ab6922f53c28",
-   "nodeType": "cm:folder",
-   "type": "folder",
-   "mimetype": "",
-   "isFolder": true,
-   "isLink": false,
-   "fileName": "Agency Files",
-   "displayName": "Agency Files",
-   "status": "",
-   "title": "Agency related files",
-   "description": "This folder holds the agency related files for the project",
-   "author": "",
-   "createdOn": "2011-02-15T20:47:03.951Z",
-   "createdBy": "Mike Jackson",
-   "createdByUser": "mjackson",
-   "modifiedOn": "2011-02-15T21:00:43.616Z",
-   "modifiedBy": "Mike Jackson",
-   "modifiedByUser": "mjackson"
-}
-```
-
-_The content of the json above was reduced for the sake of simplicity._
-
-### folderChange event
-
-This event is emitted every time current folder is changed. 
-Event handler gets the following data available:
-
-- folder
-- absolutePath
-- relativePath
-
-```html
-<alfresco-document-list 
-    (folderchange)="onFolderChanged($event)">
-</alfresco-document-list>
-```
-
-```ts
-export class MyView {
-    ...
-    onFolderChanged(e) {
-        console.log(e.value);
-        console.log(e.absolutePath);
-        console.log(e.relativePath);
-    }
-}
-```
-
 ## Advanced usage and customization
 
 ### Hiding columns on small screens
@@ -577,23 +415,23 @@ Now you can declare columns and assign `desktop-only` class where needed:
         
         <!-- always visible columns -->
         
-        <content-column source="$thumbnail" type="image"></content-column>
+        <content-column key="$thumbnail" type="image"></content-column>
         <content-column 
                 title="Name" 
-                source="name" 
-                class="full-width name-column">
+                key="name" 
+                class="full-width ellipsis-cell">
         </content-column>
         
         <!-- desktop-only columns -->
         
         <content-column
                 title="Created by"
-                source="createdByUser.displayName"
+                key="createdByUser.displayName"
                 class="desktop-only">
         </content-column>
         <content-column
                 title="Created on"
-                source="createdAt"
+                key="createdAt"
                 type="date"
                 format="medium"
                 class="desktop-only">
@@ -632,7 +470,6 @@ That will give the following output:
 
 ![Custom empty folder](docs/assets/empty-folder-template-custom.png)
 
-
 ### Customizing default actions
 
 It is possible extending or replacing the list of available system actions for documents and folders.
@@ -650,8 +487,7 @@ Example below demonstrates how a new action handler can be registered with the
 
         <content-action
             target="document"
-            type="button"
-            icon="account_circle"
+            title="My action"
             handler="my-handler">
         </content-action>
 
@@ -682,12 +518,6 @@ export class MyView {
 }
 ```
 
-![Custom handler 1](docs/assets/custom-doc-handler-1.png?raw=true)
-
-Upon execution users will see the following dialog:
-
-![Custom handler 2](docs/assets/custom-doc-handler-2.png)
-
 The same approach allows changing the way out-of-box action handlers behave.
 Registering custom action with the name `download` replaces default one:
 
@@ -712,7 +542,7 @@ by means of custom application service.
 
 ## Build from sources
 
-Alternatively you can build component from sources with the following commands:
+You can build component from sources with the following commands:
 
 ```sh
 npm install

ng2-components/ng2-alfresco-documentlist/demo/src/main.ts

@@ -143,8 +143,8 @@ class DocumentListDemo implements OnInit {
     currentPath: string = '/';
     authenticated: boolean;
 
-    // host: string = 'http://devproducts-platform.alfresco.me';
-    host: string = 'http://127.0.0.1:8080';
+    host: string = 'http://devproducts-platform.alfresco.me';
+    // host: string = 'http://127.0.0.1:8080';
 
     token: string;