ng-components-tsi 0.0.38 → 0.0.39

package/src/lib/ui/tables/table-advance-optimizada/table-advance-optimizada.component.ts

@@ -1,352 +0,0 @@
-import { DatePipe, DecimalPipe, NgClass, NgTemplateOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, Component, computed, contentChild, effect, ElementRef, HostListener, inject, input, linkedSignal, model, output, QueryList, signal, TemplateRef, untracked, viewChild, ViewChild, ViewChildren } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { DropdownCdkComponent } from "../../dropdown/dropdown-cdk/dropdown-cdk.component";
-import { CardMobileComponent } from "../card-mobile/card-mobile.component";
-import { dropdownAnimation, fadeInOut } from '../../../directivas/animaciones/fade-animation';
-import { CellRender, CellRendered } from '../../../models/cell-rendered';
-import { TableData } from '../../../models/table-data.model';
-import { formatNumber, validarBoolean } from 'shared-tsi';
-
-@Component({
-  selector: 'app-table-advance-optimizada',
-  imports: [DropdownCdkComponent, FormsModule, NgClass, NgTemplateOutlet, CardMobileComponent],
-  templateUrl: './table-advance-optimizada.component.html',
-  styleUrl: './table-advance-optimizada.component.scss',
-  animations: [dropdownAnimation, fadeInOut],
-  providers: [DatePipe, DecimalPipe],
-  changeDetection:ChangeDetectionStrategy.OnPush
-})
-export class TableAdvanceOptimizadaComponent {
-
-  tableHeaders = viewChild<QueryList<ElementRef>>('thElement')
-  customActions = contentChild<TemplateRef<any>>('customActions')
-  anchor = viewChild<ElementRef<HTMLTableRowElement>>('anchor')
-
-  private decimalPipe = inject(DecimalPipe)
-  titleTabla = input<string>('Contrato')
-
-
-  rows = input<any[]>([])
-  columns = input<any[]>([])
-  withDetails = input<boolean>(false)
-  withFiltro = input<boolean>(false)
-  altoContainer = input<number>()
-  colorHeader = input<'normal' | 'light'>('normal')
-
-  busqueda = signal<string>('')
-  selectedRow = model<any>(null)
-  identifier = input<string[]>([])
-
-  altoContenedor = signal<number>(0)
-  showPopoverFilter = signal<boolean>(false)
-  withHeight = input<boolean>(false)
-  rendered = input<CellRendered[]>([])
-  withTotal = input<boolean>(false)
-  withCheckbox = input<boolean>(false)
-  selectItems = model<string[]>([])
-  isDarkMode = input<boolean>(false)
-
-  sortColumn: string | null = null
-  sortDirection: 'asc' | 'desc' = 'asc'
-  expandedRows: number = -1
-
-
-  /* VARIABLES PARA OPTIMIZAR */
-  dataVirtual = signal<any[]>([])
-  isLoading = signal(false);
-  isLoadingResponsive = signal(false)
-  // private batchSize = 30;
-  private loadedCount = 0;
-  private observer!: IntersectionObserver;
-  maxItems = input<number>(50)
-  batchSize = input<number>(40)
-
-  rowEvent = output<any>()
-
-  rowFilter = computed(() => {
-    const term = this.busqueda().toLowerCase()
-    const currentRows = this.rows?.() || []
-    return currentRows.filter(item => this.filtraItem(item, term))
-  })
-
-  filtrarColumnas = linkedSignal(() => {
-    const columns = this.columns()
-    const filtro: { [caption: string]: boolean } = {}
-    columns.forEach((col) => {
-      if (col.fieldname) {
-        filtro[col.fieldname] = true
-      }
-    })
-    return filtro
-  })
-
-  toggleFiltros(event: Event) {
-    const checked = (event.target as HTMLInputElement).checked
-    const filtros = this.filtrarColumnas()
-    Object.keys(filtros).forEach(key => {
-      filtros[key] = checked
-    })
-  }
-
-  visibilidadColumn = linkedSignal(() => {
-    const columns = this.columns()
-    const columnVisibility: { [caption: string]: boolean } = {}
-    columns.forEach((col) => {
-      if (col.caption) {
-        columnVisibility[col.caption] = true
-      }
-    })
-    return columnVisibility
-  })
-
-  concatenarValue(obj: any, value: string[]) {
-    let result = ''
-    value.forEach(el => {
-      result += obj[el]
-    })
-    return result
-  }
-
-  checkString = {
-    'S': 'Activo',
-    'N': 'Inactivo'
-  }
-
-  isMobile = signal<boolean>(window.innerWidth <= 768)
-
-  constructor() {
-    effect(() => {
-      const size = (this.rowFilter() ?? []).length
-
-      const alto = this.altoContainer()
-      if (alto > 0 && alto < this.altoContenedor()) {
-        setTimeout(() => {
-          this.altoContenedor.set(alto)
-        }, 300)
-      }
-      if (alto > 0 && alto > this.altoContenedor()) {
-        this.altoContenedor.set(alto)
-      }
-
-      const selected = untracked(() => this.selectedRow())
-      if (size > 0 && selected) {
-        queueMicrotask(() => {
-          const el = document.getElementById('row_table_' + selected)
-          el?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
-        })
-      }
-    })
-
-    effect(() => {
-      const filtered = this.rowFilter();
-      const firstBatch = filtered.slice(0, this.batchSize());
-      this.dataVirtual.set(firstBatch);
-      this.loadedCount = firstBatch.length;
-    });
-
-    effect(() => {
-      this.isMobile();
-      this.isLoadingResponsive.set(true);
-      setTimeout(() => this.isLoadingResponsive.set(false), 200);
-    });
-
-    effect(() => {
-      if(this.anchor()) {
-        this.actionsAnchor()
-      }
-    })
-  }
-
-  @HostListener('window:resize', ['$event'])
-  onResize(event: any) {
-    this.isMobile.set(event.target.innerWidth <= 768);
-  }
-
-  actionsAnchor() {
-    this.observer = new IntersectionObserver(entries => {
-      if (entries[0].isIntersecting && this.loadedCount < this.rowFilter().length && !this.isLoading()) {
-        this.loadMore();
-      }
-    });
-    this.observer.observe(this.anchor().nativeElement);
-  }
-
-  togglePopoverFilter() {
-    this.showPopoverFilter.update(prev => !prev)
-  }
-
-  selectRow(index: any) {
-    if (this.identifier().length < 1) {
-      return this.selectedRow.set(index)
-    }
-    this.selectedRow.set(this.concatenarValue(index, this.identifier()))
-  }
-
-  sortTable(column: string) {
-    if (this.sortColumn == column) {
-      this.sortDirection = this.sortDirection == 'asc' ? 'desc' : 'asc'
-    } else {
-      this.sortColumn = column
-      this.sortDirection = 'asc'
-    }
-
-    this.dataVirtual().sort((a, b) => {
-      const valueA = a[column] ?? ''
-      const valueB = b[column] ?? ''
-
-      if (typeof valueA == 'number' && typeof valueB == 'number') {
-        return this.sortDirection == 'asc' ? valueA - valueB : valueB - valueA
-      } else {
-        return this.sortDirection == 'asc'
-          ? valueA.toString().localeCompare(valueB.toString())
-          : valueB.toString().localeCompare(valueA.toString())
-      }
-    })
-  }
-
-  toggleExpandRow(index: number) {
-    this.expandedRows = this.expandedRows == index ? -1 : index
-  }
-
-  textoDigitado(event: Event) {
-    const value = (event.target as HTMLInputElement).value
-    this.busqueda.set(value)
-  }
-
-  getHighlight(text: any, fieldname: string): string {
-    if (text == null) {
-      text = ''
-    }
-    if (!this.filtrarColumnas()[fieldname] || !this.busqueda()) return text
-    if (typeof text !== 'string') {
-      text = text.toString()
-    }
-    const regex = new RegExp(`(${this.busqueda()})`, 'gi')
-    return text?.replace(regex, '<mark>$1</mark>')
-  }
-
-  getSituacionNumberFromColumns(row: any, columns: any[]): number {
-    const situacionColumn = columns.find(col => col.type == 'situacion_number')
-    if (situacionColumn) {
-      return row[situacionColumn.prop] || 0
-    }
-    return 0
-  }
-
-  private filtraItem(item: any, term: string): boolean {
-    const columnasActivas = Object.entries(this.filtrarColumnas())
-      .filter(([_campo, activo]) => activo)
-    return columnasActivas.some(([campo]) => {
-      const raw = item[campo];
-      const formatted = item._format?.[campo];
-      const valor = (formatted ?? raw ?? '').toString().toLowerCase();
-      return valor.includes(term)
-    })
-  }
-
-  validaVisibilidad(value: boolean) {
-    return validarBoolean(value)
-  }
-
-  allCheck(event: Event) {
-    const input = event.target as HTMLInputElement
-    if (input.checked) {
-      const keys = this.rowFilter().map(row => JSON.stringify(row))
-      this.selectItems.set(keys)
-    } else {
-      this.selectItems.set([])
-    }
-  }
-
-  validaAllCheck(): boolean {
-    const keys = this.rowFilter().map(row => JSON.stringify(row))
-    return (
-      keys.length > 0 &&
-      keys.every(k => this.selectItems().includes(k))
-    )
-  }
-
-  isItemSelected(index: number): boolean {
-    const row = this.rowFilter()[index]
-    const key = JSON.stringify(row)
-    return this.selectItems().includes(key)
-  }
-
-  toogleItem(index: number, event: Event) {
-    const input = event.target as HTMLInputElement
-    const row = this.rowFilter()[index]
-    const key = JSON.stringify(row)
-
-    if (input.checked) {
-      this.selectItems.update(sel => [...sel, key])
-      return
-    }
-    this.selectItems.update(sel => sel.filter(s => s != key))
-  }
-
-  resolveCell(col: string, row: any): CellRender | null {
-    const value = row[col]
-    const r = this.rendered().find(r => r.matches(col, value, row))
-    return r ? r.render(value, row) : null
-  }
-
-  getTotals(fieldname: string): string {
-    const itemsSelected = this.withCheckbox() ? this.selectItems().map(item => JSON.parse(item?.toString())) : this.rows()
-    const final = itemsSelected.reduce((acc, row) => {
-      const val = row[fieldname]
-      return acc + (typeof val == 'number' ? val : 0)
-    }, 0)
-
-    return formatNumber(this.decimalPipe,final) 
-  }
-
-  getColspanBeforeTotals(): number {
-    const firstTotalizableIndex = this.columns().findIndex(c => c.totalizable)
-    const result = firstTotalizableIndex >= 0 ? firstTotalizableIndex : this.columns.length
-    return this.withCheckbox() ? result + 1 : result
-  }
-
-  getRowClass(row: any): { [key: string]: boolean } {
-    return {
-      'text-error': row.situac == 'J',
-      'text-alerta': row.situac == 'L'
-    }
-  }
-
-  getPosition(col:TableData):string {
-    if(col.position) return `text-${col.position}`
-    if(['decimal', 'number'].includes(col.tipo)) return `text-end`
-    if(['fecha', 'date'].includes(col.tipo)) return `text-center`
-    return 'text-start'
-  }
-
-  private loadMore() {
-    this.isLoading.set(true);
-    setTimeout(() => {
-
-      const current = this.dataVirtual();
-      const next = this.rowFilter().slice(this.loadedCount, this.loadedCount + this.batchSize());
-      const merged = [...current];
-      for (const item of next) {
-        if (!merged.some(x => x.idListTsi === item.idListTsi)) {
-          merged.push(item);
-        }
-      }
-      this.dataVirtual.set(merged);
-      this.loadedCount += next.length;
-      this.isLoading.set(false);
-    }, 100);
-  }
-
-  onClick(row:any) {
-    this.rowEvent.emit({ usecase:1 , data:row})
-  }
-  onDoubleClick(row:any) {
-    this.rowEvent.emit({ usecase:2 , data:row})
-  }
-  onRightClick(event: MouseEvent,row:any) {
-    event.preventDefault();
-    this.rowEvent.emit({ usecase:3 , data:row})
-  }
-}

