@acontplus/ng-components 3.1.0 → 3.2.0

package/fesm2022/acontplus-ng-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ChangeDetectorRef, EventEmitter, booleanAttribute, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, input, output, contentChild, TemplateRef, computed, InjectionToken, NgZone, Injector, signal, Service, ElementRef, HostListener, Directive, ViewChild, ViewContainerRef, Renderer2, afterRenderEffect, untracked, Injectable, viewChild, effect, Pipe, KeyValueDiffers, CSP_NONCE, DOCUMENT as DOCUMENT$1, ContentChildren, model, forwardRef, ANIMATION_MODULE_TYPE, ApplicationRef, ContentChild, HostBinding, PLATFORM_ID, DestroyRef, SecurityContext } from '@angular/core';
+import { inject, ChangeDetectorRef, EventEmitter, booleanAttribute, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, input, output, contentChild, TemplateRef, computed, InjectionToken, NgZone, Injector, signal, Service, ElementRef, HostListener, Directive, ViewChild, ViewContainerRef, Renderer2, afterRenderEffect, untracked, makeEnvironmentProviders, viewChild, isSignal, effect, Injectable, Pipe, KeyValueDiffers, CSP_NONCE, DOCUMENT as DOCUMENT$1, ContentChildren, model, forwardRef, ANIMATION_MODULE_TYPE, ApplicationRef, ContentChild, HostBinding, PLATFORM_ID, DestroyRef, SecurityContext } from '@angular/core';
 import * as i1$1 from '@angular/material/button';
 import { MatIconButton, MatButtonModule, MatButton, MatMiniFabButton, MatFabButton } from '@angular/material/button';
 import * as i1$2 from '@angular/common';
@@ -14,15 +14,17 @@ import { MatCardModule, MatCard, MatCardHeader, MatCardContent } from '@angular/
 import * as i3$1 from '@angular/cdk/overlay';
 import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import { ComponentPortal, CdkPortalOutlet, TemplatePortal, DomPortalOutlet } from '@angular/cdk/portal';
-import { Subject, firstValueFrom, catchError, of, isObservable, merge, combineLatest, Observable, fromEvent, defer, Subscription, map as map$1, BehaviorSubject, filter as filter$1, tap, debounceTime } from 'rxjs';
-import { takeUntil, mapTo, take, startWith, pairwise, distinctUntilChanged, share, map, skip, filter } from 'rxjs/operators';
+import { Subject, firstValueFrom, from, isObservable, catchError, of, merge, combineLatest, Observable, fromEvent, defer, Subscription, map as map$1, BehaviorSubject, filter as filter$1, tap, debounceTime } from 'rxjs';
+import { takeUntil, take, switchMap, mapTo, startWith, pairwise, distinctUntilChanged, share, map, skip, filter } from 'rxjs/operators';
 import * as i3 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule, MatProgressSpinner } from '@angular/material/progress-spinner';
 import { CdkTrapFocus, LiveAnnouncer, _IdGenerator, FocusMonitor, isFakeMousedownFromScreenReader } from '@angular/cdk/a11y';
-import { CdkDrag, CdkDragHandle, moveItemInArray, CdkDropList } from '@angular/cdk/drag-drop';
 import * as i1$3 from '@angular/material/dialog';
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule, MatDialog, MatDialogConfig } from '@angular/material/dialog';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { REPORT_FORMAT, DEFAULT_ICONS, FALLBACK_ICON } from '@acontplus/ui-kit';
+import { CdkDrag, CdkDragHandle, moveItemInArray, CdkDropList } from '@angular/cdk/drag-drop';
 import * as i1$5 from '@angular/forms';
 import { FormControl, ReactiveFormsModule, FormsModule, NG_VALUE_ACCESSOR, FormGroup, Validators } from '@angular/forms';
 import * as i1$4 from '@ng-select/ng-select';
@@ -63,8 +65,6 @@ import { MatListModule } from '@angular/material/list';
 import { MatDividerModule } from '@angular/material/divider';
 import * as i1$6 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import * as i1$8 from 'ngx-permissions';
 import { NgxPermissionsModule } from 'ngx-permissions';
 import * as i1$9 from '@angular/material/slide-toggle';
@@ -1220,6 +1220,194 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], hide: [{ type: i0.Output, args: ["hide"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }] } });
 
+/**
+ * Declarative dialog structure wrapper. Use it inside a dialog content template
+ * to group the titlebar, body and actions sections.
+ *
+ * @example
+ * ```html
+ * <acp-dialog>
+ *   <acp-dialog-titlebar title="Edit user" icon="person" />
+ *   <acp-dialog-content>
+ *     <p>Dialog body</p>
+ *   </acp-dialog-content>
+ *   <acp-dialog-actions align="end">
+ *     <acp-button text="Cancel" appearance="text" (clicked)="ref.close()" />
+ *     <acp-button text="Save" color="success" (clicked)="ref.close(user)" />
+ *   </acp-dialog-actions>
+ * </acp-dialog>
+ * ```
+ */
+class AcpDialog {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: AcpDialog, isStandalone: true, selector: "acp-dialog", host: { properties: { "style.display": "\"contents\"" }, classAttribute: "acp-dialog" }, ngImport: i0, template: `
+    <ng-content select="acp-dialog-titlebar" />
+    <ng-content select="acp-dialog-content" />
+    <ng-content select="acp-dialog-actions" />
+    <ng-content />
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDialog, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'acp-dialog',
+                    standalone: true,
+                    template: `
+    <ng-content select="acp-dialog-titlebar" />
+    <ng-content select="acp-dialog-content" />
+    <ng-content select="acp-dialog-actions" />
+    <ng-content />
+  `,
+                    host: {
+                        class: 'acp-dialog',
+                        '[style.display]': '"contents"',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }] });
+
+/**
+ * Declarative dialog content body. Use it inside `<acp-dialog>` or any dialog
+ * content template to mark the scrollable body section.
+ *
+ * @example
+ * ```html
+ * <acp-dialog-content>
+ *   <p>Dialog body</p>
+ * </acp-dialog-content>
+ * ```
+ */
+class AcpDialogContent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDialogContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: AcpDialogContent, isStandalone: true, selector: "acp-dialog-content", host: { classAttribute: "acp-dialog-content" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDialogContent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'acp-dialog-content',
+                    standalone: true,
+                    template: `<ng-content />`,
+                    host: { class: 'acp-dialog-content' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }] });
+
+/**
+ * Reference to a dialog opened via `AcpDialogService`. Mirrors the public surface
+ * of `MatDialogRef` so consumers can subscribe to `afterClosed()`, close manually,
+ * inspect the component instance, etc.
+ *
+ * It is both the value returned by `AcpDialogService.open()` and an injectable
+ * token: content components can `inject(AcpDialogRef)` to close themselves.
+ */
+class AcpDialogRef {
+    matDialogRef;
+    /** Emits every time a configured dialog action is clicked, before it closes. */
+    clickedResult;
+    /** Observable mirror of {@link clickedResult}. */
+    get actionClicked$() {
+        return this.clickedResult.asObservable();
+    }
+    constructor(matDialogRef, clickedResult) {
+        this.matDialogRef = matDialogRef;
+        this.clickedResult = clickedResult ?? new Subject();
+    }
+    /** The instance of the component opened into the dialog. */
+    get componentInstance() {
+        return this.readRef(ref => ref.componentInstance);
+    }
+    /** `ComponentRef` of the component opened into the dialog. */
+    get componentRef() {
+        return this.readRef(ref => ref.componentRef) ?? null;
+    }
+    /** Whether the user is allowed to close the dialog. */
+    get disableClose() {
+        return this.readRef(ref => ref.disableClose);
+    }
+    /** Unique ID for the dialog. */
+    get id() {
+        return this.readRef(ref => ref.id) ?? '';
+    }
+    /** Gets an observable that is notified when the dialog is finished closing. */
+    afterClosed() {
+        return this.fromRef(ref => ref.afterClosed());
+    }
+    /** Gets an observable that is notified when the dialog is finished opening. */
+    afterOpened() {
+        return this.fromRef(ref => ref.afterOpened());
+    }
+    /** Gets an observable that is notified when the dialog has started closing. */
+    beforeClosed() {
+        return this.fromRef(ref => ref.beforeClosed());
+    }
+    /** Gets an observable that emits when the overlay's backdrop has been clicked. */
+    backdropClick() {
+        return this.fromRef(ref => ref.backdropClick());
+    }
+    /** Gets an observable that emits when keydown events are targeted on the overlay. */
+    keydownEvents() {
+        return this.fromRef(ref => ref.keydownEvents());
+    }
+    /** Gets the current lifecycle state of the dialog. */
+    getState() {
+        return this.readRef(ref => ref.getState());
+    }
+    /** Resolves with the result once the dialog finishes closing. */
+    get closed() {
+        return firstValueFrom(this.afterClosed());
+    }
+    /** Observable that emits the result once the dialog finishes closing. */
+    get closed$() {
+        return this.afterClosed();
+    }
+    /** Closes the dialog, optionally returning a result. */
+    close(result) {
+        this.withRef(ref => ref.close(result));
+    }
+    /** Updates the dialog's position. */
+    updatePosition(position) {
+        this.withRef(ref => ref.updatePosition(position));
+        return this;
+    }
+    /** Updates the dialog's width and height. */
+    updateSize(width = '', height = '') {
+        this.withRef(ref => ref.updateSize(width, height));
+        return this;
+    }
+    /** Add a CSS class or an array of classes to the overlay pane. */
+    addPanelClass(classes) {
+        this.withRef(ref => ref.addPanelClass(classes));
+        return this;
+    }
+    /** Remove a CSS class or an array of classes from the overlay pane. */
+    removePanelClass(classes) {
+        this.withRef(ref => ref.removePanelClass(classes));
+        return this;
+    }
+    fromRef(fn) {
+        if (this.matDialogRef instanceof Promise) {
+            return from(this.matDialogRef).pipe(take(1), switchMap(fn));
+        }
+        return fn(this.matDialogRef);
+    }
+    readRef(fn) {
+        if (this.matDialogRef instanceof Promise) {
+            return undefined;
+        }
+        return fn(this.matDialogRef);
+    }
+    withRef(fn) {
+        if (this.matDialogRef instanceof Promise) {
+            this.matDialogRef.then(ref => fn(ref));
+        }
+        else {
+            fn(this.matDialogRef);
+        }
+    }
+}
+
 class Button {
     variant = input('primary', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
@@ -1433,12 +1621,16 @@ class BaseButton {
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     text = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "text" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    form = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "form" }] : /* istanbul ignore next */ []));
     hasText = computed(() => !!this.text() && this.text().trim().length > 0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasText" }] : /* istanbul ignore next */ []));
     clicked = output();
     focused = output();
     blurred = output();
-    colorClass = computed(() => `acp-${this.color()}`, /* @ts-ignore */
+    colorClass = computed(() => (this.color() === 'danger' ? 'acp-error' : `acp-${this.color()}`), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "colorClass" }] : /* istanbul ignore next */ []));
     sizeClass = computed(() => `acp-${this.size()}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "sizeClass" }] : /* istanbul ignore next */ []));
