replace MDL sidebar with material2 menus (#2112)

* replace MDL sidebar with material2 menus

- separate language picker
- separate "more" menu

* toolbar theme picker

* fix toolbar button colors for different themes

* revert the commented out code

.github/ISSUE_TEMPLATE.md

@@ -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. -->
 

.github/PULL_REQUEST_TEMPLATE.md

@@ -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: ...
 

.gitignore

@@ -14,3 +14,6 @@ src/environments/
 /ng2-components/config/coverage/
 *.npmrc
 /demo-shell-ng2/ng2-components/
+.happypack/
+.happypack/
+.history

.travis.yml

@@ -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
 

.vscode/settings.json

@@ -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"
 }

ALFRESCOCORS.md

@@ -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
 

CONTRIBUTING.md

@@ -0,0 +1,49 @@
+# Contributing to ADF 
+
+## Submitting a Pull Request (PR)
+
+Before you submit please follow the following step: 
+
+* Search in  [GitHub PR](https://github.com/Alfresco/alfresco-ng2-components/pulls) for an open or closed PR
+  that could solve or already solve your issue.
+* Search in the [GitHub release history](https://github.com/Alfresco/alfresco-ng2-components/releases) if your
+  issue has already been solved in a new version of ADF.
+* Fork our repository [if you don't know how to do it read this GitHub document](https://help.github.com/articles/creating-a-pull-request-from-a-fork/)
+* Make your changes in a new git branch starting from development and following the [naming convention](https://github.com/Alfresco/alfresco-ng2-components/wiki/Branching-Strategy)
+
+     ```shell
+     git checkout -b dev-{developerName}-{GitIssuedId/JiraIssueId} development
+     ```
+
+* Create your PR **including appropriate test cases** following the [code contribution acceptance criteria](https://github.com/Alfresco/alfresco-ng2-components/wiki/Code-contribution-acceptance-criteria)
+* Run the test and make sure they are green and please don't comment out or exclude the already present test
+* Commit your change using the [commit format message good practice](https://github.com/Alfresco/alfresco-ng2-components/wiki/Commit-format)
+* Push your branch to GitHub:
+
+    ```shell
+    git push origin dev-{developerName}-{GitIssuedId/JiraIssueId}
+    ```
+
+* In GitHub, send a pull request to `development`.
+* If we suggest changes then:
+  * Make the required updates.
+  * Re-run the test.
+  * Rebase your branch and force push to your GitHub repository (this will update your Pull Request):
+
+    ```shell
+    git fetch development
+    git checkout dev-my-branch
+    git rebase development -i
+    git push -f
+    ```
+Note: If you need more information about how to [sync your fork](https://help.github.com/articles/syncing-a-fork/)
+
+## Code style
+
+The code style in the ADF code follow the [Angular style guide](https://angular.io/guide/styleguide) plus some internal rules.
+you don’t have to worry too much about out those rules because are automatically checked by tslint/codelyzer/adf-rules.
+If your code is not complaint to one of this rules you will receive and error when you build the project with some help on how to fix it.
+The ADF-Rules :
+* File name component/directive can not to start with Alfresco/Activiti/adf this rules is to help developer to find files easily
+* Class name can not to start with Alfresco/Activiti/adf for the same reason above
+* scss is mandatory and the class have to start with the adf- prefix

PREREQUISITES.md

@@ -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)

README.md

@@ -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
@@ -106,6 +85,6 @@ All components are supported in the following browsers:
 |Edge       	   |13, 14     	    |
 |Internet Explorer |11     	        |
 
-* Due to a [known Firefox issue] (https://bugzilla.mozilla.org/show_bug.cgi?id=1188880),the Alfresco Upload Component does not currently support folder upload functionality on Firefox    
+* Due to a [Firefox known issue](https://bugzilla.mozilla.org/show_bug.cgi?id=1188880), the Alfresco Upload Component does not currently support folder upload functionality on Firefox.    
 
-Please refer to [Browser Support](BROWSER-SUPPORT.md) article for more details. 
+Please refer to the [Browser Support](BROWSER-SUPPORT.md) article for more details. 

adf-rules/adfClassNameRule.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Lint = require("tslint");
+const sprintf_js_1 = require("sprintf-js");
+const walkerFactory_1 = require("codelyzer/walkerFactory/walkerFactory");
+const walkerFn_1 = require("codelyzer/walkerFactory/walkerFn");
+const function_1 = require("codelyzer/util/function");
+class Rule extends Lint.Rules.AbstractRule {
+    static invalidName(className) {
+        var whiteList = ['ActivitiContentComponent', 'ActivitiForm'];
+        var classNameReg = /^(alfresco|activiti|adf|activity)/ig;
+        var classNameMatch = classNameReg.exec(className);
+        var isWhiteListName = whiteList.find((currentWhiteListName) => {
+            return currentWhiteListName === className;
+        });
+        if (classNameMatch && !isWhiteListName) {
+            return true;
+        }
+        return false;
+    }
+    apply(sourceFile) {
+        return this.applyWithWalker(Rule.walkerBuilder(sourceFile, this.getOptions()));
+    }
+}
+Rule.metadata = {
+    ruleName: 'adf-class-name',
+    type: 'maintainability',
+    description: `Enforce consistent name avoid prefix`,
+    descriptionDetails: `See more at https://angular.io/styleguide#style-05-13.`,
+    rationale: `Consistent conventions make it easy to quickly identify class when you search with autocomplete.`,
+    options: null,
+    optionsDescription: "Not configurable.",
+    typescriptOnly: true,
+};
+Rule.FAILURE_STRING = 'The name of the class should not start with ADF Alfresco or Activiti prefix ';
+Rule.walkerBuilder = walkerFn_1.all(walkerFn_1.validateComponent((meta, suffixList) => function_1.Maybe.lift(meta.controller)
+    .fmap(controller => controller.name)
+    .fmap(name => {
+    const className = name.text;
+    if (Rule.invalidName(className)) {
+        return [new walkerFactory_1.Failure(name, sprintf_js_1.sprintf(Rule.FAILURE_STRING + className, className, suffixList))];
+    }
+})));
+exports.Rule = Rule;

adf-rules/adfClassNameRule.ts

@@ -0,0 +1,61 @@
+import * as Lint from 'tslint';
+import * as ts from 'typescript';
+import {sprintf} from 'sprintf-js';
+import {ComponentMetadata} from 'codelyzer/angular/metadata';
+import {Failure} from 'codelyzer/walkerFactory/walkerFactory';
+import {all, validateComponent} from 'codelyzer/walkerFactory/walkerFn';
+import {Maybe, F2} from 'codelyzer/util/function';
+import {IOptions} from 'tslint';
+import {NgWalker} from 'codelyzer/angular/ngWalker';
+
+export class Rule extends Lint.Rules.AbstractRule {
+
+    public static metadata: Lint.IRuleMetadata = {
+        ruleName: 'adf-class-name',
+        type: 'maintainability',
+        description: `Enforce consistent name avoid prefix`,
+        descriptionDetails: `See more at https://angular.io/styleguide#style-05-13.`,
+        rationale: `Consistent conventions make it easy to quickly identify class when you search with autocomplete.`,
+        options: null,
+        optionsDescription: "Not configurable.",
+        typescriptOnly: true,
+    };
+
+    public static FAILURE_STRING = 'The name of the class should not start with ADF Alfresco or Activiti prefix ';
+
+    static walkerBuilder: F2<ts.SourceFile, IOptions, NgWalker> =
+        all(
+            validateComponent((meta: ComponentMetadata, suffixList?: string[]) =>
+                Maybe.lift(meta.controller)
+                    .fmap(controller => controller.name)
+                    .fmap(name => {
+                        const className = name.text;
+                        if (Rule.invalidName(className)) {
+                            return [new Failure(name, sprintf(Rule.FAILURE_STRING + className , className, suffixList))];
+                        }
+                    })
+            ));
+
+    static invalidName(className: string): boolean {
+        var whiteList = ['ActivitiContentComponent', 'ActivitiForm'];
+
+        var classNameReg = /^(alfresco|activiti|adf|activity)/ig;
+        var classNameMatch = classNameReg.exec(className);
+
+        var isWhiteListName = whiteList.find((currentWhiteListName)=>{
+            return currentWhiteListName === className;
+        });
+
+        if (classNameMatch && !isWhiteListName) {
+            return true;
+        }
+
+        return false;
+    }
+
+    public apply(sourceFile: ts.SourceFile): Lint.RuleFailure[] {
+        return this.applyWithWalker(
+            Rule.walkerBuilder(sourceFile, this.getOptions())
+        );
+    }
+}

adf-rules/adfFileNameRule.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Lint = require("tslint");
+class Rule extends Lint.Rules.AbstractRule {
+    apply(sourceFile) {
+        return this.applyWithWalker(new AdfFileName(sourceFile, this.getOptions()));
+    }
+}
+Rule.metadata = {
+    ruleName: 'adf-file-name',
+    type: 'maintainability',
+    description: `Enforce consistent name avoid prefix`,
+    descriptionDetails: `See more at https://angular.io/styleguide#style-05-13.`,
+    rationale: `Consistent conventions make it easy to quickly identify files when you search with autocomplete.`,
+    options: null,
+    optionsDescription: "Not configurable.",
+    typescriptOnly: true,
+};
+Rule.FAILURE_STRING = 'The name of the File should not start with ADF Alfresco or Activiti prefix ';
+exports.Rule = Rule;
+class AdfFileName extends Lint.RuleWalker {
+    visitSourceFile(node) {
+        var whiteList = ['activiti-content.component.ts', 'activiti-alfresco.service.ts', 'activiti-content-service.ts',
+            'alfresco-api.service.ts', 'alfresco-settings.service.ts', 'alfresco-content.service.ts',
+            'activiti-content.component.spec.ts', 'activiti-alfresco.service.spec.ts', 'activiti-content-service.spec.ts',
+            'alfresco-api.service.spec.ts', 'alfresco-settings.service.spec.ts', 'alfresco-content.service.spec.ts',
+            'activiti-content.service.spec.ts', 'activiti-content.service.ts'];
+        var fileName = this.getFilename();
+        var fileNameReg = /^(alfresco|activiti|adf|activity)/ig;
+        var filenameMatch = fileNameReg.exec(fileName);
+        var isWhiteListName = whiteList.find((currentWhiteListName) => {
+            return currentWhiteListName === fileName;
+        });
+        if (filenameMatch && !isWhiteListName) {
+            this.addFailure(this.createFailure(node.getStart(), node.getWidth(), Rule.FAILURE_STRING + fileName));
+            super.visitSourceFile(node);
+        }
+    }
+    getFilename() {
+        const filename = this.getSourceFile().fileName;
+        const lastSlash = filename.lastIndexOf('/');
+        if (lastSlash > -1) {
+            return filename.substring(lastSlash + 1);
+        }
+        return filename;
+    }
+}

adf-rules/adfFileNameRule.ts

@@ -0,0 +1,56 @@
+import * as ts from "typescript";
+import * as Lint from "tslint";
+
+
+export class Rule extends Lint.Rules.AbstractRule {
+    public static metadata: Lint.IRuleMetadata = {
+        ruleName: 'adf-file-name',
+        type: 'maintainability',
+        description: `Enforce consistent name avoid prefix`,
+        descriptionDetails: `See more at https://angular.io/styleguide#style-05-13.`,
+        rationale: `Consistent conventions make it easy to quickly identify files when you search with autocomplete.`,
+        options: null,
+        optionsDescription: "Not configurable.",
+        typescriptOnly: true,
+    };
+
+    public static FAILURE_STRING =  'The name of the File should not start with ADF Alfresco or Activiti prefix ';
+
+    public apply(sourceFile: ts.SourceFile): Lint.RuleFailure[] {
+        return this.applyWithWalker(new AdfFileName(sourceFile, this.getOptions()));
+    }
+}
+
+// The walker takes care of all the work.
+class AdfFileName extends Lint.RuleWalker {
+    public visitSourceFile(node: ts.SourceFile) {
+        var whiteList = ['activiti-content.component.ts', 'activiti-alfresco.service.ts', 'activiti-content-service.ts',
+        'alfresco-api.service.ts', 'alfresco-settings.service.ts', 'alfresco-content.service.ts',
+            'activiti-content.component.spec.ts', 'activiti-alfresco.service.spec.ts', 'activiti-content-service.spec.ts',
+            'alfresco-api.service.spec.ts', 'alfresco-settings.service.spec.ts', 'alfresco-content.service.spec.ts',
+            'activiti-content.service.spec.ts', 'activiti-content.service.ts'];
+
+        var fileName = this.getFilename();
+
+        var fileNameReg = /^(alfresco|activiti|adf|activity)/ig;
+        var filenameMatch = fileNameReg.exec(fileName);
+
+        var isWhiteListName = whiteList.find((currentWhiteListName)=>{
+            return currentWhiteListName === fileName;
+        });
+
+        if (filenameMatch && !isWhiteListName) {
+            this.addFailure(this.createFailure(node.getStart(), node.getWidth(), Rule.FAILURE_STRING + fileName));
+            super.visitSourceFile(node);
+        }
+    }
+
+    private getFilename(): string {
+        const filename = this.getSourceFile().fileName;
+        const lastSlash = filename.lastIndexOf('/');
+        if (lastSlash > -1) {
+            return filename.substring(lastSlash + 1);
+        }
+        return filename;
+    }
+}

adf-rules/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var adfClassNameRule_1 = require("./adfClassNameRule");
+exports.ADFClassNameRule = adfClassNameRule_1.Rule;
+var adfFileNameRule_1 = require("./adfFileNameRule");
+exports.ComponentSelectorRule = adfFileNameRule_1.Rule;

adf-rules/index.ts

@@ -0,0 +1,2 @@
+export { Rule as ADFClassNameRule } from './adfClassNameRule';
+export { Rule as ComponentSelectorRule } from './adfFileNameRule';

adf-rules/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "adf-tslint-rules",
+  "description": "Custom Rules for the ADF project",
+  "version": "0.0.3",
+  "author": "Alfresco Software, Ltd.",
+  "scripts": {
+    "build": "tsc",
+    "tscv": "tsc --version",
+    "tsc": "tsc",
+    "tsc:watch": "tsc --w"
+  },
+  "contributors": [
+    {
+      "name": "Eugenio Romano",
+      "email": "eugenio.romano@alfresco.com"
+    }
+  ],
+  "devDependencies": {
+    "@angular/compiler": "^4.2.3",
+    "@angular/core": "^4.2.3",
+    "@types/chai": "^3.4.33",
+    "@types/less": "0.0.31",
+    "@types/mocha": "^2.2.32",
+    "@types/node": "^6.0.41",
+    "@types/node-sass": "^3.10.31",
+    "@types/source-map": "^0.5.0",
+    "@types/sprintf-js": "0.0.27",
+    "chai": "^3.5.0",
+    "chai-spies": "^0.7.1",
+    "minimalist": "1.0.0",
+    "mocha": "3.0.2",
+    "node-sass": "^3.13.0",
+    "rimraf": "^2.5.2",
+    "rxjs": "5.4.1",
+    "ts-node": "1.2.2",
+    "tslint": "^5.0.0",
+    "typescript": "2.4.0",
+    "zone.js": "^0.8.4",
+    "js-yaml": "^3.8.4",
+    "json-stringify-pretty-compact": "^1.0.4",
+    "@types/js-yaml": "^3.5.31"
+  },
+  "peerDependencies": {
+    "tslint": "^5.0.0"
+  },
+  "dependencies": {
+    "app-root-path": "^2.0.1",
+    "css-selector-tokenizer": "^0.7.0",
+    "cssauron": "^1.4.0",
+    "semver-dsl": "^1.0.1",
+    "source-map": "^0.5.6",
+    "sprintf-js": "^1.0.3",
+    "codelyzer": "3.1.2"
+  },
+  "license": "Apache-2.0"
+}

adf-rules/tsconfig.json

@@ -0,0 +1,22 @@
+{
+    "compilerOptions": {
+        "experimentalDecorators": true,
+        "target": "es6",
+        "module": "commonjs",
+        "declaration": false,
+        "noImplicitAny": false,
+        "removeComments": true,
+        "lib": ["es6", "es2015", "dom"],
+        "noLib": false,
+        "typeRoots": [
+            "./node_modules/@types",
+            "./node_modules"
+        ],
+        "types": [
+            "mocha",
+            "chai",
+            "node",
+            "sprintf-js"
+        ]
+    }
+}

adf-rules/tslint.json

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "adf-file-naming": true
+  }
+}

appveyor.yml

@@ -6,7 +6,7 @@ branches:
     - dev-build-test
 
 environment:
-  nodejs_version: "6"
+  nodejs_version: "8"
 
   matrix:
   - COMPONENT_NAME: ng2-components-activiti

demo-shell-ng2/README.md

@@ -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'
+```

demo-shell-ng2/app.config-dev.json

@@ -0,0 +1,29 @@
+{
+    "ecmHost": "http://{hostname}:{port}/ecm",
+    "bpmHost": "http://{hostname}:{port}/bpm",
+    "application": {
+        "name": "Alfresco"
+    },
+    "pagination": {
+        "size": 25
+    },
+    "files": {
+            "excluded": [".DS_Store", "desktop.ini", ".git"]
+    },
+    "activiti": {
+        "rest": {
+            "fields": [
+                {
+                    "processId": "0",
+                    "taskId": "7501",
+                    "fieldId": "label10",
+                    "values": [
+                        { "id": "f1", "name": "Field 1" },
+                        { "id": "f2", "name": "Field 2" },
+                        { "id": "f3", "name": "Field 3" }
+                    ]
+                }
+            ]
+        }
+    }
+}

demo-shell-ng2/app.config-prod.json

@@ -0,0 +1,29 @@
+{
+    "ecmHost": "http://{hostname}",
+    "bpmHost": "http://{hostname}",
+    "application": {
+        "name": "Alfresco"
+    },
+    "pagination": {
+        "size": 25
+    },
+    "files": {
+            "excluded": [".DS_Store", "desktop.ini", ".git"]
+    },
+    "activiti": {
+        "rest": {
+            "fields": [
+                {
+                    "processId": "0",
+                    "taskId": "7501",
+                    "fieldId": "label10",
+                    "values": [
+                        { "id": "f1", "name": "Field 1" },
+                        { "id": "f2", "name": "Field 2" },
+                        { "id": "f3", "name": "Field 3" }
+                    ]
+                }
+            ]
+        }
+    }
+}

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

@@ -1,5 +1,5 @@
 <!-- Always shows a header, even in smaller screens. -->
-<div mdl class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
     <header class="mdl-layout__header main_header_adf" [ngClass]="{hide: isAPageWithHeaderBar()}">
         <div class="mdl-button-padding mdl-layout__header-row">
 
@@ -21,49 +21,68 @@
                 <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="login" href="" routerLink="/login">Login</a>
-                <a class="mdl-navigation__link" data-automation-id="settings" href="" routerLink="/settings">Settings</a>
             </nav>
 
+            <button md-icon-button [mdMenuTriggerFor]="langMenu">
+                <md-icon>language</md-icon>
+            </button>
+            <md-menu #langMenu="mdMenu">
+                <button md-menu-item (click)="changeLanguage('en')">English</button>
+                <button md-menu-item (click)="changeLanguage('it')">Italian</button>
+                <button md-menu-item (click)="changeLanguage('ru')">Russian</button>
+            </md-menu>
+
+            <button md-icon-button [mdMenuTriggerFor]="appMenu">
+                <md-icon>more_vert</md-icon>
+            </button>
+            <md-menu #appMenu="mdMenu">
+                <a md-menu-item href="" routerLink="/datatable">
+                    <md-icon>view_module</md-icon>
+                    <span>DataTable</span>
+                </a>
+                <a md-menu-item href="" routerLink="/form">
+                    <md-icon>poll</md-icon>
+                    <span>Form</span>
+                </a>
+                <a md-menu-item href="" routerLink="/form-list">
+                    <md-icon>library_books</md-icon>
+                    <span>Form List</span>
+                </a>
+                <a md-menu-item href="" routerLink="/uploader">
+                    <md-icon>file_upload</md-icon>
+                    <span>Uploader</span>
+                </a>
+                <a md-menu-item href="" routerLink="/webscript">
+                    <md-icon>extension</md-icon>
+                    <span>Webscript</span>
+                </a>
+                <a md-menu-item href="" routerLink="/tag">
+                    <md-icon>local_offer</md-icon>
+                    <span>Tag</span>
+                </a>
+                <a md-menu-item href="" routerLink="/social">
+                    <md-icon>thumb_up</md-icon>
+                    <span>Social</span>
+                </a>
+                <a md-menu-item href="" routerLink="/settings">
+                    <md-icon>settings</md-icon>
+                    <span>Settings</span>
+                </a>
+                <a md-menu-item href="" routerLink="/about">
+                    <md-icon>info_outline</md-icon>
+                    <span>About</span>
+                </a>
+                <button md-menu-item (click)="onLogout($event)">
+                    <md-icon>exit_to_app</md-icon>
+                    <span>Logout</span>
+                </button>
+            </md-menu>
         </div>
+
     </header>
 
-    <div class="mdl-layout__drawer">
-        <nav class="mdl-navigation">
-            <a class="mdl-navigation__link" (click)="onLogout($event)">
-                <label tabindex="0">Logout</label>
-            </a>
-        </nav>
-        <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>
-                <label tabindex="0"> English</label>
-            </a>
-            <a class="mdl-navigation__link" (click)="changeLanguage('it')">
-                <span class="flag-icon 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>
-                <label tabindex="0"> Russian</label>
-            </a>
-        </nav>
-        <span class="mdl-layout-title">Components</span>
-        <nav class="mdl-navigation">
-            <a class="mdl-navigation__link" href="" routerLink="/" (click)="hideDrawer()">Home</a>
-            <a class="mdl-navigation__link" href="" routerLink="/files" (click)="hideDrawer()">DocumentList</a>
-            <a class="mdl-navigation__link" href="" routerLink="/datatable" (click)="hideDrawer()">DataTable</a>
-            <a class="mdl-navigation__link" href="" routerLink="/uploader" (click)="hideDrawer()">Uploader</a>
-            <a class="mdl-navigation__link" href="" routerLink="/login" (click)="hideDrawer()">Login</a>
-            <a class="mdl-navigation__link" href="" routerLink="/activiti" (click)="hideDrawer()">Process Services</a>
-            <a class="mdl-navigation__link" href="" routerLink="/webscript" (click)="hideDrawer()">Webscript</a>
-            <a class="mdl-navigation__link" href="" routerLink="/tag" (click)="hideDrawer()">Tag</a>
-            <a class="mdl-navigation__link" href="" routerLink="/social" (click)="hideDrawer()">Social</a>
-            <a class="mdl-navigation__link" href="" routerLink="/about" (click)="hideDrawer()">About</a>
-            <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>

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

@@ -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 {
+    AlfrescoAuthenticationService,
+    AlfrescoSettingsService,
+    AlfrescoTranslationService,
+    LogService,
+    StorageService
+} 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) {
@@ -71,7 +72,6 @@ export class AppComponent {
 
     navigateToLogin() {
         this.router.navigate(['/login']);
-        this.hideDrawer();
     }
 
     onToggleSearch(event) {
@@ -86,30 +86,6 @@ export class AppComponent {
 
     changeLanguage(lang: string) {
         this.translateService.use(lang);
-        this.hideDrawer();
-    }
-
-    hideDrawer() {
-        // todo: workaround for drawer closing
-        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() {
@@ -117,4 +93,9 @@ export class AppComponent {
             this.settingsService.setProviders(this.storage.getItem(`providers`));
         }
     }
+
+    onDragOverMainPage(event: any): boolean {
+        event.preventDefault();
+        return false;
+    }
 }

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

@@ -18,52 +18,69 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
-import { CoreModule } from 'ng2-alfresco-core';
-import { SearchModule } from 'ng2-alfresco-search';
-import { LoginModule } from 'ng2-alfresco-login';
+import { AnalyticsModule } from 'ng2-activiti-analytics';
+import { DiagramsModule } from 'ng2-activiti-diagrams';
+import { ActivitiFormModule } from 'ng2-activiti-form';
+import { ActivitiProcessListModule } from 'ng2-activiti-processlist';
+import { ActivitiTaskListModule } from 'ng2-activiti-tasklist';
+import { AppConfigService, CoreModule } from 'ng2-alfresco-core';
 import { DataTableModule } from 'ng2-alfresco-datatable';
 import { DocumentListModule } from 'ng2-alfresco-documentlist';
-import { UploadModule } from 'ng2-alfresco-upload';
-import { TagModule } from 'ng2-alfresco-tag';
+import { LoginModule } from 'ng2-alfresco-login';
+import { SearchModule } from 'ng2-alfresco-search';
 import { SocialModule } from 'ng2-alfresco-social';
-import { WebScriptModule } from 'ng2-alfresco-webscript';
-import { ViewerModule } from 'ng2-alfresco-viewer';
-import { ActivitiFormModule } from 'ng2-activiti-form';
-import { ActivitiTaskListModule } from 'ng2-activiti-tasklist';
-import { ActivitiProcessListModule } from 'ng2-activiti-processlist';
+import { TagModule } from 'ng2-alfresco-tag';
+import { UploadModule } from 'ng2-alfresco-upload';
 import { UserInfoComponentModule } from 'ng2-alfresco-userinfo';
-import { AnalyticsModule } from 'ng2-activiti-analytics';
+import { ViewerModule } from 'ng2-alfresco-viewer';
+import { WebScriptModule } from 'ng2-alfresco-webscript';
+
+import { Editor3DModule } from 'ng2-3d-editor';
+import { ChartsModule } from 'ng2-charts';
 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 { CreateFolderDialogComponent } from './dialogs/create-folder.dialog';
+import { MaterialModule } from './material.module';
+import { DebugAppConfigService } from './services/debug-app-config.service';
+
+import { FormListDemoComponent } from './components/form/form-list-demo.component';
 
 import {
-    HomeComponent,
-    DataTableDemoComponent,
-    SearchComponent,
-    SearchBarComponent,
-    LoginDemoComponent,
-    ActivitiDemoComponent,
-    ActivitiAppsView,
-    FormViewer,
-    WebscriptComponent,
-    TagComponent,
-    SocialComponent,
     AboutComponent,
+    ActivitiAppsViewComponent,
+    ActivitiDemoComponent,
+    ActivitiProcessAttachmentsComponent,
+    ActivitiShowDiagramComponent,
+    ActivitiTaskAttachmentsComponent,
+    DataTableDemoComponent,
     FilesComponent,
-    FormNodeViewer,
-    SettingComponent
+    FormDemoComponent,
+    FormNodeViewerComponent,
+    FormViewerComponent,
+    HomeComponent,
+    LoginDemoComponent,
+    SearchBarComponent,
+    SearchComponent,
+    SettingsComponent,
+    SocialComponent,
+    TagComponent,
+    WebscriptComponent
 } 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 +95,7 @@ import {
         ActivitiProcessListModule.forRoot(),
         UserInfoComponentModule.forRoot(),
         AnalyticsModule.forRoot(),
+        DiagramsModule.forRoot(),
         CustomEditorsModule,
         Editor3DModule.forRoot(),
         ChartsModule
@@ -90,17 +108,28 @@ import {
         SearchBarComponent,
         LoginDemoComponent,
         ActivitiDemoComponent,
-        ActivitiAppsView,
-        FormViewer,
+        ActivitiTaskAttachmentsComponent,
+        ActivitiProcessAttachmentsComponent,
+        ActivitiShowDiagramComponent,
+        ActivitiAppsViewComponent,
+        FormViewerComponent,
         WebscriptComponent,
         TagComponent,
         SocialComponent,
         AboutComponent,
         FilesComponent,
-        FormNodeViewer,
-        SettingComponent
+        FormNodeViewerComponent,
+        CreateFolderDialogComponent,
+        SettingsComponent,
+        FormDemoComponent,
+        FormListDemoComponent
     ],
-    providers: [],
-    bootstrap: [ AppComponent ]
+    providers: [
+        { provide: AppConfigService, useClass: DebugAppConfigService }
+    ],
+    bootstrap: [ AppComponent ],
+    entryComponents: [
+        CreateFolderDialogComponent
+    ]
 })
 export class AppModule { }

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

@@ -15,28 +15,31 @@
  * limitations under the License.
  */
 
-import { ModuleWithProviders }  from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { AuthGuard, AuthGuardEcm, AuthGuardBpm } from 'ng2-alfresco-core';
+import { ModuleWithProviders } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AuthGuard, AuthGuardBpm, AuthGuardEcm } from 'ng2-alfresco-core';
 
 import {
-    HomeComponent,
-    FilesComponent,
-    DataTableDemoComponent,
-    SearchComponent,
-    LoginDemoComponent,
-    ActivitiDemoComponent,
-    ActivitiAppsView,
-    WebscriptComponent,
-    TagComponent,
-    SocialComponent,
     AboutComponent,
-    FormViewer,
-    FormNodeViewer,
-    SettingComponent
+    ActivitiAppsViewComponent,
+    ActivitiDemoComponent,
+    ActivitiShowDiagramComponent,
+    DataTableDemoComponent,
+    FilesComponent,
+    FormDemoComponent,
+    FormNodeViewerComponent,
+    FormViewerComponent,
+    HomeComponent,
+    LoginDemoComponent,
+    SearchComponent,
+    SettingsComponent,
+    SocialComponent,
+    TagComponent,
+    WebscriptComponent
 } from './components/index';
 
 import { UploadButtonComponent } from 'ng2-alfresco-upload';
+import { FormListDemoComponent } from './components/form/form-list-demo.component';
 
 export const appRoutes: Routes = [
     { path: 'login', component: LoginDemoComponent },
@@ -77,12 +80,12 @@ export const appRoutes: Routes = [
     },
     {
         path: 'activiti',
-        component: ActivitiAppsView,
+        component: ActivitiAppsViewComponent,
         canActivate: [AuthGuardBpm]
     },
     {
         path: 'activiti/apps',
-        component: ActivitiAppsView,
+        component: ActivitiAppsViewComponent,
         canActivate: [AuthGuardBpm]
     },
     {
@@ -90,6 +93,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',
@@ -99,13 +107,13 @@ export const appRoutes: Routes = [
     // TODO: check if needed
     {
         path: 'activiti/tasks/:id',
-        component: FormViewer,
+        component: FormViewerComponent,
         canActivate: [AuthGuardBpm]
     },
     // TODO: check if needed
     {
         path: 'activiti/tasksnode/:id',
-        component: FormNodeViewer,
+        component: FormNodeViewerComponent,
         canActivate: [AuthGuardBpm]
     },
     {
@@ -124,7 +132,9 @@ export const appRoutes: Routes = [
         canActivate: [AuthGuardEcm]
     },
     { path: 'about', component: AboutComponent },
-    { path: 'settings', component: SettingComponent }
+    { path: 'settings', component: SettingsComponent },
+    { path: 'form', component: FormDemoComponent },
+    { path: 'form-list', component: FormListDemoComponent }
 ];
 
 export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

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

@@ -1,3 +1,8 @@
 .about-container {
     padding: 10px;
 }
+
+.adf-table-version {
+    width: 60%;
+    text-align: center;
+}

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

@@ -1,4 +1,112 @@
 <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>
+
+    <h3>Product Versions</h3>
+    <div *ngIf="bpmVersion">
+        <h3>BPM</h3>
+        <label> Edition </label>
+        <p> {{ bpmVersion.edition }}</p>
+        <table border="2" class="adf-table-version">
+            <tr>
+                <th>Major Version</th>
+                <th>Revision Version</th>
+                <th>Minor Version</th>
+                <th>Type</th>
+            </tr>
+            <tr style="align-items: center">
+                <td>{{ bpmVersion.majorVersion }}</td>
+                <td>{{ bpmVersion.revisionVersion }}</td>
+                <td>{{ bpmVersion.minorVersion }}</td>
+                <td>{{ bpmVersion.type }}</td>
+            </tr>
+        </table>
+    </div>
+    <div *ngIf="ecmVersion">
+        <h3>ECM</h3>
+        <label> Edition </label>
+        <p> {{ ecmVersion.edition }}</p>
+        <label> Version </label>
+        <p> {{ ecmVersion.version.display }}</p>
+        <h4>License</h4>
+        <table border="2" class="adf-table-version">
+            <tr>
+                <th> Issued At </th>
+                <th> Expires At </th>
+                <th> Remaining Days </th>
+                <th> Holder </th>
+                <th> Mode </th>
+                <th> Is Cluster Enabled </th>
+                <th> Is Cryptodoc Enable </th>
+            </tr>
+            <tr style="align-items: center">
+                <td>{{ ecmVersion.license.issuedAt }}</td>
+                <td>{{ ecmVersion.license.expiresAt }}</td>
+                <td>{{ ecmVersion.license.remainingDays }}</td>
+                <td>{{ ecmVersion.license.holder }}</td>
+                <td>{{ ecmVersion.license.mode }}</td>
+                <td>{{ ecmVersion.license.isClusterEnabled }}</td>
+                <td>{{ ecmVersion.license.isCryptodocEnabled }}</td>
+            </tr>
+        </table>
+        <h4> Status</h4>
+        <table border="2" class="adf-table-version">
+            <tr>
+                <th> ReadOnly </th>
+                <th> Is Audit Enable </th>
+                <th> Is quick shared enable </th>
+                <th> Thumbnail Generation </th>
+            </tr>
+            <tr style="align-items: center">
+                <td>{{ ecmVersion.status.isReadOnly }}</td>
+                <td>{{ ecmVersion.status.isAuditEnabled }}</td>
+                <td>{{ ecmVersion.status.isQuickShareEnabled }}</td>
+                <td>{{ ecmVersion.status.isThumbnailGenerationEnabled }}</td>
+            </tr>
+        </table>
+        <h4>Modules</h4>
+        <table border="2" class="adf-table-version">
+            <tr>
+                <th> ID </th>
+                <th> Title </th>
+                <th> Description </th>
+                <th> Version </th>
+                <th> Install Date </th>
+                <th> Install State </th>
+                <th> Version Minor </th>
+                <th> Version Max </th>
+            </tr>
+            <tr *ngFor="let module of ecmVersion.modules" style="align-items: center">
+                <td>{{ module.id }}</td>
+                <td>{{ module.title }}</td>
+                <td>{{ module.description }}</td>
+                <td>{{ module.version }}</td>
+                <td>{{ module.installDate }}</td>
+                <td>{{ module.installState }}</td>
+                <td>{{ module.versionMin }}</td>
+                <td>{{ module.versionMax }}</td>
+            </tr>
+        </table>
+    </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>

demo-shell-ng2/app/components/about/about.component.ts

@@ -17,8 +17,8 @@
 
 import { Component, OnInit } from '@angular/core';
 import { Http } from '@angular/http';
+import { AlfrescoAuthenticationService, AppConfigService, BpmProductVersionModel, DiscoveryApiService, EcmProductVersionModel, LogService  } from 'ng2-alfresco-core';
 import { ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
-import { LogService } from 'ng2-alfresco-core';
 
 @Component({
     selector: 'about-page',
@@ -28,12 +28,32 @@ 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 = '';
+
+    ecmVersion: EcmProductVersionModel = null;
+    bpmVersion: BpmProductVersionModel = null;
 
     constructor(private http: Http,
-                private logService: LogService) {
+                private appConfig: AppConfigService,
+                private authService: AlfrescoAuthenticationService,
+                private logService: LogService,
+                private discovery: DiscoveryApiService) {
     }
 
     ngOnInit() {
+
+        this.discovery.getEcmProductInfo().subscribe((ecmVers) => {
+            this.ecmVersion = ecmVers;
+        });
+
+        this.discovery.getBpmProductInfo().subscribe((bpmVers) => {
+            this.bpmVersion = bpmVers;
+        });
+
         this.http.get('/versions.json').subscribe(response => {
             let regexp = new RegExp('^(ng2-activiti|ng2-alfresco|alfresco-)');
 
@@ -42,18 +62,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;
+            }
+        }
     }
 }

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

@@ -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;
+}

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

@@ -20,14 +20,15 @@
                 <div class="mdl-grid">
                     <div class="mdl-cell mdl-cell--2-col task-column mdl-shadow--2dp">
                         <div class="list-buttons">
-                            <activiti-start-task
-                                [appId]="appId"
-                                (onSuccess)="onStartTaskSuccess($event)">
-                            </activiti-start-task>
+                            <button md-raised-button data-automation-id="btn-start-task" (click)="navigateStartTask()">
+                                <md-icon>add</md-icon>
+                                <span>START TASK</span>
+                            </button>
                         </div>
                         <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)"
@@ -37,7 +38,7 @@
                             </adf-accordion-group>
                         </adf-accordion>
                     </div>
-                    <div class="mdl-cell mdl-cell--3-col task-column mdl-shadow--2dp list-column">
+                    <div class="mdl-cell mdl-cell--3-col task-column mdl-shadow--2dp list-column" *ngIf="taskFilter && !isStartTaskMode()">
                         <activiti-tasklist
                             [appId]="taskFilter?.appId"
                             [processDefinitionKey]="taskFilter?.filter?.processDefinitionKey"
@@ -61,7 +62,9 @@
                             -->
                         </activiti-tasklist>
                     </div>
-                    <div class="mdl-cell mdl-cell--7-col task-column mdl-shadow--2dp">
+                    <div class="mdl-cell mdl-cell--7-col task-column mdl-shadow--2dp" *ngIf="!isStartTaskMode()"
+                            [class.mdl-cell--7-col]="taskFilter && !isStartTaskMode()"
+                            [class.mdl-cell--10-col]="!taskFilter || isStartTaskMode()">
                         <activiti-task-details #activitidetails
                             [debugMode]="true"
                             [taskId]="currentTaskId"
@@ -71,11 +74,15 @@
                             (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>
+                        <activiti-task-attachments
+                            [taskId]="currentTaskId">
+                        </activiti-task-attachments>
+                    </div>
+                    <div class="mdl-cell mdl-cell--10-col task-column mdl-shadow--2dp" *ngIf="isStartTaskMode()">
+                         <activiti-start-task
+                                [appId]="appId"
+                                (onSuccess)="onStartTaskSuccess($event)">
+                        </activiti-start-task>
                     </div>
                 </div>
             </div>
@@ -101,6 +108,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 +141,13 @@
                             <activiti-process-instance-details
                                 [processInstanceId]="currentProcessInstanceId"
                                 (processCancelled)="processCancelled()"
+                                (showProcessDiagram)="onShowProcessDiagram($event)"
                                 (taskClick)="onProcessDetailsTaskClick($event)">
                             </activiti-process-instance-details>
+                            <hr>
+                            <activiti-process-attachments
+                                [processId]="currentProcessInstanceId">
+                            </activiti-process-attachments>
                         </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 +180,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>

demo-shell-ng2/app/components/activiti/activiti-demo.component.ts

@@ -15,62 +15,67 @@
  * limitations under the License.
  */
 
-import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core';
-import {
-    ActivitiApps,
-    ActivitiFilters,
-    ActivitiTaskList,
-    FilterRepresentationModel,
-    TaskDetailsEvent
-} from 'ng2-activiti-tasklist';
-import {
-    ActivitiProcessFilters,
-    ActivitiProcessInstanceDetails,
-    ActivitiProcessInstanceListComponent,
-    ActivitiStartProcessInstance,
-    FilterProcessRepresentationModel,
-    ProcessInstance
-} from 'ng2-activiti-processlist';
+import { AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 import { AnalyticsReportListComponent } from 'ng2-activiti-analytics';
-import { ActivatedRoute } from '@angular/router';
-import { Subscription } from 'rxjs/Rx';
+import { FormEvent, FormFieldEvent, FormRenderingService, FormService } from 'ng2-activiti-form';
 import {
-    ObjectDataTableAdapter,
-    ObjectDataRow,
-    DataSorting
-} from 'ng2-alfresco-datatable';
+    FilterProcessRepresentationModel,
+    ProcessFiltersComponent,
+    ProcessInstance,
+    ProcessInstanceDetailsComponent,
+    ProcessInstanceListComponent,
+    StartProcessInstanceComponent
+} from 'ng2-activiti-processlist';
+import {
+    AppsListComponent,
+    FilterRepresentationModel,
+    TaskDetailsComponent,
+    TaskDetailsEvent,
+    TaskFiltersComponent,
+    TaskListComponent
+} from 'ng2-activiti-tasklist';
 import { AlfrescoApiService } from 'ng2-alfresco-core';
-import { FormService, FormRenderingService, FormEvent, FormFieldEvent } from 'ng2-activiti-form';
+import {
+    DataSorting,
+    ObjectDataRow,
+    ObjectDataTableAdapter
+} from 'ng2-alfresco-datatable';
+import { Subscription } from 'rxjs/Rx';
 import { /*CustomEditorComponent*/ CustomStencil01 } from './custom-editor/custom-editor.component';
 
 declare var componentHandler;
 
 const currentProcessIdNew = '__NEW__';
+const currentTaskIdNew = '__NEW__';
 
 @Component({
     selector: 'activiti-demo',
     templateUrl: './activiti-demo.component.html',
     styleUrls: ['./activiti-demo.component.css']
 })
-export class ActivitiDemoComponent implements AfterViewInit {
+export class ActivitiDemoComponent implements AfterViewInit, OnDestroy, OnInit {
 
-    @ViewChild(ActivitiFilters)
-    activitifilter: ActivitiFilters;
+    @ViewChild(TaskFiltersComponent)
+    activitifilter: TaskFiltersComponent;
 
-    @ViewChild(ActivitiTaskList)
-    taskList: ActivitiTaskList;
+    @ViewChild(TaskListComponent)
+    taskList: TaskListComponent;
 
-    @ViewChild(ActivitiProcessFilters)
-    activitiprocessfilter: ActivitiProcessFilters;
+    @ViewChild(ProcessFiltersComponent)
+    activitiprocessfilter: ProcessFiltersComponent;
 
-    @ViewChild(ActivitiProcessInstanceListComponent)
-    processList: ActivitiProcessInstanceListComponent;
+    @ViewChild(ProcessInstanceListComponent)
+    processList: ProcessInstanceListComponent;
 
-    @ViewChild(ActivitiProcessInstanceDetails)
-    activitiprocessdetails: ActivitiProcessInstanceDetails;
+    @ViewChild(ProcessInstanceDetailsComponent)
+    activitiprocessdetails: ProcessInstanceDetailsComponent;
 
-    @ViewChild(ActivitiStartProcessInstance)
-    activitiStartProcess: ActivitiStartProcessInstance;
+    @ViewChild(TaskDetailsComponent)
+    activitidetails: TaskDetailsComponent;
+
+    @ViewChild(StartProcessInstanceComponent)
+    activitiStartProcess: StartProcessInstanceComponent;
 
     @ViewChild(AnalyticsReportListComponent)
     analyticsreportlist: AnalyticsReportListComponent;
@@ -106,6 +111,7 @@ export class ActivitiDemoComponent implements AfterViewInit {
 
     constructor(private elementRef: ElementRef,
                 private route: ActivatedRoute,
+                private router: Router,
                 private apiService: AlfrescoApiService,
                 private formRenderingService: FormRenderingService,
                 private formService: FormService) {
@@ -115,8 +121,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 +141,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() {
@@ -149,22 +160,23 @@ export class ActivitiDemoComponent implements AfterViewInit {
             this.processFilter = null;
             this.currentProcessInstanceId = null;
         });
-        this.layoutType = ActivitiApps.LAYOUT_GRID;
+        this.layoutType = AppsListComponent.LAYOUT_GRID;
+
     }
 
     ngOnDestroy() {
         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 +187,7 @@ export class ActivitiDemoComponent implements AfterViewInit {
         }
     }
 
-    onStartTaskSuccess(event: any) {
+    onStartTaskSuccess(event: any): void {
         this.activitifilter.selectFilterWithTask(event.id);
         this.currentTaskId = event.id;
     }
@@ -184,88 +196,92 @@ 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) {
+    navigateStartTask(): void {
+        this.resetTaskFilters();
+        this.reloadTaskFilters();
+        this.currentTaskId = currentTaskIdNew;
+    }
+
+    onStartProcessInstance(instance: ProcessInstance): void {
         this.currentProcessInstanceId = instance.id;
         this.activitiStartProcess.reset();
         this.resetProcessFilters();
     }
 
-    isStartProcessMode() {
+    isStartProcessMode(): boolean {
         return this.currentProcessInstanceId === currentProcessIdNew;
     }
 
-    processCancelled(data: any) {
+    isStartTaskMode(): boolean {
+        return this.currentTaskId === currentTaskIdNew;
+    }
+
+    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) {
-        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 +305,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 +325,31 @@ export class ActivitiDemoComponent implements AfterViewInit {
         this.currentTaskId = taskId;
     }
 
-    private resetProcessFilters() {
+    private resetProcessFilters(): void {
         this.processFilter = null;
     }
 
-    private reloadProcessFilters() {
+    private resetTaskFilters(): void {
+        this.taskFilter = null;
+    }
+
+    private reloadProcessFilters(): void {
         this.activitiprocessfilter.selectFilter(null);
     }
 
-    onRowClick(event) {
+    private reloadTaskFilters(): void {
+        this.activitifilter.selectFilter(null);
+    }
+
+    onRowClick(event): void {
         console.log(event);
     }
 
-    onRowDblClick(event) {
+    onRowDblClick(event): void {
         console.log(event);
     }
 
+    isTaskCompleted(): boolean {
+        return this.activitidetails.isCompletedTask();
+    }
 }

demo-shell-ng2/app/components/activiti/activiti-process-attachments.component.css

@@ -0,0 +1,3 @@
+adf-create-process-attachment >>> button {
+    float: right;
+}

demo-shell-ng2/app/components/activiti/activiti-process-attachments.component.html

@@ -0,0 +1,29 @@
+<div id="attachment-process-list" *ngIf="processId">
+    <h5>Attachments</h5>
+    <div class="adf-no-form-container">
+        <adf-upload-drag-area
+            [parentId]="processId"
+            [showNotificationBar]="false">
+            <adf-process-attachment-list #processAttachList
+                *ngIf="processId"
+                [processInstanceId]="processId"
+                (attachmentClick)="onAttachmentClick($event)">
+            </adf-process-attachment-list>
+        </adf-upload-drag-area>
+
+        <adf-create-process-attachment
+            [processInstanceId]="processId"
+            (success)="onFileUploadComplete($event)">
+        </adf-create-process-attachment>
+
+    </div>
+</div>
+
+<div *ngIf="fileShowed">
+    <alfresco-viewer
+        [(showViewer)]="fileShowed"
+        [blobFile]="content"
+        [displayName]="contentName"
+        [overlayMode]="true">
+    </alfresco-viewer>
+</div>

demo-shell-ng2/app/components/activiti/activiti-process-attachments.component.ts

@@ -0,0 +1,61 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { ProcessAttachmentListComponent, ProcessUploadService } from 'ng2-activiti-processlist';
+import { UploadService } from 'ng2-alfresco-core';
+
+@Component({
+    selector: 'activiti-process-attachments',
+    templateUrl: './activiti-process-attachments.component.html',
+    styleUrls: ['./activiti-process-attachments.component.css'],
+    providers: [
+        { provide: UploadService, useClass: ProcessUploadService }
+    ]
+})
+
+export class ActivitiProcessAttachmentsComponent implements OnInit {
+
+    @Input()
+    processId: string;
+
+    @ViewChild(ProcessAttachmentListComponent)
+    processAttachList: ProcessAttachmentListComponent;
+
+    fileShowed: boolean = false;
+    content: Blob;
+    contentName: string;
+
+    constructor(private uploadService: UploadService) {
+
+    }
+
+    ngOnInit() {
+        this.uploadService.fileUploadComplete.subscribe(value => this.onFileUploadComplete(value.data));
+    }
+
+    onFileUploadComplete(content: any) {
+        this.processAttachList.add(content);
+    }
+
+    onAttachmentClick(content: any): void {
+        this.fileShowed = true;
+        this.content = content.contentBlob;
+        this.contentName = content.name;
+    }
+
+}

demo-shell-ng2/app/components/activiti/activiti-show-diagram.component.html

@@ -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>

demo-shell-ng2/app/components/activiti/activiti-show-diagram.component.ts

@@ -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 { Location } from '@angular/common';
+import { Component, OnDestroy } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Subscription } from 'rxjs/Rx';
+
+@Component({
+    selector: 'activiti-show-diagram',
+    templateUrl: './activiti-show-diagram.component.html',
+    styleUrls: ['./activiti-show-diagram.component.css']
+})
+export class ActivitiShowDiagramComponent implements OnDestroy {
+
+    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();
+    }
+
+}

demo-shell-ng2/app/components/activiti/activiti-task-attachments.component.css

@@ -0,0 +1,3 @@
+adf-create-task-attachment >>> button {
+    float: right;
+}

demo-shell-ng2/app/components/activiti/activiti-task-attachments.component.html

@@ -0,0 +1,29 @@
+<div id="attachment-task-list" *ngIf="taskId">
+    <h5>Attachments</h5>
+    <div class="adf-no-form-container">
+        <adf-upload-drag-area
+            [parentId]="taskId"
+            [showNotificationBar]="false">
+            <adf-task-attachment-list #taskAttachList
+                *ngIf="taskId"
+                [taskId]="taskId"
+                (attachmentClick)="onAttachmentClick($event)">
+            </adf-task-attachment-list>
+        </adf-upload-drag-area>
+
+        <adf-create-task-attachment
+            [taskId]="taskId"
+            (success)="onFileUploadComplete($event)">
+        </adf-create-task-attachment>
+
+    </div>
+</div>
+
+<div *ngIf="fileShowed">
+    <alfresco-viewer
+        [(showViewer)]="fileShowed"
+        [blobFile]="content"
+        [displayName]="contentName"
+        [overlayMode]="true">
+    </alfresco-viewer>
+</div>

demo-shell-ng2/app/components/activiti/activiti-task-attachments.component.ts

@@ -0,0 +1,61 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { ProcessUploadService, TaskAttachmentListComponent } from 'ng2-activiti-tasklist';
+import { UploadService } from 'ng2-alfresco-core';
+
+@Component({
+    selector: 'activiti-task-attachments',
+    templateUrl: './activiti-task-attachments.component.html',
+    styleUrls: ['./activiti-task-attachments.component.css'],
+    providers: [
+        { provide: UploadService, useClass: ProcessUploadService }
+    ]
+})
+
+export class ActivitiTaskAttachmentsComponent implements OnInit {
+
+    @Input()
+    taskId: string;
+
+    @ViewChild(TaskAttachmentListComponent)
+    taskAttachList: TaskAttachmentListComponent;
+
+    fileShowed: boolean = false;
+    content: Blob;
+    contentName: string;
+
+    constructor(private uploadService: UploadService) {
+
+    }
+
+    ngOnInit() {
+        this.uploadService.fileUploadComplete.subscribe(value => this.onFileUploadComplete(value.data));
+    }
+
+    onFileUploadComplete(content: any) {
+        this.taskAttachList.add(content);
+    }
+
+    onAttachmentClick(content: any): void {
+        this.fileShowed = true;
+        this.content = content.contentBlob;
+        this.contentName = content.name;
+    }
+
+}

demo-shell-ng2/app/components/activiti/apps.view.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { AppDefinitionRepresentationModel } from 'ng2-activiti-tasklist';
 
 @Component({
@@ -25,7 +25,7 @@ import { AppDefinitionRepresentationModel } from 'ng2-activiti-tasklist';
         <activiti-apps (appClick)="onAppClicked($event)"></activiti-apps>
     `
 })
-export class ActivitiAppsView {
+export class ActivitiAppsViewComponent {
 
     constructor(private router: Router, private route: ActivatedRoute) {
     }

demo-shell-ng2/app/components/activiti/custom-editor/custom-editor.component.ts

@@ -15,7 +15,9 @@
  * limitations under the License.
  */
 
-import { NgModule, Component } from '@angular/core';
+/* tslint:disable */
+
+import { Component, NgModule } from '@angular/core';
 import { WidgetComponent } from 'ng2-activiti-form';
 
 @Component({
@@ -24,17 +26,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 {
+
+}

demo-shell-ng2/app/components/activiti/form-node-viewer.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, OnDestroy, AfterViewChecked } from '@angular/core';
+import { AfterViewChecked, Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Subscription } from 'rxjs/Rx';
 
@@ -26,7 +26,7 @@ declare var componentHandler;
     templateUrl: './form-node-viewer.component.html',
     styleUrls: ['./form-node-viewer.component.css']
 })
-export class FormNodeViewer implements OnInit, OnDestroy, AfterViewChecked {
+export class FormNodeViewerComponent implements OnInit, OnDestroy, AfterViewChecked {
 
     nodeId: string;
 

demo-shell-ng2/app/components/activiti/form-viewer.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, OnDestroy, AfterViewChecked } from '@angular/core';
+import { AfterViewChecked, Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Subscription } from 'rxjs/Rx';
 
@@ -26,7 +26,7 @@ declare var componentHandler;
     templateUrl: './form-viewer.component.html',
     styleUrls: ['./form-viewer.component.css']
 })
-export class FormViewer implements OnInit, OnDestroy, AfterViewChecked {
+export class FormViewerComponent implements OnInit, OnDestroy, AfterViewChecked {
 
     taskId: string;
 

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

@@ -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;
+}

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

@@ -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,12 +21,21 @@
         -->
     </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>
     <button md-raised-button (click)="replaceRows()">Replace rows</button>
     <button md-raised-button (click)="replaceColumns()">Replace columns</button>
+    <button md-raised-button (click)="getRowForNode()">Load Node</button>
 </div>

demo-shell-ng2/app/components/datatable/datatable-demo.component.ts

@@ -15,25 +15,37 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
-import { ObjectDataTableAdapter, DataSorting, ObjectDataRow, ObjectDataColumn, DataCellEvent, DataRowActionEvent } from 'ng2-alfresco-datatable';
+import { Component, Input } from '@angular/core';
+import { AlfrescoApiService } from 'ng2-alfresco-core';
+import { DataCellEvent, DataRowActionEvent, DataSorting, ObjectDataColumn, ObjectDataRow, ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
+import { Observable } from 'rxjs/Rx';
 
 @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',
         email: 'denys.vuika@alfresco.com'
     };
 
-    constructor() {
+    constructor(private apiService: AlfrescoApiService) {
         this.reset();
     }
 
@@ -70,11 +82,11 @@ export class DataTableDemoComponent {
                 }
             ],
             [
-                {type: 'image', key: 'icon', title: '', srTitle: 'Thumbnail'},
-                {type: 'text', key: 'id', title: 'Id', sortable: true},
-                {type: 'text', key: 'createdOn', title: 'Created On', sortable: true},
-                {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
-                {type: 'text', key: 'createdBy.name', title: 'Created By', sortable: true}
+                { type: 'image', key: 'icon', title: '', srTitle: 'Thumbnail' },
+                { type: 'text', key: 'id', title: 'Id', sortable: true },
+                { type: 'text', key: 'createdOn', title: 'Created On', sortable: true },
+                { type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true },
+                { type: 'text', key: 'createdBy.name', title: 'Created By', sortable: true }
             ]
         );
 
@@ -162,4 +174,33 @@ export class DataTableDemoComponent {
     onRowDblClick(event) {
         console.log(event);
     }
+
+    getRowForNode() {
+        let opts: any = {
+            includeSource: true,
+            include: ['path', 'properties', 'allowableOperations']
+        };
+
+        Observable.fromPromise(this.apiService.getInstance().nodes
+            .getNodeInfo('-my-', opts)).subscribe((data) => {
+                console.log('FUnNy');
+                console.log(data);
+                let objects = new ObjectDataTableAdapter([
+                    {
+                        id: data.id,
+                        name: data.name,
+                        createdBy: data.createdByUser.displayName,
+                        createdOn: new Date(data.createdAt),
+                        icon: 'material-icons://face'
+                    }],
+                    [
+                        { type: 'image', key: 'icon', title: '', srTitle: 'Thumbnail' },
+                        { type: 'text', key: 'id', title: 'Id', sortable: true },
+                        { type: 'text', key: 'createdOn', title: 'Created On', sortable: true },
+                        { type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true },
+                        { type: 'text', key: 'createdBy.name', title: 'Created By', sortable: true }
+                    ]);
+                this.data = objects;
+            });
+    }
 }

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

@@ -19,3 +19,33 @@
 .adf-not-overlay-viewer {
     height:900px;
 }
+
+adf-document-list >>> adf-datatable tr.is-selected .image-table-cell {
+    position: relative;
+}
+
+adf-document-list >>> adf-datatable tr.is-selected .image-table-cell::before {
+    content: "\E876"; /* "done" */
+    font-family: "Material Icons";
+    font-size: 24px;
+    line-height: 32px;
+    text-align: center;
+    color: white;
+    position: absolute;
+    width: 32px;
+    height: 32px;
+    top: 50%;
+    left: 50%;
+    margin-top: -16px;
+    margin-left: -14px;
+    border-radius: 100%;
+    background: #00bcd4;
+}
+
+.adf-demo-site-container-style {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    margin-left: 3%;
+    width: 100%;
+    min-width: 200px;
+}

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

@@ -1,51 +1,98 @@
 <div class="container">
+    <div class="adf-demo-site-container-style" id="demo-container">
+        <span> Choose A Site from DropDown </span>
+        <p></p>
+        <adf-sites-dropdown (change)="getSiteContent($event)">
+        </adf-sites-dropdown>
+    </div>
     <alfresco-upload-drag-area
-            [rootFolderId]="documentList.currentFolderId"
-            [versioning] = "versioning">
-        <alfresco-document-list-breadcrumb
-            [target]="documentList"
-            [folderNode]="documentList.folderNode">
-        </alfresco-document-list-breadcrumb>
+        [parentId]="currentFolderId"
+        [versioning]="versioning"
+        [enabled]="documentList.hasCreatePermission()">
         <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>
-        <alfresco-document-list
+        <ng-container *ngIf="useCustomToolbar">
+            <adf-toolbar [color]="toolbarColor">
+                <adf-toolbar-title>
+                    <adf-breadcrumb *ngIf="!useDropdownBreadcrumb"
+                        class="files-breadcrumb"
+                        [target]="documentList"
+                        [folderNode]="documentList.folderNode">
+                    </adf-breadcrumb>
+                    <adf-dropdown-breadcrumb  *ngIf="useDropdownBreadcrumb"
+                        class="files-breadcrumb"
+                        [target]="documentList"
+                        [folderNode]="documentList.folderNode">
+                    </adf-dropdown-breadcrumb>
+                </adf-toolbar-title>
+                <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]="themePicker">
+                    <md-icon>format_color_fill</md-icon>
+                </button>
+
+                <md-menu #themePicker="mdMenu">
+                    <button md-menu-item (click)="toolbarColor = 'default'">Default</button>
+                    <button md-menu-item (click)="toolbarColor = 'primary'">Primary</button>
+                    <button md-menu-item (click)="toolbarColor = 'accent'">Accent</button>
+                    <button md-menu-item (click)="toolbarColor = 'warn'">Warn</button>
+                </md-menu>
+
+                <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>
+        <adf-document-list
                 #documentList
+                [permissionsStyle]="permissionsStyle"
+                [creationMenuActions]="!useCustomToolbar"
                 [currentFolderId]="currentFolderId"
                 [contextMenuActions]="true"
                 [contentActions]="true"
                 [allowDropFiles]="true"
-                [sorting]="['name', 'desc']"
+                [selectionMode]="selectionMode"
+                [multiselect]="multiselect"
                 (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
+                    key="$thumbnail"
+                    type="image"
+                    [sortable]="false"
+                    class="image-table-cell">
+                </data-column>
                 <data-column
                         title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
                         key="name"
                         class="full-width ellipsis-cell">
-
-                    <!-- Example #1: using custom template with implicit access to data context -->
-                    <!--
-                    <template let-entry="$implicit">
-                        <span>Hi! {{entry.data.getValue(entry.row, entry.col)}}</span>
-                    </template>
-                    -->
-
-                    <!-- Example #2: using custom template with value access -->
-                    <!--
-                    <template let-value="value">
-                        <span>Hi! {{value}}</span>
-                    </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}}"
@@ -57,76 +104,75 @@
                 </data-column>
                 -->
                 <data-column
-                        title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
-                        key="createdByUser.displayName"
-                        class="desktop-only">
+                    title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
+                    key="createdByUser.displayName"
+                    class="desktop-only">
                 </data-column>
                 <data-column
-                        title="{{'DOCUMENT_LIST.COLUMNS.CREATED_ON' | translate}}"
-                        key="createdAt"
-                        type="date"
-                        format="medium"
-                        class="desktop-only">
+                    title="{{'DOCUMENT_LIST.COLUMNS.CREATED_ON' | translate}}"
+                    key="createdAt"
+                    type="date"
+                    format="medium"
+                    class="desktop-only">
                 </data-column>
             </data-columns>
 
             <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)"
-                        handler="delete">
+                    icon="delete"
+                    target="folder"
+                    permission="delete"
+                    [disableWithNoPermission]="true"
+                    title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.DELETE' | translate}}"
+                    (permissionEvent)="handlePermissionError($event)"
+                    handler="delete">
                 </content-action>
                 <!-- document actions -->
                 <content-action
-                        target="document"
-                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DOWNLOAD' | translate}}"
-                        handler="download">
+                    icon="file_download"
+                    target="document"
+                    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)"
-                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DELETE' | translate}}"
-                        handler="delete">
-                </content-action>
-                <content-action
-                        target="folder"
-                        title="Activiti: View Form"
-                        (execute)="viewActivitiForm($event)">
+                    icon="delete"
+                    target="document"
+                    permission="delete"
+                    [disableWithNoPermission]="true"
+                    (permissionEvent)="handlePermissionError($event)"
+                    title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DELETE' | translate}}"
+                    handler="delete">
                 </content-action>
             </content-actions>
-        </alfresco-document-list>
+        </adf-document-list>
     </alfresco-upload-drag-area>
 </div>
 
 <context-menu-holder></context-menu-holder>
 
+<div class="p-10">
+    Selected Nodes:
+    <ul>
+        <li *ngFor="let node of documentList.selection">
+            {{ node.entry.name }}
+        </li>
+    </ul>
+</div>
+
 <div class="container">
+    <section>
+        <md-slide-toggle [(ngModel)]="multiselect">Multiselect (with checkboxes)</md-slide-toggle>
+    </section>
+
+    <section>
+        <md-slide-toggle [(ngModel)]="useDropdownBreadcrumb">Dropdown breadcrumb</md-slide-toggle>
+    </section>
+
+    <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 +196,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 +209,7 @@
             [uploadFolders]="folderUpload"
             [versioning]="versioning"
             [disableWithNoPermission]="disableWithNoPermission"
-            (permissionEvent)="onUploadPermissionFailed($event)">
+            (permissionEvent)="handlePermissionError($event)">
         </alfresco-upload-button>
     </div>
     <div *ngIf="acceptedFilesTypeShow">
@@ -177,7 +223,7 @@
             [uploadFolders]="folderUpload"
             [versioning]="versioning"
             [disableWithNoPermission]="disableWithNoPermission"
-            (permissionEvent)="onUploadPermissionFailed($event)">
+            (permissionEvent)="handlePermissionError($event)">
         </alfresco-upload-button>
     </div>
     <section>
@@ -185,6 +231,15 @@
     </section>
 </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>
+
 <file-uploading-dialog #fileDialog></file-uploading-dialog>
 
 <div *ngIf="fileShowed">
@@ -193,9 +248,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>
@@ -210,4 +265,3 @@
     <!--</div>-->
 
 </div>
-

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

@@ -15,19 +15,20 @@
  * 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 { ChangeDetectorRef, Component, Input, OnInit, Optional, ViewChild } from '@angular/core';
+import { MdDialog } from '@angular/material';
+import { ActivatedRoute, Params } from '@angular/router';
+import { AlfrescoContentService, FileUploadCompleteEvent, FolderCreatedEvent, NotificationService, SiteModel, UploadService } from 'ng2-alfresco-core';
+import { DocumentListComponent, DropdownSitesComponent, PermissionStyleModel } from 'ng2-alfresco-documentlist';
+
+import { CreateFolderDialogComponent } 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 +36,22 @@ export class FilesComponent implements OnInit, AfterViewInit {
     fileNodeId: any;
     fileShowed: boolean = false;
 
+    useCustomToolbar = true;
+    toolbarColor = 'default';
+    useDropdownBreadcrumb = true;
+
+    selectionModes = [
+        { value: 'none', viewValue: 'None' },
+        { value: 'single', viewValue: 'Single' },
+        { value: 'multiple', viewValue: 'Multiple' }
+    ];
+
+    @Input()
+    selectionMode = 'multiple';
+
+    @Input()
+    multiselect = false;
+
     @Input()
     multipleFileUpload: boolean = false;
 
@@ -59,33 +76,14 @@ export class FilesComponent implements OnInit, AfterViewInit {
     @ViewChild(DocumentListComponent)
     documentList: DocumentListComponent;
 
-    @ViewChild(UploadButtonComponent)
-    uploadButton: UploadButtonComponent;
+    permissionsStyle: PermissionStyleModel[] = [];
 
-    @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 +110,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 +125,40 @@ 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);
+    onFileUploadComplete(event: FileUploadCompleteEvent) {
+        if (event && event.file.options.parentId === this.documentList.currentFolderId) {
+            this.documentList.reload();
+        }
+    }
 
-            let folderAction = new FolderActionModel();
-            folderAction.title = 'Activiti: ' + (def.name || 'Unknown process');
-            folderAction.handler = this.getBpmActionHandler(def);
-            this.documentList.actions.push(folderAction);
+    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(CreateFolderDialogComponent);
+        dialogRef.afterClosed().subscribe(folderName => {
+            if (folderName) {
+                this.contentService.createFolder('', folderName, this.documentList.currentFolderId).subscribe(
+                    node => console.log(node),
+                    err => console.log(err)
+                );
+            }
         });
     }
 
-    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();
-            }
-        }
+    getSiteContent(site: SiteModel) {
+        this.currentFolderId = site && site.guid ? site.guid : '-my-';
     }
 }

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

