From 0bc0acda764a69dd9a7b1363252568af097ab437 Mon Sep 17 00:00:00 2001
From: Vito Albano <valbano@MacPro.local>
Date: Tue, 20 Sep 2016 12:37:53 +0100
Subject: [PATCH 01/29] Fixed unreliable tests for widgetVisibility

---
 .../widget-visibility.service.spec.ts         | 191 +++++++++---------
 .../src/services/widget-visibility.service.ts |   5 +-
 2 files changed, 94 insertions(+), 102 deletions(-)

diff --git a/ng2-components/ng2-activiti-form/src/services/widget-visibility.service.spec.ts b/ng2-components/ng2-activiti-form/src/services/widget-visibility.service.spec.ts
index 53f7a14ebc..7e5fc16ff5 100644
--- a/ng2-components/ng2-activiti-form/src/services/widget-visibility.service.spec.ts
+++ b/ng2-components/ng2-activiti-form/src/services/widget-visibility.service.spec.ts
@@ -205,11 +205,14 @@ describe('WidgetVisibilityService', () => {
         expect(res).toBeFalsy();
     });
 
-    /*
+
     it('should be able to retrieve the value of a process variable', (done) => {
        service.getTaskProcessVariableModelsForTask(9999).subscribe(
             (res: TaskProcessVariableModel[]) => {
-                done();
+               let varValue = service.getValueFromVariable(formTest, 'TEST_VAR_1');
+               expect(varValue).not.toBeUndefined();
+               expect(varValue).toBe('test_value_1');
+               done();
             }
        );
        jasmine.Ajax.requests.mostRecent().respondWith({
@@ -217,14 +220,7 @@ describe('WidgetVisibilityService', () => {
            contentType: 'application/json',
            responseText: JSON.stringify(fakeTaskProcessVariableModels)
        });
-
-
-       let varValue = service.getValueFromVariable(formTest, 'TEST_VAR_1');
-
-       expect(varValue).not.toBe(null);
-       expect(varValue).toBe('test_value_1');
-   });
-   */
+    });
 
     it('should be able to retrieve the value of a form variable', () => {
        let fakeForm = new FormModel({variables: [
@@ -234,15 +230,17 @@ describe('WidgetVisibilityService', () => {
                                               ]});
        let varValue = service.getValueFromVariable(fakeForm, 'FORM_VARIABLE_TEST');
 
-       expect(varValue).not.toBe(null);
+       expect(varValue).not.toBeUndefined();
        expect(varValue).toBe('form_value_test');
-   });
+    });
+
 
-    /*
     it('should return null if the variable does not exist', (done) => {
        service.getTaskProcessVariableModelsForTask(9999).subscribe(
             (res: TaskProcessVariableModel[]) => {
-                done();
+               let varValue = service.getValueFromVariable(formTest, 'TEST_MYSTERY_VAR');
+               expect(varValue).toBeNull();
+               done();
             }
        );
        jasmine.Ajax.requests.mostRecent().respondWith({
@@ -251,36 +249,34 @@ describe('WidgetVisibilityService', () => {
            responseText: JSON.stringify(fakeTaskProcessVariableModels)
        });
 
-       let varValue = service.getValueFromVariable(formTest, 'TEST_MYSTERY_VAR');
 
-       expect(varValue).toBe(null);
-   });
-   */
+    });
+
 
     it('should be able to retrieve a field value searching in the form', () => {
        let stubFormWithFields = new FormModel(fakeFormJson);
        let formValue = service.getFormValueByName(stubFormWithFields, 'FIELD_WITH_CONDITION');
 
-       expect(formValue).not.toBe(null);
+       expect(formValue).not.toBeNull();
        expect(formValue).toBe('field_with_condition_value');
-   });
+    });
 
     it('should return null if the field value is not in the form', () => {
        let stubFormWithFields = new FormModel(fakeFormJson);
 
        let formValue = service.getFormValueByName(stubFormWithFields, 'FIELD_MYSTERY');
 
-       expect(formValue).toBe(null);
-   });
+       expect(formValue).toBeNull();
+    });
 
     it('should take the value from form values if it is present', () => {
        formTest.values = formValues;
 
        let formValue = service.getValueOField(formTest, 'test_1');
 
-       expect(formValue).not.toBe(null);
+       expect(formValue).not.toBeNull();
        expect(formValue).toBe('value_1');
-   });
+    });
 
     it('should search in the form if element value is not in form values', () => {
        let fakeFormWithField = new FormModel(fakeFormJson);
@@ -288,9 +284,9 @@ describe('WidgetVisibilityService', () => {
 
        let value = service.getValueOField(fakeFormWithField, 'FIELD_WITH_CONDITION');
 
-       expect(value).not.toBe(null);
+       expect(value).not.toBeNull();
        expect(value).toBe('field_with_condition_value');
-   });
+    });
 
     it('should return null if the element is not present anywhere', () => {
        let fakeFormWithField = new FormModel(fakeFormJson);
@@ -298,8 +294,8 @@ describe('WidgetVisibilityService', () => {
 
        let formValue = service.getValueOField(fakeFormWithField, 'FIELD_MYSTERY');
 
-       expect(formValue).toBe(null);
-   });
+       expect(formValue).toBeNull();
+    });
 
     it('should retrieve the value for the right field when it is a value', () => {
        let visibilityObjTest = new WidgetVisibilityModel();
@@ -308,13 +304,19 @@ describe('WidgetVisibilityService', () => {
        let rightValue = service.getRightValue(formTest, visibilityObjTest);
 
        expect(rightValue).toBe('100');
-   });
+    });
 
-    /*
     it('should retrieve the value for the right field when it is a process variable', (done) => {
        service.getTaskProcessVariableModelsForTask(9999).subscribe(
             (res: TaskProcessVariableModel[]) => {
-                done();
+                   let visibilityObjTest = new WidgetVisibilityModel();
+                   visibilityObjTest.rightRestResponseId = 'TEST_VAR_2';
+
+                   let rightValue = service.getRightValue(formTest, visibilityObjTest);
+
+                   expect(rightValue).not.toBeNull();
+                   expect(rightValue).toBe('test_value_2');
+                   done();
             }
        );
        jasmine.Ajax.requests.mostRecent().respondWith({
@@ -322,15 +324,7 @@ describe('WidgetVisibilityService', () => {
            contentType: 'application/json',
            responseText: JSON.stringify(fakeTaskProcessVariableModels)
        });
-       let visibilityObjTest = new WidgetVisibilityModel();
-       visibilityObjTest.rightRestResponseId = 'TEST_VAR_2';
-
-       let rightValue = service.getRightValue(formTest, visibilityObjTest);
-
-       expect(rightValue).not.toBe(null);
-       expect(rightValue).toBe('test_value_2');
-   });
-   */
+    });
 
     it('should retrieve the value for the right field when it is a form variable', () => {
        let fakeFormWithField = new FormModel(fakeFormJson);
@@ -339,9 +333,9 @@ describe('WidgetVisibilityService', () => {
 
        let rightValue = service.getRightValue(fakeFormWithField, visibilityObjTest);
 
-       expect(rightValue).not.toBe(null);
+       expect(rightValue).not.toBeNull();
        expect(rightValue).toBe('RIGHT_FORM_FIELD_VALUE');
-   });
+    });
 
     it('should retrieve right value from form values if it is present', () => {
        formTest.values = formValues;
@@ -350,10 +344,10 @@ describe('WidgetVisibilityService', () => {
 
        let rightValue = service.getRightValue(formTest, visibilityObjTest);
 
-       expect(rightValue).not.toBe(null);
+       expect(rightValue).not.toBeNull();
        expect(formTest.values).toEqual(formValues);
        expect(rightValue).toBe('value_2');
-   });
+    });
 
     it('should return null for a value that is not on variable or form', () => {
        let fakeFormWithField = new FormModel(fakeFormJson);
@@ -363,14 +357,20 @@ describe('WidgetVisibilityService', () => {
 
        let rightValue = service.getRightValue(fakeFormWithField, visibilityObjTest);
 
-       expect(rightValue).toBe(null);
-   });
+       expect(rightValue).toBeNull();
+    });
 
-    /*
     it('should retrieve the value for the left field when it is a process variable', (variableUpdated) => {
        service.getTaskProcessVariableModelsForTask(9999).subscribe(
             (res: TaskProcessVariableModel[]) => {
-                variableUpdated();
+               let visibilityObjTest = new WidgetVisibilityModel();
+               visibilityObjTest.leftRestResponseId = 'TEST_VAR_2';
+
+               let rightValue = service.getLeftValue(formTest, visibilityObjTest);
+
+               expect(rightValue).not.toBeNull();
+               expect(rightValue).toBe('test_value_2');
+               variableUpdated();
             }
        );
        jasmine.Ajax.requests.mostRecent().respondWith({
@@ -378,15 +378,7 @@ describe('WidgetVisibilityService', () => {
            contentType: 'application/json',
            responseText: JSON.stringify(fakeTaskProcessVariableModels)
        });
-       let visibilityObjTest = new WidgetVisibilityModel();
-       visibilityObjTest.leftRestResponseId = 'TEST_VAR_2';
-
-       let rightValue = service.getLeftValue(formTest, visibilityObjTest);
-
-       expect(rightValue).not.toBe(null);
-       expect(rightValue).toBe('test_value_2');
-   });
-   */
+    });
 
     it('should retrieve the value for the left field when it is a form variable', () => {
        let fakeForm = new FormModel({variables: [
@@ -399,9 +391,9 @@ describe('WidgetVisibilityService', () => {
 
        let leftValue = service.getLeftValue(fakeForm, visibilityObjTest);
 
-       expect(leftValue).not.toBe(null);
+       expect(leftValue).not.toBeNull();
        expect(leftValue).toBe('form_value_test');
-   });
+    });
 
     it('should retrieve the value for the left field when it is a form value', () => {
        let fakeFormWithField = new FormModel(fakeFormJson);
@@ -410,9 +402,9 @@ describe('WidgetVisibilityService', () => {
 
        let leftValue = service.getLeftValue(fakeFormWithField, visibilityObjTest);
 
-       expect(leftValue).not.toBe(null);
+       expect(leftValue).not.toBeNull();
        expect(leftValue).toBe('field_with_condition_value');
-   });
+    });
 
     it('should retrieve left value from form values if it is present', () => {
        formTest.values = formValues;
@@ -421,9 +413,9 @@ describe('WidgetVisibilityService', () => {
 
        let leftValue = service.getLeftValue(formTest, visibilityObjTest);
 
-       expect(leftValue).not.toBe(null);
+       expect(leftValue).not.toBeNull();
        expect(leftValue).toBe('value_2');
-   });
+    });
 
     it('should return null for a value that is not on variable or form', () => {
        let fakeFormWithField = new FormModel(fakeFormJson);
@@ -431,8 +423,8 @@ describe('WidgetVisibilityService', () => {
 
        let leftValue = service.getLeftValue(fakeFormWithField, visibilityObjTest);
 
-       expect(leftValue).toBe(null);
-   });
+       expect(leftValue).toBeNull();
+    });
 
     it('should evaluate the visibility for the field with single visibility condition between two field values', () => {
        formTest.values = formValues;
@@ -444,7 +436,7 @@ describe('WidgetVisibilityService', () => {
        let isVisible = service.evaluateVisibilityForField(formTest, visibilityObjTest);
 
        expect(isVisible).toBeTruthy();
-   });
+    });
 
     it('should evaluate true visibility for the field with single visibility condition between a field and a value', () => {
        formTest.values = formValues;
@@ -456,7 +448,7 @@ describe('WidgetVisibilityService', () => {
        let isVisible = service.evaluateVisibilityForField(formTest, visibilityObjTest);
 
        expect(isVisible).toBeTruthy();
-   });
+    });
 
     it('should evaluate the visibility for the field with single visibility condition between form values', () => {
        let fakeFormWithField = new FormModel(fakeFormJson);
@@ -468,13 +460,21 @@ describe('WidgetVisibilityService', () => {
        let isVisible = service.evaluateVisibilityForField(fakeFormWithField, visibilityObjTest);
 
        expect(isVisible).toBeTruthy();
-   });
+    });
 
-    /*
     it('should evaluate the visibility for the field between form value and process var', (varReady) => {
        service.getTaskProcessVariableModelsForTask(9999).subscribe(
             (res: TaskProcessVariableModel[]) => {
-                varReady();
+               let fakeFormWithField = new FormModel(fakeFormJson);
+               let visibilityObjTest = new WidgetVisibilityModel();
+               visibilityObjTest.leftFormFieldId = 'LEFT_FORM_FIELD_ID';
+               visibilityObjTest.operator = '!=';
+               visibilityObjTest.rightRestResponseId = 'TEST_VAR_2';
+
+               let isVisible = service.evaluateVisibilityForField(fakeFormWithField, visibilityObjTest);
+
+               expect(isVisible).toBeTruthy();
+               varReady();
             }
        );
        jasmine.Ajax.requests.mostRecent().respondWith({
@@ -482,23 +482,27 @@ describe('WidgetVisibilityService', () => {
            contentType: 'application/json',
            responseText: JSON.stringify(fakeTaskProcessVariableModels)
        });
-       let fakeFormWithField = new FormModel(fakeFormJson);
-       let visibilityObjTest = new WidgetVisibilityModel();
-       visibilityObjTest.leftFormFieldId = 'LEFT_FORM_FIELD_ID';
-       visibilityObjTest.operator = '!=';
-       visibilityObjTest.rightRestResponseId = 'TEST_VAR_2';
+    });
 
-       let isVisible = service.evaluateVisibilityForField(fakeFormWithField, visibilityObjTest);
 
-       expect(isVisible).toBeTruthy();
-   });
-   */
-
-    /*
     it('should evaluate visibility with multiple conditions', (ready) => {
        service.getTaskProcessVariableModelsForTask(9999).subscribe(
             (res: TaskProcessVariableModel[]) => {
-                ready();
+               let fakeFormWithField = new FormModel(fakeFormJson);
+               let visibilityObjTest = new WidgetVisibilityModel();
+               let chainedVisibilityObj = new WidgetVisibilityModel();
+               visibilityObjTest.leftFormFieldId = 'LEFT_FORM_FIELD_ID';
+               visibilityObjTest.operator = '!=';
+               visibilityObjTest.rightRestResponseId = 'TEST_VAR_2';
+               visibilityObjTest.nextConditionOperator = 'and';
+               chainedVisibilityObj.leftRestResponseId = 'TEST_VAR_2';
+               chainedVisibilityObj.operator = '!empty';
+               visibilityObjTest.nextCondition = chainedVisibilityObj;
+
+               let isVisible = service.evaluateVisibilityForField(fakeFormWithField, visibilityObjTest);
+
+               expect(isVisible).toBeTruthy();
+               ready();
             }
        );
        jasmine.Ajax.requests.mostRecent().respondWith({
@@ -506,22 +510,7 @@ describe('WidgetVisibilityService', () => {
            contentType: 'application/json',
            responseText: JSON.stringify(fakeTaskProcessVariableModels)
        });
-       let fakeFormWithField = new FormModel(fakeFormJson);
-       let visibilityObjTest = new WidgetVisibilityModel();
-       let chainedVisibilityObj = new WidgetVisibilityModel();
-       visibilityObjTest.leftFormFieldId = 'LEFT_FORM_FIELD_ID';
-       visibilityObjTest.operator = '!=';
-       visibilityObjTest.rightRestResponseId = 'TEST_VAR_2';
-       visibilityObjTest.nextConditionOperator = 'and';
-       chainedVisibilityObj.leftRestResponseId = 'TEST_VAR_2';
-       chainedVisibilityObj.operator = '!empty';
-       visibilityObjTest.nextCondition = chainedVisibilityObj;
-
-       let isVisible = service.evaluateVisibilityForField(fakeFormWithField, visibilityObjTest);
-
-       expect(isVisible).toBeTruthy();
-   });
-   */
+    });
 
     it('should return true when the visibility condition is not valid', () => {
        let visibilityObjTest = new WidgetVisibilityModel();
@@ -532,7 +521,7 @@ describe('WidgetVisibilityService', () => {
        let isVisible = service.getVisiblityForField(formTest, visibilityObjTest);
 
        expect(isVisible).toBeTruthy();
-   });
+    });
 
     it('should refresh the visibility for a form field object', () => {
        let fakeFormWithField = new FormModel(fakeFormJson);
@@ -547,7 +536,7 @@ describe('WidgetVisibilityService', () => {
        service.refreshVisibilityForField(fakeFormField);
 
        expect(fakeFormField.isVisible).toBeFalsy();
-   });
+    });
 
     it('should not change the isVisible if field does not have visibility condition', () => {
        let fakeFormWithField = new FormModel(fakeFormJson);
@@ -559,5 +548,5 @@ describe('WidgetVisibilityService', () => {
        fakeFormField.isVisible = false;
        service.refreshVisibilityForField(fakeFormField);
        expect(fakeFormField.isVisible).toBeFalsy();
-   });
+    });
 });
