ng-components-tsi 0.0.38 → 0.0.39

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

@@ -1,282 +0,0 @@
-.flex-table {
-  width: 100%;
-  ;
-  min-width: max-content;
-  border-collapse: collapse;
-  table-layout: fixed;
-}
-
-.flex-table th,
-td {
-  border: 1px solid #ddd;
-  padding: 8px;
-  position: relative;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  min-width: 40px;
-}
-
-.flex-table th {
-  transition: width 0.1s ease-out;
-  padding-right: 15px;
-}
-
-.resize-handle {
-  width: 5px;
-  height: 100%;
-  background: rgb(215, 215, 215);
-  position: absolute;
-  right: 0;
-  top: 0;
-  cursor: ew-resize;
-  user-select: none;
-}
-
-
-.flex-table thead tr th {
-  font-size: 12px;
-  font-weight: bold;
-  color: black;
-  border: none;
-  border-bottom: 1px solid rgb(206, 206, 206);
-}
-
-
-.flex-table tbody tr td {
-  font-size: 11px;
-  font-weight: 600;
-  color: black;
-  border: none;
-  border-bottom: 1px solid rgb(206, 206, 206);
-  padding-top: 7px;
-  padding-bottom: 7px;
-}
-
-.flex-table tbody tr {
-  transition: transform 0.3s ease-in-out, opacity 0.6s ease-in-out;
-}
-
-
-thead {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-}
-
-.icon-sort {
-  font-size: 11px;
-}
-
-.collapsed {
-  display: none;
-  max-height: 0;
-  opacity: 0;
-  overflow: hidden;
-  transition: max-height 0.4s ease-out, opacity 0.3s ease-out;
-}
-
-.expand-row {
-  max-height: 100px;
-  opacity: 1;
-  transition: max-height 0.4s ease-in, opacity 0.3s ease-in;
-}
-
-.table-container {
-  width: 100%;
-  max-width: 100%;
-  overflow-x: auto;
-  display: block;
-  white-space: nowrap;
-}
-
-.text-error {
-  color: rgb(214, 0, 0) !important;
-  font-weight: bold !important;
-}
-
-.text-error2 {
-  color: rgb(214, 0, 0);
-  font-weight: bold !important;
-}
-
-.text-exito {
-  color: rgb(0, 119, 60) !important;
-  font-weight: bold !important;
-}
-
-.text-alerta {
-  color: rgb(233, 167, 0) !important;
-  font-weight: bold !important;
-}
-
-.text-exito2 {
-  color: rgb(0, 119, 60);
-  font-weight: bold !important;
-}
-
-@media (max-width:1600px) {
-  .flex-table tbody tr td {
-    font-size: 9px;
-  }
-
-  .flex-table thead tr th {
-    font-size: 10px;
-  }
-}
-
-.table-blank {
-  --bs-table-bg-state: white !important
-}
-
-.normal-table thead tr th {
-  font-size: 12px;
-  
-  text-align: center;
-  font-weight: bold;
-  //color: black;
-  max-width: 220px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-weight: 600;
-  //border: 1px solid rgb(226, 226, 226);
-}
-
-.normal-table tbody tr {
-  height: 30px;
-}
-
-.normal-table tbody tr td {
-  font-size: 11px;
-  vertical-align: middle;
-  font-weight: 500;
-  //color: black;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  //border: 1px solid rgb(226, 226, 226);
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-.normal-table thead {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-}
-
-@media (max-width:1600px) {
-  .normal-table tbody tr td {
-    font-size: 9px;
-  }
-
-  .normal-table thead tr th {
-    font-size: 10px;
-  }
-}
-
-.grilla-error td {
-  color: rgb(214, 0, 0) !important;
-}
-
-.auditoria {
-  padding-left: 35px;
-  padding-top: 8px;
-  padding-bottom: 10px;
-}
-
-.popover-menu-column {
-  position: absolute;
-  top: 100%; 
-  left: 0;
-  border-radius: 0.375rem;
-  padding: 0rem 0.75rem;
-  display: block;
-  max-height: 300px;  
-  width: 250px;  
-  overflow-y: auto;
-}
-
-.popover-title {
-  font-weight: 700;
-  margin-bottom: 0.7rem;
-  margin-left: -0.75rem; 
-  margin-right: -0.75rem; 
-  padding: 0.4rem 0.75rem; 
-  border-bottom: 1px solid #7e7e7e;
-  position: sticky; 
-  top: 0; 
-  text-align: center;
-}
-
-.popover-menu-column::-webkit-scrollbar {
-  width: 5px;
-}
-
-.popover-menu-column::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 4px;
-}
-
-.popover-menu-column::-webkit-scrollbar-thumb {
-  background-color: #d7d7d7;
-  border-radius: 4px;
-  border: 2px solid transparent;
-}
-
-.popover-menu-filter {
-  position: absolute;
-  top: 85%; 
-  right: 0;
-  background-color: rgb(255, 255, 255);
-  border: 1px solid #ddd;
-  border-radius: 0.375rem;
-  padding: 0rem 0.75rem;
-  display: block;
-  max-height: 300px;  
-  width: 250px;  
-  overflow-y: auto;
-  z-index: 2;
-}
-
-.popover-menu-filter::-webkit-scrollbar {
-  width: 5px;
-}
-
-.popover-menu-filter::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 4px;
-}
-
-.popover-menu-filter::-webkit-scrollbar-thumb {
-  background-color: #d7d7d7;
-  border-radius: 4px;
-  border: 2px solid transparent;
-}
-
-.font-label{
-  font-weight: 500 !important;
-}
-.mtn-0{
-  margin-top: 0px;
-}
-
-.normal-table tfoot tr {
-  height: 50px;
-}
-
-.normal-table tfoot tr td {
-  font-size: 11px;
-  vertical-align: middle;
-  font-weight: 500;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-.normal-table tfoot {
-  position: sticky;
-  bottom: 0;
-  z-index: 1;
-}

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

@@ -1,425 +0,0 @@
-import { DecimalPipe, NgClass, NgTemplateOutlet } from '@angular/common';
-import { 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 { CellRender, CellRendered } from '../../../models/cell-rendered';
-import { TableData } from '../../../models/table-data.model';
-import { formatNumber, validarBoolean } from 'shared-tsi';
-import { FormateadorService } from '../../../service/formateador.service';
-import { SelectedRow } from '../../../models/selected-row';
-import { fadeInOut, dropdownAnimation } from '../../../directivas/animaciones/fade-animation';
-import { AnimatedCheckboxDirective } from '../../../directivas/estilos/animated-checkbox.directive';
-
-interface HeaderSegment {
-  type: 'column' | 'group'
-  column?: TableData
-  group?: {
-    label: string
-    colspan: number
-  }
-}
-
-@Component({
-  selector: 'app-table-agrupada',
-  imports: [DropdownCdkComponent, FormsModule, NgClass, NgTemplateOutlet, CardMobileComponent, AnimatedCheckboxDirective],
-  templateUrl: './table-agrupada.component.html',
-  styleUrl: './table-agrupada.component.scss',
-  animations: [fadeInOut, dropdownAnimation]
-})
-export class TableAgrupadaComponent {
-
-  tableHeaders = viewChild<QueryList<ElementRef>>('thElement')
-  customActions = contentChild<TemplateRef<any>>('customActions')
-  anchor = viewChild<ElementRef<HTMLTableRowElement>>('anchor')
-
-  private readonly formateador = inject(FormateadorService)
-  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)
-  withHeight = input<boolean>(false)
-  rendered = input<CellRendered[]>([])
-  withTotal = input<boolean>(false)
-  withCheckbox = input<boolean>(false)
-  selectItems = model<SelectedRow<any>[]>([])
-  isDarkMode = input<boolean>(false)
-
-  sortColumn: string | null = null
-  sortDirection: 'asc' | 'desc' = 'asc'
-  expandedRows: number = -1
-
-  activeMobileMode = input<boolean>(true)
-
-  /* VARIABLES PARA OPTIMIZAR */
-  dataVirtual = signal<any[]>([])
-  isLoading = signal(false);
-  isLoadingResponsive = signal(false)
-
-  private loadedCount = 0;
-  private observer!: IntersectionObserver;
-  maxItems = input<number>(50)
-  batchSize = input<number>(40)
-
-  rowClassFn = input<(row: any) => string | string[] | Record<string, boolean>>(null);
-  rowDisabledFn = input<((row: any) => boolean) | null>(null);
-
-  hasColumnGroups = computed(() => this.columns().some(col => !!col.group))
-  groupedColumns = computed(() => {
-    if (!this.hasColumnGroups()) return []
-    return this.columns().filter(c => c.group && c.visible !== false)
-  })
-
-  headerSegments = computed<HeaderSegment[]>(() => {
-    const cols = this.columns().filter(c => c.visible !== false)
-    if (!cols.some(c => c.group)) {
-      return cols.map(col => ({ type: 'column', column: col }))
-    }
-    const result: HeaderSegment[] = []
-    let i = 0
-    while (i < cols.length) {
-      const col = cols[i]
-      if (!col.group) {
-        result.push({ type: 'column', column: col })
-        i++
-        continue
-      }
-      const groupName = col.group
-      let colspan = 0
-      while (i < cols.length && cols[i].group === groupName) {
-        colspan++
-        i++
-      }
-      result.push({ type: 'group', group: { label: groupName, colspan } })
-    }
-    return result
-  })
-
-  rowEvent = output<any>()
-
-  rowFormat = computed(() => this.formateador.procesarLista(this.rows(), this.columns()))
-
-  rowFilter = linkedSignal(() => {
-    const term = this.busqueda().toLowerCase()
-    const currentRows = this.rowFormat?.() || []
-    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 columnVisibility: { [key: string]: boolean } = {}
-    this.columns().forEach(col => {
-      if (col.fieldname) {
-        columnVisibility[col.fieldname] = true
-      }
-    })
-    return columnVisibility
-  })
-
-  concatenarValue(obj: any, value: string[]) {
-    let result = ''
-    value.forEach(el => {
-      result += obj[el]
-    })
-    return result
-  }
-
-  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(() => this.resetSroll());
-
-    effect(() => {
-      if (!this.activeMobileMode()) return
-      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) {
-    if (!this.activeMobileMode()) return
-    this.isMobile.set(event.target.innerWidth <= 768);
-  }
-
-  resetSroll() {
-    const filtered = this.rowFilter();
-    const firstBatch = filtered.slice(0, this.batchSize());
-    this.dataVirtual.set(firstBatch);
-    this.loadedCount = firstBatch.length;
-  }
-
-  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);
-  }
-
-  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'
-    }
-
-    const sorted = [...this.rowFilter()].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;
-      }
-
-      // VALIDACION ADICIONAL, SI ES TEXTO ,PERO NUMEROS
-      const numA = Number(valueA);
-      const numB = Number(valueB);
-
-      if (!isNaN(numA) && !isNaN(numB)) {
-        return this.sortDirection === 'asc'
-          ? numA - numB
-          : numB - numA;
-      }
-
-      return this.sortDirection === 'asc'
-        ? valueA.toString().localeCompare(valueB.toString())
-        : valueB.toString().localeCompare(valueA.toString());
-    });
-
-    this.rowFilter.set(sorted);
-    this.resetSroll()
-
-    // 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)
-  }
-
-  isCheckboxDisabled(row: any): boolean {
-    return this.rowDisabledFn?.()?.(row) ?? false
-  }
-
-  allCheck(event: Event) {
-    const input = event.target as HTMLInputElement
-    if (input.checked) {
-      const total = this.rowFilter()
-        .filter(r => !this.isCheckboxDisabled(r))
-        .map(r => ({ id: r.idListTsi, data: r }))
-      this.selectItems.set(total)
-    } else {
-      this.selectItems.set([])
-    }
-  }
-
-  validaAllCheck(): boolean {
-    const selectable = this.rowFilter().filter(r => !this.isCheckboxDisabled(r))
-    const selectedIds = new Set(this.selectItems().map(s => s.id));
-    return selectable.length > 0 && selectable.every(row => selectedIds.has(row.idListTsi));
-  }
-
-  isItemSelected(id: string): boolean {
-    return this.selectItems().some(item => item.id == id)
-  }
-
-  toogleItem(idList: string, event: Event) {
-    const row = this.rowFormat().find(r => r.idListTsi == idList)
-    if (!row || this.isCheckboxDisabled(row)) {
-      return
-    }
-
-    const input = event.target as HTMLInputElement
-    if (input.checked) {
-      const item: SelectedRow<any> = { id: idList, data: row };
-      this.selectItems.update(sel => [...sel, item])
-      return
-    }
-    this.selectItems.update(sel => sel.filter(s => s.id != idList))
-  }
-
-  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.rowFormat()
-    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 })
-  }
-
-}