@jvsoft/components 0.0.10 → 0.0.12

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.
Files changed (141) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/build.js +20 -0
  3. package/dialog-flotante/dialog-flotante.component.html +66 -0
  4. package/dialog-flotante/dialog-flotante.component.ts +115 -0
  5. package/dialog-flotante/dialog-flotante.interface.ts +13 -0
  6. package/dialog-flotante/index.ts +1 -0
  7. package/dialog-flotante/ng-package.json +5 -0
  8. package/{index.d.ts → index.ts} +8 -1
  9. package/lista-arbol/lista-arbol.component.html +66 -0
  10. package/lista-arbol/lista-arbol.component.ts +238 -0
  11. package/lista-arbol/lista-arbol.functions.ts +46 -0
  12. package/lista-arbol/ng-package.json +5 -0
  13. package/luces-navidad/christmas-tree.png +0 -0
  14. package/luces-navidad/index.ts +1 -0
  15. package/luces-navidad/luces-navidad.component.html +6 -0
  16. package/luces-navidad/luces-navidad.component.ts +24 -0
  17. package/luces-navidad/ng-package.json +5 -0
  18. package/mat-suffix-search-button/index.ts +1 -0
  19. package/mat-suffix-search-button/mat-suffix-search-button.component.html +5 -0
  20. package/mat-suffix-search-button/mat-suffix-search-button.component.ts +36 -0
  21. package/mat-suffix-search-button/ng-package.json +5 -0
  22. package/menu/index.ts +1 -0
  23. package/menu/menu.component.html +40 -0
  24. package/menu/menu.component.ts +88 -0
  25. package/menu/menu.interface.ts +16 -0
  26. package/menu/ng-package.json +5 -0
  27. package/ng-package.json +17 -0
  28. package/package.json +17 -42
  29. package/progress-spinner.zip +0 -0
  30. package/tabla-mantenimiento/classes/data-model.ts +150 -0
  31. package/tabla-mantenimiento/components/progress-bar/index.ts +1 -0
  32. package/tabla-mantenimiento/components/progress-bar/ng-package.json +5 -0
  33. package/tabla-mantenimiento/components/progress-bar/progress-bar.component.html +10 -0
  34. package/tabla-mantenimiento/components/progress-bar/progress-bar.component.ts +85 -0
  35. package/tabla-mantenimiento/components/progress-bar/public-api.ts +2 -0
  36. package/tabla-mantenimiento/index.ts +1 -0
  37. package/tabla-mantenimiento/interfaces/{archivo.d.ts → archivo.ts} +7 -4
  38. package/tabla-mantenimiento/interfaces/global/{boton-mantenimiento.d.ts → boton-mantenimiento.ts} +9 -3
  39. package/tabla-mantenimiento/interfaces/global/{columnas-tabla.d.ts → columnas-tabla.ts} +90 -13
  40. package/tabla-mantenimiento/interfaces/global/export-excel-servidor.ts +0 -0
  41. package/tabla-mantenimiento/interfaces/global/no-export.ts +11 -0
  42. package/tabla-mantenimiento/interfaces/global/{otros.d.ts → otros.ts} +15 -3
  43. package/tabla-mantenimiento/interfaces/implements/{incluye-tabla-mantenimiento.d.ts → incluye-tabla-mantenimiento.ts} +6 -4
  44. package/tabla-mantenimiento/interfaces/implements/{index.d.ts → index.ts} +1 -0
  45. package/tabla-mantenimiento/mat-row-keyboard-selection.directive.ts +97 -0
  46. package/tabla-mantenimiento/ng-package.json +5 -0
  47. package/tabla-mantenimiento/pipes/no-sanitize.pipe.ts +12 -0
  48. package/tabla-mantenimiento/pipes/zero-fill.pipe.ts +19 -0
  49. package/tabla-mantenimiento/{public-api.d.ts → public-api.ts} +3 -2
  50. package/tabla-mantenimiento/tabla-mantenimiento-column-defs/column-type/column-type-date/column-type-date.component.html +22 -0
  51. package/tabla-mantenimiento/tabla-mantenimiento-column-defs/column-type/column-type-date/column-type-date.component.ts +12 -0
  52. package/tabla-mantenimiento/tabla-mantenimiento-column-defs/column-type/column-type-icons/column-type-icons.component.html +58 -0
  53. package/tabla-mantenimiento/tabla-mantenimiento-column-defs/column-type/column-type-icons/column-type-icons.component.ts +19 -0
  54. package/tabla-mantenimiento/tabla-mantenimiento-column-defs/column-type/column-type-money/column-type-money.component.html +40 -0
  55. package/tabla-mantenimiento/tabla-mantenimiento-column-defs/column-type/column-type-money/column-type-money.component.ts +17 -0
  56. package/tabla-mantenimiento/tabla-mantenimiento-column-defs/column-type/column-type-number/column-type-number.component.html +25 -0
  57. package/tabla-mantenimiento/tabla-mantenimiento-column-defs/column-type/column-type-number/column-type-number.component.ts +14 -0
  58. package/tabla-mantenimiento/tabla-mantenimiento-column-defs/column-type/column-type-progressbar/column-type-progressbar.component.html +28 -0
  59. package/tabla-mantenimiento/tabla-mantenimiento-column-defs/column-type/column-type-progressbar/column-type-progressbar.component.ts +13 -0
  60. package/tabla-mantenimiento/tabla-mantenimiento-column-defs/column-type/column-type-sino/column-type-sino.component.html +30 -0
  61. package/tabla-mantenimiento/tabla-mantenimiento-column-defs/column-type/column-type-sino/column-type-sino.component.ts +38 -0
  62. package/tabla-mantenimiento/tabla-mantenimiento-column-defs/column-type/column-type-text/column-type-text.component.html +97 -0
  63. package/tabla-mantenimiento/tabla-mantenimiento-column-defs/column-type/column-type-text/column-type-text.component.ts +43 -0
  64. package/tabla-mantenimiento/tabla-mantenimiento-column-defs/column-type/column-type.component.html +26 -0
  65. package/tabla-mantenimiento/tabla-mantenimiento-column-defs/column-type/column-type.component.ts +36 -0
  66. package/tabla-mantenimiento/tabla-mantenimiento-column-defs/column-type/column-type.module.ts +54 -0
  67. package/tabla-mantenimiento/tabla-mantenimiento-column-defs/tabla-mantenimiento-column-defs.component.html +76 -0
  68. package/tabla-mantenimiento/tabla-mantenimiento-column-defs/tabla-mantenimiento-column-defs.component.ts +67 -0
  69. package/tabla-mantenimiento/tabla-mantenimiento-menu/tabla-mantenimiento-menu.component.html +7 -0
  70. package/tabla-mantenimiento/tabla-mantenimiento-menu/tabla-mantenimiento-menu.component.ts +39 -0
  71. package/tabla-mantenimiento/tabla-mantenimiento.component.html +385 -0
  72. package/tabla-mantenimiento/tabla-mantenimiento.component.ts +951 -0
  73. package/tabla-mantenimiento/tabla-mantenimiento.functions.ts +57 -0
  74. package/tabla-mantenimiento/tabla-mantenimiento.service.ts +44 -0
  75. package/tabla-mantenimiento/table-util.ts +49 -0
  76. package/tabla-mantenimiento.zip +0 -0
  77. package/tsconfig.lib.json +16 -0
  78. package/tsconfig.lib.prod.json +11 -0
  79. package/tsconfig.spec.json +15 -0
  80. package/yarn-error.log +68 -0
  81. package/dialog-flotante/dialog-flotante.component.d.ts +0 -32
  82. package/dialog-flotante/dialog-flotante.interface.d.ts +0 -11
  83. package/dialog-flotante/index.d.ts +0 -5
  84. package/fesm2022/jvsoft-components-dialog-flotante.mjs +0 -130
  85. package/fesm2022/jvsoft-components-dialog-flotante.mjs.map +0 -1
  86. package/fesm2022/jvsoft-components-lista-arbol.mjs +0 -266
  87. package/fesm2022/jvsoft-components-lista-arbol.mjs.map +0 -1
  88. package/fesm2022/jvsoft-components-luces-navidad.mjs +0 -33
  89. package/fesm2022/jvsoft-components-luces-navidad.mjs.map +0 -1
  90. package/fesm2022/jvsoft-components-mat-suffix-search-button.mjs +0 -47
  91. package/fesm2022/jvsoft-components-mat-suffix-search-button.mjs.map +0 -1
  92. package/fesm2022/jvsoft-components-menu.mjs +0 -102
  93. package/fesm2022/jvsoft-components-menu.mjs.map +0 -1
  94. package/fesm2022/jvsoft-components-tabla-mantenimiento-components-progress-bar.mjs +0 -91
  95. package/fesm2022/jvsoft-components-tabla-mantenimiento-components-progress-bar.mjs.map +0 -1
  96. package/fesm2022/jvsoft-components-tabla-mantenimiento.mjs +0 -1801
  97. package/fesm2022/jvsoft-components-tabla-mantenimiento.mjs.map +0 -1
  98. package/fesm2022/jvsoft-components.mjs +0 -2309
  99. package/fesm2022/jvsoft-components.mjs.map +0 -1
  100. package/lista-arbol/index.d.ts +0 -5
  101. package/lista-arbol/lista-arbol.component.d.ts +0 -58
  102. package/lista-arbol/lista-arbol.functions.d.ts +0 -1
  103. package/luces-navidad/index.d.ts +0 -5
  104. package/luces-navidad/luces-navidad.component.d.ts +0 -11
  105. package/mat-suffix-search-button/index.d.ts +0 -5
  106. package/mat-suffix-search-button/mat-suffix-search-button.component.d.ts +0 -12
  107. package/menu/index.d.ts +0 -5
  108. package/menu/menu.component.d.ts +0 -25
  109. package/menu/menu.interface.d.ts +0 -16
  110. package/src/styles/base-jvsoft-components.css +0 -9
  111. package/tabla-mantenimiento/classes/data-model.d.ts +0 -25
  112. package/tabla-mantenimiento/components/progress-bar/index.d.ts +0 -5
  113. package/tabla-mantenimiento/components/progress-bar/progress-bar.component.d.ts +0 -30
  114. package/tabla-mantenimiento/components/progress-bar/public-api.d.ts +0 -1
  115. package/tabla-mantenimiento/index.d.ts +0 -5
  116. package/tabla-mantenimiento/interfaces/global/no-export.d.ts +0 -2
  117. package/tabla-mantenimiento/mat-row-keyboard-selection.directive.d.ts +0 -19
  118. package/tabla-mantenimiento/pipes/no-sanitize.pipe.d.ts +0 -10
  119. package/tabla-mantenimiento/pipes/zero-fill.pipe.d.ts +0 -8
  120. package/tabla-mantenimiento/tabla-mantenimiento-column-defs/column-type/column-type-date/column-type-date.component.d.ts +0 -8
  121. package/tabla-mantenimiento/tabla-mantenimiento-column-defs/column-type/column-type-icons/column-type-icons.component.d.ts +0 -9
  122. package/tabla-mantenimiento/tabla-mantenimiento-column-defs/column-type/column-type-money/column-type-money.component.d.ts +0 -9
  123. package/tabla-mantenimiento/tabla-mantenimiento-column-defs/column-type/column-type-number/column-type-number.component.d.ts +0 -8
  124. package/tabla-mantenimiento/tabla-mantenimiento-column-defs/column-type/column-type-progressbar/column-type-progressbar.component.d.ts +0 -8
  125. package/tabla-mantenimiento/tabla-mantenimiento-column-defs/column-type/column-type-sino/column-type-sino.component.d.ts +0 -9
  126. package/tabla-mantenimiento/tabla-mantenimiento-column-defs/column-type/column-type-text/column-type-text.component.d.ts +0 -8
  127. package/tabla-mantenimiento/tabla-mantenimiento-column-defs/column-type/column-type.component.d.ts +0 -18
  128. package/tabla-mantenimiento/tabla-mantenimiento-column-defs/column-type/column-type.module.d.ts +0 -23
  129. package/tabla-mantenimiento/tabla-mantenimiento-column-defs/tabla-mantenimiento-column-defs.component.d.ts +0 -21
  130. package/tabla-mantenimiento/tabla-mantenimiento-menu/tabla-mantenimiento-menu.component.d.ts +0 -18
  131. package/tabla-mantenimiento/tabla-mantenimiento.component.d.ts +0 -147
  132. package/tabla-mantenimiento/tabla-mantenimiento.functions.d.ts +0 -5
  133. package/tabla-mantenimiento/tabla-mantenimiento.service.d.ts +0 -8
  134. package/tabla-mantenimiento/table-util.d.ts +0 -11
  135. /package/dialog-flotante/{public-api.d.ts → public-api.ts} +0 -0
  136. /package/lista-arbol/{public-api.d.ts → public-api.ts} +0 -0
  137. /package/luces-navidad/{public-api.d.ts → public-api.ts} +0 -0
  138. /package/mat-suffix-search-button/{public-api.d.ts → public-api.ts} +0 -0
  139. /package/menu/{public-api.d.ts → public-api.ts} +0 -0
  140. /package/tabla-mantenimiento/interfaces/global/{index.d.ts → index.ts} +0 -0
  141. /package/tabla-mantenimiento/interfaces/{index.d.ts → index.ts} +0 -0
