ng-components-tsi 0.0.38 → 0.0.39

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

@@ -1,130 +0,0 @@
-@if (withFiltro()) {
-    <div class="col-12 mb-2 mt-2 d-flex flex-wrap justify-content-end align-items-center">
-        <label  for="text_busqueda_modal" class="form-label me-2 pt-2">Buscar:</label>
-        <input type="text" id="text_busqueda_modal" class="form-control cw-250 ch-25" (input)="textoDigitado($event)">
-    </div>
-}
-
-<div class="table-container" [ngClass]="mode() == 'normal' ? 'table-responsive' : ''" [style.max-height]="altoContainer()? 'calc(100vh - ' + altoContainer() + 'px)' : ''">
-<table #table class="table table-striped" [ngClass]="mode() == 'normal' ? 'normal-table' : 'flex-table'">
-    <thead>
-      <tr class="shadow-sm">
-        @for (column of columns(); track $index) {
-            @if (column.type !== 'mostrar' || column.condition()) {
-                <th #thElement [title]="column.name" [ngClass]="colorHeader()== 'normal' ? 'header-normal' : ''">
-                    {{ column.name }}
-                    @if (sortColumn == column.prop) {
-                        <span (click)="sortTable(column.prop)" class="cursor-pointer">
-                            <i [ngClass]="sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'"></i>
-                        </span>
-                    }
-                    
-                    @if (sortColumn !== column.prop) {
-                        <i class="fas fa-sort icon-sort cursor-pointer" (click)="sortTable(column.prop)"></i>
-                    }
-                    @if (mode() == 'flex' && $index + 1 != columns().length) {
-                        <span class="resize-handle" (mousedown)="onResizeStart($event, thElement)"></span>
-                    }
-                </th>
-            }
-        }
-        
-      </tr>
-    </thead>
-
-    <tbody>
-
-            @for (row of rows(); track $index) {
-                <tr  [ngClass]="{'table-active': selectedRow == $index, 'grilla-error': getSituacionNumberFromColumns(row, columns()) == 9}" #fila (click)="enviarDataClick(row)">
-
-                    @for (column of columns(); track $index) {
-
-                        @if (column.type !== 'mostrar' || column.condition()) {
-                            @switch (column.type) {
-                                @case ('fecha') {
-                                    <td [innerHTML]="getHighlight(row[column.prop] | date:'dd/MM/yyyy')" [title]="row[column.prop] | date:'dd/MM/yyyy'" [ngClass]="row.situac == 'J' ? 'text-error':''">
-                                    </td>
-                                    
-                                }
-
-                                @case ('status') {
-                                    <td [innerHTML]="getHighlight(row[column.prop])" [title]="row[column.prop]" [ngClass]="row.situac == 'J' ? 'text-error': situacDaClave[row.situacda]">
-                                    </td>
-                                    
-                                }
-                                @case ('situacion') {
-                                    <td [innerHTML]="getHighlight(row[column.prop])"  [title]="row[column.prop]" [ngClass]="row.situac == 'J' ? 'text-error':''">
-                
-                                    </td>
-                                    
-                                }
-                                @case ('situacion_number') {
-                                    <td [innerHTML]="getHighlight(situacTesoreria[row[column.prop]])"  [title]="situacTesoreria[row[column.prop]]" [ngClass]="row[column.prop] == 9 ? 'text-error':''">
-                
-                                    </td>
-                                    
-                                }
-                                @case ('situacion_string') {
-                                    <td [innerHTML]="getHighlight(row[column.prop])"  [title]="row[column.prop]" [ngClass]="row.situac == 'J' ? 'text-error': situacDaStringClave[row[column.prop]]">
-                
-                                    </td>
-                                    
-                                }
-
-                                @case ('situacion_rendicion') {
-                                    <td [innerHTML]="getHighlight(situacDaRendicion[row[column.prop]])"  [title]="situacDaRendicion[row[column.prop]]" [ngClass]="row.situac == 'J' ? 'text-error': situacDaClaveRendicion[row[column.prop]]">
-                
-                                    </td>
-                                    
-                                }
-
-                                @case ('decimal') {
-                                <td class="text-end"
-                                    [innerHTML]="getHighlight((row[column.prop] ?? 0) | number:(column.pipe ?? '1.2-2'))"
-                                    [title]="(row[column.prop] ?? 0) | number:(column.pipe ?? '1.2-2')"
-                                    [ngClass]="row.situac == 'J' ? 'text-error':''">
-                                </td>
-                                }
-
-                                @case ('text-center') {
-                                    <td class="text-center" [innerHTML]="getHighlight(row[column.prop])" [title]="row[column.prop]" [ngClass]="row.situac == 'J' ? 'text-error':''">
-                                    </td>
-                                }
-
-                                @case ('check') {
-                                    <td class="text-center" [title]="checkString[row[column.prop]]" >
-                                        <i class="fs-5" [ngClass]="row[column.prop] == 'S'?'fas fa-check yes-icon':'fas fa-times no-icon'"></i>
-                                    </td>
-                                }
-
-                                @case ('check-input') {
-                                    <td class="text-center" >
-                                        <input type="checkbox" class="form-check-input fs-8" [checked]="row[column.prop] == 1" (change)="column.event ? clicCheck(column.prop,$event,row) : null">
-                                    </td>
-                                }
-
-                                @case ('mostrar') {
-                                    @if (column.condition()) {
-                                        <td [innerHTML]="getHighlight(row[column.prop])"  [title]="row[column.prop]">
-                                        </td> 
-                                    }
-                                }
-
-                                @default {
-                                    <td [innerHTML]="getHighlight(row[column.prop])"  [title]="row[column.prop]" [ngClass]="row.situac == 'J' ? 'text-error':''">
-                                        
-                                    </td>
-                                    
-                                }
-                            }
-                        }
-                        <!-- <td>{{ row[column.prop] }}</td> -->
-                    }
-                    
-                  </tr>
-            }
-
-      
-    </tbody>
-  </table>
-</div>

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

