@acontplus/ng-components 2.1.12 → 2.1.14

package/fesm2022/acontplus-ng-components.mjs

@@ -1,12 +1,13 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, output, ViewEncapsulation, Component, inject, viewChild, ViewContainerRef, ChangeDetectionStrategy, effect, Injectable, computed, PLATFORM_ID, signal, Input, TemplateRef, Pipe, Directive, ViewChild, KeyValueDiffers, ChangeDetectorRef, InjectionToken, ANIMATION_MODULE_TYPE, HostListener, ContentChildren, model, forwardRef, EventEmitter, ApplicationRef, Injector, DOCUMENT, ElementRef, NgZone, ContentChild, Output, EnvironmentInjector, createComponent, Renderer2 } from '@angular/core';
+import { input, booleanAttribute, output, ViewEncapsulation, Component, Injectable, inject, viewChild, ViewContainerRef, ChangeDetectionStrategy, effect, computed, PLATFORM_ID, signal, Input, TemplateRef, Pipe, Directive, ViewChild, KeyValueDiffers, ChangeDetectorRef, InjectionToken, ANIMATION_MODULE_TYPE, HostListener, ContentChildren, model, forwardRef, EventEmitter, ApplicationRef, Injector, DOCUMENT, ElementRef, NgZone, ContentChild, Output, Renderer2, createComponent, EnvironmentInjector } from '@angular/core';
 import * as i1 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import * as i2 from '@angular/material/button';
 import { MatButtonModule, MatButton, MatMiniFabButton, MatIconButton, MatFabButton } from '@angular/material/button';
 import * as i3 from '@angular/material/icon';
 import { MatIconModule, MatIcon } from '@angular/material/icon';
