Merge pull request #3206 from Alfresco/development

2.3.0

.gitignore

@@ -20,3 +20,8 @@ src/environments/
 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

.travis.yml

@@ -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;);
+            (cd lib && npm run build || exit 1;);
       fi
 
     - if ([ "$MODULE" == "demo-shell" ]); then
@@ -59,6 +62,30 @@ script:
        fi
       fi
 
+jobs:
+    include:
+        - stage: Check build demo shell in production mode AND e2e
+          before_install:
+            - "export DISPLAY=:99.0"
+            - "sh -e /etc/init.d/xvfb start"
+          script: travis_wait 30 ./scripts/test-dist.sh
+        - stage: Check 2.0.0 Project Update
+          script: ./scripts/test-e2e-bc.sh
+        - stage: Check ADF exports
+          script: cd lib && npm run test-export
+        - stage: Update Generator
+          if: tag =~ .*beta.*
+          script: ./scripts/update-project.sh -gnu -t $GITHUB_TOKEN -n generator-ng2-alfresco-app
+        - stage: Update Content app
+          if: tag =~ .*beta.*
+          script: ./scripts/update-project.sh -gnu -t $GITHUB_TOKEN -n alfresco-content-app
+        - stage: Update DW
+          if: tag =~ .*beta.*
+          script: ./scripts/update-project.sh -gnu -t $GITHUB_TOKEN -n adf-app-manager-ui
+        - stage: Update ng2-components
+          if: tag =~ .*beta.*
+          script: ./scripts/update-project.sh -gnu -t $GITHUB_TOKEN -n alfresco-ng2-components
+
 # jobs:
 #   include:
 #     - stage: Publish alpha to NPM

.vscode/settings.json

@@ -9,7 +9,6 @@
         "**/.happypack": true
     },
     "editor.renderIndentGuides": true,
-    "tslint.configFile": "ng2-components/tslint.json",
     "markdownlint.config": {
         "MD032": false,
         "MD004": false,

CODE_OF_CONDUCT.md

@@ -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)

Dockerfile

@@ -1,4 +1,4 @@
-FROM nginx
+FROM nginx:alpine
 
 COPY demo-shell/nginx.conf /etc/nginx/nginx.conf
 

appveyor.yml

@@ -9,10 +9,10 @@ environment:
   nodejs_version: "8"
 
   matrix:
-  - COMPONENT_NAME: core
-  - COMPONENT_NAME: process-service
-  - COMPONENT_NAME: content-service
-  - COMPONENT_NAME: insights
+    - COMPONENT_NAME: process-service
+    - COMPONENT_NAME: content-service
+    - COMPONENT_NAME: core
+    - COMPONENT_NAME: insights
 #  - COMPONENT_NAME: ng2-demo-shell
 
 # Install scripts. (runs after repo cloning)
@@ -38,7 +38,7 @@ install:
               else
                 (cd scripts && sh npm-build-all.sh -t "insights" -vjsapi alpha|| exit 1)
     )