@@ -0,0 +1,3 @@
+.form-container {
+    padding: 10px;
+}

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

@@ -0,0 +1,4 @@
+<div class="form-container">
+    <activiti-form [form]="form">
+    </activiti-form>
+</div>

demo-shell-ng2/app/components/form/form-demo.component.ts

@@ -0,0 +1,48 @@
+/*!
+ * @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, Inject, OnInit } from '@angular/core';
+import { FormModel, FormService } from 'ng2-activiti-form';
+import { InMemoryFormService } from '../../services/in-memory-form.service';
+import { DemoForm } from './demo-form';
+
+@Component({
+    selector: 'form-demo',
+    templateUrl: 'form-demo.component.html',
+    styleUrls: [ 'form-demo.component.css' ],
+    providers: [
+        { provide: FormService, useClass: InMemoryFormService }
+    ]
+})
+export class FormDemoComponent implements OnInit {
+
+    form: FormModel;
+
+    constructor(@Inject(FormService) private formService: InMemoryFormService) {
+        // Prevent default outcome actions
+        formService.executeOutcome.subscribe(e => {
+            e.preventDefault();
+            console.log(e.outcome);
+        });
+    }
+
+    ngOnInit() {
+        let formDefinitionJSON: any = DemoForm.getDefinition();
+        this.form = this.formService.parseForm(formDefinitionJSON);
+    }
+
+}

demo-shell-ng2/app/components/form/form-list-demo.component.ts

@@ -0,0 +1,112 @@
+/*!
+ * @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 { AfterViewInit, Component, ViewChild } from '@angular/core';
+import { FormModel, FormService } from 'ng2-activiti-form';
+import { ActivitiForm } from 'ng2-activiti-form';
+
+declare var componentHandler;
+
+@Component({
+    selector: 'form-list-demo',
+    template: `
+        <adf-form-list [forms]="formList" (row-dblclick)="onRowDblClick($event)">
+        </adf-form-list>
+        <div class="form-container" *ngIf="!isEmptyForm()">
+            <activiti-form [form]="form" [data]="restoredData">
+            </activiti-form>
+        </div>
+        <button class="mdl-button mdl-js-button" (click)="store()">STORE</button>
+        <button class="mdl-button mdl-js-button" (click)="restore()">RESTORE</button>
+    `,
+    styles: [`
+        .form-container {
+            padding: 10px;
+        }
+
+        .store-form-container{
+            width: 80%;
+            height: 80%;
+        }
+    `]
+})
+export class FormListDemoComponent implements AfterViewInit {
+
+     @ViewChild(ActivitiForm)
+    activitiForm: ActivitiForm;
+
+    formList: any [] = [];
+
+    form: FormModel;
+    formId: string;
+
+    storedData: any = {};
+    restoredData: any = {};
+
+    constructor(private formService: FormService) {
+        // Prevent default outcome actions
+        formService.executeOutcome.subscribe(e => {
+            e.preventDefault();
+            console.log(e.outcome);
+        });
+    }
+
+    ngAfterViewInit() {
+        // workaround for MDL issues with dynamic components
+        if (componentHandler) {
+            componentHandler.upgradeAllRegistered();
+        }
+    }
+
+    onRowDblClick(event: CustomEvent) {
+        let rowForm = event.detail.value.obj;
+
+        this.formService.getFormDefinitionById(rowForm.id).subscribe((definition) => {
+            let form = this.formService.parseForm(definition);
+            this.form = form;
+        });
+
+        console.log(rowForm);
+    }
+
+    isEmptyForm() {
+        return this.form === null || this.form === undefined;
+    }
+
+    store() {
+        this.clone(this.activitiForm.form.values, this.storedData);
+        console.log('DATA SAVED');
+        console.log(this.storedData);
+        console.log('DATA SAVED');
+        this.restoredData = null;
+    }
+
+    clone(objToCopyFrom, objToCopyTo) {
+        for (let attribute in objToCopyFrom) {
+            if (objToCopyFrom.hasOwnProperty(attribute)) {
+                objToCopyTo[attribute] = objToCopyFrom[attribute];
+            }
+        }
+        return objToCopyTo;
+    }
+
+    restore() {
+        this.restoredData = this.storedData;
+        this.storedData = {};
+    }
+
+}

demo-shell-ng2/app/components/index.ts

@@ -21,12 +21,16 @@ 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 { FormViewer } from './activiti/form-viewer.component';
+export { ActivitiTaskAttachmentsComponent } from './activiti/activiti-task-attachments.component';
+export { ActivitiProcessAttachmentsComponent } from './activiti/activiti-process-attachments.component';
+export { ActivitiShowDiagramComponent } from './activiti/activiti-show-diagram.component';
+export { FormViewerComponent } from './activiti/form-viewer.component';
 export { WebscriptComponent } from './webscript/webscript.component';
 export { TagComponent } from './tag/tag.component';
 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 { FormNodeViewerComponent } from './activiti/form-node-viewer.component';
+export { ActivitiAppsViewComponent } from './activiti/apps.view';
+export { SettingsComponent } from './settings/settings.component';
+export { FormDemoComponent } from './form/form-demo.component';

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

@@ -15,14 +15,9 @@
     z-index: 1;
 }
 
-.banned {
-    width: 130px;
-    margin: 10px;
-}
-
 .toggle {
-    width: 120px;
-    margin: 20px;
+    width: 190px;
+    margin: 5px;
     padding: 5px;
 }
 

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

@@ -21,27 +21,28 @@
             <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 class="toggle">
+        <label for="switch4" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+            <input type="checkbox" id="switch4" class="mdl-switch__input" [checked]="showFooter" (click)="toggleFooter()">
+            <span class="mdl-switch__label">Login footer</span>
+        </label>
     </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)"
+                [showLoginActions]="showFooter"
+                [showRememberMe]="showFooter"
+                copyrightText="© 2016 Alfresco Software, Inc. All Rights Reserved. (customised text)"
                 (onSuccess)="onLogin($event)"
                 (onError)="onError($event)">
     <div class="mobile-settings">
@@ -65,9 +66,11 @@
                 <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>
+        <p>
+            <label for="switch4-mobile" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+                <input type="checkbox" id="switch4-mobile" class="mdl-switch__input" [checked]="showFooter" (click)="toggleFooter()">
+                <span class="mdl-switch__label">Login footer</span>
+            </label>
+        </p>
     </div>
 </alfresco-login>

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

@@ -15,10 +15,10 @@
  * limitations under the License.
  */
 