@@ -1451,7 +1643,7 @@ class BaseButton {
     pointerEvents = computed(() => (this.isDisabled() ? 'none' : 'auto'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pointerEvents" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: BaseButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: BaseButton, isStandalone: true, inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, square: { classPropertyName: "square", publicName: "square", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showProgress: { classPropertyName: "showProgress", publicName: "showProgress", isSignal: true, isRequired: false, transformFunction: null }, progressType: { classPropertyName: "progressType", publicName: "progressType", isSignal: true, isRequired: false, transformFunction: null }, progressText: { classPropertyName: "progressText", publicName: "progressText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, extended: { classPropertyName: "extended", publicName: "extended", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", focused: "focused", blurred: "blurred" }, host: { properties: { "style.pointer-events": "pointerEvents()" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: BaseButton, isStandalone: true, inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, square: { classPropertyName: "square", publicName: "square", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showProgress: { classPropertyName: "showProgress", publicName: "showProgress", isSignal: true, isRequired: false, transformFunction: null }, progressType: { classPropertyName: "progressType", publicName: "progressType", isSignal: true, isRequired: false, transformFunction: null }, progressText: { classPropertyName: "progressText", publicName: "progressText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, extended: { classPropertyName: "extended", publicName: "extended", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", focused: "focused", blurred: "blurred" }, host: { properties: { "style.pointer-events": "pointerEvents()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: BaseButton, decorators: [{
             type: Directive,
@@ -1460,7 +1652,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         '[style.pointer-events]': 'pointerEvents()',
                     },
                 }]
-        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], square: [{ type: i0.Input, args: [{ isSignal: true, alias: "square", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], suffixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixIcon", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], showProgress: [{ type: i0.Input, args: [{ isSignal: true, alias: "showProgress", required: false }] }], progressType: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressType", required: false }] }], progressText: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressText", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], disableRipple: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableRipple", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], extended: [{ type: i0.Input, args: [{ isSignal: true, alias: "extended", required: false }] }], block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }] } });
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], square: [{ type: i0.Input, args: [{ isSignal: true, alias: "square", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], suffixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixIcon", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], showProgress: [{ type: i0.Input, args: [{ isSignal: true, alias: "showProgress", required: false }] }], progressType: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressType", required: false }] }], progressText: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressText", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], disableRipple: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableRipple", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], extended: [{ type: i0.Input, args: [{ isSignal: true, alias: "extended", required: false }] }], block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }] } });
 
 class ButtonLoaderDirective {
     acpLoading = input(false, { ...(ngDevMode ? { debugName: "acpLoading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -1523,7 +1715,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 
 class AcpButton extends BaseButton {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpButton, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpButton, isStandalone: true, selector: "acp-button", usesInheritance: true, ngImport: i0, template: "@if (variant() === 'icon') {\n<button\n  matIconButton\n  [disabled]=\"isDisabled()\"\n  [disableRipple]=\"disableRipple()\"\n  [acpLoading]=\"loading()\"\n  [type]=\"type()\"\n  [ngClass]=\"[colorClass(), squareClass(), blockClass(), sizeClass()]\"\n  (click)=\"clicked.emit()\"\n  (focus)=\"focused.emit()\"\n  (blur)=\"blurred.emit()\"\n>\n  <mat-icon>{{icon()}}</mat-icon>\n</button>\n} @else if (variant() === 'fab') {\n<button\n  matFab\n  [extended]=\"extended()\"\n  [disabled]=\"isDisabled()\"\n  [disableRipple]=\"disableRipple()\"\n  [acpLoading]=\"loading()\"\n  [type]=\"type()\"\n  [ngClass]=\"[colorClass(), sizeClass()]\"\n  (click)=\"clicked.emit()\"\n  (focus)=\"focused.emit()\"\n  (blur)=\"blurred.emit()\"\n>\n  @if (icon()) { <mat-icon>{{icon()}}</mat-icon> } @if (extended()) { @if (hasText()) { {{text()}} }\n  @else { <ng-content></ng-content> } }\n</button>\n} @else if (variant() === 'mini-fab') {\n<button\n  matMiniFab\n  [disabled]=\"isDisabled()\"\n  [disableRipple]=\"disableRipple()\"\n  [acpLoading]=\"loading()\"\n  [type]=\"type()\"\n  [ngClass]=\"[colorClass(), sizeClass()]\"\n  (click)=\"clicked.emit()\"\n  (focus)=\"focused.emit()\"\n  (blur)=\"blurred.emit()\"\n>\n  <mat-icon>{{icon()}}</mat-icon>\n</button>\n} @else {\n<button\n  [matButton]=\"appearance()\"\n  [disabled]=\"isDisabled()\"\n  [disableRipple]=\"disableRipple()\"\n  [acpLoading]=\"loading()\"\n  [showProgress]=\"showProgress()\"\n  [type]=\"type()\"\n  [ngClass]=\"[colorClass(), squareClass(), blockClass(), sizeClass()]\"\n  (click)=\"clicked.emit()\"\n  (focus)=\"focused.emit()\"\n  (blur)=\"blurred.emit()\"\n>\n  @if (icon()) { <mat-icon>{{icon()}}</mat-icon> } @if (hasText()) { {{text()}} } @else {\n  <ng-content></ng-content> } @if (showProgress() && progressType() === 'spinner') {\n  <mat-progress-spinner\n    progressIndicator\n    mode=\"indeterminate\"\n    [diameter]=\"20\"\n    aria-label=\"Loading\"\n  />\n  } @if (showProgress() && progressType() === 'text') {\n  <div progressIndicator role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n    {{ progressText() }}\n  </div>\n  } @if (suffixIcon()) {\n  <mat-icon iconPositionEnd>{{suffixIcon()}}</mat-icon> }\n</button>\n}\n", styles: [".acp-primary{--mat-button-filled-container-color: var(--acp-theme-primary-color);--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: var(--acp-theme-primary-color);--mat-button-protected-label-text-color: var(--acp-theme-primary-color);--mat-button-text-label-text-color: var(--acp-theme-primary-color);--mat-button-text-state-layer-color: var(--acp-theme-primary-color)}.acp-secondary{--mat-button-filled-container-color: var(--mat-sys-secondary);--mat-button-filled-label-text-color: var(--mat-sys-on-secondary);--mat-button-outlined-label-text-color: var(--mat-sys-secondary);--mat-button-protected-label-text-color: var(--mat-sys-secondary);--mat-button-text-label-text-color: var(--mat-sys-secondary);--mat-button-text-state-layer-color: var(--mat-sys-secondary)}.acp-accent{--mat-button-filled-container-color: var(--mat-sys-tertiary);--mat-button-filled-label-text-color: var(--mat-sys-on-tertiary);--mat-button-outlined-label-text-color: var(--mat-sys-tertiary);--mat-button-protected-label-text-color: var(--mat-sys-tertiary);--mat-button-text-label-text-color: var(--mat-sys-tertiary);--mat-button-text-state-layer-color: var(--mat-sys-tertiary)}.acp-error{--mat-button-filled-container-color: var(--mat-sys-error);--mat-button-filled-label-text-color: var(--mat-sys-on-error);--mat-button-outlined-label-text-color: var(--mat-sys-error);--mat-button-protected-label-text-color: var(--mat-sys-error);--mat-button-text-label-text-color: var(--mat-sys-error);--mat-button-text-state-layer-color: var(--mat-sys-error)}.acp-success{--mat-button-filled-container-color: #4caf50;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #4caf50;--mat-button-protected-label-text-color: #4caf50;--mat-button-text-label-text-color: #4caf50;--mat-button-text-state-layer-color: #4caf50}.acp-warning{--mat-button-filled-container-color: #f59e0b;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #f59e0b;--mat-button-protected-label-text-color: #f59e0b;--mat-button-text-label-text-color: #f59e0b;--mat-button-text-state-layer-color: #f59e0b}.acp-info{--mat-button-filled-container-color: #3b82f6;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #3b82f6;--mat-button-protected-label-text-color: #3b82f6;--mat-button-text-label-text-color: #3b82f6;--mat-button-text-state-layer-color: #3b82f6}.acp-dark{--mat-button-filled-container-color: #1f2937;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: light-dark(#1f2937, #ffffff);--mat-button-protected-label-text-color: light-dark(#1f2937, #ffffff);--mat-button-text-label-text-color: light-dark(#1f2937, #ffffff);--mat-button-text-state-layer-color: light-dark(#1f2937, #ffffff)}[matIconButton].acp-primary{--mat-icon-color: var(--acp-theme-primary-color)}[matIconButton].acp-secondary{--mat-icon-color: var(--mat-sys-secondary)}[matIconButton].acp-accent{--mat-icon-color: var(--mat-sys-tertiary)}[matIconButton].acp-error{--mat-icon-color: var(--mat-sys-error)}[matIconButton].acp-success{--mat-icon-color: #10b981}[matIconButton].acp-warning{--mat-icon-color: #f59e0b}[matIconButton].acp-info{--mat-icon-color: #3b82f6}[matFab].acp-primary{--mat-fab-container-color: var(--acp-theme-primary-color);--mat-fab-foreground-color: #ffffff;--mat-fab-state-layer-color: #ffffff}[matFab].acp-secondary{--mat-fab-container-color: var(--mat-sys-secondary);--mat-fab-foreground-color: var(--mat-sys-on-secondary);--mat-fab-state-layer-color: var(--mat-sys-on-secondary)}[matFab].acp-accent{--mat-fab-container-color: var(--mat-sys-tertiary);--mat-fab-foreground-color: var(--mat-sys-on-tertiary);--mat-fab-state-layer-color: var(--mat-sys-on-tertiary)}[matFab].acp-error{--mat-fab-container-color: var(--mat-sys-error);--mat-fab-foreground-color: var(--mat-sys-on-error);--mat-fab-state-layer-color: var(--mat-sys-on-error)}[matFab].acp-success{--mat-fab-container-color: #4caf50;--mat-fab-foreground-color: #ffffff;--mat-fab-state-layer-color: #ffffff}[matFab].acp-warning{--mat-fab-container-color: #f59e0b;--mat-fab-foreground-color: #ffffff;--mat-fab-state-layer-color: #ffffff}[matFab].acp-info{--mat-fab-container-color: #3b82f6;--mat-fab-foreground-color: #ffffff;--mat-fab-state-layer-color: #ffffff}[matFab].acp-dark{--mat-fab-container-color: #1f2937;--mat-fab-foreground-color: #ffffff;--mat-fab-state-layer-color: #ffffff}[matMiniFab].acp-primary{--mat-fab-small-container-color: var(--acp-theme-primary-color);--mat-fab-small-foreground-color: #ffffff;--mat-fab-small-state-layer-color: #ffffff}[matMiniFab].acp-secondary{--mat-fab-small-container-color: var(--mat-sys-secondary);--mat-fab-small-foreground-color: var(--mat-sys-on-secondary);--mat-fab-small-state-layer-color: var(--mat-sys-on-secondary)}[matMiniFab].acp-accent{--mat-fab-small-container-color: var(--mat-sys-tertiary);--mat-fab-small-foreground-color: var(--mat-sys-on-tertiary);--mat-fab-small-state-layer-color: var(--mat-sys-on-tertiary)}[matMiniFab].acp-error{--mat-fab-small-container-color: var(--mat-sys-error);--mat-fab-small-foreground-color: var(--mat-sys-on-error);--mat-fab-small-state-layer-color: var(--mat-sys-on-error)}[matMiniFab].acp-success{--mat-fab-small-container-color: #4caf50;--mat-fab-small-foreground-color: #ffffff;--mat-fab-small-state-layer-color: #ffffff}[matMiniFab].acp-warning{--mat-fab-small-container-color: #f59e0b;--mat-fab-small-foreground-color: #ffffff;--mat-fab-small-state-layer-color: #ffffff}[matMiniFab].acp-info{--mat-fab-small-container-color: #3b82f6;--mat-fab-small-foreground-color: #ffffff;--mat-fab-small-state-layer-color: #ffffff}[matMiniFab].acp-dark{--mat-fab-small-container-color: #1f2937;--mat-fab-small-foreground-color: #ffffff;--mat-fab-small-state-layer-color: #ffffff}.acp-square{--mat-button-filled-container-shape: 8px;--mat-button-outlined-container-shape: 8px;--mat-button-protected-container-shape: 8px;--mat-button-text-container-shape: 8px;--mat-button-tonal-container-shape: 8px;--mat-icon-button-container-shape: 8px}.acp-block{width:100%}.acp-medium{--mat-checkbox-touch-target-display: block;--mat-checkbox-state-layer-size: 36px;--mat-chip-container-height: 28px;--mat-expansion-header-collapsed-state-height: 44px;--mat-expansion-header-expanded-state-height: 60px;--mat-fab-small-touch-target-display: ;--mat-fab-touch-target-display: block;--mat-button-filled-touch-target-display: block;--mat-button-filled-container-height: 36px;--mat-button-outlined-container-height: 36px;--mat-button-outlined-touch-target-display: block;--mat-button-protected-touch-target-display: block;--mat-button-protected-container-height: 36px;--mat-button-text-touch-target-display: block;--mat-button-text-container-height: 36px;--mat-button-tonal-container-height: 36px;--mat-button-tonal-touch-target-display: block;--mat-form-field-container-height: 52px;--mat-form-field-filled-label-display: block;--mat-form-field-container-vertical-padding: 14px;--mat-form-field-filled-with-label-container-padding-top: 22px;--mat-form-field-filled-with-label-container-padding-bottom: 6px;--mat-icon-button-touch-target-display: block;--mat-icon-button-state-layer-size: 36px;--mat-list-list-item-leading-icon-start-space: 12px;--mat-list-list-item-leading-icon-end-space: 12px;--mat-list-list-item-one-line-container-height: 44px;--mat-list-list-item-two-line-container-height: 60px;--mat-list-list-item-three-line-container-height: 84px;--mat-paginator-container-size: 52px;--mat-paginator-form-field-container-height: 40px;--mat-paginator-form-field-container-vertical-padding: 8px;--mat-paginator-touch-target-display: block;--mat-radio-touch-target-display: block;--mat-radio-state-layer-size: 36px;--mat-tab-container-height: 44px;--mat-select-arrow-transform: translateY(-8px);--mat-button-toggle-height: 40px;--mat-stepper-header-height: 68px;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px;--mat-toolbar-standard-height: 60px;--mat-toolbar-mobile-height: 52px;--mat-tree-node-min-height: 44px;--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px;--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12;--mat-button-filled-horizontal-padding: 20px;--mat-button-outlined-horizontal-padding: 20px;--mat-button-protected-horizontal-padding: 20px;--mat-button-text-horizontal-padding: 20px;--mat-button-tonal-horizontal-padding: 20px;--mat-button-toggle-height: 36px}.acp-small{--mat-checkbox-touch-target-display: none;--mat-checkbox-state-layer-size: 32px;--mat-chip-container-height: 24px;--mat-expansion-header-collapsed-state-height: 40px;--mat-expansion-header-expanded-state-height: 56px;--mat-fab-small-touch-target-display: ;--mat-fab-touch-target-display: none;--mat-button-filled-touch-target-display: none;--mat-button-filled-container-height: 32px;--mat-button-outlined-container-height: 32px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-touch-target-display: none;--mat-button-protected-container-height: 32px;--mat-button-text-touch-target-display: none;--mat-button-text-container-height: 32px;--mat-button-tonal-container-height: 32px;--mat-button-tonal-touch-target-display: none;--mat-form-field-container-height: 48px;--mat-form-field-filled-label-display: none;--mat-form-field-container-vertical-padding: 12px;--mat-form-field-filled-with-label-container-padding-top: 12px;--mat-form-field-filled-with-label-container-padding-bottom: 12px;--mat-icon-button-touch-target-display: none;--mat-icon-button-state-layer-size: 32px;--mat-list-list-item-leading-icon-start-space: 8px;--mat-list-list-item-leading-icon-end-space: 8px;--mat-list-list-item-one-line-container-height: 40px;--mat-list-list-item-two-line-container-height: 56px;--mat-list-list-item-three-line-container-height: 80px;--mat-paginator-container-size: 48px;--mat-paginator-form-field-container-height: 40px;--mat-paginator-form-field-container-vertical-padding: 8px;--mat-paginator-touch-target-display: none;--mat-radio-touch-target-display: none;--mat-radio-state-layer-size: 32px;--mat-tab-container-height: 40px;--mat-select-arrow-transform: none;--mat-button-toggle-height: 40px;--mat-stepper-header-height: 64px;--mat-table-header-container-height: 48px;--mat-table-footer-container-height: 44px;--mat-table-row-item-container-height: 44px;--mat-toolbar-standard-height: 56px;--mat-toolbar-mobile-height: 48px;--mat-tree-node-min-height: 40px;--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px;--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12;--mat-button-filled-horizontal-padding: 16px;--mat-button-outlined-horizontal-padding: 16px;--mat-button-protected-horizontal-padding: 16px;--mat-button-text-horizontal-padding: 16px;--mat-button-tonal-horizontal-padding: 16px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: ButtonLoaderDirective, selector: "button[acpLoading]", inputs: ["acpLoading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpButton, isStandalone: true, selector: "acp-button", usesInheritance: true, ngImport: i0, template: "@if (variant() === 'icon') {\n<button\n  matIconButton\n  [disabled]=\"isDisabled()\"\n  [disableRipple]=\"disableRipple()\"\n  [acpLoading]=\"loading()\"\n  [type]=\"type()\"\n  [attr.form]=\"form()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [ngClass]=\"[colorClass(), squareClass(), blockClass(), sizeClass()]\"\n  (click)=\"clicked.emit()\"\n  (focus)=\"focused.emit()\"\n  (blur)=\"blurred.emit()\"\n>\n  <mat-icon>{{icon()}}</mat-icon>\n</button>\n} @else if (variant() === 'fab') {\n<button\n  matFab\n  [extended]=\"extended()\"\n  [disabled]=\"isDisabled()\"\n  [disableRipple]=\"disableRipple()\"\n  [acpLoading]=\"loading()\"\n  [type]=\"type()\"\n  [attr.form]=\"form()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [ngClass]=\"[colorClass(), sizeClass()]\"\n  (click)=\"clicked.emit()\"\n  (focus)=\"focused.emit()\"\n  (blur)=\"blurred.emit()\"\n>\n  @if (icon()) { <mat-icon>{{icon()}}</mat-icon> } @if (extended()) { @if (hasText()) { {{text()}} }\n  @else { <ng-content></ng-content> } }\n</button>\n} @else if (variant() === 'mini-fab') {\n<button\n  matMiniFab\n  [disabled]=\"isDisabled()\"\n  [disableRipple]=\"disableRipple()\"\n  [acpLoading]=\"loading()\"\n  [type]=\"type()\"\n  [attr.form]=\"form()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [ngClass]=\"[colorClass(), sizeClass()]\"\n  (click)=\"clicked.emit()\"\n  (focus)=\"focused.emit()\"\n  (blur)=\"blurred.emit()\"\n>\n  <mat-icon>{{icon()}}</mat-icon>\n</button>\n} @else {\n<button\n  [matButton]=\"appearance()\"\n  [disabled]=\"isDisabled()\"\n  [disableRipple]=\"disableRipple()\"\n  [acpLoading]=\"loading()\"\n  [showProgress]=\"showProgress()\"\n  [type]=\"type()\"\n  [attr.form]=\"form()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [ngClass]=\"[colorClass(), squareClass(), blockClass(), sizeClass()]\"\n  (click)=\"clicked.emit()\"\n  (focus)=\"focused.emit()\"\n  (blur)=\"blurred.emit()\"\n>\n  @if (icon()) { <mat-icon>{{icon()}}</mat-icon> } @if (hasText()) { {{text()}} } @else {\n  <ng-content></ng-content> } @if (showProgress() && progressType() === 'spinner') {\n  <mat-progress-spinner\n    progressIndicator\n    mode=\"indeterminate\"\n    [diameter]=\"20\"\n    aria-label=\"Loading\"\n  />\n  } @if (showProgress() && progressType() === 'text') {\n  <div progressIndicator role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n    {{ progressText() }}\n  </div>\n  } @if (suffixIcon()) {\n  <mat-icon iconPositionEnd>{{suffixIcon()}}</mat-icon> }\n</button>\n}\n", styles: [".acp-primary{--mat-button-filled-container-color: var(--acp-theme-primary-color);--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: var(--acp-theme-primary-color);--mat-button-protected-label-text-color: var(--acp-theme-primary-color);--mat-button-text-label-text-color: var(--acp-theme-primary-color);--mat-button-text-state-layer-color: var(--acp-theme-primary-color)}.acp-secondary{--mat-button-filled-container-color: var(--mat-sys-secondary);--mat-button-filled-label-text-color: var(--mat-sys-on-secondary);--mat-button-outlined-label-text-color: var(--mat-sys-secondary);--mat-button-protected-label-text-color: var(--mat-sys-secondary);--mat-button-text-label-text-color: var(--mat-sys-secondary);--mat-button-text-state-layer-color: var(--mat-sys-secondary)}.acp-accent{--mat-button-filled-container-color: var(--mat-sys-tertiary);--mat-button-filled-label-text-color: var(--mat-sys-on-tertiary);--mat-button-outlined-label-text-color: var(--mat-sys-tertiary);--mat-button-protected-label-text-color: var(--mat-sys-tertiary);--mat-button-text-label-text-color: var(--mat-sys-tertiary);--mat-button-text-state-layer-color: var(--mat-sys-tertiary)}.acp-error{--mat-button-filled-container-color: var(--mat-sys-error);--mat-button-filled-label-text-color: var(--mat-sys-on-error);--mat-button-outlined-label-text-color: var(--mat-sys-error);--mat-button-protected-label-text-color: var(--mat-sys-error);--mat-button-text-label-text-color: var(--mat-sys-error);--mat-button-text-state-layer-color: var(--mat-sys-error)}.acp-success{--mat-button-filled-container-color: #4caf50;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #4caf50;--mat-button-protected-label-text-color: #4caf50;--mat-button-text-label-text-color: #4caf50;--mat-button-text-state-layer-color: #4caf50}.acp-warning{--mat-button-filled-container-color: #f59e0b;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #f59e0b;--mat-button-protected-label-text-color: #f59e0b;--mat-button-text-label-text-color: #f59e0b;--mat-button-text-state-layer-color: #f59e0b}.acp-info{--mat-button-filled-container-color: #3b82f6;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #3b82f6;--mat-button-protected-label-text-color: #3b82f6;--mat-button-text-label-text-color: #3b82f6;--mat-button-text-state-layer-color: #3b82f6}.acp-dark{--mat-button-filled-container-color: #1f2937;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: light-dark(#1f2937, #ffffff);--mat-button-protected-label-text-color: light-dark(#1f2937, #ffffff);--mat-button-text-label-text-color: light-dark(#1f2937, #ffffff);--mat-button-text-state-layer-color: light-dark(#1f2937, #ffffff)}[matIconButton].acp-primary{--mat-icon-color: var(--acp-theme-primary-color)}[matIconButton].acp-secondary{--mat-icon-color: var(--mat-sys-secondary)}[matIconButton].acp-accent{--mat-icon-color: var(--mat-sys-tertiary)}[matIconButton].acp-error{--mat-icon-color: var(--mat-sys-error)}[matIconButton].acp-success{--mat-icon-color: #10b981}[matIconButton].acp-warning{--mat-icon-color: #f59e0b}[matIconButton].acp-info{--mat-icon-color: #3b82f6}[matIconButton].acp-light{--mat-icon-color: #ffffff}[matFab].acp-primary{--mat-fab-container-color: var(--acp-theme-primary-color);--mat-fab-foreground-color: #ffffff;--mat-fab-state-layer-color: #ffffff}[matFab].acp-secondary{--mat-fab-container-color: var(--mat-sys-secondary);--mat-fab-foreground-color: var(--mat-sys-on-secondary);--mat-fab-state-layer-color: var(--mat-sys-on-secondary)}[matFab].acp-accent{--mat-fab-container-color: var(--mat-sys-tertiary);--mat-fab-foreground-color: var(--mat-sys-on-tertiary);--mat-fab-state-layer-color: var(--mat-sys-on-tertiary)}[matFab].acp-error{--mat-fab-container-color: var(--mat-sys-error);--mat-fab-foreground-color: var(--mat-sys-on-error);--mat-fab-state-layer-color: var(--mat-sys-on-error)}[matFab].acp-success{--mat-fab-container-color: #4caf50;--mat-fab-foreground-color: #ffffff;--mat-fab-state-layer-color: #ffffff}[matFab].acp-warning{--mat-fab-container-color: #f59e0b;--mat-fab-foreground-color: #ffffff;--mat-fab-state-layer-color: #ffffff}[matFab].acp-info{--mat-fab-container-color: #3b82f6;--mat-fab-foreground-color: #ffffff;--mat-fab-state-layer-color: #ffffff}[matFab].acp-dark{--mat-fab-container-color: #1f2937;--mat-fab-foreground-color: #ffffff;--mat-fab-state-layer-color: #ffffff}[matMiniFab].acp-primary{--mat-fab-small-container-color: var(--acp-theme-primary-color);--mat-fab-small-foreground-color: #ffffff;--mat-fab-small-state-layer-color: #ffffff}[matMiniFab].acp-secondary{--mat-fab-small-container-color: var(--mat-sys-secondary);--mat-fab-small-foreground-color: var(--mat-sys-on-secondary);--mat-fab-small-state-layer-color: var(--mat-sys-on-secondary)}[matMiniFab].acp-accent{--mat-fab-small-container-color: var(--mat-sys-tertiary);--mat-fab-small-foreground-color: var(--mat-sys-on-tertiary);--mat-fab-small-state-layer-color: var(--mat-sys-on-tertiary)}[matMiniFab].acp-error{--mat-fab-small-container-color: var(--mat-sys-error);--mat-fab-small-foreground-color: var(--mat-sys-on-error);--mat-fab-small-state-layer-color: var(--mat-sys-on-error)}[matMiniFab].acp-success{--mat-fab-small-container-color: #4caf50;--mat-fab-small-foreground-color: #ffffff;--mat-fab-small-state-layer-color: #ffffff}[matMiniFab].acp-warning{--mat-fab-small-container-color: #f59e0b;--mat-fab-small-foreground-color: #ffffff;--mat-fab-small-state-layer-color: #ffffff}[matMiniFab].acp-info{--mat-fab-small-container-color: #3b82f6;--mat-fab-small-foreground-color: #ffffff;--mat-fab-small-state-layer-color: #ffffff}[matMiniFab].acp-dark{--mat-fab-small-container-color: #1f2937;--mat-fab-small-foreground-color: #ffffff;--mat-fab-small-state-layer-color: #ffffff}.acp-square{--mat-button-filled-container-shape: 8px;--mat-button-outlined-container-shape: 8px;--mat-button-protected-container-shape: 8px;--mat-button-text-container-shape: 8px;--mat-button-tonal-container-shape: 8px;--mat-icon-button-container-shape: 8px}.acp-block{width:100%}.acp-medium{--mat-checkbox-touch-target-display: block;--mat-checkbox-state-layer-size: 36px;--mat-chip-container-height: 28px;--mat-expansion-header-collapsed-state-height: 44px;--mat-expansion-header-expanded-state-height: 60px;--mat-fab-small-touch-target-display: ;--mat-fab-touch-target-display: block;--mat-button-filled-touch-target-display: block;--mat-button-filled-container-height: 36px;--mat-button-outlined-container-height: 36px;--mat-button-outlined-touch-target-display: block;--mat-button-protected-touch-target-display: block;--mat-button-protected-container-height: 36px;--mat-button-text-touch-target-display: block;--mat-button-text-container-height: 36px;--mat-button-tonal-container-height: 36px;--mat-button-tonal-touch-target-display: block;--mat-form-field-container-height: 52px;--mat-form-field-filled-label-display: block;--mat-form-field-container-vertical-padding: 14px;--mat-form-field-filled-with-label-container-padding-top: 22px;--mat-form-field-filled-with-label-container-padding-bottom: 6px;--mat-icon-button-touch-target-display: block;--mat-icon-button-state-layer-size: 36px;--mat-list-list-item-leading-icon-start-space: 12px;--mat-list-list-item-leading-icon-end-space: 12px;--mat-list-list-item-one-line-container-height: 44px;--mat-list-list-item-two-line-container-height: 60px;--mat-list-list-item-three-line-container-height: 84px;--mat-paginator-container-size: 52px;--mat-paginator-form-field-container-height: 40px;--mat-paginator-form-field-container-vertical-padding: 8px;--mat-paginator-touch-target-display: block;--mat-radio-touch-target-display: block;--mat-radio-state-layer-size: 36px;--mat-tab-container-height: 44px;--mat-select-arrow-transform: translateY(-8px);--mat-button-toggle-height: 40px;--mat-stepper-header-height: 68px;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px;--mat-toolbar-standard-height: 60px;--mat-toolbar-mobile-height: 52px;--mat-tree-node-min-height: 44px;--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px;--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12;--mat-button-filled-horizontal-padding: 20px;--mat-button-outlined-horizontal-padding: 20px;--mat-button-protected-horizontal-padding: 20px;--mat-button-text-horizontal-padding: 20px;--mat-button-tonal-horizontal-padding: 20px;--mat-button-toggle-height: 36px}.acp-small{--mat-checkbox-touch-target-display: none;--mat-checkbox-state-layer-size: 32px;--mat-chip-container-height: 24px;--mat-expansion-header-collapsed-state-height: 40px;--mat-expansion-header-expanded-state-height: 56px;--mat-fab-small-touch-target-display: ;--mat-fab-touch-target-display: none;--mat-button-filled-touch-target-display: none;--mat-button-filled-container-height: 32px;--mat-button-outlined-container-height: 32px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-touch-target-display: none;--mat-button-protected-container-height: 32px;--mat-button-text-touch-target-display: none;--mat-button-text-container-height: 32px;--mat-button-tonal-container-height: 32px;--mat-button-tonal-touch-target-display: none;--mat-form-field-container-height: 48px;--mat-form-field-filled-label-display: none;--mat-form-field-container-vertical-padding: 12px;--mat-form-field-filled-with-label-container-padding-top: 12px;--mat-form-field-filled-with-label-container-padding-bottom: 12px;--mat-icon-button-touch-target-display: none;--mat-icon-button-state-layer-size: 32px;--mat-list-list-item-leading-icon-start-space: 8px;--mat-list-list-item-leading-icon-end-space: 8px;--mat-list-list-item-one-line-container-height: 40px;--mat-list-list-item-two-line-container-height: 56px;--mat-list-list-item-three-line-container-height: 80px;--mat-paginator-container-size: 48px;--mat-paginator-form-field-container-height: 40px;--mat-paginator-form-field-container-vertical-padding: 8px;--mat-paginator-touch-target-display: none;--mat-radio-touch-target-display: none;--mat-radio-state-layer-size: 32px;--mat-tab-container-height: 40px;--mat-select-arrow-transform: none;--mat-button-toggle-height: 40px;--mat-stepper-header-height: 64px;--mat-table-header-container-height: 48px;--mat-table-footer-container-height: 44px;--mat-table-row-item-container-height: 44px;--mat-toolbar-standard-height: 56px;--mat-toolbar-mobile-height: 48px;--mat-tree-node-min-height: 40px;--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px;--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12;--mat-button-filled-horizontal-padding: 16px;--mat-button-outlined-horizontal-padding: 16px;--mat-button-protected-horizontal-padding: 16px;--mat-button-text-horizontal-padding: 16px;--mat-button-tonal-horizontal-padding: 16px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: ButtonLoaderDirective, selector: "button[acpLoading]", inputs: ["acpLoading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpButton, decorators: [{
             type: Component,
@@ -1533,25 +1725,840 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         MatIconModule,
                         MatProgressSpinnerModule,
                         ButtonLoaderDirective,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (variant() === 'icon') {\n<button\n  matIconButton\n  [disabled]=\"isDisabled()\"\n  [disableRipple]=\"disableRipple()\"\n  [acpLoading]=\"loading()\"\n  [type]=\"type()\"\n  [ngClass]=\"[colorClass(), squareClass(), blockClass(), sizeClass()]\"\n  (click)=\"clicked.emit()\"\n  (focus)=\"focused.emit()\"\n  (blur)=\"blurred.emit()\"\n>\n  <mat-icon>{{icon()}}</mat-icon>\n</button>\n} @else if (variant() === 'fab') {\n<button\n  matFab\n  [extended]=\"extended()\"\n  [disabled]=\"isDisabled()\"\n  [disableRipple]=\"disableRipple()\"\n  [acpLoading]=\"loading()\"\n  [type]=\"type()\"\n  [ngClass]=\"[colorClass(), sizeClass()]\"\n  (click)=\"clicked.emit()\"\n  (focus)=\"focused.emit()\"\n  (blur)=\"blurred.emit()\"\n>\n  @if (icon()) { <mat-icon>{{icon()}}</mat-icon> } @if (extended()) { @if (hasText()) { {{text()}} }\n  @else { <ng-content></ng-content> } }\n</button>\n} @else if (variant() === 'mini-fab') {\n<button\n  matMiniFab\n  [disabled]=\"isDisabled()\"\n  [disableRipple]=\"disableRipple()\"\n  [acpLoading]=\"loading()\"\n  [type]=\"type()\"\n  [ngClass]=\"[colorClass(), sizeClass()]\"\n  (click)=\"clicked.emit()\"\n  (focus)=\"focused.emit()\"\n  (blur)=\"blurred.emit()\"\n>\n  <mat-icon>{{icon()}}</mat-icon>\n</button>\n} @else {\n<button\n  [matButton]=\"appearance()\"\n  [disabled]=\"isDisabled()\"\n  [disableRipple]=\"disableRipple()\"\n  [acpLoading]=\"loading()\"\n  [showProgress]=\"showProgress()\"\n  [type]=\"type()\"\n  [ngClass]=\"[colorClass(), squareClass(), blockClass(), sizeClass()]\"\n  (click)=\"clicked.emit()\"\n  (focus)=\"focused.emit()\"\n  (blur)=\"blurred.emit()\"\n>\n  @if (icon()) { <mat-icon>{{icon()}}</mat-icon> } @if (hasText()) { {{text()}} } @else {\n  <ng-content></ng-content> } @if (showProgress() && progressType() === 'spinner') {\n  <mat-progress-spinner\n    progressIndicator\n    mode=\"indeterminate\"\n    [diameter]=\"20\"\n    aria-label=\"Loading\"\n  />\n  } @if (showProgress() && progressType() === 'text') {\n  <div progressIndicator role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n    {{ progressText() }}\n  </div>\n  } @if (suffixIcon()) {\n  <mat-icon iconPositionEnd>{{suffixIcon()}}</mat-icon> }\n</button>\n}\n", styles: [".acp-primary{--mat-button-filled-container-color: var(--acp-theme-primary-color);--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: var(--acp-theme-primary-color);--mat-button-protected-label-text-color: var(--acp-theme-primary-color);--mat-button-text-label-text-color: var(--acp-theme-primary-color);--mat-button-text-state-layer-color: var(--acp-theme-primary-color)}.acp-secondary{--mat-button-filled-container-color: var(--mat-sys-secondary);--mat-button-filled-label-text-color: var(--mat-sys-on-secondary);--mat-button-outlined-label-text-color: var(--mat-sys-secondary);--mat-button-protected-label-text-color: var(--mat-sys-secondary);--mat-button-text-label-text-color: var(--mat-sys-secondary);--mat-button-text-state-layer-color: var(--mat-sys-secondary)}.acp-accent{--mat-button-filled-container-color: var(--mat-sys-tertiary);--mat-button-filled-label-text-color: var(--mat-sys-on-tertiary);--mat-button-outlined-label-text-color: var(--mat-sys-tertiary);--mat-button-protected-label-text-color: var(--mat-sys-tertiary);--mat-button-text-label-text-color: var(--mat-sys-tertiary);--mat-button-text-state-layer-color: var(--mat-sys-tertiary)}.acp-error{--mat-button-filled-container-color: var(--mat-sys-error);--mat-button-filled-label-text-color: var(--mat-sys-on-error);--mat-button-outlined-label-text-color: var(--mat-sys-error);--mat-button-protected-label-text-color: var(--mat-sys-error);--mat-button-text-label-text-color: var(--mat-sys-error);--mat-button-text-state-layer-color: var(--mat-sys-error)}.acp-success{--mat-button-filled-container-color: #4caf50;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #4caf50;--mat-button-protected-label-text-color: #4caf50;--mat-button-text-label-text-color: #4caf50;--mat-button-text-state-layer-color: #4caf50}.acp-warning{--mat-button-filled-container-color: #f59e0b;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #f59e0b;--mat-button-protected-label-text-color: #f59e0b;--mat-button-text-label-text-color: #f59e0b;--mat-button-text-state-layer-color: #f59e0b}.acp-info{--mat-button-filled-container-color: #3b82f6;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #3b82f6;--mat-button-protected-label-text-color: #3b82f6;--mat-button-text-label-text-color: #3b82f6;--mat-button-text-state-layer-color: #3b82f6}.acp-dark{--mat-button-filled-container-color: #1f2937;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: light-dark(#1f2937, #ffffff);--mat-button-protected-label-text-color: light-dark(#1f2937, #ffffff);--mat-button-text-label-text-color: light-dark(#1f2937, #ffffff);--mat-button-text-state-layer-color: light-dark(#1f2937, #ffffff)}[matIconButton].acp-primary{--mat-icon-color: var(--acp-theme-primary-color)}[matIconButton].acp-secondary{--mat-icon-color: var(--mat-sys-secondary)}[matIconButton].acp-accent{--mat-icon-color: var(--mat-sys-tertiary)}[matIconButton].acp-error{--mat-icon-color: var(--mat-sys-error)}[matIconButton].acp-success{--mat-icon-color: #10b981}[matIconButton].acp-warning{--mat-icon-color: #f59e0b}[matIconButton].acp-info{--mat-icon-color: #3b82f6}[matFab].acp-primary{--mat-fab-container-color: var(--acp-theme-primary-color);--mat-fab-foreground-color: #ffffff;--mat-fab-state-layer-color: #ffffff}[matFab].acp-secondary{--mat-fab-container-color: var(--mat-sys-secondary);--mat-fab-foreground-color: var(--mat-sys-on-secondary);--mat-fab-state-layer-color: var(--mat-sys-on-secondary)}[matFab].acp-accent{--mat-fab-container-color: var(--mat-sys-tertiary);--mat-fab-foreground-color: var(--mat-sys-on-tertiary);--mat-fab-state-layer-color: var(--mat-sys-on-tertiary)}[matFab].acp-error{--mat-fab-container-color: var(--mat-sys-error);--mat-fab-foreground-color: var(--mat-sys-on-error);--mat-fab-state-layer-color: var(--mat-sys-on-error)}[matFab].acp-success{--mat-fab-container-color: #4caf50;--mat-fab-foreground-color: #ffffff;--mat-fab-state-layer-color: #ffffff}[matFab].acp-warning{--mat-fab-container-color: #f59e0b;--mat-fab-foreground-color: #ffffff;--mat-fab-state-layer-color: #ffffff}[matFab].acp-info{--mat-fab-container-color: #3b82f6;--mat-fab-foreground-color: #ffffff;--mat-fab-state-layer-color: #ffffff}[matFab].acp-dark{--mat-fab-container-color: #1f2937;--mat-fab-foreground-color: #ffffff;--mat-fab-state-layer-color: #ffffff}[matMiniFab].acp-primary{--mat-fab-small-container-color: var(--acp-theme-primary-color);--mat-fab-small-foreground-color: #ffffff;--mat-fab-small-state-layer-color: #ffffff}[matMiniFab].acp-secondary{--mat-fab-small-container-color: var(--mat-sys-secondary);--mat-fab-small-foreground-color: var(--mat-sys-on-secondary);--mat-fab-small-state-layer-color: var(--mat-sys-on-secondary)}[matMiniFab].acp-accent{--mat-fab-small-container-color: var(--mat-sys-tertiary);--mat-fab-small-foreground-color: var(--mat-sys-on-tertiary);--mat-fab-small-state-layer-color: var(--mat-sys-on-tertiary)}[matMiniFab].acp-error{--mat-fab-small-container-color: var(--mat-sys-error);--mat-fab-small-foreground-color: var(--mat-sys-on-error);--mat-fab-small-state-layer-color: var(--mat-sys-on-error)}[matMiniFab].acp-success{--mat-fab-small-container-color: #4caf50;--mat-fab-small-foreground-color: #ffffff;--mat-fab-small-state-layer-color: #ffffff}[matMiniFab].acp-warning{--mat-fab-small-container-color: #f59e0b;--mat-fab-small-foreground-color: #ffffff;--mat-fab-small-state-layer-color: #ffffff}[matMiniFab].acp-info{--mat-fab-small-container-color: #3b82f6;--mat-fab-small-foreground-color: #ffffff;--mat-fab-small-state-layer-color: #ffffff}[matMiniFab].acp-dark{--mat-fab-small-container-color: #1f2937;--mat-fab-small-foreground-color: #ffffff;--mat-fab-small-state-layer-color: #ffffff}.acp-square{--mat-button-filled-container-shape: 8px;--mat-button-outlined-container-shape: 8px;--mat-button-protected-container-shape: 8px;--mat-button-text-container-shape: 8px;--mat-button-tonal-container-shape: 8px;--mat-icon-button-container-shape: 8px}.acp-block{width:100%}.acp-medium{--mat-checkbox-touch-target-display: block;--mat-checkbox-state-layer-size: 36px;--mat-chip-container-height: 28px;--mat-expansion-header-collapsed-state-height: 44px;--mat-expansion-header-expanded-state-height: 60px;--mat-fab-small-touch-target-display: ;--mat-fab-touch-target-display: block;--mat-button-filled-touch-target-display: block;--mat-button-filled-container-height: 36px;--mat-button-outlined-container-height: 36px;--mat-button-outlined-touch-target-display: block;--mat-button-protected-touch-target-display: block;--mat-button-protected-container-height: 36px;--mat-button-text-touch-target-display: block;--mat-button-text-container-height: 36px;--mat-button-tonal-container-height: 36px;--mat-button-tonal-touch-target-display: block;--mat-form-field-container-height: 52px;--mat-form-field-filled-label-display: block;--mat-form-field-container-vertical-padding: 14px;--mat-form-field-filled-with-label-container-padding-top: 22px;--mat-form-field-filled-with-label-container-padding-bottom: 6px;--mat-icon-button-touch-target-display: block;--mat-icon-button-state-layer-size: 36px;--mat-list-list-item-leading-icon-start-space: 12px;--mat-list-list-item-leading-icon-end-space: 12px;--mat-list-list-item-one-line-container-height: 44px;--mat-list-list-item-two-line-container-height: 60px;--mat-list-list-item-three-line-container-height: 84px;--mat-paginator-container-size: 52px;--mat-paginator-form-field-container-height: 40px;--mat-paginator-form-field-container-vertical-padding: 8px;--mat-paginator-touch-target-display: block;--mat-radio-touch-target-display: block;--mat-radio-state-layer-size: 36px;--mat-tab-container-height: 44px;--mat-select-arrow-transform: translateY(-8px);--mat-button-toggle-height: 40px;--mat-stepper-header-height: 68px;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px;--mat-toolbar-standard-height: 60px;--mat-toolbar-mobile-height: 52px;--mat-tree-node-min-height: 44px;--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px;--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12;--mat-button-filled-horizontal-padding: 20px;--mat-button-outlined-horizontal-padding: 20px;--mat-button-protected-horizontal-padding: 20px;--mat-button-text-horizontal-padding: 20px;--mat-button-tonal-horizontal-padding: 20px;--mat-button-toggle-height: 36px}.acp-small{--mat-checkbox-touch-target-display: none;--mat-checkbox-state-layer-size: 32px;--mat-chip-container-height: 24px;--mat-expansion-header-collapsed-state-height: 40px;--mat-expansion-header-expanded-state-height: 56px;--mat-fab-small-touch-target-display: ;--mat-fab-touch-target-display: none;--mat-button-filled-touch-target-display: none;--mat-button-filled-container-height: 32px;--mat-button-outlined-container-height: 32px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-touch-target-display: none;--mat-button-protected-container-height: 32px;--mat-button-text-touch-target-display: none;--mat-button-text-container-height: 32px;--mat-button-tonal-container-height: 32px;--mat-button-tonal-touch-target-display: none;--mat-form-field-container-height: 48px;--mat-form-field-filled-label-display: none;--mat-form-field-container-vertical-padding: 12px;--mat-form-field-filled-with-label-container-padding-top: 12px;--mat-form-field-filled-with-label-container-padding-bottom: 12px;--mat-icon-button-touch-target-display: none;--mat-icon-button-state-layer-size: 32px;--mat-list-list-item-leading-icon-start-space: 8px;--mat-list-list-item-leading-icon-end-space: 8px;--mat-list-list-item-one-line-container-height: 40px;--mat-list-list-item-two-line-container-height: 56px;--mat-list-list-item-three-line-container-height: 80px;--mat-paginator-container-size: 48px;--mat-paginator-form-field-container-height: 40px;--mat-paginator-form-field-container-vertical-padding: 8px;--mat-paginator-touch-target-display: none;--mat-radio-touch-target-display: none;--mat-radio-state-layer-size: 32px;--mat-tab-container-height: 40px;--mat-select-arrow-transform: none;--mat-button-toggle-height: 40px;--mat-stepper-header-height: 64px;--mat-table-header-container-height: 48px;--mat-table-footer-container-height: 44px;--mat-table-row-item-container-height: 44px;--mat-toolbar-standard-height: 56px;--mat-toolbar-mobile-height: 48px;--mat-tree-node-min-height: 40px;--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px;--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12;--mat-button-filled-horizontal-padding: 16px;--mat-button-outlined-horizontal-padding: 16px;--mat-button-protected-horizontal-padding: 16px;--mat-button-text-horizontal-padding: 16px;--mat-button-tonal-horizontal-padding: 16px}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (variant() === 'icon') {\n<button\n  matIconButton\n  [disabled]=\"isDisabled()\"\n  [disableRipple]=\"disableRipple()\"\n  [acpLoading]=\"loading()\"\n  [type]=\"type()\"\n  [attr.form]=\"form()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [ngClass]=\"[colorClass(), squareClass(), blockClass(), sizeClass()]\"\n  (click)=\"clicked.emit()\"\n  (focus)=\"focused.emit()\"\n  (blur)=\"blurred.emit()\"\n>\n  <mat-icon>{{icon()}}</mat-icon>\n</button>\n} @else if (variant() === 'fab') {\n<button\n  matFab\n  [extended]=\"extended()\"\n  [disabled]=\"isDisabled()\"\n  [disableRipple]=\"disableRipple()\"\n  [acpLoading]=\"loading()\"\n  [type]=\"type()\"\n  [attr.form]=\"form()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [ngClass]=\"[colorClass(), sizeClass()]\"\n  (click)=\"clicked.emit()\"\n  (focus)=\"focused.emit()\"\n  (blur)=\"blurred.emit()\"\n>\n  @if (icon()) { <mat-icon>{{icon()}}</mat-icon> } @if (extended()) { @if (hasText()) { {{text()}} }\n  @else { <ng-content></ng-content> } }\n</button>\n} @else if (variant() === 'mini-fab') {\n<button\n  matMiniFab\n  [disabled]=\"isDisabled()\"\n  [disableRipple]=\"disableRipple()\"\n  [acpLoading]=\"loading()\"\n  [type]=\"type()\"\n  [attr.form]=\"form()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [ngClass]=\"[colorClass(), sizeClass()]\"\n  (click)=\"clicked.emit()\"\n  (focus)=\"focused.emit()\"\n  (blur)=\"blurred.emit()\"\n>\n  <mat-icon>{{icon()}}</mat-icon>\n</button>\n} @else {\n<button\n  [matButton]=\"appearance()\"\n  [disabled]=\"isDisabled()\"\n  [disableRipple]=\"disableRipple()\"\n  [acpLoading]=\"loading()\"\n  [showProgress]=\"showProgress()\"\n  [type]=\"type()\"\n  [attr.form]=\"form()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [ngClass]=\"[colorClass(), squareClass(), blockClass(), sizeClass()]\"\n  (click)=\"clicked.emit()\"\n  (focus)=\"focused.emit()\"\n  (blur)=\"blurred.emit()\"\n>\n  @if (icon()) { <mat-icon>{{icon()}}</mat-icon> } @if (hasText()) { {{text()}} } @else {\n  <ng-content></ng-content> } @if (showProgress() && progressType() === 'spinner') {\n  <mat-progress-spinner\n    progressIndicator\n    mode=\"indeterminate\"\n    [diameter]=\"20\"\n    aria-label=\"Loading\"\n  />\n  } @if (showProgress() && progressType() === 'text') {\n  <div progressIndicator role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n    {{ progressText() }}\n  </div>\n  } @if (suffixIcon()) {\n  <mat-icon iconPositionEnd>{{suffixIcon()}}</mat-icon> }\n</button>\n}\n", styles: [".acp-primary{--mat-button-filled-container-color: var(--acp-theme-primary-color);--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: var(--acp-theme-primary-color);--mat-button-protected-label-text-color: var(--acp-theme-primary-color);--mat-button-text-label-text-color: var(--acp-theme-primary-color);--mat-button-text-state-layer-color: var(--acp-theme-primary-color)}.acp-secondary{--mat-button-filled-container-color: var(--mat-sys-secondary);--mat-button-filled-label-text-color: var(--mat-sys-on-secondary);--mat-button-outlined-label-text-color: var(--mat-sys-secondary);--mat-button-protected-label-text-color: var(--mat-sys-secondary);--mat-button-text-label-text-color: var(--mat-sys-secondary);--mat-button-text-state-layer-color: var(--mat-sys-secondary)}.acp-accent{--mat-button-filled-container-color: var(--mat-sys-tertiary);--mat-button-filled-label-text-color: var(--mat-sys-on-tertiary);--mat-button-outlined-label-text-color: var(--mat-sys-tertiary);--mat-button-protected-label-text-color: var(--mat-sys-tertiary);--mat-button-text-label-text-color: var(--mat-sys-tertiary);--mat-button-text-state-layer-color: var(--mat-sys-tertiary)}.acp-error{--mat-button-filled-container-color: var(--mat-sys-error);--mat-button-filled-label-text-color: var(--mat-sys-on-error);--mat-button-outlined-label-text-color: var(--mat-sys-error);--mat-button-protected-label-text-color: var(--mat-sys-error);--mat-button-text-label-text-color: var(--mat-sys-error);--mat-button-text-state-layer-color: var(--mat-sys-error)}.acp-success{--mat-button-filled-container-color: #4caf50;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #4caf50;--mat-button-protected-label-text-color: #4caf50;--mat-button-text-label-text-color: #4caf50;--mat-button-text-state-layer-color: #4caf50}.acp-warning{--mat-button-filled-container-color: #f59e0b;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #f59e0b;--mat-button-protected-label-text-color: #f59e0b;--mat-button-text-label-text-color: #f59e0b;--mat-button-text-state-layer-color: #f59e0b}.acp-info{--mat-button-filled-container-color: #3b82f6;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #3b82f6;--mat-button-protected-label-text-color: #3b82f6;--mat-button-text-label-text-color: #3b82f6;--mat-button-text-state-layer-color: #3b82f6}.acp-dark{--mat-button-filled-container-color: #1f2937;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: light-dark(#1f2937, #ffffff);--mat-button-protected-label-text-color: light-dark(#1f2937, #ffffff);--mat-button-text-label-text-color: light-dark(#1f2937, #ffffff);--mat-button-text-state-layer-color: light-dark(#1f2937, #ffffff)}[matIconButton].acp-primary{--mat-icon-color: var(--acp-theme-primary-color)}[matIconButton].acp-secondary{--mat-icon-color: var(--mat-sys-secondary)}[matIconButton].acp-accent{--mat-icon-color: var(--mat-sys-tertiary)}[matIconButton].acp-error{--mat-icon-color: var(--mat-sys-error)}[matIconButton].acp-success{--mat-icon-color: #10b981}[matIconButton].acp-warning{--mat-icon-color: #f59e0b}[matIconButton].acp-info{--mat-icon-color: #3b82f6}[matIconButton].acp-light{--mat-icon-color: #ffffff}[matFab].acp-primary{--mat-fab-container-color: var(--acp-theme-primary-color);--mat-fab-foreground-color: #ffffff;--mat-fab-state-layer-color: #ffffff}[matFab].acp-secondary{--mat-fab-container-color: var(--mat-sys-secondary);--mat-fab-foreground-color: var(--mat-sys-on-secondary);--mat-fab-state-layer-color: var(--mat-sys-on-secondary)}[matFab].acp-accent{--mat-fab-container-color: var(--mat-sys-tertiary);--mat-fab-foreground-color: var(--mat-sys-on-tertiary);--mat-fab-state-layer-color: var(--mat-sys-on-tertiary)}[matFab].acp-error{--mat-fab-container-color: var(--mat-sys-error);--mat-fab-foreground-color: var(--mat-sys-on-error);--mat-fab-state-layer-color: var(--mat-sys-on-error)}[matFab].acp-success{--mat-fab-container-color: #4caf50;--mat-fab-foreground-color: #ffffff;--mat-fab-state-layer-color: #ffffff}[matFab].acp-warning{--mat-fab-container-color: #f59e0b;--mat-fab-foreground-color: #ffffff;--mat-fab-state-layer-color: #ffffff}[matFab].acp-info{--mat-fab-container-color: #3b82f6;--mat-fab-foreground-color: #ffffff;--mat-fab-state-layer-color: #ffffff}[matFab].acp-dark{--mat-fab-container-color: #1f2937;--mat-fab-foreground-color: #ffffff;--mat-fab-state-layer-color: #ffffff}[matMiniFab].acp-primary{--mat-fab-small-container-color: var(--acp-theme-primary-color);--mat-fab-small-foreground-color: #ffffff;--mat-fab-small-state-layer-color: #ffffff}[matMiniFab].acp-secondary{--mat-fab-small-container-color: var(--mat-sys-secondary);--mat-fab-small-foreground-color: var(--mat-sys-on-secondary);--mat-fab-small-state-layer-color: var(--mat-sys-on-secondary)}[matMiniFab].acp-accent{--mat-fab-small-container-color: var(--mat-sys-tertiary);--mat-fab-small-foreground-color: var(--mat-sys-on-tertiary);--mat-fab-small-state-layer-color: var(--mat-sys-on-tertiary)}[matMiniFab].acp-error{--mat-fab-small-container-color: var(--mat-sys-error);--mat-fab-small-foreground-color: var(--mat-sys-on-error);--mat-fab-small-state-layer-color: var(--mat-sys-on-error)}[matMiniFab].acp-success{--mat-fab-small-container-color: #4caf50;--mat-fab-small-foreground-color: #ffffff;--mat-fab-small-state-layer-color: #ffffff}[matMiniFab].acp-warning{--mat-fab-small-container-color: #f59e0b;--mat-fab-small-foreground-color: #ffffff;--mat-fab-small-state-layer-color: #ffffff}[matMiniFab].acp-info{--mat-fab-small-container-color: #3b82f6;--mat-fab-small-foreground-color: #ffffff;--mat-fab-small-state-layer-color: #ffffff}[matMiniFab].acp-dark{--mat-fab-small-container-color: #1f2937;--mat-fab-small-foreground-color: #ffffff;--mat-fab-small-state-layer-color: #ffffff}.acp-square{--mat-button-filled-container-shape: 8px;--mat-button-outlined-container-shape: 8px;--mat-button-protected-container-shape: 8px;--mat-button-text-container-shape: 8px;--mat-button-tonal-container-shape: 8px;--mat-icon-button-container-shape: 8px}.acp-block{width:100%}.acp-medium{--mat-checkbox-touch-target-display: block;--mat-checkbox-state-layer-size: 36px;--mat-chip-container-height: 28px;--mat-expansion-header-collapsed-state-height: 44px;--mat-expansion-header-expanded-state-height: 60px;--mat-fab-small-touch-target-display: ;--mat-fab-touch-target-display: block;--mat-button-filled-touch-target-display: block;--mat-button-filled-container-height: 36px;--mat-button-outlined-container-height: 36px;--mat-button-outlined-touch-target-display: block;--mat-button-protected-touch-target-display: block;--mat-button-protected-container-height: 36px;--mat-button-text-touch-target-display: block;--mat-button-text-container-height: 36px;--mat-button-tonal-container-height: 36px;--mat-button-tonal-touch-target-display: block;--mat-form-field-container-height: 52px;--mat-form-field-filled-label-display: block;--mat-form-field-container-vertical-padding: 14px;--mat-form-field-filled-with-label-container-padding-top: 22px;--mat-form-field-filled-with-label-container-padding-bottom: 6px;--mat-icon-button-touch-target-display: block;--mat-icon-button-state-layer-size: 36px;--mat-list-list-item-leading-icon-start-space: 12px;--mat-list-list-item-leading-icon-end-space: 12px;--mat-list-list-item-one-line-container-height: 44px;--mat-list-list-item-two-line-container-height: 60px;--mat-list-list-item-three-line-container-height: 84px;--mat-paginator-container-size: 52px;--mat-paginator-form-field-container-height: 40px;--mat-paginator-form-field-container-vertical-padding: 8px;--mat-paginator-touch-target-display: block;--mat-radio-touch-target-display: block;--mat-radio-state-layer-size: 36px;--mat-tab-container-height: 44px;--mat-select-arrow-transform: translateY(-8px);--mat-button-toggle-height: 40px;--mat-stepper-header-height: 68px;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px;--mat-toolbar-standard-height: 60px;--mat-toolbar-mobile-height: 52px;--mat-tree-node-min-height: 44px;--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px;--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12;--mat-button-filled-horizontal-padding: 20px;--mat-button-outlined-horizontal-padding: 20px;--mat-button-protected-horizontal-padding: 20px;--mat-button-text-horizontal-padding: 20px;--mat-button-tonal-horizontal-padding: 20px;--mat-button-toggle-height: 36px}.acp-small{--mat-checkbox-touch-target-display: none;--mat-checkbox-state-layer-size: 32px;--mat-chip-container-height: 24px;--mat-expansion-header-collapsed-state-height: 40px;--mat-expansion-header-expanded-state-height: 56px;--mat-fab-small-touch-target-display: ;--mat-fab-touch-target-display: none;--mat-button-filled-touch-target-display: none;--mat-button-filled-container-height: 32px;--mat-button-outlined-container-height: 32px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-touch-target-display: none;--mat-button-protected-container-height: 32px;--mat-button-text-touch-target-display: none;--mat-button-text-container-height: 32px;--mat-button-tonal-container-height: 32px;--mat-button-tonal-touch-target-display: none;--mat-form-field-container-height: 48px;--mat-form-field-filled-label-display: none;--mat-form-field-container-vertical-padding: 12px;--mat-form-field-filled-with-label-container-padding-top: 12px;--mat-form-field-filled-with-label-container-padding-bottom: 12px;--mat-icon-button-touch-target-display: none;--mat-icon-button-state-layer-size: 32px;--mat-list-list-item-leading-icon-start-space: 8px;--mat-list-list-item-leading-icon-end-space: 8px;--mat-list-list-item-one-line-container-height: 40px;--mat-list-list-item-two-line-container-height: 56px;--mat-list-list-item-three-line-container-height: 80px;--mat-paginator-container-size: 48px;--mat-paginator-form-field-container-height: 40px;--mat-paginator-form-field-container-vertical-padding: 8px;--mat-paginator-touch-target-display: none;--mat-radio-touch-target-display: none;--mat-radio-state-layer-size: 32px;--mat-tab-container-height: 40px;--mat-select-arrow-transform: none;--mat-button-toggle-height: 40px;--mat-stepper-header-height: 64px;--mat-table-header-container-height: 48px;--mat-table-footer-container-height: 44px;--mat-table-row-item-container-height: 44px;--mat-toolbar-standard-height: 56px;--mat-toolbar-mobile-height: 48px;--mat-tree-node-min-height: 40px;--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px;--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12;--mat-button-filled-horizontal-padding: 16px;--mat-button-outlined-horizontal-padding: 16px;--mat-button-protected-horizontal-padding: 16px;--mat-button-text-horizontal-padding: 16px;--mat-button-tonal-horizontal-padding: 16px}\n"] }]
         }] });
 
 /**
- * Servicio centralizado para manejar z-index de todos los diálogos
- * Asegura que los diálogos siempre aparezcan en el orden correcto
- * Los AlertDialogs siempre tienen prioridad sobre otros diálogos
+ * Token used to deliver `AcpDialogConfig.data` to the content component.
+ * Content components read it with `inject(ACP_DIALOG_DATA)` (typed as `D`).
+ * This is the single data channel, used identically for bare and shell dialogs.
+ */
+const ACP_DIALOG_DATA = new InjectionToken('ACP_DIALOG_DATA', {
+    factory: () => null,
+});
+/**
+ * Application-wide defaults for every dialog opened through `AcpDialogService`.
+ * Mirrors `MAT_DIALOG_DEFAULT_OPTIONS` from Angular Material.
+ * Per-call config always wins over these defaults.
+ */
+const ACP_DIALOG_DEFAULT_OPTIONS = new InjectionToken('ACP_DIALOG_DEFAULT_OPTIONS');
+/**
+ * Token used by the declarative `<acp-dialog-actions>` component to register
+ * its action buttons with the hosting `AcpDialogContainer`.
+ */
+const ACP_DIALOG_ACTIONS = new InjectionToken('ACP_DIALOG_ACTIONS');
+/**
+ * Token used by the declarative `<acp-dialog-titlebar>` component to register
+ * its template with the hosting `AcpDialogContainer`.
+ */
+const ACP_DIALOG_TITLEBAR = new InjectionToken('ACP_DIALOG_TITLEBAR');
+/**
+ * Registers application-wide dialog defaults, e.g.:
+ * `provideAcpDialogDefaults({ fullScreenOnMobile: true })`.
+ */
+function provideAcpDialogDefaults(defaults) {
+    return makeEnvironmentProviders([{ provide: ACP_DIALOG_DEFAULT_OPTIONS, useValue: defaults }]);
+}
+
+/**
+ * Dialog actions container. Use it declaratively inside a dialog content
+ * template, or let `AcpDialogContainer` instantiate it from `config.actions`.
+ *
+ * @example
+ * ```html
+ * <acp-dialog-actions align="end">
+ *   <acp-button text="Cancel" appearance="text" (clicked)="ref.close()" />
+ *   <acp-button text="Save" color="success" (clicked)="ref.close(user)" />
+ * </acp-dialog-actions>
+ * ```
+ */
+class AcpDialogActions {
+    outlet = inject(ACP_DIALOG_ACTIONS, { optional: true });
+    matDialogRef = inject(MatDialogRef, { optional: true });
+    containerData = inject(MAT_DIALOG_DATA, {
+        optional: true,
+    });
+    injector = inject(Injector);
+    actionsTemplateRef = viewChild.required('actionsTemplate', { ...(ngDevMode ? { debugName: "actionsTemplateRef" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    actionStateSignals = new WeakMap();
+    renderInline = signal(this.outlet == null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "renderInline" }] : /* istanbul ignore next */ []));
+    hostDisplay = signal(this.outlet == null ? 'contents' : 'none', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostDisplay" }] : /* istanbul ignore next */ []));
+    /** Alignment of the action buttons. @default 'end' */
+    align = input('end', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    /** Configured footer actions. When omitted, the component works as a declarative slot. */
+    actions = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "actions" }] : /* istanbul ignore next */ []));
+    /** Optional title used to label the actions footer. */
+    dialogTitle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "dialogTitle" }] : /* istanbul ignore next */ []));
+    /** Accessible label for the actions footer. Falls back to a generated one. */
+    ariaLabel = computed(() => {
+        const title = this.dialogTitle();
+        return title ? `Actions for ${title}` : 'Dialog actions';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    ngAfterViewInit() {
+        if (this.outlet) {
+            this.outlet.register(this.actionsTemplateRef(), this.align());
+            this.hostDisplay.set('none');
+        }
+    }
+    /** Resolves an action's boolean state (boolean, signal or observable). */
+    resolveActionState(state) {
+        if (state === undefined) {
+            return false;
+        }
+        if (typeof state === 'boolean') {
+            return state;
+        }
+        if (isSignal(state)) {
+            return state();
+        }
+        if (isObservable(state)) {
+            let sig = this.actionStateSignals.get(state);
+            if (!sig) {
+                sig = toSignal(state, { injector: this.injector, initialValue: false });
+                this.actionStateSignals.set(state, sig);
+            }
+            return sig();
+        }
+        return false;
+    }
+    /** Broadcasts the click and closes the dialog unless the event is prevented. */
+    handleActionClick(event, action) {
+        const click = { action, event };
+        this.containerData?.actionClicks?.next(click);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDialogActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpDialogActions, isStandalone: true, selector: "acp-dialog-actions", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, dialogTitle: { classPropertyName: "dialogTitle", publicName: "dialogTitle", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "style.display": "hostDisplay()" } }, viewQueries: [{ propertyName: "actionsTemplateRef", first: true, predicate: ["actionsTemplate"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: `
+    <ng-template #actionsTemplate><ng-content /></ng-template>
+
+    @if (renderInline()) {
+      <mat-dialog-actions
+        class="acp-dialog-actions"
+        [class.acp-dialog-actions-start]="align() === 'start'"
+        [class.acp-dialog-actions-center]="align() === 'center'"
+        [class.acp-dialog-actions-end]="align() === 'end'"
+        [align]="align()"
+        [attr.aria-label]="ariaLabel()"
+      >
+        @for (action of actions() ?? []; track action.key ?? action.text ?? $index) {
+          <acp-button
+            [text]="action.text"
+            [color]="action.color ?? 'primary'"
+            [appearance]="action.appearance ?? 'filled'"
+            [variant]="action.variant ?? 'basic'"
+            [icon]="action.icon"
+            [suffixIcon]="action.suffixIcon"
+            [disabled]="resolveActionState(action.disabled)"
+            [loading]="resolveActionState(action.loading)"
+            [ariaLabel]="action.ariaLabel"
+            [size]="action.size ?? 'large'"
+            [block]="action.block ?? false"
+            [extended]="action.extended ?? false"
+            [type]="action.type ?? 'button'"
+            [form]="action.form"
+            (click)="handleActionClick($event, action)"
+          />
+        }
+        <ng-container [ngTemplateOutlet]="actionsTemplate" />
+      </mat-dialog-actions>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: AcpButton, selector: "acp-button" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDialogActions, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'acp-dialog-actions',
+                    standalone: true,
+                    imports: [MatDialogModule, AcpButton, NgTemplateOutlet],
+                    template: `
+    <ng-template #actionsTemplate><ng-content /></ng-template>
+
+    @if (renderInline()) {
+      <mat-dialog-actions
+        class="acp-dialog-actions"
+        [class.acp-dialog-actions-start]="align() === 'start'"
+        [class.acp-dialog-actions-center]="align() === 'center'"
+        [class.acp-dialog-actions-end]="align() === 'end'"
+        [align]="align()"
+        [attr.aria-label]="ariaLabel()"
+      >
+        @for (action of actions() ?? []; track action.key ?? action.text ?? $index) {
+          <acp-button
+            [text]="action.text"
+            [color]="action.color ?? 'primary'"
+            [appearance]="action.appearance ?? 'filled'"
+            [variant]="action.variant ?? 'basic'"
+            [icon]="action.icon"
+            [suffixIcon]="action.suffixIcon"
+            [disabled]="resolveActionState(action.disabled)"
+            [loading]="resolveActionState(action.loading)"
+            [ariaLabel]="action.ariaLabel"
+            [size]="action.size ?? 'large'"
+            [block]="action.block ?? false"
+            [extended]="action.extended ?? false"
+            [type]="action.type ?? 'button'"
+            [form]="action.form"
+            (click)="handleActionClick($event, action)"
+          />
+        }
+        <ng-container [ngTemplateOutlet]="actionsTemplate" />
+      </mat-dialog-actions>
+    }
+  `,
+                    host: {
+                        role: 'group',
+                        '[style.display]': 'hostDisplay()',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { actionsTemplateRef: [{ type: i0.ViewChild, args: ['actionsTemplate', { ...{ read: TemplateRef }, isSignal: true }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], dialogTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogTitle", required: false }] }] } });
+
+/**
+ * Dialog title bar. Use it inside a dialog content template for a declarative
+ * header, or let `AcpDialogContainer` instantiate it from `config.header`.
+ *
+ * @example
+ * ```html
+ * <acp-dialog-titlebar title="Edit user" icon="person">
+ *   <acp-dialog-actions align="end">
+ *     <acp-button text="Cancel" appearance="text" (clicked)="ref.close()" />
+ *     <acp-button text="Save" color="success" (clicked)="ref.close(user)" />
+ *   </acp-dialog-actions>
+ * </acp-dialog-titlebar>
+ * ```
+ */
+class AcpDialogTitlebar {
+    elementRef = inject(ElementRef);
+    matDialogRef = inject(MatDialogRef, { optional: true });
+    outlet = inject(ACP_DIALOG_TITLEBAR, { optional: true });
+    titlebarTemplateRef = viewChild.required('titlebarTemplate', { ...(ngDevMode ? { debugName: "titlebarTemplateRef" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    renderInline = signal(this.outlet == null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "renderInline" }] : /* istanbul ignore next */ []));
+    hostDisplay = signal(this.outlet == null ? 'contents' : 'none', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostDisplay" }] : /* istanbul ignore next */ []));
+    /** CSS classes applied to the header element. */
+    headerClasses = computed(() => {
+        const classes = ['acp-dialog-header'];
+        if (this.color()) {
+            classes.push(`acp-dialog-header--${this.color()}`);
+        }
+        if (this.colorClass()) {
+            classes.push(this.colorClass());
+        }
+        return classes.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerClasses" }] : /* istanbul ignore next */ []));
+    /** Close-button color resolved from `closeColor` or the header background. */
+    resolvedCloseColor = computed(() => {
+        const requested = this.closeColor();
+        if (requested) {
+            return requested;
+        }
+        const darkBackgrounds = new Set([
+            'primary',
+            'secondary',
+            'accent',
+            'success',
+            'info',
+            'error',
+            'danger',
+            'dark',
+        ]);
+        return darkBackgrounds.has(this.color() ?? '') ? 'light' : 'dark';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedCloseColor" }] : /* istanbul ignore next */ []));
+    /** Title text shown in the header. */
+    title = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Optional subtitle shown below the title. */
+    subtitle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "subtitle" }] : /* istanbul ignore next */ []));
+    /** Optional Material icon name displayed before the title. */
+    icon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Whether the close button is shown. @default true */
+    closable = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closable" }] : /* istanbul ignore next */ []));
+    /** Accessible label for the close button. @default 'Close dialog' */
+    closeLabel = input('Close dialog', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
+    /** Whether the dialog can be dragged by its header. @default true */
+    draggable = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draggable" }] : /* istanbul ignore next */ []));
+    /** Predefined header color theme. */
+    color = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Additional CSS class names to apply to the header. */
+    colorClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "colorClass" }] : /* istanbul ignore next */ []));
+    /** Explicit close icon color. If omitted, it is chosen from the header `color`. */
+    closeColor = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "closeColor" }] : /* istanbul ignore next */ []));
+    /** Emitted when the close button is clicked and no `MatDialogRef` is available. */
+    closed = output();
+    close() {
+        if (this.matDialogRef) {
+            this.matDialogRef.close();
+        }
+        else {
+            this.closed.emit();
+        }
+    }
+    bringToFront() {
+        const pane = this.elementRef.nativeElement.closest('.cdk-overlay-pane');
+        if (pane) {
+            const current = parseInt(pane.style.zIndex || '1000', 10);
+            const next = Math.max(1000, isNaN(current) ? 1000 : current + 1);
+            pane.style.zIndex = next.toString();
+        }
+    }
+    ngAfterViewInit() {
+        if (this.outlet) {
+            this.outlet.register(this.titlebarTemplateRef(), this.title());
+            this.hostDisplay.set('none');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDialogTitlebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpDialogTitlebar, isStandalone: true, selector: "acp-dialog-titlebar", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, colorClass: { classPropertyName: "colorClass", publicName: "colorClass", isSignal: true, isRequired: false, transformFunction: null }, closeColor: { classPropertyName: "closeColor", publicName: "closeColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "style.display": "hostDisplay()" }, classAttribute: "acp-dialog-titlebar" }, viewQueries: [{ propertyName: "titlebarTemplateRef", first: true, predicate: ["titlebarTemplate"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: `
+    <ng-template #titlebarTemplate>
+      <div
+        [class]="headerClasses()"
+        cdkDrag
+        cdkDragRootElement=".cdk-overlay-pane"
+        [cdkDragDisabled]="draggable() === false"
+        cdkDragHandle
+        (mousedown)="bringToFront()"
+      >
+        <h6 mat-dialog-title class="acp-dialog-title">
+          @if (icon()) {
+            <mat-icon class="acp-dialog-title-icon" aria-hidden="true">{{ icon() }}</mat-icon>
+          }
+          <span>
+            @if (title()) {
+              {{ title() }}
+            } @else {
+              <ng-content />
+            }
+          </span>
+          @if (closable() !== false) {
+            <acp-button
+              class="acp-dialog-close-btn"
+              variant="icon"
+              icon="close"
+              [color]="resolvedCloseColor()"
+              [ariaLabel]="closeLabel() ?? 'Close dialog'"
+              (clicked)="close()"
+            />
+          }
+        </h6>
+        @if (subtitle()) {
+          <p class="acp-dialog-subtitle">{{ subtitle() }}</p>
+        }
+      </div>
+    </ng-template>
+
+    @if (renderInline()) {
+      <ng-container [ngTemplateOutlet]="titlebarTemplate" />
+    }
+  `, isInline: true, 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: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: AcpButton, selector: "acp-button" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDialogTitlebar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'acp-dialog-titlebar',
+                    standalone: true,
+                    imports: [CdkDrag, CdkDragHandle, MatDialogModule, MatIconModule, AcpButton, NgTemplateOutlet],
+                    template: `
+    <ng-template #titlebarTemplate>
+      <div
+        [class]="headerClasses()"
+        cdkDrag
+        cdkDragRootElement=".cdk-overlay-pane"
+        [cdkDragDisabled]="draggable() === false"
+        cdkDragHandle
+        (mousedown)="bringToFront()"
+      >
+        <h6 mat-dialog-title class="acp-dialog-title">
+          @if (icon()) {
+            <mat-icon class="acp-dialog-title-icon" aria-hidden="true">{{ icon() }}</mat-icon>
+          }
+          <span>
+            @if (title()) {
+              {{ title() }}
+            } @else {
+              <ng-content />
+            }
+          </span>
+          @if (closable() !== false) {
+            <acp-button
+              class="acp-dialog-close-btn"
+              variant="icon"
+              icon="close"
+              [color]="resolvedCloseColor()"
+              [ariaLabel]="closeLabel() ?? 'Close dialog'"
+              (clicked)="close()"
+            />
+          }
+        </h6>
+        @if (subtitle()) {
+          <p class="acp-dialog-subtitle">{{ subtitle() }}</p>
+        }
+      </div>
+    </ng-template>
+
+    @if (renderInline()) {
+      <ng-container [ngTemplateOutlet]="titlebarTemplate" />
+    }
+  `,
+                    host: {
+                        class: 'acp-dialog-titlebar',
+                        '[style.display]': 'hostDisplay()',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { titlebarTemplateRef: [{ type: i0.ViewChild, args: ['titlebarTemplate', { ...{ read: TemplateRef }, isSignal: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], colorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorClass", required: false }] }], closeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeColor", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+/**
+ * Shell that hosts any content inside an `AcpDialog`. Renders the optional
+ * branded header (draggable title bar with icon, title and close button) and
+ * optional footer actions.
+ *
+ * Content can be a component class, a `TemplateRef`, or a plain string. It is
+ * created with a child `Injector` that provides `ACP_DIALOG_DATA` (the caller's
+ * `config.data`) and `AcpDialogRef` (a typed handle to close the dialog).
+ *
+ * Opened exclusively through `AcpDialogService`; not meant to be used in templates.
+ */
+class AcpDialogContainer {
+    parentInjector = inject(Injector);
+    containerData = inject(MAT_DIALOG_DATA);
+    actionClicks = this.containerData.actionClicks;
+    dialogRef = new AcpDialogRef(inject(MatDialogRef), this.actionClicks);
+    /** Outlet where the configured content is rendered. */
+    contentHost = viewChild.required('contentHost', { ...(ngDevMode ? { debugName: "contentHost" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
+    /** Outlet where declarative `acp-dialog-actions` content is rendered. */
+    actionOutlet = viewChild('actionOutlet', { ...(ngDevMode ? { debugName: "actionOutlet" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
+    /** Outlet where declarative `acp-dialog-titlebar` content is rendered. */
+    titlebarOutletRef = viewChild('titlebarOutlet', { ...(ngDevMode ? { debugName: "titlebarOutletRef" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
+    /** Template used to render a plain string content. */
+    stringTemplate = viewChild.required('stringContent', { ...(ngDevMode ? { debugName: "stringTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    /** Whether the content has registered a declarative `acp-dialog-actions` template. */
+    hasDeclarativeActions = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasDeclarativeActions" }] : /* istanbul ignore next */ []));
+    /** Whether the content has registered a declarative `acp-dialog-titlebar` template. */
+    hasDeclarativeTitlebar = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasDeclarativeTitlebar" }] : /* istanbul ignore next */ []));
+    /** Pending declarative actions template, captured before the outlet is ready. */
+    pendingActionTemplate = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pendingActionTemplate" }] : /* istanbul ignore next */ []));
+    /** Pending declarative titlebar template, captured before the outlet is ready. */
+    pendingTitlebarTemplate = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pendingTitlebarTemplate" }] : /* istanbul ignore next */ []));
+    /** Alignment requested by a declarative actions template. */
+    declarativeActionsAlign = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "declarativeActionsAlign" }] : /* istanbul ignore next */ []));
+    /** Title requested by a declarative titlebar template. */
+    declarativeTitle = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "declarativeTitle" }] : /* istanbul ignore next */ []));
+    /** Outlet object provided to content so `acp-dialog-actions` can register itself. */
+    actionsOutlet = {
+        register: (template, align) => {
+            this.pendingActionTemplate.set(template);
+            this.hasDeclarativeActions.set(true);
+            this.declarativeActionsAlign.set(align);
+        },
+        hasActions: this.hasDeclarativeActions.asReadonly(),
+    };
+    /** Outlet object provided to content so `acp-dialog-titlebar` can register itself. */
+    titlebarOutlet = {
+        register: (template, title) => {
+            this.pendingTitlebarTemplate.set(template);
+            this.hasDeclarativeTitlebar.set(true);
+            this.declarativeTitle.set(title);
+        },
+        hasTitlebar: this.hasDeclarativeTitlebar.asReadonly(),
+    };
+    /** Exposed header configuration, including the `title` shortcut. */
+    headerConfig = computed(() => {
+        if (this.config.header) {
+            return this.config.header;
+        }
+        if (this.config.title) {
+            return { title: this.config.title };
+        }
+        return undefined;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerConfig" }] : /* istanbul ignore next */ []));
+    /** Title used for the actions footer label. */
+    resolvedDialogTitle = computed(() => this.headerConfig()?.title ?? this.declarativeTitle(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDialogTitle" }] : /* istanbul ignore next */ []));
+    /** Alignment used for the actions footer. */
+    resolvedActionsAlign = computed(() => this.declarativeActionsAlign() ?? this.config.actionsAlign ?? 'end', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedActionsAlign" }] : /* istanbul ignore next */ []));
+    /** Whether the current content is a plain string. */
+    isStringContent = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isStringContent" }] : /* istanbul ignore next */ []));
+    get config() {
+        return this.containerData.config;
+    }
+    get content() {
+        return this.containerData.content;
+    }
+    constructor() {
+        effect(onCleanup => {
+            const outlet = this.actionOutlet();
+            const template = this.pendingActionTemplate();
+            let viewRef;
+            if (outlet && template) {
+                outlet.clear();
+                viewRef = outlet.createEmbeddedView(template);
+            }
+            onCleanup(() => viewRef?.destroy());
+        });
+        effect(onCleanup => {
+            const outlet = this.titlebarOutletRef();
+            const template = this.pendingTitlebarTemplate();
+            let viewRef;
+            if (outlet && template) {
+                outlet.clear();
+                viewRef = outlet.createEmbeddedView(template);
+            }
+            onCleanup(() => viewRef?.destroy());
+        });
+    }
+    ngAfterViewInit() {
+        const content = this.content;
+        const injector = this.createContentInjector();
+        this.contentHost().clear();
+        this.isStringContent.set(false);
+        if (typeof content === 'string') {
+            this.isStringContent.set(true);
+            this.contentHost().createEmbeddedView(this.stringTemplate(), { content });
+        }
+        else if (content instanceof TemplateRef) {
+            this.contentHost().createEmbeddedView(content, {
+                $implicit: this.config.data,
+                data: this.config.data,
+                ref: this.dialogRef,
+            }, { injector });
+        }
+        else {
+            this.contentHost().createComponent(content, { injector, bindings: this.config.bindings });
+        }
+    }
+    createContentInjector() {
+        return Injector.create({
+            parent: this.parentInjector,
+            providers: [
+                { provide: ACP_DIALOG_DATA, useValue: this.config.data },
+                { provide: AcpDialogRef, useValue: this.dialogRef },
+                { provide: ACP_DIALOG_ACTIONS, useValue: this.actionsOutlet },
+                { provide: ACP_DIALOG_TITLEBAR, useValue: this.titlebarOutlet },
+            ],
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDialogContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpDialogContainer, isStandalone: true, selector: "acp-dialog-container", viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "actionOutlet", first: true, predicate: ["actionOutlet"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "titlebarOutletRef", first: true, predicate: ["titlebarOutlet"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "stringTemplate", first: true, predicate: ["stringContent"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (headerConfig(); as header) { @if (config.showHeader !== false && !hasDeclarativeTitlebar()) {\n<acp-dialog-titlebar\n  [title]=\"header.title\"\n  [subtitle]=\"header.subtitle\"\n  [icon]=\"header.icon\"\n  [closable]=\"header.closable ?? true\"\n  [closeLabel]=\"header.closeLabel ?? 'Close dialog'\"\n  [draggable]=\"header.draggable ?? true\"\n  [color]=\"header.color\"\n  [colorClass]=\"header.colorClass\"\n  [closeColor]=\"header.closeColor\"\n/>\n} }\n\n<ng-template #titlebarOutlet />\n\n<mat-dialog-content class=\"acp-dialog-content\">\n  <ng-template #contentHost />\n  <ng-template #stringContent let-content>\n    <div class=\"acp-dialog-message\">{{ content }}</div>\n  </ng-template>\n</mat-dialog-content>\n\n@if ((config.actions?.length && config.showActions !== false) || hasDeclarativeActions()) {\n<acp-dialog-actions\n  [align]=\"resolvedActionsAlign()\"\n  [actions]=\"hasDeclarativeActions() ? undefined : config.actions\"\n  [dialogTitle]=\"resolvedDialogTitle()\"\n>\n  <ng-template #actionOutlet />\n</acp-dialog-actions>\n}\n", styles: ["acp-dialog-container{display:flex;flex-direction:column;height:100%}.acp-dialog-content{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;overflow:auto}.acp-dialog-content>*{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}.acp-dialog-content>*>.acp-dialog-message{flex:1 1 auto;overflow:auto;min-height:0}.acp-dialog-content>*>.acp-dialog-message-actions{flex-shrink:0}.acp-dialog-header{cursor:move;border-bottom:1px solid var(--acp-dialog-header-border-color, var(--mat-sys-outline-variant, #dee2e6));color:var(--acp-dialog-header-text-color, var(--mat-sys-on-surface, #212529));position:relative}.acp-dialog-header.acp-dialog-header--primary{background-color:var(--acp-dialog-primary-header-background-color, var(--mat-sys-primary, #1976d2));color:var(--acp-dialog-primary-header-text-color, var(--mat-sys-on-primary, #fff))}.acp-dialog-header.acp-dialog-header--secondary{background-color:var(--acp-dialog-secondary-header-background-color, var(--mat-sys-secondary, #9c27b0));color:var(--acp-dialog-secondary-header-text-color, var(--mat-sys-on-secondary, #fff))}.acp-dialog-header.acp-dialog-header--accent{background-color:var(--acp-dialog-accent-header-background-color, var(--mat-sys-tertiary, #7c4dff));color:var(--acp-dialog-accent-header-text-color, var(--mat-sys-on-tertiary, #fff))}.acp-dialog-header.acp-dialog-header--error,.acp-dialog-header.acp-dialog-header--danger{background-color:var(--acp-dialog-error-header-background-color, var(--mat-sys-error, #b3261e));color:var(--acp-dialog-error-header-text-color, var(--mat-sys-on-error, #fff))}.acp-dialog-header.acp-dialog-header--success{background-color:var(--acp-dialog-success-header-background-color, #22c55e);color:var(--acp-dialog-success-header-text-color, #fff)}.acp-dialog-header.acp-dialog-header--warning{background-color:var(--acp-dialog-warning-header-background-color, #f59e0b);color:var(--acp-dialog-warning-header-text-color, #212529)}.acp-dialog-header.acp-dialog-header--info{background-color:var(--acp-dialog-info-header-background-color, #0ea5e9);color:var(--acp-dialog-info-header-text-color, #fff)}.acp-dialog-header.acp-dialog-header--dark{background-color:var(--acp-dialog-dark-header-background-color, #212529);color:var(--acp-dialog-dark-header-text-color, #fff)}.acp-dialog-header[class*=acp-dialog-header--] .acp-dialog-subtitle{color:inherit;opacity:.85}h6[mat-dialog-title].acp-dialog-title{display:flex;align-items:center;font-size:var(--acp-dialog-title-font-size, 1.2rem);font-weight:var(--acp-dialog-title-font-weight, 500);margin:0;width:100%;padding-right:48px;color:currentColor}.acp-dialog-title-icon{margin-right:var(--acp-dialog-title-icon-gap, 12px);vertical-align:middle}h6[mat-dialog-title].acp-dialog-title span{flex-grow:1}.acp-dialog-close-btn{position:absolute;top:8px;right:16px}.acp-dialog-subtitle{margin:0;padding:0 var(--acp-dialog-subtitle-padding, 24px) var(--acp-dialog-subtitle-padding, 16px);font-size:var(--acp-dialog-subtitle-font-size, .875rem);color:var(--acp-dialog-subtitle-color, var(--mat-sys-on-surface-variant, #6c757d))}.acp-dialog-message{padding:var(--acp-dialog-message-padding, 24px);color:var(--acp-dialog-message-text-color, var(--mat-sys-on-surface, #212529))}.acp-dialog-message-actions{display:flex;justify-content:flex-end;gap:8px;padding:0 var(--acp-dialog-message-padding, 24px) var(--acp-dialog-message-padding, 24px)}.acp-dialog-actions{display:flex;align-items:center;gap:var(--acp-dialog-actions-gap, 8px);padding:var(--acp-dialog-actions-padding, 16px 24px);border-top:1px solid var(--acp-dialog-actions-border-color, var(--mat-sys-outline-variant, #dee2e6))}.acp-dialog-actions-start{justify-content:flex-start}.acp-dialog-actions-center{justify-content:center}.acp-dialog-actions-end{justify-content:flex-end}.acp-dialog-content>acp-dialog-titlebar,.acp-dialog-content>*>acp-dialog-titlebar,.acp-dialog-content>acp-dialog-actions,.acp-dialog-content>*>acp-dialog-actions{flex:0 0 auto}.acp-dialog-content>*>mat-dialog-content,.acp-dialog-content>*>.mat-mdc-dialog-content{flex:1 1 auto;overflow:auto;min-height:0;max-height:100%}.acp-dialog-content>*>mat-dialog-actions,.acp-dialog-content>*>.mat-mdc-dialog-actions{flex-shrink:0}.acp-dialog-full-screen .mat-mdc-dialog-surface{height:100vh}.acp-dialog-full-screen acp-dialog-container{min-height:100vh}.acp-dialog-full-screen .acp-dialog-content.mat-mdc-dialog-content{max-height:100%;height:100%}.acp-dialog-full-screen .acp-dialog-actions,.acp-dialog-full-screen .mat-mdc-dialog-actions{margin-top:auto}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: AcpDialogTitlebar, selector: "acp-dialog-titlebar", inputs: ["title", "subtitle", "icon", "closable", "closeLabel", "draggable", "color", "colorClass", "closeColor"], outputs: ["closed"] }, { kind: "component", type: AcpDialogActions, selector: "acp-dialog-actions", inputs: ["align", "actions", "dialogTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDialogContainer, decorators: [{
+            type: Component,
+            args: [{ selector: 'acp-dialog-container', imports: [MatDialogModule, AcpDialogTitlebar, AcpDialogActions], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (headerConfig(); as header) { @if (config.showHeader !== false && !hasDeclarativeTitlebar()) {\n<acp-dialog-titlebar\n  [title]=\"header.title\"\n  [subtitle]=\"header.subtitle\"\n  [icon]=\"header.icon\"\n  [closable]=\"header.closable ?? true\"\n  [closeLabel]=\"header.closeLabel ?? 'Close dialog'\"\n  [draggable]=\"header.draggable ?? true\"\n  [color]=\"header.color\"\n  [colorClass]=\"header.colorClass\"\n  [closeColor]=\"header.closeColor\"\n/>\n} }\n\n<ng-template #titlebarOutlet />\n\n<mat-dialog-content class=\"acp-dialog-content\">\n  <ng-template #contentHost />\n  <ng-template #stringContent let-content>\n    <div class=\"acp-dialog-message\">{{ content }}</div>\n  </ng-template>\n</mat-dialog-content>\n\n@if ((config.actions?.length && config.showActions !== false) || hasDeclarativeActions()) {\n<acp-dialog-actions\n  [align]=\"resolvedActionsAlign()\"\n  [actions]=\"hasDeclarativeActions() ? undefined : config.actions\"\n  [dialogTitle]=\"resolvedDialogTitle()\"\n>\n  <ng-template #actionOutlet />\n</acp-dialog-actions>\n}\n", styles: ["acp-dialog-container{display:flex;flex-direction:column;height:100%}.acp-dialog-content{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;overflow:auto}.acp-dialog-content>*{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}.acp-dialog-content>*>.acp-dialog-message{flex:1 1 auto;overflow:auto;min-height:0}.acp-dialog-content>*>.acp-dialog-message-actions{flex-shrink:0}.acp-dialog-header{cursor:move;border-bottom:1px solid var(--acp-dialog-header-border-color, var(--mat-sys-outline-variant, #dee2e6));color:var(--acp-dialog-header-text-color, var(--mat-sys-on-surface, #212529));position:relative}.acp-dialog-header.acp-dialog-header--primary{background-color:var(--acp-dialog-primary-header-background-color, var(--mat-sys-primary, #1976d2));color:var(--acp-dialog-primary-header-text-color, var(--mat-sys-on-primary, #fff))}.acp-dialog-header.acp-dialog-header--secondary{background-color:var(--acp-dialog-secondary-header-background-color, var(--mat-sys-secondary, #9c27b0));color:var(--acp-dialog-secondary-header-text-color, var(--mat-sys-on-secondary, #fff))}.acp-dialog-header.acp-dialog-header--accent{background-color:var(--acp-dialog-accent-header-background-color, var(--mat-sys-tertiary, #7c4dff));color:var(--acp-dialog-accent-header-text-color, var(--mat-sys-on-tertiary, #fff))}.acp-dialog-header.acp-dialog-header--error,.acp-dialog-header.acp-dialog-header--danger{background-color:var(--acp-dialog-error-header-background-color, var(--mat-sys-error, #b3261e));color:var(--acp-dialog-error-header-text-color, var(--mat-sys-on-error, #fff))}.acp-dialog-header.acp-dialog-header--success{background-color:var(--acp-dialog-success-header-background-color, #22c55e);color:var(--acp-dialog-success-header-text-color, #fff)}.acp-dialog-header.acp-dialog-header--warning{background-color:var(--acp-dialog-warning-header-background-color, #f59e0b);color:var(--acp-dialog-warning-header-text-color, #212529)}.acp-dialog-header.acp-dialog-header--info{background-color:var(--acp-dialog-info-header-background-color, #0ea5e9);color:var(--acp-dialog-info-header-text-color, #fff)}.acp-dialog-header.acp-dialog-header--dark{background-color:var(--acp-dialog-dark-header-background-color, #212529);color:var(--acp-dialog-dark-header-text-color, #fff)}.acp-dialog-header[class*=acp-dialog-header--] .acp-dialog-subtitle{color:inherit;opacity:.85}h6[mat-dialog-title].acp-dialog-title{display:flex;align-items:center;font-size:var(--acp-dialog-title-font-size, 1.2rem);font-weight:var(--acp-dialog-title-font-weight, 500);margin:0;width:100%;padding-right:48px;color:currentColor}.acp-dialog-title-icon{margin-right:var(--acp-dialog-title-icon-gap, 12px);vertical-align:middle}h6[mat-dialog-title].acp-dialog-title span{flex-grow:1}.acp-dialog-close-btn{position:absolute;top:8px;right:16px}.acp-dialog-subtitle{margin:0;padding:0 var(--acp-dialog-subtitle-padding, 24px) var(--acp-dialog-subtitle-padding, 16px);font-size:var(--acp-dialog-subtitle-font-size, .875rem);color:var(--acp-dialog-subtitle-color, var(--mat-sys-on-surface-variant, #6c757d))}.acp-dialog-message{padding:var(--acp-dialog-message-padding, 24px);color:var(--acp-dialog-message-text-color, var(--mat-sys-on-surface, #212529))}.acp-dialog-message-actions{display:flex;justify-content:flex-end;gap:8px;padding:0 var(--acp-dialog-message-padding, 24px) var(--acp-dialog-message-padding, 24px)}.acp-dialog-actions{display:flex;align-items:center;gap:var(--acp-dialog-actions-gap, 8px);padding:var(--acp-dialog-actions-padding, 16px 24px);border-top:1px solid var(--acp-dialog-actions-border-color, var(--mat-sys-outline-variant, #dee2e6))}.acp-dialog-actions-start{justify-content:flex-start}.acp-dialog-actions-center{justify-content:center}.acp-dialog-actions-end{justify-content:flex-end}.acp-dialog-content>acp-dialog-titlebar,.acp-dialog-content>*>acp-dialog-titlebar,.acp-dialog-content>acp-dialog-actions,.acp-dialog-content>*>acp-dialog-actions{flex:0 0 auto}.acp-dialog-content>*>mat-dialog-content,.acp-dialog-content>*>.mat-mdc-dialog-content{flex:1 1 auto;overflow:auto;min-height:0;max-height:100%}.acp-dialog-content>*>mat-dialog-actions,.acp-dialog-content>*>.mat-mdc-dialog-actions{flex-shrink:0}.acp-dialog-full-screen .mat-mdc-dialog-surface{height:100vh}.acp-dialog-full-screen acp-dialog-container{min-height:100vh}.acp-dialog-full-screen .acp-dialog-content.mat-mdc-dialog-content{max-height:100%;height:100%}.acp-dialog-full-screen .acp-dialog-actions,.acp-dialog-full-screen .mat-mdc-dialog-actions{margin-top:auto}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { contentHost: [{ type: i0.ViewChild, args: ['contentHost', { ...{
+                            read: ViewContainerRef,
+                        }, isSignal: true }] }], actionOutlet: [{ type: i0.ViewChild, args: ['actionOutlet', { ...{ read: ViewContainerRef }, isSignal: true }] }], titlebarOutletRef: [{ type: i0.ViewChild, args: ['titlebarOutlet', { ...{ read: ViewContainerRef }, isSignal: true }] }], stringTemplate: [{ type: i0.ViewChild, args: ['stringContent', { ...{ read: TemplateRef }, isSignal: true }] }] } });
+
+const SIZES = {
+    xs: '320px',
+    sm: '450px',
+    md: '600px',
+    lg: '800px',
+    xl: '1000px',
+    xxl: '1280px',
+    full: '100vw',
+};
+/**
+ * Reusable dialog service — a branded alternative to `MatDialog`. Every dialog
+ * renders inside `AcpDialogContainer`, so content always works the same way:
+ *
+ * - read data with `inject(ACP_DIALOG_DATA)`,
+ * - close the dialog with `inject(AcpDialogRef).close(result)`.
+ *
+ * Usage:
+ * ```ts
+ * private dialogs = inject(AcpDialogService);
+ *
+ * this.dialogs.open(UserForm, {
+ *   title: 'Edit user',
+ *   actions: [
+ *     { text: 'Cancel' },
+ *     { text: 'Save', color: 'success', result: user },
+ *   ],
+ *   size: 'lg',
+ *   data: { userId: 5 },
+ * }).afterClosed().subscribe(saved => {
+ *   // handle result
+ * });
+ *
+ * // or with a single config object:
+ * this.dialogs.open({
+ *   content: UserForm,
+ *   title: 'Edit user',
+ *   actions: [{ text: 'Save', color: 'success' }],
+ *   data: { userId: 5 },
+ * }).afterClosed().subscribe(saved => {
+ *   // handle result
+ * });
+ * ```
+ */
+class AcpDialogService {
+    dialog = inject(MatDialog);
+    overlay = inject(Overlay);
+    breakpointObserver = inject(BreakpointObserver);
+    defaults = inject(ACP_DIALOG_DEFAULT_OPTIONS, {
+        optional: true,
+    });
+    /** Stream that emits when all open dialogs have finished closing. */
+    get afterAllClosed() {
+        return this.dialog.afterAllClosed;
+    }
+    /** Stream that emits when a dialog has been opened. */
+    get afterOpened() {
+        return this.dialog.afterOpened;
+    }
+    /** Keeps track of the currently-open dialogs. */
+    get openDialogs() {
+        return this.dialog.openDialogs;
+    }
+    open(contentOrConfig, maybeConfig) {
+        if (contentOrConfig instanceof TemplateRef) {
+            return this.openWithContent(contentOrConfig, this.mergeDefaults(maybeConfig ?? {}));
+        }
+        if (typeof contentOrConfig === 'function' && isComponentClass(contentOrConfig)) {
+            return this.openWithContent(contentOrConfig, this.mergeDefaults(maybeConfig ?? {}));
+        }
+        const { content, ...rest } = contentOrConfig;
+        return this.openWithContent(content, this.mergeDefaults(rest));
+    }
+    /** Closes all currently open dialogs. */
+    closeAll() {
+        this.dialog.closeAll();
+    }
+    /** Finds an open dialog by its id. */
+    getDialogById(id) {
+        const matRef = this.dialog.getDialogById(id);
+        return matRef ? new AcpDialogRef(matRef) : undefined;
+    }
+    // --- Internals ---
+    openWithContent(content, config) {
+        const resolved = this.resolveContent(content, config.data);
+        const actionClicks = new Subject();
+        if (resolved instanceof Promise) {
+            return new AcpDialogRef(resolved.then(c => this.createMatRef(c, config, actionClicks)), actionClicks);
+        }
+        return new AcpDialogRef(this.createMatRef(resolved, config, actionClicks), actionClicks);
+    }
+    createMatRef(content, config, actionClicks) {
+        const matRef = this.dialog.open(AcpDialogContainer, this.buildMatConfig(config, { content, config, actionClicks }));
+        this.wireCloseGestures(matRef, config);
+        return matRef;
+    }
+    resolveContent(content, data, depth = 0) {
+        if (isTemplateRef(content)) {
+            return content;
+        }
+        if (typeof content === 'string') {
+            return content;
+        }
+        if (isComponentClass(content)) {
+            return content;
+        }
+        if (isDialogComponentLoader(content)) {
+            return content.loadComponent().then(c => this.resolveContent(c, data, depth));
+        }
+        if (typeof content === 'function') {
+            if (depth > 5) {
+                throw new Error('AcpDialog content factory nested too deeply');
+            }
+            const result = content(data);
+            if (result && typeof result.then === 'function') {
+                return result.then(c => this.resolveContent(c, data, depth + 1));
+            }
+            return this.resolveContent(result, data, depth + 1);
+        }
+        throw new Error(`Unsupported AcpDialog content: ${String(content)}`);
+    }
+    mergeDefaults(config) {
+        const defaults = this.defaults;
+        const { header, closeOn, ...rest } = config;
+        return {
+            ...defaults,
+            ...rest,
+            header: header ? { ...defaults?.header, ...header } : defaults?.header,
+            closeOn: closeOn ? { ...defaults?.closeOn, ...closeOn } : defaults?.closeOn,
+        };
+    }
+    buildMatConfig(config, data) {
+        const matConfig = new MatDialogConfig();
+        matConfig.data = data;
+        const fullScreen = config.size === 'full' ||
+            (config.fullScreenOnMobile === true &&
+                this.breakpointObserver.isMatched([
+                    Breakpoints.HandsetPortrait,
+                    Breakpoints.HandsetLandscape,
+                ]));
+        if (fullScreen) {
+            matConfig.width = '100vw';
+            matConfig.height = '100vh';
+            matConfig.maxWidth = '100vw';
+            matConfig.maxHeight = '100vh';
+        }
+        else {
+            matConfig.width = this.toMatSize(config.width) ?? SIZES[config.size ?? 'md'];
+            matConfig.height = this.toMatSize(config.height);
+            matConfig.minWidth = this.toMatSize(config.minWidth);
+            matConfig.minHeight = this.toMatSize(config.minHeight);
+            matConfig.maxWidth = this.toMatSize(config.maxWidth) ?? '95vw';
+            matConfig.maxHeight = this.toMatSize(config.maxHeight);
+            matConfig.position = config.position;
+        }
+        matConfig.panelClass = [
+            'acp-dialog',
+            `acp-dialog-${config.size ?? 'md'}`,
+            ...(fullScreen ? ['acp-dialog-full-screen'] : []),
+            ...(Array.isArray(config.panelClass)
+                ? config.panelClass
+                : config.panelClass
+                    ? [config.panelClass]
+                    : []),
+        ];
+        matConfig.hasBackdrop = config.hasBackdrop ?? true;
+        matConfig.backdropClass = config.backdropClass;
+        const closeOn = this.normalizeCloseOn(config);
+        matConfig.disableClose = closeOn.backdropClick === false || closeOn.escapeKey === false;
+        matConfig.id = config.id;
+        matConfig.injector = config.injector;
+        matConfig.viewContainerRef = config.viewContainerRef;
+        matConfig.closeOnNavigation = config.closeOnNavigation;
+        matConfig.closePredicate = config.closePredicate;
+        matConfig.direction = config.direction;
+        matConfig.delayFocusTrap = config.delayFocusTrap;
+        matConfig.ariaModal = config.ariaModal;
+        matConfig.autoFocus = config.autoFocus ?? 'first-tabbable';
+        matConfig.restoreFocus = config.restoreFocus ?? true;
+        matConfig.scrollStrategy = this.resolveScrollStrategy(config.scrollStrategy);
+        matConfig.enterAnimationDuration = config.enterAnimationDuration ?? '300ms';
+        matConfig.exitAnimationDuration = config.exitAnimationDuration ?? '200ms';
+        matConfig.ariaLabel = config.ariaLabel;
+        matConfig.ariaLabelledBy = config.ariaLabelledBy;
+        matConfig.ariaDescribedBy = config.ariaDescribedBy;
+        matConfig.role = config.role ?? 'dialog';
+        return matConfig;
+    }
+    normalizeCloseOn(config) {
+        if (config.disableClose === true) {
+            return { backdropClick: false, escapeKey: false };
+        }
+        if (config.disableClose === false) {
+            return { backdropClick: true, escapeKey: true };
+        }
+        return {
+            backdropClick: config.closeOn?.backdropClick !== false,
+            escapeKey: config.closeOn?.escapeKey !== false,
+        };
+    }
+    toMatSize(value) {
+        return typeof value === 'number' ? `${value}px` : value;
+    }
+    resolveScrollStrategy(strategy) {
+        if (typeof strategy !== 'string') {
+            return strategy ?? this.overlay.scrollStrategies.block();
+        }
+        const strategies = this.overlay.scrollStrategies;
+        switch (strategy) {
+            case 'block':
+                return strategies.block();
+            case 'close':
+                return strategies.close();
+            case 'noop':
+                return strategies.noop();
+            default:
+                return strategies.block();
+        }
+    }
+    wireCloseGestures(matRef, config) {
+        const closeOn = this.normalizeCloseOn(config);
+        const backdropClick = closeOn.backdropClick;
+        const escapeKey = closeOn.escapeKey;
+        if (backdropClick === escapeKey) {
+            return;
+        }
+        const closed$ = matRef.afterClosed();
+        if (escapeKey) {
+            matRef
+                .keydownEvents()
+                .pipe(takeUntil(closed$))
+                .subscribe(event => {
+                if (event.key === 'Escape') {
+                    matRef.close();
+                }
+            });
+        }
+        else {
+            matRef
+                .backdropClick()
+                .pipe(takeUntil(closed$))
+                .subscribe(() => matRef.close());
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDialogService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDialogService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+function isDialogComponentLoader(value) {
+    return (typeof value === 'object' &&
+        value !== null &&
+        'loadComponent' in value &&
+        typeof value.loadComponent === 'function');
+}
+function isTemplateRef(value) {
+    return value instanceof TemplateRef;
+}
+function isComponentClass(value) {
+    if (typeof value !== 'function') {
+        return false;
+    }
+    const fn = value;
+    return (!!fn['ɵcmp'] || !!fn['ɵfac'] || /^\s*class\s/.test(Function.prototype.toString.call(value)));
+}
+
+/**
+ * Centralized service that manages z-index stacking for all dialogs.
+ * Ensures dialogs always appear in the correct order.
+ * Alert dialogs always take priority over regular dialogs.
  */
 class DialogZIndexService {
-    // Rangos de z-index por tipo de diálogo
+    // Z-index ranges per dialog type
     static Z_INDEX_RANGES = {
-        normal: { base: 1000, current: 1000 }, // Diálogos normales: 1000-1999
-        alert: { base: 2000, current: 2000 }, // Diálogos de alerta: 2000-2999 (siempre encima)
+        normal: { base: 1000, current: 1000 }, // Regular dialogs: 1000-1999
+        alert: { base: 2000, current: 2000 }, // Alert dialogs: 2000-2999 (always on top)
     };
     static Z_INDEX_INCREMENT = 10;
     /**
-     * Obtiene el siguiente z-index disponible para un tipo específico de diálogo
-     * @param type Tipo de diálogo (normal, alert)
-     * @returns El próximo z-index a usar
+     * Gets the next available z-index for a specific dialog type.
+     * @param type Dialog type (normal, alert)
+     * @returns The next z-index to use
      */
     getNextZIndex(type = 'normal') {
         const range = DialogZIndexService.Z_INDEX_RANGES[type];
@@ -1559,23 +2566,23 @@ class DialogZIndexService {
         return range.current;
     }
     /**
-     * Obtiene el z-index actual más alto para un tipo específico
-     * @param type Tipo de diálogo
-     * @returns El z-index más alto actualmente en uso para ese tipo
+     * Gets the highest z-index currently in use for a specific type.
+     * @param type Dialog type
+     * @returns The highest z-index currently in use for that type
      */
     getCurrentZIndex(type = 'normal') {
         return DialogZIndexService.Z_INDEX_RANGES[type].current;
     }
     /**
-     * Obtiene el z-index más alto de todos los tipos
-     * @returns El z-index más alto de todos los diálogos
+     * Gets the highest z-index across all dialog types.
+     * @returns The highest z-index of all dialogs
      */
     getHighestZIndex() {
         return Math.max(...Object.values(DialogZIndexService.Z_INDEX_RANGES).map(range => range.current));
     }
     /**
-     * Resetea el contador de z-index (útil para testing)
-     * @param type Tipo específico a resetear, o undefined para resetear todos
+     * Resets the z-index counter (useful for testing).
+     * @param type Specific type to reset, or undefined to reset all
      */
     reset(type) {
         if (type) {
@@ -1583,41 +2590,39 @@ class DialogZIndexService {
             range.current = range.base;
         }
         else {
-            // Resetear todos los tipos
-            Object.entries(DialogZIndexService.Z_INDEX_RANGES).forEach(([_, range]) => {
+            Object.values(DialogZIndexService.Z_INDEX_RANGES).forEach(range => {
                 range.current = range.base;
             });
         }
     }
     /**
-     * Aplica z-index a un diálogo específico
-     * @param dialogRef Referencia al diálogo
-     * @param type Tipo de diálogo (determina el rango de z-index)
-     * @param zIndex Z-index específico a aplicar (opcional)
+     * Applies a z-index to a specific dialog.
+     * @param dialogRef Dialog reference
+     * @param type Dialog type (determines the z-index range)
+     * @param zIndex Specific z-index to apply (optional)
      */
     applyZIndex(dialogRef, type = 'normal', zIndex) {
-        const targetZIndex = zIndex || this.getNextZIndex(type);
-        setTimeout(() => {
-            const overlayRef = dialogRef._overlayRef;
-            if (overlayRef) {
-                const pane = overlayRef.overlayElement;
-                const backdrop = overlayRef.backdropElement;
-                if (pane) {
-                    pane.style.zIndex = (targetZIndex + 2).toString();
-                    // Agregar atributo data para debugging
-                    pane.setAttribute('data-dialog-type', type);
-                    pane.setAttribute('data-z-index', targetZIndex.toString());
-                }
-                if (backdrop) {
-                    backdrop.style.zIndex = (targetZIndex + 1).toString();
-                }
-            }
-        }, 0);
+        const targetZIndex = zIndex ?? this.getNextZIndex(type);
+        const overlayRef = this.getOverlayRef(dialogRef);
+        if (!overlayRef) {
+            return;
+        }
+        const pane = overlayRef.overlayElement;
+        const backdrop = overlayRef.backdropElement;
+        if (pane) {
+            pane.style.zIndex = (targetZIndex + 2).toString();
+            // Data attributes for debugging
+            pane.setAttribute('data-dialog-type', type);
+            pane.setAttribute('data-z-index', targetZIndex.toString());
+        }
+        if (backdrop) {
+            backdrop.style.zIndex = (targetZIndex + 1).toString();
+        }
     }
     /**
-     * Trae un diálogo al frente (usado por drag functionality)
-     * @param element Elemento del diálogo a traer al frente
-     * @param type Tipo de diálogo
+     * Brings a dialog to the front (used by the drag functionality).
+     * @param element Dialog element to bring to the front
+     * @param type Dialog type
      */
     bringToFront(element, type = 'normal') {
         const pane = element.closest('.cdk-overlay-pane');
@@ -1625,7 +2630,7 @@ class DialogZIndexService {
             const newZIndex = this.getNextZIndex(type);
             pane.style.zIndex = (newZIndex + 2).toString();
             pane.setAttribute('data-z-index', newZIndex.toString());
-            // También actualizar el backdrop si existe
+            // Also update the backdrop if it exists
             const backdrop = pane.parentElement?.querySelector('.cdk-overlay-backdrop');
             if (backdrop) {
                 backdrop.style.zIndex = (newZIndex + 1).toString();
@@ -1633,28 +2638,30 @@ class DialogZIndexService {
         }
     }
     /**
-     * Fuerza un diálogo a estar siempre encima de todos los demás
-     * Útil para alertas críticas que deben tener máxima prioridad
-     * @param dialogRef Referencia al diálogo
+     * Forces a dialog to stay above every other dialog.
+     * Useful for critical alerts that must have maximum priority.
+     * @param dialogRef Dialog reference
      */
     forceToTop(dialogRef) {
         const highestZIndex = this.getHighestZIndex();
         const topZIndex = highestZIndex + DialogZIndexService.Z_INDEX_INCREMENT;
-        setTimeout(() => {
-            const overlayRef = dialogRef._overlayRef;
-            if (overlayRef) {
-                const pane = overlayRef.overlayElement;
-                const backdrop = overlayRef.backdropElement;
-                if (pane) {
-                    pane.style.zIndex = (topZIndex + 2).toString();
-                    pane.setAttribute('data-z-index', topZIndex.toString());
-                    pane.setAttribute('data-forced-top', 'true');
-                }
-                if (backdrop) {
-                    backdrop.style.zIndex = (topZIndex + 1).toString();
-                }
-            }
-        }, 0);
+        const overlayRef = this.getOverlayRef(dialogRef);
+        if (!overlayRef) {
+            return;
+        }
+        const pane = overlayRef.overlayElement;
+        const backdrop = overlayRef.backdropElement;
+        if (pane) {
+            pane.style.zIndex = (topZIndex + 2).toString();
+            pane.setAttribute('data-z-index', topZIndex.toString());
+            pane.setAttribute('data-forced-top', 'true');
+        }
+        if (backdrop) {
+            backdrop.style.zIndex = (topZIndex + 1).toString();
+        }
+    }
+    getOverlayRef(dialogRef) {
+        return dialogRef._overlayRef;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DialogZIndexService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DialogZIndexService, providedIn: 'root' });
@@ -1687,19 +2694,6 @@ class DialogWrapper {
      */
     header = viewChild('dialogHeader', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
-    /**
-     * Timeout ID for debouncing z-index updates to prevent excessive DOM manipulations.
-     */
-    bringToFrontTimeoutId = null;
-    /**
-     * Creates an instance of DialogWrapper.
-     *
-     * @param dialogRef Reference to the dialog opened via the Material Dialog service
-     * @param config Configuration for the dialog wrapper, injected from MAT_DIALOG_DATA
-     */
-    constructor() {
-        // Constructor intentionally empty - required by Angular DI
-    }
     /**
      * Lifecycle hook that initializes the dynamic content after the view is ready.
      * Creates the component specified in the config and passes data to it.
@@ -1708,19 +2702,16 @@ class DialogWrapper {
         // Dynamically create the content component after the view is ready.
         this.contentHost().clear();
         const componentRef = this.contentHost().createComponent(this.config.component);
-        // Pass the provided data directly to the new component's instance.
-        // This requires the content component to have an @Input() property named 'data'.
-        if (this.config.data && componentRef.instance) {
-            componentRef.instance.data = this.config.data;
-        }
-    }
-    /**
-     * Cleanup lifecycle hook to cancel any pending animation frame requests.
-     */
-    ngOnDestroy() {
-        if (this.bringToFrontTimeoutId !== null) {
-            cancelAnimationFrame(this.bringToFrontTimeoutId);
-            this.bringToFrontTimeoutId = null;
+        // Pass the provided data to the new component. `setInput` supports both signal
+        // inputs and decorator-based @Input() properties and marks the component dirty;
+        // fall back to a plain property assignment when `data` is not declared as an input.
+        if (this.config.data !== undefined && componentRef.instance) {
+            try {
+                componentRef.setInput('data', this.config.data);
+            }
+            catch {
+                componentRef.instance.data = this.config.data;
+            }
         }
     }
     /**
@@ -1742,12 +2733,12 @@ class DialogWrapper {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DialogWrapper, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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]=\"config.closeAriaLabel ?? '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}.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: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", 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', { ...{
+            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]=\"config.closeAriaLabel ?? '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}.acp-dialog-close-btn{position:absolute;top:8px;right:16px}\n"] }]
+        }], propDecorators: { contentHost: [{ type: i0.ViewChild, args: ['contentHost', { ...{
                             read: ViewContainerRef,
                         }, isSignal: true }] }], header: [{ type: i0.ViewChild, args: ['dialogHeader', { isSignal: true }] }] } });
 
@@ -8077,16 +9068,16 @@ class AcpDateRangeInput {
      * @param option The selected date option.
      * @param input The HTML input element to update.
      */
-    updateDateOnOptionSelect(option, input) {
+    updateDateOnOptionSelect(option, input, emitEvent = true) {
         // If there is a callback function, use it to get the date range
         if (option?.callBackFunction) {
             const dateRange = option.callBackFunction();
             if (dateRange?.start && dateRange?.end) {
-                this.updateSelectedDates(input, dateRange.start, dateRange.end, option);
+                this.updateSelectedDates(input, dateRange.start, dateRange.end, option, emitEvent);
                 return;
             }
         }
-        this.updateDateWithSelectedOption(option, input);
+        this.updateDateWithSelectedOption(option, input, emitEvent);
     }
     /**
      * Calculates and updates the start and end dates based on the selected option.
@@ -8094,7 +9085,7 @@ class AcpDateRangeInput {
      * @param option The selected date option.
      * @param input The HTML input element to update.
      */
-    updateDateWithSelectedOption(option, input) {
+    updateDateWithSelectedOption(option, input, emitEvent = true) {
         const currDate = new Date();
         let startDate = new Date();
         let lastDate = new Date();
@@ -8127,7 +9118,7 @@ class AcpDateRangeInput {
                 break;
         }
         // Update the selected dates
-        this.updateSelectedDates(input, startDate, lastDate, option);
+        this.updateSelectedDates(input, startDate, lastDate, option, emitEvent);
     }
     /**
      * Updates the date range and input display.
@@ -8137,7 +9128,7 @@ class AcpDateRangeInput {
      * @param end End date of the range.
      * @param opt Optional selected date option.
      */
-    updateSelectedDates(input, start, end, opt) {
+    updateSelectedDates(input, start, end, opt, emitEvent = true) {
         const range = new DateRange(start, end);
         this.selectedDates = range;
         const expr = this.resolveDisplayExpr(start, end, opt);
@@ -8151,12 +9142,14 @@ class AcpDateRangeInput {
         else {
             input.value = rangeLabel;
         }
-        this.dateSelectionChanged.emit({
-            range,
-            selectedOption: this.dateDropDownOptions.find(o => o.isSelected) ?? null,
-            startExpr: expr.start,
-            endExpr: expr.end,
-        });
+        if (emitEvent) {
+            this.dateSelectionChanged.emit({
+                range,
+                selectedOption: this.dateDropDownOptions.find(o => o.isSelected) ?? null,
+                startExpr: expr.start,
+                endExpr: expr.end,
+            });
+        }
         this.cdref.markForCheck();
     }
     /**
@@ -8185,7 +9178,7 @@ class AcpDateRangeInput {
         }
         const selectedOptions = this._dateOptions().find(option => option.isSelected);
         if (selectedOptions && selectedOptions.optionType !== ACP_DATE_OPTION_TYPE.CUSTOM) {
-            this.updatedFromListValueSelection(selectedOptions, input);
+            this.updatedFromListValueSelection(selectedOptions, input, false);
             this.cdref.detectChanges();
         }
     }
@@ -8259,15 +9252,15 @@ class AcpDateRangeInput {
      * @param selectedOption The selected date option.
      * @param input The HTML input element to update.
      */
-    updatedFromListValueSelection(selectedOption, input) {
+    updatedFromListValueSelection(selectedOption, input, emitEvent = true) {
         // This will update value if option is selected from default list.
         if (!selectedOption.callBackFunction) {
-            this.updateDateOnOptionSelect(selectedOption, input);
+            this.updateDateOnOptionSelect(selectedOption, input, emitEvent);
             return;
         }
         // This will update value if option is selected from provided custom list.
         const dateRange = selectedOption.callBackFunction();
-        this.updateSelectedDates(input, dateRange.start ?? new Date(), dateRange.end ?? new Date(), selectedOption);
+        this.updateSelectedDates(input, dateRange.start ?? new Date(), dateRange.end ?? new Date(), selectedOption, emitEvent);
     }
     /**
      * Checks whether default initialization of options is required.
@@ -8288,7 +9281,7 @@ class AcpDateRangeInput {
         this._dateOptions.set(options);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDateRangeInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpDateRangeInput, isStandalone: true, selector: "acp-date-range-input", inputs: { inputLabel: { classPropertyName: "inputLabel", publicName: "inputLabel", isSignal: false, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showCalendarIcon: { classPropertyName: "showCalendarIcon", publicName: "showCalendarIcon", isSignal: true, isRequired: false, transformFunction: null }, showRangeRequired: { classPropertyName: "showRangeRequired", publicName: "showRangeRequired", isSignal: true, isRequired: false, transformFunction: null }, isRangeRequired: { classPropertyName: "isRangeRequired", publicName: "isRangeRequired", isSignal: true, isRequired: false, transformFunction: null }, staticOptionId: { classPropertyName: "staticOptionId", publicName: "staticOptionId", isSignal: false, isRequired: false, transformFunction: null }, dynamicOptionId: { classPropertyName: "dynamicOptionId", publicName: "dynamicOptionId", isSignal: false, isRequired: false, transformFunction: null }, calendarId: { classPropertyName: "calendarId", publicName: "calendarId", isSignal: false, isRequired: false, transformFunction: null }, enableDefaultOptions: { classPropertyName: "enableDefaultOptions", publicName: "enableDefaultOptions", isSignal: false, isRequired: false, transformFunction: null }, selectedDates: { classPropertyName: "selectedDates", publicName: "selectedDates", isSignal: false, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: false, isRequired: false, transformFunction: null }, isShowStaticDefaultOptions: { classPropertyName: "isShowStaticDefaultOptions", publicName: "isShowStaticDefaultOptions", isSignal: false, isRequired: false, transformFunction: null }, hideDefaultOptions: { classPropertyName: "hideDefaultOptions", publicName: "hideDefaultOptions", isSignal: false, isRequired: false, transformFunction: null }, cdkConnectedOverlayOffsetX: { classPropertyName: "cdkConnectedOverlayOffsetX", publicName: "cdkConnectedOverlayOffsetX", isSignal: false, isRequired: false, transformFunction: null }, cdkConnectedOverlayOffsetY: { classPropertyName: "cdkConnectedOverlayOffsetY", publicName: "cdkConnectedOverlayOffsetY", isSignal: false, isRequired: false, transformFunction: null }, listCdkConnectedOverlayOffsetY: { classPropertyName: "listCdkConnectedOverlayOffsetY", publicName: "listCdkConnectedOverlayOffsetY", isSignal: false, isRequired: false, transformFunction: null }, listCdkConnectedOverlayOffsetX: { classPropertyName: "listCdkConnectedOverlayOffsetX", publicName: "listCdkConnectedOverlayOffsetX", isSignal: false, isRequired: false, transformFunction: null }, selectedOptionIndex: { classPropertyName: "selectedOptionIndex", publicName: "selectedOptionIndex", isSignal: false, isRequired: false, transformFunction: null }, displaySelectedLabel: { classPropertyName: "displaySelectedLabel", publicName: "displaySelectedLabel", isSignal: false, isRequired: false, transformFunction: null }, displaySelectedExpression: { classPropertyName: "displaySelectedExpression", publicName: "displaySelectedExpression", isSignal: false, isRequired: false, transformFunction: null }, enableEditableDates: { classPropertyName: "enableEditableDates", publicName: "enableEditableDates", isSignal: false, isRequired: false, transformFunction: null }, cdkConnectedOverlayPush: { classPropertyName: "cdkConnectedOverlayPush", publicName: "cdkConnectedOverlayPush", isSignal: false, isRequired: false, transformFunction: null }, cdkConnectedOverlayPositions: { classPropertyName: "cdkConnectedOverlayPositions", publicName: "cdkConnectedOverlayPositions", isSignal: false, isRequired: false, transformFunction: null }, allowSingleDateSelection: { classPropertyName: "allowSingleDateSelection", publicName: "allowSingleDateSelection", isSignal: false, isRequired: false, transformFunction: null }, autoSelectOption: { classPropertyName: "autoSelectOption", publicName: "autoSelectOption", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null }, dateDropDownOptions: { classPropertyName: "dateDropDownOptions", publicName: "dateDropDownOptions", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { dateSelectionChanged: "dateSelectionChanged", dateListOptions: "dateListOptions", rangeRequiredChange: "rangeRequiredChange" }, viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], ngImport: i0, template: "<!--\n  AcpDateRangeInput Component Template\n  @author AcontPlus S.A.S\n  @version 1.0.0\n\n  Comprehensive date range picker with predefined options, custom calendar selection,\n  and support for human-readable date expressions.\n-->\n<div class=\"date-picker-main ndp-main\" cdkOverlayOrigin #trigger>\n  <mat-form-field\n    class=\"w-full\"\n    [class]=\"{ 'display-hidden': isShowStaticDefaultOptions }\"\n    (click)=\"toggleDateOptionSelectionList($event)\"\n  >\n    <mat-label (click)=\"toggleDateOptionSelectionList($event)\">{{ inputLabel }}</mat-label>\n    <input\n      matInput\n      #dateInput\n      class=\"cursor-pointer\"\n      id=\"date-input-field\"\n      (input)=\"onMainInputChange(dateInput)\"\n    />\n    <ng-container matSuffix>\n      @if (showClearButton() && !!dateInput.value) {\n      <button\n        mat-icon-button\n        class=\"cursor-pointer pe-0 ps-0\"\n        matTooltip=\"Clear\"\n        (click)=\"clearSelection($event)\"\n      >\n        <mat-icon>clear</mat-icon>\n      </button>\n      } @if (showCalendarIcon()) {\n      <button mat-icon-button class=\"cursor-pointer\">\n        <mat-icon>date_range</mat-icon>\n      </button>\n      } @if (showRangeRequired()) {\n      <button\n        mat-icon-button\n        class=\"cursor-pointer\"\n        [class.checked]=\"isRangeRequired()\"\n        (click)=\"toggleRangeSelection($event)\"\n        matTooltip=\"Rango de fechas obligatorio\"\n      >\n        <mat-icon [color]=\"isRangeRequired() ? 'accent' : ''\">\n          {{ isRangeRequired() ? 'check_box' : 'check_box_outline_blank' }}\n        </mat-icon>\n      </button>\n      }\n    </ng-container>\n  </mat-form-field>\n\n  @if (dateDropDownOptions.length && isShowStaticDefaultOptions) {\n  <ng-container\n    *ngTemplateOutlet=\"\n        dateOptionList;\n        context: {\n          $implicit: visibleOptions(),\n          dateInput: dateInput,\n          optionId: staticOptionId,\n          className: 'w-full custom-ckd-container ndp-cdk-container range-input',\n        }\n      \"\n  />\n  }\n\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isDateOptionList\"\n    [cdkConnectedOverlayPush]=\"cdkConnectedOverlayPush\"\n    [cdkConnectedOverlayOffsetX]=\"listCdkConnectedOverlayOffsetX\"\n    [cdkConnectedOverlayOffsetY]=\"listCdkConnectedOverlayOffsetY\"\n    (backdropClick)=\"isDateOptionList = false\"\n  >\n    @if (dateDropDownOptions.length && !isShowStaticDefaultOptions) {\n    <ng-container\n      *ngTemplateOutlet=\"\n          dateOptionList;\n          context: {\n            $implicit: visibleOptions(),\n            dateInput: dateInput,\n            optionId: dynamicOptionId,\n            className: 'w-full custom-ckd-container ndp-cdk-container range-input',\n          }\n        \"\n    />\n    }\n  </ng-template>\n\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isCustomRange\"\n    [cdkConnectedOverlayPush]=\"cdkConnectedOverlayPush\"\n    [cdkConnectedOverlayPositions]=\"cdkConnectedOverlayPositions\"\n    [cdkConnectedOverlayOffsetX]=\"cdkConnectedOverlayOffsetX\"\n    [cdkConnectedOverlayOffsetY]=\"cdkConnectedOverlayOffsetY\"\n    (backdropClick)=\"isCustomRange = false\"\n  >\n    <div\n      class=\"custom-ckd-container ndp-cdk-container custom-calendar-container ndp-calendar-container\"\n      [class]=\"{ 'without-default-opt': hideDefaultOptions }\"\n    >\n      <div class=\"row-1\">\n        @if (!hideDefaultOptions) {\n        <div class=\"pt-custom column-1\">\n          <ng-container\n            *ngTemplateOutlet=\"\n                dateOptionList;\n                context: {\n                  $implicit: visibleOptions(),\n                  dateInput: dateInput,\n                }\n              \"\n          />\n        </div>\n        <div class=\"ndp-column-separator\"></div>\n        }\n        <div class=\"mt-2 column-2\">\n          <acp-date-range-calendar\n            [selectedDates]=\"selectedDates\"\n            #calendar\n            [minDate]=\"minDate\"\n            [maxDate]=\"maxDate\"\n            (selectedDatesChange)=\"onCalendarSelectionChange($event)\"\n          />\n        </div>\n      </div>\n      <div class=\"row-2 br-top\">\n        <div class=\"footer-content ndp-footer-content\">\n          @if (enableEditableDates) {\n          <form class=\"ndp-date-inputs\" [formGroup]=\"editableForm\">\n            <mat-form-field class=\"ndp-date-field\" subscriptSizing=\"dynamic\">\n              <mat-label>Start</mat-label>\n              <input\n                matInput\n                formControlName=\"start\"\n                placeholder=\"e.g. now-7d\"\n                (blur)=\"commitEditableDates(calendar)\"\n                (keydown.enter)=\"applyEditableDates(dateInput, calendar)\"\n              />\n              @if (editableForm.controls.start.hasError('required')) {\n              <mat-error>Required</mat-error>\n              } @else if (editableForm.controls.start.hasError('invalidDate')) {\n              <mat-error>Invalid date or expression</mat-error>\n              }\n            </mat-form-field>\n            <mat-form-field class=\"ndp-date-field\" subscriptSizing=\"dynamic\">\n              <mat-label>End</mat-label>\n              <input\n                matInput\n                formControlName=\"end\"\n                placeholder=\"e.g. now\"\n                (blur)=\"commitEditableDates(calendar)\"\n                (keydown.enter)=\"applyEditableDates(dateInput, calendar)\"\n              />\n              @if (editableForm.controls.end.hasError('required')) {\n              <mat-error>Required</mat-error>\n              } @else if (editableForm.controls.end.hasError('invalidDate')) {\n              <mat-error>Invalid date or expression</mat-error>\n              } @else if (editableForm.hasError('rangeOrder')) {\n              <mat-error>Start must be before end</mat-error>\n              }\n            </mat-form-field>\n          </form>\n          } @else {\n          <span id=\"range-label-text\" class=\"ndp-range-label-text\">\n            {{ calendar.selectedDates?.start | date: dateFormat }} @if (calendar.selectedDates?.end)\n            {\n            <span> - {{ calendar.selectedDates?.end | date: dateFormat }} </span>\n            }\n          </span>\n          }\n          <div class=\"buttons\">\n            <acp-button\n              type=\"button\"\n              appearance=\"filled\"\n              color=\"primary\"\n              size=\"small\"\n              [class.disabled]=\"\n                enableEditableDates\n                  ? editableForm.invalid\n                  : !(calendar.selectedDates?.start && calendar.selectedDates?.end)\n              \"\n              (clicked)=\"\n                enableEditableDates && commitEditableDates(calendar);\n                updateCustomRange(dateInput, calendar.selectedDates)\n              \"\n            >\n              &nbsp;Aplicar&nbsp;\n            </acp-button>\n            <acp-button\n              type=\"button\"\n              appearance=\"text\"\n              color=\"error\"\n              size=\"small\"\n              (clicked)=\"isCustomRange = false\"\n              >Cancelar</acp-button\n            >\n          </div>\n        </div>\n      </div>\n    </div>\n  </ng-template>\n</div>\n\n<ng-template\n  #dateOptionList\n  let-options\n  let-input=\"dateInput\"\n  let-optionId=\"optionId\"\n  let-className=\"className\"\n>\n  <mat-action-list [ngClass]=\"className\" [id]=\"optionId\">\n    @for (option of options; track option.optionLabel) {\n    <mat-list-item [activated]=\"option.isSelected\" (click)=\"updateSelection(option, input)\">\n      {{ option.optionLabel }}\n    </mat-list-item>\n    }\n  </mat-action-list>\n</ng-template>\n", styles: ["::ng-deep .cdk-overlay-dark-backdrop{background:none}mat-list-item.mat-mdc-list-item{height:40px}mat-list-item.mdc-list-item--activated{background-color:var(--ndp-selected-option-bg, var(--mat-sys-secondary-container, rgba(0, 0, 0, .08)))}::ng-deep .cdk-overlay-pane:has(.custom-ckd-container),::ng-deep .cdk-overlay-pane:has(.ndp-cdk-container){width:100%;background-color:var(--mat-sys-surface-container);max-height:100vh;overflow-y:auto;overflow-x:hidden;max-width:700px;margin-top:-22px;border:1px solid var(--mat-sys-surface-container)}::ng-deep .cdk-overlay-pane:has(.range-input){max-width:250px}.br-top{border-top:1px solid var(--mat-sys-surface-container)}.br-right{border-right:1px solid var(--mat-sys-surface-container)}.disabled{pointer-events:none;opacity:.5}.mat-button,.mdc-button{font-family:var(--mat-list-list-item-label-text-font);line-height:var(--mat-list-list-item-label-text-line-height);font-size:var(--mat-list-list-item-label-text-size);font-weight:var(--mat-list-list-item-label-text-weight);letter-spacing:var(--mat-list-list-item-label-text-tracking)}.w-full{width:100%}.display-hidden{display:none}.custom-calendar-container,.ndp-calendar-container{width:100%}.row-1,.row-2{width:100%;box-sizing:border-box}.row-1{display:flex;align-items:stretch}.row-2{padding:16px}.ndp-column-separator{flex:0 0 1px;background-color:var(--mat-sys-surface-container)}.footer-content,.ndp-footer-content{align-items:center;display:flex;text-align:right;justify-content:end;gap:16px;text-overflow:ellipsis}.footer-content .buttons,.ndp-footer-content .buttons{display:flex;gap:8px}.ndp-date-inputs{display:flex;gap:8px;margin-right:auto;align-items:flex-start}.ndp-date-field{width:150px}.column-1{flex:0 0 25%;overflow:auto}.column-2{flex:1 1 auto;min-width:0}.without-default-opt .column-1{display:none}@media(max-width:400px){.footer-content,.ndp-footer-content{display:block}.footer-content .buttons,.ndp-footer-content .buttons{justify-content:flex-end;margin-top:20px}#range-label-text{margin-right:1.5rem}}@media(max-width:650px){.row-1{flex-direction:column}.column-1{flex-basis:auto}.column-separator{display:none}}.pe-0{padding-right:0}.ps-0{padding-left:0}button.checked{color:var(--mat-sys-primary);border-radius:4px}.ndp-range-label-text{color:var(--mat-sys-on-surface)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.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: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i3$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i3$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i6.MatActionList, selector: "mat-action-list", exportAs: ["matActionList"] }, { kind: "component", type: i6.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AcpDateRangeCalendar, selector: "acp-date-range-calendar", inputs: ["minDate", "maxDate", "selectedDates"], outputs: ["selectedDatesChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AcpButton, selector: "acp-button" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpDateRangeInput, isStandalone: true, selector: "acp-date-range-input", inputs: { inputLabel: { classPropertyName: "inputLabel", publicName: "inputLabel", isSignal: false, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showCalendarIcon: { classPropertyName: "showCalendarIcon", publicName: "showCalendarIcon", isSignal: true, isRequired: false, transformFunction: null }, showRangeRequired: { classPropertyName: "showRangeRequired", publicName: "showRangeRequired", isSignal: true, isRequired: false, transformFunction: null }, isRangeRequired: { classPropertyName: "isRangeRequired", publicName: "isRangeRequired", isSignal: true, isRequired: false, transformFunction: null }, staticOptionId: { classPropertyName: "staticOptionId", publicName: "staticOptionId", isSignal: false, isRequired: false, transformFunction: null }, dynamicOptionId: { classPropertyName: "dynamicOptionId", publicName: "dynamicOptionId", isSignal: false, isRequired: false, transformFunction: null }, calendarId: { classPropertyName: "calendarId", publicName: "calendarId", isSignal: false, isRequired: false, transformFunction: null }, enableDefaultOptions: { classPropertyName: "enableDefaultOptions", publicName: "enableDefaultOptions", isSignal: false, isRequired: false, transformFunction: null }, selectedDates: { classPropertyName: "selectedDates", publicName: "selectedDates", isSignal: false, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: false, isRequired: false, transformFunction: null }, isShowStaticDefaultOptions: { classPropertyName: "isShowStaticDefaultOptions", publicName: "isShowStaticDefaultOptions", isSignal: false, isRequired: false, transformFunction: null }, hideDefaultOptions: { classPropertyName: "hideDefaultOptions", publicName: "hideDefaultOptions", isSignal: false, isRequired: false, transformFunction: null }, cdkConnectedOverlayOffsetX: { classPropertyName: "cdkConnectedOverlayOffsetX", publicName: "cdkConnectedOverlayOffsetX", isSignal: false, isRequired: false, transformFunction: null }, cdkConnectedOverlayOffsetY: { classPropertyName: "cdkConnectedOverlayOffsetY", publicName: "cdkConnectedOverlayOffsetY", isSignal: false, isRequired: false, transformFunction: null }, listCdkConnectedOverlayOffsetY: { classPropertyName: "listCdkConnectedOverlayOffsetY", publicName: "listCdkConnectedOverlayOffsetY", isSignal: false, isRequired: false, transformFunction: null }, listCdkConnectedOverlayOffsetX: { classPropertyName: "listCdkConnectedOverlayOffsetX", publicName: "listCdkConnectedOverlayOffsetX", isSignal: false, isRequired: false, transformFunction: null }, selectedOptionIndex: { classPropertyName: "selectedOptionIndex", publicName: "selectedOptionIndex", isSignal: false, isRequired: false, transformFunction: null }, displaySelectedLabel: { classPropertyName: "displaySelectedLabel", publicName: "displaySelectedLabel", isSignal: false, isRequired: false, transformFunction: null }, displaySelectedExpression: { classPropertyName: "displaySelectedExpression", publicName: "displaySelectedExpression", isSignal: false, isRequired: false, transformFunction: null }, enableEditableDates: { classPropertyName: "enableEditableDates", publicName: "enableEditableDates", isSignal: false, isRequired: false, transformFunction: null }, cdkConnectedOverlayPush: { classPropertyName: "cdkConnectedOverlayPush", publicName: "cdkConnectedOverlayPush", isSignal: false, isRequired: false, transformFunction: null }, cdkConnectedOverlayPositions: { classPropertyName: "cdkConnectedOverlayPositions", publicName: "cdkConnectedOverlayPositions", isSignal: false, isRequired: false, transformFunction: null }, allowSingleDateSelection: { classPropertyName: "allowSingleDateSelection", publicName: "allowSingleDateSelection", isSignal: false, isRequired: false, transformFunction: null }, autoSelectOption: { classPropertyName: "autoSelectOption", publicName: "autoSelectOption", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null }, dateDropDownOptions: { classPropertyName: "dateDropDownOptions", publicName: "dateDropDownOptions", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { dateSelectionChanged: "dateSelectionChanged", dateListOptions: "dateListOptions", rangeRequiredChange: "rangeRequiredChange" }, viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], ngImport: i0, template: "<!--\n  AcpDateRangeInput Component Template\n  @author AcontPlus S.A.S\n  @version 1.0.0\n\n  Comprehensive date range picker with predefined options, custom calendar selection,\n  and support for human-readable date expressions.\n-->\n<div class=\"date-picker-main ndp-main\" cdkOverlayOrigin #trigger>\n  <mat-form-field\n    class=\"w-full\"\n    [class]=\"{ 'display-hidden': isShowStaticDefaultOptions }\"\n    (click)=\"toggleDateOptionSelectionList($event)\"\n  >\n    <mat-label (click)=\"toggleDateOptionSelectionList($event)\">{{ inputLabel }}</mat-label>\n    <input\n      matInput\n      #dateInput\n      class=\"cursor-pointer\"\n      id=\"date-input-field\"\n      (input)=\"onMainInputChange(dateInput)\"\n    />\n    <ng-container matSuffix>\n      @if (showClearButton() && !!dateInput.value) {\n      <button\n        mat-icon-button\n        class=\"cursor-pointer pe-0 ps-0\"\n        matTooltip=\"Clear\"\n        (click)=\"clearSelection($event)\"\n      >\n        <mat-icon>clear</mat-icon>\n      </button>\n      } @if (showCalendarIcon()) {\n      <button mat-icon-button class=\"cursor-pointer\">\n        <mat-icon>date_range</mat-icon>\n      </button>\n      } @if (showRangeRequired()) {\n      <button\n        mat-icon-button\n        class=\"cursor-pointer\"\n        [class.checked]=\"isRangeRequired()\"\n        (click)=\"toggleRangeSelection($event)\"\n        matTooltip=\"Rango de fechas obligatorio\"\n      >\n        <mat-icon [color]=\"isRangeRequired() ? 'accent' : ''\">\n          {{ isRangeRequired() ? 'check_box' : 'check_box_outline_blank' }}\n        </mat-icon>\n      </button>\n      }\n    </ng-container>\n  </mat-form-field>\n\n  @if (dateDropDownOptions.length && isShowStaticDefaultOptions) {\n  <ng-container\n    *ngTemplateOutlet=\"\n        dateOptionList;\n        context: {\n          $implicit: visibleOptions(),\n          dateInput: dateInput,\n          optionId: staticOptionId,\n          className: 'w-full custom-ckd-container ndp-cdk-container range-input',\n        }\n      \"\n  />\n  }\n\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isDateOptionList\"\n    [cdkConnectedOverlayPush]=\"cdkConnectedOverlayPush\"\n    [cdkConnectedOverlayOffsetX]=\"listCdkConnectedOverlayOffsetX\"\n    [cdkConnectedOverlayOffsetY]=\"listCdkConnectedOverlayOffsetY\"\n    (backdropClick)=\"isDateOptionList = false\"\n  >\n    @if (dateDropDownOptions.length && !isShowStaticDefaultOptions) {\n    <ng-container\n      *ngTemplateOutlet=\"\n          dateOptionList;\n          context: {\n            $implicit: visibleOptions(),\n            dateInput: dateInput,\n            optionId: dynamicOptionId,\n            className: 'w-full custom-ckd-container ndp-cdk-container range-input',\n          }\n        \"\n    />\n    }\n  </ng-template>\n\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isCustomRange\"\n    [cdkConnectedOverlayPush]=\"cdkConnectedOverlayPush\"\n    [cdkConnectedOverlayPositions]=\"cdkConnectedOverlayPositions\"\n    [cdkConnectedOverlayOffsetX]=\"cdkConnectedOverlayOffsetX\"\n    [cdkConnectedOverlayOffsetY]=\"cdkConnectedOverlayOffsetY\"\n    (backdropClick)=\"isCustomRange = false\"\n  >\n    <div\n      class=\"custom-ckd-container ndp-cdk-container custom-calendar-container ndp-calendar-container\"\n      [class]=\"{ 'without-default-opt': hideDefaultOptions }\"\n    >\n      <div class=\"row-1\">\n        @if (!hideDefaultOptions) {\n        <div class=\"pt-custom column-1\">\n          <ng-container\n            *ngTemplateOutlet=\"\n                dateOptionList;\n                context: {\n                  $implicit: visibleOptions(),\n                  dateInput: dateInput,\n                }\n              \"\n          />\n        </div>\n        <div class=\"ndp-column-separator\"></div>\n        }\n        <div class=\"mt-2 column-2\">\n          <acp-date-range-calendar\n            [selectedDates]=\"selectedDates\"\n            #calendar\n            [minDate]=\"minDate\"\n            [maxDate]=\"maxDate\"\n            (selectedDatesChange)=\"onCalendarSelectionChange($event)\"\n          />\n        </div>\n      </div>\n      <div class=\"row-2 br-top\">\n        <div class=\"footer-content ndp-footer-content\">\n          @if (enableEditableDates) {\n          <form class=\"ndp-date-inputs\" [formGroup]=\"editableForm\">\n            <mat-form-field class=\"ndp-date-field\" subscriptSizing=\"dynamic\">\n              <mat-label>Start</mat-label>\n              <input\n                matInput\n                formControlName=\"start\"\n                placeholder=\"e.g. now-7d\"\n                (blur)=\"commitEditableDates(calendar)\"\n                (keydown.enter)=\"applyEditableDates(dateInput, calendar)\"\n              />\n              @if (editableForm.controls.start.hasError('required')) {\n              <mat-error>Required</mat-error>\n              } @else if (editableForm.controls.start.hasError('invalidDate')) {\n              <mat-error>Invalid date or expression</mat-error>\n              }\n            </mat-form-field>\n            <mat-form-field class=\"ndp-date-field\" subscriptSizing=\"dynamic\">\n              <mat-label>End</mat-label>\n              <input\n                matInput\n                formControlName=\"end\"\n                placeholder=\"e.g. now\"\n                (blur)=\"commitEditableDates(calendar)\"\n                (keydown.enter)=\"applyEditableDates(dateInput, calendar)\"\n              />\n              @if (editableForm.controls.end.hasError('required')) {\n              <mat-error>Required</mat-error>\n              } @else if (editableForm.controls.end.hasError('invalidDate')) {\n              <mat-error>Invalid date or expression</mat-error>\n              } @else if (editableForm.hasError('rangeOrder')) {\n              <mat-error>Start must be before end</mat-error>\n              }\n            </mat-form-field>\n          </form>\n          } @else {\n          <span id=\"range-label-text\" class=\"ndp-range-label-text\">\n            {{ calendar.selectedDates?.start | date: dateFormat }} @if (calendar.selectedDates?.end)\n            {\n            <span> - {{ calendar.selectedDates?.end | date: dateFormat }} </span>\n            }\n          </span>\n          }\n          <div class=\"buttons\">\n            <acp-button\n              type=\"button\"\n              appearance=\"filled\"\n              color=\"primary\"\n              size=\"small\"\n              [class.disabled]=\"\n                enableEditableDates\n                  ? editableForm.invalid\n                  : !(calendar.selectedDates?.start && calendar.selectedDates?.end)\n              \"\n              (clicked)=\"\n                enableEditableDates && commitEditableDates(calendar);\n                updateCustomRange(dateInput, calendar.selectedDates)\n              \"\n            >\n              &nbsp;Aplicar&nbsp;\n            </acp-button>\n            <acp-button\n              type=\"button\"\n              appearance=\"text\"\n              color=\"error\"\n              size=\"small\"\n              (clicked)=\"isCustomRange = false\"\n              >Cancelar</acp-button\n            >\n          </div>\n        </div>\n      </div>\n    </div>\n  </ng-template>\n</div>\n\n<ng-template\n  #dateOptionList\n  let-options\n  let-input=\"dateInput\"\n  let-optionId=\"optionId\"\n  let-className=\"className\"\n>\n  <mat-action-list [ngClass]=\"className\" [id]=\"optionId\">\n    @for (option of options; track option.optionLabel) {\n    <mat-list-item [activated]=\"option.isSelected\" (click)=\"updateSelection(option, input)\">\n      {{ option.optionLabel }}\n    </mat-list-item>\n    }\n  </mat-action-list>\n</ng-template>\n", styles: ["mat-list-item.mat-mdc-list-item{height:40px}mat-list-item.mdc-list-item--activated{background-color:var(--ndp-selected-option-bg, var(--mat-sys-secondary-container, rgba(0, 0, 0, .08)))}::ng-deep .cdk-overlay-pane:has(.custom-ckd-container),::ng-deep .cdk-overlay-pane:has(.ndp-cdk-container){width:100%;background-color:var(--mat-sys-surface-container);max-height:100vh;overflow-y:auto;overflow-x:hidden;max-width:700px;margin-top:0;border:1px solid var(--mat-sys-surface-container)}::ng-deep .cdk-overlay-pane:has(.range-input){max-width:250px}.br-top{border-top:1px solid var(--mat-sys-surface-container)}.br-right{border-right:1px solid var(--mat-sys-surface-container)}.disabled{pointer-events:none;opacity:.5}.mat-button,.mdc-button{font-family:var(--mat-list-list-item-label-text-font);line-height:var(--mat-list-list-item-label-text-line-height);font-size:var(--mat-list-list-item-label-text-size);font-weight:var(--mat-list-list-item-label-text-weight);letter-spacing:var(--mat-list-list-item-label-text-tracking)}.w-full{width:100%}.display-hidden{display:none}.custom-calendar-container,.ndp-calendar-container{width:100%}.row-1,.row-2{width:100%;box-sizing:border-box}.row-1{display:flex;align-items:stretch}.row-2{padding:16px}.ndp-column-separator{flex:0 0 1px;background-color:var(--mat-sys-surface-container)}.footer-content,.ndp-footer-content{align-items:center;display:flex;text-align:right;justify-content:end;gap:16px;text-overflow:ellipsis}.footer-content .buttons,.ndp-footer-content .buttons{display:flex;gap:8px}.ndp-date-inputs{display:flex;gap:8px;margin-right:auto;align-items:flex-start}.ndp-date-field{width:150px}.column-1{flex:0 0 25%;overflow:auto}.column-2{flex:1 1 auto;min-width:0}.without-default-opt .column-1{display:none}@media(max-width:400px){.footer-content,.ndp-footer-content{display:block}.footer-content .buttons,.ndp-footer-content .buttons{justify-content:flex-end;margin-top:20px}#range-label-text{margin-right:1.5rem}}@media(max-width:650px){.row-1{flex-direction:column}.column-1{flex-basis:auto}.column-separator{display:none}}.pe-0{padding-right:0}.ps-0{padding-left:0}button.checked{color:var(--mat-sys-primary);border-radius:4px}.ndp-range-label-text{color:var(--mat-sys-on-surface)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.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: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i3$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i3$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i6.MatActionList, selector: "mat-action-list", exportAs: ["matActionList"] }, { kind: "component", type: i6.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AcpDateRangeCalendar, selector: "acp-date-range-calendar", inputs: ["minDate", "maxDate", "selectedDates"], outputs: ["selectedDatesChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AcpButton, selector: "acp-button" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDateRangeInput, decorators: [{
             type: Component,
@@ -8311,7 +9304,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         DatePipe,
                         NgTemplateOutlet,
                         AcpButton,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  AcpDateRangeInput Component Template\n  @author AcontPlus S.A.S\n  @version 1.0.0\n\n  Comprehensive date range picker with predefined options, custom calendar selection,\n  and support for human-readable date expressions.\n-->\n<div class=\"date-picker-main ndp-main\" cdkOverlayOrigin #trigger>\n  <mat-form-field\n    class=\"w-full\"\n    [class]=\"{ 'display-hidden': isShowStaticDefaultOptions }\"\n    (click)=\"toggleDateOptionSelectionList($event)\"\n  >\n    <mat-label (click)=\"toggleDateOptionSelectionList($event)\">{{ inputLabel }}</mat-label>\n    <input\n      matInput\n      #dateInput\n      class=\"cursor-pointer\"\n      id=\"date-input-field\"\n      (input)=\"onMainInputChange(dateInput)\"\n    />\n    <ng-container matSuffix>\n      @if (showClearButton() && !!dateInput.value) {\n      <button\n        mat-icon-button\n        class=\"cursor-pointer pe-0 ps-0\"\n        matTooltip=\"Clear\"\n        (click)=\"clearSelection($event)\"\n      >\n        <mat-icon>clear</mat-icon>\n      </button>\n      } @if (showCalendarIcon()) {\n      <button mat-icon-button class=\"cursor-pointer\">\n        <mat-icon>date_range</mat-icon>\n      </button>\n      } @if (showRangeRequired()) {\n      <button\n        mat-icon-button\n        class=\"cursor-pointer\"\n        [class.checked]=\"isRangeRequired()\"\n        (click)=\"toggleRangeSelection($event)\"\n        matTooltip=\"Rango de fechas obligatorio\"\n      >\n        <mat-icon [color]=\"isRangeRequired() ? 'accent' : ''\">\n          {{ isRangeRequired() ? 'check_box' : 'check_box_outline_blank' }}\n        </mat-icon>\n      </button>\n      }\n    </ng-container>\n  </mat-form-field>\n\n  @if (dateDropDownOptions.length && isShowStaticDefaultOptions) {\n  <ng-container\n    *ngTemplateOutlet=\"\n        dateOptionList;\n        context: {\n          $implicit: visibleOptions(),\n          dateInput: dateInput,\n          optionId: staticOptionId,\n          className: 'w-full custom-ckd-container ndp-cdk-container range-input',\n        }\n      \"\n  />\n  }\n\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isDateOptionList\"\n    [cdkConnectedOverlayPush]=\"cdkConnectedOverlayPush\"\n    [cdkConnectedOverlayOffsetX]=\"listCdkConnectedOverlayOffsetX\"\n    [cdkConnectedOverlayOffsetY]=\"listCdkConnectedOverlayOffsetY\"\n    (backdropClick)=\"isDateOptionList = false\"\n  >\n    @if (dateDropDownOptions.length && !isShowStaticDefaultOptions) {\n    <ng-container\n      *ngTemplateOutlet=\"\n          dateOptionList;\n          context: {\n            $implicit: visibleOptions(),\n            dateInput: dateInput,\n            optionId: dynamicOptionId,\n            className: 'w-full custom-ckd-container ndp-cdk-container range-input',\n          }\n        \"\n    />\n    }\n  </ng-template>\n\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isCustomRange\"\n    [cdkConnectedOverlayPush]=\"cdkConnectedOverlayPush\"\n    [cdkConnectedOverlayPositions]=\"cdkConnectedOverlayPositions\"\n    [cdkConnectedOverlayOffsetX]=\"cdkConnectedOverlayOffsetX\"\n    [cdkConnectedOverlayOffsetY]=\"cdkConnectedOverlayOffsetY\"\n    (backdropClick)=\"isCustomRange = false\"\n  >\n    <div\n      class=\"custom-ckd-container ndp-cdk-container custom-calendar-container ndp-calendar-container\"\n      [class]=\"{ 'without-default-opt': hideDefaultOptions }\"\n    >\n      <div class=\"row-1\">\n        @if (!hideDefaultOptions) {\n        <div class=\"pt-custom column-1\">\n          <ng-container\n            *ngTemplateOutlet=\"\n                dateOptionList;\n                context: {\n                  $implicit: visibleOptions(),\n                  dateInput: dateInput,\n                }\n              \"\n          />\n        </div>\n        <div class=\"ndp-column-separator\"></div>\n        }\n        <div class=\"mt-2 column-2\">\n          <acp-date-range-calendar\n            [selectedDates]=\"selectedDates\"\n            #calendar\n            [minDate]=\"minDate\"\n            [maxDate]=\"maxDate\"\n            (selectedDatesChange)=\"onCalendarSelectionChange($event)\"\n          />\n        </div>\n      </div>\n      <div class=\"row-2 br-top\">\n        <div class=\"footer-content ndp-footer-content\">\n          @if (enableEditableDates) {\n          <form class=\"ndp-date-inputs\" [formGroup]=\"editableForm\">\n            <mat-form-field class=\"ndp-date-field\" subscriptSizing=\"dynamic\">\n              <mat-label>Start</mat-label>\n              <input\n                matInput\n                formControlName=\"start\"\n                placeholder=\"e.g. now-7d\"\n                (blur)=\"commitEditableDates(calendar)\"\n                (keydown.enter)=\"applyEditableDates(dateInput, calendar)\"\n              />\n              @if (editableForm.controls.start.hasError('required')) {\n              <mat-error>Required</mat-error>\n              } @else if (editableForm.controls.start.hasError('invalidDate')) {\n              <mat-error>Invalid date or expression</mat-error>\n              }\n            </mat-form-field>\n            <mat-form-field class=\"ndp-date-field\" subscriptSizing=\"dynamic\">\n              <mat-label>End</mat-label>\n              <input\n                matInput\n                formControlName=\"end\"\n                placeholder=\"e.g. now\"\n                (blur)=\"commitEditableDates(calendar)\"\n                (keydown.enter)=\"applyEditableDates(dateInput, calendar)\"\n              />\n              @if (editableForm.controls.end.hasError('required')) {\n              <mat-error>Required</mat-error>\n              } @else if (editableForm.controls.end.hasError('invalidDate')) {\n              <mat-error>Invalid date or expression</mat-error>\n              } @else if (editableForm.hasError('rangeOrder')) {\n              <mat-error>Start must be before end</mat-error>\n              }\n            </mat-form-field>\n          </form>\n          } @else {\n          <span id=\"range-label-text\" class=\"ndp-range-label-text\">\n            {{ calendar.selectedDates?.start | date: dateFormat }} @if (calendar.selectedDates?.end)\n            {\n            <span> - {{ calendar.selectedDates?.end | date: dateFormat }} </span>\n            }\n          </span>\n          }\n          <div class=\"buttons\">\n            <acp-button\n              type=\"button\"\n              appearance=\"filled\"\n              color=\"primary\"\n              size=\"small\"\n              [class.disabled]=\"\n                enableEditableDates\n                  ? editableForm.invalid\n                  : !(calendar.selectedDates?.start && calendar.selectedDates?.end)\n              \"\n              (clicked)=\"\n                enableEditableDates && commitEditableDates(calendar);\n                updateCustomRange(dateInput, calendar.selectedDates)\n              \"\n            >\n              &nbsp;Aplicar&nbsp;\n            </acp-button>\n            <acp-button\n              type=\"button\"\n              appearance=\"text\"\n              color=\"error\"\n              size=\"small\"\n              (clicked)=\"isCustomRange = false\"\n              >Cancelar</acp-button\n            >\n          </div>\n        </div>\n      </div>\n    </div>\n  </ng-template>\n</div>\n\n<ng-template\n  #dateOptionList\n  let-options\n  let-input=\"dateInput\"\n  let-optionId=\"optionId\"\n  let-className=\"className\"\n>\n  <mat-action-list [ngClass]=\"className\" [id]=\"optionId\">\n    @for (option of options; track option.optionLabel) {\n    <mat-list-item [activated]=\"option.isSelected\" (click)=\"updateSelection(option, input)\">\n      {{ option.optionLabel }}\n    </mat-list-item>\n    }\n  </mat-action-list>\n</ng-template>\n", styles: ["::ng-deep .cdk-overlay-dark-backdrop{background:none}mat-list-item.mat-mdc-list-item{height:40px}mat-list-item.mdc-list-item--activated{background-color:var(--ndp-selected-option-bg, var(--mat-sys-secondary-container, rgba(0, 0, 0, .08)))}::ng-deep .cdk-overlay-pane:has(.custom-ckd-container),::ng-deep .cdk-overlay-pane:has(.ndp-cdk-container){width:100%;background-color:var(--mat-sys-surface-container);max-height:100vh;overflow-y:auto;overflow-x:hidden;max-width:700px;margin-top:-22px;border:1px solid var(--mat-sys-surface-container)}::ng-deep .cdk-overlay-pane:has(.range-input){max-width:250px}.br-top{border-top:1px solid var(--mat-sys-surface-container)}.br-right{border-right:1px solid var(--mat-sys-surface-container)}.disabled{pointer-events:none;opacity:.5}.mat-button,.mdc-button{font-family:var(--mat-list-list-item-label-text-font);line-height:var(--mat-list-list-item-label-text-line-height);font-size:var(--mat-list-list-item-label-text-size);font-weight:var(--mat-list-list-item-label-text-weight);letter-spacing:var(--mat-list-list-item-label-text-tracking)}.w-full{width:100%}.display-hidden{display:none}.custom-calendar-container,.ndp-calendar-container{width:100%}.row-1,.row-2{width:100%;box-sizing:border-box}.row-1{display:flex;align-items:stretch}.row-2{padding:16px}.ndp-column-separator{flex:0 0 1px;background-color:var(--mat-sys-surface-container)}.footer-content,.ndp-footer-content{align-items:center;display:flex;text-align:right;justify-content:end;gap:16px;text-overflow:ellipsis}.footer-content .buttons,.ndp-footer-content .buttons{display:flex;gap:8px}.ndp-date-inputs{display:flex;gap:8px;margin-right:auto;align-items:flex-start}.ndp-date-field{width:150px}.column-1{flex:0 0 25%;overflow:auto}.column-2{flex:1 1 auto;min-width:0}.without-default-opt .column-1{display:none}@media(max-width:400px){.footer-content,.ndp-footer-content{display:block}.footer-content .buttons,.ndp-footer-content .buttons{justify-content:flex-end;margin-top:20px}#range-label-text{margin-right:1.5rem}}@media(max-width:650px){.row-1{flex-direction:column}.column-1{flex-basis:auto}.column-separator{display:none}}.pe-0{padding-right:0}.ps-0{padding-left:0}button.checked{color:var(--mat-sys-primary);border-radius:4px}.ndp-range-label-text{color:var(--mat-sys-on-surface)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  AcpDateRangeInput Component Template\n  @author AcontPlus S.A.S\n  @version 1.0.0\n\n  Comprehensive date range picker with predefined options, custom calendar selection,\n  and support for human-readable date expressions.\n-->\n<div class=\"date-picker-main ndp-main\" cdkOverlayOrigin #trigger>\n  <mat-form-field\n    class=\"w-full\"\n    [class]=\"{ 'display-hidden': isShowStaticDefaultOptions }\"\n    (click)=\"toggleDateOptionSelectionList($event)\"\n  >\n    <mat-label (click)=\"toggleDateOptionSelectionList($event)\">{{ inputLabel }}</mat-label>\n    <input\n      matInput\n      #dateInput\n      class=\"cursor-pointer\"\n      id=\"date-input-field\"\n      (input)=\"onMainInputChange(dateInput)\"\n    />\n    <ng-container matSuffix>\n      @if (showClearButton() && !!dateInput.value) {\n      <button\n        mat-icon-button\n        class=\"cursor-pointer pe-0 ps-0\"\n        matTooltip=\"Clear\"\n        (click)=\"clearSelection($event)\"\n      >\n        <mat-icon>clear</mat-icon>\n      </button>\n      } @if (showCalendarIcon()) {\n      <button mat-icon-button class=\"cursor-pointer\">\n        <mat-icon>date_range</mat-icon>\n      </button>\n      } @if (showRangeRequired()) {\n      <button\n        mat-icon-button\n        class=\"cursor-pointer\"\n        [class.checked]=\"isRangeRequired()\"\n        (click)=\"toggleRangeSelection($event)\"\n        matTooltip=\"Rango de fechas obligatorio\"\n      >\n        <mat-icon [color]=\"isRangeRequired() ? 'accent' : ''\">\n          {{ isRangeRequired() ? 'check_box' : 'check_box_outline_blank' }}\n        </mat-icon>\n      </button>\n      }\n    </ng-container>\n  </mat-form-field>\n\n  @if (dateDropDownOptions.length && isShowStaticDefaultOptions) {\n  <ng-container\n    *ngTemplateOutlet=\"\n        dateOptionList;\n        context: {\n          $implicit: visibleOptions(),\n          dateInput: dateInput,\n          optionId: staticOptionId,\n          className: 'w-full custom-ckd-container ndp-cdk-container range-input',\n        }\n      \"\n  />\n  }\n\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isDateOptionList\"\n    [cdkConnectedOverlayPush]=\"cdkConnectedOverlayPush\"\n    [cdkConnectedOverlayOffsetX]=\"listCdkConnectedOverlayOffsetX\"\n    [cdkConnectedOverlayOffsetY]=\"listCdkConnectedOverlayOffsetY\"\n    (backdropClick)=\"isDateOptionList = false\"\n  >\n    @if (dateDropDownOptions.length && !isShowStaticDefaultOptions) {\n    <ng-container\n      *ngTemplateOutlet=\"\n          dateOptionList;\n          context: {\n            $implicit: visibleOptions(),\n            dateInput: dateInput,\n            optionId: dynamicOptionId,\n            className: 'w-full custom-ckd-container ndp-cdk-container range-input',\n          }\n        \"\n    />\n    }\n  </ng-template>\n\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isCustomRange\"\n    [cdkConnectedOverlayPush]=\"cdkConnectedOverlayPush\"\n    [cdkConnectedOverlayPositions]=\"cdkConnectedOverlayPositions\"\n    [cdkConnectedOverlayOffsetX]=\"cdkConnectedOverlayOffsetX\"\n    [cdkConnectedOverlayOffsetY]=\"cdkConnectedOverlayOffsetY\"\n    (backdropClick)=\"isCustomRange = false\"\n  >\n    <div\n      class=\"custom-ckd-container ndp-cdk-container custom-calendar-container ndp-calendar-container\"\n      [class]=\"{ 'without-default-opt': hideDefaultOptions }\"\n    >\n      <div class=\"row-1\">\n        @if (!hideDefaultOptions) {\n        <div class=\"pt-custom column-1\">\n          <ng-container\n            *ngTemplateOutlet=\"\n                dateOptionList;\n                context: {\n                  $implicit: visibleOptions(),\n                  dateInput: dateInput,\n                }\n              \"\n          />\n        </div>\n        <div class=\"ndp-column-separator\"></div>\n        }\n        <div class=\"mt-2 column-2\">\n          <acp-date-range-calendar\n            [selectedDates]=\"selectedDates\"\n            #calendar\n            [minDate]=\"minDate\"\n            [maxDate]=\"maxDate\"\n            (selectedDatesChange)=\"onCalendarSelectionChange($event)\"\n          />\n        </div>\n      </div>\n      <div class=\"row-2 br-top\">\n        <div class=\"footer-content ndp-footer-content\">\n          @if (enableEditableDates) {\n          <form class=\"ndp-date-inputs\" [formGroup]=\"editableForm\">\n            <mat-form-field class=\"ndp-date-field\" subscriptSizing=\"dynamic\">\n              <mat-label>Start</mat-label>\n              <input\n                matInput\n                formControlName=\"start\"\n                placeholder=\"e.g. now-7d\"\n                (blur)=\"commitEditableDates(calendar)\"\n                (keydown.enter)=\"applyEditableDates(dateInput, calendar)\"\n              />\n              @if (editableForm.controls.start.hasError('required')) {\n              <mat-error>Required</mat-error>\n              } @else if (editableForm.controls.start.hasError('invalidDate')) {\n              <mat-error>Invalid date or expression</mat-error>\n              }\n            </mat-form-field>\n            <mat-form-field class=\"ndp-date-field\" subscriptSizing=\"dynamic\">\n              <mat-label>End</mat-label>\n              <input\n                matInput\n                formControlName=\"end\"\n                placeholder=\"e.g. now\"\n                (blur)=\"commitEditableDates(calendar)\"\n                (keydown.enter)=\"applyEditableDates(dateInput, calendar)\"\n              />\n              @if (editableForm.controls.end.hasError('required')) {\n              <mat-error>Required</mat-error>\n              } @else if (editableForm.controls.end.hasError('invalidDate')) {\n              <mat-error>Invalid date or expression</mat-error>\n              } @else if (editableForm.hasError('rangeOrder')) {\n              <mat-error>Start must be before end</mat-error>\n              }\n            </mat-form-field>\n          </form>\n          } @else {\n          <span id=\"range-label-text\" class=\"ndp-range-label-text\">\n            {{ calendar.selectedDates?.start | date: dateFormat }} @if (calendar.selectedDates?.end)\n            {\n            <span> - {{ calendar.selectedDates?.end | date: dateFormat }} </span>\n            }\n          </span>\n          }\n          <div class=\"buttons\">\n            <acp-button\n              type=\"button\"\n              appearance=\"filled\"\n              color=\"primary\"\n              size=\"small\"\n              [class.disabled]=\"\n                enableEditableDates\n                  ? editableForm.invalid\n                  : !(calendar.selectedDates?.start && calendar.selectedDates?.end)\n              \"\n              (clicked)=\"\n                enableEditableDates && commitEditableDates(calendar);\n                updateCustomRange(dateInput, calendar.selectedDates)\n              \"\n            >\n              &nbsp;Aplicar&nbsp;\n            </acp-button>\n            <acp-button\n              type=\"button\"\n              appearance=\"text\"\n              color=\"error\"\n              size=\"small\"\n              (clicked)=\"isCustomRange = false\"\n              >Cancelar</acp-button\n            >\n          </div>\n        </div>\n      </div>\n    </div>\n  </ng-template>\n</div>\n\n<ng-template\n  #dateOptionList\n  let-options\n  let-input=\"dateInput\"\n  let-optionId=\"optionId\"\n  let-className=\"className\"\n>\n  <mat-action-list [ngClass]=\"className\" [id]=\"optionId\">\n    @for (option of options; track option.optionLabel) {\n    <mat-list-item [activated]=\"option.isSelected\" (click)=\"updateSelection(option, input)\">\n      {{ option.optionLabel }}\n    </mat-list-item>\n    }\n  </mat-action-list>\n</ng-template>\n", styles: ["mat-list-item.mat-mdc-list-item{height:40px}mat-list-item.mdc-list-item--activated{background-color:var(--ndp-selected-option-bg, var(--mat-sys-secondary-container, rgba(0, 0, 0, .08)))}::ng-deep .cdk-overlay-pane:has(.custom-ckd-container),::ng-deep .cdk-overlay-pane:has(.ndp-cdk-container){width:100%;background-color:var(--mat-sys-surface-container);max-height:100vh;overflow-y:auto;overflow-x:hidden;max-width:700px;margin-top:0;border:1px solid var(--mat-sys-surface-container)}::ng-deep .cdk-overlay-pane:has(.range-input){max-width:250px}.br-top{border-top:1px solid var(--mat-sys-surface-container)}.br-right{border-right:1px solid var(--mat-sys-surface-container)}.disabled{pointer-events:none;opacity:.5}.mat-button,.mdc-button{font-family:var(--mat-list-list-item-label-text-font);line-height:var(--mat-list-list-item-label-text-line-height);font-size:var(--mat-list-list-item-label-text-size);font-weight:var(--mat-list-list-item-label-text-weight);letter-spacing:var(--mat-list-list-item-label-text-tracking)}.w-full{width:100%}.display-hidden{display:none}.custom-calendar-container,.ndp-calendar-container{width:100%}.row-1,.row-2{width:100%;box-sizing:border-box}.row-1{display:flex;align-items:stretch}.row-2{padding:16px}.ndp-column-separator{flex:0 0 1px;background-color:var(--mat-sys-surface-container)}.footer-content,.ndp-footer-content{align-items:center;display:flex;text-align:right;justify-content:end;gap:16px;text-overflow:ellipsis}.footer-content .buttons,.ndp-footer-content .buttons{display:flex;gap:8px}.ndp-date-inputs{display:flex;gap:8px;margin-right:auto;align-items:flex-start}.ndp-date-field{width:150px}.column-1{flex:0 0 25%;overflow:auto}.column-2{flex:1 1 auto;min-width:0}.without-default-opt .column-1{display:none}@media(max-width:400px){.footer-content,.ndp-footer-content{display:block}.footer-content .buttons,.ndp-footer-content .buttons{justify-content:flex-end;margin-top:20px}#range-label-text{margin-right:1.5rem}}@media(max-width:650px){.row-1{flex-direction:column}.column-1{flex-basis:auto}.column-separator{display:none}}.pe-0{padding-right:0}.ps-0{padding-left:0}button.checked{color:var(--mat-sys-primary);border-radius:4px}.ndp-range-label-text{color:var(--mat-sys-on-surface)}\n"] }]
         }], propDecorators: { inputLabel: [{
                 type: Input
             }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], showCalendarIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCalendarIcon", required: false }] }], showRangeRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRangeRequired", required: false }] }], isRangeRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRangeRequired", required: false }] }], staticOptionId: [{
@@ -9687,7 +10680,8 @@ class AdvancedDialogService {
     async open(component, config = {}) {
         const dialogConfig = await this.buildDialogConfig(config);
         const dialogRef = this.dialog.open(component, dialogConfig);
-        // Aplicar z-index centralizado
+        this.wireCloseBehavior(dialogRef, config);
+        // Apply centralized z-index
         this.zIndexService.applyZIndex(dialogRef);
         return dialogRef;
     }
@@ -9706,7 +10700,8 @@ class AdvancedDialogService {
         };
         const dialogConfig = await this.buildDialogConfig(configWithWrapperData);
         const dialogRef = this.dialog.open(DialogWrapper, dialogConfig);
-        // Aplicar z-index centralizado
+        this.wireCloseBehavior(dialogRef, matDialogConfig);
+        // Apply centralized z-index
         this.zIndexService.applyZIndex(dialogRef);
         return dialogRef;
     }
@@ -9726,52 +10721,61 @@ class AdvancedDialogService {
     // --- Private Configuration Builder ---
     async buildDialogConfig(config) {
         const dialogConfig = new MatDialogConfig();
+        const basePanelClasses = [];
         // Asynchronously check for mobile state to prevent memory leaks from dangling subscriptions.
         const isMobile = await firstValueFrom(this.isMobile$);
         // Apply fullscreen if 'full' size is set OR if mobile fullscreen is enabled on a mobile device.
         if (config.size === 'full' || (config.isMobileFullScreen && isMobile)) {
             this.applyFullScreenConfig(dialogConfig);
+            basePanelClasses.push('full-screen-dialog');
         }
         else {
             this.applyStandardConfig(dialogConfig, config);
         }
         // Apply all other common configurations.
-        this.applyCommonConfig(dialogConfig, config);
+        this.applyCommonConfig(dialogConfig, config, basePanelClasses);
         return dialogConfig;
     }
     applyFullScreenConfig(dialogConfig) {
         dialogConfig.width = '100vw';
         dialogConfig.height = '100vh';
         dialogConfig.maxWidth = '100vw';
-        dialogConfig.panelClass = ['full-screen-dialog'];
+        dialogConfig.maxHeight = '100vh';
     }
     applyStandardConfig(dialogConfig, config) {
         const width = config.width ?? this.getDialogWidth(config.size);
         dialogConfig.width = width;
         dialogConfig.height = config.height;
         dialogConfig.minWidth = config.minWidth;
+        dialogConfig.minHeight = config.minHeight;
         const maxWidth = config.maxWidth ?? '95vw';
         dialogConfig.maxWidth = maxWidth;
         const maxHeight = config.maxHeight ?? 'auto';
         dialogConfig.maxHeight = maxHeight;
         dialogConfig.position = config.position;
     }
-    applyCommonConfig(dialogConfig, config) {
+    applyCommonConfig(dialogConfig, config, basePanelClasses = []) {
         dialogConfig.data = config.data;
         dialogConfig.hasBackdrop = config.hasBackdrop ?? true;
         dialogConfig.backdropClass = config.backdropClass;
-        const panelClasses = Array.isArray(config.panelClass)
-            ? [...config.panelClass]
-            : config.panelClass
-                ? [config.panelClass]
-                : [];
+        const panelClasses = [...basePanelClasses];
+        if (Array.isArray(config.panelClass)) {
+            panelClasses.push(...config.panelClass);
+        }
+        else if (config.panelClass) {
+            panelClasses.push(config.panelClass);
+        }
         if (config.size) {
             panelClasses.push(`dialog-${config.size}`);
         }
         dialogConfig.panelClass = panelClasses;
-        dialogConfig.disableClose = !(config.backdropClickClosable ?? true);
-        // Note: escapeKeyClosable is handled by MatDialog separately and doesn't affect disableClose directly.
+        // MatDialog's `disableClose` blocks both the backdrop click and the Escape key.
+        // When only one of them should be disabled, `disableClose` is set and the
+        // allowed gesture is re-enabled in `wireCloseBehavior`.
+        dialogConfig.disableClose =
+            !(config.backdropClickClosable ?? true) || !(config.escapeKeyClosable ?? true);
         dialogConfig.autoFocus = config.autoFocus ?? 'first-tabbable';
+        dialogConfig.restoreFocus = config.restoreFocus ?? true;
         dialogConfig.scrollStrategy = config.scrollStrategy ?? this.overlay.scrollStrategies.block();
         dialogConfig.enterAnimationDuration = config.enterAnimationDuration ?? '300ms';
         dialogConfig.exitAnimationDuration = config.exitAnimationDuration ?? '200ms';
@@ -9780,6 +10784,27 @@ class AdvancedDialogService {
         dialogConfig.ariaDescribedBy = config.ariaDescribedBy;
         dialogConfig.role = config.role;
     }
+    /**
+     * Re-enables a single close gesture (backdrop click or Escape) when the other
+     * one is disabled, since MatDialog's `disableClose` blocks both at once.
+     */
+    wireCloseBehavior(dialogRef, config) {
+        const backdropClosable = config.backdropClickClosable ?? true;
+        const escapeClosable = config.escapeKeyClosable ?? true;
+        if (backdropClosable === escapeClosable) {
+            return;
+        }
+        if (escapeClosable) {
+            dialogRef.keydownEvents().subscribe(event => {
+                if (event.key === 'Escape') {
+                    dialogRef.close();
+                }
+            });
+        }
+        else {
+            dialogRef.backdropClick().subscribe(() => dialogRef.close());
+        }
+    }
     getDialogWidth(size = 'md') {
         const sizeMap = {
             xs: '320px',
@@ -11210,5 +12235,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ACP_ACTIVE_DATE_DEBOUNCE, ACP_BADGE_COLORS, ACP_BADGE_SHAPES, ACP_BADGE_SIZES, ACP_BADGE_VARIANTS, ACP_DATE_OPTION_TYPE, ACP_DEFAULT_DATE_OPTIONS, ACP_DRAWER_DATA, ACP_DRAWER_DEFAULT_OPTIONS, ACP_POPOVER_CONTENT, ACP_POPOVER_DEFAULT_OPTIONS, ACP_POPOVER_SCROLL_STRATEGY, AcpAlert, AcpBadge, AcpButton, AcpCard, AcpCheckboxBase, AcpCheckboxGroup, AcpContextMenu, AcpContextMenuDirective, AcpContextMenuPanel, AcpContextMenuService, AcpDateRangeInput, AcpDrawer, AcpDrawerConfig, AcpDrawerContainer, AcpDrawerRef, AcpHeader, AcpHeaderActions, AcpHeaderBranding, AcpHeaderCenter, AcpHeaderEnd, AcpHeaderLanguage, AcpHeaderNotifications, AcpHeaderStart, AcpHeaderTheme, AcpHeaderWorkspace, AcpKpiCard, AcpPopover, AcpPopoverContent, AcpPopoverTarget, AcpPopoverTrigger, AcpSelectDateOption, AcpShellLayout, AcpShellSlotHeader, AcpShellSlotSidebar, AcpShellSlotSidebarFooter, AcpShellSlotToolbar, AcpShellSlotTopmenu, AcpSidebar, AcpSidebarBranding, AcpSidebarContent, AcpSidebarHeader, AcpSidebarToggle, AcpSidebarUserPanel, AcpTopmenu, AcpTopmenuPanel, AdvancedDialogService, Branding, Button, CONTEXT_MENU_DATA, CONTEXT_MENU_ITEMS, DATA_GRID_DEFAULT_OPTIONS, DataGrid, DateRangePicker, DialogWrapper, DialogZIndexService, DynamicCard, DynamicSelect, GetTotalPipe, IconRegistryService, InputChip, KPI_CARD_TOKENS, KPI_CARD_TREND_CONFIGS, KeyboardNavigationService, NavAccordionDirective, NavAccordionItemDirective, NavAccordionToggleDirective, OverlayService, Pagination, SidemenuComponent, Spinner, StatusDisplayPipe, SvgIcon, TREND_CONFIGS, TabulatorTable, ThemeSwitcher, ThemeToggle, ToUpperCase, UserIcon, UserMenu, UserPanel, _AcpPopoverContentBase, formatValue };
+export { ACP_ACTIVE_DATE_DEBOUNCE, ACP_BADGE_COLORS, ACP_BADGE_SHAPES, ACP_BADGE_SIZES, ACP_BADGE_VARIANTS, ACP_DATE_OPTION_TYPE, ACP_DEFAULT_DATE_OPTIONS, ACP_DIALOG_ACTIONS, ACP_DIALOG_DATA, ACP_DIALOG_DEFAULT_OPTIONS, ACP_DIALOG_TITLEBAR, ACP_DRAWER_DATA, ACP_DRAWER_DEFAULT_OPTIONS, ACP_POPOVER_CONTENT, ACP_POPOVER_DEFAULT_OPTIONS, ACP_POPOVER_SCROLL_STRATEGY, AcpAlert, AcpBadge, AcpButton, AcpCard, AcpCheckboxBase, AcpCheckboxGroup, AcpContextMenu, AcpContextMenuDirective, AcpContextMenuPanel, AcpContextMenuService, AcpDateRangeInput, AcpDialog, AcpDialogActions, AcpDialogContainer, AcpDialogContent, AcpDialogRef, AcpDialogService, AcpDialogTitlebar, AcpDrawer, AcpDrawerConfig, AcpDrawerContainer, AcpDrawerRef, AcpHeader, AcpHeaderActions, AcpHeaderBranding, AcpHeaderCenter, AcpHeaderEnd, AcpHeaderLanguage, AcpHeaderNotifications, AcpHeaderStart, AcpHeaderTheme, AcpHeaderWorkspace, AcpKpiCard, AcpPopover, AcpPopoverContent, AcpPopoverTarget, AcpPopoverTrigger, AcpSelectDateOption, AcpShellLayout, AcpShellSlotHeader, AcpShellSlotSidebar, AcpShellSlotSidebarFooter, AcpShellSlotToolbar, AcpShellSlotTopmenu, AcpSidebar, AcpSidebarBranding, AcpSidebarContent, AcpSidebarHeader, AcpSidebarToggle, AcpSidebarUserPanel, AcpTopmenu, AcpTopmenuPanel, AdvancedDialogService, Branding, Button, CONTEXT_MENU_DATA, CONTEXT_MENU_ITEMS, DATA_GRID_DEFAULT_OPTIONS, DataGrid, DateRangePicker, DialogWrapper, DialogZIndexService, DynamicCard, DynamicSelect, GetTotalPipe, IconRegistryService, InputChip, KPI_CARD_TOKENS, KPI_CARD_TREND_CONFIGS, KeyboardNavigationService, NavAccordionDirective, NavAccordionItemDirective, NavAccordionToggleDirective, OverlayService, Pagination, SidemenuComponent, Spinner, StatusDisplayPipe, SvgIcon, TREND_CONFIGS, TabulatorTable, ThemeSwitcher, ThemeToggle, ToUpperCase, UserIcon, UserMenu, UserPanel, _AcpPopoverContentBase, formatValue, provideAcpDialogDefaults };
 //# sourceMappingURL=acontplus-ng-components.mjs.map