@@ -1,189 +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);
-}
-
-.header-normal {
-  background: rgb(170, 170, 170) !important;
-}
-
-.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;
-}

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

@@ -1,199 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, ElementRef, HostListener, input, output, QueryList, signal, ViewChildren } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { dropdownAnimation } from '../../../directivas/animaciones/fade-animation';
-
-@Component({
-  selector: 'app-table-busqueda',
-  imports: [CommonModule, FormsModule],
-  templateUrl: './table-busqueda.component.html',
-  styleUrl: './table-busqueda.component.scss',
-  animations: [dropdownAnimation]
-})
-export class TableBusquedaComponent {
-  @ViewChildren('fila') filas!: QueryList<ElementRef>
-  @ViewChildren('thElement') tableHeaders!: QueryList<ElementRef>
-
-  rows = input<any[]>([])
-  columns = input<any[]>([])
-  withFiltro = input<boolean>(false)
-  mode = input<string>('normal')
-  altoContainer = input<number>()
-
-  emitirBusqueda = output<string>()
-  emitirCheck = output<any>()
-  emitirSelected = output<any>()
-
-  colorHeader = input<'normal' | 'light'>('normal')
-
-  busqueda: string = ''
-  resizingColumn: HTMLElement | null = null
-  startX: number = 0
-  startWidth: number = 0
-
-  selectedRow = 0
-
-  sortColumn: string | null = null
-  sortDirection: 'asc' | 'desc' = 'asc'
-
-  situacDaClave: Record<string, string> = {
-    'A': '',
-    'B': 'text-exito',
-    'J': 'text-error'
-  }
-  situacDaStringClave: Record<string, string> = {
-    'En Espera': '',
-    'Aprobado': 'text-exito',
-    'Desaprobado': 'text-error'
-  }
-
-  situacDaRendicion: Record<string, string> = {
-    'A': 'EN ESPERA',
-    'S': 'APROBADO',
-    'N': 'DESAPROBADO'
-  }
-
-  situacDaClaveRendicion: Record<string, string> = {
-    'A': 'text-alerta',
-    'S': 'text-exito',
-    'N': 'text-error'
-  }
-
-  situacTesoreria: Record<number, string> = {
-    0: 'Libre',
-    1: 'Proceso',
-    2: 'Contabilizado',
-    9: 'Anulado'
-  }
-
-  checkString = {
-    'S': 'Activo',
-    'N': 'Inactivo'
-  }
-
-  showPopover = signal<boolean>(false)
-
-
-  selectRow(index: number) {
-    this.selectedRow = index
-  }
-
-  onResizeStart(event: MouseEvent, thElement: HTMLElement) {
-    this.resizingColumn = thElement
-    this.startX = event.pageX
-    this.startWidth = thElement.offsetWidth
-
-    document.addEventListener('mousemove', this.onResizing)
-    document.addEventListener('mouseup', this.onResizeEnd)
-  }
-
-  onResizing = (event: MouseEvent) => {
-    if (!this.resizingColumn) return
-
-    const newWidth = this.startWidth + (event.pageX - this.startX)
-    this.resizingColumn.style.width = `${newWidth}px`
-  };
-
-  onResizeEnd = () => {
-    this.resizingColumn = null;
-    document.removeEventListener('mousemove', this.onResizing)
-    document.removeEventListener('mouseup', this.onResizeEnd)
-  }
-
-  sortTable(column: string) {
-    if (this.sortColumn == column) {
-      this.sortDirection = this.sortDirection == 'asc' ? 'desc' : 'asc'
-    } else {
-      this.sortColumn = column
-      this.sortDirection = 'asc'
-    }
-
-    this.rows().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())
-      }
-    })
-  }
-
-  textoDigitado(event: Event) {
-    const value = (event.target as HTMLInputElement).value
-    this.busqueda = value
-    this.emitirBusqueda.emit(value)
-  }
-
-  getHighlight(text: any): string {
-    if (text == null) {
-      text = ''
-    }
-    if (!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>')
-  }
-
-  desglozarValor = (valor: string) => {
-    return valor!.split(',')
-  }
-
-  getSituacionNumberFromColumns(row: any, columns: any[]): number {
-    const situacionColumn = columns.find(col => col.type == 'situacion_number')
-    if (situacionColumn) {
-      return row[situacionColumn.prop] || 0
-    }
-    return 0
-  }
-
-  clicCheck(item: string, event: Event, row: any) {
-    const check = event.target as HTMLInputElement
-    const resultCierre = check.checked ? 1 : 0
-    const mes = item.at(-1)
-    const formatObj = { ...row, cierre: resultCierre, mes }
-    this.emitirCheck.emit(formatObj)
-  }
-
-
-  @HostListener('window:keydown', ['$event'])
-  manejarTeclado(event: KeyboardEvent) {
-    const numFilas = this.rows().length
-
-    if (numFilas == 0) {
-      return
-    }
-
-    if (event.key == 'ArrowDown') {
-      this.selectedRow = (this.selectedRow + 1) % numFilas
-      this.scrollToFila()
-    } else if (event.key == 'ArrowUp') {
-      this.selectedRow = (this.selectedRow - 1 + numFilas) % numFilas
-      this.scrollToFila()
-    } else if (event.key == 'Enter') {
-      event.preventDefault();
-      this.enviarDataClick(this.rows()[this.selectedRow])
-    }
-
-  }
-
-  scrollToFila() {
-    const filaElement = this.filas.toArray()[this.selectedRow]?.nativeElement
-    if (filaElement) {
-      filaElement.scrollIntoView({ behavior: 'smooth', block: 'center' })
-    }
-  }
-
-  enviarDataClick(obj: any) {
-    this.emitirSelected.emit(obj)
-  }
-
-  tooglePopover() {
-    this.showPopover.update(status => !status)
-  }
-}