-import { Component, ViewChild, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { Validators } from '@angular/forms';
-import { StorageService, LogService } from 'ng2-alfresco-core';
+import { Router } from '@angular/router';
+import { LogService, StorageService } from 'ng2-alfresco-core';
 
 @Component({
     selector: 'login-demo',
@@ -31,12 +31,12 @@ export class LoginDemoComponent implements OnInit {
     alfrescologin: any;
 
     providers: string = 'ECM';
-    blackListUsername: string;
     customValidation: any;
 
     disableCsrf: boolean = false;
     isECM: boolean = true;
     isBPM: boolean = false;
+    showFooter: boolean = true;
     customMinLenght: number = 2;
 
     constructor(private router: Router,
@@ -95,6 +95,10 @@ export class LoginDemoComponent implements OnInit {
         this.disableCsrf = !this.disableCsrf;
     }
 
+    toggleFooter() {
+        this.showFooter = !this.showFooter;
+    }
+
     updateProvider() {
         if (this.isBPM && this.isECM) {
             this.providers = 'ALL';
@@ -113,14 +117,5 @@ 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();
-        }
     }
-
 }

demo-shell-ng2/app/components/search/search-bar.component.html

@@ -1,6 +1,7 @@
 <alfresco-search-control *ngIf="isLoggedIn()"
                          [searchTerm]="searchTerm"
                          [autocomplete]="false"
+                         [highlight]="true"
                          (searchSubmit)="onSearchSubmit($event);"
                          (searchChange)="onSearchTermChange($event);"
                          (expand)="onExpandToggle($event);"

demo-shell-ng2/app/components/search/search-bar.component.ts

@@ -17,8 +17,8 @@
 
 import { Component, EventEmitter, Output } from '@angular/core';
 import { Router } from '@angular/router';
-import { AlfrescoAuthenticationService } from 'ng2-alfresco-core';
 import { MinimalNodeEntity } from 'alfresco-js-api';
+import { AlfrescoAuthenticationService } from 'ng2-alfresco-core';
 
 @Component({
     selector: 'search-bar',

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

@@ -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>

demo-shell-ng2/app/components/settings/settings.component.ts

@@ -15,17 +15,17 @@
  * limitations under the License.
  */
 
-import { Component, AfterViewChecked } from '@angular/core';
-import { AlfrescoSettingsService, StorageService, LogService } from 'ng2-alfresco-core';
+import { AfterViewChecked, Component } from '@angular/core';
+import { AlfrescoSettingsService, LogService, StorageService } from 'ng2-alfresco-core';
 
 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');

demo-shell-ng2/app/dialogs/create-folder.dialog.ts

@@ -0,0 +1,44 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { 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 CreateFolderDialogComponent {
+    value: string = '';
+}

demo-shell-ng2/app/main.ts

@@ -15,8 +15,8 @@
  * limitations under the License.
  */
 
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { AppModule } from './app.module';
 
 if (process.env.ENV === 'production') {

demo-shell-ng2/app/material.module.ts

@@ -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 { MdDialogModule, MdInputModule, MdSelectModule, MdSlideToggleModule } from '@angular/material';
+
+const MATERIAL_MODULES = [
+    MdSlideToggleModule,
+    MdInputModule,
+    MdSelectModule,
+    MdDialogModule
+];
+
+@NgModule({
+    imports: MATERIAL_MODULES,
+    exports: MATERIAL_MODULES
+})
+export class MaterialModule {}

demo-shell-ng2/app/polyfills.ts

@@ -1,3 +1,5 @@
+/* tslint:disable */
+
 import 'core-js/es6';
 import 'core-js/es7/reflect';
 import 'intl';

demo-shell-ng2/app/services/debug-app-config.service.ts

@@ -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);
+    }
+
+}

demo-shell-ng2/app/services/in-memory-form.service.ts

@@ -0,0 +1,83 @@
+/*!
+ * @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 { EcmModelService, FormFieldOption, FormService } from 'ng2-activiti-form';
+import { AlfrescoApiService, LogService } from 'ng2-alfresco-core';
+import { AppConfigService } from 'ng2-alfresco-core';
+import { Observable } from 'rxjs/Rx';
+
+interface ActivitiData {
+    rest: {
+        fields: Array<{
+            processId?: string,
+            taskId?: string,
+            fieldId?: string,
+            values?: Array<{
+                id: string,
+                name: string
+            }>
+        }>
+    };
+}
+
+@Injectable()
+export class InMemoryFormService extends FormService {
+
+    private data: ActivitiData;
+
+    constructor(appConfig: AppConfigService,
+                ecmModelService: EcmModelService,
+                apiService: AlfrescoApiService,
+                logService: LogService) {
+        super(ecmModelService, apiService, logService);
+        this.data = appConfig.get<ActivitiData>('activiti');
+    }
+
+    /** @override */
+    getRestFieldValues(taskId: string, fieldId: string): Observable<FormFieldOption[]> {
+        // Uncomment this to use original call
+        // return super.getRestFieldValues(taskId, fieldId);
+
+        console.log(`getRestFieldValues: ${taskId} => ${fieldId}`);
+        return new Observable<FormFieldOption[]>(observer => {
+            let field = this.data.rest.fields.find(
+                f => f.taskId === taskId && f.fieldId === fieldId
+            );
+            let values: FormFieldOption[] = field.values || [];
+            console.log(values);
+            observer.next(values);
+        });
+    }
+
+    /** @override */
+    getRestFieldValuesByProcessId(processDefinitionId: string, fieldId: string): Observable<any> {
+        // Uncomment this to use original call
+        // return super.getRestFieldValuesByProcessId(processDefinitionId, fieldId);
+
+        console.log(`getRestFieldValuesByProcessId: ${processDefinitionId} => ${fieldId}`);
+        return new Observable<FormFieldOption[]>(observer => {
+            let field = this.data.rest.fields.find(
+                f => f.processId === processDefinitionId && f.fieldId === fieldId
+            );
+            let values: FormFieldOption[] = field.values || [];
+            console.log(values);
+            observer.next(values);
+        });
+    }
+
+}

demo-shell-ng2/app/vendor.ts

@@ -1,9 +1,11 @@
+/* tslint:disable */
+
 // Angular
+import '@angular/common';
+import '@angular/core';
+import '@angular/http';
 import '@angular/platform-browser';
 import '@angular/platform-browser-dynamic';
-import '@angular/core';
-import '@angular/common';
-import '@angular/http';
 import '@angular/router';
 
 // RxJS
@@ -14,46 +16,43 @@ import 'hammerjs';
 
 // Alfresco
 import 'alfresco-js-api';
-import 'ng2-alfresco-core';
-import 'ng2-alfresco-datatable';
-import 'ng2-activiti-diagrams';
 import 'ng2-activiti-analytics';
+import 'ng2-activiti-diagrams';
 import 'ng2-activiti-form';
 import 'ng2-activiti-processlist';
 import 'ng2-activiti-tasklist';
+import 'ng2-alfresco-core';
+import 'ng2-alfresco-datatable';
 import 'ng2-alfresco-documentlist';
 import 'ng2-alfresco-login';
 import 'ng2-alfresco-search';
-import 'ng2-alfresco-tag';
 import 'ng2-alfresco-social';
+import 'ng2-alfresco-tag';
 import 'ng2-alfresco-upload';
+import 'ng2-alfresco-userinfo';
 import 'ng2-alfresco-viewer';
 import 'ng2-alfresco-webscript';
-import 'ng2-alfresco-userinfo';
 
 // Polyfill(s) for dialogs
 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';
-import 'material-design-lite/dist/material.orange-blue.min.css';
 import 'material-design-icons/iconfont/material-icons.css';
+import 'material-design-lite/dist/material.orange-blue.min.css';
+import 'material-design-lite/material.js';
 
 import '../public/css/app.css';
 import '../public/css/muli-font.css';
 
-import 'ng2-activiti-form/stencils/runtime.ng1';
 import 'ng2-activiti-form/stencils/runtime.adf';
+import 'ng2-activiti-form/stencils/runtime.ng1';
 
-import 'ng2-charts';
 import 'chart.js';
+import 'ng2-charts';
 require('script-loader!raphael/raphael.min.js');
 
 require('script-loader!moment/min/moment.min.js');
@@ -76,5 +75,5 @@ require('pdfjs-dist/web/pdf_viewer.js');
 require('three/build/three.min.js');
 
 // 3D viewer
-import 'three';
 import 'ng2-3d-editor';
+import 'three';

demo-shell-ng2/config/webpack.common.js

@@ -5,24 +5,6 @@ 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'
-];
-
 module.exports = {
     entry: {
         'polyfills': './app/polyfills.ts',
@@ -43,7 +25,7 @@ module.exports = {
                 test: /\.js$/,
                 include: [helpers.root('app'), helpers.root('../ng2-components')],
                 loader: 'source-map-loader',
-                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+                exclude: [/node_modules/, /public/, /resources/, /dist/]
             },
             {
                 enforce: 'pre',
@@ -51,20 +33,21 @@ module.exports = {
                 loader: 'tslint-loader',
                 include: [helpers.root('app')],
                 options: {
-                    emitErrors: true
+                    emitErrors: true,
+                    fix: true
                 },
-                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+                exclude: [/node_modules/, /public/, /resources/, /dist/]
             },
             {
                 enforce: 'pre',
                 test: /\.ts$/,
                 use: 'source-map-loader',
-                exclude: [ /public/, /resources/, /dist/]
+                exclude: [/public/, /resources/, /dist/]
             },
             {
                 test: /\.html$/,
                 loader: 'html-loader',
-                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+                exclude: [/node_modules/, /public/, /resources/, /dist/]
             },
             {
                 test: /\.css$/,
@@ -79,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]'
@@ -92,13 +88,12 @@ module.exports = {
                     emitErrors: true,
                     licenseFile: path.resolve(__dirname, '../assets/license_header.txt')
                 },
-                exclude: [/node_modules/, /bundles/, /dist/, /demo/],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
             }
         ]
     },
 
     plugins: [
-        // Workaround for angular/angular#11580
         new webpack.ContextReplacementPlugin(
             // The (\\|\/) piece accounts for path separators in *nix and Windows
             /angular(\\|\/)core(\\|\/)@angular/,
@@ -110,25 +105,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'
             },
@@ -157,7 +144,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: {

demo-shell-ng2/config/webpack.dev.js

@@ -4,6 +4,27 @@ 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 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-tag',
+    'ng2-alfresco-upload',
+    'ng2-alfresco-userinfo',
+    'ng2-alfresco-viewer',
+    'ng2-alfresco-webscript'
+];
 
 module.exports = webpackMerge(commonConfig, {
 
@@ -21,10 +42,9 @@ module.exports = webpackMerge(commonConfig, {
                 test: /\.ts$/,
                 include: [helpers.root('app'), helpers.root('../ng2-components')],
                 loader: [
-                    'ts-loader',
-                    'angular2-template-loader'
+                    'happypack/loader?id=ts','angular2-template-loader'
                 ],
-                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+                exclude: [/node_modules/, /public/, /resources/, /dist/]
             }
         ]
     },
@@ -55,12 +75,34 @@ module.exports = webpackMerge(commonConfig, {
     },
 
     plugins: [
+        new ForkTsCheckerWebpackPlugin({tsconfig: "tsconfig.dev.json"}),
+
+        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/`
+                }
+            })
+        ])
     ]
 });

demo-shell-ng2/config/webpack.prod.js

@@ -4,6 +4,8 @@ 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 ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 
 const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
 
@@ -27,7 +29,7 @@ const alfrescoLibs = [
 
 module.exports = webpackMerge(commonConfig, {
 
-    devtool: 'source-map',
+    devtool: 'eval',
 
     output: {
         path: helpers.root('dist'),
@@ -46,21 +48,35 @@ module.exports = webpackMerge(commonConfig, {
             {
                 test: /\.ts$/,
                 include: [helpers.root('app'), helpers.root('../ng2-components')],
-                use: ['ts-loader?' + JSON.stringify({
-                    "compilerOptions": {
-                        "paths": {}
-                    }
-                }), 'angular2-template-loader'],
-                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+                use: ['happypack/loader?id=ts', 'angular2-template-loader'],
+                exclude: [/node_modules/, /public/, /resources/, /dist/]
             }
         ]
     },
 
     plugins: [
+        new ForkTsCheckerWebpackPlugin(),
+
+        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/`
                 }

demo-shell-ng2/config/webpack.test.js

@@ -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/,

demo-shell-ng2/package.json

@@ -1,7 +1,7 @@
 {
   "name": "Alfresco-Angular2-Demo",
   "description": "Demo shell for Alfresco Angular2 components",
-  "version": "1.5.0",
+  "version": "1.6.1",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "build": "npm run server-versions && rimraf dist && npm run webpack -- --config  config/webpack.prod.js --progress --profile --bail",
@@ -12,8 +12,9 @@
     "test": "rimraf coverage && karma start --single-run",
     "clean": "npm run clean-build  && rimraf dist node_modules typings dist",
     "clean-build": "rimraf 'app/{,**/}**.js' 'app/{,**/}**.js.map' 'app/{,**/}**.d.ts'",
+    "clean-lock": "rimraf package-lock.json",
     "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"
   },
@@ -54,89 +55,97 @@
     "alfresco"
   ],
   "dependencies": {
-    "@angular/animations": "~4.0.0",
-    "@angular/common": "~4.0.0",
-    "@angular/compiler": "~4.0.0",
-    "@angular/core": "~4.0.0",
-    "@angular/forms": "~4.0.0",
-    "@angular/http": "~4.0.0",
-    "@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",
+    "@angular/animations": "4.2.5",
+    "@angular/cdk": "2.0.0-beta.8",
+    "@angular/common": "4.2.5",
+    "@angular/compiler": "4.2.5",
+    "@angular/compiler-cli": "4.2.5",
+    "@angular/core": "4.2.5",
+    "@angular/forms": "4.2.5",
+    "@angular/http": "4.2.5",
+    "@angular/material": "^2.0.0-beta.8",
+    "@angular/platform-browser": "4.2.5",
+    "@angular/platform-browser-dynamic": "4.2.5",
+    "@angular/router": "4.2.5",
+    "@ngx-translate/core": "7.0.0",
+    "alfresco-js-api": "1.6.1",
+    "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",
+    "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",
+    "minimatch": "3.0.4",
+    "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.1",
+    "ng2-activiti-diagrams": "1.6.1",
+    "ng2-activiti-form": "1.6.1",
+    "ng2-activiti-processlist": "1.6.1",
+    "ng2-activiti-tasklist": "1.6.1",
+    "ng2-alfresco-core": "1.6.1",
+    "ng2-alfresco-datatable": "1.6.1",
+    "ng2-alfresco-documentlist": "1.6.1",
+    "ng2-alfresco-login": "1.6.1",
+    "ng2-alfresco-search": "1.6.1",
+    "ng2-alfresco-social": "1.6.1",
+    "ng2-alfresco-tag": "1.6.1",
+    "ng2-alfresco-upload": "1.6.1",
+    "ng2-alfresco-userinfo": "1.6.1",
+    "ng2-alfresco-viewer": "1.6.1",
+    "ng2-alfresco-webscript": "1.6.1",
+    "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",
+    "@types/hammerjs": "2.0.34",
     "@types/jasmine": "2.5.35",
     "@types/node": "6.0.45",
-    "angular2-template-loader": "^0.6.2",
-    "copy-webpack-plugin": "^4.0.1",
+    "adf-tslint-rules": "0.0.3",
+    "angular2-template-loader": "0.6.2",
+    "codelyzer": "3.1.2",
+    "copy-webpack-plugin": "4.0.1",
     "css-loader": "0.26.1",
-    "extract-text-webpack-plugin": "^2.0.0-rc.3",
-    "file-loader": "^0.10.0",
-    "html-loader": "^0.4.4",
-    "html-webpack-plugin": "^2.28.0",
-    "jasmine-core": "^2.5.2",
-    "karma": "^1.4.1",
+    "extract-text-webpack-plugin": "2.0.0-rc.3",
+    "file-loader": "0.10.0",
+    "fork-ts-checker-webpack-plugin": "0.2.4",
+    "happypack": "^4.0.0-beta.1",
+    "html-loader": "0.4.4",
+    "html-webpack-plugin": "2.28.0",
+    "jasmine-core": "2.5.2",
+    "karma": "1.7.0",
     "karma-chrome-launcher": "2.0.0",
-    "karma-coverage": "^1.1.1",
-    "karma-jasmine": "^1.1.0",
+    "karma-coverage": "1.1.1",
+    "karma-jasmine": "1.1.0",
     "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-webpack": "^2.0.2",
-    "null-loader": "^0.1.1",
-    "raw-loader": "^0.5.1",
-    "rimraf": "^2.5.4",
+    "karma-mocha-reporter": "2.2.2",
+    "karma-remap-istanbul": "0.6.0",
+    "karma-sourcemap-loader": "0.3.7",
+    "karma-webpack": "2.0.3",
+    "node-sass": "4.5.3",
+    "null-loader": "0.1.1",
+    "raw-loader": "0.5.1",
+    "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",
+    "source-map-loader": "0.1.6",
+    "sourcemap-istanbul-instrumenter-loader": "0.2.0",
     "style-loader": "0.13.1",
-    "to-string-loader": "^1.1.4",
-    "ts-loader": "^2.0.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.6"
+    "to-string-loader": "1.1.5",
+    "ts-loader": "2.2.1",
+    "tslint": "5.5.0",
+    "tslint-loader": "3.5.3",
+    "typescript": "2.3.4",
+    "webpack": "2.2.1",
+    "webpack-dev-server": "2.3.0",
+    "webpack-merge": "2.6.1",
+    "wsrv": "0.1.6"
   }
 }

demo-shell-ng2/public/css/app.css

@@ -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;
+}

demo-shell-ng2/public/css/flags/gb.svg

@@ -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>

demo-shell-ng2/public/css/flags/it.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>

demo-shell-ng2/public/css/flags/ru.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>

demo-shell-ng2/public/css/muli-font.css

@@ -1,6 +1,25 @@
 @font-face {
-    font-family: Muli;
+    font-family: "Muli";
+    src: url(../fonts/Muli-Light.ttf);
+}
+
+@font-face {
+    font-family: "Muli";
+    src: url(../fonts/Muli-LightItalic.ttf);
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "Muli";
     src: url(../fonts/Muli-Regular.ttf);
+    font-weight: bold;
+}
+
+@font-face {
+    font-family: "Muli";
+    src: url(../fonts/Muli-Italic.ttf);
+    font-weight: bold;
+    font-style: italic;
 }
 
 html, body {

demo-shell-ng2/resources/i18n/en.json

@@ -21,5 +21,8 @@
                 "CUSTOM": "Custom action"
             }
         }
+    },
+    "ANALYTICS_REPORT":{
+        "NO_REPORT_MESSAGE":"No report selected. Choose a report from the list"
     }
 }

