@jvsoft/components 0.0.10 → 0.0.11

package/mat-suffix-search-button/mat-suffix-search-button.component.ts

@@ -0,0 +1,36 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {MatRipple} from '@angular/material/core';
+import {MatIcon} from '@angular/material/icon';
+
+@Component({
+    selector: 'div[matSuffix][matSuffixSearchButton]',
+    imports: [
+        MatRipple,
+        MatIcon
+    ],
+    templateUrl: './mat-suffix-search-button.component.html',
+    host: {
+        class: 'flex items-center justify-start',
+    }
+})
+export class MatSuffixSearchButtonComponent {
+    @Input({required: true}) fControl: any;
+    @Output() eventLimpiar: EventEmitter<any> = new EventEmitter();
+    @Output() eventBuscar: EventEmitter<any> = new EventEmitter();
+
+    get control(): FormControl {
+        return this.fControl;
+    }
+
+    emitirClick() {
+        if (this.control.value) {
+            this.control.reset();
+            this.eventLimpiar.emit(true);
+        }
+        else {
+            this.eventBuscar.emit(true);
+        }
+    }
+
+}

package/mat-suffix-search-button/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}

package/menu/index.ts

@@ -0,0 +1 @@
+export * from './public-api'

package/menu/menu.component.html

@@ -0,0 +1,40 @@
+<ng-container *ngIf="yet">
+    <button matRipple [matMenuTriggerFor]="matmenus.first"
+        [disabled]="disabled"
+        type="button" [class]="cssBoton ?? 'boton-circular boton-circular-red border-0'"
+        (click)="$event.preventDefault(); $event.stopImmediatePropagation()"
+        [matTooltip]="title"
+    >
+        <ng-content></ng-content>
+    </button>
+</ng-container>
+
+<!--<pre  class="text-indigo-900">{{_submenus | json}}</pre>-->
+<ng-container *ngFor="let menu of _submenus">
+    <!--<pre  class="text-red-700">{{menu | json}}</pre>-->
+    <mat-menu xPosition="before" yPosition="below" class="max-w-none">
+        <ng-container *ngFor="let item of menu">
+            <!--<pre *ngIf="menu$" class="text-orange-700">{{item | json}}</pre>-->
+            <!--<span>{{ [item.label, item.idxOpcionCalc!=-1 , yet , (!item.esVisible || item.esVisible({itemMenu: item, archivo: itemSeleccion})), [!item.esVisible , (item.esVisible ? item.esVisible({itemMenu: item, archivo: itemSeleccion}) : 'NO HAY')]] | json }}</span>-->
+            <button mat-menu-item *ngIf="item.idxOpcionCalc!=-1 && yet && (!item.esVisible || item.esVisible({itemMenu: item, archivo: itemSeleccion}))"
+                class="flex items-center justify-items-center uppercase w-full rounded-none px-2 "
+                [matMenuTriggerFor]="getMenu(item.idxOpcionCalc)">
+                <mat-icon *ngIf="item.icono"
+                    class="flex-none flex items-center justify-center !text-red-700 !mr-1 icon-2xs"
+                    [svgIcon]="item.icono ?? 'fa5sFileSignature'"
+                ></mat-icon>
+                <span class="grow text-2xs" [innerHTML]="item.label">{{item.label}}</span>
+            </button>
+            <button mat-menu-item *ngIf="item.idxOpcionCalc==-1 && (!item.esVisible || item.esVisible(item))" (click)="onClick(item.valorSeleccion)"
+                class="flex items-center justify-items-center uppercase w-full rounded-none px-2 "
+            >
+                <mat-icon *ngIf="item.icono"
+                    class="flex-none flex items-center justify-center !text-red-700 !mr-1 icon-2xs"
+                    [svgIcon]="item.icono ?? 'fa5sFileSignature'"
+                ></mat-icon>
+                <span class="grow text-2xs" [innerHTML]="item.label">{{item.label}} </span>
+            </button>
+
+        </ng-container>
+    </mat-menu>
+</ng-container>

package/menu/menu.component.ts

