ng-components-tsi 0.0.20 → 0.0.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2365,11 +2365,11 @@ class TableAdvanceComponent {
2365
2365
  this.rowEvent.emit({ usecase: 3, data: row });
2366
2366
  }
2367
2367
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableAdvanceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2368
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TableAdvanceComponent, isStandalone: true, selector: "app-table-advance", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, withDetails: { classPropertyName: "withDetails", publicName: "withDetails", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null }, colorHeader: { classPropertyName: "colorHeader", publicName: "colorHeader", isSignal: true, isRequired: false, transformFunction: null }, isDarkMode: { classPropertyName: "isDarkMode", publicName: "isDarkMode", isSignal: true, isRequired: false, transformFunction: null }, selectedRow: { classPropertyName: "selectedRow", publicName: "selectedRow", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, withHeight: { classPropertyName: "withHeight", publicName: "withHeight", isSignal: true, isRequired: false, transformFunction: null }, rendered: { classPropertyName: "rendered", publicName: "rendered", isSignal: true, isRequired: false, transformFunction: null }, withTotal: { classPropertyName: "withTotal", publicName: "withTotal", isSignal: true, isRequired: false, transformFunction: null }, withCheckbox: { classPropertyName: "withCheckbox", publicName: "withCheckbox", isSignal: true, isRequired: false, transformFunction: null }, selectItems: { classPropertyName: "selectItems", publicName: "selectItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { emitirBusqueda: "emitirBusqueda", emitirCheck: "emitirCheck", emitirCheckCabecera: "emitirCheckCabecera", emitirRadio: "emitirRadio", emitirColumnasFiltrables: "emitirColumnasFiltrables", selectedRow: "selectedRowChange", selectItems: "selectItemsChange", rowEvent: "rowEvent" }, providers: [DatePipe, DecimalPipe], queries: [{ propertyName: "customActions", first: true, predicate: ["customActions"], descendants: true }], viewQueries: [{ propertyName: "tableHeaders", predicate: ["thElement"], descendants: true }], ngImport: i0, template: "@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center position-relative\">\r\n <label for=\"\" class=\"form-label me-2 pt-2\">Buscar</label>\r\n <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n <button (click)=\"togglePopoverFilter()\" class=\"btn btn-dark boton-buscar fs-7\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n @if (showPopoverFilter()) {\r\n <div class=\"popover-menu-filter shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7\">Filtros</div>\r\n <div class=\"form-check form-switch text-start\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"true\" (change)=\"toggleFiltros($event)\">\r\n <label class=\"form-check-label\">Todos</label>\r\n </div>\r\n @for (col of columns(); track col.caption) {\r\n <div class=\"form-check form-switch text-start\">\r\n <input type=\"checkbox\" class=\"form-check-input\" id=\"{{ 'filter_' + col.caption }}\"\r\n [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n <label class=\"form-check-label\" for=\"{{ 'filter_' + col.caption }}\">\r\n {{ col.caption }}\r\n </label>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n}\r\n\r\n<!---\r\n<div class=\"table-container table-responsive\" #tableContainer\r\n [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n (scroll)=\"onTableScroll($event)\">\r\n-->\r\n<div class=\"table-container table-responsive\"\r\n [style.height]=\"withHeight() && altoContenedor() ? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\">\r\n <div>\r\n <!-- [style.height]=\"virtualScrollService.getTotalHeight(itemHeight(), rowFilter().length)\" -->\r\n <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n <thead>\r\n <tr class=\"shadow-sm\">\r\n @if (withDetails()) {\r\n <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\"></th>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary\"\r\n [checked]=\"validaAllCheck()\" (change)=\"allCheck($event)\">\r\n </th>\r\n }\r\n\r\n @if (customActions) {\r\n <th class=\"cw-40 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n\r\n <app-dropdown-cdk>\r\n <ng-template #trigger >\r\n <button class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </ng-template>\r\n <ng-template #content>\r\n <div class=\"popover-menu-column bg-white shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">Columnas</div>\r\n @for (col of columns(); track col.caption) {\r\n @if (col.caption) {\r\n <div class=\"form-check form-switch text-start align-items-center d-flex\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{'switch_' + col.caption}}\" [(ngModel)]=\"visibilidadColumn()[col.caption]\" />\r\n <label class=\"form-check-label ps-1 fs-6 cursor-pointer font-label\"\r\n for=\"{{'switch_' + col.caption}}\">{{ col.caption }}</label>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n\r\n <!-- <button (click)=\"togglePopoverColumn()\" class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n @if (showPopoverColumn()) {\r\n <div class=\"popover-menu-column shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7\">Columnas</div>\r\n @for (col of columns(); track col.caption) {\r\n @if (col.caption) {\r\n <div class=\"form-check form-switch text-start\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{'switch_' + col.caption}}\" [(ngModel)]=\"visibilidadColumn()[col.caption]\" />\r\n <label class=\"form-check-label ps-1 fs-6 cursor-pointer font-label\"\r\n for=\"{{'switch_' + col.caption}}\">{{ col.caption }}</label>\r\n </div>\r\n }\r\n }\r\n </div>\r\n } -->\r\n </th>\r\n }\r\n @for (column of columns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n <th class=\"b-table\" #thElement [title]=\"column.caption\"\r\n [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n {{ column.caption }}\r\n @if(column.caption){\r\n @if (sortColumn == column.fieldname) {\r\n <span (click)=\"sortTable(column.fieldname)\" class=\"cursor-pointer\">\r\n <i [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n </span>\r\n }\r\n @if (sortColumn !== column.fieldname) {\r\n <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.fieldname)\"></i>\r\n }\r\n @if (column.tipoCaption === 'check-input') {\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 ms-2 border border-secondary\"\r\n [checked]=\"areAllChecked(column.fieldname)\"\r\n (change)=\"column.event ? toggleAllCheckboxes($event, column.fieldname, rowFilter()) : null\">\r\n }\r\n }\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n <!--\r\n <tbody\r\n [style.transform]=\"virtualScrollService.getTransform(visibleRange().start, itemHeight())\"\r\n [style.min-height]=\"itemHeight() * rowFilter().length + 'px'\">\r\n @for (row of visibleRows(); track $index) {\r\n <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier())), \r\n 'grilla-error': getSituacionNumberFromColumns(row, columns()) == 9}\"\r\n (click)=\"selectRow(identifier().length < 1 ? $index : row)\"\r\n [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n -->\r\n <tbody>\r\n @for (row of rowFilter(); track $index) {\r\n <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier())), \r\n 'grilla-error': getSituacionNumberFromColumns(row, columns()) == 9}\"\r\n (click)=\"selectRow(identifier().length < 1 ? $index : row); onClick(row)\"\r\n (dblclick)=\"onDoubleClick(row)\"\r\n (contextmenu)=\"onRightClick($event,row)\"\r\n [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n @if (withDetails()) {\r\n <td class=\"b-table text-center mwp-25\">\r\n <a (click)=\"toggleExpandRow($index)\" class=\"text-dark cursor-pointer fs-6\">\r\n <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows != $index\"\r\n [class.fa-chevron-down]=\"expandedRows == $index\"></i>\r\n </a>\r\n </td>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <td scope=\"col\" class=\"text-center b-table\">\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary my-0 py-0\"\r\n [checked]=\"isItemSelected($index)\" (change)=\"toogleItem($index, $event)\">\r\n </td>\r\n }\r\n\r\n @if (customActions) {\r\n <td class=\"text-center mwp-90 b-table\">\r\n <ng-container *ngTemplateOutlet=\"customActions; context: { $implicit: row }\"></ng-container>\r\n </td>\r\n }\r\n @for (column of columns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n @switch (column.tipo) {\r\n @case ('fecha') {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname] | date:'dd/MM/yyyy', column.fieldname)\"\r\n [title]=\"row[column.fieldname] | date:'dd/MM/yyyy'\"\r\n [ngClass]=\"getRowClass(row)\"\r\n class=\"text-center b-table\">\r\n </td>\r\n }\r\n\r\n @case ('date') {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname] | date:'dd/MM/yyyy', column.fieldname)\"\r\n [title]=\"row[column.fieldname] | date:'dd/MM/yyyy'\"\r\n [ngClass]=\"getRowClass(row)\"\r\n class=\"text-center b-table\">\r\n </td>\r\n }\r\n\r\n @case ('situacion') {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname], column.fieldname)\"\r\n [title]=\"row[column.fieldname]\"\r\n [ngClass]=\"getRowClass(row)\" class=\"b-table\">\r\n </td>\r\n }\r\n\r\n @case ('decimal') {\r\n <td class=\"text-end b-table\"\r\n [innerHTML]=\"getHighlight((row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2), column.fieldname)\"\r\n [title]=\"(row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2)\"\r\n [ngClass]=\"getRowClass(row)\">\r\n </td>\r\n }\r\n\r\n @case ('number') {\r\n <td class=\"text-end b-table\"\r\n [innerHTML]=\"getHighlight((row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2), column.fieldname)\"\r\n [title]=\"(row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2)\"\r\n [ngClass]=\"getRowClass(row)\">\r\n </td>\r\n }\r\n\r\n @case ('text-center') {\r\n <td class=\"text-center b-table\" [innerHTML]=\"getHighlight(row[column.fieldname], column.fieldname)\"\r\n [title]=\"row[column.fieldname]\"\r\n [ngClass]=\"getRowClass(row)\">\r\n </td>\r\n }\r\n\r\n @case ('check') {\r\n <td class=\"text-center b-table\" [title]=\"checkString[row[column.fieldname]]\">\r\n <i class=\"fs-5\"\r\n [ngClass]=\"row[column.fieldname] == 'S'?'fas fa-check yes-icon':'fas fa-times no-icon'\"></i>\r\n </td>\r\n }\r\n\r\n @case ('check-input') {\r\n <td class=\"text-center b-table\">\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary\"\r\n [checked]=\"row[column.fieldname] == 1 || row[column.fieldname] == 'S'\"\r\n (change)=\"column.event ? clickCheck(column.fieldname,$event,row) : null\">\r\n </td>\r\n }\r\n\r\n @case ('radio-input') {\r\n <td class=\"text-center b-table\">\r\n @if (!column.condition || column.condition(row)) {\r\n <input type=\"radio\" class=\"form-check-input fs-8 mtn-0 border border-secondary\"\r\n name=\"radioGroup\" (change)=\"column.event ? clickRadio(row) : null\">\r\n }\r\n </td>\r\n }\r\n\r\n @case ('mostrar') {\r\n @if (column.condition()) {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname], column.fieldname)\"\r\n [title]=\"row[column.fieldname]\" class=\"b-table\">\r\n </td>\r\n }\r\n }\r\n\r\n @case ('cell-render') {\r\n @let resolverItem = resolveCell(column.fieldname, row);\r\n @if (resolverItem) {\r\n <td class=\"b-table\" [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n @if (resolverItem.icon) {\r\n <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n } @else if (resolverItem.class) {\r\n <span [ngClass]=\"row.situac == 'J' ? 'text-error' : resolverItem.class\">\r\n {{ resolverItem.text }}\r\n </span>\r\n } @else {\r\n {{ resolverItem.text }}\r\n }\r\n </td>\r\n }\r\n }\r\n\r\n @default {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname], column.fieldname)\"\r\n [title]=\"row[column.fieldname]\"\r\n [ngClass]=\"getRowClass(row)\" class=\"b-table\">\r\n </td>\r\n }\r\n }\r\n }\r\n }\r\n </tr>\r\n @if ($index == expandedRows) {\r\n <tr @fadeInOut>\r\n <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions ? 1 : 0)\"\r\n class=\"table-blank\">\r\n <div class=\"d-flex flex-column auditoria\">\r\n <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Creaci\u00F3n: {{ row.nomucreac }} el {{ row.fcreac | date:'dd/MM/yyyy' }} a las {{\r\n row.hcreac }}\r\n </span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Actualizaci\u00F3n: {{ row.nomuactua }} el {{ row.factua | date:'dd/MM/yyyy' }} a las {{\r\n row.hactua }}\r\n </span>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n\r\n @if (withTotal()) {\r\n <tfoot>\r\n <tr>\r\n <td class=\"b-table\" [attr.colspan]=\"getColspanBeforeTotals()\">Totales:</td>\r\n @for (col of columns() ; track $index) {\r\n @if (col.totalizable) {\r\n <td class=\"b-table text-end\">\r\n {{ getTotals(col.fieldname) | number:'1.2-2'}}\r\n </td>\r\n }\r\n }\r\n </tr>\r\n </tfoot>\r\n }\r\n </table>\r\n </div>\r\n</div>", styles: [".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 .1s ease-out;padding-right:15px}.resize-handle{width:5px;height:100%;background:#d7d7d7;position:absolute;right:0;top:0;cursor:ew-resize;-webkit-user-select:none;user-select:none}.flex-table thead tr th{font-size:12px;font-weight:700;color:#000;border:none;border-bottom:1px solid rgb(206,206,206)}.flex-table tbody tr td{font-size:11px;font-weight:600;color:#000;border:none;border-bottom:1px solid rgb(206,206,206);padding-top:7px;padding-bottom:7px}.flex-table tbody tr{transition:transform .3s ease-in-out,opacity .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 .4s ease-out,opacity .3s ease-out}.expand-row{max-height:100px;opacity:1;transition:max-height .4s ease-in,opacity .3s ease-in}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.text-error{color:#d60000!important;font-weight:700!important}.text-error2{color:#d60000;font-weight:700!important}.text-exito{color:#00773c!important;font-weight:700!important}.text-alerta{color:#e9a700!important;font-weight:700!important}.text-exito2{color:#00773c;font-weight:700!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:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}.normal-table tbody tr{height:30px}.normal-table tbody 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 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:#d60000!important}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}.popover-menu-column{position:absolute;top:100%;left:0;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.4rem .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:#fff;border:1px solid #ddd;border-radius:.375rem;padding:0rem .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:0}.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}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "component", type: DropdownCdkComponent, selector: "app-dropdown-cdk", inputs: ["inline", "altoContainer"] }], animations: [dropdownAnimation, fadeInOut] });
2368
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TableAdvanceComponent, isStandalone: true, selector: "app-table-advance", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, withDetails: { classPropertyName: "withDetails", publicName: "withDetails", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null }, colorHeader: { classPropertyName: "colorHeader", publicName: "colorHeader", isSignal: true, isRequired: false, transformFunction: null }, isDarkMode: { classPropertyName: "isDarkMode", publicName: "isDarkMode", isSignal: true, isRequired: false, transformFunction: null }, selectedRow: { classPropertyName: "selectedRow", publicName: "selectedRow", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, withHeight: { classPropertyName: "withHeight", publicName: "withHeight", isSignal: true, isRequired: false, transformFunction: null }, rendered: { classPropertyName: "rendered", publicName: "rendered", isSignal: true, isRequired: false, transformFunction: null }, withTotal: { classPropertyName: "withTotal", publicName: "withTotal", isSignal: true, isRequired: false, transformFunction: null }, withCheckbox: { classPropertyName: "withCheckbox", publicName: "withCheckbox", isSignal: true, isRequired: false, transformFunction: null }, selectItems: { classPropertyName: "selectItems", publicName: "selectItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { emitirBusqueda: "emitirBusqueda", emitirCheck: "emitirCheck", emitirCheckCabecera: "emitirCheckCabecera", emitirRadio: "emitirRadio", emitirColumnasFiltrables: "emitirColumnasFiltrables", selectedRow: "selectedRowChange", selectItems: "selectItemsChange", rowEvent: "rowEvent" }, providers: [DatePipe, DecimalPipe], queries: [{ propertyName: "customActions", first: true, predicate: ["customActions"], descendants: true }], viewQueries: [{ propertyName: "tableHeaders", predicate: ["thElement"], descendants: true }], ngImport: i0, template: "@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center position-relative\">\r\n <label for=\"\" class=\"form-label me-2 pt-2\">Buscar</label>\r\n <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n <button (click)=\"togglePopoverFilter()\" class=\"btn btn-dark boton-buscar fs-7\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n @if (showPopoverFilter()) {\r\n <div class=\"popover-menu-filter shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7\">Filtros</div>\r\n <div class=\"form-check form-switch text-start\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"true\" (change)=\"toggleFiltros($event)\">\r\n <label class=\"form-check-label\">Todos</label>\r\n </div>\r\n @for (col of columns(); track col.caption) {\r\n <div class=\"form-check form-switch text-start\">\r\n <input type=\"checkbox\" class=\"form-check-input\" id=\"{{ 'filter_' + col.caption }}\"\r\n [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n <label class=\"form-check-label\" for=\"{{ 'filter_' + col.caption }}\">\r\n {{ col.caption }}\r\n </label>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n}\r\n\r\n<!---\r\n<div class=\"table-container table-responsive\" #tableContainer\r\n [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n (scroll)=\"onTableScroll($event)\">\r\n-->\r\n<div class=\"table-container table-responsive\"\r\n [style.height]=\"withHeight() && altoContenedor() ? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\">\r\n <div>\r\n <!-- [style.height]=\"virtualScrollService.getTotalHeight(itemHeight(), rowFilter().length)\" -->\r\n <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n <thead>\r\n <tr class=\"shadow-sm\">\r\n @if (withDetails()) {\r\n <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\"></th>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary\"\r\n [checked]=\"validaAllCheck()\" (change)=\"allCheck($event)\">\r\n </th>\r\n }\r\n\r\n @if (customActions) {\r\n <th class=\"cw-40 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n\r\n <app-dropdown-cdk>\r\n <ng-template #trigger>\r\n <button class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </ng-template>\r\n <ng-template #content>\r\n <div class=\"popover-menu-column bg-white shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">Columnas</div>\r\n @for (col of columns(); track col.caption) {\r\n @if (col.caption) {\r\n <div class=\"form-check form-switch text-start align-items-center d-flex\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{'switch_' + col.caption}}\"\r\n [(ngModel)]=\"visibilidadColumn()[col.caption]\" />\r\n <label class=\"form-check-label ps-1 fs-6 cursor-pointer font-label\"\r\n for=\"{{'switch_' + col.caption}}\">{{ col.caption }}</label>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n\r\n <!-- <button (click)=\"togglePopoverColumn()\" class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n @if (showPopoverColumn()) {\r\n <div class=\"popover-menu-column shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7\">Columnas</div>\r\n @for (col of columns(); track col.caption) {\r\n @if (col.caption) {\r\n <div class=\"form-check form-switch text-start\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{'switch_' + col.caption}}\" [(ngModel)]=\"visibilidadColumn()[col.caption]\" />\r\n <label class=\"form-check-label ps-1 fs-6 cursor-pointer font-label\"\r\n for=\"{{'switch_' + col.caption}}\">{{ col.caption }}</label>\r\n </div>\r\n }\r\n }\r\n </div>\r\n } -->\r\n </th>\r\n }\r\n @for (column of columns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n <th class=\"b-table\" #thElement [title]=\"column.caption\"\r\n [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n {{ column.caption }}\r\n @if(column.caption){\r\n @if (sortColumn == column.fieldname) {\r\n <span (click)=\"sortTable(column.fieldname)\" class=\"cursor-pointer\">\r\n <i [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n </span>\r\n }\r\n @if (sortColumn !== column.fieldname) {\r\n <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.fieldname)\"></i>\r\n }\r\n @if (column.tipoCaption === 'check-input') {\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 ms-2 border border-secondary\"\r\n [checked]=\"areAllChecked(column.fieldname)\"\r\n (change)=\"column.event ? toggleAllCheckboxes($event, column.fieldname, rowFilter()) : null\">\r\n }\r\n }\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n <!--\r\n <tbody\r\n [style.transform]=\"virtualScrollService.getTransform(visibleRange().start, itemHeight())\"\r\n [style.min-height]=\"itemHeight() * rowFilter().length + 'px'\">\r\n @for (row of visibleRows(); track $index) {\r\n <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier())), \r\n 'grilla-error': getSituacionNumberFromColumns(row, columns()) == 9}\"\r\n (click)=\"selectRow(identifier().length < 1 ? $index : row)\"\r\n [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n -->\r\n <tbody>\r\n @for (row of rowFilter(); track $index) {\r\n <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier())), \r\n 'grilla-error': getSituacionNumberFromColumns(row, columns()) == 9}\"\r\n (click)=\"selectRow(identifier().length < 1 ? $index : row); onClick(row)\"\r\n (dblclick)=\"onDoubleClick(row)\" (contextmenu)=\"onRightClick($event,row)\"\r\n [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n @if (withDetails()) {\r\n <td class=\"b-table text-center mwp-25\">\r\n <a (click)=\"toggleExpandRow($index)\" class=\"text-dark cursor-pointer fs-6\">\r\n <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows != $index\"\r\n [class.fa-chevron-down]=\"expandedRows == $index\"></i>\r\n </a>\r\n </td>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <td scope=\"col\" class=\"text-center b-table\">\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary my-0 py-0\"\r\n [checked]=\"isItemSelected($index)\" (change)=\"toogleItem($index, $event)\">\r\n </td>\r\n }\r\n\r\n @if (customActions) {\r\n <td class=\"text-center mwp-90 b-table\">\r\n <ng-container *ngTemplateOutlet=\"customActions; context: { $implicit: row }\"></ng-container>\r\n </td>\r\n }\r\n @for (column of columns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n\r\n @if (column.template) {\r\n <td class=\"b-table\">\r\n <ng-container *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\">\r\n </ng-container>\r\n </td>\r\n }\r\n @else {\r\n\r\n @switch (column.tipo) {\r\n @case ('fecha') {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname] | date:'dd/MM/yyyy', column.fieldname)\"\r\n [title]=\"row[column.fieldname] | date:'dd/MM/yyyy'\" [ngClass]=\"getRowClass(row)\"\r\n class=\"text-center b-table\">\r\n </td>\r\n }\r\n\r\n @case ('date') {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname] | date:'dd/MM/yyyy', column.fieldname)\"\r\n [title]=\"row[column.fieldname] | date:'dd/MM/yyyy'\" [ngClass]=\"getRowClass(row)\"\r\n class=\"text-center b-table\">\r\n </td>\r\n }\r\n\r\n @case ('situacion') {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname], column.fieldname)\"\r\n [title]=\"row[column.fieldname]\" [ngClass]=\"getRowClass(row)\" class=\"b-table\">\r\n </td>\r\n }\r\n\r\n @case ('decimal') {\r\n <td class=\"text-end b-table\"\r\n [innerHTML]=\"getHighlight((row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2), column.fieldname)\"\r\n [title]=\"(row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2)\"\r\n [ngClass]=\"getRowClass(row)\">\r\n </td>\r\n }\r\n\r\n @case ('number') {\r\n <td class=\"text-end b-table\"\r\n [innerHTML]=\"getHighlight((row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2), column.fieldname)\"\r\n [title]=\"(row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2)\"\r\n [ngClass]=\"getRowClass(row)\">\r\n </td>\r\n }\r\n\r\n @case ('text-center') {\r\n <td class=\"text-center b-table\" [innerHTML]=\"getHighlight(row[column.fieldname], column.fieldname)\"\r\n [title]=\"row[column.fieldname]\" [ngClass]=\"getRowClass(row)\">\r\n </td>\r\n }\r\n\r\n @case ('check') {\r\n <td class=\"text-center b-table\" [title]=\"checkString[row[column.fieldname]]\">\r\n <i class=\"fs-5\"\r\n [ngClass]=\"row[column.fieldname] == 'S'?'fas fa-check yes-icon':'fas fa-times no-icon'\"></i>\r\n </td>\r\n }\r\n\r\n @case ('check-input') {\r\n <td class=\"text-center b-table\">\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary\"\r\n [checked]=\"row[column.fieldname] == 1 || row[column.fieldname] == 'S'\"\r\n (change)=\"column.event ? clickCheck(column.fieldname,$event,row) : null\">\r\n </td>\r\n }\r\n\r\n @case ('radio-input') {\r\n <td class=\"text-center b-table\">\r\n @if (!column.condition || column.condition(row)) {\r\n <input type=\"radio\" class=\"form-check-input fs-8 mtn-0 border border-secondary\"\r\n name=\"radioGroup\" (change)=\"column.event ? clickRadio(row) : null\">\r\n }\r\n </td>\r\n }\r\n\r\n @case ('mostrar') {\r\n @if (column.condition()) {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname], column.fieldname)\"\r\n [title]=\"row[column.fieldname]\" class=\"b-table\">\r\n </td>\r\n }\r\n }\r\n\r\n @case ('cell-render') {\r\n @let resolverItem = resolveCell(column.fieldname, row);\r\n @if (resolverItem) {\r\n <td class=\"b-table\" [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n @if (resolverItem.icon) {\r\n <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n } @else if (resolverItem.class) {\r\n <span [ngClass]=\"row.situac == 'J' ? 'text-error' : resolverItem.class\">\r\n {{ resolverItem.text }}\r\n </span>\r\n } @else {\r\n {{ resolverItem.text }}\r\n }\r\n </td>\r\n }\r\n }\r\n\r\n @default {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname], column.fieldname)\"\r\n [title]=\"row[column.fieldname]\" [ngClass]=\"getRowClass(row)\" class=\"b-table\">\r\n </td>\r\n }\r\n }\r\n }\r\n }\r\n }\r\n </tr>\r\n @if ($index == expandedRows) {\r\n <tr @fadeInOut>\r\n <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions ? 1 : 0)\"\r\n class=\"table-blank\">\r\n <div class=\"d-flex flex-column auditoria\">\r\n <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Creaci\u00F3n: {{ row.nomucreac }} el {{ row.fcreac | date:'dd/MM/yyyy' }} a las {{\r\n row.hcreac }}\r\n </span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Actualizaci\u00F3n: {{ row.nomuactua }} el {{ row.factua | date:'dd/MM/yyyy' }} a las {{\r\n row.hactua }}\r\n </span>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n\r\n @if (withTotal()) {\r\n <tfoot>\r\n <tr>\r\n <td class=\"b-table\" [attr.colspan]=\"getColspanBeforeTotals()\">Totales:</td>\r\n @for (col of columns() ; track $index) {\r\n @if (col.totalizable) {\r\n <td class=\"b-table text-end\">\r\n {{ getTotals(col.fieldname) | number:'1.2-2'}}\r\n </td>\r\n }\r\n }\r\n </tr>\r\n </tfoot>\r\n }\r\n </table>\r\n </div>\r\n</div>", styles: [".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 .1s ease-out;padding-right:15px}.resize-handle{width:5px;height:100%;background:#d7d7d7;position:absolute;right:0;top:0;cursor:ew-resize;-webkit-user-select:none;user-select:none}.flex-table thead tr th{font-size:12px;font-weight:700;color:#000;border:none;border-bottom:1px solid rgb(206,206,206)}.flex-table tbody tr td{font-size:11px;font-weight:600;color:#000;border:none;border-bottom:1px solid rgb(206,206,206);padding-top:7px;padding-bottom:7px}.flex-table tbody tr{transition:transform .3s ease-in-out,opacity .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 .4s ease-out,opacity .3s ease-out}.expand-row{max-height:100px;opacity:1;transition:max-height .4s ease-in,opacity .3s ease-in}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.text-error{color:#d60000!important;font-weight:700!important}.text-error2{color:#d60000;font-weight:700!important}.text-exito{color:#00773c!important;font-weight:700!important}.text-alerta{color:#e9a700!important;font-weight:700!important}.text-exito2{color:#00773c;font-weight:700!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:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}.normal-table tbody tr{height:30px}.normal-table tbody 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 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:#d60000!important}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}.popover-menu-column{position:absolute;top:100%;left:0;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.4rem .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:#fff;border:1px solid #ddd;border-radius:.375rem;padding:0rem .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:0}.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}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "component", type: DropdownCdkComponent, selector: "app-dropdown-cdk", inputs: ["inline", "altoContainer"] }], animations: [dropdownAnimation, fadeInOut] });
2369
2369
  }
2370
2370
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableAdvanceComponent, decorators: [{
2371
2371
  type: Component,
2372
- args: [{ selector: 'app-table-advance', imports: [FormsModule, CommonModule, DatePipe, DecimalPipe, DropdownCdkComponent], animations: [dropdownAnimation, fadeInOut], providers: [DatePipe, DecimalPipe], template: "@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center position-relative\">\r\n <label for=\"\" class=\"form-label me-2 pt-2\">Buscar</label>\r\n <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n <button (click)=\"togglePopoverFilter()\" class=\"btn btn-dark boton-buscar fs-7\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n @if (showPopoverFilter()) {\r\n <div class=\"popover-menu-filter shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7\">Filtros</div>\r\n <div class=\"form-check form-switch text-start\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"true\" (change)=\"toggleFiltros($event)\">\r\n <label class=\"form-check-label\">Todos</label>\r\n </div>\r\n @for (col of columns(); track col.caption) {\r\n <div class=\"form-check form-switch text-start\">\r\n <input type=\"checkbox\" class=\"form-check-input\" id=\"{{ 'filter_' + col.caption }}\"\r\n [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n <label class=\"form-check-label\" for=\"{{ 'filter_' + col.caption }}\">\r\n {{ col.caption }}\r\n </label>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n}\r\n\r\n<!---\r\n<div class=\"table-container table-responsive\" #tableContainer\r\n [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n (scroll)=\"onTableScroll($event)\">\r\n-->\r\n<div class=\"table-container table-responsive\"\r\n [style.height]=\"withHeight() && altoContenedor() ? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\">\r\n <div>\r\n <!-- [style.height]=\"virtualScrollService.getTotalHeight(itemHeight(), rowFilter().length)\" -->\r\n <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n <thead>\r\n <tr class=\"shadow-sm\">\r\n @if (withDetails()) {\r\n <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\"></th>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary\"\r\n [checked]=\"validaAllCheck()\" (change)=\"allCheck($event)\">\r\n </th>\r\n }\r\n\r\n @if (customActions) {\r\n <th class=\"cw-40 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n\r\n <app-dropdown-cdk>\r\n <ng-template #trigger >\r\n <button class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </ng-template>\r\n <ng-template #content>\r\n <div class=\"popover-menu-column bg-white shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">Columnas</div>\r\n @for (col of columns(); track col.caption) {\r\n @if (col.caption) {\r\n <div class=\"form-check form-switch text-start align-items-center d-flex\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{'switch_' + col.caption}}\" [(ngModel)]=\"visibilidadColumn()[col.caption]\" />\r\n <label class=\"form-check-label ps-1 fs-6 cursor-pointer font-label\"\r\n for=\"{{'switch_' + col.caption}}\">{{ col.caption }}</label>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n\r\n <!-- <button (click)=\"togglePopoverColumn()\" class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n @if (showPopoverColumn()) {\r\n <div class=\"popover-menu-column shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7\">Columnas</div>\r\n @for (col of columns(); track col.caption) {\r\n @if (col.caption) {\r\n <div class=\"form-check form-switch text-start\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{'switch_' + col.caption}}\" [(ngModel)]=\"visibilidadColumn()[col.caption]\" />\r\n <label class=\"form-check-label ps-1 fs-6 cursor-pointer font-label\"\r\n for=\"{{'switch_' + col.caption}}\">{{ col.caption }}</label>\r\n </div>\r\n }\r\n }\r\n </div>\r\n } -->\r\n </th>\r\n }\r\n @for (column of columns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n <th class=\"b-table\" #thElement [title]=\"column.caption\"\r\n [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n {{ column.caption }}\r\n @if(column.caption){\r\n @if (sortColumn == column.fieldname) {\r\n <span (click)=\"sortTable(column.fieldname)\" class=\"cursor-pointer\">\r\n <i [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n </span>\r\n }\r\n @if (sortColumn !== column.fieldname) {\r\n <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.fieldname)\"></i>\r\n }\r\n @if (column.tipoCaption === 'check-input') {\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 ms-2 border border-secondary\"\r\n [checked]=\"areAllChecked(column.fieldname)\"\r\n (change)=\"column.event ? toggleAllCheckboxes($event, column.fieldname, rowFilter()) : null\">\r\n }\r\n }\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n <!--\r\n <tbody\r\n [style.transform]=\"virtualScrollService.getTransform(visibleRange().start, itemHeight())\"\r\n [style.min-height]=\"itemHeight() * rowFilter().length + 'px'\">\r\n @for (row of visibleRows(); track $index) {\r\n <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier())), \r\n 'grilla-error': getSituacionNumberFromColumns(row, columns()) == 9}\"\r\n (click)=\"selectRow(identifier().length < 1 ? $index : row)\"\r\n [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n -->\r\n <tbody>\r\n @for (row of rowFilter(); track $index) {\r\n <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier())), \r\n 'grilla-error': getSituacionNumberFromColumns(row, columns()) == 9}\"\r\n (click)=\"selectRow(identifier().length < 1 ? $index : row); onClick(row)\"\r\n (dblclick)=\"onDoubleClick(row)\"\r\n (contextmenu)=\"onRightClick($event,row)\"\r\n [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n @if (withDetails()) {\r\n <td class=\"b-table text-center mwp-25\">\r\n <a (click)=\"toggleExpandRow($index)\" class=\"text-dark cursor-pointer fs-6\">\r\n <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows != $index\"\r\n [class.fa-chevron-down]=\"expandedRows == $index\"></i>\r\n </a>\r\n </td>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <td scope=\"col\" class=\"text-center b-table\">\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary my-0 py-0\"\r\n [checked]=\"isItemSelected($index)\" (change)=\"toogleItem($index, $event)\">\r\n </td>\r\n }\r\n\r\n @if (customActions) {\r\n <td class=\"text-center mwp-90 b-table\">\r\n <ng-container *ngTemplateOutlet=\"customActions; context: { $implicit: row }\"></ng-container>\r\n </td>\r\n }\r\n @for (column of columns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n @switch (column.tipo) {\r\n @case ('fecha') {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname] | date:'dd/MM/yyyy', column.fieldname)\"\r\n [title]=\"row[column.fieldname] | date:'dd/MM/yyyy'\"\r\n [ngClass]=\"getRowClass(row)\"\r\n class=\"text-center b-table\">\r\n </td>\r\n }\r\n\r\n @case ('date') {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname] | date:'dd/MM/yyyy', column.fieldname)\"\r\n [title]=\"row[column.fieldname] | date:'dd/MM/yyyy'\"\r\n [ngClass]=\"getRowClass(row)\"\r\n class=\"text-center b-table\">\r\n </td>\r\n }\r\n\r\n @case ('situacion') {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname], column.fieldname)\"\r\n [title]=\"row[column.fieldname]\"\r\n [ngClass]=\"getRowClass(row)\" class=\"b-table\">\r\n </td>\r\n }\r\n\r\n @case ('decimal') {\r\n <td class=\"text-end b-table\"\r\n [innerHTML]=\"getHighlight((row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2), column.fieldname)\"\r\n [title]=\"(row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2)\"\r\n [ngClass]=\"getRowClass(row)\">\r\n </td>\r\n }\r\n\r\n @case ('number') {\r\n <td class=\"text-end b-table\"\r\n [innerHTML]=\"getHighlight((row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2), column.fieldname)\"\r\n [title]=\"(row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2)\"\r\n [ngClass]=\"getRowClass(row)\">\r\n </td>\r\n }\r\n\r\n @case ('text-center') {\r\n <td class=\"text-center b-table\" [innerHTML]=\"getHighlight(row[column.fieldname], column.fieldname)\"\r\n [title]=\"row[column.fieldname]\"\r\n [ngClass]=\"getRowClass(row)\">\r\n </td>\r\n }\r\n\r\n @case ('check') {\r\n <td class=\"text-center b-table\" [title]=\"checkString[row[column.fieldname]]\">\r\n <i class=\"fs-5\"\r\n [ngClass]=\"row[column.fieldname] == 'S'?'fas fa-check yes-icon':'fas fa-times no-icon'\"></i>\r\n </td>\r\n }\r\n\r\n @case ('check-input') {\r\n <td class=\"text-center b-table\">\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary\"\r\n [checked]=\"row[column.fieldname] == 1 || row[column.fieldname] == 'S'\"\r\n (change)=\"column.event ? clickCheck(column.fieldname,$event,row) : null\">\r\n </td>\r\n }\r\n\r\n @case ('radio-input') {\r\n <td class=\"text-center b-table\">\r\n @if (!column.condition || column.condition(row)) {\r\n <input type=\"radio\" class=\"form-check-input fs-8 mtn-0 border border-secondary\"\r\n name=\"radioGroup\" (change)=\"column.event ? clickRadio(row) : null\">\r\n }\r\n </td>\r\n }\r\n\r\n @case ('mostrar') {\r\n @if (column.condition()) {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname], column.fieldname)\"\r\n [title]=\"row[column.fieldname]\" class=\"b-table\">\r\n </td>\r\n }\r\n }\r\n\r\n @case ('cell-render') {\r\n @let resolverItem = resolveCell(column.fieldname, row);\r\n @if (resolverItem) {\r\n <td class=\"b-table\" [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n @if (resolverItem.icon) {\r\n <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n } @else if (resolverItem.class) {\r\n <span [ngClass]=\"row.situac == 'J' ? 'text-error' : resolverItem.class\">\r\n {{ resolverItem.text }}\r\n </span>\r\n } @else {\r\n {{ resolverItem.text }}\r\n }\r\n </td>\r\n }\r\n }\r\n\r\n @default {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname], column.fieldname)\"\r\n [title]=\"row[column.fieldname]\"\r\n [ngClass]=\"getRowClass(row)\" class=\"b-table\">\r\n </td>\r\n }\r\n }\r\n }\r\n }\r\n </tr>\r\n @if ($index == expandedRows) {\r\n <tr @fadeInOut>\r\n <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions ? 1 : 0)\"\r\n class=\"table-blank\">\r\n <div class=\"d-flex flex-column auditoria\">\r\n <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Creaci\u00F3n: {{ row.nomucreac }} el {{ row.fcreac | date:'dd/MM/yyyy' }} a las {{\r\n row.hcreac }}\r\n </span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Actualizaci\u00F3n: {{ row.nomuactua }} el {{ row.factua | date:'dd/MM/yyyy' }} a las {{\r\n row.hactua }}\r\n </span>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n\r\n @if (withTotal()) {\r\n <tfoot>\r\n <tr>\r\n <td class=\"b-table\" [attr.colspan]=\"getColspanBeforeTotals()\">Totales:</td>\r\n @for (col of columns() ; track $index) {\r\n @if (col.totalizable) {\r\n <td class=\"b-table text-end\">\r\n {{ getTotals(col.fieldname) | number:'1.2-2'}}\r\n </td>\r\n }\r\n }\r\n </tr>\r\n </tfoot>\r\n }\r\n </table>\r\n </div>\r\n</div>", styles: [".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 .1s ease-out;padding-right:15px}.resize-handle{width:5px;height:100%;background:#d7d7d7;position:absolute;right:0;top:0;cursor:ew-resize;-webkit-user-select:none;user-select:none}.flex-table thead tr th{font-size:12px;font-weight:700;color:#000;border:none;border-bottom:1px solid rgb(206,206,206)}.flex-table tbody tr td{font-size:11px;font-weight:600;color:#000;border:none;border-bottom:1px solid rgb(206,206,206);padding-top:7px;padding-bottom:7px}.flex-table tbody tr{transition:transform .3s ease-in-out,opacity .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 .4s ease-out,opacity .3s ease-out}.expand-row{max-height:100px;opacity:1;transition:max-height .4s ease-in,opacity .3s ease-in}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.text-error{color:#d60000!important;font-weight:700!important}.text-error2{color:#d60000;font-weight:700!important}.text-exito{color:#00773c!important;font-weight:700!important}.text-alerta{color:#e9a700!important;font-weight:700!important}.text-exito2{color:#00773c;font-weight:700!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:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}.normal-table tbody tr{height:30px}.normal-table tbody 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 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:#d60000!important}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}.popover-menu-column{position:absolute;top:100%;left:0;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.4rem .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:#fff;border:1px solid #ddd;border-radius:.375rem;padding:0rem .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:0}.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}\n"] }]
2372
+ args: [{ selector: 'app-table-advance', imports: [FormsModule, CommonModule, DatePipe, DecimalPipe, DropdownCdkComponent], animations: [dropdownAnimation, fadeInOut], providers: [DatePipe, DecimalPipe], template: "@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center position-relative\">\r\n <label for=\"\" class=\"form-label me-2 pt-2\">Buscar</label>\r\n <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n <button (click)=\"togglePopoverFilter()\" class=\"btn btn-dark boton-buscar fs-7\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n @if (showPopoverFilter()) {\r\n <div class=\"popover-menu-filter shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7\">Filtros</div>\r\n <div class=\"form-check form-switch text-start\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"true\" (change)=\"toggleFiltros($event)\">\r\n <label class=\"form-check-label\">Todos</label>\r\n </div>\r\n @for (col of columns(); track col.caption) {\r\n <div class=\"form-check form-switch text-start\">\r\n <input type=\"checkbox\" class=\"form-check-input\" id=\"{{ 'filter_' + col.caption }}\"\r\n [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n <label class=\"form-check-label\" for=\"{{ 'filter_' + col.caption }}\">\r\n {{ col.caption }}\r\n </label>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n}\r\n\r\n<!---\r\n<div class=\"table-container table-responsive\" #tableContainer\r\n [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n (scroll)=\"onTableScroll($event)\">\r\n-->\r\n<div class=\"table-container table-responsive\"\r\n [style.height]=\"withHeight() && altoContenedor() ? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\">\r\n <div>\r\n <!-- [style.height]=\"virtualScrollService.getTotalHeight(itemHeight(), rowFilter().length)\" -->\r\n <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n <thead>\r\n <tr class=\"shadow-sm\">\r\n @if (withDetails()) {\r\n <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\"></th>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary\"\r\n [checked]=\"validaAllCheck()\" (change)=\"allCheck($event)\">\r\n </th>\r\n }\r\n\r\n @if (customActions) {\r\n <th class=\"cw-40 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n\r\n <app-dropdown-cdk>\r\n <ng-template #trigger>\r\n <button class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </ng-template>\r\n <ng-template #content>\r\n <div class=\"popover-menu-column bg-white shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">Columnas</div>\r\n @for (col of columns(); track col.caption) {\r\n @if (col.caption) {\r\n <div class=\"form-check form-switch text-start align-items-center d-flex\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{'switch_' + col.caption}}\"\r\n [(ngModel)]=\"visibilidadColumn()[col.caption]\" />\r\n <label class=\"form-check-label ps-1 fs-6 cursor-pointer font-label\"\r\n for=\"{{'switch_' + col.caption}}\">{{ col.caption }}</label>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n\r\n <!-- <button (click)=\"togglePopoverColumn()\" class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n @if (showPopoverColumn()) {\r\n <div class=\"popover-menu-column shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7\">Columnas</div>\r\n @for (col of columns(); track col.caption) {\r\n @if (col.caption) {\r\n <div class=\"form-check form-switch text-start\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{'switch_' + col.caption}}\" [(ngModel)]=\"visibilidadColumn()[col.caption]\" />\r\n <label class=\"form-check-label ps-1 fs-6 cursor-pointer font-label\"\r\n for=\"{{'switch_' + col.caption}}\">{{ col.caption }}</label>\r\n </div>\r\n }\r\n }\r\n </div>\r\n } -->\r\n </th>\r\n }\r\n @for (column of columns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n <th class=\"b-table\" #thElement [title]=\"column.caption\"\r\n [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n {{ column.caption }}\r\n @if(column.caption){\r\n @if (sortColumn == column.fieldname) {\r\n <span (click)=\"sortTable(column.fieldname)\" class=\"cursor-pointer\">\r\n <i [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n </span>\r\n }\r\n @if (sortColumn !== column.fieldname) {\r\n <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.fieldname)\"></i>\r\n }\r\n @if (column.tipoCaption === 'check-input') {\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 ms-2 border border-secondary\"\r\n [checked]=\"areAllChecked(column.fieldname)\"\r\n (change)=\"column.event ? toggleAllCheckboxes($event, column.fieldname, rowFilter()) : null\">\r\n }\r\n }\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n <!--\r\n <tbody\r\n [style.transform]=\"virtualScrollService.getTransform(visibleRange().start, itemHeight())\"\r\n [style.min-height]=\"itemHeight() * rowFilter().length + 'px'\">\r\n @for (row of visibleRows(); track $index) {\r\n <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier())), \r\n 'grilla-error': getSituacionNumberFromColumns(row, columns()) == 9}\"\r\n (click)=\"selectRow(identifier().length < 1 ? $index : row)\"\r\n [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n -->\r\n <tbody>\r\n @for (row of rowFilter(); track $index) {\r\n <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier())), \r\n 'grilla-error': getSituacionNumberFromColumns(row, columns()) == 9}\"\r\n (click)=\"selectRow(identifier().length < 1 ? $index : row); onClick(row)\"\r\n (dblclick)=\"onDoubleClick(row)\" (contextmenu)=\"onRightClick($event,row)\"\r\n [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n @if (withDetails()) {\r\n <td class=\"b-table text-center mwp-25\">\r\n <a (click)=\"toggleExpandRow($index)\" class=\"text-dark cursor-pointer fs-6\">\r\n <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows != $index\"\r\n [class.fa-chevron-down]=\"expandedRows == $index\"></i>\r\n </a>\r\n </td>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <td scope=\"col\" class=\"text-center b-table\">\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary my-0 py-0\"\r\n [checked]=\"isItemSelected($index)\" (change)=\"toogleItem($index, $event)\">\r\n </td>\r\n }\r\n\r\n @if (customActions) {\r\n <td class=\"text-center mwp-90 b-table\">\r\n <ng-container *ngTemplateOutlet=\"customActions; context: { $implicit: row }\"></ng-container>\r\n </td>\r\n }\r\n @for (column of columns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n\r\n @if (column.template) {\r\n <td class=\"b-table\">\r\n <ng-container *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\">\r\n </ng-container>\r\n </td>\r\n }\r\n @else {\r\n\r\n @switch (column.tipo) {\r\n @case ('fecha') {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname] | date:'dd/MM/yyyy', column.fieldname)\"\r\n [title]=\"row[column.fieldname] | date:'dd/MM/yyyy'\" [ngClass]=\"getRowClass(row)\"\r\n class=\"text-center b-table\">\r\n </td>\r\n }\r\n\r\n @case ('date') {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname] | date:'dd/MM/yyyy', column.fieldname)\"\r\n [title]=\"row[column.fieldname] | date:'dd/MM/yyyy'\" [ngClass]=\"getRowClass(row)\"\r\n class=\"text-center b-table\">\r\n </td>\r\n }\r\n\r\n @case ('situacion') {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname], column.fieldname)\"\r\n [title]=\"row[column.fieldname]\" [ngClass]=\"getRowClass(row)\" class=\"b-table\">\r\n </td>\r\n }\r\n\r\n @case ('decimal') {\r\n <td class=\"text-end b-table\"\r\n [innerHTML]=\"getHighlight((row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2), column.fieldname)\"\r\n [title]=\"(row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2)\"\r\n [ngClass]=\"getRowClass(row)\">\r\n </td>\r\n }\r\n\r\n @case ('number') {\r\n <td class=\"text-end b-table\"\r\n [innerHTML]=\"getHighlight((row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2), column.fieldname)\"\r\n [title]=\"(row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2)\"\r\n [ngClass]=\"getRowClass(row)\">\r\n </td>\r\n }\r\n\r\n @case ('text-center') {\r\n <td class=\"text-center b-table\" [innerHTML]=\"getHighlight(row[column.fieldname], column.fieldname)\"\r\n [title]=\"row[column.fieldname]\" [ngClass]=\"getRowClass(row)\">\r\n </td>\r\n }\r\n\r\n @case ('check') {\r\n <td class=\"text-center b-table\" [title]=\"checkString[row[column.fieldname]]\">\r\n <i class=\"fs-5\"\r\n [ngClass]=\"row[column.fieldname] == 'S'?'fas fa-check yes-icon':'fas fa-times no-icon'\"></i>\r\n </td>\r\n }\r\n\r\n @case ('check-input') {\r\n <td class=\"text-center b-table\">\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary\"\r\n [checked]=\"row[column.fieldname] == 1 || row[column.fieldname] == 'S'\"\r\n (change)=\"column.event ? clickCheck(column.fieldname,$event,row) : null\">\r\n </td>\r\n }\r\n\r\n @case ('radio-input') {\r\n <td class=\"text-center b-table\">\r\n @if (!column.condition || column.condition(row)) {\r\n <input type=\"radio\" class=\"form-check-input fs-8 mtn-0 border border-secondary\"\r\n name=\"radioGroup\" (change)=\"column.event ? clickRadio(row) : null\">\r\n }\r\n </td>\r\n }\r\n\r\n @case ('mostrar') {\r\n @if (column.condition()) {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname], column.fieldname)\"\r\n [title]=\"row[column.fieldname]\" class=\"b-table\">\r\n </td>\r\n }\r\n }\r\n\r\n @case ('cell-render') {\r\n @let resolverItem = resolveCell(column.fieldname, row);\r\n @if (resolverItem) {\r\n <td class=\"b-table\" [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n @if (resolverItem.icon) {\r\n <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n } @else if (resolverItem.class) {\r\n <span [ngClass]=\"row.situac == 'J' ? 'text-error' : resolverItem.class\">\r\n {{ resolverItem.text }}\r\n </span>\r\n } @else {\r\n {{ resolverItem.text }}\r\n }\r\n </td>\r\n }\r\n }\r\n\r\n @default {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname], column.fieldname)\"\r\n [title]=\"row[column.fieldname]\" [ngClass]=\"getRowClass(row)\" class=\"b-table\">\r\n </td>\r\n }\r\n }\r\n }\r\n }\r\n }\r\n </tr>\r\n @if ($index == expandedRows) {\r\n <tr @fadeInOut>\r\n <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions ? 1 : 0)\"\r\n class=\"table-blank\">\r\n <div class=\"d-flex flex-column auditoria\">\r\n <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Creaci\u00F3n: {{ row.nomucreac }} el {{ row.fcreac | date:'dd/MM/yyyy' }} a las {{\r\n row.hcreac }}\r\n </span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Actualizaci\u00F3n: {{ row.nomuactua }} el {{ row.factua | date:'dd/MM/yyyy' }} a las {{\r\n row.hactua }}\r\n </span>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n\r\n @if (withTotal()) {\r\n <tfoot>\r\n <tr>\r\n <td class=\"b-table\" [attr.colspan]=\"getColspanBeforeTotals()\">Totales:</td>\r\n @for (col of columns() ; track $index) {\r\n @if (col.totalizable) {\r\n <td class=\"b-table text-end\">\r\n {{ getTotals(col.fieldname) | number:'1.2-2'}}\r\n </td>\r\n }\r\n }\r\n </tr>\r\n </tfoot>\r\n }\r\n </table>\r\n </div>\r\n</div>", styles: [".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 .1s ease-out;padding-right:15px}.resize-handle{width:5px;height:100%;background:#d7d7d7;position:absolute;right:0;top:0;cursor:ew-resize;-webkit-user-select:none;user-select:none}.flex-table thead tr th{font-size:12px;font-weight:700;color:#000;border:none;border-bottom:1px solid rgb(206,206,206)}.flex-table tbody tr td{font-size:11px;font-weight:600;color:#000;border:none;border-bottom:1px solid rgb(206,206,206);padding-top:7px;padding-bottom:7px}.flex-table tbody tr{transition:transform .3s ease-in-out,opacity .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 .4s ease-out,opacity .3s ease-out}.expand-row{max-height:100px;opacity:1;transition:max-height .4s ease-in,opacity .3s ease-in}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.text-error{color:#d60000!important;font-weight:700!important}.text-error2{color:#d60000;font-weight:700!important}.text-exito{color:#00773c!important;font-weight:700!important}.text-alerta{color:#e9a700!important;font-weight:700!important}.text-exito2{color:#00773c;font-weight:700!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:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}.normal-table tbody tr{height:30px}.normal-table tbody 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 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:#d60000!important}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}.popover-menu-column{position:absolute;top:100%;left:0;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.4rem .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:#fff;border:1px solid #ddd;border-radius:.375rem;padding:0rem .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:0}.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}\n"] }]
2373
2373
  }], ctorParameters: () => [], propDecorators: { tableHeaders: [{
2374
2374
  type: ViewChildren,
2375
2375
  args: ['thElement']
@@ -3708,100 +3708,6 @@ class TableData {
3708
3708
  swmobile;
3709
3709
  }
3710
3710
 
3711
- class DetalleDocumentosCab {
3712
- codbar;
3713
- cantid;
3714
- codadd01;
3715
- codadd02;
3716
- codalm;
3717
- codart;
3718
- desart;
3719
- descodadd01;
3720
- descodadd02;
3721
- etiqueta;
3722
- observ;
3723
- pordes1;
3724
- pordes2;
3725
- pordes3;
3726
- pordes4;
3727
- positi;
3728
- preuni;
3729
- tipinv;
3730
- undmed;
3731
- codund;
3732
- materiales;
3733
- ancho;
3734
- stock;
3735
- largo;
3736
- piezas;
3737
- costo;
3738
- tipcam;
3739
- pesocalc;
3740
- tipafec;
3741
- destipafec;
3742
- tara;
3743
- glossext;
3744
- consto;
3745
- total;
3746
- lote;
3747
- fvenci;
3748
- modpre;
3749
- acabado;
3750
- nrocarrete;
3751
- motor;
3752
- chasis;
3753
- dtipafec;
3754
- combina;
3755
- empalme;
3756
- proart;
3757
- glosa;
3758
- refnumint;
3759
- refnumite;
3760
- opcargo;
3761
- mondescue;
3762
- //auxiliar
3763
- disabledEtiqueta;
3764
- disabledlargo;
3765
- disabledpiezas;
3766
- disabledcantid;
3767
- disabledAll; // ESTO PARA VALIDAR CASOS EN DONDE SE BLOQUEAR TODO (EJEMPLO : ANTICIPOS)
3768
- // PARA HEREDAR DE DOC PADRE INIT
3769
- femisi;
3770
- numint;
3771
- numite;
3772
- serie;
3773
- numero;
3774
- }
3775
- class MaterialesCotizacion {
3776
- positi;
3777
- tipinv;
3778
- codart;
3779
- desart;
3780
- codalm;
3781
- undmed;
3782
- codadd01;
3783
- codadd02;
3784
- cantid;
3785
- preuni;
3786
- pordes1;
3787
- pordes2;
3788
- pordes3;
3789
- pordes4;
3790
- observ;
3791
- etiqueta;
3792
- descodadd01;
3793
- descodadd02;
3794
- stock;
3795
- modpre;
3796
- codprv;
3797
- stockref;
3798
- coduni;
3799
- largo;
3800
- piezas;
3801
- consto;
3802
- glossext;
3803
- }
3804
-
3805
3711
  class Recursos {
3806
3712
  almacenes;
3807
3713
  areas;
@@ -4207,6 +4113,9 @@ function handleResourceV2(fn, signal) {
4207
4113
  });
4208
4114
  }
4209
4115
 
4116
+ function configModal(size = 'xl') {
4117
+ return { size, backdrop: 'static' };
4118
+ }
4210
4119
  function handleModal(modalRef, fn) {
4211
4120
  modalRef.result.then((result) => {
4212
4121
  if (!result)
@@ -4215,6 +4124,13 @@ function handleModal(modalRef, fn) {
4215
4124
  }, () => { });
4216
4125
  }
4217
4126
 
4127
+ var TABLE_EVENTS;
4128
+ (function (TABLE_EVENTS) {
4129
+ TABLE_EVENTS[TABLE_EVENTS["CLICK"] = 1] = "CLICK";
4130
+ TABLE_EVENTS[TABLE_EVENTS["DOUBLE_CLICK"] = 2] = "DOUBLE_CLICK";
4131
+ TABLE_EVENTS[TABLE_EVENTS["RIGHT_CLICK"] = 3] = "RIGHT_CLICK";
4132
+ })(TABLE_EVENTS || (TABLE_EVENTS = {}));
4133
+
4218
4134
  /*
4219
4135
  * Public API Surface of ng-components-tsi
4220
4136
  */
@@ -4224,5 +4140,5 @@ function handleModal(modalRef, fn) {
4224
4140
  * Generated bundle index. Do not edit.
4225
4141
  */
4226
4142
 
4227
- export { AlertConfirmationComponent, AlertConfirmationConfig, AlertConfirmationService, AlertErrorComponent, AlertErrorService, AlertService, AlertaComponent, Almacenes, AutocompleteComponent, AutocompleteV2Component, BadgeComponent, ButtonComponent, ButtonProperties, CardMobileComponent, CheckBoxComponent, Cobradores, DetalleCreditoComponent, DetalleDocumentosCab, Direcciones, DobleInputComponent, DropdownCdkComponent, DropdownComponent, DropdownMenuComponent, DropdownOption, FormateadorService, HeaderComponent, InputClaseComponent, InputComponent, InputDinamicoComponent, InputRadioComponent, ListOptionComponent, ListSituacionesComponent, MaterialesCotizacion, MdGenericoComponent, Monedas, MontosCalcularComponent, Motivos, MultiSelectDropdownComponent, MultiselectedComponent, NavTabsComponent, PaginadorComponent, RadioComponent, Recursos, Series, SidebarComponent, SpinnerComponent, SwitchActivoComponent, SwitchComponent, TBanco, TabItemComponent, TableAdvanceComponent, TableAdvanceOptimizadaComponent, TableBusquedaComponent, TableData, TableDetalleComponent, TableSimpleComponent, TipoDocumento, ToastService, ToasterComponent, Transportista, Vendedor, getInputsObligatorios, handleEmptyResult, handleErrorsApi, handleModal, handleReset, handleResetNoSignal, handleResource, handleResourceV2, handleSuccessApi, handleSuccessResult, showError, throwIfEmptyArray, validaFecha, validaLista, validaPeriodo, validaPosicion, validaTipo, validarObligatorio, validarSituacion };
4143
+ export { AlertConfirmationComponent, AlertConfirmationConfig, AlertConfirmationService, AlertErrorComponent, AlertErrorService, AlertService, AlertaComponent, Almacenes, AtajosDirective, AutocompleteComponent, AutocompleteV2Component, BadgeComponent, ButtonComponent, ButtonProperties, CaracteresCodigoDirective, CardMobileComponent, CheckBoxComponent, Cobradores, DecimalDirective, DetalleCreditoComponent, Direcciones, DobleInputComponent, DropdownCdkComponent, DropdownComponent, DropdownMenuComponent, DropdownOption, FormateadorService, HeaderComponent, InputClaseComponent, InputComponent, InputDinamicoComponent, InputRadioComponent, ListOptionComponent, ListSituacionesComponent, MdGenericoComponent, Monedas, MontosCalcularComponent, Motivos, MultiSelectDropdownComponent, MultiselectedComponent, NavTabsComponent, OnlyNumberDirective, OnlyNumberFlexDirective, PaginadorComponent, RadioComponent, Recursos, Series, SidebarComponent, SpinnerComponent, SwitchActivoComponent, SwitchComponent, TABLE_EVENTS, TBanco, TabItemComponent, TableAdvanceComponent, TableAdvanceOptimizadaComponent, TableBusquedaComponent, TableData, TableDetalleComponent, TableSimpleComponent, TipoDocumento, ToastService, ToasterComponent, Transportista, Vendedor, configModal, getInputsObligatorios, handleEmptyResult, handleErrorsApi, handleModal, handleReset, handleResetNoSignal, handleResource, handleResourceV2, handleSuccessApi, handleSuccessResult, showError, throwIfEmptyArray, validaFecha, validaLista, validaPeriodo, validaPosicion, validaTipo, validarObligatorio, validarSituacion };
4228
4144
  //# sourceMappingURL=ng-components-tsi.mjs.map