[ADF-1026] i18n support for "empty" screen (#2066)

* i18n support for "empty" screen

* fix unit tests

* fix tests

* fix tests

.dockerignore

@@ -1,12 +0,0 @@
-.git
-.github
-.vscode
-coverage
-docs
-e2e
-node_modules
-scripts
-src
-lib
-integration
-/demo-shell/config/

.editorconfig

@@ -1,4 +1,5 @@
-# Editor configuration, see http://editorconfig.org
+# http://editorconfig.org
+
 root = true
 
 [*]
@@ -9,15 +10,10 @@ end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true
 
-[*.json]
+[package.json]
 indent_style = space
 indent_size = 2
 
 [*.md]
-max_line_length = off
-trim_trailing_whitespace = false
-
-[resources/*.json]
-indent_size = 2
-max_line_length = off
+insert_final_newline = false
 trim_trailing_whitespace = false

.gitignore

@@ -1,11 +1,8 @@
 *.log
 node_modules
-bundles
 workspace.xml
 .idea/
 dist/
-e2e-output/
-e2e/downloads/
 ng2-components/coverage/
 !systemjs.config.js
 demo-shell-ng2/app/components/router/
@@ -18,14 +15,4 @@ src/environments/
 *.npmrc
 /demo-shell-ng2/ng2-components/
 .happypack/
-.history
-/ng2-components/ng2-alfresco-core/prebuilt-themes/
-.ng_pkg_build/
-/demo-shell/dist-dev-temp/
-/lib/export-new.json
-/lib/config/exportCheck.js
-/lib/config/export-check/export-new.json
-/lib/config/export-check/exportCheck.js
-/docs/sourceinfo
-/docs/docs.json
-/protractorFailuresReport
+.happypack/

.travis.yml

@@ -1,134 +1,50 @@
 language: node_js
 dist: trusty
-sudo: required
+sudo: false
 node_js:
- # Use the explicit NodeJS LTS version 8.9.4 to avoid any automatic upgrade of the version.
-  - '8.9.4'
-
-addons:
-    chrome: stable
-before_script:
-    - "sudo chown root /opt/google/chrome/chrome-sandbox"
-    - "sudo chmod 4755 /opt/google/chrome/chrome-sandbox"
+  - "8"
 
 before_install:
-    - export CHROME_BIN=chromium-browser
-    - export DISPLAY=:99.0
-    - sh -e /etc/init.d/xvfb start
-    - sleep 3 # give xvfb some time to start
+  - "export DISPLAY=:99.0"
+  - "sh -e /etc/init.d/xvfb start"
 
-jobs:
-    include:
-        - stage: Warm Up Cache
-          script:  if ([ "$TRAVIS_BRANCH" = "master" ]); then
-                (./scripts/npm-build-all.sh  || exit 1;);
-            else
-                (./scripts/update-version.sh -gnu -alpha && ././scripts/npm-build-all.sh -sb --skip-lint || exit 1;);
-            fi
-        - stage: Lint
-          script:
-            - ./scripts/lint.sh
-            - npm run spellcheck
-        - stage: Unit test
-          env: STAGE=core
-          script:  (./scripts/npm-build-all.sh -si -sb -t "core" --skip-lint || exit 1;);
-        - stage: Unit test
-          env: STAGE=extensions
-          script:  (./scripts/npm-build-all.sh -si -sb -t "extensions" --skip-lint || exit 1;);
-        - stage: Unit test
-          env: STAGE=process-services
-          script: (./scripts/npm-build-all.sh -si -sb -t "process-services" --skip-lint|| exit 1;);
-        - stage: Unit test
-          env: STAGE=insights
-          script:  (./scripts/npm-build-all.sh -si -sb -t "insights" --skip-lint || exit 1;);
-        - stage: Unit test
-          env: STAGE=content-services
-          script:  (./scripts/npm-build-all.sh -si -sb -t "content-services" --skip-lint|| exit 1;);
-        - stage: Unit test
-          env: STAGE=process-services-cloud
-          script: (./scripts/npm-build-all.sh -si -sb -t "process-services-cloud" --skip-lint|| exit 1;);
-        - stage: Unit test
-          env: STAGE=demo-shell
-          script:   if ([ "$TRAVIS_BRANCH" = "master" ]); then
-                            (./scripts/start.sh -t -ss || exit 1;);
-                       else
-                            (./scripts/start.sh -dev -t -ss -vjsapi alpha || exit 1;);
-                    fi
-        - stage: Packaging test
-          script:  (npm run build-lib || exit 1;) && node ./scripts/upload-build-lib-in-cs.js -u "$E2E_USERNAME"  -p "$E2E_PASSWORD" --host "$E2E_HOST" -f $TRAVIS_BUILD_NUMBER
-        - stage: Update children projects dependency #Update generator-ng2-alfresco-app
-          if: tag =~ .*beta.*
-          script: ./scripts/update-project.sh -gnu -t $GITHUB_TOKEN -n generator-ng2-alfresco-app
-        - stage: Update children projects dependency # Test Update alfresco-content-app
-          if: tag =~ .*beta.*
-          script: ./scripts/update-project.sh -gnu -t $GITHUB_TOKEN -n alfresco-content-app
-        - stage: Update children projects dependency # Test Update adf-app-manager-ui
-          if: tag =~ .*beta.*
-          script: ./scripts/update-project.sh -gnu -t $GITHUB_TOKEN -n adf-app-manager-ui
-        - stage: Update children projects dependency # Test Update aalfresco-ng2-components
-          if: tag =~ .*beta.*
-          script: ./scripts/update-project.sh -gnu -t $GITHUB_TOKEN -n alfresco-ng2-components
-        - stage: Update children projects dependency # Test Update alfresco-modeler-app
-          if: tag =~ .*beta.*
-          script: ./scripts/update-project.sh -gnu -t $GITHUB_TOKEN -n alfresco-modeler-app
-        - stage: Create Shell dist
-          script: rm -rf ./node_modules/@alfresco; node ./scripts/download-build-lib-in-cs.js -u "$E2E_USERNAME"  -p "$E2E_PASSWORD" --host "$E2E_HOST" -f $TRAVIS_BUILD_NUMBER || exit 1; npm run build:dist || exit 1; node ./scripts/upload-build-in-cs.js -u "$E2E_USERNAME"  -p "$E2E_PASSWORD" --host "$E2E_HOST" -f  $TRAVIS_BUILD_NUMBER || exit 1
-        - stage: e2e Test # Test core
-          env: STAGE=core
-          script: node ./scripts/download-build-in-cs.js --username "$E2E_USERNAME" --password "$E2E_PASSWORD" --host "$E2E_HOST" --folder $TRAVIS_BUILD_NUMBER; ./scripts/test-e2e-lib.sh -host localhost:4200 -proxy "$E2E_HOST" -u "$E2E_USERNAME" -p "$E2E_PASSWORD" -e $E2E_EMAIL -b -save --folder core --skip-lint --use-dist --timeout 7000
-        - stage: e2e Test # Test process-services
-          env: STAGE=process-services
-          script: node ./scripts/download-build-in-cs.js --username "$E2E_USERNAME" --password "$E2E_PASSWORD" --host "$E2E_HOST" --folder $TRAVIS_BUILD_NUMBER; ./scripts/test-e2e-lib.sh -host localhost:4200 -proxy "$E2E_HOST" -u "$E2E_USERNAME" -p "$E2E_PASSWORD" -e $E2E_EMAIL -b -save --folder process-services --skip-lint --use-dist --timeout 7000
-        - stage: e2e Test # Test content-services
-          env: STAGE=content-services
-          script: node ./scripts/download-build-in-cs.js --username "$E2E_USERNAME" --password "$E2E_PASSWORD" --host "$E2E_HOST" --folder $TRAVIS_BUILD_NUMBER; ./scripts/test-e2e-lib.sh -host localhost:4200 -proxy "$E2E_HOST" -u "$E2E_USERNAME" -p "$E2E_PASSWORD" -e $E2E_EMAIL -b -save --folder content-services --skip-lint --use-dist --timeout 7000
-        - stage: e2e Test # Test process-services
-          env: STAGE=process-services-cloud
-          script: node ./scripts/download-build-in-cs.js --username "$E2E_USERNAME" --password "$E2E_PASSWORD" --host "$E2E_HOST" --folder $TRAVIS_BUILD_NUMBER; ./scripts/test-e2e-lib.sh -host localhost:4200 -proxy "$E2E_HOST" -u "$E2E_USERNAME" -p "$E2E_PASSWORD" -e $E2E_EMAIL -b -save --folder process-services-cloud --skip-lint --use-dist --timeout 7000
-        - stage: e2e Test # Test insights
-          env: STAGE=insights
-          script: node ./scripts/download-build-in-cs.js --username "$E2E_USERNAME" --password "$E2E_PASSWORD" --host "$E2E_HOST" --folder $TRAVIS_BUILD_NUMBER; ./scripts/test-e2e-lib.sh -host localhost:4200 -proxy "$E2E_HOST" -u "$E2E_USERNAME" -p "$E2E_PASSWORD" -e $E2E_EMAIL -b -save --folder insights --skip-lint --use-dist --timeout 7000
-#        - stage: Test Update version 2.0.0
-#          if: branch = development
-#          env: STAGE=test-BC
-#          script: ./scripts/test-e2e-bc.sh -b $TRAVIS_BUILD_NUMBER
-#        - stage: Test Update version 2.0.0
-#          env: STAGE=test-export
-#          script: npm run test-export
-        - stage: Create Docker PR
-          script: node ./scripts/download-build-in-cs.js --username "$E2E_USERNAME" --password "$E2E_PASSWORD" --host "$E2E_HOST" --folder $TRAVIS_BUILD_NUMBER --base-href $TRAVIS_BUILD_NUMBER && (./scripts/pr-publish.sh -n $TRAVIS_BUILD_NUMBER -r $REPO_DOCKER -u $USERNAME_DOCKER -p $PASSWORD_DOCKER || exit 1)
-        - stage: Deploy Docker PR
-          script: node --no-deprecation ./scripts/pr-deploy.js -n $TRAVIS_BUILD_NUMBER -u $RANCHER_TOKEN -p $RANCHER_SECRET -s $REPO_RANCHER --image "docker:$REPO_DOCKER/adf/demo-shell:$TRAVIS_BUILD_NUMBER" --env $ENVIRONMENT_NAME -r $ENVIRONMENT_URL || exit 1
+env:
+  matrix:
+    - MODULE=ng2-components-alfresco
+    - MODULE=ng2-components-activiti
+    - MODULE=ng2-demo-shell
 
-# 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
+install:
+    - 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  -gitjsapi development || exit 1;);
+        fi
+      fi
 
+script:
+    - if ([ "$MODULE" == "ng2-components-activiti" ]); then
+            (./scripts/npm-build-all.sh -si -sb -t "ng2-activiti*" || exit 1;);
+      fi
+    - if ([ "$MODULE" == "ng2-components-alfresco" ]); then
+            (./scripts/npm-build-all.sh -si -sb -t "ng2-alfresco*" || exit 1;);
+      fi
+    - 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 -gitjsapi development || exit 1;);
+       fi
+      fi
 
 # Send coverage data to codecov
 after_success:
-    bash <(curl -s https://codecov.io/bash) -X gcov
-
+  bash <(curl -s https://codecov.io/bash) -X gcov
 
 cache:
   directories:
-  - node_modules
+  - ./node_modules/material-design-lite
+  - ./node_modules/material-design-icons
+  - demo-shell-ng2/node_modules
+  - ng2-components/node_modules

.vscode/settings.json

@@ -1,23 +1,13 @@
 // Place your settings in this file to overwrite default and user settings.
 {
-  "files.exclude": {
-    "**/.git": true,
-    "**/.svn": true,
-    "**/.hg": true,
-    "**/.DS_Store": true,
-    "**/coverage": true,
-    "**/.happypack": true
-  },
-  "editor.renderIndentGuides": true,
-  "markdownlint.config": {
-    "MD032": false,
-    "MD004": false,
-    "MD024": false,
-    "MD009": false,
-    "MD013": false,
-    "MD036": false,
-    "MD033": false,
-    "MD031": false
-  },
-  "cSpell.words": ["mincount", "webscript"]
+    "files.exclude": {
+        "**/.git": true,
+        "**/.svn": true,
+        "**/.hg": true,
+        "**/.DS_Store": true,
+        "**/coverage": true,
+        "**/.happypack": true
+    },
+    "editor.renderIndentGuides": true,
+    "tslint.configFile": "ng2-components/tslint.json"
 }

