@jvsoft/components 1.0.0-alpha.10 → 1.0.0-alpha.12

package/alerta/README.md

@@ -0,0 +1,102 @@
+# Alerta Component
+
+El `AlertaComponent` (selector: `jvs-alerta`) es un componente moderno y versátil para mostrar mensajes informativos, de error, éxito o advertencia. Está construido usando **Angular 19 Signals** y es **Standalone**.
+
+## 📦 Características
+
+- **Moderno**: Utiliza Signals para una reactividad eficiente y sintaxis de control flow de Angular.
+- **Standalone**: Sin dependencias de módulos, fácil de importar.
+- **Altamente Personalizable**: Permite sobreescribir clases de Tailwind para cada parte del componente, iconos y contenido.
+- **Premium por Defecto**: Viene con estilos predefinidos elegantes y bordes redondeados (`rounded-xl`).
+
+## 🚀 Uso Básico
+
+Importa el componente en tu componente standalone:
+
+```typescript
+import { AlertaComponent } from '@jvsoft/components/alerta';
+
+@Component({
+  imports: [AlertaComponent, ...],
+  // ...
+})
+export class MiComponente {}
+```
+
+Uso en la plantilla:
+
+```html
+<jvs-alerta 
+  tipo="success" 
+  titulo="Operación Exitosa" 
+  mensaje="Los datos se han guardado correctamente."
+></jvs-alerta>
+```
+
+## 🛠 API
+
+### Inputs (Signals)
+
+| Input | Tipo | Default | Descripción |
+|-------|------|---------|-------------|
+| `tipo` | `AlertaTipo` | `'info'` | Define el estilo visual. Valores: `'info' \| 'error' \| 'success' \| 'warning' \| 'custom'`. |
+| `titulo` | `string` | `undefined` | Texto resaltado en la parte superior. |
+| `mensaje` | `string` | `undefined` | Texto descriptivo del mensaje. |
+| `icono` | `string` | `undefined` | Sobreescribe el icono SVG por defecto. |
+| `clases` | `AlertaClases` | `{}` | Objeto para personalización granular de CSS (ver abajo). |
+| `botonCerrar` | `boolean` | `false` | Muestra un botón "X" para cerrar la alerta. |
+| `botonAcepto` | `boolean` | `false` | Muestra un botón de acción "Aceptar". |
+| `textoAcepto` | `string` | `'Lo entiendo'` | Etiqueta del botón de acción. |
+
+### Outputs
+
+| Output | Evento | Descripción |
+|--------|--------|-------------|
+| `alCerrar` | `void` | Se emite al hacer clic en el botón de cerrar. |
+| `alAceptar` | `void` | Se emite al hacer clic en el botón de acción "Aceptar". |
+
+### Interfaz `AlertaClases`
+
+Permite inyectar clases de Tailwind adicionales en partes específicas:
+
+```typescript
+interface AlertaClases {
+    contenedor?: string; // Div principal
+    icono?: string;      // Contenedor del icono
+    titulo?: string;     // Título h4
+    mensaje?: string;    // Div del mensaje
+    acciones?: string;   // Contenedor del botón de acción
+}
+```
+
+## 🎨 Ejemplos de Personalización
+
+### 1. Personalización de Clases
+Si usas `tipo="custom"`, los estilos por defecto se omiten y puedes definirlos totalmente:
+
+```html
+<jvs-alerta 
+  tipo="custom" 
+  [clases]="{
+    contenedor: 'bg-indigo-600 text-white rounded-lg p-6',
+    icono: 'text-indigo-200 shadow-sm'
+  }"
+  icono="roundAutoAwesome"
+  mensaje="Este es un mensaje totalmente personalizado."
+></jvs-alerta>
+```
+
+### 2. Uso con Content Projection
+En lugar del input `mensaje`, puedes proyectar cualquier HTML:
+
+```html
+<jvs-alerta tipo="warning" titulo="Atención Requerida">
+    <div class="flex flex-col gap-2">
+        <p>Por favor revise los siguientes puntos:</p>
+        <ul class="list-disc ml-4">
+            <li>Paso 1: Verificar firma</li>
+            <li>Paso 2: Adjuntar anexos</li>
+        </ul>
+    </div>
+</jvs-alerta>
+```

package/alerta/alerta.component.d.ts

