New packages org (#2639)

New packages org

demo-shell/.angular-cli.json

@@ -0,0 +1,189 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "project": {
+    "name": "myapp"
+  },
+  "apps": [
+    {
+      "root": "src",
+      "outDir": "dist",
+      "assets": [
+        "assets",
+        "favicon.ico",
+        "app.config.json",
+        "versions.json",
+        {
+          "glob": "**/*",
+          "input": "../resources",
+          "output": "./resources"
+        },
+        {
+          "glob": "**/*",
+          "input": "../node_modules/core/prebuilt-themes",
+          "output": "./prebuilt-themes"
+        },
+        {
+          "glob": "**/*",
+          "input": "../node_modules/core/bundles/assets",
+          "output": "./assets/"
+        },
+        {
+          "glob": "**/*",
+          "input": "../node_modules/analytics/bundles/assets",
+          "output": "./assets/"
+        },
+        {
+          "glob": "**/*",
+          "input": "../node_modules/process-services/bundles/assets",
+          "output": "./assets/"
+        },
+        {
+          "glob": "**/*",
+          "input": "../node_modules/content-services/bundles/assets",
+          "output": "./assets/"
+        },
+        { "glob": "pdf.worker.js", "input": "../node_modules/pdfjs-dist/build", "output": "./" }
+      ],
+      "index": "index.html",
+      "main": "main.ts",
+      "polyfills": "polyfills.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.app.json",
+      "testTsconfig": "tsconfig.spec.json",
+      "prefix": "app",
+      "styles": [
+        "styles.scss"
+      ],
+      "stylePreprocessorOptions": {
+        "includePaths": [
+          "../node_modules/"
+        ]
+      },
+      "scripts": [
+        "../node_modules/pdfjs-dist/build/pdf.js",
+        "../node_modules/pdfjs-dist/web/pdf_viewer.js",
+        "../node_modules/raphael/raphael.min.js",
+        "../node_modules/moment/min/moment.min.js",
+        "../node_modules/three/build/three.min.js"
+      ],
+      "environmentSource": "environments/environment.ts",
+      "environments": {
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    },
+
+    {
+      "root": "src",
+      "outDir": "dist",
+      "assets": [
+        "assets",
+        "app.config.json",
+        "versions.json",
+        {
+          "glob": "**/*",
+          "input": "../resources",
+          "output": "./resources"
+        },
+        {
+          "glob": "**/*",
+          "input": "../../lib/core/bundles/assets",
+          "output": "./assets/"
+        },
+        {
+          "glob": "**/*",
+          "input": "../../lib/process-services/bundles/assets",
+          "output": "./assets/"
+        },
+        {
+          "glob": "**/*",
+          "input": "../../lib/content-services/bundles/assets",
+          "output": "./assets/"
+        },
+        {
+          "glob": "**/*",
+          "input": "../../lib/analytics/bundles/assets",
+          "output": "./assets/"
+        },
+        {
+          "glob": "**/*",
+          "input": "../../lib/core/i18n",
+          "output": "./assets/@adf/core/i18n"
+        },
+        {
+          "glob": "**/*",
+          "input": "../../lib/analytics/i18n",
+          "output": "./assets/@adf/analytics/i18n"
+        },
+        {
+          "glob": "**/*",
+          "input": "../../lib/process-services/i18n",
+          "output": "./assets/@adf/process-services/i18n"
+        },
+        {
+          "glob": "**/*",
+          "input": "../../lib/content-services/i18n",
+          "output": "./assets/@adf/content-services/i18n"
+        },
+        { "glob": "pdf.worker.js", "input": "../node_modules/pdfjs-dist/build", "output": "./" }
+      ],
+      "index": "index.html",
+      "main": "main.ts",
+      "polyfills": "polyfills.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.dev.json",
+      "testTsconfig": "tsconfig.spec.json",
+      "prefix": "app-dev",
+      "styles": [
+        "styles.scss",
+        "custom-style.scss"
+      ],
+      "stylePreprocessorOptions": {
+      "includePaths": [
+        "../../lib/"
+      ]
+      },
+      "scripts": [
+        "../node_modules/pdfjs-dist/build/pdf.js",
+        "../node_modules/pdfjs-dist/web/pdf_viewer.js",
+        "../node_modules/raphael/raphael.min.js",
+        "../node_modules/moment/min/moment.min.js",
+        "../node_modules/three/build/three.min.js"
+      ],
+      "environmentSource": "environments/environment.ts",
+      "environments": {
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    }
+  ],
+  "e2e": {
+    "protractor": {
+      "config": "./protractor.conf.js"
+    }
+  },
+  "lint": [
+    {
+      "project": "src/tsconfig.app.json"
+    },
+    {
+      "project": "src/tsconfig.spec.json"
+    },
+    {
+      "project": "e2e/tsconfig.e2e.json"
+    }
+  ],
+  "test": {
+    "karma": {
+      "config": "./karma.conf.js"
+    }
+  },
+  "defaults": {
+    "styleExt": "scss",
+    "component": {
+    },
+    "serve": {
+      "port": 3000
+    }
+  }
+}

demo-shell/.editorconfig

@@ -0,0 +1,23 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.json]
+indent_style = space
+indent_size = 2
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
+
+[resources/*.json]
+indent_size = 2
+max_line_length = off
+trim_trailing_whitespace = false

demo-shell/.gitignore

@@ -0,0 +1,63 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+testem.log
+/typings
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+
+
+# System Files
+.DS_Store
+Thumbs.db
+
+typings/
+node_modules/
+bower_components/
+lib/
+app/**/*.js
+app/**/*.js.map
+app/**/*.d.ts
+
+!app/js/Polyline.js
+.idea
+**/versions.json
+
+
+dist/
+coverage/
+
+# docker files
+docker-compose.yml
+Dockerfile

demo-shell/LICENSE

@@ -0,0 +1,177 @@
+
+                              Apache License
+                        Version 2.0, January 2004
+                     http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions.
+
+   "License" shall mean the terms and conditions for use, reproduction,
+   and distribution as defined by Sections 1 through 9 of this document.
+
+   "Licensor" shall mean the copyright owner or entity authorized by
+   the copyright owner that is granting the License.
+
+   "Legal Entity" shall mean the union of the acting entity and all
+   other entities that control, are controlled by, or are under common
+   control with that entity. For the purposes of this definition,
+   "control" means (i) the power, direct or indirect, to cause the
+   direction or management of such entity, whether by contract or
+   otherwise, or (ii) ownership of fifty percent (50%) or more of the
+   outstanding shares, or (iii) beneficial ownership of such entity.
+
+   "You" (or "Your") shall mean an individual or Legal Entity
+   exercising permissions granted by this License.
+
+   "Source" form shall mean the preferred form for making modifications,
+   including but not limited to software source code, documentation
+   source, and configuration files.
+
+   "Object" form shall mean any form resulting from mechanical
+   transformation or translation of a Source form, including but
+   not limited to compiled object code, generated documentation,
+   and conversions to other media types.
+
+   "Work" shall mean the work of authorship, whether in Source or
+   Object form, made available under the License, as indicated by a
+   copyright notice that is included in or attached to the work
+   (an example is provided in the Appendix below).
+
+   "Derivative Works" shall mean any work, whether in Source or Object
+   form, that is based on (or derived from) the Work and for which the
+   editorial revisions, annotations, elaborations, or other modifications
+   represent, as a whole, an original work of authorship. For the purposes
+   of this License, Derivative Works shall not include works that remain
+   separable from, or merely link (or bind by name) to the interfaces of,
+   the Work and Derivative Works thereof.
+
+   "Contribution" shall mean any work of authorship, including
+   the original version of the Work and any modifications or additions
+   to that Work or Derivative Works thereof, that is intentionally
+   submitted to Licensor for inclusion in the Work by the copyright owner
+   or by an individual or Legal Entity authorized to submit on behalf of
+   the copyright owner. For the purposes of this definition, "submitted"
+   means any form of electronic, verbal, or written communication sent
+   to the Licensor or its representatives, including but not limited to
+   communication on electronic mailing lists, source code control systems,
+   and issue tracking systems that are managed by, or on behalf of, the
+   Licensor for the purpose of discussing and improving the Work, but
+   excluding communication that is conspicuously marked or otherwise
+   designated in writing by the copyright owner as "Not a Contribution."
+
+   "Contributor" shall mean Licensor and any individual or Legal Entity
+   on behalf of whom a Contribution has been received by Licensor and
+   subsequently incorporated within the Work.
+
+2. Grant of Copyright License. Subject to the terms and conditions of
+   this License, each Contributor hereby grants to You a perpetual,
+   worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+   copyright license to reproduce, prepare Derivative Works of,
+   publicly display, publicly perform, sublicense, and distribute the
+   Work and such Derivative Works in Source or Object form.
+
+3. Grant of Patent License. Subject to the terms and conditions of
+   this License, each Contributor hereby grants to You a perpetual,
+   worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+   (except as stated in this section) patent license to make, have made,
+   use, offer to sell, sell, import, and otherwise transfer the Work,
+   where such license applies only to those patent claims licensable
+   by such Contributor that are necessarily infringed by their
+   Contribution(s) alone or by combination of their Contribution(s)
+   with the Work to which such Contribution(s) was submitted. If You
+   institute patent litigation against any entity (including a
+   cross-claim or counterclaim in a lawsuit) alleging that the Work
+   or a Contribution incorporated within the Work constitutes direct
+   or contributory patent infringement, then any patent licenses
+   granted to You under this License for that Work shall terminate
+   as of the date such litigation is filed.
+
+4. Redistribution. You may reproduce and distribute copies of the
+   Work or Derivative Works thereof in any medium, with or without
+   modifications, and in Source or Object form, provided that You
+   meet the following conditions:
+
+   (a) You must give any other recipients of the Work or
+       Derivative Works a copy of this License; and
+
+   (b) You must cause any modified files to carry prominent notices
+       stating that You changed the files; and
+
+   (c) You must retain, in the Source form of any Derivative Works
+       that You distribute, all copyright, patent, trademark, and
+       attribution notices from the Source form of the Work,
+       excluding those notices that do not pertain to any part of
+       the Derivative Works; and
+
+   (d) If the Work includes a "NOTICE" text file as part of its
+       distribution, then any Derivative Works that You distribute must
+       include a readable copy of the attribution notices contained
+       within such NOTICE file, excluding those notices that do not
+       pertain to any part of the Derivative Works, in at least one
+       of the following places: within a NOTICE text file distributed
+       as part of the Derivative Works; within the Source form or
+       documentation, if provided along with the Derivative Works; or,
+       within a display generated by the Derivative Works, if and
+       wherever such third-party notices normally appear. The contents
+       of the NOTICE file are for informational purposes only and
+       do not modify the License. You may add Your own attribution
+       notices within Derivative Works that You distribute, alongside
+       or as an addendum to the NOTICE text from the Work, provided
+       that such additional attribution notices cannot be construed
+       as modifying the License.
+
+   You may add Your own copyright statement to Your modifications and
+   may provide additional or different license terms and conditions
+   for use, reproduction, or distribution of Your modifications, or
+   for any such Derivative Works as a whole, provided Your use,
+   reproduction, and distribution of the Work otherwise complies with
+   the conditions stated in this License.
+
+5. Submission of Contributions. Unless You explicitly state otherwise,
+   any Contribution intentionally submitted for inclusion in the Work
+   by You to the Licensor shall be under the terms and conditions of
+   this License, without any additional terms or conditions.
+   Notwithstanding the above, nothing herein shall supersede or modify
+   the terms of any separate license agreement you may have executed
+   with Licensor regarding such Contributions.
+
+6. Trademarks. This License does not grant permission to use the trade
+   names, trademarks, service marks, or product names of the Licensor,
+   except as required for reasonable and customary use in describing the
+   origin of the Work and reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty. Unless required by applicable law or
+   agreed to in writing, Licensor provides the Work (and each
+   Contributor provides its Contributions) on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+   implied, including, without limitation, any warranties or conditions
+   of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+   PARTICULAR PURPOSE. You are solely responsible for determining the
+   appropriateness of using or redistributing the Work and assume any
+   risks associated with Your exercise of permissions under this License.
+
+8. Limitation of Liability. In no event and under no legal theory,
+   whether in tort (including negligence), contract, or otherwise,
+   unless required by applicable law (such as deliberate and grossly
+   negligent acts) or agreed to in writing, shall any Contributor be
+   liable to You for damages, including any direct, indirect, special,
+   incidental, or consequential damages of any character arising as a
+   result of this License or out of the use or inability to use the
+   Work (including but not limited to damages for loss of goodwill,
+   work stoppage, computer failure or malfunction, or any and all
+   other commercial damages or losses), even if such Contributor
+   has been advised of the possibility of such damages.
+
+9. Accepting Warranty or Additional Liability. While redistributing
+   the Work or Derivative Works thereof, You may choose to offer,
+   and charge a fee for, acceptance of support, warranty, indemnity,
+   or other liability obligations and/or rights consistent with this
+   License. However, in accepting such obligations, You may act only
+   on Your own behalf and on Your sole responsibility, not on behalf
+   of any other Contributor, and only if You agree to indemnify,
+   defend, and hold each Contributor harmless for any liability
+   incurred by, or claims asserted against, such Contributor by reason
+   of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS

demo-shell/README.md

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

demo-shell/app.js

@@ -0,0 +1,77 @@
+var port = process.env.PORT || 3000,
+    http = require('http'),
+    fs = require('fs'),
+    url = require('url'),
+    mime = require('mime'),
+    html = fs.readFileSync('index.html');
+
+var log = function(entry) {
+    fs.appendFileSync('/tmp/sample-app.log', new Date().toISOString() + ' - ' + entry + '\n');
+};
+
+var server = http.createServer(function (req, res) {
+
+    // Parse the request containing file name
+    var pathname = url.parse(req.url).pathname;
+
+    // Print the name of the file for which request is made.
+    console.log("Request for " + pathname + " received.");
+
+    if (req.method === 'POST') {
+        var body = '';
+
+        req.on('data', function(chunk) {
+            body += chunk;
+        });
+
+        req.on('end', function() {
+            if (req.url === '/') {
+                log('Received message: ' + body);
+            } else if (req.url = '/scheduled') {
+                log('Received task ' + req.headers['x-aws-sqsd-taskname'] + ' scheduled at ' + req.headers['x-aws-sqsd-scheduled-at']);
+            }
+
+            res.writeHead(200, 'OK', {'Content-Type': 'text/plain'});
+            res.end();
+        });
+    } else {
+        var filename = pathname.substr(1);
+        if(filename === '' || filename.indexOf('.') === -1){
+            filename = 'index.html';
+        }
+        // Read the requested file content from file system
+        fs.readFile(filename, function (err, data) {
+            if (err) {
+                console.log(err, filename);
+                // HTTP Status: 404 : NOT FOUND
+                // Content Type: text/plain
+                res.writeHead(404, {'Content-Type': 'text/html'});
+            }else{
+                //Page found
+                // HTTP Status: 200 : OK
+                // Content Type: text/plain
+                var type = mime.lookup(filename);
+                console.log('type',type);
+                if (!res.getHeader('content-type')) {
+                    var charset = mime.charsets.lookup(type);
+                    res.setHeader('Content-Type', type + (charset ? '; charset=' + charset : ''));
+                }
+                if(type.indexOf('image') > -1 || type.indexOf('font') > -1){
+                    var img = fs.readFileSync(pathname.substr(1));
+                    res.end(img, 'binary');
+                }else{
+                    res.write(data.toString());
+                }
+                // Write the content of the file to response body
+            }
+            // Send the response body
+            res.end();
+        });
+    }
+});
+
+// Listen on port 3000, IP defaults to 127.0.0.1
+server.listen(port);
+
+// Put a friendly message on the terminal
+console.log('Server running at http://127.0.0.1:' + port + '/');

demo-shell/config/webpack.style.js

@@ -0,0 +1,42 @@
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const path = require('path');
+
+const extractScss = new ExtractTextPlugin('../lib/core/prebuilt-themes/[name].css');
+
+module.exports = {
+
+    entry: {
+        'adf-blue-orange': '../lib/core/styles/prebuilt/adf-blue-orange.scss',
+        'adf-blue-purple': '../lib/core/styles/prebuilt/adf-blue-purple.scss',
+        'adf-cyan-orange': '../lib/core/styles/prebuilt/adf-cyan-orange.scss',
+        'adf-cyan-purple': '../lib/core/styles/prebuilt/adf-cyan-purple.scss',
+        'adf-green-purple': '../lib/core/styles/prebuilt/adf-green-purple.scss',
+        'adf-green-orange': '../lib/core/styles/prebuilt/adf-green-orange.scss',
+        'adf-pink-bluegrey': '../lib/core/styles/prebuilt/adf-pink-bluegrey.scss',
+        'adf-indigo-pink': '../lib/core/styles/prebuilt/adf-indigo-pink.scss',
+        'adf-purple-green': '../lib/core/styles/prebuilt/adf-purple-green.scss'
+    },
+
+    resolve: {
+        extensions: ['.ts', '.js'],
+        modules: [path.resolve(__dirname, '../node_modules')]
+    },
+
+    output: {
+        filename: '../dist/[name].js'
+    },
+
+    module: {
+        rules: [{
+            test: /\.scss$/,
+            use: extractScss.extract([{
+                loader: "raw-loader"
+            }, {
+                loader: "sass-loader"
+            }])
+        }]
+    },
+    plugins: [
+        extractScss
+    ]
+};

demo-shell/e2e/app.e2e-spec.ts

@@ -0,0 +1,14 @@
+import { MyappPage } from './app.po';
+
+describe('myapp App', () => {
+  let page: MyappPage;
+
+  beforeEach(() => {
+    page = new MyappPage();
+  });
+
+  it('should display message saying app works', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('app works!');
+  });
+});

demo-shell/e2e/app.po.ts

@@ -0,0 +1,11 @@
+import { browser, element, by } from 'protractor';
+
+export class MyappPage {
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  getParagraphText() {
+    return element(by.css('app-root h1')).getText();
+  }
+}

demo-shell/e2e/tsconfig.e2e.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "module": "commonjs",
+    "target": "es5",
+    "types":[
+      "jasmine",
+      "node"
+    ]
+  }
+}

demo-shell/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/0.13/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular/cli'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular/cli/plugins/karma')
+    ],
+    client:{
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    files: [
+      { pattern: './src/test.ts', watched: false }
+    ],
+    preprocessors: {
+      './src/test.ts': ['@angular/cli']
+    },
+    mime: {
+      'text/x-typescript': ['ts','tsx']
+    },
+    coverageIstanbulReporter: {
+      reports: [ 'html', 'lcovonly' ],
+      fixWebpackSourcePaths: true
+    },
+    angularCli: {
+      environment: 'dev'
+    },
+    reporters: config.angularCli && config.angularCli.codeCoverage
+              ? ['progress', 'coverage-istanbul']
+              : ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};

demo-shell/package.json