-import { CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
+import * as i7 from '@angular/cdk/drag-drop';
+import { CdkDrag, CdkDragHandle, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i2$1 from '@angular/material/dialog';
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule, MatDialog, MatDialogConfig } from '@angular/material/dialog';
 import { NgClass, NgTemplateOutlet, isPlatformBrowser, AsyncPipe, DecimalPipe, CurrencyPipe, PercentPipe, DatePipe } from '@angular/common';
@@ -29,9 +30,9 @@ import * as i1$2 from '@angular/cdk/overlay';
 import { Overlay, OverlayModule, OverlayConfig } from '@angular/cdk/overlay';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { ComponentPortal, CdkPortalOutlet, TemplatePortal, DomPortalOutlet } from '@angular/cdk/portal';
-import * as i4 from '@angular/material/input';
+import * as i5 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i5 from '@angular/material/progress-bar';
+import * as i6 from '@angular/material/progress-bar';
 import { MatProgressBarModule, MatProgressBar } from '@angular/material/progress-bar';
 import * as i2$3 from '@angular/material/tooltip';
 import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
@@ -340,6 +341,81 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                     ], encapsulation: ViewEncapsulation.None, template: "@switch (matStyle()) { @case ('text') {\n<button\n  matButton\n  [ngClass]=\"getButtonClasses()\"\n  [disabled]=\"disabled()\"\n  [type]=\"type()\"\n  [title]=\"getTitle()\"\n  [attr.aria-label]=\"ariaLabel() || getTitle()\"\n  [attr.name]=\"name()\"\n  [attr.id]=\"id()\"\n  [attr.form]=\"form()\"\n  [attr.tabindex]=\"tabIndex()\"\n  [attr.data-testid]=\"testId()\"\n  (click)=\"handleClick.emit($event)\"\n>\n  <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('elevated') {\n<button\n  matButton=\"elevated\"\n  [ngClass]=\"getButtonClasses()\"\n  [disabled]=\"disabled()\"\n  [type]=\"type()\"\n  [title]=\"getTitle()\"\n  [attr.aria-label]=\"ariaLabel() || getTitle()\"\n  [attr.name]=\"name()\"\n  [attr.id]=\"id()\"\n  [attr.form]=\"form()\"\n  [attr.tabindex]=\"tabIndex()\"\n  [attr.data-testid]=\"testId()\"\n  (click)=\"handleClick.emit($event)\"\n>\n  <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('outlined') {\n<button\n  matButton=\"outlined\"\n  [ngClass]=\"getButtonClasses()\"\n  [disabled]=\"disabled()\"\n  [type]=\"type()\"\n  [title]=\"getTitle()\"\n  [attr.aria-label]=\"ariaLabel() || getTitle()\"\n  [attr.name]=\"name()\"\n  [attr.id]=\"id()\"\n  [attr.form]=\"form()\"\n  [attr.tabindex]=\"tabIndex()\"\n  [attr.data-testid]=\"testId()\"\n  (click)=\"handleClick.emit($event)\"\n>\n  <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('tonal') {\n<button\n  matButton=\"tonal\"\n  [ngClass]=\"getButtonClasses()\"\n  [disabled]=\"disabled()\"\n  [type]=\"type()\"\n  [title]=\"getTitle()\"\n  [attr.aria-label]=\"ariaLabel() || getTitle()\"\n  [attr.name]=\"name()\"\n  [attr.id]=\"id()\"\n  [attr.form]=\"form()\"\n  [attr.tabindex]=\"tabIndex()\"\n  [attr.data-testid]=\"testId()\"\n  (click)=\"handleClick.emit($event)\"\n>\n  <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('icon') {\n<button\n  matIconButton\n  [ngClass]=\"getButtonClasses()\"\n  [disabled]=\"disabled()\"\n  [type]=\"type()\"\n  [title]=\"getTitle()\"\n  [attr.aria-label]=\"ariaLabel() || getTitle()\"\n  [attr.name]=\"name()\"\n  [attr.id]=\"id()\"\n  [attr.form]=\"form()\"\n  [attr.tabindex]=\"tabIndex()\"\n  [attr.data-testid]=\"testId()\"\n  (click)=\"handleClick.emit($event)\"\n>\n  <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('fab') {\n<button\n  matFab\n  [ngClass]=\"getButtonClasses()\"\n  [disabled]=\"disabled()\"\n  [type]=\"type()\"\n  [title]=\"getTitle()\"\n  [attr.aria-label]=\"ariaLabel() || getTitle()\"\n  [attr.name]=\"name()\"\n  [attr.id]=\"id()\"\n  [attr.form]=\"form()\"\n  [attr.tabindex]=\"tabIndex()\"\n  [attr.data-testid]=\"testId()\"\n  (click)=\"handleClick.emit($event)\"\n>\n  <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('mini-fab') {\n<button\n  matMiniFab\n  [ngClass]=\"getButtonClasses()\"\n  [disabled]=\"disabled()\"\n  [type]=\"type()\"\n  [title]=\"getTitle()\"\n  [attr.aria-label]=\"ariaLabel() || getTitle()\"\n  [attr.name]=\"name()\"\n  [attr.id]=\"id()\"\n  [attr.form]=\"form()\"\n  [attr.tabindex]=\"tabIndex()\"\n  [attr.data-testid]=\"testId()\"\n  (click)=\"handleClick.emit($event)\"\n>\n  <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('extended-fab') {\n<button\n  matFab\n  extended\n  [ngClass]=\"getButtonClasses()\"\n  [disabled]=\"disabled()\"\n  [type]=\"type()\"\n  [title]=\"getTitle()\"\n  [attr.aria-label]=\"ariaLabel() || getTitle()\"\n  [attr.name]=\"name()\"\n  [attr.id]=\"id()\"\n  [attr.form]=\"form()\"\n  [attr.tabindex]=\"tabIndex()\"\n  [attr.data-testid]=\"testId()\"\n  (click)=\"handleClick.emit($event)\"\n>\n  <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @default {\n<button\n  matButton=\"filled\"\n  [ngClass]=\"getButtonClasses()\"\n  [disabled]=\"disabled()\"\n  [type]=\"type()\"\n  [title]=\"getTitle()\"\n  [attr.aria-label]=\"ariaLabel() || getTitle()\"\n  [attr.name]=\"name()\"\n  [attr.id]=\"id()\"\n  [attr.form]=\"form()\"\n  [attr.tabindex]=\"tabIndex()\"\n  [attr.data-testid]=\"testId()\"\n  (click)=\"handleClick.emit($event)\"\n>\n  <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} }\n\n<ng-template #buttonContent>\n  @if (getIcon()) {\n  <mat-icon>{{ getIcon() }}</mat-icon>\n  } @if (getDisplayText()) { {{ getDisplayText() }} }\n\n  <ng-content />\n</ng-template>\n", styles: [":root{--acp-secondary: #e0e0e0;--acp-secondary-on: #000000;--acp-success: #4caf50;--acp-success-on: #ffffff;--acp-danger: #ba1a1a;--acp-danger-on: #ffffff;--acp-warning: #ff9800;--acp-warning-on: #000000;--acp-info: #2196f3;--acp-info-on: #ffffff;--acp-dark: #212121;--acp-dark-on: #ffffff}.dark-theme{--acp-secondary: #424242;--acp-secondary-on: #ffffff;--acp-success: #81c784;--acp-success-on: #1b5e20;--acp-danger: #ef5350;--acp-danger-on: #b71c1c;--acp-warning: #ffb74d;--acp-warning-on: #e65100;--acp-info: #64b5f6;--acp-info-on: #0d47a1;--acp-dark: #616161;--acp-dark-on: #ffffff}acp-button{display:inline-block}.mat-mdc-button .mdc-button__label,.mat-mdc-unelevated-button .mdc-button__label,.mat-mdc-raised-button .mdc-button__label,.mat-mdc-outlined-button .mdc-button__label,button[matbutton=tonal] .mdc-button__label,.mat-mdc-fab.mdc-fab--extended .mdc-button__label{display:flex;align-items:center;gap:8px}.mat-mdc-button.mat-btn-secondary,.mat-mdc-unelevated-button.mat-btn-secondary{background-color:var(--acp-secondary)!important;color:var(--acp-secondary-on)!important}.mat-mdc-button.mat-btn-secondary:hover,.mat-mdc-unelevated-button.mat-btn-secondary:hover{background-color:color-mix(in srgb,var(--acp-secondary) 80%,black)!important}.mat-mdc-button.mat-btn-success,.mat-mdc-unelevated-button.mat-btn-success{background-color:var(--acp-success)!important;color:var(--acp-success-on)!important}.mat-mdc-button.mat-btn-danger,.mat-mdc-unelevated-button.mat-btn-danger{background-color:var(--acp-danger)!important;color:var(--acp-danger-on)!important}.mat-mdc-button.mat-btn-warning,.mat-mdc-unelevated-button.mat-btn-warning{background-color:var(--acp-warning)!important;color:var(--acp-warning-on)!important}.mat-mdc-button.mat-btn-info,.mat-mdc-unelevated-button.mat-btn-info{background-color:var(--acp-info)!important;color:var(--acp-info-on)!important}.mat-mdc-button.mat-btn-dark,.mat-mdc-unelevated-button.mat-btn-dark{background-color:var(--acp-dark)!important;color:var(--acp-dark-on)!important}button[matbutton=tonal].mat-btn-success{background-color:color-mix(in srgb,var(--acp-success) 12%,transparent)!important;color:var(--acp-success)!important}button[matbutton=tonal].mat-btn-danger{background-color:color-mix(in srgb,var(--acp-danger) 12%,transparent)!important;color:var(--acp-danger)!important}button[matbutton=tonal].mat-btn-warning{background-color:color-mix(in srgb,var(--acp-warning) 12%,transparent)!important;color:var(--acp-warning)!important}button[matbutton=tonal].mat-btn-info{background-color:color-mix(in srgb,var(--acp-info) 12%,transparent)!important;color:var(--acp-info)!important}button[matbutton=tonal].mat-btn-dark{background-color:color-mix(in srgb,var(--acp-dark) 12%,transparent)!important;color:var(--acp-dark)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-secondary{color:var(--mat-sys-on-surface)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-success{color:var(--acp-success)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-danger{color:var(--acp-danger)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-warning{color:var(--acp-warning)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-info{color:var(--acp-info)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-dark{color:var(--acp-dark)!important}.mat-mdc-raised-button.mat-btn-secondary{background-color:var(--mat-sys-surface-container-low)!important;color:var(--mat-sys-on-surface)!important}.mat-mdc-raised-button.mat-btn-success{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-success)!important}.mat-mdc-raised-button.mat-btn-success:hover{background-color:color-mix(in srgb,var(--acp-success) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-danger{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-danger)!important}.mat-mdc-raised-button.mat-btn-danger:hover{background-color:color-mix(in srgb,var(--acp-danger) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-warning{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-warning)!important}.mat-mdc-raised-button.mat-btn-warning:hover{background-color:color-mix(in srgb,var(--acp-warning) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-info{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-info)!important}.mat-mdc-raised-button.mat-btn-info:hover{background-color:color-mix(in srgb,var(--acp-info) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-dark{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-dark)!important}.mat-mdc-raised-button.mat-btn-dark:hover{background-color:color-mix(in srgb,var(--acp-dark) 12%,transparent)!important}.mat-mdc-outlined-button.mat-btn-secondary{border-color:var(--mat-sys-outline)!important;color:var(--mat-sys-on-surface)!important}.mat-mdc-outlined-button.mat-btn-success{border-color:var(--acp-success)!important;color:var(--acp-success)!important}.mat-mdc-outlined-button.mat-btn-danger{border-color:var(--acp-danger)!important;color:var(--acp-danger)!important}.mat-mdc-outlined-button.mat-btn-warning{border-color:var(--acp-warning)!important;color:var(--acp-warning)!important}.mat-mdc-outlined-button.mat-btn-info{border-color:var(--acp-info)!important;color:var(--acp-info)!important}.mat-mdc-outlined-button.mat-btn-dark{border-color:var(--acp-dark)!important;color:var(--acp-dark)!important}.mat-mdc-fab.mat-btn-secondary,.mat-mdc-mini-fab.mat-btn-secondary{background-color:var(--acp-secondary)!important;color:var(--acp-secondary-on)!important}.mat-mdc-fab.mat-btn-success,.mat-mdc-mini-fab.mat-btn-success{background-color:var(--acp-success)!important;color:var(--acp-success-on)!important}.mat-mdc-fab.mat-btn-danger,.mat-mdc-mini-fab.mat-btn-danger{background-color:var(--acp-danger)!important;color:var(--acp-danger-on)!important}.mat-mdc-fab.mat-btn-warning,.mat-mdc-mini-fab.mat-btn-warning{background-color:var(--acp-warning)!important;color:var(--acp-warning-on)!important}.mat-mdc-fab.mat-btn-info,.mat-mdc-mini-fab.mat-btn-info{background-color:var(--acp-info)!important;color:var(--acp-info-on)!important}.mat-mdc-fab.mat-btn-dark,.mat-mdc-mini-fab.mat-btn-dark{background-color:var(--acp-dark)!important;color:var(--acp-dark-on)!important}.mat-mdc-icon-button.mat-btn-secondary{color:var(--mat-sys-on-surface)!important}.mat-mdc-icon-button.mat-btn-success{color:var(--acp-success)!important}.mat-mdc-icon-button.mat-btn-danger{color:var(--acp-danger)!important}.mat-mdc-icon-button.mat-btn-warning{color:var(--acp-warning)!important}.mat-mdc-icon-button.mat-btn-info{color:var(--acp-info)!important}.mat-mdc-icon-button.mat-btn-dark{color:var(--acp-dark)!important}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], matStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "matStyle", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }], reportFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "reportFormat", required: false }] }], extended: [{ type: i0.Input, args: [{ isSignal: true, alias: "extended", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], handleClick: [{ type: i0.Output, args: ["handleClick"] }] } });
 
+/**
+ * Servicio centralizado para manejar z-index de todos los diálogos
+ * Asegura que los diálogos siempre aparezcan en el orden correcto
+ */
+class DialogZIndexService {
+    static currentZIndex = 1000;
+    static Z_INDEX_INCREMENT = 10;
+    /**
+     * Obtiene el siguiente z-index disponible
+     * @returns El próximo z-index a usar
+     */
+    getNextZIndex() {
+        DialogZIndexService.currentZIndex += DialogZIndexService.Z_INDEX_INCREMENT;
+        return DialogZIndexService.currentZIndex;
+    }
+    /**
+     * Obtiene el z-index actual más alto
+     * @returns El z-index más alto actualmente en uso
+     */
+    getCurrentZIndex() {
+        return DialogZIndexService.currentZIndex;
+    }
+    /**
+     * Resetea el contador de z-index (útil para testing)
+     */
+    reset() {
+        DialogZIndexService.currentZIndex = 1000;
+    }
+    /**
+     * 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())
+     */
+    applyZIndex(dialogRef, zIndex) {
+        const targetZIndex = zIndex || this.getNextZIndex();
+        setTimeout(() => {
+            const overlayRef = dialogRef._overlayRef;
+            if (overlayRef) {
+                const pane = overlayRef.overlayElement;
+                const backdrop = overlayRef.backdropElement;
+                if (pane) {
+                    pane.style.zIndex = (targetZIndex + 2).toString();
+                }
+                if (backdrop) {
+                    backdrop.style.zIndex = (targetZIndex + 1).toString();
+                }
+            }
+        }, 0);
+    }
+    /**
+     * Trae un diálogo al frente (usado por drag functionality)
+     * @param element Elemento del diálogo a traer al frente
+     */
+    bringToFront(element) {
+        const pane = element.closest('.cdk-overlay-pane');
+        if (pane) {
+            const newZIndex = this.getNextZIndex();
+            pane.style.zIndex = (newZIndex + 2).toString();
+            // También actualizar el backdrop si existe
+            const backdrop = pane.parentElement?.querySelector('.cdk-overlay-backdrop');
+            if (backdrop) {
+                backdrop.style.zIndex = (newZIndex + 1).toString();
+            }
+        }
+    }
+    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' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DialogZIndexService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 /**
  * A wrapper component for Angular Material dialogs that provides a consistent look and feel,
  * including a draggable header and the ability to dynamically create components inside the dialog.
@@ -349,21 +425,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 class DialogWrapper {
     dialogRef = inject(MatDialogRef);
     config = inject(MAT_DIALOG_DATA);
+    zIndexService = inject(DialogZIndexService);
     /**
      * A template reference that acts as an anchor for dynamic content.
      * This is where the component specified in the config will be rendered.
      */
-    contentHost = viewChild.required('contentHost', { read: ViewContainerRef });
+    contentHost = viewChild.required('contentHost', {
+        read: ViewContainerRef,
+    });
     /**
      * A reference to the header element for the z-index focus logic.
      * Used to bring the dialog to the front when clicked.
      */
     header = viewChild('dialogHeader', ...(ngDevMode ? [{ debugName: "header" }] : []));
-    /**
-     * Static counter to track the highest z-index for multiple dialogs.
-     * Ensures that the most recently clicked dialog appears on top.
-     */
-    static lastZIndex = 1000;
     /**
      * Timeout ID for debouncing z-index updates to prevent excessive DOM manipulations.
      */
@@ -409,22 +483,14 @@ class DialogWrapper {
     }
     /**
      * Brings the dialog to the front by adjusting its z-index.
-     * Uses requestAnimationFrame to debounce updates and prevent excessive DOM manipulations.
+     * Uses the centralized DialogZIndexService for consistent z-index management.
      * Called when the dialog header is clicked.
      */
     bringToFront() {
-        // Clear any pending update
-        if (this.bringToFrontTimeoutId !== null) {
-            cancelAnimationFrame(this.bringToFrontTimeoutId);
+        const headerElement = this.header()?.nativeElement;
+        if (headerElement) {
+            this.zIndexService.bringToFront(headerElement);
         }
-        // Schedule the z-index update for the next animation frame
-        this.bringToFrontTimeoutId = requestAnimationFrame(() => {
-            const pane = this.header()?.nativeElement.closest('.cdk-overlay-pane');
-            if (pane) {
-                pane.style.zIndex = (++DialogWrapper.lastZIndex).toString();
-            }
-            this.bringToFrontTimeoutId = null;
-        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DialogWrapper, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DialogWrapper, isStandalone: true, selector: "acp-dialog-wrapper", viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "header", first: true, predicate: ["dialogHeader"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (!config.hideHeader) {\n<div\n  class=\"acp-dialog-header\"\n  cdkDrag\n  cdkDragRootElement=\".cdk-overlay-pane\"\n  cdkDragHandle\n  #dialogHeader\n  (mousedown)=\"bringToFront()\"\n>\n  <h6 mat-dialog-title class=\"acp-dialog-title\">\n    @if (config.icon) {\n    <mat-icon class=\"acp-dialog-title-icon\" aria-hidden=\"true\">{{ config.icon }}</mat-icon>\n    }\n    <span>{{ config.title }}</span>\n    @if (config.showCloseButton !== false) {\n    <acp-button\n      [customClass]=\"'acp-dialog-close-btn'\"\n      matStyle=\"icon\"\n      icon=\"close\"\n      (handleClick)=\"onClose()\"\n      ariaLabel=\"Close Dialog\"\n    />\n    }\n  </h6>\n</div>\n}\n\n<ng-template #contentHost />\n", styles: [".acp-dialog-header{cursor:move;border-bottom:1px solid var(--mat-sys-outline-variant, #dee2e6);color:var(--mat-sys-on-surface, #212529);position:relative}h6[mat-dialog-title].acp-dialog-title{display:flex;align-items:center;font-size:1.2rem;font-weight:500;margin:0;width:100%;padding-right:48px}.acp-dialog-title-icon{margin-right:12px;vertical-align:middle}h6[mat-dialog-title].acp-dialog-title span{flex-grow:1}mat-dialog-content{padding:24px}.acp-dialog-close-btn{position:absolute;top:8px;right:16px}\n"], dependencies: [{ kind: "directive", type: 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: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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.OnPush, encapsulation: i0.ViewEncapsulation.None });
@@ -432,7 +498,9 @@ class DialogWrapper {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DialogWrapper, decorators: [{
             type: Component,
             args: [{ selector: 'acp-dialog-wrapper', standalone: true, imports: [CdkDrag, CdkDragHandle, MatDialogModule, MatIconModule, Button], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (!config.hideHeader) {\n<div\n  class=\"acp-dialog-header\"\n  cdkDrag\n  cdkDragRootElement=\".cdk-overlay-pane\"\n  cdkDragHandle\n  #dialogHeader\n  (mousedown)=\"bringToFront()\"\n>\n  <h6 mat-dialog-title class=\"acp-dialog-title\">\n    @if (config.icon) {\n    <mat-icon class=\"acp-dialog-title-icon\" aria-hidden=\"true\">{{ config.icon }}</mat-icon>\n    }\n    <span>{{ config.title }}</span>\n    @if (config.showCloseButton !== false) {\n    <acp-button\n      [customClass]=\"'acp-dialog-close-btn'\"\n      matStyle=\"icon\"\n      icon=\"close\"\n      (handleClick)=\"onClose()\"\n      ariaLabel=\"Close Dialog\"\n    />\n    }\n  </h6>\n</div>\n}\n\n<ng-template #contentHost />\n", styles: [".acp-dialog-header{cursor:move;border-bottom:1px solid var(--mat-sys-outline-variant, #dee2e6);color:var(--mat-sys-on-surface, #212529);position:relative}h6[mat-dialog-title].acp-dialog-title{display:flex;align-items:center;font-size:1.2rem;font-weight:500;margin:0;width:100%;padding-right:48px}.acp-dialog-title-icon{margin-right:12px;vertical-align:middle}h6[mat-dialog-title].acp-dialog-title span{flex-grow:1}mat-dialog-content{padding:24px}.acp-dialog-close-btn{position:absolute;top:8px;right:16px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { contentHost: [{ type: i0.ViewChild, args: ['contentHost', { ...{ read: ViewContainerRef }, isSignal: true }] }], header: [{ type: i0.ViewChild, args: ['dialogHeader', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { contentHost: [{ type: i0.ViewChild, args: ['contentHost', { ...{
+                            read: ViewContainerRef,
+                        }, isSignal: true }] }], header: [{ type: i0.ViewChild, args: ['dialogHeader', { isSignal: true }] }] } });
 
 class DynamicSelect {
     // Basic inputs
@@ -997,6 +1065,7 @@ class AdvancedDialogService {
     dialog = inject(MatDialog);
     overlay = inject(Overlay);
     breakpointObserver = inject(BreakpointObserver);
+    zIndexService = inject(DialogZIndexService);
     // An observable that emits true if the viewport matches mobile dimensions.
     isMobile$ = this.breakpointObserver
         .observe([Breakpoints.HandsetPortrait, Breakpoints.HandsetLandscape])
@@ -1010,7 +1079,10 @@ class AdvancedDialogService {
      */
     async open(component, config = {}) {
         const dialogConfig = await this.buildDialogConfig(config);
-        return this.dialog.open(component, dialogConfig);
+        const dialogRef = this.dialog.open(component, dialogConfig);
+        // Aplicar z-index centralizado
+        this.zIndexService.applyZIndex(dialogRef);
+        return dialogRef;
     }
     /**
      * A powerful helper to open a component inside our standard, branded "wrapper".
@@ -1026,7 +1098,10 @@ class AdvancedDialogService {
             data: wrapperConfig,
         };
         const dialogConfig = await this.buildDialogConfig(configWithWrapperData);
-        return this.dialog.open(DialogWrapper, dialogConfig);
+        const dialogRef = this.dialog.open(DialogWrapper, dialogConfig);
+        // Aplicar z-index centralizado
+        this.zIndexService.applyZIndex(dialogRef);
+        return dialogRef;
     }
     /**
      * Helper to open a dialog and only get an observable of the result.
@@ -1623,6 +1698,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 
 class AlertDialogService {
     dialog = inject(MatDialog);
+    zIndexService = inject(DialogZIndexService);
     defaultOptions = {
         width: '400px',
         showConfirmButton: true,
@@ -1639,7 +1715,21 @@ class AlertDialogService {
         reverseButtons: false,
         focusConfirm: true,
         scrollbarPadding: true,
-        position: 'center'
+        position: 'center',
+        draggable: false,
+        allowMultiple: false, // Por defecto no permitir múltiples alerts
+        // Nuevas opciones por defecto
+        layout: 'modern',
+        iconPosition: 'left',
+        contentAlignment: 'left',
+        showCloseButton: true,
+        closeButtonPosition: 'top-right',
+        animation: 'fade',
+        animationDuration: 300,
+        toastMode: false,
+        toastPosition: 'top-right',
+        autoClose: true,
+        progressBar: true,
     };
     /**
      * Configurar opciones por defecto para todos los diálogos
@@ -1673,7 +1763,9 @@ class AlertDialogService {
             reverseButtons: false,
             focusConfirm: true,
             scrollbarPadding: true,
-            position: 'center'
+            position: 'center',
+            draggable: false,
+            allowMultiple: false,
         };
     }
     /**
@@ -1681,8 +1773,24 @@ class AlertDialogService {
      */
     fire(options) {
         const mergedOptions = { ...this.defaultOptions, ...options };
+        // Si allowMultiple es false (por defecto), cerrar todos los diálogos existentes
+        if (!mergedOptions.allowMultiple) {
+            this.closeAll();
+        }
+        // Configuración especial para modo toast
+        if (mergedOptions.toastMode) {
+            mergedOptions.width = mergedOptions.width || '350px';
+            mergedOptions.showConfirmButton = mergedOptions.showConfirmButton ?? false;
+            mergedOptions.timer = mergedOptions.timer || 4000;
+            mergedOptions.timerProgressBar = mergedOptions.progressBar ?? true;
+            mergedOptions.position = this.getToastPosition(mergedOptions.toastPosition || 'top-right');
+            mergedOptions.disableClose = false;
+            mergedOptions.animation = mergedOptions.animation || 'slide';
+        }
         // Calcular posición del diálogo
-        const position = this.getDialogPosition(mergedOptions.position || 'center');
+        const position = mergedOptions.toastMode
+            ? this.getToastDialogPosition(mergedOptions.toastPosition || 'top-right')
+            : this.getDialogPosition(mergedOptions.position || 'center');
         const dialogRef = this.dialog.open(AlertDialog, {
             width: mergedOptions.width,
             minWidth: mergedOptions.minWidth,
@@ -1696,8 +1804,10 @@ class AlertDialogService {
             closeOnNavigation: true,
             autoFocus: mergedOptions.focusConfirm !== false,
             restoreFocus: true,
-            hasBackdrop: true
+            hasBackdrop: !mergedOptions.toastMode,
         });
+        // Aplicar z-index dinámico usando el servicio centralizado
+        this.zIndexService.applyZIndex(dialogRef);
         // Callbacks de ciclo de vida
         if (mergedOptions.willOpen) {
             mergedOptions.willOpen();
@@ -1714,7 +1824,7 @@ class AlertDialogService {
                         isConfirmed: true,
                         isDismissed: false,
                         isDenied: false,
-                        dismiss: 'timer'
+                        dismiss: 'timer',
                     });
                 }
             }, mergedOptions.timer);
@@ -1800,7 +1910,7 @@ class AlertDialogService {
             type: 'question',
             showCancelButton: true,
             confirmText: opts.confirmText || 'Sí',
-            cancelText: opts.cancelText || 'No'
+            cancelText: opts.cancelText || 'No',
         });
     }
     /**
@@ -1811,23 +1921,37 @@ class AlertDialogService {
             type: 'question',
             showCancelButton: true,
             ...options,
-            input: options.input || 'text'
+            input: options.input || 'text',
+        });
+    }
+    /**
+     * Diálogo de confirmación para eliminar
+     */
+    delete(options) {
+        const opts = typeof options === 'string'
+            ? { message: options, title: '¿Eliminar elemento?' }
+            : { title: '¿Eliminar elemento?', ...options };
+        return this.fire({
+            ...opts,
+            type: 'delete',
+            showCancelButton: true,
+            confirmText: opts.confirmText || 'Eliminar',
+            cancelText: opts.cancelText || 'Cancelar',
+            confirmButtonVariant: 'danger',
         });
     }
     /**
      * Toast notification (auto-cierre, posición personalizada)
      */
     toast(options) {
-        const opts = typeof options === 'string'
-            ? { message: options }
-            : options;
+        const opts = typeof options === 'string' ? { message: options } : options;
         return this.fire({
             timer: 3000,
             timerProgressBar: true,
             showConfirmButton: false,
             position: 'top-end',
             width: '350px',
-            ...opts
+            ...opts,
         });
     }
     /**
@@ -1838,15 +1962,15 @@ class AlertDialogService {
     }
     getDialogPosition(position) {
         const positions = {
-            'top': { top: '20px' },
+            top: { top: '20px' },
             'top-start': { top: '20px', left: '20px' },
             'top-end': { top: '20px', right: '20px' },
-            'center': {},
+            center: {},
             'center-start': { left: '20px' },
             'center-end': { right: '20px' },
-            'bottom': { bottom: '20px' },
+            bottom: { bottom: '20px' },
             'bottom-start': { bottom: '20px', left: '20px' },
-            'bottom-end': { bottom: '20px', right: '20px' }
+            'bottom-end': { bottom: '20px', right: '20px' },
         };
         return positions[position] || {};
     }
@@ -1855,6 +1979,29 @@ class AlertDialogService {
         if (options.customClass) {
             classes.push(options.customClass);
         }
+        if (options.draggable) {
+            classes.push('draggable-dialog');
+        }
+        // Agregar clases para layout
+        if (options.layout) {
+            classes.push(`layout-${options.layout}`);
+        }
+        // Agregar clases para posición de icono
+        if (options.iconPosition) {
+            classes.push(`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.toastMode) {
+            classes.push('toast-mode');
+        }
+        // Agregar clase para animación
+        if (options.animation) {
+            classes.push(`animation-${options.animation}`);
+        }
         if (options.panelClass) {
             if (Array.isArray(options.panelClass)) {
                 classes.push(...options.panelClass);
@@ -1865,13 +2012,35 @@ class AlertDialogService {
         }
         return classes;
     }
+    getToastPosition(position) {
+        const positionMap = {
+            'top-right': 'top-end',
+            'top-left': 'top-start',
+            'bottom-right': 'bottom-end',
+            'bottom-left': 'bottom-start',
+            'top-center': 'top',
+            'bottom-center': 'bottom',
+        };
+        return positionMap[position] || 'top-end';
+    }
+    getToastDialogPosition(position) {
+        const positions = {
+            'top-right': { top: '20px', right: '20px' },
+            'top-left': { top: '20px', left: '20px' },
+            'bottom-right': { bottom: '20px', right: '20px' },
+            'bottom-left': { bottom: '20px', left: '20px' },
+            'top-center': { top: '20px' },
+            'bottom-center': { bottom: '20px' },
+        };
+        return positions[position] || positions['top-right'];
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AlertDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AlertDialogService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AlertDialogService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }] });
 
@@ -5624,18 +5793,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 
 class AlertDialog {
     inputField;
+    dialogTitle;
     container;
     componentRef = null;
+    timerInterval;
     inputValue = '';
     validationError = null;
     timerProgress = 100;
-    timerInterval;
     sanitizedHtml;
     sanitizedFooter = null;
     dialogRef = inject((MatDialogRef));
     data = inject(MAT_DIALOG_DATA);
     sanitizer = inject(DomSanitizer);
-    environmentInjector = inject(EnvironmentInjector);
+    renderer = inject(Renderer2);
+    elementRef = inject(ElementRef);
+    cdr = inject(ChangeDetectorRef);
+    zIndexService = inject(DialogZIndexService);
     constructor() {
         this.sanitizedHtml = this.sanitizer.bypassSecurityTrustHtml(this.data.html || '');
     }
@@ -5651,13 +5824,18 @@ class AlertDialog {
     startTimer() {
         if (!this.data.timer)
             return;
+        console.log('Starting timer with duration:', this.data.timer);
         const startTime = Date.now();
         const endTime = startTime + this.data.timer;
+        this.timerProgress = 100;
         this.timerInterval = setInterval(() => {
             const now = Date.now();
             const remaining = endTime - now;
             if (remaining <= 0) {
                 clearInterval(this.timerInterval);
+                this.timerProgress = 0;
+                this.cdr.detectChanges();
+                console.log('Timer finished, closing dialog');
                 this.dialogRef.close({
                     isConfirmed: false,
                     isDismissed: true,
@@ -5666,7 +5844,11 @@ class AlertDialog {
                 });
                 return;
             }
-            this.timerProgress = (remaining / this.data.timer) * 100;
+            const newProgress = (remaining / this.data.timer) * 100;
+            if (Math.abs(this.timerProgress - newProgress) > 0.5) {
+                this.timerProgress = newProgress;
+                this.cdr.detectChanges();
+            }
         }, 50);
     }
     // Load dynamic component
@@ -5691,12 +5873,16 @@ class AlertDialog {
         if (this.data.component) {
             this.loadComponent();
         }
-        if (this.data.timer) {
-            this.startTimer();
-        }
         if (this.data.footerHtml) {
             this.sanitizedFooter = this.sanitizer.bypassSecurityTrustHtml(this.data.footerHtml);
         }
+        // Inicializar timer después de que el componente esté listo
+        if (this.data.timer) {
+            // Usar setTimeout para asegurar que el componente esté completamente inicializado
+            setTimeout(() => {
+                this.startTimer();
+            }, 100);
+        }
     }
     getIconName() {
         if (this.data.icon) {
@@ -5713,10 +5899,20 @@ class AlertDialog {
                 return 'info';
             case 'question':
                 return 'help';
+            case 'delete':
+                return 'delete_forever';
             default:
                 return '';
         }
     }
+    onClose() {
+        this.dialogRef.close({
+            isConfirmed: false,
+            isDismissed: true,
+            isDenied: false,
+            dismiss: 'close',
+        });
+    }
     getButtonVariant(buttonType) {
         const variant = this.data[`${buttonType}ButtonVariant`];
         if (variant)
@@ -5734,6 +5930,8 @@ class AlertDialog {
                     return 'info';
                 case 'question':
                     return 'primary';
+                case 'delete':
+                    return 'danger';
                 default:
                     return 'primary';
             }
@@ -5766,6 +5964,18 @@ class AlertDialog {
         const style = this.data[`${buttonType}ButtonStyle`];
         return style || 'elevated';
     }
+    getActionsAlignment() {
+        switch (this.data.contentAlignment) {
+            case 'left':
+                return 'start';
+            case 'center':
+                return 'center';
+            case 'right':
+                return 'end';
+            default:
+                return 'end'; // Default alignment
+        }
+    }
     async onConfirm() {
         if (this.data.input && this.data.inputValidator) {
             const error = await Promise.resolve(this.data.inputValidator(this.inputValue));
@@ -5850,9 +6060,6 @@ class AlertDialog {
             this.onConfirm();
         }
     }
-    closeWithResult(result) {
-        this.dialogRef.close(result);
-    }
     getConfirmColor() {
         if (!this.data.confirmButtonColor)
             return 'primary';
@@ -5901,8 +6108,17 @@ class AlertDialog {
         }
         return this.data.denyButtonColor;
     }
+    // ===== CDK DRAG FUNCTIONALITY =====
+    /**
+     * Brings the dialog to the front by adjusting its z-index.
+     * Uses the centralized DialogZIndexService for consistent z-index management.
+     * Called when the dialog header is clicked.
+     */
+    bringToFront() {
+        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: "container", first: true, predicate: ["dynamicComponentContainer"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n  class=\"alert-dialog\"\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  <!-- 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  <!-- 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  <!-- Title -->\n  @if (data.title) {\n  <h2 mat-dialog-title class=\"alert-dialog-title\">{{ data.title }}</h2>\n  }\n\n  <!-- Content -->\n  <mat-dialog-content class=\"alert-dialog-content\">\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  <!-- Actions -->\n  <mat-dialog-actions\n    class=\"alert-dialog-actions\"\n    [class.reverse-buttons]=\"data.reverseButtons\"\n    [class.vertical-buttons]=\"data.verticalButtons\"\n    align=\"center\"\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  <!-- 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{text-align:center;padding:1rem;position:relative;overflow:hidden}.timer-progress{position:absolute;top:0;left:0;right:0;height:4px}.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-dialog-icon{margin:1rem auto;display:flex;justify-content:center;align-items:center}.icon-large{font-size:80px;width:80px;height:80px}.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}.alert-dialog-title{font-size:1.5rem;font-weight:600;text-align:center}.alert-dialog-content{color:#666;font-size:1rem;min-height:50px}.alert-input-field{width:100%;margin-top:1rem}.alert-dialog-actions{gap:.75rem;padding:1rem 0 .5rem;display:flex;justify-content:center}.alert-dialog-actions.reverse-buttons{flex-direction:row-reverse}.confirm-button,.cancel-button,.deny-button{min-width:100px}.cancel-button{color:#333}.alert-dialog-footer{margin-top:1rem;padding-top:1rem;border-top:1px solid #e0e0e0;font-size:.875rem;color:#666}\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.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { 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: "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: i4.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: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { 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.OnPush });
+    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' || data.toastMode\"\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.toastMode)) {\n  <mat-progress-bar\n    mode=\"determinate\"\n    [value]=\"timerProgress\"\n    class=\"timer-progress\"\n    [class.toast-progress]=\"data.toastMode\"\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.toastMode || 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.toastMode || 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.toastMode || 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.toastMode || data.layout === 'toast') && (data.showConfirmButton !== false ||\n  data.showCancelButton || 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}.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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AlertDialog, decorators: [{
             type: Component,
@@ -5914,12 +6130,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         MatInputModule,
                         MatFormFieldModule,
                         MatProgressBarModule,
+                        DragDropModule,
                         NgClass,
                         Button,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"alert-dialog\"\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  <!-- 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  <!-- 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  <!-- Title -->\n  @if (data.title) {\n  <h2 mat-dialog-title class=\"alert-dialog-title\">{{ data.title }}</h2>\n  }\n\n  <!-- Content -->\n  <mat-dialog-content class=\"alert-dialog-content\">\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  <!-- Actions -->\n  <mat-dialog-actions\n    class=\"alert-dialog-actions\"\n    [class.reverse-buttons]=\"data.reverseButtons\"\n    [class.vertical-buttons]=\"data.verticalButtons\"\n    align=\"center\"\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  <!-- 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{text-align:center;padding:1rem;position:relative;overflow:hidden}.timer-progress{position:absolute;top:0;left:0;right:0;height:4px}.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-dialog-icon{margin:1rem auto;display:flex;justify-content:center;align-items:center}.icon-large{font-size:80px;width:80px;height:80px}.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}.alert-dialog-title{font-size:1.5rem;font-weight:600;text-align:center}.alert-dialog-content{color:#666;font-size:1rem;min-height:50px}.alert-input-field{width:100%;margin-top:1rem}.alert-dialog-actions{gap:.75rem;padding:1rem 0 .5rem;display:flex;justify-content:center}.alert-dialog-actions.reverse-buttons{flex-direction:row-reverse}.confirm-button,.cancel-button,.deny-button{min-width:100px}.cancel-button{color:#333}.alert-dialog-footer{margin-top:1rem;padding-top:1rem;border-top:1px solid #e0e0e0;font-size:.875rem;color:#666}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.Default, template: "<div\n  class=\"alert-dialog\"\n  [class.modern-layout]=\"data.layout === 'modern'\"\n  [class.toast-layout]=\"data.layout === 'toast' || data.toastMode\"\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.toastMode)) {\n  <mat-progress-bar\n    mode=\"determinate\"\n    [value]=\"timerProgress\"\n    class=\"timer-progress\"\n    [class.toast-progress]=\"data.toastMode\"\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.toastMode || 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.toastMode || 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.toastMode || 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.toastMode || data.layout === 'toast') && (data.showConfirmButton !== false ||\n  data.showCancelButton || 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}.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"] }]
         }], ctorParameters: () => [], propDecorators: { inputField: [{
                 type: ViewChild,
                 args: ['inputField']
+            }], dialogTitle: [{
+                type: ViewChild,
+                args: ['dialogTitle']
             }], container: [{
                 type: ViewChild,
                 args: ['dynamicComponentContainer', { read: ViewContainerRef, static: true }]
@@ -6062,5 +6282,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ACP_DRAWER_DATA, ACP_DRAWER_DEFAULT_OPTIONS, ACP_POPOVER_CONTENT, ACP_POPOVER_DEFAULT_OPTIONS, ACP_POPOVER_SCROLL_STRATEGY, AUTOCOMPLETE_WRAPPER_CUSTOMER_CONFIG, AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG, AUTOCOMPLETE_WRAPPER_LOCAL_CONFIG, AUTOCOMPLETE_WRAPPER_PAGINATED_CONFIG, AUTOCOMPLETE_WRAPPER_PRODUCT_CONFIG, AUTOCOMPLETE_WRAPPER_SIMPLE_CONFIG, AcpDrawer, AcpDrawerConfig, AcpDrawerContainer, AcpDrawerRef, AcpPopover, AcpPopoverContent, AcpPopoverTarget, AcpPopoverTrigger, AdvancedDialogService, AlertDialog, AlertDialogService, AutocompleteWrapperService, Button, DATA_GRID_DEFAULT_OPTIONS, DataGrid, DateRangePicker, DialogWrapper, DynamicCard, DynamicSelect, GetTotalPipe, IconRegistryService, InputChip, KeyboardNavigationService, OverlayService, Pagination, ReusableAutocompleteComponent, Spinner, StatusDisplayPipe, SvgIcon, TabulatorTable, ThemeSwitcher, ThemeToggle, ToUpperCase, UserIcon, _AcpPopoverContentBase, createAutocompleteWrapperConfig, throwAcpPopoverInvalidPositionEnd, throwAcpPopoverInvalidPositionStart, throwAcpPopoverMissingError };
+export { ACP_DRAWER_DATA, ACP_DRAWER_DEFAULT_OPTIONS, ACP_POPOVER_CONTENT, ACP_POPOVER_DEFAULT_OPTIONS, ACP_POPOVER_SCROLL_STRATEGY, AUTOCOMPLETE_WRAPPER_CUSTOMER_CONFIG, AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG, AUTOCOMPLETE_WRAPPER_LOCAL_CONFIG, AUTOCOMPLETE_WRAPPER_PAGINATED_CONFIG, AUTOCOMPLETE_WRAPPER_PRODUCT_CONFIG, AUTOCOMPLETE_WRAPPER_SIMPLE_CONFIG, AcpDrawer, AcpDrawerConfig, AcpDrawerContainer, AcpDrawerRef, AcpPopover, AcpPopoverContent, AcpPopoverTarget, AcpPopoverTrigger, AdvancedDialogService, AlertDialog, AlertDialogService, AutocompleteWrapperService, Button, DATA_GRID_DEFAULT_OPTIONS, DataGrid, DateRangePicker, DialogWrapper, DialogZIndexService, DynamicCard, DynamicSelect, GetTotalPipe, IconRegistryService, InputChip, KeyboardNavigationService, OverlayService, Pagination, ReusableAutocompleteComponent, Spinner, StatusDisplayPipe, SvgIcon, TabulatorTable, ThemeSwitcher, ThemeToggle, ToUpperCase, UserIcon, _AcpPopoverContentBase, createAutocompleteWrapperConfig, throwAcpPopoverInvalidPositionEnd, throwAcpPopoverInvalidPositionStart, throwAcpPopoverMissingError };
 //# sourceMappingURL=acontplus-ng-components.mjs.map