keevo-components 2.0.180 → 2.0.182

package/src/lib/components/kv-table-draggable/kv-table-draggable.component.ts

@@ -1,982 +0,0 @@
-import { DatePipe, DecimalPipe } from '@angular/common';
-import { CdkDragDrop, CdkDragStart, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
-
-import {
-  AfterViewInit,
-  Component,
-  ContentChildren,
-  DoCheck,
-  ElementRef,
-  EventEmitter,
-  HostListener,
-  Input,
-  OnInit,
-  Output,
-  QueryList,
-  Renderer2,
-  TemplateRef,
-  ViewChild,
-  computed,
-  effect,
-  input,
-  model,
-  signal,
-  viewChild,
-} from '@angular/core';
-
-import { Table, TablePageEvent } from 'primeng/table';
-import { MenuItem } from 'primeng/api';
-
-import { CpfCnpjPipe } from '../../api/pipes/cpfcnpj.pipe';
-import {
-  getOrExecute,
-  ValueOrFn,
-  mapToMenuItem,
-} from '../../api/components/table/kv-menuitem';
-import { TableConfig } from '../../api/components/table/table.config';
-import { TableConfigColumn } from '../../api/components/table/table.config.column';
-import { TablePaginate } from '../../api/components/table/table.paginate';
-import { TelefonePipe } from '../../api/pipes/telefone.pipe';
-import { TemplateDirective } from '../../api/directives/template/template.directive';
-
-const imgDefault =
-  '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';
-
-@Component({
-  selector: 'kv-table-draggable',
-  templateUrl: './kv-table-draggable.component.html',
-  styleUrls: ['./kv-table-draggable.component.scss'],
-})
-export class KvTableDraggableComponent implements OnInit, DoCheck, AfterViewInit {
-  
-  columns: TableConfigColumn[] = [];
-  deletedColuns: TableConfigColumn[] = [];
-  globalFilterFields: string[] = [];
-  selectedSize: string = '';
-  collapsed: boolean = false;
-  menuFiltro: boolean = false;
-  checked: boolean = true;
-  checkboxClicked: boolean = false;
-  menuItems!: MenuItem[];
-  tableActions: MenuItem[][] = [];
-  currDataSource: any[] = [];
-  actionsOffset: number = 0;
-  private isDragging: boolean = false;
-
-  private prepositions = new Set<string>([
-    'de', 'da', 'do', 'em', 'no', 'na', 'para', 'por', 'com', 'a', 'o', 'e'
-  ]);
-  private romanNumerals = new Set<string>([
-    'I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X', 'XI', 'XII', 'XIII', 'XIV', 'XV',
-    'XVI', 'XVII', 'XVIII', 'XIX', 'XX'
-  ]);
-  private siglas = new Set<string>([
-    'UI', 'UX', 'TI'
-  ]);
-
-  first = model<number>(0);
-  rows = model<number>(5);
-  
-  tableCell = viewChild<ElementRef>('tableCell');
-
-  ellipsisText = input<boolean>(false);
-  isLoadingSkeleton = input<boolean>(false);
-  filterButton = input<boolean>(false);
-  filterButtonBadge = input<string>('');
-
-  private readonly tableConfig = signal<TableConfig | undefined>(undefined);
-  widthPage = signal<number>(0);
-
-  @Input('templates') _templates!: any;
-  @Input() searchPlaceholder: string = 'Pesquisar...';
-  @Input() defaultSortField: string | undefined = undefined;
-  @Input() dataSource: any[] = [];
-  @Input() selectedItems: any[] = [];
-  @Input() totalRecords!: number;
-  @Input() paginator: boolean = true;
-  @Input() rowsPerPageOptions!: number[];
-  @Input() tableSize!: number;
-  @Input() filterColumnsBtn: boolean = false;
-  @Input() replaceEmptyValues: boolean = true;
-  @Input() filtrosAvancados: boolean = false;
-  @Input() scrollHeight: string = '';
-  @Input() isTableScrollable: boolean = false;
-  @Input() tableCaptalized: boolean = false;
-  @Input() rowTrackBy: (index: number, item: any) => any = (index: number, item: any) => item;
-  @Input() responsiveLayout: boolean = true;
-  @Input() disabledHeaderCheckbox: boolean = false;
-  @Input() enableDragDrop: boolean = true;
-  @Input() dragDropDisabled: (item: any) => boolean = () => false;
-  @Input() applyStyle: Function = (rowData: any, col: TableConfigColumn) => '';
-  @Input() pageLinksOptions!: number;
-  @Input() showFirstLastIcon!: boolean;
-  @Input('config') set setConfig(value: TableConfig) {
-    this.tableConfig.set({
-      enableCation: value.enableCation || true,
-      enableSelect: value.enableSelect || false,
-      enableFilter: value.enableFilter || true,
-      ...value,
-    });
-
-    this.definirColunasConfiguraveis(this.tableConfig()!);
-  }
-
-  @Output() onActiveItem: EventEmitter<any> = new EventEmitter();
-  @Output() onActiveItemLote: EventEmitter<any> = new EventEmitter();
-  @Output() onPaginate: EventEmitter<TablePaginate> = new EventEmitter();
-  @Output() onSelectionChange: EventEmitter<any> = new EventEmitter();
-  @Output() doubleClickEvent: EventEmitter<any> = new EventEmitter();
-  @Output() filterField: EventEmitter<any> = new EventEmitter();
-  @Output() onSwitchTableChange: EventEmitter<any> = new EventEmitter();
-  @Output() onRowReorder: EventEmitter<{previousIndex: number, currentIndex: number, item: any, newOrder: any[]}> = new EventEmitter();
-
-  @ViewChild('menuFiltroDiv') menuFiltroDiv!: ElementRef;
-  @ViewChild('botaoFiltro') botaoFiltro!: ElementRef;
-  @ViewChild('inputField') inputField!: ElementRef;
-  @ViewChild('table', { static: false }) table!: Table;
-  @ViewChild(Table) ptable!: Table;
-
-  @ContentChildren(TemplateDirective) templates!: QueryList<any>;
-
-  constructor(
-    private readonly datePipe: DatePipe,
-    private readonly decimalPipe: DecimalPipe,
-    private readonly cpfCnpjPipe: CpfCnpjPipe,
-    private readonly telefonePipe: TelefonePipe,
-    private renderer: Renderer2,
-    private elementRef: ElementRef
-  ) {
-    this.isRowSelectable = this.isRowSelectable.bind(this);
-  }
-
-  configuracaoEffect = effect(() => {
-    const config = this.tableConfig()!;
-    this.definirFiltrosGlobais(config);
-    this.definirColunasConfiguraveis(config);
-  });
-
-  dataSourceSignal = signal<any[]>([]);
-
-  widthSkeletons: number[] = [];
-
-  widthRandom = computed(() => (col: any, row: any) => {
-    if (!col.template && !col.icon && !col.fieldType && !col.boolean && !col.pipe) {
-      return this.widthSkeletons[row] * 100;
-    } else {
-      return 100;
-    }
-  });
-
-  ngDoCheck(): void {
-    if (this.isDragging) {
-      return;
-    }
-    
-    if (this.dataSource) {
-      const hasLengthChanged = this.dataSource.length !== this.currDataSource.length;
-      const hasContentChanged = !hasLengthChanged && 
-        JSON.stringify(this.dataSource) !== JSON.stringify(this.currDataSource);
-      
-      if (hasLengthChanged || hasContentChanged) {
-        this.currDataSource = [...this.dataSource];
-        this.dataSourceSignal.set([...this.dataSource]);
-        this.createTableActions();
-        
-        if (hasLengthChanged && this.paginator) {
-          const totalPages = Math.ceil(this.dataSource.length / this.rows());
-          const currentPage = Math.floor(this.first() / this.rows()) + 1;
-          
-          if (currentPage > totalPages && totalPages > 0) {
-            this.first.set((totalPages - 1) * this.rows());
-          }
-        }
-      }
-    }
-  }
-
-  dataSourceMock: any[] = [];
-
-  isEmptyDataSource = computed(() => {
-    return JSON.stringify(this.dataSourceSignal()) === JSON.stringify(this.dataSourceMock);
-  })
-
-  loadingSkeletonUtilities() {
-    if (this.dataSource.length === 0 && this.isLoadingSkeleton()) {
-      let rowItem: any = {};
-      this.tableConfig()?.columns.forEach((col) => {
-        rowItem[col.field] = '';
-      });
-
-      this.dataSourceMock = Array(this.rows()).fill({ ...rowItem });
-      this.dataSource = this.dataSourceMock;
-
-      for (let i = 0; i < this.rows(); i++) {
-        this.widthSkeletons.push(Math.random() * 0.7 + 0.2);
-      }
-    }
-  }
-
-  ngOnInit() {
-    this.loadingSkeletonUtilities();
-    this.adjustTableSize();
-    this.widthPage.set(window.innerWidth);
-    this.config.columns.forEach(col => {
-      this.columns.push(col);
-    });
-    this.checkHideColumns();
-    
-    if (this.dataSource) {
-      this.currDataSource = [...this.dataSource];
-      this.dataSourceSignal.set([...this.dataSource]);
-    }
-    
-    const defaultSortField = this.defaultSortField;
-    if (defaultSortField && this.dataSource) {
-      this.dataSource.sort((a, b) => {
-        if (
-          typeof a[defaultSortField] === 'string' &&
-          typeof b[defaultSortField] === 'string'
-        ) {
-          return (a[defaultSortField] as string).localeCompare(
-            (b[defaultSortField] as string)
-          );
-        } else if (
-          typeof a[defaultSortField] === 'boolean' &&
-          typeof b[defaultSortField] === 'boolean'
-        ) {
-          return a[defaultSortField] === b[defaultSortField]
-            ? 0
-            : a[defaultSortField]
-              ? 1
-              : -1;
-        } else if (
-          typeof a[defaultSortField] === 'number' &&
-          typeof b[defaultSortField] === 'number'
-        ) {
-          return (a[defaultSortField] as number) - (b[defaultSortField] as number);
-        } else {
-          return 0;
-        }
-      });
-      
-      this.currDataSource = [...this.dataSource];
-      this.dataSourceSignal.set([...this.dataSource]);
-    }
-  }
-
-  ngAfterViewInit() {
-    document.querySelectorAll('.disabled-row').forEach(row => {
-      row.querySelectorAll('td').forEach(cell => {
-        cell.addEventListener('click', event => {
-          const target = event.target as HTMLElement;
-          if (!target.classList.contains('tooltip')) {
-            event.preventDefault();
-            event.stopPropagation();
-          }
-        });
-      });
-    });
-  }
-
-  definirColunasConfiguraveis(config: TableConfig) {
-    this.columns.splice(0, this.columns.length);
-
-    config.columns.forEach(col => {
-      this.columns.push(col);
-    });
-  }
-
-  definirFiltrosGlobais(config: TableConfig) {
-    if (config?.enableFilter) {
-
-      this.globalFilterFields.splice(0, this.globalFilterFields.length);
-
-      for (const column of config.columns) {
-        this.globalFilterFields.push(column.field);
-      }
-    }
-  }
-
-  resetTable() {
-    if (this.ptable) this.ptable.reset();
-    if (this.inputField) this.inputField.nativeElement.value = '';
-  }
-
-  @HostListener('window:resize', ['$event'])
-  onWindowResize() {
-    this.adjustTableSize();
-    this.widthPage.set(window.innerWidth);
-  }
-
-  public activeItem(rowData: any) {
-    this.onActiveItem.emit(rowData);
-  }
-
-  getOrExecute<T>(action: ValueOrFn<T>, data: any): T {
-    return getOrExecute(action, data);
-  }
-
-  isBooleanField(rowData: any, col: TableConfigColumn): boolean {
-    return typeof rowData[col.field] == 'boolean';
-  }
-
-  isChipField(col: TableConfigColumn): boolean {
-    return col.fieldType == 'chip';
-  }
-
-  protected onPage(event: TablePageEvent) {
-    this.first.set(event.first);
-    this.rows.set(event.rows);
-  }
-
-  isImageField(col: TableConfigColumn): boolean {
-    let retorno = col.fieldType && col.fieldType === 'image' ? true : false;
-    return retorno;
-  }
-
-  isSwitchField(col: TableConfigColumn): boolean {
-    let retorno = col.fieldType && col.fieldType === 'switch' ? true : false;
-    return retorno;
-  }
-
-  isRowSelectable(event: any) {
-    return !this.isDisabledCheckbox(event.data);
-  }
-
-  isDisabledCheckbox(rowData: any): boolean {
-    return this.config.disableControlCheckboxFunction
-      ? this.config.disableControlCheckboxFunction(rowData)
-      : false;
-  }
-
-  isDisabledRow(rowData: any): boolean {
-    return this.config.disableRow ? this.config.disableRow(rowData) : false;
-  }
-
-  private getStyleClass(rowData: any, col: TableConfigColumn, data: any): string {
-    return col ? col.styleClass!(rowData, col, data) : ''
-  }
-
-  verificaCursor() {
-    document.querySelectorAll('.disabled-row').forEach(row => {
-      row.querySelectorAll('td').forEach(cell => {
-        cell.addEventListener('click', event => {
-          const target = event.target as HTMLElement;
-          if (!target.classList.contains('tooltip')) {
-            event.preventDefault();
-            event.stopPropagation();
-          }
-        });
-      });
-    });
-  }
-
-  loadImage(rowData: any, col: TableConfigColumn): string {
-    /*
-      Nossa coluna de imagem trabalha com strings do tipo: base64 ou url
-    */
-    let retorno = `data: image / jpg; base64, ${imgDefault} `;
-    if (rowData && col && rowData[col.field] && rowData[col.field] !== '') {
-      if (rowData[col.field].includes('http')) retorno = rowData[col.field];
-      else retorno = `data: image / jpg; base64, ${rowData[col.field]} `;
-    }
-
-    return retorno;
-  }
-
-  public onGlobalFilter(table: Table, event: Event) {
-    this.filterField.emit((event.target as HTMLInputElement).value);
-    table.filterGlobal((event.target as HTMLInputElement).value, 'contains');
-  }
-
-  public paginate(event: any) {
-    if (event) {
-      let paginaInicial =
-        (event?.first > 0 ? event.first / event.rows : event.first) + 1;
-      let termoPesquisa = '';
-      let ordenacao = '';
-
-      if (event.globalFilter) termoPesquisa = event.globalFilter;
-
-      if (event.sortField)
-        ordenacao = `${event.sortField} ${event.sortOrder === 1 ? 'ASC' : 'DESC'} `;
-
-      const objeto: TablePaginate = {
-        paginaInicial: paginaInicial,
-        tamanhoPagina: event.rows,
-        termoPesquisa: termoPesquisa,
-        ordenacao: ordenacao,
-        ordernacaoGroup: { column: event.sortField, direction: event.sortOrder === 1 ? 'ASC' : 'DESC' },
-      };
-
-      this.onPaginate.emit(objeto);
-
-      this.actionsOffset = event.first;
-      
-      this.first.set(event.first);
-      this.rows.set(event.rows);
-      
-      this.createTableActions();
-    }
-  }
-
-  selectionChange(value: any) {
-    this.onSelectionChange.emit(value);
-  }
-
-  public activeItemLote(selectedItems: any) {
-    this.onActiveItemLote.emit(selectedItems);
-  }
-
-  returnRowClass(rowData: any, col: TableConfigColumn) {
-    let value = rowData[col.field];
-    let rowClass: string;
-
-    this.tableSize > 800 ? (rowClass = 'text-base') : (rowClass = 'text-sm');
-
-    if (col.expiredDate == true) {
-      new Date(value) < new Date()
-        ? (rowClass = rowClass + ' text-red-400 font-semibold')
-        : '';
-    }
-    return rowClass;
-  }
-
-  private expiredFile(rowData: any, col: TableConfigColumn): boolean {
-    let value = rowData['datavencimento'];
-    return new Date(value) < new Date() && col.field == 'area';
-  }
-
-  transformValue(rowData: any, col: TableConfigColumn) {
-    let value = rowData[col.field];
-
-    if (col.transform) {
-      return col.transform(value);
-    }
-
-    if ((value == null || value === '' || value === undefined) && this.replaceEmptyValues && this.isLoadingSkeleton()) {
-      return '-';
-    }
-
-    if (value != null) {
-      if (!col.pipe) {
-        return value;
-      }
-
-      switch (col.pipe) {
-        case 'date':
-          return this.datePipe.transform(value, 'dd/MM/yyyy', 'UTC');
-        case 'datetime':
-          return this.datePipe.transform(value, 'dd/MM/yyyy hh:mm');
-        case 'dateMonthYear':
-          return this.datePipe.transform(value, 'MM/yyyy');
-        case 'decimal':
-          return this.decimalPipe.transform(value, '1.2-2', 'pt-BR');
-        case 'cpfcnpj':
-          return this.cpfCnpjPipe.transform(value);
-        case 'telefone':
-          return this.telefonePipe.transform(value);
-        case 'capitalize':
-          return this.transformCapitalize(value);
-        case 'money':
-          return this.formatarValor(value);
-        case 'percentage':
-          return `${value} % `;
-
-        default:
-          break;
-      }
-    }
-  }
-
-  transformCapitalize(value: string): string {
-    if (!value) return value;
-
-    return value.split(' ').map((word, index) => {
-      const wordUpper = word.toUpperCase();
-      const wordLower = word.toLocaleLowerCase();
-
-      if (this.romanNumerals.has(wordUpper)) {
-        return word;
-      }
-
-      if (this.siglas.has(wordUpper)) {
-        return word;
-      }
-
-      if (index !== 0 && this.prepositions.has(wordLower)) {
-        return wordLower;
-      }
-
-      return word.charAt(0).toLocaleUpperCase() + word.slice(1).toLocaleLowerCase();
-    }).join(' ');
-  }
-
-  formatarValor(valor: number): string {
-    const formatter = new Intl.NumberFormat('pt-BR', {
-      style: 'currency',
-      currency: 'BRL',
-    });
-
-    return formatter.format(valor);
-  }
-
-  adjustTableSize() {
-    if (this.tableSize < 800) {
-      this.selectedSize = 'p-datatable-sm';
-    } else {
-      this.selectedSize = '';
-    }
-  }
-
-  doubleClick(e: any, rowData: any) {
-    let eventDoubleClick = { event: e, rowData: rowData };
-
-    let array: string[] = [];
-    e.target.classList.forEach((x: any) => array.push(x));
-
-    this.doubleClickEvent.emit(eventDoubleClick);
-  }
-
-  retornarRow(rowData: any, col: TableConfigColumn, field: string): string {
-    const _rowaction = this.config.rows ? this.config.rows[col.field] : null;
-    const _field: string =
-      _rowaction && _rowaction[field]
-        ? _rowaction[field].constructor === Function
-          ? _rowaction[field].apply(this, [rowData])
-          : _rowaction[field]
-        : null;
-    return _field;
-  }
-
-  private exibirCampo(field: any, rowData: any) {
-    let visible = field.visible ? field.visible(rowData) : true;
-
-    return visible;
-  }
-
-  returnClassChip(rowData: any, col: TableConfigColumn): string {
-    return `chip - style w - auto border - round - 2xl p - 2 text - ${this.retornarRow(
-      rowData,
-      col,
-      'stylechip'
-    )
-      } border - ${this.retornarRow(rowData, col, 'stylechip')} `;
-  }
-
-  returnClassIcon(rowData: any, col: TableConfigColumn): string {
-    return this.retornarRow(rowData, col, 'iconrow');
-  }
-
-  returnTooltipIcon(rowData: any, col: TableConfigColumn): string {
-    return this.retornarRow(rowData, col, 'tooltipiconrow');
-  }
-
-  returnTooltipRow(rowData: any, col: TableConfigColumn): any {
-    return this.retornarRow(rowData, col, 'tooltiprow');
-  }
-
-  deleteColumn(field: string) {
-    let index: number;
-
-    let column: TableConfigColumn | undefined = this.config.columns.find(
-      x => x.field == field
-    );
-    if (column) {
-      index = this.config.columns.indexOf(column);
-      this.config.columns.splice(index, 1);
-      this.deletedColuns.push(column);
-    }
-  }
-
-  addColumn(field: string) {
-    let index: number;
-
-    let column: TableConfigColumn | undefined = this.config.columns.find(
-      (x) => x.field == field
-    );
-
-    if (!column) {
-      let deletedColumn: TableConfigColumn | undefined =
-        this.deletedColuns.find((x) => x.field == field);
-
-      if (deletedColumn != undefined) {
-        index = this.deletedColuns.indexOf(deletedColumn);
-        this.deletedColuns.slice(index, 1);
-        this.config.columns.push(deletedColumn);
-      }
-    }
-  }
-
-  dinamicColumnSet(e: any, col: TableConfigColumn) {
-    col.checked = e.checked;
-    if (e.checked) this.addColumn(col.field);
-    else this.deleteColumn(col.field);
-
-    if (col.position) this.config.columns.sort(this.sortByPosition());
-  }
-
-  abrirMenuFiltro(e: any) {
-    this.menuFiltro = !this.menuFiltro;
-    this.checkboxClicked = false;
-
-    if (this.widthPage() < 700)
-      this.styleSetter(
-        'left',
-        this.botaoFiltro.nativeElement.offsetLeft - 288 + 'px'
-      );
-    else
-      this.styleSetter(
-        'left',
-        this.botaoFiltro.nativeElement.offsetLeft + 40 + 'px'
-      );
-
-    this.styleSetter('top', this.botaoFiltro.nativeElement.offsetTop + 'px');
-    this.styleSetter('visibility', this.menuFiltro ? 'visible' : 'hidden');
-  }
-
-  fecharMenuFiltro() {
-    this.menuFiltro = false;
-    this.checkboxClicked = false;
-
-    this.styleSetter('visibility', 'hidden');
-  }
-
-  @HostListener('document:keydown.escape', ['$event'])
-  onEscapeKey(event: KeyboardEvent) {
-    if (this.filterColumnsBtn == true && this.menuFiltro == true) {
-      this.fecharMenuFiltro();
-    }
-  }
-
-  @HostListener('document:click', ['$event'])
-  onClickEvent(event: any) {
-    if (this.filterColumnsBtn == true && this.menuFiltro == true) {
-      const clickedElement = event.target as HTMLElement;
-      const menuFiltroDiv =
-        this.elementRef.nativeElement.querySelector('#menuFiltroDiv');
-      const botaoFiltro =
-        this.elementRef.nativeElement.querySelector('#botaoFiltro');
-      const isCheckboxClicked =
-        clickedElement.classList.toString().includes('p-checkbox') ||
-        event.target.classList.toString() == '';
-      const isInsideMenu =
-        menuFiltroDiv?.contains(clickedElement) ||
-        botaoFiltro?.contains(clickedElement) ||
-        isCheckboxClicked;
-
-      if (!isInsideMenu) this.fecharMenuFiltro();
-    }
-  }
-
-  styleSetter(style: string, data: string) {
-    this.renderer?.setStyle(this.menuFiltroDiv.nativeElement, style, data);
-  }
-
-  checkMenuFiltro(col: TableConfigColumn) {
-    let deletedColumn = this.deletedColuns.find(
-      x => x.field == col.field
-    );
-    if (deletedColumn) col.checked = false;
-    else col.checked = true;
-  }
-
-  sortByPosition() {
-    return function (elem1: any, elem2: any) {
-      if (elem1.position < elem2.position) {
-        return -1;
-      } else if (elem1.position > elem2.position) {
-        return 1;
-      } else {
-        return 0;
-      }
-    };
-  }
-
-  dinamicDisableColumn(col: TableConfigColumn): boolean {
-    if (col.fixedColumn) return col.fixedColumn;
-    else return false;
-  }
-
-  checkHideColumns() {
-    let hideColumnsConfig = this.columns.filter(
-      col => col.hideColumn == true
-    );
-    hideColumnsConfig.forEach(col => this.deleteColumn(col.field));
-  }
-
-  getCustomTemplate(templatename: string): TemplateRef<any> {
-    return this._templates[templatename];
-  }
-
-  onSwitchChange(estado: any, rowData: any, col: TableConfigColumn) {
-    this.onSwitchTableChange.emit({
-      estado: estado,
-      rowData: rowData,
-      col: col,
-    });
-
-    rowData[col.field] = estado;
-  }
-
-  createTableActions() {
-    this.tableActions = this.dataSource?.map((x) =>
-      this.config.actions
-        ? this.config.actions.map((y) => mapToMenuItem(y, x))
-        : []
-    );
-  }
-
-  currentPageActions = computed(() => {
-    const currentPageData = this.currentPageData();
-    return currentPageData?.map((x) =>
-      this.config.actions
-        ? this.config.actions.map((y) => mapToMenuItem(y, x))
-        : []
-    ) || [];
-  });
-
-  dragDropData = computed(() => {
-    if (this.config.lazy) {
-      return this.currentPageData();
-    } else {
-      return this.dataSourceSignal();
-    }
-  });
-
-  onSort(e: any) {
-    this.dataSource = [...this.dataSource];
-  }
-
-  get config(): TableConfig {
-    return this.tableConfig()!;
-  }
-
-  columnsFilter = computed(() => {
-    const dynamicColumns = (this.tableConfig()?.columns ?? []).filter(col => !col.fixedColumn);
-
-    return [...dynamicColumns, ...this.deletedColuns];
-  });
-
-  returnMaxWidth = computed(() => (widthCol: string) => {
-    let widthTable = this.tableCell()?.nativeElement.parentElement.offsetWidth;
-    let percent = Number(widthCol.replace('%', ''));
-
-    let widthCalc = widthTable * percent / 100;
-
-    return `${widthCalc}px`;
-  });
-
-  currentPageData = computed(() => {
-    const sourceData = this.dataSourceSignal();
-    
-    if (!sourceData || sourceData.length === 0) {
-      return [];
-    }
-    
-    if (!this.paginator) {
-      return sourceData;
-    }
-    
-    const startIndex = this.first();
-    const pageSize = this.rows();
-    
-    const safeStartIndex = Math.min(startIndex, Math.max(0, sourceData.length - pageSize));
-    const safeEndIndex = Math.min(safeStartIndex + pageSize, sourceData.length);
-    
-    return sourceData.slice(safeStartIndex, safeEndIndex);
-  });
-
-
-
-
-  //inicio das funções específicas de drag and drop
-
-  drop(event: CdkDragDrop<any[]>) {
-    this.isDragging = false;
-    
-    if (event.previousContainer === event.container) {
-      if (!this.isValidDragOperation(event.previousIndex, event.currentIndex)) {
-        return;
-      }
-      
-      const currentPageStartIndex = this.first();
-      const globalPreviousIndex = currentPageStartIndex + event.previousIndex;
-      const globalCurrentIndex = currentPageStartIndex + event.currentIndex;
-      
-      if (this.config.lazy) {
-        const currentPageDataArray = [...this.currentPageData()];
-        moveItemInArray(currentPageDataArray, event.previousIndex, event.currentIndex);
-        
-        this.dataSource.splice(currentPageStartIndex, this.rows(), ...currentPageDataArray);
-        
-        this.currDataSource = [...this.dataSource];
-        this.dataSourceSignal.set([...this.dataSource]);
-        
-        this.onRowReorder.emit({
-          previousIndex: globalPreviousIndex,
-          currentIndex: globalCurrentIndex,
-          item: currentPageDataArray[event.currentIndex],
-          newOrder: [...this.dataSource]
-        });
-      } else {
-        if (globalPreviousIndex >= this.dataSource.length || globalCurrentIndex >= this.dataSource.length) {
-          console.warn('❌ Global indices outside dataSource bounds:', {
-            globalPreviousIndex,
-            globalCurrentIndex,
-            dataSourceLength: this.dataSource.length
-          });
-          return;
-        }
-        
-        moveItemInArray(this.dataSource, globalPreviousIndex, globalCurrentIndex);
-        
-        this.currDataSource = [...this.dataSource];
-        this.dataSourceSignal.set([...this.dataSource]);
-                
-        this.onRowReorder.emit({
-          previousIndex: globalPreviousIndex,
-          currentIndex: globalCurrentIndex,
-          item: this.dataSource[globalCurrentIndex],
-          newOrder: [...this.dataSource]
-        });
-      }
-      
-      this.createTableActions();
-      
-    } else {
-      transferArrayItem(
-        event.previousContainer.data,
-        event.container.data,
-        event.previousIndex,
-        event.currentIndex,
-      );
-    }
-  }
-
-  private isValidDragOperation(previousIndex: number, currentIndex: number): boolean {
-    const currentPageSize = this.currentPageData().length;
-    const isValid = previousIndex >= 0 && previousIndex < currentPageSize && 
-                   currentIndex >= 0 && currentIndex < currentPageSize;
-    
-    if (!isValid) {
-      console.warn('⚠️ Invalid drag operation:', {
-        previousIndex,
-        currentIndex,
-        currentPageSize,
-        currentPageDataLength: this.currentPageData().length,
-        dataSourceLength: this.dataSource.length,
-        first: this.first(),
-        rows: this.rows(),
-        currentPage: Math.floor(this.first() / this.rows()) + 1
-      });
-    }
-    
-    return isValid;
-  }
-
-  onDragStarted(event: CdkDragStart): void {
-    const draggedRow = event.source.element.nativeElement as HTMLTableRowElement;
-    
-    this.isDragging = true;
-    
-    const applyPreviewStyles = () => {
-      const preview = document.querySelector('.cdk-drag-preview') as HTMLTableRowElement;
-
-      if (preview && draggedRow) {
-        preview.classList.add('initializing');
-        preview.classList.remove('ready');
-        
-        const parentTable = draggedRow.closest('table');
-        const originalCells = draggedRow.querySelectorAll('td');
-        
-        const tableRect = parentTable?.getBoundingClientRect();
-        const rowRect = draggedRow.getBoundingClientRect();
-        
-        while (preview.firstChild) {
-          preview.removeChild(preview.firstChild);
-        }
-        
-        const previewTable = document.createElement('table');
-        const previewTbody = document.createElement('tbody');
-        const previewRow = document.createElement('tr');
-        
-        previewTable.style.cssText = `
-          width: ${tableRect?.width ? Math.min(tableRect.width, 800) : 'auto'}px;
-          margin: 0;
-          border-collapse: collapse;
-          table-layout: fixed;
-          background: white;
-        `;
-        
-        if (parentTable) {
-          previewTable.className = parentTable.className;
-          const computedTableStyle = window.getComputedStyle(parentTable);
-          previewTable.style.fontFamily = computedTableStyle.fontFamily;
-          previewTable.style.fontSize = computedTableStyle.fontSize;
-          previewTable.style.lineHeight = computedTableStyle.lineHeight;
-        }
-        
-        previewRow.className = draggedRow.className;
-        previewRow.style.height = `${rowRect.height}px`;
-        
-        originalCells.forEach((originalCell, index) => {
-          const previewCell = originalCell.cloneNode(true) as HTMLTableCellElement;
-          const cellRect = originalCell.getBoundingClientRect();
-          
-          previewCell.style.cssText = `
-            width: ${cellRect.width}px;
-            min-width: ${cellRect.width}px;
-            max-width: ${cellRect.width}px;
-            height: ${cellRect.height}px;
-            padding: ${window.getComputedStyle(originalCell).padding};
-            text-align: ${window.getComputedStyle(originalCell).textAlign};
-            vertical-align: ${window.getComputedStyle(originalCell).verticalAlign};
-            border: none;
-            background: transparent;
-            pointer-events: none;
-            box-sizing: border-box;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-          `;
-          
-          previewRow.appendChild(previewCell);
-        });
-        
-        previewTbody.appendChild(previewRow);
-        previewTable.appendChild(previewTbody);
-        preview.appendChild(previewTable);
-        
-        preview.style.cssText = `
-          display: block;
-          background: white;
-          border: 1px solid rgba(var(--kv-color-system), 0.2);
-          border-radius: 8px;
-          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.1);
-          z-index: 1000;
-          overflow: hidden;
-          width: ${tableRect?.width ? Math.min(tableRect.width, 800) : 'auto'}px;
-          max-width: 90vw;
-          pointer-events: none;
-        `;
-        
-        setTimeout(() => {
-          if (preview) {
-            preview.classList.remove('initializing');
-            preview.classList.add('ready');
-          }
-        }, 50);
-        
-      } else {
-        requestAnimationFrame(applyPreviewStyles);
-      }
-    };
-    
-    requestAnimationFrame(applyPreviewStyles);
-  }
-
-  onDragEnded(): void {
-    this.isDragging = false;
-  }
-}