allow showing viewer based on only node id (#2257)

provides and toggles placeholder for the info drawer within the dialog

.github/ISSUE_TEMPLATE.md

@@ -6,16 +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. -->
+
+> - [ ] New feature request
+> - [ ] Bug  
+> - [ ] Support request
+> - [ ] 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,7 +1,8 @@
 **Please check if the PR fulfills these requirements**
-- [ ] The commit message follows our [guidelines](https://github.com/Alfresco/alfresco-ng2-components/wiki/Commit-format)
-- [ ] Tests for the changes have been added (for bug fixes / features)
-- [ ] Docs have been added / updated (for bug fixes / features)
+
+> - [ ] The commit message follows our [guidelines](https://github.com/Alfresco/alfresco-ng2-components/wiki/Commit-format)
+> - [ ] Tests for the changes have been added (for bug fixes / features)
+> - [ ] Docs have been added / updated (for bug fixes / features)
 
 <!--
  Before submitting your PR, please check that your code follows our contribution guidelines:
@@ -9,30 +10,30 @@
  -->
 
 **What kind of change does this PR introduce?** (check one with "x")
-```
-[ ] Bugfix
-[ ] Feature
-[ ] Code style update (formatting, local variables)
-[ ] Refactoring (no functional changes, no api changes)
-[ ] Build related changes
-[ ] Documentation
-[ ] Other... Please describe:
-```
 
-**What is the current behavior?** (You can also link to an open issue here)
+> - [ ] Bugfix
+> - [ ] Feature
+> - [ ] Code style update (formatting, local variables)
+> - [ ] Refactoring (no functional changes, no api changes)
+> - [ ] Build related changes
+> - [ ] Documentation
+> - [ ] Other... Please describe:
+
+
+**What is the current behaviour?** (You can also link to an open issue here)
 
 
 
-**What is the new behavior?**
+**What is the new behaviour?**
 
 
 
 **Does this PR introduce a breaking change?** (check one with "x")
-```
-[ ] Yes
-[ ] No
-```
+
+> - [ ] Yes
+> - [ ] No
+
 
 If this PR contains a breaking change, please describe the impact and migration path for existing applications: ...
 
-**Other information**:
+**Other information**:

.gitignore

@@ -3,8 +3,17 @@ node_modules
 workspace.xml
 .idea/
 dist/
+ng2-components/coverage/
 !systemjs.config.js
 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/
+/ng2-components/config/coverage/
+*.npmrc
+/demo-shell-ng2/ng2-components/
+.happypack/
+.happypack/
+.history

.travis.yml

@@ -1,12 +1,8 @@
 language: node_js
 dist: trusty
 sudo: false
-
 node_js:
-  - "5"
-
-addons:
-
+  - "8"
 
 before_install:
   - "export DISPLAY=:99.0"
@@ -14,65 +10,41 @@ before_install:
 
 env:
   matrix:
-    - MODULE=ng2-alfresco-core
-    - MODULE=ng2-alfresco-datatable
-    - MODULE=ng2-alfresco-documentlist
-    - MODULE=ng2-alfresco-login
-    - MODULE=ng2-alfresco-search
-    - MODULE=ng2-alfresco-upload
-    - MODULE=ng2-alfresco-viewer
-    - MODULE=ng2-alfresco-webscript
-    - MODULE=ng2-alfresco-tag
-    - MODULE=ng2-activiti-form
-    - MODULE=ng2-activiti-tasklist
-    - MODULE=ng2-activiti-processlist
-    - MODULE=ng2-activiti-diagrams
-    - MODULE=ng2-activiti-analytics
-    - MODULE=ng2-alfresco-userinfo
+    - MODULE=ng2-components-alfresco
+    - MODULE=ng2-components-activiti
+    - MODULE=ng2-demo-shell
 
-before_script:
-  - if ([ "$MODULE" != "ng2-alfresco-core" ]); then
-        (cd ng2-components/ng2-alfresco-core; if [ ! -d "dist" ]; then npm install; fi; npm link);
-    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; if [ ! -d "dist" ]; then npm install; fi; npm link);
-    fi
-  - if ([ "$MODULE" == "ng2-activiti-tasklist" ] || [ "$MODULE" == "ng2-activiti-processlist" ]); then
-        (cd ng2-components/ng2-activiti-form; npm link ng2-alfresco-core; if [ ! -d "dist" ]; then npm install; fi; npm link);
-    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; if [ ! -d "dist" ]; then npm install; fi; npm link);
-    fi
-  - if ([ "$MODULE" == "ng2-activiti-analytics" ]); then
-        (cd ng2-components/ng2-activiti-diagrams; npm link ng2-alfresco-core; if [ ! -d "dist" ]; then npm install; fi; npm link);
-    fi
-  - cd ng2-components/$MODULE;
-  - npm run travis;
-  - npm install;
-script: npm run test
-# Send coverage data to Coveralls
+install:
+    - if ([ "$MODULE" == "ng2-components-alfresco" -o  "$MODULE" == "ng2-components-activiti" ]); then
+        if ([ "$TRAVIS_BRANCH" = "master" ]); then
+            (./scripts/npm-build-all.sh  || exit 1;);
+        else
+            (./scripts/npm-build-all.sh  -gitjsapi development || exit 1;);
+        fi
+      fi
+
+script:
+    - if ([ "$MODULE" == "ng2-components-activiti" ]); then
+            (./scripts/npm-build-all.sh -si -sb -t "ng2-activiti*" || exit 1;);
+      fi
+    - if ([ "$MODULE" == "ng2-components-alfresco" ]); then
+            (./scripts/npm-build-all.sh -si -sb -t "ng2-alfresco*" || exit 1;);
+      fi
+    - if ([ "$MODULE" == "ng2-demo-shell" ]); then
+       if ([ "$TRAVIS_BRANCH" = "master" ]); then
+            (./scripts/start.sh -t -ss || exit 1;);
+       else
+            (./scripts/start.sh -dev -t -ss -gitjsapi development || exit 1;);
+       fi
+      fi
+
+# Send coverage data to codecov
 after_success:
-   - if ([ "$TRAVIS_BRANCH" == "development" ] || [ "$TRAVIS_BRANCH" == "master" ]); then
-         bash <(curl -s https://codecov.io/bash)
-    fi
+  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
-  - ng2-components/ng2-activiti-tasklist/node_modules
-  - ng2-components/ng2-alfresco-core/node_modules
-  - ng2-components/ng2-alfresco-datatable/node_modules
-  - ng2-components/ng2-alfresco-documentlist/node_modules
-  - ng2-components/ng2-alfresco-login/node_modules
-  - ng2-components/ng2-alfresco-search/node_modules
-  - ng2-components/ng2-alfresco-upload/node_modules
-  - ng2-components/ng2-alfresco-viewer/node_modules
-  - ng2-components/ng2-alfresco-webscript/node_modules
-  - ng2-components/ng2-alfresco-tag/node_modules
-  - ng2-components/ng2-activiti-analytics/node_modules
-  - ng2-components/ng2-alfresco-userinfo/node_modules
-  - ng2-components/ng2-activiti-diagrams/node_modules
+  - ng2-components/node_modules

.vscode/settings.json

@@ -5,7 +5,19 @@
         "**/.svn": true,
         "**/.hg": true,
         "**/.DS_Store": true,
-        "**/*.js": { "when": "$(basename).ts"},
-        "**/*.js.map": { "when": "$(basename)"}
+        "**/coverage": true,
+        "**/.happypack": true
+    },
+    "editor.renderIndentGuides": true,
+    "tslint.configFile": "ng2-components/tslint.json",
+    "markdownlint.config": {
+        "MD032": false,
+        "MD004": false,
+        "MD024": false,
+        "MD009": false,
+        "MD013": false,
+        "MD036": false,
+        "MD033" : false,
+        "MD031" : false
     }
 }

ALFRESCOCORS.md