package/src/lib/ui/tables/table-agrupada/table-agrupada.component.html

@@ -1,340 +0,0 @@
-@if (withFiltro()) {
-<div class="col-12 mb-2 mt-2 d-flex justify-content-end align-items-center">
-    <label class="form-label me-2 pt-2">Buscar</label>
-    <input type="text" class="form-control cw-250" (input)="textoDigitado($event)">
-
-    <app-dropdown-cdk>
-        <ng-template #trigger>
-            <button class="btn btn-dark boton-buscar fs-7">
-                <i class="fas fa-cog"></i>
-            </button>
-        </ng-template>
-
-        <ng-template #content>
-            <div class="popover-menu-filter bg-white shadow" @dropdownAnimation>
-                <div class="popover-title fs-7 bg-white">
-                    Filtros
-                </div>
-
-                <div class="form-check form-switch text-start d-flex align-items-center">
-                    <input class="form-check-input py-0 my-0 cw-25 ch-15" type="checkbox" [checked]="true"
-                        (change)="toggleFiltros($event)" />
-                    <label class="form-check-label ps-2 fs-6 mb-0 cursor-pointer">
-                        Todos
-                    </label>
-                </div>
-
-                @for (col of columns(); track col.caption) {
-                <div class="form-check form-switch text-start d-flex align-items-center">
-                    <input type="checkbox" class="form-check-input py-0 my-0 cw-25 ch-15"
-                        id="{{ 'filter_' + col.caption }}" [(ngModel)]="filtrarColumnas()[col.fieldname]" />
-                    <label class="form-check-label ps-2 fs-6 cursor-pointer mb-0" for="{{ 'filter_' + col.caption }}">
-                        {{ col.caption }}
-                    </label>
-                </div>
-                }
-            </div>
-        </ng-template>
-    </app-dropdown-cdk>
-</div>
-}
-
-<!-- VISTA MOBILE -->
-@if (activeMobileMode()) {
-@if (isLoadingResponsive()) {
-<div class="d-flex flex-column justify-content-center align-items-center py-2">
-    <div class="spinner-border text-secondary mb-2" role="status"></div>
-    <span class="ms-2 fs-6">Cargando...</span>
-</div>
-}
-
-@if (!isLoadingResponsive()) {
-@if (isMobile()) {
-<app-card-mobile [data]="rowFilter()" [columns]="columns()" [actions]="customActions()" [identifier]="identifier()"
-    [titleTabla]="titleTabla()" [altoContainer]="altoContainer()" />
-}
-@if (!isMobile()) {
-<ng-container *ngTemplateOutlet="table"></ng-container>
-}
-}
-}
-@else {
-<ng-container *ngTemplateOutlet="table"></ng-container>
-}
-
-<ng-template #table>
-    <div class="table-container table-responsive"
-        [style.height]="withHeight() && altoContenedor() ? 'calc(100vh - ' + altoContenedor() + 'px)' : ''"
-        [style.max-height]="altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''">
-        <div>
-            <table #table class="table table-striped normal-table" [ngClass]="isDarkMode() ? 'table-dark' : ''">
-
-                @if (hasColumnGroups()) {
-                <thead>
-                    <tr class="shadow-sm">
-                        @if (withDetails()) {
-                        <th rowspan="2" class="cw-20 b-table">
-                        </th>
-                        }
-
-                        @if (withCheckbox()) {
-                        <th rowspan="2" class="cw-20 b-table">
-                            <label>
-                                <input type="checkbox" name="check_box_select_table_main"
-                                    id="check_box_select_table_main" animatedCheckbox [checked]="validaAllCheck()"
-                                    (change)="allCheck($event)">
-                            </label>
-                        </th>
-                        }
-
-                        @if (customActions()) {
-                        <th rowspan="2" class="cw-40 b-table">
-                        </th>
-                        }
-
-                        @for (seg of headerSegments(); track $index) {
-
-                        @if (seg.type === 'column') {
-                        <th class="b-table" rowspan="2"
-                            [style.width]="seg.column?.width ? seg.column.width + 'px' : 'auto'">
-                            {{ seg.column?.caption }}
-                        </th>
-                        }
-
-                        @if (seg.type === 'group') {
-                        <th class="b-table text-center fw-bold" [attr.colspan]="seg.group?.colspan">
-                            {{ seg.group?.label }}
-                        </th>
-                        }
-
-                        }
-                    </tr>
-
-                    <tr class="shadow-sm">
-                        @for (column of groupedColumns(); track $index) {
-                        @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.fieldname] !== false) {
-                        <th class="b-table" #thElement [title]="column.caption"
-                            [style.width]="column?.width ? column.width + 'px' : 'auto'"
-                            [style.max-width]="column?.width ? column.width + 'px' : 'auto'">
-                            {{ column.caption }}
-                            @if(column.caption){
-                            @if (sortColumn == column.fieldname) {
-                            <span (click)="sortTable(column.fieldname)" class="cursor-pointer">
-                                <i
-                                    [ngClass]="sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'"></i>
-                            </span>
-                            }
-                            @if (sortColumn !== column.fieldname) {
-                            <i class="fas fa-sort icon-sort cursor-pointer" (click)="sortTable(column.fieldname)"></i>
-                            }
-                            }
-                        </th>
-                        }
-                        }
-                    </tr>
-                </thead>
-
-                } @else {
-
-                <thead>
-                    <tr class="shadow-sm">
-                        @if (withDetails()) {
-                        <th class="cw-20 b-table" [ngClass]="colorHeader()== 'normal' ? 'h-table' : ''"></th>
-                        }
-
-                        @if (withCheckbox()) {
-                        <th class="cw-20 b-table" [ngClass]="colorHeader()== 'normal' ? 'h-table' : ''">
-                            <label>
-                                <input type="checkbox" name="check_box_select_table_main"
-                                    id="check_box_select_table_main" animatedCheckbox [checked]="validaAllCheck()"
-                                    (change)="allCheck($event)">
-                            </label>
-                        </th>
-                        }
-
-                        @if (customActions()) {
-                        <th class="cw-40 b-table" [ngClass]="colorHeader()== 'normal' ? 'h-table' : ''">
-
-                            <app-dropdown-cdk>
-                                <ng-template #trigger>
-                                    <button class="btn p-0 text-dark d-flex mx-auto border-0">
-                                        <i class="fas fa-cog"></i>
-                                    </button>
-                                </ng-template>
-                                <ng-template #content>
-                                    <div class="popover-menu-column bg-white shadow mt-2" @dropdownAnimation>
-                                        <div class="popover-title fs-7 bg-white">Columnas</div>
-                                        @for (col of columns(); track col.caption) {
-                                        @if (col.caption) {
-                                        <div class="form-check form-switch text-start d-flex align-items-center">
-                                            <input type="checkbox" class="form-check-input py-0 my-0 cw-25 ch-15"
-                                                id="{{ 'switch_' + col.caption }}"
-                                                [(ngModel)]="visibilidadColumn()[col.fieldname]" />
-                                            <label class="form-check-label ps-2 fs-6 cursor-pointer font-label mb-0"
-                                                for="{{ 'switch_' + col.caption }}">
-                                                {{ col.caption }}
-                                            </label>
-                                        </div>
-                                        }
-                                        }
-                                    </div>
-                                </ng-template>
-                            </app-dropdown-cdk>
-                        </th>
-                        }
-                        @for (column of columns(); track $index) {
-                        @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.fieldname] !== false) {
-                        <th class="b-table" #thElement [title]="column.caption"
-                            [style.width]="column?.width ? column.width + 'px' : 'auto'"
-                            [style.max-width]="column?.width ? column.width + 'px' : 'auto'"
-                            [ngClass]="colorHeader()== 'normal' ? 'h-table' : ''">
-                            {{ column.caption }}
-                            @if(column.caption){
-                            @if (sortColumn == column.fieldname) {
-                            <span (click)="sortTable(column.fieldname)" class="cursor-pointer">
-                                <i
-                                    [ngClass]="sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'"></i>
-                            </span>
-                            }
-                            @if (sortColumn !== column.fieldname) {
-                            <i class="fas fa-sort icon-sort cursor-pointer" (click)="sortTable(column.fieldname)"></i>
-                            }
-                            }
-                        </th>
-                        }
-                        }
-                    </tr>
-                </thead>
-
-                }
-
-                <tbody>
-                    @for (row of dataVirtual(); track row.idListTsi) {
-                    @let idList = row.idListTsi;
-                    <tr [ngClass]="{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier()))}"
-                        (click)="selectRow(identifier().length < 1 ? $index : row); onClick(row)"
-                        (dblclick)="onDoubleClick(row)" (contextmenu)="onRightClick($event,row)"
-                        [id]="identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))">
-                        @if (withDetails()) {
-                        <td class="b-table text-center mwp-25">
-                            <a (click)="toggleExpandRow($index)" class="text-dark cursor-pointer fs-6">
-                                <i class="fa-solid" [class.fa-chevron-right]="expandedRows != $index"
-                                    [class.fa-chevron-down]="expandedRows == $index"></i>
-                            </a>
-                        </td>
-                        }
-
-                        @if (withCheckbox()) {
-                        <td scope="col" class="text-center b-table">
-                            <label>
-                                <input type="checkbox" [name]="'check_box_select_table_' + idList"
-                                    [id]="'check_box_select_table_' + idList" animatedCheckbox
-                                    [checked]="isItemSelected(idList)" (change)="toogleItem(idList , $event)"
-                                    [disabled]="isCheckboxDisabled(row)">
-                            </label>
-                        </td>
-                        }
-
-                        @if (customActions()) {
-                        <td class="text-center mwp-90 b-table">
-                            <ng-container
-                                *ngTemplateOutlet="customActions(); context: { $implicit: row }"></ng-container>
-                        </td>
-                        }
-                        @for (column of columns(); track $index) {
-                        @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.fieldname] !== false) {
-
-                        @if (column.template) {
-                        <td class="b-table">
-                            <ng-container
-                                *ngTemplateOutlet="column.template; context: { $implicit: row, column: column }">
-                            </ng-container>
-                        </td>
-                        }@else {
-                        @switch (column.tipo) {
-                        @case ('cell-render') {
-                        @let resolverItem = resolveCell(column.fieldname, row);
-                        @if (resolverItem) {
-                        <td class="b-table" [title]="resolverItem.text" [class.text-center]="resolverItem.icon">
-                            @if (resolverItem.icon) {
-                            <i class="fs-5" [ngClass]="resolverItem.icon"></i>
-                            } @else if (resolverItem.class) {
-                            <span [ngClass]="row.situac == 'J' ? 'text-error' : resolverItem.class">
-                                {{ resolverItem.text }}
-                            </span>
-                            } @else {
-                            {{ resolverItem.text }}
-                            }
-                        </td>
-                        }
-                        }
-
-                        @default {
-                        <td [innerHTML]="getHighlight(row._format?.[column.fieldname] ?? row[column.fieldname], column.fieldname)"
-                            [style.width]="column?.width ? column.width + 'px' : 'auto'"
-                            [style.max-width]="column?.width ? column.width + 'px' : 'auto'"
-                            [title]="row._format?.[column.fieldname] ?? row[column.fieldname]"
-                            [ngClass]="rowClassFn() ? rowClassFn()(row) : getRowClass(row)"
-                            class="b-table {{getPosition(column)}}">
-                        </td>
-                        }
-                        }
-
-                        }
-                        }
-                        }
-                    </tr>
-                    @if ($index == expandedRows) {
-                    <tr @fadeInOut>
-                        <td [attr.colspan]="columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)"
-                            class="table-blank">
-                            <div class="d-flex flex-column auditoria">
-                                <span class="fw-bold fs-7 text-dark">Datos de auditoría</span>
-                                <span class="fs-6 text-dark fw-bold">
-                                    Creación: {{ row.nomucreac }} el {{ row._format?.fcreac ?? row.fcreac }} a las {{
-                                    row.hcreac }}
-                                </span>
-                                <span class="fs-6 text-dark fw-bold">
-                                    Actualización: {{ row.nomuactua }} el {{ row._format?.factua ?? row.factua }} a las
-                                    {{
-                                    row.hactua }}
-                                </span>
-                            </div>
-                        </td>
-                    </tr>
-                    }
-                    }
-                    <tr #anchor>
-                        <td [attr.colspan]="columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)"
-                            class="text-center text-muted py-3">
-                            @if (isLoading()) {
-                            <span>Cargando más registros...</span>
-                            }
-                            @if (!isLoading() && dataVirtual().length >= 5000) {
-                            <span>No hay más registros</span>
-                            }
-                        </td>
-                    </tr>
-                </tbody>
-
-                @if (withTotal()) {
-                <tfoot>
-                    <tr>
-                        <td class="b-table" [attr.colspan]="getColspanBeforeTotals()">Totales:</td>
-                        @for (col of columns() ; track $index) {
-                        @if (col.totalizable) {
-                        <td class="b-table text-end">
-                            {{ getTotals(col.fieldname)}}
-                        </td>
-                        }
-                        }
-                    </tr>
-                </tfoot>
-                }
-            </table>
-        </div>
-    </div>
-
-</ng-template>
-
-<!-- FIN VISTA MOBILE -->