[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

lib/content-services/document-list/components/document-list.component.html

@@ -9,8 +9,9 @@
     [rowStyle]="rowStyle"
     [rowStyleClass]="rowStyleClass"
     [loading]="loading"
+    [cardview]="cardview"
     [noPermission]="noPermission"
-    [showHeader]="!isEmpty()"
+    [showHeader]="!isEmpty() && showHeader"
     (showRowContextMenu)="onShowRowContextMenu($event)"
     (showRowActionsMenu)="onShowRowActionsMenu($event)"
     (executeRowAction)="onExecuteRowAction($event)"

lib/content-services/document-list/components/document-list.component.scss

@@ -2,7 +2,7 @@
     $foreground: map-get($theme, foreground);
     $accent: map-get($theme, accent);
 
-    adf-datatable > table > tbody > tr.is-selected > td.adf-data-table-cell.adf-data-table-cell--image.image-table-cell > div > div > mat-icon > svg {
+    .adf-datatable-selected > svg {
         fill: mat-color($accent);
         margin-top: -4px;
         margin-left: -4px;

lib/content-services/document-list/components/document-list.component.spec.ts

@@ -181,7 +181,65 @@ describe('DocumentList', () => {
 
         fixture.whenStable().then(() => {
             fixture.detectChanges();
-            expect(element.querySelector('#adf-document-list-loading')).toBeDefined();
+            expect(element.querySelector('.adf-document-list-loading')).toBeDefined();
+            done();
+        });
+    });
+
+    it('should hide the header if showHeader is false', (done) => {
+        documentList.showHeader = false;
+
+        fixture.detectChanges();
+
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            expect(element.querySelector('.adf-datatable-header')).toBe(null);
+            done();
+        });
+    });
+
+    it('should show the header if showHeader is true', (done) => {
+        documentList.showHeader = true;
+
+        fixture.detectChanges();
+
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            expect(element.querySelector('.adf-datatable-header')).toBeDefined();
+            done();
+        });
+    });
+
+    it('should reset selection upon reload', () => {
+        spyOn(documentList, 'resetSelection').and.callThrough();
+
+        documentList.reload();
+        fixture.detectChanges();
+
+        expect(documentList.resetSelection).toHaveBeenCalled();
+    });
+
+    it('should use the cardview style if cardview is true', (done) => {
+        documentList.cardview = true;
+
+        fixture.detectChanges();
+
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            expect(element.querySelector('.adf-data-table-card')).toBeDefined();
+            done();
+        });
+    });
+
+    it('should use the base document list style if cardview is false', (done) => {
+        documentList.cardview = false;
+
+        fixture.detectChanges();
+
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            expect(element.querySelector('.adf-data-table-card')).toBe(null);
+            expect(element.querySelector('.adf-data-table')).toBeDefined();
             done();
         });
     });

lib/content-services/document-list/components/document-list.component.ts

@@ -71,6 +71,10 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
 
     @ContentChild(DataColumnListComponent) columnList: DataColumnListComponent;
 
+    /* Enable the cardview mode */
+    @Input()
+    cardview: boolean = false;
+
     /** 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.
@@ -86,6 +90,10 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
     @Input()
     navigate: boolean = true;
 
+    /** Toggles the header */
+    @Input()
+    showHeader: boolean = true;
+
     /** User interaction for folder navigation or file preview. Valid values are "click" and "dblclick". */
     @Input()
     navigationMode: string = DocumentListComponent.DOUBLE_CLICK_NAVIGATION; // click|dblclick