@@ -0,0 +1,204 @@
+### CORS solving strategies
+
+The web client that we are building with the application development framework will be loaded from a different web server than the Alfresco Platform is running on.
+So we need to tell the Alfresco server that any request that comes in from this custom web client should be allowed access 
+to the Content Repository. This is done by enabling CORS.
+
+If you are experiencing this kind of problem, see  **one of the following**:
+
+1. [Configure Webpack Proxy](#configure-webpack-proxy) 
+2. [Configure angular-cli Proxy](#configure-angular-cli-proxy)
+3. [Configure nginx proxy](#configure-nginx-proxy)
+4. [Enable CORS in CS and PS](#configure-webpack-proxy)
+
+# Configure Webpack Proxy
+
+If you are using a project created with the [Yeoman Generator](https://github.com/Alfresco/generator-ng2-alfresco-app) or the demo shell >=1.6.0, you have already out of the box in your `config/webpack.common.js` the following configuration. 
+Say we have an app running on http://localhost:3000/ and we want to redirect all calls with the following strategy:
+
+* Content Service http://localhost:8080/  redirect to -> http://localhost:3000/ecm/ 
+* Process Service http://localhost:9999/  redirect to -> http://localhost:3000/bpm/ 
+
+Open the `config/webpack.common.js` file, find the `devServer`  section and add the content:
+
+```javascript
+devServer: {
+        contentBase: helpers.root('dist'),
+        compress: true,
+        port: 3000,
+        historyApiFallback: true,
+        host: '0.0.0.0',
+        inline: true,
+        proxy: {
+            '/ecm': {
+                target: {
+                    host: "0.0.0.0",
+                    protocol: 'http:',
+                    port: 8080
+                },
+                pathRewrite: {
+                    '^/ecm': ''
+                }
+            },
+            '/bpm': {
+                target: {
+                    host: "0.0.0.0",
+                    protocol: 'http:',
+                    port: 9999
+                },
+                pathRewrite: {
+                    '^/bpm': ''
+                }
+            }
+        }
+    },
+```
+
+Notes:
+- With different configuration of webpack the `devServer` properties could be in other webpack files. Search in your configuration files
+
+- If you are running the App, Content Service or Process Service on different ports change the ports accordingly in your local configuration.
+For further details about how to configure a webpack proxy please refer to the [official documentation](https://webpack.js.org/configuration/dev-server/#devserver-proxy).
+
+# Configure angular-cli Proxy
+Say we have an app running on http://localhost:3000/ and we want to redirect all the calls with the following strategy:
+
+* Content Service http://localhost:8080/  redirect to -> http://localhost:3000/ecm/ 
+* Process Service http://localhost:9999/  redirect to -> http://localhost:3000/bpm/ 
+
+Create a file next to project's `package.json`, call it `proxy.conf.json` and add the following content:
+
+```javascript
+{
+    '/ecm': {
+                target: {
+                    host: "0.0.0.0",
+                    protocol: 'http:',
+                    port: 8080
+                },
+                pathRewrite: {
+                    '^/ecm': ''
+                }
+            },
+    '/bpm': {
+                target: {
+                    host: "0.0.0.0",
+                    protocol: 'http:',
+                    port: 9999
+                },
+                pathRewrite: {
+                    '^/bpm': ''
+                }
+            }
+}
+```
+
+Note if you are running the App, Content Service or Process Service on different ports change the ports accordingly in your local configuration.
+For further details about how to configure a webpack proxy please refer to the [official documentation](https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md).
+
+
+# Configure nginx proxy
+
+## Installing nginx
+
+Most Linux distributions will come with nginx available to install via your
+package manager and on Mac OS you can use [Homebrew](http://brew.sh/).
+
+If you want to install manually however, you can follow the instructions on the
+[download page](http://nginx.org/en/download.html). See also the specific information for
+[windows users](http://nginx.org/en/docs/windows.html).
+
+### Start nginx
+
+Start nginx using the supplied configuration in [nginx.conf](nginx.conf)
+
+    nginx -c nginx.conf
+
+### Review nginx configuration
+
+To correctly configure nginx use the following file [nginx.conf](/nginx.conf).
+This will host Activiti, Alfresco and the app dev framework under the same origin.
+
+* ECM : http://localhost:8888/alfresco/
+* BPM : http://localhost:8888/activiti/
+
+To make everything work, you should change the address of the ECM and BPM. In the demo app you can do that by clicking on the top right settings menu and change the bottom left options: *ECM host* and *BPM host*.
+
+This configuration assumes a few things:
+
+* Port mapping:
+  * nginx entry point: 0.0.0.0:8888
+  * Demo Shell: localhost:3000
+  * Alfresco: localhost:8080
+  * Activiti: localhost:9999
+
+All those values can be modified at their respective `location` directive on the [nginx.conf](/nginx.conf) file.
+
+If you want to know more on how to install and configure nginx to work with the Application Development Framework, information can be found [here](https://community.alfresco.com/community/application-development-framework/blog/2016/09/28/adf-development-set-up-with-nginx-proxy)
+
+
+# Enable CORS in CS and PS
+
+If you want to completely enable CORS calls on your Content Service and Process Service, please refer to the following Alfresco documents:
+
+* [Enable Cross Origin Resource Sharing (CORS) in Alfresco Process Services](http://docs.alfresco.com/process-services1.6/topics/enabling-cors.html)
+
+* Enable Cross Origin Resource Sharing (CORS) in Alfresco Content Services 
+
+This is the easiest way, add the [enablecors](https://artifacts.alfresco.com/nexus/service/local/repositories/releases/content/org/alfresco/enablecors/1.0/enablecors-1.0.jar) 
+platform module JAR to the *$ALF_INSTALL_DIR/modules/platform* directory and restart the server.
+
+Note. by default, the CORS filter that is enabled will allow any origin.
+ 
+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>
+```

BROWSER-SUPPORT.md

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

CONTRIBUTING.md

@@ -0,0 +1,78 @@
+# Contributing to ADF 
+
+- [Library Contents](#submitting-a-pull-request-pr)
+- [Code style](#code-style)
+- [Test guide](#test-guide)
+
+## Submitting a Pull Request (PR)
+
+Before you submit please follow the steps below: 
+
+* Search in  [GitHub PR](https://github.com/Alfresco/alfresco-ng2-components/pulls) for an open or closed PR
+  that could solve or already solves your issue.
+* Search in the [GitHub release history](https://github.com/Alfresco/alfresco-ng2-components/releases) if your
+  issue has already been solved in a new version of ADF.
+* Fork our repository - [if you don't know how to do it read this GitHub document](https://help.github.com/articles/creating-a-pull-request-from-a-fork/)
+* Make your changes in a new git branch starting from development and following the [naming convention](https://github.com/Alfresco/alfresco-ng2-components/wiki/Branching-Strategy)
+
+     ```shell
+     git checkout -b dev-{developerName}-{GitIssuedId/JiraIssueId} development
+     ```
+
+* Create your PR **including appropriate test cases** following the [code contribution acceptance criteria](https://github.com/Alfresco/alfresco-ng2-components/wiki/Code-contribution-acceptance-criteria)
+* Run the tests and make sure they are green. Please don't comment out or exclude the already existing tests
+* Commit your change using the [commit format message good practice](https://github.com/Alfresco/alfresco-ng2-components/wiki/Commit-format)
+* Push your branch to GitHub:
+
+    ```shell
+    git push origin dev-{developerName}-{GitIssuedId/JiraIssueId}
+    ```
+
+* In GitHub, send a pull request to `development`.
+* If we suggest changes then:
+  * Make the required updates.
+  * Re-run the tests.
+  * Rebase your branch and force push to your GitHub repository (this will update your Pull Request):
+
+    ```shell
+    git fetch development
+    git checkout dev-my-branch
+    git rebase development -i
+    git push -f
+    ```
+Note: If you need more information about how to sync your fork, see [here](https://help.github.com/articles/syncing-a-fork/)
+
+## Code style
+
+The code style in the ADF code follows the [Angular style guide](https://angular.io/guide/styleguide) plus some internal rules.
+You don’t have to worry too much about those rules because they are automatically checked by tslint/codelyzer/adf-rules.
+If your code is not compliant to one of these rules you will receive an error when you build the project with some help on how to fix it.
+The ADF-Rules :
+* File name component/directive cannot start with Alfresco/Activiti/adf - this rule is to help developers find files easily
+* Class names cannot start with Alfresco/Activiti/adf for the same reason as above
+* scss is mandatory. All the classes need to have the adf- prefix
+
+## Test guide
+In ADF we are encouraging the use of behavior-driven development (BDD)
+
+### General guidelines
+
+* Class selector in all the tests is not suggested. Use of the element ID is preferred
+* Any test case should test only one behavior
+* Use of the Angular [testBed](https://angular.io/guide/testing#testbed) is highly recommended 
+
+### File name
+
+* The file name specification as to be the same of the component/service/pipe it test plus the .spec. suffix
+* The specification file has to be in the same folder of the component/service/pipe it test
+
+### Describer Name
+
+* The Main describer of the test should be the name of the class under test
+* The sub describe is used for grouping related behavior test. Do not over use it 
+
+### Test Name
+
+Any test should follow the naming convetion:
+
+[Should] [ ***Expected Behavior** ] [when/after/before] [ ***State Under Test*** ].

INTRODUCTION.md

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

PREREQUISITES.md

@@ -2,12 +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.
-- [Download and install Activiti](https://www.alfresco.com/products/bpm/alfresco-activiti/trial)
+- An Alfresco Platform Repository (version [201609 Early Access](https://community.alfresco.com/docs/DOC-6372-alfresco-community-edition-file-list-201609-ea) or newer) 
+- [Download and install the process service](https://www.alfresco.com/products/bpm/alfresco-activiti/trial)
 - [Node.js](https://nodejs.org/en/) JavaScript runtime.
 - [npm](https://www.npmjs.com/) package manager for JavaScript.
-- local nginx proxy to avoid cross-origin browser restrictions (see below)
-- (If you use ECM and BPM together) Make sure your user has the same username and password in both system
+- (If you use CS and PS together) Make sure your user has the same username and password in both system
+- [If you are experiencing CORS problem read this guide](/ALFRESCOCORS.md)
 
 *Note: Default username for activiti is "admin@app.activiti.com" and "admin" for Alfresco, and also the default password are different. Change them to be equal.*
 
@@ -25,40 +25,3 @@ Make sure the Node.js version is > 5:
 $ node -v
 v5.12.0
 ```
-
-## Installing nginx
-
-Most Linux distributions will come with nginx available to install via your
-package manager and on Mac OS you can use [Homebrew](http://brew.sh/).
-
-If you want to install manually however you can follow the instructions on the
-[download page](http://nginx.org/en/download.html). See also the specific information for
-[windows users](http://nginx.org/en/docs/windows.html).
-
-### Start nginx
-
-Start nginx using the supplied configuration in [nginx.conf](nginx.conf)
-
-    nginx -c nginx.conf
-
-### Review nginx configuration
-
-To correctly configure nginx use the following file [nginx.conf](/nginx.conf).
-This will host Activiti, Alfresco and the app dev framework under the same origin.
-
-* ECM : http://localhost:8888/alfresco/
-* BPM : http://localhost:8888/activiti/
-
-To make everything work, you have to change the address of the ECM and BPM. In the demo app you can do that clicking on the top right settings menu and changing the bottom left options: *ECM host* and *BPM host*.
-
-This configuration assumes few things:
-
-* Port mapping:
-  * nginx entry point: 0.0.0.0:8888
-  * Demo Shell: locathost:3000
-  * Alfresco: locathost:8080
-  * Activiti: locathost:9999
-
-All those values can be modified at their respective `location` directive on the [nginx.conf](/nginx.conf) file.
-
-If you want to know more on how to install and configure nginx to work with the Application Development Framework can be found [here](https://community.alfresco.com/community/application-development-framework/blog/2016/09/28/adf-development-set-up-with-nginx-proxy)

README.md

@@ -1,4 +1,4 @@
-# ALFRESCO ANGULAR 2 COMPONENTS
+# ALFRESCO ANGULAR COMPONENTS
 
 [![Join the chat at https://gitter.im/Alfresco/alfresco-ng2-components](https://badges.gitter.im/Alfresco/alfresco-ng2-components.svg)](https://gitter.im/Alfresco/alfresco-ng2-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
@@ -17,27 +17,6 @@
   <a href='https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE'>
      <img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
   </a>
-  <a href='https://www.alfresco.com/'>
-     <img src='https://img.shields.io/badge/style-component-green.svg?label=alfresco' alt='alfresco component' />
-  </a>
-  <a href='https://angular.io/'>
-     <img src='https://img.shields.io/badge/style-2-red.svg?label=angular' alt='angular 2' />
-  </a>
-  <a href='https://www.typescriptlang.org/docs/tutorial.html'>
-     <img src='https://img.shields.io/badge/style-lang-blue.svg?label=typescript' alt='typescript' />
-  </a>
-  <a href='https://www.alfresco.com/'>
-     <img src='https://img.shields.io/badge/style-%3E5.0.0-blue.svg?label=node%20version' alt='node version' />
-  </a>
-</p>
-  
-<p align="center">
-  <img title="alfresco" alt='alfresco' src='assets/alfresco.png'  width="280px" height="150px"></img>
-  <img title="angular2" alt='angular2' src='assets/angular2.png'  width="150px" height="150px"></img>    
-</p>
-
-<p align="center">
-  <img title="browser stack" alt='browser stack' src='assets/browserstack.png'  width="350px" height="225px"></img>
 </p>
 
 ## Introduction
@@ -56,6 +35,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. 
@@ -87,7 +72,7 @@ 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 following browsers:
@@ -100,6 +85,6 @@ All components are supported in the following 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 [Firefox known issue](https://bugzilla.mozilla.org/show_bug.cgi?id=1188880), the Alfresco Upload Component does not currently support folder upload functionality on Firefox.    
 
-Please refer to [Browser Support](BROWSER-SUPPORT.md) article for more details. 
+Please refer to the [Browser Support](BROWSER-SUPPORT.md) article for more details. 

adf-rules/adfClassNameRule.js

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

adf-rules/adfClassNameRule.ts

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

adf-rules/adfFileNameRule.js

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

adf-rules/adfFileNameRule.ts

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

adf-rules/index.js

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

adf-rules/index.ts

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

adf-rules/package.json

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

adf-rules/tsconfig.json

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

adf-rules/tslint.json

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

appveyor.yml

@@ -2,75 +2,40 @@
 branches:
   only:
     - master
+    - development
+    - dev-build-test
 
 environment:
-  nodejs_version: "5"
+  nodejs_version: "8"
 
   matrix:
-  - COMPONENT_NAME: ng2-alfresco-core
-  - COMPONENT_NAME: ng2-alfresco-datatable
-  - COMPONENT_NAME: ng2-alfresco-documentlist
-  - COMPONENT_NAME: ng2-alfresco-login
-  - COMPONENT_NAME: ng2-alfresco-search
-  - COMPONENT_NAME: ng2-alfresco-upload
-  - COMPONENT_NAME: ng2-alfresco-viewer
-  - COMPONENT_NAME: ng2-alfresco-tag
-  - COMPONENT_NAME: ng2-alfresco-webscript
-  - COMPONENT_NAME: ng2-activiti-form
-  - COMPONENT_NAME: ng2-activiti-tasklist
-  - COMPONENT_NAME: ng2-activiti-processlist
-  - COMPONENT_NAME: ng2-activiti-diagrams
-  - COMPONENT_NAME: ng2-activiti-analytics
-  - COMPONENT_NAME: ng2-alfresco-userinfo
+  - COMPONENT_NAME: ng2-components-activiti
+  - COMPONENT_NAME: ng2-components-alfresco
+  - COMPONENT_NAME: ng2-demo-shell
 
 # Install scripts. (runs after repo cloning)
 install:
   # Get the latest stable version of Node.js or io.js
   - ps: Install-Product node $env:nodejs_version
   # install module
-  - IF %COMPONENT_NAME% 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% EQU ng2-activiti-analytics (cd ng2-components/ng2-activiti-diagrams && npm link link ng2-alfresco-core && npm install && npm link && 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-activiti-diagrams)
-  - npm install
-
-# Post-install test scripts.
-test_script:
-  # Output useful info for debugging.
-  - node --version
-  - npm --version
-  # run tests
-  - npm test
+  - if %COMPONENT_NAME% EQU ng2-components-activiti (
+              if %APPVEYOR_REPO_BRANCH EQU master
+                (cd scripts && sh npm-build-all.sh -t "ng2-activiti*"  || exit 1)
+              else
+                (cd scripts && sh npm-build-all.sh -t "ng2-activiti*" -gitjsapi development|| exit 1)
+    )
+  - if %COMPONENT_NAME% EQU ng2-components-alfresco (
+              if %APPVEYOR_REPO_BRANCH EQU master
+                (cd scripts && sh npm-build-all.sh -t "ng2-alfresco*"  || exit 1)
+              else
+                (cd scripts && sh npm-build-all.sh -t "ng2-alfresco*" -gitjsapi development|| exit 1)
+    )
+  - if %COMPONENT_NAME% EQU ng2-demo-shell (
+              if %APPVEYOR_REPO_BRANCH EQU master
+                (cd scripts && sh start.sh -t -ss || exit 1)
+              else
+                (cd scripts && sh start.sh -dev -t -ss -gitjsapi development|| exit 1)
+    )
 
 # Don't actually build.
 build: off
-
-cache:
-  - node_modules
-  - C:\projects\alfresco-ng2-components\ng2-components\ng2-activiti-form\node_modules
-  - C:\projects\alfresco-ng2-components\ng2-components\ng2-activiti-processlist\node_modules
-  - C:\projects\alfresco-ng2-components\ng2-components\ng2-activiti-tasklist\node_modules
-  - C:\projects\alfresco-ng2-components\ng2-components\ng2-alfresco-core\node_modules
-  - C:\projects\alfresco-ng2-components\ng2-components\ng2-alfresco-datatable\node_modules
-  - C:\projects\alfresco-ng2-components\ng2-components\ng2-alfresco-documentlist\node_modules
-  - C:\projects\alfresco-ng2-components\ng2-components\ng2-alfresco-login\node_modules
-  - C:\projects\alfresco-ng2-components\ng2-components\ng2-alfresco-search\node_modules
-  - C:\projects\alfresco-ng2-components\ng2-components\ng2-alfresco-upload\node_modules
-  - C:\projects\alfresco-ng2-components\ng2-components\ng2-alfresco-viewer\node_modules
-  - C:\projects\alfresco-ng2-components\ng2-components\ng2-alfresco-webscript\node_modules
-  - C:\projects\alfresco-ng2-components\ng2-components\ng2-alfresco-tag\node_modules
-  - C:\projects\alfresco-ng2-components\ng2-components\ng2-activiti-analytics\node_modules
-  - C:\projects\alfresco-ng2-components\ng2-components\ng2-alfresco-userinfo\node_modules
-  - C:\projects\alfresco-ng2-components\ng2-components\ng2-activiti-diagrams\node_modules

demo-shell-ng2/.gitignore

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

demo-shell-ng2/README.md

@@ -1,64 +1,101 @@
 
-<h1 align="center">Alfresco Angular 2 Components</h1>
-<p align="center">
-  <img title="alfresco" alt='alfresco' src='../assets/alfresco.png'  width="280px" height="150px" ></img>
-  <img title="angular2" alt='angular2' src='../assets/angular2.png'  width="150px" height="150px" ></img>
-</p>
-<p align="center">
-    <a href='https://github.com/mgechev/angular2-style-guide'>
-      <img src='https://mgechev.github.io/angular2-style-guide/images/badge.svg' alt='style' />
-    </a>
-</p>
+# ADF Demo Application
 
-### Node
-To correctly use this demo check that on your machine is running Node version 5.0.0 or higher.
+Please note that this application is not an official product, but a testing and demo application to showcase complex interactions of ADF components.
 
-#### Local build
+## Installing
 
-1 Install dependencies
+To correctly use this demo check that on your machine you have [Node](https://nodejs.org/en/) version 5.x.x or higher.
 
 ```sh
+git clone https://github.com/Alfresco/alfresco-ng2-components.git
+cd alfresco-ng2-components/demo-shell-ng2/
 npm install
 ```
 
-2 Fast build and watch for dev purposes
+## Proxy settings and CORS
+
+To simplify development and reduce the time to get the application started, we have the following Proxy settings:
+
+- **http://localhost:3000/ecm** is mapped to **http://localhost:8080**
+- **http://localhost:3000/bpm** is mapped to **http://localhost:9999**
+
+The settings above address most common scenarios for running ACS on port 8080 and APS on port 9999 and allow you to skip the CORS configuration.
+
+If you would like to change default proxy settings, please edit the `config/webpack.common.js` file.
+
+## Application settings (server-side)
+
+All server-side application settings are stored in the `app.config-dev.json` and `app.config-prod.json` files. 
+By default the configuration files have the content similar to the following one:
+
+```json
+{
+    "ecmHost": "http://localhost:3000/ecm",
+    "bpmHost": "http://localhost:3000/bpm",
+    "application": {
+        "name": "Alfresco"
+    }
+}
+```
+
+You can add any additional settings to the application configuration file if needed.
+
+Configuration files are picked based on environment settings (see `app.module.ts` for more details).
+
+```ts
+let appConfigFile = 'app.config-dev.json';
+if (process.env.ENV === 'production') {
+    appConfigFile = 'app.config-prod.json';
+}
+
+@NgModule({
+    imports: [
+        ...
+        CoreModule.forRoot({
+            appConfigFile: appConfigFile
+        }),
+        ...
+    ]
+})
+```
+
+## Development build
 
 ```sh
 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
 
-If you want to run the demo shell with the latest change from the development branch, use the following command from the /script folder:
+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 to your preferred web server.
+You should need no additional files outside the `dist` folder.
+
+### Important notes
+
+By default demo application is configured to use [wsrv](https://www.npmjs.com/package/wsrv) tool (lightweight web server)
+to serve production build output. It will be running at `0.0.0.0` address with port `3000` and allow you to access your application
+via network. However, you can use any web server of your choice in production.
+
+## Development branch build
+
+If you want to run the demo shell with the latest changes from the development branch, use the following command from the /script folder:
 
 ```sh
 ./npm-clean.sh
 ./start-linked.sh -install
-```
-
-###Multi-language
-To support a new language you need to create your language file (.json) and add it to `i18n/` folder.
-
-```json
-{
-        "username" : "Username",
-        "input-required-message": "Required",
-        "input-min-message": "Your username needs to be at least 4 characters.",
-        "login-button": "Login"
-}
-```
-
-Directory structure:
-```
-.
-├── i18n/
-│   ├── en.json
-│   ├── it.json
-│   └── fr.json
-```
-
-
+```

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.config-dev.json

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

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

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

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

@@ -1,17 +0,0 @@
-@media only screen and (max-width: 640px) {
-    .mdl-layout__header.header-search-expanded .mdl-layout-title {
-        display: none;
-    }
-}
-
-.mdl-layout-title {
-    font-size: 17px;
-}
-
-.user-profile {
-    margin-right: 10px;
-}
-
-.mdl-button-padding {
-    padding-left: 20px;
-}

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

@@ -1,86 +1,80 @@
-<!-- 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">
+<md-toolbar color="primary" *ngIf="!isAPageWithHeaderBar()">
+    <ng2-alfresco-userinfo
+        class="user-profile"
+        [menuPositionX]="'before'"
+        [menuPositionY]="'above'">
+    </ng2-alfresco-userinfo>
 
+    <span>ADF Demo Application</span>
 
-                <ng2-alfresco-userinfo class="user-profile" [menuOpenType]="left">
-                </ng2-alfresco-userinfo>
+    <div class="app-menu--spacer"></div>
 
+    <search-bar (expand)="onToggleSearch($event)"></search-bar>
 
-                <!-- Title -->
-                <span class="mdl-layout-title">Demo Application</span>
-                <!-- Add spacer, to align navigation to the right -->
-                <div class="mdl-layout-spacer"></div>
+    <a md-button data-automation-id="home" href="" routerLink="/">Home</a>
+    <a md-button data-automation-id="files" href="" routerLink="/files">Content Services</a>
+    <a md-button data-automation-id="activiti" href="" routerLink="/activiti">Process Services</a>
+    <a md-button data-automation-id="login" href="" routerLink="/login">Login</a>
 
-                <!-- Search bar -->
-                <search-bar (expand)="onToggleSearch($event)"></search-bar>
+    <theme-picker></theme-picker>
+    <button md-icon-button [mdMenuTriggerFor]="langMenu">
+        <md-icon>language</md-icon>
+    </button>
+    <md-menu #langMenu="mdMenu">
+        <button md-menu-item (click)="changeLanguage('en')">English</button>
+        <button md-menu-item (click)="changeLanguage('it')">Italian</button>
+        <button md-menu-item (click)="changeLanguage('ru')">Russian</button>
+    </md-menu>
 
-                <!-- 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>
+    <button md-icon-button [mdMenuTriggerFor]="appMenu">
+        <md-icon>more_vert</md-icon>
+    </button>
+    <md-menu #appMenu="mdMenu">
+        <a md-menu-item href="" routerLink="/dl-custom-sources">
+            <md-icon>extension</md-icon>
+            <span>DL: Custom Sources</span>
+        </a>
+        <a md-menu-item href="" routerLink="/datatable">
+            <md-icon>view_module</md-icon>
+            <span>DataTable</span>
+        </a>
+        <a md-menu-item href="" routerLink="/form">
+            <md-icon>poll</md-icon>
+            <span>Form</span>
+        </a>
+        <a md-menu-item href="" routerLink="/form-list">
+            <md-icon>library_books</md-icon>
+            <span>Form List</span>
+        </a>
+        <a md-menu-item href="" routerLink="/uploader">
+            <md-icon>file_upload</md-icon>
+            <span>Uploader</span>
+        </a>
+        <a md-menu-item href="" routerLink="/webscript">
+            <md-icon>extension</md-icon>
+            <span>Webscript</span>
+        </a>
+        <a md-menu-item href="" routerLink="/tag">
+            <md-icon>local_offer</md-icon>
+            <span>Tag</span>
+        </a>
+        <a md-menu-item href="" routerLink="/social">
+            <md-icon>thumb_up</md-icon>
+            <span>Social</span>
+        </a>
+        <a md-menu-item href="" routerLink="/settings">
+            <md-icon>settings</md-icon>
+            <span>Settings</span>
+        </a>
+        <a md-menu-item href="" routerLink="/about">
+            <md-icon>info_outline</md-icon>
+            <span>About</span>
+        </a>
+        <button md-menu-item (click)="onLogout($event)">
+            <md-icon>exit_to_app</md-icon>
+            <span>Logout</span>
+        </button>
+    </md-menu>
+</md-toolbar>
 
-                <!-- 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>
-            </nav>
-        </div>
-    </div>
-    <main class="mdl-layout__content">
-        <div class="page-content">
-            <router-outlet></router-outlet>
-        </div>
-    </main>
-</div>
+<router-outlet></router-outlet>

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

@@ -0,0 +1,25 @@
+.user-profile {
+    margin-right: 10px;
+}
+
+.app-menu--spacer {
+    flex: 1 1 auto;
+}
+
+.p-10 {
+    padding: 10px;
+}
+
+.m-10 {
+    margin: 10px;
+}
+
+._dialog_overlay {
+    position: static !important;
+}
+
+.md-simple-snackbar-action {
+    border: 0px;
+    cursor: pointer;
+}
+

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

@@ -15,74 +15,62 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { Router } from '@angular/router';
-
 import {
-    AlfrescoTranslationService,
     AlfrescoAuthenticationService,
-    AlfrescoSettingsService
+    AlfrescoSettingsService,
+    AlfrescoTranslationService,
+    LogService,
+    StorageService
 } from 'ng2-alfresco-core';
 
 declare var document: any;
 
 @Component({
-    selector: 'alfresco-app',
-    templateUrl: 'app/app.component.html',
-    styleUrls: ['app/app.component.css']
+    selector: 'adf-app',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.scss', './theme.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class AppComponent {
     searchTerm: string = '';
 
-    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) {
-        this.setEcmHost();
-        this.setBpmHost();
+    constructor(private authService: AlfrescoAuthenticationService,
+                private router: Router,
+                private settingsService: AlfrescoSettingsService,
+                private translateService: AlfrescoTranslationService,
+                private storage: StorageService,
+                private logService: LogService) {
         this.setProvider();
-
-        if (translate) {
-            translate.addTranslationFolder('custom', 'custom-translation/');
-            translate.addTranslationFolder('ng2-alfresco-login', 'custom-translation/alfresco-login');
-        }
     }
 
-    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']);
+    }
+
     onToggleSearch(event) {
         let expandedHeaderClass = 'header-search-expanded',
             header = document.querySelector('header');
@@ -94,35 +82,12 @@ export class AppComponent {
     }
 
     changeLanguage(lang: string) {
-        this.translate.use(lang);
-    }
-
-    hideDrawer() {
-        // todo: workaround for drawer closing
-        document.querySelector('.mdl-layout').MaterialLayout.toggleDrawer();
-    }
-
-    private setEcmHost() {
-        if (localStorage.getItem(`ecmHost`)) {
-            this.alfrescoSettingsService.ecmHost = localStorage.getItem(`ecmHost`);
-            this.ecmHost = localStorage.getItem(`ecmHost`);
-        } else {
-            this.alfrescoSettingsService.ecmHost = this.ecmHost;
-        }
-    }
-
-    private setBpmHost() {
-        if (localStorage.getItem(`bpmHost`)) {
-            this.alfrescoSettingsService.bpmHost = localStorage.getItem(`bpmHost`);
-            this.bpmHost = localStorage.getItem(`bpmHost`);
-        } else {
-            this.alfrescoSettingsService.bpmHost = this.bpmHost;
-        }
+        this.translateService.use(lang);
     }
 
     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

@@ -18,78 +18,125 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
-import { CoreModule } from 'ng2-alfresco-core';
-import { SearchModule } from 'ng2-alfresco-search';
-import { LoginModule } from 'ng2-alfresco-login';
+import { AnalyticsModule } from 'ng2-activiti-analytics';
+import { DiagramsModule } from 'ng2-activiti-diagrams';
+import { ActivitiFormModule } from 'ng2-activiti-form';
+import { ActivitiProcessListModule } from 'ng2-activiti-processlist';
+import { ActivitiTaskListModule } from 'ng2-activiti-tasklist';
+import { AppConfigService, CoreModule, TRANSLATION_PROVIDER } from 'ng2-alfresco-core';
 import { DataTableModule } from 'ng2-alfresco-datatable';
 import { DocumentListModule } from 'ng2-alfresco-documentlist';
-import { UploadModule } from 'ng2-alfresco-upload';
+import { LoginModule } from 'ng2-alfresco-login';
+import { SearchModule } from 'ng2-alfresco-search';
+import { SocialModule } from 'ng2-alfresco-social';
 import { TagModule } from 'ng2-alfresco-tag';
-import { WebScriptModule } from 'ng2-alfresco-webscript';
-import { ViewerModule } from 'ng2-alfresco-viewer';
-import { ActivitiFormModule } from 'ng2-activiti-form';
-import { ActivitiTaskListModule } from 'ng2-activiti-tasklist';
-import { ActivitiProcessListModule } from 'ng2-activiti-processlist';
+import { UploadModule } from 'ng2-alfresco-upload';
 import { UserInfoComponentModule } from 'ng2-alfresco-userinfo';
-import { AnalyticsModule } from 'ng2-activiti-analytics';
+import { ViewerModule } from 'ng2-alfresco-viewer';
+import { WebScriptModule } from 'ng2-alfresco-webscript';
 
+import { Editor3DModule } from 'ng2-3d-editor';
+import { ChartsModule } from 'ng2-charts';
 import { AppComponent } from './app.component';
 import { routing } from './app.routes';
 import { CustomEditorsModule } from './components/activiti/custom-editor/custom-editor.component';
+import { FormListDemoComponent } from './components/form/form-list-demo.component';
+import { ThemePickerModule } from './components/theme-picker/theme-picker';
+import { MaterialModule } from './material.module';
+import { DebugAppConfigService } from './services/debug-app-config.service';
+
+import { CustomSourcesComponent } from './components/files/custom-sources.component';
 
 import {
-    DataTableDemoComponent,
-    SearchComponent,
-    SearchBarComponent,
-    LoginDemoComponent,
-    ActivitiDemoComponent,
-    FormViewer,
-    WebscriptComponent,
-    TagComponent,
     AboutComponent,
+    ActivitiAppsViewComponent,
+    ActivitiDemoComponent,
+    ActivitiProcessAttachmentsComponent,
+    ActivitiShowDiagramComponent,
+    ActivitiTaskAttachmentsComponent,
+    DataTableDemoComponent,
     FilesComponent,
-    FormNodeViewer,
-    SettingComponent
+    FormDemoComponent,
+    FormNodeViewerComponent,
+    FormViewerComponent,
+    HomeComponent,
+    LoginDemoComponent,
+    SearchBarComponent,
+    SearchComponent,
+    SettingsComponent,
+    SocialComponent,
+    TagComponent,
+    WebscriptComponent
 } from './components/index';
 
+let appConfigFile = 'app.config-dev.json';
+if (process.env.ENV === 'production') {
+    appConfigFile = 'app.config-prod.json';
+}
+
 @NgModule({
     imports: [
         BrowserModule,
         routing,
-        CoreModule.forRoot(),
-        LoginModule,
+        CoreModule.forRoot({
+            appConfigFile: appConfigFile
+        }),
+        MaterialModule,
+        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(),
-        CustomEditorsModule
+        DiagramsModule.forRoot(),
+        CustomEditorsModule,
+        Editor3DModule.forRoot(),
+        ChartsModule,
+        ThemePickerModule
     ],
     declarations: [
         AppComponent,
-        SearchBarComponent,
+        HomeComponent,
         DataTableDemoComponent,
         SearchComponent,
         SearchBarComponent,
         LoginDemoComponent,
         ActivitiDemoComponent,
-        FormViewer,
+        ActivitiTaskAttachmentsComponent,
+        ActivitiProcessAttachmentsComponent,
+        ActivitiShowDiagramComponent,
+        ActivitiAppsViewComponent,
+        FormViewerComponent,
         WebscriptComponent,
         TagComponent,
+        SocialComponent,
         AboutComponent,
         FilesComponent,
-        FormNodeViewer,
-        SettingComponent
+        FormNodeViewerComponent,
+        SettingsComponent,
+        FormDemoComponent,
+        FormListDemoComponent,
+        CustomSourcesComponent
+    ],
+    providers: [
+        { provide: AppConfigService, useClass: DebugAppConfigService },
+        {
+            provide: TRANSLATION_PROVIDER,
+            multi: true,
+            useValue: {
+                name: 'app',
+                source: 'resources'
+            }
+        }
     ],
-    providers: [],
     bootstrap: [ AppComponent ]
 })
 export class AppModule { }
-

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

@@ -15,41 +15,137 @@
  * limitations under the License.
  */
 
-import { ModuleWithProviders }  from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import { ModuleWithProviders } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AuthGuard, AuthGuardBpm, AuthGuardEcm } from 'ng2-alfresco-core';
 
 import {
-    FilesComponent,
-    DataTableDemoComponent,
-    SearchComponent,
-    LoginDemoComponent,
-    ActivitiDemoComponent,
-    WebscriptComponent,
-    TagComponent,
     AboutComponent,
-    FormViewer,
-    FormNodeViewer,
-    SettingComponent
+    ActivitiAppsViewComponent,
+    ActivitiDemoComponent,
+    ActivitiShowDiagramComponent,
+    DataTableDemoComponent,
+    FilesComponent,
+    FormDemoComponent,
+    FormNodeViewerComponent,
+    FormViewerComponent,
+    HomeComponent,
+    LoginDemoComponent,
+    SearchComponent,
+    SettingsComponent,
+    SocialComponent,
+    TagComponent,
+    WebscriptComponent
 } from './components/index';
 
 import { UploadButtonComponent } from 'ng2-alfresco-upload';
+import { CustomSourcesComponent } from './components/files/custom-sources.component';
+import { FormListDemoComponent } from './components/form/form-list-demo.component';
 
 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: 'dl-custom-sources',
+        component: CustomSourcesComponent,
+        canActivate: [AuthGuardEcm]
+    },
+    {
+        path: 'datatable',
+        component: DataTableDemoComponent,
+        canActivate: [AuthGuard]
+    },
+    {
+        path: 'uploader',
+        component: UploadButtonComponent,
+        canActivate: [AuthGuardEcm]
+    },
+    {
+        path: 'search',
+        component: SearchComponent,
+        canActivate: [AuthGuardEcm]
+    },
+    {
+        path: 'activiti',
+        component: ActivitiAppsViewComponent,
+        canActivate: [AuthGuardBpm]
+    },
+    {
+        path: 'activiti/apps',
+        component: ActivitiAppsViewComponent,
+        canActivate: [AuthGuardBpm]
+    },
+    {
+        path: 'activiti/apps/:appId/tasks',
+        component: ActivitiDemoComponent,
+        canActivate: [AuthGuardBpm]
+    },
+    {
+        path: 'activiti/apps/:appId/processes',
+        component: ActivitiDemoComponent,
+        canActivate: [AuthGuardBpm]
+    },
+    {
+        path: 'activiti/apps/:appId/diagram/:processDefinitionId',
+        component: ActivitiShowDiagramComponent,
+        canActivate: [AuthGuardBpm]
+    },
+    // TODO: check if neeeded
+    {
+        path: 'activiti/appId/:appId',
+        component: ActivitiDemoComponent,
+        canActivate: [AuthGuardBpm]
+    },
+    // TODO: check if needed
+    {
+        path: 'activiti/tasks/:id',
+        component: FormViewerComponent,
+        canActivate: [AuthGuardBpm]
+    },
+    // TODO: check if needed
+    {
+        path: 'activiti/tasksnode/:id',
+        component: FormNodeViewerComponent,
+        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 }
+    { path: 'settings', component: SettingsComponent },
+    { path: 'form', component: FormDemoComponent },
+    { path: 'form-list', component: FormListDemoComponent }
 ];
 
 export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

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

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

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

@@ -1,4 +1,112 @@
-<div style="padding: 10px">
+<div class="about-container">
+    <h3>Server settings</h3>
+    <md-list>
+        <small>The values below are taken from the AppConfigService and loaded from the '{{ configFile }}' file.</small>
+        <md-list-item>
+            <h4 md-line> Alfresco Process Services URL: {{ bpmHost }}</h4>
+        </md-list-item>
+        <md-divider></md-divider>
+        <md-list-item>
+            <h4 md-line>Alfresco Content Services URL: {{ ecmHost }}</h4>
+        </md-list-item>
+    </md-list>
+
+    <h3>Product Versions</h3>
+    <div *ngIf="bpmVersion">
+        <h3>BPM</h3>
+        <label> Edition </label> {{ bpmVersion.edition }}
+        <p></p>
+        <table border="2" class="adf-table-version">
+            <tr>
+                <th>Major Version</th>
+                <th>Revision Version</th>
+                <th>Minor Version</th>
+                <th>Type</th>
+            </tr>
+            <tr style="align-items: center">
+                <td>{{ bpmVersion.majorVersion }}</td>
+                <td>{{ bpmVersion.revisionVersion }}</td>
+                <td>{{ bpmVersion.minorVersion }}</td>
+                <td>{{ bpmVersion.type }}</td>
+            </tr>
+        </table>
+    </div>
+    <div *ngIf="ecmVersion">
+        <h3>ECM</h3>
+        <label> Edition </label> {{ ecmVersion.edition }}
+        <p></p>
+        <label> Version </label> {{ ecmVersion.version.display }}
+        <p></p>
+        <h4>License</h4>
+        <table border="2" class="adf-table-version">
+            <tr>
+                <th> Issued At </th>
+                <th> Expires At </th>
+                <th> Remaining Days </th>
+                <th> Holder </th>
+                <th> Mode </th>
+                <th> Is Cluster Enabled </th>
+                <th> Is Cryptodoc Enable </th>
+            </tr>
+            <tr style="align-items: center">
+                <td>{{ ecmVersion.license.issuedAt }}</td>
+                <td>{{ ecmVersion.license.expiresAt }}</td>
+                <td>{{ ecmVersion.license.remainingDays }}</td>
+                <td>{{ ecmVersion.license.holder }}</td>
+                <td>{{ ecmVersion.license.mode }}</td>
+                <td>{{ ecmVersion.license.isClusterEnabled }}</td>
+                <td>{{ ecmVersion.license.isCryptodocEnabled }}</td>
+            </tr>
+        </table>
+        <h4> Status</h4>
+        <table border="2" class="adf-table-version">
+            <tr>
+                <th> ReadOnly </th>
+                <th> Is Audit Enable </th>
+                <th> Is quick shared enable </th>
+                <th> Thumbnail Generation </th>
+            </tr>
+            <tr style="align-items: center">
+                <td>{{ ecmVersion.status.isReadOnly }}</td>
+                <td>{{ ecmVersion.status.isAuditEnabled }}</td>
+                <td>{{ ecmVersion.status.isQuickShareEnabled }}</td>
+                <td>{{ ecmVersion.status.isThumbnailGenerationEnabled }}</td>
+            </tr>
+        </table>
+        <h4>Modules</h4>
+        <table border="2" class="adf-table-version">
+            <tr>
+                <th> ID </th>
+                <th> Title </th>
+                <th> Description </th>
+                <th> Version </th>
+                <th> Install Date </th>
+                <th> Install State </th>
+                <th> Version Minor </th>
+                <th> Version Max </th>
+            </tr>
+            <tr *ngFor="let module of ecmVersion.modules" style="align-items: center">
+                <td>{{ module.id }}</td>
+                <td>{{ module.title }}</td>
+                <td>{{ module.description }}</td>
+                <td>{{ module.version }}</td>
+                <td>{{ module.installDate }}</td>
+                <td>{{ module.installState }}</td>
+                <td>{{ module.versionMin }}</td>
+                <td>{{ module.versionMax }}</td>
+            </tr>
+        </table>
+    </div>
+
+    <div *ngIf="githubUrlCommitAlpha">
+        <h3>Source code</h3>
+        <small>You are running the project based on the following commit:</small>
+        <div>
+            <a [href]="githubUrlCommitAlpha">{{githubUrlCommitAlpha}}</a>
+        </div>
+    </div>
+
     <h3>Packages</h3>
+    <small>Current project is using the following ADF libraries:</small>
     <alfresco-datatable [data]="data"></alfresco-datatable>
 </div>

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

@@ -17,32 +17,91 @@
 
 import { Component, OnInit } from '@angular/core';
 import { Http } from '@angular/http';
+import { AlfrescoAuthenticationService, AppConfigService, BpmProductVersionModel, DiscoveryApiService, EcmProductVersionModel, LogService  } from 'ng2-alfresco-core';
 import { ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
 
-declare let __moduleName: string;
-
 @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;
+    githubUrlCommitAlpha: string = 'https://github.com/Alfresco/alfresco-ng2-components/commits/';
 
-    constructor(private http: Http) {}
+    configFile: string = '';
+    ecmHost: string = '';
+    bpmHost: string = '';
+
+    ecmVersion: EcmProductVersionModel = null;
+    bpmVersion: BpmProductVersionModel = null;
+
+    constructor(private http: Http,
+                private appConfig: AppConfigService,
+                private authService: AlfrescoAuthenticationService,
+                private logService: LogService,
+                private discovery: DiscoveryApiService) {
+    }
 
     ngOnInit() {
-        // this.data = new ObjectDataTableAdapter();
-        this.http.get('/versions').subscribe(response => {
-            let data = response.json() || {};
-            let packages = data.packages || [];
 
-            this.data = new ObjectDataTableAdapter(packages, [
-                { type: 'text', key: 'name', title: 'Name', sortable: true },
-                { type: 'text', key: 'version', title: 'Version', sortable: true }
+        if (this.authService.isEcmLoggedIn()) {
+            this.discovery.getEcmProductInfo().subscribe((ecmVers) => {
+                this.ecmVersion = ecmVers;
+            });
+        }
+
+        if (this.authService.isBpmLoggedIn()) {
+            this.discovery.getBpmProductInfo().subscribe((bpmVers) => {
+                this.bpmVersion = bpmVers;
+            });
+        }
+
+        this.http.get('/versions.json').subscribe(response => {
+            let regexp = new RegExp('^(ng2-activiti|ng2-alfresco|alfresco-)');
+
+            let alfrescoPackages = Object.keys(response.json().dependencies).filter((val) => {
+                this.logService.log(val);
+                return regexp.test(val);
+            });
+
+            let alfrescoPackagesTableRepresentation = [];
+            alfrescoPackages.forEach((val) => {
+                this.logService.log(response.json().dependencies[val]);
+                alfrescoPackagesTableRepresentation.push({
+                    name: val,
+                    version: response.json().dependencies[val].version
+                });
+            });
+
+            this.gitHubLinkCreation(alfrescoPackagesTableRepresentation);
+
+            this.logService.log(alfrescoPackagesTableRepresentation);
+
+            this.data = new ObjectDataTableAdapter(alfrescoPackagesTableRepresentation, [
+                {type: 'text', key: 'name', title: 'Name', sortable: true},
+                {type: 'text', key: 'version', title: 'Version', sortable: true}
             ]);
         });
 
+        this.configFile = this.appConfig.configFile;
+        this.ecmHost = this.appConfig.get<string>('ecmHost');
+        this.bpmHost = this.appConfig.get<string>('bpmHost');
+    }
+
+    private gitHubLinkCreation(alfrescoPackagesTableRepresentation): void {
+        let corePackage = alfrescoPackagesTableRepresentation.find((packageUp) => {
+            return packageUp.name === 'ng2-alfresco-core';
+        });
+
+        if (corePackage) {
+            let commitIsh = corePackage.version.split('-');
+            if (commitIsh.length > 1) {
+                this.githubUrlCommitAlpha = this.githubUrlCommitAlpha + commitIsh[1];
+            } else {
+                this.githubUrlCommitAlpha = this.githubUrlCommitAlpha + corePackage.version;
+            }
+        }
     }
 }

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

@@ -10,9 +10,91 @@
 .task-column {
     background-color: #f5f5f5;
     padding: 10px 10px 10px 10px;
-    border: solid 2px rgb(31,188,210);
 }
 
 .mdl-layout__header {
     z-index: 1;
-}
+}
+
+.list-buttons {
+    text-align: left;
+    margin-bottom: 5px;
+}
+
+.adf-no-form-container {
+    text-align: center;
+    font-weight: 600;
+    font-size: 18px;
+    font-family: Muli;
+    padding: 16px;
+}
+
+.action-header {
+    border: 1px solid rgb(224, 224, 224);
+    background: #fff;
+    text-align: left;
+}
+
+.activiti-demo-grid {
+    display: flex;
+}
+
+.activiti-demo-grid-item {
+    margin: 4px;
+    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
+    background-color: #f5f5f5;
+    padding: 10px 10px 10px 10px;
+}
+
+.activiti-demo-list-buttons {
+    margin-bottom: 24px;
+}
+
+.activiti-demo-list-buttons-start {
+    width: 100%;
+}
+
+.activiti-demo-tasks-menu {
+    min-width: 170px;
+}
+
+.activiti-demo-tasks-list {
+    min-width: 510px;
+    padding: 0;
+}
+
+.activiti-demo-tasks-details,
+.activiti-demo-tasks-start {
+    flex-grow: 1;
+    min-width: 680px;
+}
+
+.activiti-demo-tasks-list >>> .adf-data-table {
+    border: none;
+}
+
+.activiti-demo-tasks-list >>> .adf-data-table tr,
+.activiti-demo-tasks-list >>> .adf-data-table td {
+    height: 36px;
+    font-size: 14px;
+}
+
+.activiti-demo-tasks-list >>> .adf-data-table td {
+    padding-top: 0;
+    padding-bottom: 0;
+    border-bottom: none;
+}
+
+.activiti-demo-tasks-list >>> .adf-data-table th {
+    padding-top: 0;
+    padding-bottom: 0;
+    height: 40px;
+    color: rgb(0,0,0);
+    vertical-align: middle;
+    font-size: 14px;
+    background-color: rgba(0,0,0,.05);
+}
+
+.adf-pagination {
+    color: black;
+}

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

@@ -1,113 +1,230 @@
-<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
+<md-tab-group>
+    <md-tab id="tasks-header" href="#tasks" (click)="activeTab = 'tasks'" label="{{'PS-TAB.TASKS-TAB' | translate}}">
+        <div class="page-content">
+            <div class="activiti-demo-grid">
+                <div class="activiti-demo-grid-item activiti-demo-tasks-menu">
+                    <div class="activiti-demo-list-buttons">
+                        <button color="primary" md-raised-button data-automation-id="btn-start-task" class="activiti-demo-list-buttons-start" (click)="navigateStartTask()">
+                            <md-icon>add</md-icon>
+                            <span>{{'PS-TAB.START-TASK' | translate}}</span>
+                        </button>
+                    </div>
+                    <adf-accordion>
+                        <adf-accordion-group [heading]="'Tasks'" [isSelected]="true" [isOpen]="true"
+                                             [headingIcon]="'assignment'">
+                            <activiti-filters
+                                [filterParam]="{name:'MY tasks'}"
+                                [appId]="appId"
+                                [hasIcon]="false"
+                                (filterClick)="onTaskFilterClick($event)"
+                                (onSuccess)="onSuccessTaskFilterList($event)"
+                                #activitifilter>
+                            </activiti-filters>
+                        </adf-accordion-group>
+                    </adf-accordion>
+                </div>
+                <div class="activiti-demo-grid-item activiti-demo-tasks-list"
+                     *ngIf="taskFilter && !isStartTaskMode()">
+                    <activiti-tasklist
+                        [appId]="taskFilter?.appId"
+                        [page]="taskPage"
+                        [size]="taskPagination.maxItems"
+                        [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>
 
-    <header class="mdl-layout__header">
-
-        <!-- 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>
+                    <adf-pagination
+                        (changePageNumber)="onChangePageNumber($event)"
+                        (changePageSize)="onChangePageSize($event)"
+                        (nextPage)="onNextPage($event)"
+                        (prevPage)="onPrevPage($event)"
+                        [pagination]="taskPagination"
+                        [supportedPageSizes]="[2, 4, 6, 8, 10, 12]">
+                    </adf-pagination>
+                </div>
+                <div class="activiti-demo-grid-item activiti-demo-tasks-details" *ngIf="!isStartTaskMode()"
+                     [class.mdl-cell--7-col]="taskFilter && !isStartTaskMode()"
+                     [class.mdl-cell--10-col]="!taskFilter || isStartTaskMode()">
+                    <activiti-task-details #activitidetails
+                                           [debugMode]="true"
+                                           [taskId]="currentTaskId"
+                                           [fieldValidators]="fieldValidators"
+                                           (formCompleted)="onFormCompleted($event)"
+                                           (formContentClicked)="onFormContentClick($event)"
+                                           (taskCreated)="onTaskCreated($event)"
+                                           (assignTask)="onAssignTask()"
+                                           (taskDeleted)="onTaskDeleted($event)">
+                    </activiti-task-details>
+                    <hr>
+                    <div *ngIf="currentTaskId">
+                        {{'PS-TAB.AUDIT-LOG' | translate}}
+                        <button
+                            adf-task-audit
+                            [task-id]="currentTaskId"
+                            [download]="true"
+                            md-icon-button (clicked)="onAuditClick($event)" (error)="onAuditError($event)">
+                            <md-icon>assignment_ind</md-icon>
+                        </button>
+                        <hr>
+                    </div>
+                    <md-card>
+                        <md-card-content>
+                            <activiti-task-attachments
+                                [taskId]="currentTaskId">
+                            </activiti-task-attachments>
+                        </md-card-content>
+                    </md-card>
+                </div>
+                <div class="activiti-demo-grid-item activiti-demo-tasks-start" *ngIf="isStartTaskMode()">
+                    <adf-start-task
+                        [appId]="appId"
+                        (success)="onStartTaskSuccess($event)"
+                        (cancel)="onCancelStartTask()">
+                    </adf-start-task>
+                </div>
+            </div>
         </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>
-
-
-        <!--  TASKS COMPONENT -->
-
-        <section class="mdl-layout__tab-panel" 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>
+    </md-tab>
+    <md-tab id="processes-header" href="#processes" (click)="activeTab = 'processes'"
+            label="{{'PS-TAB.PROCESSES-TAB' | translate}}">
+        <div class="page-content">
+            <div class="mdl-grid">
+                <div class="mdl-cell mdl-cell--2-col task-column  mdl-shadow--2dp">
+                    <div class="list-buttons">
+                        <button
+                            md-raised-button
+                            data-automation-id="btn-start-process"
+                            (click)="navigateStartProcess()">
+                            <md-icon>add</md-icon>
+                            <span>START PROCESS</span>
+                        </button>
                     </div>
-                    <div class="mdl-cell mdl-cell--3-col task-column mdl-shadow--2dp">
-                        <span>Task List</span>
-                        <activiti-tasklist *ngIf="taskFilter?.hasFilter()" [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"
-                                           (rowClick)="onTaskRowClick($event)" (onSuccess)="onSuccessTaskList($event)"
-                                           #activititasklist></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>
+                    <adf-accordion>
+                        <adf-accordion-group [heading]="'Processes'" [isSelected]="true" [isOpen]="true"
+                                             [headingIcon]="'assessment'">
+                            <activiti-process-instance-filters
+                                [filterParam]="{index: 0}"
+                                [appId]="appId"
+                                (filterClick)="onProcessFilterClick($event)"
+                                (onSuccess)="onSuccessProcessFilterList($event)">
+                            </activiti-process-instance-filters>
+                        </adf-accordion-group>
+                    </adf-accordion>
+                </div>
+                <div class="mdl-cell mdl-cell--3-col task-column mdl-shadow--2dp"
+                     *ngIf="processFilter && !isStartProcessMode()">
+                    <activiti-process-instance-list
+                        *ngIf="processFilter?.hasFilter()" [appId]="processFilter.appId"
+                        [processDefinitionKey]="processFilter.filter.processDefinitionKey"
+                        [name]="processFilter.filter.name"
+                        [state]="processFilter.filter.state"
+                        [sort]="processFilter.filter.sort"
+                        [data]="dataProcesses"
+                        (rowClick)="onProcessRowClick($event)"
+                        (onSuccess)="onSuccessProcessList($event)">
+                        <!-- Custom column definition demo -->
+                        <!--
+                        <data-columns>
+                            <data-column key="name" title="NAME" class="full-width name-column"></data-column>
+                            <data-column key="created" title="Created" class="hidden"></data-column>
+                        </data-columns>
+                        -->
+                    </activiti-process-instance-list>
+                </div>
+                <div class="mdl-cell task-column mdl-shadow--2dp" *ngIf="!isStartProcessMode()"
+                     [class.mdl-cell--7-col]="processFilter && !isStartProcessMode()"
+                     [class.mdl-cell--10-col]="!processFilter || isStartProcessMode()">
+                    <activiti-process-instance-details
+                        [processInstanceId]="currentProcessInstanceId"
+                        (processCancelled)="processCancelled()"
+                        (showProcessDiagram)="onShowProcessDiagram($event)"
+                        (taskClick)="onProcessDetailsTaskClick($event)">
+                    </activiti-process-instance-details>
+                    <hr>
+                    <div *ngIf="currentProcessInstanceId">
+                        {{'PS-TAB.START-PROCESS' | translate}}
+                        <button adf-process-audit
+                                [process-id]="currentProcessInstanceId"
+                                [download]="true" md-icon-button
+                                [format]="'pdf'"
+                                (clicked)="onAuditClick($event)"
+                                (error)="onAuditError($event)">
+                            <md-icon>assignment_ind</md-icon>
+                        </button>
+                        <hr>
                     </div>
+                    <md-card>
+                        <md-card-content>
+                            <activiti-process-attachments
+                                [processId]="currentProcessInstanceId">
+                            </activiti-process-attachments>
+                        </md-card-content>
+                    </md-card>
+                </div>
+                <div class="mdl-cell mdl-cell--10-col task-column mdl-shadow--2dp"
+                     *ngIf="isStartProcessMode()">
+                    <adf-start-process
+                        [appId]="appId"
+                        (start)="onStartProcessInstance($event)"
+                        (cancel)="onCancelProcessInstance()">
+                    </adf-start-process>
                 </div>
             </div>
-        </section>
-
-
-        <!--  PROCESS COMPONENT -->
-
-        <section class="mdl-layout__tab-panel" id="processes">
-            <div class="page-content">
-                <div class="page-content">
-                    <div class="mdl-grid">
-                        <div class="mdl-cell mdl-cell--2-col task-column">
-                            <span>Process Filters</span>
-                            <button type="button" (click)="navigateStartProcess()" class="mdl-button" data-automation-id="btn-start-process">Start Process</button>
-                            <activiti-process-instance-filters [appId]="appId"
-                                    (filterClick)="onProcessFilterClick($event)" (onSuccess)="onSuccessProcessFilterList($event)"
-                                    #activitiprocessfilter></activiti-process-instance-filters>
-                        </div>
-                        <div class="mdl-cell mdl-cell--3-col task-column">
-                            <span>Process List</span>
-                            <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)"
-                                                            #activitiprocesslist></activiti-process-instance-list>
-                        </div>
-                        <div class="mdl-cell mdl-cell--7-col task-column" *ngIf="!isStartProcessMode()">
-                            <span>Process Details</span>
-                            <activiti-process-instance-details [processInstanceId]="currentProcessInstanceId" (activitiprocesslist)="taskFormCompleted()" (processCancelled)="processCancelled()" #activitiprocessdetails></activiti-process-instance-details>
-                        </div>
-                        <div class="mdl-cell mdl-cell--7-col task-column" *ngIf="isStartProcessMode()">
-                            <span>Start Process</span>
-                            <activiti-start-process [appId]="appId" (start)="onStartProcessInstance($event)"></activiti-start-process>
-                        </div>
-                    </div>
+        </div>
+    </md-tab>
+    <md-tab id="report-header" href="#report" (click)="activeTab = 'reports'"
+            label="{{'PS-TAB.REPORTS-TAB' | translate}}">
+        <div class="mdl-grid">
+            <div class="mdl-cell mdl-cell--4-col task-column mdl-shadow--2dp">
+                <span><h5>Report List</h5></span>
+                <hr>
+                <analytics-report-list
+                    [appId]="appId"
+                    [selectFirst]="selectFirstReport"
+                    (reportClick)="onReportClick($event)"
+                    #analyticsreportlist>
+                </analytics-report-list>
+            </div>
+            <div class="mdl-cell mdl-cell--8-col task-column mdl-shadow--2dp">
+                <activiti-analytics
+                    *ngIf="report"
+                    [appId]="appId"
+                    [reportId]="report.id"
+                    [hideParameters]="false"
+                    (editReport)="onEditReport($event)"
+                    (reportSaved)="onReportSaved($event)"
+                    (reportDeleted)="onReportDeleted()">
+                </activiti-analytics>
+                <div *ngIf="!report">
+                    <span>{{'ANALYTICS_REPORT.NO_REPORT_MESSAGE' | translate}}</span>
                 </div>
             </div>
-        </section>
+        </div>
+    </md-tab>
+</md-tab-group>
 
-
-        <!--  ANALYTICS COMPONENT -->
-
-        <section class="mdl-layout__tab-panel" id="report">
-            <div class="page-content">
-                <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>
-        </section>
-
-    </main>
+<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,221 +15,427 @@
  * limitations under the License.
  */
 
-import { Component, AfterViewChecked, ViewChild, Input } from '@angular/core';
+// tslint:disable-next-line:adf-file-name
+import { AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Pagination } from 'alfresco-js-api';
+import { AnalyticsReportListComponent } from 'ng2-activiti-analytics';
+import { FORM_FIELD_VALIDATORS, FormEvent, FormFieldEvent, FormRenderingService, FormService } from 'ng2-activiti-form';
 import {
-    AppDefinitionRepresentationModel,
-    FilterRepresentationModel,
-    ActivitiApps,
-    ActivitiTaskList
-} from 'ng2-activiti-tasklist';
-import {
-    ActivitiProcessInstanceListComponent,
-    ActivitiStartProcessInstance,
-    ProcessInstance
+    FilterProcessRepresentationModel,
+    ProcessFiltersComponent,
+    ProcessInstance,
+    ProcessInstanceDetailsComponent,
+    ProcessInstanceListComponent,
+    StartProcessInstanceComponent
 } from 'ng2-activiti-processlist';
-import { ActivatedRoute } from '@angular/router';
-import { Subscription } from 'rxjs/Rx';
 import {
-    ObjectDataTableAdapter,
-    DataSorting
+    AppsListComponent,
+    FilterRepresentationModel,
+    TaskDetailsComponent,
+    TaskDetailsEvent,
+    TaskFiltersComponent,
+    TaskListComponent,
+    TaskListService
+} from 'ng2-activiti-tasklist';
+import { AlfrescoApiService } from 'ng2-alfresco-core';
+import {
+    DataSorting,
+    ObjectDataRow,
+    ObjectDataTableAdapter
 } from 'ng2-alfresco-datatable';
-
-import { FormRenderingService } from 'ng2-activiti-form';
+import { Subscription } from 'rxjs/Rx';
 import { /*CustomEditorComponent*/ CustomStencil01 } from './custom-editor/custom-editor.component';
+import { DemoFieldValidator } from './demo-field-validator';
 
-declare let __moduleName: string;
 declare var componentHandler;
 
 const currentProcessIdNew = '__NEW__';
+const currentTaskIdNew = '__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, OnDestroy, OnInit {
 
-    @ViewChild('activitiapps')
-    activitiapps: ActivitiApps;
+    @ViewChild(TaskFiltersComponent)
+    activitifilter: TaskFiltersComponent;
 
-    @ViewChild('activitifilter')
-    activitifilter: any;
+    @ViewChild(TaskListComponent)
+    taskList: TaskListComponent;
 
-    @ViewChild('activitidetails')
-    activitidetails: any;
+    @ViewChild(ProcessFiltersComponent)
+    activitiprocessfilter: ProcessFiltersComponent;
 
-    @ViewChild(ActivitiTaskList)
-    activititasklist: ActivitiTaskList;
+    @ViewChild(ProcessInstanceListComponent)
+    processList: ProcessInstanceListComponent;
 
-    @ViewChild('activitiprocessfilter')
-    activitiprocessfilter: any;
+    @ViewChild(ProcessInstanceDetailsComponent)
+    activitiprocessdetails: ProcessInstanceDetailsComponent;
 
-    @ViewChild(ActivitiProcessInstanceListComponent)
-    activitiprocesslist: ActivitiProcessInstanceListComponent;
+    @ViewChild(TaskDetailsComponent)
+    activitidetails: TaskDetailsComponent;
 
-    @ViewChild('activitiprocessdetails')
-    activitiprocessdetails: any;
+    @ViewChild(StartProcessInstanceComponent)
+    activitiStartProcess: StartProcessInstanceComponent;
 
-    @ViewChild(ActivitiStartProcessInstance)
-    activitiStartProcess: ActivitiStartProcessInstance;
-
-    @ViewChild('tabmain')
-    tabMain: any;
-
-    @ViewChild('tabheader')
-    tabHeader: any;
+    @ViewChild(AnalyticsReportListComponent)
+    analyticsreportlist: AnalyticsReportListComponent;
 
     @Input()
-    appId: number;
+    appId: number = null;
+
+    fileShowed: boolean = false;
+    selectFirstReport: boolean = false;
+
+    content: Blob;
+    contentName: string;
 
     layoutType: string;
     currentTaskId: string;
     currentProcessInstanceId: string;
 
     taskSchemaColumns: any [] = [];
+    taskPagination: Pagination = {
+        skipCount: 0,
+        maxItems: 2,
+        totalItems: 0
+    };
+    taskPage: number = 0;
     processSchemaColumns: any [] = [];
 
+    activeTab: string = 'tasks'; // tasks|processes|reports
+
     taskFilter: FilterRepresentationModel;
     report: any;
-    processFilter: FilterRepresentationModel;
+    processFilter: FilterProcessRepresentationModel;
 
     sub: Subscription;
+    blobFile: any;
+    flag: boolean = true;
 
     dataTasks: ObjectDataTableAdapter;
     dataProcesses: ObjectDataTableAdapter;
 
-    constructor(private route: ActivatedRoute, private formRenderingService: FormRenderingService) {
-        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}
-            ]
-        );
+    fieldValidators = [
+        ...FORM_FIELD_VALIDATORS,
+        new DemoFieldValidator()
+    ];
+
+    constructor(private elementRef: ElementRef,
+                private route: ActivatedRoute,
+                private router: Router,
+                private taskListService: TaskListService,
+                private apiService: AlfrescoApiService,
+                formRenderingService: FormRenderingService,
+                formService: FormService) {
+        this.dataTasks = new ObjectDataTableAdapter();
         this.dataTasks.setSorting(new DataSorting('created', 'desc'));
 
         this.dataProcesses = new ObjectDataTableAdapter(
             [],
             [
-                {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column'},
-                {type: 'text', key: 'started', title: 'Started', cssClass: 'hidden'}
+                { type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true },
+                { type: 'text', key: 'started', title: 'Started', cssClass: 'hidden', sortable: true }
             ]
         );
+        this.dataProcesses.setSorting(new DataSorting('started', 'desc'));
 
         // Uncomment this line to replace all 'text' field editors with custom component
         // formRenderingService.setComponentTypeResolver('text', () => CustomEditorComponent, true);
 
         // Uncomment this line to map 'custom_stencil_01' to local editor component
         formRenderingService.setComponentTypeResolver('custom_stencil_01', () => CustomStencil01, true);
+
+        formService.formLoaded.subscribe((e: FormEvent) => {
+            console.log(`Form loaded: ${e.form.id}`);
+        });
+
+        formService.formFieldValueChanged.subscribe((e: FormFieldEvent) => {
+            console.log(`Field value changed. Form: ${e.form.id}, Field: ${e.field.id}, Value: ${e.field.value}`);
+        });
+
+        // Uncomment this block to see form event handling in action
+        /*
+        formService.formEvents.subscribe((event: Event) => {
+            console.log('Event fired:' + event.type);
+            console.log('Event Target:' + event.target);
+        });
+        */
+    }
+
+    onPrevPage(pagination: Pagination): void {
+        this.taskPagination.skipCount = pagination.skipCount;
+        this.taskPage--;
+    }
+
+    onNextPage(pagination: Pagination): void {
+        this.taskPagination.skipCount = pagination.skipCount;
+        this.taskPage++;
+    }
+
+    onChangePageSize(pagination: Pagination): void {
+        const { skipCount, maxItems } = pagination;
+        this.taskPage = this.currentPage(skipCount, maxItems);
+        this.taskPagination.maxItems = maxItems;
+        this.taskPagination.skipCount = skipCount;
+    }
+
+    onChangePageNumber(pagination: Pagination): void {
+        const { maxItems, skipCount } = pagination;
+        this.taskPage = this.currentPage(skipCount, maxItems);
+        this.taskPagination.maxItems = maxItems;
+        this.taskPagination.skipCount = skipCount;
+    }
+
+    currentPage(skipCount: number, maxItems: number): number {
+        return (skipCount && maxItems) ? Math.floor(skipCount / maxItems) : 0;
     }
 
     ngOnInit() {
-        this.sub = this.route.params.subscribe(params => {
-            this.appId = params['appId'];
+        this.taskListService.tasksList$.subscribe(
+            (tasks) => {
+                this.taskPagination = {count: tasks.data.length, maxItems: this.taskPagination.maxItems, skipCount: this.taskPagination.skipCount, totalItems: tasks.total};
+                console.log({count: tasks.data.length, maxItems: this.taskPagination.maxItems, skipCount: this.taskPagination.skipCount, totalItems: tasks.total});
+            }, (err) => {
+            console.log('err');
         });
-        this.layoutType = ActivitiApps.LAYOUT_GRID;
+
+        if (this.router.url.includes('processes') ) {
+            this.activeTab = 'processes';
+        }
+        this.sub = this.route.params.subscribe(params => {
+            let applicationId = params['appId'];
+            if (applicationId && applicationId !== '0') {
+                this.appId = params['appId'];
+            }
+
+            this.taskFilter = null;
+            this.currentTaskId = null;
+            this.processFilter = null;
+            this.currentProcessInstanceId = null;
+        });
+        this.layoutType = AppsListComponent.LAYOUT_GRID;
+
     }
 
     ngOnDestroy() {
         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');
+    onTaskFilterClick(filter: FilterRepresentationModel): void {
+        this.applyTaskFilter(filter);
     }
 
-    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;
-    }
-
-    onReportClick(event: any) {
+    onReportClick(event: any): void {
         this.report = event;
     }
 
-    onSuccessTaskFilterList(event: any) {
-        this.taskFilter = this.activitifilter.getCurrentFilter();
+    onSuccessTaskFilterList(event: any): void {
+        this.applyTaskFilter(this.activitifilter.getCurrentFilter());
     }
 
-    onStartTaskSuccess(event: any) {
-        this.activititasklist.reload();
+    applyTaskFilter(filter: FilterRepresentationModel) {
+        this.taskFilter = filter;
+        if (filter && this.taskList) {
+            this.taskList.hasCustomDataSource = false;
+        }
+    }
+
+    onStartTaskSuccess(event: any): void {
+        this.activitifilter.selectFilterWithTask(event.id);
+        this.currentTaskId = event.id;
+    }
+
+    onCancelStartTask() {
+        this.currentTaskId = null;
+        this.reloadTaskFilters();
     }
 
     onSuccessTaskList(event: FilterRepresentationModel) {
-        this.currentTaskId = this.activititasklist.getCurrentId();
+        this.currentTaskId = this.taskList.getCurrentId();
     }
 
-    onProcessFilterClick(event: FilterRepresentationModel) {
+    onProcessFilterClick(event: FilterProcessRepresentationModel): void {
+        this.currentProcessInstanceId = null;
         this.processFilter = event;
     }
 
-    onSuccessProcessFilterList(event: any) {
+    onSuccessProcessFilterList(): void {
         this.processFilter = this.activitiprocessfilter.getCurrentFilter();
     }
 
-    onSuccessProcessList(event: any) {
-        this.currentProcessInstanceId = this.activitiprocesslist.getCurrentId();
+    onSuccessProcessList(event: any): void {
+        this.currentProcessInstanceId = this.processList.getCurrentId();
     }
 
-    onTaskRowClick(taskId) {
+    onTaskRowClick(taskId): void {
         this.currentTaskId = taskId;
     }
 
-    onProcessRowClick(processInstanceId) {
+    onProcessRowClick(processInstanceId): void {
         this.currentProcessInstanceId = processInstanceId;
     }
 
-    navigateStartProcess() {
+    onEditReport(name: string): void {
+        this.analyticsreportlist.reload();
+    }
+
+    onReportSaved(reportId): void {
+        this.analyticsreportlist.reload(reportId);
+    }
+
+    onReportDeleted(): void {
+        this.analyticsreportlist.reload();
+        this.analyticsreportlist.selectReport(null);
+    }
+
+    navigateStartProcess(): void {
+        this.resetProcessFilters();
+        this.reloadProcessFilters();
         this.currentProcessInstanceId = currentProcessIdNew;
     }
 
-    onStartProcessInstance(instance: ProcessInstance) {
-        this.currentProcessInstanceId = instance.id;
-        this.activitiStartProcess.reset();
+    navigateStartTask(): void {
+        this.resetTaskFilters();
+        this.reloadTaskFilters();
+        this.currentTaskId = currentTaskIdNew;
     }
 
-    isStartProcessMode() {
+    onStartProcessInstance(instance: ProcessInstance): void {
+        this.currentProcessInstanceId = instance.id;
+        this.activitiStartProcess.reset();
+        this.resetProcessFilters();
+    }
+
+    onCancelProcessInstance() {
+        this.currentProcessInstanceId = null;
+        this.reloadProcessFilters();
+    }
+
+    isStartProcessMode(): boolean {
         return this.currentProcessInstanceId === currentProcessIdNew;
     }
 
-    processCancelled(data: any) {
+    isStartTaskMode(): boolean {
+        return this.currentTaskId === currentTaskIdNew;
+    }
+
+    processCancelled(data: any): void {
         this.currentProcessInstanceId = null;
-        this.activitiprocesslist.reload();
+        this.processList.reload();
     }
 
-    onSuccessNewProcess(data: any) {
-        this.activitiprocesslist.reload();
+    onSuccessNewProcess(data: any): void {
+        this.processList.reload();
     }
 
-    taskFormCompleted(data: any) {
-        this.activitiprocesslist.reload();
-    }
-
-    onFormCompleted(form) {
-        this.activititasklist.reload();
+    onFormCompleted(form): void {
         this.currentTaskId = null;
+        this.taskPagination.totalItems--;
+        const { skipCount, maxItems, totalItems } = this.taskPagination;
+        if (totalItems > 0 && (skipCount >= totalItems)) {
+            this.taskPagination.skipCount -= maxItems;
+        }
+        this.taskPage = this.currentPage(this.taskPagination.skipCount, maxItems);
+        this.taskList.reload();
     }
 
-    ngAfterViewChecked() {
+    onFormContentClick(content: any): void {
+        this.fileShowed = true;
+        this.content = content.contentBlob;
+        this.contentName = content.name;
+    }
+
+    onAuditClick(event: any) {
+        console.log(event);
+    }
+
+    onAuditError(event: any): void {
+        console.error('My custom error message' + event);
+    }
+
+    onTaskCreated(data: any): void {
+        this.currentTaskId = data.parentTaskId;
+        this.taskList.reload();
+    }
+
+    onTaskDeleted(data: any): void {
+        this.taskList.reload();
+    }
+
+    ngAfterViewInit() {
         // workaround for MDL issues with dynamic components
         if (componentHandler) {
             componentHandler.upgradeAllRegistered();
         }
+
+        this.loadStencilScriptsInPageFromActiviti();
     }
 
+    loadStencilScriptsInPageFromActiviti() {
+        this.apiService.getInstance().activiti.scriptFileApi.getControllers().then(response => {
+            if (response) {
+                let s = document.createElement('script');
+                s.type = 'text/javascript';
+                s.text = response;
+                this.elementRef.nativeElement.appendChild(s);
+            }
+        });
+    }
+
+    onShowProcessDiagram(event: any): void {
+        this.router.navigate(['/activiti/apps/' + this.appId + '/diagram/' + event.value]);
+    }
+
+    onProcessDetailsTaskClick(event: TaskDetailsEvent): void {
+        event.preventDefault();
+        this.activeTab = 'tasks';
+
+        const taskId = event.value.id;
+        const processTaskDataRow = new ObjectDataRow({
+            id: taskId,
+            name: event.value.name || 'No name',
+            created: event.value.created
+        });
+        this.activitifilter.selectFilter(null);
+        this.taskList.setCustomDataSource([processTaskDataRow]);
+        this.taskList.selectTask(taskId);
+        this.currentTaskId = taskId;
+    }
+
+    private resetProcessFilters(): void {
+        this.processFilter = null;
+    }
+
+    private resetTaskFilters(): void {
+        this.taskFilter = null;
+    }
+
+    private reloadProcessFilters(): void {
+        this.activitiprocessfilter.selectFilter(this.activitiprocessfilter.getCurrentFilter());
+    }
+
+    private reloadTaskFilters(): void {
+        this.activitifilter.selectFilter(this.activitifilter.getCurrentFilter());
+    }
+
+    onRowClick(event): void {
+        console.log(event);
+    }
+
+    onRowDblClick(event): void {
+        console.log(event);
+    }
+
+    isTaskCompleted(): boolean {
+        return this.activitidetails.isCompletedTask();
+    }
+
+    onAssignTask() {
+        this.taskList.reload();
+        this.currentTaskId = null;
+    }
 }

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

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

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

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

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

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

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

@@ -0,0 +1,4 @@
+<div>
+    <button md-mini-fab  (click)="onClickBack()" ><md-icon>keyboard_backspace</md-icon></button>
+    <activiti-diagram [processInstanceId]="processDefinitionId"></activiti-diagram>
+</div>

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

@@ -0,0 +1,43 @@
+/*!
+ * @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 { ActivatedRoute, Router } from '@angular/router';
+
+@Component({
+    selector: 'activiti-show-diagram',
+    templateUrl: './activiti-show-diagram.component.html',
+    styleUrls: ['./activiti-show-diagram.component.css']
+})
+export class ActivitiShowDiagramComponent {
+
+    processDefinitionId: string;
+    appId: string;
+
+    constructor(private route: ActivatedRoute,
+                private router: Router) {
+        this.route.params.subscribe(params => {
+            this.processDefinitionId = params['processDefinitionId'];
+            this.appId = params['appId'];
+        });
+    }
+
+    onClickBack() {
+        this.router.navigate(['/activiti/apps/' + this.appId + '/processes']);
+    }
+
+}

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

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

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

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

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

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

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

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

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

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

demo-shell-ng2/app/components/activiti/demo-field-validator.ts

@@ -0,0 +1,36 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { FormFieldModel, FormFieldTypes, FormFieldValidator } from 'ng2-activiti-form';
+
+export class DemoFieldValidator implements FormFieldValidator {
+
+    isSupported(field: FormFieldModel): boolean {
+        return field && field.type === FormFieldTypes.TEXT;
+    }
+
+    validate(field: FormFieldModel): boolean {
+        if (this.isSupported(field)) {
+            if (field.value && field.value.toLowerCase() === 'admin') {
+                field.validationSummary = 'Sorry, the value cannot be "admin".';
+                return false;
+            }
+        }
+        return true;
+    }
+
+}

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

@@ -15,20 +15,16 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, OnDestroy, AfterViewChecked } from '@angular/core';
+import { Component, OnDestroy, OnInit } 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']
 })
-export class FormNodeViewer implements OnInit, OnDestroy, AfterViewChecked {
+export class FormNodeViewerComponent implements OnInit, OnDestroy {
 
     nodeId: string;
 
@@ -47,11 +43,4 @@ export class FormNodeViewer implements OnInit, OnDestroy, AfterViewChecked {
         this.sub.unsubscribe();
     }
 
-    ngAfterViewChecked() {
-        // workaround for MDL issues with dynamic components
-        if (componentHandler) {
-            componentHandler.upgradeAllRegistered();
-        }
-    }
-
 }

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

@@ -15,20 +15,16 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, OnDestroy, AfterViewChecked } from '@angular/core';
+import { Component, OnDestroy, OnInit } 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']
 })
-export class FormViewer implements OnInit, OnDestroy, AfterViewChecked {
+export class FormViewerComponent implements OnInit, OnDestroy {
 
     taskId: string;
 
@@ -47,11 +43,4 @@ export class FormViewer implements OnInit, OnDestroy, AfterViewChecked {
         this.sub.unsubscribe();
     }
 
-    ngAfterViewChecked() {
-        // workaround for MDL issues with dynamic components
-        if (componentHandler) {
-            componentHandler.upgradeAllRegistered();
-        }
-    }
-
 }

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

@@ -0,0 +1,10 @@
+alfresco-datatable >>> .custom-row-style.alfresco-datatable__row:focus {
+    outline-offset: -1px;
+    outline-width: 1px;
+    outline-color: green;
+    outline-style: solid;
+}
+
+alfresco-datatable >>> .custom-row-style.alfresco-datatable__row--selected {
+    color: green;
+}

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

@@ -1,31 +1,41 @@
 <div class="p-10">
-    <alfresco-datatable [data]="data" [multiselect]="multiselect"></alfresco-datatable>
+    <alfresco-datatable
+        [data]="data"
+        [selectionMode]="selectionMode"
+        [multiselect]="multiselect"
+        [actions]="true"
+        rowStyleClass="custom-row-style"
+        (showRowActionsMenu)="onShowRowActionsMenu($event)"
+        (executeRowAction)="onExecuteRowAction($event)"
+        (row-click)="onRowClick($event)"
+        (row-dblclick)="onRowDblClick($event)">
+      <!-- HTML column definition demo -->
+        <!--
+        <data-columns>
+            <data-column type="image" key="icon" [sortable]="false"></data-column>
+            <data-column key="id" title="Id"></data-column>
+            <data-column key="createdOn" title="Created"></data-column>
+            <data-column key="name" title="Name" class="full-width name-column"></data-column>
+            <data-column key="createdBy.name" title="Created By"></data-column>
+        </data-columns>
+        -->
+    </alfresco-datatable>
+</div>
+<div class="p-10" data-automation-id="multiselect">
+    <md-checkbox [(ngModel)]="multiselect">Multiselect</md-checkbox>
 </div>
 <div class="p-10">
-    <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>
+    <p>For 'Multiple' selection mode use Cmd (macOS) or Ctrl (Win) to toggle selection of multiple items.</p>
+    <md-select placeholder="Selection Mode" [(ngModel)]="selectionMode" name="food">
+        <md-option *ngFor="let mode of selectionModes" [value]="mode.value">
+            {{mode.viewValue}}
+        </md-option>
+    </md-select>
 </div>
 <div class="p-10">
-    <button
-            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>
+    <button md-raised-button (click)="getRowForNode()">Load Node</button>
 </div>

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

@@ -15,33 +15,37 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
-import {
-    ObjectDataTableAdapter,
-    DataSorting,
-    ObjectDataRow,
-    ObjectDataColumn
-} from 'ng2-alfresco-datatable';
-
-declare let __moduleName: string;
+import { Component, Input } from '@angular/core';
+import { AlfrescoApiService } from 'ng2-alfresco-core';
+import { DataCellEvent, DataRowActionEvent, DataSorting, ObjectDataColumn, ObjectDataRow, ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
+import { Observable } from 'rxjs/Rx';
 
 @Component({
-    moduleId: __moduleName,
     selector: 'datatable-demo',
-    templateUrl: './datatable-demo.component.html'
+    templateUrl: './datatable-demo.component.html',
+    styleUrls: ['./datatable-demo.component.css']
 })
 export class DataTableDemoComponent {
 
     multiselect: boolean = false;
     data: ObjectDataTableAdapter;
 
+    @Input()
+    selectionMode = 'single';
+
+    selectionModes = [
+        { value: 'none', viewValue: 'None' },
+        { value: 'single', viewValue: 'Single' },
+        { value: 'multiple', viewValue: 'Multiple' }
+    ];
+
     private _imageUrl: string = 'http://placehold.it/140x100';
     private _createdBy: any = {
         name: 'Denys Vuika',
         email: 'denys.vuika@alfresco.com'
     };
 
-    constructor() {
+    constructor(private apiService: AlfrescoApiService) {
         this.reset();
     }
 
@@ -78,11 +82,11 @@ export class DataTableDemoComponent {
                 }
             ],
             [
-                {type: 'image', key: 'icon', title: '', srTitle: 'Thumbnail'},
-                {type: 'text', key: 'id', title: 'Id', sortable: true},
-                {type: 'text', key: 'createdOn', title: 'Created On', sortable: true},
-                {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
-                {type: 'text', key: 'createdBy.name', title: 'Created By', sortable: true}
+                { type: 'image', key: 'icon', title: '', srTitle: 'Thumbnail' },
+                { type: 'text', key: 'id', title: 'Id', sortable: true },
+                { type: 'text', key: 'createdOn', title: 'Created On', sortable: true },
+                { type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true },
+                { type: 'text', key: 'createdBy.name', title: 'Created By', sortable: true }
             ]
         );
 
@@ -145,4 +149,58 @@ 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);
+    }
+
+    getRowForNode() {
+        let opts: any = {
+            includeSource: true,
+            include: ['path', 'properties', 'allowableOperations']
+        };
+
+        Observable.fromPromise(this.apiService.getInstance().nodes
+            .getNodeInfo('-my-', opts)).subscribe((data) => {
+                console.log('FUnNy');
+                console.log(data);
+                let objects = new ObjectDataTableAdapter([
+                    {
+                        id: data.id,
+                        name: data.name,
+                        createdBy: data.createdByUser.displayName,
+                        createdOn: new Date(data.createdAt),
+                        icon: 'material-icons://face'
+                    }],
+                    [
+                        { type: 'image', key: 'icon', title: '', srTitle: 'Thumbnail' },
+                        { type: 'text', key: 'id', title: 'Id', sortable: true },
+                        { type: 'text', key: 'createdOn', title: 'Created On', sortable: true },
+                        { type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true },
+                        { type: 'text', key: 'createdBy.name', title: 'Created By', sortable: true }
+                    ]);
+                this.data = objects;
+            });
+    }
 }

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

@@ -0,0 +1,13 @@
+<adf-toolbar>
+    <adf-toolbar-title>
+        <md-select [(ngModel)]="selectedSource">
+            <md-option *ngFor="let source of sources" [value]="source.value">
+                {{ source.title }}
+            </md-option>
+        </md-select>
+    </adf-toolbar-title>
+</adf-toolbar>
+<adf-document-list
+    [currentFolderId]="selectedSource"
+    locationFormat="/files">
+</adf-document-list>

demo-shell-ng2/app/components/files/custom-sources.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, Input } from '@angular/core';
+
+@Component({
+    selector: 'adf-custom-sources-demo',
+    templateUrl: 'custom-sources.component.html'
+})
+export class CustomSourcesComponent {
+
+    @Input()
+    selectedSource = '-recent-';
+
+    sources = [
+        { title: 'Favorites', value: '-favorites-' },
+        { title: 'Recent', value: '-recent-' },
+        { title: 'Shared Links', value: '-sharedlinks-' },
+        { title: 'Sites', value: '-sites-' },
+        { title: 'Trashcan', value: '-trashcan-' },
+        { title: 'Root', value: '-root-' },
+        { title: 'My', value: '-my-' },
+        { title: 'Shared', value: '-shared-' }
+    ];
+}

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

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

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

@@ -1,196 +1,341 @@
-<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)">
+<div class="container">
+    <div class="adf-demo-site-container-style" id="demo-container">
+        <adf-sites-dropdown (change)="getSiteContent($event)">
+        </adf-sites-dropdown>
+    </div>
+    <alfresco-upload-drag-area
+        [parentId]="documentList.currentFolderId"
+        [versioning]="versioning"
+        [adf-node-permission]="'create'"
+        [adf-nodes]="getCurrentDocumentListNode()">
+        <div *ngIf="errorMessage" class="error-message">
+            <button (click)="resetError()" md-icon-button>
+                <md-icon>highlight_off</md-icon>
+            </button>
+            <span class="error-message--text">{{errorMessage}}</span>
+        </div>
+        <adf-toolbar [color]="toolbarColor">
+            <adf-toolbar-title>
+                <adf-breadcrumb *ngIf="!useDropdownBreadcrumb"
+                    class="files-breadcrumb"
+                    root="Personal Files"
+                    [target]="documentList"
+                    [folderNode]="documentList.folderNode">
+                </adf-breadcrumb>
+                <adf-dropdown-breadcrumb  *ngIf="useDropdownBreadcrumb"
+                    class="files-breadcrumb"
+                    [target]="documentList"
+                    [folderNode]="documentList.folderNode">
+                </adf-dropdown-breadcrumb>
+            </adf-toolbar-title>
+
+            <adf-toolbar-divider></adf-toolbar-divider>
+
+            <button md-icon-button
+                (click)="onCreateFolderClicked($event)">
+                <md-icon>create_new_folder</md-icon>
+            </button>
+            <button md-icon-button
+                [disabled]="!hasSelection(documentList.selection)"
+                title="Download"
+                (click)="downloadNodes(documentList.selection)">
+                <md-icon>get_app</md-icon>
+            </button>
+            <button md-icon-button
+                    adf-node-permission="delete"
+                    [adf-nodes]="documentList.selection">
+                <md-icon>delete</md-icon>
+            </button>
+
+            <button md-icon-button [mdMenuTriggerFor]="themePicker">
+                <md-icon>format_color_fill</md-icon>
+            </button>
+
+            <md-menu #themePicker="mdMenu">
+                <button md-menu-item (click)="toolbarColor = 'default'">Default</button>
+                <button md-menu-item (click)="toolbarColor = 'primary'">Primary</button>
+                <button md-menu-item (click)="toolbarColor = 'accent'">Accent</button>
+                <button md-menu-item (click)="toolbarColor = 'warn'">Warn</button>
+            </md-menu>
+
+            <adf-toolbar-divider></adf-toolbar-divider>
+
+            <button md-icon-button [mdMenuTriggerFor]="menu">
+                <md-icon>more_vert</md-icon>
+            </button>
+            <md-menu #menu="mdMenu">
+                <button md-menu-item>
+                    <md-icon>dialpad</md-icon>
+                    <span>Redial</span>
+                </button>
+                <button md-menu-item disabled>
+                    <md-icon>voicemail</md-icon>
+                    <span>Check voicemail</span>
+                </button>
+                <button md-menu-item>
+                    <md-icon>notifications_off</md-icon>
+                    <span>Disable alerts</span>
+                </button>
+            </md-menu>
+        </adf-toolbar>
+        <adf-document-list
+                #documentList
+                [permissionsStyle]="permissionsStyle"
+                [currentFolderId]="currentFolderId"
+                [contextMenuActions]="true"
+                [contentActions]="true"
+                [allowDropFiles]="true"
+                [selectionMode]="selectionMode"
+                [multiselect]="multiselect"
+                (error)="onNavigationError($event)"
+                (success)="resetError()"
+                (preview)="showFile($event)"
+                (folderChange)="onFolderChange($event)"
+                (permissionError)="handlePermissionError($event)">
+            <data-columns>
+                <data-column
+                    key="$thumbnail"
+                    type="image"
+                    [sortable]="false"
+                    class="image-table-cell">
+                </data-column>
+                <data-column
+                    key="name"
+                    title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
+                    [formatTooltip]="getNodeNameTooltip"
+                    class="full-width ellipsis-cell">
+                </data-column>
+                <!-- Location column demo -->
                 <!--
-                <empty-folder-content>
-                    <template>
-                        <h1>Sorry, no content here</h1>
-                    </template>
-                </empty-folder-content>
+                <data-column
+                    key="path"
+                    type="location"
+                    format="/files"
+                    title="Location">
+                </data-column>
                 -->
-                <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>
-                    <!--
-                    <content-column
-                            title="Type"
-                            source="content.mimeType">
-                    </content-column>
-                    -->
-                    <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>
+                <data-column
+                    key="content.sizeInBytes"
+                    title="Size"
+                    type="fileSize">
+                </data-column>
+                <!-- Notes: has performance overhead due to multiple files/folders causing separate HTTP calls to get tags -->
+                <!--
+                <data-column
+                    title="{{'DOCUMENT_LIST.COLUMNS.TAG' | translate}}"
+                    key="id"
+                    class="full-width ellipsis-cell">
+                    <ng-template let-entry="$implicit">
+                        <alfresco-tag-node-list  [nodeId]="entry.data.getValue(entry.row, entry.col)"></alfresco-tag-node-list>
+                    </ng-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' | translate}}"
+                    key="createdAt"
+                    type="date"
+                    format="timeAgo"
+                    class="desktop-only">
+                </data-column>
+            </data-columns>
 
-                <content-actions>
-                    <!-- folder actions -->
-                    <content-action
-                            target="folder"
-                            title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.SYSTEM_1' | translate}}"
-                            handler="system1">
-                    </content-action>
-                    <content-action
-                            target="folder"
-                            title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.CUSTOM' | translate}}"
-                            (execute)="myFolderAction1($event)">
-                    </content-action>
-                    <content-action
-                            target="folder"
-                            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>
+            <content-actions>
+                <!-- folder actions -->
+                <content-action
+                    icon="content_copy"
+                    target="folder"
+                    title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.COPY' | translate}}"
+                    permission="update"
+                    [disableWithNoPermission]="true"
+                    (error)="onContentActionError($event)"
+                    (success)="onContentActionSuccess($event)"
+                    handler="copy">
+                </content-action>
+                <content-action
+                    icon="redo"
+                    target="folder"
+                    title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.MOVE' | translate}}"
+                    permission="update"
+                    [disableWithNoPermission]="true"
+                    (error)="onContentActionError($event)"
+                    (success)="onContentActionSuccess($event)"
+                    handler="move">
+                </content-action>
+                <content-action
+                    icon="delete"
+                    target="folder"
+                    permission="delete"
+                    [disableWithNoPermission]="true"
+                    title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.DELETE' | translate}}"
+                    (permissionEvent)="handlePermissionError($event)"
+                    handler="delete">
+                </content-action>
+                <!-- document actions -->
+                <content-action
+                    icon="content_copy"
+                    target="document"
+                    title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.COPY' | translate}}"
+                    permission="update"
+                    [disableWithNoPermission]="true"
+                    (error)="onContentActionError($event)"
+                    (success)="onContentActionSuccess($event)"
+                    handler="copy">
+                </content-action>
+                <content-action
+                    icon="redo"
+                    target="document"
+                    title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.MOVE' | translate}}"
+                    permission="update"
+                    [disableWithNoPermission]="true"
+                    (error)="onContentActionError($event)"
+                    (success)="onContentActionSuccess($event)"
+                    handler="move">
+                </content-action>
+                <content-action
+                    icon="delete"
+                    target="document"
+                    permission="delete"
+                    [disableWithNoPermission]="true"
+                    (permissionEvent)="handlePermissionError($event)"
+                    title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DELETE' | translate}}"
+                    (success)="onDeleteActionSuccess($event)"
+                    handler="delete">
+                </content-action>
+            </content-actions>
+        </adf-document-list>
+    </alfresco-upload-drag-area>
+</div>
 
-    <context-menu-holder></context-menu-holder>
+<context-menu-holder></context-menu-holder>
 
-    <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>
+<p>Current folder ID: {{ documentList.currentFolderId }}</p>
 
+<div class="p-10">
+    Selected Nodes:
+    <ul>
+        <li *ngFor="let node of documentList.selection">
+            {{ node.entry.name }}
+        </li>
+    </ul>
+</div>
 
-    <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 *ngIf="!useViewerDialog">
+        <md-slide-toggle [color]="'primary'" [(ngModel)]="useInlineViewer">Use inline viewer (no overlay)</md-slide-toggle>
+    </section>
 
+    <section>
+        <md-slide-toggle [color]="'primary'" [(ngModel)]="useViewerDialog">Use File Viewer dialog</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 [color]="'primary'" [(ngModel)]="multiselect">Multiselect (with checkboxes)</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 [color]="'primary'" [(ngModel)]="useDropdownBreadcrumb">Dropdown breadcrumb</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 [color]="'primary'" [(ngModel)]="multipleFileUpload">Multiple File Upload</md-slide-toggle>
+    </section>
+
+    <section>
+        <md-slide-toggle [color]="'primary'" [(ngModel)]="folderUpload">Folder upload</md-slide-toggle>
+    </section>
+
+    <section>
+        <md-slide-toggle [color]="'primary'" [(ngModel)]="acceptedFilesTypeShow">Custom extensions filter</md-slide-toggle>
+    </section>
+
+    <section>
+        <md-slide-toggle [color]="'primary'" [(ngModel)]="versioning">Enable versioning</md-slide-toggle>
+    </section>
+
+    <section>
+        <md-slide-toggle [color]="'primary'" [(ngModel)]="disableWithNoPermission">Disable upload button 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 mdInput 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
+            tooltip="Custom tooltip"
+            [disabled]="!enableUpload"
+            data-automation-id="multiple-file-upload"
+            [rootFolderId]="documentList.currentFolderId"
+            [multipleFiles]="multipleFileUpload"
+            [uploadFolders]="folderUpload"
+            [versioning]="versioning"
+            [adf-node-permission]="'create'"
+            [adf-nodes]="getCurrentDocumentListNode()"
+            (permissionEvent)="handlePermissionError($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
+            tooltip="Custom tooltip"
+            [disabled]="!enableUpload"
+            data-automation-id="multiple-file-upload"
+            [rootFolderId]="documentList.currentFolderId"
+            [acceptedFilesType]="acceptedFilesType"
+            [multipleFiles]="multipleFileUpload"
+            [uploadFolders]="folderUpload"
+            [versioning]="versioning"
+            [adf-node-permission]="'create'"
+            [adf-nodes]="getCurrentDocumentListNode()"
+            (permissionEvent)="handlePermissionError($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>
 
-<div *ngIf="fileShowed">
-    <alfresco-viewer [(showViewer)]="fileShowed"
-                     [fileNodeId]="fileNodeId"
-                     [overlayMode]="true">
-        <div class="mdl-spinner mdl-js-spinner is-active"></div>
-    </alfresco-viewer>
+<div class="p-10">
+    <p>For 'Multiple' selection mode use Cmd (macOS) or Ctrl (Win) to toggle selection of multiple items.</p>
+    <md-select placeholder="Selection Mode" [(ngModel)]="selectionMode" name="food">
+        <md-option *ngFor="let mode of selectionModes" [value]="mode.value">
+            {{mode.viewValue}}
+        </md-option>
+    </md-select>
 </div>
 
+<file-uploading-dialog #fileDialog></file-uploading-dialog>
+
+<div *ngIf="showViewer">
+    <ng-container *ngIf="!useInlineViewer">
+        <alfresco-viewer
+            [(showViewer)]="showViewer"
+            [fileNodeId]="fileNodeId"
+            [overlayMode]="true">
+
+            <extension-viewer [supportedExtensions]="['obj','3DS']" #extension>
+                <ng-template let-urlFileContent="urlFileContent" let-extension="extension" >
+                    <threed-viewer [urlFile]="urlFileContent" [extension]="extension" ></threed-viewer>
+                </ng-template>
+            </extension-viewer>
+
+        </alfresco-viewer>
+    </ng-container>
+
+    <ng-container *ngIf="useInlineViewer">
+        <div class="adf-not-overlay-viewer">
+            <alfresco-viewer
+                [(showViewer)]="showViewer"
+                [fileNodeId]="fileNodeId">
+            </alfresco-viewer>
+        </div>
+    </ng-container>
+</div>

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

@@ -15,78 +15,109 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { Router } from '@angular/router';
-import { AlfrescoAuthenticationService } from 'ng2-alfresco-core';
+import { ChangeDetectorRef, Component, Input, OnInit, Optional, ViewChild } from '@angular/core';
+import { MdDialog } from '@angular/material';
+import { ActivatedRoute, Params, Router } from '@angular/router';
+import { MinimalNodeEntity } from 'alfresco-js-api';
 import {
-    DocumentActionsService,
-    DocumentList,
-    ContentActionHandler,
-    DocumentActionModel,
-    FolderActionModel
-} from 'ng2-alfresco-documentlist';
-import { FormService } from 'ng2-activiti-form';
+    AlfrescoApiService, AlfrescoContentService, AlfrescoTranslationService, CreateFolderDialogComponent,
+    DownloadZipDialogComponent, FileUploadEvent, FolderCreatedEvent, NotificationService,
+    SiteModel, UploadService
+} from 'ng2-alfresco-core';
+import { DataColumn, DataRow } from 'ng2-alfresco-datatable';
+import { DocumentListComponent, PermissionStyleModel } from 'ng2-alfresco-documentlist';
 
-declare let __moduleName: string;
+import { ViewerService } from 'ng2-alfresco-viewer';
 
 @Component({
-    moduleId: __moduleName,
-    selector: 'files-component',
+    selector: 'adf-files-component',
     templateUrl: './files.component.html',
     styleUrls: ['./files.component.css']
 })
 export class FilesComponent implements OnInit {
-    currentPath: string = '/Sites/swsdp/documentLibrary';
+    // 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;
+    showViewer: boolean = false;
+
+    toolbarColor = 'default';
+    useDropdownBreadcrumb = false;
+    useViewerDialog = true;
+    useInlineViewer = false;
+
+    selectionModes = [
+        { value: 'none', viewValue: 'None' },
+        { value: 'single', viewValue: 'Single' },
+        { value: 'multiple', viewValue: 'Multiple' }
+    ];
+
+    @Input()
+    selectionMode = 'multiple';
+
+    @Input()
+    multiselect = 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;
 
-    constructor(private documentActions: DocumentActionsService,
-                public auth: AlfrescoAuthenticationService,
-                private formService: FormService,
-                private router: Router) {
-        documentActions.setHandler('my-handler', this.myDocumentActionHandler.bind(this));
-    }
+    @ViewChild(DocumentListComponent)
+    documentList: DocumentListComponent;
 
-    myDocumentActionHandler(obj: any) {
-        window.alert('my custom action handler');
-    }
+    permissionsStyle: PermissionStyleModel[] = [];
 
-    myCustomAction1(event) {
-        alert('Custom document action for ' + event.value.entry.name);
-    }
-
-    myFolderAction1(event) {
-        alert('Custom folder action for ' + event.value.entry.name);
+    constructor(private changeDetector: ChangeDetectorRef,
+                private apiService: AlfrescoApiService,
+                private notificationService: NotificationService,
+                private uploadService: UploadService,
+                private contentService: AlfrescoContentService,
+                private dialog: MdDialog,
+                private translateService: AlfrescoTranslationService,
+                private viewerService: ViewerService,
+                private router: Router,
+                @Optional() private route: ActivatedRoute) {
     }
 
     showFile(event) {
-        if (event.value.entry.isFile) {
-            this.fileNodeId = event.value.entry.id;
-            this.fileShowed = true;
+        if (this.useViewerDialog) {
+            if (event.value.entry.isFile) {
+                this.viewerService
+                    .showViewerForNode(event.value.entry)
+                    .then(result => {
+                        console.log(result);
+                    });
+            }
         } else {
-            this.fileShowed = false;
+            if (event.value.entry.isFile) {
+                this.fileNodeId = event.value.entry.id;
+                this.showViewer = true;
+            } else {
+                this.showViewer = false;
+            }
         }
     }
 
-    onFolderChanged(event?: any) {
-        if (event) {
-            this.currentPath = event.path;
-        }
-    }
-
-    toggleMultipleFileUpload() {
-        this.multipleFileUpload = !this.multipleFileUpload;
-        return this.multipleFileUpload;
+    onFolderChange($event) {
+        this.router.navigate(['/files', $event.value.id]);
     }
 
     toggleFolder() {
@@ -95,48 +126,181 @@ export class FilesComponent implements OnInit {
         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();
+                }
+            });
+        }
+
+        this.uploadService.fileUploadComplete.debounceTime(300).subscribe(value => this.onFileUploadEvent(value));
+        this.uploadService.fileUploadDeleted.subscribe((value) => this.onFileUploadEvent(value));
+        this.contentService.folderCreated.subscribe(value => this.onFolderCreated(value));
+
+        // this.permissionsStyle.push(new PermissionStyleModel('document-list__create', PermissionsEnum.CREATE));
+        // this.permissionsStyle.push(new PermissionStyleModel('document-list__disable', PermissionsEnum.NOT_CREATE, false, true));
     }
 
-    viewActivitiForm(event?: any) {
-        this.router.navigate(['/activiti/tasksnode', event.value.entry.id]);
+    getCurrentDocumentListNode(): MinimalNodeEntity[] {
+        if (this.documentList.folderNode) {
+            return [ { entry: this.documentList.folderNode } ];
+        } else {
+            return [];
+        }
     }
 
-    private setupBpmActions(actions: any[]) {
-        actions.map(def => {
-            let documentAction = new DocumentActionModel();
-            documentAction.title = 'Activiti: ' + (def.name || 'Unknown process');
-            documentAction.handler = this.getBpmActionHandler(def);
-            this.documentList.actions.push(documentAction);
+    onNavigationError(err: any) {
+        if (err) {
+            this.errorMessage = err.message || 'Navigation error';
+        }
+    }
 
-            let folderAction = new FolderActionModel();
-            folderAction.title = 'Activiti: ' + (def.name || 'Unknown process');
-            folderAction.handler = this.getBpmActionHandler(def);
-            this.documentList.actions.push(folderAction);
+    resetError() {
+        this.errorMessage = null;
+    }
+
+    onFileUploadEvent(event: FileUploadEvent) {
+        if (event && event.file.options.parentId === this.documentList.currentFolderId) {
+            this.documentList.reload();
+        }
+    }
+
+    onFolderCreated(event: FolderCreatedEvent) {
+        console.log('FOLDER CREATED');
+        console.log(event);
+        if (event && event.parentId === this.documentList.currentFolderId) {
+            this.documentList.reload();
+        }
+    }
+
+    handlePermissionError(event: any) {
+        this.notificationService.openSnackMessage(
+            `You don't have the ${event.permission} permission to ${event.action} the ${event.type} `,
+            4000
+        );
+    }
+
+    onContentActionError(errors) {
+        const errorStatusCode = JSON.parse(errors.message).error.statusCode;
+        let translatedErrorMessage: any;
+
+        switch (errorStatusCode) {
+            case 403:
+                translatedErrorMessage = this.translateService.get('OPERATION.ERROR.PERMISSION');
+                break;
+            case 409:
+                translatedErrorMessage = this.translateService.get('OPERATION.ERROR.CONFLICT');
+                break;
+            default:
+                translatedErrorMessage = this.translateService.get('OPERATION.ERROR.UNKNOWN');
+        }
+
+        this.notificationService.openSnackMessage(translatedErrorMessage.value, 4000);
+    }
+
+    onContentActionSuccess(message) {
+        let translatedMessage: any = this.translateService.get(message);
+        this.notificationService.openSnackMessage(translatedMessage.value, 4000);
+    }
+
+    onDeleteActionSuccess(message) {
+        this.uploadService.fileDeleted.next(message);
+    }
+
+    onCreateFolderClicked(event: Event) {
+        let dialogRef = this.dialog.open(CreateFolderDialogComponent);
+        dialogRef.afterClosed().subscribe(folderName => {
+            if (folderName) {
+                this.contentService.createFolder('', folderName, this.documentList.currentFolderId).subscribe(
+                    node => console.log(node),
+                    err => console.log(err)
+                );
+            }
         });
     }
 
-    private getBpmActionHandler(processDefinition: any): ContentActionHandler {
-        return function (obj: any, target?: any) {
-            window.alert(`Starting BPM process: ${processDefinition.id}`);
-        }.bind(this);
+    getSiteContent(site: SiteModel) {
+        this.currentFolderId = site && site.guid ? site.guid : '-my-';
+    }
+
+    hasSelection(selection: Array<MinimalNodeEntity>): boolean {
+        return selection && selection.length > 0;
+    }
+
+    downloadNodes(selection: Array<MinimalNodeEntity>) {
+        if (!selection || selection.length === 0) {
+            return;
+        }
+
+        if (selection.length === 1) {
+            this.downloadNode(selection[0]);
+        } else {
+            this.downloadZip(selection);
+        }
+    }
+
+    downloadNode(node: MinimalNodeEntity) {
+        if (node && node.entry) {
+            const entry = node.entry;
+
+            if (entry.isFile) {
+                this.downloadFile(node);
+            }
+
+            if (entry.isFolder) {
+                this.downloadZip([node]);
+            }
+        }
+    }
+
+    downloadFile(node: MinimalNodeEntity) {
+        if (node && node.entry) {
+            const contentApi = this.apiService.getInstance().content;
+
+            const url = contentApi.getContentUrl(node.entry.id, true);
+            const fileName = node.entry.name;
+
+            this.download(url, fileName);
+        }
+    }
+
+    downloadZip(selection: Array<MinimalNodeEntity>) {
+        if (selection && selection.length > 0) {
+            const nodeIds = selection.map(node => node.entry.id);
+
+            const dialogRef = this.dialog.open(DownloadZipDialogComponent, {
+                width: '600px',
+                data: {
+                    nodeIds: nodeIds
+                }
+            });
+            dialogRef.afterClosed().subscribe(result => {
+                console.log(result);
+            });
+        }
+    }
+
+    download(url: string, fileName: string) {
+        if (url && fileName) {
+            const link = document.createElement('a');
+
+            link.style.display = 'none';
+            link.download = fileName;
+            link.href = url;
+
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+    }
+
+    getNodeNameTooltip(row: DataRow, col: DataColumn): string {
+        if (row) {
+            return row.getValue('name');
+        }
+        return null;
     }
 }

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,30 @@
+.adf-home-card {
+    float: left;
+    margin: 10px 10px 10px 10px;
+    width: 290px;
+    display: block;
+    overflow-y: auto;
+    height: 400px;
+}
+
+.adf-home-card-title {
+    padding: 24px;
+    cursor: pointer;
+    height: 55px;
+    margin: -63px -24px 18px -25px !important;
+}
+
+.adf-home-card__text {
+    font-size: 16px;
+    line-height: 18px;
+}
+
+.adf-home-feature-list {
+    list-style: none;
+    padding-left: 0;
+}
+
+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-->
+<md-card class="adf-home-card">
+        <md-card-title class="adf-home-card-title adf-primary-background-color"  routerLink="/files">
+            <h2 >
+                <md-icon>dvr</md-icon>
+                <span class="adf-home-card__text">DocumentList - Content Services</span>
+            </h2>
+        </md-card-title>
+    <md-card-content>
+        Demonstrates multiple Alfresco Content Services components used together to display the files of your Content Services instance:
+        <ul class="adf-home-feature-list">
+            <li>
+                <md-icon>brightness_1</md-icon>
+                <span class="adf-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>
+                <md-icon>dvr</md-icon>
+                <span class="adf-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>
+                <md-icon>file_upload</md-icon>
+                <span class="adf-home-feature-list__text">Upload</span>
+                <a href="https://www.npmjs.com/package/ng2-alfresco-upload" target="_blank">ng2-alfresco-upload</a>
+            </li>
+            <li>
+                <md-icon>view_module</md-icon>
+                <span class="adf-home-feature-list__text">DataTable</span>
+                <a href="https://www.npmjs.com/package/ng2-alfresco-datatable" target="_blank">ng2-alfresco-datatable</a>
+            </li>
+        </ul>
+    </md-card-content>
+</md-card>
+
+
+<!-- Process Services-->
+<md-card class="adf-home-card">
+        <md-card-title class="adf-home-card-title adf-primary-background-color"  routerLink="/activiti">
+            <h2 >
+                <md-icon>apps</md-icon>
+                <span class="adf-home-card__text">Process Services</span>
+            </h2>
+        </md-card-title>
+    <md-card-content>
+        Demonstrates multiple Alfresco Process Services components used together to show your Process Services process and tasks:
+        <ul class="adf-home-feature-list">
+            <li>
+                <md-icon>brightness_1</md-icon>
+                <span class="adf-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>
+                <md-icon>view_module</md-icon>
+                <span class="adf-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>
+                <md-icon>view_headline</md-icon>
+                <span class="adf-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>
+                <md-icon>view_headline</md-icon>
+                <span class="adf-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>
+                <md-icon>view_quilt</md-icon>
+                <span class="adf-home-feature-list__text">Form</span>
+                <a href="https://www.npmjs.com/package/ng2-activiti-form" target="_blank">ng2-activiti-form</a>
+            </li>
+            <li>
+                <md-icon>pie_chart</md-icon>
+                <span class="adf-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>
+                <md-icon>view_module</md-icon>
+                <span class="adf-home-feature-list__text">DataTable</span>
+                <a href="https://www.npmjs.com/package/ng2-alfresco-datatable" target="_blank">ng2-alfresco-datatable</a>
+            </li>
+        </ul>
+    </md-card-content>
+</md-card>
+
+
+<!-- DATATABLE-->
+<md-card class="adf-home-card">
+        <md-card-title class="adf-home-card-title adf-primary-background-color"  routerLink="/datatable">
+            <h2 >
+                <md-icon>view_module</md-icon>
+                <span class="adf-home-card__text">DataTable - Content Services & Process Services</span>
+            </h2>
+        </md-card-title>
+    <md-card-content>
+        Basic table component:
+        <ul class="adf-home-feature-list">
+            <li>
+                <md-icon>brightness_1</md-icon>
+                <span class="adf-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>
+    </md-card-content>
+</md-card>
+
+<!-- UPLOADER-->
+<md-card class="adf-home-card">
+        <md-card-title class="adf-home-card-title adf-primary-background-color"  routerLink="/uploader">
+            <h2 >
+                <md-icon>file_upload</md-icon>
+                <span class="adf-home-card__text">Uploader - Content Services</span>
+            </h2>
+        </md-card-title>
+    <md-card-content>
+        Basic table uploader component for the Content Services & Process Services:
+        <ul class="adf-home-feature-list">
+            <li>
+                <md-icon>brightness_1</md-icon>
+                <span class="adf-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>
+    </md-card-content>
+</md-card>
+
+<!-- LOGIN-->
+<md-card class="adf-home-card">
+        <md-card-title class="adf-home-card-title adf-primary-background-color"  routerLink="/login">
+            <h2 >
+                <md-icon>account_circle</md-icon>
+                <span class="adf-home-card__text">Login - Content Services & Process Services</span>
+            </h2>
+        </md-card-title>
+    <md-card-content>
+        Login component for the Content Services and Process Services:
+        <ul class="adf-home-feature-list">
+            <li>
+                <md-icon>brightness_1</md-icon>
+                <span class="adf-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>
+    </md-card-content>
+</md-card>
+
+<!-- WEBSCRIPT-->
+<md-card class="adf-home-card">
+    <md-card-title class="adf-home-card-title adf-primary-background-color"  routerLink="/webscript">
+        <h2 >
+            <md-icon>extension</md-icon>
+            <span class="adf-home-card__text">Webscript - Content Services</span>
+        </h2>
+    </md-card-title>
+    <md-card-content>
+        Displays and creates webscripts in your Content Services instance:
+        <ul class="adf-home-feature-list">
+            <li>
+                <md-icon>brightness_1</md-icon>
+                <span class="adf-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>
+    </md-card-content>
+</md-card>
+
+<!-- TAG-->
+<md-card class="adf-home-card">
+        <md-card-title class="adf-home-card-title adf-primary-background-color"  routerLink="/tag">
+            <h2 >
+                <md-icon>local_offer</md-icon>
+                <span class="adf-home-card__text">Tag - Content Services</span>
+            </h2>
+        </md-card-title>
+    <md-card-content>
+        Displays and adds tags to the node of your Content Services instance:
+        <ul class="adf-home-feature-list">
+            <li>
+                <md-icon>brightness_1</md-icon>
+                <span class="adf-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>
+    </md-card-content>
+</md-card>

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

@@ -0,0 +1,36 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { HomeComponent } from './home.component';
+import { CoreModule } from 'ng2-alfresco-core';
+
+describe('HomeComponent', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+        imports: [CoreModule],
+        declarations: [HomeComponent],
+        schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    });
+  });
+
+  it ('should work', () => {
+    let fixture = TestBed.createComponent(HomeComponent);
+    expect(fixture.componentInstance instanceof HomeComponent).toBe(true, 'should create HomeComponent');
+  });
+});

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

@@ -0,0 +1,25 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'home-view',
+    templateUrl: './home.component.html',
+    styleUrls: ['./home.component.css']
+})
+export class HomeComponent {}

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

@@ -15,15 +15,22 @@
  * limitations under the License.
  */
 
+export { HomeComponent } from './home/home.component';
 export { DataTableDemoComponent } from './datatable/datatable-demo.component';
 export { SearchComponent } from './search/search.component';
 export { SearchBarComponent } from './search/search-bar.component';
 export { LoginDemoComponent } from './login/login-demo.component';
 export { ActivitiDemoComponent } from './activiti/activiti-demo.component';
-export { FormViewer } from './activiti/form-viewer.component';
+export { ActivitiTaskAttachmentsComponent } from './activiti/activiti-task-attachments.component';
+export { ActivitiProcessAttachmentsComponent } from './activiti/activiti-process-attachments.component';
+export { ActivitiShowDiagramComponent } from './activiti/activiti-show-diagram.component';
+export { FormViewerComponent } from './activiti/form-viewer.component';
 export { WebscriptComponent } from './webscript/webscript.component';
 export { TagComponent } from './tag/tag.component';
+export { SocialComponent } from './social/social.component';
 export { AboutComponent } from './about/about.component';
 export { FilesComponent } from './files/files.component';
-export { FormNodeViewer } from './activiti/form-node-viewer.component';
-export { SettingComponent } from './setting/setting.component';
+export { FormNodeViewerComponent } from './activiti/form-node-viewer.component';
+export { ActivitiAppsViewComponent } from './activiti/apps.view';
+export { SettingsComponent } from './settings/settings.component';
+export { FormDemoComponent } from './form/form-demo.component';

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

@@ -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;
+    background-color: rgb(68,138,255);
+    color: rgb(255,255,255);
 }
-.banned{
-    width:130px;margin: 10px;
+
+.settings {
+    border-radius: 8px;
+    position: absolute;
+    background-color: papayawhip;
+    color: cadetblue;
+    left: 10px;
+    top: 10px;
+    z-index: 1;
 }
 
 .toggle {
-    width:120px;margin: 20px;
+    width: 190px;
+    margin: 5px;
+    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;
+    }
+}
+
+.settings >>> .mat-slide-toggle-thumb-container {
+    cursor: pointer;
 }

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

@@ -1,36 +1,95 @@
-<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>
-        </label>
+        <md-slide-toggle
+            id="switch1"
+            [color]="'primary'"
+            (change)="toggleECM()"
+            [checked]="isECM">
+            Content Services
+        </md-slide-toggle>
     </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>
-        </label>
+        <md-slide-toggle
+            id="switch2"
+            [color]="'primary'"
+            (change)="toggleBPM()"
+            [checked]="isBPM">
+            Process Services
+        </md-slide-toggle>
     </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>
-            <span class="mdl-switch__label">CSRF</span>
-        </label>
+        <md-slide-toggle
+            id="switch3"
+            [color]="'primary'"
+            (change)="toggleCSRF()"
+            [checked]="!disableCsrf">
+            CSRF
+        </md-slide-toggle>
     </p>
-    <p class="banned">
-        <label for="blacklistusername">Banned username</label><br>
-        <input id="blacklistusername" type="text" placeholder="banned username" [(ngModel)]="blackListUsername"/>
+    <p class="toggle">
+        <md-slide-toggle
+            id="switch4"
+            [color]="'primary'"
+            (change)="toggleFooter()"
+            [checked]="showFooter">
+            Login footer
+        </md-slide-toggle>
     </p>
 </div>
 
-<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>
+<!--SETTING BUTTON-->
+
+<a md-fab class="setting-button" data-automation-id="settings" href="" routerLink="/settings" >
+    <md-icon>settings</md-icon>
 </a>
-<alfresco-login [providers]="providers" [fieldsValidation]="customValidation" [disableCsrf]="disableCsrf"
-                (executeSubmit)="validateForm($event)"
+
+<alfresco-login #alfrescologin
+                [providers]="providers"
+                [fieldsValidation]="customValidation"
+                [disableCsrf]="disableCsrf"
+                [showLoginActions]="showFooter"
+                [showRememberMe]="showFooter"
+                copyrightText="© 2016 Alfresco Software, Inc. All Rights Reserved. (customised text)"
                 (onSuccess)="onLogin($event)"
-                (onError)="onError($event)" #alfrescologin></alfresco-login>
+                (onError)="onError($event)">
+    <div class="mobile-settings">
+        <p>
+            <md-slide-toggle
+                id="switch1-mobile"
+                [color]="'primary'"
+                (click)="toggleECM()"
+                [checked]="isECM">
+                Content Services
+            </md-slide-toggle>
+        </p>
+        <p>
+            <md-slide-toggle
+                id="switch2-mobile"
+                [color]="'primary'"
+                (click)="toggleBPM()"
+                [checked]="isBPM">
+                Process Services
+            </md-slide-toggle>
+        </p>
+        <p>
+            <md-slide-toggle
+                id="switch3-mobile"
+                [color]="'primary'"
+                (click)="toggleCSRF()"
+                [checked]="!disableCsrf">
+                CSRF
+            </md-slide-toggle>
+        </p>
+        <p>
+            <md-slide-toggle
+                id="switch4-mobile"
+                [color]="'primary'"
+                (click)="toggleFooter()"
+                [checked]="showFooter">
+                Login footer
+            </md-slide-toggle>
+        </p>
+    </div>
+</alfresco-login>

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

@@ -15,14 +15,12 @@
  * limitations under the License.
  */
 
-import { Component, ViewChild, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { Validators } from '@angular/forms';
-
-declare let __moduleName: string;
+import { Router } from '@angular/router';
+import { LogService, StorageService } 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;
+    showFooter: boolean = true;
+    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;
@@ -77,47 +78,44 @@ export class LoginDemoComponent implements OnInit {
     }
 
     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;
     }
 
-    validateForm(event: any) {
-        let values = event.values;
-        if (values.controls['username'].value === this.blackListUsername) {
-            this.alfrescologin.addCustomFormError('username', 'This particular username has been blocked');
-            event.preventDefault();
-        }
+    toggleFooter() {
+        this.showFooter = !this.showFooter;
     }
 
+    updateProvider() {
+        if (this.isBPM && this.isECM) {
+            this.providers = 'ALL';
+            return this.providers;
+        }
+
+        if (this.isECM) {
+            this.providers = 'ECM';
+            return this.providers;
+        }
+
+        if (this.isBPM) {
+            this.providers = 'BPM';
+            return this.providers;
+        }
+
+        this.providers = '';
+        return this.providers;
+    }
 }

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

@@ -1,15 +1,15 @@
 <alfresco-search-control *ngIf="isLoggedIn()"
                          [searchTerm]="searchTerm"
                          [autocomplete]="false"
-                         [liveSearchResultType]="'cm:content'"
+                         [highlight]="true"
                          (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>
+    <md-spinner></md-spinner>
 </alfresco-viewer>

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

@@ -17,12 +17,10 @@
 
 import { Component, EventEmitter, Output } from '@angular/core';
 import { Router } from '@angular/router';
+import { MinimalNodeEntity } from 'alfresco-js-api';
 import { AlfrescoAuthenticationService } from 'ng2-alfresco-core';
 
-declare let __moduleName: string;
-
 @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,14 @@
 <div class="search-results-container">
     <h1>Search results</h1>
-    <alfresco-search [resultType]="'cm:content'" (preview)="onFileClicked($event)"></alfresco-search>
+    <alfresco-search
+        [navigate]="false"
+        (nodeDbClick)="nodeDbClick($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">
+        <md-spinner></md-spinner>
+    </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,26 @@ declare let __moduleName: string;
 })
 export class SearchComponent {
 
-    fileShowed: boolean = false;
     fileNodeId: string;
+    fileShowed: boolean = false;
 
-    onFileClicked(event) {
-        if (event.value.entry.isFile) {
-            this.fileNodeId = event.value.entry.id;
+    constructor(public router: Router) {
+    }
+
+    nodeDbClick($event: any) {
+        if ($event.value.entry.isFolder) {
+            this.router.navigate(['/files', $event.value.entry.id]);
+        } else {
+            this.showFile($event);
+        }
+    }
+
+    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

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

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

@@ -1,30 +0,0 @@
-<div class="setting-container">
-    <div style="display: table-row">
-        <div class="setting-card-padding"></div>
-        <div class="setting-card mdl-card mdl-shadow--2dp">
-            <div class="mdl-card__title mdl-card--expand">
-                <h2 class="mdl-card__title-text">SETTINGS</h2>
-            </div>
-            <div class="mdl-card__actions mdl-card--border">
-                <div class="mdl-card__supporting-text">
-                    ECM 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}}"/>
-                </nav>
-
-                <div class="mdl-card__supporting-text">
-                    BPM 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}}"/>
-                </nav>
-            </div>
-        </div>
-        <div class="setting-card-padding"></div>
-    </div>
-</div>

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

@@ -1,55 +0,0 @@
-/*!
- * @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 {
-    AlfrescoSettingsService
-} from 'ng2-alfresco-core';
-
-declare let __moduleName: string;
-
-@Component({
-    moduleId: __moduleName,
-    selector: 'alfresco-setting-demo',
-    templateUrl: './setting.component.html',
-    styleUrls: ['./setting.component.css']
-})
-export class SettingComponent {
-
-    ecmHost: string;
-    bpmHost: string;
-
-    constructor(public alfrescoSettingsService: AlfrescoSettingsService) {
-        this.ecmHost = this.alfrescoSettingsService.ecmHost;
-        this.bpmHost = this.alfrescoSettingsService.bpmHost;
-    }
-
-    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);
-    }
-
-    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);
-    }
-
-}

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

@@ -0,0 +1,20 @@
+.adf-setting-container {
+    display: table;
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+.adf-setting-card {
+    width: 400px;
+}
+
+.full-width {
+    width: 100%;
+}
+
+.adf-setting-card-padding {
+    width: 50%;
+    display: table-cell;
+    vertical-align: middle;
+    margin: 0;
+}

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

@@ -0,0 +1,61 @@
+<div class="adf-setting-container">
+    <div class="adf-setting-card-padding"></div>
+    <md-toolbar color="primary" >
+        <h3>{{'SETTINGS.TITLE' | translate}}</h3>
+    </md-toolbar>
+
+    <md-card class="adf-setting-card">
+        <md-card-content>
+
+            <md-card-subtitle>{{'SETTINGS.CS-HOST' | translate }}</md-card-subtitle>
+
+            <md-input-container class="full-width">
+                <md-icon mdPrefix>link</md-icon>
+                <input mdInput
+                       [formControl]="urlFormControlEcm"
+                       data-automation-id="ecmHost"
+                       type="text"
+                       (change)="onChangeECMHost($event)"
+                       tabindex="2"
+                       id="ecmHost"
+                       value="{{ecmHost}}"
+                       placeholder="http(s)://host|ip:port(/path)">
+                <md-error *ngIf="urlFormControlEcm.hasError('pattern')">
+                    ECM host is not valid! http(s)://host|ip:port(/path)
+                </md-error>
+            </md-input-container>
+            <p>
+            <p>
+            <md-card-subtitle>{{'SETTINGS.BP-HOST' | translate }}</md-card-subtitle>
+
+            <md-input-container class="full-width">
+                <md-icon mdPrefix>link</md-icon>
+                <input mdInput
+                       [formControl]="urlFormControlBpm"
+                       data-automation-id="bpmHost"
+                       type="text"
+                       (change)="onChangeBPMHost($event)"
+                       tabindex="2"
+                       id="bpmHost"
+                       value="{{bpmHost}}"
+                       placeholder="http(s)://host|ip:port(/path)">
+                <md-error *ngIf="urlFormControlBpm.hasError('pattern')">
+                    BPM host is not valid! http(s)://host|ip:port(/path)
+                </md-error>
+            </md-input-container>
+
+        </md-card-content>
+        <md-card-actions>
+
+            <button md-button onclick="window.history.back()" color="primary">
+                {{'SETTINGS.BACK' | translate }}
+            </button>
+
+            <button md-button onclick="window.location.href = '/'" color="primary">
+                {{'SETTINGS.APPLY' | translate }}
+            </button>
+
+        </md-card-actions>
+    </md-card>
+    <div class="adf-setting-card-padding"></div>
+</div>

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

@@ -0,0 +1,69 @@
+/*!
+ * @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 { FormControl, Validators } from '@angular/forms';
+import { AlfrescoSettingsService, LogService, StorageService } from 'ng2-alfresco-core';
+
+@Component({
+    selector: 'app-settings',
+    templateUrl: 'settings.component.html',
+    styleUrls: ['settings.component.css']
+})
+export class SettingsComponent {
+
+    HOST_REGEX: string = '^(http|https):\/\/.*[^/]$';
+
+    ecmHost: string;
+    bpmHost: string;
+    urlFormControlEcm = new FormControl('', [Validators.required, Validators.pattern(this.HOST_REGEX)]);
+    urlFormControlBpm = new FormControl('', [Validators.required, Validators.pattern(this.HOST_REGEX)]);
+
+    constructor(private settingsService: AlfrescoSettingsService,
+                private storage: StorageService,
+                private logService: LogService) {
+        this.ecmHost = storage.getItem('ecmHost') || this.settingsService.ecmHost;
+        this.bpmHost = storage.getItem('bpmHost') || this.settingsService.bpmHost;
+    }
+
+    public onChangeECMHost(event: KeyboardEvent): void {
+        let value = (<HTMLInputElement>event.target).value.trim();
+        if (value && this.isValidUrl(value)) {
+            this.logService.info(`ECM host: ${value}`);
+            this.ecmHost = value;
+            this.storage.setItem(`ecmHost`, value);
+        } else {
+            console.error('Ecm address does not match the pattern');
+        }
+    }
+
+    public onChangeBPMHost(event: KeyboardEvent): void {
+        let value = (<HTMLInputElement>event.target).value.trim();
+        if (value && this.isValidUrl(value)) {
+            this.logService.info(`BPM host: ${value}`);
+            this.bpmHost = value;
+            this.storage.setItem(`bpmHost`, value);
+        } else {
+            console.error('Bpm address does not match the pattern');
+        }
+    }
+
+    isValidUrl(url: string) {
+        return /^(http|https):\/\/.*/.test(url);
+    }
+
+}

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

@@ -0,0 +1,16 @@
+<label for="nodeId"><b>Insert Node Id</b></label><br>
+<input id="nodeId" type="text" size="48" [(ngModel)]="nodeId"><br>
+<md-grid-list cols="2" rowHeight="100px">
+    <md-grid-tile>
+        <md-list>
+            <md-list-item> <div class="adf-social-title" >Like component</div> </md-list-item>
+            <md-list-item> <adf-like [nodeId]="nodeId"></adf-like></md-list-item>
+        </md-list>
+    </md-grid-tile>
+    <md-grid-tile>
+        <md-list>
+            <md-list-item> <div class="adf-social-title" >Rating component</div> </md-list-item>
+            <md-list-item> <adf-rating [nodeId]="nodeId"></adf-rating></md-list-item>
+        </md-list>
+    </md-grid-tile>
+</md-grid-list>

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

@@ -0,0 +1,3 @@
+.adf-social-title{
+
+}

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

@@ -0,0 +1,28 @@
+/*!
+ * @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',
+    templateUrl: 'social.component.html',
+    styleUrls: ['social.component.scss']
+})
+export class SocialComponent {
+
+    nodeId: string = '74cd8a96-8a21-47e5-9b3b-a1b3e296787d';
+}

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

@@ -0,0 +1,19 @@
+<label for="nodeId"><b>Insert Node Id</b></label><br>
+<input id="nodeId" type="text" size="48" [(ngModel)]="nodeId"><br>
+<div class="adf-tag-example-area">
+    <md-card>
+        <alfresco-tag-node-actions-list [nodeId]="nodeId"></alfresco-tag-node-actions-list>
+    </md-card>
+</div>
+<div class="adf-tag-example-area">
+    <md-card>
+        <div class="adf-tag-example-title">List Tags Content Services</div>
+        <alfresco-tag-list></alfresco-tag-list>
+    </md-card>
+</div>
+<div class="adf-tag-example-area">
+    <md-card>
+        <div class="adf-tag-example-title">Tag list By Node ID</div>
+        <alfresco-tag-node-list [nodeId]="nodeId"></alfresco-tag-node-list>
+    </md-card>
+</div>

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

@@ -0,0 +1,9 @@
+.adf-tag-example-area {
+    width: calc(33.3333333333% - 16px);
+    margin: 8px;
+    float: left;
+}
+
+.adf-tag-example-title {
+    padding-bottom: 12px;
+}

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

@@ -19,18 +19,8 @@ import { Component } from '@angular/core';
 
 @Component({
     selector: 'alfresco-tag-demo',
-    template: `
-                <label for="nodeId"><b>Insert Node Id</b></label><br>
-                <input id="nodeId" type="text" size="48"  [(ngModel)]="nodeId"><br>
-            <div class="mdl-grid">
-              <div class="mdl-cell mdl-cell--4-col"><alfresco-tag-node-actions-list [nodeId]="nodeId"></alfresco-tag-node-actions-list></div>
-              <div class="mdl-cell mdl-cell--4-col">List Tags ECM <alfresco-tag-list></alfresco-tag-list></div>
-              <div class="mdl-cell mdl-cell--4-col">
-                    Tag list By Node ID 
-                    <alfresco-tag-node-list [nodeId]="nodeId"></alfresco-tag-node-list>
-              </div>
-            </div>
-    `
+    templateUrl: 'tag.component.html',
+    styleUrls: ['tag.component.scss']
 })
 export class TagComponent {
 

demo-shell-ng2/app/components/theme-picker/style-manager/style-manager.ts

@@ -0,0 +1,45 @@
+import {Injectable} from '@angular/core';
+
+/**
+ * Class for managing stylesheets. Stylesheets are loaded into named slots so that they can be
+ * removed or changed later.
+ */
+@Injectable()
+export class StyleManager {
+  /**
+   * Set the stylesheet with the specified key.
+   */
+  setStyle(key: string, href: string) {
+    getLinkElementForKey(key).setAttribute('href', href);
+  }
+
+  /**
+   * Remove the stylesheet with the specified key.
+   */
+  removeStyle(key: string) {
+    const existingLinkElement = getExistingLinkElementByKey(key);
+    if (existingLinkElement) {
+      document.head.removeChild(existingLinkElement);
+    }
+  }
+}
+
+function getLinkElementForKey(key: string) {
+  return getExistingLinkElementByKey(key) || createLinkElementWithKey(key);
+}
+
+function getExistingLinkElementByKey(key: string) {
+  return document.head.querySelector(`link[rel="stylesheet"].${getClassNameForKey(key)}`);
+}
+
+function createLinkElementWithKey(key: string) {
+  const linkEl = document.createElement('link');
+  linkEl.setAttribute('rel', 'stylesheet');
+  linkEl.classList.add(getClassNameForKey(key));
+  document.head.appendChild(linkEl);
+  return linkEl;
+}
+
+function getClassNameForKey(key: string) {
+  return `style-manager-${key}`;
+}

demo-shell-ng2/app/components/theme-picker/theme-picker.css

@@ -0,0 +1,26 @@
+.docs-theme-picker-menu .md-menu-content {
+    padding: 8px;
+}
+
+.docs-theme-picker-menu [md-menu-item] {
+    flex: 0 0 auto;
+    padding: 0;
+    overflow: hidden;
+}
+
+
+.docs-theme-picker-menu .docs-theme-picker-primary {
+    width: 25px;
+    height: 25px;
+}
+
+.docs-theme-picker-menu .docs-theme-picker-accent {
+     position: absolute;
+     bottom: 6px;
+     width: 100%;
+     height: 6px;
+ }
+
+.docs-theme-chosen-icon{
+    border-radius: 13px;
+}

demo-shell-ng2/app/components/theme-picker/theme-picker.html

@@ -0,0 +1,17 @@
+<button md-icon-button [md-menu-trigger-for]="themeMenu" mdTooltip="Select a theme!">
+    <md-icon>format_color_fill</md-icon>
+</button>
+
+<md-menu class="docs-theme-picker-menu" #themeMenu="mdMenu" x-position="before">
+    <md-list-item *ngFor="let theme of themes"  md-menu-item (click)="installTheme(theme)" >
+        <md-icon md-list-icon [mdTooltip]="theme.name" class="docs-theme-chosen-icon" [style.color]="theme.accent"
+                 [style.background]="theme.primary"
+                 *ngIf="currentTheme === theme">check_circle
+        </md-icon>
+        <md-icon md-list-icon [mdTooltip]="theme.name" class="docs-theme-chosen-icon" [style.color]="theme.accent"
+                 [style.background]="theme.primary"
+                 *ngIf="currentTheme !== theme">invert_colors
+        </md-icon>
+        {{theme.name}}
+    </md-list-item>
+</md-menu>

demo-shell-ng2/app/components/theme-picker/theme-picker.ts

@@ -0,0 +1,131 @@
+import {CommonModule} from '@angular/common';
+import {ChangeDetectionStrategy, Component, NgModule} from '@angular/core';
+import {
+    MdButtonModule, MdGridListModule, MdIconModule, MdMenuModule,
+    MdTooltipModule
+} from '@angular/material';
+import {StyleManager} from './style-manager/style-manager';
+import {DocsSiteTheme, ThemeStorage} from './theme-storage/theme-storage';
+
+@Component({
+    selector: 'theme-picker',
+    templateUrl: 'theme-picker.html',
+    styleUrls: ['theme-picker.css'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: {'aria-hidden': 'true'}
+})
+export class ThemePickerComponent {
+    currentTheme;
+
+    themes = [
+        {
+            primary: '#ff9800',
+            accent: '#3f51b5',
+            name: 'Developer Theme',
+            href: '',
+            isDefault: true
+        },
+        {
+            primary: '#00bcd4',
+            accent: '#ff9800',
+            name: 'ECM Cyan Orange',
+            href: 'adf-cyan-orange.css',
+            isDark: false
+        },
+        {
+            primary: '#00bcd4',
+            accent: '#3f51b5',
+            name: 'ECM Cyan Purple',
+            href: 'adf-cyan-purple.css',
+            isDark: false
+        },
+        {
+            primary: '#8bc34a',
+            accent: '#ff9800',
+            name: 'BPM Green Orange',
+            href: 'adf-green-orange.css',
+            isDark: false
+        },
+        {
+            primary: '#8bc34a',
+            accent: '#3f51b5',
+            name: 'BPM Green Purple',
+            href: 'adf-green-purple.css',
+            isDark: false
+        },
+        {
+            primary: '#3f51b5',
+            accent: '#ff4081',
+            name: 'Indigo Pink',
+            href: 'adf-indigo-pink.css',
+            isDark: false
+        },
+        {
+            primary: '#c2185b',
+            accent: '#b0bec5',
+            name: 'Pink Bluegrey Dark',
+            href: 'adf-pink-bluegrey.css',
+            isDark: false
+        },
+        {
+            primary: '#7b1fa2',
+            accent: '#69f0ae',
+            name: 'Purple Green Dark',
+            href: 'adf-purple-green.css',
+            isDark: false
+        },
+        {
+            primary: '#2196f3',
+            accent: '#ff9800',
+            name: 'ECM Blue Orange',
+            href: 'adf-blue-orange.css',
+            isDark: false
+        },
+        {
+            primary: '#2196f3',
+            accent: '#3f51b5',
+            name: 'ECM Blue Purple',
+            href: 'adf-blue-purple.css',
+            isDark: false
+        }
+    ];
+
+    constructor(public styleManager: StyleManager,
+                private _themeStorage: ThemeStorage) {
+
+    }
+
+    installTheme(theme: DocsSiteTheme) {
+        if (theme.isDefault === true) {
+            this.styleManager.setStyle('theme', ``);
+        } else {
+            this.currentTheme = this._getCurrentThemeFromHref(theme.href);
+
+            this.styleManager.setStyle('theme', `prebuilt-themes/${theme.href}`);
+
+            if (this.currentTheme) {
+                this._themeStorage.storeTheme(this.currentTheme);
+            }
+        }
+    }
+
+    private _getCurrentThemeFromHref(href: string): DocsSiteTheme {
+        return this.themes.find(theme => theme.href === href);
+    }
+}
+
+@NgModule({
+    imports: [
+        MdButtonModule,
+        MdIconModule,
+        MdMenuModule,
+        MdGridListModule,
+        MdTooltipModule,
+        CommonModule
+    ],
+    exports: [ThemePickerComponent],
+    declarations: [ThemePickerComponent],
+    providers: [StyleManager, ThemeStorage]
+})
+export class ThemePickerModule {
+}

demo-shell-ng2/app/components/theme-picker/theme-storage/theme-storage.ts

@@ -0,0 +1,39 @@
+import {EventEmitter, Injectable} from '@angular/core';
+
+export interface DocsSiteTheme {
+  href: string;
+  name: string;
+  accent: string;
+  primary: string;
+  isDark?: boolean;
+  isDefault?: boolean;
+}
+
+@Injectable()
+export class ThemeStorage {
+  static storageKey = 'docs-theme-storage-current';
+
+  public onThemeUpdate: EventEmitter<DocsSiteTheme> = new EventEmitter<DocsSiteTheme>();
+
+  public storeTheme(theme: DocsSiteTheme) {
+    try {
+      window.localStorage[ThemeStorage.storageKey] = JSON.stringify(theme);
+    } catch (e) { }
+
+    this.onThemeUpdate.emit(theme);
+  }
+
+  public getStoredTheme(): DocsSiteTheme {
+    try {
+      return JSON.parse(window.localStorage[ThemeStorage.storageKey] || null);
+    } catch (e) {
+      return null;
+    }
+  }
+
+  public clearStorage() {
+    try {
+      window.localStorage.removeItem(ThemeStorage.storageKey);
+    } catch (e) { }
+  }
+}

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

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

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

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