From 49a14b999ed4f8c95e1202be4889e21b6f131f6f Mon Sep 17 00:00:00 2001
From: mehmet-erim <bilgi@mehmeterim.com>
Date: Wed, 8 Jan 2020 15:47:10 +0300
Subject: [PATCH] refactor(theme-shared): change td element to div

#2537
---
 .../lib/components/table/table.component.html |  6 ++---
 .../lib/components/table/table.component.ts   | 23 ++++++++++++++-----
 .../lib/tests/pagination.component.spec.ts    |  2 +-
 3 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html
index 05396cf320..99fe8c31f2 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html
@@ -69,9 +69,9 @@
 </ng-template>
 
 <ng-template #emptyTemplate>
-  <tr>
-    <td class="text-center" [attr.colspan]="colspan">
+  <tr class="empty-row" #emptyRow>
+    <div [style.width.px]="emptyRow.offsetWidth">
       {{ emptyMessage | abpLocalization }}
-    </td>
+    </div>
   </tr>
 </ng-template>
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts
index 48cddbd1f4..2dc864e496 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts
@@ -1,5 +1,4 @@
 import {
-  AfterViewInit,
   Component,
   ElementRef,
   EventEmitter,
@@ -9,7 +8,10 @@ import {
   TrackByFunction,
   ViewChild,
   ViewEncapsulation,
+  AfterViewInit,
 } from '@angular/core';
+import { Observable, of } from 'rxjs';
+import { delay } from 'rxjs/operators';
 
 @Component({
   selector: 'abp-table',
@@ -20,6 +22,15 @@ import {
       .ui-table .ui-table-tbody > tr:hover {
         background-color: #eaeaea;
       }
+
+      .ui-table .ui-table-tbody > tr.empty-row:hover {
+        background-color: transparent;
+      }
+
+      .ui-table .ui-table-tbody > tr.empty-row > div {
+        margin: 10px;
+        text-align: center;
+      }
     `,
   ],
   encapsulation: ViewEncapsulation.None,
@@ -64,7 +75,7 @@ export class TableComponent implements AfterViewInit {
 
   bodyScrollLeft = 0;
 
-  colspan = 0;
+  colspan: number;
 
   trackByFn: TrackByFunction<any> = (_, value) => {
     return typeof value === 'object' ? value[this.trackingProp] || value : value;
@@ -89,7 +100,7 @@ export class TableComponent implements AfterViewInit {
   }
 
   get slicedValue(): any[] {
-    if (!this.rows || this.rows > this.value.length) {
+    if (!this.rows || this.rows >= this.value.length) {
       return this.value;
     }
 
@@ -97,9 +108,9 @@ export class TableComponent implements AfterViewInit {
     return this.value.slice(start, start + this.rows);
   }
 
-  constructor() {}
-
   ngAfterViewInit() {
-    this.colspan = this.wrapperRef.nativeElement.querySelectorAll('th').length;
+    setTimeout(() => {
+      this.colspan = this.wrapperRef.nativeElement.querySelectorAll('th').length;
+    }, 0);
   }
 }
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tests/pagination.component.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/tests/pagination.component.spec.ts
index 1428c7eb9d..98f63e75f6 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/tests/pagination.component.spec.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/tests/pagination.component.spec.ts
@@ -32,7 +32,7 @@ describe('PaginationComponent', () => {
       '7',
     ]);
 
-    spectator.setHostInput({ value: 2 });
+    spectator.click('.ui-paginator-first');
 
     expect(spectator.queryAll('.ui-paginator-page').map(node => node.textContent)).toEqual([
       '1',