Rollback undescore change (#2237)

* Add undescore

* Move the scss logic from webpack common to dev/prod
Rollback the change about the color.scss name

.gitignore

@@ -16,3 +16,4 @@ src/environments/
 /demo-shell-ng2/ng2-components/
 .happypack/
 .happypack/
+.history

.vscode/settings.json

@@ -9,5 +9,15 @@
         "**/.happypack": true
     },
     "editor.renderIndentGuides": true,
-    "tslint.configFile": "ng2-components/tslint.json"
+    "tslint.configFile": "ng2-components/tslint.json",
+    "markdownlint.config": {
+        "MD032": false,
+        "MD004": false,
+        "MD024": false,
+        "MD009": false,
+        "MD013": false,
+        "MD036": false,
+        "MD033" : false,
+        "MD031" : false
+    }
 }

ALFRESCOCORS.md

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

BROWSER-SUPPORT.md

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

CONTRIBUTING.md

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

INTRODUCTION.md

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

README.md

@@ -85,6 +85,6 @@ All components are supported in the following browsers:
 |Edge       	   |13, 14     	    |
 |Internet Explorer |11     	        |
 
-* Due to a [known Firefox issue] (https://bugzilla.mozilla.org/show_bug.cgi?id=1188880),the Alfresco Upload Component does not currently support folder upload functionality on Firefox    
+* Due to a [Firefox known issue](https://bugzilla.mozilla.org/show_bug.cgi?id=1188880), the Alfresco Upload Component does not currently support folder upload functionality on Firefox.    
 
-Please refer to [Browser Support](BROWSER-SUPPORT.md) article for more details. 
+Please refer to the [Browser Support](BROWSER-SUPPORT.md) article for more details. 

adf-rules/adfClassNameRule.js

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

adf-rules/adfClassNameRule.ts

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

adf-rules/adfFileNameRule.js

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

adf-rules/adfFileNameRule.ts

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

adf-rules/index.js

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

adf-rules/index.ts

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

adf-rules/package.json

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

adf-rules/tsconfig.json

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

adf-rules/tslint.json

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

demo-shell-ng2/README.md

@@ -1,11 +1,11 @@
 
 # ADF Demo Application
 
-Please note that this application is not an official product, but a testing and demo application to showcase complex interactions for ADF components.
+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 is running [Node](https://nodejs.org/en/) version 5.x.x or higher.
+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
@@ -15,7 +15,7 @@ npm install
 
 ## Proxy settings and CORS
 
-To simplify development and reduce the time to get started the application features the following Proxy settings:
+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**
@@ -82,18 +82,18 @@ npm run start:dist
 ```
 
 This command builds project in `production` mode.
-All output is placed to `dist` folder and can be served your preferred web server.
+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 accessing your application
-via network. However you can use any web server of your choice in production.
+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 change from the development branch, use the following command from the /script folder:
+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

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

@@ -1,7 +1,29 @@
 {
-    "ecmHost": "http://localhost:3000/ecm",
-    "bpmHost": "http://localhost:3000/bpm",
+    "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

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

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

@@ -1,35 +0,0 @@
-@media screen and (max-width: 1024px) {
-    .mdl-layout__header {
-        display: block;
-    }
-}
-
-@media screen and (max-width: 1024px) {
-    .mdl-layout__header {
-        display: block;
-    }
-}
-
-.mdl-layout-title {
-    font-size: 17px;
-}
-
-.user-profile {
-    margin-right: 10px;
-}
-
-.mdl-button-padding {
-    padding-left: 20px;
-}
-
-.hide {
-    display: none !important;
-}
-
-.mdl-navigation__link {
-    cursor: pointer;
-}
-
-.mdl-navigation__link label {
-    cursor: pointer;
-}

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

@@ -1,73 +1,95 @@
-<!-- Always shows a header, even in smaller screens. -->
-<div mdl class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
-    <header class="mdl-layout__header main_header_adf" [ngClass]="{hide: isAPageWithHeaderBar()}">
-        <div class="mdl-button-padding mdl-layout__header-row">
+<md-toolbar color="primary" *ngIf="!isAPageWithHeaderBar()">
+    <ng2-alfresco-userinfo
+        class="user-profile"
+        [menuOpenType]="left">
+    </ng2-alfresco-userinfo>
 
-            <!-- User Info -->
-            <ng2-alfresco-userinfo class="user-profile" [menuOpenType]="left">
-            </ng2-alfresco-userinfo>
+    <span>ADF Demo Application</span>
 
-            <!-- Title -->
-            <span class="mdl-layout-title">Demo Application</span>
-            <!-- Add spacer, to align navigation to the right -->
-            <div class="mdl-layout-spacer"></div>
+    <div class="app-menu--spacer"></div>
 
-            <!-- Search bar -->
-            <search-bar (expand)="onToggleSearch($event)"></search-bar>
+    <search-bar (expand)="onToggleSearch($event)"></search-bar>
 
-            <!-- Navigation. We hide it in small screens. -->
-            <nav class="mdl-navigation mdl-layout--large-screen-only">
-                <a class="mdl-navigation__link" data-automation-id="home" href="" routerLink="/">Home</a>
-                <a class="mdl-navigation__link" data-automation-id="files" href="" routerLink="/files">DocumentList</a>
-                <a class="mdl-navigation__link" data-automation-id="activiti" href="" routerLink="/activiti">Process Services</a>
-                <a class="mdl-navigation__link" data-automation-id="form" href="" routerLink="/form">Form</a>
-                <a class="mdl-navigation__link" data-automation-id="login" href="" routerLink="/login">Login</a>
-                <a class="mdl-navigation__link" data-automation-id="settings" href="" routerLink="/settings">Settings</a>
-            </nav>
+    <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>
 
-        </div>
-    </header>
+    <theme-picker></theme-picker>
+    <button md-icon-button [mdMenuTriggerFor]="langMenu">
+        <md-icon>language</md-icon>
+    </button>
+    <md-menu #langMenu="mdMenu">
+        <button md-menu-item (click)="changeLanguage('en')">English</button>
+        <button md-menu-item (click)="changeLanguage('it')">Italian</button>
+        <button md-menu-item (click)="changeLanguage('ru')">Russian</button>
+    </md-menu>
 
-    <div class="mdl-layout__drawer">
-        <nav class="mdl-navigation">
-            <a class="mdl-navigation__link" (click)="onLogout($event)">
-                <label tabindex="0">Logout</label>
-            </a>
-        </nav>
-        <span class="mdl-layout-title">Languages</span>
-        <nav class="mdl-navigation">
-            <a class="mdl-navigation__link" (click)="changeLanguage('en')">
-                <span class="adf-flag-icon adf-flag-icon-gb"></span>
-                <label tabindex="0"> English</label>
-            </a>
-            <a class="mdl-navigation__link" (click)="changeLanguage('it')">
-                <span class="adf-flag-icon adf-flag-icon-it"></span>
-                <label tabindex="0"> Italian</label>
-            </a>
-            <a class="mdl-navigation__link" (click)="changeLanguage('ru')">
-                <span class="adf-flag-icon adf-flag-icon-ru"></span>
-                <label tabindex="0"> Russian</label>
-            </a>
-        </nav>
-        <span class="mdl-layout-title">Components</span>
-        <nav class="mdl-navigation">
-            <a class="mdl-navigation__link" href="" routerLink="/" (click)="hideDrawer()">Home</a>
-            <a class="mdl-navigation__link" href="" routerLink="/files" (click)="hideDrawer()">DocumentList</a>
-            <a class="mdl-navigation__link" href="" routerLink="/datatable" (click)="hideDrawer()">DataTable</a>
-            <a class="mdl-navigation__link" href="" routerLink="/uploader" (click)="hideDrawer()">Uploader</a>
-            <a class="mdl-navigation__link" href="" routerLink="/login" (click)="hideDrawer()">Login</a>
-            <a class="mdl-navigation__link" href="" routerLink="/activiti" (click)="hideDrawer()">Process Services</a>
-            <a class="mdl-navigation__link" href="" routerLink="/webscript" (click)="hideDrawer()">Webscript</a>
-            <a class="mdl-navigation__link" href="" routerLink="/tag" (click)="hideDrawer()">Tag</a>
-            <a class="mdl-navigation__link" href="" routerLink="/social" (click)="hideDrawer()">Social</a>
-            <a class="mdl-navigation__link" href="" routerLink="/about" (click)="hideDrawer()">About</a>
-            <a class="mdl-navigation__link" href="" routerLink="/settings" (click)="hideDrawer()">Settings</a>
-        </nav>
-    </div>
-    <main class="mdl-layout__content" (dragover)="onDragOverMainPage($event)"
-          (drop)="onDragOverMainPage($event)">
-        <div class="page-content">
-            <router-outlet></router-outlet>
-        </div>
-    </main>
-</div>
+    <button md-icon-button [mdMenuTriggerFor]="appMenu">
+        <md-icon>more_vert</md-icon>
+    </button>
+    <md-menu #appMenu="mdMenu">
+        <a md-menu-item href="" routerLink="/trashcan">
+            <md-icon>extension</md-icon>
+            <span>DL: Trashcan</span>
+        </a>
+        <a md-menu-item href="" routerLink="/shared-links">
+            <md-icon>extension</md-icon>
+            <span>DL: Shared Links</span>
+        </a>
+        <a md-menu-item href="" routerLink="/sites">
+            <md-icon>extension</md-icon>
+            <span>DL: Sites</span>
+        </a>
+        <a md-menu-item href="" routerLink="/favorites">
+            <md-icon>extension</md-icon>
+            <span>DL: Favorites</span>
+        </a>
+        <a md-menu-item href="" routerLink="/recent">
+            <md-icon>extension</md-icon>
+            <span>DL: Recent</span>
+        </a>
+        <a md-menu-item href="" routerLink="/datatable">
+            <md-icon>view_module</md-icon>
+            <span>DataTable</span>
+        </a>
+        <a md-menu-item href="" routerLink="/form">
+            <md-icon>poll</md-icon>
+            <span>Form</span>
+        </a>
+        <a md-menu-item href="" routerLink="/form-list">
+            <md-icon>library_books</md-icon>
+            <span>Form List</span>
+        </a>
+        <a md-menu-item href="" routerLink="/uploader">
+            <md-icon>file_upload</md-icon>
+            <span>Uploader</span>
+        </a>
+        <a md-menu-item href="" routerLink="/webscript">
+            <md-icon>extension</md-icon>
+            <span>Webscript</span>
+        </a>
+        <a md-menu-item href="" routerLink="/tag">
+            <md-icon>local_offer</md-icon>
+            <span>Tag</span>
+        </a>
+        <a md-menu-item href="" routerLink="/social">
+            <md-icon>thumb_up</md-icon>
+            <span>Social</span>
+        </a>
+        <a md-menu-item href="" routerLink="/settings">
+            <md-icon>settings</md-icon>
+            <span>Settings</span>
+        </a>
+        <a md-menu-item href="" routerLink="/about">
+            <md-icon>info_outline</md-icon>
+            <span>About</span>
+        </a>
+        <button md-menu-item (click)="onLogout($event)">
+            <md-icon>exit_to_app</md-icon>
+            <span>Logout</span>
+        </button>
+    </md-menu>
+</md-toolbar>
+
+<router-outlet></router-outlet>

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

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

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

@@ -15,22 +15,23 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { Router } from '@angular/router';
 import {
-    AlfrescoTranslationService,
     AlfrescoAuthenticationService,
     AlfrescoSettingsService,
-    StorageService,
-    LogService
+    AlfrescoTranslationService,
+    LogService,
+    StorageService
 } from 'ng2-alfresco-core';
 
 declare var document: any;
 
 @Component({
-    selector: 'alfresco-app',
+    selector: 'adf-app',
     templateUrl: './app.component.html',
-    styleUrls: ['./app.component.css']
+    styleUrls: ['./app.component.scss', './theme.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class AppComponent {
     searchTerm: string = '';
@@ -42,10 +43,6 @@ export class AppComponent {
                 private storage: StorageService,
                 private logService: LogService) {
         this.setProvider();
-
-        if (translateService) {
-            translateService.addTranslationFolder('app', 'resources');
-        }
     }
 
     isAPageWithHeaderBar(): boolean {
@@ -72,7 +69,6 @@ export class AppComponent {
 
     navigateToLogin() {
         this.router.navigate(['/login']);
-        this.hideDrawer();
     }
 
     onToggleSearch(event) {
@@ -87,12 +83,6 @@ export class AppComponent {
 
     changeLanguage(lang: string) {
         this.translateService.use(lang);
-        this.hideDrawer();
-    }
-
-    hideDrawer() {
-        // todo: workaround for drawer closing
-        document.querySelector('.mdl-layout').MaterialLayout.toggleDrawer();
     }
 
     private setProvider() {
@@ -100,9 +90,4 @@ export class AppComponent {
             this.settingsService.setProviders(this.storage.getItem(`providers`));
         }
     }
-
-    onDragOverMainPage(event: any): boolean {
-        event.preventDefault();
-        return false;
-    }
 }

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

@@ -18,50 +18,59 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
-import { CoreModule, AppConfigService } from 'ng2-alfresco-core';
-import { SearchModule } from 'ng2-alfresco-search';
-import { LoginModule } from 'ng2-alfresco-login';
-import { DataTableModule } from 'ng2-alfresco-datatable';
-import { DocumentListModule } from 'ng2-alfresco-documentlist';
-import { UploadModule } from 'ng2-alfresco-upload';
-import { TagModule } from 'ng2-alfresco-tag';
-import { SocialModule } from 'ng2-alfresco-social';
-import { WebScriptModule } from 'ng2-alfresco-webscript';
-import { ViewerModule } from 'ng2-alfresco-viewer';
-import { ActivitiFormModule } from 'ng2-activiti-form';
-import { ActivitiTaskListModule } from 'ng2-activiti-tasklist';
-import { ActivitiProcessListModule } from 'ng2-activiti-processlist';
-import { UserInfoComponentModule } from 'ng2-alfresco-userinfo';
 import { AnalyticsModule } from 'ng2-activiti-analytics';
 import { DiagramsModule } from 'ng2-activiti-diagrams';
+import { 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 { MaterialModule } from './material.module';
+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 { Editor3DModule } from 'ng2-3d-editor';
-import { ChartsModule } from 'ng2-charts';
-import { CreateFolderDialog } from './dialogs/create-folder.dialog';
+import { FormListDemoComponent } from './components/form/form-list-demo.component';
+import { ThemePickerModule } from './components/theme-picker/theme-picker';
+import { MaterialModule } from './material.module';
 import { DebugAppConfigService } from './services/debug-app-config.service';
 
+import { FavoritesComponent } from './components/files/favorites.component';
+import { RecentComponent } from './components/files/recent.component';
+import { SharedLinksComponent } from './components/files/shared-links.component';
+import { SitesComponent } from './components/files/sites.component';
+import { TrashcanComponent } from './components/files/trashcan.component';
+
 import {
-    HomeComponent,
-    DataTableDemoComponent,
-    SearchComponent,
-    SearchBarComponent,
-    LoginDemoComponent,
-    ActivitiDemoComponent,
-    ActivitiShowDiagramComponent,
-    ActivitiAppsView,
-    FormViewer,
-    WebscriptComponent,
-    TagComponent,
-    SocialComponent,
     AboutComponent,
+    ActivitiAppsViewComponent,
+    ActivitiDemoComponent,
+    ActivitiProcessAttachmentsComponent,
+    ActivitiShowDiagramComponent,
+    ActivitiTaskAttachmentsComponent,
+    DataTableDemoComponent,
     FilesComponent,
-    FormNodeViewer,
+    FormDemoComponent,
+    FormNodeViewerComponent,
+    FormViewerComponent,
+    HomeComponent,
+    LoginDemoComponent,
+    SearchBarComponent,
+    SearchComponent,
     SettingsComponent,
-    FormDemoComponent
+    SocialComponent,
+    TagComponent,
+    WebscriptComponent
 } from './components/index';
 
 let appConfigFile = 'app.config-dev.json';
@@ -94,7 +103,8 @@ if (process.env.ENV === 'production') {
         DiagramsModule.forRoot(),
         CustomEditorsModule,
         Editor3DModule.forRoot(),
-        ChartsModule
+        ChartsModule,
+        ThemePickerModule
     ],
     declarations: [
         AppComponent,
@@ -104,25 +114,37 @@ if (process.env.ENV === 'production') {
         SearchBarComponent,
         LoginDemoComponent,
         ActivitiDemoComponent,
+        ActivitiTaskAttachmentsComponent,
+        ActivitiProcessAttachmentsComponent,
         ActivitiShowDiagramComponent,
-        ActivitiAppsView,
-        FormViewer,
+        ActivitiAppsViewComponent,
+        FormViewerComponent,
         WebscriptComponent,
         TagComponent,
         SocialComponent,
         AboutComponent,
         FilesComponent,
-        FormNodeViewer,
-        CreateFolderDialog,
+        FormNodeViewerComponent,
         SettingsComponent,
-        FormDemoComponent
+        FormDemoComponent,
+        FormListDemoComponent,
+        TrashcanComponent,
+        SharedLinksComponent,
+        SitesComponent,
+        FavoritesComponent,
+        RecentComponent
     ],
     providers: [
-        { provide: AppConfigService, useClass: DebugAppConfigService }
+        { provide: AppConfigService, useClass: DebugAppConfigService },
+        {
+            provide: TRANSLATION_PROVIDER,
+            multi: true,
+            useValue: {
+                name: 'app',
+                source: 'resources'
+            }
+        }
     ],
-    bootstrap: [ AppComponent ],
-    entryComponents: [
-        CreateFolderDialog
-    ]
+    bootstrap: [ AppComponent ]
 })
 export class AppModule { }

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

@@ -15,30 +15,36 @@
  * limitations under the License.
  */
 
-import { ModuleWithProviders }  from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { AuthGuard, AuthGuardEcm, AuthGuardBpm } from 'ng2-alfresco-core';
+import { ModuleWithProviders } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AuthGuard, AuthGuardBpm, AuthGuardEcm } from 'ng2-alfresco-core';
 
 import {
-    HomeComponent,
-    FilesComponent,
-    DataTableDemoComponent,
-    SearchComponent,
-    LoginDemoComponent,
+    AboutComponent,
+    ActivitiAppsViewComponent,
     ActivitiDemoComponent,
     ActivitiShowDiagramComponent,
-    ActivitiAppsView,
-    WebscriptComponent,
-    TagComponent,
-    SocialComponent,
-    AboutComponent,
-    FormViewer,
-    FormNodeViewer,
+    DataTableDemoComponent,
+    FilesComponent,
+    FormDemoComponent,
+    FormNodeViewerComponent,
+    FormViewerComponent,
+    HomeComponent,
+    LoginDemoComponent,
+    SearchComponent,
     SettingsComponent,
-    FormDemoComponent
+    SocialComponent,
+    TagComponent,
+    WebscriptComponent
 } from './components/index';
 
 import { UploadButtonComponent } from 'ng2-alfresco-upload';
+import { FavoritesComponent } from './components/files/favorites.component';
+import { RecentComponent } from './components/files/recent.component';
+import { SharedLinksComponent } from './components/files/shared-links.component';
+import { SitesComponent } from './components/files/sites.component';
+import { TrashcanComponent } from './components/files/trashcan.component';
+import { FormListDemoComponent } from './components/form/form-list-demo.component';
 
 export const appRoutes: Routes = [
     { path: 'login', component: LoginDemoComponent },
@@ -62,6 +68,31 @@ export const appRoutes: Routes = [
         component: FilesComponent,
         canActivate: [AuthGuardEcm]
     },
+    {
+        path: 'trashcan',
+        component: TrashcanComponent,
+        canActivate: [AuthGuardEcm]
+    },
+    {
+        path: 'shared-links',
+        component: SharedLinksComponent,
+        canActivate: [AuthGuardEcm]
+    },
+    {
+        path: 'sites',
+        component: SitesComponent,
+        canActivate: [AuthGuardEcm]
+    },
+    {
+        path: 'favorites',
+        component: FavoritesComponent,
+        canActivate: [AuthGuardEcm]
+    },
+    {
+        path: 'recent',
+        component: RecentComponent,
+        canActivate: [AuthGuardEcm]
+    },
     {
         path: 'datatable',
         component: DataTableDemoComponent,
@@ -79,12 +110,12 @@ export const appRoutes: Routes = [
     },
     {
         path: 'activiti',
-        component: ActivitiAppsView,
+        component: ActivitiAppsViewComponent,
         canActivate: [AuthGuardBpm]
     },
     {
         path: 'activiti/apps',
-        component: ActivitiAppsView,
+        component: ActivitiAppsViewComponent,
         canActivate: [AuthGuardBpm]
     },
     {
@@ -93,7 +124,12 @@ export const appRoutes: Routes = [
         canActivate: [AuthGuardBpm]
     },
     {
-        path: 'activiti/diagram/:processDefinitionId',
+        path: 'activiti/apps/:appId/processes',
+        component: ActivitiDemoComponent,
+        canActivate: [AuthGuardBpm]
+    },
+    {
+        path: 'activiti/apps/:appId/diagram/:processDefinitionId',
         component: ActivitiShowDiagramComponent,
         canActivate: [AuthGuardBpm]
     },
@@ -106,13 +142,13 @@ export const appRoutes: Routes = [
     // TODO: check if needed
     {
         path: 'activiti/tasks/:id',
-        component: FormViewer,
+        component: FormViewerComponent,
         canActivate: [AuthGuardBpm]
     },
     // TODO: check if needed
     {
         path: 'activiti/tasksnode/:id',
-        component: FormNodeViewer,
+        component: FormNodeViewerComponent,
         canActivate: [AuthGuardBpm]
     },
     {
@@ -132,7 +168,8 @@ export const appRoutes: Routes = [
     },
     { path: 'about', component: AboutComponent },
     { path: 'settings', component: SettingsComponent },
-    { path: 'form', component: FormDemoComponent }
+    { path: 'form', component: FormDemoComponent },
+    { path: 'form-list', component: FormListDemoComponent }
 ];
 
 export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

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

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

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

@@ -1,13 +1,101 @@
 <div class="about-container">
-
     <h3>Server settings</h3>
-    <small>The values below are taken from the AppConfigService and loaded from the '{{ configFile }}' file.</small>
-    <div>
-        Alfresco Process Services URL: <strong>{{ bpmHost }}</strong>
-    </div>
+    <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>
 
-    <div>
-        Alfresco Content Services URL: <strong>{{ ecmHost }}</strong>
+    <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">
@@ -18,7 +106,6 @@
         </div>
     </div>
 
-
     <h3>Packages</h3>
     <small>Current project is using the following ADF libraries:</small>
     <alfresco-datatable [data]="data"></alfresco-datatable>

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

@@ -17,8 +17,8 @@
 
 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';
-import { LogService, AppConfigService } from 'ng2-alfresco-core';
 
 @Component({
     selector: 'about-page',
@@ -34,12 +34,30 @@ export class AboutComponent implements OnInit {
     ecmHost: string = '';
     bpmHost: string = '';
 
+    ecmVersion: EcmProductVersionModel = null;
+    bpmVersion: BpmProductVersionModel = null;
+
     constructor(private http: Http,
                 private appConfig: AppConfigService,
-                private logService: LogService) {
+                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-)');
 

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

@@ -12,10 +12,6 @@
     padding: 10px 10px 10px 10px;
 }
 
-.list-column {
-    width: 320px;
-}
-
 .mdl-layout__header {
     z-index: 1;
 }

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

@@ -1,225 +1,213 @@
-<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
-
-    <header class="mdl-layout__header">
-
-        <!-- TABS -->
-
-        <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
-            <a id="tasks-header" href="#tasks" class="mdl-layout__tab" [class.is-active]="activeTab === 'tasks'" (click)="activeTab = 'tasks'">TASKS</a>
-            <a id="processes-header" href="#processes" class="mdl-layout__tab" [class.is-active]="activeTab === 'processes'" (click)="activeTab = 'processes'">PROCESSES</a>
-            <a id="report-header" href="#report" class="mdl-layout__tab" [class.is-active]="activeTab === 'reports'" (click)="activeTab = 'reports'">REPORTS</a>
-        </div>
-    </header>
-
-    <main class="mdl-layout__content activiti">
-
-        <!--  TASKS COMPONENT -->
-
-        <section class="mdl-layout__tab-panel" [class.is-active]="activeTab === 'tasks'" id="tasks">
-            <div class="page-content">
-                <div class="mdl-grid">
-                    <div class="mdl-cell mdl-cell--2-col task-column mdl-shadow--2dp">
-                        <div class="list-buttons">
-                            <activiti-start-task
+<md-tab-group>
+    <md-tab id="tasks-header" href="#tasks" (click)="activeTab = 'tasks'" label="{{'PS-TAB.TASKS-TAB' | translate}}">
+        <div class="page-content">
+            <div class="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>{{'PS-TAB.START-TASK' | translate}}</span>
+                        </button>
+                    </div>
+                    <adf-accordion>
+                        <adf-accordion-group [heading]="'Tasks'" [isSelected]="true" [isOpen]="true"
+                                             [headingIcon]="'assignment'">
+                            <activiti-filters
+                                [filterParam]="{name:'MY tasks'}"
                                 [appId]="appId"
-                                (onSuccess)="onStartTaskSuccess($event)">
-                            </activiti-start-task>
-                        </div>
-                        <adf-accordion>
-                            <adf-accordion-group [heading]="'Tasks'" [isSelected]="true" [isOpen]="true" [headingIcon]="'assignment'">
-                                <activiti-filters
-                                    [filterParam]="{name:'MY tasks'}"
-                                    [appId]="appId"
-                                    [hasIcon]="false"
-                                    (filterClick)="onTaskFilterClick($event)"
-                                    (onSuccess)="onSuccessTaskFilterList($event)"
-                                    #activitifilter>
-                                </activiti-filters>
-                            </adf-accordion-group>
-                        </adf-accordion>
-                    </div>
-                    <div class="mdl-cell mdl-cell--3-col task-column mdl-shadow--2dp list-column">
-                        <activiti-tasklist
-                            [appId]="taskFilter?.appId"
-                            [processDefinitionKey]="taskFilter?.filter?.processDefinitionKey"
-                            [name]="taskFilter?.filter?.name"
-                            [assignment]="taskFilter?.filter?.assignment"
-                            [state]="taskFilter?.filter?.state"
-                            [sort]="taskFilter?.filter?.sort"
-                            [data]="dataTasks"
-                            [landingTaskId]="currentTaskId"
-                            (rowClick)="onTaskRowClick($event)"
-                            (onSuccess)="onSuccessTaskList($event)"
-                            (row-click)="onRowClick($event)"
-                            (row-dblclick)="onRowDblClick($event)"
-                            #activititasklist>
-                            <!-- Custom column definition demo -->
-                            <!--
-                            <data-columns>
-                                <data-column key="name" title="NAME" class="full-width name-column"></data-column>
-                                <data-column key="created" title="Created" class="hidden"></data-column>
-                            </data-columns>
-                            -->
-                        </activiti-tasklist>
-                    </div>
-                    <div class="mdl-cell mdl-cell--7-col task-column mdl-shadow--2dp">
-                        <activiti-task-details #activitidetails
-                            [debugMode]="true"
-                            [taskId]="currentTaskId"
-                            (formCompleted)="onFormCompleted($event)"
-                            (formContentClicked)="onFormContentClick($event)"
-                            (taskCreated)="onTaskCreated($event)"
-                            (taskDeleted)="onTaskDeleted($event)">
-                        </activiti-task-details>
+                                [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">
+                        {{'PS-TAB.AUDIT-LOG' | translate}}
+                        <button
+                            adf-task-audit
+                            [task-id]="currentTaskId"
+                            [download]="true"
+                            md-icon-button (clicked)="onAuditClick($event)" (error)="onAuditError($event)">
+                            <md-icon>assignment_ind</md-icon>
+                        </button>
                         <hr>
-                        <div id="attachment-task-list" *ngIf="currentTaskId">
-                            <h5>Attachments</h5>
-                            <div class="adf-no-form-container">
-                                <div class="action-header">
-                                    <button [attr.disabled]="isTaskCompleted()" class="mdl-button mdl-js-button" (click)="toggleCreateTakAttach()">
-                                        Attach Document
-                                        <i class="material-icons">add</i>
-                                    </button>
-                                </div>
-                                <adf-task-attachment-list #taskAttach
-                                                          *ngIf="currentTaskId"
-                                                          [taskId]="currentTaskId"
-                                                          (attachmentClick)="onAttachmentClick($event)">
-                                </adf-task-attachment-list>
-                                <div *ngIf="isCreateTaskAttachVisible()">
-                                    <adf-create-task-attachment *ngIf="currentTaskId"
-                                                                [taskId]="currentTaskId"
-                                                                (success)="onCreateTaskSuccess()">
-                                    </adf-create-task-attachment>
-                                </div>
-                            </div>
-                        </div>
                     </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>
-        </section>
-
-
-        <!--  PROCESS COMPONENT -->
-
-        <section class="mdl-layout__tab-panel" [class.is-active]="activeTab === 'processes'" id="processes">
-            <div class="page-content" *ngIf="activeTab === 'processes'">
-                <div class="page-content">
-                    <div class="mdl-grid">
-                        <div class="mdl-cell mdl-cell--2-col task-column  mdl-shadow--2dp">
-                            <div class="list-buttons">
-                                <button
-                                    md-raised-button
-                                    data-automation-id="btn-start-process"
-                                    (click)="navigateStartProcess()">
-                                    <md-icon>add</md-icon>
-                                    <span>START PROCESS</span>
-                                </button>
-                            </div>
-                            <adf-accordion>
-                                <adf-accordion-group [heading]="'Processes'" [isSelected]="true" [isOpen]="true" [headingIcon]="'assessment'">
-                                    <activiti-process-instance-filters
-                                        [filterParam]="{index: 0}"
-                                        [appId]="appId"
-                                        (filterClick)="onProcessFilterClick($event)"
-                                        (onSuccess)="onSuccessProcessFilterList($event)">
-                                    </activiti-process-instance-filters>
-                                </adf-accordion-group>
-                            </adf-accordion>
-                        </div>
-                        <div class="mdl-cell mdl-cell--3-col task-column list-column mdl-shadow--2dp" *ngIf="processFilter && !isStartProcessMode()">
-                            <activiti-process-instance-list
-                                *ngIf="processFilter?.hasFilter()" [appId]="processFilter.appId"
-                                [processDefinitionKey]="processFilter.filter.processDefinitionKey"
-                                [name]="processFilter.filter.name"
-                                [state]="processFilter.filter.state"
-                                [sort]="processFilter.filter.sort"
-                                [data]="dataProcesses"
-                                (rowClick)="onProcessRowClick($event)"
-                                (onSuccess)="onSuccessProcessList($event)">
-                                <!-- Custom column definition demo -->
-                                <!--
-                                <data-columns>
-                                    <data-column key="name" title="NAME" class="full-width name-column"></data-column>
-                                    <data-column key="created" title="Created" class="hidden"></data-column>
-                                </data-columns>
-                                -->
-                            </activiti-process-instance-list>
-                        </div>
-                        <div class="mdl-cell task-column mdl-shadow--2dp" *ngIf="!isStartProcessMode()"
-                            [class.mdl-cell--7-col]="processFilter && !isStartProcessMode()"
-                            [class.mdl-cell--10-col]="!processFilter || isStartProcessMode()">
-                            <activiti-process-instance-details
-                                [processInstanceId]="currentProcessInstanceId"
-                                (processCancelled)="processCancelled()"
-                                (showProcessDiagram)="onShowProcessDiagram($event)"
-                                (taskClick)="onProcessDetailsTaskClick($event)">
-                            </activiti-process-instance-details>
-                            <hr>
-                            <div id="attachment-process-list" *ngIf="currentProcessInstanceId">
-                            <h5>Attachments</h5>
-                                <div class="action-header">
-                                    <button id="show_process_attach" class="mdl-button mdl-js-button" (click)="toggleCreateProcessAttach()">
-                                        Attach Document
-                                        <i class="material-icons">add</i>
-                                    </button>
-                                </div>
-                                <adf-process-attachment-list *ngIf="currentProcessInstanceId"
-                                                          [processInstanceId]="currentProcessInstanceId"
-                                                          (attachmentClick)="onAttachmentClick($event)">
-                                </adf-process-attachment-list>
-                                <div *ngIf="isCreateProcessAttachVisible()">
-                                    <adf-create-process-attachment *ngIf="currentProcessInstanceId"
-                                                                [processInstanceId]="currentProcessInstanceId"
-                                                                (contentCreated)="onContentCreated()">
-                                    </adf-create-process-attachment>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="mdl-cell mdl-cell--10-col task-column mdl-shadow--2dp" *ngIf="isStartProcessMode()">
-                            <activiti-start-process [appId]="appId" (start)="onStartProcessInstance($event)"></activiti-start-process>
-                        </div>
+        </div>
+    </md-tab>
+    <md-tab id="processes-header" href="#processes" (click)="activeTab = 'processes'"
+            label="{{'PS-TAB.PROCESSES-TAB' | translate}}">
+        <div class="page-content">
+            <div class="mdl-grid">
+                <div class="mdl-cell mdl-cell--2-col task-column  mdl-shadow--2dp">
+                    <div class="list-buttons">
+                        <button
+                            md-raised-button
+                            data-automation-id="btn-start-process"
+                            (click)="navigateStartProcess()">
+                            <md-icon>add</md-icon>
+                            <span>START PROCESS</span>
+                        </button>
                     </div>
+                    <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>
-        </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>
+                <div class="mdl-cell mdl-cell--3-col task-column mdl-shadow--2dp"
+                     *ngIf="processFilter && !isStartProcessMode()">
+                    <activiti-process-instance-list
+                        *ngIf="processFilter?.hasFilter()" [appId]="processFilter.appId"
+                        [processDefinitionKey]="processFilter.filter.processDefinitionKey"
+                        [name]="processFilter.filter.name"
+                        [state]="processFilter.filter.state"
+                        [sort]="processFilter.filter.sort"
+                        [data]="dataProcesses"
+                        (rowClick)="onProcessRowClick($event)"
+                        (onSuccess)="onSuccessProcessList($event)">
+                        <!-- Custom column definition demo -->
+                        <!--
+                        <data-columns>
+                            <data-column key="name" title="NAME" class="full-width name-column"></data-column>
+                            <data-column key="created" title="Created" class="hidden"></data-column>
+                        </data-columns>
+                        -->
+                    </activiti-process-instance-list>
+                </div>
+                <div class="mdl-cell task-column mdl-shadow--2dp" *ngIf="!isStartProcessMode()"
+                     [class.mdl-cell--7-col]="processFilter && !isStartProcessMode()"
+                     [class.mdl-cell--10-col]="!processFilter || isStartProcessMode()">
+                    <activiti-process-instance-details
+                        [processInstanceId]="currentProcessInstanceId"
+                        (processCancelled)="processCancelled()"
+                        (showProcessDiagram)="onShowProcessDiagram($event)"
+                        (taskClick)="onProcessDetailsTaskClick($event)">
+                    </activiti-process-instance-details>
+                    <hr>
+                    <div *ngIf="currentProcessInstanceId">
+                        {{'PS-TAB.START-PROCESS' | translate}}
+                        <button adf-process-audit
+                                [process-id]="currentProcessInstanceId"
+                                [download]="true" md-icon-button
+                                [format]="'pdf'"
+                                (clicked)="onAuditClick($event)"
+                                (error)="onAuditError($event)">
+                            <md-icon>assignment_ind</md-icon>
+                        </button>
                         <hr>
-                        <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>
+                    <md-card>
+                        <md-card-content>
+                            <activiti-process-attachments
+                                [processId]="currentProcessInstanceId">
+                            </activiti-process-attachments>
+                        </md-card-content>
+                    </md-card>
+                </div>
+                <div class="mdl-cell mdl-cell--10-col task-column mdl-shadow--2dp"
+                     *ngIf="isStartProcessMode()">
+                    <adf-start-process
+                        [appId]="appId"
+                        (start)="onStartProcessInstance($event)"
+                        (cancel)="onCancelProcessInstance()">
+                    </adf-start-process>
                 </div>
             </div>
-        </section>
-
-    </main>
-</div>
+        </div>
+    </md-tab>
+    <md-tab id="report-header" href="#report" (click)="activeTab = 'reports'"
+            label="{{'PS-TAB.REPORTS-TAB' | translate}}">
+        <div class="mdl-grid">
+            <div class="mdl-cell mdl-cell--4-col task-column mdl-shadow--2dp">
+                <span><h5>Report List</h5></span>
+                <hr>
+                <analytics-report-list
+                    [appId]="appId"
+                    [selectFirst]="selectFirstReport"
+                    (reportClick)="onReportClick($event)"
+                    #analyticsreportlist>
+                </analytics-report-list>
+            </div>
+            <div class="mdl-cell mdl-cell--8-col task-column mdl-shadow--2dp">
+                <activiti-analytics
+                    *ngIf="report"
+                    [appId]="appId"
+                    [reportId]="report.id"
+                    [hideParameters]="false"
+                    (editReport)="onEditReport($event)"
+                    (reportSaved)="onReportSaved($event)"
+                    (reportDeleted)="onReportDeleted()">
+                </activiti-analytics>
+                <div *ngIf="!report">
+                    <span>{{'ANALYTICS_REPORT.NO_REPORT_MESSAGE' | translate}}</span>
+                </div>
+            </div>
+        </div>
+    </md-tab>
+</md-tab-group>
 
 <div *ngIf="fileShowed">
     <alfresco-viewer

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

@@ -15,74 +15,69 @@
  * limitations under the License.
  */
 
-import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core';
-import {
-    ActivitiApps,
-    ActivitiFilters,
-    ActivitiTaskList,
-    ActivitiTaskDetails,
-    FilterRepresentationModel,
-    TaskDetailsEvent,
-    TaskAttachmentListComponent
-} from 'ng2-activiti-tasklist';
-import {
-    ActivitiProcessFilters,
-    ActivitiProcessInstanceDetails,
-    ActivitiProcessInstanceListComponent,
-    ActivitiStartProcessInstance,
-    FilterProcessRepresentationModel,
-    ProcessInstance,
-    ActivitiProcessAttachmentListComponent
-} from 'ng2-activiti-processlist';
-import { AnalyticsReportListComponent } from 'ng2-activiti-analytics';
+// 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 { Subscription } from 'rxjs/Rx';
+import { AnalyticsReportListComponent } from 'ng2-activiti-analytics';
+import { FORM_FIELD_VALIDATORS, FormEvent, FormFieldEvent, FormRenderingService, FormService } from 'ng2-activiti-form';
 import {
-    ObjectDataTableAdapter,
-    ObjectDataRow,
-    DataSorting
-} from 'ng2-alfresco-datatable';
+    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 { FormService, FormRenderingService, FormEvent, FormFieldEvent } from 'ng2-activiti-form';
+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 {
+export class ActivitiDemoComponent implements AfterViewInit, OnDestroy, OnInit {
 
-    @ViewChild(ActivitiFilters)
-    activitifilter: ActivitiFilters;
+    @ViewChild(TaskFiltersComponent)
+    activitifilter: TaskFiltersComponent;
 
-    @ViewChild(ActivitiTaskList)
-    taskList: ActivitiTaskList;
+    @ViewChild(TaskListComponent)
+    taskList: TaskListComponent;
 
-    @ViewChild(TaskAttachmentListComponent)
-    taskAttachList: TaskAttachmentListComponent;
+    @ViewChild(ProcessFiltersComponent)
+    activitiprocessfilter: ProcessFiltersComponent;
 
-    @ViewChild(ActivitiProcessFilters)
-    activitiprocessfilter: ActivitiProcessFilters;
+    @ViewChild(ProcessInstanceListComponent)
+    processList: ProcessInstanceListComponent;
 
-    @ViewChild(ActivitiProcessInstanceListComponent)
-    processList: ActivitiProcessInstanceListComponent;
+    @ViewChild(ProcessInstanceDetailsComponent)
+    activitiprocessdetails: ProcessInstanceDetailsComponent;
 
-    @ViewChild(ActivitiProcessInstanceDetails)
-    activitiprocessdetails: ActivitiProcessInstanceDetails;
+    @ViewChild(TaskDetailsComponent)
+    activitidetails: TaskDetailsComponent;
 
-    @ViewChild(ActivitiTaskDetails)
-    activitidetails: ActivitiTaskDetails;
-
-    @ViewChild(ActivitiProcessAttachmentListComponent)
-    processAttachList: ActivitiProcessAttachmentListComponent;
-
-    @ViewChild(ActivitiStartProcessInstance)
-    activitiStartProcess: ActivitiStartProcessInstance;
+    @ViewChild(StartProcessInstanceComponent)
+    activitiStartProcess: StartProcessInstanceComponent;
 
     @ViewChild(AnalyticsReportListComponent)
     analyticsreportlist: AnalyticsReportListComponent;
@@ -112,18 +107,21 @@ export class ActivitiDemoComponent implements AfterViewInit {
     sub: Subscription;
     blobFile: any;
     flag: boolean = true;
-    createTaskAttach: boolean = false;
-    createProcessAttach: boolean = false;
 
     dataTasks: ObjectDataTableAdapter;
     dataProcesses: ObjectDataTableAdapter;
 
+    fieldValidators = [
+        ...FORM_FIELD_VALIDATORS,
+        new DemoFieldValidator()
+    ];
+
     constructor(private elementRef: ElementRef,
                 private route: ActivatedRoute,
                 private router: Router,
                 private apiService: AlfrescoApiService,
-                private formRenderingService: FormRenderingService,
-                private formService: FormService) {
+                formRenderingService: FormRenderingService,
+                formService: FormService) {
         this.dataTasks = new ObjectDataTableAdapter();
         this.dataTasks.setSorting(new DataSorting('created', 'desc'));
 
@@ -150,14 +148,19 @@ export class ActivitiDemoComponent implements AfterViewInit {
             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') {
@@ -169,7 +172,8 @@ export class ActivitiDemoComponent implements AfterViewInit {
             this.processFilter = null;
             this.currentProcessInstanceId = null;
         });
-        this.layoutType = ActivitiApps.LAYOUT_GRID;
+        this.layoutType = AppsListComponent.LAYOUT_GRID;
+
     }
 
     ngOnDestroy() {
@@ -200,6 +204,11 @@ export class ActivitiDemoComponent implements AfterViewInit {
         this.currentTaskId = event.id;
     }
 
+    onCancelStartTask() {
+        this.currentTaskId = null;
+        this.reloadTaskFilters();
+    }
+
     onSuccessTaskList(event: FilterRepresentationModel) {
         this.currentTaskId = this.taskList.getCurrentId();
     }
@@ -244,16 +253,31 @@ export class ActivitiDemoComponent implements AfterViewInit {
         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();
@@ -274,10 +298,12 @@ export class ActivitiDemoComponent implements AfterViewInit {
         this.contentName = content.name;
     }
 
-    onAttachmentClick(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 {
@@ -310,7 +336,7 @@ export class ActivitiDemoComponent implements AfterViewInit {
     }
 
     onShowProcessDiagram(event: any): void {
-        this.router.navigate(['/activiti/diagram/' + event.value]);
+        this.router.navigate(['/activiti/apps/' + this.appId + '/diagram/' + event.value]);
     }
 
     onProcessDetailsTaskClick(event: TaskDetailsEvent): void {
@@ -333,8 +359,16 @@ export class ActivitiDemoComponent implements AfterViewInit {
         this.processFilter = null;
     }
 
+    private resetTaskFilters(): void {
+        this.taskFilter = null;
+    }
+
     private reloadProcessFilters(): void {
-        this.activitiprocessfilter.selectFilter(null);
+        this.activitiprocessfilter.selectFilter(this.activitiprocessfilter.getCurrentFilter());
+    }
+
+    private reloadTaskFilters(): void {
+        this.activitifilter.selectFilter(this.activitifilter.getCurrentFilter());
     }
 
     onRowClick(event): void {
@@ -345,33 +379,12 @@ export class ActivitiDemoComponent implements AfterViewInit {
         console.log(event);
     }
 
-    onCreateTaskSuccess(): void {
-        this.taskAttachList.reload();
-        this.toggleCreateTakAttach();
-    }
-
-    onContentCreated() {
-        this.processAttachList.reload();
-        this.toggleCreateProcessAttach();
-    }
-
-    toggleCreateTakAttach(): void {
-        this.createTaskAttach = !this.createTaskAttach;
-    }
-
-    isCreateTaskAttachVisible(): boolean {
-        return this.createTaskAttach;
-    }
-
-    toggleCreateProcessAttach(): void {
-        this.createProcessAttach = !this.createProcessAttach;
-    }
-
-    isCreateProcessAttachVisible(): boolean {
-        return this.createProcessAttach;
-    }
-
     isTaskCompleted(): boolean {
         return this.activitidetails.isCompletedTask();
     }
+
+    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

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

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

@@ -16,9 +16,7 @@
  */
 
 import { Component } from '@angular/core';
-import { Subscription } from 'rxjs/Rx';
-import { ActivatedRoute } from '@angular/router';
-import {Location} from '@angular/common';
+import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
     selector: 'activiti-show-diagram',
@@ -27,23 +25,19 @@ import {Location} from '@angular/common';
 })
 export class ActivitiShowDiagramComponent {
 
-    sub: Subscription;
     processDefinitionId: string;
+    appId: string;
 
     constructor(private route: ActivatedRoute,
-                private location: Location) {
-        this.sub = this.route.params.subscribe(params => {
+                private router: Router) {
+        this.route.params.subscribe(params => {
             this.processDefinitionId = params['processDefinitionId'];
+            this.appId = params['appId'];
         });
-
-    }
-
-    ngOnDestroy() {
-        this.sub.unsubscribe();
     }
 
     onClickBack() {
-        this.location.back();
+        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

@@ -16,7 +16,7 @@
  */
 
 import { Component } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
+import { Router } from '@angular/router';
 import { AppDefinitionRepresentationModel } from 'ng2-activiti-tasklist';
 
 @Component({
@@ -25,9 +25,9 @@ import { AppDefinitionRepresentationModel } from 'ng2-activiti-tasklist';
         <activiti-apps (appClick)="onAppClicked($event)"></activiti-apps>
     `
 })
-export class ActivitiAppsView {
+export class ActivitiAppsViewComponent {
 
-    constructor(private router: Router, private route: ActivatedRoute) {
+    constructor(private router: Router) {
     }
 
      onAppClicked(app: AppDefinitionRepresentationModel) {

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

@@ -15,7 +15,9 @@
  * limitations under the License.
  */
 
-import { NgModule, Component } from '@angular/core';
+/* tslint:disable */
+
+import { Component, NgModule } from '@angular/core';
 import { WidgetComponent } from 'ng2-activiti-form';
 
 @Component({

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

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

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

@@ -15,18 +15,16 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, OnDestroy, AfterViewChecked } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Subscription } from 'rxjs/Rx';
 
-declare var componentHandler;
-
 @Component({
     selector: 'form-node-viewer',
     templateUrl: './form-node-viewer.component.html',
     styleUrls: ['./form-node-viewer.component.css']
 })
-export class FormNodeViewer implements OnInit, OnDestroy, AfterViewChecked {
+export class FormNodeViewerComponent implements OnInit, OnDestroy {
 
     nodeId: string;
 
@@ -45,11 +43,4 @@ export class FormNodeViewer implements OnInit, OnDestroy, AfterViewChecked {
         this.sub.unsubscribe();
     }
 
-    ngAfterViewChecked() {
-        // workaround for MDL issues with dynamic components
-        if (componentHandler) {
-            componentHandler.upgradeAllRegistered();
-        }
-    }
-
 }

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

@@ -15,18 +15,16 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, OnDestroy, AfterViewChecked } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Subscription } from 'rxjs/Rx';
 
-declare var componentHandler;
-
 @Component({
     selector: 'form-viewer',
     templateUrl: './form-viewer.component.html',
     styleUrls: ['./form-viewer.component.css']
 })
-export class FormViewer implements OnInit, OnDestroy, AfterViewChecked {
+export class FormViewerComponent implements OnInit, OnDestroy {
 
     taskId: string;
 
@@ -45,11 +43,4 @@ export class FormViewer implements OnInit, OnDestroy, AfterViewChecked {
         this.sub.unsubscribe();
     }
 
-    ngAfterViewChecked() {
-        // workaround for MDL issues with dynamic components
-        if (componentHandler) {
-            componentHandler.upgradeAllRegistered();
-        }
-    }
-
 }

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

@@ -37,4 +37,5 @@
     <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

@@ -16,7 +16,9 @@
  */
 
 import { Component, Input } from '@angular/core';
-import { ObjectDataTableAdapter, DataSorting, ObjectDataRow, ObjectDataColumn, DataCellEvent, DataRowActionEvent } from 'ng2-alfresco-datatable';
+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',
@@ -43,7 +45,7 @@ export class DataTableDemoComponent {
         email: 'denys.vuika@alfresco.com'
     };
 
-    constructor() {
+    constructor(private apiService: AlfrescoApiService) {
         this.reset();
     }
 
@@ -80,11 +82,11 @@ export class DataTableDemoComponent {
                 }
             ],
             [
-                {type: 'image', key: 'icon', title: '', srTitle: 'Thumbnail'},
-                {type: 'text', key: 'id', title: 'Id', sortable: true},
-                {type: 'text', key: 'createdOn', title: 'Created On', sortable: true},
-                {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
-                {type: 'text', key: 'createdBy.name', title: 'Created By', sortable: true}
+                { type: 'image', key: 'icon', title: '', srTitle: 'Thumbnail' },
+                { type: 'text', key: 'id', title: 'Id', sortable: true },
+                { type: 'text', key: 'createdOn', title: 'Created On', sortable: true },
+                { type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true },
+                { type: 'text', key: 'createdBy.name', title: 'Created By', sortable: true }
             ]
         );
 
@@ -172,4 +174,33 @@ export class DataTableDemoComponent {
     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/favorites.component.html

@@ -0,0 +1,4 @@
+<adf-document-list
+    currentFolderId="-favorites-"
+    locationFormat="/files">
+</adf-document-list>

demo-shell-ng2/app/components/files/favorites.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: 'adf-favorites-demo',
+    templateUrl: 'favorites.component.html'
+})
+export class FavoritesComponent {
+}

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

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

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

@@ -1,77 +1,123 @@
 <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
-        [rootFolderId]="documentList.currentFolderId"
+        [parentId]="documentList.currentFolderId"
         [versioning]="versioning"
-        [enabled]="documentList.hasCreatePermission()">
-        <adf-breadcrumb
-            [target]="documentList"
-            [folderNode]="documentList.folderNode">
-        </adf-breadcrumb>
+        [adf-node-permission]="'create'"
+        [adf-nodes]="getCurrentDocumentListNode()">
         <div *ngIf="errorMessage" class="error-message">
-            <button (click)="resetError()" class="mdl-button mdl-js-button mdl-button--icon">
-                <i class="material-icons">highlight_off</i>
+            <button (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 title="Toolbar">
-                <button md-icon-button (click)="onCreateFolderClicked($event)">
-                    <md-icon>create_new_folder</md-icon>
+        <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-icon-button>
-                    <md-icon>delete</md-icon>
+                <button md-menu-item disabled>
+                    <md-icon>voicemail</md-icon>
+                    <span>Check voicemail</span>
                 </button>
-                <button md-icon-button [mdMenuTriggerFor]="menu">
-                    <md-icon>more_vert</md-icon>
+                <button md-menu-item>
+                    <md-icon>notifications_off</md-icon>
+                    <span>Disable alerts</span>
                 </button>
-                <md-menu #menu="mdMenu">
-                    <button md-menu-item>
-                        <md-icon>dialpad</md-icon>
-                        <span>Redial</span>
-                    </button>
-                    <button md-menu-item disabled>
-                        <md-icon>voicemail</md-icon>
-                        <span>Check voicemail</span>
-                    </button>
-                    <button md-menu-item>
-                        <md-icon>notifications_off</md-icon>
-                        <span>Disable alerts</span>
-                    </button>
-                </md-menu>
-            </adf-toolbar>
-        </ng-container>
-        <alfresco-document-list
+            </md-menu>
+        </adf-toolbar>
+        <adf-document-list
                 #documentList
-                [creationMenuActions]="!useCustomToolbar"
+                [permissionsStyle]="permissionsStyle"
                 [currentFolderId]="currentFolderId"
                 [contextMenuActions]="true"
                 [contentActions]="true"
                 [allowDropFiles]="true"
+                [selectionMode]="selectionMode"
+                [multiselect]="multiselect"
                 (error)="onNavigationError($event)"
                 (success)="resetError()"
                 (preview)="showFile($event)"
+                (folderChange)="onFolderChange($event)"
                 (permissionError)="handlePermissionError($event)">
             <data-columns>
-                <data-column key="$thumbnail" type="image" [sortable]="false"></data-column>
                 <data-column
-                        title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
-                        key="name"
-                        class="full-width ellipsis-cell">
-
-                    <!-- Example #1: using custom template with implicit access to data context -->
-                    <!--
-                    <ng-template let-entry="$implicit">
-                        <span>Hi! {{entry.data.getValue(entry.row, entry.col)}}</span>
-                    </ng-template>
-                    -->
-
-                    <!-- Example #2: using custom template with value access -->
-                    <!--
-                    <ng-template let-value="value">
-                        <span>Hi! {{value}}</span>
-                    </ng-template>
-                    -->
-
+                    key="$thumbnail"
+                    type="image"
+                    [sortable]="false"
+                    class="image-table-cell">
+                </data-column>
+                <data-column
+                    key="name"
+                    title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
+                    [formatTooltip]="getNodeNameTooltip"
+                    class="full-width ellipsis-cell">
+                </data-column>
+                <!-- Location column demo -->
+                <!--
+                <data-column
+                    key="path"
+                    type="location"
+                    format="/files"
+                    title="Location">
+                </data-column>
+                -->
+                <data-column
+                    key="content.sizeInBytes"
+                    title="Size"
+                    type="fileSize">
                 </data-column>
                 <!-- Notes: has performance overhead due to multiple files/folders causing separate HTTP calls to get tags -->
                 <!--
@@ -79,79 +125,139 @@
                     title="{{'DOCUMENT_LIST.COLUMNS.TAG' | translate}}"
                     key="id"
                     class="full-width ellipsis-cell">
-                    <template let-entry="$implicit">
+                    <ng-template let-entry="$implicit">
                         <alfresco-tag-node-list  [nodeId]="entry.data.getValue(entry.row, entry.col)"></alfresco-tag-node-list>
-                    </template>
+                    </ng-template>
                 </data-column>
                 -->
                 <data-column
-                        title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
-                        key="createdByUser.displayName"
-                        class="desktop-only">
+                    title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
+                    key="createdByUser.displayName"
+                    class="desktop-only">
                 </data-column>
                 <data-column
-                        title="{{'DOCUMENT_LIST.COLUMNS.CREATED_ON' | translate}}"
-                        key="createdAt"
-                        type="date"
-                        format="medium"
-                        class="desktop-only">
+                    title="{{'DOCUMENT_LIST.COLUMNS.CREATED' | translate}}"
+                    key="createdAt"
+                    type="date"
+                    format="timeAgo"
+                    class="desktop-only">
                 </data-column>
             </data-columns>
 
             <content-actions>
                 <!-- folder actions -->
                 <content-action
-                        target="folder"
-                        permission="delete"
-                        [disableWithNoPermission]="true"
-                        title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.DELETE' | translate}}"
-                        (permissionEvent)="handlePermissionError($event)"
-                        handler="delete">
+                    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
-                        target="document"
-                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DOWNLOAD' | translate}}"
-                        handler="download">
+                    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
-                        target="document"
-                        permission="delete"
-                        [disableWithNoPermission]="true"
-                        (permissionEvent)="handlePermissionError($event)"
-                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DELETE' | translate}}"
-                        handler="delete">
+                    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>
-        </alfresco-document-list>
+        </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>
-        <md-slide-toggle [(ngModel)]="useCustomToolbar">Use custom toolbar</md-slide-toggle>
+    <section *ngIf="!useViewerDialog">
+        <md-slide-toggle [color]="'primary'" [(ngModel)]="useInlineViewer">Use inline viewer (no overlay)</md-slide-toggle>
     </section>
 
     <section>
-        <md-slide-toggle [(ngModel)]="multipleFileUpload">Multiple File Upload</md-slide-toggle>
+        <md-slide-toggle [color]="'primary'" [(ngModel)]="useViewerDialog">Use File Viewer dialog</md-slide-toggle>
     </section>
 
     <section>
-        <md-slide-toggle [(ngModel)]="folderUpload">Folder upload</md-slide-toggle>
+        <md-slide-toggle [color]="'primary'" [(ngModel)]="multiselect">Multiselect (with checkboxes)</md-slide-toggle>
     </section>
 
     <section>
-        <md-slide-toggle [(ngModel)]="acceptedFilesTypeShow">Custom extensions filter</md-slide-toggle>
+        <md-slide-toggle [color]="'primary'" [(ngModel)]="useDropdownBreadcrumb">Dropdown breadcrumb</md-slide-toggle>
     </section>
 
     <section>
-        <md-slide-toggle [(ngModel)]="versioning">Enable versioning</md-slide-toggle>
+        <md-slide-toggle [color]="'primary'" [(ngModel)]="multipleFileUpload">Multiple File Upload</md-slide-toggle>
     </section>
 
     <section>
-        <md-slide-toggle [(ngModel)]="disableWithNoPermission">Disable upload button when user has no permissions</md-slide-toggle>
+        <md-slide-toggle [color]="'primary'" [(ngModel)]="folderUpload">Folder upload</md-slide-toggle>
+    </section>
+
+    <section>
+        <md-slide-toggle [color]="'primary'" [(ngModel)]="acceptedFilesTypeShow">Custom extensions filter</md-slide-toggle>
+    </section>
+
+    <section>
+        <md-slide-toggle [color]="'primary'" [(ngModel)]="versioning">Enable versioning</md-slide-toggle>
+    </section>
+
+    <section>
+        <md-slide-toggle [color]="'primary'" [(ngModel)]="disableWithNoPermission">Disable upload button when user has no permissions</md-slide-toggle>
     </section>
 
     <h5>Upload</h5>
@@ -163,19 +269,22 @@
     <div *ngIf="!acceptedFilesTypeShow">
         <alfresco-upload-button
             #uploadButton
+            tooltip="Custom tooltip"
             [disabled]="!enableUpload"
             data-automation-id="multiple-file-upload"
             [rootFolderId]="documentList.currentFolderId"
             [multipleFiles]="multipleFileUpload"
             [uploadFolders]="folderUpload"
             [versioning]="versioning"
-            [disableWithNoPermission]="disableWithNoPermission"
+            [adf-node-permission]="'create'"
+            [adf-nodes]="getCurrentDocumentListNode()"
             (permissionEvent)="handlePermissionError($event)">
         </alfresco-upload-button>
     </div>
     <div *ngIf="acceptedFilesTypeShow">
         <alfresco-upload-button
             #uploadButton
+            tooltip="Custom tooltip"
             [disabled]="!enableUpload"
             data-automation-id="multiple-file-upload"
             [rootFolderId]="documentList.currentFolderId"
@@ -183,7 +292,8 @@
             [multipleFiles]="multipleFileUpload"
             [uploadFolders]="folderUpload"
             [versioning]="versioning"
-            [disableWithNoPermission]="disableWithNoPermission"
+            [adf-node-permission]="'create'"
+            [adf-nodes]="getCurrentDocumentListNode()"
             (permissionEvent)="handlePermissionError($event)">
         </alfresco-upload-button>
     </div>
@@ -192,29 +302,39 @@
     </section>
 </div>
 
-<file-uploading-dialog #fileDialog></file-uploading-dialog>
-
-<div *ngIf="fileShowed">
-    <alfresco-viewer [(showViewer)]="fileShowed"
-                     [fileNodeId]="fileNodeId"
-                     [overlayMode]="true">
-
-        <extension-viewer [supportedExtensions]="['obj','3DS']" #extension>
-            <ng-template let-urlFileContent="urlFileContent" let-extension="extension" >
-                <threed-viewer [urlFile]="urlFileContent" [extension]="extension" ></threed-viewer>
-            </ng-template>
-        </extension-viewer>
-
-    </alfresco-viewer>
-
-    <!-- Comment the viewer above and uncomment that one below if you want test the overlay false viewer-->
-
-    <!--<div *ngIf="fileShowed" class="adf-not-overlay-viewer">-->
-        <!--<alfresco-viewer [(showViewer)]="fileShowed"-->
-                         <!--[fileNodeId]="fileNodeId"-->
-                         <!--[overlayMode]="false">-->
-        <!--</alfresco-viewer>-->
-    <!--</div>-->
-
+<div class="p-10">
+    <p>For 'Multiple' selection mode use Cmd (macOS) or Ctrl (Win) to toggle selection of multiple items.</p>
+    <md-select placeholder="Selection Mode" [(ngModel)]="selectionMode" name="food">
+        <md-option *ngFor="let mode of selectionModes" [value]="mode.value">
+            {{mode.viewValue}}
+        </md-option>
+    </md-select>
 </div>
 
+<file-uploading-dialog #fileDialog></file-uploading-dialog>
+
+<div *ngIf="showViewer">
+    <ng-container *ngIf="!useInlineViewer">
+        <alfresco-viewer
+            [(showViewer)]="showViewer"
+            [fileNodeId]="fileNodeId"
+            [overlayMode]="true">
+
+            <extension-viewer [supportedExtensions]="['obj','3DS']" #extension>
+                <ng-template let-urlFileContent="urlFileContent" let-extension="extension" >
+                    <threed-viewer [urlFile]="urlFileContent" [extension]="extension" ></threed-viewer>
+                </ng-template>
+            </extension-viewer>
+
+        </alfresco-viewer>
+    </ng-container>
+
+    <ng-container *ngIf="useInlineViewer">
+        <div class="adf-not-overlay-viewer">
+            <alfresco-viewer
+                [(showViewer)]="showViewer"
+                [fileNodeId]="fileNodeId">
+            </alfresco-viewer>
+        </div>
+    </ng-container>
+</div>

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

@@ -15,17 +15,22 @@
  * limitations under the License.
  */
 
-import { Component, Input, OnInit, Optional, ViewChild, ChangeDetectorRef } from '@angular/core';
-import { ActivatedRoute, Params } from '@angular/router';
+import { ChangeDetectorRef, Component, Input, OnInit, Optional, ViewChild } from '@angular/core';
 import { MdDialog } from '@angular/material';
-import { AlfrescoContentService, FolderCreatedEvent, NotificationService } from 'ng2-alfresco-core';
-import { DocumentListComponent } from 'ng2-alfresco-documentlist';
-import { UploadService, FileUploadCompleteEvent } from 'ng2-alfresco-upload';
+import { ActivatedRoute, Params, Router } from '@angular/router';
+import { MinimalNodeEntity } from 'alfresco-js-api';
+import {
+    AlfrescoApiService, AlfrescoContentService, AlfrescoTranslationService, CreateFolderDialogComponent,
+    DownloadZipDialogComponent, FileUploadCompleteEvent, FolderCreatedEvent, NotificationService,
+    SiteModel, UploadService
+} from 'ng2-alfresco-core';
+import { DataColumn, DataRow } from 'ng2-alfresco-datatable';
+import { DocumentListComponent, PermissionStyleModel } from 'ng2-alfresco-documentlist';
 
-import { CreateFolderDialog } from '../../dialogs/create-folder.dialog';
+import { ViewerService } from 'ng2-alfresco-viewer';
 
 @Component({
-    selector: 'files-component',
+    selector: 'adf-files-component',
     templateUrl: './files.component.html',
     styleUrls: ['./files.component.css']
 })
@@ -35,9 +40,24 @@ export class FilesComponent implements OnInit {
 
     errorMessage: string = null;
     fileNodeId: any;
-    fileShowed: boolean = false;
+    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;
@@ -63,23 +83,43 @@ export class FilesComponent implements OnInit {
     @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 (event.value.entry.isFile) {
-            this.fileNodeId = event.value.entry.id;
-            this.fileShowed = true;
+        if (this.useViewerDialog) {
+            if (event.value.entry.isFile) {
+                this.viewerService
+                    .showViewerForNode(event.value.entry)
+                    .then(result => {
+                        console.log(result);
+                    });
+            }
         } else {
-            this.fileShowed = false;
+            if (event.value.entry.isFile) {
+                this.fileNodeId = event.value.entry.id;
+                this.showViewer = true;
+            } else {
+                this.showViewer = false;
+            }
         }
     }
 
+    onFolderChange($event) {
+        this.router.navigate(['/files', $event.value.id]);
+    }
+
     toggleFolder() {
         this.multipleFileUpload = false;
         this.folderUpload = !this.folderUpload;
@@ -98,6 +138,17 @@ export class FilesComponent implements OnInit {
 
         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));
+    }
+
+    getCurrentDocumentListNode(): MinimalNodeEntity[] {
+        if (this.documentList.folderNode) {
+            return [ { entry: this.documentList.folderNode } ];
+        } else {
+            return [];
+        }
     }
 
     onNavigationError(err: any) {
@@ -131,8 +182,31 @@ export class FilesComponent implements OnInit {
         );
     }
 
+    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(CreateFolderDialog);
+        let dialogRef = this.dialog.open(CreateFolderDialogComponent);
         dialogRef.afterClosed().subscribe(folderName => {
             if (folderName) {
                 this.contentService.createFolder('', folderName, this.documentList.currentFolderId).subscribe(
@@ -142,4 +216,86 @@ export class FilesComponent implements OnInit {
             }
         });
     }
+
+    getSiteContent(site: SiteModel) {
+        this.currentFolderId = site && site.guid ? site.guid : '-my-';
+    }
+
+    hasSelection(selection: Array<MinimalNodeEntity>): boolean {
+        return selection && selection.length > 0;
+    }
+
+    downloadNodes(selection: Array<MinimalNodeEntity>) {
+        if (!selection || selection.length === 0) {
+            return;
+        }
+
+        if (selection.length === 1) {
+            this.downloadNode(selection[0]);
+        } else {
+            this.downloadZip(selection);
+        }
+    }
+
+    downloadNode(node: MinimalNodeEntity) {
+        if (node && node.entry) {
+            const entry = node.entry;
+
+            if (entry.isFile) {
+                this.downloadFile(node);
+            }
+
+            if (entry.isFolder) {
+                this.downloadZip([node]);
+            }
+        }
+    }
+
+    downloadFile(node: MinimalNodeEntity) {
+        if (node && node.entry) {
+            const contentApi = this.apiService.getInstance().content;
+
+            const url = contentApi.getContentUrl(node.entry.id, true);
+            const fileName = node.entry.name;
+
+            this.download(url, fileName);
+        }
+    }
+
+    downloadZip(selection: Array<MinimalNodeEntity>) {
+        if (selection && selection.length > 0) {
+            const nodeIds = selection.map(node => node.entry.id);
+
+            const dialogRef = this.dialog.open(DownloadZipDialogComponent, {
+                width: '600px',
+                data: {
+                    nodeIds: nodeIds
+                }
+            });
+            dialogRef.afterClosed().subscribe(result => {
+                console.log(result);
+            });
+        }
+    }
+
+    download(url: string, fileName: string) {
+        if (url && fileName) {
+            const link = document.createElement('a');
+
+            link.style.display = 'none';
+            link.download = fileName;
+            link.href = url;
+
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+    }
+
+    getNodeNameTooltip(row: DataRow, col: DataColumn): string {
+        if (row) {
+            return row.getValue('name');
+        }
+        return null;
+    }
 }

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

@@ -0,0 +1,4 @@
+<adf-document-list
+    currentFolderId="-recent-"
+    locationFormat="/files">
+</adf-document-list>

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

@@ -15,7 +15,11 @@
  * limitations under the License.
  */
 
-export * from './context-menu/index';
-export * from './material/index';
-export * from './collapsable/index';
-export * from './view/index';
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'adf-recent-demo',
+    templateUrl: 'recent.component.html'
+})
+export class RecentComponent {
+}

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

@@ -0,0 +1,4 @@
+<adf-document-list
+    currentFolderId="-sharedlinks-"
+    locationFormat="/files">
+</adf-document-list>

demo-shell-ng2/app/components/files/shared-links.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: 'adf-shared-links-demo',
+    templateUrl: 'shared-links.component.html'
+})
+export class SharedLinksComponent {
+}

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

@@ -0,0 +1,3 @@
+<adf-document-list
+    currentFolderId="-sites-">
+</adf-document-list>

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

@@ -15,5 +15,11 @@
  * limitations under the License.
  */
 
-export * from './datatable.component';
-export * from './datatable-cell.component';
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'adf-sites-demo',
+    templateUrl: 'sites.component.html'
+})
+export class SitesComponent {
+}

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

@@ -0,0 +1,4 @@
+<adf-document-list
+    currentFolderId="-trashcan-"
+    locationFormat="/files">
+</adf-document-list>

demo-shell-ng2/app/components/files/trashcan.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: 'adf-trashcan-demo',
+    templateUrl: 'trashcan.component.html'
+})
+export class TrashcanComponent {
+}

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