@@ -0,0 +1,29 @@
+import * as i0 from "@angular/core";
+export interface AlertaClases {
+    contenedor?: string;
+    icono?: string;
+    titulo?: string;
+    mensaje?: string;
+    acciones?: string;
+}
+export type AlertaTipo = 'info' | 'error' | 'success' | 'warning' | 'custom';
+export declare class AlertaComponent {
+    tipo: import("@angular/core").InputSignal<AlertaTipo>;
+    titulo: import("@angular/core").InputSignal<string | undefined>;
+    mensaje: import("@angular/core").InputSignal<string | undefined>;
+    iconoManual: import("@angular/core").InputSignal<string | undefined>;
+    clasesManual: import("@angular/core").InputSignal<AlertaClases>;
+    botonCerrar: import("@angular/core").InputSignal<boolean>;
+    botonAcepto: import("@angular/core").InputSignal<boolean>;
+    textoAcepto: import("@angular/core").InputSignal<string>;
+    alCerrar: import("@angular/core").OutputEmitterRef<void>;
+    alAceptar: import("@angular/core").OutputEmitterRef<void>;
+    private defaults;
+    clasesContenedor: import("@angular/core").Signal<string>;
+    iconoFinal: import("@angular/core").Signal<string>;
+    clasesIcono: import("@angular/core").Signal<string>;
+    clasesTitulo: import("@angular/core").Signal<string>;
+    clasesMensaje: import("@angular/core").Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AlertaComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AlertaComponent, "jvs-alerta", never, { "tipo": { "alias": "tipo"; "required": false; "isSignal": true; }; "titulo": { "alias": "titulo"; "required": false; "isSignal": true; }; "mensaje": { "alias": "mensaje"; "required": false; "isSignal": true; }; "iconoManual": { "alias": "icono"; "required": false; "isSignal": true; }; "clasesManual": { "alias": "clases"; "required": false; "isSignal": true; }; "botonCerrar": { "alias": "botonCerrar"; "required": false; "isSignal": true; }; "botonAcepto": { "alias": "botonAcepto"; "required": false; "isSignal": true; }; "textoAcepto": { "alias": "textoAcepto"; "required": false; "isSignal": true; }; }, { "alCerrar": "alCerrar"; "alAceptar": "alAceptar"; }, never, ["*"], true, never>;
+}

package/alerta/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@jvsoft/components/alerta" />
+export * from './public-api';

package/alerta/public-api.d.ts

@@ -0,0 +1 @@
+export * from './alerta.component';

package/fesm2022/jvsoft-components-alerta.mjs