@@ -0,0 +1,88 @@
+import {AfterViewInit, Component, EventEmitter, Input, OnInit, Output, QueryList, ViewChildren} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {MatMenu, MatMenuModule} from '@angular/material/menu';
+import {MatIconModule} from '@angular/material/icon';
+import {MatRippleModule} from '@angular/material/core';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {BotonMenu} from './menu.interface';
+
+@Component({
+    selector: 'jvs-menu',
+    standalone: true,
+    imports: [
+        CommonModule,
+        MatMenuModule,
+        MatIconModule,
+        MatRippleModule,
+        MatTooltipModule,
+    ],
+    templateUrl: './menu.component.html',
+})
+export class MenuComponent implements OnInit, AfterViewInit {
+    @Input() cssBoton?: string;
+    @Input() title?: string;
+    @Input() disabled: boolean = false;
+    @Input() itemSeleccion?: string;
+    @Input() menu: BotonMenu[] = [];
+    @Output() action: EventEmitter<string> = new EventEmitter<string>();
+
+    @ViewChildren(MatMenu) matmenus!: QueryList<MatMenu>;
+
+    menuItems: string[] = [];
+    yet: boolean = false;
+    _submenus: BotonMenu[][] = []; // 🔥 Tipo explícito como Array de Array de BotonMenu
+
+    get submenus(): BotonMenu[][] {
+        return this._submenus.filter(() => true); // Mantiene la estructura, aunque no hace filtro real
+    }
+
+    ngOnInit(): void {
+        this.createSubmenus(this.menu, 's0', 1);
+        this.reindex();
+    }
+
+    ngAfterViewInit(): void {
+        // Previene errores de Angular al repintar el menú
+        setTimeout(() => {
+            this.yet = true;
+        });
+    }
+
+    onClick(value: string): void {
+        this.action.emit(value);
+    }
+
+    getMenu(index: number): MatMenu | null {
+        return index >= 0 && this.matmenus ? this.matmenus.get(index) ?? null:null;
+    }
+
+    reindex(): void {
+        // Asigna el índice del ítem del menú
+        this._submenus.forEach((menu: BotonMenu[]) => {
+            menu.forEach((item: BotonMenu) => {
+                if (item.idxOpcionCalc !== -1) {
+                    item.idxOpcionCalc = this.menuItems.indexOf(item.valorSeleccion ?? '');
+                }
+            });
+        });
+    }
+
+    createSubmenus(menu: BotonMenu[], prefix: string, count: number): void {
+        this.menuItems.push(prefix);
+
+        this._submenus.push(
+            menu.map((item, index): BotonMenu => ({
+                ...item,
+                valorSeleccion: item.subItems ? `${prefix}${index}`:item.valorSeleccion,
+                idxOpcionCalc: item.subItems ? 0:-1,
+            }))
+        );
+
+        // Llamada recursiva para crear submenús
+        menu.forEach((item, index) => {
+            if (item.subItems) {
+                this.createSubmenus(item.subItems, `${prefix}${index}`, count + 1);
+            }
+        });
+    }
+}

package/menu/menu.interface.ts

@@ -0,0 +1,16 @@
+export interface BotonMenu {
+    idUnico?: string,
+  class?: string;
+  icono?: string;
+  label?: string;
+  soloIcono?: boolean;
+  sinCondicion?: boolean;
+  badge?: string;
+  tooltip?: string;
+  idxOpcionCalc?: any,
+  subItems?: BotonMenu[];
+  datosExtra?: any;
+  valorSeleccion?: any;
+  esVisible?(dataValid?: any): boolean;
+  estaDeshabilitado?(item?: any): boolean;
+}

package/menu/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}

package/ng-package.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/components",
+  "lib": {
+    "entryFile": "./index.ts",
+    "styleIncludePaths": [
+      "./src"
+    ]
+  },
+  "assets": [
+    "**/*.scss",
+    "**/*.css"
+  ],
+  "allowedNonPeerDependencies": [
+    "."
+  ]
+}

package/package.json

@@ -1,6 +1,9 @@
 {
   "name": "@jvsoft/components",
-  "version": "0.0.10",
+  "version": "0.0.11",
+  "publishConfig": {
+    "access": "public"
+  },
   "peerDependencies": {
     "@angular/common": ">=16.0.0",
     "@angular/core": ">=16.0.0",
@@ -13,49 +16,20 @@
     "xlsx": "^0.18.5"
   },
   "dependencies": {
-    "@jvsoft/utils": "0.0.7",
+    "@jvsoft/utils": "workspace:*",
     "tslib": "^2.3.0"
   },
   "sideEffects": false,
   "exports": {
     "./base.scss": "./src/styles/base.scss",
-    "./styles.css": "./src/styles/base-jvsoft-components.css",
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./fesm2022/jvsoft-components.mjs"
-    },
-    "./dialog-flotante": {
-      "types": "./dialog-flotante/index.d.ts",
-      "default": "./fesm2022/jvsoft-components-dialog-flotante.mjs"
-    },
-    "./luces-navidad": {
-      "types": "./luces-navidad/index.d.ts",
-      "default": "./fesm2022/jvsoft-components-luces-navidad.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"
-    },
-    "./tabla-mantenimiento/components/progress-bar": {
-      "types": "./tabla-mantenimiento/components/progress-bar/index.d.ts",
-      "default": "./fesm2022/jvsoft-components-tabla-mantenimiento-components-progress-bar.mjs"
-    }
+    "./styles.css": "./src/styles/base-jvsoft-components.css"
   },
