@acontplus/ng-components 2.1.23 → 2.1.26

package/fesm2022/acontplus-ng-components.mjs

@@ -351,12 +351,11 @@ class DialogZIndexService {
     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 para un tipo específico de diálogo
-     * @param type Tipo de diálogo (normal, alert, toast)
+     * @param type Tipo de diálogo (normal, alert)
      * @returns El próximo z-index a usar
      */
     getNextZIndex(type = 'normal') {
@@ -413,20 +412,8 @@ class DialogZIndexService {
                     // 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';
-                        }
-                    }
                 }
-                // Los toasts no tienen backdrop, pero si existe, configurarlo
-                if (backdrop && type !== 'toast') {
+                if (backdrop) {
                     backdrop.style.zIndex = (targetZIndex + 1).toString();
                 }
             }
@@ -474,32 +461,6 @@ class DialogZIndexService {
             }
         }, 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' });
 }
@@ -1800,23 +1761,23 @@ class AlertDialogService {
         showConfirmButton: true,
         showCancelButton: false,
         showDenyButton: false,
-        confirmText: 'OK',
-        cancelText: 'Cancelar',
-        denyText: 'No',
+        buttons: {
+            confirm: { text: 'OK', focus: true },
+            cancel: { text: 'Cancelar' },
+            deny: { text: 'No' },
+        },
         disableClose: false,
         closeOnBackdropClick: true,
         allowEscapeKey: true,
         allowEnterKey: true,
         timerProgressBar: false,
         reverseButtons: false,
-        focusConfirm: true,
         scrollbarPadding: true,
         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',
         contentAlignment: 'left',
@@ -1825,8 +1786,6 @@ class AlertDialogService {
         closeButtonPosition: 'top-right',
         animation: 'fade',
         animationDuration: 300,
-        autoClose: true,
-        progressBar: true,
     };
     /**
      * Configurar opciones por defecto para todos los diálogos
@@ -1849,16 +1808,17 @@ class AlertDialogService {
             showConfirmButton: true,
             showCancelButton: false,
             showDenyButton: false,
-            confirmText: 'OK',
-            cancelText: 'Cancelar',
-            denyText: 'No',
+            buttons: {
+                confirm: { text: 'OK', focus: true },
+                cancel: { text: 'Cancelar' },
+                deny: { text: 'No' },
+            },
             disableClose: false,
             closeOnBackdropClick: true,
             allowEscapeKey: true,
             allowEnterKey: true,
             timerProgressBar: false,
             reverseButtons: false,
-            focusConfirm: true,
             scrollbarPadding: true,
             position: 'center',
             draggable: false,
@@ -1869,6 +1829,10 @@ class AlertDialogService {
             iconPosition: 'left',
             contentAlignment: 'left',
             actionsAlignment: 'end',
+            showCloseButton: true,
+            closeButtonPosition: 'top-right',
+            animation: 'fade',
+            animationDuration: 300,
         };
     }
     /**
@@ -1880,26 +1844,8 @@ class AlertDialogService {
         if (!mergedOptions.allowMultiple) {
             this.closeAllAlertDialogs();
         }
-        // Configuración especial para modo toast
-        if (mergedOptions.layout === 'toast') {
-            mergedOptions.width = mergedOptions.width || '350px';
-            mergedOptions.showConfirmButton = mergedOptions.showConfirmButton ?? false;
-            mergedOptions.timer = mergedOptions.timer || 4000;
-            mergedOptions.timerProgressBar = mergedOptions.progressBar ?? true;
-            // Si no se especificó position, usar por defecto para toasts
-            if (!mergedOptions.position) {
-                mergedOptions.position = 'top-end'; // Por defecto top-right para toasts
-            }
-            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.layout === 'toast' ? 'toast' : 'alert');
+        const dialogType = mergedOptions.dialogType || 'alert';
         // Calcular posición del diálogo
         const position = this.getDialogPosition(mergedOptions.position || 'center');
         const dialogRef = this.dialog.open(AlertDialog, {
@@ -1913,9 +1859,9 @@ class AlertDialogService {
             backdropClass: mergedOptions.backdropClass,
             position,
             closeOnNavigation: true,
-            autoFocus: mergedOptions.focusConfirm !== false,
+            autoFocus: mergedOptions.buttons?.confirm?.focus !== false,
             restoreFocus: true,
-            hasBackdrop: mergedOptions.layout !== 'toast', // Los toasts NO tienen backdrop
+            hasBackdrop: true,
         });
         // Trackear este AlertDialog
         this.openAlertDialogs.push(dialogRef);
@@ -2036,8 +1982,11 @@ class AlertDialogService {
             ...opts,
             type: 'question',
             showCancelButton: true,
-            confirmText: opts.confirmText || 'Sí',
-            cancelText: opts.cancelText || 'No',
+            buttons: {
+                confirm: { text: 'Sí', ...opts.buttons?.confirm },
+                cancel: { text: 'No', ...opts.buttons?.cancel },
+                ...opts.buttons,
+            },
         });
     }
     /**
@@ -2062,34 +2011,11 @@ class AlertDialogService {
             ...opts,
             type: 'delete',
             showCancelButton: true,
-            confirmText: opts.confirmText || 'Eliminar',
-            cancelText: opts.cancelText || 'Cancelar',
-            confirmButtonVariant: 'danger',
-        });
-    }
-    /**
-     * Toast notification (auto-cierre, posición personalizada, no-intrusivo)
-     */
-    toast(options) {
-        const opts = typeof options === 'string' ? { message: options } : options;
-        return this.fire({
-            // Valores por defecto que pueden ser sobrescritos
-            timer: 3000,
-            showConfirmButton: false,
-            position: 'bottom-start', // Valor por defecto
-            width: '350px',
-            layout: 'toast', // Usar layout en lugar de toastMode
-            dialogType: 'toast',
-            forceToTop: false,
-            allowMultiple: true,
-            disableClose: true,
-            closeOnBackdropClick: false,
-            allowEscapeKey: false,
-            allowEnterKey: false,
-            autoClose: true,
-            progressBar: true,
-            // Los valores del usuario sobrescriben los por defecto
-            ...opts,
+            buttons: {
+                confirm: { text: 'Eliminar', variant: 'danger', ...opts.buttons?.confirm },
+                cancel: { text: 'Cancelar', ...opts.buttons?.cancel },
+                ...opts.buttons,
+            },
         });
     }
     /**
@@ -2132,18 +2058,6 @@ class AlertDialogService {
         // También limpiar nuestro tracking
         this.openAlertDialogs = [];
     }
-    /**
-     * 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' },
@@ -2159,32 +2073,28 @@ class AlertDialogService {
         return positions[position] || {};
     }
     getPanelClasses(options) {
-        const classes = ['alert-dialog-container'];
+        const classes = ['acp-alert-dialog-container'];
         if (options.customClass) {
             classes.push(options.customClass);
         }
         if (options.draggable) {
-            classes.push('draggable-dialog');
+            classes.push('acp-draggable-dialog');
         }
         // Agregar clases para layout
         if (options.layout) {
-            classes.push(`layout-${options.layout}`);
+            classes.push(`acp-layout-${options.layout}`);
         }
         // Agregar clases para posición de icono
         if (options.iconPosition) {
-            classes.push(`icon-${options.iconPosition}`);
+            classes.push(`acp-icon-${options.iconPosition}`);
         }
         // Agregar clases para alineación de contenido
         if (options.contentAlignment) {
-            classes.push(`content-${options.contentAlignment}`);
-        }
-        // Agregar clase para modo toast
-        if (options.layout === 'toast') {
-            classes.push('toast-mode');
+            classes.push(`acp-content-${options.contentAlignment}`);
         }
         // Agregar clase para animación
         if (options.animation) {
-            classes.push(`animation-${options.animation}`);
+            classes.push(`acp-animation-${options.animation}`);
         }
         if (options.panelClass) {
             if (Array.isArray(options.panelClass)) {
@@ -4912,7 +4822,7 @@ function throwAcpPopoverInvalidPositionEnd() {
 const ACP_POPOVER_DEFAULT_OPTIONS = new InjectionToken('acp-popover-default-options', {
     providedIn: 'root',
     factory: () => ({
-        backdropClass: 'cdk-overlay-transparent-backdrop',
+        backdropClass: 'cdk-overlay-dark-backdrop',
     }),
 });
 let popoverPanelUid = 0;
@@ -5611,8 +5521,16 @@ class AcpPopoverTrigger {
         const overlayRef = this._createOverlay();
         const overlayConfig = overlayRef.getConfig();
         this._setPosition(overlayConfig.positionStrategy);
+        // Configure backdrop based on trigger event and user preference
         if (this.popover.triggerEvent === 'click') {
             overlayConfig.hasBackdrop = this.popover.hasBackdrop ?? true;
+            overlayConfig.backdropClass = this.popover.backdropClass;
+        }
+        else if (this.popover.triggerEvent === 'hover') {
+            // For hover events, backdrop must be disabled to prevent flickering
+            // The backdrop interferes with mouse events and causes infinite open/close cycles
+            overlayConfig.hasBackdrop = false;
+            // Note: User's hasBackdrop setting is ignored for hover to prevent UX issues
         }
         overlayRef.attach(this._getPortal());
         if (this.popover.lazyContent) {
@@ -6080,10 +5998,13 @@ class AlertDialog {
             dismiss: 'close',
         });
     }
+    getButtonConfig(buttonType) {
+        return this.data.buttons?.[buttonType] || {};
+    }
     getButtonVariant(buttonType) {
-        const variant = this.data[`${buttonType}ButtonVariant`];
-        if (variant)
-            return variant;
+        const config = this.getButtonConfig(buttonType);
+        if (config.variant)
+            return config.variant;
         // Default variants based on button type and alert type
         if (buttonType === 'confirm') {
             switch (this.data.type) {
@@ -6112,9 +6033,9 @@ class AlertDialog {
         return 'primary';
     }
     getButtonIcon(buttonType) {
-        const icon = this.data[`${buttonType}ButtonIcon`];
-        if (icon)
-            return icon;
+        const config = this.getButtonConfig(buttonType);
+        if (config.icon)
+            return config.icon;
         // Default icons based on button type
         switch (buttonType) {
             case 'confirm':
@@ -6128,8 +6049,32 @@ class AlertDialog {
         }
     }
     getButtonStyle(buttonType) {
-        const style = this.data[`${buttonType}ButtonStyle`];
-        return style || 'elevated';
+        const config = this.getButtonConfig(buttonType);
+        return config.style || 'elevated';
+    }
+    getButtonText(buttonType) {
+        const config = this.getButtonConfig(buttonType);
+        if (config.text)
+            return config.text;
+        // Default text based on button type
+        switch (buttonType) {
+            case 'confirm':
+                return 'OK';
+            case 'cancel':
+                return 'Cancelar';
+            case 'deny':
+                return 'No';
+            default:
+                return 'OK';
+        }
+    }
+    getButtonDisabled(buttonType) {
+        const config = this.getButtonConfig(buttonType);
+        return config.disabled || false;
+    }
+    getButtonFocus(buttonType) {
+        const config = this.getButtonConfig(buttonType);
+        return config.focus || buttonType === 'confirm';
     }
     getActionsAlignment() {
         // Si hay una configuración específica de alineación de acciones, usarla
@@ -6232,53 +6177,35 @@ class AlertDialog {
             this.onConfirm();
         }
     }
-    getConfirmColor() {
-        if (!this.data.confirmButtonColor)
-            return 'primary';
-        if (['primary', 'accent', 'warn'].includes(this.data.confirmButtonColor)) {
-            return this.data.confirmButtonColor;
+    getButtonColor(buttonType, isBackground = false) {
+        const config = this.getButtonConfig(buttonType);
+        const color = config.color;
+        if (!color) {
+            return buttonType === 'confirm' ? 'primary' : undefined;
+        }
+        const materialColors = ['primary', 'accent', 'warn'];
+        if (isBackground) {
+            return materialColors.includes(color) ? undefined : color;
         }
-        return undefined;
+        return materialColors.includes(color) ? color : undefined;
+    }
+    getConfirmColor() {
+        return this.getButtonColor('confirm');
     }
     getCancelColor() {
-        if (!this.data.cancelButtonColor)
-            return undefined;
-        if (['primary', 'accent', 'warn'].includes(this.data.cancelButtonColor)) {
-            return this.data.cancelButtonColor;
-        }
-        return undefined;
+        return this.getButtonColor('cancel');
     }
     getDenyColor() {
-        if (!this.data.denyButtonColor)
-            return undefined;
-        if (['primary', 'accent', 'warn'].includes(this.data.denyButtonColor)) {
-            return this.data.denyButtonColor;
-        }
-        return undefined;
+        return this.getButtonColor('deny');
     }
     getConfirmBackgroundColor() {
-        if (!this.data.confirmButtonColor)
-            return undefined;
-        if (['primary', 'accent', 'warn'].includes(this.data.confirmButtonColor)) {
-            return undefined;
-        }
-        return this.data.confirmButtonColor;
+        return this.getButtonColor('confirm', true);
     }
     getCancelBackgroundColor() {
-        if (!this.data.cancelButtonColor)
-            return undefined;
-        if (['primary', 'accent', 'warn'].includes(this.data.cancelButtonColor)) {
-            return undefined;
-        }
-        return this.data.cancelButtonColor;
+        return this.getButtonColor('cancel', true);
     }
     getDenyBackgroundColor() {
-        if (!this.data.denyButtonColor)
-            return undefined;
-        if (['primary', 'accent', 'warn'].includes(this.data.denyButtonColor)) {
-            return undefined;
-        }
-        return this.data.denyButtonColor;
+        return this.getButtonColor('deny', true);
     }
     // ===== CDK DRAG FUNCTIONALITY =====
     /**
@@ -6290,7 +6217,7 @@ class AlertDialog {
         this.zIndexService.bringToFront(this.elementRef.nativeElement);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AlertDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AlertDialog, isStandalone: true, selector: "acp-alert-dialog", viewQueries: [{ propertyName: "inputField", first: true, predicate: ["inputField"], descendants: true }, { propertyName: "dialogTitle", first: true, predicate: ["dialogTitle"], descendants: true }, { propertyName: "container", first: true, predicate: ["dynamicComponentContainer"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n  class=\"alert-dialog\"\n  [class.modern-layout]=\"data.layout === 'modern'\"\n  [class.toast-layout]=\"data.layout === 'toast'\"\n  [class.icon-left]=\"data.iconPosition === 'left'\"\n  [class.icon-center]=\"data.iconPosition === 'center'\"\n  [class.icon-top]=\"data.iconPosition === 'top'\"\n  [class.content-left]=\"data.contentAlignment === 'left'\"\n  [class.content-center]=\"data.contentAlignment === 'center'\"\n  [class.content-right]=\"data.contentAlignment === 'right'\"\n  [attr.aria-label]=\"data.ariaLabel\"\n  [attr.aria-describedby]=\"data.ariaDescribedBy\"\n>\n  <!-- Timer Progress Bar -->\n  @if (data.timer && (data.timerProgressBar || data.progressBar || data.layout === 'toast')) {\n  <mat-progress-bar\n    mode=\"determinate\"\n    [value]=\"timerProgress\"\n    class=\"timer-progress\"\n    [class.toast-progress]=\"data.layout === 'toast'\"\n  >\n  </mat-progress-bar>\n  }\n\n  <!-- Alert Header -->\n  @if (data.draggable) {\n  <div\n    class=\"acp-alert-header\"\n    cdkDrag\n    cdkDragRootElement=\".cdk-overlay-pane\"\n    cdkDragHandle\n    (mousedown)=\"bringToFront()\"\n  >\n    <!-- Icon -->\n    @if (data.type || data.icon) {\n    <div class=\"alert-dialog-icon\" [ngClass]=\"'icon-' + (data.type || 'custom')\">\n      <mat-icon class=\"icon-large\" [style.color]=\"data.iconColor\"> {{ getIconName() }} </mat-icon>\n    </div>\n    }\n\n    <!-- Toast Content (solo para modo toast) -->\n    @if (data.layout === 'toast') {\n    <!-- Title y Message en l\u00EDnea para toast -->\n    <div class=\"toast-content\">\n      @if (data.title) {\n      <span class=\"toast-title\" #dialogTitle>{{ data.title }}</span>\n      } @if (data.message) {\n      <span class=\"toast-message\">{{ data.message }}</span>\n      }\n    </div>\n    }\n\n    <!-- Close Button -->\n    @if (data.showCloseButton) {\n    <button\n      mat-icon-button\n      class=\"close-button\"\n      [class.top-right]=\"data.closeButtonPosition === 'top-right'\"\n      [class.top-left]=\"data.closeButtonPosition === 'top-left'\"\n      (click)=\"onClose()\"\n      aria-label=\"Cerrar\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n    }\n  </div>\n  } @else {\n  <div class=\"acp-alert-header\">\n    <!-- Icon -->\n    @if (data.type || data.icon) {\n    <div class=\"alert-dialog-icon\" [ngClass]=\"'icon-' + (data.type || 'custom')\">\n      <mat-icon class=\"icon-large\" [style.color]=\"data.iconColor\"> {{ getIconName() }} </mat-icon>\n    </div>\n    }\n\n    <!-- Toast Content (solo para modo toast) -->\n    @if (data.layout === 'toast') {\n    <!-- Title y Message en l\u00EDnea para toast -->\n    <div class=\"toast-content\">\n      @if (data.title) {\n      <span class=\"toast-title\" #dialogTitle>{{ data.title }}</span>\n      } @if (data.message) {\n      <span class=\"toast-message\">{{ data.message }}</span>\n      }\n    </div>\n    }\n\n    <!-- Close Button -->\n    @if (data.showCloseButton) {\n    <button\n      mat-icon-button\n      class=\"close-button\"\n      [class.top-right]=\"data.closeButtonPosition === 'top-right'\"\n      [class.top-left]=\"data.closeButtonPosition === 'top-left'\"\n      (click)=\"onClose()\"\n      aria-label=\"Cerrar\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n    }\n  </div>\n  }\n\n  <!-- Content (solo para modo normal, no toast) -->\n  @if (data.layout !== 'toast') {\n  <mat-dialog-content class=\"alert-dialog-content\">\n    <!-- Title -->\n    @if (data.title) {\n    <h2 class=\"alert-dialog-title\" #dialogTitle>{{ data.title }}</h2>\n    }\n    <!-- Image -->\n    @if (data.imageUrl) {\n    <div class=\"alert-dialog-image\">\n      <img\n        [src]=\"data.imageUrl\"\n        [alt]=\"data.imageAlt || 'Alert image'\"\n        [style.width]=\"data.imageWidth || 'auto'\"\n        [style.height]=\"data.imageHeight || 'auto'\"\n        [style.max-width]=\"data.imageWidth || '100%'\"\n      />\n    </div>\n    }\n\n    <!-- Dynamic Component -->\n    @if (data.component) {\n    <div #dynamicComponentContainer></div>\n    } @if (data.html) {\n    <div [innerHTML]=\"sanitizedHtml\"></div>\n    } @else if (data.message) {\n    <p class=\"alert-message\">{{ data.message }}</p>\n    }\n\n    <!-- Input Field -->\n    @if (data.input) {\n    <mat-form-field appearance=\"outline\" class=\"alert-input-field\">\n      @if (data.inputLabel) {\n      <mat-label>{{ data.inputLabel }}</mat-label>\n      } @if (data.input === 'textarea') {\n      <textarea\n        matInput\n        #inputField\n        [(ngModel)]=\"inputValue\"\n        [placeholder]=\"data.inputPlaceholder || ''\"\n        [type]=\"data.input\"\n        rows=\"4\"\n        (keyup.enter)=\"onInputEnter()\"\n        [attr.aria-invalid]=\"!!validationError\"\n      >\n      </textarea>\n      } @else {\n      <input\n        matInput\n        #inputField\n        [(ngModel)]=\"inputValue\"\n        [placeholder]=\"data.inputPlaceholder || ''\"\n        [type]=\"data.input\"\n        (keyup.enter)=\"onInputEnter()\"\n        [attr.aria-invalid]=\"!!validationError\"\n      />\n      } @if (validationError) {\n      <mat-error>{{ validationError }}</mat-error>\n      }\n    </mat-form-field>\n    }\n  </mat-dialog-content>\n  }\n\n  <!-- Actions (solo para modo normal, no toast) -->\n  @if (data.layout !== 'toast' && (data.showConfirmButton !== false || data.showCancelButton ||\n  data.showDenyButton)) {\n  <mat-dialog-actions\n    class=\"alert-dialog-actions\"\n    [class.reverse-buttons]=\"data.reverseButtons\"\n    [class.vertical-buttons]=\"data.verticalButtons\"\n    [align]=\"getActionsAlignment()\"\n  >\n    @if (data.showDenyButton) {\n    <acp-button\n      type=\"button\"\n      [matStyle]=\"getButtonStyle('deny')\"\n      [variant]=\"getButtonVariant('deny')\"\n      [icon]=\"getButtonIcon('deny')\"\n      (handleClick)=\"onDeny()\"\n      [text]=\"data.denyText || 'No'\"\n      [disabled]=\"data.disableDenyButton?? false\"\n      [class.spinning]=\"data.processing && data.processingButton === 'deny'\"\n      [class.full-width]=\"data.fullWidthButtons\"\n    />\n    } @if (data.showCancelButton) {\n    <acp-button\n      type=\"button\"\n      [matStyle]=\"getButtonStyle('cancel')\"\n      [variant]=\"getButtonVariant('cancel')\"\n      [icon]=\"getButtonIcon('cancel')\"\n      (handleClick)=\"onCancel()\"\n      [text]=\"data.cancelText || 'Cancel'\"\n      [disabled]=\"data.disableCancelButton??false\"\n      [class.spinning]=\"data.processing && data.processingButton === 'cancel'\"\n      [class.full-width]=\"data.fullWidthButtons\"\n    />\n    } @if (data.showConfirmButton !== false) {\n    <acp-button\n      type=\"button\"\n      [matStyle]=\"getButtonStyle('confirm')\"\n      [variant]=\"getButtonVariant('confirm')\"\n      [icon]=\"getButtonIcon('confirm')\"\n      (handleClick)=\"onConfirm()\"\n      [text]=\"data.confirmText || 'OK'\"\n      [disabled]=\"data.disableConfirmButton?? false\"\n      [class.spinning]=\"data.processing && data.processingButton === 'confirm'\"\n      [class.full-width]=\"data.fullWidthButtons\"\n      [autofocus]=\"data.focusConfirm\"\n    />\n    }\n  </mat-dialog-actions>\n  }\n\n  <!-- Footer -->\n  @if (data.footer || data.footerHtml) {\n  <div class=\"alert-dialog-footer\">\n    @if (data.footerHtml) {\n    <div [innerHTML]=\"sanitizedFooter\"></div>\n    } @else { {{ data.footer }} }\n  </div>\n  }\n</div>\n", styles: [".alert-dialog{position:relative;overflow:hidden;padding:0;display:flex;flex-direction:column;border-radius:16px}.acp-alert-header{display:flex;align-items:flex-start;justify-content:space-between;padding:24px 24px 0;position:relative}.acp-alert-header .alert-dialog-icon{margin:4px 0 0;flex-shrink:0}.alert-dialog-title{margin:0 0 12px;font-size:20px;font-weight:600;line-height:1.2;color:#1a1a1a;text-align:left}.alert-dialog-content{text-align:left}.alert-dialog-content .alert-message{margin:0;font-size:16px;line-height:1.4;color:#666}.alert-dialog-actions{margin:24px;padding:0;gap:12px}.alert-dialog-actions.reverse-buttons{flex-direction:row-reverse}.alert-dialog-actions.vertical-buttons{flex-direction:column;align-items:stretch}.alert-dialog-actions.vertical-buttons.reverse-buttons{flex-direction:column-reverse}.close-button{position:relative;z-index:10;width:40px;height:40px;margin:0;background-color:#0000000d;border-radius:50%}.close-button mat-icon{font-size:20px;width:20px;height:20px;color:#0009}.close-button:hover{background-color:#0000001a}.alert-dialog.modern-layout .acp-alert-header{padding:24px 24px 0}.alert-dialog.modern-layout .acp-alert-header .alert-dialog-icon{margin-right:16px}.alert-dialog.modern-layout .acp-alert-header .alert-dialog-icon .icon-large{font-size:48px;width:48px;height:48px}.alert-dialog.toast-layout{border-radius:8px}.alert-dialog.toast-layout .acp-alert-header{padding:16px;align-items:center;gap:12px}.alert-dialog.toast-layout .acp-alert-header .alert-dialog-icon{margin:0;flex-shrink:0}.alert-dialog.toast-layout .acp-alert-header .alert-dialog-icon .icon-large{font-size:24px;width:24px;height:24px}.alert-dialog.toast-layout .acp-alert-header .toast-content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.alert-dialog.toast-layout .acp-alert-header .toast-content .toast-title{font-size:14px;font-weight:600;line-height:1.2;color:#1a1a1a;margin:0}.alert-dialog.toast-layout .acp-alert-header .toast-content .toast-message{font-size:13px;line-height:1.3;color:#666;margin:0}.alert-dialog.toast-layout .acp-alert-header .close-button{margin:0;flex-shrink:0}.alert-dialog.toast-layout .alert-dialog-content,.alert-dialog.toast-layout .alert-dialog-actions{display:none}.alert-dialog.icon-center .acp-alert-header{flex-direction:column;text-align:center;align-items:center;padding:24px 24px 16px}.alert-dialog.icon-center .acp-alert-header .alert-dialog-icon{margin:0 0 16px}.alert-dialog.icon-center .acp-alert-header .close-button{position:absolute;top:16px;right:16px}.alert-dialog.icon-center .alert-dialog-title,.alert-dialog.icon-center .alert-dialog-content{text-align:center}.alert-dialog.icon-top .acp-alert-header{flex-direction:column;align-items:flex-start;padding:24px 24px 16px}.alert-dialog.icon-top .acp-alert-header .alert-dialog-icon{margin:0 0 16px}.alert-dialog.icon-top .acp-alert-header .close-button{position:absolute;top:16px;right:16px}.alert-dialog.content-left .alert-dialog-title,.alert-dialog.content-left .alert-dialog-content{text-align:left}.alert-dialog.content-center .acp-alert-header{justify-content:center}.alert-dialog.content-center .alert-dialog-title,.alert-dialog.content-center .alert-dialog-content{text-align:center}.alert-dialog.content-right .alert-dialog-title,.alert-dialog.content-right .alert-dialog-content{text-align:right}.timer-progress{position:absolute;top:0;left:0;right:0;height:4px;z-index:5;border-radius:0}.timer-progress.toast-progress{height:3px;border-radius:0}:host ::ng-deep .timer-progress .mdc-linear-progress__bar{transition:transform 50ms linear}:host ::ng-deep .timer-progress .mdc-linear-progress__buffer{background-color:#0000001a}.icon-success mat-icon{color:#10b981}.icon-error mat-icon{color:#ef4444}.icon-warning mat-icon{color:#f59e0b}.icon-info mat-icon{color:#3b82f6}.icon-question mat-icon{color:#8b5cf6}.icon-delete mat-icon{color:#ef4444}.alert-dialog-image{margin:1rem auto;display:flex;justify-content:center;align-items:center}.alert-dialog-image img{max-width:100%;border-radius:8px}.alert-input-field{width:100%;margin-top:1rem}.confirm-button,.cancel-button,.deny-button{min-width:100px}.cancel-button{color:#333}.alert-dialog-footer{margin:0 24px 24px;padding-top:1rem;border-top:1px solid #e0e0e0;font-size:.875rem;color:#666}.acp-alert-header[cdkDrag]{cursor:move;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.acp-alert-header[cdkDrag]:hover{background-color:#00000005}.cdk-drag-dragging{user-select:none!important;-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important}:host ::ng-deep .animation-fade .mat-mdc-dialog-container{animation:fadeIn .3s ease-out}:host ::ng-deep .animation-slide .mat-mdc-dialog-container{animation:slideIn .3s ease-out}:host ::ng-deep .animation-bounce .mat-mdc-dialog-container{animation:bounceIn .5s ease-out}:host ::ng-deep .animation-zoom .mat-mdc-dialog-container{animation:zoomIn .3s ease-out}:host ::ng-deep .toast-mode .mat-mdc-dialog-container{border-radius:8px;box-shadow:0 4px 12px #00000026;max-width:400px;animation:slideInRight .3s ease-out}:host ::ng-deep .layout-toast .mat-mdc-dialog-container{border-radius:8px;box-shadow:0 4px 12px #00000026;max-width:400px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes bounceIn{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.05)}70%{transform:scale(.9)}to{transform:scale(1);opacity:1}}@keyframes zoomIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i7.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: Button, selector: "acp-button", inputs: ["variant", "text", "icon", "disabled", "type", "matStyle", "customClass", "reportFormat", "extended", "title", "ariaLabel", "name", "id", "form", "tabIndex", "testId"], outputs: ["handleClick"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AlertDialog, isStandalone: true, selector: "acp-alert-dialog", viewQueries: [{ propertyName: "inputField", first: true, predicate: ["inputField"], descendants: true }, { propertyName: "dialogTitle", first: true, predicate: ["dialogTitle"], descendants: true }, { propertyName: "container", first: true, predicate: ["dynamicComponentContainer"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n  class=\"acp-alert-dialog\"\n  [class.modern-layout]=\"data.layout === 'modern'\"\n  [class.icon-left]=\"data.iconPosition === 'left'\"\n  [class.icon-center]=\"data.iconPosition === 'center'\"\n  [class.icon-top]=\"data.iconPosition === 'top'\"\n  [class.content-left]=\"data.contentAlignment === 'left'\"\n  [class.content-center]=\"data.contentAlignment === 'center'\"\n  [class.content-right]=\"data.contentAlignment === 'right'\"\n  [attr.aria-label]=\"data.ariaLabel\"\n  [attr.aria-describedby]=\"data.ariaDescribedBy\"\n>\n  <!-- Timer Progress Bar -->\n  @if (data.timer && data.timerProgressBar) {\n  <mat-progress-bar mode=\"determinate\" [value]=\"timerProgress\" class=\"timer-progress\">\n  </mat-progress-bar>\n  }\n\n  <!-- Alert Header -->\n  @if (data.draggable) {\n  <div\n    class=\"acp-alert-header\"\n    cdkDrag\n    cdkDragRootElement=\".cdk-overlay-pane\"\n    cdkDragHandle\n    (mousedown)=\"bringToFront()\"\n  >\n    <!-- Icon -->\n    @if (data.type || data.icon) {\n    <div class=\"acp-alert-dialog-icon\" [ngClass]=\"'icon-' + (data.type || 'custom')\">\n      <mat-icon class=\"icon-large\" [style.color]=\"data.iconColor\"> {{ getIconName() }} </mat-icon>\n    </div>\n    }\n\n    <!-- Close Button -->\n    @if (data.showCloseButton) {\n    <button\n      mat-icon-button\n      class=\"close-button\"\n      [class.top-right]=\"data.closeButtonPosition === 'top-right'\"\n      [class.top-left]=\"data.closeButtonPosition === 'top-left'\"\n      (click)=\"onClose()\"\n      aria-label=\"Cerrar\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n    }\n  </div>\n  } @else {\n  <div class=\"acp-alert-header\">\n    <!-- Icon -->\n    @if (data.type || data.icon) {\n    <div class=\"acp-alert-dialog-icon\" [ngClass]=\"'icon-' + (data.type || 'custom')\">\n      <mat-icon class=\"icon-large\" [style.color]=\"data.iconColor\"> {{ getIconName() }} </mat-icon>\n    </div>\n    }\n\n    <!-- Close Button -->\n    @if (data.showCloseButton) {\n    <button\n      mat-icon-button\n      class=\"close-button\"\n      [class.top-right]=\"data.closeButtonPosition === 'top-right'\"\n      [class.top-left]=\"data.closeButtonPosition === 'top-left'\"\n      (click)=\"onClose()\"\n      aria-label=\"Cerrar\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n    }\n  </div>\n  }\n\n  <!-- Content -->\n  <mat-dialog-content class=\"acp-alert-dialog-content\">\n    <!-- Title -->\n    @if (data.title) {\n    <h2 class=\"acp-alert-dialog-title\" #dialogTitle>{{ data.title }}</h2>\n    }\n    <!-- Image -->\n    @if (data.imageUrl) {\n    <div class=\"acp-alert-dialog-image\">\n      <img\n        [src]=\"data.imageUrl\"\n        [alt]=\"data.imageAlt || 'Alert image'\"\n        [style.width]=\"data.imageWidth || 'auto'\"\n        [style.height]=\"data.imageHeight || 'auto'\"\n        [style.max-width]=\"data.imageWidth || '100%'\"\n      />\n    </div>\n    }\n\n    <!-- Dynamic Component -->\n    @if (data.component) {\n    <div #dynamicComponentContainer></div>\n    } @if (data.html) {\n    <div [innerHTML]=\"sanitizedHtml\"></div>\n    } @else if (data.message) {\n    <p class=\"acp-alert-message\">{{ data.message }}</p>\n    }\n\n    <!-- Input Field -->\n    @if (data.input) {\n    <mat-form-field appearance=\"outline\" class=\"acp-alert-input-field\">\n      @if (data.inputLabel) {\n      <mat-label>{{ data.inputLabel }}</mat-label>\n      } @if (data.input === 'textarea') {\n      <textarea\n        matInput\n        #inputField\n        [(ngModel)]=\"inputValue\"\n        [placeholder]=\"data.inputPlaceholder || ''\"\n        [type]=\"data.input\"\n        rows=\"4\"\n        (keyup.enter)=\"onInputEnter()\"\n        [attr.aria-invalid]=\"!!validationError\"\n      >\n      </textarea>\n      } @else {\n      <input\n        matInput\n        #inputField\n        [(ngModel)]=\"inputValue\"\n        [placeholder]=\"data.inputPlaceholder || ''\"\n        [type]=\"data.input\"\n        (keyup.enter)=\"onInputEnter()\"\n        [attr.aria-invalid]=\"!!validationError\"\n      />\n      } @if (validationError) {\n      <mat-error>{{ validationError }}</mat-error>\n      }\n    </mat-form-field>\n    }\n  </mat-dialog-content>\n\n  <!-- Actions -->\n  @if (data.showConfirmButton !== false || data.showCancelButton || data.showDenyButton) {\n  <mat-dialog-actions\n    class=\"acp-alert-dialog-actions\"\n    [class.reverse-buttons]=\"data.reverseButtons\"\n    [class.vertical-buttons]=\"data.verticalButtons\"\n    [align]=\"getActionsAlignment()\"\n  >\n    @if (data.showDenyButton) {\n    <acp-button\n      type=\"button\"\n      [matStyle]=\"getButtonStyle('deny')\"\n      [variant]=\"getButtonVariant('deny')\"\n      [icon]=\"getButtonIcon('deny')\"\n      (handleClick)=\"onDeny()\"\n      [text]=\"getButtonText('deny')\"\n      [disabled]=\"getButtonDisabled('deny')\"\n      [class.spinning]=\"data.processing && data.processingButton === 'deny'\"\n      [class.full-width]=\"data.fullWidthButtons\"\n    />\n    } @if (data.showCancelButton) {\n    <acp-button\n      type=\"button\"\n      [matStyle]=\"getButtonStyle('cancel')\"\n      [variant]=\"getButtonVariant('cancel')\"\n      [icon]=\"getButtonIcon('cancel')\"\n      (handleClick)=\"onCancel()\"\n      [text]=\"getButtonText('cancel')\"\n      [disabled]=\"getButtonDisabled('cancel')\"\n      [class.spinning]=\"data.processing && data.processingButton === 'cancel'\"\n      [class.full-width]=\"data.fullWidthButtons\"\n    />\n    } @if (data.showConfirmButton !== false) {\n    <acp-button\n      type=\"button\"\n      [matStyle]=\"getButtonStyle('confirm')\"\n      [variant]=\"getButtonVariant('confirm')\"\n      [icon]=\"getButtonIcon('confirm')\"\n      (handleClick)=\"onConfirm()\"\n      [text]=\"getButtonText('confirm')\"\n      [disabled]=\"getButtonDisabled('confirm')\"\n      [class.spinning]=\"data.processing && data.processingButton === 'confirm'\"\n      [class.full-width]=\"data.fullWidthButtons\"\n      [autofocus]=\"getButtonFocus('confirm')\"\n    />\n    }\n  </mat-dialog-actions>\n  }\n\n  <!-- Footer -->\n  @if (data.footer || data.footerHtml) {\n  <div class=\"acp-alert-dialog-footer\">\n    @if (data.footerHtml) {\n    <div [innerHTML]=\"sanitizedFooter\"></div>\n    } @else { {{ data.footer }} }\n  </div>\n  }\n</div>\n", styles: [".acp-alert-dialog{position:relative;overflow:hidden;padding:0;display:flex;flex-direction:column;border-radius:16px}.acp-alert-header{display:flex;align-items:flex-start;justify-content:space-between;padding:24px 24px 0;position:relative}.acp-alert-header .acp-alert-dialog-icon{margin:4px 0 0;flex-shrink:0}.acp-alert-dialog-title{margin:0 0 12px;font-size:20px;font-weight:600;line-height:1.2;color:#1a1a1a;text-align:left}.acp-alert-dialog-content{text-align:left}.acp-alert-dialog-content .acp-alert-message{margin:0;font-size:16px;line-height:1.4;color:#666}.acp-alert-dialog-actions{margin:24px;padding:0;gap:12px}.acp-alert-dialog-actions.reverse-buttons{flex-direction:row-reverse}.acp-alert-dialog-actions.vertical-buttons{flex-direction:column;align-items:stretch}.acp-alert-dialog-actions.vertical-buttons.reverse-buttons{flex-direction:column-reverse}.close-button{position:relative;z-index:10;width:40px;height:40px;margin:0;background-color:#0000000d;border-radius:50%}.close-button mat-icon{font-size:20px;width:20px;height:20px;color:#0009}.close-button:hover{background-color:#0000001a}.acp-alert-dialog.modern-layout .acp-alert-header{padding:24px 24px 0}.acp-alert-dialog.modern-layout .acp-alert-header .acp-alert-dialog-icon{margin-right:16px}.acp-alert-dialog.modern-layout .acp-alert-header .acp-alert-dialog-icon .icon-large{font-size:48px;width:48px;height:48px}.acp-alert-dialog.icon-center .acp-alert-header{flex-direction:column;text-align:center;align-items:center;padding:24px 24px 16px}.acp-alert-dialog.icon-center .acp-alert-header .acp-alert-dialog-icon{margin:0 0 16px}.acp-alert-dialog.icon-center .acp-alert-header .close-button{position:absolute;top:16px;right:16px}.acp-alert-dialog.icon-center .acp-alert-dialog-title,.acp-alert-dialog.icon-center .acp-alert-dialog-content{text-align:center}.acp-alert-dialog.icon-top .acp-alert-header{flex-direction:column;align-items:flex-start;padding:24px 24px 16px}.acp-alert-dialog.icon-top .acp-alert-header .acp-alert-dialog-icon{margin:0 0 16px}.acp-alert-dialog.icon-top .acp-alert-header .close-button{position:absolute;top:16px;right:16px}.acp-alert-dialog.content-left .acp-alert-dialog-title,.acp-alert-dialog.content-left .acp-alert-dialog-content{text-align:left}.acp-alert-dialog.content-center .acp-alert-header{justify-content:center}.acp-alert-dialog.content-center .acp-alert-dialog-title,.acp-alert-dialog.content-center .acp-alert-dialog-content{text-align:center}.acp-alert-dialog.content-right .acp-alert-dialog-title,.acp-alert-dialog.content-right .acp-alert-dialog-content{text-align:right}.timer-progress{position:absolute;top:0;left:0;right:0;height:4px;z-index:5;border-radius:0}:host ::ng-deep .timer-progress .mdc-linear-progress__bar{transition:transform 50ms linear}:host ::ng-deep .timer-progress .mdc-linear-progress__buffer{background-color:#0000001a}.icon-success mat-icon{color:#10b981}.icon-error mat-icon{color:#ef4444}.icon-warning mat-icon{color:#f59e0b}.icon-info mat-icon{color:#3b82f6}.icon-question mat-icon{color:#8b5cf6}.icon-delete mat-icon{color:#ef4444}.acp-alert-dialog-image{margin:1rem auto;display:flex;justify-content:center;align-items:center}.acp-alert-dialog-image img{max-width:100%;border-radius:8px}.acp-alert-input-field{width:100%;margin-top:1rem}.acp-confirm-button,.acp-cancel-button,.acp-deny-button{min-width:100px}.acp-cancel-button{color:#333}.acp-alert-dialog-footer{margin:0 24px 24px;padding-top:1rem;border-top:1px solid #e0e0e0;font-size:.875rem;color:#666}.acp-alert-header[cdkDrag]{cursor:move;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.acp-alert-header[cdkDrag]:hover{background-color:#00000005}.cdk-drag-dragging{user-select:none!important;-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important}:host ::ng-deep .animation-fade .mat-mdc-dialog-container{animation:fadeIn .3s ease-out}:host ::ng-deep .animation-slide .mat-mdc-dialog-container{animation:slideIn .3s ease-out}:host ::ng-deep .animation-bounce .mat-mdc-dialog-container{animation:bounceIn .5s ease-out}:host ::ng-deep .animation-zoom .mat-mdc-dialog-container{animation:zoomIn .3s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes bounceIn{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.05)}70%{transform:scale(.9)}to{transform:scale(1);opacity:1}}@keyframes zoomIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i7.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: Button, selector: "acp-button", inputs: ["variant", "text", "icon", "disabled", "type", "matStyle", "customClass", "reportFormat", "extended", "title", "ariaLabel", "name", "id", "form", "tabIndex", "testId"], outputs: ["handleClick"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AlertDialog, decorators: [{
             type: Component,
@@ -6305,7 +6232,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         DragDropModule,
                         NgClass,
                         Button,
-                    ], changeDetection: ChangeDetectionStrategy.Default, template: "<div\n  class=\"alert-dialog\"\n  [class.modern-layout]=\"data.layout === 'modern'\"\n  [class.toast-layout]=\"data.layout === 'toast'\"\n  [class.icon-left]=\"data.iconPosition === 'left'\"\n  [class.icon-center]=\"data.iconPosition === 'center'\"\n  [class.icon-top]=\"data.iconPosition === 'top'\"\n  [class.content-left]=\"data.contentAlignment === 'left'\"\n  [class.content-center]=\"data.contentAlignment === 'center'\"\n  [class.content-right]=\"data.contentAlignment === 'right'\"\n  [attr.aria-label]=\"data.ariaLabel\"\n  [attr.aria-describedby]=\"data.ariaDescribedBy\"\n>\n  <!-- Timer Progress Bar -->\n  @if (data.timer && (data.timerProgressBar || data.progressBar || data.layout === 'toast')) {\n  <mat-progress-bar\n    mode=\"determinate\"\n    [value]=\"timerProgress\"\n    class=\"timer-progress\"\n    [class.toast-progress]=\"data.layout === 'toast'\"\n  >\n  </mat-progress-bar>\n  }\n\n  <!-- Alert Header -->\n  @if (data.draggable) {\n  <div\n    class=\"acp-alert-header\"\n    cdkDrag\n    cdkDragRootElement=\".cdk-overlay-pane\"\n    cdkDragHandle\n    (mousedown)=\"bringToFront()\"\n  >\n    <!-- Icon -->\n    @if (data.type || data.icon) {\n    <div class=\"alert-dialog-icon\" [ngClass]=\"'icon-' + (data.type || 'custom')\">\n      <mat-icon class=\"icon-large\" [style.color]=\"data.iconColor\"> {{ getIconName() }} </mat-icon>\n    </div>\n    }\n\n    <!-- Toast Content (solo para modo toast) -->\n    @if (data.layout === 'toast') {\n    <!-- Title y Message en l\u00EDnea para toast -->\n    <div class=\"toast-content\">\n      @if (data.title) {\n      <span class=\"toast-title\" #dialogTitle>{{ data.title }}</span>\n      } @if (data.message) {\n      <span class=\"toast-message\">{{ data.message }}</span>\n      }\n    </div>\n    }\n\n    <!-- Close Button -->\n    @if (data.showCloseButton) {\n    <button\n      mat-icon-button\n      class=\"close-button\"\n      [class.top-right]=\"data.closeButtonPosition === 'top-right'\"\n      [class.top-left]=\"data.closeButtonPosition === 'top-left'\"\n      (click)=\"onClose()\"\n      aria-label=\"Cerrar\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n    }\n  </div>\n  } @else {\n  <div class=\"acp-alert-header\">\n    <!-- Icon -->\n    @if (data.type || data.icon) {\n    <div class=\"alert-dialog-icon\" [ngClass]=\"'icon-' + (data.type || 'custom')\">\n      <mat-icon class=\"icon-large\" [style.color]=\"data.iconColor\"> {{ getIconName() }} </mat-icon>\n    </div>\n    }\n\n    <!-- Toast Content (solo para modo toast) -->\n    @if (data.layout === 'toast') {\n    <!-- Title y Message en l\u00EDnea para toast -->\n    <div class=\"toast-content\">\n      @if (data.title) {\n      <span class=\"toast-title\" #dialogTitle>{{ data.title }}</span>\n      } @if (data.message) {\n      <span class=\"toast-message\">{{ data.message }}</span>\n      }\n    </div>\n    }\n\n    <!-- Close Button -->\n    @if (data.showCloseButton) {\n    <button\n      mat-icon-button\n      class=\"close-button\"\n      [class.top-right]=\"data.closeButtonPosition === 'top-right'\"\n      [class.top-left]=\"data.closeButtonPosition === 'top-left'\"\n      (click)=\"onClose()\"\n      aria-label=\"Cerrar\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n    }\n  </div>\n  }\n\n  <!-- Content (solo para modo normal, no toast) -->\n  @if (data.layout !== 'toast') {\n  <mat-dialog-content class=\"alert-dialog-content\">\n    <!-- Title -->\n    @if (data.title) {\n    <h2 class=\"alert-dialog-title\" #dialogTitle>{{ data.title }}</h2>\n    }\n    <!-- Image -->\n    @if (data.imageUrl) {\n    <div class=\"alert-dialog-image\">\n      <img\n        [src]=\"data.imageUrl\"\n        [alt]=\"data.imageAlt || 'Alert image'\"\n        [style.width]=\"data.imageWidth || 'auto'\"\n        [style.height]=\"data.imageHeight || 'auto'\"\n        [style.max-width]=\"data.imageWidth || '100%'\"\n      />\n    </div>\n    }\n\n    <!-- Dynamic Component -->\n    @if (data.component) {\n    <div #dynamicComponentContainer></div>\n    } @if (data.html) {\n    <div [innerHTML]=\"sanitizedHtml\"></div>\n    } @else if (data.message) {\n    <p class=\"alert-message\">{{ data.message }}</p>\n    }\n\n    <!-- Input Field -->\n    @if (data.input) {\n    <mat-form-field appearance=\"outline\" class=\"alert-input-field\">\n      @if (data.inputLabel) {\n      <mat-label>{{ data.inputLabel }}</mat-label>\n      } @if (data.input === 'textarea') {\n      <textarea\n        matInput\n        #inputField\n        [(ngModel)]=\"inputValue\"\n        [placeholder]=\"data.inputPlaceholder || ''\"\n        [type]=\"data.input\"\n        rows=\"4\"\n        (keyup.enter)=\"onInputEnter()\"\n        [attr.aria-invalid]=\"!!validationError\"\n      >\n      </textarea>\n      } @else {\n      <input\n        matInput\n        #inputField\n        [(ngModel)]=\"inputValue\"\n        [placeholder]=\"data.inputPlaceholder || ''\"\n        [type]=\"data.input\"\n        (keyup.enter)=\"onInputEnter()\"\n        [attr.aria-invalid]=\"!!validationError\"\n      />\n      } @if (validationError) {\n      <mat-error>{{ validationError }}</mat-error>\n      }\n    </mat-form-field>\n    }\n  </mat-dialog-content>\n  }\n\n  <!-- Actions (solo para modo normal, no toast) -->\n  @if (data.layout !== 'toast' && (data.showConfirmButton !== false || data.showCancelButton ||\n  data.showDenyButton)) {\n  <mat-dialog-actions\n    class=\"alert-dialog-actions\"\n    [class.reverse-buttons]=\"data.reverseButtons\"\n    [class.vertical-buttons]=\"data.verticalButtons\"\n    [align]=\"getActionsAlignment()\"\n  >\n    @if (data.showDenyButton) {\n    <acp-button\n      type=\"button\"\n      [matStyle]=\"getButtonStyle('deny')\"\n      [variant]=\"getButtonVariant('deny')\"\n      [icon]=\"getButtonIcon('deny')\"\n      (handleClick)=\"onDeny()\"\n      [text]=\"data.denyText || 'No'\"\n      [disabled]=\"data.disableDenyButton?? false\"\n      [class.spinning]=\"data.processing && data.processingButton === 'deny'\"\n      [class.full-width]=\"data.fullWidthButtons\"\n    />\n    } @if (data.showCancelButton) {\n    <acp-button\n      type=\"button\"\n      [matStyle]=\"getButtonStyle('cancel')\"\n      [variant]=\"getButtonVariant('cancel')\"\n      [icon]=\"getButtonIcon('cancel')\"\n      (handleClick)=\"onCancel()\"\n      [text]=\"data.cancelText || 'Cancel'\"\n      [disabled]=\"data.disableCancelButton??false\"\n      [class.spinning]=\"data.processing && data.processingButton === 'cancel'\"\n      [class.full-width]=\"data.fullWidthButtons\"\n    />\n    } @if (data.showConfirmButton !== false) {\n    <acp-button\n      type=\"button\"\n      [matStyle]=\"getButtonStyle('confirm')\"\n      [variant]=\"getButtonVariant('confirm')\"\n      [icon]=\"getButtonIcon('confirm')\"\n      (handleClick)=\"onConfirm()\"\n      [text]=\"data.confirmText || 'OK'\"\n      [disabled]=\"data.disableConfirmButton?? false\"\n      [class.spinning]=\"data.processing && data.processingButton === 'confirm'\"\n      [class.full-width]=\"data.fullWidthButtons\"\n      [autofocus]=\"data.focusConfirm\"\n    />\n    }\n  </mat-dialog-actions>\n  }\n\n  <!-- Footer -->\n  @if (data.footer || data.footerHtml) {\n  <div class=\"alert-dialog-footer\">\n    @if (data.footerHtml) {\n    <div [innerHTML]=\"sanitizedFooter\"></div>\n    } @else { {{ data.footer }} }\n  </div>\n  }\n</div>\n", styles: [".alert-dialog{position:relative;overflow:hidden;padding:0;display:flex;flex-direction:column;border-radius:16px}.acp-alert-header{display:flex;align-items:flex-start;justify-content:space-between;padding:24px 24px 0;position:relative}.acp-alert-header .alert-dialog-icon{margin:4px 0 0;flex-shrink:0}.alert-dialog-title{margin:0 0 12px;font-size:20px;font-weight:600;line-height:1.2;color:#1a1a1a;text-align:left}.alert-dialog-content{text-align:left}.alert-dialog-content .alert-message{margin:0;font-size:16px;line-height:1.4;color:#666}.alert-dialog-actions{margin:24px;padding:0;gap:12px}.alert-dialog-actions.reverse-buttons{flex-direction:row-reverse}.alert-dialog-actions.vertical-buttons{flex-direction:column;align-items:stretch}.alert-dialog-actions.vertical-buttons.reverse-buttons{flex-direction:column-reverse}.close-button{position:relative;z-index:10;width:40px;height:40px;margin:0;background-color:#0000000d;border-radius:50%}.close-button mat-icon{font-size:20px;width:20px;height:20px;color:#0009}.close-button:hover{background-color:#0000001a}.alert-dialog.modern-layout .acp-alert-header{padding:24px 24px 0}.alert-dialog.modern-layout .acp-alert-header .alert-dialog-icon{margin-right:16px}.alert-dialog.modern-layout .acp-alert-header .alert-dialog-icon .icon-large{font-size:48px;width:48px;height:48px}.alert-dialog.toast-layout{border-radius:8px}.alert-dialog.toast-layout .acp-alert-header{padding:16px;align-items:center;gap:12px}.alert-dialog.toast-layout .acp-alert-header .alert-dialog-icon{margin:0;flex-shrink:0}.alert-dialog.toast-layout .acp-alert-header .alert-dialog-icon .icon-large{font-size:24px;width:24px;height:24px}.alert-dialog.toast-layout .acp-alert-header .toast-content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.alert-dialog.toast-layout .acp-alert-header .toast-content .toast-title{font-size:14px;font-weight:600;line-height:1.2;color:#1a1a1a;margin:0}.alert-dialog.toast-layout .acp-alert-header .toast-content .toast-message{font-size:13px;line-height:1.3;color:#666;margin:0}.alert-dialog.toast-layout .acp-alert-header .close-button{margin:0;flex-shrink:0}.alert-dialog.toast-layout .alert-dialog-content,.alert-dialog.toast-layout .alert-dialog-actions{display:none}.alert-dialog.icon-center .acp-alert-header{flex-direction:column;text-align:center;align-items:center;padding:24px 24px 16px}.alert-dialog.icon-center .acp-alert-header .alert-dialog-icon{margin:0 0 16px}.alert-dialog.icon-center .acp-alert-header .close-button{position:absolute;top:16px;right:16px}.alert-dialog.icon-center .alert-dialog-title,.alert-dialog.icon-center .alert-dialog-content{text-align:center}.alert-dialog.icon-top .acp-alert-header{flex-direction:column;align-items:flex-start;padding:24px 24px 16px}.alert-dialog.icon-top .acp-alert-header .alert-dialog-icon{margin:0 0 16px}.alert-dialog.icon-top .acp-alert-header .close-button{position:absolute;top:16px;right:16px}.alert-dialog.content-left .alert-dialog-title,.alert-dialog.content-left .alert-dialog-content{text-align:left}.alert-dialog.content-center .acp-alert-header{justify-content:center}.alert-dialog.content-center .alert-dialog-title,.alert-dialog.content-center .alert-dialog-content{text-align:center}.alert-dialog.content-right .alert-dialog-title,.alert-dialog.content-right .alert-dialog-content{text-align:right}.timer-progress{position:absolute;top:0;left:0;right:0;height:4px;z-index:5;border-radius:0}.timer-progress.toast-progress{height:3px;border-radius:0}:host ::ng-deep .timer-progress .mdc-linear-progress__bar{transition:transform 50ms linear}:host ::ng-deep .timer-progress .mdc-linear-progress__buffer{background-color:#0000001a}.icon-success mat-icon{color:#10b981}.icon-error mat-icon{color:#ef4444}.icon-warning mat-icon{color:#f59e0b}.icon-info mat-icon{color:#3b82f6}.icon-question mat-icon{color:#8b5cf6}.icon-delete mat-icon{color:#ef4444}.alert-dialog-image{margin:1rem auto;display:flex;justify-content:center;align-items:center}.alert-dialog-image img{max-width:100%;border-radius:8px}.alert-input-field{width:100%;margin-top:1rem}.confirm-button,.cancel-button,.deny-button{min-width:100px}.cancel-button{color:#333}.alert-dialog-footer{margin:0 24px 24px;padding-top:1rem;border-top:1px solid #e0e0e0;font-size:.875rem;color:#666}.acp-alert-header[cdkDrag]{cursor:move;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.acp-alert-header[cdkDrag]:hover{background-color:#00000005}.cdk-drag-dragging{user-select:none!important;-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important}:host ::ng-deep .animation-fade .mat-mdc-dialog-container{animation:fadeIn .3s ease-out}:host ::ng-deep .animation-slide .mat-mdc-dialog-container{animation:slideIn .3s ease-out}:host ::ng-deep .animation-bounce .mat-mdc-dialog-container{animation:bounceIn .5s ease-out}:host ::ng-deep .animation-zoom .mat-mdc-dialog-container{animation:zoomIn .3s ease-out}:host ::ng-deep .toast-mode .mat-mdc-dialog-container{border-radius:8px;box-shadow:0 4px 12px #00000026;max-width:400px;animation:slideInRight .3s ease-out}:host ::ng-deep .layout-toast .mat-mdc-dialog-container{border-radius:8px;box-shadow:0 4px 12px #00000026;max-width:400px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes bounceIn{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.05)}70%{transform:scale(.9)}to{transform:scale(1);opacity:1}}@keyframes zoomIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.Default, template: "<div\n  class=\"acp-alert-dialog\"\n  [class.modern-layout]=\"data.layout === 'modern'\"\n  [class.icon-left]=\"data.iconPosition === 'left'\"\n  [class.icon-center]=\"data.iconPosition === 'center'\"\n  [class.icon-top]=\"data.iconPosition === 'top'\"\n  [class.content-left]=\"data.contentAlignment === 'left'\"\n  [class.content-center]=\"data.contentAlignment === 'center'\"\n  [class.content-right]=\"data.contentAlignment === 'right'\"\n  [attr.aria-label]=\"data.ariaLabel\"\n  [attr.aria-describedby]=\"data.ariaDescribedBy\"\n>\n  <!-- Timer Progress Bar -->\n  @if (data.timer && data.timerProgressBar) {\n  <mat-progress-bar mode=\"determinate\" [value]=\"timerProgress\" class=\"timer-progress\">\n  </mat-progress-bar>\n  }\n\n  <!-- Alert Header -->\n  @if (data.draggable) {\n  <div\n    class=\"acp-alert-header\"\n    cdkDrag\n    cdkDragRootElement=\".cdk-overlay-pane\"\n    cdkDragHandle\n    (mousedown)=\"bringToFront()\"\n  >\n    <!-- Icon -->\n    @if (data.type || data.icon) {\n    <div class=\"acp-alert-dialog-icon\" [ngClass]=\"'icon-' + (data.type || 'custom')\">\n      <mat-icon class=\"icon-large\" [style.color]=\"data.iconColor\"> {{ getIconName() }} </mat-icon>\n    </div>\n    }\n\n    <!-- Close Button -->\n    @if (data.showCloseButton) {\n    <button\n      mat-icon-button\n      class=\"close-button\"\n      [class.top-right]=\"data.closeButtonPosition === 'top-right'\"\n      [class.top-left]=\"data.closeButtonPosition === 'top-left'\"\n      (click)=\"onClose()\"\n      aria-label=\"Cerrar\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n    }\n  </div>\n  } @else {\n  <div class=\"acp-alert-header\">\n    <!-- Icon -->\n    @if (data.type || data.icon) {\n    <div class=\"acp-alert-dialog-icon\" [ngClass]=\"'icon-' + (data.type || 'custom')\">\n      <mat-icon class=\"icon-large\" [style.color]=\"data.iconColor\"> {{ getIconName() }} </mat-icon>\n    </div>\n    }\n\n    <!-- Close Button -->\n    @if (data.showCloseButton) {\n    <button\n      mat-icon-button\n      class=\"close-button\"\n      [class.top-right]=\"data.closeButtonPosition === 'top-right'\"\n      [class.top-left]=\"data.closeButtonPosition === 'top-left'\"\n      (click)=\"onClose()\"\n      aria-label=\"Cerrar\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n    }\n  </div>\n  }\n\n  <!-- Content -->\n  <mat-dialog-content class=\"acp-alert-dialog-content\">\n    <!-- Title -->\n    @if (data.title) {\n    <h2 class=\"acp-alert-dialog-title\" #dialogTitle>{{ data.title }}</h2>\n    }\n    <!-- Image -->\n    @if (data.imageUrl) {\n    <div class=\"acp-alert-dialog-image\">\n      <img\n        [src]=\"data.imageUrl\"\n        [alt]=\"data.imageAlt || 'Alert image'\"\n        [style.width]=\"data.imageWidth || 'auto'\"\n        [style.height]=\"data.imageHeight || 'auto'\"\n        [style.max-width]=\"data.imageWidth || '100%'\"\n      />\n    </div>\n    }\n\n    <!-- Dynamic Component -->\n    @if (data.component) {\n    <div #dynamicComponentContainer></div>\n    } @if (data.html) {\n    <div [innerHTML]=\"sanitizedHtml\"></div>\n    } @else if (data.message) {\n    <p class=\"acp-alert-message\">{{ data.message }}</p>\n    }\n\n    <!-- Input Field -->\n    @if (data.input) {\n    <mat-form-field appearance=\"outline\" class=\"acp-alert-input-field\">\n      @if (data.inputLabel) {\n      <mat-label>{{ data.inputLabel }}</mat-label>\n      } @if (data.input === 'textarea') {\n      <textarea\n        matInput\n        #inputField\n        [(ngModel)]=\"inputValue\"\n        [placeholder]=\"data.inputPlaceholder || ''\"\n        [type]=\"data.input\"\n        rows=\"4\"\n        (keyup.enter)=\"onInputEnter()\"\n        [attr.aria-invalid]=\"!!validationError\"\n      >\n      </textarea>\n      } @else {\n      <input\n        matInput\n        #inputField\n        [(ngModel)]=\"inputValue\"\n        [placeholder]=\"data.inputPlaceholder || ''\"\n        [type]=\"data.input\"\n        (keyup.enter)=\"onInputEnter()\"\n        [attr.aria-invalid]=\"!!validationError\"\n      />\n      } @if (validationError) {\n      <mat-error>{{ validationError }}</mat-error>\n      }\n    </mat-form-field>\n    }\n  </mat-dialog-content>\n\n  <!-- Actions -->\n  @if (data.showConfirmButton !== false || data.showCancelButton || data.showDenyButton) {\n  <mat-dialog-actions\n    class=\"acp-alert-dialog-actions\"\n    [class.reverse-buttons]=\"data.reverseButtons\"\n    [class.vertical-buttons]=\"data.verticalButtons\"\n    [align]=\"getActionsAlignment()\"\n  >\n    @if (data.showDenyButton) {\n    <acp-button\n      type=\"button\"\n      [matStyle]=\"getButtonStyle('deny')\"\n      [variant]=\"getButtonVariant('deny')\"\n      [icon]=\"getButtonIcon('deny')\"\n      (handleClick)=\"onDeny()\"\n      [text]=\"getButtonText('deny')\"\n      [disabled]=\"getButtonDisabled('deny')\"\n      [class.spinning]=\"data.processing && data.processingButton === 'deny'\"\n      [class.full-width]=\"data.fullWidthButtons\"\n    />\n    } @if (data.showCancelButton) {\n    <acp-button\n      type=\"button\"\n      [matStyle]=\"getButtonStyle('cancel')\"\n      [variant]=\"getButtonVariant('cancel')\"\n      [icon]=\"getButtonIcon('cancel')\"\n      (handleClick)=\"onCancel()\"\n      [text]=\"getButtonText('cancel')\"\n      [disabled]=\"getButtonDisabled('cancel')\"\n      [class.spinning]=\"data.processing && data.processingButton === 'cancel'\"\n      [class.full-width]=\"data.fullWidthButtons\"\n    />\n    } @if (data.showConfirmButton !== false) {\n    <acp-button\n      type=\"button\"\n      [matStyle]=\"getButtonStyle('confirm')\"\n      [variant]=\"getButtonVariant('confirm')\"\n      [icon]=\"getButtonIcon('confirm')\"\n      (handleClick)=\"onConfirm()\"\n      [text]=\"getButtonText('confirm')\"\n      [disabled]=\"getButtonDisabled('confirm')\"\n      [class.spinning]=\"data.processing && data.processingButton === 'confirm'\"\n      [class.full-width]=\"data.fullWidthButtons\"\n      [autofocus]=\"getButtonFocus('confirm')\"\n    />\n    }\n  </mat-dialog-actions>\n  }\n\n  <!-- Footer -->\n  @if (data.footer || data.footerHtml) {\n  <div class=\"acp-alert-dialog-footer\">\n    @if (data.footerHtml) {\n    <div [innerHTML]=\"sanitizedFooter\"></div>\n    } @else { {{ data.footer }} }\n  </div>\n  }\n</div>\n", styles: [".acp-alert-dialog{position:relative;overflow:hidden;padding:0;display:flex;flex-direction:column;border-radius:16px}.acp-alert-header{display:flex;align-items:flex-start;justify-content:space-between;padding:24px 24px 0;position:relative}.acp-alert-header .acp-alert-dialog-icon{margin:4px 0 0;flex-shrink:0}.acp-alert-dialog-title{margin:0 0 12px;font-size:20px;font-weight:600;line-height:1.2;color:#1a1a1a;text-align:left}.acp-alert-dialog-content{text-align:left}.acp-alert-dialog-content .acp-alert-message{margin:0;font-size:16px;line-height:1.4;color:#666}.acp-alert-dialog-actions{margin:24px;padding:0;gap:12px}.acp-alert-dialog-actions.reverse-buttons{flex-direction:row-reverse}.acp-alert-dialog-actions.vertical-buttons{flex-direction:column;align-items:stretch}.acp-alert-dialog-actions.vertical-buttons.reverse-buttons{flex-direction:column-reverse}.close-button{position:relative;z-index:10;width:40px;height:40px;margin:0;background-color:#0000000d;border-radius:50%}.close-button mat-icon{font-size:20px;width:20px;height:20px;color:#0009}.close-button:hover{background-color:#0000001a}.acp-alert-dialog.modern-layout .acp-alert-header{padding:24px 24px 0}.acp-alert-dialog.modern-layout .acp-alert-header .acp-alert-dialog-icon{margin-right:16px}.acp-alert-dialog.modern-layout .acp-alert-header .acp-alert-dialog-icon .icon-large{font-size:48px;width:48px;height:48px}.acp-alert-dialog.icon-center .acp-alert-header{flex-direction:column;text-align:center;align-items:center;padding:24px 24px 16px}.acp-alert-dialog.icon-center .acp-alert-header .acp-alert-dialog-icon{margin:0 0 16px}.acp-alert-dialog.icon-center .acp-alert-header .close-button{position:absolute;top:16px;right:16px}.acp-alert-dialog.icon-center .acp-alert-dialog-title,.acp-alert-dialog.icon-center .acp-alert-dialog-content{text-align:center}.acp-alert-dialog.icon-top .acp-alert-header{flex-direction:column;align-items:flex-start;padding:24px 24px 16px}.acp-alert-dialog.icon-top .acp-alert-header .acp-alert-dialog-icon{margin:0 0 16px}.acp-alert-dialog.icon-top .acp-alert-header .close-button{position:absolute;top:16px;right:16px}.acp-alert-dialog.content-left .acp-alert-dialog-title,.acp-alert-dialog.content-left .acp-alert-dialog-content{text-align:left}.acp-alert-dialog.content-center .acp-alert-header{justify-content:center}.acp-alert-dialog.content-center .acp-alert-dialog-title,.acp-alert-dialog.content-center .acp-alert-dialog-content{text-align:center}.acp-alert-dialog.content-right .acp-alert-dialog-title,.acp-alert-dialog.content-right .acp-alert-dialog-content{text-align:right}.timer-progress{position:absolute;top:0;left:0;right:0;height:4px;z-index:5;border-radius:0}:host ::ng-deep .timer-progress .mdc-linear-progress__bar{transition:transform 50ms linear}:host ::ng-deep .timer-progress .mdc-linear-progress__buffer{background-color:#0000001a}.icon-success mat-icon{color:#10b981}.icon-error mat-icon{color:#ef4444}.icon-warning mat-icon{color:#f59e0b}.icon-info mat-icon{color:#3b82f6}.icon-question mat-icon{color:#8b5cf6}.icon-delete mat-icon{color:#ef4444}.acp-alert-dialog-image{margin:1rem auto;display:flex;justify-content:center;align-items:center}.acp-alert-dialog-image img{max-width:100%;border-radius:8px}.acp-alert-input-field{width:100%;margin-top:1rem}.acp-confirm-button,.acp-cancel-button,.acp-deny-button{min-width:100px}.acp-cancel-button{color:#333}.acp-alert-dialog-footer{margin:0 24px 24px;padding-top:1rem;border-top:1px solid #e0e0e0;font-size:.875rem;color:#666}.acp-alert-header[cdkDrag]{cursor:move;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.acp-alert-header[cdkDrag]:hover{background-color:#00000005}.cdk-drag-dragging{user-select:none!important;-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important}:host ::ng-deep .animation-fade .mat-mdc-dialog-container{animation:fadeIn .3s ease-out}:host ::ng-deep .animation-slide .mat-mdc-dialog-container{animation:slideIn .3s ease-out}:host ::ng-deep .animation-bounce .mat-mdc-dialog-container{animation:bounceIn .5s ease-out}:host ::ng-deep .animation-zoom .mat-mdc-dialog-container{animation:zoomIn .3s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes bounceIn{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.05)}70%{transform:scale(.9)}to{transform:scale(1);opacity:1}}@keyframes zoomIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { inputField: [{
                 type: ViewChild,
                 args: ['inputField']