ng-components-tsi 0.0.38 → 0.0.39

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

@@ -1,116 +0,0 @@
-@if (withFiltro()) {
-<div class="col-12 mb-2 mt-2 d-flex justify-content-end align-items-center">
-    <label for="" class="form-label me-2 pt-2">Buscar:</label>
-    <input type="text" class="form-control cw-250" (input)="textoDigitado($event)">
-</div>
-}
-<div class="table-container table-responsive" [style.max-height]="generateValueContainer()"
-    [style.height]="generateValueContainer()">
-    <table #table class="table table-striped normal-table" [ngClass]="isDarkMode() ? 'table-dark' : ''">
-        <thead>
-            <tr class="shadow-sm">                
-                @if (customActions) {
-                <th scope="col" class="width-50 mwp-50 b-table h-table"></th>
-                }
-
-                @for (column of columns(); track $index) {
-                    @if (column.tipo !== 'mostrar' || column.condition()) {
-                    <th class="b-table h-table" scope="col" #thElement [title]="column.caption" [style.width]="column.width + 'px'"
-                        [style.min-width]="column.width + 'px'">
-                        {{ column.caption }}
-                    </th>
-                    }
-                }
-            </tr>
-        </thead>
-
-        <tbody>
-            @for (row of rowFilter(); track $index) {
-            <tr [ngClass]="{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier()))}"
-                (click)="selectRow(identifier().length < 1 ? $index : row); checkItem(row)"
-                [id]="identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))">
-
-
-                @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 (column.template) {
-                    <td class="b-table">
-                        <ng-container *ngTemplateOutlet="column.template; context: { $implicit: row, column: column }">
-                        </ng-container>
-                    </td>
-
-                    }
-                    @else {
-
-                        @switch (column.tipo) {
-                            @case ('fecha') {
-                            <td class="b-table" [innerHTML]="getHighlight(row[column.fieldname] | date:'dd/MM/yyyy')"
-                                [title]="row[column.fieldname] | date:'dd/MM/yyyy'" [ngClass]="row.situac == 'J' ? 'text-error':''">
-                            </td>
-
-                            }
-
-                            @case ('situacion') {
-                            <td class="b-table" [innerHTML]="getHighlight(row[column.fieldname])" [title]="row[column.fieldname]"
-                                [ngClass]="row.situac == 'J' ? 'text-error':''">
-
-                            </td>
-
-                            }
-
-                            @case ('decimal') {
-                            <td class="text-end b-table" [innerHTML]="getHighlight((row[column.fieldname] ?? 0) | number:'1.2-2')"
-                                [title]="(row[column.fieldname] ?? 0) | number:'1.2-2'"
-                                [ngClass]="row.situac == 'J' ? 'text-error':''">
-                            </td>
-                            }
-
-                            @case ('text-center') {
-                            <td class="text-center b-table" [innerHTML]="getHighlight(row[column.fieldname])"
-                                [title]="row[column.fieldname]" [ngClass]="row.situac == 'J' ? 'text-error':''">
-                            </td>
-                            }
-
-                            @case ('check') {
-                            <td class="text-center b-table" [title]="checkString[row[column.fieldname]]">
-                                <i class="fs-5"
-                                    [ngClass]="row[column.fieldname] == 'S'?'fas fa-check yes-icon':'fas fa-times no-icon'"></i>
-                            </td>
-                            }
-
-                            @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]="resolverItem.class">{{ resolverItem.text }}</span>
-                                        } @else {
-                                            {{ resolverItem.text }}
-                                        }
-                                        </td>
-                                    }
-                                }
-
-                            @default {
-                            <td class="b-table" [innerHTML]="getHighlight(row[column.fieldname])" [title]="row[column.fieldname]"
-                                [ngClass]="row.situac == 'J' ? 'text-error':''">
-
-                            </td>
-
-                            }
-                        }
-
-                    }
-                }
-            </tr>
-            }
-        </tbody>
-    </table>
-</div>

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

