fix(table): corrige tabela piscando ao realizar scroll

Tabela com muitos itens ao realizar o scroll acontece flickering (piscar) em toda tabela.
Extrai o <thead> de dentro do 'cdk-virtual-scroll-viewport' mantendo a visualização da tag ao realizar o scroll.

Fix: DTHFUI-13182

Author: marioAntonioTotvs

projects/ui/src/lib/components/po-table/po-table.component.html

@@ -621,9 +621,9 @@
               @for (column of mainColumns; track trackBy(i); let i = $index) {
                 <th
                   class="po-table-header-ellipsis p-element po-frozen-column"
-                  [style.width]="applyFixedColumns() ? column.width : computedColumnWidths[i]"
-                  [style.max-width]="applyFixedColumns() ? column.width : computedColumnWidths[i]"
-                  [style.min-width]="applyFixedColumns() ? column.width : computedColumnWidths[i]"
+                  [style.width]="column.width || computedColumnWidths[i]"
+                  [style.max-width]="column.width || computedColumnWidths[i]"
+                  [style.min-width]="column.width || computedColumnWidths[i]"
                   [attr.data-po-table-column-name]="column.label || (column.property | titlecase) | lowercase"
                   [class.po-clickable]="(sort && column.sortable !== false) || hasService"
                   [ngClass]="{
@@ -658,9 +658,9 @@
               @for (column of mainColumns; track trackBy(i); let i = $index) {
                 <th
                   class="po-table-header-ellipsis p-element po-frozen-column"
-                  [style.width]="applyFixedColumns() ? column.width : computedColumnWidths[i]"
-                  [style.max-width]="applyFixedColumns() ? column.width : computedColumnWidths[i]"
-                  [style.min-width]="applyFixedColumns() ? column.width : computedColumnWidths[i]"
+                  [style.width]="column.width || computedColumnWidths[i]"
+                  [style.max-width]="column.width || computedColumnWidths[i]"
+                  [style.min-width]="column.width || computedColumnWidths[i]"
                   [attr.data-po-table-column-name]="column.label || (column.property | titlecase) | lowercase"
                   [class.po-clickable]="(sort && column.sortable !== false) || hasService"
                   [ngClass]="{
@@ -774,9 +774,9 @@
               }
               @for (column of mainColumns; track trackBy(columnIndex); let columnIndex = $index) {
                 <td
-                  [style.width]="applyFixedColumns() ? column.width : computedColumnWidths[columnIndex]"
-                  [style.max-width]="applyFixedColumns() ? column.width : computedColumnWidths[columnIndex]"
-                  [style.min-width]="applyFixedColumns() ? column.width : computedColumnWidths[columnIndex]"
+                  [style.width]="column.width || computedColumnWidths[columnIndex]"
+                  [style.max-width]="column.width || computedColumnWidths[columnIndex]"
+                  [style.min-width]="column.width || computedColumnWidths[columnIndex]"
                   [class.po-table-column]="column.type !== 'icon'"
                   [class.po-table-column-right]="column.type === 'currency' || column.type === 'number'"
                   [class.po-table-column-center]="column.type === 'subtitle'"

projects/ui/src/lib/components/po-table/po-table.component.ts

@@ -11,11 +11,9 @@ import {
   ContentChildren,
   DoCheck,
   ElementRef,
-  Inject,
   IterableDiffers,
   OnDestroy,
   OnInit,
-  Optional,
   QueryList,
   Renderer2,
   TemplateRef,
@@ -28,12 +26,11 @@ import { Observable, Subscription } from 'rxjs';
 import { PoDateService } from '../../services/po-date/po-date.service';
 import { PoLanguageService } from '../../services/po-language/po-language.service';
 import { PoNotificationService } from '../../services/po-notification/po-notification.service';
-import { convertToBoolean, getDefaultSizeFn, PO_TABLE_ROW_HEIGHT_BY_SPACING, uuid } from '../../utils/util';
+import { getDefaultSizeFn, PO_TABLE_ROW_HEIGHT_BY_SPACING, PoUtils, uuid } from '../../utils/util';
 import { PoModalAction, PoModalComponent } from '../po-modal';
 import { PoPopupComponent } from '../po-popup/po-popup.component';
 import { PoTableColumnLabel } from './po-table-column-label/po-table-column-label.interface';
 
-import { AnimaliaIconDictionary, ICONS_DICTIONARY } from '../po-icon';
 import { PoTableRowTemplateArrowDirection } from './enums/po-table-row-template-arrow-direction.enum';
 import { PoTableAction } from './interfaces/po-table-action.interface';
 import { PoTableColumn } from './interfaces/po-table-column.interface';
@@ -173,8 +170,7 @@ export class PoTableComponent
 
   private _columnManagerTarget: ElementRef;
   private _columnManagerTargetFixed: ElementRef;
-  private _iconToken: { [key: string]: string };
-  private differ;
+  private readonly differ;
   private footerHeight;
   private timeoutResize;
   private visibleElement = false;
@@ -215,21 +211,16 @@ export class PoTableComponent
     return this._columnManagerTargetFixed;
   }
 
-  get iconNameLib() {
-    return this._iconToken.NAME_LIB;
-  }
-
   /* eslint-disable max-params */
 
   constructor(
     poDate: PoDateService,
     differs: IterableDiffers,
     private readonly renderer: Renderer2,
     poLanguageService: PoLanguageService,
-    private changeDetector: ChangeDetectorRef,
-    private decimalPipe: DecimalPipe,
-    private defaultService: PoTableService,
-    @Optional() @Inject(ICONS_DICTIONARY) value: { [key: string]: string }
+    private readonly changeDetector: ChangeDetectorRef,
+    private readonly decimalPipe: DecimalPipe,
+    private readonly defaultService: PoTableService
   ) {
     super(poDate, poLanguageService, defaultService);
     this.JSON = JSON;
@@ -242,8 +233,6 @@ export class PoTableComponent
     this.resizeListener = renderer.listen('window', 'resize', (event: any) => {
       this.debounceResize();
     });
-
-    this._iconToken = value ?? AnimaliaIconDictionary;
   }
   /* eslint-enable max-params */
 
@@ -392,8 +381,6 @@ export class PoTableComponent
       this.clearColumnWidths();
     }
 
-    // Permite que os cabeçalhos sejam calculados na primeira vez que o componente torna-se visível,
-    // evitando com isso, problemas com Tabs ou Divs que iniciem escondidas.
     if (this.tableWrapperElement?.nativeElement.offsetWidth && !this.visibleElement && this.initialized) {
       this.debounceResize();
       this.checkInfiniteScroll();
@@ -597,7 +584,7 @@ export class PoTableComponent
 
   getBooleanLabel(rowValue: any, columnBoolean: PoTableColumn): string {
     if (rowValue || rowValue === false || rowValue === 0) {
-      rowValue = convertToBoolean(rowValue);
+      rowValue = PoUtils.convertToBoolean(rowValue);
 
       if (columnBoolean.boolean) {
         return rowValue ? columnBoolean.boolean.trueLabel || 'Sim' : columnBoolean.boolean.falseLabel || 'Não';
@@ -659,6 +646,12 @@ export class PoTableComponent
     this.changeVisibleColumns.emit(columns);
   }
 
+  onChangeFixedColumns(columns: Array<string>) {
+    if (!this.hideActionFixedColumns) {
+      this.changeFixedColumns.emit(columns);
+    }
+  }
+
   onColumnRestoreManager(value: Array<string>) {
     this.columnRestoreManager.emit(value);
   }