ng-components-tsi 0.0.42 → 0.0.44

package/fesm2022/ng-components-tsi.mjs

@@ -1101,36 +1101,42 @@ class OnlyNumberDirective {
     elementRef = inject(ElementRef);
     onKeyPress(event) {
         const inputChar = event.key;
-        if (event.ctrlKey || event.metaKey || inputChar.length > 1)
+        if (inputChar.length > 1 || event.ctrlKey || event.metaKey)
             return;
-        const input = this.elementRef.nativeElement;
-        const currentValue = input.value;
-        const start = input.selectionStart ?? currentValue.length;
-        const end = input.selectionEnd ?? currentValue.length;
-        const proposed = currentValue.substring(0, start) +
-            inputChar +
-            currentValue.substring(end);
-        const regex = /^-?\d*\.?\d*$/;
-        if (!regex.test(proposed)) {
+        if (!/^\d$/.test(inputChar)) {
             event.preventDefault();
         }
     }
     onPaste(event) {
+        event.preventDefault();
         const pasted = event.clipboardData?.getData('text') || '';
+        const cleaned = pasted.replace(/\D/g, '');
         const input = this.elementRef.nativeElement;
         const currentValue = input.value;
         const start = input.selectionStart ?? currentValue.length;
         const end = input.selectionEnd ?? currentValue.length;
-        const proposed = currentValue.substring(0, start) +
-            pasted +
+        const maxLength = input.maxLength;
+        let proposed = currentValue.substring(0, start) +
+            cleaned +
             currentValue.substring(end);
-        const regex = /^-?\d*\.?\d*$/;
-        if (!regex.test(proposed)) {
-            event.preventDefault();
+        if (maxLength > 0) {
+            proposed = proposed.substring(0, maxLength);
+        }
+        input.value = proposed;
+        const cursorPosition = Math.min(start + cleaned.length, proposed.length);
+        input.setSelectionRange(cursorPosition, cursorPosition);
+        input.dispatchEvent(new Event('input'));
+    }
+    onInput() {
+        const input = this.elementRef.nativeElement;
+        const cleaned = input.value.replace(/\D/g, '');
+        if (input.value != cleaned) {
+            input.value = cleaned;
+            input.dispatchEvent(new Event('input'));
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OnlyNumberDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: OnlyNumberDirective, isStandalone: true, selector: "[onlyNumber]", host: { listeners: { "keypress": "onKeyPress($event)", "paste": "onPaste($event)" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: OnlyNumberDirective, isStandalone: true, selector: "[onlyNumber]", host: { listeners: { "keypress": "onKeyPress($event)", "paste": "onPaste($event)", "input": "onInput()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OnlyNumberDirective, decorators: [{
             type: Directive,
@@ -1143,6 +1149,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             }], onPaste: [{
                 type: HostListener,
                 args: ['paste', ['$event']]
+            }], onInput: [{
+                type: HostListener,
+                args: ['input']
             }] } });
 
 class OnlyDayDirective {
@@ -1254,17 +1263,20 @@ class OnlyNumberFlexDirective {
         }
     }
     onPaste(event) {
+        event.preventDefault();
         const pasted = event.clipboardData?.getData('text') || '';
+        const cleaned = pasted.replace(/[^\d.,-]/g, '');
         const input = this.elementRef.nativeElement;
         const currentValue = input.value;
         const start = input.selectionStart ?? currentValue.length;
         const end = input.selectionEnd ?? currentValue.length;
         const proposed = currentValue.substring(0, start) +
-            pasted +
+            cleaned +
             currentValue.substring(end);
-        if (!this.regex.test(proposed)) {
-            event.preventDefault();
-        }
+        input.value = proposed;
+        const cursorPosition = start + cleaned.length;
+        input.setSelectionRange(cursorPosition, cursorPosition);
+        input.dispatchEvent(new Event('input'));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OnlyNumberFlexDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: OnlyNumberFlexDirective, isStandalone: true, selector: "[onlyNumberFlex]", host: { listeners: { "keypress": "onKeyPress($event)", "paste": "onPaste($event)" } }, ngImport: i0 });
@@ -2568,11 +2580,11 @@ class TableAdvanceComponent {
         return { usecase: 3, data: row };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableAdvanceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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 }, rowClassFn: { classPropertyName: "rowClassFn", publicName: "rowClassFn", 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                    @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]=\"rowClassFn() ? rowClassFn()(row) : 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]=\"rowClassFn() ? rowClassFn()(row) : 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]=\"rowClassFn() ? rowClassFn()(row) : 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]=\"rowClassFn() ? rowClassFn()(row) : 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]=\"rowClassFn() ? rowClassFn()(row) : 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]=\"rowClassFn() ? rowClassFn()(row) : 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]=\"rowClassFn() ? rowClassFn()(row) : 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                    @for (seg of getFooterSegments(); track $index) {\r\n                    @if (seg.type == 'colspan') {\r\n                    <td class=\"b-table text-start fw-bold\" [attr.colspan]=\"seg.span\">\r\n                        {{ $index == 0 ? 'Totales' : '' }}\r\n                    </td>\r\n                    } @else {\r\n                    <td class=\"b-table text-end fw-bold\">\r\n                        @if (seg.type == 'total') {\r\n                        {{ getTotals(seg.field) | number:'1.2-2' }}\r\n                        }@else if (seg.type == 'averageSimple') {\r\n                        {{ getAverageSimple(seg.field) | number:'1.2-2' }}\r\n                        }\r\n                        @else if (seg.type == 'averagePonderado') {\r\n                        {{ getAveragePonderado(seg.field) | number:'1.2-2' }}\r\n                        }\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] });
+    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 }, rowClassFn: { classPropertyName: "rowClassFn", publicName: "rowClassFn", 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)\" \r\n                            (click)=\"$event.stopPropagation()\"\r\n                            (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                    @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]=\"rowClassFn() ? rowClassFn()(row) : 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]=\"rowClassFn() ? rowClassFn()(row) : 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]=\"rowClassFn() ? rowClassFn()(row) : 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]=\"rowClassFn() ? rowClassFn()(row) : 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]=\"rowClassFn() ? rowClassFn()(row) : 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]=\"rowClassFn() ? rowClassFn()(row) : 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]=\"rowClassFn() ? rowClassFn()(row) : 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                    @for (seg of getFooterSegments(); track $index) {\r\n                    @if (seg.type == 'colspan') {\r\n                    <td class=\"b-table text-start fw-bold\" [attr.colspan]=\"seg.span\">\r\n                        {{ $index == 0 ? 'Totales' : '' }}\r\n                    </td>\r\n                    } @else {\r\n                    <td class=\"b-table text-end fw-bold\">\r\n                        @if (seg.type == 'total') {\r\n                        {{ getTotals(seg.field) | number:'1.2-2' }}\r\n                        }@else if (seg.type == 'averageSimple') {\r\n                        {{ getAverageSimple(seg.field) | number:'1.2-2' }}\r\n                        }\r\n                        @else if (seg.type == 'averagePonderado') {\r\n                        {{ getAveragePonderado(seg.field) | number:'1.2-2' }}\r\n                        }\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] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableAdvanceComponent, decorators: [{
             type: Component,
-            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                    @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]=\"rowClassFn() ? rowClassFn()(row) : 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]=\"rowClassFn() ? rowClassFn()(row) : 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]=\"rowClassFn() ? rowClassFn()(row) : 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]=\"rowClassFn() ? rowClassFn()(row) : 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]=\"rowClassFn() ? rowClassFn()(row) : 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]=\"rowClassFn() ? rowClassFn()(row) : 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]=\"rowClassFn() ? rowClassFn()(row) : 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                    @for (seg of getFooterSegments(); track $index) {\r\n                    @if (seg.type == 'colspan') {\r\n                    <td class=\"b-table text-start fw-bold\" [attr.colspan]=\"seg.span\">\r\n                        {{ $index == 0 ? 'Totales' : '' }}\r\n                    </td>\r\n                    } @else {\r\n                    <td class=\"b-table text-end fw-bold\">\r\n                        @if (seg.type == 'total') {\r\n                        {{ getTotals(seg.field) | number:'1.2-2' }}\r\n                        }@else if (seg.type == 'averageSimple') {\r\n                        {{ getAverageSimple(seg.field) | number:'1.2-2' }}\r\n                        }\r\n                        @else if (seg.type == 'averagePonderado') {\r\n                        {{ getAveragePonderado(seg.field) | number:'1.2-2' }}\r\n                        }\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"] }]
+            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)\" \r\n                            (click)=\"$event.stopPropagation()\"\r\n                            (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                    @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]=\"rowClassFn() ? rowClassFn()(row) : 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]=\"rowClassFn() ? rowClassFn()(row) : 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]=\"rowClassFn() ? rowClassFn()(row) : 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]=\"rowClassFn() ? rowClassFn()(row) : 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]=\"rowClassFn() ? rowClassFn()(row) : 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]=\"rowClassFn() ? rowClassFn()(row) : 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]=\"rowClassFn() ? rowClassFn()(row) : 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                    @for (seg of getFooterSegments(); track $index) {\r\n                    @if (seg.type == 'colspan') {\r\n                    <td class=\"b-table text-start fw-bold\" [attr.colspan]=\"seg.span\">\r\n                        {{ $index == 0 ? 'Totales' : '' }}\r\n                    </td>\r\n                    } @else {\r\n                    <td class=\"b-table text-end fw-bold\">\r\n                        @if (seg.type == 'total') {\r\n                        {{ getTotals(seg.field) | number:'1.2-2' }}\r\n                        }@else if (seg.type == 'averageSimple') {\r\n                        {{ getAverageSimple(seg.field) | number:'1.2-2' }}\r\n                        }\r\n                        @else if (seg.type == 'averagePonderado') {\r\n                        {{ getAveragePonderado(seg.field) | number:'1.2-2' }}\r\n                        }\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"] }]
         }], ctorParameters: () => [], propDecorators: { tableHeaders: [{
                 type: ViewChildren,
                 args: ['thElement']
@@ -2868,11 +2880,11 @@ class TableAdvanceOptimizadaComponent {
         this.rowEvent.emit({ usecase: 3, data: row });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableAdvanceOptimizadaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TableAdvanceOptimizadaComponent, isStandalone: true, selector: "app-table-advance-optimizada", inputs: { titleTabla: { classPropertyName: "titleTabla", publicName: "titleTabla", isSignal: true, isRequired: false, transformFunction: null }, 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 }, 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 }, isDarkMode: { classPropertyName: "isDarkMode", publicName: "isDarkMode", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, batchSize: { classPropertyName: "batchSize", publicName: "batchSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedRow: "selectedRowChange", selectItems: "selectItemsChange", rowEvent: "rowEvent" }, host: { listeners: { "window:resize": "onResize($event)" } }, providers: [DatePipe, DecimalPipe], queries: [{ propertyName: "customActions", first: true, predicate: ["customActions"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tableHeaders", first: true, predicate: ["thElement"], descendants: true, isSignal: true }, { propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, isSignal: 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 bg-white shadow\" @dropdownAnimation>\r\n        <div class=\"popover-title fs-7 bg-white\">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<!-- VISTA MOBILE -->\r\n\r\n@if (isLoadingResponsive()) {\r\n<div class=\"d-flex flex-column justify-content-center align-items-center py-2\">\r\n    <div class=\"spinner-border text-secondary mb-2\" role=\"status\"></div>\r\n    <span class=\"ms-2 fs-6\">Cargando...</span>\r\n</div>\r\n}\r\n\r\n@if (!isLoadingResponsive()) {\r\n\r\n@if (isMobile()) {\r\n<app-card-mobile [data]=\"rowFilter()\" [columns]=\"columns()\" [actions]=\"customActions()\" [identifier]=\"identifier()\"\r\n    [titleTabla]=\"titleTabla()\" [altoContainer]=\"altoContainer()\" />\r\n}\r\n\r\n@if (!isMobile()) {\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        <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\">\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                    </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                        }\r\n                    </th>\r\n                    }\r\n                    }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                @for (row of dataVirtual(); track row.idListTsi) {\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 ('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._format?.[column.fieldname] ?? row[column.fieldname], column.fieldname)\"\r\n                        [title]=\"row._format?.[column.fieldname] ?? row[column.fieldname]\" [ngClass]=\"getRowClass(row)\"\r\n                        class=\"b-table {{getPosition(column)}}\">\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) + (withCheckbox() ? 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._format?.fcreac ?? row.fcreac }} 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._format?.factua ?? row.factua }} a las {{\r\n                                row.hactua }}\r\n                            </span>\r\n                        </div>\r\n                    </td>\r\n                </tr>\r\n                }\r\n                }\r\n                <tr #anchor>\r\n                    <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\" class=\"text-center text-muted py-3\">\r\n                        @if (isLoading()) {\r\n                        <span>Cargando m\u00E1s registros...</span>\r\n                        }\r\n                        @if (!isLoading() && dataVirtual().length >= 5000) {\r\n                        <span>No hay m\u00E1s registros</span>\r\n                        }\r\n                    </td>\r\n                </tr>\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)}}\r\n                    </td>\r\n                    }\r\n                    }\r\n                </tr>\r\n            </tfoot>\r\n            }\r\n        </table>\r\n    </div>\r\n</div>\r\n\r\n}\r\n\r\n}\r\n\r\n\r\n<!-- FIN VISTA MOBILE -->", 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: "component", type: DropdownCdkComponent, selector: "app-dropdown-cdk", inputs: ["inline", "altoContainer"] }, { 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CardMobileComponent, selector: "app-card-mobile", inputs: ["data", "columns", "identifier", "titleTabla", "actions", "altoContainer", "rendered"] }], animations: [dropdownAnimation, fadeInOut], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TableAdvanceOptimizadaComponent, isStandalone: true, selector: "app-table-advance-optimizada", inputs: { titleTabla: { classPropertyName: "titleTabla", publicName: "titleTabla", isSignal: true, isRequired: false, transformFunction: null }, 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 }, 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 }, isDarkMode: { classPropertyName: "isDarkMode", publicName: "isDarkMode", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, batchSize: { classPropertyName: "batchSize", publicName: "batchSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedRow: "selectedRowChange", selectItems: "selectItemsChange", rowEvent: "rowEvent" }, host: { listeners: { "window:resize": "onResize($event)" } }, providers: [DatePipe, DecimalPipe], queries: [{ propertyName: "customActions", first: true, predicate: ["customActions"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tableHeaders", first: true, predicate: ["thElement"], descendants: true, isSignal: true }, { propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, isSignal: 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 bg-white shadow\" @dropdownAnimation>\r\n        <div class=\"popover-title fs-7 bg-white\">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<!-- VISTA MOBILE -->\r\n\r\n@if (isLoadingResponsive()) {\r\n<div class=\"d-flex flex-column justify-content-center align-items-center py-2\">\r\n    <div class=\"spinner-border text-secondary mb-2\" role=\"status\"></div>\r\n    <span class=\"ms-2 fs-6\">Cargando...</span>\r\n</div>\r\n}\r\n\r\n@if (!isLoadingResponsive()) {\r\n\r\n@if (isMobile()) {\r\n<app-card-mobile [data]=\"rowFilter()\" [columns]=\"columns()\" [actions]=\"customActions()\" [identifier]=\"identifier()\"\r\n    [titleTabla]=\"titleTabla()\" [altoContainer]=\"altoContainer()\" />\r\n}\r\n\r\n@if (!isMobile()) {\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        <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\">\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                    </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                        }\r\n                    </th>\r\n                    }\r\n                    }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                @for (row of dataVirtual(); track row.idListTsi) {\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)\"\r\n                            (click)=\"$event.stopPropagation()\"\r\n                            (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 ('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._format?.[column.fieldname] ?? row[column.fieldname], column.fieldname)\"\r\n                        [title]=\"row._format?.[column.fieldname] ?? row[column.fieldname]\" [ngClass]=\"getRowClass(row)\"\r\n                        class=\"b-table {{getPosition(column)}}\">\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) + (withCheckbox() ? 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._format?.fcreac ?? row.fcreac }} 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._format?.factua ?? row.factua }} a las {{\r\n                                row.hactua }}\r\n                            </span>\r\n                        </div>\r\n                    </td>\r\n                </tr>\r\n                }\r\n                }\r\n                <tr #anchor>\r\n                    <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\" class=\"text-center text-muted py-3\">\r\n                        @if (isLoading()) {\r\n                        <span>Cargando m\u00E1s registros...</span>\r\n                        }\r\n                        @if (!isLoading() && dataVirtual().length >= 5000) {\r\n                        <span>No hay m\u00E1s registros</span>\r\n                        }\r\n                    </td>\r\n                </tr>\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)}}\r\n                    </td>\r\n                    }\r\n                    }\r\n                </tr>\r\n            </tfoot>\r\n            }\r\n        </table>\r\n    </div>\r\n</div>\r\n\r\n}\r\n\r\n}\r\n\r\n\r\n<!-- FIN VISTA MOBILE -->", 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: "component", type: DropdownCdkComponent, selector: "app-dropdown-cdk", inputs: ["inline", "altoContainer"] }, { 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CardMobileComponent, selector: "app-card-mobile", inputs: ["data", "columns", "identifier", "titleTabla", "actions", "altoContainer", "rendered"] }], animations: [dropdownAnimation, fadeInOut], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableAdvanceOptimizadaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-table-advance-optimizada', imports: [DropdownCdkComponent, FormsModule, NgClass, NgTemplateOutlet, CardMobileComponent], animations: [dropdownAnimation, fadeInOut], providers: [DatePipe, DecimalPipe], changeDetection: ChangeDetectionStrategy.OnPush, 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 bg-white shadow\" @dropdownAnimation>\r\n        <div class=\"popover-title fs-7 bg-white\">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<!-- VISTA MOBILE -->\r\n\r\n@if (isLoadingResponsive()) {\r\n<div class=\"d-flex flex-column justify-content-center align-items-center py-2\">\r\n    <div class=\"spinner-border text-secondary mb-2\" role=\"status\"></div>\r\n    <span class=\"ms-2 fs-6\">Cargando...</span>\r\n</div>\r\n}\r\n\r\n@if (!isLoadingResponsive()) {\r\n\r\n@if (isMobile()) {\r\n<app-card-mobile [data]=\"rowFilter()\" [columns]=\"columns()\" [actions]=\"customActions()\" [identifier]=\"identifier()\"\r\n    [titleTabla]=\"titleTabla()\" [altoContainer]=\"altoContainer()\" />\r\n}\r\n\r\n@if (!isMobile()) {\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        <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\">\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                    </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                        }\r\n                    </th>\r\n                    }\r\n                    }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                @for (row of dataVirtual(); track row.idListTsi) {\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 ('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._format?.[column.fieldname] ?? row[column.fieldname], column.fieldname)\"\r\n                        [title]=\"row._format?.[column.fieldname] ?? row[column.fieldname]\" [ngClass]=\"getRowClass(row)\"\r\n                        class=\"b-table {{getPosition(column)}}\">\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) + (withCheckbox() ? 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._format?.fcreac ?? row.fcreac }} 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._format?.factua ?? row.factua }} a las {{\r\n                                row.hactua }}\r\n                            </span>\r\n                        </div>\r\n                    </td>\r\n                </tr>\r\n                }\r\n                }\r\n                <tr #anchor>\r\n                    <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\" class=\"text-center text-muted py-3\">\r\n                        @if (isLoading()) {\r\n                        <span>Cargando m\u00E1s registros...</span>\r\n                        }\r\n                        @if (!isLoading() && dataVirtual().length >= 5000) {\r\n                        <span>No hay m\u00E1s registros</span>\r\n                        }\r\n                    </td>\r\n                </tr>\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)}}\r\n                    </td>\r\n                    }\r\n                    }\r\n                </tr>\r\n            </tfoot>\r\n            }\r\n        </table>\r\n    </div>\r\n</div>\r\n\r\n}\r\n\r\n}\r\n\r\n\r\n<!-- FIN VISTA MOBILE -->", 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"] }]
+            args: [{ selector: 'app-table-advance-optimizada', imports: [DropdownCdkComponent, FormsModule, NgClass, NgTemplateOutlet, CardMobileComponent], animations: [dropdownAnimation, fadeInOut], providers: [DatePipe, DecimalPipe], changeDetection: ChangeDetectionStrategy.OnPush, 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 bg-white shadow\" @dropdownAnimation>\r\n        <div class=\"popover-title fs-7 bg-white\">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<!-- VISTA MOBILE -->\r\n\r\n@if (isLoadingResponsive()) {\r\n<div class=\"d-flex flex-column justify-content-center align-items-center py-2\">\r\n    <div class=\"spinner-border text-secondary mb-2\" role=\"status\"></div>\r\n    <span class=\"ms-2 fs-6\">Cargando...</span>\r\n</div>\r\n}\r\n\r\n@if (!isLoadingResponsive()) {\r\n\r\n@if (isMobile()) {\r\n<app-card-mobile [data]=\"rowFilter()\" [columns]=\"columns()\" [actions]=\"customActions()\" [identifier]=\"identifier()\"\r\n    [titleTabla]=\"titleTabla()\" [altoContainer]=\"altoContainer()\" />\r\n}\r\n\r\n@if (!isMobile()) {\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        <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\">\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                    </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                        }\r\n                    </th>\r\n                    }\r\n                    }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                @for (row of dataVirtual(); track row.idListTsi) {\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)\"\r\n                            (click)=\"$event.stopPropagation()\"\r\n                            (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 ('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._format?.[column.fieldname] ?? row[column.fieldname], column.fieldname)\"\r\n                        [title]=\"row._format?.[column.fieldname] ?? row[column.fieldname]\" [ngClass]=\"getRowClass(row)\"\r\n                        class=\"b-table {{getPosition(column)}}\">\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) + (withCheckbox() ? 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._format?.fcreac ?? row.fcreac }} 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._format?.factua ?? row.factua }} a las {{\r\n                                row.hactua }}\r\n                            </span>\r\n                        </div>\r\n                    </td>\r\n                </tr>\r\n                }\r\n                }\r\n                <tr #anchor>\r\n                    <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\" class=\"text-center text-muted py-3\">\r\n                        @if (isLoading()) {\r\n                        <span>Cargando m\u00E1s registros...</span>\r\n                        }\r\n                        @if (!isLoading() && dataVirtual().length >= 5000) {\r\n                        <span>No hay m\u00E1s registros</span>\r\n                        }\r\n                    </td>\r\n                </tr>\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)}}\r\n                    </td>\r\n                    }\r\n                    }\r\n                </tr>\r\n            </tfoot>\r\n            }\r\n        </table>\r\n    </div>\r\n</div>\r\n\r\n}\r\n\r\n}\r\n\r\n\r\n<!-- FIN VISTA MOBILE -->", 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"] }]
         }], ctorParameters: () => [], propDecorators: { onResize: [{
                 type: HostListener,
                 args: ['window:resize', ['$event']]
@@ -3508,6 +3520,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 }]
         }] });
 
