@acontplus/ng-components 2.1.12 → 2.1.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, booleanAttribute, output, ViewEncapsulation, Component, inject, viewChild, ViewContainerRef, ChangeDetectionStrategy, effect, Injectable, computed, PLATFORM_ID, signal, Input, TemplateRef, Pipe, Directive, ViewChild, KeyValueDiffers, ChangeDetectorRef, InjectionToken, ANIMATION_MODULE_TYPE, HostListener, ContentChildren, model, forwardRef, EventEmitter, ApplicationRef, Injector, DOCUMENT, ElementRef, NgZone, ContentChild, Output,
|
|
2
|
+
import { input, booleanAttribute, output, ViewEncapsulation, Component, inject, viewChild, ViewContainerRef, ChangeDetectionStrategy, effect, Injectable, computed, PLATFORM_ID, signal, Input, TemplateRef, Pipe, Directive, ViewChild, KeyValueDiffers, ChangeDetectorRef, InjectionToken, ANIMATION_MODULE_TYPE, HostListener, ContentChildren, model, forwardRef, EventEmitter, ApplicationRef, Injector, DOCUMENT, ElementRef, NgZone, ContentChild, Output, Renderer2, createComponent, EnvironmentInjector } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/material/card';
|
|
4
4
|
import { MatCardModule } from '@angular/material/card';
|
|
5
5
|
import * as i2 from '@angular/material/button';
|
|
6
6
|
import { MatButtonModule, MatButton, MatMiniFabButton, MatIconButton, MatFabButton } from '@angular/material/button';
|
|
7
7
|
import * as i3 from '@angular/material/icon';
|
|
8
8
|
import { MatIconModule, MatIcon } from '@angular/material/icon';
|
|
9
|
-
import
|
|
9
|
+
import * as i7 from '@angular/cdk/drag-drop';
|
|
10
|
+
import { CdkDrag, CdkDragHandle, DragDropModule } from '@angular/cdk/drag-drop';
|
|
10
11
|
import * as i2$1 from '@angular/material/dialog';
|
|
11
12
|
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule, MatDialog, MatDialogConfig } from '@angular/material/dialog';
|
|
12
13
|
import { NgClass, NgTemplateOutlet, isPlatformBrowser, AsyncPipe, DecimalPipe, CurrencyPipe, PercentPipe, DatePipe } from '@angular/common';
|
|
@@ -29,9 +30,9 @@ import * as i1$2 from '@angular/cdk/overlay';
|
|
|
29
30
|
import { Overlay, OverlayModule, OverlayConfig } from '@angular/cdk/overlay';
|
|
30
31
|
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
|
|
31
32
|
import { ComponentPortal, CdkPortalOutlet, TemplatePortal, DomPortalOutlet } from '@angular/cdk/portal';
|
|
32
|
-
import * as
|
|
33
|
+
import * as i5 from '@angular/material/input';
|
|
33
34
|
import { MatInputModule } from '@angular/material/input';
|
|
34
|
-
import * as
|
|
35
|
+
import * as i6 from '@angular/material/progress-bar';
|
|
35
36
|
import { MatProgressBarModule, MatProgressBar } from '@angular/material/progress-bar';
|
|
36
37
|
import * as i2$3 from '@angular/material/tooltip';
|
|
37
38
|
import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
|
|
@@ -1639,7 +1640,20 @@ class AlertDialogService {
|
|
|
1639
1640
|
reverseButtons: false,
|
|
1640
1641
|
focusConfirm: true,
|
|
1641
1642
|
scrollbarPadding: true,
|
|
1642
|
-
position: 'center'
|
|
1643
|
+
position: 'center',
|
|
1644
|
+
draggable: false,
|
|
1645
|
+
// Nuevas opciones por defecto
|
|
1646
|
+
layout: 'modern',
|
|
1647
|
+
iconPosition: 'left',
|
|
1648
|
+
contentAlignment: 'left',
|
|
1649
|
+
showCloseButton: true,
|
|
1650
|
+
closeButtonPosition: 'top-right',
|
|
1651
|
+
animation: 'fade',
|
|
1652
|
+
animationDuration: 300,
|
|
1653
|
+
toastMode: false,
|
|
1654
|
+
toastPosition: 'top-right',
|
|
1655
|
+
autoClose: true,
|
|
1656
|
+
progressBar: true,
|
|
1643
1657
|
};
|
|
1644
1658
|
/**
|
|
1645
1659
|
* Configurar opciones por defecto para todos los diálogos
|
|
@@ -1673,7 +1687,8 @@ class AlertDialogService {
|
|
|
1673
1687
|
reverseButtons: false,
|
|
1674
1688
|
focusConfirm: true,
|
|
1675
1689
|
scrollbarPadding: true,
|
|
1676
|
-
position: 'center'
|
|
1690
|
+
position: 'center',
|
|
1691
|
+
draggable: false,
|
|
1677
1692
|
};
|
|
1678
1693
|
}
|
|
1679
1694
|
/**
|
|
@@ -1681,8 +1696,24 @@ class AlertDialogService {
|
|
|
1681
1696
|
*/
|
|
1682
1697
|
fire(options) {
|
|
1683
1698
|
const mergedOptions = { ...this.defaultOptions, ...options };
|
|
1699
|
+
// Configuración especial para modo toast
|
|
1700
|
+
if (mergedOptions.toastMode) {
|
|
1701
|
+
mergedOptions.width = mergedOptions.width || '350px';
|
|
1702
|
+
mergedOptions.showConfirmButton = mergedOptions.showConfirmButton ?? false;
|
|
1703
|
+
mergedOptions.timer = mergedOptions.timer || 4000;
|
|
1704
|
+
mergedOptions.timerProgressBar = mergedOptions.progressBar ?? true;
|
|
1705
|
+
mergedOptions.position = this.getToastPosition(mergedOptions.toastPosition || 'top-right');
|
|
1706
|
+
mergedOptions.disableClose = false;
|
|
1707
|
+
mergedOptions.animation = mergedOptions.animation || 'slide';
|
|
1708
|
+
}
|
|
1684
1709
|
// Calcular posición del diálogo
|
|
1685
|
-
const position =
|
|
1710
|
+
const position = mergedOptions.toastMode
|
|
1711
|
+
? this.getToastDialogPosition(mergedOptions.toastPosition || 'top-right')
|
|
1712
|
+
: this.getDialogPosition(mergedOptions.position || 'center');
|
|
1713
|
+
// Calcular z-index dinámico basado en diálogos abiertos
|
|
1714
|
+
const openDialogs = this.dialog.openDialogs.length;
|
|
1715
|
+
const baseZIndex = 1000;
|
|
1716
|
+
const zIndex = baseZIndex + openDialogs * 10;
|
|
1686
1717
|
const dialogRef = this.dialog.open(AlertDialog, {
|
|
1687
1718
|
width: mergedOptions.width,
|
|
1688
1719
|
minWidth: mergedOptions.minWidth,
|
|
@@ -1696,8 +1727,22 @@ class AlertDialogService {
|
|
|
1696
1727
|
closeOnNavigation: true,
|
|
1697
1728
|
autoFocus: mergedOptions.focusConfirm !== false,
|
|
1698
1729
|
restoreFocus: true,
|
|
1699
|
-
hasBackdrop:
|
|
1730
|
+
hasBackdrop: !mergedOptions.toastMode,
|
|
1700
1731
|
});
|
|
1732
|
+
// Aplicar z-index dinámico después de abrir
|
|
1733
|
+
setTimeout(() => {
|
|
1734
|
+
const overlayRef = dialogRef._overlayRef;
|
|
1735
|
+
if (overlayRef) {
|
|
1736
|
+
const pane = overlayRef.overlayElement;
|
|
1737
|
+
const backdrop = overlayRef.backdropElement;
|
|
1738
|
+
if (pane) {
|
|
1739
|
+
pane.style.zIndex = (zIndex + 2).toString();
|
|
1740
|
+
}
|
|
1741
|
+
if (backdrop) {
|
|
1742
|
+
backdrop.style.zIndex = (zIndex + 1).toString();
|
|
1743
|
+
}
|
|
1744
|
+
}
|
|
1745
|
+
}, 0);
|
|
1701
1746
|
// Callbacks de ciclo de vida
|
|
1702
1747
|
if (mergedOptions.willOpen) {
|
|
1703
1748
|
mergedOptions.willOpen();
|
|
@@ -1714,7 +1759,7 @@ class AlertDialogService {
|
|
|
1714
1759
|
isConfirmed: true,
|
|
1715
1760
|
isDismissed: false,
|
|
1716
1761
|
isDenied: false,
|
|
1717
|
-
dismiss: 'timer'
|
|
1762
|
+
dismiss: 'timer',
|
|
1718
1763
|
});
|
|
1719
1764
|
}
|
|
1720
1765
|
}, mergedOptions.timer);
|
|
@@ -1800,7 +1845,7 @@ class AlertDialogService {
|
|
|
1800
1845
|
type: 'question',
|
|
1801
1846
|
showCancelButton: true,
|
|
1802
1847
|
confirmText: opts.confirmText || 'Sí',
|
|
1803
|
-
cancelText: opts.cancelText || 'No'
|
|
1848
|
+
cancelText: opts.cancelText || 'No',
|
|
1804
1849
|
});
|
|
1805
1850
|
}
|
|
1806
1851
|
/**
|
|
@@ -1811,23 +1856,37 @@ class AlertDialogService {
|
|
|
1811
1856
|
type: 'question',
|
|
1812
1857
|
showCancelButton: true,
|
|
1813
1858
|
...options,
|
|
1814
|
-
input: options.input || 'text'
|
|
1859
|
+
input: options.input || 'text',
|
|
1860
|
+
});
|
|
1861
|
+
}
|
|
1862
|
+
/**
|
|
1863
|
+
* Diálogo de confirmación para eliminar
|
|
1864
|
+
*/
|
|
1865
|
+
delete(options) {
|
|
1866
|
+
const opts = typeof options === 'string'
|
|
1867
|
+
? { message: options, title: '¿Eliminar elemento?' }
|
|
1868
|
+
: { title: '¿Eliminar elemento?', ...options };
|
|
1869
|
+
return this.fire({
|
|
1870
|
+
...opts,
|
|
1871
|
+
type: 'delete',
|
|
1872
|
+
showCancelButton: true,
|
|
1873
|
+
confirmText: opts.confirmText || 'Eliminar',
|
|
1874
|
+
cancelText: opts.cancelText || 'Cancelar',
|
|
1875
|
+
confirmButtonVariant: 'danger',
|
|
1815
1876
|
});
|
|
1816
1877
|
}
|
|
1817
1878
|
/**
|
|
1818
1879
|
* Toast notification (auto-cierre, posición personalizada)
|
|
1819
1880
|
*/
|
|
1820
1881
|
toast(options) {
|
|
1821
|
-
const opts = typeof options === 'string'
|
|
1822
|
-
? { message: options }
|
|
1823
|
-
: options;
|
|
1882
|
+
const opts = typeof options === 'string' ? { message: options } : options;
|
|
1824
1883
|
return this.fire({
|
|
1825
1884
|
timer: 3000,
|
|
1826
1885
|
timerProgressBar: true,
|
|
1827
1886
|
showConfirmButton: false,
|
|
1828
1887
|
position: 'top-end',
|
|
1829
1888
|
width: '350px',
|
|
1830
|
-
...opts
|
|
1889
|
+
...opts,
|
|
1831
1890
|
});
|
|
1832
1891
|
}
|
|
1833
1892
|
/**
|
|
@@ -1838,15 +1897,15 @@ class AlertDialogService {
|
|
|
1838
1897
|
}
|
|
1839
1898
|
getDialogPosition(position) {
|
|
1840
1899
|
const positions = {
|
|
1841
|
-
|
|
1900
|
+
top: { top: '20px' },
|
|
1842
1901
|
'top-start': { top: '20px', left: '20px' },
|
|
1843
1902
|
'top-end': { top: '20px', right: '20px' },
|
|
1844
|
-
|
|
1903
|
+
center: {},
|
|
1845
1904
|
'center-start': { left: '20px' },
|
|
1846
1905
|
'center-end': { right: '20px' },
|
|
1847
|
-
|
|
1906
|
+
bottom: { bottom: '20px' },
|
|
1848
1907
|
'bottom-start': { bottom: '20px', left: '20px' },
|
|
1849
|
-
'bottom-end': { bottom: '20px', right: '20px' }
|
|
1908
|
+
'bottom-end': { bottom: '20px', right: '20px' },
|
|
1850
1909
|
};
|
|
1851
1910
|
return positions[position] || {};
|
|
1852
1911
|
}
|
|
@@ -1855,6 +1914,29 @@ class AlertDialogService {
|
|
|
1855
1914
|
if (options.customClass) {
|
|
1856
1915
|
classes.push(options.customClass);
|
|
1857
1916
|
}
|
|
1917
|
+
if (options.draggable) {
|
|
1918
|
+
classes.push('draggable-dialog');
|
|
1919
|
+
}
|
|
1920
|
+
// Agregar clases para layout
|
|
1921
|
+
if (options.layout) {
|
|
1922
|
+
classes.push(`layout-${options.layout}`);
|
|
1923
|
+
}
|
|
1924
|
+
// Agregar clases para posición de icono
|
|
1925
|
+
if (options.iconPosition) {
|
|
1926
|
+
classes.push(`icon-${options.iconPosition}`);
|
|
1927
|
+
}
|
|
1928
|
+
// Agregar clases para alineación de contenido
|
|
1929
|
+
if (options.contentAlignment) {
|
|
1930
|
+
classes.push(`content-${options.contentAlignment}`);
|
|
1931
|
+
}
|
|
1932
|
+
// Agregar clase para modo toast
|
|
1933
|
+
if (options.toastMode) {
|
|
1934
|
+
classes.push('toast-mode');
|
|
1935
|
+
}
|
|
1936
|
+
// Agregar clase para animación
|
|
1937
|
+
if (options.animation) {
|
|
1938
|
+
classes.push(`animation-${options.animation}`);
|
|
1939
|
+
}
|
|
1858
1940
|
if (options.panelClass) {
|
|
1859
1941
|
if (Array.isArray(options.panelClass)) {
|
|
1860
1942
|
classes.push(...options.panelClass);
|
|
@@ -1865,13 +1947,35 @@ class AlertDialogService {
|
|
|
1865
1947
|
}
|
|
1866
1948
|
return classes;
|
|
1867
1949
|
}
|
|
1950
|
+
getToastPosition(position) {
|
|
1951
|
+
const positionMap = {
|
|
1952
|
+
'top-right': 'top-end',
|
|
1953
|
+
'top-left': 'top-start',
|
|
1954
|
+
'bottom-right': 'bottom-end',
|
|
1955
|
+
'bottom-left': 'bottom-start',
|
|
1956
|
+
'top-center': 'top',
|
|
1957
|
+
'bottom-center': 'bottom',
|
|
1958
|
+
};
|
|
1959
|
+
return positionMap[position] || 'top-end';
|
|
1960
|
+
}
|
|
1961
|
+
getToastDialogPosition(position) {
|
|
1962
|
+
const positions = {
|
|
1963
|
+
'top-right': { top: '20px', right: '20px' },
|
|
1964
|
+
'top-left': { top: '20px', left: '20px' },
|
|
1965
|
+
'bottom-right': { bottom: '20px', right: '20px' },
|
|
1966
|
+
'bottom-left': { bottom: '20px', left: '20px' },
|
|
1967
|
+
'top-center': { top: '20px' },
|
|
1968
|
+
'bottom-center': { bottom: '20px' },
|
|
1969
|
+
};
|
|
1970
|
+
return positions[position] || positions['top-right'];
|
|
1971
|
+
}
|
|
1868
1972
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AlertDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1869
1973
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AlertDialogService, providedIn: 'root' });
|
|
1870
1974
|
}
|
|
1871
1975
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AlertDialogService, decorators: [{
|
|
1872
1976
|
type: Injectable,
|
|
1873
1977
|
args: [{
|
|
1874
|
-
providedIn: 'root'
|
|
1978
|
+
providedIn: 'root',
|
|
1875
1979
|
}]
|
|
1876
1980
|
}] });
|
|
1877
1981
|
|
|
@@ -5624,18 +5728,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
5624
5728
|
|
|
5625
5729
|
class AlertDialog {
|
|
5626
5730
|
inputField;
|
|
5731
|
+
dialogTitle;
|
|
5627
5732
|
container;
|
|
5628
5733
|
componentRef = null;
|
|
5734
|
+
timerInterval;
|
|
5735
|
+
// CDK Drag properties
|
|
5736
|
+
static lastZIndex = 1000;
|
|
5737
|
+
bringToFrontTimeoutId = null;
|
|
5629
5738
|
inputValue = '';
|
|
5630
5739
|
validationError = null;
|
|
5631
5740
|
timerProgress = 100;
|
|
5632
|
-
timerInterval;
|
|
5633
5741
|
sanitizedHtml;
|
|
5634
5742
|
sanitizedFooter = null;
|
|
5635
5743
|
dialogRef = inject((MatDialogRef));
|
|
5636
5744
|
data = inject(MAT_DIALOG_DATA);
|
|
5637
5745
|
sanitizer = inject(DomSanitizer);
|
|
5638
|
-
|
|
5746
|
+
renderer = inject(Renderer2);
|
|
5747
|
+
elementRef = inject(ElementRef);
|
|
5748
|
+
cdr = inject(ChangeDetectorRef);
|
|
5639
5749
|
constructor() {
|
|
5640
5750
|
this.sanitizedHtml = this.sanitizer.bypassSecurityTrustHtml(this.data.html || '');
|
|
5641
5751
|
}
|
|
@@ -5646,18 +5756,31 @@ class AlertDialog {
|
|
|
5646
5756
|
if (this.componentRef) {
|
|
5647
5757
|
this.componentRef.destroy();
|
|
5648
5758
|
}
|
|
5759
|
+
// Limpiar timeout de CDK Drag
|
|
5760
|
+
if (this.bringToFrontTimeoutId !== null) {
|
|
5761
|
+
cancelAnimationFrame(this.bringToFrontTimeoutId);
|
|
5762
|
+
this.bringToFrontTimeoutId = null;
|
|
5763
|
+
}
|
|
5764
|
+
}
|
|
5765
|
+
ngAfterViewInit() {
|
|
5766
|
+
// CDK Drag se maneja automáticamente a través del template
|
|
5649
5767
|
}
|
|
5650
5768
|
// Start the timer for auto-closing the dialog
|
|
5651
5769
|
startTimer() {
|
|
5652
5770
|
if (!this.data.timer)
|
|
5653
5771
|
return;
|
|
5772
|
+
console.log('Starting timer with duration:', this.data.timer);
|
|
5654
5773
|
const startTime = Date.now();
|
|
5655
5774
|
const endTime = startTime + this.data.timer;
|
|
5775
|
+
this.timerProgress = 100;
|
|
5656
5776
|
this.timerInterval = setInterval(() => {
|
|
5657
5777
|
const now = Date.now();
|
|
5658
5778
|
const remaining = endTime - now;
|
|
5659
5779
|
if (remaining <= 0) {
|
|
5660
5780
|
clearInterval(this.timerInterval);
|
|
5781
|
+
this.timerProgress = 0;
|
|
5782
|
+
this.cdr.detectChanges();
|
|
5783
|
+
console.log('Timer finished, closing dialog');
|
|
5661
5784
|
this.dialogRef.close({
|
|
5662
5785
|
isConfirmed: false,
|
|
5663
5786
|
isDismissed: true,
|
|
@@ -5666,7 +5789,11 @@ class AlertDialog {
|
|
|
5666
5789
|
});
|
|
5667
5790
|
return;
|
|
5668
5791
|
}
|
|
5669
|
-
|
|
5792
|
+
const newProgress = (remaining / this.data.timer) * 100;
|
|
5793
|
+
if (Math.abs(this.timerProgress - newProgress) > 0.5) {
|
|
5794
|
+
this.timerProgress = newProgress;
|
|
5795
|
+
this.cdr.detectChanges();
|
|
5796
|
+
}
|
|
5670
5797
|
}, 50);
|
|
5671
5798
|
}
|
|
5672
5799
|
// Load dynamic component
|
|
@@ -5691,12 +5818,16 @@ class AlertDialog {
|
|
|
5691
5818
|
if (this.data.component) {
|
|
5692
5819
|
this.loadComponent();
|
|
5693
5820
|
}
|
|
5694
|
-
if (this.data.timer) {
|
|
5695
|
-
this.startTimer();
|
|
5696
|
-
}
|
|
5697
5821
|
if (this.data.footerHtml) {
|
|
5698
5822
|
this.sanitizedFooter = this.sanitizer.bypassSecurityTrustHtml(this.data.footerHtml);
|
|
5699
5823
|
}
|
|
5824
|
+
// Inicializar timer después de que el componente esté listo
|
|
5825
|
+
if (this.data.timer) {
|
|
5826
|
+
// Usar setTimeout para asegurar que el componente esté completamente inicializado
|
|
5827
|
+
setTimeout(() => {
|
|
5828
|
+
this.startTimer();
|
|
5829
|
+
}, 100);
|
|
5830
|
+
}
|
|
5700
5831
|
}
|
|
5701
5832
|
getIconName() {
|
|
5702
5833
|
if (this.data.icon) {
|
|
@@ -5713,10 +5844,20 @@ class AlertDialog {
|
|
|
5713
5844
|
return 'info';
|
|
5714
5845
|
case 'question':
|
|
5715
5846
|
return 'help';
|
|
5847
|
+
case 'delete':
|
|
5848
|
+
return 'delete_forever';
|
|
5716
5849
|
default:
|
|
5717
5850
|
return '';
|
|
5718
5851
|
}
|
|
5719
5852
|
}
|
|
5853
|
+
onClose() {
|
|
5854
|
+
this.dialogRef.close({
|
|
5855
|
+
isConfirmed: false,
|
|
5856
|
+
isDismissed: true,
|
|
5857
|
+
isDenied: false,
|
|
5858
|
+
dismiss: 'close',
|
|
5859
|
+
});
|
|
5860
|
+
}
|
|
5720
5861
|
getButtonVariant(buttonType) {
|
|
5721
5862
|
const variant = this.data[`${buttonType}ButtonVariant`];
|
|
5722
5863
|
if (variant)
|
|
@@ -5734,6 +5875,8 @@ class AlertDialog {
|
|
|
5734
5875
|
return 'info';
|
|
5735
5876
|
case 'question':
|
|
5736
5877
|
return 'primary';
|
|
5878
|
+
case 'delete':
|
|
5879
|
+
return 'danger';
|
|
5737
5880
|
default:
|
|
5738
5881
|
return 'primary';
|
|
5739
5882
|
}
|
|
@@ -5766,6 +5909,18 @@ class AlertDialog {
|
|
|
5766
5909
|
const style = this.data[`${buttonType}ButtonStyle`];
|
|
5767
5910
|
return style || 'elevated';
|
|
5768
5911
|
}
|
|
5912
|
+
getActionsAlignment() {
|
|
5913
|
+
switch (this.data.contentAlignment) {
|
|
5914
|
+
case 'left':
|
|
5915
|
+
return 'start';
|
|
5916
|
+
case 'center':
|
|
5917
|
+
return 'center';
|
|
5918
|
+
case 'right':
|
|
5919
|
+
return 'end';
|
|
5920
|
+
default:
|
|
5921
|
+
return 'end'; // Default alignment
|
|
5922
|
+
}
|
|
5923
|
+
}
|
|
5769
5924
|
async onConfirm() {
|
|
5770
5925
|
if (this.data.input && this.data.inputValidator) {
|
|
5771
5926
|
const error = await Promise.resolve(this.data.inputValidator(this.inputValue));
|
|
@@ -5850,9 +6005,6 @@ class AlertDialog {
|
|
|
5850
6005
|
this.onConfirm();
|
|
5851
6006
|
}
|
|
5852
6007
|
}
|
|
5853
|
-
closeWithResult(result) {
|
|
5854
|
-
this.dialogRef.close(result);
|
|
5855
|
-
}
|
|
5856
6008
|
getConfirmColor() {
|
|
5857
6009
|
if (!this.data.confirmButtonColor)
|
|
5858
6010
|
return 'primary';
|
|
@@ -5901,8 +6053,28 @@ class AlertDialog {
|
|
|
5901
6053
|
}
|
|
5902
6054
|
return this.data.denyButtonColor;
|
|
5903
6055
|
}
|
|
6056
|
+
// ===== CDK DRAG FUNCTIONALITY =====
|
|
6057
|
+
/**
|
|
6058
|
+
* Brings the dialog to the front by adjusting its z-index.
|
|
6059
|
+
* Uses requestAnimationFrame to debounce updates and prevent excessive DOM manipulations.
|
|
6060
|
+
* Called when the dialog header is clicked.
|
|
6061
|
+
*/
|
|
6062
|
+
bringToFront() {
|
|
6063
|
+
// Clear any pending update
|
|
6064
|
+
if (this.bringToFrontTimeoutId !== null) {
|
|
6065
|
+
cancelAnimationFrame(this.bringToFrontTimeoutId);
|
|
6066
|
+
}
|
|
6067
|
+
// Schedule the z-index update for the next animation frame
|
|
6068
|
+
this.bringToFrontTimeoutId = requestAnimationFrame(() => {
|
|
6069
|
+
const pane = this.elementRef.nativeElement.closest('.cdk-overlay-pane');
|
|
6070
|
+
if (pane) {
|
|
6071
|
+
pane.style.zIndex = (++AlertDialog.lastZIndex).toString();
|
|
6072
|
+
}
|
|
6073
|
+
this.bringToFrontTimeoutId = null;
|
|
6074
|
+
});
|
|
6075
|
+
}
|
|
5904
6076
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AlertDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5905
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AlertDialog, isStandalone: true, selector: "acp-alert-dialog", viewQueries: [{ propertyName: "inputField", first: true, predicate: ["inputField"], descendants: true }, { propertyName: "container", first: true, predicate: ["dynamicComponentContainer"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n class=\"alert-dialog\"\n [attr.aria-label]=\"data.ariaLabel\"\n [attr.aria-describedby]=\"data.ariaDescribedBy\"\n>\n <!-- Timer Progress Bar -->\n @if (data.timer && data.timerProgressBar) {\n <mat-progress-bar mode=\"determinate\" [value]=\"timerProgress\" class=\"timer-progress\">\n </mat-progress-bar>\n }\n\n <!-- Image -->\n @if (data.imageUrl) {\n <div class=\"alert-dialog-image\">\n <img\n [src]=\"data.imageUrl\"\n [alt]=\"data.imageAlt || 'Alert image'\"\n [style.width]=\"data.imageWidth || 'auto'\"\n [style.height]=\"data.imageHeight || 'auto'\"\n [style.max-width]=\"data.imageWidth || '100%'\"\n />\n </div>\n }\n\n <!-- Icon -->\n @if (data.type || data.icon) {\n <div class=\"alert-dialog-icon\" [ngClass]=\"'icon-' + (data.type || 'custom')\">\n <mat-icon class=\"icon-large\" [style.color]=\"data.iconColor\"> {{ getIconName() }} </mat-icon>\n </div>\n }\n\n <!-- Title -->\n @if (data.title) {\n <h2 mat-dialog-title class=\"alert-dialog-title\">{{ data.title }}</h2>\n }\n\n <!-- Content -->\n <mat-dialog-content class=\"alert-dialog-content\">\n <!-- Dynamic Component -->\n @if (data.component) {\n <div #dynamicComponentContainer></div>\n } @if (data.html) {\n <div [innerHTML]=\"sanitizedHtml\"></div>\n } @else if (data.message) {\n <p class=\"alert-message\">{{ data.message }}</p>\n }\n\n <!-- Input Field -->\n @if (data.input) {\n <mat-form-field appearance=\"outline\" class=\"alert-input-field\">\n @if (data.inputLabel) {\n <mat-label>{{ data.inputLabel }}</mat-label>\n } @if (data.input === 'textarea') {\n <textarea\n matInput\n #inputField\n [(ngModel)]=\"inputValue\"\n [placeholder]=\"data.inputPlaceholder || ''\"\n [type]=\"data.input\"\n rows=\"4\"\n (keyup.enter)=\"onInputEnter()\"\n [attr.aria-invalid]=\"!!validationError\"\n >\n </textarea>\n } @else {\n <input\n matInput\n #inputField\n [(ngModel)]=\"inputValue\"\n [placeholder]=\"data.inputPlaceholder || ''\"\n [type]=\"data.input\"\n (keyup.enter)=\"onInputEnter()\"\n [attr.aria-invalid]=\"!!validationError\"\n />\n } @if (validationError) {\n <mat-error>{{ validationError }}</mat-error>\n }\n </mat-form-field>\n }\n </mat-dialog-content>\n\n <!-- Actions -->\n <mat-dialog-actions\n class=\"alert-dialog-actions\"\n [class.reverse-buttons]=\"data.reverseButtons\"\n [class.vertical-buttons]=\"data.verticalButtons\"\n align=\"center\"\n >\n @if (data.showDenyButton) {\n <acp-button\n type=\"button\"\n [matStyle]=\"getButtonStyle('deny')\"\n [variant]=\"getButtonVariant('deny')\"\n [icon]=\"getButtonIcon('deny')\"\n (handleClick)=\"onDeny()\"\n [text]=\"data.denyText || 'No'\"\n [disabled]=\"data.disableDenyButton?? false\"\n [class.spinning]=\"data.processing && data.processingButton === 'deny'\"\n [class.full-width]=\"data.fullWidthButtons\"\n />\n } @if (data.showCancelButton) {\n <acp-button\n type=\"button\"\n [matStyle]=\"getButtonStyle('cancel')\"\n [variant]=\"getButtonVariant('cancel')\"\n [icon]=\"getButtonIcon('cancel')\"\n (handleClick)=\"onCancel()\"\n [text]=\"data.cancelText || 'Cancel'\"\n [disabled]=\"data.disableCancelButton??false\"\n [class.spinning]=\"data.processing && data.processingButton === 'cancel'\"\n [class.full-width]=\"data.fullWidthButtons\"\n />\n } @if (data.showConfirmButton !== false) {\n <acp-button\n type=\"button\"\n [matStyle]=\"getButtonStyle('confirm')\"\n [variant]=\"getButtonVariant('confirm')\"\n [icon]=\"getButtonIcon('confirm')\"\n (handleClick)=\"onConfirm()\"\n [text]=\"data.confirmText || 'OK'\"\n [disabled]=\"data.disableConfirmButton?? false\"\n [class.spinning]=\"data.processing && data.processingButton === 'confirm'\"\n [class.full-width]=\"data.fullWidthButtons\"\n [autofocus]=\"data.focusConfirm\"\n />\n }\n </mat-dialog-actions>\n\n <!-- Footer -->\n @if (data.footer || data.footerHtml) {\n <div class=\"alert-dialog-footer\">\n @if (data.footerHtml) {\n <div [innerHTML]=\"sanitizedFooter\"></div>\n } @else { {{ data.footer }} }\n </div>\n }\n</div>\n", styles: [".alert-dialog{text-align:center;padding:1rem;position:relative;overflow:hidden}.timer-progress{position:absolute;top:0;left:0;right:0;height:4px}.alert-dialog-image{margin:1rem auto;display:flex;justify-content:center;align-items:center}.alert-dialog-image img{max-width:100%;border-radius:8px}.alert-dialog-icon{margin:1rem auto;display:flex;justify-content:center;align-items:center}.icon-large{font-size:80px;width:80px;height:80px}.icon-success mat-icon{color:#10b981}.icon-error mat-icon{color:#ef4444}.icon-warning mat-icon{color:#f59e0b}.icon-info mat-icon{color:#3b82f6}.icon-question mat-icon{color:#8b5cf6}.alert-dialog-title{font-size:1.5rem;font-weight:600;text-align:center}.alert-dialog-content{color:#666;font-size:1rem;min-height:50px}.alert-input-field{width:100%;margin-top:1rem}.alert-dialog-actions{gap:.75rem;padding:1rem 0 .5rem;display:flex;justify-content:center}.alert-dialog-actions.reverse-buttons{flex-direction:row-reverse}.confirm-button,.cancel-button,.deny-button{min-width:100px}.cancel-button{color:#333}.alert-dialog-footer{margin-top:1rem;padding-top:1rem;border-top:1px solid #e0e0e0;font-size:.875rem;color:#666}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: Button, selector: "acp-button", inputs: ["variant", "text", "icon", "disabled", "type", "matStyle", "customClass", "reportFormat", "extended", "title", "ariaLabel", "name", "id", "form", "tabIndex", "testId"], outputs: ["handleClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6077
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AlertDialog, isStandalone: true, selector: "acp-alert-dialog", viewQueries: [{ propertyName: "inputField", first: true, predicate: ["inputField"], descendants: true }, { propertyName: "dialogTitle", first: true, predicate: ["dialogTitle"], descendants: true }, { propertyName: "container", first: true, predicate: ["dynamicComponentContainer"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n class=\"alert-dialog\"\n [class.modern-layout]=\"data.layout === 'modern'\"\n [class.toast-layout]=\"data.layout === 'toast' || data.toastMode\"\n [class.icon-left]=\"data.iconPosition === 'left'\"\n [class.icon-center]=\"data.iconPosition === 'center'\"\n [class.icon-top]=\"data.iconPosition === 'top'\"\n [class.content-left]=\"data.contentAlignment === 'left'\"\n [class.content-center]=\"data.contentAlignment === 'center'\"\n [class.content-right]=\"data.contentAlignment === 'right'\"\n [attr.aria-label]=\"data.ariaLabel\"\n [attr.aria-describedby]=\"data.ariaDescribedBy\"\n>\n <!-- Timer Progress Bar -->\n @if (data.timer && (data.timerProgressBar || data.progressBar || data.toastMode)) {\n <mat-progress-bar\n mode=\"determinate\"\n [value]=\"timerProgress\"\n class=\"timer-progress\"\n [class.toast-progress]=\"data.toastMode\"\n >\n </mat-progress-bar>\n }\n\n <!-- Alert Header -->\n @if (data.draggable) {\n <div\n class=\"acp-alert-header\"\n cdkDrag\n cdkDragRootElement=\".cdk-overlay-pane\"\n cdkDragHandle\n (mousedown)=\"bringToFront()\"\n >\n <!-- Icon -->\n @if (data.type || data.icon) {\n <div class=\"alert-dialog-icon\" [ngClass]=\"'icon-' + (data.type || 'custom')\">\n <mat-icon class=\"icon-large\" [style.color]=\"data.iconColor\"> {{ getIconName() }} </mat-icon>\n </div>\n }\n\n <!-- Toast Content (solo para modo toast) -->\n @if (data.toastMode || data.layout === 'toast') {\n <!-- Title y Message en l\u00EDnea para toast -->\n <div class=\"toast-content\">\n @if (data.title) {\n <span class=\"toast-title\" #dialogTitle>{{ data.title }}</span>\n } @if (data.message) {\n <span class=\"toast-message\">{{ data.message }}</span>\n }\n </div>\n }\n\n <!-- Close Button -->\n @if (data.showCloseButton) {\n <button\n mat-icon-button\n class=\"close-button\"\n [class.top-right]=\"data.closeButtonPosition === 'top-right'\"\n [class.top-left]=\"data.closeButtonPosition === 'top-left'\"\n (click)=\"onClose()\"\n aria-label=\"Cerrar\"\n >\n <mat-icon>close</mat-icon>\n </button>\n }\n </div>\n } @else {\n <div class=\"acp-alert-header\">\n <!-- Icon -->\n @if (data.type || data.icon) {\n <div class=\"alert-dialog-icon\" [ngClass]=\"'icon-' + (data.type || 'custom')\">\n <mat-icon class=\"icon-large\" [style.color]=\"data.iconColor\"> {{ getIconName() }} </mat-icon>\n </div>\n }\n\n <!-- Toast Content (solo para modo toast) -->\n @if (data.toastMode || data.layout === 'toast') {\n <!-- Title y Message en l\u00EDnea para toast -->\n <div class=\"toast-content\">\n @if (data.title) {\n <span class=\"toast-title\" #dialogTitle>{{ data.title }}</span>\n } @if (data.message) {\n <span class=\"toast-message\">{{ data.message }}</span>\n }\n </div>\n }\n\n <!-- Close Button -->\n @if (data.showCloseButton) {\n <button\n mat-icon-button\n class=\"close-button\"\n [class.top-right]=\"data.closeButtonPosition === 'top-right'\"\n [class.top-left]=\"data.closeButtonPosition === 'top-left'\"\n (click)=\"onClose()\"\n aria-label=\"Cerrar\"\n >\n <mat-icon>close</mat-icon>\n </button>\n }\n </div>\n }\n\n <!-- Content (solo para modo normal, no toast) -->\n @if (!(data.toastMode || data.layout === 'toast')) {\n <mat-dialog-content class=\"alert-dialog-content\">\n <!-- Title -->\n @if (data.title) {\n <h2 class=\"alert-dialog-title\" #dialogTitle>{{ data.title }}</h2>\n }\n <!-- Image -->\n @if (data.imageUrl) {\n <div class=\"alert-dialog-image\">\n <img\n [src]=\"data.imageUrl\"\n [alt]=\"data.imageAlt || 'Alert image'\"\n [style.width]=\"data.imageWidth || 'auto'\"\n [style.height]=\"data.imageHeight || 'auto'\"\n [style.max-width]=\"data.imageWidth || '100%'\"\n />\n </div>\n }\n\n <!-- Dynamic Component -->\n @if (data.component) {\n <div #dynamicComponentContainer></div>\n } @if (data.html) {\n <div [innerHTML]=\"sanitizedHtml\"></div>\n } @else if (data.message) {\n <p class=\"alert-message\">{{ data.message }}</p>\n }\n\n <!-- Input Field -->\n @if (data.input) {\n <mat-form-field appearance=\"outline\" class=\"alert-input-field\">\n @if (data.inputLabel) {\n <mat-label>{{ data.inputLabel }}</mat-label>\n } @if (data.input === 'textarea') {\n <textarea\n matInput\n #inputField\n [(ngModel)]=\"inputValue\"\n [placeholder]=\"data.inputPlaceholder || ''\"\n [type]=\"data.input\"\n rows=\"4\"\n (keyup.enter)=\"onInputEnter()\"\n [attr.aria-invalid]=\"!!validationError\"\n >\n </textarea>\n } @else {\n <input\n matInput\n #inputField\n [(ngModel)]=\"inputValue\"\n [placeholder]=\"data.inputPlaceholder || ''\"\n [type]=\"data.input\"\n (keyup.enter)=\"onInputEnter()\"\n [attr.aria-invalid]=\"!!validationError\"\n />\n } @if (validationError) {\n <mat-error>{{ validationError }}</mat-error>\n }\n </mat-form-field>\n }\n </mat-dialog-content>\n }\n\n <!-- Actions (solo para modo normal, no toast) -->\n @if (!(data.toastMode || data.layout === 'toast') && (data.showConfirmButton !== false ||\n data.showCancelButton || data.showDenyButton)) {\n <mat-dialog-actions\n class=\"alert-dialog-actions\"\n [class.reverse-buttons]=\"data.reverseButtons\"\n [class.vertical-buttons]=\"data.verticalButtons\"\n [align]=\"getActionsAlignment()\"\n >\n @if (data.showDenyButton) {\n <acp-button\n type=\"button\"\n [matStyle]=\"getButtonStyle('deny')\"\n [variant]=\"getButtonVariant('deny')\"\n [icon]=\"getButtonIcon('deny')\"\n (handleClick)=\"onDeny()\"\n [text]=\"data.denyText || 'No'\"\n [disabled]=\"data.disableDenyButton?? false\"\n [class.spinning]=\"data.processing && data.processingButton === 'deny'\"\n [class.full-width]=\"data.fullWidthButtons\"\n />\n } @if (data.showCancelButton) {\n <acp-button\n type=\"button\"\n [matStyle]=\"getButtonStyle('cancel')\"\n [variant]=\"getButtonVariant('cancel')\"\n [icon]=\"getButtonIcon('cancel')\"\n (handleClick)=\"onCancel()\"\n [text]=\"data.cancelText || 'Cancel'\"\n [disabled]=\"data.disableCancelButton??false\"\n [class.spinning]=\"data.processing && data.processingButton === 'cancel'\"\n [class.full-width]=\"data.fullWidthButtons\"\n />\n } @if (data.showConfirmButton !== false) {\n <acp-button\n type=\"button\"\n [matStyle]=\"getButtonStyle('confirm')\"\n [variant]=\"getButtonVariant('confirm')\"\n [icon]=\"getButtonIcon('confirm')\"\n (handleClick)=\"onConfirm()\"\n [text]=\"data.confirmText || 'OK'\"\n [disabled]=\"data.disableConfirmButton?? false\"\n [class.spinning]=\"data.processing && data.processingButton === 'confirm'\"\n [class.full-width]=\"data.fullWidthButtons\"\n [autofocus]=\"data.focusConfirm\"\n />\n }\n </mat-dialog-actions>\n }\n\n <!-- Footer -->\n @if (data.footer || data.footerHtml) {\n <div class=\"alert-dialog-footer\">\n @if (data.footerHtml) {\n <div [innerHTML]=\"sanitizedFooter\"></div>\n } @else { {{ data.footer }} }\n </div>\n }\n</div>\n", styles: [".alert-dialog{position:relative;overflow:hidden;padding:0;display:flex;flex-direction:column;border-radius:16px}.acp-alert-header{display:flex;align-items:flex-start;justify-content:space-between;padding:24px 24px 0;position:relative}.acp-alert-header .alert-dialog-icon{margin:4px 0 0;flex-shrink:0}.alert-dialog-title{margin:0 0 12px;font-size:20px;font-weight:600;line-height:1.2;color:#1a1a1a;text-align:left}.alert-dialog-content{text-align:left}.alert-dialog-content .alert-message{margin:0;font-size:16px;line-height:1.4;color:#666}.alert-dialog-actions{margin:24px;padding:0;gap:12px}.close-button{position:relative;z-index:10;width:40px;height:40px;margin:0;background-color:#0000000d;border-radius:50%}.close-button mat-icon{font-size:20px;width:20px;height:20px;color:#0009}.close-button:hover{background-color:#0000001a}.alert-dialog.modern-layout .acp-alert-header{padding:24px 24px 0}.alert-dialog.modern-layout .acp-alert-header .alert-dialog-icon{margin-right:16px}.alert-dialog.modern-layout .acp-alert-header .alert-dialog-icon .icon-large{font-size:48px;width:48px;height:48px}.alert-dialog.toast-layout{border-radius:8px}.alert-dialog.toast-layout .acp-alert-header{padding:16px;align-items:center;gap:12px}.alert-dialog.toast-layout .acp-alert-header .alert-dialog-icon{margin:0;flex-shrink:0}.alert-dialog.toast-layout .acp-alert-header .alert-dialog-icon .icon-large{font-size:24px;width:24px;height:24px}.alert-dialog.toast-layout .acp-alert-header .toast-content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.alert-dialog.toast-layout .acp-alert-header .toast-content .toast-title{font-size:14px;font-weight:600;line-height:1.2;color:#1a1a1a;margin:0}.alert-dialog.toast-layout .acp-alert-header .toast-content .toast-message{font-size:13px;line-height:1.3;color:#666;margin:0}.alert-dialog.toast-layout .acp-alert-header .close-button{margin:0;flex-shrink:0}.alert-dialog.toast-layout .alert-dialog-content,.alert-dialog.toast-layout .alert-dialog-actions{display:none}.alert-dialog.icon-center .acp-alert-header{flex-direction:column;text-align:center;align-items:center;padding:24px 24px 16px}.alert-dialog.icon-center .acp-alert-header .alert-dialog-icon{margin:0 0 16px}.alert-dialog.icon-center .acp-alert-header .close-button{position:absolute;top:16px;right:16px}.alert-dialog.icon-center .alert-dialog-title,.alert-dialog.icon-center .alert-dialog-content{text-align:center}.alert-dialog.icon-top .acp-alert-header{flex-direction:column;align-items:flex-start;padding:24px 24px 16px}.alert-dialog.icon-top .acp-alert-header .alert-dialog-icon{margin:0 0 16px}.alert-dialog.icon-top .acp-alert-header .close-button{position:absolute;top:16px;right:16px}.alert-dialog.content-left .alert-dialog-title,.alert-dialog.content-left .alert-dialog-content{text-align:left}.alert-dialog.content-center .acp-alert-header{justify-content:center}.alert-dialog.content-center .alert-dialog-title,.alert-dialog.content-center .alert-dialog-content{text-align:center}.alert-dialog.content-right .alert-dialog-title,.alert-dialog.content-right .alert-dialog-content{text-align:right}.timer-progress{position:absolute;top:0;left:0;right:0;height:4px;z-index:5;border-radius:0}.timer-progress.toast-progress{height:3px;border-radius:0}:host ::ng-deep .timer-progress .mdc-linear-progress__bar{transition:transform 50ms linear}:host ::ng-deep .timer-progress .mdc-linear-progress__buffer{background-color:#0000001a}.icon-success mat-icon{color:#10b981}.icon-error mat-icon{color:#ef4444}.icon-warning mat-icon{color:#f59e0b}.icon-info mat-icon{color:#3b82f6}.icon-question mat-icon{color:#8b5cf6}.icon-delete mat-icon{color:#ef4444}.alert-dialog-image{margin:1rem auto;display:flex;justify-content:center;align-items:center}.alert-dialog-image img{max-width:100%;border-radius:8px}.alert-input-field{width:100%;margin-top:1rem}.confirm-button,.cancel-button,.deny-button{min-width:100px}.cancel-button{color:#333}.alert-dialog-footer{margin:0 24px 24px;padding-top:1rem;border-top:1px solid #e0e0e0;font-size:.875rem;color:#666}.acp-alert-header[cdkDrag]{cursor:move;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.acp-alert-header[cdkDrag]:hover{background-color:#00000005}.cdk-drag-dragging{user-select:none!important;-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important}:host ::ng-deep .animation-fade .mat-mdc-dialog-container{animation:fadeIn .3s ease-out}:host ::ng-deep .animation-slide .mat-mdc-dialog-container{animation:slideIn .3s ease-out}:host ::ng-deep .animation-bounce .mat-mdc-dialog-container{animation:bounceIn .5s ease-out}:host ::ng-deep .animation-zoom .mat-mdc-dialog-container{animation:zoomIn .3s ease-out}:host ::ng-deep .toast-mode .mat-mdc-dialog-container{border-radius:8px;box-shadow:0 4px 12px #00000026;max-width:400px;animation:slideInRight .3s ease-out}:host ::ng-deep .layout-toast .mat-mdc-dialog-container{border-radius:8px;box-shadow:0 4px 12px #00000026;max-width:400px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes bounceIn{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.05)}70%{transform:scale(.9)}to{transform:scale(1);opacity:1}}@keyframes zoomIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i7.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: Button, selector: "acp-button", inputs: ["variant", "text", "icon", "disabled", "type", "matStyle", "customClass", "reportFormat", "extended", "title", "ariaLabel", "name", "id", "form", "tabIndex", "testId"], outputs: ["handleClick"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
5906
6078
|
}
|
|
5907
6079
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AlertDialog, decorators: [{
|
|
5908
6080
|
type: Component,
|
|
@@ -5914,12 +6086,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
5914
6086
|
MatInputModule,
|
|
5915
6087
|
MatFormFieldModule,
|
|
5916
6088
|
MatProgressBarModule,
|
|
6089
|
+
DragDropModule,
|
|
5917
6090
|
NgClass,
|
|
5918
6091
|
Button,
|
|
5919
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"alert-dialog\"\n [attr.aria-label]=\"data.ariaLabel\"\n [attr.aria-describedby]=\"data.ariaDescribedBy\"\n>\n <!-- Timer Progress Bar -->\n @if (data.timer && data.timerProgressBar) {\n <mat-progress-bar mode=\"determinate\" [value]=\"timerProgress\" class=\"timer-progress\">\n </mat-progress-bar>\n }\n\n <!-- Image -->\n @if (data.imageUrl) {\n <div class=\"alert-dialog-image\">\n <img\n [src]=\"data.imageUrl\"\n [alt]=\"data.imageAlt || 'Alert image'\"\n [style.width]=\"data.imageWidth || 'auto'\"\n [style.height]=\"data.imageHeight || 'auto'\"\n [style.max-width]=\"data.imageWidth || '100%'\"\n />\n </div>\n }\n\n <!-- Icon -->\n @if (data.type || data.icon) {\n <div class=\"alert-dialog-icon\" [ngClass]=\"'icon-' + (data.type || 'custom')\">\n <mat-icon class=\"icon-large\" [style.color]=\"data.iconColor\"> {{ getIconName() }} </mat-icon>\n </div>\n }\n\n <!-- Title -->\n @if (data.title) {\n <h2 mat-dialog-title class=\"alert-dialog-title\">{{ data.title }}</h2>\n }\n\n <!-- Content -->\n <mat-dialog-content class=\"alert-dialog-content\">\n <!-- Dynamic Component -->\n @if (data.component) {\n <div #dynamicComponentContainer></div>\n } @if (data.html) {\n <div [innerHTML]=\"sanitizedHtml\"></div>\n } @else if (data.message) {\n <p class=\"alert-message\">{{ data.message }}</p>\n }\n\n <!-- Input Field -->\n @if (data.input) {\n <mat-form-field appearance=\"outline\" class=\"alert-input-field\">\n @if (data.inputLabel) {\n <mat-label>{{ data.inputLabel }}</mat-label>\n } @if (data.input === 'textarea') {\n <textarea\n matInput\n #inputField\n [(ngModel)]=\"inputValue\"\n [placeholder]=\"data.inputPlaceholder || ''\"\n [type]=\"data.input\"\n rows=\"4\"\n (keyup.enter)=\"onInputEnter()\"\n [attr.aria-invalid]=\"!!validationError\"\n >\n </textarea>\n } @else {\n <input\n matInput\n #inputField\n [(ngModel)]=\"inputValue\"\n [placeholder]=\"data.inputPlaceholder || ''\"\n [type]=\"data.input\"\n (keyup.enter)=\"onInputEnter()\"\n [attr.aria-invalid]=\"!!validationError\"\n />\n } @if (validationError) {\n <mat-error>{{ validationError }}</mat-error>\n }\n </mat-form-field>\n }\n </mat-dialog-content>\n\n <!-- Actions -->\n <mat-dialog-actions\n class=\"alert-dialog-actions\"\n [class.reverse-buttons]=\"data.reverseButtons\"\n [class.vertical-buttons]=\"data.verticalButtons\"\n align=\"center\"\n >\n @if (data.showDenyButton) {\n <acp-button\n type=\"button\"\n [matStyle]=\"getButtonStyle('deny')\"\n [variant]=\"getButtonVariant('deny')\"\n [icon]=\"getButtonIcon('deny')\"\n (handleClick)=\"onDeny()\"\n [text]=\"data.denyText || 'No'\"\n [disabled]=\"data.disableDenyButton?? false\"\n [class.spinning]=\"data.processing && data.processingButton === 'deny'\"\n [class.full-width]=\"data.fullWidthButtons\"\n />\n } @if (data.showCancelButton) {\n <acp-button\n type=\"button\"\n [matStyle]=\"getButtonStyle('cancel')\"\n [variant]=\"getButtonVariant('cancel')\"\n [icon]=\"getButtonIcon('cancel')\"\n (handleClick)=\"onCancel()\"\n [text]=\"data.cancelText || 'Cancel'\"\n [disabled]=\"data.disableCancelButton??false\"\n [class.spinning]=\"data.processing && data.processingButton === 'cancel'\"\n [class.full-width]=\"data.fullWidthButtons\"\n />\n } @if (data.showConfirmButton !== false) {\n <acp-button\n type=\"button\"\n [matStyle]=\"getButtonStyle('confirm')\"\n [variant]=\"getButtonVariant('confirm')\"\n [icon]=\"getButtonIcon('confirm')\"\n (handleClick)=\"onConfirm()\"\n [text]=\"data.confirmText || 'OK'\"\n [disabled]=\"data.disableConfirmButton?? false\"\n [class.spinning]=\"data.processing && data.processingButton === 'confirm'\"\n [class.full-width]=\"data.fullWidthButtons\"\n [autofocus]=\"data.focusConfirm\"\n />\n }\n </mat-dialog-actions>\n\n <!-- Footer -->\n @if (data.footer || data.footerHtml) {\n <div class=\"alert-dialog-footer\">\n @if (data.footerHtml) {\n <div [innerHTML]=\"sanitizedFooter\"></div>\n } @else { {{ data.footer }} }\n </div>\n }\n</div>\n", styles: [".alert-dialog{text-align:center;padding:1rem;position:relative;overflow:hidden}.timer-progress{position:absolute;top:0;left:0;right:0;height:4px}.alert-dialog-image{margin:1rem auto;display:flex;justify-content:center;align-items:center}.alert-dialog-image img{max-width:100%;border-radius:8px}.alert-dialog-icon{margin:1rem auto;display:flex;justify-content:center;align-items:center}.icon-large{font-size:80px;width:80px;height:80px}.icon-success mat-icon{color:#10b981}.icon-error mat-icon{color:#ef4444}.icon-warning mat-icon{color:#f59e0b}.icon-info mat-icon{color:#3b82f6}.icon-question mat-icon{color:#8b5cf6}.alert-dialog-title{font-size:1.5rem;font-weight:600;text-align:center}.alert-dialog-content{color:#666;font-size:1rem;min-height:50px}.alert-input-field{width:100%;margin-top:1rem}.alert-dialog-actions{gap:.75rem;padding:1rem 0 .5rem;display:flex;justify-content:center}.alert-dialog-actions.reverse-buttons{flex-direction:row-reverse}.confirm-button,.cancel-button,.deny-button{min-width:100px}.cancel-button{color:#333}.alert-dialog-footer{margin-top:1rem;padding-top:1rem;border-top:1px solid #e0e0e0;font-size:.875rem;color:#666}\n"] }]
|
|
6092
|
+
], changeDetection: ChangeDetectionStrategy.Default, template: "<div\n class=\"alert-dialog\"\n [class.modern-layout]=\"data.layout === 'modern'\"\n [class.toast-layout]=\"data.layout === 'toast' || data.toastMode\"\n [class.icon-left]=\"data.iconPosition === 'left'\"\n [class.icon-center]=\"data.iconPosition === 'center'\"\n [class.icon-top]=\"data.iconPosition === 'top'\"\n [class.content-left]=\"data.contentAlignment === 'left'\"\n [class.content-center]=\"data.contentAlignment === 'center'\"\n [class.content-right]=\"data.contentAlignment === 'right'\"\n [attr.aria-label]=\"data.ariaLabel\"\n [attr.aria-describedby]=\"data.ariaDescribedBy\"\n>\n <!-- Timer Progress Bar -->\n @if (data.timer && (data.timerProgressBar || data.progressBar || data.toastMode)) {\n <mat-progress-bar\n mode=\"determinate\"\n [value]=\"timerProgress\"\n class=\"timer-progress\"\n [class.toast-progress]=\"data.toastMode\"\n >\n </mat-progress-bar>\n }\n\n <!-- Alert Header -->\n @if (data.draggable) {\n <div\n class=\"acp-alert-header\"\n cdkDrag\n cdkDragRootElement=\".cdk-overlay-pane\"\n cdkDragHandle\n (mousedown)=\"bringToFront()\"\n >\n <!-- Icon -->\n @if (data.type || data.icon) {\n <div class=\"alert-dialog-icon\" [ngClass]=\"'icon-' + (data.type || 'custom')\">\n <mat-icon class=\"icon-large\" [style.color]=\"data.iconColor\"> {{ getIconName() }} </mat-icon>\n </div>\n }\n\n <!-- Toast Content (solo para modo toast) -->\n @if (data.toastMode || data.layout === 'toast') {\n <!-- Title y Message en l\u00EDnea para toast -->\n <div class=\"toast-content\">\n @if (data.title) {\n <span class=\"toast-title\" #dialogTitle>{{ data.title }}</span>\n } @if (data.message) {\n <span class=\"toast-message\">{{ data.message }}</span>\n }\n </div>\n }\n\n <!-- Close Button -->\n @if (data.showCloseButton) {\n <button\n mat-icon-button\n class=\"close-button\"\n [class.top-right]=\"data.closeButtonPosition === 'top-right'\"\n [class.top-left]=\"data.closeButtonPosition === 'top-left'\"\n (click)=\"onClose()\"\n aria-label=\"Cerrar\"\n >\n <mat-icon>close</mat-icon>\n </button>\n }\n </div>\n } @else {\n <div class=\"acp-alert-header\">\n <!-- Icon -->\n @if (data.type || data.icon) {\n <div class=\"alert-dialog-icon\" [ngClass]=\"'icon-' + (data.type || 'custom')\">\n <mat-icon class=\"icon-large\" [style.color]=\"data.iconColor\"> {{ getIconName() }} </mat-icon>\n </div>\n }\n\n <!-- Toast Content (solo para modo toast) -->\n @if (data.toastMode || data.layout === 'toast') {\n <!-- Title y Message en l\u00EDnea para toast -->\n <div class=\"toast-content\">\n @if (data.title) {\n <span class=\"toast-title\" #dialogTitle>{{ data.title }}</span>\n } @if (data.message) {\n <span class=\"toast-message\">{{ data.message }}</span>\n }\n </div>\n }\n\n <!-- Close Button -->\n @if (data.showCloseButton) {\n <button\n mat-icon-button\n class=\"close-button\"\n [class.top-right]=\"data.closeButtonPosition === 'top-right'\"\n [class.top-left]=\"data.closeButtonPosition === 'top-left'\"\n (click)=\"onClose()\"\n aria-label=\"Cerrar\"\n >\n <mat-icon>close</mat-icon>\n </button>\n }\n </div>\n }\n\n <!-- Content (solo para modo normal, no toast) -->\n @if (!(data.toastMode || data.layout === 'toast')) {\n <mat-dialog-content class=\"alert-dialog-content\">\n <!-- Title -->\n @if (data.title) {\n <h2 class=\"alert-dialog-title\" #dialogTitle>{{ data.title }}</h2>\n }\n <!-- Image -->\n @if (data.imageUrl) {\n <div class=\"alert-dialog-image\">\n <img\n [src]=\"data.imageUrl\"\n [alt]=\"data.imageAlt || 'Alert image'\"\n [style.width]=\"data.imageWidth || 'auto'\"\n [style.height]=\"data.imageHeight || 'auto'\"\n [style.max-width]=\"data.imageWidth || '100%'\"\n />\n </div>\n }\n\n <!-- Dynamic Component -->\n @if (data.component) {\n <div #dynamicComponentContainer></div>\n } @if (data.html) {\n <div [innerHTML]=\"sanitizedHtml\"></div>\n } @else if (data.message) {\n <p class=\"alert-message\">{{ data.message }}</p>\n }\n\n <!-- Input Field -->\n @if (data.input) {\n <mat-form-field appearance=\"outline\" class=\"alert-input-field\">\n @if (data.inputLabel) {\n <mat-label>{{ data.inputLabel }}</mat-label>\n } @if (data.input === 'textarea') {\n <textarea\n matInput\n #inputField\n [(ngModel)]=\"inputValue\"\n [placeholder]=\"data.inputPlaceholder || ''\"\n [type]=\"data.input\"\n rows=\"4\"\n (keyup.enter)=\"onInputEnter()\"\n [attr.aria-invalid]=\"!!validationError\"\n >\n </textarea>\n } @else {\n <input\n matInput\n #inputField\n [(ngModel)]=\"inputValue\"\n [placeholder]=\"data.inputPlaceholder || ''\"\n [type]=\"data.input\"\n (keyup.enter)=\"onInputEnter()\"\n [attr.aria-invalid]=\"!!validationError\"\n />\n } @if (validationError) {\n <mat-error>{{ validationError }}</mat-error>\n }\n </mat-form-field>\n }\n </mat-dialog-content>\n }\n\n <!-- Actions (solo para modo normal, no toast) -->\n @if (!(data.toastMode || data.layout === 'toast') && (data.showConfirmButton !== false ||\n data.showCancelButton || data.showDenyButton)) {\n <mat-dialog-actions\n class=\"alert-dialog-actions\"\n [class.reverse-buttons]=\"data.reverseButtons\"\n [class.vertical-buttons]=\"data.verticalButtons\"\n [align]=\"getActionsAlignment()\"\n >\n @if (data.showDenyButton) {\n <acp-button\n type=\"button\"\n [matStyle]=\"getButtonStyle('deny')\"\n [variant]=\"getButtonVariant('deny')\"\n [icon]=\"getButtonIcon('deny')\"\n (handleClick)=\"onDeny()\"\n [text]=\"data.denyText || 'No'\"\n [disabled]=\"data.disableDenyButton?? false\"\n [class.spinning]=\"data.processing && data.processingButton === 'deny'\"\n [class.full-width]=\"data.fullWidthButtons\"\n />\n } @if (data.showCancelButton) {\n <acp-button\n type=\"button\"\n [matStyle]=\"getButtonStyle('cancel')\"\n [variant]=\"getButtonVariant('cancel')\"\n [icon]=\"getButtonIcon('cancel')\"\n (handleClick)=\"onCancel()\"\n [text]=\"data.cancelText || 'Cancel'\"\n [disabled]=\"data.disableCancelButton??false\"\n [class.spinning]=\"data.processing && data.processingButton === 'cancel'\"\n [class.full-width]=\"data.fullWidthButtons\"\n />\n } @if (data.showConfirmButton !== false) {\n <acp-button\n type=\"button\"\n [matStyle]=\"getButtonStyle('confirm')\"\n [variant]=\"getButtonVariant('confirm')\"\n [icon]=\"getButtonIcon('confirm')\"\n (handleClick)=\"onConfirm()\"\n [text]=\"data.confirmText || 'OK'\"\n [disabled]=\"data.disableConfirmButton?? false\"\n [class.spinning]=\"data.processing && data.processingButton === 'confirm'\"\n [class.full-width]=\"data.fullWidthButtons\"\n [autofocus]=\"data.focusConfirm\"\n />\n }\n </mat-dialog-actions>\n }\n\n <!-- Footer -->\n @if (data.footer || data.footerHtml) {\n <div class=\"alert-dialog-footer\">\n @if (data.footerHtml) {\n <div [innerHTML]=\"sanitizedFooter\"></div>\n } @else { {{ data.footer }} }\n </div>\n }\n</div>\n", styles: [".alert-dialog{position:relative;overflow:hidden;padding:0;display:flex;flex-direction:column;border-radius:16px}.acp-alert-header{display:flex;align-items:flex-start;justify-content:space-between;padding:24px 24px 0;position:relative}.acp-alert-header .alert-dialog-icon{margin:4px 0 0;flex-shrink:0}.alert-dialog-title{margin:0 0 12px;font-size:20px;font-weight:600;line-height:1.2;color:#1a1a1a;text-align:left}.alert-dialog-content{text-align:left}.alert-dialog-content .alert-message{margin:0;font-size:16px;line-height:1.4;color:#666}.alert-dialog-actions{margin:24px;padding:0;gap:12px}.close-button{position:relative;z-index:10;width:40px;height:40px;margin:0;background-color:#0000000d;border-radius:50%}.close-button mat-icon{font-size:20px;width:20px;height:20px;color:#0009}.close-button:hover{background-color:#0000001a}.alert-dialog.modern-layout .acp-alert-header{padding:24px 24px 0}.alert-dialog.modern-layout .acp-alert-header .alert-dialog-icon{margin-right:16px}.alert-dialog.modern-layout .acp-alert-header .alert-dialog-icon .icon-large{font-size:48px;width:48px;height:48px}.alert-dialog.toast-layout{border-radius:8px}.alert-dialog.toast-layout .acp-alert-header{padding:16px;align-items:center;gap:12px}.alert-dialog.toast-layout .acp-alert-header .alert-dialog-icon{margin:0;flex-shrink:0}.alert-dialog.toast-layout .acp-alert-header .alert-dialog-icon .icon-large{font-size:24px;width:24px;height:24px}.alert-dialog.toast-layout .acp-alert-header .toast-content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.alert-dialog.toast-layout .acp-alert-header .toast-content .toast-title{font-size:14px;font-weight:600;line-height:1.2;color:#1a1a1a;margin:0}.alert-dialog.toast-layout .acp-alert-header .toast-content .toast-message{font-size:13px;line-height:1.3;color:#666;margin:0}.alert-dialog.toast-layout .acp-alert-header .close-button{margin:0;flex-shrink:0}.alert-dialog.toast-layout .alert-dialog-content,.alert-dialog.toast-layout .alert-dialog-actions{display:none}.alert-dialog.icon-center .acp-alert-header{flex-direction:column;text-align:center;align-items:center;padding:24px 24px 16px}.alert-dialog.icon-center .acp-alert-header .alert-dialog-icon{margin:0 0 16px}.alert-dialog.icon-center .acp-alert-header .close-button{position:absolute;top:16px;right:16px}.alert-dialog.icon-center .alert-dialog-title,.alert-dialog.icon-center .alert-dialog-content{text-align:center}.alert-dialog.icon-top .acp-alert-header{flex-direction:column;align-items:flex-start;padding:24px 24px 16px}.alert-dialog.icon-top .acp-alert-header .alert-dialog-icon{margin:0 0 16px}.alert-dialog.icon-top .acp-alert-header .close-button{position:absolute;top:16px;right:16px}.alert-dialog.content-left .alert-dialog-title,.alert-dialog.content-left .alert-dialog-content{text-align:left}.alert-dialog.content-center .acp-alert-header{justify-content:center}.alert-dialog.content-center .alert-dialog-title,.alert-dialog.content-center .alert-dialog-content{text-align:center}.alert-dialog.content-right .alert-dialog-title,.alert-dialog.content-right .alert-dialog-content{text-align:right}.timer-progress{position:absolute;top:0;left:0;right:0;height:4px;z-index:5;border-radius:0}.timer-progress.toast-progress{height:3px;border-radius:0}:host ::ng-deep .timer-progress .mdc-linear-progress__bar{transition:transform 50ms linear}:host ::ng-deep .timer-progress .mdc-linear-progress__buffer{background-color:#0000001a}.icon-success mat-icon{color:#10b981}.icon-error mat-icon{color:#ef4444}.icon-warning mat-icon{color:#f59e0b}.icon-info mat-icon{color:#3b82f6}.icon-question mat-icon{color:#8b5cf6}.icon-delete mat-icon{color:#ef4444}.alert-dialog-image{margin:1rem auto;display:flex;justify-content:center;align-items:center}.alert-dialog-image img{max-width:100%;border-radius:8px}.alert-input-field{width:100%;margin-top:1rem}.confirm-button,.cancel-button,.deny-button{min-width:100px}.cancel-button{color:#333}.alert-dialog-footer{margin:0 24px 24px;padding-top:1rem;border-top:1px solid #e0e0e0;font-size:.875rem;color:#666}.acp-alert-header[cdkDrag]{cursor:move;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.acp-alert-header[cdkDrag]:hover{background-color:#00000005}.cdk-drag-dragging{user-select:none!important;-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important}:host ::ng-deep .animation-fade .mat-mdc-dialog-container{animation:fadeIn .3s ease-out}:host ::ng-deep .animation-slide .mat-mdc-dialog-container{animation:slideIn .3s ease-out}:host ::ng-deep .animation-bounce .mat-mdc-dialog-container{animation:bounceIn .5s ease-out}:host ::ng-deep .animation-zoom .mat-mdc-dialog-container{animation:zoomIn .3s ease-out}:host ::ng-deep .toast-mode .mat-mdc-dialog-container{border-radius:8px;box-shadow:0 4px 12px #00000026;max-width:400px;animation:slideInRight .3s ease-out}:host ::ng-deep .layout-toast .mat-mdc-dialog-container{border-radius:8px;box-shadow:0 4px 12px #00000026;max-width:400px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes bounceIn{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.05)}70%{transform:scale(.9)}to{transform:scale(1);opacity:1}}@keyframes zoomIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}\n"] }]
|
|
5920
6093
|
}], ctorParameters: () => [], propDecorators: { inputField: [{
|
|
5921
6094
|
type: ViewChild,
|
|
5922
6095
|
args: ['inputField']
|
|
6096
|
+
}], dialogTitle: [{
|
|
6097
|
+
type: ViewChild,
|
|
6098
|
+
args: ['dialogTitle']
|
|
5923
6099
|
}], container: [{
|
|
5924
6100
|
type: ViewChild,
|
|
5925
6101
|
args: ['dynamicComponentContainer', { read: ViewContainerRef, static: true }]
|