fix test

update lock
2.4.0 (#3522 )
2026-09-16 18:13:06 +00:00 · 2018-06-25 14:26:34 +01:00 · 2018-06-25 11:48:23 +01:00 · 2018-06-25 11:24:26 +01:00 · 2018-04-25 18:28:06 +01:00 · 2018-04-17 17:43:50 +01:00
1369 changed files with 106935 additions and 27059 deletions
@@ -6,8 +6,8 @@
  "apps": [
    {
      "name": "dist",
-      "root": "src",
-      "outDir": "dist",
+      "root": "demo-shell/src",
+      "outDir": "demo-shell/dist",
      "assets": [
        "assets",
        "favicon.ico",
@@ -25,32 +25,32 @@
        },
        {
          "glob": "**/*",
-          "input": "../node_modules/@alfresco/adf-core/prebuilt-themes",
+          "input": "../../node_modules/@alfresco/adf-core/prebuilt-themes",
          "output": "./assets/prebuilt-themes"
        },
        {
          "glob": "**/*",
-          "input": "../node_modules/@alfresco/adf-core/bundles/assets",
+          "input": "../../node_modules/@alfresco/adf-core/bundles/assets",
          "output": "./assets/"
        },
        {
          "glob": "**/*",
-          "input": "../node_modules/@alfresco/adf-insights/bundles/assets",
+          "input": "../../node_modules/@alfresco/adf-insights/bundles/assets",
          "output": "./assets/"
        },
        {
          "glob": "**/*",
-          "input": "../node_modules/@alfresco/adf-process-services/bundles/assets",
+          "input": "../../node_modules/@alfresco/adf-process-services/bundles/assets",
          "output": "./assets/"
        },
        {
          "glob": "**/*",
-          "input": "../node_modules/@alfresco/adf-content-services/bundles/assets",
+          "input": "../../node_modules/@alfresco/adf-content-services/bundles/assets",
          "output": "./assets/"
        },
        {
          "glob": "pdf.worker.js",
-          "input": "../node_modules/pdfjs-dist/build",
+          "input": "../../node_modules/pdfjs-dist/build",
          "output": "./"
        }
      ],
@@ -67,14 +67,14 @@
      ],
      "stylePreprocessorOptions": {
        "includePaths": [
-          "../node_modules/"
+          "./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/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"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
@@ -84,12 +84,27 @@
    },
    {
      "name": "dev",
-      "root": "src",
-      "outDir": "dist",
+      "root": "demo-shell/src",
+      "outDir": "demo-shell/dist",
      "assets": [
        "assets",
        "app.config.json",
        "versions.json",
+        {
+          "glob": "**/*",
+          "input": "./assets",
+          "output": "./assets"
+        },
+        {
+          "glob": "app.config.json",
+          "input": "./",
+          "output": "./"
+        },
+        {
+          "glob": "versions.json",
+          "input": "./",
+          "output": "./"
+        },
        {
          "glob": "**/*",
          "input": "../resources",
@@ -102,12 +117,47 @@
        },
        {
          "glob": "**/*",
-          "input": "../dist-dev-temp/",
-          "output": "./"
+          "input": "../../lib/dist/core/prebuilt-themes",
+          "output": "./assets/prebuilt-themes"
+        },
+        {
+          "glob": "**/*",
+          "input": "../../lib/core/assets",
+          "output": "./assets"
+        },
+        {
+          "glob": "**/*",
+          "input": "../../lib/process-services/assets",
+          "output": "./assets"
+        },
+        {
+          "glob": "**/*",
+          "input": "../../lib/content-services/assets",
+          "output": "./assets"
+        },
+        {
+          "glob": "**/*",
+          "input": "../../lib/core/i18n",
+          "output": "./assets/adf-core/i18n"
+        },
+        {
+          "glob": "**/*",
+          "input": "../../lib/content-services/i18n",
+          "output": "./assets/adf-content-services/i18n"
+        },
+        {
+          "glob": "**/*",
+          "input": "../../lib/process-services/i18n",
+          "output": "./assets/adf-process-services/i18n"
+        },
+        {
+          "glob": "**/*",
+          "input": "../../lib/insights/i18n",
+          "output": "./assets/adf-insights/i18n"
        },
        {
          "glob": "pdf.worker.js",
-          "input": "../node_modules/pdfjs-dist/build",
+          "input": "../../node_modules/pdfjs-dist/build",
          "output": "./"
        }
      ],
@@ -128,10 +178,10 @@
        ]
      },
      "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/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"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
@@ -142,26 +192,18 @@
  ],
  "e2e": {
    "protractor": {
-      "config": "./protractor.conf.js"
+      "config": "./demo-shell/protractor.conf.js"
    }
  },
  "lint": [
    {
-      "project": "src/tsconfig.app.json",
-      "exclude": "**/node_modules/**/*"
-    },
-    {
-      "project": "src/tsconfig.spec.json",
-      "exclude": "**/node_modules/**/*"
-    },
-    {
-      "project": "e2e/tsconfig.e2e.json",
+      "project": "./demo-shell/src/tsconfig.app.json",
      "exclude": "**/node_modules/**/*"
    }
  ],
  "test": {
    "karma": {
-      "config": "./karma.conf.js"
+      "config": "./demo-shell/karma.conf.js"
    }
  },
  "defaults": {
@@ -0,0 +1,12 @@
+.git
+.github
+.vscode
+coverage
+docs
+e2e
+node_modules
+scripts
+src
+lib
+integration
+/demo-shell/config/
@@ -1,5 +1,4 @@
-# http://editorconfig.org
-
+# Editor configuration, see http://editorconfig.org
 root = true

 [*]
@@ -15,5 +14,10 @@ indent_style = space
 indent_size = 2

 [*.md]
-insert_final_newline = false
+max_line_length = off
+trim_trailing_whitespace = false
+
+[resources/*.json]
+indent_size = 2
+max_line_length = off
 trim_trailing_whitespace = false
@@ -17,9 +17,10 @@ src/environments/
 /demo-shell-ng2/ng2-components/
 .happypack/
 .history
-package-lock.*
 /ng2-components/ng2-alfresco-core/prebuilt-themes/
 .ng_pkg_build/
 /demo-shell/dist-dev-temp/
 /lib/export-new.json
 /lib/config/exportCheck.js
+/lib/config/export-check/export-new.json
+/lib/config/export-check/exportCheck.js
@@ -6,6 +6,9 @@ node_js:

 addons:
    chrome: stable
+before_script:
+    - "sudo chown root /opt/google/chrome/chrome-sandbox"
+    - "sudo chmod 4755 /opt/google/chrome/chrome-sandbox"

 before_install:
    - export CHROME_BIN=chromium-browser
@@ -26,7 +29,7 @@ install:
        if ([ "$TRAVIS_BRANCH" = "master" ]); then
            (./scripts/npm-build-all.sh  || exit 1;);
        else
-            (./scripts/npm-build-all.sh  -vjsapi alpha || exit 1;);
+            (./scripts/npm-build-all.sh  -vjsapi alpha -sb || exit 1;);
        fi
      fi

@@ -48,7 +51,7 @@ script:
      fi

    - if ([ "$MODULE" == "packaging" ]); then
-            (cd lib && npm run new-build || exit 1;);
+            (npm run build-lib || exit 1;);
      fi

    - if ([ "$MODULE" == "demo-shell" ]); then
@@ -58,12 +61,33 @@ script:
            (./scripts/start.sh -dev -t -ss -vjsapi alpha || exit 1;);
       fi
      fi
+
 jobs:
    include:
-        - stage: Check 2.0.0 Project Update
+        - stage: Demo shell prod && Demo shell e2e && Check ADF exports
+          script: ./scripts/test-dist.sh -n $TRAVIS_BUILD_NUMBER && (./scripts/pr-publish.sh -n $TRAVIS_BUILD_NUMBER -r $REPO_DOCKER -u $USERNAME_DOCKER -p $PASSWORD_DOCKER || exit 1)
+        - # Test Update version 2.0.0
          script: ./scripts/test-e2e-bc.sh
-        - stage: Check ADF exports
-          script: cd lib && npm run test-export
+        - # Test expors
+          script: npm run test-export
+        - stage: Update Apps dependencies
+        - # Test Update generator-ng2-alfresco-app
+          if: tag =~ .*beta.*
+          script: ./scripts/update-project.sh -gnu -t $GITHUB_TOKEN -n generator-ng2-alfresco-app
+        - # Test Update alfresco-content-app
+          if: tag =~ .*beta.*
+          script: ./scripts/update-project.sh -gnu -t $GITHUB_TOKEN -n alfresco-content-app
+        - # Test Update adf-app-manager-ui
+          if: tag =~ .*beta.*
+          script: ./scripts/update-project.sh -gnu -t $GITHUB_TOKEN -n adf-app-manager-ui
+        - # Test Update aalfresco-ng2-components
+          if: tag =~ .*beta.*
+          script: ./scripts/update-project.sh -gnu -t $GITHUB_TOKEN -n alfresco-ng2-components
+        - # Test Update alfresco-modeler-app
+          if: tag =~ .*beta.*
+          script: ./scripts/update-project.sh -gnu -t $GITHUB_TOKEN -n alfresco-modeler-app
+        - stage: Deploy PR
+          script: node ./scripts/pr-deploy.js -n $TRAVIS_BUILD_NUMBER -u $RANCHER_TOKEN -p $RANCHER_SECRET -s $REPO_RANCHER --image "docker:$REPO_DOCKER/adf/demo-shell:$TRAVIS_BUILD_NUMBER" --env $ENVIRONMENT_NAME -r $ENVIRONMENT_URL || exit 1

 # jobs:
 #   include:
@@ -95,5 +119,4 @@ after_success:

 cache:
  directories:
-  - demo-shell/node_modules
-  - lib/node_modules
+  - node_modules
@@ -1,26 +1,23 @@
 // Place your settings in this file to overwrite default and user settings.
 {
-    "files.exclude": {
-        "**/.git": true,
-        "**/.svn": true,
-        "**/.hg": true,
-        "**/.DS_Store": true,
-        "**/coverage": true,
-        "**/.happypack": true
-    },
-    "editor.renderIndentGuides": true,
-    "tslint.configFile": "ng2-components/tslint.json",
-    "markdownlint.config": {
-        "MD032": false,
-        "MD004": false,
-        "MD024": false,
-        "MD009": false,
-        "MD013": false,
-        "MD036": false,
-        "MD033" : false,
-        "MD031" : false
-    },
-    "cSpell.words": [
-        "webscript"
-    ]
+  "files.exclude": {
+    "**/.git": true,
+    "**/.svn": true,
+    "**/.hg": true,
+    "**/.DS_Store": true,
+    "**/coverage": true,
+    "**/.happypack": true
+  },
+  "editor.renderIndentGuides": true,
+  "markdownlint.config": {
+    "MD032": false,
+    "MD004": false,
+    "MD024": false,
+    "MD009": false,
+    "MD013": false,
+    "MD036": false,
+    "MD033": false,
+    "MD031": false
+  },
+  "cSpell.words": ["mincount", "webscript"]
 }
@@ -1,4 +1,4 @@
-### CORS solving strategies
+# CORS solving strategies

 The web client that we are building with the application development framework will be loaded from a different web server than the Alfresco Platform is running on.
 So we need to tell the Alfresco server that any request that comes in from this custom web client should be allowed access 
@@ -0,0 +1,23 @@
+# Contributor Code of Conduct
+
+We want to make everyone feel welcome to contribute to ADF.
+We promise to respect everyone who posts issues, updates documentation,
+submits pull requests, provides feedback in comments, or makes any other contribution to the project.
+
+We expect all discussion about the project (on GitHub, social media and other channels) to be positive and constructive.
+We do not accept personal attacks, trolling, public or private harassment, insults,
+or other unprofessional conduct towards anyone.
+
+We promise to show respect to all contributors regardless of their gender, gender identity,
+sexual orientation, disability, age, race, ethnicity, religion, or level of experience.
+
+We expect all contributors to understand and follow these standards
+If any member of the community does not follow the code of conduct,
+the maintainers will do whatever they consider appropriate to stop the unacceptable behavior.
+This may include removing issues, comments, and PRs or blocking accounts.
+Any bans may be temporary or permanent, at the maintainers’ discretion.
+
+Contact us if you see any behavior that breaks the code of conduct, whether it is directed at you or at anyone else.
+We take responsibility for making sure the code of conduct is clear and understandable,
+so you should also contact us if you think there is anything that needs to be explained better.
+Our contact email address is: [conduct@alfresco.com](mailto:conduct@alfresco.com)
@@ -1,4 +1,4 @@
-FROM nginx
+FROM nginx:alpine

 COPY demo-shell/nginx.conf /etc/nginx/nginx.conf

@@ -1,23 +0,0 @@
-# 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
@@ -57,3 +57,4 @@ app/**/*.d.ts

 dist/
 coverage/
+!/e2e/protractor.conf.js
@@ -1,177 +0,0 @@
-
-                              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
@@ -22,44 +22,24 @@ To simplify development and reduce the time to get the application started, we h

 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.
+If you would like to change default proxy settings, please edit the `proxy.conf.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. 
+All server-side application settings are stored in the [src/app.config.json](src/app.config.json). 
 By default the configuration files have the content similar to the following one:

 ```json
 {
-    "ecmHost": "http://localhost:3000/ecm",
-    "bpmHost": "http://localhost:3000/bpm",
+    "$schema": "../../lib/core/app-config/schema.json",
+    "ecmHost": "http://{hostname}:{port}",
+    "bpmHost": "http://{hostname}:{port}",
    "application": {
-        "name": "Alfresco"
+        "name": "Alfresco ADF Application"
    }
 }
 ```

-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
@@ -85,17 +65,10 @@ 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
+npm run start:dev
 ```
@@ -1,14 +0,0 @@
-const cpx = require('cpx');
-
-//Workaround for https://github.com/angular/angular-cli/issues/8783
-//we copy before the files in dist-dev-temp in the demo shell and after we let the angular cli watch over them..double wathh necessary for dev mode
-
-cpx.watch('../lib/core/prebuilt-themes/**/*.*', './dist-dev-temp/assets/prebuilt-themes')
-cpx.watch('../lib/core/assets/**/*.*', './dist-dev-temp/assets/' )
-cpx.watch('../lib/process-services/assets/**/*.*', './dist-dev-temp/assets/' )
-cpx.watch('../lib/content-services/assets/**/*.*', './dist-dev-temp/assets/' )
-
-cpx.watch('../lib/core/i18n/**/*.*', './dist-dev-temp//assets/adf-core/i18n' )
-cpx.watch('../lib/process-services/i18n/**/*.*', './dist-dev-temp/assets/adf-process-services/i18n' )
-cpx.watch('../lib/content-services/i18n/**/*.*', './dist-dev-temp/assets/adf-content-services/i18n' )
-cpx.watch('../lib/insights/i18n/**/*.*', './dist-dev-temp//assets/adf-insights/i18n' )
@@ -1,42 +0,0 @@
-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
-    ]
-};
@@ -1,14 +1,14 @@
 import { MyappPage } from './app.po';

 describe('myapp App', () => {
-  let page: MyappPage;
+    let page: MyappPage;

-  beforeEach(() => {
-    page = new MyappPage();
-  });
+    beforeEach(() => {
+        page = new MyappPage();
+    });

-  it('should display message saying app works', () => {
-    page.navigateTo();
-    expect(page.getParagraphText()).toEqual('app works!');
-  });
+    it('should display toolbar', () => {
+        page.navigateTo();
+        expect(page.getToolbar()).toBeDefined();
+    });
 });
@@ -1,11 +1,11 @@
 import { browser, element, by } from 'protractor';

 export class MyappPage {
-  navigateTo() {
-    return browser.get('/');
-  }
+    navigateTo() {
+        return browser.get('/');
+    }

-  getParagraphText() {
-    return element(by.css('app-root h1')).getText();
-  }
+    getToolbar() {
+        return element(by.tagName('adf-toolbar'));
+    }
 }
