fix the build

* rework i18n layer init

* fix unit tests

* fix tests

* test fixes

* remove obsolete tests

.editorconfig

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

.gitignore

@@ -1,6 +1,5 @@
 *.log
 node_modules
-bundles
 workspace.xml
 .idea/
 dist/
@@ -16,12 +15,5 @@ src/environments/
 *.npmrc
 /demo-shell-ng2/ng2-components/
 .happypack/
-.history
-package-lock.*
-/ng2-components/ng2-alfresco-core/prebuilt-themes/
-.ng_pkg_build/
-/demo-shell/dist-dev-temp/
-/lib/export-new.json
-/lib/config/exportCheck.js
-/lib/config/export-check/export-new.json
-/lib/config/export-check/exportCheck.js
+.happypack/
+.history

.travis.yml

@@ -1,93 +1,42 @@
 language: node_js
 dist: trusty
-sudo: required
+sudo: false
 node_js:
   - "8"
 
-addons:
-    chrome: stable
-
 before_install:
-    - export CHROME_BIN=chromium-browser
-    - export DISPLAY=:99.0
-    - sh -e /etc/init.d/xvfb start
+  - "export DISPLAY=:99.0"
+  - "sh -e /etc/init.d/xvfb start"
 
 env:
   matrix:
-    - MODULE=core
-    - MODULE=insights
-    - MODULE=process-services
-    - MODULE=content-services
-    - MODULE=demo-shell
-    - MODULE=packaging
+    - MODULE=ng2-components-alfresco
+    - MODULE=ng2-components-activiti
+    - MODULE=ng2-demo-shell
 
 install:
-    - if ([ "$MODULE" != "demo-shell" ]); then
+    - if ([ "$MODULE" == "ng2-components-alfresco" -o  "$MODULE" == "ng2-components-activiti" ]); then
         if ([ "$TRAVIS_BRANCH" = "master" ]); then
             (./scripts/npm-build-all.sh  || exit 1;);
         else
-            (./scripts/npm-build-all.sh  -vjsapi alpha || exit 1;);
+            (./scripts/npm-build-all.sh  -gitjsapi development || exit 1;);
         fi
       fi
 
 script:
-    - if ([ "$MODULE" == "core" ]); then
-            (./scripts/npm-build-all.sh -si -sb -t "core" || exit 1;);
+    - if ([ "$MODULE" == "ng2-components-activiti" ]); then
+            (./scripts/npm-build-all.sh -si -sb -t "ng2-activiti*" || exit 1;);
       fi
-
-    - if ([ "$MODULE" == "process-services" ]); then
-            (./scripts/npm-build-all.sh -si -sb -t "process-services" || exit 1;);
+    - if ([ "$MODULE" == "ng2-components-alfresco" ]); then
+            (./scripts/npm-build-all.sh -si -sb -t "ng2-alfresco*" || exit 1;);
       fi
-
-    - if ([ "$MODULE" == "insights" ]); then
-            (./scripts/npm-build-all.sh -si -sb -t "insights" || exit 1;);
-      fi
-
-    - if ([ "$MODULE" == "content-services" ]); then
-            (./scripts/npm-build-all.sh -si -sb -t "content-services" || exit 1;);
-      fi
-
-    - if ([ "$MODULE" == "packaging" ]); then
-            (cd lib && npm run new-build || exit 1;);
-      fi
-
-    - if ([ "$MODULE" == "demo-shell" ]); then
+    - if ([ "$MODULE" == "ng2-demo-shell" ]); then
        if ([ "$TRAVIS_BRANCH" = "master" ]); then
             (./scripts/start.sh -t -ss || exit 1;);
        else
-            (./scripts/start.sh -dev -t -ss -vjsapi alpha || exit 1;);
+            (./scripts/start.sh -dev -t -ss -gitjsapi development || exit 1;);
        fi
       fi
-jobs:
-    include:
-        - stage: Check 2.0.0 Project Update
-          script: ./scripts/test-e2e-bc.sh
-        - stage: Check ADF exports
-          script: cd lib && npm run test-export
-
-# jobs:
-#   include:
-#     - stage: Publish alpha to NPM
-#       before_install: skip
-#       install: skip
-#       script: skip
-#       deploy:
-#         provider: script
-#         script: (./scripts/update-version.sh -v $(./scripts/next_version.sh)-$(git rev-parse HEAD) -vj $(npm view alfresco-js-api@alpha version) -gnu) && (./scripts/npm-publish.sh -r $NPM_REGISTRY_ADDRESS -token $NPM_REGISTRY_TOKEN -t alpha --sleep 20 || exit 1;);
-#         on:
-#           branch: development
-#         skip_cleanup: true
-#     - stage: Publish beta to NPM
-#       before_install: skip
-#       install: skip
-#       script: skip
-#       deploy:
-#         provider: script
-#         script: (./scripts/update-version.sh -v $TRAVIS_TAG -gnu) && (./scripts/npm-publish.sh -r $NPM_REGISTRY_ADDRESS -token $NPM_REGISTRY_TOKEN -t beta --sleep 20 || exit 1;);
-#         on:
-#           tags: true
-#         skip_cleanup: true
-
 
 # Send coverage data to codecov
 after_success:
@@ -95,5 +44,7 @@ after_success:
 
 cache:
   directories:
-  - demo-shell/node_modules
-  - lib/node_modules
+  - ./node_modules/material-design-lite
+  - ./node_modules/material-design-icons
+  - demo-shell-ng2/node_modules
+  - ng2-components/node_modules

.vscode/settings.json

@@ -19,8 +19,5 @@
         "MD036": false,
         "MD033" : false,
         "MD031" : false
-    },
-    "cSpell.words": [
-        "webscript"
-    ]
+    }
 }

BROWSER-SUPPORT.md

@@ -1,33 +1,35 @@
 # Browser Support
-
 Browser support and polyfills guide.
 
 Browser compatibility and support depends on targeted browsers and 3rd party libraries. ADF is based on the following libraries and components:
 
-- Angular (all ADF components)
+- Angular 2 (all ADF components)
+- Material Design Lite (all ADF components)
 - Moment.js (many ADF components)
 - PDF.js (`ng2-alfresco-viewer` component)
 - Raphael.js (`ng2-alfresco-diagrams`, `ng2-alfresco-analytics`)
 - Chart.js (`ng2-alfresco-analytics`)
+- Material Design - Date and Time Picker (`ng2-activiti-form`, `ng2-alfresco-analytics`)
 
 ## Browser polyfills 
 