@@ -1,8 +1,3 @@
 .form-container {
     padding: 10px;
 }
-
-.store-form-container{
-    width: 80%;
-    height: 80%;
-}

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

@@ -1,32 +1,4 @@
-<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
-    <header class="mdl-layout__header">
-        <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
-            <a id="demo-form" href="#demo" class="mdl-layout__tab" [class.is-active]="activeTab === 'demo'" (click)="changeToDemoForm()">DEMO</a>
-            <a id="store-form" href="#store" class="mdl-layout__tab" [class.is-active]="activeTab === 'processes'" (click)="changeToStoreForm()">STORE</a>
-        </div>
-    </header>
-    <main class="mdl-layout__content activiti">
-        <section class="mdl-layout__tab-panel" [class.is-active]="activeTab === 'demo'" id="demo">
-            <div class="form-container">
-                <activiti-form [form]="form">
-                </activiti-form>
-            </div>
-        </section>
-        <section class="mdl-layout__tab-panel" [class.is-active]="activeTab === 'store'" id="store">
-            <span>FORM NAME TO VISUALIZE</span>
-            <input [(ngModel)]="formToLoadName" class="mdl-textfield__input" type="text" (ngModelChange)="loadForm()">
-            <div *ngIf="formToLoadName && formToLoadName !== '' " class="store-form-container">
-                <activiti-form [form]="form" [data]="restoredData" #storeForm>
-                </activiti-form>
-                <button class="mdl-button mdl-js-button" (click)="store()">STORE</button>
-                <button class="mdl-button mdl-js-button" (click)="restore()">RESTORE</button>
-            </div>
-            <div>
-                <span> Please create in APS the form with the name you entered</span>
-            </div>
-            <div *ngIf="showError">
-                <span> Form Name not valid or form not present</span>
-            </div>
-        </section>
-    </main>
+<div class="form-container">
+    <activiti-form [form]="form">
+    </activiti-form>
 </div>

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