@@ -0,0 +1,114 @@
+{
+  "name": "Alfresco-ADF-Angular-Demo",
+  "description": "Demo shell for Alfresco Angular components",
+  "version": "2.0.0",
+  "author": "Alfresco Software, Ltd.",
+  "scripts": {
+    "ng": "ng",
+    "start": "npm run server-versions && rimraf dist && ng serve --host 0.0.0.0 --app=0 --open --aot=true",
+    "start:dev": "npm run style:dev & npm run clean-lib-angular && npm run server-versions && rimraf dist && ng serve --host 0.0.0.0 --disable-host-check --app=1 pp-dev --proxy-config proxy.conf.js --open",
+    "start:dist": "npm run server-versions && rimraf dist && ng serve --host 0.0.0.0 --disable-host-check --aot=false --prod --app=0",
+    "build": "npm run server-versions && rimraf dist && ng build  -app=0",
+    "build:dev": "npm run style:dev & npm run server-versions && rimraf dist && ng build -app=1",
+    "style:dev": "npm run webpack -- --config  config/webpack.style.js --progress --profile --bail --watch",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e",
+    "server-versions": "rimraf ./src/versions.json && npm list --depth=0 --json=true --prod=true > ./src/versions.json  || exit 0",
+    "clean": "npm run clean-build  && rimraf dist node_modules typings dist",
+    "clean-lib-angular": "rimraf ../lib/node_modules/@angular",
+    "clean-build": "rimraf 'app/{,**/}**.js' 'app/{,**/}**.js.map' 'app/{,**/}**.d.ts'",
+    "clean-lock": "rimraf package-lock.json",
+    "webpack": "node node_modules/webpack/bin/webpack.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Alfresco/alfresco-ng2-components.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
+  },
+  "license": "Apache-2.0",
+  "contributors": [
+    {
+      "name": "Denys Vuika",
+      "email": "denis.vuyka@gmail.com"
+    },
+    {
+      "name": "Mario Romano",
+      "email": "mario.romano83@gmail.com"
+    },
+    {
+      "name": "Will Abson",
+      "email": "will.abson@alfresco.com"
+    },
+    {
+      "name": "Eugenio Romano",
+      "email": "eugenio.romano@alfresco.com"
+    },
+    {
+      "name": "Maurizio Vitale",
+      "email": "maurizio.vitale@alfresco.com"
+    }
+  ],
+  "keywords": [
+    "ng2",
+    "angular",
+    "angular2",
+    "alfresco"
+  ],
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "5.0.0",
+    "@angular/cdk": "5.0.0-rc0",
+    "@angular/common": "5.0.0",
+    "@angular/compiler": "5.0.0",
+    "@angular/core": "5.0.0",
+    "@angular/flex-layout": "2.0.0-beta.10",
+    "@angular/forms": "5.0.0",
+    "@angular/http": "5.0.0",
+    "@angular/material": "5.0.0-rc0",
+    "@angular/platform-browser": "5.0.0",
+    "@angular/platform-browser-dynamic": "5.0.0",
+    "@angular/router": "5.0.0",
+    "@ngx-translate/core": "8.0.0",
+    "alfresco-js-api": "^2.0.0-de41fd8ca9c1c6f6072d2e06415eef0a71330dc0",
+    "chart.js": "2.5.0",
+    "classlist.js": "1.1.20150312",
+    "core-js": "2.4.1",
+    "custom-event-polyfill": "0.3.0",
+    "hammerjs": "2.0.8",
+    "intl": "1.2.5",
+    "minimatch": "3.0.4",
+    "moment": "2.15.2",
+    "ng2-3d-editor": "0.0.18",
+    "ng2-charts": "1.6.0",
+    "pdfjs-dist": "1.5.404",
+    "raphael": "2.2.7",
+    "reflect-metadata": "0.1.10",
+    "rxjs": "5.5.2",
+    "web-animations-js": "2.3.1",
+    "zone.js": "0.8.14"
+  },
+  "devDependencies": {
+    "@angular/cli": "1.5.0",
+    "@angular/compiler-cli": "^5.0.0",
+    "@angular/language-service": "^5.0.0",
+    "@types/jasmine": "~2.5.53",
+    "@types/jasminewd2": "~2.0.2",
+    "@types/node": "~6.0.60",
+    "codelyzer": "~3.2.0",
+    "jasmine-core": "~2.6.2",
+    "jasmine-spec-reporter": "~4.1.0",
+    "karma": "~1.7.0",
+    "karma-chrome-launcher": "~2.1.1",
+    "karma-cli": "~1.0.1",
+    "karma-coverage-istanbul-reporter": "^1.2.1",
+    "karma-jasmine": "~1.1.0",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "protractor": "~5.1.2",
+    "ts-node": "~3.2.0",
+    "tslint": "~5.7.0",
+    "typescript": "~2.4.2"
+  }
+}

demo-shell/protractor.conf.js

@@ -0,0 +1,30 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  beforeLaunch: function() {
+    require('ts-node').register({
+      project: 'e2e/tsconfig.e2e.json'
+    });
+  },
+  onPrepare() {
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};

demo-shell/proxy.conf.js

@@ -0,0 +1,25 @@
+module.exports = {
+  "/alfresco": {
+    "target": "http://localhost:8080",
+    "secure": false,
+    "pathRewrite": {
+      "^/alfresco/alfresco": ""
+    },
+    "changeOrigin": true,
+    // workaround for REPO-2260
+    onProxyRes: function (proxyRes, req, res) {
+      const header = proxyRes.headers['www-authenticate'];
+      if (header && header.startsWith('Basic')) {
+          proxyRes.headers['www-authenticate'] = 'x' + header;
+      }
+    }
+  },
+  "/activiti-app": {
+    "target": "http://localhost:9999",
+    "secure": false,
+    "pathRewrite": {
+      "^/activiti-app/activiti-app": ""
+    },
+    "changeOrigin": true
+  }
+};

demo-shell/resources/i18n/de.json

@@ -0,0 +1,40 @@
+{
+  "title": "Willkommen",
+  "DOCUMENT_LIST": {
+    "COLUMNS": {
+      "DISPLAY_NAME": "Namen anzeigen",
+      "TAG": "Tag",
+      "CREATED_BY": "Erstellt von",
+      "CREATED_ON": "Erstellt am",
+      "CREATED": "Erstellt"
+    },
+    "ACTIONS": {
+      "FOLDER": {
+        "COPY": "Kopieren",
+        "MOVE": "Verschieben",
+        "DELETE": "Löschen"
+      },
+      "DOCUMENT": {
+        "DOWNLOAD": "Herunterladen",
+        "COPY": "Kopieren",
+        "MOVE": "Verschieben",
+        "DELETE": "Löschen"
+      }
+    }
+  },
+  "ANALYTICS_REPORT": {
+    "NO_REPORT_MESSAGE": "Kein Bericht ausgewählt. Wählen Sie einen Bericht aus der Liste"
+  },
+  "PS-TAB": {
+    "TASKS-TAB": "Aufgaben",
+    "PROCESSES-TAB": "Prozess",
+    "REPORTS-TAB": "Berichte",
+    "START-TASK": "Aufgabe starten",
+    "START-PROCESS": "Prozess starten",
+    "AUDIT-LOG": "Audit-Protokoll verarbeiten"
+  },
+  "FORM-LIST": {
+    "STORE": "Speichern",
+    "RESTORE": "Wiederherstellen"
+  }
+}

demo-shell/resources/i18n/en.json

@@ -0,0 +1,96 @@
+{
+    "title": "Welcome",
+    "VERSION": {
+      "NO_PERMISSION": "You don't have permission to manage versions of this content",
+      "NO_PERMISSION_EVENT": "You don't have ${event.permission} permission to ${event.action} the ${event.type}",
+      "CHOOSE_FILE": "Select a file to see its versions"
+    },
+    "APP_LAYOUT": {
+        "APP_NAME": "ADF Demo Application",
+        "HOME": "Home",
+        "CONTENT_SERVICES": "Content Services",
+        "PROCESS_SERVICES": "Process Services",
+        "LOGIN": "Login",
+        "CUSTOM_SOURCES": "Custom Sources",
+        "DATATABLE": "Datatable",
+        "FORM": "Form",
+        "FORM_LIST": "Form List",
+        "UPLOADER": "Uploader",
+        "WEBSCRIPT": "Webscript",
+        "TAG": "Tag",
+        "SOCIAL": "Social",
+        "SETTINGS": "Settings",
+        "ABOUT": "About"
+    },
+    "DOCUMENT_LIST": {
+        "MULTISELECT_CHECKBOXES" :"Multiselect (with checkboxes)",
+        "MULTIPLE_FILE_UPLOAD" :"Multiple File Upload",
+        "FOLDER_UPLOAD" :"Folder upload",
+        "CUSTOM_FILTER" :"Custom extensions filter",
+        "MAX_SIZE" : "Max size filter",
+        "ENABLE_VERSIONING" :"Enable versioning",
+        "DESCRIPTION_UPLOAD" : "Enable upload",
+        "MULTISELECT_DESCRIPTION" : "Use Cmd (Mac) or Ctrl (Windows) to toggle selection of multiple items",
+        "COLUMNS": {
+            "DISPLAY_NAME": "Display name",
+            "TAG": "Tag",
+            "CREATED_BY": "Created by",
+            "CREATED_ON": "Created on",
+            "CREATED": "Created"
+        },
+        "ACTIONS": {
+            "FOLDER": {
+                "COPY": "Copy",
+                "MOVE": "Move",
+                "DELETE": "Delete"
+            },
+            "DOCUMENT": {
+                "DOWNLOAD": "Download",
+                "COPY": "Copy",
+                "MOVE": "Move",
+                "DELETE": "Delete"
+            }
+        }
+    },
+    "DATATABLE" :{
+        "RESET_DEFAULT":"Reset to default",
+        "ADD_ROW":"Add row",
+        "REPLACE_ROWS":"Replace rows",
+        "REPLACE_COLUMNS":"Replace columns",
+        "LOAD_NODE":"Load Node",
+        "MULTISELECT":"Multiselect",
+        "MULTISELECT_DESCRIPTION":"Use Cmd (Mac) or Ctrl (Windows) to toggle selection of multiple items"
+    },
+    "ANALYTICS_REPORT": {
+        "NO_REPORT_MESSAGE": "No report selected. Choose a report from the list"
+    },
+    "PS-TAB": {
+        "TASKS-TAB": "Tasks",
+        "PROCESSES-TAB": "Process",
+        "REPORTS-TAB": "Reports",
+        "START-TASK": "Start task",
+        "START-PROCESS": "Start process",
+        "AUDIT-LOG": "Process Audit log"
+    },
+    "FORM-LIST": {
+        "STORE": "Store",
+        "RESTORE": "Restore"
+    },
+    "LOGIN": {
+        "CONTENT_SERVICES": "Content Services",
+        "PROCESS_SERVICES": "Process Services",
+        "LOGIN_FOOTER": "Login footer"
+    },
+    "SEARCH": {
+        "RESULTS": "Search results"
+    },
+    "SOCIAL": {
+        "LIKE":"Like component",
+        "RATING":"Rating component"
+    },
+    "TAG": {
+        "LIST":"List Tags Content Services",
+        "INSERT":"Insert Node ID",
+        "NODE_LIST":"Tag list By Node ID"
+    }
+}

demo-shell/resources/i18n/es.json

@@ -0,0 +1,40 @@
+{
+  "title": "Bienvenida",
+  "DOCUMENT_LIST": {
+    "COLUMNS": {
+      "DISPLAY_NAME": "Nombre a mostrar",
+      "TAG": "Etiqueta",
+      "CREATED_BY": "Creado por",
+      "CREATED_ON": "Creado",
+      "CREATED": "Creado"
+    },
+    "ACTIONS": {
+      "FOLDER": {
+        "COPY": "Copiar",
+        "MOVE": "Mover",
+        "DELETE": "Eliminar"
+      },
+      "DOCUMENT": {
+        "DOWNLOAD": "Descargar",
+        "COPY": "Copiar",
+        "MOVE": "Mover",
+        "DELETE": "Eliminar"
+      }
+    }
+  },
+  "ANALYTICS_REPORT": {
+    "NO_REPORT_MESSAGE": "No se ha seleccionado ningún informe. Elija un informe de la lista."
+  },
+  "PS-TAB": {
+    "TASKS-TAB": "Tareas",
+    "PROCESSES-TAB": "Proceso",
+    "REPORTS-TAB": "Informes",
+    "START-TASK": "Iniciar tarea",
+    "START-PROCESS": "Iniciar proceso",
+    "AUDIT-LOG": "Procesar registro de auditorías"
+  }
+  "FORM-LIST": {
+    "STORE": "Almacenar",
+    "RESTORE": "Restaurar"
+  }
+}

demo-shell/resources/i18n/fr.json

@@ -0,0 +1,40 @@
+{
+  "title": "Bienvenue",
+  "DOCUMENT_LIST": {
+    "COLUMNS": {
+      "DISPLAY_NAME": "Nom affiché",
+      "TAG": "Tag",
+      "CREATED_BY": "Créé par",
+      "CREATED_ON": "Créé le",
+      "CREATED": "Créé"
+    },
+    "ACTIONS": {
+      "FOLDER": {
+        "COPY": "Copier",
+        "MOVE": "Déplacer",
+        "DELETE": "Supprimer"
+      },
+      "DOCUMENT": {
+        "DOWNLOAD": "Télécharger",
+        "COPY": "Copier",
+        "MOVE": "Déplacer",
+        "DELETE": "Supprimer"
+      }
+    }
+  },
+  "ANALYTICS_REPORT": {
+    "NO_REPORT_MESSAGE": "Aucun rapport sélectionné. Choisissez un rapport dans la liste"
+  },
+  "PS-TAB": {
+    "TASKS-TAB": "Tâches",
+    "PROCESSES-TAB": "Processus",
+    "REPORTS-TAB": "Rapports",
+    "START-TASK": "Démarrer la tâche",
+    "START-PROCESS": "Démarrer le processus",
+    "AUDIT-LOG": "Journal d'audit des processus"
+  }
+  "FORM-LIST": {
+    "STORE": "Stocker",
+    "RESTORE": "Restaurer"
+  }
+}

demo-shell/resources/i18n/it.json

@@ -0,0 +1,40 @@
+{
+  "title": "Benvenuto",
+  "DOCUMENT_LIST": {
+    "COLUMNS": {
+      "DISPLAY_NAME": "Nome visualizzato",
+      "TAG": "Tag",
+      "CREATED_BY": "Creato da",
+      "CREATED_ON": "Creato il",
+      "CREATED": "Creato"
+    },
+    "ACTIONS": {
+      "FOLDER": {
+        "COPY": "Copia",
+        "MOVE": "Sposta",
+        "DELETE": "Elimina"
+      },
+      "DOCUMENT": {
+        "DOWNLOAD": "Download",
+        "COPY": "Copia",
+        "MOVE": "Sposta",
+        "DELETE": "Elimina"
+      }
+    }
+  },
+  "ANALYTICS_REPORT": {
+    "NO_REPORT_MESSAGE": "Nessun rapporto selezionato. Scegliere un rapporto dall'elenco"
+  },
+  "PS-TAB": {
+    "TASKS-TAB": "Compiti",
+    "PROCESSES-TAB": "Processo",
+    "REPORTS-TAB": "Rapporti",
+    "START-TASK": "Avvia compito",
+    "START-PROCESS": "Avvia processo",
+    "AUDIT-LOG": "Log di audit processo"
+  },
+  "FORM-LIST": {
+    "STORE": "Memorizza",
+    "RESTORE": "Ripristina"
+  }
+}

demo-shell/resources/i18n/ja.json

@@ -0,0 +1,40 @@
+{
+  "title": "ようこそ",
+  "DOCUMENT_LIST": {
+    "COLUMNS": {
+      "DISPLAY_NAME": "表示名",
+      "TAG": "タグ",
+      "CREATED_BY": "作成者",
+      "CREATED_ON": "作成日",
+      "CREATED": "作成日"
+    },
+    "ACTIONS": {
+      "FOLDER": {
+        "COPY": "コピー",
+        "MOVE": "移動",
+        "DELETE": "削除"
+      },
+      "DOCUMENT": {
+        "DOWNLOAD": "ダウンロード",
+        "COPY": "コピー",
+        "MOVE": "移動",
+        "DELETE": "削除"
+      }
+    }
+  },
+  "ANALYTICS_REPORT": {
+    "NO_REPORT_MESSAGE": "レポートが選択されていません。リストからレポートを選択してください。"
+  },
+  "PS-TAB": {
+    "TASKS-TAB": "タスク",
+    "PROCESSES-TAB": "プロセス",
+    "REPORTS-TAB": "レポート",
+    "START-TASK": "タスクの開始",
+    "START-PROCESS": "プロセスの開始",
+    "AUDIT-LOG": "プロセスの監査ログ"
+  },
+  "FORM-LIST": {
+    "STORE": "保存",
+    "RESTORE": "復元"
+  }
+}

demo-shell/resources/i18n/nb.json

@@ -0,0 +1,40 @@
+{
+  "title": "Velkommen",
+  "DOCUMENT_LIST": {
+    "COLUMNS": {
+      "DISPLAY_NAME": "Vis navn",
+      "TAG": "Tagg",
+      "CREATED_BY": "Opprettet av",
+      "CREATED_ON": "Opprettet",
+      "CREATED": "Opprettet"
+    },
+    "ACTIONS": {
+      "FOLDER": {
+        "COPY": "Kopier",
+        "MOVE": "Flytt",
+        "DELETE": "Slett"
+      },
+      "DOCUMENT": {
+        "DOWNLOAD": "Last ned",
+        "COPY": "Kopier",
+        "MOVE": "Flytt",
+        "DELETE": "Slett"
+      }
+    }
+  },
+  "ANALYTICS_REPORT": {
+    "NO_REPORT_MESSAGE": "Ingen rapport valgt. Velg en rapport fra listen"
+  },
+  "PS-TAB": {
+    "TASKS-TAB": "Oppgaver",
+    "PROCESSES-TAB": "Prosess",
+    "REPORTS-TAB": "Rapporter",
+    "START-TASK": "Start oppgave",
+    "START-PROCESS": "Start prosess",
+    "AUDIT-LOG": "Behandle revisjonslogg"
+  },
+  "FORM-LIST": {
+    "STORE": "Lagre",
+    "RESTORE": "Gjenopprett"
+  }
+}

demo-shell/resources/i18n/nl.json

@@ -0,0 +1,40 @@
+{
+  "title": "Welkom",
+  "DOCUMENT_LIST": {
+    "COLUMNS": {
+      "DISPLAY_NAME": "Getoonde naam",
+      "TAG": "Tag",
+      "CREATED_BY": "Gemaakt door",
+      "CREATED_ON": "Gemaakt op",
+      "CREATED": "Gemaakt"
+    },
+    "ACTIONS": {
+      "FOLDER": {
+        "COPY": "Kopiëren",
+        "MOVE": "Verplaatsen",
+        "DELETE": "Verwijderen"
+      },
+      "DOCUMENT": {
+        "DOWNLOAD": "Downloaden",
+        "COPY": "Kopiëren",
+        "MOVE": "Verplaatsen",
+        "DELETE": "Verwijderen"
+      }
+    }
+  },
+  "ANALYTICS_REPORT": {
+    "NO_REPORT_MESSAGE": "Geen rapport geselecteerd. Kies een rapport uit de lijst"
+  },
+  "PS-TAB": {
+    "TASKS-TAB": "Taken",
+    "PROCESSES-TAB": "Proces",
+    "REPORTS-TAB": "Rapporten",
+    "START-TASK": "Taak starten",
+    "START-PROCESS": "Proces starten",
+    "AUDIT-LOG": "Auditlog van proces"
+  },
+  "FORM-LIST": {
+    "STORE": "Opslaan",
+    "RESTORE": "Herstellen"
+  }
+}

demo-shell/resources/i18n/pt-BR.json

