@acontplus/ng-components 2.1.14 → 2.1.15

package/fesm2022/acontplus-ng-components.mjs

@@ -344,38 +344,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 /**
  * Servicio centralizado para manejar z-index de todos los diálogos
  * Asegura que los diálogos siempre aparezcan en el orden correcto
+ * Los AlertDialogs siempre tienen prioridad sobre otros diálogos
  */
 class DialogZIndexService {
-    static currentZIndex = 1000;
+    // Rangos de z-index por tipo de diálogo
+    static Z_INDEX_RANGES = {
+        normal: { base: 1000, current: 1000 }, // Diálogos normales: 1000-1999
+        alert: { base: 2000, current: 2000 }, // AlertDialogs: 2000-2999 (siempre encima)
+        toast: { base: 3000, current: 3000 }, // Toasts: 3000-3999 (máxima prioridad)
+    };
     static Z_INDEX_INCREMENT = 10;
     /**
-     * Obtiene el siguiente z-index disponible
+     * Obtiene el siguiente z-index disponible para un tipo específico de diálogo
+     * @param type Tipo de diálogo (normal, alert, toast)
      * @returns El próximo z-index a usar
      */
-    getNextZIndex() {
-        DialogZIndexService.currentZIndex += DialogZIndexService.Z_INDEX_INCREMENT;
-        return DialogZIndexService.currentZIndex;
+    getNextZIndex(type = 'normal') {
+        const range = DialogZIndexService.Z_INDEX_RANGES[type];
+        range.current += DialogZIndexService.Z_INDEX_INCREMENT;
+        return range.current;
+    }
+    /**
+     * Obtiene el z-index actual más alto para un tipo específico
+     * @param type Tipo de diálogo
+     * @returns El z-index más alto actualmente en uso para ese tipo
+     */
+    getCurrentZIndex(type = 'normal') {
+        return DialogZIndexService.Z_INDEX_RANGES[type].current;
     }
     /**
-     * Obtiene el z-index actual más alto
-     * @returns El z-index más alto actualmente en uso
+     * Obtiene el z-index más alto de todos los tipos
+     * @returns El z-index más alto de todos los diálogos
      */
-    getCurrentZIndex() {
-        return DialogZIndexService.currentZIndex;
+    getHighestZIndex() {
+        return Math.max(...Object.values(DialogZIndexService.Z_INDEX_RANGES).map(range => range.current));
     }
     /**
      * Resetea el contador de z-index (útil para testing)
+     * @param type Tipo específico a resetear, o undefined para resetear todos
      */
-    reset() {
-        DialogZIndexService.currentZIndex = 1000;
+    reset(type) {
+        if (type) {
+            const range = DialogZIndexService.Z_INDEX_RANGES[type];
+            range.current = range.base;
+        }
+        else {
+            // Resetear todos los tipos
+            Object.entries(DialogZIndexService.Z_INDEX_RANGES).forEach(([_, range]) => {
+                range.current = range.base;
+            });
+        }
     }
     /**
      * Aplica z-index a un diálogo específico
      * @param dialogRef Referencia al diálogo
-     * @param zIndex Z-index a aplicar (opcional, si no se proporciona usa getNextZIndex())
+     * @param type Tipo de diálogo (determina el rango de z-index)
+     * @param zIndex Z-index específico a aplicar (opcional)
      */
-    applyZIndex(dialogRef, zIndex) {
-        const targetZIndex = zIndex || this.getNextZIndex();
+    applyZIndex(dialogRef, type = 'normal', zIndex) {
+        const targetZIndex = zIndex || this.getNextZIndex(type);
         setTimeout(() => {
             const overlayRef = dialogRef._overlayRef;
             if (overlayRef) {
@@ -383,8 +410,23 @@ class DialogZIndexService {
                 const backdrop = overlayRef.backdropElement;
                 if (pane) {
                     pane.style.zIndex = (targetZIndex + 2).toString();
+                    // Agregar atributo data para debugging
+                    pane.setAttribute('data-dialog-type', type);
+                    pane.setAttribute('data-z-index', targetZIndex.toString());
+                    // Para toasts, agregar clase especial para styling
+                    if (type === 'toast') {
+                        pane.classList.add('toast-overlay');
+                        // Los toasts no deben bloquear interacciones
+                        pane.style.pointerEvents = 'none';
+                        // Pero el contenido del toast sí debe ser clickeable
+                        const dialogContainer = pane.querySelector('.mat-mdc-dialog-container, .mat-dialog-container');
+                        if (dialogContainer) {
+                            dialogContainer.style.pointerEvents = 'auto';
+                        }
+                    }
                 }
-                if (backdrop) {
+                // Los toasts no tienen backdrop, pero si existe, configurarlo
+                if (backdrop && type !== 'toast') {
                     backdrop.style.zIndex = (targetZIndex + 1).toString();
                 }
             }
@@ -393,12 +435,14 @@ class DialogZIndexService {
     /**
      * Trae un diálogo al frente (usado por drag functionality)
      * @param element Elemento del diálogo a traer al frente
+     * @param type Tipo de diálogo
      */
-    bringToFront(element) {
+    bringToFront(element, type = 'normal') {
         const pane = element.closest('.cdk-overlay-pane');
         if (pane) {
-            const newZIndex = this.getNextZIndex();
+            const newZIndex = this.getNextZIndex(type);
             pane.style.zIndex = (newZIndex + 2).toString();
+            pane.setAttribute('data-z-index', newZIndex.toString());
             // También actualizar el backdrop si existe
             const backdrop = pane.parentElement?.querySelector('.cdk-overlay-backdrop');
             if (backdrop) {
@@ -406,6 +450,56 @@ class DialogZIndexService {
             }
         }
     }
+    /**
+     * Fuerza un diálogo a estar siempre encima de todos los demás
+     * Útil para alertas críticas que deben tener máxima prioridad
+     * @param dialogRef Referencia al diálogo
+     */
+    forceToTop(dialogRef) {
+        const highestZIndex = this.getHighestZIndex();
+        const topZIndex = highestZIndex + DialogZIndexService.Z_INDEX_INCREMENT;
+        setTimeout(() => {
+            const overlayRef = dialogRef._overlayRef;
+            if (overlayRef) {
+                const pane = overlayRef.overlayElement;
+                const backdrop = overlayRef.backdropElement;
+                if (pane) {
+                    pane.style.zIndex = (topZIndex + 2).toString();
+                    pane.setAttribute('data-z-index', topZIndex.toString());
+                    pane.setAttribute('data-forced-top', 'true');
+                }
+                if (backdrop) {
+                    backdrop.style.zIndex = (topZIndex + 1).toString();
+                }
+            }
+        }, 0);
+    }
+    /**
+     * Obtiene todos los toasts activos
+     * @returns Array de elementos de toast activos
+     */
+    getActiveToasts() {
+        return Array.from(document.querySelectorAll('.cdk-overlay-pane[data-dialog-type="toast"]'));
+    }
+    /**
+     * Cierra todos los toasts activos
+     */
+    closeAllToasts() {
+        const toasts = this.getActiveToasts();
+        toasts.forEach(toast => {
+            const closeButton = toast.querySelector('[mat-dialog-close], .toast-close-button');
+            if (closeButton) {
+                closeButton.click();
+            }
+        });
+    }
+    /**
+     * Obtiene el número de toasts activos
+     * @returns Número de toasts actualmente visibles
+     */
+    getActiveToastCount() {
+        return this.getActiveToasts().length;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DialogZIndexService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DialogZIndexService, providedIn: 'root' });
 }
@@ -1718,6 +1812,8 @@ class AlertDialogService {
         position: 'center',
         draggable: false,
         allowMultiple: false, // Por defecto no permitir múltiples alerts
+        forceToTop: true, // Por defecto los alerts siempre van encima
+        dialogType: 'alert', // Por defecto usar el tipo alert (z-index alto)
         // Nuevas opciones por defecto
         layout: 'modern',
         iconPosition: 'left',
@@ -1766,6 +1862,8 @@ class AlertDialogService {
             position: 'center',
             draggable: false,
             allowMultiple: false,
+            forceToTop: true,
+            dialogType: 'alert',
         };
     }
     /**
@@ -1786,7 +1884,14 @@ class AlertDialogService {
             mergedOptions.position = this.getToastPosition(mergedOptions.toastPosition || 'top-right');
             mergedOptions.disableClose = false;
             mergedOptions.animation = mergedOptions.animation || 'slide';
-        }
+            mergedOptions.dialogType = 'toast'; // Los toasts usan el z-index más alto
+            // Configuración específica para toasts no-intrusivos
+            mergedOptions.closeOnBackdropClick = false; // No hay backdrop en toasts
+            mergedOptions.allowEscapeKey = false; // ESC no debe cerrar toasts
+            mergedOptions.allowMultiple = true; // Permitir múltiples toasts
+        }
+        // Determinar el tipo de diálogo para z-index
+        const dialogType = mergedOptions.dialogType || (mergedOptions.toastMode ? 'toast' : 'alert');
         // Calcular posición del diálogo
         const position = mergedOptions.toastMode
             ? this.getToastDialogPosition(mergedOptions.toastPosition || 'top-right')
@@ -1804,10 +1909,17 @@ class AlertDialogService {
             closeOnNavigation: true,
             autoFocus: mergedOptions.focusConfirm !== false,
             restoreFocus: true,
-            hasBackdrop: !mergedOptions.toastMode,
+            hasBackdrop: !mergedOptions.toastMode, // Los toasts NO tienen backdrop
         });
         // Aplicar z-index dinámico usando el servicio centralizado
-        this.zIndexService.applyZIndex(dialogRef);
+        if (mergedOptions.forceToTop) {
+            // Si se requiere forzar al tope, usar forceToTop
+            this.zIndexService.forceToTop(dialogRef);
+        }
+        else {
+            // Usar el tipo de diálogo apropiado para z-index
+            this.zIndexService.applyZIndex(dialogRef, dialogType);
+        }
         // Callbacks de ciclo de vida
         if (mergedOptions.willOpen) {
             mergedOptions.willOpen();
@@ -1941,25 +2053,62 @@ class AlertDialogService {
         });
     }
     /**
-     * Toast notification (auto-cierre, posición personalizada)
+     * Toast notification (auto-cierre, posición personalizada, no-intrusivo)
      */
     toast(options) {
         const opts = typeof options === 'string' ? { message: options } : options;
         return this.fire({
             timer: 3000,
-            timerProgressBar: true,
             showConfirmButton: false,
-            position: 'top-end',
+            position: 'bottom-start',
             width: '350px',
+            toastMode: true,
+            dialogType: 'toast',
+            forceToTop: false, // Los toasts usan su propio rango de z-index
+            allowMultiple: true, // Permitir múltiples toasts
+            disableClose: true, // No se puede cerrar manualmente (solo por timer)
+            closeOnBackdropClick: false, // No hay backdrop
+            allowEscapeKey: false, // ESC no cierra toasts
+            allowEnterKey: false, // ENTER no cierra toasts
+            autoClose: true,
+            progressBar: true,
             ...opts,
         });
     }
+    /**
+     * Alerta crítica que siempre aparece encima de todo
+     */
+    critical(options) {
+        const opts = typeof options === 'string'
+            ? { message: options, title: '¡Atención!' }
+            : { title: '¡Atención!', ...options };
+        return this.fire({
+            ...opts,
+            type: 'error',
+            forceToTop: true,
+            disableClose: true,
+            closeOnBackdropClick: false,
+            allowEscapeKey: false,
+        });
+    }
     /**
      * Cerrar todos los diálogos abiertos
      */
     closeAll() {
         this.dialog.closeAll();
     }
+    /**
+     * Cerrar solo los toasts activos (mantener otros diálogos abiertos)
+     */
+    closeAllToasts() {
+        this.zIndexService.closeAllToasts();
+    }
+    /**
+     * Obtener el número de toasts activos
+     */
+    getActiveToastCount() {
+        return this.zIndexService.getActiveToastCount();
+    }
     getDialogPosition(position) {
         const positions = {
             top: { top: '20px' },