[ADF-2322] Card view datatable and documentlist (#2968)

* move table in style

* Enable the cardview mode

* add button in demo shell to change view
add missing translation terms toolbar

* missing comma

* add example in demo shell

* style loading and images

* border card container

* document list tests

* test check class and input

* test fix

* fix test process services

* more documentation

* rirpristinate base pacakge integgration

* remove test color

docs/datatable.component.md

@@ -18,6 +18,7 @@ See it live: [DataTable Quickstart](https://embed.plnkr.co/80qr4YFBeHjLMdAV0F6l/
     -   [Supplying data for the table](#supplying-data-for-the-table)
     -   [Customizing columns](#customizing-columns)
     -   [DataTable DOM Events](#datatable-dom-events)
+    -   [Card view](#card-view)
     -   [Custom Empty content template](#custom-empty-content-template)
     -   [Loading content template](#loading-content-template)
     -   [Events](#events-1)
@@ -133,8 +134,9 @@ export class DataTableDemo {
 | allowDropFiles | boolean | false | Toggle file drop support for rows (see **ng2-alfresco-core/UploadDirective** for more details) |
 | loading | boolean | false | Flag that indicates if the datatable is in loading state and needs to show the loading template. Read the documentation above to see how to configure a loading template |
 | showHeader | boolean | true | Toggles header visibility |
+| cardview | boolean | true | enable the cardview mode |
 | selection | DataRow\[] | \[] | Contains selected rows |
-
+    
 ### Events
 
 | Name | Description |
@@ -192,6 +194,20 @@ onRowClick(event) {
 
 ![](docassets/images/datatable-dom-events.png)
 
+### Card view
+
+If you want enable the card view mode you need to set to true the input parameter [cardview] :
+
+```html
+<adf-datatable
+    [data]="data"
+    [cardview]="true">
+</adf-datatable
+```
+
+![card-view](docassets/images/document-list-card-view.png)
+
+
 ### Custom Empty content template
 
 You can add a template that will be shown when there are no results in your datatable:

docs/document-list.component.md

@@ -14,6 +14,7 @@ Displays the documents from a repository.
 -   [Details](#details)
 
     -   [DOM Events](#dom-events)
+    -   [Card view](#card-view)
     -   [Pagination strategy](#pagination-strategy)
     -   [Data Sources](#data-sources)
     -   [Setting default folder](#setting-default-folder)
@@ -46,7 +47,7 @@ Displays the documents from a repository.
 ```
 
 ### Properties
-
+    
 | Name | Type | Default value | Description |
 | ---- | ---- | ------------- | ----------- |
 | permissionsStyle | `PermissionStyleModel[]` | `[]` | Define a set of CSS styles styles to apply depending on the permission of the user on that node. See the Permission Style model page for further details and examples. |
@@ -73,6 +74,8 @@ Displays the documents from a repository.
 | maxItems | `number` |  | Default value is stored into user preference settings  |
 | skipCount | `number` | `0` | Number of elements to skip over for pagination purposes  |
 | enableInfiniteScrolling | `boolean` | `false` | Set document list to work in infinite scrolling mode  |
+| showHeader | `boolean` | `true` |  Toggles header visibility   |
+| cardview | `boolean` | `false` |  Enable the cardview mode    |
 
 ### Events
 
@@ -127,6 +130,20 @@ Below is a basic example of handling DOM events in the parent elements.
 </div>
 ```
 
+### Card view
+
+If you want enable the card view mode you need to set to true the input parameter [cardview] :
+
+```html
+<adf-document-list
+    [currentFolderId]="'-my-'"
+    [cardview]="true">
+</adf-document-list>
+```
+
+![card-view](docassets/images/document-list-card-view.png)
+
+
 ### Pagination strategy
 
 The Document List by default supports 2 type of pagination, the **finite** and the **infinite** pagination.