-  "module": "fesm2022/jvsoft-components.mjs",
-  "typings": "index.d.ts"
-}
+  "scripts": {
+    "build": "ng build components --configuration production",
+    "build:lib": "node build.js && yarn build",
+    "build:styles": "tailwindcss -i ./src/styles/base.scss -o ./src/styles/base-jvsoft-components.css",
+    "watch:styles": "yarn build:styles --watch",
+    "watch": "ng build components --watch --configuration development",
+    "test": "ng test components"
+  }
+}

package/tabla-mantenimiento/classes/data-model.ts

@@ -0,0 +1,150 @@
+import {AbstractControl, FormControl, FormControlOptions, FormGroup, ValidationErrors, ValidatorFn, Validators} from '@angular/forms';
+import {esNumero} from '../tabla-mantenimiento.functions';
+
+export class DataModel {
+    public modelosChk: { [key: string]: boolean | any } = {}; // Usar any para valores dinámicos
+
+    public checkbox: ForCheckboxModel;
+
+    constructor() {
+        this.checkbox = new ForCheckboxModel(this);
+    }
+
+    generarId(row: any, campoValor: string[] | string, separador = '') {
+        if (typeof campoValor == 'string') {
+            campoValor = [campoValor];
+        }
+        return campoValor.map(data => row[data]).join(separador);
+    }
+
+    // Agrega controles al objeto modelosChk
+    agregarControles(lista: any[], idLista: string, limpiar = true, campoValor: string[] | string | null = null, campoValorSeparador = '') {
+
+        if (limpiar) {
+            this.modelosChk = {};
+        }
+
+        const asignarValor = (dat: any, idLista: string, campoValor: string, key?: string) => {
+            if (!key) {
+                key = dat[idLista] + (campoValor.includes('.') ? '':`.${campoValor}`);
+            }
+            const mat = campoValor.match(/^([in])[A-Z][a-zA-Z]+/);
+            if (mat) {
+                this.modelosChk[key] = dat[campoValor] * 1;
+            }
+            else {
+                this.modelosChk[key] = dat[campoValor];
+            }
+        }
+
+
+        lista.forEach(dat => {
+            if (campoValor === null) {
+                // Caso 1: Sin campoValor, se asigna false
+                this.modelosChk[dat[idLista]] = false;
+            }
+            else if (typeof campoValor === 'string') {
+                // Caso 2: campoValor es un string
+                asignarValor(dat, idLista, campoValor, dat[idLista]);
+            }
+            else if (campoValorSeparador) {
+                const idStr = this.generarId(dat, campoValor, campoValorSeparador);
+                // Caso 2: campoValor es un string
+                asignarValor(dat, idLista, '.', idStr);
+            }
+            else {
+                // Caso 3: campoValor es un array de strings
+                campoValor.forEach(data => asignarValor(dat, idLista, data));
+            }
+        });
+    }
+
+    // Establece el estado de un índice
+    setState(idx: string, state: boolean) {
+        this.modelosChk[idx] = state;
+    }
+
+    // Obtiene el estado de un índice
+    getState(idx: string): boolean | any {
+        return this.modelosChk[idx];
+    }
+
+    getDataMultiple(idx: string) {
+        const camposMod = Object.keys(this.modelosChk).filter(key => key.split('.')[0] == idx);
+        const vRet: any = {};
+        camposMod.forEach(key => {
+            vRet[key.split('.')[1]] = this.modelosChk[key];
+        });
+        return vRet;
+    }
+
+    // Genera una lista basada en el estado de los índices
+    generarLista(tipoRetorno: 'array' | 'object' | null = null, esCampoNumerico = false): string | object | any[] {
+        const strLista: string[] = [];
+        const objLista: { [key: string]: boolean | any } = {};
+        Object.keys(this.modelosChk).forEach(key => {
+            if ((esCampoNumerico && esNumero(this.modelosChk[key])) ||
+                (this.modelosChk[key])
+            ) {
+                strLista.push(key);
+                objLista[key] = this.modelosChk[key];
+            }
+        });
+        if (tipoRetorno === 'array') {
+            return strLista;
+        }
+        if (tipoRetorno === 'object') {
+            return objLista;
+        }
+        return strLista.join(',');
+    }
+
+    generarFormGroupFromModelosChk(tipo?: string): FormGroup {
+        const formGroupObj: { [key: string]: FormControl } = {};
+        let validadores: ValidatorFn | ((control: AbstractControl) => ValidationErrors | null)[] | FormControlOptions | null | undefined = []
+        if (tipo == 'number') {
+            validadores = [
+                Validators.required,
+                Validators.min(1)
+            ]
+        }
+        Object.keys(this.modelosChk).forEach(key => {
+            formGroupObj[key] = new FormControl(this.modelosChk[key], validadores);
+        });
+        return new FormGroup(formGroupObj);
+
+        // return this.formBuilder.group(formGroupObj);
+    }
+}
+
+class ForCheckboxModel {
+    private modeloCheck: DataModel;
+
+    constructor(modeloCheck: DataModel) {
+        this.modeloCheck = modeloCheck;
+    }
+
+    get cantidadActivos() {
+        return Object.values(this.modeloCheck.modelosChk).filter(Boolean).length;
+    }
+
+    get existenActivados() {
+        return this.cantidadActivos > 0;
+    }
+
+    get todosActivos() {
+        const total = Object.keys(this.modeloCheck.modelosChk).length;
+        const activos = this.cantidadActivos;
+        return activos > 0 && total === activos;
+    }
+
+    get algunosActivos() {
+        const total = Object.keys(this.modeloCheck.modelosChk).length;
+        const activos = this.cantidadActivos;
+        return activos > 0 && total !== activos;
+    }
+
+    establecerTodos(activo: boolean) {
+        Object.keys(this.modeloCheck.modelosChk).forEach(idx => this.modeloCheck.modelosChk[idx] = activo);
+    }
+}

