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

package/fesm2022/jvsoft-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, output, computed, Component, EventEmitter, HostListener, Output, Input, Directive, ViewChild, Optional, inject, Pipe, NgModule, ContentChildren, ViewChildren, Injectable, signal, ElementRef, HostBinding, effect, untracked, InjectionToken } from '@angular/core';
+import { input, booleanAttribute, output, computed, Component, EventEmitter, HostListener, Output, Input, Directive, ViewChild, Optional, inject, Pipe, NgModule, ContentChildren, ViewChildren, Injectable, DestroyRef, signal, ElementRef, HostBinding, effect, untracked, InjectionToken } from '@angular/core';
 import * as i3 from '@angular/material/dialog';
 import { MatDialogModule } from '@angular/material/dialog';
 import * as i4 from '@angular/material/icon';
@@ -11,7 +11,6 @@ import * as i5 from '@angular/material/core';
 import { MatRipple, MatRippleModule, MatOptionModule } from '@angular/material/core';
 import * as i6 from '@angular/material/divider';
 import { MatDivider, MatDividerModule } from '@angular/material/divider';
-import { __decorate } from 'tslib';
 import { trigger, state, transition, style, animate } from '@angular/animations';
 import { TemplatePortal } from '@angular/cdk/portal';
 import * as i2$1 from '@angular/forms';
@@ -30,13 +29,12 @@ import * as i2 from '@angular/material/table';
 import { MatColumnDef, MatTable, MatTableModule, MatTableDataSource, MatFooterRow, MatRow } from '@angular/material/table';
 import * as i4$2 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
-import moment from 'moment';
+import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
+import { addMinutes, format } from 'date-fns';
 import { Subject, takeUntil, startWith, of, fromEvent, BehaviorSubject } from 'rxjs';
 import { filter, map, take, switchMap, debounceTime, takeUntil as takeUntil$1, distinctUntilChanged } from 'rxjs/operators';
-import shortHash from 'shorthash2';
 import * as i4$1 from '@jvsoft/utils';
-import { JvsPopoverDirective, JvsPopoverListenerDirective, DataModel as DataModel$1, generateRandomString, dataEnLista, tipoValorFuncion as tipoValorFuncion$1, getUniqueValues, establecerQuitarRequired, mostrarValorEnBusqueda, getFormValidationErrors } from '@jvsoft/utils';
+import { JvsPopoverDirective, JvsPopoverListenerDirective, simpleHash, DataModel as DataModel$1, generateRandomString, dataEnLista, tipoValorFuncion as tipoValorFuncion$1, getUniqueValues, establecerQuitarRequired, mostrarValorEnBusqueda, getFormValidationErrors } from '@jvsoft/utils';
 import * as i1$1 from '@angular/platform-browser';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as XLSX from 'xlsx';
@@ -45,7 +43,6 @@ import * as i2$3 from '@angular/cdk/overlay';
 import * as i3$2 from '@angular/material/tree';
 import { MatTreeModule } from '@angular/material/tree';
 import { NestedTreeControl } from '@angular/cdk/tree';
-import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i3$3 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import * as i4$3 from '@angular/material/datepicker';
@@ -969,18 +966,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }]
         }] });
 