ALFRESCOCORS.md

@@ -1,30 +1,25 @@
-# CORS solving strategies
+### CORS solving strategies
 
-A web client built with ADF typically won't be loaded from the same web server that the Alfresco Platform is running on.
-This means you need to tell the Alfresco server explicitly that any request coming in from this custom web client should be allowed access 
-to the Content Repository. This is done by enabling
-[Cross Origin Resource Sharing](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing)
-(CORS).
+The web client that we are building with the application development framework will be loaded from a different web server than the Alfresco Platform is running on.
+So we need to tell the Alfresco server that any request that comes in from this custom web client should be allowed access 
+to the Content Repository. This is done by enabling CORS.
 
-If you are experiencing this kind of problem, use **one of the following approaches**,
-depending on your setup:
+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)
 3. [Configure nginx proxy](#configure-nginx-proxy)
 4. [Enable CORS in CS and PS](#configure-webpack-proxy)
 
-## Configure Webpack Proxy
+# Configure Webpack Proxy
 
-If you are using a project created with the [Yeoman Generator](https://github.com/Alfresco/generator-ng2-alfresco-app) or the demo shell (>=1.6.0), you already have
-a suitable configuration out of the box in your `config/webpack.common.js` file.
+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:
 
-Say we have an app running on http://localhost:3000/ and we want to redirect all calls with the following strategy:
+* Content service http://localhost:8080/  redirect to -> http://localhost:3000/ecm/ 
+* Process service http://localhost:9999/  redirect to -> http://localhost:3000/bpm/ 
 
-* 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: {
@@ -60,21 +55,18 @@ devServer: {
 ```
 
 Notes:
+- With differents configuration of webpack the `devServer` properties could be in other webpack files. Search in your configuration
 
-- With a different configuration of webpack, the `devServer` properties could be in other webpack files. Search your configuration files to find the correct location.
-
-- 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
+# Configure angular-cli Proxy
+Say we have a app running on http://localhost:3000/ and we want redirect all the calls with the following strategy:
 
-Say we have an app running on http://localhost:3000/ and we want to redirect all the calls with the following strategy:
+* Content service http://localhost:8080/  redirect to -> http://localhost:3000/ecm/ 
+* Process service http://localhost:9999/  redirect to -> http://localhost:3000/bpm/ 
 
-* 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 the 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
 {
@@ -101,71 +93,69 @@ Create a file next to the project's `package.json`, call it `proxy.conf.json` an
 }
 ```
 
-Note that if you are running the App, Content Service or Process Service on different ports, you should 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).
 
 
-## Configure nginx proxy
+# Configure nginx proxy
 
-### Installing nginx
+## Installing nginx
 
 Most Linux distributions will come with nginx available to install via your
 package manager and on Mac OS you can use [Homebrew](http://brew.sh/).
 
-If you want to install manually, 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).
+[windows users](http://nginx.org/en/docs/windows.html).
 
-#### Start nginx
+### Start nginx
 
 Start nginx using the supplied configuration in [nginx.conf](nginx.conf)
 
     nginx -c nginx.conf
 
-#### Review nginx configuration
+### Review nginx configuration
 
-To correctly configure nginx, use the [nginx.conf](nginx.conf) file in the project root folder.
+To correctly configure nginx use the following file [nginx.conf](/nginx.conf).
 This will host Activiti, Alfresco and the app dev framework under the same origin.
 
 * ECM : http://localhost:8888/alfresco/
 * BPM : http://localhost:8888/activiti/
 
-To make everything work, you should change the address of ECM and BPM. In the demo app you can do that by clicking on the top right settings menu and changing 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
 
-You can modify all these values at their respective `location` directive in the
-[nginx.conf](/nginx.conf) file.
+All those values can be modified at their respective `location` directive on the [nginx.conf](/nginx.conf) file.
 
-See the [Alfresco community page](https://community.alfresco.com/community/application-development-framework/blog/2016/09/28/adf-development-set-up-with-nginx-proxy) about using nginx with ADF for further information.
+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 in your Content Services and Process Services,
-please refer to the following Alfresco documents:
+# Enable CORS in CS and PS
+
+If you want completely enable CORS call on your Content service and Process service, plese refer to the following alfresco documents:
 
 * [Enable Cross Origin Resource Sharing (CORS) in Alfresco Process Services](http://docs.alfresco.com/process-services1.6/topics/enabling-cors.html)
 
 * Enable Cross Origin Resource Sharing (CORS) in Alfresco Content Services 
 
-The easiest approach is to 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.
+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 that, 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
 
-Alternatively, you can update the `web.xml` file manually.
-
-Modify `$ALF_INSTALL_DIR/tomcat/webapps/alfresco/WEB-INF/web.xml` and uncomment the following section and update 
+Modify *$ALF_INSTALL_DIR/tomcat/webapps/alfresco/WEB-INF/web.xml* and uncomment the following section and update 
 `cors.allowOrigin` to `http://localhost:3000`:
 
-```xml
+```
 <filter>
       <filter-name>CORS</filter-name>
       <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
@@ -199,11 +189,11 @@ Modify `$ALF_INSTALL_DIR/tomcat/webapps/alfresco/WEB-INF/web.xml` and uncomment
       </init-param>
 </filter>
 ```
-When specifying the `cors.allowOrigin` URL, make sure that you use the URL that will be used by the web client. 
+When specifying the `cors.allowOrigin` URL make sure to use the URL that will be used by the web client. 
 
-Then uncomment the filter mappings:
+Then uncomment filter mappings:
 
-```xml
+``` 
 <filter-mapping>
       <filter-name>CORS</filter-name>
       <url-pattern>/api/*</url-pattern>

BROWSER-SUPPORT.md

@@ -1,33 +1,35 @@
 # Browser Support
+Browser support and polyfills guide.
 
-This page gives a guide to Browser support and polyfills.
+Browser compatibility and support depends on targeted browsers and 3rd party libraries. ADF framework is based on the following libraries and components:
 
-Browser compatibility and support depends on targeted browsers and 3rd party libraries. ADF is based on the following libraries and components:
-
-- Angular (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,5 +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" />
 ```
 
-See the [demo shell](demo-shell/index.html) example project for
-further information and source code.
+For a complete code please refer to [demo shell](demo-shell-ng2/index.html) example.

CODE_OF_CONDUCT.md

@@ -1,23 +0,0 @@
-# Contributor Code of Conduct
-
-We want to make everyone feel welcome to contribute to ADF.
-We promise to respect everyone who posts issues, updates documentation,
-submits pull requests, provides feedback in comments, or makes any other contribution to the project.
-
-We expect all discussion about the project (on GitHub, social media and other channels) to be positive and constructive.
-We do not accept personal attacks, trolling, public or private harassment, insults,
-or other unprofessional conduct towards anyone.
-
-We promise to show respect to all contributors regardless of their gender, gender identity,
-sexual orientation, disability, age, race, ethnicity, religion, or level of experience.
-
-We expect all contributors to understand and follow these standards
-If any member of the community does not follow the code of conduct,
-the maintainers will do whatever they consider appropriate to stop the unacceptable behavior.
-This may include removing issues, comments, and PRs or blocking accounts.
-Any bans may be temporary or permanent, at the maintainers’ discretion.
-
-Contact us if you see any behavior that breaks the code of conduct, whether it is directed at you or at anyone else.
-We take responsibility for making sure the code of conduct is clear and understandable,
-so you should also contact us if you think there is anything that needs to be explained better.
-Our contact email address is: [conduct@alfresco.com](mailto:conduct@alfresco.com)

CONTRIBUTING.md

@@ -1,81 +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 a pull request 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) to see if your
-  issue has already been solved in a new version of ADF.
-* Fork our repository (if you don't know how to do this, 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 our [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 tests that are already in place.
-* 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 [this page](https://help.github.com/articles/syncing-a-fork/).
-
-## Code style
-
-The code style for ADF 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 with one of these rules you will see an error when you build the project along with some help on how to fix it.
-
-The ADF-Rules are as follows:
-
-* 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 encourage 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 must be the same as the component/service/pipe it tests plus the .spec. suffix.
-* The specification file must be in the same folder as the component/service/pipe it tests.
-
-### 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 overuse it.
-
-### Test Name
-
-Any test should follow the naming convention:
-
-[Should] [ ***Expected Behavior*** ] [when/after/before] [ ***State Under Test*** ].

Dockerfile

@@ -1,6 +0,0 @@
-FROM nginx:alpine
-
-COPY demo-shell/nginx.conf /etc/nginx/nginx.conf
-
-WORKDIR /usr/share/nginx/html
-COPY demo-shell/dist/ .

INTRODUCTION.md

@@ -1,39 +1,41 @@
 # Introduction to the Alfresco Application Development Framework
 
-The Alfresco Application Development Framework (ADF) is based on the [Angular framework](https://angular.io/).
-ADF is provided by Alfresco to make it easy to build custom web applications to manage and view content in the [Alfresco Platform Repository](https://docs.alfresco.com/5.2/concepts/content-repo-about.html).
+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.
 
-As you probably know, there is a general user interface called [Alfresco Share](https://docs.alfresco.com/5.2/concepts/gs-intro.html) available out-of-the-box. 
-Share is usually used as a quick way of getting started with content management in Alfresco. It gives you access to pretty much all
-the features provided by the ACS system and a lot of customers customize it for their specific domain.
+As you probably know, there is a general user interface called [Alfresco Share](http://docs.alfresco.com/5.1/concepts/gs-intro.html) available out-of-the-box. 
+Share is usually used as a quick way of getting started with content management with Alfresco. It gives you access to pretty much all
+the features provided by the Alfresco ECM system. And a lot of customers customize it for their specific domain.
 
-However, there are use cases that Share does not fit very well, such as:
+However, there are use-cases that Share does not fit very well, such as:
 
 - Feature-based clients, exposing functionality to perform a specific task(s)
 - Role-based clients, exposing functionality based on role 
 - Clients where the UI layout and style differs significantly from the Share layout and styling
 - [Mashup clients](http://whatis.techtarget.com/definition/mash-up)
 
-This is where ADF comes into play. You can use it to create exactly the user interface 
-(i.e. web client) that you require.  
+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 this [page](http://devproducts.alfresco.com/).
 
-You can browse documentation for all the components at the
-[ADF Component Catalog](https://alfresco.github.io/adf-component-catalog/).
-
-An overview of the architecture is shown below:
+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,11 +1,27 @@
 # Prerequisites for building and running apps with the Alfresco Application Development Framework
 
-See our tutorial
-[Preparing the development environment](docs/tutorials/preparing-environment.md)
-for full details of what you need to install before using ADF.
+The [Angular 2](https://angular.io/) based application development framework requires the following:
 
-If you experience [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing)
-issues then you should also read our
-[CORS guide](ALFRESCOCORS.md)
-to see the full range of solutions available.
- 
+- 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 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 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.*
+
+**Verify that you are running at least node `v5.x.x` and npm `3.x.x`**
+by running `node -v` and `npm -v` in a terminal/console window.
+Older versions produce errors.
+
+## Installing Node.js
+
+If you don't have Node.js installed then access this [page](https://nodejs.org/en/download/) and use the appropriate installer for your OS.
+
+Make sure the Node.js version is > 5:
+
+```
+$ node -v
+v5.12.0
+```

README.md

@@ -1,6 +1,5 @@
-# Alfresco Application Development Framework (ADF)
+# 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>
@@ -22,40 +21,60 @@
 
 ## Introduction
 
-See the [Introduction page](INTRODUCTION.md) to get started with the Alfresco Application Development Framework.
+See the following [page](INTRODUCTION.md) for an introduction to the Alfresco Application Development Framework.
 
 ## Prerequisites
 
-Before you start using this development framework, make sure you have installed all required software and done all the necessary configuration. See our tutorial
-[Preparing the development environment](docs/tutorials/preparing-environment.md)
-for full details.
+Before you start using this development framework, make sure you have installed all required software and done all the 
+necessary configuration, see this [page](PREREQUISITES.md).
 
 ## Components
 
-You can find the sources for all ADF components in the
-[`lib`](/lib) folder.
+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).
 
-Full documentation for all components is available 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).
-The app has examples of basic interaction for both APS and ACS components.
+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 ADF application, use the 
-[Yeoman Generator](https://github.com/Alfresco/generator-ng2-alfresco-app).
-This will create a full working project with all the right libraries and tools.
+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.
 
 <p align="center">
   <img title="yeoman generator" src='https://github.com/yeoman/media/blob/master/optimized/yeoman-150x150-opaque.png' alt='yeoman logo'  />
 </p>
 
-## Browser Support
+### Generate an Alfresco web component starter project
 
+To generate your Alfresco Angular 2 component you can use the following Yeoman generator:
+
+- [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 2 application you can use the following Yeoman generator:
+
+- [Yeoman Generator Angular 2 Alfresco application](https://github.com/Alfresco/generator-ng2-alfresco-app)
+
+## Amazon AWS Elastic Beanstalk fast deploy
+
+<p align="center">
+    <img alt="AmazonWebservices Logo.svg" src="https://upload.wikimedia.org/wikipedia/commons/1/1d/AmazonWebservices_Logo.svg" width="250" height="94">
+</p>
+
+To deploy directly on your AWS instance our demo shell click the button below:
+
+<a title="Deploy to AWS" href="https://console.aws.amazon.com/elasticbeanstalk/home?region=us-west-2#/newApplication?applicationName=Alfresco&solutionStackName=Node.js&tierName=WebServer&sourceBundleUrl=https://s3-us-west-2.amazonaws.com/elasticbeanstalk-us-west-2-677901592050/ADF_1.0.zip" target="_blank"><img src="http://d0.awsstatic.com/product-marketing/Elastic%20Beanstalk/deploy-to-aws.png" height="40"></a>
+
+## Browser Support
 All components are supported in the following browsers:
 
 |**Browser**   	   |**Version**   	|
@@ -66,7 +85,6 @@ All components are supported in the following browsers:
 |Edge       	   |13, 14     	    |
 |Internet Explorer |11     	        |
 
-* Due to a [known issue](https://bugzilla.mozilla.org/show_bug.cgi?id=1188880) in Firefox, the Alfresco Upload Component does not currently support folder upload functionality on Firefox.    
-
-See the [Browser Support](BROWSER-SUPPORT.md) article for more details. 
+* Due to a [Firefox known issue](https://bugzilla.mozilla.org/show_bug.cgi?id=1188880), the Alfresco Upload Component does not currently support folder upload functionality on Firefox.    
 
+Please refer to the [Browser Support](BROWSER-SUPPORT.md) article for more details. 

angular.json

@@ -1,781 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "newProjectRoot": "lib",
-  "projects": {
-    "dist": {
-      "root": "demo-shell",
-      "sourceRoot": "demo-shell/src",
-      "projectType": "application",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:browser",
-          "options": {
-            "outputPath": "demo-shell/dist",
-            "index": "demo-shell/src/index.html",
-            "main": "demo-shell/src/main.ts",
-            "tsConfig": "demo-shell/src/tsconfig.app.json",
-            "polyfills": "demo-shell/src/polyfills.ts",
-            "stylePreprocessorOptions": {
-              "includePaths": [
-                "demo-shell/src/node_modules"
-              ]
-            },
-            "assets": [
-              "demo-shell/src/assets",
-              "demo-shell/src/favicon.ico",
-              "demo-shell/src/app.config.json",
-              "demo-shell/src/versions.json",
-              {
-                "glob": "**/*",
-                "input": "demo-shell/resources",
-                "output": "/resources"
-              },
-              {
-                "glob": "**/*",
-                "input": "demo-shell/src/app/components/lazy-loading/i18n",
-                "output": "/resources/lazy-loading/i18n"
-              },
-              {
-                "glob": "**/*",
-                "input": "node_modules/@alfresco/adf-core/prebuilt-themes",
-                "output": "/assets/prebuilt-themes"
-              },
-              {
-                "glob": "**/*",
-                "input": "node_modules/@alfresco/adf-core/bundles/assets",
-                "output": "/assets"
-              },
-              {
-                "glob": "**/*",
-                "input": "node_modules/@alfresco/adf-insights/bundles/assets",
-                "output": "/assets"
-              },
-              {
-                "glob": "**/*",
-                "input": "node_modules/@alfresco/adf-process-services/bundles/assets",
-                "output": "/assets"
-              },
-              {
-                "glob": "**/*",
-                "input": "node_modules/@alfresco/adf-process-services-cloud/bundles/assets",
-                "output": "/assets"
-              },
-              {
-                "glob": "**/*",
-                "input": "node_modules/@alfresco/adf-content-services/bundles/assets",
-                "output": "/assets"
-              },
-              {
-                "glob": "pdf.worker.min.js",
-                "input": "node_modules/pdfjs-dist/build",
-                "output": "/"
-              },
-              {
-                "glob": "**/*",
-                "input": "node_modules/ngx-monaco-editor/assets/monaco",
-                "output": "/assets/monaco/"
-              }
-            ],
-            "styles": [
-              "demo-shell/src/styles.scss",
-              "demo-shell/src/custom-style.scss"
-            ],
-            "scripts": [
-              "node_modules/pdfjs-dist/build/pdf.js",
-              "node_modules/pdfjs-dist/web/pdf_viewer.js",
-              "node_modules/raphael/raphael.min.js",
-              "node_modules/moment/min/moment.min.js"
-            ]
-          },
-          "configurations": {
-            "production": {
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "extractCss": true,
-              "namedChunks": false,
-              "aot": true,
-              "extractLicenses": true,
-              "vendorChunk": true,
-              "buildOptimizer": true,
-              "verbose": false,
-              "fileReplacements": [
-                {
-                  "replace": "demo-shell/src/environments/environment.ts",
-                  "with": "demo-shell/src/environments/environment.prod.ts"
-                }
-              ]
-            }
-          }
-        },
-        "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "browserTarget": "dist:build",
-            "port": 3000
-          },
-          "configurations": {
-            "production": {
-              "browserTarget": "dist:build:production"
-            }
-          }
-        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "browserTarget": "dist:build"
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "demo-shell/src/test.ts",
-            "karmaConfig": "./demo-shell/karma.conf.js",
-            "polyfills": "demo-shell/src/polyfills.ts",
-            "tsConfig": "demo-shell/src/tsconfig.spec.json",
-            "scripts": [
-              "node_modules/pdfjs-dist/build/pdf.js",
-              "node_modules/pdfjs-dist/web/pdf_viewer.js",
-              "node_modules/raphael/raphael.min.js",
-              "node_modules/moment/min/moment.min.js"
-            ],
-            "styles": [
-              "demo-shell/src/styles.scss",
-              "demo-shell/src/custom-style.scss"
-            ],
-            "assets": [
-              "demo-shell/src/assets",
-              "demo-shell/src/favicon.ico",
-              "demo-shell/src/app.config.json",
-              "demo-shell/src/versions.json",
-              {
-                "glob": "**/*",
-                "input": "demo-shell/resources",
-                "output": "/resources"
-              },
-              {
-                "glob": "**/*",
-                "input": "demo-shell/src/app/components/lazy-loading/i18n",
-                "output": "/resources/lazy-loading/i18n"
-              },
-              {
-                "glob": "**/*",
-                "input": "node_modules/@alfresco/adf-core/prebuilt-themes",
-                "output": "/assets/prebuilt-themes"
-              },
-              {
-                "glob": "**/*",
-                "input": "node_modules/@alfresco/adf-core/bundles/assets",
-                "output": "/assets"
-              },
-              {
-                "glob": "**/*",
-                "input": "node_modules/@alfresco/adf-insights/bundles/assets",
-                "output": "/assets"
-              },
-              {
-                "glob": "**/*",
-                "input": "node_modules/@alfresco/adf-process-services/bundles/assets",
-                "output": "/assets"
-              },
-              {
-                "glob": "**/*",
-                "input": "node_modules/@alfresco/adf-process-services-cloud/bundles/assets",
-                "output": "/assets"
-              },
-              {
-                "glob": "**/*",
-                "input": "node_modules/@alfresco/adf-content-services/bundles/assets",
-                "output": "/assets"
-              },
-              {
-                "glob": "pdf.worker.min.js",
-                "input": "node_modules/pdfjs-dist/build",
-                "output": "/"
-              },
-              {
-                "glob": "**/*",
-                "input": ".node_modules/ngx-monaco-editor/assets/monaco",
-                "output": "/assets/monaco/"
-              }
-            ]
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "./demo-shell/src/tsconfig.app.json"
-            ],
-            "exclude": [
-              "**/node_modules/**/*"
-            ]
-          }
-        }
-      }
-    },
-    "dev": {
-      "root": "demo-shell",
-      "sourceRoot": "demo-shell/src",
-      "projectType": "application",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:browser",
-          "options": {
-            "outputPath": "demo-shell/dist",
-            "index": "demo-shell/src/index.html",
-            "main": "demo-shell/src/main.ts",
-            "tsConfig": "demo-shell/src/tsconfig.dev.json",
-            "polyfills": "demo-shell/src/polyfills.ts",
-            "stylePreprocessorOptions": {
-              "includePaths": [
-                "lib"
-              ]
-            },
-            "assets": [
-              "demo-shell/src/assets",
-              "demo-shell/src/app.config.json",
-              "demo-shell/src/versions.json",
-              {
-                "glob": "**/*",
-                "input": "demo-shell/src/assets",
-                "output": "/assets"
-              },
-              {
-                "glob": "app.config.json",
-                "input": "demo-shell/src",
-                "output": "/"
-              },
-              {
-                "glob": "versions.json",
-                "input": "demo-shell/src",
-                "output": "/"
-              },
-              {
-                "glob": "**/*",
-                "input": "demo-shell/resources",
-                "output": "/resources"
-              },
-              {
-                "glob": "**/*",
-                "input": "demo-shell/src/app/components/lazy-loading/i18n",
-                "output": "/resources/lazy-loading/i18n"
-              },
-              {
-                "glob": "**/*",
-                "input": "lib/dist/core/prebuilt-themes",
-                "output": "/assets/prebuilt-themes"
-              },
-              {
-                "glob": "**/*",
-                "input": "lib/core/assets",
-                "output": "/assets"
-              },
-              {
-                "glob": "**/*",
-                "input": "lib/process-services/assets",
-                "output": "/assets"
-              },
-              {
-                "glob": "**/*",
-                "input": "lib/process-services-cloud/assets",
-                "output": "/assets"
-              },
-              {
-                "glob": "**/*",
-                "input": "lib/content-services/assets",
-                "output": "/assets"
-              },
-              {
-                "glob": "**/*",
-                "input": "lib/core/i18n",
-                "output": "/assets/adf-core/i18n"
-              },
-              {
-                "glob": "**/*",
-                "input": "lib/content-services/i18n",
-                "output": "/assets/adf-content-services/i18n"
-              },
-              {
-                "glob": "**/*",
-                "input": "lib/process-services/i18n",
-                "output": "/assets/adf-process-services/i18n"
-              },
-              {
-                "glob": "**/*",
-                "input": "lib/process-services-cloud/src/lib/i18n",
-                "output": "/assets/adf-process-services-cloud/i18n"
-              },
-              {
-                "glob": "**/*",
-                "input": "lib/insights/i18n",
-                "output": "/assets/adf-insights/i18n"
-              },
-              {
-                "glob": "pdf.worker.min.js",
-                "input": "node_modules/pdfjs-dist/build",
-                "output": "/"
-              },
-              {
-                "glob": "**/*",
-                "input": "node_modules/ngx-monaco-editor/assets/monaco",
-                "output": "/assets/monaco/"
-              }
-            ],
-            "styles": [
-              "demo-shell/src/styles.scss",
-              "demo-shell/src/custom-style-dev.scss"
-            ],
-            "scripts": [
-              "node_modules/pdfjs-dist/build/pdf.js",
-              "node_modules/pdfjs-dist/web/pdf_viewer.js",
-              "node_modules/raphael/raphael.min.js",
-              "node_modules/moment/min/moment.min.js"
-            ]
-          },
-          "configurations": {
-            "production": {
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "extractCss": true,
-              "namedChunks": false,
-              "aot": true,
-              "extractLicenses": true,
-              "vendorChunk": true,
-              "buildOptimizer": true,
-              "verbose": false,
-              "fileReplacements": [
-                {
-                  "replace": "demo-shell/src/environments/environment.ts",
-                  "with": "demo-shell/src/environments/environment.prod.ts"
-                }
-              ]
-            }
-          }
-        },
-        "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "browserTarget": "dev:build",
-            "port": 3000
-          },
-          "configurations": {
-            "production": {
-              "browserTarget": "dev:build:production"
-            }
-          }
-        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "browserTarget": "dev:build"
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "demo-shell/src/test.ts",
-            "karmaConfig": "./demo-shell/karma.conf.js",
-            "polyfills": "demo-shell/src/polyfills.ts",
-            "tsConfig": "demo-shell/src/tsconfig.spec.json",
-            "scripts": [
-              "node_modules/pdfjs-dist/build/pdf.js",
-              "node_modules/pdfjs-dist/web/pdf_viewer.js",
-              "node_modules/raphael/raphael.min.js",
-              "node_modules/moment/min/moment.min.js"
-            ],
-            "styles": [
-              "demo-shell/src/styles.scss",
-              "demo-shell/src/custom-style-dev.scss"
-            ],
-            "assets": [
-              "demo-shell/src/assets",
-              "demo-shell/src/app.config.json",
-              "demo-shell/src/versions.json",
-              {
-                "glob": "**/*",
-                "input": "demo-shell/src/assets",
-                "output": "/assets"
-              },
-              {
-                "glob": "app.config.json",
-                "input": "demo-shell/src",
-                "output": "/"
-              },
-              {
-                "glob": "versions.json",
-                "input": "demo-shell/src",
-                "output": "/"
-              },
-              {
-                "glob": "**/*",
-                "input": "demo-shell/resources",
-                "output": "/resources"
-              },
-              {
-                "glob": "**/*",
-                "input": "demo-shell/src/app/components/lazy-loading/i18n",
-                "output": "/resources/lazy-loading/i18n"
-              },
-              {
-                "glob": "**/*",
-                "input": "lib/dist/core/prebuilt-themes",
-                "output": "/assets/prebuilt-themes"
-              },
-              {
-                "glob": "**/*",
-                "input": "lib/core/assets",
-                "output": "/assets"
-              },
-              {
-                "glob": "**/*",
-                "input": "lib/process-services/assets",
-                "output": "/assets"
-              },
-              {
-                "glob": "**/*",
-                "input": "lib/process-services-cloud/assets",
-                "output": "/assets"
-              },
-              {
-                "glob": "**/*",
-                "input": "lib/content-services/assets",
-                "output": "/assets"
-              },
-              {
-                "glob": "**/*",
-                "input": "lib/core/i18n",
-                "output": "/assets/adf-core/i18n"
-              },
-              {
-                "glob": "**/*",
-                "input": "lib/content-services/i18n",
-                "output": "/assets/adf-content-services/i18n"
-              },
-              {
-                "glob": "**/*",
-                "input": "lib/process-services/i18n",
-                "output": "/assets/adf-process-services/i18n"
-              },
-              {
-                "glob": "**/*",
-                "input": "lib/process-services-cloud/src/lib/i18n",
-                "output": "/assets/adf-process-services-cloud/i18n"
-              },
-              {
-                "glob": "**/*",
-                "input": "lib/insights/i18n",
-                "output": "/assets/adf-insights/i18n"
-              },
-              {
-                "glob": "pdf.worker.min.js",
-                "input": "node_modules/pdfjs-dist/build",
-                "output": "/"
-              },
-              {
-                "glob": "**/*",
-                "input": "/node_modules/ngx-monaco-editor/assets/monaco",
-                "output": "/assets/monaco/"
-              }
-            ]
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "./demo-shell/src/tsconfig.app.json"
-            ],
-            "exclude": [
-              "**/node_modules/**/*"
-            ]
-          }
-        }
-      }
-    },
-    "lib-e2e": {
-      "root": "demo-shell",
-      "sourceRoot": "./demo-shell",
-      "projectType": "application",
-      "architect": {
-        "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "proxyConfig": "./e2e/proxy.conf.js",
-            "browserTarget": "dev:build",
-            "port": 3000
-          },
-          "configurations": {
-            "production": {
-              "browserTarget": "dev:build:production"
-            }
-          }
-        },
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "./protractor.conf.js",
-            "devServerTarget": "lib-e2e:serve"
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [],
-            "exclude": [
-              "**/node_modules/**/*"
-            ]
-          }
-        }
-      }
-    },
-    "core": {
-      "root": "lib/core",
-      "sourceRoot": "lib/core/src",
-      "projectType": "library",
-      "prefix": "adf",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
-          "options": {
-            "tsConfig": "lib/core/tsconfig.json",
-            "project": "lib/core/ng-package.json"
-          },
-          "configurations": {
-            "production": {
-              "project": "lib/core/ng-package.json"
-            }
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "lib/core/test.ts",
-            "tsConfig": "lib/core/tsconfig.json",
-            "karmaConfig": "lib/core/karma.conf.js",
-            "codeCoverage": true,
-            "sourceMap": true
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "lib/core/tsconfig.json",
-              "lib/core/tsconfig.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
-        }
-      }
-    },
-    "content-services": {
-      "root": "lib/content-services",
-      "sourceRoot": "lib/content-services/src",
-      "projectType": "library",
-      "prefix": "adf",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
-          "options": {
-            "tsConfig": "lib/content-services/tsconfig.json",
-            "project": "lib/content-services/ng-package.json"
-          },
-          "configurations": {
-            "production": {
-              "project": "lib/content-services/ng-package.json"
-            }
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "lib/content-services/test.ts",
-            "tsConfig": "lib/content-services/tsconfig.json",
-            "karmaConfig": "lib/content-services/karma.conf.js",
-            "codeCoverage": true,
-            "sourceMap": true
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "lib/content-services/tsconfig.json",
-              "lib/content-services/tsconfig.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
-        }
-      }
-    },
-    "process-services": {
-      "root": "lib/process-services",
-      "sourceRoot": "lib/process-services/src",
-      "projectType": "library",
-      "prefix": "adf",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
-          "options": {
-            "tsConfig": "lib/process-services/tsconfig.json",
-            "project": "lib/process-services/ng-package.json"
-          },
-          "configurations": {
-            "production": {
-              "project": "lib/process-services/ng-package.json"
-            }
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "lib/process-services/test.ts",
-            "tsConfig": "lib/process-services/tsconfig.json",
-            "karmaConfig": "lib/process-services/karma.conf.js",
-            "codeCoverage": true,
-            "sourceMap": true
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "lib/process-services/tsconfig.json",
-              "lib/process-services/tsconfig.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
-        }
-      }
-    },
-    "process-services-cloud": {
-      "root": "lib/process-services-cloud",
-      "sourceRoot": "lib/process-services-cloud/src",
-      "projectType": "library",
-      "prefix": "adf-cloud",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
-          "options": {
-            "tsConfig": "lib/process-services-cloud/tsconfig.lib.json",
-            "project": "lib/process-services-cloud/ng-package.json"
-          },
-          "configurations": {
-            "production": {
-              "project": "lib/process-services-cloud/ng-package.json"
-            }
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "lib/process-services-cloud/src/test.ts",
-            "tsConfig": "lib/process-services-cloud/tsconfig.spec.json",
-            "karmaConfig": "lib/process-services-cloud/karma.conf.js"
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "lib/process-services-cloud/tsconfig.lib.json",
-              "lib/process-services-cloud/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
-        }
-      }
-    },
-    "insights": {
-      "root": "lib/insights",
-      "sourceRoot": "lib/insights/src",
-      "projectType": "library",
-      "prefix": "adf",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
-          "options": {
-            "tsConfig": "lib/insights/tsconfig.json",
-            "project": "lib/insights/ng-package.json"
-          },
-          "configurations": {
-            "production": {
-              "project": "lib/insights/ng-package.json"
-            }
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "lib/insights/test.ts",
-            "tsConfig": "lib/insights/tsconfig.json",
-            "karmaConfig": "lib/insights/karma.conf.js",
-            "codeCoverage": true,
-            "sourceMap": true
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "lib/insights/tsconfig.json",
-              "lib/insights/tsconfig.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
-        }
-      }
-    },
-    "extensions": {
-      "root": "lib/extensions",
-      "sourceRoot": "lib/extensions/src/lib",
-      "projectType": "library",
-      "prefix": "adf",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
-          "options": {
-            "tsConfig": "lib/extensions/tsconfig.lib.json",
-            "project": "lib/extensions/ng-package.json"
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "lib/extensions/src/test.ts",
-            "tsConfig": "lib/extensions/tsconfig.spec.json",
-            "karmaConfig": "lib/extensions/karma.conf.js",
-            "codeCoverage": true,
-            "sourceMap": true
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "lib/extensions/tsconfig.lib.json",
-              "lib/extensions/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
-        }
-      }
-    }
-  },
-  "defaultProject": "dist"
-}