package/tabla-mantenimiento/components/progress-bar/index.ts

@@ -0,0 +1 @@
+export * from './public-api'

package/tabla-mantenimiento/components/progress-bar/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}

package/tabla-mantenimiento/components/progress-bar/progress-bar.component.html

@@ -0,0 +1,10 @@
+<div class="w-full bg-gray-200 text-gray-700 rounded-full" [class.text-center]="textoCentrado">
+	<div class="text-xxs font-medium text-center p-1 leading-none rounded-full"
+		 [ngClass]="colorEstilo().class ? colorEstilo().class : 'bg-blue-600 text-blue-100'"
+		 [style]="colorEstilo().style ? colorEstilo().style : ''"
+		 [style.width]="(textoCentrado ? 100 : porcentaje) + '%'"
+	>
+        <span *ngIf="textoMostrar else defaultText;" class="whitespace-nowrap">{{ textoMostrar }}</span>
+        <ng-template #defaultText>{{ porcentaje | number: formatoNumero }}%</ng-template>
+    </div>
+</div>

package/tabla-mantenimiento/components/progress-bar/progress-bar.component.ts

@@ -0,0 +1,85 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {CommonModule, DecimalPipe} from '@angular/common';
+
+export interface EstilosBarra {
+	valorMaximo: number;
+	class?: string;
+	style?: string;
+}
+
+@Component({
+    selector: 'jvs-progress-bar',
+    templateUrl: './progress-bar.component.html',
+    imports: [
+        CommonModule,
+        DecimalPipe
+    ],
+    host: {
+        class: 'jvs-progress-bar',
+    }
+})
+export class ProgressBarComponent implements OnInit {
+
+	@Input() objThis: any;
+	@Input() porcentaje = 0;
+	@Input() textoCentrado = false;
+
+    private _textoMostrar: string = '';
+    get textoMostrar(): string { return this._textoMostrar; }
+	@Input() set textoMostrar(val: string) { this._textoMostrar = val; }
+
+    private _formatoNumero: string = '';
+    get formatoNumero(): string { return this._formatoNumero; }
+	@Input() set formatoNumero(val: string | undefined) { this._formatoNumero = val ?? '1.0-0'; }
+
+    private _coloresValor: EstilosBarra[] = [];
+    get coloresValor(): EstilosBarra[] { return this._coloresValor; }
+    @Input() set coloresValor(val: EstilosBarra[] | undefined ) {
+        if (!val || !Array.isArray(val)) {
+            this._coloresValor = [
+                {valorMaximo: 1, class: 'p-0'},
+                {valorMaximo: 40, class: 'bg-red-400 text-red-900'},
+                // {valorMaximo: 35, class: 'bg-red-600 text-red-100'},
+                {valorMaximo: 80, class: 'bg-yellow-600 text-yellow-100'},
+                {valorMaximo: 100, class: 'bg-green-600 text-green-100'},
+            ];
+        }
+        else {
+            this._coloresValor = val;
+        }
+    }
+
+	constructor() { }
+
+	ngOnInit(): void {
+	}
+
+	colorEstilo(): {style: string, class: string} {
+		let estiloFin = null;
+		let claseFin = null;
+		let encontro = false;
+
+		this.coloresValor = this.ordenarPorPropiedad(this.coloresValor, 'valorMaximo');
+
+		this.coloresValor.forEach(estilo => {
+			if (!encontro && (this.porcentaje <= estilo.valorMaximo)) {
+				// console.log(this.porcentaje, estilo, (this.porcentaje < estilo.valorMaximo));
+				encontro = true;
+				estiloFin = estilo.style;
+				claseFin = estilo.class;
+			}
+		});
+		return {
+			style: estiloFin ?? '',
+			class: claseFin ?? '',
+		};
+	}
+
+    ordenarPorPropiedad(objData: any[], propiedad: string, numeros = false) {
+        if (numeros) {
+            return objData.sort((a, b) => a[propiedad] - b[propiedad]);
+        }
+        return objData.sort((a, b) => (a[propiedad] > b[propiedad]) ? 1:((b[propiedad] > a[propiedad]) ? -1:0));
+    }
+
+}

