Reset the margin for the people component (#2148)

solves issues with "Cannot find name 'require'." errors when linking to Angular CLI.

.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,22 +1,159 @@
-### 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, see  **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 to redirect all 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/ 
+
+Open the `config/webpack.common.js` file, 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 different configuration of webpack the `devServer` properties could be in other webpack files. Search in your configuration files
+
+- If you are running the App, Content Service or Process Service on different ports change the ports accordingly in 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 an app running on http://localhost:3000/ and we want to 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 project's `package.json`, call it `proxy.conf.json` and add the following 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 in 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 should change the address of the ECM and BPM. In the demo app you can do that by clicking on the top right settings menu and change the bottom left options: *ECM host* and *BPM host*.
+
+This configuration assumes a few things:
+
+* Port mapping:
+  * nginx entry point: 0.0.0.0:8888
+  * Demo Shell: localhost:3000
+  * Alfresco: localhost:8080
+  * Activiti: localhost: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, information 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 to completely enable CORS calls on your Content Service and Process Service, please 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
+Or - Manually update the web.xml file
 
 Modify *$ALF_INSTALL_DIR/tomcat/webapps/alfresco/WEB-INF/web.xml* and uncomment the following section and update 
-`cors.allowOrigin` to `http://localhost:3000`:
+`cors.allowOrigin` to `http://localhost:3000` :
 
 ```
 <filter>

BROWSER-SUPPORT.md

@@ -1,7 +1,7 @@
 # Browser Support
 Browser support and polyfills guide.
 
-Browser compatibility and support depends on targeted browsers and 3rd party libraries. ADF framework is based on the following libraries and components:
+Browser compatibility and support depends on targeted browsers and 3rd party libraries. ADF is based on the following libraries and components:
 
 - Angular 2 (all ADF components)
 - Material Design Lite (all ADF components)

CONTRIBUTING.md

@@ -0,0 +1,49 @@
+# Contributing to ADF 
+
+## Submitting a Pull Request (PR)
+
+Before you submit please follow the steps below: 
+
+* Search in  [GitHub PR](https://github.com/Alfresco/alfresco-ng2-components/pulls) for an open or closed PR
+  that could solve or already solves 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 tests and make sure they are green. Please don't comment out or exclude the already existing tests
+* 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 tests.
+  * 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, see [here](https://help.github.com/articles/syncing-a-fork/)
+
+## Code style
+
+The code style in the ADF code follows the [Angular style guide](https://angular.io/guide/styleguide) plus some internal rules.
+You don’t have to worry too much about those rules because they are automatically checked by tslint/codelyzer/adf-rules.
+If your code is not compliant to one of these rules you will receive an error when you build the project with some help on how to fix it.
+The ADF-Rules :
+* File name component/directive cannot start with Alfresco/Activiti/adf - this rule is to help developers find files easily
+* Class names cannot start with Alfresco/Activiti/adf for the same reason as above
+* scss is mandatory and the classes have to have the adf- prefix

INTRODUCTION.md

@@ -18,7 +18,7 @@ However, there are use-cases that Share does not fit very well, such as:
 This is where this application development framework comes into play, it can be used to create exactly the user interface 
 (i.e. web client) that the requirements demand.  
  
-The framework consists of a number of components that can be combined together to form a customized content management application.
+The framework consists of several components that can be combined to form a customized content management application.
 Here is a list of some of the available web components:
 
 - [Core library](ng2-components/ng2-alfresco-core/README.md)
@@ -36,6 +36,6 @@ An architecture overview looks like this:
   <img title="alfresco-ng2-components-architecture" alt='alfresco' src='assets/alfresco-app-dev-framework-architecture.png'></img>
 </p>
 
-Here we can also see that there is an Alfresco JavaScript framework in use that wraps the Alfresco REST API. To make things easier for the client developer.
+Here we can also see that there is an Alfresco JavaScript framework in use that wraps the Alfresco REST API, to make things easier for the client developer.
 
 

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,18 +1,11 @@
 
-<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 of ADF components.
 
 ## Installing
 
-To correctly use this demo check that on your machine is running [Node](https://nodejs.org/en/) version 5.x.x or higher.
+To correctly use this demo check that on your machine you have [Node](https://nodejs.org/en/) version 5.x.x or higher.
 
 ```sh
 git clone https://github.com/Alfresco/alfresco-ng2-components.git
@@ -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 the application started, we have 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
@@ -42,59 +82,20 @@ npm run start:dist
 ```
 
 This command builds project in `production` mode.
-All output is placed to `dist` folder and can be served your preferred web server.
+All output is placed to `dist` folder and can be served to your preferred web server.
 You should need no additional files outside the `dist` folder.
 
 ### Important notes
 
 By default demo application is configured to use [wsrv](https://www.npmjs.com/package/wsrv) tool (lightweight web server)
-to serve production build output. It will be running at `0.0.0.0` address with port `3000` and allow you accessing your application
-via network. However you can use any web server of your choice in production.
+to serve production build output. It will be running at `0.0.0.0` address with port `3000` and allow you to access your application
+via network. However, you can use any web server of your choice in production.
 
 ## Development branch build
 
-If you want to run the demo shell with the latest change from the development branch, use the following command from the /script folder:
+If you want to run the demo shell with the latest changes from the development branch, use the following command from the /script folder:
 
 ```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.css

@@ -1,35 +1,7 @@
-@media screen and (max-width: 1024px) {
-    .mdl-layout__header {
-        display: block;
-    }
-}
-
-@media screen and (max-width: 1024px) {
-    .mdl-layout__header {
-        display: block;
-    }
-}
-
-.mdl-layout-title {
-    font-size: 17px;
-}
-
 .user-profile {
     margin-right: 10px;
 }
 
-.mdl-button-padding {
-    padding-left: 20px;
-}
-
-.hide {
-    display: none !important;
-}
-
-.mdl-navigation__link {
-    cursor: pointer;
-}
-
-.mdl-navigation__link label {
-    cursor: pointer;
+.app-menu--spacer {
+    flex: 1 1 auto;
 }

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

@@ -1,71 +1,74 @@
-<!-- Always shows a header, even in smaller screens. -->
-<div mdl 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">
+<md-toolbar color="primary" *ngIf="!isAPageWithHeaderBar()">
+    <ng2-alfresco-userinfo
+        class="user-profile"
+        [menuOpenType]="left">
+    </ng2-alfresco-userinfo>
 
-            <!-- User Info -->
-            <ng2-alfresco-userinfo class="user-profile" [menuOpenType]="left">
-            </ng2-alfresco-userinfo>
+    <span>ADF Demo Application</span>
 
-            <!-- Title -->
-            <span class="mdl-layout-title">Demo Application</span>
-            <!-- Add spacer, to align navigation to the right -->
-            <div class="mdl-layout-spacer"></div>
+    <div class="app-menu--spacer"></div>
 
-            <!-- Search bar -->
-            <search-bar (expand)="onToggleSearch($event)"></search-bar>
+    <search-bar (expand)="onToggleSearch($event)"></search-bar>
 
-            <!-- Navigation. We hide it in small screens. -->
-            <nav class="mdl-navigation mdl-layout--large-screen-only">
-                <a class="mdl-navigation__link" data-automation-id="home" href="" routerLink="/">Home</a>
-                <a class="mdl-navigation__link" data-automation-id="files" href="" routerLink="/files">DocumentList</a>
-                <a class="mdl-navigation__link" data-automation-id="activiti" href="" routerLink="/activiti">Process Services</a>
-                <a class="mdl-navigation__link" data-automation-id="login" href="" routerLink="/login">Login</a>
-                <a class="mdl-navigation__link" data-automation-id="settings" href="" routerLink="/settings">Settings</a>
-            </nav>
+    <a md-button data-automation-id="home" href="" routerLink="/">Home</a>
+    <a md-button data-automation-id="files" href="" routerLink="/files">Content Services</a>
+    <a md-button data-automation-id="activiti" href="" routerLink="/activiti">Process Services</a>
+    <a md-button data-automation-id="login" href="" routerLink="/login">Login</a>
 
-        </div>
-    </header>
+    <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>
 
-    <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">
-        <div class="page-content">
-            <router-outlet></router-outlet>
-        </div>
-    </main>
-</div>
+    <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>
+</md-toolbar>
+
+<router-outlet></router-outlet>

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

@@ -17,29 +17,30 @@
 
 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;
 
 @Component({
-    selector: 'alfresco-app',
+    selector: 'adf-app',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
 })
 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() {

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,36 @@ 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() {
+
+        if (this.authService.isEcmLoggedIn()) {
+            this.discovery.getEcmProductInfo().subscribe((ecmVers) => {
+                this.ecmVersion = ecmVers;
+            });
+        }
+
+        if (this.authService.isBpmLoggedIn()) {
+            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 +66,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

@@ -12,10 +12,6 @@
     padding: 10px 10px 10px 10px;
 }
 
-.list-column {
-    width: 320px;
-}
-
 .mdl-layout__header {
     z-index: 1;
 }
@@ -24,3 +20,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" *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,20 @@
                             (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>
+                        <md-card>
+                            <md-card-content>
+                                <activiti-task-attachments
+                                    [taskId]="currentTaskId">
+                                </activiti-task-attachments>
+                            </md-card-content>
+                        </md-card>
+                    </div>
+                    <div class="mdl-cell mdl-cell--10-col task-column mdl-shadow--2dp" *ngIf="isStartTaskMode()">
+                         <adf-start-task
+                                [appId]="appId"
+                                (success)="onStartTaskSuccess($event)"
+                                (cancel)="onCancelStartTask()">
+                        </adf-start-task>
                     </div>
                 </div>
             </div>
@@ -101,6 +113,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)">
@@ -108,7 +121,7 @@
                                 </adf-accordion-group>
                             </adf-accordion>
                         </div>
-                        <div class="mdl-cell mdl-cell--3-col task-column list-column mdl-shadow--2dp" *ngIf="processFilter && !isStartProcessMode()">
+                        <div class="mdl-cell mdl-cell--3-col task-column mdl-shadow--2dp" *ngIf="processFilter && !isStartProcessMode()">
                             <activiti-process-instance-list
                                 *ngIf="processFilter?.hasFilter()" [appId]="processFilter.appId"
                                 [processDefinitionKey]="processFilter.filter.processDefinitionKey"
@@ -133,11 +146,24 @@
                             <activiti-process-instance-details
                                 [processInstanceId]="currentProcessInstanceId"
                                 (processCancelled)="processCancelled()"
+                                (showProcessDiagram)="onShowProcessDiagram($event)"
                                 (taskClick)="onProcessDetailsTaskClick($event)">
                             </activiti-process-instance-details>
+                            <hr>
+                            <md-card>
+                                <md-card-content>
+                                    <activiti-process-attachments
+                                        [processId]="currentProcessInstanceId">
+                                    </activiti-process-attachments>
+                                </md-card-content>
+                            </md-card>
                         </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>
+                            <adf-start-process 
+                                    [appId]="appId" 
+                                    (start)="onStartProcessInstance($event)"
+                                    (cancel)="onCancelProcessInstance()">
+                            </adf-start-process>
                         </div>
                     </div>
                 </div>
@@ -167,9 +193,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,97 +187,111 @@ export class ActivitiDemoComponent implements AfterViewInit {
         }
     }
 
-    onStartTaskSuccess(event: any) {
+    onStartTaskSuccess(event: any): void {
         this.activitifilter.selectFilterWithTask(event.id);
         this.currentTaskId = event.id;
     }
 
+    onCancelStartTask() {
+        this.currentTaskId = null;
+        this.reloadTaskFilters();
+    }
+
     onSuccessTaskList(event: FilterRepresentationModel) {
         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() {
+    onCancelProcessInstance() {
+        this.currentProcessInstanceId = null;
+        this.reloadProcessFilters();
+    }
+
+    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 +315,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 +335,31 @@ export class ActivitiDemoComponent implements AfterViewInit {
         this.currentTaskId = taskId;
     }
 
-    private resetProcessFilters() {
+    private resetProcessFilters(): void {
         this.processFilter = null;
     }
 
-    private reloadProcessFilters() {
-        this.activitiprocessfilter.selectFilter(null);
+    private resetTaskFilters(): void {
+        this.taskFilter = null;
     }
 
-    onRowClick(event) {
+    private reloadProcessFilters(): void {
+        this.activitiprocessfilter.selectFilter(this.activitiprocessfilter.getCurrentFilter());
+    }
+
+    private reloadTaskFilters(): void {
+        this.activitifilter.selectFilter(this.activitifilter.getCurrentFilter());
+    }
+
+    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,42 @@
 .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.document-list__create {
+    background: green !important;
+}
+
+adf-document-list >>> adf-datatable tr.document-list__disable {
+    background: red !important;
+}
+
+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;
+    width: 100%;
+    min-width: 200px;
+}
+
+

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

@@ -1,51 +1,96 @@
 <div class="container">
+    <div class="adf-demo-site-container-style" id="demo-container">
+        <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]="documentList.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 +102,109 @@
                 </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">
+                    icon="content_copy"
+                    target="folder"
+                    title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.COPY' | translate}}"
+                    permission="update"
+                    [disableWithNoPermission]="true"
+                    handler="copy">
                 </content-action>
                 <content-action
-                        target="folder"
-                        title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.CUSTOM' | translate}}"
-                        (execute)="myFolderAction1($event)">
+                    icon="redo"
+                    target="folder"
+                    title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.MOVE' | translate}}"
+                    permission="update"
+                    [disableWithNoPermission]="true"
+                    handler="move">
                 </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">
+                    icon="content_copy"
+                    target="document"
+                    title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.COPY' | translate}}"
+                    permission="update"
+                    [disableWithNoPermission]="true"
+                    handler="copy">
                 </content-action>
                 <content-action
-                        target="document"
-                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.CUSTOM' | translate}}"
-                        (execute)="myCustomAction1($event)">
+                    icon="redo"
+                    target="document"
+                    title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.MOVE' | translate}}"
+                    permission="update"
+                    [disableWithNoPermission]="true"
+                    handler="move">
                 </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>
 
+<p>Current folder ID: {{ documentList.currentFolderId }}</p>
+
+<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 +228,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 +241,7 @@
             [uploadFolders]="folderUpload"
             [versioning]="versioning"
             [disableWithNoPermission]="disableWithNoPermission"
-            (permissionEvent)="onUploadPermissionFailed($event)">
+            (permissionEvent)="handlePermissionError($event)">
         </alfresco-upload-button>
     </div>
     <div *ngIf="acceptedFilesTypeShow">
@@ -177,7 +255,7 @@
             [uploadFolders]="folderUpload"
             [versioning]="versioning"
             [disableWithNoPermission]="disableWithNoPermission"
-            (permissionEvent)="onUploadPermissionFailed($event)">
+            (permissionEvent)="handlePermissionError($event)">
         </alfresco-upload-button>
     </div>
     <section>
@@ -185,6 +263,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 +280,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 +297,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, PermissionsEnum, 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 = false;
+
+    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,12 @@ 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.uploadService.fileUploadComplete.debounceTime(300).subscribe(value => this.onFileUploadComplete(value));
+        this.contentService.folderCreated.subscribe(value => this.onFolderCreated(value));
 
-        this.uploadDragArea.onSuccess
-            .debounceTime(100)
-            .subscribe((event) => {
-                this.reload(event);
-            });
-    }
-
-    viewActivitiForm(event?: any) {
-        this.router.navigate(['/activiti/tasksnode', event.value.entry.id]);
+        // this.permissionsStyle.push(new PermissionStyleModel('document-list__create', PermissionsEnum.CREATE));
+        // this.permissionsStyle.push(new PermissionStyleModel('document-list__disable', PermissionsEnum.NOT_CREATE, false, true));
     }
 
     onNavigationError(err: any) {
@@ -150,39 +128,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,13 +12,19 @@
                 <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}}"
+                            placeholder="http(s)://host|ip:port(/path)">
                         <label class="mdl-textfield__label" for="ecmHost">ECM Host</label>
-                        <span class="mdl-textfield__error">ECM host is not valid!</span>
+                        <span class="mdl-textfield__error">ECM host is not valid! http(s)://host|ip:port(/path)</span>
                     </div>
                 </nav>
 
@@ -28,20 +34,29 @@
                 <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
+                            data-automation-id="bpmHost"
+                            class="mdl-textfield__input"
+                            type="text"
+                            (change)="onChangeBPMHost($event)"
+                            tabindex="2"
+                            pattern="^(http|https):\/\/.*[^/]$"
+                            id="bpmHost"
+                            value="{{bpmHost}}"
+                            placeholder="http(s)://host|ip:port(/path)">
                         <label class="mdl-textfield__label" for="bpmHost">BPM Host</label>
-                        <span class="mdl-textfield__error">BPM host is not valid!</span>
+                        <span class="mdl-textfield__error">BPM host is not valid! http(s)://host|ip:port(/path)</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,10 +4,31 @@ 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, {
 
-    devtool: 'cheap-module-eval-source-map',
+    devtool: 'cheap-module-source-map',
 
     output: {
         path: helpers.root('dist'),
@@ -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/index.html

@@ -50,7 +50,7 @@
 </head>
 <!-- 3. Display the application -->
 <body>
-<alfresco-app>
+<adf-app>
     <div id="loader-container" class="loader-container">
         <div class="loader-item">
             <div id="loader-spin" class="mdl-progress mdl-js-progress mdl-progress__indeterminate is-upgraded"
@@ -62,7 +62,7 @@
             <div id="loader-text" class="loader-text">Loading Demo Shell..</div>
         </div>
     </div>
-</alfresco-app>
+</adf-app>
 </body>
 </html>
 

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

@@ -10,16 +10,19 @@
         },
         "ACTIONS": {
             "FOLDER": {
-                "SYSTEM_1": "System folder action 1",
-                "CUSTOM": "Custom folder action",
+                "COPY": "Copy",
+                "MOVE": "Move",
                 "DELETE": "Delete"
             },
             "DOCUMENT": {
                 "DOWNLOAD": "Download",
-                "DELETE": "Delete",
-                "SYSTEM_2": "System document action 2",
-                "CUSTOM": "Custom action"
+                "COPY": "Copy",
+                "MOVE": "Move",
+                "DELETE": "Delete"
             }
         }
+    },
+    "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/]
+            }
+        ]
+    }
+});