@@ -3,7 +3,7 @@

 module.exports = function (config) {
  config.set({
-    basePath: '',
+    basePath: './',
    frameworks: ['jasmine', '@angular/cli'],
    plugins: [
      require('karma-jasmine'),
@@ -21,5 +21,9 @@ http {
        location / {
            try_files $uri $uri/ /index.html;
        }
+
+        location ~ ^/[a-zA-Z0-9_-]+/ {
+            try_files $uri $uri/ /index.html;
+        }
    }
 }
@@ -1,30 +1,8 @@
 {
  "name": "Alfresco-ADF-Angular-Demo",
  "description": "Demo shell for Alfresco Angular components",
-  "version": "2.1.0",
+  "version": "2.4.0",
  "author": "Alfresco Software, Ltd.",
-  "scripts": {
-    "ng": "ng",
-    "prestart": "npm run validate-config",
-    "start": "npm run server-versions && rimraf dist && ng serve --host 0.0.0.0 --app dist --open --aot=false",
-    "start:dev": " npm run lint && npm run server-versions && rimraf dist && npm run clean-lib-angular && concurrently \"ng serve --host 0.0.0.0 --disable-host-check --app dev pp-dev --proxy-config proxy.conf.js --open\" \"npm run style:dev --watch\" \"npm run copy:dev\" ",
-    "start:dist": "npm run server-versions && rimraf dist && node --max_old_space_size=30000 node_modules/.bin/ng serve --prod --build-optimizer=false  --aot=false --host 0.0.0.0 --disable-host-check --app dist",
-    "build": "npm run validate-config && npm run server-versions && rimraf dist && ng build  --app dist",
-    "build:dev": "npm run validate-config && npm run lint && npm run style:dev && npm run server-versions && rimraf dist && ng build  --app dev",
-    "build:dist": "npm run validate-config && npm run style:dev && npm run server-versions && rimraf dist && node --max_old_space_size=30000 node_modules/.bin/ng build --prod  --build-optimizer=false  --aot=false --app dist",
-    "style:dev": "npm run webpack -- --config  config/webpack.style.js --progress --profile --bail",
-    "copy:dev": "node ./config/dev-copy-watch.js",
-    "test": "ng test",
-    "lint": "ng lint",
-    "e2e": "ng e2e",
-    "validate-config": "ajv validate -s ../lib/core/app-config/schema.json -d ./src/app.config.json --errors=text --verbose",
-    "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"
@@ -33,97 +11,11 @@
    "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": {
-    "@alfresco/adf-content-services": "2.1.0",
-    "@alfresco/adf-core": "2.1.0",
-    "@alfresco/adf-insights": "2.1.0",
-    "@alfresco/adf-process-services": "2.1.0",
-    "@angular/animations": "5.1.1",
-    "@angular/cdk": "5.0.1",
-    "@angular/common": "5.1.1",
-    "@angular/compiler": "5.1.1",
-    "@angular/core": "5.1.1",
-    "@angular/flex-layout": "2.0.0-beta.12",
-    "@angular/forms": "5.1.1",
-    "@angular/http": "5.1.1",
-    "@angular/material": "5.0.1",
-    "@angular/platform-browser": "5.1.1",
-    "@angular/platform-browser-dynamic": "5.1.1",
-    "@angular/router": "5.1.1",
-    "@mat-datetimepicker/core": "^1.0.1",
-    "@mat-datetimepicker/moment": "^1.0.1",
-    "@ngx-translate/core": "9.1.1",
-    "alfresco-js-api": "2.1.0",
-    "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.20.1",
-    "moment-es6": "^1.0.0",
-    "ng2-charts": "1.6.0",
-    "pdfjs-dist": "2.0.265",
-    "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-devkit/core": "0.0.28",
-    "@angular/cli": "1.6.5",
-    "@angular/compiler-cli": "^5.2.0",
-    "@angular/language-service": "^5.2.0",
-    "@types/jasmine": "~2.8.3",
-    "@types/jasminewd2": "~2.0.2",
-    "@types/node": "~6.0.60",
-    "ajv-cli": "^3.0.0",
-    "codelyzer": "4.1.0",
-    "concurrently": "^3.5.1",
-    "cpx": "^1.5.0",
-    "jasmine-core": "~2.8.0",
-    "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~2.0.0",
-    "karma-chrome-launcher": "~2.2.0",
-    "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",
-    "rimraf": "^2.6.2",
-    "ts-node": "~4.1.0",
-    "tslint": "~5.9.1",
-    "typescript": "~2.5.3"
-  }
+  "private": true
 }
@@ -21,7 +21,7 @@ exports.config = {
  },
  beforeLaunch: function() {
    require('ts-node').register({
-      project: 'e2e/tsconfig.e2e.json'
+      project: './demo-shell/e2e/tsconfig.e2e.json'
    });
  },
  onPrepare() {
@@ -1,4 +1,28 @@
 {
+  "APP": {
+    "INFO_DRAWER": {
+      "TITLE": "Details",
+      "COMMENTS": "Kommentare",
+      "PROPERTIES": "Eigenschaften",
+      "VERSIONS": "Versionen"
+    },
+    "ADF_VERSION_MANAGER": {
+      "ALLOW_DELETE": "Löschen zulassen",
+      "SHOW_COMMENTS": "Anmerkungen zu Versionen einblenden",
+      "ALLOW_DOWNLOAD": "Versions-Download zulassen",
+      "READ_ONLY": "Schreibgeschützt"
+    },
+    "PERSONAL-FILES": "Persönliche Dateien",
+    "WARN-MULTIPLE-UPLOADS": "Warnung bei Mehrfach-Uploads anzeigen.",
+    "SEARCH": {
+      "RADIO": {
+        "NONE": "Keine",
+        "ALL": "Alle",
+        "FOLDER": "Ordner",
+        "DOCUMENT": "Dokument"
+      }
+    }
+  },
  "title": "Willkommen",
  "VERSION": {
    "NO_PERMISSION": "Sie verfügen nicht über die nötige Berechtigung, um Versionen dieses Inhalts zu verwalten",
@@ -9,10 +33,17 @@
      "TITLE": "Versionen verwalten"
    }
  },
+  "METADATA": {
+    "DIALOG": {
+      "CLOSE": "Schließen",
+      "TITLE": "Metadaten"
+    }
+  },
  "APP_LAYOUT": {
    "APP_NAME": "ADF-Demoanwendung",
    "HOME": "Startseite",
    "CONTENT_SERVICES": "Content Services",
+    "BREADCRUMB": "Breadcrumb",
    "PROCESS_SERVICES": "Process Services",
    "LOGIN": "Anmelden",
    "CUSTOM_SOURCES": "Benutzerdefinierte Quellen",
@@ -20,9 +51,11 @@
    "DATATABLE_LAZY": "DataTable (Lazy)",
    "FORM": "Formular",
    "FORM_LIST": "Formularliste",
+    "FORM_LOADING": "Formular laden",
    "UPLOADER": "Uploader",
    "WEBSCRIPT": "Webscript",
    "TAG": "Tag",
+    "TRASHCAN": "Papierkorb",
    "SOCIAL": "Soziale Funktionen",
    "SETTINGS": "Einstellungen",
    "OVERLAY_VIEWER": "Overlay-Viewer",
@@ -33,6 +66,17 @@
    "SEARCH_CREATED_BY": "Erstellt von",
    "SEARCH_SERVICE_APPROACH": "Aktivieren Sie diese Option, um die Eingabeeigenschaft zu deaktivieren und die Nutzung des Services zu konfigurieren"
  },
+  "TRASHCAN": {
+    "ACTIONS": {
+      "DELETE_PERMANENT": "Endgültig löschen",
+      "RESTORE": "Wiederherstellen"
+    },
+    "EMPTY_STATE": {
+      "TITLE": "Papierkorb ist leer",
+      "FIRST_TEXT": "Gelöschte Elemente werden in den Papierkorb verschoben.",
+      "SECOND_TEXT": "Leeren Sie den Papierkorb, um die Elemente endgültig zu löschen."
+    }
+  },
  "DOCUMENT_LIST": {
    "MULTISELECT_CHECKBOXES": "Mehrfachauswahl (mit Kontrollkästchen)",
    "MULTIPLE_FILE_UPLOAD": "Mehrere Dateien hochladen",
@@ -43,23 +87,41 @@
    "DESCRIPTION_UPLOAD": "Hochladen aktivieren",
    "ENABLE_INFINITE_SCROLL": "Unendlich Scrollen aktivieren",
    "MULTISELECT_DESCRIPTION": "Mit der Befehls- (Mac) oder der Steuerungstaste (Windows) können Sie die Auswahl mehrerer Elemente umschalten",
-    "RECENT": "Zuletzt verwendete Dateien",
+    "RECENT": {
+      "EMPTY_STATE": {
+        "TITLE": "Die Liste der zuletzt verwendeten Dateien ist leer"
+      },
+      "TITLE": "Zuletzt verwendete Dateien"
+    },
    "COLUMNS": {
      "DISPLAY_NAME": "Namen anzeigen",
+      "IS_LOCKED": "Sperren",
      "TAG": "Tag",
      "CREATED_BY": "Erstellt von",
      "CREATED_ON": "Erstellt am",
-      "CREATED": "Erstellt"
+      "CREATED": "Erstellt",
+      "SIZE": "Größe",
+      "DELETED_ON": "Gelöscht",
+      "DELETED_BY": "Gelöscht von"
    },
    "TOOLBAR": {
      "CARDVIEW": "Kartenansichtsmodus",
      "NEW_FOLDER": "Neuer Ordner",
      "EDIT_FOLDER": "Ordner bearbeiten",
      "DOWNLOAD": "Herunterladen",
-      "DELETE": "Löschen"
+      "DELETE": "Löschen",
+      "FAVORITES": "Zu Favoriten hinzufügen",
+      "SHARE": "Freigeben",
+      "THEME": "Farbschema auswählen",
+      "SHOW_VERSION": "Version anzeigen",
+      "HIDE_VERSION": "Version ausblenden",
+      "LISTVIEW": "Listenansichtsmodus"
    },
    "ACTIONS": {
+      "VERSIONS": "Versionen verwalten",
+      "METADATA": "Info",
      "DOWNLOAD": "Herunterladen",
+      "PERMISSION": "Berechtigung",
      "FOLDER": {
        "COPY": "Kopieren",
        "MOVE": "Verschieben",
@@ -98,6 +160,13 @@
    "STORE": "Speichern",
    "RESTORE": "Wiederherstellen"
  },
+  "FORM-LOADING": {
+    "FORM_DATA": "Formulardaten",
+    "FORM_DATA_MESSAGE": "Geben Sie Werte ein, um das Formular auszufüllen",
+    "TYPEAHEAD_PLACEHOLDER": "Automatische Vervollständigung",
+    "RADIO_PLACEHOLDER": "Optionsschaltfläche",
+    "SELECT_PLACEHOLDER": "Dropdown"
+  },
  "LOGIN": {
    "CONTENT_SERVICES": "Content Services",
    "PROCESS_SERVICES": "Process Services",
@@ -115,5 +184,9 @@
    "LIST": "Content Services-Tagliste",
    "INSERT": "Node-ID einfügen",
    "NODE_LIST": "Tagliste nach Node-ID"
+  },
+  "DEMO_PERMISSION": {
+    "INHERIT_PERMISSION_BUTTON": "Berechtigungen erben",
+    "INHERITED_PERMISSIONS_BUTTON": "Berechtigungen geerbt"
  }
 }
@@ -1,142 +1,204 @@
 {
-    "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",
-      "DIALOG": {
-        "CLOSE": "Close",
-        "TITLE": "Manage Versions"
-      }
+  "APP": {
+    "INFO_DRAWER": {
+      "TITLE": "Details",
+      "COMMENTS": "Comments",
+      "PROPERTIES": "Properties",
+      "VERSIONS": "Versions"
    },
-   "METADATA": {
-      "DIALOG": {
-        "CLOSE": "Close",
-        "TITLE": "Metadata"
-      }
+    "HOME": {
+      "TITLE": "Angular components for Alfresco",
+      "DOCUMENTATION": "Documentation"
    },
-    "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",
-        "DATATABLE_LAZY": "Datatable (Lazy)",
-        "FORM": "Form",
-        "FORM_LIST": "Form List",
-        "UPLOADER": "Uploader",
-        "WEBSCRIPT": "Webscript",
-        "TAG": "Tag",
-        "TRASHCAN": "Trashcan",
-        "SOCIAL": "Social",
-        "SETTINGS": "Settings",
-        "OVERLAY_VIEWER": "Overlay Viewer",
-        "ABOUT": "About",
-        "SEARCH": "Extended Search",
-        "EXTENDED_SEARCH_QUERY_BODY": "Extended Search with Query Body",
-        "WORD_TO_SEARCH":"Search Word",
-        "SEARCH_CREATED_BY" : "Created By",
-        "SEARCH_SERVICE_APPROACH": "Check this to disable the input property and configure using the service"
+    "LOGOUT": {
+      "TITLE": "Logout Page",
+      "SUB_TITLE": "You are now logged out",
+      "LOGIN": "Login",
+      "HOME": "Home"
    },
-    "TRASHCAN" :{
-      "ACTIONS":{
-        "DELETE_PERMANENT":"Delete permanent",
-        "RESTORE":"Restore"
-      },
-      "EMPTY_STATE": {
-        "TITLE": "Trash is empty",
-        "FIRST_TEXT": "Items you delete are moved to the Trash.",
-        "SECOND_TEXT": "Empty Trash to permanently delete items."
-      }
-    },
-    "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",
-        "ENABLE_INFINITE_SCROLL":"Enable Infinite Scrolling",
-        "MULTISELECT_DESCRIPTION" : "Use Cmd (Mac) or Ctrl (Windows) to toggle selection of multiple items",
-        "RECENT" : "Recent Files",
-        "COLUMNS": {
-            "DISPLAY_NAME": "Display name",
-            "TAG": "Tag",
-            "CREATED_BY": "Created by",
-            "CREATED_ON": "Created on",
-            "CREATED": "Created",
-            "SIZE": "Size",
-            "DELETED_ON": "Deleted",
-            "DELETED_BY": "Deleted by"
-        },
-         "TOOLBAR": {
-           "CARDVIEW":"Card view mode",
-           "NEW_FOLDER":"New folder",
-           "EDIT_FOLDER":"Edit folder",
-           "DOWNLOAD":"Download",
-           "DELETE":"Delete"
-         },
-        "ACTIONS": {
-            "VERSIONS": "Manage versions",
-            "METADATA": "Info",
-            "DOWNLOAD": "Download",
-            "FOLDER": {
-                "COPY": "Copy",
-                "MOVE": "Move",
-                "DELETE": "Delete"
-            },
-            "DOCUMENT": {
-                "COPY": "Copy",
-                "MOVE": "Move",
-                "DELETE": "Delete",
-                "PROCESS_ACTION": "Start Process"
-            }
-        }
-    },
-    "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",
-        "PROCESS-AUDIT-LOG": "Process Audit log",
-        "TASK-AUDIT-LOG": "Task Audit log"
-    },
-    "FORM-LIST": {
-        "STORE": "Store",
-        "RESTORE": "Restore"
-    },
-    "LOGIN": {
-        "CONTENT_SERVICES": "Content Services",
-        "PROCESS_SERVICES": "Process Services",
-        "LOGIN_FOOTER": "Login footer"
+    "ADF_VERSION_MANAGER": {
+      "ALLOW_DELETE": "Allow delete",
+      "SHOW_COMMENTS": "Show comments on versions",
+      "ALLOW_DOWNLOAD": "Enable version download",
+      "READ_ONLY": "Read-only"
    },
+    "PERSONAL-FILES": "Personal Files",
+    "WARN-MULTIPLE-UPLOADS": "Display warning for multiple uploads.",
    "SEARCH": {
-        "RESULTS": "Search results",
-        "NO_RESULT": "No results found"
-    },
-    "SOCIAL": {
-        "LIKE":"Like component",
-        "RATING":"Rating component"
-    },
-    "TAG": {
-        "LIST":"List Tags Content Services",
-        "INSERT":"Insert Node ID",
-        "NODE_LIST":"Tag list By Node ID"
+      "RADIO": {
+        "NONE": "None",
+        "ALL": "All",
+        "FOLDER": "Folder",
+        "DOCUMENT": "Document"
+      }
    }
+  },
+  "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",
+    "DIALOG": {
+      "CLOSE": "Close",
+      "TITLE": "Manage Versions"
+    }
+  },
+  "METADATA": {
+    "DIALOG": {
+      "CLOSE": "Close",
+      "TITLE": "Metadata"
+    }
+  },
+  "APP_LAYOUT": {
+    "APP_NAME": "ADF Demo Application",
+    "HOME": "Home",
+    "CONTENT_SERVICES": "Content Services",
+    "BREADCRUMB": "Breadcrumb",
+    "PROCESS_SERVICES": "Process Services",
+    "LOGIN": "Login",
+    "CUSTOM_SOURCES": "Custom Sources",
+    "DATATABLE": "Datatable",
+    "DATATABLE_LAZY": "Datatable (Lazy)",
+    "FORM": "Form",
+    "FORM_LIST": "Form List",
+    "FORM_LOADING": "Form Loading",
+    "UPLOADER": "Uploader",
+    "WEBSCRIPT": "Webscript",
+    "TAG": "Tag",
+    "TRASHCAN": "Trashcan",
+    "SOCIAL": "Social",
+    "SETTINGS": "Settings",
+    "OVERLAY_VIEWER": "Overlay Viewer",
+    "ABOUT": "About",
+    "SEARCH": "Extended Search",
+    "NOTIFICATIONS": "Notifications",
+    "EXTENDED_SEARCH_QUERY_BODY": "Extended Search with Query Body",
+    "WORD_TO_SEARCH": "Search Word",
+    "SEARCH_CREATED_BY": "Created By",
+    "SEARCH_SERVICE_APPROACH": "Check this to disable the input property and configure using the service"
+  },
+  "TRASHCAN": {
+    "ACTIONS": {
+      "DELETE_PERMANENT": "Delete permanently",
+      "RESTORE": "Restore"
+    },
+    "EMPTY_STATE": {
+      "TITLE": "Trash is empty",
+      "FIRST_TEXT": "Items you delete are moved to the Trash.",
+      "SECOND_TEXT": "Empty Trash to permanently delete items."
+    }
+  },
+  "DOCUMENT_LIST": {
+    "MULTISELECT_CHECKBOXES": "Multiselect (with checkboxes)",
+    "THUMBNAILS" :"Enable Thumbnails",
+    "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",
+    "ENABLE_INFINITE_SCROLL": "Enable Infinite Scrolling",
+    "MULTISELECT_DESCRIPTION": "Use Cmd (Mac) or Ctrl (Windows) to toggle selection of multiple items",
+    "RECENT": {
+      "EMPTY_STATE": {
+        "TITLE": "Recent Files list is empty"
+      },
+      "TITLE": "Recent Files"
+    },
+    "COLUMNS": {
+      "DISPLAY_NAME": "Display name",
+      "IS_LOCKED": "Lock",
+      "TAG": "Tag",
+      "CREATED_BY": "Created by",
+      "CREATED_ON": "Created on",
+      "CREATED": "Created",
+      "SIZE": "Size",
+      "DELETED_ON": "Deleted",
+      "DELETED_BY": "Deleted by"
+    },
+    "TOOLBAR": {
+      "CARDVIEW": "Card view mode",
+      "NEW_FOLDER": "New folder",
+      "EDIT_FOLDER": "Edit folder",
+      "DOWNLOAD": "Download",
+      "DELETE": "Delete",
+      "FAVORITES": "Add to favorites",
+      "SHARE": "Share",
+      "THEME": "Select a theme",
+      "SHOW_VERSION": "Show version",
+      "HIDE_VERSION": "Hide version",
+      "LISTVIEW": "List view mode"
+    },
+    "ACTIONS": {
+      "VERSIONS": "Manage versions",
+      "METADATA": "Info",
+      "DOWNLOAD": "Download",
+      "PERMISSION": "Permission",
+      "FOLDER": {
+        "COPY": "Copy",
+        "MOVE": "Move",
+        "DELETE": "Delete"
+      },
+      "DOCUMENT": {
+        "COPY": "Copy",
+        "MOVE": "Move",
+        "DELETE": "Delete",
+        "PROCESS_ACTION": "Start Process"
+      }
+    }
+  },
+  "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",
+    "PROCESS-AUDIT-LOG": "Process Audit log",
+    "TASK-AUDIT-LOG": "Task Audit log"
+  },
+  "FORM-LIST": {
+    "STORE": "Store",
+    "RESTORE": "Restore"
+  },
+  "FORM-LOADING": {
+    "FORM_DATA": "Form Data",
+    "FORM_DATA_MESSAGE": "Enter values to populate the form",
+    "TYPEAHEAD_PLACEHOLDER": "Typeahead",
+    "RADIO_PLACEHOLDER": "Radio Button",
+    "SELECT_PLACEHOLDER": "DropDown"
+  },
+  "LOGIN": {
+    "CONTENT_SERVICES": "Content Services",
+    "PROCESS_SERVICES": "Process Services",
+    "LOGIN_FOOTER": "Login footer"
+  },
+  "SEARCH": {
+    "RESULTS": "Search results",
+    "NO_RESULT": "No results found"
+  },
+  "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_PERMISSION": {
+    "INHERIT_PERMISSION_BUTTON": "Inherit Permission",
+    "INHERITED_PERMISSIONS_BUTTON": "Permission Inherited"
+  }
 }
@@ -1,4 +1,28 @@
 {
+  "APP": {
+    "INFO_DRAWER": {
+      "TITLE": "Detalles",
+      "COMMENTS": "Comentarios",
+      "PROPERTIES": "Propiedades",
+      "VERSIONS": "Versiones"
+    },
+    "ADF_VERSION_MANAGER": {
+      "ALLOW_DELETE": "Permitir eliminar",
+      "SHOW_COMMENTS": "Mostrar comentarios en las versiones",
+      "ALLOW_DOWNLOAD": "Permitir descarga de la versión",
+      "READ_ONLY": "Solo lectura"
+    },
+    "PERSONAL-FILES": "Ficheros personales",
+    "WARN-MULTIPLE-UPLOADS": "Mostrar advertencia de múltiples cargas.",
+    "SEARCH": {
+      "RADIO": {
+        "NONE": "Ninguno",
+        "ALL": "Todos",
+        "FOLDER": "Carpeta",
+        "DOCUMENT": "Documento"
+      }
+    }
+  },
  "title": "Bienvenido",
  "VERSION": {
    "NO_PERMISSION": "No tiene permiso para administrar versiones de este contenido",
@@ -9,10 +33,17 @@
      "TITLE": "Gestionar versiones"
    }
  },
+  "METADATA": {
+    "DIALOG": {
+      "CLOSE": "Cerrar",
+      "TITLE": "Metadatos"
+    }
+  },
  "APP_LAYOUT": {
    "APP_NAME": "Aplicación ADF Demo",
    "HOME": "Inicio",
    "CONTENT_SERVICES": "Content Services",
+    "BREADCRUMB": "Ruta de navegación",
    "PROCESS_SERVICES": "Process Services",
    "LOGIN": "Iniciar sesión",
    "CUSTOM_SOURCES": "Fuentes personalizadas",
@@ -20,9 +51,11 @@
    "DATATABLE_LAZY": "Tabla de datos (diferida)",
    "FORM": "Formulario",
    "FORM_LIST": "Lista de formularios",
+    "FORM_LOADING": "Carga de formulario",
    "UPLOADER": "Cargador",
    "WEBSCRIPT": "Webscript",
    "TAG": "Etiqueta",
+    "TRASHCAN": "Papelera",
    "SOCIAL": "Social",
    "SETTINGS": "Configuración",
    "OVERLAY_VIEWER": "Visor de superposición",
@@ -33,6 +66,17 @@
    "SEARCH_CREATED_BY": "Creado por",
    "SEARCH_SERVICE_APPROACH": "Marque esto para desactivar la propiedad de entrada y configurar el uso del servicio"
  },
+  "TRASHCAN": {
+    "ACTIONS": {
+      "DELETE_PERMANENT": "Eliminar permanentemente",
+      "RESTORE": "Restaurar"
+    },
+    "EMPTY_STATE": {
+      "TITLE": "La papelera está vacía",
+      "FIRST_TEXT": "Los elementos que elimine se trasladan a la papelera.",
+      "SECOND_TEXT": "Vacíe la papelera para eliminar los elementos permanentemente."
+    }
+  },
  "DOCUMENT_LIST": {
    "MULTISELECT_CHECKBOXES": "Selección múltiple (con casillas)",
    "MULTIPLE_FILE_UPLOAD": "Carga de varios ficheros",
@@ -43,30 +87,47 @@
    "DESCRIPTION_UPLOAD": "Habilitar carga",
    "ENABLE_INFINITE_SCROLL": "Habilitar desplazamiento infinito",
    "MULTISELECT_DESCRIPTION": "Utilice Cmd (Mac) o Ctrl (Windows) para cambiar la selección de varios elementos",
-    "RECENT": "Ficheros recientes",
+    "RECENT": {
+      "EMPTY_STATE": {
+        "TITLE": "La lista de ficheros recientes está vacía"
+      },
+      "TITLE": "Ficheros recientes"
+    },
    "COLUMNS": {
      "DISPLAY_NAME": "Nombre a mostrar",
+      "IS_LOCKED": "Bloquear",
      "TAG": "Etiqueta",
      "CREATED_BY": "Creado por",
      "CREATED_ON": "Creado",
-      "CREATED": "Creado"
+      "CREATED": "Creado",
+      "SIZE": "Tamaño",
+      "DELETED_ON": "Eliminado",
+      "DELETED_BY": "Eliminado por"
    },
    "TOOLBAR": {
      "CARDVIEW": "Modo de vista de tarjeta",
      "NEW_FOLDER": "Nueva carpeta",
      "EDIT_FOLDER": "Editar carpeta",
      "DOWNLOAD": "Descargar",
-      "DELETE": "Eliminar"
+      "DELETE": "Eliminar",
+      "FAVORITES": "Añadir a Favoritos",
+      "SHARE": "Compartir",
+      "THEME": "Seleccionar un tema",
+      "SHOW_VERSION": "Mostrar versión",
+      "HIDE_VERSION": "Ocultar versión",
+      "LISTVIEW": "Modo de vista de lista"
    },
    "ACTIONS": {
+      "VERSIONS": "Gestionar versiones",
+      "METADATA": "Información",
      "DOWNLOAD": "Descargar",
+      "PERMISSION": "Permiso",
      "FOLDER": {
        "COPY": "Copiar",
        "MOVE": "Mover",
        "DELETE": "Eliminar"
      },
      "DOCUMENT": {
-        "DOWNLOAD": "Descargar",
        "COPY": "Copiar",
        "MOVE": "Mover",
        "DELETE": "Eliminar",
@@ -99,6 +160,13 @@
    "STORE": "Almacenar",
    "RESTORE": "Restaurar"
  },
+  "FORM-LOADING": {
+    "FORM_DATA": "Datos del formulario",
+    "FORM_DATA_MESSAGE": "Introduzca valores para rellenar el formulario",
+    "TYPEAHEAD_PLACEHOLDER": "Predictivo",
+    "RADIO_PLACEHOLDER": "Botón de opción",
+    "SELECT_PLACEHOLDER": "Desplegable"
+  },
  "LOGIN": {
    "CONTENT_SERVICES": "Content Services",
    "PROCESS_SERVICES": "Process Services",
@@ -116,5 +184,9 @@
    "LIST": "Lista de etiquetas de Content Services",
    "INSERT": "Insertar ID del nodo",
    "NODE_LIST": "Lista de etiquetas por ID de nodo"
+  },
+  "DEMO_PERMISSION": {
+    "INHERIT_PERMISSION_BUTTON": "Heredar permiso",
+    "INHERITED_PERMISSIONS_BUTTON": "Permiso heredado"
  }
 }
@@ -1,4 +1,28 @@
 {
+  "APP": {
+    "INFO_DRAWER": {
+      "TITLE": "Détails",
+      "COMMENTS": "Commentaires",
+      "PROPERTIES": "Propriétés",
+      "VERSIONS": "Versions"
+    },
+    "ADF_VERSION_MANAGER": {
+      "ALLOW_DELETE": "Autoriser la suppression",
+      "SHOW_COMMENTS": "Afficher les commentaires sur les versions",
+      "ALLOW_DOWNLOAD": "Autoriser le téléchargement de la version",
+      "READ_ONLY": "Lecture seule"
+    },
+    "PERSONAL-FILES": "Fichiers personnels",
+    "WARN-MULTIPLE-UPLOADS": "Avertir en cas de téléchargements multiples.",
+    "SEARCH": {
+      "RADIO": {
+        "NONE": "Aucune",
+        "ALL": "Tout",
+        "FOLDER": "Dossier",
+        "DOCUMENT": "Document"
+      }
+    }
+  },
  "title": "Bienvenue",
  "VERSION": {
    "NO_PERMISSION": "Vous n'avez pas les droits d'accès pour gérer les versions de ce contenu",
@@ -9,10 +33,17 @@
      "TITLE": "Gérer les versions"
    }
  },
+  "METADATA": {
+    "DIALOG": {
+      "CLOSE": "Fermer",
+      "TITLE": "Métadonnées"
+    }
+  },
  "APP_LAYOUT": {
    "APP_NAME": "Application Démo ADF",
    "HOME": "Accueil",
    "CONTENT_SERVICES": "Content Services",
+    "BREADCRUMB": "Fil d'Ariane",
    "PROCESS_SERVICES": "Process Services",
    "LOGIN": "Connexion",
    "CUSTOM_SOURCES": "Sources personnalisées",
@@ -20,9 +51,11 @@
    "DATATABLE_LAZY": "Table de données (différé)",
    "FORM": "Formulaire",
    "FORM_LIST": "Liste de formulaires",
+    "FORM_LOADING": "Chargement du formulaire",
    "UPLOADER": "Chargeur",
    "WEBSCRIPT": "Script Web",
    "TAG": "Tag",
+    "TRASHCAN": "Corbeille",
    "SOCIAL": "Réseaux sociaux",
    "SETTINGS": "Paramètres",
    "OVERLAY_VIEWER": "Visualisation de la superposition",
@@ -33,6 +66,17 @@
    "SEARCH_CREATED_BY": "Créé par",
    "SEARCH_SERVICE_APPROACH": "Cochez cette option pour désactiver la propriété d'entrée et configurer à partir du service"
  },
+  "TRASHCAN": {
+    "ACTIONS": {
+      "DELETE_PERMANENT": "Supprimer définitivement",
+      "RESTORE": "Restaurer"
+    },
+    "EMPTY_STATE": {
+      "TITLE": "La corbeille est vide",
+      "FIRST_TEXT": "Les éléments supprimés sont placés dans la corbeille.",
+      "SECOND_TEXT": "Videz la corbeille pour supprimer définitivement les éléments."
+    }
+  },
  "DOCUMENT_LIST": {
    "MULTISELECT_CHECKBOXES": "Sélection multiple (avec cases à cocher)",
    "MULTIPLE_FILE_UPLOAD": "Importation de fichiers multiples",
@@ -43,23 +87,41 @@
    "DESCRIPTION_UPLOAD": "Activer l'importation",
    "ENABLE_INFINITE_SCROLL": "Activer le défilement illimité",
    "MULTISELECT_DESCRIPTION": "Utiliser Cmd (Mac) ou Ctrl (Windows) pour activer/désactiver la sélection d'éléments multiples",
-    "RECENT": "Fichiers récents",
+    "RECENT": {
+      "EMPTY_STATE": {
+        "TITLE": "La liste des fichiers récents est vide"
+      },
+      "TITLE": "Fichiers récents"
+    },
    "COLUMNS": {
      "DISPLAY_NAME": "Nom affiché",
+      "IS_LOCKED": "Verrouiller",
      "TAG": "Tag",
      "CREATED_BY": "Créé par",
      "CREATED_ON": "Créé le",
-      "CREATED": "Créé"
+      "CREATED": "Créé",
+      "SIZE": "Taille",
+      "DELETED_ON": "Supprimé",
+      "DELETED_BY": "Supprimé par"
    },
    "TOOLBAR": {
      "CARDVIEW": "Mode d'affichage Carte",
      "NEW_FOLDER": "Nouveau Dossier",
      "EDIT_FOLDER": "Modifier le dossier",
      "DOWNLOAD": "Télécharger",
-      "DELETE": "Supprimer"
+      "DELETE": "Supprimer",
+      "FAVORITES": "Ajouter aux favoris",
+      "SHARE": "Partager",
+      "THEME": "Sélectionner un thème",
+      "SHOW_VERSION": "Afficher la version",
+      "HIDE_VERSION": "Masquer la version",
+      "LISTVIEW": "Mode Liste"
    },
    "ACTIONS": {
+      "VERSIONS": "Gérer les versions",
+      "METADATA": "Informations",
      "DOWNLOAD": "Télécharger",
+      "PERMISSION": "Droit d'accès",
      "FOLDER": {
        "COPY": "Copier",
        "MOVE": "Déplacer",
@@ -98,6 +160,13 @@
    "STORE": "Stocker",
    "RESTORE": "Restaurer"
  },
+  "FORM-LOADING": {
+    "FORM_DATA": "Données du formulaire",
+    "FORM_DATA_MESSAGE": "Entrez les valeurs pour remplir le formulaire",
+    "TYPEAHEAD_PLACEHOLDER": "Saisie semi-automatique",
+    "RADIO_PLACEHOLDER": "Case d'option",
+    "SELECT_PLACEHOLDER": "Liste déroulante"
+  },
  "LOGIN": {
    "CONTENT_SERVICES": "Content Services",
    "PROCESS_SERVICES": "Process Services",
@@ -115,5 +184,9 @@
    "LIST": "Liste de tags Content Services",
    "INSERT": "Insérer l'ID du nœud",
    "NODE_LIST": "Liste de tags par ID de nœud"
+  },
+  "DEMO_PERMISSION": {
+    "INHERIT_PERMISSION_BUTTON": "Hériter les droits d'accès",
+    "INHERITED_PERMISSIONS_BUTTON": "Droits d'accès hérités"
  }
 }
@@ -1,4 +1,28 @@
 {
+  "APP": {
+    "INFO_DRAWER": {
+      "TITLE": "Dettagli",
+      "COMMENTS": "Commenti",
+      "PROPERTIES": "Proprietà",
+      "VERSIONS": "Versione"
+    },
+    "ADF_VERSION_MANAGER": {
+      "ALLOW_DELETE": "Consenti eliminazione",
+      "SHOW_COMMENTS": "Mostra commenti sulle versioni",
+      "ALLOW_DOWNLOAD": "Abilita download versioni",
+      "READ_ONLY": "Sola lettura"
+    },
+    "PERSONAL-FILES": "File personali",
+    "WARN-MULTIPLE-UPLOADS": "Mostra avviso per caricamenti multipli.",
+    "SEARCH": {
+      "RADIO": {
+        "NONE": "Nessuno",
+        "ALL": "Tutti",
+        "FOLDER": "Cartella",
+        "DOCUMENT": "Documento"
+      }
+    }
+  },
  "title": "Benvenuto",
  "VERSION": {
    "NO_PERMISSION": "Non hai il permesso di gestire versioni di questo contenuto",
@@ -9,10 +33,17 @@
      "TITLE": "Gestione versioni"
    }
  },
+  "METADATA": {
+    "DIALOG": {
+      "CLOSE": "Chiudi",
+      "TITLE": "Metadati"
+    }
+  },
  "APP_LAYOUT": {
    "APP_NAME": "Applicazione demo ADF",
    "HOME": "Home",
    "CONTENT_SERVICES": "Content Services",
+    "BREADCRUMB": "Breadcrumb",
    "PROCESS_SERVICES": "Process Services",
    "LOGIN": "Login",
    "CUSTOM_SOURCES": "Fonti personalizzate",
@@ -20,9 +51,11 @@
    "DATATABLE_LAZY": "Caricamento dati (ottimizzato)",
    "FORM": "Modulo",
    "FORM_LIST": "Elenco moduli",
+    "FORM_LOADING": "Caricamento modulo",
    "UPLOADER": "Uploader",
    "WEBSCRIPT": "Webscript",
    "TAG": "Tag",
+    "TRASHCAN": "Cestino",
    "SOCIAL": "Social",
    "SETTINGS": "Impostazioni",
    "OVERLAY_VIEWER": "Visualizzatore overlay",
@@ -33,6 +66,17 @@
    "SEARCH_CREATED_BY": "Creato da",
    "SEARCH_SERVICE_APPROACH": "Selezionare per disattivare la proprietà di input ed eseguire la configurazione utilizzando il servizio"
  },
+  "TRASHCAN": {
+    "ACTIONS": {
+      "DELETE_PERMANENT": "Elimina definitivamente",
+      "RESTORE": "Ripristina"
+    },
+    "EMPTY_STATE": {
+      "TITLE": "Il cestino è vuoto",
+      "FIRST_TEXT": "Gli elementi eliminati vengono spostati nel cestino.",
+      "SECOND_TEXT": "Svuotare il cestino per eliminare definitivamente gli elementi."
+    }
+  },
  "DOCUMENT_LIST": {
    "MULTISELECT_CHECKBOXES": "Selezione multipla (con caselle di spunta)",
    "MULTIPLE_FILE_UPLOAD": "Caricamento di file multipli",
@@ -43,23 +87,41 @@
    "DESCRIPTION_UPLOAD": "Abilita caricamento",
    "ENABLE_INFINITE_SCROLL": "Abilita scorrimento infinito",
    "MULTISELECT_DESCRIPTION": "Usa Cmd (Mac) o Ctrl (Windows) per attivare/disattivare la selezione di più elementi",
-    "RECENT": "File recenti",
+    "RECENT": {
+      "EMPTY_STATE": {
+        "TITLE": "L'elenco File recenti è vuoto"
+      },
+      "TITLE": "File recenti"
+    },
    "COLUMNS": {
      "DISPLAY_NAME": "Nome visualizzato",
+      "IS_LOCKED": "Blocca",
      "TAG": "Tag",
      "CREATED_BY": "Creato da",
      "CREATED_ON": "Creato il",
-      "CREATED": "Creato"
+      "CREATED": "Creato",
+      "SIZE": "Dimensione",
+      "DELETED_ON": "Eliminato",
+      "DELETED_BY": "Eliminato da"
    },
    "TOOLBAR": {
      "CARDVIEW": "Modalità di visualizzazione scheda",
      "NEW_FOLDER": "Nuova cartella",
      "EDIT_FOLDER": "Modifica cartella",
      "DOWNLOAD": "Download",
-      "DELETE": "Elimina"
+      "DELETE": "Elimina",
+      "FAVORITES": "Aggiungi ai preferiti",
+      "SHARE": "Condividi",
+      "THEME": "Seleziona un tema",
+      "SHOW_VERSION": "Mostra versione",
+      "HIDE_VERSION": "Nascondi versione",
+      "LISTVIEW": "Modalità vista elenco"
    },
    "ACTIONS": {
+      "VERSIONS": "Gestione versioni",
+      "METADATA": "Informazioni",
      "DOWNLOAD": "Download",
+      "PERMISSION": "Permesso",
      "FOLDER": {
        "COPY": "Copia",
        "MOVE": "Sposta",
@@ -98,6 +160,13 @@
    "STORE": "Memorizza",
    "RESTORE": "Ripristina"
  },
+  "FORM-LOADING": {
+    "FORM_DATA": "Dati modulo",
+    "FORM_DATA_MESSAGE": "Inserire i dati per compilare il modulo",
+    "TYPEAHEAD_PLACEHOLDER": "Typeahead",
+    "RADIO_PLACEHOLDER": "Pulsante di opzione",
+    "SELECT_PLACEHOLDER": "Elenco a discesa"
+  },
  "LOGIN": {
    "CONTENT_SERVICES": "Content Services",
    "PROCESS_SERVICES": "Process Services",
@@ -115,5 +184,9 @@
    "LIST": "Elenco tag Content Services",
    "INSERT": "Inserisci ID nodo",
    "NODE_LIST": "Elenco tag per ID nodo"
+  },
+  "DEMO_PERMISSION": {
+    "INHERIT_PERMISSION_BUTTON": "Eredita permessi",
+    "INHERITED_PERMISSIONS_BUTTON": "Permesso ereditato"
  }
 }
@@ -1,4 +1,28 @@
 {
+  "APP": {
+    "INFO_DRAWER": {
+      "TITLE": "詳細",
+      "COMMENTS": "コメント",
+      "PROPERTIES": "プロパティ",
+      "VERSIONS": "バージョン"
+    },
+    "ADF_VERSION_MANAGER": {
+      "ALLOW_DELETE": "削除を許可する",
+      "SHOW_COMMENTS": "バージョンに関するコメントを表示",
+      "ALLOW_DOWNLOAD": "バージョンのダウンロードを許可する",
+      "READ_ONLY": "読取り専用"
+    },
+    "PERSONAL-FILES": "個人的なファイル",
+    "WARN-MULTIPLE-UPLOADS": "複数のアップロードの警告を表示します。",
+    "SEARCH": {
+      "RADIO": {
+        "NONE": "なし",
+        "ALL": "すべて",
+        "FOLDER": "フォルダ",
+        "DOCUMENT": "文書"
+      }
+    }
+  },
  "title": "ようこそ",
  "VERSION": {
    "NO_PERMISSION": "このコンテンツのバージョンを管理する権限がありません",
@@ -9,10 +33,17 @@
      "TITLE": "バージョンの管理"
    }
  },
+  "METADATA": {
+    "DIALOG": {
+      "CLOSE": "閉じる",
+      "TITLE": "メタデータ"
+    }
+  },
  "APP_LAYOUT": {
    "APP_NAME": "ADF デモアプリケーション",
    "HOME": "ホーム",
    "CONTENT_SERVICES": "Content Services",
+    "BREADCRUMB": "階層リンク",
    "PROCESS_SERVICES": "Process Services",
    "LOGIN": "ログイン",
    "CUSTOM_SOURCES": "カスタムソース",
@@ -20,9 +51,11 @@
    "DATATABLE_LAZY": "Datatable (遅延読み込み)",
    "FORM": "フォーム",
    "FORM_LIST": "フォームリスト",
+    "FORM_LOADING": "フォームを読み込んでいます",
    "UPLOADER": "アップローダー",
    "WEBSCRIPT": "Webscript",
    "TAG": "タグ",
+    "TRASHCAN": "ごみ箱",
    "SOCIAL": "ソーシャル",
    "SETTINGS": "設定",
    "OVERLAY_VIEWER": "オーバーレイビューア",
@@ -33,6 +66,17 @@
    "SEARCH_CREATED_BY": "作成者",
    "SEARCH_SERVICE_APPROACH": "入力プロパティを無効にし、サービスを使って設定する場合は、このチェックボックスをオンにします"
  },
+  "TRASHCAN": {
+    "ACTIONS": {
+      "DELETE_PERMANENT": "完全に削除する",
+      "RESTORE": "復元"
+    },
+    "EMPTY_STATE": {
+      "TITLE": "ごみ箱は空です",
+      "FIRST_TEXT": "削除するアイテムはごみ箱に移動されます。",
+      "SECOND_TEXT": "ごみ箱を空にするとアイテムが完全に削除されます。"
+    }
+  },
  "DOCUMENT_LIST": {
    "MULTISELECT_CHECKBOXES": "複数選択 (チェックボックスを使用)",
    "MULTIPLE_FILE_UPLOAD": "複数ファイルのアップロード",
@@ -43,23 +87,41 @@
    "DESCRIPTION_UPLOAD": "アップロードを有効にします",
    "ENABLE_INFINITE_SCROLL": "無限スクロールを有効にする",
    "MULTISELECT_DESCRIPTION": "複数選択の切り替えを行うには、Cmd (Mac) キーまたは Ctrl (Windows) キーを押します",
-    "RECENT": "最近使ったファイル",
+    "RECENT": {
+      "EMPTY_STATE": {
+        "TITLE": "[最近使ったファイル] 一覧は空です"
+      },
+      "TITLE": "最近使ったファイル"
+    },
    "COLUMNS": {
      "DISPLAY_NAME": "表示名",
+      "IS_LOCKED": "ロック",
      "TAG": "タグ",
      "CREATED_BY": "作成者",
      "CREATED_ON": "作成日",
-      "CREATED": "作成日"
+      "CREATED": "作成日",
+      "SIZE": "サイズ",
+      "DELETED_ON": "削除済み",
+      "DELETED_BY": "削除者"
    },
    "TOOLBAR": {
      "CARDVIEW": "カード表示モード",
      "NEW_FOLDER": "新しいフォルダ",
      "EDIT_FOLDER": "フォルダの編集",
      "DOWNLOAD": "ダウンロード",
-      "DELETE": "削除"
+      "DELETE": "削除",
+      "FAVORITES": "[お気に入り] に追加",
+      "SHARE": "共有",
+      "THEME": "テーマを選択してください",
+      "SHOW_VERSION": "バージョンを表示する",
+      "HIDE_VERSION": "バージョンを隠す",
+      "LISTVIEW": "一覧表示モード"
    },
    "ACTIONS": {
+      "VERSIONS": "バージョンの管理",
+      "METADATA": "情報",
      "DOWNLOAD": "ダウンロード",
+      "PERMISSION": "権限",
      "FOLDER": {
        "COPY": "コピー",
        "MOVE": "移動",
@@ -98,6 +160,13 @@
    "STORE": "保存",
    "RESTORE": "復元"
  },
+  "FORM-LOADING": {
+    "FORM_DATA": "フォーム データ",
+    "FORM_DATA_MESSAGE": "フォームに入力する値を入力してください",
+    "TYPEAHEAD_PLACEHOLDER": "先行入力",
+    "RADIO_PLACEHOLDER": "ラジオ ボタン",
+    "SELECT_PLACEHOLDER": "ドロップダウン"
+  },
  "LOGIN": {
    "CONTENT_SERVICES": "Content Services",
    "PROCESS_SERVICES": "Process Services",
@@ -115,5 +184,9 @@
    "LIST": "Content Services のタグリスト",
    "INSERT": "ノード ID の挿入",
    "NODE_LIST": "ノード ID 別タグリスト"
+  },
+  "DEMO_PERMISSION": {
+    "INHERIT_PERMISSION_BUTTON": "権限の継承",
+    "INHERITED_PERMISSIONS_BUTTON": "継承された権限"
  }
 }
@@ -1,4 +1,28 @@
 {
+  "APP": {
+    "INFO_DRAWER": {
+      "TITLE": "Detaljer",
+      "COMMENTS": "Kommentarer",
+      "PROPERTIES": "Egenskaper",
+      "VERSIONS": "Versjoner"
+    },
+    "ADF_VERSION_MANAGER": {
+      "ALLOW_DELETE": "Tillat sletting",
+      "SHOW_COMMENTS": "Vis kommentarer om versjoner",
+      "ALLOW_DOWNLOAD": "Tillat versjonsnedlasting",
+      "READ_ONLY": "Skrivebeskyttet"
+    },
+    "PERSONAL-FILES": "Personlige filer",
+    "WARN-MULTIPLE-UPLOADS": "Vis advarsel for flere opplastinger.",
+    "SEARCH": {
+      "RADIO": {
+        "NONE": "Ingen",
+        "ALL": "Alle",
+        "FOLDER": "Mappe",
+        "DOCUMENT": "Dokument"
+      }
+    }
+  },
  "title": "Velkommen",
  "VERSION": {
    "NO_PERMISSION": "Du har ikke tillatelse til å håndtere versjoner av dette innholdet",
@@ -9,10 +33,17 @@
      "TITLE": "Håndtere versjoner"
    }
  },
+  "METADATA": {
+    "DIALOG": {
+      "CLOSE": "Lukk",
+      "TITLE": "Metadata"
+    }
+  },
  "APP_LAYOUT": {
    "APP_NAME": "ADF-demoprogam",
    "HOME": "Hjem",
    "CONTENT_SERVICES": "Content Services",
+    "BREADCRUMB": "Søkebane",
    "PROCESS_SERVICES": "Process Services",
    "LOGIN": "Logg på",
    "CUSTOM_SOURCES": "Tilpassede kilder",
@@ -20,9 +51,11 @@
    "DATATABLE_LAZY": "Datatabell (avventende)",
    "FORM": "Skjema",
    "FORM_LIST": "Skjemaliste",
+    "FORM_LOADING": "Skjema lastes inn",
    "UPLOADER": "Opplaster",
    "WEBSCRIPT": "Webscript",
    "TAG": "Tagg",
+    "TRASHCAN": "Søppelkurv",
    "SOCIAL": "Sosial",
    "SETTINGS": "Innstillinger",
    "OVERLAY_VIEWER": "Overleggsfremviser",
@@ -33,6 +66,17 @@
    "SEARCH_CREATED_BY": "Opprettet av",
    "SEARCH_SERVICE_APPROACH": "Velg dette for å deaktivere inndataegenskapen og konfigurere ved hjelp av tjenesten"
  },
+  "TRASHCAN": {
+    "ACTIONS": {
+      "DELETE_PERMANENT": "Slett for godt",
+      "RESTORE": "Gjenopprett"
+    },
+    "EMPTY_STATE": {
+      "TITLE": "Søppelkurven er tom",
+      "FIRST_TEXT": "Elementer du sletter, flyttes til søppelkurven.",
+      "SECOND_TEXT": "Tøm søppelkurven for å slette elementer for godt."
+    }
+  },
  "DOCUMENT_LIST": {
    "MULTISELECT_CHECKBOXES": "Multivalg (med avskrysningsbokser)",
    "MULTIPLE_FILE_UPLOAD": "Opplasting av flere filer",
@@ -43,23 +87,41 @@
    "DESCRIPTION_UPLOAD": "Aktiver opplasting",
    "ENABLE_INFINITE_SCROLL": "Aktiver uendelig rulling",
    "MULTISELECT_DESCRIPTION": "Bruk Cmd (Mac) eller Ctrl (Windows) for å veksle mellom valg av flere elementer",
-    "RECENT": "Nylig brukte filer",
+    "RECENT": {
+      "EMPTY_STATE": {
+        "TITLE": "Nylige filer-listen er tom"
+      },
+      "TITLE": "Nylige filer"
+    },
    "COLUMNS": {
      "DISPLAY_NAME": "Vis navn",
+      "IS_LOCKED": "Lås",
      "TAG": "Tagg",
      "CREATED_BY": "Opprettet av",
      "CREATED_ON": "Opprettet",
-      "CREATED": "Opprettet"
+      "CREATED": "Opprettet",
+      "SIZE": "Størrelse",
+      "DELETED_ON": "Slettet",
+      "DELETED_BY": "Slettet av"
    },
    "TOOLBAR": {
      "CARDVIEW": "Kortvisningsmodus",
      "NEW_FOLDER": "Ny mappe",
      "EDIT_FOLDER": "Rediger mappe",
      "DOWNLOAD": "Last ned",
-      "DELETE": "Slett"
+      "DELETE": "Slett",
+      "FAVORITES": "Legg til favoritter",
+      "SHARE": "Del",
+      "THEME": "Velg et tema",
+      "SHOW_VERSION": "Vis versjon",
+      "HIDE_VERSION": "Skjul versjon",
+      "LISTVIEW": "Listevisningsmodus"
    },
    "ACTIONS": {
+      "VERSIONS": "Administrer versjoner",
+      "METADATA": "Info",
      "DOWNLOAD": "Last ned",
+      "PERMISSION": "Tillatelse",
      "FOLDER": {
        "COPY": "Kopier",
        "MOVE": "Flytt",
@@ -98,6 +160,13 @@
    "STORE": "Lagre",
    "RESTORE": "Gjenopprett"
  },
+  "FORM-LOADING": {
+    "FORM_DATA": "Skjemadata",
+    "FORM_DATA_MESSAGE": "Skriv inn verdier for å fylle ut skjemaet",
+    "TYPEAHEAD_PLACEHOLDER": "Type-ahead",
+    "RADIO_PLACEHOLDER": "Alternativknapp",
+    "SELECT_PLACEHOLDER": "Nedtrekk"
+  },
  "LOGIN": {
    "CONTENT_SERVICES": "Content Services",
    "PROCESS_SERVICES": "Process Services",
@@ -115,5 +184,9 @@
    "LIST": "Liste med tagger Innholdstjenester",
    "INSERT": "Sett inn node-ID",
    "NODE_LIST": "Tagg listen etter node-ID"
+  },
+  "DEMO_PERMISSION": {
+    "INHERIT_PERMISSION_BUTTON": "Arv tillatelse",
+    "INHERITED_PERMISSIONS_BUTTON": "Tillatelse arvet"
  }
 }
@@ -1,4 +1,28 @@
 {
+  "APP": {
+    "INFO_DRAWER": {
+      "TITLE": "Details",
+      "COMMENTS": "Opmerkingen",
+      "PROPERTIES": "Eigenschappen",
+      "VERSIONS": "Versies"
+    },
+    "ADF_VERSION_MANAGER": {
+      "ALLOW_DELETE": "Verwijderen toestaan",
+      "SHOW_COMMENTS": "Opmerkingen over versies tonen",
+      "ALLOW_DOWNLOAD": "Downloaden van versies toestaan",
+      "READ_ONLY": "Alleen-lezen"
+    },
+    "PERSONAL-FILES": "Persoonlijke bestanden",
+    "WARN-MULTIPLE-UPLOADS": "Waarschuwing weergeven bij meerdere uploads.",
+    "SEARCH": {
+      "RADIO": {
+        "NONE": "Geen",
+        "ALL": "Alle",
+        "FOLDER": "Map",
+        "DOCUMENT": "Document"
+      }
+    }
+  },
  "title": "Welkom",
  "VERSION": {
    "NO_PERMISSION": "U hebt geen rechten voor het beheren van versies van deze content",
@@ -9,10 +33,17 @@
      "TITLE": "Versies beheren"
    }
  },
+  "METADATA": {
+    "DIALOG": {
+      "CLOSE": "Sluiten",
+      "TITLE": "Metagegevens"
+    }
+  },
  "APP_LAYOUT": {
    "APP_NAME": "ADF-demotoepassing",
    "HOME": "Home",
    "CONTENT_SERVICES": "Content Services",
+    "BREADCRUMB": "Navigatiepad",
    "PROCESS_SERVICES": "Process Services",
    "LOGIN": "Aanmelden",
    "CUSTOM_SOURCES": "Aangepaste bronnen",
@@ -20,9 +51,11 @@
    "DATATABLE_LAZY": "Datatable (vertraagd)",
    "FORM": "Formulier",
    "FORM_LIST": "Formulierlijst",
+    "FORM_LOADING": "Formulier laden",
    "UPLOADER": "Uploader",
    "WEBSCRIPT": "Webscript",
    "TAG": "Tag",
+    "TRASHCAN": "Prullenbak",
    "SOCIAL": "Sociaal",
    "SETTINGS": "Instellingen",
    "OVERLAY_VIEWER": "Overlay-viewer",
@@ -33,6 +66,17 @@
    "SEARCH_CREATED_BY": "Gemaakt door",
    "SEARCH_SERVICE_APPROACH": "Schakel dit in om de invoereigenschap uit te schakelen en om te configureren via de service"
  },
+  "TRASHCAN": {
+    "ACTIONS": {
+      "DELETE_PERMANENT": "Definitief verwijderen",
+      "RESTORE": "Herstellen"
+    },
+    "EMPTY_STATE": {
+      "TITLE": "Prullenbak is leeg",
+      "FIRST_TEXT": "Items die u verwijdert, worden verplaatst naar de prullenbak.",
+      "SECOND_TEXT": "Leeg de prullenmand om items definitief te verwijderen."
+    }
+  },
  "DOCUMENT_LIST": {
    "MULTISELECT_CHECKBOXES": "Multiselect (met selectievakjes)",
    "MULTIPLE_FILE_UPLOAD": "Meerdere bestanden uploaden",
@@ -43,23 +87,41 @@
    "DESCRIPTION_UPLOAD": "Uploaden inschakelen",
    "ENABLE_INFINITE_SCROLL": "Oneindig scrollen inschakelen",
    "MULTISELECT_DESCRIPTION": "Cmd (Mac) of Ctrl (Windows) gebruiken om de selectie van meerdere items in of uit te schakelen",
-    "RECENT": "Recente bestanden",
+    "RECENT": {
+      "EMPTY_STATE": {
+        "TITLE": "Lijst met recente bestanden is leeg"
+      },
+      "TITLE": "Recente bestanden"
+    },
    "COLUMNS": {
      "DISPLAY_NAME": "Getoonde naam",
+      "IS_LOCKED": "Vergrendeling",
      "TAG": "Tag",
      "CREATED_BY": "Gemaakt door",
      "CREATED_ON": "Gemaakt op",
-      "CREATED": "Gemaakt"
+      "CREATED": "Gemaakt",
+      "SIZE": "Grootte",
+      "DELETED_ON": "Verwijderd",
+      "DELETED_BY": "Verwijderd door"
    },
    "TOOLBAR": {
      "CARDVIEW": "Kaartweergavemodus",
      "NEW_FOLDER": "Nieuwe map",
      "EDIT_FOLDER": "Map bewerken",
      "DOWNLOAD": "Downloaden",
-      "DELETE": "Verwijderen"
+      "DELETE": "Verwijderen",
+      "FAVORITES": "Toevoegen aan favorieten",
+      "SHARE": "Delen",
+      "THEME": "Een thema selecteren",
+      "SHOW_VERSION": "Versie weergeven",
+      "HIDE_VERSION": "Versie verbergen",
+      "LISTVIEW": "Lijstweergavemodus"
    },
    "ACTIONS": {
+      "VERSIONS": "Versies beheren",
+      "METADATA": "Info",
      "DOWNLOAD": "Downloaden",
+      "PERMISSION": "Machtiging",
      "FOLDER": {
        "COPY": "Kopiëren",
        "MOVE": "Verplaatsen",
@@ -98,6 +160,13 @@
    "STORE": "Opslaan",
    "RESTORE": "Herstellen"
  },
+  "FORM-LOADING": {
+    "FORM_DATA": "Formuliergegevens",
+    "FORM_DATA_MESSAGE": "Voer waarden in om het formulier in te vullen",
+    "TYPEAHEAD_PLACEHOLDER": "Automatische voltooiing",
+    "RADIO_PLACEHOLDER": "Keuzerondje",
+    "SELECT_PLACEHOLDER": "Dropdown"
+  },
  "LOGIN": {
    "CONTENT_SERVICES": "Content Services",
    "PROCESS_SERVICES": "Process Services",
@@ -115,5 +184,9 @@
    "LIST": "Taglijst Content Services",
    "INSERT": "Node-id invoegen",
    "NODE_LIST": "Taglijst per node-id"
+  },
+  "DEMO_PERMISSION": {
+    "INHERIT_PERMISSION_BUTTON": "Machtiging overnemen",
+    "INHERITED_PERMISSIONS_BUTTON": "Machtiging overgenomen"
  }
 }
@@ -1,4 +1,28 @@
 {
+  "APP": {
+    "INFO_DRAWER": {
+      "TITLE": "Detalhes",
+      "COMMENTS": "Comentários",
+      "PROPERTIES": "Propriedades",
+      "VERSIONS": "Versões"
+    },
+    "ADF_VERSION_MANAGER": {
+      "ALLOW_DELETE": "Permitir apagar",
+      "SHOW_COMMENTS": "Mostrar comentários em versões",
+      "ALLOW_DOWNLOAD": "Permitir download da versão",
+      "READ_ONLY": "Somente leitura"
+    },
+    "PERSONAL-FILES": "Arquivos pessoais",
+    "WARN-MULTIPLE-UPLOADS": "Exibir alerta para vários uploads.",
+    "SEARCH": {
+      "RADIO": {
+        "NONE": "Nenhum",
+        "ALL": "Todos",
+        "FOLDER": "Pasta",
+        "DOCUMENT": "Documento"
+      }
+    }
+  },
  "title": "Bem-vindo",
  "VERSION": {
    "NO_PERMISSION": "Você não tem permissão para gerenciar versões deste conteúdo",
@@ -9,10 +33,17 @@
      "TITLE": "Gerenciar versões"
    }
  },
+  "METADATA": {
+    "DIALOG": {
+      "CLOSE": "Fechar",
+      "TITLE": "Metadados"
+    }
+  },
  "APP_LAYOUT": {
    "APP_NAME": "Aplicativo Demo ADF",
    "HOME": "Página Inicial",
    "CONTENT_SERVICES": "Content Services",
+    "BREADCRUMB": "Trilha de navegação",
    "PROCESS_SERVICES": "Process Services",
    "LOGIN": "Login",
    "CUSTOM_SOURCES": "Origens Personalizadas",
@@ -20,9 +51,11 @@
    "DATATABLE_LAZY": "Datatable (Sob demanda)",
    "FORM": "Formulário",
    "FORM_LIST": "Lista de Formulário",
+    "FORM_LOADING": "Carregamento de formulário",
    "UPLOADER": "Carregador",
    "WEBSCRIPT": "Webscript",
    "TAG": "Marca",
+    "TRASHCAN": "Lixeira",
    "SOCIAL": "Social",
    "SETTINGS": "Configurações",
    "OVERLAY_VIEWER": "Visualizador de sobreposição",
@@ -33,6 +66,17 @@
    "SEARCH_CREATED_BY": "Criado por",
    "SEARCH_SERVICE_APPROACH": "Marque essa opção para desativar a inserção e configurar a utilização do serviço"
  },
+  "TRASHCAN": {
+    "ACTIONS": {
+      "DELETE_PERMANENT": "Apagar permanentemente",
+      "RESTORE": "Restaurar"
+    },
+    "EMPTY_STATE": {
+      "TITLE": "A lixeira está vazia",
+      "FIRST_TEXT": "Itens apagados são movidos para a Lixeira.",
+      "SECOND_TEXT": "Esvazie a Lixeira para apagar os itens permanentemente."
+    }
+  },
  "DOCUMENT_LIST": {
    "MULTISELECT_CHECKBOXES": "Seleção Múltipla (com caixas de seleção)",
    "MULTIPLE_FILE_UPLOAD": "Carregamento de Vários Arquivos",
@@ -43,23 +87,41 @@
    "DESCRIPTION_UPLOAD": "Ativar carregamento",
    "ENABLE_INFINITE_SCROLL": "Ativar rolagem infinita",
    "MULTISELECT_DESCRIPTION": "Use Cmd (Mac) ou Ctrl (Windows) para alternar a seleção de vários itens",
-    "RECENT": "Arquivos recentes",
+    "RECENT": {
+      "EMPTY_STATE": {
+        "TITLE": "A lista de Arquivos recentes está vazia"
+      },
+      "TITLE": "Arquivos recentes"
+    },
    "COLUMNS": {
      "DISPLAY_NAME": "Nome de exibição",
+      "IS_LOCKED": "Bloqueio",
      "TAG": "Marca",
      "CREATED_BY": "Criado por",
      "CREATED_ON": "Criado em",
-      "CREATED": "Criado"
+      "CREATED": "Criado",
+      "SIZE": "Tamanho",
+      "DELETED_ON": "Excluído",
+      "DELETED_BY": "Excluído por"
    },
    "TOOLBAR": {
      "CARDVIEW": "Modo de visualização de cartão",
      "NEW_FOLDER": "Nova Pasta",
      "EDIT_FOLDER": "Editar pasta",
      "DOWNLOAD": "Download",
-      "DELETE": "Excluir"
+      "DELETE": "Excluir",
+      "FAVORITES": "Adicionar aos favoritos",
+      "SHARE": "Compartilhar",
+      "THEME": "Selecionar um tema",
+      "SHOW_VERSION": "Mostrar versão",
+      "HIDE_VERSION": "Ocultar versão",
+      "LISTVIEW": "Modo de exibição em lista"
    },
    "ACTIONS": {
+      "VERSIONS": "Gerenciar versões",
+      "METADATA": "Informações",
      "DOWNLOAD": "Download",
+      "PERMISSION": "Permissão",
      "FOLDER": {
        "COPY": "Copiar",
        "MOVE": "Mover",
@@ -98,6 +160,13 @@
    "STORE": "Armazenar",
    "RESTORE": "Restaurar"
  },
+  "FORM-LOADING": {
+    "FORM_DATA": "Dados do formulário",
+    "FORM_DATA_MESSAGE": "Insira os valores para preencher o formulário",
+    "TYPEAHEAD_PLACEHOLDER": "Campo de sugestão",
+    "RADIO_PLACEHOLDER": "Botão de opção",
+    "SELECT_PLACEHOLDER": "Lista suspensa"
+  },
  "LOGIN": {
    "CONTENT_SERVICES": "Content Services",
    "PROCESS_SERVICES": "Process Services",
@@ -115,5 +184,9 @@
    "LIST": "Lista de Marcas do Content Services",
    "INSERT": "Inserir ID de Nó",
    "NODE_LIST": "Lista de marcas por ID de Nó"
+  },
+  "DEMO_PERMISSION": {
+    "INHERIT_PERMISSION_BUTTON": "Herdar permissão",
+    "INHERITED_PERMISSIONS_BUTTON": "Permissão herdada"
  }
 }
@@ -1,4 +1,28 @@
 {
+  "APP": {
+    "INFO_DRAWER": {
+      "TITLE": "Сведения",
+      "COMMENTS": "Комментарии",
+      "PROPERTIES": "Свойства",
+      "VERSIONS": "Версии"
+    },
+    "ADF_VERSION_MANAGER": {
+      "ALLOW_DELETE": "Разрешить удаление",
+      "SHOW_COMMENTS": "Показать комментарии к версиям",
+      "ALLOW_DOWNLOAD": "Разрешить загрузку версии",
+      "READ_ONLY": "Только чтение"
+    },
+    "PERSONAL-FILES": "Личные файлы",
+    "WARN-MULTIPLE-UPLOADS": "Показывать предупреждение для нескольких загрузок.",
+    "SEARCH": {
+      "RADIO": {
+        "NONE": "Нет",
+        "ALL": "Все",
+        "FOLDER": "Папка",
+        "DOCUMENT": "Документ"
+      }
+    }
+  },
  "title": "Добро пожаловать",
  "VERSION": {
    "NO_PERMISSION": "У вас нет разрешения на управление версиями этого контента",
@@ -9,10 +33,17 @@
      "TITLE": "Управление версиями"
    }
  },
+  "METADATA": {
+    "DIALOG": {
+      "CLOSE": "Закрыть",
+      "TITLE": "Метаданные"
+    }
+  },
  "APP_LAYOUT": {
    "APP_NAME": "Демонстрационное приложение ADF",
    "HOME": "Домашняя",
    "CONTENT_SERVICES": "Content Services",
+    "BREADCRUMB": "Иерархия",
    "PROCESS_SERVICES": "Process Services",
    "LOGIN": "Войти",
    "CUSTOM_SOURCES": "Пользовательские источники",
@@ -20,9 +51,11 @@
    "DATATABLE_LAZY": "Таблица данных (частичная загрузка)",
    "FORM": "Форма",
    "FORM_LIST": "Список форм",
+    "FORM_LOADING": "Загрузка формы",
    "UPLOADER": "Загрузчик",
    "WEBSCRIPT": "Webscript",
    "TAG": "Метка",
+    "TRASHCAN": "Корзина",
    "SOCIAL": "Социальный",
    "SETTINGS": "Параметры",
    "OVERLAY_VIEWER": "Просмотр наложения",
@@ -33,6 +66,17 @@
    "SEARCH_CREATED_BY": "Создано пользователем",
    "SEARCH_SERVICE_APPROACH": "Установите флажок, чтобы отключить свойство ввода и настроить, используя службу."
  },
+  "TRASHCAN": {
+    "ACTIONS": {
+      "DELETE_PERMANENT": "Удалить навсегда",
+      "RESTORE": "Восстановить"
+    },
+    "EMPTY_STATE": {
+      "TITLE": "Корзина пуста",
+      "FIRST_TEXT": "Элементы, которые вы удаляете, перемещаются в корзину.",
+      "SECOND_TEXT": "Очистите корзину, чтобы удалить элементы навсегда."
+    }
+  },
  "DOCUMENT_LIST": {
    "MULTISELECT_CHECKBOXES": "Выбор нескольких вариантов (с флажками)",
    "MULTIPLE_FILE_UPLOAD": "Загрузка нескольких файлов",
@@ -43,23 +87,41 @@
    "DESCRIPTION_UPLOAD": "Включить загрузку",
    "ENABLE_INFINITE_SCROLL": "Включить бесконечную прокрутку",
    "MULTISELECT_DESCRIPTION": "Использовать кнопку Cmd (Mac) или Ctrl (Windows) для переключения выбора нескольких элементов",
-    "RECENT": "Недавние файлы",
+    "RECENT": {
+      "EMPTY_STATE": {
+        "TITLE": "Список последних файлов пуст"
+      },
+      "TITLE": "Последние файлы"
+    },
    "COLUMNS": {
      "DISPLAY_NAME": "Отображаемое имя",
+      "IS_LOCKED": "Блокировка",
      "TAG": "Метка",
      "CREATED_BY": "Создано пользователем",
      "CREATED_ON": "Дата создания",
-      "CREATED": "Создано"
+      "CREATED": "Создано",
+      "SIZE": "Размер",
+      "DELETED_ON": "Удаленные",
+      "DELETED_BY": "Удалено пользователем"
    },
    "TOOLBAR": {
      "CARDVIEW": "Режим просмотра карты",
      "NEW_FOLDER": "Новая папка",
      "EDIT_FOLDER": "Редактировать папку",
      "DOWNLOAD": "Скачать",
-      "DELETE": "Удалить"
+      "DELETE": "Удалить",
+      "FAVORITES": "Добавить в избранное",
+      "SHARE": "Открыть доступ",
+      "THEME": "Выберите тему",
+      "SHOW_VERSION": "Показать версию",
+      "HIDE_VERSION": "Скрыть версию",
+      "LISTVIEW": "Режим просмотра списка"
    },
    "ACTIONS": {
+      "VERSIONS": "Управление версиями",
+      "METADATA": "Информация",
      "DOWNLOAD": "Скачать",
+      "PERMISSION": "Право",
      "FOLDER": {
        "COPY": "Копировать",
        "MOVE": "Переместить",
@@ -98,6 +160,13 @@
    "STORE": "Хранилище",
    "RESTORE": "Восстановить"
  },
+  "FORM-LOADING": {
+    "FORM_DATA": "Данные формы",
+    "FORM_DATA_MESSAGE": "Введите значения для заполнения формы",
+    "TYPEAHEAD_PLACEHOLDER": "Буфер клавиатуры",
+    "RADIO_PLACEHOLDER": "Селективная кнопка",
+    "SELECT_PLACEHOLDER": "Раскрывающееся меню"
+  },
  "LOGIN": {
    "CONTENT_SERVICES": "Content Services",
    "PROCESS_SERVICES": "Process Services",
@@ -115,5 +184,9 @@
    "LIST": "Список меток Content Services",
    "INSERT": "Вставить идентификатор узла",
    "NODE_LIST": "Список меток по идентификатору узла"
+  },
+  "DEMO_PERMISSION": {
+    "INHERIT_PERMISSION_BUTTON": "Наследовать разрешение",
+    "INHERITED_PERMISSIONS_BUTTON": "Разрешение унаследовано"
  }
 }
@@ -1,4 +1,28 @@
 {
+  "APP": {
+    "INFO_DRAWER": {
+      "TITLE": "详细信息",
+      "COMMENTS": "注释",
+      "PROPERTIES": "属性",
+      "VERSIONS": "版本"
+    },
+    "ADF_VERSION_MANAGER": {
+      "ALLOW_DELETE": "允许删除",
+      "SHOW_COMMENTS": "显示有关版本的注释",
+      "ALLOW_DOWNLOAD": "允许版本下载",
+      "READ_ONLY": "只读"
+    },
+    "PERSONAL-FILES": "个人文件",
+    "WARN-MULTIPLE-UPLOADS": "针对多个上传显示警告。",
+    "SEARCH": {
+      "RADIO": {
+        "NONE": "无",
+        "ALL": "全部",
+        "FOLDER": "文件夹",
+        "DOCUMENT": "文档"
+      }
+    }
+  },
  "title": "欢迎使用",
  "VERSION": {
    "NO_PERMISSION": "您没有管理此内容版本的权限",
@@ -9,10 +33,17 @@
      "TITLE": "管理版本"
    }
  },
+  "METADATA": {
+    "DIALOG": {
+      "CLOSE": "关闭",
+      "TITLE": "元数据"
+    }
+  },
  "APP_LAYOUT": {
    "APP_NAME": "ADF 演示应用程序",
    "HOME": "主页",
    "CONTENT_SERVICES": "Content Services",
+    "BREADCRUMB": "面包屑",
    "PROCESS_SERVICES": "Process Services",
    "LOGIN": "登录",
    "CUSTOM_SOURCES": "自定义来源",
@@ -20,9 +51,11 @@
    "DATATABLE_LAZY": "Datatable（迟缓）",
    "FORM": "表单",
    "FORM_LIST": "表单列表",
+    "FORM_LOADING": "表单加载",
    "UPLOADER": "上传程序",
    "WEBSCRIPT": "Webscript",
    "TAG": "标签",
+    "TRASHCAN": "垃圾桶",
    "SOCIAL": "社交",
    "SETTINGS": "设置",
    "OVERLAY_VIEWER": "重叠查看器",
@@ -33,6 +66,17 @@
    "SEARCH_CREATED_BY": "创建者",
    "SEARCH_SERVICE_APPROACH": "选中此项以禁用输入属性并使用服务进行配置"
  },
+  "TRASHCAN": {
+    "ACTIONS": {
+      "DELETE_PERMANENT": "永久删除",
+      "RESTORE": "恢复"
+    },
+    "EMPTY_STATE": {
+      "TITLE": "“垃圾”为空",
+      "FIRST_TEXT": "删除的项目移动到“垃圾”。",
+      "SECOND_TEXT": "清空“垃圾”以永久删除项目。"
+    }
+  },
  "DOCUMENT_LIST": {
    "MULTISELECT_CHECKBOXES": "多选（含复选框）",
    "MULTIPLE_FILE_UPLOAD": "上传多个文件",
@@ -43,23 +87,41 @@
    "DESCRIPTION_UPLOAD": "启用上传",
    "ENABLE_INFINITE_SCROLL": "启用无限滚动",
    "MULTISELECT_DESCRIPTION": "使用 Cmd (Mac) 或 Ctrl (Windows) 切换多个项目的选择",
-    "RECENT": "最近的文件",
+    "RECENT": {
+      "EMPTY_STATE": {
+        "TITLE": "\"最近的文件\"列表为空"
+      },
+      "TITLE": "最近的文件"
+    },
    "COLUMNS": {
      "DISPLAY_NAME": "显示名称",
+      "IS_LOCKED": "锁定",
      "TAG": "标签",
      "CREATED_BY": "创建者",
      "CREATED_ON": "创建日期",
-      "CREATED": "已创建"
+      "CREATED": "已创建",
+      "SIZE": "字号(&S)",
+      "DELETED_ON": "已删除",
+      "DELETED_BY": "删除人"
    },
    "TOOLBAR": {
      "CARDVIEW": "卡查看模式",
      "NEW_FOLDER": "新建文件夹",
      "EDIT_FOLDER": "编辑文件夹",
      "DOWNLOAD": "下载",
-      "DELETE": "删除"
+      "DELETE": "删除",
+      "FAVORITES": "添加到收藏夹",
+      "SHARE": "共享",
+      "THEME": "选择主题",
+      "SHOW_VERSION": "显示版本",
+      "HIDE_VERSION": "隐藏版本",
+      "LISTVIEW": "列表视图模式"
    },
    "ACTIONS": {
+      "VERSIONS": "管理版本",
+      "METADATA": "信息",
      "DOWNLOAD": "下载",
+      "PERMISSION": "权限",
      "FOLDER": {
        "COPY": "复制",
        "MOVE": "移动",
@@ -98,6 +160,13 @@
    "STORE": "存储",
    "RESTORE": "恢复"
  },
+  "FORM-LOADING": {
+    "FORM_DATA": "表单数据",
+    "FORM_DATA_MESSAGE": "输入值以填充表单",
+    "TYPEAHEAD_PLACEHOLDER": "预先输入",
+    "RADIO_PLACEHOLDER": "单选按钮",
+    "SELECT_PLACEHOLDER": "下拉列表"
+  },
  "LOGIN": {
    "CONTENT_SERVICES": "Content Services",
    "PROCESS_SERVICES": "Process Services",
@@ -115,5 +184,9 @@
    "LIST": "列表标签 Content Services",
    "INSERT": "插入节点 ID",
    "NODE_LIST": "标签列表（按节点 ID 排序）"
+  },
+  "DEMO_PERMISSION": {
+    "INHERIT_PERMISSION_BUTTON": "继承权限",
+    "INHERITED_PERMISSIONS_BUTTON": "已继承权限"
  }
 }
@@ -2,8 +2,23 @@
    "$schema": "../../lib/core/app-config/schema.json",
    "ecmHost": "http://{hostname}:{port}",
    "bpmHost": "http://{hostname}:{port}",
+    "loginRoute": "login",
+    "providers": "ALL",
+    "contextRootBpm": "activiti-app",
+    "authType" : "BASIC",
+    "oauth2": {
+      "host": "http://localhost:30081/auth/realms/myrealm",
+      "clientId": "activiti",
+      "scope": "openid",
+      "secret": "",
+      "implicitFlow": true,
+      "silentLogin": true,
+      "redirectUri": "/",
+      "redirectUriLogout": "/logout"
+    },
    "application": {
-        "name": "Alfresco ADF Application"
+        "name": "Alfresco ADF Application",
+        "copyright": "© 2016 - 2018 Alfresco Software, Inc. All Rights Reserved."
    },
    "languages": [
        {
@@ -51,6 +66,133 @@
            "label": "Simplified Chinese"
        }
    ],
+    "search": {
+      "include": ["path", "allowableOperations"],
+      "sorting": {
+        "options": [
+          { "key": "name", "label": "Name", "type": "FIELD", "field": "cm:name", "ascending": true },
+          { "key": "content.sizeInBytes", "label": "Size", "type": "FIELD", "field": "content.size", "ascending": true },
+          { "key": "description", "label": "Description", "type": "FIELD", "field": "cm:description", "ascending": true }
+        ],
+        "defaults": [
+          { "key": "name", "type": "FIELD", "field": "cm:name", "ascending": true }
+        ]
+      },
+      "filterQueries": [
+        { "query": "TYPE:'cm:folder' OR TYPE:'cm:content'" },
+        { "query": "NOT cm:creator:System" }
+      ],
+      "facetFields": [
+        { "field": "content.mimetype", "mincount": 1, "label": "Type" },
+        { "field": "content.size", "mincount": 1, "label": "Size" },
+        { "field": "creator", "mincount": 1, "label": "Creator" },
+        { "field": "modifier", "mincount": 1, "label": "Modifier" },
+        { "field": "created", "mincount": 1, "label": "Created" }
+      ],
+      "facetQueries": {
+        "label": "My facet queries",
+        "pageSize": 5,
+        "queries": [
+          { "query": "created:2018", "label": "Created This Year" },
+          { "query": "content.mimetype", "label": "Type" },
+          { "query": "content.size:[0 TO 10240]", "label": "Size: xtra small"},
+          { "query": "content.size:[10240 TO 102400]", "label": "Size: small"},
+          { "query": "content.size:[102400 TO 1048576]", "label": "Size: medium" },
+          { "query": "content.size:[1048576 TO 16777216]", "label": "Size: large" },
+          { "query": "content.size:[16777216 TO 134217728]", "label": "Size: xtra large" },
+          { "query": "content.size:[134217728 TO MAX]", "label": "Size: XX large" }
+        ]
+      },
+      "categories": [
+        {
+          "id": "queryName",
+          "name": "Name",
+          "enabled": true,
+          "expanded": true,
+          "component": {
+            "selector": "text",
+            "settings": {
+              "pattern": "cm:name:'(.*?)'",
+              "field": "cm:name",
+              "placeholder": "Enter the name"
+            }
+          }
+        },
+        {
+          "id": "checkList",
+          "name": "Check List",
+          "enabled": true,
+          "component": {
+            "selector": "check-list",
+            "settings": {
+              "pageSize": 5,
+              "operator": "OR",
+              "options": [
+                { "name": "Folder", "value": "TYPE:'cm:folder'" },
+                { "name": "Document", "value": "TYPE:'cm:content'" }
+              ]
+            }
+          }
+        },
+        {
+          "id": "contentSize",
+          "name": "Content Size",
+          "enabled": true,
+          "component": {
+            "selector": "slider",
+            "settings": {
+              "field": "cm:content.size",
+              "min": 0,
+              "max": 18,
+              "step": 1,
+              "thumbLabel": true
+            }
+          }
+        },
+        {
+          "id": "contentSizeRange",
+          "name": "Content Size (range)",
+          "enabled": true,
+          "component": {
+            "selector": "number-range",
+            "settings": {
+              "field": "cm:content.size",
+              "format": "[{FROM} TO {TO}]"
+            }
+          }
+        },
+        {
+          "id": "createdDateRange",
+          "name": "Created Date (range)",
+          "enabled": true,
+          "component": {
+            "selector": "date-range",
+            "settings": {
+              "field": "cm:created",
+              "dateFormat": "DD-MMM-YY"
+            }
+          }
+        },
+        {
+          "id": "queryType",
+          "name": "Type",
+          "enabled": true,
+          "component": {
+            "selector": "radio",
+            "settings": {
+              "field": null,
+              "pageSize": 5,
+              "options": [
+                { "name": "APP.SEARCH.RADIO.NONE", "value": "", "default": true },
+                { "name": "APP.SEARCH.RADIO.ALL", "value": "TYPE:'cm:folder' OR TYPE:'cm:content'" },
+                { "name": "APP.SEARCH.RADIO.FOLDER", "value": "TYPE:'cm:folder'" },
+                { "name": "APP.SEARCH.RADIO.DOCUMENT", "value": "TYPE:'cm:content'" }
+              ]
+            }
+          }
+        }
+      ]
+    },
    "pagination": {
        "size": 25,
        "supportedPageSizes": [ 5, 10, 15, 20 ]
@@ -371,5 +513,9 @@
                "exif:exif": "*"
            }
        }
+    },
+    "sideNav": {
+      "expandedSidenav": true,
+      "preserveState": true
    }
 }
@@ -1 +1,2 @@
 <router-outlet></router-outlet>
+<router-outlet name="overlay"></router-outlet>
@@ -0,0 +1,23 @@
+router-outlet[name="overlay"] + * {
+    width: 100%;
+    height: 100%;
+    z-index: 999;
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+
+@media (max-width: 425px) {
+    adf-content-node-selector {
+        .adf-content-node-selector-content-list {
+            .adf-data-table-cell {
+                display: none;
+            }
+
+            .adf-data-table-cell:first-child,
+            .adf-data-table-cell:nth-child(2) {
+                display: table-cell;
+            }
+        }
+    }
+}
@@ -1,32 +1,25 @@
 import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';

+import { AdfModule } from './adf.module';
 import { AppComponent } from './app.component';

 describe('AppComponent', () => {
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [
-        AppComponent
-      ],
-    }).compileComponents();
-  }));
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                RouterTestingModule,
+                AdfModule
+            ],
+            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!');
-  }));
+    it('should create the app', async(() => {
+        const fixture = TestBed.createComponent(AppComponent);
+        const app = fixture.debugElement.componentInstance;
+        expect(app).toBeTruthy();
+    }));
 });
@@ -15,30 +15,35 @@
 * limitations under the License.
 */

-import { Component, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { SettingsService, PageTitleService, StorageService, TranslationService } from '@alfresco/adf-core';
+import { Component, ViewEncapsulation, OnInit } from '@angular/core';
+import { AuthenticationService, AlfrescoApiService, PageTitleService } from '@alfresco/adf-core';
+import { Router } from '@angular/router';

@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'],
-  encapsulation: ViewEncapsulation.None
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
-export class AppComponent {
+export class AppComponent implements OnInit {

-  constructor(private settingsService: SettingsService,
-              private storage: StorageService,
-              translationService: TranslationService,
-              pageTitleService: PageTitleService,
-              route: ActivatedRoute) {
-    this.setProvider();
-    pageTitleService.setTitle();
-  }
-
-  private setProvider() {
-    if (this.storage.hasItem(`providers`)) {
-      this.settingsService.setProviders(this.storage.getItem(`providers`));
+    constructor(private pageTitleService: PageTitleService,
+                private alfrescoApiService: AlfrescoApiService,
+                private authenticationService: AuthenticationService,
+                private router: Router) {
+    }
+
+    ngOnInit() {
+
+        this.pageTitleService.setTitle('title');
+
+        this.alfrescoApiService.getInstance().on('error', (error) => {
+            if (error.status === 401) {
+                if (!this.authenticationService.isLoggedIn()) {
+                    this.router.navigate(['/login']);
+                }
+            }
+
+        });
    }
-  }
 }
@@ -6,11 +6,12 @@ import { ChartsModule } from 'ng2-charts';
 import { HttpClientModule } from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

-import { AppConfigService, TRANSLATION_PROVIDER } from '@alfresco/adf-core';
+import { AppConfigService, TRANSLATION_PROVIDER, DebugAppConfigService } from '@alfresco/adf-core';
 import { AppComponent } from './app.component';
 import { AdfModule } from './adf.module';
 import { MaterialModule } from './material.module';
 import { LoginComponent } from './components/login/login.component';
+import { LogoutComponent } from './components/logout/logout.component';
 import { SettingsComponent } from './components/settings/settings.component';
 import { AppLayoutComponent } from './components/app-layout/app-layout.component';
 import { HomeComponent } from './components/home/home.component';
@@ -18,8 +19,10 @@ import { SearchBarComponent } from './components/search/search-bar.component';
 import { SearchResultComponent } from './components/search/search-result.component';
 import { SearchExtendedComponent } from './components/search/search-extended.component';
 import { AboutComponent } from './components/about/about.component';
+import { LogComponent } from './components/log/log.component';
 import { FormComponent } from './components/form/form.component';
 import { FormListComponent } from './components/form/form-list.component';
+import { FormLoadingComponent } from './components/form/form-loading.component';
 import { CustomSourcesComponent } from './components/files/custom-sources.component';
 import { OverlayViewerComponent } from './components/overlay-viewer/overlay-viewer.component';

@@ -37,34 +40,38 @@ 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 { MetadataDialogAdapterComponent } from './components/files/metadata-dialog-adapter.component';
+import { BlobPreviewComponent } from './components/blob-preview/blob-preview.component';

 import { ThemePickerModule } from './components/theme-picker/theme-picker';
-import { DebugAppConfigService } from './services/debug-app-config.service';

 import { routing } from './app.routes';
 import { ReactiveFormsModule } from '@angular/forms';
 import { TaskAttachmentsComponent } from './components/process-service/task-attachments.component';
 import { ProcessAttachmentsComponent } from './components/process-service/process-attachments.component';
 import { SharedLinkViewComponent } from './components/shared-link-view/shared-link-view.component';
-
+import { DemoPermissionComponent } from './components/permissions/demo-permissions.component';
+import { PreviewService } from './services/preview.service';
+import { BreadcrumbDemoComponent } from './components/breadcrumb-demo/breadcrumb-demo.component';
+import { NotificationsComponent } from './components/notifications/notifications.component';

@NgModule({
    imports: [
+        BrowserModule,
        BrowserAnimationsModule,
        ReactiveFormsModule,
-        BrowserModule,
        routing,
        FormsModule,
-        AdfModule,
        MaterialModule,
        ThemePickerModule,
        FlexLayoutModule,
        ChartsModule,
-        HttpClientModule
+        HttpClientModule,
+        AdfModule
    ],
    declarations: [
        AppComponent,
        LoginComponent,
+        LogoutComponent,
        SettingsComponent,
        AppLayoutComponent,
        HomeComponent,
@@ -72,6 +79,7 @@ import { SharedLinkViewComponent } from './components/shared-link-view/shared-li
        SearchResultComponent,
        SearchExtendedComponent,
        AboutComponent,
+        LogComponent,
        ProcessServiceComponent,
        ShowDiagramComponent,
        FormViewerComponent,
@@ -92,10 +100,16 @@ import { SharedLinkViewComponent } from './components/shared-link-view/shared-li
        TaskAttachmentsComponent,
        ProcessAttachmentsComponent,
        OverlayViewerComponent,
-        SharedLinkViewComponent
+        SharedLinkViewComponent,
+        FormLoadingComponent,
+        DemoPermissionComponent,
+        FormLoadingComponent,
+        BlobPreviewComponent,
+        BreadcrumbDemoComponent,
+        NotificationsComponent
    ],
    providers: [
-        { provide: AppConfigService, useClass: DebugAppConfigService },
+        { provide: AppConfigService, useClass: DebugAppConfigService }, // not use this service in production
        {
            provide: TRANSLATION_PROVIDER,
            multi: true,
@@ -111,13 +125,10 @@ import { SharedLinkViewComponent } from './components/shared-link-view/shared-li
                name: 'lazy-loading',
                source: 'resources/lazy-loading'
            }
-        }
-    ],
-    entryComponents: [
-        VersionManagerDialogAdapterComponent,
-        MetadataDialogAdapterComponent
+        },
+        PreviewService
    ],
+    entryComponents: [VersionManagerDialogAdapterComponent, MetadataDialogAdapterComponent],
    bootstrap: [AppComponent]
 })
-export class AppModule {
-}
+export class AppModule {}
@@ -17,11 +17,12 @@

 import { ModuleWithProviders } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { AuthGuard, AuthGuardBpm, AuthGuardEcm } from '@alfresco/adf-core';
+import { AuthGuard, AuthGuardEcm, ErrorContentComponent, AuthGuardBpm } from '@alfresco/adf-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 { LogoutComponent } from './components/logout/logout.component';
 import { AboutComponent } from './components/about/about.component';
 import { ProcessServiceComponent } from './components/process-service/process-service.component';
 import { ShowDiagramComponent } from './components/process-service/show-diagram.component';
@@ -39,20 +40,38 @@ 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/adf-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';
 import { OverlayViewerComponent } from './components/overlay-viewer/overlay-viewer.component';
 import { SharedLinkViewComponent } from './components/shared-link-view/shared-link-view.component';
+import { FormLoadingComponent } from './components/form/form-loading.component';
+import { DemoPermissionComponent } from './components/permissions/demo-permissions.component';
+import { BlobPreviewComponent } from './components/blob-preview/blob-preview.component';
+import { BreadcrumbDemoComponent } from './components/breadcrumb-demo/breadcrumb-demo.component';
+import { NotificationsComponent } from './components/notifications/notifications.component';

 export const appRoutes: Routes = [
    { path: 'login', component: LoginComponent },
+    { path: 'logout', component: LogoutComponent },
    { path: 'settings', component: SettingsComponent },
-    { path: 'files/:nodeId/view', component: FileViewComponent, canActivate: [ AuthGuardEcm ] },
+    { path: 'files/:nodeId/view', component: FileViewComponent, canActivate: [ AuthGuardEcm ], outlet: 'overlay' },
+    { path: 'preview/blob', component: BlobPreviewComponent, outlet: 'overlay', pathMatch: 'full' },
+    { path: 'preview/s/:id', component: SharedLinkViewComponent },
    {
-        path: 'preview/s/:id',
-        component: SharedLinkViewComponent
+        path: 'breadcrumb',
+        component: BreadcrumbDemoComponent,
+        canActivate: [AuthGuardEcm]
+    },
+    {
+        path: 'notifications',
+        component: AppLayoutComponent ,
+        children: [
+            {
+                path: '',
+                component: NotificationsComponent
+            }
+        ]
    },
    {
        path: '',
@@ -67,6 +86,10 @@ export const appRoutes: Routes = [
                path: 'home',
                component: HomeComponent
            },
+            {
+                path: 'settings-layout',
+                component: SettingsComponent
+            },
            {
                path: 'trashcan',
                component: TrashcanComponent,
@@ -82,6 +105,11 @@ export const appRoutes: Routes = [
                component: FilesComponent,
                canActivate: [AuthGuardEcm]
            },
+            {
+                path: 'files/:id/display/:mode',
+                component: FilesComponent,
+                canActivate: [AuthGuardEcm]
+            },
            {
                path: 'dl-custom-sources',
                component: CustomSourcesComponent,
@@ -91,11 +119,6 @@ export const appRoutes: Routes = [
                path: 'datatable',
                component: DataTableComponent
            },
-            {
-                path: 'uploader',
-                component: UploadButtonComponent,
-                canActivate: [AuthGuardEcm]
-            },
            {
                path: 'search',
                component: SearchResultComponent,
@@ -121,17 +144,32 @@ export const appRoutes: Routes = [
                component: ProcessServiceComponent,
                canActivate: [AuthGuardBpm]
            },
+            {
+                path: 'activiti/apps/:appId/tasks/:filterId',
+                component: ProcessServiceComponent,
+                canActivate: [AuthGuardBpm]
+            },
            {
                path: 'activiti/apps/:appId/processes',
                component: ProcessServiceComponent,
                canActivate: [AuthGuardBpm]
            },
+            {
+                path: 'activiti/apps/:appId/processes/:filterId',
+                component: ProcessServiceComponent,
+                canActivate: [AuthGuardBpm]
+            },
            {
                path: 'activiti/apps/:appId/diagram/:processDefinitionId',
                component: ShowDiagramComponent,
                canActivate: [AuthGuardBpm]
            },
-            // TODO: check if neeeded
+            {
+                path: 'activiti/apps/:appId/report',
+                component: ProcessServiceComponent,
+                canActivate: [AuthGuardBpm]
+            },
+            // TODO: check if needed
            {
                path: 'activiti/appId/:appId',
                component: ProcessServiceComponent,
@@ -164,9 +202,15 @@ export const appRoutes: Routes = [
                component: SocialComponent,
                canActivate: [AuthGuardEcm]
            },
+            {
+                path: 'permissions/:id',
+                component: DemoPermissionComponent,
+                canActivate: [AuthGuardEcm]
+            },
            { path: 'about', component: AboutComponent },
            { path: 'form', component: FormComponent },
            { path: 'form-list', component: FormListComponent },
+            { path: 'form-loading', component: FormLoadingComponent },
            {
                path: 'overlay-viewer',
                component: OverlayViewerComponent,
@@ -175,9 +219,18 @@ export const appRoutes: Routes = [
            {
                path: 'datatable-lazy',
                loadChildren: 'app/components/lazy-loading/lazy-loading.module#LazyLoadingModule'
+            },
+            {
+                path: 'error/:id',
+                component: ErrorContentComponent
+            },
+            {
+                path: '**',
+                redirectTo: 'error/404'
            }
+
        ]
    }
 ];

-export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
+export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes, { initialNavigation: true });
@@ -1,49 +1 @@
-<div class="about-container">
-    <h3>Server settings</h3>
-    <mat-list>
-        <small>The values below are taken from the AppConfigService </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>
+<adf-about></adf-about>
@@ -15,123 +15,12 @@
 * limitations under the License.
 */

-import { Component, OnInit } from '@angular/core';
-import { Http } from '@angular/http';
-import {
-    AuthenticationService,
-    AppConfigService,
-    BpmProductVersionModel,
-    DiscoveryApiService,
-    EcmProductVersionModel,
-    ObjectDataTableAdapter
-} from '@alfresco/adf-core';
+import { Component } from '@angular/core';

@Component({
    selector: 'app-about-page',
-    templateUrl: './about.component.html',
-    styleUrls: ['./about.component.css']
+    templateUrl: './about.component.html'
 })
-export class AboutComponent implements OnInit {
+export class AboutComponent  {

-    data: ObjectDataTableAdapter;
-    status: ObjectDataTableAdapter;
-    license: ObjectDataTableAdapter;
-    modules: ObjectDataTableAdapter;
-    githubUrlCommitAlpha = 'https://github.com/Alfresco/alfresco-ng2-components/commits/';
-
-    ecmHost = '';
-    bpmHost = '';
-
-    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: 'Mode', 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 => {
-            const regexp = new RegExp('^(@alfresco)');
-
-            const alfrescoPackages = Object.keys(response.json().dependencies).filter((val) => {
-                return regexp.test(val);
-            });
-
-            const 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 {
-        const corePackage = alfrescoPackagesTableRepresentation.find((packageUp) => {
-            return packageUp.name === '@alfresco/adf-core';
-        });
-
-        if (corePackage) {
-            const commitIsh = corePackage.version.split('-');
-            if (commitIsh.length > 1) {
-                this.githubUrlCommitAlpha = this.githubUrlCommitAlpha + commitIsh[1];
-            } else {
-                this.githubUrlCommitAlpha = this.githubUrlCommitAlpha + corePackage.version;
-            }
-        }
-    }
 }
@@ -1,47 +1,55 @@
-<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>
+<adf-sidenav-layout [sidenavMin]="70" [sidenavMax]="220" [stepOver]="780" [hideSidenav]="false"[expandedSidenav]= "expandedSidenav" (expanded)="setState($event)">

-    <mat-toolbar color="primary" class="adf-app-layout-toolbar mat-elevation-z6">
-        <adf-userinfo
-            class="adf-app-layout-user-profile"
-            [menuPositionX]="'before'"
-            [menuPositionY]="'above'">
-        </adf-userinfo>
+    <adf-sidenav-layout-header>
+        <ng-template let-toggleMenu="toggleMenu">
+            <mat-toolbar color="primary" class="adf-app-layout-toolbar mat-elevation-z6">
+                <button mat-icon-button (click)="toggleMenu()">
+                    <mat-icon>menu</mat-icon>
+                </button>

-        <span fxFlex="1 1 auto" fxShow fxHide.lt-sm="true">{{'APP_LAYOUT.APP_NAME' | translate }}</span>
+                <span fxFlex="1 1 auto" fxShow fxHide.lt-sm="true">{{'APP_LAYOUT.APP_NAME' | translate }}</span>

-        <div class="adf-app-layout-menu-spacer"></div>
+                <div class="adf-app-layout-menu-spacer"></div>

-        <app-search-bar fxFlex="0 1 auto"></app-search-bar>
+                <app-search-bar fxFlex="0 1 auto"></app-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>
+                <adf-userinfo
+                    class="adf-app-layout-user-profile"
+                    [menuPositionX]="'before'"
+                    [menuPositionY]="'above'">
+                </adf-userinfo>

-        <app-theme-picker></app-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>
+                <app-theme-picker></app-theme-picker>
+                <button mat-icon-button [matMenuTriggerFor]="langMenu">
+                    <mat-icon>language</mat-icon>
+                </button>
+                <mat-menu #langMenu="matMenu" class="adf-menu">
+                    <adf-language-menu></adf-language-menu>
+                </mat-menu>
+            </mat-toolbar>
+        </ng-template>
+    </adf-sidenav-layout-header>

-        <button mat-icon-button (click)="sidenav.open()">
-            <mat-icon>menu</mat-icon>
-        </button>
-    </mat-toolbar>
+    <adf-sidenav-layout-navigation>
+        <ng-template let-isMenuMinimized="isMenuMinimized">
+            <mat-nav-list class="adf-sidenav-linklist">
+                <a mat-list-item *ngFor="let link of links" [attr.data-automation-id]="link.title | translate" [routerLink]="link.href" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" class="adf-sidenav-link">
+                    <mat-icon matListIcon class="sidenav-menu-icon">{{link.icon}}</mat-icon>
+                    <div class="sidenav-menu-label" *ngIf="!isMenuMinimized()">{{link.title | translate }}</div>
+                </a>
+                <a mat-list-item adf-logout [enabelRedirect]="enabelRedirect" redirectUri="/logout" class="adf-sidenav-link">
+                    <mat-icon matListIcon class="sidenav-menu-icon">exit_to_app</mat-icon>
+                    <div class="sidenav-menu-label" *ngIf="!isMenuMinimized()">Logout</div>
+                </a>
+            </mat-nav-list>
+        </ng-template>
+    </adf-sidenav-layout-navigation>

-    <router-outlet></router-outlet>
-</mat-sidenav-container>
+    <adf-sidenav-layout-content>
+        <ng-template>
+            <router-outlet></router-outlet>
+        </ng-template>
+    </adf-sidenav-layout-content>
+
+</adf-sidenav-layout>
+<app-log></app-log>
@@ -1,80 +1,110 @@
@mixin adf-app-layout-theme($theme) {
-  $primary: map-get($theme, primary);
-  $minimumAppWidth: 320px;
-  $toolbarHeight: 64px;
+    $primary: map-get($theme, primary);
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+    $minimumAppWidth: 320px;
+    $toolbarHeight: 64px;

-
-   @media screen and ($mat-xsmall) {
-       app-search-bar {
-           width: 150px;
-       }
-   }
+    @media screen and ($mat-xsmall) {
+        app-search-bar {
+            width: 150px;
+        }
+    }

    @media screen and (max-width: 350px) {
-       app-search-bar {
-           width: 100px;
-       }
-   }
-
-   .adf-app-layout-toolbar {
-     position: relative;
-     overflow: visible !important;
-   }
-
-  .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);
-      }
-    }
-
-    &-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);
+        app-search-bar {
+            width: 100px;
        }
-      }
    }
-  }

-  @media screen and  ($mat-small) {
-    .adf-userinfo-name {
-      display: none;
+    .adf-app-layout-toolbar {
+        z-index: 998;
+        position: relative;
+        overflow: visible !important;
    }
-  }

-  @media screen and ($mat-xsmall) {
-  }
+    .adf-menu {
+        padding-top: 55px;
+    }

+    .adf-app-layout {
+        display: flex;
+        flex: 1;
+        min-width: $minimumAppWidth;
+        height: 100%;
+
+        .adf-nav-container {
+            display: block;
+            min-width: $minimumAppWidth;
+            height: 100%;
+        }
+
+        .adf-sidenav-linklist {
+            height: 100%;
+            overflow: auto;
+            padding-bottom: 8px;
+            box-sizing: border-box;
+        }
+
+        .adf-sidenav-link {
+            &.active {
+                color: mat-color($primary);
+            }
+
+            .sidenav-menu-icon {
+                margin-right: 20px;
+                font-size: 14px;
+            }
+
+            .sidenav-menu-label {
+                font-size: 14px;
+                white-space: nowrap;
+            }
+        }
+
+        .mat-nav-list .mat-list-item.adf-sidenav-link {
+            height: 40px;
+        }
+
+        &-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, 0.12);
+                }
+            }
+        }
+    }
+
+    @media screen and ($mat-small) {
+        .adf-userinfo-name {
+            display: none;
+        }
+
+        .adf-menu {
+            padding-top: 0px;
+        }
+    }
+
+    @media screen and ($mat-xsmall) {}
 }