@@ -0,0 +1,88 @@
+import * as i0 from '@angular/core';
+import { input, output, computed, Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import * as i1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+
+class AlertaComponent {
+    // Inputs (Signals)
+    tipo = input('info');
+    titulo = input();
+    mensaje = input();
+    iconoManual = input(undefined, { alias: 'icono' });
+    clasesManual = input({}, { alias: 'clases' });
+    botonCerrar = input(false);
+    botonAcepto = input(false);
+    textoAcepto = input('Lo entiendo');
+    // Outputs
+    alCerrar = output();
+    alAceptar = output();
+    // Computed properties for default styles
+    defaults = computed(() => {
+        const t = this.tipo();
+        switch (t) {
+            case 'error':
+                return {
+                    bg: 'bg-red-50',
+                    border: 'border-red-200',
+                    text: 'text-red-800',
+                    icon: 'roundError',
+                    iconColor: 'text-red-400'
+                };
+            case 'success':
+                return {
+                    bg: 'bg-green-50',
+                    border: 'border-green-200',
+                    text: 'text-green-800',
+                    icon: 'roundCheckCircle',
+                    iconColor: 'text-green-400'
+                };
+            case 'warning':
+                return {
+                    bg: 'bg-amber-50',
+                    border: 'border-amber-200',
+                    text: 'text-amber-800',
+                    icon: 'roundWarning',
+                    iconColor: 'text-amber-400'
+                };
+            case 'info':
+            default:
+                return {
+                    bg: 'bg-blue-50',
+                    border: 'border-blue-200',
+                    text: 'text-blue-800',
+                    icon: 'roundInfo',
+                    iconColor: 'text-blue-400'
+                };
+        }
+    });
+    // Final classes merged with manual overrides
+    clasesContenedor = computed(() => {
+        const d = this.defaults();
+        const custom = this.clasesManual()?.contenedor || '';
+        if (this.tipo() === 'custom')
+            return custom;
+        return `flex items-start gap-1 p-2 rounded-lg border ${d.bg} ${d.border} ${d.text} ${custom}`;
+    });
+    iconoFinal = computed(() => this.iconoManual() || this.defaults().icon);
+    clasesIcono = computed(() => {
+        const d = this.defaults();
+        const custom = this.clasesManual()?.icono || '';
+        return `shrink-0 ${d.iconColor} ${custom}`;
+    });
+    clasesTitulo = computed(() => `font-bold mb-1 ${this.clasesManual()?.titulo || ''}`);
+    clasesMensaje = computed(() => `text-xs leading-relaxed ${this.clasesManual()?.mensaje || ''}`);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlertaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: AlertaComponent, isStandalone: true, selector: "jvs-alerta", inputs: { tipo: { classPropertyName: "tipo", publicName: "tipo", isSignal: true, isRequired: false, transformFunction: null }, titulo: { classPropertyName: "titulo", publicName: "titulo", isSignal: true, isRequired: false, transformFunction: null }, mensaje: { classPropertyName: "mensaje", publicName: "mensaje", isSignal: true, isRequired: false, transformFunction: null }, iconoManual: { classPropertyName: "iconoManual", publicName: "icono", isSignal: true, isRequired: false, transformFunction: null }, clasesManual: { classPropertyName: "clasesManual", publicName: "clases", isSignal: true, isRequired: false, transformFunction: null }, botonCerrar: { classPropertyName: "botonCerrar", publicName: "botonCerrar", isSignal: true, isRequired: false, transformFunction: null }, botonAcepto: { classPropertyName: "botonAcepto", publicName: "botonAcepto", isSignal: true, isRequired: false, transformFunction: null }, textoAcepto: { classPropertyName: "textoAcepto", publicName: "textoAcepto", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { alCerrar: "alCerrar", alAceptar: "alAceptar" }, ngImport: i0, template: "<div [class]=\"clasesContenedor()\">\n    <!-- Icono -->\n    <div [class]=\"clasesIcono()\">\n        <mat-icon [svgIcon]=\"iconoFinal()\"></mat-icon>\n    </div>\n\n    <!-- Contenido -->\n    <div class=\"flex-grow min-w-0\">\n        @if (titulo()) {\n            <h4 [class]=\"clasesTitulo()\">{{ titulo() }}</h4>\n        }\n\n        <div [class]=\"clasesMensaje()\">\n            @if (mensaje()) {\n                {{ mensaje() }}\n            } @else {\n                <ng-content></ng-content>\n            }\n        </div>\n\n        <!-- Acciones -->\n        @if (botonAcepto()) {\n            <div [class]=\"'mt-4 flex ' + (clasesManual().acciones || '')\">\n                <button\n                    type=\"button\"\n                    (click)=\"alAceptar.emit()\"\n                    class=\"px-4 py-2 bg-white border border-current rounded-lg font-bold text-xs hover:bg-opacity-10 transition-colors\"\n                >\n                    {{ textoAcepto() }}\n                </button>\n            </div>\n        }\n    </div>\n\n    <!-- Bot\u00F3n Cerrar -->\n    @if (botonCerrar()) {\n        <button\n            type=\"button\"\n            (click)=\"alCerrar.emit()\"\n            class=\"shrink-0 hover:bg-black/5 p-1 rounded-md transition-colors\"\n        >\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 opacity-50\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n            </svg>\n        </button>\n    }\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlertaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jvs-alerta', standalone: true, imports: [CommonModule, MatIconModule], template: "<div [class]=\"clasesContenedor()\">\n    <!-- Icono -->\n    <div [class]=\"clasesIcono()\">\n        <mat-icon [svgIcon]=\"iconoFinal()\"></mat-icon>\n    </div>\n\n    <!-- Contenido -->\n    <div class=\"flex-grow min-w-0\">\n        @if (titulo()) {\n            <h4 [class]=\"clasesTitulo()\">{{ titulo() }}</h4>\n        }\n\n        <div [class]=\"clasesMensaje()\">\n            @if (mensaje()) {\n                {{ mensaje() }}\n            } @else {\n                <ng-content></ng-content>\n            }\n        </div>\n\n        <!-- Acciones -->\n        @if (botonAcepto()) {\n            <div [class]=\"'mt-4 flex ' + (clasesManual().acciones || '')\">\n                <button\n                    type=\"button\"\n                    (click)=\"alAceptar.emit()\"\n                    class=\"px-4 py-2 bg-white border border-current rounded-lg font-bold text-xs hover:bg-opacity-10 transition-colors\"\n                >\n                    {{ textoAcepto() }}\n                </button>\n            </div>\n        }\n    </div>\n\n    <!-- Bot\u00F3n Cerrar -->\n    @if (botonCerrar()) {\n        <button\n            type=\"button\"\n            (click)=\"alCerrar.emit()\"\n            class=\"shrink-0 hover:bg-black/5 p-1 rounded-md transition-colors\"\n        >\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 opacity-50\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n            </svg>\n        </button>\n    }\n</div>\n", styles: [":host{display:block}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AlertaComponent };
+//# sourceMappingURL=jvsoft-components-alerta.mjs.map

package/fesm2022/jvsoft-components-alerta.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"jvsoft-components-alerta.mjs","sources":["../../../projects/components/alerta/alerta.component.ts","../../../projects/components/alerta/alerta.component.html","../../../projects/components/alerta/jvsoft-components-alerta.ts"],"sourcesContent":["import {Component, computed, input, output} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {MatIconModule} from '@angular/material/icon';\n\nexport interface AlertaClases {\n    contenedor?: string;\n    icono?: string;\n    titulo?: string;\n    mensaje?: string;\n    acciones?: string;\n}\n\nexport type AlertaTipo = 'info' | 'error' | 'success' | 'warning' | 'custom';\n\n@Component({\n    selector: 'jvs-alerta',\n    standalone: true,\n    imports: [CommonModule, MatIconModule],\n    templateUrl: './alerta.component.html',\n    styles: [`\n        :host { display: block; }\n    `]\n})\nexport class AlertaComponent {\n    // Inputs (Signals)\n    tipo = input<AlertaTipo>('info');\n    titulo = input<string>();\n    mensaje = input<string>();\n    iconoManual = input<string>(undefined, { alias: 'icono' });\n    clasesManual = input<AlertaClases>({}, { alias: 'clases' });\n\n    botonCerrar = input<boolean>(false);\n    botonAcepto = input<boolean>(false);\n    textoAcepto = input<string>('Lo entiendo');\n\n    // Outputs\n    alCerrar = output<void>();\n    alAceptar = output<void>();\n\n    // Computed properties for default styles\n    private defaults = computed(() => {\n        const t = this.tipo();\n        switch (t) {\n            case 'error':\n                return {\n                    bg: 'bg-red-50',\n                    border: 'border-red-200',\n                    text: 'text-red-800',\n                    icon: 'roundError',\n                    iconColor: 'text-red-400'\n                };\n            case 'success':\n                return {\n                    bg: 'bg-green-50',\n                    border: 'border-green-200',\n                    text: 'text-green-800',\n                    icon: 'roundCheckCircle',\n                    iconColor: 'text-green-400'\n                };\n            case 'warning':\n                return {\n                    bg: 'bg-amber-50',\n                    border: 'border-amber-200',\n                    text: 'text-amber-800',\n                    icon: 'roundWarning',\n                    iconColor: 'text-amber-400'\n                };\n            case 'info':\n            default:\n                return {\n                    bg: 'bg-blue-50',\n                    border: 'border-blue-200',\n                    text: 'text-blue-800',\n                    icon: 'roundInfo',\n                    iconColor: 'text-blue-400'\n                };\n        }\n    });\n\n    // Final classes merged with manual overrides\n    clasesContenedor = computed(() => {\n        const d = this.defaults();\n        const custom = this.clasesManual()?.contenedor || '';\n        if (this.tipo() === 'custom') return custom;\n        return `flex items-start gap-1 p-2 rounded-lg border ${d.bg} ${d.border} ${d.text} ${custom}`;\n    });\n\n    iconoFinal = computed(() => this.iconoManual() || this.defaults().icon);\n\n    clasesIcono = computed(() => {\n        const d = this.defaults();\n        const custom = this.clasesManual()?.icono || '';\n        return `shrink-0 ${d.iconColor} ${custom}`;\n    });\n\n    clasesTitulo = computed(() => `font-bold mb-1 ${this.clasesManual()?.titulo || ''}`);\n    clasesMensaje = computed(() => `text-xs leading-relaxed ${this.clasesManual()?.mensaje || ''}`);\n}\n","<div [class]=\"clasesContenedor()\">\n    <!-- Icono -->\n    <div [class]=\"clasesIcono()\">\n        <mat-icon [svgIcon]=\"iconoFinal()\"></mat-icon>\n    </div>\n\n    <!-- Contenido -->\n    <div class=\"flex-grow min-w-0\">\n        @if (titulo()) {\n            <h4 [class]=\"clasesTitulo()\">{{ titulo() }}</h4>\n        }\n\n        <div [class]=\"clasesMensaje()\">\n            @if (mensaje()) {\n                {{ mensaje() }}\n            } @else {\n                <ng-content></ng-content>\n            }\n        </div>\n\n        <!-- Acciones -->\n        @if (botonAcepto()) {\n            <div [class]=\"'mt-4 flex ' + (clasesManual().acciones || '')\">\n                <button\n                    type=\"button\"\n                    (click)=\"alAceptar.emit()\"\n                    class=\"px-4 py-2 bg-white border border-current rounded-lg font-bold text-xs hover:bg-opacity-10 transition-colors\"\n                >\n                    {{ textoAcepto() }}\n                </button>\n            </div>\n        }\n    </div>\n\n    <!-- Botón Cerrar -->\n    @if (botonCerrar()) {\n        <button\n            type=\"button\"\n            (click)=\"alCerrar.emit()\"\n            class=\"shrink-0 hover:bg-black/5 p-1 rounded-md transition-colors\"\n        >\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 opacity-50\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n            </svg>\n        </button>\n    }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/jvsoft-components-filtro-busqueda.mjs

@@ -3,7 +3,7 @@ import { signal, computed, Injectable, InjectionToken, inject, input, output, Co
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { Subject, BehaviorSubject } from 'rxjs';
-import moment from 'moment';
+import { format } from 'date-fns';
 import * as i2 from '@angular/forms';
 import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i3 from '@angular/material/autocomplete';
@@ -180,7 +180,7 @@ class FiltroBusquedaComponent {
     destroy$ = new Subject();
     sufixTemporal = '_temporal';
     tipoValorFuncion = tipoValorFuncion;
-    fechaActual = moment().toDate();
+    fechaActual = new Date();
     constructor() {
         this.inputParaEnviarAutocomplete.pipe(debounceTime(500), takeUntil(this.destroy$)).subscribe((param) => {
             this.queryService?.cargar(this, [param.reqQuery], param.reqData, false, this.prefijoConsulta()).then((dRet) => {
@@ -374,17 +374,17 @@ class FiltroBusquedaComponent {
             const meta = { campo: campo.campo, label: campo.label || '', value: null };
             if (campo.dateRange) {
                 const [fIni, fFin] = campo.dateRange.campo;
-                datosFiltro[fIni] = rawForm[fIni] ? moment(rawForm[fIni]).format('YYYYMMDD') : '';
-                datosFiltro[fFin] = rawForm[fFin] ? moment(rawForm[fFin]).format('YYYYMMDD') : '';
+                datosFiltro[fIni] = rawForm[fIni] ? format(rawForm[fIni], 'yyyyMMdd') : '';
+                datosFiltro[fFin] = rawForm[fFin] ? format(rawForm[fFin], 'yyyyMMdd') : '';
                 if (rawForm[fIni] && rawForm[fFin]) {
-                    meta.value = `${moment(rawForm[fIni]).format('DD/MM/YYYY')} - ${moment(rawForm[fFin]).format('DD/MM/YYYY')}`;
+                    meta.value = `${format(rawForm[fIni], 'dd/MM/yyyy')} - ${format(rawForm[fFin], 'dd/MM/yyyy')}`;
                     resumenItems.push(`${meta.label}: ${meta.value}`);
                 }
             }
             else if (campo.control === 'date') {
                 const val = rawForm[campo.campo];
-                datosFiltro[campo.campo] = val ? moment(val).format('YYYYMMDD') : '';
-                meta.value = val ? moment(val).format('DD/MM/YYYY') : '';
+                datosFiltro[campo.campo] = val ? format(val, 'yyyyMMdd') : '';
+                meta.value = val ? format(val, 'dd/MM/yyyy') : '';
                 if (meta.value)
                     resumenItems.push(`${meta.label}: ${meta.value}`);
             }