-### Angular
-
-Please refer to the [official guide](https://angular.io/docs/ts/latest/guide/browser-support.html) for Angular browser support. 
+### Angular 2
+Please refer to the [official guide](https://angular.io/docs/ts/latest/guide/browser-support.html) for Angular 2 browser support. 
 
 ADF (demo shell) imports by default the following set of recommended polyfills:
 
 - [core-js](https://www.npmjs.com/package/core-js) (ES6 standard support)
 
 ### 3rd party libraries
-
 Please refer to the following list of [popular polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills) for HTML5 cross-browser compatibility.
 
 ADF (demo shell) imports by default the following set of recommended polyfills:
 
 - [intl](https://www.npmjs.com/package/intl), Polyfill the ECMA-402 Intl API (except collation), **IE**/**Safari**
+- [dom4](https://github.com/WebReflection/dom4), A fully tested and covered polyfill for new DOM Level 4 entries, **IE**
+- [element.scrollintoviewifneeded-polyfill](https://www.npmjs.com/package/element.scrollintoviewifneeded-polyfill), simple JavaScript implementation of the non-standard WebKit method scrollIntoViewIfNeeded that can be called on DOM elements, **IE**/**Firefox**/**Safari**, required only to support **Material Design - Date and Time Picker** component
 - [pdfjs compatibility](https://www.npmjs.com/package/pdfjs-dist), Portable Document Format (PDF) library that is built with HTML5, **IE**
+- (dialog-polyfill)[https://www.npmjs.com/package/dialog-polyfill], Polyfill for the dialog element, **IE**/**Safari**/**Firefox**
 
 ## Example
 
@@ -50,4 +52,4 @@ ADF (demo shell) imports by default the following set of recommended polyfills:
 <link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
 ```
 
-For a complete code please refer to [demo shell](demo-shell/index.html) example.
+For a complete code please refer to [demo shell](demo-shell-ng2/index.html) example.

CONTRIBUTING.md

@@ -59,7 +59,7 @@ In ADF we are encouraging the use of behavior-driven development (BDD)
 
 * Class selector in all the tests is not suggested. Use of the element ID is preferred
 * Any test case should test only one behavior
-* Use of the Angular [testBed](https://angular.io/guide/testing#testbed) is highly recommended
+* Use of the Angular [testBed](https://angular.io/guide/testing#testbed) is highly recommended 
 
 ### File name
 
@@ -69,7 +69,7 @@ In ADF we are encouraging the use of behavior-driven development (BDD)
 ### Describer Name
 
 * The Main describer of the test should be the name of the class under test
-* The sub describe is used for grouping related behavior test. Do not over use it
+* The sub describe is used for grouping related behavior test. Do not over use it 
 
 ### Test Name
 

Dockerfile

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

INTRODUCTION.md

@@ -1,6 +1,6 @@
 # Introduction to the Alfresco Application Development Framework
 
-The Alfresco application development framework is based on the [Angular framework](https://angular.io/).
+The Alfresco application development framework is based on the [Angular 2 JavaScript library](https://angular.io/).
 The framework is provided by Alfresco to make it easy to build custom web applications that 
 should manage and view content in the [Alfresco Platform Repository](http://docs.alfresco.com/5.1/concepts/content-repo-about.html) in a custom way.
 
@@ -18,21 +18,22 @@ However, there are use-cases that Share does not fit very well, such as:
 This is where this application development framework comes into play, it can be used to create exactly the user interface 
 (i.e. web client) that the requirements demand.  
  
-The framework consists of several libraries that can be used to form a customized content management application. The available libraries are:
+The framework consists of several components that can be combined to form a customized content management application.
+Here is a list of some of the available web components:
 
-- [Core](lib/core/README.md)
-- [Content Services](lib/content-services/README.md)
-- [Process Services](lib/process-services/README.md)
-- [Insights](lib/insights/README.md)
+- [Core library](ng2-components/ng2-alfresco-core/README.md)
+- [DataTable](ng2-components/ng2-alfresco-datatable/README.md)
+- [DocumentList](ng2-components/ng2-alfresco-documentlist/README.md)
+- [Viewer](ng2-components/ng2-alfresco-viewer/README.md)
+- [Login](ng2-components/ng2-alfresco-login/README.md)
+- [Upload](ng2-components/ng2-alfresco-upload/README.md)
 
-
-You can browse all the components at the
-[ADF Component Catalog](https://alfresco.github.io/adf-component-catalog/).
+You can browse all the components at this [page](http://devproducts.alfresco.com/).
 
 An architecture overview looks like this:
 
 <p align="center">
-  <img title="alfresco-angular-components-architecture" alt='alfresco' src='assets/alfresco-app-dev-framework-architecture.png'></img>
+  <img title="alfresco-ng2-components-architecture" alt='alfresco' src='assets/alfresco-app-dev-framework-architecture.png'></img>
 </p>
 
 Here we can also see that there is an Alfresco JavaScript framework in use that wraps the Alfresco REST API, to make things easier for the client developer.

PREREQUISITES.md

@@ -1,6 +1,6 @@
 # Prerequisites for building and running apps with the Alfresco Application Development Framework
 
-The [Angular](https://angular.io/) based application development framework requires the following:
+The [Angular 2](https://angular.io/) based application development framework requires the following:
 
 - An Alfresco Platform Repository (version [201609 Early Access](https://community.alfresco.com/docs/DOC-6372-alfresco-community-edition-file-list-201609-ea) or newer) 
 - [Download and install the process service](https://www.alfresco.com/products/bpm/alfresco-activiti/trial)

README.md

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

adf-rules/adfClassNameRule.js

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

adf-rules/adfClassNameRule.ts

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

adf-rules/adfFileNameRule.js

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

adf-rules/adfFileNameRule.ts

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

adf-rules/index.js

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

adf-rules/index.ts

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

adf-rules/package.json

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

adf-rules/tsconfig.json

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

adf-rules/tslint.json

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

appveyor.yml

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

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

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

demo-shell-ng2/.editorconfig

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

demo-shell-ng2/.gitignore

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

demo-shell-ng2/README.md

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

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

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

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

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

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

@@ -0,0 +1,7 @@
+.user-profile {
+    margin-right: 10px;
+}
+
+.app-menu--spacer {
+    flex: 1 1 auto;
+}

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

@@ -0,0 +1,74 @@
+<md-toolbar color="primary" *ngIf="!isAPageWithHeaderBar()">
+    <ng2-alfresco-userinfo
+        class="user-profile"
+        [menuOpenType]="left">
+    </ng2-alfresco-userinfo>
+
+    <span>ADF Demo Application</span>
+
+    <div class="app-menu--spacer"></div>
+
+    <search-bar (expand)="onToggleSearch($event)"></search-bar>
+
+    <a md-button data-automation-id="home" href="" routerLink="/">Home</a>
+    <a md-button data-automation-id="files" href="" routerLink="/files">Content Services</a>
+    <a md-button data-automation-id="activiti" href="" routerLink="/activiti">Process Services</a>
+    <a md-button data-automation-id="login" href="" routerLink="/login">Login</a>
+
+    <button md-icon-button [mdMenuTriggerFor]="langMenu">
+        <md-icon>language</md-icon>
+    </button>
+    <md-menu #langMenu="mdMenu">
+        <button md-menu-item (click)="changeLanguage('en')">English</button>
+        <button md-menu-item (click)="changeLanguage('it')">Italian</button>
+        <button md-menu-item (click)="changeLanguage('ru')">Russian</button>
+    </md-menu>
+
+    <button md-icon-button [mdMenuTriggerFor]="appMenu">
+        <md-icon>more_vert</md-icon>
+    </button>
+    <md-menu #appMenu="mdMenu">
+        <a md-menu-item href="" routerLink="/datatable">
+            <md-icon>view_module</md-icon>
+            <span>DataTable</span>
+        </a>
+        <a md-menu-item href="" routerLink="/form">
+            <md-icon>poll</md-icon>
+            <span>Form</span>
+        </a>
+        <a md-menu-item href="" routerLink="/form-list">
+            <md-icon>library_books</md-icon>
+            <span>Form List</span>
+        </a>
+        <a md-menu-item href="" routerLink="/uploader">
+            <md-icon>file_upload</md-icon>
+            <span>Uploader</span>
+        </a>
+        <a md-menu-item href="" routerLink="/webscript">
+            <md-icon>extension</md-icon>
+            <span>Webscript</span>
+        </a>
+        <a md-menu-item href="" routerLink="/tag">
+            <md-icon>local_offer</md-icon>
+            <span>Tag</span>
+        </a>
+        <a md-menu-item href="" routerLink="/social">
+            <md-icon>thumb_up</md-icon>
+            <span>Social</span>
+        </a>
+        <a md-menu-item href="" routerLink="/settings">
+            <md-icon>settings</md-icon>
+            <span>Settings</span>
+        </a>
+        <a md-menu-item href="" routerLink="/about">
+            <md-icon>info_outline</md-icon>
+            <span>About</span>
+        </a>
+        <button md-menu-item (click)="onLogout($event)">
+            <md-icon>exit_to_app</md-icon>
+            <span>Logout</span>
+        </button>
+    </md-menu>
+</md-toolbar>
+
+<router-outlet></router-outlet>

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

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

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

@@ -0,0 +1,147 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AnalyticsModule } from 'ng2-activiti-analytics';
+import { DiagramsModule } from 'ng2-activiti-diagrams';
+import { ActivitiFormModule } from 'ng2-activiti-form';
+import { ActivitiProcessListModule } from 'ng2-activiti-processlist';
+import { ActivitiTaskListModule } from 'ng2-activiti-tasklist';
+import { AppConfigService, CoreModule, TRANSLATION_PROVIDER } from 'ng2-alfresco-core';
+import { DataTableModule } from 'ng2-alfresco-datatable';
+import { DocumentListModule } from 'ng2-alfresco-documentlist';
+import { LoginModule } from 'ng2-alfresco-login';
+import { SearchModule } from 'ng2-alfresco-search';
+import { SocialModule } from 'ng2-alfresco-social';
+import { TagModule } from 'ng2-alfresco-tag';
+import { UploadModule } from 'ng2-alfresco-upload';
+import { UserInfoComponentModule } from 'ng2-alfresco-userinfo';
+import { ViewerModule } from 'ng2-alfresco-viewer';
+import { WebScriptModule } from 'ng2-alfresco-webscript';
+
+import { Editor3DModule } from 'ng2-3d-editor';
+import { ChartsModule } from 'ng2-charts';
+import { AppComponent } from './app.component';
+import { routing } from './app.routes';
+import { CustomEditorsModule } from './components/activiti/custom-editor/custom-editor.component';
+import { MaterialModule } from './material.module';
+import { DebugAppConfigService } from './services/debug-app-config.service';
+
+import { CreateFolderDialogComponent } from './dialogs/create-folder.dialog';
+import { DownloadZipDialogComponent } from './dialogs/download-zip.dialog';
+
+import { FormListDemoComponent } from './components/form/form-list-demo.component';
+
+import {
+    AboutComponent,
+    ActivitiAppsViewComponent,
+    ActivitiDemoComponent,
+    ActivitiProcessAttachmentsComponent,
+    ActivitiShowDiagramComponent,
+    ActivitiTaskAttachmentsComponent,
+    DataTableDemoComponent,
+    FilesComponent,
+    FormDemoComponent,
+    FormNodeViewerComponent,
+    FormViewerComponent,
+    HomeComponent,
+    LoginDemoComponent,
+    SearchBarComponent,
+    SearchComponent,
+    SettingsComponent,
+    SocialComponent,
+    TagComponent,
+    WebscriptComponent
+} from './components/index';
+
+let appConfigFile = 'app.config-dev.json';
+if (process.env.ENV === 'production') {
+    appConfigFile = 'app.config-prod.json';
+}
+
+@NgModule({
+    imports: [
+        BrowserModule,
+        routing,
+        CoreModule.forRoot({
+            appConfigFile: appConfigFile
+        }),
+        MaterialModule,
+        LoginModule.forRoot(),
+        SearchModule.forRoot(),
+        DataTableModule.forRoot(),
+        DocumentListModule.forRoot(),
+        UploadModule.forRoot(),
+        TagModule.forRoot(),
+        SocialModule.forRoot(),
+        WebScriptModule.forRoot(),
+        ViewerModule.forRoot(),
+        ActivitiFormModule.forRoot(),
+        ActivitiTaskListModule.forRoot(),
+        ActivitiProcessListModule.forRoot(),
+        UserInfoComponentModule.forRoot(),
+        AnalyticsModule.forRoot(),
+        DiagramsModule.forRoot(),
+        CustomEditorsModule,
+        Editor3DModule.forRoot(),
+        ChartsModule
+    ],
+    declarations: [
+        AppComponent,
+        HomeComponent,
+        DataTableDemoComponent,
+        SearchComponent,
+        SearchBarComponent,
+        LoginDemoComponent,
+        ActivitiDemoComponent,
+        ActivitiTaskAttachmentsComponent,
+        ActivitiProcessAttachmentsComponent,
+        ActivitiShowDiagramComponent,
+        ActivitiAppsViewComponent,
+        FormViewerComponent,
+        WebscriptComponent,
+        TagComponent,
+        SocialComponent,
+        AboutComponent,
+        FilesComponent,
+        FormNodeViewerComponent,
+        CreateFolderDialogComponent,
+        DownloadZipDialogComponent,
+        SettingsComponent,
+        FormDemoComponent,
+        FormListDemoComponent
+    ],
+    providers: [
+        { provide: AppConfigService, useClass: DebugAppConfigService },
+        {
+            provide: TRANSLATION_PROVIDER,
+            multi: true,
+            useValue: {
+                name: 'app',
+                source: 'resources'
+            }
+        }
+    ],
+    bootstrap: [ AppComponent ],
+    entryComponents: [
+        CreateFolderDialogComponent,
+        DownloadZipDialogComponent
+    ]
+})
+export class AppModule { }

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

@@ -0,0 +1,145 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ModuleWithProviders } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AuthGuard, AuthGuardBpm, AuthGuardEcm } from 'ng2-alfresco-core';
+
+import {
+    AboutComponent,
+    ActivitiAppsViewComponent,
+    ActivitiDemoComponent,
+    ActivitiShowDiagramComponent,
+    DataTableDemoComponent,
+    FilesComponent,
+    FormDemoComponent,
+    FormNodeViewerComponent,
+    FormViewerComponent,
+    HomeComponent,
+    LoginDemoComponent,
+    SearchComponent,
+    SettingsComponent,
+    SocialComponent,
+    TagComponent,
+    WebscriptComponent
+} from './components/index';
+
+import { UploadButtonComponent } from 'ng2-alfresco-upload';
+import { FormListDemoComponent } from './components/form/form-list-demo.component';
+
+export const appRoutes: Routes = [
+    { path: 'login', component: LoginDemoComponent },
+    {
+        path: '',
+        component: HomeComponent,
+        canActivate: [AuthGuard]
+    },
+    {
+        path: 'home',
+        component: HomeComponent,
+        canActivate: [AuthGuard]
+    },
+    {
+        path: 'files',
+        component: FilesComponent,
+        canActivate: [AuthGuardEcm]
+    },
+    {
+        path: 'files/:id',
+        component: FilesComponent,
+        canActivate: [AuthGuardEcm]
+    },
+    {
+        path: 'datatable',
+        component: DataTableDemoComponent,
+        canActivate: [AuthGuard]
+    },
+    {
+        path: 'uploader',
+        component: UploadButtonComponent,
+        canActivate: [AuthGuardEcm]
+    },
+    {
+        path: 'search',
+        component: SearchComponent,
+        canActivate: [AuthGuardEcm]
+    },
+    {
+        path: 'activiti',
+        component: ActivitiAppsViewComponent,
+        canActivate: [AuthGuardBpm]
+    },
+    {
+        path: 'activiti/apps',
+        component: ActivitiAppsViewComponent,
+        canActivate: [AuthGuardBpm]
+    },
+    {
+        path: 'activiti/apps/:appId/tasks',
+        component: ActivitiDemoComponent,
+        canActivate: [AuthGuardBpm]
+    },
+    {
+        path: 'activiti/apps/:appId/processes',
+        component: ActivitiDemoComponent,
+        canActivate: [AuthGuardBpm]
+    },
+    {
+        path: 'activiti/apps/:appId/diagram/:processDefinitionId',
+        component: ActivitiShowDiagramComponent,
+        canActivate: [AuthGuardBpm]
+    },
+    // TODO: check if neeeded
+    {
+        path: 'activiti/appId/:appId',
+        component: ActivitiDemoComponent,
+        canActivate: [AuthGuardBpm]
+    },
+    // TODO: check if needed
+    {
+        path: 'activiti/tasks/:id',
+        component: FormViewerComponent,
+        canActivate: [AuthGuardBpm]
+    },
+    // TODO: check if needed
+    {
+        path: 'activiti/tasksnode/:id',
+        component: FormNodeViewerComponent,
+        canActivate: [AuthGuardBpm]
+    },
+    {
+        path: 'webscript',
+        component: WebscriptComponent,
+        canActivate: [AuthGuardEcm]
+    },
+    {
+        path: 'tag',
+        component: TagComponent,
+        canActivate: [AuthGuardEcm]
+    },
+    {
+        path: 'social',
+        component: SocialComponent,
+        canActivate: [AuthGuardEcm]
+    },
+    { path: 'about', component: AboutComponent },
+    { path: 'settings', component: SettingsComponent },
+    { path: 'form', component: FormDemoComponent },
+    { path: 'form-list', component: FormListDemoComponent }
+];
+
+export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

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

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

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

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

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

@@ -0,0 +1,36 @@
+.activiti-task-list__item:hover {
+    cursor: pointer;
+    font-weight: bold;
+}
+
+.activiti {
+    background-color: #f5f5f5;
+}
+
+.task-column {
+    background-color: #f5f5f5;
+    padding: 10px 10px 10px 10px;
+}
+
+.mdl-layout__header {
+    z-index: 1;
+}
+
+.list-buttons {
+    text-align: left;
+    margin-bottom: 5px;
+}
+
+.adf-no-form-container {    
+    text-align: center;
+    font-weight: 600;
+    font-size: 18px;
+    font-family: Muli;
+    padding: 16px;
+}
+
+.action-header {
+    border: 1px solid rgb(224, 224, 224);
+    background: #fff;
+    text-align: left;
+}

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

@@ -0,0 +1,242 @@
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
+
+    <header class="mdl-layout__header">
+
+        <!-- TABS -->
+
+        <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
+            <a id="tasks-header" href="#tasks" class="mdl-layout__tab" [class.is-active]="activeTab === 'tasks'" (click)="activeTab = 'tasks'">TASKS</a>
+            <a id="processes-header" href="#processes" class="mdl-layout__tab" [class.is-active]="activeTab === 'processes'" (click)="activeTab = 'processes'">PROCESSES</a>
+            <a id="report-header" href="#report" class="mdl-layout__tab" [class.is-active]="activeTab === 'reports'" (click)="activeTab = 'reports'">REPORTS</a>
+        </div>
+    </header>
+
+    <main class="mdl-layout__content activiti">
+
+        <!--  TASKS COMPONENT -->
+
+        <section class="mdl-layout__tab-panel" [class.is-active]="activeTab === 'tasks'" id="tasks">
+            <div class="page-content">
+                <div class="mdl-grid">
+                    <div class="mdl-cell mdl-cell--2-col task-column mdl-shadow--2dp">
+                        <div class="list-buttons">
+                            <button md-raised-button data-automation-id="btn-start-task" (click)="navigateStartTask()">
+                                <md-icon>add</md-icon>
+                                <span>START TASK</span>
+                            </button>
+                        </div>
+                        <adf-accordion>
+                            <adf-accordion-group [heading]="'Tasks'" [isSelected]="true" [isOpen]="true" [headingIcon]="'assignment'">
+                                <activiti-filters
+                                    [filterParam]="{name:'MY tasks'}"
+                                    [appId]="appId"
+                                    [hasIcon]="false"
+                                    (filterClick)="onTaskFilterClick($event)"
+                                    (onSuccess)="onSuccessTaskFilterList($event)"
+                                    #activitifilter>
+                                </activiti-filters>
+                            </adf-accordion-group>
+                        </adf-accordion>
+                    </div>
+                    <div class="mdl-cell mdl-cell--3-col task-column mdl-shadow--2dp" *ngIf="taskFilter && !isStartTaskMode()">
+                        <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" *ngIf="!isStartTaskMode()"
+                            [class.mdl-cell--7-col]="taskFilter && !isStartTaskMode()"
+                            [class.mdl-cell--10-col]="!taskFilter || isStartTaskMode()">
+                        <activiti-task-details #activitidetails
+                            [debugMode]="true"
+                            [taskId]="currentTaskId"
+                            [fieldValidators]="fieldValidators"
+                            (formCompleted)="onFormCompleted($event)"
+                            (formContentClicked)="onFormContentClick($event)"
+                            (taskCreated)="onTaskCreated($event)"
+                            (assignTask)="onAssignTask()"
+                            (taskDeleted)="onTaskDeleted($event)">
+                        </activiti-task-details>
+                        <hr>
+                        <div *ngIf="currentTaskId">
+                            Task Audit log
+                            <button
+                                adf-task-audit
+                                [task-id]="currentTaskId"
+                                [download]="true"
+                                md-icon-button (clicked)="onAuditClick($event)" (error)="onAuditError($event)" >
+                                <md-icon>assignment_ind</md-icon>
+                            </button>
+                            <hr>
+                        </div>
+                        <md-card>
+                            <md-card-content>
+                                <activiti-task-attachments
+                                    [taskId]="currentTaskId">
+                                </activiti-task-attachments>
+                            </md-card-content>
+                        </md-card>
+                    </div>
+                    <div class="mdl-cell mdl-cell--10-col task-column mdl-shadow--2dp" *ngIf="isStartTaskMode()">
+                         <adf-start-task
+                                [appId]="appId"
+                                (success)="onStartTaskSuccess($event)"
+                                (cancel)="onCancelStartTask()">
+                        </adf-start-task>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!--  PROCESS COMPONENT -->
+
+        <section class="mdl-layout__tab-panel" [class.is-active]="activeTab === 'processes'" id="processes">
+            <div class="page-content" *ngIf="activeTab === 'processes'">
+                <div class="page-content">
+                    <div class="mdl-grid">
+                        <div class="mdl-cell mdl-cell--2-col task-column  mdl-shadow--2dp">
+                            <div class="list-buttons">
+                                <button
+                                    md-raised-button
+                                    data-automation-id="btn-start-process"
+                                    (click)="navigateStartProcess()">
+                                    <md-icon>add</md-icon>
+                                    <span>START PROCESS</span>
+                                </button>
+                            </div>
+                            <adf-accordion>
+                                <adf-accordion-group [heading]="'Processes'" [isSelected]="true" [isOpen]="true" [headingIcon]="'assessment'">
+                                    <activiti-process-instance-filters
+                                        [filterParam]="{index: 0}"
+                                        [appId]="appId"
+                                        (filterClick)="onProcessFilterClick($event)"
+                                        (onSuccess)="onSuccessProcessFilterList($event)">
+                                    </activiti-process-instance-filters>
+                                </adf-accordion-group>
+                            </adf-accordion>
+                        </div>
+                        <div class="mdl-cell mdl-cell--3-col task-column mdl-shadow--2dp" *ngIf="processFilter && !isStartProcessMode()">
+                            <activiti-process-instance-list
+                                *ngIf="processFilter?.hasFilter()" [appId]="processFilter.appId"
+                                [processDefinitionKey]="processFilter.filter.processDefinitionKey"
+                                [name]="processFilter.filter.name"
+                                [state]="processFilter.filter.state"
+                                [sort]="processFilter.filter.sort"
+                                [data]="dataProcesses"
+                                (rowClick)="onProcessRowClick($event)"
+                                (onSuccess)="onSuccessProcessList($event)">
+                                <!-- Custom column definition demo -->
+                                <!--
+                                <data-columns>
+                                    <data-column key="name" title="NAME" class="full-width name-column"></data-column>
+                                    <data-column key="created" title="Created" class="hidden"></data-column>
+                                </data-columns>
+                                -->
+                            </activiti-process-instance-list>
+                        </div>
+                        <div class="mdl-cell task-column mdl-shadow--2dp" *ngIf="!isStartProcessMode()"
+                            [class.mdl-cell--7-col]="processFilter && !isStartProcessMode()"
+                            [class.mdl-cell--10-col]="!processFilter || isStartProcessMode()">
+                            <activiti-process-instance-details
+                                [processInstanceId]="currentProcessInstanceId"
+                                (processCancelled)="processCancelled()"
+                                (showProcessDiagram)="onShowProcessDiagram($event)"
+                                (taskClick)="onProcessDetailsTaskClick($event)">
+                            </activiti-process-instance-details>
+                            <hr>
+                            <div *ngIf="currentProcessInstanceId">
+                                Process Audit log
+                                <button adf-process-audit
+                                    [process-id]="currentProcessInstanceId"
+                                    [download]="true" md-icon-button
+                                    [format]="'pdf'"
+                                    (clicked)="onAuditClick($event)"
+                                    (error)="onAuditError($event)">
+                                    <md-icon>assignment_ind</md-icon>
+                                </button>
+                                <hr>
+                            </div>
+                            <md-card>
+                                <md-card-content>
+                                    <activiti-process-attachments
+                                        [processId]="currentProcessInstanceId">
+                                    </activiti-process-attachments>
+                                </md-card-content>
+                            </md-card>
+                        </div>
+                        <div class="mdl-cell mdl-cell--10-col task-column mdl-shadow--2dp" *ngIf="isStartProcessMode()">
+                            <adf-start-process
+                                    [appId]="appId"
+                                    (start)="onStartProcessInstance($event)"
+                                    (cancel)="onCancelProcessInstance()">
+                            </adf-start-process>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+        <!--  ANALYTICS COMPONENT -->
+
+        <section class="mdl-layout__tab-panel" [class.is-active]="activeTab === 'reports'" id="report">
+            <div class="page-content" *ngIf="activeTab === 'reports'">
+                <div class="mdl-grid">
+                    <div class="mdl-cell mdl-cell--4-col task-column mdl-shadow--2dp">
+                        <span><h5>Report List</h5></span>
+                        <hr>
+                        <analytics-report-list
+                            [appId]="appId"
+                            [selectFirst]="selectFirstReport"
+                            (reportClick)="onReportClick($event)"
+                            #analyticsreportlist>
+                        </analytics-report-list>
+                    </div>
+                    <div class="mdl-cell mdl-cell--8-col task-column mdl-shadow--2dp">
+                        <activiti-analytics
+                            *ngIf="report"
+                            [appId]="appId"
+                            [reportId]="report.id"
+                            [hideParameters]="false"
+                            (editReport)="onEditReport($event)"
+                            (reportSaved)="onReportSaved($event)"
+                            (reportDeleted)="onReportDeleted()">
+                        </activiti-analytics>
+                        <div *ngIf="!report">
+                            <span>{{'ANALYTICS_REPORT.NO_REPORT_MESSAGE' | translate}}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+    </main>
+</div>
+
+<div *ngIf="fileShowed">
+    <alfresco-viewer
+        [(showViewer)]="fileShowed"
+        [blobFile]="content"
+        [displayName]="contentName"
+        [overlayMode]="true">
+    </alfresco-viewer>
+</div>

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

@@ -0,0 +1,390 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// tslint:disable-next-line:adf-file-name
+import { AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { AnalyticsReportListComponent } from 'ng2-activiti-analytics';
+import { FORM_FIELD_VALIDATORS, FormEvent, FormFieldEvent, FormRenderingService, FormService } from 'ng2-activiti-form';
+import {
+    FilterProcessRepresentationModel,
+    ProcessFiltersComponent,
+    ProcessInstance,
+    ProcessInstanceDetailsComponent,
+    ProcessInstanceListComponent,
+    StartProcessInstanceComponent
+} from 'ng2-activiti-processlist';
+import {
+    AppsListComponent,
+    FilterRepresentationModel,
+    TaskDetailsComponent,
+    TaskDetailsEvent,
+    TaskFiltersComponent,
+    TaskListComponent
+} from 'ng2-activiti-tasklist';
+import { AlfrescoApiService } from 'ng2-alfresco-core';
+import {
+    DataSorting,
+    ObjectDataRow,
+    ObjectDataTableAdapter
+} from 'ng2-alfresco-datatable';
+import { Subscription } from 'rxjs/Rx';
+import { /*CustomEditorComponent*/ CustomStencil01 } from './custom-editor/custom-editor.component';
+import { DemoFieldValidator } from './demo-field-validator';
+
+declare var componentHandler;
+
+const currentProcessIdNew = '__NEW__';
+const currentTaskIdNew = '__NEW__';
+
+@Component({
+    selector: 'activiti-demo',
+    templateUrl: './activiti-demo.component.html',
+    styleUrls: ['./activiti-demo.component.css']
+})
+export class ActivitiDemoComponent implements AfterViewInit, OnDestroy, OnInit {
+
+    @ViewChild(TaskFiltersComponent)
+    activitifilter: TaskFiltersComponent;
+
+    @ViewChild(TaskListComponent)
+    taskList: TaskListComponent;
+
+    @ViewChild(ProcessFiltersComponent)
+    activitiprocessfilter: ProcessFiltersComponent;
+
+    @ViewChild(ProcessInstanceListComponent)
+    processList: ProcessInstanceListComponent;
+
+    @ViewChild(ProcessInstanceDetailsComponent)
+    activitiprocessdetails: ProcessInstanceDetailsComponent;
+
+    @ViewChild(TaskDetailsComponent)
+    activitidetails: TaskDetailsComponent;
+
+    @ViewChild(StartProcessInstanceComponent)
+    activitiStartProcess: StartProcessInstanceComponent;
+
+    @ViewChild(AnalyticsReportListComponent)
+    analyticsreportlist: AnalyticsReportListComponent;
+
+    @Input()
+    appId: number = null;
+
+    fileShowed: boolean = false;
+    selectFirstReport: boolean = false;
+
+    content: Blob;
+    contentName: string;
+
+    layoutType: string;
+    currentTaskId: string;
+    currentProcessInstanceId: string;
+
+    taskSchemaColumns: any [] = [];
+    processSchemaColumns: any [] = [];
+
+    activeTab: string = 'tasks'; // tasks|processes|reports
+
+    taskFilter: FilterRepresentationModel;
+    report: any;
+    processFilter: FilterProcessRepresentationModel;
+
+    sub: Subscription;
+    blobFile: any;
+    flag: boolean = true;
+
+    dataTasks: ObjectDataTableAdapter;
+    dataProcesses: ObjectDataTableAdapter;
+
+    fieldValidators = [
+        ...FORM_FIELD_VALIDATORS,
+        new DemoFieldValidator()
+    ];
+
+    constructor(private elementRef: ElementRef,
+                private route: ActivatedRoute,
+                private router: Router,
+                private apiService: AlfrescoApiService,
+                formRenderingService: FormRenderingService,
+                formService: FormService) {
+        this.dataTasks = new ObjectDataTableAdapter();
+        this.dataTasks.setSorting(new DataSorting('created', 'desc'));
+
+        this.dataProcesses = new ObjectDataTableAdapter(
+            [],
+            [
+                { type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true },
+                { type: 'text', key: 'started', title: 'Started', cssClass: 'hidden', sortable: true }
+            ]
+        );
+        this.dataProcesses.setSorting(new DataSorting('started', 'desc'));
+
+        // Uncomment this line to replace all 'text' field editors with custom component
+        // formRenderingService.setComponentTypeResolver('text', () => CustomEditorComponent, true);
+
+        // Uncomment this line to map 'custom_stencil_01' to local editor component
+        formRenderingService.setComponentTypeResolver('custom_stencil_01', () => CustomStencil01, true);
+
+        formService.formLoaded.subscribe((e: FormEvent) => {
+            console.log(`Form loaded: ${e.form.id}`);
+        });
+
+        formService.formFieldValueChanged.subscribe((e: FormFieldEvent) => {
+            console.log(`Field value changed. Form: ${e.form.id}, Field: ${e.field.id}, Value: ${e.field.value}`);
+        });
+
+        // Uncomment this block to see form event handling in action
+        /*
+        formService.formEvents.subscribe((event: Event) => {
+            console.log('Event fired:' + event.type);
+            console.log('Event Target:' + event.target);
+        });
+        */
+    }
+
+    ngOnInit() {
+        if (this.router.url.includes('processes') ) {
+            this.activeTab = 'processes';
+        }
+        this.sub = this.route.params.subscribe(params => {
+            let applicationId = params['appId'];
+            if (applicationId && applicationId !== '0') {
+                this.appId = params['appId'];
+            }
+
+            this.taskFilter = null;
+            this.currentTaskId = null;
+            this.processFilter = null;
+            this.currentProcessInstanceId = null;
+        });
+        this.layoutType = AppsListComponent.LAYOUT_GRID;
+
+    }
+
+    ngOnDestroy() {
+        this.sub.unsubscribe();
+    }
+
+    onTaskFilterClick(filter: FilterRepresentationModel): void {
+        this.applyTaskFilter(filter);
+    }
+
+    onReportClick(event: any): void {
+        this.report = event;
+    }
+
+    onSuccessTaskFilterList(event: any): void {
+        this.applyTaskFilter(this.activitifilter.getCurrentFilter());
+    }
+
+    applyTaskFilter(filter: FilterRepresentationModel) {
+        this.taskFilter = filter;
+        if (filter && this.taskList) {
+            this.taskList.hasCustomDataSource = false;
+        }
+    }
+
+    onStartTaskSuccess(event: any): void {
+        this.activitifilter.selectFilterWithTask(event.id);
+        this.currentTaskId = event.id;
+    }
+
+    onCancelStartTask() {
+        this.currentTaskId = null;
+        this.reloadTaskFilters();
+    }
+
+    onSuccessTaskList(event: FilterRepresentationModel) {
+        this.currentTaskId = this.taskList.getCurrentId();
+    }
+
+    onProcessFilterClick(event: FilterProcessRepresentationModel): void {
+        this.currentProcessInstanceId = null;
+        this.processFilter = event;
+    }
+
+    onSuccessProcessFilterList(): void {
+        this.processFilter = this.activitiprocessfilter.getCurrentFilter();
+    }
+
+    onSuccessProcessList(event: any): void {
+        this.currentProcessInstanceId = this.processList.getCurrentId();
+    }
+
+    onTaskRowClick(taskId): void {
+        this.currentTaskId = taskId;
+    }
+
+    onProcessRowClick(processInstanceId): void {
+        this.currentProcessInstanceId = processInstanceId;
+    }
+
+    onEditReport(name: string): void {
+        this.analyticsreportlist.reload();
+    }
+
+    onReportSaved(reportId): void {
+        this.analyticsreportlist.reload(reportId);
+    }
+
+    onReportDeleted(): void {
+        this.analyticsreportlist.reload();
+        this.analyticsreportlist.selectReport(null);
+    }
+
+    navigateStartProcess(): void {
+        this.resetProcessFilters();
+        this.reloadProcessFilters();
+        this.currentProcessInstanceId = currentProcessIdNew;
+    }
+
+    navigateStartTask(): void {
+        this.resetTaskFilters();
+        this.reloadTaskFilters();
+        this.currentTaskId = currentTaskIdNew;
+    }
+
+    onStartProcessInstance(instance: ProcessInstance): void {
+        this.currentProcessInstanceId = instance.id;
+        this.activitiStartProcess.reset();
+        this.resetProcessFilters();
+    }
+
+    onCancelProcessInstance() {
+        this.currentProcessInstanceId = null;
+        this.reloadProcessFilters();
+    }
+
+    isStartProcessMode(): boolean {
+        return this.currentProcessInstanceId === currentProcessIdNew;
+    }
+
+    isStartTaskMode(): boolean {
+        return this.currentTaskId === currentTaskIdNew;
+    }
+
+    processCancelled(data: any): void {
+        this.currentProcessInstanceId = null;
+        this.processList.reload();
+    }
+
+    onSuccessNewProcess(data: any): void {
+        this.processList.reload();
+    }
+
+    onFormCompleted(form): void {
+        this.taskList.reload();
+        this.currentTaskId = null;
+    }
+
+    onFormContentClick(content: any): void {
+        this.fileShowed = true;
+        this.content = content.contentBlob;
+        this.contentName = content.name;
+    }
+
+    onAuditClick(event: any) {
+        console.log(event);
+    }
+
+    onAuditError(event: any): void {
+        console.error('My custom error message' + event);
+    }
+
+    onTaskCreated(data: any): void {
+        this.currentTaskId = data.parentTaskId;
+        this.taskList.reload();
+    }
+
+    onTaskDeleted(data: any): void {
+        this.taskList.reload();
+    }
+
+    ngAfterViewInit() {
+        // workaround for MDL issues with dynamic components
+        if (componentHandler) {
+            componentHandler.upgradeAllRegistered();
+        }
+
+        this.loadStencilScriptsInPageFromActiviti();
+    }
+
+    loadStencilScriptsInPageFromActiviti() {
+        this.apiService.getInstance().activiti.scriptFileApi.getControllers().then(response => {
+            if (response) {
+                let s = document.createElement('script');
+                s.type = 'text/javascript';
+                s.text = response;
+                this.elementRef.nativeElement.appendChild(s);
+            }
+        });
+    }
+
+    onShowProcessDiagram(event: any): void {
+        this.router.navigate(['/activiti/apps/' + this.appId + '/diagram/' + event.value]);
+    }
+
+    onProcessDetailsTaskClick(event: TaskDetailsEvent): void {
+        event.preventDefault();
+        this.activeTab = 'tasks';
+
+        const taskId = event.value.id;
+        const processTaskDataRow = new ObjectDataRow({
+            id: taskId,
+            name: event.value.name || 'No name',
+            created: event.value.created
+        });
+        this.activitifilter.selectFilter(null);
+        this.taskList.setCustomDataSource([processTaskDataRow]);
+        this.taskList.selectTask(taskId);
+        this.currentTaskId = taskId;
+    }
+
+    private resetProcessFilters(): void {
+        this.processFilter = null;
+    }
+
+    private resetTaskFilters(): void {
+        this.taskFilter = null;
+    }
+
+    private reloadProcessFilters(): void {
+        this.activitiprocessfilter.selectFilter(this.activitiprocessfilter.getCurrentFilter());
+    }
+
+    private reloadTaskFilters(): void {
+        this.activitifilter.selectFilter(this.activitifilter.getCurrentFilter());
+    }
+
+    onRowClick(event): void {
+        console.log(event);
+    }
+
+    onRowDblClick(event): void {
+        console.log(event);
+    }
+
+    isTaskCompleted(): boolean {
+        return this.activitidetails.isCompletedTask();
+    }
+
+    onAssignTask() {
+        this.taskList.reload();
+        this.currentTaskId = null;
+    }
+}

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

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

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

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

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

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

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

@@ -0,0 +1,6 @@
+<div>
+    <button (click)="onClickBack()" class="mdl-button mdl-button--icon">
+        <i class="material-icons">keyboard_backspace</i>
+    </button>
+    <activiti-diagram [processInstanceId]="processDefinitionId"></activiti-diagram>
+</div>

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

@@ -0,0 +1,43 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+@Component({
+    selector: 'activiti-show-diagram',
+    templateUrl: './activiti-show-diagram.component.html',
+    styleUrls: ['./activiti-show-diagram.component.css']
+})
+export class ActivitiShowDiagramComponent {
+
+    processDefinitionId: string;
+    appId: string;
+
+    constructor(private route: ActivatedRoute,
+                private router: Router) {
+        this.route.params.subscribe(params => {
+            this.processDefinitionId = params['processDefinitionId'];
+            this.appId = params['appId'];
+        });
+    }
+
+    onClickBack() {
+        this.router.navigate(['/activiti/apps/' + this.appId + '/processes']);
+    }
+
+}

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

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

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

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

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

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

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

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

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

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

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { FormFieldModel, FormFieldTypes, FormFieldValidator } from '@alfresco/adf-core';
+import { FormFieldModel, FormFieldTypes, FormFieldValidator } from 'ng2-activiti-form';
 
 export class DemoFieldValidator implements FormFieldValidator {
 
@@ -26,7 +26,7 @@ export class DemoFieldValidator implements FormFieldValidator {
     validate(field: FormFieldModel): boolean {
         if (this.isSupported(field)) {
             if (field.value && field.value.toLowerCase() === 'admin') {
-                field.validationSummary.message = 'Sorry, the value cannot be "admin".';
+                field.validationSummary = 'Sorry, the value cannot be "admin".';
                 return false;
             }
         }

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,206 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, Input } from '@angular/core';
+import { AlfrescoApiService } from 'ng2-alfresco-core';
+import { DataCellEvent, DataRowActionEvent, DataSorting, ObjectDataColumn, ObjectDataRow, ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
+import { Observable } from 'rxjs/Rx';
+
+@Component({
+    selector: 'datatable-demo',
+    templateUrl: './datatable-demo.component.html',
+    styleUrls: ['./datatable-demo.component.css']
+})
+export class DataTableDemoComponent {
+
+    multiselect: boolean = false;
+    data: ObjectDataTableAdapter;
+
+    @Input()
+    selectionMode = 'single';
+
+    selectionModes = [
+        { value: 'none', viewValue: 'None' },
+        { value: 'single', viewValue: 'Single' },
+        { value: 'multiple', viewValue: 'Multiple' }
+    ];
+
+    private _imageUrl: string = 'http://placehold.it/140x100';
+    private _createdBy: any = {
+        name: 'Denys Vuika',
+        email: 'denys.vuika@alfresco.com'
+    };
+
+    constructor(private apiService: AlfrescoApiService) {
+        this.reset();
+    }
+
+    reset() {
+        this.data = new ObjectDataTableAdapter(
+            [
+                {
+                    id: 1,
+                    name: 'Name 1',
+                    createdOn: new Date(2016, 6, 2, 15, 8, 1),
+                    createdBy: this._createdBy,
+                    icon: 'material-icons://folder_open'
+                },
+                {
+                    id: 2,
+                    name: 'Name 2',
+                    createdOn: new Date(2016, 6, 2, 15, 8, 2),
+                    createdBy: this._createdBy,
+                    icon: 'material-icons://accessibility'
+                },
+                {
+                    id: 3,
+                    name: 'Name 3',
+                    createdOn: new Date(2016, 6, 2, 15, 8, 3),
+                    createdBy: this._createdBy,
+                    icon: 'material-icons://alarm'
+                },
+                {
+                    id: 4,
+                    name: 'Image 1',
+                    createdOn: new Date(2016, 6, 2, 15, 8, 4),
+                    createdBy: this._createdBy,
+                    icon: this._imageUrl
+                }
+            ],
+            [
+                { type: 'image', key: 'icon', title: '', srTitle: 'Thumbnail' },
+                { type: 'text', key: 'id', title: 'Id', sortable: true },
+                { type: 'text', key: 'createdOn', title: 'Created On', sortable: true },
+                { type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true },
+                { type: 'text', key: 'createdBy.name', title: 'Created By', sortable: true }
+            ]
+        );
+
+        this.data.setSorting(new DataSorting('id', 'asc'));
+    }
+
+    addRow() {
+        let id = this.data.getRows().length + 1;
+        let row = new ObjectDataRow({
+            id: id,
+            name: 'Name ' + id,
+            createdOn: new Date(),
+            icon: 'material-icons://extension',
+            createdBy: this._createdBy
+        });
+        this.data.getRows().push(row);
+        this.data.sort();
+    }
+
+    replaceRows() {
+        let objects = [
+            {
+                id: 10,
+                name: 'Name 10',
+                createdBy: this._createdBy,
+                createdOn: new Date(2016, 6, 2, 15, 8, 5),
+                icon: 'material-icons://face'
+            },
+            {
+                id: 11,
+                name: 'Name 11',
+                createdBy: this._createdBy,
+                createdOn: new Date(2016, 6, 2, 15, 8, 6),
+                icon: 'material-icons://language'
+            },
+            {
+                id: 12,
+                name: 'Name 12',
+                createdBy: this._createdBy,
+                createdOn: new Date(2016, 6, 2, 15, 8, 7),
+                icon: 'material-icons://pets'
+            },
+            {
+                id: 13,
+                name: 'Image 13',
+                createdBy: this._createdBy,
+                createdOn: new Date(2016, 6, 2, 15, 8, 8),
+                icon: this._imageUrl
+            }
+        ];
+        let rows = objects.map(obj => new ObjectDataRow(obj));
+        this.data.setRows(rows);
+    }
+
+    replaceColumns() {
+        let schema = [
+            { type: 'text', key: 'id', title: 'Id', sortable: true },
+            { type: 'text', key: 'name', title: 'Name', sortable: true, cssClass: 'full-width name-column' }
+        ];
+        let columns = schema.map(col => new ObjectDataColumn(col));
+        this.data.setColumns(columns);
+    }
+
+    onShowRowActionsMenu(event: DataCellEvent) {
+        let myAction = {
+            title: 'Hello'
+            // you custom metadata needed for onExecuteRowAction
+        };
+        event.value.actions = [
+            myAction
+        ];
+    }
+
+    onExecuteRowAction(event: DataRowActionEvent) {
+        let args = event.value;
+        console.log(args.row);
+        console.log(args.action);
+        window.alert(`My custom action: ${args.action.title}`);
+    }
+
+    onRowClick(event) {
+        console.log(event);
+    }
+
+    onRowDblClick(event) {
+        console.log(event);
+    }
+
+    getRowForNode() {
+        let opts: any = {
+            includeSource: true,
+            include: ['path', 'properties', 'allowableOperations']
+        };
+
+        Observable.fromPromise(this.apiService.getInstance().nodes
+            .getNodeInfo('-my-', opts)).subscribe((data) => {
+                console.log('FUnNy');
+                console.log(data);
+                let objects = new ObjectDataTableAdapter([
+                    {
+                        id: data.id,
+                        name: data.name,
+                        createdBy: data.createdByUser.displayName,
+                        createdOn: new Date(data.createdAt),
+                        icon: 'material-icons://face'
+                    }],
+                    [
+                        { type: 'image', key: 'icon', title: '', srTitle: 'Thumbnail' },
+                        { type: 'text', key: 'id', title: 'Id', sortable: true },
+                        { type: 'text', key: 'createdOn', title: 'Created On', sortable: true },
+                        { type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true },
+                        { type: 'text', key: 'createdBy.name', title: 'Created By', sortable: true }
+                    ]);
+                this.data = objects;
+            });
+    }
+}

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

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

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

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

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

@@ -0,0 +1,288 @@
+/*!
+ * @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 { ChangeDetectorRef, Component, Input, OnInit, Optional, ViewChild } from '@angular/core';
+import { MdDialog } from '@angular/material';
+import { ActivatedRoute, Params, Router } from '@angular/router';
+import { MinimalNodeEntity } from 'alfresco-js-api';
+import {
+    AlfrescoApiService, AlfrescoContentService, AlfrescoTranslationService, FileUploadCompleteEvent,
+    FolderCreatedEvent, NotificationService, SiteModel, UploadService
+} from 'ng2-alfresco-core';
+import { DocumentListComponent, PermissionStyleModel } from 'ng2-alfresco-documentlist';
+
+import { CreateFolderDialogComponent } from '../../dialogs/create-folder.dialog';
+import { DownloadZipDialogComponent } from './../../dialogs/download-zip.dialog';
+
+import { ViewerService } from 'ng2-alfresco-viewer';
+
+@Component({
+    selector: 'adf-files-component',
+    templateUrl: './files.component.html',
+    styleUrls: ['./files.component.css']
+})
+export class FilesComponent implements OnInit {
+    // The identifier of a node. You can also use one of these well-known aliases: -my- | -shared- | -root-
+    currentFolderId: string = '-my-';
+
+    errorMessage: string = null;
+    fileNodeId: any;
+    showViewer: boolean = false;
+
+    useCustomToolbar = true;
+    toolbarColor = 'default';
+    useDropdownBreadcrumb = false;
+    useViewerDialog = true;
+    useInlineViewer = false;
+
+    selectionModes = [
+        { value: 'none', viewValue: 'None' },
+        { value: 'single', viewValue: 'Single' },
+        { value: 'multiple', viewValue: 'Multiple' }
+    ];
+
+    @Input()
+    selectionMode = 'multiple';
+
+    @Input()
+    multiselect = false;
+
+    @Input()
+    multipleFileUpload: boolean = false;
+
+    @Input()
+    disableWithNoPermission: boolean = false;
+
+    @Input()
+    folderUpload: boolean = false;
+
+    @Input()
+    acceptedFilesTypeShow: boolean = false;
+
+    @Input()
+    versioning: boolean = false;
+
+    @Input()
+    acceptedFilesType: string = '.jpg,.pdf,.js';
+
+    @Input()
+    enableUpload: boolean = true;
+
+    @ViewChild(DocumentListComponent)
+    documentList: DocumentListComponent;
+
+    permissionsStyle: PermissionStyleModel[] = [];
+
+    constructor(private changeDetector: ChangeDetectorRef,
+                private apiService: AlfrescoApiService,
+                private notificationService: NotificationService,
+                private uploadService: UploadService,
+                private contentService: AlfrescoContentService,
+                private dialog: MdDialog,
+                private translateService: AlfrescoTranslationService,
+                private viewerService: ViewerService,
+                private router: Router,
+                @Optional() private route: ActivatedRoute) {
+    }
+
+    showFile(event) {
+        if (this.useViewerDialog) {
+            if (event.value.entry.isFile) {
+                this.viewerService
+                    .showViewerForNode(event.value.entry)
+                    .then(result => {
+                        console.log(result);
+                    });
+            }
+        } else {
+            if (event.value.entry.isFile) {
+                this.fileNodeId = event.value.entry.id;
+                this.showViewer = true;
+            } else {
+                this.showViewer = false;
+            }
+        }
+    }
+
+    onFolderChange($event) {
+        this.router.navigate(['/files', $event.value.id]);
+    }
+
+    toggleFolder() {
+        this.multipleFileUpload = false;
+        this.folderUpload = !this.folderUpload;
+        return this.folderUpload;
+    }
+
+    ngOnInit() {
+        if (this.route) {
+            this.route.params.forEach((params: Params) => {
+                if (params['id']) {
+                    this.currentFolderId = params['id'];
+                    this.changeDetector.detectChanges();
+                }
+            });
+        }
+
+        this.uploadService.fileUploadComplete.debounceTime(300).subscribe(value => this.onFileUploadComplete(value));
+        this.contentService.folderCreated.subscribe(value => this.onFolderCreated(value));
+
+        // this.permissionsStyle.push(new PermissionStyleModel('document-list__create', PermissionsEnum.CREATE));
+        // this.permissionsStyle.push(new PermissionStyleModel('document-list__disable', PermissionsEnum.NOT_CREATE, false, true));
+    }
+
+    onNavigationError(err: any) {
+        if (err) {
+            this.errorMessage = err.message || 'Navigation error';
+        }
+    }
+
+    resetError() {
+        this.errorMessage = null;
+    }
+
+    onFileUploadComplete(event: FileUploadCompleteEvent) {
+        if (event && event.file.options.parentId === this.documentList.currentFolderId) {
+            this.documentList.reload();
+        }
+    }
+
+    onFolderCreated(event: FolderCreatedEvent) {
+        console.log('FOLDER CREATED');
+        console.log(event);
+        if (event && event.parentId === this.documentList.currentFolderId) {
+            this.documentList.reload();
+        }
+    }
+
+    handlePermissionError(event: any) {
+        this.notificationService.openSnackMessage(
+            `You don't have the ${event.permission} permission to ${event.action} the ${event.type} `,
+            4000
+        );
+    }
+
+    onContentActionError(errors) {
+        const errorStatusCode = JSON.parse(errors.message).error.statusCode;
+        let translatedErrorMessage: any;
+
+        switch (errorStatusCode) {
+            case 403:
+                translatedErrorMessage = this.translateService.get('OPERATION.ERROR.PERMISSION');
+                break;
+            case 409:
+                translatedErrorMessage = this.translateService.get('OPERATION.ERROR.CONFLICT');
+                break;
+            default:
+                translatedErrorMessage = this.translateService.get('OPERATION.ERROR.UNKNOWN');
+        }
+
+        this.notificationService.openSnackMessage(translatedErrorMessage.value, 4000);
+    }
+
+    onContentActionSuccess(message) {
+        let translatedMessage: any = this.translateService.get(message);
+        this.notificationService.openSnackMessage(translatedMessage.value, 4000);
+    }
+
+    onCreateFolderClicked(event: Event) {
+        let dialogRef = this.dialog.open(CreateFolderDialogComponent);
+        dialogRef.afterClosed().subscribe(folderName => {
+            if (folderName) {
+                this.contentService.createFolder('', folderName, this.documentList.currentFolderId).subscribe(
+                    node => console.log(node),
+                    err => console.log(err)
+                );
+            }
+        });
+    }
+
+    getSiteContent(site: SiteModel) {
+        this.currentFolderId = site && site.guid ? site.guid : '-my-';
+    }
+
+    hasSelection(selection: Array<MinimalNodeEntity>): boolean {
+        return selection && selection.length > 0;
+    }
+
+    downloadNodes(selection: Array<MinimalNodeEntity>) {
+        if (!selection || selection.length === 0) {
+            return;
+        }
+
+        if (selection.length === 1) {
+            this.downloadNode(selection[0]);
+        } else {
+            this.downloadZip(selection);
+        }
+    }
+
+    downloadNode(node: MinimalNodeEntity) {
+        if (node && node.entry) {
+            const entry = node.entry;
+
+            if (entry.isFile) {
+                this.downloadFile(node);
+            }
+
+            if (entry.isFolder) {
+                this.downloadZip([node]);
+            }
+        }
+    }
+
+    downloadFile(node: MinimalNodeEntity) {
+        if (node && node.entry) {
+            const contentApi = this.apiService.getInstance().content;
+
+            const url = contentApi.getContentUrl(node.entry.id, true);
+            const fileName = node.entry.name;
+
+            this.download(url, fileName);
+        }
+    }
+
+    downloadZip(selection: Array<MinimalNodeEntity>) {
+        if (selection && selection.length > 0) {
+            const nodeIds = selection.map(node => node.entry.id);
+
+            const dialogRef = this.dialog.open(DownloadZipDialogComponent, {
+                width: '600px',
+                data: {
+                    nodeIds: nodeIds
+                }
+            });
+            dialogRef.afterClosed().subscribe(result => {
+                console.log(result);
+            });
+        }
+    }
+
+    download(url: string, fileName: string) {
+        if (url && fileName) {
+            const link = document.createElement('a');
+
+            link.style.display = 'none';
+            link.download = fileName;
+            link.href = url;
+
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+    }
+}

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

@@ -2,14 +2,14 @@
  * @license
  * Copyright 2016 Alfresco Software, Ltd.
  *
- * Licensed under the Apache License, Version 2.0 (the "License");
+ * Licensed under the Apache License, Version 2.0 (the 'License');
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
  *
  *     http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
+ * distributed under the License is distributed on an 'AS IS' BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
@@ -21,6 +21,11 @@ export class DemoForm {
         return {
             'id': 1001,
             'name': 'ISSUE_FORM',
+            'processDefinitionId': 'ISSUE_APP:1:2504',
+            'processDefinitionName': 'ISSUE_APP',
+            'processDefinitionKey': 'ISSUE_APP',
+            'taskId': '2510',
+            'taskDefinitionKey': 'sid-F67A2996-1684-4774-855A-4591490081FD',
             'tabs': [],
             'fields': [
                 {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,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.
+ */
+
+export { HomeComponent } from './home/home.component';
+export { DataTableDemoComponent } from './datatable/datatable-demo.component';
+export { SearchComponent } from './search/search.component';
+export { SearchBarComponent } from './search/search-bar.component';
+export { LoginDemoComponent } from './login/login-demo.component';
+export { ActivitiDemoComponent } from './activiti/activiti-demo.component';
+export { ActivitiTaskAttachmentsComponent } from './activiti/activiti-task-attachments.component';
+export { ActivitiProcessAttachmentsComponent } from './activiti/activiti-process-attachments.component';
+export { ActivitiShowDiagramComponent } from './activiti/activiti-show-diagram.component';
+export { FormViewerComponent } from './activiti/form-viewer.component';
+export { WebscriptComponent } from './webscript/webscript.component';
+export { TagComponent } from './tag/tag.component';
+export { SocialComponent } from './social/social.component';
+export { AboutComponent } from './about/about.component';
+export { FilesComponent } from './files/files.component';
+export { FormNodeViewerComponent } from './activiti/form-node-viewer.component';
+export { ActivitiAppsViewComponent } from './activiti/apps.view';
+export { SettingsComponent } from './settings/settings.component';
+export { FormDemoComponent } from './form/form-demo.component';

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

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

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

@@ -0,0 +1,76 @@
+<!--BPM, ECN AND CSRF TOGGLE-->
+
+<div class="settings">
+    <p class="toggle">
+        <label for="switch1" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+            <input type="checkbox" id="switch1" [checked]="isECM" class="mdl-switch__input"
+                   (click)="toggleECM()">
+            <span class="mdl-switch__label">Content Services</span>
+        </label>
+    </p>
+    <p class="toggle">
+        <label for="switch2" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+            <input type="checkbox" id="switch2" [checked]="isBPM" class="mdl-switch__input"
+                   (click)="toggleBPM()">
+            <span class="mdl-switch__label">Process Services</span>
+        </label>
+    </p>
+    <p class="toggle">
+        <label for="switch3" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+            <input type="checkbox" id="switch3" class="mdl-switch__input" [checked]="!disableCsrf" (click)="toggleCSRF()">
+            <span class="mdl-switch__label">CSRF</span>
+        </label>
+    </p>
+    <p class="toggle">
+        <label for="switch4" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+            <input type="checkbox" id="switch4" class="mdl-switch__input" [checked]="showFooter" (click)="toggleFooter()">
+            <span class="mdl-switch__label">Login footer</span>
+        </label>
+    </p>
+</div>
+
+<!--SETTING BUTTON-->
+<a class="mdl-navigation__link setting-button" data-automation-id="settings" href="" routerLink="/settings">
+    <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
+        <i class="material-icons">settings</i>
+    </button>
+</a>
+
+<alfresco-login #alfrescologin
+                [providers]="providers"
+                [fieldsValidation]="customValidation"
+                [disableCsrf]="disableCsrf"
+                [showLoginActions]="showFooter"
+                [showRememberMe]="showFooter"
+                copyrightText="© 2016 Alfresco Software, Inc. All Rights Reserved. (customised text)"
+                (onSuccess)="onLogin($event)"
+                (onError)="onError($event)">
+    <div class="mobile-settings">
+        <p>
+            <label for="switch1-mobile" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+                <input type="checkbox" id="switch1-mobile" [checked]="isECM" class="mdl-switch__input"
+                       (click)="toggleECM()">
+                <span class="mdl-switch__label">Content Services</span>
+            </label>
+        </p>
+        <p>
+            <label for="switch2-mobile" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+                <input type="checkbox" id="switch2-mobile" [checked]="isBPM" class="mdl-switch__input"
+                       (click)="toggleBPM()">
+                <span class="mdl-switch__label">Process Services</span>
+            </label>
+        </p>
+        <p>
+            <label for="switch3-mobile" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+                <input type="checkbox" id="switch3-mobile" class="mdl-switch__input" [checked]="!disableCsrf" (click)="toggleCSRF()">
+                <span class="mdl-switch__label">CSRF</span>
+            </label>
+        </p>
+        <p>
+            <label for="switch4-mobile" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+                <input type="checkbox" id="switch4-mobile" class="mdl-switch__input" [checked]="showFooter" (click)="toggleFooter()">
+                <span class="mdl-switch__label">Login footer</span>
+            </label>
+        </p>
+    </div>
+</alfresco-login>

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

@@ -0,0 +1,121 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { LogService, StorageService } from 'ng2-alfresco-core';
+
+@Component({
+    selector: 'login-demo',
+    templateUrl: './login-demo.component.html',
+    styleUrls: ['./login-demo.component.css']
+})
+export class LoginDemoComponent implements OnInit {
+
+    @ViewChild('alfrescologin')
+    alfrescologin: any;
+
+    providers: string = 'ECM';
+    customValidation: any;
+
+    disableCsrf: boolean = false;
+    isECM: boolean = true;
+    isBPM: boolean = false;
+    showFooter: boolean = true;
+    customMinLenght: number = 2;
+
+    constructor(private router: Router,
+                private storage: StorageService,
+                private logService: LogService) {
+        this.customValidation = {
+            username: ['', Validators.compose([Validators.required, Validators.minLength(this.customMinLenght)])],
+            password: ['', Validators.required]
+        };
+    }
+
+    ngOnInit() {
+        this.alfrescologin.addCustomValidationError('username', 'required', 'LOGIN.MESSAGES.USERNAME-REQUIRED');
+        this.alfrescologin.addCustomValidationError('username', 'minlength', 'LOGIN.MESSAGES.USERNAME-MIN', {minLenght: this.customMinLenght});
+        this.alfrescologin.addCustomValidationError('password', 'required', 'LOGIN.MESSAGES.PASSWORD-REQUIRED');
+
+        if (this.storage.hasItem('providers')) {
+            this.providers = this.storage.getItem('providers');
+        }
+
+        this.initProviders();
+    }
+
+    initProviders() {
+        if (this.providers === 'BPM') {
+            this.isECM = false;
+            this.isBPM = true;
+        } else if (this.providers === 'ECM') {
+            this.isECM = true;
+            this.isBPM = false;
+        } else if (this.providers === 'ALL') {
+            this.isECM = true;
+            this.isBPM = true;
+        }
+    }
+
+    onLogin($event) {
+        this.router.navigate(['/home']);
+    }
+
+    onError($event) {
+        this.logService.error($event);
+    }
+
+    toggleECM() {
+        this.isECM = !this.isECM;
+        this.storage.setItem('providers', this.updateProvider());
+    }
+
+    toggleBPM() {
+        this.isBPM = !this.isBPM;
+        this.storage.setItem('providers', this.updateProvider());
+    }
+
+    toggleCSRF() {
+        this.disableCsrf = !this.disableCsrf;
+    }
+
+    toggleFooter() {
+        this.showFooter = !this.showFooter;
+    }
+
+    updateProvider() {
+        if (this.isBPM && this.isECM) {
+            this.providers = 'ALL';
+            return this.providers;
+        }
+
+        if (this.isECM) {
+            this.providers = 'ECM';
+            return this.providers;
+        }
+
+        if (this.isBPM) {
+            this.providers = 'BPM';
+            return this.providers;
+        }
+
+        this.providers = '';
+        return this.providers;
+    }
+}

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,63 @@
+<div class="setting-container">
+    <div class="table-row">
+        <div class="setting-card-padding"></div>
+        <div class="setting-card mdl-card mdl-shadow--2dp">
+            <div class="mdl-card__title mdl-card--expand">
+                <h2 class="mdl-card__title-text">SETTINGS</h2>
+            </div>
+            <div class="mdl-card__actions mdl-card--border">
+                <div class="mdl-card__supporting-text">
+                    Content Services host URL configuration
+                </div>
+                <nav class="mdl-navigation">
+                    <i class="icon material-icons icon-margin">link</i>
+                    <div class="mdl-textfield mdl-js-textfield adf-setting-input-padding">
+                        <input
+                            data-automation-id="ecmHost"
+                            class="mdl-textfield__input"
+                            tabindex="1"
+                            type="text"
+                            tabindex="1"
+                            (change)="onChangeECMHost($event)"
+                            pattern="^(http|https):\/\/.*[^/]$"
+                            id="ecmHost"
+                            value="{{ecmHost}}"
+                            placeholder="http(s)://host|ip:port(/path)">
+                        <label class="mdl-textfield__label" for="ecmHost">ECM Host</label>
+                        <span class="mdl-textfield__error">ECM host is not valid! http(s)://host|ip:port(/path)</span>
+                    </div>
+                </nav>
+
+                <div class="mdl-card__supporting-text">
+                    Process Services host URL configuration
+                </div>
+                <nav class="mdl-navigation">
+                    <i class="icon material-icons icon-margin">link</i>
+                    <div class="mdl-textfield mdl-js-textfield adf-setting-input-padding">
+                        <input
+                            data-automation-id="bpmHost"
+                            class="mdl-textfield__input"
+                            type="text"
+                            (change)="onChangeBPMHost($event)"
+                            tabindex="2"
+                            pattern="^(http|https):\/\/.*[^/]$"
+                            id="bpmHost"
+                            value="{{bpmHost}}"
+                            placeholder="http(s)://host|ip:port(/path)">
+                        <label class="mdl-textfield__label" for="bpmHost">BPM Host</label>
+                        <span class="mdl-textfield__error">BPM host is not valid! http(s)://host|ip:port(/path)</span>
+                    </div>
+                </nav>
+            </div>
+            <div class="mdl-card__actions mdl-card--border">
+                <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" onclick="window.history.back()">
+                    Back
+                </a>
+                <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" onclick="window.location.href = '/'">
+                    Apply
+                </a>
+            </div>
+        </div>
+        <div class="setting-card-padding"></div>
+    </div>
+</div>

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

@@ -0,0 +1,73 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { AfterViewChecked, Component } from '@angular/core';
+import { AlfrescoSettingsService, LogService, StorageService } from 'ng2-alfresco-core';
+
+declare var componentHandler: any;
+
+@Component({
+    selector: 'app-settings',
+    templateUrl: 'settings.component.html',
+    styleUrls: ['settings.component.css']
+})
+export class SettingsComponent implements AfterViewChecked {
+
+    ecmHost: string;
+    bpmHost: string;
+
+    constructor(private settingsService: AlfrescoSettingsService,
+                private storage: StorageService,
+                private logService: LogService) {
+        this.ecmHost = storage.getItem('ecmHost') || this.settingsService.ecmHost;
+        this.bpmHost = storage.getItem('bpmHost') || this.settingsService.bpmHost;
+    }
+
+    ngAfterViewChecked() {
+        // workaround for MDL issues with dynamic components
+        if (componentHandler) {
+            componentHandler.upgradeAllRegistered();
+        }
+    }
+
+    public onChangeECMHost(event: KeyboardEvent): void {
+        let value = (<HTMLInputElement>event.target).value.trim();
+        if (value && this.isValidUrl(value)) {
+            this.logService.info(`ECM host: ${value}`);
+            this.ecmHost = value;
+            this.storage.setItem(`ecmHost`, value);
+        } else {
+            console.error('Ecm address does not match the pattern');
+        }
+    }
+
+    public onChangeBPMHost(event: KeyboardEvent): void {
+        let value = (<HTMLInputElement>event.target).value.trim();
+        if (value && this.isValidUrl(value)) {
+            this.logService.info(`BPM host: ${value}`);
+            this.bpmHost = value;
+            this.storage.setItem(`bpmHost`, value);
+        } else {
+            console.error('Bpm address does not match the pattern');
+        }
+    }
+
+    isValidUrl(url: string) {
+        return /^(http|https):\/\/.*/.test(url);
+    }
+
+}

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

@@ -0,0 +1,39 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'alfresco-social-demo',
+    template: `
+                <label for="nodeId"><b>Insert Node Id</b></label><br>
+                <input id="nodeId" type="text" size="48"  [(ngModel)]="nodeId"><br>
+                    <div class="mdl-grid">
+                      <div class="mdl-cell mdl-cell--4-col">
+                        Like component
+                        <adf-like [nodeId]="nodeId"></adf-like></div>
+                      <div class="mdl-cell mdl-cell--4-col">
+                        Rating component
+                        <adf-rating [nodeId]="nodeId"></adf-rating>
+                     </div>
+                    </div>
+    `
+})
+export class SocialComponent {
+
+    nodeId: string = '74cd8a96-8a21-47e5-9b3b-a1b3e296787d';
+}

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

@@ -0,0 +1,38 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'alfresco-tag-demo',
+    template: `
+                <label for="nodeId"><b>Insert Node Id</b></label><br>
+                <input id="nodeId" type="text" size="48"  [(ngModel)]="nodeId"><br>
+            <div class="mdl-grid">
+              <div class="mdl-cell mdl-cell--4-col"><alfresco-tag-node-actions-list [nodeId]="nodeId"></alfresco-tag-node-actions-list></div>
+              <div class="mdl-cell mdl-cell--4-col">List Tags Content Services <alfresco-tag-list></alfresco-tag-list></div>
+              <div class="mdl-cell mdl-cell--4-col">
+                    Tag list By Node ID
+                    <alfresco-tag-node-list [nodeId]="nodeId"></alfresco-tag-node-list>
+              </div>
+            </div>
+    `
+})
+export class TagComponent {
+
+    nodeId: string = '74cd8a96-8a21-47e5-9b3b-a1b3e296787d';
+}

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

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

demo-shell-ng2/app/dialogs/create-folder.dialog.ts

@@ -0,0 +1,44 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'adf-create-folder-dialog',
+    template: `
+        <h1 md-dialog-title>Create a new folder</h1>
+        <div md-dialog-content>
+            <md-input-container class="create-folder--name">
+                <input mdInput placeholder="Folder name" [(ngModel)]="value">
+            </md-input-container>
+        </div>
+        <div md-dialog-actions>
+            <button md-button md-dialog-close>Cancel</button>
+            <button md-button [md-dialog-close]="value">Create</button>
+        </div>
+    `,
+    styles: [
+        `
+        .create-folder--name {
+            width: 100%;
+        }
+        `
+    ]
+})
+export class CreateFolderDialogComponent {
+    value: string = '';
+}

demo-shell-ng2/app/dialogs/download-zip.dialog.ts

@@ -0,0 +1,145 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
+import { MD_DIALOG_DATA, MdDialogRef } from '@angular/material';
+
+import { DownloadEntry, MinimalNodeEntity } from 'alfresco-js-api';
+import { AlfrescoApiService } from 'ng2-alfresco-core';
+
+@Component({
+    selector: 'adf-download-zip-dialog',
+    template: `
+        <h1 md-dialog-title>Download as ZIP</h1>
+        <div md-dialog-content>
+            <md-progress-bar color="primary" mode="indeterminate"></md-progress-bar>
+        </div>
+        <div md-dialog-actions>
+            <span class="spacer"></span>
+            <button md-button color="primary" (click)="cancelDownload()">Cancel</button>
+        </div>
+    `,
+    styles: [`
+        .spacer { flex: 1 1 auto; }
+
+        .adf-download-zip-dialog .mat-dialog-actions .mat-button-wrapper {
+            text-transform: uppercase;
+        }
+    `],
+    host: { 'class': 'adf-download-zip-dialog' },
+    encapsulation: ViewEncapsulation.None
+})
+export class DownloadZipDialogComponent implements OnInit {
+
+    // flag for async threads
+    private cancelled = false;
+
+    constructor(private apiService: AlfrescoApiService,
+                private dialogRef: MdDialogRef<DownloadZipDialogComponent>,
+                @Inject(MD_DIALOG_DATA) private data: { nodeIds?: string[] }) {
+    }
+
+    private get downloadsApi() {
+        return this.apiService.getInstance().core.downloadsApi;
+    }
+
+    private get nodesApi() {
+        return this.apiService.getInstance().core.nodesApi;
+    }
+
+    private get contentApi() {
+        return this.apiService.getInstance().content;
+    }
+
+    ngOnInit() {
+        if (this.data && this.data.nodeIds && this.data.nodeIds.length > 0) {
+            // change timeout to have a delay for demo purposes
+            setTimeout(() => {
+                if (!this.cancelled) {
+                    this.downloadZip(this.data.nodeIds);
+                } else {
+                    console.log('Cancelled');
+                }
+            }, 0);
+        }
+    }
+
+    cancelDownload() {
+        this.cancelled = true;
+        this.dialogRef.close(false);
+    }
+
+    // Download as ZIP prototype
+    // js-api@alpha 1.8.0-c422a3b69b1b96f72abc61ab370eff53590f8ee4
+    downloadZip(nodeIds: string[]) {
+        if (nodeIds && nodeIds.length > 0) {
+
+            const promise: any = this.downloadsApi.createDownload({ nodeIds });
+
+            promise.on('progress', progress => console.log('Progress', progress));
+            promise.on('error', error => console.log('Error', error));
+            promise.on('abort', data => console.log('Abort', data));
+
+            promise.on('success', (data: DownloadEntry) => {
+                console.log('Success', data);
+                if (data && data.entry && data.entry.id) {
+                    const url = this.contentApi.getContentUrl(data.entry.id, true);
+                    // the call is needed only to get the name of the package
+                    this.nodesApi.getNode(data.entry.id).then((downloadNode: MinimalNodeEntity) => {
+                        console.log(downloadNode);
+                        const fileName = downloadNode.entry.name;
+                        // this.download(url, fileName);
+                        this.waitAndDownload(data.entry.id, url, fileName);
+                    });
+                }
+            });
+        }
+    }
+
+    waitAndDownload(downloadId: string, url: string, fileName: string) {
+        if (this.cancelled) {
+            return;
+        }
+
+        this.downloadsApi.getDownload(downloadId).then((d: DownloadEntry) => {
+            if (d.entry) {
+                if (d.entry.status === 'DONE') {
+                    this.download(url, fileName);
+                } else {
+                    setTimeout(() => {
+                        this.waitAndDownload(downloadId, url, fileName);
+                    }, 1000);
+                }
+            }
+        });
+    }
+
+    download(url: string, fileName: string) {
+        if (url && fileName) {
+            const link = document.createElement('a');
+
+            link.style.display = 'none';
+            link.download = fileName;
+            link.href = url;
+
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+        this.dialogRef.close(true);
+    }
+}

demo-shell-ng2/app/main.ts

@@ -0,0 +1,27 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
+
+if (process.env.ENV === 'production') {
+  enableProdMode();
+}
+
+const platform = platformBrowserDynamic();
+platform.bootstrapModule(AppModule);

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

@@ -0,0 +1,39 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { NgModule } from '@angular/core';
+import {
+    MdDialogModule,
+    MdInputModule,
+    MdProgressBarModule,
+    MdSelectModule,
+    MdSlideToggleModule
+} from '@angular/material';
+
+const MATERIAL_MODULES = [
+    MdSlideToggleModule,
+    MdInputModule,
+    MdSelectModule,
+    MdDialogModule,
+    MdProgressBarModule
+];
+
+@NgModule({
+    imports: MATERIAL_MODULES,
+    exports: MATERIAL_MODULES
+})
+export class MaterialModule {}

demo-shell-ng2/app/polyfills.ts

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

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

@@ -16,20 +16,20 @@
  */
 
 import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { AppConfigService, StorageService } from '@alfresco/adf-core';
+import { Http } from '@angular/http';
+import { AppConfigService, StorageService } from 'ng2-alfresco-core';
 
 @Injectable()
 export class DebugAppConfigService extends AppConfigService {
 
-    constructor(private storage: StorageService, http: HttpClient) {
+    constructor(private storage: StorageService, http: Http) {
         super(http);
     }
 
     /** @override */
     get<T>(key: string): T {
         if (key === 'ecmHost' || key === 'bpmHost') {
-            return <T> (<any> this.storage.getItem(key) || super.get<T>(key));
+            return <T>(<any>this.storage.getItem(key) || super.get<T>(key));
         }
         return super.get<T>(key);
     }

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

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

demo-shell-ng2/app/vendor.ts

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

demo-shell-ng2/assets/license_header.txt

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

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

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

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

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