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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/alerta/README.md +102 -0
  2. package/alerta/alerta.component.d.ts +29 -0
  3. package/alerta/index.d.ts +5 -0
  4. package/alerta/public-api.d.ts +1 -0
  5. package/fesm2022/jvsoft-components-alerta.mjs +88 -0
  6. package/fesm2022/jvsoft-components-alerta.mjs.map +1 -0
  7. package/fesm2022/jvsoft-components.mjs +77 -1
  8. package/fesm2022/jvsoft-components.mjs.map +1 -1
  9. package/index.d.ts +1 -0
  10. package/package.json +12 -8
package/alerta/README.md ADDED
@@ -0,0 +1,102 @@
1
+ # Alerta Component
2
+
3
+ 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**.
4
+
5
+ ## 📦 Características
6
+
7
+ - **Moderno**: Utiliza Signals para una reactividad eficiente y sintaxis de control flow de Angular.
8
+ - **Standalone**: Sin dependencias de módulos, fácil de importar.
9
+ - **Altamente Personalizable**: Permite sobreescribir clases de Tailwind para cada parte del componente, iconos y contenido.
10
+ - **Premium por Defecto**: Viene con estilos predefinidos elegantes y bordes redondeados (`rounded-xl`).
11
+
12
+ ## 🚀 Uso Básico
13
+
14
+ Importa el componente en tu componente standalone:
15
+
16
+ ```typescript
17
+ import { AlertaComponent } from '@jvsoft/components/alerta';
18
+
19
+ @Component({
20
+ imports: [AlertaComponent, ...],
21
+ // ...
22
+ })
23
+ export class MiComponente {}
24
+ ```
25
+
26
+ Uso en la plantilla:
27
+
28
+ ```html
29
+ <jvs-alerta
30
+ tipo="success"
31
+ titulo="Operación Exitosa"
32
+ mensaje="Los datos se han guardado correctamente."
33
+ ></jvs-alerta>
34
+ ```
35
+
36
+ ## 🛠 API
37
+
38
+ ### Inputs (Signals)
39
+
40
+ | Input | Tipo | Default | Descripción |
41
+ |-------|------|---------|-------------|
42
+ | `tipo` | `AlertaTipo` | `'info'` | Define el estilo visual. Valores: `'info' \| 'error' \| 'success' \| 'warning' \| 'custom'`. |
43
+ | `titulo` | `string` | `undefined` | Texto resaltado en la parte superior. |
44
+ | `mensaje` | `string` | `undefined` | Texto descriptivo del mensaje. |
45
+ | `icono` | `string` | `undefined` | Sobreescribe el icono SVG por defecto. |
46
+ | `clases` | `AlertaClases` | `{}` | Objeto para personalización granular de CSS (ver abajo). |
47
+ | `botonCerrar` | `boolean` | `false` | Muestra un botón "X" para cerrar la alerta. |
48
+ | `botonAcepto` | `boolean` | `false` | Muestra un botón de acción "Aceptar". |
49
+ | `textoAcepto` | `string` | `'Lo entiendo'` | Etiqueta del botón de acción. |
50
+
51
+ ### Outputs
52
+
53
+ | Output | Evento | Descripción |
54
+ |--------|--------|-------------|
55
+ | `alCerrar` | `void` | Se emite al hacer clic en el botón de cerrar. |
56
+ | `alAceptar` | `void` | Se emite al hacer clic en el botón de acción "Aceptar". |
57
+
58
+ ### Interfaz `AlertaClases`
59
+
60
+ Permite inyectar clases de Tailwind adicionales en partes específicas:
61
+
62
+ ```typescript
63
+ interface AlertaClases {
64
+ contenedor?: string; // Div principal
65
+ icono?: string; // Contenedor del icono
66
+ titulo?: string; // Título h4
67
+ mensaje?: string; // Div del mensaje
68
+ acciones?: string; // Contenedor del botón de acción
69
+ }
70
+ ```
71
+
72
+ ## 🎨 Ejemplos de Personalización
73
+
74
+ ### 1. Personalización de Clases
75
+ Si usas `tipo="custom"`, los estilos por defecto se omiten y puedes definirlos totalmente:
76
+
77
+ ```html
78
+ <jvs-alerta
79
+ tipo="custom"
80
+ [clases]="{
81
+ contenedor: 'bg-indigo-600 text-white rounded-lg p-6',
82
+ icono: 'text-indigo-200 shadow-sm'
83
+ }"
84
+ icono="roundAutoAwesome"
85
+ mensaje="Este es un mensaje totalmente personalizado."
86
+ ></jvs-alerta>
87
+ ```
88
+
89
+ ### 2. Uso con Content Projection
90
+ En lugar del input `mensaje`, puedes proyectar cualquier HTML:
91
+
92
+ ```html
93
+ <jvs-alerta tipo="warning" titulo="Atención Requerida">
94
+ <div class="flex flex-col gap-2">
95
+ <p>Por favor revise los siguientes puntos:</p>
96
+ <ul class="list-disc ml-4">
97
+ <li>Paso 1: Verificar firma</li>
98
+ <li>Paso 2: Adjuntar anexos</li>
99
+ </ul>
100
+ </div>
101
+ </jvs-alerta>
102
+ ```
package/alerta/alerta.component.d.ts ADDED
@@ -0,0 +1,29 @@
1
+ import * as i0 from "@angular/core";
2
+ export interface AlertaClases {
3
+ contenedor?: string;
4
+ icono?: string;
5
+ titulo?: string;
6
+ mensaje?: string;
7
+ acciones?: string;
8
+ }
9
+ export type AlertaTipo = 'info' | 'error' | 'success' | 'warning' | 'custom';
10
+ export declare class AlertaComponent {
11
+ tipo: import("@angular/core").InputSignal<AlertaTipo>;
12
+ titulo: import("@angular/core").InputSignal<string | undefined>;
13
+ mensaje: import("@angular/core").InputSignal<string | undefined>;
14
+ iconoManual: import("@angular/core").InputSignal<string | undefined>;
15
+ clasesManual: import("@angular/core").InputSignal<AlertaClases>;
16
+ botonCerrar: import("@angular/core").InputSignal<boolean>;
17
+ botonAcepto: import("@angular/core").InputSignal<boolean>;
18
+ textoAcepto: import("@angular/core").InputSignal<string>;
19
+ alCerrar: import("@angular/core").OutputEmitterRef<void>;
20
+ alAceptar: import("@angular/core").OutputEmitterRef<void>;
21
+ private defaults;
22
+ clasesContenedor: import("@angular/core").Signal<string>;
23
+ iconoFinal: import("@angular/core").Signal<string>;
24
+ clasesIcono: import("@angular/core").Signal<string>;
25
+ clasesTitulo: import("@angular/core").Signal<string>;
26
+ clasesMensaje: import("@angular/core").Signal<string>;
27
+ static ɵfac: i0.ɵɵFactoryDeclaration<AlertaComponent, never>;
28
+ 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>;
29
+ }
package/alerta/index.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ /**
2
+ * Generated bundle index. Do not edit.
3
+ */
4
+ /// <amd-module name="@jvsoft/components/alerta" />
5
+ export * from './public-api';
package/alerta/public-api.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './alerta.component';
package/fesm2022/jvsoft-components-alerta.mjs ADDED
@@ -0,0 +1,88 @@
1
+ import * as i0 from '@angular/core';
2
+ import { input, output, computed, Component } from '@angular/core';
3
+ import { CommonModule } from '@angular/common';
4
+ import * as i1 from '@angular/material/icon';
5
+ import { MatIconModule } from '@angular/material/icon';
6
+
7
+ class AlertaComponent {
8
+ // Inputs (Signals)
9
+ tipo = input('info');
10
+ titulo = input();
11
+ mensaje = input();
12
+ iconoManual = input(undefined, { alias: 'icono' });
13
+ clasesManual = input({}, { alias: 'clases' });
14
+ botonCerrar = input(false);
15
+ botonAcepto = input(false);
16
+ textoAcepto = input('Lo entiendo');
17
+ // Outputs
18
+ alCerrar = output();
19
+ alAceptar = output();
20
+ // Computed properties for default styles
21
+ defaults = computed(() => {
22
+ const t = this.tipo();
23
+ switch (t) {
24
+ case 'error':
25
+ return {
26
+ bg: 'bg-red-50',
27
+ border: 'border-red-200',
28
+ text: 'text-red-800',
29
+ icon: 'roundError',
30
+ iconColor: 'text-red-400'
31
+ };
32
+ case 'success':
33
+ return {
34
+ bg: 'bg-green-50',
35
+ border: 'border-green-200',
36
+ text: 'text-green-800',
37
+ icon: 'roundCheckCircle',
38
+ iconColor: 'text-green-400'
39
+ };
40
+ case 'warning':
41
+ return {
42
+ bg: 'bg-amber-50',
43
+ border: 'border-amber-200',
44
+ text: 'text-amber-800',
45
+ icon: 'roundWarning',
46
+ iconColor: 'text-amber-400'
47
+ };
48
+ case 'info':
49
+ default:
50
+ return {
51
+ bg: 'bg-blue-50',
52
+ border: 'border-blue-200',
53
+ text: 'text-blue-800',
54
+ icon: 'roundInfo',
55
+ iconColor: 'text-blue-400'
56
+ };
57
+ }
58
+ });
59
+ // Final classes merged with manual overrides
60
+ clasesContenedor = computed(() => {
61
+ const d = this.defaults();
62
+ const custom = this.clasesManual()?.contenedor || '';
63
+ if (this.tipo() === 'custom')
64
+ return custom;
65
+ return `flex items-start gap-1 p-2 rounded-lg border ${d.bg} ${d.border} ${d.text} ${custom}`;
66
+ });
67
+ iconoFinal = computed(() => this.iconoManual() || this.defaults().icon);
68
+ clasesIcono = computed(() => {
69
+ const d = this.defaults();
70
+ const custom = this.clasesManual()?.icono || '';
71
+ return `shrink-0 ${d.iconColor} ${custom}`;
72
+ });
73
+ clasesTitulo = computed(() => `font-bold mb-1 ${this.clasesManual()?.titulo || ''}`);
74
+ clasesMensaje = computed(() => `text-xs leading-relaxed ${this.clasesManual()?.mensaje || ''}`);
75
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlertaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
76
+ 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"] }] });
77
+ }
78
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlertaComponent, decorators: [{
79
+ type: Component,
80
+ 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"] }]
81
+ }] });
82
+
83
+ /**
84
+ * Generated bundle index. Do not edit.
85
+ */
86
+
87
+ export { AlertaComponent };
88
+ //# sourceMappingURL=jvsoft-components-alerta.mjs.map
package/fesm2022/jvsoft-components-alerta.mjs.map ADDED
@@ -0,0 +1 @@
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.mjs CHANGED
@@ -2951,6 +2951,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
2951
2951
  }, template: "@if (isCargaCompleta()) {\n <div class=\"filtroBusqueda w-full\">\n <div class=\"border-none p-0 flex flex-col\">\n\n @if (dataOpcionesNuevo().length === 1) {\n <div class=\"flex-1 flex items-end max-sm:flex-col flex-wrap gap-2\">\n <ng-container [ngTemplateOutlet]=\"verOpcionesT\"></ng-container>\n </div>\n } @else if (dataOpcionesNuevo().length > 1) {\n <div class=\"flex-1 flex flex-col flex-wrap gap-2 border\">\n <mat-tab-group\n [selectedIndex]=\"tabActual()\"\n (selectedIndexChange)=\"getControlRaiz('opcion').setValue($event)\"\n class=\"flex-1 flex flex-wrap\"\n [mat-stretch-tabs]=\"false\"\n dynamicHeight\n mat-align-tabs=\"start\"\n >\n @for (item of dataOpcionesNuevo(); track $index) {\n <mat-tab [aria-label]=\"(tabActual() === $index) ? 'primary' : ''\">\n <ng-template mat-tab-label>\n @if (tabActual() === $index) {\n <mat-icon class=\"icon-xs\" svgIcon=\"roundVerified\"></mat-icon>\n }\n &nbsp;{{ item.label }}\n </ng-template>\n\n <div class=\"mx-2 mt-0 pt-0 flex flex-col items-end sm:flex-row flex-wrap gap-2\">\n <ng-container [ngTemplateOutlet]=\"verOpcionesT\"></ng-container>\n </div>\n </mat-tab>\n }\n </mat-tab-group>\n </div>\n }\n </div>\n </div>\n}\n\n<ng-template #verOpcionesT>\n @for (campo of dataOpcionesNuevo()[tabActual()]?.campos; track campo.campo) {\n <ng-container [ngTemplateOutletContext]=\"{controlData: campo}\" [ngTemplateOutlet]=\"controlesFormularioNuevo\"></ng-container>\n }\n <ng-container [ngTemplateOutlet]=\"botonFiltrar\"></ng-container>\n</ng-template>\n\n<ng-template #botonFiltrar>\n <button (click)=\"filtrarData()\"\n class=\"flex items-center justify-center bg-primary text-primary-contrast font-bold uppercase text-xs px-2 py-1 rounded shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150\"\n matRipple type=\"button\"\n [disabled]=\"!isCargaCompleta()\"\n >\n <mat-icon class=\"icon-xs\" svgIcon=\"roundFilterAlt\"></mat-icon>&nbsp;\n <span>Filtrar</span>\n </button>\n</ng-template>\n\n<ng-template #controlesFormularioNuevo let-controlData=\"controlData\">\n @switch (controlData.control) {\n @case ('controlAgrupado') {\n <ng-container [ngTemplateOutletContext]=\"{template: inputControlAgrupado, controlData: controlData}\" [ngTemplateOutlet]=\"contenedorInput\"></ng-container>\n }\n @case ('select') {\n <ng-container [ngTemplateOutletContext]=\"{template: inputSelect, controlData: controlData}\" [ngTemplateOutlet]=\"contenedorInput\"></ng-container>\n }\n @case ('autocomplete') {\n <ng-container [ngTemplateOutletContext]=\"{template: inputAutocomplete, controlData: controlData}\" [ngTemplateOutlet]=\"contenedorInput\"></ng-container>\n }\n @case ('date') {\n <ng-container [ngTemplateOutletContext]=\"{template: inputDate, controlData: controlData}\" [ngTemplateOutlet]=\"contenedorInput\"></ng-container>\n }\n @case ('date_range') {\n <ng-container [ngTemplateOutletContext]=\"{template: inputDateRange, controlData: controlData}\" [ngTemplateOutlet]=\"contenedorInput\"></ng-container>\n }\n @case ('checkbox') {\n <ng-container [ngTemplateOutletContext]=\"{template: inputCheckBox, controlData: controlData}\" [ngTemplateOutlet]=\"contenedorInput\"></ng-container>\n }\n @default {\n @if (controlData.control === 'text' || controlData.control === 'number') {\n <ng-container [ngTemplateOutletContext]=\"{template: inputTextNumber, controlData: controlData}\" [ngTemplateOutlet]=\"contenedorInput\"></ng-container>\n }\n }\n }\n</ng-template>\n\n<ng-template #contenedorInput let-template=\"template\" let-controlData=\"controlData\">\n <fieldset [class.flex-auto]=\"!controlData.cssClass\" [class]=\"controlData.cssClass\" class=\"appearance-none contenedorCampo relative\">\n <legend>\n <label [for]=\"controlData.campo\">{{ controlData.label }}@if(controlData.required){<span class=\"text-red-700 font-bold\"> *</span>}</label>\n </legend>\n <ng-container [ngTemplateOutletContext]=\"{controlData: controlData}\" [ngTemplateOutlet]=\"template\"></ng-container>\n </fieldset>\n</ng-template>\n\n<ng-template #inputSelect let-controlData=\"controlData\">\n <select [formControl]=\"getControl(controlData.campo)\"\n (change)=\"cambiarSeleccionNuevo(controlData, $event);\"\n [class]=\"controlData.select?.cssClass?.class\"\n [id]=\"controlData.campo\"\n [required]=\"controlData.required\"\n [class.border-b-red-700]=\"getControl(controlData.campo).invalid\"\n >\n @if (controlData.select?.textoCuandoNulo) {\n <option value=\"\">{{ controlData.select?.textoCuandoNulo }}</option>\n }\n @for (itemSelect of dataServidorSuscripcion[controlData.select?.data!] | async; track $index) {\n <option [class]=\"controlData.select?.cssClass?.option\" [value]=\"campoValorEval(controlData, itemSelect)\">\n {{ campoTextEval(controlData, itemSelect) }}\n </option>\n }\n </select>\n</ng-template>\n\n<ng-template #inputControlAgrupado let-controlData=\"controlData\">\n <div class=\"flex items-center campos-container\">\n @for (sub of controlData.controlAgrupado; track sub.campo) {\n @switch (sub.control) {\n @case ('select') {\n <ng-container [ngTemplateOutletContext]=\"{controlData: sub}\" [ngTemplateOutlet]=\"inputSelect\"></ng-container>\n }\n @case ('autocomplete') {\n <ng-container [ngTemplateOutletContext]=\"{controlData: sub}\" [ngTemplateOutlet]=\"inputAutocomplete\"></ng-container>\n }\n @case ('date') {\n <ng-container [ngTemplateOutletContext]=\"{controlData: sub}\" [ngTemplateOutlet]=\"inputDate\"></ng-container>\n }\n @case ('date_range') {\n <ng-container [ngTemplateOutletContext]=\"{controlData: sub}\" [ngTemplateOutlet]=\"inputDateRange\"></ng-container>\n }\n @case ('checkbox') {\n <ng-container [ngTemplateOutletContext]=\"{controlData: sub}\" [ngTemplateOutlet]=\"inputCheckBox\"></ng-container>\n }\n @default {\n @if (sub.control === 'text' || sub.control === 'number') {\n <ng-container [ngTemplateOutletContext]=\"{controlData: sub}\" [ngTemplateOutlet]=\"inputTextNumber\"></ng-container>\n }\n }\n }\n }\n </div>\n</ng-template>\n\n<ng-template #inputAutocomplete let-controlData=\"controlData\">\n <div class=\"flex items-center formcontrol-container\">\n <input [formControl]=\"getControl(controlData.campo + sufixTemporal)\"\n (input)=\"cambiarNuevo(controlData, $any($event.target).value)\"\n [matAutocomplete]=\"auto\"\n autocomplete=\"off\"\n [id]=\"controlData.campo\"\n placeholder=\"{{ controlData.autocomplete?.textoCuandoNulo ?? controlData.label }}\"\n [required]=\"controlData.required\"\n [class.border-b-red-700]=\"getControl(controlData.campo).invalid\"\n >\n <mat-autocomplete #auto=\"matAutocomplete\"\n (optionSelected)=\"cambiarSeleccionNuevo(controlData, $event)\"\n [panelWidth]=\"'auto'\"\n [displayWith]=\"getAutocompleteLabel.bind(this, controlData)\"\n >\n @for (itemSelect of filtrados[controlData.campo]; track $index) {\n <mat-option [class]=\"controlData.autocomplete?.cssClass?.option\" [value]=\"campoValorEval(controlData, itemSelect)\">\n @if (controlData.autocomplete?.optionInnerHtml) {\n <div [innerHTML]=\"controlData.autocomplete?.optionInnerHtml!(itemSelect)\"></div>\n } @else {\n {{ campoTextEval(controlData, itemSelect) }}\n }\n </mat-option>\n }\n </mat-autocomplete>\n\n <div class=\"flex items-center justify-start\">\n <button (click)=\"limpiarAutocomplete(controlData, $event)\" class=\"boton-circular-gris\"\n matRipple\n type=\"button\"\n >\n <mat-icon [svgIcon]=\"(getControl(controlData.campo).value ? 'roundCancel' : 'roundSearch')\" class=\"icon-2xs\"></mat-icon>\n </button>\n </div>\n </div>\n</ng-template>\n\n<ng-template #inputTextNumber let-controlData=\"controlData\">\n <input (keyup.enter)=\"controlData.keyUpEnter ? filtrarData() : null\"\n [formControl]=\"getControl(controlData.campo)\"\n [type]=\"controlData.control\"\n autocomplete=\"off\"\n [id]=\"controlData.campo\"\n placeholder=\"{{ controlData.label }}\"\n [required]=\"controlData.required\"\n [class.border-b-red-700]=\"getControl(controlData.campo).invalid\"\n >\n</ng-template>\n\n<ng-template #inputDate let-controlData=\"controlData\">\n <div class=\"flex items-center date-container\">\n <input (keyup.enter)=\"controlData.keyUpEnter ? filtrarData() : null\"\n [formControl]=\"getControl(controlData.campo)\"\n (dateChange)=\"cambiarSeleccionNuevo(controlData, $event)\"\n [matDatepicker]=\"i\"\n autocomplete=\"off\"\n [id]=\"controlData.campo\"\n placeholder=\"{{ controlData.label }}\"\n type=\"text\"\n [required]=\"controlData.required\"\n [class.border-b-red-700]=\"getControl(controlData.campo).invalid\"\n >\n <mat-datepicker-toggle [for]=\"i\" class=\"icon-xs\" matSuffix></mat-datepicker-toggle>\n <mat-datepicker #i></mat-datepicker>\n </div>\n</ng-template>\n\n<ng-template #inputDateRange let-controlData=\"controlData\">\n <div class=\"flex items-center daterange-container\">\n <mat-date-range-input [rangePicker]=\"i\">\n <input [formControl]=\"getControl(controlData.dateRange?.campo![0])\" matStartDate placeholder=\"Desde\">\n <input [formControl]=\"getControl(controlData.dateRange?.campo![1])\" matEndDate placeholder=\"Hasta\">\n </mat-date-range-input>\n <mat-datepicker-toggle [for]=\"i\" class=\"icon-xs\"></mat-datepicker-toggle>\n <mat-date-range-picker #i></mat-date-range-picker>\n </div>\n</ng-template>\n\n<ng-template #inputCheckBox let-controlData=\"controlData\">\n <input [formControl]=\"getControl(controlData.campo)\"\n [id]=\"controlData.campo\"\n [required]=\"controlData.required\"\n [class.border-b-red-700]=\"getControl(controlData.campo).invalid\"\n type=\"checkbox\"\n (change)=\"cambiarSeleccionNuevo(controlData, $event)\"\n >\n</ng-template>\n" }]