appveyor.yml

@@ -9,55 +9,33 @@ environment:
   nodejs_version: "8"
 
   matrix:
-    - COMPONENT_NAME: process-service
-    - COMPONENT_NAME: content-service
-    - COMPONENT_NAME: core
-    - 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 process-service-cloud (
-              if %APPVEYOR_REPO_BRANCH EQU master
-                (cd scripts && sh npm-build-all.sh -t "process-services-cloud"  || exit 1)
-              else
-                (cd scripts && sh npm-build-all.sh -t "process-services-cloud" -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
-matrix:
-  fast_finish: true

cspell.json

@@ -1,140 +0,0 @@
-{
-  "version": "0.1",
-  "language": "en",
-  "words": [
-    "activiti",
-    "CSRF",
-    "glyphicon",
-    "sharedlinks",
-    "Redistributable",
-    "fullscreen",
-    "sidenav",
-    "injectable",
-    "truthy",
-    "cryptodoc",
-    "mysites",
-    "afts",
-    "classlist",
-    "folderlink",
-    "filelink",
-    "datatable",
-    "repo",
-    "snackbar",
-    "promisify",
-    "xdescribe",
-    "unfavorite",
-    "devtools",
-    "gitter",
-    "jira",
-    "markdownlint",
-    "uploader",
-    "nginx",
-    "docx",
-    "SOLR",
-    "unshare",
-    "validators",
-    "guid",
-    "polyfill",
-    "polyfills",
-    "jsonp",
-    "hammerjs",
-    "pdfjs",
-    "xpath",
-    "tooltip",
-    "tooltips",
-    "unindent",
-    "exif",
-    "cardview",
-    "webm",
-    "keycodes",
-    "adhoc",
-    "swimlanes",
-    "datepicker",
-    "waypoints",
-    "waypoint",
-    "hotfix",
-    "typeahead",
-    "gridster",
-    "Collapsable",
-    "rowspan",
-    "typeahead",
-    "tabindex",
-    "Arial",
-    "swsdp",
-    "Datetimepicker",
-    "mimetype",
-    "multiselect",
-    "arrowup",
-    "arrowdown",
-    "dialpad",
-    "backend",
-    "Unclaim",
-    "transclusion",
-    "transcluded",
-    "auditable",
-    "taggable",
-    "datarow",
-    "datacolumn",
-    "textitem",
-    "boolitem",
-    "mapitem",
-    "selectitem",
-    "keyvaluepairsitem",
-    "boolitem",
-    "baseitem",
-    "checkboxes",
-    "tasklist",
-    "dateitem",
-    "webscript",
-    "minlength",
-    "doclib",
-    "fullname",
-    "firstname",
-    "lastname",
-    "userinfo",
-    "qshare",
-    "imgpreview",
-    "AUTHTYPE",
-    "ECMHOST",
-    "BPMHOST",
-    "OAUTHCONFIG",
-    "CONTEXTROOTBPM",
-    "CONTEXTROOTECM",
-    "DISABLECSRF",
-    "printf",
-    "mincount",
-    "listgrid",
-    "filesize",
-    "Theming",
-    "quicktime",
-    "Promise",
-    "Examinate",
-    "highlightable",
-    "Droppable",
-    "UPDATEPERMISSIONS",
-    "Whitespaces",
-    "keyvaluepairs",
-    "datetimeitem",
-    "floatitem",
-    "intitem",
-    "DDTHH",
-    "MLTEXT",
-    "penta",
-    "BASESHAREURL",
-    "hardend",
-    "filedata"
-  ],
-  "dictionaries": [
-    "html",
-    "en-gb",
-    "en_US",
-    "softwareTerms"
-  ],
-  "ignorePaths": [
-    "lib/{content-services,core,extensions,insights,process-services}/**/*.spec.ts",
-    "lib/{content-services,core,extensions,insights,process-services}/**/*.mock.ts"
-  ],
-  "ignoreRegExpList": [
-    "(\"|'|`)((?:\\\\1|(?:(?!\\1).))*)\\1"
-  ]
-}

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/LICENSE

@@ -0,0 +1,177 @@
+
+                              Apache License
+                        Version 2.0, January 2004
+                     http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions.
+
+   "License" shall mean the terms and conditions for use, reproduction,
+   and distribution as defined by Sections 1 through 9 of this document.
+
+   "Licensor" shall mean the copyright owner or entity authorized by
+   the copyright owner that is granting the License.
+
+   "Legal Entity" shall mean the union of the acting entity and all
+   other entities that control, are controlled by, or are under common
+   control with that entity. For the purposes of this definition,
+   "control" means (i) the power, direct or indirect, to cause the
+   direction or management of such entity, whether by contract or
+   otherwise, or (ii) ownership of fifty percent (50%) or more of the
+   outstanding shares, or (iii) beneficial ownership of such entity.
+
+   "You" (or "Your") shall mean an individual or Legal Entity
+   exercising permissions granted by this License.
+
+   "Source" form shall mean the preferred form for making modifications,
+   including but not limited to software source code, documentation
+   source, and configuration files.
+
+   "Object" form shall mean any form resulting from mechanical
+   transformation or translation of a Source form, including but
+   not limited to compiled object code, generated documentation,
+   and conversions to other media types.
+
+   "Work" shall mean the work of authorship, whether in Source or
+   Object form, made available under the License, as indicated by a
+   copyright notice that is included in or attached to the work
+   (an example is provided in the Appendix below).
+
+   "Derivative Works" shall mean any work, whether in Source or Object
+   form, that is based on (or derived from) the Work and for which the
+   editorial revisions, annotations, elaborations, or other modifications
+   represent, as a whole, an original work of authorship. For the purposes
+   of this License, Derivative Works shall not include works that remain
+   separable from, or merely link (or bind by name) to the interfaces of,
+   the Work and Derivative Works thereof.
+
+   "Contribution" shall mean any work of authorship, including
+   the original version of the Work and any modifications or additions
+   to that Work or Derivative Works thereof, that is intentionally
+   submitted to Licensor for inclusion in the Work by the copyright owner
+   or by an individual or Legal Entity authorized to submit on behalf of
+   the copyright owner. For the purposes of this definition, "submitted"
+   means any form of electronic, verbal, or written communication sent
+   to the Licensor or its representatives, including but not limited to
+   communication on electronic mailing lists, source code control systems,
+   and issue tracking systems that are managed by, or on behalf of, the
+   Licensor for the purpose of discussing and improving the Work, but
+   excluding communication that is conspicuously marked or otherwise
+   designated in writing by the copyright owner as "Not a Contribution."
+
+   "Contributor" shall mean Licensor and any individual or Legal Entity
+   on behalf of whom a Contribution has been received by Licensor and
+   subsequently incorporated within the Work.
+
+2. Grant of Copyright License. Subject to the terms and conditions of
+   this License, each Contributor hereby grants to You a perpetual,
+   worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+   copyright license to reproduce, prepare Derivative Works of,
+   publicly display, publicly perform, sublicense, and distribute the
+   Work and such Derivative Works in Source or Object form.
+
+3. Grant of Patent License. Subject to the terms and conditions of
+   this License, each Contributor hereby grants to You a perpetual,
+   worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+   (except as stated in this section) patent license to make, have made,
+   use, offer to sell, sell, import, and otherwise transfer the Work,
+   where such license applies only to those patent claims licensable
+   by such Contributor that are necessarily infringed by their
+   Contribution(s) alone or by combination of their Contribution(s)
+   with the Work to which such Contribution(s) was submitted. If You
+   institute patent litigation against any entity (including a
+   cross-claim or counterclaim in a lawsuit) alleging that the Work
+   or a Contribution incorporated within the Work constitutes direct
+   or contributory patent infringement, then any patent licenses
+   granted to You under this License for that Work shall terminate
+   as of the date such litigation is filed.
+
+4. Redistribution. You may reproduce and distribute copies of the
+   Work or Derivative Works thereof in any medium, with or without
+   modifications, and in Source or Object form, provided that You
+   meet the following conditions:
+
+   (a) You must give any other recipients of the Work or
+       Derivative Works a copy of this License; and
+
+   (b) You must cause any modified files to carry prominent notices
+       stating that You changed the files; and
+
+   (c) You must retain, in the Source form of any Derivative Works
+       that You distribute, all copyright, patent, trademark, and
+       attribution notices from the Source form of the Work,
+       excluding those notices that do not pertain to any part of
+       the Derivative Works; and
+
+   (d) If the Work includes a "NOTICE" text file as part of its
+       distribution, then any Derivative Works that You distribute must
+       include a readable copy of the attribution notices contained
+       within such NOTICE file, excluding those notices that do not
+       pertain to any part of the Derivative Works, in at least one
+       of the following places: within a NOTICE text file distributed
+       as part of the Derivative Works; within the Source form or
+       documentation, if provided along with the Derivative Works; or,
+       within a display generated by the Derivative Works, if and
+       wherever such third-party notices normally appear. The contents
+       of the NOTICE file are for informational purposes only and
+       do not modify the License. You may add Your own attribution
+       notices within Derivative Works that You distribute, alongside
+       or as an addendum to the NOTICE text from the Work, provided
+       that such additional attribution notices cannot be construed
+       as modifying the License.
+
+   You may add Your own copyright statement to Your modifications and
+   may provide additional or different license terms and conditions
+   for use, reproduction, or distribution of Your modifications, or
+   for any such Derivative Works as a whole, provided Your use,
+   reproduction, and distribution of the Work otherwise complies with
+   the conditions stated in this License.
+
+5. Submission of Contributions. Unless You explicitly state otherwise,
+   any Contribution intentionally submitted for inclusion in the Work
+   by You to the Licensor shall be under the terms and conditions of
+   this License, without any additional terms or conditions.
+   Notwithstanding the above, nothing herein shall supersede or modify
+   the terms of any separate license agreement you may have executed
+   with Licensor regarding such Contributions.
+
+6. Trademarks. This License does not grant permission to use the trade
+   names, trademarks, service marks, or product names of the Licensor,
+   except as required for reasonable and customary use in describing the
+   origin of the Work and reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty. Unless required by applicable law or
+   agreed to in writing, Licensor provides the Work (and each
+   Contributor provides its Contributions) on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+   implied, including, without limitation, any warranties or conditions
+   of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+   PARTICULAR PURPOSE. You are solely responsible for determining the
+   appropriateness of using or redistributing the Work and assume any
+   risks associated with Your exercise of permissions under this License.
+
+8. Limitation of Liability. In no event and under no legal theory,
+   whether in tort (including negligence), contract, or otherwise,
+   unless required by applicable law (such as deliberate and grossly
+   negligent acts) or agreed to in writing, shall any Contributor be
+   liable to You for damages, including any direct, indirect, special,
+   incidental, or consequential damages of any character arising as a
+   result of this License or out of the use or inability to use the
+   Work (including but not limited to damages for loss of goodwill,
+   work stoppage, computer failure or malfunction, or any and all
+   other commercial damages or losses), even if such Contributor
+   has been advised of the possibility of such damages.
+
+9. Accepting Warranty or Additional Liability. While redistributing
+   the Work or Derivative Works thereof, You may choose to offer,
+   and charge a fee for, acceptance of support, warranty, indemnity,
+   or other liability obligations and/or rights consistent with this
+   License. However, in accepting such obligations, You may act only
+   on Your own behalf and on Your sole responsibility, not on behalf
+   of any other Contributor, and only if You agree to indemnify,
+   defend, and hold each Contributor harmless for any liability
+   incurred by, or claims asserted against, such Contributor by reason
+   of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS

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

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

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

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

@@ -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,74 @@
+<!-- Always shows a header, even in smaller screens. -->
+<div mdl class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
+    <header class="mdl-layout__header main_header_adf" [ngClass]="{hide: isAPageWithHeaderBar()}">
+        <div class="mdl-button-padding mdl-layout__header-row">
+
+            <!-- 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="form" href="" routerLink="/form-list">Form List</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,131 @@
+/*!
+ * @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 { FormListDemoComponent } from './components/form/form-list-demo.component';
+
+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,
+        FormListDemoComponent
+    ],
+    providers: [
+        { provide: AppConfigService, useClass: DebugAppConfigService }
+    ],
+    bootstrap: [ AppComponent ],
+    entryComponents: [
+        CreateFolderDialog
+    ]
+})
+export class AppModule { }

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

@@ -0,0 +1,140 @@
+/*!
+ * @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';
+import { FormListDemoComponent } from './components/form/form-list-demo.component';
+
+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 },
+    { path: 'form-list', component: FormListDemoComponent }
+];
+
+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,233 @@
+<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-upload-drag-area [parentId]="currentTaskId">
+                                    <adf-task-attachment-list #taskAttach
+                                                            *ngIf="currentTaskId"
+                                                            [taskId]="currentTaskId"
+                                                            (attachmentClick)="onAttachmentClick($event)">
+                                    </adf-task-attachment-list>
+                                </adf-upload-drag-area>
+                                <div *ngIf="isCreateTaskAttachVisible()">
+                                    <adf-create-task-attachment *ngIf="currentTaskId"
+                                                                [taskId]="currentTaskId"
+                                                                (success)="onFileUploadComplete($event)">
+                                    </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,388 @@
+/*!
+ * @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, UploadService } from 'ng2-alfresco-core';
+import { FormService, FormRenderingService, FormEvent, FormFieldEvent, ProcessUploadService } 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'],
+    providers: [
+        { provide: UploadService, useClass: ProcessUploadService }
+    ]
+})
+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 uploadService: UploadService,
+                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;
+
+        this.uploadService.fileUploadComplete.subscribe(value => this.onFileUploadComplete(value.data));
+
+    }
+
+    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;
+    }
+
+    onFileUploadComplete(content: any) {
+        this.taskAttachList.add(content);
+    }
+
+    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,41 @@
+<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>
+    <button md-raised-button (click)="getRowForNode()">Load Node</button>
+</div>

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

@@ -0,0 +1,206 @@
+/*!
+ * @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';
+import { AlfrescoApiService } from 'ng2-alfresco-core';
+import { Observable } from 'rxjs/Rx';
+
+@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(private apiService: AlfrescoApiService) {
+        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);
+    }
+
+    getRowForNode() {
+        let opts: any = {
+            includeSource: true,
+            include: ['path', 'properties', 'allowableOperations']
+        };
+
+        Observable.fromPromise(this.apiService.getInstance().nodes
+            .getNodeInfo('-my-', opts)).subscribe((data) => {
+                console.log('FUnNy');
+                console.log(data);
+                let objects = new ObjectDataTableAdapter([
+                    {
+                        id: data.id,
+                        name: data.name,
+                        createdBy: data.createdByUser.displayName,
+                        createdOn: new Date(data.createdAt),
+                        icon: 'material-icons://face'
+                    }],
+                    [
+                        { type: 'image', key: 'icon', title: '', srTitle: 'Thumbnail' },
+                        { type: 'text', key: 'id', title: 'Id', sortable: true },
+                        { type: 'text', key: 'createdOn', title: 'Created On', sortable: true },
+                        { type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true },
+                        { type: 'text', key: 'createdBy.name', title: 'Created By', sortable: true }
+                    ]);
+                this.data = objects;
+            });
+    }
+}

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

@@ -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,208 @@
+<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">
+                </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
+                    icon="delete"
+                    target="folder"
+                    permission="delete"
+                    [disableWithNoPermission]="true"
+                    title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.DELETE' | translate}}"
+                    (permissionEvent)="handlePermissionError($event)"
+                    handler="delete">
+                </content-action>
+                <!-- document actions -->
+                <content-action
+                    icon="file_download"
+                    target="document"
+                    title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DOWNLOAD' | translate}}"
+                    handler="download">
+                </content-action>
+                <content-action
+                    icon="delete"
+                    target="document"
+                    permission="delete"
+                    [disableWithNoPermission]="true"
+                    (permissionEvent)="handlePermissionError($event)"
+                    title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DELETE' | translate}}"
+                    handler="delete">
+                </content-action>
+            </content-actions>
+        </alfresco-document-list>
+    </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,144 @@
+/*!
+ * @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, FileUploadCompleteEvent, UploadService } from 'ng2-alfresco-core';
+import { DocumentListComponent } from 'ng2-alfresco-documentlist';
+
+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

@@ -1,20 +1,3 @@
-/*!
- * @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.
- */
-
 /*!
  * @license
  * Copyright 2016 Alfresco Software, Ltd.
@@ -38,6 +21,11 @@ export class DemoForm {
         return {
             'id': 1001,
             'name': 'ISSUE_FORM',
+            'processDefinitionId': 'ISSUE_APP:1:2504',
+            'processDefinitionName': 'ISSUE_APP',
+            'processDefinitionKey': 'ISSUE_APP',
+            'taskId': '2510',
+            'taskDefinitionKey': 'sid-F67A2996-1684-4774-855A-4591490081FD',
             'tabs': [],
             'fields': [
                 {
@@ -312,7 +300,7 @@ export class DemoForm {
                                 'maxLength': 0,
                                 'minValue': null,
                                 'maxValue': null,
-                                'regexPattern': null,
+                                'regexPatt§12212ern': null,
                                 'optionType': null,
                                 'hasEmptyValue': null,
                                 'options': [
@@ -1231,7 +1219,7 @@ export class DemoForm {
                                 'readOnly': false,
                                 'overrideId': false,
                                 'colspan': 1,
-                                'placeholder': '10',
+                                'placeholder': null,
                                 'minLength': 0,
                                 'maxLength': 0,
                                 'minValue': null,
@@ -1467,271 +1455,4 @@ export class DemoForm {
         };
     }
 
-    static getSimpleFormDefinition(): any {
-        return {
-            'id': 1001,
-            'name': 'SIMPLE_FORM_EXAMPLE',
-            'description': '',
-            'version': 1,
-            'lastUpdatedBy': 2,
-            'lastUpdatedByFullName': 'Test01 01Test',
-            'lastUpdated': '2018-02-26T17:44:04.543+0000',
-            'stencilSetId': 0,
-            'referenceId': null,
-            'taskId': '9999',
-            'formDefinition': {
-              'tabs': [],
-              'fields': [
-                {
-                  'fieldType': 'ContainerRepresentation',
-                  'id': '1519666726245',
-                  'name': 'Label',
-                  'type': 'container',
-                  'value': null,
-                  'required': false,
-                  'readOnly': false,
-                  'overrideId': false,
-                  'colspan': 1,
-                  'placeholder': null,
-                  'minLength': 0,
-                  'maxLength': 0,
-                  'minValue': null,
-                  'maxValue': null,
-                  'regexPattern': null,
-                  'optionType': null,
-                  'hasEmptyValue': null,
-                  'options': null,
-                  'restUrl': null,
-                  'restResponsePath': null,
-                  'restIdProperty': null,
-                  'restLabelProperty': null,
-                  'tab': null,
-                  'className': null,
-                  'dateDisplayFormat': null,
-                  'layout': null,
-                  'sizeX': 2,
-                  'sizeY': 1,
-                  'row': -1,
-                  'col': -1,
-                  'visibilityCondition': null,
-                  'numberOfColumns': 2,
-                  'fields': {
-                    '1': [
-                      {
-                        'fieldType': 'RestFieldRepresentation',
-                        'id': 'typeaheadField',
-                        'name': 'TypeaheadField',
-                        'type': 'typeahead',
-                        'value': null,
-                        'required': false,
-                        'readOnly': false,
-                        'overrideId': false,
-                        'colspan': 1,
-                        'placeholder': null,
-                        'minLength': 0,
-                        'maxLength': 0,
-                        'minValue': null,
-                        'maxValue': null,
-                        'regexPattern': null,
-                        'optionType': null,
-                        'hasEmptyValue': null,
-                        'options': null,
-                        'restUrl': 'https://jsonplaceholder.typicode.com/users',
-                        'restResponsePath': null,
-                        'restIdProperty': 'id',
-                        'restLabelProperty': 'name',
-                        'tab': null,
-                        'className': null,
-                        'params': {
-                          'existingColspan': 1,
-                          'maxColspan': 2
-                        },
-                        'dateDisplayFormat': null,
-                        'layout': {
-                          'row': -1,
-                          'column': -1,
-                          'colspan': 1
-                        },
-                        'sizeX': 1,
-                        'sizeY': 1,
-                        'row': -1,
-                        'col': -1,
-                        'visibilityCondition': null,
-                        'endpoint': null,
-                        'requestHeaders': null
-                      }
-                    ],
-                    '2': [
-                      {
-                        'fieldType': 'RestFieldRepresentation',
-                        'id': 'radioButton',
-                        'name': 'RadioButtons',
-                        'type': 'radio-buttons',
-                        'value': null,
-                        'required': false,
-                        'readOnly': false,
-                        'overrideId': false,
-                        'colspan': 1,
-                        'placeholder': null,
-                        'minLength': 0,
-                        'maxLength': 0,
-                        'minValue': null,
-                        'maxValue': null,
-                        'regexPattern': null,
-                        'optionType': null,
-                        'hasEmptyValue': null,
-                        'options': [
-                          {
-                            'id': 'option_1',
-                            'name': 'Option 1'
-                          },
-                          {
-                            'id': 'option_2',
-                            'name': 'Option 2'
-                          },
-                          {
-                            'id': 'option_3',
-                            'name': 'Option 3'
-                          }
-                        ],
-                        'restUrl': null,
-                        'restResponsePath': null,
-                        'restIdProperty': null,
-                        'restLabelProperty': null,
-                        'tab': null,
-                        'className': null,
-                        'params': {
-                          'existingColspan': 1,
-                          'maxColspan': 1
-                        },
-                        'dateDisplayFormat': null,
-                        'layout': {
-                          'row': -1,
-                          'column': -1,
-                          'colspan': 1
-                        },
-                        'sizeX': 1,
-                        'sizeY': 2,
-                        'row': -1,
-                        'col': -1,
-                        'visibilityCondition': null,
-                        'endpoint': null,
-                        'requestHeaders': null
-                      }
-                    ]
-                  }
-                },
-                {
-                  'fieldType': 'ContainerRepresentation',
-                  'id': '1519666735185',
-                  'name': 'Label',
-                  'type': 'container',
-                  'value': null,
-                  'required': false,
-                  'readOnly': false,
-                  'overrideId': false,
-                  'colspan': 1,
-                  'placeholder': null,
-                  'minLength': 0,
-                  'maxLength': 0,
-                  'minValue': null,
-                  'maxValue': null,
-                  'regexPattern': null,
-                  'optionType': null,
-                  'hasEmptyValue': null,
-                  'options': null,
-                  'restUrl': null,
-                  'restResponsePath': null,
-                  'restIdProperty': null,
-                  'restLabelProperty': null,
-                  'tab': null,
-                  'className': null,
-                  'dateDisplayFormat': null,
-                  'layout': null,
-                  'sizeX': 2,
-                  'sizeY': 1,
-                  'row': -1,
-                  'col': -1,
-                  'visibilityCondition': null,
-                  'numberOfColumns': 2,
-                  'fields': {
-                    '1': [
-                      {
-                        'fieldType': 'RestFieldRepresentation',
-                        'id': 'selectBox',
-                        'name': 'SelectBox',
-                        'type': 'dropdown',
-                        'value': 'Choose one...',
-                        'required': false,
-                        'readOnly': false,
-                        'overrideId': false,
-                        'colspan': 1,
-                        'placeholder': null,
-                        'minLength': 0,
-                        'maxLength': 0,
-                        'minValue': null,
-                        'maxValue': null,
-                        'regexPattern': null,
-                        'optionType': 'manual',
-                        'hasEmptyValue': true,
-                        'options': [
-                          {
-                            'id': 'empty',
-                            'name': 'Choose one...'
-                          },
-                          {
-                            'id': 'option_1',
-                            'name': '1'
-                          },
-                          {
-                            'id': 'option_2',
-                            'name': '2'
-                          },
-                          {
-                            'id': 'option_3',
-                            'name': '3'
-                          }
-                        ],
-                        'restUrl': null,
-                        'restResponsePath': null,
-                        'restIdProperty': null,
-                        'restLabelProperty': null,
-                        'tab': null,
-                        'className': null,
-                        'params': {
-                          'existingColspan': 1,
-                          'maxColspan': 2
-                        },
-                        'dateDisplayFormat': null,
-                        'layout': {
-                          'row': -1,
-                          'column': -1,
-                          'colspan': 1
-                        },
-                        'sizeX': 1,
-                        'sizeY': 1,
-                        'row': -1,
-                        'col': -1,
-                        'visibilityCondition': null,
-                        'endpoint': null,
-                        'requestHeaders': null
-                      }
-                    ],
-                    '2': []
-                  }
-                }
-              ],
-              'outcomes': [],
-              'javascriptEvents': [],
-              'className': '',
-              'style': '',
-              'customFieldTemplates': {},
-              'metadata': {},
-              'variables': [],
-              'customFieldsValueInfo': {},
-              'gridsterForm': false
-            }
-          };
-    }
-
 }

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

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

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

@@ -0,0 +1,48 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, Inject, OnInit } from '@angular/core';
+import { FormModel, FormService } from 'ng2-activiti-form';
+import { InMemoryFormService } from '../../services/in-memory-form.service';
+import { DemoForm } from './demo-form';
+
+@Component({
+    selector: 'form-demo',
+    templateUrl: 'form-demo.component.html',
+    styleUrls: [ 'form-demo.component.css' ],
+    providers: [
+        { provide: FormService, useClass: InMemoryFormService }
+    ]
+})
+export class FormDemoComponent implements OnInit {
+
+    form: FormModel;
+
+    constructor(@Inject(FormService) private formService: InMemoryFormService) {
+        // Prevent default outcome actions
+        formService.executeOutcome.subscribe(e => {
+            e.preventDefault();
+            console.log(e.outcome);
+        });
+    }
+
+    ngOnInit() {
+        let formDefinitionJSON: any = DemoForm.getDefinition();
+        this.form = this.formService.parseForm(formDefinitionJSON);
+    }
+
+}

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

@@ -0,0 +1,112 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, ViewChild } from '@angular/core';
+import { FormModel, FormService } from 'ng2-activiti-form';
+import { ActivitiForm } from 'ng2-activiti-form';
+
+declare var componentHandler;
+
+@Component({
+    selector: 'form-list-demo',
+    template: `
+        <adf-form-list [forms]="formList" (row-dblclick)="onRowDblClick($event)">
+        </adf-form-list>
+        <div class="form-container" *ngIf="!isEmptyForm()">
+            <activiti-form [form]="form" [data]="restoredData">
+            </activiti-form>
+        </div>
+        <button class="mdl-button mdl-js-button" (click)="store()">STORE</button>
+        <button class="mdl-button mdl-js-button" (click)="restore()">RESTORE</button>
+    `,
+    styles: [`
+        .form-container {
+            padding: 10px;
+        }
+
+        .store-form-container{
+            width: 80%;
+            height: 80%;
+        }
+    `]
+})
+export class FormListDemoComponent {
+
+     @ViewChild(ActivitiForm)
+    activitiForm: ActivitiForm;
+
+    formList: any [] = [];
+
+    form: FormModel;
+    formId: string;
+
+    storedData: any = {};
+    restoredData: any = {};
+
+    constructor(private formService: FormService) {
+        // Prevent default outcome actions
+        formService.executeOutcome.subscribe(e => {
+            e.preventDefault();
+            console.log(e.outcome);
+        });
+    }
+
+    ngAfterViewInit() {
+        // workaround for MDL issues with dynamic components
+        if (componentHandler) {
+            componentHandler.upgradeAllRegistered();
+        }
+    }
+
+    onRowDblClick(event: CustomEvent) {
+        let rowForm = event.detail.value.obj;
+
+        this.formService.getFormDefinitionById(rowForm.id).subscribe((definition) => {
+            let form = this.formService.parseForm(definition);
+            this.form = form;
+        });
+
+        console.log(rowForm);
+    }
+
+    isEmptyForm() {
+        return this.form === null || this.form === undefined;
+    }
+
+    store() {
+        this.clone(this.activitiForm.form.values, this.storedData);
+        console.log('DATA SAVED');
+        console.log(this.storedData);
+        console.log('DATA SAVED');
+        this.restoredData = null;
+    }
+
+    clone(objToCopyFrom, objToCopyTo) {
+        for (let attribute in objToCopyFrom) {
+            if (objToCopyFrom.hasOwnProperty(attribute)) {
+                objToCopyTo[attribute] = objToCopyFrom[attribute];
+            }
+        }
+        return objToCopyTo;
+    }
+
+    restore() {
+        this.restoredData = this.storedData;
+        this.storedData = {};
+    }
+
+}

demo-shell-ng2/app/components/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

@@ -0,0 +1,36 @@
+/*!
+ * @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 { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { HomeComponent } from './home.component';
+import { CoreModule } from 'ng2-alfresco-core';
+
+describe('HomeComponent', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+        imports: [CoreModule],
+        declarations: [HomeComponent],
+        schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    });
+  });
+
+  it ('should work', () => {
+    let fixture = TestBed.createComponent(HomeComponent);
+    expect(fixture.componentInstance instanceof HomeComponent).toBe(true, 'should create HomeComponent');
+  });
+});

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

@@ -0,0 +1,25 @@
+/*!
+ * @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: 'home-view',
+    templateUrl: './home.component.html',
+    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: 190px;
+    margin: 5px;
+    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,75 @@
+<!--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>
+    <p class="toggle">
+        <label for="switch4" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+            <input type="checkbox" id="switch4" class="mdl-switch__input" [checked]="showFooter" (click)="showFooter = !showFooter">
+            <span class="mdl-switch__label">Login footer</span>
+        </label>
+    </p>
+</div>
+
+<!--SETTING BUTTON-->
+<a class="mdl-navigation__link setting-button" data-automation-id="settings" href="" routerLink="/settings">
+    <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
+        <i class="material-icons">settings</i>
+    </button>
+</a>
+
+<alfresco-login #alfrescologin
+                [providers]="providers"
+                [fieldsValidation]="customValidation"
+                [disableCsrf]="disableCsrf"
+                [showLoginActions]="showFooter"
+                [showRememberMe]="showFooter"
+                (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>
+        <p>
+            <label for="switch4-mobile" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+                <input type="checkbox" id="switch4-mobile" class="mdl-switch__input" [checked]="showFooter" (click)="showFooter = !showFooter">
+                <span class="mdl-switch__label">Login footer</span>
+            </label>
+        </p>
+    </div>
+</alfresco-login>

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

@@ -0,0 +1,117 @@
+/*!
+ * @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;
+    showFooter: boolean = true;
+    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

@@ -0,0 +1,37 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Injectable } from '@angular/core';
+import { Http } from '@angular/http';
+import { AppConfigService, StorageService } from 'ng2-alfresco-core';
+
+@Injectable()
+export class DebugAppConfigService extends AppConfigService {
+
+    constructor(private storage: StorageService, http: Http) {
+        super(http);
+    }
+
+    /** @override */
+    get<T>(key: string): T {
+        if (key === 'ecmHost' || key === 'bpmHost') {
+            return <T>(<any>this.storage.getItem(key) || super.get<T>(key));
+        }
+        return super.get<T>(key);
+    };
+
+}

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

@@ -0,0 +1,83 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Rx';
+import { AlfrescoApiService, LogService } from 'ng2-alfresco-core';
+import { FormService, EcmModelService, FormFieldOption } from 'ng2-activiti-form';
+import { AppConfigService } from 'ng2-alfresco-core';
+
+interface ActivitiData {
+    rest: {
+        fields: Array<{
+            processId?: string,
+            taskId?: string,
+            fieldId?: string,
+            values?: Array<{
+                id: string,
+                name: string
+            }>
+        }>
+    };
+}
+
+@Injectable()
+export class InMemoryFormService extends FormService {
+
+    private data: ActivitiData;
+
+    constructor(appConfig: AppConfigService,
+                ecmModelService: EcmModelService,
+                apiService: AlfrescoApiService,
+                logService: LogService) {
+        super(ecmModelService, apiService, logService);
+        this.data = appConfig.get<ActivitiData>('activiti');
+    }
+
+    /** @override */
+    getRestFieldValues(taskId: string, fieldId: string): Observable<FormFieldOption[]> {
+        // Uncomment this to use original call
+        // return super.getRestFieldValues(taskId, fieldId);
+
+        console.log(`getRestFieldValues: ${taskId} => ${fieldId}`);
+        return new Observable<FormFieldOption[]>(observer => {
+            let field = this.data.rest.fields.find(
+                f => f.taskId === taskId && f.fieldId === fieldId
+            );
+            let values: FormFieldOption[] = field.values || [];
+            console.log(values);
+            observer.next(values);
+        });
+    }
+
+    /** @override */
+    getRestFieldValuesByProcessId(processDefinitionId: string, fieldId: string): Observable<any> {
+        // Uncomment this to use original call
+        // return super.getRestFieldValuesByProcessId(processDefinitionId, fieldId);
+
+        console.log(`getRestFieldValuesByProcessId: ${processDefinitionId} => ${fieldId}`);
+        return new Observable<FormFieldOption[]>(observer => {
+            let field = this.data.rest.fields.find(
+                f => f.processId === processDefinitionId && f.fieldId === fieldId
+            );
+            let values: FormFieldOption[] = field.values || [];
+            console.log(values);
+            observer.next(values);
+        });
+    }
+
+}

demo-shell-ng2/app/vendor.ts

@@ -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/helpers.js

@@ -0,0 +1,10 @@
+var path = require('path');
+
+var _root = path.resolve(__dirname, '..');
+
+function root(args) {
+  args = Array.prototype.slice.call(arguments, 0);
+  return path.join.apply(path, [_root].concat(args));
+}
+
+exports.root = root;

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/license-check.js

@@ -0,0 +1,67 @@
+var path = require('path');
+var loaderUtils = require('loader-utils');
+var fs = require('fs');
+
+var licenseFileUtf8Store = undefined;
+
+function readLicenseHeaderFile(licenseFilePath) {
+    if (licenseFileUtf8Store) {
+        return licenseFileUtf8Store;
+    }
+
+    if (fs.existsSync(licenseFilePath)) {
+        licenseFileUtf8Store = fs.readFileSync(licenseFilePath, 'utf8').split(/\r?\n/);
+        return licenseFileUtf8Store;
+    }
+
+    throw new Error('The license header file path is wrong ' + licenseFilePath);
+}
+
+function isFileEmpty(fileContents) {
+    return fileContents.toString('utf8').trim() === '';
+}
+
+function readCurrentFile(fileContent) {
+    return fileContent.toString('utf8').split(/\r?\n/);
+}
+
+function isLicenseHeaderPresent(currentFileContent, licenseFilePath) {
+    if (!isFileEmpty(currentFileContent)) {
+        var currentFileUtf8 = readCurrentFile(currentFileContent),
+            licenseFileUtf8 = readLicenseHeaderFile(licenseFilePath);
+            skipStrict = 0;
+
+        if(currentFileUtf8[0] === '"use strict";' ) {
+            skipStrict = 1;
+        }
+
+        for (var i = skipStrict; i < licenseFileUtf8.length; i++) {
+            if (currentFileUtf8[i + skipStrict] !== licenseFileUtf8[i]) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+
+function report(hasHeader, emitter, filename) {
+  if (hasHeader) return;
+  emitter('Missing license header file : ' + filename);
+}
+
+function licenseCheck(webpackInstance, input, options) {
+    var isLicensePresent =  isLicenseHeaderPresent(input, options.licenseFile);
+
+    var emitter = options.emitErrors ? webpackInstance.emitError : webpackInstance.emitWarning;
+
+    report(isLicensePresent, emitter, webpackInstance.resourcePath);
+}
+
+module.exports = function(input, map) {
+  this.cacheable && this.cacheable();
+  var callback = this.async();
+
+  var options = loaderUtils.getOptions(this);
+  licenseCheck(this, input, options);
+  callback(null, input, map);
+};

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,174 @@
+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');
+
+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 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,108 @@
+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 ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+
+const alfrescoLibs = [
+    'ng2-activiti-analytics',
+    'ng2-activiti-diagrams',
+    'ng2-activiti-form',
+    'ng2-activiti-processlist',
+    'ng2-activiti-tasklist',
+    'ng2-alfresco-core',
+    'ng2-alfresco-datatable',
+    'ng2-alfresco-documentlist',
+    'ng2-alfresco-login',
+    'ng2-alfresco-search',
+    'ng2-alfresco-tag',
+    'ng2-alfresco-upload',
+    'ng2-alfresco-userinfo',
+    'ng2-alfresco-viewer',
+    'ng2-alfresco-webscript'
+];
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'cheap-module-eval-source-map',
+
+    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 ForkTsCheckerWebpackPlugin({tsconfig: "tsconfig.dev.json"}),
+
+        new HappyPack({
+            id: 'ts',
+            threads: 8,
+            loaders: [
+                {
+                    path: 'ts-loader',
+                    query: {happyPackMode: true}
+                }
+            ]
+        }),
+
+        new webpack.NoEmitOnErrorsPlugin(),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        }),
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `../ng2-components/${lib}/src/i18n/`,
+                    from: '**/*',
+                    to: `assets/${lib}/i18n/`
+                }
+            })
+        ])
+    ]
+});

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

