ng-components-tsi 0.0.41 → 0.0.43
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 +68 -33
- package/fesm2022/ng-components-tsi.mjs.map +1 -1
- package/lib/directivas/inputs/only-number.directive.d.ts +1 -0
- package/lib/enums/table-events.d.ts +3 -1
- package/lib/modals/general/md-generico/md-generico.component.d.ts +2 -2
- 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-ultimate/table-ultimate.component.d.ts +4 -1
- package/package.json +2 -2
- package/ng-components-tsi-0.0.41.tgz +0 -0
|
@@ -1101,36 +1101,42 @@ class OnlyNumberDirective {
|
|
|
1101
1101
|
elementRef = inject(ElementRef);
|
|
1102
1102
|
onKeyPress(event) {
|
|
1103
1103
|
const inputChar = event.key;
|
|
1104
|
-
if (
|
|
1104
|
+
if (inputChar.length > 1 || event.ctrlKey || event.metaKey)
|
|
1105
1105
|
return;
|
|
1106
|
-
|
|
1107
|
-
const currentValue = input.value;
|
|
1108
|
-
const start = input.selectionStart ?? currentValue.length;
|
|
1109
|
-
const end = input.selectionEnd ?? currentValue.length;
|
|
1110
|
-
const proposed = currentValue.substring(0, start) +
|
|
1111
|
-
inputChar +
|
|
1112
|
-
currentValue.substring(end);
|
|
1113
|
-
const regex = /^-?\d*\.?\d*$/;
|
|
1114
|
-
if (!regex.test(proposed)) {
|
|
1106
|
+
if (!/^\d$/.test(inputChar)) {
|
|
1115
1107
|
event.preventDefault();
|
|
1116
1108
|
}
|
|
1117
1109
|
}
|
|
1118
1110
|
onPaste(event) {
|
|
1111
|
+
event.preventDefault();
|
|
1119
1112
|
const pasted = event.clipboardData?.getData('text') || '';
|
|
1113
|
+
const cleaned = pasted.replace(/\D/g, '');
|
|
1120
1114
|
const input = this.elementRef.nativeElement;
|
|
1121
1115
|
const currentValue = input.value;
|
|
1122
1116
|
const start = input.selectionStart ?? currentValue.length;
|
|
1123
1117
|
const end = input.selectionEnd ?? currentValue.length;
|
|
1124
|
-
const
|
|
1125
|
-
|
|
1118
|
+
const maxLength = input.maxLength;
|
|
1119
|
+
let proposed = currentValue.substring(0, start) +
|
|
1120
|
+
cleaned +
|
|
1126
1121
|
currentValue.substring(end);
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1122
|
+
if (maxLength > 0) {
|
|
1123
|
+
proposed = proposed.substring(0, maxLength);
|
|
1124
|
+
}
|
|
1125
|
+
input.value = proposed;
|
|
1126
|
+
const cursorPosition = Math.min(start + cleaned.length, proposed.length);
|
|
1127
|
+
input.setSelectionRange(cursorPosition, cursorPosition);
|
|
1128
|
+
input.dispatchEvent(new Event('input'));
|
|
1129
|
+
}
|
|
1130
|
+
onInput() {
|
|
1131
|
+
const input = this.elementRef.nativeElement;
|
|
1132
|
+
const cleaned = input.value.replace(/\D/g, '');
|
|
1133
|
+
if (input.value != cleaned) {
|
|
1134
|
+
input.value = cleaned;
|
|
1135
|
+
input.dispatchEvent(new Event('input'));
|
|
1130
1136
|
}
|
|
1131
1137
|
}
|
|
1132
1138
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OnlyNumberDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1133
|
-
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 });
|
|
1139
|
+
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 });
|
|
1134
1140
|
}
|
|
1135
1141
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OnlyNumberDirective, decorators: [{
|
|
1136
1142
|
type: Directive,
|
|
@@ -1143,6 +1149,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
1143
1149
|
}], onPaste: [{
|
|
1144
1150
|
type: HostListener,
|
|
1145
1151
|
args: ['paste', ['$event']]
|
|
1152
|
+
}], onInput: [{
|
|
1153
|
+
type: HostListener,
|
|
1154
|
+
args: ['input']
|
|
1146
1155
|
}] } });
|
|
1147
1156
|
|
|
1148
1157
|
class OnlyDayDirective {
|
|
@@ -1254,17 +1263,20 @@ class OnlyNumberFlexDirective {
|
|
|
1254
1263
|
}
|
|
1255
1264
|
}
|
|
1256
1265
|
onPaste(event) {
|
|
1266
|
+
event.preventDefault();
|
|
1257
1267
|
const pasted = event.clipboardData?.getData('text') || '';
|
|
1268
|
+
const cleaned = pasted.replace(/[^\d.,-]/g, '');
|
|
1258
1269
|
const input = this.elementRef.nativeElement;
|
|
1259
1270
|
const currentValue = input.value;
|
|
1260
1271
|
const start = input.selectionStart ?? currentValue.length;
|
|
1261
1272
|
const end = input.selectionEnd ?? currentValue.length;
|
|
1262
1273
|
const proposed = currentValue.substring(0, start) +
|
|
1263
|
-
|
|
1274
|
+
cleaned +
|
|
1264
1275
|
currentValue.substring(end);
|
|
1265
|
-
|
|
1266
|
-
|
|
1267
|
-
|
|
1276
|
+
input.value = proposed;
|
|
1277
|
+
const cursorPosition = start + cleaned.length;
|
|
1278
|
+
input.setSelectionRange(cursorPosition, cursorPosition);
|
|
1279
|
+
input.dispatchEvent(new Event('input'));
|
|
1268
1280
|
}
|
|
1269
1281
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OnlyNumberFlexDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1270
1282
|
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 });
|
|
@@ -3508,6 +3520,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
3508
3520
|
}]
|
|
3509
3521
|
}] });
|
|
3510
3522
|
|
|
3523
|
+
var TABLE_EVENTS;
|
|
3524
|
+
(function (TABLE_EVENTS) {
|
|
3525
|
+
TABLE_EVENTS[TABLE_EVENTS["CLICK"] = 1] = "CLICK";
|
|
3526
|
+
TABLE_EVENTS[TABLE_EVENTS["DOUBLE_CLICK"] = 2] = "DOUBLE_CLICK";
|
|
3527
|
+
TABLE_EVENTS[TABLE_EVENTS["RIGHT_CLICK"] = 3] = "RIGHT_CLICK";
|
|
3528
|
+
TABLE_EVENTS[TABLE_EVENTS["CHECK_ALL"] = 4] = "CHECK_ALL";
|
|
3529
|
+
TABLE_EVENTS[TABLE_EVENTS["CHECK_ROW"] = 5] = "CHECK_ROW";
|
|
3530
|
+
})(TABLE_EVENTS || (TABLE_EVENTS = {}));
|
|
3531
|
+
|
|
3511
3532
|
class TableUltimateComponent {
|
|
3512
3533
|
tableHeaders = viewChild('thElement');
|
|
3513
3534
|
customActions = contentChild('customActions');
|
|
@@ -3547,6 +3568,7 @@ class TableUltimateComponent {
|
|
|
3547
3568
|
rowDisabledFn = input(null);
|
|
3548
3569
|
rowEvent = output();
|
|
3549
3570
|
rowFormat = computed(() => this.formateador.procesarLista(this.rows(), this.columns()));
|
|
3571
|
+
selectAllOnLoad = input(false);
|
|
3550
3572
|
rowFilter = linkedSignal(() => {
|
|
3551
3573
|
const term = this.busqueda().toLowerCase();
|
|
3552
3574
|
const currentRows = this.rowFormat?.() || [];
|
|
@@ -3586,6 +3608,7 @@ class TableUltimateComponent {
|
|
|
3586
3608
|
return result;
|
|
3587
3609
|
}
|
|
3588
3610
|
isMobile = signal(window.innerWidth <= 768);
|
|
3611
|
+
initialized = false; // BANDERA PARA SOLO UNA CARGA INICIAL
|
|
3589
3612
|
constructor() {
|
|
3590
3613
|
effect(() => {
|
|
3591
3614
|
const size = (this.rowFilter() ?? []).length;
|
|
@@ -3619,6 +3642,18 @@ class TableUltimateComponent {
|
|
|
3619
3642
|
this.actionsAnchor();
|
|
3620
3643
|
}
|
|
3621
3644
|
});
|
|
3645
|
+
effect(() => {
|
|
3646
|
+
const rows = this.rowFilter();
|
|
3647
|
+
const shouldSelectAll = this.selectAllOnLoad();
|
|
3648
|
+
if (!rows?.length)
|
|
3649
|
+
return;
|
|
3650
|
+
if (!shouldSelectAll)
|
|
3651
|
+
return;
|
|
3652
|
+
if (this.initialized)
|
|
3653
|
+
return;
|
|
3654
|
+
this.initialized = true;
|
|
3655
|
+
this.checkAll(true);
|
|
3656
|
+
});
|
|
3622
3657
|
}
|
|
3623
3658
|
onResize(event) {
|
|
3624
3659
|
if (!this.activeMobileMode())
|
|
@@ -3731,7 +3766,12 @@ class TableUltimateComponent {
|
|
|
3731
3766
|
}
|
|
3732
3767
|
allCheck(event) {
|
|
3733
3768
|
const input = event.target;
|
|
3734
|
-
|
|
3769
|
+
const checked = input.checked;
|
|
3770
|
+
this.rowEvent.emit({ usecase: TABLE_EVENTS.CHECK_ALL, data: checked });
|
|
3771
|
+
this.checkAll(checked);
|
|
3772
|
+
}
|
|
3773
|
+
checkAll(checked) {
|
|
3774
|
+
if (checked) {
|
|
3735
3775
|
const total = this.rowFilter()
|
|
3736
3776
|
.filter(r => !this.isCheckboxDisabled(r))
|
|
3737
3777
|
.map(r => ({ id: r.idListTsi, data: r }));
|
|
@@ -3755,7 +3795,9 @@ class TableUltimateComponent {
|
|
|
3755
3795
|
return;
|
|
3756
3796
|
}
|
|
3757
3797
|
const input = event.target;
|
|
3758
|
-
|
|
3798
|
+
const checked = input.checked;
|
|
3799
|
+
this.rowEvent.emit({ usecase: TABLE_EVENTS.CHECK_ROW, data: { row, checked } });
|
|
3800
|
+
if (checked) {
|
|
3759
3801
|
const item = { id: idList, data: row };
|
|
3760
3802
|
this.selectItems.update(sel => [...sel, item]);
|
|
3761
3803
|
return;
|
|
@@ -3812,17 +3854,17 @@ class TableUltimateComponent {
|
|
|
3812
3854
|
}, 100);
|
|
3813
3855
|
}
|
|
3814
3856
|
onClick(row) {
|
|
3815
|
-
this.rowEvent.emit({ usecase:
|
|
3857
|
+
this.rowEvent.emit({ usecase: TABLE_EVENTS.CLICK, data: row });
|
|
3816
3858
|
}
|
|
3817
3859
|
onDoubleClick(row) {
|
|
3818
|
-
this.rowEvent.emit({ usecase:
|
|
3860
|
+
this.rowEvent.emit({ usecase: TABLE_EVENTS.DOUBLE_CLICK, data: row });
|
|
3819
3861
|
}
|
|
3820
3862
|
onRightClick(event, row) {
|
|
3821
3863
|
event.preventDefault();
|
|
3822
|
-
this.rowEvent.emit({ usecase:
|
|
3864
|
+
this.rowEvent.emit({ usecase: TABLE_EVENTS.RIGHT_CLICK, data: row });
|
|
3823
3865
|
}
|
|
3824
3866
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableUltimateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3825
|
-
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] });
|
|
3867
|
+
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)\" (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] });
|
|
3826
3868
|
}
|
|
3827
3869
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableUltimateComponent, decorators: [{
|
|
3828
3870
|
type: Component,
|
|
@@ -5045,13 +5087,6 @@ function handleResourceV2(fn, signal) {
|
|
|
5045
5087
|
});
|
|
5046
5088
|
}
|
|
5047
5089
|
|
|
5048
|
-
var TABLE_EVENTS;
|
|
5049
|
-
(function (TABLE_EVENTS) {
|
|
5050
|
-
TABLE_EVENTS[TABLE_EVENTS["CLICK"] = 1] = "CLICK";
|
|
5051
|
-
TABLE_EVENTS[TABLE_EVENTS["DOUBLE_CLICK"] = 2] = "DOUBLE_CLICK";
|
|
5052
|
-
TABLE_EVENTS[TABLE_EVENTS["RIGHT_CLICK"] = 3] = "RIGHT_CLICK";
|
|
5053
|
-
})(TABLE_EVENTS || (TABLE_EVENTS = {}));
|
|
5054
|
-
|
|
5055
5090
|
/*
|
|
5056
5091
|
* Public API Surface of ng-components-tsi
|
|
5057
5092
|
*/
|