@jvsoft/components 0.0.13-alpha.4 → 1.0.0-alpha.11

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/dialog-flotante/README.md

@@ -0,0 +1,169 @@
+# Dialog Flotante Component
+
+El `DialogFlotanteComponent` es un componente contenedor estandarizado para diálogos de Angular Material. Proporciona una estructura consistente con barra de título arrastrable (`cdkDrag`), área de contenido y barra de acciones inferior, todo altamente configurable.
+
+## 📦 Características
+
+- **Arrastrable**: Integra `cdkDrag` para permitir mover el diálogo desde el título.
+- **Estructura Estándar**: Título, Cuerpo y Pie de página (acciones).
+- **Configurable**: Permite ocultar título, barra de acciones, personalizar botones por defecto.
+- **Content Projection**: Múltiples slots para inyectar contenido en título, cuerpo y pie.
+- **Responsive**: Adaptado para móviles y escritorio.
+
+## 🚀 Uso Básico
+
+Importa el componente en tu módulo o componente standalone:
+
+```typescript
+import { DialogFlotanteComponent } from '@jvsoft/components/dialog-flotante';
+
+@Component({
+  imports: [DialogFlotanteComponent, ...],
+  // ...
+})
+export class MiDialogoComponent {
+  constructor(public dialogRef: MatDialogRef<MiDialogoComponent>) {}
+}
+```
+
+Úsalo en la plantilla de tu componente de diálogo:
+
+```html
+<div jvsDialogFlotante [matDialogRefActual]="dialogRef" [btnGuardar]="true" (btnGuardarClick)="guardar()">
+    <span titulo>Título del Diálogo</span>
+    
+    <div cuerpo>
+        <p>Contenido principal del diálogo...</p>
+    </div>
+</div>
+```
+
+## 🛠 API
+
+### Inputs
+
+| Input | Tipo | Default | Descripción |
+|-------|------|---------|-------------|
+| `matDialogRefActual` | `MatDialogRef<any>` | `undefined` | Referencia al diálogo actual. Necesario para la funcionalidad de cerrar. |
+| `sinTitulo` | `boolean` | `false` | Si es `true`, oculta la barra de título y deshabilita el arrastre. |
+| `sinBarraDeAccion` | `boolean` | `false` | Si es `true`, oculta la barra de botones inferior. |
+| `btnCerrarBarra` | `boolean` | `false` | Muestra un botón "X" de cierre en la barra de título. |
+| `iconoTitulo` | `string` | `undefined` | Nombre del icono SVG para mostrar en el título. |
+| `btnGuardar` | `BotonDialog \| boolean \| string` | `undefined` | Configuración del botón "Guardar". Ver [Configuración de Botones](#configuración-de-botones). |
+| `btnCerrar` | `BotonDialog \| boolean \| string` | `undefined` | Configuración del botón "Cerrar". Ver [Configuración de Botones](#configuración-de-botones). |
+| `cssClases` | `Record<string, string>` | `{}` | Clases CSS personalizadas para partes del componente. |
+
+### Outputs
+
+| Output | Evento | Descripción |
+|--------|--------|-------------|
+| `btnGuardarClick` | `any` | Se emite al hacer clic en el botón "Guardar" por defecto. |
+| `btnCerrarClick` | `any` | Se emite al hacer clic en el botón "Cerrar" por defecto. |
+
+### Content Projection (Slots)
+
+El componente utiliza selectores de atributos para proyectar contenido en áreas específicas:
+
+| Selector | Ubicación | Descripción |
+|----------|-----------|-------------|
+| `[titulo]` | Barra de Título | Texto o contenido principal del título. |
+| `[tituloImagen]` | Barra de Título | Imagen o icono adicional a la izquierda del título. |
+| `[selectTitulo]` | Barra de Título | Contenido a la derecha del título (ej. un selector). |
+| `[cuerpo]` | Centro | Contenido principal del diálogo (dentro de `mat-dialog-content`). |
+| `[pieIzquierda]` | Pie de Página | Contenido alineado a la izquierda en la barra de acciones. |
+| `[pieCentro]` | Pie de Página | Contenido centrado en la barra de acciones. |
+| `[pieDerecha]` | Pie de Página | Contenido a la derecha, antes de los botones por defecto. |
+
+## ⚙️ Configuración de Botones
+
+Los inputs `btnGuardar` y `btnCerrar` aceptan varios tipos de valores para máxima flexibilidad:
+
+- **`boolean`**: 
+  - `true`: Muestra el botón con configuración por defecto.
+  - `false`: Oculta el botón.
+- **`string`**: Muestra el botón cambiando solo su etiqueta (label).
+- **`BotonDialog`**: Objeto de configuración completa.
+
+### Interfaz `BotonDialog`
+
+```typescript
+interface BotonDialog {
+  label?: string;        // Texto del botón
+  class?: string;        // Clases CSS (ej. colores Tailwind)
+  icono?: string;        // Icono SVG
+  tipo?: string;         // Tipo de acción (opcional)
+  sinCondicion?: boolean; // (Uso interno)
+}
+```
+
+#### Valores por Defecto
+
+- **Guardar**: Label "GUARDAR", Clase `text-blue-700 border-blue-700`, Icono `roundSave`.
+- **Cerrar**: Label "CERRAR", Clase `text-gray-700 border-gray-700`, Icono `roundClose`.
+
+## 🎨 Personalización de Estilos (`cssClases`)
+
+Puedes pasar un objeto para sobrescribir clases de secciones específicas:
+
+```typescript
+cssClases = {
+  titulo: 'bg-red-500 text-white', // Cambia color de barra de título
+  btnGuardar: 'bg-green-600 text-white' // Estilo extra para botón guardar
+}
+```
+
+## 📝 Ejemplos
+
+### 1. Diálogo Completo
+
+```html
+<div jvsDialogFlotante 
+     [matDialogRefActual]="dialogRef"
+     [btnGuardar]="'ACEPTAR'"
+     [btnCerrar]="true"
+     [btnCerrarBarra]="true"
+     iconoTitulo="roundInfo"
+     (btnGuardarClick)="procesar()">
+
+    <span titulo>Confirmación Requerida</span>
+    
+    <div cuerpo class="p-4">
+        ¿Está seguro que desea realizar esta acción?
+    </div>
+
+    <div pieIzquierda>
+        <small class="text-gray-500">Ref: 12345</small>
+    </div>
+</div>
+```
+
+### 2. Diálogo Simple (Solo Contenido)
+
+```html
+<div jvsDialogFlotante 
+     [sinTitulo]="true" 
+     [sinBarraDeAccion]="true">
+    
+    <div cuerpo>
+        <app-mi-contenido-custom></app-mi-contenido-custom>
+    </div>
+</div>
+```
+
+### 3. Botones Personalizados
+
+```typescript
+configGuardar: BotonDialog = {
+  label: 'ENVIAR',
+  icono: 'roundSend',
+  class: 'bg-indigo-600 text-white hover:bg-indigo-700'
+};
+```
+
+```html
+<div jvsDialogFlotante 
+     [matDialogRefActual]="dialogRef"
+     [btnGuardar]="configGuardar">
+     <!-- ... -->
+</div>
+```

package/dialog-flotante/dialog-flotante.component.d.ts

@@ -1,32 +1,23 @@
-import { EventEmitter } from '@angular/core';
 import { MatDialogRef } from '@angular/material/dialog';
 import { BotonDialog } from './dialog-flotante.interface';
 import * as i0 from "@angular/core";
 export declare class DialogFlotanteComponent {
-    cssClases: Record<string, string>;
-    private _sinTitulo;
-    get sinTitulo(): boolean;
-    set sinTitulo(val: boolean | '');
-    private _sinBarraDeAccion;
-    get sinBarraDeAccion(): boolean;
-    set sinBarraDeAccion(val: boolean | '');
+    cssClases: import("@angular/core").InputSignal<Record<string, string>>;
+    sinTitulo: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    sinBarraDeAccion: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    btnCerrarBarra: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    iconoTitulo: import("@angular/core").InputSignal<string | undefined>;
+    matDialogRefActual: import("@angular/core").InputSignal<MatDialogRef<any, any> | undefined>;
+    btnGuardarInput: import("@angular/core").InputSignal<string | boolean | BotonDialog | undefined>;
+    btnCerrarInput: import("@angular/core").InputSignal<string | boolean | BotonDialog | undefined>;
+    btnGuardarClick: import("@angular/core").OutputEmitterRef<any>;
+    btnCerrarClick: import("@angular/core").OutputEmitterRef<any>;
     private readonly defaultBtnCerrar;
-    private _btnCerrar;
-    get btnCerrar(): BotonDialog;
-    set btnCerrar(val: BotonDialog | boolean | string | '');
-    private _btnCerrarBarra;
-    get btnCerrarBarra(): boolean;
-    set btnCerrarBarra(val: boolean | '');
     private readonly defaultBtnGuardar;
-    private _btnGuardar;
-    get btnGuardar(): BotonDialog | undefined;
-    set btnGuardar(val: BotonDialog | boolean | string | '');
-    iconoTitulo?: string;
-    matDialogRefActual: MatDialogRef<any>;
-    btnGuardarClick: EventEmitter<any>;
-    btnCerrarClick: EventEmitter<any>;
+    btnCerrar: import("@angular/core").Signal<BotonDialog | undefined>;
+    btnGuardar: import("@angular/core").Signal<BotonDialog | undefined>;
     guardarDialogo(): void;
     cerrarDialogo(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DialogFlotanteComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DialogFlotanteComponent, "[jvsDialogFlotante]", never, { "cssClases": { "alias": "cssClases"; "required": false; }; "sinTitulo": { "alias": "sinTitulo"; "required": false; }; "sinBarraDeAccion": { "alias": "sinBarraDeAccion"; "required": false; }; "btnCerrar": { "alias": "btnCerrar"; "required": false; }; "btnCerrarBarra": { "alias": "btnCerrarBarra"; "required": false; }; "btnGuardar": { "alias": "btnGuardar"; "required": false; }; "iconoTitulo": { "alias": "iconoTitulo"; "required": false; }; "matDialogRefActual": { "alias": "matDialogRefActual"; "required": false; }; }, { "btnGuardarClick": "btnGuardarClick"; "btnCerrarClick": "btnCerrarClick"; }, never, ["[tituloImagen]", "[titulo]", "[selectTitulo]", "[cuerpo]", "[pieIzquierda]", "[pieCentro]", "[pieDerecha]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DialogFlotanteComponent, "[jvsDialogFlotante]", never, { "cssClases": { "alias": "cssClases"; "required": false; "isSignal": true; }; "sinTitulo": { "alias": "sinTitulo"; "required": false; "isSignal": true; }; "sinBarraDeAccion": { "alias": "sinBarraDeAccion"; "required": false; "isSignal": true; }; "btnCerrarBarra": { "alias": "btnCerrarBarra"; "required": false; "isSignal": true; }; "iconoTitulo": { "alias": "iconoTitulo"; "required": false; "isSignal": true; }; "matDialogRefActual": { "alias": "matDialogRefActual"; "required": false; "isSignal": true; }; "btnGuardarInput": { "alias": "btnGuardar"; "required": false; "isSignal": true; }; "btnCerrarInput": { "alias": "btnCerrar"; "required": false; "isSignal": true; }; }, { "btnGuardarClick": "btnGuardarClick"; "btnCerrarClick": "btnCerrarClick"; }, never, ["[tituloImagen]", "[titulo]", "[selectTitulo]", "[cuerpo]", "[pieIzquierda]", "[pieCentro]", "[pieDerecha]"], true, never>;
 }

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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"}