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

* [ADF-907] Enable activiti form to react on value data changes

* [ADF-907] - Form reacts to data added in input]

* [ADF - 907] added mock json for form

* [ADF-907] added new event of the form to the event list

* [ADF - 907] Added return column to README

* [ADF - 907] Added return column to README

.editorconfig

@@ -10,7 +10,7 @@ end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true
 
-[*.json]
+[package.json]
 indent_style = space
 indent_size = 2
 

.gitignore

@@ -1,6 +1,5 @@
 *.log
 node_modules
-bundles
 workspace.xml
 .idea/
 dist/
@@ -16,7 +15,4 @@ src/environments/
 *.npmrc
 /demo-shell-ng2/ng2-components/
 .happypack/
-.history
-package-lock.*
-/ng2-components/ng2-alfresco-core/prebuilt-themes/
-.ng_pkg_build/
+.happypack/

.travis.yml

@@ -10,75 +10,34 @@ before_install:
 
 env:
   matrix:
-    - MODULE=core
-    - MODULE=insights
-    - MODULE=process-services
-    - MODULE=content-services
-    - MODULE=demo-shell
-    - MODULE=packaging
+    - MODULE=ng2-components-alfresco
+    - MODULE=ng2-components-activiti
+    - MODULE=ng2-demo-shell
 
 install:
-    - if ([ "$MODULE" != "demo-shell" ]); then
+    - if ([ "$MODULE" == "ng2-components-alfresco" -o  "$MODULE" == "ng2-components-activiti" ]); then
         if ([ "$TRAVIS_BRANCH" = "master" ]); then
             (./scripts/npm-build-all.sh  || exit 1;);
         else
-            (./scripts/npm-build-all.sh  -vjsapi alpha || exit 1;);
+            (./scripts/npm-build-all.sh  -gitjsapi development || exit 1;);
         fi
       fi
 
 script:
-    - if ([ "$MODULE" == "core" ]); then
-            (./scripts/npm-build-all.sh -si -sb -t "core*" || exit 1;);
+    - if ([ "$MODULE" == "ng2-components-activiti" ]); then
+            (./scripts/npm-build-all.sh -si -sb -t "ng2-activiti*" || exit 1;);
       fi
-
-    - if ([ "$MODULE" == "process-services" ]); then
-            (./scripts/npm-build-all.sh -si -sb -t "process-services" || exit 1;);
+    - if ([ "$MODULE" == "ng2-components-alfresco" ]); then
+            (./scripts/npm-build-all.sh -si -sb -t "ng2-alfresco*" || exit 1;);
       fi
-
-    - if ([ "$MODULE" == "insights" ]); then
-            (./scripts/npm-build-all.sh -si -sb -t "insights" || exit 1;);
-      fi
-
-    - if ([ "$MODULE" == "content-services" ]); then
-            (./scripts/npm-build-all.sh -si -sb -t "content-services" || exit 1;);
-      fi
-
-    - if ([ "$MODULE" == "packaging" ]); then
-            (cd lib && npm run new-build || exit 1;);
-      fi
-
-    - if ([ "$MODULE" == "demo-shell" ]); then
+    - if ([ "$MODULE" == "ng2-demo-shell" ]); then
        if ([ "$TRAVIS_BRANCH" = "master" ]); then
             (./scripts/start.sh -t -ss || exit 1;);
        else
-            (./scripts/start.sh -dev -t -ss -vjsapi alpha || exit 1;);
+            (./scripts/start.sh -dev -t -ss -gitjsapi development || exit 1;);
        fi
       fi
 
-# jobs:
-#   include:
-#     - stage: Publish alpha to NPM
-#       before_install: skip
-#       install: skip
-#       script: skip
-#       deploy:
-#         provider: script
-#         script: (./scripts/update-version.sh -v $(./scripts/next_version.sh)-$(git rev-parse HEAD) -vj $(npm view alfresco-js-api@alpha version) -gnu) && (./scripts/npm-publish.sh -r $NPM_REGISTRY_ADDRESS -token $NPM_REGISTRY_TOKEN -t alpha --sleep 20 || exit 1;);
-#         on:
-#           branch: development
-#         skip_cleanup: true
-#     - stage: Publish beta to NPM
-#       before_install: skip
-#       install: skip
-#       script: skip
-#       deploy:
-#         provider: script
-#         script: (./scripts/update-version.sh -v $TRAVIS_TAG -gnu) && (./scripts/npm-publish.sh -r $NPM_REGISTRY_ADDRESS -token $NPM_REGISTRY_TOKEN -t beta --sleep 20 || exit 1;);
-#         on:
-#           tags: true
-#         skip_cleanup: true
-
-
 # Send coverage data to codecov
 after_success:
   bash <(curl -s https://codecov.io/bash) -X gcov
@@ -87,5 +46,5 @@ cache:
   directories:
   - ./node_modules/material-design-lite
   - ./node_modules/material-design-icons
-  - demo-shell/node_modules
-  - lib/node_modules
+  - demo-shell-ng2/node_modules
+  - ng2-components/node_modules

.vscode/settings.json

@@ -9,18 +9,5 @@
         "**/.happypack": true
     },
     "editor.renderIndentGuides": true,
-    "tslint.configFile": "ng2-components/tslint.json",
-    "markdownlint.config": {
-        "MD032": false,
-        "MD004": false,
-        "MD024": false,
-        "MD009": false,
-        "MD013": false,
-        "MD036": false,
-        "MD033" : false,
-        "MD031" : false
-    },
-    "cSpell.words": [
-        "webscript"
-    ]
+    "tslint.configFile": "ng2-components/tslint.json"
 }

ALFRESCOCORS.md

@@ -4,7 +4,7 @@ The web client that we are building with the application development framework w
 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.
 
