1.9.0 (#2451)

* remove lock files

* [ADF-1516] added parsing on date check (#2301)

* Remove MDL from demo shell (#2302)

* [ADF-1492] Document List - Export ContentNodeSelectorComponent and ContentNodeSelectorComponentData (#2297)

* fix wrapped field resolving (#2305)

check for the type property before resolving a wrapped field (addresses issue with empty field objects)

* support redirection on successful login (#2306)

* new "document" widget (#2307)

* [ADF-1090] support custom dynamic table row validation (#2308)

* support custom dynamic table row validation

* test fixes

* export missing models

* allow loading layout presets from app.config (#2310)

* [ADF-1250] Remove MDL from Analytics (#2311)

* Removal of MDL dialog from report parameters

* Futher mdl removal

* Futher mdl removal

* Fixing demo shell icon position issues

* Futher mdl removal

* Futher mdl removal, tests fix

* Remove mdl leftover

* [ADF-1534] Automatic PDF rendering for unsupported types. (#2313)

* move viewer dialog to a separate folder

* make dialog take full screen size

* automatic PDF conversion

* mime type icon in the title

* [ADF-1530] correct plain text viewer resolving

* separate lightweigh pdf view for the dialog

* [ADF-1238] Removed mdl from alfresco search component (#2309)

* [ADF-1328] removed mdl from adf search

* [ADF-11328] removed mdl from search added theme style

* Fix failing tests

* Fix the last bit of stylings

* [ADF-1478] Make the pagination more responsive (#2315)

* [ADF-1444] Fix name display issue (#2317)

* fix memory leaks for pdf viewers (#2316)

* remove unused checkbox from demo shell (#2322)

* allow toggling viwer dialog toolbar elements (#2319)

* [ADF-1537] Fix check property defined (#2320)

* [ADF-1521] Form string type is not rendered (#2318)

* Fix missing string widget and task list loading

* Update tasklist.component.ts

call initStream

* avoid in app list long name are displayed under the logo. (#2323)

* remove max length attribute (#2321)

* remove unused document var

* Fix minimal responsiveness of demo app's activiti section (#2324)

* [ADF-1012] Hide delete checklist button when the checklist is in readonly mode (#2325)

* disable button to delete when the checklist is in readonly mode

* style issues

* fix test

* skipcount 0 after pagesize change (#2327)

* breadcrumb enhancements (#2328)

* [ADF-1247] Remove MDL from processlist package (#2329)

* Removing mdl stuff

* Further mdl removal

* Further mdl removal

* Removing mdl is finished

* unused label in search component

* [ADF-1547] tooltip fixes and enhancements (#2333)

* tooltip enhancements

* fix unit tests

* disable upload content for completed task (#2332)

use primary color for upload button in proccess attachment and task attachment

* doc update

* change name export module userinfo (#2334)

* [ADF-1543] Remove local copy of muli (#2335)

Use http request to load the font
Add the Muli font in all the theme
Remove the overwritten font-family not necessary

* [ADF-1544] app config file management refactoring (#2331)

* application configuration service refactoring

* fix demo shell

* remove logging to console

* [ADF-1515] Internationalization - ADF strings review (#2336)

* Update en.json

ADF-1515
Update to match Content Services terminology

* Update en.json

ADF-1515
Improvements to readability in line with docs.alfresco.com/writing-for-alfresco

* Update en.json

ADF-1515
Improvements to readability and consistency

* Update en.json

* Update en.json

ADF-1515
Fix typo

* Update en.json

ADF-1515
Updated for US spelling and consistency with docs.alfresco.com/writing-for-alfresco

* Update en.json

ADF-1515 - reduced word count

* Update en.json

ADF-1515
Readability improvements

* Update en.json

ADF-1515
Updates for readability and consistency

* Update en.json

ADF-1515
Updated for readability and consistency

* Update en.json

* Update en.json

* Update en.json

ADF-1515 - removed variables section as discussed w. Eugenio

* Update en.json

ADF-1515 - removed search label as discussed with Eugenio

* [ADF-1246] Remove mdl from Tasklist (#2339)

* Remove mdl from app list

* Remove mdl from adf-people

* Update prebuuilt styles

* Remove mdl dialog from task details

* Remove some mdl from checklist

* Further mdl removal

* Last mdl parts removed

* fix toolbar and page port view for size in small devices (#2338)

remove old alfresco and activiti prefix
fix login toggle mobile devices

* move readonly checklist from icon to button

* [ADF-1518] Update material2 beta 10 and angular 4.3.6 (#2304)

* ignore pkg lock

* update pkg json

* date picker update material beta.10

* isDateInstance moment adapter

* style and  datepicker update material2 beta 10

* update test dateitem to beta10

* regenerate style files

* use material icons web font

* fix data range material 2 beta 10

* minors cleaning

* recreate styles

* remove unused componentHandler var

* fix failing test checkbox

* [ADF-1488] reset selection on Document List data change (#2341)

* reset selection on data change

* unit tests

* fix unit tests

* [ADF-1549] Initial files for new doc format (#2342)

* [ADF-1555] add animation on show and hide of results (#2343)

* add animation on show and hide of results
make the style similar to the other material 2 menu
fix issue popup always stays on the screen
fix Search does not collapse if its input is focused

* minor code style issues

* minors fix and test fix

* fix app.config.json error in test

* update beta10 mat-menu-base method

* karma configuration all

* [ADF-1548] deprecate the usage of the "forRoot" methods in modules (#2344)

* remove CoreModule.forRoot

* remove forRoot methods

* fix form issues (lint)

* save js-api version in demo shell

* [ADF-1560] Process fields are not translated when starting a process and on process pag. (#2346)

* Detached extra curly brace in en.json.

* [ADF-1549] Added files for Core library (#2345)

* [ADF-1549] Added files for Core library

* [ADF-1549] Updated md files following checks

* [ADF-1549] Added doc files for Datatable library (#2348)

* fix people widget form component when no images are present (#2349)

* [ADF-1568] Clean polyfills (#2347)

Use msSaveOrOpenBlob in content service for save fiel in IE

* Disable the attachment component when the task/process is completed (#2351)

* [ADF-1549] Added doc files for Tasklist library (#2350)

* [ADF-1549] Added doc files for Processlist library (#2353)

* [ADF-1549] Added doc files for remaining Activiti libraries (#2354)

* Fix start task form (#2356)

* [ADF-1549] Added docs for Login, Search, Social and Tag (#2355)

* Disable drag drop parent component (#2357)

* [ADF-1549] Added docs for Upload, Userinfo, Viewer and Webscript (#2359)

* [ADF-1574] Info Drawer - Add a mechanism to know the current active tab (#2352)

* [ADF-1574] Info Drawer - Add a mechanism to know the current active tab

* Added a output event in adf-info-drawer component to get the currently active tab

* [ADF-1574] Info Drawer - Add a mechanism to know the current active tab

* Added a output event in adf-info-drawer component to get the currently active tab

* Added unit test file

* Updated info-drawer.md

* refactoring autocomplete fields form in order to use the material 2 autocomplete (#2358)

* proxy setup to fix native login dialog (for local runs) (#2363)

* [ADF-1364] Infinite scrolling for Copy & Move (#2362)

* Use infinite pagination for search also
* Fix highlight in copy & move
* Fix highlight and material menu issue
* Update documentation

* [ADF-1549] Improved formatting for doc index (#2365)

* [ADF-1549] Added undoc stoplist feature

* [ADF-1549] Better grouping of items in doc index

* [ADF-1549] Added undoc stoplist feature

* [ADF-1549] Better grouping of items in doc index

* [ADF-226] Add requeue button to task header (#2366)

* Add requeue button to task header

* Fixing typescript declaration

* [ADF-1238] Search debounce click issue fix and minor style clean (#2361)

* fix search issues no result table not shown
minor issues style button

* fix issue animation search input field debouncing toggle search

* fix test search
remove expandable probeprties

* remove test expand

* ripristinate expandable properties

* fix test

* [ADF-1584] remove primary color from user description in userinfo

* [ADF-1549] Moved docassets folder inside docs folder (#2367)

* Update package json typescript version (#2368)

* update package json typescript version

* fix test problem

* fix minor upload type bug

* improved "start:dist" script (#2369)

* Save host only when apply (#2371)

[ADF-1581] Demo shell - Improve host setting configuration check

* [ADF-1582] Revert error widget style modification (#2372)

* Revert error widget style modification

* Fix start form issues

* Fix call start form with processInstance instead of processDefinition (#2373)

* [ADF-1590] Cursor pointer is not displayed on expand/collapse Task and Process Filters (#2370)

* [ADF-1590] Cursor pointer is not displayed on expand/collapse Task and Process Filters

* Added property [cursor: pointer] in accordion-group.component.scss

* [ADF-1590] Cursor pointer is not displayed on expand/collapse Task and Process Filters

* Added property [cursor: pointer] in accordion-group.component.scss

* Added css property for expand/collapse problem on heading click

* Fix styles (#2376)

* Fix check taskList exist (#2375)

* [ADF-1585] - Fix datatable styles (#2374)

* Unify datatable hover and selection color

* Fix prebuilt styles collision

* Show missing list after starting a process (#2379)

* Fix dropdown should show the value in readonly mode (#2380)

* [ADF-1586] Added new Core doc files (#2383)

* Fix datewidget's moment issue (#2384)

* Update to comments for 508 compliance with translation (#2386)

* 508 fixes to bring the comments table into compliance. The <thead> element must be visible to users and <th> must display text that indicates what resides in the columns below.

* Updated to properly use the i18 translation

* fix minor typo: remove spaces from versions

* [ADF-1291] Attachment list is not instantly refreshed after upload (#2387)

* [ADF-1291] Attachment list after upload list is not instantly refreshed

* Implemented NgZone to ensure change detection

* [#2377 Github] Attachments control won't let you add a document you removed

* Reset the value of input after each upload so that change will be detected if the same file is selected repeatedly

* [#2377 Github] Attachments control won't let you add a document you removed

* Added test to make sure the input value is rest after upload

* [ADF-1595] Typeahead - Fetch the value from the process variables (#2388)

* Get the typeahead value from the process variables. We should not use the processDefinition to get again all the values

* Improve the dropdown widget

* Fix running process issue (#2391)

* [ADF-1608] Start Form - Improve the unit test cases. (#2390)

* * Covered more test case scenarios for start-form component

* [ADF-1608] Start Form - Improve the unit test cases.
* Refactored start-form.component.spec.ts
* Covered more test case scenarios for start-form component

* add style builder in demo shell for development purpose (#2385)

remove precompiled css theme from repository

* fix layout issues for report list (#2394)

* configurable 'supportedPageSizes' for document list (#2395)

* [ADF-1616] download zip dialog title (#2397)

* [ADF-1615] Datatable - The ellipsis class doesn't work for a custom template (#2398)

* Added ellipsis property for data-column rendered using custom html template

* [ADF-1613] logout directive (#2393)

* logout directive

* test fixes

* remove prebuilt theme

* Fix shared service design issue (#2399)

* fix build issues

* remove unused scss import

* Provide a multiselection property to select more than one row (#2389)

* [ADF-1583] Fix change detection error (the quick way) (#2396)

* Fix change detection error (the quick way)

* Fix it the second time

* raise keyboard events, improve task list keyboard handling (#2401)

* page title service (#2403)

* improved ecm auth guard (#2402)

* Fix dev build

* Fix input stylings for adf-people-search and modify existing fix for form inputs (#2405)

* 508 compliance fix for upload widget (#2406)

* 508 fixes to bring the comments table into compliance. The <thead> element must be visible to users and <th> must display text that indicates what resides in the columns below.

* Updated to properly use the i18 translation

* This is a 508 Compliance fix to add a keyup.enter, role, and tabindex to both the icon and span associated with the file upload widget. This will allow keyboard-only users the ability to tab to a file loaded with the Upload Widget and select the element using the enter key.

* [ADF-1549] Removed doc content from library README files (#2400)

* [ADF-1549] Removed doc content from library README files

* [ADF-1549] Removed doc content from library README files

* [ADF-1583] Fix change detection error (the quick way) (#2396)

* Fix change detection error (the quick way)

* Fix it the second time

* raise keyboard events, improve task list keyboard handling (#2401)

* [ADF-1549] Removed doc content from library README files

* [ADF-1549] Added doc update from Tasklist readme

* THe login component should check the minLength as default (#2407)

* Adding some responsiveness to demo shell app (#2408)

* Revert "Adding some responsiveness to demo shell app (#2408)" (#2410)

This reverts commit 6fa135faf3.

* [ADF-1623] routing integration for Viewer (#2404)

* routed viewer (demo app)

* toolbar support

* app menu component for demo shell

* navigate back button

* fix unit tests

* improve viewer type detection and rendering

* download button

* automatic pdf rendition, spinners, ui tweaks

* border for pdf pages

* scroll top support

* docs update

* info drawer placeholder

* [ADF-1632] Task Header - The default parent name value should be None (#2409)

* The default parent name should be None

* Fix trim

* add js doc

* Fix selection reset issue (#2414)

* Fix input line-height issue (#2417)

* fix closing search bar has not to trigger search (#2415)

* [ADF-1626] Fix double tabbing issue in datatable (#2416)

* Fix double tabbing issue in datatable

* Fix accessibility issue for process list

* add service suffix page title service (#2418)

* [ADF-1634] floating toolbar for PDF viewer (#2413)

* floating toolbar for PDF viewer

* use routing settings to toggle app menu

* remove dialog viewer

* remove duplicate menu

* fix error message size in login component (#2419)

* remove header duplicated webscript demo and move template in external HTML

* remove template old reference in documentation (#2421)

* remove console log (#2422)

* add presets document list in an external model (#2420)

* [ADF-1629] Fix check the visibility before render the form (#2423)

* support page picker for document list (#2424)

* [ADF-1586] Added new doc files for Document List library (#2427)

* [ADF-1611] Demo shell responsiveness (#2426)

* Reapplying the unreappliable

* Fix buggy search button

* Fix settings

* Last bit of responsive stylings

* Fix breadcrumb responsiveness (#2430)

* fix page size not being saved (#2429)

* [ADF-1640] Start form - Get the variables from the process instance API (#2425)

* Get the variables from the process instance API
/api/enterprise/process-instances/XXX
instead of
/api/enterprise/process-instances/382/variables
because the latest api returns 404 if the process is completed

* Fix unit test

* Add field id

* User info center title (#2432)

* [ADF-1586] Added doc files for Document List library (#2435)

* [ADF-1664] fix color text login for dark theme (#2433)

* fix color text login for dark theme

* fix test

* Update en.json (#2436)

A couple of very minor changes (I'll raise a Jira next time, sorry!)

* fix the menu height issue (#2438)

* Fix Form Service parseForm (#2440)

* [ADF-1636] fix issues with i18n resource composing (#2434)

* fix issues with i18n resource composing

merge resources instead of concatenating, make 'app' resource always load last

refs #2412

* unit tests

* type for style in remote env

* Change task/process on double click (#2439)

* [ADF-1674] align amount prefix widget

* fix user model process service and image loading (#2431)

* remove prebuilt-themes from npmignore

* public peopleProcessService in search component in order to use it in template

* [ADF-1676] hide fake content in the viewer (#2442)

* hide fake content in the viewer

* add missing property

* reset pagination on data source change (#2443)

* [ADF-1625] removed wrong select into typeahed widget, readded validati… (#2411)

* #ADF-1625 removed wrong select into typeahed widget, readded validation on blur

* #ADF-1625 added validator for typeahead fixed tests

* #ADF-1625 removed wrong fdescribe

* [ADF-1625] cleaned behaviour on typeahed

* [ADF-1625] fixed some selection bug on typeahed and start fixing test

* [ADF-1625] fixed typeahead test for autocomplete

* [ADF-1586] Updated Datatable docs (#2445)

* [ADF-1586] Updates to Datatable docs

* [ADF-1586] Fixed broken link in doc index page

* [ADF-1671] visibility fix use id instead of name during comparison (#2441)

* visibility fix use id instead of name during comparison

* fix tslint problems

* [ADF-1677] fix issues with paging (#2446)

* fix issues with paging

* update unit test

* make comments always editable for process (#2447)

make comments editable only when there are users involved

* change indentation task-details

* lint fix demo shell

* [ADF-1685] tasklist is not loading after logout

* pagination fixes (#2448)

* [ADF-1687] pass entire createdBy obj in user process constructor

* [ADF-1653] cleaned user suggestion when input type is an empty string (#2444)

* [ADF-1653] cleaned user suggestion when input type is an empty string

* [ADF-1653] removed wrong fdescribe

* [ADF-1653] improved behaviour of people widget

* Removed fdescribe

* [ADF-1689] fix task comment when the task is running (#2449)

* [ADF-1689] fix task comment when the task is running

* fix test

* reintroduce old name export BC clean postpone in 2.0.0

* [ADF-1688] Update value for the form field when is empty string (#2450)

* 1.9.0

* remove >>>  in favor of ::ng-deep
fix license check

.github/ISSUE_TEMPLATE.md

@@ -6,12 +6,12 @@ Please ask before on our gitter channel https://gitter.im/Alfresco/alfresco-ng2-
 -->
 
 **Type of issue:**  (check with "[x]")
-```
-- [ ] New feature request
-- [ ] Bug  
-- [ ] Support request
-- [ ] Documentation
-```
+
+> - [ ] New feature request
+> - [ ] Bug  
+> - [ ] Support request
+> - [ ] Documentation
+
 **Current behaviour:**
 <!-- Describe the current behaviour. -->
 

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,24 +1,24 @@
 **Please check if the PR fulfills these requirements**
-```
-[ ] The commit message follows our [guidelines](https://github.com/Alfresco/alfresco-ng2-components/wiki/Commit-format)
-[ ] Tests for the changes have been added (for bug fixes / features)
-[ ] Docs have been added / updated (for bug fixes / features)
-```
+
+> - [ ] The commit message follows our [guidelines](https://github.com/Alfresco/alfresco-ng2-components/wiki/Commit-format)
+> - [ ] Tests for the changes have been added (for bug fixes / features)
+> - [ ] Docs have been added / updated (for bug fixes / features)
+
 <!--
  Before submitting your PR, please check that your code follows our contribution guidelines:
  https://github.com/Alfresco/alfresco-ng2-components/wiki/Code-contribution-acceptance-criteria
  -->
 
 **What kind of change does this PR introduce?** (check one with "x")
-```
-[ ] Bugfix
-[ ] Feature
-[ ] Code style update (formatting, local variables)
-[ ] Refactoring (no functional changes, no api changes)
-[ ] Build related changes
-[ ] Documentation
-[ ] Other... Please describe:
-```
+
+> - [ ] Bugfix
+> - [ ] Feature
+> - [ ] Code style update (formatting, local variables)
+> - [ ] Refactoring (no functional changes, no api changes)
+> - [ ] Build related changes
+> - [ ] Documentation
+> - [ ] Other... Please describe:
+
 
 **What is the current behaviour?** (You can also link to an open issue here)
 
@@ -29,10 +29,10 @@
 
 
 **Does this PR introduce a breaking change?** (check one with "x")
-```
-[ ] Yes
-[ ] No
-```
+
+> - [ ] Yes
+> - [ ] No
+
 
 If this PR contains a breaking change, please describe the impact and migration path for existing applications: ...
 

.gitignore

@@ -3,6 +3,7 @@ node_modules
 workspace.xml
 .idea/
 dist/
+ng2-components/coverage/
 !systemjs.config.js
 demo-shell-ng2/app/components/router/
 ng2-components/ng2-alfresco-userinfo-old/demo/src/app/
@@ -10,3 +11,11 @@ ng2-components/ng2-alfresco-userinfo-old/src/services/bpm-user.service.spec.ts
 ng2-components/ng2-alfresco-userinfo-old/src/services/ecm-user.service.spec.ts
 src/environments/
 /ng2-components/ng2-example-webpack/
+/ng2-components/config/coverage/
+*.npmrc
+/demo-shell-ng2/ng2-components/
+.happypack/
+.happypack/
+.history
+package-lock.*
+/ng2-components/ng2-alfresco-core/prebuilt-themes/

.travis.yml

@@ -2,7 +2,7 @@ language: node_js
 dist: trusty
 sudo: false
 node_js:
-  - "5"
+  - "8"
 
 before_install:
   - "export DISPLAY=:99.0"
@@ -10,48 +10,59 @@ before_install:
 
 env:
   matrix:
-    - MODULE=ng2-alfresco-core
-    - MODULE=ng2-alfresco-datatable
-    - MODULE=ng2-alfresco-documentlist
-    - MODULE=ng2-alfresco-login
-    - MODULE=ng2-alfresco-search
-    - MODULE=ng2-alfresco-upload
-    - MODULE=ng2-alfresco-viewer
-    - MODULE=ng2-alfresco-webscript
-    - MODULE=ng2-alfresco-tag
-    - MODULE=ng2-activiti-form
-    - MODULE=ng2-activiti-tasklist
-    - MODULE=ng2-activiti-processlist
-    - MODULE=ng2-activiti-diagrams
-    - MODULE=ng2-activiti-analytics
-    - MODULE=ng2-alfresco-userinfo
+    - MODULE=ng2-components-alfresco
+    - MODULE=ng2-components-activiti
+    - MODULE=ng2-demo-shell
 
-before_script:
-  - if ([ "$MODULE" != "ng2-alfresco-core" ]); then
-        (cd ng2-components/ng2-alfresco-core; if [ ! -d "bundles" ]; then npm install && npm run  build && npm link; fi);
-    fi
-  - if ([ "$MODULE" == "ng2-alfresco-documentlist" ] || [ "$MODULE" == "ng2-alfresco-webscript" ] || [ "$MODULE" == "ng2-activiti-processlist" ] || [ "$MODULE" == "ng2-activiti-tasklist" ]); then
-        (cd ng2-components/ng2-alfresco-datatable; npm link ng2-alfresco-core; if [ ! -d "bundles" ]; then npm install && npm run  build && npm link; fi);
-    fi
-  - if ([ "$MODULE" == "ng2-activiti-tasklist" ] || [ "$MODULE" == "ng2-activiti-processlist" ]); then
-        (cd ng2-components/ng2-alfresco-datatable; npm link ng2-alfresco-core; if [ ! -d "bundles" ]; then npm install && npm run  build && npm link; fi);
-        (cd ng2-components/ng2-activiti-form; npm link ng2-alfresco-core; if [ ! -d "bundles" ]; then npm install && npm run  build && npm link; fi);
-    fi
-  - if ([ "$MODULE" == "ng2-activiti-processlist" ]); then
-        (cd ng2-components/ng2-alfresco-datatable; npm link ng2-alfresco-core; if [ ! -d "bundles" ]; then npm install && npm run  build && npm link; fi);
-        (cd ng2-components/ng2-activiti-form; npm link ng2-alfresco-core; if [ ! -d "bundles" ]; then npm install && npm run  build && npm link; fi);
-        (cd ng2-components/ng2-activiti-tasklist; npm link ng2-alfresco-core; npm link ng2-alfresco-datatable; npm link ng2-activiti-form; if [ ! -d "bundles" ]; then npm install && npm run  build && npm link; fi);
-    fi
-  - if ([ "$MODULE" == "ng2-activiti-analytics" ]); then
-        (cd ng2-components/ng2-activiti-diagrams; npm link ng2-alfresco-core; if [ ! -d "bundles" ]; then npm install && npm run  build && npm link; fi);
-    fi
-  - if ([ "$MODULE" == "ng2-alfresco-search" ]); then
-        (cd ng2-components/ng2-alfresco-datatable; npm link ng2-alfresco-core; if [ ! -d "bundles" ]; then npm install && npm run  build && npm link; fi);
-        (cd ng2-components/ng2-alfresco-documentlist; npm link ng2-alfresco-core; npm link ng2-alfresco-datatable; if [ ! -d "bundles" ]; then npm install && npm run  build && npm link; fi);
-    fi
-  - cd ng2-components/$MODULE;
-script: npm install && npm run travis && npm run test
-# Send coverage data to Coveralls
+install:
+    - if ([ "$MODULE" == "ng2-components-alfresco" -o  "$MODULE" == "ng2-components-activiti" ]); then
+        if ([ "$TRAVIS_BRANCH" = "master" ]); then
+            (./scripts/npm-build-all.sh  || exit 1;);
+        else
+            (./scripts/npm-build-all.sh  -vjsapi alpha || exit 1;);
+        fi
+      fi
+
+script:
+    - if ([ "$MODULE" == "ng2-components-activiti" ]); then
+            (./scripts/npm-build-all.sh -si -sb -t "ng2-activiti*" || exit 1;);
+      fi
+    - if ([ "$MODULE" == "ng2-components-alfresco" ]); then
+            (./scripts/npm-build-all.sh -si -sb -t "ng2-alfresco*" || exit 1;);
+      fi
+    - if ([ "$MODULE" == "ng2-demo-shell" ]); then
+       if ([ "$TRAVIS_BRANCH" = "master" ]); then
+            (./scripts/start.sh -t -ss || exit 1;);
+       else
+            (./scripts/start.sh -dev -t -ss -vjsapi alpha || exit 1;);
+       fi
+      fi
+
+# jobs:
+#   include:
+#     - stage: Publish alpha to NPM
+#       before_install: skip
+#       install: skip
+#       script: skip
+#       deploy:
+#         provider: script
+#         script: (./scripts/update-version.sh -v $(./scripts/next_version.sh)-$(git rev-parse HEAD) -vj $(npm view alfresco-js-api@alpha version) -gnu) && (./scripts/npm-publish.sh -r $NPM_REGISTRY_ADDRESS -token $NPM_REGISTRY_TOKEN -t alpha --sleep 20 || exit 1;);
+#         on:
+#           branch: development
+#         skip_cleanup: true
+#     - stage: Publish beta to NPM
+#       before_install: skip
+#       install: skip
+#       script: skip
+#       deploy:
+#         provider: script
+#         script: (./scripts/update-version.sh -v $TRAVIS_TAG -gnu) && (./scripts/npm-publish.sh -r $NPM_REGISTRY_ADDRESS -token $NPM_REGISTRY_TOKEN -t beta --sleep 20 || exit 1;);
+#         on:
+#           tags: true
+#         skip_cleanup: true
+
+
+# Send coverage data to codecov
 after_success:
   bash <(curl -s https://codecov.io/bash) -X gcov
 
@@ -60,18 +71,4 @@ cache:
   - ./node_modules/material-design-lite
   - ./node_modules/material-design-icons
   - demo-shell-ng2/node_modules
-  - ng2-components/ng2-activiti-form/node_modules
-  - ng2-components/ng2-activiti-processlist/node_modules
-  - ng2-components/ng2-activiti-tasklist/node_modules
-  - ng2-components/ng2-alfresco-core/node_modules
-  - ng2-components/ng2-alfresco-datatable/node_modules
-  - ng2-components/ng2-alfresco-documentlist/node_modules
-  - ng2-components/ng2-alfresco-login/node_modules
-  - ng2-components/ng2-alfresco-search/node_modules
-  - ng2-components/ng2-alfresco-upload/node_modules
-  - ng2-components/ng2-alfresco-viewer/node_modules
-  - ng2-components/ng2-alfresco-webscript/node_modules
-  - ng2-components/ng2-alfresco-tag/node_modules
-  - ng2-components/ng2-activiti-analytics/node_modules
-  - ng2-components/ng2-alfresco-userinfo/node_modules
-  - ng2-components/ng2-activiti-diagrams/node_modules
+  - ng2-components/node_modules

.vscode/settings.json

@@ -5,10 +5,19 @@
         "**/.svn": true,
         "**/.hg": true,
         "**/.DS_Store": true,
-        "**/*.js": { "when": "$(basename).ts"},
-        "**/*.js.map": { "when": "$(basename)"},
-        "**/*.d.ts": { "when": "$(basename).ts"},
-        "**/coverage": true
+        "**/coverage": true,
+        "**/.happypack": true
     },
-    "editor.renderIndentGuides": true
+    "editor.renderIndentGuides": true,
+    "tslint.configFile": "ng2-components/tslint.json",
+    "markdownlint.config": {
+        "MD032": false,
+        "MD004": false,
+        "MD024": false,
+        "MD009": false,
+        "MD013": false,
+        "MD036": false,
+        "MD033" : false,
+        "MD031" : false
+    }
 }

ALFRESCOCORS.md

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

BROWSER-SUPPORT.md

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

CONTRIBUTING.md

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

INTRODUCTION.md

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

Jenkinsfile

@@ -1,41 +0,0 @@
-#!/usr/bin/groovy
-@Library('github.com/fabric8io/fabric8-pipeline-library@v2.2.311')
-def utils = new io.fabric8.Utils()
-clientsNode{
-  def envStage = utils.environmentNamespace('staging')
-  def envProd = utils.environmentNamespace('production')
-  def newVersion = ''
-
-  git 'https://github.com/Alfresco/alfresco-ng2-components.git'
-
-  stage 'Canary release'
-  echo 'NOTE: running pipelines for the first time will take longer as build and base docker images are pulled onto the node'
-  if (!fileExists ('Dockerfile')) {
-    writeFile file: 'Dockerfile', text: 'FROM node:5.3-onbuild'
-  }
-
-  newVersion = performCanaryRelease {}
-
-  def rc = getKubernetesJson {
-    port = 8080
-    label = 'node'
-    icon = 'https://cdn.rawgit.com/fabric8io/fabric8/dc05040/website/src/images/logos/nodejs.svg'
-    version = newVersion
-    imageName = clusterImageName
-  }
-
-  stage 'Rollout Staging'
-  kubernetesApply(file: rc, environment: envStage)
-
-  stage 'Approve'
-  approve{
-    room = null
-    version = canaryVersion
-    console = fabric8Console
-    environment = envStage
-  }
-
-  stage 'Rollout Production'
-  kubernetesApply(file: rc, environment: envProd)
-
-}

PREREQUISITES.md

@@ -3,12 +3,11 @@
 The [Angular 2](https://angular.io/) based application development framework requires the following:
 
 - An Alfresco Platform Repository (version [201609 Early Access](https://community.alfresco.com/docs/DOC-6372-alfresco-community-edition-file-list-201609-ea) or newer) 
-- [Enable cors on Alfresco One](/ALFRESCOCORS.md)
-- [Download and install Activiti](https://www.alfresco.com/products/bpm/alfresco-activiti/trial)
+- [Download and install the process service](https://www.alfresco.com/products/bpm/alfresco-activiti/trial)
 - [Node.js](https://nodejs.org/en/) JavaScript runtime.
 - [npm](https://www.npmjs.com/) package manager for JavaScript.
-- local nginx proxy to avoid cross-origin browser restrictions (see below)
-- (If you use ECM and BPM together) Make sure your user has the same username and password in both system
+- (If you use CS and PS together) Make sure your user has the same username and password in both system
+- [If you are experiencing CORS problem read this guide](/ALFRESCOCORS.md)
 
 *Note: Default username for activiti is "admin@app.activiti.com" and "admin" for Alfresco, and also the default password are different. Change them to be equal.*
 
@@ -26,40 +25,3 @@ Make sure the Node.js version is > 5:
 $ node -v
 v5.12.0
 ```
-
-## Installing nginx
-
-Most Linux distributions will come with nginx available to install via your
-package manager and on Mac OS you can use [Homebrew](http://brew.sh/).
-
-If you want to install manually however you can follow the instructions on the
-[download page](http://nginx.org/en/download.html). See also the specific information for
-[windows users](http://nginx.org/en/docs/windows.html).
-
-### Start nginx
-
-Start nginx using the supplied configuration in [nginx.conf](nginx.conf)
-
-    nginx -c nginx.conf
-
-### Review nginx configuration
-
-To correctly configure nginx use the following file [nginx.conf](/nginx.conf).
-This will host Activiti, Alfresco and the app dev framework under the same origin.
-
-* ECM : http://localhost:8888/alfresco/
-* BPM : http://localhost:8888/activiti/
-
-To make everything work, you have to change the address of the ECM and BPM. In the demo app you can do that clicking on the top right settings menu and changing the bottom left options: *ECM host* and *BPM host*.
-
-This configuration assumes few things:
-
-* Port mapping:
-  * nginx entry point: 0.0.0.0:8888
-  * Demo Shell: locathost:3000
-  * Alfresco: locathost:8080
-  * Activiti: locathost:9999
-
-All those values can be modified at their respective `location` directive on the [nginx.conf](/nginx.conf) file.
-
-If you want to know more on how to install and configure nginx to work with the Application Development Framework can be found [here](https://community.alfresco.com/community/application-development-framework/blog/2016/09/28/adf-development-set-up-with-nginx-proxy)

README.md

@@ -1,4 +1,4 @@
-# ALFRESCO ANGULAR 2 COMPONENTS
+# ALFRESCO ANGULAR COMPONENTS
 
 [![Join the chat at https://gitter.im/Alfresco/alfresco-ng2-components](https://badges.gitter.im/Alfresco/alfresco-ng2-components.svg)](https://gitter.im/Alfresco/alfresco-ng2-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
@@ -17,27 +17,6 @@
   <a href='https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE'>
      <img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
   </a>
-  <a href='https://www.alfresco.com/'>
-     <img src='https://img.shields.io/badge/style-component-green.svg?label=alfresco' alt='alfresco component' />
-  </a>
-  <a href='https://angular.io/'>
-     <img src='https://img.shields.io/badge/style-2-red.svg?label=angular' alt='angular 2' />
-  </a>
-  <a href='https://www.typescriptlang.org/docs/tutorial.html'>
-     <img src='https://img.shields.io/badge/style-lang-blue.svg?label=typescript' alt='typescript' />
-  </a>
-  <a href='https://www.alfresco.com/'>
-     <img src='https://img.shields.io/badge/style-%3E5.0.0-blue.svg?label=node%20version' alt='node version' />
-  </a>
-</p>
-  
-<p align="center">
-  <img title="alfresco" alt='alfresco' src='assets/alfresco.png'  width="280px" height="150px"></img>
-  <img title="angular2" alt='angular2' src='assets/angular2.png'  width="150px" height="150px"></img>    
-</p>
-
-<p align="center">
-  <img title="browser stack" alt='browser stack' src='assets/browserstack.png'  width="350px" height="225px"></img>
 </p>
 
 ## Introduction
@@ -106,6 +85,6 @@ All components are supported in the following browsers:
 |Edge       	   |13, 14     	    |
 |Internet Explorer |11     	        |
 
-* Due to a [known Firefox issue] (https://bugzilla.mozilla.org/show_bug.cgi?id=1188880),the Alfresco Upload Component does not currently support folder upload functionality on Firefox    
+* Due to a [Firefox known issue](https://bugzilla.mozilla.org/show_bug.cgi?id=1188880), the Alfresco Upload Component does not currently support folder upload functionality on Firefox.    
 
-Please refer to [Browser Support](BROWSER-SUPPORT.md) article for more details. 
+Please refer to the [Browser Support](BROWSER-SUPPORT.md) article for more details. 

adf-rules/adfClassNameRule.js

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

adf-rules/adfClassNameRule.ts

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

adf-rules/adfFileNameRule.js

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

adf-rules/adfFileNameRule.ts

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

adf-rules/index.js

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

adf-rules/index.ts

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

adf-rules/package.json

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

adf-rules/tsconfig.json

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

adf-rules/tslint.json

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

appveyor.yml

@@ -6,52 +6,36 @@ branches:
     - dev-build-test
 
 environment:
-  nodejs_version: "5"
+  nodejs_version: "8"
 
   matrix:
-  - COMPONENT_NAME: ng2-alfresco-core
-  - COMPONENT_NAME: ng2-alfresco-datatable
-  - COMPONENT_NAME: ng2-alfresco-documentlist
-  - COMPONENT_NAME: ng2-alfresco-login
-  - COMPONENT_NAME: ng2-alfresco-search
-  - COMPONENT_NAME: ng2-alfresco-upload
-  - COMPONENT_NAME: ng2-alfresco-viewer
-  - COMPONENT_NAME: ng2-alfresco-tag
-  - COMPONENT_NAME: ng2-alfresco-webscript
-  - COMPONENT_NAME: ng2-activiti-form
-  - COMPONENT_NAME: ng2-activiti-tasklist
-  - COMPONENT_NAME: ng2-activiti-processlist
-  - COMPONENT_NAME: ng2-activiti-diagrams
-  - COMPONENT_NAME: ng2-activiti-analytics
-  - COMPONENT_NAME: ng2-alfresco-userinfo
+  - COMPONENT_NAME: ng2-components-activiti
+  - COMPONENT_NAME: ng2-components-alfresco
+#  - COMPONENT_NAME: ng2-demo-shell
 
 # Install scripts. (runs after repo cloning)
 install:
   # Get the latest stable version of Node.js or io.js
   - ps: Install-Product node $env:nodejs_version
   # install module
-  - IF %COMPONENT_NAME% NEQ ng2-alfresco-core (cd ng2-components/ng2-alfresco-core && npm link && npm install && npm run build && cd ../../)
-  - IF %COMPONENT_NAME% EQU ng2-alfresco-documentlist (cd ng2-components/ng2-alfresco-datatable && npm link ng2-alfresco-core && npm link && npm install && npm run build && cd ../../)
-  - IF %COMPONENT_NAME% EQU ng2-alfresco-search (cd ng2-components/ng2-alfresco-datatable && npm link ng2-alfresco-core && npm link && npm install && npm run build && cd ../../)
-  - IF %COMPONENT_NAME% EQU ng2-alfresco-search (cd ng2-components/ng2-alfresco-documentlist && npm link ng2-alfresco-core && npm link ng2-alfresco-datatable && npm link && npm install && npm run build && cd ../../)
-  - IF %COMPONENT_NAME% EQU ng2-activiti-processlist (cd ng2-components/ng2-alfresco-datatable && npm link ng2-alfresco-core && npm link && npm install && npm run build && cd ../../)
-  - IF %COMPONENT_NAME% EQU ng2-activiti-processlist (cd ng2-components/ng2-activiti-form && npm link ng2-alfresco-core && npm link && npm install && npm run build && cd ../../)
-  - IF %COMPONENT_NAME% EQU ng2-activiti-processlist (cd ng2-components/ng2-activiti-tasklist && npm link ng2-alfresco-core && npm link ng2-alfresco-datatable && npm link ng2-activiti-form && npm link && npm install && npm run build && cd ../../)
-  - IF %COMPONENT_NAME% EQU ng2-activiti-tasklist (cd ng2-components/ng2-alfresco-datatable && npm link ng2-alfresco-core && npm link && npm install && npm run build && cd ../../)
-  - IF %COMPONENT_NAME% EQU ng2-activiti-tasklist (cd ng2-components/ng2-activiti-form && npm link ng2-alfresco-core && npm link && npm install && npm run build && cd ../../)
-  - IF %COMPONENT_NAME% EQU ng2-alfresco-webscript (cd ng2-components/ng2-alfresco-datatable && npm link ng2-alfresco-core && npm link && npm install && npm run build && cd ../../)
-  - IF %COMPONENT_NAME% EQU ng2-activiti-analytics (cd ng2-components/ng2-activiti-diagrams && npm link link ng2-alfresco-core && npm link && npm install && npm run build && cd ../../)
-  - cd ng2-components/%COMPONENT_NAME%
-  - npm run travis
-
-# Post-install test scripts.
-test_script:
-  - npm install
-  # Output useful info for debugging.
-  - node --version
-  - npm --version
-  # run tests
-  - npm test
+  - if %COMPONENT_NAME% EQU ng2-components-activiti (
+              if %APPVEYOR_REPO_BRANCH EQU master
+                (cd scripts && sh npm-build-all.sh -t "ng2-activiti*"  || exit 1)
+              else
+                (cd scripts && sh npm-build-all.sh -t "ng2-activiti*" -vjsapi alpha|| exit 1)
+    )
+  - if %COMPONENT_NAME% EQU ng2-components-alfresco (
+              if %APPVEYOR_REPO_BRANCH EQU master
+                (cd scripts && sh npm-build-all.sh -t "ng2-alfresco*"  || exit 1)
+              else
+                (cd scripts && sh npm-build-all.sh -t "ng2-alfresco*" -vjsapi alpha|| exit 1)
+    )
+#  - if %COMPONENT_NAME% EQU ng2-demo-shell (
+#              if %APPVEYOR_REPO_BRANCH EQU master
+#                (cd scripts && sh start.sh -t -ss || exit 1)
+#              else
+#                (cd scripts && sh start.sh -dev -t -ss -vjsapi alpha || exit 1)
+#    )
 
 # Don't actually build.
 build: off

demo-shell-ng2/.gitignore

@@ -1,8 +1,11 @@
 typings/
 node_modules/
 bower_components/
+ng2-components/
 app/**/*.js
 app/**/*.js.map
+app/**/*.d.ts
+
 !app/js/Polyline.js
 .idea
 versions.json

demo-shell-ng2/README.md

@@ -1,18 +1,11 @@
 
-<h1 align="center">Alfresco Angular 2 Components</h1>
-<p align="center">
-  <img title="alfresco" alt='alfresco' src='../assets/alfresco.png'  width="280px" height="150px" ></img>
-  <img title="angular2" alt='angular2' src='../assets/angular2.png'  width="150px" height="150px" ></img>
-</p>
-<p align="center">
-    <a href='https://github.com/mgechev/angular2-style-guide'>
-      <img src='https://mgechev.github.io/angular2-style-guide/images/badge.svg' alt='style' />
-    </a>
-</p>
+# ADF Demo Application
+
+Please note that this application is not an official product, but a testing and demo application to showcase complex interactions of ADF components.
 
 ## Installing
 
-To correctly use this demo check that on your machine is running [Node](https://nodejs.org/en/) version 5.x.x or higher.
+To correctly use this demo check that on your machine you have [Node](https://nodejs.org/en/) version 5.x.x or higher.
 
 ```sh
 git clone https://github.com/Alfresco/alfresco-ng2-components.git
@@ -20,6 +13,53 @@ cd alfresco-ng2-components/demo-shell-ng2/
 npm install
 ```
 
+## Proxy settings and CORS
+
+To simplify development and reduce the time to get the application started, we have the following Proxy settings:
+
+- **http://localhost:3000/ecm** is mapped to **http://localhost:8080**
+- **http://localhost:3000/bpm** is mapped to **http://localhost:9999**
+
+The settings above address most common scenarios for running ACS on port 8080 and APS on port 9999 and allow you to skip the CORS configuration.
+
+If you would like to change default proxy settings, please edit the `config/webpack.common.js` file.
+
+## Application settings (server-side)
+
+All server-side application settings are stored in the `app.config-dev.json` and `app.config-prod.json` files. 
+By default the configuration files have the content similar to the following one:
+
+```json
+{
+    "ecmHost": "http://localhost:3000/ecm",
+    "bpmHost": "http://localhost:3000/bpm",
+    "application": {
+        "name": "Alfresco"
+    }
+}
+```
+
+You can add any additional settings to the application configuration file if needed.
+
+Configuration files are picked based on environment settings (see `app.module.ts` for more details).
+
+```ts
+let appConfigFile = 'app.config-dev.json';
+if (process.env.ENV === 'production') {
+    appConfigFile = 'app.config-prod.json';
+}
+
+@NgModule({
+    imports: [
+        ...
+        CoreModule.forRoot({
+            appConfigFile: appConfigFile
+        }),
+        ...
+    ]
+})
+```
+
 ## Development build
 
 ```sh
@@ -42,59 +82,20 @@ npm run start:dist
 ```
 
 This command builds project in `production` mode.
-All output is placed to `dist` folder and can be served your preferred web server.
+All output is placed to `dist` folder and can be served to your preferred web server.
 You should need no additional files outside the `dist` folder.
 
 ### Important notes
 
 By default demo application is configured to use [wsrv](https://www.npmjs.com/package/wsrv) tool (lightweight web server)
-to serve production build output. It will be running at `0.0.0.0` address with port `3000` and allow you accessing your application
-via network. However you can use any web server of your choice in production.
+to serve production build output. It will be running at `0.0.0.0` address with port `3000` and allow you to access your application
+via network. However, you can use any web server of your choice in production.
 
 ## Development branch build
 
-If you want to run the demo shell with the latest change from the development branch, use the following command from the /script folder:
+If you want to run the demo shell with the latest changes from the development branch, use the following command from the /script folder:
 
 ```sh
 ./npm-clean.sh
 ./start-linked.sh -install
-```
-
-## Multi-language
-To support a new language you need to create your language file (.json) and add it to `i18n/` folder.
-
-```json
-{
-        "username" : "Username",
-        "input-required-message": "Required",
-        "input-min-message": "Your username needs to be at least 4 characters.",
-        "login-button": "Login"
-}
-```
-
-Directory structure:
-```
-.
-├── i18n/
-│   ├── en.json
-│   ├── it.json
-│   └── fr.json
-```
-
-## Custom-files
-
-If you need to add custom files on your project you can add this files in the folders public
-
-```
-.
-├── public/
-│   ├── images/
-│   ├── css/
-│   └── js/
-```
-
-the public folder above wil be copied in the root of your project and you can refer to them for example as
-
- * './images/custom_image.png'
- * './js/custom_script.js'
- * './css/custom_style.css'
+```

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

@@ -0,0 +1,255 @@
+{
+    "ecmHost": "http://{hostname}:{port}/ecm",
+    "bpmHost": "http://{hostname}:{port}/bpm",
+    "application": {
+        "name": "Alfresco ADF Appplication"
+    },
+    "pagination": {
+        "size": 25
+    },
+    "files": {
+            "excluded": [".DS_Store", "desktop.ini", ".git"]
+    },
+    "activiti": {
+        "rest": {
+            "fields": [
+                {
+                    "processId": "0",
+                    "taskId": "7501",
+                    "fieldId": "label10",
+                    "values": [
+                        { "id": "f1", "name": "Field 1" },
+                        { "id": "f2", "name": "Field 2" },
+                        { "id": "f3", "name": "Field 3" }
+                    ]
+                }
+            ]
+        }
+    },
+    "document-list": {
+        "supportedPageSizes": [5, 10, 15, 20],
+        "presets": {
+            "-trashcan-": [
+                {
+                    "key": "$thumbnail",
+                    "type": "image",
+                    "srTitle": "ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL",
+                    "sortable": false
+                },
+                {
+                    "key": "name",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.NAME",
+                    "cssClass": "full-width ellipsis-cell",
+                    "sortable": true
+                },
+                {
+                    "key": "path",
+                    "type": "location",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.LOCATION",
+                    "format": "/files",
+                    "sortable": true
+                },
+                {
+                    "key": "content.sizeInBytes",
+                    "type": "fileSize",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.SIZE",
+                    "sortable": true
+                },
+                {
+                    "key": "archivedAt",
+                    "type": "date",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.DELETED_ON",
+                    "format": "timeAgo",
+                    "sortable": true
+                },
+                {
+                    "key": "archivedByUser.displayName",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.DELETED_BY",
+                    "sortable": true
+                }
+            ],
+            "-sites-": [
+                {
+                    "key": "$thumbnail",
+                    "type": "image",
+                    "srTitle": "ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL",
+                    "sortable": false
+                },
+                {
+                    "key": "title",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.NAME",
+                    "cssClass": "full-width ellipsis-cell",
+                    "sortable": true
+                },
+                {
+                    "key": "visibility",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.STATUS",
+                    "sortable": true
+                }
+            ],
+            "-favorites-": [
+                {
+                    "key": "$thumbnail",
+                    "type": "image",
+                    "srTitle": "ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL",
+                    "sortable": false
+                },
+                {
+                    "key": "name",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.NAME",
+                    "cssClass": "full-width ellipsis-cell",
+                    "sortable": true
+                },
+                {
+                    "key": "path",
+                    "type": "location",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.LOCATION",
+                    "format": "/files",
+                    "sortable": true
+                },
+                {
+                    "key": "content.sizeInBytes",
+                    "type": "fileSize",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.SIZE",
+                    "sortable": true
+                },
+                {
+                    "key": "modifiedAt",
+                    "type": "date",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_ON",
+                    "format": "timeAgo",
+                    "sortable": true
+                },
+                {
+                    "key": "modifiedByUser.displayName",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_BY",
+                    "sortable": true
+                }
+            ],
+            "-recent-": [
+                {
+                    "key": "$thumbnail",
+                    "type": "image",
+                    "srTitle": "ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL",
+                    "sortable": false
+                },
+                {
+                    "key": "name",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.NAME",
+                    "cssClass": "full-width ellipsis-cell",
+                    "sortable": true
+                },
+                {
+                    "key": "path",
+                    "type": "location",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.LOCATION",
+                    "cssClass": "ellipsis-cell",
+                    "format": "/files",
+                    "sortable": true
+                },
+                {
+                    "key": "content.sizeInBytes",
+                    "type": "fileSize",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.SIZE",
+                    "sortable": true
+                },
+                {
+                    "key": "modifiedAt",
+                    "type": "date",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_ON",
+                    "format": "timeAgo",
+                    "sortable": true
+                }
+            ],
+            "-sharedlinks-": [
+                {
+                    "key": "$thumbnail",
+                    "type": "image",
+                    "srTitle": "ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL",
+                    "sortable": false
+                },
+                {
+                    "key": "name",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.NAME",
+                    "cssClass": "full-width ellipsis-cell",
+                    "sortable": true
+                },
+                {
+                    "key": "path",
+                    "type": "location",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.LOCATION",
+                    "cssClass": "ellipsis-cell",
+                    "format": "/files",
+                    "sortable": true
+                },
+                {
+                    "key": "content.sizeInBytes",
+                    "type": "fileSize",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.SIZE",
+                    "sortable": true
+                },
+                {
+                    "key": "modifiedAt",
+                    "type": "date",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_ON",
+                    "format": "timeAgo",
+                    "sortable": true
+                },
+                {
+                    "key": "modifiedByUser.displayName",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_BY",
+                    "sortable": true
+                },
+                {
+                    "key": "sharedByUser.displayName",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.SHARED_BY",
+                    "sortable": true
+                }
+            ],
+            "default": [
+                {
+                    "key": "$thumbnail",
+                    "type": "image",
+                    "srTitle": "ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL",
+                    "sortable": false
+                },
+                {
+                    "key": "name",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.NAME",
+                    "cssClass": "full-width ellipsis-cell",
+                    "sortable": true
+                },
+                {
+                    "key": "content.sizeInBytes",
+                    "type": "fileSize",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.SIZE",
+                    "sortable": true
+                },
+                {
+                    "key": "modifiedAt",
+                    "type": "date",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_ON",
+                    "format": "timeAgo",
+                    "sortable": true
+                },
+                {
+                    "key": "modifiedByUser.displayName",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_BY",
+                    "sortable": true
+                }
+            ]
+        }
+    }
+}

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

@@ -0,0 +1,255 @@
+{
+    "ecmHost": "http://{hostname}",
+    "bpmHost": "http://{hostname}",
+    "application": {
+        "name": "Alfresco ADF Appplication"
+    },
+    "pagination": {
+        "size": 25
+    },
+    "files": {
+            "excluded": [".DS_Store", "desktop.ini", ".git"]
+    },
+    "activiti": {
+        "rest": {
+            "fields": [
+                {
+                    "processId": "0",
+                    "taskId": "7501",
+                    "fieldId": "label10",
+                    "values": [
+                        { "id": "f1", "name": "Field 1" },
+                        { "id": "f2", "name": "Field 2" },
+                        { "id": "f3", "name": "Field 3" }
+                    ]
+                }
+            ]
+        }
+    },
+    "document-list": {
+        "supportedPageSizes": [5, 10, 15, 20],
+        "presets": {
+            "-trashcan-": [
+                {
+                    "key": "$thumbnail",
+                    "type": "image",
+                    "srTitle": "ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL",
+                    "sortable": false
+                },
+                {
+                    "key": "name",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.NAME",
+                    "cssClass": "full-width ellipsis-cell",
+                    "sortable": true
+                },
+                {
+                    "key": "path",
+                    "type": "location",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.LOCATION",
+                    "format": "/files",
+                    "sortable": true
+                },
+                {
+                    "key": "content.sizeInBytes",
+                    "type": "fileSize",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.SIZE",
+                    "sortable": true
+                },
+                {
+                    "key": "archivedAt",
+                    "type": "date",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.DELETED_ON",
+                    "format": "timeAgo",
+                    "sortable": true
+                },
+                {
+                    "key": "archivedByUser.displayName",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.DELETED_BY",
+                    "sortable": true
+                }
+            ],
+            "-sites-": [
+                {
+                    "key": "$thumbnail",
+                    "type": "image",
+                    "srTitle": "ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL",
+                    "sortable": false
+                },
+                {
+                    "key": "title",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.NAME",
+                    "cssClass": "full-width ellipsis-cell",
+                    "sortable": true
+                },
+                {
+                    "key": "visibility",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.STATUS",
+                    "sortable": true
+                }
+            ],
+            "-favorites-": [
+                {
+                    "key": "$thumbnail",
+                    "type": "image",
+                    "srTitle": "ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL",
+                    "sortable": false
+                },
+                {
+                    "key": "name",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.NAME",
+                    "cssClass": "full-width ellipsis-cell",
+                    "sortable": true
+                },
+                {
+                    "key": "path",
+                    "type": "location",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.LOCATION",
+                    "format": "/files",
+                    "sortable": true
+                },
+                {
+                    "key": "content.sizeInBytes",
+                    "type": "fileSize",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.SIZE",
+                    "sortable": true
+                },
+                {
+                    "key": "modifiedAt",
+                    "type": "date",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_ON",
+                    "format": "timeAgo",
+                    "sortable": true
+                },
+                {
+                    "key": "modifiedByUser.displayName",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_BY",
+                    "sortable": true
+                }
+            ],
+            "-recent-": [
+                {
+                    "key": "$thumbnail",
+                    "type": "image",
+                    "srTitle": "ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL",
+                    "sortable": false
+                },
+                {
+                    "key": "name",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.NAME",
+                    "cssClass": "full-width ellipsis-cell",
+                    "sortable": true
+                },
+                {
+                    "key": "path",
+                    "type": "location",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.LOCATION",
+                    "cssClass": "ellipsis-cell",
+                    "format": "/files",
+                    "sortable": true
+                },
+                {
+                    "key": "content.sizeInBytes",
+                    "type": "fileSize",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.SIZE",
+                    "sortable": true
+                },
+                {
+                    "key": "modifiedAt",
+                    "type": "date",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_ON",
+                    "format": "timeAgo",
+                    "sortable": true
+                }
+            ],
+            "-sharedlinks-": [
+                {
+                    "key": "$thumbnail",
+                    "type": "image",
+                    "srTitle": "ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL",
+                    "sortable": false
+                },
+                {
+                    "key": "name",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.NAME",
+                    "cssClass": "full-width ellipsis-cell",
+                    "sortable": true
+                },
+                {
+                    "key": "path",
+                    "type": "location",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.LOCATION",
+                    "cssClass": "ellipsis-cell",
+                    "format": "/files",
+                    "sortable": true
+                },
+                {
+                    "key": "content.sizeInBytes",
+                    "type": "fileSize",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.SIZE",
+                    "sortable": true
+                },
+                {
+                    "key": "modifiedAt",
+                    "type": "date",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_ON",
+                    "format": "timeAgo",
+                    "sortable": true
+                },
+                {
+                    "key": "modifiedByUser.displayName",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_BY",
+                    "sortable": true
+                },
+                {
+                    "key": "sharedByUser.displayName",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.SHARED_BY",
+                    "sortable": true
+                }
+            ],
+            "default": [
+                {
+                    "key": "$thumbnail",
+                    "type": "image",
+                    "srTitle": "ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL",
+                    "sortable": false
+                },
+                {
+                    "key": "name",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.NAME",
+                    "cssClass": "full-width ellipsis-cell",
+                    "sortable": true
+                },
+                {
+                    "key": "content.sizeInBytes",
+                    "type": "fileSize",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.SIZE",
+                    "sortable": true
+                },
+                {
+                    "key": "modifiedAt",
+                    "type": "date",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_ON",
+                    "format": "timeAgo",
+                    "sortable": true
+                },
+                {
+                    "key": "modifiedByUser.displayName",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_BY",
+                    "sortable": true
+                }
+            ]
+        }
+    }
+}

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

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

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

@@ -1,70 +1 @@
-<!-- Always shows a header, even in smaller screens. -->
-<div mdl class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
-    <header class="mdl-layout__header main_header_adf" [ngClass]="{hide: isAPageWithHeaderBar()}">
-        <div class="mdl-button-padding mdl-layout__header-row">
-
-            <!-- User Info -->
-            <ng2-alfresco-userinfo class="user-profile" [menuOpenType]="left">
-            </ng2-alfresco-userinfo>
-
-            <!-- Title -->
-            <span class="mdl-layout-title">Demo Application</span>
-            <!-- Add spacer, to align navigation to the right -->
-            <div class="mdl-layout-spacer"></div>
-
-            <!-- Search bar -->
-            <search-bar (expand)="onToggleSearch($event)"></search-bar>
-
-            <!-- Navigation. We hide it in small screens. -->
-            <nav class="mdl-navigation mdl-layout--large-screen-only">
-                <a class="mdl-navigation__link" data-automation-id="home" href="" routerLink="/">Home</a>
-                <a class="mdl-navigation__link" data-automation-id="files" href="" routerLink="/files">DocumentList</a>
-                <a class="mdl-navigation__link" data-automation-id="activiti" href="" routerLink="/activiti">Process Services</a>
-                <a class="mdl-navigation__link" data-automation-id="login" href="" routerLink="/login">Login</a>
-                <a class="mdl-navigation__link" data-automation-id="settings" href="" routerLink="/settings">Settings</a>
-            </nav>
-
-        </div>
-    </header>
-
-    <div class="mdl-layout__drawer">
-        <nav class="mdl-navigation">
-            <a class="mdl-navigation__link" (click)="onLogout($event)">
-                <label tabindex="0">Logout</label>
-            </a>
-        </nav>
-        <span class="mdl-layout-title">Languages</span>
-        <nav class="mdl-navigation">
-            <a class="mdl-navigation__link" (click)="changeLanguage('en')">
-                <span class="flag-icon flag-icon-gb"></span>
-                <label tabindex="0"> English</label>
-            </a>
-            <a class="mdl-navigation__link" (click)="changeLanguage('it')">
-                <span class="flag-icon flag-icon-it"></span>
-                <label tabindex="0"> Italian</label>
-            </a>
-            <a class="mdl-navigation__link" (click)="changeLanguage('ru')">
-                <span class="flag-icon flag-icon-ru"></span>
-                <label tabindex="0"> Russian</label>
-            </a>
-        </nav>
-        <span class="mdl-layout-title">Components</span>
-        <nav class="mdl-navigation">
-            <a class="mdl-navigation__link" href="" routerLink="/" (click)="hideDrawer()">Home</a>
-            <a class="mdl-navigation__link" href="" routerLink="/files" (click)="hideDrawer()">DocumentList</a>
-            <a class="mdl-navigation__link" href="" routerLink="/datatable" (click)="hideDrawer()">DataTable</a>
-            <a class="mdl-navigation__link" href="" routerLink="/uploader" (click)="hideDrawer()">Uploader</a>
-            <a class="mdl-navigation__link" href="" routerLink="/login" (click)="hideDrawer()">Login</a>
-            <a class="mdl-navigation__link" href="" routerLink="/activiti" (click)="hideDrawer()">Process Services</a>
-            <a class="mdl-navigation__link" href="" routerLink="/webscript" (click)="hideDrawer()">Webscript</a>
-            <a class="mdl-navigation__link" href="" routerLink="/tag" (click)="hideDrawer()">Tag</a>
-            <a class="mdl-navigation__link" href="" routerLink="/about" (click)="hideDrawer()">About</a>
-            <a class="mdl-navigation__link" href="" routerLink="/settings" (click)="hideDrawer()">Settings</a>
-        </nav>
-    </div>
-    <main class="mdl-layout__content">
-        <div class="page-content">
-            <router-outlet></router-outlet>
-        </div>
-    </main>
-</div>
+<router-outlet></router-outlet>

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

@@ -15,101 +15,26 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
-import { Router } from '@angular/router';
-import { AlfrescoTranslationService, AlfrescoAuthenticationService, AlfrescoSettingsService, StorageService, LogService } from 'ng2-alfresco-core';
-
-declare var document: any;
+import { Component, ViewEncapsulation } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { AlfrescoSettingsService, PageTitleService, StorageService } from 'ng2-alfresco-core';
 
 @Component({
-    selector: 'alfresco-app',
+    selector: 'adf-app',
     templateUrl: './app.component.html',
-    styleUrls: ['./app.component.css']
+    styleUrls: ['./theme.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class AppComponent {
     searchTerm: string = '';
 
-    ecmHost: string = 'http://' + window.location.hostname + ':8080';
-    bpmHost: string = 'http://' + window.location.hostname + ':9999';
-
-    constructor(private authService: AlfrescoAuthenticationService,
-                private router: Router,
-                private settingsService: AlfrescoSettingsService,
-                private translateService: AlfrescoTranslationService,
+    constructor(private settingsService: AlfrescoSettingsService,
                 private storage: StorageService,
-                private logService: LogService) {
-        this.setEcmHost();
-        this.setBpmHost();
+                pageTitleService: PageTitleService,
+                route: ActivatedRoute,
+                router: Router) {
         this.setProvider();
-
-        if (translateService) {
-            translateService.addTranslationFolder('app', 'resources');
-        }
-    }
-
-    isAPageWithHeaderBar(): boolean {
-        return location.pathname === '/login' || location.pathname === '/settings';
-    }
-
-    onLogout(event) {
-        event.preventDefault();
-        this.authService.logout()
-            .subscribe(
-                () => {
-                    this.navigateToLogin();
-                },
-                (error: any) => {
-                    if (error && error.response && error.response.status === 401) {
-                        this.navigateToLogin();
-                    } else {
-                        this.logService.error('An unknown error occurred while logging out', error);
-                        this.navigateToLogin();
-                    }
-                }
-            );
-    }
-
-    navigateToLogin() {
-        this.router.navigate(['/login']);
-        this.hideDrawer();
-    }
-
-    onToggleSearch(event) {
-        let expandedHeaderClass = 'header-search-expanded',
-            header = document.querySelector('header');
-        if (event.expanded) {
-            header.classList.add(expandedHeaderClass);
-        } else {
-            header.classList.remove(expandedHeaderClass);
-        }
-    }
-
-    changeLanguage(lang: string) {
-        this.translateService.use(lang);
-        this.hideDrawer();
-    }
-
-    hideDrawer() {
-        // todo: workaround for drawer closing
-        document.querySelector('.mdl-layout').MaterialLayout.toggleDrawer();
-    }
-
-    private setEcmHost() {
-        if (this.storage.hasItem(`ecmHost`)) {
-            this.settingsService.ecmHost = this.storage.getItem(`ecmHost`);
-            this.ecmHost = this.storage.getItem(`ecmHost`);
-        } else {
-            this.settingsService.ecmHost = this.ecmHost;
-        }
-    }
-
-    private setBpmHost() {
-        if (this.storage.hasItem(`bpmHost`)) {
-            this.settingsService.bpmHost = this.storage.getItem(`bpmHost`);
-            this.bpmHost = this.storage.getItem(`bpmHost`);
-        } else {
-            this.settingsService.bpmHost = this.bpmHost;
-        }
+        pageTitleService.setTitle();
     }
 
     private setProvider() {

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

@@ -18,66 +18,86 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
-import { CoreModule } from 'ng2-alfresco-core';
-import { SearchModule } from 'ng2-alfresco-search';
-import { LoginModule } from 'ng2-alfresco-login';
+import { AnalyticsModule } from 'ng2-activiti-analytics';
+import { DiagramsModule } from 'ng2-activiti-diagrams';
+import { ActivitiFormModule } from 'ng2-activiti-form';
+import { ActivitiProcessListModule } from 'ng2-activiti-processlist';
+import { ActivitiTaskListModule } from 'ng2-activiti-tasklist';
+import { AppConfigService, CoreModule, TRANSLATION_PROVIDER } from 'ng2-alfresco-core';
 import { DataTableModule } from 'ng2-alfresco-datatable';
 import { DocumentListModule } from 'ng2-alfresco-documentlist';
-import { UploadModule } from 'ng2-alfresco-upload';
+import { LoginModule } from 'ng2-alfresco-login';
+import { SearchModule } from 'ng2-alfresco-search';
+import { SocialModule } from 'ng2-alfresco-social';
 import { TagModule } from 'ng2-alfresco-tag';
-import { WebScriptModule } from 'ng2-alfresco-webscript';
+import { UploadModule } from 'ng2-alfresco-upload';
+import { UserInfoModule } from 'ng2-alfresco-userinfo';
 import { ViewerModule } from 'ng2-alfresco-viewer';
-import { ActivitiFormModule } from 'ng2-activiti-form';
-import { ActivitiTaskListModule } from 'ng2-activiti-tasklist';
-import { ActivitiProcessListModule } from 'ng2-activiti-processlist';
-import { UserInfoComponentModule } from 'ng2-alfresco-userinfo';
-import { AnalyticsModule } from 'ng2-activiti-analytics';
+import { WebScriptModule } from 'ng2-alfresco-webscript';
+
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { Editor3DModule } from 'ng2-3d-editor';
+import { ChartsModule } from 'ng2-charts';
 import { AppComponent } from './app.component';
 import { routing } from './app.routes';
 import { CustomEditorsModule } from './components/activiti/custom-editor/custom-editor.component';
-import { Editor3DModule } from 'ng2-3d-editor';
-import { MaterialModule } from '@angular/material';
-import { ChartsModule } from 'ng2-charts';
+import { AppLayoutComponent } from './components/app-layout/app-layout.component';
+import { FileViewComponent } from './components/file-view/file-view.component';
+import { FormListDemoComponent } from './components/form/form-list-demo.component';
+import { ThemePickerModule } from './components/theme-picker/theme-picker';
+import { MaterialModule } from './material.module';
+import { DebugAppConfigService } from './services/debug-app-config.service';
+
+import { CustomSourcesComponent } from './components/files/custom-sources.component';
 
 import {
-    HomeComponent,
-    DataTableDemoComponent,
-    SearchComponent,
-    SearchBarComponent,
-    LoginDemoComponent,
-    ActivitiDemoComponent,
-    ActivitiAppsView,
-    FormViewer,
-    WebscriptComponent,
-    TagComponent,
     AboutComponent,
+    ActivitiAppsViewComponent,
+    ActivitiDemoComponent,
+    ActivitiProcessAttachmentsComponent,
+    ActivitiShowDiagramComponent,
+    ActivitiTaskAttachmentsComponent,
+    DataTableDemoComponent,
     FilesComponent,
-    FormNodeViewer,
-    SettingComponent
+    FormDemoComponent,
+    FormNodeViewerComponent,
+    FormViewerComponent,
+    HomeComponent,
+    LoginDemoComponent,
+    SearchBarComponent,
+    SearchComponent,
+    SettingsComponent,
+    SocialComponent,
+    TagComponent,
+    WebscriptComponent
 } from './components/index';
 
 @NgModule({
     imports: [
         BrowserModule,
         routing,
-        MaterialModule.forRoot(),
-        CoreModule.forRoot(),
-        LoginModule.forRoot(),
-        SearchModule.forRoot(),
-        DataTableModule.forRoot(),
-        DocumentListModule.forRoot(),
-        UploadModule.forRoot(),
-        TagModule.forRoot(),
-        WebScriptModule.forRoot(),
-        ViewerModule.forRoot(),
-        ActivitiFormModule.forRoot(),
-        ActivitiTaskListModule.forRoot(),
-        ActivitiProcessListModule.forRoot(),
-        UserInfoComponentModule.forRoot(),
-        AnalyticsModule.forRoot(),
+        CoreModule,
+        MaterialModule,
+        LoginModule,
+        SearchModule,
+        DataTableModule,
+        DocumentListModule,
+        UploadModule,
+        TagModule,
+        SocialModule,
+        WebScriptModule,
+        ViewerModule,
+        ActivitiFormModule,
+        ActivitiTaskListModule,
+        ActivitiProcessListModule,
+        UserInfoModule,
+        AnalyticsModule,
+        DiagramsModule,
         CustomEditorsModule,
-        Editor3DModule.forRoot(),
-        ChartsModule
+        Editor3DModule,
+        ChartsModule,
+        ThemePickerModule,
+        FlexLayoutModule
     ],
     declarations: [
         AppComponent,
@@ -87,16 +107,35 @@ import {
         SearchBarComponent,
         LoginDemoComponent,
         ActivitiDemoComponent,
-        ActivitiAppsView,
-        FormViewer,
+        ActivitiTaskAttachmentsComponent,
+        ActivitiProcessAttachmentsComponent,
+        ActivitiShowDiagramComponent,
+        ActivitiAppsViewComponent,
+        FormViewerComponent,
         WebscriptComponent,
         TagComponent,
+        SocialComponent,
         AboutComponent,
         FilesComponent,
-        FormNodeViewer,
-        SettingComponent
+        FormNodeViewerComponent,
+        SettingsComponent,
+        FormDemoComponent,
+        FormListDemoComponent,
+        CustomSourcesComponent,
+        FileViewComponent,
+        AppLayoutComponent
+    ],
+    providers: [
+        { provide: AppConfigService, useClass: DebugAppConfigService },
+        {
+            provide: TRANSLATION_PROVIDER,
+            multi: true,
+            useValue: {
+                name: 'app',
+                source: 'resources'
+            }
+        }
     ],
-    providers: [],
     bootstrap: [ AppComponent ]
 })
 export class AppModule { }

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

@@ -15,110 +15,144 @@
  * limitations under the License.
  */
 
-import { ModuleWithProviders }  from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { AuthGuard, AuthGuardEcm, AuthGuardBpm } from 'ng2-alfresco-core';
+import { ModuleWithProviders } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AuthGuard, AuthGuardBpm, AuthGuardEcm } from 'ng2-alfresco-core';
+import { AppLayoutComponent } from './components/app-layout/app-layout.component';
 
 import {
-    HomeComponent,
-    FilesComponent,
-    DataTableDemoComponent,
-    SearchComponent,
-    LoginDemoComponent,
-    ActivitiDemoComponent,
-    ActivitiAppsView,
-    WebscriptComponent,
-    TagComponent,
     AboutComponent,
-    FormViewer,
-    FormNodeViewer,
-    SettingComponent
+    ActivitiAppsViewComponent,
+    ActivitiDemoComponent,
+    ActivitiShowDiagramComponent,
+    DataTableDemoComponent,
+    FilesComponent,
+    FormDemoComponent,
+    FormNodeViewerComponent,
+    FormViewerComponent,
+    HomeComponent,
+    LoginDemoComponent,
+    SearchComponent,
+    SettingsComponent,
+    SocialComponent,
+    TagComponent,
+    WebscriptComponent
 } from './components/index';
 
 import { UploadButtonComponent } from 'ng2-alfresco-upload';
+import { FileViewComponent } from './components/file-view/file-view.component';
+import { CustomSourcesComponent } from './components/files/custom-sources.component';
+import { FormListDemoComponent } from './components/form/form-list-demo.component';
 
 export const appRoutes: Routes = [
     { path: 'login', component: LoginDemoComponent },
+    { path: 'settings', component: SettingsComponent },
+    { path: 'files/:nodeId/view', component: FileViewComponent, canActivate: [ AuthGuardEcm ] },
     {
         path: '',
-        component: HomeComponent,
-        canActivate: [AuthGuard]
-    },
-    {
-        path: 'home',
-        component: HomeComponent,
-        canActivate: [AuthGuard]
-    },
-    {
-        path: 'files',
-        component: FilesComponent,
-        canActivate: [AuthGuardEcm]
-    },
-    {
-        path: 'files/:id',
-        component: FilesComponent,
-        canActivate: [AuthGuardEcm]
-    },
-    {
-        path: 'datatable',
-        component: DataTableDemoComponent,
-        canActivate: [AuthGuard]
-    },
-    {
-        path: 'uploader',
-        component: UploadButtonComponent,
-        canActivate: [AuthGuardEcm]
-    },
-    {
-        path: 'search',
-        component: SearchComponent,
-        canActivate: [AuthGuardEcm]
-    },
-    {
-        path: 'activiti',
-        component: ActivitiAppsView,
-        canActivate: [AuthGuardBpm]
-    },
-    {
-        path: 'activiti/apps',
-        component: ActivitiAppsView,
-        canActivate: [AuthGuardBpm]
-    },
-    {
-        path: 'activiti/apps/:appId/tasks',
-        component: ActivitiDemoComponent,
-        canActivate: [AuthGuardBpm]
-    },
-    // TODO: check if neeeded
-    {
-        path: 'activiti/appId/:appId',
-        component: ActivitiDemoComponent,
-        canActivate: [AuthGuardBpm]
-    },
-    // TODO: check if needed
-    {
-        path: 'activiti/tasks/:id',
-        component: FormViewer,
-        canActivate: [AuthGuardBpm]
-    },
-    // TODO: check if needed
-    {
-        path: 'activiti/tasksnode/:id',
-        component: FormNodeViewer,
-        canActivate: [AuthGuardBpm]
-    },
-    {
-        path: 'webscript',
-        component: WebscriptComponent,
-        canActivate: [AuthGuardEcm]
-    },
-    {
-        path: 'tag',
-        component: TagComponent,
-        canActivate: [AuthGuardEcm]
-    },
-    { path: 'about', component: AboutComponent },
-    { path: 'settings', component: SettingComponent }
+        component: AppLayoutComponent,
+        canActivate: [AuthGuard],
+        children: [
+            {
+                path: '',
+                component: HomeComponent
+            },
+            {
+                path: 'home',
+                component: HomeComponent
+            },
+            {
+                path: 'files',
+                component: FilesComponent,
+                canActivate: [AuthGuardEcm]
+            },
+            {
+                path: 'files/:id',
+                component: FilesComponent,
+                canActivate: [AuthGuardEcm]
+            },
+            {
+                path: 'dl-custom-sources',
+                component: CustomSourcesComponent,
+                canActivate: [AuthGuardEcm]
+            },
+            {
+                path: 'datatable',
+                component: DataTableDemoComponent
+            },
+            {
+                path: 'uploader',
+                component: UploadButtonComponent,
+                canActivate: [AuthGuardEcm]
+            },
+            {
+                path: 'search',
+                component: SearchComponent,
+                canActivate: [AuthGuardEcm]
+            },
+            {
+                path: 'activiti',
+                component: ActivitiAppsViewComponent,
+                canActivate: [AuthGuardBpm]
+            },
+            {
+                path: 'activiti/apps',
+                component: ActivitiAppsViewComponent,
+                canActivate: [AuthGuardBpm]
+            },
+            {
+                path: 'activiti/apps/:appId/tasks',
+                component: ActivitiDemoComponent,
+                canActivate: [AuthGuardBpm]
+            },
+            {
+                path: 'activiti/apps/:appId/processes',
+                component: ActivitiDemoComponent,
+                canActivate: [AuthGuardBpm]
+            },
+            {
+                path: 'activiti/apps/:appId/diagram/:processDefinitionId',
+                component: ActivitiShowDiagramComponent,
+                canActivate: [AuthGuardBpm]
+            },
+            // TODO: check if neeeded
+            {
+                path: 'activiti/appId/:appId',
+                component: ActivitiDemoComponent,
+                canActivate: [AuthGuardBpm]
+            },
+            // TODO: check if needed
+            {
+                path: 'activiti/tasks/:id',
+                component: FormViewerComponent,
+                canActivate: [AuthGuardBpm]
+            },
+            // TODO: check if needed
+            {
+                path: 'activiti/tasksnode/:id',
+                component: FormNodeViewerComponent,
+                canActivate: [AuthGuardBpm]
+            },
+            {
+                path: 'webscript',
+                component: WebscriptComponent,
+                canActivate: [AuthGuardEcm]
+            },
+            {
+                path: 'tag',
+                component: TagComponent,
+                canActivate: [AuthGuardEcm]
+            },
+            {
+                path: 'social',
+                component: SocialComponent,
+                canActivate: [AuthGuardEcm]
+            },
+            { path: 'about', component: AboutComponent },
+            { path: 'form', component: FormDemoComponent },
+            { path: 'form-list', component: FormListDemoComponent }
+        ]
+    }
 ];
 
 export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

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

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

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

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

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

@@ -17,43 +17,116 @@
 
 import { Component, OnInit } from '@angular/core';
 import { Http } from '@angular/http';
+import { AlfrescoAuthenticationService, AppConfigService, BpmProductVersionModel, DiscoveryApiService, EcmProductVersionModel  } from 'ng2-alfresco-core';
 import { ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
-import { LogService } from 'ng2-alfresco-core';
 
 @Component({
-    selector: 'about-page',
+    selector: 'adf-about-page',
     templateUrl: './about.component.html',
     styleUrls: ['./about.component.css']
 })
 export class AboutComponent implements OnInit {
 
     data: ObjectDataTableAdapter;
+    status: ObjectDataTableAdapter;
+    license: ObjectDataTableAdapter;
+    modules: ObjectDataTableAdapter;
+    githubUrlCommitAlpha: string = 'https://github.com/Alfresco/alfresco-ng2-components/commits/';
+
+    configFile: string = 'app.config.json';
+    ecmHost: string = '';
+    bpmHost: string = '';
+
+    ecmVersion: EcmProductVersionModel = null;
+    bpmVersion: BpmProductVersionModel = null;
 
     constructor(private http: Http,
-                private logService: LogService) {
+                private appConfig: AppConfigService,
+                private authService: AlfrescoAuthenticationService,
+                private discovery: DiscoveryApiService) {
     }
 
     ngOnInit() {
+
+        if (this.authService.isEcmLoggedIn()) {
+            this.discovery.getEcmProductInfo().subscribe((ecmVers) => {
+                this.ecmVersion = ecmVers;
+
+                this.modules = new ObjectDataTableAdapter(this.ecmVersion.modules, [
+                    {type: 'text', key: 'id', title: 'ID', sortable: true},
+                    {type: 'text', key: 'title', title: 'Title', sortable: true},
+                    {type: 'text', key: 'version', title: 'Description', sortable: true},
+                    {type: 'text', key: 'installDate', title: 'Install Date', sortable: true},
+                    {type: 'text', key: 'installState', title: 'Install State', sortable: true},
+                    {type: 'text', key: 'versionMin', title: 'Version Minor', sortable: true},
+                    {type: 'text', key: 'versionMax', title: 'Version Max', sortable: true}
+                ]);
+
+                this.status = new ObjectDataTableAdapter([this.ecmVersion.status], [
+                    {type: 'text', key: 'isReadOnly', title: 'ReadOnly', sortable: true},
+                    {type: 'text', key: 'isAuditEnabled', title: 'Is Audit Enable', sortable: true},
+                    {type: 'text', key: 'isQuickShareEnabled', title: 'Is quick shared enable', sortable: true},
+                    {type: 'text', key: 'isThumbnailGenerationEnabled', title: 'Thumbnail Generation', sortable: true}
+                ]);
+
+                this.license = new ObjectDataTableAdapter([this.ecmVersion.license], [
+                    {type: 'text', key: 'issuedAt', title: 'Issued At', sortable: true},
+                    {type: 'text', key: 'expiresAt', title: 'Expires At', sortable: true},
+                    {type: 'text', key: 'remainingDays', title: 'Remaining Days', sortable: true},
+                    {type: 'text', key: 'holder', title: 'Holder', sortable: true},
+                    {type: 'text', key: 'mode', title: 'Is Cluster Enabled', sortable: true},
+                    {type: 'text', key: 'isClusterEnabled', title: 'Is Cluster Enabled', sortable: true},
+                    {type: 'text', key: 'isCryptodocEnabled', title: 'Is Cryptodoc Enable', sortable: true}
+                ]);
+            });
+        }
+
+        if (this.authService.isBpmLoggedIn()) {
+            this.discovery.getBpmProductInfo().subscribe((bpmVers) => {
+                this.bpmVersion = bpmVers;
+            });
+        }
+
         this.http.get('/versions.json').subscribe(response => {
-            let regexp = new RegExp('^(ng2-activiti|ng2-alfresco|alfresco-)', 'g');
+            let regexp = new RegExp('^(ng2-activiti|ng2-alfresco|alfresco-)');
 
             let alfrescoPackages = Object.keys(response.json().dependencies).filter((val) => {
-                this.logService.log(val);
                 return regexp.test(val);
             });
 
-            let alfrescoPackagesTableRappresentation = [];
+            let alfrescoPackagesTableRepresentation = [];
             alfrescoPackages.forEach((val) => {
-                this.logService.log(response.json().dependencies[val]);
-                alfrescoPackagesTableRappresentation.push({name: val, version: response.json().dependencies[val].version});
+                alfrescoPackagesTableRepresentation.push({
+                    name: val,
+                    version: response.json().dependencies[val].version
+                });
             });
 
-            this.logService.log(alfrescoPackagesTableRappresentation);
+            this.gitHubLinkCreation(alfrescoPackagesTableRepresentation);
 
-            this.data = new ObjectDataTableAdapter(alfrescoPackagesTableRappresentation, [
+            this.data = new ObjectDataTableAdapter(alfrescoPackagesTableRepresentation, [
                 {type: 'text', key: 'name', title: 'Name', sortable: true},
                 {type: 'text', key: 'version', title: 'Version', sortable: true}
             ]);
+
         });
+
+        this.ecmHost = this.appConfig.get<string>('ecmHost');
+        this.bpmHost = this.appConfig.get<string>('bpmHost');
+    }
+
+    private gitHubLinkCreation(alfrescoPackagesTableRepresentation): void {
+        let corePackage = alfrescoPackagesTableRepresentation.find((packageUp) => {
+            return packageUp.name === 'ng2-alfresco-core';
+        });
+
+        if (corePackage) {
+            let commitIsh = corePackage.version.split('-');
+            if (commitIsh.length > 1) {
+                this.githubUrlCommitAlpha = this.githubUrlCommitAlpha + commitIsh[1];
+            } else {
+                this.githubUrlCommitAlpha = this.githubUrlCommitAlpha + corePackage.version;
+            }
+        }
     }
 }

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

@@ -1,26 +0,0 @@
-.activiti-task-list__item:hover {
-    cursor: pointer;
-    font-weight: bold;
-}
-
-.activiti {
-    background-color: #f5f5f5;
-}
-
-.task-column {
-    background-color: #f5f5f5;
-    padding: 10px 10px 10px 10px;
-}
-
-.list-column {
-    width: 320px;
-}
-
-.mdl-layout__header {
-    z-index: 1;
-}
-
-.list-buttons {
-    text-align: right;
-    margin-bottom: 5px;
-}

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

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

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

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

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

@@ -15,62 +15,73 @@
  * limitations under the License.
  */
 
-import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core';
-import {
-    ActivitiApps,
-    ActivitiFilters,
-    ActivitiTaskList,
-    FilterRepresentationModel,
-    TaskDetailsEvent
-} from 'ng2-activiti-tasklist';
-import {
-    ActivitiProcessFilters,
-    ActivitiProcessInstanceDetails,
-    ActivitiProcessInstanceListComponent,
-    ActivitiStartProcessInstance,
-    FilterProcessRepresentationModel,
-    ProcessInstance
-} from 'ng2-activiti-processlist';
+// tslint:disable-next-line:adf-file-name
+import { AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Pagination } from 'alfresco-js-api';
 import { AnalyticsReportListComponent } from 'ng2-activiti-analytics';
-import { ActivatedRoute } from '@angular/router';
-import { Subscription } from 'rxjs/Rx';
 import {
-    ObjectDataTableAdapter,
-    ObjectDataRow,
-    DataSorting
-} from 'ng2-alfresco-datatable';
+    DynamicTableRow, FORM_FIELD_VALIDATORS, FormEvent, FormFieldEvent, FormRenderingService,
+    FormService, ValidateDynamicTableRowEvent
+} from 'ng2-activiti-form';
+import {
+    FilterProcessRepresentationModel,
+    ProcessFiltersComponent,
+    ProcessInstance,
+    ProcessInstanceDetailsComponent,
+    ProcessInstanceListComponent,
+    StartProcessInstanceComponent
+} from 'ng2-activiti-processlist';
+import {
+    AppsListComponent,
+    FilterRepresentationModel,
+    TaskDetailsComponent,
+    TaskDetailsEvent,
+    TaskFiltersComponent,
+    TaskListComponent,
+    TaskListService
+} from 'ng2-activiti-tasklist';
 import { AlfrescoApiService } from 'ng2-alfresco-core';
-import { FormService, FormRenderingService, FormEvent, FormFieldEvent } from 'ng2-activiti-form';
+import {
+    DataSorting,
+    ObjectDataRow,
+    ObjectDataTableAdapter
+} from 'ng2-alfresco-datatable';
+import { Subscription } from 'rxjs/Rx';
 import { /*CustomEditorComponent*/ CustomStencil01 } from './custom-editor/custom-editor.component';
-
-declare var componentHandler;
+import { DemoFieldValidator } from './demo-field-validator';
 
 const currentProcessIdNew = '__NEW__';
+const currentTaskIdNew = '__NEW__';
 
 @Component({
-    selector: 'activiti-demo',
+    selector: 'adf-activiti-demo',
     templateUrl: './activiti-demo.component.html',
-    styleUrls: ['./activiti-demo.component.css']
+    styleUrls: ['./activiti-demo.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
-export class ActivitiDemoComponent implements AfterViewInit {
+export class ActivitiDemoComponent implements AfterViewInit, OnDestroy, OnInit {
 
-    @ViewChild(ActivitiFilters)
-    activitifilter: ActivitiFilters;
+    @ViewChild(TaskFiltersComponent)
+    activitifilter: TaskFiltersComponent;
 
-    @ViewChild(ActivitiTaskList)
-    taskList: ActivitiTaskList;
+    @ViewChild(TaskListComponent)
+    taskList: TaskListComponent;
 
-    @ViewChild(ActivitiProcessFilters)
-    activitiprocessfilter: ActivitiProcessFilters;
+    @ViewChild(ProcessFiltersComponent)
+    activitiprocessfilter: ProcessFiltersComponent;
 
-    @ViewChild(ActivitiProcessInstanceListComponent)
-    processList: ActivitiProcessInstanceListComponent;
+    @ViewChild(ProcessInstanceListComponent)
+    processList: ProcessInstanceListComponent;
 
-    @ViewChild(ActivitiProcessInstanceDetails)
-    activitiprocessdetails: ActivitiProcessInstanceDetails;
+    @ViewChild(ProcessInstanceDetailsComponent)
+    activitiprocessdetails: ProcessInstanceDetailsComponent;
 
-    @ViewChild(ActivitiStartProcessInstance)
-    activitiStartProcess: ActivitiStartProcessInstance;
+    @ViewChild(TaskDetailsComponent)
+    activitidetails: TaskDetailsComponent;
+
+    @ViewChild(StartProcessInstanceComponent)
+    activitiStartProcess: StartProcessInstanceComponent;
 
     @ViewChild(AnalyticsReportListComponent)
     analyticsreportlist: AnalyticsReportListComponent;
@@ -79,6 +90,9 @@ export class ActivitiDemoComponent implements AfterViewInit {
     appId: number = null;
 
     fileShowed: boolean = false;
+    selectFirstReport: boolean = false;
+
+    private tabs = { tasks: 0, processes: 1, reports: 2 };
 
     content: Blob;
     contentName: string;
@@ -87,10 +101,16 @@ export class ActivitiDemoComponent implements AfterViewInit {
     currentTaskId: string;
     currentProcessInstanceId: string;
 
-    taskSchemaColumns: any [] = [];
-    processSchemaColumns: any [] = [];
+    taskSchemaColumns: any[] = [];
+    taskPagination: Pagination = {
+        skipCount: 0,
+        maxItems: 10,
+        totalItems: 0
+    };
+    taskPage: number = 0;
+    processSchemaColumns: any[] = [];
 
-    activeTab: string = 'tasks'; // tasks|processes|reports
+    activeTab: number = this.tabs.tasks; // tasks|processes|reports
 
     taskFilter: FilterRepresentationModel;
     report: any;
@@ -103,19 +123,26 @@ export class ActivitiDemoComponent implements AfterViewInit {
     dataTasks: ObjectDataTableAdapter;
     dataProcesses: ObjectDataTableAdapter;
 
+    fieldValidators = [
+        ...FORM_FIELD_VALIDATORS,
+        new DemoFieldValidator()
+    ];
+
     constructor(private elementRef: ElementRef,
                 private route: ActivatedRoute,
+                private router: Router,
+                private taskListService: TaskListService,
                 private apiService: AlfrescoApiService,
-                private formRenderingService: FormRenderingService,
-                private formService: FormService) {
+                formRenderingService: FormRenderingService,
+                formService: FormService) {
         this.dataTasks = new ObjectDataTableAdapter();
         this.dataTasks.setSorting(new DataSorting('created', 'desc'));
 
         this.dataProcesses = new ObjectDataTableAdapter(
             [],
             [
-                {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
-                {type: 'text', key: 'started', title: 'Started', cssClass: 'hidden', sortable: true}
+                { type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true },
+                { type: 'text', key: 'started', title: 'Started', cssClass: 'hidden', sortable: true }
             ]
         );
         this.dataProcesses.setSorting(new DataSorting('started', 'desc'));
@@ -134,9 +161,66 @@ export class ActivitiDemoComponent implements AfterViewInit {
             console.log(`Field value changed. Form: ${e.form.id}, Field: ${e.field.id}, Value: ${e.field.value}`);
         });
 
+        formService.validateDynamicTableRow.subscribe(
+            (e: ValidateDynamicTableRowEvent) => {
+                const row: DynamicTableRow = e.row;
+                if (row && row.value && row.value.name === 'admin') {
+                    e.summary.isValid = false;
+                    e.summary.text = 'Sorry, wrong value. You cannot use "admin".';
+                    e.preventDefault();
+                }
+            }
+        );
+
+        // Uncomment this block to see form event handling in action
+        /*
+        formService.formEvents.subscribe((event: Event) => {
+            console.log('Event fired:' + event.type);
+            console.log('Event Target:' + event.target);
+        });
+        */
+    }
+
+    onPrevPage(pagination: Pagination): void {
+        this.taskPagination.skipCount = pagination.skipCount;
+        this.taskPage--;
+    }
+
+    onNextPage(pagination: Pagination): void {
+        this.taskPagination.skipCount = pagination.skipCount;
+        this.taskPage++;
+    }
+
+    onChangePageSize(pagination: Pagination): void {
+        const { skipCount, maxItems } = pagination;
+        this.taskPage = this.currentPage(skipCount, maxItems);
+        this.taskPagination.maxItems = maxItems;
+        this.taskPagination.skipCount = skipCount;
+    }
+
+    onChangePageNumber(pagination: Pagination): void {
+        const { maxItems, skipCount } = pagination;
+        this.taskPage = this.currentPage(skipCount, maxItems);
+        this.taskPagination.maxItems = maxItems;
+        this.taskPagination.skipCount = skipCount;
+    }
+
+    currentPage(skipCount: number, maxItems: number): number {
+        return (skipCount && maxItems) ? Math.floor(skipCount / maxItems) : 0;
     }
 
     ngOnInit() {
+        this.taskListService.tasksList$.subscribe(
+            (tasks) => {
+                this.taskPagination = { count: tasks.data.length, maxItems: this.taskPagination.maxItems, skipCount: this.taskPagination.skipCount, totalItems: tasks.total };
+                console.log({ count: tasks.data.length, maxItems: this.taskPagination.maxItems, skipCount: this.taskPagination.skipCount, totalItems: tasks.total });
+            }, (err) => {
+                console.log('err' +  err);
+            });
+
+        if (this.router.url.includes('processes')) {
+            this.activeTab = this.tabs.processes;
+        }
         this.sub = this.route.params.subscribe(params => {
             let applicationId = params['appId'];
             if (applicationId && applicationId !== '0') {
@@ -148,22 +232,24 @@ export class ActivitiDemoComponent implements AfterViewInit {
             this.processFilter = null;
             this.currentProcessInstanceId = null;
         });
-        this.layoutType = ActivitiApps.LAYOUT_GRID;
+        this.layoutType = AppsListComponent.LAYOUT_GRID;
+
     }
 
     ngOnDestroy() {
         this.sub.unsubscribe();
+        this.taskListService.tasksList$.subscribe();
     }
 
-    onTaskFilterClick(filter: FilterRepresentationModel) {
+    onTaskFilterClick(filter: FilterRepresentationModel): void {
         this.applyTaskFilter(filter);
     }
 
-    onReportClick(event: any) {
+    onReportClick(event: any): void {
         this.report = event;
     }
 
-    onSuccessTaskFilterList(event: any) {
+    onSuccessTaskFilterList(event: any): void {
         this.applyTaskFilter(this.activitifilter.getCurrentFilter());
     }
 
@@ -174,102 +260,139 @@ export class ActivitiDemoComponent implements AfterViewInit {
         }
     }
 
-    onStartTaskSuccess(event: any) {
+    onStartTaskSuccess(event: any): void {
         this.activitifilter.selectFilterWithTask(event.id);
         this.currentTaskId = event.id;
     }
 
+    onCancelStartTask() {
+        this.currentTaskId = null;
+        this.reloadTaskFilters();
+    }
+
     onSuccessTaskList(event: FilterRepresentationModel) {
         this.currentTaskId = this.taskList.getCurrentId();
     }
 
-    onProcessFilterClick(event: FilterProcessRepresentationModel) {
+    onProcessFilterClick(event: FilterProcessRepresentationModel): void {
         this.currentProcessInstanceId = null;
         this.processFilter = event;
     }
 
-    onSuccessProcessFilterList() {
+    onSuccessProcessFilterList(): void {
         this.processFilter = this.activitiprocessfilter.getCurrentFilter();
     }
 
-    onSuccessProcessList(event: any) {
+    onSuccessProcessList(event: any): void {
         this.currentProcessInstanceId = this.processList.getCurrentId();
     }
 
-    onTaskRowClick(taskId) {
+    onTaskRowClick(taskId): void {
         this.currentTaskId = taskId;
     }
 
-    onProcessRowClick(processInstanceId) {
+    onTaskRowDblClick(event: CustomEvent) {
+        const taskId = event.detail.value.obj.id;
+        this.currentTaskId = taskId;
+    }
+
+    onProcessRowDblClick(event: CustomEvent) {
+        const processInstanceId = event.detail.value.obj.id;
         this.currentProcessInstanceId = processInstanceId;
     }
 
-    onEditReport(name: string) {
+    onProcessRowClick(processInstanceId): void {
+        this.currentProcessInstanceId = processInstanceId;
+    }
+
+    onEditReport(name: string): void {
         this.analyticsreportlist.reload();
     }
 
-    onReportSaved() {
+    onReportSaved(reportId): void {
+        this.analyticsreportlist.reload(reportId);
+    }
+
+    onReportDeleted(): void {
         this.analyticsreportlist.reload();
+        this.analyticsreportlist.selectReport(null);
     }
 
-    onReportDeleted() {
-        this.analyticsreportlist.reload();
-        this.selectFirstElementInReportList();
-    }
-
-    selectFirstElementInReportList() {
-        if (!this.analyticsreportlist.isReportsEmpty()) {
-            this.analyticsreportlist.selectReport(this.analyticsreportlist.reports[0]);
-        }
-    }
-
-    navigateStartProcess() {
+    navigateStartProcess(): void {
         this.resetProcessFilters();
         this.reloadProcessFilters();
         this.currentProcessInstanceId = currentProcessIdNew;
     }
 
-    onStartProcessInstance(instance: ProcessInstance) {
-        this.currentProcessInstanceId = instance.id;
-        this.activitiStartProcess.reset();
-        this.resetProcessFilters();
+    navigateStartTask(): void {
+        this.resetTaskFilters();
+        this.reloadTaskFilters();
+        this.currentTaskId = currentTaskIdNew;
     }
 
-    isStartProcessMode() {
+    onStartProcessInstance(instance: ProcessInstance): void {
+        this.currentProcessInstanceId = instance.id;
+        this.activitiStartProcess.reset();
+        this.activitiprocessfilter.selectRunningFilter();
+    }
+
+    onCancelProcessInstance() {
+        this.currentProcessInstanceId = null;
+        this.reloadProcessFilters();
+    }
+
+    isStartProcessMode(): boolean {
         return this.currentProcessInstanceId === currentProcessIdNew;
     }
 
-    processCancelled(data: any) {
+    isStartTaskMode(): boolean {
+        return this.currentTaskId === currentTaskIdNew;
+    }
+
+    processCancelled(data: any): void {
         this.currentProcessInstanceId = null;
         this.processList.reload();
     }
 
-    onSuccessNewProcess(data: any) {
+    onSuccessNewProcess(data: any): void {
         this.processList.reload();
     }
 
-    onFormCompleted(form) {
-        this.taskList.reload();
+    onFormCompleted(form): void {
         this.currentTaskId = null;
+        this.taskPagination.totalItems--;
+        const { skipCount, maxItems, totalItems } = this.taskPagination;
+        if (totalItems > 0 && (skipCount >= totalItems)) {
+            this.taskPagination.skipCount -= maxItems;
+        }
+        this.taskPage = this.currentPage(this.taskPagination.skipCount, maxItems);
+        this.taskList.reload();
     }
 
-    onFormContentClick(content: any) {
+    onFormContentClick(content: any): void {
         this.fileShowed = true;
         this.content = content.contentBlob;
         this.contentName = content.name;
     }
 
-    onTaskCreated(data: any) {
+    onAuditClick(event: any) {
+        console.log(event);
+    }
+
+    onAuditError(event: any): void {
+        console.error('My custom error message' + event);
+    }
+
+    onTaskCreated(data: any): void {
         this.currentTaskId = data.parentTaskId;
         this.taskList.reload();
     }
 
-    ngAfterViewInit() {
-        // workaround for MDL issues with dynamic components
-        if (componentHandler) {
-            componentHandler.upgradeAllRegistered();
-        }
+    onTaskDeleted(data: any): void {
+        this.taskList.reload();
+    }
 
+    ngAfterViewInit() {
         this.loadStencilScriptsInPageFromActiviti();
     }
 
@@ -284,9 +407,13 @@ export class ActivitiDemoComponent implements AfterViewInit {
         });
     }
 
-    onProcessDetailsTaskClick(event: TaskDetailsEvent) {
+    onShowProcessDiagram(event: any): void {
+        this.router.navigate(['/activiti/apps/' + this.appId + '/diagram/' + event.value]);
+    }
+
+    onProcessDetailsTaskClick(event: TaskDetailsEvent): void {
         event.preventDefault();
-        this.activeTab = 'tasks';
+        this.activeTab = this.tabs.tasks;
 
         const taskId = event.value.id;
         const processTaskDataRow = new ObjectDataRow({
@@ -295,25 +422,43 @@ export class ActivitiDemoComponent implements AfterViewInit {
             created: event.value.created
         });
         this.activitifilter.selectFilter(null);
-        this.taskList.setCustomDataSource([processTaskDataRow]);
-        this.taskList.selectTask(taskId);
+        if (this.taskList) {
+            this.taskList.setCustomDataSource([processTaskDataRow]);
+            this.taskList.selectTask(taskId);
+        }
         this.currentTaskId = taskId;
     }
 
-    private resetProcessFilters() {
+    private resetProcessFilters(): void {
         this.processFilter = null;
     }
 
-    private reloadProcessFilters() {
-        this.activitiprocessfilter.selectFilter(null);
+    private resetTaskFilters(): void {
+        this.taskFilter = null;
     }
 
-    onRowClick(event) {
+    private reloadProcessFilters(): void {
+        this.activitiprocessfilter.selectFilter(this.activitiprocessfilter.getCurrentFilter());
+    }
+
+    private reloadTaskFilters(): void {
+        this.activitifilter.selectFilter(this.activitifilter.getCurrentFilter());
+    }
+
+    onRowClick(event): void {
         console.log(event);
     }
 
-    onRowDblClick(event) {
+    onRowDblClick(event): void {
         console.log(event);
     }
 
+    isTaskCompleted(): boolean {
+        return this.activitidetails.isCompletedTask();
+    }
+
+    onAssignTask() {
+        this.taskList.reload();
+        this.currentTaskId = null;
+    }
 }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -15,7 +15,9 @@
  * limitations under the License.
  */
 
-import { NgModule, Component } from '@angular/core';
+/* tslint:disable */
+
+import { Component, NgModule } from '@angular/core';
 import { WidgetComponent } from 'ng2-activiti-form';
 
 @Component({
@@ -24,17 +26,29 @@ import { WidgetComponent } from 'ng2-activiti-form';
         <div style="color: red">Look, I'm a custom editor!</div>
     `
 })
-export class CustomEditorComponent extends WidgetComponent {}
+export class CustomEditorComponent extends WidgetComponent {
+
+    constructor() {
+        super();
+    }
+}
 
 @Component({
     selector: 'custom-stencil-01',
     template: `<div style="color: green">ADF version of custom Activiti stencil</div>`
 })
-export class CustomStencil01 extends WidgetComponent {}
+export class CustomStencil01 extends WidgetComponent {
+
+    constructor() {
+        super();
+    }
+}
 
 @NgModule({
     declarations: [ CustomEditorComponent, CustomStencil01 ],
     exports: [ CustomEditorComponent, CustomStencil01 ],
     entryComponents: [ CustomEditorComponent, CustomStencil01 ]
 })
-export class CustomEditorsModule {}
+export class CustomEditorsModule {
+
+}

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,49 @@
+<md-sidenav-container class="adf-nav-container">
+    <md-sidenav #sidenav class="adf-sidenav" position="end" mode="push">
+        <md-nav-list>
+            <a md-list-item *ngFor="let link of links" [routerLink]="link.href" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" (click)="sidenav.close()" class="adf-sidenav-link">
+                <md-icon mdListIcon>{{link.icon}}</md-icon>
+                <span>{{link.title}}</span>
+            </a>
+            <a md-list-item adf-logout (click)="sidenav.close()">
+                <md-icon mdListIcon>exit_to_app</md-icon>
+                <span>Logout</span>
+            </a>
+        </md-nav-list>
+    </md-sidenav>
+
+    <md-toolbar color="primary" class="adf-app-layout-toolbar" md-no-ink>
+        <adf-userinfo
+            class="adf-app-layout-user-profile"
+            [menuPositionX]="'before'"
+            [menuPositionY]="'above'">
+        </adf-userinfo>
+
+        <span fxFlex="1 1 auto" fxShow fxHide.lt-sm="true">ADF Demo Application</span>
+
+        <div class="adf-app-layout-menu-spacer"></div>
+
+        <search-bar fxFlex="0 1 auto"></search-bar>
+
+        <a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" md-button data-automation-id="home" href="" routerLink="/home" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Home</a>
+        <a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" md-button data-automation-id="files" href="" routerLink="/files" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Content Services</a>
+        <a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true"  md-button data-automation-id="activiti" href="" routerLink="/activiti" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Process Services</a>
+        <a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" md-button data-automation-id="login" href="" routerLink="/login">Login</a>
+
+        <theme-picker></theme-picker>
+        <button md-icon-button [mdMenuTriggerFor]="langMenu">
+            <md-icon>language</md-icon>
+        </button>
+        <md-menu #langMenu="mdMenu">
+            <button md-menu-item (click)="changeLanguage('en')">English</button>
+            <button md-menu-item (click)="changeLanguage('it')">Italian</button>
+            <button md-menu-item (click)="changeLanguage('ru')">Russian</button>
+        </md-menu>
+
+        <button md-icon-button (click)="sidenav.open()">
+            <md-icon>menu</md-icon>
+        </button>
+    </md-toolbar>
+
+    <router-outlet></router-outlet>
+</md-sidenav-container>

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

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

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

@@ -0,0 +1,53 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, ViewEncapsulation } from '@angular/core';
+import { AlfrescoTranslationService } from 'ng2-alfresco-core';
+
+@Component({
+    templateUrl: 'app-layout.component.html',
+    styleUrls: ['app-layout.component.scss'],
+    host: {
+        'class': 'adf-app-layout'
+    },
+    encapsulation: ViewEncapsulation.None
+})
+export class AppLayoutComponent {
+
+    links: Array<any> = [
+        { href: '/home', icon: 'home', title: 'Home' },
+        { href: '/files', icon: 'folder_open', title: 'Content Services' },
+        { href: '/activiti', icon: 'device_hub', title: 'Process Services' },
+        { href: '/login', icon: 'vpn_key', title: 'Login' },
+        { href: '/dl-custom-sources', icon: 'extension', title: 'DL: Custom Sources' },
+        { href: '/datatable', icon: 'view_module', title: 'DataTable' },
+        { href: '/form', icon: 'poll', title: 'Form' },
+        { href: '/form-list', icon: 'library_books', title: 'Form List' },
+        { href: '/uploader', icon: 'file_upload', title: 'Uploader' },
+        { href: '/webscript', icon: 'extension', title: 'Webscript' },
+        { href: '/tag', icon: 'local_offer', title: 'Tag' },
+        { href: '/social', icon: 'thumb_up', title: 'Social' },
+        { href: '/settings', icon: 'settings', title: 'Settings' },
+        { href: '/about', icon: 'info_outline', title: 'About' }
+    ];
+
+    constructor(private translateService: AlfrescoTranslationService) {}
+
+    changeLanguage(lang: string) {
+        this.translateService.use(lang);
+    }
+}

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

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

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

@@ -1,8 +1,10 @@
 <div class="p-10">
     <alfresco-datatable
         [data]="data"
+        [selectionMode]="selectionMode"
         [multiselect]="multiselect"
         [actions]="true"
+        rowStyleClass="custom-row-style"
         (showRowActionsMenu)="onShowRowActionsMenu($event)"
         (executeRowAction)="onExecuteRowAction($event)"
         (row-click)="onRowClick($event)"
@@ -19,12 +21,21 @@
         -->
     </alfresco-datatable>
 </div>
-<div class="p-10">
+<div class="p-10" data-automation-id="multiselect">
     <md-checkbox [(ngModel)]="multiselect">Multiselect</md-checkbox>
 </div>
+<div class="p-10">
+    <p>For 'Multiple' selection mode use Cmd (macOS) or Ctrl (Win) to toggle selection of multiple items.</p>
+    <md-select placeholder="Selection Mode" [(ngModel)]="selectionMode" name="food">
+        <md-option *ngFor="let mode of selectionModes" [value]="mode.value">
+            {{mode.viewValue}}
+        </md-option>
+    </md-select>
+</div>
 <div class="p-10">
     <button md-raised-button (click)="reset()">Reset to default</button>
     <button md-raised-button (click)="addRow()">Add row</button>
     <button md-raised-button (click)="replaceRows()">Replace rows</button>
     <button md-raised-button (click)="replaceColumns()">Replace columns</button>
+    <button md-raised-button (click)="getRowForNode()">Load Node</button>
 </div>

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

@@ -15,25 +15,37 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
-import { ObjectDataTableAdapter, DataSorting, ObjectDataRow, ObjectDataColumn, DataCellEvent, DataRowActionEvent } from 'ng2-alfresco-datatable';
+import { Component, Input } from '@angular/core';
+import { AlfrescoApiService } from 'ng2-alfresco-core';
+import { DataCellEvent, DataRowActionEvent, DataSorting, ObjectDataColumn, ObjectDataRow, ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
+import { Observable } from 'rxjs/Rx';
 
 @Component({
     selector: 'datatable-demo',
-    templateUrl: './datatable-demo.component.html'
+    templateUrl: './datatable-demo.component.html',
+    styleUrls: ['./datatable-demo.component.css']
 })
 export class DataTableDemoComponent {
 
     multiselect: boolean = false;
     data: ObjectDataTableAdapter;
 
+    @Input()
+    selectionMode = 'single';
+
+    selectionModes = [
+        { value: 'none', viewValue: 'None' },
+        { value: 'single', viewValue: 'Single' },
+        { value: 'multiple', viewValue: 'Multiple' }
+    ];
+
     private _imageUrl: string = 'http://placehold.it/140x100';
     private _createdBy: any = {
         name: 'Denys Vuika',
         email: 'denys.vuika@alfresco.com'
     };
 
-    constructor() {
+    constructor(private apiService: AlfrescoApiService) {
         this.reset();
     }
 
@@ -70,11 +82,11 @@ export class DataTableDemoComponent {
                 }
             ],
             [
-                {type: 'image', key: 'icon', title: '', srTitle: 'Thumbnail'},
-                {type: 'text', key: 'id', title: 'Id', sortable: true},
-                {type: 'text', key: 'createdOn', title: 'Created On', sortable: true},
-                {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
-                {type: 'text', key: 'createdBy.name', title: 'Created By', sortable: true}
+                { type: 'image', key: 'icon', title: '', srTitle: 'Thumbnail' },
+                { type: 'text', key: 'id', title: 'Id', sortable: true },
+                { type: 'text', key: 'createdOn', title: 'Created On', sortable: true },
+                { type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true },
+                { type: 'text', key: 'createdBy.name', title: 'Created By', sortable: true }
             ]
         );
 
@@ -162,4 +174,33 @@ export class DataTableDemoComponent {
     onRowDblClick(event) {
         console.log(event);
     }
+
+    getRowForNode() {
+        let opts: any = {
+            includeSource: true,
+            include: ['path', 'properties', 'allowableOperations']
+        };
+
+        Observable.fromPromise(this.apiService.getInstance().nodes
+            .getNodeInfo('-my-', opts)).subscribe((data) => {
+                console.log('FUnNy');
+                console.log(data);
+                let objects = new ObjectDataTableAdapter([
+                    {
+                        id: data.id,
+                        name: data.name,
+                        createdBy: data.createdByUser.displayName,
+                        createdOn: new Date(data.createdAt),
+                        icon: 'material-icons://face'
+                    }],
+                    [
+                        { type: 'image', key: 'icon', title: '', srTitle: 'Thumbnail' },
+                        { type: 'text', key: 'id', title: 'Id', sortable: true },
+                        { type: 'text', key: 'createdOn', title: 'Created On', sortable: true },
+                        { type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true },
+                        { type: 'text', key: 'createdBy.name', title: 'Created By', sortable: true }
+                    ]);
+                this.data = objects;
+            });
+    }
 }

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

@@ -0,0 +1,9 @@
+<ng-container *ngIf="nodeId">
+    <adf-viewer [fileNodeId]="nodeId">
+        <extension-viewer [supportedExtensions]="['obj','3DS']" #extension>
+            <ng-template let-urlFileContent="urlFileContent" let-extension="extension" >
+                <threed-viewer [urlFile]="urlFileContent" [extension]="extension" ></threed-viewer>
+            </ng-template>
+        </extension-viewer>
+    </adf-viewer>
+</ng-container>

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

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

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

@@ -0,0 +1,13 @@
+<adf-toolbar>
+    <adf-toolbar-title>
+        <md-select [(ngModel)]="selectedSource">
+            <md-option *ngFor="let source of sources" [value]="source.value">
+                {{ source.title }}
+            </md-option>
+        </md-select>
+    </adf-toolbar-title>
+</adf-toolbar>
+<adf-document-list
+    [currentFolderId]="selectedSource"
+    locationFormat="/files">
+</adf-document-list>

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

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

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

@@ -1,22 +0,0 @@
-.container {
-    margin: 10px;
-}
-
-@media only screen and (max-width: 640px) {
-    .container {
-        margin: 0;
-    }
-}
-
-.error-message {
-    text-align: left;
-}
-
-.error-message--text {
-    color: #d50000;
-}
-
-.options-container {
-    width: 250px;
-    margin: 20px;
-}

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

@@ -1,183 +1,310 @@
 <div class="container">
-    <alfresco-upload-drag-area
-            [rootFolderId]="documentList.currentFolderId"
-            [versioning] = "versioning"
-            (onSuccess)="documentList.reload()">
-        <alfresco-document-list-breadcrumb
-            [target]="documentList"
-            [folderNode]="documentList.folderNode">
-        </alfresco-document-list-breadcrumb>
+    <div class="adf-demo-site-container-style" id="demo-container">
+        <adf-sites-dropdown (change)="getSiteContent($event)">
+        </adf-sites-dropdown>
+    </div>
+    <adf-upload-drag-area
+        [parentId]="getDocumentListCurrentFolderId()"
+        [versioning]="versioning"
+        [adf-node-permission]="'create'"
+        [adf-nodes]="getCurrentDocumentListNode()">
         <div *ngIf="errorMessage" class="error-message">
-            <button (click)="resetError()" class="mdl-button mdl-js-button mdl-button--icon">
-                <i class="material-icons">highlight_off</i>
+            <button (click)="resetError()" md-icon-button>
+                <md-icon>highlight_off</md-icon>
             </button>
             <span class="error-message--text">{{errorMessage}}</span>
         </div>
-        <alfresco-document-list
+        <adf-toolbar [color]="toolbarColor" class="adf-files-toolbar">
+            <adf-toolbar-title fxFlex="0 1 auto">
+                <adf-breadcrumb fxShow fxHide.lt-sm="true"
+                    class="files-breadcrumb"
+                    root="Personal Files"
+                    [target]="documentList"
+                    [folderNode]="documentList.folderNode">
+                </adf-breadcrumb>
+                <adf-dropdown-breadcrumb fxHide fxShow.lt-sm="true"
+                    class="files-breadcrumb"
+                    [target]="documentList"
+                    [folderNode]="documentList.folderNode">
+                </adf-dropdown-breadcrumb>
+            </adf-toolbar-title>
+
+            <adf-toolbar-divider fxFlex="0 0 auto"></adf-toolbar-divider>
+
+            <div fxFlex="0 0 auto" class="adf-document-action-buttons" fxShow fxHide.lt-sm="true">
+                <button md-icon-button
+                    (click)="onCreateFolderClicked($event)">
+                    <md-icon>create_new_folder</md-icon>
+                </button>
+                <button md-icon-button
+                    [disabled]="!hasSelection(documentList.selection)"
+                    title="Download"
+                    (click)="downloadNodes(documentList.selection)">
+                    <md-icon>get_app</md-icon>
+                </button>
+                <button md-icon-button
+                        adf-node-permission="delete"
+                        [adf-nodes]="documentList.selection">
+                    <md-icon>delete</md-icon>
+                </button>
+            </div>
+
+            <button fxFlex="0 0 auto" md-icon-button [mdMenuTriggerFor]="themePicker">
+                <md-icon>format_color_fill</md-icon>
+            </button>
+
+            <md-menu #themePicker="mdMenu">
+                <button md-menu-item (click)="toolbarColor = 'default'">Default</button>
+                <button md-menu-item (click)="toolbarColor = 'primary'">Primary</button>
+                <button md-menu-item (click)="toolbarColor = 'accent'">Accent</button>
+                <button md-menu-item (click)="toolbarColor = 'warn'">Warn</button>
+            </md-menu>
+
+            <adf-toolbar-divider fxFlex="0 0 auto" fxHide fxShow.lt-sm="true"></adf-toolbar-divider>
+
+            <button fxFlex="0 0 auto" md-icon-button [mdMenuTriggerFor]="menu" fxHide fxShow.lt-sm="true">
+                <md-icon>more_vert</md-icon>
+            </button>
+            <md-menu #menu="mdMenu">
+                <button md-menu-item
+                    (click)="onCreateFolderClicked($event)">
+                    <md-icon>create_new_folder</md-icon>
+                    <span>New folder</span>
+                </button>
+                <button md-menu-item
+                    [disabled]="!hasSelection(documentList.selection)"
+                    title="Download"
+                    (click)="downloadNodes(documentList.selection)">
+                    <md-icon>get_app</md-icon>
+                    <span>Download</span>
+                </button>
+                <button md-menu-item
+                        adf-node-permission="delete"
+                        [adf-nodes]="documentList.selection">
+                    <md-icon>delete</md-icon>
+                    <span>Delete</span>
+                </button>
+            </md-menu>                    
+        </adf-toolbar>
+        <adf-document-list
                 #documentList
+                [permissionsStyle]="permissionsStyle"
                 [currentFolderId]="currentFolderId"
                 [contextMenuActions]="true"
                 [contentActions]="true"
                 [allowDropFiles]="true"
+                [selectionMode]="selectionMode"
+                [multiselect]="multiselect"
                 (error)="onNavigationError($event)"
                 (success)="resetError()"
-                (preview)="showFile($event)">
+                (preview)="showFile($event)"
+                (folderChange)="onFolderChange($event)"
+                (permissionError)="handlePermissionError($event)">
             <data-columns>
-                <data-column key="$thumbnail" type="image" [sortable]="false"></data-column>
                 <data-column
-                        title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
-                        key="name"
-                        class="full-width ellipsis-cell">
-                    <!-- Example of using custom column template -->
-                    <!--
-                    <template let-entry="$implicit">
-                        <span>Hi! {{entry.data.getValue(entry.row, entry.col)}}</span>
-                    </template>
-                    -->
+                    key="$thumbnail"
+                    type="image"
+                    [sortable]="false"
+                    class="image-table-cell">
                 </data-column>
+                <data-column
+                    key="name"
+                    title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
+                    [formatTooltip]="getNodeNameTooltip"
+                    class="full-width ellipsis-cell">
+                </data-column>
+                <!-- Location column demo -->
+                <!--
+                <data-column
+                    key="path"
+                    type="location"
+                    format="/files"
+                    title="Location">
+                </data-column>
+                -->
+                <data-column
+                    key="content.sizeInBytes"
+                    title="Size"
+                    type="fileSize">
+                </data-column>
+                <!-- Notes: has performance overhead due to multiple files/folders causing separate HTTP calls to get tags -->
+                <!--
                 <data-column
                     title="{{'DOCUMENT_LIST.COLUMNS.TAG' | translate}}"
                     key="id"
                     class="full-width ellipsis-cell">
-                    <template let-entry="$implicit">
+                    <ng-template let-entry="$implicit">
                         <alfresco-tag-node-list  [nodeId]="entry.data.getValue(entry.row, entry.col)"></alfresco-tag-node-list>
-                    </template>
+                    </ng-template>
+                </data-column>
+                -->
+                <data-column
+                    title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
+                    key="createdByUser.displayName"
+                    class="desktop-only">
                 </data-column>
                 <data-column
-                        title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
-                        key="createdByUser.displayName"
-                        class="desktop-only">
-                </data-column>
-                <data-column
-                        title="{{'DOCUMENT_LIST.COLUMNS.CREATED_ON' | translate}}"
-                        key="createdAt"
-                        type="date"
-                        format="medium"
-                        class="desktop-only">
+                    title="{{'DOCUMENT_LIST.COLUMNS.CREATED' | translate}}"
+                    key="createdAt"
+                    type="date"
+                    format="timeAgo"
+                    class="desktop-only">
                 </data-column>
             </data-columns>
 
             <content-actions>
                 <!-- folder actions -->
                 <content-action
-                        target="folder"
-                        title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.SYSTEM_1' | translate}}"
-                        handler="system1">
+                    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
-                        target="folder"
-                        title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.CUSTOM' | translate}}"
-                        (execute)="myFolderAction1($event)">
+                    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
-                        target="folder"
-                        title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.DELETE' | translate}}"
-                        handler="delete">
+                    icon="delete"
+                    target="folder"
+                    permission="delete"
+                    [disableWithNoPermission]="true"
+                    title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.DELETE' | translate}}"
+                    (permissionEvent)="handlePermissionError($event)"
+                    handler="delete">
                 </content-action>
                 <!-- document actions -->
                 <content-action
-                        target="document"
-                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DOWNLOAD' | translate}}"
-                        handler="download">
+                    icon="content_copy"
+                    target="document"
+                    title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.COPY' | translate}}"
+                    permission="update"
+                    [disableWithNoPermission]="true"
+                    (error)="onContentActionError($event)"
+                    (success)="onContentActionSuccess($event)"
+                    handler="copy">
                 </content-action>
                 <content-action
-                        target="document"
-                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.SYSTEM_2' | translate}}"
-                        handler="system2">
+                    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
-                        target="document"
-                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.CUSTOM' | translate}}"
-                        (execute)="myCustomAction1($event)">
-                </content-action>
-                <content-action
-                        target="document"
-                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DELETE' | translate}}"
-                        handler="delete">
-                </content-action>
-                <content-action
-                        target="folder"
-                        title="Activiti: View Form"
-                        (execute)="viewActivitiForm($event)">
+                    icon="delete"
+                    target="document"
+                    permission="delete"
+                    [disableWithNoPermission]="true"
+                    (permissionEvent)="handlePermissionError($event)"
+                    title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DELETE' | translate}}"
+                    (success)="onDeleteActionSuccess($event)"
+                    handler="delete">
                 </content-action>
             </content-actions>
-        </alfresco-document-list>
-    </alfresco-upload-drag-area>
+        </adf-document-list>
+    </adf-upload-drag-area>
 </div>
 
 <context-menu-holder></context-menu-holder>
 
-<p class="options-container">
-    <label for="switch-multiple-file" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-        <input type="checkbox" id="switch-multiple-file" class="mdl-switch__input" (change)="toggleMultipleFileUpload()" >
-        <span class="mdl-switch__label">Multiple File Upload</span>
-    </label>
-</p>
+<div class="adf-content-service-settings">
 
-
-<p class="options-container">
-    <label for="switch-folder-upload" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-        <input type="checkbox" id="switch-folder-upload" class="mdl-switch__input" (change)="toggleFolder()">
-        <span class="mdl-switch__label">Folder Upload</span>
-    </label>
-</p>
-
-<p class="options-container">
-    <label for="switch-accepted-file-type" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-        <input type="checkbox" id="switch-accepted-file-type" class="mdl-switch__input" (change)="toggleAcceptedFilesType()">
-        <span class="mdl-switch__label">Filter extension</span>
-    </label>
-</p>
-
-<p style="width:250px;margin: 20px;">
-    <label for="switch-versioning" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-        <input type="checkbox" id="switch-versioning" class="mdl-switch__input" (change)="toggleVersioning()">
-        <span class="mdl-switch__label">Versioning</span>
-    </label>
-</p>
-
-<h5>Upload</h5>
-<br>
-<div *ngIf="acceptedFilesTypeShow">
-    <label class="mdl-input__label">Extension accepted
-        <input type="text" data-automation-id="accepted-files-type" [(ngModel)]="acceptedFilesType">
-    </label>
-    <br/>
-</div>
-<div *ngIf="!acceptedFilesTypeShow">
-    <alfresco-upload-button data-automation-id="multiple-file-upload"
-                            [rootFolderId]="documentList.currentFolderId"
-                            [multipleFiles]="multipleFileUpload"
-                            [uploadFolders]="folderUpload"
-                            [versioning] = "versioning"
-                            (onSuccess)="documentList.reload()">
-        <div class="mdl-spinner mdl-js-spinner is-active"></div>
-    </alfresco-upload-button>
-</div>
-<div *ngIf="acceptedFilesTypeShow">
-    <alfresco-upload-button data-automation-id="multiple-file-upload"
-                            [rootFolderId]="documentList.currentFolderId"
-                            [acceptedFilesType]="acceptedFilesType"
-                            [multipleFiles]="multipleFileUpload"
-                            [uploadFolders]="folderUpload"
-                            [versioning] = "versioning"
-                            (onSuccess)="documentList.reload()">
-        <div class="mdl-spinner mdl-js-spinner is-active"></div>
-    </alfresco-upload-button>
+    <p>Current folder ID: {{ documentList.currentFolderId }}</p>
+    
+    <div class="p-10">
+        Selected Nodes:
+        <ul>
+            <li *ngFor="let node of documentList.selection">
+                {{ node.entry.name }}
+            </li>
+        </ul>
+    </div>
+    
+    <div class="container">
+        <section>
+            <md-slide-toggle [color]="'primary'" [(ngModel)]="multiselect">Multiselect (with checkboxes)</md-slide-toggle>
+        </section>
+    
+        <section>
+            <md-slide-toggle [color]="'primary'" [(ngModel)]="multipleFileUpload">Multiple File Upload</md-slide-toggle>
+        </section>
+    
+        <section>
+            <md-slide-toggle [color]="'primary'" [(ngModel)]="folderUpload">Folder upload</md-slide-toggle>
+        </section>
+    
+        <section>
+            <md-slide-toggle [color]="'primary'" [(ngModel)]="acceptedFilesTypeShow">Custom extensions filter</md-slide-toggle>
+        </section>
+    
+        <section>
+            <md-slide-toggle [color]="'primary'" [(ngModel)]="versioning">Enable versioning</md-slide-toggle>
+        </section>
+    
+        <h5>Upload</h5>
+        <section *ngIf="acceptedFilesTypeShow">
+            <md-input-container>
+                <input mdInput placeholder="Extension accepted" [(ngModel)]="acceptedFilesType"  data-automation-id="accepted-files-type">
+            </md-input-container>
+        </section>
+        <div *ngIf="!acceptedFilesTypeShow">
+            <adf-upload-button
+                #uploadButton
+                tooltip="Custom tooltip"
+                [disabled]="!enableUpload"
+                data-automation-id="multiple-file-upload"
+                [rootFolderId]="documentList.currentFolderId"
+                [multipleFiles]="multipleFileUpload"
+                [uploadFolders]="folderUpload"
+                [versioning]="versioning"
+                [adf-node-permission]="'create'"
+                [adf-nodes]="getCurrentDocumentListNode()"
+                (permissionEvent)="handlePermissionError($event)">
+            </adf-upload-button>
+        </div>
+        <div *ngIf="acceptedFilesTypeShow">
+            <adf-upload-button
+                #uploadButton
+                tooltip="Custom tooltip"
+                [disabled]="!enableUpload"
+                data-automation-id="multiple-file-upload"
+                [rootFolderId]="documentList.currentFolderId"
+                [acceptedFilesType]="acceptedFilesType"
+                [multipleFiles]="multipleFileUpload"
+                [uploadFolders]="folderUpload"
+                [versioning]="versioning"
+                [adf-node-permission]="'create'"
+                [adf-nodes]="getCurrentDocumentListNode()"
+                (permissionEvent)="handlePermissionError($event)">
+            </adf-upload-button>
+        </div>
+        <section>
+            <md-checkbox [(ngModel)]="enableUpload">Enable upload (demoing enabled/disabled state only if the permission are not checked dynamically)</md-checkbox>
+        </section>
+    </div>
+    
+    <div class="p-10">
+        <p>For 'Multiple' selection mode use Cmd (macOS) or Ctrl (Win) to toggle selection of multiple items.</p>
+        <md-select placeholder="Selection Mode" [(ngModel)]="selectionMode" name="food">
+            <md-option *ngFor="let mode of selectionModes" [value]="mode.value">
+                {{mode.viewValue}}
+            </md-option>
+        </md-select>
+    </div>            
 </div>
+
 <file-uploading-dialog #fileDialog></file-uploading-dialog>
-
-<div *ngIf="fileShowed">
-    <alfresco-viewer [(showViewer)]="fileShowed"
-                     [fileNodeId]="fileNodeId"
-                     [overlayMode]="true">
-
-        <extension-viewer [supportedExtensions]="['obj','3DS']" #extension>
-            <template let-urlFileContent="urlFileContent" let-extension="extension" >
-                <threed-viewer [urlFile]="urlFileContent" [extension]="extension" ></threed-viewer>
-            </template>
-        </extension-viewer>
-
-    </alfresco-viewer>
-</div>
-

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

@@ -0,0 +1,93 @@
+$minimumDocumentListWidth: 425px;
+
+.container {
+    margin: 10px;
+}
+
+@media only screen and (max-width: 640px) {
+    .container {
+        margin: 0;
+    }
+}
+
+.error-message {
+    text-align: left;
+}
+
+.error-message--text {
+    color: #d50000;
+}
+
+.adf-not-overlay-viewer {
+    height:900px;
+}
+
+adf-document-list ::ng-deep adf-datatable tr.is-selected .image-table-cell {
+    position: relative;
+}
+
+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 tr.is-selected .image-table-cell::before {
+    content: "\E876"; /* "done" */
+    font-family: "Material Icons";
+    font-size: 24px;
+    line-height: 32px;
+    text-align: center;
+    color: white;
+    position: absolute;
+    width: 32px;
+    height: 32px;
+    top: 50%;
+    left: 50%;
+    margin-top: -16px;
+    margin-left: -12px;
+    border-radius: 100%;
+    background: #00bcd4;
+}
+
+.adf-demo-site-container-style {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    width: 100%;
+    min-width: 200px;
+}
+
+.adf-content-service-settings {
+    padding: 16px;
+}
+
+.adf-files-toolbar {
+    & /deep/ md-toolbar-row {
+        white-space: initial;
+
+        & /deep/ a.adf-breadcrumb-item-anchor {
+            white-space: initial;
+        }
+    }
+}
+
+@media (max-width: $minimumDocumentListWidth) {
+    adf-document-list /deep/ adf-datatable  {
+        & /deep/ .adf-data-table-cell--fileSize {
+            display: none;
+        }
+    }
+
+    .adf-demo-site-container-style {
+        width: 100%;
+        display: block;
+
+        & /deep/ .adf-site-dropdown-list-element {
+            width: 100%;
+        }
+    }
+}
+
+

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

@@ -15,67 +15,91 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, Optional, ViewChild, ChangeDetectorRef } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnInit, Optional, ViewChild } from '@angular/core';
+import { MdDialog } from '@angular/material';
 import { ActivatedRoute, Params, Router } from '@angular/router';
-import { AlfrescoAuthenticationService, LogService } from 'ng2-alfresco-core';
-import { DocumentActionsService, DocumentListComponent, ContentActionHandler, DocumentActionModel, FolderActionModel } from 'ng2-alfresco-documentlist';
-import { FormService } from 'ng2-activiti-form';
+import { MinimalNodeEntity } from 'alfresco-js-api';
+import {
+    AlfrescoApiService, AlfrescoContentService, AlfrescoTranslationService, CreateFolderDialogComponent,
+    DownloadZipDialogComponent, FileUploadEvent, FolderCreatedEvent, NotificationService,
+    SiteModel, UploadService
+} from 'ng2-alfresco-core';
+import { DataColumn, DataRow } from 'ng2-alfresco-datatable';
+import { DocumentListComponent, PermissionStyleModel } from 'ng2-alfresco-documentlist';
+
+const DEFAULT_FOLDER_TO_SHOW = '-my-';
 
 @Component({
-    selector: 'files-component',
+    selector: 'adf-files-component',
     templateUrl: './files.component.html',
-    styleUrls: ['./files.component.css']
+    styleUrls: ['./files.component.scss']
 })
 export class FilesComponent implements OnInit {
     // The identifier of a node. You can also use one of these well-known aliases: -my- | -shared- | -root-
-    currentFolderId: string = '-my-';
+    currentFolderId: string = DEFAULT_FOLDER_TO_SHOW;
 
     errorMessage: string = null;
     fileNodeId: any;
-    fileShowed: boolean = false;
+    showViewer: boolean = false;
+
+    toolbarColor = 'default';
+
+    selectionModes = [
+        { value: 'none', viewValue: 'None' },
+        { value: 'single', viewValue: 'Single' },
+        { value: 'multiple', viewValue: 'Multiple' }
+    ];
+
+    @Input()
+    selectionMode = 'multiple';
+
+    @Input()
+    multiselect = false;
+
+    @Input()
     multipleFileUpload: boolean = false;
+
+    @Input()
     folderUpload: boolean = false;
+
+    @Input()
     acceptedFilesTypeShow: boolean = false;
+
+    @Input()
     versioning: boolean = false;
+
+    @Input()
     acceptedFilesType: string = '.jpg,.pdf,.js';
 
+    @Input()
+    enableUpload: boolean = true;
+
     @ViewChild(DocumentListComponent)
     documentList: DocumentListComponent;
 
-    constructor(private documentActions: DocumentActionsService,
-                private authService: AlfrescoAuthenticationService,
-                private formService: FormService,
-                private logService: LogService,
-                private changeDetector: ChangeDetectorRef,
+    permissionsStyle: PermissionStyleModel[] = [];
+
+    constructor(private changeDetector: ChangeDetectorRef,
+                private apiService: AlfrescoApiService,
+                private notificationService: NotificationService,
+                private uploadService: UploadService,
+                private contentService: AlfrescoContentService,
+                private dialog: MdDialog,
+                private translateService: AlfrescoTranslationService,
                 private router: Router,
                 @Optional() private route: ActivatedRoute) {
-        documentActions.setHandler('my-handler', this.myDocumentActionHandler.bind(this));
-    }
-
-    myDocumentActionHandler(obj: any) {
-        window.alert('my custom action handler');
-    }
-
-    myCustomAction1(event) {
-        alert('Custom document action for ' + event.value.entry.name);
-    }
-
-    myFolderAction1(event) {
-        alert('Custom folder action for ' + event.value.entry.name);
     }
 
     showFile(event) {
-        if (event.value.entry.isFile) {
-            this.fileNodeId = event.value.entry.id;
-            this.fileShowed = true;
-        } else {
-            this.fileShowed = false;
+        const entry = event.value.entry;
+        if (entry && entry.isFile) {
+            this.router.navigate(['/files', entry.id, 'view']);
         }
     }
 
-    toggleMultipleFileUpload() {
-        this.multipleFileUpload = !this.multipleFileUpload;
-        return this.multipleFileUpload;
+    onFolderChange($event) {
+        this.currentFolderId = $event.value.id;
+        this.router.navigate(['/files', $event.value.id]);
     }
 
     toggleFolder() {
@@ -84,16 +108,6 @@ export class FilesComponent implements OnInit {
         return this.folderUpload;
     }
 
-    toggleAcceptedFilesType() {
-        this.acceptedFilesTypeShow = !this.acceptedFilesTypeShow;
-        return this.acceptedFilesTypeShow;
-    }
-
-    toggleVersioning() {
-        this.versioning = !this.versioning;
-        return this.versioning;
-    }
-
     ngOnInit() {
         if (this.route) {
             this.route.params.forEach((params: Params) => {
@@ -103,18 +117,21 @@ export class FilesComponent implements OnInit {
                 }
             });
         }
-        if (this.authService.isBpmLoggedIn()) {
-            this.formService.getProcessDefinitions().subscribe(
-                defs => this.setupBpmActions(defs || []),
-                err => this.logService.error(err)
-            );
-        } else {
-            this.logService.warn('You are not logged in to BPM');
-        }
+
+        this.uploadService.fileUploadComplete.asObservable().debounceTime(300).subscribe(value => this.onFileUploadEvent(value));
+        this.uploadService.fileUploadDeleted.subscribe((value) => this.onFileUploadEvent(value));
+        this.contentService.folderCreated.subscribe(value => this.onFolderCreated(value));
+
+        // this.permissionsStyle.push(new PermissionStyleModel('document-list__create', PermissionsEnum.CREATE));
+        // this.permissionsStyle.push(new PermissionStyleModel('document-list__disable', PermissionsEnum.NOT_CREATE, false, true));
     }
 
-    viewActivitiForm(event?: any) {
-        this.router.navigate(['/activiti/tasksnode', event.value.entry.id]);
+    getCurrentDocumentListNode(): MinimalNodeEntity[] {
+        if (this.documentList.folderNode) {
+            return [ { entry: this.documentList.folderNode } ];
+        } else {
+            return [];
+        }
     }
 
     onNavigationError(err: any) {
@@ -127,23 +144,149 @@ export class FilesComponent implements OnInit {
         this.errorMessage = null;
     }
 
-    private setupBpmActions(actions: any[]) {
-        actions.map(def => {
-            let documentAction = new DocumentActionModel();
-            documentAction.title = 'Activiti: ' + (def.name || 'Unknown process');
-            documentAction.handler = this.getBpmActionHandler(def);
-            this.documentList.actions.push(documentAction);
+    onFileUploadEvent(event: FileUploadEvent) {
+        if (event && event.file.options.parentId === this.documentList.currentFolderId) {
+            this.documentList.reload();
+        }
+    }
 
-            let folderAction = new FolderActionModel();
-            folderAction.title = 'Activiti: ' + (def.name || 'Unknown process');
-            folderAction.handler = this.getBpmActionHandler(def);
-            this.documentList.actions.push(folderAction);
+    onFolderCreated(event: FolderCreatedEvent) {
+        console.log('FOLDER CREATED');
+        console.log(event);
+        if (event && event.parentId === this.documentList.currentFolderId) {
+            this.documentList.reload();
+        }
+    }
+
+    handlePermissionError(event: any) {
+        this.notificationService.openSnackMessage(
+            `You don't have the ${event.permission} permission to ${event.action} the ${event.type} `,
+            4000
+        );
+    }
+
+    onContentActionError(errors) {
+        const errorStatusCode = JSON.parse(errors.message).error.statusCode;
+        let translatedErrorMessage: any;
+
+        switch (errorStatusCode) {
+            case 403:
+                translatedErrorMessage = this.translateService.get('OPERATION.ERROR.PERMISSION');
+                break;
+            case 409:
+                translatedErrorMessage = this.translateService.get('OPERATION.ERROR.CONFLICT');
+                break;
+            default:
+                translatedErrorMessage = this.translateService.get('OPERATION.ERROR.UNKNOWN');
+        }
+
+        this.notificationService.openSnackMessage(translatedErrorMessage.value, 4000);
+    }
+
+    onContentActionSuccess(message) {
+        let translatedMessage: any = this.translateService.get(message);
+        this.notificationService.openSnackMessage(translatedMessage.value, 4000);
+    }
+
+    onDeleteActionSuccess(message) {
+        this.uploadService.fileDeleted.next(message);
+    }
+
+    onCreateFolderClicked(event: Event) {
+        let dialogRef = this.dialog.open(CreateFolderDialogComponent);
+        dialogRef.afterClosed().subscribe(folderName => {
+            if (folderName) {
+                this.contentService.createFolder('', folderName, this.documentList.currentFolderId).subscribe(
+                    node => console.log(node),
+                    err => console.log(err)
+                );
+            }
         });
     }
 
-    private getBpmActionHandler(processDefinition: any): ContentActionHandler {
-        return function (obj: any, target?: any) {
-            window.alert(`Starting BPM process: ${processDefinition.id}`);
-        }.bind(this);
+    getSiteContent(site: SiteModel) {
+        this.currentFolderId = site && site.guid ? site.guid : DEFAULT_FOLDER_TO_SHOW;
+    }
+
+    getDocumentListCurrentFolderId() {
+        return this.documentList.currentFolderId || DEFAULT_FOLDER_TO_SHOW;
+    }
+
+    hasSelection(selection: Array<MinimalNodeEntity>): boolean {
+        return selection && selection.length > 0;
+    }
+
+    downloadNodes(selection: Array<MinimalNodeEntity>) {
+        if (!selection || selection.length === 0) {
+            return;
+        }
+
+        if (selection.length === 1) {
+            this.downloadNode(selection[0]);
+        } else {
+            this.downloadZip(selection);
+        }
+    }
+
+    downloadNode(node: MinimalNodeEntity) {
+        if (node && node.entry) {
+            const entry = node.entry;
+
+            if (entry.isFile) {
+                this.downloadFile(node);
+            }
+
+            if (entry.isFolder) {
+                this.downloadZip([node]);
+            }
+        }
+    }
+
+    downloadFile(node: MinimalNodeEntity) {
+        if (node && node.entry) {
+            const contentApi = this.apiService.getInstance().content;
+
+            const url = contentApi.getContentUrl(node.entry.id, true);
+            const fileName = node.entry.name;
+
+            this.download(url, fileName);
+        }
+    }
+
+    downloadZip(selection: Array<MinimalNodeEntity>) {
+        if (selection && selection.length > 0) {
+            const nodeIds = selection.map(node => node.entry.id);
+
+            const dialogRef = this.dialog.open(DownloadZipDialogComponent, {
+                width: '600px',
+                data: {
+                    nodeIds: nodeIds
+                }
+            });
+            dialogRef.afterClosed().subscribe(result => {
+                console.log(result);
+            });
+        }
+    }
+
+    download(url: string, fileName: string) {
+        if (url && fileName) {
+            const link = document.createElement('a');
+
+            link.style.display = 'none';
+            link.download = fileName;
+            link.href = url;
+
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+    }
+
+    getNodeNameTooltip(row: DataRow, col: DataColumn): string {
+        if (row) {
+            return row.getValue('name');
+        }
+        return null;
     }
 }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -20,6 +20,6 @@ import { Component } from '@angular/core';
 @Component({
     selector: 'home-view',
     templateUrl: './home.component.html',
-    styleUrls: ['./home.component.css']
+    styleUrls: ['./home.component.scss']
 })
 export class HomeComponent {}

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

@@ -21,11 +21,16 @@ export { SearchComponent } from './search/search.component';
 export { SearchBarComponent } from './search/search-bar.component';
 export { LoginDemoComponent } from './login/login-demo.component';
 export { ActivitiDemoComponent } from './activiti/activiti-demo.component';
-export { FormViewer } from './activiti/form-viewer.component';
+export { ActivitiTaskAttachmentsComponent } from './activiti/activiti-task-attachments.component';
+export { ActivitiProcessAttachmentsComponent } from './activiti/activiti-process-attachments.component';
+export { ActivitiShowDiagramComponent } from './activiti/activiti-show-diagram.component';
+export { FormViewerComponent } from './activiti/form-viewer.component';
 export { WebscriptComponent } from './webscript/webscript.component';
 export { TagComponent } from './tag/tag.component';
+export { SocialComponent } from './social/social.component';
 export { AboutComponent } from './about/about.component';
 export { FilesComponent } from './files/files.component';
-export { FormNodeViewer } from './activiti/form-node-viewer.component';
-export { SettingComponent } from './setting/setting.component';
-export { ActivitiAppsView } from './activiti/apps.view';
+export { FormNodeViewerComponent } from './activiti/form-node-viewer.component';
+export { ActivitiAppsViewComponent } from './activiti/apps.view';
+export { SettingsComponent } from './settings/settings.component';
+export { FormDemoComponent } from './form/form-demo.component';

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

@@ -3,6 +3,8 @@
     right: 10px;
     top: 10px;
     z-index: 1;
+    background-color: rgb(68,138,255);
+    color: rgb(255,255,255);
 }
 
 .settings {
@@ -15,14 +17,9 @@
     z-index: 1;
 }
 
-.banned {
-    width: 130px;
-    margin: 10px;
-}
-
 .toggle {
-    width: 120px;
-    margin: 20px;
+    width: 190px;
+    margin: 5px;
     padding: 5px;
 }
 
@@ -38,3 +35,6 @@
     }
 }
 
+.settings ::ng-deep .mat-slide-toggle-thumb-container {
+    cursor: pointer;
+}

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

@@ -2,72 +2,95 @@
 
 <div class="settings">
     <p class="toggle">
-        <label for="switch1" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-            <input type="checkbox" id="switch1" [checked]="isECM" class="mdl-switch__input"
-                   (click)="toggleECM()">
-            <span class="mdl-switch__label">Content Services</span>
-        </label>
+        <md-slide-toggle
+            id="switch1"
+            [color]="'primary'"
+            (change)="toggleECM()"
+            [checked]="isECM">
+            Content Services
+        </md-slide-toggle>
     </p>
     <p class="toggle">
-        <label for="switch2" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-            <input type="checkbox" id="switch2" [checked]="isBPM" class="mdl-switch__input"
-                   (click)="toggleBPM()">
-            <span class="mdl-switch__label">Process Services</span>
-        </label>
+        <md-slide-toggle
+            id="switch2"
+            [color]="'primary'"
+            (change)="toggleBPM()"
+            [checked]="isBPM">
+            Process Services
+        </md-slide-toggle>
     </p>
     <p class="toggle">
-        <label for="switch3" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-            <input type="checkbox" id="switch3" class="mdl-switch__input" [checked]="!disableCsrf" (click)="toggleCSRF()">
-            <span class="mdl-switch__label">CSRF</span>
-        </label>
+        <md-slide-toggle
+            id="switch3"
+            [color]="'primary'"
+            (change)="toggleCSRF()"
+            [checked]="!disableCsrf">
+            CSRF
+        </md-slide-toggle>
     </p>
-    <p class="banned">
-        <label for="blacklistusername">Banned username</label><br>
-        <input id="blacklistusername" type="text" placeholder="banned username" [(ngModel)]="blackListUsername"/>
+    <p class="toggle">
+        <md-slide-toggle
+            id="switch4"
+            [color]="'primary'"
+            (change)="toggleFooter()"
+            [checked]="showFooter">
+            Login footer
+        </md-slide-toggle>
     </p>
 </div>
 
 <!--SETTING BUTTON-->
 
-<a class="mdl-navigation__link setting-button" data-automation-id="settings" href="" routerLink="/settings">
-    <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
-        <i class="material-icons">settings</i>
-    </button>
+<a md-fab class="setting-button" data-automation-id="settings" href="" routerLink="/settings" >
+    <md-icon>settings</md-icon>
 </a>
 
-<!--LOGIN-->
-
-<alfresco-login #alfrescologin
-                [providers]="providers"
-                [fieldsValidation]="customValidation"
-                [disableCsrf]="disableCsrf"
-                (executeSubmit)="validateForm($event)"
-                (onSuccess)="onLogin($event)"
-                (onError)="onError($event)">
+<alfresco-login
+    #alfrescologin
+    [providers]="providers"
+    [fieldsValidation]="customValidation"
+    [disableCsrf]="disableCsrf"
+    [showLoginActions]="showFooter"
+    [showRememberMe]="showFooter"
+    copyrightText="© 2016 Alfresco Software, Inc. All Rights Reserved. (customised text)"
+    (onSuccess)="onLogin($event)"
+    (onError)="onError($event)">
     <div class="mobile-settings">
         <p>
-            <label for="switch1-mobile" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-                <input type="checkbox" id="switch1-mobile" [checked]="isECM" class="mdl-switch__input"
-                       (click)="toggleECM()">
-                <span class="mdl-switch__label">Content Services</span>
-            </label>
+            <md-slide-toggle
+                id="switch1-mobile"
+                [color]="'primary'"
+                (change)="toggleECM()"
+                [checked]="isECM">
+                Content Services
+            </md-slide-toggle>
         </p>
         <p>
-            <label for="switch2-mobile" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-                <input type="checkbox" id="switch2-mobile" [checked]="isBPM" class="mdl-switch__input"
-                       (click)="toggleBPM()">
-                <span class="mdl-switch__label">Process Services</span>
-            </label>
+            <md-slide-toggle
+                id="switch2-mobile"
+                [color]="'primary'"
+                (change)="toggleBPM()"
+                [checked]="isBPM">
+                Process Services
+            </md-slide-toggle>
         </p>
         <p>
-            <label for="switch3-mobile" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-                <input type="checkbox" id="switch3-mobile" class="mdl-switch__input" [checked]="!disableCsrf" (click)="toggleCSRF()">
-                <span class="mdl-switch__label">CSRF</span>
-            </label>
+            <md-slide-toggle
+                id="switch3-mobile"
+                [color]="'primary'"
+                (change)="toggleCSRF()"
+                [checked]="!disableCsrf">
+                CSRF
+            </md-slide-toggle>
+        </p>
+        <p>
+            <md-slide-toggle
+                id="switch4-mobile"
+                [color]="'primary'"
+                (change)="toggleFooter()"
+                [checked]="showFooter">
+                Login footer
+            </md-slide-toggle>
         </p>
-        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-            <input class="mdl-textfield__input" type="text" [(ngModel)]="blackListUsername" id="blacklistusername"/>
-            <label class="mdl-textfield__label" for="blacklistusername">Banned username</label>
-        </div>
     </div>
 </alfresco-login>

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

@@ -15,10 +15,10 @@
  * limitations under the License.
  */
 
-import { Component, ViewChild, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { Validators } from '@angular/forms';
-import { StorageService, LogService } from 'ng2-alfresco-core';
+import { Router } from '@angular/router';
+import { LogService, StorageService } from 'ng2-alfresco-core';
 
 @Component({
     selector: 'login-demo',
@@ -31,12 +31,12 @@ export class LoginDemoComponent implements OnInit {
     alfrescologin: any;
 
     providers: string = 'ECM';
-    blackListUsername: string;
     customValidation: any;
 
     disableCsrf: boolean = false;
     isECM: boolean = true;
     isBPM: boolean = false;
+    showFooter: boolean = true;
     customMinLenght: number = 2;
 
     constructor(private router: Router,
@@ -95,6 +95,10 @@ export class LoginDemoComponent implements OnInit {
         this.disableCsrf = !this.disableCsrf;
     }
 
+    toggleFooter() {
+        this.showFooter = !this.showFooter;
+    }
+
     updateProvider() {
         if (this.isBPM && this.isECM) {
             this.providers = 'ALL';
@@ -113,14 +117,5 @@ export class LoginDemoComponent implements OnInit {
 
         this.providers = '';
         return this.providers;
-    };
-
-    validateForm(event: any) {
-        let values = event.values;
-        if (values.controls['username'].value === this.blackListUsername) {
-            this.alfrescologin.addCustomFormError('username', 'This particular username has been blocked');
-            event.preventDefault();
-        }
     }
-
 }

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

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

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

@@ -17,8 +17,8 @@
 
 import { Component, EventEmitter, Output } from '@angular/core';
 import { Router } from '@angular/router';
-import { AlfrescoAuthenticationService } from 'ng2-alfresco-core';
 import { MinimalNodeEntity } from 'alfresco-js-api';
+import { AlfrescoAuthenticationService } from 'ng2-alfresco-core';
 
 @Component({
     selector: 'search-bar',
@@ -64,8 +64,4 @@ export class SearchBarComponent {
     onSearchTermChange(event) {
         this.searchTerm = event.value;
     }
-
-    onExpandToggle(event) {
-        this.expand.emit(event);
-    }
 }

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

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

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

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

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

@@ -21,28 +21,7 @@ import { Router } from '@angular/router';
 @Component({
     selector: 'search-component',
     templateUrl: './search.component.html',
-    styles: [`
-        :host div.search-results-container {
-            padding: 0 20px 20px 20px;
-        }
-        :host h1 {
-            font-size: 22px;
-        }
-        :host tbody tr {
-            cursor: pointer;
-        }
-        @media screen and (max-width: 600px) {
-            :host .col-display-name {
-                min-width: 100px;
-            }
-            :host .col-modified-at, :host .col-modified-by {
-                display: none;
-            }
-            :host div.search-results-container table {
-                width: 100%;
-            }
-        }
-    `]
+    styleUrls: ['./search.component.scss']
 })
 export class SearchComponent {
 
@@ -52,9 +31,17 @@ export class SearchComponent {
     constructor(public router: Router) {
     }
 
-    showFile(event) {
-        if (event.value.entry.isFile) {
-            this.fileNodeId = event.value.entry.id;
+    nodeDbClick($event: any) {
+        if ($event.value.entry.isFolder) {
+            this.router.navigate(['/files', $event.value.entry.id]);
+        } else {
+            this.showFile($event);
+        }
+    }
+
+    showFile($event) {
+        if ($event.value.entry.isFile) {
+            this.fileNodeId = $event.value.entry.id;
             this.fileShowed = true;
         } else {
             this.fileShowed = false;

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

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

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

@@ -1,35 +0,0 @@
-<div class="setting-container">
-    <div class="table-row">
-        <div class="setting-card-padding"></div>
-        <div class="setting-card mdl-card mdl-shadow--2dp">
-            <div class="mdl-card__title mdl-card--expand">
-                <h2 class="mdl-card__title-text">SETTINGS</h2>
-            </div>
-            <div class="mdl-card__actions mdl-card--border">
-                <div class="mdl-card__supporting-text">
-                    Content Services host URL configuration
-                </div>
-                <nav class="mdl-navigation">
-                    <div class="icon material-icons icon-margin">link</div>
-                    <input type="text" class="mdl-textfield__input" id="ecmHost" data-automation-id="ecmHost"
-                           tabindex="1" (change)="onChangeECMHost($event)" value="{{ecmHost}}"/>
-                </nav>
-
-                <div class="mdl-card__supporting-text">
-                    Process Services host URL configuration
-                </div>
-                <nav class="mdl-navigation">
-                    <div class="icon material-icons icon-margin">link</div>
-                    <input type="text" class="mdl-textfield__input" id="bpmHost" data-automation-id="bpmHost"
-                           tabindex="1" (change)="onChangeBPMHost($event)" value="{{bpmHost}}"/>
-                </nav>
-            </div>
-            <div class="mdl-card__actions mdl-card--border">
-            <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" onclick="window.history.back()" >
-                Back
-            </a>
-        </div>
-        </div>
-        <div class="setting-card-padding"></div>
-    </div>
-</div>

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

@@ -1,58 +0,0 @@
-/*!
- * @license
- * Copyright 2016 Alfresco Software, Ltd.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { Component } from '@angular/core';
-import { AlfrescoSettingsService, StorageService, LogService } from 'ng2-alfresco-core';
-
-@Component({
-    selector: 'alfresco-setting-demo',
-    templateUrl: './setting.component.html',
-    styleUrls: ['./setting.component.css']
-})
-export class SettingComponent {
-
-    ecmHost: string;
-    bpmHost: string;
-
-    constructor(private settingsService: AlfrescoSettingsService,
-                private storage: StorageService,
-                private logService: LogService) {
-        this.ecmHost = this.settingsService.ecmHost;
-        this.bpmHost = this.settingsService.bpmHost;
-    }
-
-    public onChangeECMHost(event: KeyboardEvent): void {
-        let value = (<HTMLInputElement>event.target).value.trim();
-        if (value) {
-            this.logService.info(`ECM host: ${value}`);
-            this.ecmHost = value;
-            this.settingsService.ecmHost = value;
-            this.storage.setItem(`ecmHost`, value);
-        }
-    }
-
-    public onChangeBPMHost(event: KeyboardEvent): void {
-        let value = (<HTMLInputElement>event.target).value.trim();
-        if (value) {
-            this.logService.info(`BPM host: ${value}`);
-            this.bpmHost = value;
-            this.settingsService.bpmHost = value;
-            this.storage.setItem(`bpmHost`, value);
-        }
-    }
-
-}

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

@@ -0,0 +1,61 @@
+<div class="adf-setting-container">
+    <div class="adf-setting-card-padding"></div>
+    <md-toolbar color="primary" >
+        <h3>{{'SETTINGS.TITLE' | translate}}</h3>
+    </md-toolbar>
+
+    <md-card class="adf-setting-card">
+        <md-card-content>
+
+            <md-card-subtitle>{{'SETTINGS.CS-HOST' | translate }}</md-card-subtitle>
+
+            <md-input-container class="full-width">
+                <md-icon class="adf-settings-link-icon" mdPrefix>link</md-icon>
+                <input mdInput
+                       [formControl]="urlFormControlEcm"
+                       data-automation-id="ecmHost"
+                       type="text"
+                       (change)="onChangeECMHost($event)"
+                       tabindex="2"
+                       id="ecmHost"
+                       value="{{ecmHost}}"
+                       placeholder="http(s)://host|ip:port(/path)">
+                <md-error *ngIf="urlFormControlEcm.hasError('pattern')">
+                    ECM host is not valid! http(s)://host|ip:port(/path)
+                </md-error>
+            </md-input-container>
+            <p>
+            <p>
+            <md-card-subtitle>{{'SETTINGS.BP-HOST' | translate }}</md-card-subtitle>
+
+            <md-input-container class="full-width">
+                <md-icon class="adf-settings-link-icon" mdPrefix>link</md-icon>
+                <input mdInput
+                       [formControl]="urlFormControlBpm"
+                       data-automation-id="bpmHost"
+                       type="text"
+                       (change)="onChangeBPMHost($event)"
+                       tabindex="2"
+                       id="bpmHost"
+                       value="{{bpmHost}}"
+                       placeholder="http(s)://host|ip:port(/path)">
+                <md-error *ngIf="urlFormControlBpm.hasError('pattern')">
+                    BPM host is not valid! http(s)://host|ip:port(/path)
+                </md-error>
+            </md-input-container>
+
+        </md-card-content>
+        <md-card-actions class="adf-settings-actions">
+
+            <button md-button onclick="window.history.back()" color="primary">
+                {{'SETTINGS.BACK' | translate }}
+            </button>
+
+            <button md-raised-button (click)="save($event)" [disabled]="urlFormControlBpm.hasError('pattern') || urlFormControlEcm.hasError('pattern')" color="primary">
+                {{'SETTINGS.APPLY' | translate }}
+            </button>
+
+        </md-card-actions>
+    </md-card>
+    <div class="adf-setting-card-padding"></div>
+</div>

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

@@ -0,0 +1,37 @@
+.adf-app-settings {
+    display: flex;
+    height: 100%;
+    align-items: center;
+
+    .adf-setting-container {
+        display: table;
+        border-collapse: collapse;
+        border-spacing: 0;
+    }
+    
+    .adf-setting-card {
+        width: 400px;
+    }
+    
+    .full-width {
+        width: 100%;
+    }
+    
+    .adf-setting-card-padding {
+        width: 50%;
+        display: table-cell;
+        vertical-align: middle;
+        margin: 0;
+    }
+    
+    .adf-settings-link-icon {
+        position: relative;
+        top: 6px;
+        margin-right: 10px;
+    }
+    
+    .adf-settings-actions {
+        display: flex;
+        justify-content: flex-end;
+    }    
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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