@@ -1,1801 +0,0 @@
1
- import { __decorate } from 'tslib';
2
- import { trigger, state, transition, style, animate } from '@angular/animations';
3
- import { TemplatePortal } from '@angular/cdk/portal';
4
- import * as i1 from '@angular/common';
5
- import { CommonModule, DecimalPipe } from '@angular/common';
6
- import * as i0 from '@angular/core';
7
- import { EventEmitter, HostListener, Output, Input, Directive, ViewChild, Optional, Component, inject, Pipe, NgModule, ContentChildren, ViewChildren, Injectable, ElementRef, HostBinding } from '@angular/core';
8
- import * as i1$2 from '@angular/forms';
9
- import { Validators, FormControl, FormGroup, ReactiveFormsModule, FormsModule } from '@angular/forms';
10
- import * as i14 from '@angular/material/badge';
11
- import { MatBadgeModule } from '@angular/material/badge';
12
- import * as i3$1 from '@angular/material/checkbox';
13
- import { MatCheckboxModule } from '@angular/material/checkbox';
14
- import * as i5$1 from '@angular/material/core';
15
- import { MatRipple, MatRippleModule } from '@angular/material/core';
16
- import * as i6 from '@angular/material/divider';
17
- import { MatDividerModule } from '@angular/material/divider';
18
- import * as i5 from '@angular/material/icon';
19
- import { MatIconRegistry, MatIcon, MatIconModule } from '@angular/material/icon';
20
- import * as i8 from '@angular/material/menu';
21
- import { MatMenuModule } from '@angular/material/menu';
22
- import * as i9 from '@angular/material/paginator';
23
- import { MatPaginatorModule, MatPaginator, MAT_PAGINATOR_DEFAULT_OPTIONS } from '@angular/material/paginator';
24
- import * as i3 from '@angular/material/sort';
25
- import { MatSortModule, MatSort } from '@angular/material/sort';
26
- import * as i2 from '@angular/material/table';
27
- import { MatColumnDef, MatTable, MatTableModule, MatTableDataSource, MatFooterRow, MatRow } from '@angular/material/table';
28
- import * as i4 from '@angular/material/tooltip';
29
- import { MatTooltipModule } from '@angular/material/tooltip';
30
- import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
31
- import moment from 'moment';
32
- import { Subject, takeUntil, of, fromEvent } from 'rxjs';
33
- import { map, filter, take } from 'rxjs/operators';
34
- import shortHash from 'shorthash2';
35
- import * as i1$1 from '@angular/platform-browser';
36
- import { DomSanitizer } from '@angular/platform-browser';
37
- import * as XLSX from 'xlsx';
38
- import * as i2$1 from '@angular/cdk/overlay';
39
-
40
- function buscarEnArray(coleccion, idBuscar, dato) {
41
- if (!Array.isArray(coleccion) || coleccion.length === 0)
42
- return null; // 🔹 Validación de entrada
43
- return Array.isArray(idBuscar)
44
- ? coleccion.find(item => idBuscar.every((campo, idx) => item[campo] === dato[idx])) || null
45
- : coleccion.find(item => item[idBuscar] === dato) || null;
46
- }
47
- function formatearFecha(val, hora = '00:00:00') {
48
- if (val) {
49
- if (val.length <= 10) {
50
- val = val + ' ' + hora;
51
- }
52
- return new Date(val);
53
- }
54
- return val;
55
- }
56
- function esNumero(value) {
57
- return !isNaN(Number(value));
58
- }
59
- function capitalizarTexto(texto) {
60
- texto = texto.replace(/_/g, ' ');
61
- texto = texto.replace(/-/g, ' ');
62
- const textoCortado = texto.split(' ');
63
- const nText = [];
64
- textoCortado.forEach(textActual => {
65
- nText.push(textActual.charAt(0).toUpperCase() + textActual.slice(1));
66
- });
67
- return nText.join(' ');
68
- }
69
- function getBrowserName() {
70
- const agent = window.navigator.userAgent.toLowerCase();
71
- switch (true) {
72
- case agent.indexOf('edge') > -1:
73
- return 'edge';
74
- case agent.indexOf('opr') > -1 && !!window.opr:
75
- return 'opera';
76
- case agent.indexOf('chrome') > -1 && !!window.chrome:
77
- return 'chrome';
78
- case agent.indexOf('trident') > -1:
79
- return 'ie';
80
- case agent.indexOf('firefox') > -1:
81
- return 'firefox';
82
- case agent.indexOf('safari') > -1:
83
- return 'safari';
84
- default:
85
- return 'other';
86
- }
87
- }
88
-
89
- class DataModel {
90
- modelosChk = {}; // Usar any para valores dinámicos
91
- checkbox;
92
- constructor() {
93
- this.checkbox = new ForCheckboxModel(this);
94
- }
95
- generarId(row, campoValor, separador = '') {
96
- if (typeof campoValor == 'string') {
97
- campoValor = [campoValor];
98
- }
99
- return campoValor.map(data => row[data]).join(separador);
100
- }
101
- // Agrega controles al objeto modelosChk
102
- agregarControles(lista, idLista, limpiar = true, campoValor = null, campoValorSeparador = '') {
103
- if (limpiar) {
104
- this.modelosChk = {};
105
- }
106
- const asignarValor = (dat, idLista, campoValor, key) => {
107
- if (!key) {
108
- key = dat[idLista] + (campoValor.includes('.') ? '' : `.${campoValor}`);
109
- }
110
- const mat = campoValor.match(/^([in])[A-Z][a-zA-Z]+/);
111
- if (mat) {
112
- this.modelosChk[key] = dat[campoValor] * 1;
113
- }
114
- else {
115
- this.modelosChk[key] = dat[campoValor];
116
- }
117
- };
118
- lista.forEach(dat => {
119
- if (campoValor === null) {
120
- // Caso 1: Sin campoValor, se asigna false
121
- this.modelosChk[dat[idLista]] = false;
122
- }
123
- else if (typeof campoValor === 'string') {
124
- // Caso 2: campoValor es un string
125
- asignarValor(dat, idLista, campoValor, dat[idLista]);
126
- }
127
- else if (campoValorSeparador) {
128
- const idStr = this.generarId(dat, campoValor, campoValorSeparador);
129
- // Caso 2: campoValor es un string
130
- asignarValor(dat, idLista, '.', idStr);
131
- }
132
- else {
133
- // Caso 3: campoValor es un array de strings
134
- campoValor.forEach(data => asignarValor(dat, idLista, data));
135
- }
136
- });
137
- }
138
- // Establece el estado de un índice
139
- setState(idx, state) {
140
- this.modelosChk[idx] = state;
141
- }
142
- // Obtiene el estado de un índice
143
- getState(idx) {
144
- return this.modelosChk[idx];
145
- }
146
- getDataMultiple(idx) {
147
- const camposMod = Object.keys(this.modelosChk).filter(key => key.split('.')[0] == idx);
148
- const vRet = {};
149
- camposMod.forEach(key => {
150
- vRet[key.split('.')[1]] = this.modelosChk[key];
151
- });
152
- return vRet;
153
- }
154
- // Genera una lista basada en el estado de los índices
155
- generarLista(tipoRetorno = null, esCampoNumerico = false) {
156
- const strLista = [];
157
- const objLista = {};
158
- Object.keys(this.modelosChk).forEach(key => {
159
- if ((esCampoNumerico && esNumero(this.modelosChk[key])) ||
160
- (this.modelosChk[key])) {
161
- strLista.push(key);
162
- objLista[key] = this.modelosChk[key];
163
- }
164
- });
165
- if (tipoRetorno === 'array') {
166
- return strLista;
167
- }
168
- if (tipoRetorno === 'object') {
169
- return objLista;
170
- }
171
- return strLista.join(',');
172
- }
173
- generarFormGroupFromModelosChk(tipo) {
174
- const formGroupObj = {};
175
- let validadores = [];
176
- if (tipo == 'number') {
177
- validadores = [
178
- Validators.required,
179
- Validators.min(1)
180
- ];
181
- }
182
- Object.keys(this.modelosChk).forEach(key => {
183
- formGroupObj[key] = new FormControl(this.modelosChk[key], validadores);
184
- });
185
- return new FormGroup(formGroupObj);
186
- // return this.formBuilder.group(formGroupObj);
187
- }
188
- }
189
- class ForCheckboxModel {
190
- modeloCheck;
191
- constructor(modeloCheck) {
192
- this.modeloCheck = modeloCheck;
193
- }
194
- get cantidadActivos() {
195
- return Object.values(this.modeloCheck.modelosChk).filter(Boolean).length;
196
- }
197
- get existenActivados() {
198
- return this.cantidadActivos > 0;
199
- }
200
- get todosActivos() {
201
- const total = Object.keys(this.modeloCheck.modelosChk).length;
202
- const activos = this.cantidadActivos;
203
- return activos > 0 && total === activos;
204
- }
205
- get algunosActivos() {
206
- const total = Object.keys(this.modeloCheck.modelosChk).length;
207
- const activos = this.cantidadActivos;
208
- return activos > 0 && total !== activos;
209
- }
210
- establecerTodos(activo) {
211
- Object.keys(this.modeloCheck.modelosChk).forEach(idx => this.modeloCheck.modelosChk[idx] = activo);
212
- }
213
- }
214
-
215
- function tipoValorFuncion(datoParam, defaultValue, ...param) {
216
- if (datoParam === undefined || datoParam === null) {
217
- return defaultValue; // Retorna el valor por defecto si es undefined
218
- }
219
- if (typeof datoParam === 'function') {
220
- return datoParam(...param);
221
- }
222
- return datoParam;
223
- }
224
-
225
- class MatRowKeyboardSelectionDirective {
226
- el;
227
- rows;
228
- renderedData;
229
- tabla; // Entrada: Referencia a la tabla
230
- rowModel; // Entrada: Modelo de fila actual
231
- seleccionarSiguiente = new EventEmitter(); // Salida: Evento al seleccionar siguiente
232
- unsubscriber$ = new Subject();
233
- constructor(el) {
234
- this.el = el;
235
- }
236
- ngOnInit() {
237
- // Asignar tabindex si no está definido
238
- if (this.el.nativeElement.tabIndex < 0) {
239
- this.el.nativeElement.tabIndex = 0;
240
- }
241
- // Obtener la fuente de datos de la tabla
242
- const dataSource = this.tabla.dataSource;
243
- // Suscribirse a los cambios en los datos
244
- dataSource.connect().pipe(takeUntil(this.unsubscriber$)).subscribe(data => {
245
- this.renderedData = data;
246
- this.rows = Array.from(this.getTableRows());
247
- });
248
- }
249
- ngOnDestroy() {
250
- // Finalizar la suscripción al destruir la directiva
251
- this.unsubscriber$.next(null);
252
- this.unsubscriber$.complete();
253
- }
254
- onKeydown(event) {
255
- var element = event.target;
256
- if (element.tagName === "INPUT") {
257
- event.stopPropagation();
258
- }
259
- else {
260
- const currentIndex = this.renderedData.findIndex(row => row === this.rowModel);
261
- const eRef = event.target;
262
- this.rows = this.rows.filter(elem => elem.hasAttribute('id'));
263
- const arrayFilas = Array.from(this.rows);
264
- const fElem = arrayFilas.filter(elem => elem.id == eRef.id).pop();
265
- const cElemIdx = arrayFilas.findIndex(elem => elem == fElem);
266
- let newRow;
267
- // Controlar las teclas presionadas
268
- switch (event.key) {
269
- case 'ArrowDown':
270
- newRow = this.rows[cElemIdx + 1];
271
- break;
272
- case 'ArrowUp':
273
- newRow = this.rows[cElemIdx - 1];
274
- break;
275
- case 'Enter':
276
- case ' ':
277
- this.seleccionarSiguiente.next(this.renderedData[currentIndex]);
278
- event.preventDefault();
279
- break;
280
- }
281
- // Enfocar la nueva fila seleccionada
282
- if (newRow) {
283
- newRow.classList.add('estaFocus');
284
- newRow.focus();
285
- }
286
- }
287
- }
288
- getTableRows() {
289
- let el = this.el.nativeElement;
290
- // Recorrer los elementos padres hasta encontrar la tabla
291
- while (el && el.parentNode) {
292
- el = el.parentNode;
293
- // Verificar si es una tabla de material
294
- if (el.tagName && el.tagName.toLowerCase() === 'mat-table' || el.hasAttribute('mat-table')) {
295
- return el.querySelectorAll('mat-row, tr[mat-row]');
296
- }
297
- }
298
- return undefined;
299
- }
300
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MatRowKeyboardSelectionDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
301
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.7", type: MatRowKeyboardSelectionDirective, isStandalone: true, selector: "[matRowKeyboardSelection]", inputs: { tabla: ["matRowKeyboardSelection", "tabla"], rowModel: "rowModel" }, outputs: { seleccionarSiguiente: "seleccionarSiguiente" }, host: { listeners: { "keydown": "onKeydown($event)" } }, ngImport: i0 });
302
- }
303
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MatRowKeyboardSelectionDirective, decorators: [{
304
- type: Directive,
305
- args: [{
306
- selector: '[matRowKeyboardSelection]'
307
- }]
308
- }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { tabla: [{
309
- type: Input,
310
- args: ['matRowKeyboardSelection']
311
- }], rowModel: [{
312
- type: Input
313
- }], seleccionarSiguiente: [{
314
- type: Output
315
- }], onKeydown: [{
316
- type: HostListener,
317
- args: ['keydown', ['$event']]
318
- }] } });
319
-
320
- class ColumnTypeComponent {
321
- table;
322
- column;
323
- columnDef;
324
- columnTitleTemplate; // Permite personalizar títulos
325
- columnFooterTemplate; // Permite personalizar footer
326
- cellTemplate; // Se usa para el contenido de las celdas
327
- constructor(table) {
328
- this.table = table;
329
- }
330
- ngOnInit() {
331
- }
332
- ngAfterViewInit() {
333
- if (this.columnDef) {
334
- this.table.addColumnDef(this.columnDef);
335
- }
336
- }
337
- accionClick(item, event) {
338
- if (this.column.click) {
339
- this.column.click(item);
340
- event.stopPropagation();
341
- }
342
- return false;
343
- }
344
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ColumnTypeComponent, deps: [{ token: i2.MatTable, optional: true }], target: i0.ɵɵFactoryTarget.Component });
345
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: ColumnTypeComponent, isStandalone: false, selector: "jvs-column-type", inputs: { column: "column", columnTitleTemplate: "columnTitleTemplate", columnFooterTemplate: "columnFooterTemplate", cellTemplate: "cellTemplate" }, viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true, static: true }], ngImport: i0, template: "<ng-container matColumnDef=\"{{ column.property }}\">\n <!-- Definici\u00F3n del encabezado de la columna -->\n <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase text-center\" mat-header-cell mat-sort-header\n [disabled]=\"column.sort === false\">\n <ng-container *ngIf=\"columnTitleTemplate; else defaultTitle\">\n <ng-container *ngTemplateOutlet=\"columnTitleTemplate; context: { column: column }\"></ng-container>\n </ng-container>\n <ng-template #defaultTitle>\n <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span>\n </ng-template>\n </th>\n\n <!-- Cuerpo de la celda, definido por los hijos -->\n <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell (click)=\"accionClick(row, $event)\">\n <ng-container *ngTemplateOutlet=\"cellTemplate; context: { row: row, column: column }\"></ng-container>\n </td>\n\n <th *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell>\n <ng-container *ngIf=\"columnFooterTemplate; else defaultFooter\">\n <ng-container *ngTemplateOutlet=\"columnFooterTemplate; context: { column: column }\"></ng-container>\n </ng-container>\n <ng-template #defaultFooter>\n {{ column.transformarFooter ? column.transformarFooter() : '' }}\n </ng-template>\n </th>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }] });
346
- }
347
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ColumnTypeComponent, decorators: [{
348
- type: Component,
349
- args: [{ selector: 'jvs-column-type', standalone: false, template: "<ng-container matColumnDef=\"{{ column.property }}\">\n <!-- Definici\u00F3n del encabezado de la columna -->\n <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase text-center\" mat-header-cell mat-sort-header\n [disabled]=\"column.sort === false\">\n <ng-container *ngIf=\"columnTitleTemplate; else defaultTitle\">\n <ng-container *ngTemplateOutlet=\"columnTitleTemplate; context: { column: column }\"></ng-container>\n </ng-container>\n <ng-template #defaultTitle>\n <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span>\n </ng-template>\n </th>\n\n <!-- Cuerpo de la celda, definido por los hijos -->\n <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell (click)=\"accionClick(row, $event)\">\n <ng-container *ngTemplateOutlet=\"cellTemplate; context: { row: row, column: column }\"></ng-container>\n </td>\n\n <th *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell>\n <ng-container *ngIf=\"columnFooterTemplate; else defaultFooter\">\n <ng-container *ngTemplateOutlet=\"columnFooterTemplate; context: { column: column }\"></ng-container>\n </ng-container>\n <ng-template #defaultFooter>\n {{ column.transformarFooter ? column.transformarFooter() : '' }}\n </ng-template>\n </th>\n</ng-container>\n" }]
350
- }], ctorParameters: () => [{ type: i2.MatTable, decorators: [{
351
- type: Optional
352
- }] }], propDecorators: { column: [{
353
- type: Input,
354
- args: [{ required: true }]
355
- }], columnDef: [{
356
- type: ViewChild,
357
- args: [MatColumnDef, { static: true }]
358
- }], columnTitleTemplate: [{
359
- type: Input
360
- }], columnFooterTemplate: [{
361
- type: Input
362
- }], cellTemplate: [{
363
- type: Input
364
- }] } });
365
-
366
- class ColumnTypeNumberComponent extends ColumnTypeComponent {
367
- column = {};
368
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ColumnTypeNumberComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
369
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: ColumnTypeNumberComponent, isStandalone: false, selector: "jvs-column-type-number", inputs: { column: "column" }, usesInheritance: true, ngImport: i0, template: "\n<ng-template #cellTemplate let-row=\"row\">\n\t\t\t\t<span *ngIf=\"column.property && row[column.property]\" class=\"!text-indigo-900 font-semibold\">\n\t\t\t\t\t{{ row[column.property] | number: (column.format ? column.format : '1.0-2') }}\n\t\t\t\t</span>\n</ng-template>\n\n<ng-container matColumnDef=\"{{ column.property }}\">\n <!-- Definici\u00F3n del encabezado de la columna -->\n <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase text-center\" mat-header-cell mat-sort-header\n [disabled]=\"column.sort === false\">\n <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span>\n </th>\n\n <!-- Cuerpo de la celda, definido por los hijos -->\n <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell (click)=\"accionClick(row, $event)\">\n\n <ng-container [ngTemplateOutlet]=\"cellTemplate\" [ngTemplateOutletContext]=\"{row}\"></ng-container>\n\n </td>\n\n <th *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell>\n {{ column.transformarFooter ? column.transformarFooter() : '' }}\n </th>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }] });
370
- }
371
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ColumnTypeNumberComponent, decorators: [{
372
- type: Component,
373
- args: [{ selector: 'jvs-column-type-number', standalone: false, template: "\n<ng-template #cellTemplate let-row=\"row\">\n\t\t\t\t<span *ngIf=\"column.property && row[column.property]\" class=\"!text-indigo-900 font-semibold\">\n\t\t\t\t\t{{ row[column.property] | number: (column.format ? column.format : '1.0-2') }}\n\t\t\t\t</span>\n</ng-template>\n\n<ng-container matColumnDef=\"{{ column.property }}\">\n <!-- Definici\u00F3n del encabezado de la columna -->\n <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase text-center\" mat-header-cell mat-sort-header\n [disabled]=\"column.sort === false\">\n <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span>\n </th>\n\n <!-- Cuerpo de la celda, definido por los hijos -->\n <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell (click)=\"accionClick(row, $event)\">\n\n <ng-container [ngTemplateOutlet]=\"cellTemplate\" [ngTemplateOutletContext]=\"{row}\"></ng-container>\n\n </td>\n\n <th *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell>\n {{ column.transformarFooter ? column.transformarFooter() : '' }}\n </th>\n</ng-container>\n" }]
374
- }], propDecorators: { column: [{
375
- type: Input,
376
- args: [{ required: true }]
377
- }] } });
378
-
379
- class ColumnTypeDateComponent extends ColumnTypeComponent {
380
- column = {};
381
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ColumnTypeDateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
382
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: ColumnTypeDateComponent, isStandalone: false, selector: "jvs-column-type-date", inputs: { column: "column" }, usesInheritance: true, ngImport: i0, template: "<ng-template #cellTemplate let-row=\"row\">\n {{ row[column.property] | date: (column.format ? column.format : 'dd/MM/yyyy') }}\n</ng-template>\n\n<ng-container matColumnDef=\"{{ column.property }}\">\n <!-- Definici\u00F3n del encabezado de la columna -->\n <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase text-center\" mat-header-cell mat-sort-header\n [disabled]=\"column.sort === false\">\n <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span>\n </th>\n\n <!-- Cuerpo de la celda, definido por los hijos -->\n <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell (click)=\"accionClick(row, $event)\">\n\n <ng-container [ngTemplateOutlet]=\"cellTemplate\" [ngTemplateOutletContext]=\"{row}\"></ng-container>\n\n </td>\n\n <th *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell>\n {{ column.transformarFooter ? column.transformarFooter() : '' }}\n </th>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
383
- }
384
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ColumnTypeDateComponent, decorators: [{
385
- type: Component,
386
- args: [{ selector: 'jvs-column-type-date', standalone: false, template: "<ng-template #cellTemplate let-row=\"row\">\n {{ row[column.property] | date: (column.format ? column.format : 'dd/MM/yyyy') }}\n</ng-template>\n\n<ng-container matColumnDef=\"{{ column.property }}\">\n <!-- Definici\u00F3n del encabezado de la columna -->\n <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase text-center\" mat-header-cell mat-sort-header\n [disabled]=\"column.sort === false\">\n <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span>\n </th>\n\n <!-- Cuerpo de la celda, definido por los hijos -->\n <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell (click)=\"accionClick(row, $event)\">\n\n <ng-container [ngTemplateOutlet]=\"cellTemplate\" [ngTemplateOutletContext]=\"{row}\"></ng-container>\n\n </td>\n\n <th *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell>\n {{ column.transformarFooter ? column.transformarFooter() : '' }}\n </th>\n</ng-container>\n" }]
387
- }], propDecorators: { column: [{
388
- type: Input,
389
- args: [{ required: true }]
390
- }] } });
391
-
392
- const YES_ICON = `
393
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M21 7L9 19l-5.5-5.5l1.41-1.41L9 16.17L19.59 5.59z"/></svg>
394
- `;
395
- const NO_ICON = `
396
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"/></svg>
397
- `;
398
- class ColumnTypeSinoComponent extends ColumnTypeComponent {
399
- column = {}; // 🟢 Solución
400
- constructor() {
401
- super(inject(MatTable)); // 🟢 Llamar al constructor del padre
402
- const iconRegistry = inject(MatIconRegistry);
403
- const sanitizer = inject(DomSanitizer);
404
- // Note that we provide the icon here as a string literal here due to a limitation in
405
- // Stackblitz. If you want to provide the icon from a URL, you can use:
406
- // `iconRegistry.addSvgIcon('thumbs-up', sanitizer.bypassSecurityTrustResourceUrl('icon.svg'));`
407
- iconRegistry.addSvgIconLiteralInNamespace('yes_no', 'yes', sanitizer.bypassSecurityTrustHtml(YES_ICON));
408
- iconRegistry.addSvgIconLiteralInNamespace('yes_no', 'no', sanitizer.bypassSecurityTrustHtml(NO_ICON));
409
- // iconRegistry.addSvgIconLiteral('yesIcon', sanitizer.bypassSecurityTrustHtml(YES_ICON));
410
- // iconRegistry.addSvgIconLiteral('noIcon', sanitizer.bypassSecurityTrustHtml(NO_ICON));
411
- }
412
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ColumnTypeSinoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
413
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: ColumnTypeSinoComponent, isStandalone: false, selector: "jvs-column-type-sino", inputs: { column: "column" }, usesInheritance: true, ngImport: i0, template: "<ng-template #cellTemplate let-row=\"row\">\n <mat-icon *ngIf=\"[column.yesValue, 1, true].includes(row[column.property])\"\n [svgIcon]=\"column.yesIcon ?? 'yes_no:yes'\" class=\"icon-sm\"\n [matTooltip]=\"column.yesTooltip ?? undefined\"\n ></mat-icon>\n <mat-icon *ngIf=\"[column.noValue, 0, false].includes(row[column.property])\" [svgIcon]=\"column.noIcon ?? 'yes_no:no'\"\n class=\"icon-sm\"\n [matTooltip]=\"column.noTooltip ?? undefined\"\n ></mat-icon>\n <span class=\"cdk-visually-hidden\">{{ row[column.property] }}</span>\n</ng-template>\n\n<ng-container matColumnDef=\"{{ column.property }}\">\n <!-- Definici\u00F3n del encabezado de la columna -->\n <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase text-center\" mat-header-cell mat-sort-header\n [disabled]=\"column.sort === false\">\n <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span>\n </th>\n\n <!-- Cuerpo de la celda, definido por los hijos -->\n <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell (click)=\"accionClick(row, $event)\">\n\n <ng-container [ngTemplateOutlet]=\"cellTemplate\" [ngTemplateOutletContext]=\"{row}\"></ng-container>\n\n </td>\n\n <th *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell>\n {{ column.transformarFooter ? column.transformarFooter() : '' }}\n </th>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
414
- }
415
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ColumnTypeSinoComponent, decorators: [{
416
- type: Component,
417
- args: [{ selector: 'jvs-column-type-sino', standalone: false, template: "<ng-template #cellTemplate let-row=\"row\">\n <mat-icon *ngIf=\"[column.yesValue, 1, true].includes(row[column.property])\"\n [svgIcon]=\"column.yesIcon ?? 'yes_no:yes'\" class=\"icon-sm\"\n [matTooltip]=\"column.yesTooltip ?? undefined\"\n ></mat-icon>\n <mat-icon *ngIf=\"[column.noValue, 0, false].includes(row[column.property])\" [svgIcon]=\"column.noIcon ?? 'yes_no:no'\"\n class=\"icon-sm\"\n [matTooltip]=\"column.noTooltip ?? undefined\"\n ></mat-icon>\n <span class=\"cdk-visually-hidden\">{{ row[column.property] }}</span>\n</ng-template>\n\n<ng-container matColumnDef=\"{{ column.property }}\">\n <!-- Definici\u00F3n del encabezado de la columna -->\n <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase text-center\" mat-header-cell mat-sort-header\n [disabled]=\"column.sort === false\">\n <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span>\n </th>\n\n <!-- Cuerpo de la celda, definido por los hijos -->\n <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell (click)=\"accionClick(row, $event)\">\n\n <ng-container [ngTemplateOutlet]=\"cellTemplate\" [ngTemplateOutletContext]=\"{row}\"></ng-container>\n\n </td>\n\n <th *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell>\n {{ column.transformarFooter ? column.transformarFooter() : '' }}\n </th>\n</ng-container>\n" }]
418
- }], ctorParameters: () => [], propDecorators: { column: [{
419
- type: Input,
420
- args: [{ required: true }]
421
- }] } });
422
-
423
- class ProgressBarComponent {
424
- objThis;
425
- porcentaje = 0;
426
- textoCentrado = false;
427
- _textoMostrar = '';
428
- get textoMostrar() { return this._textoMostrar; }
429
- set textoMostrar(val) { this._textoMostrar = val; }
430
- _formatoNumero = '';
431
- get formatoNumero() { return this._formatoNumero; }
432
- set formatoNumero(val) { this._formatoNumero = val ?? '1.0-0'; }
433
- _coloresValor = [];
434
- get coloresValor() { return this._coloresValor; }
435
- set coloresValor(val) {
436
- if (!val || !Array.isArray(val)) {
437
- this._coloresValor = [
438
- { valorMaximo: 1, class: 'p-0' },
439
- { valorMaximo: 40, class: 'bg-red-400 text-red-900' },
440
- // {valorMaximo: 35, class: 'bg-red-600 text-red-100'},
441
- { valorMaximo: 80, class: 'bg-yellow-600 text-yellow-100' },
442
- { valorMaximo: 100, class: 'bg-green-600 text-green-100' },
443
- ];
444
- }
445
- else {
446
- this._coloresValor = val;
447
- }
448
- }
449
- constructor() { }
450
- ngOnInit() {
451
- }
452
- colorEstilo() {
453
- let estiloFin = null;
454
- let claseFin = null;
455
- let encontro = false;
456
- this.coloresValor = this.ordenarPorPropiedad(this.coloresValor, 'valorMaximo');
457
- this.coloresValor.forEach(estilo => {
458
- if (!encontro && (this.porcentaje <= estilo.valorMaximo)) {
459
- // console.log(this.porcentaje, estilo, (this.porcentaje < estilo.valorMaximo));
460
- encontro = true;
461
- estiloFin = estilo.style;
462
- claseFin = estilo.class;
463
- }
464
- });
465
- return {
466
- style: estiloFin ?? '',
467
- class: claseFin ?? '',
468
- };
469
- }
470
- ordenarPorPropiedad(objData, propiedad, numeros = false) {
471
- if (numeros) {
472
- return objData.sort((a, b) => a[propiedad] - b[propiedad]);
473
- }
474
- return objData.sort((a, b) => (a[propiedad] > b[propiedad]) ? 1 : ((b[propiedad] > a[propiedad]) ? -1 : 0));
475
- }
476
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
477
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: ProgressBarComponent, isStandalone: true, selector: "jvs-progress-bar", inputs: { objThis: "objThis", porcentaje: "porcentaje", textoCentrado: "textoCentrado", textoMostrar: "textoMostrar", formatoNumero: "formatoNumero", coloresValor: "coloresValor" }, host: { classAttribute: "jvs-progress-bar" }, ngImport: i0, template: "<div class=\"w-full bg-gray-200 text-gray-700 rounded-full\" [class.text-center]=\"textoCentrado\">\n\t<div class=\"text-xxs font-medium text-center p-1 leading-none rounded-full\"\n\t\t [ngClass]=\"colorEstilo().class ? colorEstilo().class : 'bg-blue-600 text-blue-100'\"\n\t\t [style]=\"colorEstilo().style ? colorEstilo().style : ''\"\n\t\t [style.width]=\"(textoCentrado ? 100 : porcentaje) + '%'\"\n\t>\n <span *ngIf=\"textoMostrar else defaultText;\" class=\"whitespace-nowrap\">{{ textoMostrar }}</span>\n <ng-template #defaultText>{{ porcentaje | number: formatoNumero }}%</ng-template>\n </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }] });
478
- }
479
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ProgressBarComponent, decorators: [{
480
- type: Component,
481
- args: [{ selector: 'jvs-progress-bar', imports: [
482
- CommonModule,
483
- DecimalPipe
484
- ], host: {
485
- class: 'jvs-progress-bar',
486
- }, template: "<div class=\"w-full bg-gray-200 text-gray-700 rounded-full\" [class.text-center]=\"textoCentrado\">\n\t<div class=\"text-xxs font-medium text-center p-1 leading-none rounded-full\"\n\t\t [ngClass]=\"colorEstilo().class ? colorEstilo().class : 'bg-blue-600 text-blue-100'\"\n\t\t [style]=\"colorEstilo().style ? colorEstilo().style : ''\"\n\t\t [style.width]=\"(textoCentrado ? 100 : porcentaje) + '%'\"\n\t>\n <span *ngIf=\"textoMostrar else defaultText;\" class=\"whitespace-nowrap\">{{ textoMostrar }}</span>\n <ng-template #defaultText>{{ porcentaje | number: formatoNumero }}%</ng-template>\n </div>\n</div>\n" }]
487
- }], ctorParameters: () => [], propDecorators: { objThis: [{
488
- type: Input
489
- }], porcentaje: [{
490
- type: Input
491
- }], textoCentrado: [{
492
- type: Input
493
- }], textoMostrar: [{
494
- type: Input
495
- }], formatoNumero: [{
496
- type: Input
497
- }], coloresValor: [{
498
- type: Input
499
- }] } });
500
-
501
- class ColumnTypeProgressbarComponent extends ColumnTypeComponent {
502
- column = {};
503
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ColumnTypeProgressbarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
504
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: ColumnTypeProgressbarComponent, isStandalone: false, selector: "jvs-column-type-progressbar", inputs: { column: "column" }, usesInheritance: true, ngImport: i0, template: "<ng-template #cellTemplate let-row=\"row\">\n <jvs-progress-bar\n [textoCentrado]=\"!!column.progressbar.textoCentrado\"\n [porcentaje]=\"column.progressbar.porcentaje(row)\"\n [coloresValor]=\"column.progressbar.coloresValor\"\n [formatoNumero]=\"column.progressbar.formatoNumero\"\n [textoMostrar]=\"column.progressbar.textoMostrar ? column.progressbar.textoMostrar(row) : ''\"\n ></jvs-progress-bar>\n</ng-template>\n\n<ng-container matColumnDef=\"{{ column.property }}\">\n <!-- Definici\u00F3n del encabezado de la columna -->\n <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase text-center\" mat-header-cell mat-sort-header\n [disabled]=\"column.sort === false\">\n <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span>\n </th>\n\n <!-- Cuerpo de la celda, definido por los hijos -->\n <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell (click)=\"accionClick(row, $event)\">\n\n <ng-container [ngTemplateOutlet]=\"cellTemplate\" [ngTemplateOutletContext]=\"{row}\"></ng-container>\n\n </td>\n\n <th *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell>\n {{ column.transformarFooter ? column.transformarFooter() : '' }}\n </th>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: ProgressBarComponent, selector: "jvs-progress-bar", inputs: ["objThis", "porcentaje", "textoCentrado", "textoMostrar", "formatoNumero", "coloresValor"] }] });
505
- }
506
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ColumnTypeProgressbarComponent, decorators: [{
507
- type: Component,
508
- args: [{ selector: 'jvs-column-type-progressbar', standalone: false, template: "<ng-template #cellTemplate let-row=\"row\">\n <jvs-progress-bar\n [textoCentrado]=\"!!column.progressbar.textoCentrado\"\n [porcentaje]=\"column.progressbar.porcentaje(row)\"\n [coloresValor]=\"column.progressbar.coloresValor\"\n [formatoNumero]=\"column.progressbar.formatoNumero\"\n [textoMostrar]=\"column.progressbar.textoMostrar ? column.progressbar.textoMostrar(row) : ''\"\n ></jvs-progress-bar>\n</ng-template>\n\n<ng-container matColumnDef=\"{{ column.property }}\">\n <!-- Definici\u00F3n del encabezado de la columna -->\n <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase text-center\" mat-header-cell mat-sort-header\n [disabled]=\"column.sort === false\">\n <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span>\n </th>\n\n <!-- Cuerpo de la celda, definido por los hijos -->\n <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell (click)=\"accionClick(row, $event)\">\n\n <ng-container [ngTemplateOutlet]=\"cellTemplate\" [ngTemplateOutletContext]=\"{row}\"></ng-container>\n\n </td>\n\n <th *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell>\n {{ column.transformarFooter ? column.transformarFooter() : '' }}\n </th>\n</ng-container>\n" }]
509
- }], propDecorators: { column: [{
510
- type: Input,
511
- args: [{ required: true }]
512
- }] } });
513
-
514
- class NoSanitizePipe {
515
- domSanitizer;
516
- constructor(domSanitizer) {
517
- this.domSanitizer = domSanitizer;
518
- }
519
- transform(html) {
520
- return this.domSanitizer.bypassSecurityTrustHtml(html);
521
- }
522
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NoSanitizePipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
523
- static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: NoSanitizePipe, isStandalone: true, name: "noSanitize" });
524
- }
525
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NoSanitizePipe, decorators: [{
526
- type: Pipe,
527
- args: [{ name: 'noSanitize' }]
528
- }], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
529
-
530
- class ZeroFillPipe {
531
- transform(value, digitos, ...args) {
532
- let s = value + '';
533
- while (s.length < digitos) {
534
- s = '0' + s;
535
- }
536
- return s;
537
- }
538
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ZeroFillPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
539
- static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: ZeroFillPipe, isStandalone: true, name: "zeroFill" });
540
- }
541
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ZeroFillPipe, decorators: [{
542
- type: Pipe,
543
- args: [{
544
- name: 'zeroFill',
545
- }]
546
- }] });
547
- function zeroFill(value, digitos, ...args) {
548
- return new ZeroFillPipe().transform(value, digitos, args);
549
- }
550
-
551
- // export * from './progress-spinner.service';
552
-
553
- class ColumnTypeTextComponent extends ColumnTypeComponent {
554
- column = {}; // 🟢 Solución
555
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ColumnTypeTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
556
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: ColumnTypeTextComponent, isStandalone: false, selector: "jvs-column-type-text", inputs: { column: "column" }, usesInheritance: true, ngImport: i0, template: "<ng-template #cellTemplate let-row=\"row\">\n <div *ngIf=\"column.innerHTML; else sinInnerHTML\" [class]=\"column.text?.cssContenedor\" [ngStyle]=\"column.text?.cssStyle\" class=\"hover:!max-h-max\"\n [innerHTML]=\"column.innerHTML(row) | noSanitize\">\n </div>\n <ng-template #sinInnerHTML>\n <ng-container *ngIf=\"column.text && column.text?.separador else campoTextNormal\">\n <div [class]=\"column.text?.cssContenedor\">\n <ng-container\n *ngFor=\"let itm of ((column.transformar ? column.transformar(row) : row[column.property]) ?? '').split(column.text.separador)\">\n <ng-template *ngIf=\"column.property\" [ngTemplateOutlet]=\"tipoDatoString\"\n [ngTemplateOutletContext]=\"{ fila: column, tipo: 'text', value: itm, class: column.textCss, row: row }\"></ng-template>\n </ng-container>\n </div>\n </ng-container>\n <ng-template #campoTextNormal>\n <ng-template *ngIf=\"column.property\" [ngTemplateOutlet]=\"tipoDatoString\"\n [ngTemplateOutletContext]=\"{ fila: column, tipo: 'text', value: (column.transformar ? column.transformar(row) : row[column.property]), class: column.textCss, row: row }\"></ng-template>\n </ng-template>\n </ng-template>\n</ng-template>\n\n<ng-container matColumnDef=\"{{ column.property }}\">\n <!-- Definici\u00F3n del encabezado de la columna -->\n <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase text-center\" mat-header-cell mat-sort-header\n [disabled]=\"column.sort === false\">\n <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span>\n </th>\n\n <!-- Cuerpo de la celda, definido por los hijos -->\n <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell (click)=\"accionClick(row, $event)\">\n\n <ng-container [ngTemplateOutlet]=\"cellTemplate\" [ngTemplateOutletContext]=\"{row}\"></ng-container>\n\n </td>\n\n <th *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell>\n {{ column.transformarFooter ? column.transformarFooter() : '' }}\n </th>\n</ng-container>\n\n\n<!--<ng-container matColumnDef=\"{{ column.property }}\">\n<th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase text-center\" mat-header-cell mat-sort-header\n [disabled]=\"column.sort === false\">\n <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span>\n</th>\n<ng-container *ngIf=\"column.innerHTML; else sinInnerHTML\">\n <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell (click)=\"accionClick(column, row, $event)\">\n <div [class]=\"column.text?.cssContenedor\" [ngStyle]=\"column.text?.cssStyle\" class=\"hover:!max-h-max\"\n [innerHTML]=\"column.innerHTML(row) | noSanitize\">\n\n </div>\n </td>\n</ng-container>\n<ng-template #sinInnerHTML>\n <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell>\n <ng-container *ngIf=\"column.text && column.text?.separador else campoTextNormal\">\n <div [class]=\"column.text?.cssContenedor\">\n <ng-container\n *ngFor=\"let itm of ((column.transformar ? column.transformar(row) : row[column.property]) ?? '').split(column.text.separador)\">\n <ng-template *ngIf=\"column.property\" [ngTemplateOutlet]=\"tipoDatoString\"\n [ngTemplateOutletContext]=\"{ fila: column, tipo: 'text', value: itm, class: column.textCss, row: row }\"></ng-template>\n </ng-container>\n </div>\n </ng-container>\n <ng-template #campoTextNormal>\n <ng-template *ngIf=\"column.property\" [ngTemplateOutlet]=\"tipoDatoString\"\n [ngTemplateOutletContext]=\"{ fila: column, tipo: 'text', value: (column.transformar ? column.transformar(row) : row[column.property]), class: column.textCss, row: row }\"></ng-template>\n </ng-template>\n </td>\n</ng-template>\n<th *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" style=\"height: unset !important;\" mat-footer-cell\n [innerHTML]=\"column.transformarFooter ? column.transformarFooter() : ''\">\n</th>\n</ng-container>-->\n\n<ng-template #tipoDatoString let-row=\"row\" let-fila=\"fila\" let-tipo=\"tipo\" let-value=\"value\" let-format=\"format\"\n let-clase=\"class\">\n <ng-container [ngSwitch]=\"tipo\">\n <ng-container *ngSwitchCase=\"'text'\"><span [ngClass]=\"clase\" *ngIf=\"value\"\n (click)=\"accionClick(row, $event)\">\n <span *ngIf=\"!fila.zeroFill\">{{ value }}</span>\n <span *ngIf=\"fila.zeroFill\">{{ value | zeroFill: fila.zeroFill }}</span>\n </span></ng-container>\n <ng-container *ngSwitchCase=\"'date'\"><span [ngClass]=\"clase\" *ngIf=\"value\"\n (click)=\"accionClick(row, $event)\">{{ value | date: (format || 'dd/MM/yyyy') }}</span></ng-container>\n <ng-container *ngSwitchCase=\"'number'\"><span [ngClass]=\"clase\" *ngIf=\"value\"\n (click)=\"accionClick(row, $event)\">{{ value | number: (format || '0.0-2') }}</span></ng-container>\n <ng-container *ngSwitchCase=\"'money'\"><span [ngClass]=\"clase\"\n [class.text-sky-700]=\"(value * 1) >= 0\" [class.text-red-700]=\"(value * 1) < 0\"\n *ngIf=\"value\" (click)=\"accionClick(row, $event)\">{{ value | number: (format || '1.2-2') }}</span>\n </ng-container>\n\n <!--\t\t<span [ngClass]=\"class\" *ngSwitchCase=\"'date'\">{{ value | date: (format || 'dd/MM/yyyy') }}</span>-->\n <!--\t\t<span [ngClass]=\"class\" *ngSwitchCase=\"'number'\">{{ value | number: (format || '0.0-2') }}</span>-->\n </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: NoSanitizePipe, name: "noSanitize" }, { kind: "pipe", type: ZeroFillPipe, name: "zeroFill" }] });
557
- }
558
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ColumnTypeTextComponent, decorators: [{
559
- type: Component,
560
- args: [{ selector: 'jvs-column-type-text', standalone: false, template: "<ng-template #cellTemplate let-row=\"row\">\n <div *ngIf=\"column.innerHTML; else sinInnerHTML\" [class]=\"column.text?.cssContenedor\" [ngStyle]=\"column.text?.cssStyle\" class=\"hover:!max-h-max\"\n [innerHTML]=\"column.innerHTML(row) | noSanitize\">\n </div>\n <ng-template #sinInnerHTML>\n <ng-container *ngIf=\"column.text && column.text?.separador else campoTextNormal\">\n <div [class]=\"column.text?.cssContenedor\">\n <ng-container\n *ngFor=\"let itm of ((column.transformar ? column.transformar(row) : row[column.property]) ?? '').split(column.text.separador)\">\n <ng-template *ngIf=\"column.property\" [ngTemplateOutlet]=\"tipoDatoString\"\n [ngTemplateOutletContext]=\"{ fila: column, tipo: 'text', value: itm, class: column.textCss, row: row }\"></ng-template>\n </ng-container>\n </div>\n </ng-container>\n <ng-template #campoTextNormal>\n <ng-template *ngIf=\"column.property\" [ngTemplateOutlet]=\"tipoDatoString\"\n [ngTemplateOutletContext]=\"{ fila: column, tipo: 'text', value: (column.transformar ? column.transformar(row) : row[column.property]), class: column.textCss, row: row }\"></ng-template>\n </ng-template>\n </ng-template>\n</ng-template>\n\n<ng-container matColumnDef=\"{{ column.property }}\">\n <!-- Definici\u00F3n del encabezado de la columna -->\n <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase text-center\" mat-header-cell mat-sort-header\n [disabled]=\"column.sort === false\">\n <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span>\n </th>\n\n <!-- Cuerpo de la celda, definido por los hijos -->\n <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell (click)=\"accionClick(row, $event)\">\n\n <ng-container [ngTemplateOutlet]=\"cellTemplate\" [ngTemplateOutletContext]=\"{row}\"></ng-container>\n\n </td>\n\n <th *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell>\n {{ column.transformarFooter ? column.transformarFooter() : '' }}\n </th>\n</ng-container>\n\n\n<!--<ng-container matColumnDef=\"{{ column.property }}\">\n<th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase text-center\" mat-header-cell mat-sort-header\n [disabled]=\"column.sort === false\">\n <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span>\n</th>\n<ng-container *ngIf=\"column.innerHTML; else sinInnerHTML\">\n <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell (click)=\"accionClick(column, row, $event)\">\n <div [class]=\"column.text?.cssContenedor\" [ngStyle]=\"column.text?.cssStyle\" class=\"hover:!max-h-max\"\n [innerHTML]=\"column.innerHTML(row) | noSanitize\">\n\n </div>\n </td>\n</ng-container>\n<ng-template #sinInnerHTML>\n <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell>\n <ng-container *ngIf=\"column.text && column.text?.separador else campoTextNormal\">\n <div [class]=\"column.text?.cssContenedor\">\n <ng-container\n *ngFor=\"let itm of ((column.transformar ? column.transformar(row) : row[column.property]) ?? '').split(column.text.separador)\">\n <ng-template *ngIf=\"column.property\" [ngTemplateOutlet]=\"tipoDatoString\"\n [ngTemplateOutletContext]=\"{ fila: column, tipo: 'text', value: itm, class: column.textCss, row: row }\"></ng-template>\n </ng-container>\n </div>\n </ng-container>\n <ng-template #campoTextNormal>\n <ng-template *ngIf=\"column.property\" [ngTemplateOutlet]=\"tipoDatoString\"\n [ngTemplateOutletContext]=\"{ fila: column, tipo: 'text', value: (column.transformar ? column.transformar(row) : row[column.property]), class: column.textCss, row: row }\"></ng-template>\n </ng-template>\n </td>\n</ng-template>\n<th *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" style=\"height: unset !important;\" mat-footer-cell\n [innerHTML]=\"column.transformarFooter ? column.transformarFooter() : ''\">\n</th>\n</ng-container>-->\n\n<ng-template #tipoDatoString let-row=\"row\" let-fila=\"fila\" let-tipo=\"tipo\" let-value=\"value\" let-format=\"format\"\n let-clase=\"class\">\n <ng-container [ngSwitch]=\"tipo\">\n <ng-container *ngSwitchCase=\"'text'\"><span [ngClass]=\"clase\" *ngIf=\"value\"\n (click)=\"accionClick(row, $event)\">\n <span *ngIf=\"!fila.zeroFill\">{{ value }}</span>\n <span *ngIf=\"fila.zeroFill\">{{ value | zeroFill: fila.zeroFill }}</span>\n </span></ng-container>\n <ng-container *ngSwitchCase=\"'date'\"><span [ngClass]=\"clase\" *ngIf=\"value\"\n (click)=\"accionClick(row, $event)\">{{ value | date: (format || 'dd/MM/yyyy') }}</span></ng-container>\n <ng-container *ngSwitchCase=\"'number'\"><span [ngClass]=\"clase\" *ngIf=\"value\"\n (click)=\"accionClick(row, $event)\">{{ value | number: (format || '0.0-2') }}</span></ng-container>\n <ng-container *ngSwitchCase=\"'money'\"><span [ngClass]=\"clase\"\n [class.text-sky-700]=\"(value * 1) >= 0\" [class.text-red-700]=\"(value * 1) < 0\"\n *ngIf=\"value\" (click)=\"accionClick(row, $event)\">{{ value | number: (format || '1.2-2') }}</span>\n </ng-container>\n\n <!--\t\t<span [ngClass]=\"class\" *ngSwitchCase=\"'date'\">{{ value | date: (format || 'dd/MM/yyyy') }}</span>-->\n <!--\t\t<span [ngClass]=\"class\" *ngSwitchCase=\"'number'\">{{ value | number: (format || '0.0-2') }}</span>-->\n </ng-container>\n</ng-template>\n" }]
561
- }], propDecorators: { column: [{
562
- type: Input,
563
- args: [{ required: true }]
564
- }] } });
565
-
566
- class ColumnTypeMoneyComponent extends ColumnTypeComponent {
567
- column = {};
568
- value(row) {
569
- return (this.column.transformar ? this.column.transformar(row) : row[this.column.property]);
570
- }
571
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ColumnTypeMoneyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
572
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: ColumnTypeMoneyComponent, isStandalone: false, selector: "jvs-column-type-money", inputs: { column: "column" }, usesInheritance: true, ngImport: i0, template: "<ng-template #cellTemplate let-row=\"row\">\n <span [ngClass]=\"column.textCss\"\n [class.text-sky-700]=\"(value(row)) >= 0\" [class.text-red-700]=\"(value(row)) < 0\"\n *ngIf=\"value(row)\"\n (click)=\"accionClick(row, $event)\">{{ value(row) | number: (column.format || '1.2-2') }}</span>\n</ng-template>\n<ng-template #columnFooterTemplate let-row=\"row\">\n\t\t<span *ngIf=\"column.transformarFooter\"\n [class.text-sky-700]=\"column.transformarFooter() >= 0\"\n [class.text-red-700]=\"column.transformarFooter() < 0\"\n >\n\t\t\t\t\t<span>{{ column.transformarFooter() | currency: column.simboloMoneda ?? 'S/' }}</span>\n\t\t\t\t</span>\n</ng-template>\n\n<!--<jvs-column-type [column]=\"column\" [cellTemplate]=\"cellTemplate\" [columnFooterTemplate]=\"columnFooterTemplate\"></jvs-column-type>-->\n\n<ng-container matColumnDef=\"{{ column.property }}\">\n <!-- Definici\u00F3n del encabezado de la columna -->\n <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase text-center\" mat-header-cell mat-sort-header\n [disabled]=\"column.sort === false\">\n <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span>\n </th>\n\n <!-- Cuerpo de la celda, definido por los hijos -->\n <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell (click)=\"accionClick(row, $event)\">\n\n <ng-container [ngTemplateOutlet]=\"cellTemplate\" [ngTemplateOutletContext]=\"{row}\"></ng-container>\n\n </td>\n\n <th *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell>\n \t\t<span *ngIf=\"column.transformarFooter\"\n [class.text-sky-700]=\"column.transformarFooter() >= 0\"\n [class.text-red-700]=\"column.transformarFooter() < 0\"\n >\n\t\t\t\t\t<span>{{ column.transformarFooter() | currency: column.simboloMoneda ?? 'S/' }}</span>\n\t\t\t\t</span>\n </th>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }] });
573
- }
574
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ColumnTypeMoneyComponent, decorators: [{
575
- type: Component,
576
- args: [{ selector: 'jvs-column-type-money', standalone: false, template: "<ng-template #cellTemplate let-row=\"row\">\n <span [ngClass]=\"column.textCss\"\n [class.text-sky-700]=\"(value(row)) >= 0\" [class.text-red-700]=\"(value(row)) < 0\"\n *ngIf=\"value(row)\"\n (click)=\"accionClick(row, $event)\">{{ value(row) | number: (column.format || '1.2-2') }}</span>\n</ng-template>\n<ng-template #columnFooterTemplate let-row=\"row\">\n\t\t<span *ngIf=\"column.transformarFooter\"\n [class.text-sky-700]=\"column.transformarFooter() >= 0\"\n [class.text-red-700]=\"column.transformarFooter() < 0\"\n >\n\t\t\t\t\t<span>{{ column.transformarFooter() | currency: column.simboloMoneda ?? 'S/' }}</span>\n\t\t\t\t</span>\n</ng-template>\n\n<!--<jvs-column-type [column]=\"column\" [cellTemplate]=\"cellTemplate\" [columnFooterTemplate]=\"columnFooterTemplate\"></jvs-column-type>-->\n\n<ng-container matColumnDef=\"{{ column.property }}\">\n <!-- Definici\u00F3n del encabezado de la columna -->\n <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase text-center\" mat-header-cell mat-sort-header\n [disabled]=\"column.sort === false\">\n <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span>\n </th>\n\n <!-- Cuerpo de la celda, definido por los hijos -->\n <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell (click)=\"accionClick(row, $event)\">\n\n <ng-container [ngTemplateOutlet]=\"cellTemplate\" [ngTemplateOutletContext]=\"{row}\"></ng-container>\n\n </td>\n\n <th *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell>\n \t\t<span *ngIf=\"column.transformarFooter\"\n [class.text-sky-700]=\"column.transformarFooter() >= 0\"\n [class.text-red-700]=\"column.transformarFooter() < 0\"\n >\n\t\t\t\t\t<span>{{ column.transformarFooter() | currency: column.simboloMoneda ?? 'S/' }}</span>\n\t\t\t\t</span>\n </th>\n</ng-container>\n" }]
577
- }], propDecorators: { column: [{
578
- type: Input,
579
- args: [{ required: true }]
580
- }] } });
581
-
582
- class ColumnTypeIconsComponent extends ColumnTypeComponent {
583
- column = {};
584
- obtenerItems(columna, row) {
585
- if (typeof columna.items === 'function') {
586
- return columna.items(row);
587
- }
588
- return columna.items;
589
- }
590
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ColumnTypeIconsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
591
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: ColumnTypeIconsComponent, isStandalone: false, selector: "jvs-column-type-icons", inputs: { column: "column" }, usesInheritance: true, ngImport: i0, template: "<ng-template #cellTemplate let-row=\"row\">\n <div class=\"flex items-center justify-center\" [ngClass]=\"{ '-space-x-1': !column.iconsDef?.soloIcono }\"\n >\n <ng-container *ngFor=\"let icon of obtenerItems(column.iconsDef, row)\">\n <ng-container *ngIf=\"!column.iconsDef?.soloIcono; else soloIcono\">\n <button matRipple type=\"button\" *ngIf=\"!icon.esVisible || icon.esVisible(row)\"\n (click)=\"icon.click ? icon.click(row) : false; $event.stopPropagation()\"\n class=\"flex items-center justify-center p-1 rounded border shadow-sm hover:shadow-lg\"\n [ngClass]=\"icon.contentCss\"\n [matTooltip]=\"icon.toolTip ?? row[icon.toolTipField ?? '_field_']\"\n [matTooltipDisabled]=\"!icon.toolTip && !icon.toolTipField\"\n >\n <ng-container [ngTemplateOutlet]=\"iconoConTamanio\"\n [ngTemplateOutletContext]=\"{icon: icon.icon, iconClass: icon.cssClass, size: (icon.iconSize ?? column.iconsDef?.iconSize)}\"></ng-container>\n </button>\n </ng-container>\n <ng-template #soloIcono>\n <div *ngIf=\"!icon.esVisible || icon.esVisible(row)\" [ngClass]=\"icon.contentCss\"\n class=\"flex items-center\"\n [matTooltip]=\"icon.toolTip ?? row[icon.toolTipField ?? '_field_']\"\n [matTooltipDisabled]=\"!icon.toolTip && !icon.toolTipField\"\n >\n <ng-container [ngTemplateOutlet]=\"iconoConTamanio\"\n [ngTemplateOutletContext]=\"{icon: icon.icon, iconClass: icon.cssClass, size: (icon.iconSize ?? column.iconsDef?.iconSize)}\"></ng-container>\n </div>\n </ng-template>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-container matColumnDef=\"{{ column.property }}\">\n <!-- Definici\u00F3n del encabezado de la columna -->\n <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase text-center\" mat-header-cell mat-sort-header\n [disabled]=\"column.sort === false\">\n <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span>\n </th>\n\n <!-- Cuerpo de la celda, definido por los hijos -->\n <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell (click)=\"accionClick(row, $event)\">\n\n <ng-container [ngTemplateOutlet]=\"cellTemplate\" [ngTemplateOutletContext]=\"{row}\"></ng-container>\n\n </td>\n\n <th *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell>\n {{ column.transformarFooter ? column.transformarFooter() : '' }}\n </th>\n</ng-container>\n\n\n<ng-template #iconoConTamanio let-icon=\"icon\" let-iconClass=\"iconClass\" let-size=\"size\">\n <mat-icon *ngIf=\"size\" [svgIcon]=\"icon\" [ngClass]=\"iconClass\" [inline]=\"true\"\n [style.font-size]=\"size\"\n [style.height]=\"size\"\n [style.width]=\"size\"\n ></mat-icon>\n <mat-icon *ngIf=\"!size\" [svgIcon]=\"icon\" [ngClass]=\"iconClass\"></mat-icon>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i5$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
592
- }
593
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ColumnTypeIconsComponent, decorators: [{
594
- type: Component,
595
- args: [{ selector: 'jvs-column-type-icons', standalone: false, template: "<ng-template #cellTemplate let-row=\"row\">\n <div class=\"flex items-center justify-center\" [ngClass]=\"{ '-space-x-1': !column.iconsDef?.soloIcono }\"\n >\n <ng-container *ngFor=\"let icon of obtenerItems(column.iconsDef, row)\">\n <ng-container *ngIf=\"!column.iconsDef?.soloIcono; else soloIcono\">\n <button matRipple type=\"button\" *ngIf=\"!icon.esVisible || icon.esVisible(row)\"\n (click)=\"icon.click ? icon.click(row) : false; $event.stopPropagation()\"\n class=\"flex items-center justify-center p-1 rounded border shadow-sm hover:shadow-lg\"\n [ngClass]=\"icon.contentCss\"\n [matTooltip]=\"icon.toolTip ?? row[icon.toolTipField ?? '_field_']\"\n [matTooltipDisabled]=\"!icon.toolTip && !icon.toolTipField\"\n >\n <ng-container [ngTemplateOutlet]=\"iconoConTamanio\"\n [ngTemplateOutletContext]=\"{icon: icon.icon, iconClass: icon.cssClass, size: (icon.iconSize ?? column.iconsDef?.iconSize)}\"></ng-container>\n </button>\n </ng-container>\n <ng-template #soloIcono>\n <div *ngIf=\"!icon.esVisible || icon.esVisible(row)\" [ngClass]=\"icon.contentCss\"\n class=\"flex items-center\"\n [matTooltip]=\"icon.toolTip ?? row[icon.toolTipField ?? '_field_']\"\n [matTooltipDisabled]=\"!icon.toolTip && !icon.toolTipField\"\n >\n <ng-container [ngTemplateOutlet]=\"iconoConTamanio\"\n [ngTemplateOutletContext]=\"{icon: icon.icon, iconClass: icon.cssClass, size: (icon.iconSize ?? column.iconsDef?.iconSize)}\"></ng-container>\n </div>\n </ng-template>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-container matColumnDef=\"{{ column.property }}\">\n <!-- Definici\u00F3n del encabezado de la columna -->\n <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase text-center\" mat-header-cell mat-sort-header\n [disabled]=\"column.sort === false\">\n <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span>\n </th>\n\n <!-- Cuerpo de la celda, definido por los hijos -->\n <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell (click)=\"accionClick(row, $event)\">\n\n <ng-container [ngTemplateOutlet]=\"cellTemplate\" [ngTemplateOutletContext]=\"{row}\"></ng-container>\n\n </td>\n\n <th *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell>\n {{ column.transformarFooter ? column.transformarFooter() : '' }}\n </th>\n</ng-container>\n\n\n<ng-template #iconoConTamanio let-icon=\"icon\" let-iconClass=\"iconClass\" let-size=\"size\">\n <mat-icon *ngIf=\"size\" [svgIcon]=\"icon\" [ngClass]=\"iconClass\" [inline]=\"true\"\n [style.font-size]=\"size\"\n [style.height]=\"size\"\n [style.width]=\"size\"\n ></mat-icon>\n <mat-icon *ngIf=\"!size\" [svgIcon]=\"icon\" [ngClass]=\"iconClass\"></mat-icon>\n</ng-template>\n" }]
596
- }], propDecorators: { column: [{
597
- type: Input,
598
- args: [{ required: true }]
599
- }] } });
600
-
601
- class ColumnTypeModule {
602
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ColumnTypeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
603
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: ColumnTypeModule, declarations: [ColumnTypeComponent,
604
- ColumnTypeTextComponent,
605
- ColumnTypeMoneyComponent,
606
- ColumnTypeNumberComponent,
607
- ColumnTypeDateComponent,
608
- ColumnTypeIconsComponent,
609
- ColumnTypeSinoComponent,
610
- ColumnTypeProgressbarComponent], imports: [CommonModule,
611
- MatTableModule,
612
- MatSortModule,
613
- MatTooltipModule,
614
- NoSanitizePipe,
615
- ZeroFillPipe,
616
- MatRipple,
617
- MatIcon,
618
- ProgressBarComponent], exports: [ColumnTypeTextComponent,
619
- ColumnTypeMoneyComponent,
620
- ColumnTypeNumberComponent,
621
- ColumnTypeDateComponent,
622
- ColumnTypeIconsComponent,
623
- ColumnTypeSinoComponent,
624
- ColumnTypeProgressbarComponent] });
625
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ColumnTypeModule, imports: [CommonModule,
626
- MatTableModule,
627
- MatSortModule,
628
- MatTooltipModule,
629
- MatIcon,
630
- ProgressBarComponent] });
631
- }
632
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ColumnTypeModule, decorators: [{
633
- type: NgModule,
634
- args: [{
635
- declarations: [
636
- ColumnTypeComponent,
637
- ColumnTypeTextComponent,
638
- ColumnTypeMoneyComponent,
639
- ColumnTypeNumberComponent,
640
- ColumnTypeDateComponent,
641
- ColumnTypeIconsComponent,
642
- ColumnTypeSinoComponent,
643
- ColumnTypeProgressbarComponent,
644
- ],
645
- imports: [
646
- CommonModule,
647
- MatTableModule,
648
- MatSortModule,
649
- MatTooltipModule,
650
- NoSanitizePipe,
651
- ZeroFillPipe,
652
- MatRipple,
653
- MatIcon,
654
- ProgressBarComponent,
655
- ],
656
- exports: [
657
- ColumnTypeTextComponent,
658
- ColumnTypeMoneyComponent,
659
- ColumnTypeNumberComponent,
660
- ColumnTypeDateComponent,
661
- ColumnTypeIconsComponent,
662
- ColumnTypeSinoComponent,
663
- ColumnTypeProgressbarComponent,
664
- ]
665
- }]
666
- }] });
667
-
668
- class TablaMantenimientoColumnDefsComponent {
669
- table;
670
- cdRef;
671
- objThis;
672
- nombreColeccion;
673
- colDetalle;
674
- chkLista; // = new DataModel();
675
- chkListaChange = new EventEmitter();
676
- columnDefLocales;
677
- columnDefEnSubComponentes;
678
- constructor(table, cdRef) {
679
- this.table = table;
680
- this.cdRef = cdRef;
681
- }
682
- ngAfterContentInit() {
683
- if (this.table) {
684
- this.cdRef.detectChanges();
685
- this.columnDefEnSubComponentes.forEach(refCol => {
686
- this.table.addColumnDef(refCol);
687
- });
688
- this.columnDefLocales.forEach(refCol => {
689
- this.table.addColumnDef(refCol);
690
- });
691
- }
692
- }
693
- trackByProperty(index, column) {
694
- return column.property;
695
- }
696
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: TablaMantenimientoColumnDefsComponent, deps: [{ token: i2.MatTable, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
697
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: TablaMantenimientoColumnDefsComponent, isStandalone: true, selector: "jvs-tabla-mantenimiento-column-defs", inputs: { objThis: "objThis", nombreColeccion: "nombreColeccion", colDetalle: "colDetalle", chkLista: "chkLista" }, outputs: { chkListaChange: "chkListaChange" }, queries: [{ propertyName: "columnDefEnSubComponentes", predicate: MatColumnDef, descendants: true }], viewQueries: [{ propertyName: "columnDefLocales", predicate: MatColumnDef, descendants: true }], ngImport: i0, template: "<ng-content></ng-content>\n\n\n\n<ng-container *ngFor=\"let column of colDetalle; trackBy: trackByProperty\">\n\n <ng-container *ngIf=\"column.type === 'expandir'\" [matColumnDef]=\"column.property\">\n\n <th *matHeaderCellDef class=\"w-4\" mat-header-cell> <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span></th>\n <td *matCellDef=\"let row\" class=\"w-4 text-center\" mat-cell>\n <button type=\"button\" class=\"boton-circular text-primary-contrast bg-primary mat-elevation-z2\" matRipple\n *ngIf=\"column.click\"\n (click)=\"column.click(row); row.isExpanded = !row.isExpanded; $event.stopPropagation()\"\n matTooltip=\"Expandir / Contraer\">\n <mat-icon class=\"icon-xs\" [svgIcon]=\"(row.isExpanded ? 'roundExpandLess' : 'roundExpandMore')\"></mat-icon>\n </button>\n <button type=\"button\" class=\"boton-circular text-primary-contrast bg-primary mat-elevation-z2\" matRipple\n *ngIf=\"!column.click\"\n (click)=\"row.isExpanded = !row.isExpanded; $event.stopPropagation()\"\n matTooltip=\"Expandir / Contraer\">\n <mat-icon class=\"icon-xs\" [svgIcon]=\"(row.isExpanded ? 'roundExpandLess' : 'roundExpandMore')\"></mat-icon>\n </button>\n </td>\n <td *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell></td>\n\n </ng-container>\n <ng-container *ngIf=\"column.type === 'checkbox'\" [matColumnDef]=\"column.property\">\n\n <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"w-4 text-center\" mat-header-cell>\n <mat-checkbox *ngIf=\"chkLista\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"chkLista.checkbox.establecerTodos($event.checked)\"\n [indeterminate]=\"chkLista.checkbox.algunosActivos\"\n [checked]=\"chkLista.checkbox.todosActivos\"\n ></mat-checkbox>\n </th>\n <td *matCellDef=\"let row\" class=\"w-4 text-center\" mat-cell>\n <mat-checkbox *ngIf=\"chkLista\"\n (click)=\"$event.stopPropagation()\"\n [(ngModel)]=\"chkLista.modelosChk[chkLista.generarId(row, (column.chkField ?? column.property), column.chkFieldSeparador)]\"\n [ngModelOptions]=\"{standalone: true}\"\n ></mat-checkbox>\n\n </td>\n <td *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell></td>\n\n </ng-container>\n <ng-container *ngIf=\"column.type === 'estiloEstablecido'\" [matColumnDef]=\"column.property\">\n\n <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase text-center\" mat-header-cell\n mat-sort-header\n [disabled]=\"column.sort === false\">\n <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span>\n <span class=\"text-red-900 font-bold bg-white\">CONFIGURAR ESTILO ESTABLECIDO</span>\n </th>\n <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell>\n {{ column.property }}\n <span class=\"text-red-900 font-bold bg-white\">CONFIGURAR ESTILO ESTABLECIDO</span>\n </td>\n <th *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" style=\"height: unset !important;\" mat-footer-cell\n [innerHTML]=\"column.transformarFooter ? column.transformarFooter() : ''\">\n </th>\n\n </ng-container>\n\n <jvs-column-type-text *ngIf=\"column.type == 'text'\" [column]=\"column\"></jvs-column-type-text>\n <jvs-column-type-money *ngIf=\"column.type == 'money'\" [column]=\"column\"></jvs-column-type-money>\n <jvs-column-type-number *ngIf=\"column.type == 'number'\" [column]=\"column\"></jvs-column-type-number>\n <jvs-column-type-date *ngIf=\"column.type == 'date'\" [column]=\"column\"></jvs-column-type-date>\n <jvs-column-type-icons *ngIf=\"column.type == 'icons'\" [column]=\"column\"></jvs-column-type-icons>\n <jvs-column-type-sino *ngIf=\"column.type == 'yes_no'\" [column]=\"column\"></jvs-column-type-sino>\n <jvs-column-type-progressbar *ngIf=\"column.type == 'progress'\" [column]=\"column\"></jvs-column-type-progressbar>\n\n\n\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i5$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "component", type: i3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i2.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ColumnTypeModule }, { kind: "component", type: ColumnTypeTextComponent, selector: "jvs-column-type-text", inputs: ["column"] }, { kind: "component", type: ColumnTypeMoneyComponent, selector: "jvs-column-type-money", inputs: ["column"] }, { kind: "component", type: ColumnTypeNumberComponent, selector: "jvs-column-type-number", inputs: ["column"] }, { kind: "component", type: ColumnTypeDateComponent, selector: "jvs-column-type-date", inputs: ["column"] }, { kind: "component", type: ColumnTypeIconsComponent, selector: "jvs-column-type-icons", inputs: ["column"] }, { kind: "component", type: ColumnTypeSinoComponent, selector: "jvs-column-type-sino", inputs: ["column"] }, { kind: "component", type: ColumnTypeProgressbarComponent, selector: "jvs-column-type-progressbar", inputs: ["column"] }] });
698
- }
699
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: TablaMantenimientoColumnDefsComponent, decorators: [{
700
- type: Component,
701
- args: [{ selector: 'jvs-tabla-mantenimiento-column-defs', standalone: true, imports: [
702
- CommonModule,
703
- MatCheckboxModule,
704
- MatIconModule,
705
- MatRippleModule,
706
- MatSortModule,
707
- MatTableModule,
708
- MatTooltipModule,
709
- ReactiveFormsModule,
710
- FormsModule,
711
- ColumnTypeModule,
712
- ], template: "<ng-content></ng-content>\n\n\n\n<ng-container *ngFor=\"let column of colDetalle; trackBy: trackByProperty\">\n\n <ng-container *ngIf=\"column.type === 'expandir'\" [matColumnDef]=\"column.property\">\n\n <th *matHeaderCellDef class=\"w-4\" mat-header-cell> <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span></th>\n <td *matCellDef=\"let row\" class=\"w-4 text-center\" mat-cell>\n <button type=\"button\" class=\"boton-circular text-primary-contrast bg-primary mat-elevation-z2\" matRipple\n *ngIf=\"column.click\"\n (click)=\"column.click(row); row.isExpanded = !row.isExpanded; $event.stopPropagation()\"\n matTooltip=\"Expandir / Contraer\">\n <mat-icon class=\"icon-xs\" [svgIcon]=\"(row.isExpanded ? 'roundExpandLess' : 'roundExpandMore')\"></mat-icon>\n </button>\n <button type=\"button\" class=\"boton-circular text-primary-contrast bg-primary mat-elevation-z2\" matRipple\n *ngIf=\"!column.click\"\n (click)=\"row.isExpanded = !row.isExpanded; $event.stopPropagation()\"\n matTooltip=\"Expandir / Contraer\">\n <mat-icon class=\"icon-xs\" [svgIcon]=\"(row.isExpanded ? 'roundExpandLess' : 'roundExpandMore')\"></mat-icon>\n </button>\n </td>\n <td *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell></td>\n\n </ng-container>\n <ng-container *ngIf=\"column.type === 'checkbox'\" [matColumnDef]=\"column.property\">\n\n <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"w-4 text-center\" mat-header-cell>\n <mat-checkbox *ngIf=\"chkLista\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"chkLista.checkbox.establecerTodos($event.checked)\"\n [indeterminate]=\"chkLista.checkbox.algunosActivos\"\n [checked]=\"chkLista.checkbox.todosActivos\"\n ></mat-checkbox>\n </th>\n <td *matCellDef=\"let row\" class=\"w-4 text-center\" mat-cell>\n <mat-checkbox *ngIf=\"chkLista\"\n (click)=\"$event.stopPropagation()\"\n [(ngModel)]=\"chkLista.modelosChk[chkLista.generarId(row, (column.chkField ?? column.property), column.chkFieldSeparador)]\"\n [ngModelOptions]=\"{standalone: true}\"\n ></mat-checkbox>\n\n </td>\n <td *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell></td>\n\n </ng-container>\n <ng-container *ngIf=\"column.type === 'estiloEstablecido'\" [matColumnDef]=\"column.property\">\n\n <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase text-center\" mat-header-cell\n mat-sort-header\n [disabled]=\"column.sort === false\">\n <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span>\n <span class=\"text-red-900 font-bold bg-white\">CONFIGURAR ESTILO ESTABLECIDO</span>\n </th>\n <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell>\n {{ column.property }}\n <span class=\"text-red-900 font-bold bg-white\">CONFIGURAR ESTILO ESTABLECIDO</span>\n </td>\n <th *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" style=\"height: unset !important;\" mat-footer-cell\n [innerHTML]=\"column.transformarFooter ? column.transformarFooter() : ''\">\n </th>\n\n </ng-container>\n\n <jvs-column-type-text *ngIf=\"column.type == 'text'\" [column]=\"column\"></jvs-column-type-text>\n <jvs-column-type-money *ngIf=\"column.type == 'money'\" [column]=\"column\"></jvs-column-type-money>\n <jvs-column-type-number *ngIf=\"column.type == 'number'\" [column]=\"column\"></jvs-column-type-number>\n <jvs-column-type-date *ngIf=\"column.type == 'date'\" [column]=\"column\"></jvs-column-type-date>\n <jvs-column-type-icons *ngIf=\"column.type == 'icons'\" [column]=\"column\"></jvs-column-type-icons>\n <jvs-column-type-sino *ngIf=\"column.type == 'yes_no'\" [column]=\"column\"></jvs-column-type-sino>\n <jvs-column-type-progressbar *ngIf=\"column.type == 'progress'\" [column]=\"column\"></jvs-column-type-progressbar>\n\n\n\n</ng-container>\n" }]
713
- }], ctorParameters: () => [{ type: i2.MatTable, decorators: [{
714
- type: Optional
715
- }] }, { type: i0.ChangeDetectorRef }], propDecorators: { objThis: [{
716
- type: Input
717
- }], nombreColeccion: [{
718
- type: Input
719
- }], colDetalle: [{
720
- type: Input
721
- }], chkLista: [{
722
- type: Input
723
- }], chkListaChange: [{
724
- type: Output
725
- }], columnDefLocales: [{
726
- type: ViewChildren,
727
- args: [MatColumnDef]
728
- }], columnDefEnSubComponentes: [{
729
- type: ContentChildren,
730
- args: [MatColumnDef, { descendants: true }]
731
- }] } });
732
-
733
- class TablaMantenimientoMenuComponent {
734
- objThis;
735
- nombreColeccion;
736
- item;
737
- derechosActuales;
738
- // @Input() modalPrincipal;
739
- // @Input() botonDisabled = (btn: BotonMantenimiento, item: any) => [];
740
- opcionSelecionada = new EventEmitter();
741
- menu;
742
- subItems;
743
- botonTemplate;
744
- constructor() {
745
- }
746
- ngOnInit() {
747
- }
748
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: TablaMantenimientoMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
749
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: TablaMantenimientoMenuComponent, isStandalone: true, selector: "jvs-tabla-mantenimiento-menu", inputs: { objThis: "objThis", nombreColeccion: "nombreColeccion", item: "item", derechosActuales: "derechosActuales", subItems: "subItems", botonTemplate: "botonTemplate" }, outputs: { opcionSelecionada: "opcionSelecionada" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, static: true }], ngImport: i0, template: "<mat-menu #menu=\"matMenu\">\n <div class=\"mat-menu bg-white rounded mat-elevation-z8 shadow botonesContextual w-full\">\n <ng-container *ngFor=\"let btn of subItems\">\n <ng-container *ngTemplateOutlet=\"botonTemplate; context:{btn: btn, item: objThis['seleccionados'][nombreColeccion], barraSuperior: false}\"></ng-container>\n </ng-container>\n </div>\n</mat-menu>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }] });
750
- }
751
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: TablaMantenimientoMenuComponent, decorators: [{
752
- type: Component,
753
- args: [{ selector: 'jvs-tabla-mantenimiento-menu', standalone: true, imports: [
754
- CommonModule,
755
- MatMenuModule,
756
- ], template: "<mat-menu #menu=\"matMenu\">\n <div class=\"mat-menu bg-white rounded mat-elevation-z8 shadow botonesContextual w-full\">\n <ng-container *ngFor=\"let btn of subItems\">\n <ng-container *ngTemplateOutlet=\"botonTemplate; context:{btn: btn, item: objThis['seleccionados'][nombreColeccion], barraSuperior: false}\"></ng-container>\n </ng-container>\n </div>\n</mat-menu>\n" }]
757
- }], ctorParameters: () => [], propDecorators: { objThis: [{
758
- type: Input
759
- }], nombreColeccion: [{
760
- type: Input
761
- }], item: [{
762
- type: Input
763
- }], derechosActuales: [{
764
- type: Input
765
- }], opcionSelecionada: [{
766
- type: Output
767
- }], menu: [{
768
- type: ViewChild,
769
- args: ['menu', { static: true }]
770
- }], subItems: [{
771
- type: Input,
772
- args: [{ required: true }]
773
- }], botonTemplate: [{
774
- type: Input,
775
- args: [{ required: true }]
776
- }] } });
777
-
778
- const getFileName = (name) => {
779
- const timeSpan = new Date().toISOString();
780
- const sheetName = name || 'ExportResult';
781
- const fileName = `${sheetName}-${timeSpan}`;
782
- return {
783
- sheetName,
784
- fileName
785
- };
786
- };
787
- class TableUtil {
788
- static exportTableToExcelV2(targetTableElm, name) {
789
- const { sheetName, fileName } = getFileName(name);
790
- console.log(targetTableElm);
791
- const wb = XLSX.utils.table_to_book(targetTableElm, {
792
- sheet: sheetName
793
- });
794
- XLSX.writeFile(wb, `${fileName}.xlsx`);
795
- }
796
- static exportTableToExcel(tableId, name) {
797
- const { sheetName, fileName } = getFileName(name);
798
- const targetTableElm = document.getElementById(tableId);
799
- console.log(targetTableElm);
800
- const wb = XLSX.utils.table_to_book(targetTableElm, {
801
- sheet: sheetName
802
- });
803
- // XLSX.writeFile(wb, `${fileName}.xlsx`);
804
- }
805
- static exportArrayToExcel(arr, name) {
806
- const { sheetName, fileName } = getFileName(name);
807
- const wb = XLSX.utils.book_new();
808
- const ws = XLSX.utils.json_to_sheet(arr, { dateNF: 'dd/MM/yyyy' });
809
- XLSX.utils.book_append_sheet(wb, ws, sheetName);
810
- XLSX.writeFile(wb, `${fileName}.xlsx`);
811
- }
812
- static getWorkBook(htmlTableId, data) {
813
- const targetTableElm = document.getElementById(htmlTableId);
814
- const tableToSheet = XLSX.utils.table_to_sheet(targetTableElm, { raw: true });
815
- const jsonToSheet = XLSX.utils.json_to_sheet(data);
816
- const sheetToJson = XLSX.utils.sheet_to_json(tableToSheet);
817
- return { tableToSheet, jsonToSheet, sheetToJson };
818
- }
819
- }
820
-
821
- class TablaMantenimientoService {
822
- get templateBotonesComunes() {
823
- return [
824
- { icono: 'roundAdd', tipo: 'nuevo', class: 'text-green-100 !bg-green-600', sinCondicion: true },
825
- { icono: 'roundEdit', tipo: 'editar', class: 'text-amber-900 !bg-amber-300' },
826
- { icono: 'roundDelete', tipo: 'eliminar', class: 'text-red-100 !bg-red-700' },
827
- { icono: 'roundDelete', tipo: 'eliminar_fila', class: 'text-red-100 !bg-red-700' },
828
- { icono: 'roundPrint', tipo: 'imprimir', class: '!bg-blue-100 text-blue-700' },
829
- { icono: 'roundDownload', tipo: 'descargar', class: '!bg-blue-100 text-blue-700' },
830
- { icono: 'roundFolder', tipo: 'ver_archivos', class: '!bg-green-100 text-green-700' },
831
- { icono: 'fa5FilePdf', tipo: 'exportar_pdf', label: 'Exportar a PDF', class: 'bg-pdf-light text-pdf' },
832
- { icono: 'fa5FileExcel', tipo: 'exportar_excel', label: 'Exportar a Excel', class: 'bg-excel-light text-excel' },
833
- { icono: 'fa5sFileExport', tipo: 'exportacion_avanzada', label: 'Exportación Avanzada', class: '!text-indigo-600 !bg-indigo-100' },
834
- { icono: 'icSave', tipo: 'guardar', class: '!text-indigo-100 !bg-indigo-600' },
835
- { icono: 'icCancel', tipo: 'cancelar', class: '!text-cyan-100 !bg-cyan-600' },
836
- {
837
- icono: 'roundFactCheck', tipo: 'seleccionar',
838
- class: 'text-blue-100 bg-blue-700 dark:text-blue-100 dark:bg-blue-700'
839
- },
840
- { icono: 'roundListAlt', tipo: 'detalle', class: 'text-blue-100 bg-blue-700 dark:text-blue-100 dark:bg-blue-700' },
841
- { icono: 'roundPublic', tipo: 'ver_mapa', class: 'text-blue-100 bg-blue-700 dark:text-blue-100 dark:bg-blue-700' },
842
- { icono: 'icCheck', tipo: 'activar', },
843
- { icono: 'icClose', tipo: 'desactivar', },
844
- { icono: 'fa5sLock', tipo: 'cerrar', },
845
- { icono: 'fa5sLockOpen', tipo: 'abrir', },
846
- ];
847
- }
848
- get templateColumnasTabla() {
849
- return [
850
- { label: '#', labelLista: 'Numeración', property: 'numeracion_automatica', type: 'numeracion_automatica' },
851
- ];
852
- }
853
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: TablaMantenimientoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
854
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: TablaMantenimientoService, providedIn: 'root' });
855
- }
856
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: TablaMantenimientoService, decorators: [{
857
- type: Injectable,
858
- args: [{
859
- providedIn: 'root',
860
- }]
861
- }] });
862
-
863
- var TablaMantenimientoComponent_1;
864
- let TablaMantenimientoComponent = class TablaMantenimientoComponent {
865
- static { TablaMantenimientoComponent_1 = this; }
866
- fb;
867
- overlay;
868
- viewContainerRef;
869
- tablaMantenimientoService;
870
- cdRef;
871
- static nextId = 0;
872
- id = `jvs-tabla-mantenimiento-id-${TablaMantenimientoComponent_1.nextId++}`;
873
- get templateBotonesComunes() {
874
- return this.tablaMantenimientoService.templateBotonesComunes;
875
- }
876
- ;
877
- get templateColumnasTabla() {
878
- return this.tablaMantenimientoService.templateColumnasTabla;
879
- }
880
- ;
881
- dataSuscription;
882
- objThis;
883
- nombreColeccion;
884
- ctrlBusquedaValue = '';
885
- ctrlBusquedaPlaceholder = 'Buscar...';
886
- filtroCampos = true;
887
- paginador = true;
888
- esTabla = true;
889
- readOnly = false;
890
- filaExtraHeader;
891
- filaFooter = false;
892
- botonesCRUD = 'CUD';
893
- dblclickItem = new EventEmitter();
894
- objBotonesCRUD = [
895
- { tipo: 'nuevo', sinCondicion: true },
896
- { tipo: 'editar' },
897
- { tipo: 'eliminar' },
898
- ];
899
- classSeleccionado = ['elemento-seleccionado', /*'!bg-primary-activo','text-primary-contrast', */ 'mat-elevation-z8', /*'dark:!bg-primary-dark-activo',*/ 'border-y-2 border-primary-contrast', 'font-bold', 'text-2xl'];
900
- // @Input() classAnulado = ['line-through', 'text-red', 'italic'];
901
- classAnulado = ['elemento-anulado', /*'line-through', */ 'text-red-900', 'bg-red-200'];
902
- campoAnulado = null;
903
- campoAnuladoMensaje = null;
904
- opcionSelecionada = new EventEmitter();
905
- opcBusqueda = new EventEmitter();
906
- accionRecargar = new EventEmitter();
907
- set selectionModel(val) {
908
- this.objSeleccionado = val;
909
- }
910
- selectionModelChange = new EventEmitter();
911
- isRecargarUsed = false;
912
- filaExtraTemplate;
913
- paginator;
914
- sort;
915
- exportarExcel = true;
916
- // MIO
917
- pageSize = 25;
918
- pageSizeOptions = [5, 10, 25, 50, 100, 500, 1000];
919
- dataSourceChange = new EventEmitter();
920
- resultados = new EventEmitter();
921
- dataSource = new MatTableDataSource(); // or whatever type of datasource you have
922
- // this is where the magic happens:
923
- table;
924
- columnDefs;
925
- componenteCargadoTotalmente = false;
926
- /////////////////////
927
- paginacion = {
928
- pageSize: 25,
929
- pageSizeOptions: [],
930
- pageCurrent: null,
931
- pageIndex: 0,
932
- pageLength: null,
933
- };
934
- // All that's left is to add them to the table ourselves:
935
- ignorarDerechos = false;
936
- derechosActuales = null;
937
- // listaCRUD: BotonMantenimiento[] = [];
938
- rows;
939
- rowFooter;
940
- mouseEvent$;
941
- overlayRef;
942
- userMenu;
943
- // FILTRO BUSQUEDA
944
- opcFiltroActual = {};
945
- capitalizarTexto = capitalizarTexto;
946
- _seleccionado = {};
947
- cCampoBusqueda = new FormControl('');
948
- chkLista = new DataModel();
949
- constructor(fb, overlay, viewContainerRef, tablaMantenimientoService, cdRef) {
950
- this.fb = fb;
951
- this.overlay = overlay;
952
- this.viewContainerRef = viewContainerRef;
953
- this.tablaMantenimientoService = tablaMantenimientoService;
954
- this.cdRef = cdRef;
955
- // this._seleccionado[this.nombreColeccion] = null;
956
- }
957
- _ctrlBusqueda = '';
958
- get ctrlBusqueda() {
959
- return this._ctrlBusqueda;
960
- }
961
- set ctrlBusqueda(val) {
962
- if (val == '') {
963
- val = 'simple';
964
- }
965
- this._ctrlBusqueda = val;
966
- }
967
- // @Input() leyenda;
968
- _leyenda = undefined;
969
- get leyenda() {
970
- return this._leyenda;
971
- }
972
- set leyenda(val) {
973
- if (typeof val == 'string') {
974
- this._leyenda = { text: val };
975
- }
976
- else {
977
- this._leyenda = val;
978
- }
979
- }
980
- // @Input() idTabla: string[];
981
- _idTabla = [];
982
- get idTabla() {
983
- return this._idTabla;
984
- }
985
- set idTabla(val) {
986
- if (Array.isArray(val)) {
987
- this._idTabla = val;
988
- }
989
- else {
990
- this._idTabla.push(val);
991
- }
992
- }
993
- _columnasTabla = [];
994
- get columnasTabla() {
995
- return this._columnasTabla ?? [];
996
- }
997
- set columnasTabla(val) {
998
- const reemplazarConTemplate = (listaInicial = []) => {
999
- listaInicial.forEach((btnActual, idx) => {
1000
- const btnEnTemplate = buscarEnArray(this.templateColumnasTabla, 'property', btnActual.property);
1001
- if (btnEnTemplate) {
1002
- listaInicial[idx] = {
1003
- ...btnEnTemplate,
1004
- ...btnActual
1005
- };
1006
- }
1007
- if (listaInicial[idx].type == 'text') {
1008
- if (!listaInicial[idx].text) {
1009
- listaInicial[idx].text = {
1010
- cssStyle: {}
1011
- };
1012
- }
1013
- else if (!listaInicial[idx].text.cssStyle) {
1014
- listaInicial[idx].text.cssStyle = {};
1015
- }
1016
- listaInicial[idx].text.cssStyle = { ...listaInicial[idx].text.cssStyle };
1017
- }
1018
- else if (listaInicial[idx].type == 'estado') {
1019
- const mutar = {
1020
- ...listaInicial[idx],
1021
- type: 'icons',
1022
- iconsDef: {
1023
- soloIcono: true,
1024
- iconSize: '16px',
1025
- items: [
1026
- // {
1027
- // icon: 'roundToggleOff', contentCss: 'text-gray-400',
1028
- // esVisible: (row) => row['iCredDepenTareaEstado'] == 0
1029
- // },
1030
- // {
1031
- // icon: 'roundToggleOn', contentCss: 'text-green-600',
1032
- // esVisible: (row) => row['iCredDepenTareaEstado'] == 1
1033
- // },
1034
- ]
1035
- },
1036
- };
1037
- if (listaInicial[idx].estados) {
1038
- listaInicial[idx].estados.forEach((estado) => {
1039
- if (Array.isArray(mutar.iconsDef.items)) {
1040
- mutar.iconsDef.items.push({
1041
- icon: estado.icon, contentCss: estado.cssClasses,
1042
- esVisible: (row) => row[listaInicial[idx].property] == estado.estado,
1043
- });
1044
- }
1045
- });
1046
- }
1047
- listaInicial[idx] = mutar;
1048
- }
1049
- if (btnActual.type == 'custom') {
1050
- listaInicial[idx].datosExtra = {
1051
- ...listaInicial[idx].datosExtra,
1052
- tabla_mantenimiento_config_visibleAlias: listaInicial[idx].visible == undefined ? true : listaInicial[idx].visible,
1053
- };
1054
- listaInicial[idx].visible = false;
1055
- }
1056
- });
1057
- return listaInicial;
1058
- };
1059
- this._columnasTabla = val ? reemplazarConTemplate(val) : [];
1060
- }
1061
- // @Input() botonesMenu: BotonMantenimiento[] = [];
1062
- _botonesMenu = {
1063
- crud: undefined,
1064
- principal: [],
1065
- izquierda: [],
1066
- derecha: [],
1067
- secundario: [],
1068
- inferior: [],
1069
- };
1070
- get botonesMenu() {
1071
- return this._botonesMenu;
1072
- }
1073
- get botonesMenuFinal() {
1074
- const nuevoBotonesMenu = this.botonesMenu;
1075
- // Iteramos sobre cada sección de botones
1076
- Object.keys(nuevoBotonesMenu).forEach(seccion => {
1077
- nuevoBotonesMenu[seccion] = nuevoBotonesMenu[seccion]?.filter((boton) => {
1078
- if (this.readOnly) {
1079
- if (boton.subItems) {
1080
- boton.subItems = boton.subItems.filter((subItem) => subItem.ignorarReadOnly === true);
1081
- return boton.subItems.length < 1;
1082
- }
1083
- return boton.ignorarReadOnly === true;
1084
- }
1085
- return true;
1086
- }); // Filtramos los botones nulos
1087
- });
1088
- return nuevoBotonesMenu;
1089
- }
1090
- set botonesMenu(val) {
1091
- const reemplazarConTemplate = (listaInicial = []) => listaInicial.map((btnActual) => {
1092
- const btnEnTemplate = buscarEnArray(this.templateBotonesComunes, 'tipo', btnActual.tipoTemplate ?? btnActual.tipo);
1093
- if (btnEnTemplate) {
1094
- if (btnActual.tipoTemplate && !btnActual.label) {
1095
- btnEnTemplate.label = undefined;
1096
- }
1097
- if (btnActual.subItems) {
1098
- return { ...btnEnTemplate, ...btnActual, seccion: this.nombreColeccion, subItems: reemplazarConTemplate(btnActual.subItems) };
1099
- }
1100
- return { ...btnEnTemplate, ...btnActual, seccion: this.nombreColeccion };
1101
- }
1102
- return btnActual;
1103
- });
1104
- if (val?.crud) {
1105
- this.objBotonesCRUD = this.templateBotonesComunes
1106
- .filter(obj => ['nuevo', 'editar', 'eliminar'].includes(obj.tipo))
1107
- .map(obj => val.crud?.find(o => o.tipo === obj.tipo) ?? obj);
1108
- }
1109
- Object.keys(val).forEach(btnKey => {
1110
- if (val[btnKey]) {
1111
- val[btnKey] = reemplazarConTemplate(val[btnKey]);
1112
- }
1113
- });
1114
- this._botonesMenu = { ...this._botonesMenu, ...val };
1115
- }
1116
- get listaMenuCompleto() {
1117
- let menuTotal = [];
1118
- menuTotal = menuTotal.concat(this.botonesMenu.izquierda ?? []);
1119
- menuTotal = menuTotal.concat(this.botonesMenu.crud ?? []);
1120
- menuTotal = menuTotal.concat(this.botonesMenu.principal ?? []);
1121
- menuTotal = menuTotal.concat(this.botonesMenu.derecha ?? []);
1122
- menuTotal = menuTotal.concat(this.botonesMenu.secundario ?? []);
1123
- menuTotal = menuTotal.concat(this.botonesMenu.inferior ?? []);
1124
- return menuTotal;
1125
- }
1126
- get objVisibleColumns() {
1127
- return this.columnasTabla.filter(column => {
1128
- if (column.noMostrar != undefined) {
1129
- column.noMostrarEnLista = column.noMostrar;
1130
- }
1131
- return !tipoValorFuncion(column.noMostrarEnLista, false);
1132
- }).filter(column => {
1133
- // SECCION MODIFICADOR
1134
- if (this.filaExtraTemplate) {
1135
- column.sort = false;
1136
- }
1137
- // Fin SECCION MODIFICADOR
1138
- column.visible = tipoValorFuncion(column.visible, true);
1139
- if (!column.visible && column.esVisible != undefined) {
1140
- column.visible = column.esVisible();
1141
- }
1142
- return column.visible;
1143
- });
1144
- }
1145
- get visibleColumns() {
1146
- return this.objVisibleColumns.map(column => column.property);
1147
- }
1148
- get tieneCheckbox() {
1149
- return this.columnasTabla && this.columnasTabla.length > 0 && this.columnasTabla.find(col => col.type === 'checkbox') || false;
1150
- }
1151
- get buscarItemSeleccionado() {
1152
- const dRet = this.dataSource.data.find(itm => this._seleccionado === this.propiedadSeleccion(itm));
1153
- return dRet ?? null;
1154
- }
1155
- get objSeleccionado() {
1156
- return this.buscarItemSeleccionado; // ?? this.objThis?.['seleccionados']?.[this.nombreColeccion];
1157
- }
1158
- set objSeleccionado(val) {
1159
- // if (val) {
1160
- this.seleccionarItem(val, true);
1161
- // }
1162
- /* if (!this.objThis) {
1163
- this.objThis = {};
1164
- }
1165
- if (!this.objThis['seleccionados']) {
1166
- this.objThis['seleccionados'] = {};
1167
- }
1168
- this.objThis['seleccionados'][this.nombreColeccion] = val;*/
1169
- }
1170
- get idsSeleccionado() {
1171
- return this.chkLista.generarLista();
1172
- }
1173
- idTablaValor(data) {
1174
- if (data) {
1175
- if (this.idTabla.length < 1) {
1176
- return shortHash(JSON.stringify({ data, claseFinal: undefined }));
1177
- }
1178
- return this.idTabla.map(d => data[d]).join('-');
1179
- }
1180
- return '';
1181
- }
1182
- condicionesClaseFila = (item) => [];
1183
- rowTooltip = (item) => '';
1184
- soloIconos = false;
1185
- ngOnInit() {
1186
- // this.sharedService.dataRutaActual$.pipe(untilDestroyed(this)).subscribe(datRouteData => {
1187
- // if (datRouteData) {
1188
- // this.derechosActuales = datRouteData['derechos'];
1189
- // if (!this.ignorarDerechos) {
1190
- // this.ignorarDerechos = datRouteData['ignorarDerechos'] ?? false;
1191
- // }
1192
- // }
1193
- // });
1194
- this.paginacion.pageSize = this.pageSize;
1195
- this.paginacion.pageSizeOptions = this.pageSizeOptions;
1196
- this.actualizarCrud();
1197
- this.agregarBotonesExportacion();
1198
- if (this.dataSuscription) {
1199
- this.dataSuscription.subscribe(res => {
1200
- if (res) {
1201
- if (this.objSeleccionado) {
1202
- console.log('SELECCIONADO');
1203
- if (this.idTabla && this.idTabla.length > 0) {
1204
- console.log('ID TABLA');
1205
- const arrayData = this.idTabla.map(d => this.objSeleccionado[d]);
1206
- console.log(arrayData);
1207
- const busqueda = buscarEnArray(res, this.idTabla, arrayData);
1208
- console.log(busqueda);
1209
- if (busqueda) {
1210
- console.log(busqueda);
1211
- this.objSeleccionado = busqueda;
1212
- }
1213
- }
1214
- else {
1215
- console.log('eLSE ID TABLA');
1216
- const dataStr = res.find((itm) => shortHash(JSON.stringify({
1217
- ...itm, claseFinal: undefined
1218
- })) == shortHash(JSON.stringify({ ...this.objSeleccionado, claseFinal: undefined })));
1219
- if (dataStr) {
1220
- this.objSeleccionado = dataStr;
1221
- }
1222
- }
1223
- }
1224
- this.setData(res);
1225
- }
1226
- });
1227
- }
1228
- this.isRecargarUsed = this.accionRecargar.observed;
1229
- }
1230
- ngAfterContentInit() {
1231
- this.componenteCargadoTotalmente = true;
1232
- this.cdRef.detectChanges();
1233
- this.columnDefs.forEach(columnDef => {
1234
- this.table.addColumnDef(columnDef);
1235
- const col = this.columnasTabla.find(col => col.property == columnDef.name);
1236
- if (col && col.type == 'custom') {
1237
- console.warn(JSON.stringify(col));
1238
- col.visible = col.datosExtra?.tabla_mantenimiento_config_visibleAlias ?? col.visible;
1239
- delete col.datosExtra?.tabla_mantenimiento_config_visibleAlias;
1240
- if (Object.keys(col.datosExtra).length < 1) {
1241
- delete col.datosExtra;
1242
- }
1243
- }
1244
- });
1245
- // console.log(a);
1246
- if (this.ctrlBusquedaValue) {
1247
- this.cCampoBusqueda.setValue(this.ctrlBusquedaValue);
1248
- }
1249
- this.table.renderRows(); // 🔹 Refrescar la tabla
1250
- }
1251
- ngOnChanges(changes) {
1252
- console.warn(changes);
1253
- if (changes['botonesCRUD'] || changes['ctrlBusqueda']) {
1254
- this.actualizarCrud();
1255
- }
1256
- if (changes['botonesMenu']) {
1257
- this.agregarBotonesExportacion();
1258
- }
1259
- }
1260
- trackByFn = (index, item) => {
1261
- return this.propiedadSeleccion(item);
1262
- };
1263
- agregarBotonesExportacion() {
1264
- const fnAddBoton = (condicion, tipoBoton) => {
1265
- if (condicion) {
1266
- const objBoton = buscarEnArray(this.templateBotonesComunes, 'tipo', tipoBoton);
1267
- const objBotonEnInferior = buscarEnArray((this.botonesMenu?.inferior ?? []), 'tipo', tipoBoton);
1268
- if (!objBotonEnInferior && objBoton) {
1269
- if (!this.botonesMenu.inferior) {
1270
- this.botonesMenu.inferior = [];
1271
- }
1272
- this.botonesMenu?.inferior?.push({
1273
- ...objBoton,
1274
- esIndependiente: true,
1275
- });
1276
- }
1277
- }
1278
- };
1279
- fnAddBoton((this.exportarExcel && this.esTabla), 'exportar_excel');
1280
- }
1281
- actualizarCrud() {
1282
- const operacionesCRUD = {
1283
- 'C': 'nuevo',
1284
- 'U': 'editar',
1285
- 'D': 'eliminar'
1286
- };
1287
- const agregarBoton = (tipo) => {
1288
- let botonComun = buscarEnArray(this.templateBotonesComunes, 'tipo', tipo);
1289
- if (botonComun) {
1290
- const personalizado = buscarEnArray(this.objBotonesCRUD, 'tipo', tipo);
1291
- const boton = personalizado ? { ...botonComun, ...personalizado } : botonComun;
1292
- if (this.botonesMenu.crud) {
1293
- this.botonesMenu.crud.push(boton);
1294
- }
1295
- }
1296
- };
1297
- const lstCRUD = (this.botonesMenu.crud ?? []).map(i => i.tipo);
1298
- if (lstCRUD.length > 0) {
1299
- for (const operacion of (this.botonesCRUD || "").toUpperCase()) {
1300
- const operacionKey = operacion;
1301
- if (lstCRUD.includes(operacion) && operacionesCRUD[operacionKey]) {
1302
- agregarBoton(operacionesCRUD[operacionKey]);
1303
- }
1304
- }
1305
- }
1306
- else {
1307
- this.botonesMenu.crud = [];
1308
- for (const operacion of (this.botonesCRUD || "").toUpperCase()) {
1309
- const operacionKey = operacion;
1310
- if (operacionesCRUD[operacionKey]) {
1311
- agregarBoton(operacionesCRUD[operacionKey]);
1312
- }
1313
- }
1314
- }
1315
- if (this.ctrlBusqueda === 'simple') {
1316
- this.cCampoBusqueda.valueChanges.pipe(untilDestroyed(this)).subscribe(value => this.onFilterChange(value ?? ''));
1317
- }
1318
- if (this.botonesCRUD === '-') {
1319
- this.botonesMenu.crud = [];
1320
- }
1321
- }
1322
- classFila(item) {
1323
- let claseFinal = [];
1324
- if (this.campoAnulado && (item[this.campoAnulado] == 1)) {
1325
- claseFinal = claseFinal.concat(this.classAnulado);
1326
- }
1327
- if (this.objSeleccionado == item || this.esSeleccionActual(item)) {
1328
- claseFinal = claseFinal.concat(this.classSeleccionado);
1329
- }
1330
- claseFinal = claseFinal.concat(this.condicionesClaseFila(item));
1331
- item.claseFinal = claseFinal;
1332
- return claseFinal;
1333
- }
1334
- procesarRowTooltip(item) {
1335
- let txtTooptip = [];
1336
- if (this.campoAnuladoMensaje && (item[this.campoAnulado] == 1)) {
1337
- txtTooptip.push(item[this.campoAnuladoMensaje]);
1338
- // return item[this.campoAnuladoMensaje];
1339
- }
1340
- if (this.rowTooltip) {
1341
- txtTooptip.push(this.rowTooltip(item));
1342
- }
1343
- return txtTooptip.filter(itm => !!itm).join(' | ');
1344
- }
1345
- subItemsActivos(btn, item) {
1346
- return btn.subItems.filter((sub) => !sub.esVisible || sub.esVisible(item)).length > 0;
1347
- }
1348
- get noData() {
1349
- if (!this.esTabla) {
1350
- return of(true);
1351
- }
1352
- if (!this.dataSource || !this.table) {
1353
- return of(true);
1354
- }
1355
- // @ts-ignore
1356
- return this.table.dataSource?.connect().pipe(map(data => data?.length === 0));
1357
- }
1358
- onFilterChange(value) {
1359
- if (!this.dataSource) {
1360
- return;
1361
- }
1362
- value = value.trim();
1363
- value = value.toLowerCase();
1364
- this.dataSource.filter = value;
1365
- }
1366
- toggleColumnVisibility(column, event) {
1367
- event.stopPropagation();
1368
- event.stopImmediatePropagation();
1369
- column.visible = !column.visible;
1370
- }
1371
- cargarData(retorno = false) {
1372
- if (this.ctrlBusqueda && this.ctrlBusqueda == 'simple') {
1373
- if (!retorno) {
1374
- this.dataSource.paginator = this.paginator;
1375
- this.dataSource.sort = this.sort;
1376
- }
1377
- const aS = this.dataSource?.data;
1378
- if ((!aS || !aS[0] || !aS[0]['iTotalRegistros'])) {
1379
- return false;
1380
- }
1381
- }
1382
- const dPag = {
1383
- iPaginacion: 1,
1384
- iPageSize: this.paginator?.pageSize ? this.paginator?.pageSize : this.paginacion.pageCurrent?.pageSize,
1385
- iPageNumber: (this.paginator?.pageIndex ? this.paginator?.pageIndex : 0) + 1,
1386
- };
1387
- if (this.ctrlBusqueda && this.ctrlBusqueda == 'query') {
1388
- dPag['cCampoBusqueda'] = this.cCampoBusqueda.value;
1389
- }
1390
- if (retorno) {
1391
- return dPag;
1392
- }
1393
- this.resultados.emit(dPag);
1394
- this.opcBusqueda.emit(dPag);
1395
- }
1396
- // FIN FILTRO BUSQUEDA INTEGRAR
1397
- setData(data) {
1398
- this.dataSource = new MatTableDataSource(data);
1399
- this.dataSource.sortingDataAccessor = (item, property) => {
1400
- const dColumn = buscarEnArray(this.columnasTabla, 'property', property);
1401
- if (dColumn) {
1402
- switch (dColumn.sortType ?? dColumn.type) {
1403
- case 'number':
1404
- return item[property] * 1;
1405
- case 'date':
1406
- return formatearFecha(item[property]);
1407
- }
1408
- }
1409
- if (item) {
1410
- switch (property) {
1411
- case 'fromDate':
1412
- return new Date(item['fromDate']);
1413
- default:
1414
- return item[property];
1415
- }
1416
- }
1417
- };
1418
- // this.paginator.length = (data && data[0] && data[0]['iTotalRegistros']) ? data[0]['iTotalRegistros'] : data.length;
1419
- // this.dataSource.paginator = this.paginator;
1420
- if (this.sort) {
1421
- this.dataSource.sort = this.sort;
1422
- }
1423
- // this.dataSource.filter = this.filter;
1424
- this.dataSourceChange.emit(this.dataSource);
1425
- // this.dataSource.paginator.pageSize = this.paginacion.pageSize;
1426
- if (data && data[0] && data[0]['iPageNumber']) {
1427
- this.paginacion.pageIndex = (data && data[0] && data[0]['iPageNumber']) ? data[0]['iPageNumber'] : 0;
1428
- }
1429
- this.paginacion.pageLength = (data && data[0] && data[0]['iTotalRegistros']) ? data[0]['iTotalRegistros'] : data.length;
1430
- if (data && data[0] && !data[0]['iTotalRegistros']) {
1431
- this.dataSource.paginator = this.paginator;
1432
- }
1433
- if (this.tieneCheckbox) {
1434
- this.chkLista.agregarControles(data, this.tieneCheckbox.property, !this.tieneCheckbox.chkFieldPersistente, (this.tieneCheckbox.chkField ?? null), this.tieneCheckbox.chkFieldSeparador);
1435
- }
1436
- }
1437
- botonDisabled(btn, item) {
1438
- let disabled;
1439
- if (!btn.sinCondicion) {
1440
- if (btn.estaDeshabilitado) {
1441
- disabled = btn.estaDeshabilitado(item, this);
1442
- }
1443
- else {
1444
- disabled = !this.objSeleccionado;
1445
- }
1446
- }
1447
- if (!disabled && !btn.esIndependiente && !btn.ignorarDerecho && this.derechosActuales) {
1448
- // if (!this.usuarioService.esEquipoJVSoft()) {
1449
- disabled = !(this.derechosActuales[btn.cDerechoCodigo ?? btn.tipo]);
1450
- // }
1451
- }
1452
- return disabled;
1453
- }
1454
- propiedadSeleccion(item) {
1455
- return `${this.nombreColeccion}_${this.idTablaValor(item)}`;
1456
- }
1457
- esSeleccionActual(item) {
1458
- return this._seleccionado === this.propiedadSeleccion(item);
1459
- }
1460
- seleccionarItem(item, forzado = false) {
1461
- const idItem = this.propiedadSeleccion(item);
1462
- console.log(this._seleccionado, idItem);
1463
- if (forzado) {
1464
- this._seleccionado = idItem;
1465
- }
1466
- else {
1467
- this._seleccionado = this._seleccionado === idItem ? null : idItem;
1468
- }
1469
- this.selectionModelChange.emit(this.objSeleccionado);
1470
- /*if (!this.objThis) {
1471
- this.objThis = {};
1472
- }
1473
- if (!this.objThis['seleccionados']) {
1474
- this.objThis['seleccionados'] = {};
1475
- }
1476
- this.objThis['seleccionados'][this.nombreColeccion] = this._seleccionado;*/
1477
- }
1478
- opcMenu(item, objMenu, modal = null, retorno = false) {
1479
- console.log(this.buscarItemSeleccionado);
1480
- console.log(objMenu);
1481
- // let salir = this.readOnly;
1482
- // if (salir && this.readOnly === 'permitirSeleccion' && ['ver', 'seleccionar'].includes(objMenu.tipo)) {
1483
- // salir = false;
1484
- // }
1485
- // if (salir) {
1486
- // return false;
1487
- // }
1488
- // console.warn(objMenu);
1489
- if (objMenu.tipo == 'exportar_excel' && this.exportarExcel) {
1490
- /*
1491
- TableUtil.exportArrayToExcel(this.dataSource.data.map(x => {
1492
- const columnasNumeros = this.objVisibleColumns.filter(column => ['money', 'number'].includes(column.type));
1493
- columnasNumeros.forEach(columna => {
1494
- x[columna.property] *= 1;
1495
- });
1496
- return x;
1497
- }), 'TEST');
1498
- */
1499
- const dataGeneradoPorHtml = TableUtil.getWorkBook('tabla_' + this.nombreColeccion, []);
1500
- const objetosExtraidos = this.dataSource.filteredData.map((objeto, idx) => this.objVisibleColumns.reduce((acumulador, columna) => {
1501
- // console.log(propiedad);
1502
- const nColumn = (columna.labelLista ?? columna.label).toUpperCase().replace('<BR>', ' ');
1503
- switch (columna.type) {
1504
- case 'date':
1505
- // acumulador[nColumn] = (new DatePipe('es-PE')).transform(objeto[columna.property], 'dd/MM/yyyy' /*'yyyy-MM-dd'*/);
1506
- // new Date(dateString.replace(/(\d{2}:\d{2}:\d{2}):\w{2}/, '$1'));
1507
- // acumulador[nColumn] = new Date(objeto[columna.property].replace(/(\d{2}:\d{2}:\d{2}):\w{2}/, '$1'));
1508
- // acumulador[nColumn] = formatearFechaFormato(objeto[columna.property], 'dd/MM/yyyy');
1509
- // acumulador[nColumn] = formatearFechaTimezone(objeto[columna.property]);
1510
- // acumulador[nColumn] = new Date(objeto[columna.property]);
1511
- let fecha = objeto[columna.property];
1512
- if (objeto[columna.property]) {
1513
- fecha = new Date(objeto[columna.property].replace(/(\d{2}:\d{2}:\d{2}):\w{2}/, '$1'));
1514
- if (getBrowserName() == 'chrome') {
1515
- fecha = moment(objeto[columna.property], true).add(2, 'minutes').toDate();
1516
- }
1517
- }
1518
- acumulador[nColumn] = fecha;
1519
- // acumulador[nColumn] = objeto[columna.property];
1520
- break;
1521
- case 'number':
1522
- case 'money':
1523
- acumulador[nColumn] = objeto[columna.property] * 1;
1524
- break;
1525
- default:
1526
- if (columna.property == 'numeracion_automatica') {
1527
- acumulador[nColumn] = idx + 1;
1528
- }
1529
- else {
1530
- if (columna.type == 'custom') {
1531
- // dataGeneradoPorHtml.sheetToJson
1532
- acumulador[nColumn] = dataGeneradoPorHtml.sheetToJson[idx][columna.label];
1533
- }
1534
- else {
1535
- if (columna.type == 'text' && columna.innerHTML) {
1536
- const convertirHtmlATexto = (html) => {
1537
- const elementoTemporal = document.createElement('div');
1538
- elementoTemporal.innerHTML = html;
1539
- return elementoTemporal.textContent || "";
1540
- };
1541
- acumulador[nColumn] = convertirHtmlATexto(columna.innerHTML(objeto));
1542
- }
1543
- else if (columna.transformar) {
1544
- acumulador[nColumn] = columna.transformar(objeto);
1545
- }
1546
- else {
1547
- acumulador[nColumn] = objeto[columna.property];
1548
- }
1549
- }
1550
- }
1551
- break;
1552
- }
1553
- return acumulador;
1554
- }, {}));
1555
- // TableUtil.exportTableToExcel('tabla_' + this.nombreColeccion);
1556
- // console.log(objetosExtraidos);
1557
- TableUtil.exportArrayToExcel(objetosExtraidos, this.nombreColeccion);
1558
- // this.tableExporter.exportTable('xlsx', {fileName: 'JVSoftExport'});
1559
- }
1560
- const opAdic = { seccion: this.nombreColeccion };
1561
- if (item) {
1562
- opAdic['item'] = item;
1563
- }
1564
- opAdic['itemSeleccionado'] = this.objSeleccionado;
1565
- if (this.tieneCheckbox) {
1566
- // itmsSeleccionados = this.formulariosGlobalesService.generarLista(this.nombreColeccion);
1567
- opAdic['idsSeleccionados'] = this.idsSeleccionado;
1568
- }
1569
- // opAdic['refTabla'] = this;
1570
- objMenu = { ...objMenu, ...opAdic };
1571
- if (retorno) {
1572
- return objMenu;
1573
- }
1574
- // console.warn(objMenu);
1575
- this.opcionSelecionada.emit(objMenu);
1576
- return 1;
1577
- }
1578
- emitirResultados(evento = {}) {
1579
- this.opcFiltroActual = { ...this.opcFiltroActual, ...evento, ...this.cargarData(true) };
1580
- // console.warn('resultadosFILTRO', this.opcFiltroActual);
1581
- this.resultados.emit(this.opcFiltroActual);
1582
- }
1583
- abrirMenuContextual({ x, y }, user) {
1584
- // console.log(user);
1585
- // this.opcMenu(user, {tipo: 'ver'});
1586
- this.objSeleccionado = user;
1587
- this.cerrarMenuContextual();
1588
- const positionStrategy = this.overlay.position().flexibleConnectedTo({ x, y }).withPositions([
1589
- {
1590
- originX: 'end',
1591
- originY: 'bottom',
1592
- overlayX: 'end',
1593
- overlayY: 'top',
1594
- },
1595
- ]);
1596
- this.overlayRef = this.overlay.create({
1597
- positionStrategy,
1598
- scrollStrategy: this.overlay.scrollStrategies.close(),
1599
- });
1600
- this.overlayRef.attach(new TemplatePortal(this.userMenu, this.viewContainerRef, {
1601
- // $implicit: user
1602
- item: user,
1603
- }));
1604
- this.mouseEvent$ = fromEvent(document, 'click').pipe(filter(event => {
1605
- const clickTarget = event.target;
1606
- return !!this.overlayRef && !this.overlayRef.overlayElement.contains(clickTarget);
1607
- }), take(1)).subscribe(() => this.cerrarMenuContextual());
1608
- }
1609
- cerrarMenuContextual() {
1610
- this.mouseEvent$ && this.mouseEvent$.unsubscribe();
1611
- if (this.overlayRef) {
1612
- this.overlayRef.dispose();
1613
- this.overlayRef = undefined;
1614
- }
1615
- }
1616
- emitirAccionRecargar() {
1617
- if (!this.idTabla) {
1618
- this.objSeleccionado = null;
1619
- }
1620
- this.accionRecargar.emit(this.opcFiltroActual);
1621
- // this.accionRecargar.emit({ ...this.opcFiltroActual, ...{seleccionado: this.objSeleccionado}});
1622
- }
1623
- tipoValorFuncion = tipoValorFuncion;
1624
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: TablaMantenimientoComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2$1.Overlay }, { token: i0.ViewContainerRef }, { token: TablaMantenimientoService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
1625
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: TablaMantenimientoComponent, isStandalone: true, selector: "jvs-tabla-mantenimiento", inputs: { dataSuscription: "dataSuscription", objThis: "objThis", nombreColeccion: "nombreColeccion", ctrlBusquedaValue: "ctrlBusquedaValue", ctrlBusquedaPlaceholder: "ctrlBusquedaPlaceholder", filtroCampos: "filtroCampos", paginador: "paginador", esTabla: "esTabla", readOnly: "readOnly", filaExtraHeader: "filaExtraHeader", filaFooter: "filaFooter", botonesCRUD: "botonesCRUD", objBotonesCRUD: "objBotonesCRUD", classSeleccionado: "classSeleccionado", classAnulado: "classAnulado", campoAnulado: "campoAnulado", campoAnuladoMensaje: "campoAnuladoMensaje", selectionModel: "selectionModel", filaExtraTemplate: "filaExtraTemplate", exportarExcel: "exportarExcel", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", derechosActuales: "derechosActuales", ctrlBusqueda: "ctrlBusqueda", leyenda: "leyenda", idTabla: "idTabla", columnasTabla: "columnasTabla", botonesMenu: "botonesMenu", condicionesClaseFila: "condicionesClaseFila", rowTooltip: "rowTooltip", soloIconos: "soloIconos" }, outputs: { dblclickItem: "dblclickItem", opcionSelecionada: "opcionSelecionada", opcBusqueda: "opcBusqueda", accionRecargar: "accionRecargar", selectionModelChange: "selectionModelChange", dataSourceChange: "dataSourceChange", resultados: "resultados" }, host: { properties: { "id": "this.id" }, classAttribute: "jvs-tabla-mantenimiento" }, providers: [
1626
- { provide: MAT_PAGINATOR_DEFAULT_OPTIONS, useValue: { formFieldAppearance: 'outline' } }
1627
- ], queries: [{ propertyName: "columnDefs", predicate: MatColumnDef, descendants: true }], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "rowFooter", first: true, predicate: MatFooterRow, descendants: true, read: ElementRef }, { propertyName: "userMenu", first: true, predicate: ["userMenu"], descendants: true }, { propertyName: "rows", predicate: MatRow, descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-col h-fit\">\n <div class=\"grow flex items-center justify-between bg-white\">\n <ng-content select=\"[filtro]\"></ng-content>\n </div>\n\n <div class=\"flex flex-col border-t\">\n <div class=\"flex-1 bg-app-bar flex items-center justify-between p-1\">\n <!-- <div class=\"hidden flex-1 sm:flex items-center flex-wrap gap-1\">-->\n <!-- </div>-->\n <div class=\"flex items-center flex-wrap mr-1 h-full\" *ngIf=\"leyenda\">\n <span class=\"font-bold\" [class]=\"leyenda.class\">{{ leyenda.text }}</span>\n </div>\n <div class=\"hidden flex-1 sm:flex items-center flex-wrap gap-1\">\n <div *ngIf=\"(botonesMenuFinal.izquierda ?? []).length > 0 \" class=\" flex items-center flex-wrap contenedor-botones\">\n <ng-container *ngFor=\"let btn of botonesMenu.izquierda; let idx = index;\">\n <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.izquierda?.length}}\"></ng-container>\n </ng-container>\n </div>\n\n <div *ngIf=\"(botonesMenuFinal.crud ?? []).length > 0\" class=\" flex items-center flex-wrap contenedor-botones\">\n <ng-container *ngFor=\"let btn of botonesMenu.crud; let idx = index;\">\n <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.crud?.length}}\"></ng-container>\n </ng-container>\n </div>\n\n <div *ngIf=\"(botonesMenuFinal.principal ?? []).length > 0\" class=\" flex items-center flex-wrap contenedor-botones\">\n <ng-container *ngFor=\"let btn of botonesMenu.principal; let idx = index;\">\n <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.principal?.length}}\"></ng-container>\n </ng-container>\n </div>\n\n <div *ngIf=\"(botonesMenuFinal.derecha ?? []).length > 0\" class=\"flex-auto flex items-center justify-end contenedor-botones\">\n <ng-container *ngFor=\"let btn of botonesMenu.derecha; let idx = index;\">\n <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.derecha?.length}}\"></ng-container>\n </ng-container>\n </div>\n <ng-content select=\"[objetosMenuPegado]\"></ng-content>\n </div>\n <div class=\"flex flex-1 sm:hidden items-center flex-wrap gap-1\">\n <button class=\"flex items-center justify-center text-2xs leading-none rounded-full p-1\"\n matRipple\n matTooltip=\"Botones de Acci\u00F3n\"\n type=\"button\"\n [matMenuTriggerFor]=\"menuOpciones\"\n >\n <mat-icon class=\"icon-xs\" svgIcon=\"roundMenu\"></mat-icon>\n </button>\n </div>\n <div class=\"flex-none flex items-center justify-end border-l-2\">\n <div class=\"flex-1 sm:flex-none flex items-center justify-end\">\n <ng-content select=\"[objetosMenu]\"></ng-content>\n </div>\n </div>\n <div *ngIf=\"ctrlBusqueda\" class=\"hidden flex-initial sm:flex items-center form-input max-w-[150px] bg-card rounded-full border m-1 px-1 border-l-2\"\n >\n <mat-icon svgIcon=\"roundSearch\" class=\"icon-xs\"></mat-icon>\n <input [formControl]=\"cCampoBusqueda\"\n class=\"text-xs px-1 py-1 border-0 outline-none w-full bg-transparent max-w-sm\"\n [placeholder]=\"ctrlBusquedaPlaceholder\"\n (keyup.enter)=\"ctrlBusqueda == 'query' ? cargarData() : false;\"\n type=\"search\">\n </div>\n <div class=\"flex-none flex items-center justify-end border-l-2\">\n <ng-content select=\"[botonesFiltro]\"></ng-content>\n <button matRipple *ngIf=\"isRecargarUsed || ctrlBusqueda == 'query'\"\n class=\"flex items-center justify-center text-2xs leading-none rounded-full p-1 text-green-700\"\n matTooltip=\"Actualizar datos\"\n (click)=\"(ctrlBusqueda == 'query' ? cargarData() : emitirAccionRecargar())\"\n type=\"button\">\n <mat-icon svgIcon=\"roundRefresh\" class=\"icon-xs\"></mat-icon>\n\n </button>\n <button matRipple [matMenuTriggerFor]=\"columnFilterMenu\" *ngIf=\"filtroCampos\"\n class=\"flex items-center justify-center text-2xs leading-none rounded-full p-1\"\n matTooltip=\"Columnas Filtro\"\n type=\"button\">\n <mat-icon svgIcon=\"roundFilterList\" class=\"icon-xs\"></mat-icon>\n </button>\n </div>\n </div>\n\n <div *ngIf=\"(botonesMenuFinal.secundario ?? []).length > 0\" class=\"flex-1 bg-app-bar flex items-center justify-between p-1 border-t\">\n <div class=\"hidden flex-1 sm:flex items-center flex-wrap gap-1\">\n <div class=\" flex items-center flex-wrap contenedor-botones\">\n <ng-container *ngFor=\"let btn of botonesMenu.secundario; let idx = index;\">\n <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.secundario?.length}}\"></ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n <!--<div class=\"grow flex flex-col items-stretch contenedor-tabla\" [ngClass]=\"{'table-container overflow-auto': esTabla}\">\n <pre>{{ this.chkLista.modelosChk | json }}</pre>\n <pre>{{ this.chkLista.checkbox.cantidadActivos | json }}</pre>\n <pre>{{ this.chkLista.checkbox.algunosActivos | json }}</pre>\n </div>-->\n <div class=\"grow flex flex-col items-stretch contenedor-tabla\" [ngClass]=\"{'table-container overflow-auto': esTabla}\">\n <ng-content select=\"[cuerpo]\"></ng-content>\n\n <table [id]=\"'tabla_' + nombreColeccion\" [dataSource]=\"dataSource\" [multiTemplateDataRows]=\"true\"\n [hidden]=\"!esTabla\"\n class=\"flex-1 table-mantenimiento table-auto h-fit\" mat-table matSort\n [trackBy]=\"trackByFn\"\n #tablaMantenimiento\n >\n\n <!--<table [dataSource]=\"dataSource\" class=\"table-mantenimiento table-auto h-auto w-full justify-center\" mat-table matSort>-->\n\n\n <ng-content select=\"[tableDefinitions]\"></ng-content>\n <ng-container matColumnDef=\"numeracion_automatica\">\n <th mat-header-cell *matHeaderCellDef style=\"width: 16px !important\">N\u00BA</th>\n <td mat-cell *matCellDef=\"let element; let i = dataIndex\" class=\"p-0 celda-numeracion-fila\">\n <div class=\"flex items-center justify-center font-bold numeracionFila\">\n <ng-container *ngIf=\"esTabla && paginador\">\n {{ (this.paginator?.pageIndex == 0 ? i + 1 : 1 + i + (this.paginator?.pageIndex ?? 1) * (this.paginator?.pageSize ?? 1)) }}\n </ng-container>\n <ng-container *ngIf=\"!paginador\">\n {{ (i + 1) }}\n </ng-container>\n </div>\n </td>\n <td mat-footer-cell *matFooterCellDef class=\"uppercase\"></td>\n </ng-container>\n <jvs-tabla-mantenimiento-column-defs [objThis]=\"this\" [colDetalle]=\"columnasTabla\"\n [nombreColeccion]=\"nombreColeccion\" [(chkLista)]=\"chkLista\"></jvs-tabla-mantenimiento-column-defs>\n\n <tr *matHeaderRowDef=\"visibleColumns; sticky: true\" mat-header-row class=\"title\" matHeader\n ></tr>\n\n <ng-container *ngIf=\"!!filaExtraHeader\">\n <tr mat-row *matRowDef=\"let row; columns: ['filaExtraHeader']\" class=\"student-detail-row\"\n [style.height.px]=\"0\"\n ></tr>\n\n <ng-container matColumnDef=\"filaExtraHeader\">\n <td mat-cell *matCellDef=\"let row; let i = dataIndex\" [attr.colspan]=\"visibleColumns.length\">\n\n <div class=\"row m-0 student-element-detail\"\n [@detailExpand]=\"(i == 0 && filaExtraHeader.esVisible && filaExtraHeader.esVisible()) ? 'expanded' : 'collapsed'\"\n [style.padding-right.px]=\"row.isExpanded ? 5 : 0\"\n [style.padding-left.px]=\"row.isExpanded ? 5 : 0\"\n >\n <ng-container *ngIf=\"filaExtraHeader.template\"\n [ngTemplateOutlet]=\"filaExtraHeader.template\"\n [ngTemplateOutletContext]=\"{ row: row }\"></ng-container>\n </div>\n\n </td>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"filaFooter\">\n <tr *matFooterRowDef=\"visibleColumns\" mat-footer-row\n [style.height.px]=\"0\"\n [id]=\"nombreColeccion + '_filaFooter'\"\n ></tr>\n </ng-container>\n\n <!--\t<tr\n *matRowDef=\"let row; columns: visibleColumns;\"\n class=\"hover:bg-secondary trans-ease-out cursor-pointer\"\n mat-row></tr>-->\n <tr\n [matRowKeyboardSelection]=\"tablaMantenimiento\"\n [rowModel]=\"row\"\n (seleccionarSiguiente)=\"opcMenu($event, {seccion: nombreColeccion, tipo: 'ver'});\"\n\n *matRowDef=\"let row; let idxTabla = dataIndex; columns: visibleColumns;\"\n (click)=\"seleccionarItem(row); opcMenu(row, {seccion: nombreColeccion, tipo: 'ver', tableDataIndex: idxTabla });\"\n (dblclick)=\"opcMenu(row, {seccion: nombreColeccion, tipo: 'seleccionar'}); dblclickItem.emit(row)\"\n (contextmenu)=\"(abrirMenuContextual($event, row)); $event. preventDefault();\"\n [ngClass]=\"classFila(row)\"\n @fadeInUp\n class=\"trans-ease-out cursor-pointer h-auto\"\n [style.height.px]=\"0\"\n [id]=\"propiedadSeleccion(row)\"\n [matTooltip]=\"procesarRowTooltip(row)\"\n matTooltipPosition=\"below\"\n [matTooltipPositionAtOrigin]=\"true\"\n [matTooltipClass]=\"['bg-red-700', 'text-red-100', 'm-0']\"\n [matTooltipDisabled]=\"!procesarRowTooltip(row)\"\n [class.regAnulado]=\"row[campoAnulado] == 1\"\n [class.regTooltip]=\"!!procesarRowTooltip(row)\"\n (keyup.delete)=\"opcMenu(row, {seccion: nombreColeccion, tipo: 'eliminar'})\"\n mat-row></tr>\n <ng-container *ngIf=\"filaExtraTemplate\">\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"student-detail-row h-0\"></tr>\n\n <ng-container matColumnDef=\"expandedDetail\">\n <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"visibleColumns.length\">\n\n <div class=\"row m-0 student-element-detail\"\n [@detailExpand]=\"row.isExpanded ? 'expanded' : 'collapsed'\"\n [style.padding-right.px]=\"row.isExpanded ? 5 : 0\"\n [style.padding-left.px]=\"row.isExpanded ? 5 : 0\"\n >\n <ng-container [ngTemplateOutlet]=\"filaExtraTemplate\"\n [ngTemplateOutletContext]=\"{ row: row }\"></ng-container>\n </div>\n\n </td>\n </ng-container>\n </ng-container>\n </table>\n\n <ng-container *ngIf=\"componenteCargadoTotalmente\">\n <div *ngIf=\"(noData | async) && esTabla\" class=\"flex-1 text-center text-secondary font-medium\">\n No se encontraron datos\n </div>\n </ng-container>\n </div>\n <ng-content select=\"[appendTable]\"></ng-content>\n <div class=\"flex-1 bg-app-bar flex flex-col sm:flex-row items-start justify-between p-1\">\n <div class=\"flex-1 flex items-start flex-wrap gap-1\">\n <div *ngIf=\"(botonesMenuFinal.inferior ?? []).length > 0\" class=\" flex items-center flex-wrap\">\n <ng-container *ngFor=\"let btn of botonesMenu.inferior; let idx = index;\">\n <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.inferior?.length}}\"></ng-container>\n </ng-container>\n </div>\n </div>\n\n <div *ngIf=\"esTabla && paginador\" class=\"flex-1 sm:flex-none flex items-center justify-end\">\n <mat-paginator class=\"tabla-mantenimiento-paginador\" [pageSizeOptions]=\"paginacion.pageSizeOptions\" [pageIndex]=\"paginacion.pageIndex - 1\" [length]=\"paginacion.pageLength\" [pageSize]=\"paginacion.pageSize\" (page)=\"paginacion.pageCurrent = $event; emitirResultados();\" ></mat-paginator>\n </div>\n </div>\n </div>\n\n</div>\n\n\n\n<!-- SECCION DE TEMPLATES O MENUS -->\n\n\n<mat-menu #columnFilterMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\n <ng-container *ngFor=\"let column of columnasTabla\">\n <button (click)=\"toggleColumnVisibility(column, $event)\" *ngIf=\"!tipoValorFuncion(column.noMostrarEnLista, false)\"\n class=\"checkbox-item mat-menu-item\">\n <mat-checkbox (click)=\"$event.stopPropagation()\" [(ngModel)]=\"column.visible\" [ngModelOptions]=\"{standalone: true}\" color=\"primary\">\n <span [innerHTML]=\"(column.labelLista ?? column.label).replace('<br>', ' ')\"></span>\n </mat-checkbox>\n </button>\n </ng-container>\n</mat-menu>\n\n\n\n\n\n\n<ng-template #botonesSuperiores let-btn=\"btn\" let-idx=\"idx\">\n <ng-container *ngTemplateOutlet=\"botonesContextual; context:{btn: btn, item: objSeleccionado, barraSuperior: true, idx: idx}\"></ng-container>\n</ng-template>\n\n<ng-template #botonesContextual let-btn=\"btn\" let-item=\"item\" let-barraSuperior=\"barraSuperior\" let-idx=\"idx\">\n\n <ng-container *ngIf=\"barraSuperior; else noBarraSuperior\">\n\n <!--\t\t<button mat-button style=\"min-width: unset; border: 1px !important;\" class=\"uppercase border border-gray rounded-none h-full px-1 disabled:opacity-50 disabled:text-secondary disabled:bg-transparent\">-->\n <!--\t\t\t<mat-icon *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\" size=\"15px\" class=\"icon-xs\"></mat-icon>-->\n <!--\t\t</button>-->\n <ng-container *ngIf=\"btn.subItems && btn.subItems.length > 0\">\n <button class=\"flex items-center justify-between uppercase text-2xs leading-none rounded-none px-2 py-1 bg-opacity-95 hover:bg-opacity-100 disabled:opacity-50 disabled:text-secondary disabled:!bg-gray-300 dark:disabled:!bg-gray-500 mat-elevation-z2\" type=\"button\"\n\n *ngIf=\"(!btn.esVisible || btn.esVisible(item, this)) && subItemsActivos(btn, item)\"\n [class]=\"(btn.class?btn.class:'')\"\n\n (click)=\"opcMenu(item, btn)\"\n [style.min-width]=\"((btn.soloIcono ?? tipoValorFuncion(soloIconos)) ? 'unset' : '')\"\n [matTooltip]=\"btn.tooltip || (btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo))) \"\n [matMenuTriggerFor]=\"menuOtrosBarra.menu\"\n\n [matBadge]=\"btn.badge\"\n matBadgeSize=\"small\"\n >\n <mat-icon class=\"icon-xs\" [class.mr-0.5]=\"!(btn.soloIcono ?? tipoValorFuncion(soloIconos))\" *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\" ></mat-icon>\n <span class=\"whitespace-nowrap\" *ngIf=\"!(btn.soloIcono ?? tipoValorFuncion(soloIconos))\">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>\n <mat-icon class=\"icon-xs\" svgIcon=\"fa5sCaretDown\" ></mat-icon>\n </button>\n\n <jvs-tabla-mantenimiento-menu #menuOtrosBarra\n [objThis]=\"objThis\"\n [nombreColeccion]=\"nombreColeccion\"\n [item]=\"item\"\n [derechosActuales]=\"derechosActuales\"\n [subItems]=\"btn.subItems\"\n (opcionSelecionada)=\"opcMenu($event.item, $event.btn)\"\n [botonTemplate]=\"botonesContextual\"\n >\n </jvs-tabla-mantenimiento-menu>\n </ng-container>\n <ng-container *ngIf=\"!btn.subItems || btn.subItems.length == 0\">\n <button class=\"flex items-center justify-between uppercase text-2xs leading-none rounded-none px-2 py-1 bg-opacity-95 hover:bg-opacity-100 disabled:opacity-50 disabled:text-secondary disabled:!bg-gray-300 dark:disabled:!bg-gray-500 mat-elevation-z2\" type=\"button\"\n\n *ngIf=\"!btn.esVisible || btn.esVisible(item, this)\"\n [class]=\"(btn.class?btn.class:'text-secondary')\"\n [ngClass]=\"{'text-secondary italic': !ignorarDerechos && !btn.esIndependiente && (!btn.ignorarDerecho && (!derechosActuales || !derechosActuales[btn.cDerechoCodigo ?? btn.tipo])) && !(['nuevo', 'editar', 'eliminar'].includes(btn.tipo))}\"\n [disabled]=\"!btn.esIndependiente && botonDisabled(btn, item)\"\n (click)=\"opcMenu(item, btn)\"\n [style.min-width]=\"((btn.soloIcono ?? tipoValorFuncion(soloIconos)) ? 'unset' : '')\"\n [matTooltip]=\"btn.tooltip || (btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo))) \"\n\n [matBadge]=\"btn.badge\"\n matBadgeSize=\"small\"\n >\n <mat-icon class=\"icon-xs\" [class.mr-0.5]=\"!(btn.soloIcono ?? tipoValorFuncion(soloIconos))\" *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\"></mat-icon>\n <span class=\"whitespace-nowrap\" *ngIf=\"!(btn.soloIcono ?? tipoValorFuncion(soloIconos))\">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>\n </button>\n\n </ng-container>\n\n </ng-container>\n <ng-template #noBarraSuperior>\n\n <ng-container *ngIf=\"btn.subItems && btn.subItems.length > 0\">\n <button class=\"flex items-center justify-between uppercase w-full rounded-none px-2 disabled:opacity-50 disabled:text-secondary disabled:bg-transparent\" mat-menu-item type=\"button\"\n *ngIf=\"!btn.noContextual && (!btn.esVisible || btn.esVisible(item, this))\"\n [class]=\"(btn.class?btn.class.replace('text-white', '').replace('bg', 'text'):'text-secondary')\"\n [ngClass]=\"{'text-secondary italic': !ignorarDerechos && !btn.esIndependiente && (!btn.ignorarDerecho && (!derechosActuales || !derechosActuales[btn.cDerechoCodigo ?? btn.tipo]))}\"\n [disabled]=\"!btn.esIndependiente && botonDisabled(btn, item)\"\n (click)=\"opcMenu(item, btn); $event.stopPropagation();\"\n [matMenuTriggerFor]=\"menuOtrosBarra.menu\"\n >\n <div class=\"flex w-full items-center justify-between uppercase text-2xs\"\n >\n <mat-icon *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\"\n class=\"flex-none icon-xs\"\n ></mat-icon>\n <span class=\"grow text-2xs\">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>\n <mat-icon class=\"flex-none icon-xs\" svgIcon=\"fa5sCaretRight\"></mat-icon>\n </div>\n </button>\n\n <jvs-tabla-mantenimiento-menu #menuOtrosBarra\n [objThis]=\"objThis\"\n [nombreColeccion]=\"nombreColeccion\"\n [item]=\"item\"\n [derechosActuales]=\"derechosActuales\"\n [subItems]=\"btn.subItems\"\n (opcionSelecionada)=\"opcMenu($event.item, $event.btn)\"\n [botonTemplate]=\"botonesContextual\"\n >\n </jvs-tabla-mantenimiento-menu>\n </ng-container>\n <ng-container *ngIf=\"!btn.subItems || btn.subItems.length == 0\">\n <ng-container *ngIf=\"btn.tipo == '-#SEPARADOR#-'; else itemsNormales\">\n <mat-divider></mat-divider>\n </ng-container>\n <ng-template #itemsNormales>\n <button class=\"flex items-center justify-between uppercase w-full rounded-none px-2 disabled:opacity-50 disabled:text-secondary disabled:bg-transparent\" mat-menu-item type=\"button\"\n *ngIf=\"!btn.noContextual && (!btn.esVisible || btn.esVisible(item, this))\"\n [class]=\"(btn.class?btn.class.replace('text-white', '').replace('bg', 'text'):'text-secondary')\"\n [ngClass]=\"{'text-secondary italic': !ignorarDerechos && !btn.esIndependiente && (!btn.ignorarDerecho && (!derechosActuales || !derechosActuales[btn.cDerechoCodigo ?? btn.tipo]))}\"\n [disabled]=\"!btn.esIndependiente && botonDisabled(btn, item)\"\n (click)=\"opcMenu(item, btn)\"\n >\n <div class=\"flex w-full items-center justify-between uppercase text-2xs\">\n <mat-icon *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\" class=\"flex-none icon-xs\"\n ></mat-icon>\n <span class=\"grow text-2xs\">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>\n </div>\n </button>\n </ng-template>\n\n </ng-container>\n\n </ng-template>\n\n</ng-template>\n\n<ng-template #userMenu let-item=\"item\">\n <div class=\"mat-menu bg-white rounded mat-elevation-z8 shadow botonesContextual\">\n <ng-container *ngFor=\"let btn of listaMenuCompleto\">\n <ng-container *ngTemplateOutlet=\"botonesContextual; context:{btn: btn, item: objSeleccionado, barraSuperior: false}\"></ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n\n<mat-menu #menuOpciones=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\n <ng-container *ngFor=\"let btn of listaMenuCompleto\">\n <ng-container\n *ngTemplateOutlet=\"botonesContextual; context:{btn: btn, item: objSeleccionado, barraSuperior: false}\"></ng-container>\n </ng-container>\n</mat-menu>\n\n", styles: ["@charset \"UTF-8\";:root{--tabla-mantenimiento-seleccion-fondo: rgb(179, 217, 252);--tabla-mantenimiento-seleccion-texto: rgb(1, 84, 164);--mat-paginator-container-size: 30px}:root .table-mantenimiento .elemento-seleccionado{background-color:var(--tabla-mantenimiento-seleccion-fondo)!important;color:var(--tabla-mantenimiento-seleccion-texto)!important;border-color:var(--tabla-mantenimiento-seleccion-texto)!important}.jvs-tabla-mantenimiento{width:inherit}.jvs-tabla-mantenimiento .contenedor-botones>*:first-child{@apply rounded-l;}.jvs-tabla-mantenimiento .contenedor-botones>*:last-child{@apply rounded-r;}.jvs-tabla-mantenimiento tr.regTooltip>td:first-child div:first-child:before,.jvs-tabla-mantenimiento tr.regTooltip>th:first-child div:first-child:before{content:\"\\26a0\\fe0f \";color:red;margin-right:4px;font-size:12px}.jvs-tabla-mantenimiento tr.regTooltip>td:first-child:not(:has(div)):before,.jvs-tabla-mantenimiento tr.regTooltip>th:first-child:not(:has(div)):before{content:\"\\26a0\\fe0f \";color:red;margin-right:4px;font-size:12px}.jvs-tabla-mantenimiento .mat-mdc-menu-content:not(:empty){@apply flex flex-col items-start;padding:0!important}.jvs-tabla-mantenimiento .mat-mdc-menu-item{line-height:24px!important;height:24px!important;min-height:24px!important}.jvs-tabla-mantenimiento .mat-mdc-menu-panel{min-height:auto!important}.jvs-tabla-mantenimiento .mat-mdc-table .mat-mdc-cell,.jvs-tabla-mantenimiento .mat-mdc-table .mat-mdc-header-cell .mat-mdc-footer-cell{white-space:unset}.jvs-tabla-mantenimiento .table-container{max-height:600px!important}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-table-sticky-border-elem-right{border-left:1px solid #e0e0e0}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e0}.jvs-tabla-mantenimiento .table-mantenimiento tr.regAnulado .mat-mdc-cell{color:unset!important}.jvs-tabla-mantenimiento .table-mantenimiento .bg-primary-activo .numeracionFila{@apply rounded-full bg-primary-contrast text-primary mx-1 p-1 w-6 h-6;}.jvs-tabla-mantenimiento .table-mantenimiento th .form-input{@apply w-auto;}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell,.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-cell,.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-footer-cell{border-width:1px;border-style:solid}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-cell:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-footer-cell:not(.celda-numeracion-fila){padding:.05rem .25rem}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell:first-of-type:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell:last-of-type:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-cell:first-of-type:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-cell:last-of-type:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-footer-cell:first-of-type:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-footer-cell:last-of-type:not(.celda-numeracion-fila){padding:0 .25rem}.jvs-tabla-mantenimiento .table-mantenimiento .student-element-detail{overflow:hidden;display:flex;align-items:center;justify-content:center}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-header-row{height:25px!important;color:rgb(var(--color-primary))!important;background-color:rgb(var(--color-primary-contrast))!important}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-header-cell{padding:5px;font-size:10px;line-height:10px;font-weight:700!important;color:inherit}.jvs-tabla-mantenimiento .table-mantenimiento .mdc-data-table__row:not(.mdc-data-table__row--selected):not(.elemento-seleccionado):hover,.jvs-tabla-mantenimiento .table-mantenimiento .mdc-data-table__row:not(.mdc-data-table__row--selected):not(.elemento-seleccionado):focus{background-color:rgba(var(--color-primary-contrast),.04)}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-row .mat-mdc-cell,.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-footer-row .mat-mdc-cell{font-size:10px}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-row .mat-mdc-footer-cell:empty,.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-footer-row .mat-mdc-footer-cell:empty{border-width:0!important}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-cell{@apply leading-tight;}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell{border-color:#d4d0d0;@apply text-center uppercase;}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell .mat-sort-header-container{@apply flex items-center justify-between w-full;}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell .mat-sort-header-container .mat-sort-header-content{@apply inline w-full text-center;}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell .mat-sort-header-container .mat-sort-header-arrow{@apply flex-none;}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-sort-header-content{width:100%;text-align:center;display:unset;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i9.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i5$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i2.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i2.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i2.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: TablaMantenimientoColumnDefsComponent, selector: "jvs-tabla-mantenimiento-column-defs", inputs: ["objThis", "nombreColeccion", "colDetalle", "chkLista"], outputs: ["chkListaChange"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i14.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: TablaMantenimientoMenuComponent, selector: "jvs-tabla-mantenimiento-menu", inputs: ["objThis", "nombreColeccion", "item", "derechosActuales", "subItems", "botonTemplate"], outputs: ["opcionSelecionada"] }, { kind: "directive", type: MatRowKeyboardSelectionDirective, selector: "[matRowKeyboardSelection]", inputs: ["matRowKeyboardSelection", "rowModel"], outputs: ["seleccionarSiguiente"] }], animations: [
1628
- trigger('detailExpand', [
1629
- state('collapsed', style({ height: '0px', minHeight: '0' })),
1630
- state('expanded', style({ height: '*' })),
1631
- transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
1632
- ]),
1633
- trigger('fadeInUp', [
1634
- transition(':enter', [
1635
- style({
1636
- transform: 'translateY(20px)',
1637
- opacity: 0
1638
- }),
1639
- animate(`400ms cubic-bezier(0.35, 0, 0.25, 1)`, style({
1640
- transform: 'translateY(0)',
1641
- opacity: 1
1642
- }))
1643
- ])
1644
- ]),
1645
- ] });
1646
- };
1647
- TablaMantenimientoComponent = TablaMantenimientoComponent_1 = __decorate([
1648
- UntilDestroy({ checkProperties: true })
1649
- ], TablaMantenimientoComponent);
1650
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: TablaMantenimientoComponent, decorators: [{
1651
- type: Component,
1652
- args: [{ selector: 'jvs-tabla-mantenimiento', standalone: true, imports: [
1653
- CommonModule,
1654
- FormsModule,
1655
- MatCheckboxModule,
1656
- MatDividerModule,
1657
- MatIconModule,
1658
- MatMenuModule,
1659
- MatPaginatorModule,
1660
- MatRippleModule,
1661
- MatSortModule,
1662
- MatTableModule,
1663
- MatTooltipModule,
1664
- ReactiveFormsModule,
1665
- TablaMantenimientoColumnDefsComponent,
1666
- MatBadgeModule,
1667
- TablaMantenimientoMenuComponent,
1668
- MatRowKeyboardSelectionDirective,
1669
- ], host: {
1670
- class: 'jvs-tabla-mantenimiento',
1671
- }, animations: [
1672
- trigger('detailExpand', [
1673
- state('collapsed', style({ height: '0px', minHeight: '0' })),
1674
- state('expanded', style({ height: '*' })),
1675
- transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
1676
- ]),
1677
- trigger('fadeInUp', [
1678
- transition(':enter', [
1679
- style({
1680
- transform: 'translateY(20px)',
1681
- opacity: 0
1682
- }),
1683
- animate(`400ms cubic-bezier(0.35, 0, 0.25, 1)`, style({
1684
- transform: 'translateY(0)',
1685
- opacity: 1
1686
- }))
1687
- ])
1688
- ]),
1689
- ], providers: [
1690
- { provide: MAT_PAGINATOR_DEFAULT_OPTIONS, useValue: { formFieldAppearance: 'outline' } }
1691
- ], template: "<div class=\"flex flex-col h-fit\">\n <div class=\"grow flex items-center justify-between bg-white\">\n <ng-content select=\"[filtro]\"></ng-content>\n </div>\n\n <div class=\"flex flex-col border-t\">\n <div class=\"flex-1 bg-app-bar flex items-center justify-between p-1\">\n <!-- <div class=\"hidden flex-1 sm:flex items-center flex-wrap gap-1\">-->\n <!-- </div>-->\n <div class=\"flex items-center flex-wrap mr-1 h-full\" *ngIf=\"leyenda\">\n <span class=\"font-bold\" [class]=\"leyenda.class\">{{ leyenda.text }}</span>\n </div>\n <div class=\"hidden flex-1 sm:flex items-center flex-wrap gap-1\">\n <div *ngIf=\"(botonesMenuFinal.izquierda ?? []).length > 0 \" class=\" flex items-center flex-wrap contenedor-botones\">\n <ng-container *ngFor=\"let btn of botonesMenu.izquierda; let idx = index;\">\n <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.izquierda?.length}}\"></ng-container>\n </ng-container>\n </div>\n\n <div *ngIf=\"(botonesMenuFinal.crud ?? []).length > 0\" class=\" flex items-center flex-wrap contenedor-botones\">\n <ng-container *ngFor=\"let btn of botonesMenu.crud; let idx = index;\">\n <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.crud?.length}}\"></ng-container>\n </ng-container>\n </div>\n\n <div *ngIf=\"(botonesMenuFinal.principal ?? []).length > 0\" class=\" flex items-center flex-wrap contenedor-botones\">\n <ng-container *ngFor=\"let btn of botonesMenu.principal; let idx = index;\">\n <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.principal?.length}}\"></ng-container>\n </ng-container>\n </div>\n\n <div *ngIf=\"(botonesMenuFinal.derecha ?? []).length > 0\" class=\"flex-auto flex items-center justify-end contenedor-botones\">\n <ng-container *ngFor=\"let btn of botonesMenu.derecha; let idx = index;\">\n <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.derecha?.length}}\"></ng-container>\n </ng-container>\n </div>\n <ng-content select=\"[objetosMenuPegado]\"></ng-content>\n </div>\n <div class=\"flex flex-1 sm:hidden items-center flex-wrap gap-1\">\n <button class=\"flex items-center justify-center text-2xs leading-none rounded-full p-1\"\n matRipple\n matTooltip=\"Botones de Acci\u00F3n\"\n type=\"button\"\n [matMenuTriggerFor]=\"menuOpciones\"\n >\n <mat-icon class=\"icon-xs\" svgIcon=\"roundMenu\"></mat-icon>\n </button>\n </div>\n <div class=\"flex-none flex items-center justify-end border-l-2\">\n <div class=\"flex-1 sm:flex-none flex items-center justify-end\">\n <ng-content select=\"[objetosMenu]\"></ng-content>\n </div>\n </div>\n <div *ngIf=\"ctrlBusqueda\" class=\"hidden flex-initial sm:flex items-center form-input max-w-[150px] bg-card rounded-full border m-1 px-1 border-l-2\"\n >\n <mat-icon svgIcon=\"roundSearch\" class=\"icon-xs\"></mat-icon>\n <input [formControl]=\"cCampoBusqueda\"\n class=\"text-xs px-1 py-1 border-0 outline-none w-full bg-transparent max-w-sm\"\n [placeholder]=\"ctrlBusquedaPlaceholder\"\n (keyup.enter)=\"ctrlBusqueda == 'query' ? cargarData() : false;\"\n type=\"search\">\n </div>\n <div class=\"flex-none flex items-center justify-end border-l-2\">\n <ng-content select=\"[botonesFiltro]\"></ng-content>\n <button matRipple *ngIf=\"isRecargarUsed || ctrlBusqueda == 'query'\"\n class=\"flex items-center justify-center text-2xs leading-none rounded-full p-1 text-green-700\"\n matTooltip=\"Actualizar datos\"\n (click)=\"(ctrlBusqueda == 'query' ? cargarData() : emitirAccionRecargar())\"\n type=\"button\">\n <mat-icon svgIcon=\"roundRefresh\" class=\"icon-xs\"></mat-icon>\n\n </button>\n <button matRipple [matMenuTriggerFor]=\"columnFilterMenu\" *ngIf=\"filtroCampos\"\n class=\"flex items-center justify-center text-2xs leading-none rounded-full p-1\"\n matTooltip=\"Columnas Filtro\"\n type=\"button\">\n <mat-icon svgIcon=\"roundFilterList\" class=\"icon-xs\"></mat-icon>\n </button>\n </div>\n </div>\n\n <div *ngIf=\"(botonesMenuFinal.secundario ?? []).length > 0\" class=\"flex-1 bg-app-bar flex items-center justify-between p-1 border-t\">\n <div class=\"hidden flex-1 sm:flex items-center flex-wrap gap-1\">\n <div class=\" flex items-center flex-wrap contenedor-botones\">\n <ng-container *ngFor=\"let btn of botonesMenu.secundario; let idx = index;\">\n <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.secundario?.length}}\"></ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n <!--<div class=\"grow flex flex-col items-stretch contenedor-tabla\" [ngClass]=\"{'table-container overflow-auto': esTabla}\">\n <pre>{{ this.chkLista.modelosChk | json }}</pre>\n <pre>{{ this.chkLista.checkbox.cantidadActivos | json }}</pre>\n <pre>{{ this.chkLista.checkbox.algunosActivos | json }}</pre>\n </div>-->\n <div class=\"grow flex flex-col items-stretch contenedor-tabla\" [ngClass]=\"{'table-container overflow-auto': esTabla}\">\n <ng-content select=\"[cuerpo]\"></ng-content>\n\n <table [id]=\"'tabla_' + nombreColeccion\" [dataSource]=\"dataSource\" [multiTemplateDataRows]=\"true\"\n [hidden]=\"!esTabla\"\n class=\"flex-1 table-mantenimiento table-auto h-fit\" mat-table matSort\n [trackBy]=\"trackByFn\"\n #tablaMantenimiento\n >\n\n <!--<table [dataSource]=\"dataSource\" class=\"table-mantenimiento table-auto h-auto w-full justify-center\" mat-table matSort>-->\n\n\n <ng-content select=\"[tableDefinitions]\"></ng-content>\n <ng-container matColumnDef=\"numeracion_automatica\">\n <th mat-header-cell *matHeaderCellDef style=\"width: 16px !important\">N\u00BA</th>\n <td mat-cell *matCellDef=\"let element; let i = dataIndex\" class=\"p-0 celda-numeracion-fila\">\n <div class=\"flex items-center justify-center font-bold numeracionFila\">\n <ng-container *ngIf=\"esTabla && paginador\">\n {{ (this.paginator?.pageIndex == 0 ? i + 1 : 1 + i + (this.paginator?.pageIndex ?? 1) * (this.paginator?.pageSize ?? 1)) }}\n </ng-container>\n <ng-container *ngIf=\"!paginador\">\n {{ (i + 1) }}\n </ng-container>\n </div>\n </td>\n <td mat-footer-cell *matFooterCellDef class=\"uppercase\"></td>\n </ng-container>\n <jvs-tabla-mantenimiento-column-defs [objThis]=\"this\" [colDetalle]=\"columnasTabla\"\n [nombreColeccion]=\"nombreColeccion\" [(chkLista)]=\"chkLista\"></jvs-tabla-mantenimiento-column-defs>\n\n <tr *matHeaderRowDef=\"visibleColumns; sticky: true\" mat-header-row class=\"title\" matHeader\n ></tr>\n\n <ng-container *ngIf=\"!!filaExtraHeader\">\n <tr mat-row *matRowDef=\"let row; columns: ['filaExtraHeader']\" class=\"student-detail-row\"\n [style.height.px]=\"0\"\n ></tr>\n\n <ng-container matColumnDef=\"filaExtraHeader\">\n <td mat-cell *matCellDef=\"let row; let i = dataIndex\" [attr.colspan]=\"visibleColumns.length\">\n\n <div class=\"row m-0 student-element-detail\"\n [@detailExpand]=\"(i == 0 && filaExtraHeader.esVisible && filaExtraHeader.esVisible()) ? 'expanded' : 'collapsed'\"\n [style.padding-right.px]=\"row.isExpanded ? 5 : 0\"\n [style.padding-left.px]=\"row.isExpanded ? 5 : 0\"\n >\n <ng-container *ngIf=\"filaExtraHeader.template\"\n [ngTemplateOutlet]=\"filaExtraHeader.template\"\n [ngTemplateOutletContext]=\"{ row: row }\"></ng-container>\n </div>\n\n </td>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"filaFooter\">\n <tr *matFooterRowDef=\"visibleColumns\" mat-footer-row\n [style.height.px]=\"0\"\n [id]=\"nombreColeccion + '_filaFooter'\"\n ></tr>\n </ng-container>\n\n <!--\t<tr\n *matRowDef=\"let row; columns: visibleColumns;\"\n class=\"hover:bg-secondary trans-ease-out cursor-pointer\"\n mat-row></tr>-->\n <tr\n [matRowKeyboardSelection]=\"tablaMantenimiento\"\n [rowModel]=\"row\"\n (seleccionarSiguiente)=\"opcMenu($event, {seccion: nombreColeccion, tipo: 'ver'});\"\n\n *matRowDef=\"let row; let idxTabla = dataIndex; columns: visibleColumns;\"\n (click)=\"seleccionarItem(row); opcMenu(row, {seccion: nombreColeccion, tipo: 'ver', tableDataIndex: idxTabla });\"\n (dblclick)=\"opcMenu(row, {seccion: nombreColeccion, tipo: 'seleccionar'}); dblclickItem.emit(row)\"\n (contextmenu)=\"(abrirMenuContextual($event, row)); $event. preventDefault();\"\n [ngClass]=\"classFila(row)\"\n @fadeInUp\n class=\"trans-ease-out cursor-pointer h-auto\"\n [style.height.px]=\"0\"\n [id]=\"propiedadSeleccion(row)\"\n [matTooltip]=\"procesarRowTooltip(row)\"\n matTooltipPosition=\"below\"\n [matTooltipPositionAtOrigin]=\"true\"\n [matTooltipClass]=\"['bg-red-700', 'text-red-100', 'm-0']\"\n [matTooltipDisabled]=\"!procesarRowTooltip(row)\"\n [class.regAnulado]=\"row[campoAnulado] == 1\"\n [class.regTooltip]=\"!!procesarRowTooltip(row)\"\n (keyup.delete)=\"opcMenu(row, {seccion: nombreColeccion, tipo: 'eliminar'})\"\n mat-row></tr>\n <ng-container *ngIf=\"filaExtraTemplate\">\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"student-detail-row h-0\"></tr>\n\n <ng-container matColumnDef=\"expandedDetail\">\n <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"visibleColumns.length\">\n\n <div class=\"row m-0 student-element-detail\"\n [@detailExpand]=\"row.isExpanded ? 'expanded' : 'collapsed'\"\n [style.padding-right.px]=\"row.isExpanded ? 5 : 0\"\n [style.padding-left.px]=\"row.isExpanded ? 5 : 0\"\n >\n <ng-container [ngTemplateOutlet]=\"filaExtraTemplate\"\n [ngTemplateOutletContext]=\"{ row: row }\"></ng-container>\n </div>\n\n </td>\n </ng-container>\n </ng-container>\n </table>\n\n <ng-container *ngIf=\"componenteCargadoTotalmente\">\n <div *ngIf=\"(noData | async) && esTabla\" class=\"flex-1 text-center text-secondary font-medium\">\n No se encontraron datos\n </div>\n </ng-container>\n </div>\n <ng-content select=\"[appendTable]\"></ng-content>\n <div class=\"flex-1 bg-app-bar flex flex-col sm:flex-row items-start justify-between p-1\">\n <div class=\"flex-1 flex items-start flex-wrap gap-1\">\n <div *ngIf=\"(botonesMenuFinal.inferior ?? []).length > 0\" class=\" flex items-center flex-wrap\">\n <ng-container *ngFor=\"let btn of botonesMenu.inferior; let idx = index;\">\n <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.inferior?.length}}\"></ng-container>\n </ng-container>\n </div>\n </div>\n\n <div *ngIf=\"esTabla && paginador\" class=\"flex-1 sm:flex-none flex items-center justify-end\">\n <mat-paginator class=\"tabla-mantenimiento-paginador\" [pageSizeOptions]=\"paginacion.pageSizeOptions\" [pageIndex]=\"paginacion.pageIndex - 1\" [length]=\"paginacion.pageLength\" [pageSize]=\"paginacion.pageSize\" (page)=\"paginacion.pageCurrent = $event; emitirResultados();\" ></mat-paginator>\n </div>\n </div>\n </div>\n\n</div>\n\n\n\n<!-- SECCION DE TEMPLATES O MENUS -->\n\n\n<mat-menu #columnFilterMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\n <ng-container *ngFor=\"let column of columnasTabla\">\n <button (click)=\"toggleColumnVisibility(column, $event)\" *ngIf=\"!tipoValorFuncion(column.noMostrarEnLista, false)\"\n class=\"checkbox-item mat-menu-item\">\n <mat-checkbox (click)=\"$event.stopPropagation()\" [(ngModel)]=\"column.visible\" [ngModelOptions]=\"{standalone: true}\" color=\"primary\">\n <span [innerHTML]=\"(column.labelLista ?? column.label).replace('<br>', ' ')\"></span>\n </mat-checkbox>\n </button>\n </ng-container>\n</mat-menu>\n\n\n\n\n\n\n<ng-template #botonesSuperiores let-btn=\"btn\" let-idx=\"idx\">\n <ng-container *ngTemplateOutlet=\"botonesContextual; context:{btn: btn, item: objSeleccionado, barraSuperior: true, idx: idx}\"></ng-container>\n</ng-template>\n\n<ng-template #botonesContextual let-btn=\"btn\" let-item=\"item\" let-barraSuperior=\"barraSuperior\" let-idx=\"idx\">\n\n <ng-container *ngIf=\"barraSuperior; else noBarraSuperior\">\n\n <!--\t\t<button mat-button style=\"min-width: unset; border: 1px !important;\" class=\"uppercase border border-gray rounded-none h-full px-1 disabled:opacity-50 disabled:text-secondary disabled:bg-transparent\">-->\n <!--\t\t\t<mat-icon *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\" size=\"15px\" class=\"icon-xs\"></mat-icon>-->\n <!--\t\t</button>-->\n <ng-container *ngIf=\"btn.subItems && btn.subItems.length > 0\">\n <button class=\"flex items-center justify-between uppercase text-2xs leading-none rounded-none px-2 py-1 bg-opacity-95 hover:bg-opacity-100 disabled:opacity-50 disabled:text-secondary disabled:!bg-gray-300 dark:disabled:!bg-gray-500 mat-elevation-z2\" type=\"button\"\n\n *ngIf=\"(!btn.esVisible || btn.esVisible(item, this)) && subItemsActivos(btn, item)\"\n [class]=\"(btn.class?btn.class:'')\"\n\n (click)=\"opcMenu(item, btn)\"\n [style.min-width]=\"((btn.soloIcono ?? tipoValorFuncion(soloIconos)) ? 'unset' : '')\"\n [matTooltip]=\"btn.tooltip || (btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo))) \"\n [matMenuTriggerFor]=\"menuOtrosBarra.menu\"\n\n [matBadge]=\"btn.badge\"\n matBadgeSize=\"small\"\n >\n <mat-icon class=\"icon-xs\" [class.mr-0.5]=\"!(btn.soloIcono ?? tipoValorFuncion(soloIconos))\" *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\" ></mat-icon>\n <span class=\"whitespace-nowrap\" *ngIf=\"!(btn.soloIcono ?? tipoValorFuncion(soloIconos))\">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>\n <mat-icon class=\"icon-xs\" svgIcon=\"fa5sCaretDown\" ></mat-icon>\n </button>\n\n <jvs-tabla-mantenimiento-menu #menuOtrosBarra\n [objThis]=\"objThis\"\n [nombreColeccion]=\"nombreColeccion\"\n [item]=\"item\"\n [derechosActuales]=\"derechosActuales\"\n [subItems]=\"btn.subItems\"\n (opcionSelecionada)=\"opcMenu($event.item, $event.btn)\"\n [botonTemplate]=\"botonesContextual\"\n >\n </jvs-tabla-mantenimiento-menu>\n </ng-container>\n <ng-container *ngIf=\"!btn.subItems || btn.subItems.length == 0\">\n <button class=\"flex items-center justify-between uppercase text-2xs leading-none rounded-none px-2 py-1 bg-opacity-95 hover:bg-opacity-100 disabled:opacity-50 disabled:text-secondary disabled:!bg-gray-300 dark:disabled:!bg-gray-500 mat-elevation-z2\" type=\"button\"\n\n *ngIf=\"!btn.esVisible || btn.esVisible(item, this)\"\n [class]=\"(btn.class?btn.class:'text-secondary')\"\n [ngClass]=\"{'text-secondary italic': !ignorarDerechos && !btn.esIndependiente && (!btn.ignorarDerecho && (!derechosActuales || !derechosActuales[btn.cDerechoCodigo ?? btn.tipo])) && !(['nuevo', 'editar', 'eliminar'].includes(btn.tipo))}\"\n [disabled]=\"!btn.esIndependiente && botonDisabled(btn, item)\"\n (click)=\"opcMenu(item, btn)\"\n [style.min-width]=\"((btn.soloIcono ?? tipoValorFuncion(soloIconos)) ? 'unset' : '')\"\n [matTooltip]=\"btn.tooltip || (btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo))) \"\n\n [matBadge]=\"btn.badge\"\n matBadgeSize=\"small\"\n >\n <mat-icon class=\"icon-xs\" [class.mr-0.5]=\"!(btn.soloIcono ?? tipoValorFuncion(soloIconos))\" *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\"></mat-icon>\n <span class=\"whitespace-nowrap\" *ngIf=\"!(btn.soloIcono ?? tipoValorFuncion(soloIconos))\">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>\n </button>\n\n </ng-container>\n\n </ng-container>\n <ng-template #noBarraSuperior>\n\n <ng-container *ngIf=\"btn.subItems && btn.subItems.length > 0\">\n <button class=\"flex items-center justify-between uppercase w-full rounded-none px-2 disabled:opacity-50 disabled:text-secondary disabled:bg-transparent\" mat-menu-item type=\"button\"\n *ngIf=\"!btn.noContextual && (!btn.esVisible || btn.esVisible(item, this))\"\n [class]=\"(btn.class?btn.class.replace('text-white', '').replace('bg', 'text'):'text-secondary')\"\n [ngClass]=\"{'text-secondary italic': !ignorarDerechos && !btn.esIndependiente && (!btn.ignorarDerecho && (!derechosActuales || !derechosActuales[btn.cDerechoCodigo ?? btn.tipo]))}\"\n [disabled]=\"!btn.esIndependiente && botonDisabled(btn, item)\"\n (click)=\"opcMenu(item, btn); $event.stopPropagation();\"\n [matMenuTriggerFor]=\"menuOtrosBarra.menu\"\n >\n <div class=\"flex w-full items-center justify-between uppercase text-2xs\"\n >\n <mat-icon *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\"\n class=\"flex-none icon-xs\"\n ></mat-icon>\n <span class=\"grow text-2xs\">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>\n <mat-icon class=\"flex-none icon-xs\" svgIcon=\"fa5sCaretRight\"></mat-icon>\n </div>\n </button>\n\n <jvs-tabla-mantenimiento-menu #menuOtrosBarra\n [objThis]=\"objThis\"\n [nombreColeccion]=\"nombreColeccion\"\n [item]=\"item\"\n [derechosActuales]=\"derechosActuales\"\n [subItems]=\"btn.subItems\"\n (opcionSelecionada)=\"opcMenu($event.item, $event.btn)\"\n [botonTemplate]=\"botonesContextual\"\n >\n </jvs-tabla-mantenimiento-menu>\n </ng-container>\n <ng-container *ngIf=\"!btn.subItems || btn.subItems.length == 0\">\n <ng-container *ngIf=\"btn.tipo == '-#SEPARADOR#-'; else itemsNormales\">\n <mat-divider></mat-divider>\n </ng-container>\n <ng-template #itemsNormales>\n <button class=\"flex items-center justify-between uppercase w-full rounded-none px-2 disabled:opacity-50 disabled:text-secondary disabled:bg-transparent\" mat-menu-item type=\"button\"\n *ngIf=\"!btn.noContextual && (!btn.esVisible || btn.esVisible(item, this))\"\n [class]=\"(btn.class?btn.class.replace('text-white', '').replace('bg', 'text'):'text-secondary')\"\n [ngClass]=\"{'text-secondary italic': !ignorarDerechos && !btn.esIndependiente && (!btn.ignorarDerecho && (!derechosActuales || !derechosActuales[btn.cDerechoCodigo ?? btn.tipo]))}\"\n [disabled]=\"!btn.esIndependiente && botonDisabled(btn, item)\"\n (click)=\"opcMenu(item, btn)\"\n >\n <div class=\"flex w-full items-center justify-between uppercase text-2xs\">\n <mat-icon *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\" class=\"flex-none icon-xs\"\n ></mat-icon>\n <span class=\"grow text-2xs\">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>\n </div>\n </button>\n </ng-template>\n\n </ng-container>\n\n </ng-template>\n\n</ng-template>\n\n<ng-template #userMenu let-item=\"item\">\n <div class=\"mat-menu bg-white rounded mat-elevation-z8 shadow botonesContextual\">\n <ng-container *ngFor=\"let btn of listaMenuCompleto\">\n <ng-container *ngTemplateOutlet=\"botonesContextual; context:{btn: btn, item: objSeleccionado, barraSuperior: false}\"></ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n\n<mat-menu #menuOpciones=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\n <ng-container *ngFor=\"let btn of listaMenuCompleto\">\n <ng-container\n *ngTemplateOutlet=\"botonesContextual; context:{btn: btn, item: objSeleccionado, barraSuperior: false}\"></ng-container>\n </ng-container>\n</mat-menu>\n\n", styles: ["@charset \"UTF-8\";:root{--tabla-mantenimiento-seleccion-fondo: rgb(179, 217, 252);--tabla-mantenimiento-seleccion-texto: rgb(1, 84, 164);--mat-paginator-container-size: 30px}:root .table-mantenimiento .elemento-seleccionado{background-color:var(--tabla-mantenimiento-seleccion-fondo)!important;color:var(--tabla-mantenimiento-seleccion-texto)!important;border-color:var(--tabla-mantenimiento-seleccion-texto)!important}.jvs-tabla-mantenimiento{width:inherit}.jvs-tabla-mantenimiento .contenedor-botones>*:first-child{@apply rounded-l;}.jvs-tabla-mantenimiento .contenedor-botones>*:last-child{@apply rounded-r;}.jvs-tabla-mantenimiento tr.regTooltip>td:first-child div:first-child:before,.jvs-tabla-mantenimiento tr.regTooltip>th:first-child div:first-child:before{content:\"\\26a0\\fe0f \";color:red;margin-right:4px;font-size:12px}.jvs-tabla-mantenimiento tr.regTooltip>td:first-child:not(:has(div)):before,.jvs-tabla-mantenimiento tr.regTooltip>th:first-child:not(:has(div)):before{content:\"\\26a0\\fe0f \";color:red;margin-right:4px;font-size:12px}.jvs-tabla-mantenimiento .mat-mdc-menu-content:not(:empty){@apply flex flex-col items-start;padding:0!important}.jvs-tabla-mantenimiento .mat-mdc-menu-item{line-height:24px!important;height:24px!important;min-height:24px!important}.jvs-tabla-mantenimiento .mat-mdc-menu-panel{min-height:auto!important}.jvs-tabla-mantenimiento .mat-mdc-table .mat-mdc-cell,.jvs-tabla-mantenimiento .mat-mdc-table .mat-mdc-header-cell .mat-mdc-footer-cell{white-space:unset}.jvs-tabla-mantenimiento .table-container{max-height:600px!important}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-table-sticky-border-elem-right{border-left:1px solid #e0e0e0}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e0}.jvs-tabla-mantenimiento .table-mantenimiento tr.regAnulado .mat-mdc-cell{color:unset!important}.jvs-tabla-mantenimiento .table-mantenimiento .bg-primary-activo .numeracionFila{@apply rounded-full bg-primary-contrast text-primary mx-1 p-1 w-6 h-6;}.jvs-tabla-mantenimiento .table-mantenimiento th .form-input{@apply w-auto;}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell,.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-cell,.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-footer-cell{border-width:1px;border-style:solid}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-cell:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-footer-cell:not(.celda-numeracion-fila){padding:.05rem .25rem}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell:first-of-type:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell:last-of-type:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-cell:first-of-type:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-cell:last-of-type:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-footer-cell:first-of-type:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-footer-cell:last-of-type:not(.celda-numeracion-fila){padding:0 .25rem}.jvs-tabla-mantenimiento .table-mantenimiento .student-element-detail{overflow:hidden;display:flex;align-items:center;justify-content:center}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-header-row{height:25px!important;color:rgb(var(--color-primary))!important;background-color:rgb(var(--color-primary-contrast))!important}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-header-cell{padding:5px;font-size:10px;line-height:10px;font-weight:700!important;color:inherit}.jvs-tabla-mantenimiento .table-mantenimiento .mdc-data-table__row:not(.mdc-data-table__row--selected):not(.elemento-seleccionado):hover,.jvs-tabla-mantenimiento .table-mantenimiento .mdc-data-table__row:not(.mdc-data-table__row--selected):not(.elemento-seleccionado):focus{background-color:rgba(var(--color-primary-contrast),.04)}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-row .mat-mdc-cell,.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-footer-row .mat-mdc-cell{font-size:10px}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-row .mat-mdc-footer-cell:empty,.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-footer-row .mat-mdc-footer-cell:empty{border-width:0!important}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-cell{@apply leading-tight;}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell{border-color:#d4d0d0;@apply text-center uppercase;}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell .mat-sort-header-container{@apply flex items-center justify-between w-full;}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell .mat-sort-header-container .mat-sort-header-content{@apply inline w-full text-center;}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell .mat-sort-header-container .mat-sort-header-arrow{@apply flex-none;}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-sort-header-content{width:100%;text-align:center;display:unset;align-items:center}\n"] }]
1692
- }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i2$1.Overlay }, { type: i0.ViewContainerRef }, { type: TablaMantenimientoService }, { type: i0.ChangeDetectorRef }], propDecorators: { id: [{
1693
- type: HostBinding
1694
- }], dataSuscription: [{
1695
- type: Input
1696
- }], objThis: [{
1697
- type: Input,
1698
- args: [{ required: true }]
1699
- }], nombreColeccion: [{
1700
- type: Input,
1701
- args: [{ required: true }]
1702
- }], ctrlBusquedaValue: [{
1703
- type: Input
1704
- }], ctrlBusquedaPlaceholder: [{
1705
- type: Input
1706
- }], filtroCampos: [{
1707
- type: Input
1708
- }], paginador: [{
1709
- type: Input
1710
- }], esTabla: [{
1711
- type: Input
1712
- }], readOnly: [{
1713
- type: Input
1714
- }], filaExtraHeader: [{
1715
- type: Input
1716
- }], filaFooter: [{
1717
- type: Input
1718
- }], botonesCRUD: [{
1719
- type: Input
1720
- }], dblclickItem: [{
1721
- type: Output
1722
- }], objBotonesCRUD: [{
1723
- type: Input
1724
- }], classSeleccionado: [{
1725
- type: Input
1726
- }], classAnulado: [{
1727
- type: Input
1728
- }], campoAnulado: [{
1729
- type: Input
1730
- }], campoAnuladoMensaje: [{
1731
- type: Input
1732
- }], opcionSelecionada: [{
1733
- type: Output
1734
- }], opcBusqueda: [{
1735
- type: Output
1736
- }], accionRecargar: [{
1737
- type: Output
1738
- }], selectionModel: [{
1739
- type: Input
1740
- }], selectionModelChange: [{
1741
- type: Output
1742
- }], filaExtraTemplate: [{
1743
- type: Input
1744
- }], paginator: [{
1745
- type: ViewChild,
1746
- args: [MatPaginator]
1747
- }], sort: [{
1748
- type: ViewChild,
1749
- args: [MatSort]
1750
- }], exportarExcel: [{
1751
- type: Input
1752
- }], pageSize: [{
1753
- type: Input
1754
- }], pageSizeOptions: [{
1755
- type: Input
1756
- }], dataSourceChange: [{
1757
- type: Output
1758
- }], resultados: [{
1759
- type: Output
1760
- }], table: [{
1761
- type: ViewChild,
1762
- args: [MatTable, { static: false }]
1763
- }], columnDefs: [{
1764
- type: ContentChildren,
1765
- args: [MatColumnDef, { descendants: true }]
1766
- }], derechosActuales: [{
1767
- type: Input
1768
- }], rows: [{
1769
- type: ViewChildren,
1770
- args: [MatRow, { read: ElementRef }]
1771
- }], rowFooter: [{
1772
- type: ViewChild,
1773
- args: [MatFooterRow, { read: ElementRef }]
1774
- }], userMenu: [{
1775
- type: ViewChild,
1776
- args: ['userMenu']
1777
- }], ctrlBusqueda: [{
1778
- type: Input
1779
- }], leyenda: [{
1780
- type: Input
1781
- }], idTabla: [{
1782
- type: Input,
1783
- args: [{ required: true }]
1784
- }], columnasTabla: [{
1785
- type: Input
1786
- }], botonesMenu: [{
1787
- type: Input
1788
- }], condicionesClaseFila: [{
1789
- type: Input
1790
- }], rowTooltip: [{
1791
- type: Input
1792
- }], soloIconos: [{
1793
- type: Input
1794
- }] } });
1795
-
1796
- /**
1797
- * Generated bundle index. Do not edit.
1798
- */
1799
-
1800
- export { ProgressBarComponent, TablaMantenimientoComponent, TablaMantenimientoService };
1801
- //# sourceMappingURL=jvsoft-components-tabla-mantenimiento.mjs.map