-If you are experiencing this kind of problem, see  **one of the following**:
+If you are experiencing this kind of problem you can follow  **one of the following**:
 
 1. [Configure Webpack Proxy](#configure-webpack-proxy) 
 2. [Configure angular-cli Proxy](#configure-angular-cli-proxy)
@@ -13,13 +13,13 @@ If you are experiencing this kind of problem, see  **one of the following**:
 
 # 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:
+If you are using a project created with the [Yeoman Generator](https://github.com/Alfresco/generator-ng2-alfresco-app) or the demo shell >=1.6.0 you have already out of the box in your `config/webpack.common.js` the following configuration. 
+Say we have an app running on http://localhost:3000/ and we want all calls redirect with the following strategy:
 
-* Content Service http://localhost:8080/  redirect to -> http://localhost:3000/ecm/ 
-* Process Service http://localhost:9999/  redirect to -> http://localhost:3000/bpm/ 
+* 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:
+Open the file `config/webpack.common.js`  find the `devServer`  section and  add the content:
 
 ```javascript
 devServer: {
@@ -55,18 +55,18 @@ devServer: {
 ```
 
 Notes:
-- With different configuration of webpack the `devServer` properties could be in other webpack files. Search in your configuration files
+- With differents configuration of webpack the `devServer` properties could be in other webpack files. Search in your configuration
 
-- If you are running the App, Content Service or Process Service on different ports change the ports accordingly in your local configuration.
+- If you are runnign the App, content service or process service on different ports change the ports accordingly your local configuration.
 For further details about how to configure a webpack proxy please refer to the [official documentation](https://webpack.js.org/configuration/dev-server/#devserver-proxy).
 
 # Configure angular-cli Proxy
-Say we have an app running on http://localhost:3000/ and we want to redirect all the calls with the following strategy:
+Say we have a app running on http://localhost:3000/ and we want redirect all the calls with the following strategy:
 
-* Content Service http://localhost:8080/  redirect to -> http://localhost:3000/ecm/ 
-* Process Service http://localhost:9999/  redirect to -> http://localhost:3000/bpm/ 
+* 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:
+Create a file next to projects `package.json` call it `proxy.conf.json` with the content:
 
 ```javascript
 {
@@ -93,7 +93,7 @@ Create a file next to project's `package.json`, call it `proxy.conf.json` and ad
 }
 ```
 
-Note if you are running the App, Content Service or Process Service on different ports change the ports accordingly in your local configuration.
+Note if you are running the App, content service or process service on different ports change the ports accordingly your local configuration.
 For further details about how to configure a webpack proxy please refer to the [official documentation](https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md).
 
 
@@ -104,7 +104,7 @@ For further details about how to configure a webpack proxy please refer to the [
 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
+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).
 
@@ -122,24 +122,24 @@ This will host Activiti, Alfresco and the app dev framework under the same origi
 * 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*.
+To make everything work, you have to change the address of the ECM and BPM. In the demo app you can do that clicking on the top right settings menu and change the bottom left options: *ECM host* and *BPM host*.
 
-This configuration assumes a few things:
+This configuration assumes few things:
 
 * Port mapping:
   * nginx entry point: 0.0.0.0:8888
-  * Demo Shell: localhost:3000
-  * Alfresco: localhost:8080
-  * Activiti: localhost:9999
+  * 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, information can be found [here](https://community.alfresco.com/community/application-development-framework/blog/2016/09/28/adf-development-set-up-with-nginx-proxy)
+If you want to know more on how to install and configure nginx to work with the Application Development Framework can be found [here](https://community.alfresco.com/community/application-development-framework/blog/2016/09/28/adf-development-set-up-with-nginx-proxy)
 
 
 # Enable CORS in CS and PS
 
-If you want to completely enable CORS calls on your Content Service and Process Service, please refer to the following Alfresco documents:
+If you want completely enable CORS call on your Content service and Process service, plese refer to the following alfresco documents:
 
 * [Enable Cross Origin Resource Sharing (CORS) in Alfresco Process Services](http://docs.alfresco.com/process-services1.6/topics/enabling-cors.html)
 
@@ -148,12 +148,12 @@ If you want to completely enable CORS calls on your Content Service and Process
 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 origin.
+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,33 +1,35 @@
 # Browser Support
-
 Browser support and polyfills guide.
 
-Browser compatibility and support depends on targeted browsers and 3rd party libraries. ADF is based on the following libraries and components:
+Browser compatibility and support depends on targeted browsers and 3rd party libraries. ADF framework is based on the following libraries and components:
 
-- Angular (all ADF components)
+- Angular 2 (all ADF components)
+- Material Design Lite (all ADF components)
 - Moment.js (many ADF components)
 - PDF.js (`ng2-alfresco-viewer` component)
 - Raphael.js (`ng2-alfresco-diagrams`, `ng2-alfresco-analytics`)
 - Chart.js (`ng2-alfresco-analytics`)
+- Material Design - Date and Time Picker (`ng2-activiti-form`, `ng2-alfresco-analytics`)
 
 ## Browser polyfills 
 
-### Angular
-
-Please refer to the [official guide](https://angular.io/docs/ts/latest/guide/browser-support.html) for Angular browser support. 
+### Angular 2
+Please refer to the [official guide](https://angular.io/docs/ts/latest/guide/browser-support.html) for Angular 2 browser support. 
 
 ADF (demo shell) imports by default the following set of recommended polyfills:
 
 - [core-js](https://www.npmjs.com/package/core-js) (ES6 standard support)
 
 ### 3rd party libraries
-
 Please refer to the following list of [popular polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills) for HTML5 cross-browser compatibility.
 
 ADF (demo shell) imports by default the following set of recommended polyfills:
 
 - [intl](https://www.npmjs.com/package/intl), Polyfill the ECMA-402 Intl API (except collation), **IE**/**Safari**
+- [dom4](https://github.com/WebReflection/dom4), A fully tested and covered polyfill for new DOM Level 4 entries, **IE**
+- [element.scrollintoviewifneeded-polyfill](https://www.npmjs.com/package/element.scrollintoviewifneeded-polyfill), simple JavaScript implementation of the non-standard WebKit method scrollIntoViewIfNeeded that can be called on DOM elements, **IE**/**Firefox**/**Safari**, required only to support **Material Design - Date and Time Picker** component
 - [pdfjs compatibility](https://www.npmjs.com/package/pdfjs-dist), Portable Document Format (PDF) library that is built with HTML5, **IE**
+- (dialog-polyfill)[https://www.npmjs.com/package/dialog-polyfill], Polyfill for the dialog element, **IE**/**Safari**/**Firefox**
 
 ## Example
 
@@ -50,4 +52,4 @@ ADF (demo shell) imports by default the following set of recommended polyfills:
 <link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
 ```
 
-For a complete code please refer to [demo shell](demo-shell/index.html) example.
+For a complete code please refer to [demo shell](demo-shell-ng2/index.html) example.

CONTRIBUTING.md

@@ -1,78 +0,0 @@
-# Contributing to ADF 
-
-- [Library Contents](#submitting-a-pull-request-pr)
-- [Code style](#code-style)
-- [Test guide](#test-guide)
-
-## 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. All the classes need to have the adf- prefix
-
-## Test guide
-In ADF we are encouraging the use of behavior-driven development (BDD)
-
-### General guidelines
-
-* Class selector in all the tests is not suggested. Use of the element ID is preferred
-* Any test case should test only one behavior
-* Use of the Angular [testBed](https://angular.io/guide/testing#testbed) is highly recommended
-
-### File name
-
-* The file name specification as to be the same of the component/service/pipe it test plus the .spec. suffix
-* The specification file has to be in the same folder of the component/service/pipe it test
-
-### Describer Name
-
-* The Main describer of the test should be the name of the class under test
-* The sub describe is used for grouping related behavior test. Do not over use it
-
-### Test Name
-
-Any test should follow the naming convetion:
-
-[Should] [ ***Expected Behavior** ] [when/after/before] [ ***State Under Test*** ].

INTRODUCTION.md

@@ -1,6 +1,6 @@
 # Introduction to the Alfresco Application Development Framework
 
-The Alfresco application development framework is based on the [Angular framework](https://angular.io/).
+The Alfresco application development framework is based on the [Angular 2 JavaScript library](https://angular.io/).
 The framework is provided by Alfresco to make it easy to build custom web applications that 
 should manage and view content in the [Alfresco Platform Repository](http://docs.alfresco.com/5.1/concepts/content-repo-about.html) in a custom way.
 
@@ -18,23 +18,24 @@ 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 several libraries that can be used to form a customized content management application. The available libraries are:
+The framework consists of a number of components that can be combined together to form a customized content management application.
+Here is a list of some of the available web components:
 
-- [Core](lib/core/README.md)
-- [Content Services](lib/content-services/README.md)
-- [Process Services](lib/process-services/README.md)
-- [Insights](lib/insights/README.md)
+- [Core library](ng2-components/ng2-alfresco-core/README.md)
+- [DataTable](ng2-components/ng2-alfresco-datatable/README.md)
+- [DocumentList](ng2-components/ng2-alfresco-documentlist/README.md)
+- [Viewer](ng2-components/ng2-alfresco-viewer/README.md)
+- [Login](ng2-components/ng2-alfresco-login/README.md)
+- [Upload](ng2-components/ng2-alfresco-upload/README.md)
 
-
-You can browse all the components at the
-[ADF Component Catalog](https://alfresco.github.io/adf-component-catalog/).
+You can browse all the components at this [page](http://devproducts.alfresco.com/).
 
 An architecture overview looks like this:
 
 <p align="center">
-  <img title="alfresco-angular-components-architecture" alt='alfresco' src='assets/alfresco-app-dev-framework-architecture.png'></img>
+  <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

@@ -1,12 +1,12 @@
 # Prerequisites for building and running apps with the Alfresco Application Development Framework
 
-The [Angular](https://angular.io/) based application development framework requires the following:
+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) 
-- [Download and install the process service](https://www.alfresco.com/products/bpm/alfresco-activiti/trial)
+- [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.
-- (If you use CS and PS together) Make sure your user has the same username and password in both system
+- (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.*

README.md

@@ -1,6 +1,5 @@
 # ALFRESCO ANGULAR COMPONENTS
 
-[![Codacy Badge](https://api.codacy.com/project/badge/Grade/d9eb873741da403bb3284778102372e7)](https://www.codacy.com/app/Alfresco/alfresco-ng2-components?utm_source=github.com&utm_medium=referral&utm_content=Alfresco/alfresco-ng2-components&utm_campaign=badger)
 [![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)
 
 <p>
@@ -31,20 +30,20 @@ necessary configuration, see this [page](PREREQUISITES.md).
 
 ## Components
 
-To view the sources of all components that you can use to build your custom Alfresco (Content Services or Process Services) client follow this link:
-[Components](/lib).
+To view the complete list of all the components that you can use to build your custom Alfresco (ECM,BPM) client follow this link:
+[Components](/ng2-components).
 
-You can browse all the components at the [ADF Component Catalog](https://alfresco.github.io/adf-component-catalog/).
+You can browse all the components at the following [page](http://devproducts.alfresco.com/).
 
 ## Demo Application
 
-A separate application showcasing integration of components can be found [here](https://github.com/Alfresco/alfresco-ng2-components/tree/master/demo-shell).
+A separate application showcasing integration of components can be found [here](https://github.com/Alfresco/alfresco-ng2-components/tree/master/demo-shell-ng2).
 
 You will find examples of basic interaction for both BPM and ECM sets of widgets.
 
 ## Yeoman generators
 
-To speed up the development of your Alfresco Angular application, or Alfresco Angular component, use one of the Yeoman generators. 
+To speed up the development of your Alfresco Angular 2 application, or Alfresco Angular 2 component, use one of the Yeoman generators. 
 
 These generators will create a full working project with all the right libraries and tools.
 
@@ -54,16 +53,16 @@ These generators will create a full working project with all the right libraries
 
 ### Generate an Alfresco web component starter project
 
-To generate your Alfresco Angular component you can use the following Yeoman generator:
+To generate your Alfresco Angular 2 component you can use the following Yeoman generator:
 
-- [Yeoman Generator Angular Alfresco component](https://github.com/Alfresco/generator-ng2-alfresco-component)
+- [Yeoman Generator Angular 2 Alfresco component](https://github.com/Alfresco/generator-ng2-alfresco-component)
 
 
 ### Generate an Alfresco web application starter project
 
-To generate your Alfresco Angular application you can use the following Yeoman generator:
+To generate your Alfresco Angular 2 application you can use the following Yeoman generator:
 
-- [Yeoman Generator Angular Alfresco application](https://github.com/Alfresco/generator-ng2-alfresco-app)
+- [Yeoman Generator Angular 2 Alfresco application](https://github.com/Alfresco/generator-ng2-alfresco-app)
 
 ## Amazon AWS Elastic Beanstalk fast deploy
 
@@ -86,6 +85,6 @@ All components are supported in the following browsers:
 |Edge       	   |13, 14     	    |
 |Internet Explorer |11     	        |
 
-* 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.    
+* 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    
 
-Please refer to the [Browser Support](BROWSER-SUPPORT.md) article for more details. 
+Please refer to [Browser Support](BROWSER-SUPPORT.md) article for more details. 

appveyor.yml

@@ -9,47 +9,33 @@ environment:
   nodejs_version: "8"
 
   matrix:
-  - COMPONENT_NAME: core
-  - COMPONENT_NAME: process-service
-  - COMPONENT_NAME: content-service
-  - COMPONENT_NAME: insights
-#  - COMPONENT_NAME: ng2-demo-shell
+  - COMPONENT_NAME: ng2-components-activiti
+  - COMPONENT_NAME: ng2-components-alfresco
+  - COMPONENT_NAME: ng2-demo-shell
 
 # Install scripts. (runs after repo cloning)
 install:
   # Get the latest stable version of Node.js or io.js
   - ps: Install-Product node $env:nodejs_version
   # install module
-  - if %COMPONENT_NAME% EQU process-service (
+  - if %COMPONENT_NAME% EQU ng2-components-activiti (
               if %APPVEYOR_REPO_BRANCH EQU master
-                (cd scripts && sh npm-build-all.sh -t "process-services"  || exit 1)
+                (cd scripts && sh npm-build-all.sh -t "ng2-activiti*"  || exit 1)
               else
-                (cd scripts && sh npm-build-all.sh -t "process-services" -vjsapi alpha|| exit 1)
+                (cd scripts && sh npm-build-all.sh -t "ng2-activiti*" -gitjsapi development|| exit 1)
     )
-  - if %COMPONENT_NAME% EQU content-service (
+  - if %COMPONENT_NAME% EQU ng2-components-alfresco (
               if %APPVEYOR_REPO_BRANCH EQU master
-                (cd scripts && sh npm-build-all.sh -t "content-services"  || exit 1)
+                (cd scripts && sh npm-build-all.sh -t "ng2-alfresco*"  || exit 1)
               else
-                (cd scripts && sh npm-build-all.sh -t "content-services" -vjsapi alpha|| exit 1)
+                (cd scripts && sh npm-build-all.sh -t "ng2-alfresco*" -gitjsapi development|| exit 1)
     )
-  - if %COMPONENT_NAME% EQU insights (
+  - if %COMPONENT_NAME% EQU ng2-demo-shell (
               if %APPVEYOR_REPO_BRANCH EQU master
-                (cd scripts && sh npm-build-all.sh -t "insights"  || exit 1)
+                (cd scripts && sh start.sh -t -ss || exit 1)
               else
-                (cd scripts && sh npm-build-all.sh -t "insights" -vjsapi alpha|| exit 1)
+                (cd scripts && sh start.sh -dev -t -ss -gitjsapi development|| exit 1)
     )
-   - if %COMPONENT_NAME% EQU core (
-              if %APPVEYOR_REPO_BRANCH EQU master
-                (cd scripts && sh npm-build-all.sh -t "core"  || exit 1)
-              else
-                (cd scripts && sh npm-build-all.sh -t "core" -vjsapi alpha|| exit 1)
-    )
-#  - if %COMPONENT_NAME% EQU ng2-demo-shell (
-#              if %APPVEYOR_REPO_BRANCH EQU master
-#                (cd scripts && sh start.sh -t -ss || exit 1)
-#              else
-#                (cd scripts && sh start.sh -dev -t -ss -vjsapi alpha || exit 1)
-#    )
 
 # Don't actually build.
 build: off

demo-shell-ng2/.ebextensions/deploy_npm.config

@@ -0,0 +1,18 @@
+files:
+  "/opt/elasticbeanstalk/hooks/appdeploy/pre/50npm.sh" :
+    mode: "000775"
+    owner: root
+    group: root
+    content: |
+      #!/bin/bash
+      function error_exit
+      {
+        eventHelper.py --msg "$1" --severity ERROR
+        exit $2
+      }
+
+      export HOME=/home/ec2-user
+      echo "export home"
+
+      sudo curl -sL https://rpm.nodesource.com/setup_6.x | sudo -E bash -
+      sudo yum install -y nodejs

demo-shell-ng2/.editorconfig

@@ -0,0 +1,19 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[package.json]
+indent_style = space
+indent_size = 2
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

demo-shell-ng2/.gitignore

@@ -0,0 +1,17 @@
+typings/
+node_modules/
+bower_components/
+ng2-components/
+app/**/*.js
+app/**/*.js.map
+app/**/*.d.ts
+
+!app/js/Polyline.js
+.idea
+versions.json
+dist/
+coverage/
+
+# docker files
+docker-compose.yml
+Dockerfile

demo-shell-ng2/README.md

@@ -0,0 +1,101 @@
+
+# ADF Demo Application
+
+Please note that this application is not an official product, but a testing and demo application to showcase complex interactions for ADF components.
+
+## Installing
+
+To correctly use this demo check that on your machine is running [Node](https://nodejs.org/en/) version 5.x.x or higher.
+
+```sh
+git clone https://github.com/Alfresco/alfresco-ng2-components.git
+cd alfresco-ng2-components/demo-shell-ng2/
+npm install
+```
+
+## Proxy settings and CORS
+
+To simplify development and reduce the time to get started the application features the following Proxy settings:
+
+- **http://localhost:3000/ecm** is mapped to **http://localhost:8080**
+- **http://localhost:3000/bpm** is mapped to **http://localhost:9999**
+
+The settings above address most common scenarios for running ACS on port 8080 and APS on port 9999 and allow you to skip the CORS configuration.
+
+If you would like to change default proxy settings, please edit the `config/webpack.common.js` file.
+
+## Application settings (server-side)
+
+All server-side application settings are stored in the `app.config-dev.json` and `app.config-prod.json` files. 
+By default the configuration files have the content similar to the following one:
+
+```json
+{
+    "ecmHost": "http://localhost:3000/ecm",
+    "bpmHost": "http://localhost:3000/bpm",
+    "application": {
+        "name": "Alfresco"
+    }
+}
+```
+
+You can add any additional settings to the application configuration file if needed.
+
+Configuration files are picked based on environment settings (see `app.module.ts` for more details).
+
+```ts
+let appConfigFile = 'app.config-dev.json';
+if (process.env.ENV === 'production') {
+    appConfigFile = 'app.config-prod.json';
+}
+
+@NgModule({
+    imports: [
+        ...
+        CoreModule.forRoot({
+            appConfigFile: appConfigFile
+        }),
+        ...
+    ]
+})
+```
+
+## Development build
+
+```sh
+npm start
+```
+
+This command compiles and starts the project in watch mode.
+Browser will automatically reload upon changes.
+Upon start you can navigate to `http://localhost:3000` with your preferred browser.
+
+### Important notes
+
+This script is recommended for development environment and not suited for headless servers and network access.
+
+## Production build
+
+```sh
+npm run build
+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.
+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.
+
+## 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:
+
+```sh
+./npm-clean.sh
+./start-linked.sh -install
+```

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

@@ -0,0 +1,7 @@
+{
+    "ecmHost": "http://localhost:3000/ecm",
+    "bpmHost": "http://localhost:3000/bpm",
+    "application": {
+        "name": "Alfresco"
+    }
+}

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

@@ -0,0 +1,7 @@
+{
+    "ecmHost": "http://localhost:3000/ecm",
+    "bpmHost": "http://localhost:3000/bpm",
+    "application": {
+        "name": "Alfresco"
+    }
+}

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

@@ -0,0 +1,35 @@
+@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;
+}

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

@@ -0,0 +1,73 @@
+<!-- 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">
+
+            <!-- User Info -->
+            <ng2-alfresco-userinfo class="user-profile" [menuOpenType]="left">
+            </ng2-alfresco-userinfo>
+
+            <!-- Title -->
+            <span class="mdl-layout-title">Demo Application</span>
+            <!-- Add spacer, to align navigation to the right -->
+            <div class="mdl-layout-spacer"></div>
+
+            <!-- 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="form" href="" routerLink="/form">Form</a>
+                <a class="mdl-navigation__link" data-automation-id="login" href="" routerLink="/login">Login</a>
+                <a class="mdl-navigation__link" data-automation-id="settings" href="" routerLink="/settings">Settings</a>
+            </nav>
+
+        </div>
+    </header>
+
+    <div class="mdl-layout__drawer">
+        <nav class="mdl-navigation">
+            <a class="mdl-navigation__link" (click)="onLogout($event)">
+                <label tabindex="0">Logout</label>
+            </a>
+        </nav>
+        <span class="mdl-layout-title">Languages</span>
+        <nav class="mdl-navigation">
+            <a class="mdl-navigation__link" (click)="changeLanguage('en')">
+                <span class="adf-flag-icon adf-flag-icon-gb"></span>
+                <label tabindex="0"> English</label>
+            </a>
+            <a class="mdl-navigation__link" (click)="changeLanguage('it')">
+                <span class="adf-flag-icon adf-flag-icon-it"></span>
+                <label tabindex="0"> Italian</label>
+            </a>
+            <a class="mdl-navigation__link" (click)="changeLanguage('ru')">
+                <span class="adf-flag-icon adf-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" (dragover)="onDragOverMainPage($event)"
+          (drop)="onDragOverMainPage($event)">
+        <div class="page-content">
+            <router-outlet></router-outlet>
+        </div>
+    </main>
+</div>

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

@@ -0,0 +1,108 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import {
+    AlfrescoTranslationService,
+    AlfrescoAuthenticationService,
+    AlfrescoSettingsService,
+    StorageService,
+    LogService
+} from 'ng2-alfresco-core';
+
+declare var document: any;
+
+@Component({
+    selector: 'alfresco-app',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+    searchTerm: string = '';
+
+    constructor(private authService: AlfrescoAuthenticationService,
+                private router: Router,
+                private settingsService: AlfrescoSettingsService,
+                private translateService: AlfrescoTranslationService,
+                private storage: StorageService,
+                private logService: LogService) {
+        this.setProvider();
+
+        if (translateService) {
+            translateService.addTranslationFolder('app', 'resources');
+        }
+    }
+
+    isAPageWithHeaderBar(): boolean {
+        return location.pathname === '/login' || location.pathname === '/settings';
+    }
+
+    onLogout(event) {
+        event.preventDefault();
+        this.authService.logout()
+            .subscribe(
+                () => {
+                    this.navigateToLogin();
+                },
+                (error: any) => {
+                    if (error && error.response && error.response.status === 401) {
+                        this.navigateToLogin();
+                    } else {
+                        this.logService.error('An unknown error occurred while logging out', error);
+                        this.navigateToLogin();
+                    }
+                }
+            );
+    }
+
+    navigateToLogin() {
+        this.router.navigate(['/login']);
+        this.hideDrawer();
+    }
+
+    onToggleSearch(event) {
+        let expandedHeaderClass = 'header-search-expanded',
+            header = document.querySelector('header');
+        if (event.expanded) {
+            header.classList.add(expandedHeaderClass);
+        } else {
+            header.classList.remove(expandedHeaderClass);
+        }
+    }
+
+    changeLanguage(lang: string) {
+        this.translateService.use(lang);
+        this.hideDrawer();
+    }
+
+    hideDrawer() {
+        // todo: workaround for drawer closing
+        document.querySelector('.mdl-layout').MaterialLayout.toggleDrawer();
+    }
+
+    private setProvider() {
+        if (this.storage.hasItem(`providers`)) {
+            this.settingsService.setProviders(this.storage.getItem(`providers`));
+        }
+    }
+
+    onDragOverMainPage(event: any): boolean {
+        event.preventDefault();
+        return false;
+    }
+}

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

@@ -0,0 +1,128 @@
+/*!
+ * @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 { BrowserModule } from '@angular/platform-browser';
+
+import { CoreModule, AppConfigService } from 'ng2-alfresco-core';
+import { SearchModule } from 'ng2-alfresco-search';
+import { LoginModule } from 'ng2-alfresco-login';
+import { DataTableModule } from 'ng2-alfresco-datatable';
+import { DocumentListModule } from 'ng2-alfresco-documentlist';
+import { UploadModule } from 'ng2-alfresco-upload';
+import { TagModule } from 'ng2-alfresco-tag';
+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 { UserInfoComponentModule } from 'ng2-alfresco-userinfo';
+import { AnalyticsModule } from 'ng2-activiti-analytics';
+import { DiagramsModule } from 'ng2-activiti-diagrams';
+
+import { MaterialModule } from './material.module';
+import { AppComponent } from './app.component';
+import { routing } from './app.routes';
+import { CustomEditorsModule } from './components/activiti/custom-editor/custom-editor.component';
+import { Editor3DModule } from 'ng2-3d-editor';
+import { ChartsModule } from 'ng2-charts';
+import { CreateFolderDialog } from './dialogs/create-folder.dialog';
+import { DebugAppConfigService } from './services/debug-app-config.service';
+
+import {
+    HomeComponent,
+    DataTableDemoComponent,
+    SearchComponent,
+    SearchBarComponent,
+    LoginDemoComponent,
+    ActivitiDemoComponent,
+    ActivitiShowDiagramComponent,
+    ActivitiAppsView,
+    FormViewer,
+    WebscriptComponent,
+    TagComponent,
+    SocialComponent,
+    AboutComponent,
+    FilesComponent,
+    FormNodeViewer,
+    SettingsComponent,
+    FormDemoComponent
+} from './components/index';
+
+let appConfigFile = 'app.config-dev.json';
+if (process.env.ENV === 'production') {
+    appConfigFile = 'app.config-prod.json';
+}
+
+@NgModule({
+    imports: [
+        BrowserModule,
+        routing,
+        CoreModule.forRoot({
+            appConfigFile: appConfigFile
+        }),
+        MaterialModule,
+        LoginModule.forRoot(),
+        SearchModule.forRoot(),
+        DataTableModule.forRoot(),
+        DocumentListModule.forRoot(),
+        UploadModule.forRoot(),
+        TagModule.forRoot(),
+        SocialModule.forRoot(),
+        WebScriptModule.forRoot(),
+        ViewerModule.forRoot(),
+        ActivitiFormModule.forRoot(),
+        ActivitiTaskListModule.forRoot(),
+        ActivitiProcessListModule.forRoot(),
+        UserInfoComponentModule.forRoot(),
+        AnalyticsModule.forRoot(),
+        DiagramsModule.forRoot(),
+        CustomEditorsModule,
+        Editor3DModule.forRoot(),
+        ChartsModule
+    ],
+    declarations: [
+        AppComponent,
+        HomeComponent,
+        DataTableDemoComponent,
+        SearchComponent,
+        SearchBarComponent,
+        LoginDemoComponent,
+        ActivitiDemoComponent,
+        ActivitiShowDiagramComponent,
+        ActivitiAppsView,
+        FormViewer,
+        WebscriptComponent,
+        TagComponent,
+        SocialComponent,
+        AboutComponent,
+        FilesComponent,
+        FormNodeViewer,
+        CreateFolderDialog,
+        SettingsComponent,
+        FormDemoComponent
+    ],
+    providers: [
+        { provide: AppConfigService, useClass: DebugAppConfigService }
+    ],
+    bootstrap: [ AppComponent ],
+    entryComponents: [
+        CreateFolderDialog
+    ]
+})
+export class AppModule { }

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

@@ -0,0 +1,138 @@
+/*!
+ * @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 { ModuleWithProviders }  from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { AuthGuard, AuthGuardEcm, AuthGuardBpm } from 'ng2-alfresco-core';
+
+import {
+    HomeComponent,
+    FilesComponent,
+    DataTableDemoComponent,
+    SearchComponent,
+    LoginDemoComponent,
+    ActivitiDemoComponent,
+    ActivitiShowDiagramComponent,
+    ActivitiAppsView,
+    WebscriptComponent,
+    TagComponent,
+    SocialComponent,
+    AboutComponent,
+    FormViewer,
+    FormNodeViewer,
+    SettingsComponent,
+    FormDemoComponent
+} from './components/index';
+
+import { UploadButtonComponent } from 'ng2-alfresco-upload';
+
+export const appRoutes: Routes = [
+    { path: 'login', component: LoginDemoComponent },
+    {
+        path: '',
+        component: HomeComponent,
+        canActivate: [AuthGuard]
+    },
+    {
+        path: 'home',
+        component: HomeComponent,
+        canActivate: [AuthGuard]
+    },
+    {
+        path: 'files',
+        component: FilesComponent,
+        canActivate: [AuthGuardEcm]
+    },
+    {
+        path: 'files/:id',
+        component: FilesComponent,
+        canActivate: [AuthGuardEcm]
+    },
+    {
+        path: 'datatable',
+        component: DataTableDemoComponent,
+        canActivate: [AuthGuard]
+    },
+    {
+        path: 'uploader',
+        component: UploadButtonComponent,
+        canActivate: [AuthGuardEcm]
+    },
+    {
+        path: 'search',
+        component: SearchComponent,
+        canActivate: [AuthGuardEcm]
+    },
+    {
+        path: 'activiti',
+        component: ActivitiAppsView,
+        canActivate: [AuthGuardBpm]
+    },
+    {
+        path: 'activiti/apps',
+        component: ActivitiAppsView,
+        canActivate: [AuthGuardBpm]
+    },
+    {
+        path: 'activiti/apps/:appId/tasks',
+        component: ActivitiDemoComponent,
+        canActivate: [AuthGuardBpm]
+    },
+    {
+        path: 'activiti/diagram/:processDefinitionId',
+        component: ActivitiShowDiagramComponent,
+        canActivate: [AuthGuardBpm]
+    },
+    // TODO: check if neeeded
+    {
+        path: 'activiti/appId/:appId',
+        component: ActivitiDemoComponent,
+        canActivate: [AuthGuardBpm]
+    },
+    // TODO: check if needed
+    {
+        path: 'activiti/tasks/:id',
+        component: FormViewer,
+        canActivate: [AuthGuardBpm]
+    },
+    // TODO: check if needed
+    {
+        path: 'activiti/tasksnode/:id',
+        component: FormNodeViewer,
+        canActivate: [AuthGuardBpm]
+    },
+    {
+        path: 'webscript',
+        component: WebscriptComponent,
+        canActivate: [AuthGuardEcm]
+    },
+    {
+        path: 'tag',
+        component: TagComponent,
+        canActivate: [AuthGuardEcm]
+    },
+    {
+        path: 'social',
+        component: SocialComponent,
+        canActivate: [AuthGuardEcm]
+    },
+    { path: 'about', component: AboutComponent },
+    { path: 'settings', component: SettingsComponent },
+    { path: 'form', component: FormDemoComponent }
+];
+
+export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

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

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

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

@@ -0,0 +1,25 @@
+<div class="about-container">
+
+    <h3>Server settings</h3>
+    <small>The values below are taken from the AppConfigService and loaded from the '{{ configFile }}' file.</small>
+    <div>
+        Alfresco Process Services URL: <strong>{{ bpmHost }}</strong>
+    </div>
+
+    <div>
+        Alfresco Content Services URL: <strong>{{ ecmHost }}</strong>
+    </div>
+
+    <div *ngIf="githubUrlCommitAlpha">
+        <h3>Source code</h3>
+        <small>You are running the project based on the following commit:</small>
+        <div>
+            <a [href]="githubUrlCommitAlpha">{{githubUrlCommitAlpha}}</a>
+        </div>
+    </div>
+
+
+    <h3>Packages</h3>
+    <small>Current project is using the following ADF libraries:</small>
+    <alfresco-datatable [data]="data"></alfresco-datatable>
+</div>

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

@@ -0,0 +1,89 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, OnInit } from '@angular/core';
+import { Http } from '@angular/http';
+import { ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
+import { LogService, AppConfigService } from 'ng2-alfresco-core';
+
+@Component({
+    selector: 'about-page',
+    templateUrl: './about.component.html',
+    styleUrls: ['./about.component.css']
+})
+export class AboutComponent implements OnInit {
+
+    data: ObjectDataTableAdapter;
+    githubUrlCommitAlpha: string = 'https://github.com/Alfresco/alfresco-ng2-components/commits/';
+
+    configFile: string = '';
+    ecmHost: string = '';
+    bpmHost: string = '';
+
+    constructor(private http: Http,
+                private appConfig: AppConfigService,
+                private logService: LogService) {
+    }
+
+    ngOnInit() {
+        this.http.get('/versions.json').subscribe(response => {
+            let regexp = new RegExp('^(ng2-activiti|ng2-alfresco|alfresco-)');
+
+            let alfrescoPackages = Object.keys(response.json().dependencies).filter((val) => {
+                this.logService.log(val);
+                return regexp.test(val);
+            });
+
+            let alfrescoPackagesTableRepresentation = [];
+            alfrescoPackages.forEach((val) => {
+                this.logService.log(response.json().dependencies[val]);
+                alfrescoPackagesTableRepresentation.push({
+                    name: val,
+                    version: response.json().dependencies[val].version
+                });
+            });
+
+            this.gitHubLinkCreation(alfrescoPackagesTableRepresentation);
+
+            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

@@ -0,0 +1,40 @@
+.activiti-task-list__item:hover {
+    cursor: pointer;
+    font-weight: bold;
+}
+
+.activiti {
+    background-color: #f5f5f5;
+}
+
+.task-column {
+    background-color: #f5f5f5;
+    padding: 10px 10px 10px 10px;
+}
+
+.list-column {
+    width: 320px;
+}
+
+.mdl-layout__header {
+    z-index: 1;
+}
+
+.list-buttons {
+    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

@@ -0,0 +1,231 @@
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
+
+    <header class="mdl-layout__header">
+
+        <!-- TABS -->
+
+        <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
+            <a id="tasks-header" href="#tasks" class="mdl-layout__tab" [class.is-active]="activeTab === 'tasks'" (click)="activeTab = 'tasks'">TASKS</a>
+            <a id="processes-header" href="#processes" class="mdl-layout__tab" [class.is-active]="activeTab === 'processes'" (click)="activeTab = 'processes'">PROCESSES</a>
+            <a id="report-header" href="#report" class="mdl-layout__tab" [class.is-active]="activeTab === 'reports'" (click)="activeTab = 'reports'">REPORTS</a>
+        </div>
+    </header>
+
+    <main class="mdl-layout__content activiti">
+
+        <!--  TASKS COMPONENT -->
+
+        <section class="mdl-layout__tab-panel" [class.is-active]="activeTab === 'tasks'" id="tasks">
+            <div class="page-content">
+                <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>
+                        </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)"
+                                    (onSuccess)="onSuccessTaskFilterList($event)"
+                                    #activitifilter>
+                                </activiti-filters>
+                            </adf-accordion-group>
+                        </adf-accordion>
+                    </div>
+                    <div class="mdl-cell mdl-cell--3-col task-column mdl-shadow--2dp list-column">
+                        <activiti-tasklist
+                            [appId]="taskFilter?.appId"
+                            [processDefinitionKey]="taskFilter?.filter?.processDefinitionKey"
+                            [name]="taskFilter?.filter?.name"
+                            [assignment]="taskFilter?.filter?.assignment"
+                            [state]="taskFilter?.filter?.state"
+                            [sort]="taskFilter?.filter?.sort"
+                            [data]="dataTasks"
+                            [landingTaskId]="currentTaskId"
+                            (rowClick)="onTaskRowClick($event)"
+                            (onSuccess)="onSuccessTaskList($event)"
+                            (row-click)="onRowClick($event)"
+                            (row-dblclick)="onRowDblClick($event)"
+                            #activititasklist>
+                            <!-- Custom column definition demo -->
+                            <!--
+                            <data-columns>
+                                <data-column key="name" title="NAME" class="full-width name-column"></data-column>
+                                <data-column key="created" title="Created" class="hidden"></data-column>
+                            </data-columns>
+                            -->
+                        </activiti-tasklist>
+                    </div>
+                    <div class="mdl-cell mdl-cell--7-col task-column mdl-shadow--2dp">
+                        <activiti-task-details #activitidetails
+                            [debugMode]="true"
+                            [taskId]="currentTaskId"
+                            (formCompleted)="onFormCompleted($event)"
+                            (formContentClicked)="onFormContentClick($event)"
+                            (taskCreated)="onTaskCreated($event)"
+                            (taskDeleted)="onTaskDeleted($event)">
+                        </activiti-task-details>
+                        <hr>
+                        <div id="attachment-task-list" *ngIf="currentTaskId">
+                            <h5>Attachments</h5>
+                            <div class="adf-no-form-container">
+                                <div class="action-header">
+                                    <button [attr.disabled]="isTaskCompleted()" class="mdl-button mdl-js-button" (click)="toggleCreateTakAttach()">
+                                        Attach Document
+                                        <i class="material-icons">add</i>
+                                    </button>
+                                </div>
+                                <adf-task-attachment-list #taskAttach
+                                                          *ngIf="currentTaskId"
+                                                          [taskId]="currentTaskId"
+                                                          (attachmentClick)="onAttachmentClick($event)">
+                                </adf-task-attachment-list>
+                                <div *ngIf="isCreateTaskAttachVisible()">
+                                    <adf-create-task-attachment *ngIf="currentTaskId"
+                                                                [taskId]="currentTaskId"
+                                                                (success)="onCreateTaskSuccess()">
+                                    </adf-create-task-attachment>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!--  PROCESS COMPONENT -->
+
+        <section class="mdl-layout__tab-panel" [class.is-active]="activeTab === 'processes'" id="processes">
+            <div class="page-content" *ngIf="activeTab === 'processes'">
+                <div class="page-content">
+                    <div class="mdl-grid">
+                        <div class="mdl-cell mdl-cell--2-col task-column  mdl-shadow--2dp">
+                            <div class="list-buttons">
+                                <button
+                                    md-raised-button
+                                    data-automation-id="btn-start-process"
+                                    (click)="navigateStartProcess()">
+                                    <md-icon>add</md-icon>
+                                    <span>START PROCESS</span>
+                                </button>
+                            </div>
+                            <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)">
+                                    </activiti-process-instance-filters>
+                                </adf-accordion-group>
+                            </adf-accordion>
+                        </div>
+                        <div class="mdl-cell mdl-cell--3-col task-column list-column mdl-shadow--2dp" *ngIf="processFilter && !isStartProcessMode()">
+                            <activiti-process-instance-list
+                                *ngIf="processFilter?.hasFilter()" [appId]="processFilter.appId"
+                                [processDefinitionKey]="processFilter.filter.processDefinitionKey"
+                                [name]="processFilter.filter.name"
+                                [state]="processFilter.filter.state"
+                                [sort]="processFilter.filter.sort"
+                                [data]="dataProcesses"
+                                (rowClick)="onProcessRowClick($event)"
+                                (onSuccess)="onSuccessProcessList($event)">
+                                <!-- Custom column definition demo -->
+                                <!--
+                                <data-columns>
+                                    <data-column key="name" title="NAME" class="full-width name-column"></data-column>
+                                    <data-column key="created" title="Created" class="hidden"></data-column>
+                                </data-columns>
+                                -->
+                            </activiti-process-instance-list>
+                        </div>
+                        <div class="mdl-cell task-column mdl-shadow--2dp" *ngIf="!isStartProcessMode()"
+                            [class.mdl-cell--7-col]="processFilter && !isStartProcessMode()"
+                            [class.mdl-cell--10-col]="!processFilter || isStartProcessMode()">
+                            <activiti-process-instance-details
+                                [processInstanceId]="currentProcessInstanceId"
+                                (processCancelled)="processCancelled()"
+                                (showProcessDiagram)="onShowProcessDiagram($event)"
+                                (taskClick)="onProcessDetailsTaskClick($event)">
+                            </activiti-process-instance-details>
+                            <hr>
+                            <div id="attachment-process-list" *ngIf="currentProcessInstanceId">
+                            <h5>Attachments</h5>
+                                <div class="action-header">
+                                    <button id="show_process_attach" class="mdl-button mdl-js-button" (click)="toggleCreateProcessAttach()">
+                                        Attach Document
+                                        <i class="material-icons">add</i>
+                                    </button>
+                                </div>
+                                <adf-process-attachment-list *ngIf="currentProcessInstanceId"
+                                                          [processInstanceId]="currentProcessInstanceId"
+                                                          (attachmentClick)="onAttachmentClick($event)">
+                                </adf-process-attachment-list>
+                                <div *ngIf="isCreateProcessAttachVisible()">
+                                    <adf-create-process-attachment *ngIf="currentProcessInstanceId"
+                                                                [processInstanceId]="currentProcessInstanceId"
+                                                                (contentCreated)="onContentCreated()">
+                                    </adf-create-process-attachment>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="mdl-cell mdl-cell--10-col task-column mdl-shadow--2dp" *ngIf="isStartProcessMode()">
+                            <activiti-start-process [appId]="appId" (start)="onStartProcessInstance($event)"></activiti-start-process>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!--  ANALYTICS COMPONENT -->
+
+        <section class="mdl-layout__tab-panel" [class.is-active]="activeTab === 'reports'" id="report">
+            <div class="page-content" *ngIf="activeTab === 'reports'">
+                <div class="mdl-grid">
+                    <div class="mdl-cell mdl-cell--4-col task-column mdl-shadow--2dp">
+                        <span><h5>Report List</h5></span>
+                        <hr>
+                        <analytics-report-list
+                            [appId]="appId"
+                            [selectFirst]="selectFirstReport"
+                            (reportClick)="onReportClick($event)"
+                            #analyticsreportlist>
+                        </analytics-report-list>
+                    </div>
+                    <div class="mdl-cell mdl-cell--8-col task-column mdl-shadow--2dp">
+                        <activiti-analytics
+                            *ngIf="report"
+                            [appId]="appId"
+                            [reportId]="report.id"
+                            [hideParameters]="false"
+                            (editReport)="onEditReport($event)"
+                            (reportSaved)="onReportSaved($event)"
+                            (reportDeleted)="onReportDeleted()">
+                        </activiti-analytics>
+                        <div *ngIf="!report">
+                            <span>{{'ANALYTICS_REPORT.NO_REPORT_MESSAGE' | translate}}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+    </main>
+</div>
+
+<div *ngIf="fileShowed">
+    <alfresco-viewer
+        [(showViewer)]="fileShowed"
+        [blobFile]="content"
+        [displayName]="contentName"
+        [overlayMode]="true">
+    </alfresco-viewer>
+</div>

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

@@ -0,0 +1,377 @@
+/*!
+ * @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, ElementRef, Input, ViewChild } from '@angular/core';
+import {
+    ActivitiApps,
+    ActivitiFilters,
+    ActivitiTaskList,
+    ActivitiTaskDetails,
+    FilterRepresentationModel,
+    TaskDetailsEvent,
+    TaskAttachmentListComponent
+} from 'ng2-activiti-tasklist';
+import {
+    ActivitiProcessFilters,
+    ActivitiProcessInstanceDetails,
+    ActivitiProcessInstanceListComponent,
+    ActivitiStartProcessInstance,
+    FilterProcessRepresentationModel,
+    ProcessInstance,
+    ActivitiProcessAttachmentListComponent
+} from 'ng2-activiti-processlist';
+import { AnalyticsReportListComponent } from 'ng2-activiti-analytics';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Subscription } from 'rxjs/Rx';
+import {
+    ObjectDataTableAdapter,
+    ObjectDataRow,
+    DataSorting
+} from 'ng2-alfresco-datatable';
+import { AlfrescoApiService } from 'ng2-alfresco-core';
+import { FormService, FormRenderingService, FormEvent, FormFieldEvent } from 'ng2-activiti-form';
+import { /*CustomEditorComponent*/ CustomStencil01 } from './custom-editor/custom-editor.component';
+
+declare var componentHandler;
+
+const currentProcessIdNew = '__NEW__';
+
+@Component({
+    selector: 'activiti-demo',
+    templateUrl: './activiti-demo.component.html',
+    styleUrls: ['./activiti-demo.component.css']
+})
+export class ActivitiDemoComponent implements AfterViewInit {
+
+    @ViewChild(ActivitiFilters)
+    activitifilter: ActivitiFilters;
+
+    @ViewChild(ActivitiTaskList)
+    taskList: ActivitiTaskList;
+
+    @ViewChild(TaskAttachmentListComponent)
+    taskAttachList: TaskAttachmentListComponent;
+
+    @ViewChild(ActivitiProcessFilters)
+    activitiprocessfilter: ActivitiProcessFilters;
+
+    @ViewChild(ActivitiProcessInstanceListComponent)
+    processList: ActivitiProcessInstanceListComponent;
+
+    @ViewChild(ActivitiProcessInstanceDetails)
+    activitiprocessdetails: ActivitiProcessInstanceDetails;
+
+    @ViewChild(ActivitiTaskDetails)
+    activitidetails: ActivitiTaskDetails;
+
+    @ViewChild(ActivitiProcessAttachmentListComponent)
+    processAttachList: ActivitiProcessAttachmentListComponent;
+
+    @ViewChild(ActivitiStartProcessInstance)
+    activitiStartProcess: ActivitiStartProcessInstance;
+
+    @ViewChild(AnalyticsReportListComponent)
+    analyticsreportlist: AnalyticsReportListComponent;
+
+    @Input()
+    appId: number = null;
+
+    fileShowed: boolean = false;
+    selectFirstReport: boolean = false;
+
+    content: Blob;
+    contentName: string;
+
+    layoutType: string;
+    currentTaskId: string;
+    currentProcessInstanceId: string;
+
+    taskSchemaColumns: any [] = [];
+    processSchemaColumns: any [] = [];
+
+    activeTab: string = 'tasks'; // tasks|processes|reports
+
+    taskFilter: FilterRepresentationModel;
+    report: any;
+    processFilter: FilterProcessRepresentationModel;
+
+    sub: Subscription;
+    blobFile: any;
+    flag: boolean = true;
+    createTaskAttach: boolean = false;
+    createProcessAttach: boolean = false;
+
+    dataTasks: ObjectDataTableAdapter;
+    dataProcesses: ObjectDataTableAdapter;
+
+    constructor(private elementRef: ElementRef,
+                private route: ActivatedRoute,
+                private router: Router,
+                private apiService: AlfrescoApiService,
+                private formRenderingService: FormRenderingService,
+                private formService: FormService) {
+        this.dataTasks = new ObjectDataTableAdapter();
+        this.dataTasks.setSorting(new DataSorting('created', 'desc'));
+
+        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 }
+            ]
+        );
+        this.dataProcesses.setSorting(new DataSorting('started', 'desc'));
+
+        // Uncomment this line to replace all 'text' field editors with custom component
+        // formRenderingService.setComponentTypeResolver('text', () => CustomEditorComponent, true);
+
+        // Uncomment this line to map 'custom_stencil_01' to local editor component
+        formRenderingService.setComponentTypeResolver('custom_stencil_01', () => CustomStencil01, true);
+
+        formService.formLoaded.subscribe((e: FormEvent) => {
+            console.log(`Form loaded: ${e.form.id}`);
+        });
+
+        formService.formFieldValueChanged.subscribe((e: FormFieldEvent) => {
+            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() {
+        this.sub = this.route.params.subscribe(params => {
+            let applicationId = params['appId'];
+            if (applicationId && applicationId !== '0') {
+                this.appId = params['appId'];
+            }
+
+            this.taskFilter = null;
+            this.currentTaskId = null;
+            this.processFilter = null;
+            this.currentProcessInstanceId = null;
+        });
+        this.layoutType = ActivitiApps.LAYOUT_GRID;
+    }
+
+    ngOnDestroy() {
+        this.sub.unsubscribe();
+    }
+
+    onTaskFilterClick(filter: FilterRepresentationModel): void {
+        this.applyTaskFilter(filter);
+    }
+
+    onReportClick(event: any): void {
+        this.report = event;
+    }
+
+    onSuccessTaskFilterList(event: any): void {
+        this.applyTaskFilter(this.activitifilter.getCurrentFilter());
+    }
+
+    applyTaskFilter(filter: FilterRepresentationModel) {
+        this.taskFilter = filter;
+        if (filter && this.taskList) {
+            this.taskList.hasCustomDataSource = false;
+        }
+    }
+
+    onStartTaskSuccess(event: any): void {
+        this.activitifilter.selectFilterWithTask(event.id);
+        this.currentTaskId = event.id;
+    }
+
+    onSuccessTaskList(event: FilterRepresentationModel) {
+        this.currentTaskId = this.taskList.getCurrentId();
+    }
+
+    onProcessFilterClick(event: FilterProcessRepresentationModel): void {
+        this.currentProcessInstanceId = null;
+        this.processFilter = event;
+    }
+
+    onSuccessProcessFilterList(): void {
+        this.processFilter = this.activitiprocessfilter.getCurrentFilter();
+    }
+
+    onSuccessProcessList(event: any): void {
+        this.currentProcessInstanceId = this.processList.getCurrentId();
+    }
+
+    onTaskRowClick(taskId): void {
+        this.currentTaskId = taskId;
+    }
+
+    onProcessRowClick(processInstanceId): void {
+        this.currentProcessInstanceId = processInstanceId;
+    }
+
+    onEditReport(name: string): void {
+        this.analyticsreportlist.reload();
+    }
+
+    onReportSaved(reportId): void {
+        this.analyticsreportlist.reload(reportId);
+    }
+
+    onReportDeleted(): void {
+        this.analyticsreportlist.reload();
+        this.analyticsreportlist.selectReport(null);
+    }
+
+    navigateStartProcess(): void {
+        this.resetProcessFilters();
+        this.reloadProcessFilters();
+        this.currentProcessInstanceId = currentProcessIdNew;
+    }
+
+    onStartProcessInstance(instance: ProcessInstance): void {
+        this.currentProcessInstanceId = instance.id;
+        this.activitiStartProcess.reset();
+        this.resetProcessFilters();
+    }
+
+    isStartProcessMode(): boolean {
+        return this.currentProcessInstanceId === currentProcessIdNew;
+    }
+
+    processCancelled(data: any): void {
+        this.currentProcessInstanceId = null;
+        this.processList.reload();
+    }
+
+    onSuccessNewProcess(data: any): void {
+        this.processList.reload();
+    }
+
+    onFormCompleted(form): void {
+        this.taskList.reload();
+        this.currentTaskId = null;
+    }
+
+    onFormContentClick(content: any): void {
+        this.fileShowed = true;
+        this.content = content.contentBlob;
+        this.contentName = content.name;
+    }
+
+    onAttachmentClick(content: any): void {
+        this.fileShowed = true;
+        this.content = content.contentBlob;
+        this.contentName = content.name;
+    }
+
+    onTaskCreated(data: any): void {
+        this.currentTaskId = data.parentTaskId;
+        this.taskList.reload();
+    }
+
+    onTaskDeleted(data: any): void {
+        this.taskList.reload();
+    }
+
+    ngAfterViewInit() {
+        // workaround for MDL issues with dynamic components
+        if (componentHandler) {
+            componentHandler.upgradeAllRegistered();
+        }
+
+        this.loadStencilScriptsInPageFromActiviti();
+    }
+
+    loadStencilScriptsInPageFromActiviti() {
+        this.apiService.getInstance().activiti.scriptFileApi.getControllers().then(response => {
+            if (response) {
+                let s = document.createElement('script');
+                s.type = 'text/javascript';
+                s.text = response;
+                this.elementRef.nativeElement.appendChild(s);
+            }
+        });
+    }
+
+    onShowProcessDiagram(event: any): void {
+        this.router.navigate(['/activiti/diagram/' + event.value]);
+    }
+
+    onProcessDetailsTaskClick(event: TaskDetailsEvent): void {
+        event.preventDefault();
+        this.activeTab = 'tasks';
+
+        const taskId = event.value.id;
+        const processTaskDataRow = new ObjectDataRow({
+            id: taskId,
+            name: event.value.name || 'No name',
+            created: event.value.created
+        });
+        this.activitifilter.selectFilter(null);
+        this.taskList.setCustomDataSource([processTaskDataRow]);
+        this.taskList.selectTask(taskId);
+        this.currentTaskId = taskId;
+    }
+
+    private resetProcessFilters(): void {
+        this.processFilter = null;
+    }
+
+    private reloadProcessFilters(): void {
+        this.activitiprocessfilter.selectFilter(null);
+    }
+
+    onRowClick(event): void {
+        console.log(event);
+    }
+
+    onRowDblClick(event): void {
+        console.log(event);
+    }
+
+    onCreateTaskSuccess(): void {
+        this.taskAttachList.reload();
+        this.toggleCreateTakAttach();
+    }
+
+    onContentCreated() {
+        this.processAttachList.reload();
+        this.toggleCreateProcessAttach();
+    }
+
+    toggleCreateTakAttach(): void {
+        this.createTaskAttach = !this.createTaskAttach;
+    }
+
+    isCreateTaskAttachVisible(): boolean {
+        return this.createTaskAttach;
+    }
+
+    toggleCreateProcessAttach(): void {
+        this.createProcessAttach = !this.createProcessAttach;
+    }
+
+    isCreateProcessAttachVisible(): boolean {
+        return this.createProcessAttach;
+    }
+
+    isTaskCompleted(): boolean {
+        return this.activitidetails.isCompletedTask();
+    }
+}

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 { Component } from '@angular/core';
+import { Subscription } from 'rxjs/Rx';
+import { ActivatedRoute } from '@angular/router';
+import {Location} from '@angular/common';
+
+@Component({
+    selector: 'activiti-show-diagram',
+    templateUrl: './activiti-show-diagram.component.html',
+    styleUrls: ['./activiti-show-diagram.component.css']
+})
+export class ActivitiShowDiagramComponent {
+
+    sub: Subscription;
+    processDefinitionId: string;
+
+    constructor(private route: ActivatedRoute,
+                private location: Location) {
+        this.sub = this.route.params.subscribe(params => {
+            this.processDefinitionId = params['processDefinitionId'];
+        });
+
+    }
+
+    ngOnDestroy() {
+        this.sub.unsubscribe();
+    }
+
+    onClickBack() {
+        this.location.back();
+    }
+
+}

demo-shell-ng2/app/components/activiti/apps.view.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 { Component } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { AppDefinitionRepresentationModel } from 'ng2-activiti-tasklist';
+
+@Component({
+    selector: 'activiti-apps-view',
+    template: `
+        <activiti-apps (appClick)="onAppClicked($event)"></activiti-apps>
+    `
+})
+export class ActivitiAppsView {
+
+    constructor(private router: Router, private route: ActivatedRoute) {
+    }
+
+     onAppClicked(app: AppDefinitionRepresentationModel) {
+         this.router.navigate(['/activiti/apps', app.id || 0, 'tasks']);
+     }
+
+}

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

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 
-/* tslint:disable */
-
-import { Component, NgModule } from '@angular/core';
-import { WidgetComponent } from '@alfresco/adf-core';
+import { NgModule, Component } from '@angular/core';
+import { WidgetComponent } from 'ng2-activiti-form';
 
 @Component({
     selector: 'custom-editor',
@@ -35,7 +33,7 @@ export class CustomEditorComponent extends WidgetComponent {
 
 @Component({
     selector: 'custom-stencil-01',
-    template: `<div style="color: green">ADF version of custom ProcessService stencil</div>`
+    template: `<div style="color: green">ADF version of custom Activiti stencil</div>`
 })
 export class CustomStencil01 extends WidgetComponent {
 

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

@@ -0,0 +1,6 @@
+<div class="activiti-form-viewer" *ngIf="nodeId">
+    <activiti-form [nodeId]="nodeId"
+                   [saveMetadata]="true"
+                   [path]="'/Sites/swsdp/documentLibrary'">
+    </activiti-form>
+</div>

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

@@ -0,0 +1,55 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, OnInit, OnDestroy, AfterViewChecked } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Subscription } from 'rxjs/Rx';
+
+declare var componentHandler;
+
+@Component({
+    selector: 'form-node-viewer',
+    templateUrl: './form-node-viewer.component.html',
+    styleUrls: ['./form-node-viewer.component.css']
+})
+export class FormNodeViewer implements OnInit, OnDestroy, AfterViewChecked {
+
+    nodeId: string;
+
+    private sub: Subscription;
+
+    constructor(private route: ActivatedRoute) {
+    }
+
+    ngOnInit() {
+        this.sub = this.route.params.subscribe(params => {
+            this.nodeId = params['id'];
+        });
+    }
+
+    ngOnDestroy() {
+        this.sub.unsubscribe();
+    }
+
+    ngAfterViewChecked() {
+        // workaround for MDL issues with dynamic components
+        if (componentHandler) {
+            componentHandler.upgradeAllRegistered();
+        }
+    }
+
+}

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

@@ -0,0 +1,11 @@
+<div class="activiti-form-viewer" *ngIf="taskId">
+    <activiti-form [taskId]="taskId"></activiti-form>
+    <!--<activiti-form [formName]="'activitiForms:patientFolder'"-->
+                       <!--[saveMetadata]="true"-->
+                       <!--[path]="'/Sites/swsdp/documentLibrary'"-->
+                       <!--[nameNode]="'test'"></activiti-form>-->
+    <!--<activiti-form [nodeId]="'e280be3a-6584-45a1-8bb5-89bfe070262e'"-->
+                   <!--[saveMetadata]="true"-->
+                   <!--[path]="'/Sites/swsdp/documentLibrary'">-->
+    <!--</activiti-form>-->
+</div>

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

@@ -0,0 +1,55 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, OnInit, OnDestroy, AfterViewChecked } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Subscription } from 'rxjs/Rx';
+
+declare var componentHandler;
+
+@Component({
+    selector: 'form-viewer',
+    templateUrl: './form-viewer.component.html',
+    styleUrls: ['./form-viewer.component.css']
+})
+export class FormViewer implements OnInit, OnDestroy, AfterViewChecked {
+
+    taskId: string;
+
+    private sub: Subscription;
+
+    constructor(private route: ActivatedRoute) {
+    }
+
+    ngOnInit() {
+        this.sub = this.route.params.subscribe(params => {
+            this.taskId = params['id'];
+        });
+    }
+
+    ngOnDestroy() {
+        this.sub.unsubscribe();
+    }
+
+    ngAfterViewChecked() {
+        // workaround for MDL issues with dynamic components
+        if (componentHandler) {
+            componentHandler.upgradeAllRegistered();
+        }
+    }
+
+}

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

@@ -0,0 +1,40 @@
+<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)"
+        (row-dblclick)="onRowDblClick($event)">
+      <!-- HTML column definition demo -->
+        <!--
+        <data-columns>
+            <data-column type="image" key="icon" [sortable]="false"></data-column>
+            <data-column key="id" title="Id"></data-column>
+            <data-column key="createdOn" title="Created"></data-column>
+            <data-column key="name" title="Name" class="full-width name-column"></data-column>
+            <data-column key="createdBy.name" title="Created By"></data-column>
+        </data-columns>
+        -->
+    </alfresco-datatable>
+</div>
+<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>
+</div>

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

@@ -0,0 +1,175 @@
+/*!
+ * @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 } from '@angular/core';
+import { ObjectDataTableAdapter, DataSorting, ObjectDataRow, ObjectDataColumn, DataCellEvent, DataRowActionEvent } from 'ng2-alfresco-datatable';
+
+@Component({
+    selector: 'datatable-demo',
+    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() {
+        this.reset();
+    }
+
+    reset() {
+        this.data = new ObjectDataTableAdapter(
+            [
+                {
+                    id: 1,
+                    name: 'Name 1',
+                    createdOn: new Date(2016, 6, 2, 15, 8, 1),
+                    createdBy: this._createdBy,
+                    icon: 'material-icons://folder_open'
+                },
+                {
+                    id: 2,
+                    name: 'Name 2',
+                    createdOn: new Date(2016, 6, 2, 15, 8, 2),
+                    createdBy: this._createdBy,
+                    icon: 'material-icons://accessibility'
+                },
+                {
+                    id: 3,
+                    name: 'Name 3',
+                    createdOn: new Date(2016, 6, 2, 15, 8, 3),
+                    createdBy: this._createdBy,
+                    icon: 'material-icons://alarm'
+                },
+                {
+                    id: 4,
+                    name: 'Image 1',
+                    createdOn: new Date(2016, 6, 2, 15, 8, 4),
+                    createdBy: this._createdBy,
+                    icon: this._imageUrl
+                }
+            ],
+            [
+                {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.setSorting(new DataSorting('id', 'asc'));
+    }
+
+    addRow() {
+        let id = this.data.getRows().length + 1;
+        let row = new ObjectDataRow({
+            id: id,
+            name: 'Name ' + id,
+            createdOn: new Date(),
+            icon: 'material-icons://extension',
+            createdBy: this._createdBy
+        });
+        this.data.getRows().push(row);
+        this.data.sort();
+    }
+
+    replaceRows() {
+        let objects = [
+            {
+                id: 10,
+                name: 'Name 10',
+                createdBy: this._createdBy,
+                createdOn: new Date(2016, 6, 2, 15, 8, 5),
+                icon: 'material-icons://face'
+            },
+            {
+                id: 11,
+                name: 'Name 11',
+                createdBy: this._createdBy,
+                createdOn: new Date(2016, 6, 2, 15, 8, 6),
+                icon: 'material-icons://language'
+            },
+            {
+                id: 12,
+                name: 'Name 12',
+                createdBy: this._createdBy,
+                createdOn: new Date(2016, 6, 2, 15, 8, 7),
+                icon: 'material-icons://pets'
+            },
+            {
+                id: 13,
+                name: 'Image 13',
+                createdBy: this._createdBy,
+                createdOn: new Date(2016, 6, 2, 15, 8, 8),
+                icon: this._imageUrl
+            }
+        ];
+        let rows = objects.map(obj => new ObjectDataRow(obj));
+        this.data.setRows(rows);
+    }
+
+    replaceColumns() {
+        let schema = [
+            { type: 'text', key: 'id', title: 'Id', sortable: true },
+            { type: 'text', key: 'name', title: 'Name', sortable: true, cssClass: 'full-width name-column' }
+        ];
+        let columns = schema.map(col => new ObjectDataColumn(col));
+        this.data.setColumns(columns);
+    }
+
+    onShowRowActionsMenu(event: DataCellEvent) {
+        let myAction = {
+            title: 'Hello'
+            // you custom metadata needed for onExecuteRowAction
+        };
+        event.value.actions = [
+            myAction
+        ];
+    }
+
+    onExecuteRowAction(event: DataRowActionEvent) {
+        let args = event.value;
+        console.log(args.row);
+        console.log(args.action);
+        window.alert(`My custom action: ${args.action.title}`);
+    }
+
+    onRowClick(event) {
+        console.log(event);
+    }
+
+    onRowDblClick(event) {
+        console.log(event);
+    }
+}

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

@@ -0,0 +1,21 @@
+.container {
+    margin: 10px;
+}
+
+@media only screen and (max-width: 640px) {
+    .container {
+        margin: 0;
+    }
+}
+
+.error-message {
+    text-align: left;
+}
+
+.error-message--text {
+    color: #d50000;
+}
+
+.adf-not-overlay-viewer {
+    height:900px;
+}

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

@@ -0,0 +1,220 @@
+<div class="container">
+    <alfresco-upload-drag-area
+        [rootFolderId]="documentList.currentFolderId"
+        [versioning]="versioning"
+        [enabled]="documentList.hasCreatePermission()">
+        <adf-breadcrumb
+            [target]="documentList"
+            [folderNode]="documentList.folderNode">
+        </adf-breadcrumb>
+        <div *ngIf="errorMessage" class="error-message">
+            <button (click)="resetError()" class="mdl-button mdl-js-button mdl-button--icon">
+                <i class="material-icons">highlight_off</i>
+            </button>
+            <span class="error-message--text">{{errorMessage}}</span>
+        </div>
+        <ng-container *ngIf="useCustomToolbar">
+            <adf-toolbar title="Toolbar">
+                <button md-icon-button (click)="onCreateFolderClicked($event)">
+                    <md-icon>create_new_folder</md-icon>
+                </button>
+                <button md-icon-button>
+                    <md-icon>delete</md-icon>
+                </button>
+                <button md-icon-button [mdMenuTriggerFor]="menu">
+                    <md-icon>more_vert</md-icon>
+                </button>
+                <md-menu #menu="mdMenu">
+                    <button md-menu-item>
+                        <md-icon>dialpad</md-icon>
+                        <span>Redial</span>
+                    </button>
+                    <button md-menu-item disabled>
+                        <md-icon>voicemail</md-icon>
+                        <span>Check voicemail</span>
+                    </button>
+                    <button md-menu-item>
+                        <md-icon>notifications_off</md-icon>
+                        <span>Disable alerts</span>
+                    </button>
+                </md-menu>
+            </adf-toolbar>
+        </ng-container>
+        <alfresco-document-list
+                #documentList
+                [creationMenuActions]="!useCustomToolbar"
+                [currentFolderId]="currentFolderId"
+                [contextMenuActions]="true"
+                [contentActions]="true"
+                [allowDropFiles]="true"
+                (error)="onNavigationError($event)"
+                (success)="resetError()"
+                (preview)="showFile($event)"
+                (permissionError)="handlePermissionError($event)">
+            <data-columns>
+                <data-column key="$thumbnail" type="image" [sortable]="false"></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 -->
+                    <!--
+                    <ng-template let-entry="$implicit">
+                        <span>Hi! {{entry.data.getValue(entry.row, entry.col)}}</span>
+                    </ng-template>
+                    -->
+
+                    <!-- Example #2: using custom template with value access -->
+                    <!--
+                    <ng-template let-value="value">
+                        <span>Hi! {{value}}</span>
+                    </ng-template>
+                    -->
+
+                </data-column>
+                <!-- Notes: has performance overhead due to multiple files/folders causing separate HTTP calls to get tags -->
+                <!--
+                <data-column
+                    title="{{'DOCUMENT_LIST.COLUMNS.TAG' | translate}}"
+                    key="id"
+                    class="full-width ellipsis-cell">
+                    <template let-entry="$implicit">
+                        <alfresco-tag-node-list  [nodeId]="entry.data.getValue(entry.row, entry.col)"></alfresco-tag-node-list>
+                    </template>
+                </data-column>
+                -->
+                <data-column
+                        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">
+                </data-column>
+            </data-columns>
+
+            <content-actions>
+                <!-- folder actions -->
+                <content-action
+                        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">
+                </content-action>
+                <content-action
+                        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>
+    </alfresco-upload-drag-area>
+</div>
+
+<context-menu-holder></context-menu-holder>
+
+<div class="container">
+    <section>
+        <md-slide-toggle [(ngModel)]="useCustomToolbar">Use custom toolbar</md-slide-toggle>
+    </section>
+
+    <section>
+        <md-slide-toggle [(ngModel)]="multipleFileUpload">Multiple File Upload</md-slide-toggle>
+    </section>
+
+    <section>
+        <md-slide-toggle [(ngModel)]="folderUpload">Folder upload</md-slide-toggle>
+    </section>
+
+    <section>
+        <md-slide-toggle [(ngModel)]="acceptedFilesTypeShow">Custom extensions filter</md-slide-toggle>
+    </section>
+
+    <section>
+        <md-slide-toggle [(ngModel)]="versioning">Enable versioning</md-slide-toggle>
+    </section>
+
+    <section>
+        <md-slide-toggle [(ngModel)]="disableWithNoPermission">Disable upload button when user has no permissions</md-slide-toggle>
+    </section>
+
+    <h5>Upload</h5>
+    <section *ngIf="acceptedFilesTypeShow">
+        <md-input-container>
+            <input mdInput placeholder="Extension accepted" [(ngModel)]="acceptedFilesType"  data-automation-id="accepted-files-type">
+        </md-input-container>
+    </section>
+    <div *ngIf="!acceptedFilesTypeShow">
+        <alfresco-upload-button
+            #uploadButton
+            [disabled]="!enableUpload"
+            data-automation-id="multiple-file-upload"
+            [rootFolderId]="documentList.currentFolderId"
+            [multipleFiles]="multipleFileUpload"
+            [uploadFolders]="folderUpload"
+            [versioning]="versioning"
+            [disableWithNoPermission]="disableWithNoPermission"
+            (permissionEvent)="handlePermissionError($event)">
+        </alfresco-upload-button>
+    </div>
+    <div *ngIf="acceptedFilesTypeShow">
+        <alfresco-upload-button
+            #uploadButton
+            [disabled]="!enableUpload"
+            data-automation-id="multiple-file-upload"
+            [rootFolderId]="documentList.currentFolderId"
+            [acceptedFilesType]="acceptedFilesType"
+            [multipleFiles]="multipleFileUpload"
+            [uploadFolders]="folderUpload"
+            [versioning]="versioning"
+            [disableWithNoPermission]="disableWithNoPermission"
+            (permissionEvent)="handlePermissionError($event)">
+        </alfresco-upload-button>
+    </div>
+    <section>
+        <md-checkbox [(ngModel)]="enableUpload">Enable upload (demoing enabled/disabled state)</md-checkbox>
+    </section>
+</div>
+
+<file-uploading-dialog #fileDialog></file-uploading-dialog>
+
+<div *ngIf="fileShowed">
+    <alfresco-viewer [(showViewer)]="fileShowed"
+                     [fileNodeId]="fileNodeId"
+                     [overlayMode]="true">
+
+        <extension-viewer [supportedExtensions]="['obj','3DS']" #extension>
+            <ng-template let-urlFileContent="urlFileContent" let-extension="extension" >
+                <threed-viewer [urlFile]="urlFileContent" [extension]="extension" ></threed-viewer>
+            </ng-template>
+        </extension-viewer>
+
+    </alfresco-viewer>
+
+    <!-- Comment the viewer above and uncomment that one below if you want test the overlay false viewer-->
+
+    <!--<div *ngIf="fileShowed" class="adf-not-overlay-viewer">-->
+        <!--<alfresco-viewer [(showViewer)]="fileShowed"-->
+                         <!--[fileNodeId]="fileNodeId"-->
+                         <!--[overlayMode]="false">-->
+        <!--</alfresco-viewer>-->
+    <!--</div>-->
+
+</div>
+

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

@@ -0,0 +1,145 @@
+/*!
+ * @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, Optional, ViewChild, ChangeDetectorRef } from '@angular/core';
+import { ActivatedRoute, Params } from '@angular/router';
+import { MdDialog } from '@angular/material';
+import { AlfrescoContentService, FolderCreatedEvent, NotificationService } from 'ng2-alfresco-core';
+import { DocumentListComponent } from 'ng2-alfresco-documentlist';
+import { UploadService, FileUploadCompleteEvent } from 'ng2-alfresco-upload';
+
+import { CreateFolderDialog } from '../../dialogs/create-folder.dialog';
+
+@Component({
+    selector: 'files-component',
+    templateUrl: './files.component.html',
+    styleUrls: ['./files.component.css']
+})
+export class FilesComponent implements OnInit {
+    // The identifier of a node. You can also use one of these well-known aliases: -my- | -shared- | -root-
+    currentFolderId: string = '-my-';
+
+    errorMessage: string = null;
+    fileNodeId: any;
+    fileShowed: boolean = false;
+
+    useCustomToolbar = true;
+
+    @Input()
+    multipleFileUpload: boolean = false;
+
+    @Input()
+    disableWithNoPermission: boolean = false;
+
+    @Input()
+    folderUpload: boolean = false;
+
+    @Input()
+    acceptedFilesTypeShow: boolean = false;
+
+    @Input()
+    versioning: boolean = false;
+
+    @Input()
+    acceptedFilesType: string = '.jpg,.pdf,.js';
+
+    @Input()
+    enableUpload: boolean = true;
+
+    @ViewChild(DocumentListComponent)
+    documentList: DocumentListComponent;
+
+    constructor(private changeDetector: ChangeDetectorRef,
+                private notificationService: NotificationService,
+                private uploadService: UploadService,
+                private contentService: AlfrescoContentService,
+                private dialog: MdDialog,
+                @Optional() private route: ActivatedRoute) {
+    }
+
+    showFile(event) {
+        if (event.value.entry.isFile) {
+            this.fileNodeId = event.value.entry.id;
+            this.fileShowed = true;
+        } else {
+            this.fileShowed = false;
+        }
+    }
+
+    toggleFolder() {
+        this.multipleFileUpload = false;
+        this.folderUpload = !this.folderUpload;
+        return this.folderUpload;
+    }
+
+    ngOnInit() {
+        if (this.route) {
+            this.route.params.forEach((params: Params) => {
+                if (params['id']) {
+                    this.currentFolderId = params['id'];
+                    this.changeDetector.detectChanges();
+                }
+            });
+        }
+
+        this.uploadService.fileUploadComplete.debounceTime(300).subscribe(value => this.onFileUploadComplete(value));
+        this.contentService.folderCreated.subscribe(value => this.onFolderCreated(value));
+    }
+
+    onNavigationError(err: any) {
+        if (err) {
+            this.errorMessage = err.message || 'Navigation error';
+        }
+    }
+
+    resetError() {
+        this.errorMessage = null;
+    }
+
+    onFileUploadComplete(event: FileUploadCompleteEvent) {
+        if (event && event.file.options.parentId === this.documentList.currentFolderId) {
+            this.documentList.reload();
+        }
+    }
+
+    onFolderCreated(event: FolderCreatedEvent) {
+        console.log('FOLDER CREATED');
+        console.log(event);
+        if (event && event.parentId === this.documentList.currentFolderId) {
+            this.documentList.reload();
+        }
+    }
+
+    handlePermissionError(event: any) {
+        this.notificationService.openSnackMessage(
+            `You don't have the ${event.permission} permission to ${event.action} the ${event.type} `,
+            4000
+        );
+    }
+
+    onCreateFolderClicked(event: Event) {
+        let dialogRef = this.dialog.open(CreateFolderDialog);
+        dialogRef.afterClosed().subscribe(folderName => {
+            if (folderName) {
+                this.contentService.createFolder('', folderName, this.documentList.currentFolderId).subscribe(
+                    node => console.log(node),
+                    err => console.log(err)
+                );
+            }
+        });
+    }
+}

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

@@ -2,14 +2,14 @@
  * @license
  * Copyright 2016 Alfresco Software, Ltd.
  *
- * Licensed under the Apache License, Version 2.0 (the "License");
+ * 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,
+ * 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.

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

@@ -0,0 +1,32 @@
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
+    <header class="mdl-layout__header">
+        <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
+            <a id="demo-form" href="#demo" class="mdl-layout__tab" [class.is-active]="activeTab === 'demo'" (click)="changeToDemoForm()">DEMO</a>
+            <a id="store-form" href="#store" class="mdl-layout__tab" [class.is-active]="activeTab === 'processes'" (click)="changeToStoreForm()">STORE</a>
+        </div>
+    </header>
+    <main class="mdl-layout__content activiti">
+        <section class="mdl-layout__tab-panel" [class.is-active]="activeTab === 'demo'" id="demo">
+            <div class="form-container">
+                <activiti-form [form]="form">
+                </activiti-form>
+            </div>
+        </section>
+        <section class="mdl-layout__tab-panel" [class.is-active]="activeTab === 'store'" id="store">
+            <span>FORM NAME TO VISUALIZE</span>
+            <input [(ngModel)]="formToLoadName" class="mdl-textfield__input" type="text" (ngModelChange)="loadForm()">
+            <div *ngIf="formToLoadName && formToLoadName !== '' " class="store-form-container">
+                <activiti-form [form]="form" [data]="restoredData" #storeForm>
+                </activiti-form>
+                <button class="mdl-button mdl-js-button" (click)="store()">STORE</button>
+                <button class="mdl-button mdl-js-button" (click)="restore()">RESTORE</button>
+            </div>
+            <div>
+                <span> Please create in APS the form with the name you entered</span>
+            </div>
+            <div *ngIf="showError">
+                <span> Form Name not valid or form not present</span>
+            </div>
+        </section>
+    </main>
+</div>

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

@@ -0,0 +1,122 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
+import { FormModel, FormService } from 'ng2-activiti-form';
+import { DemoForm } from './demo-form';
+import { ActivitiForm } from 'ng2-activiti-form';
+
+declare var componentHandler;
+
+@Component({
+    selector: 'form-demo',
+    templateUrl: 'form-demo.component.html',
+    styleUrls: [
+        'form-demo.component.css'
+    ]
+})
+export class FormDemoComponent implements OnInit, AfterViewInit {
+
+    @ViewChild(ActivitiForm)
+    activitiForm: ActivitiForm;
+
+    form: FormModel;
+    activeTab: string = 'demo';
+    storedData: any = {};
+    restoredData: any = {};
+    formToLoadName: string = null;
+    showError: boolean = false;
+
+    constructor(private formService: FormService) {
+        formService.executeOutcome.subscribe(e => {
+            e.preventDefault();
+            console.log(e.outcome);
+        });
+    }
+
+    ngOnInit() {
+        let formDefinitionJSON: any = DemoForm.getDefinition();
+        let form = this.formService.parseForm(formDefinitionJSON);
+        console.log(form);
+        this.form = form;
+    }
+
+    ngAfterViewInit() {
+        // workaround for MDL issues with dynamic components
+        if (componentHandler) {
+            componentHandler.upgradeAllRegistered();
+        }
+    }
+
+    changeToStoreForm() {
+        this.activeTab = 'store';
+        this.showError = false;
+    }
+
+    changeToDemoForm() {
+        this.activeTab = 'demo';
+        let formDefinitionJSON: any = DemoForm.getDefinition();
+        let demoForm = this.formService.parseForm(formDefinitionJSON);
+        this.form = demoForm;
+    }
+
+    store() {
+        this.clone(this.activitiForm.form.values, this.storedData);
+        console.log('DATA SAVED');
+        console.log(this.storedData);
+        console.log('DATA SAVED');
+        this.restoredData = null;
+    }
+
+    restore() {
+        this.restoredData = this.storedData;
+        this.storedData = {};
+    }
+
+    clone(objToCopyFrom, objToCopyTo) {
+        for (let attribute in objToCopyFrom) {
+            if (objToCopyFrom.hasOwnProperty(attribute)) {
+                objToCopyTo[attribute] = objToCopyFrom[attribute];
+            }
+        }
+        return objToCopyTo;
+    }
+
+    loadForm() {
+        if (this.formToLoadName) {
+            this.showError = false;
+            this.formService
+                .getFormDefinitionByName(this.formToLoadName)
+                .debounceTime(7000)
+                .subscribe(
+                id => {
+                    this.formService.getFormDefinitionById(id).subscribe(
+                        form => {
+                            this.form = this.formService.parseForm((form);
+                        },
+                        (error) => {
+                            this.showError = true;
+                        }
+                    );
+                },
+                (error) => {
+                    this.showError = true;
+                }
+                );
+        }
+    }
+}

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

@@ -0,0 +1,53 @@
+.home-cards {
+    float: left;
+    margin: 10px 10px 10px 10px;
+}
+
+.mdl-card__supporting-text {
+    display: block;
+    overflow-y: auto;
+    height: 400px;
+}
+
+.demo-card-square.mdl-card {
+    width: 320px;
+    height: 380px;
+}
+
+.demo-card-square > .mdl-card__title {
+    color: #fff;
+    background-color: rgb(158, 158, 158);
+}
+
+.mdl-card__title {
+    cursor: pointer;
+    height: 70px;
+}
+
+.home--card__icon {
+    padding-top: 2px;
+    margin-right: 4px;
+}
+
+.home--card__text {
+    font-size: 16px;
+    line-height: 18px;
+}
+
+.home--feature-list {
+    list-style: none;
+    padding-left: 0;
+}
+
+.home--feature-list__icon {
+    float: left;
+}
+
+.home--feature-list__text {
+    padding-top: 2px;
+}
+
+span.home--feature-list__text:before {
+    content: '';
+    padding-left: 4px;
+}

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

@@ -0,0 +1,187 @@
+<!-- DOCUMENT LIST-->
+<div class="demo-card-square mdl-card mdl-shadow--2dp home-cards">
+        <div class="mdl-card__title mdl-card--expand" routerLink="/files">
+            <h2 class="mdl-card__title-text">
+                <i class="material-icons home--card__icon">dvr</i>
+                <span class="home--card__text">DocumentList - Content Services</span>
+            </h2>
+        </div>
+    <div class="mdl-card__supporting-text">
+        Demonstrates multiple Alfresco Content Services components used together to display the files of your Content Services instance:
+        <ul class="home--feature-list">
+            <li>
+                <i class="material-icons home--feature-list__icon">brightness_1</i>
+                <span class="home--feature-list__text">Communication with the Rest Api and core services</span>
+                <a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
+            </li>
+            <li>
+                <i class="material-icons home--feature-list__icon">dvr</i>
+                <span class="home--feature-list__text">Document List</span>
+                <a href="https://www.npmjs.com/package/ng2-alfresco-documentlist" target="_blank">ng2-alfresco-documentlist</a>
+            </li>
+            <li>
+                <i class="material-icons home--feature-list__icon">file_upload</i>
+                <span class="home--feature-list__text">Upload</span>
+                <a href="https://www.npmjs.com/package/ng2-alfresco-upload" target="_blank">ng2-alfresco-upload</a>
+            </li>
+            <li>
+                <i class="material-icons home--feature-list__icon">view_module</i>
+                <span class="home--feature-list__text">DataTable</span>
+                <a href="https://www.npmjs.com/package/ng2-alfresco-datatable" target="_blank">ng2-alfresco-datatable</a>
+            </li>
+        </ul>
+    </div>
+</div>
+
+
+<!-- Process Services-->
+<div class="demo-card-square mdl-card mdl-shadow--2dp home-cards">
+        <div class="mdl-card__title mdl-card--expand" routerLink="/activiti">
+            <h2 class="mdl-card__title-text">
+                <i class="material-icons home--card__icon">apps</i>
+                <span class="home--card__text">Process Services</span>
+            </h2>
+        </div>
+    <div class="mdl-card__supporting-text">
+        Demonstrates multiple Alfresco Process Services components used together to show your Process Services process and tasks:
+        <ul class="home--feature-list">
+            <li>
+                <i class="material-icons home--feature-list__icon">brightness_1</i>
+                <span class="home--feature-list__text">Communication with the Rest Api and core services</span>
+                <a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
+            </li>
+            <li>
+                <i class="material-icons home--feature-list__icon">view_module</i>
+                <span class="home--feature-list__text">App List</span>
+                <a href="https://www.npmjs.com/package/ng2-activiti-tasklist" target="_blank">ng2-activiti-apps</a>
+            </li>
+            <li>
+                <i class="material-icons home--feature-list__icon">view_headline</i>
+                <span class="home--feature-list__text">Task List</span>
+                <a href="https://www.npmjs.com/package/ng2-activiti-tasklist" target="_blank">ng2-activiti-tasklist</a>
+            </li>
+            <li>
+                <i class="material-icons home--feature-list__icon">view_headline</i>
+                <span class="home--feature-list__text">Process List</span>
+                <a href="https://www.npmjs.com/package/ng2-activiti-processlist" target="_blank">ng2-activiti-processlist</a>
+            </li>
+            <li>
+                <i class="material-icons home--feature-list__icon">view_quilt</i>
+                <span class="home--feature-list__text">Form</span>
+                <a href="https://www.npmjs.com/package/ng2-activiti-form" target="_blank">ng2-activiti-form</a>
+            </li>
+            <li>
+                <i class="material-icons home--feature-list__icon">pie_chart</i>
+                <span class="home--feature-list__text">Analytics</span>
+                <a href="https://www.npmjs.com/package/ng2-activiti-analytics" target="_blank">ng2-activiti-analytics</a>,
+                <a href="https://www.npmjs.com/package/ng2-activiti-diagrams" target="_blank">ng2-activiti-diagrams</a>
+            </li>
+            <li>
+                <i class="material-icons home--feature-list__icon">view_module</i>
+                <span class="home--feature-list__text">DataTable</span>
+                <a href="https://www.npmjs.com/package/ng2-alfresco-datatable" target="_blank">ng2-alfresco-datatable</a>
+            </li>
+        </ul>
+    </div>
+</div>
+
+
+<!-- DATATABLE-->
+<div class="demo-card-square mdl-card mdl-shadow--2dp home-cards">
+        <div class="mdl-card__title mdl-card--expand" routerLink="/datatable">
+            <h2 class="mdl-card__title-text">
+                <i class="material-icons home--card__icon">view_module</i>
+                <span class="home--card__text">DataTable - Content Services & Process Services</span>
+            </h2>
+        </div>
+    <div class="mdl-card__supporting-text">
+        Basic table component:
+        <ul class="home--feature-list">
+            <li>
+                <i class="material-icons home--feature-list__icon">brightness_1</i>
+                <span class="home--feature-list__text">Communication with the Rest Api and core services</span>
+                <a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
+            </li>
+        </ul>
+    </div>
+</div>
+
+<!-- UPLOADER-->
+<div class="demo-card-square mdl-card mdl-shadow--2dp home-cards">
+        <div class="mdl-card__title mdl-card--expand" routerLink="/uploader">
+            <h2 class="mdl-card__title-text">
+                <i class="material-icons home--card__icon">file_upload</i>
+                <span class="home--card__text">Uploader - Content Services</span>
+            </h2>
+        </div>
+    <div class="mdl-card__supporting-text">
+        Basic table uploader component for the Content Services & Process Services:
+        <ul class="home--feature-list">
+            <li>
+                <i class="material-icons home--feature-list__icon">brightness_1</i>
+                <span class="home--feature-list__text">Communication with the Rest Api and core services</span>
+                <a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
+            </li>
+        </ul>
+    </div>
+</div>
+
+<!-- LOGIN-->
+<div class="demo-card-square mdl-card mdl-shadow--2dp home-cards">
+        <div class="mdl-card__title mdl-card--expand" routerLink="/login">
+            <h2 class="mdl-card__title-text">
+                <i class="material-icons home--card__icon">account_circle</i>
+                <span class="home--card__text">Login - Content Services & Process Services</span>
+            </h2>
+        </div>
+    <div class="mdl-card__supporting-text">
+        Login component for the Content Services and Process Services:
+        <ul class="home--feature-list">
+            <li>
+                <i class="material-icons home--feature-list__icon">brightness_1</i>
+                <span class="home--feature-list__text">Communication with the Rest Api and core services</span>
+                <a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
+            </li>
+        </ul>
+    </div>
+</div>
+
+<!-- WEBSCRIPT-->
+<div class="demo-card-square mdl-card mdl-shadow--2dp home-cards">
+    <div class="mdl-card__title mdl-card--expand" routerLink="/webscript">
+        <h2 class="mdl-card__title-text">
+            <i class="material-icons home--card__icon">extension</i>
+            <span class="home--card__text">Webscript - Content Services</span>
+        </h2>
+    </div>
+    <div class="mdl-card__supporting-text">
+        Displays and creates webscripts in your Content Services instance:
+        <ul class="home--feature-list">
+            <li>
+                <i class="material-icons home--feature-list__icon">brightness_1</i>
+                <span class="home--feature-list__text">Communication with the Rest Api and core services</span>
+                <a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
+            </li>
+        </ul>
+    </div>
+</div>
+
+<!-- TAG-->
+<div class="demo-card-square mdl-card mdl-shadow--2dp home-cards">
+        <div class="mdl-card__title mdl-card--expand" routerLink="/tag">
+            <h2 class="mdl-card__title-text">
+                <i class="material-icons home--card__icon">local_offer</i>
+                <span class="home--card__text">Tag - Content Services</span>
+            </h2>
+        </div>
+    <div class="mdl-card__supporting-text">
+        Displays and adds tags to the node of your Content Services instance:
+        <ul class="home--feature-list">
+            <li>
+                <i class="material-icons home--feature-list__icon">brightness_1</i>
+                <span class="home--feature-list__text">Communication with Rest</span>
+                <a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
+            </li>
+        </ul>
+    </div>
+</div>

demo-shell-ng2/app/components/home/home.component.spec.ts

@@ -18,7 +18,7 @@
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { HomeComponent } from './home.component';
-import { CoreModule } from '@alfresco/adf-core';
+import { CoreModule } from 'ng2-alfresco-core';
 
 describe('HomeComponent', () => {
   beforeEach(() => {
@@ -30,7 +30,7 @@ describe('HomeComponent', () => {
   });
 
   it ('should work', () => {
-    const fixture = TestBed.createComponent(HomeComponent);
+    let fixture = TestBed.createComponent(HomeComponent);
     expect(fixture.componentInstance instanceof HomeComponent).toBe(true, 'should create HomeComponent');
   });
 });

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

@@ -18,8 +18,8 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector: 'app-home-view',
+    selector: 'home-view',
     templateUrl: './home.component.html',
-    styleUrls: ['./home.component.scss']
+    styleUrls: ['./home.component.css']
 })
 export class HomeComponent {}

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

@@ -0,0 +1,34 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { HomeComponent } from './home/home.component';
+export { DataTableDemoComponent } from './datatable/datatable-demo.component';
+export { SearchComponent } from './search/search.component';
+export { SearchBarComponent } from './search/search-bar.component';
+export { LoginDemoComponent } from './login/login-demo.component';
+export { ActivitiDemoComponent } from './activiti/activiti-demo.component';
+export { ActivitiShowDiagramComponent } from './activiti/activiti-show-diagram.component';
+export { FormViewer } from './activiti/form-viewer.component';
+export { WebscriptComponent } from './webscript/webscript.component';
+export { TagComponent } from './tag/tag.component';
+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 { ActivitiAppsView } 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

@@ -0,0 +1,35 @@
+.setting-button {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 1;
+}
+
+.settings {
+    border-radius: 8px;
+    position: absolute;
+    background-color: papayawhip;
+    color: cadetblue;
+    left: 10px;
+    top: 10px;
+    z-index: 1;
+}
+
+.toggle {
+    width: 120px;
+    margin: 20px;
+    padding: 5px;
+}
+
+@media (min-width: 721px) {
+    .mobile-settings {
+        display: none;
+    }
+}
+
+@media (max-width: 720px) {
+    .settings {
+        display: none;
+    }
+}
+

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

@@ -0,0 +1,61 @@
+<!--BPM, ECN AND CSRF TOGGLE-->
+
+<div class="settings">
+    <p class="toggle">
+        <label for="switch1" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+            <input type="checkbox" id="switch1" [checked]="isECM" class="mdl-switch__input"
+                   (click)="toggleECM()">
+            <span class="mdl-switch__label">Content Services</span>
+        </label>
+    </p>
+    <p class="toggle">
+        <label for="switch2" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+            <input type="checkbox" id="switch2" [checked]="isBPM" class="mdl-switch__input"
+                   (click)="toggleBPM()">
+            <span class="mdl-switch__label">Process Services</span>
+        </label>
+    </p>
+    <p class="toggle">
+        <label for="switch3" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+            <input type="checkbox" id="switch3" class="mdl-switch__input" [checked]="!disableCsrf" (click)="toggleCSRF()">
+            <span class="mdl-switch__label">CSRF</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>
+
+<alfresco-login #alfrescologin
+                [providers]="providers"
+                [fieldsValidation]="customValidation"
+                [disableCsrf]="disableCsrf"
+                (onSuccess)="onLogin($event)"
+                (onError)="onError($event)">
+    <div class="mobile-settings">
+        <p>
+            <label for="switch1-mobile" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+                <input type="checkbox" id="switch1-mobile" [checked]="isECM" class="mdl-switch__input"
+                       (click)="toggleECM()">
+                <span class="mdl-switch__label">Content Services</span>
+            </label>
+        </p>
+        <p>
+            <label for="switch2-mobile" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+                <input type="checkbox" id="switch2-mobile" [checked]="isBPM" class="mdl-switch__input"
+                       (click)="toggleBPM()">
+                <span class="mdl-switch__label">Process Services</span>
+            </label>
+        </p>
+        <p>
+            <label for="switch3-mobile" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+                <input type="checkbox" id="switch3-mobile" class="mdl-switch__input" [checked]="!disableCsrf" (click)="toggleCSRF()">
+                <span class="mdl-switch__label">CSRF</span>
+            </label>
+        </p>
+    </div>
+</alfresco-login>

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

@@ -0,0 +1,116 @@
+/*!
+ * @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, ViewChild, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Validators } from '@angular/forms';
+import { StorageService, LogService } from 'ng2-alfresco-core';
+
+@Component({
+    selector: 'login-demo',
+    templateUrl: './login-demo.component.html',
+    styleUrls: ['./login-demo.component.css']
+})
+export class LoginDemoComponent implements OnInit {
+
+    @ViewChild('alfrescologin')
+    alfrescologin: any;
+
+    providers: string = 'ECM';
+    customValidation: any;
+
+    disableCsrf: boolean = false;
+    isECM: boolean = true;
+    isBPM: boolean = false;
+    customMinLenght: number = 2;
+
+    constructor(private router: Router,
+                private storage: StorageService,
+                private logService: LogService) {
+        this.customValidation = {
+            username: ['', Validators.compose([Validators.required, Validators.minLength(this.customMinLenght)])],
+            password: ['', Validators.required]
+        };
+    }
+
+    ngOnInit() {
+        this.alfrescologin.addCustomValidationError('username', 'required', 'LOGIN.MESSAGES.USERNAME-REQUIRED');
+        this.alfrescologin.addCustomValidationError('username', 'minlength', 'LOGIN.MESSAGES.USERNAME-MIN', {minLenght: this.customMinLenght});
+        this.alfrescologin.addCustomValidationError('password', 'required', 'LOGIN.MESSAGES.PASSWORD-REQUIRED');
+
+        if (this.storage.hasItem('providers')) {
+            this.providers = this.storage.getItem('providers');
+        }
+
+        this.initProviders();
+    }
+
+    initProviders() {
+        if (this.providers === 'BPM') {
+            this.isECM = false;
+            this.isBPM = true;
+        } else if (this.providers === 'ECM') {
+            this.isECM = true;
+            this.isBPM = false;
+        } else if (this.providers === 'ALL') {
+            this.isECM = true;
+            this.isBPM = true;
+        }
+    }
+
+    onLogin($event) {
+        this.router.navigate(['/home']);
+    }
+
+    onError($event) {
+        this.logService.error($event);
+    }
+
+    toggleECM() {
+        this.isECM = !this.isECM;
+        this.storage.setItem('providers', this.updateProvider());
+    }
+
+    toggleBPM() {
+        this.isBPM = !this.isBPM;
+        this.storage.setItem('providers', this.updateProvider());
+    }
+
+    toggleCSRF() {
+        this.disableCsrf = !this.disableCsrf;
+    }
+
+    updateProvider() {
+        if (this.isBPM && this.isECM) {
+            this.providers = 'ALL';
+            return this.providers;
+        }
+
+        if (this.isECM) {
+            this.providers = 'ECM';
+            return this.providers;
+        }
+
+        if (this.isBPM) {
+            this.providers = 'BPM';
+            return this.providers;
+        }
+
+        this.providers = '';
+        return this.providers;
+    };
+}

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

@@ -0,0 +1,14 @@
+<alfresco-search-control *ngIf="isLoggedIn()"
+                         [searchTerm]="searchTerm"
+                         [autocomplete]="false"
+                         (searchSubmit)="onSearchSubmit($event);"
+                         (searchChange)="onSearchTermChange($event);"
+                         (expand)="onExpandToggle($event);"
+                         (fileSelect)="onItemClicked($event)">
+</alfresco-search-control>
+
+<alfresco-viewer *ngIf="fileShowed" [(showViewer)]="fileShowed"
+                 [fileNodeId]="fileNodeId"
+                 [overlayMode]="true">
+    <div class="mdl-spinner mdl-js-spinner is-active"></div>
+</alfresco-viewer>

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

@@ -0,0 +1,71 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, EventEmitter, Output } from '@angular/core';
+import { Router } from '@angular/router';
+import { AlfrescoAuthenticationService } from 'ng2-alfresco-core';
+import { MinimalNodeEntity } from 'alfresco-js-api';
+
+@Component({
+    selector: 'search-bar',
+    templateUrl: './search-bar.component.html'
+})
+export class SearchBarComponent {
+
+    fileNodeId: string;
+    fileShowed: boolean = false;
+    searchTerm: string = '';
+
+    @Output()
+    expand = new EventEmitter();
+
+    constructor(public router: Router,
+                public authService: AlfrescoAuthenticationService) {
+    }
+
+    isLoggedIn(): boolean {
+        return this.authService.isLoggedIn();
+    }
+
+    /**
+     * Called when the user submits the search, e.g. hits enter or clicks submit
+     *
+     * @param event Parameters relating to the search
+     */
+    onSearchSubmit(event) {
+        this.router.navigate(['/search', {
+            q: event.value
+        }]);
+    }
+
+    onItemClicked(event: MinimalNodeEntity) {
+        if (event.entry.isFile) {
+            this.fileNodeId = event.entry.id;
+            this.fileShowed = true;
+        } else if (event.entry.isFolder) {
+            this.router.navigate(['/files', event.entry.id]);
+        }
+    }
+
+    onSearchTermChange(event) {
+        this.searchTerm = event.value;
+    }
+
+    onExpandToggle(event) {
+        this.expand.emit(event);
+    }
+}

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

@@ -0,0 +1,12 @@
+<div class="search-results-container">
+    <h1>Search results</h1>
+    <alfresco-search (preview)="showFile($event)"></alfresco-search>
+</div>
+
+<div *ngIf="fileShowed">
+    <alfresco-viewer [(showViewer)]="fileShowed"
+                     [fileNodeId]="fileNodeId"
+                     [overlayMode]="true">
+        <div class="mdl-spinner mdl-js-spinner is-active"></div>
+    </alfresco-viewer>
+</div>

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

@@ -0,0 +1,63 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+    selector: 'search-component',
+    templateUrl: './search.component.html',
+    styles: [`
+        :host div.search-results-container {
+            padding: 0 20px 20px 20px;
+        }
+        :host h1 {
+            font-size: 22px;
+        }
+        :host tbody tr {
+            cursor: pointer;
+        }
+        @media screen and (max-width: 600px) {
+            :host .col-display-name {
+                min-width: 100px;
+            }
+            :host .col-modified-at, :host .col-modified-by {
+                display: none;
+            }
+            :host div.search-results-container table {
+                width: 100%;
+            }
+        }
+    `]
+})
+export class SearchComponent {
+
+    fileNodeId: string;
+    fileShowed: boolean = false;
+
+    constructor(public router: Router) {
+    }
+
+    showFile(event) {
+        if (event.value.entry.isFile) {
+            this.fileNodeId = event.value.entry.id;
+            this.fileShowed = true;
+        } else {
+            this.fileShowed = false;
+        }
+    }
+}

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

@@ -0,0 +1,35 @@
+.setting-card.mdl-card {
+    width: 100%;
+    height: 100%;
+}
+
+.setting-card > .mdl-card__title {
+    color: #fff;
+    background: bottom right 15% no-repeat #1fbcd2;
+}
+
+.setting-card-padding {
+    width: 50%;
+    display: table-cell;
+    vertical-align: middle;
+    margin: 0;
+}
+
+.setting-container {
+    display: table;
+    border-collapse: collapse;
+    border-spacing: 0;
+    width: 100%;
+}
+
+.icon-margin {
+    margin-right: 9px;
+}
+
+.table-row {
+    display: table-row;
+}
+
+.adf-setting-input-padding {
+    padding-top: 0px !important;
+}

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

@@ -0,0 +1,46 @@
+<div class="setting-container">
+    <div class="table-row">
+        <div class="setting-card-padding"></div>
+        <div class="setting-card mdl-card mdl-shadow--2dp">
+            <div class="mdl-card__title mdl-card--expand">
+                <h2 class="mdl-card__title-text">SETTINGS</h2>
+            </div>
+            <div class="mdl-card__actions mdl-card--border">
+                <div class="mdl-card__supporting-text">
+                    Content Services host URL configuration
+                </div>
+                <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}}">
+                        <label class="mdl-textfield__label" for="ecmHost">ECM Host</label>
+                        <span class="mdl-textfield__error">ECM host is not valid!</span>
+                    </div>
+                </nav>
+
+                <div class="mdl-card__supporting-text">
+                    Process Services host URL configuration
+                </div>
+                <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}}">
+                        <label class="mdl-textfield__label" for="bpmHost">BPM Host</label>
+                        <span class="mdl-textfield__error">BPM host is not valid!</span>
+                    </div>
+                </nav>
+            </div>
+            <div class="mdl-card__actions mdl-card--border">
+                <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" onclick="window.history.back()">
+                    Back
+                </a>
+                <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>
+</div>

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

@@ -0,0 +1,73 @@
+/*!
+ * @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, AfterViewChecked } from '@angular/core';
+import { AlfrescoSettingsService, StorageService, LogService } from 'ng2-alfresco-core';
+
+declare var componentHandler: any;
+
+@Component({
+    selector: 'app-settings',
+    templateUrl: 'settings.component.html',
+    styleUrls: ['settings.component.css']
+})
+export class SettingsComponent implements AfterViewChecked {
+
+    ecmHost: string;
+    bpmHost: string;
+
+    constructor(private settingsService: AlfrescoSettingsService,
+                private storage: StorageService,
+                private logService: LogService) {
+        this.ecmHost = storage.getItem('ecmHost') || this.settingsService.ecmHost;
+        this.bpmHost = storage.getItem('bpmHost') || this.settingsService.bpmHost;
+    }
+
+    ngAfterViewChecked() {
+        // workaround for MDL issues with dynamic components
+        if (componentHandler) {
+            componentHandler.upgradeAllRegistered();
+        }
+    }
+
+    public onChangeECMHost(event: KeyboardEvent): void {
+        let value = (<HTMLInputElement>event.target).value.trim();
+        if (value && this.isValidUrl(value)) {
+            this.logService.info(`ECM host: ${value}`);
+            this.ecmHost = value;
+            this.storage.setItem(`ecmHost`, value);
+        } else {
+            console.error('Ecm address does not match the pattern');
+        }
+    }
+
+    public onChangeBPMHost(event: KeyboardEvent): void {
+        let value = (<HTMLInputElement>event.target).value.trim();
+        if (value && this.isValidUrl(value)) {
+            this.logService.info(`BPM host: ${value}`);
+            this.bpmHost = value;
+            this.storage.setItem(`bpmHost`, value);
+        } else {
+            console.error('Bpm address does not match the pattern');
+        }
+    }
+
+    isValidUrl(url: string) {
+        return /^(http|https):\/\/.*/.test(url);
+    }
+
+}

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

@@ -0,0 +1,39 @@
+/*!
+ * @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: 'alfresco-social-demo',
+    template: `
+                <label for="nodeId"><b>Insert Node Id</b></label><br>
+                <input id="nodeId" type="text" size="48"  [(ngModel)]="nodeId"><br>
+                    <div class="mdl-grid">
+                      <div class="mdl-cell mdl-cell--4-col">
+                        Like component
+                        <adf-like [nodeId]="nodeId"></adf-like></div>
+                      <div class="mdl-cell mdl-cell--4-col">
+                        Rating component
+                        <adf-rating [nodeId]="nodeId"></adf-rating>
+                     </div>
+                    </div>
+    `
+})
+export class SocialComponent {
+
+    nodeId: string = '74cd8a96-8a21-47e5-9b3b-a1b3e296787d';
+}

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

@@ -0,0 +1,38 @@
+/*!
+ * @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: 'alfresco-tag-demo',
+    template: `
+                <label for="nodeId"><b>Insert Node Id</b></label><br>
+                <input id="nodeId" type="text" size="48"  [(ngModel)]="nodeId"><br>
+            <div class="mdl-grid">
+              <div class="mdl-cell mdl-cell--4-col"><alfresco-tag-node-actions-list [nodeId]="nodeId"></alfresco-tag-node-actions-list></div>
+              <div class="mdl-cell mdl-cell--4-col">List Tags Content Services <alfresco-tag-list></alfresco-tag-list></div>
+              <div class="mdl-cell mdl-cell--4-col">
+                    Tag list By Node ID
+                    <alfresco-tag-node-list [nodeId]="nodeId"></alfresco-tag-node-list>
+              </div>
+            </div>
+    `
+})
+export class TagComponent {
+
+    nodeId: string = '74cd8a96-8a21-47e5-9b3b-a1b3e296787d';
+}

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

@@ -0,0 +1,56 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from '@angular/core';
+import { LogService } from 'ng2-alfresco-core';
+
+@Component({
+    selector: 'alfresco-webscript-demo',
+    template: `
+        <label for="script-path"><b>Insert a scriptPath</b></label><br>
+        <input id="script-path" type="text" size="48" [(ngModel)]="scriptPath"><br>
+        <label for="context-root"><b>Insert a contextRoot</b></label><br>
+        <input id="context-root" type="text" size="48" [(ngModel)]="contextRoot"><br>
+        <label for="service-path"><b>Insert a servicePath</b></label><br>
+        <input id="service-path" type="text" size="48" [(ngModel)]="servicePath"><br>
+        <alfresco-webscript-get
+            [scriptPath]="scriptPath"
+            [scriptArgs]="scriptArgs"
+            [contextRoot]="contextRoot"
+            [servicePath]="servicePath"
+            [contentType]="'HTML'"
+            (onSuccess)= "logData($event)">
+        </alfresco-webscript-get>
+    `
+})
+export class WebscriptComponent {
+
+    currentPath: string = '/';
+    authenticated: boolean;
+    host: string = 'http://127.0.0.1:8080';
+    scriptPath: string = 'sample/folder/Company%20Home';
+    contextRoot: string = 'alfresco';
+    servicePath: string = 'service';
+    scriptArgs: string = '';
+
+    constructor(private logService: LogService) {
+    }
+
+    logData(data) {
+        this.logService.log(data);
+    }
+}

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 CreateFolderDialog {
+    value: string = '';
+}

demo-shell-ng2/app/main.ts

@@ -0,0 +1,27 @@
+/*!
+ * @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 { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { enableProdMode } from '@angular/core';
+import { AppModule } from './app.module';
+
+if (process.env.ENV === 'production') {
+  enableProdMode();
+}
+
+const platform = platformBrowserDynamic();
+platform.bootstrapModule(AppModule);

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 { MdSlideToggleModule, MdInputModule, MdSelectModule, MdDialogModule } 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

@@ -0,0 +1,17 @@
+import 'core-js/es6';
+import 'core-js/es7/reflect';
+import 'intl';
+
+require('zone.js/dist/zone'); // IE 8-11
+require('element.scrollintoviewifneeded-polyfill'); // IE/FF
+
+if (process.env.ENV === 'production') {
+    // Production
+
+} else {
+    // Development
+
+    Error['stackTraceLimit'] = Infinity;
+
+    require('zone.js/dist/long-stack-trace-zone');
+}

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

@@ -16,22 +16,22 @@
  */
 
 import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { AppConfigService, StorageService } from '@alfresco/adf-core';
+import { Http } from '@angular/http';
+import { AppConfigService, StorageService } from 'ng2-alfresco-core';
 
 @Injectable()
 export class DebugAppConfigService extends AppConfigService {
 
-    constructor(private storage: StorageService, http: HttpClient) {
+    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 <T>(<any>this.storage.getItem(key) || super.get<T>(key));
         }
         return super.get<T>(key);
-    }
+    };
 
 }

demo-shell-ng2/app/vendor.ts

@@ -0,0 +1,77 @@
+// Angular
+import '@angular/platform-browser';
+import '@angular/platform-browser-dynamic';
+import '@angular/core';
+import '@angular/common';
+import '@angular/http';
+import '@angular/router';
+
+// RxJS
+import 'rxjs';
+
+// hammerjs
+import 'hammerjs';
+
+// Alfresco
+import 'alfresco-js-api';
+import 'ng2-alfresco-core';
+import 'ng2-alfresco-datatable';
+import 'ng2-activiti-diagrams';
+import 'ng2-activiti-analytics';
+import 'ng2-activiti-form';
+import 'ng2-activiti-processlist';
+import 'ng2-activiti-tasklist';
+import 'ng2-alfresco-documentlist';
+import 'ng2-alfresco-login';
+import 'ng2-alfresco-search';
+import 'ng2-alfresco-tag';
+import 'ng2-alfresco-social';
+import 'ng2-alfresco-upload';
+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';
+
+// Load the Angular Material 2 stylesheet
+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 '../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-charts';
+import 'chart.js';
+require('script-loader!raphael/raphael.min.js');
+
+require('script-loader!moment/min/moment.min.js');
+
+import 'md-date-time-picker/dist/css/mdDateTimePicker.css';
+require('script-loader!md-date-time-picker/dist/js/mdDateTimePicker.min.js');
+require('script-loader!md-date-time-picker/dist/js/draggabilly.pkgd.min.js');
+
+require('pdfjs-dist/web/compatibility.js');
+
+// Setting worker path to worker bundle.
+let pdfjsLib = require('pdfjs-dist');
+if (process.env.ENV === 'production') {
+    pdfjsLib.PDFJS.workerSrc = './pdf.worker.js';
+} else {
+    pdfjsLib.PDFJS.workerSrc = '../../node_modules/pdfjs-dist/build/pdf.worker.js';
+}
+
+require('pdfjs-dist/web/pdf_viewer.js');
+require('three/build/three.min.js');
+
+// 3D viewer
+import 'three';
+import 'ng2-3d-editor';

demo-shell-ng2/assets/license_header.txt

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

demo-shell-ng2/config/karma-test-shim.js

@@ -0,0 +1,21 @@
+Error.stackTraceLimit = Infinity;
+
+require('core-js/es6');
+require('core-js/es7/reflect');
+
+require('zone.js/dist/zone');
+require('zone.js/dist/long-stack-trace-zone');
+require('zone.js/dist/proxy');
+require('zone.js/dist/sync-test');
+require('zone.js/dist/jasmine-patch');
+require('zone.js/dist/async-test');
+require('zone.js/dist/fake-async-test');
+
+var appContext = require.context('../app', true, /\.spec\.ts/);
+
+appContext.keys().forEach(appContext);
+
+var testing = require('@angular/core/testing');
+var browser = require('@angular/platform-browser-dynamic/testing');
+
+testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());

demo-shell-ng2/config/karma.conf.js

@@ -0,0 +1,73 @@
+var webpackConfig = require('./webpack.test');
+
+module.exports = function (config) {
+    var _config = {
+        basePath: '',
+
+        frameworks: ['jasmine'],
+
+        files: [
+            './node_modules/hammerjs/hammer.js',
+
+            { pattern: './config/karma-test-shim.js', watched: false }
+        ],
+
+        preprocessors: {
+            './config/karma-test-shim.js': ['webpack', 'sourcemap']
+        },
+
+        webpack: webpackConfig,
+
+        webpackMiddleware: {
+            stats: 'errors-only'
+        },
+
+        port: 9876,
+
+        // level of logging
+        // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+        logLevel: config.LOG_INFO,
+
+        colors: true,
+
+        autoWatch: true,
+
+        captureTimeout: 180000,
+        browserDisconnectTimeout: 180000,
+        browserDisconnectTolerance: 3,
+        browserNoActivityTimeout: 300000,
+
+        browsers: ['Chrome'],
+
+        customLaunchers: {
+            Chrome_travis_ci: {
+                base: 'Chrome',
+                flags: ['--no-sandbox']
+            }
+        },
+
+        // Karma plugins loaded
+        plugins: [
+            require('../node_modules/karma-jasmine'),
+            require('../node_modules/karma-coverage'),
+            require('../node_modules/karma-sourcemap-loader'),
+            require('../node_modules/karma-chrome-launcher'),
+            require('../node_modules/karma-mocha-reporter'),
+            require('../node_modules/karma-webpack'),
+            require('../node_modules/karma-jasmine-html-reporter')
+        ],
+
+        webpackServer: {
+            noInfo: true
+        },
+
+        reporters: ['mocha']
+
+    };
+
+    if (process.env.TRAVIS) {
+        config.browsers = ['Chrome_travis_ci'];
+    }
+
+    config.set(_config);
+};

demo-shell-ng2/config/loaders/debug.js

@@ -0,0 +1,5 @@
+module.exports = function(source) {
+    this.cacheable();
+    console.log(this.resource);
+    return source;
+}

demo-shell-ng2/config/loaders/system.js

@@ -0,0 +1,27 @@
+const moduleIdRegex = /moduleId: module.id,/g;
+const moduleNameRegex = /moduleId: __moduleName,/g;
+const moduleIdPath = /module.id.replace/g;
+
+module.exports = function(source) {
+    this.cacheable();
+
+    if (moduleIdRegex.test(source)) {
+        source = source.replace(moduleIdRegex, (match) => {
+                return `// ${match}`;
+    });
+    }
+
+    if (moduleNameRegex.test(source)) {
+        source = source.replace(moduleNameRegex, (match) => {
+                return `// ${match}`;
+    });
+    }
+
+    if (moduleIdPath.test(source)) {
+        source = source.replace(moduleIdPath, (match) => {
+                return `''.replace`;
+    });
+    }
+
+    return source;
+}

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

@@ -0,0 +1,177 @@
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const helpers = require('./helpers');
+const path = require('path');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+
+module.exports = {
+    entry: {
+        'polyfills': './app/polyfills.ts',
+        'vendor': './app/vendor.ts',
+        'app': './app/main.ts'
+    },
+
+    resolveLoader: {
+        alias: {
+            "license-check": path.resolve(__dirname, "./loaders/license-check")
+        }
+    },
+
+    module: {
+        rules: [
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                include: [helpers.root('app'), helpers.root('../ng2-components')],
+                loader: 'source-map-loader',
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                loader: 'tslint-loader',
+                include: [helpers.root('app')],
+                options: {
+                    emitErrors: true
+                },
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                use: 'source-map-loader',
+                exclude: [ /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.html$/,
+                loader: 'html-loader',
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.css$/,
+                exclude: [helpers.root('app'), helpers.root('../ng2-components')],
+                loader: ExtractTextPlugin.extract({
+                    fallback: 'style-loader',
+                    use: 'css-loader?sourceMap'
+                })
+            },
+            {
+                test: /\.css$/,
+                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]'
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                loader: 'license-check',
+                include: helpers.root('app'),
+                options: {
+                    emitErrors: true,
+                    licenseFile: path.resolve(__dirname, '../assets/license_header.txt')
+                },
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/],
+            }
+        ]
+    },
+
+    plugins: [
+        new ForkTsCheckerWebpackPlugin(),
+        // Workaround for angular/angular#11580
+        new webpack.ContextReplacementPlugin(
+            // The (\\|\/) piece accounts for path separators in *nix and Windows
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./app'), // location of your src
+            {} // a map of your routes
+        ),
+        new HtmlWebpackPlugin({
+            template: './index.html'
+        }),
+
+        new CopyWebpackPlugin([
+            {
+                context: 'resources/i18n',
+                from: '**/*.json',
+                to: 'resources/i18n'
+            },
+            {
+                from: 'app.config-dev.json'
+            },
+            {
+                from: 'app.config-prod.json'
+            },
+            {
+                from: 'favicon-96x96.png'
+            },
+            {
+                from: 'node_modules/pdfjs-dist/build/pdf.worker.js',
+                to: 'pdf.worker.js'
+            },
+            {
+                context: 'public',
+                from: '',
+                to: ''
+            },
+            {
+                from: 'versions.json'
+            }
+        ]),
+
+        new webpack.optimize.CommonsChunkPlugin({
+            name: ['app', 'vendor', 'polyfills']
+        })
+    ],
+
+    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': ''
+                }
+            }
+        }
+    },
+
+    node: {
+        fs: 'empty'
+    }
+};

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