@@ -0,0 +1,40 @@
+{
+  "title": "Bem-vindo",
+  "DOCUMENT_LIST": {
+    "COLUMNS": {
+      "DISPLAY_NAME": "Nome de exibição",
+      "TAG": "Marca",
+      "CREATED_BY": "Criado por",
+      "CREATED_ON": "Criado em",
+      "CREATED": "Criado"
+    },
+    "ACTIONS": {
+      "FOLDER": {
+        "COPY": "Copiar",
+        "MOVE": "Mover",
+        "DELETE": "Excluir"
+      },
+      "DOCUMENT": {
+        "DOWNLOAD": "Download",
+        "COPY": "Copiar",
+        "MOVE": "Mover",
+        "DELETE": "Excluir"
+      }
+    }
+  },
+  "ANALYTICS_REPORT": {
+    "NO_REPORT_MESSAGE": "Nenhum relatório selecionado. Escolha um relatório na lista"
+  },
+  "PS-TAB": {
+    "TASKS-TAB": "Tarefas",
+    "PROCESSES-TAB": "Processo",
+    "REPORTS-TAB": "Relatórios",
+    "START-TASK": "Iniciar tarefa",
+    "START-PROCESS": "Iniciar processo",
+    "AUDIT-LOG": "Log de auditoria de processo"
+  },
+  "FORM-LIST": {
+    "STORE": "Armazenar",
+    "RESTORE": "Restaurar"
+  }
+}

demo-shell/resources/i18n/ru.json

@@ -0,0 +1,40 @@
+{
+  "title": "Приветствие",
+  "DOCUMENT_LIST": {
+    "COLUMNS": {
+      "DISPLAY_NAME": "Отображаемое имя",
+      "TAG": "Метка",
+      "CREATED_BY": "Создано пользователем",
+      "CREATED_ON": "Дата создания",
+      "CREATED": "Создано"
+    },
+    "ACTIONS": {
+      "FOLDER": {
+        "COPY": "Копировать",
+        "MOVE": "Переместить",
+        "DELETE": "Удалить"
+      },
+      "DOCUMENT": {
+        "DOWNLOAD": "Скачать",
+        "COPY": "Копировать",
+        "MOVE": "Переместить",
+        "DELETE": "Удалить"
+      }
+    }
+  },
+  "ANALYTICS_REPORT": {
+    "NO_REPORT_MESSAGE": "Отчет не выбран. Выберите отчет из списка"
+  },
+  "PS-TAB": {
+    "TASKS-TAB": "Задачи",
+    "PROCESSES-TAB": "Процесс",
+    "REPORTS-TAB": "Отчеты",
+    "START-TASK": "Начать задачу",
+    "START-PROCESS": "Начать процесс",
+    "AUDIT-LOG": "Журнал аудита процессов"
+  },
+  "FORM-LIST": {
+    "STORE": "Хранилище",
+    "RESTORE": "Восстановить"
+  }
+}

demo-shell/resources/i18n/zh-CN.json

@@ -0,0 +1,40 @@
+{
+  "title": "欢迎使用",
+  "DOCUMENT_LIST": {
+    "COLUMNS": {
+      "DISPLAY_NAME": "显示名称",
+      "TAG": "标签",
+      "CREATED_BY": "创建者",
+      "CREATED_ON": "创建日期",
+      "CREATED": "已创建"
+    },
+    "ACTIONS": {
+      "FOLDER": {
+        "COPY": "复制",
+        "MOVE": "移动",
+        "DELETE": "删除"
+      },
+      "DOCUMENT": {
+        "DOWNLOAD": "下载",
+        "COPY": "复制",
+        "MOVE": "移动",
+        "DELETE": "删除"
+      }
+    }
+  },
+  "ANALYTICS_REPORT": {
+    "NO_REPORT_MESSAGE": "未选择报告，请从列表中选择报告"
+  },
+  "PS-TAB": {
+    "TASKS-TAB": "任务",
+    "PROCESSES-TAB": "流程",
+    "REPORTS-TAB": "报告",
+    "START-TASK": "启动任务",
+    "START-PROCESS": "启动流程",
+    "AUDIT-LOG": "流程审计记录"
+  },
+  "FORM-LIST": {
+    "STORE": "存储",
+    "RESTORE": "恢复"
+  }
+}

demo-shell/src/app.config.json

@@ -0,0 +1,406 @@
+{
+    "ecmHost": "http://{hostname}:{port}",
+    "bpmHost": "http://{hostname}:{port}",
+    "application": {
+        "name": "Alfresco ADF Appplication"
+    },
+    "languages": [
+        {
+            "key": "en",
+            "label": "English"
+        },
+        {
+            "key": "fr",
+            "label": "French"
+        },
+        {
+            "key": "de",
+            "label": "German"
+        },
+        {
+            "key": "it",
+            "label": "Italian"
+        },
+        {
+            "key": "es",
+            "label": "Spanish"
+        },
+        {
+            "key": "ja",
+            "label": "Japanese"
+        },
+        {
+            "key": "nl",
+            "label": "Dutch"
+        },
+        {
+            "key": "pt-BR",
+            "label": "Brazilian Portuguese"
+        },
+        {
+            "key": "nb",
+            "label": "Norwegian"
+        },
+        {
+            "key": "ru",
+            "label": "Russian"
+        },
+        {
+            "key": "zh-CN",
+            "label": "Simplified Chinese"
+        }
+    ],
+    "pagination": {
+        "size": 25
+    },
+    "files": {
+        "excluded": [".DS_Store", "desktop.ini", ".git"]
+    },
+    "logLevel": "trace",
+    "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"
+                        }
+                    ]
+                }
+            ]
+        }
+    },
+    "document-list": {
+        "supportedPageSizes": [ 5, 10, 15, 20 ],
+        "presets": {
+            "-trashcan-": [
+                {
+                    "key": "$thumbnail",
+                    "type": "image",
+                    "srTitle": "ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL",
+                    "sortable": false
+                },
+                {
+                    "key": "name",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.NAME",
+                    "cssClass": "full-width ellipsis-cell",
+                    "sortable": true
+                },
+                {
+                    "key": "path",
+                    "type": "location",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.LOCATION",
+                    "format": "/files",
+                    "sortable": true
+                },
+                {
+                    "key": "content.sizeInBytes",
+                    "type": "fileSize",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.SIZE",
+                    "sortable": true
+                },
+                {
+                    "key": "archivedAt",
+                    "type": "date",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.DELETED_ON",
+                    "format": "timeAgo",
+                    "sortable": true
+                },
+                {
+                    "key": "archivedByUser.displayName",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.DELETED_BY",
+                    "sortable": true
+                }
+            ],
+            "-sites-": [
+                {
+                    "key": "$thumbnail",
+                    "type": "image",
+                    "srTitle": "ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL",
+                    "sortable": false
+                },
+                {
+                    "key": "title",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.NAME",
+                    "cssClass": "full-width ellipsis-cell",
+                    "sortable": true
+                },
+                {
+                    "key": "visibility",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.STATUS",
+                    "sortable": true
+                }
+            ],
+            "-mysites-": [
+                {
+                    "key": "$thumbnail",
+                    "type": "image",
+                    "srTitle": "ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL",
+                    "sortable": false
+                },
+                {
+                    "key": "title",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.NAME",
+                    "cssClass": "full-width ellipsis-cell",
+                    "sortable": true
+                },
+                {
+                    "key": "visibility",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.STATUS",
+                    "sortable": true
+                }
+            ],
+            "-favorites-": [
+                {
+                    "key": "$thumbnail",
+                    "type": "image",
+                    "srTitle": "ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL",
+                    "sortable": false
+                },
+                {
+                    "key": "name",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.NAME",
+                    "cssClass": "full-width ellipsis-cell",
+                    "sortable": true
+                },
+                {
+                    "key": "path",
+                    "type": "location",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.LOCATION",
+                    "format": "/files",
+                    "sortable": true
+                },
+                {
+                    "key": "content.sizeInBytes",
+                    "type": "fileSize",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.SIZE",
+                    "sortable": true
+                },
+                {
+                    "key": "modifiedAt",
+                    "type": "date",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_ON",
+                    "format": "timeAgo",
+                    "sortable": true
+                },
+                {
+                    "key": "modifiedByUser.displayName",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_BY",
+                    "sortable": true
+                }
+            ],
+            "-recent-": [
+                {
+                    "key": "$thumbnail",
+                    "type": "image",
+                    "srTitle": "ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL",
+                    "sortable": false
+                },
+                {
+                    "key": "name",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.NAME",
+                    "cssClass": "full-width ellipsis-cell",
+                    "sortable": true
+                },
+                {
+                    "key": "path",
+                    "type": "location",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.LOCATION",
+                    "cssClass": "ellipsis-cell",
+                    "format": "/files",
+                    "sortable": true
+                },
+                {
+                    "key": "content.sizeInBytes",
+                    "type": "fileSize",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.SIZE",
+                    "sortable": true
+                },
+                {
+                    "key": "modifiedAt",
+                    "type": "date",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_ON",
+                    "format": "timeAgo",
+                    "sortable": true
+                }
+            ],
+            "-sharedlinks-": [
+                {
+                    "key": "$thumbnail",
+                    "type": "image",
+                    "srTitle": "ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL",
+                    "sortable": false
+                },
+                {
+                    "key": "name",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.NAME",
+                    "cssClass": "full-width ellipsis-cell",
+                    "sortable": true
+                },
+                {
+                    "key": "path",
+                    "type": "location",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.LOCATION",
+                    "cssClass": "ellipsis-cell",
+                    "format": "/files",
+                    "sortable": true
+                },
+                {
+                    "key": "content.sizeInBytes",
+                    "type": "fileSize",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.SIZE",
+                    "sortable": true
+                },
+                {
+                    "key": "modifiedAt",
+                    "type": "date",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_ON",
+                    "format": "timeAgo",
+                    "sortable": true
+                },
+                {
+                    "key": "modifiedByUser.displayName",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_BY",
+                    "sortable": true
+                },
+                {
+                    "key": "sharedByUser.displayName",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.SHARED_BY",
+                    "sortable": true
+                }
+            ],
+            "default": [
+                {
+                    "key": "$thumbnail",
+                    "type": "image",
+                    "srTitle": "ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL",
+                    "sortable": false
+                },
+                {
+                    "key": "name",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.NAME",
+                    "cssClass": "full-width ellipsis-cell",
+                    "sortable": true
+                },
+                {
+                    "key": "content.sizeInBytes",
+                    "type": "fileSize",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.SIZE",
+                    "sortable": true
+                },
+                {
+                    "key": "modifiedAt",
+                    "type": "date",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_ON",
+                    "format": "timeAgo",
+                    "sortable": true
+                },
+                {
+                    "key": "modifiedByUser.displayName",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_BY",
+                    "sortable": true
+                }
+            ]
+        }
+    },
+    "adf-task-list": {
+        "supportedPageSizes": [ 5, 10, 15, 20 ],
+        "presets": {
+            "default": [
+                {
+                    "key": "name",
+                    "type": "text",
+                    "title": "ADF_TASK_LIST.PROPERTIES.NAME",
+                    "sortable": true
+                },
+                {
+                    "key": "noassignee",
+                    "type": "text",
+                    "title": "ADF_TASK_LIST.PROPERTIES.ASSIGNEE_DEFAULT",
+                    "cssClass": "hidden",
+                    "sortable": true
+                },
+                {
+                    "key": "nodueDate",
+                    "type": "text",
+                    "title": "ADF_TASK_LIST.PROPERTIES.DUE_DATE_DEFAULT",
+                    "cssClass": "hidden",
+                    "sortable": true
+                },
+                {
+                    "key": "nocategory",
+                    "type": "text",
+                    "title": "ADF_TASK_LIST.PROPERTIES.CATEGORY_DEFAULT",
+                    "cssClass": "hidden",
+                    "sortable": true
+                },
+                {
+                    "key": "noparentname",
+                    "type": "text",
+                    "title": "ADF_TASK_LIST.PROPERTIES.PARENT_NAME_DEFAULT",
+                    "cssClass": "hidden",
+                    "sortable": true
+                },
+                {
+                    "key": "nodescription",
+                    "type": "date",
+                    "title": "ADF_TASK_LIST.PROPERTIES.DESCRIPTION_DEFAULT",
+                    "cssClass": "hidden",
+                    "sortable": true
+                },
+                {
+                    "key": "noformName",
+                    "type": "date",
+                    "title": "ADF_TASK_LIST.PROPERTIES.FORM_NAME_DEFAULT",
+                    "cssClass": "hidden",
+                    "sortable": true
+                }
+            ]
+        }
+    },
+    "adf-process-list": {
+        "presets": {
+            "default": [
+                {
+                    "key": "name",
+                    "type": "text",
+                    "title": "ADF_PROCESS_LIST.PROPERTIES.NAME",
+                    "sortable": true
+                },
+                {
+                    "key": "created",
+                    "type": "text",
+                    "title": "ADF_PROCESS_LIST.PROPERTIES.CREATED",
+                    "cssClass": "hidden",
+                    "sortable": true
+                }
+            ]
+        }
+    }
+}

demo-shell/src/app/adf.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+
+import { ContentModule } from '@alfresco/content-services';
+import { ProcessModule } from '@alfresco/process-services';
+import { CoreModule } from '@alfresco/core';
+import { InsightsModule } from '@alfresco/insights';
+
+export function modules() {
+    return [
+        CoreModule,
+        ContentModule,
+        InsightsModule,
+        ProcessModule
+    ];
+}
+
+@NgModule({
+    imports: modules(),
+    exports: modules()
+})
+export class AdfModule {
+}

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

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

demo-shell/src/app/app.component.spec.ts