-   - if %COMPONENT_NAME% EQU core (
+  - if %COMPONENT_NAME% EQU core (
               if %APPVEYOR_REPO_BRANCH EQU master
                 (cd scripts && sh npm-build-all.sh -t "core"  || exit 1)
               else
@@ -53,3 +53,5 @@ install:
 
 # Don't actually build.
 build: off
+matrix:
+  fast_finish: true

demo-shell/.angular-cli.json

@@ -18,6 +18,11 @@
           "input": "../resources",
           "output": "./resources"
         },
+        {
+          "glob": "**/*",
+          "input": "./app/components/lazy-loading/i18n",
+          "output": "./resources/lazy-loading/i18n"
+        },
         {
           "glob": "**/*",
           "input": "../node_modules/@alfresco/adf-core/prebuilt-themes",
@@ -92,43 +97,13 @@
         },
         {
           "glob": "**/*",
-          "input": "../../lib/core/prebuilt-themes",
-          "output": "./assets/prebuilt-themes"
+          "input": "./app/components/lazy-loading/i18n",
+          "output": "./resources/lazy-loading/i18n"
         },
         {
           "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/process-services/i18n",
-          "output": "./assets/adf-process-services/i18n"
-        },
-        {
-          "glob": "**/*",
-          "input": "../../lib/content-services/i18n",
-          "output": "./assets/adf-content-services/i18n"
-        },
-        {
-          "glob": "**/*",
-          "input": "../../lib/insights/i18n",
-          "output": "./assets/adf-insights/i18n"
+          "input": "../dist-dev-temp/",
+          "output": "./"
         },
         {
           "glob": "pdf.worker.js",
@@ -174,14 +149,6 @@
     {
       "project": "src/tsconfig.app.json",
       "exclude": "**/node_modules/**/*"
-    },
-    {
-      "project": "src/tsconfig.spec.json",
-      "exclude": "**/node_modules/**/*"
-    },
-    {
-      "project": "e2e/tsconfig.e2e.json",
-      "exclude": "**/node_modules/**/*"
     }
   ],
   "test": {

demo-shell/README.md

@@ -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
 ```

demo-shell/config/dev-copy-watch.js

@@ -0,0 +1,14 @@
+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' )

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

@@ -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();
+    });
 });

demo-shell/e2e/app.po.ts

@@ -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'));
+    }
 }

demo-shell/package.json

@@ -1,24 +1,26 @@
 {
   "name": "Alfresco-ADF-Angular-Demo",
   "description": "Demo shell for Alfresco Angular components",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
     "ng": "ng",
-    "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\" ",
-    "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 server-versions && rimraf dist && ng build  --app dist",
-    "build:dev": "npm run lint && npm run style:dev && npm run server-versions && rimraf dist && ng build --app dev",
-    "build:dist": "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",
+    "prestart": "npm run validate-config",
+    "start": "npm run server-versions && rimraf dist && ng serve --host 0.0.0.0 --proxy-config proxy.conf.js --app dist --open",
+    "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 --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 --host 0.0.0.0 --disable-host-check --app dist --proxy-config proxy.conf.js -open",
+    "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 server-versions && rimraf dist && ng build --prod --app dist",
     "style:dev": "npm run webpack -- --config  config/webpack.style.js --progress --profile --bail",
-    "test": "ng test",
+    "copy:dev": "node ./config/dev-copy-watch.js",
+    "test": " ng test --single-run",
     "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": "rimraf dist node_modules typings",
     "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"
   },
@@ -60,10 +62,10 @@
   ],
   "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",
+    "@alfresco/adf-content-services": "2.3.0",
+    "@alfresco/adf-core": "2.3.0",
+    "@alfresco/adf-insights": "2.3.0",
+    "@alfresco/adf-process-services": "2.3.0",
     "@angular/animations": "5.1.1",
     "@angular/cdk": "5.0.1",
     "@angular/common": "5.1.1",
@@ -76,10 +78,10 @@
     "@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": "8.0.0",
-    "alfresco-js-api": "2.1.0",
+    "@mat-datetimepicker/core": "1.0.4",
+    "@mat-datetimepicker/moment": "1.0.4",
+    "@ngx-translate/core": "9.1.1",
+    "alfresco-js-api": "2.3.0",
     "chart.js": "2.5.0",
     "classlist.js": "1.1.20150312",
     "core-js": "2.4.1",
@@ -87,10 +89,10 @@
     "hammerjs": "2.0.8",
     "intl": "1.2.5",
     "minimatch": "3.0.4",
-    "moment": "2.18.1",
+    "moment": "2.20.1",
     "moment-es6": "^1.0.0",
     "ng2-charts": "1.6.0",
-    "pdfjs-dist": "1.5.404",
+    "pdfjs-dist": "2.0.265",
     "raphael": "2.2.7",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.5.2",
@@ -98,27 +100,28 @@
     "zone.js": "0.8.14"
   },
   "devDependencies": {
-    "@angular-devkit/core": "0.0.28",
-    "@angular/cli": "1.5.0",
-    "@angular/compiler-cli": "5.1.1",
-    "@angular/language-service": "5.1.1",
-    "@types/jasmine": "~2.5.53",
+    "@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",
-    "codelyzer": "4.0.0",
+    "ajv-cli": "^3.0.0",
+    "codelyzer": "4.1.0",
     "concurrently": "^3.5.1",
-    "jasmine-core": "~2.6.2",
-    "jasmine-spec-reporter": "~4.1.0",
-    "karma": "~1.7.0",
-    "karma-chrome-launcher": "~2.1.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": "~3.2.0",
-    "tslint": "^5.7.0",
-    "typescript": "2.6.2"
+    "ts-node": "~4.1.0",
+    "tslint": "~5.9.1",
+    "typescript": "~2.5.3"
   }
 }

demo-shell/resources/i18n/de.json

@@ -1,4 +1,17 @@
 {
+  "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"
+    }
+  },
   "title": "Willkommen",
   "VERSION": {
     "NO_PERMISSION": "Sie verfügen nicht über die nötige Berechtigung, um Versionen dieses Inhalts zu verwalten",
@@ -9,6 +22,12 @@
       "TITLE": "Versionen verwalten"
     }
   },
+  "METADATA": {
+    "DIALOG": {
+      "CLOSE": "Schließen",
+      "TITLE": "Metadaten"
+    }
+  },
   "APP_LAYOUT": {
     "APP_NAME": "ADF-Demoanwendung",
     "HOME": "Startseite",
@@ -17,15 +36,34 @@
     "LOGIN": "Anmelden",
     "CUSTOM_SOURCES": "Benutzerdefinierte Quellen",
     "DATATABLE": "DataTable",
+    "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",
-    "ABOUT": "Info"
+    "ABOUT": "Info",
+    "SEARCH": "Erweiterte Suche",
+    "EXTENDED_SEARCH_QUERY_BODY": "Erweiterte Suche mit Abfragetext",
+    "WORD_TO_SEARCH": "Suchbegriff",
+    "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)",
@@ -37,21 +75,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": {
+      "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"
     },
     "ACTIONS": {
+      "VERSIONS": "Versionen verwalten",
+      "METADATA": "Info",
+      "DOWNLOAD": "Herunterladen",
+      "PERMISSION": "Berechtigung",
       "FOLDER": {
         "COPY": "Kopieren",
         "MOVE": "Verschieben",
         "DELETE": "Löschen"
       },
       "DOCUMENT": {
-        "DOWNLOAD": "Herunterladen",
         "COPY": "Kopieren",
         "MOVE": "Verschieben",
         "DELETE": "Löschen",
@@ -84,6 +142,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",
@@ -101,5 +166,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"
   }
 }

demo-shell/resources/i18n/en.json

@@ -1,4 +1,17 @@
 {
+  "APP": {
+    "INFO_DRAWER": {
+      "TITLE": "Details",
+      "COMMENTS": "Comments",
+      "PROPERTIES": "Properties",
+      "VERSIONS": "Versions"
+    },
+    "ADF_VERSION_MANAGER": {
+      "ALLOW_DELETE": "Allow delete",
+      "SHOW_COMMENTS" : "Show comments on versions",
+      "ALLOW_DOWNLOAD" :"Enable version download"
+    }
+  },
     "title": "Welcome",
     "VERSION": {
       "NO_PERMISSION": "You don't have permission to manage versions of this content",
@@ -9,6 +22,12 @@
         "TITLE": "Manage Versions"
       }
     },
+   "METADATA": {
+      "DIALOG": {
+        "CLOSE": "Close",
+        "TITLE": "Metadata"
+      }
+    },
     "APP_LAYOUT": {
         "APP_NAME": "ADF Demo Application",
         "HOME": "Home",
@@ -17,15 +36,34 @@
         "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"
+        "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"
+    },
+    "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)",
@@ -37,21 +75,41 @@
         "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"
+            "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",
+            "PERMISSION": "Permission",
             "FOLDER": {
                 "COPY": "Copy",
                 "MOVE": "Move",
                 "DELETE": "Delete"
             },
             "DOCUMENT": {
-                "DOWNLOAD": "Download",
                 "COPY": "Copy",
                 "MOVE": "Move",
                 "DELETE": "Delete",
@@ -84,6 +142,13 @@
         "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",
@@ -101,5 +166,9 @@
         "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"
     }
 }

demo-shell/resources/i18n/es.json

@@ -1,4 +1,17 @@
 {
+  "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"
+    }
+  },
   "title": "Bienvenido",
   "VERSION": {
     "NO_PERMISSION": "No tiene permiso para administrar versiones de este contenido",
@@ -9,6 +22,12 @@
       "TITLE": "Gestionar versiones"
     }
   },
+  "METADATA": {
+    "DIALOG": {
+      "CLOSE": "Cerrar",
+      "TITLE": "Metadatos"
+    }
+  },
   "APP_LAYOUT": {
     "APP_NAME": "Aplicación ADF Demo",
     "HOME": "Inicio",
@@ -17,15 +36,34 @@
     "LOGIN": "Iniciar sesión",
     "CUSTOM_SOURCES": "Fuentes personalizadas",
     "DATATABLE": "Tabla de datos",
+    "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",
-    "ABOUT": "Acerca de"
+    "ABOUT": "Acerca de",
+    "SEARCH": "Búsqueda ampliada",
+    "EXTENDED_SEARCH_QUERY_BODY": "Búsqueda ampliada con cuerpo de consulta",
+    "WORD_TO_SEARCH": "Buscar palabra",
+    "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)",
@@ -37,21 +75,41 @@
     "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": {
+      "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"
     },
     "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",
@@ -84,6 +142,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",
@@ -101,5 +166,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"
   }
 }

demo-shell/resources/i18n/fr.json

@@ -1,4 +1,17 @@
 {
+  "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"
+    }
+  },
   "title": "Bienvenue",
   "VERSION": {
     "NO_PERMISSION": "Vous n'avez pas les droits d'accès pour gérer les versions de ce contenu",
@@ -9,6 +22,12 @@
       "TITLE": "Gérer les versions"
     }
   },
+  "METADATA": {
+    "DIALOG": {
+      "CLOSE": "Fermer",
+      "TITLE": "Métadonnées"
+    }
+  },
   "APP_LAYOUT": {
     "APP_NAME": "Application Démo ADF",
     "HOME": "Accueil",
@@ -17,15 +36,34 @@
     "LOGIN": "Connexion",
     "CUSTOM_SOURCES": "Sources personnalisées",
     "DATATABLE": "Table de données",
+    "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",
-    "ABOUT": "À propos de"
+    "ABOUT": "À propos de",
+    "SEARCH": "Recherche globale",
+    "EXTENDED_SEARCH_QUERY_BODY": "Recherche globale sur le corps de la requête",
+    "WORD_TO_SEARCH": "Mot recherché",
+    "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)",
@@ -37,21 +75,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": {
+      "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"
     },
     "ACTIONS": {
+      "VERSIONS": "Gérer les versions",
+      "METADATA": "Informations",
+      "DOWNLOAD": "Télécharger",
+      "PERMISSION": "Droit d'accès",
       "FOLDER": {
         "COPY": "Copier",
         "MOVE": "Déplacer",
         "DELETE": "Supprimer"
       },
       "DOCUMENT": {
-        "DOWNLOAD": "Télécharger",
         "COPY": "Copier",
         "MOVE": "Déplacer",
         "DELETE": "Supprimer",
@@ -84,6 +142,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",
@@ -101,5 +166,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"
   }
 }

demo-shell/resources/i18n/it.json

@@ -1,4 +1,17 @@
 {
+  "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"
+    }
+  },
   "title": "Benvenuto",
   "VERSION": {
     "NO_PERMISSION": "Non hai il permesso di gestire versioni di questo contenuto",
@@ -9,6 +22,12 @@
       "TITLE": "Gestione versioni"
     }
   },
+  "METADATA": {
+    "DIALOG": {
+      "CLOSE": "Chiudi",
+      "TITLE": "Metadati"
+    }
+  },
   "APP_LAYOUT": {
     "APP_NAME": "Applicazione demo ADF",
     "HOME": "Home",
@@ -17,15 +36,34 @@
     "LOGIN": "Login",
     "CUSTOM_SOURCES": "Fonti personalizzate",
     "DATATABLE": "Datatable",
+    "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",
-    "ABOUT": "Informazioni su"
+    "ABOUT": "Informazioni su",
+    "SEARCH": "Ricerca estesa",
+    "EXTENDED_SEARCH_QUERY_BODY": "Ricerca estesa con corpo query",
+    "WORD_TO_SEARCH": "Termine di ricerca",
+    "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)",
@@ -37,21 +75,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": {
+      "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"
     },
     "ACTIONS": {
+      "VERSIONS": "Gestione versioni",
+      "METADATA": "Informazioni",
+      "DOWNLOAD": "Download",
+      "PERMISSION": "Permesso",
       "FOLDER": {
         "COPY": "Copia",
         "MOVE": "Sposta",
         "DELETE": "Elimina"
       },
       "DOCUMENT": {
-        "DOWNLOAD": "Download",
         "COPY": "Copia",
         "MOVE": "Sposta",
         "DELETE": "Elimina",
@@ -84,6 +142,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",
@@ -101,5 +166,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"
   }
 }

demo-shell/resources/i18n/ja.json

@@ -1,4 +1,17 @@
 {
+  "APP": {
+    "INFO_DRAWER": {
+      "TITLE": "詳細",
+      "COMMENTS": "コメント",
+      "PROPERTIES": "プロパティ",
+      "VERSIONS": "バージョン"
+    },
+    "ADF_VERSION_MANAGER": {
+      "ALLOW_DELETE": "削除を許可する",
+      "SHOW_COMMENTS": "バージョンに関するコメントを表示",
+      "ALLOW_DOWNLOAD": "バージョンのダウンロードを許可する"
+    }
+  },
   "title": "ようこそ",
   "VERSION": {
     "NO_PERMISSION": "このコンテンツのバージョンを管理する権限がありません",
@@ -9,6 +22,12 @@
       "TITLE": "バージョンの管理"
     }
   },
+  "METADATA": {
+    "DIALOG": {
+      "CLOSE": "閉じる",
+      "TITLE": "メタデータ"
+    }
+  },
   "APP_LAYOUT": {
     "APP_NAME": "ADF デモアプリケーション",
     "HOME": "ホーム",
@@ -17,15 +36,34 @@
     "LOGIN": "ログイン",
     "CUSTOM_SOURCES": "カスタムソース",
     "DATATABLE": "Datatable",
+    "DATATABLE_LAZY": "Datatable (遅延読み込み)",
     "FORM": "フォーム",
     "FORM_LIST": "フォームリスト",
+    "FORM_LOADING": "フォームを読み込んでいます",
     "UPLOADER": "アップローダー",
     "WEBSCRIPT": "Webscript",
     "TAG": "タグ",
+    "TRASHCAN": "ごみ箱",
     "SOCIAL": "ソーシャル",
     "SETTINGS": "設定",
     "OVERLAY_VIEWER": "オーバーレイビューア",
-    "ABOUT": "バージョン情報"
+    "ABOUT": "バージョン情報",
+    "SEARCH": "詳細検索",
+    "EXTENDED_SEARCH_QUERY_BODY": "クエリ本体を使った詳細検索",
+    "WORD_TO_SEARCH": "語句の検索",
+    "SEARCH_CREATED_BY": "作成者",
+    "SEARCH_SERVICE_APPROACH": "入力プロパティを無効にし、サービスを使って設定する場合は、このチェックボックスをオンにします"
+  },
+  "TRASHCAN": {
+    "ACTIONS": {
+      "DELETE_PERMANENT": "完全に削除する",
+      "RESTORE": "復元"
+    },
+    "EMPTY_STATE": {
+      "TITLE": "ごみ箱は空です",
+      "FIRST_TEXT": "削除するアイテムはごみ箱に移動されます。",
+      "SECOND_TEXT": "ごみ箱を空にするとアイテムが完全に削除されます。"
+    }
   },
   "DOCUMENT_LIST": {
     "MULTISELECT_CHECKBOXES": "複数選択 (チェックボックスを使用)",
@@ -37,21 +75,41 @@
     "DESCRIPTION_UPLOAD": "アップロードを有効にします",
     "ENABLE_INFINITE_SCROLL": "無限スクロールを有効にする",
     "MULTISELECT_DESCRIPTION": "複数選択の切り替えを行うには、Cmd (Mac) キーまたは Ctrl (Windows) キーを押します",
+    "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": "削除"
     },
     "ACTIONS": {
+      "VERSIONS": "バージョンの管理",
+      "METADATA": "情報",
+      "DOWNLOAD": "ダウンロード",
+      "PERMISSION": "権限",
       "FOLDER": {
         "COPY": "コピー",
         "MOVE": "移動",
         "DELETE": "削除"
       },
       "DOCUMENT": {
-        "DOWNLOAD": "ダウンロード",
         "COPY": "コピー",
         "MOVE": "移動",
         "DELETE": "削除",
@@ -84,6 +142,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",
@@ -101,5 +166,9 @@
     "LIST": "Content Services のタグリスト",
     "INSERT": "ノード ID の挿入",
     "NODE_LIST": "ノード ID 別タグリスト"
+  },
+  "DEMO_PERMISSION": {
+    "INHERIT_PERMISSION_BUTTON": "権限の継承",
+    "INHERITED_PERMISSIONS_BUTTON": "継承された権限"
   }
 }

demo-shell/resources/i18n/nb.json

@@ -1,4 +1,17 @@
 {
+  "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"
+    }
+  },
   "title": "Velkommen",
   "VERSION": {
     "NO_PERMISSION": "Du har ikke tillatelse til å håndtere versjoner av dette innholdet",
@@ -9,6 +22,12 @@
       "TITLE": "Håndtere versjoner"
     }
   },
+  "METADATA": {
+    "DIALOG": {
+      "CLOSE": "Lukk",
+      "TITLE": "Metadata"
+    }
+  },
   "APP_LAYOUT": {
     "APP_NAME": "ADF-demoprogam",
     "HOME": "Hjem",
@@ -17,15 +36,34 @@
     "LOGIN": "Logg på",
     "CUSTOM_SOURCES": "Tilpassede kilder",
     "DATATABLE": "Datatable",
+    "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",
-    "ABOUT": "Om"
+    "ABOUT": "Om",
+    "SEARCH": "Utvidet søk",
+    "EXTENDED_SEARCH_QUERY_BODY": "Utvidet søk med spørringsuttrykk",
+    "WORD_TO_SEARCH": "Søkeord",
+    "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)",
@@ -37,21 +75,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": {
+      "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"
     },
     "ACTIONS": {
+      "VERSIONS": "Administrer versjoner",
+      "METADATA": "Info",
+      "DOWNLOAD": "Last ned",
+      "PERMISSION": "Tillatelse",
       "FOLDER": {
         "COPY": "Kopier",
         "MOVE": "Flytt",
         "DELETE": "Slett"
       },
       "DOCUMENT": {
-        "DOWNLOAD": "Last ned",
         "COPY": "Kopier",
         "MOVE": "Flytt",
         "DELETE": "Slett",
@@ -84,6 +142,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",
@@ -101,5 +166,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"
   }
 }

demo-shell/resources/i18n/nl.json

@@ -1,4 +1,17 @@
 {
+  "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"
+    }
+  },
   "title": "Welkom",
   "VERSION": {
     "NO_PERMISSION": "U hebt geen rechten voor het beheren van versies van deze content",
@@ -9,6 +22,12 @@
       "TITLE": "Versies beheren"
     }
   },
+  "METADATA": {
+    "DIALOG": {
+      "CLOSE": "Sluiten",
+      "TITLE": "Metagegevens"
+    }
+  },
   "APP_LAYOUT": {
     "APP_NAME": "ADF-demotoepassing",
     "HOME": "Home",
@@ -17,15 +36,34 @@
     "LOGIN": "Aanmelden",
     "CUSTOM_SOURCES": "Aangepaste bronnen",
     "DATATABLE": "Datatable",
+    "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",
-    "ABOUT": "Info"
+    "ABOUT": "Info",
+    "SEARCH": "Uitgebreid zoeken",
+    "EXTENDED_SEARCH_QUERY_BODY": "Uitgebreid zoeken met queryhoofdcode",
+    "WORD_TO_SEARCH": "Zoekterm",
+    "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)",
@@ -37,21 +75,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": {
+      "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"
     },
     "ACTIONS": {
+      "VERSIONS": "Versies beheren",
+      "METADATA": "Info",
+      "DOWNLOAD": "Downloaden",
+      "PERMISSION": "Machtiging",
       "FOLDER": {
         "COPY": "Kopiëren",
         "MOVE": "Verplaatsen",
         "DELETE": "Verwijderen"
       },
       "DOCUMENT": {
-        "DOWNLOAD": "Downloaden",
         "COPY": "Kopiëren",
         "MOVE": "Verplaatsen",
         "DELETE": "Verwijderen",
@@ -84,6 +142,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",
@@ -101,5 +166,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"
   }
 }

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

@@ -1,4 +1,17 @@
 {
+  "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"
+    }
+  },
   "title": "Bem-vindo",
   "VERSION": {
     "NO_PERMISSION": "Você não tem permissão para gerenciar versões deste conteúdo",
@@ -9,6 +22,12 @@
       "TITLE": "Gerenciar versões"
     }
   },
+  "METADATA": {
+    "DIALOG": {
+      "CLOSE": "Fechar",
+      "TITLE": "Metadados"
+    }
+  },
   "APP_LAYOUT": {
     "APP_NAME": "Aplicativo Demo ADF",
     "HOME": "Página Inicial",
@@ -17,15 +36,34 @@
     "LOGIN": "Login",
     "CUSTOM_SOURCES": "Origens Personalizadas",
     "DATATABLE": "Datatable",
+    "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",
-    "ABOUT": "Sobre"
+    "ABOUT": "Sobre",
+    "SEARCH": "Pesquisa estendida",
+    "EXTENDED_SEARCH_QUERY_BODY": "Pesquisa estendida com corpo de consulta",
+    "WORD_TO_SEARCH": "Pesquisar palavras",
+    "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)",
@@ -37,21 +75,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": {
+      "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"
     },
     "ACTIONS": {
+      "VERSIONS": "Gerenciar versões",
+      "METADATA": "Informações",
+      "DOWNLOAD": "Download",
+      "PERMISSION": "Permissão",
       "FOLDER": {
         "COPY": "Copiar",
         "MOVE": "Mover",
         "DELETE": "Excluir"
       },
       "DOCUMENT": {
-        "DOWNLOAD": "Download",
         "COPY": "Copiar",
         "MOVE": "Mover",
         "DELETE": "Excluir",
@@ -84,6 +142,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",
@@ -101,5 +166,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"
   }
 }

demo-shell/resources/i18n/ru.json

@@ -1,4 +1,17 @@
 {
+  "APP": {
+    "INFO_DRAWER": {
+      "TITLE": "Сведения",
+      "COMMENTS": "Комментарии",
+      "PROPERTIES": "Свойства",
+      "VERSIONS": "Версии"
+    },
+    "ADF_VERSION_MANAGER": {
+      "ALLOW_DELETE": "Разрешить удаление",
+      "SHOW_COMMENTS": "Показать комментарии к версиям",
+      "ALLOW_DOWNLOAD": "Разрешить загрузку версии"
+    }
+  },
   "title": "Добро пожаловать",
   "VERSION": {
     "NO_PERMISSION": "У вас нет разрешения на управление версиями этого контента",
@@ -9,6 +22,12 @@
       "TITLE": "Управление версиями"
     }
   },
+  "METADATA": {
+    "DIALOG": {
+      "CLOSE": "Закрыть",
+      "TITLE": "Метаданные"
+    }
+  },
   "APP_LAYOUT": {
     "APP_NAME": "Демонстрационное приложение ADF",
     "HOME": "Домашняя",
@@ -17,15 +36,34 @@
     "LOGIN": "Войти",
     "CUSTOM_SOURCES": "Пользовательские источники",
     "DATATABLE": "Datatable",
+    "DATATABLE_LAZY": "Таблица данных (частичная загрузка)",
     "FORM": "Форма",
     "FORM_LIST": "Список форм",
+    "FORM_LOADING": "Загрузка формы",
     "UPLOADER": "Загрузчик",
     "WEBSCRIPT": "Webscript",
     "TAG": "Метка",
+    "TRASHCAN": "Корзина",
     "SOCIAL": "Социальный",
     "SETTINGS": "Параметры",
     "OVERLAY_VIEWER": "Просмотр наложения",
-    "ABOUT": "О приложении"
+    "ABOUT": "О приложении",
+    "SEARCH": "Расширенный поиск",
+    "EXTENDED_SEARCH_QUERY_BODY": "Расширенный поиск с использованием тела запроса",
+    "WORD_TO_SEARCH": "Искать слово",
+    "SEARCH_CREATED_BY": "Создано пользователем",
+    "SEARCH_SERVICE_APPROACH": "Установите флажок, чтобы отключить свойство ввода и настроить, используя службу."
+  },
+  "TRASHCAN": {
+    "ACTIONS": {
+      "DELETE_PERMANENT": "Удалить навсегда",
+      "RESTORE": "Восстановить"
+    },
+    "EMPTY_STATE": {
+      "TITLE": "Корзина пуста",
+      "FIRST_TEXT": "Элементы, которые вы удаляете, перемещаются в корзину.",
+      "SECOND_TEXT": "Очистите корзину, чтобы удалить элементы навсегда."
+    }
   },
   "DOCUMENT_LIST": {
     "MULTISELECT_CHECKBOXES": "Выбор нескольких вариантов (с флажками)",
@@ -37,21 +75,41 @@
     "DESCRIPTION_UPLOAD": "Включить загрузку",
     "ENABLE_INFINITE_SCROLL": "Включить бесконечную прокрутку",
     "MULTISELECT_DESCRIPTION": "Использовать кнопку Cmd (Mac) или Ctrl (Windows) для переключения выбора нескольких элементов",
+    "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": "Удалить"
     },
     "ACTIONS": {
+      "VERSIONS": "Управление версиями",
+      "METADATA": "Информация",
+      "DOWNLOAD": "Скачать",
+      "PERMISSION": "Право",
       "FOLDER": {
         "COPY": "Копировать",
         "MOVE": "Переместить",
         "DELETE": "Удалить"
       },
       "DOCUMENT": {
-        "DOWNLOAD": "Скачать",
         "COPY": "Копировать",
         "MOVE": "Переместить",
         "DELETE": "Удалить",
@@ -84,6 +142,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",
@@ -101,5 +166,9 @@
     "LIST": "Список меток Content Services",
     "INSERT": "Вставить идентификатор узла",
     "NODE_LIST": "Список меток по идентификатору узла"
+  },
+  "DEMO_PERMISSION": {
+    "INHERIT_PERMISSION_BUTTON": "Наследовать разрешение",
+    "INHERITED_PERMISSIONS_BUTTON": "Разрешение унаследовано"
   }
 }

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

@@ -1,4 +1,17 @@
 {
+  "APP": {
+    "INFO_DRAWER": {
+      "TITLE": "详细信息",
+      "COMMENTS": "注释",
+      "PROPERTIES": "属性",
+      "VERSIONS": "版本"
+    },
+    "ADF_VERSION_MANAGER": {
+      "ALLOW_DELETE": "允许删除",
+      "SHOW_COMMENTS": "显示有关版本的注释",
+      "ALLOW_DOWNLOAD": "允许版本下载"
+    }
+  },
   "title": "欢迎使用",
   "VERSION": {
     "NO_PERMISSION": "您没有管理此内容版本的权限",
@@ -9,6 +22,12 @@
       "TITLE": "管理版本"
     }
   },
+  "METADATA": {
+    "DIALOG": {
+      "CLOSE": "关闭",
+      "TITLE": "元数据"
+    }
+  },
   "APP_LAYOUT": {
     "APP_NAME": "ADF 演示应用程序",
     "HOME": "主页",
@@ -17,15 +36,34 @@
     "LOGIN": "登录",
     "CUSTOM_SOURCES": "自定义来源",
     "DATATABLE": "Datatable",
+    "DATATABLE_LAZY": "Datatable（迟缓）",
     "FORM": "表单",
     "FORM_LIST": "表单列表",
+    "FORM_LOADING": "表单加载",
     "UPLOADER": "上传程序",
     "WEBSCRIPT": "Webscript",
     "TAG": "标签",
+    "TRASHCAN": "垃圾桶",
     "SOCIAL": "社交",
     "SETTINGS": "设置",
     "OVERLAY_VIEWER": "重叠查看器",
-    "ABOUT": "关于"
+    "ABOUT": "关于",
+    "SEARCH": "扩展搜索",
+    "EXTENDED_SEARCH_QUERY_BODY": "包含查询主体的扩展搜索",
+    "WORD_TO_SEARCH": "搜索词",
+    "SEARCH_CREATED_BY": "创建者",
+    "SEARCH_SERVICE_APPROACH": "选中此项以禁用输入属性并使用服务进行配置"
+  },
+  "TRASHCAN": {
+    "ACTIONS": {
+      "DELETE_PERMANENT": "永久删除",
+      "RESTORE": "恢复"
+    },
+    "EMPTY_STATE": {
+      "TITLE": "“垃圾”为空",
+      "FIRST_TEXT": "删除的项目移动到“垃圾”。",
+      "SECOND_TEXT": "清空“垃圾”以永久删除项目。"
+    }
   },
   "DOCUMENT_LIST": {
     "MULTISELECT_CHECKBOXES": "多选（含复选框）",
@@ -37,21 +75,41 @@
     "DESCRIPTION_UPLOAD": "启用上传",
     "ENABLE_INFINITE_SCROLL": "启用无限滚动",
     "MULTISELECT_DESCRIPTION": "使用 Cmd (Mac) 或 Ctrl (Windows) 切换多个项目的选择",
+    "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": "删除"
     },
     "ACTIONS": {
+      "VERSIONS": "管理版本",
+      "METADATA": "信息",
+      "DOWNLOAD": "下载",
+      "PERMISSION": "权限",
       "FOLDER": {
         "COPY": "复制",
         "MOVE": "移动",
         "DELETE": "删除"
       },
       "DOCUMENT": {
-        "DOWNLOAD": "下载",
         "COPY": "复制",
         "MOVE": "移动",
         "DELETE": "删除",
@@ -84,6 +142,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",
@@ -101,5 +166,9 @@
     "LIST": "列表标签 Content Services",
     "INSERT": "插入节点 ID",
     "NODE_LIST": "标签列表（按节点 ID 排序）"
+  },
+  "DEMO_PERMISSION": {
+    "INHERIT_PERMISSION_BUTTON": "继承权限",
+    "INHERITED_PERMISSIONS_BUTTON": "已继承权限"
   }
 }

demo-shell/src/app.config.json

@@ -1,6 +1,8 @@
 {
+    "$schema": "../../lib/core/app-config/schema.json",
     "ecmHost": "http://{hostname}:{port}",
     "bpmHost": "http://{hostname}:{port}",
+    "contextRootBpm": "activiti-app",
     "application": {
         "name": "Alfresco ADF Application"
     },
@@ -50,6 +52,118 @@
             "label": "Simplified Chinese"
         }
     ],
+    "search": {
+      "limits": {
+        "permissionEvaluationTime": null,
+        "permissionEvaluationCount": null
+      },
+      "filterQueries": [
+        { "query": "TYPE:'cm:folder' OR TYPE:'cm:content'" },
+        { "query": "NOT cm:creator:System" }
+      ],
+      "facetFields": {
+        "facets": [
+          { "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" }
+        ]
+      },
+      "facetQueries": [
+        { "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" }
+      ],
+      "query": {
+        "categories": [
+          {
+          "id": "broken",
+          "name": "Broken Facet",
+          "enabled": false,
+          "expanded": false,
+          "component": {
+            "selector": "adf-search-text",
+            "settings": {
+              "field": "fieldname"
+            }
+          }
+        },
+        {
+          "id": "queryName",
+          "name": "Name",
+          "enabled": true,
+          "expanded": true,
+          "component": {
+            "selector": "adf-search-text",
+            "settings": {
+              "pattern": "cm:name:'(.*?)'",
+              "field": "cm:name",
+              "placeholder": "Enter the name"
+            }
+          }
+        },
+        {
+          "id": "queryFields",
+          "name": "Fields",
+          "enabled": true,
+          "expanded": false,
+          "component": {
+            "selector": "adf-search-fields",
+            "settings": {
+              "field": null,
+              "options": [
+                { "name": "Name", "value": "name", "fields": ["name"], "default": true },
+                { "name": "File Size", "value": "content.sizeInBytes", "fields": ["content"], "default": true },
+                { "name": "Modified On", "value": "modifiedAt", "fields": ["modifiedAt"], "default": true },
+                { "name": "Modified By", "value": "modifiedByUser.displayName", "fields": ["modifiedByUser"], "default": true }
+              ]
+            }
+          }
+        },
+        {
+          "id": "queryType",
+          "name": "Type",
+          "enabled": true,
+          "expanded": false,
+          "component": {
+            "selector": "adf-search-radio",
+            "settings": {
+              "field": null,
+              "options": [
+                { "name": "None", "value": "", "default": true },
+                { "name": "All", "value": "TYPE:'cm:folder' OR TYPE:'cm:content'" },
+                { "name": "Folder", "value": "TYPE:'cm:folder'" },
+                { "name": "Document", "value": "TYPE:'cm:content'" }
+              ]
+            }
+          }
+        },
+        {
+          "id": "queryLocations",
+          "name": "Locations",
+          "enabled": true,
+          "expanded": false,
+          "component": {
+            "selector": "adf-search-scope-locations",
+            "settings": {
+              "field": null,
+              "options": [
+                { "name": "Default", "value": "nodes", "default": true },
+                { "name": "Nodes", "value": "nodes" },
+                { "name": "Deleted Nodes", "value": "deleted-nodes" },
+                { "name": "Versions", "value": "versions" }
+              ]
+            }
+          }
+        }
+        ]
+      }
+    },
     "pagination": {
         "size": 25,
         "supportedPageSizes": [ 5, 10, 15, 20 ]
@@ -370,5 +484,9 @@
                 "exif:exif": "*"
             }
         }
+    },
+    "adf-version-manager": {
+      "allowComments": true,
+      "allowDownload": true
     }
 }

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

@@ -1 +1,3 @@
 <router-outlet></router-outlet>
+<app-log></app-log>
+<router-outlet name="overlay"></router-outlet>

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

@@ -0,0 +1,59 @@
+.empty-list {
+    .adf-data-table {
+        height: 100%;
+
+        tr:hover, tr:focus {
+            cursor: default;
+        }
+    }
+
+    &__block {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        p {
+            line-height: 0;
+        }
+    }
+
+    &__title {
+        font-size: 18px;
+        font-weight: 600;
+    }
+
+    &__subtitle {
+        font-size: 14px;
+        font-weight: 300;
+    }
+
+    &__block > mat-icon {
+        font-size: 52px;
+        height: 52px;
+        width: 52px;
+    }
+}
+
+router-outlet[name="overlay"] + * {
+    width: 100%;
+    height: 100%;
+    z-index: 999999;
+    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;
+            }            
+        }
+    }
+}

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

@@ -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();
+    }));
 });

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

@@ -22,7 +22,7 @@ import { SettingsService, PageTitleService, StorageService, TranslationService }
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'],
+  styleUrls: ['./app.component.scss'],
   encapsulation: ViewEncapsulation.None
 })
 export class AppComponent {

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

@@ -4,7 +4,7 @@ import { FormsModule } from '@angular/forms';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { ChartsModule } from 'ng2-charts';
 import { HttpClientModule } from '@angular/common/http';
-import { TranslateService } from '@ngx-translate/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { AppConfigService, TRANSLATION_PROVIDER } from '@alfresco/adf-core';
 import { AppComponent } from './app.component';
@@ -18,8 +18,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';
 
@@ -29,37 +31,40 @@ import { FormViewerComponent } from './components/process-service/form-viewer.co
 import { FormNodeViewerComponent } from './components/process-service/form-node-viewer.component';
 import { AppsViewComponent } from './components/process-service/apps-view.component';
 import { DataTableComponent } from './components/datatable/datatable.component';
+import { TrashcanComponent } from './components/trashcan/trashcan.component';
 import { FilesComponent } from './components/files/files.component';
 import { FileViewComponent } from './components/file-view/file-view.component';
 import { WebscriptComponent } from './components/webscript/webscript.component';
 import { TagComponent } from './components/tag/tag.component';
 import { SocialComponent } from './components/social/social.component';
 import { VersionManagerDialogAdapterComponent } from './components/files/version-manager-dialog-adapter.component';
+import { 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 { TranslateModule } from '@ngx-translate/core';
 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';
 
 @NgModule({
     imports: [
-        ReactiveFormsModule,
-        TranslateModule,
         BrowserModule,
+        BrowserAnimationsModule,
+        ReactiveFormsModule,
         routing,
         FormsModule,
-        AdfModule,
         MaterialModule,
         ThemePickerModule,
         FlexLayoutModule,
         ChartsModule,
-        HttpClientModule
+        HttpClientModule,
+        AdfModule
     ],
     declarations: [
         AppComponent,
@@ -71,6 +76,7 @@ import { SharedLinkViewComponent } from './components/shared-link-view/shared-li
         SearchResultComponent,
         SearchExtendedComponent,
         AboutComponent,
+        LogComponent,
         ProcessServiceComponent,
         ShowDiagramComponent,
         FormViewerComponent,
@@ -79,6 +85,7 @@ import { SharedLinkViewComponent } from './components/shared-link-view/shared-li
         DataTableComponent,
         FilesComponent,
         FileViewComponent,
+        TrashcanComponent,
         FormComponent,
         FormListComponent,
         WebscriptComponent,
@@ -86,13 +93,17 @@ import { SharedLinkViewComponent } from './components/shared-link-view/shared-li
         SocialComponent,
         CustomSourcesComponent,
         VersionManagerDialogAdapterComponent,
+        MetadataDialogAdapterComponent,
         TaskAttachmentsComponent,
         ProcessAttachmentsComponent,
         OverlayViewerComponent,
-        SharedLinkViewComponent
+        SharedLinkViewComponent,
+        FormLoadingComponent,
+        DemoPermissionComponent,
+        FormLoadingComponent,
+        BlobPreviewComponent
     ],
     providers: [
-        TranslateService,
         { provide: AppConfigService, useClass: DebugAppConfigService },
         {
             provide: TRANSLATION_PROVIDER,
@@ -101,10 +112,20 @@ import { SharedLinkViewComponent } from './components/shared-link-view/shared-li
                 name: 'app',
                 source: 'resources'
             }
-        }
+        },
+        {
+            provide: TRANSLATION_PROVIDER,
+            multi: true,
+            useValue: {
+                name: 'lazy-loading',
+                source: 'resources/lazy-loading'
+            }
+        },
+        PreviewService
     ],
     entryComponents: [
-        VersionManagerDialogAdapterComponent
+        VersionManagerDialogAdapterComponent,
+        MetadataDialogAdapterComponent
     ],
     bootstrap: [AppComponent]
 })

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

@@ -30,6 +30,7 @@ import { FormNodeViewerComponent } from './components/process-service/form-node-
 import { AppsViewComponent } from './components/process-service/apps-view.component';
 import { SearchResultComponent } from './components/search/search-result.component';
 import { SearchExtendedComponent } from './components/search/search-extended.component';
+import { TrashcanComponent } from './components/trashcan/trashcan.component';
 
 import { DataTableComponent } from './components/datatable/datatable.component';
 import { WebscriptComponent } from './components/webscript/webscript.component';
@@ -38,21 +39,21 @@ 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';
 
 export const appRoutes: Routes = [
     { path: 'login', component: LoginComponent },
     { path: 'settings', component: SettingsComponent },
-    { path: 'files/:nodeId/view', component: FileViewComponent, canActivate: [ AuthGuardEcm ] },
-    {
-        path: 'preview/s/:id',
-        component: SharedLinkViewComponent
-    },
+    { 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: '',
         component: AppLayoutComponent,
@@ -65,8 +66,16 @@ export const appRoutes: Routes = [
             {
                 path: 'home',
                 component: HomeComponent
-            }
-            ,
+            },
+            {
+                path: 'settings-layout',
+                component: SettingsComponent
+            },
+            {
+                path: 'trashcan',
+                component: TrashcanComponent,
+                canActivate: [AuthGuardEcm]
+            },
             {
                 path: 'files',
                 component: FilesComponent,
@@ -77,6 +86,11 @@ export const appRoutes: Routes = [
                 component: FilesComponent,
                 canActivate: [AuthGuardEcm]
             },
+            {
+                path: 'files/:id/display/:mode',
+                component: FilesComponent,
+                canActivate: [AuthGuardEcm]
+            },
             {
                 path: 'dl-custom-sources',
                 component: CustomSourcesComponent,
@@ -86,11 +100,6 @@ export const appRoutes: Routes = [
                 path: 'datatable',
                 component: DataTableComponent
             },
-            {
-                path: 'uploader',
-                component: UploadButtonComponent,
-                canActivate: [AuthGuardEcm]
-            },
             {
                 path: 'search',
                 component: SearchResultComponent,
@@ -159,13 +168,23 @@ 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,
                 canActivate: [AuthGuardEcm]
+            },
+            {
+                path: 'datatable-lazy',
+                loadChildren: 'app/components/lazy-loading/lazy-loading.module#LazyLoadingModule'
             }
         ]
     }

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

@@ -1,47 +1,54 @@
-<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]="false">
 
-    <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">
+                    <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 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>

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

@@ -1,5 +1,7 @@
 @mixin adf-app-layout-theme($theme) {
   $primary: map-get($theme, primary);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
   $minimumAppWidth: 320px;
   $toolbarHeight: 64px;
 
@@ -17,12 +19,14 @@
    }
 
    .adf-app-layout-toolbar {
-     position: relative;
-     overflow: visible !important;
+       z-index: 1001;
+       position: relative;
+       overflow: visible !important;
    }
 
   .adf-app-layout {
-    display: block;
+    display: flex;
+    flex: 1;
     min-width: $minimumAppWidth;
     height: 100%;
 
@@ -32,10 +36,32 @@
       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 {

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

@@ -32,15 +32,17 @@ export class AppLayoutComponent {
         { href: '/files', icon: 'folder_open', title: 'APP_LAYOUT.CONTENT_SERVICES' },
         { href: '/activiti', icon: 'device_hub', title: 'APP_LAYOUT.PROCESS_SERVICES' },
         { href: '/login', icon: 'vpn_key', title: 'APP_LAYOUT.LOGIN' },
+        { href: '/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' }

demo-shell/src/app/components/blob-preview/blob-preview.component.ts

@@ -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;
+    }
+}

demo-shell/src/app/components/blob-preview/bob-preview.component.html

@@ -0,0 +1,5 @@
+<adf-viewer 
+    [showViewer]="true" 
+    [blobFile]="content" 
+    [displayName]="name">
+</adf-viewer>

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

@@ -178,7 +178,7 @@ export class DataTableComponent {
     getRowForNode() {
         const opts: any = {
             includeSource: true,
-            include: ['path', 'properties', 'allowableOperations']
+            include: ['path', 'properties', 'allowableOperations', 'permissions']
         };
 
         Observable.fromPromise(this.apiService.getInstance().nodes

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

@@ -1,15 +1,19 @@
 <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>
@@ -18,6 +22,19 @@
     </ng-template>
 
     <adf-viewer [fileNodeId]="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">

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

@@ -18,6 +18,7 @@
 import { Component, OnInit } 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',
@@ -30,6 +31,7 @@ export class FileViewComponent implements OnInit {
     constructor(
         private router: Router,
         private route: ActivatedRoute,
+        private snackBar: MatSnackBar,
         private apiService: AlfrescoApiService) {}
 
     ngOnInit() {
@@ -51,4 +53,7 @@ export class FileViewComponent implements OnInit {
         });
     }
 
+    uploadError(errorMessage: string) {
+        this.snackBar.open(errorMessage, '', { duration: 4000 });
+    }
 }

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

@@ -8,19 +8,9 @@
             </mat-select>
         </mat-form-field>
     </adf-toolbar-title>
-
-    <div fxFlex="0 1 auto" class="adf-document-action-buttons" fxShow fxHide.lt-sm="true">
-        <button mat-icon-button
-                (restore)="documentList.reload()"
-                [disabled]="!documentList.selection.length"
-                *ngIf="selectedSource === '-trashcan-'"
-                location="/files"
-                [adf-restore]="documentList.selection">
-            <mat-icon>restore</mat-icon>
-        </button>
-    </div>
 </adf-toolbar>
 <adf-document-list
+    #customSourcesDocumentList
     [currentFolderId]="selectedSource"
     locationFormat="/files"
     selectionMode="multiple">

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

@@ -27,7 +27,7 @@ export class CustomSourcesComponent {
     @Input()
     selectedSource = '-recent-';
 
-    @ViewChild(DocumentListComponent)
+    @ViewChild('customSourcesDocumentList')
     documentList: DocumentListComponent;
 
     sources = [

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

@@ -1,15 +1,44 @@
 <div class="container">
+
+    <mat-accordion 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 class="adf-site-container-style" id="site-container">
-        <adf-sites-dropdown (change)="getSiteContent($event)" [hideMyFiles]="false">
+        <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()"
-            [versioning]="versioning"
-            [adf-node-permission]="'create'"
-            [adf-nodes]="disableDragArea ? getCurrentDocumentListNode() : []">
+                              [disabled]="disableDragArea"
+                              [parentId]="getDocumentListCurrentFolderId()"
+                              [versioning]="versioning"
+                              [adf-node-permission]="'create'"
+                              [adf-nodes]="disableDragArea ? getCurrentDocumentListNode() : []">
             <div *ngIf="errorMessage" class="error-message">
                 <button (click)="resetError()" mat-icon-button>
                     <mat-icon>highlight_off</mat-icon>
@@ -34,27 +63,39 @@
                 <adf-toolbar-divider fxFlex="0 0 auto"></adf-toolbar-divider>
 
                 <div fxFlex="0 0 auto" class="adf-document-action-buttons" fxShow fxHide.lt-sm="true">
+                    <button
+                        mat-icon-button
+                        title="{{ 'DOCUMENT_LIST.TOOLBAR.CARDVIEW' | translate }}"
+                        (click)="toogleGalleryView()">
+                        <mat-icon *ngIf="displayMode === 'list'" >view_comfy</mat-icon>
+                        <mat-icon *ngIf="displayMode === 'gallery'">list</mat-icon>
+                    </button>
                     <button
                         mat-icon-button
                         [disabled]="!canCreateContent(documentList.folderNode)"
+                        title="{{ 'DOCUMENT_LIST.TOOLBAR.NEW_FOLDER' | translate }}"
+                        (error)="openSnackMessage($event)"
                         [adf-create-folder]="getDocumentListCurrentFolderId()">
                         <mat-icon>create_new_folder</mat-icon>
                     </button>
                     <button mat-icon-button
                             [disabled]="!canEditFolder(documentList.selection)"
+                            title="{{ 'DOCUMENT_LIST.TOOLBAR.EDIT_FOLDER' | translate }}"
+                            (error)="openSnackMessage($event)"
                             [adf-edit-folder]="documentList.selection[0]?.entry">
                         <mat-icon>create</mat-icon>
                     </button>
                     <button mat-icon-button
                             [disabled]="!hasSelection(documentList.selection)"
-                            title="Download"
-                            (click)="downloadNodes(documentList.selection)">
+                            title="{{ 'DOCUMENT_LIST.TOOLBAR.DOWNLOAD' | translate }}"
+                            [adfNodeDownload]="documentList.selection">
                         <mat-icon>get_app</mat-icon>
                     </button>
                     <button mat-icon-button
                             adf-node-permission="delete"
                             [adf-nodes]="documentList.selection"
-                            (delete)="documentList.reload()"
+                            title="{{ 'DOCUMENT_LIST.TOOLBAR.DELETE' | translate }}"
+                            (delete)="onDeleteActionSuccess($event)"
                             [adf-delete]="documentList.selection">
                         <mat-icon>delete</mat-icon>
                     </button>
@@ -66,6 +107,14 @@
                             {{ favorite.hasFavorites() ? 'star' :'star_border' }}
                         </mat-icon>
                     </button>
+                    <button mat-icon-button
+                            [disabled]="!documentList.selection.length"
+                            [baseShareUrl]="baseShareUrl"
+                            [adf-share]="documentList.selection[0]">
+                        <mat-icon>
+                            share
+                        </mat-icon>
+                    </button>
                 </div>
 
                 <button fxFlex="1 0 auto" mat-icon-button [matMenuTriggerFor]="themePicker">
@@ -79,7 +128,7 @@
                     <button mat-menu-item (click)="toolbarColor = 'warn'">Warn</button>
                 </mat-menu>
 
-                <button mat-icon-button (click)="showVersions = !showVersions">
+                <button mat-icon-button (click)="showVersions = !showVersions" class="adf-show-versions-button">
                     <mat-icon *ngIf="!showVersions">chevron_left</mat-icon>
                     <mat-icon *ngIf="showVersions">chevron_right</mat-icon>
                 </button>
@@ -91,35 +140,44 @@
                 </button>
                 <mat-menu #menu="matMenu">
                     <button mat-menu-item
+                            (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>New folder</span>
+                        <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>Edit folder</span>
+                        <span>{{ 'DOCUMENT_LIST.TOOLBAR.EDIT_FOLDER' | translate }}</span>
                     </button>
                     <button mat-menu-item
                             [disabled]="!hasSelection(documentList.selection)"
                             title="Download"
                             (click)="downloadNodes(documentList.selection)">
                         <mat-icon>get_app</mat-icon>
-                        <span>Download</span>
+                        <span>{{ 'DOCUMENT_LIST.TOOLBAR.DOWNLOAD' | translate }}</span>
                     </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>Delete</span>
+                        <span>{{ 'DOCUMENT_LIST.TOOLBAR.DELETE' | translate }}</span>
                     </button>
                 </mat-menu>
             </adf-toolbar>
 
             <adf-document-list
                 #documentList
-                [enableInfiniteScrolling]="infiniteScrolling"
                 [permissionsStyle]="permissionsStyle"
                 [currentFolderId]="currentFolderId"
                 [contextMenuActions]="true"
@@ -127,7 +185,9 @@
                 [allowDropFiles]="true"
                 [selectionMode]="selectionMode"
                 [multiselect]="multiselect"
+                [display]="displayMode"
                 [node]="nodeResult"
+                [includeFields]="includeFields"
                 (error)="onNavigationError($event)"
                 (success)="resetError()"
                 (ready)="emitReadyEvent($event)"
@@ -165,7 +225,7 @@
                     -->
                     <data-column
                         key="content.sizeInBytes"
-                        title="Size"
+                        title="{{'DOCUMENT_LIST.COLUMNS.SIZE' | translate}}"
                         type="fileSize">
                     </data-column>
                     <!-- Notes: has performance overhead due to multiple files/folders causing separate HTTP calls to get tags -->
@@ -179,6 +239,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"
@@ -195,87 +266,71 @@
                 </data-columns>
 
                 <content-actions>
-                    <!-- folder actions -->
+                    <!-- common actions -->
                     <content-action
-                        icon="content_copy"
-                        target="folder"
-                        title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.COPY' | translate}}"
-                        permission="update"
-                        [disableWithNoPermission]="true"
-                        (error)="onContentActionError($event)"
-                        (success)="onContentActionSuccess($event)"
-                        handler="copy">
-                    </content-action>
-                    <content-action
-                        icon="redo"
-                        target="folder"
-                        title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.MOVE' | translate}}"
-                        permission="update"
-                        [disableWithNoPermission]="true"
-                        (error)="onContentActionError($event)"
-                        (success)="onContentActionSuccess($event)"
-                        handler="move">
-                    </content-action>
-                    <content-action
-                        icon="delete"
-                        target="folder"
-                        permission="delete"
-                        [disableWithNoPermission]="true"
-                        title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.DELETE' | translate}}"
-                        (permissionEvent)="handlePermissionError($event)"
-                        (success)="onDeleteActionSuccess($event)"
-                        handler="delete">
-                    </content-action>
-                    <!-- document actions -->
-                    <content-action
-                        icon="content_copy"
-                        target="document"
-                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.COPY' | translate}}"
-                        permission="update"
-                        [disableWithNoPermission]="true"
-                        (error)="onContentActionError($event)"
-                        (success)="onContentActionSuccess($event)"
-                        handler="copy">
-                    </content-action>
-                    <content-action
-                        icon="redo"
-                        target="document"
-                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.MOVE' | translate}}"
-                        permission="update"
-                        [disableWithNoPermission]="true"
-                        (error)="onContentActionError($event)"
-                        (success)="onContentActionSuccess($event)"
-                        handler="move">
-                    </content-action>
-                    <content-action
-                        icon="storage"
-                        target="document"
-                        title="Manage versions..."
-                        (execute)="onManageVersions($event)">
-                    </content-action>
-                    <content-action
-                        icon="file_download"
-                        target="document"
-                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DOWNLOAD' | translate}}"
+                        icon="get_app"
+                        title="DOCUMENT_LIST.ACTIONS.DOWNLOAD"
                         handler="download">
                     </content-action>
+                    <content-action
+                        icon="content_copy"
+                        title="DOCUMENT_LIST.ACTIONS.FOLDER.COPY"
+                        permission="copy"
+                        [disableWithNoPermission]="true"
+                        (error)="onContentActionError($event)"
+                        (success)="onContentActionSuccess($event)"
+                        handler="copy">
+                    </content-action>
+                    <content-action
+                        icon="redo"
+                        title="DOCUMENT_LIST.ACTIONS.FOLDER.MOVE"
+                        permission="update"
+                        [disableWithNoPermission]="true"
+                        (error)="onContentActionError($event)"
+                        (success)="onContentActionSuccess($event)"
+                        handler="move">
+                    </content-action>
                     <content-action
                         icon="delete"
-                        target="document"
                         permission="delete"
                         [disableWithNoPermission]="true"
+                        title="DOCUMENT_LIST.ACTIONS.FOLDER.DELETE"
                         (permissionEvent)="handlePermissionError($event)"
-                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DELETE' | translate}}"
                         (success)="onDeleteActionSuccess($event)"
                         handler="delete">
                     </content-action>
+                    <content-action
+                        icon="info"
+                        title="DOCUMENT_LIST.ACTIONS.METADATA"
+                        (execute)="onManageMetadata($event)">
+                    </content-action>
+                    <!-- document actions -->
+                    <content-action
+                        icon="storage"
+                        target="document"
+                        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' | translate}}"
+                        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
@@ -298,24 +353,27 @@
         </adf-upload-drag-area>
 
         <adf-info-drawer-layout *ngIf="showVersions" class="adf-manage-versions-sidebar" fxFlex="0 0 auto">
+
             <div info-drawer-content>
                 <ng-container *ngIf="hasOneFileSelected();else choose_document_template">
                     <ng-container *ngIf="userHasPermissionToManageVersions(); else no_permission_to_versions">
                         <adf-version-manager
-                            [node]="documentList.selection[0].entry">
+                            [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}}
+                        {{'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}}
+                        {{'VERSION.NO_PERMISSION' | translate}}
                     </div>
                 </ng-template>
             </div>
@@ -323,9 +381,9 @@
     </div>
 </div>
 
-<context-menu-holder></context-menu-holder>
+<adf-context-menu-holder></adf-context-menu-holder>
 
-<div *ngIf="processId" >
+<div *ngIf="processId">
     <adf-start-process
         [values]="formValues"
         [appId]="processId">
@@ -371,35 +429,47 @@
         </section>
 
         <section>
-          <mat-slide-toggle [color]="'primary'" [(ngModel)]="maxSizeShow">{{'DOCUMENT_LIST.MAX_SIZE' |
-            translate}}
-          </mat-slide-toggle>
-        </section>
-
-        <section>
-            <mat-slide-toggle [color]="'primary'" [(ngModel)]="versioning">{{'DOCUMENT_LIST.ENABLE_VERSIONING' |
+            <mat-slide-toggle [color]="'primary'" [(ngModel)]="maxSizeShow">{{'DOCUMENT_LIST.MAX_SIZE' |
                 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" [(ngModel)]="infiniteScrolling">
                 {{'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>
+
         <h5>Upload</h5>
         <section *ngIf="acceptedFilesTypeShow">
             <mat-form-field floatPlaceholder="float">
-                <input  matInput
-                        placeholder="Extension accepted"
-                        [(ngModel)]="acceptedFilesType"
-                        data-automation-id="accepted-files-type">
+                <input matInput
+                       placeholder="Extension accepted"
+                       [(ngModel)]="acceptedFilesType"
+                       data-automation-id="accepted-files-type">
             </mat-form-field>
         </section>
         <section *ngIf="maxSizeShow">
             <mat-form-field>
-                <input matInput type="number"  placeholder="Max file size" [(ngModel)]="maxFilesSize"
+                <input matInput type="number" placeholder="Max file size" [(ngModel)]="maxFilesSize"
                        data-automation-id="max-files-size">
             </mat-form-field>
         </section>
@@ -413,7 +483,7 @@
                 [multipleFiles]="multipleFileUpload"
                 [uploadFolders]="folderUpload"
                 [maxFilesSize]="maxSizeShow ? maxFilesSize : null"
-                (error)="handleUploadError($event)"
+                (error)="openSnackMessage($event)"
                 [versioning]="versioning"
                 [adf-node-permission]="'create'"
                 [adf-nodes]="enableUpload ? getCurrentDocumentListNode() : []"
@@ -431,7 +501,7 @@
                 [multipleFiles]="multipleFileUpload"
                 [uploadFolders]="folderUpload"
                 [versioning]="versioning"
-                (error)="handleUploadError($event)"
+                (error)="openSnackMessage($event)"
                 [adf-node-permission]="'create'"
                 [adf-nodes]="enableUpload ? getCurrentDocumentListNode() : []"
                 (permissionEvent)="handlePermissionError($event)">
@@ -458,4 +528,4 @@
     </div>
 </div>
 
-<file-uploading-dialog #fileDialog></file-uploading-dialog>
+<adf-file-uploading-dialog #fileDialog (error)="openSnackMessage($event)" ></adf-file-uploading-dialog>

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

@@ -1,134 +1,182 @@
-$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 > table > tbody > tr.is-selected > td.adf-data-table-cell.adf-data-table-cell--image.image-table-cell > div > div > mat-icon > svg {
-    fill: #00bcd4;
-}
-
-.adf-site-container-style {
-    margin-top: 10px;
-    margin-bottom: 10px;
-    width: 100%;
-    min-width: 200px;
-}
-
-.adf-content-service-settings {
-    padding: 16px;
-}
-
-.adf-files-toolbar {
-    .adf-toolbar-title {
-        display: flex;
-        width: 100%;
-
-        .adf-breadcrumb {
-            width: 0;
-        }
-    }
-}
-
-.adf-manage-versions-sidebar {
-    width: 300px;
-    color: rgba(0, 0, 0, 0.87);
-
-    .adf-manage-versions-empty,
-    .adf-manage-versions-no-permission {
-        margin: 24px;
-        color: grey;
-        text-align: justify;
-
-        &-icon {
-            display: block;
-            font-size: 48px;
-            margin: 0 auto 32px auto;
-        }
+        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;
-}
-
-@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: 300px !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;
+            }
+        }
+
+        & ::ng-deep .adf-info-drawer-layout-header {
+            display: none;
+        }
+
+        & ::ng-deep .adf-info-drawer-layout-content {
+            padding: 0;
+
+            .adf-version-upload,
+            .adf-new-version-file-upload {
+                width: 100%;
+
+                & .mat-raised-button {
+                    width: 100%;
+                }
+            }
+
+            .adf-new-version-uploader-container {
+                padding: 8px 24px 16px 24px;
+            }
+        }
+    }
+
+    .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;
+            }                 
+        }
+    }    
 }

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

@@ -16,25 +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, MinimalNodeEntryEntity, SiteEntry } from 'alfresco-js-api';
 import {
-    AlfrescoApiService, AuthenticationService, ContentService, TranslationService,
+    AuthenticationService, AppConfigService, ContentService, TranslationService,
     FileUploadEvent, FolderCreatedEvent, LogService, NotificationService,
     UploadService, DataColumn, DataRow, UserPreferencesService,
-    PaginationComponent, FormValues
+    PaginationComponent, FormValues, DisplayMode, UserPreferenceValues
 } from '@alfresco/adf-core';
 
-import { DocumentListComponent, PermissionStyleModel, DownloadZipDialogComponent } from '@alfresco/adf-content-services';
+import { DocumentListComponent, PermissionStyleModel } from '@alfresco/adf-content-services';
 
 import { SelectAppsDialogComponent } from '@alfresco/adf-process-services';
 
 import { VersionManagerDialogAdapterComponent } from './version-manager-dialog-adapter.component';
-import { Subscription } from 'rxjs/Rx';
+import { MetadataDialogAdapterComponent } from './metadata-dialog-adapter.component';
+import { Subscription } from 'rxjs/Subscription';
+import { PreviewService } from '../../services/preview.service';
 
 const DEFAULT_FOLDER_TO_SHOW = '-my-';
 
@@ -49,6 +53,10 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
     fileNodeId: any;
     showViewer = false;
     showVersions = false;
+    displayMode = DisplayMode.List;
+    includeFields = ['isLocked', 'aspectNames'];
+
+    baseShareUrl = this.appConfig.get<string>('ecmHost') + '/preview/s/';
 
     toolbarColor = 'default';
 
@@ -58,8 +66,8 @@ 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 = {};
@@ -84,9 +92,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';
 
@@ -126,45 +140,46 @@ 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;
 
     permissionsStyle: PermissionStyleModel[] = [];
     infiniteScrolling: boolean;
     supportedPages: number[];
+    currentSiteid = '';
 
     private onCreateFolder: Subscription;
     private onEditFolder: Subscription;
 
-    constructor(private changeDetector: ChangeDetectorRef,
-                private apiService: AlfrescoApiService,
-                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 preference: UserPreferencesService,
+                private appConfig: AppConfigService,
+                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]);
-    }
-
     toggleFolder() {
         this.multipleFileUpload = false;
         this.folderUpload = !this.folderUpload;
@@ -178,11 +193,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']) {
+                    this.displayMode = DisplayMode.Gallery;
                 }
             });
         }
@@ -193,7 +212,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));
@@ -262,33 +281,29 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
         }
     }
 
+    onFolderChange($event) {
+        this.router.navigate(['/files', $event.value.id]);
+    }
+
     handlePermissionError(event: any) {
-        this.translateService.get('VERSION.NO_PERMISSION_EVENT', {
+        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) {
@@ -310,36 +325,67 @@ 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() {
+        if (this.infiniteScrolling) {
+            this.documentList.skipCount = 0;
+        }
+        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);
         }
     }
 
-    getSiteContent(site: SiteEntry) {
-        this.currentFolderId = site && site.entry.guid ? site.entry.guid : DEFAULT_FOLDER_TO_SHOW;
+    onManageMetadata(event) {
+        const contentEntry = event.value.entry;
+
+        if (this.contentService.hasPermission(contentEntry, 'update')) {
+            this.dialog.open(MetadataDialogAdapterComponent, {
+                data: { contentEntry },
+                panelClass: 'adf-metadata-manager-dialog',
+                width: '630px'
+            });
+        } else {
+            const translatedErrorMessage: any = this.translateService.get('OPERATION.ERROR.PERMISSION');
+            this.openSnackMessage(translatedErrorMessage.value);
+        }
+    }
+
+    onSiteChange(site: SiteEntry) {
+        this.currentFolderId = site.entry.guid;
     }
 
     getDocumentListCurrentFolderId() {
@@ -361,73 +407,6 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
         return this.contentService.hasPermission(selection[0].entry, 'update');
     }
 
-    downloadNodes(selection: Array<MinimalNodeEntity>) {
-        if (!selection || selection.length === 0) {
-            return;
-        }
-
-        if (selection.length === 1) {
-            this.downloadNode(selection[0]);
-        } else {
-            this.downloadZip(selection);
-        }
-    }
-
-    downloadNode(node: MinimalNodeEntity) {
-        if (node && node.entry) {
-            const entry = node.entry;
-
-            if (entry.isFile) {
-                this.downloadFile(node);
-            }
-
-            if (entry.isFolder) {
-                this.downloadZip([node]);
-            }
-        }
-    }
-
-    downloadFile(node: MinimalNodeEntity) {
-        if (node && node.entry) {
-            const contentApi = this.apiService.getInstance().content;
-
-            const url = contentApi.getContentUrl(node.entry.id, true);
-            const fileName = node.entry.name;
-
-            this.download(url, fileName);
-        }
-    }
-
-    downloadZip(selection: Array<MinimalNodeEntity>) {
-        if (selection && selection.length > 0) {
-            const nodeIds = selection.map(node => node.entry.id);
-
-            const dialogRef = this.dialog.open(DownloadZipDialogComponent, {
-                width: '600px',
-                data: {
-                    nodeIds: nodeIds
-                }
-            });
-            dialogRef.afterClosed().subscribe(result => {
-                this.logService.log(result);
-            });
-        }
-    }
-
-    download(url: string, fileName: string) {
-        if (url && fileName) {
-            const link = document.createElement('a');
-
-            link.style.display = 'none';
-            link.download = fileName;
-            link.href = url;
-
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-        }
-    }
-
     getNodeNameTooltip(row: DataRow, col: DataColumn): string {
         if (row) {
             return row.getValue('name');
@@ -487,4 +466,19 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
     onPrevPage(event: Pagination): void {
         this.turnedPreviousPage.emit(event);
     }
+
+    toogleGalleryView(): void {
+        const url = this
+            .router
+            .createUrlTree(['/files', this.currentFolderId, 'display', this.displayMode])
+            .toString();
+
+        if (this.displayMode === DisplayMode.List) {
+            this.displayMode = DisplayMode.Gallery;
+            this.location.go(url);
+        } else {
+            this.displayMode = DisplayMode.List;
+            this.location.go(url);
+        }
+    }
 }

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

@@ -0,0 +1,7 @@
+<header mat-dialog-title>{{'METADATA.DIALOG.TITLE' | translate}}</header>
+<section mat-dialog-content>
+    <adf-content-metadata-card [node]="contentEntry"></adf-content-metadata-card>
+</section>
+<footer mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+    <button mat-button (click)="close()">{{'METADATA.DIALOG.CLOSE' | translate}}</button>
+</footer>

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

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

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

@@ -1,6 +1,6 @@
 <header mat-dialog-title>{{'VERSION.DIALOG.TITLE' | translate}}</header>
 <section mat-dialog-content>
-    <adf-version-manager [node]="contentEntry"></adf-version-manager>
+    <adf-version-manager [node]="contentEntry" [allowDownload]="allowDownload" [showComments]="showComments" (uploadError)="uploadError($event)"></adf-version-manager>
 </section>
 <footer mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
     <button mat-button (click)="close()">{{'VERSION.DIALOG.CLOSE' | translate}}</button>

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

@@ -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,19 @@ export class VersionManagerDialogAdapterComponent {
 
     public contentEntry: MinimalNodeEntryEntity;
 
+    showComments = true;
+    allowDownload = true;
+
     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() {

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

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

demo-shell/src/app/components/form/fake-form.service.ts

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

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

@@ -1,7 +1,7 @@
 <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">
     </adf-form>
 </div>
 <button mat-button (click)="store()" color="primary">{{'FORM-LIST.STORE' | translate }}</button>

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

@@ -25,7 +25,7 @@ import { FormComponent, FormModel, FormService, LogService } from '@alfresco/adf
 })
 export class FormListComponent {
 
-    @ViewChild(FormComponent)
+    @ViewChild('adfForm')
     activitiForm: FormComponent;
 
     formList: any [] = [];

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

@@ -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>

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

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

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

@@ -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
+                            };
+    }
+
+}

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

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

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

@@ -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;

demo-shell/src/app/components/lazy-loading/i18n/en.json

@@ -0,0 +1,5 @@
+{
+  "LAZY": {
+    "TEXT": "Text from lazy component resources"
+  }
+}

demo-shell/src/app/components/lazy-loading/lazy-loading.component.ts

@@ -0,0 +1,54 @@
+import { Component } from '@angular/core';
+import { ObjectDataTableAdapter, AuthenticationService } from '@alfresco/adf-core';
+
+@Component({
+    selector: 'app-lazy-component',
+    template: `
+        <adf-datatable [data]="data"></adf-datatable>
+
+        <ul>
+            <li>Global i18n: {{ 'APP_LAYOUT.DATATABLE_LAZY' | translate }}</li>
+            <li>Local i18n (work in progress): {{ 'LAZY.TEXT' | translate }}</li>
+            <li>isLoggedIn: {{ isLoggedIn }}</li>
+            <li>ECM username: {{ username }}
+        </ul>
+    `
+})
+export class LazyLoadingComponent {
+
+    data: ObjectDataTableAdapter;
+
+    get isLoggedIn(): boolean {
+        return this.auth.isLoggedIn();
+    }
+
+    get username(): string {
+        return this.auth.getEcmUsername();
+    }
+
+    constructor(private auth: AuthenticationService) {
+        this.data = new ObjectDataTableAdapter(
+            // data
+            [
+              {id: 1, name: 'Name 1'},
+              {id: 2, name: 'Name 2'}
+            ],
+            // schema
+            [
+              {
+                type: 'text',
+                key: 'id',
+                title: 'Id',
+                sortable: true
+              },
+              {
+                type: 'text',
+                key: 'name',
+                title: 'Name',
+                cssClass: 'full-width',
+                sortable: true
+              }
+            ]
+        );
+    }
+}

demo-shell/src/app/components/lazy-loading/lazy-loading.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CoreModule, TranslationService } from '@alfresco/adf-core';
+
+import { LazyLoadingRoutes } from './lazy-loading.routes';
+import { LazyLoadingComponent } from './lazy-loading.component';
+
+@NgModule({
+    imports: [
+        CoreModule.forChild(),
+        LazyLoadingRoutes
+    ],
+    declarations: [
+        LazyLoadingComponent
+    ]
+})
+export class LazyLoadingModule {
+    constructor(translation: TranslationService) {
+    }
+}

demo-shell/src/app/components/lazy-loading/lazy-loading.routes.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { LazyLoadingComponent } from './lazy-loading.component';
+
+export const routes: Routes = [
+    {
+        path: '',
+        component: LazyLoadingComponent
+    }
+];
+
+@NgModule({
+    imports: [
+        RouterModule.forChild(routes)
+    ],
+    exports: [
+        RouterModule
+    ]
+})
+export class LazyLoadingRoutes {
+}

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

@@ -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: 1em;
+    right: 1em;
+    opacity: 0.9;
+    overflow: scroll;
+}
+
+.log-ERROR {
+    color: red;
+}
+
+.log-WARN {
+    color: yellow;
+}

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

@@ -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>

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

@@ -0,0 +1,52 @@
+/*!
+ * @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) => {
+            this.logs.push({ type: message.type, text: JSON.stringify(message.text) });
+            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;
+        }
+
+    }
+}

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

@@ -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;
-}

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

@@ -41,7 +41,7 @@
 
 <!--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>
 
@@ -92,5 +92,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>

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

@@ -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: 190px;
+        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;
+    }
+}

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

@@ -23,7 +23,7 @@ import { LogService, StorageService } 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 {
 

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

@@ -0,0 +1,12 @@
+<div class="inherit_permission_button">
+    <button mat-raised-button
+            [color]="toggleStatus?'accent':'primary'"
+            adf-inherit-permission [nodeId]="nodeId"
+            (updated)="onUpdatedPermissions($event)">
+            {{ (toggleStatus?'DEMO_PERMISSION.INHERITED_PERMISSIONS_BUTTON':'DEMO_PERMISSION.INHERIT_PERMISSION_BUTTON') | translate}}</button>
+</div>
+<div>
+	<adf-permission-list #permissionList [nodeId]="nodeId">
+	</adf-permission-list>
+</div>
+

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

@@ -0,0 +1,6 @@
+.inherit_permission_button {
+    padding-top: 20px;
+    display: flex;
+    justify-content: space-evenly;
+    padding-bottom: 20px;
+}

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

@@ -0,0 +1,59 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, Optional, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Params} from '@angular/router';
+import { PermissionListComponent } from '@alfresco/adf-content-services';
+import { MinimalNodeEntryEntity } from 'alfresco-js-api';
+import { NodesApiService } 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) {
+    }
+
+    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();
+    }
+
+}

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

@@ -17,7 +17,7 @@
 
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { Subscription } from 'rxjs/Rx';
+import { Subscription } from 'rxjs/Subscription';
 
 @Component({
     selector: 'app-form-node-viewer',

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

@@ -17,7 +17,7 @@
 
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { Subscription } from 'rxjs/Rx';
+import { Subscription } from 'rxjs/Subscription';
 
 @Component({
     selector: 'app-form-viewer',

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

@@ -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>

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

@@ -19,32 +19,42 @@ import { Component, Input, OnChanges, OnInit, ViewChild } 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';
+
+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 {
 
-    @ViewChild(ProcessAttachmentListComponent)
+    @ViewChild('processAttachList')
     processAttachList: ProcessAttachmentListComponent;
 
     @Input()
     processInstanceId: string;
 
-    fileShowed = false;
-    content: Blob;
-    contentName: string;
-
     processInstance: ProcessInstance;
 
-    constructor(private uploadService: UploadService, private processService: ProcessService) {
-    }
+    constructor(
+        private uploadService: UploadService,
+        private processService: ProcessService,
+        private preview: PreviewService
+    ) {}
 
     ngOnInit() {
         this.uploadService.fileUploadComplete.subscribe(value => this.onFileUploadComplete(value.data));
@@ -64,9 +74,7 @@ export class ProcessAttachmentsComponent implements OnInit, OnChanges {
     }
 
     onAttachmentClick(content: any): void {
-        this.fileShowed = true;
-        this.content = content.contentBlob;
-        this.contentName = content.name;
+        this.preview.showBlob(content.name, content.contentBlob);
     }
 
     isCompletedProcess(): boolean {

demo-shell/src/app/components/process-service/process-service.component.html

@@ -1,4 +1,4 @@
-<mat-tab-group [(selectedIndex)]="activeTab">
+<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="adf-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
@@ -33,7 +33,7 @@
                         [appId]="taskFilter?.appId"
                         [presetColumn]="presetColoum"
                         [page]="taskPage"
-                        [size]="taskPagination.maxItems"
+                        [size]="paginationPageSize"
                         [processDefinitionKey]="taskFilter?.filter?.processDefinitionKey"
                         [name]="taskFilter?.filter?.name"
                         [assignment]="taskFilter?.filter?.assignment"
@@ -45,7 +45,7 @@
                         (success)="onSuccessTaskList($event)"
                         (row-click)="onRowClick($event)"
                         (row-dblclick)="onTaskRowDblClick($event)"
-                        #activititasklist>
+                        #taskList>
                         <!-- Custom column definition demo -->
 
                         <!-- <data-columns>
@@ -56,12 +56,11 @@
                     </adf-tasklist>
 
                     <adf-pagination
-                        (changePageNumber)="onChangePageNumber($event)"
+                        *ngIf="taskList"
+                        [target]="taskList"
                         (changePageSize)="onChangePageSize($event)"
-                        (nextPage)="onNextPage($event)"
-                        (prevPage)="onPrevPage($event)"
-                        [pagination]="taskPagination"
-                        [supportedPageSizes]="supportedPages">
+                        [supportedPageSizes]="supportedPages"
+                        #taskListPagination>
                     </adf-pagination>
                 </div>
                 <div class="adf-grid-item adf-tasks-details" *ngIf="!isStartTaskMode()" fxFlex.gt-md="1 1 auto">
@@ -75,7 +74,7 @@
                                            (assignTask)="onAssignTask()"
                                            (taskDeleted)="onTaskDeleted($event)">
                     </adf-task-details>
-                    <hr>
+                    <mat-divider></mat-divider>
                     <div *ngIf="currentTaskId">
                         {{'PS-TAB.TASK-AUDIT-LOG' | translate}}
                         <button
@@ -85,7 +84,7 @@
                             mat-icon-button (clicked)="onAuditClick($event)" (error)="onAuditError($event)">
                             <mat-icon>assignment_ind</mat-icon>
                         </button>
-                        <hr>
+                        <mat-divider></mat-divider>
                     </div>
                     <mat-card>
                         <mat-card-content>
@@ -122,6 +121,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)"
@@ -133,11 +133,14 @@
                 <div class="adf-grid-item adf-processes-list adf-list" fxFlex.gt-md="335px" [ngClass.gt-md]="{'small-pagination': true}"
                      *ngIf="processFilter && !isStartProcessMode()">
                     <adf-process-instance-list
+                        #processList
                         *ngIf="processFilter?.filter" [appId]="processFilter?.appId"
                         [processDefinitionKey]="processFilter?.filter?.processDefinitionKey"
                         [name]="processFilter?.filter?.name"
                         [presetColumn]="presetColoum"
                         [state]="processFilter?.filter?.state"
+                        [page]="processPage"
+                        [size]="paginationPageSize"
                         [sort]="processFilter?.filter?.sort"
                         [data]="dataProcesses"
                         (rowClick)="onProcessRowClick($event)"
@@ -151,15 +154,23 @@
                         </data-columns> -->
 
                     </adf-process-instance-list>
+                    <adf-pagination
+                        *ngIf="showProcessPagination"
+                        [target]="processList"
+                        (changePageSize)="onChangePageSize($event)"
+                        [supportedPageSizes]="supportedPages"
+                        #processListPagination>
+                    </adf-pagination>
                 </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)"
                         (taskClick)="onProcessDetailsTaskClick($event)">
                     </adf-process-instance-details>
-                    <hr>
+                    <mat-divider></mat-divider>
                     <div *ngIf="currentProcessInstanceId">
                         {{'PS-TAB.PROCESS-AUDIT-LOG' | translate}}
                         <button adf-process-audit
@@ -170,7 +181,7 @@
                                 (error)="onAuditError($event)">
                             <mat-icon>assignment_ind</mat-icon>
                         </button>
-                        <hr>
+                        <mat-divider></mat-divider>
                     </div>
                     <mat-card>
                         <mat-card-content>
@@ -181,6 +192,7 @@
                 <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"
@@ -196,7 +208,7 @@
         <div class="adf-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
             <div class="adf-grid-item adf-reports-menu" fxFlex.gt-md="300px">
                 <span><h5>Report List</h5></span>
-                <hr>
+                <mat-divider></mat-divider>
                 <analytics-report-list
                     [appId]="appId"
                     [selectFirst]="selectFirstReport"
@@ -221,12 +233,3 @@
         </div>
     </mat-tab>
 </mat-tab-group>
-
-<div *ngIf="fileShowed">
-    <adf-viewer
-        [(showViewer)]="fileShowed"
-        [blobFile]="content"
-        [displayName]="contentName"
-        [overlayMode]="true">
-    </adf-viewer>
-</div>

demo-shell/src/app/components/process-service/process-service.component.scss

@@ -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;
             }
         }
     }

demo-shell/src/app/components/process-service/process-service.component.ts

@@ -24,13 +24,15 @@ import {
     OnDestroy,
     OnInit,
     ViewChild,
-    ViewEncapsulation
+    ViewEncapsulation,
+    EventEmitter,
+    Output
 } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { Pagination, ProcessInstanceFilterRepresentation } from 'alfresco-js-api';
+import { ProcessInstanceFilterRepresentation, Pagination } from 'alfresco-js-api';
 import {
     FORM_FIELD_VALIDATORS, FormEvent, FormFieldEvent, FormRenderingService, FormService,
-    DynamicTableRow, ValidateDynamicTableRowEvent, AppConfigService
+    DynamicTableRow, ValidateDynamicTableRowEvent, AppConfigService, PaginationComponent, UserPreferenceValues
 } from '@alfresco/adf-core';
 
 import { AnalyticsReportListComponent } from '@alfresco/adf-insights';
@@ -58,9 +60,10 @@ import {
     ObjectDataRow,
     ObjectDataTableAdapter
 } from '@alfresco/adf-core';
-import { Subscription } from 'rxjs/Rx';
+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';
 
 const currentProcessIdNew = '__NEW__';
 const currentTaskIdNew = '__NEW__';
@@ -73,52 +76,54 @@ const currentTaskIdNew = '__NEW__';
 })
 export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit {
 
-    @ViewChild(TaskFiltersComponent)
+    @ViewChild('activitifilter')
     activitifilter: TaskFiltersComponent;
 
-    @ViewChild(TaskListComponent)
+    @ViewChild('processListPagination')
+    processListPagination: PaginationComponent;
+
+    @ViewChild('taskListPagination')
+    taskListPagination: PaginationComponent;
+
+    @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;
 
-    fileShowed = false;
+    @Output()
+    changePageSize: EventEmitter<Pagination> = new EventEmitter();
+
     selectFirstReport = false;
 
     private tabs = { tasks: 0, processes: 1, reports: 2 };
 
-    content: Blob;
-    contentName: string;
-
     layoutType: string;
     currentTaskId: string;
     currentProcessInstanceId: string;
 
     taskSchemaColumns: any[] = [];
-    taskPagination: Pagination = {
-        skipCount: 0,
-        maxItems: 10,
-        totalItems: 0
-    };
     taskPage = 0;
+    processPage = 0;
+    paginationPageSize = 0;
     processSchemaColumns: any[] = [];
 
     supportedPages: number[];
@@ -139,6 +144,7 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
     dataTasks: ObjectDataTableAdapter;
     dataProcesses: ObjectDataTableAdapter;
     presetColoum = 'default';
+    showProcessPagination = false;
 
     fieldValidators = [
         ...FORM_FIELD_VALIDATORS,
@@ -152,13 +158,13 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
                 private apiService: AlfrescoApiService,
                 private logService: LogService,
                 private appConfig: AppConfigService,
+                private preview: PreviewService,
                 formRenderingService: FormRenderingService,
                 formService: FormService,
                 private preferenceService: UserPreferencesService) {
         this.dataTasks = new ObjectDataTableAdapter();
         this.dataTasks.setSorting(new DataSorting('created', 'desc'));
-        this.supportedPages = this.preferenceService.getDifferentPageSizes();
-        this.taskPagination.maxItems = this.preferenceService.paginationSize;
+
 
         this.defaultProcessName = this.appConfig.get<string>('adf-start-process.name');
         this.defaultProcessDefinitionName = this.appConfig.get<string>('adf-start-process.processDefinitionName');
@@ -177,6 +183,10 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
             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;
@@ -197,54 +207,7 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
         */
     }
 
-    onPrevPage(pagination: Pagination): void {
-        this.taskPagination.skipCount = pagination.skipCount;
-        this.taskPage--;
-    }
-
-    onNextPage(pagination: Pagination): void {
-        this.taskPagination.skipCount = pagination.skipCount;
-        this.taskPage++;
-    }
-
-    onChangePageSize(pagination: Pagination): void {
-        const { skipCount, maxItems } = pagination;
-        this.taskPage = this.currentPage(skipCount, maxItems);
-        this.taskPagination.maxItems = maxItems;
-        this.taskPagination.skipCount = skipCount;
-        this.preferenceService.paginationSize = maxItems;
-    }
-
-    onChangePageNumber(pagination: Pagination): void {
-        const { maxItems, skipCount } = pagination;
-        this.taskPage = this.currentPage(skipCount, maxItems);
-        this.taskPagination.maxItems = maxItems;
-        this.taskPagination.skipCount = skipCount;
-    }
-
-    currentPage(skipCount: number, maxItems: number): number {
-        return (skipCount && maxItems) ? Math.floor(skipCount / maxItems) : 0;
-    }
-
     ngOnInit() {
-        this.taskListService.tasksList$.subscribe(
-            (tasks) => {
-                this.taskPagination = {
-                    count: tasks.data.length,
-                    maxItems: this.taskPagination.maxItems,
-                    skipCount: this.taskPagination.skipCount,
-                    totalItems: tasks.total
-                };
-                this.logService.log({
-                    count: tasks.data.length,
-                    maxItems: this.taskPagination.maxItems,
-                    skipCount: this.taskPagination.skipCount,
-                    totalItems: tasks.total
-                });
-            }, (err) => {
-                this.logService.log('err' + err);
-            });
-
         if (this.router.url.includes('processes')) {
             this.activeTab = this.tabs.processes;
         }
@@ -260,6 +223,7 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
             this.currentProcessInstanceId = null;
         });
         this.layoutType = AppsListComponent.LAYOUT_GRID;
+        this.supportedPages = this.preferenceService.getDefaultPageSizes();
     }
 
     ngOnDestroy() {
@@ -269,6 +233,21 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
 
     onTaskFilterClick(filter: FilterRepresentationModel): void {
         this.applyTaskFilter(filter);
+        this.resetTaskPaginationPage();
+    }
+
+    resetTaskPaginationPage() {
+        this.taskPage = 0;
+    }
+
+    onTabChange(event: any): void {
+        this.showProcessPagination = event.index === 1;
+        this.paginationPageSize = this.preferenceService.paginationSize;
+    }
+
+    onChangePageSize(event: Pagination): void {
+        this.preferenceService.paginationSize = event.maxItems;
+        this.changePageSize.emit(event);
     }
 
     onReportClick(event: any): void {
@@ -302,6 +281,11 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
 
     onProcessFilterClick(event: ProcessInstanceFilterRepresentation): void {
         this.processFilter = event;
+        this.resetProcessPaginationPage();
+    }
+
+    resetProcessPaginationPage() {
+        this.processPage = 0;
     }
 
     onSuccessProcessFilterList(event: ProcessInstanceFilterRepresentation[]): void {
@@ -309,6 +293,7 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
     }
 
     onSuccessProcessList(event: any): void {
+        this.showProcessPagination = true;
         this.currentProcessInstanceId = this.processList.getCurrentId();
     }
 
@@ -356,6 +341,7 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
     }
 
     onStartProcessInstance(instance: ProcessInstance): void {
+        this.showProcessPagination = false;
         this.currentProcessInstanceId = instance.id;
         this.activitiStartProcess.reset();
         this.activitiprocessfilter.selectRunningFilter();
@@ -381,24 +367,23 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
 
     onFormCompleted(form): void {
         this.currentTaskId = null;
-        this.taskPagination.totalItems--;
-        const { skipCount, maxItems, totalItems } = this.taskPagination;
-        if (totalItems > 0 && (skipCount >= totalItems)) {
-            this.taskPagination.skipCount -= maxItems;
-        }
-        this.taskPage = this.currentPage(this.taskPagination.skipCount, maxItems);
+        this.taskPage = this.taskListPagination.current - 1;
         if (this.taskList) {
             this.taskList.reload();
+        } else {
+            this.navigateToProcess();
         }
         if (this.processList) {
             this.processList.reload();
         }
     }
 
+    navigateToProcess(): void {
+        this.router.navigate([`/activiti/apps/${this.appId}/processes/`]);
+    }
+
     onContentClick(content: any): void {
-        this.fileShowed = true;
-        this.content = content.contentBlob;
-        this.contentName = content.name;
+        this.preview.showBlob(content.name, content.contentBlob);
     }
 
     onAuditClick(event: any) {

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

@@ -33,12 +33,3 @@
 
     </div>
 </div>
-
-<div *ngIf="fileShowed">
-    <adf-viewer
-        [(showViewer)]="fileShowed"
-        [blobFile]="content"
-        [displayName]="contentName"
-        [overlayMode]="true">
-    </adf-viewer>
-</div>

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

@@ -17,33 +17,40 @@
 
 import { Component, Input, OnChanges, OnInit, ViewChild } 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';
+
+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 {
 
-    @ViewChild(TaskAttachmentListComponent)
+    @ViewChild('taskAttachList')
     taskAttachList: TaskAttachmentListComponent;
 
     @Input()
     taskId: string;
 
-    fileShowed = false;
-    content: Blob;
-    contentName: string;
-
     taskDetails: any;
 
-    constructor(private uploadService: UploadService, private activitiTaskList: TaskListService) {
-    }
+    constructor(
+        private uploadService: UploadService,
+        private activitiTaskList: TaskListService,
+        private preview: PreviewService) {}
 
     ngOnInit() {
         this.uploadService.fileUploadComplete.subscribe(value => this.onFileUploadComplete(value.data));
@@ -63,9 +70,7 @@ export class TaskAttachmentsComponent implements OnInit, OnChanges {
     }
 
     onAttachmentClick(content: any): void {
-        this.fileShowed = true;
-        this.content = content.contentBlob;
-        this.contentName = content.name;
+        this.preview.showBlob(content.name, content.contentBlob);
     }
 
     isCompletedTask(): boolean {

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

@@ -1,4 +1,7 @@
 <adf-search-control [highlight]="true"
     (optionClicked)="onItemClicked($event)"
     (submit)="onSearchSubmit($event)">
+    <!-- <adf-empty-search-result>
+        <span>I don't want to show you this result</span>
+    </adf-empty-search-result> -->
 </adf-search-control>

demo-shell/src/app/components/search/search-config-test.service.ts

@@ -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

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

@@ -31,7 +31,7 @@
                 </mat-card-content>
             </mat-card>
             <mat-card class="example-card" id="search_no_result" *ngIf="data?.list?.entries.length === 0">
-                <p mat-line class="adf-search-fixed-text">{{ 'SEARCH.RESULTS.NONE' | translate:{searchTerm: searchTerm} }}</p>
+                <p mat-line class="adf-search-fixed-text">{{ 'SEARCH.RESULTS.NONE' | translate:{searchTerm: searchedWord} }}</p>
             </mat-card>
         </ng-template>
       </adf-search>

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

@@ -1,3 +1,4 @@
+
 <adf-search [searchTerm]="searchedWord"
             [maxResults]="maxItems"
             [skipResults]="skipCount"
@@ -5,15 +6,25 @@
             #search>
 </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">
+        <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>
+</div>

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

@@ -1,3 +1,21 @@
+.adf-search-results {
+    display: flex;
+    margin-left: 5px;
+
+    .adf-search-settings {
+        width: 260px;
+        border: 1px solid #eee;
+    }
+
+    &__facets {
+        margin: 5px;
+    }
+
+    &__content {
+        flex: 1;
+    }
+}
+
 div.search-results-container {
     padding: 0 20px 20px 20px;
 }

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

@@ -18,7 +18,7 @@
 import { Component, OnInit, Optional, ViewChild } 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 { SearchComponent, SearchQueryBuilderService } from '@alfresco/adf-content-services';
 import { UserPreferencesService } from '@alfresco/adf-core';
 
 @Component({
@@ -40,14 +40,21 @@ export class SearchResultComponent implements OnInit {
 
     constructor(public router: Router,
                 private preferences: UserPreferencesService,
+                private queryBuilder: SearchQueryBuilderService,
                 @Optional() private route: ActivatedRoute) {
         this.maxItems = this.preferences.paginationSize;
+        queryBuilder.paging = {
+            maxItems: this.maxItems,
+            skipCount: 0
+        };
     }
 
     ngOnInit() {
         if (this.route) {
             this.route.params.forEach((params: Params) => {
                 this.searchedWord = params.hasOwnProperty(this.queryParamName) ? params[this.queryParamName] : null;
+                this.queryBuilder.queryFragments['queryName'] = `cm:name:'${this.searchedWord}'`;
+                this.queryBuilder.update();
             });
         }
         this.maxItems = this.preferences.paginationSize;
@@ -59,8 +66,14 @@ export class SearchResultComponent implements OnInit {
     }
 
     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) {

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

@@ -28,6 +28,6 @@ export class SettingsComponent {
     }
 
     onError(error: string) {
-        this.logService.log(error)
+        this.logService.log(error);
     }
 }

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

@@ -24,5 +24,5 @@ import { Component } from '@angular/core';
 })
 export class TagComponent {
 
-    nodeId = '74cd8a96-8a21-47e5-9b3b-a1b3e296787d';
+    nodeId = '';
 }

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

@@ -1,9 +1,9 @@
-<button mat-icon-button [mat-menu-trigger-for]="themeMenu" matTooltip="Select a theme!">
+<button data-automation-id="theme menu" mat-icon-button [mat-menu-trigger-for]="themeMenu" matTooltip="Select a theme!">
     <mat-icon>format_color_fill</mat-icon>
 </button>
 
 <mat-menu class="docs-theme-picker-menu" #themeMenu="matMenu" x-position="before">
-    <button *ngFor="let theme of themes"  mat-menu-item (click)="installTheme(theme)" >
+    <button *ngFor="let theme of themes" [attr.data-automation-id]="theme.name" mat-menu-item (click)="installTheme(theme)" >
         <mat-icon mat-list-icon [matTooltip]="theme.name" class="docs-theme-chosen-icon" [style.color]="theme.accent"
                  [style.background]="theme.primary"
                  *ngIf="currentTheme === theme">check_circle

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

@@ -0,0 +1,99 @@
+<div class="inner-layout">
+    <div class="inner-layout__header">
+        <adf-breadcrumb [root]="'APP_LAYOUT.TRASHCAN' | translate">
+        </adf-breadcrumb>
+
+        <adf-toolbar class="inline">
+            <button
+                mat-icon-button
+                [adf-delete]="documentList.selection"
+                (delete)="documentList.reload()"
+                [permanent]="true"
+                *ngIf="documentList.selection.length"
+                title="{{ 'TRASHCAN.ACTIONS.DELETE_PERMANENT' | translate }}">
+                <mat-icon>delete_forever</mat-icon>
+            </button>
+
+            <button
+                mat-icon-button
+                (selection-node-restored)="refresh()"
+                (restore)="documentList.reload()"
+                [adf-restore]="documentList.selection"
+                *ngIf="documentList.selection.length"
+                title="{{ 'TRASHCAN.ACTIONS.RESTORE' | translate }}">
+                <mat-icon>restore</mat-icon>
+            </button>
+        </adf-toolbar>
+    </div>
+
+    <div class="inner-layout__content">
+
+        <adf-document-list #documentList
+                           [attr.class]="documentList.isEmpty() ? 'empty-list' : ''"
+                           currentFolderId="-trashcan-"
+                           selectionMode="multiple"
+                           [multiselect]="true"
+                           [navigate]="false"
+                           locationFormat="/files"
+                           [sorting]="[ 'archivedAt', 'desc' ]"
+                           [contextMenuActions]="true"
+                           [contentActions]="false">
+
+            <empty-folder-content>
+                <ng-template>
+                    <div class="empty-list__block">
+                        <mat-icon>delete</mat-icon>
+                        <p class="empty-list__title">{{ 'TRASHCAN.EMPTY_STATE.TITLE' | translate }}</p>
+                        <p class="empty-list__text">{{ 'TRASHCAN.EMPTY_STATE.FIRST_TEXT' | translate }}</p>
+                        <p class="empty-list__text">{{ 'TRASHCAN.EMPTY_STATE.SECOND_TEXT' | translate }}</p>
+                    </div>
+                </ng-template>
+            </empty-folder-content>
+
+            <data-columns>
+
+                <data-column
+                    key="$thumbnail"
+                    type="image"
+                    [sortable]="false"
+                    class="image-table-cell">
+                </data-column>
+
+                <data-column
+                    class="adf-data-table-cell--ellipsis__name"
+                    key="name"
+                    title="DOCUMENT_LIST.COLUMNS.DISPLAY_NAME">
+                    <ng-template let-value="value" let-context>
+                        <span class="adf-datatable-cell" title="{{ context?.row?.obj | adfNodeNameTooltip }}">{{ value }}</span>
+                    </ng-template>
+                </data-column>
+
+                <data-column
+                    key="content.sizeInBytes"
+                    title="DOCUMENT_LIST.COLUMNS.SIZE"
+                    type="fileSize">
+                </data-column>
+
+                <data-column
+                    key="archivedAt"
+                    title="DOCUMENT_LIST.COLUMNS.DELETED_ON">
+                    <ng-template let-value="value">
+                        <span title="{{ value | date:'medium' }}">{{ value | adfTimeAgo }}</span>
+                    </ng-template>
+                </data-column>
+
+                <data-column
+                    class="adf-data-table-cell--ellipsis"
+                    key="archivedByUser.displayName"
+                    title="DOCUMENT_LIST.COLUMNS.DELETED_BY">
+                </data-column>
+
+            </data-columns>
+
+        </adf-document-list>
+        <adf-pagination [ngClass]="{ 'no-border' : documentList.isEmpty()}"
+                        [supportedPageSizes]="supportedPages"
+                        [target]="documentList">
+        </adf-pagination>
+    </div>
+</div>

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

@@ -0,0 +1,53 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2017 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Component, ViewChild } from '@angular/core';
+import { DocumentListComponent } from '@alfresco/adf-content-services';
+import { UserPreferencesService, UserPreferenceValues } from '@alfresco/adf-core';
+
+@Component({
+    templateUrl: './trashcan.component.html',
+    styleUrls: ['trashcan.component.scss']
+})
+export class TrashcanComponent {
+
+    @ViewChild('documentList')
+    documentList: DocumentListComponent;
+
+    supportedPages = [];
+
+    constructor(private preference: UserPreferencesService) {
+        this.preference.select(UserPreferenceValues.SupportedPageSizes)
+        .subscribe((pages) => {
+            this.supportedPages = pages;
+        });
+    }
+
+    refresh() {
+        this.documentList.reload();
+        this.documentList.resetSelection();
+    }
+
+}

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

@@ -26,7 +26,9 @@ import {
     MatCardModule,
     MatListModule,
     MatMenuModule,
-    MatToolbarModule
+    MatToolbarModule,
+    MatSnackBarModule,
+    MatExpansionModule
 } from '@angular/material';
 
 const MATERIAL_MODULES = [
@@ -39,7 +41,9 @@ const MATERIAL_MODULES = [
     MatCardModule,
     MatListModule,
     MatMenuModule,
-    MatToolbarModule
+    MatToolbarModule,
+    MatSnackBarModule,
+    MatExpansionModule
 ];
 
 @NgModule({

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

@@ -27,11 +27,11 @@ export class DebugAppConfigService extends AppConfigService {
     }
 
     /** @override */
-    get<T>(key: string): T {
+    get<T>(key: string, defaultValue?: T): T {
         if (key === 'ecmHost' || key === 'bpmHost') {
             return <T> (<any> this.storage.getItem(key) || super.get<T>(key));
         }
-        return super.get<T>(key);
+        return super.get<T>(key, defaultValue);
     }
 
 }

demo-shell/src/app/services/preview.service.ts

@@ -16,21 +16,23 @@
  */
 
 import { Injectable } from '@angular/core';
-import { AlfrescoApiService } from '@alfresco/adf-core';
-import { forkJoin } from 'rxjs/observable/forkJoin';
-import { Observable } from 'rxjs/Observable';
-import { defer } from 'rxjs/observable/defer';
+import { Router } from '@angular/router';
 
 @Injectable()
-export class PropertyDescriptorLoaderService {
+export class PreviewService {
 
-    constructor(private alfrescoApiService: AlfrescoApiService) {}
+    public content: Blob = null;
+    public name: string = null;
 
-    load(aspects: string[]): Observable<any> {
-        const aspectFetchStreams = aspects
-            .map(aspectName => aspectName.replace(':', '_'))
-            .map(aspectName => defer( () => this.alfrescoApiService.classesApi.getClass(aspectName)) );
+    constructor(private router: Router) {}
 
-        return forkJoin(aspectFetchStreams);
+    showResource(resourceId): void {
+        this.router.navigate([{ outlets: { overlay: ['files', resourceId, 'view'] } }]);
+    }
+
+    showBlob(name: string, content: Blob): void {
+        this.name = name;
+        this.content = content;
+        this.router.navigate([{ outlets: { overlay: ['preview', 'blob'] } }]);
     }
 }

demo-shell/src/custom-style-dev.scss

@@ -1,4 +1,8 @@
 @import './app/components/app-layout/app-layout.component.scss';
+@import './app/components/files/files.component.scss';
+@import './app/components/login/login.component.scss';
+@import './app/components/process-service/process-service.component.scss';
+
 
 @import 'content-services/styles/index';
 @import 'process-services/styles/index';
@@ -16,6 +20,10 @@ $theme:   mat-light-theme($primary, $accent, $warn);
 
 @include angular-material-theme($theme);
 @include adf-app-layout-theme($theme);
+@include adf-file-component-theme($theme);
+@include adf-login-component-theme($theme);
+@include adf-process-service-component-theme($theme);
+
 
 @include adf-content-services-theme($theme);
 @include adf-process-services-theme($theme);

demo-shell/src/custom-style.scss

@@ -1,4 +1,8 @@
 @import './app/components/app-layout/app-layout.component.scss';
+@import './app/components/files/files.component.scss';
+@import './app/components/login/login.component.scss';
+@import './app/components/process-service/process-service.component.scss';
+
 
 @import '~@alfresco/adf-content-services/theming';
 @import '~@alfresco/adf-process-services/theming';
@@ -16,6 +20,10 @@ $theme:   mat-light-theme($primary, $accent, $warn);
 
 @include angular-material-theme($theme);
 @include adf-app-layout-theme($theme);
+@include adf-file-component-theme($theme);
+@include adf-login-component-theme($theme);
+@include adf-process-service-component-theme($theme);
+
 
 @include adf-content-services-theme($theme);
 @include adf-process-services-theme($theme);

demo-shell/src/index.html

@@ -17,7 +17,7 @@
 
       .loader-container {
           display: flex;
-          flex-direction: row;
+          flex-direction: column;
           height:100%;
 
           align-items: center;
@@ -29,16 +29,84 @@
           max-width:300px;
       }
 
+      .loader-spinner {
+          max-height:300px;
+          max-width:300px;
+      }
+
       .loader-text{
           white-space: nowrap;
           text-align: center;
           position: relative;
       }
+
+      .loader {
+          position: absolute;
+          width: 100px;
+          height: 100px;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+      }
+
+      .circular {
+          animation: rotate 2s linear infinite;
+          height: 100px;
+          position: relative;
+          width: 100px;
+      }
+
+      .path {
+          stroke-dasharray: 1,200;
+          stroke-dashoffset: 0;
+          stroke: #B6463A;
+          animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
+          stroke-linecap: round;
+      }
+
+      @keyframes rotate {
+          100% {
+              transform: rotate(360deg);
+          }
+      }
+      @keyframes dash {
+          0% {
+              stroke-dasharray: 1,200;
+              stroke-dashoffset: 0;
+          }
+          50% {
+              stroke-dasharray: 89,200;
+              stroke-dashoffset: -35;
+          }
+          100% {
+              stroke-dasharray: 89,200;
+              stroke-dashoffset: -124;
+          }
+      }
+      @keyframes color {
+          100%, 0% {
+              stroke: #d62d20;
+          }
+          40% {
+              stroke: #0057e7;
+          }
+          66% {
+              stroke: #008744;
+          }
+          80%, 90% {
+              stroke: #ffa700;
+          }
+      }
   </style>
 </head>
 <body class="adf-background-color">
 <app-root>
   <div id="loader-container" class="loader-container">
+      <div class="loader-spinner">
+          <svg class="circular">
+            <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"></circle>
+          </svg>
+      </div>
     <div class="loader-item">
       <div id="loader-text" class="loader-text">Loading Demo Shell..</div>
     </div>

demo-shell/src/main.ts

@@ -7,7 +7,7 @@ import 'hammerjs';
 import 'chart.js';
 import 'ng2-charts';
 
-import pdfjsLib from 'pdfjs-dist';
+import * as pdfjsLib from 'pdfjs-dist';
 pdfjsLib.PDFJS.workerSrc = 'pdf.worker.js';
 
 if (environment.production) {

demo-shell/src/polyfills.ts

@@ -60,10 +60,15 @@ import 'zone.js/dist/zone';  // Included with Angular CLI.
  * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
  */
 import 'intl';  // Run `npm install --save intl`.
+/**
+ * Need to import at least one locale-data with intl.
+ */
+import 'intl/locale-data/jsonp/en';
 
 /**
  * Support custom event in IE11
  *
  * */
-import 'custom-event-polyfill/custom-event-polyfill'  // Run `npm install --save custom-event-polyfill`.
+
+import 'custom-event-polyfill/custom-event-polyfill'; // Run `npm install --save custom-event-polyfill`.
 

demo-shell/src/tsconfig.spec.json

@@ -2,19 +2,41 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/spec",
-    "module": "commonjs",
-    "target": "es5",
-    "baseUrl": "",
+    "module": "es2015",
+    "rootDir": "..",
+    "baseUrl": ".",
+    "skipLibCheck": false,
     "types": [
       "jasmine",
       "node"
-    ]
+    ],
+    "paths": {
+      "alfresco-js-api": [
+        "../node_modules/alfresco-js-api/dist/alfresco-js-api.js"
+      ],
+      "rxjs/*": [
+        "../node_modules/rxjs/*"
+      ],
+      "@angular/*": [
+        "../node_modules/@angular/*"
+      ],
+      "@alfresco/adf-core": [
+        "../../lib/core"
+      ],
+      "@alfresco/adf-content-services": [
+        "../../lib/content-services"
+      ],
+      "@alfresco/adf-process-services": [
+        "../../lib/process-services"
+      ],
+      "@alfresco/adf-insights": [
+        "../../lib/insights"
+      ]
+    }
   },
-  "files": [
-    "test.ts"
+  "exclude": [
   ],
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": false
+  }
 }