@@ -0,0 +1,105 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
+const path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+var HappyPack = require('happypack');
+
+const alfrescoLibs = [
+    'ng2-activiti-analytics',
+    'ng2-activiti-diagrams',
+    'ng2-activiti-form',
+    'ng2-activiti-processlist',
+    'ng2-activiti-tasklist',
+    'ng2-alfresco-core',
+    'ng2-alfresco-datatable',
+    'ng2-alfresco-documentlist',
+    'ng2-alfresco-login',
+    'ng2-alfresco-search',
+    'ng2-alfresco-tag',
+    'ng2-alfresco-upload',
+    'ng2-alfresco-userinfo',
+    'ng2-alfresco-viewer',
+    'ng2-alfresco-webscript'
+];
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'cheap-module-eval-source-map',
+
+    output: {
+        path: helpers.root('dist'),
+        filename: '[name].js',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    module: {
+        rules: [
+            {
+                test: /\.ts$/,
+                include: [helpers.root('app'), helpers.root('../ng2-components')],
+                loader: [
+                    'happypack/loader?id=ts','angular2-template-loader'
+                ],
+                exclude: [/node_modules/, /public/, /resources/, /dist/]
+            }
+        ]
+    },
+
+    resolve: {
+        alias: {
+            "ng2-alfresco-core$": path.resolve(__dirname, '../../ng2-components/ng2-alfresco-core/index.ts'),
+            "ng2-alfresco-datatable$": path.resolve(__dirname, '../../ng2-components/ng2-alfresco-datatable/index.ts'),
+            "ng2-activiti-form/stencils/runtime.ng1$": path.resolve(__dirname, '../../ng2-components/ng2-activiti-form/stencils/runtime.ng1'),
+            "ng2-activiti-form/stencils/runtime.adf$": path.resolve(__dirname, '../../ng2-components/ng2-activiti-form/stencils/runtime.adf'),
+            "ng2-activiti-diagrams$": path.resolve(__dirname, '../../ng2-components/ng2-activiti-diagrams/index.ts'),
+            "ng2-activiti-analytics$": path.resolve(__dirname, '../../ng2-components/ng2-activiti-analytics/index.ts'),
+            "ng2-activiti-form$": path.resolve(__dirname, '../../ng2-components/ng2-activiti-form/index.ts'),
+            "ng2-activiti-tasklist$": path.resolve(__dirname, '../../ng2-components/ng2-activiti-tasklist/index.ts'),
+            "ng2-activiti-processlist$": path.resolve(__dirname, '../../ng2-components/ng2-activiti-processlist/index.ts'),
+            "ng2-alfresco-documentlist$": path.resolve(__dirname, '../../ng2-components/ng2-alfresco-documentlist/index.ts'),
+            "ng2-alfresco-login$": path.resolve(__dirname, '../../ng2-components/ng2-alfresco-login/index.ts'),
+            "ng2-alfresco-search$": path.resolve(__dirname, '../../ng2-components/ng2-alfresco-search/index.ts'),
+            "ng2-alfresco-social$": path.resolve(__dirname, '../../ng2-components/ng2-alfresco-social/index.ts'),
+            "ng2-alfresco-tag$": path.resolve(__dirname, '../../ng2-components/ng2-alfresco-tag/index.ts'),
+            "ng2-alfresco-upload$": path.resolve(__dirname, '../../ng2-components/ng2-alfresco-upload/index.ts'),
+            "ng2-alfresco-viewer$": path.resolve(__dirname, '../../ng2-components/ng2-alfresco-viewer/index.ts'),
+            "ng2-alfresco-webscript$": path.resolve(__dirname, '../../ng2-components/ng2-alfresco-webscript/index.ts'),
+            "ng2-alfresco-userinfo$": path.resolve(__dirname, '../../ng2-components/ng2-alfresco-userinfo/index.ts')
+        },
+        extensions: ['.ts', '.js'],
+        modules: [path.resolve(__dirname, '../node_modules')]
+    },
+
+    plugins: [
+        new HappyPack({
+            id: 'ts',
+            threads: 8,
+            loaders: [
+                {
+                    path: 'ts-loader',
+                    query: {happyPackMode: true}
+                }
+            ]
+        }),
+
+        new webpack.NoEmitOnErrorsPlugin(),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        }),
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `../ng2-components/${lib}/src/i18n/`,
+                    from: '**/*',
+                    to: `assets/${lib}/i18n/`
+                }
+            })
+        ])
+    ]
+});

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

