Merge pull request #1850 from Alfresco/development

1.4.0

.github/ISSUE_TEMPLATE.md

@@ -6,15 +6,17 @@ Please ask before on our gitter channel https://gitter.im/Alfresco/alfresco-ng2-
 -->
 
 **Type of issue:**  (check with "[x]")
+```
 - [ ] New feature request
 - [ ] Bug  
 - [ ] Support request
-
-**Current behavior:**
-<!-- Describe the current behavior. -->
+- [ ] Documentation
+```
+**Current behaviour:**
+<!-- Describe the current behaviour. -->
 
 **Expected behavior:**
-<!-- Describe the expected behavior. -->
+<!-- Describe the expected behaviour. -->
 
 **Steps to reproduce the issue:**
 <!-- Describe the steps to reproduce the issue. -->

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,37 +1,39 @@
+**Please check if the PR fulfills these requirements**
+```
+[ ] The commit message follows our [guidelines](https://github.com/Alfresco/alfresco-ng2-components/wiki/Commit-format)
+[ ] Tests for the changes have been added (for bug fixes / features)
+[ ] Docs have been added / updated (for bug fixes / features)
+```
 <!--
  Before submitting your PR, please check that your code follows our contribution guidelines:
  https://github.com/Alfresco/alfresco-ng2-components/wiki/Code-contribution-acceptance-criteria
- 
- Check also that your commit messages follow our commit message format guidelines:
- https://github.com/Alfresco/alfresco-ng2-components/wiki/Commit-format
  -->
 
-**Type of contribution:** (check one with "x")
+**What kind of change does this PR introduce?** (check one with "x")
 ```
 [ ] Bugfix
 [ ] Feature
-[ ] Code formatting 
-[ ] Code Refactoring
+[ ] Code style update (formatting, local variables)
+[ ] Refactoring (no functional changes, no api changes)
 [ ] Build related changes
 [ ] Documentation
 [ ] Other... Please describe:
 ```
-**This PR adds the following feature:** 
-<!-- you can ignore this line in the case of a bugfix -->
 
-**Current behavior:** 
-
-**New behavior:**
-
-**This PR fixes the following issue:** 
-<!-- link to the open issue, ignore this if there are no issues open -->
-
-**This PR introduces a breaking change:** (check one with "x")
-- [ ] Yes
-- [ ] No
-
-<!-- Please describe the reason to introduce a breaking change, and what exactly breaks -->
+**What is the current behaviour?** (You can also link to an open issue here)
 
 
-**More information:**
 
+**What is the new behaviour?**
+
+
+
+**Does this PR introduce a breaking change?** (check one with "x")
+```
+[ ] Yes
+[ ] No
+```
+
+If this PR contains a breaking change, please describe the impact and migration path for existing applications: ...
+
+**Other information**:

.gitignore

@@ -8,3 +8,5 @@ demo-shell-ng2/app/components/router/
 ng2-components/ng2-alfresco-userinfo-old/demo/src/app/
 ng2-components/ng2-alfresco-userinfo-old/src/services/bpm-user.service.spec.ts
 ng2-components/ng2-alfresco-userinfo-old/src/services/ecm-user.service.spec.ts
+src/environments/
+/ng2-components/ng2-example-webpack/

.travis.yml

@@ -1,22 +1,13 @@
 language: node_js
 dist: trusty
-sudo: required
-
+sudo: false
 node_js:
   - "5"
 
-addons:
-  apt:
-    sources:
-      - google-chrome
-    packages:
-      - google-chrome-stable
-
-
 before_install:
-  - export CHROME_BIN=/usr/bin/google-chrome
-  - export DISPLAY=:99.0
-  - sh -e /etc/init.d/xvfb start
+  - "export DISPLAY=:99.0"
+  - "sh -e /etc/init.d/xvfb start"
+
 env:
   matrix:
     - MODULE=ng2-alfresco-core
@@ -34,34 +25,41 @@ env:
     - MODULE=ng2-activiti-diagrams
     - MODULE=ng2-activiti-analytics
     - MODULE=ng2-alfresco-userinfo
+    - MODULE=ng2-alfresco-social
 
 before_script:
   - if ([ "$MODULE" != "ng2-alfresco-core" ]); then
-        (cd ng2-components/ng2-alfresco-core; npm install; npm link);
+        (cd ng2-components/ng2-alfresco-core; if [ ! -d "bundles" ]; then npm install && npm run  build && npm link; fi);
     fi
   - if ([ "$MODULE" == "ng2-alfresco-documentlist" ] || [ "$MODULE" == "ng2-alfresco-webscript" ] || [ "$MODULE" == "ng2-activiti-processlist" ] || [ "$MODULE" == "ng2-activiti-tasklist" ]); then
-        (cd ng2-components/ng2-alfresco-datatable; npm link ng2-alfresco-core; npm install; npm link);
+        (cd ng2-components/ng2-alfresco-datatable; npm link ng2-alfresco-core; if [ ! -d "bundles" ]; then npm install && npm run  build && npm link; fi);
     fi
   - if ([ "$MODULE" == "ng2-activiti-tasklist" ] || [ "$MODULE" == "ng2-activiti-processlist" ]); then
-        (cd ng2-components/ng2-activiti-form; npm link ng2-alfresco-core; npm install; npm link);
+        (cd ng2-components/ng2-alfresco-datatable; npm link ng2-alfresco-core; if [ ! -d "bundles" ]; then npm install && npm run  build && npm link; fi);
+        (cd ng2-components/ng2-activiti-form; npm link ng2-alfresco-core; if [ ! -d "bundles" ]; then npm install && npm run  build && npm link; fi);
     fi
   - if ([ "$MODULE" == "ng2-activiti-processlist" ]); then
-        (cd ng2-components/ng2-activiti-tasklist; npm link ng2-alfresco-core; npm link ng2-alfresco-datatable; npm link ng2-activiti-form; npm install; npm link);
+        (cd ng2-components/ng2-alfresco-datatable; npm link ng2-alfresco-core; if [ ! -d "bundles" ]; then npm install && npm run  build && npm link; fi);
+        (cd ng2-components/ng2-activiti-form; npm link ng2-alfresco-core; if [ ! -d "bundles" ]; then npm install && npm run  build && npm link; fi);
+        (cd ng2-components/ng2-activiti-tasklist; npm link ng2-alfresco-core; npm link ng2-alfresco-datatable; npm link ng2-activiti-form; if [ ! -d "bundles" ]; then npm install && npm run  build && npm link; fi);
     fi
   - if ([ "$MODULE" == "ng2-activiti-analytics" ]); then
-        (cd ng2-components/ng2-activiti-diagrams; npm link ng2-alfresco-core; npm install; npm link);
+        (cd ng2-components/ng2-activiti-diagrams; npm link ng2-alfresco-core; if [ ! -d "bundles" ]; then npm install && npm run  build && npm link; fi);
+    fi
+  - if ([ "$MODULE" == "ng2-alfresco-search" ]); then
+        (cd ng2-components/ng2-alfresco-datatable; npm link ng2-alfresco-core; if [ ! -d "bundles" ]; then npm install && npm run  build && npm link; fi);
+        (cd ng2-components/ng2-alfresco-documentlist; npm link ng2-alfresco-core; npm link ng2-alfresco-datatable; if [ ! -d "bundles" ]; then npm install && npm run  build && npm link; fi);
     fi
   - cd ng2-components/$MODULE;
-  - npm run travis
-  - npm install;
-  - ls -ltrh ./node_modules/
-script: npm run test
+script: npm install && npm run travis && npm run test
 # Send coverage data to Coveralls
 after_success:
-  - bash <(curl -s https://codecov.io/bash)
+  bash <(curl -s https://codecov.io/bash) -X gcov
 
 cache:
   directories:
+  - ./node_modules/material-design-lite
+  - ./node_modules/material-design-icons
   - demo-shell-ng2/node_modules
   - ng2-components/ng2-activiti-form/node_modules
   - ng2-components/ng2-activiti-processlist/node_modules

.vscode/settings.json

@@ -6,6 +6,9 @@
         "**/.hg": true,
         "**/.DS_Store": true,
         "**/*.js": { "when": "$(basename).ts"},
-        "**/*.js.map": { "when": "$(basename)"}
-    }
+        "**/*.js.map": { "when": "$(basename)"},
+        "**/*.d.ts": { "when": "$(basename).ts"},
+        "**/coverage": true
+    },
+    "editor.renderIndentGuides": true
 }

ALFRESCOCORS.md

