@acontplus/ng-components 2.1.15 → 2.1.17
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.
|
@@ -1818,12 +1818,11 @@ class AlertDialogService {
|
|
|
1818
1818
|
layout: 'modern',
|
|
1819
1819
|
iconPosition: 'left',
|
|
1820
1820
|
contentAlignment: 'left',
|
|
1821
|
+
actionsAlignment: 'end', // Botones a la derecha por defecto
|
|
1821
1822
|
showCloseButton: true,
|
|
1822
1823
|
closeButtonPosition: 'top-right',
|
|
1823
1824
|
animation: 'fade',
|
|
1824
1825
|
animationDuration: 300,
|
|
1825
|
-
toastMode: false,
|
|
1826
|
-
toastPosition: 'top-right',
|
|
1827
1826
|
autoClose: true,
|
|
1828
1827
|
progressBar: true,
|
|
1829
1828
|
};
|
|
@@ -1864,6 +1863,10 @@ class AlertDialogService {
|
|
|
1864
1863
|
allowMultiple: false,
|
|
1865
1864
|
forceToTop: true,
|
|
1866
1865
|
dialogType: 'alert',
|
|
1866
|
+
layout: 'modern',
|
|
1867
|
+
iconPosition: 'left',
|
|
1868
|
+
contentAlignment: 'left',
|
|
1869
|
+
actionsAlignment: 'end',
|
|
1867
1870
|
};
|
|
1868
1871
|
}
|
|
1869
1872
|
/**
|
|
@@ -1876,12 +1879,15 @@ class AlertDialogService {
|
|
|
1876
1879
|
this.closeAll();
|
|
1877
1880
|
}
|
|
1878
1881
|
// Configuración especial para modo toast
|
|
1879
|
-
if (mergedOptions.
|
|
1882
|
+
if (mergedOptions.layout === 'toast') {
|
|
1880
1883
|
mergedOptions.width = mergedOptions.width || '350px';
|
|
1881
1884
|
mergedOptions.showConfirmButton = mergedOptions.showConfirmButton ?? false;
|
|
1882
1885
|
mergedOptions.timer = mergedOptions.timer || 4000;
|
|
1883
1886
|
mergedOptions.timerProgressBar = mergedOptions.progressBar ?? true;
|
|
1884
|
-
|
|
1887
|
+
// Si no se especificó position, usar por defecto para toasts
|
|
1888
|
+
if (!mergedOptions.position) {
|
|
1889
|
+
mergedOptions.position = 'top-end'; // Por defecto top-right para toasts
|
|
1890
|
+
}
|
|
1885
1891
|
mergedOptions.disableClose = false;
|
|
1886
1892
|
mergedOptions.animation = mergedOptions.animation || 'slide';
|
|
1887
1893
|
mergedOptions.dialogType = 'toast'; // Los toasts usan el z-index más alto
|
|
@@ -1891,11 +1897,9 @@ class AlertDialogService {
|
|
|
1891
1897
|
mergedOptions.allowMultiple = true; // Permitir múltiples toasts
|
|
1892
1898
|
}
|
|
1893
1899
|
// Determinar el tipo de diálogo para z-index
|
|
1894
|
-
const dialogType = mergedOptions.dialogType || (mergedOptions.
|
|
1900
|
+
const dialogType = mergedOptions.dialogType || (mergedOptions.layout === 'toast' ? 'toast' : 'alert');
|
|
1895
1901
|
// Calcular posición del diálogo
|
|
1896
|
-
const position = mergedOptions.
|
|
1897
|
-
? this.getToastDialogPosition(mergedOptions.toastPosition || 'top-right')
|
|
1898
|
-
: this.getDialogPosition(mergedOptions.position || 'center');
|
|
1902
|
+
const position = this.getDialogPosition(mergedOptions.position || 'center');
|
|
1899
1903
|
const dialogRef = this.dialog.open(AlertDialog, {
|
|
1900
1904
|
width: mergedOptions.width,
|
|
1901
1905
|
minWidth: mergedOptions.minWidth,
|
|
@@ -1909,7 +1913,7 @@ class AlertDialogService {
|
|
|
1909
1913
|
closeOnNavigation: true,
|
|
1910
1914
|
autoFocus: mergedOptions.focusConfirm !== false,
|
|
1911
1915
|
restoreFocus: true,
|
|
1912
|
-
hasBackdrop:
|
|
1916
|
+
hasBackdrop: mergedOptions.layout !== 'toast', // Los toasts NO tienen backdrop
|
|
1913
1917
|
});
|
|
1914
1918
|
// Aplicar z-index dinámico usando el servicio centralizado
|
|
1915
1919
|
if (mergedOptions.forceToTop) {
|
|
@@ -2058,20 +2062,22 @@ class AlertDialogService {
|
|
|
2058
2062
|
toast(options) {
|
|
2059
2063
|
const opts = typeof options === 'string' ? { message: options } : options;
|
|
2060
2064
|
return this.fire({
|
|
2065
|
+
// Valores por defecto que pueden ser sobrescritos
|
|
2061
2066
|
timer: 3000,
|
|
2062
2067
|
showConfirmButton: false,
|
|
2063
|
-
position: 'bottom-start',
|
|
2068
|
+
position: 'bottom-start', // Valor por defecto
|
|
2064
2069
|
width: '350px',
|
|
2065
|
-
|
|
2070
|
+
layout: 'toast', // Usar layout en lugar de toastMode
|
|
2066
2071
|
dialogType: 'toast',
|
|
2067
|
-
forceToTop: false,
|
|
2068
|
-
allowMultiple: true,
|
|
2069
|
-
disableClose: true,
|
|
2070
|
-
closeOnBackdropClick: false,
|
|
2071
|
-
allowEscapeKey: false,
|
|
2072
|
-
allowEnterKey: false,
|
|
2072
|
+
forceToTop: false,
|
|
2073
|
+
allowMultiple: true,
|
|
2074
|
+
disableClose: true,
|
|
2075
|
+
closeOnBackdropClick: false,
|
|
2076
|
+
allowEscapeKey: false,
|
|
2077
|
+
allowEnterKey: false,
|
|
2073
2078
|
autoClose: true,
|
|
2074
2079
|
progressBar: true,
|
|
2080
|
+
// Los valores del usuario sobrescriben los por defecto
|
|
2075
2081
|
...opts,
|
|
2076
2082
|
});
|
|
2077
2083
|
}
|
|
@@ -2144,7 +2150,7 @@ class AlertDialogService {
|
|
|
2144
2150
|
classes.push(`content-${options.contentAlignment}`);
|
|
2145
2151
|
}
|
|
2146
2152
|
// Agregar clase para modo toast
|
|
2147
|
-
if (options.
|
|
2153
|
+
if (options.layout === 'toast') {
|
|
2148
2154
|
classes.push('toast-mode');
|
|
2149
2155
|
}
|
|
2150
2156
|
// Agregar clase para animación
|
|
@@ -2161,28 +2167,6 @@ class AlertDialogService {
|
|
|
2161
2167
|
}
|
|
2162
2168
|
return classes;
|
|
2163
2169
|
}
|
|
2164
|
-
getToastPosition(position) {
|
|
2165
|
-
const positionMap = {
|
|
2166
|
-
'top-right': 'top-end',
|
|
2167
|
-
'top-left': 'top-start',
|
|
2168
|
-
'bottom-right': 'bottom-end',
|
|
2169
|
-
'bottom-left': 'bottom-start',
|
|
2170
|
-
'top-center': 'top',
|
|
2171
|
-
'bottom-center': 'bottom',
|
|
2172
|
-
};
|
|
2173
|
-
return positionMap[position] || 'top-end';
|
|
2174
|
-
}
|
|
2175
|
-
getToastDialogPosition(position) {
|
|
2176
|
-
const positions = {
|
|
2177
|
-
'top-right': { top: '20px', right: '20px' },
|
|
2178
|
-
'top-left': { top: '20px', left: '20px' },
|
|
2179
|
-
'bottom-right': { bottom: '20px', right: '20px' },
|
|
2180
|
-
'bottom-left': { bottom: '20px', left: '20px' },
|
|
2181
|
-
'top-center': { top: '20px' },
|
|
2182
|
-
'bottom-center': { bottom: '20px' },
|
|
2183
|
-
};
|
|
2184
|
-
return positions[position] || positions['top-right'];
|
|
2185
|
-
}
|
|
2186
2170
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AlertDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2187
2171
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AlertDialogService, providedIn: 'root' });
|
|
2188
2172
|
}
|
|
@@ -6114,6 +6098,11 @@ class AlertDialog {
|
|
|
6114
6098
|
return style || 'elevated';
|
|
6115
6099
|
}
|
|
6116
6100
|
getActionsAlignment() {
|
|
6101
|
+
// Si hay una configuración específica de alineación de acciones, usarla
|
|
6102
|
+
if (this.data.actionsAlignment) {
|
|
6103
|
+
return this.data.actionsAlignment;
|
|
6104
|
+
}
|
|
6105
|
+
// Si no, usar la alineación del contenido como referencia
|
|
6117
6106
|
switch (this.data.contentAlignment) {
|
|
6118
6107
|
case 'left':
|
|
6119
6108
|
return 'start';
|
|
@@ -6122,7 +6111,7 @@ class AlertDialog {
|
|
|
6122
6111
|
case 'right':
|
|
6123
6112
|
return 'end';
|
|
6124
6113
|
default:
|
|
6125
|
-
return 'end'; //
|
|
6114
|
+
return 'end'; // Por defecto a la derecha
|
|
6126
6115
|
}
|
|
6127
6116
|
}
|
|
6128
6117
|
async onConfirm() {
|
|
@@ -6267,7 +6256,7 @@ class AlertDialog {
|
|
|
6267
6256
|
this.zIndexService.bringToFront(this.elementRef.nativeElement);
|
|
6268
6257
|
}
|
|
6269
6258
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AlertDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6270
|
-
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 });
|
|
6259
|
+
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'\"\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.layout === 'toast')) {\n <mat-progress-bar\n mode=\"determinate\"\n [value]=\"timerProgress\"\n class=\"timer-progress\"\n [class.toast-progress]=\"data.layout === 'toast'\"\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.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.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.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.layout !== 'toast' && (data.showConfirmButton !== false || data.showCancelButton ||\n 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;display:flex;justify-content:flex-end}.alert-dialog-actions.reverse-buttons{flex-direction:row-reverse}.alert-dialog-actions.vertical-buttons{flex-direction:column;align-items:stretch}.alert-dialog-actions.vertical-buttons.reverse-buttons{flex-direction:column-reverse}.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 });
|
|
6271
6260
|
}
|
|
6272
6261
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AlertDialog, decorators: [{
|
|
6273
6262
|
type: Component,
|
|
@@ -6282,7 +6271,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
6282
6271
|
DragDropModule,
|
|
6283
6272
|
NgClass,
|
|
6284
6273
|
Button,
|
|
6285
|
-
], 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"] }]
|
|
6274
|
+
], changeDetection: ChangeDetectionStrategy.Default, template: "<div\n class=\"alert-dialog\"\n [class.modern-layout]=\"data.layout === 'modern'\"\n [class.toast-layout]=\"data.layout === 'toast'\"\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.layout === 'toast')) {\n <mat-progress-bar\n mode=\"determinate\"\n [value]=\"timerProgress\"\n class=\"timer-progress\"\n [class.toast-progress]=\"data.layout === 'toast'\"\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.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.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.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.layout !== 'toast' && (data.showConfirmButton !== false || data.showCancelButton ||\n 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;display:flex;justify-content:flex-end}.alert-dialog-actions.reverse-buttons{flex-direction:row-reverse}.alert-dialog-actions.vertical-buttons{flex-direction:column;align-items:stretch}.alert-dialog-actions.vertical-buttons.reverse-buttons{flex-direction:column-reverse}.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"] }]
|
|
6286
6275
|
}], ctorParameters: () => [], propDecorators: { inputField: [{
|
|
6287
6276
|
type: ViewChild,
|
|
6288
6277
|
args: ['inputField']
|