-var TablaMantenimientoComponent_1;
-let TablaMantenimientoComponent = class TablaMantenimientoComponent {
-    static { TablaMantenimientoComponent_1 = this; }
+class TablaMantenimientoComponent {
     fb;
     overlay;
     viewContainerRef;
     tablaMantenimientoService;
     cdRef;
     static nextId = 0;
-    id = `jvs-tabla-mantenimiento-id-${TablaMantenimientoComponent_1.nextId++}`;
+    id = `jvs-tabla-mantenimiento-id-${TablaMantenimientoComponent.nextId++}`;
     router = inject(Router);
     route = inject(ActivatedRoute);
+    destroyRef = inject(DestroyRef);
     get templateBotonesComunes() {
         return this.tablaMantenimientoService.templateBotonesComunes;
     }
@@ -1299,7 +1295,7 @@ let TablaMantenimientoComponent = class TablaMantenimientoComponent {
     idTablaValor(data) {
         if (data) {
             if (this.idTabla.length < 1) {
-                return shortHash(JSON.stringify({ data, claseFinal: undefined }));
+                return simpleHash(JSON.stringify({ data, claseFinal: undefined }));
             }
             return this.idTabla.map(d => data[d]).join('-');
         }
@@ -1309,19 +1305,11 @@ let TablaMantenimientoComponent = class TablaMantenimientoComponent {
     rowTooltip = (item) => '';
     soloIconos = false;
     ngOnInit() {
-        this.router.events.pipe(filter(event => event instanceof NavigationEnd), startWith(null), map(() => this.getDeepestRoute(this.route)), map(route => route.snapshot.data), untilDestroyed(this)).subscribe(data => {
+        this.router.events.pipe(filter(event => event instanceof NavigationEnd), startWith(null), map(() => this.getDeepestRoute(this.route)), map(route => route.snapshot.data), takeUntilDestroyed(this.destroyRef)).subscribe(data => {
             console.log(data);
             this.derechosActuales = data['derechos'];
             this.ignorarDerechos = data['ignorarDerechos'] ?? false;
         });
-        // this.sharedService.dataRutaActual$.pipe(untilDestroyed(this)).subscribe(datRouteData => {
-        //     if (datRouteData) {
-        //         this.derechosActuales = datRouteData['derechos'];
-        //         if (!this.ignorarDerechos) {
-        //             this.ignorarDerechos = datRouteData['ignorarDerechos'] ?? false;
-        //         }
-        //     }
-        // });
         this.paginacion.pageSize = this.pageSize;
         this.paginacion.pageSizeOptions = this.pageSizeOptions;
         this.actualizarCrud();
@@ -1344,9 +1332,9 @@ let TablaMantenimientoComponent = class TablaMantenimientoComponent {
                         }
                         else {
                             console.log('eLSE ID TABLA');
-                            const dataStr = Array.isArray(res) ? res.find((itm) => shortHash(JSON.stringify({
+                            const dataStr = Array.isArray(res) ? res.find((itm) => simpleHash(JSON.stringify({
                                 ...itm, claseFinal: undefined
-                            })) == shortHash(JSON.stringify({ ...this.objSeleccionado, claseFinal: undefined }))) : null;
+                            })) == simpleHash(JSON.stringify({ ...this.objSeleccionado, claseFinal: undefined }))) : null;
                             if (dataStr) {
                                 this.objSeleccionado = dataStr;
                             }
@@ -1448,7 +1436,7 @@ let TablaMantenimientoComponent = class TablaMantenimientoComponent {
             }
         }
         if (this.busquedaTipo() === 'simple') {
-            this.cCampoBusqueda.valueChanges.pipe(untilDestroyed(this)).subscribe(value => this.onFilterChange(value ?? ''));
+            this.cCampoBusqueda.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => this.onFilterChange(value ?? ''));
         }
         if (this.botonesCRUD === '-') {
             this.botonesMenu.crud = [];
@@ -1661,7 +1649,7 @@ let TablaMantenimientoComponent = class TablaMantenimientoComponent {
                         if (objeto[columna.property]) {
                             fecha = new Date(objeto[columna.property].replace(/(\d{2}:\d{2}:\d{2}):\w{2}/, '$1'));
                             if (getBrowserName() == 'chrome') {
-                                fecha = moment(objeto[columna.property], true).add(2, 'minutes').toDate();
+                                fecha = addMinutes(new Date(objeto[columna.property]), 2);
                             }
                         }
                         acumulador[nColumn] = fecha;
@@ -1799,10 +1787,7 @@ let TablaMantenimientoComponent = class TablaMantenimientoComponent {
                 ])
             ]),
         ] });
-};
-TablaMantenimientoComponent = TablaMantenimientoComponent_1 = __decorate([
-    UntilDestroy({ checkProperties: true })
-], TablaMantenimientoComponent);
+}
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TablaMantenimientoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'jvs-tabla-mantenimiento', standalone: true, imports: [
@@ -2220,7 +2205,7 @@ class ListaArbolComponent {
         if (data) {
             const idTablaVal = this._idTabla();
             if (idTablaVal.length < 1) {
-                return shortHash(JSON.stringify({ data, claseFinal: undefined }));
+                return simpleHash(JSON.stringify({ data, claseFinal: undefined }));
             }
             return idTablaVal.map(d => data[d]).join('-');
         }
@@ -2479,7 +2464,7 @@ class FiltroBusquedaComponent {
     destroy$ = new Subject();
     sufixTemporal = '_temporal';
     tipoValorFuncion = tipoValorFuncion$1;
-    fechaActual = moment().toDate();
+    fechaActual = new Date();
     constructor() {
         this.inputParaEnviarAutocomplete.pipe(debounceTime(500), takeUntil$1(this.destroy$)).subscribe((param) => {
             this.queryService?.cargar(this, [param.reqQuery], param.reqData, false, this.prefijoConsulta()).then((dRet) => {
@@ -2673,17 +2658,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}`);
             }
@@ -2951,6 +2936,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                     }, 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" }]
         }], ctorParameters: () => [] });
 
+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: i4.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"] }]
+        }] });
+
 // export {};
 // import './src/styles.scss';
 
@@ -2958,5 +3019,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DialogFlotanteComponent, FiltroBusquedaComponent, FiltroBusquedaService, ListaArbolComponent, LucesNavidadComponent, MatSuffixSearchButtonComponent, MenuComponent, ProgressBarComponent, QUERY_SERVICE_TOKEN, TablaMantenimientoComponent, TablaMantenimientoService };
+export { AlertaComponent, DialogFlotanteComponent, FiltroBusquedaComponent, FiltroBusquedaService, ListaArbolComponent, LucesNavidadComponent, MatSuffixSearchButtonComponent, MenuComponent, ProgressBarComponent, QUERY_SERVICE_TOKEN, TablaMantenimientoComponent, TablaMantenimientoService };
 //# sourceMappingURL=jvsoft-components.mjs.map