@@ -0,0 +1,67 @@
+### Enable CORS in Alfresco
+
+The web client that we are building with the application development framework will be loaded from a different web server than the Alfresco Platform is running on.
+So we need to tell the Alfresco server that any request that comes in from this custom web client should be allowed access 
+to the Content Repository. This is done by enabling CORS.
+
+To enable CORS in the Alfresco Platform do **one of the following**:
+
+##Recommended - Download and install the enable CORS module
+
+This is the easiest way, add the [enablecors](https://artifacts.alfresco.com/nexus/service/local/repositories/releases/content/org/alfresco/enablecors/1.0/enablecors-1.0.jar) 
+platform module JAR to the *$ALF_INSTALL_DIR/modules/platform* directory and restart the server.
+
+Note. by default the CORS filter that is enabled will allow any orgin.
+ 
+##Or - Manually update the web.xml file
+
+Modify *$ALF_INSTALL_DIR/tomcat/webapps/alfresco/WEB-INF/web.xml* and uncomment the following section and update 
+`cors.allowOrigin` to `http://localhost:3000`:
+
+```
+<filter>
+      <filter-name>CORS</filter-name>
+      <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
+      <init-param>
+         <param-name>cors.allowGenericHttpRequests</param-name>
+         <param-value>true</param-value>
+      </init-param>
+      <init-param>
+         <param-name>cors.allowOrigin</param-name>
+         <param-value>http://localhost:3000</param-value>
+      </init-param>
+      <init-param>
+         <param-name>cors.allowSubdomains</param-name>
+         <param-value>true</param-value>
+      </init-param>
+      <init-param>
+         <param-name>cors.supportedMethods</param-name>
+         <param-value>GET, HEAD, POST, PUT, DELETE, OPTIONS</param-value>
+      </init-param>
+      <init-param>
+         <param-name>cors.supportedHeaders</param-name>
+         <param-value>origin, authorization, x-file-size, x-file-name, content-type, accept, x-file-type</param-value>
+      </init-param>
+      <init-param>
+         <param-name>cors.supportsCredentials</param-name>
+         <param-value>true</param-value>
+      </init-param>
+      <init-param>
+         <param-name>cors.maxAge</param-name>
+         <param-value>3600</param-value>
+      </init-param>
+</filter>
+```
+When specifying the `cors.allowOrigin` URL make sure to use the URL that will be used by the web client. 
+
+Then uncomment filter mappings:
+
+``` 
+<filter-mapping>
+      <filter-name>CORS</filter-name>
+      <url-pattern>/api/*</url-pattern>
+      <url-pattern>/service/*</url-pattern>
+      <url-pattern>/s/*</url-pattern>
+      <url-pattern>/cmisbrowser/*</url-pattern>
+</filter-mapping>
+```

PREREQUISITES.md

@@ -2,10 +2,12 @@
 
 The [Angular 2](https://angular.io/) based application development framework requires the following:
 
-- An Alfresco Platform Repository (version [201609 Early Access](https://community.alfresco.com/docs/DOC-6372-alfresco-community-edition-file-list-201609-ea) or newer) to talk to, which has [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) enabled.
+- An Alfresco Platform Repository (version [201609 Early Access](https://community.alfresco.com/docs/DOC-6372-alfresco-community-edition-file-list-201609-ea) or newer) 
+- [Enable cors on Alfresco One](/ALFRESCOCORS.md)
 - [Download and install Activiti](https://www.alfresco.com/products/bpm/alfresco-activiti/trial)
 - [Node.js](https://nodejs.org/en/) JavaScript runtime.
 - [npm](https://www.npmjs.com/) package manager for JavaScript.
+- local nginx proxy to avoid cross-origin browser restrictions (see below)
 - (If you use ECM and BPM together) Make sure your user has the same username and password in both system
 
 *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.*
@@ -25,26 +27,39 @@ $ node -v
 v5.12.0
 ```
 
-## Configure Nginx
+## Installing nginx
 
-To correctly configure Nginx use the following file [nginx.conf](/nginx.conf).
-This will put Activiti, Alfresco and the app dev framework under the same domain.
+Most Linux distributions will come with nginx available to install via your
+package manager and on Mac OS you can use [Homebrew](http://brew.sh/).
+
+If you want to install manually however you can follow the instructions on the
+[download page](http://nginx.org/en/download.html). See also the specific information for
+[windows users](http://nginx.org/en/docs/windows.html).
+
+### Start nginx
+
+Start nginx using the supplied configuration in [nginx.conf](nginx.conf)
+
+    nginx -c nginx.conf
+
+### Review nginx configuration
+
+To correctly configure nginx use the following file [nginx.conf](/nginx.conf).
+This will host Activiti, Alfresco and the app dev framework under the same origin.
 
 * ECM : http://localhost:8888/alfresco/
 * BPM : http://localhost:8888/activiti/
 
-To make everything work, you have to change the address of the ECM and BPM. In the demo app you can do that clicking on the top left 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 changing the bottom left options: *ECM host* and *BPM host*.
 
 This configuration assumes few things:
 
 * Port mapping:
-  * Nginx entry point: 8888
-  * Demo Shell: 3000
-  * Alfresco: 8080
-  * Activiti: 9999
+  * nginx entry point: 0.0.0.0:8888
+  * Demo Shell: locathost:3000
+  * Alfresco: locathost:8080
+  * Activiti: locathost:9999
 
 All those values can be modified at their respective `location` directive on the [nginx.conf](/nginx.conf) file.
 
-It also need to be compiled with the [Headers More](https://www.nginx.com/resources/wiki/modules/headers_more/) module , which add more control over sending headers to the backend.
-
-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)
+If you want to know more on how to install and configure nginx to work with the Application Development Framework can be found [here](https://community.alfresco.com/community/application-development-framework/blog/2016/09/28/adf-development-set-up-with-nginx-proxy)

README.md

@@ -12,7 +12,7 @@
     Status' />
   </a>
   <a href='https://codecov.io/gh/Alfresco/alfresco-ng2-components'>
-    <img src='https://img.shields.io/codecov/c/github/Alfresco/alfresco-ng2-components/master.svg?maxAge=2592000' alt='Coverage Status' />
+    <img src='http://img.shields.io/codecov/c/github/Alfresco/alfresco-ng2-components/master.svg?maxAge=2592000' alt='Coverage Status' />
   </a>
   <a href='https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE'>
      <img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
@@ -36,6 +36,10 @@
   <img title="angular2" alt='angular2' src='assets/angular2.png'  width="150px" height="150px"></img>    
 </p>
 
+<p align="center">
+  <img title="browser stack" alt='browser stack' src='assets/browserstack.png'  width="350px" height="225px"></img>
+</p>
+
 ## Introduction
 
 See the following [page](INTRODUCTION.md) for an introduction to the Alfresco Application Development Framework.
@@ -52,6 +56,12 @@ To view the complete list of all the components that you can use to build your c
 
 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-ng2).
+
+You will find examples of basic interaction for both BPM and ECM sets of widgets.
+
 ## Yeoman generators
 
 To speed up the development of your Alfresco Angular 2 application, or Alfresco Angular 2 component, use one of the Yeoman generators. 
@@ -83,10 +93,10 @@ To generate your Alfresco Angular 2 application you can use the following Yeoman
 
 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/2016210o6l-Archive-v7.zip" target="_blank"><img src="http://d0.awsstatic.com/product-marketing/Elastic%20Beanstalk/deploy-to-aws.png" height="40"></a>
+<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 below browsers:
+All components are supported in the following browsers:
 
 |**Browser**   	   |**Version**   	|
 |---        	   |---  	        |
@@ -96,6 +106,6 @@ All components are supported in the below browsers:
 |Edge       	   |13, 14     	    |
 |Internet Explorer |11     	        |
 
-*Concerning Alfresco Upload Component, folder upload currently not supported [firefox known issue](https://bugzilla.mozilla.org/show_bug.cgi?id=1188880 ) 
+* Due to a [known Firefox issue] (https://bugzilla.mozilla.org/show_bug.cgi?id=1188880),the Alfresco Upload Component does not currently support folder upload functionality on Firefox    
 
 Please refer to [Browser Support](BROWSER-SUPPORT.md) article for more details. 

appveyor.yml

@@ -2,6 +2,8 @@
 branches:
   only:
     - master
+    - development
+    - dev-build-test
 
 environment:
   nodejs_version: "5"
@@ -22,31 +24,30 @@ environment:
   - COMPONENT_NAME: ng2-activiti-diagrams
   - COMPONENT_NAME: ng2-activiti-analytics
   - COMPONENT_NAME: ng2-alfresco-userinfo
+  - COMPONENT_NAME: ng2-alfresco-social
 
 # 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% NEQ ng2-alfresco-core (cd ng2-components/ng2-alfresco-core && npm install && npm link && cd ../../)
-  - IF %COMPONENT_NAME% EQU ng2-alfresco-documentlist (cd ng2-components/ng2-alfresco-datatable && npm link ng2-alfresco-core && npm install && npm link && cd ../../)
-  - IF %COMPONENT_NAME% EQU ng2-activiti-processlist (cd ng2-components/ng2-alfresco-datatable && npm link ng2-alfresco-core && npm install && npm link && cd ../../)
-  - IF %COMPONENT_NAME% EQU ng2-activiti-processlist (cd ng2-components/ng2-activiti-form && npm link ng2-alfresco-core && npm install && npm link && cd ../../)
-  - IF %COMPONENT_NAME% EQU ng2-activiti-processlist (cd ng2-components/ng2-activiti-tasklist && npm link ng2-alfresco-core && npm link ng2-alfresco-datatable && npm link ng2-activiti-form && npm install && npm link && cd ../../)
-  - IF %COMPONENT_NAME% EQU ng2-activiti-tasklist (cd ng2-components/ng2-alfresco-datatable && npm link ng2-alfresco-core && npm install && npm link && cd ../../)
-  - IF %COMPONENT_NAME% EQU ng2-activiti-tasklist (cd ng2-components/ng2-activiti-form && npm link ng2-alfresco-core && npm install && npm link && cd ../../)
-  - IF %COMPONENT_NAME% EQU ng2-alfresco-webscript (cd ng2-components/ng2-alfresco-datatable && npm link ng2-alfresco-core && npm install && npm link && cd ../../)
+  - IF %COMPONENT_NAME% NEQ ng2-alfresco-core (cd ng2-components/ng2-alfresco-core && npm link && npm install && npm run build && cd ../../)
+  - IF %COMPONENT_NAME% EQU ng2-alfresco-documentlist (cd ng2-components/ng2-alfresco-datatable && npm link ng2-alfresco-core && npm link && npm install && npm run build && cd ../../)
+  - IF %COMPONENT_NAME% EQU ng2-alfresco-search (cd ng2-components/ng2-alfresco-datatable && npm link ng2-alfresco-core && npm link && npm install && npm run build && cd ../../)
+  - IF %COMPONENT_NAME% EQU ng2-alfresco-search (cd ng2-components/ng2-alfresco-documentlist && npm link ng2-alfresco-core && npm link ng2-alfresco-datatable && npm link && npm install && npm run build && cd ../../)
+  - IF %COMPONENT_NAME% EQU ng2-activiti-processlist (cd ng2-components/ng2-alfresco-datatable && npm link ng2-alfresco-core && npm link && npm install && npm run build && cd ../../)
+  - IF %COMPONENT_NAME% EQU ng2-activiti-processlist (cd ng2-components/ng2-activiti-form && npm link ng2-alfresco-core && npm link && npm install && npm run build && cd ../../)
+  - IF %COMPONENT_NAME% EQU ng2-activiti-processlist (cd ng2-components/ng2-activiti-tasklist && npm link ng2-alfresco-core && npm link ng2-alfresco-datatable && npm link ng2-activiti-form && npm link && npm install && npm run build && cd ../../)
+  - IF %COMPONENT_NAME% EQU ng2-activiti-tasklist (cd ng2-components/ng2-alfresco-datatable && npm link ng2-alfresco-core && npm link && npm install && npm run build && cd ../../)
+  - IF %COMPONENT_NAME% EQU ng2-activiti-tasklist (cd ng2-components/ng2-activiti-form && npm link ng2-alfresco-core && npm link && npm install && npm run build && cd ../../)
+  - IF %COMPONENT_NAME% EQU ng2-alfresco-webscript (cd ng2-components/ng2-alfresco-datatable && npm link ng2-alfresco-core && npm link && npm install && npm run build && cd ../../)
+  - IF %COMPONENT_NAME% EQU ng2-activiti-analytics (cd ng2-components/ng2-activiti-diagrams && npm link link ng2-alfresco-core && npm link && npm install && npm run build && cd ../../)
   - cd ng2-components/%COMPONENT_NAME%
-  - IF %COMPONENT_NAME% NEQ ng2-alfresco-core (npm link ng2-alfresco-core)
-  - IF %COMPONENT_NAME% EQU ng2-alfresco-documentlist (npm link ng2-alfresco-datatable)
-  - IF %COMPONENT_NAME% EQU ng2-activiti-processlist (npm link ng2-alfresco-datatable && npm link ng2-activiti-form && npm link ng2-activiti-tasklist)
-  - IF %COMPONENT_NAME% EQU ng2-activiti-tasklist (npm link ng2-alfresco-datatable && npm link ng2-activiti-form)
-  - IF %COMPONENT_NAME% EQU ng2-alfresco-webscript (npm link ng2-alfresco-datatable)
-  - IF %COMPONENT_NAME% EQU ng2-activiti-analytics (npm link ng2-alfresco-diagrams)
-  - npm install
+  - npm run travis
 
 # Post-install test scripts.
 test_script:
+  - npm install
   # Output useful info for debugging.
   - node --version
   - npm --version

demo-shell-ng2/.gitignore

@@ -5,7 +5,9 @@ app/**/*.js
 app/**/*.js.map
 !app/js/Polyline.js
 .idea
+versions.json
 dist/
+coverage/
 
 # docker files
 docker-compose.yml

demo-shell-ng2/README.md

@@ -10,28 +10,48 @@
     </a>
 </p>
 
-### Node
-To correctly use this demo check that on your machine is running Node version 5.0.0 or higher.
+## Installing
 
-#### Local build
-
-1 Install dependencies
+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
 ```
 
-2 Fast build and watch for dev purposes
+## Development build
 
 ```sh
 npm start
 ```
 
->`start` script also includes live reload and watchers for all the `.ts` files.
-TypeScript watchers are also configured for `node_modules` folder within demo shell
-and provide live reload for all the component libraries as well.
+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.
 
-#### Development branch build
+### 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:
 
@@ -40,7 +60,7 @@ If you want to run the demo shell with the latest change from the development br
 ./start-linked.sh -install
 ```
 
-###Multi-language
+## Multi-language
 To support a new language you need to create your language file (.json) and add it to `i18n/` folder.
 
 ```json
@@ -61,4 +81,20 @@ Directory structure:
 │   └── fr.json
 ```
 
+## Custom-files
 
+If you need to add custom files on your project you can add this files in the folders public
+
+```
+.
+├── public/
+│   ├── images/
+│   ├── css/
+│   └── js/
+```
+
+the public folder above wil be copied in the root of your project and you can refer to them for example as
+
+ * './images/custom_image.png'
+ * './js/custom_script.js'
+ * './css/custom_style.css'

demo-shell-ng2/WINDOWS.md

@@ -1,3 +0,0 @@
-#Windows Installation of *Alfresco Angular 2 Components* project 
-
-See https://github.com/Alfresco/alfresco-ng2-components/blob/master/Prerequisites.md

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

@@ -1,6 +1,12 @@
-@media only screen and (max-width: 640px) {
-    .mdl-layout__header.header-search-expanded .mdl-layout-title {
-        display: none;
+@media screen and (max-width: 1024px) {
+    .mdl-layout__header {
+        display: block;
+    }
+}
+
+@media screen and (max-width: 1024px) {
+    .mdl-layout__header {
+        display: block;
     }
 }
 
@@ -9,9 +15,21 @@
 }
 
 .user-profile {
-    margin-right: 50px;
+    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

@@ -1,80 +1,67 @@
 <!-- Always shows a header, even in smaller screens. -->
 <div mdl class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
-    <div *ngIf="!isLoginPage()">
-        <header class="mdl-layout__header">
-            <div class="mdl-button-padding mdl-layout__header-row">
+    <header class="mdl-layout__header main_header_adf" [ngClass]="{hide: isAPageWithHeaderBar()}">
+        <div class="mdl-button-padding mdl-layout__header-row">
 
-                <div *ngIf="isLoggedIn()">
-                    <ng2-alfresco-userinfo class="user-profile" [menuOpenType]="left">
-                    </ng2-alfresco-userinfo>
-                </div>
+            <!-- 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>
 
-                <!-- 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>
 
-                <!-- 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="files" href="" routerLink="/files">DocumentList</a>
-                    <a class="mdl-navigation__link" data-automation-id="datatable" href="" routerLink="/datatable">DataTable</a>
-                    <a class="mdl-navigation__link" data-automation-id="uploader" href="" routerLink="/uploader">Uploader</a>
-                    <a class="mdl-navigation__link" data-automation-id="activiti" href="" routerLink="/activiti">Activiti</a>
-                    <a class="mdl-navigation__link" data-automation-id="webscript" href="" routerLink="/webscript">Webscript</a>
-                    <a class="mdl-navigation__link" data-automation-id="tag" href="" routerLink="/tag">Tag</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>
-
-                <!-- Right aligned menu below button -->
-                <button id="demo-menu-lower-right" data-automation-id="right-action-menu"
-                        class="mdl-button mdl-js-button mdl-button--icon">
-                    <i class="material-icons">more_vert</i>
-                </button>
-
-                <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
-                    for="demo-menu-lower-right">
-                    <li class="mdl-menu__item" (click)="changeLanguage('en')">
-                        <span class="flag-icon flag-icon-gb"></span>
-                        <label tabindex="0"> English</label>
-                    </li>
-                    <li class="mdl-menu__item" (click)="changeLanguage('gr')">
-                        <span class="flag-icon flag-icon-gr"></span>
-                        <label tabindex="0"> Greek</label>
-                    </li>
-                    <li class="mdl-menu__item" (click)="changeLanguage('it')">
-                        <span class="flag-icon flag-icon-it"></span>
-                        <label tabindex="0"> Italian</label>
-                    </li>
-                    <a class="mdl-menu__item" routerLink="/about">
-                        <label tabindex="0">About</label>
-                    </a>
-                    <a *ngIf="!isLoggedIn()" class="mdl-menu__item" routerLink="/login">
-                        <label tabindex="0">Login</label>
-                    </a>
-                    <li *ngIf="isLoggedIn()" class="mdl-menu__item" (click)="onLogout($event)">
-                        <label tabindex="0">Logout</label>
-                    </li>
-                </ul>
-            </div>
-        </header>
-        <div class="mdl-layout__drawer">
-            <span class="mdl-layout-title">Components List</span>
-            <nav class="mdl-navigation">
-                <a class="mdl-navigation__link" href="" routerLink="/files" (click)="hideDrawer()">DocumentList Demo</a>
-                <a class="mdl-navigation__link" href="" routerLink="/datatable" (click)="hideDrawer()">DataTable Demo</a>
-                <a class="mdl-navigation__link" href="" routerLink="/uploader" (click)="hideDrawer()">Uploader Demo</a>
-                <a class="mdl-navigation__link" href="" routerLink="/login" (click)="hideDrawer()">Login Demo</a>
-                <a class="mdl-navigation__link" href="" routerLink="/activiti" (click)="hideDrawer()">Activiti Components Demo</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="/settings" (click)="hideDrawer()">Settings</a>
+            <!-- Navigation. We hide it in small screens. -->
+            <nav class="mdl-navigation mdl-layout--large-screen-only">
+                <a class="mdl-navigation__link" data-automation-id="home" href="" routerLink="/">Home</a>
+                <a class="mdl-navigation__link" data-automation-id="files" href="" routerLink="/files">DocumentList</a>
+                <a class="mdl-navigation__link" data-automation-id="activiti" href="" routerLink="/activiti">Process Services</a>
+                <a class="mdl-navigation__link" data-automation-id="login" href="" routerLink="/login">Login</a>
+                <a class="mdl-navigation__link" data-automation-id="settings" href="" routerLink="/settings">Settings</a>
             </nav>
+
         </div>
+    </header>
+
+    <div class="mdl-layout__drawer">
+        <nav class="mdl-navigation">
+            <a class="mdl-navigation__link" (click)="onLogout($event)">
+                <label tabindex="0">Logout</label>
+            </a>
+        </nav>
+        <span class="mdl-layout-title">Languages</span>
+        <nav class="mdl-navigation">
+            <a class="mdl-navigation__link" (click)="changeLanguage('en')">
+                <span class="flag-icon flag-icon-gb"></span>
+                <label tabindex="0"> English</label>
+            </a>
+            <a class="mdl-navigation__link" (click)="changeLanguage('it')">
+                <span class="flag-icon flag-icon-it"></span>
+                <label tabindex="0"> Italian</label>
+            </a>
+            <a class="mdl-navigation__link" (click)="changeLanguage('ru')">
+                <span class="flag-icon flag-icon-ru"></span>
+                <label tabindex="0"> Russian</label>
+            </a>
+        </nav>
+        <span class="mdl-layout-title">Components</span>
+        <nav class="mdl-navigation">
+            <a class="mdl-navigation__link" href="" routerLink="/" (click)="hideDrawer()">Home</a>
+            <a class="mdl-navigation__link" href="" routerLink="/files" (click)="hideDrawer()">DocumentList</a>
+            <a class="mdl-navigation__link" href="" routerLink="/datatable" (click)="hideDrawer()">DataTable</a>
+            <a class="mdl-navigation__link" href="" routerLink="/uploader" (click)="hideDrawer()">Uploader</a>
+            <a class="mdl-navigation__link" href="" routerLink="/login" (click)="hideDrawer()">Login</a>
+            <a class="mdl-navigation__link" href="" routerLink="/activiti" (click)="hideDrawer()">Process Services</a>
+            <a class="mdl-navigation__link" href="" routerLink="/webscript" (click)="hideDrawer()">Webscript</a>
+            <a class="mdl-navigation__link" href="" routerLink="/tag" (click)="hideDrawer()">Tag</a>
+            <a class="mdl-navigation__link" href="" routerLink="/social" (click)="hideDrawer()">Social</a>
+            <a class="mdl-navigation__link" href="" routerLink="/about" (click)="hideDrawer()">About</a>
+            <a class="mdl-navigation__link" href="" routerLink="/settings" (click)="hideDrawer()">Settings</a>
+        </nav>
     </div>
     <main class="mdl-layout__content">
         <div class="page-content">

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

@@ -17,19 +17,14 @@
 
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
-
-import {
-    AlfrescoTranslationService,
-    AlfrescoAuthenticationService,
-    AlfrescoSettingsService
-} from 'ng2-alfresco-core';
+import { AlfrescoTranslationService, AlfrescoAuthenticationService, AlfrescoSettingsService, StorageService, LogService } from 'ng2-alfresco-core';
 
 declare var document: any;
 
 @Component({
     selector: 'alfresco-app',
-    templateUrl: 'app/app.component.html',
-    styleUrls: ['app/app.component.css']
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.css']
 })
 export class AppComponent {
     searchTerm: string = '';
@@ -37,51 +32,48 @@ export class AppComponent {
     ecmHost: string = 'http://' + window.location.hostname + ':8080';
     bpmHost: string = 'http://' + window.location.hostname + ':9999';
 
-    constructor(public auth: AlfrescoAuthenticationService,
-                public router: Router,
-                public alfrescoSettingsService: AlfrescoSettingsService,
-                private translate: AlfrescoTranslationService) {
+    constructor(private authService: AlfrescoAuthenticationService,
+                private router: Router,
+                private settingsService: AlfrescoSettingsService,
+                private translateService: AlfrescoTranslationService,
+                private storage: StorageService,
+                private logService: LogService) {
         this.setEcmHost();
         this.setBpmHost();
         this.setProvider();
 
-        if (translate) {
-            translate.addTranslationFolder();
+        if (translateService) {
+            translateService.addTranslationFolder('app', 'resources');
         }
     }
 
-    isLoggedIn(): boolean {
-        this.redirectToLoginPageIfNotLoggedIn();
-        return this.auth.isLoggedIn();
-    }
-
-    redirectToLoginPageIfNotLoggedIn(): void {
-        if (!this.isLoginPage() && !this.auth.isLoggedIn()) {
-            this.router.navigate(['/login']);
-        }
-    }
-
-    isLoginPage(): boolean {
-        return location.pathname === '/login' || location.pathname === '/' || location.pathname === '/settings';
+    isAPageWithHeaderBar(): boolean {
+        return location.pathname === '/login' || location.pathname === '/settings';
     }
 
     onLogout(event) {
         event.preventDefault();
-        this.auth.logout()
+        this.authService.logout()
             .subscribe(
                 () => {
-                    this.router.navigate(['/login']);
+                    this.navigateToLogin();
                 },
-                ($event: any) => {
-                    if ($event && $event.response && $event.response.status === 401) {
-                        this.router.navigate(['/login']);
+                (error: any) => {
+                    if (error && error.response && error.response.status === 401) {
+                        this.navigateToLogin();
                     } else {
-                        console.error('An unknown error occurred while logging out', $event);
+                        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');
@@ -93,7 +85,8 @@ export class AppComponent {
     }
 
     changeLanguage(lang: string) {
-        this.translate.use(lang);
+        this.translateService.use(lang);
+        this.hideDrawer();
     }
 
     hideDrawer() {
@@ -102,26 +95,26 @@ export class AppComponent {
     }
 
     private setEcmHost() {
-        if (localStorage.getItem(`ecmHost`)) {
-            this.alfrescoSettingsService.ecmHost = localStorage.getItem(`ecmHost`);
-            this.ecmHost = localStorage.getItem(`ecmHost`);
+        if (this.storage.hasItem(`ecmHost`)) {
+            this.settingsService.ecmHost = this.storage.getItem(`ecmHost`);
+            this.ecmHost = this.storage.getItem(`ecmHost`);
         } else {
-            this.alfrescoSettingsService.ecmHost = this.ecmHost;
+            this.settingsService.ecmHost = this.ecmHost;
         }
     }
 
     private setBpmHost() {
-        if (localStorage.getItem(`bpmHost`)) {
-            this.alfrescoSettingsService.bpmHost = localStorage.getItem(`bpmHost`);
-            this.bpmHost = localStorage.getItem(`bpmHost`);
+        if (this.storage.hasItem(`bpmHost`)) {
+            this.settingsService.bpmHost = this.storage.getItem(`bpmHost`);
+            this.bpmHost = this.storage.getItem(`bpmHost`);
         } else {
-            this.alfrescoSettingsService.bpmHost = this.bpmHost;
+            this.settingsService.bpmHost = this.bpmHost;
         }
     }
 
     private setProvider() {
-        if (localStorage.getItem(`providers`)) {
-            this.alfrescoSettingsService.setProviders(localStorage.getItem(`providers`));
+        if (this.storage.hasItem(`providers`)) {
+            this.settingsService.setProviders(this.storage.getItem(`providers`));
         }
     }
 }

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

@@ -25,6 +25,7 @@ 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';
@@ -32,19 +33,25 @@ 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 { AppComponent } from './app.component';
 import { routing } from './app.routes';
+import { CustomEditorsModule } from './components/activiti/custom-editor/custom-editor.component';
+import { Editor3DModule } from 'ng2-3d-editor';
+import { MaterialModule } from '@angular/material';
+import { ChartsModule } from 'ng2-charts';
 
 import {
+    HomeComponent,
     DataTableDemoComponent,
     SearchComponent,
     SearchBarComponent,
     LoginDemoComponent,
     ActivitiDemoComponent,
+    ActivitiAppsView,
     FormViewer,
     WebscriptComponent,
     TagComponent,
+    SocialComponent,
     AboutComponent,
     FilesComponent,
     FormNodeViewer,
@@ -55,32 +62,39 @@ import {
     imports: [
         BrowserModule,
         routing,
+        MaterialModule.forRoot(),
         CoreModule.forRoot(),
-        LoginModule,
+        LoginModule.forRoot(),
         SearchModule.forRoot(),
-        DataTableModule,
+        DataTableModule.forRoot(),
         DocumentListModule.forRoot(),
         UploadModule.forRoot(),
         TagModule.forRoot(),
-        WebScriptModule,
+        SocialModule.forRoot(),
+        WebScriptModule.forRoot(),
         ViewerModule.forRoot(),
         ActivitiFormModule.forRoot(),
         ActivitiTaskListModule.forRoot(),
         ActivitiProcessListModule.forRoot(),
         UserInfoComponentModule.forRoot(),
-        AnalyticsModule.forRoot()
+        AnalyticsModule.forRoot(),
+        CustomEditorsModule,
+        Editor3DModule.forRoot(),
+        ChartsModule
     ],
     declarations: [
         AppComponent,
-        SearchBarComponent,
+        HomeComponent,
         DataTableDemoComponent,
         SearchComponent,
         SearchBarComponent,
         LoginDemoComponent,
         ActivitiDemoComponent,
+        ActivitiAppsView,
         FormViewer,
         WebscriptComponent,
         TagComponent,
+        SocialComponent,
         AboutComponent,
         FilesComponent,
         FormNodeViewer,
@@ -90,4 +104,3 @@ import {
     bootstrap: [ AppComponent ]
 })
 export class AppModule { }
-

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

@@ -17,15 +17,19 @@
 
 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,
+    ActivitiAppsView,
     WebscriptComponent,
     TagComponent,
+    SocialComponent,
     AboutComponent,
     FormViewer,
     FormNodeViewer,
@@ -35,19 +39,90 @@ import {
 import { UploadButtonComponent } from 'ng2-alfresco-upload';
 
 export const appRoutes: Routes = [
-    { path: 'home', component: FilesComponent },
-    { path: 'files', component: FilesComponent },
-    { path: 'datatable', component: DataTableDemoComponent },
-    { path: '', component: LoginDemoComponent },
-    { path: 'uploader', component: UploadButtonComponent },
     { path: 'login', component: LoginDemoComponent },
-    { path: 'search', component: SearchComponent },
-    { path: 'activiti', component: ActivitiDemoComponent },
-    { path: 'activiti/appId/:appId', component: ActivitiDemoComponent },
-    { path: 'activiti/tasks/:id', component: FormViewer },
-    { path: 'activiti/tasksnode/:id', component: FormNodeViewer },
-    { path: 'webscript', component: WebscriptComponent },
-    { path: 'tag', component: TagComponent },
+    {
+        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]
+    },
+    // 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: SettingComponent }
 ];

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

@@ -1,4 +1,4 @@
-<div style="padding: 10px">
+<div class="about-container">
     <h3>Packages</h3>
     <alfresco-datatable [data]="data"></alfresco-datatable>
 </div>

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

@@ -18,31 +18,42 @@
 import { Component, OnInit } from '@angular/core';
 import { Http } from '@angular/http';
 import { ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
-
-declare let __moduleName: string;
+import { LogService } from 'ng2-alfresco-core';
 
 @Component({
-    moduleId: __moduleName,
     selector: 'about-page',
-    templateUrl: './about.component.html'
+    templateUrl: './about.component.html',
+    styleUrls: ['./about.component.css']
 })
 export class AboutComponent implements OnInit {
 
     data: ObjectDataTableAdapter;
 
-    constructor(private http: Http) {}
+    constructor(private http: Http,
+                private logService: LogService) {
+    }
 
     ngOnInit() {
-        // this.data = new ObjectDataTableAdapter();
-        this.http.get('/versions').subscribe(response => {
-            let data = response.json() || {};
-            let packages = data.packages || [];
+        this.http.get('/versions.json').subscribe(response => {
+            let regexp = new RegExp('^(ng2-activiti|ng2-alfresco|alfresco-)', 'g');
 
-            this.data = new ObjectDataTableAdapter(packages, [
-                { type: 'text', key: 'name', title: 'Name', sortable: true },
-                { type: 'text', key: 'version', title: 'Version', sortable: true }
+            let alfrescoPackages = Object.keys(response.json().dependencies).filter((val) => {
+                this.logService.log(val);
+                return regexp.test(val);
+            });
+
+            let alfrescoPackagesTableRappresentation = [];
+            alfrescoPackages.forEach((val) => {
+                this.logService.log(response.json().dependencies[val]);
+                alfrescoPackagesTableRappresentation.push({name: val, version: response.json().dependencies[val].version});
+            });
+
+            this.logService.log(alfrescoPackagesTableRappresentation);
+
+            this.data = new ObjectDataTableAdapter(alfrescoPackagesTableRappresentation, [
+                {type: 'text', key: 'name', title: 'Name', sortable: true},
+                {type: 'text', key: 'version', title: 'Version', sortable: true}
             ]);
         });
-
     }
 }

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

@@ -10,5 +10,17 @@
 .task-column {
     background-color: #f5f5f5;
     padding: 10px 10px 10px 10px;
-    border: solid 2px rgb(31,188,210);
+}
+
+.list-column {
+    width: 320px;
+}
+
+.mdl-layout__header {
+    z-index: 1;
+}
+
+.list-buttons {
+    text-align: left;
+    margin-bottom: 5px;
 }

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

@@ -4,46 +4,72 @@
 
         <!-- TABS -->
 
-        <div class="mdl-layout__tab-bar mdl-js-ripple-effect" #tabheader>
-            <a id="apps-header" href="#apps" class="mdl-layout__tab is-active">APPS</a>
-            <a id="tasks-header" href="#tasks" class="mdl-layout__tab">TASK LIST</a>
-            <a id="processes-header" href="#processes" class="mdl-layout__tab">PROCESS LIST</a>
-            <a id="report-header" href="#report" class="mdl-layout__tab">ANALYTICS</a>
+        <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" #tabmain>
-
-        <!--  APPPS COMPONENT -->
-
-        <section class="mdl-layout__tab-panel is-active" id="apps">
-            <div class="page-content">
-                <activiti-apps [layoutType]="layoutType" (appClick)="onAppClick($event)" #activitiapps></activiti-apps>
-            </div>
-        </section>
-
+    <main class="mdl-layout__content activiti">
 
         <!--  TASKS COMPONENT -->
 
-        <section class="mdl-layout__tab-panel" id="tasks">
+        <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">
-                        <span>Task Filters</span>
-                        <activiti-start-task [appId]="appId" (onSuccess)="onStartTaskSuccess($event)"></activiti-start-task>
-                        <activiti-filters [appId]="appId" (filterClick)="onTaskFilterClick($event)" (onSuccess)="onSuccessTaskFilterList($event)"
-                                          #activitifilter></activiti-filters>
+                        <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
+                                    [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">
-                        <span>Task List</span>
-                        <activiti-tasklist [taskFilter]="taskFilter" [data]="dataTasks"
-                                           (rowClick)="onTaskRowClick($event)" (onSuccess)="onSuccessTaskList($event)"
-                                           #activititasklist></activiti-tasklist>
+                    <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">
-                        <span>Task Details</span>
-                        <activiti-task-details [taskId]="currentTaskId" (formCompleted)="onFormCompleted($event)"
-                                               #activitidetails></activiti-task-details>
+                        <activiti-task-details #activitidetails
+                            [debugMode]="true"
+                            [taskId]="currentTaskId"
+                            (formCompleted)="onFormCompleted($event)"
+                            (formContentClicked)="onFormContentClick($event)"
+                            (taskCreated)="onTaskCreated($event)"
+                            (taskDeleted)="onTaskDeleted($event)">
+                        </activiti-task-details>
                     </div>
                 </div>
             </div>
@@ -52,26 +78,60 @@
 
         <!--  PROCESS COMPONENT -->
 
-        <section class="mdl-layout__tab-panel" id="processes">
-            <div class="page-content">
+        <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">
-                            <span>Process Filters</span>
-                            <activiti-start-process-instance [appId]="appId" (start)="onStartProcessInstance($event)"></activiti-start-process-instance>
-                            <activiti-process-instance-filters [appId]="appId"
-                                    (filterClick)="onProcessFilterClick($event)" (onSuccess)="onSuccessProcessFilterList($event)"
-                                    #activitiprocessfilter></activiti-process-instance-filters>
+                        <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
+                                        [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">
-                            <span>Process List</span>
-                            <activiti-process-instance-list [filter]="processFilter" [data]="dataProcesses"
-                                               (rowClick)="onProcessRowClick($event)" (onSuccess)="onSuccessProcessList($event)"
-                                                            #activitiprocesslist></activiti-process-instance-list>
+                        <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 mdl-cell--7-col task-column">
-                            <span>Process Details</span>
-                            <activiti-process-instance-details [processInstanceId]="currentProcessInstanceId" (activitiprocesslist)="taskFormCompleted()" (processCancelled)="processCancelled()" #activitiprocessdetails></activiti-process-instance-details>
+                        <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()"
+                                (taskClick)="onProcessDetailsTaskClick($event)">
+                            </activiti-process-instance-details>
+                        </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>
@@ -81,14 +141,28 @@
 
         <!--  ANALYTICS COMPONENT -->
 
-        <section class="mdl-layout__tab-panel" id="report">
-            <div class="page-content">
+        <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">
-                        <analytics-report-list (reportClick)="onReportClick($event)"></analytics-report-list>
+                        <span><h5>Report List</h5></span>
+                        <hr>
+                        <analytics-report-list
+                            [appId]="appId"
+                            (reportClick)="onReportClick($event)"
+                            #analyticsreportlist>
+                        </analytics-report-list>
                     </div>
                     <div class="mdl-cell mdl-cell--8-col task-column mdl-shadow--2dp">
-                        <activiti-analytics [appId]="appId" *ngIf="report" [reportId]="report.id"></activiti-analytics>
+                        <activiti-analytics
+                            *ngIf="report"
+                            [appId]="appId"
+                            [reportId]="report.id"
+                            [hideParameters]="false"
+                            (editReport)="onEditReport($event)"
+                            (reportSaved)="onReportSaved()"
+                            (reportDeleted)="onReportDeleted()">
+                        </activiti-analytics>
                     </div>
                 </div>
             </div>
@@ -96,3 +170,12 @@
 
     </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

@@ -15,61 +15,73 @@
  * limitations under the License.
  */
 
-import { Component, AfterViewChecked, ViewChild, Input } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core';
 import {
-    AppDefinitionRepresentationModel,
-    FilterRepresentationModel,
     ActivitiApps,
-    ActivitiTaskList
+    ActivitiFilters,
+    ActivitiTaskList,
+    FilterRepresentationModel,
+    TaskDetailsEvent
 } from 'ng2-activiti-tasklist';
-import { ActivitiProcessInstanceListComponent } from 'ng2-activiti-processlist';
+import {
+    ActivitiProcessFilters,
+    ActivitiProcessInstanceDetails,
+    ActivitiProcessInstanceListComponent,
+    ActivitiStartProcessInstance,
+    FilterProcessRepresentationModel,
+    ProcessInstance
+} from 'ng2-activiti-processlist';
+import { AnalyticsReportListComponent } from 'ng2-activiti-analytics';
 import { ActivatedRoute } from '@angular/router';
 import { Subscription } from 'rxjs/Rx';
 import {
     ObjectDataTableAdapter,
+    ObjectDataRow,
     DataSorting
 } from 'ng2-alfresco-datatable';
+import { AlfrescoApiService } from 'ng2-alfresco-core';
+import { FormService, FormRenderingService, FormEvent, FormFieldEvent } from 'ng2-activiti-form';
+import { /*CustomEditorComponent*/ CustomStencil01 } from './custom-editor/custom-editor.component';
 
-declare let __moduleName: string;
 declare var componentHandler;
 
+const currentProcessIdNew = '__NEW__';
+
 @Component({
-    moduleId: __moduleName,
     selector: 'activiti-demo',
     templateUrl: './activiti-demo.component.html',
     styleUrls: ['./activiti-demo.component.css']
 })
-export class ActivitiDemoComponent implements AfterViewChecked {
+export class ActivitiDemoComponent implements AfterViewInit {
 
-    @ViewChild('activitiapps')
-    activitiapps: ActivitiApps;
-
-    @ViewChild('activitifilter')
-    activitifilter: any;
-
-    @ViewChild('activitidetails')
-    activitidetails: any;
+    @ViewChild(ActivitiFilters)
+    activitifilter: ActivitiFilters;
 
     @ViewChild(ActivitiTaskList)
-    activititasklist: ActivitiTaskList;
+    taskList: ActivitiTaskList;
 
-    @ViewChild('activitiprocessfilter')
-    activitiprocessfilter: any;
+    @ViewChild(ActivitiProcessFilters)
+    activitiprocessfilter: ActivitiProcessFilters;
 
     @ViewChild(ActivitiProcessInstanceListComponent)
-    activitiprocesslist: ActivitiProcessInstanceListComponent;
+    processList: ActivitiProcessInstanceListComponent;
 
-    @ViewChild('activitiprocessdetails')
-    activitiprocessdetails: any;
+    @ViewChild(ActivitiProcessInstanceDetails)
+    activitiprocessdetails: ActivitiProcessInstanceDetails;
 
-    @ViewChild('tabmain')
-    tabMain: any;
+    @ViewChild(ActivitiStartProcessInstance)
+    activitiStartProcess: ActivitiStartProcessInstance;
 
-    @ViewChild('tabheader')
-    tabHeader: any;
+    @ViewChild(AnalyticsReportListComponent)
+    analyticsreportlist: AnalyticsReportListComponent;
 
     @Input()
-    appId: number;
+    appId: number = null;
+
+    fileShowed: boolean = false;
+
+    content: Blob;
+    contentName: string;
 
     layoutType: string;
     currentTaskId: string;
@@ -78,23 +90,25 @@ export class ActivitiDemoComponent implements AfterViewChecked {
     taskSchemaColumns: any [] = [];
     processSchemaColumns: any [] = [];
 
-    taskFilter: any;
+    activeTab: string = 'tasks'; // tasks|processes|reports
+
+    taskFilter: FilterRepresentationModel;
     report: any;
-    processFilter: any;
+    processFilter: FilterProcessRepresentationModel;
 
     sub: Subscription;
+    blobFile: any;
+    flag: boolean = true;
 
     dataTasks: ObjectDataTableAdapter;
     dataProcesses: ObjectDataTableAdapter;
 
-    constructor(private route: ActivatedRoute) {
-        this.dataTasks = new ObjectDataTableAdapter(
-            [],
-            [
-                {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
-                {type: 'text', key: 'created', title: 'Created', cssClass: 'hidden', sortable: true}
-            ]
-        );
+    constructor(private elementRef: ElementRef,
+                private route: ActivatedRoute,
+                private apiService: AlfrescoApiService,
+                private formRenderingService: FormRenderingService,
+                private formService: FormService) {
+        this.dataTasks = new ObjectDataTableAdapter();
         this.dataTasks.setSorting(new DataSorting('created', 'desc'));
 
         this.dataProcesses = new ObjectDataTableAdapter(
@@ -105,11 +119,34 @@ export class ActivitiDemoComponent implements AfterViewChecked {
             ]
         );
         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}`);
+        });
+
     }
 
     ngOnInit() {
         this.sub = this.route.params.subscribe(params => {
-            this.appId = params['appId'];
+            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;
     }
@@ -118,27 +155,8 @@ export class ActivitiDemoComponent implements AfterViewChecked {
         this.sub.unsubscribe();
     }
 
-    onAppClick(app: AppDefinitionRepresentationModel) {
-        this.appId = app.id;
-        this.taskFilter = null;
-        this.currentTaskId = null;
-
-        this.processFilter = null;
-        this.currentProcessInstanceId = null;
-
-        this.changeTab('apps', 'tasks');
-    }
-
-    changeTab(origin: string, destination: string) {
-        this.tabMain.nativeElement.children[origin].classList.remove('is-active');
-        this.tabMain.nativeElement.children[destination].classList.add('is-active');
-
-        this.tabHeader.nativeElement.children[`${origin}-header`].classList.remove('is-active');
-        this.tabHeader.nativeElement.children[`${destination}-header`].classList.add('is-active');
-    }
-
-    onTaskFilterClick(event: FilterRepresentationModel) {
-        this.taskFilter = event;
+    onTaskFilterClick(filter: FilterRepresentationModel) {
+        this.applyTaskFilter(filter);
     }
 
     onReportClick(event: any) {
@@ -146,27 +164,36 @@ export class ActivitiDemoComponent implements AfterViewChecked {
     }
 
     onSuccessTaskFilterList(event: any) {
-        this.taskFilter = this.activitifilter.getCurrentFilter();
+        this.applyTaskFilter(this.activitifilter.getCurrentFilter());
+    }
+
+    applyTaskFilter(filter: FilterRepresentationModel) {
+        this.taskFilter = filter;
+        if (filter && this.taskList) {
+            this.taskList.hasCustomDataSource = false;
+        }
     }
 
     onStartTaskSuccess(event: any) {
-        this.activititasklist.reload();
+        this.activitifilter.selectFilterWithTask(event.id);
+        this.currentTaskId = event.id;
     }
 
     onSuccessTaskList(event: FilterRepresentationModel) {
-        this.currentTaskId = this.activititasklist.getCurrentTaskId();
+        this.currentTaskId = this.taskList.getCurrentId();
     }
 
-    onProcessFilterClick(event: any) {
+    onProcessFilterClick(event: FilterProcessRepresentationModel) {
+        this.currentProcessInstanceId = null;
         this.processFilter = event;
     }
 
-    onSuccessProcessFilterList(event: any) {
+    onSuccessProcessFilterList() {
         this.processFilter = this.activitiprocessfilter.getCurrentFilter();
     }
 
     onSuccessProcessList(event: any) {
-        this.currentProcessInstanceId = this.activitiprocesslist.getCurrentProcessId();
+        this.currentProcessInstanceId = this.processList.getCurrentId();
     }
 
     onTaskRowClick(taskId) {
@@ -177,33 +204,120 @@ export class ActivitiDemoComponent implements AfterViewChecked {
         this.currentProcessInstanceId = processInstanceId;
     }
 
-    onStartProcessInstance() {
-        this.activitiprocesslist.reload();
+    onEditReport(name: string) {
+        this.analyticsreportlist.reload();
+    }
+
+    onReportSaved() {
+        this.analyticsreportlist.reload();
+    }
+
+    onReportDeleted() {
+        this.analyticsreportlist.reload();
+        this.selectFirstElementInReportList();
+    }
+
+    selectFirstElementInReportList() {
+        if (!this.analyticsreportlist.isReportsEmpty()) {
+            this.analyticsreportlist.selectReport(this.analyticsreportlist.reports[0]);
+        }
+    }
+
+    navigateStartProcess() {
+        this.resetProcessFilters();
+        this.reloadProcessFilters();
+        this.currentProcessInstanceId = currentProcessIdNew;
+    }
+
+    onStartProcessInstance(instance: ProcessInstance) {
+        this.currentProcessInstanceId = instance.id;
+        this.activitiStartProcess.reset();
+        this.resetProcessFilters();
+    }
+
+    isStartProcessMode() {
+        return this.currentProcessInstanceId === currentProcessIdNew;
     }
 
     processCancelled(data: any) {
         this.currentProcessInstanceId = null;
-        this.activitiprocesslist.reload();
+        this.processList.reload();
     }
 
     onSuccessNewProcess(data: any) {
-        this.activitiprocesslist.reload();
-    }
-
-    taskFormCompleted(data: any) {
-        this.activitiprocesslist.reload();
+        this.processList.reload();
     }
 
     onFormCompleted(form) {
-        this.activititasklist.load(this.taskFilter);
+        this.taskList.reload();
         this.currentTaskId = null;
     }
 
-    ngAfterViewChecked() {
+    onFormContentClick(content: any) {
+        this.fileShowed = true;
+        this.content = content.contentBlob;
+        this.contentName = content.name;
+    }
+
+    onTaskCreated(data: any) {
+        this.currentTaskId = data.parentTaskId;
+        this.taskList.reload();
+    }
+
+    onTaskDeleted(data: any) {
+        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);
+            }
+        });
+    }
+
+    onProcessDetailsTaskClick(event: TaskDetailsEvent) {
+        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() {
+        this.processFilter = null;
+    }
+
+    private reloadProcessFilters() {
+        this.activitiprocessfilter.selectFilter(null);
+    }
+
+    onRowClick(event) {
+        console.log(event);
+    }
+
+    onRowDblClick(event) {
+        console.log(event);
     }
 
 }

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

@@ -0,0 +1,40 @@
+/*!
+ * @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, Component } from '@angular/core';
+import { WidgetComponent } from 'ng2-activiti-form';
+
+@Component({
+    selector: 'custom-editor',
+    template: `
+        <div style="color: red">Look, I'm a custom editor!</div>
+    `
+})
+export class CustomEditorComponent extends WidgetComponent {}
+
+@Component({
+    selector: 'custom-stencil-01',
+    template: `<div style="color: green">ADF version of custom Activiti stencil</div>`
+})
+export class CustomStencil01 extends WidgetComponent {}
+
+@NgModule({
+    declarations: [ CustomEditorComponent, CustomStencil01 ],
+    exports: [ CustomEditorComponent, CustomStencil01 ],
+    entryComponents: [ CustomEditorComponent, CustomStencil01 ]
+})
+export class CustomEditorsModule {}

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

@@ -19,11 +19,9 @@ import { Component, OnInit, OnDestroy, AfterViewChecked } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Subscription } from 'rxjs/Rx';
 
-declare let __moduleName: string;
 declare var componentHandler;
 
 @Component({
-    moduleId: __moduleName,
     selector: 'form-node-viewer',
     templateUrl: './form-node-viewer.component.html',
     styleUrls: ['./form-node-viewer.component.css']

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

@@ -19,11 +19,9 @@ import { Component, OnInit, OnDestroy, AfterViewChecked } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Subscription } from 'rxjs/Rx';
 
-declare let __moduleName: string;
 declare var componentHandler;
 
 @Component({
-    moduleId: __moduleName,
     selector: 'form-viewer',
     templateUrl: './form-viewer.component.html',
     styleUrls: ['./form-viewer.component.css']

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

@@ -1,31 +1,30 @@
 <div class="p-10">
-    <alfresco-datatable [data]="data" [multiselect]="multiselect"></alfresco-datatable>
+    <alfresco-datatable
+        [data]="data"
+        [multiselect]="multiselect"
+        [actions]="true"
+        (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">
-    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
-        <input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" [(ngModel)]="multiselect">
-        <span class="mdl-checkbox__label">Multiselect</span>
-    </label>
+    <md-checkbox [(ngModel)]="multiselect">Multiselect</md-checkbox>
 </div>
 <div class="p-10">
-    <button
-            class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"
-            (click)="reset()">
-        Reset to default
-    </button>
-    <button
-        class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"
-        (click)="addRow()">
-        Add row
-    </button>
-    <button
-        class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"
-        (click)="replaceRows()">
-        Replace rows
-    </button>
-    <button
-        class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"
-        (click)="replaceColumns()">
-        Replace columns
-    </button>
+    <button md-raised-button (click)="reset()">Reset to default</button>
+    <button md-raised-button (click)="addRow()">Add row</button>
+    <button md-raised-button (click)="replaceRows()">Replace rows</button>
+    <button md-raised-button (click)="replaceColumns()">Replace columns</button>
 </div>

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

@@ -16,17 +16,9 @@
  */
 
 import { Component } from '@angular/core';
-import {
-    ObjectDataTableAdapter,
-    DataSorting,
-    ObjectDataRow,
-    ObjectDataColumn
-} from 'ng2-alfresco-datatable';
-
-declare let __moduleName: string;
+import { ObjectDataTableAdapter, DataSorting, ObjectDataRow, ObjectDataColumn, DataCellEvent, DataRowActionEvent } from 'ng2-alfresco-datatable';
 
 @Component({
-    moduleId: __moduleName,
     selector: 'datatable-demo',
     templateUrl: './datatable-demo.component.html'
 })
@@ -145,4 +137,29 @@ export class DataTableDemoComponent {
         let columns = schema.map(col => new ObjectDataColumn(col));
         this.data.setColumns(columns);
     }
+
+    onShowRowActionsMenu(event: DataCellEvent) {
+        let myAction = {
+            title: 'Hello'
+            // you custom metadata needed for onExecuteRowAction
+        };
+        event.value.actions = [
+            myAction
+        ];
+    }
+
+    onExecuteRowAction(event: DataRowActionEvent) {
+        let args = event.value;
+        console.log(args.row);
+        console.log(args.action);
+        window.alert(`My custom action: ${args.action.title}`);
+    }
+
+    onRowClick(event) {
+        console.log(event);
+    }
+
+    onRowDblClick(event) {
+        console.log(event);
+    }
 }

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

@@ -7,3 +7,11 @@
         margin: 0;
     }
 }
+
+.error-message {
+    text-align: left;
+}
+
+.error-message--text {
+    color: #d50000;
+}

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

@@ -1,196 +1,199 @@
-<div *ngIf="!fileShowed">
-    <div class="container">
-        <alfresco-upload-drag-area
-                [currentFolderPath]="currentPath"
-                [versioning] = "versioning"
-                (onSuccess)="documentList.reload()">
-            <alfresco-document-list-breadcrumb
-                [currentFolderPath]="currentPath"
-                [target]="documentList">
-            </alfresco-document-list-breadcrumb>
-            <alfresco-document-list
-                    #documentList
-                    [currentFolderPath]="currentPath"
-                    [contextMenuActions]="true"
-                    [contentActions]="true"
-                    (preview)="showFile($event)"
-                    (folderChange)="onFolderChanged($event)">
-                <!--
-                <empty-folder-content>
-                    <template>
-                        <h1>Sorry, no content here</h1>
-                    </template>
-                </empty-folder-content>
-                -->
-                <content-columns>
-                    <content-column key="$thumbnail" type="image"></content-column>
-                    <content-column
-                            title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
-                            key="name"
-                            sortable="true"
-                            class="full-width ellipsis-cell">
-                    </content-column>
+<div class="container">
+    <alfresco-upload-drag-area
+            [rootFolderId]="documentList.currentFolderId"
+            [versioning] = "versioning">
+        <alfresco-document-list-breadcrumb
+            [target]="documentList"
+            [folderNode]="documentList.folderNode">
+        </alfresco-document-list-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>
+        <alfresco-document-list
+                #documentList
+                [currentFolderId]="currentFolderId"
+                [contextMenuActions]="true"
+                [contentActions]="true"
+                [allowDropFiles]="true"
+                (error)="onNavigationError($event)"
+                (success)="resetError()"
+                (preview)="showFile($event)"
+                (permissionError)="onPermissionsFailed($event)">
+            <data-columns>
+                <data-column key="$thumbnail" type="image" [sortable]="false"></data-column>
+                <data-column
+                        title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
+                        key="name"
+                        class="full-width ellipsis-cell">
+
+                    <!-- Example #1: using custom template with implicit access to data context -->
                     <!--
-                    <content-column
-                            title="Type"
-                            source="content.mimeType">
-                    </content-column>
+                    <template let-entry="$implicit">
+                        <span>Hi! {{entry.data.getValue(entry.row, entry.col)}}</span>
+                    </template>
                     -->
-                    <content-column
-                            title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
-                            key="createdByUser.displayName"
-                            sortable="true"
-                            class="desktop-only">
-                    </content-column>
-                    <content-column
-                            title="{{'DOCUMENT_LIST.COLUMNS.CREATED_ON' | translate}}"
-                            key="createdAt"
-                            type="date"
-                            format="medium"
-                            sortable="true"
-                            class="desktop-only">
-                    </content-column>
-                </content-columns>
 
-                <content-actions>
-                    <!-- folder actions -->
-                    <content-action
-                            target="folder"
-                            title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.SYSTEM_1' | translate}}"
-                            handler="system1">
-                    </content-action>
-                    <content-action
-                            target="folder"
-                            title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.CUSTOM' | translate}}"
-                            (execute)="myFolderAction1($event)">
-                    </content-action>
-                    <content-action
-                            target="folder"
-                            title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.DELETE' | translate}}"
-                            handler="delete">
-                    </content-action>
-                    <!-- document actions -->
-                    <content-action
-                            target="document"
-                            title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DOWNLOAD' | translate}}"
-                            handler="download">
-                    </content-action>
-                    <content-action
-                            target="document"
-                            title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.SYSTEM_2' | translate}}"
-                            handler="system2">
-                    </content-action>
-                    <content-action
-                            target="document"
-                            title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.CUSTOM' | translate}}"
-                            (execute)="myCustomAction1($event)">
-                    </content-action>
-                    <content-action
-                            target="document"
-                            title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DELETE' | translate}}"
-                            handler="delete">
-                    </content-action>
-                    <content-action
-                            target="folder"
-                            title="Activiti: View Form"
-                            (execute)="viewActivitiForm($event)">
-                    </content-action>
-                </content-actions>
-            </alfresco-document-list>
-            <alfresco-pagination
-                [provider]="documentList.data"
-                [supportedPageSizes]="[5, 10, 15, 20]">
-            </alfresco-pagination>
-        </alfresco-upload-drag-area>
-    </div>
+                    <!-- Example #2: using custom template with value access -->
+                    <!--
+                    <template let-value="value">
+                        <span>Hi! {{value}}</span>
+                    </template>
+                    -->
 
-    <context-menu-holder></context-menu-holder>
+                </data-column>
+                <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>
 
-    <div class="p-10">
-        <ul>
-            <li>Current path: {{documentList.currentFolderPath}}</li>
-            <li>
-                <button (click)="documentList.currentFolderPath = '/Sites/swsdp/documentLibrary';">Go to Document Library</button>
-            </li>
-            <li>
-                <button (click)="documentList.currentFolderPath = '/Sites/swsdp/documentLibrary/Agency Files/Contracts'">Go to agency contracts</button>
-            </li>
-            <li>
-                <button (click)="documentList.currentFolderPath = '/'">Go to root</button>
-            </li>
-            <li>
-                <button (click)="fileDialog.toggleShowDialog()">Show/Hide File Dialog</button>
-            </li>
-        </ul>
-    </div>
+            <content-actions>
+                <!-- folder actions -->
+                <content-action
+                        target="folder"
+                        title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.SYSTEM_1' | translate}}"
+                        handler="system1">
+                </content-action>
+                <content-action
+                        target="folder"
+                        title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.CUSTOM' | translate}}"
+                        (execute)="myFolderAction1($event)">
+                </content-action>
+                <content-action
+                        target="folder"
+                        permission="delete"
+                        [disableWithNoPermission]="true"
+                        title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.DELETE' | translate}}"
+                        (permissionEvent)="onPermissionsFailed($event)"
+                        handler="delete">
+                </content-action>
+                <!-- document actions -->
+                <content-action
+                        target="document"
+                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DOWNLOAD' | translate}}"
+                        handler="download">
+                </content-action>
+                <content-action
+                        target="document"
+                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.SYSTEM_2' | translate}}"
+                        handler="system2">
+                </content-action>
+                <content-action
+                        target="document"
+                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.CUSTOM' | translate}}"
+                        (execute)="myCustomAction1($event)">
+                </content-action>
+                <content-action
+                        target="document"
+                        permission="delete"
+                        [disableWithNoPermission]="true"
+                        (permissionEvent)="onPermissionsFailed($event)"
+                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DELETE' | translate}}"
+                        handler="delete">
+                </content-action>
+                <content-action
+                        target="folder"
+                        title="Activiti: View Form"
+                        (execute)="viewActivitiForm($event)">
+                </content-action>
+            </content-actions>
+        </alfresco-document-list>
+    </alfresco-upload-drag-area>
+</div>
 
+<context-menu-holder></context-menu-holder>
 
-    <p style="width:250px;margin: 20px;">
-        <label for="switch-multiple-file" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-            <input type="checkbox" id="switch-multiple-file" class="mdl-switch__input" (change)="toggleMultipleFileUpload()" >
-            <span class="mdl-switch__label">Multiple File Upload</span>
-        </label>
-    </p>
+<div class="container">
+    <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>
 
-    <p style="width:250px;margin: 20px;">
-        <label for="switch-folder-upload" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-            <input type="checkbox" id="switch-folder-upload" class="mdl-switch__input" (change)="toggleFolder()">
-            <span class="mdl-switch__label">Folder Upload</span>
-        </label>
-    </p>
+    <section>
+        <md-slide-toggle [(ngModel)]="acceptedFilesTypeShow">Custom extensions filter</md-slide-toggle>
+    </section>
 
-    <p style="width:250px;margin: 20px;">
-        <label for="switch-accepted-file-type" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-            <input type="checkbox" id="switch-accepted-file-type" class="mdl-switch__input" (change)="toggleAcceptedFilesType()">
-            <span class="mdl-switch__label">Filter extension</span>
-        </label>
-    </p>
+    <section>
+        <md-slide-toggle [(ngModel)]="versioning">Enable versioning</md-slide-toggle>
+    </section>
 
-    <p style="width:250px;margin: 20px;">
-        <label for="switch-versioning" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-            <input type="checkbox" id="switch-versioning" class="mdl-switch__input" (change)="toggleVersioning()">
-            <span class="mdl-switch__label">Versioning</span>
-        </label>
-    </p>
+    <section>
+        <md-slide-toggle [(ngModel)]="disableWithNoPermission">Disable when user has no permissions</md-slide-toggle>
+    </section>
 
     <h5>Upload</h5>
-    <br>
-    <div *ngIf="acceptedFilesTypeShow">
-        <label class="mdl-input__label">Extension accepted
-            <input type="text" data-automation-id="accepted-files-type" [(ngModel)]="acceptedFilesType">
-        </label>
-        <br/>
-    </div>
+    <section *ngIf="acceptedFilesTypeShow">
+        <md-input-container>
+            <input md-input placeholder="Extension accepted" [(ngModel)]="acceptedFilesType"  data-automation-id="accepted-files-type">
+        </md-input-container>
+    </section>
     <div *ngIf="!acceptedFilesTypeShow">
-        <alfresco-upload-button data-automation-id="multiple-file-upload"
-                                [currentFolderPath]="currentPath"
-                                [multipleFiles]="multipleFileUpload"
-                                [uploadFolders]="folderUpload"
-                                [versioning] = "versioning"
-                                (onSuccess)="documentList.reload()">
-            <div class="mdl-spinner mdl-js-spinner is-active"></div>
+        <alfresco-upload-button
+            #uploadButton
+            [disabled]="!enableUpload"
+            data-automation-id="multiple-file-upload"
+            [rootFolderId]="documentList.currentFolderId"
+            [multipleFiles]="multipleFileUpload"
+            [uploadFolders]="folderUpload"
+            [versioning]="versioning"
+            [disableWithNoPermission]="disableWithNoPermission"
+            (permissionEvent)="onUploadPermissionFailed($event)">
         </alfresco-upload-button>
     </div>
     <div *ngIf="acceptedFilesTypeShow">
-        <alfresco-upload-button data-automation-id="multiple-file-upload"
-                                [currentFolderPath]="currentPath"
-                                acceptedFilesType="{{acceptedFilesType}}"
-                                [multipleFiles]="multipleFileUpload"
-                                [uploadFolders]="folderUpload"
-                                [versioning] = "versioning"
-                                (onSuccess)="documentList.reload()">
-            <div class="mdl-spinner mdl-js-spinner is-active"></div>
+        <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)="onUploadPermissionFailed($event)">
         </alfresco-upload-button>
     </div>
-    <file-uploading-dialog #fileDialog></file-uploading-dialog>
+    <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">
-        <div class="mdl-spinner mdl-js-spinner is-active"></div>
+
+        <extension-viewer [supportedExtensions]="['obj','3DS']" #extension>
+            <template let-urlFileContent="urlFileContent" let-extension="extension" >
+                <threed-viewer [urlFile]="urlFileContent" [extension]="extension" ></threed-viewer>
+            </template>
+        </extension-viewer>
+
     </alfresco-viewer>
 </div>
 

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

@@ -15,45 +15,64 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { Router } from '@angular/router';
-import { AlfrescoAuthenticationService } from 'ng2-alfresco-core';
-import {
-    DocumentActionsService,
-    DocumentList,
-    ContentActionHandler,
-    DocumentActionModel,
-    FolderActionModel
-} from 'ng2-alfresco-documentlist';
+import { Component, Input, OnInit, AfterViewInit, Optional, ViewChild, ChangeDetectorRef } from '@angular/core';
+import { ActivatedRoute, Params, Router } from '@angular/router';
+import { AlfrescoAuthenticationService, LogService, NotificationService } from 'ng2-alfresco-core';
+import { DocumentActionsService, DocumentListComponent, ContentActionHandler, DocumentActionModel, FolderActionModel } from 'ng2-alfresco-documentlist';
 import { FormService } from 'ng2-activiti-form';
-
-declare let __moduleName: string;
+import { UploadButtonComponent, UploadDragAreaComponent } from 'ng2-alfresco-upload';
 
 @Component({
-    moduleId: __moduleName,
     selector: 'files-component',
     templateUrl: './files.component.html',
     styleUrls: ['./files.component.css']
 })
-export class FilesComponent implements OnInit {
-    currentPath: string = '/Sites/swsdp/documentLibrary';
+export class FilesComponent implements OnInit, AfterViewInit {
+    // 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;
+
+    @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';
 
-    @ViewChild(DocumentList)
-    documentList: DocumentList;
+    @Input()
+    enableUpload: boolean = true;
+
+    @ViewChild(DocumentListComponent)
+    documentList: DocumentListComponent;
+
+    @ViewChild(UploadButtonComponent)
+    uploadButton: UploadButtonComponent;
+
+    @ViewChild(UploadDragAreaComponent)
+    uploadDragArea: UploadDragAreaComponent;
 
     constructor(private documentActions: DocumentActionsService,
-                public auth: AlfrescoAuthenticationService,
+                private authService: AlfrescoAuthenticationService,
                 private formService: FormService,
-                private router: Router) {
+                private logService: LogService,
+                private changeDetector: ChangeDetectorRef,
+                private router: Router,
+                private notificationService: NotificationService,
+                @Optional() private route: ActivatedRoute) {
         documentActions.setHandler('my-handler', this.myDocumentActionHandler.bind(this));
     }
 
@@ -78,48 +97,59 @@ export class FilesComponent implements OnInit {
         }
     }
 
-    onFolderChanged(event?: any) {
-        if (event) {
-            this.currentPath = event.path;
-        }
-    }
-
-    toggleMultipleFileUpload() {
-        this.multipleFileUpload = !this.multipleFileUpload;
-        return this.multipleFileUpload;
-    }
-
     toggleFolder() {
         this.multipleFileUpload = false;
         this.folderUpload = !this.folderUpload;
         return this.folderUpload;
     }
 
-    toggleAcceptedFilesType() {
-        this.acceptedFilesTypeShow = !this.acceptedFilesTypeShow;
-        return this.acceptedFilesTypeShow;
-    }
-
-    toggleVersioning() {
-        this.versioning = !this.versioning;
-        return this.versioning;
-    }
-
     ngOnInit() {
-      if ( this.auth.isBpmLoggedIn() ) {
-          this.formService.getProcessDefinitions().subscribe(
-              defs => this.setupBpmActions(defs || []),
-              err => console.log(err)
-          );
-      } else {
-          console.log('You are not logged in');
-      }
+        if (this.route) {
+            this.route.params.forEach((params: Params) => {
+                if (params['id']) {
+                    this.currentFolderId = params['id'];
+                    this.changeDetector.detectChanges();
+                }
+            });
+        }
+        if (this.authService.isBpmLoggedIn()) {
+            this.formService.getProcessDefinitions().subscribe(
+                defs => this.setupBpmActions(defs || []),
+                err => this.logService.error(err)
+            );
+        } else {
+            this.logService.warn('You are not logged in to BPM');
+        }
+    }
+
+    ngAfterViewInit() {
+        this.uploadButton.onSuccess
+            .debounceTime(100)
+            .subscribe((event) => {
+                this.reload(event);
+            });
+
+        this.uploadDragArea.onSuccess
+            .debounceTime(100)
+            .subscribe((event) => {
+                this.reload(event);
+            });
     }
 
     viewActivitiForm(event?: any) {
         this.router.navigate(['/activiti/tasksnode', event.value.entry.id]);
     }
 
+    onNavigationError(err: any) {
+        if (err) {
+            this.errorMessage = err.message || 'Navigation error';
+        }
+    }
+
+    resetError() {
+        this.errorMessage = null;
+    }
+
     private setupBpmActions(actions: any[]) {
         actions.map(def => {
             let documentAction = new DocumentActionModel();
@@ -139,4 +169,20 @@ export class FilesComponent implements OnInit {
             window.alert(`Starting BPM process: ${processDefinition.id}`);
         }.bind(this);
     }
+
+    onPermissionsFailed(event: any) {
+        this.notificationService.openSnackMessage(`you don't have the ${event.permission} permission to ${event.action} the ${event.type} `, 4000);
+    }
+
+    onUploadPermissionFailed(event: any) {
+        this.notificationService.openSnackMessage(`you don't have the ${event.permission} permission to ${event.action} the ${event.type} `, 4000);
+    }
+
+    reload(event: any) {
+        if (event && event.value && event.value.entry && event.value.entry.parentId) {
+            if (this.documentList.currentFolderId === event.value.entry.parentId) {
+                this.documentList.reload();
+            }
+        }
+    }
 }

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

@@ -15,8 +15,22 @@
  * limitations under the License.
  */
 
-describe('Placeholder', () => {
-    it('test placeholder', () => {
-        expect(true).toBe(true);
+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

@@ -15,9 +15,11 @@
  * limitations under the License.
  */
 
-declare let moment: any;
-declare let mdDateTimePicker: any;
+import { Component } from '@angular/core';
 
-// MDL
-declare let componentHandler: any;
-declare let dialogPolyfill: any;
+@Component({
+    selector: 'home-view',
+    templateUrl: './home.component.html',
+    styleUrls: ['./home.component.css']
+})
+export class HomeComponent {}

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

@@ -15,6 +15,7 @@
  * 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';
@@ -23,7 +24,9 @@ export { ActivitiDemoComponent } from './activiti/activiti-demo.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 { SettingComponent } from './setting/setting.component';
+export { ActivitiAppsView } from './activiti/apps.view';

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

@@ -1,14 +1,40 @@
-.setting {
-    border-radius: 8px; position: absolute; background-color: papayawhip; color: cadetblue; left: 10px; top: 10px;  z-index: 1;
+.setting-button {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 1;
 }
-.banned{
-    width:130px;margin: 10px;
+
+.settings {
+    border-radius: 8px;
+    position: absolute;
+    background-color: papayawhip;
+    color: cadetblue;
+    left: 10px;
+    top: 10px;
+    z-index: 1;
+}
+
+.banned {
+    width: 130px;
+    margin: 10px;
 }
 
 .toggle {
-    width:120px;margin: 20px;
+    width: 120px;
+    margin: 20px;
+    padding: 5px;
 }
 
-.setting-button {
-     position: absolute;  right: 10px; top: 10px;   z-index: 1;
+@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

@@ -1,21 +1,23 @@
-<div class="setting">
+<!--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(ecm.checked)" #ecm>
-            <span class="mdl-switch__label">ECM</span>
+                   (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(bpm.checked)" #bpm>
-            <span class="mdl-switch__label">BPM</span>
+                   (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 (click)="toggleCSRF()" #csrf>
+            <input type="checkbox" id="switch3" class="mdl-switch__input" [checked]="!disableCsrf" (click)="toggleCSRF()">
             <span class="mdl-switch__label">CSRF</span>
         </label>
     </p>
@@ -25,12 +27,47 @@
     </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 [providers]="providers" [fieldsValidation]="customValidation" [disableCsrf]="disableCsrf"
+
+<!--LOGIN-->
+
+<alfresco-login #alfrescologin
+                [providers]="providers"
+                [fieldsValidation]="customValidation"
+                [disableCsrf]="disableCsrf"
                 (executeSubmit)="validateForm($event)"
                 (onSuccess)="onLogin($event)"
-                (onError)="onError($event)" #alfrescologin></alfresco-login>
+                (onError)="onError($event)">
+    <div class="mobile-settings">
+        <p>
+            <label for="switch1-mobile" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+                <input type="checkbox" id="switch1-mobile" [checked]="isECM" class="mdl-switch__input"
+                       (click)="toggleECM()">
+                <span class="mdl-switch__label">Content Services</span>
+            </label>
+        </p>
+        <p>
+            <label for="switch2-mobile" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+                <input type="checkbox" id="switch2-mobile" [checked]="isBPM" class="mdl-switch__input"
+                       (click)="toggleBPM()">
+                <span class="mdl-switch__label">Process Services</span>
+            </label>
+        </p>
+        <p>
+            <label for="switch3-mobile" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+                <input type="checkbox" id="switch3-mobile" class="mdl-switch__input" [checked]="!disableCsrf" (click)="toggleCSRF()">
+                <span class="mdl-switch__label">CSRF</span>
+            </label>
+        </p>
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+            <input class="mdl-textfield__input" type="text" [(ngModel)]="blackListUsername" id="blacklistusername"/>
+            <label class="mdl-textfield__label" for="blacklistusername">Banned username</label>
+        </div>
+    </div>
+</alfresco-login>

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

@@ -18,11 +18,9 @@
 import { Component, ViewChild, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { Validators } from '@angular/forms';
-
-declare let __moduleName: string;
+import { StorageService, LogService } from 'ng2-alfresco-core';
 
 @Component({
-    moduleId: __moduleName,
     selector: 'login-demo',
     templateUrl: './login-demo.component.html',
     styleUrls: ['./login-demo.component.css']
@@ -33,33 +31,36 @@ export class LoginDemoComponent implements OnInit {
     alfrescologin: any;
 
     providers: string = 'ECM';
-    disableCsrf: boolean = false;
     blackListUsername: string;
     customValidation: any;
 
+    disableCsrf: boolean = false;
     isECM: boolean = true;
     isBPM: boolean = false;
+    customMinLenght: number = 2;
 
-    constructor(public router: Router) {
+    constructor(private router: Router,
+                private storage: StorageService,
+                private logService: LogService) {
         this.customValidation = {
-            username: ['', Validators.compose([Validators.required, Validators.minLength(4)])],
+            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');
+        this.alfrescologin.addCustomValidationError('username', 'minlength', 'LOGIN.MESSAGES.USERNAME-MIN', {minLenght: this.customMinLenght});
         this.alfrescologin.addCustomValidationError('password', 'required', 'LOGIN.MESSAGES.PASSWORD-REQUIRED');
 
-        if (localStorage.getItem('providers')) {
-            this.providers = localStorage.getItem('providers');
+        if (this.storage.hasItem('providers')) {
+            this.providers = this.storage.getItem('providers');
         }
 
-        this.setProviders();
+        this.initProviders();
     }
 
-    setProviders() {
+    initProviders() {
         if (this.providers === 'BPM') {
             this.isECM = false;
             this.isBPM = true;
@@ -73,46 +74,47 @@ export class LoginDemoComponent implements OnInit {
     }
 
     onLogin($event) {
-        console.log($event);
         this.router.navigate(['/home']);
     }
 
     onError($event) {
-        console.log($event);
+        this.logService.error($event);
     }
 
-    toggleECM(checked) {
-        if (checked && this.providers === 'BPM') {
-            this.providers = 'ALL';
-        } else if (checked) {
-            this.providers = 'ECM';
-        } else if (!checked && this.providers === 'ALL') {
-            this.providers = 'BPM';
-        } else if (!checked && this.providers === 'ECM') {
-            this.providers = '';
-        }
-
-        localStorage.setItem('providers', this.providers);
+    toggleECM() {
+        this.isECM = !this.isECM;
+        this.storage.setItem('providers', this.updateProvider());
     }
 
-    toggleBPM(checked) {
-        if (checked && this.providers === 'ECM') {
-            this.providers = 'ALL';
-        } else if (checked) {
-            this.providers = 'BPM';
-        } else if (!checked && this.providers === 'ALL') {
-            this.providers = 'ECM';
-        } else if (!checked && this.providers === 'BPM') {
-            this.providers = '';
-        }
-
-        localStorage.setItem('providers', this.providers);
+    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;
+    };
+
     validateForm(event: any) {
         let values = event.values;
         if (values.controls['username'].value === this.blackListUsername) {

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

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

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

@@ -18,11 +18,9 @@
 import { Component, EventEmitter, Output } from '@angular/core';
 import { Router } from '@angular/router';
 import { AlfrescoAuthenticationService } from 'ng2-alfresco-core';
-
-declare let __moduleName: string;
+import { MinimalNodeEntity } from 'alfresco-js-api';
 
 @Component({
-    moduleId: __moduleName,
     selector: 'search-bar',
     templateUrl: './search-bar.component.html'
 })
@@ -36,11 +34,11 @@ export class SearchBarComponent {
     expand = new EventEmitter();
 
     constructor(public router: Router,
-                public auth: AlfrescoAuthenticationService) {
+                public authService: AlfrescoAuthenticationService) {
     }
 
     isLoggedIn(): boolean {
-        return this.auth.isLoggedIn();
+        return this.authService.isLoggedIn();
     }
 
     /**
@@ -54,10 +52,12 @@ export class SearchBarComponent {
         }]);
     }
 
-    onFileClicked(event) {
-        if (event.value.entry.isFile) {
-            this.fileNodeId = event.value.entry.id;
+    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]);
         }
     }
 

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

@@ -1,8 +1,12 @@
 <div class="search-results-container">
     <h1>Search results</h1>
-    <alfresco-search [resultType]="'cm:content'" (preview)="onFileClicked($event)"></alfresco-search>
+    <alfresco-search (preview)="showFile($event)"></alfresco-search>
 </div>
 
-<alfresco-viewer [(showViewer)]="fileShowed" [fileNodeId]="fileNodeId" [overlayMode]="true">
-    <div class="mdl-spinner mdl-js-spinner is-active"></div>
-</alfresco-viewer>
+<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

@@ -16,11 +16,9 @@
  */
 
 import { Component } from '@angular/core';
-
-declare let __moduleName: string;
+import { Router } from '@angular/router';
 
 @Component({
-    moduleId: __moduleName,
     selector: 'search-component',
     templateUrl: './search.component.html',
     styles: [`
@@ -48,13 +46,18 @@ declare let __moduleName: string;
 })
 export class SearchComponent {
 
-    fileShowed: boolean = false;
     fileNodeId: string;
+    fileShowed: boolean = false;
 
-    onFileClicked(event) {
+    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/setting/setting.component.css

@@ -2,6 +2,7 @@
     width: 320px;
     height: 320px;
 }
+
 .setting-card > .mdl-card__title {
     color: #fff;
     background: bottom right 15% no-repeat #1fbcd2;
@@ -22,5 +23,13 @@
 }
 
 .icon-margin {
-     margin-right: 9px;
- }
+    margin-right: 9px;
+}
+
+.table-row {
+    display: table-row;
+}
+
+.adf-setting-input-padding{
+    padding-top: 0px !important;
+}

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

@@ -1,5 +1,5 @@
 <div class="setting-container">
-    <div style="display: table-row">
+    <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">
@@ -7,23 +7,41 @@
             </div>
             <div class="mdl-card__actions mdl-card--border">
                 <div class="mdl-card__supporting-text">
-                    ECM host URL configuration
+                    Content Services host URL configuration
                 </div>
                 <nav class="mdl-navigation">
-                    <div class="icon material-icons icon-margin">link</div>
-                    <input type="text" class="mdl-textfield__input" id="ecmHost" data-automation-id="ecmHost"
-                           tabindex="1" (change)="onChangeECMHost($event)" value="{{ecmHost}}"/>
+                    <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">
-                    BPM host URL configuration
+                    Process Services host URL configuration
                 </div>
                 <nav class="mdl-navigation">
-                    <div class="icon material-icons icon-margin">link</div>
-                    <input type="text" class="mdl-textfield__input" id="bpmHost" data-automation-id="bpmHost"
-                           tabindex="1" (change)="onChangeBPMHost($event)" value="{{bpmHost}}"/>
+                    <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>
+        </div>
         </div>
         <div class="setting-card-padding"></div>
     </div>

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

@@ -15,41 +15,61 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
-import {
-    AlfrescoSettingsService
-} from 'ng2-alfresco-core';
+import { Component, AfterViewChecked } from '@angular/core';
+import { AlfrescoSettingsService, StorageService, LogService } from 'ng2-alfresco-core';
 
-declare let __moduleName: string;
+declare var componentHandler: any;
 
 @Component({
-    moduleId: __moduleName,
     selector: 'alfresco-setting-demo',
     templateUrl: './setting.component.html',
     styleUrls: ['./setting.component.css']
 })
-export class SettingComponent {
+export class SettingComponent implements AfterViewChecked {
 
     ecmHost: string;
     bpmHost: string;
 
-    constructor(public alfrescoSettingsService: AlfrescoSettingsService) {
-        this.ecmHost = this.alfrescoSettingsService.ecmHost;
-        this.bpmHost = this.alfrescoSettingsService.bpmHost;
+    constructor(private settingsService: AlfrescoSettingsService,
+                private storage: StorageService,
+                private logService: LogService) {
+        this.ecmHost = this.settingsService.ecmHost;
+        this.bpmHost = this.settingsService.bpmHost;
+    }
+
+    ngAfterViewChecked() {
+        // workaround for MDL issues with dynamic components
+        if (componentHandler) {
+            componentHandler.upgradeAllRegistered();
+        }
     }
 
     public onChangeECMHost(event: KeyboardEvent): void {
-        console.log((<HTMLInputElement>event.target).value);
-        this.ecmHost = (<HTMLInputElement>event.target).value;
-        this.alfrescoSettingsService.ecmHost = this.ecmHost;
-        localStorage.setItem(`ecmHost`, this.ecmHost);
+        let value = (<HTMLInputElement>event.target).value.trim();
+        if (value && this.isValidUrl(value)) {
+            this.logService.info(`ECM host: ${value}`);
+            this.ecmHost = value;
+            this.settingsService.ecmHost = value;
+            this.storage.setItem(`ecmHost`, value);
+        } else {
+            console.error('Ecm address does not match the pattern');
+        }
     }
 
     public onChangeBPMHost(event: KeyboardEvent): void {
-        console.log((<HTMLInputElement>event.target).value);
-        this.bpmHost = (<HTMLInputElement>event.target).value;
-        this.alfrescoSettingsService.bpmHost = this.bpmHost;
-        localStorage.setItem(`bpmHost`, this.bpmHost);
+        let value = (<HTMLInputElement>event.target).value.trim();
+        if (value && this.isValidUrl(value)) {
+            this.logService.info(`BPM host: ${value}`);
+            this.bpmHost = value;
+            this.settingsService.bpmHost = value;
+            this.storage.setItem(`bpmHost`, value);
+        } else {
+            console.error('Bpm address does not match the pattern');
+        }
+    }
+
+    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

@@ -24,9 +24,9 @@ import { Component } from '@angular/core';
                 <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 ECM <alfresco-tag-list></alfresco-tag-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 
+                    Tag list By Node ID
                     <alfresco-tag-node-list [nodeId]="nodeId"></alfresco-tag-node-list>
               </div>
             </div>

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

@@ -16,42 +16,41 @@
  */
 
 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>
+        <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) {
-        console.log(data);
+        this.logService.log(data);
     }
 }

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

@@ -1,41 +0,0 @@
-/* Utils */
-body, html {
-    height: 100%;
-}
-
-
-.p-10 {
-    padding: 10px;
-}
-
-.m-10 {
-    margin: 10px;
-}
-
-.loader-container {
-    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
-    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
-    display: -webkit-flex;     /* NEW - Chrome */
-    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
-    -webkit-box-flex-direction: row;
-    -moz-box-flex-direction: row;
-    -webkit-flex-direction: row;
-    flex-direction: row;
-    height:100%;
-}
-
-.loader-item {
-    margin: auto;
-    max-height:100px;
-    max-width:300px;
-}
-
-.loader-text{
-    white-space: nowrap;
-    text-align: center;
-    position: relative;
-}
-
-._dialog_overlay {
-    position: static !important;
-}

demo-shell-ng2/app/js/Polyline.js

@@ -1,372 +0,0 @@
-/**
- * Class to generate polyline
- *
- * @author Dmitry Farafonov
- */
- 
-var ANCHOR_TYPE= {
-	main: "main",
-	middle: "middle",
-	first: "first",
-	last: "last"
-};
-
-function Anchor(uuid, type, x, y) {
-	this.uuid = uuid; 
-	this.x = x;
-	this.y = y;
-	this.type = (type == ANCHOR_TYPE.middle) ? ANCHOR_TYPE.middle : ANCHOR_TYPE.main;
-};
-Anchor.prototype = {
-	uuid: null,
-	x: 0,
-	y: 0,
-	type: ANCHOR_TYPE.main,
-	isFirst: false,
-	isLast: false,
-	ndex: 0,
-	typeIndex: 0
-};
-
-function Polyline(uuid, points, strokeWidth, paper) {
-	/* Array on coordinates:
-	 * points: [{x: 410, y: 110}, 1
-	 *			{x: 570, y: 110}, 1 2
-	 *			{x: 620, y: 240},   2 3
-	 *			{x: 750, y: 270},     3 4
-	 *			{x: 650, y: 370}];      4
-	 */
-	this.points = points;
-	
-	/*
-	 * path for graph
-	 * [["M", x1, y1], ["L", x2, y2], ["C", ax, ay, bx, by, x3, y3], ["L", x3, y3]]
-	 */
-	this.path = [];
-	
-	this.anchors = [];
-	
-	if (strokeWidth) this.strokeWidth = strokeWidth;
-	
-	this.paper = paper;
-	
-	this.closePath = false;
-	
-	this.init();
-};
-
-Polyline.prototype = {
-	id: null,
-	points: [],
-	path: [],
-	anchors: [],
-	strokeWidth: 1,
-	radius: 1,
-	showDetails: false,
-	paper: null,
-	element: null,
-	isDefaultConditionAvailable: false,
-	closePath: false,
-	
-	init: function(points){
-		var linesCount = this.getLinesCount();
-		if (linesCount < 1)
-			return;
-			
-		this.normalizeCoordinates();
-		
-		// create anchors
-		
-		this.pushAnchor(ANCHOR_TYPE.first, this.getLine(0).x1, this.getLine(0).y1);
-		
-		for (var i = 1; i < linesCount; i++)
-		{
-			var line1 = this.getLine(i-1);
-			this.pushAnchor(ANCHOR_TYPE.main,  line1.x2, line1.y2);
-		}
-		
-		this.pushAnchor(ANCHOR_TYPE.last, this.getLine(linesCount-1).x2, this.getLine(linesCount-1).y2);
-		
-		this.rebuildPath();
-	},
-	
-	normalizeCoordinates: function(){
-		for(var i=0; i < this.points.length; i++){
-			this.points[i].x = parseFloat(this.points[i].x);
-			this.points[i].y = parseFloat(this.points[i].y);
-		}
-	},
-	
-	getLinesCount: function(){
-		return this.points.length-1;
-	},
-	_getLine: function(i){
-	    if (this.points.length > i && this.points[i]) {
-	        return {x1: this.points[i].x, y1: this.points[i].y, x2: this.points[i+1].x, y2: this.points[i+1].y};
-	    } else {
-	        return undefined;
-	    }
-	},
-	getLine: function(i){
-		var line = this._getLine(i);
-		if (line != undefined) {
-		    line.angle = this.getLineAngle(i);
-		}
-		return line;
-	},
-	getLineAngle: function(i){
-		var line = this._getLine(i);
-		return Math.atan2(line.y2 - line.y1, line.x2 - line.x1);
-	},
-	getLineLengthX: function(i){
-		var line = this.getLine(i);
-		return (line.x2 - line.x1);
-	},
-	getLineLengthY: function(i){
-		var line = this.getLine(i);
-		return (line.y2 - line.y1);
-	},
-	getLineLength: function(i){
-		return Math.sqrt(Math.pow(this.getLineLengthX(i), 2) + Math.pow(this.getLineLengthY(i), 2));
-	},
-	
-	getAnchors: function(){
-		return this.anchors;
-	},
-	getAnchorsCount: function(type){
-		if (!type)
-			return this.anchors.length;
-		else {
-			var count = 0;
-			for(var i=0; i < this.getAnchorsCount(); i++){
-				var anchor = this.anchors[i];
-				if (anchor.getType() == type) {
-					count++;
-				}
-			}
-			return count;
-		}
-	},
-	
-	pushAnchor: function(type, x, y, index){
-		if (type == ANCHOR_TYPE.first) {
-			index = 0;
-			typeIndex = 0;
-		} else if (type == ANCHOR_TYPE.last) {
-			index = this.getAnchorsCount();
-			typeIndex = 0;
-		} else if (!index) {
-			index = this.anchors.length;
-		} else {
-			for(var i=0; i < this.getAnchorsCount(); i++){
-				var anchor = this.anchors[i];
-				if (anchor.index > index) {
-					anchor.index++;
-					anchor.typeIndex++;
-				}
-			}
-		}
-		
-		var anchor = new Anchor(this.id, ANCHOR_TYPE.main, x, y, index, typeIndex);
-		
-		this.anchors.push(anchor);
-	},
-	
-	getAnchor: function(position){
-		return this.anchors[position];
-	},
-	
-	getAnchorByType: function(type, position){
-		if (type == ANCHOR_TYPE.first)
-			return this.anchors[0];
-		if (type == ANCHOR_TYPE.last)
-			return this.anchors[this.getAnchorsCount()-1];
-		
-		for(var i=0; i < this.getAnchorsCount(); i++){
-			var anchor = this.anchors[i];
-			if (anchor.type == type) {
-				if( position == anchor.position)
-					return anchor;
-			}
-		}
-		return null;
-	},
-	
-	addNewPoint: function(position, x, y){
-		// 
-		for(var i = 0; i < this.getLinesCount(); i++){
-			var line = this.getLine(i);
-			if (x > line.x1 && x < line.x2 && y > line.y1 && y < line.y2) {
-				this.points.splice(i+1,0,{x: x, y: y});
-				break;
-			}
-		}
-		
-		this.rebuildPath();
-	},
-	
-	rebuildPath: function(){
-		var path = [];
-		
-		for(var i = 0; i < this.getAnchorsCount(); i++){
-			var anchor = this.getAnchor(i);
-			
-			var pathType = "";
-			if (i == 0)
-				pathType = "M";
-			else 
-				pathType = "L";
-			
-			// TODO: save previous points and calculate new path just if points are updated, and then save currents values as previous
-			
-			var targetX = anchor.x, targetY = anchor.y;
-			if (i>0 && i < this.getAnchorsCount()-1) {
-				// get new x,y
-				var cx = anchor.x, cy = anchor.y;
-				
-				// pivot point of prev line
-				var AO = this.getLineLength(i-1);
-				if (AO < this.radius) {
-					AO = this.radius;
-				}
-				
-				this.isDefaultConditionAvailable = (this.isDefaultConditionAvailable || (i == 1 && AO > 10));
-				
-				var ED = this.getLineLengthY(i-1) * this.radius / AO;
-				var OD = this.getLineLengthX(i-1) * this.radius / AO;
-					targetX = anchor.x - OD;
-					targetY = anchor.y - ED;
-				
-				if (AO < 2*this.radius && i>1) {
-					targetX = anchor.x - this.getLineLengthX(i-1)/2;
-					targetY = anchor.y - this.getLineLengthY(i-1)/2;;
-				}
-					
-				// pivot point of next line
-				var AO = this.getLineLength(i);
-				if (AO < this.radius) {
-					AO = this.radius;
-				}
-				var ED = this.getLineLengthY(i) * this.radius / AO;
-				var OD = this.getLineLengthX(i) * this.radius / AO;
-					var nextSrcX = anchor.x + OD;
-					var nextSrcY = anchor.y + ED;
-					
-				if (AO < 2*this.radius && i<this.getAnchorsCount()-2) {
-					nextSrcX = anchor.x + this.getLineLengthX(i)/2;
-					nextSrcY = anchor.y + this.getLineLengthY(i)/2;;
-				}
-					
-				
-				var dx0 = (cx - targetX) / 3,
-					dy0 = (cy - targetY) / 3,
-					ax = cx - dx0,
-					ay = cy - dy0,
-					
-					dx1 = (cx - nextSrcX) / 3,
-					dy1 = (cy - nextSrcY) / 3,
-					bx = cx - dx1,
-					by = cy - dy1,
-					
-					zx=nextSrcX, zy=nextSrcY;
-					
-			} else if (i==1 && this.getAnchorsCount() == 2){
-				var AO = this.getLineLength(i-1);
-				if (AO < this.radius) {
-					AO = this.radius;
-				}
-				this.isDefaultConditionAvailable = (this.isDefaultConditionAvailable || (i == 1 && AO > 10));
-			}
-
-			// anti smoothing
-			if (this.strokeWidth%2 == 1) {
-				targetX += 0.5;
-				targetY += 0.5;
-			}
-			
-			path.push([pathType, targetX, targetY]);
-			
-			if (i>0 && i < this.getAnchorsCount()-1) {
-				path.push(["C", ax, ay, bx, by, zx, zy]);
-			}
-		}
-		
-		if (this.closePath) 
-		{
-			path.push(["Z"]);
-		}
-		
-		this.path = path;
-	},
-	
-	transform: function(transformation)
-	{
-		this.element.transform(transformation);
-	},
-	attr: function(attrs)
-	{
-		// TODO: foreach and set each
-		this.element.attr(attrs);
-	}
-};
-
-function Polygone(points, strokeWidth) {
-	/* Array on coordinates:
-	 * points: [{x: 410, y: 110}, 1
-	 *			{x: 570, y: 110}, 1 2
-	 *			{x: 620, y: 240},   2 3
-	 *			{x: 750, y: 270},     3 4
-	 *			{x: 650, y: 370}];      4
-	 */
-	this.points = points;
-	
-	/*
-	 * path for graph
-	 * [["M", x1, y1], ["L", x2, y2], ["C", ax, ay, bx, by, x3, y3], ["L", x3, y3]]
-	 */
-	this.path = [];
-	
-	this.anchors = [];
-	
-	if (strokeWidth) this.strokeWidth = strokeWidth;
-	
-	this.closePath = true;
-	this.init();
-};
-
-
-/*
- * Poligone is inherited from Poliline: draws closedPath of polyline
- */
-
-var Foo = function () { };
-Foo.prototype = Polyline.prototype;
-
-Polygone.prototype = new Foo();
-
-Polygone.prototype.rebuildPath = function(){
-	var path = [];
-	for(var i = 0; i < this.getAnchorsCount(); i++){
-		var anchor = this.getAnchor(i);
-		
-		var pathType = "";
-		if (i == 0)
-			pathType = "M";
-		else 
-			pathType = "L";
-		
-		var targetX = anchor.x, targetY = anchor.y;
-		
-		// anti smoothing
-		if (this.strokeWidth%2 == 1) {
-			targetX += 0.5;
-			targetY += 0.5;
-		}
-		
-		path.push([pathType, targetX, targetY]);	
-	}
-	if (this.closePath)
-		path.push(["Z"]);
-	
-	this.path = path;
-};

demo-shell-ng2/app/main.ts

@@ -16,7 +16,12 @@
  */
 
 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/polyfills.ts

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

demo-shell-ng2/app/vendor.ts

@@ -0,0 +1,75 @@
+// 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!dialog-polyfill/dialog-polyfill');
+import 'dialog-polyfill/dialog-polyfill.css';
+
+// Flags
+import 'flag-icon-css/css/flag-icon.min.css';
+
+import '../public/css/app.css';
+import '../public/css/muli-font.css';
+
+// Load the Angular Material 2 stylesheet
+import '../public/css/angular-material.css';
+
+import 'ng2-activiti-form/stencils/runtime.ng1';
+import 'ng2-activiti-form/stencils/runtime.adf';
+
+import 'ng2-charts';
+import 'chart.js';
+require('script!raphael/raphael.min.js');
+
+require('script!moment/min/moment.min.js');
+
+import 'md-date-time-picker/dist/css/mdDateTimePicker.css';
+require('script!md-date-time-picker/dist/js/mdDateTimePicker.min.js');
+require('script!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/config/helpers.js

@@ -0,0 +1,7 @@
+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,37 @@
+var webpackConfig = require('./webpack.test');
+
+module.exports = function (config) {
+  var _config = {
+    basePath: '',
+
+    frameworks: ['jasmine'],
+
+    files: [
+      { pattern: './config/karma-test-shim.js', watched: false }
+    ],
+
+    preprocessors: {
+      './config/karma-test-shim.js': ['webpack', 'sourcemap']
+    },
+
+    webpack: webpackConfig,
+
+    webpackMiddleware: {
+      stats: 'errors-only'
+    },
+
+    webpackServer: {
+      noInfo: true
+    },
+
+    reporters: ['mocha'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: false,
+    browsers: ['Chrome'],
+    singleRun: true
+  };
+
+  config.set(_config);
+};

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

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

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

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

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

@@ -0,0 +1,186 @@
+var webpack = require('webpack');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var helpers = require('./helpers');
+var path = require('path');
+var fs = require('fs');
+var glob = require('glob');
+var CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const rootPath = helpers.root('node_modules');
+
+var pattern = '+(alfresco-js-api|ng2-alfresco|ng2-activiti)*';
+var options = {
+    cwd: rootPath,
+    realpath: true
+};
+
+var alfrescoLibs = glob.sync(pattern, options);
+// console.dir(alfrescoLibs);
+
+module.exports = {
+    entry: {
+        'polyfills': './app/polyfills.ts',
+        'vendor': './app/vendor.ts',
+        'app': './app/main.ts'
+    },
+
+    resolve: {
+        extensions: ['', '.ts', '.js'],
+        modules: [
+            helpers.root('app'),
+            helpers.root('node_modules')
+        ],
+        root: rootPath,
+        fallback: rootPath
+    },
+
+    resolveLoader: {
+        alias: {
+            'systemjs-loader': helpers.root('config', 'loaders', 'system.js'),
+            'debug-loader': helpers.root('config', 'loaders', 'debug.js')
+        },
+        fallback: rootPath
+    },
+    module: {
+        preLoaders: [
+            {
+                test: /\.js$/,
+                include: [
+                    ...alfrescoLibs
+                ],
+                loader: 'source-map-loader'
+            }
+        ],
+        loaders: [
+            {
+                test: /\.ts$/,
+                loaders: ['awesome-typescript-loader', 'angular2-template-loader', 'systemjs-loader'],
+                exclude: ['node_modules','public']
+            },
+            {
+                test: /\.js$/,
+                include: [
+                    ...alfrescoLibs
+                ],
+                loaders: ['angular2-template-loader', 'source-map-loader', 'systemjs-loader']
+            },
+            {
+                test: /\.html$/,
+                exclude: alfrescoLibs,
+                loader: 'html'
+            },
+            {
+                test: /\.html$/,
+                include: alfrescoLibs,
+                loader: 'html',
+                query: {
+                    interpolate: true
+                }
+            },
+            {
+                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
+                loader: 'file?name=assets/[name].[hash].[ext]'
+            },
+            {
+                test: /\.css$/,
+                exclude: [
+                    helpers.root('app'),
+                    ...alfrescoLibs
+                ],
+                loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
+            },
+            {
+                test: /\.css$/,
+                include: [
+                    helpers.root('app'),
+                    ...alfrescoLibs
+                ],
+                loader: 'raw'
+            }
+        ]
+    },
+
+    plugins: [
+
+        new webpack.WatchIgnorePlugin([ new RegExp('^((?!(ng2-activiti|ng2-alfresco|demo-shell-ng2)).)((?!(src|app)).)*$')]),
+
+        new CopyWebpackPlugin([
+            {
+                from: 'versions.json'
+            },{
+                context: 'node_modules',
+                from: 'element.scrollintoviewifneeded-polyfill/index.js',
+                to: 'js/element.scrollintoviewifneeded-polyfill.js',
+                flatten: true
+            },{
+                context: 'node_modules',
+                from: 'classlist-polyfill/src/index.js',
+                to: 'js/classlist-polyfill.js',
+                flatten: true
+            }, {
+                context: 'node_modules',
+                from: 'intl/dist/Intl.min.js',
+                to: 'js/Intl.min.js',
+                flatten: true
+            }, {
+                context: 'node_modules',
+                from: 'web-animations-js/web-animations.min.js',
+                to: 'js/web-animations.min.js',
+                flatten: true
+            }, {
+                context: 'node_modules',
+                from: 'core-js/client/shim.min.js',
+                to: 'js/shim.min.js',
+                flatten: true
+            }, {
+                context: 'node_modules',
+                from:  'es6-shim/es6-shim.min.js',
+                to: 'js/es6-shim.min.js',
+                flatten: true
+            }, {
+                context: 'node_modules',
+                from:  'es5-shim/es5-shim.min.js',
+                to: 'js/es5-shim.min.js',
+                flatten: true
+            }, {
+                context: 'node_modules',
+                from:  'systemjs/dist/system-polyfills.js',
+                to: 'js/system-polyfills.js',
+                flatten: true
+            }, {
+                context: 'node_modules',
+                from:  'material-design-lite/material.min.js',
+                to: 'js/material.min.js',
+                flatten: true
+            }, {
+                context: 'node_modules',
+                from:  'material-design-lite/material.min.js',
+                to: 'js/material.min.js',
+                flatten: true
+            }, {
+                context: 'node_modules',
+                from: 'material-design-icons/iconfont/',
+                to: 'css/iconfont/',
+                flatten: true
+            }, {
+                context: 'public',
+                from: '',
+                to: ''
+            }
+        ]),
+
+        new webpack.optimize.CommonsChunkPlugin({
+            name: ['app', 'vendor', 'polyfills']
+        }),
+
+        new HtmlWebpackPlugin({
+            template: 'index.html'
+        })
+    ],
+
+    node: {
+        fs: 'empty',
+        module: false
+    }
+};

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

@@ -0,0 +1,68 @@
+var webpackMerge = require('webpack-merge');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var commonConfig = require('./webpack.common.js');
+var helpers = require('./helpers');
+var CopyWebpackPlugin = require('copy-webpack-plugin');
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'cheap-module-eval-source-map',
+
+    output: {
+        path: helpers.root('dist'),
+        filename: '[name].js',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    plugins: [
+        new ExtractTextPlugin('[name].css'),
+        new CopyWebpackPlugin([
+            {
+                from: 'favicon-96x96.png'
+            },
+            {
+                from: 'node_modules/pdfjs-dist/build/pdf.worker.js',
+                to: 'pdf.worker.js'
+            },
+            {
+                context: 'resources/i18n',
+                from: '**/*.json',
+                to: 'resources/i18n'
+            },
+            // Copy i18n folders for all modules with ng2-alfresco- prefix
+            {
+                context: 'node_modules',
+                from: 'ng2-alfresco-*/src/i18n/*.json',
+                to: 'node_modules'
+            },
+            // Copy i18n folders for all modules with ng2-activiti- prefix
+            {
+                context: 'node_modules',
+                from: 'ng2-activiti-*/src/i18n/*.json',
+                to: 'node_modules'
+            },
+            // Copy asstes folders for all modules with ng2-activiti- prefix
+            {
+                context: 'node_modules',
+                from: 'ng2-activiti-*/src/assets/images/*.*',
+                to: 'assets/images',
+                flatten: true
+            },
+            // Copy asstes folders for all modules with ng2-alfresco- prefix
+            {
+                context: 'node_modules',
+                from: 'ng2-alfresco-*/src/assets/images/*.*',
+                to: 'assets/images',
+                flatten: true
+            }
+        ])
+    ],
+
+    devServer: {
+        host: '0.0.0.0',
+        port: 3000,
+        inline: true,
+        historyApiFallback: true,
+        stats: 'minimal'
+    }
+});

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

@@ -0,0 +1,104 @@
+var webpack = require('webpack');
+var webpackMerge = require('webpack-merge');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var CopyWebpackPlugin = require('copy-webpack-plugin');
+var commonConfig = require('./webpack.common.js');
+var helpers = require('./helpers');
+
+const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
+
+module.exports = webpackMerge(commonConfig, {
+  devtool: 'source-map',
+
+  output: {
+    path: helpers.root('dist'),
+    publicPath: '/',
+    filename: '[name].[hash].js',
+    chunkFilename: '[id].[hash].chunk.js'
+  },
+
+  htmlLoader: {
+    minimize: false // workaround for ng2
+  },
+
+  plugins: [
+    // Define env variables to help with builds
+    // Reference: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
+    new webpack.DefinePlugin({
+      'process.env': {
+        'ENV': JSON.stringify(ENV)
+      }
+    }),
+
+    // Reference: http://webpack.github.io/docs/list-of-plugins.html#noerrorsplugin
+    // Only emit files when there are no errors
+    new webpack.NoErrorsPlugin(),
+
+    // Reference: http://webpack.github.io/docs/list-of-plugins.html#dedupeplugin
+    // Dedupe modules in the output
+    new webpack.optimize.DedupePlugin(),
+
+    // Reference: http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
+    // Minify all javascript, switch loaders to minimizing mode
+     new webpack.optimize.UglifyJsPlugin({
+       output:{
+         comments: false
+       },
+       mangle: {
+         keep_fnames: true
+       },
+       compressor: {
+         screw_ie8: true,
+         warnings: false
+       }
+     }),
+
+    // Extract css files
+    // Reference: https://github.com/webpack/extract-text-webpack-plugin
+    // Disabled when in test mode or not in build mode
+    new ExtractTextPlugin('[name].[hash].css'),
+
+    // Copy assets from the public folder
+    // Reference: https://github.com/kevlened/copy-webpack-plugin
+    new CopyWebpackPlugin([
+        {
+            from: 'favicon-96x96.png'
+        },
+        {
+            from: 'node_modules/pdfjs-dist/build/pdf.worker.js',
+            to: 'pdf.worker.js'
+        },
+        {
+            context: 'resources/i18n',
+            from: '**/*.json',
+            to: 'resources/i18n'
+        },
+        // Copy i18n folders for all modules with ng2-alfresco- prefix
+        {
+            context: 'node_modules',
+            from: 'ng2-alfresco-*/src/i18n/*.json',
+            to: 'node_modules'
+        },
+        // Copy i18n folders for all modules with ng2-activiti- prefix
+        {
+            context: 'node_modules',
+            from: 'ng2-activiti-*/src/i18n/*.json',
+            to: 'node_modules'
+        },
+        // Copy asstes folders for all modules with ng2-activiti- prefix
+        {
+            context: 'node_modules',
+            from: 'ng2-activiti-*/src/assets/images/*.*',
+            to: 'assets/images',
+            flatten : true
+        },
+        // Copy asstes folders for all modules with ng2-alfresco- prefix
+        {
+            context: 'node_modules',
+            from: 'ng2-alfresco-*/src/assets/images/*.*',
+            to: 'assets/images',
+            flatten : true
+        }
+    ])
+  ]
+});

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

@@ -0,0 +1,78 @@
+var helpers = require('./helpers');
+var fs = require('fs');
+var glob = require('glob');
+
+const rootPath = helpers.root('node_modules');
+
+var pattern = '+(alfresco-js-api|ng2-alfresco|ng2-activiti)*';
+var options = {
+    cwd: rootPath,
+    realpath: true
+};
+
+var alfrescoLibs = glob.sync(pattern, options);
+
+module.exports = {
+  devtool: 'inline-source-map',
+
+  resolve: {
+    extensions: ['', '.ts', '.js'],
+    modules: [
+      helpers.root('app'),
+      helpers.root('node_modules')
+    ],
+    root: rootPath,
+    fallback: rootPath
+  },
+
+  resolveLoader: {
+      alias: {
+          'systemjs-loader': helpers.root('config', 'loaders', 'system.js')
+      },
+      fallback: rootPath
+  },
+
+  module: {
+      preLoaders: [
+          {
+              test: /\.js$/,
+              include: [
+                  ...alfrescoLibs
+      ],
+      loader: 'source-map-loader'
+      }
+    ],
+    loaders: [
+        {
+            test: /\.ts$/,
+            loaders: ['awesome-typescript-loader', 'angular2-template-loader', 'systemjs-loader'],
+            exclude: ['node_modules','public']
+        },
+      {
+        test: /\.js$/,
+        include: [
+          ...alfrescoLibs
+        ],
+        loaders: ['angular2-template-loader', 'source-map-loader', 'systemjs-loader']
+      },
+      {
+        test: /\.html$/,
+        loader: 'html'
+
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
+        loader: 'null'
+      },
+      {
+          test: /\.css$/,
+          loader: 'raw'
+      }
+    ]
+  },
+
+  node: {
+      fs: 'empty',
+      module: false
+  }
+}

demo-shell-ng2/i18n/en.json

@@ -1,67 +0,0 @@
-{
-    "title": "Welcome",
-
-    "DOCUMENT_LIST": {
-        "COLUMNS": {
-            "DISPLAY_NAME": "Display name",
-            "CREATED_BY": "Created by",
-            "CREATED_ON": "Created on"
-        },
-        "ACTIONS": {
-            "FOLDER": {
-                "SYSTEM_1": "System folder action 1",
-                "CUSTOM": "Custom folder action",
-                "DELETE": "Delete"
-            },
-            "DOCUMENT": {
-                "DOWNLOAD": "Download",
-                "DELETE": "Delete",
-                "SYSTEM_2": "System document action 2",
-                "CUSTOM": "Custom action"
-            }
-        }
-    },
-
-    "DATATABLE": {
-        "COLUMNS": {
-            "DISPLAY_NAME": "Display name",
-            "CREATED_BY": "Created by",
-            "CREATED_ON": "Created on"
-        },
-        "ACTIONS": {
-            "FOLDER": {
-                "SYSTEM_1": "System folder action 1",
-                "CUSTOM": "Custom folder action"
-            },
-            "DOCUMENT": {
-                "DOWNLOAD": "Download",
-                "SYSTEM_2": "System document action 2",
-                "CUSTOM": "Custom action"
-            }
-        }
-    },
-
-    "LOGIN": {
-        "LOGO": "Alfresco",
-        "LABEL": {
-            "LOGIN": "Login",
-            "USERNAME": "Username",
-            "PASSWORD": "Password",
-            "REMEMBER": "Remember"
-        },
-        "MESSAGES": {
-            "USERNAME-REQUIRED": "Required",
-            "USERNAME-MIN": "Your username needs to be at least 4 characters.",
-            "PASSWORD-REQUIRED": "Enter your password to sign in",
-            "LOGIN-ERROR": "You have entered an invalid username or password",
-            "LOGIN-SUCCESS": "Login successful"
-        },
-        "BUTTON": {
-            "LOGIN": "Login"
-        },
-        "ACTION": {
-            "HELP": "NEED HELP?",
-            "REGISTER": "REGISTER"
-        }
-    }
-}

demo-shell-ng2/index.html

@@ -5,64 +5,76 @@
     <title>Demo Application - Angular 2</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <link href="app/css/app.css" rel="stylesheet">
-    <link href="app/css/muli-font.css" rel="stylesheet">
-
     <link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
 
-    <!-- Google Material Design Lite -->
-    <link href="./assets/material.orange-blue.min.css" rel="stylesheet">
-    <script src="node_modules/material-design-lite/material.min.js"></script>
-    <link href="node_modules/material-design-icons/iconfont/material-icons.css" rel="stylesheet">
-
-    <link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet" type="text/css">
-    <link href="node_modules/md-date-time-picker/dist/css/mdDateTimePicker.css" media="all" rel="stylesheet">
-
     <!-- 1. Load libraries -->
     <!-- Polyfill(s) for Safari (pre-10.x) -->
-    <script src="node_modules/intl/dist/Intl.min.js"></script>
-    <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
+    <script src=js/Intl.min.js></script>
 
-    <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/core-js/client/shim.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
-    <script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
+    <!-- IE/FF -->
+    <script src=js/element.scrollintoviewifneeded-polyfill.js></script>
 
-    <!-- Polyfill(s) for dialogs -->
-    <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
-    <link href="node_modules/dialog-polyfill/dialog-polyfill.css" rel="stylesheet" type="text/css" />
+    <!--[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]-->
 
-    <script src="node_modules/zone.js/dist/zone.js"></script>
-    <script src="node_modules/reflect-metadata/Reflect.js"></script>
-    <script src="node_modules/systemjs/dist/system.src.js"></script>
+    <!-- Google Material Design Lite -->
+    <link href="css/material.orange-blue.min.css" rel="stylesheet">
+    <script src="js/material.min.js"></script>
+    <link href="css/iconfont/material-icons.css" rel="stylesheet">
 
-    <script src="node_modules/moment/min/moment.min.js"></script>
-    <script src="/app/js/Polyline.js"></script>
-    <script src="node_modules/pdfjs-dist/web/compatibility.js"></script>
-    <script src="node_modules/pdfjs-dist/build/pdf.js"></script>
-    <script src="node_modules/pdfjs-dist/build/pdf.worker.js"></script>
-    <script src="node_modules/pdfjs-dist/web/pdf_viewer.js"></script>
-    <script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>
-    <script src="node_modules/raphael/raphael.min.js"></script>
-    <script src="node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js"></script>
-    <script src="node_modules/md-date-time-picker/dist/js/draggabilly.pkgd.min.js"></script>
+    <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%;
+        }
 
-    <!-- 2. Configure SystemJS -->
-    <script src="systemjs.config.js"></script>
-    <script>
-        System.import('app').catch(function(err){ console.error(err); });
-    </script>
+        .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"></div>
-                <div id="loader-text" class="loader-text">Loading Demo Shell..</div>
-            </div >
+<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>
-    </alfresco-app>
+    </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

@@ -1,19 +1,18 @@
 {
   "name": "Alfresco-Angular2-Demo",
   "description": "Demo shell for Alfresco Angular2 components",
-  "version": "0.4.0",
+  "version": "1.4.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
-    "clean": "npm install rimraf && rimraf dist node_modules typings",
-    "build": "npm run tslint && npm run tsc && npm run licensecheck",
-    "start": "npm run build && npm run serve",
-    "start:dev": "npm run build && concurrently \"npm run tsc:w\" \"npm run serve:dev\" ",
+    "clean": "npm install rimraf && npm run clean-build  && rimraf dist node_modules typings dist",
+    "start": "npm run tslint && npm run server-versions && webpack-dev-server --progress --max_old_space_size=4096 --max_new_space_size=4096",
+    "start:dist": "wsrv -s dist/ -p 3000 -a 0.0.0.0",
+    "clean-build": "rimraf 'app/{,**/}**.js' 'app/{,**/}**.js.map' 'app/{,**/}**.d.ts'",
+    "test": "karma start",
+    "build": "npm run tslint && npm run server-versions && rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail",
+    "server-versions": "rimraf versions.json && npm list --depth=0 --json=true --prod=true > versions.json  || exit 0",
     "aws": "node app.js",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "serve": "wsrv -O http://localhost:3000 -s -p 3000 -a 0.0.0.0 -x ./server/versions.js",
-    "serve:dev": "wsrv -O http://localhost:3000 -s -l -p 3000 -a 0.0.0.0 -x ./server/versions.js",
-    "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json 'app/{,**/}**.ts'",
+    "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json 'app/{,**/}**.ts'  -e 'app/vendor.ts' -e 'app/polyfills.ts' ",
     "licensecheck": "license-check"
   },
   "repository": {
@@ -53,61 +52,92 @@
     "alfresco"
   ],
   "dependencies": {
-    "@angular/common": "2.0.0",
-    "@angular/compiler": "2.0.0",
-    "@angular/core": "2.0.0",
-    "@angular/forms": "2.0.0",
-    "@angular/http": "2.0.0",
-    "@angular/platform-browser": "2.0.0",
-    "@angular/platform-browser-dynamic": "2.0.0",
-    "@angular/router": "3.0.0",
-    "@angular/upgrade": "2.0.0",
-    "@types/node": "^6.0.42",
-    "core-js": "^2.4.1",
-    "reflect-metadata": "^0.1.3",
-    "rxjs": "5.0.0-beta.12",
-    "systemjs": "0.19.27",
-    "zone.js": "^0.6.23",
-
-    "rimraf": "2.5.2",
+    "@angular/common": "2.2.2",
+    "@angular/compiler": "2.2.2",
+    "@angular/compiler-cli": "2.2.2",
+    "@angular/core": "2.2.2",
+    "@angular/forms": "2.2.2",
+    "@angular/http": "2.2.2",
+    "@angular/material": "2.0.0-beta.1",
+    "@angular/platform-browser": "2.2.2",
+    "@angular/platform-browser-dynamic": "2.2.2",
+    "@angular/router": "3.2.2",
+    "@angular/upgrade": "2.2.2",
+    "alfresco-js-api": "~1.4.0",
+    "chart.js": "2.5.0",
+    "core-js": "2.4.1",
+    "dialog-polyfill": "0.4.7",
+    "element.scrollintoviewifneeded-polyfill": "1.0.1",
+    "flag-icon-css": "2.3.0",
+    "hammerjs": "2.0.8",
     "material-design-icons": "2.2.3",
     "material-design-lite": "1.2.1",
+    "md-date-time-picker": "2.2.0",
+    "moment": "2.15.1",
+    "ng2-3d-editor": "0.0.15",
+    "ng2-activiti-analytics": "1.4.0",
+    "ng2-activiti-form": "1.4.0",
+    "ng2-activiti-processlist": "1.4.0",
+    "ng2-activiti-tasklist": "1.4.0",
+    "ng2-alfresco-core": "1.4.0",
+    "ng2-alfresco-datatable": "1.4.0",
+    "ng2-alfresco-documentlist": "1.4.0",
+    "ng2-alfresco-login": "1.4.0",
+    "ng2-alfresco-search": "1.4.0",
+    "ng2-alfresco-tag": "1.4.0",
+    "ng2-alfresco-social": "1.3.0",
+    "ng2-alfresco-upload": "1.4.0",
+    "ng2-alfresco-userinfo": "1.4.0",
+    "ng2-alfresco-viewer": "1.4.0",
+    "ng2-alfresco-webscript": "1.4.0",
+    "ng2-charts": "1.5.0",
     "ng2-translate": "2.5.0",
     "pdfjs-dist": "1.5.404",
-    "flag-icon-css": "2.3.0",
-    "intl": "1.2.4",
-    "moment": "2.15.1",
-    "chart.js": "^2.1.4",
-    "ng2-charts": "1.1.0",
-    "raphael": "^2.2.6",
-    "md-date-time-picker": "^2.2.0",
-    "alfresco-js-api": "^0.4.0",
-    "ng2-activiti-analytics": "0.4.0",
-    "ng2-alfresco-core": "0.4.0",
-    "ng2-alfresco-datatable": "0.4.0",
-    "ng2-alfresco-documentlist": "0.4.0",
-    "ng2-alfresco-login": "0.4.0",
-    "ng2-alfresco-search": "0.4.0",
-    "ng2-alfresco-upload": "0.4.0",
-    "ng2-alfresco-viewer": "0.4.0",
-    "ng2-activiti-form": "0.4.0",
-    "ng2-activiti-tasklist": "0.4.0",
-    "ng2-alfresco-userinfo": "0.4.0",
-    "ng2-activiti-processlist": "0.4.0",
-    "ng2-alfresco-webscript": "0.4.0",
-    "ng2-alfresco-tag": "0.4.0",
-    "dialog-polyfill": "^0.4.3",
-    "element.scrollintoviewifneeded-polyfill": "^1.0.1"
+    "raphael": "2.2.7",
+    "reflect-metadata": "0.1.10",
+    "rxjs": "5.0.0-beta.12",
+    "systemjs": "0.19.27",
+    "zone.js": "0.6.26"
   },
   "devDependencies": {
-    "@types/core-js": "^0.9.32",
-    "@types/jasmine": "^2.2.33",
-    "concurrently": "^2.2.0",
+    "@types/hammerjs": "^2.0.34",
+    "@types/jasmine": "2.5.35",
+    "@types/node": "6.0.45",
+    "angular2-template-loader": "^0.6.0",
+    "awesome-typescript-loader": "^2.2.4",
+    "classlist-polyfill": "^1.0.3",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.23.1",
+    "es5-shim": "^4.5.9",
+    "es6-shim": "^0.35.2",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "file-loader": "^0.8.5",
+    "glob": "^7.1.1",
+    "html-loader": "^0.4.3",
+    "html-webpack-plugin": "^2.15.0",
+    "intl": "^1.2.5",
+    "jasmine-core": "^2.4.1",
+    "karma": "^1.2.0",
+    "karma-chrome-launcher": "2.0.0",
+    "karma-jasmine": "^1.0.2",
+    "karma-mocha-reporter": "^2.2.1",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-webpack": "^1.8.0",
     "license-check": "1.1.5",
     "mime": "^1.3.4",
+    "null-loader": "^0.1.1",
+    "raw-loader": "^0.5.1",
+    "rimraf": "^2.5.2",
+    "script-loader": "^0.7.0",
+    "source-map-loader": "^0.1.5",
+    "style-loader": "^0.13.1",
     "tslint": "3.15.1",
-    "typescript": "^2.0.3",
-    "wsrv": "^0.1.5"
+    "typescript": "2.0.3",
+    "web-animations-js": "^2.2.2",
+    "webpack": "^1.13.0",
+    "webpack-dev-server": "^1.14.1",
+    "webpack-merge": "^0.14.0",
+    "wsrv": "^0.1.6"
   },
   "license-check-config": {
     "src": [

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

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

demo-shell-ng2/public/js/Blob.js

@@ -0,0 +1,211 @@
+/* Blob.js
+ * A Blob implementation.
+ * 2014-07-24
+ *
+ * By Eli Grey, http://eligrey.com
+ * By Devin Samarin, https://github.com/dsamarin
+ * License: MIT
+ *   See https://github.com/eligrey/Blob.js/blob/master/LICENSE.md
+ */
+
+/*global self, unescape */
+/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
+ plusplus: true */
+
+/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */
+
+(function (view) {
+    "use strict";
+
+    view.URL = view.URL || view.webkitURL;
+
+    if (view.Blob && view.URL) {
+        try {
+            new Blob;
+            return;
+        } catch (e) {}
+    }
+
+    // Internally we use a BlobBuilder implementation to base Blob off of
+    // in order to support older browsers that only have BlobBuilder
+    var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || (function(view) {
+            var
+                get_class = function(object) {
+                    return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
+                }
+                , FakeBlobBuilder = function BlobBuilder() {
+                    this.data = [];
+                }
+                , FakeBlob = function Blob(data, type, encoding) {
+                    this.data = data;
+                    this.size = data.length;
+                    this.type = type;
+                    this.encoding = encoding;
+                }
+                , FBB_proto = FakeBlobBuilder.prototype
+                , FB_proto = FakeBlob.prototype
+                , FileReaderSync = view.FileReaderSync
+                , FileException = function(type) {
+                    this.code = this[this.name = type];
+                }
+                , file_ex_codes = (
+                    "NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR "
+                    + "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"
+                ).split(" ")
+                , file_ex_code = file_ex_codes.length
+                , real_URL = view.URL || view.webkitURL || view
+                , real_create_object_URL = real_URL.createObjectURL
+                , real_revoke_object_URL = real_URL.revokeObjectURL
+                , URL = real_URL
+                , btoa = view.btoa
+                , atob = view.atob
+
+                , ArrayBuffer = view.ArrayBuffer
+                , Uint8Array = view.Uint8Array
+
+                , origin = /^[\w-]+:\/*\[?[\w\.:-]+\]?(?::[0-9]+)?/
+                ;
+            FakeBlob.fake = FB_proto.fake = true;
+            while (file_ex_code--) {
+                FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;
+            }
+            // Polyfill URL
+            if (!real_URL.createObjectURL) {
+                URL = view.URL = function(uri) {
+                    var
+                        uri_info = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
+                        , uri_origin
+                        ;
+                    uri_info.href = uri;
+                    if (!("origin" in uri_info)) {
+                        if (uri_info.protocol.toLowerCase() === "data:") {
+                            uri_info.origin = null;
+                        } else {
+                            uri_origin = uri.match(origin);
+                            uri_info.origin = uri_origin && uri_origin[1];
+                        }
+                    }
+                    return uri_info;
+                };
+            }
+            URL.createObjectURL = function(blob) {
+                var
+                    type = blob.type
+                    , data_URI_header
+                    ;
+                if (type === null) {
+                    type = "application/octet-stream";
+                }
+                if (blob instanceof FakeBlob) {
+                    data_URI_header = "data:" + type;
+                    if (blob.encoding === "base64") {
+                        return data_URI_header + ";base64," + blob.data;
+                    } else if (blob.encoding === "URI") {
+                        return data_URI_header + "," + decodeURIComponent(blob.data);
+                    } if (btoa) {
+                        return data_URI_header + ";base64," + btoa(blob.data);
+                    } else {
+                        return data_URI_header + "," + encodeURIComponent(blob.data);
+                    }
+                } else if (real_create_object_URL) {
+                    return real_create_object_URL.call(real_URL, blob);
+                }
+            };
+            URL.revokeObjectURL = function(object_URL) {
+                if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {
+                    real_revoke_object_URL.call(real_URL, object_URL);
+                }
+            };
+            FBB_proto.append = function(data/*, endings*/) {
+                var bb = this.data;
+                // decode data to a binary string
+                if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {
+                    var
+                        str = ""
+                        , buf = new Uint8Array(data)
+                        , i = 0
+                        , buf_len = buf.length
+                        ;
+                    for (; i < buf_len; i++) {
+                        str += String.fromCharCode(buf[i]);
+                    }
+                    bb.push(str);
+                } else if (get_class(data) === "Blob" || get_class(data) === "File") {
+                    if (FileReaderSync) {
+                        var fr = new FileReaderSync;
+                        bb.push(fr.readAsBinaryString(data));
+                    } else {
+                        // async FileReader won't work as BlobBuilder is sync
+                        throw new FileException("NOT_READABLE_ERR");
+                    }
+                } else if (data instanceof FakeBlob) {
+                    if (data.encoding === "base64" && atob) {
+                        bb.push(atob(data.data));
+                    } else if (data.encoding === "URI") {
+                        bb.push(decodeURIComponent(data.data));
+                    } else if (data.encoding === "raw") {
+                        bb.push(data.data);
+                    }
+                } else {
+                    if (typeof data !== "string") {
+                        data += ""; // convert unsupported types to strings
+                    }
+                    // decode UTF-16 to binary string
+                    bb.push(unescape(encodeURIComponent(data)));
+                }
+            };
+            FBB_proto.getBlob = function(type) {
+                if (!arguments.length) {
+                    type = null;
+                }
+                return new FakeBlob(this.data.join(""), type, "raw");
+            };
+            FBB_proto.toString = function() {
+                return "[object BlobBuilder]";
+            };
+            FB_proto.slice = function(start, end, type) {
+                var args = arguments.length;
+                if (args < 3) {
+                    type = null;
+                }
+                return new FakeBlob(
+                    this.data.slice(start, args > 1 ? end : this.data.length)
+                    , type
+                    , this.encoding
+                );
+            };
+            FB_proto.toString = function() {
+                return "[object Blob]";
+            };
+            FB_proto.close = function() {
+                this.size = 0;
+                delete this.data;
+            };
+            return FakeBlobBuilder;
+        }(view));
+
+    view.Blob = function(blobParts, options) {
+        var type = options ? (options.type || "") : "";
+        var builder = new BlobBuilder();
+        if (blobParts) {
+            for (var i = 0, len = blobParts.length; i < len; i++) {
+                if (Uint8Array && blobParts[i] instanceof Uint8Array) {
+                    builder.append(blobParts[i].buffer);
+                }
+                else {
+                    builder.append(blobParts[i]);
+                }
+            }
+        }
+        var blob = builder.getBlob(type);
+        if (!blob.slice && blob.webkitSlice) {
+            blob.slice = blob.webkitSlice;
+        }
+        return blob;
+    };
+
+    var getPrototypeOf = Object.getPrototypeOf || function(object) {
+            return object.__proto__;
+        };
+    view.Blob.prototype = getPrototypeOf(new view.Blob());
+}(typeof self !== "undefined" && self || typeof window !== "undefined" && window || this.content || this));

demo-shell-ng2/public/js/formdata.js

@@ -0,0 +1,37 @@
+/**
+ * Emulate FormData for some browsers
+ * MIT License
+ * (c) 2010 François de Metz
+ */
+(function(w) {
+    if (w.FormData)
+        return;
+    function FormData() {
+        this.fake = true;
+        this.boundary = "--------FormData" + Math.random();
+        this._fields = [];
+    }
+    FormData.prototype.append = function(key, value) {
+        this._fields.push([key, value]);
+    }
+    FormData.prototype.toString = function() {
+        var boundary = this.boundary;
+        var body = "";
+        this._fields.forEach(function(field) {
+            body += "--" + boundary + "\r\n";
+            // file upload
+            if (field[1].name) {
+                var file = field[1];
+                body += "Content-Disposition: form-data; name=\""+ field[0] +"\"; filename=\""+ file.name +"\"\r\n";
+                body += "Content-Type: "+ file.type +"\r\n\r\n";
+                body += file.getAsBinary() + "\r\n";
+            } else {
+                body += "Content-Disposition: form-data; name=\""+ field[0] +"\";\r\n\r\n";
+                body += field[1] + "\r\n";
+            }
+        });
+        body += "--" + boundary +"--";
+        return body;
+    }
+    w.FormData = FormData;
+})(window);

demo-shell-ng2/public/js/promisePolyfill.js

@@ -0,0 +1,3 @@
+/* Disable minification (remove `.min` from URL path) for more info */
+
+(function(undefined) {if (!('Symbol' in this && 'iterator' in this.Symbol && !!Array.prototype[Symbol.iterator] && !!Array.prototype.values && (Array.prototype[Symbol.iterator] === Array.prototype.values))) {Object.defineProperty(Array.prototype,"values",{value:Array.prototype[Symbol.iterator],enumerable:!1,writable:!1});}if (!('contains' in String.prototype)) {String.prototype.contains=String.prototype.includes;}var ArrayIterator=function(){var e=function(){var e=function(){return this.length=0,this},t=function(e){if("function"!=typeof e)throw new TypeError(e+" is not a function");return e},_=function(e,n){return this instanceof _?(Object.defineProperties(this,{__list__:{writable:!0,value:e},__context__:{writable:!0,value:n},__nextIndex__:{writable:!0,value:0}}),void(n&&(t(n.on),n.on("_add",this._onAdd.bind(this)),n.on("_delete",this._onDelete.bind(this)),n.on("_clear",this._onClear.bind(this))))):new _(e,n)};return Object.defineProperties(_.prototype,Object.assign({constructor:{value:_,configurable:!0,enumerable:!1,writable:!0},_next:{value:function(){var e;if(this.__list__)return this.__redo__&&(e=this.__redo__.shift(),void 0!==e)?e:this.__nextIndex__<this.__list__.length?this.__nextIndex__++:void this._unBind()},configurable:!0,enumerable:!1,writable:!0},next:{value:function(){return this._createResult(this._next())},configurable:!0,enumerable:!1,writable:!0},_createResult:{value:function(e){return void 0===e?{done:!0,value:void 0}:{done:!1,value:this._resolve(e)}},configurable:!0,enumerable:!1,writable:!0},_resolve:{value:function(e){return this.__list__[e]},configurable:!0,enumerable:!1,writable:!0},_unBind:{value:function(){this.__list__=null,delete this.__redo__,this.__context__&&(this.__context__.off("_add",this._onAdd.bind(this)),this.__context__.off("_delete",this._onDelete.bind(this)),this.__context__.off("_clear",this._onClear.bind(this)),this.__context__=null)},configurable:!0,enumerable:!1,writable:!0},toString:{value:function(){return"[object Iterator]"},configurable:!0,enumerable:!1,writable:!0}},{_onAdd:{value:function(e){if(!(e>=this.__nextIndex__)){if(++this.__nextIndex__,!this.__redo__)return void Object.defineProperty(this,"__redo__",{value:[e],configurable:!0,enumerable:!1,writable:!1});this.__redo__.forEach(function(t,_){t>=e&&(this.__redo__[_]=++t)},this),this.__redo__.push(e)}},configurable:!0,enumerable:!1,writable:!0},_onDelete:{value:function(e){var t;e>=this.__nextIndex__||(--this.__nextIndex__,this.__redo__&&(t=this.__redo__.indexOf(e),t!==-1&&this.__redo__.splice(t,1),this.__redo__.forEach(function(t,_){t>e&&(this.__redo__[_]=--t)},this)))},configurable:!0,enumerable:!1,writable:!0},_onClear:{value:function(){this.__redo__&&e.call(this.__redo__),this.__nextIndex__=0},configurable:!0,enumerable:!1,writable:!0}})),Object.defineProperty(_.prototype,Symbol.iterator,{value:function(){return this},configurable:!0,enumerable:!1,writable:!0}),Object.defineProperty(_.prototype,Symbol.toStringTag,{value:"Iterator",configurable:!1,enumerable:!1,writable:!1}),_}(),t=function(_,n){return this instanceof t?(e.call(this,_),n=n?String.prototype.contains.call(n,"key+value")?"key+value":String.prototype.contains.call(n,"key")?"key":"value":"value",void Object.defineProperty(this,"__kind__",{value:n,configurable:!1,enumerable:!1,writable:!1})):new t(_,n)};return Object.setPrototypeOf&&Object.setPrototypeOf(t,e.prototype),t.prototype=Object.create(e.prototype,{constructor:{value:t,configurable:!0,enumerable:!1,writable:!0},_resolve:{value:function(e){return"value"===this.__kind__?this.__list__[e]:"key+value"===this.__kind__?[e,this.__list__[e]]:e},configurable:!0,enumerable:!1,writable:!0},toString:{value:function(){return"[object Array Iterator]"},configurable:!0,enumerable:!1,writable:!0}}),t}();}).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});

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

@@ -0,0 +1,25 @@
+{
+    "title": "Welcome",
+
+    "DOCUMENT_LIST": {
+        "COLUMNS": {
+            "DISPLAY_NAME": "Display name",
+            "TAG": "Tag",
+            "CREATED_BY": "Created by",
+            "CREATED_ON": "Created on"
+        },
+        "ACTIONS": {
+            "FOLDER": {
+                "SYSTEM_1": "System folder action 1",
+                "CUSTOM": "Custom folder action",
+                "DELETE": "Delete"
+            },
+            "DOCUMENT": {
+                "DOWNLOAD": "Download",
+                "DELETE": "Delete",
+                "SYSTEM_2": "System document action 2",
+                "CUSTOM": "Custom action"
+            }
+        }
+    }
+}

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

@@ -4,6 +4,7 @@
   "DOCUMENT_LIST": {
     "COLUMNS": {
       "DISPLAY_NAME": "Mostra name",
+      "TAG": "Tag",
       "CREATED_BY": "Creato da",
       "CREATED_ON": "Creato il"
     },
@@ -18,24 +19,8 @@
         "CUSTOM": "Custom action"
       }
     }
-  },
-
-  "DATATABLE": {
-    "COLUMNS": {
-      "DISPLAY_NAME": "Display name",
-      "CREATED_BY": "Created by",
-      "CREATED_ON": "Created on"
-    },
-    "ACTIONS": {
-      "FOLDER": {
-        "SYSTEM_1": "System folder action 1",
-        "CUSTOM": "Custom folder action"
-      },
-      "DOCUMENT": {
-        "DOWNLOAD": "Download",
-        "SYSTEM_2": "System document action 2",
-        "CUSTOM": "Custom action"
-      }
-    }
   }
+
+
+
 }

demo-shell-ng2/server/versions.js

@@ -1,42 +0,0 @@
-'use strict';
-
-// wsrv extension that provides dynamic '/versions' route
-
-exports.register = function (server, options, next) {
-
-    var packages = [
-        'ng2-activiti-form',
-        'ng2-alfresco-core',
-        'ng2-alfresco-datatable',
-        'ng2-alfresco-documentlist',
-        'ng2-alfresco-login',
-        'ng2-alfresco-search',
-        'ng2-alfresco-upload',
-        'ng2-alfresco-viewer',
-        'ng2-alfresco-webscript'
-    ];
-
-    server.route({
-        method: 'GET',
-        path: '/versions',
-        handler: function (request, reply) {
-            var result = {
-                packages: packages.map(function (packageName) {
-                    return {
-                        name: packageName,
-                        version: require('./../node_modules/' + packageName + '/package.json').version
-                    }
-                })
-            };
-
-            return reply(result).type('application/json');
-        }
-    });
-
-    next();
-};
-
-exports.register.attributes = {
-    name: 'ng2-module-versions',
-    version: '1.0.0'
-};

demo-shell-ng2/systemjs.config.js

@@ -1,76 +0,0 @@
-/**
- * System configuration for Angular 2 samples
- * Adjust as necessary for your application needs.
- */
-(function (global) {
-    System.config({
-        paths: {
-            // paths serve as alias
-            'npm:': 'node_modules/'
-        },
-        // map tells the System loader where to look for things
-        map: {
-            // our app is within the app folder
-            app: 'app',
-            // angular bundles
-            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-            // other libraries
-            'rxjs': 'npm:rxjs',
-            'moment': 'npm:moment/min/moment.min.js',
-            'ng2-charts' : 'npm:ng2-charts',
-            'ng2-translate': 'npm:ng2-translate',
-            'ng2-alfresco-core': 'npm:ng2-alfresco-core/dist',
-            'ng2-alfresco-datatable': 'npm:ng2-alfresco-datatable/dist',
-            'ng2-alfresco-documentlist': 'npm:ng2-alfresco-documentlist/dist',
-            'ng2-alfresco-login': 'npm:ng2-alfresco-login/dist',
-            'ng2-alfresco-search': 'npm:ng2-alfresco-search/dist',
-            'ng2-alfresco-upload': 'npm:ng2-alfresco-upload/dist',
-            'ng2-activiti-form': 'npm:ng2-activiti-form/dist',
-            'ng2-alfresco-viewer': 'npm:ng2-alfresco-viewer/dist',
-            'ng2-alfresco-webscript': 'npm:ng2-alfresco-webscript/dist',
-            'ng2-alfresco-tag': 'npm:ng2-alfresco-tag/dist',
-            'ng2-activiti-tasklist': 'npm:ng2-activiti-tasklist/dist',
-            'alfresco-js-api': 'npm:alfresco-js-api/dist',
-            'ng2-activiti-processlist': 'npm:ng2-activiti-processlist/dist',
-            'ng2-alfresco-userinfo': 'npm:ng2-alfresco-userinfo/dist',
-            'ng2-activiti-analytics': 'npm:ng2-activiti-analytics/dist',
-            'ng2-activiti-diagrams': 'npm:ng2-activiti-diagrams/dist'
-        },
-        // packages tells the System loader how to load when no filename and/or no extension
-        packages: {
-            app: {
-                main: './main.js',
-                defaultExtension: 'js'
-            },
-            rxjs: {
-                defaultExtension: 'js'
-            },
-            'ng2-translate': { defaultExtension: 'js' },
-            'ng2-charts': { defaultExtension: 'js' },
-
-            'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-datatable': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-documentlist': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-login': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-search': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-upload': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-viewer': { main: './index.js', defaultExtension: 'js'},
-            'ng2-activiti-form': { main: './index.js', defaultExtension: 'js'},
-            'ng2-activiti-processlist': { main: './index.js', defaultExtension: 'js'},
-            'ng2-activiti-tasklist': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-webscript': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-tag': { main: './index.js', defaultExtension: 'js'},
-            'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-            'ng2-alfresco-userinfo': { main: './index.js', defaultExtension: 'js'},
-            'ng2-activiti-analytics': { main: './index.js', defaultExtension: 'js'},
-            'ng2-activiti-diagrams': { main: './index.js', defaultExtension: 'js'}
-        }
-    });
-})(this);

demo-shell-ng2/tsconfig.json

@@ -1,19 +1,17 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "module": "system",
+    "module": "commonjs",
     "moduleResolution": "node",
     "sourceMap": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "removeComments": false,
+    "lib": ["es2015", "dom"],
     "noImplicitAny": false,
-    "types": ["core-js", "jasmine"]
+    "suppressImplicitAnyIndexErrors": true,
+    "noResolve": true
   },
   "exclude": [
-    "dist",
-    "node_modules",
-    "typings/main",
-    "typings/main.d.ts"
+    "node_modules"
   ]
 }

demo-shell-ng2/tslint.json

@@ -3,7 +3,6 @@
     "align": [
       true,
       "parameters",
-      "arguments",
       "statements"
     ],
     "ban": false,
@@ -29,15 +28,14 @@
     ],
     "member-ordering": [
       true,
-      "public-before-private",
       "static-before-instance",
       "variables-before-functions"
     ],
     "no-any": false,
     "no-arg": true,
-    "no-bitwise": true,
+    "no-bitwise": false,
     "no-conditional-assignment": true,
-    "no-consecutive-blank-lines": false,
+    "no-consecutive-blank-lines": true,
     "no-console": [
       true,
       "debug",
@@ -51,11 +49,11 @@
     "no-debugger": true,
     "no-duplicate-key": true,
     "no-duplicate-variable": true,
-    "no-empty": true,
+    "no-empty": false,
     "no-eval": true,
     "no-inferrable-types": false,
     "no-internal-module": true,
-    "no-require-imports": true,
+    "no-require-imports": false,
     "no-shadowed-variable": true,
     "no-switch-case-fall-through": true,
     "no-trailing-whitespace": true,

demo-shell-ng2/webpack.config.js

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

demo-shell-ng2/wsrv-config.json

@@ -1,14 +0,0 @@
-{
-    "watch": [
-        "node_modules/ng2-alfresco-core/dist/**/*.{html,css,js}",
-        "node_modules/ng2-alfresco-datatable/dist/**/*.{html,css,js}",
-        "node_modules/ng2-alfresco-documentlist/dist/**/*.{html,css,js}",
-        "node_modules/ng2-alfresco-login/dist/**/*.{html,css,js}",
-        "node_modules/ng2-alfresco-search/dist/**/*.{html,css,js}",
-        "node_modules/ng2-alfresco-upload/dist/**/*.{html,css,js}",
-        "node_modules/ng2-alfresco-viewer/dist/**/*.{html,css,js}",
-        "node_modules/ng2-alfresco-webscript/dist/**/*.{html,css,js}",
-        "node_modules/ng2-activiti-form/dist/**/*.{html,css,js}",
-        "node_modules/ng2-activiti-tasklist/dist/**/*.{html,css,js}"
-    ]
-}

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

@@ -6,10 +6,14 @@ coverage
 dist
 src/**/*.js
 src/**/*.js.map
-
+src/**/*.d.ts
 demo/**/*.js
 demo/**/*.js.map
 demo/**/*.d.ts
 index.js
 index.js.map
 !systemjs.config.js
+*.tgz
+/package/
+/bundles/
+index.d.ts

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

@@ -2,14 +2,15 @@ npm-debug.log
 .idea
 
 coverage/
+demo/
 node_modules
 typings/
 fonts/
 
 /.editorconfig
 /.travis.yml
-/*.js
 /*.json
-/*.ts
-/*.js.map
+/karma-test-shim.js
+/karma.conf.js
+/gulpfile.ts
 /.npmignore

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

@@ -69,6 +69,9 @@ Follow the 3 steps below:
     <script src="node_modules/material-design-lite/material.min.js"></script>
     <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
 
+    <!-- Load the Angular Material 2 stylesheet -->
+    <link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
+
     <!-- Polyfill(s) for Safari (pre-10.x) -->
     <script src="node_modules/intl/dist/Intl.min.js"></script>
     <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
@@ -101,15 +104,14 @@ Follow the 3 steps below:
     - ng2-activiti-diagrams
     - ng2-activiti-analytics
 
-    Please refer to the following example file: [systemjs.config.js](demo/systemjs
-    .config.js) .
+    Please refer to the following example file: [systemjs.config.js](demo/systemjs.config.js) .
 
 ## Basic usage example Activiti Analytics List
 
 The component shows the list of all the available reports
 
 ```html
-<analytics-report-list></analytics-report-list>
+<analytics-report-list [layoutType]="'LIST'"></analytics-report-list>
 ```
 
 Usage example of this component :
@@ -129,7 +131,7 @@ import { AnalyticsModule } from 'ng2-activiti-analytics';
     <div class="page-content">
         <div class="mdl-grid">
             <div class="mdl-cell mdl-cell--8-col task-column mdl-shadow--2dp">
-                <analytics-report-list></analytics-report-list>
+                <analytics-report-list [layoutType]="'LIST'"></analytics-report-list>
             </div>
         </div>
     </div>`
@@ -176,7 +178,9 @@ platformBrowserDynamic().bootstrapModule(AppModule);
 
 #### Options
 
-No options.
+| Name | Type | Required | Description |
+| --- | --- | --- | --- |
+| `layoutType` | {string} | required | Define the layout of the apps. There are two possible values: GRID or LIST. LIST is the default value|
 
 ## Basic usage example Activiti Analytics
 
@@ -203,7 +207,7 @@ import { AnalyticsModule } from 'ng2-activiti-analytics';
     <div class="page-content">
         <div class="mdl-grid">
             <div class="mdl-cell mdl-cell--8-col task-column mdl-shadow--2dp">
-                <activiti-analytics [appId]="1001" [reportId]="2006"></activiti-analytics>
+                <activiti-analytics [appId]="1001" [reportId]="2006" [hideParameters]="false"></activiti-analytics>
             </div>
         </div>
     </div>`
@@ -246,6 +250,8 @@ platformBrowserDynamic().bootstrapModule(AppModule);
 | --- | --- |
 |`onSuccess` | The event is emitted when the report parameters are loaded |
 |`onError` | The event is emitted when an error occur during the loading |
+|`reportSaved` | The event is emitted when a report is saved |
+|`reportDeleted` | The event is emitted when a report is deleted |
 
 #### Options
 
@@ -253,8 +259,40 @@ platformBrowserDynamic().bootstrapModule(AppModule);
 | --- | --- |
 |`appId` | The application id |
 |`reportId` | The report id |
+|`hideParameters` | Boolean to hide or show the analytics parameters |
 |`debug` | Flag to enable or disable the Form values in the console log |
 
+You can also use the activiti analytic component to show straight away the charts without show the parameters setting the hideParameters to true
+
+```html
+<activiti-analytics [appId]="appId" [reportId]="reportId" [hideParameters]="true"></activiti-analytics>
+```
+
+![Analytics-without-parameters](docs/assets/analytics-without-parameters.png)
+
+## Basic usage example Analytics Generator
+
+The component generate and show the charts
+
+```html
+<activiti-analytics-generator [reportId]="reportId" [reportParamQuery]="reportParamQuery"></activiti-analytics>
+```
+
+#### Events
+
+| Name | Description |
+| --- | --- |
+|`onSuccess` | The event is emitted when the charts are loaded |
+|`onError` | The event is emitted when an error occur during the loading |
+
+#### Options
+
+| Name | Description |
+| --- | --- |
+|`reportId` | The report id |
+|`reportParamQuery` | The object contains all the parameters that the report needs |
+
+
 ## Build from sources
 
 Alternatively you can build component from sources with the following commands:

ng2-components/ng2-activiti-analytics/demo/.editorconfig

@@ -0,0 +1,23 @@
+# 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
+
+[karma.conf.js]
+indent_style = space
+indent_size = 2
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

ng2-components/ng2-activiti-analytics/demo/package.json

@@ -5,15 +5,17 @@
   "author": "Alfresco Software, Ltd.",
   "main": "index.js",
   "scripts": {
-    "clean": "npm install rimraf && rimraf dist node_modules typings dist",
+    "clean": "npm install rimraf && npm run clean-build && rimraf dist node_modules typings dist",
+    "clean-build" : "rimraf 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts'",
     "postinstall": "npm run build",
     "start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
     "server": "wsrv -o -s -l",
-    "build": "npm run tslint && rimraf dist && tsc",
-    "build:w": "npm run tslint && rimraf dist && tsc -w",
+    "build": "npm run tslint && npm run clean-build && npm run tsc",
+    "build:w": "npm run tslint && rimraf dist && npm run tsc:w",
+    "travis": "npm link ng2-alfresco-core ng2-activiti-diagrams",
     "tsc": "tsc",
     "tsc:w": "tsc -w",
-    "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts"
+    "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts  -e '{,**/}**.d.ts'"
   },
   "license": "Apache-2.0",
   "contributors": [
@@ -30,41 +32,41 @@
     "activiti-diagrams"
   ],
   "dependencies": {
-    "@angular/common": "2.0.0",
-    "@angular/compiler": "2.0.0",
-    "@angular/core": "2.0.0",
-    "@angular/forms": "2.0.0",
-    "@angular/http": "2.0.0",
-    "@angular/platform-browser": "2.0.0",
-    "@angular/platform-browser-dynamic": "2.0.0",
-    "core-js": "^2.4.1",
-    "reflect-metadata": "^0.1.3",
+    "@angular/common": "2.2.2",
+    "@angular/compiler": "2.2.2",
+    "@angular/compiler-cli": "2.2.2",
+    "@angular/core": "2.2.2",
+    "@angular/forms": "2.2.2",
+    "@angular/http": "2.2.2",
+    "@angular/platform-browser": "2.2.2",
+    "@angular/platform-browser-dynamic": "2.2.2",
+    "@angular/material": "2.0.0-beta.1",
+    "@angular/router": "3.2.2",
+    "@angular/upgrade": "2.2.2",
+    "core-js": "2.4.1",
+    "reflect-metadata": "0.1.10",
     "rxjs": "5.0.0-beta.12",
     "systemjs": "0.19.27",
-    "zone.js": "^0.6.23",
-
+    "zone.js": "0.6.26",
     "intl": "1.2.4",
-    "dialog-polyfill": "^0.4.3",
-    "element.scrollintoviewifneeded-polyfill": "^1.0.1",
+    "dialog-polyfill": "0.4.7",
+    "element.scrollintoviewifneeded-polyfill": "1.0.1",
     "material-design-icons": "2.2.3",
     "material-design-lite": "1.2.1",
-
-    "chart.js": "^2.1.4",
-    "md-date-time-picker": "^2.2.0",
+    "chart.js": "2.5.0",
+    "md-date-time-picker": "2.2.0",
     "ng2-charts": "1.1.0",
     "moment": "2.15.1",
     "raphael": "^2.2.6",
-
     "ng2-translate": "2.5.0",
-    "alfresco-js-api": "^0.4.0",
-    "ng2-alfresco-core": "0.4.0",
-    "ng2-activiti-diagrams": "0.4.0",
-    "ng2-activiti-analytics": "^0.4.0"
+    "alfresco-js-api": "~1.4.0",
+    "ng2-alfresco-core": "1.4.0",
+    "ng2-activiti-diagrams": "1.4.0",
+    "ng2-activiti-analytics": "1.4.0"
   },
   "devDependencies": {
-    "@types/node": "^6.0.42",
-    "@types/core-js": "^0.9.32",
     "@types/jasmine": "^2.2.33",
+    "@types/node": "^6.0.42",
     "concurrently": "^2.2.0",
     "rimraf": "2.5.2",
     "tslint": "^3.8.1",

ng2-components/ng2-activiti-analytics/demo/src/main.ts

@@ -18,49 +18,49 @@
 import { NgModule, Component, OnInit } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
+import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService, StorageService, LogService } from 'ng2-alfresco-core';
 import { AnalyticsModule } from 'ng2-activiti-analytics';
 
 @Component({
     selector: 'alfresco-app-demo',
     template: `
-    <label for="ticket"><b>Insert a valid ticket:</b></label><br>
-    <input id="ticket" type="text" size="48" (change)="updateTicket()" [(ngModel)]="ticket"><br>
-    <label for="host"><b>Insert the ip of your Activiti instance:</b></label><br>
-    <input id="host" type="text" size="48" (change)="updateHost()" [(ngModel)]="host"><br><br>
-    <div *ngIf="!authenticated" style="color:#FF2323">
-        Authentication failed to ip {{ host }} with user: admin, admin, you can still try to add a valid ticket to perform
-        operations.
-    </div>
-    <hr>
+        <label for="ticket"><b>Insert a valid ticket:</b></label><br>
+        <input id="ticket" type="text" size="48" (change)="updateTicket()" [(ngModel)]="ticket"><br>
+        <label for="host"><b>Insert the ip of your Activiti instance:</b></label><br>
+        <input id="host" type="text" size="48" (change)="updateHost()" [(ngModel)]="host"><br><br>
+        <div *ngIf="!authenticated" style="color:#FF2323">
+            Authentication failed to ip {{ host }} with user: admin, admin, you can still try to add a valid ticket to perform
+            operations.
+        </div>
+        <hr>
 
-    <div class="page-content">
-        <label for="appId"><b>Insert the appId:</b></label><br>
-        <input id="appId" size="10" type="text" [(ngModel)]="appId">
-        <div class="mdl-grid">
-            <div class="mdl-cell mdl-cell--4-col task-column mdl-shadow--2dp">
-                <analytics-report-list (reportClick)="onReportClick($event)"></analytics-report-list>
-            </div>
-            <div class="mdl-cell mdl-cell--8-col task-column mdl-shadow--2dp">
-                <activiti-analytics [appId]="appId" *ngIf="report" [reportId]="report.id"></activiti-analytics>
+        <div class="page-content">
+            <label for="appId"><b>Insert the appId:</b></label><br>
+            <input id="appId" size="10" type="text" [(ngModel)]="appId">
+            <div class="mdl-grid">
+                <div class="mdl-cell mdl-cell--4-col task-column mdl-shadow--2dp">
+                    <analytics-report-list (reportClick)="onReportClick($event)"></analytics-report-list>
+                </div>
+                <div class="mdl-cell mdl-cell--8-col task-column mdl-shadow--2dp">
+                    <activiti-analytics [appId]="appId" *ngIf="report" [reportId]="report.id"></activiti-analytics>
+                </div>
             </div>
         </div>
-    </div>`
+    `
 })
 
 export class AnalyticsDemoComponent implements OnInit {
 
     appId: number;
-
     report: any;
-
     authenticated: boolean;
-
     host: string = 'http://localhost:9999';
-
     ticket: string;
 
-    constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
+    constructor(private authService: AlfrescoAuthenticationService,
+                private settingsService: AlfrescoSettingsService,
+                private storage: StorageService,
+                private logService: LogService) {
         settingsService.bpmHost = this.host;
         settingsService.setProviders('BPM');
 
@@ -74,7 +74,7 @@ export class AnalyticsDemoComponent implements OnInit {
     }
 
     public updateTicket(): void {
-        localStorage.setItem('ticket-BPM', this.ticket);
+        this.storage.setItem('ticket-BPM', this.ticket);
     }
 
     public updateHost(): void {
@@ -89,12 +89,12 @@ export class AnalyticsDemoComponent implements OnInit {
     login() {
         this.authService.login('admin', 'admin').subscribe(
             ticket => {
-                console.log(ticket);
+                this.logService.log(ticket);
                 this.ticket = this.authService.getTicketBpm();
                 this.authenticated = true;
             },
             error => {
-                console.log(error);
+                this.logService.error(error);
                 this.authenticated = false;
             });
     }

ng2-components/ng2-activiti-analytics/demo/systemjs.config.js

@@ -11,7 +11,7 @@
         // map tells the System loader where to look for things
         map: {
             // our app is within the app folder
-            app: 'dist',
+            app: 'src',
             // angular bundles
             '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
             '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
@@ -21,15 +21,17 @@
             '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
             '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
             '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+            '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
+
             // other libraries
             'rxjs': 'npm:rxjs',
             'moment': 'npm:moment/min/moment.min.js',
             'ng2-charts': 'npm:ng2-charts',
             'ng2-translate': 'npm:ng2-translate',
             'alfresco-js-api': 'npm:alfresco-js-api/dist',
-            'ng2-alfresco-core': 'npm:ng2-alfresco-core/dist',
-            'ng2-activiti-diagrams': 'npm:ng2-activiti-diagrams/dist',
-            'ng2-activiti-analytics': 'npm:ng2-activiti-analytics/dist'
+            'ng2-alfresco-core': 'npm:ng2-alfresco-core',
+            'ng2-activiti-diagrams': 'npm:ng2-activiti-diagrams',
+            'ng2-activiti-analytics': 'npm:ng2-activiti-analytics'
         },
         // packages tells the System loader how to load when no filename and/or no extension
         packages: {
@@ -40,6 +42,7 @@
             rxjs: {
                 defaultExtension: 'js'
             },
+            'moment': 'npm:moment/min/moment.min.js',
             'ng2-translate': { defaultExtension: 'js' },
             'ng2-charts': { main: 'ng2-charts.js', defaultExtension: 'js'},
             'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},

ng2-components/ng2-activiti-analytics/demo/tsconfig.json

@@ -3,11 +3,10 @@
         "target": "es5",
         "module": "commonjs",
         "moduleResolution": "node",
+        "sourceMap": true,
         "emitDecoratorMetadata": true,
         "experimentalDecorators": true,
-        "sourceMap": true,
-        "removeComments": true,
-        "declaration": true,
+        "skipLibCheck": true,
         "noLib": false,
         "allowUnreachableCode": false,
         "allowUnusedLabels": false,
@@ -15,12 +14,19 @@
         "noImplicitReturns": false,
         "noImplicitUseStrict": false,
         "noFallthroughCasesInSwitch": true,
-        "outDir": "dist",
-        "types": ["core-js", "jasmine", "node"]
+        "removeComments": true,
+        "declaration": true,
+        "lib": [
+            "es2015",
+            "dom"
+        ],
+        "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
-        "demo",
-        "node_modules",
-        "dist"
-    ]
+        "node_modules"
+    ],
+    "angularCompilerOptions": {
+        "strictMetadataEmit": false,
+        "skipTemplateCodegen": true
+    }
 }