@@ -15,33 +15,25 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
+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';
-import { ActivitiForm } from 'ng2-activiti-form';
-
-declare var componentHandler;
 
 @Component({
     selector: 'form-demo',
     templateUrl: 'form-demo.component.html',
-    styleUrls: [
-        'form-demo.component.css'
+    styleUrls: [ 'form-demo.component.css' ],
+    providers: [
+        { provide: FormService, useClass: InMemoryFormService }
     ]
 })
-export class FormDemoComponent implements OnInit, AfterViewInit {
-
-    @ViewChild(ActivitiForm)
-    activitiForm: ActivitiForm;
+export class FormDemoComponent implements OnInit {
 
     form: FormModel;
-    activeTab: string = 'demo';
-    storedData: any = {};
-    restoredData: any = {};
-    formToLoadName: string = null;
-    showError: boolean = false;
 
-    constructor(private formService: FormService) {
+    constructor(@Inject(FormService) private formService: InMemoryFormService) {
+        // Prevent default outcome actions
         formService.executeOutcome.subscribe(e => {
             e.preventDefault();
             console.log(e.outcome);
@@ -50,73 +42,7 @@ export class FormDemoComponent implements OnInit, AfterViewInit {
 
     ngOnInit() {
         let formDefinitionJSON: any = DemoForm.getDefinition();
-        let form = this.formService.parseForm(formDefinitionJSON);
-        console.log(form);
-        this.form = form;
+        this.form = this.formService.parseForm(formDefinitionJSON);
     }
 
-    ngAfterViewInit() {
-        // workaround for MDL issues with dynamic components
-        if (componentHandler) {
-            componentHandler.upgradeAllRegistered();
-        }
-    }
-
-    changeToStoreForm() {
-        this.activeTab = 'store';
-        this.showError = false;
-    }
-
-    changeToDemoForm() {
-        this.activeTab = 'demo';
-        let formDefinitionJSON: any = DemoForm.getDefinition();
-        let demoForm = this.formService.parseForm(formDefinitionJSON);
-        this.form = demoForm;
-    }
-
-    store() {
-        this.clone(this.activitiForm.form.values, this.storedData);
-        console.log('DATA SAVED');
-        console.log(this.storedData);
-        console.log('DATA SAVED');
-        this.restoredData = null;
-    }
-
-    restore() {
-        this.restoredData = this.storedData;
-        this.storedData = {};
-    }
-
-    clone(objToCopyFrom, objToCopyTo) {
-        for (let attribute in objToCopyFrom) {
-            if (objToCopyFrom.hasOwnProperty(attribute)) {
-                objToCopyTo[attribute] = objToCopyFrom[attribute];
-            }
-        }
-        return objToCopyTo;
-    }
-
-    loadForm() {
-        if (this.formToLoadName) {
-            this.showError = false;
-            this.formService
-                .getFormDefinitionByName(this.formToLoadName)
-                .debounceTime(7000)
-                .subscribe(
-                id => {
-                    this.formService.getFormDefinitionById(id).subscribe(
-                        form => {
-                            this.form = this.formService.parseForm(form);
-                        },
-                        (error) => {
-                            this.showError = true;
-                        }
-                    );
-                },
-                (error) => {
-                    this.showError = true;
-                }
-                );
-        }
-    }
 }

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

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

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

@@ -1,52 +1,29 @@
-.home-cards {
+.adf-home-card {
     float: left;
     margin: 10px 10px 10px 10px;
-}
-
-.mdl-card__supporting-text {
+    width: 290px;
     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 {
+.adf-home-card-title {
+    padding: 24px;
     cursor: pointer;
-    height: 70px;
+    height: 55px;
+    margin: -63px -24px 18px -25px !important;
 }
 
-.home--card__icon {
-    padding-top: 2px;
-    margin-right: 4px;
-}
-
-.home--card__text {
+.adf-home-card__text {
     font-size: 16px;
     line-height: 18px;
 }
 
-.home--feature-list {
+.adf-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

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

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

@@ -21,14 +21,16 @@ 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 { FormViewer } from './activiti/form-viewer.component';
+export { FormViewerComponent } from './activiti/form-viewer.component';
 export { WebscriptComponent } from './webscript/webscript.component';
 export { TagComponent } from './tag/tag.component';
 export { SocialComponent } from './social/social.component';
 export { AboutComponent } from './about/about.component';
 export { FilesComponent } from './files/files.component';
-export { FormNodeViewer } from './activiti/form-node-viewer.component';
-export { ActivitiAppsView } from './activiti/apps.view';
+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

@@ -3,6 +3,8 @@
     right: 10px;
     top: 10px;
     z-index: 1;
+    background-color: rgb(68,138,255);
+    color: rgb(255,255,255);
 }
 
 .settings {
@@ -16,8 +18,8 @@
 }
 
 .toggle {
-    width: 120px;
-    margin: 20px;
+    width: 190px;
+    margin: 5px;
     padding: 5px;
 }
 

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

@@ -2,60 +2,94 @@
 
 <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>
+        <md-slide-toggle
+            id="switch1"
+            [color]="'primary'"
+            (click)="toggleECM()"
+            [checked]="isECM">
+            Content Services
+        </md-slide-toggle>
     </p>
     <p class="toggle">
-        <label for="switch2" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-            <input type="checkbox" id="switch2" [checked]="isBPM" class="mdl-switch__input"
-                   (click)="toggleBPM()">
-            <span class="mdl-switch__label">Process Services</span>
-        </label>
+        <md-slide-toggle
+            id="switch2"
+            [color]="'primary'"
+            (click)="toggleBPM()"
+            [checked]="isBPM">
+            Process Services
+        </md-slide-toggle>
     </p>
     <p class="toggle">
-        <label for="switch3" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-            <input type="checkbox" id="switch3" class="mdl-switch__input" [checked]="!disableCsrf" (click)="toggleCSRF()">
-            <span class="mdl-switch__label">CSRF</span>
-        </label>
+        <md-slide-toggle
+            id="switch3"
+            [color]="'primary'"
+            (click)="toggleCSRF()"
+            [checked]="!disableCsrf">
+            CSRF
+        </md-slide-toggle>
+    </p>
+    <p class="toggle">
+        <md-slide-toggle
+            id="switch4"
+            [color]="'primary'"
+            (click)="toggleFooter()"
+            [checked]="showFooter">
+            Login footer
+        </md-slide-toggle>
     </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 md-fab class="setting-button" data-automation-id="settings" href="" routerLink="/settings" >
+    <md-icon>settings</md-icon>
 </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>
+            <md-slide-toggle
+                id="switch1-mobile"
+                [color]="'primary'"
+                (click)="toggleECM()"
+                [checked]="isECM">
+                Content Services
+            </md-slide-toggle>
         </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>
+            <md-slide-toggle
+                id="switch2-mobile"
+                [color]="'primary'"
+                (click)="toggleBPM()"
+                [checked]="isBPM">
+                Process Services
+            </md-slide-toggle>
         </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>
+            <md-slide-toggle
+                id="switch3-mobile"
+                [color]="'primary'"
+                (click)="toggleCSRF()"
+                [checked]="!disableCsrf">
+                CSRF
+            </md-slide-toggle>
+        </p>
+        <p>
+            <md-slide-toggle
+                id="switch4-mobile"
+                [color]="'primary'"
+                (click)="toggleFooter()"
+                [checked]="showFooter">
+                Login footer
+            </md-slide-toggle>
         </p>
     </div>
 </alfresco-login>

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

@@ -15,10 +15,10 @@
  * limitations under the License.
  */
 
-import { Component, ViewChild, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { Validators } from '@angular/forms';
-import { StorageService, LogService } from 'ng2-alfresco-core';
+import { Router } from '@angular/router';
+import { LogService, StorageService } from 'ng2-alfresco-core';
 
 @Component({
     selector: 'login-demo',
@@ -36,6 +36,7 @@ export class LoginDemoComponent implements OnInit {
     disableCsrf: boolean = false;
     isECM: boolean = true;
     isBPM: boolean = false;
+    showFooter: boolean = true;
     customMinLenght: number = 2;
 
     constructor(private router: Router,
@@ -94,6 +95,10 @@ export class LoginDemoComponent implements OnInit {
         this.disableCsrf = !this.disableCsrf;
     }
 
+    toggleFooter() {
+        this.showFooter = !this.showFooter;
+    }
+
     updateProvider() {
         if (this.isBPM && this.isECM) {
             this.providers = 'ALL';
@@ -112,5 +117,5 @@ export class LoginDemoComponent implements OnInit {
 
         this.providers = '';
         return this.providers;
-    };
+    }
 }

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

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

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

@@ -17,8 +17,8 @@
 
 import { Component, EventEmitter, Output } from '@angular/core';
 import { Router } from '@angular/router';
-import { AlfrescoAuthenticationService } from 'ng2-alfresco-core';
 import { MinimalNodeEntity } from 'alfresco-js-api';
+import { AlfrescoAuthenticationService } from 'ng2-alfresco-core';
 
 @Component({
     selector: 'search-bar',

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

@@ -1,12 +1,14 @@
 <div class="search-results-container">
     <h1>Search results</h1>
-    <alfresco-search (preview)="showFile($event)"></alfresco-search>
+    <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>
+        <md-spinner></md-spinner>
     </alfresco-viewer>
 </div>

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

@@ -52,9 +52,17 @@ export class SearchComponent {
     constructor(public router: Router) {
     }
 
-    showFile(event) {
-        if (event.value.entry.isFile) {
-            this.fileNodeId = event.value.entry.id;
+    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

@@ -1,35 +1,20 @@
-.setting-card.mdl-card {
+.adf-setting-container {
+    display: table;
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+.adf-setting-card {
+    width: 400px;
+}
+
+.full-width {
     width: 100%;
-    height: 100%;
 }
 
-.setting-card > .mdl-card__title {
-    color: #fff;
-    background: bottom right 15% no-repeat #1fbcd2;
-}
-
-.setting-card-padding {
+.adf-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

@@ -1,46 +1,61 @@
-<div class="setting-container">
-    <div class="table-row">
-        <div class="setting-card-padding"></div>
-        <div class="setting-card mdl-card mdl-shadow--2dp">
-            <div class="mdl-card__title mdl-card--expand">
-                <h2 class="mdl-card__title-text">SETTINGS</h2>
-            </div>
-            <div class="mdl-card__actions mdl-card--border">
-                <div class="mdl-card__supporting-text">
-                    Content Services host URL configuration
-                </div>
-                <nav class="mdl-navigation">
-                    <i class="icon material-icons icon-margin">link</i>
-                    <div class="mdl-textfield mdl-js-textfield adf-setting-input-padding">
-                        <input data-automation-id="ecmHost" class="mdl-textfield__input" tabindex="1" type="text" tabindex="1" (change)="onChangeECMHost($event)"
-                            pattern="^(http|https):\/\/.*" id="ecmHost" value="{{ecmHost}}">
-                        <label class="mdl-textfield__label" for="ecmHost">ECM Host</label>
-                        <span class="mdl-textfield__error">ECM host is not valid!</span>
-                    </div>
-                </nav>
+<div class="adf-setting-container">
+    <div class="adf-setting-card-padding"></div>
+    <md-toolbar color="primary" >
+        <h3>{{'SETTINGS.TITLE' | translate}}</h3>
+    </md-toolbar>
 
-                <div class="mdl-card__supporting-text">
-                    Process Services host URL configuration
-                </div>
-                <nav class="mdl-navigation">
-                    <i class="icon material-icons icon-margin">link</i>
-                    <div class="mdl-textfield mdl-js-textfield adf-setting-input-padding">
-                        <input class="mdl-textfield__input" type="text" (change)="onChangeBPMHost($event)" tabindex="2" pattern="^(http|https):\/\/.*"
-                            id="bpmHost" value="{{bpmHost}}">
-                        <label class="mdl-textfield__label" for="bpmHost">BPM Host</label>
-                        <span class="mdl-textfield__error">BPM host is not valid!</span>
-                    </div>
-                </nav>
-            </div>
-            <div class="mdl-card__actions mdl-card--border">
-                <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" onclick="window.history.back()">
-                    Back
-                </a>
-                <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" onclick="window.location.href = '/'">
-                    Apply
-                </a>
-            </div>
-        </div>
-        <div class="setting-card-padding"></div>
-    </div>
+    <md-card class="adf-setting-card">
+        <md-card-content>
+
+            <md-card-subtitle>{{'SETTINGS.CS-HOST' | translate }}</md-card-subtitle>
+
+            <md-input-container class="full-width">
+                <md-icon mdPrefix>link</md-icon>
+                <input mdInput
+                       [formControl]="urlFormControlEcm"
+                       data-automation-id="ecmHost"
+                       type="text"
+                       (change)="onChangeECMHost($event)"
+                       tabindex="2"
+                       id="ecmHost"
+                       value="{{ecmHost}}"
+                       placeholder="http(s)://host|ip:port(/path)">
+                <md-error *ngIf="urlFormControlEcm.hasError('pattern')">
+                    ECM host is not valid! http(s)://host|ip:port(/path)
+                </md-error>
+            </md-input-container>
+            <p>
+            <p>
+            <md-card-subtitle>{{'SETTINGS.BP-HOST' | translate }}</md-card-subtitle>
+
+            <md-input-container class="full-width">
+                <md-icon mdPrefix>link</md-icon>
+                <input mdInput
+                       [formControl]="urlFormControlBpm"
+                       data-automation-id="bpmHost"
+                       type="text"
+                       (change)="onChangeBPMHost($event)"
+                       tabindex="2"
+                       id="bpmHost"
+                       value="{{bpmHost}}"
+                       placeholder="http(s)://host|ip:port(/path)">
+                <md-error *ngIf="urlFormControlBpm.hasError('pattern')">
+                    BPM host is not valid! http(s)://host|ip:port(/path)
+                </md-error>
+            </md-input-container>
+
+        </md-card-content>
+        <md-card-actions>
+
+            <button md-button onclick="window.history.back()" color="primary">
+                {{'SETTINGS.BACK' | translate }}
+            </button>
+
+            <button md-button onclick="window.location.href = '/'" color="primary">
+                {{'SETTINGS.APPLY' | translate }}
+            </button>
+
+        </md-card-actions>
+    </md-card>
+    <div class="adf-setting-card-padding"></div>
 </div>

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

@@ -15,20 +15,23 @@
  * limitations under the License.
  */
 
-import { Component, AfterViewChecked } from '@angular/core';
-import { AlfrescoSettingsService, StorageService, LogService } from 'ng2-alfresco-core';
-
-declare var componentHandler: any;
+import { Component } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
+import { AlfrescoSettingsService, LogService, StorageService } from 'ng2-alfresco-core';
 
 @Component({
     selector: 'app-settings',
     templateUrl: 'settings.component.html',
     styleUrls: ['settings.component.css']
 })
-export class SettingsComponent implements AfterViewChecked {
+export class SettingsComponent {
+
+    HOST_REGEX: string = '^(http|https):\/\/.*[^/]$';
 
     ecmHost: string;
     bpmHost: string;
+    urlFormControlEcm = new FormControl('', [Validators.required, Validators.pattern(this.HOST_REGEX)]);
+    urlFormControlBpm = new FormControl('', [Validators.required, Validators.pattern(this.HOST_REGEX)]);
 
     constructor(private settingsService: AlfrescoSettingsService,
                 private storage: StorageService,
@@ -37,13 +40,6 @@ export class SettingsComponent implements AfterViewChecked {
         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)) {

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

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

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

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

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

@@ -19,19 +19,8 @@ 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>
-    `
+    templateUrl: 'social.component.html',
+    styleUrls: ['social.component.scss']
 })
 export class SocialComponent {
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

demo-shell-ng2/app/main.ts

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

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

@@ -16,13 +16,20 @@
  */
 
 import { NgModule } from '@angular/core';
-import { MdSlideToggleModule, MdInputModule, MdSelectModule, MdDialogModule } from '@angular/material';
+import {
+    MdDialogModule,
+    MdInputModule,
+    MdProgressBarModule,
+    MdSelectModule,
+    MdSlideToggleModule
+} from '@angular/material';
 
 const MATERIAL_MODULES = [
     MdSlideToggleModule,
     MdInputModule,
     MdSelectModule,
-    MdDialogModule
+    MdDialogModule,
+    MdProgressBarModule
 ];
 
 @NgModule({

demo-shell-ng2/app/polyfills.ts

@@ -1,3 +1,5 @@
+/* tslint:disable */
+
 import 'core-js/es6';
 import 'core-js/es7/reflect';
 import 'intl';

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

@@ -32,6 +32,6 @@ export class DebugAppConfigService extends AppConfigService {
             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/theme.scss

@@ -0,0 +1,13 @@
+@import '~@angular/material/theming';
+@import 'colors';
+@import 'all-theme';
+
+@include mat-core();
+
+$primary: mat-palette($alfresco-accent-orange);
+$accent:  mat-palette($alfresco-accent-purple);
+$warn:    mat-palette($alfresco-warn);
+$theme:   mat-light-theme($primary, $accent, $warn);
+
+@include angular-material-theme($theme);
+@include alfresco-material-theme($theme);

demo-shell-ng2/app/vendor.ts

@@ -1,9 +1,11 @@
+/* tslint:disable */
+
 // Angular
+import '@angular/common';
+import '@angular/core';
+import '@angular/http';
 import '@angular/platform-browser';
 import '@angular/platform-browser-dynamic';
-import '@angular/core';
-import '@angular/common';
-import '@angular/http';
 import '@angular/router';
 
 // RxJS
@@ -14,64 +16,53 @@ import 'hammerjs';
 
 // Alfresco
 import 'alfresco-js-api';
-import 'ng2-alfresco-core';
-import 'ng2-alfresco-datatable';
-import 'ng2-activiti-diagrams';
 import 'ng2-activiti-analytics';
+import 'ng2-activiti-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-tag';
 import 'ng2-alfresco-social';
+import 'ng2-alfresco-tag';
 import 'ng2-alfresco-upload';
+import 'ng2-alfresco-userinfo';
 import 'ng2-alfresco-viewer';
 import 'ng2-alfresco-webscript';
-import 'ng2-alfresco-userinfo';
 
 // Polyfill(s) for dialogs
 require('script-loader!dialog-polyfill/dialog-polyfill');
 import 'dialog-polyfill/dialog-polyfill.css';
 
-// Load the Angular Material 2 stylesheet
-import '@angular/material/prebuilt-themes/indigo-pink.css';
-
 // Google Material Design Lite
-import 'material-design-lite/material.js';
-import 'material-design-lite/dist/material.orange-blue.min.css';
 import 'material-design-icons/iconfont/material-icons.css';
+import '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.ng1';
 import 'ng2-activiti-form/stencils/runtime.adf';
+import 'ng2-activiti-form/stencils/runtime.ng1';
 
-import 'ng2-charts';
 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';
-}
+pdfjsLib.PDFJS.workerSrc = 'pdf.worker.js';
 
 require('pdfjs-dist/web/pdf_viewer.js');
-require('three/build/three.min.js');
+
 
 // 3D viewer
-import 'three';
+require('three/build/three.min.js');
 import 'ng2-3d-editor';
+import 'three';

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

@@ -33,7 +33,8 @@ module.exports = {
                 loader: 'tslint-loader',
                 include: [helpers.root('app')],
                 options: {
-                    emitErrors: true
+                    emitErrors: true,
+                    fix: true
                 },
                 exclude: [/node_modules/, /public/, /resources/, /dist/]
             },
@@ -45,6 +46,7 @@ module.exports = {
             },
             {
                 test: /\.html$/,
+                include: [helpers.root('app'), helpers.root('../ng2-components')],
                 loader: 'html-loader',
                 exclude: [/node_modules/, /public/, /resources/, /dist/]
             },
@@ -61,19 +63,6 @@ module.exports = {
                 include: [helpers.root('app'), helpers.root('../ng2-components')],
                 loader: 'raw-loader'
             },
-            {
-                test: /\.component.scss$/,
-                use: [{
-                    loader: "to-string-loader"
-                }, {
-                    loader: "raw-loader"
-                }, {
-                    loader: "sass-loader",
-                    options: {
-                        includePaths: [path.resolve(__dirname, '../../ng2-components/ng2-alfresco-core/styles')]
-                    }
-                }]
-            },
             {
                 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                 loader: 'file-loader?name=assets/[name].[hash].[ext]'
@@ -87,7 +76,7 @@ module.exports = {
                     emitErrors: true,
                     licenseFile: path.resolve(__dirname, '../assets/license_header.txt')
                 },
-                exclude: [/node_modules/, /bundles/, /dist/, /demo/],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
             }
         ]
     },

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

@@ -28,7 +28,7 @@ const alfrescoLibs = [
 
 module.exports = webpackMerge(commonConfig, {
 
-    devtool: 'cheap-module-eval-source-map',
+    devtool: 'cheap-module-source-map',
 
     output: {
         path: helpers.root('dist'),
@@ -45,7 +45,20 @@ module.exports = webpackMerge(commonConfig, {
                     'happypack/loader?id=ts','angular2-template-loader'
                 ],
                 exclude: [/node_modules/, /public/, /resources/, /dist/]
-            }
+            },
+            {
+                test: /\.scss$/,
+                use: [{
+                    loader: "to-string-loader"
+                }, {
+                    loader: "raw-loader"
+                }, {
+                    loader: "sass-loader",
+                    options: {
+                        includePaths: [path.resolve(__dirname, '../../ng2-components/ng2-alfresco-core/styles')]
+                    }
+                }]
+            },
         ]
     },
 
@@ -103,6 +116,13 @@ module.exports = webpackMerge(commonConfig, {
                     to: `assets/${lib}/i18n/`
                 }
             })
+        ]),
+        new CopyWebpackPlugin([
+            {
+                context: `../ng2-components/ng2-alfresco-core/prebuilt-themes/`,
+                from: '**/*.css',
+                to: 'prebuilt-themes'
+            }
         ])
     ]
 });

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

@@ -6,7 +6,7 @@ const helpers = require('./helpers');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 var HappyPack = require('happypack');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
-
+const path = require('path');
 const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
 
 const alfrescoLibs = [
@@ -50,7 +50,20 @@ module.exports = webpackMerge(commonConfig, {
                 include: [helpers.root('app'), helpers.root('../ng2-components')],
                 use: ['happypack/loader?id=ts', 'angular2-template-loader'],
                 exclude: [/node_modules/, /public/, /resources/, /dist/]
-            }
+            },
+            {
+                test: /\.scss$/,
+                use: [{
+                    loader: "to-string-loader"
+                }, {
+                    loader: "raw-loader"
+                }, {
+                    loader: "sass-loader",
+                    options: {
+                        includePaths: [path.resolve(__dirname, helpers.root('node_modules') + '/ng2-alfresco-core/styles')]
+                    }
+                }]
+            },
         ]
     },
 
@@ -82,6 +95,13 @@ module.exports = webpackMerge(commonConfig, {
                 }
             })
         ]),
+        new CopyWebpackPlugin([
+            {
+                context: `node_modules/ng2-alfresco-core/prebuilt-themes/`,
+                from: '**/*.css',
+                to: 'prebuilt-themes'
+            }
+        ]),
         new webpack.NoEmitOnErrorsPlugin(),
         new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
             mangle: {

demo-shell-ng2/index.html

@@ -22,6 +22,10 @@
     <![endif]-->
 
     <style>
+        body, html {
+            height: 100%;
+        }
+
         .loader-container {
             display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
             display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
@@ -49,8 +53,8 @@
     </style>
 </head>
 <!-- 3. Display the application -->
-<body>
-<alfresco-app>
+<body class="adf-background-color">
+<adf-app>
     <div id="loader-container" class="loader-container">
         <div class="loader-item">
             <div id="loader-spin" class="mdl-progress mdl-js-progress mdl-progress__indeterminate is-upgraded"
@@ -62,7 +66,7 @@
             <div id="loader-text" class="loader-text">Loading Demo Shell..</div>
         </div>
     </div>
-</alfresco-app>
+</adf-app>
 </body>
 </html>