@@ -0,0 +1,32 @@
+import { TestBed, async } from '@angular/core/testing';
+
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it(`should have as title 'app works!'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app works!');
+  }));
+
+  it('should render title in a h1 tag', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('app works!');
+  }));
+});

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

@@ -0,0 +1,46 @@
+/*!
+ * @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, ViewEncapsulation } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { SettingsService, PageTitleService, StorageService, TranslationService } from '@alfresco/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
+  encapsulation: ViewEncapsulation.None
+})
+export class AppComponent {
+  searchTerm: string = '';
+
+  constructor(private settingsService: SettingsService,
+              private storage: StorageService,
+              translationService: TranslationService,
+              pageTitleService: PageTitleService,
+              route: ActivatedRoute,
+              router: Router) {
+    this.setProvider();
+    pageTitleService.setTitle();
+  }
+
+  private setProvider() {
+    if (this.storage.hasItem(`providers`)) {
+      this.settingsService.setProviders(this.storage.getItem(`providers`));
+    }
+  }
+}

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

@@ -0,0 +1,108 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { FlexLayoutModule } from '@angular/flex-layout';
+// import { Editor3DModule } from 'ng2-3d-editor';
+import { ChartsModule } from 'ng2-charts';
+import { HttpClientModule } from '@angular/common/http';
+import { TranslateService } from '@ngx-translate/core';
+
+import { AppConfigService, TRANSLATION_PROVIDER } from '@alfresco/core';
+import { AppComponent } from './app.component';
+import { AdfModule } from './adf.module';
+import { MaterialModule } from './material.module';
+import { LoginComponent } from './components/login/login.component';
+import { SettingsComponent } from './components/settings/settings.component';
+import { AppLayoutComponent } from './components/app-layout/app-layout.component';
+import { HomeComponent } from './components/home/home.component';
+import { SearchBarComponent } from './components/search/search-bar.component';
+import { SearchResultComponent } from './components/search/search-result.component';
+import { AboutComponent } from './components/about/about.component';
+import { FormComponent } from './components/form/form.component';
+import { FormListComponent } from './components/form/form-list.component';
+import { CustomSourcesComponent } from './components/files/custom-sources.component';
+
+import { ActivitiComponent } from './components/activiti/activiti.component';
+import { ActivitiTaskAttachmentsComponent } from './components/activiti/activiti-task-attachments.component';
+import { ActivitiProcessAttachmentsComponent } from './components/activiti/activiti-process-attachments.component';
+import { ActivitiShowDiagramComponent } from './components/activiti/activiti-show-diagram.component';
+import { FormViewerComponent } from './components/activiti/form-viewer.component';
+import { FormNodeViewerComponent } from './components/activiti/form-node-viewer.component';
+import { ActivitiAppsViewComponent } from './components/activiti/apps-view.component';
+import { DataTableComponent } from './components/datatable/datatable.component';
+import { FilesComponent } from './components/files/files.component';
+import { FileViewComponent } from './components/file-view/file-view.component';
+import { WebscriptComponent } from './components/webscript/webscript.component';
+import { TagComponent } from './components/tag/tag.component';
+import { SocialComponent } from './components/social/social.component';
+import { VersionManagerDialogAdapterComponent } from './components/files/version-manager-dialog-adapter.component';
+
+import { ThemePickerModule } from './components/theme-picker/theme-picker';
+import { DebugAppConfigService } from './services/debug-app-config.service';
+
+import { routing } from './app.routes';
+import { TranslateModule } from '@ngx-translate/core';
+import { ReactiveFormsModule } from '@angular/forms';
+
+
+@NgModule({
+    imports: [
+        ReactiveFormsModule,
+        TranslateModule,
+        BrowserModule,
+        routing,
+        FormsModule,
+        AdfModule,
+        MaterialModule,
+        ThemePickerModule,
+        FlexLayoutModule,
+        //Editor3DModule,
+        ChartsModule,
+        HttpClientModule
+    ],
+    declarations: [
+        AppComponent,
+        LoginComponent,
+        SettingsComponent,
+        AppLayoutComponent,
+        HomeComponent,
+        SearchBarComponent,
+        SearchResultComponent,
+        AboutComponent,
+        ActivitiComponent,
+        ActivitiTaskAttachmentsComponent,
+        ActivitiProcessAttachmentsComponent,
+        ActivitiShowDiagramComponent,
+        FormViewerComponent,
+        FormNodeViewerComponent,
+        ActivitiAppsViewComponent,
+        DataTableComponent,
+        FilesComponent,
+        FileViewComponent,
+        FormComponent,
+        FormListComponent,
+        WebscriptComponent,
+        TagComponent,
+        SocialComponent,
+        CustomSourcesComponent,
+        VersionManagerDialogAdapterComponent
+    ],
+    providers: [
+        TranslateService,
+        { provide: AppConfigService, useClass: DebugAppConfigService },
+        {
+            provide: TRANSLATION_PROVIDER,
+            multi: true,
+            useValue: {
+                name: 'app',
+                source: 'resources'
+            }
+        }
+    ],
+    entryComponents: [
+        VersionManagerDialogAdapterComponent
+    ],
+    bootstrap: [AppComponent]
+})
+export class AppModule {
+}

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

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

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

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

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

@@ -0,0 +1,49 @@
+<div class="about-container">
+    <h3>Server settings</h3>
+    <mat-list>
+        <small>The values below are taken from the AppConfigService and loaded from the '{{ configFile }}' file.</small>
+        <mat-list-item>
+            <h4 matLine> Alfresco Process Services URL: {{ bpmHost }}</h4>
+        </mat-list-item>
+        <mat-divider></mat-divider>
+        <mat-list-item>
+            <h4 matLine>Alfresco Content Services URL: {{ ecmHost }}</h4>
+        </mat-list-item>
+    </mat-list>
+
+    <h3>Product Versions</h3>
+    <div *ngIf="bpmVersion">
+        <h3>BPM</h3>
+        <label> Edition </label> {{ bpmVersion.edition }}
+        <p></p>
+        <label> Version </label> {{ bpmVersion.majorVersion }}.{{ bpmVersion.minorVersion }}.{{ bpmVersion.revisionVersion }}
+    </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>
+        <adf-datatable [data]="license"></adf-datatable>
+
+        <h4> Status</h4>
+        <adf-datatable [data]="status"></adf-datatable>
+
+        <h4>Modules</h4>
+
+        <adf-datatable [data]="modules"></adf-datatable>
+    </div>
+
+    <div *ngIf="githubUrlCommitAlpha">
+        <h3>Source code</h3>
+        <small>You are running the project based on the following commit:</small>
+        <div>
+            <a [href]="githubUrlCommitAlpha">{{githubUrlCommitAlpha}}</a>
+        </div>
+    </div>
+
+    <h3>Packages</h3>
+    <small>Current project is using the following ADF libraries:</small>
+    <adf-datatable [data]="data"></adf-datatable>
+</div>

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

@@ -0,0 +1,138 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, OnInit } from '@angular/core';
+import { Http } from '@angular/http';
+import {
+    AuthenticationService,
+    AppConfigService,
+    BpmProductVersionModel,
+    DiscoveryApiService,
+    EcmProductVersionModel,
+    ObjectDataTableAdapter
+} from '@alfresco/core';
+
+@Component({
+    selector: 'adf-about-page',
+    templateUrl: './about.component.html',
+    styleUrls: ['./about.component.css']
+})
+export class AboutComponent implements OnInit {
+
+    data: ObjectDataTableAdapter;
+    status: ObjectDataTableAdapter;
+    license: ObjectDataTableAdapter;
+    modules: ObjectDataTableAdapter;
+    githubUrlCommitAlpha: string = 'https://github.com/Alfresco/alfresco-ng2-components/commits/';
+
+    configFile: string = 'app.config.json';
+    ecmHost: string = '';
+    bpmHost: string = '';
+
+    ecmVersion: EcmProductVersionModel = null;
+    bpmVersion: BpmProductVersionModel = null;
+
+    constructor(private http: Http,
+                private appConfig: AppConfigService,
+                private authService: AuthenticationService,
+                private discovery: DiscoveryApiService) {
+    }
+
+    ngOnInit() {
+
+        if (this.authService.isEcmLoggedIn()) {
+            this.discovery.getEcmProductInfo().subscribe((ecmVers) => {
+                this.ecmVersion = ecmVers;
+
+                this.modules = new ObjectDataTableAdapter(this.ecmVersion.modules, [
+                    {type: 'text', key: 'id', title: 'ID', sortable: true},
+                    {type: 'text', key: 'title', title: 'Title', sortable: true},
+                    {type: 'text', key: 'version', title: 'Description', sortable: true},
+                    {type: 'text', key: 'installDate', title: 'Install Date', sortable: true},
+                    {type: 'text', key: 'installState', title: 'Install State', sortable: true},
+                    {type: 'text', key: 'versionMin', title: 'Version Minor', sortable: true},
+                    {type: 'text', key: 'versionMax', title: 'Version Max', sortable: true}
+                ]);
+
+                this.status = new ObjectDataTableAdapter([this.ecmVersion.status], [
+                    {type: 'text', key: 'isReadOnly', title: 'ReadOnly', sortable: true},
+                    {type: 'text', key: 'isAuditEnabled', title: 'Is Audit Enable', sortable: true},
+                    {type: 'text', key: 'isQuickShareEnabled', title: 'Is quick shared enable', sortable: true},
+                    {type: 'text', key: 'isThumbnailGenerationEnabled', title: 'Thumbnail Generation', sortable: true}
+                ]);
+
+                this.license = new ObjectDataTableAdapter([this.ecmVersion.license], [
+                    {type: 'text', key: 'issuedAt', title: 'Issued At', sortable: true},
+                    {type: 'text', key: 'expiresAt', title: 'Expires At', sortable: true},
+                    {type: 'text', key: 'remainingDays', title: 'Remaining Days', sortable: true},
+                    {type: 'text', key: 'holder', title: 'Holder', sortable: true},
+                    {type: 'text', key: 'mode', title: 'Is Cluster Enabled', sortable: true},
+                    {type: 'text', key: 'isClusterEnabled', title: 'Is Cluster Enabled', sortable: true},
+                    {type: 'text', key: 'isCryptodocEnabled', title: 'Is Cryptodoc Enable', sortable: true}
+                ]);
+            });
+        }
+
+        if (this.authService.isBpmLoggedIn()) {
+            this.discovery.getBpmProductInfo().subscribe((bpmVers) => {
+                this.bpmVersion = bpmVers;
+            });
+        }
+
+        this.http.get('/versions.json').subscribe(response => {
+            let regexp = new RegExp('^(@alfresco)');
+
+            let alfrescoPackages = Object.keys(response.json().dependencies).filter((val) => {
+                return regexp.test(val);
+            });
+
+            let alfrescoPackagesTableRepresentation = [];
+            alfrescoPackages.forEach((val) => {
+                alfrescoPackagesTableRepresentation.push({
+                    name: val,
+                    version: response.json().dependencies[val].version
+                });
+            });
+
+            this.gitHubLinkCreation(alfrescoPackagesTableRepresentation);
+
+            this.data = new ObjectDataTableAdapter(alfrescoPackagesTableRepresentation, [
+                {type: 'text', key: 'name', title: 'Name', sortable: true},
+                {type: 'text', key: 'version', title: 'Version', sortable: true}
+            ]);
+
+        });
+
+        this.ecmHost = this.appConfig.get<string>('ecmHost');
+        this.bpmHost = this.appConfig.get<string>('bpmHost');
+    }
+
+    private gitHubLinkCreation(alfrescoPackagesTableRepresentation): void {
+        let corePackage = alfrescoPackagesTableRepresentation.find((packageUp) => {
+            return packageUp.name === '@alfresco/core';
+        });
+
+        if (corePackage) {
+            let commitIsh = corePackage.version.split('-');
+            if (commitIsh.length > 1) {
+                this.githubUrlCommitAlpha = this.githubUrlCommitAlpha + commitIsh[1];
+            } else {
+                this.githubUrlCommitAlpha = this.githubUrlCommitAlpha + corePackage.version;
+            }
+        }
+    }
+}

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

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

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

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

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

@@ -0,0 +1,74 @@
+/*!
+ * @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, OnChanges, OnInit, ViewChild } from '@angular/core';
+import { ProcessInstance, ProcessService ,
+    ProcessAttachmentListComponent, ProcessUploadService } from '@alfresco/process-services';
+import { UploadService } from '@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, OnChanges {
+
+    @Input()
+    processId: string;
+
+    @ViewChild(ProcessAttachmentListComponent)
+    processAttachList: ProcessAttachmentListComponent;
+
+    fileShowed: boolean = false;
+    content: Blob;
+    contentName: string;
+    processInstance: ProcessInstance;
+
+    constructor(private uploadService: UploadService, private processService: ProcessService) {
+    }
+
+    ngOnInit() {
+        this.uploadService.fileUploadComplete.subscribe(value => this.onFileUploadComplete(value.data));
+    }
+
+    ngOnChanges() {
+        if (this.processId) {
+            this.processService.getProcess(this.processId).subscribe((processInstance: ProcessInstance) => {
+                this.processInstance = processInstance;
+            });
+        }
+    }
+
+    onFileUploadComplete(content: any) {
+        this.processAttachList.add(content);
+    }
+
+    onAttachmentClick(content: any): void {
+        this.fileShowed = true;
+        this.content = content.contentBlob;
+        this.contentName = content.name;
+    }
+
+    isCompletedProcess(): boolean {
+        return this.processInstance && this.processInstance.ended !== undefined && this.processInstance.ended !== null;
+    }
+
+}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,76 @@
+/*!
+ * @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, OnChanges, OnInit, ViewChild } from '@angular/core';
+import { ProcessUploadService, TaskListService, TaskAttachmentListComponent } from '@alfresco/process-services';
+import { UploadService } from '@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, OnChanges {
+
+    @Input()
+    taskId: string;
+
+    @ViewChild(TaskAttachmentListComponent)
+    taskAttachList: TaskAttachmentListComponent;
+
+    fileShowed: boolean = false;
+    content: Blob;
+    contentName: string;
+
+    taskDetails: any;
+
+    constructor(private uploadService: UploadService,
+                private activitiTaskList: TaskListService) {
+
+    }
+
+    ngOnInit() {
+        this.uploadService.fileUploadComplete.subscribe(value => this.onFileUploadComplete(value.data));
+    }
+
+    ngOnChanges() {
+        if (this.taskId) {
+            this.activitiTaskList.getTaskDetails(this.taskId).map((res) => res).subscribe(
+                (res: any) => {
+                    this.taskDetails = res;
+                });
+        }
+    }
+
+    onFileUploadComplete(content: any) {
+        this.taskAttachList.add(content);
+    }
+
+    onAttachmentClick(content: any): void {
+        this.fileShowed = true;
+        this.content = content.contentBlob;
+        this.contentName = content.name;
+    }
+
+    isCompletedTask(): boolean {
+        return this.taskDetails && this.taskDetails.endDate !== undefined && this.taskDetails.endDate !== null;
+    }
+}

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

@@ -0,0 +1,232 @@
+<mat-tab-group [(selectedIndex)]="activeTab">
+    <mat-tab id="tasks-header" href="#tasks" label="{{'PS-TAB.TASKS-TAB' | translate}}">
+        <div class="page-content">
+            <div class="activiti-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
+                <div class="activiti-grid-item activiti-tasks-menu" fxFlex.gt-md="225px">
+                    <div class="activiti-list-buttons">
+                        <button color="primary" mat-raised-button data-automation-id="btn-start-task" class="activiti-list-buttons-start" (click)="navigateStartTask()">
+                            <mat-icon>add</mat-icon>
+                            <span>{{'PS-TAB.START-TASK' | translate}}</span>
+                        </button>
+                    </div>
+                    <adf-accordion>
+                        <adf-accordion-group [heading]="'Tasks'" [isSelected]="true" [isOpen]="true"
+                                             [headingIcon]="'assignment'">
+                            <adf-filters
+                                [filterParam]="{name:'MY tasks'}"
+                                [appId]="appId"
+                                [hasIcon]="false"
+                                (filterClick)="onTaskFilterClick($event)"
+                                (success)="onSuccessTaskFilterList($event)"
+                                #activitifilter>
+                            </adf-filters>
+                        </adf-accordion-group>
+                    </adf-accordion>
+                </div>
+                <div class="activiti-grid-item activiti-tasks-list" fxFlex.gt-md="335px" [ngClass.gt-md]="{'small-pagination': true}"
+                     *ngIf="taskFilter && !isStartTaskMode()">
+                    <adf-tasklist
+                        [appId]="taskFilter?.appId"
+                        [presetColumn]="presetColoum"
+                        [page]="taskPage"
+                        [size]="taskPagination.maxItems"
+                        [processDefinitionKey]="taskFilter?.filter?.processDefinitionKey"
+                        [name]="taskFilter?.filter?.name"
+                        [assignment]="taskFilter?.filter?.assignment"
+                        [state]="taskFilter?.filter?.state"
+                        [sort]="taskFilter?.filter?.sort"
+                        [data]="dataTasks"
+                        [landingTaskId]="currentTaskId"
+                        (rowClick)="onTaskRowClick($event)"
+                        (success)="onSuccessTaskList($event)"
+                        (row-click)="onRowClick($event)"
+                        (row-dblclick)="onTaskRowDblClick($event)"
+                        #activititasklist>
+                        <!-- Custom column definition demo -->
+
+                        <!-- <data-columns>
+                            <data-column key="name" title="{{'ADF_TASK_LIST.PROPERTIES.NAME' | translate}}" class="full-width name-column"></data-column>
+                            <data-column key="created" title="{{'ADF_TASK_LIST.PROPERTIES.CREATED' | translate}}" class="hidden"></data-column>
+                        </data-columns> -->
+
+                    </adf-tasklist>
+
+                    <adf-pagination
+                        (changePageNumber)="onChangePageNumber($event)"
+                        (changePageSize)="onChangePageSize($event)"
+                        (nextPage)="onNextPage($event)"
+                        (prevPage)="onPrevPage($event)"
+                        [pagination]="taskPagination"
+                        [supportedPageSizes]="[2, 4, 6, 8, 10, 12]">
+                    </adf-pagination>
+                </div>
+                <div class="activiti-grid-item activiti-tasks-details" *ngIf="!isStartTaskMode()" fxFlex.gt-md="1 1 auto">
+                    <adf-task-details #activitidetails
+                                           [debugMode]="true"
+                                           [taskId]="currentTaskId"
+                                           [fieldValidators]="fieldValidators"
+                                           (formCompleted)="onFormCompleted($event)"
+                                           (formContentClicked)="onFormContentClick($event)"
+                                           (taskCreated)="onTaskCreated($event)"
+                                           (assignTask)="onAssignTask()"
+                                           (taskDeleted)="onTaskDeleted($event)">
+                    </adf-task-details>
+                    <hr>
+                    <div *ngIf="currentTaskId">
+                        {{'PS-TAB.AUDIT-LOG' | translate}}
+                        <button
+                            adf-task-audit
+                            [task-id]="currentTaskId"
+                            [download]="true"
+                            mat-icon-button (clicked)="onAuditClick($event)" (error)="onAuditError($event)">
+                            <mat-icon>assignment_ind</mat-icon>
+                        </button>
+                        <hr>
+                    </div>
+                    <mat-card>
+                        <mat-card-content>
+                            <adf-task-attachment-list
+                                [taskId]="currentTaskId">
+                            </adf-task-attachment-list>
+                        </mat-card-content>
+                    </mat-card>
+                </div>
+                <div class="activiti-grid-item activiti-tasks-start" *ngIf="isStartTaskMode()" fxFlex.gt-md="1 1 auto">
+                    <adf-start-task
+                        [appId]="appId"
+                        (success)="onStartTaskSuccess($event)"
+                        (cancel)="onCancelStartTask()">
+                    </adf-start-task>
+                </div>
+            </div>
+        </div>
+    </mat-tab>
+    <mat-tab id="processes-header" href="#processes"
+            label="{{'PS-TAB.PROCESSES-TAB' | translate}}">
+        <div class="page-content">
+            <div class="activiti-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
+                <div class="activiti-grid-item activiti-processes-menu" fxFlex.gt-md="225px">
+                    <div class="activiti-list-buttons">
+                        <button
+                            color="primary"
+                            mat-raised-button
+                            class="activiti-list-buttons-start"
+                            data-automation-id="btn-start-process"
+                            (click)="navigateStartProcess()">
+                            <mat-icon>add</mat-icon>
+                            <span>{{'PS-TAB.START-PROCESS' | translate}}</span>
+                        </button>
+                    </div>
+                    <adf-accordion>
+                        <adf-accordion-group [heading]="'Processes'" [isSelected]="true" [isOpen]="true"
+                                             [headingIcon]="'assessment'">
+                            <adf-process-instance-filters
+                                [filterParam]="{index: 0}"
+                                [appId]="appId"
+                                (filterClick)="onProcessFilterClick($event)"
+                                (success)="onSuccessProcessFilterList($event)">
+                            </adf-process-instance-filters>
+                        </adf-accordion-group>
+                    </adf-accordion>
+                </div>
+                <div class="activiti-grid-item activiti-processes-list activiti-list" fxFlex.gt-md="335px" [ngClass.gt-md]="{'small-pagination': true}"
+                     *ngIf="processFilter && !isStartProcessMode()">
+                    <adf-process-instance-list
+                        *ngIf="processFilter?.hasFilter()" [appId]="processFilter.appId"
+                        [processDefinitionKey]="processFilter.filter.processDefinitionKey"
+                        [name]="processFilter.filter.name"
+                        [presetColumn]="presetColoum"
+                        [state]="processFilter.filter.state"
+                        [sort]="processFilter.filter.sort"
+                        [data]="dataProcesses"
+                        (rowClick)="onProcessRowClick($event)"
+                        (row-dblclick)="onProcessRowDblClick($event)"
+                        (success)="onSuccessProcessList($event)">
+                        <!-- Custom column definition demo -->
+
+                        <!-- <data-columns>
+                            <data-column key="name" title="ADF_PROCESS_LIST.PROPERTIES.NAME" class="full-width name-column"></data-column>
+                            <data-column key="created" title="ADF_PROCESS_LIST.PROPERTIES.CREATED" class="hidden"></data-column>
+                        </data-columns> -->
+                        
+                    </adf-process-instance-list>
+                </div>
+                <div class="activiti-grid-item activiti-processes-details" *ngIf="!isStartProcessMode()" fxFlex.gt-md="1 1 auto">
+                    <adf-process-instance-details
+                        [processInstanceId]="currentProcessInstanceId"
+                        (processCancelled)="processCancelled()"
+                        (showProcessDiagram)="onShowProcessDiagram($event)"
+                        (taskClick)="onProcessDetailsTaskClick($event)">
+                    </adf-process-instance-details>
+                    <hr>
+                    <div *ngIf="currentProcessInstanceId">
+                        {{'PS-TAB.AUDIT-LOG' | translate}}
+                        <button adf-process-audit
+                                [process-id]="currentProcessInstanceId"
+                                [download]="true" mat-icon-button
+                                [format]="'pdf'"
+                                (clicked)="onAuditClick($event)"
+                                (error)="onAuditError($event)">
+                            <mat-icon>assignment_ind</mat-icon>
+                        </button>
+                        <hr>
+                    </div>
+                    <mat-card>
+
+                        <mat-card-content>
+                            <adf-process-attachment-list
+                                [processInstanceId]="currentProcessInstanceId">
+                            </adf-process-attachment-list>
+                        </mat-card-content>
+                    </mat-card>
+                </div>
+                <div class="activiti-grid-item activiti-processes-start" fxFlex.gt-md="1 1 auto"
+                     *ngIf="isStartProcessMode()">
+                    <adf-start-process
+                        [appId]="appId"
+                        (start)="onStartProcessInstance($event)"
+                        (cancel)="onCancelProcessInstance()">
+                    </adf-start-process>
+                </div>
+            </div>
+        </div>
+    </mat-tab>
+    <mat-tab id="report-header" href="#report"
+            label="{{'PS-TAB.REPORTS-TAB' | translate}}">
+        <div class="activiti-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
+            <div class="activiti-grid-item activiti-reports-menu" fxFlex.gt-md="300px">
+                <span><h5>Report List</h5></span>
+                <hr>
+                <analytics-report-list
+                    [appId]="appId"
+                    [selectFirst]="selectFirstReport"
+                    (reportClick)="onReportClick($event)"
+                    #analyticsreportlist>
+                </analytics-report-list>
+            </div>
+            <div class="activiti-grid-item activiti-reports-details" fxFlex.gt-md="1 1 auto">
+                <adf-analytics
+                    *ngIf="report"
+                    [appId]="appId"
+                    [reportId]="report.id"
+                    [hideParameters]="false"
+                    (editReport)="onEditReport($event)"
+                    (reportSaved)="onReportSaved($event)"
+                    (reportDeleted)="onReportDeleted()">
+                </adf-analytics>
+                <div *ngIf="!report">
+                    <span>{{'ANALYTICS_REPORT.NO_REPORT_MESSAGE' | translate}}</span>
+                </div>
+            </div>
+        </div>
+    </mat-tab>
+</mat-tab-group>
+
+<div *ngIf="fileShowed">
+    <adf-viewer
+        [(showViewer)]="fileShowed"
+        [blobFile]="content"
+        [displayName]="contentName"
+        [overlayMode]="true">
+    </adf-viewer>
+</div>

demo-shell/src/app/components/activiti/activiti.component.scss

@@ -0,0 +1,106 @@
+
+.adf-no-form-container {
+    text-align: center;
+    font-weight: 600;
+    font-size: 18px;
+}
+
+.activiti-grid {
+
+    .activiti-grid-item {
+        margin: 4px;
+        box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
+        padding: 10px;
+    }
+
+    .activiti-list-buttons {
+        margin-bottom: 24px;
+    }
+
+    .activiti-list-buttons-start {
+        width: 100%;
+    }
+
+    .activiti-tasks-list.small-pagination,
+    .activiti-processes-list.small-pagination {
+        .adf-pagination {
+
+            flex-wrap: wrap;
+            padding-bottom: 24px;
+            padding-top: 8px;
+
+            &__block {
+                border-right: none;
+            }
+
+            &__range-block.adf-pagination__block:first-child {
+                order: 1;
+                width: 60%;
+                flex: 0 0 auto;
+                box-sizing: border-box;
+                padding-left: 2px;
+                justify-content: flex-start;
+            }
+
+            &__perpage-block {
+                order: 3;
+                width: 60%;
+                box-sizing: border-box;
+                padding-left: 2px;
+                justify-content: flex-start;
+            }
+
+            &__actualinfo-block {
+                order: 2;
+                width: 40%;
+                box-sizing: border-box;
+                padding-right: 2px;
+                justify-content: flex-end;
+            }
+
+            &__controls-block {
+                order: 4;
+                width: 40%;
+                box-sizing: border-box;
+                padding-right: 2px;
+                justify-content: flex-end;
+            }
+        }
+    }
+
+    .activiti-list {
+        .adf-data-table {
+            border: none;
+        }
+
+        .adf-data-table tr,
+        .adf-data-table td {
+            height: 36px;
+            font-size: 14px;
+        }
+
+        .adf-data-table td {
+            padding-top: 0;
+            padding-bottom: 0;
+            border-bottom: none;
+        }
+
+        .adf-data-table th {
+            padding-top: 0;
+            padding-bottom: 0;
+            height: 40px;
+            vertical-align: middle;
+            font-size: 14px;
+        }
+    }
+
+    @media screen and (max-width: 1279px) {
+        container-widget .grid-list {
+            flex-direction: column;
+
+            .grid-list-item {
+                width: 100% !important;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,483 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// tslint:disable-next-line:adf-file-name
+import {
+    AfterViewInit,
+    Component,
+    ElementRef,
+    Input,
+    OnDestroy,
+    OnInit,
+    ViewChild,
+    ViewEncapsulation
+} from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Pagination, ProcessInstanceFilterRepresentation } from 'alfresco-js-api';
+import {
+    FORM_FIELD_VALIDATORS, FormEvent, FormFieldEvent, FormRenderingService, FormService,
+    DynamicTableRow, ValidateDynamicTableRowEvent
+} from '@alfresco/core';
+
+import { AnalyticsReportListComponent } from '@alfresco/insights';
+
+import {
+    ProcessFiltersComponent,
+    ProcessInstance,
+    ProcessInstanceDetailsComponent,
+    ProcessInstanceListComponent,
+    StartProcessInstanceComponent
+} from '@alfresco/process-services';
+import {
+    AppsListComponent,
+    FilterRepresentationModel,
+    TaskDetailsComponent,
+    TaskDetailsEvent,
+    TaskFiltersComponent,
+    TaskListComponent,
+    TaskListService
+} from '@alfresco/process-services';
+import { LogService } from '@alfresco/core';
+import { AlfrescoApiService } from '@alfresco/core';
+import {
+    DataSorting,
+    ObjectDataRow,
+    ObjectDataTableAdapter
+} from '@alfresco/core';
+import { Subscription } from 'rxjs/Rx';
+import { /*CustomEditorComponent*/ CustomStencil01 } from './custom-editor/custom-editor.component';
+import { DemoFieldValidator } from './demo-field-validator';
+
+const currentProcessIdNew = '__NEW__';
+const currentTaskIdNew = '__NEW__';
+
+@Component({
+    selector: 'adf-activiti',
+    templateUrl: './activiti.component.html',
+    styleUrls: ['./activiti.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class ActivitiComponent implements AfterViewInit, OnDestroy, OnInit {
+
+    @ViewChild(TaskFiltersComponent)
+    activitifilter: TaskFiltersComponent;
+
+    @ViewChild(TaskListComponent)
+    taskList: TaskListComponent;
+
+    @ViewChild(ProcessFiltersComponent)
+    activitiprocessfilter: ProcessFiltersComponent;
+
+    @ViewChild(ProcessInstanceListComponent)
+    processList: ProcessInstanceListComponent;
+
+    @ViewChild(ProcessInstanceDetailsComponent)
+    activitiprocessdetails: ProcessInstanceDetailsComponent;
+
+    @ViewChild(TaskDetailsComponent)
+    activitidetails: TaskDetailsComponent;
+
+    @ViewChild(StartProcessInstanceComponent)
+    activitiStartProcess: StartProcessInstanceComponent;
+
+    @ViewChild(AnalyticsReportListComponent)
+    analyticsreportlist: AnalyticsReportListComponent;
+
+    @Input()
+    appId: number = null;
+
+    fileShowed: boolean = false;
+    selectFirstReport: boolean = false;
+
+    private tabs = { tasks: 0, processes: 1, reports: 2 };
+
+    content: Blob;
+    contentName: string;
+
+    layoutType: string;
+    currentTaskId: string;
+    currentProcessInstanceId: string;
+
+    taskSchemaColumns: any[] = [];
+    taskPagination: Pagination = {
+        skipCount: 0,
+        maxItems: 10,
+        totalItems: 0
+    };
+    taskPage: number = 0;
+    processSchemaColumns: any[] = [];
+
+    activeTab: number = this.tabs.tasks; // tasks|processes|reports
+
+    taskFilter: FilterRepresentationModel;
+    report: any;
+    processFilter: ProcessInstanceFilterRepresentation;
+
+    sub: Subscription;
+    blobFile: any;
+    flag: boolean = true;
+
+    dataTasks: ObjectDataTableAdapter;
+    dataProcesses: ObjectDataTableAdapter;
+    presetColoum: string = 'default';
+
+    fieldValidators = [
+        ...FORM_FIELD_VALIDATORS,
+        new DemoFieldValidator()
+    ];
+
+    constructor(private elementRef: ElementRef,
+                private route: ActivatedRoute,
+                private router: Router,
+                private taskListService: TaskListService,
+                private apiService: AlfrescoApiService,
+                private logService: LogService,
+                formRenderingService: FormRenderingService,
+                formService: FormService) {
+        this.dataTasks = new ObjectDataTableAdapter();
+        this.dataTasks.setSorting(new DataSorting('created', 'desc'));
+
+        // Uncomment this line to replace all 'text' field editors with custom component
+        // formRenderingService.setComponentTypeResolver('text', () => CustomEditorComponent, true);
+
+        // Uncomment this line to map 'custom_stencil_01' to local editor component
+        formRenderingService.setComponentTypeResolver('custom_stencil_01', () => CustomStencil01, true);
+
+        formService.formLoaded.subscribe((e: FormEvent) => {
+            this.logService.log(`Form loaded: ${e.form.id}`);
+        });
+
+        formService.formFieldValueChanged.subscribe((e: FormFieldEvent) => {
+            this.logService.log(`Field value changed. Form: ${e.form.id}, Field: ${e.field.id}, Value: ${e.field.value}`);
+        });
+
+        formService.validateDynamicTableRow.subscribe(
+            (e: ValidateDynamicTableRowEvent) => {
+                const row: DynamicTableRow = e.row;
+                if (row && row.value && row.value.name === 'admin') {
+                    e.summary.isValid = false;
+                    e.summary.text = 'Sorry, wrong value. You cannot use "admin".';
+                    e.preventDefault();
+                }
+            }
+        );
+
+        // Uncomment this block to see form event handling in action
+        /*
+        formService.formEvents.subscribe((event: Event) => {
+            this.logService.log('Event fired:' + event.type);
+            this.logService.log('Event Target:' + event.target);
+        });
+        */
+    }
+
+    onPrevPage(pagination: Pagination): void {
+        this.taskPagination.skipCount = pagination.skipCount;
+        this.taskPage--;
+    }
+
+    onNextPage(pagination: Pagination): void {
+        this.taskPagination.skipCount = pagination.skipCount;
+        this.taskPage++;
+    }
+
+    onChangePageSize(pagination: Pagination): void {
+        const { skipCount, maxItems } = pagination;
+        this.taskPage = this.currentPage(skipCount, maxItems);
+        this.taskPagination.maxItems = maxItems;
+        this.taskPagination.skipCount = skipCount;
+    }
+
+    onChangePageNumber(pagination: Pagination): void {
+        const { maxItems, skipCount } = pagination;
+        this.taskPage = this.currentPage(skipCount, maxItems);
+        this.taskPagination.maxItems = maxItems;
+        this.taskPagination.skipCount = skipCount;
+    }
+
+    currentPage(skipCount: number, maxItems: number): number {
+        return (skipCount && maxItems) ? Math.floor(skipCount / maxItems) : 0;
+    }
+
+    ngOnInit() {
+        this.taskListService.tasksList$.subscribe(
+            (tasks) => {
+                this.taskPagination = {
+                    count: tasks.data.length,
+                    maxItems: this.taskPagination.maxItems,
+                    skipCount: this.taskPagination.skipCount,
+                    totalItems: tasks.total
+                };
+                this.logService.log({
+                    count: tasks.data.length,
+                    maxItems: this.taskPagination.maxItems,
+                    skipCount: this.taskPagination.skipCount,
+                    totalItems: tasks.total
+                });
+            }, (err) => {
+                this.logService.log('err' + err);
+            });
+
+        if (this.router.url.includes('processes')) {
+            this.activeTab = this.tabs.processes;
+        }
+        this.sub = this.route.params.subscribe(params => {
+            let applicationId = params['appId'];
+            if (applicationId && applicationId !== '0') {
+                this.appId = params['appId'];
+            }
+
+            this.taskFilter = null;
+            this.currentTaskId = null;
+            this.processFilter = null;
+            this.currentProcessInstanceId = null;
+        });
+        this.layoutType = AppsListComponent.LAYOUT_GRID;
+
+    }
+
+    ngOnDestroy() {
+        this.sub.unsubscribe();
+        this.taskListService.tasksList$.subscribe();
+    }
+
+    onTaskFilterClick(filter: FilterRepresentationModel): void {
+        this.applyTaskFilter(filter);
+    }
+
+    onReportClick(event: any): void {
+        this.report = event;
+    }
+
+    onSuccessTaskFilterList(event: any): void {
+        this.applyTaskFilter(this.activitifilter.getCurrentFilter());
+    }
+
+    applyTaskFilter(filter: FilterRepresentationModel) {
+        this.taskFilter = filter;
+        if (filter && this.taskList) {
+            this.taskList.hasCustomDataSource = false;
+        }
+    }
+
+    onStartTaskSuccess(event: any): void {
+        this.activitifilter.selectFilterWithTask(event.id);
+        this.currentTaskId = event.id;
+    }
+
+    onCancelStartTask() {
+        this.currentTaskId = null;
+        this.reloadTaskFilters();
+    }
+
+    onSuccessTaskList(event: FilterRepresentationModel) {
+        this.currentTaskId = this.taskList.getCurrentId();
+    }
+
+    onProcessFilterClick(event: ProcessInstanceFilterRepresentation): void {
+        this.currentProcessInstanceId = null;
+        this.processFilter = event;
+    }
+
+    onSuccessProcessFilterList(event: ProcessInstanceFilterRepresentation[]): void {
+        this.processFilter = this.activitiprocessfilter.getCurrentFilter();
+    }
+
+    onSuccessProcessList(event: any): void {
+        this.currentProcessInstanceId = this.processList.getCurrentId();
+    }
+
+    onTaskRowClick(taskId): void {
+        this.currentTaskId = taskId;
+    }
+
+    onTaskRowDblClick(event: CustomEvent) {
+        const taskId = event.detail.value.obj.id;
+        this.currentTaskId = taskId;
+    }
+
+    onProcessRowDblClick(event: CustomEvent) {
+        const processInstanceId = event.detail.value.obj.id;
+        this.currentProcessInstanceId = processInstanceId;
+    }
+
+    onProcessRowClick(processInstanceId): void {
+        this.currentProcessInstanceId = processInstanceId;
+    }
+
+    onEditReport(name: string): void {
+        this.analyticsreportlist.reload();
+    }
+
+    onReportSaved(reportId): void {
+        this.analyticsreportlist.reload(reportId);
+    }
+
+    onReportDeleted(): void {
+        this.analyticsreportlist.reload();
+        this.analyticsreportlist.selectReport(null);
+    }
+
+    navigateStartProcess(): void {
+        this.resetProcessFilters();
+        this.reloadProcessFilters();
+        this.currentProcessInstanceId = currentProcessIdNew;
+    }
+
+    navigateStartTask(): void {
+        this.resetTaskFilters();
+        this.reloadTaskFilters();
+        this.currentTaskId = currentTaskIdNew;
+    }
+
+    onStartProcessInstance(instance: ProcessInstance): void {
+        this.currentProcessInstanceId = instance.id;
+        this.activitiStartProcess.reset();
+        this.activitiprocessfilter.selectRunningFilter();
+    }
+
+    onCancelProcessInstance() {
+        this.currentProcessInstanceId = null;
+        this.reloadProcessFilters();
+    }
+
+    isStartProcessMode(): boolean {
+        return this.currentProcessInstanceId === currentProcessIdNew;
+    }
+
+    isStartTaskMode(): boolean {
+        return this.currentTaskId === currentTaskIdNew;
+    }
+
+    processCancelled(data: any): void {
+        this.currentProcessInstanceId = null;
+        this.processList.reload();
+    }
+
+    onSuccessNewProcess(data: any): void {
+        this.processList.reload();
+    }
+
+    onFormCompleted(form): void {
+        this.currentTaskId = null;
+        this.taskPagination.totalItems--;
+        const { skipCount, maxItems, totalItems } = this.taskPagination;
+        if (totalItems > 0 && (skipCount >= totalItems)) {
+            this.taskPagination.skipCount -= maxItems;
+        }
+        this.taskPage = this.currentPage(this.taskPagination.skipCount, maxItems);
+        if (this.taskList) {
+            this.taskList.reload();
+        }
+        if (this.processList) {
+            this.processList.reload();
+        }
+    }
+
+    onFormContentClick(content: any): void {
+        this.fileShowed = true;
+        this.content = content.contentBlob;
+        this.contentName = content.name;
+    }
+
+    onAuditClick(event: any) {
+        this.logService.log(event);
+    }
+
+    onAuditError(event: any): void {
+        this.logService.error('My custom error message' + event);
+    }
+
+    onTaskCreated(data: any): void {
+        this.currentTaskId = data.parentTaskId;
+        this.taskList.reload();
+    }
+
+    onTaskDeleted(data: any): void {
+        this.taskList.reload();
+    }
+
+    ngAfterViewInit() {
+        this.loadStencilScriptsInPageFromActiviti();
+    }
+
+    loadStencilScriptsInPageFromActiviti() {
+        this.apiService.getInstance().activiti.scriptFileApi.getControllers().then(response => {
+            if (response) {
+                let s = document.createElement('script');
+                s.type = 'text/javascript';
+                s.text = response;
+                this.elementRef.nativeElement.appendChild(s);
+            }
+        });
+    }
+
+    onShowProcessDiagram(event: any): void {
+        this.router.navigate(['/activiti/apps/' + this.appId + '/diagram/' + event.value]);
+    }
+
+    onProcessDetailsTaskClick(event: TaskDetailsEvent): void {
+        event.preventDefault();
+        this.activeTab = this.tabs.tasks;
+
+        const taskId = event.value.id;
+        const processTaskDataRow = new ObjectDataRow({
+            id: taskId,
+            name: event.value.name || 'No name',
+            created: event.value.created
+        });
+        this.activitifilter.selectFilter(null);
+        if (this.taskList) {
+            this.taskList.setCustomDataSource([processTaskDataRow]);
+            this.taskList.selectTask(taskId);
+        }
+        this.currentTaskId = taskId;
+    }
+
+    private resetProcessFilters(): void {
+        this.processFilter = null;
+    }
+
+    private resetTaskFilters(): void {
+        this.taskFilter = null;
+    }
+
+    private reloadProcessFilters(): void {
+        this.activitiprocessfilter.selectFilter(this.activitiprocessfilter.getCurrentFilter());
+    }
+
+    private reloadTaskFilters(): void {
+        this.activitifilter.selectFilter(this.activitifilter.getCurrentFilter());
+    }
+
+    onRowClick(event): void {
+        this.logService.log(event);
+    }
+
+    onRowDblClick(event): void {
+        this.logService.log(event);
+    }
+
+    isTaskCompleted(): boolean {
+        return this.activitidetails.isCompletedTask();
+    }
+
+    onAssignTask() {
+        this.taskList.reload();
+        this.currentTaskId = null;
+    }
+}

demo-shell/src/app/components/activiti/apps-view.component.html

@@ -0,0 +1 @@
+<adf-apps (appClick)="onAppClicked($event)"></adf-apps>

demo-shell/src/app/components/activiti/apps-view.component.ts

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

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

@@ -0,0 +1,54 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* tslint:disable */
+
+import { Component, NgModule } from '@angular/core';
+import { WidgetComponent } from '@alfresco/core';
+
+@Component({
+    selector: 'custom-editor',
+    template: `
+        <div style="color: red">Look, I'm a custom editor!</div>
+    `
+})
+export class CustomEditorComponent extends WidgetComponent {
+
+    constructor() {
+        super();
+    }
+}
+
+@Component({
+    selector: 'custom-stencil-01',
+    template: `<div style="color: green">ADF version of custom Activiti stencil</div>`
+})
+export class CustomStencil01 extends WidgetComponent {
+
+    constructor() {
+        super();
+    }
+}
+
+@NgModule({
+    declarations: [ CustomEditorComponent, CustomStencil01 ],
+    exports: [ CustomEditorComponent, CustomStencil01 ],
+    entryComponents: [ CustomEditorComponent, CustomStencil01 ]
+})
+export class CustomEditorsModule {
+
+}

demo-shell/src/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 '@alfresco/core';
+
+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.message = 'Sorry, the value cannot be "admin".';
+                return false;
+            }
+        }
+        return true;
+    }
+
+}

demo-shell/src/app/components/activiti/form-node-viewer.component.css

@@ -0,0 +1,3 @@
+.activiti-form-viewer {
+    margin: 10px;
+}

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

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

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

@@ -0,0 +1,46 @@
+/*!
+ * @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, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Subscription } from 'rxjs/Rx';
+
+@Component({
+    selector: 'form-node-viewer',
+    templateUrl: './form-node-viewer.component.html',
+    styleUrls: ['./form-node-viewer.component.css']
+})
+export class FormNodeViewerComponent implements OnInit, OnDestroy {
+
+    nodeId: string;
+
+    private sub: Subscription;
+
+    constructor(private route: ActivatedRoute) {
+    }
+
+    ngOnInit() {
+        this.sub = this.route.params.subscribe(params => {
+            this.nodeId = params['id'];
+        });
+    }
+
+    ngOnDestroy() {
+        this.sub.unsubscribe();
+    }
+
+}

demo-shell/src/app/components/activiti/form-viewer.component.css

@@ -0,0 +1,3 @@
+.activiti-form-viewer {
+    margin: 10px;
+}

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

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

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

@@ -0,0 +1,46 @@
+/*!
+ * @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, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Subscription } from 'rxjs/Rx';
+
+@Component({
+    selector: 'form-viewer',
+    templateUrl: './form-viewer.component.html',
+    styleUrls: ['./form-viewer.component.css']
+})
+export class FormViewerComponent implements OnInit, OnDestroy {
+
+    taskId: string;
+
+    private sub: Subscription;
+
+    constructor(private route: ActivatedRoute) {
+    }
+
+    ngOnInit() {
+        this.sub = this.route.params.subscribe(params => {
+            this.taskId = params['id'];
+        });
+    }
+
+    ngOnDestroy() {
+        this.sub.unsubscribe();
+    }
+
+}

demo-shell/src/app/components/app-layout/app-layout.component.html

@@ -0,0 +1,47 @@
+<mat-sidenav-container class="adf-nav-container">
+    <mat-sidenav #sidenav class="adf-sidenav" position="end" mode="push">
+        <mat-nav-list>
+            <a mat-list-item *ngFor="let link of links" [routerLink]="link.href" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" (click)="sidenav.close()" class="adf-sidenav-link">
+                <mat-icon matListIcon>{{link.icon}}</mat-icon>
+                <span>{{link.title | translate }}</span>
+            </a>
+            <a mat-list-item adf-logout (click)="sidenav.close()">
+                <mat-icon matListIcon>exit_to_app</mat-icon>
+                <span>Logout</span>
+            </a>
+        </mat-nav-list>
+    </mat-sidenav>
+
+    <mat-toolbar color="primary" class="adf-app-layout-toolbar" md-no-ink>
+        <adf-userinfo
+            class="adf-app-layout-user-profile"
+            [menuPositionX]="'before'"
+            [menuPositionY]="'above'">
+        </adf-userinfo>
+
+        <span fxFlex="1 1 auto" fxShow fxHide.lt-sm="true">{{'APP_LAYOUT.APP_NAME' | translate }}</span>
+
+        <div class="adf-app-layout-menu-spacer"></div>
+
+        <adf-search-bar class="adf-search-bar-overflow" fxFlex="0 1 auto"></adf-search-bar>
+
+        <a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" mat-button data-automation-id="home" href="" routerLink="/home" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">{{'APP_LAYOUT.HOME' | translate }}</a>
+        <a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" mat-button data-automation-id="files" href="" routerLink="/files" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">{{'APP_LAYOUT.CONTENT_SERVICES' | translate }}</a>
+        <a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true"  mat-button data-automation-id="activiti" href="" routerLink="/activiti" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">{{'APP_LAYOUT.PROCESS_SERVICES' | translate }}</a>
+        <a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" mat-button data-automation-id="login" href="" routerLink="/login">Login</a>
+
+        <theme-picker></theme-picker>
+        <button mat-icon-button [matMenuTriggerFor]="langMenu">
+            <mat-icon>language</mat-icon>
+        </button>
+        <mat-menu #langMenu="matMenu">
+            <adf-language-menu></adf-language-menu>
+        </mat-menu>
+
+        <button mat-icon-button (click)="sidenav.open()">
+            <mat-icon>menu</mat-icon>
+        </button>
+    </mat-toolbar>
+
+    <router-outlet></router-outlet>
+</mat-sidenav-container>

demo-shell/src/app/components/app-layout/app-layout.component.scss

@@ -0,0 +1,73 @@
+@mixin adf-app-layout-theme($theme) {
+  $primary: map-get($theme, primary);
+  $minimumAppWidth: 320px;
+  $toolbarHeight: 64px;
+
+  .adf-app-layout {
+    display: block;
+    min-width: $minimumAppWidth;
+    height: 100%;
+
+    .adf-nav-container {
+      display: block;
+      min-width: $minimumAppWidth;
+      height: 100%;
+    }
+
+    .adf-sidenav-link {
+      &.active {
+        color: mat-color($primary);
+      }
+    }
+
+    .adf-search-bar-overflow {
+        overflow: hidden;
+    }
+
+    &-user-profile {
+      margin-right: 10px;
+    }
+
+    &-menu-spacer {
+      flex: 1 1 auto;
+    }
+
+    &-toolbar {
+      height: $toolbarHeight;
+      line-height: $toolbarHeight;
+      overflow: hidden;
+
+      mat-toolbar-row {
+        height: $toolbarHeight;
+        align-items: stretch;
+        justify-content: space-between;
+      }
+
+      .adf-toolbar-link {
+        min-width: 0;
+        line-height: $toolbarHeight;
+
+        &.active {
+          background-color: rgba(0, 0, 0, .12);
+        }
+      }
+    }
+  }
+
+  @media screen and  ($mat-small) {
+    .adf-userinfo-name {
+      display: none;
+    }
+
+    .adf-search-bar-overflow {
+        padding-right: 4px;
+    }
+  }
+
+  @media screen and ($mat-xsmall) {
+      .adf-search-bar-overflow {
+          padding-right: 16px;
+      }
+  }
+
+}

demo-shell/src/app/components/app-layout/app-layout.component.ts

@@ -0,0 +1,48 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    templateUrl: 'app-layout.component.html',
+    styleUrls: ['app-layout.component.scss'],
+    host: {
+        'class': 'adf-app-layout'
+    },
+    encapsulation: ViewEncapsulation.None
+})
+export class AppLayoutComponent {
+
+    links: Array<any> = [
+        { href: '/home', icon: 'home', title: 'APP_LAYOUT.HOME' },
+        { href: '/files', icon: 'folder_open', title: 'APP_LAYOUT.CONTENT_SERVICES' },
+        { href: '/activiti', icon: 'device_hub', title: 'APP_LAYOUT.PROCESS_SERVICES' },
+        { href: '/login', icon: 'vpn_key', title: 'APP_LAYOUT.LOGIN' },
+        { href: '/dl-custom-sources', icon: 'extension', title: 'APP_LAYOUT.CUSTOM_SOURCES' },
+        { href: '/datatable', icon: 'view_module', title: 'APP_LAYOUT.DATATABLE' },
+        { href: '/form', icon: 'poll', title: 'APP_LAYOUT.FORM' },
+        { href: '/form-list', icon: 'library_books', title: 'APP_LAYOUT.FORM_LIST' },
+        { href: '/uploader', icon: 'file_upload', title: 'APP_LAYOUT.UPLOADER' },
+        { href: '/webscript', icon: 'extension', title: 'APP_LAYOUT.WEBSCRIPT' },
+        { href: '/tag', icon: 'local_offer', title: 'APP_LAYOUT.TAG' },
+        { href: '/social', icon: 'thumb_up', title: 'APP_LAYOUT.SOCIAL' },
+        { href: '/settings', icon: 'settings', title: 'APP_LAYOUT.SETTINGS' },
+        { href: '/about', icon: 'info_outline', title: 'APP_LAYOUT.ABOUT' }
+    ];
+
+    constructor(){};
+}

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

@@ -0,0 +1,43 @@
+<div class="p-10">
+    <adf-datatable
+        [data]="data"
+        [selectionMode]="selectionMode"
+        [multiselect]="multiselect"
+        [actions]="true"
+        rowStyleClass="custom-row-style"
+        (showRowActionsMenu)="onShowRowActionsMenu($event)"
+        (executeRowAction)="onExecuteRowAction($event)"
+        (row-click)="onRowClick($event)"
+        (row-dblclick)="onRowDblClick($event)">
+        <!-- HTML column definition demo -->
+        <!--
+        <data-columns>
+            <data-column type="image" key="icon" [sortable]="false"></data-column>
+            <data-column key="id" title="Id"></data-column>
+            <data-column key="createdOn" title="Created"></data-column>
+            <data-column key="name" title="Name" class="full-width name-column"></data-column>
+            <data-column key="createdBy.name" title="Created By"></data-column>
+        </data-columns>
+        -->
+    </adf-datatable>
+</div>
+<div class="p-10" data-automation-id="multiselect">
+    <mat-checkbox [(ngModel)]="multiselect">{{ 'DATATABLE.MULTISELECT'| translate }}</mat-checkbox>
+</div>
+<div class="p-10">
+    <p>{{ 'DATATABLE.MULTISELECT_DESCRIPTION'| translate }}</p>
+    <mat-form-field>
+        <mat-select placeholder="Selection Mode" [(ngModel)]="selectionMode" name="food">
+            <mat-option *ngFor="let mode of selectionModes" [value]="mode.value">
+                {{mode.viewValue}}
+            </mat-option>
+        </mat-select>
+    </mat-form-field>
+</div>
+<div class="p-10">
+    <button mat-raised-button (click)="reset()">{{ 'DATATABLE.RESET_DEFAULT'| translate }}</button>
+    <button mat-raised-button (click)="addRow()">{{ 'DATATABLE.ADD_ROW'| translate }}</button>
+    <button mat-raised-button (click)="replaceRows()">{{ 'DATATABLE.REPLACE_ROWS'| translate }}</button>
+    <button mat-raised-button (click)="replaceColumns()">{{ 'DATATABLE.REPLACE_COLUMNS'| translate }}</button>
+    <button mat-raised-button (click)="getRowForNode()">{{ 'DATATABLE.LOAD_NODE'| translate }}</button>
+</div>

demo-shell/src/app/components/datatable/datatable.component.scss

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

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

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

@@ -0,0 +1,36 @@
+<ng-container *ngIf="nodeId">
+    <adf-viewer [fileNodeId]="nodeId" [allowSidebar]="true">
+
+      <!--
+      <adf-viewer-extension [supportedExtensions]="['json']">
+        <ng-template let-urlFileContent="urlFileContent" let-extension="extension">
+          <h1>JSON VIEWER</h1>
+        </ng-template>
+      </adf-viewer-extension>
+      -->
+
+      <!--
+      <adf-viewer-extension [supportedExtensions]="['png']">
+        <ng-template>
+          <h1>PNG Viewer</h1>
+        </ng-template>
+      </adf-viewer-extension>
+      -->
+
+      <!--
+      <adf-viewer-extension [supportedExtensions]="['pdf']">
+        <ng-template>
+          <h1>PDF Viewer</h1>
+        </ng-template>
+      </adf-viewer-extension>
+      -->
+
+      <!--
+      <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>
+      -->
+    </adf-viewer>
+</ng-container>

demo-shell/src/app/components/file-view/file-view.component.ts

@@ -0,0 +1,53 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { AlfrescoApiService } from '@alfresco/core';
+
+@Component({
+    selector: 'adf-file-view',
+    templateUrl: 'file-view.component.html'
+})
+export class FileViewComponent implements OnInit {
+
+    nodeId: string = null;
+
+    constructor(
+        private router: Router,
+        private route: ActivatedRoute,
+        private apiService: AlfrescoApiService) {}
+
+    ngOnInit() {
+        this.route.params.subscribe(params => {
+            const id = params.nodeId;
+            if (id) {
+                this.apiService.getInstance().nodes.getNodeInfo(id).then(
+                    (node) => {
+                        if (node && node.isFile) {
+                            this.nodeId = id;
+                            return;
+                        }
+                        this.router.navigate(['/files', id]);
+                    },
+                    () => this.router.navigate(['/files', id])
+                );
+            }
+        });
+    }
+
+}

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

@@ -0,0 +1,27 @@
+<adf-toolbar>
+    <adf-toolbar-title>
+        <mat-form-field>
+            <mat-select [(ngModel)]="selectedSource">
+                <mat-option *ngFor="let source of sources" [value]="source.value">
+                    {{ source.title }}
+                </mat-option>
+            </mat-select>
+        </mat-form-field>
+    </adf-toolbar-title>
+
+    <div fxFlex="0 1 auto" class="adf-document-action-buttons" fxShow fxHide.lt-sm="true">
+        <button mat-icon-button
+                (restore)="documentList.reload()"
+                [disabled]="!documentList.selection.length"
+                *ngIf="selectedSource === '-trashcan-'"
+                location="/files"
+                [adf-restore]="documentList.selection">
+            <mat-icon>restore</mat-icon>
+        </button>
+    </div>
+</adf-toolbar>
+<adf-document-list
+    [currentFolderId]="selectedSource"
+    locationFormat="/files"
+    selectionMode="multiple">
+</adf-document-list>

demo-shell/src/app/components/files/custom-sources.component.ts

@@ -0,0 +1,44 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, Input, ViewChild } from '@angular/core';
+import { DocumentListComponent } from '@alfresco/content-services';
+
+@Component({
+    selector: 'adf-custom-sources',
+    templateUrl: 'custom-sources.component.html'
+})
+export class CustomSourcesComponent {
+
+    @Input()
+    selectedSource = '-recent-';
+
+    @ViewChild(DocumentListComponent)
+    documentList: DocumentListComponent;
+
+    sources = [
+        { title: 'Favorites', value: '-favorites-' },
+        { title: 'Recent', value: '-recent-' },
+        { title: 'Shared Links', value: '-sharedlinks-' },
+        { title: 'Sites', value: '-sites-' },
+        { title: 'My Sites', value: '-mysites-' },
+        { title: 'Trashcan', value: '-trashcan-' },
+        { title: 'Root', value: '-root-' },
+        { title: 'My', value: '-my-' },
+        { title: 'Shared', value: '-shared-' }
+    ];
+}

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

@@ -0,0 +1,401 @@
+<div class="container">
+    <div class="adf-site-container-style" id="site-container">
+        <adf-sites-dropdown (change)="getSiteContent($event)" [hideMyFiles]="false">
+        </adf-sites-dropdown>
+    </div>
+    <div class="document-list-container" fxLayout="row" fxLayoutAlign="start stretch" fxLayoutGap="16px">
+        <adf-upload-drag-area fxFlex="1 1 auto"
+            [parentId]="getDocumentListCurrentFolderId()"
+            [versioning]="versioning"
+            [adf-node-permission]="'create'"
+            [adf-nodes]="getCurrentDocumentListNode()">
+            <div *ngIf="errorMessage" class="error-message">
+                <button (click)="resetError()" mat-icon-button>
+                    <mat-icon>highlight_off</mat-icon>
+                </button>
+                <span class="error-message--text">{{errorMessage}}</span>
+            </div>
+            <adf-toolbar [color]="toolbarColor" class="adf-files-toolbar">
+                <adf-toolbar-title fxFlex="0 1 auto">
+                    <adf-breadcrumb fxShow fxHide.lt-sm="true"
+                                    class="files-breadcrumb"
+                                    root="Personal Files"
+                                    [target]="documentList"
+                                    [folderNode]="documentList.folderNode">
+                    </adf-breadcrumb>
+                    <adf-dropdown-breadcrumb fxHide fxShow.lt-sm="true"
+                                             class="files-breadcrumb"
+                                             [target]="documentList"
+                                             [folderNode]="documentList.folderNode">
+                    </adf-dropdown-breadcrumb>
+                </adf-toolbar-title>
+
+                <adf-toolbar-divider fxFlex="0 0 auto"></adf-toolbar-divider>
+
+                <div fxFlex="0 0 auto" class="adf-document-action-buttons" fxShow fxHide.lt-sm="true">
+                    <button mat-icon-button
+                            [adf-create-folder]="getDocumentListCurrentFolderId()">
+                        <mat-icon>create_new_folder</mat-icon>
+                    </button>
+                    <button mat-icon-button
+                            [disabled]="!canEditFolder(documentList.selection)"
+                            [adf-edit-folder]="documentList.selection[0]?.entry">
+                        <mat-icon>create</mat-icon>
+                    </button>
+                    <button mat-icon-button
+                            [disabled]="!hasSelection(documentList.selection)"
+                            title="Download"
+                            (click)="downloadNodes(documentList.selection)">
+                        <mat-icon>get_app</mat-icon>
+                    </button>
+                    <button mat-icon-button
+                            adf-node-permission="delete"
+                            [adf-nodes]="documentList.selection"
+                            (delete)="documentList.reload()"
+                            [adf-delete]="documentList.selection">
+                        <mat-icon>delete</mat-icon>
+                    </button>
+                    <button mat-icon-button
+                            [disabled]="!documentList.selection.length"
+                            #favorite="adfFavorite"
+                            [adf-node-favorite]="documentList.selection">
+                        <mat-icon>
+                            {{ favorite.hasFavorites() ? 'star' :'star_border' }}
+                        </mat-icon>
+                    </button>
+                </div>
+
+                <button fxFlex="1 0 auto" mat-icon-button [matMenuTriggerFor]="themePicker">
+                    <mat-icon>format_color_fill</mat-icon>
+                </button>
+
+                <mat-menu #themePicker="matMenu">
+                    <button mat-menu-item (click)="toolbarColor = 'default'">Default</button>
+                    <button mat-menu-item (click)="toolbarColor = 'primary'">Primary</button>
+                    <button mat-menu-item (click)="toolbarColor = 'accent'">Accent</button>
+                    <button mat-menu-item (click)="toolbarColor = 'warn'">Warn</button>
+                </mat-menu>
+
+                <button mat-icon-button (click)="showVersions = !showVersions">
+                    <mat-icon *ngIf="!showVersions">chevron_left</mat-icon>
+                    <mat-icon *ngIf="showVersions">chevron_right</mat-icon>
+                </button>
+
+                <adf-toolbar-divider fxFlex="0 0 auto" fxHide fxShow.lt-sm="true"></adf-toolbar-divider>
+
+                <button fxFlex="0 0 auto" mat-icon-button [matMenuTriggerFor]="menu" fxHide fxShow.lt-sm="true">
+                    <mat-icon>more_vert</mat-icon>
+                </button>
+                <mat-menu #menu="matMenu">
+                    <button mat-menu-item
+                            [adf-create-folder]="getDocumentListCurrentFolderId()">
+                        <mat-icon>create_new_folder</mat-icon>
+                        <span>New folder</span>
+                    </button>
+                    <button mat-menu-item
+                            [disabled]="!canEditFolder(documentList.selection)"
+                            [adf-edit-folder]="documentList.selection[0]?.entry">
+                        <mat-icon>create</mat-icon>
+                        <span>Edit folder</span>
+                    </button>
+                    <button mat-menu-item
+                            [disabled]="!hasSelection(documentList.selection)"
+                            title="Download"
+                            (click)="downloadNodes(documentList.selection)">
+                        <mat-icon>get_app</mat-icon>
+                        <span>Download</span>
+                    </button>
+                    <button mat-menu-item
+                            adf-node-permission="delete"
+                            [adf-nodes]="documentList.selection">
+                        <mat-icon>delete</mat-icon>
+                        <span>Delete</span>
+                    </button>
+                </mat-menu>
+            </adf-toolbar>
+            <adf-document-list
+                #documentList
+                [permissionsStyle]="permissionsStyle"
+                [currentFolderId]="currentFolderId"
+                [contextMenuActions]="true"
+                [contentActions]="true"
+                [allowDropFiles]="true"
+                [selectionMode]="selectionMode"
+                [multiselect]="multiselect"
+                [node]="nodeResult"
+                (error)="onNavigationError($event)"
+                (success)="resetError()"
+                (ready)="emitReadyEvent($event)"
+                (preview)="showFile($event)"
+                (folderChange)="onFolderChange($event)"
+                (permissionError)="handlePermissionError($event)">
+                <data-columns>
+                    <data-column
+                        key="$thumbnail"
+                        type="image"
+                        [sortable]="false"
+                        class="image-table-cell">
+                    </data-column>
+                    <data-column
+                        key="name"
+                        title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
+                        [formatTooltip]="getNodeNameTooltip"
+                        class="full-width ellipsis-cell">
+                    </data-column>
+                    <!-- Location column demo -->
+                    <!--
+                    <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 -->
+                    <!--
+                    <data-column
+                        title="{{'DOCUMENT_LIST.COLUMNS.TAG' | translate}}"
+                        key="id"
+                        class="full-width ellipsis-cell">
+                        <ng-template let-entry="$implicit">
+                            <alfresco-tag-node-list  [nodeId]="entry.data.getValue(entry.row, entry.col)"></alfresco-tag-node-list>
+                        </ng-template>
+                    </data-column>
+                    -->
+                    <data-column
+                        title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
+                        key="createdByUser.displayName"
+                        class="desktop-only">
+                    </data-column>
+                    <data-column
+                        title="{{'DOCUMENT_LIST.COLUMNS.CREATED' | translate}}"
+                        key="createdAt"
+                        type="date"
+                        format="timeAgo"
+                        class="desktop-only">
+                    </data-column>
+                </data-columns>
+
+                <content-actions>
+                    <!-- folder actions -->
+                    <content-action
+                        icon="content_copy"
+                        target="folder"
+                        title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.COPY' | translate}}"
+                        permission="update"
+                        [disableWithNoPermission]="true"
+                        (error)="onContentActionError($event)"
+                        (success)="onContentActionSuccess($event)"
+                        handler="copy">
+                    </content-action>
+                    <content-action
+                        icon="redo"
+                        target="folder"
+                        title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.MOVE' | translate}}"
+                        permission="update"
+                        [disableWithNoPermission]="true"
+                        (error)="onContentActionError($event)"
+                        (success)="onContentActionSuccess($event)"
+                        handler="move">
+                    </content-action>
+                    <content-action
+                        icon="delete"
+                        target="folder"
+                        permission="delete"
+                        [disableWithNoPermission]="true"
+                        title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.DELETE' | translate}}"
+                        (permissionEvent)="handlePermissionError($event)"
+                        handler="delete">
+                    </content-action>
+                    <!-- document actions -->
+                    <content-action
+                        icon="content_copy"
+                        target="document"
+                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.COPY' | translate}}"
+                        permission="update"
+                        [disableWithNoPermission]="true"
+                        (error)="onContentActionError($event)"
+                        (success)="onContentActionSuccess($event)"
+                        handler="copy">
+                    </content-action>
+                    <content-action
+                        icon="redo"
+                        target="document"
+                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.MOVE' | translate}}"
+                        permission="update"
+                        [disableWithNoPermission]="true"
+                        (error)="onContentActionError($event)"
+                        (success)="onContentActionSuccess($event)"
+                        handler="move">
+                    </content-action>
+                    <content-action
+                        icon="storage"
+                        target="document"
+                        title="Manage versions..."
+                        (execute)="onManageVersions($event)">
+                    </content-action>
+                    <content-action
+                        icon="delete"
+                        target="document"
+                        permission="delete"
+                        [disableWithNoPermission]="true"
+                        (permissionEvent)="handlePermissionError($event)"
+                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DELETE' | translate}}"
+                        (success)="onDeleteActionSuccess($event)"
+                        handler="delete">
+                    </content-action>
+                </content-actions>
+            </adf-document-list>
+        </adf-upload-drag-area>
+        <adf-info-drawer-layout *ngIf="showVersions" class="adf-manage-versions-sidebar" fxFlex="0 0 auto">
+            <div info-drawer-content>
+                <ng-container *ngIf="hasOneFileSelected();else choose_document_template">
+                    <ng-container *ngIf="userHasPermissionToManageVersions(); else no_permission_to_versions">
+                        <adf-version-manager
+                            [node]="documentList.selection[0].entry">
+                        </adf-version-manager>
+                    </ng-container>
+                </ng-container>
+                <ng-template #choose_document_template>
+                    <div class="adf-manage-versions-empty">
+                        <mat-icon class="adf-manage-versions-empty-icon">face</mat-icon>
+                      {{'VERSION.CHOOSE_FILE' | translate}}
+                    </div>
+                </ng-template>
+                <ng-template #no_permission_to_versions>
+                    <div class="adf-manage-versions-no-permission">
+                        <mat-icon class="adf-manage-versions-no-permission-icon">warning</mat-icon>
+                      {{'VERSION.NO_PERMISSION' | translate}}
+                    </div>
+                </ng-template>
+            </div>
+        </adf-info-drawer-layout>
+    </div>
+</div>
+
+<context-menu-holder></context-menu-holder>
+
+<div class="adf-content-service-settings">
+
+    <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>
+            <mat-slide-toggle [color]="'primary'" [(ngModel)]="multiselect">{{'DOCUMENT_LIST.MULTISELECT_CHECKBOXES' |
+                translate}}
+            </mat-slide-toggle>
+        </section>
+
+        <section>
+            <mat-slide-toggle [color]="'primary'" [(ngModel)]="multipleFileUpload">
+                {{'DOCUMENT_LIST.MULTIPLE_FILE_UPLOAD' | translate}}
+            </mat-slide-toggle>
+        </section>
+
+        <section>
+            <mat-slide-toggle [color]="'primary'" [(ngModel)]="folderUpload">{{'DOCUMENT_LIST.FOLDER_UPLOAD' |
+                translate}}
+            </mat-slide-toggle>
+        </section>
+
+        <section>
+            <mat-slide-toggle [color]="'primary'" [(ngModel)]="acceptedFilesTypeShow">{{'DOCUMENT_LIST.CUSTOM_FILTER' |
+                translate}}
+            </mat-slide-toggle>
+        </section>
+
+        <section>
+          <mat-slide-toggle [color]="'primary'" [(ngModel)]="maxSizeShow">{{'DOCUMENT_LIST.MAX_SIZE' |
+            translate}}
+          </mat-slide-toggle>
+        </section>
+
+        <section>
+            <mat-slide-toggle [color]="'primary'" [(ngModel)]="versioning">{{'DOCUMENT_LIST.ENABLE_VERSIONING' |
+                translate}}
+            </mat-slide-toggle>
+        </section>
+
+        <h5>Upload</h5>
+        <section *ngIf="acceptedFilesTypeShow">
+            <mat-form-field>
+                <input matInput placeholder="Extension accepted" [(ngModel)]="acceptedFilesType"
+                       data-automation-id="accepted-files-type">
+            </mat-form-field>
+        </section>
+        <section *ngIf="maxSizeShow">
+            <mat-form-field>
+                <input matInput type="number"  placeholder="Max file size" [(ngModel)]="maxFilesSize"
+                       data-automation-id="max-files-size">
+            </mat-form-field>
+        </section>
+        <div *ngIf="!acceptedFilesTypeShow">
+            <adf-upload-button
+                #uploadButton
+                tooltip="Custom tooltip"
+                [disabled]="!enableUpload"
+                data-automation-id="multiple-file-upload"
+                [rootFolderId]="documentList.currentFolderId"
+                [multipleFiles]="multipleFileUpload"
+                [uploadFolders]="folderUpload"
+                [maxFilesSize]="maxFilesSize"
+                (error)="handleUploadError($event)"
+                [versioning]="versioning"
+                [adf-node-permission]="'create'"
+                [adf-nodes]="getCurrentDocumentListNode()"
+                (permissionEvent)="handlePermissionError($event)">
+            </adf-upload-button>
+        </div>
+        <div *ngIf="acceptedFilesTypeShow">
+            <adf-upload-button
+                #uploadButton
+                tooltip="Custom tooltip"
+                [disabled]="!enableUpload"
+                data-automation-id="multiple-file-upload"
+                [rootFolderId]="documentList.currentFolderId"
+                [acceptedFilesType]="acceptedFilesType"
+                [multipleFiles]="multipleFileUpload"
+                [uploadFolders]="folderUpload"
+                [versioning]="versioning"
+                (error)="handleUploadError($event)"
+                [adf-node-permission]="'create'"
+                [adf-nodes]="getCurrentDocumentListNode()"
+                (permissionEvent)="handlePermissionError($event)">
+            </adf-upload-button>
+        </div>
+        <section>
+            <mat-checkbox [(ngModel)]="enableUpload">
+                {{'DOCUMENT_LIST.DESCRIPTION_UPLOAD' | translate}}
+            </mat-checkbox>
+        </section>
+    </div>
+
+    <div class="p-10">
+        <p>
+            {{'DOCUMENT_LIST.MULTISELECT_DESCRIPTION' | translate}}
+        </p>
+        <mat-form-field>
+            <mat-select placeholder="Selection Mode" [(ngModel)]="selectionMode" name="food">
+                <mat-option *ngFor="let mode of selectionModes" [value]="mode.value">
+                    {{mode.viewValue}}
+                </mat-option>
+            </mat-select>
+        </mat-form-field>
+    </div>
+</div>
+
+<file-uploading-dialog #fileDialog></file-uploading-dialog>

demo-shell/src/app/components/files/files.component.scss

@@ -0,0 +1,113 @@
+$minimumDocumentListWidth: 425px;
+
+.container {
+    margin: 10px;
+}
+
+@media only screen and (max-width: 640px) {
+    .container {
+        margin: 0;
+    }
+}
+
+.error-message {
+    text-align: left;
+}
+
+.error-message--text {
+    color: #d50000;
+}
+
+.adf-not-overlay-viewer {
+    height:900px;
+}
+
+adf-document-list ::ng-deep adf-datatable tr.document-list__create {
+    background: green !important;
+}
+
+adf-document-list ::ng-deep adf-datatable tr.document-list__disable {
+    background: red !important;
+}
+
+adf-document-list ::ng-deep adf-datatable > table > tbody > tr.is-selected > td.adf-data-table-cell.adf-data-table-cell--image.image-table-cell > div > div > mat-icon > svg {
+    fill: #00bcd4;
+}
+
+.adf-site-container-style {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    width: 100%;
+    min-width: 200px;
+}
+
+.adf-content-service-settings {
+    padding: 16px;
+}
+
+.adf-files-toolbar {
+    .adf-toolbar-title {
+        display: flex;
+        width: 100%;
+
+        .adf-breadcrumb {
+            width: 0;
+        }
+    }
+}
+
+.adf-manage-versions-sidebar {
+    width: 300px;
+    color: rgba(0, 0, 0, 0.87);
+
+    .adf-manage-versions-empty,
+    .adf-manage-versions-no-permission {
+        margin: 24px;
+        color: grey;
+        text-align: justify;
+
+        &-icon {
+            display: block;
+            font-size: 48px;
+            margin: 0 auto 32px auto;
+        }
+    }
+
+    & ::ng-deep .adf-info-drawer-layout-header {
+        display: none;
+    }
+
+    & ::ng-deep .adf-info-drawer-layout-content {
+        padding: 0;
+
+        .adf-version-upload,
+        .adf-new-version-file-upload {
+            width: 100%;
+
+            & .mat-raised-button {
+                width: 100%;
+            }
+        }
+
+        .adf-new-version-uploader-container {
+            padding: 8px 24px 16px 24px;
+        }
+    }
+}
+
+@media (max-width: $minimumDocumentListWidth) {
+    adf-document-list ::ng-deep adf-datatable  {
+        & ::ng-deep .adf-data-table-cell--fileSize {
+            display: none;
+        }
+    }
+
+    .adf-site-container-style {
+        width: 100%;
+        display: block;
+
+        & ::ng-deep .adf-site-dropdown-list-element {
+            width: 100%;
+        }
+    }
+}

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

@@ -0,0 +1,379 @@
+/*!
+ * @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, OnChanges, OnDestroy, ChangeDetectorRef,
+    EventEmitter, Optional, ViewChild, SimpleChanges, Output
+} from '@angular/core';
+import { MatDialog } from '@angular/material';
+import { ActivatedRoute, Params, Router } from '@angular/router';
+import { MinimalNodeEntity, NodePaging } from 'alfresco-js-api';
+import {
+    AlfrescoApiService, ContentService, TranslationService,
+    FileUploadEvent, FolderCreatedEvent, LogService, NotificationService,
+    SiteModel, UploadService, DataColumn, DataRow
+} from '@alfresco/core';
+
+import { DocumentListComponent, PermissionStyleModel, DownloadZipDialogComponent } from '@alfresco/content-services';
+
+import { VersionManagerDialogAdapterComponent } from './version-manager-dialog-adapter.component';
+import { Subscription } from 'rxjs/Rx';
+
+const DEFAULT_FOLDER_TO_SHOW = '-my-';
+
+@Component({
+    selector: 'adf-files-component',
+    templateUrl: './files.component.html',
+    styleUrls: ['./files.component.scss']
+})
+export class FilesComponent implements OnInit, OnChanges, OnDestroy {
+
+    errorMessage: string = null;
+    fileNodeId: any;
+    showViewer: boolean = false;
+    showVersions: boolean = false;
+
+    toolbarColor = 'default';
+
+    selectionModes = [
+        { value: 'none', viewValue: 'None' },
+        { value: 'single', viewValue: 'Single' },
+        { value: 'multiple', viewValue: 'Multiple' }
+    ];
+
+    @Input()
+        // The identifier of a node. You can also use one of these well-known aliases: -my- | -shared- | -root-
+    currentFolderId: string = DEFAULT_FOLDER_TO_SHOW;
+
+    @Input()
+    selectionMode = 'multiple';
+
+    @Input()
+    multiselect = false;
+
+    @Input()
+    multipleFileUpload: boolean = false;
+
+    @Input()
+    folderUpload: boolean = false;
+
+    @Input()
+    acceptedFilesTypeShow: boolean = false;
+
+    @Input()
+    maxSizeShow: boolean = false;
+
+    @Input()
+    versioning: boolean = false;
+
+    @Input()
+    acceptedFilesType: string = '.jpg,.pdf,.js';
+
+    @Input()
+    maxFilesSize: number = null;
+
+    @Input()
+    enableUpload: boolean = true;
+
+    @Input()
+    nodeResult: NodePaging;
+
+    @Output()
+    documentListReady: EventEmitter<any> = new EventEmitter();
+
+    @ViewChild(DocumentListComponent)
+    documentList: DocumentListComponent;
+
+    permissionsStyle: PermissionStyleModel[] = [];
+
+    private onCreateFolder: Subscription;
+    private onEditFolder: Subscription;
+
+    constructor(private changeDetector: ChangeDetectorRef,
+                private apiService: AlfrescoApiService,
+                private notificationService: NotificationService,
+                private uploadService: UploadService,
+                private contentService: ContentService,
+                private dialog: MatDialog,
+                private translateService: TranslationService,
+                private router: Router,
+                @Optional() private route: ActivatedRoute,
+                private logService: LogService) {
+    }
+
+    showFile(event) {
+        const entry = event.value.entry;
+        if (entry && entry.isFile) {
+            this.router.navigate(['/files', entry.id, 'view']);
+        }
+    }
+
+    onFolderChange($event) {
+        this.currentFolderId = $event.value.id;
+        this.router.navigate(['/files', $event.value.id]);
+    }
+
+    toggleFolder() {
+        this.multipleFileUpload = false;
+        this.folderUpload = !this.folderUpload;
+        return this.folderUpload;
+    }
+
+    ngOnInit() {
+        if (this.route) {
+            this.route.params.forEach((params: Params) => {
+                if (params['id']) {
+                    this.currentFolderId = params['id'];
+                    this.changeDetector.detectChanges();
+                }
+            });
+        }
+
+        this.uploadService.fileUploadComplete.asObservable().debounceTime(300).subscribe(value => this.onFileUploadEvent(value));
+        this.uploadService.fileUploadDeleted.subscribe((value) => this.onFileUploadEvent(value));
+        this.contentService.folderCreated.subscribe(value => this.onFolderCreated(value));
+        this.onCreateFolder = this.contentService.folderCreate.subscribe(value => this.onFolderAction(value));
+        this.onEditFolder = this.contentService.folderEdit.subscribe(value => this.onFolderAction(value));
+
+        // this.permissionsStyle.push(new PermissionStyleModel('document-list__create', PermissionsEnum.CREATE));
+        // this.permissionsStyle.push(new PermissionStyleModel('document-list__disable', PermissionsEnum.NOT_CREATE, false, true));
+    }
+
+    ngOnDestroy() {
+        this.onCreateFolder.unsubscribe();
+        this.onEditFolder.unsubscribe();
+    }
+
+    ngOnChanges(changes: SimpleChanges) {
+        if (changes.nodeResult && changes.nodeResult.currentValue) {
+            this.nodeResult = <NodePaging> changes.nodeResult.currentValue;
+        }
+    }
+
+    getCurrentDocumentListNode(): MinimalNodeEntity[] {
+        if (this.documentList.folderNode) {
+            return [{ entry: this.documentList.folderNode }];
+        } else {
+            return [];
+        }
+    }
+
+    onNavigationError(err: any) {
+        if (err) {
+            this.errorMessage = err.message || 'Navigation error';
+        }
+    }
+
+    resetError() {
+        this.errorMessage = null;
+    }
+
+    onFileUploadEvent(event: FileUploadEvent) {
+        if (event && event.file.options.parentId === this.documentList.currentFolderId) {
+            this.documentList.reload();
+        }
+    }
+
+    onFolderCreated(event: FolderCreatedEvent) {
+        this.logService.log('FOLDER CREATED');
+        this.logService.log(event);
+        if (event && event.parentId === this.documentList.currentFolderId) {
+            this.documentList.reload();
+        }
+    }
+
+    onFolderAction(node) {
+        this.logService.log(node);
+        if (node && node.parentId === this.documentList.currentFolderId) {
+            this.documentList.reload();
+        }
+    }
+
+    handlePermissionError(event: any) {
+        this.translateService.get('OPERATION.ERROR.NO_PERMISSION_EVENT', {
+            permission: event.permission,
+            action: event.action,
+            type: event.type
+        }).subscribe((message) => {
+            this.notificationService.openSnackMessage(
+                message,
+                4000
+            );
+        })
+    }
+
+    handleUploadError(event: any) {
+        this.notificationService.openSnackMessage(
+            event,
+            4000
+        );
+    }
+
+    emitReadyEvent(event: any) {
+        this.documentListReady.emit(event);
+    }
+
+    onContentActionError(errors) {
+        const errorStatusCode = JSON.parse(errors.message).error.statusCode;
+        let translatedErrorMessage: any;
+
+        switch (errorStatusCode) {
+            case 403:
+                translatedErrorMessage = this.translateService.get('OPERATION.ERROR.PERMISSION');
+                break;
+            case 409:
+                translatedErrorMessage = this.translateService.get('OPERATION.ERROR.CONFLICT');
+                break;
+            default:
+                translatedErrorMessage = this.translateService.get('OPERATION.ERROR.UNKNOWN');
+        }
+
+        this.notificationService.openSnackMessage(translatedErrorMessage.value, 4000);
+    }
+
+    onContentActionSuccess(message) {
+        let translatedMessage: any = this.translateService.get(message);
+        this.notificationService.openSnackMessage(translatedMessage.value, 4000);
+    }
+
+    onDeleteActionSuccess(message) {
+        this.uploadService.fileDeleted.next(message);
+    }
+
+    onManageVersions(event) {
+        const contentEntry = event.value.entry;
+
+        if (this.contentService.hasPermission(contentEntry, 'update')) {
+            this.dialog.open(VersionManagerDialogAdapterComponent, {
+                data: { contentEntry },
+                panelClass: 'adf-version-manager-dialog',
+                width: '630px'
+            });
+        } else {
+            const translatedErrorMessage: any = this.translateService.get('OPERATION.ERROR.PERMISSION');
+            this.notificationService.openSnackMessage(translatedErrorMessage.value, 4000);
+        }
+    }
+
+    getSiteContent(site: SiteModel) {
+        this.currentFolderId = site && site.guid ? site.guid : DEFAULT_FOLDER_TO_SHOW;
+    }
+
+    getDocumentListCurrentFolderId() {
+        return this.documentList.currentFolderId || DEFAULT_FOLDER_TO_SHOW;
+    }
+
+    hasSelection(selection: Array<MinimalNodeEntity>): boolean {
+        return selection && selection.length > 0;
+    }
+
+    hasOneFileSelected(): boolean {
+        const selection: Array<MinimalNodeEntity> = this.documentList.selection;
+        const hasOneFileSelected = selection && selection.length === 1 && selection[0].entry.isFile;
+        return hasOneFileSelected;
+    }
+
+    userHasPermissionToManageVersions(): boolean {
+        const selection: Array<MinimalNodeEntity> = this.documentList.selection;
+        return this.contentService.hasPermission(selection[0].entry, 'update');
+    }
+
+    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 => {
+                this.logService.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;
+    }
+
+    canEditFolder(selection: Array<MinimalNodeEntity>): boolean {
+        if (selection && selection.length === 1) {
+            const entry = selection[0].entry;
+
+            if (entry && entry.isFolder) {
+                return this.contentService.hasPermission(entry, 'update');
+            }
+        }
+        return false;
+    }
+}

demo-shell/src/app/components/files/version-manager-dialog-adapter.component.html

@@ -0,0 +1,7 @@
+<header mat-dialog-title>Manage versions</header>
+<section mat-dialog-content>
+    <adf-version-manager [node]="contentEntry"></adf-version-manager>
+</section>
+<footer mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+    <button mat-button (click)="close()">Close</button>
+</footer>

demo-shell/src/app/components/files/version-manager-dialog-adapter.component.ts

@@ -0,0 +1,38 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, Inject, ViewEncapsulation } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { MinimalNodeEntryEntity } from 'alfresco-js-api';
+
+@Component({
+    templateUrl: './version-manager-dialog-adapter.component.html',
+    encapsulation: ViewEncapsulation.None
+})
+export class VersionManagerDialogAdapterComponent {
+
+    public contentEntry: MinimalNodeEntryEntity;
+
+    constructor(@Inject(MAT_DIALOG_DATA) data: any,
+                private containingDialog?: MatDialogRef<VersionManagerDialogAdapterComponent>) {
+        this.contentEntry = data.contentEntry;
+    }
+
+    close() {
+        this.containingDialog.close();
+    }
+}

demo-shell/src/app/components/form/form-list.component.html

@@ -0,0 +1,8 @@
+<adf-form-list [forms]="formList" (row-dblclick)="onRowDblClick($event)">
+</adf-form-list>
+<div class="form-container" *ngIf="!isEmptyForm()">
+    <adf-form [form]="form" [data]="restoredData">
+    </adf-form>
+</div>
+<button mat-button (click)="store()" color="primary">{{'FORM-LIST.STORE' | translate }}</button>
+<button mat-button (click)="restore()" color="primary">{{'FORM-LIST.RESTORE' | translate }}</button>

demo-shell/src/app/components/form/form-list.component.scss

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

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

@@ -0,0 +1,84 @@
+/*!
+ * @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 { FormComponent, FormModel, FormService, LogService } from '@alfresco/core';
+
+@Component({
+    selector: 'form-list',
+    templateUrl: 'form-list.component.html',
+    styleUrls: ['form-list.component.scss']
+})
+export class FormListComponent {
+
+    @ViewChild(FormComponent)
+    activitiForm: FormComponent;
+
+    formList: any [] = [];
+
+    form: FormModel;
+    formId: string;
+
+    storedData: any = {};
+    restoredData: any = {};
+
+    constructor(private formService: FormService, private logService: LogService) {
+        // Prevent default outcome actions
+        formService.executeOutcome.subscribe(e => {
+            e.preventDefault();
+            this.logService.log(e.outcome);
+        });
+    }
+
+    onRowDblClick(event: CustomEvent) {
+        let rowForm = event.detail.value.obj;
+
+        this.formService.getFormDefinitionById(rowForm.id).subscribe((formModel) => {
+            let form = this.formService.parseForm(formModel.formDefinition);
+            this.form = form;
+        });
+
+        this.logService.log(rowForm);
+    }
+
+    isEmptyForm() {
+        return this.form === null || this.form === undefined;
+    }
+
+    store() {
+        this.clone(this.activitiForm.form.values, this.storedData);
+        this.logService.log('DATA SAVED');
+        this.logService.log(this.storedData);
+        this.logService.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/src/app/components/form/form.component.css

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

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

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

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

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

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

@@ -0,0 +1,187 @@
+<!-- DOCUMENT LIST-->
+<mat-card class="adf-home-card">
+        <mat-card-title class="adf-home-card-title adf-primary-background-color"  routerLink="/files">
+            <h2 >
+                <mat-icon>dvr</mat-icon>
+                <span class="adf-home-card__text">DocumentList - Content Services</span>
+            </h2>
+        </mat-card-title>
+    <mat-card-content>
+        Demonstrates multiple Alfresco Content Services components used together to display the files of your Content Services instance:
+        <ul class="adf-home-feature-list">
+            <li>
+                <mat-icon>brightness_1</mat-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>
+                <mat-icon>dvr</mat-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>
+                <mat-icon>file_upload</mat-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>
+                <mat-icon>view_module</mat-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>
+    </mat-card-content>
+</mat-card>
+
+
+<!-- Process Services-->
+<mat-card class="adf-home-card">
+        <mat-card-title class="adf-home-card-title adf-primary-background-color"  routerLink="/activiti">
+            <h2 >
+                <mat-icon>apps</mat-icon>
+                <span class="adf-home-card__text">Process Services</span>
+            </h2>
+        </mat-card-title>
+    <mat-card-content>
+        Demonstrates multiple Alfresco Process Services components used together to show your Process Services process and tasks:
+        <ul class="adf-home-feature-list">
+            <li>
+                <mat-icon>brightness_1</mat-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>
+                <mat-icon>view_module</mat-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>
+                <mat-icon>view_headline</mat-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>
+                <mat-icon>view_headline</mat-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>
+                <mat-icon>view_quilt</mat-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>
+                <mat-icon>pie_chart</mat-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>
+                <mat-icon>view_module</mat-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>
+    </mat-card-content>
+</mat-card>
+
+
+<!-- DATATABLE-->
+<mat-card class="adf-home-card">
+        <mat-card-title class="adf-home-card-title adf-primary-background-color"  routerLink="/datatable">
+            <h2 >
+                <mat-icon>view_module</mat-icon>
+                <span class="adf-home-card__text">DataTable - Content Services & Process Services</span>
+            </h2>
+        </mat-card-title>
+    <mat-card-content>
+        Basic table component:
+        <ul class="adf-home-feature-list">
+            <li>
+                <mat-icon>brightness_1</mat-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>
+    </mat-card-content>
+</mat-card>
+
+<!-- UPLOADER-->
+<mat-card class="adf-home-card">
+        <mat-card-title class="adf-home-card-title adf-primary-background-color"  routerLink="/uploader">
+            <h2 >
+                <mat-icon>file_upload</mat-icon>
+                <span class="adf-home-card__text">Uploader - Content Services</span>
+            </h2>
+        </mat-card-title>
+    <mat-card-content>
+        Basic table uploader component for the Content Services & Process Services:
+        <ul class="adf-home-feature-list">
+            <li>
+                <mat-icon>brightness_1</mat-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>
+    </mat-card-content>
+</mat-card>
+
+<!-- LOGIN-->
+<mat-card class="adf-home-card">
+        <mat-card-title class="adf-home-card-title adf-primary-background-color"  routerLink="/login">
+            <h2 >
+                <mat-icon>account_circle</mat-icon>
+                <span class="adf-home-card__text">Login - Content Services & Process Services</span>
+            </h2>
+        </mat-card-title>
+    <mat-card-content>
+        Login component for the Content Services and Process Services:
+        <ul class="adf-home-feature-list">
+            <li>
+                <mat-icon>brightness_1</mat-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>
+    </mat-card-content>
+</mat-card>
+
+<!-- WEBSCRIPT-->
+<mat-card class="adf-home-card">
+    <mat-card-title class="adf-home-card-title adf-primary-background-color"  routerLink="/webscript">
+        <h2 >
+            <mat-icon>extension</mat-icon>
+            <span class="adf-home-card__text">Webscript - Content Services</span>
+        </h2>
+    </mat-card-title>
+    <mat-card-content>
+        Displays and creates webscripts in your Content Services instance:
+        <ul class="adf-home-feature-list">
+            <li>
+                <mat-icon>brightness_1</mat-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>
+    </mat-card-content>
+</mat-card>
+
+<!-- TAG-->
+<mat-card class="adf-home-card">
+        <mat-card-title class="adf-home-card-title adf-primary-background-color"  routerLink="/tag">
+            <h2 >
+                <mat-icon>local_offer</mat-icon>
+                <span class="adf-home-card__text">Tag - Content Services</span>
+            </h2>
+        </mat-card-title>
+    <mat-card-content>
+        Displays and adds tags to the node of your Content Services instance:
+        <ul class="adf-home-feature-list">
+            <li>
+                <mat-icon>brightness_1</mat-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>
+    </mat-card-content>
+</mat-card>

demo-shell/src/app/components/home/home.component.scss

@@ -0,0 +1,42 @@
+.adf-home-card {
+    float: left;
+    margin: 10px 10px 10px 10px;
+    width: 290px;
+    display: block;
+    overflow-y: auto;
+    height: 400px;
+
+    h2 {
+        line-height: 30px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .material-icons {
+        position: relative;
+        top: 6px;
+    }
+}
+
+.adf-home-card-title {
+    padding: 24px;
+    cursor: pointer;
+    height: 55px;
+    margin: -63px -24px 18px -25px !important;
+}
+
+.adf-home-card__text {
+    font-size: 16px;
+    line-height: 18px;
+}
+
+.adf-home-feature-list {
+    list-style: none;
+    padding-left: 0;
+}
+
+span.home--feature-list__text:before {
+    content: '';
+    padding-left: 4px;
+}

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

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

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

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

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

@@ -0,0 +1,40 @@
+.setting-button {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 1;
+    background-color: rgb(68,138,255);
+    color: rgb(255,255,255);
+}
+
+.settings {
+    border-radius: 8px;
+    position: absolute;
+    background-color: papayawhip;
+    color: cadetblue;
+    left: 10px;
+    top: 10px;
+    z-index: 1;
+}
+
+.toggle {
+    width: 190px;
+    margin: 5px;
+    padding: 5px;
+}
+
+@media (min-width: 721px) {
+    .mobile-settings {
+        display: none;
+    }
+}
+
+@media (max-width: 720px) {
+    .settings {
+        display: none;
+    }
+}
+
+.settings ::ng-deep .mat-slide-toggle-thumb-container {
+    cursor: pointer;
+}

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

@@ -0,0 +1,96 @@
+<!--BPM, ECN AND CSRF TOGGLE-->
+
+<div class="settings">
+    <p class="toggle">
+        <mat-slide-toggle
+            id="switch1"
+            [color]="'primary'"
+            (change)="toggleECM()"
+            [checked]="isECM">
+            {{ 'LOGIN.CONTENT_SERVICES'| translate }}
+        </mat-slide-toggle>
+    </p>
+    <p class="toggle">
+        <mat-slide-toggle
+            id="switch2"
+            [color]="'primary'"
+            (change)="toggleBPM()"
+            [checked]="isBPM">
+            {{ 'LOGIN.PROCESS_SERVICES'| translate }}
+        </mat-slide-toggle>
+    </p>
+    <p class="toggle">
+        <mat-slide-toggle
+            id="switch3"
+            [color]="'primary'"
+            (change)="toggleCSRF()"
+            [checked]="!disableCsrf">
+            CSRF
+        </mat-slide-toggle>
+    </p>
+    <p class="toggle">
+        <mat-slide-toggle
+            id="switch4"
+            [color]="'primary'"
+            (change)="toggleFooter()"
+            [checked]="showFooter">
+            {{ 'LOGIN.LOGIN_FOOTER'| translate }}
+        </mat-slide-toggle>
+    </p>
+</div>
+
+<!--SETTING BUTTON-->
+
+<a mat-fab class="setting-button" data-automation-id="settings" href="" routerLink="/settings">
+    <mat-icon>settings</mat-icon>
+</a>
+
+<adf-login
+    #alfrescologin
+    [providers]="providers"
+    [fieldsValidation]="customValidation"
+    [disableCsrf]="disableCsrf"
+    [showLoginActions]="showFooter"
+    [showRememberMe]="showFooter"
+    copyrightText="© 2016 Alfresco Software, Inc. All Rights Reserved. (customised text)"
+    (success)="onLogin($event)"
+    (error)="onError($event)">
+    <div class="mobile-settings">
+        <p>
+            <mat-slide-toggle
+                id="switch1-mobile"
+                [color]="'primary'"
+                (change)="toggleECM()"
+                [checked]="isECM">
+                {{ 'LOGIN.CONTENT_SERVICES'| translate }}
+            </mat-slide-toggle>
+        </p>
+        <p>
+            <mat-slide-toggle
+                id="switch2-mobile"
+                [color]="'primary'"
+                (change)="toggleBPM()"
+                [checked]="isBPM">
+                {{ 'LOGIN.PROCESS_SERVICES'| translate }}
+            </mat-slide-toggle>
+        </p>
+        <p>
+            <mat-slide-toggle
+                id="switch3-mobile"
+                [color]="'primary'"
+                (change)="toggleCSRF()"
+                [checked]="!disableCsrf">
+                CSRF
+            </mat-slide-toggle>
+        </p>
+        <p>
+            <mat-slide-toggle
+                id="switch4-mobile"
+                [color]="'primary'"
+                (change)="toggleFooter()"
+                [checked]="showFooter">
+                {{ 'LOGIN.LOGIN_FOOTER'| translate }}
+            </mat-slide-toggle>
+        </p>
+    </div>
+</adf-login>

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

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

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

@@ -0,0 +1,8 @@
+<adf-search-control [highlight]="true"
+    (optionClicked)="onItemClicked($event)"
+    (submit)="onSearchSubmit($event)">
+</adf-search-control>
+
+<adf-viewer *ngIf="fileShowed" [(showViewer)]="fileShowed" [fileNodeId]="fileNodeId" [overlayMode]="true">
+  <mat-spinner></mat-spinner>
+</adf-viewer>

demo-shell/src/app/components/search/search-bar.component.scss

@@ -0,0 +1,5 @@
+
+.adf-search-elements {
+  display: flex;
+  align-items: center;
+}

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

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

demo-shell/src/app/components/search/search-result.component.html

@@ -0,0 +1,10 @@
+<adf-search [searchTerm]="searchedWord"
+            (resultLoaded)="showSearchResult($event)"
+            #search>
+</adf-search>
+
+<adf-files-component
+        [currentFolderId]="null"
+        [nodeResult]="resultNodePageList"
+        (documentListReady)="refreshResults($event)">
+</adf-files-component>

demo-shell/src/app/components/search/search-result.component.scss

@@ -0,0 +1,20 @@
+div.search-results-container {
+    padding: 0 20px 20px 20px;
+}
+
+.adf-search-title {
+    font-size: 22px;
+    padding: 15px 0 15px 0;
+}
+
+@media screen and (max-width: 600px) {
+    :host .col-display-name {
+        min-width: 100px;
+    }
+    :host .col-modified-at, :host .col-modified-by {
+        display: none;
+    }
+    :host div.search-results-container table {
+        width: 100%;
+    }
+}

demo-shell/src/app/components/search/search-result.component.ts

@@ -0,0 +1,59 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, OnInit, Optional, ViewChild } from '@angular/core';
+import { Router, ActivatedRoute, Params } from '@angular/router';
+import { NodePaging } from 'alfresco-js-api';
+import { SearchComponent } from '@alfresco/content-services';
+
+@Component({
+    selector: 'adf-search-result-component',
+    templateUrl: './search-result.component.html',
+    styleUrls: ['./search-result.component.scss']
+})
+export class SearchResultComponent implements OnInit {
+
+    @ViewChild('search')
+    search: SearchComponent;
+
+    fileNodeId: string;
+    queryParamName = 'q';
+    searchedWord: string = '';
+    fileShowed: boolean = false;
+    navigationMode: string = 'dblclick';
+    resultNodePageList: NodePaging;
+
+    constructor(public router: Router,
+                @Optional() private route: ActivatedRoute) {
+    }
+
+    ngOnInit() {
+        if (this.route) {
+            this.route.params.forEach((params: Params) => {
+                this.searchedWord = params.hasOwnProperty(this.queryParamName) ? params[this.queryParamName] : null;
+            });
+        }
+    }
+
+    showSearchResult(event: NodePaging) {
+        this.resultNodePageList = event;
+    }
+
+    refreshResults(event: any) {
+        this.search.reload();
+    }
+}

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

@@ -0,0 +1 @@
+<adf-host-settings (error)="onError($event)"></adf-host-settings>

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

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

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

@@ -0,0 +1,21 @@
+<label for="nodeId"><b>Insert Node Id</b></label><br>
+<input id="nodeId" type="text" size="48" [(ngModel)]="nodeId"><br>
+
+<div fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
+    <div class="adf-social-example-area" fxFlex.gt-md="1 1 auto">
+        <mat-card>
+            <div class="adf-social-title">
+                {{'SOCIAL.LIKE' | translate }}
+            </div>
+            <adf-like [nodeId]="nodeId"></adf-like>
+        </mat-card>
+    </div>
+    <div class="adf-social-example-area" fxFlex.gt-md="1 1 auto">
+        <mat-card>
+            <div class="adf-social-title">
+                {{'SOCIAL.RATING' | translate }}
+            </div>
+            <adf-rating [nodeId]="nodeId"></adf-rating>
+        </mat-card>
+    </div>
+</div>

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

@@ -0,0 +1,8 @@
+.adf-social-example-area {
+    margin: 10px;
+}
+
+
+.adf-social-example-title {
+    padding-bottom: 12px;
+}

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

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

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

@@ -0,0 +1,25 @@
+<label for="nodeId"><b>{{'TAG.INSERT' | translate }}</b></label><br>
+<input id="nodeId" type="text" size="48" [(ngModel)]="nodeId"><br>
+<div fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
+    <div class="adf-tag-example-area" fxFlex.gt-md="1 1 auto">
+        <mat-card>
+            <adf-tag-node-actions-list [nodeId]="nodeId"></adf-tag-node-actions-list>
+        </mat-card>
+    </div>
+    <div class="adf-tag-example-area" fxFlex.gt-md="1 1 auto">
+        <mat-card>
+            <div class="adf-tag-example-title">
+                {{'TAG.LIST' | translate }}
+            </div>
+            <adf-tag-list></adf-tag-list>
+        </mat-card>
+    </div>
+    <div class="adf-tag-example-area" fxFlex.gt-md="1 1 auto">
+        <mat-card>
+            <div class="adf-tag-example-title">
+                {{'TAG.NODE_LIST' | translate }}
+            </div>
+            <adf-tag-node-list [nodeId]="nodeId"></adf-tag-node-list>
+        </mat-card>
+    </div>
+</div>