ng-components-tsi 0.0.39 → 0.0.40
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ng-components-tsi.mjs +6 -4
- package/fesm2022/ng-components-tsi.mjs.map +1 -1
- package/lib/modals/general/md-generico/md-generico.component.d.ts +4 -3
- package/lib/ui/forms/inputs/input/input.component.d.ts +4 -4
- package/lib/ui/forms/inputs/input-radio/input-radio.component.d.ts +1 -1
- package/lib/ui/forms/lists/list-option/list-option.component.d.ts +1 -1
- package/lib/ui/tables/paginador/paginador.component.d.ts +1 -1
- package/lib/ui/tables/table-advance/table-advance.component.d.ts +2 -1
- package/ng-components-tsi-0.0.40.tgz +0 -0
- package/package.json +1 -1
- package/ng-components-tsi-0.0.39.tgz +0 -0
|
@@ -2248,6 +2248,7 @@ class TableAdvanceComponent {
|
|
|
2248
2248
|
withCheckbox = input(false);
|
|
2249
2249
|
selectItems = model([]);
|
|
2250
2250
|
rowEvent = output();
|
|
2251
|
+
rowClassFn = input(null);
|
|
2251
2252
|
rowFilter = computed(() => {
|
|
2252
2253
|
const term = this.busqueda().toLowerCase();
|
|
2253
2254
|
const currentRows = this.rows?.() || [];
|
|
@@ -2567,11 +2568,11 @@ class TableAdvanceComponent {
|
|
|
2567
2568
|
return { usecase: 3, data: row };
|
|
2568
2569
|
}
|
|
2569
2570
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableAdvanceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2570
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TableAdvanceComponent, isStandalone: true, selector: "app-table-advance", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, withDetails: { classPropertyName: "withDetails", publicName: "withDetails", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null }, colorHeader: { classPropertyName: "colorHeader", publicName: "colorHeader", isSignal: true, isRequired: false, transformFunction: null }, isDarkMode: { classPropertyName: "isDarkMode", publicName: "isDarkMode", isSignal: true, isRequired: false, transformFunction: null }, selectedRow: { classPropertyName: "selectedRow", publicName: "selectedRow", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, withHeight: { classPropertyName: "withHeight", publicName: "withHeight", isSignal: true, isRequired: false, transformFunction: null }, rendered: { classPropertyName: "rendered", publicName: "rendered", isSignal: true, isRequired: false, transformFunction: null }, withTotal: { classPropertyName: "withTotal", publicName: "withTotal", isSignal: true, isRequired: false, transformFunction: null }, withCheckbox: { classPropertyName: "withCheckbox", publicName: "withCheckbox", isSignal: true, isRequired: false, transformFunction: null }, selectItems: { classPropertyName: "selectItems", publicName: "selectItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { emitirBusqueda: "emitirBusqueda", emitirCheck: "emitirCheck", emitirCheckCabecera: "emitirCheckCabecera", emitirRadio: "emitirRadio", emitirColumnasFiltrables: "emitirColumnasFiltrables", selectedRow: "selectedRowChange", selectItems: "selectItemsChange", rowEvent: "rowEvent" }, providers: [DatePipe, DecimalPipe], queries: [{ propertyName: "customActions", first: true, predicate: ["customActions"], descendants: true }], viewQueries: [{ propertyName: "tableHeaders", predicate: ["thElement"], descendants: true }], ngImport: i0, template: "@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center position-relative\">\r\n <label for=\"\" class=\"form-label me-2 pt-2\">Buscar</label>\r\n <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n <button (click)=\"togglePopoverFilter()\" class=\"btn btn-dark boton-buscar fs-7\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n @if (showPopoverFilter()) {\r\n <div class=\"popover-menu-filter shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7\">Filtros</div>\r\n <div class=\"form-check form-switch text-start\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"true\" (change)=\"toggleFiltros($event)\">\r\n <label class=\"form-check-label\">Todos</label>\r\n </div>\r\n @for (col of columns(); track col.caption) {\r\n <div class=\"form-check form-switch text-start\">\r\n <input type=\"checkbox\" class=\"form-check-input\" id=\"{{ 'filter_' + col.caption }}\"\r\n [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n <label class=\"form-check-label\" for=\"{{ 'filter_' + col.caption }}\">\r\n {{ col.caption }}\r\n </label>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n}\r\n\r\n<!---\r\n<div class=\"table-container table-responsive\" #tableContainer\r\n [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n (scroll)=\"onTableScroll($event)\">\r\n-->\r\n<div class=\"table-container table-responsive\"\r\n [style.height]=\"withHeight() && altoContenedor() ? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\">\r\n <div>\r\n <!-- [style.height]=\"virtualScrollService.getTotalHeight(itemHeight(), rowFilter().length)\" -->\r\n <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n <thead>\r\n <tr class=\"shadow-sm\">\r\n @if (withDetails()) {\r\n <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\"></th>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary\"\r\n [checked]=\"validaAllCheck()\" (change)=\"allCheck($event)\">\r\n </th>\r\n }\r\n\r\n @if (customActions) {\r\n <th class=\"cw-40 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n\r\n <app-dropdown-cdk>\r\n <ng-template #trigger>\r\n <button class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </ng-template>\r\n <ng-template #content>\r\n <div class=\"popover-menu-column bg-white shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">Columnas</div>\r\n @for (col of columns(); track col.caption) {\r\n @if (col.caption) {\r\n <div class=\"form-check form-switch text-start align-items-center d-flex\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{'switch_' + col.caption}}\"\r\n [(ngModel)]=\"visibilidadColumn()[col.caption]\" />\r\n <label class=\"form-check-label ps-1 fs-6 cursor-pointer font-label\"\r\n for=\"{{'switch_' + col.caption}}\">{{ col.caption }}</label>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n\r\n <!-- <button (click)=\"togglePopoverColumn()\" class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n @if (showPopoverColumn()) {\r\n <div class=\"popover-menu-column shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7\">Columnas</div>\r\n @for (col of columns(); track col.caption) {\r\n @if (col.caption) {\r\n <div class=\"form-check form-switch text-start\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{'switch_' + col.caption}}\" [(ngModel)]=\"visibilidadColumn()[col.caption]\" />\r\n <label class=\"form-check-label ps-1 fs-6 cursor-pointer font-label\"\r\n for=\"{{'switch_' + col.caption}}\">{{ col.caption }}</label>\r\n </div>\r\n }\r\n }\r\n </div>\r\n } -->\r\n </th>\r\n }\r\n @for (column of columns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n <th class=\"b-table\" #thElement [title]=\"column.caption\"\r\n [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n {{ column.caption }}\r\n @if(column.caption){\r\n @if (sortColumn == column.fieldname) {\r\n <span (click)=\"sortTable(column.fieldname)\" class=\"cursor-pointer\">\r\n <i [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n </span>\r\n }\r\n @if (sortColumn !== column.fieldname) {\r\n <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.fieldname)\"></i>\r\n }\r\n @if (column.tipoCaption === 'check-input') {\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 ms-2 border border-secondary\"\r\n [checked]=\"areAllChecked(column.fieldname)\"\r\n (change)=\"column.event ? toggleAllCheckboxes($event, column.fieldname, rowFilter()) : null\">\r\n }\r\n }\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n <!--\r\n <tbody\r\n [style.transform]=\"virtualScrollService.getTransform(visibleRange().start, itemHeight())\"\r\n [style.min-height]=\"itemHeight() * rowFilter().length + 'px'\">\r\n @for (row of visibleRows(); track $index) {\r\n <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier())), \r\n 'grilla-error': getSituacionNumberFromColumns(row, columns()) == 9}\"\r\n (click)=\"selectRow(identifier().length < 1 ? $index : row)\"\r\n [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n -->\r\n <tbody>\r\n @for (row of rowFilter(); track $index) {\r\n <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier())), \r\n 'grilla-error': getSituacionNumberFromColumns(row, columns()) == 9}\"\r\n (click)=\"selectRow(identifier().length < 1 ? $index : row); onClick(row)\"\r\n (dblclick)=\"onDoubleClick(row)\" (contextmenu)=\"onRightClick($event,row)\"\r\n [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n @if (withDetails()) {\r\n <td class=\"b-table text-center mwp-25\">\r\n <a (click)=\"toggleExpandRow($index)\" class=\"text-dark cursor-pointer fs-6\">\r\n <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows != $index\"\r\n [class.fa-chevron-down]=\"expandedRows == $index\"></i>\r\n </a>\r\n </td>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <td scope=\"col\" class=\"text-center b-table\">\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary my-0 py-0\"\r\n [checked]=\"isItemSelected($index)\" (change)=\"toogleItem($index, $event)\">\r\n </td>\r\n }\r\n\r\n @if (customActions) {\r\n <td class=\"text-center mwp-90 b-table\">\r\n <ng-container *ngTemplateOutlet=\"customActions; context: { $implicit: row }\"></ng-container>\r\n </td>\r\n }\r\n @for (column of columns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n\r\n @if (column.template) {\r\n <td class=\"b-table\">\r\n <ng-container *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\">\r\n </ng-container>\r\n </td>\r\n }\r\n @else {\r\n @switch (column.tipo) {\r\n @case ('fecha') {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname] | date:'dd/MM/yyyy', column.fieldname)\"\r\n [title]=\"row[column.fieldname] | date:'dd/MM/yyyy'\" [ngClass]=\"getRowClass(row)\"\r\n class=\"text-center b-table\">\r\n </td>\r\n }\r\n\r\n @case ('date') {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname] | date:'dd/MM/yyyy', column.fieldname)\"\r\n [title]=\"row[column.fieldname] | date:'dd/MM/yyyy'\" [ngClass]=\"getRowClass(row)\"\r\n class=\"text-center b-table\">\r\n </td>\r\n }\r\n\r\n @case ('situacion') {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname], column.fieldname)\"\r\n [title]=\"row[column.fieldname]\" [ngClass]=\"getRowClass(row)\" class=\"b-table\">\r\n </td>\r\n }\r\n\r\n @case ('decimal') {\r\n <td class=\"text-end b-table\"\r\n [innerHTML]=\"getHighlight((row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2), column.fieldname)\"\r\n [title]=\"(row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2)\"\r\n [ngClass]=\"getRowClass(row)\">\r\n </td>\r\n }\r\n\r\n @case ('number') {\r\n <td class=\"text-end b-table\"\r\n [innerHTML]=\"getHighlight((row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2), column.fieldname)\"\r\n [title]=\"(row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2)\"\r\n [ngClass]=\"getRowClass(row)\">\r\n </td>\r\n }\r\n\r\n @case ('text-center') {\r\n <td class=\"text-center b-table\" [innerHTML]=\"getHighlight(row[column.fieldname], column.fieldname)\"\r\n [title]=\"row[column.fieldname]\" [ngClass]=\"getRowClass(row)\">\r\n </td>\r\n }\r\n\r\n @case ('check') {\r\n <td class=\"text-center b-table\" [title]=\"checkString[row[column.fieldname]]\">\r\n <i class=\"fs-5\"\r\n [ngClass]=\"row[column.fieldname] == 'S'?'fas fa-check yes-icon':'fas fa-times no-icon'\"></i>\r\n </td>\r\n }\r\n\r\n @case ('check-input') {\r\n <td class=\"text-center b-table\">\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary\"\r\n [checked]=\"row[column.fieldname] == 1 || row[column.fieldname] == 'S'\"\r\n (change)=\"column.event ? clickCheck(column.fieldname,$event,row) : null\">\r\n </td>\r\n }\r\n\r\n @case ('radio-input') {\r\n <td class=\"text-center b-table\">\r\n @if (!column.condition || column.condition(row)) {\r\n <input type=\"radio\" class=\"form-check-input fs-8 mtn-0 border border-secondary\"\r\n name=\"radioGroup\" (change)=\"column.event ? clickRadio(row) : null\">\r\n }\r\n </td>\r\n }\r\n\r\n @case ('mostrar') {\r\n @if (column.condition()) {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname], column.fieldname)\"\r\n [title]=\"row[column.fieldname]\" class=\"b-table\">\r\n </td>\r\n }\r\n }\r\n\r\n @case ('cell-render') {\r\n @let resolverItem = resolveCell(column.fieldname, row);\r\n @if (resolverItem) {\r\n <td class=\"b-table\" [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n @if (resolverItem.icon) {\r\n <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n } @else if (resolverItem.class) {\r\n <span [ngClass]=\"row.situac == 'J' ? 'text-error' : resolverItem.class\">\r\n {{ resolverItem.text }}\r\n </span>\r\n } @else {\r\n {{ resolverItem.text }}\r\n }\r\n </td>\r\n }\r\n }\r\n\r\n @default {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname], column.fieldname)\"\r\n [title]=\"row[column.fieldname]\" [ngClass]=\"getRowClass(row)\" class=\"b-table\">\r\n </td>\r\n }\r\n }\r\n }\r\n }\r\n }\r\n </tr>\r\n @if ($index == expandedRows) {\r\n <tr @fadeInOut>\r\n <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions ? 1 : 0)\"\r\n class=\"table-blank\">\r\n <div class=\"d-flex flex-column auditoria\">\r\n <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Creaci\u00F3n: {{ row.nomucreac }} el {{ row.fcreac | date:'dd/MM/yyyy' }} a las {{\r\n row.hcreac }}\r\n </span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Actualizaci\u00F3n: {{ row.nomuactua }} el {{ row.factua | date:'dd/MM/yyyy' }} a las {{\r\n row.hactua }}\r\n </span>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n\r\n @if (withTotal()) {\r\n <tfoot>\r\n <tr>\r\n @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] });
|
|
2571
|
+
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] });
|
|
2571
2572
|
}
|
|
2572
2573
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableAdvanceComponent, decorators: [{
|
|
2573
2574
|
type: Component,
|
|
2574
|
-
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]=\"getRowClass(row)\"\r\n class=\"text-center b-table\">\r\n </td>\r\n }\r\n\r\n @case ('date') {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname] | date:'dd/MM/yyyy', column.fieldname)\"\r\n [title]=\"row[column.fieldname] | date:'dd/MM/yyyy'\" [ngClass]=\"getRowClass(row)\"\r\n class=\"text-center b-table\">\r\n </td>\r\n }\r\n\r\n @case ('situacion') {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname], column.fieldname)\"\r\n [title]=\"row[column.fieldname]\" [ngClass]=\"getRowClass(row)\" class=\"b-table\">\r\n </td>\r\n }\r\n\r\n @case ('decimal') {\r\n <td class=\"text-end b-table\"\r\n [innerHTML]=\"getHighlight((row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2), column.fieldname)\"\r\n [title]=\"(row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2)\"\r\n [ngClass]=\"getRowClass(row)\">\r\n </td>\r\n }\r\n\r\n @case ('number') {\r\n <td class=\"text-end b-table\"\r\n [innerHTML]=\"getHighlight((row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2), column.fieldname)\"\r\n [title]=\"(row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2)\"\r\n [ngClass]=\"getRowClass(row)\">\r\n </td>\r\n }\r\n\r\n @case ('text-center') {\r\n <td class=\"text-center b-table\" [innerHTML]=\"getHighlight(row[column.fieldname], column.fieldname)\"\r\n [title]=\"row[column.fieldname]\" [ngClass]=\"getRowClass(row)\">\r\n </td>\r\n }\r\n\r\n @case ('check') {\r\n <td class=\"text-center b-table\" [title]=\"checkString[row[column.fieldname]]\">\r\n <i class=\"fs-5\"\r\n [ngClass]=\"row[column.fieldname] == 'S'?'fas fa-check yes-icon':'fas fa-times no-icon'\"></i>\r\n </td>\r\n }\r\n\r\n @case ('check-input') {\r\n <td class=\"text-center b-table\">\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary\"\r\n [checked]=\"row[column.fieldname] == 1 || row[column.fieldname] == 'S'\"\r\n (change)=\"column.event ? clickCheck(column.fieldname,$event,row) : null\">\r\n </td>\r\n }\r\n\r\n @case ('radio-input') {\r\n <td class=\"text-center b-table\">\r\n @if (!column.condition || column.condition(row)) {\r\n <input type=\"radio\" class=\"form-check-input fs-8 mtn-0 border border-secondary\"\r\n name=\"radioGroup\" (change)=\"column.event ? clickRadio(row) : null\">\r\n }\r\n </td>\r\n }\r\n\r\n @case ('mostrar') {\r\n @if (column.condition()) {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname], column.fieldname)\"\r\n [title]=\"row[column.fieldname]\" class=\"b-table\">\r\n </td>\r\n }\r\n }\r\n\r\n @case ('cell-render') {\r\n @let resolverItem = resolveCell(column.fieldname, row);\r\n @if (resolverItem) {\r\n <td class=\"b-table\" [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n @if (resolverItem.icon) {\r\n <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n } @else if (resolverItem.class) {\r\n <span [ngClass]=\"row.situac == 'J' ? 'text-error' : resolverItem.class\">\r\n {{ resolverItem.text }}\r\n </span>\r\n } @else {\r\n {{ resolverItem.text }}\r\n }\r\n </td>\r\n }\r\n }\r\n\r\n @default {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname], column.fieldname)\"\r\n [title]=\"row[column.fieldname]\" [ngClass]=\"getRowClass(row)\" class=\"b-table\">\r\n </td>\r\n }\r\n }\r\n }\r\n }\r\n }\r\n </tr>\r\n @if ($index == expandedRows) {\r\n <tr @fadeInOut>\r\n <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions ? 1 : 0)\"\r\n class=\"table-blank\">\r\n <div class=\"d-flex flex-column auditoria\">\r\n <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Creaci\u00F3n: {{ row.nomucreac }} el {{ row.fcreac | date:'dd/MM/yyyy' }} a las {{\r\n row.hcreac }}\r\n </span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Actualizaci\u00F3n: {{ row.nomuactua }} el {{ row.factua | date:'dd/MM/yyyy' }} a las {{\r\n row.hactua }}\r\n </span>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n\r\n @if (withTotal()) {\r\n <tfoot>\r\n <tr>\r\n @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"] }]
|
|
2575
|
+
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"] }]
|
|
2575
2576
|
}], ctorParameters: () => [], propDecorators: { tableHeaders: [{
|
|
2576
2577
|
type: ViewChildren,
|
|
2577
2578
|
args: ['thElement']
|
|
@@ -4232,6 +4233,7 @@ class MdGenericoComponent {
|
|
|
4232
4233
|
dataFiltro = input(false);
|
|
4233
4234
|
emitirFiltro = output();
|
|
4234
4235
|
isModal = input(true);
|
|
4236
|
+
acceptDisabled = input(false);
|
|
4235
4237
|
validaCierre = input(false); // SI VALIDA CIERRE ES TRUE, ENTONCES SOLO SE EMITE LA ACCION, PERO NO CIERRA EN AUTOMATICO
|
|
4236
4238
|
cerrarModal() {
|
|
4237
4239
|
if (this.validaCierre()) {
|
|
@@ -4241,11 +4243,11 @@ class MdGenericoComponent {
|
|
|
4241
4243
|
this.modalService.dismiss();
|
|
4242
4244
|
}
|
|
4243
4245
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MdGenericoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4244
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: MdGenericoComponent, isStandalone: true, selector: "app-md-generico", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, showAlerta: { classPropertyName: "showAlerta", publicName: "showAlerta", isSignal: true, isRequired: false, transformFunction: null }, textAlerta: { classPropertyName: "textAlerta", publicName: "textAlerta", isSignal: true, isRequired: false, transformFunction: null }, sizeTitle: { classPropertyName: "sizeTitle", publicName: "sizeTitle", isSignal: true, isRequired: false, transformFunction: null }, showFiltro: { classPropertyName: "showFiltro", publicName: "showFiltro", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, dataFiltro: { classPropertyName: "dataFiltro", publicName: "dataFiltro", isSignal: true, isRequired: false, transformFunction: null }, isModal: { classPropertyName: "isModal", publicName: "isModal", isSignal: true, isRequired: false, transformFunction: null }, validaCierre: { classPropertyName: "validaCierre", publicName: "validaCierre", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { continuar: "continuar", continuar2: "continuar2", cerrar: "cerrar", withFiltro: "withFiltroChange", emitirFiltro: "emitirFiltro" }, queries: [{ propertyName: "content", first: true, predicate: ["body"], descendants: true, isSignal: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"modal-header py-2\">\r\n <div class=\"w-100\">\r\n <app-header [isModal]=\"isModal()\" (cerrarModal)=\"cerrarModal()\" [tamanio]=\"sizeTitle()\" [showAlerta]=\"showAlerta()\"\r\n [textAlerta]=\"textAlerta()\" [title]=\"title()\" [showFiltro]=\"showFiltro()\" [hasData]=\"dataFiltro()\"\r\n [(withFiltro)]=\"withFiltro\" />\r\n </div>\r\n</div>\r\n\r\n<div class=\"modal-body\" [ngClass]=\"{ 'max-height': scrollable() }\">\r\n <ng-container *ngTemplateOutlet=\"content();\"></ng-container>\r\n</div>\r\n\r\n@if( type() != 'APROB'){\r\n<div class=\"modal-footer\">\r\n @if (footer()) {\r\n <ng-container *ngTemplateOutlet=\"footer();\"></ng-container>\r\n }\r\n @if (type() == '1') {\r\n <app-button icon=\"adelante\" texto=\"Continuar\" color=\"verde\" (accion)=\"continuar.emit()\" />\r\n }\r\n @if (type() == '2') {\r\n <app-button icon=\"guardar\" texto=\"Guardar\" color=\"azul\" (accion)=\"continuar.emit()\" />\r\n }\r\n @if (type() == '3') {\r\n <app-button icon=\"imprimir\" texto=\"Imprimir\" color=\"gris\" (accion)=\"continuar.emit()\" />\r\n }\r\n @if( type() == '4'){\r\n <app-button icon=\"agregar\" texto=\"Adicionar\" color=\"verde\" (accion)=\"continuar.emit()\" />\r\n }\r\n @if( type() == '6'){\r\n <app-button icon=\"check\" texto=\"Actualizar\" color=\"azul\" (accion)=\"continuar.emit()\" />\r\n }\r\n @if( type() != '5'){\r\n <app-button icon=\"cancelar\" texto=\"Cancelar\" color=\"amarillo\" (accion)=\"cerrarModal()\" />\r\n }\r\n</div>\r\n}\r\n\r\n@if( type() == 'APROB'){\r\n<div class=\"modal-footer d-flex justify-content-center\">\r\n <app-button icon=\"aprobar\" texto=\"Aprobar\" color=\"verde\" (accion)=\"continuar.emit()\" />\r\n <app-button icon=\"desaprobar\" texto=\"Desaprobar\" color=\"rojo\" (accion)=\"continuar2.emit()\" />\r\n</div>\r\n}", styles: [".max-height{max-height:calc(100dvh - 210px);overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HeaderComponent, selector: "app-header", inputs: ["title", "tamanio", "showFiltro", "withFiltro", "hasData", "isModal", "showAlerta", "textAlerta", "validateSalto"], outputs: ["withFiltroChange", "cerrarModal"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["autoFocus", "color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isRounded", "isNotStyle"], outputs: ["accion", "fileSelected"] }] });
|
|
4246
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: MdGenericoComponent, isStandalone: true, selector: "app-md-generico", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, showAlerta: { classPropertyName: "showAlerta", publicName: "showAlerta", isSignal: true, isRequired: false, transformFunction: null }, textAlerta: { classPropertyName: "textAlerta", publicName: "textAlerta", isSignal: true, isRequired: false, transformFunction: null }, sizeTitle: { classPropertyName: "sizeTitle", publicName: "sizeTitle", isSignal: true, isRequired: false, transformFunction: null }, showFiltro: { classPropertyName: "showFiltro", publicName: "showFiltro", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, dataFiltro: { classPropertyName: "dataFiltro", publicName: "dataFiltro", isSignal: true, isRequired: false, transformFunction: null }, isModal: { classPropertyName: "isModal", publicName: "isModal", isSignal: true, isRequired: false, transformFunction: null }, acceptDisabled: { classPropertyName: "acceptDisabled", publicName: "acceptDisabled", isSignal: true, isRequired: false, transformFunction: null }, validaCierre: { classPropertyName: "validaCierre", publicName: "validaCierre", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { continuar: "continuar", continuar2: "continuar2", cerrar: "cerrar", withFiltro: "withFiltroChange", emitirFiltro: "emitirFiltro" }, queries: [{ propertyName: "content", first: true, predicate: ["body"], descendants: true, isSignal: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"modal-header py-2\">\r\n <div class=\"w-100\">\r\n <app-header [isModal]=\"isModal()\" (cerrarModal)=\"cerrarModal()\" [tamanio]=\"sizeTitle()\" [showAlerta]=\"showAlerta()\"\r\n [textAlerta]=\"textAlerta()\" [title]=\"title()\" [showFiltro]=\"showFiltro()\" [hasData]=\"dataFiltro()\"\r\n [(withFiltro)]=\"withFiltro\" />\r\n </div>\r\n</div>\r\n\r\n<div class=\"modal-body\" [ngClass]=\"{ 'max-height': scrollable() }\">\r\n <ng-container *ngTemplateOutlet=\"content();\"></ng-container>\r\n</div>\r\n\r\n@if( type() != 'APROB'){\r\n<div class=\"modal-footer\">\r\n @if (footer()) {\r\n <ng-container *ngTemplateOutlet=\"footer();\"></ng-container>\r\n }\r\n @if (type() == '1') {\r\n <app-button icon=\"adelante\" texto=\"Continuar\" color=\"verde\" (accion)=\"continuar.emit()\" [disabled]=\"acceptDisabled()\" />\r\n }\r\n @if (type() == '2') {\r\n <app-button icon=\"guardar\" texto=\"Guardar\" color=\"azul\" (accion)=\"continuar.emit()\" [disabled]=\"acceptDisabled()\" />\r\n }\r\n @if (type() == '3') {\r\n <app-button icon=\"imprimir\" texto=\"Imprimir\" color=\"gris\" (accion)=\"continuar.emit()\" [disabled]=\"acceptDisabled()\" />\r\n }\r\n @if( type() == '4'){\r\n <app-button icon=\"agregar\" texto=\"Adicionar\" color=\"verde\" (accion)=\"continuar.emit()\" [disabled]=\"acceptDisabled()\" />\r\n }\r\n @if( type() == '6'){\r\n <app-button icon=\"check\" texto=\"Actualizar\" color=\"azul\" (accion)=\"continuar.emit()\" [disabled]=\"acceptDisabled()\" />\r\n }\r\n @if( type() != '5'){\r\n <app-button icon=\"cancelar\" texto=\"Cancelar\" color=\"amarillo\" (accion)=\"cerrarModal()\" />\r\n }\r\n</div>\r\n}\r\n\r\n@if( type() == 'APROB'){\r\n<div class=\"modal-footer d-flex justify-content-center\">\r\n <app-button icon=\"aprobar\" texto=\"Aprobar\" color=\"verde\" (accion)=\"continuar.emit()\" />\r\n <app-button icon=\"desaprobar\" texto=\"Desaprobar\" color=\"rojo\" (accion)=\"continuar2.emit()\" />\r\n</div>\r\n}", styles: [".max-height{max-height:calc(100dvh - 210px);overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HeaderComponent, selector: "app-header", inputs: ["title", "tamanio", "showFiltro", "withFiltro", "hasData", "isModal", "showAlerta", "textAlerta", "validateSalto"], outputs: ["withFiltroChange", "cerrarModal"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["autoFocus", "color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isRounded", "isNotStyle"], outputs: ["accion", "fileSelected"] }] });
|
|
4245
4247
|
}
|
|
4246
4248
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MdGenericoComponent, decorators: [{
|
|
4247
4249
|
type: Component,
|
|
4248
|
-
args: [{ selector: 'app-md-generico', imports: [NgClass, NgTemplateOutlet, HeaderComponent, ButtonComponent], template: "<div class=\"modal-header py-2\">\r\n <div class=\"w-100\">\r\n <app-header [isModal]=\"isModal()\" (cerrarModal)=\"cerrarModal()\" [tamanio]=\"sizeTitle()\" [showAlerta]=\"showAlerta()\"\r\n [textAlerta]=\"textAlerta()\" [title]=\"title()\" [showFiltro]=\"showFiltro()\" [hasData]=\"dataFiltro()\"\r\n [(withFiltro)]=\"withFiltro\" />\r\n </div>\r\n</div>\r\n\r\n<div class=\"modal-body\" [ngClass]=\"{ 'max-height': scrollable() }\">\r\n <ng-container *ngTemplateOutlet=\"content();\"></ng-container>\r\n</div>\r\n\r\n@if( type() != 'APROB'){\r\n<div class=\"modal-footer\">\r\n @if (footer()) {\r\n <ng-container *ngTemplateOutlet=\"footer();\"></ng-container>\r\n }\r\n @if (type() == '1') {\r\n <app-button icon=\"adelante\" texto=\"Continuar\" color=\"verde\" (accion)=\"continuar.emit()\" />\r\n }\r\n @if (type() == '2') {\r\n <app-button icon=\"guardar\" texto=\"Guardar\" color=\"azul\" (accion)=\"continuar.emit()\" />\r\n }\r\n @if (type() == '3') {\r\n <app-button icon=\"imprimir\" texto=\"Imprimir\" color=\"gris\" (accion)=\"continuar.emit()\" />\r\n }\r\n @if( type() == '4'){\r\n <app-button icon=\"agregar\" texto=\"Adicionar\" color=\"verde\" (accion)=\"continuar.emit()\" />\r\n }\r\n @if( type() == '6'){\r\n <app-button icon=\"check\" texto=\"Actualizar\" color=\"azul\" (accion)=\"continuar.emit()\" />\r\n }\r\n @if( type() != '5'){\r\n <app-button icon=\"cancelar\" texto=\"Cancelar\" color=\"amarillo\" (accion)=\"cerrarModal()\" />\r\n }\r\n</div>\r\n}\r\n\r\n@if( type() == 'APROB'){\r\n<div class=\"modal-footer d-flex justify-content-center\">\r\n <app-button icon=\"aprobar\" texto=\"Aprobar\" color=\"verde\" (accion)=\"continuar.emit()\" />\r\n <app-button icon=\"desaprobar\" texto=\"Desaprobar\" color=\"rojo\" (accion)=\"continuar2.emit()\" />\r\n</div>\r\n}", styles: [".max-height{max-height:calc(100dvh - 210px);overflow-y:auto}\n"] }]
|
|
4250
|
+
args: [{ selector: 'app-md-generico', imports: [NgClass, NgTemplateOutlet, HeaderComponent, ButtonComponent], template: "<div class=\"modal-header py-2\">\r\n <div class=\"w-100\">\r\n <app-header [isModal]=\"isModal()\" (cerrarModal)=\"cerrarModal()\" [tamanio]=\"sizeTitle()\" [showAlerta]=\"showAlerta()\"\r\n [textAlerta]=\"textAlerta()\" [title]=\"title()\" [showFiltro]=\"showFiltro()\" [hasData]=\"dataFiltro()\"\r\n [(withFiltro)]=\"withFiltro\" />\r\n </div>\r\n</div>\r\n\r\n<div class=\"modal-body\" [ngClass]=\"{ 'max-height': scrollable() }\">\r\n <ng-container *ngTemplateOutlet=\"content();\"></ng-container>\r\n</div>\r\n\r\n@if( type() != 'APROB'){\r\n<div class=\"modal-footer\">\r\n @if (footer()) {\r\n <ng-container *ngTemplateOutlet=\"footer();\"></ng-container>\r\n }\r\n @if (type() == '1') {\r\n <app-button icon=\"adelante\" texto=\"Continuar\" color=\"verde\" (accion)=\"continuar.emit()\" [disabled]=\"acceptDisabled()\" />\r\n }\r\n @if (type() == '2') {\r\n <app-button icon=\"guardar\" texto=\"Guardar\" color=\"azul\" (accion)=\"continuar.emit()\" [disabled]=\"acceptDisabled()\" />\r\n }\r\n @if (type() == '3') {\r\n <app-button icon=\"imprimir\" texto=\"Imprimir\" color=\"gris\" (accion)=\"continuar.emit()\" [disabled]=\"acceptDisabled()\" />\r\n }\r\n @if( type() == '4'){\r\n <app-button icon=\"agregar\" texto=\"Adicionar\" color=\"verde\" (accion)=\"continuar.emit()\" [disabled]=\"acceptDisabled()\" />\r\n }\r\n @if( type() == '6'){\r\n <app-button icon=\"check\" texto=\"Actualizar\" color=\"azul\" (accion)=\"continuar.emit()\" [disabled]=\"acceptDisabled()\" />\r\n }\r\n @if( type() != '5'){\r\n <app-button icon=\"cancelar\" texto=\"Cancelar\" color=\"amarillo\" (accion)=\"cerrarModal()\" />\r\n }\r\n</div>\r\n}\r\n\r\n@if( type() == 'APROB'){\r\n<div class=\"modal-footer d-flex justify-content-center\">\r\n <app-button icon=\"aprobar\" texto=\"Aprobar\" color=\"verde\" (accion)=\"continuar.emit()\" />\r\n <app-button icon=\"desaprobar\" texto=\"Desaprobar\" color=\"rojo\" (accion)=\"continuar2.emit()\" />\r\n</div>\r\n}", styles: [".max-height{max-height:calc(100dvh - 210px);overflow-y:auto}\n"] }]
|
|
4249
4251
|
}] });
|
|
4250
4252
|
|
|
4251
4253
|
class AlertService {
|