@@ -0,0 +1,107 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+var HappyPack = require('happypack');
+
+const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
+
+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: 'eval',
+
+    output: {
+        path: helpers.root('dist'),
+        publicPath: '/',
+        filename: '[name].[hash].js',
+        chunkFilename: '[id].[hash].chunk.js'
+    },
+
+    resolve: {
+        extensions: ['.ts', '.js'],
+        modules: [helpers.root('node_modules')]
+    },
+
+    module: {
+        rules: [
+            {
+                test: /\.ts$/,
+                include: [helpers.root('app'), helpers.root('../ng2-components')],
+                use: ['happypack/loader?id=ts', 'angular2-template-loader'],
+                exclude: [/node_modules/, /public/, /resources/, /dist/]
+            }
+        ]
+    },
+
+    plugins: [
+        new HappyPack({
+            id: 'ts',
+            threads: 4,
+            loaders: [
+                {
+                    path: 'ts-loader',
+                    query: {
+                        happyPackMode: true,
+                        "compilerOptions": {
+                            "paths": {}
+                        }
+                    }
+                }
+            ]
+        }),
+
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `node_modules/${lib}/bundles/assets/`,
+                    from: '**/*',
+                    to: `assets/`
+                }
+            })
+        ]),
+        new webpack.NoEmitOnErrorsPlugin(),
+        new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
+            mangle: {
+                keep_fnames: true
+            },
+            compress: {
+                warnings: false
+            },
+            output: {
+                comments: false
+            },
+            sourceMap: true
+        }),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+    ]
+});

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

