@jvsoft/components 1.0.0-alpha.6 → 1.0.0-alpha.7

package/lista-arbol/README.md

@@ -0,0 +1,268 @@
+# ListaArbolComponent
+
+Componente Angular para visualizar datos jerárquicos en estructura de árbol con soporte para selección, checkboxes y menú contextual.
+
+## Instalación
+
+```bash
+npm install @jvsoft/components
+```
+
+## Uso Básico
+
+```typescript
+import { ListaArbolComponent } from '@jvsoft/components/lista-arbol';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [ListaArbolComponent],
+  template: `
+    <jvs-lista-arbol
+      [listaSuscription]="despachos$"
+      nombreColeccion="despachos"
+      [idTabla]="['iDespachoId']"
+      campoId="iDespachoId"
+      campoIdPadre="iDespachoPadreId"
+      campoStr="cDespachoNombre"
+      (seleccionado)="onSeleccion($event)">
+    </jvs-lista-arbol>
+  `
+})
+export class ExampleComponent {
+  despachos$ = this.service.getDespachos();
+  
+  onSeleccion(item: any) {
+    console.log('Item seleccionado:', item);
+  }
+}
+```
+
+## API
+
+### Inputs
+
+#### Requeridos
+
+| Input | Tipo | Descripción |
+|-------|------|-------------|
+| `listaSuscription` | `Observable<T[]>` | Observable que emite la lista de datos a mostrar |
+| `nombreColeccion` | `string` | Nombre identificador de la colección |
+| `idTabla` | `string \| string[]` | Campo(s) que identifican únicamente cada item |
+| `campoId` | `string` | Nombre del campo que contiene el ID del item |
+| `campoIdPadre` | `string` | Nombre del campo que contiene el ID del padre |
+
+#### Opcionales
+
+| Input | Tipo | Default | Descripción |
+|-------|------|---------|-------------|
+| `campoStr` | `string` | `''` | Campo a mostrar como texto del nodo |
+| `checkbox` | `boolean` | `false` | Habilita checkboxes con selección cascada |
+| `expandirRecursivo` | `boolean` | `false` | Expande/colapsa recursivamente |
+| `checkboxSeleccionados` | `T[]` | `[]` | Items pre-seleccionados (modo checkbox) |
+| `campoOrden` | `string` | - | Campo para ordenar los nodos |
+| `strHijoContainer` | `string` | `'hijos'` | Nombre de la propiedad que contiene los hijos |
+| `menuContextual` | `object` | - | Objeto con funciones para menú contextual |
+| `classSeleccionado` | `string[]` | `['bg-primary-activo', ...]` | Clases CSS para item seleccionado |
+| `classAnulado` | `string[]` | `['line-through', ...]` | Clases CSS para items anulados |
+| `campoAnulado` | `string \| null` | - | Campo que indica si un item está anulado |
+| `templateTxtData` | `TemplateRef<any>` | - | Template personalizado para el contenido del nodo |
+| `condicionMostrar` | `(item: T) => boolean` | - | Función para filtrar items a mostrar |
+| `condicionesClaseFila` | `(item: T) => string[]` | `() => []` | Función que retorna clases CSS adicionales |
+| `selectionModel` | `any` | - | Modelo de selección (backward compatibility) |
+
+### Outputs
+
+| Output | Tipo | Descripción |
+|--------|------|-------------|
+| `seleccionado` | `EventEmitter<any>` | Emite cuando se selecciona un item |
+| `selectionModelChange` | `EventEmitter<any>` | Emite cambios en el modelo de selección |
+| `listaCheck` | `EventEmitter<T[]>` | Emite array de items seleccionados (modo checkbox) |
+| `listaCheckObj` | `EventEmitter<Record<string, any>>` | Emite objeto con items seleccionados (modo checkbox) |
+
+## Ejemplos
+
+### Árbol Simple
+
+```typescript
+<jvs-lista-arbol
+  [listaSuscription]="categorias$"
+  nombreColeccion="categorias"
+  [idTabla]="['iCategoriaId']"
+  campoId="iCategoriaId"
+  campoIdPadre="iCategoriaPadreId"
+  campoStr="cCategoriaNombre">
+</jvs-lista-arbol>
+```
+
+### Con Checkboxes
+
+```typescript
+<jvs-lista-arbol
+  [listaSuscription]="permisos$"
+  nombreColeccion="permisos"
+  [idTabla]="['iPermisoId']"
+  campoId="iPermisoId"
+  campoIdPadre="iPermisoPadreId"
+  campoStr="cPermisoNombre"
+  [checkbox]="true"
+  [checkboxSeleccionados]="permisosActuales"
+  (listaCheck)="onPermisosChange($event)">
+</jvs-lista-arbol>
+```
+
+### Con Template Personalizado
+
+```typescript
+<jvs-lista-arbol
+  [listaSuscription]="departamentos$"
+  nombreColeccion="departamentos"
+  [idTabla]="['iDepartamentoId']"
+  campoId="iDepartamentoId"
+  campoIdPadre="iDepartamentoPadreId"
+  [templateTxtData]="customTemplate">
+</jvs-lista-arbol>
+
+<ng-template #customTemplate let-data="data">
+  <div class="flex items-center gap-2">
+    <mat-icon>{{ data.icono }}</mat-icon>
+    <span class="font-bold">{{ data.nombre }}</span>
+    <span class="text-gray-500">({{ data.codigo }})</span>
+  </div>
+</ng-template>
+```
+
+### Con Menú Contextual
+
+```typescript
+export class MyComponent {
+  menuContextual = {
+    abrirMenuContextual: (event: MouseEvent, item: any) => {
+      // Lógica para abrir menú contextual
+      this.menuService.open(event, item);
+    },
+    cerrarMenuContextual: () => {
+      this.menuService.close();
+    }
+  };
+}
+```
+
+```html
+<jvs-lista-arbol
+  [listaSuscription]="items$"
+  nombreColeccion="items"
+  [idTabla]="['id']"
+  campoId="id"
+  campoIdPadre="parentId"
+  campoStr="nombre"
+  [menuContextual]="menuContextual">
+</jvs-lista-arbol>
+```
+
+### Con Ordenamiento
+
+```typescript
+<jvs-lista-arbol
+  [listaSuscription]="tareas$"
+  nombreColeccion="tareas"
+  [idTabla]="['iTareaId']"
+  campoId="iTareaId"
+  campoIdPadre="iTareaPadreId"
+  campoStr="cTareaNombre"
+  campoOrden="iOrden">
+</jvs-lista-arbol>
+```
+
+### Con Clases Condicionales
+
+```typescript
+export class MyComponent {
+  getClasesFila = (item: any): string[] => {
+    const clases: string[] = [];
+    if (item.urgente) clases.push('bg-red-100');
+    if (item.completado) clases.push('opacity-50');
+    return clases;
+  };
+}
+```
+
+```html
+<jvs-lista-arbol
+  [listaSuscription]="tareas$"
+  nombreColeccion="tareas"
+  [idTabla]="['id']"
+  campoId="id"
+  campoIdPadre="parentId"
+  campoStr="nombre"
+  [condicionesClaseFila]="getClasesFila">
+</jvs-lista-arbol>
+```
+
+## Estructura de Datos
+
+El componente espera un array plano de objetos con referencias padre-hijo:
+
+```typescript
+interface Item {
+  id: number;
+  parentId: number | null;
+  nombre: string;
+  // ... otros campos
+}
+
+const items: Item[] = [
+  { id: 1, parentId: null, nombre: 'Raíz' },
+  { id: 2, parentId: 1, nombre: 'Hijo 1' },
+  { id: 3, parentId: 1, nombre: 'Hijo 2' },
+  { id: 4, parentId: 2, nombre: 'Nieto 1' },
+];
+```
+
+El componente automáticamente construye la estructura jerárquica.
+
+## Características
+
+- ✅ **Signals API**: Usa la API moderna de Signals de Angular
+- ✅ **Selección simple**: Click para seleccionar items
+- ✅ **Checkboxes con cascada**: Selección padre-hijo automática
+- ✅ **Templates personalizados**: Personaliza la visualización de nodos
+- ✅ **Menú contextual**: Soporte integrado para menús contextuales
+- ✅ **Ordenamiento**: Ordena nodos por campo específico
+- ✅ **Clases condicionales**: Aplica estilos dinámicos
+- ✅ **Cleanup automático**: Gestión automática de suscripciones
+- ✅ **TypeScript**: Totalmente tipado con genéricos
+
+## Migración desde Versión Anterior
+
+Si estás migrando desde una versión anterior con `@Input()` decorators:
+
+### Antes (v1.0.0-alpha.5)
+```typescript
+@Input() listaSuscription!: Observable<T[]>;
+@Input() nombreColeccion!: string;
+```
+
+### Después (v1.0.0-alpha.6+)
+```typescript
+// El uso en templates permanece igual
+<jvs-lista-arbol
+  [listaSuscription]="items$"
+  nombreColeccion="items"
+  ...>
+</jvs-lista-arbol>
+```
+
+**No se requieren cambios** en el código que usa el componente. La API pública permanece 100% compatible.
+
+## Notas Técnicas
+
+- El componente usa `NestedTreeControl` de Angular CDK
+- Las suscripciones se limpian automáticamente con `takeUntilDestroyed()`
+- Los valores derivados usan `computed()` para optimización
+- El estado interno usa `signal()` para reactividad
+- Compatible con Angular 16+
+
+## Licencia
+
+MIT