demo-shell-ng2/tsconfig.dev.json

@@ -0,0 +1,56 @@
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "target": "es5",
+        "module": "commonjs",
+        "moduleResolution": "node",
+        "sourceMap": true,
+        "emitDecoratorMetadata": true,
+        "experimentalDecorators": true,
+        "skipLibCheck": true,
+        "noLib": false,
+        "allowUnreachableCode": false,
+        "allowUnusedLabels": false,
+        "noImplicitAny": false,
+        "noImplicitReturns": false,
+        "noImplicitUseStrict": false,
+        "noFallthroughCasesInSwitch": true,
+        "removeComments": true,
+        "declaration": true,
+        "outDir": "./dist",
+        "lib": [
+            "es2015",
+            "dom"
+        ],
+        "paths": {
+            "ng2-alfresco-core": ["../ng2-components/ng2-alfresco-core/"],
+            "ng2-alfresco-datatable": ["../ng2-components/ng2-alfresco-datatable/"],
+            "ng2-activiti-diagrams": ["../ng2-components/ng2-activiti-diagrams/"],
+            "ng2-activiti-analytics":["../ng2-components/ng2-activiti-analytics/"],
+            "ng2-activiti-form":["../ng2-components/ng2-activiti-form/"],
+            "ng2-activiti-tasklist": ["../ng2-components/ng2-activiti-tasklist/"],
+            "ng2-activiti-processlist": ["../ng2-components/ng2-activiti-processlist/"],
+            "ng2-alfresco-documentlist": ["../ng2-components/ng2-alfresco-documentlist/"],
+            "ng2-alfresco-login": ["../ng2-components/ng2-alfresco-login/"],
+            "ng2-alfresco-search": ["../ng2-components/ng2-alfresco-search/"],
+            "ng2-alfresco-social": ["../ng2-components/ng2-alfresco-social/"],
+            "ng2-alfresco-tag": ["../ng2-components/ng2-alfresco-tag/"],
+            "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/"],
+            "@angular/*": ["node_modules/@angular/*"],
+            "rxjs/*": ["node_modules/rxjs/*"]
+        },
+        "suppressImplicitAnyIndexErrors": true
+    },
+    "exclude": [
+        "demo",
+        "node_modules",
+        "dist"
+    ],
+    "angularCompilerOptions": {
+        "strictMetadataEmit": false,
+        "skipTemplateCodegen": true
+    }
+}