@@ -0,0 +1,58 @@
+const webpack = require('webpack');
+const helpers= require('./helpers');
+var HappyPack = require('happypack');
+
+module.exports = {
+
+    devtool: 'inline-source-map',
+
+    resolve: {
+        extensions: ['.ts', '.js'],
+        modules: [helpers.root('../ng2-components'), helpers.root('node_modules')]
+    },
+
+    module: {
+        rules: [
+            {
+                test: /\.ts$/,
+                loaders: ['happypack/loader?id=ts', 'angular2-template-loader'],
+                exclude: [ /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.html$/,
+                loader: 'html-loader',
+                exclude: [ /public/, /resources/, /dist/]
+
+            },
+            {
+                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
+                loader: 'null-loader'
+            },
+            {
+                test: /\.css$/,
+                loader: ['to-string-loader', 'css-loader'],
+                exclude: [ /public/, /resources/, /dist/]
+            }
+        ]
+    },
+
+    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/,
+            helpers.root('./src'), // location of your src
+            {} // a map of your routes
+        )
+    ]
+}

demo-shell-ng2/index.html

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <base href="/">
+    <title>Demo Application - Angular 2</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
+
+    <!--[if IE]>
+    <script src=js/shim.min.js></script>
+    <script src=//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js></script>
+    <script src=js/classlist-polyfill.js></script>
+    <script src=js/web-animations.min.js></script>
+    <script src=js/typedarray.js></script>
+    <script src=js/Blob.js></script>
+    <script src=js/formdata.js></script>
+    <script src=https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js></script>
+    <script src=js/es5-shim.min.js></script>
+    <script src=js/es6-shim.min.js></script>
+    <script src=js/system-polyfills.js></script>
+    <![endif]-->
+
+    <style>
+        .loader-container {
+            display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
+            display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
+            display: -webkit-flex;     /* NEW - Chrome */
+            display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
+            -webkit-box-flex-direction: row;
+            -moz-box-flex-direction: row;
+            -webkit-flex-direction: row;
+            flex-direction: row;
+            height:100%;
+        }
+
+        .loader-item {
+            margin: auto;
+            max-height:100px;
+            max-width:300px;
+        }
+
+        .loader-text{
+            white-space: nowrap;
+            text-align: center;
+            position: relative;
+        }
+
+    </style>
+</head>
+<!-- 3. Display the application -->
+<body>
+<alfresco-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"
+                 data-upgraded=",MaterialProgress">
+                <div class="progressbar bar bar1" style="width: 0%;"></div>
+                <div class="bufferbar bar bar2" style="width: 100%;"></div>
+                <div class="auxbar bar bar3" style="width: 0%;"></div>
+            </div>
+            <div id="loader-text" class="loader-text">Loading Demo Shell..</div>
+        </div>
+    </div>
+</alfresco-app>
+</body>
+</html>
+

