fix empty datatable hiding the header (#3003)

lib/core/datatable/components/datatable/datatable.component.html

@@ -2,7 +2,7 @@
     *ngIf="data" class="full-width"
     [class.adf-data-table-card]="display === 'gallery'"
     [class.adf-data-table]="display === 'list'">
-    <div *ngIf="showHeader && !loading" class="adf-datatable-header">
+    <div *ngIf="isHeaderVisible()" class="adf-datatable-header">
         <div class="adf-datatable-row" *ngIf="display === 'list'">
             <!-- Actions (left) -->
             <div *ngIf="actions && actionsPosition === 'left'" class="actions-column adf-datatable-table-cell-header">
@@ -173,11 +173,10 @@
                 </div>
 
             </div>
-            <div *ngIf="data.getRows().length === 0"
+            <div *ngIf="isEmpty()"
                  [class.adf-datatable-row]="display === 'list'"
                  [class.adf-data-table-card-empty]="display === 'gallery'">
-                <div class="adf-no-content-container adf-datatable-table-cell"
+                <div class="adf-no-content-container adf-datatable-table-cell">
-                     [attr.colspan]="1 + data.getColumns().length">
                     <ng-template *ngIf="noContentTemplate"
                                  ngFor [ngForOf]="[data]"
                                  [ngForTemplate]="noContentTemplate">
@@ -200,8 +199,7 @@
         <div *ngIf="loading"
              [class.adf-datatable-row]="display === 'list'"
              [class.adf-data-table-card-loading]="display === 'gallery'">
-            <div class="adf-datatable-table-cell"
+            <div class="adf-datatable-table-cell" >
-                 [attr.colspan]="1 + data.getColumns().length">
                 <ng-template *ngIf="loadingTemplate"
                              ngFor [ngForOf]="[data]"
                              [ngForTemplate]="loadingTemplate">

lib/core/datatable/components/datatable/datatable.component.scss

@@ -363,6 +363,7 @@
         .adf-no-content-container {
             padding: 0 !important;
             border: none !important;
+            width: 100%;
 
             & > img {
                 width: 100%;

lib/core/datatable/components/datatable/datatable.component.spec.ts

@@ -111,6 +111,19 @@ describe('DataTable', () => {
         expect(element.querySelector('.adf-datatable-header')).toBe(null);
     });
 
+    it('should hide the header if there are no elements inside', () => {
+        let newData = new ObjectDataTableAdapter(
+        );
+
+        dataTable.ngOnChanges({
+            data: new SimpleChange(null, newData, false)
+        });
+
+        fixture.detectChanges();
+
+        expect(element.querySelector('.adf-datatable-header')).toBe(null);
+    });
+
     it('should show the header if showHeader is true', () => {
         let newData = new ObjectDataTableAdapter(
             [

lib/core/datatable/components/datatable/datatable.component.ts

@@ -535,6 +535,14 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
         });
     }
 
+    isEmpty() {
+        return this.data.getRows().length === 0;
+    }
+
+    isHeaderVisible() {
+        return this.showHeader && !this.loading && !this.isEmpty();
+    }
+
     private emitRowSelectionEvent(name: string, row: DataRow) {
         const domEvent = new CustomEvent(name, {
             detail: {

lib/process-services/attachment/process-attachment-list.component.scss

@@ -1,10 +1,6 @@
 @mixin adf-process-attachment-list-theme($theme) {
 
-    adf-datatable ::ng-deep th span {
+    .data-cell {
-        color: #232323;
-    }
-
-    adf-datatable ::ng-deep .data-cell {
         cursor: pointer !important;
     }
 
@@ -19,7 +15,6 @@
         font-size: 24px;
         line-height: 1.33;
         letter-spacing: -1px;
-        color: #000000;
     }
 
     .adf-empty-list-drag_drop {
@@ -28,7 +23,6 @@
         font-size: 56px;
         line-height: 1;
         letter-spacing: -2px;
-        color: #000000;
         margin-top: 40px !important;
         word-break: break-all;
         white-space: pre-line;
@@ -40,7 +34,6 @@
         font-size: 16px;
         line-height: 1.5;
         letter-spacing: -0.4px;
-        color: #000000;
         margin-top: 17px;
         word-break: break-all;
         white-space: pre-line;

lib/process-services/attachment/task-attachment-list.component.scss

@@ -1,10 +1,7 @@
 @mixin adf-task-attachment-list-theme($theme) {
 
-    adf-datatable  ::ng-deep th span {
-        color: #232323;
-    }
 
-    adf-datatable  ::ng-deep .data-cell {
+    adf-datatable .data-cell {
         cursor: pointer !important;
     }
 
@@ -19,7 +16,6 @@
         font-size: 24px;
         line-height: 1.33;
         letter-spacing: -1px;
-        color: #000000;
     }
 
     .adf-empty-list-drag_drop {
@@ -28,7 +24,6 @@
         font-size: 56px;
         line-height: 1;
         letter-spacing: -2px;
-        color: #000000;
         margin-top: 40px;
         word-break: break-all;
         white-space: pre-line;
@@ -44,7 +39,6 @@
         font-size: 16px;
         line-height: 1.5;
         letter-spacing: -0.4px;
-        color: #000000;
         margin-top: 17px;
         word-break: break-all;
         white-space: pre-line;