@acontplus/ng-components 2.1.18 → 2.1.20
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.
|
@@ -6256,7 +6256,7 @@ class AlertDialog {
|
|
|
6256
6256
|
this.zIndexService.bringToFront(this.elementRef.nativeElement);
|
|
6257
6257
|
}
|
|
6258
6258
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AlertDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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[align=start]{justify-content:flex-start}.alert-dialog-actions[align=center]{justify-content:center}.alert-dialog-actions[align=end]{justify-content:flex-end}.alert-dialog-actions.reverse-buttons{flex-direction:row-reverse}.alert-dialog-actions.reverse-buttons[align=start]{justify-content:flex-end}.alert-dialog-actions.reverse-buttons[align=center]{justify-content:center}.alert-dialog-actions.reverse-buttons[align=end]{justify-content:flex-start}.alert-dialog-actions.vertical-buttons{flex-direction:column;align-items:stretch}.alert-dialog-actions.vertical-buttons.reverse-buttons{flex-direction:column-reverse}.alert-dialog-actions.vertical-buttons[align=start]{align-items:flex-start;justify-content:flex-start}.alert-dialog-actions.vertical-buttons[align=center]{align-items:center;justify-content:center}.alert-dialog-actions.vertical-buttons[align=end]{align-items:flex-end;justify-content:flex-end}.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}.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 });
|
|
6260
6260
|
}
|
|
6261
6261
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AlertDialog, decorators: [{
|
|
6262
6262
|
type: Component,
|
|
@@ -6271,7 +6271,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
6271
6271
|
DragDropModule,
|
|
6272
6272
|
NgClass,
|
|
6273
6273
|
Button,
|
|
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[align=start]{justify-content:flex-start}.alert-dialog-actions[align=center]{justify-content:center}.alert-dialog-actions[align=end]{justify-content:flex-end}.alert-dialog-actions.reverse-buttons{flex-direction:row-reverse}.alert-dialog-actions.reverse-buttons[align=start]{justify-content:flex-end}.alert-dialog-actions.reverse-buttons[align=center]{justify-content:center}.alert-dialog-actions.reverse-buttons[align=end]{justify-content:flex-start}.alert-dialog-actions.vertical-buttons{flex-direction:column;align-items:stretch}.alert-dialog-actions.vertical-buttons.reverse-buttons{flex-direction:column-reverse}.alert-dialog-actions.vertical-buttons[align=start]{align-items:flex-start;justify-content:flex-start}.alert-dialog-actions.vertical-buttons[align=center]{align-items:center;justify-content:center}.alert-dialog-actions.vertical-buttons[align=end]{align-items:flex-end;justify-content:flex-end}.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}.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"] }]
|
|
6275
6275
|
}], ctorParameters: () => [], propDecorators: { inputField: [{
|
|
6276
6276
|
type: ViewChild,
|
|
6277
6277
|
args: ['inputField']
|