@acontplus/ng-components 2.1.11 → 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
|
|
|
@@ -3846,6 +3950,7 @@ class DateRangePicker {
|
|
|
3846
3950
|
[minDate]="minDateForTemplate"
|
|
3847
3951
|
[maxDate]="maxDateForTemplate"
|
|
3848
3952
|
[showCheckbox]="showCheckbox()"
|
|
3953
|
+
[checkboxChecked]="checkboxChecked()"
|
|
3849
3954
|
[checkboxPosition]="checkboxPosition()"
|
|
3850
3955
|
[calendarIcon]="calendarIcon()"
|
|
3851
3956
|
[showCalendarIcon]="showCalendarButton()"
|
|
@@ -3855,7 +3960,7 @@ class DateRangePicker {
|
|
|
3855
3960
|
(closeEvent)="onPickerHide()"
|
|
3856
3961
|
(checkboxChange)="onCheckboxToggle($event)"
|
|
3857
3962
|
></ngx-datex>
|
|
3858
|
-
`, isInline: true, dependencies: [{ kind: "component", type: NgxDatex, selector: "ngx-datex", inputs: ["config", "locale", "theme", "appearance", "floatLabel", "label", "placeholder", "calendarIcon", "showCalendarIcon", "calendarIconPosition", "showCheckbox", "checkboxPosition", "readonly", "disabled", "showHeader", "showFooter", "singleDatePicker", "autoApply", "showDropdowns", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "linkedCalendars", "autoUpdateInput", "alwaysShowCalendars", "showCustomRangeLabel", "startDate", "endDate", "minDate", "maxDate", "maxSpan", "showWeekNumbers", "showISOWeekNumbers", "buttonClasses", "applyButtonClasses", "cancelButtonClasses", "isInvalidDate", "isCustomDate", "minYear", "maxYear", "ranges", "opens", "drops", "headerTemplate", "footerTemplate", "dayTemplate", "ariaLabel", "ariaDescribedBy"], outputs: ["dateChange", "rangeChange", "openEvent", "closeEvent", "monthChange", "yearChange", "dateHover", "validationError", "checkboxChange"] }, { kind: "ngmodule", type: FormsModule }, { 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"] }] });
|
|
3963
|
+
`, isInline: true, dependencies: [{ kind: "component", type: NgxDatex, selector: "ngx-datex", inputs: ["config", "locale", "theme", "appearance", "floatLabel", "label", "placeholder", "calendarIcon", "showCalendarIcon", "calendarIconPosition", "showCheckbox", "checkboxChecked", "checkboxPosition", "readonly", "disabled", "showHeader", "showFooter", "singleDatePicker", "autoApply", "showDropdowns", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "linkedCalendars", "autoUpdateInput", "alwaysShowCalendars", "showCustomRangeLabel", "startDate", "endDate", "minDate", "maxDate", "maxSpan", "showWeekNumbers", "showISOWeekNumbers", "buttonClasses", "applyButtonClasses", "cancelButtonClasses", "isInvalidDate", "isCustomDate", "minYear", "maxYear", "ranges", "opens", "drops", "headerTemplate", "footerTemplate", "dayTemplate", "ariaLabel", "ariaDescribedBy"], outputs: ["dateChange", "rangeChange", "openEvent", "closeEvent", "monthChange", "yearChange", "dateHover", "validationError", "checkboxChange"] }, { kind: "ngmodule", type: FormsModule }, { 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"] }] });
|
|
3859
3964
|
}
|
|
3860
3965
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DateRangePicker, decorators: [{
|
|
3861
3966
|
type: Component,
|
|
@@ -3893,6 +3998,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
3893
3998
|
[minDate]="minDateForTemplate"
|
|
3894
3999
|
[maxDate]="maxDateForTemplate"
|
|
3895
4000
|
[showCheckbox]="showCheckbox()"
|
|
4001
|
+
[checkboxChecked]="checkboxChecked()"
|
|
3896
4002
|
[checkboxPosition]="checkboxPosition()"
|
|
3897
4003
|
[calendarIcon]="calendarIcon()"
|
|
3898
4004
|
[showCalendarIcon]="showCalendarButton()"
|
|
@@ -5622,18 +5728,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
5622
5728
|
|
|
5623
5729
|
class AlertDialog {
|
|
5624
5730
|
inputField;
|
|
5731
|
+
dialogTitle;
|
|
5625
5732
|
container;
|
|
5626
5733
|
componentRef = null;
|
|
5734
|
+
timerInterval;
|
|
5735
|
+
// CDK Drag properties
|
|
5736
|
+
static lastZIndex = 1000;
|
|
5737
|
+
bringToFrontTimeoutId = null;
|
|
5627
5738
|
inputValue = '';
|
|
5628
5739
|
validationError = null;
|
|
5629
5740
|
timerProgress = 100;
|
|
5630
|
-
timerInterval;
|
|
5631
5741
|
sanitizedHtml;
|
|
5632
5742
|
sanitizedFooter = null;
|
|
5633
5743
|
dialogRef = inject((MatDialogRef));
|
|
5634
5744
|
data = inject(MAT_DIALOG_DATA);
|
|
5635
5745
|
sanitizer = inject(DomSanitizer);
|
|
5636
|
-
|
|
5746
|
+
renderer = inject(Renderer2);
|
|
5747
|
+
elementRef = inject(ElementRef);
|
|
5748
|
+
cdr = inject(ChangeDetectorRef);
|
|
5637
5749
|
constructor() {
|
|
5638
5750
|
this.sanitizedHtml = this.sanitizer.bypassSecurityTrustHtml(this.data.html || '');
|
|
5639
5751
|
}
|
|
@@ -5644,18 +5756,31 @@ class AlertDialog {
|
|
|
5644
5756
|
if (this.componentRef) {
|
|
5645
5757
|
this.componentRef.destroy();
|
|
5646
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
|
|
5647
5767
|
}
|
|
5648
5768
|
// Start the timer for auto-closing the dialog
|
|
5649
5769
|
startTimer() {
|
|
5650
5770
|
if (!this.data.timer)
|
|
5651
5771
|
return;
|
|
5772
|
+
console.log('Starting timer with duration:', this.data.timer);
|
|
5652
5773
|
const startTime = Date.now();
|
|
5653
5774
|
const endTime = startTime + this.data.timer;
|
|
5775
|
+
this.timerProgress = 100;
|
|
5654
5776
|
this.timerInterval = setInterval(() => {
|
|
5655
5777
|
const now = Date.now();
|
|
5656
5778
|
const remaining = endTime - now;
|
|
5657
5779
|
if (remaining <= 0) {
|
|
5658
5780
|
clearInterval(this.timerInterval);
|
|
5781
|
+
this.timerProgress = 0;
|
|
5782
|
+
this.cdr.detectChanges();
|
|
5783
|
+
console.log('Timer finished, closing dialog');
|
|
5659
5784
|
this.dialogRef.close({
|
|
5660
5785
|
isConfirmed: false,
|
|
5661
5786
|
isDismissed: true,
|
|
@@ -5664,7 +5789,11 @@ class AlertDialog {
|
|
|
5664
5789
|
});
|
|
5665
5790
|
return;
|
|
5666
5791
|
}
|
|
5667
|
-
|
|
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
|
+
}
|
|
5668
5797
|
}, 50);
|
|
5669
5798
|
}
|
|
5670
5799
|
// Load dynamic component
|
|
@@ -5689,12 +5818,16 @@ class AlertDialog {
|
|
|
5689
5818
|
if (this.data.component) {
|
|
5690
5819
|
this.loadComponent();
|
|
5691
5820
|
}
|
|
5692
|
-
if (this.data.timer) {
|
|
5693
|
-
this.startTimer();
|
|
5694
|
-
}
|
|
5695
5821
|
if (this.data.footerHtml) {
|
|
5696
5822
|
this.sanitizedFooter = this.sanitizer.bypassSecurityTrustHtml(this.data.footerHtml);
|
|
5697
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
|
+
}
|
|
5698
5831
|
}
|
|
5699
5832
|
getIconName() {
|
|
5700
5833
|
if (this.data.icon) {
|
|
@@ -5711,10 +5844,20 @@ class AlertDialog {
|
|
|
5711
5844
|
return 'info';
|
|
5712
5845
|
case 'question':
|
|
5713
5846
|
return 'help';
|
|
5847
|
+
case 'delete':
|
|
5848
|
+
return 'delete_forever';
|
|
5714
5849
|
default:
|
|
5715
5850
|
return '';
|
|
5716
5851
|
}
|
|
5717
5852
|
}
|
|
5853
|
+
onClose() {
|
|
5854
|
+
this.dialogRef.close({
|
|
5855
|
+
isConfirmed: false,
|
|
5856
|
+
isDismissed: true,
|
|
5857
|
+
isDenied: false,
|
|
5858
|
+
dismiss: 'close',
|
|
5859
|
+
});
|
|
5860
|
+
}
|
|
5718
5861
|
getButtonVariant(buttonType) {
|
|
5719
5862
|
const variant = this.data[`${buttonType}ButtonVariant`];
|
|
5720
5863
|
if (variant)
|
|
@@ -5732,6 +5875,8 @@ class AlertDialog {
|
|
|
5732
5875
|
return 'info';
|
|
5733
5876
|
case 'question':
|
|
5734
5877
|
return 'primary';
|
|
5878
|
+
case 'delete':
|
|
5879
|
+
return 'danger';
|
|
5735
5880
|
default:
|
|
5736
5881
|
return 'primary';
|
|
5737
5882
|
}
|
|
@@ -5764,6 +5909,18 @@ class AlertDialog {
|
|
|
5764
5909
|
const style = this.data[`${buttonType}ButtonStyle`];
|
|
5765
5910
|
return style || 'elevated';
|
|
5766
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
|
+
}
|
|
5767
5924
|
async onConfirm() {
|
|
5768
5925
|
if (this.data.input && this.data.inputValidator) {
|
|
5769
5926
|
const error = await Promise.resolve(this.data.inputValidator(this.inputValue));
|
|
@@ -5848,9 +6005,6 @@ class AlertDialog {
|
|
|
5848
6005
|
this.onConfirm();
|
|
5849
6006
|
}
|
|
5850
6007
|
}
|
|
5851
|
-
closeWithResult(result) {
|
|
5852
|
-
this.dialogRef.close(result);
|
|
5853
|
-
}
|
|
5854
6008
|
getConfirmColor() {
|
|
5855
6009
|
if (!this.data.confirmButtonColor)
|
|
5856
6010
|
return 'primary';
|
|
@@ -5899,8 +6053,28 @@ class AlertDialog {
|
|
|
5899
6053
|
}
|
|
5900
6054
|
return this.data.denyButtonColor;
|
|
5901
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
|
+
}
|
|
5902
6076
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AlertDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5903
|
-
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 });
|
|
5904
6078
|
}
|
|
5905
6079
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AlertDialog, decorators: [{
|
|
5906
6080
|
type: Component,
|
|
@@ -5912,12 +6086,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
5912
6086
|
MatInputModule,
|
|
5913
6087
|
MatFormFieldModule,
|
|
5914
6088
|
MatProgressBarModule,
|
|
6089
|
+
DragDropModule,
|
|
5915
6090
|
NgClass,
|
|
5916
6091
|
Button,
|
|
5917
|
-
], 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"] }]
|
|
5918
6093
|
}], ctorParameters: () => [], propDecorators: { inputField: [{
|
|
5919
6094
|
type: ViewChild,
|
|
5920
6095
|
args: ['inputField']
|
|
6096
|
+
}], dialogTitle: [{
|
|
6097
|
+
type: ViewChild,
|
|
6098
|
+
args: ['dialogTitle']
|
|
5921
6099
|
}], container: [{
|
|
5922
6100
|
type: ViewChild,
|
|
5923
6101
|
args: ['dynamicComponentContainer', { read: ViewContainerRef, static: true }]
|