diff --git a/ng2-components/ng2-activiti-form/src/services/widget-visibility.service.ts b/ng2-components/ng2-activiti-form/src/services/widget-visibility.service.ts
index 56249235b4..04de51d00b 100644
--- a/ng2-components/ng2-activiti-form/src/services/widget-visibility.service.ts
+++ b/ng2-components/ng2-activiti-form/src/services/widget-visibility.service.ts
@@ -120,7 +120,10 @@ export class WidgetVisibilityService {
     }
 
     private getValueFromVariable(form: FormModel, name: string) {
-       let formVariable = form.json.variables.find(formVar => formVar.name === name);
+       let formVariable;
+       if ( form.json.variables ) {
+         formVariable = form.json.variables.find(formVar => formVar.name === name);
+       }
        if ( !formVariable && this.processVarList ) {
          formVariable = this.processVarList.find(variable => variable.id === name);
        }

From f9bb489963a488f6a9d17efd1b2ea6487e771699 Mon Sep 17 00:00:00 2001
From: Vito Albano <valbano@MacPro.local>
Date: Tue, 20 Sep 2016 13:48:35 +0100
Subject: [PATCH 02/29] Fixed tslint error

---
 .../src/components/widgets/upload/upload.widget.ts           | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.ts
index 0e6e66e98c..f9eff7d18d 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.ts
@@ -30,13 +30,14 @@ declare var componentHandler;
 })
 export class UploadWidget extends WidgetComponent implements OnInit {
 
+    hasFile: boolean;
+    fileName: string;
+
     constructor(private settingsService: AlfrescoSettingsService,
                 private authService: AlfrescoAuthenticationService) {
         super();
     }
 
-    hasFile: boolean;
-    fileName: string;
 
     ngOnInit() {
         if (this.field &&

From a2b707b316d8f22aeb3fdeba9829254b331af0fe Mon Sep 17 00:00:00 2001
From: Mario Romano <dnamario@hotmail.com>
Date: Tue, 20 Sep 2016 12:35:12 +0100
Subject: [PATCH 03/29] remove typings from script

---
 scripts/npm-link-demo-shell.sh | 1 -
 1 file changed, 1 deletion(-)

diff --git a/scripts/npm-link-demo-shell.sh b/scripts/npm-link-demo-shell.sh
index 290197f433..d286f950e5 100755
--- a/scripts/npm-link-demo-shell.sh
+++ b/scripts/npm-link-demo-shell.sh
@@ -70,7 +70,6 @@ echo "====== linking component: ng2-alfresco-tag ====="
 cd "$DIR/../ng2-components/ng2-alfresco-tag"
 npm link ng2-alfresco-core
 npm link
-npm run typings
 npm run build
 
 #LINK ALL THE OTHERS COMPONENTS

From c749a2b5cd2a684dd9fc9b003a3069e66fe00041 Mon Sep 17 00:00:00 2001
From: Mario Romano <dnamario@hotmail.com>
Date: Tue, 20 Sep 2016 12:36:43 +0100
Subject: [PATCH 04/29] remove typings from script

---
 scripts/npm-link-demo-shell.sh | 2 --
 1 file changed, 2 deletions(-)

diff --git a/scripts/npm-link-demo-shell.sh b/scripts/npm-link-demo-shell.sh
index d286f950e5..c42c0d1740 100755
--- a/scripts/npm-link-demo-shell.sh
+++ b/scripts/npm-link-demo-shell.sh
@@ -2,8 +2,6 @@
 
 DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
 
-npm install -g typings
-
 #LINK CORE
 echo "====== linking component: ng2-alfresco-core ====="
 cd "$DIR/../ng2-components/ng2-alfresco-core"

From 7bd7432371205d0a3680c9af8fcdaa28c8c097ce Mon Sep 17 00:00:00 2001
From: Mario Romano <dnamario@hotmail.com>
Date: Tue, 20 Sep 2016 16:45:56 +0100
Subject: [PATCH 05/29] Update README.md

---
 README.md | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index a079dca669..325dec0ca1 100644
--- a/README.md
+++ b/README.md
@@ -47,18 +47,8 @@ necessary configuration, see this [page](PREREQUISITES.md).
 
 ## Components
 
-The following is a list of some of the components that you can use when building your custom Alfresco web client:
-
-- [Core library](ng2-components/ng2-alfresco-core/README.md)
-- [DataTable](ng2-components/ng2-alfresco-datatable/README.md)
-- [DocumentList](ng2-components/ng2-alfresco-documentlist/README.md)
-- Activiti [ProcessList](ng2-components/ng2-activiti-processlist/README.md) and [TaskList](ng2-components/ng2-activiti-tasklist/README.md)
-- [Activiti Form](ng2-components/ng2-activiti-form/README.md)
-- [Viewer](ng2-components/ng2-alfresco-viewer/README.md)
-- [Login](ng2-components/ng2-alfresco-login/README.md)
-- [Upload](ng2-components/ng2-alfresco-upload/README.md)
-- [Webscript viewer](ng2-components/ng2-alfresco-webscript/README.md)
-- [Tag list and controls](ng2-components/ng2-alfresco-tag/README.md)
+To view the complete list of all the components that you can use to build your custom Alfresco (ECM,BPM) client follow this link:
+[Components](https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-components).
 
 You can browse all the components at the following [page](http://devproducts.alfresco.com/).
 

From 4b1ee98e82cf73770f6b88ecb82041f4c4691ef6 Mon Sep 17 00:00:00 2001
From: Mario Romano <dnamario@hotmail.com>
Date: Tue, 20 Sep 2016 16:52:01 +0100
Subject: [PATCH 06/29] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 325dec0ca1..f4cbce400d 100644
--- a/README.md
+++ b/README.md
@@ -48,7 +48,7 @@ necessary configuration, see this [page](PREREQUISITES.md).
 ## Components
 
 To view the complete list of all the components that you can use to build your custom Alfresco (ECM,BPM) client follow this link:
-[Components](https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-components).
+[Components](/ng2-components).
 
 You can browse all the components at the following [page](http://devproducts.alfresco.com/).
 

From bb4ed53d3a56dfab226bc6fb80813dc366eb540f Mon Sep 17 00:00:00 2001
From: Mario Romano <dnamario@hotmail.com>
Date: Tue, 20 Sep 2016 16:53:00 +0100
Subject: [PATCH 07/29] Update README.md

---
 ng2-components/README.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/ng2-components/README.md b/ng2-components/README.md
index f20200fb5d..56ef91ae5f 100644
--- a/ng2-components/README.md
+++ b/ng2-components/README.md
@@ -42,11 +42,12 @@
 - [Viewer](ng2-alfresco-viewer/README.md)
 - [Login](ng2-alfresco-login/README.md)
 - [Upload](ng2-alfresco-upload/README.md)
-- [Webscript Viewer](ng2-components/ng2-alfresco-webscript/README.md)
-- [Tag list and controls](ng2-components/ng2-alfresco-tag/README.md)
+- [Webscript Viewer](ng2-alfresco-webscript/README.md)
+- [Tag list and controls](ng2-alfresco-tag/README.md)
 
 ## BPM components
 
+- [TaskList](ng2-activiti-tasklist/README.md)
 - [ProcessList](ng2-activiti-processlist/README.md)
 - [Form](ng2-activiti-form/README.md)
 

From 8f6a9fb03be84f81c6a1acb77813d4eae23380a3 Mon Sep 17 00:00:00 2001
From: Vito Albano <valbano@MacPro.local>
Date: Tue, 20 Sep 2016 17:39:48 +0100
Subject: [PATCH 08/29] Added some improvements, and fixed some name in the
 specs

---
 .../widget-visibility.service.spec.ts         | 19 ++++-----
 .../src/services/widget-visibility.service.ts | 39 ++++++++++++-------
 2 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/ng2-components/ng2-activiti-form/src/services/widget-visibility.service.spec.ts b/ng2-components/ng2-activiti-form/src/services/widget-visibility.service.spec.ts
index 7e5fc16ff5..b471335c30 100644
--- a/ng2-components/ng2-activiti-form/src/services/widget-visibility.service.spec.ts
+++ b/ng2-components/ng2-activiti-form/src/services/widget-visibility.service.spec.ts
@@ -209,7 +209,8 @@ describe('WidgetVisibilityService', () => {
     it('should be able to retrieve the value of a process variable', (done) => {
        service.getTaskProcessVariableModelsForTask(9999).subscribe(
             (res: TaskProcessVariableModel[]) => {
-               let varValue = service.getValueFromVariable(formTest, 'TEST_VAR_1');
+               expect(res).toBeDefined();
+               let varValue = service.getValueFromVariable(formTest, 'TEST_VAR_1', res);
                expect(varValue).not.toBeUndefined();
                expect(varValue).toBe('test_value_1');
                done();
@@ -228,7 +229,7 @@ describe('WidgetVisibilityService', () => {
                                                   type: 'string',
                                                   value: 'form_value_test' }
                                               ]});
-       let varValue = service.getValueFromVariable(fakeForm, 'FORM_VARIABLE_TEST');
+       let varValue = service.getValueFromVariable(fakeForm, 'FORM_VARIABLE_TEST', null);
 
        expect(varValue).not.toBeUndefined();
        expect(varValue).toBe('form_value_test');
@@ -238,7 +239,7 @@ describe('WidgetVisibilityService', () => {
     it('should return null if the variable does not exist', (done) => {
        service.getTaskProcessVariableModelsForTask(9999).subscribe(
             (res: TaskProcessVariableModel[]) => {
-               let varValue = service.getValueFromVariable(formTest, 'TEST_MYSTERY_VAR');
+               let varValue = service.getValueFromVariable(formTest, 'TEST_MYSTERY_VAR', res);
                expect(varValue).toBeNull();
                done();
             }
@@ -360,7 +361,7 @@ describe('WidgetVisibilityService', () => {
        expect(rightValue).toBeNull();
     });
 
-    it('should retrieve the value for the left field when it is a process variable', (variableUpdated) => {
+    it('should retrieve the value for the left field when it is a process variable', (done) => {
        service.getTaskProcessVariableModelsForTask(9999).subscribe(
             (res: TaskProcessVariableModel[]) => {
                let visibilityObjTest = new WidgetVisibilityModel();
@@ -370,7 +371,7 @@ describe('WidgetVisibilityService', () => {
 
                expect(rightValue).not.toBeNull();
                expect(rightValue).toBe('test_value_2');
-               variableUpdated();
+               done();
             }
        );
        jasmine.Ajax.requests.mostRecent().respondWith({
@@ -462,7 +463,7 @@ describe('WidgetVisibilityService', () => {
        expect(isVisible).toBeTruthy();
     });
 
-    it('should evaluate the visibility for the field between form value and process var', (varReady) => {
+    it('should evaluate the visibility for the field between form value and process var', (done) => {
        service.getTaskProcessVariableModelsForTask(9999).subscribe(
             (res: TaskProcessVariableModel[]) => {
                let fakeFormWithField = new FormModel(fakeFormJson);
@@ -474,7 +475,7 @@ describe('WidgetVisibilityService', () => {
                let isVisible = service.evaluateVisibilityForField(fakeFormWithField, visibilityObjTest);
 
                expect(isVisible).toBeTruthy();
-               varReady();
+               done();
             }
        );
        jasmine.Ajax.requests.mostRecent().respondWith({
@@ -485,7 +486,7 @@ describe('WidgetVisibilityService', () => {
     });
 
 
-    it('should evaluate visibility with multiple conditions', (ready) => {
+    it('should evaluate visibility with multiple conditions', (done) => {
        service.getTaskProcessVariableModelsForTask(9999).subscribe(
             (res: TaskProcessVariableModel[]) => {
                let fakeFormWithField = new FormModel(fakeFormJson);
@@ -502,7 +503,7 @@ describe('WidgetVisibilityService', () => {
                let isVisible = service.evaluateVisibilityForField(fakeFormWithField, visibilityObjTest);
 
                expect(isVisible).toBeTruthy();
-               ready();
+               done();
             }
        );
        jasmine.Ajax.requests.mostRecent().respondWith({
diff --git a/ng2-components/ng2-activiti-form/src/services/widget-visibility.service.ts b/ng2-components/ng2-activiti-form/src/services/widget-visibility.service.ts
index 04de51d00b..e53c2a1c33 100644
--- a/ng2-components/ng2-activiti-form/src/services/widget-visibility.service.ts
+++ b/ng2-components/ng2-activiti-form/src/services/widget-visibility.service.ts
@@ -81,7 +81,7 @@ export class WidgetVisibilityService {
 
     private getLeftValue(form: FormModel, visibilityObj: WidgetVisibilityModel) {
         if ( visibilityObj.leftRestResponseId ) {
-            return this.getValueFromVariable(form, visibilityObj.leftRestResponseId);
+            return this.getValueFromVariable(form, visibilityObj.leftRestResponseId, this.processVarList);
         }
         return this.getValueOField(form, visibilityObj.leftFormFieldId);
     }
@@ -89,7 +89,7 @@ export class WidgetVisibilityService {
     private getRightValue(form: FormModel, visibilityObj: WidgetVisibilityModel) {
         let valueFound = null;
         if ( visibilityObj.rightRestResponseId ) {
-            valueFound = this.getValueFromVariable(form, visibilityObj.rightRestResponseId);
+            valueFound = this.getValueFromVariable(form, visibilityObj.rightRestResponseId, this.processVarList);
         }else if ( visibilityObj.rightFormFieldId ) {
              valueFound = this.getValueOField(form, visibilityObj.rightFormFieldId);
         }else {
@@ -119,18 +119,29 @@ export class WidgetVisibilityService {
        return null;
     }
 
-    private getValueFromVariable(form: FormModel, name: string) {
-       let formVariable;
-       if ( form.json.variables ) {
-         formVariable = form.json.variables.find(formVar => formVar.name === name);
-       }
-       if ( !formVariable && this.processVarList ) {
-         formVariable = this.processVarList.find(variable => variable.id === name);
-       }
-       if ( formVariable ) {
-         return formVariable.value;
-       }
-       return null;
+    private getValueFromVariable( form: FormModel, name: string, processVarList: TaskProcessVariableModel[] ) {
+        return this.getFormVariableValue(form, name) ||
+               this.getProcessVariableValue(name, processVarList);
+    }
+
+    private getFormVariableValue(form: FormModel, name: string ) {
+        if ( form.json.variables) {
+          let variableFromForm = form.json.variables.find(formVar => formVar.name === name);
+          if ( variableFromForm ) {
+            return variableFromForm.value;
+          }
+        }
+        return null;
+    }
+
+    private getProcessVariableValue(name: string, processVarList: TaskProcessVariableModel[]) {
+        if ( this.processVarList ) {
+          let variableFromProcess = this.processVarList.find(variable => variable.id === name);
+          if ( variableFromProcess ) {
+            return variableFromProcess.value;
+          }
+        }
+        return null;
     }
 
     private evaluateLogicalOperation(logicOp, previousValue, newValue): boolean {

From 6f24b884653f45c17fdf7112d565d7a8285419f8 Mon Sep 17 00:00:00 2001
From: Vito Albano <valbano@MacPro.local>
Date: Tue, 20 Sep 2016 17:59:39 +0100
Subject: [PATCH 09/29] Removed return null from methods

---
 .../src/services/widget-visibility.service.spec.ts          | 4 ++--
 .../src/services/widget-visibility.service.ts               | 6 ++----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/ng2-components/ng2-activiti-form/src/services/widget-visibility.service.spec.ts b/ng2-components/ng2-activiti-form/src/services/widget-visibility.service.spec.ts
index b471335c30..0f977049f9 100644
--- a/ng2-components/ng2-activiti-form/src/services/widget-visibility.service.spec.ts
+++ b/ng2-components/ng2-activiti-form/src/services/widget-visibility.service.spec.ts
@@ -236,11 +236,11 @@ describe('WidgetVisibilityService', () => {
     });
 
 
-    it('should return null if the variable does not exist', (done) => {
+    it('should return undefined if the variable does not exist', (done) => {
        service.getTaskProcessVariableModelsForTask(9999).subscribe(
             (res: TaskProcessVariableModel[]) => {
                let varValue = service.getValueFromVariable(formTest, 'TEST_MYSTERY_VAR', res);
-               expect(varValue).toBeNull();
+               expect(varValue).toBeUndefined();
                done();
             }
        );
diff --git a/ng2-components/ng2-activiti-form/src/services/widget-visibility.service.ts b/ng2-components/ng2-activiti-form/src/services/widget-visibility.service.ts
index e53c2a1c33..1446344cca 100644
--- a/ng2-components/ng2-activiti-form/src/services/widget-visibility.service.ts
+++ b/ng2-components/ng2-activiti-form/src/services/widget-visibility.service.ts
@@ -128,20 +128,18 @@ export class WidgetVisibilityService {
         if ( form.json.variables) {
           let variableFromForm = form.json.variables.find(formVar => formVar.name === name);
           if ( variableFromForm ) {
-            return variableFromForm.value;
+            return variableFromForm ? variableFromForm.value : variableFromForm;
           }
         }
-        return null;
     }
 
     private getProcessVariableValue(name: string, processVarList: TaskProcessVariableModel[]) {
         if ( this.processVarList ) {
           let variableFromProcess = this.processVarList.find(variable => variable.id === name);
           if ( variableFromProcess ) {
-            return variableFromProcess.value;
+            return variableFromProcess ? variableFromProcess.value : variableFromProcess;
           }
         }
-        return null;
     }
 
     private evaluateLogicalOperation(logicOp, previousValue, newValue): boolean {

From eba67fbcdf55adb5a8737484be6b2cf0e1f99c0f Mon Sep 17 00:00:00 2001
From: Vito Albano <valbano@MacPro.local>
Date: Tue, 20 Sep 2016 18:10:09 +0100
Subject: [PATCH 10/29] Removed other wrong return null

---
 .../services/widget-visibility.service.spec.ts   | 16 ++++++++--------
 .../src/services/widget-visibility.service.ts    |  3 +--
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/ng2-components/ng2-activiti-form/src/services/widget-visibility.service.spec.ts b/ng2-components/ng2-activiti-form/src/services/widget-visibility.service.spec.ts
index 0f977049f9..c2c6f97f86 100644
--- a/ng2-components/ng2-activiti-form/src/services/widget-visibility.service.spec.ts
+++ b/ng2-components/ng2-activiti-form/src/services/widget-visibility.service.spec.ts
@@ -262,12 +262,12 @@ describe('WidgetVisibilityService', () => {
        expect(formValue).toBe('field_with_condition_value');
     });
 
-    it('should return null if the field value is not in the form', () => {
+    it('should return undefined if the field value is not in the form', () => {
        let stubFormWithFields = new FormModel(fakeFormJson);
 
        let formValue = service.getFormValueByName(stubFormWithFields, 'FIELD_MYSTERY');
 
-       expect(formValue).toBeNull();
+       expect(formValue).toBeUndefined();
     });
 
     it('should take the value from form values if it is present', () => {
@@ -289,13 +289,13 @@ describe('WidgetVisibilityService', () => {
        expect(value).toBe('field_with_condition_value');
     });
 
-    it('should return null if the element is not present anywhere', () => {
+    it('should return undefined if the element is not present anywhere', () => {
        let fakeFormWithField = new FormModel(fakeFormJson);
        fakeFormWithField.values = formValues;
 
        let formValue = service.getValueOField(fakeFormWithField, 'FIELD_MYSTERY');
 
-       expect(formValue).toBeNull();
+       expect(formValue).toBeUndefined();
     });
 
     it('should retrieve the value for the right field when it is a value', () => {
@@ -350,7 +350,7 @@ describe('WidgetVisibilityService', () => {
        expect(rightValue).toBe('value_2');
     });
 
-    it('should return null for a value that is not on variable or form', () => {
+    it('should return undefined for a value that is not on variable or form', () => {
        let fakeFormWithField = new FormModel(fakeFormJson);
        fakeFormWithField.values = formValues;
        let visibilityObjTest = new WidgetVisibilityModel();
@@ -358,7 +358,7 @@ describe('WidgetVisibilityService', () => {
 
        let rightValue = service.getRightValue(fakeFormWithField, visibilityObjTest);
 
-       expect(rightValue).toBeNull();
+       expect(rightValue).toBeUndefined();
     });
 
     it('should retrieve the value for the left field when it is a process variable', (done) => {
@@ -418,13 +418,13 @@ describe('WidgetVisibilityService', () => {
        expect(leftValue).toBe('value_2');
     });
 
-    it('should return null for a value that is not on variable or form', () => {
+    it('should return undefined for a value that is not on variable or form', () => {
        let fakeFormWithField = new FormModel(fakeFormJson);
        let visibilityObjTest = new WidgetVisibilityModel();
 
        let leftValue = service.getLeftValue(fakeFormWithField, visibilityObjTest);
 
-       expect(leftValue).toBeNull();
+       expect(leftValue).toBeUndefined();
     });
 
     it('should evaluate the visibility for the field with single visibility condition between two field values', () => {
diff --git a/ng2-components/ng2-activiti-form/src/services/widget-visibility.service.ts b/ng2-components/ng2-activiti-form/src/services/widget-visibility.service.ts
index 1446344cca..ae7a235960 100644
--- a/ng2-components/ng2-activiti-form/src/services/widget-visibility.service.ts
+++ b/ng2-components/ng2-activiti-form/src/services/widget-visibility.service.ts
@@ -116,7 +116,6 @@ export class WidgetVisibilityService {
              }
           }
        }
-       return null;
     }
 
     private getValueFromVariable( form: FormModel, name: string, processVarList: TaskProcessVariableModel[] ) {
@@ -180,7 +179,7 @@ export class WidgetVisibilityService {
                 console.error( 'NO valid operation!' );
                 break;
         }
-        return null;
+        return;
     }
 
     getTaskProcessVariableModelsForTask(taskId: string): Observable<TaskProcessVariableModel[]> {

From 48ed440dcf4238c3a7a5211374f75c8e7134066d Mon Sep 17 00:00:00 2001
From: Will Abson <will.abson@alfresco.com>
Date: Wed, 21 Sep 2016 09:16:52 +0100
Subject: [PATCH 11/29] Remove maximum username length validation

(Text was also mis-leading stating 11 chars not 15)

Refs #781
---
 demo-shell-ng2/app/components/login/login-demo.component.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/demo-shell-ng2/app/components/login/login-demo.component.ts b/demo-shell-ng2/app/components/login/login-demo.component.ts
index 693bcbcb1b..df469bc442 100644
--- a/demo-shell-ng2/app/components/login/login-demo.component.ts
+++ b/demo-shell-ng2/app/components/login/login-demo.component.ts
@@ -41,7 +41,7 @@ export class LoginDemoComponent implements OnInit {
 
     constructor(public router: Router) {
         this.customValidation = {
-            username: ['', Validators.compose([Validators.required, Validators.minLength(4), Validators.maxLength(15)])],
+            username: ['', Validators.compose([Validators.required, Validators.minLength(4)])],
             password: ['', Validators.required]
         };
     }
@@ -49,7 +49,6 @@ export class LoginDemoComponent implements OnInit {
     ngOnInit() {
         this.alfrescologin.addCustomValidationError('username', 'required', 'LOGIN.MESSAGES.USERNAME-REQUIRED');
         this.alfrescologin.addCustomValidationError('username', 'minlength', 'LOGIN.MESSAGES.USERNAME-MIN');
-        this.alfrescologin.addCustomValidationError('username', 'maxlength', 'Username must not be longer than 11 characters.');
         this.alfrescologin.addCustomValidationError('password', 'required', 'LOGIN.MESSAGES.PASSWORD-REQUIRED');
     }
 

From 37202780feaa94e10f4dce6062b3aa762cc596ec Mon Sep 17 00:00:00 2001
From: mauriziovitale84 <maurizio.vitale@alfresco.com>
Date: Wed, 21 Sep 2016 14:31:41 +0100
Subject: [PATCH 12/29] Fix filterList is shown twice

---
 .../src/components/activiti-filters.component.ts              | 4 ++--
 .../src/components/activiti-filters.component.ts              | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-filters.component.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-filters.component.ts
index 1ab8b8bb26..039c2571b3 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/activiti-filters.component.ts
+++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-filters.component.ts
@@ -82,7 +82,7 @@ export class ActivitiProcessFilters implements OnInit, OnChanges {
 
     ngOnChanges(changes: SimpleChanges) {
         let appId = changes['appId'];
-        if (appId && appId.currentValue) {
+        if (appId && (appId.currentValue || appId.currentValue === null)) {
             this.load();
             return;
         }
@@ -93,7 +93,6 @@ export class ActivitiProcessFilters implements OnInit, OnChanges {
      * @param tasks
      */
     private load() {
-        this.resetFilter();
         if (this.appName) {
             this.filterByAppName();
         } else {
@@ -104,6 +103,7 @@ export class ActivitiProcessFilters implements OnInit, OnChanges {
     private filterByAppId(appId) {
         this.activiti.getProcessFilters(appId).subscribe(
             (res: FilterRepresentationModel[]) => {
+                this.resetFilter();
                 res.forEach((filter) => {
                     this.filterObserver.next(filter);
                 });
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-filters.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-filters.component.ts
index 8d814fb95b..931e205783 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-filters.component.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-filters.component.ts
@@ -82,7 +82,7 @@ export class ActivitiFilters implements OnInit, OnChanges {
 
     ngOnChanges(changes: SimpleChanges) {
         let appId = changes['appId'];
-        if (appId) {
+        if (appId && (appId.currentValue || appId.currentValue === null)) {
             this.load();
             return;
         }
@@ -93,7 +93,6 @@ export class ActivitiFilters implements OnInit, OnChanges {
      * @param tasks
      */
     private load() {
-        this.resetFilter();
         if (this.appName) {
             this.filterByAppName();
         } else {
@@ -104,6 +103,7 @@ export class ActivitiFilters implements OnInit, OnChanges {
     private filterByAppId(appId) {
         this.activiti.getTaskListFilters(appId).subscribe(
             (res: FilterRepresentationModel[]) => {
+                this.resetFilter();
                 res.forEach((filter) => {
                     this.filterObserver.next(filter);
                     this.selectFirstFilter();

From dda8adbf5f4ad41c441b1d4fcc470487458076b2 Mon Sep 17 00:00:00 2001
From: mauriziovitale84 <maurizio.vitale@alfresco.com>
Date: Wed, 21 Sep 2016 14:32:23 +0100
Subject: [PATCH 13/29] Show the TaskList when an app is select

---
 .../activiti/activiti-demo.component.html     | 22 +++++++--------
 .../activiti/activiti-demo.component.ts       | 28 +++++++++++++------
 2 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html
index 382a4ec4cf..08cf0aca94 100644
--- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html
+++ b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html
@@ -1,20 +1,20 @@
 <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
     <header class="mdl-layout__header">
         <!-- Tabs -->
-        <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
-            <a href="#scroll-tab-0" class="mdl-layout__tab is-active">APPS</a>
-            <a href="#scroll-tab-1" class="mdl-layout__tab">TASK LIST</a>
-            <a href="#scroll-tab-2" class="mdl-layout__tab">PROCESS LIST</a>
-            <a href="#scroll-tab-3" class="mdl-layout__tab">REPORT</a>
+        <div class="mdl-layout__tab-bar mdl-js-ripple-effect" #tabheader>
+            <a id="apps-header" href="#apps" class="mdl-layout__tab is-active">APPS</a>
+            <a id="tasks-header" href="#tasks" class="mdl-layout__tab">TASK LIST</a>
+            <a id="processes-header" href="#processes" class="mdl-layout__tab">PROCESS LIST</a>
+            <a id="report-header" href="#report" class="mdl-layout__tab">REPORT</a>
         </div>
     </header>
-    <main class="mdl-layout__content activiti">
-        <section class="mdl-layout__tab-panel is-active" id="scroll-tab-0">
+    <main class="mdl-layout__content activiti" #tabmain>
+        <section class="mdl-layout__tab-panel is-active" id="apps">
             <div class="page-content">
                 <activiti-apps [layoutType]="layoutType" (appClick)="onAppClick($event)" #activitiapps></activiti-apps>
             </div>
         </section>
-        <section class="mdl-layout__tab-panel" id="scroll-tab-1">
+        <section class="mdl-layout__tab-panel" id="tasks">
             <div class="page-content">
                 <div class="mdl-grid">
                     <div class="mdl-cell mdl-cell--2-col task-column mdl-shadow--2dp">
@@ -24,7 +24,7 @@
                     </div>
                     <div class="mdl-cell mdl-cell--3-col task-column mdl-shadow--2dp">
                         <span>Task List</span>
-                        <activiti-tasklist *ngIf="isTaskListSelected()" [taskFilter]="taskFilter" [data]="dataTasks"
+                        <activiti-tasklist [taskFilter]="taskFilter" [data]="dataTasks"
                                            (rowClick)="onTaskRowClick($event)" (onSuccess)="onSuccessTaskList($event)"
                                            #activititasklist></activiti-tasklist>
                     </div>
@@ -36,7 +36,7 @@
                 </div>
             </div>
         </section>
-        <section class="mdl-layout__tab-panel" id="scroll-tab-2">
+        <section class="mdl-layout__tab-panel" id="processes">
             <div class="page-content">
                 <div class="page-content">
                     <div class="mdl-grid">
@@ -61,7 +61,7 @@
                 </div>
             </div>
         </section>
-        <section class="mdl-layout__tab-panel" id="scroll-tab-3">
+        <section class="mdl-layout__tab-panel" id="report">
             <div class="page-content"><!-- Your content goes here --></div>
         </section>
     </main>
diff --git a/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts b/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts
index 08e487dabd..02cb33ae3b 100644
--- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts
+++ b/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts
@@ -43,8 +43,6 @@ declare var componentHandler;
 })
 export class ActivitiDemoComponent implements AfterViewChecked {
 
-    currentChoice: string = 'task-list';
-
     @ViewChild('activitiapps')
     activitiapps: ActivitiApps;
 
@@ -66,6 +64,15 @@ export class ActivitiDemoComponent implements AfterViewChecked {
     @ViewChild('activitiprocessdetails')
     activitiprocessdetails: any;
 
+    @ViewChild('tabmain')
+    tabMain: any;
+
+    @ViewChild('tabheader')
+    tabHeader: any;
+
+    @Input()
+    appId: number;
+
     layoutType: string;
     currentTaskId: string;
     currentProcessInstanceId: string;
@@ -81,13 +88,6 @@ export class ActivitiDemoComponent implements AfterViewChecked {
     dataTasks: ObjectDataTableAdapter;
     dataProcesses: ObjectDataTableAdapter;
 
-    @Input()
-    appId: number;
-
-    setChoice($event) {
-        this.currentChoice = $event.target.value;
-    }
-
     isProcessListSelected() {
         return this.currentChoice === 'process-list';
     }
@@ -134,6 +134,16 @@ export class ActivitiDemoComponent implements AfterViewChecked {
 
         this.processFilter = null;
         this.currentProcessInstanceId = null;
+
+        this.changeTab('apps','tasks');
+    }
+
+    changeTab(origin: string, destination: string) {
+        this.tabMain.nativeElement.children[origin].classList.remove('is-active');
+        this.tabMain.nativeElement.children[destination].classList.add('is-active');
+
+        this.tabHeader.nativeElement.children[`${origin}-header`].classList.remove('is-active');
+        this.tabHeader.nativeElement.children[`${destination}-header`].classList.add('is-active');
     }
 
     onTaskFilterClick(event: FilterRepresentationModel) {

From a040c067e286ab2fa093914d915379257850ec02 Mon Sep 17 00:00:00 2001
From: mauriziovitale84 <maurizio.vitale@alfresco.com>
Date: Wed, 21 Sep 2016 14:32:44 +0100
Subject: [PATCH 14/29] Fix hasForm problem

---
 .../activiti-task-details.component.html      |  6 ++--
 .../activiti-task-header.component.html       |  4 ---
 .../activiti-task-header.component.ts         | 35 +++----------------
 3 files changed, 7 insertions(+), 38 deletions(-)

diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.html b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.html
index cd52a0fe3c..6e91517b49 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.html
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.html
@@ -15,13 +15,13 @@
             <activiti-people [people]="taskPeople"></activiti-people>
         </div>
         <div class="mdl-cell mdl-cell--4-col">
-            <activiti-comments [taskId]="taskId" #activiticomments></activiti-comments>
+            <activiti-comments [taskId]="taskDetails.id" #activiticomments></activiti-comments>
         </div>
         <div class="mdl-cell mdl-cell--4-col">
-            <activiti-checklist [taskId]="taskId" #activitichecklist></activiti-checklist>
+            <activiti-checklist [taskId]="taskDetails.id" #activitichecklist></activiti-checklist>
         </div>
     </div>
-    <activiti-form *ngIf="hasFormKey()" [taskId]="taskId"
+    <activiti-form *ngIf="hasFormKey()" [taskId]="taskDetails.id"
                    [showTitle]="showTitle"
                    [showRefreshButton]="showRefreshButton"
                    [showCompleteButton]="showCompleteButton"
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-header.component.html b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-header.component.html
index c098c1d8c3..785a438d5c 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-header.component.html
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-header.component.html
@@ -10,9 +10,5 @@
             {{taskDetails?.dueDate ? taskDetails.dueDate : ('TASK_DETAILS.DUE.NONE' |translate) }}
 
         </div>
-        <div class="mdl-cell mdl-cell--4-col">
-            <span class="activiti-label">{{ 'TASK_DETAILS.LABELS.FORM' | translate }}</span>:
-            {{taskForm?.name ? taskForm.name : ('TASK_DETAILS.FORM.NONE' | translate) }}
-        </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-header.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-header.component.ts
index 90ff4498d8..043725d4b3 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-header.component.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-header.component.ts
@@ -15,10 +15,9 @@
  * limitations under the License.
  */
 
-import { Component, Input, OnInit, OnChanges } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { AlfrescoTranslationService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
 import { TaskDetailsModel } from '../models/task-details.model';
-import { FormModel, FormService } from 'ng2-activiti-form';
 
 declare let componentHandler: any;
 declare let __moduleName: string;
@@ -27,23 +26,19 @@ declare let __moduleName: string;
     selector: 'activiti-task-header',
     moduleId: __moduleName,
     templateUrl: './activiti-task-header.component.html',
-    styleUrls: ['./activiti-task-header.component.css'],
-    providers: [ FormService ]
+    styleUrls: ['./activiti-task-header.component.css']
 })
-export class ActivitiTaskHeader implements OnInit, OnChanges {
+export class ActivitiTaskHeader implements OnInit {
 
     @Input()
     taskDetails: TaskDetailsModel;
 
-    taskForm: FormModel;
-
     /**
      * Constructor
      * @param auth
      * @param translate
      */
     constructor(private auth: AlfrescoAuthenticationService,
-                private activitiForm: FormService,
                 private translate: AlfrescoTranslationService) {
 
         if (translate) {
@@ -52,29 +47,7 @@ export class ActivitiTaskHeader implements OnInit, OnChanges {
     }
 
     ngOnInit() {
-        if (this.taskDetails && this.taskDetails.formKey) {
-            this.load(this.taskDetails.id);
-        }
+
     }
 
-    ngOnChanges(change) {
-        if (this.taskDetails && this.taskDetails.formKey) {
-            this.load(this.taskDetails.id);
-        } else {
-            this.taskForm = null;
-        }
-    }
-
-    public load(taskId: string) {
-        if (taskId) {
-            this.activitiForm.getTaskForm(taskId).subscribe(
-                (response) => {
-                    this.taskForm = response;
-                },
-                (err) => {
-                    console.error(err);
-                }
-            );
-        }
-    }
 }

From b2843680a26be72effa70a8ccb9f7cb6a2e9c718 Mon Sep 17 00:00:00 2001
From: mauriziovitale84 <maurizio.vitale@alfresco.com>
Date: Wed, 21 Sep 2016 16:50:06 +0100
Subject: [PATCH 15/29] Fix json error

---
 ng2-components/ng2-alfresco-login/demo/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ng2-components/ng2-alfresco-login/demo/package.json b/ng2-components/ng2-alfresco-login/demo/package.json
index ef511157a7..b5faba8621 100644
--- a/ng2-components/ng2-alfresco-login/demo/package.json
+++ b/ng2-components/ng2-alfresco-login/demo/package.json
@@ -76,6 +76,6 @@
       "rimraf": "2.5.2",
       "tslint": "^3.8.1",
       "typescript": "^2.0.2",
-      "wsrv": "^0.1.5",
+      "wsrv": "^0.1.5"
     }
 }

From 5f4c0ae376a834e7cc47ebda2b7cfeac7e0466bd Mon Sep 17 00:00:00 2001
From: Mario Romano <dnamario@hotmail.com>
Date: Wed, 21 Sep 2016 18:45:51 +0100
Subject: [PATCH 16/29] #786 analytics component

---
 .travis.yml                                   |   2 +
 .../ng2-activiti-analytics/.editorconfig      |  23 +++
 .../ng2-activiti-analytics/.gitignore         |  15 ++
 .../ng2-activiti-analytics/.npmignore         |  16 ++
 ng2-components/ng2-activiti-analytics/LICENSE | 177 ++++++++++++++++++
 .../ng2-activiti-analytics/README.md          |  90 +++++++++
 .../assets/license_header.txt                 |  16 ++
 .../ng2-activiti-analytics/demo/.gitignore    |   6 +
 .../ng2-activiti-analytics/demo/.npmignore    |   3 +
 .../ng2-activiti-analytics/demo/README.md     |  13 ++
 .../ng2-activiti-analytics/demo/index.html    |  38 ++++
 .../ng2-activiti-analytics/demo/package.json  |  82 ++++++++
 .../ng2-activiti-analytics/demo/src/main.ts   |  33 ++++
 .../demo/systemjs.config.js                   |  57 ++++++
 .../ng2-activiti-analytics/demo/tsconfig.json |  18 ++
 .../ng2-activiti-analytics/demo/tslint.json   | 124 ++++++++++++
 .../ng2-activiti-analytics/index.ts           |  18 ++
 .../ng2-activiti-analytics/karma-test-shim.js | 108 +++++++++++
 .../ng2-activiti-analytics/karma.conf.js      | 100 ++++++++++
 .../ng2-activiti-analytics/package.json       |  98 ++++++++++
 .../src/components/analytics.component.html   |  21 +++
 .../src/components/analytics.component.ts     |  61 ++++++
 .../ng2-activiti-analytics/src/i18n/en.json   |   5 +
 .../ng2-activiti-analytics/src/i18n/it.json   |   5 +
 .../ng2-activiti-analytics/tsconfig.json      |  26 +++
 .../ng2-activiti-analytics/tslint.json        | 121 ++++++++++++
 .../ng2-activiti-tasklist/demo/README.md      |   2 +-
 .../ng2-activiti-tasklist/demo/package.json   |   2 +-
 scripts/npm-build-all.sh                      |   3 +-
 scripts/npm-check.sh                          |   3 +-
 scripts/npm-clean.sh                          |   3 +-
 scripts/npm-link-demo-shell.sh                |   6 +-
 scripts/npm-publish.sh                        |   3 +-
 scripts/update-version.sh                     |   6 +-
 34 files changed, 1294 insertions(+), 10 deletions(-)
 create mode 100644 ng2-components/ng2-activiti-analytics/.editorconfig
 create mode 100644 ng2-components/ng2-activiti-analytics/.gitignore
 create mode 100644 ng2-components/ng2-activiti-analytics/.npmignore
 create mode 100644 ng2-components/ng2-activiti-analytics/LICENSE
 create mode 100644 ng2-components/ng2-activiti-analytics/README.md
 create mode 100644 ng2-components/ng2-activiti-analytics/assets/license_header.txt
 create mode 100644 ng2-components/ng2-activiti-analytics/demo/.gitignore
 create mode 100644 ng2-components/ng2-activiti-analytics/demo/.npmignore
 create mode 100644 ng2-components/ng2-activiti-analytics/demo/README.md
 create mode 100644 ng2-components/ng2-activiti-analytics/demo/index.html
 create mode 100644 ng2-components/ng2-activiti-analytics/demo/package.json
 create mode 100644 ng2-components/ng2-activiti-analytics/demo/src/main.ts
 create mode 100644 ng2-components/ng2-activiti-analytics/demo/systemjs.config.js
 create mode 100644 ng2-components/ng2-activiti-analytics/demo/tsconfig.json
 create mode 100644 ng2-components/ng2-activiti-analytics/demo/tslint.json
 create mode 100644 ng2-components/ng2-activiti-analytics/index.ts
 create mode 100644 ng2-components/ng2-activiti-analytics/karma-test-shim.js
 create mode 100644 ng2-components/ng2-activiti-analytics/karma.conf.js
 create mode 100644 ng2-components/ng2-activiti-analytics/package.json
 create mode 100644 ng2-components/ng2-activiti-analytics/src/components/analytics.component.html
 create mode 100644 ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts
 create mode 100644 ng2-components/ng2-activiti-analytics/src/i18n/en.json
 create mode 100644 ng2-components/ng2-activiti-analytics/src/i18n/it.json
 create mode 100644 ng2-components/ng2-activiti-analytics/tsconfig.json
 create mode 100644 ng2-components/ng2-activiti-analytics/tslint.json

diff --git a/.travis.yml b/.travis.yml
index 9c3f5bad81..01b318ed4f 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -31,6 +31,7 @@ env:
     - MODULE=ng2-activiti-form
     - MODULE=ng2-activiti-tasklist
     - MODULE=ng2-activiti-processlist
+    - MODULE=ng2-activiti-analytics
 
 before_script:
   - if ([ "$MODULE" != "ng2-alfresco-core" ]); then
@@ -81,3 +82,4 @@ cache:
   - ng2-components/ng2-alfresco-viewer/node_modules
   - ng2-components/ng2-alfresco-webscript/node_modules
   - ng2-components/ng2-alfresco-tag/node_modules
+  - ng2-components/ng2-alfresco-analytics/node_modules
diff --git a/ng2-components/ng2-activiti-analytics/.editorconfig b/ng2-components/ng2-activiti-analytics/.editorconfig
new file mode 100644
index 0000000000..75a2477db7
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/.editorconfig
@@ -0,0 +1,23 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[package.json]
+indent_style = space
+indent_size = 2
+
+[karma.conf.js]
+indent_style = space
+indent_size = 2
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false
diff --git a/ng2-components/ng2-activiti-analytics/.gitignore b/ng2-components/ng2-activiti-analytics/.gitignore
new file mode 100644
index 0000000000..13324e66b9
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/.gitignore
@@ -0,0 +1,15 @@
+npm-debug.log
+node_modules
+.idea
+typings
+coverage
+dist
+src/**/*.js
+src/**/*.js.map
+src/**/*.d.ts
+demo/**/*.js
+demo/**/*.js.map
+demo/**/*.d.ts
+index.js
+index.js.map
+!systemjs.config.js
diff --git a/ng2-components/ng2-activiti-analytics/.npmignore b/ng2-components/ng2-activiti-analytics/.npmignore
new file mode 100644
index 0000000000..16ba3e61e5
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/.npmignore
@@ -0,0 +1,16 @@
+npm-debug.log
+.idea
+
+assets/
+coverage/
+node_modules
+typings/
+fonts/
+
+/.editorconfig
+/.travis.yml
+/*.js
+/*.json
+/*.ts
+/*.js.map
+/.npmignore
diff --git a/ng2-components/ng2-activiti-analytics/LICENSE b/ng2-components/ng2-activiti-analytics/LICENSE
new file mode 100644
index 0000000000..430d42bbea
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/LICENSE
@@ -0,0 +1,177 @@
+
+                              Apache License
+                        Version 2.0, January 2004
+                     http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions.
+
+   "License" shall mean the terms and conditions for use, reproduction,
+   and distribution as defined by Sections 1 through 9 of this document.
+
+   "Licensor" shall mean the copyright owner or entity authorized by
+   the copyright owner that is granting the License.
+
+   "Legal Entity" shall mean the union of the acting entity and all
+   other entities that control, are controlled by, or are under common
+   control with that entity. For the purposes of this definition,
+   "control" means (i) the power, direct or indirect, to cause the
+   direction or management of such entity, whether by contract or
+   otherwise, or (ii) ownership of fifty percent (50%) or more of the
+   outstanding shares, or (iii) beneficial ownership of such entity.
+
+   "You" (or "Your") shall mean an individual or Legal Entity
+   exercising permissions granted by this License.
+
+   "Source" form shall mean the preferred form for making modifications,
+   including but not limited to software source code, documentation
+   source, and configuration files.
+
+   "Object" form shall mean any form resulting from mechanical
+   transformation or translation of a Source form, including but
+   not limited to compiled object code, generated documentation,
+   and conversions to other media types.
+
+   "Work" shall mean the work of authorship, whether in Source or
+   Object form, made available under the License, as indicated by a
+   copyright notice that is included in or attached to the work
+   (an example is provided in the Appendix below).
+
+   "Derivative Works" shall mean any work, whether in Source or Object
+   form, that is based on (or derived from) the Work and for which the
+   editorial revisions, annotations, elaborations, or other modifications
+   represent, as a whole, an original work of authorship. For the purposes
+   of this License, Derivative Works shall not include works that remain
+   separable from, or merely link (or bind by name) to the interfaces of,
+   the Work and Derivative Works thereof.
+
+   "Contribution" shall mean any work of authorship, including
+   the original version of the Work and any modifications or additions
+   to that Work or Derivative Works thereof, that is intentionally
+   submitted to Licensor for inclusion in the Work by the copyright owner
+   or by an individual or Legal Entity authorized to submit on behalf of
+   the copyright owner. For the purposes of this definition, "submitted"
+   means any form of electronic, verbal, or written communication sent
+   to the Licensor or its representatives, including but not limited to
+   communication on electronic mailing lists, source code control systems,
+   and issue tracking systems that are managed by, or on behalf of, the
+   Licensor for the purpose of discussing and improving the Work, but
+   excluding communication that is conspicuously marked or otherwise
+   designated in writing by the copyright owner as "Not a Contribution."
+
+   "Contributor" shall mean Licensor and any individual or Legal Entity
+   on behalf of whom a Contribution has been received by Licensor and
+   subsequently incorporated within the Work.
+
+2. Grant of Copyright License. Subject to the terms and conditions of
+   this License, each Contributor hereby grants to You a perpetual,
+   worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+   copyright license to reproduce, prepare Derivative Works of,
+   publicly display, publicly perform, sublicense, and distribute the
+   Work and such Derivative Works in Source or Object form.
+
+3. Grant of Patent License. Subject to the terms and conditions of
+   this License, each Contributor hereby grants to You a perpetual,
+   worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+   (except as stated in this section) patent license to make, have made,
+   use, offer to sell, sell, import, and otherwise transfer the Work,
+   where such license applies only to those patent claims licensable
+   by such Contributor that are necessarily infringed by their
+   Contribution(s) alone or by combination of their Contribution(s)
+   with the Work to which such Contribution(s) was submitted. If You
+   institute patent litigation against any entity (including a
+   cross-claim or counterclaim in a lawsuit) alleging that the Work
+   or a Contribution incorporated within the Work constitutes direct
+   or contributory patent infringement, then any patent licenses
+   granted to You under this License for that Work shall terminate
+   as of the date such litigation is filed.
+
+4. Redistribution. You may reproduce and distribute copies of the
+   Work or Derivative Works thereof in any medium, with or without
+   modifications, and in Source or Object form, provided that You
+   meet the following conditions:
+
+   (a) You must give any other recipients of the Work or
+       Derivative Works a copy of this License; and
+
+   (b) You must cause any modified files to carry prominent notices
+       stating that You changed the files; and
+
+   (c) You must retain, in the Source form of any Derivative Works
+       that You distribute, all copyright, patent, trademark, and
+       attribution notices from the Source form of the Work,
+       excluding those notices that do not pertain to any part of
+       the Derivative Works; and
+
+   (d) If the Work includes a "NOTICE" text file as part of its
+       distribution, then any Derivative Works that You distribute must
+       include a readable copy of the attribution notices contained
+       within such NOTICE file, excluding those notices that do not
+       pertain to any part of the Derivative Works, in at least one
+       of the following places: within a NOTICE text file distributed
+       as part of the Derivative Works; within the Source form or
+       documentation, if provided along with the Derivative Works; or,
+       within a display generated by the Derivative Works, if and
+       wherever such third-party notices normally appear. The contents
+       of the NOTICE file are for informational purposes only and
+       do not modify the License. You may add Your own attribution
+       notices within Derivative Works that You distribute, alongside
+       or as an addendum to the NOTICE text from the Work, provided
+       that such additional attribution notices cannot be construed
+       as modifying the License.
+
+   You may add Your own copyright statement to Your modifications and
+   may provide additional or different license terms and conditions
+   for use, reproduction, or distribution of Your modifications, or
+   for any such Derivative Works as a whole, provided Your use,
+   reproduction, and distribution of the Work otherwise complies with
+   the conditions stated in this License.
+
+5. Submission of Contributions. Unless You explicitly state otherwise,
+   any Contribution intentionally submitted for inclusion in the Work
+   by You to the Licensor shall be under the terms and conditions of
+   this License, without any additional terms or conditions.
+   Notwithstanding the above, nothing herein shall supersede or modify
+   the terms of any separate license agreement you may have executed
+   with Licensor regarding such Contributions.
+
+6. Trademarks. This License does not grant permission to use the trade
+   names, trademarks, service marks, or product names of the Licensor,
+   except as required for reasonable and customary use in describing the
+   origin of the Work and reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty. Unless required by applicable law or
+   agreed to in writing, Licensor provides the Work (and each
+   Contributor provides its Contributions) on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+   implied, including, without limitation, any warranties or conditions
+   of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+   PARTICULAR PURPOSE. You are solely responsible for determining the
+   appropriateness of using or redistributing the Work and assume any
+   risks associated with Your exercise of permissions under this License.
+
+8. Limitation of Liability. In no event and under no legal theory,
+   whether in tort (including negligence), contract, or otherwise,
+   unless required by applicable law (such as deliberate and grossly
+   negligent acts) or agreed to in writing, shall any Contributor be
+   liable to You for damages, including any direct, indirect, special,
+   incidental, or consequential damages of any character arising as a
+   result of this License or out of the use or inability to use the
+   Work (including but not limited to damages for loss of goodwill,
+   work stoppage, computer failure or malfunction, or any and all
+   other commercial damages or losses), even if such Contributor
+   has been advised of the possibility of such damages.
+
+9. Accepting Warranty or Additional Liability. While redistributing
+   the Work or Derivative Works thereof, You may choose to offer,
+   and charge a fee for, acceptance of support, warranty, indemnity,
+   or other liability obligations and/or rights consistent with this
+   License. However, in accepting such obligations, You may act only
+   on Your own behalf and on Your sole responsibility, not on behalf
+   of any other Contributor, and only if You agree to indemnify,
+   defend, and hold each Contributor harmless for any liability
+   incurred by, or claims asserted against, such Contributor by reason
+   of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
diff --git a/ng2-components/ng2-activiti-analytics/README.md b/ng2-components/ng2-activiti-analytics/README.md
new file mode 100644
index 0000000000..ac208e5422
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/README.md
@@ -0,0 +1,90 @@
+# Activiti Analytics Component for Angular 2
+
+## 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-activiti-analytics
+```
+
+#### Ng2-Charts
+
+```sh
+npm install ng2-charts chart.js --save
+```
+
+Also make sure you include these dependencies in your `index.html` file:
+
+```html
+    <script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>
+```
+
+#### 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 Activiti Analytics
+
+```html
+<activiti-analytics></activiti-analytics>
+```
+
+#### Events
+
+
+#### Options
+
+
+## Build from sources
+
+Alternatively you can build component from sources with the following commands:
+
+```sh
+npm install
+npm run build
+```
+
+### Build the files and keep watching for changes
+
+```sh
+$ npm run build:w
+```
+
+### Running unit tests
+
+```sh
+npm test
+```
+
+### Running unit tests in browser
+
+```sh
+npm test-browser
+```
+
+This task rebuilds all the code, runs tslint, license checks and other quality check tools
+before performing unit testing.
+
+### Code coverage
+
+```sh
+npm run coverage
+```
diff --git a/ng2-components/ng2-activiti-analytics/assets/license_header.txt b/ng2-components/ng2-activiti-analytics/assets/license_header.txt
new file mode 100644
index 0000000000..83fd1531a3
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/assets/license_header.txt
@@ -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.
+ */
\ No newline at end of file
diff --git a/ng2-components/ng2-activiti-analytics/demo/.gitignore b/ng2-components/ng2-activiti-analytics/demo/.gitignore
new file mode 100644
index 0000000000..25beca4c27
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/demo/.gitignore
@@ -0,0 +1,6 @@
+node_modules
+.idea
+coverage
+dist
+typings
+!systemjs.config.js
diff --git a/ng2-components/ng2-activiti-analytics/demo/.npmignore b/ng2-components/ng2-activiti-analytics/demo/.npmignore
new file mode 100644
index 0000000000..c51c008259
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/demo/.npmignore
@@ -0,0 +1,3 @@
+node_modules
+dist
+typings
\ No newline at end of file
diff --git a/ng2-components/ng2-activiti-analytics/demo/README.md b/ng2-components/ng2-activiti-analytics/demo/README.md
new file mode 100644
index 0000000000..cd01855a98
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/demo/README.md
@@ -0,0 +1,13 @@
+# Activiti Analytics demo
+
+Install:
+
+```
+npm install
+```
+
+Run the project:
+
+```
+npm start
+```
\ No newline at end of file
diff --git a/ng2-components/ng2-activiti-analytics/demo/index.html b/ng2-components/ng2-activiti-analytics/demo/index.html
new file mode 100644
index 0000000000..40958146d8
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/demo/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Angular 2 Activiti Analitics - Demo</title>
+    <base href="./">
+
+    <!-- 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">
+
+    <!-- 1. Load libraries -->
+    <!-- 1. Load libraries -->
+    <!-- Polyfill(s) for older browsers -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
+    <script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+        System.import('app').catch(function(err){ console.error(err); });
+    </script>
+
+</head>
+<style> .chart {display: block; width: 100%;} </style>
+
+
+<body>
+
+<activiti-analytics-demo></activiti-analytics-demo>
+
+</body>
+</html>
diff --git a/ng2-components/ng2-activiti-analytics/demo/package.json b/ng2-components/ng2-activiti-analytics/demo/package.json
new file mode 100644
index 0000000000..b5ca93725d
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/demo/package.json
@@ -0,0 +1,82 @@
+{
+  "name": "ng2-activiti-analytics-demo",
+  "description": "Alfresco Angular2 Analytics Component - Demo",
+  "version": "0.1.0",
+  "author": "Alfresco Software, Ltd.",
+  "main": "index.js",
+  "scripts": {
+    "clean": "rimraf dist node_modules",
+    "postinstall": "npm run build",
+    "start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
+    "server": "wsrv -o -s -l",
+    "build": "npm run tslint && rimraf dist && npm run tsc",
+    "tsc": "tsc",
+    "tsc:w": "tsc -w",
+    "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts"
+  },
+  "license": "Apache-2.0",
+  "dependencies": {
+    "@angular/common": "2.0.0-rc.3",
+    "@angular/compiler": "2.0.0-rc.3",
+    "@angular/core": "2.0.0-rc.3",
+    "@angular/forms": "0.1.1",
+    "@angular/http": "2.0.0-rc.3",
+    "@angular/platform-browser": "2.0.0-rc.3",
+    "@angular/platform-browser-dynamic": "2.0.0-rc.3",
+    "@angular/router": "3.0.0-alpha.7",
+    "@angular/router-deprecated": "2.0.0-rc.2",
+    "@angular/upgrade": "2.0.0-rc.3",
+    "systemjs": "0.19.27",
+    "core-js": "2.4.0",
+    "reflect-metadata": "0.1.3",
+    "rxjs": "5.0.0-beta.6",
+    "zone.js": "0.6.12",
+    "license-check": "1.1.5",
+    "material-design-icons": "2.2.3",
+    "material-design-lite": "1.1.3",
+    "ng2-translate": "2.2.2",
+    "alfresco-js-api": "^0.3.0",
+    "ng2-alfresco-core": "^0.3.0",
+    "ng2-activiti-analytics": "^0.3.0",
+    "chart.js": "^2.1.4",
+    "ng2-charts": "1.1.0"
+  },
+  "devDependencies": {
+    "@types/core-js": "^0.9.32",
+    "@types/jasmine": "^2.2.33",
+    "concurrently": "^2.2.0",
+    "rimraf": "2.5.2",
+    "tslint": "3.8.1",
+    "typescript": "^2.0.2",
+    "wsrv": "^0.1.5"
+  },
+  "keywords": [
+    "angular2",
+    "typescript"
+  ],
+  "license-check-config": {
+    "src": [
+      "**/*.js",
+      "**/*.ts",
+      "!/**/coverage/**/*",
+      "!/**/demo/**/*",
+      "!/**/node_modules/**/*",
+      "!/**/typings/**/*",
+      "!*.js"
+    ],
+    "contributors": [
+      {
+        "name": "Maurizio Vitale",
+        "email": "maurizio.vitale84@gmail.com"
+      },
+      {
+        "name": "Eugenio Romano",
+        "email": "eugenio.romano@alfresco.com"
+      }
+    ],
+    "path": "assets/license_header.txt",
+    "blocking": true,
+    "logInfo": false,
+    "logError": true
+  }
+}
diff --git a/ng2-components/ng2-activiti-analytics/demo/src/main.ts b/ng2-components/ng2-activiti-analytics/demo/src/main.ts
new file mode 100644
index 0000000000..18646719c7
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/demo/src/main.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.
+ */
+
+import { bootstrap } from '@angular/platform-browser-dynamic';
+import { Component } from '@angular/core';
+import { ALFRESCO_CORE_PROVIDERS } from 'ng2-alfresco-core';
+import { AnalyticsComponent } from 'ng2-activiti-analytics';
+
+@Component({
+    selector: 'activiti-analytics-demo',
+    template: `<activiti-analytics></activiti-analytics>`,
+    directives: [AnalyticsComponent]
+})
+class ActivitiAnalyticsDemo {
+}
+
+bootstrap(ActivitiAnalyticsDemo, [
+    ALFRESCO_CORE_PROVIDERS]
+);
diff --git a/ng2-components/ng2-activiti-analytics/demo/systemjs.config.js b/ng2-components/ng2-activiti-analytics/demo/systemjs.config.js
new file mode 100644
index 0000000000..9cb172062c
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/demo/systemjs.config.js
@@ -0,0 +1,57 @@
+/**
+ * System configuration for Angular 2 samples
+ * Adjust as necessary for your application needs.
+ */
+(function(global) {
+    // map tells the System loader where to look for things
+    var map = {
+        'app':                        'dist', // 'dist',
+        '@angular':                   'node_modules/@angular',
+        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
+        'rxjs':                       'node_modules/rxjs',
+
+        'ng2-charts': 'node_modules/ng2-charts',
+        'ng2-translate': 'node_modules/ng2-translate',
+        'ng2-alfresco-core': 'node_modules/ng2-alfresco-core/dist',
+        'ng2-activiti-analytics': 'node_modules/ng2-activiti-analytics/dist'
+    };
+    // packages tells the System loader how to load when no filename and/or no extension
+    var packages = {
+        'app':                        { main: 'main.js',  defaultExtension: 'js' },
+        'rxjs':                       { defaultExtension: 'js' },
+        'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
+
+        'ng2-translate': { defaultExtension: 'js' },
+        'ng2-alfresco-core': { main: 'index.js', defaultExtension: 'js' },
+        'ng2-activiti-analytics': { main: 'index.js', defaultExtension: 'js' },
+        'ng2-charts': { main: 'ng2-charts.js', defaultExtension: 'js'}
+    };
+    var ngPackageNames = [
+        'common',
+        'compiler',
+        'core',
+        'http',
+        'platform-browser',
+        'platform-browser-dynamic',
+        'router',
+        'router-deprecated',
+        'upgrade'
+    ];
+    // Individual files (~300 requests):
+    function packIndex(pkgName) {
+        packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
+    }
+    // Bundled (~40 requests):
+    function packUmd(pkgName) {
+        packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
+    }
+    // Most environments should use UMD; some (Karma) need the individual index files
+    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
+    // Add package entries for angular packages
+    ngPackageNames.forEach(setPackageConfig);
+    var config = {
+        map: map,
+        packages: packages
+    };
+    System.config(config);
+})(this);
diff --git a/ng2-components/ng2-activiti-analytics/demo/tsconfig.json b/ng2-components/ng2-activiti-analytics/demo/tsconfig.json
new file mode 100644
index 0000000000..769b0067ef
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/demo/tsconfig.json
@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "target": "ES5",
+        "module": "system",
+        "moduleResolution": "node",
+        "emitDecoratorMetadata": true,
+        "experimentalDecorators": true,
+        "sourceMap": true,
+        "removeComments": true,
+        "declaration": true,
+        "outDir": "dist",
+        "types": ["core-js", "jasmine"]
+    },
+    "exclude": [
+        "dist",
+        "node_modules"
+    ]
+}
diff --git a/ng2-components/ng2-activiti-analytics/demo/tslint.json b/ng2-components/ng2-activiti-analytics/demo/tslint.json
new file mode 100644
index 0000000000..8c48e76469
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/demo/tslint.json
@@ -0,0 +1,124 @@
+{
+  "rules": {
+    "align": [
+      true,
+      "parameters",
+      "arguments",
+      "statements"
+    ],
+    "ban": false,
+    "class-name": true,
+    "comment-format": [
+      true,
+      "check-space",
+      "check-lowercase"
+    ],
+    "curly": true,
+    "eofline": true,
+    "forin": true,
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "interface-name": false,
+    "jsdoc-format": true,
+    "label-position": true,
+    "label-undefined": true,
+    "max-line-length": [
+      true,
+      140
+    ],
+    "member-ordering": [
+      true,
+      "public-before-private",
+      "static-before-instance",
+      "variables-before-functions"
+    ],
+    "no-any": false,
+    "no-arg": true,
+    "no-bitwise": true,
+    "no-conditional-assignment": true,
+    "no-consecutive-blank-lines": false,
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-construct": true,
+    "no-constructor-vars": false,
+    "no-debugger": true,
+    "no-duplicate-key": true,
+    "no-duplicate-variable": true,
+    "no-empty": true,
+    "no-eval": true,
+    "no-inferrable-types": false,
+    "no-internal-module": true,
+    "no-require-imports": true,
+    "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,
+    "no-var-keyword": true,
+    "no-var-requires": true,
+    "object-literal-sort-keys": false,
+    "one-line": [
+      true,
+      "check-open-brace",
+      "check-catch",
+      "check-else",
+      "check-whitespace"
+    ],
+    "quotemark": [
+      true,
+      "single",
+      "avoid-escape"
+    ],
+    "radix": true,
+    "semicolon": true,
+    "switch-default": true,
+    "trailing-comma": [
+      true,
+      {
+        "multiline": "never",
+        "singleline": "never"
+      }
+    ],
+    "triple-equals": [
+      true,
+      "allow-null-check"
+    ],
+    "typedef": false,
+    "typedef-whitespace": [
+      true,
+      {
+        "call-signature": "nospace",
+        "index-signature": "nospace",
+        "parameter": "nospace",
+        "property-declaration": "nospace",
+        "variable-declaration": "nospace"
+      }
+    ],
+    "use-strict": false,
+    "variable-name": [
+      true,
+      "check-format",
+      "allow-leading-underscore",
+      "ban-keywords"
+    ],
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-operator",
+      "check-separator",
+      "check-type",
+      "check-module",
+      "check-decl"
+    ]
+  }
+}
diff --git a/ng2-components/ng2-activiti-analytics/index.ts b/ng2-components/ng2-activiti-analytics/index.ts
new file mode 100644
index 0000000000..001531d6b3
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/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 './src/components/analytics.component';
diff --git a/ng2-components/ng2-activiti-analytics/karma-test-shim.js b/ng2-components/ng2-activiti-analytics/karma-test-shim.js
new file mode 100644
index 0000000000..c5e3b8a8c6
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/karma-test-shim.js
@@ -0,0 +1,108 @@
+// Tun on full stack traces in errors to help debugging
+Error.stackTraceLimit = Infinity;
+
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;
+
+__karma__.loaded = function() {};
+
+var map = {
+    'app': 'base/dist',
+    'rxjs': 'base/node_modules/rxjs',
+    '@angular': 'base/node_modules/@angular',
+    'ng2-translate' : '/base/node_modules/ng2-translate',
+    'ng2-charts' : '/base/node_modules/ng2-charts',
+    'ng2-alfresco-core': '/base/node_modules/ng2-alfresco-core/dist'
+};
+
+var packages = {
+    'app': { main: 'main.js',  defaultExtension: 'js' },
+    'rxjs': { defaultExtension: 'js' },
+    'ng2-translate': { defaultExtension: 'js' },
+    'ng2-alfresco-core': { main: 'index.js', defaultExtension: 'js' }
+};
+
+var packageNames = [
+    '@angular/common',
+    '@angular/compiler',
+    '@angular/core',
+    '@angular/http',
+    '@angular/platform-browser',
+    '@angular/platform-browser-dynamic',
+    '@angular/router',
+    '@angular/router-deprecated',
+    '@angular/testing',
+    '@angular/upgrade'
+];
+
+packageNames.forEach(function(pkgName) {
+    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
+});
+
+packages['base/dist'] = {
+    defaultExtension: 'js',
+    format: 'register',
+    map: Object.keys(window.__karma__.files).filter(onlyAppFiles).reduce(createPathRecords, {})
+};
+
+var config = {
+    map: map,
+    packages: packages
+};
+
+System.config(config);
+
+System.import('@angular/platform-browser/src/browser/browser_adapter')
+    .then(function(browser_adapter) { browser_adapter.BrowserDomAdapter.makeCurrent(); })
+    .then(function () {
+        return Promise.all([
+            System.import('@angular/core/testing'),
+            System.import('@angular/platform-browser-dynamic/testing')
+        ])
+    })
+    .then(function (providers) {
+        var testing = providers[0];
+        var testingBrowser = providers[1];
+
+        testing.setBaseTestProviders(
+            testingBrowser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
+            testingBrowser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
+
+    })
+    .then(function() { return Promise.all(resolveTestFiles()); })
+    .then(
+        function() {
+            __karma__.start();
+        },
+        function(error) {
+            if(typeof __karma__.error == 'function') {
+                __karma__.error(error.stack || error);
+            }else{
+                console.error(error);
+            }
+        }
+    );
+function createPathRecords(pathsMapping, appPath) {
+    var pathParts = appPath.split('/');
+    var moduleName = './' + pathParts.slice(Math.max(pathParts.length - 2, 1)).join('/');
+    moduleName = moduleName.replace(/\.js$/, '');
+    pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath];
+    return pathsMapping;
+}
+
+function onlyAppFiles(filePath) {
+    return /\/base\/dist\/(?!.*\.spec\.js$).*\.js$/.test(filePath);
+}
+
+function onlySpecFiles(path) {
+    return /\.spec\.js$/.test(path);
+}
+
+function resolveTestFiles() {
+    return Object.keys(window.__karma__.files)  // All files served by Karma.
+        .filter(onlySpecFiles)
+        .map(function(moduleName) {
+            // loads all spec files via their global module names (e.g.
+            // 'base/dist/vg-player/vg-player.spec')
+            return System.import(moduleName);
+        });
+}
diff --git a/ng2-components/ng2-activiti-analytics/karma.conf.js b/ng2-components/ng2-activiti-analytics/karma.conf.js
new file mode 100644
index 0000000000..9f91a8ed86
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/karma.conf.js
@@ -0,0 +1,100 @@
+'use strict';
+
+module.exports = function (config) {
+  var configuration = {
+    basePath: '.',
+
+    frameworks: ['jasmine-ajax', 'jasmine'],
+
+    files: [
+      // paths loaded by Karma
+      {pattern: 'node_modules/reflect-metadata/Reflect.js', included: true, watched: true},
+      {pattern: 'node_modules/systemjs/dist/system.src.js', included: true, watched: false},
+      {pattern: 'node_modules/zone.js/dist/zone.js', included: true, watched: true},
+      {pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false},
+      {pattern: 'node_modules/rxjs/**/*.map', included: false, watched: false},
+      {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
+      {pattern: 'node_modules/@angular/**/*.map', included: false, watched: false},
+      {pattern: 'node_modules/ng2-alfresco-core/dist/**/*.js', included: false, served: true, watched: false},
+      {pattern: 'node_modules/ng2-translate/**/*.js', included: false, served: true, watched: false},
+      {pattern: 'node_modules/ng2-charts/**/*.js', included: false, served: true, watched: false},
+      {pattern: 'node_modules/alfresco-js-api/dist/alfresco-js-api.js', included: true, watched: false},
+
+      {pattern: 'karma-test-shim.js', included: true, watched: true},
+
+      // paths loaded via module imports
+      {pattern: 'dist/**/*.js', included: false, watched: true},
+      {pattern: 'dist/**/*.html', included: true, served: true, watched: true},
+      {pattern: 'dist/**/*.css', included: true, served: true, watched: true},
+
+      // paths to support debugging with source maps in dev tools
+      {pattern: 'src/**/*.ts', included: false, watched: false},
+      {pattern: 'dist/**/*.js.map', included: false, watched: false}
+    ],
+
+    exclude: [
+      'node_modules/**/*spec.js'
+    ],
+
+    // proxied base paths
+    proxies: {
+      // required for component assets fetched by Angular's compiler
+      '/src/': '/base/src/'
+    },
+
+    port: 9876,
+
+    // level of logging
+    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+    logLevel: config.LOG_INFO,
+
+    colors: true,
+
+    autoWatch: true,
+
+    browsers: ['Chrome'],
+
+    customLaunchers: {
+      Chrome_travis_ci: {
+        base: 'Chrome',
+        flags: ['--no-sandbox']
+      }
+    },
+
+    // Karma plugins loaded
+    plugins: [
+      'karma-jasmine',
+      'karma-coverage',
+      'karma-jasmine-ajax',
+      'karma-chrome-launcher',
+      'karma-mocha-reporter',
+      'karma-jasmine-html-reporter'
+    ],
+
+    // Coverage reporter generates the coverage
+    reporters: ['mocha', 'coverage', 'kjhtml'],
+
+    // Source files that you wanna generate coverage for.
+    // Do not include tests or libraries (these files will be instrumented by Istanbul)
+    preprocessors: {
+      'dist/**/!(*spec).js': ['coverage']
+    },
+
+    coverageReporter: {
+      dir: 'coverage/',
+      subdir: 'report',
+      reporters: [
+        {type: 'text'},
+        {type: 'json', file: 'coverage-final.json'},
+        {type: 'html'},
+        {type: 'lcov'}
+      ]
+    }
+  };
+
+  if (process.env.TRAVIS) {
+    configuration.browsers = ['Chrome_travis_ci'];
+  }
+
+  config.set(configuration)
+};
diff --git a/ng2-components/ng2-activiti-analytics/package.json b/ng2-components/ng2-activiti-analytics/package.json
new file mode 100644
index 0000000000..11a5f10465
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/package.json
@@ -0,0 +1,98 @@
+{
+  "name": "ng2-activiti-analytics",
+  "description": "Activiti Angular2 Analytics Component",
+  "version": "0.3.3",
+  "author": "Alfresco Software, Ltd.",
+  "scripts": {
+    "clean": "rimraf dist node_modules",
+    "build": "npm run tslint && rimraf dist && tsc && npm run copy-dist && license-check",
+    "build:w": "npm run tslint && rimraf dist && npm run watch-task",
+    "watch-task": "concurrently \"npm run tsc:w\"  \"npm run copy-dist:w\"  \"license-check\"",
+    "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json 'src/{,**/}**.ts'",
+    "copy-dist": "cpx \"./src/**/*.{html,css,json,png,jpg,gif,svg}\" ./dist/src",
+    "copy-dist:w": "cpx \"./src/**/*.{html,css,json,png,jpg,gif,svg}\" ./dist/src -w",
+    "tsc": "tsc",
+    "tsc:w": "tsc -w",
+    "pretest": "npm run build",
+    "test": "karma start karma.conf.js --reporters mocha,coverage --single-run",
+    "test-browser": "concurrently \"karma start karma.conf.js --reporters kjhtml\" \"npm run watch-task\"",
+    "posttest": "node_modules/.bin/remap-istanbul -i coverage/report/coverage-final.json -o coverage/report -t html && node_modules/.bin/remap-istanbul -i coverage/report/coverage-final.json -o coverage/report/coverage-final.json",
+    "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
+    "prepublish": "npm run build",
+    "travis": "echo 'placeholder'"
+  },
+  "main": "./dist/index.js",
+  "typings": "./dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Alfresco/alfresco-ng2-components.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
+  },
+  "license": "Apache-2.0",
+  "contributors": [
+    {
+      "name": "Mario Romano",
+      "email": "mario.romnao@alfresco.com"
+    }
+  ],
+  "keywords": [
+    "ng2",
+    "angular",
+    "angular2",
+    "alfresco"
+  ],
+  "dependencies": {
+    "@angular/common": "2.0.0-rc.3",
+    "@angular/compiler": "2.0.0-rc.3",
+    "@angular/core": "2.0.0-rc.3",
+    "@angular/forms": "0.1.1",
+    "@angular/http": "2.0.0-rc.3",
+    "@angular/platform-browser": "2.0.0-rc.3",
+    "@angular/platform-browser-dynamic": "2.0.0-rc.3",
+    "@angular/router": "3.0.0-alpha.7",
+    "@angular/router-deprecated": "2.0.0-rc.2",
+    "@angular/upgrade": "2.0.0-rc.3",
+    "systemjs": "0.19.27",
+    "core-js": "2.4.0",
+    "reflect-metadata": "0.1.3",
+    "rxjs": "5.0.0-beta.6",
+    "zone.js": "0.6.12",
+    "chart.js": "^2.1.4",
+    "ng2-charts": "1.1.0",
+    "ng2-translate": "2.2.2",
+    "ng2-alfresco-core": "0.3.2",
+    "alfresco-js-api": "^0.3.0"
+  },
+  "devDependencies": {
+    "@types/core-js": "^0.9.32",
+    "@types/jasmine": "^2.2.33",
+    "concurrently": "^2.2.0",
+    "cpx": "1.3.1",
+    "jasmine-core": "2.4.1",
+    "karma": "0.13.22",
+    "karma-chrome-launcher": "1.0.1",
+    "karma-coverage": "1.0.0",
+    "karma-jasmine": "1.0.2",
+    "karma-jasmine-ajax": "0.1.13",
+    "karma-mocha-reporter": "2.0.3",
+    "karma-jasmine-html-reporter": "0.2.0",
+    "license-check": "1.1.5",
+    "rimraf": "2.5.2",
+    "remap-istanbul": "0.6.3",
+    "traceur": "0.0.91",
+    "tslint": "3.8.1",
+    "typescript": "^2.0.2",
+    "wsrv": "^0.1.5"
+  },
+  "license-check-config": {
+    "src": [
+      "./dist/**/*.js"
+    ],
+    "path": "assets/license_header.txt",
+    "blocking": true,
+    "logInfo": false,
+    "logError": true
+  }
+}
diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics.component.html b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.html
new file mode 100644
index 0000000000..5bb81bc756
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.html
@@ -0,0 +1,21 @@
+<div class="col-md-6">
+
+    <base-chart class="chart"
+                [data]="lineChartData"
+                [labels]="lineChartLabels"
+                [options]="lineChartOptions"
+                [chartType]="lineChartType"
+                (chartHover)="chartHovered($event)"
+                (chartClick)="chartClicked($event)"></base-chart>
+</div>
+<div class="col-md-6">
+    <base-chart class="chart"
+                [data]="pieChartData"
+                [labels]="pieChartLabels"
+                [chartType]="pieChartType"
+                (chartHover)="chartHovered($event)"
+                (chartClick)="chartClicked($event)"></base-chart>
+</div>
+<div class="col-md-12 text-center" style="margin-top: 10px;">
+    <button (click)="randomizeType()" style="display: inline-block">Toggle</button>
+</div>
diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts
new file mode 100644
index 0000000000..aa8455dc56
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts
@@ -0,0 +1,61 @@
+/*!
+ * @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 { CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass } from '@angular/common';
+
+import { CHART_DIRECTIVES } from 'ng2-charts/ng2-charts';
+
+declare let __moduleName: string;
+
+@Component({
+    moduleId: __moduleName,
+    selector: 'activiti-analytics',
+    templateUrl: './analytics.component.html',
+    directives: [CHART_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES]
+})
+export class AnalyticsComponent {
+
+    constructor(){
+        console.log('AnalyticsComponent');
+    }
+    // lineChart
+    public lineChartData: Array<any> = [
+        [65, 59, 80, 81, 56, 55, 40],
+        [28, 48, 40, 19, 86, 27, 90]
+    ];
+    public lineChartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+    public lineChartType: string = 'line';
+    public pieChartType: string = 'pie';
+
+    // Pie
+    public pieChartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail Sales'];
+    public pieChartData: number[] = [300, 500, 100];
+
+    public randomizeType(): void {
+        this.lineChartType = this.lineChartType === 'line' ? 'bar' : 'line';
+        this.pieChartType = this.pieChartType === 'doughnut' ? 'pie' : 'doughnut';
+    }
+
+    public chartClicked(e: any): void {
+        console.log(e);
+    }
+
+    public chartHovered(e: any): void {
+        console.log(e);
+    }
+}
diff --git a/ng2-components/ng2-activiti-analytics/src/i18n/en.json b/ng2-components/ng2-activiti-analytics/src/i18n/en.json
new file mode 100644
index 0000000000..3afc878e36
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/src/i18n/en.json
@@ -0,0 +1,5 @@
+{
+  "ANALYTICS": {
+    "TTILE": "ANALYTICS"
+  }
+}
diff --git a/ng2-components/ng2-activiti-analytics/src/i18n/it.json b/ng2-components/ng2-activiti-analytics/src/i18n/it.json
new file mode 100644
index 0000000000..15c05b6832
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/src/i18n/it.json
@@ -0,0 +1,5 @@
+{
+    "ANALYTICS": {
+        "TTILE": "ANALYTICS"
+    }
+}
diff --git a/ng2-components/ng2-activiti-analytics/tsconfig.json b/ng2-components/ng2-activiti-analytics/tsconfig.json
new file mode 100644
index 0000000000..b1effea355
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/tsconfig.json
@@ -0,0 +1,26 @@
+{
+    "compilerOptions": {
+        "target": "es5",
+        "module": "system",
+        "moduleResolution": "node",
+        "emitDecoratorMetadata": true,
+        "experimentalDecorators": true,
+        "sourceMap": true,
+        "removeComments": true,
+        "declaration": true,
+        "noLib": false,
+        "allowUnreachableCode": false,
+        "allowUnusedLabels": false,
+        "noImplicitAny": false,
+        "noImplicitReturns": false,
+        "noImplicitUseStrict": false,
+        "noFallthroughCasesInSwitch": true,
+        "outDir": "dist",
+        "types": ["core-js", "jasmine"]
+    },
+    "exclude": [
+        "demo",
+        "node_modules",
+        "dist"
+    ]
+}
diff --git a/ng2-components/ng2-activiti-analytics/tslint.json b/ng2-components/ng2-activiti-analytics/tslint.json
new file mode 100644
index 0000000000..85e9df53c1
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/tslint.json
@@ -0,0 +1,121 @@
+{
+    "rules": {
+        "align": [
+            true,
+            "parameters",
+            "statements"
+        ],
+        "ban": false,
+        "class-name": true,
+        "comment-format": [
+            true,
+            "check-space"
+        ],
+        "curly": true,
+        "eofline": true,
+        "forin": true,
+        "indent": [
+            true,
+            "spaces"
+        ],
+        "interface-name": false,
+        "jsdoc-format": true,
+        "label-position": true,
+        "label-undefined": true,
+        "max-line-length": [
+            true,
+            180
+        ],
+        "member-ordering": [
+            true,
+            "static-before-instance",
+            "variables-before-functions"
+        ],
+        "no-any": false,
+        "no-arg": true,
+        "no-bitwise": false,
+        "no-conditional-assignment": true,
+        "no-consecutive-blank-lines": false,
+        "no-console": [
+            true,
+            "debug",
+            "info",
+            "time",
+            "timeEnd",
+            "trace"
+        ],
+        "no-construct": true,
+        "no-constructor-vars": false,
+        "no-debugger": true,
+        "no-duplicate-key": true,
+        "no-duplicate-variable": true,
+        "no-empty": false,
+        "no-eval": true,
+        "no-inferrable-types": false,
+        "no-internal-module": true,
+        "no-require-imports": true,
+        "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,
+        "no-var-keyword": true,
+        "no-var-requires": true,
+        "object-literal-sort-keys": false,
+        "one-line": [
+            true,
+            "check-open-brace",
+            "check-catch",
+            "check-else",
+            "check-whitespace"
+        ],
+        "quotemark": [
+            true,
+            "single",
+            "avoid-escape"
+        ],
+        "radix": true,
+        "semicolon": true,
+        "switch-default": true,
+        "trailing-comma": [
+            true,
+            {
+                "multiline": "never",
+                "singleline": "never"
+            }
+        ],
+        "triple-equals": [
+            true,
+            "allow-null-check"
+        ],
+        "typedef": false,
+        "typedef-whitespace": [
+            true,
+            {
+                "call-signature": "nospace",
+                "index-signature": "nospace",
+                "parameter": "nospace",
+                "property-declaration": "nospace",
+                "variable-declaration": "nospace"
+            }
+        ],
+        "use-strict": false,
+        "variable-name": [
+            true,
+            "check-format",
+            "allow-leading-underscore",
+            "ban-keywords"
+        ],
+        "whitespace": [
+            true,
+            "check-branch",
+            "check-operator",
+            "check-separator",
+            "check-type",
+            "check-module",
+            "check-decl"
+        ]
+    }
+}
diff --git a/ng2-components/ng2-activiti-tasklist/demo/README.md b/ng2-components/ng2-activiti-tasklist/demo/README.md
index 28b3ffd976..14d905ea85 100644
--- a/ng2-components/ng2-activiti-tasklist/demo/README.md
+++ b/ng2-components/ng2-activiti-tasklist/demo/README.md
@@ -1,4 +1,4 @@
-# DataTable demo
+# TasK list demo
 
 Install:
 
diff --git a/ng2-components/ng2-activiti-tasklist/demo/package.json b/ng2-components/ng2-activiti-tasklist/demo/package.json
index f78e32eff1..61e59978f2 100644
--- a/ng2-components/ng2-activiti-tasklist/demo/package.json
+++ b/ng2-components/ng2-activiti-tasklist/demo/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ng2-activiti-tasklist-demo",
-  "description": "Alfresco Angular2 DataTable Component - Demo",
+  "description": "Alfresco Angular2 Task List Component - Demo",
   "version": "0.1.0",
   "author": "Alfresco Software, Ltd.",
   "main": "index.js",
diff --git a/scripts/npm-build-all.sh b/scripts/npm-build-all.sh
index 45f8209f65..40c2f6c32a 100755
--- a/scripts/npm-build-all.sh
+++ b/scripts/npm-build-all.sh
@@ -14,7 +14,8 @@ for PACKAGE in \
   ng2-alfresco-upload \
   ng2-alfresco-viewer \
   ng2-alfresco-webscript \
-  ng2-alfresco-tag
+  ng2-alfresco-tag \
+  ng2-activiti-analytics
 do
   DESTDIR="$DIR/../ng2-components/${PACKAGE}"
   echo "====== build components : ${PACKAGE} ====="
diff --git a/scripts/npm-check.sh b/scripts/npm-check.sh
index 3819da367e..43dcbc99f3 100755
--- a/scripts/npm-check.sh
+++ b/scripts/npm-check.sh
@@ -18,7 +18,8 @@ for PACKAGE in \
   ng2-alfresco-upload \
   ng2-alfresco-viewer \
   ng2-alfresco-webscript \
-  ng2-alfresco-tag
+  ng2-alfresco-tag \
+  ng2-activiti-analytics
 do
   echo "====== Check component: ${PACKAGE} ====="
   cd "$DIR/../ng2-components/${PACKAGE}"
diff --git a/scripts/npm-clean.sh b/scripts/npm-clean.sh
index f4d1e78ebc..46f6ee8159 100755
--- a/scripts/npm-clean.sh
+++ b/scripts/npm-clean.sh
@@ -14,7 +14,8 @@ for PACKAGE in \
   ng2-alfresco-upload \
   ng2-alfresco-viewer \
   ng2-alfresco-webscript \
-  ng2-alfresco-tag
+  ng2-alfresco-tag \
+  ng2-activiti-analytics
 do
   echo "====== clean component: ${PACKAGE} ====="
   cd "$DIR/../ng2-components/${PACKAGE}"
diff --git a/scripts/npm-link-demo-shell.sh b/scripts/npm-link-demo-shell.sh
index c42c0d1740..ef1584c902 100755
--- a/scripts/npm-link-demo-shell.sh
+++ b/scripts/npm-link-demo-shell.sh
@@ -74,7 +74,8 @@ npm run build
 for PACKAGE in \
   ng2-alfresco-login \
   ng2-alfresco-search \
-  ng2-alfresco-upload
+  ng2-alfresco-upload \
+  ng2-activiti-analytics
 do
   DESTDIR="$DIR/../ng2-components/${PACKAGE}"
   echo "====== linking component: ${PACKAGE} ====="
@@ -99,7 +100,8 @@ for PACKAGE in \
   ng2-alfresco-upload \
   ng2-alfresco-viewer \
   ng2-alfresco-webscript \
-  ng2-alfresco-tag
+  ng2-alfresco-tag \
+  ng2-activiti-analytics
 do
   DESTDIR="$DIR/../ng2-components/${PACKAGE}"
   echo "====== demo shell linking: ${PACKAGE} ====="
diff --git a/scripts/npm-publish.sh b/scripts/npm-publish.sh
index f72018f253..57bba15d31 100755
--- a/scripts/npm-publish.sh
+++ b/scripts/npm-publish.sh
@@ -16,7 +16,8 @@ for PACKAGE in \
   ng2-alfresco-upload \
   ng2-alfresco-viewer \
   ng2-alfresco-webscript \
-  ng2-alfresco-tag
+  ng2-alfresco-tag \
+  ng2-activiti-analytics
 do
   DESTDIR="$DIR/../ng2-components/${PACKAGE}"
   echo "====== PUBLISHING: ${DESTDIR} ====="
diff --git a/scripts/update-version.sh b/scripts/update-version.sh
index c28f515f4e..cbeb25005a 100755
--- a/scripts/update-version.sh
+++ b/scripts/update-version.sh
@@ -26,7 +26,8 @@ for PACKAGE in \
   ng2-alfresco-upload \
   ng2-alfresco-viewer \
   ng2-alfresco-webscript \
-  ng2-alfresco-tag
+  ng2-alfresco-tag \
+  ng2-activiti-analytics
 do
   DESTDIR="$DIR/../ng2-components/${PACKAGE}"
   echo "====== UPDATE VERSION of ${PACKAGE} to ${VERSION} version in all the package.json ======"
@@ -45,7 +46,8 @@ for PACKAGE in \
   ng2-alfresco-upload \
   ng2-alfresco-viewer \
   ng2-alfresco-webscript \
-  ng2-alfresco-tag
+  ng2-alfresco-tag \
+  ng2-activiti-analytics
 do
   DESTDIR="$DIR/../ng2-components/${PACKAGE}"
   echo "====== UPDATE VERSION OF ${PACKAGE} to ${VERSION} version ======"

From 12f8ddd7edb899f2e2173f3ef06a24f203008713 Mon Sep 17 00:00:00 2001
From: Mario Romano <dnamario@hotmail.com>
Date: Thu, 22 Sep 2016 00:11:51 +0100
Subject: [PATCH 17/29] fix tslint

---
 .../src/components/analytics.component.ts                      | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts
index aa8455dc56..dae27819a5 100644
--- a/ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts
+++ b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts
@@ -30,9 +30,10 @@ declare let __moduleName: string;
 })
 export class AnalyticsComponent {
 
-    constructor(){
+    constructor() {
         console.log('AnalyticsComponent');
     }
+
     // lineChart
     public lineChartData: Array<any> = [
         [65, 59, 80, 81, 56, 55, 40],

From c33a846edd620f255920a9d76deec3100bb9ef39 Mon Sep 17 00:00:00 2001
From: Mario Romano <dnamario@hotmail.com>
Date: Thu, 22 Sep 2016 10:33:01 +0100
Subject: [PATCH 18/29] add first test

---
 .../ng2-activiti-analytics/karma-test-shim.js |  1 +
 .../components/analytics.component.spec.ts    | 31 +++++++++++++++++++
 2 files changed, 32 insertions(+)
 create mode 100644 ng2-components/ng2-activiti-analytics/src/components/analytics.component.spec.ts

diff --git a/ng2-components/ng2-activiti-analytics/karma-test-shim.js b/ng2-components/ng2-activiti-analytics/karma-test-shim.js
index c5e3b8a8c6..5a6d23240a 100644
--- a/ng2-components/ng2-activiti-analytics/karma-test-shim.js
+++ b/ng2-components/ng2-activiti-analytics/karma-test-shim.js
@@ -18,6 +18,7 @@ var packages = {
     'app': { main: 'main.js',  defaultExtension: 'js' },
     'rxjs': { defaultExtension: 'js' },
     'ng2-translate': { defaultExtension: 'js' },
+    'ng2-charts': { defaultExtension: 'js' },
     'ng2-alfresco-core': { main: 'index.js', defaultExtension: 'js' }
 };
 
diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics.component.spec.ts b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.spec.ts
new file mode 100644
index 0000000000..e79859d36d
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.spec.ts
@@ -0,0 +1,31 @@
+/*!
+ * @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 { describe, expect, it, inject } from '@angular/core/testing';
+import { TestComponentBuilder } from '@angular/compiler/testing';
+import { AnalyticsComponent } from './analytics.component';
+
+describe('Show component HTML', () => {
+    it('Display component tag base-chart', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+        return tcb
+            .createAsync(AnalyticsComponent)
+            .then((fixture) => {
+                let element = fixture.nativeElement;
+                expect(element.getElementsByTagName('base-chart')[0].innerHTML).toBeDefined();
+            });
+    }));
+});

From 01c16c25fdb7f88be66c4206813bb44d133ab4fd Mon Sep 17 00:00:00 2001
From: mauriziovitale84 <maurizio.vitale@alfresco.com>
Date: Thu, 22 Sep 2016 10:50:06 +0100
Subject: [PATCH 19/29] Fix build errors

---
 .../app/components/activiti/activiti-demo.component.ts | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts b/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts
index 02cb33ae3b..27dc8394a4 100644
--- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts
+++ b/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts
@@ -88,14 +88,6 @@ export class ActivitiDemoComponent implements AfterViewChecked {
     dataTasks: ObjectDataTableAdapter;
     dataProcesses: ObjectDataTableAdapter;
 
-    isProcessListSelected() {
-        return this.currentChoice === 'process-list';
-    }
-
-    isTaskListSelected() {
-        return this.currentChoice === 'task-list';
-    }
-
     constructor(private route: ActivatedRoute) {
         this.dataTasks = new ObjectDataTableAdapter(
             [],
@@ -135,7 +127,7 @@ export class ActivitiDemoComponent implements AfterViewChecked {
         this.processFilter = null;
         this.currentProcessInstanceId = null;
 
-        this.changeTab('apps','tasks');
+        this.changeTab('apps', 'tasks');
     }
 
     changeTab(origin: string, destination: string) {

From a91119447ac13a6581a8577431365cf6ef3540cf Mon Sep 17 00:00:00 2001
From: Mario Romano <dnamario@hotmail.com>
Date: Thu, 22 Sep 2016 11:21:19 +0100
Subject: [PATCH 20/29] add build demo doc

---
 ng2-components/README.md | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/ng2-components/README.md b/ng2-components/README.md
index 56ef91ae5f..63d49c2e4a 100644
--- a/ng2-components/README.md
+++ b/ng2-components/README.md
@@ -54,3 +54,38 @@
 You can browse all the components at the following address:
 
 http://devproducts.alfresco.com/
+
+### How to test a change to a generic component in its own demo
+
+Let's suppose that for some reason you have changed a component and you want to test this changes.
+The example is based on the ng2-alfresco-login component, but you can use the same steps for any component.
+
+
+1.  Move inside the component folder and link it.
+```sh
+
+cd ng2-alfresco-login
+npm link
+
+```
+
+2.  Build the component with the watcher enabled.
+```sh
+
+npm run build:w
+
+```
+
+3. Move inside the demo folder and link the component to the local node_modules folder.
+```sh
+
+cd demo
+npm link ng2-alfresco-login
+
+```
+
+4. Start the demo project.
+```sh
+
+npm run start
+```
\ No newline at end of file

From d73a95b4fd0549b0e56e2794020c4165931e2b6a Mon Sep 17 00:00:00 2001
From: Mario Romano <dnamario@hotmail.com>
Date: Thu, 22 Sep 2016 12:12:47 +0100
Subject: [PATCH 21/29] Update README.md

---
 ng2-components/README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ng2-components/README.md b/ng2-components/README.md
index 63d49c2e4a..b31c28df84 100644
--- a/ng2-components/README.md
+++ b/ng2-components/README.md
@@ -55,7 +55,7 @@ You can browse all the components at the following address:
 
 http://devproducts.alfresco.com/
 
-### How to test a change to a generic component in its own demo
+## How to test a change to a generic component in its own demo
 
 Let's suppose that for some reason you have changed a component and you want to test this changes.
 The example is based on the ng2-alfresco-login component, but you can use the same steps for any component.
@@ -88,4 +88,4 @@ npm link ng2-alfresco-login
 ```sh
 
 npm run start
-```
\ No newline at end of file
+```

From eb3a81252561a67d62833231d1457dc9e4b669f5 Mon Sep 17 00:00:00 2001
From: mauriziovitale84 <maurizio.vitale@alfresco.com>
Date: Thu, 22 Sep 2016 14:45:03 +0100
Subject: [PATCH 22/29] Add property showNextTask and refactoring

---
 .../activiti-task-details.component.html      |  8 +-
 .../activiti-task-details.component.ts        | 74 ++++++++++++++++---
 2 files changed, 67 insertions(+), 15 deletions(-)

diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.html b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.html
index 6e91517b49..46992cb1b1 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.html
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.html
@@ -22,11 +22,11 @@
         </div>
     </div>
     <activiti-form *ngIf="hasFormKey()" [taskId]="taskDetails.id"
-                   [showTitle]="showTitle"
+                   [showTitle]="showFormTitle"
                    [showRefreshButton]="showRefreshButton"
-                   [showCompleteButton]="showCompleteButton"
-                   [showSaveButton]="showSaveButton"
-                   [readOnly]="readOnly"
+                   [showCompleteButton]="showFormCompleteButton"
+                   [showSaveButton]="showFormSaveButton"
+                   [readOnly]="readOnlyForm"
                    (formSaved)='formSavedEmitter($event)'
                    (formCompleted)='formCompletedEmitter($event)'
                    (formLoaded)='formLoadedEmitter($event)'
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.ts
index c6449a6149..5d4bbf7950 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.ts
@@ -25,6 +25,7 @@ import { ActivitiPeople } from './activiti-people.component';
 import { TaskDetailsModel } from '../models/task-details.model';
 import { User } from '../models/user.model';
 import { ActivitiForm, FormModel, FormService } from 'ng2-activiti-form';
+import { TaskQueryRequestRepresentationModel } from '../models/filter.model';
 
 
 declare let componentHandler: any;
@@ -40,9 +41,6 @@ declare let __moduleName: string;
 })
 export class ActivitiTaskDetails implements OnInit, OnChanges {
 
-    @Input()
-    taskId: string;
-
     @ViewChild('activiticomments')
     activiticomments: any;
 
@@ -50,19 +48,25 @@ export class ActivitiTaskDetails implements OnInit, OnChanges {
     activitichecklist: any;
 
     @Input()
-    showTitle: boolean = true;
+    taskId: string;
 
     @Input()
-    showCompleteButton: boolean = true;
+    showNextTask: boolean = true;
 
     @Input()
-    showSaveButton: boolean = true;
+    showFormTitle: boolean = true;
 
     @Input()
-    readOnly: boolean = false;
+    showFormCompleteButton: boolean = true;
 
     @Input()
-    showRefreshButton: boolean = true;
+    showFormSaveButton: boolean = true;
+
+    @Input()
+    readOnlyForm: boolean = false;
+
+    @Input()
+    showFormRefreshButton: boolean = true;
 
     @Output()
     formSaved = new EventEmitter();
@@ -127,10 +131,14 @@ export class ActivitiTaskDetails implements OnInit, OnChanges {
         this.taskDetails = null;
     }
 
+    /**
+     * Check if the task has a form
+     * @returns {TaskDetailsModel|string|boolean}
+     */
     hasFormKey() {
-        return this.taskDetails
+        return (this.taskDetails
             && this.taskDetails.formKey
-            && this.taskDetails.formKey !== 'null';
+            && this.taskDetails.formKey !== 'null');
     }
 
     /**
@@ -146,7 +154,7 @@ export class ActivitiTaskDetails implements OnInit, OnChanges {
                     this.taskDetails = res;
 
                     let endDate: any = res.endDate;
-                    this.readOnly = !!(endDate && !isNaN(endDate.getTime()));
+                    this.readOnlyForm = !!(endDate && !isNaN(endDate.getTime()));
 
                     if (this.taskDetails && this.taskDetails.involvedPeople) {
                         this.taskDetails.involvedPeople.forEach((user) => {
@@ -169,6 +177,31 @@ export class ActivitiTaskDetails implements OnInit, OnChanges {
         }
     }
 
+    /**
+     * Retrieve the next open task
+     * @param processInstanceId
+     * @param processDefinitionId
+     */
+    loadNextTask(processInstanceId: string, processDefinitionId: string) {
+        let requestNode = new TaskQueryRequestRepresentationModel(
+            {
+                processInstanceId: processInstanceId,
+                processDefinitionId: processDefinitionId
+            }
+        );
+        this.activitiTaskList.getTasks(requestNode).subscribe(
+            (response) => {
+                if (response.data && response.data.length > 0) {
+                    this.taskDetails = response.data[0];
+                } else {
+                    this.reset();
+                }
+            }, (error) => {
+                console.error(error);
+                this.onError.emit(error);
+            });
+    }
+
     /**
      * Complete the activiti task
      */
@@ -194,6 +227,9 @@ export class ActivitiTaskDetails implements OnInit, OnChanges {
      */
     formCompletedEmitter(data: any) {
         this.formCompleted.emit(data);
+        if (this.isShowNextTask()) {
+            this.loadNextTask(this.taskDetails.processInstanceId, this.taskDetails.processDefinitionId);
+        }
     }
 
     /**
@@ -204,11 +240,27 @@ export class ActivitiTaskDetails implements OnInit, OnChanges {
         this.formLoaded.emit(data);
     }
 
+    /**
+     * Emit the error event of the form
+     * @param data
+     */
     onErrorEmitter(err: any) {
         this.onError.emit(err);
     }
 
+    /**
+     * Emit the execute outcome of the form
+     * @param data
+     */
     executeOutcomeEmitter(data: any) {
         this.executeOutcome.emit(data);
     }
+
+    /**
+     * Return the showNexTask value
+     * @returns {boolean}
+     */
+    isShowNextTask(): boolean {
+        return this.showNextTask;
+    }
 }

From 1dffc2d10029b10c58a5706db47a1e4e61237159 Mon Sep 17 00:00:00 2001
From: mauriziovitale84 <maurizio.vitale@alfresco.com>
Date: Thu, 22 Sep 2016 14:45:12 +0100
Subject: [PATCH 23/29] Fix documentation

---
 ng2-components/ng2-activiti-tasklist/README.md | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/ng2-components/ng2-activiti-tasklist/README.md b/ng2-components/ng2-activiti-tasklist/README.md
index 374581a818..c8b225ebc9 100644
--- a/ng2-components/ng2-activiti-tasklist/README.md
+++ b/ng2-components/ng2-activiti-tasklist/README.md
@@ -106,8 +106,13 @@ The component shows the details of the task id passed in input
 
 #### Options
 
-**taskId**: { string } required) The id of the task details that we
-are asking for.
+**taskId**: { string } required) The id of the task details that we are asking for.
+**showNextTask**: { boolean } optional) Automatically render the next one, when the task is completed.
+**showFormTitle**: { boolean } optional) Toggle rendering of the form title. 
+**readOnlyForm**: { boolean } optional) Toggle readonly state of the form. Enforces all form widgets render readonly if enabled.
+**showFormRefreshButton**: { boolean } optional) Toggle rendering of the `Refresh` button.
+**showFormSaveButton**: { boolean } optional) Toggle rendering of the `Save` outcome button. 
+**showFormCompleteButton**: { boolean } optional) Toggle rendering of the Form `Complete` outcome button
 
 ### Custom 'empty Activiti Task Details' template
 

From faf4d7eeaca0573b07fd2aea19c6cb3d39f92459 Mon Sep 17 00:00:00 2001
From: Will Abson <will.abson@alfresco.com>
Date: Thu, 22 Sep 2016 14:55:25 +0100
Subject: [PATCH 24/29] Add new Start Task button

Refs #530
---
 .../activiti/activiti-demo.component.html     |   1 +
 .../activiti/activiti-demo.component.ts       |   9 +-
 .../activiti-start-process.component.html     |   2 +-
 ng2-components/ng2-activiti-tasklist/index.ts |   3 +
 .../activiti-start-task.component.css         |   7 ++
 .../activiti-start-task.component.html        |  19 ++++
 .../activiti-start-task.component.ts          | 105 ++++++++++++++++++
 .../components/activiti-tasklist.component.ts |   7 ++
 .../ng2-activiti-tasklist/src/i18n/en.json    |  16 ++-
 .../src/models/task-details.model.ts          |   1 +
 .../activiti-tasklist.service.spec.ts         |  33 ++++++
 .../src/services/activiti-tasklist.service.ts |  17 +++
 12 files changed, 216 insertions(+), 4 deletions(-)
 create mode 100644 ng2-components/ng2-activiti-tasklist/src/components/activiti-start-task.component.css
 create mode 100644 ng2-components/ng2-activiti-tasklist/src/components/activiti-start-task.component.html
 create mode 100644 ng2-components/ng2-activiti-tasklist/src/components/activiti-start-task.component.ts

diff --git a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html
index 08cf0aca94..fd462fa8bd 100644
--- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html
+++ b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html
@@ -19,6 +19,7 @@
                 <div class="mdl-grid">
                     <div class="mdl-cell mdl-cell--2-col task-column mdl-shadow--2dp">
                         <span>Task Filters</span>
+                        <activiti-start-task [appId]="appId" (onSuccess)="onStartTaskSuccess($event)"></activiti-start-task>
                         <activiti-filters [appId]="appId" (filterClick)="onTaskFilterClick($event)" (onSuccess)="onSuccessTaskFilterList($event)"
                                           #activitifilter></activiti-filters>
                     </div>
diff --git a/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts b/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts
index 27dc8394a4..cc89a8e2b8 100644
--- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts
+++ b/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts
@@ -20,7 +20,8 @@ import { ALFRESCO_TASKLIST_DIRECTIVES,
     AppDefinitionRepresentationModel,
     FilterRepresentationModel,
     UserTaskFilterRepresentationModel,
-    ActivitiApps
+    ActivitiApps,
+    ActivitiTaskList
 } from 'ng2-activiti-tasklist';
 import { ACTIVITI_PROCESSLIST_DIRECTIVES } from 'ng2-activiti-processlist';
 import { ActivitiForm } from 'ng2-activiti-form';
@@ -53,7 +54,7 @@ export class ActivitiDemoComponent implements AfterViewChecked {
     activitidetails: any;
 
     @ViewChild('activititasklist')
-    activititasklist: any;
+    activititasklist: ActivitiTaskList;
 
     @ViewChild('activitiprocessfilter')
     activitiprocessfilter: any;
@@ -146,6 +147,10 @@ export class ActivitiDemoComponent implements AfterViewChecked {
         this.taskFilter = this.activitifilter.getCurrentFilter();
     }
 
+    onStartTaskSuccess(event: any) {
+        this.activititasklist.reload();
+    }
+
     onSuccessTaskList(event: UserTaskFilterRepresentationModel) {
         this.currentTaskId = this.activititasklist.getCurrentTaskId();
     }
diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-start-process.component.html b/ng2-components/ng2-activiti-processlist/src/components/activiti-start-process.component.html
index e5ca33e2be..f33ad4fb17 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/activiti-start-process.component.html
+++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-start-process.component.html
@@ -12,7 +12,7 @@
             <label class="mdl-textfield__label" for="processDefinition">{{'START_PROCESS.DIALOG.LABEL.TYPE'|translate}}</label>
         </div>
         <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-            <input class="mdl-textfield__input" type="text" [(ngModel)]="name" rows="1" id="processName" />
+            <input class="mdl-textfield__input" type="text" [(ngModel)]="name" id="processName" />
             <label class="mdl-textfield__label" for="processName">{{'START_PROCESS.DIALOG.LABEL.NAME'|translate}}</label>
         </div>
     </div>
diff --git a/ng2-components/ng2-activiti-tasklist/index.ts b/ng2-components/ng2-activiti-tasklist/index.ts
index edc055d35d..47b081f70c 100644
--- a/ng2-components/ng2-activiti-tasklist/index.ts
+++ b/ng2-components/ng2-activiti-tasklist/index.ts
@@ -16,6 +16,7 @@
  */
 
 import { ActivitiApps } from './src/components/activiti-apps.component';
+import { ActivitiStartProcessButton } from './src/components/activiti-start-task.component';
 import { ActivitiTaskList } from './src/components/activiti-tasklist.component';
 import { ActivitiTaskDetails } from './src/components/activiti-task-details.component';
 import { ActivitiFilters } from './src/components/activiti-filters.component';
@@ -23,6 +24,7 @@ import { NoTaskDetailsTemplateComponent } from './src/components/no-task-detail-
 
 export * from './src/components/activiti-apps.component';
 export * from './src/components/activiti-tasklist.component';
+export * from './src/components/activiti-start-task.component';
 export * from './src/services/activiti-tasklist.service';
 export * from  './src/models/filter.model';
 
@@ -30,6 +32,7 @@ export const ALFRESCO_TASKLIST_DIRECTIVES: [any] = [
     NoTaskDetailsTemplateComponent,
     ActivitiApps,
     ActivitiFilters,
+    ActivitiStartProcessButton,
     ActivitiTaskList,
     ActivitiTaskDetails
 ];
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-start-task.component.css b/ng2-components/ng2-activiti-tasklist/src/components/activiti-start-task.component.css
new file mode 100644
index 0000000000..ff0f8dd865
--- /dev/null
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-start-task.component.css
@@ -0,0 +1,7 @@
+:host {
+    width: 100%;
+}
+
+.activiti-label {
+    font-weight: bolder;
+}
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-start-task.component.html b/ng2-components/ng2-activiti-tasklist/src/components/activiti-start-task.component.html
new file mode 100644
index 0000000000..837e1730fb
--- /dev/null
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-start-task.component.html
@@ -0,0 +1,19 @@
+<button type="button" (click)="showDialog()" class="mdl-button">{{'START_TASK.BUTTON'|translate}}</button>
+
+<dialog class="mdl-dialog" #dialog>
+    <h4 class="mdl-dialog__title">{{'START_TASK.DIALOG.TITLE'|translate}}</h4>
+    <div class="mdl-dialog__content">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+            <input class="mdl-textfield__input" type="text" [(ngModel)]="name" id="taskName" />
+            <label class="mdl-textfield__label" for="taskName">{{'START_TASK.DIALOG.LABEL.NAME'|translate}}</label>
+        </div>
+        <div class="mdl-textfield mdl-js-textfield">
+            <textarea class="mdl-textfield__input" type="text" [(ngModel)]="description" rows="3" id="taskDescription"></textarea>
+            <label class="mdl-textfield__label" for="taskDescription">{{'START_TASK.DIALOG.LABEL.DESCRIPTION'|translate}}</label>
+        </div>
+    </div>
+    <div class="mdl-dialog__actions">
+        <button type="button" (click)="start()" class="mdl-button">{{'START_TASK.DIALOG.ACTION.START'|translate}}</button>
+        <button type="button" (click)="cancel()" class="mdl-button close">{{'START_TASK.DIALOG.ACTION.CANCEL'|translate}}</button>
+    </div>
+</dialog>
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-start-task.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-start-task.component.ts
new file mode 100644
index 0000000000..5340d5ac8c
--- /dev/null
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-start-task.component.ts
@@ -0,0 +1,105 @@
+/*!
+ * @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 } from '@angular/core';
+import { AlfrescoTranslationService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
+import { TaskDetailsModel } from '../models/task-details.model';
+import { ActivitiTaskListService } from './../services/activiti-tasklist.service';
+
+declare let componentHandler: any;
+declare let __moduleName: string;
+
+@Component({
+    selector: 'activiti-start-task',
+    moduleId: __moduleName,
+    templateUrl: './activiti-start-task.component.html',
+    styleUrls: ['./activiti-start-task.component.css'],
+    providers: [ActivitiTaskListService]
+})
+export class ActivitiStartProcessButton implements OnInit {
+
+    @Input()
+    appId: string;
+
+    @Output()
+    onSuccess: EventEmitter<any> = new EventEmitter<any>();
+
+    @ViewChild('dialog')
+    dialog: any;
+
+    name: string;
+    description: string;
+
+    /**
+     * Constructor
+     * @param auth
+     * @param translate
+     * @param taskService
+     */
+    constructor(private auth: AlfrescoAuthenticationService,
+                private translate: AlfrescoTranslationService,
+                private taskService: ActivitiTaskListService) {
+
+        if (translate) {
+            translate.addTranslationFolder('node_modules/ng2-activiti-tasklist/src');
+        }
+    }
+
+    ngOnInit() {
+    }
+
+    public start() {
+        if (this.name) {
+            this.taskService.createNewTask(new TaskDetailsModel({
+                name: this.name,
+                description: this.description,
+                category: this.appId ? '' + this.appId : null
+            })).subscribe(
+                (res: any) => {
+                    this.onSuccess.emit(res);
+                    this.closeDialog();
+                    this.resetForm();
+                },
+                (err) => {
+                    window.alert('An error occurred while trying to add the task');
+                    console.log(err);
+                }
+            );
+        }
+    }
+
+    public cancel() {
+        this.closeDialog();
+    }
+
+    public showDialog() {
+        if (this.dialog) {
+            this.dialog.nativeElement.showModal();
+        }
+    }
+
+    private closeDialog() {
+        if (this.dialog) {
+            this.dialog.nativeElement.close();
+        }
+    }
+
+    private resetForm() {
+        this.name = '';
+        this.description = '';
+    }
+}
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.ts
index ae8da9b896..39ecb41b38 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.ts
@@ -96,6 +96,13 @@ export class ActivitiTaskList implements OnInit, OnChanges {
         }
     }
 
+    public reload() {
+        if (this.taskFilter) {
+            let requestNode = this.convertTaskUserToTaskQuery(this.taskFilter);
+            this.load(new TaskQueryRequestRepresentationModel(requestNode));
+        }
+    }
+
     public load(requestNode: TaskQueryRequestRepresentationModel) {
         this.activiti.getTotalTasks(requestNode).subscribe(
             (res) => {
diff --git a/ng2-components/ng2-activiti-tasklist/src/i18n/en.json b/ng2-components/ng2-activiti-tasklist/src/i18n/en.json
index d83089f9f6..8d559cac14 100644
--- a/ng2-components/ng2-activiti-tasklist/src/i18n/en.json
+++ b/ng2-components/ng2-activiti-tasklist/src/i18n/en.json
@@ -36,5 +36,19 @@
     "MESSAGES": {
       "NONE": "No task filter selected."
     }
+  },
+  "START_TASK": {
+    "BUTTON": "Start Task",
+    "DIALOG": {
+      "TITLE": "Start Task",
+      "LABEL": {
+        "NAME": "Name",
+        "DESCRIPTION": "Description"
+      },
+      "ACTION": {
+        "START": "Start",
+        "CANCEL": "Cancel"
+      }
+    }
   }
-}
\ No newline at end of file
+}
diff --git a/ng2-components/ng2-activiti-tasklist/src/models/task-details.model.ts b/ng2-components/ng2-activiti-tasklist/src/models/task-details.model.ts
index 7fdc4d37a6..e9408e7c6d 100644
--- a/ng2-components/ng2-activiti-tasklist/src/models/task-details.model.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/models/task-details.model.ts
@@ -64,6 +64,7 @@ export class TaskDetailsModel {
         this.priority = obj && obj.priority;
         this.assignee = new User(obj.assignee);
         this.adhocTaskCanBeReassigned = obj && obj.adhocTaskCanBeReassigned;
+        this.category = obj && obj.category || null;
         this.created = obj && obj.created || null;
         this.description = obj && obj.description || null;
         this.dueDate = obj && obj.dueDate || null;
diff --git a/ng2-components/ng2-activiti-tasklist/src/services/activiti-tasklist.service.spec.ts b/ng2-components/ng2-activiti-tasklist/src/services/activiti-tasklist.service.spec.ts
index f472d08e8a..0262585cb5 100644
--- a/ng2-components/ng2-activiti-tasklist/src/services/activiti-tasklist.service.spec.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/services/activiti-tasklist.service.spec.ts
@@ -477,5 +477,38 @@ describe('ActivitiTaskListService', () => {
         });
     });
 
+    it('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('');
+                done();
+            }
+        );
+
+        jasmine.Ajax.requests.mostRecent().respondWith({
+            'status': 200,
+            contentType: 'application/json',
+            responseText: JSON.stringify({
+                id: '777',
+                name: 'FakeNameTask',
+                description: 'FakeDescription',
+                category: '3',
+                assignee: fakeUser,
+                created: '2016-07-15T11:19:17.440+0000'
+            })
+        });
+    });
+
 });
 
diff --git a/ng2-components/ng2-activiti-tasklist/src/services/activiti-tasklist.service.ts b/ng2-components/ng2-activiti-tasklist/src/services/activiti-tasklist.service.ts
index c6c86e0db7..8bc00c94d6 100644
--- a/ng2-components/ng2-activiti-tasklist/src/services/activiti-tasklist.service.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/services/activiti-tasklist.service.ts
@@ -216,6 +216,19 @@ export class ActivitiTaskListService {
             }).catch(this.handleError);
     }
 
+    /**
+     * Create a new standalone task
+     * @param task - TaskDetailsModel
+     * @returns {TaskDetailsModel}
+     */
+    createNewTask(task: TaskDetailsModel): Observable<TaskDetailsModel> {
+        return Observable.fromPromise(this.callApiCreateTask(task))
+            .map(res => res)
+            .map((response: TaskDetailsModel) => {
+                return new TaskDetailsModel(response);
+            }).catch(this.handleError);
+    }
+
     private callApiTasksFiltered(requestNode: TaskQueryRequestRepresentationModel) {
         return this.authService.getAlfrescoApi().activiti.taskApi.listTasks(requestNode);
     }
@@ -256,6 +269,10 @@ export class ActivitiTaskListService {
         return this.authService.getAlfrescoApi().activiti.taskApi.completeTask(id);
     }
 
+    private callApiCreateTask(task: TaskDetailsModel) {
+        return this.authService.getAlfrescoApi().activiti.taskApi.createNewTask(task);
+    }
+
     private handleError(error: any) {
         console.error(error);
         return Observable.throw(error || 'Server error');

From 23af7f738fada448de97634dbac768bda0d1f0d8 Mon Sep 17 00:00:00 2001
From: Will Abson <will.abson@alfresco.com>
Date: Thu, 22 Sep 2016 14:56:52 +0100
Subject: [PATCH 25/29] Add Complete Task button for tasks with no form

- Allows standalone tasks to be completed

Refs #530
---
 .../src/components/activiti-task-details.component.html      | 4 +++-
 .../src/components/activiti-task-details.component.ts        | 5 +++++
 ng2-components/ng2-activiti-tasklist/src/i18n/en.json        | 3 +++
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.html b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.html
index 6e91517b49..836781bbaf 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.html
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.html
@@ -33,6 +33,8 @@
                    (onError)='onErrorEmitter($event)'
                    (executeOutcome)='executeOutcomeEmitter($event)'
                    #activitiForm>
-
     </activiti-form>
+    <button type="button" class="mdl-button" *ngIf="!hasFormKey() && isTaskActive()" (click)="onComplete()">
+        {{ 'TASK_DETAILS.BUTTON.COMPLETE' | translate }}
+    </button>
 </div>
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.ts
index c6449a6149..0a91e5df91 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.ts
@@ -133,6 +133,10 @@ export class ActivitiTaskDetails implements OnInit, OnChanges {
             && this.taskDetails.formKey !== 'null';
     }
 
+    isTaskActive() {
+        return this.taskDetails && this.taskDetails.duration === null;
+    }
+
     /**
      * Load the activiti task details
      * @param taskId
@@ -176,6 +180,7 @@ export class ActivitiTaskDetails implements OnInit, OnChanges {
         this.activitiTaskList.completeTask(this.taskId).subscribe(
             (res) => {
                 console.log(res);
+                this.formCompleted.emit(res);
             }
         );
     }
diff --git a/ng2-components/ng2-activiti-tasklist/src/i18n/en.json b/ng2-components/ng2-activiti-tasklist/src/i18n/en.json
index 8d559cac14..f55ebd1fb9 100644
--- a/ng2-components/ng2-activiti-tasklist/src/i18n/en.json
+++ b/ng2-components/ng2-activiti-tasklist/src/i18n/en.json
@@ -13,6 +13,9 @@
       "COMMENTS": "Comments",
       "CHECKLIST": "Checklist"
     },
+    "BUTTON": {
+      "COMPLETE": "Complete"
+    },
     "MESSAGES": {
       "NONE": "No task details found."
     },

From 6c85aa7105cbdf46cdd400b527e958fd73821a3d Mon Sep 17 00:00:00 2001
From: Will Abson <will.abson@alfresco.com>
Date: Thu, 22 Sep 2016 14:57:42 +0100
Subject: [PATCH 26/29] Remove console.log() statement

---
 .../src/components/activiti-task-details.component.ts            | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.ts
index 0a91e5df91..67b15c1cc4 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.ts
@@ -164,7 +164,6 @@ export class ActivitiTaskDetails implements OnInit, OnChanges {
                     if (this.activitichecklist) {
                         this.activitichecklist.load(this.taskDetails.id);
                     }
-                    console.log(this.taskDetails);
 
                 }
             );

From 25a694ebd801683f5a06d456c10aae7c857d97a5 Mon Sep 17 00:00:00 2001
From: Will Abson <will.abson@alfresco.com>
Date: Thu, 22 Sep 2016 16:29:08 +0100
Subject: [PATCH 27/29] Add additional test for component's new reload() method

Refs #530
---
 .../activiti-tasklist.component.spec.ts         | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.spec.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.spec.ts
index bea68053ea..7c1f093df0 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.spec.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.spec.ts
@@ -132,6 +132,23 @@ describe('ActivitiTaskList', () => {
         taskList.ngOnInit();
     });
 
+    it('should reload tasks when reload() is called', (done) => {
+        spyOn(taskList.activiti, 'getTotalTasks').and.returnValue(Observable.fromPromise(fakeGlobalTotalTasksPromise));
+        spyOn(taskList.activiti, 'getTasks').and.returnValue(Observable.fromPromise(fakeGlobalTaskPromise));
+        taskList.taskFilter = new UserTaskFilterRepresentationModel({filter: { state: 'open', assignment: 'fake-assignee'}});
+        taskList.ngOnInit();
+        taskList.onSuccess.subscribe( (res) => {
+            expect(res).toBeDefined();
+            expect(taskList.data).toBeDefined();
+            expect(taskList.isTaskListEmpty()).not.toBeTruthy();
+            expect(taskList.data.getRows().length).toEqual(2);
+            expect(taskList.data.getRows()[0].getValue('name')).toEqual('fake-long-name-fake-long-name-fake-long-name-fak50...');
+            expect(taskList.data.getRows()[1].getValue('name')).toEqual('Nameless task');
+            done();
+        });
+        taskList.reload();
+    });
+
     it('should emit row click event', (done) => {
         let row = new ObjectDataRow({
             id: 999

From 63a7b27eedf4caddba55010360af0f509957104d Mon Sep 17 00:00:00 2001
From: mauriziovitale84 <maurizio.vitale@alfresco.com>
Date: Thu, 22 Sep 2016 17:06:08 +0100
Subject: [PATCH 28/29] Refactoring and fix unit test

---
 .../components/activiti-filters.component.ts  | 38 +++++++++-----
 .../activiti-filters.component.spec.ts        | 52 ++++++++++++++++++-
 .../components/activiti-filters.component.ts  | 40 +++++++++-----
 3 files changed, 104 insertions(+), 26 deletions(-)

diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-filters.component.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-filters.component.ts
index 039c2571b3..46cb8178a6 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/activiti-filters.component.ts
+++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-filters.component.ts
@@ -77,30 +77,40 @@ export class ActivitiProcessFilters implements OnInit, OnChanges {
             this.filters.push(filter);
         });
 
-        this.load();
+        this.getFilters(this.appId, this.appName);
     }
 
     ngOnChanges(changes: SimpleChanges) {
         let appId = changes['appId'];
         if (appId && (appId.currentValue || appId.currentValue === null)) {
-            this.load();
+            this.getFiltersByAppId(appId.currentValue);
+            return;
+        }
+        let appName = changes['appName'];
+        if (appName && appName.currentValue) {
+            this.getFiltersByAppName(appName.currentValue);
             return;
         }
     }
 
     /**
-     * The method call the adapter data table component for render the task list
-     * @param tasks
+     * Return the task list filtered by appId or by appName
+     * @param appId
+     * @param appName
      */
-    private load() {
-        if (this.appName) {
-            this.filterByAppName();
+    getFilters(appId?: string, appName?: string) {
+        if (appName) {
+            this.getFiltersByAppName(appName);
         } else {
-            this.filterByAppId(this.appId);
+            this.getFiltersByAppId(appId);
         }
     }
 
-    private filterByAppId(appId) {
+    /**
+     * Return the filter list filtered by appId
+     * @param appId - optional
+     */
+    getFiltersByAppId(appId?: string) {
         this.activiti.getProcessFilters(appId).subscribe(
             (res: FilterRepresentationModel[]) => {
                 this.resetFilter();
@@ -117,10 +127,14 @@ export class ActivitiProcessFilters implements OnInit, OnChanges {
         );
     }
 
-    private filterByAppName() {
-        this.activiti.getDeployedApplications(this.appName).subscribe(
+    /**
+     * Return the filter list filtered by appName
+     * @param appName
+     */
+    getFiltersByAppName(appName: string) {
+        this.activiti.getDeployedApplications(appName).subscribe(
             application => {
-                this.filterByAppId(application.id);
+                this.getFiltersByAppId(application.id);
                 this.selectFirstFilter();
             },
             (err) => {
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-filters.component.spec.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-filters.component.spec.ts
index 04c5783015..4ca2831f56 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-filters.component.spec.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-filters.component.spec.ts
@@ -21,7 +21,7 @@ import {
     expect,
     beforeEach
 } from '@angular/core/testing';
-
+import { SimpleChange } from '@angular/core';
 import { ActivitiFilters } from './activiti-filters.component';
 import { ActivitiTaskListService } from '../services/activiti-tasklist.service';
 import { Observable } from 'rxjs/Rx';
@@ -89,6 +89,7 @@ describe('ActivitiFilters', () => {
     });
 
     it('should emit an error with a bad response', (done) => {
+        filterList.appId = '1';
         spyOn(filterList.activiti, 'getTaskListFilters').and.returnValue(Observable.fromPromise(fakeErrorFilterPromise));
 
         filterList.onError.subscribe((err) => {
@@ -99,6 +100,18 @@ describe('ActivitiFilters', () => {
         filterList.ngOnInit();
     });
 
+    it('should emit an error with a bad response', (done) => {
+        filterList.appName = 'fake-app';
+        spyOn(filterList.activiti, 'getDeployedApplications').and.returnValue(Observable.fromPromise(fakeErrorFilterPromise));
+
+        filterList.onError.subscribe((err) => {
+            expect(err).toBeDefined();
+            done();
+        });
+
+        filterList.ngOnInit();
+    });
+
     it('should emit an event when a filter is selected', (done) => {
         let currentFilter = new FilterRepresentationModel({filter: { state: 'open', assignment:  'fake-involved'}});
 
@@ -112,4 +125,41 @@ describe('ActivitiFilters', () => {
         filterList.selectFilter(currentFilter);
     });
 
+    it('should reload filters by appId on binding changes', () => {
+        spyOn(filterList, 'getFiltersByAppId').and.stub();
+        const appId = '1';
+
+        let change = new SimpleChange(null, appId);
+        filterList.ngOnChanges({ 'appId': change });
+
+        expect(filterList.getFiltersByAppId).toHaveBeenCalledWith(appId);
+    });
+
+    it('should reload filters by appId null on binding changes', () => {
+        spyOn(filterList, 'getFiltersByAppId').and.stub();
+        const appId = null;
+
+        let change = new SimpleChange(null, appId);
+        filterList.ngOnChanges({ 'appId': change });
+
+        expect(filterList.getFiltersByAppId).toHaveBeenCalledWith(appId);
+    });
+
+    it('should reload filters by app name on binding changes', () => {
+        spyOn(filterList, 'getFiltersByAppName').and.stub();
+        const appName = 'fake-app-name';
+
+        let change = new SimpleChange(null, appName);
+        filterList.ngOnChanges({ 'appName': change });
+
+        expect(filterList.getFiltersByAppName).toHaveBeenCalledWith(appName);
+    });
+
+    it('should return the current filter after one is selected', () => {
+        let filter = new FilterRepresentationModel({name: 'FakeMyTasks', filter: { state: 'open', assignment: 'fake-assignee'}});
+        expect(filterList.currentFilter).toBeUndefined();
+        filterList.selectFilter(filter);
+        expect(filterList.getCurrentFilter()).toBe(filter);
+    });
+
 });
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-filters.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-filters.component.ts
index 931e205783..9355ee363d 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-filters.component.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-filters.component.ts
@@ -77,37 +77,47 @@ export class ActivitiFilters implements OnInit, OnChanges {
             this.filters.push(filter);
         });
 
-        this.load();
+        this.getFilters(this.appId, this.appName);
     }
 
     ngOnChanges(changes: SimpleChanges) {
         let appId = changes['appId'];
         if (appId && (appId.currentValue || appId.currentValue === null)) {
-            this.load();
+            this.getFiltersByAppId(appId.currentValue);
+            return;
+        }
+        let appName = changes['appName'];
+        if (appName && appName.currentValue) {
+            this.getFiltersByAppName(appName.currentValue);
             return;
         }
     }
 
     /**
-     * The method call the adapter data table component for render the task list
-     * @param tasks
+     * Return the task list filtered by appId or by appName
+     * @param appId
+     * @param appName
      */
-    private load() {
-        if (this.appName) {
-            this.filterByAppName();
+    getFilters(appId?: string, appName?: string) {
+        if (appName) {
+            this.getFiltersByAppName(appName);
         } else {
-            this.filterByAppId(this.appId);
+            this.getFiltersByAppId(appId);
         }
     }
 
-    private filterByAppId(appId) {
+    /**
+     * Return the filter list filtered by appId
+     * @param appId - optional
+     */
+    getFiltersByAppId(appId?: string) {
         this.activiti.getTaskListFilters(appId).subscribe(
             (res: FilterRepresentationModel[]) => {
                 this.resetFilter();
                 res.forEach((filter) => {
                     this.filterObserver.next(filter);
-                    this.selectFirstFilter();
                 });
+                this.selectFirstFilter();
                 this.onSuccess.emit(res);
             },
             (err) => {
@@ -117,10 +127,14 @@ export class ActivitiFilters implements OnInit, OnChanges {
         );
     }
 
-    private filterByAppName() {
-        this.activiti.getDeployedApplications(this.appName).subscribe(
+    /**
+     * Return the filter list filtered by appName
+     * @param appName
+     */
+    getFiltersByAppName(appName: string) {
+        this.activiti.getDeployedApplications(appName).subscribe(
             application => {
-                this.filterByAppId(application.id);
+                this.getFiltersByAppId(application.id);
                 this.selectFirstFilter();
             },
             (err) => {

From a2e5bca63e9d62fe90d14a33a7b8526729bdeaff Mon Sep 17 00:00:00 2001
From: mauriziovitale84 <maurizio.vitale@alfresco.com>
Date: Thu, 22 Sep 2016 17:06:17 +0100
Subject: [PATCH 29/29] Improve test coverage

---
 .../activiti-tasklist.component.spec.ts        | 18 +++++++++++++++++-
 .../components/activiti-tasklist.component.ts  |  2 +-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.spec.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.spec.ts
index bea68053ea..6e0780a68f 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.spec.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.spec.ts
@@ -21,7 +21,7 @@ import {
     expect,
     beforeEach
 } from '@angular/core/testing';
-
+import { SimpleChange } from '@angular/core';
 import { ActivitiTaskList } from './activiti-tasklist.component';
 import { ActivitiTaskListService } from '../services/activiti-tasklist.service';
 import { UserTaskFilterRepresentationModel } from '../models/filter.model';
@@ -120,6 +120,11 @@ describe('ActivitiTaskList', () => {
         taskList.ngOnInit();
     });
 
+    it('should return a currentId null when the taskList is empty', () => {
+        taskList.selectFirstTask();
+        expect(taskList.getCurrentTaskId()).toBeNull();
+    });
+
     it('should throw an exception when the response is wrong', (done) => {
         spyOn(taskList.activiti, 'getTotalTasks').and.returnValue(Observable.fromPromise(fakeErrorTaskPromise));
         taskList.taskFilter = new UserTaskFilterRepresentationModel({filter: { state: 'open', assignment: 'fake-assignee'}});
@@ -140,10 +145,21 @@ describe('ActivitiTaskList', () => {
 
         taskList.rowClick.subscribe(taskId => {
             expect(taskId).toEqual(999);
+            expect(taskList.getCurrentTaskId()).toEqual(999);
             done();
         });
 
         taskList.onRowClick(rowEvent);
     });
 
+    it('should reload task list by filter on binding changes', () => {
+        spyOn(taskList, 'load').and.stub();
+        const taskFilter = new UserTaskFilterRepresentationModel({filter: { state: 'open', assignment: 'fake-assignee'}});
+
+        let change = new SimpleChange(null, taskFilter);
+        taskList.ngOnChanges({ 'taskFilter': change });
+
+        expect(taskList.load).toHaveBeenCalled();
+    });
+
 });
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.ts
index ae8da9b896..f825d9362f 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.ts
@@ -146,7 +146,7 @@ export class ActivitiTaskList implements OnInit, OnChanges {
     /**
      * Select the first task of a tasklist if present
      */
-    private selectFirstTask() {
+    selectFirstTask() {
         if (!this.isTaskListEmpty()) {
             this.currentTaskId = this.data.getRows()[0].getValue('id');
         } else {