@acontplus/ng-components 2.1.13 → 2.1.14

package/fesm2022/acontplus-ng-components.mjs

@@ -1,5 +1,5 @@
 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, Renderer2, createComponent, EnvironmentInjector } 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';
@@ -341,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.
@@ -350,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.
      */
@@ -410,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 });
@@ -433,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
@@ -998,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])
@@ -1011,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".
@@ -1027,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.
@@ -1624,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,
@@ -1642,6 +1717,7 @@ class AlertDialogService {
         scrollbarPadding: true,
         position: 'center',
         draggable: false,
+        allowMultiple: false, // Por defecto no permitir múltiples alerts
         // Nuevas opciones por defecto
         layout: 'modern',
         iconPosition: 'left',
@@ -1689,6 +1765,7 @@ class AlertDialogService {
             scrollbarPadding: true,
             position: 'center',
             draggable: false,
+            allowMultiple: false,
         };
     }
     /**
@@ -1696,6 +1773,10 @@ 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';
@@ -1710,10 +1791,6 @@ class AlertDialogService {
         const position = mergedOptions.toastMode
             ? this.getToastDialogPosition(mergedOptions.toastPosition || 'top-right')
             : this.getDialogPosition(mergedOptions.position || 'center');
-        // Calcular z-index dinámico basado en diálogos abiertos
-        const openDialogs = this.dialog.openDialogs.length;
-        const baseZIndex = 1000;
-        const zIndex = baseZIndex + openDialogs * 10;
         const dialogRef = this.dialog.open(AlertDialog, {
             width: mergedOptions.width,
             minWidth: mergedOptions.minWidth,
@@ -1729,20 +1806,8 @@ class AlertDialogService {
             restoreFocus: true,
             hasBackdrop: !mergedOptions.toastMode,
         });
-        // Aplicar z-index dinámico después de abrir
-        setTimeout(() => {
-            const overlayRef = dialogRef._overlayRef;
-            if (overlayRef) {
-                const pane = overlayRef.overlayElement;
-                const backdrop = overlayRef.backdropElement;
-                if (pane) {
-                    pane.style.zIndex = (zIndex + 2).toString();
-                }
-                if (backdrop) {
-                    backdrop.style.zIndex = (zIndex + 1).toString();
-                }
-            }
-        }, 0);
+        // Aplicar z-index dinámico usando el servicio centralizado
+        this.zIndexService.applyZIndex(dialogRef);
         // Callbacks de ciclo de vida
         if (mergedOptions.willOpen) {
             mergedOptions.willOpen();
@@ -5732,9 +5797,6 @@ class AlertDialog {
     container;
     componentRef = null;
     timerInterval;
-    // CDK Drag properties
-    static lastZIndex = 1000;
-    bringToFrontTimeoutId = null;
     inputValue = '';
     validationError = null;
     timerProgress = 100;
@@ -5746,6 +5808,7 @@ class AlertDialog {
     renderer = inject(Renderer2);
     elementRef = inject(ElementRef);
     cdr = inject(ChangeDetectorRef);
+    zIndexService = inject(DialogZIndexService);
     constructor() {
         this.sanitizedHtml = this.sanitizer.bypassSecurityTrustHtml(this.data.html || '');
     }
@@ -5756,14 +5819,6 @@ class AlertDialog {
         if (this.componentRef) {
             this.componentRef.destroy();
         }
-        // Limpiar timeout de CDK Drag
-        if (this.bringToFrontTimeoutId !== null) {
-            cancelAnimationFrame(this.bringToFrontTimeoutId);
-            this.bringToFrontTimeoutId = null;
-        }
-    }
-    ngAfterViewInit() {
-        // CDK Drag se maneja automáticamente a través del template
     }
     // Start the timer for auto-closing the dialog
     startTimer() {
@@ -6056,22 +6111,11 @@ class AlertDialog {
     // ===== CDK DRAG FUNCTIONALITY =====
     /**
      * 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);
-        }
-        // Schedule the z-index update for the next animation frame
-        this.bringToFrontTimeoutId = requestAnimationFrame(() => {
-            const pane = this.elementRef.nativeElement.closest('.cdk-overlay-pane');
-            if (pane) {
-                pane.style.zIndex = (++AlertDialog.lastZIndex).toString();
-            }
-            this.bringToFrontTimeoutId = null;
-        });
+        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' || 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 });
@@ -6238,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