demo-shell-ng2/tsconfig.json

@@ -23,22 +23,8 @@
             "dom"
         ],
         "paths": {
-            "ng2-alfresco-core": ["../ng2-components/ng2-alfresco-core/"],
-            "ng2-alfresco-datatable": ["../ng2-components/ng2-alfresco-datatable/"],
-            "ng2-activiti-diagrams": ["../ng2-components/ng2-activiti-diagrams/"],
-            "ng2-activiti-analytics":["../ng2-components/ng2-activiti-analytics/"],
-            "ng2-activiti-form":["../ng2-components/ng2-activiti-form/"],
-            "ng2-activiti-tasklist": ["../ng2-components/ng2-activiti-tasklist/"],
-            "ng2-activiti-processlist": ["../ng2-components/ng2-activiti-processlist/"],
-            "ng2-alfresco-documentlist": ["../ng2-components/ng2-alfresco-documentlist/"],
-            "ng2-alfresco-login": ["../ng2-components/ng2-alfresco-login/"],
-            "ng2-alfresco-search": ["../ng2-components/ng2-alfresco-search/"],
-            "ng2-alfresco-social": ["../ng2-components/ng2-alfresco-social/"],
-            "ng2-alfresco-tag": ["../ng2-components/ng2-alfresco-tag/"],
-            "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/"]
+            "@angular/*": ["node_modules/@angular/*"],
+            "rxjs/*": ["node_modules/rxjs/*"]
         },
         "suppressImplicitAnyIndexErrors": true
     },