demo-shell-ng2/karma.conf.js

@@ -0,0 +1 @@
+module.exports = require('./config/karma.conf.js');

demo-shell-ng2/package.json

@@ -0,0 +1,146 @@
+{
+  "name": "Alfresco-Angular2-Demo",
+  "description": "Demo shell for Alfresco Angular2 components",
+  "version": "1.6.0-beta6",
+  "author": "Alfresco Software, Ltd.",
+  "scripts": {
+    "build": "npm run server-versions && rimraf dist && npm run webpack -- --config  config/webpack.prod.js --progress --profile --bail",
+    "build:dev": "npm run server-versions && rimraf dist && npm run webpack -- --config  config/webpack.dev.js --progress --profile --bail",
+    "start:dist": "npm run server-versions && wsrv -s dist/ -p 3000 -a 0.0.0.0",
+    "start": "npm run server-versions && npm run webpack-dev-server -- --config config/webpack.prod.js --progress  --content-base app/",
+    "start:dev": "npm run server-versions && npm run webpack-dev-server -- --config config/webpack.dev.js --progress --content-base app/",
+    "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'",
+    "server-versions": "rimraf versions.json && npm list --depth=0 --json=true --prod=true > versions.json  || exit 0",
+    "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"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Alfresco/alfresco-ng2-components.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
+  },
+  "license": "Apache-2.0",
+  "contributors": [
+    {
+      "name": "Denys Vuika",
+      "email": "denis.vuyka@gmail.com"
+    },
+    {
+      "name": "Mario Romano",
+      "email": "mario.romano83@gmail.com"
+    },
+    {
+      "name": "Will Abson",
+      "email": "will.abson@alfresco.com"
+    },
+    {
+      "name": "Eugenio Romano",
+      "email": "eugenio.romano@alfresco.com"
+    },
+    {
+      "name": "Maurizio Vitale",
+      "email": "maurizio.vitale@alfresco.com"
+    }
+  ],
+  "keywords": [
+    "ng2",
+    "angular",
+    "angular2",
+    "alfresco"
+  ],
+  "dependencies": {
+    "@angular/animations": "~4.0.0",
+    "@angular/common": "~4.0.0",
+    "@angular/compiler": "~4.0.0",
+    "@angular/compiler-cli": "~4.0.0",
+    "@angular/core": "~4.0.0",
+    "@angular/forms": "~4.0.0",
+    "@angular/http": "~4.0.0",
+    "@angular/material": "2.0.0-beta.6",
+    "@angular/platform-browser": "~4.0.0",
+    "@angular/platform-browser-dynamic": "~4.0.0",
+    "@angular/router": "~4.0.0",
+    "@ngx-translate/core": "^7.0.0",
+    "alfresco-js-api": "~1.6.0-beta6",
+    "chart.js": "2.5.0",
+    "core-js": "2.4.1",
+    "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",
+    "md-date-time-picker": "2.2.0",
+    "moment": "2.15.1",
+    "ng2-3d-editor": "0.0.15",
+    "ng2-activiti-analytics": "1.6.0-beta6",
+    "ng2-activiti-diagrams": "1.6.0-beta6",
+    "ng2-activiti-form": "1.6.0-beta6",
+    "ng2-activiti-processlist": "1.6.0-beta6",
+    "ng2-activiti-tasklist": "1.6.0-beta6",
+    "ng2-alfresco-core": "1.6.0-beta6",
+    "ng2-alfresco-datatable": "1.6.0-beta6",
+    "ng2-alfresco-documentlist": "1.6.0-beta6",
+    "ng2-alfresco-login": "1.6.0-beta6",
+    "ng2-alfresco-search": "1.6.0-beta6",
+    "ng2-alfresco-social": "1.6.0-beta6",
+    "ng2-alfresco-tag": "1.6.0-beta6",
+    "ng2-alfresco-upload": "1.6.0-beta6",
+    "ng2-alfresco-userinfo": "1.6.0-beta6",
+    "ng2-alfresco-viewer": "1.6.0-beta6",
+    "ng2-alfresco-webscript": "1.6.0-beta6",
+    "ng2-charts": "^1.6.0",
+    "pdfjs-dist": "1.5.404",
+    "raphael": "2.2.7",
+    "reflect-metadata": "0.1.9",
+    "rxjs": "5.1.0",
+    "zone.js": "0.8.11"
+  },
+  "devDependencies": {
+    "@types/hammerjs": "^2.0.34",
+    "@types/jasmine": "2.5.35",
+    "@types/node": "6.0.45",
+    "angular2-template-loader": "^0.6.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",
+    "fork-ts-checker-webpack-plugin": "^0.2.3",
+    "happypack": "3.0.0",
+    "html-loader": "^0.4.4",
+    "html-webpack-plugin": "^2.28.0",
+    "jasmine-core": "^2.5.2",
+    "karma": "^1.4.1",
+    "karma-chrome-launcher": "2.0.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",
+    "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",
+    "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"
+  }
+}

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

