commons-shared-web-ui 0.0.35 → 0.0.36

package/fesm2022/commons-shared-web-ui.mjs

@@ -2929,7 +2929,11 @@ class SmartFormComponent {
     }
     scrollToFirstInvalidControl() {
         setTimeout(() => {
-            const firstInvalidControl = document.querySelector('.is-invalid, .ng-invalid.ng-touched');
+            // .is-invalid is set by form-field on actual control elements (not on <form>).
+            // The fallback targets native inputs/selects directly so we never accidentally
+            // scroll to the <form> element, which also receives .ng-invalid.ng-touched.
+            const firstInvalidControl = document.querySelector('.is-invalid') ||
+                document.querySelector('input.ng-invalid.ng-touched, select.ng-invalid.ng-touched, textarea.ng-invalid.ng-touched');
             if (firstInvalidControl) {
                 firstInvalidControl.scrollIntoView({ behavior: 'smooth', block: 'center' });
             }
@@ -7618,6 +7622,7 @@ class ConfirmationModalComponent {
     mergedConfig;
     previousActiveElement = null;
     isSubmitting = false;
+    _resetSubmittingTimer;
     ngOnInit() {
         this.updateConfig();
         // Store currently focused element
@@ -7662,6 +7667,7 @@ class ConfirmationModalComponent {
         }
     }
     ngOnDestroy() {
+        clearTimeout(this._resetSubmittingTimer);
         // Restore body scroll
         this.toggleBodyScroll(false);
         // Restore focus to previous element
@@ -7696,6 +7702,15 @@ class ConfirmationModalComponent {
         if (!isDisabled && !isLoading && !this.isSubmitting) {
             this.isSubmitting = true;
             this.confirm.emit();
+            // If the parent doesn't start loading within 300 ms (e.g. because client-side
+            // validation failed and no API call was made), reset the guard so the user
+            // can correct the form and try again.
+            clearTimeout(this._resetSubmittingTimer);
+            this._resetSubmittingTimer = setTimeout(() => {
+                if (!this.confirmLoading && !this.mergedConfig?.confirmButton?.loading) {
+                    this.isSubmitting = false;
+                }
+            }, 300);
         }
     }
     onCancel() {
@@ -7800,11 +7815,11 @@ class ConfirmationModalComponent {
         return typeof icon === 'object' ? icon.color : undefined;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfirmationModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: ConfirmationModalComponent, isStandalone: false, selector: "cc-confirmation-modal", inputs: { config: "config", isOpen: "isOpen", confirmDisabled: "confirmDisabled", confirmLoading: "confirmLoading" }, outputs: { confirm: "confirm", cancel: "cancel", close: "close", showCodeSnippet: "showCodeSnippet" }, host: { listeners: { "document:keydown.escape": "handleEscape($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"isOpen\" class=\"cc-modal-backdrop\" \r\n    [ngClass]=\"{'cc-modal-backdrop--side-panel': mergedConfig.type === 'side-panel'}\"\r\n    (click)=\"onBackdropClick($event)\" role=\"dialog\" [attr.aria-modal]=\"true\"\r\n    [attr.aria-labelledby]=\"'modal-title-' + mergedConfig.title\" [attr.aria-label]=\"mergedConfig.ariaLabel\"\r\n    [attr.aria-describedby]=\"mergedConfig.ariaDescribedBy\">\r\n\r\n    <div class=\"cc-modal-container {{ mergedConfig.customClass }}\" \r\n        [ngClass]=\"{'side-panel': mergedConfig.type === 'side-panel'}\"\r\n        [ngStyle]=\"getModalStyles()\" (click)=\"$event.stopPropagation()\">\r\n\r\n        <!-- Header -->\r\n        <div [ngClass]=\"getHeaderClass()\" [style.background-color]=\"mergedConfig.headerBackgroundColor\"\r\n            [style.border-bottom]=\"mergedConfig.headerBorderBottom\">\r\n            <div class=\"modal-header__content\">\r\n                <!-- Icon (Optional) -->\r\n                <span *ngIf=\"mergedConfig.icon\" class=\"modal-header__icon\">\r\n                    <ng-container [ngSwitch]=\"resolveIconType(mergedConfig.icon)\">\r\n                        <mat-icon *ngSwitchCase=\"'material'\" [style.color]=\"getIconColor(mergedConfig.icon)\">\r\n                            {{ getIconValue(mergedConfig.icon) }}\r\n                        </mat-icon>\r\n                        <img *ngSwitchCase=\"'custom'\" [src]=\"getIconValue(mergedConfig.icon)\"\r\n                            [attr.alt]=\"mergedConfig.labels?.iconAltText || mergedConfig.title + ' icon'\"\r\n                            class=\"modal-header__custom-icon\">\r\n                        <img *ngSwitchCase=\"'img'\" [src]=\"getIconValue(mergedConfig.icon)\"\r\n                            [attr.alt]=\"mergedConfig.labels?.iconAltText || mergedConfig.title + ' icon'\"\r\n                            class=\"modal-header__custom-icon\">\r\n                    </ng-container>\r\n                </span>\r\n\r\n                <!-- Title -->\r\n                <h2 class=\"modal-header__title\" [id]=\"'modal-title-' + mergedConfig.title\"\r\n                    [style.color]=\"mergedConfig.headerTextColor\">\r\n                    {{ mergedConfig.title }}\r\n                </h2>\r\n            </div>\r\n\r\n            <!-- Code Snippet Button -->\r\n            <button *ngIf=\"mergedConfig.showCodeSnippetButton\" type=\"button\" class=\"modal-header__code-btn\"\r\n                (click)=\"onShowCodeSnippet()\" [attr.aria-label]=\"mergedConfig.labels?.codeSnippetAriaLabel\"\r\n                [attr.title]=\"mergedConfig.labels?.codeSnippetTitle\">\r\n                <mat-icon>code</mat-icon>\r\n            </button>\r\n\r\n            <!-- Close Button -->\r\n            <button *ngIf=\"mergedConfig.showCloseButton\" type=\"button\" class=\"modal-header__close\" (click)=\"onClose()\"\r\n                [attr.aria-label]=\"mergedConfig.labels?.closeAriaLabel\">\r\n                <mat-icon>close</mat-icon>\r\n            </button>\r\n        </div>\r\n\r\n        <!-- Body (Content Projection) -->\r\n        <div class=\"cc-modal-body\" [ngClass]=\"{'cc-modal-body--form-mode': mergedConfig.formMode}\" [style.padding]=\"mergedConfig.padding\" [style.color]=\"mergedConfig.bodyTextColor\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n\r\n        <!-- Footer -->\r\n        <div class=\"cc-modal-footer\" [style.background-color]=\"mergedConfig.footerBackgroundColor\"\r\n            [style.border-top]=\"mergedConfig.footerBorderTop\">\r\n\r\n            <ng-container *ngIf=\"!mergedConfig.customFooter\">\r\n                <button *ngIf=\"mergedConfig.cancelButton?.show\" type=\"button\" class=\"cc-btn cc-btn-secondary\"\r\n                    (click)=\"onCancel()\">\r\n                    {{ mergedConfig.cancelButton?.label }}\r\n                </button>\r\n\r\n                <button type=\"button\" [ngClass]=\"getConfirmButtonClass()\"\r\n                    [disabled]=\"confirmDisabled || mergedConfig.confirmButton.disabled || confirmLoading || mergedConfig.confirmButton.loading\"\r\n                    (click)=\"onConfirm()\">\r\n                    <span *ngIf=\"confirmLoading || mergedConfig.confirmButton.loading\" class=\"cc-btn-spinner\"></span>\r\n                    {{ mergedConfig.confirmButton.label }}\r\n                </button>\r\n            </ng-container>\r\n\r\n            <ng-content select=\"[cc-modal-footer]\"></ng-content>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".cc-modal-backdrop{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease-in-out}.cc-modal-backdrop--side-panel{align-items:stretch;justify-content:flex-end}.cc-modal-container{background:var(--cc-modal-bg);border-radius:var(--cc-modal-radius);box-shadow:var(--cc-modal-shadow);border:var(--cc-modal-border, none);display:flex;flex-direction:column;max-height:90vh;max-width:90vw;animation:slideIn .3s ease-out;overflow:hidden}.cc-modal-container.side-panel{max-height:100vh;animation:slideInRight .3s ease-out;z-index:1001}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--cc-modal-header-padding);border-bottom:var(--cc-modal-header-border-bottom)}.modal-header__content{display:flex;align-items:center;gap:.75rem;flex:1}.modal-header__icon{display:flex;align-items:center;justify-content:center}.modal-header__icon mat-icon{font-size:var(--cc-modal-icon-size, 1.5rem);width:var(--cc-modal-icon-size, 1.5rem);height:var(--cc-modal-icon-size, 1.5rem)}.modal-header__custom-icon{width:var(--cc-modal-icon-size, 1.5rem);height:var(--cc-modal-icon-size, 1.5rem);object-fit:contain}.modal-header__title{margin:0;font-size:var(--cc-modal-title-size);font-weight:var(--cc-modal-title-weight);line-height:1.4;color:var(--cc-modal-title-color)}.modal-header__close{background:none;border:none;padding:.25rem;cursor:pointer;color:#6b7280;transition:color .2s;display:flex;align-items:center}.modal-header__close:hover{color:#111827}.modal-header__close mat-icon{font-size:var(--cc-modal-close-icon-size, 1.25rem);width:var(--cc-modal-close-icon-size, 1.25rem);height:var(--cc-modal-close-icon-size, 1.25rem)}.modal-header__code-btn{background:none;border:none;padding:.25rem;margin-right:.5rem;cursor:pointer;color:#6b7280;transition:all .2s;display:flex;align-items:center}.modal-header__code-btn:hover{color:#ef4444;transform:scale(1.1)}.modal-header__code-btn mat-icon{font-size:1.15rem;width:1.15rem;height:1.15rem}.modal-header--dark{background-color:var(--cc-modal-header-bg-dark, #262125);border-bottom:none}.modal-header--dark .modal-header__title{color:var(--cc-modal-header-title-color-dark, #FFFFFF)}.modal-header--dark .modal-header__close{color:var(--cc-modal-header-close-color-dark, rgba(255, 255, 255, .7))}.modal-header--dark .modal-header__close:hover{color:#fff}.modal-header--dark .modal-header__code-btn{color:var(--cc-modal-header-code-btn-color-dark, rgba(255, 255, 255, .7))}.modal-header--dark .modal-header__code-btn:hover{color:#fff}.cc-modal-body{padding:var(--cc-modal-body-padding);overflow-y:auto;flex:1;color:var(--cc-modal-body-color);font-size:.875rem;line-height:1.6}.cc-modal-body ::ng-deep input[type=text],.cc-modal-body ::ng-deep textarea,.cc-modal-body ::ng-deep select{width:100%;padding:var(--cc-modal-input-padding, .625rem .75rem);border:.0625rem solid #D1D5DB;border-radius:var(--cc-modal-input-radius, .375rem);font-size:var(--cc-modal-input-font-size, .875rem);transition:border-color .2s}.cc-modal-body ::ng-deep input[type=text]:focus,.cc-modal-body ::ng-deep textarea:focus,.cc-modal-body ::ng-deep select:focus{outline:none;border-color:var(--cc-btn-primary-bg, #3b82f6);box-shadow:0 0 0 .1875rem #3b82f61a}.cc-modal-body ::ng-deep textarea{resize:vertical;min-height:var(--cc-modal-textarea-min-height, 6.25rem)}.cc-modal-body ::ng-deep label{display:block;margin-bottom:var(--cc-modal-label-margin-bottom, .5rem);font-weight:500;color:var(--cc-modal-body-color)}.cc-modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:.75rem;padding:var(--cc-modal-footer-padding);border-top:var(--cc-modal-footer-border-top);background:var(--cc-modal-footer-bg)}.cc-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:var(--cc-btn-padding, .5rem 1rem);font-family:var(--cc-btn-font-family, inherit);font-weight:var(--cc-btn-font-weight, 500);font-size:var(--cc-btn-font-size, .875rem);cursor:pointer;transition:all .2s;min-width:5rem}.cc-btn:disabled{opacity:var(--cc-btn-disabled-opacity, .6);cursor:var(--cc-btn-disabled-cursor, not-allowed)}.cc-btn-secondary{background:var(--cc-btn-secondary-bg);color:var(--cc-btn-secondary-color);border:var(--cc-btn-secondary-border);border-radius:var(--cc-btn-secondary-radius)}.cc-btn-primary{background:var(--cc-btn-primary-bg);color:var(--cc-btn-primary-color);border:var(--cc-btn-primary-border);border-radius:var(--cc-btn-primary-radius)}.cc-btn-danger{background:var(--cc-btn-danger-bg);color:var(--cc-btn-danger-color);border:var(--cc-btn-danger-border);border-radius:var(--cc-btn-danger-radius)}.cc-btn-warning{background:var(--cc-btn-warning-bg);color:var(--cc-btn-warning-color);border:var(--cc-btn-warning-border);border-radius:var(--cc-btn-warning-radius)}.cc-btn-spinner{width:var(--cc-modal-spinner-size, 1rem);height:var(--cc-modal-spinner-size, 1rem);border:.125rem solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translateY(-1.25rem);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:40rem){.cc-modal-container{width:95vw!important;max-height:95vh}.modal-header,.cc-modal-body{padding:1rem}.cc-modal-footer{padding:.75rem 1rem;flex-direction:column}.cc-modal-footer .cc-btn{width:100%}}.cc-modal-body--form-mode{padding:0;min-height:360px}.cc-modal-body--form-mode ::ng-deep .smart-form-wrapper,.cc-modal-body--form-mode ::ng-deep .smart-form-skeleton{box-shadow:none!important;border:none!important;padding:0!important;border-radius:0!important}.cc-modal-body--form-mode ::ng-deep .smart-form-wrapper{animation:none!important}.cc-modal-body--form-mode ::ng-deep .smart-form-skeleton{display:flex!important;align-items:center!important;justify-content:center!important;min-height:360px!important;gap:0!important}.cc-modal-body--form-mode ::ng-deep .smart-form-skeleton>*{display:none!important}.cc-modal-body--form-mode ::ng-deep .smart-form-skeleton:after{content:\"\";display:block;width:28px;height:28px;border:3px solid #E5E7EB;border-top-color:#6366f1;border-radius:50%;animation:cc-modal-skeleton-spin .7s linear infinite}.cc-modal-body--form-mode ::ng-deep .form-section-container{box-shadow:none!important;border:none!important}@keyframes cc-modal-skeleton-spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: ConfirmationModalComponent, isStandalone: false, selector: "cc-confirmation-modal", inputs: { config: "config", isOpen: "isOpen", confirmDisabled: "confirmDisabled", confirmLoading: "confirmLoading" }, outputs: { confirm: "confirm", cancel: "cancel", close: "close", showCodeSnippet: "showCodeSnippet" }, host: { listeners: { "document:keydown.escape": "handleEscape($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"isOpen\" class=\"cc-modal-backdrop\" \r\n    [ngClass]=\"{'cc-modal-backdrop--side-panel': mergedConfig.type === 'side-panel'}\"\r\n    (click)=\"onBackdropClick($event)\" role=\"dialog\" [attr.aria-modal]=\"true\"\r\n    [attr.aria-labelledby]=\"'modal-title-' + mergedConfig.title\" [attr.aria-label]=\"mergedConfig.ariaLabel\"\r\n    [attr.aria-describedby]=\"mergedConfig.ariaDescribedBy\">\r\n\r\n    <div class=\"cc-modal-container {{ mergedConfig.customClass }}\" \r\n        [ngClass]=\"{'side-panel': mergedConfig.type === 'side-panel'}\"\r\n        [ngStyle]=\"getModalStyles()\" (click)=\"$event.stopPropagation()\">\r\n\r\n        <!-- Header -->\r\n        <div [ngClass]=\"getHeaderClass()\" [style.background-color]=\"mergedConfig.headerBackgroundColor\"\r\n            [style.border-bottom]=\"mergedConfig.headerBorderBottom\">\r\n            <div class=\"modal-header__content\">\r\n                <!-- Icon (Optional) -->\r\n                <span *ngIf=\"mergedConfig.icon\" class=\"modal-header__icon\">\r\n                    <ng-container [ngSwitch]=\"resolveIconType(mergedConfig.icon)\">\r\n                        <mat-icon *ngSwitchCase=\"'material'\" [style.color]=\"getIconColor(mergedConfig.icon)\">\r\n                            {{ getIconValue(mergedConfig.icon) }}\r\n                        </mat-icon>\r\n                        <img *ngSwitchCase=\"'custom'\" [src]=\"getIconValue(mergedConfig.icon)\"\r\n                            [attr.alt]=\"mergedConfig.labels?.iconAltText || mergedConfig.title + ' icon'\"\r\n                            class=\"modal-header__custom-icon\">\r\n                        <img *ngSwitchCase=\"'img'\" [src]=\"getIconValue(mergedConfig.icon)\"\r\n                            [attr.alt]=\"mergedConfig.labels?.iconAltText || mergedConfig.title + ' icon'\"\r\n                            class=\"modal-header__custom-icon\">\r\n                    </ng-container>\r\n                </span>\r\n\r\n                <!-- Title -->\r\n                <h2 class=\"modal-header__title\" [id]=\"'modal-title-' + mergedConfig.title\"\r\n                    [style.color]=\"mergedConfig.headerTextColor\">\r\n                    {{ mergedConfig.title }}\r\n                </h2>\r\n            </div>\r\n\r\n            <!-- Code Snippet Button -->\r\n            <button *ngIf=\"mergedConfig.showCodeSnippetButton\" type=\"button\" class=\"modal-header__code-btn\"\r\n                (click)=\"onShowCodeSnippet()\" [attr.aria-label]=\"mergedConfig.labels?.codeSnippetAriaLabel\"\r\n                [attr.title]=\"mergedConfig.labels?.codeSnippetTitle\">\r\n                <mat-icon>code</mat-icon>\r\n            </button>\r\n\r\n            <!-- Close Button -->\r\n            <button *ngIf=\"mergedConfig.showCloseButton\" type=\"button\" class=\"modal-header__close\" (click)=\"onClose()\"\r\n                [attr.aria-label]=\"mergedConfig.labels?.closeAriaLabel\">\r\n                <mat-icon>close</mat-icon>\r\n            </button>\r\n        </div>\r\n\r\n        <!-- Body (Content Projection) -->\r\n        <div class=\"cc-modal-body\" [ngClass]=\"{'cc-modal-body--form-mode': mergedConfig.formMode}\" [style.padding]=\"mergedConfig.padding\" [style.color]=\"mergedConfig.bodyTextColor\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n\r\n        <!-- Footer -->\r\n        <div class=\"cc-modal-footer\" [style.background-color]=\"mergedConfig.footerBackgroundColor\"\r\n            [style.border-top]=\"mergedConfig.footerBorderTop\">\r\n\r\n            <ng-container *ngIf=\"!mergedConfig.customFooter\">\r\n                <button *ngIf=\"mergedConfig.cancelButton?.show\" type=\"button\" class=\"cc-btn cc-btn-secondary\"\r\n                    (click)=\"onCancel()\">\r\n                    {{ mergedConfig.cancelButton?.label }}\r\n                </button>\r\n\r\n                <button type=\"button\" [ngClass]=\"getConfirmButtonClass()\"\r\n                    [disabled]=\"confirmDisabled || mergedConfig.confirmButton.disabled || confirmLoading || mergedConfig.confirmButton.loading\"\r\n                    (click)=\"onConfirm()\">\r\n                    <span *ngIf=\"confirmLoading || mergedConfig.confirmButton.loading\" class=\"cc-btn-spinner\"></span>\r\n                    {{ mergedConfig.confirmButton.label }}\r\n                </button>\r\n            </ng-container>\r\n\r\n            <ng-content select=\"[cc-modal-footer]\"></ng-content>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".cc-modal-backdrop{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease-in-out}.cc-modal-backdrop--side-panel{align-items:stretch;justify-content:flex-end}.cc-modal-container{background:var(--cc-modal-bg);border-radius:var(--cc-modal-radius);box-shadow:var(--cc-modal-shadow);border:var(--cc-modal-border, none);display:flex;flex-direction:column;max-height:90vh;max-width:90vw;animation:slideIn .3s ease-out;overflow:hidden}.cc-modal-container.side-panel{max-height:100vh;animation:slideInRight .3s ease-out;z-index:1001}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--cc-modal-header-padding);border-bottom:var(--cc-modal-header-border-bottom)}.modal-header__content{display:flex;align-items:center;gap:.75rem;flex:1}.modal-header__icon{display:flex;align-items:center;justify-content:center}.modal-header__icon mat-icon{font-size:var(--cc-modal-icon-size, 1.5rem);width:var(--cc-modal-icon-size, 1.5rem);height:var(--cc-modal-icon-size, 1.5rem)}.modal-header__custom-icon{width:var(--cc-modal-icon-size, 1.5rem);height:var(--cc-modal-icon-size, 1.5rem);object-fit:contain}.modal-header__title{margin:0;font-size:var(--cc-modal-title-size);font-weight:var(--cc-modal-title-weight);line-height:1.4;color:var(--cc-modal-title-color)}.modal-header__close{background:none;border:none;padding:.25rem;cursor:pointer;color:#6b7280;transition:color .2s;display:flex;align-items:center}.modal-header__close:hover{color:#111827}.modal-header__close mat-icon{font-size:var(--cc-modal-close-icon-size, 1.25rem);width:var(--cc-modal-close-icon-size, 1.25rem);height:var(--cc-modal-close-icon-size, 1.25rem)}.modal-header__code-btn{background:none;border:none;padding:.25rem;margin-right:.5rem;cursor:pointer;color:#6b7280;transition:all .2s;display:flex;align-items:center}.modal-header__code-btn:hover{color:#ef4444;transform:scale(1.1)}.modal-header__code-btn mat-icon{font-size:1.15rem;width:1.15rem;height:1.15rem}.modal-header--dark{background-color:var(--cc-modal-header-bg-dark, #262125);border-bottom:none}.modal-header--dark .modal-header__title{color:var(--cc-modal-header-title-color-dark, #FFFFFF)}.modal-header--dark .modal-header__close{color:var(--cc-modal-header-close-color-dark, rgba(255, 255, 255, .7))}.modal-header--dark .modal-header__close:hover{color:#fff}.modal-header--dark .modal-header__code-btn{color:var(--cc-modal-header-code-btn-color-dark, rgba(255, 255, 255, .7))}.modal-header--dark .modal-header__code-btn:hover{color:#fff}.cc-modal-body{padding:var(--cc-modal-body-padding);overflow-y:auto;flex:1;color:var(--cc-modal-body-color);font-size:.875rem;line-height:1.6}.cc-modal-body ::ng-deep input[type=text],.cc-modal-body ::ng-deep textarea,.cc-modal-body ::ng-deep select{width:100%;padding:var(--cc-modal-input-padding, .625rem .75rem);border:.0625rem solid #D1D5DB;border-radius:var(--cc-modal-input-radius, .375rem);font-size:var(--cc-modal-input-font-size, .875rem);transition:border-color .2s}.cc-modal-body ::ng-deep input[type=text]:focus,.cc-modal-body ::ng-deep textarea:focus,.cc-modal-body ::ng-deep select:focus{outline:none;border-color:var(--cc-btn-primary-bg, #3b82f6);box-shadow:0 0 0 .1875rem #3b82f61a}.cc-modal-body ::ng-deep textarea{resize:vertical;min-height:var(--cc-modal-textarea-min-height, 6.25rem)}.cc-modal-body ::ng-deep label{display:block;margin-bottom:var(--cc-modal-label-margin-bottom, .5rem);font-weight:500;color:var(--cc-modal-body-color)}.cc-modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:.75rem;padding:var(--cc-modal-footer-padding);border-top:var(--cc-modal-footer-border-top);background:var(--cc-modal-footer-bg)}.cc-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:var(--cc-btn-padding, .5rem 1rem);font-family:var(--cc-btn-font-family, inherit);font-weight:var(--cc-btn-font-weight, 500);font-size:var(--cc-btn-font-size, .875rem);cursor:pointer;transition:all .2s;min-width:5rem}.cc-btn:disabled{opacity:var(--cc-btn-disabled-opacity, .6);cursor:var(--cc-btn-disabled-cursor, not-allowed)}.cc-btn-secondary{background:var(--cc-btn-secondary-bg);color:var(--cc-btn-secondary-color);border:var(--cc-btn-secondary-border);border-radius:var(--cc-btn-secondary-radius)}.cc-btn-primary{background:var(--cc-btn-primary-bg);color:var(--cc-btn-primary-color);border:var(--cc-btn-primary-border);border-radius:var(--cc-btn-primary-radius)}.cc-btn-danger{background:var(--cc-btn-danger-bg);color:var(--cc-btn-danger-color);border:var(--cc-btn-danger-border);border-radius:var(--cc-btn-danger-radius)}.cc-btn-warning{background:var(--cc-btn-warning-bg);color:var(--cc-btn-warning-color);border:var(--cc-btn-warning-border);border-radius:var(--cc-btn-warning-radius)}.cc-btn-spinner{width:var(--cc-modal-spinner-size, 1rem);height:var(--cc-modal-spinner-size, 1rem);border:.125rem solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translateY(-1.25rem);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:40rem){.cc-modal-container{width:95vw!important;max-height:95vh}.modal-header,.cc-modal-body{padding:1rem}.cc-modal-footer{padding:.75rem 1rem;flex-direction:column}.cc-modal-footer .cc-btn{width:100%}}.cc-modal-body--form-mode{padding:0}.cc-modal-body--form-mode ::ng-deep .smart-form-wrapper,.cc-modal-body--form-mode ::ng-deep .smart-form-skeleton{box-shadow:none!important;border:none!important;padding:0!important;border-radius:0!important}.cc-modal-body--form-mode ::ng-deep .smart-form-wrapper{animation:none!important}.cc-modal-body--form-mode ::ng-deep .smart-form-skeleton{display:flex!important;align-items:center!important;justify-content:center!important;min-height:360px!important;gap:0!important}.cc-modal-body--form-mode ::ng-deep .smart-form-skeleton>*{display:none!important}.cc-modal-body--form-mode ::ng-deep .smart-form-skeleton:after{content:\"\";display:block;width:28px;height:28px;border:3px solid #E5E7EB;border-top-color:#6366f1;border-radius:50%;animation:cc-modal-skeleton-spin .7s linear infinite}.cc-modal-body--form-mode ::ng-deep .form-section-container{box-shadow:none!important;border:none!important}@keyframes cc-modal-skeleton-spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfirmationModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cc-confirmation-modal', standalone: false, template: "<div *ngIf=\"isOpen\" class=\"cc-modal-backdrop\" \r\n    [ngClass]=\"{'cc-modal-backdrop--side-panel': mergedConfig.type === 'side-panel'}\"\r\n    (click)=\"onBackdropClick($event)\" role=\"dialog\" [attr.aria-modal]=\"true\"\r\n    [attr.aria-labelledby]=\"'modal-title-' + mergedConfig.title\" [attr.aria-label]=\"mergedConfig.ariaLabel\"\r\n    [attr.aria-describedby]=\"mergedConfig.ariaDescribedBy\">\r\n\r\n    <div class=\"cc-modal-container {{ mergedConfig.customClass }}\" \r\n        [ngClass]=\"{'side-panel': mergedConfig.type === 'side-panel'}\"\r\n        [ngStyle]=\"getModalStyles()\" (click)=\"$event.stopPropagation()\">\r\n\r\n        <!-- Header -->\r\n        <div [ngClass]=\"getHeaderClass()\" [style.background-color]=\"mergedConfig.headerBackgroundColor\"\r\n            [style.border-bottom]=\"mergedConfig.headerBorderBottom\">\r\n            <div class=\"modal-header__content\">\r\n                <!-- Icon (Optional) -->\r\n                <span *ngIf=\"mergedConfig.icon\" class=\"modal-header__icon\">\r\n                    <ng-container [ngSwitch]=\"resolveIconType(mergedConfig.icon)\">\r\n                        <mat-icon *ngSwitchCase=\"'material'\" [style.color]=\"getIconColor(mergedConfig.icon)\">\r\n                            {{ getIconValue(mergedConfig.icon) }}\r\n                        </mat-icon>\r\n                        <img *ngSwitchCase=\"'custom'\" [src]=\"getIconValue(mergedConfig.icon)\"\r\n                            [attr.alt]=\"mergedConfig.labels?.iconAltText || mergedConfig.title + ' icon'\"\r\n                            class=\"modal-header__custom-icon\">\r\n                        <img *ngSwitchCase=\"'img'\" [src]=\"getIconValue(mergedConfig.icon)\"\r\n                            [attr.alt]=\"mergedConfig.labels?.iconAltText || mergedConfig.title + ' icon'\"\r\n                            class=\"modal-header__custom-icon\">\r\n                    </ng-container>\r\n                </span>\r\n\r\n                <!-- Title -->\r\n                <h2 class=\"modal-header__title\" [id]=\"'modal-title-' + mergedConfig.title\"\r\n                    [style.color]=\"mergedConfig.headerTextColor\">\r\n                    {{ mergedConfig.title }}\r\n                </h2>\r\n            </div>\r\n\r\n            <!-- Code Snippet Button -->\r\n            <button *ngIf=\"mergedConfig.showCodeSnippetButton\" type=\"button\" class=\"modal-header__code-btn\"\r\n                (click)=\"onShowCodeSnippet()\" [attr.aria-label]=\"mergedConfig.labels?.codeSnippetAriaLabel\"\r\n                [attr.title]=\"mergedConfig.labels?.codeSnippetTitle\">\r\n                <mat-icon>code</mat-icon>\r\n            </button>\r\n\r\n            <!-- Close Button -->\r\n            <button *ngIf=\"mergedConfig.showCloseButton\" type=\"button\" class=\"modal-header__close\" (click)=\"onClose()\"\r\n                [attr.aria-label]=\"mergedConfig.labels?.closeAriaLabel\">\r\n                <mat-icon>close</mat-icon>\r\n            </button>\r\n        </div>\r\n\r\n        <!-- Body (Content Projection) -->\r\n        <div class=\"cc-modal-body\" [ngClass]=\"{'cc-modal-body--form-mode': mergedConfig.formMode}\" [style.padding]=\"mergedConfig.padding\" [style.color]=\"mergedConfig.bodyTextColor\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n\r\n        <!-- Footer -->\r\n        <div class=\"cc-modal-footer\" [style.background-color]=\"mergedConfig.footerBackgroundColor\"\r\n            [style.border-top]=\"mergedConfig.footerBorderTop\">\r\n\r\n            <ng-container *ngIf=\"!mergedConfig.customFooter\">\r\n                <button *ngIf=\"mergedConfig.cancelButton?.show\" type=\"button\" class=\"cc-btn cc-btn-secondary\"\r\n                    (click)=\"onCancel()\">\r\n                    {{ mergedConfig.cancelButton?.label }}\r\n                </button>\r\n\r\n                <button type=\"button\" [ngClass]=\"getConfirmButtonClass()\"\r\n                    [disabled]=\"confirmDisabled || mergedConfig.confirmButton.disabled || confirmLoading || mergedConfig.confirmButton.loading\"\r\n                    (click)=\"onConfirm()\">\r\n                    <span *ngIf=\"confirmLoading || mergedConfig.confirmButton.loading\" class=\"cc-btn-spinner\"></span>\r\n                    {{ mergedConfig.confirmButton.label }}\r\n                </button>\r\n            </ng-container>\r\n\r\n            <ng-content select=\"[cc-modal-footer]\"></ng-content>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".cc-modal-backdrop{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease-in-out}.cc-modal-backdrop--side-panel{align-items:stretch;justify-content:flex-end}.cc-modal-container{background:var(--cc-modal-bg);border-radius:var(--cc-modal-radius);box-shadow:var(--cc-modal-shadow);border:var(--cc-modal-border, none);display:flex;flex-direction:column;max-height:90vh;max-width:90vw;animation:slideIn .3s ease-out;overflow:hidden}.cc-modal-container.side-panel{max-height:100vh;animation:slideInRight .3s ease-out;z-index:1001}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--cc-modal-header-padding);border-bottom:var(--cc-modal-header-border-bottom)}.modal-header__content{display:flex;align-items:center;gap:.75rem;flex:1}.modal-header__icon{display:flex;align-items:center;justify-content:center}.modal-header__icon mat-icon{font-size:var(--cc-modal-icon-size, 1.5rem);width:var(--cc-modal-icon-size, 1.5rem);height:var(--cc-modal-icon-size, 1.5rem)}.modal-header__custom-icon{width:var(--cc-modal-icon-size, 1.5rem);height:var(--cc-modal-icon-size, 1.5rem);object-fit:contain}.modal-header__title{margin:0;font-size:var(--cc-modal-title-size);font-weight:var(--cc-modal-title-weight);line-height:1.4;color:var(--cc-modal-title-color)}.modal-header__close{background:none;border:none;padding:.25rem;cursor:pointer;color:#6b7280;transition:color .2s;display:flex;align-items:center}.modal-header__close:hover{color:#111827}.modal-header__close mat-icon{font-size:var(--cc-modal-close-icon-size, 1.25rem);width:var(--cc-modal-close-icon-size, 1.25rem);height:var(--cc-modal-close-icon-size, 1.25rem)}.modal-header__code-btn{background:none;border:none;padding:.25rem;margin-right:.5rem;cursor:pointer;color:#6b7280;transition:all .2s;display:flex;align-items:center}.modal-header__code-btn:hover{color:#ef4444;transform:scale(1.1)}.modal-header__code-btn mat-icon{font-size:1.15rem;width:1.15rem;height:1.15rem}.modal-header--dark{background-color:var(--cc-modal-header-bg-dark, #262125);border-bottom:none}.modal-header--dark .modal-header__title{color:var(--cc-modal-header-title-color-dark, #FFFFFF)}.modal-header--dark .modal-header__close{color:var(--cc-modal-header-close-color-dark, rgba(255, 255, 255, .7))}.modal-header--dark .modal-header__close:hover{color:#fff}.modal-header--dark .modal-header__code-btn{color:var(--cc-modal-header-code-btn-color-dark, rgba(255, 255, 255, .7))}.modal-header--dark .modal-header__code-btn:hover{color:#fff}.cc-modal-body{padding:var(--cc-modal-body-padding);overflow-y:auto;flex:1;color:var(--cc-modal-body-color);font-size:.875rem;line-height:1.6}.cc-modal-body ::ng-deep input[type=text],.cc-modal-body ::ng-deep textarea,.cc-modal-body ::ng-deep select{width:100%;padding:var(--cc-modal-input-padding, .625rem .75rem);border:.0625rem solid #D1D5DB;border-radius:var(--cc-modal-input-radius, .375rem);font-size:var(--cc-modal-input-font-size, .875rem);transition:border-color .2s}.cc-modal-body ::ng-deep input[type=text]:focus,.cc-modal-body ::ng-deep textarea:focus,.cc-modal-body ::ng-deep select:focus{outline:none;border-color:var(--cc-btn-primary-bg, #3b82f6);box-shadow:0 0 0 .1875rem #3b82f61a}.cc-modal-body ::ng-deep textarea{resize:vertical;min-height:var(--cc-modal-textarea-min-height, 6.25rem)}.cc-modal-body ::ng-deep label{display:block;margin-bottom:var(--cc-modal-label-margin-bottom, .5rem);font-weight:500;color:var(--cc-modal-body-color)}.cc-modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:.75rem;padding:var(--cc-modal-footer-padding);border-top:var(--cc-modal-footer-border-top);background:var(--cc-modal-footer-bg)}.cc-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:var(--cc-btn-padding, .5rem 1rem);font-family:var(--cc-btn-font-family, inherit);font-weight:var(--cc-btn-font-weight, 500);font-size:var(--cc-btn-font-size, .875rem);cursor:pointer;transition:all .2s;min-width:5rem}.cc-btn:disabled{opacity:var(--cc-btn-disabled-opacity, .6);cursor:var(--cc-btn-disabled-cursor, not-allowed)}.cc-btn-secondary{background:var(--cc-btn-secondary-bg);color:var(--cc-btn-secondary-color);border:var(--cc-btn-secondary-border);border-radius:var(--cc-btn-secondary-radius)}.cc-btn-primary{background:var(--cc-btn-primary-bg);color:var(--cc-btn-primary-color);border:var(--cc-btn-primary-border);border-radius:var(--cc-btn-primary-radius)}.cc-btn-danger{background:var(--cc-btn-danger-bg);color:var(--cc-btn-danger-color);border:var(--cc-btn-danger-border);border-radius:var(--cc-btn-danger-radius)}.cc-btn-warning{background:var(--cc-btn-warning-bg);color:var(--cc-btn-warning-color);border:var(--cc-btn-warning-border);border-radius:var(--cc-btn-warning-radius)}.cc-btn-spinner{width:var(--cc-modal-spinner-size, 1rem);height:var(--cc-modal-spinner-size, 1rem);border:.125rem solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translateY(-1.25rem);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:40rem){.cc-modal-container{width:95vw!important;max-height:95vh}.modal-header,.cc-modal-body{padding:1rem}.cc-modal-footer{padding:.75rem 1rem;flex-direction:column}.cc-modal-footer .cc-btn{width:100%}}.cc-modal-body--form-mode{padding:0;min-height:360px}.cc-modal-body--form-mode ::ng-deep .smart-form-wrapper,.cc-modal-body--form-mode ::ng-deep .smart-form-skeleton{box-shadow:none!important;border:none!important;padding:0!important;border-radius:0!important}.cc-modal-body--form-mode ::ng-deep .smart-form-wrapper{animation:none!important}.cc-modal-body--form-mode ::ng-deep .smart-form-skeleton{display:flex!important;align-items:center!important;justify-content:center!important;min-height:360px!important;gap:0!important}.cc-modal-body--form-mode ::ng-deep .smart-form-skeleton>*{display:none!important}.cc-modal-body--form-mode ::ng-deep .smart-form-skeleton:after{content:\"\";display:block;width:28px;height:28px;border:3px solid #E5E7EB;border-top-color:#6366f1;border-radius:50%;animation:cc-modal-skeleton-spin .7s linear infinite}.cc-modal-body--form-mode ::ng-deep .form-section-container{box-shadow:none!important;border:none!important}@keyframes cc-modal-skeleton-spin{to{transform:rotate(360deg)}}\n"] }]
+            args: [{ selector: 'cc-confirmation-modal', standalone: false, template: "<div *ngIf=\"isOpen\" class=\"cc-modal-backdrop\" \r\n    [ngClass]=\"{'cc-modal-backdrop--side-panel': mergedConfig.type === 'side-panel'}\"\r\n    (click)=\"onBackdropClick($event)\" role=\"dialog\" [attr.aria-modal]=\"true\"\r\n    [attr.aria-labelledby]=\"'modal-title-' + mergedConfig.title\" [attr.aria-label]=\"mergedConfig.ariaLabel\"\r\n    [attr.aria-describedby]=\"mergedConfig.ariaDescribedBy\">\r\n\r\n    <div class=\"cc-modal-container {{ mergedConfig.customClass }}\" \r\n        [ngClass]=\"{'side-panel': mergedConfig.type === 'side-panel'}\"\r\n        [ngStyle]=\"getModalStyles()\" (click)=\"$event.stopPropagation()\">\r\n\r\n        <!-- Header -->\r\n        <div [ngClass]=\"getHeaderClass()\" [style.background-color]=\"mergedConfig.headerBackgroundColor\"\r\n            [style.border-bottom]=\"mergedConfig.headerBorderBottom\">\r\n            <div class=\"modal-header__content\">\r\n                <!-- Icon (Optional) -->\r\n                <span *ngIf=\"mergedConfig.icon\" class=\"modal-header__icon\">\r\n                    <ng-container [ngSwitch]=\"resolveIconType(mergedConfig.icon)\">\r\n                        <mat-icon *ngSwitchCase=\"'material'\" [style.color]=\"getIconColor(mergedConfig.icon)\">\r\n                            {{ getIconValue(mergedConfig.icon) }}\r\n                        </mat-icon>\r\n                        <img *ngSwitchCase=\"'custom'\" [src]=\"getIconValue(mergedConfig.icon)\"\r\n                            [attr.alt]=\"mergedConfig.labels?.iconAltText || mergedConfig.title + ' icon'\"\r\n                            class=\"modal-header__custom-icon\">\r\n                        <img *ngSwitchCase=\"'img'\" [src]=\"getIconValue(mergedConfig.icon)\"\r\n                            [attr.alt]=\"mergedConfig.labels?.iconAltText || mergedConfig.title + ' icon'\"\r\n                            class=\"modal-header__custom-icon\">\r\n                    </ng-container>\r\n                </span>\r\n\r\n                <!-- Title -->\r\n                <h2 class=\"modal-header__title\" [id]=\"'modal-title-' + mergedConfig.title\"\r\n                    [style.color]=\"mergedConfig.headerTextColor\">\r\n                    {{ mergedConfig.title }}\r\n                </h2>\r\n            </div>\r\n\r\n            <!-- Code Snippet Button -->\r\n            <button *ngIf=\"mergedConfig.showCodeSnippetButton\" type=\"button\" class=\"modal-header__code-btn\"\r\n                (click)=\"onShowCodeSnippet()\" [attr.aria-label]=\"mergedConfig.labels?.codeSnippetAriaLabel\"\r\n                [attr.title]=\"mergedConfig.labels?.codeSnippetTitle\">\r\n                <mat-icon>code</mat-icon>\r\n            </button>\r\n\r\n            <!-- Close Button -->\r\n            <button *ngIf=\"mergedConfig.showCloseButton\" type=\"button\" class=\"modal-header__close\" (click)=\"onClose()\"\r\n                [attr.aria-label]=\"mergedConfig.labels?.closeAriaLabel\">\r\n                <mat-icon>close</mat-icon>\r\n            </button>\r\n        </div>\r\n\r\n        <!-- Body (Content Projection) -->\r\n        <div class=\"cc-modal-body\" [ngClass]=\"{'cc-modal-body--form-mode': mergedConfig.formMode}\" [style.padding]=\"mergedConfig.padding\" [style.color]=\"mergedConfig.bodyTextColor\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n\r\n        <!-- Footer -->\r\n        <div class=\"cc-modal-footer\" [style.background-color]=\"mergedConfig.footerBackgroundColor\"\r\n            [style.border-top]=\"mergedConfig.footerBorderTop\">\r\n\r\n            <ng-container *ngIf=\"!mergedConfig.customFooter\">\r\n                <button *ngIf=\"mergedConfig.cancelButton?.show\" type=\"button\" class=\"cc-btn cc-btn-secondary\"\r\n                    (click)=\"onCancel()\">\r\n                    {{ mergedConfig.cancelButton?.label }}\r\n                </button>\r\n\r\n                <button type=\"button\" [ngClass]=\"getConfirmButtonClass()\"\r\n                    [disabled]=\"confirmDisabled || mergedConfig.confirmButton.disabled || confirmLoading || mergedConfig.confirmButton.loading\"\r\n                    (click)=\"onConfirm()\">\r\n                    <span *ngIf=\"confirmLoading || mergedConfig.confirmButton.loading\" class=\"cc-btn-spinner\"></span>\r\n                    {{ mergedConfig.confirmButton.label }}\r\n                </button>\r\n            </ng-container>\r\n\r\n            <ng-content select=\"[cc-modal-footer]\"></ng-content>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".cc-modal-backdrop{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease-in-out}.cc-modal-backdrop--side-panel{align-items:stretch;justify-content:flex-end}.cc-modal-container{background:var(--cc-modal-bg);border-radius:var(--cc-modal-radius);box-shadow:var(--cc-modal-shadow);border:var(--cc-modal-border, none);display:flex;flex-direction:column;max-height:90vh;max-width:90vw;animation:slideIn .3s ease-out;overflow:hidden}.cc-modal-container.side-panel{max-height:100vh;animation:slideInRight .3s ease-out;z-index:1001}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--cc-modal-header-padding);border-bottom:var(--cc-modal-header-border-bottom)}.modal-header__content{display:flex;align-items:center;gap:.75rem;flex:1}.modal-header__icon{display:flex;align-items:center;justify-content:center}.modal-header__icon mat-icon{font-size:var(--cc-modal-icon-size, 1.5rem);width:var(--cc-modal-icon-size, 1.5rem);height:var(--cc-modal-icon-size, 1.5rem)}.modal-header__custom-icon{width:var(--cc-modal-icon-size, 1.5rem);height:var(--cc-modal-icon-size, 1.5rem);object-fit:contain}.modal-header__title{margin:0;font-size:var(--cc-modal-title-size);font-weight:var(--cc-modal-title-weight);line-height:1.4;color:var(--cc-modal-title-color)}.modal-header__close{background:none;border:none;padding:.25rem;cursor:pointer;color:#6b7280;transition:color .2s;display:flex;align-items:center}.modal-header__close:hover{color:#111827}.modal-header__close mat-icon{font-size:var(--cc-modal-close-icon-size, 1.25rem);width:var(--cc-modal-close-icon-size, 1.25rem);height:var(--cc-modal-close-icon-size, 1.25rem)}.modal-header__code-btn{background:none;border:none;padding:.25rem;margin-right:.5rem;cursor:pointer;color:#6b7280;transition:all .2s;display:flex;align-items:center}.modal-header__code-btn:hover{color:#ef4444;transform:scale(1.1)}.modal-header__code-btn mat-icon{font-size:1.15rem;width:1.15rem;height:1.15rem}.modal-header--dark{background-color:var(--cc-modal-header-bg-dark, #262125);border-bottom:none}.modal-header--dark .modal-header__title{color:var(--cc-modal-header-title-color-dark, #FFFFFF)}.modal-header--dark .modal-header__close{color:var(--cc-modal-header-close-color-dark, rgba(255, 255, 255, .7))}.modal-header--dark .modal-header__close:hover{color:#fff}.modal-header--dark .modal-header__code-btn{color:var(--cc-modal-header-code-btn-color-dark, rgba(255, 255, 255, .7))}.modal-header--dark .modal-header__code-btn:hover{color:#fff}.cc-modal-body{padding:var(--cc-modal-body-padding);overflow-y:auto;flex:1;color:var(--cc-modal-body-color);font-size:.875rem;line-height:1.6}.cc-modal-body ::ng-deep input[type=text],.cc-modal-body ::ng-deep textarea,.cc-modal-body ::ng-deep select{width:100%;padding:var(--cc-modal-input-padding, .625rem .75rem);border:.0625rem solid #D1D5DB;border-radius:var(--cc-modal-input-radius, .375rem);font-size:var(--cc-modal-input-font-size, .875rem);transition:border-color .2s}.cc-modal-body ::ng-deep input[type=text]:focus,.cc-modal-body ::ng-deep textarea:focus,.cc-modal-body ::ng-deep select:focus{outline:none;border-color:var(--cc-btn-primary-bg, #3b82f6);box-shadow:0 0 0 .1875rem #3b82f61a}.cc-modal-body ::ng-deep textarea{resize:vertical;min-height:var(--cc-modal-textarea-min-height, 6.25rem)}.cc-modal-body ::ng-deep label{display:block;margin-bottom:var(--cc-modal-label-margin-bottom, .5rem);font-weight:500;color:var(--cc-modal-body-color)}.cc-modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:.75rem;padding:var(--cc-modal-footer-padding);border-top:var(--cc-modal-footer-border-top);background:var(--cc-modal-footer-bg)}.cc-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:var(--cc-btn-padding, .5rem 1rem);font-family:var(--cc-btn-font-family, inherit);font-weight:var(--cc-btn-font-weight, 500);font-size:var(--cc-btn-font-size, .875rem);cursor:pointer;transition:all .2s;min-width:5rem}.cc-btn:disabled{opacity:var(--cc-btn-disabled-opacity, .6);cursor:var(--cc-btn-disabled-cursor, not-allowed)}.cc-btn-secondary{background:var(--cc-btn-secondary-bg);color:var(--cc-btn-secondary-color);border:var(--cc-btn-secondary-border);border-radius:var(--cc-btn-secondary-radius)}.cc-btn-primary{background:var(--cc-btn-primary-bg);color:var(--cc-btn-primary-color);border:var(--cc-btn-primary-border);border-radius:var(--cc-btn-primary-radius)}.cc-btn-danger{background:var(--cc-btn-danger-bg);color:var(--cc-btn-danger-color);border:var(--cc-btn-danger-border);border-radius:var(--cc-btn-danger-radius)}.cc-btn-warning{background:var(--cc-btn-warning-bg);color:var(--cc-btn-warning-color);border:var(--cc-btn-warning-border);border-radius:var(--cc-btn-warning-radius)}.cc-btn-spinner{width:var(--cc-modal-spinner-size, 1rem);height:var(--cc-modal-spinner-size, 1rem);border:.125rem solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translateY(-1.25rem);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:40rem){.cc-modal-container{width:95vw!important;max-height:95vh}.modal-header,.cc-modal-body{padding:1rem}.cc-modal-footer{padding:.75rem 1rem;flex-direction:column}.cc-modal-footer .cc-btn{width:100%}}.cc-modal-body--form-mode{padding:0}.cc-modal-body--form-mode ::ng-deep .smart-form-wrapper,.cc-modal-body--form-mode ::ng-deep .smart-form-skeleton{box-shadow:none!important;border:none!important;padding:0!important;border-radius:0!important}.cc-modal-body--form-mode ::ng-deep .smart-form-wrapper{animation:none!important}.cc-modal-body--form-mode ::ng-deep .smart-form-skeleton{display:flex!important;align-items:center!important;justify-content:center!important;min-height:360px!important;gap:0!important}.cc-modal-body--form-mode ::ng-deep .smart-form-skeleton>*{display:none!important}.cc-modal-body--form-mode ::ng-deep .smart-form-skeleton:after{content:\"\";display:block;width:28px;height:28px;border:3px solid #E5E7EB;border-top-color:#6366f1;border-radius:50%;animation:cc-modal-skeleton-spin .7s linear infinite}.cc-modal-body--form-mode ::ng-deep .form-section-container{box-shadow:none!important;border:none!important}@keyframes cc-modal-skeleton-spin{to{transform:rotate(360deg)}}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], isOpen: [{