ng-components-tsi 0.0.38 → 0.0.39

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

@@ -1,226 +0,0 @@
-@if (withFiltro()) {
-<div class="col-12 mb-2 mt-2 d-flex justify-content-end align-items-center position-relative">
-    <label for="" class="form-label me-2 pt-2">Buscar</label>
-    <input type="text" class="form-control cw-250" (input)="textoDigitado($event)">
-    <button (click)="togglePopoverFilter()" class="btn btn-dark boton-buscar fs-7">
-        <i class="fas fa-cog"></i>
-    </button>
-    @if (showPopoverFilter()) {
-    <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">
-            <input class="form-check-input" type="checkbox" [checked]="true" (change)="toggleFiltros($event)">
-            <label class="form-check-label">Todos</label>
-        </div>
-        @for (col of columns(); track col.caption) {
-        <div class="form-check form-switch text-start">
-            <input type="checkbox" class="form-check-input" id="{{ 'filter_' + col.caption }}"
-                [(ngModel)]="filtrarColumnas()[col.fieldname]" />
-            <label class="form-check-label" for="{{ 'filter_' + col.caption }}">
-                {{ col.caption }}
-            </label>
-        </div>
-        }
-    </div>
-    }
-</div>
-}
-
-<!-- VISTA MOBILE -->
-
-@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()) {
-
-<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' : ''">
-                        <input type="checkbox" class="form-check-input fs-8 border border-secondary"
-                            [checked]="validaAllCheck()" (change)="allCheck($event)">
-                    </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" @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">
-                                        <input type="checkbox" class="form-check-input py-0 my-0 cw-25 ch-15"
-                                            id="{{'switch_' + col.caption}}"
-                                            [(ngModel)]="visibilidadColumn()[col.caption]" />
-                                        <label class="form-check-label ps-1 fs-6 cursor-pointer font-label"
-                                            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.caption] !== false) {
-                    <th class="b-table" #thElement [title]="column.caption"
-                        [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) {
-                <tr [ngClass]="{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier())), 
-                'grilla-error': getSituacionNumberFromColumns(row, columns()) == 9}"
-                    (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">
-                        <input type="checkbox" class="form-check-input fs-8 border border-secondary my-0 py-0"
-                            [checked]="isItemSelected($index)" (change)="toogleItem($index, $event)">
-                    </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.caption] !== false) {
-                    @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)"
-                        [title]="row._format?.[column.fieldname] ?? row[column.fieldname]" [ngClass]="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>
-
-}
-
-}
-
-
-<!-- FIN VISTA MOBILE -->

package/src/lib/ui/tables/table-advance-optimizada/table-advance-optimizada.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;
-}