@@ -0,0 +1,90 @@
+/* Utils */
+body, html {
+    height: 100%;
+}
+
+.p-10 {
+    padding: 10px;
+}
+
+.m-10 {
+    margin: 10px;
+}
+
+.loader-container {
+    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
+    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
+    display: -webkit-flex; /* NEW - Chrome */
+    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
+    -webkit-box-flex-direction: row;
+    -moz-box-flex-direction: row;
+    -webkit-flex-direction: row;
+    flex-direction: row;
+    height: 100%;
+}
+
+.loader-item {
+    margin: auto;
+    max-height: 100px;
+    max-width: 300px;
+}
+
+.loader-text {
+    white-space: nowrap;
+    text-align: center;
+    position: relative;
+}
+
+._dialog_overlay {
+    position: static !important;
+}
+
+.main_header_adf .mdl-layout__drawer-button {
+    right: 0 !important;
+    left: initial !important;
+    left: auto;
+}
+
+.mdl-layout__header {
+    color: rgb(255, 255, 255);
+    background-color: rgb(31, 188, 210);
+}
+
+.mdl-layout__header .material-icons {
+    color: rgb(255, 255, 255);
+}
+
+.mdl-layout__header-row .mdl-navigation__link {
+    color: rgb(255, 255, 255);
+}
+
+.md-simple-snackbar-action {
+    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

@@ -0,0 +1,107 @@
+@font-face {
+    font-family: Muli;
+    src: url(../fonts/Muli-Regular.ttf);
+}
+
+html, body {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}
+
+h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}
+
+h1, h2 {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}
+
+h3, h4 {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}
+
+h5, h6 {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+    margin: 24px 0 16px
+}
+
+blockquote {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}
+
+input {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}
+
+.mdl-typography--display-4, .mdl-typography--display-4-color-contrast {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}
+
+.mdl-typography--display-3, .mdl-typography--display-3-color-contrast {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}
+
+.mdl-typography--display-2, .mdl-typography--display-2-color-contrast {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}
+
+.mdl-typography--display-1, .mdl-typography--display-1-color-contrast {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+
+}
+
+.mdl-typography--headline, .mdl-typography--headline-color-contrast {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}
+
+.mdl-typography--title, .mdl-typography--title-color-contrast {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}
+
+.mdl-typography--subhead, .mdl-typography--subhead-color-contrast {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}
+
+.mdl-typography--body-2-force-preferred-font, .mdl-typography--body-2-force-preferred-font-color-contrast {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}
+
+.mdl-typography--body-1-force-preferred-font, .mdl-typography--body-1-force-preferred-font-color-contrast {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}
+
+
+.mdl-typography--caption-force-preferred-font {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif
+}
+
+.mdl-typography--caption-force-preferred-font-color-contrast, .mdl-typography--menu {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif
+}
+
+.mdl-typography--menu-color-contrast, .mdl-typography--button, .mdl-typography--button-color-contrast {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}
+
+.mdl-badge[data-badge]:after {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}
+
+.mdl-button {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}
+
+.mdl-list__item {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}
+
+.mdl-layout__title, .mdl-layout-title {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}
+
+.mdl-snackbar {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}
+
+.mdl-snackbar__action {
+    font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+}