package/lista-arbol/lista-arbol.component.d.ts

@@ -1,47 +1,46 @@
-import { EventEmitter, OnInit, TemplateRef } from '@angular/core';
+import { TemplateRef } from '@angular/core';
 import { Observable } from 'rxjs';
 import { NestedTreeControl } from '@angular/cdk/tree';
 import { DataModel } from '@jvsoft/utils';
-import { SelectionModel } from '@angular/cdk/collections';
 import * as i0 from "@angular/core";
-export declare class ListaArbolComponent<T = any> implements OnInit {
-    listaSuscription: Observable<T[]>;
-    nombreColeccion: string;
-    checkbox: boolean;
-    expandirRecursivo: boolean;
-    checkboxSeleccionados: T[];
-    campoId: string;
-    campoIdPadre: string;
-    campoStr: string;
-    campoOrden?: string;
-    strHijoContainer: string;
-    menuContextual?: {
+export declare class ListaArbolComponent<T = any> {
+    listaSuscription: import("@angular/core").InputSignal<Observable<T[]>>;
+    nombreColeccion: import("@angular/core").InputSignal<string>;
+    checkbox: import("@angular/core").InputSignal<boolean>;
+    expandirRecursivo: import("@angular/core").InputSignal<boolean>;
+    checkboxSeleccionados: import("@angular/core").InputSignal<T[]>;
+    campoId: import("@angular/core").InputSignal<string>;
+    campoIdPadre: import("@angular/core").InputSignal<string>;
+    campoStr: import("@angular/core").InputSignal<string>;
+    campoOrden: import("@angular/core").InputSignal<string | undefined>;
+    strHijoContainer: import("@angular/core").InputSignal<string>;
+    menuContextual: import("@angular/core").InputSignal<{
         abrirMenuContextual: Function;
         cerrarMenuContextual: Function;
-    };
-    classSeleccionado: string[];
-    classAnulado: string[];
-    campoAnulado?: string | null;
-    templateTxtData?: TemplateRef<any>;
-    condicionMostrar?: (item: T) => boolean;
-    condicionesClaseFila: (item: T) => string[];
-    set selectionModel(val: SelectionModel<any>);
-    selectionModelChange: EventEmitter<SelectionModel<any>>;
-    seleccionado: EventEmitter<any>;
-    listaCheck: EventEmitter<T[]>;
-    listaCheckObj: EventEmitter<Record<string, any>>;
+    } | undefined>;
+    classSeleccionado: import("@angular/core").InputSignal<string[]>;
+    classAnulado: import("@angular/core").InputSignal<string[]>;
+    campoAnulado: import("@angular/core").InputSignal<string | null | undefined>;
+    templateTxtData: import("@angular/core").InputSignal<TemplateRef<any> | undefined>;
+    condicionMostrar: import("@angular/core").InputSignal<((item: T) => boolean) | undefined>;
+    condicionesClaseFila: import("@angular/core").InputSignal<(item: T) => string[]>;
+    idTabla: import("@angular/core").InputSignalWithTransform<string | string[], string | string[]>;
+    selectionModel: import("@angular/core").InputSignal<any>;
+    selectionModelChange: import("@angular/core").OutputEmitterRef<any>;
+    seleccionado: import("@angular/core").OutputEmitterRef<any>;
+    listaCheck: import("@angular/core").OutputEmitterRef<T[]>;
+    listaCheckObj: import("@angular/core").OutputEmitterRef<Record<string, any>>;
     private _idTabla;
-    get idTabla(): string[];
-    set idTabla(val: string[] | string);
-    get buscarItemSeleccionado(): any;
-    get objSeleccionado(): any;
-    set objSeleccionado(val: any);
+    private _seleccionado;
+    listaMuestraArbol: import("@angular/core").WritableSignal<T[]>;
+    listaOriginal: import("@angular/core").WritableSignal<T[]>;
     chkLista: DataModel;
-    listaMuestraArbol: T[];
-    listaOriginal: T[];
+    idTablaValue: import("@angular/core").Signal<string[]>;
+    buscarItemSeleccionado: import("@angular/core").Signal<NonNullable<T> | null>;
+    objSeleccionado: import("@angular/core").Signal<NonNullable<T> | null>;
     treeControl: NestedTreeControl<any, any>;
-    _seleccionado: any;
-    ngOnInit(): void;
+    private listaSuscription$;
+    constructor();
     idTablaValor(data: any): string;
     propiedadSeleccion(item: any): string;
     esSeleccionActual(item: any): boolean;
@@ -52,7 +51,7 @@ export declare class ListaArbolComponent<T = any> implements OnInit {
     cambiarPadre(checkActual: T, estado: boolean): void;
     cambiarCheck(checkActual: T, estado: boolean): void;
     hijosActivos(tipo: 'checked' | 'indeterminate', checkActual: T): boolean;
-    classFila(item: any): any[];
+    classFila(item: any): string[];
     static ɵfac: i0.ɵɵFactoryDeclaration<ListaArbolComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ListaArbolComponent<any>, "jvs-lista-arbol", never, { "listaSuscription": { "alias": "listaSuscription"; "required": false; }; "nombreColeccion": { "alias": "nombreColeccion"; "required": false; }; "checkbox": { "alias": "checkbox"; "required": false; }; "expandirRecursivo": { "alias": "expandirRecursivo"; "required": false; }; "checkboxSeleccionados": { "alias": "checkboxSeleccionados"; "required": false; }; "campoId": { "alias": "campoId"; "required": false; }; "campoIdPadre": { "alias": "campoIdPadre"; "required": false; }; "campoStr": { "alias": "campoStr"; "required": false; }; "campoOrden": { "alias": "campoOrden"; "required": false; }; "strHijoContainer": { "alias": "strHijoContainer"; "required": false; }; "menuContextual": { "alias": "menuContextual"; "required": false; }; "classSeleccionado": { "alias": "classSeleccionado"; "required": false; }; "classAnulado": { "alias": "classAnulado"; "required": false; }; "campoAnulado": { "alias": "campoAnulado"; "required": false; }; "templateTxtData": { "alias": "templateTxtData"; "required": false; }; "condicionMostrar": { "alias": "condicionMostrar"; "required": false; }; "condicionesClaseFila": { "alias": "condicionesClaseFila"; "required": false; }; "selectionModel": { "alias": "selectionModel"; "required": false; }; "idTabla": { "alias": "idTabla"; "required": true; }; }, { "selectionModelChange": "selectionModelChange"; "seleccionado": "seleccionado"; "listaCheck": "listaCheck"; "listaCheckObj": "listaCheckObj"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ListaArbolComponent<any>, "jvs-lista-arbol", never, { "listaSuscription": { "alias": "listaSuscription"; "required": true; "isSignal": true; }; "nombreColeccion": { "alias": "nombreColeccion"; "required": true; "isSignal": true; }; "checkbox": { "alias": "checkbox"; "required": false; "isSignal": true; }; "expandirRecursivo": { "alias": "expandirRecursivo"; "required": false; "isSignal": true; }; "checkboxSeleccionados": { "alias": "checkboxSeleccionados"; "required": false; "isSignal": true; }; "campoId": { "alias": "campoId"; "required": true; "isSignal": true; }; "campoIdPadre": { "alias": "campoIdPadre"; "required": true; "isSignal": true; }; "campoStr": { "alias": "campoStr"; "required": false; "isSignal": true; }; "campoOrden": { "alias": "campoOrden"; "required": false; "isSignal": true; }; "strHijoContainer": { "alias": "strHijoContainer"; "required": false; "isSignal": true; }; "menuContextual": { "alias": "menuContextual"; "required": false; "isSignal": true; }; "classSeleccionado": { "alias": "classSeleccionado"; "required": false; "isSignal": true; }; "classAnulado": { "alias": "classAnulado"; "required": false; "isSignal": true; }; "campoAnulado": { "alias": "campoAnulado"; "required": false; "isSignal": true; }; "templateTxtData": { "alias": "templateTxtData"; "required": false; "isSignal": true; }; "condicionMostrar": { "alias": "condicionMostrar"; "required": false; "isSignal": true; }; "condicionesClaseFila": { "alias": "condicionesClaseFila"; "required": false; "isSignal": true; }; "idTabla": { "alias": "idTabla"; "required": true; "isSignal": true; }; "selectionModel": { "alias": "selectionModel"; "required": false; "isSignal": true; }; }, { "selectionModelChange": "selectionModelChange"; "seleccionado": "seleccionado"; "listaCheck": "listaCheck"; "listaCheckObj": "listaCheckObj"; }, never, never, true, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jvsoft/components",
-  "version": "1.0.0-alpha.6",
+  "version": "1.0.0-alpha.7",
   "description": "JVSOFT Angular Components",
   "publishConfig": {
     "tag": "alpha",
@@ -11,7 +11,7 @@
     "@angular/core": ">=16.0.0",
     "@angular/forms": ">=16.0.0",
     "@angular/material": ">=16.0.0",
-    "@jvsoft/utils": "^1.0.0-alpha.6",
+    "@jvsoft/utils": "^1.0.0-alpha.7",
     "@ngneat/until-destroy": "^10.0.0",
     "moment": "^2.30.1",
     "shorthash2": "^1.0.5",
@@ -33,22 +33,22 @@
       "types": "./dialog-flotante/index.d.ts",
       "default": "./fesm2022/jvsoft-components-dialog-flotante.mjs"
     },
-    "./lista-arbol": {
-      "types": "./lista-arbol/index.d.ts",
-      "default": "./fesm2022/jvsoft-components-lista-arbol.mjs"
-    },
     "./luces-navidad": {
       "types": "./luces-navidad/index.d.ts",
       "default": "./fesm2022/jvsoft-components-luces-navidad.mjs"
     },
-    "./menu": {
-      "types": "./menu/index.d.ts",
-      "default": "./fesm2022/jvsoft-components-menu.mjs"
+    "./lista-arbol": {
+      "types": "./lista-arbol/index.d.ts",
+      "default": "./fesm2022/jvsoft-components-lista-arbol.mjs"
     },
     "./mat-suffix-search-button": {
       "types": "./mat-suffix-search-button/index.d.ts",
       "default": "./fesm2022/jvsoft-components-mat-suffix-search-button.mjs"
     },
+    "./menu": {
+      "types": "./menu/index.d.ts",
+      "default": "./fesm2022/jvsoft-components-menu.mjs"
+    },
     "./tabla-mantenimiento": {
       "types": "./tabla-mantenimiento/index.d.ts",
       "default": "./fesm2022/jvsoft-components-tabla-mantenimiento.mjs"

package/tabla-mantenimiento/interfaces/global/columnas-tabla.d.ts

@@ -15,16 +15,6 @@ export interface ColumnaTablaReporte {
         total?: TipoValorFuncion<any>;
     };
 }
-export interface IconsIcon {
-    icon: string;
-    iconSize?: string;
-    toolTip?: string;
-    toolTipField?: string;
-    contentCss?: string;
-    cssClass?: string;
-    click?(row: any): void;
-    esVisible?(row: any): boolean;
-}
 export type TiposColumnasNuevo = 'text' | 'checkbox' | 'money' | 'icon' | 'icons' | 'progress' | 'expandir' | 'date' | 'number';
 type PropiedadString<T> = Extract<keyof T, string>;
 interface BaseColumna<T> {