@@ -15,7 +15,8 @@
 * limitations under the License.
 */

-import { Component, ViewEncapsulation } from '@angular/core';
+import { Component, ViewEncapsulation, OnInit } from '@angular/core';
+import { UserPreferencesService, AppConfigService, AlfrescoApiService } from '@alfresco/adf-core';

@Component({
    templateUrl: 'app-layout.component.html',
@@ -25,29 +26,56 @@ import { Component, ViewEncapsulation } from '@angular/core';
    },
    encapsulation: ViewEncapsulation.None
 })
-export class AppLayoutComponent {
+
+export class AppLayoutComponent implements OnInit {

    links: Array<any> = [
        { href: '/home', icon: 'home', title: 'APP_LAYOUT.HOME' },
        { href: '/files', icon: 'folder_open', title: 'APP_LAYOUT.CONTENT_SERVICES' },
-        { href: '/trashcan', icon: 'delete', title: 'APP_LAYOUT.TRASHCAN' },
+        { href: '/breadcrumb', icon: 'label', title: 'APP_LAYOUT.BREADCRUMB' },
+        { href: '/notifications', icon: 'alarm', title: 'APP_LAYOUT.NOTIFICATIONS'},
        { href: '/activiti', icon: 'device_hub', title: 'APP_LAYOUT.PROCESS_SERVICES' },
        { href: '/login', icon: 'vpn_key', title: 'APP_LAYOUT.LOGIN' },
+        { href: '/trashcan', icon: 'delete', title: 'APP_LAYOUT.TRASHCAN' },
        { href: '/dl-custom-sources', icon: 'extension', title: 'APP_LAYOUT.CUSTOM_SOURCES' },
        { href: '/datatable', icon: 'view_module', title: 'APP_LAYOUT.DATATABLE' },
        { href: '/datatable-lazy', icon: 'view_module', title: 'APP_LAYOUT.DATATABLE_LAZY' },
        { 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: '/form-loading', icon: 'cached', title: 'APP_LAYOUT.FORM_LOADING' },
        { 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: '/settings-layout', icon: 'settings', title: 'APP_LAYOUT.SETTINGS' },
        { href: '/extendedSearch', icon: 'search', title: 'APP_LAYOUT.SEARCH' },
        { href: '/overlay-viewer', icon: 'pageview', title: 'APP_LAYOUT.OVERLAY_VIEWER' },
        { href: '/about', icon: 'info_outline', title: 'APP_LAYOUT.ABOUT' }
    ];

-    constructor() {
+    expandedSidenav = false;
+
+    enabelRedirect = true;
+
+    ngOnInit() {
+        const expand = this.config.get<boolean>('sideNav.expandedSidenav');
+        const preserveState = this.config.get('sideNav.preserveState');
+
+        if (preserveState && expand) {
+            this.expandedSidenav = (this.userpreference.get('expandedSidenav', expand.toString()) === 'true');
+        } else if (expand) {
+            this.expandedSidenav = expand;
+        }
+    }
+
+    constructor(private userpreference: UserPreferencesService, private config: AppConfigService, private alfrescoApiService: AlfrescoApiService) {
+        if (this.alfrescoApiService.getInstance().isOauthConfiguration()) {
+            this.enabelRedirect = false;
+        }
+    }
+
+    setState(state) {
+        if (this.config.get('sideNav.preserveState')) {
+            this.userpreference.set('expandedSidenav', state);
+        }
    }
 }
@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { PreviewService } from '../../services/preview.service';
+import { Router } from '@angular/router';
+
+@Component({
+    templateUrl: 'bob-preview.component.html'
+})
+export class BlobPreviewComponent {
+    content: Blob;
+    name: string;
+
+    constructor(preview: PreviewService, router: Router) {
+        if (preview.content === null || preview.name === null) {
+            router.navigate([{ outlets: { overlay: null } }]);
+            return;
+        }
+
+        this.content = preview.content;
+        this.name = preview.name;
+    }
+}
@@ -0,0 +1,5 @@
+<adf-viewer 
+    [showViewer]="true" 
+    [blobFile]="content" 
+    [displayName]="name">
+</adf-viewer>
@@ -0,0 +1,83 @@
+<main>
+    <h1>Breadcrumb</h1>
+    <ul>
+        <li>Try creating and navigating long paths</li>
+        <li>Try resizing the browser width to ensure items are trimmed as expected</li>
+    </ul>
+
+    <h2>1. Standalone (fixed size)</h2>
+    <small>Component is used in the fixed-width layout</small>
+
+    <div class="breadcrumb-container-restricted">
+        <adf-breadcrumb root="APP.PERSONAL-FILES" [target]="documentList" [folderNode]="documentList.folderNode">
+        </adf-breadcrumb>
+    </div>
+
+    <h2>2. Standalone (full width)</h2>
+    <small>Component fits the parent container width</small>
+
+    <div>
+        <adf-breadcrumb root="APP.PERSONAL-FILES" [target]="documentList" [folderNode]="documentList.folderNode">
+        </adf-breadcrumb>
+    </div>
+
+    <h2>2.1 Standalone with Dropdown (full width)</h2>
+    <small>
+        Component fits the parent container width but is limited to 3 items to display at once.
+        It should automatically switch to the Dropdown mode if the path exceeds 3 nodes.
+    </small>
+
+    <div>
+        <adf-breadcrumb [maxItems]="3" root="APP.PERSONAL-FILES" [target]="documentList" [folderNode]="documentList.folderNode">
+        </adf-breadcrumb>
+    </div>
+
+    <h2>3. Toolbar (standalone)</h2>
+    <small>Component used as a child of the Toolbar component</small>
+
+    <adf-toolbar>
+        <adf-breadcrumb root="APP.PERSONAL-FILES" [target]="documentList" [folderNode]="documentList.folderNode">
+        </adf-breadcrumb>
+    </adf-toolbar>
+
+    <h2>4. Toolbar (title)</h2>
+    <small>Component is wrapped into the Toolbar Title component</small>
+
+    <adf-toolbar>
+        <adf-toolbar-title>
+            <adf-breadcrumb root="APP.PERSONAL-FILES" [target]="documentList" [folderNode]="documentList.folderNode">
+            </adf-breadcrumb>
+        </adf-toolbar-title>
+    </adf-toolbar>
+
+    <h2>5. Toolbar with separators and buttons</h2>
+    <small>
+        Component is wrapped into the Toolbar Title component.
+        The toolbar also has separators and buttons that might provide impact on breadcrumb layout.
+        Buttons do nothing and are present for layout purposes.
+    </small>
+
+    <adf-toolbar class="full-content-toolbar">
+        <adf-toolbar-title fxFlex="0 1 auto">
+            <adf-breadcrumb root="APP.PERSONAL-FILES" [target]="documentList" [folderNode]="documentList.folderNode">
+            </adf-breadcrumb>
+        </adf-toolbar-title>
+        <adf-toolbar-divider fxFlex="0 0 auto"></adf-toolbar-divider>
+        <div fxFlex="0 0 auto">
+            <button mat-icon-button aria-label="Create a new folder button">
+                <mat-icon>create_new_folder</mat-icon>
+            </button>
+            <button mat-icon-button aria-label="Edit node button">
+                <mat-icon>create</mat-icon>
+            </button>
+            <button mat-icon-button aria-label="Delete node icon button">
+                <mat-icon>delete</mat-icon>
+            </button>
+        </div>
+    </adf-toolbar>
+
+    <div class="content">
+        <adf-document-list #documentList currentFolderId="-my-">
+        </adf-document-list>
+    </div>
+</main>
@@ -0,0 +1,20 @@
+.breadcrumb-container-restricted {
+    width: 800px;
+    max-width: 800px;
+    border: 1px solid lightgray;
+}
+
+.content {
+    margin: 10px 0;
+}
+
+.full-content-toolbar {
+    .adf-toolbar-title {
+        display: flex;
+        width: 100%;
+
+        .adf-breadcrumb {
+            width: 0;
+        }
+    }
+}
@@ -15,17 +15,12 @@
 * limitations under the License.
 */

-/**
- * PaginationQueryParams object is used to emit events regarding pagination having two
- * properties from the Pagination interface found in AlfrescoJS API
- *
- * The two properties are "skipCount" and "maxItems" that are sent as query parameters
- * to server to paginate results
- *
- * @TODO Contribute this to AlfrescoJS API
- */
+import { Component } from '@angular/core';
+
+@Component({
+    templateUrl: './breadcrumb-demo.component.html',
+    styleUrls: [`./breadcrumb-demo.component.scss`],
+})
+export class BreadcrumbDemoComponent {

-export interface PaginationQueryParams {
-    skipCount: number;
-    maxItems: number;
 }
@@ -1,30 +1,38 @@
-<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>
+<mat-form-field>
+    <input matInput placeholder="Name filter" [(ngModel)]="data.filterValue">
+</mat-form-field>
+
+<adf-datatable
+    #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>
+    Selected items: {{ dataTable.selection?.length }}
 </div>
-<div class="p-10" data-automation-id="multiselect">
+
+<div data-automation-id="multiselect">
    <mat-checkbox [(ngModel)]="multiselect">{{ 'DATATABLE.MULTISELECT'| translate }}</mat-checkbox>
 </div>
-<div class="p-10">
+<div>
    <p>{{ 'DATATABLE.MULTISELECT_DESCRIPTION'| translate }}</p>
    <mat-form-field>
        <mat-select placeholder="Selection Mode" [(ngModel)]="selectionMode" name="food">
@@ -34,10 +42,9 @@
        </mat-select>
    </mat-form-field>
 </div>
-<div class="p-10">
+<div>
    <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>
@@ -1,16 +0,0 @@
-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;
-}
-
-adf-datatable ::ng-deep table {
-    max-width: 100%;
-    overflow: hidden;
-    white-space: normal !important;
-}
@@ -16,19 +16,44 @@
 */

 import { Component, Input } from '@angular/core';
-import { AlfrescoApiService, LogService } from '@alfresco/adf-core';
+import { LogService, DataColumn, DataRow } from '@alfresco/adf-core';
 import { DataCellEvent, DataRowActionEvent, DataSorting, ObjectDataColumn, ObjectDataRow, ObjectDataTableAdapter } from '@alfresco/adf-core';
-import { Observable } from 'rxjs/Observable';
+
+export class FilteredDataAdapter extends ObjectDataTableAdapter {
+
+    filterValue = '';
+    filterKey = 'name';
+
+    getRows(): Array<DataRow> {
+        let rows = super.getRows();
+        const filter = (this.filterValue || '').trim().toLowerCase();
+
+        if (this.filterKey && filter) {
+            rows = rows.filter(row => {
+                const value = row.getValue(this.filterKey);
+                if (value !== undefined && value !== null) {
+                    const stringValue: string = value.toString().trim().toLowerCase();
+                    return stringValue.startsWith(filter);
+                }
+                return false;
+            });
+        }
+        return rows;
+    }
+
+    constructor(data?: any[], schema?: DataColumn[]) {
+        super(data, schema);
+    }
+}

@Component({
    selector: 'app-datatable',
-    templateUrl: './datatable.component.html',
-    styleUrls: ['./datatable.component.scss']
+    templateUrl: './datatable.component.html'
 })
 export class DataTableComponent {

    multiselect = false;
-    data: ObjectDataTableAdapter;
+    data: FilteredDataAdapter;

    @Input()
    selectionMode = 'single';
@@ -41,16 +66,16 @@ export class DataTableComponent {

    private _imageUrl = 'http://placehold.it/140x100';
    private _createdBy: any = {
-        name: 'Denys Vuika',
-        email: 'denys.vuika@alfresco.com'
+        name: 'Administrator',
+        email: 'admin@alfresco.com'
    };

-    constructor(private apiService: AlfrescoApiService, private logService: LogService) {
+    constructor(private logService: LogService) {
        this.reset();
    }

    reset() {
-        this.data = new ObjectDataTableAdapter(
+        this.data = new FilteredDataAdapter(
            [
                {
                    id: 1,
@@ -174,33 +199,4 @@ export class DataTableComponent {
    onRowDblClick(event) {
        this.logService.log(event);
    }
-
-    getRowForNode() {
-        const 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;
-            });
-    }
 }
@@ -1,15 +1,20 @@
 <ng-container *ngIf="nodeId">

    <ng-template let-node="node" #sidebarTemplate>
-        <adf-info-drawer title="Details">
-            <adf-info-drawer-tab label="Properties">
+        <adf-info-drawer [title]="'APP.INFO_DRAWER.TITLE' | translate">
+            <adf-info-drawer-tab [label]="'APP.INFO_DRAWER.COMMENTS' | translate">
+                <adf-comments [nodeId]="nodeId"></adf-comments>
+            </adf-info-drawer-tab>
+
+            <adf-info-drawer-tab [label]="'APP.INFO_DRAWER.PROPERTIES' | translate">
                <adf-content-metadata-card [node]="node"></adf-content-metadata-card>
            </adf-info-drawer-tab>

-            <adf-info-drawer-tab label="Versions">
+            <adf-info-drawer-tab [label]="'APP.INFO_DRAWER.VERSIONS' | translate">
                <mat-card>
                    <mat-card-content>
-                        <adf-version-manager [node]="node">
+                        <adf-version-manager [node]="node"
+                                             (uploadError)="uploadError($event)">
                        </adf-version-manager>
                    </mat-card-content>
                </mat-card>
@@ -17,7 +22,20 @@
        </adf-info-drawer>
    </ng-template>

-    <adf-viewer [fileNodeId]="nodeId" [allowSidebar]="true" [sidebarTemplate]="sidebarTemplate">
+    <adf-viewer [nodeId]="nodeId" [allowSidebar]="true" [sidebarTemplate]="sidebarTemplate">
+
+        <adf-viewer-toolbar-actions>
+            <button mat-icon-button>
+                <mat-icon>alarm</mat-icon>
+            </button>
+            <button mat-icon-button>
+                <mat-icon>backup</mat-icon>
+            </button>
+            <button mat-icon-button>
+                <mat-icon>bug_report</mat-icon>
+            </button>
+        </adf-viewer-toolbar-actions>
+
        <!--
        <adf-viewer-extension [supportedExtensions]="['json']">
            <ng-template let-urlFileContent="urlFileContent" let-extension="extension">
@@ -0,0 +1,3 @@
+.adf-viewer__sidebar {
+    width: 380px !important;
+}
@@ -15,22 +15,26 @@
 * limitations under the License.
 */

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { AlfrescoApiService } from '@alfresco/adf-core';
+import { MatSnackBar } from '@angular/material';

@Component({
    selector: 'app-file-view',
-    templateUrl: 'file-view.component.html'
+    templateUrl: 'file-view.component.html',
+    styleUrls: ['file-view.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class FileViewComponent implements OnInit {

    nodeId: string = null;

-    constructor(
-        private router: Router,
-        private route: ActivatedRoute,
-        private apiService: AlfrescoApiService) {}
+    constructor(private router: Router,
+                private route: ActivatedRoute,
+                private snackBar: MatSnackBar,
+                private apiService: AlfrescoApiService) {
+    }

    ngOnInit() {

@@ -51,4 +55,7 @@ export class FileViewComponent implements OnInit {
        });
    }

+    onUploadError(errorMessage: string) {
+        this.snackBar.open(errorMessage, '', { duration: 4000 });
+    }
 }
@@ -8,19 +8,16 @@
            </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-divider fxFlex="0 0 auto"></adf-toolbar-divider>
+    <button mat-icon-button
+            [disabled]="!hasSelection(customSourcesDocumentList.selection)"
+            title="{{ 'DOCUMENT_LIST.TOOLBAR.DOWNLOAD' | translate }}"
+            [adfNodeDownload]="customSourcesDocumentList.selection">
+        <mat-icon>get_app</mat-icon>
+    </button>
 </adf-toolbar>
 <adf-document-list
+    #customSourcesDocumentList
    [currentFolderId]="selectedSource"
    locationFormat="/files"
    selectionMode="multiple">
@@ -27,7 +27,7 @@ export class CustomSourcesComponent {
    @Input()
    selectedSource = '-recent-';

-    @ViewChild(DocumentListComponent)
+    @ViewChild('customSourcesDocumentList')
    documentList: DocumentListComponent;

    sources = [
@@ -41,4 +41,8 @@ export class CustomSourcesComponent {
        { title: 'My', value: '-my-' },
        { title: 'Shared', value: '-shared-' }
    ];
+
+    hasSelection(selection: any[]): boolean {
+        return selection && selection.length > 0;
+    }
 }
@@ -1,16 +1,47 @@
 <div class="container">

-    <div class="adf-site-container-style" id="site-container">
-        <adf-sites-dropdown (change)="getSiteContent($event)" [hideMyFiles]="false">
+    <mat-accordion *ngIf="showRecentFiles" class="adf-container-recent">
+        <mat-expansion-panel  hideToggle="true">
+            <mat-expansion-panel-header >
+                <mat-panel-title>
+                    {{ 'DOCUMENT_LIST.RECENT.TITLE' | translate }}<mat-icon>history</mat-icon>
+                </mat-panel-title>
+            </mat-expansion-panel-header>
+
+            <adf-document-list
+                [currentFolderId]="'-recent-'"
+                locationFormat="/files"
+                [display]="'gallery'"
+                [showHeader]="false"
+                [maxItems]="5"
+                (preview)="showFile($event)"
+                selectionMode="null">
+                <empty-folder-content>
+                    <ng-template>
+                        <div class="empty-list__block">
+                            <mat-icon>history</mat-icon>
+                            <p class="empty-list__title">{{ 'DOCUMENT_LIST.RECENT.EMPTY_STATE.TITLE' | translate}}</p>
+                        </div>
+                    </ng-template>
+                </empty-folder-content>
+            </adf-document-list>
+        </mat-expansion-panel>
+    </mat-accordion>
+
+    <div *ngIf="showSitePicker" class="adf-site-container-style" id="site-container">
+        <adf-sites-dropdown (change)="onSiteChange($event)" [hideMyFiles]="false" [relations]="'members'">
        </adf-sites-dropdown>
    </div>
+
    <div class="document-list-container" fxLayout="row" fxLayoutAlign="start stretch" fxLayoutGap="16px">
        <adf-upload-drag-area fxFlex="1 1 auto"
                              [disabled]="disableDragArea"
-                              [parentId]="getDocumentListCurrentFolderId()"
+                              [acceptedFilesType]="getFileFiltering()"
+                              [rootFolderId]="getDocumentListCurrentFolderId()"
                              [versioning]="versioning"
                              [adf-node-permission]="'create'"
-                              [adf-nodes]="disableDragArea ? getCurrentDocumentListNode() : []">
+                              [adf-nodes]="disableDragArea ? getCurrentDocumentListNode() : []"
+                              (beginUpload)="onBeginUpload($event)">
            <div *ngIf="errorMessage" class="error-message">
                <button (click)="resetError()" mat-icon-button>
                    <mat-icon>highlight_off</mat-icon>
@@ -21,8 +52,7 @@
                <adf-toolbar-title fxFlex="0 1 auto">
                    <adf-breadcrumb fxShow fxHide.lt-sm="true"
                                    class="files-breadcrumb"
-                                    root="Personal Files"
-                                    (navigate)="onBreadcrumbNavigate($event)"
+                                    root="APP.PERSONAL-FILES"
                                    [target]="documentList"
                                    [folderNode]="documentList.folderNode">
                    </adf-breadcrumb>
@@ -39,47 +69,64 @@
                    <button
                        mat-icon-button
                        title="{{ 'DOCUMENT_LIST.TOOLBAR.CARDVIEW' | translate }}"
-                        (click)="toogleCardview()">
-                        <mat-icon>view_comfy</mat-icon>
+                        (click)="toogleGalleryView()">
+                        <mat-icon *ngIf="displayMode === 'list'" matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.CARDVIEW' | translate }}">view_comfy</mat-icon>
+                        <mat-icon *ngIf="displayMode === 'gallery'" matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.LISTVIEW' | translate }}">list</mat-icon>
                    </button>
                    <button
                        mat-icon-button
                        [disabled]="!canCreateContent(documentList.folderNode)"
                        title="{{ 'DOCUMENT_LIST.TOOLBAR.NEW_FOLDER' | translate }}"
-                        [adf-create-folder]="getDocumentListCurrentFolderId()">
+                        (error)="openSnackMessage($event)"
+                        [adf-create-folder]="getDocumentListCurrentFolderId()"
+                        matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.NEW_FOLDER' | translate }}">
                        <mat-icon>create_new_folder</mat-icon>
                    </button>
                    <button mat-icon-button
                            [disabled]="!canEditFolder(documentList.selection)"
                            title="{{ 'DOCUMENT_LIST.TOOLBAR.EDIT_FOLDER' | translate }}"
-                            [adf-edit-folder]="documentList.selection[0]?.entry">
+                            (error)="openSnackMessage($event)"
+                            [adf-edit-folder]="documentList.selection[0]?.entry"
+                            matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.EDIT_FOLDER' | translate }}">
                        <mat-icon>create</mat-icon>
                    </button>
                    <button mat-icon-button
                            [disabled]="!hasSelection(documentList.selection)"
                            title="{{ 'DOCUMENT_LIST.TOOLBAR.DOWNLOAD' | translate }}"
-                            [adfNodeDownload]="documentList.selection">
+                            [adfNodeDownload]="documentList.selection"
+                            matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.DOWNLOAD' | translate }}">
                        <mat-icon>get_app</mat-icon>
                    </button>
                    <button mat-icon-button
                            adf-node-permission="delete"
                            [adf-nodes]="documentList.selection"
                            title="{{ 'DOCUMENT_LIST.TOOLBAR.DELETE' | translate }}"
-                            (delete)="documentList.reload()"
-                            [adf-delete]="documentList.selection">
+                            (delete)="onDeleteActionSuccess($event)"
+                            [adf-delete]="documentList.selection"
+                            matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.DELETE' | translate }}">
                        <mat-icon>delete</mat-icon>
                    </button>
                    <button mat-icon-button
                            [disabled]="!documentList.selection.length"
                            #favorite="adfFavorite"
-                            [adf-node-favorite]="documentList.selection">
+                            [adf-node-favorite]="documentList.selection"
+                            matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.FAVORITES' | translate }}">
                        <mat-icon>
                            {{ favorite.hasFavorites() ? 'star' :'star_border' }}
                        </mat-icon>
                    </button>
+                    <button mat-icon-button
+                            [disabled]="!documentList.selection.length"
+                            [baseShareUrl]="baseShareUrl"
+                            [adf-share]="documentList.selection[0]"
+                            matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.SHARE' | translate }}">
+                        <mat-icon>
+                            share
+                        </mat-icon>
+                    </button>
                </div>

-                <button fxFlex="1 0 auto" mat-icon-button [matMenuTriggerFor]="themePicker">
+                <button fxFlex="1 0 auto" mat-icon-button [matMenuTriggerFor]="themePicker" matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.THEME' | translate }}">
                    <mat-icon>format_color_fill</mat-icon>
                </button>

@@ -90,9 +137,9 @@
                    <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 mat-icon-button (click)="showVersions = !showVersions" class="adf-show-versions-button">
+                    <mat-icon *ngIf="!showVersions" matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.SHOW_VERSION' | translate }}">chevron_left</mat-icon>
+                    <mat-icon *ngIf="showVersions" matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.HIDE_VERSION' | translate }}">chevron_right</mat-icon>
                </button>

                <adf-toolbar-divider fxFlex="0 0 auto" fxHide fxShow.lt-sm="true"></adf-toolbar-divider>
@@ -102,17 +149,20 @@
                </button>
                <mat-menu #menu="matMenu">
                    <button mat-menu-item
-                            (click)="toogleCardview()">
-                        <mat-icon>view_comfy</mat-icon>
+                            (click)="toogleGalleryView()">
+                        <mat-icon *ngIf="displayMode === 'list'" >view_comfy</mat-icon>
+                        <mat-icon *ngIf="displayMode === 'gallery'">list</mat-icon>
                        <span>{{ 'DOCUMENT_LIST.TOOLBAR.CARDVIEW' | translate }}</span>
                    </button>
                    <button mat-menu-item
+                            (error)="openSnackMessage($event)"
                            [adf-create-folder]="getDocumentListCurrentFolderId()">
                        <mat-icon>create_new_folder</mat-icon>
                        <span>{{ 'DOCUMENT_LIST.TOOLBAR.NEW_FOLDER' | translate }}</span>
                    </button>
                    <button mat-menu-item
                            [disabled]="!canEditFolder(documentList.selection)"
+                            (error)="openSnackMessage($event)"
                            [adf-edit-folder]="documentList.selection[0]?.entry">
                        <mat-icon>create</mat-icon>
                        <span>{{ 'DOCUMENT_LIST.TOOLBAR.EDIT_FOLDER' | translate }}</span>
@@ -126,7 +176,9 @@
                    </button>
                    <button mat-menu-item
                            adf-node-permission="delete"
-                            [adf-nodes]="documentList.selection">
+                            [adf-nodes]="documentList.selection"
+                            (delete)="onDeleteActionSuccess($event)"
+                            [adf-delete]="documentList.selection">
                        <mat-icon>delete</mat-icon>
                        <span>{{ 'DOCUMENT_LIST.TOOLBAR.DELETE' | translate }}</span>
                    </button>
@@ -135,7 +187,6 @@

            <adf-document-list
                #documentList
-                [enableInfiniteScrolling]="infiniteScrolling"
                [permissionsStyle]="permissionsStyle"
                [currentFolderId]="currentFolderId"
                [contextMenuActions]="true"
@@ -143,8 +194,13 @@
                [allowDropFiles]="true"
                [selectionMode]="selectionMode"
                [multiselect]="multiselect"
-                [cardview]="cardview"
+                [display]="displayMode"
                [node]="nodeResult"
+                [includeFields]="includeFields"
+                [sorting]="sorting"
+                [sortingMode]="sortingMode"
+                [showHeader]="showHeader"
+                [thumbnails]="thumbnails"
                (error)="onNavigationError($event)"
                (success)="resetError()"
                (ready)="emitReadyEvent($event)"
@@ -166,6 +222,7 @@
                        class="image-table-cell">
                    </data-column>
                    <data-column
+                        *ngIf="showNameColumn"
                        key="name"
                        title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
                        [formatTooltip]="getNodeNameTooltip"
@@ -196,6 +253,17 @@
                        </ng-template>
                    </data-column>
                    -->
+                    <data-column
+                        class="desktop-only"
+                        title="{{'DOCUMENT_LIST.COLUMNS.IS_LOCKED' | translate}}"
+                        key="id">
+                        <ng-template let-entry="$implicit">
+                            <button mat-icon-button [adf-node-lock]="entry.row.node.entry">
+                                <mat-icon *ngIf="entry.row.getValue('isLocked')">lock</mat-icon>
+                                <mat-icon *ngIf="!entry.row.getValue('isLocked')">lock_open</mat-icon>
+                            </button>
+                        </ng-template>
+                    </data-column>
                    <data-column
                        title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
                        key="createdByUser.displayName"
@@ -212,16 +280,35 @@
                </data-columns>

                <content-actions>
+                    <!-- Conditional actions demo -->
+                    <content-action
+                        target="all"
+                        title="Action for 'custom' node"
+                        [disabled]="isCustomActionDisabled"
+                        (execute)="runCustomAction($event)">
+                    </content-action>
+                    <content-action
+                        icon="get_app"
+                        title="Download this file now!"
+                        handler="download"
+                        [visible]="canDownloadNode">
+                    </content-action>
+                    <content-action
+                        icon="get_app"
+                        title="Never see this action again"
+                        handler="download"
+                        [visible]="false">
+                    </content-action>
                    <!-- common actions -->
                    <content-action
                        icon="get_app"
-                        title="{{'DOCUMENT_LIST.ACTIONS.DOWNLOAD' | translate}}"
+                        title="DOCUMENT_LIST.ACTIONS.DOWNLOAD"
                        handler="download">
                    </content-action>
                    <content-action
                        icon="content_copy"
-                        title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.COPY' | translate}}"
-                        permission="update"
+                        title="DOCUMENT_LIST.ACTIONS.FOLDER.COPY"
+                        permission="copy"
                        [disableWithNoPermission]="true"
                        (error)="onContentActionError($event)"
                        (success)="onContentActionSuccess($event)"
@@ -229,7 +316,7 @@
                    </content-action>
                    <content-action
                        icon="redo"
-                        title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.MOVE' | translate}}"
+                        title="DOCUMENT_LIST.ACTIONS.FOLDER.MOVE"
                        permission="update"
                        [disableWithNoPermission]="true"
                        (error)="onContentActionError($event)"
@@ -240,30 +327,43 @@
                        icon="delete"
                        permission="delete"
                        [disableWithNoPermission]="true"
-                        title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.DELETE' | translate}}"
+                        title="DOCUMENT_LIST.ACTIONS.FOLDER.DELETE"
                        (permissionEvent)="handlePermissionError($event)"
                        (success)="onDeleteActionSuccess($event)"
                        handler="delete">
                    </content-action>
                    <content-action
                        icon="info"
-                        title="{{'DOCUMENT_LIST.ACTIONS.METADATA' | translate}}"
+                        title="DOCUMENT_LIST.ACTIONS.METADATA"
                        (execute)="onManageMetadata($event)">
                    </content-action>
                    <!-- document actions -->
                    <content-action
                        icon="storage"
                        target="document"
-                        title="{{'DOCUMENT_LIST.ACTIONS.VERSIONS' | translate}}"
+                        title="DOCUMENT_LIST.ACTIONS.VERSIONS"
                        (execute)="onManageVersions($event)">
                    </content-action>
                    <content-action
                        *ngIf="authenticationService.isBpmLoggedIn()"
                        icon="play_arrow"
                        target="document" 
-                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.PROCESS_ACTION' | translate}}"
+                        title="DOCUMENT_LIST.ACTIONS.DOCUMENT.PROCESS_ACTION"
                        (execute)="startProcesAction($event)">
                    </content-action>
+                    <content-action
+                        icon="settings_input_component"
+                        title="DOCUMENT_LIST.ACTIONS.PERMISSION"
+                        permission="copy"
+                        (error)="onContentActionError($event)"
+                        (execute)="onPermissionRequested($event)">
+                    </content-action>
+                    <content-action
+                        icon="lock"
+                        permission="lock"
+                        handler="lock"
+                        title="Lock">
+                    </content-action>
                </content-actions>
            </adf-document-list>
            <adf-pagination
@@ -278,7 +378,7 @@
                (prevPage)="onPrevPage($event)">
            </adf-pagination>
            <adf-infinite-pagination
-                *ngIf="infiniteScrolling"
+                [hidden]="!infiniteScrolling"
                [target]="documentList"
                [loading]="documentList.infiniteLoading">
                {{ 'ADF-DOCUMENT-LIST.LAYOUT.LOAD_MORE' | translate }}
@@ -286,33 +386,44 @@
        </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
+
+                <adf-info-drawer [title]="'Details'">
+                    <adf-info-drawer-tab [label]="'Properties'">
+                        <adf-content-metadata-card
                            [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>
+                        </adf-content-metadata-card>
+                    </adf-info-drawer-tab>
+                    <adf-info-drawer-tab [label]="'Versions'">
+                        <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"
+                                    [showComments]="showVersionComments"
+                                    [allowDownload]="allowVersionDownload">
+                                </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>
+                    </adf-info-drawer-tab>
+                </adf-info-drawer>
            </div>
        </adf-info-drawer-layout>
    </div>
 </div>

-<context-menu-holder></context-menu-holder>
+<adf-context-menu-holder></adf-context-menu-holder>

 <div *ngIf="processId">
    <adf-start-process
@@ -321,7 +432,7 @@
    </adf-start-process>
 </div>

-<div class="adf-content-service-settings">
+<div *ngIf="showSettingsPanel" class="adf-content-service-settings">

    <p>Current folder ID: {{ documentList.currentFolderId }}</p>

@@ -335,6 +446,12 @@
    </div>

    <div class="container">
+        <section>
+            <mat-slide-toggle color="primary" [(ngModel)]="showNameColumn">
+                Show Name Column
+            </mat-slide-toggle>
+        </section>
+
        <section>
            <mat-slide-toggle [color]="'primary'" [(ngModel)]="multiselect">{{'DOCUMENT_LIST.MULTISELECT_CHECKBOXES' |
                translate}}
@@ -366,17 +483,41 @@
        </section>

        <section>
-            <mat-slide-toggle [color]="'primary'" [(ngModel)]="versioning">{{'DOCUMENT_LIST.ENABLE_VERSIONING' |
+            <mat-slide-toggle [color]="'primary'" (click)="toggleThumbnails()" >{{'DOCUMENT_LIST.THUMBNAILS' |
                translate}}
            </mat-slide-toggle>
        </section>

        <section>
-            <mat-slide-toggle [color]="'primary'" [(ngModel)]="infiniteScrolling">
+            <mat-slide-toggle [color]="'primary'" [(ngModel)]="versioning">
+                {{'DOCUMENT_LIST.ENABLE_VERSIONING' | translate}}
+            </mat-slide-toggle>
+        </section>
+
+        <section>
+            <mat-slide-toggle color="primary" (click)="onInfiniteScrolling()">
                {{'DOCUMENT_LIST.ENABLE_INFINITE_SCROLL' | translate}}
            </mat-slide-toggle>
        </section>

+        <section>
+            <mat-slide-toggle color="primary" [(ngModel)]="showVersionComments">
+                {{'APP.ADF_VERSION_MANAGER.SHOW_COMMENTS' | translate}}
+            </mat-slide-toggle>
+        </section>
+
+        <section>
+            <mat-slide-toggle color="primary" [(ngModel)]="allowVersionDownload">
+                {{'APP.ADF_VERSION_MANAGER.ALLOW_DOWNLOAD' | translate}}
+            </mat-slide-toggle>
+        </section>
+
+        <section>
+            <mat-slide-toggle color="primary" [(ngModel)]="warnOnMultipleUploads">
+                {{'APP.WARN-MULTIPLE-UPLOADS' | translate}}
+            </mat-slide-toggle>
+        </section>
+
        <h5>Upload</h5>
        <section *ngIf="acceptedFilesTypeShow">
            <mat-form-field floatPlaceholder="float">
@@ -402,11 +543,12 @@
                [multipleFiles]="multipleFileUpload"
                [uploadFolders]="folderUpload"
                [maxFilesSize]="maxSizeShow ? maxFilesSize : null"
-                (error)="handleUploadError($event)"
+                (error)="openSnackMessage($event)"
                [versioning]="versioning"
                [adf-node-permission]="'create'"
                [adf-nodes]="enableUpload ? getCurrentDocumentListNode() : []"
-                (permissionEvent)="handlePermissionError($event)">
+                (permissionEvent)="handlePermissionError($event)"
+                (beginUpload)="onBeginUpload($event)">
            </adf-upload-button>
        </div>
        <div *ngIf="acceptedFilesTypeShow">
@@ -420,7 +562,7 @@
                [multipleFiles]="multipleFileUpload"
                [uploadFolders]="folderUpload"
                [versioning]="versioning"
-                (error)="handleUploadError($event)"
+                (error)="openSnackMessage($event)"
                [adf-node-permission]="'create'"
                [adf-nodes]="enableUpload ? getCurrentDocumentListNode() : []"
                (permissionEvent)="handlePermissionError($event)">
@@ -447,4 +589,4 @@
    </div>
 </div>

-<file-uploading-dialog #fileDialog></file-uploading-dialog>
+<adf-file-uploading-dialog #fileDialog (error)="openSnackMessage($event)" ></adf-file-uploading-dialog>
@@ -1,138 +1,169 @@
-$minimumDocumentListWidth: 425px;
+@mixin adf-file-component-theme($theme) {
+    $minimumDocumentListWidth: 900px;
+    $foreground: map-get($theme, foreground);

-.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-selected > svg {
-    fill: #00bcd4 !important;
-}
-
-.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;
-        }
+        margin: 10px !important;
    }

-    & ::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%;
-            }
+    @media screen and ($mat-xsmall) {
+        .container {
+            margin: 0;
        }

-        .adf-new-version-uploader-container {
-            padding: 8px 24px 16px 24px;
-        }
-    }
-}
-
-.adf-no-result__empty_doc_lib {
-    width: 565px;
-    height: 161px;
-    object-fit: contain;
-    margin-top: 17px;
-}
-
-.adf-empty_template {
-    text-align: center;
-    margin-top: 20px;
-    margin-bottom: 20px;
-}
-
-.adf-no-result-message{
-    height: 32px;
-    opacity: 0.26;
-    font-size: 24px;
-    line-height: 1.33;
-    letter-spacing: -1px;
-}
-
-.adf-recent-container{
-    border: 1px solid rgba(0, 0, 0, 0.07);
-}
-
-@media (max-width: $minimumDocumentListWidth) {
-    adf-document-list ::ng-deep adf-datatable  {
-        & ::ng-deep .adf-data-table-cell--fileSize {
+        .adf-show-versions-button.mat-icon-button {
            display: none;
        }
    }

-    .adf-site-container-style {
-        width: 100%;
-        display: block;
+    .error-message {
+        text-align: left;
+    }

-        & ::ng-deep .adf-site-dropdown-list-element {
+    .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-selected > svg {
+        fill: #00bcd4 !important;
+    }
+
+    .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: 360px !important;
+        color: rgba(0, 0, 0, 0.87);
+
+        .adf-manage-versions-empty,
+        .adf-manage-versions-no-permission {
+            margin: 44px;
+            color: mat-color($foreground, text, 0.54);
+            text-align: center;
+
+            &-icon {
+                display: block;
+                font-size: 48px;
+                margin: 0 auto 32px auto;
+            }
+        }
+
+        & .adf-info-drawer-layout-header {
+            display: none !important;
+        }
+
+        & .adf-info-drawer-layout-content {
+            padding: 10px !important;
+        }
+    }
+
+    .adf-no-result__empty_doc_lib {
+        width: 565px;
+        height: 161px;
+        object-fit: contain;
+        margin-top: 17px;
+    }
+
+    .adf-empty_template {
+        text-align: center;
+        margin-top: 20px;
+        margin-bottom: 20px;
+    }
+
+    .adf-no-result-message {
+        height: 32px;
+        opacity: 0.26;
+        font-size: 24px;
+        line-height: 1.33;
+        letter-spacing: -1px;
+    }
+
+    .adf-container-recent {
+        mat-icon {
+            margin-left: 20px;
+        }
+
+        .empty-list__block {
+            height: 100%;
+            padding: 0;
+            margin: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+    }
+
+    @media (max-device-width: $minimumDocumentListWidth) {
+        adf-document-list .adf-data-table {
+            .adf-data-table-cell,
+            .adf-datatable-table-cell-header {
+                display: none;
+            }
+
+            .adf-data-table-cell:first-child,
+            .adf-datatable-table-cell-header:first-child,
+            .adf-data-table-cell:nth-child(2),
+            .adf-datatable-table-cell-header:nth-child(2) {
+                display: table-cell;
+            }
+        }
+
+        .adf-site-container-style {
+            width: 100%;
+            display: block;
+
+            & ::ng-deep .adf-site-dropdown-list-element {
+                width: 100%;
+            }
+        }
+
+        adf-file-uploading-dialog ::ng-deep .upload-dialog {
+            width: 80%;
+
+            & ::ng-deep adf-file-uploading-list ::ng-deep adf-file-uploading-list-row .adf-file-uploading-row__group {
+                min-width: 0;
+            }
+        }
+    }
+
+    @media (max-device-width: 1024px) {
+        adf-document-list .adf-data-table {
+
+            .adf-data-table-cell:nth-child(4),
+            .adf-datatable-table-cell-header:nth-child(4) {
+                display: none;
+            }
        }
    }
 }
@@ -16,26 +16,29 @@
 */

 import {
-    Component, Input, OnInit, OnChanges, OnDestroy, ChangeDetectorRef,
-    EventEmitter, Optional, ViewChild, SimpleChanges, Output
+    Component, Input, OnInit, OnChanges, OnDestroy, Optional,
+    EventEmitter, ViewChild, SimpleChanges, Output
 } from '@angular/core';
+import { Location } from '@angular/common';
+
 import { MatDialog } from '@angular/material';
 import { ActivatedRoute, Params, Router } from '@angular/router';
-import { MinimalNodeEntity, NodePaging, Pagination, PathElementEntity, MinimalNodeEntryEntity, SiteEntry } from 'alfresco-js-api';
+import { MinimalNodeEntity, NodePaging, Pagination, MinimalNodeEntryEntity, SiteEntry } from 'alfresco-js-api';
 import {
-    AuthenticationService, ContentService, TranslationService,
+    AuthenticationService, AppConfigService, AppConfigValues, ContentService, TranslationService,
    FileUploadEvent, FolderCreatedEvent, LogService, NotificationService,
    UploadService, DataColumn, DataRow, UserPreferencesService,
-    PaginationComponent, FormValues
+    PaginationComponent, FormValues, DisplayMode, UserPreferenceValues, InfinitePaginationComponent
 } from '@alfresco/adf-core';

-import { DocumentListComponent, PermissionStyleModel } from '@alfresco/adf-content-services';
+import { DocumentListComponent, PermissionStyleModel, UploadFilesEvent, ConfirmDialogComponent } from '@alfresco/adf-content-services';

 import { SelectAppsDialogComponent } from '@alfresco/adf-process-services';

 import { VersionManagerDialogAdapterComponent } from './version-manager-dialog-adapter.component';
 import { MetadataDialogAdapterComponent } from './metadata-dialog-adapter.component';
 import { Subscription } from 'rxjs/Subscription';
+import { PreviewService } from '../../services/preview.service';

 const DEFAULT_FOLDER_TO_SHOW = '-my-';

@@ -50,7 +53,10 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
    fileNodeId: any;
    showViewer = false;
    showVersions = false;
-    cardview = false;
+    displayMode = DisplayMode.List;
+    includeFields = ['isFavorite', 'isLocked', 'aspectNames'];
+
+    baseShareUrl = this.appConfig.get<string>(AppConfigValues.ECMHOST) + '/preview/s/';

    toolbarColor = 'default';

@@ -60,14 +66,32 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
        { value: 'multiple', viewValue: 'Multiple' }
    ];

+    // The identifier of a node. You can also use one of these well-known aliases: -my- | -shared- | -root-
    @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;

    formValues: FormValues = {};

    processId;

+    @Input()
+    sorting = ['name', 'asc'];
+
+    @Input()
+    sortingMode = 'client';
+
+    @Input()
+    showRecentFiles = true;
+
+    @Input()
+    showSitePicker = true;
+
+    @Input()
+    showSettingsPanel = true;
+
+    @Input()
+    showHeader = true;
+
    @Input()
    selectionMode = 'multiple';

@@ -86,9 +110,15 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
    @Input()
    maxSizeShow = false;

+    @Input()
+    showVersionComments = true;
+
    @Input()
    versioning = false;

+    @Input()
+    allowVersionDownload = true;
+
    @Input()
    acceptedFilesType = '.jpg,.pdf,.js';

@@ -107,6 +137,9 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
    @Input()
    disableDragArea = false;

+    @Input()
+    showNameColumn = true;
+
    @Output()
    documentListReady: EventEmitter<any> = new EventEmitter();

@@ -128,54 +161,62 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
    @Output()
    deleteElementSuccess: EventEmitter<any> = new EventEmitter();

-    @ViewChild(DocumentListComponent)
+    @ViewChild('documentList')
    documentList: DocumentListComponent;

-    @ViewChild(PaginationComponent)
+    @ViewChild('standardPagination')
    standardPagination: PaginationComponent;

+    @ViewChild(InfinitePaginationComponent)
+    infinitePaginationComponent: InfinitePaginationComponent;
+
    permissionsStyle: PermissionStyleModel[] = [];
    infiniteScrolling: boolean;
    supportedPages: number[];
+    currentSiteid = '';
+    warnOnMultipleUploads = false;
+    thumbnails = false;

    private onCreateFolder: Subscription;
    private onEditFolder: Subscription;

-    constructor(private changeDetector: ChangeDetectorRef,
-                private notificationService: NotificationService,
+    constructor(private notificationService: NotificationService,
                private uploadService: UploadService,
                private contentService: ContentService,
                private dialog: MatDialog,
+                private location: Location,
                private translateService: TranslationService,
                private router: Router,
                private logService: LogService,
+                private appConfig: AppConfigService,
                private preference: UserPreferencesService,
+                private preview: PreviewService,
                @Optional() private route: ActivatedRoute,
                public authenticationService: AuthenticationService) {
+        this.preference.select(UserPreferenceValues.SupportedPageSizes)
+            .subscribe((pages) => {
+                this.supportedPages = pages;
+            });
    }

    showFile(event) {
        const entry = event.value.entry;
        if (entry && entry.isFile) {
-            this.router.navigate(['/files', entry.id, 'view']);
+            this.preview.showResource(entry.id);
        }
    }

-    onFolderChange($event) {
-        this.currentFolderId = $event.value.id;
-        this.router.navigate(['/files', $event.value.id]);
-    }
-
-    onBreadcrumbNavigate(route: PathElementEntity) {
-        this.router.navigate(['/files', route.id]);
-    }
-
    toggleFolder() {
        this.multipleFileUpload = false;
        this.folderUpload = !this.folderUpload;
        return this.folderUpload;
    }

+    toggleThumbnails() {
+        this.thumbnails = !this.thumbnails;
+        this.documentList.reload();
+    }
+
    ngOnInit() {
        if (!this.pagination) {
            this.pagination = <Pagination>{
@@ -183,11 +224,15 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
                skipCount: 0
            };
        }
+
        if (this.route) {
            this.route.params.forEach((params: Params) => {
-                if (params['id']) {
+                if (params['id'] && this.currentFolderId !== params['id']) {
                    this.currentFolderId = params['id'];
-                    this.changeDetector.detectChanges();
+                }
+
+                if (params['mode'] && params['mode'] === DisplayMode.Gallery) {
+                    this.displayMode = DisplayMode.Gallery;
                }
            });
        }
@@ -198,7 +243,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
        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.supportedPages = this.preference.getDifferentPageSizes();
+        this.supportedPages = this.supportedPages ? this.supportedPages : this.preference.getDefaultPageSizes();

        // this.permissionsStyle.push(new PermissionStyleModel('document-list__create', PermissionsEnum.CREATE));
        // this.permissionsStyle.push(new PermissionStyleModel('document-list__disable', PermissionsEnum.NOT_CREATE, false, true));
@@ -236,9 +281,9 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
        }
    }

-    onNavigationError(err: any) {
-        if (err) {
-            this.errorMessage = err.message || 'Navigation error';
+    onNavigationError(error: any) {
+        if (error) {
+            this.router.navigate(['/error', error.status]);
        }
    }

@@ -267,33 +312,29 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
        }
    }

+    onFolderChange($event) {
+        this.router.navigate(['/files', $event.value.id, 'display', this.displayMode]);
+    }
+
    handlePermissionError(event: any) {
        this.translateService.get('PERMISSON.LACKOF', {
            permission: event.permission,
            action: event.action,
            type: event.type
        }).subscribe((message) => {
-            this.notificationService.openSnackMessage(
-                message,
-                4000
-            );
+            this.openSnackMessage(message);
        });
    }

-    handleUploadError(event: any) {
+    openSnackMessage(event: any) {
        this.notificationService.openSnackMessage(
            event,
            4000
        );
    }

-    emitReadyEvent(event: any) {
-        if (this.pageIsEmpty(event)) {
-            this.standardPagination.goPrevious();
-        } else {
-            this.documentListReady.emit(event);
-            this.pagination = event.list.pagination;
-        }
+    emitReadyEvent(event: NodePaging) {
+        this.documentListReady.emit(event);
    }

    pageIsEmpty(node: NodePaging) {
@@ -315,31 +356,44 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
                translatedErrorMessage = this.translateService.get('OPERATION.ERROR.UNKNOWN');
        }

-        this.notificationService.openSnackMessage(translatedErrorMessage.value, 4000);
+        this.openSnackMessage(translatedErrorMessage.value);
    }

    onContentActionSuccess(message) {
        const translatedMessage: any = this.translateService.get(message);
-        this.notificationService.openSnackMessage(translatedMessage.value, 4000);
+        this.openSnackMessage(translatedMessage.value);
+        this.reloadForInfiniteScrolling();
    }

    onDeleteActionSuccess(message) {
        this.uploadService.fileDeleted.next(message);
        this.deleteElementSuccess.emit();
+        this.reloadForInfiniteScrolling();
+        this.openSnackMessage(message);
+    }
+
+    onPermissionRequested(node) {
+        this.router.navigate(['/permissions', node.value.entry.id]);
+    }
+
+    private reloadForInfiniteScrolling() {
+        this.documentList.reload();
    }

    onManageVersions(event) {
        const contentEntry = event.value.entry;
+        const showComments = this.showVersionComments;
+        const allowDownload = this.allowVersionDownload;

        if (this.contentService.hasPermission(contentEntry, 'update')) {
            this.dialog.open(VersionManagerDialogAdapterComponent, {
-                data: { contentEntry },
+                data: { contentEntry: contentEntry, showComments: showComments, allowDownload: allowDownload },
                panelClass: 'adf-version-manager-dialog',
                width: '630px'
            });
        } else {
            const translatedErrorMessage: any = this.translateService.get('OPERATION.ERROR.PERMISSION');
-            this.notificationService.openSnackMessage(translatedErrorMessage.value, 4000);
+            this.openSnackMessage(translatedErrorMessage.value);
        }
    }

@@ -354,12 +408,12 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
            });
        } else {
            const translatedErrorMessage: any = this.translateService.get('OPERATION.ERROR.PERMISSION');
-            this.notificationService.openSnackMessage(translatedErrorMessage.value, 4000);
+            this.openSnackMessage(translatedErrorMessage.value);
        }
    }

-    getSiteContent(site: SiteEntry) {
-        this.currentFolderId = site && site.entry.guid ? site.entry.guid : DEFAULT_FOLDER_TO_SHOW;
+    onSiteChange(site: SiteEntry) {
+        this.currentFolderId = site.entry.guid;
    }

    getDocumentListCurrentFolderId() {
@@ -433,7 +487,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
        this.turnedNextPage.emit(event);
    }

-    loadNextBatch(event: Pagination) {
+    loadNextBatch(event: Pagination): void {
        this.loadNext.emit(event);
    }

@@ -441,7 +495,64 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
        this.turnedPreviousPage.emit(event);
    }

-    toogleCardview(event: Pagination): void {
-        this.cardview = !this.cardview;
+    toogleGalleryView(): void {
+        this.displayMode = this.displayMode === DisplayMode.List ? DisplayMode.Gallery : DisplayMode.List;
+        const url = this
+            .router
+            .createUrlTree(['/files', this.currentFolderId, 'display', this.displayMode])
+            .toString();
+
+        this.location.go(url);
+    }
+
+    onInfiniteScrolling(): void {
+        this.infiniteScrolling = !this.infiniteScrolling;
+        this.infinitePaginationComponent.reset();
+        this.reloadForInfiniteScrolling();
+    }
+
+    canDownloadNode = (node: MinimalNodeEntity): boolean => {
+        if (node && node.entry && node.entry.name === 'custom') {
+            return true;
+        }
+        return false;
+    }
+
+    onBeginUpload(event: UploadFilesEvent) {
+        if (this.warnOnMultipleUploads && event) {
+            const files = event.files || [];
+            if (files.length > 1) {
+                event.pauseUpload();
+
+                const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+                    data: {
+                        title: 'Upload',
+                        message: `Are you sure you want to upload ${files.length} file(s)?`
+                    },
+                    minWidth: '250px'
+                });
+
+                dialogRef.afterClosed().subscribe(result => {
+                    if (result === true) {
+                        event.resumeUpload();
+                    }
+                });
+            }
+        }
+    }
+
+    isCustomActionDisabled = (node: MinimalNodeEntity): boolean => {
+        if (node && node.entry && node.entry.name === 'custom') {
+            return false;
+        }
+        return true;
+    }
+
+    runCustomAction(event) {
+        console.log(event);
+    }
+
+    getFileFiltering() {
+        return this.acceptedFilesTypeShow ? this.acceptedFilesType : '*';
    }
 }
@@ -1,7 +1,18 @@
 <header mat-dialog-title>{{'VERSION.DIALOG.TITLE' | translate}}</header>
-<section mat-dialog-content>
-    <adf-version-manager [node]="contentEntry"></adf-version-manager>
+
+<section>
+    <mat-slide-toggle color="primary" [(ngModel)]="readOnly">
+        {{'APP.ADF_VERSION_MANAGER.READ_ONLY' | translate}}
+    </mat-slide-toggle>
 </section>
+
+<section mat-dialog-content *ngIf="!readOnly">
+    <adf-version-manager [node]="contentEntry" [allowDownload]="allowDownload" [showComments]="showComments" (uploadError)="uploadError($event)"></adf-version-manager>
+</section>
+<section mat-dialog-content *ngIf="readOnly">
+    <adf-version-list [node]="contentEntry" [showActions]="false" ></adf-version-list>
+</section>
+
 <footer mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
    <button mat-button (click)="close()">{{'VERSION.DIALOG.CLOSE' | translate}}</button>
 </footer>
@@ -18,6 +18,7 @@
 import { Component, Inject, ViewEncapsulation } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
 import { MinimalNodeEntryEntity } from 'alfresco-js-api';
+import { MatSnackBar } from '@angular/material';

@Component({
    templateUrl: './version-manager-dialog-adapter.component.html',
@@ -27,9 +28,20 @@ export class VersionManagerDialogAdapterComponent {

    public contentEntry: MinimalNodeEntryEntity;

+    showComments = true;
+    allowDownload = true;
+    readOnly = false;
+
    constructor(@Inject(MAT_DIALOG_DATA) data: any,
+                private snackBar: MatSnackBar,
                private containingDialog?: MatDialogRef<VersionManagerDialogAdapterComponent>) {
        this.contentEntry = data.contentEntry;
+        this.showComments = data.hasOwnProperty('showComments') ? data.showComments : this.showComments;
+        this.allowDownload = data.hasOwnProperty('allowDownload') ? data.allowDownload : this.allowDownload;
+    }
+
+    uploadError(errorMessage: string) {
+        this.snackBar.open(errorMessage, '', { duration: 4000 });
    }

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

+    static getSimpleFormDefinition(): any {
+        return {
+            'id': 1001,
+            'name': 'SIMPLE_FORM_EXAMPLE',
+            'description': '',
+            'version': 1,
+            'lastUpdatedBy': 2,
+            'lastUpdatedByFullName': 'Test01 01Test',
+            'lastUpdated': '2018-02-26T17:44:04.543+0000',
+            'stencilSetId': 0,
+            'referenceId': null,
+            'taskId': '9999',
+            'formDefinition': {
+              'tabs': [],
+              'fields': [
+                {
+                  'fieldType': 'ContainerRepresentation',
+                  'id': '1519666726245',
+                  'name': 'Label',
+                  'type': 'container',
+                  'value': null,
+                  'required': false,
+                  'readOnly': false,
+                  'overrideId': false,
+                  'colspan': 1,
+                  'placeholder': null,
+                  'minLength': 0,
+                  'maxLength': 0,
+                  'minValue': null,
+                  'maxValue': null,
+                  'regexPattern': null,
+                  'optionType': null,
+                  'hasEmptyValue': null,
+                  'options': null,
+                  'restUrl': null,
+                  'restResponsePath': null,
+                  'restIdProperty': null,
+                  'restLabelProperty': null,
+                  'tab': null,
+                  'className': null,
+                  'dateDisplayFormat': null,
+                  'layout': null,
+                  'sizeX': 2,
+                  'sizeY': 1,
+                  'row': -1,
+                  'col': -1,
+                  'visibilityCondition': null,
+                  'numberOfColumns': 2,
+                  'fields': {
+                    '1': [
+                      {
+                        'fieldType': 'RestFieldRepresentation',
+                        'id': 'typeahedField',
+                        'name': 'TypeahedField',
+                        'type': 'typeahead',
+                        'value': null,
+                        'required': false,
+                        'readOnly': false,
+                        'overrideId': false,
+                        'colspan': 1,
+                        'placeholder': null,
+                        'minLength': 0,
+                        'maxLength': 0,
+                        'minValue': null,
+                        'maxValue': null,
+                        'regexPattern': null,
+                        'optionType': null,
+                        'hasEmptyValue': null,
+                        'options': null,
+                        'restUrl': 'https://jsonplaceholder.typicode.com/users',
+                        'restResponsePath': null,
+                        'restIdProperty': 'id',
+                        'restLabelProperty': 'name',
+                        'tab': null,
+                        'className': null,
+                        'params': {
+                          'existingColspan': 1,
+                          'maxColspan': 2
+                        },
+                        'dateDisplayFormat': null,
+                        'layout': {
+                          'row': -1,
+                          'column': -1,
+                          'colspan': 1
+                        },
+                        'sizeX': 1,
+                        'sizeY': 1,
+                        'row': -1,
+                        'col': -1,
+                        'visibilityCondition': null,
+                        'endpoint': null,
+                        'requestHeaders': null
+                      }
+                    ],
+                    '2': [
+                      {
+                        'fieldType': 'RestFieldRepresentation',
+                        'id': 'radioButton',
+                        'name': 'RadioButtons',
+                        'type': 'radio-buttons',
+                        'value': null,
+                        'required': false,
+                        'readOnly': false,
+                        'overrideId': false,
+                        'colspan': 1,
+                        'placeholder': null,
+                        'minLength': 0,
+                        'maxLength': 0,
+                        'minValue': null,
+                        'maxValue': null,
+                        'regexPattern': null,
+                        'optionType': null,
+                        'hasEmptyValue': null,
+                        'options': [
+                          {
+                            'id': 'option_1',
+                            'name': 'Option 1'
+                          },
+                          {
+                            'id': 'option_2',
+                            'name': 'Option 2'
+                          },
+                          {
+                            'id': 'option_3',
+                            'name': 'Option 3'
+                          }
+                        ],
+                        'restUrl': null,
+                        'restResponsePath': null,
+                        'restIdProperty': null,
+                        'restLabelProperty': null,
+                        'tab': null,
+                        'className': null,
+                        'params': {
+                          'existingColspan': 1,
+                          'maxColspan': 1
+                        },
+                        'dateDisplayFormat': null,
+                        'layout': {
+                          'row': -1,
+                          'column': -1,
+                          'colspan': 1
+                        },
+                        'sizeX': 1,
+                        'sizeY': 2,
+                        'row': -1,
+                        'col': -1,
+                        'visibilityCondition': null,
+                        'endpoint': null,
+                        'requestHeaders': null
+                      }
+                    ]
+                  }
+                },
+                {
+                  'fieldType': 'ContainerRepresentation',
+                  'id': '1519666735185',
+                  'name': 'Label',
+                  'type': 'container',
+                  'value': null,
+                  'required': false,
+                  'readOnly': false,
+                  'overrideId': false,
+                  'colspan': 1,
+                  'placeholder': null,
+                  'minLength': 0,
+                  'maxLength': 0,
+                  'minValue': null,
+                  'maxValue': null,
+                  'regexPattern': null,
+                  'optionType': null,
+                  'hasEmptyValue': null,
+                  'options': null,
+                  'restUrl': null,
+                  'restResponsePath': null,
+                  'restIdProperty': null,
+                  'restLabelProperty': null,
+                  'tab': null,
+                  'className': null,
+                  'dateDisplayFormat': null,
+                  'layout': null,
+                  'sizeX': 2,
+                  'sizeY': 1,
+                  'row': -1,
+                  'col': -1,
+                  'visibilityCondition': null,
+                  'numberOfColumns': 2,
+                  'fields': {
+                    '1': [
+                      {
+                        'fieldType': 'RestFieldRepresentation',
+                        'id': 'selectBox',
+                        'name': 'SelectBox',
+                        'type': 'dropdown',
+                        'value': 'Choose one...',
+                        'required': false,
+                        'readOnly': false,
+                        'overrideId': false,
+                        'colspan': 1,
+                        'placeholder': null,
+                        'minLength': 0,
+                        'maxLength': 0,
+                        'minValue': null,
+                        'maxValue': null,
+                        'regexPattern': null,
+                        'optionType': 'manual',
+                        'hasEmptyValue': true,
+                        'options': [
+                          {
+                            'id': 'empty',
+                            'name': 'Choose one...'
+                          },
+                          {
+                            'id': 'option_1',
+                            'name': '1'
+                          },
+                          {
+                            'id': 'option_2',
+                            'name': '2'
+                          },
+                          {
+                            'id': 'option_3',
+                            'name': '3'
+                          }
+                        ],
+                        'restUrl': null,
+                        'restResponsePath': null,
+                        'restIdProperty': null,
+                        'restLabelProperty': null,
+                        'tab': null,
+                        'className': null,
+                        'params': {
+                          'existingColspan': 1,
+                          'maxColspan': 2
+                        },
+                        'dateDisplayFormat': null,
+                        'layout': {
+                          'row': -1,
+                          'column': -1,
+                          'colspan': 1
+                        },
+                        'sizeX': 1,
+                        'sizeY': 1,
+                        'row': -1,
+                        'col': -1,
+                        'visibilityCondition': null,
+                        'endpoint': null,
+                        'requestHeaders': null
+                      }
+                    ],
+                    '2': []
+                  }
+                }
+              ],
+              'outcomes': [],
+              'javascriptEvents': [],
+              'className': '',
+              'style': '',
+              'customFieldTemplates': {},
+              'metadata': {},
+              'variables': [],
+              'customFieldsValueInfo': {},
+              'gridsterForm': false
+            }
+          };
+    }
+
 }
@@ -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.
+ */
+
+import { Observable } from 'rxjs/Observable';
+import { Injectable } from '@angular/core';
+import {
+    AppConfigService, AlfrescoApiService, EcmModelService, LogService, FormService, FormOutcomeEvent
+} from '@alfresco/adf-core';
+import { Subject } from 'rxjs/Subject';
+
+@Injectable()
+export class FakeFormService extends FormService {
+
+    executeOutcome = new Subject<FormOutcomeEvent>();
+
+    constructor(appConfig: AppConfigService,
+        ecmModelService: EcmModelService,
+        apiService: AlfrescoApiService,
+        protected logService: LogService) {
+        super(ecmModelService, apiService, logService);
+    }
+
+    public getRestFieldValues(taskId: string, fieldId: string): Observable<any> {
+        if (fieldId === 'typeahedField') {
+            return Observable.of([
+                { 'id': '1', 'name': 'Leanne Graham' },
+                { 'id': '2', 'name': 'Ervin Howell' },
+                { 'id': '3', 'name': 'Clementine Bauch' },
+                { 'id': '4', 'name': 'Patricia Lebsack' },
+                { 'id': '5', 'name': 'Chelsey Dietrich' },
+                { 'id': '6', 'name': 'Mrs. Dennis Schulist' },
+                { 'id': '7', 'name': 'Kurtis Weissnat' },
+                { 'id': '8', 'name': 'Nicholas Runolfsdottir V' },
+                { 'id': '9', 'name': 'Glenna Reichert' },
+                { 'id': '10', 'name': 'Clementina DuBuque' }]);
+        } else {
+            return super.getRestFieldValues(taskId, fieldId);
+        }
+    }
+}
@@ -1,8 +1,13 @@
 <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 #adfForm [form]="form" [data]="restoredData" [showValidationIcon]="showValidationIcon">
    </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>
+<section class="form-list-margin">
+    <mat-slide-toggle color="primary" [(ngModel)]="showValidationIcon">
+        Show Validation Icon
+    </mat-slide-toggle>
+</section>
@@ -6,3 +6,7 @@
    width: 80%;
    height: 80%;
 }
+
+.form-list-margin {
+    margin-left: 26px;
+}
@@ -25,7 +25,7 @@ import { FormComponent, FormModel, FormService, LogService } from '@alfresco/adf
 })
 export class FormListComponent {

-    @ViewChild(FormComponent)
+    @ViewChild('adfForm')
    activitiForm: FormComponent;

    formList: any [] = [];
@@ -36,6 +36,8 @@ export class FormListComponent {
    storedData: any = {};
    restoredData: any = {};

+    showValidationIcon = false;
+
    constructor(private formService: FormService, private logService: LogService) {
        // Prevent default outcome actions
        formService.executeOutcome.subscribe(e => {
@@ -0,0 +1,41 @@
+<div class="form-container">
+    <mat-accordion>
+        <mat-expansion-panel>
+            <mat-expansion-panel-header>
+                <mat-panel-title>
+                    {{'FORM-LOADING.FORM_DATA' | translate}}
+                </mat-panel-title>
+                <mat-panel-description>
+                    {{'FORM-LOADING.FORM_DATA_MESSAGE' | translate}}
+                </mat-panel-description>
+            </mat-expansion-panel-header>
+            <mat-list>
+                <mat-list-item>
+                    <mat-form-field>
+                        <input matInput
+                              placeholder="{{'FORM-LOADING.TYPEAHEAD_PLACEHOLDER' | translate}}"
+                              [(ngModel)]="typeaheadFieldValue">
+                    </mat-form-field>
+                </mat-list-item>
+                <mat-list-item>
+                    <mat-form-field>
+                        <input matInput
+                               placeholder="{{'FORM-LOADING.SELECT_PLACEHOLDER' | translate}}"
+                               [(ngModel)]="selectFieldValue">
+                    </mat-form-field>
+                </mat-list-item>
+                <mat-list-item>
+                    <mat-form-field>
+                        <input matInput
+                               placeholder="{{'FORM-LOADING.RADIO_PLACEHOLDER' | translate}}"
+                               [(ngModel)]="radioButtonFieldValue">
+                    </mat-form-field>
+                </mat-list-item>
+            </mat-list>
+        <button mat-button color="primary" (click)="onLoadButtonClicked()">Load</button>
+        </mat-expansion-panel>
+    </mat-accordion>
+    <mat-divider></mat-divider>
+    <adf-form [showRefreshButton]="false" [form]="form" [data]="formattedData">
+    </adf-form>
+</div>
@@ -0,0 +1,3 @@
+.form-container {
+    padding: 10px;
+}
@@ -0,0 +1,60 @@
+/*!
+ * @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, FormOutcomeEvent } from '@alfresco/adf-core';
+import { InMemoryFormService } from '../../services/in-memory-form.service';
+import { DemoForm } from './demo-form';
+import { FakeFormService } from './fake-form.service';
+
+@Component({
+    selector: 'app-form-loading',
+    templateUrl: 'form-loading.component.html',
+    styleUrls: ['form-loading.component.scss'],
+    providers: [
+        { provide: FormService, useClass: FakeFormService },
+    ]
+})
+export class FormLoadingComponent implements OnInit {
+
+    form: FormModel;
+    typeaheadFieldValue = '';
+    selectFieldValue = '';
+    radioButtonFieldValue = '';
+    formattedData = {};
+
+    constructor(@Inject(FormService) private formService: InMemoryFormService) {
+        formService.executeOutcome.subscribe((formOutcomeEvent: FormOutcomeEvent) => {
+            formOutcomeEvent.preventDefault();
+        });
+    }
+
+    ngOnInit() {
+        this.formattedData = {};
+        const formDefinitionJSON: any = DemoForm.getSimpleFormDefinition();
+        this.form = this.formService.parseForm(formDefinitionJSON);
+    }
+
+    onLoadButtonClicked() {
+        this.formattedData = {
+                               'typeahedField': this.typeaheadFieldValue,
+                               'selectBox': this.selectFieldValue,
+                               'radioButton': this.radioButtonFieldValue
+                            };
+    }
+
+}
@@ -1,11 +1,11 @@
-<header class="adf-home-background adf-primary-background-color">
+<header class="adf-home-background">
    <div class="adf-home-section ad">
        <div class="adf-home-headline">
            <h1 class="mat-h1">ADF</h1>
-            <h2> Angular components for Alfresco</h2>
+            <h2>{{ 'APP.HOME.TITLE' | translate}}</h2>
        </div>
        <div class="adf-home-start">
-            <a mat-raised-button class="adf-home-docs-button adf-primary-color" href="https://github.com/Alfresco/alfresco-ng2-components/tree/master/docs">DOCS</a>
+            <a mat-raised-button class="adf-home-docs-button adf-primary-color" href="https://github.com/Alfresco/alfresco-ng2-components/tree/master/docs">{{ 'APP.HOME.DOCUMENTATION' | translate}}</a>
        </div>
    </div>
 </header>
@@ -1,3 +1,9 @@
+:host {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
 .adf-home-header-background {
    overflow: hidden;
 }
@@ -8,6 +14,7 @@
 }

 .adf-home-headline {
+
    h1 {
        font-size: 56px;
        font-weight: 300;
@@ -0,0 +1,27 @@
+.log-list-type {
+    float: left;
+}
+
+.log-list-text {
+    float: left;
+}
+
+.log-card {
+    min-width: 200px;
+    z-index: 1;
+    height: 20%;
+    width: 40%;
+    position: fixed;
+    top: 4em;
+    right: 1em;
+    opacity: 0.9;
+    overflow: scroll;
+}
+
+.log-ERROR {
+    color: red;
+}
+
+.log-WARN {
+    color: yellow;
+}
@@ -0,0 +1,12 @@
+<mat-card class="log-card" *ngIf="show">
+    <mat-card-header>
+        <mat-card-title><h2>Log Service</h2></mat-card-title>
+    </mat-card-header>
+    <mat-card-content class="log-container">
+
+        <div *ngIf="logsData">
+            <adf-datatable [data]="logsData"></adf-datatable>
+        </div>
+
+    </mat-card-content>
+</mat-card>
@@ -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, HostListener } from '@angular/core';
+import { LogService, ObjectDataTableAdapter } from '@alfresco/adf-core';
+
+@Component({
+    selector: 'app-log',
+    templateUrl: './log.component.html',
+    styleUrls: ['./log.component.css']
+})
+export class LogComponent {
+    logs: any[] = [];
+    show = false;
+    ctrlLKey = 12;
+    logsData: ObjectDataTableAdapter;
+
+    constructor(public logService: LogService) {
+
+        logService.onMessage.subscribe((message) => {
+            let contentMessage = '';
+            try {
+                contentMessage = JSON.stringify(message.text);
+            } catch (error) {
+                return;
+            }
+            this.logs.push({ type: message.type, text: contentMessage});
+            this.logsData = new ObjectDataTableAdapter(this.logs, [
+                { type: 'text', key: 'type', title: 'Log level', sortable: true },
+                { type: 'text', key: 'text', title: 'Message', sortable: false }
+            ]);
+
+        });
+    }
+
+    @HostListener('document:keypress', ['$event'])
+    handleKeyboardEvent(event: KeyboardEvent) {
+        const key = event.keyCode;
+
+        if (key === this.ctrlLKey) {
+            this.show = !this.show;
+        }
+
+    }
+}
@@ -1,40 +0,0 @@
-.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;
-}
@@ -1,24 +1,6 @@
 <!--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"
@@ -41,39 +23,21 @@

 <!--SETTING BUTTON-->

-<a mat-fab class="setting-button" data-automation-id="settings" href="" routerLink="/settings">
+<a mat-fab class="setting-button" data-automation-id="settings" href="" routerLink="/settings" color="accent">
    <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)"
+    (executeSubmit)="checkForm($event)"
+    copyrightText="{{ 'application.copyright' | adfAppConfig }}"
    (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"
@@ -92,5 +56,7 @@
                {{ 'LOGIN.LOGIN_FOOTER'| translate }}
            </mat-slide-toggle>
        </p>
+        <button type="button" mat-raised-button color="accent" class="mobile-setting-button" routerLink="/settings" data-automation-id="settings">{{ 'APP_LAYOUT.SETTINGS'| translate }}</button>
+
    </div>
 </adf-login>
@@ -0,0 +1,52 @@
+@mixin adf-login-component-theme($theme) {
+    .setting-button.mat-fab.mat-accent {
+        position: absolute;
+        right: 10px;
+        top: 10px;
+        z-index: 1;
+
+    }
+
+    .settings {
+        border-radius: 8px;
+        position: absolute;
+        background-color: papayawhip;
+        color: cadetblue;
+        left: 10px;
+        top: 10px;
+        z-index: 1;
+    }
+
+    .toggle {
+        width: auto;
+        margin: 5px;
+        padding: 5px;
+    }
+
+    .mobile-settings, .mobile-setting-button {
+        display: none;
+    }
+
+    @media screen and ($mat-small) {
+        .settings, .setting-button.mat-fab.mat-accent  {
+            display: none;
+        }
+
+        .mobile-settings, .mobile-setting-button {
+            display: block;
+        }
+
+        .mobile-setting-button {
+            width: 100%;
+        }
+
+        .mobile-settings {
+            padding-bottom: 20px;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        }
+    }
+
+    .settings ::ng-deep .mat-slide-toggle-thumb-container {
+        cursor: pointer;
+    }
+}
@@ -18,29 +18,25 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { Validators } from '@angular/forms';
 import { Router } from '@angular/router';
-import { LogService, StorageService } from '@alfresco/adf-core';
+import { LogService } from '@alfresco/adf-core';

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
-    styleUrls: ['./login.component.css']
+    styleUrls: ['./login.component.scss']
 })
 export class LoginComponent implements OnInit {

    @ViewChild('alfrescologin')
    alfrescologin: any;

-    providers = 'ECM';
    customValidation: any;

    disableCsrf = false;
-    isECM = true;
-    isBPM = false;
    showFooter = true;
    customMinLength = 2;

    constructor(private router: Router,
-                private storage: StorageService,
                private logService: LogService) {
        this.customValidation = {
            username: ['', Validators.compose([Validators.required, Validators.minLength(this.customMinLength)])],
@@ -52,25 +48,6 @@ export class LoginComponent implements OnInit {
        this.alfrescologin.addCustomValidationError('username', 'required', 'LOGIN.MESSAGES.USERNAME-REQUIRED');
        this.alfrescologin.addCustomValidationError('username', 'minlength', 'LOGIN.MESSAGES.USERNAME-MIN', {minLength: this.customMinLength});
        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) {
@@ -81,16 +58,6 @@ export class LoginComponent implements OnInit {
        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;
    }
@@ -99,23 +66,8 @@ export class LoginComponent implements OnInit {
        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;
+    checkForm(event: any) {
+        const values = event.values;
+        this.logService.log(values);
    }
 }
@@ -0,0 +1,17 @@
+<header class="adf-logout-background">
+    <div class="adf-logout-section">
+        <div class="adf-logout-headline">
+            <h1>{{ 'APP.LOGOUT.TITLE' | translate}}</h1>
+            <h2>{{ 'APP.LOGOUT.SUB_TITLE' | translate}}</h2>
+        </div>
+
+        <div class="adf-logout-login">
+            <a mat-raised-button class="adf-logout-docs-button adf-primary-color"
+               href="/login">{{ 'APP.LOGOUT.LOGIN' | translate}}</a>
+        </div>
+        <div class="adf-logout-home">
+            <a mat-raised-button class="adf-logout-docs-button adf-primary-color"
+               href="/">{{ 'APP.LOGOUT.HOME' | translate}}</a>
+        </div>
+    </div>
+</header>
@@ -0,0 +1,39 @@
+:host {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.adf-logout-header-background {
+    overflow: hidden;
+}
+
+.adf-logout-section {
+    text-align: center;
+    padding-top: 60px;
+}
+
+.adf-logout-headline {
+
+    h1 {
+        font-size: 56px;
+        font-weight: 300;
+        line-height: 56px;
+        margin: 15px 5px;
+    }
+
+    h2 {
+        font-size: 18px;
+        font-weight: 300;
+        line-height: 28px;
+        margin: 15px 0 25px 0;
+    }
+}
+
+.adf-logout-docs-button {
+    margin: 30px;
+}
+
+.adf-logout-login {
+    float: left;
+}
@@ -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: 'app-logout',
+    templateUrl: './logout.component.html',
+    styleUrls: ['./logout.component.scss']
+})
+export class LogoutComponent {}
@@ -0,0 +1,35 @@
+<div class="main-content">
+    <h1>Notification Service</h1>
+
+    <ul>
+        <li>Try setting custom message with unicode characters, for example: <strong>I ♥️ ADF</strong></li>
+        <li>Try setting custom i18n resource key, for example: <strong>APP_LAYOUT.NOTIFICATIONS</strong></li>
+        <li>Try toggling the action button. Clicking the action within SnackBar should update the label under the toggle button.</li>
+        <li>All elements support <em>data-automation-id</em> attributes and can be automated.</li>
+    </ul>
+
+    <mat-form-field>
+        <input
+            matInput
+            placeholder="Message"
+            [(ngModel)]="message"
+            data-automation-id="notification-message">
+    </mat-form-field>
+
+    <button mat-icon-button (click)="send()">
+        <mat-icon>send</mat-icon>
+    </button>
+
+    <div>
+        <mat-slide-toggle
+            [(ngModel)]="withAction"
+            data-automation-id="notification-action-toggle">
+            With action
+        </mat-slide-toggle>
+    </div>
+
+    <div data-automation-id="notification-action-output">
+        {{ actionOutput }}
+    </div>
+
+</div>
@@ -0,0 +1,3 @@
+.main-content {
+    padding: 10px;
+}
@@ -0,0 +1,47 @@
+/*!
+ * @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 { NotificationService } from '@alfresco/adf-core';
+
+@Component({
+    templateUrl: './notifications.component.html',
+    styleUrls: ['./notifications.component.scss']
+})
+export class NotificationsComponent {
+
+    message = 'I ♥️ ADF';
+    withAction = false;
+    actionOutput = '';
+
+    constructor(private notificationService: NotificationService) {}
+
+    send() {
+        this.actionOutput = '';
+
+        if (this.message) {
+            if (this.withAction) {
+                this.notificationService
+                    .openSnackMessageAction(this.message, 'Some action')
+                    .onAction()
+                    .subscribe(() => this.actionOutput = 'Action clicked');
+            } else {
+                this.notificationService.openSnackMessage(this.message);
+            }
+        }
+    }
+}
@@ -0,0 +1,18 @@
+<div class="inherit_permission_button">
+    <button mat-raised-button
+            [color]="toggleStatus?'accent':'primary'"
+            adf-inherit-permission [nodeId]="nodeId"
+            (error)="showErrorMessage($event)"
+            (updated)="onUpdatedPermissions($event)">
+            {{ (toggleStatus?'DEMO_PERMISSION.INHERITED_PERMISSIONS_BUTTON':'DEMO_PERMISSION.INHERIT_PERMISSION_BUTTON') | translate}}</button>
+    <button mat-button color="primary" (click)="openAddPermissionDialog($event)">Add User or Group</button>
+</div>
+
+<div>
+    <adf-permission-list #permissionList
+                        [nodeId]="nodeId"
+                        (update)="reloadList()"
+                        (error)="showErrorMessage($event)">
+	</adf-permission-list>
+</div>
+
@@ -0,0 +1,6 @@
+.inherit_permission_button {
+    padding-top: 20px;
+    display: flex;
+    justify-content: center;
+    padding-bottom: 20px;
+}
@@ -0,0 +1,81 @@
+/*!
+ * @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, Optional, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Params} from '@angular/router';
+import { PermissionListComponent, NodePermissionDialogService } from '@alfresco/adf-content-services';
+import { MinimalNodeEntryEntity } from 'alfresco-js-api';
+import { NodesApiService, NotificationService } from '@alfresco/adf-core';
+
+@Component({
+    selector: 'app-permissions',
+    templateUrl: './demo-permissions.component.html',
+    styleUrls: ['./demo-permissions.component.scss']
+})
+export class DemoPermissionComponent implements OnInit {
+
+    @ViewChild('permissionList')
+    displayPermissionComponent: PermissionListComponent;
+
+    nodeId: string;
+    toggleStatus = false;
+
+    constructor(@Optional() private route: ActivatedRoute,
+                private nodeService: NodesApiService,
+                private nodePermissionDialogService: NodePermissionDialogService,
+                private notificationService: NotificationService) {
+    }
+
+    ngOnInit() {
+        if (this.route) {
+            this.route.params.forEach((params: Params) => {
+                if (params['id']) {
+                    this.nodeId = params['id'];
+                }
+            });
+        }
+        this.nodeService.getNode(this.nodeId, {include: ['permissions'] }).subscribe( (currentNode: MinimalNodeEntryEntity) => {
+            this.toggleStatus = currentNode.permissions.isInheritanceEnabled;
+        });
+    }
+
+    onUpdatedPermissions(node: MinimalNodeEntryEntity) {
+        this.toggleStatus = node.permissions.isInheritanceEnabled;
+        this.displayPermissionComponent.reload();
+    }
+
+    reloadList() {
+        this.displayPermissionComponent.reload();
+    }
+
+    openAddPermissionDialog(event: Event) {
+        this.nodePermissionDialogService.updateNodePermissionByDialog(this.nodeId).subscribe(() => {
+            this.displayPermissionComponent.reload();
+        },
+            (error) => {
+                this.showErrorMessage(error);
+            });
+    }
+
+    showErrorMessage(error) {
+        this.notificationService.openSnackMessage(
+            error,
+            4000
+        );
+    }
+
+}
@@ -35,13 +35,4 @@
        </adf-create-process-attachment>

    </div>
-</div>
-
-<div *ngIf="fileShowed">
-    <adf-viewer
-        [(showViewer)]="fileShowed"
-        [blobFile]="content"
-        [displayName]="contentName"
-        [overlayMode]="true">
-    </adf-viewer>
-</div>
+</div>
@@ -15,39 +15,56 @@
 * limitations under the License.
 */

-import { Component, Input, OnChanges, OnInit, ViewChild } from '@angular/core';
+import { Component, Input, OnChanges, OnInit, ViewChild, OnDestroy } from '@angular/core';
 import { ProcessInstance, ProcessService ,
    ProcessAttachmentListComponent, ProcessUploadService } from '@alfresco/adf-process-services';
 import { UploadService } from '@alfresco/adf-core';
+import { AlfrescoApiService } from '@alfresco/adf-core';
+import { AppConfigService } from '@alfresco/adf-core';
+import { PreviewService } from '../../services/preview.service';
+import { Subscription } from 'rxjs/Subscription';
+
+export function processUploadServiceFactory(api: AlfrescoApiService, config: AppConfigService) {
+    return new ProcessUploadService(api, config);
+}

@Component({
    selector: 'app-process-attachments',
    templateUrl: './process-attachments.component.html',
    styleUrls: ['./process-attachments.component.css'],
    providers: [
-        { provide: UploadService, useClass: ProcessUploadService }
+        {
+            provide: UploadService,
+            useFactory: (processUploadServiceFactory),
+            deps: [AlfrescoApiService, AppConfigService]
+        }
    ]
 })

-export class ProcessAttachmentsComponent implements OnInit, OnChanges {
+export class ProcessAttachmentsComponent implements OnInit, OnChanges, OnDestroy {

-    @ViewChild(ProcessAttachmentListComponent)
+    @ViewChild('processAttachList')
    processAttachList: ProcessAttachmentListComponent;

    @Input()
    processInstanceId: string;

-    fileShowed = false;
-    content: Blob;
-    contentName: string;
-
    processInstance: ProcessInstance;

-    constructor(private uploadService: UploadService, private processService: ProcessService) {
-    }
+    private subscriptions: Subscription[] = [];
+
+    constructor(
+        private uploadService: UploadService,
+        private processService: ProcessService,
+        private preview: PreviewService
+    ) {}

    ngOnInit() {
-        this.uploadService.fileUploadComplete.subscribe(value => this.onFileUploadComplete(value.data));
+        this.subscriptions.push(
+            this.uploadService.fileUploadComplete.subscribe(
+                value => this.onFileUploadComplete(value.data)
+            )
+        );
    }

    ngOnChanges() {
@@ -59,14 +76,17 @@ export class ProcessAttachmentsComponent implements OnInit, OnChanges {
        }
    }

+    ngOnDestroy() {
+        this.subscriptions.forEach(subscription => subscription.unsubscribe());
+        this.subscriptions = [];
+    }
+
    onFileUploadComplete(content: any) {
        this.processAttachList.add(content);
    }

    onAttachmentClick(content: any): void {
-        this.fileShowed = true;
-        this.content = content.contentBlob;
-        this.contentName = content.name;
+        this.preview.showBlob(content.name, content.contentBlob);
    }

    isCompletedProcess(): boolean {
@@ -1,13 +1,14 @@
 <mat-tab-group [(selectedIndex)]="activeTab" (selectedTabChange)="onTabChange($event)" data-automation-id="navigation-bar">
    <mat-tab id="tasks-header" href="#tasks" label="{{'PS-TAB.TASKS-TAB' | translate}}">
-        <div class="page-content">
+        <div class="page-content" *ngIf="showTaskTab">
            <div class="adf-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
                <div class="adf-grid-item adf-tasks-menu" fxFlex.gt-md="225px">
                    <div class="adf-list-buttons">
-                        <adf-sidebar-action-menu [expanded]="true" title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
+                        <adf-sidebar-action-menu [expanded]="true" [width]="205" title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
                            <mat-icon sidebar-menu-title-icon >arrow_drop_down</mat-icon>
                                <div sidebar-menu-options>
                                    <button mat-menu-item data-automation-id="btn-start-task" (click)="navigateStartTask()">
+                                        <mat-icon>assessment</mat-icon>
                                        <span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_TASK' | translate}}</span>
                                    </button>
                                </div>
@@ -16,18 +17,18 @@
                    <adf-accordion>
                        <adf-accordion-group [heading]="'Tasks'" [isSelected]="true" [isOpen]="true"
                                             [headingIcon]="'assignment'">
-                            <adf-filters
-                                [filterParam]="{name:'MY tasks'}"
+                            <adf-task-filters
+                                [filterParam]="filterSelected"
                                [appId]="appId"
                                [hasIcon]="false"
                                (filterClick)="onTaskFilterClick($event)"
                                (success)="onSuccessTaskFilterList($event)"
                                #activitifilter>
-                            </adf-filters>
+                            </adf-task-filters>
                        </adf-accordion-group>
                    </adf-accordion>
                </div>
-                <div class="adf-grid-item adf-tasks-list" fxFlex.gt-md="335px" [ngClass.gt-md]="{'small-pagination': true}"
+                <div class="adf-grid-item adf-tasks-list" fxFlex.gt-md="380px" [ngClass.gt-md]="{'small-pagination': true}"
                     *ngIf="taskFilter && !isStartTaskMode()">
                    <adf-tasklist
                        [appId]="taskFilter?.appId"
@@ -39,7 +40,6 @@
                        [assignment]="taskFilter?.filter?.assignment"
                        [state]="taskFilter?.filter?.state"
                        [sort]="taskFilter?.filter?.sort"
-                        [data]="dataTasks"
                        [landingTaskId]="currentTaskId"
                        (rowClick)="onTaskRowClick($event)"
                        (success)="onSuccessTaskList($event)"
@@ -104,14 +104,15 @@
    </mat-tab>
    <mat-tab id="processes-header" href="#processes"
            label="{{'PS-TAB.PROCESSES-TAB' | translate}}">
-        <div class="page-content">
+        <div class="page-content" *ngIf="showProcessTab">
            <div class="adf-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
                <div class="adf-grid-item adf-processes-menu" fxFlex.gt-md="225px">
                    <div class="adf-list-buttons">
-                        <adf-sidebar-action-menu [expanded]="true" title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
+                        <adf-sidebar-action-menu [expanded]="true" [width]="205" title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
                            <mat-icon sidebar-menu-title-icon >arrow_drop_down</mat-icon>
                            <div sidebar-menu-options>
                                <button mat-menu-item data-automation-id="btn-start-process" (click)="navigateStartProcess()">
+                                    <mat-icon>assessment</mat-icon>
                                    <span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_PROCESS' | translate}}</span>
                                </button>
                            </div>
@@ -121,6 +122,7 @@
                        <adf-accordion-group [heading]="'Processes'" [isSelected]="true" [isOpen]="true"
                                             [headingIcon]="'assessment'">
                            <adf-process-instance-filters
+                                #activitiprocessfilter
                                [filterParam]="{index: 0}"
                                [appId]="appId"
                                (filterClick)="onProcessFilterClick($event)"
@@ -129,7 +131,7 @@
                        </adf-accordion-group>
                    </adf-accordion>
                </div>
-                <div class="adf-grid-item adf-processes-list adf-list" fxFlex.gt-md="335px" [ngClass.gt-md]="{'small-pagination': true}"
+                <div class="adf-grid-item adf-processes-list adf-list" fxFlex.gt-md="380px" [ngClass.gt-md]="{'small-pagination': true}"
                     *ngIf="processFilter && !isStartProcessMode()">
                    <adf-process-instance-list
                        #processList
@@ -141,7 +143,6 @@
                        [page]="processPage"
                        [size]="paginationPageSize"
                        [sort]="processFilter?.filter?.sort"
-                        [data]="dataProcesses"
                        (rowClick)="onProcessRowClick($event)"
                        (row-dblclick)="onProcessRowDblClick($event)"
                        (success)="onSuccessProcessList($event)">
@@ -163,6 +164,7 @@
                </div>
                <div class="adf-grid-item adf-processes-details" *ngIf="!isStartProcessMode()" fxFlex.gt-md="1 1 auto">
                    <adf-process-instance-details
+                        #activitiprocessdetails
                        [processInstanceId]="currentProcessInstanceId"
                        (processCancelled)="processCancelled()"
                        (showProcessDiagram)="onShowProcessDiagram($event)"
@@ -190,9 +192,11 @@
                <div class="adf-grid-item adf-processes-start" fxFlex.gt-md="1 1 auto"
                     *ngIf="isStartProcessMode()">
                    <adf-start-process
+                        #activitiStartProcess
                        [appId]="appId"
                        [name]="defaultProcessName"
                        [processDefinitionName]="defaultProcessDefinitionName"
+                        (formContentClicked)="onContentClick($event)"
                        (start)="onStartProcessInstance($event)"
                        (cancel)="onCancelProcessInstance()">
                    </adf-start-process>
@@ -230,12 +234,3 @@
        </div>
    </mat-tab>
 </mat-tab-group>
-
-<div *ngIf="fileShowed">
-    <adf-viewer
-        [(showViewer)]="fileShowed"
-        [blobFile]="content"
-        [displayName]="contentName"
-        [overlayMode]="true">
-    </adf-viewer>
-</div>
@@ -1,105 +1,102 @@
-
-.adf-no-form-container {
-    text-align: center;
-    font-weight: 600;
-    font-size: 18px;
-}
-
-.adf-grid {
-
-    .adf-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;
+@mixin adf-process-service-component-theme($theme){
+    .adf-no-form-container {
+        text-align: center;
+        font-weight: 600;
+        font-size: 18px;
    }

-    .adf-list-buttons {
-        margin-bottom: 24px;
-    }
+    .adf-grid {

-    .adf-list-buttons-start {
-        width: 100%;
-    }
-
-    .adf-tasks-list.small-pagination,
-    .adf-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;
-            }
-        }
-    }
-
-    .adf-list {
-        .adf-data-table {
-            border: none;
+        .adf-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;
        }

-        .adf-data-table tr,
-        .adf-data-table td {
-            height: 36px;
-            font-size: 14px;
+        .adf-list-buttons {
+            margin-bottom: 24px;
        }

-        .adf-data-table td {
-            padding-top: 0;
-            padding-bottom: 0;
-            border-bottom: none;
+        .adf-list-buttons-start {
+            width: 100%;
        }

-        .adf-data-table th {
-            padding-top: 0;
-            padding-bottom: 0;
-            height: 40px;
-            vertical-align: middle;
-            font-size: 14px;
+        .adf-tasks-list.small-pagination,
+        .adf-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;
+                }
+            }
        }
-    }

-    @media screen and (max-width: 1279px) {
-        container-widget .grid-list {
-            flex-direction: column;
+        .adf-list {
+            .adf-data-table {
+                border: none;
+            }

-            .grid-list-item {
-                width: 100% !important;
+            .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 ($mat-small) {
+            container-widget .grid-list {
+                flex-direction: column;
            }
        }
    }
@@ -29,10 +29,10 @@ import {
    Output
 } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { ProcessInstanceFilterRepresentation, Pagination } from 'alfresco-js-api';
+import { ProcessInstanceFilterRepresentation, Pagination, UserProcessInstanceFilterRepresentation } from 'alfresco-js-api';
 import {
    FORM_FIELD_VALIDATORS, FormEvent, FormFieldEvent, FormRenderingService, FormService,
-    DynamicTableRow, ValidateDynamicTableRowEvent, AppConfigService, PaginationComponent
+    DynamicTableRow, ValidateDynamicTableRowEvent, AppConfigService, PaginationComponent, UserPreferenceValues
 } from '@alfresco/adf-core';

 import { AnalyticsReportListComponent } from '@alfresco/adf-insights';
@@ -50,23 +50,23 @@ import {
    TaskDetailsComponent,
    TaskDetailsEvent,
    TaskFiltersComponent,
-    TaskListComponent,
-    TaskListService
+    TaskListComponent
 } from '@alfresco/adf-process-services';
 import { LogService } from '@alfresco/adf-core';
 import { AlfrescoApiService, UserPreferencesService } from '@alfresco/adf-core';
-import {
-    DataSorting,
-    ObjectDataRow,
-    ObjectDataTableAdapter
-} from '@alfresco/adf-core';
 import { Subscription } from 'rxjs/Subscription';
 import { /*CustomEditorComponent*/ CustomStencil01 } from './custom-editor/custom-editor.component';
 import { DemoFieldValidator } from './demo-field-validator';
+import { PreviewService } from '../../services/preview.service';
+import { Location } from '@angular/common';

 const currentProcessIdNew = '__NEW__';
 const currentTaskIdNew = '__NEW__';

+const TASK_ROUTE = 0;
+const PROCESS_ROUTE = 1;
+const REPORT_ROUTE = 2;
+
@Component({
    selector: 'app-process-service',
    templateUrl: './process-service.component.html',
@@ -75,50 +75,48 @@ const currentTaskIdNew = '__NEW__';
 })
 export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit {

-    @ViewChild(TaskFiltersComponent)
+    @ViewChild('activitifilter')
    activitifilter: TaskFiltersComponent;

-    @ViewChild(PaginationComponent)
+    @ViewChild('processListPagination')
    processListPagination: PaginationComponent;

-    @ViewChild(PaginationComponent)
+    @ViewChild('taskListPagination')
    taskListPagination: PaginationComponent;

-    @ViewChild(TaskListComponent)
+    @ViewChild('taskList')
    taskList: TaskListComponent;

-    @ViewChild(ProcessFiltersComponent)
+    @ViewChild('activitiprocessfilter')
    activitiprocessfilter: ProcessFiltersComponent;

-    @ViewChild(ProcessInstanceListComponent)
+    @ViewChild('processList')
    processList: ProcessInstanceListComponent;

-    @ViewChild(ProcessInstanceDetailsComponent)
+    @ViewChild('activitiprocessdetails')
    activitiprocessdetails: ProcessInstanceDetailsComponent;

-    @ViewChild(TaskDetailsComponent)
+    @ViewChild('activitidetails')
    activitidetails: TaskDetailsComponent;

-    @ViewChild(StartProcessInstanceComponent)
+    @ViewChild('activitiStartProcess')
    activitiStartProcess: StartProcessInstanceComponent;

-    @ViewChild(AnalyticsReportListComponent)
+    @ViewChild('analyticsreportlist')
    analyticsreportlist: AnalyticsReportListComponent;

    @Input()
    appId: number = null;

+    filterSelected: object = null;
+
    @Output()
    changePageSize: EventEmitter<Pagination> = new EventEmitter();

-    fileShowed = false;
    selectFirstReport = false;

    private tabs = { tasks: 0, processes: 1, reports: 2 };

-    content: Blob;
-    contentName: string;
-
    layoutType: string;
    currentTaskId: string;
    currentProcessInstanceId: string;
@@ -138,34 +136,33 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit

    taskFilter: FilterRepresentationModel;
    report: any;
-    processFilter: ProcessInstanceFilterRepresentation;
-
-    sub: Subscription;
+    processFilter: UserProcessInstanceFilterRepresentation;
    blobFile: any;
    flag = true;

-    dataTasks: ObjectDataTableAdapter;
-    dataProcesses: ObjectDataTableAdapter;
    presetColoum = 'default';

+    showTaskTab: boolean;
+    showProcessTab: boolean;
+
    fieldValidators = [
        ...FORM_FIELD_VALIDATORS,
        new DemoFieldValidator()
    ];

+    private subscriptions: Subscription[] = [];
+
    constructor(private elementRef: ElementRef,
                private route: ActivatedRoute,
                private router: Router,
-                private taskListService: TaskListService,
                private apiService: AlfrescoApiService,
                private logService: LogService,
                private appConfig: AppConfigService,
+                private preview: PreviewService,
                formRenderingService: FormRenderingService,
                formService: FormService,
+                private location: Location,
                private preferenceService: UserPreferencesService) {
-        this.dataTasks = new ObjectDataTableAdapter();
-        this.dataTasks.setSorting(new DataSorting('created', 'desc'));
-        this.paginationPageSize = this.preferenceService.paginationSize;

        this.defaultProcessName = this.appConfig.get<string>('adf-start-process.name');
        this.defaultProcessDefinitionName = this.appConfig.get<string>('adf-start-process.processDefinitionName');
@@ -176,23 +173,26 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
        // 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(
-            (validateDynamicTableRowEvent: ValidateDynamicTableRowEvent) => {
-                const row: DynamicTableRow = validateDynamicTableRowEvent.row;
-                if (row && row.value && row.value.name === 'admin') {
-                    validateDynamicTableRowEvent.summary.isValid = false;
-                    validateDynamicTableRowEvent.summary.message = 'Sorry, wrong value. You cannot use "admin".';
-                    validateDynamicTableRowEvent.preventDefault();
+        this.subscriptions.push(
+            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}`);
+            }),
+            this.preferenceService.select(UserPreferenceValues.PaginationSize).subscribe((pageSize) => {
+                this.paginationPageSize = pageSize;
+            }),
+            formService.validateDynamicTableRow.subscribe(
+                (validateDynamicTableRowEvent: ValidateDynamicTableRowEvent) => {
+                    const row: DynamicTableRow = validateDynamicTableRowEvent.row;
+                    if (row && row.value && row.value.name === 'admin') {
+                        validateDynamicTableRowEvent.summary.isValid = false;
+                        validateDynamicTableRowEvent.summary.message = 'Sorry, wrong value. You cannot use "admin".';
+                        validateDynamicTableRowEvent.preventDefault();
+                    }
                }
-            }
+            )
        );

        // Uncomment this block to see form event handling in action
@@ -208,8 +208,13 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
        if (this.router.url.includes('processes')) {
            this.activeTab = this.tabs.processes;
        }
-        this.sub = this.route.params.subscribe(params => {
+        this.showProcessTab = this.activeTab === this.tabs.processes;
+        this.showTaskTab = this.activeTab === this.tabs.tasks;
+        this.route.params.subscribe(params => {
            const applicationId = params['appId'];
+
+            this.filterSelected = params['filterId'] ? { id: +params['filterId'] } : { index: 0 };
+
            if (applicationId && applicationId !== '0') {
                this.appId = params['appId'];
            }
@@ -220,12 +225,12 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
            this.currentProcessInstanceId = null;
        });
        this.layoutType = AppsListComponent.LAYOUT_GRID;
-        this.supportedPages = this.preferenceService.getDifferentPageSizes();
+        this.supportedPages = this.preferenceService.getDefaultPageSizes();
    }

    ngOnDestroy() {
-        this.sub.unsubscribe();
-        this.taskListService.tasksList$.subscribe();
+        this.subscriptions.forEach(subscription => subscription.unsubscribe());
+        this.subscriptions = [];
    }

    onTaskFilterClick(filter: FilterRepresentationModel): void {
@@ -237,8 +242,17 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
        this.taskPage = 0;
    }

-    onTabChange(event: Pagination): void {
-        this.paginationPageSize = this.preferenceService.paginationSize;
+    onTabChange(event: any): void {
+        const index = event.index;
+        if (index === TASK_ROUTE) {
+            this.showTaskTab = event.index === this.tabs.tasks;
+            this.relocateLocationToTask();
+        } else if (index === PROCESS_ROUTE) {
+            this.showProcessTab =  event.index === this.tabs.processes;
+            this.relocateLocationToProcess();
+        } else if (index === REPORT_ROUTE) {
+            this.relocateLocationToReport();
+        }
    }

    onChangePageSize(event: Pagination): void {
@@ -255,10 +269,12 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
    }

    applyTaskFilter(filter: FilterRepresentationModel) {
-        this.taskFilter = filter;
+        this.taskFilter = Object.assign({}, filter);
+
        if (filter && this.taskList) {
            this.taskList.hasCustomDataSource = false;
        }
+        this.relocateLocationToTask();
    }

    onStartTaskSuccess(event: any): void {
@@ -275,9 +291,10 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
        this.currentTaskId = this.taskList.getCurrentId();
    }

-    onProcessFilterClick(event: ProcessInstanceFilterRepresentation): void {
+    onProcessFilterClick(event: UserProcessInstanceFilterRepresentation): void {
        this.processFilter = event;
        this.resetProcessPaginationPage();
+        this.relocateLocationToProcess();
    }

    resetProcessPaginationPage() {
@@ -324,14 +341,10 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
    }

    navigateStartProcess(): void {
-        this.resetProcessFilters();
-        this.reloadProcessFilters();
        this.currentProcessInstanceId = currentProcessIdNew;
    }

    navigateStartTask(): void {
-        this.resetTaskFilters();
-        this.reloadTaskFilters();
        this.currentTaskId = currentTaskIdNew;
    }

@@ -361,14 +374,11 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit

    onFormCompleted(form): void {
        this.currentTaskId = null;
-        this.taskPage = this.taskListPagination.current - 1;
-        if (this.taskList) {
-            this.taskList.reload();
-        } else {
-            this.navigateToProcess();
+        if (this.taskListPagination) {
+            this.taskPage = this.taskListPagination.current - 1;
        }
-        if (this.processList) {
-            this.processList.reload();
+        if (!this.taskList) {
+            this.navigateToProcess();
        }
    }

@@ -376,10 +386,24 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
        this.router.navigate([`/activiti/apps/${this.appId}/processes/`]);
    }

+    relocateLocationToProcess(): void {
+        this.location.go(`/activiti/apps/${this.appId || 0}/processes/${this.processFilter ? this.processFilter.id : 0}`);
+    }
+
+    relocateLocationToTask(): void {
+        this.location.go(`/activiti/apps/${this.appId || 0}/tasks/${this.taskFilter.id}`);
+    }
+
+    relocateLocationToReport(): void {
+        this.location.go(`/activiti/apps/${this.appId || 0}/report/`);
+    }
+
    onContentClick(content: any): void {
-        this.fileShowed = true;
-        this.content = content.contentBlob;
-        this.contentName = content.name;
+        if (content.contentBlob) {
+            this.preview.showBlob(content.name, content.contentBlob);
+        } else {
+            this.preview.showResource(content.sourceId.split(';')[0]);
+        }
    }

    onAuditClick(event: any) {
@@ -423,11 +447,11 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
        this.activeTab = this.tabs.tasks;

        const taskId = event.value.id;
-        const processTaskDataRow = new ObjectDataRow({
+        const processTaskDataRow: any = {
            id: taskId,
            name: event.value.name || 'No name',
            created: event.value.created
-        });
+        };
        this.activitifilter.selectFilter(null);
        if (this.taskList) {
            this.taskList.setCustomDataSource([processTaskDataRow]);
@@ -436,14 +460,6 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
        this.currentTaskId = taskId;
    }

-    private resetProcessFilters(): void {
-        this.processFilter = null;
-    }
-
-    private resetTaskFilters(): void {
-        this.taskFilter = null;
-    }
-
    private reloadProcessFilters(): void {
        this.activitiprocessfilter.selectFilter(this.activitiprocessfilter.getCurrentFilter());
    }
@@ -33,12 +33,3 @@

    </div>
 </div>
-
-<div *ngIf="fileShowed">
-    <adf-viewer
-        [(showViewer)]="fileShowed"
-        [blobFile]="content"
-        [displayName]="contentName"
-        [overlayMode]="true">
-    </adf-viewer>
-</div>
@@ -15,38 +15,52 @@
 * limitations under the License.
 */

-import { Component, Input, OnChanges, OnInit, ViewChild } from '@angular/core';
+import { Component, Input, OnChanges, OnInit, ViewChild, OnDestroy } from '@angular/core';
 import { TaskListService, TaskAttachmentListComponent, TaskDetailsModel, TaskUploadService } from '@alfresco/adf-process-services';
-import { UploadService } from '@alfresco/adf-core';
+import { UploadService, AlfrescoApiService, AppConfigService } from '@alfresco/adf-core';
+import { PreviewService } from '../../services/preview.service';
+import { Subscription } from 'rxjs/Subscription';
+
+export function taskUploadServiceFactory(api: AlfrescoApiService, config: AppConfigService) {
+    return new TaskUploadService(api, config);
+}

@Component({
    selector: 'app-task-attachments',
    templateUrl: './task-attachments.component.html',
    styleUrls: ['./task-attachments.component.css'],
    providers: [
-        { provide: UploadService, useClass: TaskUploadService }
+        {
+            provide: UploadService,
+            useFactory: (taskUploadServiceFactory),
+            deps: [AlfrescoApiService, AppConfigService]
+        }
    ]
 })

-export class TaskAttachmentsComponent implements OnInit, OnChanges {
+export class TaskAttachmentsComponent implements OnInit, OnChanges, OnDestroy {

-    @ViewChild(TaskAttachmentListComponent)
+    @ViewChild('taskAttachList')
    taskAttachList: TaskAttachmentListComponent;

    @Input()
    taskId: string;

-    fileShowed = false;
-    content: Blob;
-    contentName: string;
-
    taskDetails: any;

-    constructor(private uploadService: UploadService, private activitiTaskList: TaskListService) {
-    }
+    private subscriptions: Subscription[] = [];
+
+    constructor(
+        private uploadService: UploadService,
+        private activitiTaskList: TaskListService,
+        private preview: PreviewService) {}

    ngOnInit() {
-        this.uploadService.fileUploadComplete.subscribe(value => this.onFileUploadComplete(value.data));
+        this.subscriptions.push(
+            this.uploadService.fileUploadComplete.subscribe(
+                value => this.onFileUploadComplete(value.data)
+            )
+        );
    }

    ngOnChanges() {
@@ -58,14 +72,17 @@ export class TaskAttachmentsComponent implements OnInit, OnChanges {
        }
    }

+    ngOnDestroy() {
+        this.subscriptions.forEach(subscription => subscription.unsubscribe());
+        this.subscriptions = [];
+    }
+
    onFileUploadComplete(content: any) {
        this.taskAttachList.add(content);
    }

    onAttachmentClick(content: any): void {
-        this.fileShowed = true;
-        this.content = content.contentBlob;
-        this.contentName = content.name;
+        this.preview.showBlob(content.name, content.contentBlob);
    }

    isCompletedTask(): boolean {
@@ -18,6 +18,7 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 import { MinimalNodeEntity } from 'alfresco-js-api';
+import { PreviewService } from '../../services/preview.service';

@Component({
    selector: 'app-search-bar',
@@ -26,7 +27,7 @@ import { MinimalNodeEntity } from 'alfresco-js-api';
 })
 export class SearchBarComponent {

-    constructor(public router: Router) {
+    constructor(public router: Router, private preview: PreviewService) {
    }

    /**
@@ -43,7 +44,7 @@ export class SearchBarComponent {

    onItemClicked(event: MinimalNodeEntity) {
        if (event.entry.isFile) {
-            this.router.navigate(['/files', event.entry.id, 'view']);
+            this.preview.showResource(event.entry.id);
        } else if (event.entry.isFolder) {
            this.router.navigate(['/files', event.entry.id]);
        }
@@ -23,7 +23,7 @@ export class TestSearchConfigurationService implements SearchConfigurationInterf
    constructor() {
    }

-    public generateQueryBody(searchTerm: string, maxResults: string, skipCount: string): QueryBody {
+    public generateQueryBody(searchTerm: string, maxResults: number, skipCount: number): QueryBody {
        const defaultQueryBody: QueryBody = {
            query: {
                query: searchTerm ? `${searchTerm}* OR name:${searchTerm}*` : searchTerm
@@ -1,19 +1,39 @@
+
 <adf-search [searchTerm]="searchedWord"
            [maxResults]="maxItems"
            [skipResults]="skipCount"
            (resultLoaded)="onSearchResultLoaded($event)"
-            #search>
+            #searchResult>
 </adf-search>

-<app-files-component
-        [currentFolderId]="null"
-        [nodeResult]="resultNodePageList"
-        [disableDragArea]="true"
-        [pagination]="pagination"
-        (changedPageSize)="onRefreshPagination($event)"
-        (changedPageNumber)="onRefreshPagination($event)"
-        (turnedNextPage)="onRefreshPagination($event)"
-        (loadNext)="onRefreshPagination($event)"
-        (turnedPreviousPage)="onRefreshPagination($event)"
-        (deleteElementSuccess)="onDeleteElementSuccess($event)">
-</app-files-component>
+<div class="adf-search-results__facets">
+    <adf-search-chip-list [searchFilter]="searchFilter"></adf-search-chip-list>
+</div>
+
+<div class="adf-search-results">
+    <adf-search-filter #searchFilter></adf-search-filter>
+
+    <div class="adf-search-results__content">
+        <div class="adf-search-results__sorting">
+            <adf-search-sorting-picker></adf-search-sorting-picker>
+        </div>
+        <app-files-component
+            [showHeader]="false"
+            [sorting]="sorting"
+            [sortingMode]="'server'"
+            [showRecentFiles]="false"
+            [showSitePicker]="false"
+            [showSettingsPanel]="false"
+            [currentFolderId]="null"
+            [nodeResult]="resultNodePageList"
+            [disableDragArea]="true"
+            [pagination]="pagination"
+            (changedPageSize)="onRefreshPagination($event)"
+            (changedPageNumber)="onRefreshPagination($event)"
+            (turnedNextPage)="onRefreshPagination($event)"
+            (loadNext)="onRefreshPagination($event)"
+            (turnedPreviousPage)="onRefreshPagination($event)"
+            (deleteElementSuccess)="onDeleteElementSuccess($event)">
+        </app-files-component>
+    </div>
+</div>
@@ -1,3 +1,25 @@
+.adf-search-results {
+    display: flex;
+    margin-left: 5px;
+
+    .adf-search-settings {
+        width: 260px;
+        border: 1px solid #eee;
+    }
+
+    &__facets {
+        margin: 5px;
+    }
+
+    &__content {
+        flex: 1;
+    }
+
+    &__sorting {
+        text-align: right;
+    }
+}
+
 div.search-results-container {
    padding: 0 20px 20px 20px;
 }
@@ -15,55 +15,102 @@
 * limitations under the License.
 */

-import { Component, OnInit, Optional, ViewChild } from '@angular/core';
+import { Component, OnInit, Optional, ViewChild, OnDestroy } from '@angular/core';
 import { Router, ActivatedRoute, Params } from '@angular/router';
 import { NodePaging, Pagination } from 'alfresco-js-api';
-import { SearchComponent } from '@alfresco/adf-content-services';
-import { UserPreferencesService } from '@alfresco/adf-core';
+import { SearchComponent, SearchQueryBuilderService } from '@alfresco/adf-content-services';
+import { UserPreferencesService, SearchService, SearchConfigurationService } from '@alfresco/adf-core';
+import { Subscription } from 'rxjs/Subscription';

@Component({
    selector: 'app-search-result-component',
    templateUrl: './search-result.component.html',
-    styleUrls: ['./search-result.component.scss']
+    styleUrls: ['./search-result.component.scss'],
+    providers: [SearchService, SearchQueryBuilderService]
 })
-export class SearchResultComponent implements OnInit {
+export class SearchResultComponent implements OnInit, OnDestroy {

-    @ViewChild('search')
-    search: SearchComponent;
+    @ViewChild('searchResult')
+    searchResult: SearchComponent;

    queryParamName = 'q';
    searchedWord = '';
    resultNodePageList: NodePaging;
+    pagination: Pagination;
    maxItems: number;
    skipCount = 0;
-    pagination: Pagination;
+
+    sorting = ['name', 'asc'];
+
+    private subscriptions: Subscription[] = [];

    constructor(public router: Router,
                private preferences: UserPreferencesService,
+                private queryBuilder: SearchQueryBuilderService,
+                private searchConfiguration: SearchConfigurationService,
                @Optional() private route: ActivatedRoute) {
        this.maxItems = this.preferences.paginationSize;
+        queryBuilder.paging = {
+            maxItems: this.preferences.paginationSize,
+            skipCount: 0
+        };
    }

    ngOnInit() {
+
+        this.sorting = this.getSorting();
+
+        this.subscriptions.push(
+            this.queryBuilder.updated.subscribe(() => {
+                this.sorting = this.getSorting();
+            })
+        );
+
        if (this.route) {
            this.route.params.forEach((params: Params) => {
                this.searchedWord = params.hasOwnProperty(this.queryParamName) ? params[this.queryParamName] : null;
+                if (this.searchedWord) {
+                    const queryBody = this.searchConfiguration.generateQueryBody(this.searchedWord, 0, 100);
+
+                    this.queryBuilder.userQuery = queryBody.query.query;
+                    this.queryBuilder.update();
+                }
            });
        }
-        this.maxItems = this.preferences.paginationSize;
+    }
+
+    ngOnDestroy() {
+        this.subscriptions.forEach(subscription => subscription.unsubscribe());
+        this.subscriptions = [];
    }

    onSearchResultLoaded(nodePaging: NodePaging) {
        this.resultNodePageList = nodePaging;
-        this.pagination = nodePaging.list.pagination;
+        this.pagination = {...nodePaging.list.pagination };
    }

    onRefreshPagination(pagination: Pagination) {
-         this.maxItems = pagination.maxItems;
-         this.skipCount = pagination.skipCount;
+        this.maxItems = pagination.maxItems;
+        this.skipCount = pagination.skipCount;
+
+        this.queryBuilder.paging = {
+            maxItems: pagination.maxItems,
+            skipCount: pagination.skipCount
+        };
+        this.queryBuilder.update();
    }

    onDeleteElementSuccess(element: any) {
-        this.search.reload();
+        this.searchResult.reload();
+    }
+
+    private getSorting(): string[] {
+        const primary = this.queryBuilder.getPrimarySorting();
+
+        if (primary) {
+            return [primary.key, primary.ascending ? 'asc' : 'desc'];
+        }
+
+        return ['name', 'asc'];
    }
 }
--- a/Show More
+++ b/Show More