demo-shell-ng2/tslint.json

@@ -1,118 +1,145 @@
 {
-  "rules": {
-    "align": [
-      true,
-      "parameters",
-      "statements"
+    "rulesDirectory": [
+        "node_modules/codelyzer"
     ],
-    "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"
-    ]
-  }
+    "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": 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"
+        ],
+        "callable-types": true,
+        "import-blacklist": [
+            true,
+            "rxjs"
+        ],
+        "import-spacing": true,
+        "interface-over-type-literal": true,
+        "member-access": false,
+        "no-empty-interface": true,
+        "no-string-literal": false,
+        "no-string-throw": true,
+        "prefer-const": false,
+        "typeof-compare": true,
+        "unified-signatures": true,
+        "whitespace": [
+            true,
+            "check-branch",
+            "check-decl",
+            "check-operator",
+            "check-separator",
+            "check-type"
+        ],
+        "ordered-imports": true,
+        "use-input-property-decorator": true,
+        "use-output-property-decorator": true,
+        "use-host-property-decorator": false,
+        "use-life-cycle-interface": true,
+        "use-pipe-transform-interface": true,
+        "component-class-suffix": true,
+        "directive-class-suffix": true,
+        "no-access-missing-member": false,
+        "templates-use-public": true,
+        "invoke-injectable": true
+    }
 }