@@ -1,70 +0,0 @@
-thead {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-}
-
-.table-container {
-  width: 100%;
-  max-width: 100%;
-  overflow-x: auto;
-  display: block;
-  white-space: nowrap;
-}
-
-.table-blank {
-  --bs-table-bg-state: white !important
-}
-
-.normal-table thead tr th {
-  font-size: 11px;
-  text-align: start;
-  font-weight: bold;
-  //color: black;
-  max-width: 220px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  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;
-  }
-}
-
-.text-error {
-  color: rgb(214, 0, 0) !important;
-  font-weight: bold !important;
-}
-.text-exito {
-  color: rgb(0, 119, 60) !important;
-  font-weight: bold !important;
-}

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

@@ -1,141 +0,0 @@
-import { CommonModule, DatePipe, DecimalPipe } from '@angular/common';
-import { Component, computed, ContentChild, inject, input, linkedSignal, model, output, TemplateRef } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { CellRender, CellRendered } from '../../../models/cell-rendered';
-
-@Component({
-  selector: 'app-table-simple',
-  imports: [FormsModule, CommonModule],
-  templateUrl: './table-simple.component.html',
-  styleUrl: './table-simple.component.scss',
-  providers:[DatePipe,DecimalPipe]
-})
-export class TableSimpleComponent {
-
-  private datePipe = inject(DatePipe)
-  private decimalPipe = inject(DecimalPipe)
-
-  withFiltro = input<boolean>(false)
-  busqueda = model<string>('')
-  rows = input<any[]>([])
-  columns = input<any[]>([]);
-  altoContainer = input<number>()
-  selectedRow = model<any>(null)
-  identifier = input<string[]>([])
-  position = input<'flex'|'block'>('flex')
-  withSelect = input<boolean>(false)
-  selected = output<any>()
-
-  rendered = input<CellRendered[]>([])
-
-  isDarkMode = input<boolean>(false)
-
-  @ContentChild('customActions', { static: false }) customActions!: TemplateRef<any>
-
-  checkString = {
-    'S': 'Activo',
-    'N': 'Inactivo'
-  }
-
-  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
-  })
-
-  concatenarValue(obj: any, value: string[]) {
-    let result = ''
-    value.forEach(el => {
-      result += obj[el]
-    })
-    return result
-  }
-
-  selectRow(index: any) {
-    if (this.identifier().length < 1) {
-      return this.selectedRow.set(index)
-    }
-    this.selectedRow.set(this.concatenarValue(index, this.identifier()))
-  }
-
-  checkItem (row:any) {
-    if(this.withSelect()){
-      this.selected.emit(row)
-    }
-  }
-
-  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>')
-  }
-
-  generateValueContainer = () => {
-    if(this.position() == 'flex' && this.altoContainer()){
-      return 'calc(100vh - ' + this.altoContainer() + 'px)'
-    }
-    if(this.position() == 'block' && this.altoContainer()){
-      return this.altoContainer() + 'px'
-    }
-    return ''
-  }
-
-  getTipoCampo(fieldname: string): string {
-    const columna = this.columns().find(col => col.fieldname == fieldname)
-    return columna?.tipo ?? 'string'
-  }
-
-  private filtraItem(item: any, term: string): boolean {
-    const columnasActivas = Object.entries(this.filtrarColumnas())
-      .filter(([_campo, activo]) => activo)
-
-    return columnasActivas.some(([campo]) => {
-      let valor = item[campo]
-      const tipo = this.getTipoCampo(campo)
-
-      switch (tipo) {
-        case 'fecha':
-          valor = this.datePipe.transform(valor, 'dd/MM/yyyy') ?? ''
-          break
-        case 'decimal':
-          valor = this.decimalPipe.transform(valor, '1.2-2') ?? ''
-          break
-        case 'check':
-          valor = valor ? 'Sí' : 'No'
-          break
-        default:
-          valor = (valor ?? '').toString()
-      }
-
-      return valor.toLowerCase().includes(term)
-    })
-  }
-
-  textoDigitado(event: Event) {
-    const value = (event.target as HTMLInputElement).value
-    this.busqueda.set(value)
-  }
-  
-  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;
-    }
-}

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

@@ -1,268 +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' : ''">
-                <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>