refactor(theme-shared): change the table row hover style

#2537

npm/ng-packs/packages/theme-shared/src/lib/components/pagination/pagination.component.ts

@@ -11,6 +11,8 @@ export class PaginationComponent implements OnInit {
     return this._value;
   }
   set value(newValue: number) {
+    if (this._value === newValue) return;
+
     this._value = newValue;
     this.valueChange.emit(newValue);
   }

npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html

@@ -6,7 +6,8 @@
     <abp-pagination
       *ngIf="rows"
       [totalPages]="totalPages"
-      (valueChange)="page = $event; pageChange.emit($event)"
+      [(value)]="page"
+      (valueChange)="pageChange.emit($event)"
     ></abp-pagination>
   </div>
 </div>
@@ -60,9 +61,9 @@
     <ng-container *ngIf="value && value.length; else emptyTemplate">
       <ng-template
         #bodyTemplateWrapper
-        *ngFor="let val of slicedValue; trackBy: trackByFn"
+        *ngFor="let val of slicedValue; let index = index; trackBy: trackByFn"
         [ngTemplateOutlet]="bodyTemplate"
-        [ngTemplateOutletContext]="{ $implicit: val }"
+        [ngTemplateOutletContext]="{ $implicit: val, rowIndex: index }"
       ></ng-template>
     </ng-container>
   </tbody>

npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts

@@ -1,4 +1,5 @@
 import {
+  AfterViewInit,
   Component,
   ElementRef,
   EventEmitter,
@@ -8,10 +9,7 @@ import {
   TrackByFunction,
   ViewChild,
   ViewEncapsulation,
-  AfterViewInit,
 } from '@angular/core';
-import { Observable, of } from 'rxjs';
-import { delay } from 'rxjs/operators';
 
 @Component({
   selector: 'abp-table',
@@ -20,11 +18,11 @@ import { delay } from 'rxjs/operators';
     `
       .ui-table .ui-table-tbody > tr:nth-child(even):hover,
       .ui-table .ui-table-tbody > tr:hover {
-        background-color: #eaeaea;
+        filter: brightness(90%);
       }
 
       .ui-table .ui-table-tbody > tr.empty-row:hover {
-        background-color: transparent;
+        filter: none;
       }
 
       .ui-table .ui-table-tbody > tr.empty-row > div {
@@ -35,8 +33,9 @@ import { delay } from 'rxjs/operators';
   ],
   encapsulation: ViewEncapsulation.None,
 })
-export class TableComponent implements AfterViewInit {
+export class TableComponent {
   private _totalRecords: number;
+  bodyScrollLeft = 0;
 
   @Input()
   value: any[];
@@ -59,6 +58,9 @@ export class TableComponent implements AfterViewInit {
   @Input()
   rows: number;
 
+  @Input()
+  page = 1;
+
   @Input()
   trackingProp = 'id';
 
@@ -71,16 +73,6 @@ export class TableComponent implements AfterViewInit {
   @ViewChild('wrapper', { read: ElementRef, static: false })
   wrapperRef: ElementRef<HTMLDivElement>;
 
-  page = 1;
-
-  bodyScrollLeft = 0;
-
-  colspan: number;
-
-  trackByFn: TrackByFunction<any> = (_, value) => {
-    return typeof value === 'object' ? value[this.trackingProp] || value : value;
-  };
-
   @Input()
   get totalRecords(): number {
     return this._totalRecords || this.value.length;
@@ -108,9 +100,7 @@ export class TableComponent implements AfterViewInit {
     return this.value.slice(start, start + this.rows);
   }
 
-  ngAfterViewInit() {
-    setTimeout(() => {
-      this.colspan = this.wrapperRef.nativeElement.querySelectorAll('th').length;
-    }, 0);
-  }
+  trackByFn: TrackByFunction<any> = (_, value) => {
+    return typeof value === 'object' ? value[this.trackingProp] || value : value;
+  };
 }