@jvsoft/components 1.0.0-alpha.6 → 1.0.0-alpha.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/jvsoft-components-lista-arbol.mjs +121 -145
- package/fesm2022/jvsoft-components-lista-arbol.mjs.map +1 -1
- package/fesm2022/jvsoft-components.mjs +121 -146
- package/fesm2022/jvsoft-components.mjs.map +1 -1
- package/lista-arbol/README.md +268 -0
- package/lista-arbol/lista-arbol.component.d.ts +36 -37
- package/package.json +9 -9
- package/tabla-mantenimiento/interfaces/global/columnas-tabla.d.ts +0 -10
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, booleanAttribute, output, computed, Component, EventEmitter, HostListener, Output, Input, Directive, ViewChild, Optional, inject, Pipe, NgModule, ContentChildren, ViewChildren, Injectable, ElementRef, HostBinding } from '@angular/core';
|
|
2
|
+
import { input, booleanAttribute, output, computed, Component, EventEmitter, HostListener, Output, Input, Directive, ViewChild, Optional, inject, Pipe, NgModule, ContentChildren, ViewChildren, Injectable, ElementRef, HostBinding, signal, effect, untracked } from '@angular/core';
|
|
3
3
|
import * as i3 from '@angular/material/dialog';
|
|
4
4
|
import { MatDialogModule } from '@angular/material/dialog';
|
|
5
5
|
import * as i4 from '@angular/material/icon';
|
|
@@ -33,7 +33,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
|
|
|
33
33
|
import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
|
|
34
34
|
import moment from 'moment';
|
|
35
35
|
import { Subject, takeUntil, startWith, of, fromEvent } from 'rxjs';
|
|
36
|
-
import { filter, map, take } from 'rxjs/operators';
|
|
36
|
+
import { filter, map, take, switchMap } from 'rxjs/operators';
|
|
37
37
|
import shortHash from 'shorthash2';
|
|
38
38
|
import * as i1$1 from '@angular/platform-browser';
|
|
39
39
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
@@ -44,6 +44,7 @@ import * as i3$2 from '@angular/material/tree';
|
|
|
44
44
|
import { MatTreeModule } from '@angular/material/tree';
|
|
45
45
|
import { NestedTreeControl } from '@angular/cdk/tree';
|
|
46
46
|
import { DataModel as DataModel$1 } from '@jvsoft/utils';
|
|
47
|
+
import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
47
48
|
|
|
48
49
|
class DialogFlotanteComponent {
|
|
49
50
|
cssClases = input({});
|
|
@@ -2061,77 +2062,94 @@ function generarArbol(params) {
|
|
|
2061
2062
|
}
|
|
2062
2063
|
|
|
2063
2064
|
class ListaArbolComponent {
|
|
2064
|
-
|
|
2065
|
-
|
|
2066
|
-
|
|
2067
|
-
|
|
2068
|
-
|
|
2069
|
-
|
|
2070
|
-
|
|
2071
|
-
|
|
2072
|
-
|
|
2073
|
-
|
|
2074
|
-
|
|
2075
|
-
|
|
2076
|
-
|
|
2077
|
-
|
|
2078
|
-
|
|
2079
|
-
|
|
2080
|
-
|
|
2081
|
-
|
|
2082
|
-
|
|
2083
|
-
|
|
2084
|
-
|
|
2085
|
-
|
|
2086
|
-
|
|
2087
|
-
|
|
2088
|
-
|
|
2089
|
-
|
|
2090
|
-
|
|
2091
|
-
|
|
2092
|
-
|
|
2093
|
-
if (Array.isArray(val)) {
|
|
2094
|
-
this._idTabla = val;
|
|
2095
|
-
}
|
|
2096
|
-
else {
|
|
2097
|
-
this._idTabla.push(val);
|
|
2065
|
+
// Inputs
|
|
2066
|
+
listaSuscription = input.required();
|
|
2067
|
+
nombreColeccion = input.required();
|
|
2068
|
+
checkbox = input(false);
|
|
2069
|
+
expandirRecursivo = input(false);
|
|
2070
|
+
checkboxSeleccionados = input([]);
|
|
2071
|
+
campoId = input.required();
|
|
2072
|
+
campoIdPadre = input.required();
|
|
2073
|
+
campoStr = input(''); // Optional - can use templateTxtData instead
|
|
2074
|
+
campoOrden = input();
|
|
2075
|
+
strHijoContainer = input('hijos');
|
|
2076
|
+
menuContextual = input();
|
|
2077
|
+
classSeleccionado = input(['bg-primary-activo', 'text-primary', 'dark:!bg-primary-dark-activo']);
|
|
2078
|
+
classAnulado = input(['line-through', 'text-red', 'italic']);
|
|
2079
|
+
campoAnulado = input();
|
|
2080
|
+
templateTxtData = input();
|
|
2081
|
+
condicionMostrar = input();
|
|
2082
|
+
condicionesClaseFila = input(() => []);
|
|
2083
|
+
// idTabla input with transform to support both string and string[]
|
|
2084
|
+
idTabla = input.required({
|
|
2085
|
+
transform: (val) => {
|
|
2086
|
+
if (Array.isArray(val)) {
|
|
2087
|
+
this._idTabla.set(val);
|
|
2088
|
+
return val;
|
|
2089
|
+
}
|
|
2090
|
+
else {
|
|
2091
|
+
this._idTabla.update(current => [...current, val]);
|
|
2092
|
+
return [val];
|
|
2093
|
+
}
|
|
2098
2094
|
}
|
|
2099
|
-
}
|
|
2100
|
-
|
|
2101
|
-
|
|
2102
|
-
|
|
2103
|
-
|
|
2104
|
-
|
|
2105
|
-
|
|
2106
|
-
|
|
2107
|
-
|
|
2108
|
-
|
|
2109
|
-
|
|
2095
|
+
});
|
|
2096
|
+
// selectionModel input for backward compatibility
|
|
2097
|
+
selectionModel = input();
|
|
2098
|
+
// Outputs
|
|
2099
|
+
selectionModelChange = output();
|
|
2100
|
+
seleccionado = output();
|
|
2101
|
+
listaCheck = output();
|
|
2102
|
+
listaCheckObj = output();
|
|
2103
|
+
// Internal state as signals
|
|
2104
|
+
_idTabla = signal([]);
|
|
2105
|
+
_seleccionado = signal(null);
|
|
2106
|
+
listaMuestraArbol = signal([]);
|
|
2107
|
+
listaOriginal = signal([]);
|
|
2110
2108
|
chkLista = new DataModel$1();
|
|
2111
|
-
|
|
2112
|
-
|
|
2113
|
-
|
|
2114
|
-
|
|
2115
|
-
|
|
2116
|
-
|
|
2109
|
+
// Computed values
|
|
2110
|
+
idTablaValue = computed(() => this._idTabla());
|
|
2111
|
+
buscarItemSeleccionado = computed(() => {
|
|
2112
|
+
const selId = this._seleccionado();
|
|
2113
|
+
const lista = this.listaOriginal();
|
|
2114
|
+
if (!selId)
|
|
2115
|
+
return null;
|
|
2116
|
+
return lista.find(itm => selId === this.propiedadSeleccion(itm)) ?? null;
|
|
2117
|
+
});
|
|
2118
|
+
objSeleccionado = computed(() => this.buscarItemSeleccionado());
|
|
2119
|
+
treeControl = new NestedTreeControl((node) => node[this.strHijoContainer()]);
|
|
2120
|
+
// Convert signal to observable for proper subscription management
|
|
2121
|
+
listaSuscription$ = toObservable(this.listaSuscription);
|
|
2122
|
+
constructor() {
|
|
2123
|
+
// Watch selectionModel input for backward compatibility
|
|
2124
|
+
effect(() => {
|
|
2125
|
+
const selModel = this.selectionModel();
|
|
2126
|
+
if (selModel) {
|
|
2127
|
+
untracked(() => this.seleccionarItem(selModel, true));
|
|
2128
|
+
}
|
|
2129
|
+
});
|
|
2130
|
+
// Setup subscription with automatic cleanup using switchMap
|
|
2131
|
+
// switchMap automatically unsubscribes from previous observable when a new one arrives
|
|
2132
|
+
this.listaSuscription$
|
|
2133
|
+
.pipe(switchMap(obs => obs), takeUntilDestroyed())
|
|
2134
|
+
.subscribe(res => {
|
|
2117
2135
|
if (res) {
|
|
2118
|
-
this.listaOriginal
|
|
2136
|
+
this.listaOriginal.set(res);
|
|
2119
2137
|
const listaAs = generarArbol({
|
|
2120
2138
|
lista: res,
|
|
2121
|
-
campoId: this.campoId,
|
|
2122
|
-
campoIdPadre: this.campoIdPadre,
|
|
2139
|
+
campoId: this.campoId(),
|
|
2140
|
+
campoIdPadre: this.campoIdPadre(),
|
|
2123
2141
|
idPadre: null,
|
|
2124
|
-
strChildren: this.strHijoContainer,
|
|
2125
|
-
campoOrden: this.campoOrden
|
|
2142
|
+
strChildren: this.strHijoContainer(),
|
|
2143
|
+
campoOrden: this.campoOrden(),
|
|
2144
|
+
});
|
|
2145
|
+
// Use untracked to avoid unnecessary re-renders
|
|
2146
|
+
untracked(() => {
|
|
2147
|
+
this.listaMuestraArbol.set(listaAs);
|
|
2126
2148
|
});
|
|
2127
|
-
this.
|
|
2128
|
-
|
|
2129
|
-
this.
|
|
2130
|
-
|
|
2131
|
-
if (this.checkbox) {
|
|
2132
|
-
this.chkLista.agregarControles(res, this.campoId);
|
|
2133
|
-
this.checkboxSeleccionados.forEach((chkSel) => {
|
|
2134
|
-
this.chkLista.setState(chkSel[this.campoId], true);
|
|
2149
|
+
if (this.checkbox()) {
|
|
2150
|
+
this.chkLista.agregarControles(res, this.campoId());
|
|
2151
|
+
this.checkboxSeleccionados().forEach((chkSel) => {
|
|
2152
|
+
this.chkLista.setState(chkSel[this.campoId()], true);
|
|
2135
2153
|
});
|
|
2136
2154
|
this.emitirModeloCheck();
|
|
2137
2155
|
}
|
|
@@ -2140,47 +2158,50 @@ class ListaArbolComponent {
|
|
|
2140
2158
|
}
|
|
2141
2159
|
idTablaValor(data) {
|
|
2142
2160
|
if (data) {
|
|
2143
|
-
|
|
2161
|
+
const idTablaVal = this._idTabla();
|
|
2162
|
+
if (idTablaVal.length < 1) {
|
|
2144
2163
|
return shortHash(JSON.stringify({ data, claseFinal: undefined }));
|
|
2145
2164
|
}
|
|
2146
|
-
return
|
|
2165
|
+
return idTablaVal.map(d => data[d]).join('-');
|
|
2147
2166
|
}
|
|
2148
2167
|
return '';
|
|
2149
2168
|
}
|
|
2150
2169
|
propiedadSeleccion(item) {
|
|
2151
|
-
return `${this.nombreColeccion}_${this.idTablaValor(item)}`;
|
|
2170
|
+
return `${this.nombreColeccion()}_${this.idTablaValor(item)}`;
|
|
2152
2171
|
}
|
|
2153
2172
|
esSeleccionActual(item) {
|
|
2154
|
-
return this._seleccionado === this.propiedadSeleccion(item);
|
|
2173
|
+
return this._seleccionado() === this.propiedadSeleccion(item);
|
|
2155
2174
|
}
|
|
2156
2175
|
seleccionarItem(item, forzado = false) {
|
|
2157
2176
|
const idItem = this.propiedadSeleccion(item);
|
|
2158
2177
|
if (forzado) {
|
|
2159
|
-
this._seleccionado
|
|
2178
|
+
this._seleccionado.set(idItem);
|
|
2160
2179
|
}
|
|
2161
2180
|
else {
|
|
2162
|
-
this._seleccionado
|
|
2181
|
+
this._seleccionado.update(current => current === idItem ? null : idItem);
|
|
2163
2182
|
}
|
|
2164
|
-
this.
|
|
2165
|
-
this.
|
|
2183
|
+
const objSel = this.objSeleccionado();
|
|
2184
|
+
this.selectionModelChange.emit(objSel);
|
|
2185
|
+
this.seleccionado.emit(objSel);
|
|
2166
2186
|
}
|
|
2167
|
-
hasChild = (_, node) =>
|
|
2187
|
+
hasChild = (_, node) => {
|
|
2188
|
+
const strHijo = this.strHijoContainer();
|
|
2189
|
+
return !!node[strHijo] && node[strHijo].length > 0;
|
|
2190
|
+
};
|
|
2168
2191
|
opcMenu(v) {
|
|
2169
|
-
|
|
2170
|
-
|
|
2171
|
-
const opAdic = { seccion: this.nombreColeccion };
|
|
2172
|
-
opAdic['itemSeleccionado'] = this.objSeleccionado;
|
|
2173
|
-
// v = {...v, ...opAdic};
|
|
2174
|
-
// this.seleccionado.emit(v);
|
|
2192
|
+
const opAdic = { seccion: this.nombreColeccion() };
|
|
2193
|
+
opAdic['itemSeleccionado'] = this.objSeleccionado();
|
|
2175
2194
|
}
|
|
2176
2195
|
emitirModeloCheck() {
|
|
2177
2196
|
this.listaCheck.emit(this.chkLista.generarLista());
|
|
2178
2197
|
this.listaCheckObj.emit(this.chkLista.generarLista('object'));
|
|
2179
2198
|
}
|
|
2180
2199
|
cambiarPadre(checkActual, estado) {
|
|
2181
|
-
const parentId = checkActual[this.campoIdPadre];
|
|
2200
|
+
const parentId = checkActual[this.campoIdPadre()];
|
|
2182
2201
|
if (parentId) {
|
|
2183
|
-
|
|
2202
|
+
// Fix: buscar en listaOriginal en lugar de listaMuestraArbol
|
|
2203
|
+
const listaOrig = this.listaOriginal();
|
|
2204
|
+
const padreAct = listaOrig.find((itm) => itm[this.campoId()] === parentId);
|
|
2184
2205
|
if (padreAct) {
|
|
2185
2206
|
this.chkLista.setState(parentId, this.hijosActivos('checked', padreAct) || this.hijosActivos('indeterminate', padreAct));
|
|
2186
2207
|
this.cambiarPadre(padreAct, estado);
|
|
@@ -2194,14 +2215,14 @@ class ListaArbolComponent {
|
|
|
2194
2215
|
});
|
|
2195
2216
|
}
|
|
2196
2217
|
this.cambiarPadre(checkActual, estado);
|
|
2197
|
-
this.chkLista.setState(checkActual[this.campoId], estado);
|
|
2218
|
+
this.chkLista.setState(checkActual[this.campoId()], estado);
|
|
2198
2219
|
}
|
|
2199
2220
|
hijosActivos(tipo, checkActual) {
|
|
2200
2221
|
let totalHijos = 0;
|
|
2201
2222
|
let cantActivo = 0;
|
|
2202
2223
|
if (this.hasChild(0, checkActual)) {
|
|
2203
2224
|
(this.treeControl.getChildren(checkActual) ?? []).forEach((vas) => {
|
|
2204
|
-
if (this.chkLista.getState(vas[this.campoId] + '')) {
|
|
2225
|
+
if (this.chkLista.getState(vas[this.campoId()] + '')) {
|
|
2205
2226
|
cantActivo++;
|
|
2206
2227
|
}
|
|
2207
2228
|
totalHijos++;
|
|
@@ -2209,29 +2230,30 @@ class ListaArbolComponent {
|
|
|
2209
2230
|
}
|
|
2210
2231
|
switch (tipo) {
|
|
2211
2232
|
case 'checked':
|
|
2212
|
-
return (cantActivo
|
|
2233
|
+
return (cantActivo === totalHijos);
|
|
2213
2234
|
case 'indeterminate':
|
|
2214
|
-
|
|
2215
|
-
|
|
2216
|
-
}
|
|
2217
|
-
return ((cantActivo > 0) && (cantActivo != totalHijos));
|
|
2235
|
+
// Fix: remover efecto secundario
|
|
2236
|
+
return ((cantActivo > 0) && (cantActivo !== totalHijos));
|
|
2218
2237
|
}
|
|
2219
2238
|
return false;
|
|
2220
2239
|
}
|
|
2221
2240
|
classFila(item) {
|
|
2222
2241
|
let claseFinal = [];
|
|
2223
|
-
|
|
2224
|
-
|
|
2242
|
+
const campoAnul = this.campoAnulado();
|
|
2243
|
+
if (campoAnul && (item[campoAnul] === 1)) {
|
|
2244
|
+
claseFinal = claseFinal.concat(this.classAnulado());
|
|
2225
2245
|
}
|
|
2226
|
-
|
|
2227
|
-
|
|
2246
|
+
const objSel = this.objSeleccionado();
|
|
2247
|
+
if (objSel === item || this.esSeleccionActual(item)) {
|
|
2248
|
+
claseFinal = claseFinal.concat(this.classSeleccionado());
|
|
2228
2249
|
}
|
|
2229
|
-
|
|
2230
|
-
|
|
2250
|
+
const condClases = this.condicionesClaseFila();
|
|
2251
|
+
claseFinal = claseFinal.concat(condClases(item));
|
|
2252
|
+
// Fix: no mutar el objeto original
|
|
2231
2253
|
return claseFinal;
|
|
2232
2254
|
}
|
|
2233
2255
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ListaArbolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2234
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2256
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: ListaArbolComponent, isStandalone: true, selector: "jvs-lista-arbol", inputs: { listaSuscription: { classPropertyName: "listaSuscription", publicName: "listaSuscription", isSignal: true, isRequired: true, transformFunction: null }, nombreColeccion: { classPropertyName: "nombreColeccion", publicName: "nombreColeccion", isSignal: true, isRequired: true, transformFunction: null }, checkbox: { classPropertyName: "checkbox", publicName: "checkbox", isSignal: true, isRequired: false, transformFunction: null }, expandirRecursivo: { classPropertyName: "expandirRecursivo", publicName: "expandirRecursivo", isSignal: true, isRequired: false, transformFunction: null }, checkboxSeleccionados: { classPropertyName: "checkboxSeleccionados", publicName: "checkboxSeleccionados", isSignal: true, isRequired: false, transformFunction: null }, campoId: { classPropertyName: "campoId", publicName: "campoId", isSignal: true, isRequired: true, transformFunction: null }, campoIdPadre: { classPropertyName: "campoIdPadre", publicName: "campoIdPadre", isSignal: true, isRequired: true, transformFunction: null }, campoStr: { classPropertyName: "campoStr", publicName: "campoStr", isSignal: true, isRequired: false, transformFunction: null }, campoOrden: { classPropertyName: "campoOrden", publicName: "campoOrden", isSignal: true, isRequired: false, transformFunction: null }, strHijoContainer: { classPropertyName: "strHijoContainer", publicName: "strHijoContainer", isSignal: true, isRequired: false, transformFunction: null }, menuContextual: { classPropertyName: "menuContextual", publicName: "menuContextual", isSignal: true, isRequired: false, transformFunction: null }, classSeleccionado: { classPropertyName: "classSeleccionado", publicName: "classSeleccionado", isSignal: true, isRequired: false, transformFunction: null }, classAnulado: { classPropertyName: "classAnulado", publicName: "classAnulado", isSignal: true, isRequired: false, transformFunction: null }, campoAnulado: { classPropertyName: "campoAnulado", publicName: "campoAnulado", isSignal: true, isRequired: false, transformFunction: null }, templateTxtData: { classPropertyName: "templateTxtData", publicName: "templateTxtData", isSignal: true, isRequired: false, transformFunction: null }, condicionMostrar: { classPropertyName: "condicionMostrar", publicName: "condicionMostrar", isSignal: true, isRequired: false, transformFunction: null }, condicionesClaseFila: { classPropertyName: "condicionesClaseFila", publicName: "condicionesClaseFila", isSignal: true, isRequired: false, transformFunction: null }, idTabla: { classPropertyName: "idTabla", publicName: "idTabla", isSignal: true, isRequired: true, transformFunction: null }, selectionModel: { classPropertyName: "selectionModel", publicName: "selectionModel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionModelChange: "selectionModelChange", seleccionado: "seleccionado", listaCheck: "listaCheck", listaCheckObj: "listaCheckObj" }, ngImport: i0, template: "<mat-tree [dataSource]=\"listaMuestraArbol()\" [treeControl]=\"treeControl\">\n <mat-nested-tree-node *matTreeNodeDef=\"let node; when: hasChild\">\n <div class=\"flex flex-col trans-ease-out cursor-pointer\" matTreeNodeToggle\n [matTreeNodeToggleRecursive]=\"expandirRecursivo()\">\n <ng-container [ngTemplateOutlet]=\"liDat\"\n [ngTemplateOutletContext]=\"{ node: node, nested: true }\"></ng-container>\n <div class=\"pl-4\" [class.hidden]=\"!treeControl.isExpanded(node)\">\n <ng-container matTreeNodeOutlet></ng-container>\n </div>\n </div>\n </mat-nested-tree-node>\n\n <!-- Cambiar mat-tree-node plano por mat-nested-tree-node sin hijos -->\n <mat-nested-tree-node *matTreeNodeDef=\"let node\">\n <div class=\"flex flex-col trans-ease-out\">\n <ng-container [ngTemplateOutlet]=\"liDat\"\n [ngTemplateOutletContext]=\"{ node: node, nested: false }\"></ng-container>\n </div>\n </mat-nested-tree-node>\n</mat-tree>\n\n<ng-template #liDat let-node=\"node\" let-nested=\"nested\">\n <div class=\"flex items-center gap-0 text-sm trans-ease-out cursor-pointer p-0 w-full\"\n (contextmenu)=\"menuContextual()?.abrirMenuContextual($event, node); $event.preventDefault();\"\n (click)=\"seleccionarItem(node); opcMenu({ seccion: nombreColeccion(), tipo: 'ver', item: node }); menuContextual()?.cerrarMenuContextual(); (nested === false) && $event.stopPropagation();\"\n [ngClass]=\"classFila(node)\">\n <mat-icon *ngIf=\"!nested\"></mat-icon>\n <mat-icon *ngIf=\"nested\"\n [svgIcon]=\"treeControl.isExpanded(node) ? 'roundExpandMore' : 'roundChevronRight'\"></mat-icon>\n\n <mat-checkbox *ngIf=\"checkbox()\"\n [(ngModel)]=\"chkLista.modelosChk[node[campoId()]]\"\n [ngModelOptions]=\"{ standalone: true }\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"cambiarCheck(node, $event.checked); emitirModeloCheck()\"\n [indeterminate]=\"hasChild(0, node) && hijosActivos('indeterminate', node)\"\n [checked]=\"hasChild(0, node) ? hijosActivos('checked', node) : chkLista.modelosChk[node[campoId()]]\">\n </mat-checkbox>\n\n <span *ngIf=\"!templateTxtData()\" class=\"w-full\">{{ node[campoStr()] }}</span>\n <ng-container *ngIf=\"templateTxtData()\" [ngTemplateOutlet]=\"templateTxtData()!\"\n [ngTemplateOutletContext]=\"{ data: node, treeControl }\"></ng-container>\n </div>\n</ng-template>\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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { 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: MatTreeModule }, { kind: "directive", type: i3$2.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i3$2.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i3$2.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i3$2.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i3$2.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5$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"] }] });
|
|
2235
2257
|
}
|
|
2236
2258
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ListaArbolComponent, decorators: [{
|
|
2237
2259
|
type: Component,
|
|
@@ -2241,55 +2263,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2241
2263
|
MatTreeModule,
|
|
2242
2264
|
MatIconModule,
|
|
2243
2265
|
MatCheckboxModule,
|
|
2244
|
-
], template: "<mat-tree [dataSource]=\"listaMuestraArbol\" [treeControl]=\"treeControl\">\n <mat-nested-tree-node *matTreeNodeDef=\"let node; when: hasChild\">\n <div class=\"flex flex-col trans-ease-out cursor-pointer\" matTreeNodeToggle\n [matTreeNodeToggleRecursive]=\"expandirRecursivo\">\n <ng-container [ngTemplateOutlet]=\"liDat\"\n [ngTemplateOutletContext]=\"{ node: node, nested: true }\"></ng-container>\n <div class=\"pl-4\" [class.
|
|
2245
|
-
}],
|
|
2246
|
-
type: Input
|
|
2247
|
-
}], nombreColeccion: [{
|
|
2248
|
-
type: Input
|
|
2249
|
-
}], checkbox: [{
|
|
2250
|
-
type: Input
|
|
2251
|
-
}], expandirRecursivo: [{
|
|
2252
|
-
type: Input
|
|
2253
|
-
}], checkboxSeleccionados: [{
|
|
2254
|
-
type: Input
|
|
2255
|
-
}], campoId: [{
|
|
2256
|
-
type: Input
|
|
2257
|
-
}], campoIdPadre: [{
|
|
2258
|
-
type: Input
|
|
2259
|
-
}], campoStr: [{
|
|
2260
|
-
type: Input
|
|
2261
|
-
}], campoOrden: [{
|
|
2262
|
-
type: Input
|
|
2263
|
-
}], strHijoContainer: [{
|
|
2264
|
-
type: Input
|
|
2265
|
-
}], menuContextual: [{
|
|
2266
|
-
type: Input
|
|
2267
|
-
}], classSeleccionado: [{
|
|
2268
|
-
type: Input
|
|
2269
|
-
}], classAnulado: [{
|
|
2270
|
-
type: Input
|
|
2271
|
-
}], campoAnulado: [{
|
|
2272
|
-
type: Input
|
|
2273
|
-
}], templateTxtData: [{
|
|
2274
|
-
type: Input
|
|
2275
|
-
}], condicionMostrar: [{
|
|
2276
|
-
type: Input
|
|
2277
|
-
}], condicionesClaseFila: [{
|
|
2278
|
-
type: Input
|
|
2279
|
-
}], selectionModel: [{
|
|
2280
|
-
type: Input
|
|
2281
|
-
}], selectionModelChange: [{
|
|
2282
|
-
type: Output
|
|
2283
|
-
}], seleccionado: [{
|
|
2284
|
-
type: Output
|
|
2285
|
-
}], listaCheck: [{
|
|
2286
|
-
type: Output
|
|
2287
|
-
}], listaCheckObj: [{
|
|
2288
|
-
type: Output
|
|
2289
|
-
}], idTabla: [{
|
|
2290
|
-
type: Input,
|
|
2291
|
-
args: [{ required: true }]
|
|
2292
|
-
}] } });
|
|
2266
|
+
], template: "<mat-tree [dataSource]=\"listaMuestraArbol()\" [treeControl]=\"treeControl\">\n <mat-nested-tree-node *matTreeNodeDef=\"let node; when: hasChild\">\n <div class=\"flex flex-col trans-ease-out cursor-pointer\" matTreeNodeToggle\n [matTreeNodeToggleRecursive]=\"expandirRecursivo()\">\n <ng-container [ngTemplateOutlet]=\"liDat\"\n [ngTemplateOutletContext]=\"{ node: node, nested: true }\"></ng-container>\n <div class=\"pl-4\" [class.hidden]=\"!treeControl.isExpanded(node)\">\n <ng-container matTreeNodeOutlet></ng-container>\n </div>\n </div>\n </mat-nested-tree-node>\n\n <!-- Cambiar mat-tree-node plano por mat-nested-tree-node sin hijos -->\n <mat-nested-tree-node *matTreeNodeDef=\"let node\">\n <div class=\"flex flex-col trans-ease-out\">\n <ng-container [ngTemplateOutlet]=\"liDat\"\n [ngTemplateOutletContext]=\"{ node: node, nested: false }\"></ng-container>\n </div>\n </mat-nested-tree-node>\n</mat-tree>\n\n<ng-template #liDat let-node=\"node\" let-nested=\"nested\">\n <div class=\"flex items-center gap-0 text-sm trans-ease-out cursor-pointer p-0 w-full\"\n (contextmenu)=\"menuContextual()?.abrirMenuContextual($event, node); $event.preventDefault();\"\n (click)=\"seleccionarItem(node); opcMenu({ seccion: nombreColeccion(), tipo: 'ver', item: node }); menuContextual()?.cerrarMenuContextual(); (nested === false) && $event.stopPropagation();\"\n [ngClass]=\"classFila(node)\">\n <mat-icon *ngIf=\"!nested\"></mat-icon>\n <mat-icon *ngIf=\"nested\"\n [svgIcon]=\"treeControl.isExpanded(node) ? 'roundExpandMore' : 'roundChevronRight'\"></mat-icon>\n\n <mat-checkbox *ngIf=\"checkbox()\"\n [(ngModel)]=\"chkLista.modelosChk[node[campoId()]]\"\n [ngModelOptions]=\"{ standalone: true }\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"cambiarCheck(node, $event.checked); emitirModeloCheck()\"\n [indeterminate]=\"hasChild(0, node) && hijosActivos('indeterminate', node)\"\n [checked]=\"hasChild(0, node) ? hijosActivos('checked', node) : chkLista.modelosChk[node[campoId()]]\">\n </mat-checkbox>\n\n <span *ngIf=\"!templateTxtData()\" class=\"w-full\">{{ node[campoStr()] }}</span>\n <ng-container *ngIf=\"templateTxtData()\" [ngTemplateOutlet]=\"templateTxtData()!\"\n [ngTemplateOutletContext]=\"{ data: node, treeControl }\"></ng-container>\n </div>\n</ng-template>\n" }]
|
|
2267
|
+
}], ctorParameters: () => [] });
|
|
2293
2268
|
|
|
2294
2269
|
// export {};
|
|
2295
2270
|
// import './src/styles.scss';
|