@@ -0,0 +1,110 @@
+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 ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+
+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 ForkTsCheckerWebpackPlugin(),
+
+        new HappyPack({
+            id: 'ts',
+            threads: 4,
+            loaders: [
+                {
+                    path: 'ts-loader',
+                    query: {
+                        happyPackMode: true,
+                        "compilerOptions": {
+                            "paths": {}
+                        }
+                    }
+                }
+            ]
+        }),
+
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `node_modules/${lib}/bundles/assets/`,
+                    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,149 @@
+{
+  "name": "Alfresco-Angular2-Demo",
+  "description": "Demo shell for Alfresco Angular2 components",
+  "version": "1.6.1",
+  "author": "Alfresco Software, Ltd.",
+  "scripts": {
+    "build": "npm run server-versions && rimraf dist && npm run webpack -- --config  config/webpack.prod.js --progress --profile --bail",
+    "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'",
+    "clean-lock": "rimraf package-lock.json",
+    "server-versions": "rimraf versions.json && npm list --depth=0 --json=true --prod=true > versions.json  || exit 0",
+    "webpack-dev-server": "node 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.2.5",
+    "@angular/common": "4.2.5",
+    "@angular/compiler": "4.2.5",
+    "@angular/compiler-cli": "4.2.5",
+    "@angular/core": "4.2.5",
+    "@angular/forms": "4.2.5",
+    "@angular/http": "4.2.5",
+    "@angular/material": "2.0.0-beta.6",
+    "@angular/platform-browser": "4.2.5",
+    "@angular/platform-browser-dynamic": "4.2.5",
+    "@angular/router": "4.2.5",
+    "@ngx-translate/core": "7.0.0",
+    "alfresco-js-api": "1.6.1",
+    "chart.js": "2.5.0",
+    "core-js": "2.4.1",
+    "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",
+    "minimatch": "3.0.4",
+    "moment": "2.15.1",
+    "ng2-3d-editor": "0.0.15",
+    "ng2-activiti-analytics": "1.6.1",
+    "ng2-activiti-diagrams": "1.6.1",
+    "ng2-activiti-form": "1.6.1",
+    "ng2-activiti-processlist": "1.6.1",
+    "ng2-activiti-tasklist": "1.6.1",
+    "ng2-alfresco-core": "1.6.1",
+    "ng2-alfresco-datatable": "1.6.1",
+    "ng2-alfresco-documentlist": "1.6.1",
+    "ng2-alfresco-login": "1.6.1",
+    "ng2-alfresco-search": "1.6.1",
+    "ng2-alfresco-social": "1.6.1",
+    "ng2-alfresco-tag": "1.6.1",
+    "ng2-alfresco-upload": "1.6.1",
+    "ng2-alfresco-userinfo": "1.6.1",
+    "ng2-alfresco-viewer": "1.6.1",
+    "ng2-alfresco-webscript": "1.6.1",
+    "ng2-charts": "1.6.0",
+    "pdfjs-dist": "1.5.404",
+    "raphael": "2.2.7",
+    "reflect-metadata": "0.1.9",
+    "rxjs": "5.1.0",
+    "zone.js": "0.8.11"
+  },
+  "devDependencies": {
+    "@types/hammerjs": "2.0.34",
+    "@types/jasmine": "2.5.35",
+    "@types/node": "6.0.45",
+    "angular2-template-loader": "0.6.2",
+    "codelyzer": "3.1.2",
+    "copy-webpack-plugin": "4.0.1",
+    "css-loader": "0.26.1",
+    "extract-text-webpack-plugin": "2.0.0-rc.3",
+    "file-loader": "0.10.0",
+    "fork-ts-checker-webpack-plugin": "0.2.4",
+    "happypack": "^4.0.0-beta.1",
+    "html-loader": "0.4.4",
+    "html-webpack-plugin": "2.28.0",
+    "jasmine-core": "2.5.2",
+    "karma": "1.7.0",
+    "karma-chrome-launcher": "2.0.0",
+    "karma-coverage": "1.1.1",
+    "karma-jasmine": "1.1.0",
+    "karma-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.3",
+    "node-sass": "4.5.3",
+    "null-loader": "0.1.1",
+    "raw-loader": "0.5.1",
+    "rimraf": "2.6.1",
+    "sass-loader": "6.0.5",
+    "script-loader": "0.7.0",
+    "source-map-loader": "0.1.6",
+    "sourcemap-istanbul-instrumenter-loader": "0.2.0",
+    "style-loader": "0.13.1",
+    "to-string-loader": "1.1.5",
+    "ts-loader": "2.2.1",
+    "tslint": "4.5.1",
+    "tslint-loader": "3.5.3",
+    "typescript": "2.3.4",
+    "webpack": "2.2.1",
+    "webpack-dev-server": "2.3.0",
+    "webpack-merge": "2.6.1",
+    "wsrv": "0.1.6"
+  }
+}