1.3.0 (#1795)

- fix navigation within process details
- fix ‘create task’ button name (was ‘start task’ previously)
- put ‘create task’ and ‘start process’ buttons to proper places in
layout

.github/ISSUE_TEMPLATE.md

@@ -10,12 +10,13 @@ Please ask before on our gitter channel https://gitter.im/Alfresco/alfresco-ng2-
 - [ ] New feature request
 - [ ] Bug  
 - [ ] Support request
+- [ ] Documentation
 ```
-**Current behavior:**
-<!-- Describe the current behavior. -->
+**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,8 +1,9 @@
 **Please check if the PR fulfills these requirements**
-- [ ] The commit message follows our [guidelines](https://github.com/Alfresco/alfresco-ng2-components/wiki/Commit-format)
-- [ ] Tests for the changes have been added (for bug fixes / features)
-- [ ] Docs have been added / updated (for bug fixes / features)
-
+```
+[ ] The commit message follows our [guidelines](https://github.com/Alfresco/alfresco-ng2-components/wiki/Commit-format)
+[ ] Tests for the changes have been added (for bug fixes / features)
+[ ] Docs have been added / updated (for bug fixes / features)
+```
 <!--
  Before submitting your PR, please check that your code follows our contribution guidelines:
  https://github.com/Alfresco/alfresco-ng2-components/wiki/Code-contribution-acceptance-criteria
@@ -19,11 +20,11 @@
 [ ] Other... Please describe:
 ```
 
-**What is the current behavior?** (You can also link to an open issue here)
+**What is the current behaviour?** (You can also link to an open issue here)
 
 
 
-**What is the new behavior?**
+**What is the new behaviour?**
 
 
 
@@ -35,4 +36,4 @@
 
 If this PR contains a breaking change, please describe the impact and migration path for existing applications: ...
 
-**Other information**:
+**Other information**:

.gitignore

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

.travis.yml

@@ -1,13 +1,9 @@
 language: node_js
 dist: trusty
 sudo: false
-
 node_js:
   - "5"
 
-addons:
-
-
 before_install:
   - "export DISPLAY=:99.0"
   - "sh -e /etc/init.d/xvfb start"
@@ -32,29 +28,32 @@ env:
 
 before_script:
   - if ([ "$MODULE" != "ng2-alfresco-core" ]); then
-        (cd ng2-components/ng2-alfresco-core; if [ ! -d "dist" ]; then npm install; fi; npm link);
+        (cd ng2-components/ng2-alfresco-core; if [ ! -d "bundles" ]; then npm install && npm run  build && npm link; fi);
     fi
   - if ([ "$MODULE" == "ng2-alfresco-documentlist" ] || [ "$MODULE" == "ng2-alfresco-webscript" ] || [ "$MODULE" == "ng2-activiti-processlist" ] || [ "$MODULE" == "ng2-activiti-tasklist" ]); then
-        (cd ng2-components/ng2-alfresco-datatable; npm link ng2-alfresco-core; if [ ! -d "dist" ]; then npm install; fi; npm link);
+        (cd ng2-components/ng2-alfresco-datatable; npm link ng2-alfresco-core; if [ ! -d "bundles" ]; then npm install && npm run  build && npm link; fi);
     fi
   - if ([ "$MODULE" == "ng2-activiti-tasklist" ] || [ "$MODULE" == "ng2-activiti-processlist" ]); then
-        (cd ng2-components/ng2-activiti-form; npm link ng2-alfresco-core; if [ ! -d "dist" ]; then npm install; fi; npm link);
+        (cd ng2-components/ng2-alfresco-datatable; npm link ng2-alfresco-core; if [ ! -d "bundles" ]; then npm install && npm run  build && npm link; fi);
+        (cd ng2-components/ng2-activiti-form; npm link ng2-alfresco-core; if [ ! -d "bundles" ]; then npm install && npm run  build && npm link; fi);
     fi
   - if ([ "$MODULE" == "ng2-activiti-processlist" ]); then
-        (cd ng2-components/ng2-activiti-tasklist; npm link ng2-alfresco-core; npm link ng2-alfresco-datatable; npm link ng2-activiti-form; if [ ! -d "dist" ]; then npm install; fi; npm link);
+        (cd ng2-components/ng2-alfresco-datatable; npm link ng2-alfresco-core; if [ ! -d "bundles" ]; then npm install && npm run  build && npm link; fi);
+        (cd ng2-components/ng2-activiti-form; npm link ng2-alfresco-core; if [ ! -d "bundles" ]; then npm install && npm run  build && npm link; fi);
+        (cd ng2-components/ng2-activiti-tasklist; npm link ng2-alfresco-core; npm link ng2-alfresco-datatable; npm link ng2-activiti-form; if [ ! -d "bundles" ]; then npm install && npm run  build && npm link; fi);
     fi
   - if ([ "$MODULE" == "ng2-activiti-analytics" ]); then
-        (cd ng2-components/ng2-activiti-diagrams; npm link ng2-alfresco-core; if [ ! -d "dist" ]; then npm install; fi; npm link);
+        (cd ng2-components/ng2-activiti-diagrams; npm link ng2-alfresco-core; if [ ! -d "bundles" ]; then npm install && npm run  build && npm link; fi);
+    fi
+  - if ([ "$MODULE" == "ng2-alfresco-search" ]); then
+        (cd ng2-components/ng2-alfresco-datatable; npm link ng2-alfresco-core; if [ ! -d "bundles" ]; then npm install && npm run  build && npm link; fi);
+        (cd ng2-components/ng2-alfresco-documentlist; npm link ng2-alfresco-core; npm link ng2-alfresco-datatable; if [ ! -d "bundles" ]; then npm install && npm run  build && npm link; fi);
     fi
   - cd ng2-components/$MODULE;
-  - npm run travis;
-  - npm install;
-script: npm run test
+script: npm install && npm run travis && npm run test
 # Send coverage data to Coveralls
 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:

.vscode/settings.json

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

ALFRESCOCORS.md

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

Jenkinsfile

@@ -0,0 +1,41 @@
+#!/usr/bin/groovy
+@Library('github.com/fabric8io/fabric8-pipeline-library@v2.2.311')
+def utils = new io.fabric8.Utils()
+clientsNode{
+  def envStage = utils.environmentNamespace('staging')
+  def envProd = utils.environmentNamespace('production')
+  def newVersion = ''
+
+  git 'https://github.com/Alfresco/alfresco-ng2-components.git'
+
+  stage 'Canary release'
+  echo 'NOTE: running pipelines for the first time will take longer as build and base docker images are pulled onto the node'
+  if (!fileExists ('Dockerfile')) {
+    writeFile file: 'Dockerfile', text: 'FROM node:5.3-onbuild'
+  }
+
+  newVersion = performCanaryRelease {}
+
+  def rc = getKubernetesJson {
+    port = 8080
+    label = 'node'
+    icon = 'https://cdn.rawgit.com/fabric8io/fabric8/dc05040/website/src/images/logos/nodejs.svg'
+    version = newVersion
+    imageName = clusterImageName
+  }
+
+  stage 'Rollout Staging'
+  kubernetesApply(file: rc, environment: envStage)
+
+  stage 'Approve'
+  approve{
+    room = null
+    version = canaryVersion
+    console = fabric8Console
+    environment = envStage
+  }
+
+  stage 'Rollout Production'
+  kubernetesApply(file: rc, environment: envProd)
+
+}

PREREQUISITES.md

@@ -2,7 +2,8 @@
 
 The [Angular 2](https://angular.io/) based application development framework requires the following:
 
-- An Alfresco Platform Repository (version [201609 Early Access](https://community.alfresco.com/docs/DOC-6372-alfresco-community-edition-file-list-201609-ea) or newer) to talk to, which has [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) enabled.
+- An Alfresco Platform Repository (version [201609 Early Access](https://community.alfresco.com/docs/DOC-6372-alfresco-community-edition-file-list-201609-ea) or newer) 
+- [Enable cors on Alfresco One](/ALFRESCOCORS.md)
 - [Download and install Activiti](https://www.alfresco.com/products/bpm/alfresco-activiti/trial)
 - [Node.js](https://nodejs.org/en/) JavaScript runtime.
 - [npm](https://www.npmjs.com/) package manager for JavaScript.

README.md

@@ -56,6 +56,12 @@ To view the complete list of all the components that you can use to build your c
 
 You can browse all the components at the following [page](http://devproducts.alfresco.com/).
 
+## Demo Application
+
+A separate application showcasing integration of components can be found [here](https://github.com/Alfresco/alfresco-ng2-components/tree/master/demo-shell-ng2).
+
+You will find examples of basic interaction for both BPM and ECM sets of widgets.
+
 ## Yeoman generators
 
 To speed up the development of your Alfresco Angular 2 application, or Alfresco Angular 2 component, use one of the Yeoman generators. 
@@ -87,7 +93,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 +106,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 [known Firefox issue] (https://bugzilla.mozilla.org/show_bug.cgi?id=1188880),the Alfresco Upload Component does not currently support folder upload functionality on Firefox    
 
 Please refer to [Browser Support](BROWSER-SUPPORT.md) article for more details. 

appveyor.yml

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

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

demo-shell-ng2/README.md

@@ -10,28 +10,48 @@
     </a>
 </p>
 
-### Node
-To correctly use this demo check that on your machine is running Node version 5.0.0 or higher.
+## Installing
 
-#### Local build
-
-1 Install dependencies
+To correctly use this demo check that on your machine is running [Node](https://nodejs.org/en/) version 5.x.x or higher.
 
 ```sh
+git clone https://github.com/Alfresco/alfresco-ng2-components.git
+cd alfresco-ng2-components/demo-shell-ng2/
 npm install
 ```
 
-2 Fast build and watch for dev purposes
+## Development build
 
 ```sh
 npm start
 ```
 
->`start` script also includes live reload and watchers for all the `.ts` files.
-TypeScript watchers are also configured for `node_modules` folder within demo shell
-and provide live reload for all the component libraries as well.
+This command compiles and starts the project in watch mode.
+Browser will automatically reload upon changes.
+Upon start you can navigate to `http://localhost:3000` with your preferred browser.
 
-#### Development branch build
+### Important notes
+
+This script is recommended for development environment and not suited for headless servers and network access.
+
+## Production build
+
+```sh
+npm run build
+npm run start:dist
+```
+
+This command builds project in `production` mode.
+All output is placed to `dist` folder and can be served your preferred web server.
+You should need no additional files outside the `dist` folder.
+
+### Important notes
+
+By default demo application is configured to use [wsrv](https://www.npmjs.com/package/wsrv) tool (lightweight web server)
+to serve production build output. It will be running at `0.0.0.0` address with port `3000` and allow you accessing your application
+via network. However you can use any web server of your choice in production.
+
+## Development branch build
 
 If you want to run the demo shell with the latest change from the development branch, use the following command from the /script folder:
 
@@ -40,7 +60,7 @@ If you want to run the demo shell with the latest change from the development br
 ./start-linked.sh -install
 ```
 
-###Multi-language
+## Multi-language
 To support a new language you need to create your language file (.json) and add it to `i18n/` folder.
 
 ```json
@@ -61,4 +81,20 @@ Directory structure:
 │   └── fr.json
 ```
 
+## Custom-files
 
+If you need to add custom files on your project you can add this files in the folders public
+
+```
+.
+├── public/
+│   ├── images/
+│   ├── css/
+│   └── js/
+```
+
+the public folder above wil be copied in the root of your project and you can refer to them for example as
+
+ * './images/custom_image.png'
+ * './js/custom_script.js'
+ * './css/custom_style.css'

demo-shell-ng2/WINDOWS.md

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

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

@@ -1,6 +1,12 @@
-@media only screen and (max-width: 640px) {
-    .mdl-layout__header.header-search-expanded .mdl-layout-title {
-        display: none;
+@media screen and (max-width: 1024px) {
+    .mdl-layout__header {
+        display: block;
+    }
+}
+
+@media screen and (max-width: 1024px) {
+    .mdl-layout__header {
+        display: block;
     }
 }
 
@@ -15,3 +21,15 @@
 .mdl-button-padding {
     padding-left: 20px;
 }
+
+.hide {
+    display: none !important;
+}
+
+.mdl-navigation__link {
+    cursor: pointer;
+}
+
+.mdl-navigation__link label {
+    cursor: pointer;
+}

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

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

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

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

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

@@ -32,17 +32,21 @@ import { ActivitiTaskListModule } from 'ng2-activiti-tasklist';
 import { ActivitiProcessListModule } from 'ng2-activiti-processlist';
 import { UserInfoComponentModule } from 'ng2-alfresco-userinfo';
 import { AnalyticsModule } from 'ng2-activiti-analytics';
-
 import { AppComponent } from './app.component';
 import { routing } from './app.routes';
 import { CustomEditorsModule } from './components/activiti/custom-editor/custom-editor.component';
+import { Editor3DModule } from 'ng2-3d-editor';
+import { MaterialModule } from '@angular/material';
+import { ChartsModule } from 'ng2-charts';
 
 import {
+    HomeComponent,
     DataTableDemoComponent,
     SearchComponent,
     SearchBarComponent,
     LoginDemoComponent,
     ActivitiDemoComponent,
+    ActivitiAppsView,
     FormViewer,
     WebscriptComponent,
     TagComponent,
@@ -56,30 +60,34 @@ import {
     imports: [
         BrowserModule,
         routing,
+        MaterialModule.forRoot(),
         CoreModule.forRoot(),
-        LoginModule,
+        LoginModule.forRoot(),
         SearchModule.forRoot(),
-        DataTableModule,
+        DataTableModule.forRoot(),
         DocumentListModule.forRoot(),
         UploadModule.forRoot(),
         TagModule.forRoot(),
-        WebScriptModule,
+        WebScriptModule.forRoot(),
         ViewerModule.forRoot(),
         ActivitiFormModule.forRoot(),
         ActivitiTaskListModule.forRoot(),
         ActivitiProcessListModule.forRoot(),
         UserInfoComponentModule.forRoot(),
         AnalyticsModule.forRoot(),
-        CustomEditorsModule
+        CustomEditorsModule,
+        Editor3DModule.forRoot(),
+        ChartsModule
     ],
     declarations: [
         AppComponent,
-        SearchBarComponent,
+        HomeComponent,
         DataTableDemoComponent,
         SearchComponent,
         SearchBarComponent,
         LoginDemoComponent,
         ActivitiDemoComponent,
+        ActivitiAppsView,
         FormViewer,
         WebscriptComponent,
         TagComponent,
@@ -92,4 +100,3 @@ import {
     bootstrap: [ AppComponent ]
 })
 export class AppModule { }
-

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

@@ -17,13 +17,16 @@
 
 import { ModuleWithProviders }  from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { AuthGuard, AuthGuardEcm, AuthGuardBpm } from 'ng2-alfresco-core';
 
 import {
+    HomeComponent,
     FilesComponent,
     DataTableDemoComponent,
     SearchComponent,
     LoginDemoComponent,
     ActivitiDemoComponent,
+    ActivitiAppsView,
     WebscriptComponent,
     TagComponent,
     AboutComponent,
@@ -35,19 +38,85 @@ import {
 import { UploadButtonComponent } from 'ng2-alfresco-upload';
 
 export const appRoutes: Routes = [
-    { path: 'home', component: FilesComponent },
-    { path: 'files', component: FilesComponent },
-    { path: 'datatable', component: DataTableDemoComponent },
-    { path: '', component: LoginDemoComponent },
-    { path: 'uploader', component: UploadButtonComponent },
     { path: 'login', component: LoginDemoComponent },
-    { path: 'search', component: SearchComponent },
-    { path: 'activiti', component: ActivitiDemoComponent },
-    { path: 'activiti/appId/:appId', component: ActivitiDemoComponent },
-    { path: 'activiti/tasks/:id', component: FormViewer },
-    { path: 'activiti/tasksnode/:id', component: FormNodeViewer },
-    { path: 'webscript', component: WebscriptComponent },
-    { path: 'tag', component: TagComponent },
+    {
+        path: '',
+        component: HomeComponent,
+        canActivate: [AuthGuard]
+    },
+    {
+        path: 'home',
+        component: HomeComponent,
+        canActivate: [AuthGuard]
+    },
+    {
+        path: 'files',
+        component: FilesComponent,
+        canActivate: [AuthGuardEcm]
+    },
+    {
+        path: 'files/:id',
+        component: FilesComponent,
+        canActivate: [AuthGuardEcm]
+    },
+    {
+        path: 'datatable',
+        component: DataTableDemoComponent,
+        canActivate: [AuthGuard]
+    },
+    {
+        path: 'uploader',
+        component: UploadButtonComponent,
+        canActivate: [AuthGuardEcm]
+    },
+    {
+        path: 'search',
+        component: SearchComponent,
+        canActivate: [AuthGuardEcm]
+    },
+    {
+        path: 'activiti',
+        component: ActivitiAppsView,
+        canActivate: [AuthGuardBpm]
+    },
+    {
+        path: 'activiti/apps',
+        component: ActivitiAppsView,
+        canActivate: [AuthGuardBpm]
+    },
+    {
+        path: 'activiti/apps/:appId/tasks',
+        component: ActivitiDemoComponent,
+        canActivate: [AuthGuardBpm]
+    },
+    // TODO: check if neeeded
+    {
+        path: 'activiti/appId/:appId',
+        component: ActivitiDemoComponent,
+        canActivate: [AuthGuardBpm]
+    },
+    // TODO: check if needed
+    {
+        path: 'activiti/tasks/:id',
+        component: FormViewer,
+        canActivate: [AuthGuardBpm]
+    },
+    // TODO: check if needed
+    {
+        path: 'activiti/tasksnode/:id',
+        component: FormNodeViewer,
+        canActivate: [AuthGuardBpm]
+    },
+    {
+        path: 'webscript',
+        component: WebscriptComponent,
+        canActivate: [AuthGuardEcm]
+    },
+    {
+        path: 'tag',
+        component: TagComponent,
+        canActivate: [AuthGuardEcm]
+    },
     { path: 'about', component: AboutComponent },
     { path: 'settings', component: SettingComponent }
 ];

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

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

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

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

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

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

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

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

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

@@ -4,52 +4,65 @@
 
         <!-- TABS -->
 
-        <div class="mdl-layout__tab-bar mdl-js-ripple-effect" #tabheader>
-            <a id="apps-header" href="#apps" class="mdl-layout__tab is-active">APPS</a>
-            <a id="tasks-header" href="#tasks" class="mdl-layout__tab">TASK LIST</a>
-            <a id="processes-header" href="#processes" class="mdl-layout__tab">PROCESS LIST</a>
-            <a id="report-header" href="#report" class="mdl-layout__tab">ANALYTICS</a>
+        <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
+            <a id="tasks-header" href="#tasks" class="mdl-layout__tab" [class.is-active]="activeTab === 'tasks'" (click)="activeTab = 'tasks'">TASKS</a>
+            <a id="processes-header" href="#processes" class="mdl-layout__tab" [class.is-active]="activeTab === 'processes'" (click)="activeTab = 'processes'">PROCESSES</a>
+            <a id="report-header" href="#report" class="mdl-layout__tab" [class.is-active]="activeTab === 'reports'" (click)="activeTab = 'reports'">REPORTS</a>
         </div>
     </header>
 
-    <main class="mdl-layout__content activiti" #tabmain>
-
-        <!--  APPPS COMPONENT -->
-
-        <section class="mdl-layout__tab-panel is-active" id="apps">
-            <div class="page-content">
-                <activiti-apps [layoutType]="layoutType" (appClick)="onAppClick($event)" #activitiapps></activiti-apps>
-            </div>
-        </section>
-
+    <main class="mdl-layout__content activiti">
 
         <!--  TASKS COMPONENT -->
 
-        <section class="mdl-layout__tab-panel" id="tasks">
+        <section class="mdl-layout__tab-panel" [class.is-active]="activeTab === 'tasks'" id="tasks">
             <div class="page-content">
                 <div class="mdl-grid">
                     <div class="mdl-cell mdl-cell--2-col task-column mdl-shadow--2dp">
-                        <span>Task Filters</span>
-                        <activiti-start-task [appId]="appId" (onSuccess)="onStartTaskSuccess($event)"></activiti-start-task>
-                        <activiti-filters [appId]="appId" (filterClick)="onTaskFilterClick($event)" (onSuccess)="onSuccessTaskFilterList($event)"
-                                          #activitifilter></activiti-filters>
+                        <activiti-filters
+                            [appId]="appId"
+                            (filterClick)="onTaskFilterClick($event)"
+                            (onSuccess)="onSuccessTaskFilterList($event)"
+                            #activitifilter>
+                        </activiti-filters>
                     </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 class="mdl-cell mdl-cell--3-col task-column mdl-shadow--2dp list-column">
+                        <div class="list-buttons">
+                            <activiti-start-task
+                                [appId]="appId"
+                                (onSuccess)="onStartTaskSuccess($event)">
+                            </activiti-start-task>
+                        </div>
+                        <activiti-tasklist
+                            [appId]="taskFilter?.appId"
+                            [processDefinitionKey]="taskFilter?.filter?.processDefinitionKey"
+                            [name]="taskFilter?.filter?.name"
+                            [assignment]="taskFilter?.filter?.assignment"
+                            [state]="taskFilter?.filter?.state"
+                            [sort]="taskFilter?.filter?.sort"
+                            [data]="dataTasks"
+                            [landingTaskId]="currentTaskId"
+                            (rowClick)="onTaskRowClick($event)"
+                            (onSuccess)="onSuccessTaskList($event)"
+                            (row-click)="onRowClick($event)"
+                            (row-dblclick)="onRowDblClick($event)"
+                            #activititasklist>
+                            <!-- Custom column definition demo -->
+                            <!--
+                            <data-columns>
+                                <data-column key="name" title="NAME" class="full-width name-column"></data-column>
+                                <data-column key="created" title="Created" class="hidden"></data-column>
+                            </data-columns>
+                            -->
+                        </activiti-tasklist>
                     </div>
                     <div class="mdl-cell mdl-cell--7-col task-column mdl-shadow--2dp">
-                        <span>Task Details</span>
-                        <activiti-task-details [taskId]="currentTaskId" (formCompleted)="onFormCompleted($event)"
-                                               #activitidetails></activiti-task-details>
+                        <activiti-task-details #activitidetails
+                            [taskId]="currentTaskId"
+                            (formCompleted)="onFormCompleted($event)"
+                            (formContentClicked)="onFormContentClick($event)"
+                            (taskCreated)="onTaskCreated($event)">
+                        </activiti-task-details>
                     </div>
                 </div>
             </div>
@@ -58,34 +71,55 @@
 
         <!--  PROCESS COMPONENT -->
 
-        <section class="mdl-layout__tab-panel" id="processes">
-            <div class="page-content">
+        <section class="mdl-layout__tab-panel" [class.is-active]="activeTab === 'processes'" id="processes">
+            <div class="page-content" *ngIf="activeTab === 'processes'">
                 <div class="page-content">
                     <div class="mdl-grid">
-                        <div class="mdl-cell mdl-cell--2-col task-column">
-                            <span>Process Filters</span>
-                            <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 class="mdl-cell mdl-cell--2-col task-column  mdl-shadow--2dp">
+                            <activiti-process-instance-filters
+                                [appId]="appId"
+                                (filterClick)="onProcessFilterClick($event)"
+                                (onSuccess)="onSuccessProcessFilterList($event)">
+                            </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 class="mdl-cell mdl-cell--3-col task-column list-column mdl-shadow--2dp" *ngIf="processFilter && !isStartProcessMode()">
+                            <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>
+                            <activiti-process-instance-list
+                                *ngIf="processFilter?.hasFilter()" [appId]="processFilter.appId"
+                                [processDefinitionKey]="processFilter.filter.processDefinitionKey"
+                                [name]="processFilter.filter.name"
+                                [state]="processFilter.filter.state"
+                                [sort]="processFilter.filter.sort"
+                                [data]="dataProcesses"
+                                (rowClick)="onProcessRowClick($event)"
+                                (onSuccess)="onSuccessProcessList($event)">
+                                <!-- Custom column definition demo -->
+                                <!--
+                                <data-columns>
+                                    <data-column key="name" title="NAME" class="full-width name-column"></data-column>
+                                    <data-column key="created" title="Created" class="hidden"></data-column>
+                                </data-columns>
+                                -->
+                            </activiti-process-instance-list>
                         </div>
-                        <div class="mdl-cell mdl-cell--7-col task-column" *ngIf="!isStartProcessMode()">
-                            <span>Process Details</span>
-                            <activiti-process-instance-details [processInstanceId]="currentProcessInstanceId" (activitiprocesslist)="taskFormCompleted()" (processCancelled)="processCancelled()" #activitiprocessdetails></activiti-process-instance-details>
+                        <div class="mdl-cell task-column mdl-shadow--2dp" *ngIf="!isStartProcessMode()"
+                            [class.mdl-cell--7-col]="processFilter && !isStartProcessMode()"
+                            [class.mdl-cell--10-col]="!processFilter || isStartProcessMode()">
+                            <activiti-process-instance-details
+                                [processInstanceId]="currentProcessInstanceId"
+                                (processCancelled)="processCancelled()"
+                                (taskClick)="onProcessDetailsTaskClick($event)">
+                            </activiti-process-instance-details>
                         </div>
-                        <div class="mdl-cell mdl-cell--7-col task-column" *ngIf="isStartProcessMode()">
-                            <span>Start Process</span>
+                        <div class="mdl-cell mdl-cell--10-col task-column mdl-shadow--2dp" *ngIf="isStartProcessMode()">
                             <activiti-start-process [appId]="appId" (start)="onStartProcessInstance($event)"></activiti-start-process>
                         </div>
                     </div>
@@ -96,14 +130,28 @@
 
         <!--  ANALYTICS COMPONENT -->
 
-        <section class="mdl-layout__tab-panel" id="report">
-            <div class="page-content">
+        <section class="mdl-layout__tab-panel" [class.is-active]="activeTab === 'reports'" id="report">
+            <div class="page-content" *ngIf="activeTab === 'reports'">
                 <div class="mdl-grid">
                     <div class="mdl-cell mdl-cell--4-col task-column mdl-shadow--2dp">
-                        <analytics-report-list (reportClick)="onReportClick($event)"></analytics-report-list>
+                        <span><h5>Report List</h5></span>
+                        <hr>
+                        <analytics-report-list
+                            [appId]="appId"
+                            (reportClick)="onReportClick($event)"
+                            #analyticsreportlist>
+                        </analytics-report-list>
                     </div>
                     <div class="mdl-cell mdl-cell--8-col task-column mdl-shadow--2dp">
-                        <activiti-analytics [appId]="appId" *ngIf="report" [reportId]="report.id"></activiti-analytics>
+                        <activiti-analytics
+                            *ngIf="report"
+                            [appId]="appId"
+                            [reportId]="report.id"
+                            [hideParameters]="false"
+                            (editReport)="onEditReport($event)"
+                            (reportSaved)="onReportSaved()"
+                            (reportDeleted)="onReportDeleted()">
+                        </activiti-analytics>
                     </div>
                 </div>
             </div>
@@ -111,3 +159,12 @@
 
     </main>
 </div>
+
+<div *ngIf="fileShowed">
+    <alfresco-viewer
+        [(showViewer)]="fileShowed"
+        [blobFile]="content"
+        [displayName]="contentName"
+        [overlayMode]="true">
+    </alfresco-viewer>
+</div>

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

@@ -15,73 +15,73 @@
  * limitations under the License.
  */
 
-import { Component, AfterViewChecked, ViewChild, Input } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core';
 import {
-    AppDefinitionRepresentationModel,
-    FilterRepresentationModel,
     ActivitiApps,
-    ActivitiTaskList
+    ActivitiFilters,
+    ActivitiTaskList,
+    FilterRepresentationModel,
+    TaskDetailsEvent
 } from 'ng2-activiti-tasklist';
 import {
+    ActivitiProcessFilters,
+    ActivitiProcessInstanceDetails,
     ActivitiProcessInstanceListComponent,
     ActivitiStartProcessInstance,
+    FilterProcessRepresentationModel,
     ProcessInstance
 } from 'ng2-activiti-processlist';
+import { AnalyticsReportListComponent } from 'ng2-activiti-analytics';
 import { ActivatedRoute } from '@angular/router';
 import { Subscription } from 'rxjs/Rx';
 import {
     ObjectDataTableAdapter,
+    ObjectDataRow,
     DataSorting
 } from 'ng2-alfresco-datatable';
-
-import { FormRenderingService } from 'ng2-activiti-form';
+import { AlfrescoApiService } from 'ng2-alfresco-core';
+import { FormService, FormRenderingService, FormEvent, FormFieldEvent } from 'ng2-activiti-form';
 import { /*CustomEditorComponent*/ CustomStencil01 } from './custom-editor/custom-editor.component';
 
-declare let __moduleName: string;
 declare var componentHandler;
 
 const currentProcessIdNew = '__NEW__';
 
 @Component({
-    moduleId: __moduleName,
     selector: 'activiti-demo',
     templateUrl: './activiti-demo.component.html',
     styleUrls: ['./activiti-demo.component.css']
 })
-export class ActivitiDemoComponent implements AfterViewChecked {
+export class ActivitiDemoComponent implements AfterViewInit {
 
-    @ViewChild('activitiapps')
-    activitiapps: ActivitiApps;
-
-    @ViewChild('activitifilter')
-    activitifilter: any;
-
-    @ViewChild('activitidetails')
-    activitidetails: any;
+    @ViewChild(ActivitiFilters)
+    activitifilter: ActivitiFilters;
 
     @ViewChild(ActivitiTaskList)
-    activititasklist: ActivitiTaskList;
+    taskList: ActivitiTaskList;
 
-    @ViewChild('activitiprocessfilter')
-    activitiprocessfilter: any;
+    @ViewChild(ActivitiProcessFilters)
+    activitiprocessfilter: ActivitiProcessFilters;
 
     @ViewChild(ActivitiProcessInstanceListComponent)
-    activitiprocesslist: ActivitiProcessInstanceListComponent;
+    processList: ActivitiProcessInstanceListComponent;
 
-    @ViewChild('activitiprocessdetails')
-    activitiprocessdetails: any;
+    @ViewChild(ActivitiProcessInstanceDetails)
+    activitiprocessdetails: ActivitiProcessInstanceDetails;
 
     @ViewChild(ActivitiStartProcessInstance)
     activitiStartProcess: ActivitiStartProcessInstance;
 
-    @ViewChild('tabmain')
-    tabMain: any;
-
-    @ViewChild('tabheader')
-    tabHeader: any;
+    @ViewChild(AnalyticsReportListComponent)
+    analyticsreportlist: AnalyticsReportListComponent;
 
     @Input()
-    appId: number;
+    appId: number = null;
+
+    fileShowed: boolean = false;
+
+    content: Blob;
+    contentName: string;
 
     layoutType: string;
     currentTaskId: string;
@@ -90,43 +90,63 @@ export class ActivitiDemoComponent implements AfterViewChecked {
     taskSchemaColumns: any [] = [];
     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}
-            ]
-        );
+    constructor(private elementRef: ElementRef,
+                private route: ActivatedRoute,
+                private apiService: AlfrescoApiService,
+                private formRenderingService: FormRenderingService,
+                private formService: FormService) {
+        this.dataTasks = new ObjectDataTableAdapter();
         this.dataTasks.setSorting(new DataSorting('created', 'desc'));
 
         this.dataProcesses = new ObjectDataTableAdapter(
             [],
             [
-                {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}`);
+        });
+
     }
 
     ngOnInit() {
         this.sub = this.route.params.subscribe(params => {
-            this.appId = params['appId'];
+            let applicationId = params['appId'];
+            if (applicationId && applicationId !== '0') {
+                this.appId = params['appId'];
+            }
+
+            this.taskFilter = null;
+            this.currentTaskId = null;
+            this.processFilter = null;
+            this.currentProcessInstanceId = null;
         });
         this.layoutType = ActivitiApps.LAYOUT_GRID;
     }
@@ -135,27 +155,8 @@ export class ActivitiDemoComponent implements AfterViewChecked {
         this.sub.unsubscribe();
     }
 
-    onAppClick(app: AppDefinitionRepresentationModel) {
-        this.appId = app.id;
-        this.taskFilter = null;
-        this.currentTaskId = null;
-
-        this.processFilter = null;
-        this.currentProcessInstanceId = null;
-
-        this.changeTab('apps', 'tasks');
-    }
-
-    changeTab(origin: string, destination: string) {
-        this.tabMain.nativeElement.children[origin].classList.remove('is-active');
-        this.tabMain.nativeElement.children[destination].classList.add('is-active');
-
-        this.tabHeader.nativeElement.children[`${origin}-header`].classList.remove('is-active');
-        this.tabHeader.nativeElement.children[`${destination}-header`].classList.add('is-active');
-    }
-
-    onTaskFilterClick(event: FilterRepresentationModel) {
-        this.taskFilter = event;
+    onTaskFilterClick(filter: FilterRepresentationModel) {
+        this.applyTaskFilter(filter);
     }
 
     onReportClick(event: any) {
@@ -163,27 +164,36 @@ export class ActivitiDemoComponent implements AfterViewChecked {
     }
 
     onSuccessTaskFilterList(event: any) {
-        this.taskFilter = this.activitifilter.getCurrentFilter();
+        this.applyTaskFilter(this.activitifilter.getCurrentFilter());
+    }
+
+    applyTaskFilter(filter: FilterRepresentationModel) {
+        this.taskFilter = filter;
+        if (filter && this.taskList) {
+            this.taskList.hasCustomDataSource = false;
+        }
     }
 
     onStartTaskSuccess(event: any) {
-        this.activititasklist.reload();
+        this.activitifilter.selectFilterWithTask(event.id);
+        this.currentTaskId = event.id;
     }
 
     onSuccessTaskList(event: FilterRepresentationModel) {
-        this.currentTaskId = this.activititasklist.getCurrentId();
+        this.currentTaskId = this.taskList.getCurrentId();
     }
 
-    onProcessFilterClick(event: FilterRepresentationModel) {
+    onProcessFilterClick(event: FilterProcessRepresentationModel) {
+        this.currentProcessInstanceId = null;
         this.processFilter = event;
     }
 
-    onSuccessProcessFilterList(event: any) {
+    onSuccessProcessFilterList() {
         this.processFilter = this.activitiprocessfilter.getCurrentFilter();
     }
 
     onSuccessProcessList(event: any) {
-        this.currentProcessInstanceId = this.activitiprocesslist.getCurrentId();
+        this.currentProcessInstanceId = this.processList.getCurrentId();
     }
 
     onTaskRowClick(taskId) {
@@ -194,13 +204,35 @@ export class ActivitiDemoComponent implements AfterViewChecked {
         this.currentProcessInstanceId = processInstanceId;
     }
 
+    onEditReport(name: string) {
+        this.analyticsreportlist.reload();
+    }
+
+    onReportSaved() {
+        this.analyticsreportlist.reload();
+    }
+
+    onReportDeleted() {
+        this.analyticsreportlist.reload();
+        this.selectFirstElementInReportList();
+    }
+
+    selectFirstElementInReportList() {
+        if (!this.analyticsreportlist.isReportsEmpty()) {
+            this.analyticsreportlist.selectReport(this.analyticsreportlist.reports[0]);
+        }
+    }
+
     navigateStartProcess() {
+        this.resetProcessFilters();
+        this.reloadProcessFilters();
         this.currentProcessInstanceId = currentProcessIdNew;
     }
 
     onStartProcessInstance(instance: ProcessInstance) {
         this.currentProcessInstanceId = instance.id;
         this.activitiStartProcess.reset();
+        this.resetProcessFilters();
     }
 
     isStartProcessMode() {
@@ -209,27 +241,79 @@ export class ActivitiDemoComponent implements AfterViewChecked {
 
     processCancelled(data: any) {
         this.currentProcessInstanceId = null;
-        this.activitiprocesslist.reload();
+        this.processList.reload();
     }
 
     onSuccessNewProcess(data: any) {
-        this.activitiprocesslist.reload();
-    }
-
-    taskFormCompleted(data: any) {
-        this.activitiprocesslist.reload();
+        this.processList.reload();
     }
 
     onFormCompleted(form) {
-        this.activititasklist.reload();
+        this.taskList.reload();
         this.currentTaskId = null;
     }
 
-    ngAfterViewChecked() {
+    onFormContentClick(content: any) {
+        this.fileShowed = true;
+        this.content = content.contentBlob;
+        this.contentName = content.name;
+    }
+
+    onTaskCreated(data: any) {
+        this.currentTaskId = data.parentTaskId;
+        this.taskList.reload();
+    }
+
+    ngAfterViewInit() {
         // workaround for MDL issues with dynamic components
         if (componentHandler) {
             componentHandler.upgradeAllRegistered();
         }
+
+        this.loadStencilScriptsInPageFromActiviti();
+    }
+
+    loadStencilScriptsInPageFromActiviti() {
+        this.apiService.getInstance().activiti.scriptFileApi.getControllers().then(response => {
+            if (response) {
+                let s = document.createElement('script');
+                s.type = 'text/javascript';
+                s.text = response;
+                this.elementRef.nativeElement.appendChild(s);
+            }
+        });
+    }
+
+    onProcessDetailsTaskClick(event: TaskDetailsEvent) {
+        event.preventDefault();
+        this.activeTab = 'tasks';
+
+        const taskId = event.value.id;
+        const processTaskDataRow = new ObjectDataRow({
+            id: taskId,
+            name: event.value.name || 'No name',
+            created: event.value.created
+        });
+        this.activitifilter.selectFilter(null);
+        this.taskList.setCustomDataSource([processTaskDataRow]);
+        this.taskList.selectTask(taskId);
+        this.currentTaskId = taskId;
+    }
+
+    private resetProcessFilters() {
+        this.processFilter = null;
+    }
+
+    private reloadProcessFilters() {
+        this.activitiprocessfilter.selectFilter(null);
+    }
+
+    onRowClick(event) {
+        console.log(event);
+    }
+
+    onRowDblClick(event) {
+        console.log(event);
     }
 
 }

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

@@ -0,0 +1,37 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { AppDefinitionRepresentationModel } from 'ng2-activiti-tasklist';
+
+@Component({
+    selector: 'activiti-apps-view',
+    template: `
+        <activiti-apps (appClick)="onAppClicked($event)"></activiti-apps>
+    `
+})
+export class ActivitiAppsView {
+
+    constructor(private router: Router, private route: ActivatedRoute) {
+    }
+
+     onAppClicked(app: AppDefinitionRepresentationModel) {
+         this.router.navigate(['/activiti/apps', app.id || 0, 'tasks']);
+     }
+
+}

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

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

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

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

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

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

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

@@ -1,31 +1,30 @@
 <div class="p-10">
-    <alfresco-datatable [data]="data" [multiselect]="multiselect"></alfresco-datatable>
+    <alfresco-datatable
+        [data]="data"
+        [multiselect]="multiselect"
+        [actions]="true"
+        (showRowActionsMenu)="onShowRowActionsMenu($event)"
+        (executeRowAction)="onExecuteRowAction($event)"
+        (row-click)="onRowClick($event)"
+        (row-dblclick)="onRowDblClick($event)">
+      <!-- HTML column definition demo -->
+        <!--
+        <data-columns>
+            <data-column type="image" key="icon" [sortable]="false"></data-column>
+            <data-column key="id" title="Id"></data-column>
+            <data-column key="createdOn" title="Created"></data-column>
+            <data-column key="name" title="Name" class="full-width name-column"></data-column>
+            <data-column key="createdBy.name" title="Created By"></data-column>
+        </data-columns>
+        -->
+    </alfresco-datatable>
 </div>
 <div class="p-10">
-    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
-        <input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" [(ngModel)]="multiselect">
-        <span class="mdl-checkbox__label">Multiselect</span>
-    </label>
+    <md-checkbox [(ngModel)]="multiselect">Multiselect</md-checkbox>
 </div>
 <div class="p-10">
-    <button
-            class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"
-            (click)="reset()">
-        Reset to default
-    </button>
-    <button
-        class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"
-        (click)="addRow()">
-        Add row
-    </button>
-    <button
-        class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"
-        (click)="replaceRows()">
-        Replace rows
-    </button>
-    <button
-        class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"
-        (click)="replaceColumns()">
-        Replace columns
-    </button>
+    <button md-raised-button (click)="reset()">Reset to default</button>
+    <button md-raised-button (click)="addRow()">Add row</button>
+    <button md-raised-button (click)="replaceRows()">Replace rows</button>
+    <button md-raised-button (click)="replaceColumns()">Replace columns</button>
 </div>

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

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

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

@@ -7,3 +7,16 @@
         margin: 0;
     }
 }
+
+.error-message {
+    text-align: left;
+}
+
+.error-message--text {
+    color: #d50000;
+}
+
+.options-container {
+    width: 250px;
+    margin: 20px;
+}

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

@@ -1,196 +1,183 @@
-<div *ngIf="!fileShowed">
-    <div class="container">
-        <alfresco-upload-drag-area
-                [currentFolderPath]="currentPath"
-                [versioning] = "versioning"
-                (onSuccess)="documentList.reload()">
-            <alfresco-document-list-breadcrumb
-                [currentFolderPath]="currentPath"
-                [target]="documentList">
-            </alfresco-document-list-breadcrumb>
-            <alfresco-document-list
-                    #documentList
-                    [currentFolderPath]="currentPath"
-                    [contextMenuActions]="true"
-                    [contentActions]="true"
-                    (preview)="showFile($event)"
-                    (folderChange)="onFolderChanged($event)">
-                <!--
-                <empty-folder-content>
-                    <template>
-                        <h1>Sorry, no content here</h1>
-                    </template>
-                </empty-folder-content>
-                -->
-                <content-columns>
-                    <content-column key="$thumbnail" type="image"></content-column>
-                    <content-column
-                            title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
-                            key="name"
-                            sortable="true"
-                            class="full-width ellipsis-cell">
-                    </content-column>
+<div class="container">
+    <alfresco-upload-drag-area
+            [rootFolderId]="documentList.currentFolderId"
+            [versioning] = "versioning"
+            (onSuccess)="documentList.reload()">
+        <alfresco-document-list-breadcrumb
+            [target]="documentList"
+            [folderNode]="documentList.folderNode">
+        </alfresco-document-list-breadcrumb>
+        <div *ngIf="errorMessage" class="error-message">
+            <button (click)="resetError()" class="mdl-button mdl-js-button mdl-button--icon">
+                <i class="material-icons">highlight_off</i>
+            </button>
+            <span class="error-message--text">{{errorMessage}}</span>
+        </div>
+        <alfresco-document-list
+                #documentList
+                [currentFolderId]="currentFolderId"
+                [contextMenuActions]="true"
+                [contentActions]="true"
+                [allowDropFiles]="true"
+                (error)="onNavigationError($event)"
+                (success)="resetError()"
+                (preview)="showFile($event)">
+            <data-columns>
+                <data-column key="$thumbnail" type="image" [sortable]="false"></data-column>
+                <data-column
+                        title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
+                        key="name"
+                        class="full-width ellipsis-cell">
+                    <!-- Example of using custom column template -->
                     <!--
-                    <content-column
-                            title="Type"
-                            source="content.mimeType">
-                    </content-column>
+                    <template let-entry="$implicit">
+                        <span>Hi! {{entry.data.getValue(entry.row, entry.col)}}</span>
+                    </template>
                     -->
-                    <content-column
-                            title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
-                            key="createdByUser.displayName"
-                            sortable="true"
-                            class="desktop-only">
-                    </content-column>
-                    <content-column
-                            title="{{'DOCUMENT_LIST.COLUMNS.CREATED_ON' | translate}}"
-                            key="createdAt"
-                            type="date"
-                            format="medium"
-                            sortable="true"
-                            class="desktop-only">
-                    </content-column>
-                </content-columns>
+                </data-column>
+                <data-column
+                    title="{{'DOCUMENT_LIST.COLUMNS.TAG' | translate}}"
+                    key="id"
+                    class="full-width ellipsis-cell">
+                    <template let-entry="$implicit">
+                        <alfresco-tag-node-list  [nodeId]="entry.data.getValue(entry.row, entry.col)"></alfresco-tag-node-list>
+                    </template>
+                </data-column>
+                <data-column
+                        title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
+                        key="createdByUser.displayName"
+                        class="desktop-only">
+                </data-column>
+                <data-column
+                        title="{{'DOCUMENT_LIST.COLUMNS.CREATED_ON' | translate}}"
+                        key="createdAt"
+                        type="date"
+                        format="medium"
+                        class="desktop-only">
+                </data-column>
+            </data-columns>
 
-                <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>
-
-    <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 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>
-
-
-    <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>
-
-    <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>
-
-    <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>
-
-    <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>
-    <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>
-    </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>
-    </div>
-    <file-uploading-dialog #fileDialog></file-uploading-dialog>
+            <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-upload-drag-area>
 </div>
 
+<context-menu-holder></context-menu-holder>
+
+<p class="options-container">
+    <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>
+
+
+<p class="options-container">
+    <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>
+
+<p class="options-container">
+    <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>
+
+<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>
+
+<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>
+<div *ngIf="!acceptedFilesTypeShow">
+    <alfresco-upload-button data-automation-id="multiple-file-upload"
+                            [rootFolderId]="documentList.currentFolderId"
+                            [multipleFiles]="multipleFileUpload"
+                            [uploadFolders]="folderUpload"
+                            [versioning] = "versioning"
+                            (onSuccess)="documentList.reload()">
+        <div class="mdl-spinner mdl-js-spinner is-active"></div>
+    </alfresco-upload-button>
+</div>
+<div *ngIf="acceptedFilesTypeShow">
+    <alfresco-upload-button data-automation-id="multiple-file-upload"
+                            [rootFolderId]="documentList.currentFolderId"
+                            [acceptedFilesType]="acceptedFilesType"
+                            [multipleFiles]="multipleFileUpload"
+                            [uploadFolders]="folderUpload"
+                            [versioning] = "versioning"
+                            (onSuccess)="documentList.reload()">
+        <div class="mdl-spinner mdl-js-spinner is-active"></div>
+    </alfresco-upload-button>
+</div>
+<file-uploading-dialog #fileDialog></file-uploading-dialog>
+
 <div *ngIf="fileShowed">
     <alfresco-viewer [(showViewer)]="fileShowed"
                      [fileNodeId]="fileNodeId"
                      [overlayMode]="true">
-        <div class="mdl-spinner mdl-js-spinner is-active"></div>
+
+        <extension-viewer [supportedExtensions]="['obj','3DS']" #extension>
+            <template let-urlFileContent="urlFileContent" let-extension="extension" >
+                <threed-viewer [urlFile]="urlFileContent" [extension]="extension" ></threed-viewer>
+            </template>
+        </extension-viewer>
+
     </alfresco-viewer>
 </div>
 

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

@@ -15,45 +15,40 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { Router } from '@angular/router';
-import { AlfrescoAuthenticationService } from 'ng2-alfresco-core';
-import {
-    DocumentActionsService,
-    DocumentList,
-    ContentActionHandler,
-    DocumentActionModel,
-    FolderActionModel
-} from 'ng2-alfresco-documentlist';
+import { Component, OnInit, Optional, ViewChild, ChangeDetectorRef } from '@angular/core';
+import { ActivatedRoute, Params, Router } from '@angular/router';
+import { AlfrescoAuthenticationService, LogService } from 'ng2-alfresco-core';
+import { DocumentActionsService, DocumentListComponent, ContentActionHandler, DocumentActionModel, FolderActionModel } from 'ng2-alfresco-documentlist';
 import { FormService } from 'ng2-activiti-form';
 
-declare let __moduleName: string;
-
 @Component({
-    moduleId: __moduleName,
     selector: '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;
     multipleFileUpload: boolean = false;
     folderUpload: boolean = false;
     acceptedFilesTypeShow: boolean = false;
     versioning: boolean = false;
-
     acceptedFilesType: string = '.jpg,.pdf,.js';
 
-    @ViewChild(DocumentList)
-    documentList: DocumentList;
+    @ViewChild(DocumentListComponent)
+    documentList: DocumentListComponent;
 
     constructor(private documentActions: DocumentActionsService,
-                public auth: AlfrescoAuthenticationService,
+                private authService: AlfrescoAuthenticationService,
                 private formService: FormService,
-                private router: Router) {
+                private logService: LogService,
+                private changeDetector: ChangeDetectorRef,
+                private router: Router,
+                @Optional() private route: ActivatedRoute) {
         documentActions.setHandler('my-handler', this.myDocumentActionHandler.bind(this));
     }
 
@@ -78,12 +73,6 @@ export class FilesComponent implements OnInit {
         }
     }
 
-    onFolderChanged(event?: any) {
-        if (event) {
-            this.currentPath = event.path;
-        }
-    }
-
     toggleMultipleFileUpload() {
         this.multipleFileUpload = !this.multipleFileUpload;
         return this.multipleFileUpload;
@@ -106,20 +95,38 @@ export class FilesComponent implements OnInit {
     }
 
     ngOnInit() {
-      if ( this.auth.isBpmLoggedIn() ) {
-          this.formService.getProcessDefinitions().subscribe(
-              defs => this.setupBpmActions(defs || []),
-              err => console.log(err)
-          );
-      } else {
-          console.log('You are not logged in');
-      }
+        if (this.route) {
+            this.route.params.forEach((params: Params) => {
+                if (params['id']) {
+                    this.currentFolderId = params['id'];
+                    this.changeDetector.detectChanges();
+                }
+            });
+        }
+        if (this.authService.isBpmLoggedIn()) {
+            this.formService.getProcessDefinitions().subscribe(
+                defs => this.setupBpmActions(defs || []),
+                err => this.logService.error(err)
+            );
+        } else {
+            this.logService.warn('You are not logged in to BPM');
+        }
     }
 
     viewActivitiForm(event?: any) {
         this.router.navigate(['/activiti/tasksnode', event.value.entry.id]);
     }
 
+    onNavigationError(err: any) {
+        if (err) {
+            this.errorMessage = err.message || 'Navigation error';
+        }
+    }
+
+    resetError() {
+        this.errorMessage = null;
+    }
+
     private setupBpmActions(actions: any[]) {
         actions.map(def => {
             let documentAction = new DocumentActionModel();

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

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

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

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

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

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

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

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

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

@@ -15,6 +15,7 @@
  * limitations under the License.
  */
 
+export { HomeComponent } from './home/home.component';
 export { DataTableDemoComponent } from './datatable/datatable-demo.component';
 export { SearchComponent } from './search/search.component';
 export { SearchBarComponent } from './search/search-bar.component';
@@ -27,3 +28,4 @@ export { AboutComponent } from './about/about.component';
 export { FilesComponent } from './files/files.component';
 export { FormNodeViewer } from './activiti/form-node-viewer.component';
 export { SettingComponent } from './setting/setting.component';
+export { ActivitiAppsView } from './activiti/apps.view';

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

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

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

@@ -1,21 +1,23 @@
-<div class="setting">
+<!--BPM, ECN AND CSRF TOGGLE-->
+
+<div class="settings">
     <p class="toggle">
         <label for="switch1" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
             <input type="checkbox" id="switch1" [checked]="isECM" class="mdl-switch__input"
-                   (click)="toggleECM(ecm.checked)" #ecm>
-            <span class="mdl-switch__label">ECM</span>
+                   (click)="toggleECM()">
+            <span class="mdl-switch__label">Content Services</span>
         </label>
     </p>
     <p class="toggle">
         <label for="switch2" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
             <input type="checkbox" id="switch2" [checked]="isBPM" class="mdl-switch__input"
-                   (click)="toggleBPM(bpm.checked)" #bpm>
-            <span class="mdl-switch__label">BPM</span>
+                   (click)="toggleBPM()">
+            <span class="mdl-switch__label">Process Services</span>
         </label>
     </p>
     <p class="toggle">
         <label for="switch3" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-            <input type="checkbox" id="switch3" class="mdl-switch__input" checked (click)="toggleCSRF()" #csrf>
+            <input type="checkbox" id="switch3" class="mdl-switch__input" [checked]="!disableCsrf" (click)="toggleCSRF()">
             <span class="mdl-switch__label">CSRF</span>
         </label>
     </p>
@@ -25,12 +27,47 @@
     </p>
 </div>
 
+<!--SETTING BUTTON-->
+
 <a class="mdl-navigation__link setting-button" data-automation-id="settings" href="" routerLink="/settings">
     <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
         <i class="material-icons">settings</i>
     </button>
 </a>
-<alfresco-login [providers]="providers" [fieldsValidation]="customValidation" [disableCsrf]="disableCsrf"
+
+<!--LOGIN-->
+
+<alfresco-login #alfrescologin
+                [providers]="providers"
+                [fieldsValidation]="customValidation"
+                [disableCsrf]="disableCsrf"
                 (executeSubmit)="validateForm($event)"
                 (onSuccess)="onLogin($event)"
-                (onError)="onError($event)" #alfrescologin></alfresco-login>
+                (onError)="onError($event)">
+    <div class="mobile-settings">
+        <p>
+            <label for="switch1-mobile" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+                <input type="checkbox" id="switch1-mobile" [checked]="isECM" class="mdl-switch__input"
+                       (click)="toggleECM()">
+                <span class="mdl-switch__label">Content Services</span>
+            </label>
+        </p>
+        <p>
+            <label for="switch2-mobile" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+                <input type="checkbox" id="switch2-mobile" [checked]="isBPM" class="mdl-switch__input"
+                       (click)="toggleBPM()">
+                <span class="mdl-switch__label">Process Services</span>
+            </label>
+        </p>
+        <p>
+            <label for="switch3-mobile" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+                <input type="checkbox" id="switch3-mobile" class="mdl-switch__input" [checked]="!disableCsrf" (click)="toggleCSRF()">
+                <span class="mdl-switch__label">CSRF</span>
+            </label>
+        </p>
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+            <input class="mdl-textfield__input" type="text" [(ngModel)]="blackListUsername" id="blacklistusername"/>
+            <label class="mdl-textfield__label" for="blacklistusername">Banned username</label>
+        </div>
+    </div>
+</alfresco-login>

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

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

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

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

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

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

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

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

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

@@ -16,11 +16,9 @@
  */
 
 import { Component } from '@angular/core';
-
-declare let __moduleName: string;
+import { Router } from '@angular/router';
 
 @Component({
-    moduleId: __moduleName,
     selector: 'search-component',
     templateUrl: './search.component.html',
     styles: [`
@@ -48,13 +46,18 @@ declare let __moduleName: string;
 })
 export class SearchComponent {
 
-    fileShowed: boolean = false;
     fileNodeId: string;
+    fileShowed: boolean = false;
 
-    onFileClicked(event) {
+    constructor(public router: Router) {
+    }
+
+    showFile(event) {
         if (event.value.entry.isFile) {
             this.fileNodeId = event.value.entry.id;
             this.fileShowed = true;
+        } else {
+            this.fileShowed = false;
         }
     }
 }

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

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

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

@@ -1,5 +1,5 @@
 <div class="setting-container">
-    <div style="display: table-row">
+    <div class="table-row">
         <div class="setting-card-padding"></div>
         <div class="setting-card mdl-card mdl-shadow--2dp">
             <div class="mdl-card__title mdl-card--expand">
@@ -7,7 +7,7 @@
             </div>
             <div class="mdl-card__actions mdl-card--border">
                 <div class="mdl-card__supporting-text">
-                    ECM host URL configuration
+                    Content Services host URL configuration
                 </div>
                 <nav class="mdl-navigation">
                     <div class="icon material-icons icon-margin">link</div>
@@ -16,7 +16,7 @@
                 </nav>
 
                 <div class="mdl-card__supporting-text">
-                    BPM host URL configuration
+                    Process Services host URL configuration
                 </div>
                 <nav class="mdl-navigation">
                     <div class="icon material-icons icon-margin">link</div>
@@ -24,6 +24,11 @@
                            tabindex="1" (change)="onChangeBPMHost($event)" value="{{bpmHost}}"/>
                 </nav>
             </div>
+            <div class="mdl-card__actions mdl-card--border">
+            <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" onclick="window.history.back()" >
+                Back
+            </a>
+        </div>
         </div>
         <div class="setting-card-padding"></div>
     </div>

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

@@ -16,14 +16,9 @@
  */
 
 import { Component } from '@angular/core';
-import {
-    AlfrescoSettingsService
-} from 'ng2-alfresco-core';
-
-declare let __moduleName: string;
+import { AlfrescoSettingsService, StorageService, LogService } from 'ng2-alfresco-core';
 
 @Component({
-    moduleId: __moduleName,
     selector: 'alfresco-setting-demo',
     templateUrl: './setting.component.html',
     styleUrls: ['./setting.component.css']
@@ -33,23 +28,31 @@ export class SettingComponent {
     ecmHost: string;
     bpmHost: string;
 
-    constructor(public alfrescoSettingsService: AlfrescoSettingsService) {
-        this.ecmHost = this.alfrescoSettingsService.ecmHost;
-        this.bpmHost = this.alfrescoSettingsService.bpmHost;
+    constructor(private settingsService: AlfrescoSettingsService,
+                private storage: StorageService,
+                private logService: LogService) {
+        this.ecmHost = this.settingsService.ecmHost;
+        this.bpmHost = this.settingsService.bpmHost;
     }
 
     public onChangeECMHost(event: KeyboardEvent): void {
-        console.log((<HTMLInputElement>event.target).value);
-        this.ecmHost = (<HTMLInputElement>event.target).value;
-        this.alfrescoSettingsService.ecmHost = this.ecmHost;
-        localStorage.setItem(`ecmHost`, this.ecmHost);
+        let value = (<HTMLInputElement>event.target).value.trim();
+        if (value) {
+            this.logService.info(`ECM host: ${value}`);
+            this.ecmHost = value;
+            this.settingsService.ecmHost = value;
+            this.storage.setItem(`ecmHost`, value);
+        }
     }
 
     public onChangeBPMHost(event: KeyboardEvent): void {
-        console.log((<HTMLInputElement>event.target).value);
-        this.bpmHost = (<HTMLInputElement>event.target).value;
-        this.alfrescoSettingsService.bpmHost = this.bpmHost;
-        localStorage.setItem(`bpmHost`, this.bpmHost);
+        let value = (<HTMLInputElement>event.target).value.trim();
+        if (value) {
+            this.logService.info(`BPM host: ${value}`);
+            this.bpmHost = value;
+            this.settingsService.bpmHost = value;
+            this.storage.setItem(`bpmHost`, value);
+        }
     }
 
 }

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

@@ -24,9 +24,9 @@ import { Component } from '@angular/core';
                 <input id="nodeId" type="text" size="48"  [(ngModel)]="nodeId"><br>
             <div class="mdl-grid">
               <div class="mdl-cell mdl-cell--4-col"><alfresco-tag-node-actions-list [nodeId]="nodeId"></alfresco-tag-node-actions-list></div>
-              <div class="mdl-cell mdl-cell--4-col">List Tags ECM <alfresco-tag-list></alfresco-tag-list></div>
+              <div class="mdl-cell mdl-cell--4-col">List Tags Content Services <alfresco-tag-list></alfresco-tag-list></div>
               <div class="mdl-cell mdl-cell--4-col">
-                    Tag list By Node ID 
+                    Tag list By Node ID
                     <alfresco-tag-node-list [nodeId]="nodeId"></alfresco-tag-node-list>
               </div>
             </div>

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

@@ -16,42 +16,41 @@
  */
 
 import { Component } from '@angular/core';
+import { LogService } from 'ng2-alfresco-core';
 
 @Component({
     selector: 'alfresco-webscript-demo',
     template: `
-
-                <label for="script-path"><b>Insert a scriptPath</b></label><br>
-                <input id="script-path" type="text" size="48"  [(ngModel)]="scriptPath"><br>
-                <label for="context-root"><b>Insert a contextRoot</b></label><br>
-                <input id="context-root" type="text" size="48"  [(ngModel)]="contextRoot"><br>
-                <label for="service-path"><b>Insert a servicePath</b></label><br>
-                <input id="service-path" type="text" size="48"  [(ngModel)]="servicePath"><br>
-            <alfresco-webscript-get [scriptPath]="scriptPath"
-                           [scriptArgs]="scriptArgs"
-                           [contextRoot]="contextRoot"
-                           [servicePath]="servicePath"
-                           [contentType]="'HTML'"
-                           (onSuccess)= "logData($event)"></alfresco-webscript-get>
+        <label for="script-path"><b>Insert a scriptPath</b></label><br>
+        <input id="script-path" type="text" size="48" [(ngModel)]="scriptPath"><br>
+        <label for="context-root"><b>Insert a contextRoot</b></label><br>
+        <input id="context-root" type="text" size="48" [(ngModel)]="contextRoot"><br>
+        <label for="service-path"><b>Insert a servicePath</b></label><br>
+        <input id="service-path" type="text" size="48" [(ngModel)]="servicePath"><br>
+        <alfresco-webscript-get
+            [scriptPath]="scriptPath"
+            [scriptArgs]="scriptArgs"
+            [contextRoot]="contextRoot"
+            [servicePath]="servicePath"
+            [contentType]="'HTML'"
+            (onSuccess)= "logData($event)">
+        </alfresco-webscript-get>
     `
 })
 export class WebscriptComponent {
 
     currentPath: string = '/';
-
     authenticated: boolean;
-
     host: string = 'http://127.0.0.1:8080';
-
     scriptPath: string = 'sample/folder/Company%20Home';
-
     contextRoot: string = 'alfresco';
-
     servicePath: string = 'service';
-
     scriptArgs: string = '';
 
+    constructor(private logService: LogService) {
+    }
+
     logData(data) {
-        console.log(data);
+        this.logService.log(data);
     }
 }

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

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

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

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

demo-shell-ng2/app/main.ts

@@ -16,7 +16,12 @@
  */
 
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { enableProdMode } from '@angular/core';
 import { AppModule } from './app.module';
 
+if (process.env.ENV === 'production') {
+  enableProdMode();
+}
+
 const platform = platformBrowserDynamic();
 platform.bootstrapModule(AppModule);

demo-shell-ng2/app/polyfills.ts

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

demo-shell-ng2/app/vendor.ts

@@ -0,0 +1,74 @@
+// Angular
+import '@angular/platform-browser';
+import '@angular/platform-browser-dynamic';
+import '@angular/core';
+import '@angular/common';
+import '@angular/http';
+import '@angular/router';
+
+// RxJS
+import 'rxjs';
+
+// hammerjs
+import 'hammerjs';
+
+// Alfresco
+import 'alfresco-js-api';
+import 'ng2-alfresco-core';
+import 'ng2-alfresco-datatable';
+import 'ng2-activiti-diagrams';
+import 'ng2-activiti-analytics';
+import 'ng2-activiti-form';
+import 'ng2-activiti-processlist';
+import 'ng2-activiti-tasklist';
+import 'ng2-alfresco-documentlist';
+import 'ng2-alfresco-login';
+import 'ng2-alfresco-search';
+import 'ng2-alfresco-tag';
+import 'ng2-alfresco-upload';
+import 'ng2-alfresco-viewer';
+import 'ng2-alfresco-webscript';
+import 'ng2-alfresco-userinfo';
+
+// Polyfill(s) for dialogs
+require('script!dialog-polyfill/dialog-polyfill');
+import 'dialog-polyfill/dialog-polyfill.css';
+
+// Flags
+import 'flag-icon-css/css/flag-icon.min.css';
+
+import '../public/css/app.css';
+import '../public/css/muli-font.css';
+
+// Load the Angular Material 2 stylesheet
+import '../public/css/angular-material.css';
+
+import 'ng2-activiti-form/stencils/runtime.ng1';
+import 'ng2-activiti-form/stencils/runtime.adf';
+
+import 'ng2-charts';
+import 'chart.js';
+require('script!raphael/raphael.min.js');
+
+require('script!moment/min/moment.min.js');
+
+import 'md-date-time-picker/dist/css/mdDateTimePicker.css';
+require('script!md-date-time-picker/dist/js/mdDateTimePicker.min.js');
+require('script!md-date-time-picker/dist/js/draggabilly.pkgd.min.js');
+
+require('pdfjs-dist/web/compatibility.js');
+
+// Setting worker path to worker bundle.
+let pdfjsLib = require('pdfjs-dist');
+if (process.env.ENV === 'production') {
+  pdfjsLib.PDFJS.workerSrc = './pdf.worker.js';
+} else {
+  pdfjsLib.PDFJS.workerSrc = '../../node_modules/pdfjs-dist/build/pdf.worker.js';
+}
+
+require('pdfjs-dist/web/pdf_viewer.js');
+require('three/build/three.min.js');
+
+// 3D viewer
+import 'three';
+import 'ng2-3d-editor';

demo-shell-ng2/config/helpers.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

demo-shell-ng2/custom-translation/alfresco-login/i18n/en.json

@@ -1,26 +0,0 @@
-{
-  "LOGIN": {
-    "LOGO": "Alfresco",
-    "LABEL": {
-      "LOGIN": "Login",
-      "USERNAME": "Username",
-      "PASSWORD": "Password",
-      "REMEMBER": "Remember"
-    },
-    "MESSAGES": {
-      "USERNAME-REQUIRED": "Required",
-      "USERNAME-MIN": "Your username needs to be at least 4 characters.",
-      "PASSWORD-REQUIRED": "Enter your password to sign in",
-      "LOGIN-ERROR-CREDENTIALS": "You have entered an invalid username or password",
-      "LOGIN-ERROR-PROVIDERS": "Providers cannot be undefined",
-      "LOGIN-SUCCESS": "Login successful"
-    },
-    "BUTTON": {
-      "LOGIN": "SIGN IN"
-    },
-    "ACTION": {
-      "HELP": "NEED HELP?",
-      "REGISTER": "REGISTER"
-    }
-  }
-}

demo-shell-ng2/custom-translation/alfresco-login/i18n/it.json

@@ -1,25 +0,0 @@
-{
-  "LOGIN": {
-    "LABEL": {
-      "LOGIN": "Autenticazione",
-      "USERNAME": "Nome utente",
-      "PASSWORD": "Password",
-      "REMEMBER": "Ricordami"
-    },
-    "MESSAGES": {
-      "USERNAME-REQUIRED": "Campo obbligatorio",
-      "USERNAME-MIN": "Inserire un nome utente di minimo 4 caratteri.",
-      "PASSWORD-REQUIRED": "Campo obbligatorio",
-      "LOGIN-ERROR-CREDENTIALS": "Nome utente o password non validi",
-      "LOGIN-ERROR-PROVIDERS": "Providers non può essere nullo",
-      "LOGIN-SUCCESS": "Login effettuata con successo"
-    },
-    "BUTTON": {
-      "LOGIN": "Accedi"
-    },
-    "ACTION": {
-      "HELP": "BISOGNO DI AIUTO?",
-      "REGISTER": "REGISTRATI"
-    }
-  }
-}

demo-shell-ng2/index.html

@@ -5,69 +5,76 @@
     <title>Demo Application - Angular 2</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <link href="app/css/app.css" rel="stylesheet">
-    <link href="app/css/muli-font.css" rel="stylesheet">
-
     <link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
 
-    <!-- Google Material Design Lite -->
-    <link href="./assets/material.orange-blue.min.css" rel="stylesheet">
-    <script src="node_modules/material-design-lite/material.min.js"></script>
-    <link href="node_modules/material-design-icons/iconfont/material-icons.css" rel="stylesheet">
-
-    <link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet" type="text/css">
-    <link href="node_modules/md-date-time-picker/dist/css/mdDateTimePicker.css" media="all" rel="stylesheet">
-
     <!-- 1. Load libraries -->
     <!-- Polyfill(s) for Safari (pre-10.x) -->
-    <script src="node_modules/intl/dist/Intl.min.js"></script>
-    <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
+    <script src=js/Intl.min.js></script>
 
-    <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/core-js/client/shim.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
-    <script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
+    <!-- IE/FF -->
+    <script src=js/element.scrollintoviewifneeded-polyfill.js></script>
 
-    <!-- Polyfill(s) for dialogs -->
-    <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
-    <link href="node_modules/dialog-polyfill/dialog-polyfill.css" rel="stylesheet" type="text/css" />
+    <!--[if IE]>
+    <script src=js/shim.min.js></script>
+    <script src=//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js></script>
+    <script src=js/classlist-polyfill.js></script>
+    <script src=js/web-animations.min.js></script>
+    <script src=js/typedarray.js></script>
+    <script src=js/Blob.js></script>
+    <script src=js/formdata.js></script>
+    <script src=https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js></script>
+    <script src=js/es5-shim.min.js></script>
+    <script src=js/es6-shim.min.js></script>
+    <script src=js/system-polyfills.js></script>
+    <![endif]-->
 
-    <script src="node_modules/zone.js/dist/zone.js"></script>
-    <script src="node_modules/reflect-metadata/Reflect.js"></script>
-    <script src="node_modules/systemjs/dist/system.src.js"></script>
+    <!-- Google Material Design Lite -->
+    <link href="css/material.orange-blue.min.css" rel="stylesheet">
+    <script src="js/material.min.js"></script>
+    <link href="css/iconfont/material-icons.css" rel="stylesheet">
 
-    <script src="node_modules/moment/min/moment.min.js"></script>
-    <script src="/app/js/Polyline.js"></script>
-    <script src="node_modules/pdfjs-dist/web/compatibility.js"></script>
-    <script src="node_modules/pdfjs-dist/build/pdf.js"></script>
-    <script src="node_modules/pdfjs-dist/build/pdf.worker.js"></script>
-    <script src="node_modules/pdfjs-dist/web/pdf_viewer.js"></script>
-    <script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>
-    <script src="node_modules/raphael/raphael.min.js"></script>
-    <script src="node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js"></script>
-    <script src="node_modules/md-date-time-picker/dist/js/draggabilly.pkgd.min.js"></script>
+    <style>
+        .loader-container {
+            display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
+            display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
+            display: -webkit-flex;     /* NEW - Chrome */
+            display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
+            -webkit-box-flex-direction: row;
+            -moz-box-flex-direction: row;
+            -webkit-flex-direction: row;
+            flex-direction: row;
+            height:100%;
+        }
 
-    <!-- Stencils integration -->
-    <script src="node_modules/ng2-activiti-form/stencils/runtime.ng1.js"></script>
-    <script src="node_modules/ng2-activiti-form/stencils/runtime.adf.js"></script>
-    <script src="http://localhost:9999/activiti-app/app/rest/script-files/controllers"></script>
+        .loader-item {
+            margin: auto;
+            max-height:100px;
+            max-width:300px;
+        }
 
-    <!-- 2. Configure SystemJS -->
-    <script src="systemjs.config.js"></script>
-    <script>
-        System.import('app').catch(function(err){ console.error(err); });
-    </script>
+        .loader-text{
+            white-space: nowrap;
+            text-align: center;
+            position: relative;
+        }
+
+    </style>
 </head>
 <!-- 3. Display the application -->
 <body>
-    <alfresco-app>
-        <div id="loader-container" class="loader-container">
-            <div class="loader-item">
-                <div id="loader-spin" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
-                <div id="loader-text" class="loader-text">Loading Demo Shell..</div>
-            </div >
+<alfresco-app>
+    <div id="loader-container" class="loader-container">
+        <div class="loader-item">
+            <div id="loader-spin" class="mdl-progress mdl-js-progress mdl-progress__indeterminate is-upgraded"
+                 data-upgraded=",MaterialProgress">
+                <div class="progressbar bar bar1" style="width: 0%;"></div>
+                <div class="bufferbar bar bar2" style="width: 100%;"></div>
+                <div class="auxbar bar bar3" style="width: 0%;"></div>
+            </div>
+            <div id="loader-text" class="loader-text">Loading Demo Shell..</div>
         </div>
-    </alfresco-app>
+    </div>
+</alfresco-app>
 </body>
 </html>
+

demo-shell-ng2/karma.conf.js

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

demo-shell-ng2/package.json

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

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

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

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

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

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

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

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

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

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

@@ -4,6 +4,7 @@
     "DOCUMENT_LIST": {
         "COLUMNS": {
             "DISPLAY_NAME": "Display name",
+            "TAG": "Tag",
             "CREATED_BY": "Created by",
             "CREATED_ON": "Created on"
         },

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

@@ -4,6 +4,7 @@
   "DOCUMENT_LIST": {
     "COLUMNS": {
       "DISPLAY_NAME": "Mostra name",
+      "TAG": "Tag",
       "CREATED_BY": "Creato da",
       "CREATED_ON": "Creato il"
     },

demo-shell-ng2/server/versions.js

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

demo-shell-ng2/systemjs.config.js

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

demo-shell-ng2/tsconfig.json

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

demo-shell-ng2/tslint.json

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

demo-shell-ng2/webpack.config.js

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

demo-shell-ng2/wsrv-config.json

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

fabric8.yml

@@ -0,0 +1,11 @@
+---
+buildName: "adf2"
+links:
+  Git: "https://github.com/Alfresco/alfresco-ng2-components.git"
+  Job: "http://192.168.64.3:31752/job/adf2"
+  Production: "http://10.0.0.114:80/kubernetes/pods?namespace=default-production"
+  Staging: "http://10.0.0.114:80/kubernetes/pods?namespace=default-staging"
+environments:
+  Staging: "default-staging"
+  Production: "default-production"
+useLocalFlow: true

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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