Mi Librería Angular

Librería general para proyectos de desarrollo DevSoftXela

Instalación

npm install ngx-dsxlibrary

Compatibilidad para depuración local

Para ejecutar y depurar esta librería en local, el proyecto debe mantener las mismas versiones base de:

• Angular: 21.2.5
• TypeScript: 5.9.2
• zone.js: 0.16.1 (rango compatible: ~0.16.x)

Si estas versiones no coinciden (o no son compatibles), pueden aparecer errores de compilación, tipado o ejecución durante la depuración local.

Guía para consumidores

Envío de archivos al backend (POST)

Si tu endpoint del backend recibe datos por formulario multipart (por ejemplo [FromForm] en ASP.NET Core), puedes usar HttpHelpersService.

Este servicio convierte automáticamente el objeto a FormData, así que permite enviar campos normales y archivos en una sola petición.

import { HttpHelpersService } from 'ngx-dsxlibrary';

constructor(private httpHelpers: HttpHelpersService) {}

subirArchivo(file: File | null) {
  return this.httpHelpers.post<{ ok: boolean; mensaje: string }>('documentos/subir', {
    documentoId: 10,
    nombre: 'Contrato',
    archivo: file,
  });
}

Notas:

• Si el archivo viene en null o undefined, ese campo se omite del FormData.
• Es ideal para simplificar flujos de carga de archivos con metadata.

Fuentes compartidas (@font-face)

La librería expone un archivo CSS con @font-face para que cualquier proyecto consumidor lo importe una sola vez.

Tambien expone un archivo de personalizacion base para PrimeNG, para mantener estilos uniformes entre proyectos consumidores.

En el styles.css/styles.scss del proyecto consumidor:

@import "ngx-dsxlibrary/assets/css/fonts.css";
@import "ngx-dsxlibrary/assets/css/primeng_dsx.css";

Las rutas del CSS están definidas como url("/fonts/..."), por lo que el proyecto consumidor debe publicar esos archivos en /fonts.

Incluye variantes por peso cuando aplique (por ejemplo, Oswald normal y Oswald 500).

En angular.json del proyecto consumidor (sección assets):

{
  "glob": "**/*",
  "input": "./src/assets/fonts",
  "output": "/fonts"
}

• Diagnóstico de cookies y fallback:
  • Ver documento: COOKIE_FALLBACK.md
• Este documento explica cómo se comporta AuthorizeService en desarrollo/producción y HTTP/HTTPS.
• Incluye checklist de depuración para validar protocol, host, environment.production y logs.

Botón reutilizable dsx-button

dsx-button encapsula estilos, permisos por parámetro y variantes de acción para evitar duplicar lógica en cada vista.

Importar constantes seguras para evitar typos:

import { ACTION_TYPES } from "ngx-dsxlibrary";

Uso básico:

<dsx-button [type]="ACTION_TYPES.create" [routerLink]="[urlNew, 0]" />

Con validación de parámetro de seguridad:

<dsx-button [type]="ACTION_TYPES.create" parameterName="pCreate" [routerLink]="[urlNew, 0]" />

Con modo guardar/actualizar según id:

<dsx-button [type]="ACTION_TYPES.saveOrUpdate" [id]="id()" [disabled]="!form.valid" (action)="saveRegister()" />

Con icono PrimeNG (sin texto):

<dsx-button [type]="ACTION_TYPES.edit" [iconOnly]="true" [routerLink]="[urlNew, rowData.propietarioId]" />

Rendimiento:

• El comportamiento es equivalente a la forma original con @if + _paramService.isParameterValue(...).
• El componente mantiene guard por loaded para evitar render inestable mientras refrescan parámetros.
• isParameterValue ya usa cache interno en ParameterValuesService, por lo que el costo por evaluación se mantiene controlado.

Cambios

Se realizo actualización en el interceptor para mejorar el comportamiento con angular V21 1.21.1 Se actualizo kpicard por la actualización de la libreria count 1.21.2 Se actualizo parameter service para que muestre una alerta al usuario al no coincider 1.21.2 Se depuro la no validación en los parametros al obtener su valor 1.21.3 Se actualizo el servicio authorize se agrego getTokenValues y se agrego a primeNg PasswordModule 1.21.8 Se actualizo primeNg se agrego PanelMenuModule y se dio acceso al servicio de error 1.21.9 Se actualizo primeNg se agrego DrawerModule 1.21.10 Se actualiza url de json loader 1.21.12 Se actualizo el interceptor http-authorize para manejar correctamente el refresh de token (401), detener peticiones cuando el TokenRefresh es inválido y mostrar mensajes de error más claros al usuario 1.21.24