ng2-components/.markdownlintrc

@@ -0,0 +1,10 @@
+{
+  "MD032": false,
+  "MD004": false,
+  "MD024": false,
+  "MD009": false,
+  "MD013": false,
+  "MD036": false,
+  "MD033" : false,
+  "MD031" : false
+}

ng2-components/README.md

@@ -1,129 +1,171 @@
-# Alfresco Angular 2 Components
+# Alfresco Angular 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>
+<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
 
-## Base components
+<!-- toc -->
 
-- [Core library](ng2-alfresco-core/README.md)
-- [alfresco-viewer](ng2-alfresco-viewer/README.md)
-- [adf-accordion-group](ng2-alfresco-core/README.md)
+- [Core](#core)
+  * [Components](#components)
+  * [Directives](#directives)
+- [Content service](#content-service)
+  * [Components](#components-1)
+- [Business service](#business-service)
+  * [components](#components)
+- [Services](#services)
+
+<!-- tocstop -->
+
+<!-- markdown-toc end -->
+
+## Core
+
+### Components
+
+<!-- CORE START-->
+- [adf-card-view](ng2-alfresco-core/README.md)
+- [adf-card-view-textitem](ng2-alfresco-core/README.md)
+- [adf-card-view-mapitem](ng2-alfresco-core/README.md)
+- [adf-card-view-item-dispatcher](ng2-alfresco-core/README.md)
+- [adf-card-view-dateitem](ng2-alfresco-core/README.md)
+- [adf-context-menu-holder](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
+- [adf-accordion-group](ng2-alfresco-core/README.md)
+- [adf-toolbar](ng2-alfresco-core/README.md)<!-- CORE END-->
+<!-- CORE END-->
 
-## ECM components
+### Directives
 
-- [alfresco-webscript-get](ng2-alfresco-webscript/README.md)
-- [alfresco-pagination](ng2-alfresco-datatable/README.md)
-- [alfresco-datatable](ng2-alfresco-datatable/README.md)
-- [alfresco-login](ng2-alfresco-login/README.md)
-- [alfresco-tag-node-actions-list](ng2-alfresco-tag/README.md)
-- [alfresco-tag-list](ng2-alfresco-tag/README.md)
-- [alfresco-tag-node-list](ng2-alfresco-tag/README.md)
-- [alfresco-document-list](ng2-alfresco-documentlist/README.md)
-- [alfresco-document-menu-action](ng2-alfresco-documentlist/README.md)
-- [alfresco-document-list-breadcrumb](ng2-alfresco-documentlist/README.md)
+<!-- CORE DIRECTIVE START-->
+- [adf-card-view-content-proxy](ng2-alfresco-core/README.md)
+- [adf-context-menu](ng2-alfresco-core/README.md)
+- [adf-mdl-textfield](ng2-alfresco-core/README.md)
+- [adf-mdl-menu](ng2-alfresco-core/README.md)
+- [adf-mdl-button](ng2-alfresco-core/README.md)
+- [adf-upload](ng2-alfresco-core/README.md)<!-- CORE DIRECTIVE END-->
+
+## Content service
+
+### Components
+
+<!-- CONTENT START-->
+- [adf-viewer](ng2-alfresco-viewer/README.md)
+- [adf-userinfo](ng2-alfresco-userinfo/README.md)
+- [adf-upload-drag-area](ng2-alfresco-upload/README.md)
+- [adf-file-uploading-dialog](ng2-alfresco-upload/README.md)
+- [adf-upload-button](ng2-alfresco-upload/README.md)
+- [adf-file-uploading-list](ng2-alfresco-upload/README.md)
+- [adf-tag-node-list](ng2-alfresco-tag/README.md)
+- [adf-tag-list](ng2-alfresco-tag/README.md)
+- [adf-tag-node-actions-list](ng2-alfresco-tag/README.md)
+- [adf-search](ng2-alfresco-search/README.md)
+- [adf-search-control](ng2-alfresco-search/README.md)
+- [adf-search-autocomplete](ng2-alfresco-search/README.md)
 - [adf-rating](ng2-alfresco-social/README.md)
 - [adf-like](ng2-alfresco-social/README.md)
-- [alfresco-upload-drag-area](ng2-alfresco-upload/README.md)
-- [alfresco-upload-button](ng2-alfresco-upload/README.md)
-- [alfresco-file-uploading-list](ng2-alfresco-upload/README.md)
-- [alfresco-search](ng2-alfresco-search/README.md)
-- [alfresco-search-control](ng2-alfresco-search/README.md)
-- [alfresco-search-autocomplete](ng2-alfresco-search/README.md)
-- [ng2-alfresco-userinfo](ng2-alfresco-userinfo/README.md)
+- [adf-login](ng2-alfresco-login/README.md)
+- [adf-pagination](ng2-alfresco-datatable/README.md)
+- [adf-empty-list](ng2-alfresco-datatable/README.md)
+- [adf-datatable](ng2-alfresco-datatable/README.md)
+- [adf-datatable-cell](ng2-alfresco-datatable/README.md)
+- [adf-webscript-get](ng2-alfresco-webscript/README.md)
+- [adf-breadcrumb](ng2-alfresco-documentlist/README.md)
+- [adf-document-menu-action](ng2-alfresco-documentlist/README.md)
+- [adf-document-list](ng2-alfresco-documentlist/README.md)<!-- CONTENT END-->
+<!-- CONTENT END-->
 
-## BPM components
+<!-- CONTENT DIRECTIVE START--><!-- CONTENT DIRECTIVE END-->
 
-- [activiti-analytics](ng2-activiti-analytics/README.md)
-- [activiti-analytics-generator](ng2-activiti-analytics/README.md)
-- [activiti-form](ng2-activiti-form/README.md)
-- [activiti-content](ng2-activiti-form/README.md)
-- [activiti-start-form](ng2-activiti-form/README.md)
-- [activiti-process-instance-filters](ng2-activiti-processlist/README.md)
-- [activiti-process-instance-list](ng2-activiti-processlist/README.md)
-- [activiti-process-instance-details](ng2-activiti-processlist/README.md)
-- [activiti-start-process](ng2-activiti-processlist/README.md)
-- [activiti-apps](ng2-activiti-tasklist/README.md)
-- [activiti-tasklist](ng2-activiti-tasklist/README.md)
-- [activiti-checklist](ng2-activiti-tasklist/README.md)
+## Business service
+
+### components
+
+<!-- BUSINESS START-->
+- [adf-diagram](ng2-activiti-diagrams/README.md)
+- [adf-diagram-sequence-flow](ng2-activiti-diagrams/README.md)
+- [adf-start-process](ng2-activiti-processlist/README.md)
+- [adf-process-instance-list](ng2-activiti-processlist/README.md)
+- [adf-process-instance-variables](ng2-activiti-processlist/README.md)
+- [adf-process-instance-tasks](ng2-activiti-processlist/README.md)
+- [adf-process-instance-header](ng2-activiti-processlist/README.md)
+- [adf-process-instance-details](ng2-activiti-processlist/README.md)
+- [adf-process-instance-filters](ng2-activiti-processlist/README.md)
+- [adf-process-instance-comments](ng2-activiti-processlist/README.md)
+- [adf-process-attachment-list](ng2-activiti-processlist/README.md)
+- [adf-create-process-attachment](ng2-activiti-processlist/README.md)
+- [adf-tasklist](ng2-activiti-tasklist/README.md)
+- [adf-task-header](ng2-activiti-tasklist/README.md)
+- [adf-filters](ng2-activiti-tasklist/README.md)
+- [adf-task-details](ng2-activiti-tasklist/README.md)
 - [adf-task-attachment-list](ng2-activiti-tasklist/README.md)
-- [activiti-people](ng2-activiti-tasklist/README.md)
-- [activiti-comments](ng2-activiti-tasklist/README.md)
-- [activiti-task-header](ng2-activiti-tasklist/README.md)
-- [activiti-task-details](ng2-activiti-tasklist/README.md)
-- [activiti-start-task](ng2-activiti-tasklist/README.md)
-- [activiti-filters](ng2-activiti-tasklist/README.md)
-- [activiti-people-search](ng2-activiti-tasklist/README.md)
-- [activiti-process-instance-header](ng2-activiti-processlist/README.md)
-- [activiti-process-instance-tasks](ng2-activiti-processlist/README.md)
-- [activiti-process-instance-comments](ng2-activiti-processlist/README.md)
-- [activiti-process-instance-variables](ng2-activiti-processlist/README.md)
-- [activiti-diagram](ng2-activiti-diagrams/README.md)
+- [adf-start-task](ng2-activiti-tasklist/README.md)
+- [adf-people](ng2-activiti-tasklist/README.md)
+- [adf-people-search](ng2-activiti-tasklist/README.md)
+- [adf-people-list](ng2-activiti-tasklist/README.md)
+- [adf-create-task-attachment](ng2-activiti-tasklist/README.md)
+- [adf-comments](ng2-activiti-tasklist/README.md)
+- [adf-comment-list](ng2-activiti-tasklist/README.md)
+- [adf-checklist](ng2-activiti-tasklist/README.md)
+- [adf-apps](ng2-activiti-tasklist/README.md)
+- [adf-analytics](ng2-activiti-analytics/README.md)
+- [adf-analytics-report-parameters](ng2-activiti-analytics/README.md)
+- [adf-analytics-report-list](ng2-activiti-analytics/README.md)
+- [adf-analytics-report-heat-map](ng2-activiti-analytics/README.md)
+- [adf-analytics-generator](ng2-activiti-analytics/README.md)
+- [adf-form-field](ng2-activiti-form/README.md)
+- [adf-start-form](ng2-activiti-form/README.md)
+- [adf-form](ng2-activiti-form/README.md)
+- [adf-content](ng2-activiti-form/README.md)
+- [adf-form-list](ng2-activiti-form/README.md)<!-- BUSINESS END-->
+<!-- BUSINESS END-->
+
+<!-- BUSINESS DIRECTIVE START--><!-- BUSINESS DIRECTIVE END-->
+
+## Services
+
+<!-- SERVICES START-->
+- [DiagramColorService](ng2-activiti-diagrams/src/services/diagram-color.service.ts)
+- [DiagramsService](ng2-activiti-diagrams/src/services/diagrams.service.ts)
+- [RaphaelService](ng2-activiti-diagrams/src/components/raphael/raphael.service.ts)
+- [ContextMenuService](ng2-alfresco-core/src/components/context-menu/context-menu.service.ts)
+- [EcmUserService](ng2-alfresco-userinfo/src/services/ecm-user.service.ts)
+- [BpmUserService](ng2-alfresco-userinfo/src/services/bpm-user.service.ts)
+- [RenderingQueueService](ng2-alfresco-viewer/src/services/rendering-queue.services.ts)
+- [TagService](ng2-alfresco-tag/src/services/tag.service.ts)
+- [SearchService](ng2-alfresco-search/src/services/search.service.ts)
+- [RatingService](ng2-alfresco-social/src/services/rating.service.ts)
+- [ProcessService](ng2-activiti-processlist/src/services/process.service.ts)
+- [ProcessUploadService](ng2-activiti-processlist/src/services/process-upload.service.ts)
+- [TaskListService](ng2-activiti-tasklist/src/services/tasklist.service.ts)
+- [PeopleService](ng2-activiti-tasklist/src/services/people.service.ts)
+- [ProcessUploadService](ng2-activiti-tasklist/src/services/process-upload.service.ts)
+- [AnalyticsService](ng2-activiti-analytics/src/services/analytics.service.ts)
+- [WidgetVisibilityService](ng2-activiti-form/src/services/widget-visibility.service.ts)
+- [FormService](ng2-activiti-form/src/services/form.service.ts)
+- [NodeService](ng2-activiti-form/src/services/node.service.ts)
+- [FormRenderingService](ng2-activiti-form/src/services/form-rendering.service.ts)
+- [EcmModelService](ng2-activiti-form/src/services/ecm-model.service.ts)
+- [ActivitiContentService](ng2-activiti-form/src/services/activiti-content-service.ts)
+- [ActivitiAlfrescoContentService](ng2-activiti-form/src/services/activiti-alfresco.service.ts)
+- [FolderActionsService](ng2-alfresco-documentlist/src/services/folder-actions.service.ts)
+- [DocumentListService](ng2-alfresco-documentlist/src/services/document-list.service.ts)
+- [DocumentActionsService](ng2-alfresco-documentlist/src/services/document-actions.service.ts)
+- [CardViewUpdateService](ng2-alfresco-core/src/services/card-view-update.service.ts)
+- [UploadService](ng2-alfresco-core/src/services/upload.service.ts)
+- [UserPreferencesService](ng2-alfresco-core/src/services/user-preferences.service.ts)
+- [TranslationService](ng2-alfresco-core/src/services/translation.service.ts)
+- [ThumbnailService](ng2-alfresco-core/src/services/thumbnail.service.ts)
+- [StorageService](ng2-alfresco-core/src/services/storage.service.ts)
+- [RenditionsService](ng2-alfresco-core/src/services/renditions.service.ts)
+- [NotificationService](ng2-alfresco-core/src/services/notification.service.ts)
+- [LogService](ng2-alfresco-core/src/services/log.service.ts)
+- [CookieService](ng2-alfresco-core/src/services/cookie.service.ts)
+- [ContentService](ng2-alfresco-core/src/services/content.service.ts)
+- [AuthenticationService](ng2-alfresco-core/src/services/authentication.service.ts)
+- [AppConfigService](ng2-alfresco-core/src/services/app-config.service.ts)
+- [AlfrescoSettingsService](ng2-alfresco-core/src/services/alfresco-settings.service.ts)
+- [AlfrescoContentService](ng2-alfresco-core/src/services/alfresco-content.service.ts)
+- [AlfrescoApiService](ng2-alfresco-core/src/services/alfresco-api.service.ts)<!-- SERVICES END-->
 
 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/](http://devproducts.alfresco.com/)

ng2-components/config/custom-loaders/generateListComponent.js

@@ -0,0 +1,153 @@
+var path = require('path');
+var fs = require('fs');
+
+var erase = true;
+var readmeContent = null;
+var readmeFilePath = '';
+
+function isFileEmpty(fileContents) {
+    return fileContents.toString('utf8').trim() === '';
+}
+
+function writeFile(file, newValue) {
+    fs.writeFileSync(file, newValue, 'utf-8');
+}
+
+function readFile(file) {
+    return fs.readFileSync(file, 'utf8');
+}
+
+function eraseContentList() {
+    if (erase) {
+        erase = false;
+
+        var businessRegex = /(?:<!-- BUSINESS START-->)([\s\S]*?)(?:<!-- BUSINESS END-->)/;
+        var contentRegex = /(?:<!-- CONTENT START-->)([\s\S]*?)(?:<!-- CONTENT END-->)/;
+        var coreRegex = /(?:<!-- CORE START-->)([\s\S]*?)(?:<!-- CORE END-->)/;
+        var businessRegexDirective = /(?:<!-- BUSINESS DIRECTIVE START-->)([\s\S]*?)(?:<!-- BUSINESS DIRECTIVE END-->)/;
+        var contentRegexDirective = /(?:<!-- CONTENT DIRECTIVE START-->)([\s\S]*?)(?:<!-- CONTENT DIRECTIVE END-->)/;
+        var coreRegexDirective = /(?:<!-- CORE DIRECTIVE START-->)([\s\S]*?)(?:<!-- CORE DIRECTIVE END-->)/;
+        var servicessRegex = /(?:<!-- SERVICES START-->)([\s\S]*?)(?:<!-- SERVICES END-->)/;
+
+
+        readmeContent = readmeContent.replace(businessRegex, '<!-- BUSINESS START--><!-- BUSINESS END-->');
+        readmeContent = readmeContent.replace(contentRegex, '<!-- CONTENT START--><!-- CONTENT END-->');
+        readmeContent = readmeContent.replace(coreRegex, '<!-- CORE START--><!-- CORE END-->');
+
+        readmeContent = readmeContent.replace(businessRegexDirective, '<!-- BUSINESS DIRECTIVE START--><!-- BUSINESS DIRECTIVE END-->');
+        readmeContent = readmeContent.replace(contentRegexDirective, '<!-- CONTENT DIRECTIVE START--><!-- CONTENT DIRECTIVE END-->');
+        readmeContent = readmeContent.replace(coreRegexDirective, '<!-- CORE DIRECTIVE START--><!-- CORE DIRECTIVE END-->');
+
+        readmeContent = readmeContent.replace(servicessRegex, '<!-- SERVICES START--><!-- SERVICES END-->');
+
+        writeFile(readmeFilePath, readmeContent)
+    }
+}
+
+function generateListComponent(currentFileContent, webpackInstance) {
+    if (!isFileEmpty(currentFileContent)) {
+
+        var componentReg = /(@Component)(\s?)\((\s?){(\s?)((.|\n)*)}(\s?)\)/gm;
+        var componentSection = componentReg.exec(currentFileContent);
+
+        if (componentSection) {
+
+            var selectorReg = /(adf)([a-zA-Z]|-)+((?!,)|(?! ))/g;
+            var selector = selectorReg.exec(componentSection[0]);
+
+                if (selector) {
+                    var removeRoot = webpackInstance.resourcePath.substr(webpackInstance.resourcePath.indexOf('/ng2-components') + 16, webpackInstance.resourcePath.length);
+                    var url = removeRoot.substr(0, removeRoot.indexOf('src')) + 'README.md';
+
+
+                    var link = '- [' + selector[0] + '](' + url + ')';
+
+                    if (webpackInstance.resourcePath.match('ng2-alfresco-core')) {
+                        readmeContent = readmeContent.replace('<!-- CORE START-->', '<!-- CORE START-->\n' + link);
+                    } else if (webpackInstance.resourcePath.match('ng2-alfresco-')) {
+                        readmeContent = readmeContent.replace('<!-- CONTENT START-->', '<!-- CONTENT START-->\n' + link);
+                    } else if (webpackInstance.resourcePath.match('ng2-activiti-')) {
+                        readmeContent = readmeContent.replace('<!-- BUSINESS START-->', '<!-- BUSINESS START-->\n' + link);
+                    }
+                }
+            }
+
+
+
+        var directiveReg = /(@Directive)(\s?)\((\s?){(\s?)((.|\n)*)}(\s?)\)/gm;
+        var directiveSection = directiveReg.exec(currentFileContent);
+
+        if (directiveSection) {
+            var selectorReg = /(adf)([a-zA-Z]|-)+((?!,)|(?! ))/g;
+            var selector = selectorReg.exec(directiveSection[0]);
+
+            if (selector) {
+                var selector = selector[0].replace("selector: '[", "").replace("']", '').replace("]", '').replace("selector: '", "").replace("'", '');
+                var removeRoot = webpackInstance.resourcePath.substr(webpackInstance.resourcePath.indexOf('/ng2-components') + 16, webpackInstance.resourcePath.length);
+                var url = removeRoot.substr(0, removeRoot.indexOf('src')) + 'README.md';
+
+                var link = '- [' + selector + '](' + url + ')';
+
+                if (webpackInstance.resourcePath.match('ng2-alfresco-core')) {
+                    readmeContent = readmeContent.replace('<!-- CORE DIRECTIVE START-->', '<!-- CORE DIRECTIVE START-->\n' + link);
+                }
+                //else if (webpackInstance.resourcePath.match('ng2-alfresco-')) {
+                //    readmeContent = readmeContent.replace('<!-- CONTENT DIRECTIVE START-->', '<!-- CONTENT DIRECTIVE START-->\n' + link);
+                //}
+                //else if (webpackInstance.resourcePath.match('ng2-activiti-')) {
+                //    readmeContent = readmeContent.replace('<!-- BUSINESS DIRECTIVE START-->', '<!-- BUSINESS DIRECTIVE START-->\n' + link);
+                //}
+            }
+        }
+
+        writeFile(readmeFilePath, readmeContent);
+
+        return true;
+    }
+}
+
+function generateListservices(currentFileContent, webpackInstance) {
+    if (!isFileEmpty(currentFileContent)) {
+
+        var servicesReg = /(@Injectable\(\))(([a-zA-Z ]|\n)*)/gm;
+        var servicesSection = servicesReg.exec(currentFileContent);
+
+        if (servicesSection) {
+
+            var selectorReg = /([a-zA-Z])+Service/g;
+            var selector = selectorReg.exec(servicesSection[0]);
+
+            if (selector) {
+                var url = webpackInstance.resourcePath.substr(webpackInstance.resourcePath.indexOf('/ng2-components') + 16, webpackInstance.resourcePath.length);
+
+                var link = '- [' + selector[0] + '](' + url + ')';
+
+                readmeContent = readmeContent.replace('<!-- SERVICES START-->', '<!-- SERVICES START-->\n' + link);
+
+            }
+        }
+
+        writeFile(readmeFilePath, readmeContent);
+
+        return true;
+    }
+}
+
+module.exports = function (input, map) {
+    this.cacheable && this.cacheable();
+    var callback = this.async();
+
+    readmeFilePath = path.resolve(__dirname, '../../README.md');
+
+    if (!readmeContent) {
+        readmeContent = readFile(readmeFilePath);
+    }
+
+    if (readmeContent) {
+        eraseContentList();
+        generateListComponent(input, this);
+        generateListservices(input, this);
+    }
+    callback(null, input, map);
+}
+

ng2-components/config/karma.conf-all.js

@@ -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'},

ng2-components/config/webpack.build.js

@@ -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]',

ng2-components/config/webpack.common.js

@@ -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: [
@@ -50,19 +80,16 @@ module.exports = {
                 test: /\.ts$/,
                 loader: 'tslint-loader',
                 options: {
+                    configFile : helpers.root('tslint.json'),
                     emitErrors: true,
-                    configFile: path.resolve(__dirname, './assets/tslint.json')
+                    failOnHint: true,
+                    fix: 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 +99,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 +123,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 +143,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 +185,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: {

ng2-components/config/webpack.coverage.js

@@ -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/
+                    ]
+                }
+            ]
+        }
+    });
+};

ng2-components/config/webpack.doc.js

@@ -0,0 +1,23 @@
+const helpers = require('./helpers');
+const webpackMerge = require('webpack-merge');
+const webpackBuild = require('./webpack.build');
+const path = require('path');
+
+module.exports = webpackMerge(webpackBuild, {
+
+    resolveLoader: {
+        alias: {
+            "generate-list-component-loader": path.resolve(__dirname, "./custom-loaders/generateListComponent")
+        }
+    },
+
+    module: {
+        rules: [
+            {
+                test: /\.ts/,
+                loader: 'generate-list-component-loader',
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            }
+        ]
+    }
+});

ng2-components/config/webpack.test.js

@@ -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
     }
-};
+});

ng2-components/ng2-activiti-analytics/.gitignore

@@ -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

ng2-components/ng2-activiti-analytics/.npmignore

@@ -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

ng2-components/ng2-activiti-analytics/README.md

@@ -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>
+<adf-analytics 
+    [appId]="1001" 
+    [reportId]="2006">
+</adf-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>
+<adf-analytics 
+    [appId]="appId" 
+    [reportId]="reportId" 
+    [hideParameters]="true">
+</adf-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>
+<adf-analytics-generator 
+    [reportId]="reportId" 
+    [reportParamQuery]="reportParamQuery">
+</adf-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)