+var TABLE_EVENTS;
+(function (TABLE_EVENTS) {
+    TABLE_EVENTS[TABLE_EVENTS["CLICK"] = 1] = "CLICK";
+    TABLE_EVENTS[TABLE_EVENTS["DOUBLE_CLICK"] = 2] = "DOUBLE_CLICK";
+    TABLE_EVENTS[TABLE_EVENTS["RIGHT_CLICK"] = 3] = "RIGHT_CLICK";
+    TABLE_EVENTS[TABLE_EVENTS["CHECK_ALL"] = 4] = "CHECK_ALL";
+    TABLE_EVENTS[TABLE_EVENTS["CHECK_ROW"] = 5] = "CHECK_ROW";
+})(TABLE_EVENTS || (TABLE_EVENTS = {}));
+
 class TableUltimateComponent {
     tableHeaders = viewChild('thElement');
     customActions = contentChild('customActions');
@@ -3547,6 +3568,7 @@ class TableUltimateComponent {
     rowDisabledFn = input(null);
     rowEvent = output();
     rowFormat = computed(() => this.formateador.procesarLista(this.rows(), this.columns()));
+    selectAllOnLoad = input(false);
     rowFilter = linkedSignal(() => {
         const term = this.busqueda().toLowerCase();
         const currentRows = this.rowFormat?.() || [];
@@ -3586,6 +3608,7 @@ class TableUltimateComponent {
         return result;
     }
     isMobile = signal(window.innerWidth <= 768);
+    initialized = false; // BANDERA PARA SOLO UNA CARGA INICIAL
     constructor() {
         effect(() => {
             const size = (this.rowFilter() ?? []).length;
@@ -3619,6 +3642,18 @@ class TableUltimateComponent {
                 this.actionsAnchor();
             }
         });
+        effect(() => {
+            const rows = this.rowFilter();
+            const shouldSelectAll = this.selectAllOnLoad();
+            if (!rows?.length)
+                return;
+            if (!shouldSelectAll)
+                return;
+            if (this.initialized)
+                return;
+            this.initialized = true;
+            this.checkAll(true);
+        });
     }
     onResize(event) {
         if (!this.activeMobileMode())
@@ -3731,7 +3766,12 @@ class TableUltimateComponent {
     }
     allCheck(event) {
         const input = event.target;
-        if (input.checked) {
+        const checked = input.checked;
+        this.rowEvent.emit({ usecase: TABLE_EVENTS.CHECK_ALL, data: checked });
+        this.checkAll(checked);
+    }
+    checkAll(checked) {
+        if (checked) {
             const total = this.rowFilter()
                 .filter(r => !this.isCheckboxDisabled(r))
                 .map(r => ({ id: r.idListTsi, data: r }));
@@ -3755,7 +3795,9 @@ class TableUltimateComponent {
             return;
         }
         const input = event.target;
-        if (input.checked) {
+        const checked = input.checked;
+        this.rowEvent.emit({ usecase: TABLE_EVENTS.CHECK_ROW, data: { row, checked } });
+        if (checked) {
             const item = { id: idList, data: row };
             this.selectItems.update(sel => [...sel, item]);
             return;
@@ -3812,21 +3854,21 @@ class TableUltimateComponent {
         }, 100);
     }
     onClick(row) {
-        this.rowEvent.emit({ usecase: 1, data: row });
+        this.rowEvent.emit({ usecase: TABLE_EVENTS.CLICK, data: row });
     }
     onDoubleClick(row) {
-        this.rowEvent.emit({ usecase: 2, data: row });
+        this.rowEvent.emit({ usecase: TABLE_EVENTS.DOUBLE_CLICK, data: row });
     }
     onRightClick(event, row) {
         event.preventDefault();
-        this.rowEvent.emit({ usecase: 3, data: row });
+        this.rowEvent.emit({ usecase: TABLE_EVENTS.RIGHT_CLICK, data: row });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableUltimateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TableUltimateComponent, isStandalone: true, selector: "app-table-ultimate", inputs: { titleTabla: { classPropertyName: "titleTabla", publicName: "titleTabla", isSignal: true, isRequired: false, transformFunction: null }, 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 }, 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 }, isDarkMode: { classPropertyName: "isDarkMode", publicName: "isDarkMode", isSignal: true, isRequired: false, transformFunction: null }, activeMobileMode: { classPropertyName: "activeMobileMode", publicName: "activeMobileMode", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, batchSize: { classPropertyName: "batchSize", publicName: "batchSize", isSignal: true, isRequired: false, transformFunction: null }, rowClassFn: { classPropertyName: "rowClassFn", publicName: "rowClassFn", isSignal: true, isRequired: false, transformFunction: null }, rowDisabledFn: { classPropertyName: "rowDisabledFn", publicName: "rowDisabledFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedRow: "selectedRowChange", selectItems: "selectItemsChange", rowEvent: "rowEvent" }, host: { listeners: { "window:resize": "onResize($event)" } }, queries: [{ propertyName: "customActions", first: true, predicate: ["customActions"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tableHeaders", first: true, predicate: ["thElement"], descendants: true, isSignal: true }, { propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, isSignal: true }], ngImport: i0, template: "\r\n@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center\">\r\n    <label class=\"form-label me-2 pt-2\">Buscar</label>\r\n    <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n\r\n    <app-dropdown-cdk>\r\n        <ng-template #trigger>\r\n            <button class=\"btn btn-dark boton-buscar fs-7\">\r\n                <i class=\"fas fa-cog\"></i>\r\n            </button>\r\n        </ng-template>\r\n\r\n        <ng-template #content>\r\n            <div class=\"popover-menu-filter bg-white shadow\" @dropdownAnimation>\r\n                <div class=\"popover-title fs-7 bg-white\">\r\n                    Filtros\r\n                </div>\r\n\r\n                <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n                    <input class=\"form-check-input py-0 my-0 cw-25 ch-15\" type=\"checkbox\" [checked]=\"true\"\r\n                        (change)=\"toggleFiltros($event)\" />\r\n                    <label class=\"form-check-label ps-2 fs-6 mb-0 cursor-pointer\">\r\n                        Todos\r\n                    </label>\r\n                </div>\r\n\r\n                @for (col of columns(); track col.caption) {\r\n                <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n                    <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n                        id=\"{{ 'filter_' + col.caption }}\" [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n                    <label class=\"form-check-label ps-2 fs-6 cursor-pointer mb-0\" for=\"{{ 'filter_' + col.caption }}\">\r\n                        {{ col.caption }}\r\n                    </label>\r\n                </div>\r\n                }\r\n            </div>\r\n        </ng-template>\r\n    </app-dropdown-cdk>\r\n</div>\r\n}\r\n\r\n<!-- VISTA MOBILE -->\r\n@if (activeMobileMode()) {\r\n@if (isLoadingResponsive()) {\r\n<div class=\"d-flex flex-column justify-content-center align-items-center py-2\">\r\n    <div class=\"spinner-border text-secondary mb-2\" role=\"status\"></div>\r\n    <span class=\"ms-2 fs-6\">Cargando...</span>\r\n</div>\r\n}\r\n\r\n@if (!isLoadingResponsive()) {\r\n@if (isMobile()) {\r\n<app-card-mobile [data]=\"rowFilter()\" [columns]=\"columns()\" [actions]=\"customActions()\" [identifier]=\"identifier()\"\r\n    [titleTabla]=\"titleTabla()\" [altoContainer]=\"altoContainer()\" />\r\n}\r\n@if (!isMobile()) {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n}\r\n}\r\n@else {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n\r\n<ng-template #table>\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            <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                            <label>\r\n                                <input type=\"checkbox\" name=\"check_box_select_table_main\"\r\n                                    id=\"check_box_select_table_main\" animatedCheckbox [checked]=\"validaAllCheck()\"\r\n                                    (change)=\"allCheck($event)\">\r\n                            </label>\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 mt-2\" @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 d-flex align-items-center\">\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.fieldname]\" />\r\n                                            <label class=\"form-check-label ps-2 fs-6 cursor-pointer font-label mb-0\"\r\n                                                for=\"{{ 'switch_' + col.caption }}\">\r\n                                                {{ col.caption }}\r\n                                            </label>\r\n                                        </div>\r\n                                        }\r\n                                        }\r\n                                    </div>\r\n                                </ng-template>\r\n                            </app-dropdown-cdk>\r\n                        </th>\r\n                        }\r\n                        @for (column of columns(); track $index) {\r\n                        @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.fieldname] !== false) {\r\n                        <th class=\"b-table\" #thElement [title]=\"column.caption\"\r\n                            [style.width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n                            [style.max-width]=\"column?.width ? column.width + 'px' : 'auto'\"\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\r\n                                    [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                            }\r\n                        </th>\r\n                        }\r\n                        }\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    @for (row of dataVirtual(); track row.idListTsi) {\r\n                    @let idList = row.idListTsi;\r\n                    <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier()))}\"\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                            <label>\r\n                                <input type=\"checkbox\" [name]=\"'check_box_select_table_' + idList\"\r\n                                    [id]=\"'check_box_select_table_' + idList\" animatedCheckbox\r\n                                    [checked]=\"isItemSelected(idList)\" (change)=\"toogleItem(idList , $event)\"\r\n                                    [disabled]=\"isCheckboxDisabled(row)\">\r\n                            </label>\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\r\n                                *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.fieldname] !== false) {\r\n\r\n                        @if (column.template) {\r\n                        <td class=\"b-table\">\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\">\r\n                            </ng-container>\r\n                        </td>\r\n                        }@else {\r\n                        @switch (column.tipo) {\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._format?.[column.fieldname] ?? row[column.fieldname], column.fieldname)\"\r\n                            [style.width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n                            [style.max-width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n                            [title]=\"row._format?.[column.fieldname] ?? row[column.fieldname]\"\r\n                            [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\"\r\n                            class=\"b-table {{getPosition(column)}}\">\r\n                        </td>\r\n                        }\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) + (withCheckbox() ? 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._format?.fcreac ?? row.fcreac }} 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._format?.factua ?? row.factua }} a las\r\n                                    {{\r\n                                    row.hactua }}\r\n                                </span>\r\n                            </div>\r\n                        </td>\r\n                    </tr>\r\n                    }\r\n                    }\r\n                    <tr #anchor>\r\n                        <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n                            class=\"text-center text-muted py-3\">\r\n                            @if (isLoading()) {\r\n                            <span>Cargando m\u00E1s registros...</span>\r\n                            }\r\n                            @if (!isLoading() && dataVirtual().length >= 5000) {\r\n                            <span>No hay m\u00E1s registros</span>\r\n                            }\r\n                        </td>\r\n                    </tr>\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)}}\r\n                        </td>\r\n                        }\r\n                        }\r\n                    </tr>\r\n                </tfoot>\r\n                }\r\n            </table>\r\n        </div>\r\n    </div>\r\n\r\n</ng-template>\r\n", 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: "component", type: DropdownCdkComponent, selector: "app-dropdown-cdk", inputs: ["inline", "altoContainer"] }, { 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CardMobileComponent, selector: "app-card-mobile", inputs: ["data", "columns", "identifier", "titleTabla", "actions", "altoContainer", "rendered"] }, { kind: "directive", type: AnimatedCheckboxDirective, selector: "input[type=checkbox][animatedCheckbox]", inputs: ["cbClass"] }], animations: [fadeInOut, dropdownAnimation] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TableUltimateComponent, isStandalone: true, selector: "app-table-ultimate", inputs: { titleTabla: { classPropertyName: "titleTabla", publicName: "titleTabla", isSignal: true, isRequired: false, transformFunction: null }, 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 }, 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 }, isDarkMode: { classPropertyName: "isDarkMode", publicName: "isDarkMode", isSignal: true, isRequired: false, transformFunction: null }, activeMobileMode: { classPropertyName: "activeMobileMode", publicName: "activeMobileMode", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, batchSize: { classPropertyName: "batchSize", publicName: "batchSize", isSignal: true, isRequired: false, transformFunction: null }, rowClassFn: { classPropertyName: "rowClassFn", publicName: "rowClassFn", isSignal: true, isRequired: false, transformFunction: null }, rowDisabledFn: { classPropertyName: "rowDisabledFn", publicName: "rowDisabledFn", isSignal: true, isRequired: false, transformFunction: null }, selectAllOnLoad: { classPropertyName: "selectAllOnLoad", publicName: "selectAllOnLoad", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedRow: "selectedRowChange", selectItems: "selectItemsChange", rowEvent: "rowEvent" }, host: { listeners: { "window:resize": "onResize($event)" } }, queries: [{ propertyName: "customActions", first: true, predicate: ["customActions"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tableHeaders", first: true, predicate: ["thElement"], descendants: true, isSignal: true }, { propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, isSignal: true }], ngImport: i0, template: "\r\n@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center\">\r\n    <label class=\"form-label me-2 pt-2\">Buscar</label>\r\n    <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n\r\n    <app-dropdown-cdk>\r\n        <ng-template #trigger>\r\n            <button class=\"btn btn-dark boton-buscar fs-7\">\r\n                <i class=\"fas fa-cog\"></i>\r\n            </button>\r\n        </ng-template>\r\n\r\n        <ng-template #content>\r\n            <div class=\"popover-menu-filter bg-white shadow\" @dropdownAnimation>\r\n                <div class=\"popover-title fs-7 bg-white\">\r\n                    Filtros\r\n                </div>\r\n\r\n                <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n                    <input class=\"form-check-input py-0 my-0 cw-25 ch-15\" type=\"checkbox\" [checked]=\"true\"\r\n                        (change)=\"toggleFiltros($event)\" />\r\n                    <label class=\"form-check-label ps-2 fs-6 mb-0 cursor-pointer\">\r\n                        Todos\r\n                    </label>\r\n                </div>\r\n\r\n                @for (col of columns(); track col.caption) {\r\n                <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n                    <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n                        id=\"{{ 'filter_' + col.caption }}\" [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n                    <label class=\"form-check-label ps-2 fs-6 cursor-pointer mb-0\" for=\"{{ 'filter_' + col.caption }}\">\r\n                        {{ col.caption }}\r\n                    </label>\r\n                </div>\r\n                }\r\n            </div>\r\n        </ng-template>\r\n    </app-dropdown-cdk>\r\n</div>\r\n}\r\n\r\n<!-- VISTA MOBILE -->\r\n@if (activeMobileMode()) {\r\n@if (isLoadingResponsive()) {\r\n<div class=\"d-flex flex-column justify-content-center align-items-center py-2\">\r\n    <div class=\"spinner-border text-secondary mb-2\" role=\"status\"></div>\r\n    <span class=\"ms-2 fs-6\">Cargando...</span>\r\n</div>\r\n}\r\n\r\n@if (!isLoadingResponsive()) {\r\n@if (isMobile()) {\r\n<app-card-mobile [data]=\"rowFilter()\" [columns]=\"columns()\" [actions]=\"customActions()\" [identifier]=\"identifier()\"\r\n    [titleTabla]=\"titleTabla()\" [altoContainer]=\"altoContainer()\" />\r\n}\r\n@if (!isMobile()) {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n}\r\n}\r\n@else {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n\r\n<ng-template #table>\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            <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                            <label>\r\n                                <input type=\"checkbox\" name=\"check_box_select_table_main\"\r\n                                    id=\"check_box_select_table_main\" animatedCheckbox [checked]=\"validaAllCheck()\"\r\n                                    (change)=\"allCheck($event)\">\r\n                            </label>\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 mt-2\" @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 d-flex align-items-center\">\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.fieldname]\" />\r\n                                            <label class=\"form-check-label ps-2 fs-6 cursor-pointer font-label mb-0\"\r\n                                                for=\"{{ 'switch_' + col.caption }}\">\r\n                                                {{ col.caption }}\r\n                                            </label>\r\n                                        </div>\r\n                                        }\r\n                                        }\r\n                                    </div>\r\n                                </ng-template>\r\n                            </app-dropdown-cdk>\r\n                        </th>\r\n                        }\r\n                        @for (column of columns(); track $index) {\r\n                        @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.fieldname] !== false) {\r\n                        <th class=\"b-table\" #thElement [title]=\"column.caption\"\r\n                            [style.width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n                            [style.max-width]=\"column?.width ? column.width + 'px' : 'auto'\"\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\r\n                                    [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                            }\r\n                        </th>\r\n                        }\r\n                        }\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    @for (row of dataVirtual(); track row.idListTsi) {\r\n                    @let idList = row.idListTsi;\r\n                    <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier()))}\"\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                            <label>\r\n                                <input type=\"checkbox\" [name]=\"'check_box_select_table_' + idList\"\r\n                                    [id]=\"'check_box_select_table_' + idList\" animatedCheckbox\r\n                                    [checked]=\"isItemSelected(idList)\" \r\n                                    (click)=\"$event.stopPropagation()\"\r\n                                    (change)=\"toogleItem(idList , $event)\"\r\n                                    [disabled]=\"isCheckboxDisabled(row)\">\r\n                            </label>\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\r\n                                *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.fieldname] !== false) {\r\n\r\n                        @if (column.template) {\r\n                        <td class=\"b-table\">\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\">\r\n                            </ng-container>\r\n                        </td>\r\n                        }@else {\r\n                        @switch (column.tipo) {\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._format?.[column.fieldname] ?? row[column.fieldname], column.fieldname)\"\r\n                            [style.width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n                            [style.max-width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n                            [title]=\"row._format?.[column.fieldname] ?? row[column.fieldname]\"\r\n                            [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\"\r\n                            class=\"b-table {{getPosition(column)}}\">\r\n                        </td>\r\n                        }\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) + (withCheckbox() ? 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._format?.fcreac ?? row.fcreac }} 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._format?.factua ?? row.factua }} a las\r\n                                    {{\r\n                                    row.hactua }}\r\n                                </span>\r\n                            </div>\r\n                        </td>\r\n                    </tr>\r\n                    }\r\n                    }\r\n                    <tr #anchor>\r\n                        <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n                            class=\"text-center text-muted py-3\">\r\n                            @if (isLoading()) {\r\n                            <span>Cargando m\u00E1s registros...</span>\r\n                            }\r\n                            @if (!isLoading() && dataVirtual().length >= 5000) {\r\n                            <span>No hay m\u00E1s registros</span>\r\n                            }\r\n                        </td>\r\n                    </tr>\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)}}\r\n                        </td>\r\n                        }\r\n                        }\r\n                    </tr>\r\n                </tfoot>\r\n                }\r\n            </table>\r\n        </div>\r\n    </div>\r\n\r\n</ng-template>\r\n", 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: "component", type: DropdownCdkComponent, selector: "app-dropdown-cdk", inputs: ["inline", "altoContainer"] }, { 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CardMobileComponent, selector: "app-card-mobile", inputs: ["data", "columns", "identifier", "titleTabla", "actions", "altoContainer", "rendered"] }, { kind: "directive", type: AnimatedCheckboxDirective, selector: "input[type=checkbox][animatedCheckbox]", inputs: ["cbClass"] }], animations: [fadeInOut, dropdownAnimation] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableUltimateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-table-ultimate', imports: [DropdownCdkComponent, FormsModule, NgClass, NgTemplateOutlet, CardMobileComponent, AnimatedCheckboxDirective], animations: [fadeInOut, dropdownAnimation], template: "\r\n@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center\">\r\n    <label class=\"form-label me-2 pt-2\">Buscar</label>\r\n    <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n\r\n    <app-dropdown-cdk>\r\n        <ng-template #trigger>\r\n            <button class=\"btn btn-dark boton-buscar fs-7\">\r\n                <i class=\"fas fa-cog\"></i>\r\n            </button>\r\n        </ng-template>\r\n\r\n        <ng-template #content>\r\n            <div class=\"popover-menu-filter bg-white shadow\" @dropdownAnimation>\r\n                <div class=\"popover-title fs-7 bg-white\">\r\n                    Filtros\r\n                </div>\r\n\r\n                <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n                    <input class=\"form-check-input py-0 my-0 cw-25 ch-15\" type=\"checkbox\" [checked]=\"true\"\r\n                        (change)=\"toggleFiltros($event)\" />\r\n                    <label class=\"form-check-label ps-2 fs-6 mb-0 cursor-pointer\">\r\n                        Todos\r\n                    </label>\r\n                </div>\r\n\r\n                @for (col of columns(); track col.caption) {\r\n                <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n                    <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n                        id=\"{{ 'filter_' + col.caption }}\" [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n                    <label class=\"form-check-label ps-2 fs-6 cursor-pointer mb-0\" for=\"{{ 'filter_' + col.caption }}\">\r\n                        {{ col.caption }}\r\n                    </label>\r\n                </div>\r\n                }\r\n            </div>\r\n        </ng-template>\r\n    </app-dropdown-cdk>\r\n</div>\r\n}\r\n\r\n<!-- VISTA MOBILE -->\r\n@if (activeMobileMode()) {\r\n@if (isLoadingResponsive()) {\r\n<div class=\"d-flex flex-column justify-content-center align-items-center py-2\">\r\n    <div class=\"spinner-border text-secondary mb-2\" role=\"status\"></div>\r\n    <span class=\"ms-2 fs-6\">Cargando...</span>\r\n</div>\r\n}\r\n\r\n@if (!isLoadingResponsive()) {\r\n@if (isMobile()) {\r\n<app-card-mobile [data]=\"rowFilter()\" [columns]=\"columns()\" [actions]=\"customActions()\" [identifier]=\"identifier()\"\r\n    [titleTabla]=\"titleTabla()\" [altoContainer]=\"altoContainer()\" />\r\n}\r\n@if (!isMobile()) {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n}\r\n}\r\n@else {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n\r\n<ng-template #table>\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            <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                            <label>\r\n                                <input type=\"checkbox\" name=\"check_box_select_table_main\"\r\n                                    id=\"check_box_select_table_main\" animatedCheckbox [checked]=\"validaAllCheck()\"\r\n                                    (change)=\"allCheck($event)\">\r\n                            </label>\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 mt-2\" @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 d-flex align-items-center\">\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.fieldname]\" />\r\n                                            <label class=\"form-check-label ps-2 fs-6 cursor-pointer font-label mb-0\"\r\n                                                for=\"{{ 'switch_' + col.caption }}\">\r\n                                                {{ col.caption }}\r\n                                            </label>\r\n                                        </div>\r\n                                        }\r\n                                        }\r\n                                    </div>\r\n                                </ng-template>\r\n                            </app-dropdown-cdk>\r\n                        </th>\r\n                        }\r\n                        @for (column of columns(); track $index) {\r\n                        @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.fieldname] !== false) {\r\n                        <th class=\"b-table\" #thElement [title]=\"column.caption\"\r\n                            [style.width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n                            [style.max-width]=\"column?.width ? column.width + 'px' : 'auto'\"\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\r\n                                    [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                            }\r\n                        </th>\r\n                        }\r\n                        }\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    @for (row of dataVirtual(); track row.idListTsi) {\r\n                    @let idList = row.idListTsi;\r\n                    <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier()))}\"\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                            <label>\r\n                                <input type=\"checkbox\" [name]=\"'check_box_select_table_' + idList\"\r\n                                    [id]=\"'check_box_select_table_' + idList\" animatedCheckbox\r\n                                    [checked]=\"isItemSelected(idList)\" (change)=\"toogleItem(idList , $event)\"\r\n                                    [disabled]=\"isCheckboxDisabled(row)\">\r\n                            </label>\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\r\n                                *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.fieldname] !== false) {\r\n\r\n                        @if (column.template) {\r\n                        <td class=\"b-table\">\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\">\r\n                            </ng-container>\r\n                        </td>\r\n                        }@else {\r\n                        @switch (column.tipo) {\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._format?.[column.fieldname] ?? row[column.fieldname], column.fieldname)\"\r\n                            [style.width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n                            [style.max-width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n                            [title]=\"row._format?.[column.fieldname] ?? row[column.fieldname]\"\r\n                            [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\"\r\n                            class=\"b-table {{getPosition(column)}}\">\r\n                        </td>\r\n                        }\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) + (withCheckbox() ? 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._format?.fcreac ?? row.fcreac }} 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._format?.factua ?? row.factua }} a las\r\n                                    {{\r\n                                    row.hactua }}\r\n                                </span>\r\n                            </div>\r\n                        </td>\r\n                    </tr>\r\n                    }\r\n                    }\r\n                    <tr #anchor>\r\n                        <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n                            class=\"text-center text-muted py-3\">\r\n                            @if (isLoading()) {\r\n                            <span>Cargando m\u00E1s registros...</span>\r\n                            }\r\n                            @if (!isLoading() && dataVirtual().length >= 5000) {\r\n                            <span>No hay m\u00E1s registros</span>\r\n                            }\r\n                        </td>\r\n                    </tr>\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)}}\r\n                        </td>\r\n                        }\r\n                        }\r\n                    </tr>\r\n                </tfoot>\r\n                }\r\n            </table>\r\n        </div>\r\n    </div>\r\n\r\n</ng-template>\r\n", 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"] }]
+            args: [{ selector: 'app-table-ultimate', imports: [DropdownCdkComponent, FormsModule, NgClass, NgTemplateOutlet, CardMobileComponent, AnimatedCheckboxDirective], animations: [fadeInOut, dropdownAnimation], template: "\r\n@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center\">\r\n    <label class=\"form-label me-2 pt-2\">Buscar</label>\r\n    <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n\r\n    <app-dropdown-cdk>\r\n        <ng-template #trigger>\r\n            <button class=\"btn btn-dark boton-buscar fs-7\">\r\n                <i class=\"fas fa-cog\"></i>\r\n            </button>\r\n        </ng-template>\r\n\r\n        <ng-template #content>\r\n            <div class=\"popover-menu-filter bg-white shadow\" @dropdownAnimation>\r\n                <div class=\"popover-title fs-7 bg-white\">\r\n                    Filtros\r\n                </div>\r\n\r\n                <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n                    <input class=\"form-check-input py-0 my-0 cw-25 ch-15\" type=\"checkbox\" [checked]=\"true\"\r\n                        (change)=\"toggleFiltros($event)\" />\r\n                    <label class=\"form-check-label ps-2 fs-6 mb-0 cursor-pointer\">\r\n                        Todos\r\n                    </label>\r\n                </div>\r\n\r\n                @for (col of columns(); track col.caption) {\r\n                <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n                    <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n                        id=\"{{ 'filter_' + col.caption }}\" [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n                    <label class=\"form-check-label ps-2 fs-6 cursor-pointer mb-0\" for=\"{{ 'filter_' + col.caption }}\">\r\n                        {{ col.caption }}\r\n                    </label>\r\n                </div>\r\n                }\r\n            </div>\r\n        </ng-template>\r\n    </app-dropdown-cdk>\r\n</div>\r\n}\r\n\r\n<!-- VISTA MOBILE -->\r\n@if (activeMobileMode()) {\r\n@if (isLoadingResponsive()) {\r\n<div class=\"d-flex flex-column justify-content-center align-items-center py-2\">\r\n    <div class=\"spinner-border text-secondary mb-2\" role=\"status\"></div>\r\n    <span class=\"ms-2 fs-6\">Cargando...</span>\r\n</div>\r\n}\r\n\r\n@if (!isLoadingResponsive()) {\r\n@if (isMobile()) {\r\n<app-card-mobile [data]=\"rowFilter()\" [columns]=\"columns()\" [actions]=\"customActions()\" [identifier]=\"identifier()\"\r\n    [titleTabla]=\"titleTabla()\" [altoContainer]=\"altoContainer()\" />\r\n}\r\n@if (!isMobile()) {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n}\r\n}\r\n@else {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n\r\n<ng-template #table>\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            <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                            <label>\r\n                                <input type=\"checkbox\" name=\"check_box_select_table_main\"\r\n                                    id=\"check_box_select_table_main\" animatedCheckbox [checked]=\"validaAllCheck()\"\r\n                                    (change)=\"allCheck($event)\">\r\n                            </label>\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 mt-2\" @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 d-flex align-items-center\">\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.fieldname]\" />\r\n                                            <label class=\"form-check-label ps-2 fs-6 cursor-pointer font-label mb-0\"\r\n                                                for=\"{{ 'switch_' + col.caption }}\">\r\n                                                {{ col.caption }}\r\n                                            </label>\r\n                                        </div>\r\n                                        }\r\n                                        }\r\n                                    </div>\r\n                                </ng-template>\r\n                            </app-dropdown-cdk>\r\n                        </th>\r\n                        }\r\n                        @for (column of columns(); track $index) {\r\n                        @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.fieldname] !== false) {\r\n                        <th class=\"b-table\" #thElement [title]=\"column.caption\"\r\n                            [style.width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n                            [style.max-width]=\"column?.width ? column.width + 'px' : 'auto'\"\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\r\n                                    [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                            }\r\n                        </th>\r\n                        }\r\n                        }\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    @for (row of dataVirtual(); track row.idListTsi) {\r\n                    @let idList = row.idListTsi;\r\n                    <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier()))}\"\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                            <label>\r\n                                <input type=\"checkbox\" [name]=\"'check_box_select_table_' + idList\"\r\n                                    [id]=\"'check_box_select_table_' + idList\" animatedCheckbox\r\n                                    [checked]=\"isItemSelected(idList)\" \r\n                                    (click)=\"$event.stopPropagation()\"\r\n                                    (change)=\"toogleItem(idList , $event)\"\r\n                                    [disabled]=\"isCheckboxDisabled(row)\">\r\n                            </label>\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\r\n                                *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.fieldname] !== false) {\r\n\r\n                        @if (column.template) {\r\n                        <td class=\"b-table\">\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\">\r\n                            </ng-container>\r\n                        </td>\r\n                        }@else {\r\n                        @switch (column.tipo) {\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._format?.[column.fieldname] ?? row[column.fieldname], column.fieldname)\"\r\n                            [style.width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n                            [style.max-width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n                            [title]=\"row._format?.[column.fieldname] ?? row[column.fieldname]\"\r\n                            [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\"\r\n                            class=\"b-table {{getPosition(column)}}\">\r\n                        </td>\r\n                        }\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) + (withCheckbox() ? 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._format?.fcreac ?? row.fcreac }} 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._format?.factua ?? row.factua }} a las\r\n                                    {{\r\n                                    row.hactua }}\r\n                                </span>\r\n                            </div>\r\n                        </td>\r\n                    </tr>\r\n                    }\r\n                    }\r\n                    <tr #anchor>\r\n                        <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n                            class=\"text-center text-muted py-3\">\r\n                            @if (isLoading()) {\r\n                            <span>Cargando m\u00E1s registros...</span>\r\n                            }\r\n                            @if (!isLoading() && dataVirtual().length >= 5000) {\r\n                            <span>No hay m\u00E1s registros</span>\r\n                            }\r\n                        </td>\r\n                    </tr>\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)}}\r\n                        </td>\r\n                        }\r\n                        }\r\n                    </tr>\r\n                </tfoot>\r\n                }\r\n            </table>\r\n        </div>\r\n    </div>\r\n\r\n</ng-template>\r\n", 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"] }]
         }], ctorParameters: () => [], propDecorators: { onResize: [{
                 type: HostListener,
                 args: ['window:resize', ['$event']]
@@ -4546,6 +4588,29 @@ class AlertConfirmationService {
     async mostrarModalConfirmacion(config) {
         return handleModalReturn(await this.open(config));
     }
+    async openSweetConfirm(config) {
+        const focus = config.focus ?? true;
+        const options = {
+            html: `
+            <div class="d-flex justify-content-center mb-3">
+                <i class="fas fa-exclamation-circle color-icon"></i>
+            </div>
+            ${config.texto}`,
+            icon: undefined,
+            showCancelButton: true,
+            confirmButtonText: config.confirmar ?? 'Aceptar',
+            cancelButtonText: config.cancelar ?? 'Cancelar',
+            buttonsStyling: false,
+            focusConfirm: focus,
+            focusCancel: !focus,
+            customClass: {
+                confirmButton: 'btn btn-info btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100',
+                cancelButton: 'btn btn-danger btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100'
+            }
+        };
+        const result = await Swal.fire(options);
+        return result.isConfirmed;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AlertConfirmationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AlertConfirmationService, providedIn: 'root' });
 }
@@ -5045,13 +5110,6 @@ function handleResourceV2(fn, signal) {
     });
 }
 
-var TABLE_EVENTS;
-(function (TABLE_EVENTS) {
-    TABLE_EVENTS[TABLE_EVENTS["CLICK"] = 1] = "CLICK";
-    TABLE_EVENTS[TABLE_EVENTS["DOUBLE_CLICK"] = 2] = "DOUBLE_CLICK";
-    TABLE_EVENTS[TABLE_EVENTS["RIGHT_CLICK"] = 3] = "RIGHT_CLICK";
-})(TABLE_EVENTS || (TABLE_EVENTS = {}));
-
 /*
  * Public API Surface of ng-components-tsi
  */