2952
2952
  }], ctorParameters: () => [] });
2953
2953
 
2954
+ class AlertaComponent {
2955
+ // Inputs (Signals)
2956
+ tipo = input('info');
2957
+ titulo = input();
2958
+ mensaje = input();
2959
+ iconoManual = input(undefined, { alias: 'icono' });
2960
+ clasesManual = input({}, { alias: 'clases' });
2961
+ botonCerrar = input(false);
2962
+ botonAcepto = input(false);
2963
+ textoAcepto = input('Lo entiendo');
2964
+ // Outputs
2965
+ alCerrar = output();
2966
+ alAceptar = output();
2967
+ // Computed properties for default styles
2968
+ defaults = computed(() => {
2969
+ const t = this.tipo();
2970
+ switch (t) {
2971
+ case 'error':
2972
+ return {
2973
+ bg: 'bg-red-50',
2974
+ border: 'border-red-200',
2975
+ text: 'text-red-800',
2976
+ icon: 'roundError',
2977
+ iconColor: 'text-red-400'
2978
+ };
2979
+ case 'success':
2980
+ return {
2981
+ bg: 'bg-green-50',
2982
+ border: 'border-green-200',
2983
+ text: 'text-green-800',
2984
+ icon: 'roundCheckCircle',
2985
+ iconColor: 'text-green-400'
2986
+ };
2987
+ case 'warning':
2988
+ return {
2989
+ bg: 'bg-amber-50',
2990
+ border: 'border-amber-200',
2991
+ text: 'text-amber-800',
2992
+ icon: 'roundWarning',
2993
+ iconColor: 'text-amber-400'
2994
+ };
2995
+ case 'info':
2996
+ default:
2997
+ return {
2998
+ bg: 'bg-blue-50',
2999
+ border: 'border-blue-200',
3000
+ text: 'text-blue-800',
3001
+ icon: 'roundInfo',
3002
+ iconColor: 'text-blue-400'
3003
+ };
3004
+ }
3005
+ });
3006
+ // Final classes merged with manual overrides
3007
+ clasesContenedor = computed(() => {
3008
+ const d = this.defaults();
3009
+ const custom = this.clasesManual()?.contenedor || '';
3010
+ if (this.tipo() === 'custom')
3011
+ return custom;
3012
+ return `flex items-start gap-1 p-2 rounded-lg border ${d.bg} ${d.border} ${d.text} ${custom}`;
3013
+ });
3014
+ iconoFinal = computed(() => this.iconoManual() || this.defaults().icon);
3015
+ clasesIcono = computed(() => {
3016
+ const d = this.defaults();
3017
+ const custom = this.clasesManual()?.icono || '';
3018
+ return `shrink-0 ${d.iconColor} ${custom}`;
3019
+ });
3020
+ clasesTitulo = computed(() => `font-bold mb-1 ${this.clasesManual()?.titulo || ''}`);
3021
+ clasesMensaje = computed(() => `text-xs leading-relaxed ${this.clasesManual()?.mensaje || ''}`);
3022
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlertaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3023
+ 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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
3024
+ }
3025
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlertaComponent, decorators: [{
3026
+ type: Component,
3027
+ 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"] }]
3028
+ }] });
3029
+
2954
3030
  // export {};
2955
3031
  // import './src/styles.scss';
2956
3032
 
@@ -2958,5 +3034,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
2958
3034
  * Generated bundle index. Do not edit.
2959
3035
  */
2960
3036
 
2961
- export { DialogFlotanteComponent, FiltroBusquedaComponent, FiltroBusquedaService, ListaArbolComponent, LucesNavidadComponent, MatSuffixSearchButtonComponent, MenuComponent, ProgressBarComponent, QUERY_SERVICE_TOKEN, TablaMantenimientoComponent, TablaMantenimientoService };
3037
+ export { AlertaComponent, DialogFlotanteComponent, FiltroBusquedaComponent, FiltroBusquedaService, ListaArbolComponent, LucesNavidadComponent, MatSuffixSearchButtonComponent, MenuComponent, ProgressBarComponent, QUERY_SERVICE_TOKEN, TablaMantenimientoComponent, TablaMantenimientoService };
2962
3038
  //# sourceMappingURL=jvsoft-components.mjs.map