[ADF-907] - Form reacts to data added in input (#2016 )

* [ADF-907] Enable activiti form to react on value data changes * [ADF-907] - Form reacts to data added in input] * [ADF - 907] added mock json for form * [ADF-907] added new event of the form to the event list * [ADF - 907] Added return column to README * [ADF - 907] Added return column to README
Fix upload related content (#2019 )
2026-09-16 18:13:06 +00:00 · 2017-06-27 14:30:49 +01:00 · 2017-06-27 14:10:10 +01:00 · 2017-06-27 13:17:13 +01:00 · 2017-06-27 12:59:01 +01:00 · 2017-06-27 10:18:33 +01:00
818 changed files with 167637 additions and 13669 deletions
@@ -6,12 +6,12 @@ Please ask before on our gitter channel https://gitter.im/Alfresco/alfresco-ng2-
 -->

 **Type of issue:**  (check with "[x]")
-```
- [ ] New feature request
- [ ] Bug  
- [ ] Support request
- [ ] Documentation
-```
+
+> - [ ] New feature request
+> - [ ] Bug  
+> - [ ] Support request
+> - [ ] Documentation
+
 **Current behaviour:**
 <!-- Describe the current behaviour. -->

@@ -1,24 +1,24 @@
 **Please check if the PR fulfills these requirements**
-```
-[ ] The commit message follows our [guidelines](https://github.com/Alfresco/alfresco-ng2-components/wiki/Commit-format)
-[ ] Tests for the changes have been added (for bug fixes / features)
-[ ] Docs have been added / updated (for bug fixes / features)
-```
+
+> - [ ] The commit message follows our [guidelines](https://github.com/Alfresco/alfresco-ng2-components/wiki/Commit-format)
+> - [ ] Tests for the changes have been added (for bug fixes / features)
+> - [ ] Docs have been added / updated (for bug fixes / features)
+
 <!--
 Before submitting your PR, please check that your code follows our contribution guidelines:
 https://github.com/Alfresco/alfresco-ng2-components/wiki/Code-contribution-acceptance-criteria
 -->

 **What kind of change does this PR introduce?** (check one with "x")
-```
-[ ] Bugfix
-[ ] Feature
-[ ] Code style update (formatting, local variables)
-[ ] Refactoring (no functional changes, no api changes)
-[ ] Build related changes
-[ ] Documentation
-[ ] Other... Please describe:
-```
+
+> - [ ] Bugfix
+> - [ ] Feature
+> - [ ] Code style update (formatting, local variables)
+> - [ ] Refactoring (no functional changes, no api changes)
+> - [ ] Build related changes
+> - [ ] Documentation
+> - [ ] Other... Please describe:
+

 **What is the current behaviour?** (You can also link to an open issue here)

@@ -29,10 +29,10 @@


 **Does this PR introduce a breaking change?** (check one with "x")
-```
-[ ] Yes
-[ ] No
-```
+
+> - [ ] Yes
+> - [ ] No
+

 If this PR contains a breaking change, please describe the impact and migration path for existing applications: ...

@@ -14,3 +14,5 @@ src/environments/
 /ng2-components/config/coverage/
 *.npmrc
 /demo-shell-ng2/ng2-components/
+.happypack/
+.happypack/
@@ -2,7 +2,7 @@ language: node_js
 dist: trusty
 sudo: false
 node_js:
-  - "6"
+  - "8"

 before_install:
  - "export DISPLAY=:99.0"
@@ -38,7 +38,7 @@ script:
       fi
      fi

-# Send coverage data to Coveralls
+# Send coverage data to codecov
 after_success:
  bash <(curl -s https://codecov.io/bash) -X gcov

@@ -5,11 +5,9 @@
        "**/.svn": true,
        "**/.hg": true,
        "**/.DS_Store": true,
-        "**/*.js": { "when": "$(basename).ts"},
-        "**/*.js.map": { "when": "$(basename).ts"},
-        "**/*.d.ts": { "when": "$(basename).ts"},
-        "**/coverage": true
+        "**/coverage": true,
+        "**/.happypack": true
    },
    "editor.renderIndentGuides": true,
-    "tslint.configFile": "ng2-components/config/assets/tslint.json"
+    "tslint.configFile": "ng2-components/tslint.json"
 }
@@ -1,17 +1,154 @@
-### Enable CORS in Alfresco
+### CORS solving strategies

 The web client that we are building with the application development framework will be loaded from a different web server than the Alfresco Platform is running on.
 So we need to tell the Alfresco server that any request that comes in from this custom web client should be allowed access 
 to the Content Repository. This is done by enabling CORS.

-To enable CORS in the Alfresco Platform do **one of the following**:
+If you are experiencing this kind of problem you can follow  **one of the following**:

-##Recommended - Download and install the enable CORS module
+1. [Configure Webpack Proxy](#configure-webpack-proxy) 
+2. [Configure angular-cli Proxy](#configure-angular-cli-proxy)
+3. [Configure nginx proxy](#configure-nginx-proxy)
+4. [Enable CORS in CS and PS](#configure-webpack-proxy)
+
+# Configure Webpack Proxy
+
+If you are using a project created with the [Yeoman Generator](https://github.com/Alfresco/generator-ng2-alfresco-app) or the demo shell >=1.6.0 you have already out of the box in your `config/webpack.common.js` the following configuration. 
+Say we have an app running on http://localhost:3000/ and we want all calls redirect with the following strategy:
+
+* Content service http://localhost:8080/  redirect to -> http://localhost:3000/ecm/ 
+* Process service http://localhost:9999/  redirect to -> http://localhost:3000/bpm/ 
+
+Open the file `config/webpack.common.js`  find the `devServer`  section and  add the content:
+
+```javascript
+devServer: {
+        contentBase: helpers.root('dist'),
+        compress: true,
+        port: 3000,
+        historyApiFallback: true,
+        host: '0.0.0.0',
+        inline: true,
+        proxy: {
+            '/ecm': {
+                target: {
+                    host: "0.0.0.0",
+                    protocol: 'http:',
+                    port: 8080
+                },
+                pathRewrite: {
+                    '^/ecm': ''
+                }
+            },
+            '/bpm': {
+                target: {
+                    host: "0.0.0.0",
+                    protocol: 'http:',
+                    port: 9999
+                },
+                pathRewrite: {
+                    '^/bpm': ''
+                }
+            }
+        }
+    },
+```
+
+Notes:
+- With differents configuration of webpack the `devServer` properties could be in other webpack files. Search in your configuration
+
+- If you are runnign the App, content service or process service on different ports change the ports accordingly your local configuration.
+For further details about how to configure a webpack proxy please refer to the [official documentation](https://webpack.js.org/configuration/dev-server/#devserver-proxy).
+
+# Configure angular-cli Proxy
+Say we have a app running on http://localhost:3000/ and we want redirect all the calls with the following strategy:
+
+* Content service http://localhost:8080/  redirect to -> http://localhost:3000/ecm/ 
+* Process service http://localhost:9999/  redirect to -> http://localhost:3000/bpm/ 
+
+Create a file next to projects `package.json` call it `proxy.conf.json` with the content:
+
+```javascript
+{
+    '/ecm': {
+                target: {
+                    host: "0.0.0.0",
+                    protocol: 'http:',
+                    port: 8080
+                },
+                pathRewrite: {
+                    '^/ecm': ''
+                }
+            },
+    '/bpm': {
+                target: {
+                    host: "0.0.0.0",
+                    protocol: 'http:',
+                    port: 9999
+                },
+                pathRewrite: {
+                    '^/bpm': ''
+                }
+            }
+}
+```
+
+Note if you are running the App, content service or process service on different ports change the ports accordingly your local configuration.
+For further details about how to configure a webpack proxy please refer to the [official documentation](https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md).
+
+
+# Configure nginx proxy
+
+## Installing nginx
+
+Most Linux distributions will come with nginx available to install via your
+package manager and on Mac OS you can use [Homebrew](http://brew.sh/).
+
+If you want to install manually however you can follow the instructions on the
+[download page](http://nginx.org/en/download.html). See also the specific information for
+[windows users](http://nginx.org/en/docs/windows.html).
+
+### Start nginx
+
+Start nginx using the supplied configuration in [nginx.conf](nginx.conf)
+
+    nginx -c nginx.conf
+
+### Review nginx configuration
+
+To correctly configure nginx use the following file [nginx.conf](/nginx.conf).
+This will host Activiti, Alfresco and the app dev framework under the same origin.
+
+* ECM : http://localhost:8888/alfresco/
+* BPM : http://localhost:8888/activiti/
+
+To make everything work, you have to change the address of the ECM and BPM. In the demo app you can do that clicking on the top right settings menu and change the bottom left options: *ECM host* and *BPM host*.
+
+This configuration assumes few things:
+
+* Port mapping:
+  * nginx entry point: 0.0.0.0:8888
+  * Demo Shell: locathost:3000
+  * Alfresco: locathost:8080
+  * Activiti: locathost:9999
+
+All those values can be modified at their respective `location` directive on the [nginx.conf](/nginx.conf) file.
+
+If you want to know more on how to install and configure nginx to work with the Application Development Framework can be found [here](https://community.alfresco.com/community/application-development-framework/blog/2016/09/28/adf-development-set-up-with-nginx-proxy)
+
+
+# Enable CORS in CS and PS
+
+If you want completely enable CORS call on your Content service and Process service, plese refer to the following alfresco documents:
+
+* [Enable Cross Origin Resource Sharing (CORS) in Alfresco Process Services](http://docs.alfresco.com/process-services1.6/topics/enabling-cors.html)
+
+* Enable Cross Origin Resource Sharing (CORS) in Alfresco Content Services 

 This is the easiest way, add the [enablecors](https://artifacts.alfresco.com/nexus/service/local/repositories/releases/content/org/alfresco/enablecors/1.0/enablecors-1.0.jar) 
 platform module JAR to the *$ALF_INSTALL_DIR/modules/platform* directory and restart the server.

-Note. by default the CORS filter that is enabled will allow any orgin.
+Note. by default the CORS filter that is enabled will allow any origin.
 
 ##Or - Manually update the web.xml file

@@ -3,12 +3,11 @@
 The [Angular 2](https://angular.io/) based application development framework requires the following:

 - An Alfresco Platform Repository (version [201609 Early Access](https://community.alfresco.com/docs/DOC-6372-alfresco-community-edition-file-list-201609-ea) or newer) 
- [Enable cors on Alfresco One](/ALFRESCOCORS.md)
 - [Download and install Activiti](https://www.alfresco.com/products/bpm/alfresco-activiti/trial)
 - [Node.js](https://nodejs.org/en/) JavaScript runtime.
 - [npm](https://www.npmjs.com/) package manager for JavaScript.
- local nginx proxy to avoid cross-origin browser restrictions (see below)
 - (If you use ECM and BPM together) Make sure your user has the same username and password in both system
+- [If you are experiencing CORS problem read this guide](/ALFRESCOCORS.md)

 *Note: Default username for activiti is "admin@app.activiti.com" and "admin" for Alfresco, and also the default password are different. Change them to be equal.*

@@ -26,40 +25,3 @@ Make sure the Node.js version is > 5:
 $ node -v
 v5.12.0
 ```
-
-## Installing nginx
-
-Most Linux distributions will come with nginx available to install via your
-package manager and on Mac OS you can use [Homebrew](http://brew.sh/).
-
-If you want to install manually however you can follow the instructions on the
-[download page](http://nginx.org/en/download.html). See also the specific information for
-[windows users](http://nginx.org/en/docs/windows.html).
-
-### Start nginx
-
-Start nginx using the supplied configuration in [nginx.conf](nginx.conf)
-
-    nginx -c nginx.conf
-
-### Review nginx configuration
-
-To correctly configure nginx use the following file [nginx.conf](/nginx.conf).
-This will host Activiti, Alfresco and the app dev framework under the same origin.
-
-* ECM : http://localhost:8888/alfresco/
-* BPM : http://localhost:8888/activiti/
-
-To make everything work, you have to change the address of the ECM and BPM. In the demo app you can do that clicking on the top right settings menu and changing the bottom left options: *ECM host* and *BPM host*.
-
-This configuration assumes few things:
-
-* Port mapping:
-  * nginx entry point: 0.0.0.0:8888
-  * Demo Shell: locathost:3000
-  * Alfresco: locathost:8080
-  * Activiti: locathost:9999
-
-All those values can be modified at their respective `location` directive on the [nginx.conf](/nginx.conf) file.
-
-If you want to know more on how to install and configure nginx to work with the Application Development Framework can be found [here](https://community.alfresco.com/community/application-development-framework/blog/2016/09/28/adf-development-set-up-with-nginx-proxy)
@@ -1,4 +1,4 @@
-# ALFRESCO ANGULAR 2 COMPONENTS
+# ALFRESCO ANGULAR COMPONENTS

 [![Join the chat at https://gitter.im/Alfresco/alfresco-ng2-components](https://badges.gitter.im/Alfresco/alfresco-ng2-components.svg)](https://gitter.im/Alfresco/alfresco-ng2-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

@@ -17,27 +17,6 @@
  <a href='https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE'>
     <img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
  </a>
-  <a href='https://www.alfresco.com/'>
-     <img src='https://img.shields.io/badge/style-component-green.svg?label=alfresco' alt='alfresco component' />
-  </a>
-  <a href='https://angular.io/'>
-     <img src='https://img.shields.io/badge/style-2-red.svg?label=angular' alt='angular 2' />
-  </a>
-  <a href='https://www.typescriptlang.org/docs/tutorial.html'>
-     <img src='https://img.shields.io/badge/style-lang-blue.svg?label=typescript' alt='typescript' />
-  </a>
-  <a href='https://www.alfresco.com/'>
-     <img src='https://img.shields.io/badge/style-%3E5.0.0-blue.svg?label=node%20version' alt='node version' />
-  </a>
-</p>
-  
-<p align="center">
-  <img title="alfresco" alt='alfresco' src='assets/alfresco.png'  width="280px" height="150px"></img>
-  <img title="angular2" alt='angular2' src='assets/angular2.png'  width="150px" height="150px"></img>    
-</p>
-
-<p align="center">
-  <img title="browser stack" alt='browser stack' src='assets/browserstack.png'  width="350px" height="225px"></img>
 </p>

 ## Introduction
@@ -6,7 +6,7 @@ branches:
    - dev-build-test

 environment:
-  nodejs_version: "6"
+  nodejs_version: "8"

  matrix:
  - COMPONENT_NAME: ng2-components-activiti
@@ -1,14 +1,7 @@

-<h1 align="center">Alfresco Angular 2 Components</h1>
-<p align="center">
-  <img title="alfresco" alt='alfresco' src='../assets/alfresco.png'  width="280px" height="150px" ></img>
-  <img title="angular2" alt='angular2' src='../assets/angular2.png'  width="150px" height="150px" ></img>
-</p>
-<p align="center">
-    <a href='https://github.com/mgechev/angular2-style-guide'>
-      <img src='https://mgechev.github.io/angular2-style-guide/images/badge.svg' alt='style' />
-    </a>
-</p>
+# ADF Demo Application
+
+Please note that this application is not an official product, but a testing and demo application to showcase complex interactions for ADF components.

 ## Installing

@@ -20,6 +13,53 @@ cd alfresco-ng2-components/demo-shell-ng2/
 npm install
 ```

+## Proxy settings and CORS
+
+To simplify development and reduce the time to get started the application features the following Proxy settings:
+
+- **http://localhost:3000/ecm** is mapped to **http://localhost:8080**
+- **http://localhost:3000/bpm** is mapped to **http://localhost:9999**
+
+The settings above address most common scenarios for running ACS on port 8080 and APS on port 9999 and allow you to skip the CORS configuration.
+
+If you would like to change default proxy settings, please edit the `config/webpack.common.js` file.
+
+## Application settings (server-side)
+
+All server-side application settings are stored in the `app.config-dev.json` and `app.config-prod.json` files. 
+By default the configuration files have the content similar to the following one:
+
+```json
+{
+    "ecmHost": "http://localhost:3000/ecm",
+    "bpmHost": "http://localhost:3000/bpm",
+    "application": {
+        "name": "Alfresco"
+    }
+}
+```
+
+You can add any additional settings to the application configuration file if needed.
+
+Configuration files are picked based on environment settings (see `app.module.ts` for more details).
+
+```ts
+let appConfigFile = 'app.config-dev.json';
+if (process.env.ENV === 'production') {
+    appConfigFile = 'app.config-prod.json';
+}
+
+@NgModule({
+    imports: [
+        ...
+        CoreModule.forRoot({
+            appConfigFile: appConfigFile
+        }),
+        ...
+    ]
+})
+```
+
 ## Development build

 ```sh
@@ -58,43 +98,4 @@ If you want to run the demo shell with the latest change from the development br
 ```sh
 ./npm-clean.sh
 ./start-linked.sh -install
-```
-
-## Multi-language
-To support a new language you need to create your language file (.json) and add it to `i18n/` folder.
-
-```json
-{
-        "username" : "Username",
-        "input-required-message": "Required",
-        "input-min-message": "Your username needs to be at least 4 characters.",
-        "login-button": "Login"
-}
-```
-
-Directory structure:
-```
-.
-├── i18n/
-│   ├── en.json
-│   ├── it.json
-│   └── fr.json
-```
-
-## Custom-files
-
-If you need to add custom files on your project you can add this files in the folders public
-
-```
-.
-├── public/
-│   ├── images/
-│   ├── css/
-│   └── js/
-```
-
-the public folder above wil be copied in the root of your project and you can refer to them for example as
-
- * './images/custom_image.png'
- * './js/custom_script.js'
- * './css/custom_style.css'
+```
@@ -0,0 +1,7 @@
+{
+    "ecmHost": "http://localhost:3000/ecm",
+    "bpmHost": "http://localhost:3000/bpm",
+    "application": {
+        "name": "Alfresco"
+    }
+}
@@ -0,0 +1,7 @@
+{
+    "ecmHost": "http://localhost:3000/ecm",
+    "bpmHost": "http://localhost:3000/bpm",
+    "application": {
+        "name": "Alfresco"
+    }
+}
@@ -20,6 +20,7 @@
                <a class="mdl-navigation__link" data-automation-id="home" href="" routerLink="/">Home</a>
                <a class="mdl-navigation__link" data-automation-id="files" href="" routerLink="/files">DocumentList</a>
                <a class="mdl-navigation__link" data-automation-id="activiti" href="" routerLink="/activiti">Process Services</a>
+                <a class="mdl-navigation__link" data-automation-id="form" href="" routerLink="/form">Form</a>
                <a class="mdl-navigation__link" data-automation-id="login" href="" routerLink="/login">Login</a>
                <a class="mdl-navigation__link" data-automation-id="settings" href="" routerLink="/settings">Settings</a>
            </nav>
@@ -36,15 +37,15 @@
        <span class="mdl-layout-title">Languages</span>
        <nav class="mdl-navigation">
            <a class="mdl-navigation__link" (click)="changeLanguage('en')">
-                <span class="flag-icon flag-icon-gb"></span>
+                <span class="adf-flag-icon adf-flag-icon-gb"></span>
                <label tabindex="0"> English</label>
            </a>
            <a class="mdl-navigation__link" (click)="changeLanguage('it')">
-                <span class="flag-icon flag-icon-it"></span>
+                <span class="adf-flag-icon adf-flag-icon-it"></span>
                <label tabindex="0"> Italian</label>
            </a>
            <a class="mdl-navigation__link" (click)="changeLanguage('ru')">
-                <span class="flag-icon flag-icon-ru"></span>
+                <span class="adf-flag-icon adf-flag-icon-ru"></span>
                <label tabindex="0"> Russian</label>
            </a>
        </nav>
@@ -63,7 +64,8 @@
            <a class="mdl-navigation__link" href="" routerLink="/settings" (click)="hideDrawer()">Settings</a>
        </nav>
    </div>
-    <main class="mdl-layout__content">
+    <main class="mdl-layout__content" (dragover)="onDragOverMainPage($event)"
+          (drop)="onDragOverMainPage($event)">
        <div class="page-content">
            <router-outlet></router-outlet>
        </div>
@@ -17,7 +17,13 @@

 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
-import { AlfrescoTranslationService, AlfrescoAuthenticationService, AlfrescoSettingsService, StorageService, LogService } from 'ng2-alfresco-core';
+import {
+    AlfrescoTranslationService,
+    AlfrescoAuthenticationService,
+    AlfrescoSettingsService,
+    StorageService,
+    LogService
+} from 'ng2-alfresco-core';

 declare var document: any;

@@ -29,17 +35,12 @@ declare var document: any;
 export class AppComponent {
    searchTerm: string = '';

-    ecmHost: string = 'http://' + window.location.hostname + ':8080';
-    bpmHost: string = 'http://' + window.location.hostname + ':9999';
-
    constructor(private authService: AlfrescoAuthenticationService,
                private router: Router,
                private settingsService: AlfrescoSettingsService,
                private translateService: AlfrescoTranslationService,
                private storage: StorageService,
                private logService: LogService) {
-        this.setEcmHost();
-        this.setBpmHost();
        this.setProvider();

        if (translateService) {
@@ -94,27 +95,14 @@ export class AppComponent {
        document.querySelector('.mdl-layout').MaterialLayout.toggleDrawer();
    }

-    private setEcmHost() {
-        if (this.storage.hasItem(`ecmHost`)) {
-            this.settingsService.ecmHost = this.storage.getItem(`ecmHost`);
-            this.ecmHost = this.storage.getItem(`ecmHost`);
-        } else {
-            this.settingsService.ecmHost = this.ecmHost;
-        }
-    }
-
-    private setBpmHost() {
-        if (this.storage.hasItem(`bpmHost`)) {
-            this.settingsService.bpmHost = this.storage.getItem(`bpmHost`);
-            this.bpmHost = this.storage.getItem(`bpmHost`);
-        } else {
-            this.settingsService.bpmHost = this.bpmHost;
-        }
-    }
-
    private setProvider() {
        if (this.storage.hasItem(`providers`)) {
            this.settingsService.setProviders(this.storage.getItem(`providers`));
        }
    }
+
+    onDragOverMainPage(event: any): boolean {
+        event.preventDefault();
+        return false;
+    }
 }
@@ -18,7 +18,7 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';

-import { CoreModule } from 'ng2-alfresco-core';
+import { CoreModule, AppConfigService } from 'ng2-alfresco-core';
 import { SearchModule } from 'ng2-alfresco-search';
 import { LoginModule } from 'ng2-alfresco-login';
 import { DataTableModule } from 'ng2-alfresco-datatable';
@@ -33,12 +33,16 @@ import { ActivitiTaskListModule } from 'ng2-activiti-tasklist';
 import { ActivitiProcessListModule } from 'ng2-activiti-processlist';
 import { UserInfoComponentModule } from 'ng2-alfresco-userinfo';
 import { AnalyticsModule } from 'ng2-activiti-analytics';
+import { DiagramsModule } from 'ng2-activiti-diagrams';
+
+import { MaterialModule } from './material.module';
 import { AppComponent } from './app.component';
 import { routing } from './app.routes';
 import { CustomEditorsModule } from './components/activiti/custom-editor/custom-editor.component';
 import { Editor3DModule } from 'ng2-3d-editor';
-import { MaterialModule } from '@angular/material';
 import { ChartsModule } from 'ng2-charts';
+import { CreateFolderDialog } from './dialogs/create-folder.dialog';
+import { DebugAppConfigService } from './services/debug-app-config.service';

 import {
    HomeComponent,
@@ -47,6 +51,7 @@ import {
    SearchBarComponent,
    LoginDemoComponent,
    ActivitiDemoComponent,
+    ActivitiShowDiagramComponent,
    ActivitiAppsView,
    FormViewer,
    WebscriptComponent,
@@ -55,15 +60,23 @@ import {
    AboutComponent,
    FilesComponent,
    FormNodeViewer,
-    SettingComponent
+    SettingsComponent,
+    FormDemoComponent
 } from './components/index';

+let appConfigFile = 'app.config-dev.json';
+if (process.env.ENV === 'production') {
+    appConfigFile = 'app.config-prod.json';
+}
+
@NgModule({
    imports: [
        BrowserModule,
        routing,
-        MaterialModule.forRoot(),
-        CoreModule.forRoot(),
+        CoreModule.forRoot({
+            appConfigFile: appConfigFile
+        }),
+        MaterialModule,
        LoginModule.forRoot(),
        SearchModule.forRoot(),
        DataTableModule.forRoot(),
@@ -78,6 +91,7 @@ import {
        ActivitiProcessListModule.forRoot(),
        UserInfoComponentModule.forRoot(),
        AnalyticsModule.forRoot(),
+        DiagramsModule.forRoot(),
        CustomEditorsModule,
        Editor3DModule.forRoot(),
        ChartsModule
@@ -90,6 +104,7 @@ import {
        SearchBarComponent,
        LoginDemoComponent,
        ActivitiDemoComponent,
+        ActivitiShowDiagramComponent,
        ActivitiAppsView,
        FormViewer,
        WebscriptComponent,
@@ -98,9 +113,16 @@ import {
        AboutComponent,
        FilesComponent,
        FormNodeViewer,
-        SettingComponent
+        CreateFolderDialog,
+        SettingsComponent,
+        FormDemoComponent
    ],
-    providers: [],
-    bootstrap: [ AppComponent ]
+    providers: [
+        { provide: AppConfigService, useClass: DebugAppConfigService }
+    ],
+    bootstrap: [ AppComponent ],
+    entryComponents: [
+        CreateFolderDialog
+    ]
 })
 export class AppModule { }
@@ -26,6 +26,7 @@ import {
    SearchComponent,
    LoginDemoComponent,
    ActivitiDemoComponent,
+    ActivitiShowDiagramComponent,
    ActivitiAppsView,
    WebscriptComponent,
    TagComponent,
@@ -33,7 +34,8 @@ import {
    AboutComponent,
    FormViewer,
    FormNodeViewer,
-    SettingComponent
+    SettingsComponent,
+    FormDemoComponent
 } from './components/index';

 import { UploadButtonComponent } from 'ng2-alfresco-upload';
@@ -90,6 +92,11 @@ export const appRoutes: Routes = [
        component: ActivitiDemoComponent,
        canActivate: [AuthGuardBpm]
    },
+    {
+        path: 'activiti/diagram/:processDefinitionId',
+        component: ActivitiShowDiagramComponent,
+        canActivate: [AuthGuardBpm]
+    },
    // TODO: check if neeeded
    {
        path: 'activiti/appId/:appId',
@@ -124,7 +131,8 @@ export const appRoutes: Routes = [
        canActivate: [AuthGuardEcm]
    },
    { path: 'about', component: AboutComponent },
-    { path: 'settings', component: SettingComponent }
+    { path: 'settings', component: SettingsComponent },
+    { path: 'form', component: FormDemoComponent }
 ];

 export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
@@ -1,4 +1,25 @@
 <div class="about-container">
+
+    <h3>Server settings</h3>
+    <small>The values below are taken from the AppConfigService and loaded from the '{{ configFile }}' file.</small>
+    <div>
+        Alfresco Process Services URL: <strong>{{ bpmHost }}</strong>
+    </div>
+
+    <div>
+        Alfresco Content Services URL: <strong>{{ ecmHost }}</strong>
+    </div>
+
+    <div *ngIf="githubUrlCommitAlpha">
+        <h3>Source code</h3>
+        <small>You are running the project based on the following commit:</small>
+        <div>
+            <a [href]="githubUrlCommitAlpha">{{githubUrlCommitAlpha}}</a>
+        </div>
+    </div>
+
+
    <h3>Packages</h3>
+    <small>Current project is using the following ADF libraries:</small>
    <alfresco-datatable [data]="data"></alfresco-datatable>
 </div>
@@ -18,7 +18,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Http } from '@angular/http';
 import { ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
-import { LogService } from 'ng2-alfresco-core';
+import { LogService, AppConfigService } from 'ng2-alfresco-core';

@Component({
    selector: 'about-page',
@@ -28,8 +28,14 @@ import { LogService } from 'ng2-alfresco-core';
 export class AboutComponent implements OnInit {

    data: ObjectDataTableAdapter;
+    githubUrlCommitAlpha: string = 'https://github.com/Alfresco/alfresco-ng2-components/commits/';
+
+    configFile: string = '';
+    ecmHost: string = '';
+    bpmHost: string = '';

    constructor(private http: Http,
+                private appConfig: AppConfigService,
                private logService: LogService) {
    }

@@ -42,18 +48,42 @@ export class AboutComponent implements OnInit {
                return regexp.test(val);
            });

-            let alfrescoPackagesTableRappresentation = [];
+            let alfrescoPackagesTableRepresentation = [];
            alfrescoPackages.forEach((val) => {
                this.logService.log(response.json().dependencies[val]);
-                alfrescoPackagesTableRappresentation.push({name: val, version: response.json().dependencies[val].version});
+                alfrescoPackagesTableRepresentation.push({
+                    name: val,
+                    version: response.json().dependencies[val].version
+                });
            });

-            this.logService.log(alfrescoPackagesTableRappresentation);
+            this.gitHubLinkCreation(alfrescoPackagesTableRepresentation);

-            this.data = new ObjectDataTableAdapter(alfrescoPackagesTableRappresentation, [
+            this.logService.log(alfrescoPackagesTableRepresentation);
+
+            this.data = new ObjectDataTableAdapter(alfrescoPackagesTableRepresentation, [
                {type: 'text', key: 'name', title: 'Name', sortable: true},
                {type: 'text', key: 'version', title: 'Version', sortable: true}
            ]);
        });
+
+        this.configFile = this.appConfig.configFile;
+        this.ecmHost = this.appConfig.get<string>('ecmHost');
+        this.bpmHost = this.appConfig.get<string>('bpmHost');
+    }
+
+    private gitHubLinkCreation(alfrescoPackagesTableRepresentation): void {
+        let corePackage = alfrescoPackagesTableRepresentation.find((packageUp) => {
+            return packageUp.name === 'ng2-alfresco-core';
+        });
+
+        if (corePackage) {
+            let commitIsh = corePackage.version.split('-');
+            if (commitIsh.length > 1) {
+                this.githubUrlCommitAlpha = this.githubUrlCommitAlpha + commitIsh[1];
+            } else {
+                this.githubUrlCommitAlpha = this.githubUrlCommitAlpha + corePackage.version;
+            }
+        }
    }
 }
@@ -24,3 +24,17 @@
    text-align: left;
    margin-bottom: 5px;
 }
+
+.adf-no-form-container {    
+    text-align: center;
+    font-weight: 600;
+    font-size: 18px;
+    font-family: Muli;
+    padding: 16px;
+}
+
+.action-header {
+    border: 1px solid rgb(224, 224, 224);
+    background: #fff;
+    text-align: left;
+}
@@ -28,6 +28,7 @@
                        <adf-accordion>
                            <adf-accordion-group [heading]="'Tasks'" [isSelected]="true" [isOpen]="true" [headingIcon]="'assignment'">
                                <activiti-filters
+                                    [filterParam]="{name:'MY tasks'}"
                                    [appId]="appId"
                                    [hasIcon]="false"
                                    (filterClick)="onTaskFilterClick($event)"
@@ -71,11 +72,28 @@
                            (taskDeleted)="onTaskDeleted($event)">
                        </activiti-task-details>
                        <hr>
-                        <h5>Attachments</h5>
-                        <adf-task-attachment-list *ngIf="currentTaskId"
-                          [taskId]="currentTaskId"
-                          (attachmentClick)="onAttachmentClick($event)">
-                        </adf-task-attachment-list>
+                        <div id="attachment-task-list" *ngIf="currentTaskId">
+                            <h5>Attachments</h5>
+                            <div class="adf-no-form-container">
+                                <div class="action-header">
+                                    <button [attr.disabled]="isTaskCompleted()" class="mdl-button mdl-js-button" (click)="toggleCreateTakAttach()">
+                                        Attach Document
+                                        <i class="material-icons">add</i>
+                                    </button>
+                                </div>
+                                <adf-task-attachment-list #taskAttach
+                                                          *ngIf="currentTaskId"
+                                                          [taskId]="currentTaskId"
+                                                          (attachmentClick)="onAttachmentClick($event)">
+                                </adf-task-attachment-list>
+                                <div *ngIf="isCreateTaskAttachVisible()">
+                                    <adf-create-task-attachment *ngIf="currentTaskId"
+                                                                [taskId]="currentTaskId"
+                                                                (success)="onCreateTaskSuccess()">
+                                    </adf-create-task-attachment>
+                                </div>
+                            </div>
+                        </div>
                    </div>
                </div>
            </div>
@@ -101,6 +119,7 @@
                            <adf-accordion>
                                <adf-accordion-group [heading]="'Processes'" [isSelected]="true" [isOpen]="true" [headingIcon]="'assessment'">
                                    <activiti-process-instance-filters
+                                        [filterParam]="{index: 0}"
                                        [appId]="appId"
                                        (filterClick)="onProcessFilterClick($event)"
                                        (onSuccess)="onSuccessProcessFilterList($event)">
@@ -133,8 +152,29 @@
                            <activiti-process-instance-details
                                [processInstanceId]="currentProcessInstanceId"
                                (processCancelled)="processCancelled()"
+                                (showProcessDiagram)="onShowProcessDiagram($event)"
                                (taskClick)="onProcessDetailsTaskClick($event)">
                            </activiti-process-instance-details>
+                            <hr>
+                            <div id="attachment-process-list" *ngIf="currentProcessInstanceId">
+                            <h5>Attachments</h5>
+                                <div class="action-header">
+                                    <button id="show_process_attach" class="mdl-button mdl-js-button" (click)="toggleCreateProcessAttach()">
+                                        Attach Document
+                                        <i class="material-icons">add</i>
+                                    </button>
+                                </div>
+                                <adf-process-attachment-list *ngIf="currentProcessInstanceId"
+                                                          [processInstanceId]="currentProcessInstanceId"
+                                                          (attachmentClick)="onAttachmentClick($event)">
+                                </adf-process-attachment-list>
+                                <div *ngIf="isCreateProcessAttachVisible()">
+                                    <adf-create-process-attachment *ngIf="currentProcessInstanceId"
+                                                                [processInstanceId]="currentProcessInstanceId"
+                                                                (contentCreated)="onContentCreated()">
+                                    </adf-create-process-attachment>
+                                </div>
+                            </div>
                        </div>
                        <div class="mdl-cell mdl-cell--10-col task-column mdl-shadow--2dp" *ngIf="isStartProcessMode()">
                            <activiti-start-process [appId]="appId" (start)="onStartProcessInstance($event)"></activiti-start-process>
@@ -167,9 +207,12 @@
                            [reportId]="report.id"
                            [hideParameters]="false"
                            (editReport)="onEditReport($event)"
-                            (reportSaved)="onReportSaved()"
+                            (reportSaved)="onReportSaved($event)"
                            (reportDeleted)="onReportDeleted()">
                        </activiti-analytics>
+                        <div *ngIf="!report">
+                            <span>{{'ANALYTICS_REPORT.NO_REPORT_MESSAGE' | translate}}</span>
+                        </div>
                    </div>
                </div>
            </div>
@@ -20,8 +20,10 @@ import {
    ActivitiApps,
    ActivitiFilters,
    ActivitiTaskList,
+    ActivitiTaskDetails,
    FilterRepresentationModel,
-    TaskDetailsEvent
+    TaskDetailsEvent,
+    TaskAttachmentListComponent
 } from 'ng2-activiti-tasklist';
 import {
    ActivitiProcessFilters,
@@ -29,10 +31,11 @@ import {
    ActivitiProcessInstanceListComponent,
    ActivitiStartProcessInstance,
    FilterProcessRepresentationModel,
-    ProcessInstance
+    ProcessInstance,
+    ActivitiProcessAttachmentListComponent
 } from 'ng2-activiti-processlist';
 import { AnalyticsReportListComponent } from 'ng2-activiti-analytics';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { Subscription } from 'rxjs/Rx';
 import {
    ObjectDataTableAdapter,
@@ -60,6 +63,9 @@ export class ActivitiDemoComponent implements AfterViewInit {
    @ViewChild(ActivitiTaskList)
    taskList: ActivitiTaskList;

+    @ViewChild(TaskAttachmentListComponent)
+    taskAttachList: TaskAttachmentListComponent;
+
    @ViewChild(ActivitiProcessFilters)
    activitiprocessfilter: ActivitiProcessFilters;

@@ -69,6 +75,12 @@ export class ActivitiDemoComponent implements AfterViewInit {
    @ViewChild(ActivitiProcessInstanceDetails)
    activitiprocessdetails: ActivitiProcessInstanceDetails;

+    @ViewChild(ActivitiTaskDetails)
+    activitidetails: ActivitiTaskDetails;
+
+    @ViewChild(ActivitiProcessAttachmentListComponent)
+    processAttachList: ActivitiProcessAttachmentListComponent;
+
    @ViewChild(ActivitiStartProcessInstance)
    activitiStartProcess: ActivitiStartProcessInstance;

@@ -100,12 +112,15 @@ export class ActivitiDemoComponent implements AfterViewInit {
    sub: Subscription;
    blobFile: any;
    flag: boolean = true;
+    createTaskAttach: boolean = false;
+    createProcessAttach: boolean = false;

    dataTasks: ObjectDataTableAdapter;
    dataProcesses: ObjectDataTableAdapter;

    constructor(private elementRef: ElementRef,
                private route: ActivatedRoute,
+                private router: Router,
                private apiService: AlfrescoApiService,
                private formRenderingService: FormRenderingService,
                private formService: FormService) {
@@ -115,8 +130,8 @@ export class ActivitiDemoComponent implements AfterViewInit {
        this.dataProcesses = new ObjectDataTableAdapter(
            [],
            [
-                {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
-                {type: 'text', key: 'started', title: 'Started', cssClass: 'hidden', sortable: true}
+                { type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true },
+                { type: 'text', key: 'started', title: 'Started', cssClass: 'hidden', sortable: true }
            ]
        );
        this.dataProcesses.setSorting(new DataSorting('started', 'desc'));
@@ -135,6 +150,11 @@ export class ActivitiDemoComponent implements AfterViewInit {
            console.log(`Field value changed. Form: ${e.form.id}, Field: ${e.field.id}, Value: ${e.field.value}`);
        });

+        formService.formEvents.subscribe((event: Event) => {
+            console.log('Event fired:' + event.type);
+            console.log('Event Target:' + event.target);
+        });
+
    }

    ngOnInit() {
@@ -156,15 +176,15 @@ export class ActivitiDemoComponent implements AfterViewInit {
        this.sub.unsubscribe();
    }

-    onTaskFilterClick(filter: FilterRepresentationModel) {
+    onTaskFilterClick(filter: FilterRepresentationModel): void {
        this.applyTaskFilter(filter);
    }

-    onReportClick(event: any) {
+    onReportClick(event: any): void {
        this.report = event;
    }

-    onSuccessTaskFilterList(event: any) {
+    onSuccessTaskFilterList(event: any): void {
        this.applyTaskFilter(this.activitifilter.getCurrentFilter());
    }

@@ -175,7 +195,7 @@ export class ActivitiDemoComponent implements AfterViewInit {
        }
    }

-    onStartTaskSuccess(event: any) {
+    onStartTaskSuccess(event: any): void {
        this.activitifilter.selectFilterWithTask(event.id);
        this.currentTaskId = event.id;
    }
@@ -184,88 +204,88 @@ export class ActivitiDemoComponent implements AfterViewInit {
        this.currentTaskId = this.taskList.getCurrentId();
    }

-    onProcessFilterClick(event: FilterProcessRepresentationModel) {
+    onProcessFilterClick(event: FilterProcessRepresentationModel): void {
        this.currentProcessInstanceId = null;
        this.processFilter = event;
    }

-    onSuccessProcessFilterList() {
+    onSuccessProcessFilterList(): void {
        this.processFilter = this.activitiprocessfilter.getCurrentFilter();
    }

-    onSuccessProcessList(event: any) {
+    onSuccessProcessList(event: any): void {
        this.currentProcessInstanceId = this.processList.getCurrentId();
    }

-    onTaskRowClick(taskId) {
+    onTaskRowClick(taskId): void {
        this.currentTaskId = taskId;
    }

-    onProcessRowClick(processInstanceId) {
+    onProcessRowClick(processInstanceId): void {
        this.currentProcessInstanceId = processInstanceId;
    }

-    onEditReport(name: string) {
+    onEditReport(name: string): void {
        this.analyticsreportlist.reload();
    }

-    onReportSaved() {
-        this.analyticsreportlist.reload();
+    onReportSaved(reportId): void {
+        this.analyticsreportlist.reload(reportId);
    }

-    onReportDeleted() {
-        this.selectFirstReport = true;
+    onReportDeleted(): void {
        this.analyticsreportlist.reload();
+        this.analyticsreportlist.selectReport(null);
    }

-    navigateStartProcess() {
+    navigateStartProcess(): void {
        this.resetProcessFilters();
        this.reloadProcessFilters();
        this.currentProcessInstanceId = currentProcessIdNew;
    }

-    onStartProcessInstance(instance: ProcessInstance) {
+    onStartProcessInstance(instance: ProcessInstance): void {
        this.currentProcessInstanceId = instance.id;
        this.activitiStartProcess.reset();
        this.resetProcessFilters();
    }

-    isStartProcessMode() {
+    isStartProcessMode(): boolean {
        return this.currentProcessInstanceId === currentProcessIdNew;
    }

-    processCancelled(data: any) {
+    processCancelled(data: any): void {
        this.currentProcessInstanceId = null;
        this.processList.reload();
    }

-    onSuccessNewProcess(data: any) {
+    onSuccessNewProcess(data: any): void {
        this.processList.reload();
    }

-    onFormCompleted(form) {
+    onFormCompleted(form): void {
        this.taskList.reload();
        this.currentTaskId = null;
    }

-    onFormContentClick(content: any) {
+    onFormContentClick(content: any): void {
        this.fileShowed = true;
        this.content = content.contentBlob;
        this.contentName = content.name;
    }

-    onAttachmentClick(content: any) {
+    onAttachmentClick(content: any): void {
        this.fileShowed = true;
        this.content = content.contentBlob;
        this.contentName = content.name;
    }

-    onTaskCreated(data: any) {
+    onTaskCreated(data: any): void {
        this.currentTaskId = data.parentTaskId;
        this.taskList.reload();
    }

-    onTaskDeleted(data: any) {
+    onTaskDeleted(data: any): void {
        this.taskList.reload();
    }

@@ -289,7 +309,11 @@ export class ActivitiDemoComponent implements AfterViewInit {
        });
    }

-    onProcessDetailsTaskClick(event: TaskDetailsEvent) {
+    onShowProcessDiagram(event: any): void {
+        this.router.navigate(['/activiti/diagram/' + event.value]);
+    }
+
+    onProcessDetailsTaskClick(event: TaskDetailsEvent): void {
        event.preventDefault();
        this.activeTab = 'tasks';

@@ -305,20 +329,49 @@ export class ActivitiDemoComponent implements AfterViewInit {
        this.currentTaskId = taskId;
    }

-    private resetProcessFilters() {
+    private resetProcessFilters(): void {
        this.processFilter = null;
    }

-    private reloadProcessFilters() {
+    private reloadProcessFilters(): void {
        this.activitiprocessfilter.selectFilter(null);
    }

-    onRowClick(event) {
+    onRowClick(event): void {
        console.log(event);
    }

-    onRowDblClick(event) {
+    onRowDblClick(event): void {
        console.log(event);
    }

+    onCreateTaskSuccess(): void {
+        this.taskAttachList.reload();
+        this.toggleCreateTakAttach();
+    }
+
+    onContentCreated() {
+        this.processAttachList.reload();
+        this.toggleCreateProcessAttach();
+    }
+
+    toggleCreateTakAttach(): void {
+        this.createTaskAttach = !this.createTaskAttach;
+    }
+
+    isCreateTaskAttachVisible(): boolean {
+        return this.createTaskAttach;
+    }
+
+    toggleCreateProcessAttach(): void {
+        this.createProcessAttach = !this.createProcessAttach;
+    }
+
+    isCreateProcessAttachVisible(): boolean {
+        return this.createProcessAttach;
+    }
+
+    isTaskCompleted(): boolean {
+        return this.activitidetails.isCompletedTask();
+    }
 }
@@ -0,0 +1,6 @@
+<div>
+    <button (click)="onClickBack()" class="mdl-button mdl-button--icon">
+        <i class="material-icons">keyboard_backspace</i>
+    </button>
+    <activiti-diagram [processInstanceId]="processDefinitionId"></activiti-diagram>
+</div>
@@ -0,0 +1,49 @@
+/*!
+ * @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 { Subscription } from 'rxjs/Rx';
+import { ActivatedRoute } from '@angular/router';
+import {Location} from '@angular/common';
+
+@Component({
+    selector: 'activiti-show-diagram',
+    templateUrl: './activiti-show-diagram.component.html',
+    styleUrls: ['./activiti-show-diagram.component.css']
+})
+export class ActivitiShowDiagramComponent {
+
+    sub: Subscription;
+    processDefinitionId: string;
+
+    constructor(private route: ActivatedRoute,
+                private location: Location) {
+        this.sub = this.route.params.subscribe(params => {
+            this.processDefinitionId = params['processDefinitionId'];
+        });
+
+    }
+
+    ngOnDestroy() {
+        this.sub.unsubscribe();
+    }
+
+    onClickBack() {
+        this.location.back();
+    }
+
+}
@@ -24,17 +24,29 @@ import { WidgetComponent } from 'ng2-activiti-form';
        <div style="color: red">Look, I'm a custom editor!</div>
    `
 })
-export class CustomEditorComponent extends WidgetComponent {}
+export class CustomEditorComponent extends WidgetComponent {
+
+    constructor() {
+        super();
+    }
+}

@Component({
    selector: 'custom-stencil-01',
    template: `<div style="color: green">ADF version of custom Activiti stencil</div>`
 })
-export class CustomStencil01 extends WidgetComponent {}
+export class CustomStencil01 extends WidgetComponent {
+
+    constructor() {
+        super();
+    }
+}

@NgModule({
    declarations: [ CustomEditorComponent, CustomStencil01 ],
    exports: [ CustomEditorComponent, CustomStencil01 ],
    entryComponents: [ CustomEditorComponent, CustomStencil01 ]
 })
-export class CustomEditorsModule {}
+export class CustomEditorsModule {
+
+}
@@ -0,0 +1,10 @@
+alfresco-datatable >>> .custom-row-style.alfresco-datatable__row:focus {
+    outline-offset: -1px;
+    outline-width: 1px;
+    outline-color: green;
+    outline-style: solid;
+}
+
+alfresco-datatable >>> .custom-row-style.alfresco-datatable__row--selected {
+    color: green;
+}
@@ -1,8 +1,10 @@
 <div class="p-10">
    <alfresco-datatable
        [data]="data"
+        [selectionMode]="selectionMode"
        [multiselect]="multiselect"
        [actions]="true"
+        rowStyleClass="custom-row-style"
        (showRowActionsMenu)="onShowRowActionsMenu($event)"
        (executeRowAction)="onExecuteRowAction($event)"
        (row-click)="onRowClick($event)"
@@ -19,9 +21,17 @@
        -->
    </alfresco-datatable>
 </div>
-<div class="p-10">
+<div class="p-10" data-automation-id="multiselect">
    <md-checkbox [(ngModel)]="multiselect">Multiselect</md-checkbox>
 </div>
+<div class="p-10">
+    <p>For 'Multiple' selection mode use Cmd (macOS) or Ctrl (Win) to toggle selection of multiple items.</p>
+    <md-select placeholder="Selection Mode" [(ngModel)]="selectionMode" name="food">
+        <md-option *ngFor="let mode of selectionModes" [value]="mode.value">
+            {{mode.viewValue}}
+        </md-option>
+    </md-select>
+</div>
 <div class="p-10">
    <button md-raised-button (click)="reset()">Reset to default</button>
    <button md-raised-button (click)="addRow()">Add row</button>
@@ -15,18 +15,28 @@
 * limitations under the License.
 */

-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { ObjectDataTableAdapter, DataSorting, ObjectDataRow, ObjectDataColumn, DataCellEvent, DataRowActionEvent } from 'ng2-alfresco-datatable';

@Component({
    selector: 'datatable-demo',
-    templateUrl: './datatable-demo.component.html'
+    templateUrl: './datatable-demo.component.html',
+    styleUrls: ['./datatable-demo.component.css']
 })
 export class DataTableDemoComponent {

    multiselect: boolean = false;
    data: ObjectDataTableAdapter;

+    @Input()
+    selectionMode = 'single';
+
+    selectionModes = [
+        { value: 'none', viewValue: 'None' },
+        { value: 'single', viewValue: 'Single' },
+        { value: 'multiple', viewValue: 'Multiple' }
+    ];
+
    private _imageUrl: string = 'http://placehold.it/140x100';
    private _createdBy: any = {
        name: 'Denys Vuika',
@@ -1,28 +1,56 @@
 <div class="container">
    <alfresco-upload-drag-area
-            [rootFolderId]="documentList.currentFolderId"
-            [versioning] = "versioning">
-        <alfresco-document-list-breadcrumb
+        [rootFolderId]="documentList.currentFolderId"
+        [versioning]="versioning"
+        [enabled]="documentList.hasCreatePermission()">
+        <adf-breadcrumb
            [target]="documentList"
            [folderNode]="documentList.folderNode">
-        </alfresco-document-list-breadcrumb>
+        </adf-breadcrumb>
        <div *ngIf="errorMessage" class="error-message">
            <button (click)="resetError()" class="mdl-button mdl-js-button mdl-button--icon">
                <i class="material-icons">highlight_off</i>
            </button>
            <span class="error-message--text">{{errorMessage}}</span>
        </div>
+        <ng-container *ngIf="useCustomToolbar">
+            <adf-toolbar title="Toolbar">
+                <button md-icon-button (click)="onCreateFolderClicked($event)">
+                    <md-icon>create_new_folder</md-icon>
+                </button>
+                <button md-icon-button>
+                    <md-icon>delete</md-icon>
+                </button>
+                <button md-icon-button [mdMenuTriggerFor]="menu">
+                    <md-icon>more_vert</md-icon>
+                </button>
+                <md-menu #menu="mdMenu">
+                    <button md-menu-item>
+                        <md-icon>dialpad</md-icon>
+                        <span>Redial</span>
+                    </button>
+                    <button md-menu-item disabled>
+                        <md-icon>voicemail</md-icon>
+                        <span>Check voicemail</span>
+                    </button>
+                    <button md-menu-item>
+                        <md-icon>notifications_off</md-icon>
+                        <span>Disable alerts</span>
+                    </button>
+                </md-menu>
+            </adf-toolbar>
+        </ng-container>
        <alfresco-document-list
                #documentList
+                [creationMenuActions]="!useCustomToolbar"
                [currentFolderId]="currentFolderId"
                [contextMenuActions]="true"
                [contentActions]="true"
                [allowDropFiles]="true"
-                [sorting]="['name', 'desc']"
                (error)="onNavigationError($event)"
                (success)="resetError()"
                (preview)="showFile($event)"
-                (permissionError)="onPermissionsFailed($event)">
+                (permissionError)="handlePermissionError($event)">
            <data-columns>
                <data-column key="$thumbnail" type="image" [sortable]="false"></data-column>
                <data-column
@@ -32,20 +60,20 @@

                    <!-- Example #1: using custom template with implicit access to data context -->
                    <!--
-                    <template let-entry="$implicit">
+                    <ng-template let-entry="$implicit">
                        <span>Hi! {{entry.data.getValue(entry.row, entry.col)}}</span>
-                    </template>
+                    </ng-template>
                    -->

                    <!-- Example #2: using custom template with value access -->
                    <!--
-                    <template let-value="value">
+                    <ng-template let-value="value">
                        <span>Hi! {{value}}</span>
-                    </template>
+                    </ng-template>
                    -->

                </data-column>
-                <!-- Notes: has performance problems due to multiple files/folders causing separate HTTP calls to get tags -->
+                <!-- Notes: has performance overhead due to multiple files/folders causing separate HTTP calls to get tags -->
                <!--
                <data-column
                    title="{{'DOCUMENT_LIST.COLUMNS.TAG' | translate}}"
@@ -72,22 +100,12 @@

            <content-actions>
                <!-- folder actions -->
-                <content-action
-                        target="folder"
-                        title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.SYSTEM_1' | translate}}"
-                        handler="system1">
-                </content-action>
-                <content-action
-                        target="folder"
-                        title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.CUSTOM' | translate}}"
-                        (execute)="myFolderAction1($event)">
-                </content-action>
                <content-action
                        target="folder"
                        permission="delete"
                        [disableWithNoPermission]="true"
                        title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.DELETE' | translate}}"
-                        (permissionEvent)="onPermissionsFailed($event)"
+                        (permissionEvent)="handlePermissionError($event)"
                        handler="delete">
                </content-action>
                <!-- document actions -->
@@ -96,29 +114,14 @@
                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DOWNLOAD' | translate}}"
                        handler="download">
                </content-action>
-                <content-action
-                        target="document"
-                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.SYSTEM_2' | translate}}"
-                        handler="system2">
-                </content-action>
-                <content-action
-                        target="document"
-                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.CUSTOM' | translate}}"
-                        (execute)="myCustomAction1($event)">
-                </content-action>
                <content-action
                        target="document"
                        permission="delete"
                        [disableWithNoPermission]="true"
-                        (permissionEvent)="onPermissionsFailed($event)"
+                        (permissionEvent)="handlePermissionError($event)"
                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DELETE' | translate}}"
                        handler="delete">
                </content-action>
-                <content-action
-                        target="folder"
-                        title="Activiti: View Form"
-                        (execute)="viewActivitiForm($event)">
-                </content-action>
            </content-actions>
        </alfresco-document-list>
    </alfresco-upload-drag-area>
@@ -127,6 +130,10 @@
 <context-menu-holder></context-menu-holder>

 <div class="container">
+    <section>
+        <md-slide-toggle [(ngModel)]="useCustomToolbar">Use custom toolbar</md-slide-toggle>
+    </section>
+
    <section>
        <md-slide-toggle [(ngModel)]="multipleFileUpload">Multiple File Upload</md-slide-toggle>
    </section>
@@ -150,7 +157,7 @@
    <h5>Upload</h5>
    <section *ngIf="acceptedFilesTypeShow">
        <md-input-container>
-            <input md-input placeholder="Extension accepted" [(ngModel)]="acceptedFilesType"  data-automation-id="accepted-files-type">
+            <input mdInput placeholder="Extension accepted" [(ngModel)]="acceptedFilesType"  data-automation-id="accepted-files-type">
        </md-input-container>
    </section>
    <div *ngIf="!acceptedFilesTypeShow">
@@ -163,7 +170,7 @@
            [uploadFolders]="folderUpload"
            [versioning]="versioning"
            [disableWithNoPermission]="disableWithNoPermission"
-            (permissionEvent)="onUploadPermissionFailed($event)">
+            (permissionEvent)="handlePermissionError($event)">
        </alfresco-upload-button>
    </div>
    <div *ngIf="acceptedFilesTypeShow">
@@ -177,7 +184,7 @@
            [uploadFolders]="folderUpload"
            [versioning]="versioning"
            [disableWithNoPermission]="disableWithNoPermission"
-            (permissionEvent)="onUploadPermissionFailed($event)">
+            (permissionEvent)="handlePermissionError($event)">
        </alfresco-upload-button>
    </div>
    <section>
@@ -193,9 +200,9 @@
                     [overlayMode]="true">

        <extension-viewer [supportedExtensions]="['obj','3DS']" #extension>
-            <template let-urlFileContent="urlFileContent" let-extension="extension" >
+            <ng-template let-urlFileContent="urlFileContent" let-extension="extension" >
                <threed-viewer [urlFile]="urlFileContent" [extension]="extension" ></threed-viewer>
-            </template>
+            </ng-template>
        </extension-viewer>

    </alfresco-viewer>
@@ -15,19 +15,21 @@
 * limitations under the License.
 */

-import { Component, Input, OnInit, AfterViewInit, Optional, ViewChild, ChangeDetectorRef } from '@angular/core';
-import { ActivatedRoute, Params, Router } from '@angular/router';
-import { AlfrescoAuthenticationService, LogService, NotificationService } from 'ng2-alfresco-core';
-import { DocumentActionsService, DocumentListComponent, ContentActionHandler, DocumentActionModel, FolderActionModel } from 'ng2-alfresco-documentlist';
-import { FormService } from 'ng2-activiti-form';
-import { UploadButtonComponent, UploadDragAreaComponent } from 'ng2-alfresco-upload';
+import { Component, Input, OnInit, Optional, ViewChild, ChangeDetectorRef } from '@angular/core';
+import { ActivatedRoute, Params } from '@angular/router';
+import { MdDialog } from '@angular/material';
+import { AlfrescoContentService, FolderCreatedEvent, NotificationService } from 'ng2-alfresco-core';
+import { DocumentListComponent } from 'ng2-alfresco-documentlist';
+import { UploadService, FileUploadCompleteEvent } from 'ng2-alfresco-upload';
+
+import { CreateFolderDialog } from '../../dialogs/create-folder.dialog';

@Component({
    selector: 'files-component',
    templateUrl: './files.component.html',
    styleUrls: ['./files.component.css']
 })
-export class FilesComponent implements OnInit, AfterViewInit {
+export class FilesComponent implements OnInit {
    // The identifier of a node. You can also use one of these well-known aliases: -my- | -shared- | -root-
    currentFolderId: string = '-my-';

@@ -35,6 +37,8 @@ export class FilesComponent implements OnInit, AfterViewInit {
    fileNodeId: any;
    fileShowed: boolean = false;

+    useCustomToolbar = true;
+
    @Input()
    multipleFileUpload: boolean = false;

@@ -59,33 +63,12 @@ export class FilesComponent implements OnInit, AfterViewInit {
    @ViewChild(DocumentListComponent)
    documentList: DocumentListComponent;

-    @ViewChild(UploadButtonComponent)
-    uploadButton: UploadButtonComponent;
-
-    @ViewChild(UploadDragAreaComponent)
-    uploadDragArea: UploadDragAreaComponent;
-
-    constructor(private documentActions: DocumentActionsService,
-                private authService: AlfrescoAuthenticationService,
-                private formService: FormService,
-                private logService: LogService,
-                private changeDetector: ChangeDetectorRef,
-                private router: Router,
+    constructor(private changeDetector: ChangeDetectorRef,
                private notificationService: NotificationService,
+                private uploadService: UploadService,
+                private contentService: AlfrescoContentService,
+                private dialog: MdDialog,
                @Optional() private route: ActivatedRoute) {
-        documentActions.setHandler('my-handler', this.myDocumentActionHandler.bind(this));
-    }
-
-    myDocumentActionHandler(obj: any) {
-        window.alert('my custom action handler');
-    }
-
-    myCustomAction1(event) {
-        alert('Custom document action for ' + event.value.entry.name);
-    }
-
-    myFolderAction1(event) {
-        alert('Custom folder action for ' + event.value.entry.name);
    }

    showFile(event) {
@@ -112,32 +95,9 @@ export class FilesComponent implements OnInit, AfterViewInit {
                }
            });
        }
-        if (this.authService.isBpmLoggedIn()) {
-            this.formService.getProcessDefinitions().subscribe(
-                defs => this.setupBpmActions(defs || []),
-                err => this.logService.error(err)
-            );
-        } else {
-            this.logService.warn('You are not logged in to BPM');
-        }
-    }

-    ngAfterViewInit() {
-        this.uploadButton.onSuccess
-            .debounceTime(100)
-            .subscribe((event) => {
-                this.reload(event);
-            });
-
-        this.uploadDragArea.onSuccess
-            .debounceTime(100)
-            .subscribe((event) => {
-                this.reload(event);
-            });
-    }
-
-    viewActivitiForm(event?: any) {
-        this.router.navigate(['/activiti/tasksnode', event.value.entry.id]);
+        this.uploadService.fileUploadComplete.debounceTime(300).subscribe(value => this.onFileUploadComplete(value));
+        this.contentService.folderCreated.subscribe(value => this.onFolderCreated(value));
    }

    onNavigationError(err: any) {
@@ -150,39 +110,36 @@ export class FilesComponent implements OnInit, AfterViewInit {
        this.errorMessage = null;
    }

-    private setupBpmActions(actions: any[]) {
-        actions.map(def => {
-            let documentAction = new DocumentActionModel();
-            documentAction.title = 'Activiti: ' + (def.name || 'Unknown process');
-            documentAction.handler = this.getBpmActionHandler(def);
-            this.documentList.actions.push(documentAction);
-
-            let folderAction = new FolderActionModel();
-            folderAction.title = 'Activiti: ' + (def.name || 'Unknown process');
-            folderAction.handler = this.getBpmActionHandler(def);
-            this.documentList.actions.push(folderAction);
-        });
-    }
-
-    private getBpmActionHandler(processDefinition: any): ContentActionHandler {
-        return function (obj: any, target?: any) {
-            window.alert(`Starting BPM process: ${processDefinition.id}`);
-        }.bind(this);
-    }
-
-    onPermissionsFailed(event: any) {
-        this.notificationService.openSnackMessage(`you don't have the ${event.permission} permission to ${event.action} the ${event.type} `, 4000);
-    }
-
-    onUploadPermissionFailed(event: any) {
-        this.notificationService.openSnackMessage(`you don't have the ${event.permission} permission to ${event.action} the ${event.type} `, 4000);
-    }
-
-    reload(event: any) {
-        if (event && event.value && event.value.entry && event.value.entry.parentId) {
-            if (this.documentList.currentFolderId === event.value.entry.parentId) {
-                this.documentList.reload();
-            }
+    onFileUploadComplete(event: FileUploadCompleteEvent) {
+        if (event && event.file.options.parentId === this.documentList.currentFolderId) {
+            this.documentList.reload();
        }
    }
+
+    onFolderCreated(event: FolderCreatedEvent) {
+        console.log('FOLDER CREATED');
+        console.log(event);
+        if (event && event.parentId === this.documentList.currentFolderId) {
+            this.documentList.reload();
+        }
+    }
+
+    handlePermissionError(event: any) {
+        this.notificationService.openSnackMessage(
+            `You don't have the ${event.permission} permission to ${event.action} the ${event.type} `,
+            4000
+        );
+    }
+
+    onCreateFolderClicked(event: Event) {
+        let dialogRef = this.dialog.open(CreateFolderDialog);
+        dialogRef.afterClosed().subscribe(folderName => {
+            if (folderName) {
+                this.contentService.createFolder('', folderName, this.documentList.currentFolderId).subscribe(
+                    node => console.log(node),
+                    err => console.log(err)
+                );
+            }
+        });
+    }
 }
@@ -0,0 +1,8 @@
+.form-container {
+    padding: 10px;
+}
+
+.store-form-container{
+    width: 80%;
+    height: 80%;
+}
@@ -0,0 +1,32 @@
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
+    <header class="mdl-layout__header">
+        <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
+            <a id="demo-form" href="#demo" class="mdl-layout__tab" [class.is-active]="activeTab === 'demo'" (click)="changeToDemoForm()">DEMO</a>
+            <a id="store-form" href="#store" class="mdl-layout__tab" [class.is-active]="activeTab === 'processes'" (click)="changeToStoreForm()">STORE</a>
+        </div>
+    </header>
+    <main class="mdl-layout__content activiti">
+        <section class="mdl-layout__tab-panel" [class.is-active]="activeTab === 'demo'" id="demo">
+            <div class="form-container">
+                <activiti-form [form]="form">
+                </activiti-form>
+            </div>
+        </section>
+        <section class="mdl-layout__tab-panel" [class.is-active]="activeTab === 'store'" id="store">
+            <span>FORM NAME TO VISUALIZE</span>
+            <input [(ngModel)]="formToLoadName" class="mdl-textfield__input" type="text" (ngModelChange)="loadForm()">
+            <div *ngIf="formToLoadName && formToLoadName !== '' " class="store-form-container">
+                <activiti-form [form]="form" [data]="restoredData" #storeForm>
+                </activiti-form>
+                <button class="mdl-button mdl-js-button" (click)="store()">STORE</button>
+                <button class="mdl-button mdl-js-button" (click)="restore()">RESTORE</button>
+            </div>
+            <div>
+                <span> Please create in APS the form with the name you entered</span>
+            </div>
+            <div *ngIf="showError">
+                <span> Form Name not valid or form not present</span>
+            </div>
+        </section>
+    </main>
+</div>
@@ -0,0 +1,122 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
+import { FormModel, FormService } from 'ng2-activiti-form';
+import { DemoForm } from './demo-form';
+import { ActivitiForm } from 'ng2-activiti-form';
+
+declare var componentHandler;
+
+@Component({
+    selector: 'form-demo',
+    templateUrl: 'form-demo.component.html',
+    styleUrls: [
+        'form-demo.component.css'
+    ]
+})
+export class FormDemoComponent implements OnInit, AfterViewInit {
+
+    @ViewChild(ActivitiForm)
+    activitiForm: ActivitiForm;
+
+    form: FormModel;
+    activeTab: string = 'demo';
+    storedData: any = {};
+    restoredData: any = {};
+    formToLoadName: string = null;
+    showError: boolean = false;
+
+    constructor(private formService: FormService) {
+        formService.executeOutcome.subscribe(e => {
+            e.preventDefault();
+            console.log(e.outcome);
+        });
+    }
+
+    ngOnInit() {
+        let formDefinitionJSON: any = DemoForm.getDefinition();
+        let form = this.formService.parseForm(formDefinitionJSON);
+        console.log(form);
+        this.form = form;
+    }
+
+    ngAfterViewInit() {
+        // workaround for MDL issues with dynamic components
+        if (componentHandler) {
+            componentHandler.upgradeAllRegistered();
+        }
+    }
+
+    changeToStoreForm() {
+        this.activeTab = 'store';
+        this.showError = false;
+    }
+
+    changeToDemoForm() {
+        this.activeTab = 'demo';
+        let formDefinitionJSON: any = DemoForm.getDefinition();
+        let demoForm = this.formService.parseForm(formDefinitionJSON);
+        this.form = demoForm;
+    }
+
+    store() {
+        this.clone(this.activitiForm.form.values, this.storedData);
+        console.log('DATA SAVED');
+        console.log(this.storedData);
+        console.log('DATA SAVED');
+        this.restoredData = null;
+    }
+
+    restore() {
+        this.restoredData = this.storedData;
+        this.storedData = {};
+    }
+
+    clone(objToCopyFrom, objToCopyTo) {
+        for (let attribute in objToCopyFrom) {
+            if (objToCopyFrom.hasOwnProperty(attribute)) {
+                objToCopyTo[attribute] = objToCopyFrom[attribute];
+            }
+        }
+        return objToCopyTo;
+    }
+
+    loadForm() {
+        if (this.formToLoadName) {
+            this.showError = false;
+            this.formService
+                .getFormDefinitionByName(this.formToLoadName)
+                .debounceTime(7000)
+                .subscribe(
+                id => {
+                    this.formService.getFormDefinitionById(id).subscribe(
+                        form => {
+                            this.form = this.formService.parseForm((form);
+                        },
+                        (error) => {
+                            this.showError = true;
+                        }
+                    );
+                },
+                (error) => {
+                    this.showError = true;
+                }
+                );
+        }
+    }
+}
@@ -21,6 +21,7 @@ export { SearchComponent } from './search/search.component';
 export { SearchBarComponent } from './search/search-bar.component';
 export { LoginDemoComponent } from './login/login-demo.component';
 export { ActivitiDemoComponent } from './activiti/activiti-demo.component';
+export { ActivitiShowDiagramComponent } from './activiti/activiti-show-diagram.component';
 export { FormViewer } from './activiti/form-viewer.component';
 export { WebscriptComponent } from './webscript/webscript.component';
 export { TagComponent } from './tag/tag.component';
@@ -28,5 +29,6 @@ export { SocialComponent } from './social/social.component';
 export { AboutComponent } from './about/about.component';
 export { FilesComponent } from './files/files.component';
 export { FormNodeViewer } from './activiti/form-node-viewer.component';
-export { SettingComponent } from './setting/setting.component';
 export { ActivitiAppsView } from './activiti/apps.view';
+export { SettingsComponent } from './settings/settings.component';
+export { FormDemoComponent } from './form/form-demo.component';
@@ -15,11 +15,6 @@
    z-index: 1;
 }

-.banned {
-    width: 130px;
-    margin: 10px;
-}
-
 .toggle {
    width: 120px;
    margin: 20px;
@@ -21,27 +21,19 @@
            <span class="mdl-switch__label">CSRF</span>
        </label>
    </p>
-    <p class="banned">
-        <label for="blacklistusername">Banned username</label><br>
-        <input id="blacklistusername" type="text" placeholder="banned username" [(ngModel)]="blackListUsername"/>
-    </p>
 </div>

 <!--SETTING BUTTON-->
-
 <a class="mdl-navigation__link setting-button" data-automation-id="settings" href="" routerLink="/settings">
    <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
        <i class="material-icons">settings</i>
    </button>
 </a>

-<!--LOGIN-->
-
 <alfresco-login #alfrescologin
                [providers]="providers"
                [fieldsValidation]="customValidation"
                [disableCsrf]="disableCsrf"
-                (executeSubmit)="validateForm($event)"
                (onSuccess)="onLogin($event)"
                (onError)="onError($event)">
    <div class="mobile-settings">
@@ -65,9 +57,5 @@
                <span class="mdl-switch__label">CSRF</span>
            </label>
        </p>
-        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-            <input class="mdl-textfield__input" type="text" [(ngModel)]="blackListUsername" id="blacklistusername"/>
-            <label class="mdl-textfield__label" for="blacklistusername">Banned username</label>
-        </div>
    </div>
 </alfresco-login>
@@ -31,7 +31,6 @@ export class LoginDemoComponent implements OnInit {
    alfrescologin: any;

    providers: string = 'ECM';
-    blackListUsername: string;
    customValidation: any;

    disableCsrf: boolean = false;
@@ -114,13 +113,4 @@ export class LoginDemoComponent implements OnInit {
        this.providers = '';
        return this.providers;
    };
-
-    validateForm(event: any) {
-        let values = event.values;
-        if (values.controls['username'].value === this.blackListUsername) {
-            this.alfrescologin.addCustomFormError('username', 'This particular username has been blocked');
-            event.preventDefault();
-        }
-    }
-
 }
@@ -12,11 +12,8 @@
                <nav class="mdl-navigation">
                    <i class="icon material-icons icon-margin">link</i>
                    <div class="mdl-textfield mdl-js-textfield adf-setting-input-padding">
-                        <input data-automation-id="ecmHost"
-                               class="mdl-textfield__input" tabindex="1"
-                               type="text" tabindex="1"
-                               (change)="onChangeECMHost($event)"
-                               pattern="^(http|https):\/\/.*" id="ecmHost" value="{{ecmHost}}">
+                        <input data-automation-id="ecmHost" class="mdl-textfield__input" tabindex="1" type="text" tabindex="1" (change)="onChangeECMHost($event)"
+                            pattern="^(http|https):\/\/.*" id="ecmHost" value="{{ecmHost}}">
                        <label class="mdl-textfield__label" for="ecmHost">ECM Host</label>
                        <span class="mdl-textfield__error">ECM host is not valid!</span>
                    </div>
@@ -28,20 +25,21 @@
                <nav class="mdl-navigation">
                    <i class="icon material-icons icon-margin">link</i>
                    <div class="mdl-textfield mdl-js-textfield adf-setting-input-padding">
-                        <input class="mdl-textfield__input"
-                               type="text"
-                               (change)="onChangeBPMHost($event)"
-                               tabindex="2" pattern="^(http|https):\/\/.*" id="bpmHost" value="{{bpmHost}}">
+                        <input class="mdl-textfield__input" type="text" (change)="onChangeBPMHost($event)" tabindex="2" pattern="^(http|https):\/\/.*"
+                            id="bpmHost" value="{{bpmHost}}">
                        <label class="mdl-textfield__label" for="bpmHost">BPM Host</label>
                        <span class="mdl-textfield__error">BPM host is not valid!</span>
                    </div>
                </nav>
            </div>
            <div class="mdl-card__actions mdl-card--border">
-            <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" onclick="window.history.back()" >
-                Back
-            </a>
-        </div>
+                <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" onclick="window.history.back()">
+                    Back
+                </a>
+                <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" onclick="window.location.href = '/'">
+                    Apply
+                </a>
+            </div>
        </div>
        <div class="setting-card-padding"></div>
    </div>
@@ -21,11 +21,11 @@ import { AlfrescoSettingsService, StorageService, LogService } from 'ng2-alfresc
 declare var componentHandler: any;

@Component({
-    selector: 'alfresco-setting-demo',
-    templateUrl: './setting.component.html',
-    styleUrls: ['./setting.component.css']
+    selector: 'app-settings',
+    templateUrl: 'settings.component.html',
+    styleUrls: ['settings.component.css']
 })
-export class SettingComponent implements AfterViewChecked {
+export class SettingsComponent implements AfterViewChecked {

    ecmHost: string;
    bpmHost: string;
@@ -33,8 +33,8 @@ export class SettingComponent implements AfterViewChecked {
    constructor(private settingsService: AlfrescoSettingsService,
                private storage: StorageService,
                private logService: LogService) {
-        this.ecmHost = this.settingsService.ecmHost;
-        this.bpmHost = this.settingsService.bpmHost;
+        this.ecmHost = storage.getItem('ecmHost') || this.settingsService.ecmHost;
+        this.bpmHost = storage.getItem('bpmHost') || this.settingsService.bpmHost;
    }

    ngAfterViewChecked() {
@@ -49,7 +49,6 @@ export class SettingComponent implements AfterViewChecked {
        if (value && this.isValidUrl(value)) {
            this.logService.info(`ECM host: ${value}`);
            this.ecmHost = value;
-            this.settingsService.ecmHost = value;
            this.storage.setItem(`ecmHost`, value);
        } else {
            console.error('Ecm address does not match the pattern');
@@ -61,7 +60,6 @@ export class SettingComponent implements AfterViewChecked {
        if (value && this.isValidUrl(value)) {
            this.logService.info(`BPM host: ${value}`);
            this.bpmHost = value;
-            this.settingsService.bpmHost = value;
            this.storage.setItem(`bpmHost`, value);
        } else {
            console.error('Bpm address does not match the pattern');
@@ -0,0 +1,44 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'adf-create-folder-dialog',
+    template: `
+        <h1 md-dialog-title>Create a new folder</h1>
+        <div md-dialog-content>
+            <md-input-container class="create-folder--name">
+                <input mdInput placeholder="Folder name" [(ngModel)]="value">
+            </md-input-container>
+        </div>
+        <div md-dialog-actions>
+            <button md-button md-dialog-close>Cancel</button>
+            <button md-button [md-dialog-close]="value">Create</button>
+        </div>
+    `,
+    styles: [
+        `
+        .create-folder--name {
+            width: 100%;
+        }
+        `
+    ]
+})
+export class CreateFolderDialog {
+    value: string = '';
+}
@@ -0,0 +1,32 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { NgModule } from '@angular/core';
+import { MdSlideToggleModule, MdInputModule, MdSelectModule, MdDialogModule } from '@angular/material';
+
+const MATERIAL_MODULES = [
+    MdSlideToggleModule,
+    MdInputModule,
+    MdSelectModule,
+    MdDialogModule
+];
+
+@NgModule({
+    imports: MATERIAL_MODULES,
+    exports: MATERIAL_MODULES
+})
+export class MaterialModule {}
@@ -0,0 +1,37 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Injectable } from '@angular/core';
+import { Http } from '@angular/http';
+import { AppConfigService, StorageService } from 'ng2-alfresco-core';
+
+@Injectable()
+export class DebugAppConfigService extends AppConfigService {
+
+    constructor(private storage: StorageService, http: Http) {
+        super(http);
+    }
+
+    /** @override */
+    get<T>(key: string): T {
+        if (key === 'ecmHost' || key === 'bpmHost') {
+            return <T>(<any>this.storage.getItem(key) || super.get<T>(key));
+        }
+        return super.get<T>(key);
+    };
+
+}
@@ -35,11 +35,8 @@ import 'ng2-alfresco-userinfo';
 require('script-loader!dialog-polyfill/dialog-polyfill');
 import 'dialog-polyfill/dialog-polyfill.css';

-// Flags
-import 'flag-icon-css/css/flag-icon.min.css';
-
 // Load the Angular Material 2 stylesheet
-import '../public/css/angular-material.css';
+import '@angular/material/prebuilt-themes/indigo-pink.css';

 // Google Material Design Lite
 import 'material-design-lite/material.js';
@@ -4,24 +4,7 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
 const ExtractTextPlugin = require("extract-text-webpack-plugin");
 const helpers = require('./helpers');
 const path = require('path');
-
-const alfrescoLibs = [
-    'ng2-activiti-analytics',
-    'ng2-activiti-diagrams',
-    'ng2-activiti-form',
-    'ng2-activiti-processlist',
-    'ng2-activiti-tasklist',
-    'ng2-alfresco-core',
-    'ng2-alfresco-datatable',
-    'ng2-alfresco-documentlist',
-    'ng2-alfresco-login',
-    'ng2-alfresco-search',
-    'ng2-alfresco-tag',
-    'ng2-alfresco-upload',
-    'ng2-alfresco-userinfo',
-    'ng2-alfresco-viewer',
-    'ng2-alfresco-webscript'
-];
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

 module.exports = {
    entry: {
@@ -61,15 +44,6 @@ module.exports = {
                use: 'source-map-loader',
                exclude: [ /public/, /resources/, /dist/]
            },
-            {
-                test: /\.ts$/,
-                include: [helpers.root('app'), helpers.root('../ng2-components')],
-                loader: [
-                    'ts-loader',
-                    'angular2-template-loader'
-                ],
-                exclude: [ /node_modules/, /public/, /resources/, /dist/]
-            },
            {
                test: /\.html$/,
                loader: 'html-loader',
@@ -88,6 +62,19 @@ module.exports = {
                include: [helpers.root('app'), helpers.root('../ng2-components')],
                loader: 'raw-loader'
            },
+            {
+                test: /\.component.scss$/,
+                use: [{
+                    loader: "to-string-loader"
+                }, {
+                    loader: "raw-loader"
+                }, {
+                    loader: "sass-loader",
+                    options: {
+                        includePaths: [ path.resolve(__dirname, '../../ng2-components/ng2-alfresco-core/styles')]
+                    }
+                }]
+            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'file-loader?name=assets/[name].[hash].[ext]'
@@ -107,6 +94,7 @@ module.exports = {
    },

    plugins: [
+        new ForkTsCheckerWebpackPlugin(),
        // Workaround for angular/angular#11580
        new webpack.ContextReplacementPlugin(
            // The (\\|\/) piece accounts for path separators in *nix and Windows
@@ -119,25 +107,17 @@ module.exports = {
        }),

        new CopyWebpackPlugin([
-            ... alfrescoLibs.map(lib => {
-                return {
-                    context: `../ng2-components/${lib}/bundles/assets/` ,
-                    from: '**/*',
-                    to: `assets/`
-                }
-            }),
            {
                context: 'resources/i18n',
                from: '**/*.json',
                to: 'resources/i18n'
            },
-            ... alfrescoLibs.map(lib => {
-                return {
-                    context: 'node_modules',
-                    from: `${lib}/src/i18n/*.json`,
-                    to: 'node_modules'
-                }
-            }),
+            {
+                from: 'app.config-dev.json'
+            },
+            {
+                from: 'app.config-prod.json'
+            },
            {
                from: 'favicon-96x96.png'
            },
@@ -166,7 +146,29 @@ module.exports = {
        port: 3000,
        historyApiFallback: true,
        host: '0.0.0.0',
-        inline: true
+        inline: true,
+        proxy: {
+            '/ecm': {
+                target: {
+                    host: "0.0.0.0",
+                    protocol: 'http:',
+                    port: 8080
+                },
+                pathRewrite: {
+                    '^/ecm': ''
+                }
+            },
+            '/bpm': {
+                target: {
+                    host: "0.0.0.0",
+                    protocol: 'http:',
+                    port: 9999
+                },
+                pathRewrite: {
+                    '^/bpm': ''
+                }
+            }
+        }
    },

    node: {
@@ -4,6 +4,26 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const commonConfig = require('./webpack.common.js');
 const helpers = require('./helpers');
 const path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+var HappyPack = require('happypack');
+
+const alfrescoLibs = [
+    'ng2-activiti-analytics',
+    'ng2-activiti-diagrams',
+    'ng2-activiti-form',
+    'ng2-activiti-processlist',
+    'ng2-activiti-tasklist',
+    'ng2-alfresco-core',
+    'ng2-alfresco-datatable',
+    'ng2-alfresco-documentlist',
+    'ng2-alfresco-login',
+    'ng2-alfresco-search',
+    'ng2-alfresco-tag',
+    'ng2-alfresco-upload',
+    'ng2-alfresco-userinfo',
+    'ng2-alfresco-viewer',
+    'ng2-alfresco-webscript'
+];

 module.exports = webpackMerge(commonConfig, {

@@ -15,6 +35,19 @@ module.exports = webpackMerge(commonConfig, {
        chunkFilename: '[id].chunk.js'
    },

+    module: {
+        rules: [
+            {
+                test: /\.ts$/,
+                include: [helpers.root('app'), helpers.root('../ng2-components')],
+                loader: [
+                    'happypack/loader?id=ts','angular2-template-loader'
+                ],
+                exclude: [/node_modules/, /public/, /resources/, /dist/]
+            }
+        ]
+    },
+
    resolve: {
        alias: {
            "ng2-alfresco-core$": path.resolve(__dirname, '../../ng2-components/ng2-alfresco-core/index.ts'),
@@ -41,12 +74,32 @@ module.exports = webpackMerge(commonConfig, {
    },

    plugins: [
+        new HappyPack({
+            id: 'ts',
+            threads: 8,
+            loaders: [
+                {
+                    path: 'ts-loader',
+                    query: {happyPackMode: true}
+                }
+            ]
+        }),
+
        new webpack.NoEmitOnErrorsPlugin(),
        new ExtractTextPlugin('[name].[hash].css'),
        new webpack.LoaderOptionsPlugin({
            htmlLoader: {
                minimize: false // workaround for ng2
            }
-        })
+        }),
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `../ng2-components/${lib}/src/i18n/`,
+                    from: '**/*',
+                    to: `assets/${lib}/i18n/`
+                }
+            })
+        ])
    ]
 });
@@ -4,6 +4,7 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const commonConfig = require('./webpack.common.js');
 const helpers = require('./helpers');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
+var HappyPack = require('happypack');

 const ENV = process.env.NODE_ENV = process.env.ENV = 'production';

@@ -27,7 +28,7 @@ const alfrescoLibs = [

 module.exports = webpackMerge(commonConfig, {

-    devtool: 'source-map',
+    devtool: 'eval',

    output: {
        path: helpers.root('dist'),
@@ -41,11 +42,38 @@ module.exports = webpackMerge(commonConfig, {
        modules: [helpers.root('node_modules')]
    },

+    module: {
+        rules: [
+            {
+                test: /\.ts$/,
+                include: [helpers.root('app'), helpers.root('../ng2-components')],
+                use: ['happypack/loader?id=ts', 'angular2-template-loader'],
+                exclude: [/node_modules/, /public/, /resources/, /dist/]
+            }
+        ]
+    },
+
    plugins: [
+        new HappyPack({
+            id: 'ts',
+            threads: 4,
+            loaders: [
+                {
+                    path: 'ts-loader',
+                    query: {
+                        happyPackMode: true,
+                        "compilerOptions": {
+                            "paths": {}
+                        }
+                    }
+                }
+            ]
+        }),
+
        new CopyWebpackPlugin([
            ... alfrescoLibs.map(lib => {
                return {
-                    context: `node_modules/${lib}/bundles/assets/` ,
+                    context: `node_modules/${lib}/bundles/assets/`,
                    from: '**/*',
                    to: `assets/`
                }
@@ -1,5 +1,6 @@
 const webpack = require('webpack');
-const helpers = require('./helpers');
+const helpers= require('./helpers');
+var HappyPack = require('happypack');

 module.exports = {

@@ -14,7 +15,7 @@ module.exports = {
        rules: [
            {
                test: /\.ts$/,
-                loaders: ['ts-loader', 'angular2-template-loader'],
+                loaders: ['happypack/loader?id=ts', 'angular2-template-loader'],
                exclude: [ /public/, /resources/, /dist/]
            },
            {
@@ -36,6 +37,17 @@ module.exports = {
    },

    plugins: [
+        new HappyPack({
+            id: 'ts',
+            threads: 4,
+            loaders: [
+                {
+                    path: 'ts-loader',
+                    query: {happyPackMode: true}
+                }
+            ]
+        }),
+
        new webpack.ContextReplacementPlugin(
            // The (\\|\/) piece accounts for path separators in *nix and Windows
            /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
@@ -1,7 +1,7 @@
 {
  "name": "Alfresco-Angular2-Demo",
  "description": "Demo shell for Alfresco Angular2 components",
-  "version": "1.5.0",
+  "version": "1.6.0-beta6",
  "author": "Alfresco Software, Ltd.",
  "scripts": {
    "build": "npm run server-versions && rimraf dist && npm run webpack -- --config  config/webpack.prod.js --progress --profile --bail",
@@ -13,7 +13,7 @@
    "clean": "npm run clean-build  && rimraf dist node_modules typings dist",
    "clean-build": "rimraf 'app/{,**/}**.js' 'app/{,**/}**.js.map' 'app/{,**/}**.d.ts'",
    "server-versions": "rimraf versions.json && npm list --depth=0 --json=true --prod=true > versions.json  || exit 0",
-    "webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
+    "webpack-dev-server": "node node_modules/webpack-dev-server/bin/webpack-dev-server.js",
    "webpack": "node node_modules/webpack/bin/webpack.js",
    "aws": "node app.js"
  },
@@ -57,48 +57,48 @@
    "@angular/animations": "~4.0.0",
    "@angular/common": "~4.0.0",
    "@angular/compiler": "~4.0.0",
+    "@angular/compiler-cli": "~4.0.0",
    "@angular/core": "~4.0.0",
    "@angular/forms": "~4.0.0",
    "@angular/http": "~4.0.0",
+    "@angular/material": "2.0.0-beta.6",
    "@angular/platform-browser": "~4.0.0",
    "@angular/platform-browser-dynamic": "~4.0.0",
    "@angular/router": "~4.0.0",
-    "@angular/compiler-cli": "~4.0.0",
-    "@angular/material": "2.0.0-beta.1",
+    "@ngx-translate/core": "^7.0.0",
+    "alfresco-js-api": "~1.6.0-beta6",
+    "chart.js": "2.5.0",
    "core-js": "2.4.1",
-    "reflect-metadata": "0.1.9",
-    "rxjs": "5.1.0",
-    "zone.js": "0.8.11",
    "dialog-polyfill": "^0.4.7",
+    "element.scrollintoviewifneeded-polyfill": "^1.0.1",
+    "intl": "^1.2.5",
    "material-design-icons": "2.2.3",
    "material-design-lite": "1.2.1",
-    "ng2-translate": "5.0.0",
-    "pdfjs-dist": "1.5.404",
-    "flag-icon-css": "2.3.0",
-    "moment": "2.15.1",
-    "chart.js": "2.5.0",
-    "ng2-charts": "1.5.0",
-    "raphael": "2.2.7",
    "md-date-time-picker": "2.2.0",
-    "element.scrollintoviewifneeded-polyfill": "^1.0.1",
+    "moment": "2.15.1",
    "ng2-3d-editor": "0.0.15",
-    "alfresco-js-api": "~1.5.0",
-    "ng2-activiti-analytics": "1.5.0",
-    "ng2-activiti-diagrams": "1.5.0",
-    "ng2-activiti-form": "1.5.0",
-    "ng2-activiti-processlist": "1.5.0",
-    "ng2-activiti-tasklist": "1.5.0",
-    "ng2-alfresco-core": "1.5.0",
-    "ng2-alfresco-datatable": "1.5.0",
-    "ng2-alfresco-documentlist": "1.5.0",
-    "ng2-alfresco-login": "1.5.0",
-    "ng2-alfresco-search": "1.5.0",
-    "ng2-alfresco-tag": "1.5.0",
-    "ng2-alfresco-social": "1.5.0",
-    "ng2-alfresco-upload": "1.5.0",
-    "ng2-alfresco-userinfo": "1.5.0",
-    "ng2-alfresco-viewer": "1.5.0",
-    "ng2-alfresco-webscript": "1.5.0"
+    "ng2-activiti-analytics": "1.6.0-beta6",
+    "ng2-activiti-diagrams": "1.6.0-beta6",
+    "ng2-activiti-form": "1.6.0-beta6",
+    "ng2-activiti-processlist": "1.6.0-beta6",
+    "ng2-activiti-tasklist": "1.6.0-beta6",
+    "ng2-alfresco-core": "1.6.0-beta6",
+    "ng2-alfresco-datatable": "1.6.0-beta6",
+    "ng2-alfresco-documentlist": "1.6.0-beta6",
+    "ng2-alfresco-login": "1.6.0-beta6",
+    "ng2-alfresco-search": "1.6.0-beta6",
+    "ng2-alfresco-social": "1.6.0-beta6",
+    "ng2-alfresco-tag": "1.6.0-beta6",
+    "ng2-alfresco-upload": "1.6.0-beta6",
+    "ng2-alfresco-userinfo": "1.6.0-beta6",
+    "ng2-alfresco-viewer": "1.6.0-beta6",
+    "ng2-alfresco-webscript": "1.6.0-beta6",
+    "ng2-charts": "^1.6.0",
+    "pdfjs-dist": "1.5.404",
+    "raphael": "2.2.7",
+    "reflect-metadata": "0.1.9",
+    "rxjs": "5.1.0",
+    "zone.js": "0.8.11"
  },
  "devDependencies": {
    "@types/hammerjs": "^2.0.34",
@@ -109,6 +109,8 @@
    "css-loader": "0.26.1",
    "extract-text-webpack-plugin": "^2.0.0-rc.3",
    "file-loader": "^0.10.0",
+    "fork-ts-checker-webpack-plugin": "^0.2.3",
+    "happypack": "3.0.0",
    "html-loader": "^0.4.4",
    "html-webpack-plugin": "^2.28.0",
    "jasmine-core": "^2.5.2",
@@ -122,9 +124,11 @@
    "karma-remap-istanbul": "^0.6.0",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.2",
+    "node-sass": "^4.5.3",
    "null-loader": "^0.1.1",
    "raw-loader": "^0.5.1",
-    "rimraf": "^2.5.4",
+    "rimraf": "^2.6.1",
+    "sass-loader": "^6.0.5",
    "script-loader": "0.7.0",
    "source-map-loader": "^0.1.6",
    "sourcemap-istanbul-instrumenter-loader": "^0.2.0",
@@ -62,3 +62,29 @@ body, html {
    border: 0px;
    cursor: pointer;
 }
+
+.adf-flag-icon-gb {
+    background-image: url(./flags/gb.svg);
+}
+
+.adf-flag-icon-it {
+    background-image: url(./flags/it.svg);
+}
+
+.adf-flag-icon-ru {
+    background-image: url(./flags/ru.svg);
+}
+
+.adf-flag-icon:before {
+    content: "\00a0";
+}
+
+.adf-flag-icon {
+    background-size: contain;
+    background-position: 50%;
+    background-repeat: no-repeat;
+    position: relative;
+    display: inline-block;
+    width: 1.33333333em;
+    line-height: 1em;
+}
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="480" width="640">
+  <defs>
+    <clipPath id="a">
+      <path fill-opacity=".67" d="M-85.333 0h682.67v512h-682.67z"/>
+    </clipPath>
+  </defs>
+  <g clip-path="url(#a)" transform="translate(80) scale(.94)">
+    <g stroke-width="1pt">
+      <path fill="#006" d="M-256 0H768.02v512.01H-256z"/>
+      <path d="M-256 0v57.244l909.535 454.768H768.02V454.77L-141.515 0H-256zM768.02 0v57.243L-141.515 512.01H-256v-57.243L653.535 0H768.02z" fill="#fff"/>
+      <path d="M170.675 0v512.01h170.67V0h-170.67zM-256 170.67v170.67H768.02V170.67H-256z" fill="#fff"/>
+      <path d="M-256 204.804v102.402H768.02V204.804H-256zM204.81 0v512.01h102.4V0h-102.4zM-256 512.01L85.34 341.34h76.324l-341.34 170.67H-256zM-256 0L85.34 170.67H9.016L-256 38.164V0zm606.356 170.67L691.696 0h76.324L426.68 170.67h-76.324zM768.02 512.01L426.68 341.34h76.324L768.02 473.848v38.162z" fill="#c00"/>
+    </g>
+  </g>
+</svg>
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="480" width="640" version="1">
+  <g fill-rule="evenodd" stroke-width="1pt">
+    <path fill="#fff" d="M0 0h640v479.997H0z"/>
+    <path fill="#005700" d="M0 0h213.331v479.997H0z"/>
+    <path fill="#fc0000" d="M426.663 0h213.331v479.997H426.663z"/>
+  </g>
+</svg>
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="480" width="640" version="1">
+  <g fill-rule="evenodd" stroke-width="1pt">
+    <path fill="#fff" d="M0 0h640v480H0z"/>
+    <path fill="#01017e" d="M0 160.003h640V480H0z"/>
+    <path fill="#fe0101" d="M0 319.997h640V480H0z"/>
+  </g>
+</svg>
@@ -21,5 +21,8 @@
                "CUSTOM": "Custom action"
            }
        }
+    },
+    "ANALYTICS_REPORT":{
+        "NO_REPORT_MESSAGE":"No report selected. Choose a report from the list"
    }
 }
@@ -38,7 +38,9 @@
            "ng2-alfresco-upload": ["../ng2-components/ng2-alfresco-upload/"],
            "ng2-alfresco-viewer": ["../ng2-components/ng2-alfresco-viewer/"],
            "ng2-alfresco-webscript": ["../ng2-components/ng2-alfresco-webscript/"],
-            "ng2-alfresco-userinfo": ["../ng2-components/ng2-alfresco-userinfo/"]
+            "ng2-alfresco-userinfo": ["../ng2-components/ng2-alfresco-userinfo/"],
+            "@angular/*": ["../ng2-components/node_modules/@angular/*"],
+            "rxjs/*": ["../ng2-components/node_modules/rxjs/*"]
        },
        "suppressImplicitAnyIndexErrors": true
    },
@@ -1,33 +1,4 @@
-# Alfresco Angular 2 Components
-
- <p>
-  <a title='Build Status Travis' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
-    <img src='https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master'  alt='travis
-    Status' />
-  </a>
-  <a title='Build Status AppVeyor' href="https://ci.appveyor.com/project/alfresco/alfresco-ng2-components">
-    <img src='https://ci.appveyor.com/api/projects/status/github/Alfresco/alfresco-ng2-components'  alt='travis
-    Status' />
-  </a>
-  <a href='https://codecov.io/gh/Alfresco/alfresco-ng2-components'>
-    <img src='https://img.shields.io/codecov/c/github/Alfresco/alfresco-ng2-components/master.svg?maxAge=2592000' alt='Coverage Status' />
-  </a>
-  <a href='https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE'>
-     <img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
-  </a>
-  <a href='https://www.alfresco.com/'>
-     <img src='https://img.shields.io/badge/style-component-green.svg?label=alfresco' alt='alfresco component' />
-  </a>
-  <a href='https://angular.io/'>
-     <img src='https://img.shields.io/badge/style-2-red.svg?label=angular' alt='angular 2' />
-  </a>
-  <a href='https://www.typescriptlang.org/docs/tutorial.html'>
-     <img src='https://img.shields.io/badge/style-lang-blue.svg?label=typescript' alt='typescript' />
-  </a>
-  <a href='https://www.alfresco.com/'>
-     <img src='https://img.shields.io/badge/style-%3E5.0.0-blue.svg?label=node%20version' alt='node version' />
-  </a>
-</p>
+# Alfresco Angular Components

 ## Base components

@@ -36,7 +7,6 @@
 - [adf-accordion-group](ng2-alfresco-core/README.md)
 - [adf-accordion](ng2-alfresco-core/README.md)
 - [context-menu](ng2-alfresco-core/README.md)
- * Material Design elements
 * Context Menu component

 ## ECM components
@@ -91,39 +61,4 @@

 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. From another terminal move inside the demo sub 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
-```
+http://devproducts.alfresco.com/
@@ -1,4 +1,5 @@
-var webpackConfig = require('./webpack.test');
+const webpackCoverage = require('./webpack.coverage');
+const helpers = require('./helpers');

 module.exports = function (config) {
    var _config = {
@@ -8,28 +9,42 @@ module.exports = function (config) {

        files: [
            {pattern: './node_modules/hammerjs/hammer.min.js', included: true, watched: false},
+            {
+                pattern: './node_modules/@angular/material/prebuilt-themes/indigo-pink.css',
+                included: true,
+                watched: false
+            },

            //diagrams
            {pattern: './node_modules/chart.js/dist/Chart.js', included: true, watched: false},
            {pattern: './node_modules/alfresco-js-api/dist/alfresco-js-api.min.js', included: true, watched: false},
            {pattern: './node_modules/raphael/raphael.min.js', included: true, watched: false},
            {pattern: './node_modules/moment/min/moment.min.js', included: true, watched: false},
-            {pattern: './node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js', included: true, watched: false},
+            {
+                pattern: './node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js',
+                included: true,
+                watched: false
+            },

            {pattern: './node_modules/ng2-translate/ng2-translate.js', included: false, watched: false},
-            {pattern: './node_modules/ng2-charts/bundles/ng2-charts.umd.js', included: false, served: true, watched: false},
+            {
+                pattern: './node_modules/ng2-charts/bundles/ng2-charts.umd.js',
+                included: false,
+                served: true,
+                watched: false
+            },

            // pdf-js
            {pattern: './node_modules/pdfjs-dist/build/pdf.js', included: true, watched: false},
            {pattern: './node_modules/pdfjs-dist/build/pdf.worker.js', included: true, watched: false},
            {pattern: './node_modules/pdfjs-dist/web/pdf_viewer.js', included: true, watched: false},

-            {pattern:  config.component +'/karma-test-shim.js', watched: false},
+            {pattern: config.component + '/karma-test-shim.js', watched: false},
            {pattern: './ng2-**/src/assets/**/*.*', included: false, served: true, watched: false},
            {pattern: './ng2-**/src/**/*.ts', included: false, served: true, watched: false}
        ],

-        webpack: webpackConfig,
+        webpack: webpackCoverage(config),

        webpackMiddleware: {
            noInfo: true,
@@ -59,6 +74,15 @@ module.exports = function (config) {
            Chrome_travis_ci: {
                base: 'Chrome',
                flags: ['--no-sandbox']
+            },
+            Chrome_headless: {
+                base: 'Chrome',
+                flags: [
+                    '--no-sandbox',
+                    '--headless',
+                    '--disable-gpu',
+                    '--remote-debugging-port=9222'
+                ]
            }
        },

@@ -88,7 +112,7 @@ module.exports = function (config) {

        coverageReporter: {
            includeAllSources: true,
-            dir: './coverage/',
+            dir: './coverage/' + config.component + '/',
            subdir: 'report',
            reporters: [
                {type: 'text'},
@@ -4,6 +4,23 @@ const commonConfig = require('./webpack.common.js');

 module.exports = webpackMerge(commonConfig, {

+    // require those dependencies but don't bundle them
+    externals: [
+        /^\@angular\//,
+        /^rxjs\//,
+        'moment',
+        'raphael',
+        'ng2-charts',
+        'alfresco-js-api',
+        'ng2-alfresco-core',
+        'ng2-alfresco-datatable',
+        'ng2-activiti-analytics',
+        'ng2-activiti-diagrams',
+        'ng2-activiti-form',
+        "ng2-activiti-tasklist",
+        'ng2-alfresco-documentlist'
+    ],
+
    output: {
        filename: '[name]/bundles/[name].js',
        library: '[name]',
@@ -2,6 +2,30 @@ const webpack = require('webpack');
 const helpers = require('./helpers');
 const fs = require('fs');
 const path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+var HappyPack = require('happypack');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+
+const alfrescoLibs = [
+    'ng2-activiti-analytics',
+    'ng2-activiti-diagrams',
+    'ng2-activiti-form',
+    'ng2-activiti-processlist',
+    'ng2-activiti-tasklist',
+    'ng2-alfresco-core',
+    'ng2-alfresco-datatable',
+    'ng2-alfresco-documentlist',
+    'ng2-alfresco-login',
+    'ng2-alfresco-search',
+    'ng2-alfresco-social',
+    'ng2-alfresco-tag',
+    'ng2-alfresco-upload',
+    'ng2-alfresco-userinfo',
+    'ng2-alfresco-viewer',
+    'ng2-alfresco-webscript'
+];
+
+const ENV = process.env.NODE_ENV = process.env.ENV = 'production';

 module.exports = {

@@ -14,22 +38,28 @@ module.exports = {
        }
    },

-    // require those dependencies but don't bundle them
-    externals: [
-        /^\@angular\//,
-        /^rxjs\//,
-        'moment',
-        'raphael',
-        'ng2-charts',
-        'alfresco-js-api',
-        'ng2-alfresco-core',
-        'ng2-alfresco-datatable',
-        'ng2-activiti-analytics',
-        'ng2-activiti-diagrams',
-        'ng2-activiti-form',
-        "ng2-activiti-tasklist",
-        'ng2-alfresco-documentlist'
-    ],
+    resolve: {
+        alias: {
+            "ng2-alfresco-core": path.resolve(__dirname, '../ng2-alfresco-core/index.ts'),
+            "ng2-alfresco-datatable": path.resolve(__dirname, '../ng2-alfresco-datatable/index.ts'),
+            "ng2-activiti-diagrams": path.resolve(__dirname, '../ng2-activiti-diagrams/index.ts'),
+            "ng2-activiti-analytics": path.resolve(__dirname, '../ng2-activiti-analytics/index.ts'),
+            "ng2-activiti-form": path.resolve(__dirname, '../ng2-activiti-form/index.ts'),
+            "ng2-activiti-tasklist": path.resolve(__dirname, '../ng2-activiti-tasklist/index.ts'),
+            "ng2-activiti-processlist": path.resolve(__dirname, '../ng2-activiti-processlist/index.ts'),
+            "ng2-alfresco-documentlist": path.resolve(__dirname, '../ng2-alfresco-documentlist/index.ts'),
+            "ng2-alfresco-login": path.resolve(__dirname, '../ng2-alfresco-login/index.ts'),
+            "ng2-alfresco-search": path.resolve(__dirname, '../ng2-alfresco-search/index.ts'),
+            "ng2-alfresco-social": path.resolve(__dirname, '../ng2-alfresco-social/index.ts'),
+            "ng2-alfresco-tag": path.resolve(__dirname, '../ng2-alfresco-tag/index.ts'),
+            "ng2-alfresco-upload": path.resolve(__dirname, '../ng2-alfresco-upload/index.ts'),
+            "ng2-alfresco-viewer": path.resolve(__dirname, '../ng2-alfresco-viewer/index.ts'),
+            "ng2-alfresco-webscript": path.resolve(__dirname, '../ng2-alfresco-webscript/index.ts'),
+            "ng2-alfresco-userinfo": path.resolve(__dirname, '../ng2-alfresco-userinfo/index.ts')
+        },
+        extensions: ['.ts', '.js'],
+        modules: [helpers.root('node_modules')]
+    },

    module: {
        rules: [
@@ -51,18 +81,13 @@ module.exports = {
                loader: 'tslint-loader',
                options: {
                    emitErrors: true,
-                    configFile: path.resolve(__dirname, './assets/tslint.json')
+                    failOnHint: true
                },
                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
            },
            {
                test: /\.ts$/,
-                use: ['ts-loader?' + JSON.stringify({
-                    "compilerOptions": {
-                        "typeRoots": [
-                            "../node_modules/@types"
-                        ]}
-                }), 'angular2-template-loader'],
+                loader: ['happypack/loader?id=ts', 'angular2-template-loader'],
                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
            },
            {
@@ -72,9 +97,23 @@ module.exports = {
            },
            {
                test: /\.css$/,
-                loader: ['to-string-loader', 'css-loader'],
+                loader: ['happypack/loader?id=css'],
                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            }, {
+            },
+            {
+                test: /\.component.scss$/,
+                use: [{
+                    loader: "to-string-loader"
+                }, {
+                    loader: "raw-loader"
+                }, {
+                    loader: "sass-loader",
+                    options: {
+                        includePaths: [ path.resolve(__dirname, '../../ng2-components/ng2-alfresco-core/styles')]
+                    }
+                }]
+            },
+            {
                enforce: 'pre',
                test: /\.ts$/,
                loader: 'license-check',
@@ -82,7 +121,7 @@ module.exports = {
                    emitErrors: true,
                    licenseFile: path.resolve(__dirname, './assets/license_header.txt')
                },
-                exclude: [/node_modules/, /bundles/, /dist/, /demo/, /rendering-queue.services.ts/],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/, /rendering-queue.services.ts/]
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
@@ -102,30 +141,40 @@ module.exports = {
        ]
    },

-    resolve: {
-        alias: {
-            "ng2-alfresco-core": path.resolve(__dirname, '../ng2-alfresco-core/index.ts'),
-            "ng2-alfresco-datatable": path.resolve(__dirname, '../ng2-alfresco-datatable/index.ts'),
-            "ng2-activiti-diagrams": path.resolve(__dirname, '../ng2-activiti-diagrams/index.ts'),
-            "ng2-activiti-analytics":path.resolve(__dirname, '../ng2-activiti-analytics/index.ts'),
-            "ng2-activiti-form":path.resolve(__dirname, '../ng2-activiti-form/index.ts'),
-            "ng2-activiti-tasklist": path.resolve(__dirname, '../ng2-activiti-tasklist/index.ts'),
-            "ng2-activiti-processlist": path.resolve(__dirname, '../ng2-activiti-processlist/index.ts'),
-            "ng2-alfresco-documentlist": path.resolve(__dirname, '../ng2-alfresco-documentlist/index.ts'),
-            "ng2-alfresco-login": path.resolve(__dirname, '../ng2-alfresco-login/index.ts'),
-            "ng2-alfresco-search": path.resolve(__dirname, '../ng2-alfresco-search/index.ts'),
-            "ng2-alfresco-social": path.resolve(__dirname, '../ng2-alfresco-social/index.ts'),
-            "ng2-alfresco-tag": path.resolve(__dirname, '../ng2-alfresco-tag/index.ts'),
-            "ng2-alfresco-upload": path.resolve(__dirname, '../ng2-alfresco-upload/index.ts'),
-            "ng2-alfresco-viewer": path.resolve(__dirname, '../ng2-alfresco-viewer/index.ts'),
-            "ng2-alfresco-webscript": path.resolve(__dirname, '../ng2-alfresco-webscript/index.ts'),
-            "ng2-alfresco-userinfo": path.resolve(__dirname, '../ng2-alfresco-userinfo/index.ts')
-        },
-        extensions: ['.ts', '.js'],
-            modules: [helpers.root('node_modules')]
-    },
-
    plugins: [
+        new ForkTsCheckerWebpackPlugin(),
+        new HappyPack({
+            id: 'ts',
+            threads: 2,
+            loaders: [
+                {
+                    path: 'ts-loader',
+                    query: {
+                        happyPackMode: true,
+                        "compilerOptions": {
+                            "paths": {
+                            }
+                        }
+                    }
+                }
+            ]
+        }),
+
+        new HappyPack({
+            id: 'css',
+            threads: 2,
+            loaders: ['to-string-loader', 'css-loader' ]
+        }),
+
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    from: `${lib}/src/i18n/`,
+                    to: `${lib}/bundles/assets/${lib}/i18n/`
+                }
+            })
+        ]),
+
        new webpack.NoEmitOnErrorsPlugin(),

        new webpack.BannerPlugin(fs.readFileSync(path.resolve(__dirname, './assets/license_header_add.txt'), 'utf8')),
@@ -134,7 +183,17 @@ module.exports = {
            /angular(\\|\/)core(\\|\/)@angular/,
            helpers.root('./src'),
            {}
-        )
+        ),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
    ],

    node: {
@@ -0,0 +1,26 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const testConfig = require('./webpack.test.js');
+const helpers = require('./helpers');
+
+module.exports = function (config) {
+    return webpackMerge(testConfig, {
+
+        devtool: 'inline-source-map',
+
+        module: {
+            rules: [
+                {
+                    enforce: 'post',
+                    test: /^(?!(.*spec|index|.*mock|.*model|.*event)).*\.ts?$/,
+                    loader: 'istanbul-instrumenter-loader',
+                    include: [helpers.root(config.component + '/src')],
+                    exclude: [
+                        /node_modules/,
+                        /test/
+                    ]
+                }
+            ]
+        }
+    });
+};
@@ -1,37 +1,15 @@
-const webpack = require('webpack');
 const helpers = require('./helpers');
+const webpackMerge = require('webpack-merge');
+const commonConfig = require('./webpack.common.js');

-const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
-
-module.exports = {
+module.exports = webpackMerge(commonConfig, {

    devtool: 'inline-source-map',

    module: {
        rules: [
            {
-                enforce: 'pre',
-                test: /\.js$/,
-                loader: 'source-map-loader',
-                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },
-            {
-                test: /\.ts$/,
-                loaders: ['ts-loader?' + JSON.stringify({ transpileOnly: true}), 'angular2-template-loader'],
-                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },
-            {
-                test: /\.html$/,
-                loader: 'html-loader',
-                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },
-            {
-                test: /\.css$/,
-                loader: ['to-string-loader', 'css-loader'],
-                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },
-            {
-                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico|pdf)$/,
+                test: /\.(txt|pdf)$/,
                loader: 'file-loader',
                query: {
                    name: '[path][name].[ext]',
@@ -39,47 +17,7 @@ module.exports = {
                        return url.replace('src', 'dist');
                    }
                }
-            },
-            {
-                enforce: 'post',
-                test: /\.ts$/,
-                loader: 'istanbul-instrumenter-loader',
-                exclude: [
-                    /node_modules/,
-                    /test/
-                ]
            }
        ]
-    },
-
-    resolve: {
-        extensions: ['.ts', '.js'],
-        symlinks: false,
-        modules: [helpers.root('../ng2-components'), helpers.root('node_modules')]
-    },
-
-    plugins: [
-        new webpack.NoEmitOnErrorsPlugin(),
-
-        new webpack.ContextReplacementPlugin(
-            /angular(\\|\/)core(\\|\/)@angular/,
-            helpers.root('./src'),
-            {}
-        ),
-        new webpack.DefinePlugin({
-            'process.env': {
-                'ENV': JSON.stringify(ENV)
-            }
-        }),
-        new webpack.LoaderOptionsPlugin({
-                htmlLoader: {
-                    minimize: false // workaround for ng2
-                }
-        })
-    ],
-
-    node: {
-        fs: 'empty',
-        module: false
    }
-};
+});
@@ -8,7 +8,6 @@ dist
 src/**/*.js
 src/**/*.js.map
 src/**/*.d.ts
-demo/**/*.js
 demo/**/*.js.map
 demo/**/*.d.ts
 index.js
@@ -18,3 +17,4 @@ index.js.map
 /package/
 /bundles/
 index.d.ts
+/.happypack
@@ -4,6 +4,7 @@ npm-debug.log

 coverage/
 demo/
+dist/
 node_modules
 typings/
 fonts/
@@ -15,3 +16,4 @@ fonts/
 /karma.conf.js
 /gulpfile.ts
 /.npmignore
+/.happypack
@@ -1,346 +1,145 @@
-# Activiti Analytics Component for Angular 2
-<p>
-  <a title='Build Status Travis' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
-    <img src='https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master'  alt='travis
-    Status' />
-  </a>
-  <a title='Build Status AppVeyor' href="https://ci.appveyor.com/project/alfresco/alfresco-ng2-components">
-    <img src='https://ci.appveyor.com/api/projects/status/github/Alfresco/alfresco-ng2-components'  alt='travis
-    Status' />
-  </a>
-  <a href='https://codecov.io/gh/Alfresco/alfresco-ng2-components'>
-    <img src='https://img.shields.io/codecov/c/github/Alfresco/alfresco-ng2-components/master.svg?maxAge=2592000' alt='Coverage Status' />
-  </a>
-  <a href='https://www.npmjs.com/package/ng2-activiti-analytics'>
-    <img src='https://img.shields.io/npm/dt/ng2-activiti-analytics.svg' alt='npm downloads' />
-  </a>
-  <a href='https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE'>
-     <img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
-  </a>
-  <a href='https://www.alfresco.com/'>
-     <img src='https://img.shields.io/badge/style-component-green.svg?label=alfresco' alt='alfresco component' />
-  </a>
-  <a href='https://angular.io/'>
-     <img src='https://img.shields.io/badge/style-2-red.svg?label=angular' alt='angular 2' />
-  </a>
-  <a href='https://www.typescriptlang.org/docs/tutorial.html'>
-     <img src='https://img.shields.io/badge/style-lang-blue.svg?label=typescript' alt='typescript' />
-  </a>
-  <a href='https://www.alfresco.com/'>
-     <img src='https://img.shields.io/badge/style-%3E5.0.0-blue.svg?label=node%20version' alt='node version' />
-  </a>
-</p>
+# Activiti Analytics Components
+
+<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
+
+<!-- toc -->
+
+- [Prerequisites](#prerequisites)
+- [Install](#install)
+- [Activiti Analytics List Component](#activiti-analytics-list-component)
+  * [Properties](#properties)
+  * [Events](#events)
+- [Activiti Analytics Component](#activiti-analytics-component)
+  * [Properties](#properties-1)
+  * [Events](#events-1)
+- [Analytics Generator Component](#analytics-generator-component)
+  * [Properties](#properties-2)
+  * [Events](#events-2)
+- [Build from sources](#build-from-sources)
+- [NPM scripts](#npm-scripts)
+- [Demo](#demo)
+- [License](#license)
+
+<!-- tocstop -->
+
+<!-- markdown-toc end -->

 ## 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).

+> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
+
 ## Install

-Follow the 3 steps below:
+```sh
+npm install ng2-activiti-analytics
+```

-1. Npm
-
-    ```sh
-    npm install ng2-activiti-analytics --save
-    ```
-
-2. Html
-
-    Include these dependencies in your index.html page:
-
-    ```html
-
-    <!-- Charts -->
-    <script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>
-    <script src="node_modules/raphael/raphael.min.js"></script>
-
-    <!-- Moment js -->
-    <script src="node_modules/moment/min/moment.min.js"></script>
-
-    <!-- Date picker -->
-    <script src="node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js"></script>
-    <script src="node_modules/md-date-time-picker/dist/js/draggabilly.pkgd.min.js"></script>
-    <link rel="stylesheet" href="node_modules/md-date-time-picker/dist/css/mdDateTimePicker.css" media="all">
-
-    <!-- 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">
-
-    <!-- Load the Angular Material 2 stylesheet -->
-    <link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
-
-    <!-- Polyfill(s) for Safari (pre-10.x) -->
-    <script src="node_modules/intl/dist/Intl.min.js"></script>
-    <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
-
-    <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/core-js/client/shim.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
-    <script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
-
-    <!-- Polyfill(s) for dialogs -->
-    <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
-    <link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
-    <style>._dialog_overlay { position: static !important; } </style>
-
-    <!-- Modules  -->
-    <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>
-    ```
-
-3. SystemJs
-
-    Add the following components to your systemjs.config.js file:
-
-    - moment
-    - ng2-charts
-    - ng2-translate
-    - alfresco-js-api
-    - ng2-alfresco-core
-    - ng2-activiti-diagrams
-    - ng2-activiti-analytics
-
-    Please refer to the following example file: [systemjs.config.js](demo/systemjs.config.js) .
-
-## Basic usage example Activiti Analytics List
+## Activiti Analytics List Component

 The component shows the list of all the available reports

 ```html
-<analytics-report-list [layoutType]="'LIST'"></analytics-report-list>
+<analytics-report-list 
+    [layoutType]="'LIST'">
+</analytics-report-list>
 ```

-Usage example of this component :
-
-**main.ts**
-```ts
-
-import { NgModule, Component } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
-import { AnalyticsModule } from 'ng2-activiti-analytics';
-
-@Component({
-    selector: 'activiti-analytics-demo',
-    template: `
-    <div class="page-content">
-        <div class="mdl-grid">
-            <div class="mdl-cell mdl-cell--8-col task-column mdl-shadow--2dp">
-                <analytics-report-list [layoutType]="'LIST'"></analytics-report-list>
-            </div>
-        </div>
-    </div>`
-})
-
-export class AnalyticsDemoComponent {
-
-    constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
-        settingsService.bpmHost = 'http://localhost:9999';
-
-        this.authService.login('admin', 'admin').subscribe(
-            ticket => {
-                console.log(ticket);
-            },
-            error => {
-                console.log(error);
-            });
-    }
-}
-
-@NgModule({
-    imports: [
-        BrowserModule,
-        CoreModule.forRoot(),
-        AnalyticsModule
-    ],
-    declarations: [ AnalyticsDemoComponent ],
-    bootstrap:    [ AnalyticsDemoComponent ]
-})
-export class AppModule { }
-
-platformBrowserDynamic().bootstrapModule(AppModule);
-
-
-```
-
-#### Events
-
-| Name | Description |
-| --- | --- |
-|`onSuccess`| The event is emitted when the report list are loaded |
-|`onError`| The event is emitted when an error occur during the loading |
-|`reportClick`| The event is emitted when the report in the list is selected |
-
-#### Options
+### Properties

 | Name | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
-| `appId` | {string} | optional | | The application id |
-| `layoutType` | {string} | required | | Define the layout of the apps. There are two possible values: GRID or LIST. LIST is the default value|
-| `selectFirst` | {boolean} | optional | false | Change the value to true if you want select the first item in the list as default|
+| appId | string | optional | | The application id |
+| layoutType | string | required | | Define the layout of the apps. There are two possible values: GRID or LIST. LIST is the default value|
+| selectFirst | boolean | optional | false | Change the value to true if you want select the first item in the list as default|

-## Basic usage example Activiti Analytics
+### Events
+
+| Name | Description |
+| --- | --- |
+| onSuccess | The event is emitted when the report list are loaded |
+| onError | The event is emitted when an error occur during the loading |
+| reportClick | The event is emitted when the report in the list is selected |
+
+## Activiti Analytics Component

 The component shows the charts related to the reportId passed as input

 ```html
-<activiti-analytics [appId]="appId" [reportId]="reportId"></activiti-analytics>
+<activiti-analytics 
+    [appId]="1001" 
+    [reportId]="2006">
+</activiti-analytics>
 ```

-Example of an App that use Activiti Analytics component :
+### Properties

-**main.ts**
-```ts
+| Name | Type | Description |
+| --- | --- | --- |
+| appId | string | The application id |
+| reportId | string | The report id |
+| hideParameters | boolean | Toggle the analytics parameters |
+| debug | boolean | Toggle debug mode, outputs the Form values in the console log if enabled. |

-import { NgModule, Component } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
-import { AnalyticsModule } from 'ng2-activiti-analytics';
-
-@Component({
-    selector: 'activiti-analytics-demo',
-    template: `
-    <div class="page-content">
-        <div class="mdl-grid">
-            <div class="mdl-cell mdl-cell--8-col task-column mdl-shadow--2dp">
-                <activiti-analytics [appId]="1001" [reportId]="2006" [hideParameters]="false"></activiti-analytics>
-            </div>
-        </div>
-    </div>`
-})
-
-export class AnalyticsDemoComponent {
-
-    constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
-        settingsService.bpmHost = 'http://localhost:9999';
-
-        this.authService.login('admin', 'admin').subscribe(
-            ticket => {
-                console.log(ticket);
-            },
-            error => {
-                console.log(error);
-            });
-    }
-}
-
-@NgModule({
-    imports: [
-        BrowserModule,
-        CoreModule.forRoot(),
-        AnalyticsModule
-    ],
-    declarations: [ AnalyticsDemoComponent ],
-    bootstrap:    [ AnalyticsDemoComponent ]
-})
-export class AppModule { }
-
-platformBrowserDynamic().bootstrapModule(AppModule);
-
-
-```
-
-#### Events
-
-| Name | Description |
-| --- | --- |
-|`onSuccess` | The event is emitted when the report parameters are loaded |
-|`onError` | The event is emitted when an error occur during the loading |
-|`reportSaved` | The event is emitted when a report is saved |
-|`reportDeleted` | The event is emitted when a report is deleted |
-
-#### Options
-
-| Name | Description |
-| --- | --- |
-|`appId` | The application id |
-|`reportId` | The report id |
-|`hideParameters` | Boolean to hide or show the analytics parameters |
-|`debug` | Flag to enable or disable the Form values in the console log |
-
-You can also use the activiti analytic component to show straight away the charts without show the parameters setting the hideParameters to true
+You can also hide chart parameters UI by setting the `hideParameters` to `true`:

 ```html
-<activiti-analytics [appId]="appId" [reportId]="reportId" [hideParameters]="true"></activiti-analytics>
+<activiti-analytics 
+    [appId]="appId" 
+    [reportId]="reportId" 
+    [hideParameters]="true">
+</activiti-analytics>
 ```

 ![Analytics-without-parameters](docs/assets/analytics-without-parameters.png)

-## Basic usage example Analytics Generator
+### Events
+
+| Name | Description |
+| --- | --- |
+| onSuccess | The event is emitted when the report parameters are loaded |
+| onError | The event is emitted when an error occur during the loading |
+| reportSaved | The event is emitted when a report is saved |
+| reportDeleted | The event is emitted when a report is deleted |
+
+## Analytics Generator Component

 The component generate and show the charts

 ```html
-<activiti-analytics-generator [reportId]="reportId" [reportParamQuery]="reportParamQuery"></activiti-analytics>
+<activiti-analytics-generator 
+    [reportId]="reportId" 
+    [reportParamQuery]="reportParamQuery">
+</activiti-analytics>
 ```

-#### Events
+### Properties
+
+| Name | Type | Description |
+| --- | --- | -- |
+| reportId | string | The report id |
+| reportParamQuery | ReportQuery | The object contains all the parameters that the report needs |
+
+### Events

 | Name | Description |
 | --- | --- |
-|`onSuccess` | The event is emitted when the charts are loaded |
-|`onError` | The event is emitted when an error occur during the loading |
-
-#### Options
-
-| Name | Description |
-| --- | --- |
-|`reportId` | The report id |
-|`reportParamQuery` | The object contains all the parameters that the report needs |
-
+| onSuccess | Raised when the charts are loaded |
+| onError | Raised when an error occur during the loading |

 ## Build from sources

-Alternatively you can build component from sources with the following commands:
-
+You can build component from sources with the following commands:

 ```sh
 npm install
 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
-```
-
-## Demo
-
-If you want have a demo of how the component works, please check the demo folder :
-
-```sh
-cd demo
-npm install
-npm start
-```
+> The `build` task rebuilds all the code, runs tslint, license checks 
+> and other quality check tools before performing unit testing.

 ## NPM scripts

@@ -351,6 +150,16 @@ npm start
 | npm run test-browser | Run unit tests in the browser
 | npm run coverage | Run unit tests and display code coverage report |

+## Demo
+
+Please check the demo folder for a demo project
+
+```sh
+cd demo
+npm install
+npm start
+```
+
 ## License

 [Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
@@ -0,0 +1,35 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const commonConfig = require('./webpack.common.js');
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'cheap-module-source-map',
+
+    externals: [
+        /^\@angular\//,
+        /^rxjs\//,
+        'moment',
+        'raphael',
+        'ng2-charts',
+        'alfresco-js-api',
+        'ng2-alfresco-core',
+        'ng2-alfresco-datatable',
+        'ng2-activiti-analytics',
+        'ng2-activiti-diagrams',
+        'ng2-activiti-form',
+        "ng2-activiti-tasklist",
+        'ng2-alfresco-documentlist'
+    ],
+
+    output: {
+        filename: './bundles/[name].js',
+        library: '[name]',
+        libraryTarget: 'umd',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    entry: {
+        "ng2-activiti-analytics": "./index.ts"
+    }
+});
@@ -2,6 +2,11 @@ const webpack = require('webpack');
 const helpers = require('./helpers');
 const fs = require('fs');
 const path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+var HappyPack = require('happypack');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+
+const ENV = process.env.NODE_ENV = process.env.ENV = 'production';

 module.exports = {

@@ -12,22 +17,15 @@ module.exports = {
        }
    },

-    // require those dependencies but don't bundle them
-    externals: [
-        /^\@angular\//,
-        /^rxjs\//,
-        'moment',
-        'raphael',
-        'ng2-charts',
-        'alfresco-js-api',
-        'ng2-alfresco-core',
-        'ng2-alfresco-datatable',
-        'ng2-activiti-analytics',
-        'ng2-activiti-diagrams',
-        'ng2-activiti-form',
-        "ng2-activiti-tasklist",
-        'ng2-alfresco-documentlist'
-    ],
+    resolve: {
+        alias: {
+            "ng2-alfresco-core": helpers.root('../ng2-alfresco-core/index.ts'),
+            "ng2-activiti-diagrams": helpers.root('../ng2-activiti-diagrams/index.ts')
+        },
+        extensions: ['.ts', '.js'],
+        symlinks: false,
+        modules: [helpers.root('../../ng2-components'), helpers.root('node_modules')]
+    },

    module: {
        rules: [
@@ -37,25 +35,19 @@ module.exports = {
                loader: 'source-map-loader',
                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
            },
-            {
-                enforce: 'pre',
-                test: /\.ts$/,
-                use: 'source-map-loader',
-                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },
            {
                enforce: 'pre',
                test: /\.ts$/,
                loader: 'tslint-loader',
                options: {
                    emitErrors: true,
-                    configFile: path.resolve(__dirname, './assets/tslint.json')
+                    failOnHint: true
                },
                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
            },
            {
                test: /\.ts$/,
-                use: ['ts-loader', 'angular2-template-loader'],
+                loader: ['happypack/loader?id=ts', 'angular2-template-loader'],
                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
            },
            {
@@ -67,7 +59,13 @@ module.exports = {
                test: /\.css$/,
                loader: ['to-string-loader', 'css-loader'],
                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },{
+            },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader'],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
                enforce: 'pre',
                test: /\.ts$/,
                loader: 'license-check',
@@ -75,7 +73,7 @@ module.exports = {
                    emitErrors: true,
                    licenseFile: path.resolve(__dirname, './assets/license_header.txt')
                },
-                exclude: [/node_modules/, /bundles/, /dist/, /demo/, /rendering-queue.services.ts/ ],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/, /rendering-queue.services.ts/ ]
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
@@ -95,15 +93,29 @@ module.exports = {
        ]
    },

-    resolve: {
-        extensions: ['.ts', '.js'],
-        symlinks: false,
-        modules: [
-            '../ng2-components', 'node_modules'
-        ]
-    },
-
    plugins: [
+        new ForkTsCheckerWebpackPlugin(),
+        new HappyPack({
+            id: 'ts',
+            threads: 8,
+            loaders: [
+                {
+                    path: 'ts-loader',
+                    query: {
+                        happyPackMode: true,
+                        "compilerOptions": {
+                            "paths": {}
+                        }
+                    }
+                }
+            ]
+        }),
+
+        new CopyWebpackPlugin([{
+            from: `src/i18n/`,
+            to: `bundles/assets/${path.basename(helpers.root(''))}/i18n/`
+        }]),
+
        new webpack.NoEmitOnErrorsPlugin(),

        new webpack.BannerPlugin(fs.readFileSync(path.resolve(__dirname, './assets/license_header_add.txt'), 'utf8')),
@@ -112,11 +124,19 @@ module.exports = {
            /angular(\\|\/)core(\\|\/)@angular/,
            helpers.root('./src'),
            {}
-        )
+        ),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+                htmlLoader: {
+                    minimize: false // workaround for ng2
+                }
+        })
    ],

-    devtool: 'cheap-module-source-map',
-
    node: {
        fs: 'empty',
        module: false
@@ -0,0 +1,22 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const testConfig = require('./webpack.test.js');
+const helpers = require('./helpers');
+
+module.exports = webpackMerge(testConfig, {
+
+    module: {
+        rules: [
+            {
+                enforce: 'post',
+                test: /^(?!(.*spec|index|.*mock|.*model|.*event)).*\.ts?$/,
+                include: [helpers.root('src')],
+                loader: 'istanbul-instrumenter-loader',
+                exclude: [
+                    /node_modules/,
+                    /test/
+                ]
+            }
+        ]
+    }
+});
@@ -1,85 +1,8 @@
-const webpack = require('webpack');
 const helpers = require('./helpers');
+const webpackMerge = require('webpack-merge');
+const commonConfig = require('./webpack.common.js');

-const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
+module.exports = webpackMerge(commonConfig, {

-module.exports = {
-
-    devtool: 'inline-source-map',
-
-    resolve: {
-        extensions: ['.ts', '.js'],
-        symlinks: false,
-        modules: [helpers.root('../ng2-components'), helpers.root('node_modules')]
-    },
-
-    module: {
-        rules: [
-            {
-                enforce: 'pre',
-                test: /\.js$/,
-                loader: 'source-map-loader',
-                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },
-            {
-                test: /\.ts$/,
-                loaders: ['ts-loader?' + JSON.stringify({ transpileOnly: true}), 'angular2-template-loader'],
-                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },
-            {
-                test: /\.html$/,
-                loader: 'html-loader',
-                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },
-            {
-                test: /\.css$/,
-                loader: ['to-string-loader', 'css-loader'],
-                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },
-            {
-                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico|pdf)$/,
-                loader: 'file-loader',
-                query: {
-                    name: '[path][name].[ext]',
-                    outputPath: (url)=> {
-                        return url.replace('src', 'dist');
-                    }
-                }
-            },
-            {
-                enforce: 'post',
-                test: /\.ts$/,
-                loader: 'istanbul-instrumenter-loader',
-                exclude: [
-                    /node_modules/,
-                    /test/
-                ]
-            }
-        ]
-    },
-
-    plugins: [
-        new webpack.NoEmitOnErrorsPlugin(),
-
-        new webpack.ContextReplacementPlugin(
-            /angular(\\|\/)core(\\|\/)@angular/,
-            helpers.root('./src'),
-            {}
-        ),
-        new webpack.DefinePlugin({
-            'process.env': {
-                'ENV': JSON.stringify(ENV)
-            }
-        }),
-        new webpack.LoaderOptionsPlugin({
-                htmlLoader: {
-                    minimize: false // workaround for ng2
-                }
-        })
-    ],
-
-    node: {
-        fs: 'empty',
-        module: false
-    }
-};
+    devtool: 'inline-source-map'
+});
@@ -0,0 +1,10 @@
+var path = require('path');
+
+var _root = path.resolve(__dirname, '..');
+
+function root(args) {
+  args = Array.prototype.slice.call(arguments, 0);
+  return path.join.apply(path, [_root].concat(args));
+}
+
+exports.root = root;
@@ -0,0 +1,127 @@
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const helpers = require('./helpers');
+const path = require('path');
+
+const alfrescoLibs = [
+    'ng2-activiti-analytics',
+    'ng2-activiti-diagrams'
+];
+
+module.exports = {
+    entry: {
+        'polyfills': './src/polyfills.ts',
+        'vendor': './src/vendor.ts',
+        'dist': './src/main.ts'
+    },
+
+    module: {
+        rules: [
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                include: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: 'source-map-loader',
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.ts$/,
+                include: [helpers.root('src'), helpers.root('..')],
+                loader: [
+                    'ts-loader',
+                    'angular2-template-loader'
+                ],
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                loader: 'tslint-loader',
+                include: [helpers.root('src')],
+                options: {
+                    emitErrors: true
+                },
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                use: 'source-map-loader',
+                exclude: [ /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.html$/,
+                loader: 'html-loader',
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.css$/,
+                exclude: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: ExtractTextPlugin.extract({
+                    fallback: 'style-loader',
+                    use: 'css-loader?sourceMap'
+                })
+            },
+            {
+                test: /\.css$/,
+                include: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: 'raw-loader'
+            },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader']
+            },
+            {
+                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
+                loader: 'file-loader?name=assets/[name].[hash].[ext]'
+            }
+        ]
+    },
+
+    plugins: [
+        // Workaround for angular/angular#11580
+        new webpack.ContextReplacementPlugin(
+            // The (\\|\/) piece accounts for path separators in *nix and Windows
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'), // location of your src
+            {} // a map of your routes
+        ),
+        new HtmlWebpackPlugin({
+            template: './index.html'
+        }),
+
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `../ng2-components/${lib}/bundles/assets/` ,
+                    from: '**/*',
+                    to: `assets/`
+                }
+            }),
+            {
+                context: 'resources/i18n',
+                from: '**/*.json',
+                to: 'resources/i18n'
+            }
+        ]),
+
+        new webpack.optimize.CommonsChunkPlugin({
+            name: ['src', 'vendor', 'polyfills']
+        })
+    ],
+
+    devServer: {
+        contentBase: helpers.root('dist'),
+        compress: true,
+        port: 3000,
+        historyApiFallback: true,
+        host: '0.0.0.0',
+        inline: true
+    },
+
+    node: {
+        fs: 'empty'
+    }
+};
@@ -0,0 +1,37 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
+const path = require('path');
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'cheap-module-eval-source-map',
+
+    output: {
+        path: helpers.root('dist'),
+        filename: '[name].js',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    resolve: {
+        alias: {
+            "ng2-alfresco-core$": path.resolve(__dirname, '../../ng2-alfresco-core/index.ts'),
+            "ng2-activiti-diagrams$": path.resolve(__dirname, '../../ng2-activiti-diagrams/index.ts'),
+            "ng2-activiti-analytics$": path.resolve(__dirname, '../../ng2-activiti-analytics/index.ts')
+        },
+        extensions: ['.ts', '.js'],
+        modules: [path.resolve(__dirname, '../node_modules')]
+    },
+
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+    ]
+});
@@ -0,0 +1,66 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
+
+const alfrescoLibs = [
+    'ng2-activiti-analytics',
+    'ng2-activiti-diagrams'
+];
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'source-map',
+
+    output: {
+        path: helpers.root('dist'),
+        publicPath: '/',
+        filename: '[name].[hash].js',
+        chunkFilename: '[id].[hash].chunk.js'
+    },
+
+    resolve: {
+        extensions: ['.ts', '.js'],
+        modules: [helpers.root('node_modules')]
+    },
+
+    plugins: [
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `node_modules/${lib}/bundles/assets/` ,
+                    from: '**/*',
+                    to: `assets/`
+                }
+            })
+        ]),
+        new webpack.NoEmitOnErrorsPlugin(),
+        new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
+            mangle: {
+                keep_fnames: true
+            },
+            compress: {
+                warnings: false
+            },
+            output: {
+                comments: false
+            },
+            sourceMap: true
+        }),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+    ]
+});
@@ -6,51 +6,8 @@
    <title>Alfresco Angular 2 Activiti Analytics - Demo</title>
    <base href="./">

-    <!-- Charts -->
-    <script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>
-    <script src="node_modules/raphael/raphael.min.js"></script>
-
-    <!-- Moment js -->
-    <script src="node_modules/moment/min/moment.min.js"></script>
-
-    <!-- Date picker -->
-    <script src="node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js"></script>
-    <script src="node_modules/md-date-time-picker/dist/js/draggabilly.pkgd.min.js"></script>
-    <link rel="stylesheet" href="node_modules/md-date-time-picker/dist/css/mdDateTimePicker.css" media="all">
-
-    <!-- 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">
-
-    <!-- Polyfill(s) for Safari (pre-10.x) -->
-    <script src="node_modules/intl/dist/Intl.min.js"></script>
-    <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
-
-    <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/core-js/client/shim.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
-    <script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
-
-    <!-- Polyfill(s) for dialogs -->
-    <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
-    <link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
-    <style>._dialog_overlay { position: static !important; } </style>
-
-    <!-- Modules  -->
-    <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="systemjs.config.js"></script>
-    <script>
-        System.import('app').catch(function(err){ console.error(err); });
-    </script>
-
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
-<style> .chart {display: block; width: 100%;}</style>
-
-
 <body>

 <alfresco-app-demo></alfresco-app-demo>
@@ -0,0 +1,79 @@
+{
+  "name": "ng2-activiti-analytics-demo",
+  "version": "0.1.0",
+  "lockfileVersion": 1,
+  "dependencies": {
+    "balanced-match": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
+      "dev": true
+    },
+    "brace-expansion": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.8.tgz",
+      "integrity": "sha1-wHshHHyVLsH479Uad+8NHTmQopI=",
+      "dev": true
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+      "dev": true
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
+      "dev": true
+    },
+    "glob": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
+      "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
+      "dev": true
+    },
+    "inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "dev": true
+    },
+    "inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
+      "dev": true
+    },
+    "minimatch": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "dev": true
+    },
+    "once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "dev": true
+    },
+    "path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+      "dev": true
+    },
+    "rimraf": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.1.tgz",
+      "integrity": "sha1-wjOOxkPfeht/5cVPqG9XQopV8z0=",
+      "dev": true
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+      "dev": true
+    }
+  }
+}
@@ -3,19 +3,16 @@
  "description": "Alfresco Angular2 Diagrams Component - Demo",
  "version": "0.1.0",
  "author": "Alfresco Software, Ltd.",
-  "main": "index.js",
  "scripts": {
-    "clean": "npm run clean-build && rimraf dist node_modules typings dist",
-    "clean-build" : "rimraf 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts'",
-    "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 && npm run clean-build && npm run tsc",
-    "build:w": "npm run tslint && rimraf dist && npm run tsc:w",
-    "travis": "npm link ng2-alfresco-core ng2-activiti-diagrams ng2-activiti-analytics",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts  -e '{,**/}**.d.ts'"
+    "build": "rimraf dist && npm run webpack -- --config  config/webpack.prod.js --progress --profile --bail",
+    "build:dev": "rimraf dist && npm run webpack -- --config  config/webpack.dev.js --progress --profile --bail",
+    "start:dist": "wsrv -s dist/ -p 3000 -a 0.0.0.0",
+    "start": "npm run webpack-dev-server -- --config config/webpack.prod.js --progress  --content-base app/",
+    "start:dev": "npm run webpack-dev-server -- --config config/webpack.dev.js --progress --content-base app/",
+    "clean": "npm run clean-build  && rimraf dist node_modules typings dist",
+    "clean-build": "rimraf 'app/{,**/}**.js' 'app/{,**/}**.js.map' 'app/{,**/}**.d.ts'",
+    "webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
+    "webpack": "webpack"
  },
  "license": "Apache-2.0",
  "contributors": [
@@ -41,19 +38,16 @@
    "@angular/platform-browser": "~4.0.0",
    "@angular/platform-browser-dynamic": "~4.0.0",
    "@angular/router": "~4.0.0",
-
    "@angular/material": "2.0.0-beta.1",
    "alfresco-js-api": "~1.5.0",
    "core-js": "2.4.1",
    "hammerjs": "2.0.8",
    "ng2-alfresco-core": "1.5.0",
-    "ng2-translate": "5.0.0",
+    "@ngx-translate/core": "^7.0.0",
    "reflect-metadata": "0.1.10",
    "rxjs": "5.1.0",
    "systemjs": "0.19.27",
    "zone.js": "0.7.6",
-
-
    "intl": "1.2.4",
    "dialog-polyfill": "0.4.7",
    "element.scrollintoviewifneeded-polyfill": "1.0.1",
@@ -61,7 +55,7 @@
    "material-design-lite": "1.2.1",
    "chart.js": "2.5.0",
    "md-date-time-picker": "2.2.0",
-    "ng2-charts": "1.5.0",
+    "ng2-charts": "1.6.0",
    "moment": "2.15.1",
    "raphael": "^2.2.6",
    "ng2-activiti-diagrams": "1.5.0",
@@ -71,10 +65,54 @@
    "@types/hammerjs": "^2.0.34",
    "@types/jasmine": "2.5.35",
    "@types/node": "6.0.45",
-    "concurrently": "^2.2.0",
-    "rimraf": "2.5.2",
-    "tslint": "^3.8.1",
-    "typescript": "^2.0.3",
-    "wsrv": "^0.1.5"
+    "angular2-template-loader": "^0.6.2",
+    "autoprefixer": "^6.5.4",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.23.1",
+    "css-to-string-loader": "^0.1.2",
+    "cssnano": "^3.8.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
+    "file-loader": "0.11.1",
+    "html-loader": "^0.4.4",
+    "html-webpack-plugin": "^2.28.0",
+    "istanbul-instrumenter-loader": "0.2.0",
+    "jasmine-ajax": "^3.2.0",
+    "jasmine-core": "2.4.1",
+    "karma": "^0.13.22",
+    "karma-chrome-launcher": "~1.0.1",
+    "karma-coverage": "^1.1.1",
+    "karma-jasmine": "~1.0.2",
+    "karma-jasmine-ajax": "^0.1.13",
+    "karma-jasmine-html-reporter": "0.2.0",
+    "karma-mocha-reporter": "^2.2.2",
+    "karma-remap-istanbul": "^0.6.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-systemjs": "^0.16.0",
+    "karma-webpack": "^2.0.2",
+    "loader-utils": "^1.1.0",
+    "merge-stream": "^1.0.1",
+    "node-sass": "^3.13.1",
+    "null-loader": "^0.1.1",
+    "package-json-merge": "0.0.1",
+    "raw-loader": "^0.5.1",
+    "remap-istanbul": "^0.6.3",
+    "rimraf": "^2.6.1",
+    "run-sequence": "^1.2.2",
+    "sass-loader": "6.0.2",
+    "script-loader": "0.7.0",
+    "source-map-loader": "^0.1.6",
+    "style-loader": "^0.13.1",
+    "systemjs-builder": "^0.15.34",
+    "to-string-loader": "^1.1.4",
+    "traceur": "^0.0.91",
+    "ts-loader": "^2.0.0",
+    "ts-node": "^1.7.0",
+    "tslint": "^4.4.2",
+    "tslint-loader": "^3.3.0",
+    "typescript": "^2.1.6",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.3.0",
+    "webpack-merge": "2.6.1",
+    "wsrv": "^0.1.7"
  }
 }
@@ -0,0 +1,17 @@
+import 'core-js/es6';
+import 'core-js/es7/reflect';
+import 'intl';
+
+require('zone.js/dist/zone'); // IE 8-11
+require('element.scrollintoviewifneeded-polyfill'); // IE/FF
+
+if (process.env.ENV === 'production') {
+    // Production
+
+} else {
+    // Development
+
+    Error['stackTraceLimit'] = Infinity;
+
+    require('zone.js/dist/long-stack-trace-zone');
+}
@@ -0,0 +1,30 @@
+// Angular
+import '@angular/platform-browser';
+import '@angular/platform-browser-dynamic';
+import '@angular/core';
+import '@angular/common';
+import '@angular/http';
+import '@angular/router';
+
+// RxJS
+import 'rxjs';
+
+// hammerjs
+import 'hammerjs';
+
+// Alfresco
+import 'alfresco-js-api';
+import 'ng2-activiti-analytics';
+
+import 'ng2-charts';
+import 'chart.js';
+require('script-loader!raphael/raphael.min.js');
+
+// Google Material Design Lite
+import 'material-design-lite/material.js';
+import 'material-design-lite/dist/material.orange-blue.min.css';
+import 'material-design-icons/iconfont/material-icons.css';
+
+// Polyfill(s) for dialogs
+require('script-loader!dialog-polyfill/dialog-polyfill');
+import 'dialog-polyfill/dialog-polyfill.css';
@@ -1,57 +0,0 @@
-/**
- * System configuration for Angular 2 samples
- * Adjust as necessary for your application needs.
- */
-(function (global) {
-    System.config({
-        paths: {
-            // paths serve as alias
-            'npm:': 'node_modules/'
-        },
-        // map tells the System loader where to look for things
-        map: {
-            // our app is within the app folder
-            app: 'src',
-            // angular bundles
-            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-            '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
-            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.min.js',
-            '@angular/animations/browser':'npm:@angular/animations/bundles/animations-browser.umd.js',
-            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
-
-            // other libraries
-            'rxjs': 'npm:rxjs',
-            'moment': 'npm:moment/min/moment.min.js',
-            'ng2-charts': 'npm:ng2-charts',
-            'ng2-translate': 'npm:ng2-translate',
-            'alfresco-js-api': 'npm:alfresco-js-api/dist',
-            'ng2-alfresco-core': 'npm:ng2-alfresco-core',
-            'ng2-activiti-diagrams': 'npm:ng2-activiti-diagrams',
-            'ng2-activiti-analytics': 'npm:ng2-activiti-analytics'
-        },
-        // packages tells the System loader how to load when no filename and/or no extension
-        packages: {
-            app: {
-                main: './main.js',
-                defaultExtension: 'js'
-            },
-            rxjs: {
-                defaultExtension: 'js'
-            },
-            'moment': 'npm:moment/min/moment.min.js',
-            'ng2-translate': { defaultExtension: 'js' },
-            'ng2-charts': { main: './bundles/ng2-charts.umd.js', defaultExtension: 'js'},
-            'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-            'ng2-alfresco-core': { main: './bundles/ng2-alfresco-core.js', defaultExtension: 'js'},
-            'ng2-activiti-diagrams': { main: './bundles/ng2-activiti-diagrams.js', defaultExtension: 'js'},
-            'ng2-activiti-analytics': { main: './bundles/ng2-activiti-analytics.js', defaultExtension: 'js'}
-        }
-    });
-})(this);
@@ -1,5 +1,6 @@
 {
    "compilerOptions": {
+        "baseUrl": ".",
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
@@ -16,6 +17,7 @@
        "noFallthroughCasesInSwitch": true,
        "removeComments": true,
        "declaration": true,
+        "outDir": "./dist",
        "lib": [
            "es2015",
            "dom"
@@ -23,7 +25,9 @@
        "suppressImplicitAnyIndexErrors": true
    },
    "exclude": [
-        "node_modules"
+        "demo",
+        "node_modules",
+        "dist"
    ],
    "angularCompilerOptions": {
        "strictMetadataEmit": false,
@@ -1,124 +1,118 @@
 {
-  "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,
-      180
-    ],
-    "member-ordering": [
-      true,
-      "public-before-private",
-      "static-before-instance",
-      "variables-before-functions"
-    ],
-    "no-any": false,
-    "no-arg": true,
-    "no-bitwise": false,
-    "no-conditional-assignment": true,
-    "no-consecutive-blank-lines": true,
-    "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": false,
-    "no-shadowed-variable": true,
-    "no-switch-case-fall-through": true,
-    "no-trailing-whitespace": true,
-    "no-unreachable": true,
-    "no-unused-expression": true,
-    "no-unused-variable": true,
-    "no-use-before-declare": true,
-    "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"
-    ]
-  }
+    "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,
+        "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": true,
+        "no-console": [
+            true,
+            "debug",
+            "info",
+            "time",
+            "timeEnd",
+            "trace"
+        ],
+        "no-construct": true,
+        "no-constructor-vars": false,
+        "no-debugger": true,
+        "no-duplicate-variable": true,
+        "no-empty": false,
+        "no-eval": true,
+        "no-inferrable-types": false,
+        "no-internal-module": true,
+        "no-require-imports": false,
+        "no-shadowed-variable": true,
+        "no-switch-case-fall-through": true,
+        "no-trailing-whitespace": true,
+        "no-unused-expression": true,
+        "no-unused-variable": true,
+        "no-use-before-declare": true,
+        "no-var-keyword": true,
+        "no-var-requires": false,
+        "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"
+        ]
+    }
 }
@@ -0,0 +1 @@
+module.exports = require('./config/webpack.dev.js');
@@ -16,6 +16,7 @@
 */

 import { NgModule, ModuleWithProviders } from '@angular/core';
+import { MdTooltipModule, MdButtonModule, MdIconModule } from '@angular/material';
 import { CoreModule } from 'ng2-alfresco-core';
 import { DiagramsModule } from 'ng2-activiti-diagrams';

@@ -36,6 +37,9 @@ export * from './src/components/analytics-report-parameters.component';
 export * from './src/services/analytics.service';
 export * from './src/components/widgets/index';

+// exporting models
+export * from './src/models/index';
+
 export const ANALYTICS_DIRECTIVES: any[] = [
    AnalyticsComponent,
    AnalyticsReportListComponent,
@@ -53,7 +57,10 @@ export const ANALYTICS_PROVIDERS: any[] = [
    imports: [
        CoreModule,
        ChartsModule,
-        DiagramsModule
+        DiagramsModule,
+        MdTooltipModule,
+        MdButtonModule,
+        MdIconModule
    ],
    declarations: [
        ...ANALYTICS_DIRECTIVES
@@ -62,7 +69,10 @@ export const ANALYTICS_PROVIDERS: any[] = [
        ...ANALYTICS_PROVIDERS
    ],
    exports: [
-        ...ANALYTICS_DIRECTIVES
+        ...ANALYTICS_DIRECTIVES,
+        MdTooltipModule,
+        MdButtonModule,
+        MdIconModule
    ]
 })
 export class AnalyticsModule {
@@ -8,6 +8,7 @@ module.exports = function (config) {

    files: [
      './node_modules/hammerjs/hammer.js',
+      {pattern: './node_modules/@angular/material/prebuilt-themes/indigo-pink.css', included: true, watched: false},

      //diagrams
      './node_modules/chart.js/dist/Chart.js',
@@ -27,7 +28,7 @@ module.exports = function (config) {
      {pattern: './src/**/*.ts', included: false, served: true, watched: false}
    ],

-    webpack: webpackConfig,
+    webpack: (config.mode === 'coverage') ? require('./webpack.coverage') : require('./webpack.test'),

    webpackMiddleware: {
      stats: 'errors-only'
@@ -5,12 +5,13 @@
  "author": "Alfresco Software, Ltd.",
  "scripts": {
    "clean": "rimraf dist node_modules typings bundles coverage .npmrc",
+    "clean-lock": "rimraf package-lock.json",
    "rimraf": "rimraf",
    "build": "webpack --config webpack.build.js --progress --profile --bail",
-    "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --component",
+    "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --mode coverage",
    "test-browser": "karma start karma.conf.js --reporters kjhtml --component",
    "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
-    "prepublish" : "npm run build"
+    "prepublishOnly": "npm run build"
  },
  "main": "bundles/ng2-activiti-analytics.js",
  "contributors": [
@@ -40,8 +41,7 @@
    "@angular/platform-browser": "~4.0.0",
    "@angular/platform-browser-dynamic": "~4.0.0",
    "@angular/router": "~4.0.0",
-
-    "@angular/material": "2.0.0-beta.1",
+    "@angular/material": "2.0.0-beta.6",
    "alfresco-js-api": "~1.5.0",
    "chart.js": "2.5.0",
    "core-js": "2.4.1",
@@ -50,8 +50,8 @@
    "moment": "2.15.1",
    "ng2-activiti-diagrams": "1.5.0",
    "ng2-alfresco-core": "1.5.0",
-    "ng2-charts": "1.5.0",
-    "ng2-translate": "5.0.0",
+    "ng2-charts": "1.6.0",
+    "@ngx-translate/core": "^7.0.0",
    "raphael": "2.2.7",
    "reflect-metadata": "0.1.10",
    "rxjs": "5.1.0",
@@ -70,6 +70,8 @@
    "cssnano": "^3.8.1",
    "extract-text-webpack-plugin": "^2.0.0-rc.3",
    "file-loader": "0.11.1",
+    "fork-ts-checker-webpack-plugin": "^0.2.3",
+    "happypack": "3.0.0",
    "html-loader": "^0.4.4",
    "html-webpack-plugin": "^2.28.0",
    "istanbul-instrumenter-loader": "0.2.0",
@@ -88,12 +90,14 @@
    "karma-webpack": "^2.0.2",
    "loader-utils": "^1.1.0",
    "merge-stream": "^1.0.1",
+    "node-sass": "^4.5.3",
    "null-loader": "^0.1.1",
    "package-json-merge": "0.0.1",
    "raw-loader": "^0.5.1",
    "remap-istanbul": "^0.6.3",
-    "rimraf": "^2.5.4",
+    "rimraf": "^2.6.1",
    "run-sequence": "^1.2.2",
+    "sass-loader": "^6.0.5",
    "script-loader": "0.7.0",
    "source-map-loader": "^0.1.6",
    "style-loader": "^0.13.1",
@@ -25,4 +25,3 @@ export let fakeReportList = [
        name: 'Fake Report 2'
    }
 ];
-
@@ -17,6 +17,7 @@

 import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { DebugElement } from '@angular/core';
+import { MdTooltipModule, MdButtonModule, MdIconModule } from '@angular/material';
 import { Observable } from 'rxjs/Rx';
 import { ChartsModule } from 'ng2-charts';
 import { CoreModule, AlfrescoTranslationService } from 'ng2-alfresco-core';
@@ -59,7 +60,11 @@ describe('AnalyticsGeneratorComponent', () => {
        TestBed.configureTestingModule({
            imports: [
                CoreModule.forRoot(),
+                MdTooltipModule,
+                MdButtonModule,
+                MdIconModule,
                ChartsModule,
+
                DiagramsModule.forRoot()
            ],
            declarations: [
@@ -67,7 +67,7 @@ export class AnalyticsGeneratorComponent implements OnChanges {
                private logService: LogService) {
        logService.info('AnalyticsGeneratorComponent');
        if (translateService) {
-            translateService.addTranslationFolder('ng2-activiti-analytics', 'node_modules/ng2-activiti-analytics/src');
+            translateService.addTranslationFolder('ng2-activiti-analytics', 'assets/ng2-activiti-analytics');
        }
    }

@@ -46,7 +46,7 @@ export class AnalyticsReportHeatMapComponent implements  OnInit {
                private analyticsService: AnalyticsService,
                private formBuilder: FormBuilder) {
        if (translateService) {
-            translateService.addTranslationFolder('ng2-activiti-analytics', 'node_modules/ng2-activiti-analytics/src');
+            translateService.addTranslationFolder('ng2-activiti-analytics', 'assets/ng2-activiti-analytics');
        }
    }

@@ -28,14 +28,14 @@ declare let jasmine: any;
 describe('AnalyticsReportListComponent', () => {

    let reportList = [
-        {'id': 2002, 'name': 'Fake Test Process definition heat map'},
-        {'id': 2003, 'name': 'Fake Test Process definition overview'},
-        {'id': 2004, 'name': 'Fake Test Process instances overview'},
-        {'id': 2005, 'name': 'Fake Test Task overview'},
-        {'id': 2006, 'name': 'Fake Test Task service level agreement'}
+        { 'id': 2002, 'name': 'Fake Test Process definition heat map' },
+        { 'id': 2003, 'name': 'Fake Test Process definition overview' },
+        { 'id': 2004, 'name': 'Fake Test Process instances overview' },
+        { 'id': 2005, 'name': 'Fake Test Task overview' },
+        { 'id': 2006, 'name': 'Fake Test Task service level agreement' }
    ];

-    let reportSelected = {'id': 2003, 'name': 'Fake Test Process definition overview'};
+    let reportSelected = { 'id': 2003, 'name': 'Fake Test Process definition overview' };

    let component: AnalyticsReportListComponent;
    let fixture: ComponentFixture<AnalyticsReportListComponent>;
@@ -57,7 +57,9 @@ describe('AnalyticsReportListComponent', () => {

        let translateService = TestBed.get(AlfrescoTranslationService);
        spyOn(translateService, 'addTranslationFolder').and.stub();
-        spyOn(translateService, 'get').and.callFake((key) => { return Observable.of(key); });
+        spyOn(translateService, 'get').and.callFake((key) => {
+            return Observable.of(key);
+        });
    }));

    beforeEach(() => {
@@ -88,7 +90,7 @@ describe('AnalyticsReportListComponent', () => {
        });

        it('should return the default reports when the report list is empty', (done) => {
-            jasmine.Ajax.stubRequest('http://localhost:9999/activiti-app/app/rest/reporting/reports').andReturn({
+            jasmine.Ajax.stubRequest('http://localhost:3000/bpm/activiti-app/app/rest/reporting/reports').andReturn({
                status: 200,
                contentType: 'json',
                responseText: []
@@ -96,13 +98,13 @@ describe('AnalyticsReportListComponent', () => {

            fixture.detectChanges();

-            jasmine.Ajax.stubRequest('http://localhost:9999/activiti-app/app/rest/reporting/default-reports').andReturn({
+            jasmine.Ajax.stubRequest('http://localhost:3000/bpm/activiti-app/app/rest/reporting/default-reports').andReturn({
                status: 200,
                contentType: 'json',
                responseText: []
            });

-            jasmine.Ajax.stubRequest('http://localhost:9999/activiti-app/app/rest/reporting/reports').andReturn({
+            jasmine.Ajax.stubRequest('http://localhost:3000/bpm/activiti-app/app/rest/reporting/reports').andReturn({
                status: 200,
                contentType: 'json',
                responseText: reportList
@@ -174,13 +176,13 @@ describe('AnalyticsReportListComponent', () => {

        it('Should return false if the current report is different', () => {
            component.selectReport(reportSelected);
-            let anotherReport = {'id': 111, 'name': 'Another Fake Test Process definition overview'};
+            let anotherReport = { 'id': 111, 'name': 'Another Fake Test Process definition overview' };
            expect(component.isSelected(anotherReport)).toBe(false);
        });

        it('Should reload the report list', (done) => {
            component.initObserver();
-            let report = new ReportParametersModel({'id': 2002, 'name': 'Fake Test Process definition heat map'});
+            let report = new ReportParametersModel({ 'id': 2002, 'name': 'Fake Test Process definition heat map' });
            component.reports = [report];
            expect(component.reports.length).toEqual(1);
            component.reload();
@@ -197,6 +199,27 @@ describe('AnalyticsReportListComponent', () => {
            });
        });

+        it('Should reload the report list and select the report with the given id', (done) => {
+            component.initObserver();
+            expect(component.reports.length).toEqual(0);
+
+            component.reload(2002);
+
+            component.onSuccess.subscribe(() => {
+                expect(component.reports.length).toEqual(5);
+                expect(component.currentReport).toBeDefined();
+                expect(component.currentReport).not.toBeNull();
+                expect(component.currentReport.id).toEqual(2002);
+                done();
+            });
+
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: reportList
+            });
+        });
+
    });

    describe('layout', () => {
@@ -26,7 +26,7 @@ import { ReportParametersModel } from '../models/report.model';
    templateUrl: './analytics-report-list.component.html',
    styleUrls: ['./analytics-report-list.component.css']
 })
-export class AnalyticsReportListComponent implements  OnInit {
+export class AnalyticsReportListComponent implements OnInit {

    public static LAYOUT_LIST: string = 'LIST';
    public static LAYOUT_GRID: string = 'GRID';
@@ -76,15 +76,15 @@ export class AnalyticsReportListComponent implements  OnInit {
    /**
     * Reload the component
     */
-    reload() {
+    reload(reportId?) {
        this.reset();
-        this.getReportList(this.appId);
+        this.getReportList(this.appId, reportId);
    }

    /**
     * Get the report list
     */
-    getReportList(appId: string) {
+    getReportList(appId: string, reportId?: string) {
        this.analyticsService.getReportList(appId).subscribe(
            (res: ReportParametersModel[]) => {
                if (res && res.length === 0) {
@@ -93,6 +93,10 @@ export class AnalyticsReportListComponent implements  OnInit {
                    res.forEach((report) => {
                        this.reportObserver.next(report);
                    });
+                    if (reportId) {
+                        console.log('SELEZIONO IL REPORT!');
+                        this.selectReportByReportId(reportId);
+                    }
                    if (this.selectFirst) {
                        this.selectFirstReport();
                    }
@@ -149,6 +153,14 @@ export class AnalyticsReportListComponent implements  OnInit {
        this.reportClick.emit(report);
    }

+    public selectReportByReportId(reportId) {
+        let reportFound = this.reports.find(report => report.id === reportId);
+        if (reportFound) {
+            this.currentReport = reportFound;
+            this.reportClick.emit(reportFound);
+        }
+    }
+
    selectFirstReport() {
        this.selectReport(this.reports[0]);
        this.selectFirst = false;
@@ -17,6 +17,7 @@

 import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { DebugElement, SimpleChange } from '@angular/core';
+import { MdTooltipModule, MdButtonModule, OVERLAY_PROVIDERS } from '@angular/material';
 import { Observable } from 'rxjs/Rx';
 import * as moment from 'moment';
 import { CoreModule, AlfrescoTranslationService } from 'ng2-alfresco-core';
@@ -42,14 +43,17 @@ describe('AnalyticsReportParametersComponent', () => {
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [
-                CoreModule.forRoot()
+                CoreModule.forRoot(),
+                MdTooltipModule,
+                MdButtonModule
            ],
            declarations: [
                AnalyticsReportParametersComponent,
                ...WIDGET_DIRECTIVES
            ],
            providers: [
-                AnalyticsService
+                AnalyticsService,
+                OVERLAY_PROVIDERS
            ]
        }).compileComponents();

@@ -291,13 +295,13 @@ describe('AnalyticsReportParametersComponent', () => {
                done();
            });

-            jasmine.Ajax.stubRequest('http://localhost:9999/activiti-app/app/rest/reporting/report-params/1').andReturn({
+            jasmine.Ajax.stubRequest('http://localhost:3000/bpm/activiti-app/app/rest/reporting/report-params/1').andReturn({
                status: 200,
                contentType: 'json',
                responseText: analyticParamsMock.reportDefParamProcessDef
            });

-            jasmine.Ajax.stubRequest('http://localhost:9999/activiti-app/app/rest/reporting/process-definitions').andReturn({
+            jasmine.Ajax.stubRequest('http://localhost:3000/bpm/activiti-app/app/rest/reporting/process-definitions').andReturn({
                status: 200,
                contentType: 'json',
                responseText: analyticParamsMock.reportDefParamProcessDefOptionsNoApp
@@ -322,7 +326,7 @@ describe('AnalyticsReportParametersComponent', () => {
                done();
            });

-            jasmine.Ajax.stubRequest('http://localhost:9999/activiti-app/app/rest/reporting/report-params/1').andReturn({
+            jasmine.Ajax.stubRequest('http://localhost:3000/bpm/activiti-app/app/rest/reporting/report-params/1').andReturn({
                status: 200,
                contentType: 'json',
                responseText: analyticParamsMock.reportDefParamProcessDef
@@ -330,7 +334,7 @@ describe('AnalyticsReportParametersComponent', () => {

            let appId = '1';

-            jasmine.Ajax.stubRequest('http://localhost:9999/activiti-app/api/enterprise/process-definitions?appDefinitionId=' + appId).andReturn({
+            jasmine.Ajax.stubRequest('http://localhost:3000/bpm/activiti-app/api/enterprise/process-definitions?appDefinitionId=' + appId).andReturn({
                status: 200,
                contentType: 'json',
                responseText: analyticParamsMock.reportDefParamProcessDefOptionsApp
@@ -388,13 +392,13 @@ describe('AnalyticsReportParametersComponent', () => {
                done();
            });

-            jasmine.Ajax.stubRequest('http://localhost:9999/activiti-app/app/rest/reporting/report-params/1').andReturn({
+            jasmine.Ajax.stubRequest('http://localhost:3000/bpm/activiti-app/app/rest/reporting/report-params/1').andReturn({
                status: 200,
                contentType: 'json',
                responseText: analyticParamsMock.reportDefParamProcessDef
            });

-            jasmine.Ajax.stubRequest('http://localhost:9999/activiti-app/app/rest/reporting/process-definitions').andReturn({
+            jasmine.Ajax.stubRequest('http://localhost:3000/bpm/activiti-app/app/rest/reporting/process-definitions').andReturn({
                status: 404,
                contentType: 'json',
                responseText: []
@@ -483,7 +487,7 @@ describe('AnalyticsReportParametersComponent', () => {
                validForm = true;
            });

-            xit('Should be able to change the report title', (done) => {
+            it('Should be able to change the report title', (done) => {

                let title: HTMLElement = element.querySelector('h4');
                title.click();
@@ -495,7 +499,7 @@ describe('AnalyticsReportParametersComponent', () => {
                reportName.focus();
                component.reportParameters.name = 'FAKE_TEST_NAME';
                reportName.value = 'FAKE_TEST_NAME';
-                reportName.blur();
+                reportName.dispatchEvent(new Event('blur'));

                fixture.detectChanges();
                fixture.whenStable().then(() => {
@@ -510,13 +514,13 @@ describe('AnalyticsReportParametersComponent', () => {
                    contentType: 'json',
                    responseText: analyticParamsMock.reportDefParamStatus
                });
-
            });

            it('Should show a dialog to allowing report save', async(() => {
-                component.saveReportSuccess.subscribe(() => {
+                component.saveReportSuccess.subscribe((repId) => {
                    let reportDialogTitle: HTMLElement = <HTMLElement>element.querySelector('#report-dialog');
                    expect(reportDialogTitle.getAttribute('open')).toBeNull();
+                    expect(repId).toBe('1');
                });

                component.submit(values);
@@ -110,7 +110,7 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On
                private logService: LogService,
                private contentService: ContentService) {
        if (translateService) {
-            translateService.addTranslationFolder('ng2-activiti-analytics', 'node_modules/ng2-activiti-analytics/src');
+            translateService.addTranslationFolder('ng2-activiti-analytics', 'assets/ng2-activiti-analytics');
        }
    }

@@ -372,7 +372,7 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On

    doSave(paramQuery: ReportQuery) {
        this.analyticsService.saveReport(this.reportId, paramQuery).subscribe(() => {
-            this.saveReportSuccess.emit();
+            this.saveReportSuccess.emit(this.reportId);
        });
    }

@@ -3,7 +3,7 @@
                                 [hideComponent]="hideParameters"
                                 (onFormValueChanged)="reset()"
                                 (onSuccess)="showReport($event)"
-                                 (saveReportSuccess)="onSaveReportSuccess()"
+                                 (saveReportSuccess)="onSaveReportSuccess($event)"
                                 (deleteReportSuccess)="onDeleteReportSuccess()"
                                 (onEdit)="onEditReport($event)">
    </analytics-report-parameters>
@@ -59,7 +59,7 @@ export class AnalyticsComponent implements OnChanges {
                private logService: LogService) {
        logService.info('AnalyticsComponent');
        if (translateService) {
-            translateService.addTranslationFolder('ng2-activiti-analytics', 'node_modules/ng2-activiti-analytics/src');
+            translateService.addTranslationFolder('ng2-activiti-analytics', 'assets/ng2-activiti-analytics');
        }
    }

@@ -79,8 +79,8 @@ export class AnalyticsComponent implements OnChanges {
        this.editReport.emit(name);
    }

-    public onSaveReportSuccess() {
-        this.reportSaved.emit();
+    public onSaveReportSuccess(reportId) {
+        this.reportSaved.emit(reportId);
    }

    public onDeleteReportSuccess() {
@@ -0,0 +1,19 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './chart.model';
+export * from './report.model';
@@ -15,11 +15,8 @@
 * limitations under the License.
 */

-import { ReflectiveInjector } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
-import { async } from '@angular/core/testing';
-import { CoreModule, AlfrescoApiService, LogService } from 'ng2-alfresco-core';
-import { ReportParametersModel, ParameterValueModel } from '../models/report.model';
+import { CoreModule, AlfrescoApiService } from 'ng2-alfresco-core';
 import { AnalyticsService } from './analytics.service';
 import { fakeReportList } from '../assets/analytics.service.mock';

@@ -35,7 +35,9 @@
            "ng2-alfresco-viewer": ["../ng2-alfresco-viewer/"],
            "ng2-alfresco-webscript": ["../ng2-alfresco-webscript/"],
            "ng2-alfresco-userinfo": ["../ng2-alfresco-userinfo"],
-            "alfresco-js-api": ["../node_modules/alfresco-js-api/"]
+            "alfresco-js-api": ["./node_modules/alfresco-js-api/"],
+            "@angular/*": ["./node_modules/@angular/*"],
+            "rxjs/*": ["./node_modules/rxjs/*"]
        },
        "lib": [
            "es2015",
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`module.exports = require('./config/webpack.dev.js');`