package/tabla-mantenimiento/components/progress-bar/public-api.ts

@@ -0,0 +1,2 @@
+export * from './progress-bar.component';
+// export * from './progress-spinner.service';

package/tabla-mantenimiento/index.ts

@@ -0,0 +1 @@
+export * from './public-api'

package/tabla-mantenimiento/interfaces/{archivo.d.ts → archivo.ts}

@@ -11,16 +11,19 @@ export interface Archivo {
     loading?: boolean;
     archivoFisico?: File;
     progress?: any;
+
     keyFirmaTramite?: string;
+
     cArchivoNombre?: string;
     cArchivoKey?: any;
     iArchivoId?: any;
     cArchivoRuta?: string;
     cArchivoData?: string;
+
     servFile?: Archivo;
     cantidadFirmas?: {
-        total: number;
-        digitales: number;
-        electronicas: number;
-    };
+        total: number,
+        digitales: number,
+        electronicas: number,
+    }
 }

package/tabla-mantenimiento/interfaces/global/{boton-mantenimiento.d.ts → boton-mantenimiento.ts}

@@ -1,5 +1,8 @@
-import { TablaMantenimientoComponent } from '../../tabla-mantenimiento.component';
-export type TiposOpciones = 'ver' | 'nuevo' | 'editar' | 'guardar' | 'eliminar' | 'seleccionar' | 'editar_item' | 'detalle' | 'ver_archivos' | 'eliminar_fila' | 'imprimir' | 'descargar' | 'exportar_pdf' | 'exportar_excel' | 'exportacion_avanzada' | 'ver_mapa' | string;
+import {TablaMantenimientoComponent} from '../../tabla-mantenimiento.component';
+
+export type TiposOpciones = 'ver' | 'nuevo' | 'editar' | 'guardar' | 'eliminar' | 'seleccionar' | 'editar_item' | 'detalle' |
+    'ver_archivos' | 'eliminar_fila' | 'imprimir' | 'descargar' | 'exportar_pdf' | 'exportar_excel' |
+    'exportacion_avanzada' | 'ver_mapa' | string;
 export interface BotonMantenimiento {
     tipo: TiposOpciones;
     tipoTemplate?: TiposOpciones;
@@ -20,6 +23,7 @@ export interface BotonMantenimiento {
     esVisible?(item: any, tablaRef?: TablaMantenimientoComponent<any>): boolean;
     estaDeshabilitado?(item: any, tablaRef?: TablaMantenimientoComponent<any>): boolean;
 }
+
 export interface BotonDialog {
     tipo?: TiposOpciones;
     class?: string;
@@ -27,6 +31,7 @@ export interface BotonDialog {
     label?: string;
     sinCondicion?: boolean;
 }
+
 export interface SeccionesBotonesMantenimiento {
     crud?: BotonMantenimiento[];
     principal?: BotonMantenimiento[];
@@ -34,8 +39,9 @@ export interface SeccionesBotonesMantenimiento {
     derecha?: BotonMantenimiento[];
     secundario?: BotonMantenimiento[];
     inferior?: BotonMantenimiento[];
-    [key: string]: BotonMantenimiento[] | undefined;
+    [key: string]: BotonMantenimiento[] | undefined; // 🔹 Permite indexar con cualquier string
 }
+
 export interface TablaMantenimientoSeccionBotones {
     [key: string]: SeccionesBotonesMantenimiento;
 }